/* ============================================================================
   Industra, Brand System v1 (LOCKED). Deep mode.
   Tokens are authoritative: do not introduce colours outside this block.

   THE ONE-GOLD-MARK RULE
   --gold appears exactly once per page, as .blade, at the single decision point.
   Two golds means one is wrong. Gold is never on text, never on data, never on
   icons, never part of a gradient. Signal carries everything else.
   ========================================================================= */

:root{
  /* palette, locked */
  --navy:        #1B2A56;
  --navy-deep:   #0A1024;
  --navy-panel:  #14213F;
  --signal:      #1BC7CE;
  --signal-bright:#46E8DF;
  --signal-deep: #0A6E7A;
  --gold:        #EAC331;
  --ink:         #EAF0FF;
  --mute:        #8695BC;
  --dk-ink:      #12203F;
  --dk-mute:     #5D6A88;
  --paper:       #FFFFFF;
  --mist:        #F4F6FB;

  /* derived text ramp. --mute is locked but too close in hue to the background to
     carry reading copy, so body text uses --ink-2 (near-neutral, 12.4:1) and small
     labels use --ink-3 (8.4:1). Chroma is dropped, not just luminance raised. */
  --ink-2:       #CCD2DE;
  --ink-3:       #A6AFC2;

  /* derived surfaces */
  --panel-2:     #0E1730;
  --rule:        rgba(160,172,200,.26);
  --rule-soft:   rgba(160,172,200,.16);
  --faint:       rgba(255,255,255,.06);
  --signal-wash: rgba(27,199,206,.09);
  --signal-edge: rgba(27,199,206,.34);

  /* type. Never drop the trailing generic: a bare 'Alro' falls back to serif. */
  --font-display:'Alro','Archivo','Helvetica Neue',Arial,sans-serif;
  --font-body:   'Hanken Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:   'IBM Plex Mono','SFMono-Regular',Consolas,Menlo,monospace;

  /* scale */
  --t-xl: clamp(2.9rem, 7.2vw, 5rem);
  --t-h1: clamp(2.3rem, 5.2vw, 3.5rem);
  --t-h2: clamp(1.75rem, 3.4vw, 2.4rem);
  --t-h3: 1.4rem;
  --t-lead: clamp(1.05rem, 1.5vw, 1.2rem);
  --t-body: 1.0625rem;
  --t-kicker: .72rem;
  --t-data: .78rem;

  /* rhythm */
  --gut: clamp(1.25rem, 5vw, 4.5rem);
  --sec: clamp(4.5rem, 10vw, 8.5rem);
  --max: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Alro is the production display face. Self-host it at the path below and it
   takes over automatically; while the file is absent the stack falls through to
   Archivo with no layout shift and no error. */
@font-face{
  font-family:'Alro';
  src:url('../fonts/Alro-ExtraBold.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; overflow-x:clip}
body{
  margin:0; background:var(--navy-deep); color:var(--ink);
  font-family:var(--font-body); font-size:var(--t-body); line-height:1.66;
  font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
a{color:var(--signal); text-decoration:none}
a:hover{color:var(--signal-bright)}
button{font:inherit; color:inherit}
h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:800; line-height:1.03;
  letter-spacing:-.022em; margin:0; text-wrap:balance;
}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
blockquote,figure,figcaption{margin:0}
ul{margin:0; padding:0; list-style:none}
/* utility paragraphs manage their own spacing; kill the default bottom margin so
   every gap in the layout is one we chose. Individual rules below re-add theirs. */
.kicker,.lead,.h2,.pull,.strip__fig,.strip__lbl,.node__k,.node__v,.node__ft,
.svc__desc,.case__meta,.case__body,.quote__nm,.quote__rl,.sd__no,.sd__cat,.sd__lbl,
.ct__lbl,.ct__val,.scroll-cue,.form__hd,.form__note,.form__status,.ftr__hd,
.ftr__tag,.card__ttl{margin-block:0}

:where(a,button,summary,input,select,textarea):focus-visible{
  outline:2px solid var(--signal-bright); outline-offset:3px; border-radius:2px;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
  .reveal{opacity:1!important; transform:none!important}
}

/* ---------- layout primitives ---------- */
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.section{padding-block:var(--sec); position:relative}
.section--panel{background:var(--panel-2)}
.section--panel::before,.section--panel::after{
  content:''; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--signal-edge) 22%,var(--signal-edge) 78%,transparent);
}
.section--panel::before{top:0} .section--panel::after{bottom:0}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--signal); color:var(--navy-deep);
  padding:.7rem 1.1rem; font-family:var(--font-mono); font-size:var(--t-data);
  font-weight:500; letter-spacing:.06em; text-transform:uppercase;
}
.skip:focus{left:.6rem; top:.6rem}

