/* AYN Inc. website v8 — shared styles
   Layout: navy field-to-decision bands alternating with paper bands; hero map, sticky story, exploded map, hover-reveal services. */
:root{
  --navy:#1A2B4A; --navy-deep:#101C33; --blue:#0077C8; --gold:#F5A623; --gold-deep:#B97508;
  --paper:#F3F5F8; --white:#FFFFFF; --ink:#16223A; --muted:#5A6781; --line:#D5DBE5; --on-navy:#E8EDF5; --on-navy-dim:#9AA8C2;
  --f-display:"Archivo","Arial Narrow",Arial,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--navy-deep)}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.navy .eyebrow{color:var(--gold)}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.05}
h2{font-size:clamp(30px,4.4vw,52px);font-weight:700;font-stretch:88%;letter-spacing:-.01em}
p{margin:0}
.lede{font-size:18px;color:var(--muted);max-width:60ch}
.navy{background:var(--navy);color:var(--on-navy)}
.navy .lede{color:var(--on-navy-dim)}
section{position:relative}
.stack-sm{display:grid;gap:14px}
.pad{padding-block:96px}
.text-link{color:var(--blue);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.text-link:hover{border-color:currentColor}
.navy .text-link{color:var(--gold)}

/* ---------- Header ---------- */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(16,28,51,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--on-navy)}
.brand svg{width:40px;height:44px;flex:none}
.brand b{font-family:"Trebuchet MS","Century Gothic",var(--f-display);font-weight:700;font-size:15px;letter-spacing:.18em;display:block;line-height:1.15}
.brand small{font-family:var(--f-mono);font-size:9.5px;color:var(--gold);letter-spacing:.14em}
.links{display:flex;gap:2px;align-items:center}
.links a{text-decoration:none;color:var(--on-navy-dim);font-size:14px;padding:8px 11px;border-radius:4px;transition:color .2s}
.links a:hover,.links a[aria-current="page"]{color:#fff}
.links a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--gold);border-radius:0}
.links a.cta{background:var(--gold);color:var(--navy-deep);font-weight:600;margin-left:6px;border-radius:4px;box-shadow:none}
.menu-btn{display:none;background:none;border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:4px;padding:8px 12px;font:inherit;font-size:14px}
@media (max-width:920px){
  .links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--navy-deep);padding:8px var(--gutter-r) 16px var(--gutter)}
  .links.open{display:flex}
  .links a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--gold)}
  .links a.cta{margin:8px 0 0}
  .menu-btn{display:block}
}

