/* ==========================================================================
   EasternLoop — shared design system
   ========================================================================== */

:root{
  --ink:#04070c;
  --deep:#081627;
  --panel:#0d2036;
  --panel-2:#122a45;
  --line:rgba(238,241,244,.09);
  --line-soft:rgba(238,241,244,.06);
  --steel:#5b93ba;
  --steel-dim:rgba(79,132,172,.28);
  --brass:#c8a45c;
  --brass-hi:#e8caa0;
  --brass-dim:rgba(200,164,92,.3);
  --brand-teal: #07899b;
  --brand-cyan: #49a6b5;
  --brand-silver: #aeb4b9;
  --brand-navy: #030a11;
  --paper:#eef1f4;
  --muted:rgba(238,241,244,.6);
  --faint:rgba(238,241,244,.36);
  --display:'Source Sans 3', system-ui, sans-serif;
  --sans:'Source Sans 3', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --arabic:'IBM Plex Sans Arabic', system-ui, sans-serif;
  --wrap: min(1240px, 92%);
}

*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{background:var(--ink); color:var(--paper); font-family:var(--sans)}
img, svg, video, canvas{max-width:100%; height:auto; display:block}
a{color:inherit}
ul{list-style:none}

::selection{background:var(--brass); color:#1a1305}

:focus-visible{outline:1px solid var(--brass); outline-offset:3px}

/* ---------------------------------- layout helpers ---------------------------------- */
.wrap{width:min(calc(100% - 40px), var(--wrap)); margin-inline:auto; min-width:0}
.wrap > *{min-width:0}
.section{position:relative; padding:clamp(4.5rem,9vw,7.5rem) 0}
.section-tight{padding:clamp(3rem,6vw,4.5rem) 0}
.on-deep{background:var(--deep)}
.on-panel{background:linear-gradient(180deg, var(--panel) 0%, var(--deep) 100%)}
.divider{border:0; border-top:1px solid var(--line); width:100%}

.eyebrow{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--steel); margin-bottom:1.1rem;
}
.eyebrow .rule{width:28px; height:1px; background:var(--brass-dim); flex:none}

h1,h2,h3{font-family:var(--display); color:var(--paper); font-weight:600; letter-spacing:-.01em; text-wrap:balance; overflow-wrap:break-word; word-break:break-word}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.1}
h3{font-size:clamp(1.2rem,1.7vw,1.45rem); line-height:1.3; font-weight:600}
em{font-style:italic; font-weight:600; color:var(--brass-hi)}

p{line-height:1.7; overflow-wrap:break-word; word-break:break-word}
.lead{color:var(--muted); font-size:clamp(1rem,1.2vw,1.08rem); max-width:42rem}