/* ---------- kicker + section headings ---------- */
.kicker{
  font-family:var(--font-mono); font-size:var(--t-kicker); font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:var(--signal);
  margin:0 0 1.4rem; line-height:1.5; text-indent:-2.1rem; padding-left:2.1rem;
}
.kicker::before{
  content:''; display:inline-block; width:26px; height:1px; background:var(--signal);
  vertical-align:middle; margin-right:.7rem; opacity:.75;
}
.h2{font-size:var(--t-h2); margin-bottom:1.1rem}
.h2 .sig{color:var(--signal)}
.lead{font-size:var(--t-lead); color:var(--ink-2); max-width:56ch; line-height:1.62}
.body-mute{color:var(--ink-2)}

/* ---------- header ---------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:60;
  background:rgba(10,16,36,.72); backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent; transition:border-color .3s var(--ease),background .3s var(--ease);
}
.hdr[data-scrolled]{border-bottom-color:var(--rule-soft); background:rgba(10,16,36,.93)}
.hdr__in{
  max-width:var(--max); margin-inline:auto; padding:1.05rem var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.brand{display:flex; align-items:center; color:var(--ink); flex:none}
.brand svg{width:132px; height:auto; fill:currentColor}
.brand:hover{color:var(--signal-bright)}

.nav{display:flex; align-items:center; gap:.35rem}
.nav a{
  font-family:var(--font-mono); font-size:var(--t-data); font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
  padding:.55rem .8rem; border-radius:2px; position:relative;
  transition:color .2s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current=page]{color:var(--ink)}
.nav a[aria-current=page]::after{
  content:''; position:absolute; left:.8rem; right:.8rem; bottom:.24rem;
  height:1px; background:var(--signal);
}
.nav__cta{margin-left:.8rem}
.nav a.btn--primary{color:var(--navy-deep); font-weight:600}
.nav a.btn--primary:hover{color:var(--navy-deep)}
.nav a.btn--ghost{color:var(--ink)}

.burger{
  display:none; width:44px; height:44px; border:1px solid var(--rule);
  background:transparent; border-radius:3px; padding:0; cursor:pointer;
  align-items:center; justify-content:center; flex:none;
}
.burger span{display:block; width:18px; height:1.5px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink);
  transition:transform .26s var(--ease), top .26s var(--ease);
}
.burger span::before{top:-6px} .burger span::after{top:6px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0; transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{top:0; transform:rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:var(--t-data); font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; padding:.92rem 1.5rem;
  border:1px solid var(--signal-edge); border-radius:3px; color:var(--signal);
  background:transparent; cursor:pointer; position:relative; overflow:hidden;
  transition:color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), transform .22s var(--ease);
}
.btn::after{
  content:''; position:absolute; inset:0; background:var(--signal-wash);
  opacity:0; transition:opacity .22s var(--ease);
}
.btn:hover{border-color:var(--signal); color:var(--signal-bright); transform:translateY(-1px)}
.btn:hover::after{opacity:1}
.btn > *{position:relative}
.btn--primary{
  background:var(--signal); border-color:var(--signal); color:var(--navy-deep); font-weight:600;
}
.btn--primary:hover{background:var(--signal-bright); border-color:var(--signal-bright); color:var(--navy-deep)}
.btn--primary::after{background:rgba(255,255,255,.14)}
.btn--ghost{border-color:var(--rule); color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink-3); color:var(--ink)}
.btn__arrow{width:.9em; height:.9em; flex:none; transition:transform .22s var(--ease)}
.btn:hover .btn__arrow{transform:translate(2px,-2px)}
.btn-row{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.4rem}

/* THE one gold mark. Exactly one .blade per page. */
.blade{display:inline-flex; flex:none; width:.72em; height:.72em}
.blade svg{width:100%; height:100%}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:min(92vh,860px); display:flex; align-items:center;
  padding-block:calc(var(--sec) + 3rem) var(--sec); overflow:hidden;
}
.hero__flow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  /* convergence node sits at 45.5% of the hero, colliding with the end of the
     headline on desktop. Shift the artwork right so the node lands in the gap
     between the text column and the SCOPE panel, keeping it vivid. */
  transform:translateX(7%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.25),#000 14%,#000 100%);
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.25),#000 14%,#000 100%);
}
.hero__flow svg{width:100%; height:100%; object-fit:cover}
.hero__scrim{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(10,16,36,.97) 0%,rgba(10,16,36,.93) 24%,rgba(10,16,36,.78) 44%,rgba(10,16,36,.3) 56%,rgba(10,16,36,0) 66%);
}
.hero__in{position:relative; z-index:1; width:100%}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,5vw,4.5rem); align-items:center}
.hero h1{font-size:var(--t-xl); margin-bottom:1.7rem}
.hero h1 .sig{color:var(--signal)}
.hero .lead{max-width:46ch}