/* ---------- Buttons ---------- */
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:4px;font-weight:600;font-size:15px;text-decoration:none;transition:transform .25s var(--ease),background .25s}
.btn:hover{transform:translateY(-2px)}
.btn.gold{background:var(--gold);color:var(--navy-deep)}
.btn.navyb{background:var(--navy);color:#fff}
.btn.ghost{border:1px solid rgba(255,255,255,.3);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
.btn.outline{border:1px solid var(--line);color:var(--ink);background:#fff}

/* ---------- Hero (home) ---------- */
.hero{background:var(--navy-deep);color:var(--on-navy);overflow:hidden;isolation:isolate}
.hero canvas,.hero video{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block;object-fit:cover}
.hero-inner{padding-block:clamp(72px,12vw,150px) clamp(56px,8vw,96px);display:grid;gap:28px;max-width:640px}
.hero h1{font-size:clamp(44px,7.2vw,92px);font-weight:800;font-stretch:78%;letter-spacing:-.015em;line-height:.95}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p.sub{font-size:19px;color:var(--on-navy-dim);max-width:46ch}
.coord{font-family:var(--f-mono);font-size:12px;color:var(--on-navy-dim);letter-spacing:.06em}
.video-tag{position:absolute;right:var(--gutter-r);bottom:16px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;color:var(--on-navy-dim);border:1px dashed rgba(255,255,255,.25);padding:5px 8px;border-radius:3px}
.hero-load > *{animation:rise .9s var(--ease) both}
.hero-load > *:nth-child(2){animation-delay:.12s}.hero-load > *:nth-child(3){animation-delay:.24s}.hero-load > *:nth-child(4){animation-delay:.36s}
@keyframes rise{from{transform:translateY(18px);opacity:.2}to{transform:none;opacity:1}}

/* ---------- Page header (inner pages) ---------- */
.page-head{background:var(--navy-deep);color:var(--on-navy);overflow:hidden;isolation:isolate}
.page-head .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;align-items:center;padding-block:clamp(56px,8vw,96px) clamp(48px,6vw,72px)}
.page-head h1{font-size:clamp(40px,6vw,72px);font-weight:800;font-stretch:80%;line-height:.98;letter-spacing:-.01em}
.page-head h1 em{font-style:normal;color:var(--gold)}
.page-head p{font-size:18px;color:var(--on-navy-dim);max-width:52ch}
.page-head .crumb{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;color:var(--gold);text-transform:uppercase}
.head-map{width:100%;max-width:300px;justify-self:end;opacity:.9}
@media (max-width:760px){.page-head .wrap{grid-template-columns:1fr}.head-map{display:none}}

/* ---------- Proof strip ---------- */
.proof{border-bottom:1px solid var(--line);background:#fff}
.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.proof .cell{padding-block:24px;padding-right:16px;border-right:1px solid var(--line);padding-left:20px}
.proof .cell:first-child{padding-left:0}
.proof .cell:last-child{border-right:0}
.proof strong{display:block;font-family:var(--f-display);font-size:28px;font-weight:700;font-stretch:85%;color:var(--navy)}
.proof span{font-size:13.5px;color:var(--muted)}
@media (max-width:760px){.proof .wrap{grid-template-columns:1fr 1fr}.proof .cell{padding-left:0;border-right:0;border-bottom:1px solid var(--line)}}

/* ---------- Story (scroll storyline) ---------- */
.story{padding-block:96px 40px}
.story-head{margin-bottom:48px}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px}
.steps{display:grid}
.step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;gap:14px;padding-block:24px;opacity:.4;transition:opacity .5s var(--ease)}
.step.on{opacity:1}
.step .k{font-family:var(--f-mono);font-size:12px;color:var(--gold);letter-spacing:.12em}
.step h3{font-size:clamp(26px,3vw,38px);font-weight:700;font-stretch:90%}
.step p{color:var(--on-navy-dim);max-width:44ch}
.step .data{font-family:var(--f-mono);font-size:12px;color:var(--on-navy-dim);border-left:2px solid var(--blue);padding-left:12px}
.panel-wrap{position:relative}
.panel{position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px);height:min(520px,70vh);border-radius:6px;background:var(--navy-deep);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.scene{position:absolute;inset:0;padding:28px;display:flex;flex-direction:column;justify-content:center;gap:14px;opacity:0;transform:scale(.97);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.scene.on{opacity:1;transform:none}
.scene-label{position:absolute;top:16px;left:20px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--on-navy-dim);text-transform:uppercase}
.tablet{align-self:center;width:min(300px,100%);background:#0B1426;border:8px solid #22324F;border-radius:18px;padding:18px;display:grid;gap:10px}
.field{display:flex;justify-content:space-between;gap:12px;font-size:13px;border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:8px}
.field span:first-child{color:var(--on-navy-dim)}
.field span:last-child{font-family:var(--f-mono);color:#fff}
.bar{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--gold);transition:width 1.8s var(--ease)}
.scene.on .bar i{width:78%}
.gps{font-family:var(--f-mono);font-size:11px;color:var(--blue)}
.tbl{width:100%;border-collapse:collapse;font-family:var(--f-mono);font-size:12px}
.tbl th{text-align:left;color:var(--on-navy-dim);font-weight:500;padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.12)}
.tbl td{padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.06);color:#fff;font-variant-numeric:tabular-nums}
.tbl tr.dup td{color:#F08A7E;text-decoration:line-through;transition:opacity .6s .8s}
.scene.on .tbl tr.dup td{opacity:.35}
.tbl .ok{color:#5CC48B}
.flag{font-family:var(--f-mono);font-size:11px;color:var(--gold)}
.mapsvg{width:100%;height:100%;max-height:420px}
.scene .pt{opacity:0;transition:opacity .4s}
.scene.on .pt{opacity:1}
.dash{display:grid;gap:14px}
.bars{display:flex;align-items:flex-end;gap:10px;height:170px;border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:2px}
.bars div{flex:1;background:var(--blue);border-radius:3px 3px 0 0;height:0;transition:height 1s var(--ease)}
.bars div:nth-child(3){background:var(--gold)}
.bars-lbl{display:flex;gap:10px;font-family:var(--f-mono);font-size:10.5px;color:var(--on-navy-dim)}
.bars-lbl span{flex:1;text-align:center}
.brief{background:#fff;color:var(--ink);border-radius:4px;padding:14px 16px;display:grid;gap:4px}
.brief b{font-family:var(--f-display);font-size:16px}
.brief span{font-size:13px;color:var(--muted)}
@media (max-width:860px){
  .story-grid{grid-template-columns:1fr;gap:0}
  .panel-wrap{order:-1;position:sticky;top:calc(env(safe-area-inset-top,0px) + 68px);z-index:2}
  .panel{position:relative;top:0;height:300px}
  .scene{padding:18px}
  .step{min-height:60vh}
  .tablet{width:240px;padding:12px;gap:6px}
  .bars{height:110px}
}

/* ---------- Breakdown ---------- */
.breakdown{height:260vh;background:var(--paper)}
.bd-sticky{position:sticky;top:calc(env(safe-area-inset-top,0px) + 68px);height:calc(100vh - 68px);display:grid;align-items:center;overflow:hidden}
.bd-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:40px;align-items:center}
.bd-copy{display:grid;gap:18px}
.layer-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px}
.layer-list li{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.layer-list li span:first-child{font-family:var(--f-mono);font-size:12px;color:var(--muted);padding-top:3px}
.layer-list li b{display:block;font-family:var(--f-display);font-size:18px;font-weight:650;transition:color .3s}
.layer-list li small{color:var(--muted);font-size:13.5px}
.layer-list li.on span:first-child,.layer-list li.on b{color:var(--blue)}
.stage{perspective:1600px;height:min(560px,64vh);display:grid;place-items:center}
.stack{position:relative;width:min(400px,80vw);aspect-ratio:1;max-width:100%;transform-style:preserve-3d;transform:rotateX(50deg) rotateZ(-28deg)}
.layer{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .15s linear}
.layer svg{width:100%;height:100%;overflow:visible}
.bd-note{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
@media (max-width:860px){
  .breakdown{height:220vh}
  .bd-grid{grid-template-columns:1fr;gap:4px}
  .bd-copy h2{font-size:28px}
  .bd-copy .lede,.layer-list li small{display:none}
  .layer-list{grid-template-columns:1fr 1fr;gap:0 12px}
  .layer-list li{padding:6px 0}
  .layer-list li b{font-size:15px}
  .stage{height:46vh}
  .stack{width:min(300px,72vw)}
}

/* ---------- Services hover reveal ---------- */
.svc-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.svc{position:relative;background:#fff;min-height:250px;padding:24px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:16px;outline-offset:-2px;text-decoration:none;color:inherit}
.svc::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(0,119,200,.10),transparent 70%);opacity:0;transition:opacity .3s}
.svc:hover::before{opacity:1}
.svc .tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.svc .tag.lic{color:var(--gold-deep)}
.svc h3{font-size:22px;font-weight:700;font-stretch:90%;position:relative}
.svc .teaser{font-size:14px;color:var(--muted);position:relative}
.reveal-panel{position:absolute;inset:0;background:var(--navy);color:var(--on-navy);padding:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;clip-path:inset(100% 0 0 0);transition:clip-path .55s var(--ease)}
.reveal-panel h3{color:#fff}
.reveal-panel p{font-size:14.5px;color:var(--on-navy-dim)}
.reveal-panel .tag{color:var(--gold)}
.reveal-panel .more{font-size:13px;font-weight:600;color:var(--gold)}
.svc:hover .reveal-panel,.svc:focus-visible .reveal-panel,.svc:focus-within .reveal-panel{clip-path:inset(0 0 0 0)}
@media (hover:none){
  .reveal-panel{position:static;clip-path:none;background:none;color:inherit;padding:0}
  .reveal-panel h3,.reveal-panel .tag{display:none}
  .reveal-panel p{color:var(--muted)}
  .reveal-panel .more{color:var(--blue)}
  .svc .teaser{display:none}
}
@media (max-width:980px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.svc-grid{grid-template-columns:1fr}.svc{min-height:0}}

/* ---------- Service detail (services page) ---------- */
.svc-detail{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;padding-block:64px;border-top:1px solid var(--line);scroll-margin-top:80px}
.svc-detail:first-child{border-top:0}
.svc-detail h2{font-size:clamp(28px,3.4vw,40px)}
.svc-detail .badge{display:inline-block;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);border:1px solid #EBC982;padding:3px 8px;border-radius:3px;justify-self:start}
.deliver{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.deliver li{background:#fff;padding:14px 16px;font-size:14.5px;display:grid;grid-template-columns:18px 1fr;gap:8px}
.deliver li::before{content:"";width:8px;height:8px;margin-top:8px;background:var(--blue);border-radius:1px;transform:rotate(45deg)}
.svc-detail .body p+p{margin-top:14px}
@media (max-width:860px){.svc-detail{grid-template-columns:1fr;gap:16px;padding-block:48px}.deliver{grid-template-columns:1fr}}
.jump{display:flex;flex-wrap:wrap;gap:8px;padding-block:20px}
.jump a{font-size:13.5px;text-decoration:none;padding:7px 12px;border:1px solid var(--line);border-radius:3px;background:#fff;transition:border-color .2s,color .2s}
.jump a:hover{border-color:var(--blue);color:var(--blue)}

/* ---------- About ---------- */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.two p+p{margin-top:16px}
.clients{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.clients span{font-size:13px;padding:6px 10px;border:1px solid rgba(255,255,255,.18);border-radius:3px;color:var(--on-navy)}
.clients.light span{border-color:var(--line);color:var(--ink);background:#fff}
.lic-cards{display:grid;gap:12px}
.lic-card{border:1px solid rgba(255,255,255,.14);border-radius:4px;padding:20px;display:grid;gap:6px;transition:border-color .3s,transform .3s var(--ease)}
.lic-card:hover{border-color:var(--gold);transform:translateX(4px)}
.lic-card .eyebrow{font-size:11px}
.lic-card b{font-family:var(--f-display);font-size:20px;font-stretch:90%}
.lic-card span{font-size:14px;color:var(--on-navy-dim)}
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
.value{border-top:2px solid var(--gold);padding-top:16px;display:grid;gap:8px}
.value b{font-family:var(--f-display);font-size:20px;font-stretch:90%}
.value p{color:var(--muted);font-size:15px}
@media (max-width:860px){.two{grid-template-columns:1fr;gap:36px}.values{grid-template-columns:1fr}}

/* county explorer */
.explorer{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.explorer svg{width:100%;max-height:560px}
.explorer .county{fill:#fff;stroke:var(--navy);stroke-width:.9;transition:fill .25s;cursor:pointer;outline:none}
.explorer .county:hover,.explorer .county.on,.explorer .county:focus-visible{fill:var(--gold)}
.county-card{background:var(--navy);color:var(--on-navy);border-radius:6px;padding:28px;display:grid;gap:10px;min-height:220px}
.county-card .code{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;color:var(--gold)}
.county-card h3{font-size:36px;font-stretch:85%;color:#fff}
.county-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:6px 0 0;font-size:14.5px}
.county-card dt{color:var(--on-navy-dim)}
.county-card dd{margin:0;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.county-card p{font-size:13px;color:var(--on-navy-dim)}
@media (max-width:860px){.explorer{grid-template-columns:1fr;gap:20px}.explorer svg{max-height:420px}}

/* ---------- Team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:36px}
.person{position:relative;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;display:grid;outline-offset:-2px}
.person .face{aspect-ratio:4/3;background:var(--navy);display:grid;place-items:center;position:relative;overflow:hidden}
.person .face span{font-family:var(--f-display);font-size:52px;font-weight:800;font-stretch:80%;color:var(--gold);letter-spacing:.02em}
.person .face::after{content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--gold)}
.person .meta{padding:16px;display:grid;gap:2px}
.person b{font-family:var(--f-display);font-size:18px;font-weight:650}
.person .role{font-size:14px;color:var(--muted)}
.person .bio{position:absolute;inset:0;background:var(--navy);color:var(--on-navy);padding:20px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;clip-path:circle(0% at 50% 100%);transition:clip-path .6s var(--ease)}
.person .bio b{color:#fff}
.person .bio p{font-size:14px;color:var(--on-navy-dim)}
.person:hover .bio,.person:focus-visible .bio{clip-path:circle(150% at 50% 100%)}
@media (hover:none){.person .bio{position:static;clip-path:none;background:none;color:inherit;padding:0 16px 16px}.person .bio b{display:none}.person .bio p{color:var(--muted)}}
.team-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-top:36px}
.team-mini div{border-top:2px solid var(--navy);padding-top:14px;display:grid;gap:2px}
.team-mini b{font-family:var(--f-display);font-size:18px;font-weight:650}
.team-mini span{font-size:14px;color:var(--muted)}

/* ---------- Case study ---------- */
.case-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:start}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:4px;overflow:hidden}
.facts div{background:var(--navy);padding:16px}
.facts dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--gold);text-transform:uppercase}
.facts dd{margin:4px 0 0;color:#fff;font-size:15px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.metric strong{display:block;font-family:var(--f-display);font-size:clamp(40px,5vw,60px);font-weight:800;font-stretch:80%;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.metric span{font-size:14px;color:var(--on-navy-dim)}
.timeline{display:grid;gap:0;margin-top:40px}
.tl{display:grid;grid-template-columns:140px minmax(0,1fr);gap:32px;padding-block:28px;border-top:1px solid var(--line)}
.tl .k{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;color:var(--blue);text-transform:uppercase;padding-top:6px}
.tl h3{font-size:26px;font-stretch:90%;margin-bottom:10px}
.tl p{color:var(--muted);max-width:62ch}
.tl p+p{margin-top:12px}
.def{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);padding:14px 16px;font-size:14.5px;margin-top:16px;max-width:62ch}
@media (max-width:860px){.case-hero{grid-template-columns:1fr}.tl{grid-template-columns:1fr;gap:8px}.metrics{grid-template-columns:1fr 1fr 1fr;gap:10px}}

/* ---------- CTA band ---------- */
.cta-band{background:var(--gold);color:var(--navy-deep)}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-block:48px}
.cta-band h2{font-size:clamp(26px,3.4vw,40px)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px}
.contact dl{display:grid;gap:14px;margin:28px 0 0}
.contact dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.contact dd{margin:0;font-size:17px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.copy{font:inherit;font-size:12px;background:none;border:1px solid rgba(255,255,255,.25);color:var(--on-navy-dim);border-radius:3px;padding:3px 8px;cursor:pointer}
.copy:hover{color:#fff;border-color:#fff}
form{display:grid;gap:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:grid;gap:6px;font-size:13px;color:var(--on-navy-dim)}
input,select,textarea{font:inherit;font-size:15px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:4px;padding:11px 12px;width:100%}
select option{color:var(--ink)}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none}
.form-msg{font-size:14px;color:var(--gold);min-height:1.4em}
button.btn{border:0;cursor:pointer;justify-self:start;font:inherit;font-weight:600}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;gap:40px}.row2{grid-template-columns:1fr}}

/* FAQ */
.faq{display:grid;max-width:820px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-family:var(--f-display);font-size:19px;font-weight:650;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:24px;color:var(--blue);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;color:var(--muted);max-width:64ch}

/* ---------- Footer ---------- */
footer{background:var(--navy-deep);color:var(--on-navy-dim);font-size:14px}
.foot{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px;padding-block:56px 32px}
.foot img{width:260px;max-width:100%}
.foot h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 12px;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{text-decoration:none}
.foot a:hover{color:#fff}
.foot-bar{border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:20px;font-size:13px}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}.foot > div:first-child{grid-column:1/-1}}

/* gentle reveal from a visible state */
.rv{transition:transform .8s var(--ease),opacity .8s var(--ease)}
.rv.pending{transform:translateY(22px);opacity:.35}

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

/* ---------- Case studies page (v3) ---------- */
.case-jump{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:calc(env(safe-area-inset-top,0px) + 68px);z-index:20}
.case-jump .jump{padding-block:12px;overflow-x:auto;flex-wrap:nowrap}
.case-jump .jump a{white-space:nowrap}
.case{scroll-margin-top:130px}
#floodreach{scroll-margin-top:130px}
.case-light{background:#fff}
.case-light .facts{background:var(--line);border-color:var(--line)}
.case-light .facts div{background:var(--paper)}
.case-light .facts dt{color:var(--gold-deep)}
.case-light .facts dd{color:var(--ink)}
.case-light .metric strong{color:var(--blue)}
.case-light .metric span{color:var(--muted)}
.case-steps{padding-block:40px 72px}
.case-steps .timeline{margin-top:0}
.badge{display:inline-block;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);border:1px solid #EBC982;padding:3px 8px;border-radius:3px;justify-self:start}
.badge.dev{color:var(--blue);border-color:#9CC9EA}