.section-head{max-width:44rem; margin-bottom:clamp(2.4rem,5vw,3.4rem)}
.section-head.center{margin-inline:auto; text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head.center .lead{margin-inline:auto}

/* ---------------------------------- buttons ---------------------------------- */
.btn{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.95rem 1.7rem; text-decoration:none; display:inline-flex; align-items:center; gap:.65rem;
  transition:transform .3s cubic-bezier(.16,.84,.32,1), background .3s, border-color .3s, color .3s;
  cursor:pointer; border:1px solid transparent; background:none; color:inherit; min-width:0; flex-wrap:wrap;
}
.btn-primary{background:var(--brand-cyan); color:var(--brand-navy); font-weight:500; border-color:var(--brand-cyan)}
.btn-primary:hover{background:var(--brand-teal); color:#fff; border-color:var(--brand-teal); transform:translateY(-1px)}
.btn-primary:focus-visible{outline:3px solid var(--brand-cyan); outline-offset:3px; box-shadow:none}
.btn-primary:hover svg{transform:translateX(3px)}
.btn-ghost{color:var(--paper); border-color:rgba(238,241,244,.22)}
.btn-ghost:hover, .btn-ghost:focus-visible{border-color:var(--brass); color:var(--brass-hi)}
.btn-text{color:var(--muted); border-bottom:1px solid rgba(238,241,244,.22); padding:.3rem 0}
.btn-text:hover, .btn-text:focus-visible{color:var(--paper); border-color:var(--paper)}
.btn svg{width:12px;height:12px; transition:transform .3s; flex:none}
.btn:hover svg{transform:translateX(3px)}
.actions{display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem}

/* ---------------------------------- nav ---------------------------------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.05rem clamp(1.1rem,4vw,3.2rem);
  border-bottom:1px solid var(--line);
  background:rgba(4,7,12,.72);
  backdrop-filter:blur(12px);
}
.brand{display:flex; align-items:center; text-decoration:none}
.brand img{
  width:205px; /* Desktop width */
  height:auto;
  max-width:none;
  max-height:none;
  flex-shrink:0;
  display:block;
  object-fit:contain;
}
.nav-links{display:flex; align-items:center; gap:clamp(1.1rem,2.2vw,2.1rem)}
.nav-links a{
  position:relative; font-family:var(--mono); font-size:.71rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; padding-block:.3rem;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--brass);
  transition:right .3s cubic-bezier(.16,.84,.32,1);
}
.nav-links a:hover::after, .nav-links a.active::after, .nav-links a:focus-visible::after{right:0}
.nav-links a:hover, .nav-links a.active, .nav-links a:focus-visible{color:var(--paper)}
.nav-cta{margin-left:.4rem}
.nav-right{display:flex; align-items:center; gap:1.6rem}
.nav-toggle{display:none; background:none; border:0; color:var(--paper); padding:.4rem; cursor:pointer}
.nav-toggle svg{width:22px; height:22px}

@media (max-width:900px){
  .nav-links{
    position:fixed; top:0; left:100%; right:auto; width:min(320px,84vw); max-width:100vw; height:100vh;
    background:var(--deep); border-left:1px solid var(--line);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:5.5rem 2rem 2rem; gap:1.6rem;
    transform:none; transition:left .38s cubic-bezier(.16,.84,.32,1);
  }
  .nav-links a{font-size:.85rem}
  body.menu-open{overflow:hidden}
  body.menu-open .nav-links{left:auto; right:0}
  .nav-toggle{display:inline-flex}
  .nav-cta.desktop-only{display:none}
}

@media (max-width:1024px){
  .brand img{width:180px}
}

@media (max-width:768px){
  .brand img{width:160px}
}

/* ---------------------------------- page header (sub-pages) ---------------------------------- */
.page-header{
  position:relative; overflow:hidden;
  padding:clamp(4rem,10vw,7rem) 0 clamp(3rem,6vw,4.5rem);
  background:
    linear-gradient(180deg, rgba(4,7,12,.2), var(--ink) 88%),
    radial-gradient(120% 90% at 50% 0%, #0c2440 0%, #071729 46%, var(--ink) 82%);
}
.page-header::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:url('../assets/skyline.webp');
  background-position:center bottom; background-size:cover; background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 92%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 92%);
}
.page-header .wrap{position:relative; z-index:1}
.page-header h1{font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1.05; max-width:38rem}
.page-header .lead{margin-top:1.2rem}