/* the converged-intelligence node panel, hero right */
.node{
  border:1px solid var(--signal-edge); border-radius:4px;
  background:linear-gradient(180deg,rgba(20,33,63,.97),rgba(14,23,48,.97));
  backdrop-filter:blur(8px); padding:1.7rem 1.8rem;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.85);
}
.node__hd{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-bottom:.9rem; margin-bottom:1.1rem; border-bottom:1px solid var(--rule-soft);
  font-family:var(--font-mono); font-size:var(--t-kicker); letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-3);
}
.node__live{display:inline-flex; align-items:center; gap:.45rem; color:var(--signal); white-space:nowrap}
.node__dot{width:6px; height:6px; border-radius:50%; background:var(--signal); animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(27,199,206,.5)}50%{opacity:.55; box-shadow:0 0 0 6px rgba(27,199,206,0)}}
.node__rows{display:grid; gap:0}
.node__row{
  display:grid; grid-template-columns:1.6rem minmax(0,1fr); align-items:center;
  gap:.9rem; padding:.72rem 0; border-bottom:1px solid var(--rule-soft);
}
.node__row:last-child{border-bottom:0}
.node__ic{width:19px; height:19px; color:var(--signal)}
.node__ic svg{width:100%; height:100%}
.node__k{font-size:1rem; color:var(--ink); line-height:1.45}
.node__ft{margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--rule-soft); font-family:var(--font-mono); font-size:.76rem; letter-spacing:.05em; color:var(--ink-2); line-height:1.65}

.scroll-cue{
  display:flex; align-items:center; gap:.8rem; margin-top:clamp(2.5rem,6vw,4.5rem);
  font-family:var(--font-mono); font-size:var(--t-kicker); letter-spacing:.19em;
  text-transform:uppercase; color:var(--ink-3);
}
.scroll-cue::before{content:''; width:46px; height:1px; background:var(--signal); opacity:.6; animation:slide 2.6s var(--ease) infinite}
@keyframes slide{0%,100%{transform:translateX(0); opacity:.35}50%{transform:translateX(9px); opacity:.9}}

/* ---------- credibility strip ---------- */
.strip{border-block:1px solid var(--rule-soft); background:var(--panel-2)}
.strip__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  max-width:var(--max); margin-inline:auto; padding-inline:var(--gut);
}
.strip__cell{padding-block:2.1rem; padding-inline:1.8rem; border-left:1px solid var(--rule-soft)}
.strip__cell:first-child{border-left:0; padding-left:0}
.strip__cell:last-child{padding-right:0}
.strip__fig{font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,3.6vw,2.7rem); line-height:1; letter-spacing:-.03em; color:var(--ink)}
.strip__fig em{font-style:normal; color:var(--signal)}
.strip__lbl{font-family:var(--font-mono); font-size:var(--t-data); letter-spacing:.05em; color:var(--ink-2); margin-top:.85rem; line-height:1.45; max-width:22ch}

/* ---------- services list ---------- */
.svc{border-top:1px solid var(--rule-soft)}
.svc__item{border-bottom:1px solid var(--rule-soft)}
.svc__link{
  display:grid; grid-template-columns:4rem minmax(0,15rem) minmax(0,1fr) 2.5rem;
  gap:clamp(1rem,3vw,2.5rem); align-items:start; padding:1.9rem 0;
  color:inherit; transition:background .25s var(--ease), padding-inline .25s var(--ease);
}
.svc__link:hover{background:linear-gradient(90deg,var(--signal-wash),transparent 72%); padding-inline:1.1rem}
.svc__no{font-family:var(--font-mono); font-size:var(--t-data); letter-spacing:.1em; color:var(--signal); padding-top:.42rem; transition:color .25s var(--ease)}
.svc__ttl{font-family:var(--font-display); font-weight:800; font-size:1.22rem; line-height:1.2; letter-spacing:-.015em; color:var(--ink); transition:color .25s var(--ease)}
.svc__link:hover .svc__ttl{color:var(--signal-bright)}
.svc__desc{color:var(--ink-2); font-size:1rem; line-height:1.62; padding-top:.1rem}
.svc__go{justify-self:end; align-self:center; width:34px; height:34px; border:1px solid var(--rule); border-radius:50%; display:grid; place-items:center; color:var(--ink-3); transition:all .25s var(--ease)}
.svc__go svg{width:14px; height:14px}
.svc__link:hover .svc__go{border-color:var(--signal); color:var(--signal); transform:translateX(3px)}

/* ---------- work / case studies ---------- */
.work{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(1rem,2vw,1.6rem)}
.case{
  grid-column:span 3; position:relative; display:flex; flex-direction:column;
  border:1px solid var(--rule-soft); border-radius:4px; background:var(--panel-2);
  padding:clamp(1.5rem,2.6vw,2.2rem); overflow:hidden;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.case:hover{border-color:var(--signal-edge); transform:translateY(-3px)}
.case--wide{grid-column:span 6}
.case--twothird{grid-column:span 4}
.case--third{grid-column:span 2}
.case__viz{
  margin:0 0 1.5rem; border-radius:3px; overflow:hidden;
  background:rgba(10,16,36,.55); border:1px solid var(--rule-soft);
  aspect-ratio:16/5;
}
.case--wide .case__viz{aspect-ratio:52/7}
.case--third .case__viz{aspect-ratio:9/5}
.case__viz svg{width:100%; height:100%; display:block; object-fit:cover}
.case__meta{font-family:var(--font-mono); font-size:var(--t-kicker); letter-spacing:.15em; text-transform:uppercase; color:var(--signal); margin-bottom:.85rem}
.case__ttl{font-size:clamp(1.45rem,2.6vw,1.95rem); margin-bottom:.85rem}
.case__body{color:var(--ink-2); font-size:1rem; line-height:1.68; margin-bottom:1.5rem}
.case--wide .case__body{max-width:74ch}
.case__tags{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto}
.tag{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); padding:.4rem .62rem;
  border:1px solid var(--rule-soft); border-radius:2px; white-space:nowrap;
}
.case__no{
  position:absolute; right:clamp(1rem,2vw,1.6rem); top:clamp(1rem,2vw,1.4rem);
  font-family:var(--font-mono); font-size:var(--t-data); letter-spacing:.12em;
  color:var(--ink-3); opacity:.6;
}

/* ---------- testimonials ---------- */
.quotes{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2vw,1.6rem)}
.quote{
  border:1px solid var(--rule-soft); border-radius:4px; background:var(--panel-2);
  padding:clamp(1.6rem,2.6vw,2.2rem); display:flex; flex-direction:column;
  position:relative; transition:border-color .3s var(--ease);
}
.quote:hover{border-color:var(--signal-edge)}
.quote::before{
  content:''; position:absolute; left:0; top:clamp(1.6rem,2.6vw,2.2rem);
  bottom:clamp(1.6rem,2.6vw,2.2rem); width:2px;
  background:linear-gradient(180deg,var(--signal),var(--signal-deep));
}
.quote__txt{font-size:1.09rem; line-height:1.65; color:var(--ink); margin-bottom:1.6rem}
.quote__who{margin-top:auto}
.quote__nm{font-weight:600; color:var(--ink); font-size:.95rem}
.quote__rl{font-family:var(--font-mono); font-size:var(--t-data); letter-spacing:.04em; color:var(--ink-3); margin-top:.2rem}