/* ---------------------------------- cards / grids ---------------------------------- */
.grid{display:grid; gap:1.4rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.cap-strip{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:2rem}
.cap-item{display:flex; align-items:flex-start; gap:.8rem; color:var(--muted); font-size:.98rem; line-height:1.6}
.cap-item svg{width:1.45rem; height:1.45rem; flex:none; margin-top:.2rem; color:var(--brass-hi); stroke:currentColor}
.loop-diagram{position:relative; display:flex; justify-content:center; align-items:center; min-height:28rem; width:100%}
.loop-diagram svg{display:block; width:100%; max-width:26rem; height:auto; overflow:visible}
.loop-labels{position:absolute; inset:0; pointer-events:none}
.loop-label{position:absolute; width:min(180px, 38vw); max-width:180px; min-width:140px; display:flex; flex-direction:column; align-items:center; gap:.25rem; color:var(--paper); text-align:center;}
.loop-label-title{font-family:var(--display); font-size:clamp(.8rem,1vw,.96rem); letter-spacing:0.04em; opacity:.98; line-height:1.2}
.loop-label-sub{font-family:var(--mono); font-size:clamp(.62rem,.82vw,.72rem); letter-spacing:.18em; text-transform:uppercase; color:var(--steel); opacity:.85; line-height:1.3}
.loop-label-top{left:50%; top:-24px; transform:translateX(-50%); text-align:center;}
.loop-label-bottom{left:50%; bottom:-24px; transform:translateX(-50%); text-align:center;}
.loop-label-right{left:calc(50% + 150px); top:50%; transform:translateY(-50%); align-items:flex-start; text-align:left;}
.loop-label-left{left:calc(50% - 330px); top:50%; transform:translateY(-50%); align-items:flex-end; text-align:right;}
.loop-diagram .outer-ring-main{opacity:.9}
.loop-diagram .outer-ring-dashed{opacity:.55}
.loop-diagram .draw-path{stroke-linecap:round; stroke-dasharray:var(--len); stroke-dashoffset:var(--len); transition:stroke-dashoffset .92s cubic-bezier(.16,.84,.32,1)}
.loop-diagram .draw-path.in{stroke-dashoffset:0}
.loop-diagram .hub{opacity:0; transform:scale(.96); transition:opacity .45s ease-out .8s, transform .45s ease-out .8s}
.loop-diagram.in .hub{opacity:1; transform:none}
.loop-diagram .radial-line{stroke:var(--steel-dim); stroke-width:1.2; stroke-linecap:round; opacity:0; transition:opacity .35s ease-out .95s, stroke .35s ease-out .95s, stroke-width .35s ease-out .95s}
.loop-diagram.in .radial-line{opacity:.4}
.loop-node{opacity:.9}
.loop-node .node-ring{fill:none; stroke:var(--line); stroke-width:1.2; transition:stroke .35s ease-out, filter .35s ease-out}
.loop-node .node-icon{fill:none; stroke:var(--steel-dim); opacity:.55; transition:stroke .35s ease-out, opacity .35s ease-out}
.loop-node.active .node-ring{stroke:var(--brass-hi); filter:url(#softGlow);}
.loop-node.active .node-icon{stroke:var(--brass-hi); opacity:1}
.loop-node.active .radial-line{stroke:var(--brass-hi); stroke-width:1.7; opacity:1}
.loop-diagram .energy-path{opacity:.95; stroke-dashoffset:0; transition:opacity .4s ease-out; animation:energy-rotate 3s linear infinite paused}
.loop-diagram .energy-path.pulse-on{animation-play-state:running}
.loop-labels{display:block}
.discipline-cards{display:none}
.discipline-card{background:rgba(238,241,244,.03); border:1px solid rgba(238,241,244,.08); padding:1rem 1rem; display:flex; flex-direction:column; gap:.35rem; align-items:flex-start; justify-content:center; min-height:88px;}
.discipline-card strong{font-family:var(--display); font-size:.92rem; line-height:1.2; color:var(--paper)}
.discipline-card span{font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--steel);}
@media (prefers-reduced-motion: reduce){
  .loop-diagram .draw-path, .loop-diagram .energy-path {
    animation:none !important;
    transition:none !important;
  }
  .loop-diagram .radial-line, .loop-node .node-icon, .loop-node .loop-node-label, .loop-node .loop-node-sub, .hub {
    transition:none !important;
  }
}
.metric-label{fill:var(--steel-dim); font-family:var(--mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase}
.dir-arrow{fill:var(--brass-hi); opacity:.68}
.hub-label{fill:var(--paper); font-family:var(--display); font-size:.75rem; letter-spacing:.08em; font-weight:600}
.hub-sub{fill:var(--brass-hi); font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase}
@keyframes energy-rotate{to{stroke-dashoffset:-320}}
@media (max-width:900px){ .cap-strip{grid-template-columns:1fr} }
@media (max-width:700px){
  .loop-labels{display:none}
  .discipline-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1.5rem}
  .loop-diagram{min-height:auto}
  .loop-diagram svg{max-width:22rem}
}
@media (max-width:640px){ .loop-diagram{min-height:0; margin-top:1.8rem} .loop-diagram svg{max-width:100%} }

.card{
  border:1px solid var(--line); background:rgba(238,241,244,.02);
  padding:1.9rem 1.7rem; transition:border-color .3s, transform .3s, background .3s;
}
.card:hover{border-color:var(--brass-dim); background:rgba(238,241,244,.035); transform:translateY(-2px)}
.card .num{font-family:var(--mono); font-size:.7rem; color:var(--brass); letter-spacing:.14em; margin-bottom:.9rem; display:block}
.card h3{margin-bottom:.6rem}
.card p{color:var(--muted); font-size:.94rem}
.card ul{margin-top:.9rem; display:grid; gap:.4rem}
.card ul li{
  font-size:.84rem; color:var(--faint); padding-left:1rem; position:relative; line-height:1.5;
}
.card ul li::before{content:"—"; position:absolute; left:0; color:var(--steel-dim)}

/* lifecycle steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.step{padding:0 1.6rem 0 0; border-right:1px solid var(--line)}
.step:last-child{border-right:0; padding-right:0}
.step .num{font-family:var(--mono); font-size:.72rem; color:var(--brass); letter-spacing:.14em; display:block; margin-bottom:1rem}
.step h3{margin-bottom:.6rem}
.step p{color:var(--muted); font-size:.9rem}
@media (max-width:900px){
  .steps{grid-template-columns:1fr 1fr; row-gap:2.4rem}
  .step{border-right:0; border-bottom:1px solid var(--line); padding:0 1.4rem 1.8rem 0}
}
@media (max-width:560px){ .steps{grid-template-columns:1fr} .step{padding-right:0} }

/* stat / value blocks */
.value{padding:0}
.value h3{margin-bottom:.5rem}
.value p{color:var(--muted); font-size:.92rem}

/* ---------------------------------- forms ---------------------------------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem 1.4rem}
.form-grid > *{min-width:0}
.field{display:flex; flex-direction:column; gap:.55rem}
.field.full{grid-column:1/-1}
.field label{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--faint);
}
.field input, .field select, .field textarea{
  background:rgba(238,241,244,.03); border:1px solid var(--line); color:var(--paper);
  font-family:var(--sans); font-size:.95rem; padding:.85rem .95rem;
  transition:border-color .25s, background .25s;
}
.field input::placeholder, .field textarea::placeholder{color:var(--faint)}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--brass-dim); background:rgba(238,241,244,.05);
}
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--steel-dim) }
.field textarea{resize:vertical; min-height:120px}
.field input[type="file"]{padding:.7rem .95rem; color:var(--muted)}
@media (max-width:700px){ .form-grid{grid-template-columns:1fr} }

.contact-card{border:1px solid var(--line); padding:1.8rem; display:flex; flex-direction:column; gap:.35rem; transition:border-color .3s, transform .3s}
.contact-card:hover{border-color:var(--brass-dim); transform:translateY(-2px)}
.contact-card .k{font-family:var(--mono); font-size:.63rem; letter-spacing:.15em; text-transform:uppercase; color:var(--faint)}
.contact-card .v{font-size:1.02rem; color:var(--paper)}
.contact-card .v a{text-decoration:none; border-bottom:1px solid var(--brass-dim)}
.contact-card .v a:hover{color:var(--brass-hi); border-color:var(--brass-hi)}

.note{
  font-size:.82rem; color:var(--faint); border-left:2px solid var(--brass-dim); padding-left:.9rem; margin-top:.6rem;
}

/* ---------------------------------- footer ---------------------------------- */
.site-footer{background:var(--ink); border-top:1px solid var(--line); padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; padding-bottom:3rem;
  border-bottom:1px solid var(--line);
}
.footer-brand img{
  display:block;
  max-width:200px;
  width:auto;
  height:auto;
  margin-bottom:1rem;
}
.footer-brand p{color:var(--faint); font-size:.9rem; max-width:26rem}
.footer-col h4{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--faint);
  margin-bottom:1.1rem;
}
.footer-col ul{display:grid; gap:.7rem}
.footer-col a{font-size:.88rem; color:var(--muted); text-decoration:none}
.footer-col a:hover{color:var(--brass-hi)}
.footer-col .contact-line{color:var(--muted); font-size:.88rem; line-height:1.8}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding-top:1.6rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--faint);
}
@media (max-width:900px){
  html, body{overflow-x:hidden;}
  .grid-2, .grid-3, .grid-4, .svc-grid{grid-template-columns:1fr !important}
  .grid-2 > *, .grid-3 > *, .grid-4 > *, .svc-grid > *, .form-grid > *, .cap-strip > *, .sector-card{min-width:0}
  .nav-links{
    position:fixed; inset:0 auto 0 0; width:min(360px,84vw); max-width:100vw; height:100vh;
    box-sizing:border-box;
    background:var(--deep); border-left:1px solid var(--line);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:5.5rem 1.5rem 2rem; gap:1.2rem;
    transform:translateX(100%); transition:transform .38s cubic-bezier(.16,.84,.32,1);
    overflow-y:auto; overscroll-behavior:block;
  }
  .nav-links a{font-size:.85rem; min-height:44px; padding-top:.75rem; padding-bottom:.75rem}
  body.menu-open, html.menu-open{overflow:hidden;}
  body.menu-open .nav-links{transform:translateX(0);}
  .nav-toggle{display:inline-flex}
  .nav-cta.desktop-only{display:none}
  .page-header, .section, .hero .stage{padding-inline:20px}
  .section{padding-top:3rem; padding-bottom:3rem}
  .actions{flex-direction:column; align-items:stretch}
  .btn{width:auto; justify-content:center}
}
@media (max-width:760px){
  .bp-grid{ animation-duration:80s }
  .energy-path{ animation-duration:10s }
}
@media (max-width:700px){
  .loop-labels{display:none}
  .discipline-cards{display:grid; width:100%; max-width:100%; grid-template-columns:1fr; gap:1rem; margin-top:1.5rem}
  .loop-diagram{min-height:auto; display:flex; flex-direction:column; align-items:center; gap:1.5rem;}
  .loop-diagram > *{min-width:0; width:100%}
  .loop-diagram svg{max-width:22rem}
  .form-grid{grid-template-columns:1fr}
  .site-nav{padding:1rem 1rem}
}
@media (max-width:640px){
  .loop-diagram{min-height:0; margin-top:1.8rem}
  .loop-diagram svg{max-width:100%}
  .hero .skyline,
  .hero .grid-layer,
  .hero .zoom{left:0; transform:none; width:100%; max-width:100%}
  .hero .skyline img{width:100%;}
  .page-header, .section, .hero .stage{padding-inline:18px}
  .section{padding-top:2.5rem; padding-bottom:2.5rem}
  .nav-links{width:100vw; max-width:100vw; inset:0; left:0; right:0;}
  .cap-strip{flex-direction:column}
  .grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
}
@media (max-width:560px){ .footer-top{grid-template-columns:1fr} }