/* ---------- principles / value grid ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem)}
.card{
  border:1px solid var(--rule-soft); border-radius:4px; background:var(--panel-2);
  padding:clamp(1.5rem,2.4vw,2rem); transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.card:hover{border-color:var(--signal-edge); transform:translateY(-3px)}
.card__ic{width:26px; height:26px; color:var(--signal); margin-bottom:1.2rem}
.card__ic svg{width:100%; height:100%}
.card__ttl{font-family:var(--font-display); font-weight:800; font-size:1.1rem; letter-spacing:-.012em; margin-bottom:.7rem; color:var(--ink)}
.card p{color:var(--ink-2); font-size:1rem; line-height:1.66}

/* ---------- prose ---------- */
.prose{max-width:64ch}
.prose p{color:var(--ink-2); font-size:1.06rem; line-height:1.72}
.prose p strong{color:var(--ink); font-weight:600}
.pull{
  border-left:2px solid var(--signal); padding:.3rem 0 .3rem 1.6rem;
  margin:2.4rem 0; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.2rem,2.2vw,1.55rem); line-height:1.3; letter-spacing:-.018em;
  color:var(--ink); max-width:44ch;
}

/* ---------- service detail blocks ---------- */
.sd{border-top:1px solid var(--rule-soft); padding-block:clamp(2.6rem,5vw,4rem); scroll-margin-top:100px}
.sd:first-of-type{border-top:0}
.sd__grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(1.6rem,4vw,3.2rem)}
/* the title column tracks the reader down a long block, so you always know which
   service you are reading. */
.sd__head{position:sticky; top:6.5rem; align-self:start}
.sd__no{font-family:var(--font-mono); font-size:var(--t-data); letter-spacing:.14em; color:var(--signal); margin-bottom:1rem}
.sd__ttl{font-size:clamp(1.5rem,2.8vw,2.05rem); margin-bottom:1rem}
.sd__rail{margin-top:1.8rem; width:1px; height:5rem; background:linear-gradient(180deg,var(--signal),transparent)}
.sd__cat{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-mono); font-size:var(--t-kicker); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--rule-soft); border-radius:2px; padding:.34rem .6rem}
.sd__ic{width:24px; height:24px; color:var(--signal); margin-bottom:1.1rem}
.sd__ic svg{width:100%;height:100%}
.sd__steps{display:grid; gap:1.5rem}
.sd__step{display:grid; grid-template-columns:9.1rem minmax(0,1fr); gap:1.4rem; align-items:start}
.sd__lbl{
  font-family:var(--font-mono); font-size:var(--t-kicker); letter-spacing:.14em;
  text-transform:uppercase; color:var(--signal); padding-top:.34rem; line-height:1.5;
  white-space:nowrap;
}
.sd__lbl::before{
  content:''; display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--signal); vertical-align:middle; margin-right:.55rem;
  transform:translateY(-1px);
}
.sd__step p{color:var(--ink-2); font-size:1.02rem; line-height:1.7}
.sd__step--out p{color:var(--ink)}

/* ---------- service index ---------- */
.sdx{border-block:1px solid var(--rule-soft); background:var(--panel-2)}
.sdx__in{display:flex; flex-wrap:wrap; gap:.5rem; padding-block:1.6rem}
.sdx__lbl{
  font-family:var(--font-mono); font-size:var(--t-kicker); letter-spacing:.17em;
  text-transform:uppercase; color:var(--ink-3); width:100%; margin:0 0 .3rem;
}
.sdx a{
  font-family:var(--font-mono); font-size:var(--t-data); letter-spacing:.07em;
  color:var(--ink-2); border:1px solid var(--rule-soft); border-radius:2px;
  padding:.48rem .75rem; transition:all .2s var(--ease); display:inline-flex; gap:.5rem;
}
.sdx a span{color:var(--signal); opacity:.8}
.sdx a:hover{border-color:var(--signal); color:var(--ink); background:var(--signal-wash)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule-soft)}
.faq details{border-bottom:1px solid var(--rule-soft)}
.faq summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding:1.5rem 0; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:800; font-size:1.08rem;
  letter-spacing:-.012em; color:var(--ink); transition:color .22s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--signal-bright)}
.faq__pm{position:relative; width:16px; height:16px; flex:none; margin-top:.32rem}
.faq__pm::before,.faq__pm::after{content:''; position:absolute; background:var(--signal); transition:transform .26s var(--ease)}
.faq__pm::before{left:0; top:7.5px; width:16px; height:1.5px}
.faq__pm::after{left:7.5px; top:0; width:1.5px; height:16px}
.faq details[open] .faq__pm::after{transform:scaleY(0)}
.faq details > div{padding:0 3rem 1.7rem 0; color:var(--ink-2); font-size:1.03rem; line-height:1.72; max-width:70ch}

/* ---------- CTA band ---------- */
.cta{position:relative; overflow:hidden; background:var(--navy); border-block:1px solid var(--signal-edge)}
.cta__flow{position:absolute; inset:0; opacity:.5; pointer-events:none}
.cta__flow svg{width:100%; height:100%; object-fit:cover}
.cta__in{position:relative; z-index:1}
.cta__in > *{max-width:62ch}
.cta__in h2{max-width:24ch}
.cta h2{font-size:var(--t-h1); margin-bottom:1.3rem}
.cta .lead{color:rgba(234,240,255,.82)}

/* ---------- contact ---------- */
.ct__grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(2rem,5vw,4.5rem); align-items:start}
.ct__list{margin-top:2.8rem; border-top:1px solid var(--rule-soft)}
.ct__row{display:grid; grid-template-columns:2.5rem 1fr; gap:1.1rem; padding:1.4rem 0; border-bottom:1px solid var(--rule-soft); align-items:start}
.ct__ic{width:22px; height:22px; color:var(--signal); margin-top:.2rem}
.ct__ic svg{width:100%;height:100%}
.ct__lbl{font-family:var(--font-mono); font-size:var(--t-kicker); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.35rem}
.ct__val{color:var(--ink); font-size:1.02rem; line-height:1.5}
.ct__val a{color:var(--ink)} .ct__val a:hover{color:var(--signal-bright)}