/* ---------------------------------- reveal-on-load ---------------------------------- */
.js .up{opacity:0; transform:translateY(16px); animation:up .9s cubic-bezier(.16,.84,.32,1) forwards}
.d1{animation-delay:.1s} .d2{animation-delay:.24s} .d3{animation-delay:.38s} .d4{animation-delay:.52s} .d5{animation-delay:.7s}
@keyframes up{ to{opacity:1; transform:none} }

.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .8s cubic-bezier(.16,.84,.32,1), transform .8s cubic-bezier(.16,.84,.32,1)}
.js .reveal.in{opacity:1; transform:none}

.up,.reveal{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .up,.reveal{opacity:1; transform:none}
}

.visually-hidden{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.visually-hidden:focus,
.visually-hidden:focus-visible{
  position:static; width:auto; height:auto; overflow:visible; clip:auto;
  margin:1rem; padding:.85rem 1rem; background:var(--ink); color:var(--paper);
  border:1px solid var(--brass); z-index:1000;
}

.visually-hidden{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.visually-hidden:focus,
.visually-hidden:focus-visible{
  position:static; width:auto; height:auto; overflow:visible; clip:auto;
  margin:1rem; padding:.85rem 1rem; background:var(--ink); color:var(--paper);
  border:1px solid var(--brass); z-index:1000;
}

.footer-note{color:var(--faint); font-size:.88rem;}