.form{position:relative; border:1px solid var(--rule-soft); border-radius:4px; background:var(--panel-2); padding:clamp(1.5rem,3vw,2.4rem)}
.form__hd{font-family:var(--font-display); font-weight:800; font-size:1.3rem; line-height:1.2; letter-spacing:-.015em; margin:0 0 1.8rem; padding-bottom:1.2rem; border-bottom:1px solid var(--rule-soft)}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.f{margin-bottom:1.15rem}
.f label{display:block; font-family:var(--font-mono); font-size:var(--t-kicker); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.5rem}
.f label .req{color:var(--signal)}
.f input,.f select,.f textarea{
  width:100%; background:rgba(10,16,36,.72); color:var(--ink);
  border:1px solid var(--rule); border-radius:3px; padding:.82rem .95rem;
  font-family:var(--font-body); font-size:1.02rem; line-height:1.5;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.f textarea{min-height:9.5rem; resize:vertical}
.f select{appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238695BC' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; background-size:12px; padding-right:2.6rem}
.f input::placeholder,.f textarea::placeholder{color:#7C87A0}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--signal); background:rgba(10,16,36,.95); outline:none; box-shadow:0 0 0 3px var(--signal-wash)}
.f__err{display:none; font-family:var(--font-mono); font-size:var(--t-data); letter-spacing:.04em; color:#FF8A8A; margin-top:.45rem}
.f[data-invalid] .f__err{display:block}
.f[data-invalid] input,.f[data-invalid] select,.f[data-invalid] textarea{border-color:#FF8A8A}
.f--hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form__note{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.02em; color:var(--ink-2); margin-top:1.2rem; line-height:1.6}
.form__status{display:none; margin-top:1.2rem; padding:.95rem 1.1rem; border-radius:3px; font-size:.95rem; line-height:1.55}
.form__status[data-state=ok]{display:block; border:1px solid var(--signal-edge); background:var(--signal-wash); color:var(--ink)}
.form__status[data-state=err]{display:block; border:1px solid rgba(255,138,138,.45); background:rgba(255,138,138,.09); color:#FFC9C9}
.form button[type=submit]{width:100%; justify-content:center}
.form button[aria-busy=true]{opacity:.65; pointer-events:none}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--rule-soft); background:var(--navy-deep); padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.ftr__grid{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(1.6rem,4vw,3rem)}
.ftr__brand svg{width:150px; height:auto; fill:var(--ink); margin-bottom:1.2rem}
.ftr__tag{color:var(--ink-2); font-size:.98rem; line-height:1.6; max-width:34ch}
.ftr__hd{font-family:var(--font-mono); font-size:var(--t-kicker); letter-spacing:.17em; text-transform:uppercase; color:var(--signal); margin-bottom:1.1rem}
.ftr__list li{margin-bottom:.62rem}
.ftr__list a,.ftr__list span{color:var(--ink-2); font-size:.97rem; line-height:1.5}
.ftr__list a:hover{color:var(--ink)}
.ftr__btm{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.6rem; border-top:1px solid var(--rule-soft);
  display:flex; flex-wrap:wrap; gap:.6rem 1.8rem; justify-content:space-between;
  font-family:var(--font-mono); font-size:var(--t-data); letter-spacing:.04em; color:var(--ink-3);
}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal[data-in]{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr; gap:3rem}
  /* The grid stacks at 1080px, so the headline spans the full viewport and
     slice-scaling drops the flow's convergence node mid-canvas, straight onto
     the text (dead band 901–1080 was unhandled; the correction used to live
     only in the ≤900 block). Push the flow off-canvas + vertical scrim at the
     stacking breakpoint so text never sits on the streams. */
  .hero__flow{transform:translateX(47%) scale(1.08); opacity:.8}
  .hero__scrim{background:linear-gradient(180deg,rgba(10,16,36,.62),rgba(10,16,36,.45) 45%,rgba(10,16,36,.2) 68%,rgba(10,16,36,0) 85%)}
  .node{max-width:34rem}
  .sd__grid{grid-template-columns:1fr; gap:1.6rem}
  .sd__head{position:static}
  .sd__rail{display:none}
  .ct__grid{grid-template-columns:1fr; gap:2.6rem}
  .ftr__grid{grid-template-columns:1fr 1fr; gap:2.4rem}
  .ftr__brand{grid-column:1 / -1}
}
@media (max-width:900px){
  .nav{
    position:fixed; inset:0 0 auto; top:0; padding:5.4rem var(--gut) 2rem;
    flex-direction:column; align-items:stretch; gap:.2rem;
    background:var(--navy-deep); border-bottom:1px solid var(--rule-soft);
    transform:translateY(-102%); transition:transform .34s var(--ease);
    max-height:100dvh; overflow-y:auto;
  }
  .nav[data-open]{transform:none}
  .nav a{padding:1rem .2rem; font-size:.8rem; border-bottom:1px solid var(--rule-soft)}
  .nav a[aria-current=page]::after{display:none}
  .nav a[aria-current=page]{color:var(--signal)}
  .nav__cta{margin:1.4rem 0 0; justify-content:center; border-bottom:0}
  .burger{display:flex}
  .strip__grid{grid-template-columns:1fr 1fr}
  .strip__cell{border-left:0; padding:1.6rem 0; border-top:1px solid var(--rule-soft)}
  .strip__cell:nth-child(-n+2){border-top:0}
  .strip__cell:nth-child(2n){padding-left:1.6rem; border-left:1px solid var(--rule-soft)}
  .work{grid-template-columns:1fr}
  .case,.case--wide,.case--twothird,.case--third{grid-column:1 / -1}
  .case__viz,.case--wide .case__viz,.case--third .case__viz{aspect-ratio:16/6}
  .quotes{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  /* explicit placement: an auto-placed .svc__go was creating an implicit
     fourth column and pushing the page 64px wider than the viewport. */
  .svc__link{grid-template-columns:2.6rem minmax(0,1fr) 2.1rem; row-gap:.5rem; padding:1.5rem 0}
  .svc__no{grid-area:1 / 1 / 2 / 2}
  .svc__ttl{grid-area:1 / 2 / 2 / 3; font-size:1.12rem}
  .svc__desc{grid-area:2 / 2 / 3 / 3}
  .svc__go{grid-area:1 / 3 / 3 / 4; align-self:center; width:30px; height:30px}
  .svc__link:hover{padding-inline:0; background:none}
}
@media (max-width:620px){
  .grid-3{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr; gap:0}
  .sd__step{grid-template-columns:1fr; gap:.5rem}
  .strip__grid{grid-template-columns:1fr}
  .strip__cell{padding:1.4rem 0!important; border-left:0!important; border-top:1px solid var(--rule-soft)}
  .strip__cell:first-child{border-top:0}
  .ftr__grid{grid-template-columns:1fr}
  .btn{width:100%; justify-content:center}
  .btn-row{flex-direction:column}
  .faq details > div{padding-right:0}
}

/* ---------- print (Clean mode fallback) ---------- */
@media print{
  :root{--ink:#12203F; --ink-2:#2A3652; --ink-3:#4A5670; --mute:#5D6A88}
  body{background:#fff; color:#12203F}
  .hdr,.burger,.scroll-cue,.hero__flow,.cta__flow,.skip,.btn-row,.form{display:none!important}
  .section{padding-block:1.4rem}
  .section--panel,.card,.case,.quote,.strip{background:#fff!important; border-color:#D8DEEC!important}
  a{color:#0A6E7A}
}