/* =============================================================================
   ECS Cardinal Estate Development : homepage styles (P1 faithful replica)
   Reference: Fort Vega (C:\lex\viz\fortvega-ref, captured 2026-08-26)
   Kit: design/brands/ecs-cardinal.md (client colours lead; reference gives
   structure + motion). Every token traces to the kit; shape roles trace to
   tokens.json shapeRoles. Built 2026-08-26.
   ========================================================================== */

/* ---- brand tokens (all provenance: kit ecs-cardinal.md) ---- */
:root{
  --navy:#16233B;        /* kit: ECS flyer navy (bands + headline type) */
  --navy-deep:#0E1830;   /* kit: darkest navy (footer band depth) */
  --gold:#C9A24B;        /* kit: flyer gold (marks, labels, accents) */
  --gold-soft:#DDBA6A;   /* kit: gold sheen on navy */
  --cream:#F5F2EA;       /* kit: paper cream (role: canvas, ref #d7d2c6) */
  --white:#FFFFFF;       /* kit: white panels (role: surface, ref #ffffff) */
  --ink:#16233B;         /* kit: navy doubles as ink on light grounds */
  --ink-soft:#46536B;    /* kit: muted body blue-grey */
  --line-gold:#C9A24B;   /* kit: gold hairlines on navy */
  --line-light:#E2DDCE;  /* kit: warm hairline on cream (role: line, ref #aaada4) */
  --nav-h:90px;          /* reference-faithful: fixed bar 90px desktop */
  /* P3 revision 2026-08-27 (Thomas): the reference's EXACT faces ship, UNLICENSED,
     his explicit staging instruction; license purchase or swap ruling OWED before
     production go-live (substitutes.json font row). Twins stay as fallbacks. */
  --font-display:'Optima LT Pro','Marcellus',serif;
  --font-body:'TT Hoves Pro','Hanken Grotesk',Arial,sans-serif;
}

/* ---- faces: the reference's exact faces (P3, Thomas 2026-08-27), twins behind ----
   display Optima LT Pro Roman 400 (glyphic flared humanist, giant-wordmark grammar)
   body TT Hoves Pro 400 + Medium spanning 500-700 (our 500/600 slots both resolve
   to the real Medium, no synthetic bolding) */
@font-face{font-family:'Optima LT Pro';src:url('../fonts/OptimaLTPro-Roman.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'TT Hoves Pro';src:url('../fonts/TTHovesPro-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'TT Hoves Pro';src:url('../fonts/TTHovesPro-Medium.ttf') format('truetype');font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:'Marcellus';src:url('../fonts/marcellus-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/hanken-grotesk-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/hanken-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/hanken-grotesk-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  background:var(--cream); /* kit: canvas role */
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;line-height:1.5;
  overflow-x:clip; /* studio law: clip, never hidden */
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-weight:400}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:clip;clip-path:inset(50%);white-space:nowrap}

/* label voice: reference-faithful letterspaced caps eyebrows (TT Hoves 500) */
.label{font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

/* =============================================================================
   NAV : reference-faithful fixed 3-zone bar (links left, mark center, cta right)
   transparent over canvas, .is-scrolled past 5px, 90px desktop / 64px mobile
   ========================================================================== */
.navbar{
  position:fixed;inset:0 0 auto 0;z-index:40;height:var(--nav-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 2.5vw;background:transparent;
  transition:height .3s ease;
}
.nav-left{display:flex;gap:2rem;justify-self:start;grid-column:1;grid-row:1}
.nav-burger{grid-column:1;grid-row:1}
.nav-lockup{grid-column:2;grid-row:1}
.nav-right{grid-column:3;grid-row:1}
.nav-link{font-size:.9375rem;font-weight:500;position:relative}
.nav-link::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav-link:hover::after,.nav-link:focus-visible::after{transform:scaleX(1)}
.nav-lockup{justify-self:center;text-align:center;line-height:1.05}
.nav-lockup .lk-name{font-family:var(--font-display);font-size:1.25rem;letter-spacing:.08em;display:block}
.nav-lockup .lk-sub{font-size:.5rem;font-weight:600;letter-spacing:.34em;display:block;margin-top:2px;color:var(--gold)} /* kit: gold labels on navy */
.nav-right{display:flex;align-items:center;gap:1.5rem;justify-self:end}
/* the ONE accent pill: reference-faithful CONTACT pill (accent fill, ink text, 3px, hover inverts) */
.btn-pill{
  display:inline-block;padding:10px 20px;border-radius:3px; /* tokens.json: button radius 3px */
  background:var(--gold);color:var(--navy-deep);font-size:.875rem;font-weight:600;letter-spacing:.02em;
  border:1px solid transparent; /* tokens.json: hairline-1px reserve */
  transition:background .25s ease,color .25s ease;
}
.btn-pill:hover,.btn-pill:focus-visible{background:var(--navy-deep);color:var(--gold)} /* reference-faithful: fill/ink inversion */

/* nav ink themes: cream over dark bands, navy over light bands (scroll-driven).
   P2: theme + scroll state live on <body> so the navbar element stays byte-identical
   across pages (allpages shared-shell hash law). */
.navbar{color:var(--cream)}
body.nav-on-light .navbar{color:var(--ink)}
body.nav-scrolled .navbar{height:calc(var(--nav-h) - 14px)}
/* P2: the navbar entrance is a pure CSS animation (was a gsap tween): identical
   choreography, zero inline styles, so the shell hash is stable at any timing */
@keyframes navDrop{from{transform:translateY(-120%)}to{transform:translateY(0)}}
.navbar{animation:navDrop .75s cubic-bezier(.215,.61,.355,1) both}

/* mobile menu (REAL control; the reference's is dead, rebuilt per capture note) */
.nav-burger{display:none;width:44px;height:44px;position:relative;justify-self:end}
.nav-burger span{position:absolute;left:10px;right:10px;height:2px;background:currentColor;transition:transform .3s ease,opacity .3s ease}
.nav-burger span:nth-child(1){top:16px}
.nav-burger span:nth-child(2){top:22px}
.nav-burger span:nth-child(3){top:28px}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{
  position:fixed;inset:64px 0 0 0;z-index:39;background:var(--cream);color:var(--ink);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:8vh 8vw 6vh;
  transform:translateY(-102%);transition:transform .4s ease;visibility:hidden;
}
.mobile-menu.is-open{transform:translateY(0);visibility:visible}
.mobile-menu nav{display:flex;flex-direction:column;gap:1.75rem}
.mobile-menu .m-link{font-family:var(--font-display);font-size:2rem;letter-spacing:.02em}
.mobile-menu .m-cta{align-self:flex-start}
.mobile-menu .m-tel{display:flex;flex-direction:column;gap:.5rem;font-size:.9375rem;color:var(--ink-soft)}

/* =============================================================================
   SKY SCENE : the signature (prototype-proven 2026-08-26, _dev/proto-hero.html)
   layered cloud parallax + split wordmark scrub. Numbers from motion.md.
   ========================================================================== */
.sky-scene{position:relative;background:var(--navy-deep);overflow-x:clip} /* contain the scrubbed wordmark + band bleed */
.sky-ground{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:0;overflow:clip;pointer-events:none}
.sky-ground .plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sky-ground .skyline{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:max(100vw,900px);mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(to top,#000 50%,transparent 92%);mask-image:linear-gradient(to top,#000 50%,transparent 92%);
}
.rider{position:sticky;top:0;height:100svh;margin-bottom:-100svh;overflow:clip;pointer-events:none}
  /* P3 had mix-blend-mode:screen here for the real-photo layers; REVERTED with the generated set's
  return (Thomas 2026-08-27, old hero preferred): the generated grounds match the plate and the
  group screen BRIGHTENS them into visible steps on the huge mobile layers. The img-level screen
  below stays as the P1 no-op it always was (isolated by this stacking context). */
.rider.r-dim{z-index:1}
.rider.r-front{z-index:3}
.hero .cloud-wrap{position:absolute;inset:0;z-index:-1;pointer-events:none} /* reference-faithful: cloud-wrap inside the hero wrap; behind the wordmark by z */
.cloud-box{position:absolute;will-change:transform}
.cloud-box img{
  width:100%;mix-blend-mode:screen; /* reference-faithful: .cloud-box lighten/screen compositing */
  -webkit-mask-image:radial-gradient(ellipse 62% 55% at 50% 50%,#000 38%,transparent 78%);
  mask-image:radial-gradient(ellipse 62% 55% at 50% 50%,#000 38%,transparent 78%);
}
.c-dim{top:-4%;left:-14%;width:58vw;opacity:.85}
.c-band{bottom:2%;left:-28%;width:120vw}
.c-front{bottom:4%;right:-4%;width:58vw}
.scene-scrim{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:3;pointer-events:none}
.scene-scrim::after{content:"";position:absolute;inset:auto 0 0 0;height:30svh;background:linear-gradient(to top,rgba(14,24,48,.88),rgba(14,24,48,0))} /* P3: deepened for the real plate's brighter water band (statement-more legibility) */

/* hero: reference-faithful composition (tagline mid-viewport, giant split wordmark at fold) */
.hero{position:relative;z-index:2;height:90svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 2vw 2svh;color:var(--cream)}
.tagline{position:absolute;top:40%;left:0;right:0;text-align:center;font-size:1.375rem;letter-spacing:.01em}
/* reference-faithful construction: semantic h1 wrapper at quarter scale holding
   display-scale spans (the reference's 52px h1 wrapping 208px h2 halves) */
.h1-wrap{display:flex;justify-content:space-between;align-items:baseline;width:100%;font-size:3.15vw;line-height:1}
/* P3 face re-tune (2026-08-27): Optima runs the reference's own tracking, -1px
   at every display scale (ref h1/h2 base rule; +.01em Marcellus tracking read
   loose on the flared face). Size stays 12.6vw: the 11-glyph pair caps out
   (rest air measured 61px at 1280; the ref's 4+4 pair affords 13rem). */
.h1-style{
  font-family:var(--font-display);font-weight:400;font-size:12.6vw;line-height:1;
  text-transform:uppercase;letter-spacing:-1px;white-space:nowrap;
}
.h1-style.is-left{transform:translateX(5vw)}   /* motion.md: loader rest +5vw */
.h1-style.is-right{transform:translateX(-5vw)} /* motion.md: loader rest -5vw */

/* statement: reference-faithful continued cloud field + compass slot right + line reveals */
.statement{position:relative;z-index:4;min-height:250svh;padding:26svh 6vw 0;color:var(--cream)}
.statement-display{font-family:var(--font-display);font-size:clamp(2rem,4.6vw,3.7rem);line-height:.98;max-width:56rem;text-transform:uppercase;letter-spacing:-1px} /* P3: ref lh 87% family, caps-only stack holds at .98 */
.statement-intro{margin-top:7svh;font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.5;max-width:38rem}
.compass-rider{position:sticky;top:0;height:90svh;display:flex;justify-content:flex-end;align-items:center;padding-right:7vw;margin-top:-16svh;pointer-events:none}
.compass-rider img{width:15vw;min-width:170px;opacity:.92}
.statement-more{margin-top:34svh;font-size:1.1875rem;line-height:1.55;max-width:33rem;color:#CFC9BC}

/* =============================================================================
   VALUES : reference-faithful map-presence card grammar (ordinal 4):
   numbered accent chips scattered on a plan ground, click opens a panel,
   single-open, outside click closes. ECS pours the three flyer values.
   ========================================================================== */
.values{
  position:relative;z-index:5;min-height:127svh;background:var(--cream);color:var(--ink);
  padding:14svh 6vw 12svh;
  /* surveyor grid ground: stand-in for the reference's bespoke site-plan
     illustration (slot flagged in COMPONENT-GAPS.md; no client plan exists) */
  background-image:linear-gradient(var(--line-light) 1px,transparent 1px),linear-gradient(90deg,var(--line-light) 1px,transparent 1px);
  background-size:72px 72px;
}
.values-inner{position:relative;min-height:88svh;max-width:1400px;margin:0 auto}
.value-card{position:absolute;max-width:min(30rem,86vw)}
.value-card:nth-child(1){top:4%;left:6%}
.value-card:nth-child(2){top:38%;left:44%}
.value-card:nth-child(3){top:72%;left:14%}
.vc-head{display:inline-flex;align-items:stretch;cursor:pointer;border-radius:0} /* tokens.json: map card radius 0 */
.vc-num{
  display:flex;align-items:center;justify-content:center;width:2.25rem;
  background:var(--gold);color:var(--navy-deep);font-weight:600;font-size:.9375rem;
  transition:background .25s ease,color .25s ease;
}
.vc-name{
  display:flex;align-items:center;gap:.75rem;padding:.65rem 1rem;
  background:var(--navy-deep);color:var(--cream);
  font-size:.9375rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  transition:background .25s ease,color .25s ease;
}
.vc-plus{font-family:var(--font-body);font-weight:400;transition:transform .3s ease;display:inline-block}
.value-card.is-open .vc-plus{transform:rotate(45deg)}
.value-card.is-open .vc-name,
.vc-head:hover .vc-name{background:var(--gold);color:var(--navy-deep)} /* reference-faithful: open/hover header takes the accent (#F0FD9D grammar) */
.vc-panel{height:0;overflow:clip;background:var(--white);max-width:26rem}
.vc-panel-inner{padding:1.5rem;border-top:2px solid var(--gold)}
.vc-panel p{font-size:1.0625rem;line-height:1.55;color:var(--ink-soft)}

/* =============================================================================
   SERVICES : reference-faithful single-open accordion stack (ordinal 3),
   white cards on canvas, open panel flips to the dark band with image + copy
   ========================================================================== */
.services{position:relative;z-index:5;background:var(--cream);padding:12svh 6vw;color:var(--ink)}
.services-lead{font-family:var(--font-display);font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:-1px;text-transform:uppercase;margin-bottom:6svh}
.svc-list{display:flex;flex-direction:column;gap:10px;max-width:1400px;margin:0 auto}
.svc-item{
  background:var(--white);border-radius:3px; /* tokens.json: card radius 3px, filled, no border, no shadow */
  overflow:clip;
}
.svc-row{
  display:grid;grid-template-columns:3.5rem 1fr auto;align-items:center;width:100%;
  padding:28px 30px; /* tokens.json spacing family: 48/30 services composed */
  text-align:left;transition:background .25s ease,color .25s ease;
}
.svc-idx{font-size:.9375rem;color:var(--ink-soft);transition:color .25s ease}
.svc-name{font-family:var(--font-display);font-size:clamp(1.25rem,2vw,1.75rem);letter-spacing:.06em;text-transform:uppercase}
.svc-plus{position:relative;width:18px;height:18px}
.svc-plus::before,.svc-plus::after{content:"";position:absolute;background:currentColor;transition:transform .3s ease,opacity .2s ease}
.svc-plus::before{left:0;right:0;top:8px;height:2px}
.svc-plus::after{top:0;bottom:0;left:8px;width:2px}
.svc-item.is-open .svc-plus::after{transform:scaleY(0)} /* reference-faithful: vertical bar collapses on open */
.svc-item:hover .svc-row,.svc-row:focus-visible{background:var(--navy-deep);color:var(--gold)} /* reference-faithful hover: dark bg, accent text */
.svc-item:hover .svc-idx{color:var(--gold)}
.svc-item.is-open .svc-row{background:var(--navy-deep);color:var(--cream)}
.svc-item.is-open .svc-idx{color:var(--cream)}
.svc-panel{height:0;overflow:clip;background:var(--navy-deep);color:var(--cream)}
.svc-panel-grid{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:2.5rem;padding:0 30px 40px;align-items:start}
.svc-panel-grid img{border-radius:3px}
.svc-copy{max-width:36rem;display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start}
.svc-copy p{font-size:1.0625rem;line-height:1.55;color:#D8D3C6}
.svc-link{font-size:.9375rem;font-weight:600;border-bottom:1px solid var(--gold);padding-bottom:2px;color:var(--gold);transition:color .25s ease,border-color .25s ease}
.svc-link:hover{color:var(--cream);border-color:var(--cream)}

/* =============================================================================
   PRESENCE : reference-faithful 200vh-class rail (ordinal 5): sticky 90vh
   viewport inside a calc(railWidth + 50vh) wrap; degrades to snap-swipe < 992
   ========================================================================== */
.presence{position:relative;z-index:5;background:var(--cream);color:var(--ink);padding-top:10svh}
.presence-head{text-align:center;padding:0 6vw;margin-bottom:6svh}
.presence-head .label{color:var(--gold-soft);color:#78652c} /* darkened text-gold on cream (kit contrast law) */
.presence-title{font-family:var(--font-display);font-size:clamp(2rem,3.8vw,3.2rem);letter-spacing:-1px;text-transform:uppercase;margin-top:1rem}
.presence-sub{margin-top:1.25rem;font-size:1.125rem;color:var(--ink-soft);max-width:34rem;margin-left:auto;margin-right:auto}
.rail-wrap{position:relative} /* height set by JS: railWidth + 50vh (ref people-rail geometry) */
.rail-view{position:sticky;top:6rem;height:90vh;display:flex;align-items:center;overflow:clip} /* ref .people-wrap: sticky top 6rem, 90vh */
.rail{display:flex;gap:24px;will-change:transform}
.office-card{
  background:var(--white);border-radius:3px;padding:2.5rem; /* tokens.json card role */
  display:flex;flex-direction:column;gap:1.25rem;
  color:var(--ink); /* the card carries its own ink (contact hero is cream-on-navy around it) */
}
.rail .office-card{width:460px;flex:none;min-height:380px} /* P2: rail sizing scoped so contact reuses the card */
.oc-country{font-family:var(--font-display);font-size:2rem;letter-spacing:.04em;text-transform:uppercase}
.oc-rule{height:1px;background:var(--line-light)}
.oc-serving{font-size:.9375rem;color:var(--ink-soft)}
.oc-serving strong{display:block;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#78652c;margin-bottom:.35rem}
.oc-addr{font-style:normal;font-size:1.0625rem;line-height:1.5}
.oc-tel{margin-top:auto;font-size:1.125rem;font-weight:500;border-bottom:1px solid var(--gold);align-self:flex-start;padding-bottom:2px;transition:color .25s ease}
.oc-tel:hover{color:#78652c}
.presence-close{text-align:center;padding:6svh 6vw 10svh;font-size:1.0625rem;color:var(--ink-soft)}

/* =============================================================================
   FOOTER : reference-faithful mega footer (ordinal 8): CTA statement zone on
   canvas + dark block (links, offices, giant sign-off, strap, legal row)
   ========================================================================== */
.footer-cta{background:var(--cream);color:var(--ink);text-align:center;padding:20svh 6vw}
.footer-cta-title{font-family:var(--font-display);font-size:clamp(2rem,4.2vw,3.6rem);line-height:1.02;letter-spacing:-1px;text-transform:uppercase;max-width:56rem;margin:0 auto}
.footer-cta .btn-pill{margin-top:3rem;background:var(--navy-deep);color:var(--gold)} /* ref grammar: dark pill w/ accent text on canvas */
.footer-cta .btn-pill:hover{background:var(--gold);color:var(--navy-deep)}
.footer-main{background:var(--navy-deep);color:var(--cream);padding:12svh 6vw 5svh}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:3rem;max-width:1400px;margin:0 auto}
.f-lockup .lk-name{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.08em;display:block}
.f-lockup .lk-sub{font-size:.5625rem;font-weight:600;letter-spacing:.34em;display:block;margin-top:3px;color:var(--gold)}
.f-nav{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem}
.f-nav a{font-size:.9375rem;color:#C9C3B4;transition:color .25s ease}
.f-nav a:hover{color:var(--gold-soft)}
.f-office h3{font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.f-office h3 a{color:inherit;transition:color .25s ease} /* P2 nav wiring: offices link contact */
.f-office h3 a:hover{color:var(--gold-soft)}
.f-office address{font-style:normal;font-size:.9375rem;line-height:1.6;color:#C9C3B4}
.f-office .oc-tel{font-size:1rem;color:var(--cream);border-color:var(--line-gold);margin-top:.75rem;display:inline-block}
.f-office .oc-tel:hover{color:var(--gold-soft)}
.f-signoff{
  font-family:var(--font-display);font-size:clamp(3rem,10.5vw,10rem);line-height:1;letter-spacing:-1px;text-transform:uppercase;
  text-align:center;margin:12svh auto 0;max-width:1400px;color:var(--cream);white-space:nowrap;
} /* reference-faithful: giant display sign-off (Jurij Vega grammar) */
.f-rule{height:1px;background:var(--line-gold);opacity:.35;max-width:1400px;margin:5svh auto 0} /* kit: gold hairline on navy */
.f-legal{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;max-width:1400px;margin:2rem auto 0;font-size:.875rem;color:#A9A08A}
.f-strap{letter-spacing:.06em;text-transform:uppercase}

/* =============================================================================
   line reveal rest states (JS splits into .rv-line spans; no-JS stays visible)
   ========================================================================== */
[data-animation="lines"] .rv-line{display:block;overflow:clip}
[data-animation="lines"] .rv-line > span{display:block}

/* ============================== responsive ================================ */
@media (max-width:991px){
  :root{--nav-h:64px} /* reference-faithful: 64px mobile bar */
  .nav-left{display:none}
  .nav-burger{display:block;justify-self:start}
  .nav-right .btn-pill{padding:8px 14px;font-size:.8125rem} /* ref mobile keeps the pill */
  .navbar{padding:0 4vw}

  /* ref mobile hero (sections/mobile-01.png): centered wordmark STACK upper third,
     tagline below it, cloud mass low. Echoes the client flyer's own ECS/CARDINAL stack. */
  .hero{height:92svh;justify-content:flex-start;padding-top:17svh}
  .tagline{font-size:20px;top:44%}
  .h1-wrap{flex-direction:column;justify-content:flex-start;align-items:center;font-size:7.4vw}
  .h1-style{font-size:19vw} /* P3: ref mobile stack is 23.5vw; 8-glyph CARDINAL caps ours at 19vw */
  .h1-style.is-left,.h1-style.is-right{transform:none} /* scrub is desktop-only */
  .c-dim{width:120vw;left:-36%;top:52%}
  .c-band{width:190vw;left:-45%;top:6%;bottom:auto}
  .c-front{width:170vw;right:-34%;bottom:-6%}

  .statement{min-height:310svh;padding-top:30svh} /* ref mobile statement 3.1 viewports */
  .statement-display{font-size:clamp(1.75rem,7.4vw,2.4rem)}
  .compass-rider{padding-right:5vw;margin-top:-10svh}
  .compass-rider img{width:38vw;min-width:0}
  .statement-more{margin-top:40svh}

  .values{min-height:130svh;padding:14svh 5vw} /* ref mobile map band 1.26 viewports; chips spread on the plan ground */
  .values-inner{min-height:100svh;display:flex;flex-direction:column;justify-content:space-evenly;gap:2.5rem}
  .value-card{position:static;max-width:100%}
  .vc-name{white-space:normal}

  .services{padding:16svh 5vw} /* ref mobile services band 1.18 viewports */
  .services-lead{margin-bottom:8svh}
  .svc-row{padding:24px 18px;grid-template-columns:2.5rem 1fr auto}
  .svc-panel-grid{grid-template-columns:1fr;gap:1.25rem;padding:0 18px 28px}
  .svc-panel-grid img{max-width:320px}

  /* presence: reference-faithful mobile degrade: drag/swipe rail (snap) */
  .rail-wrap{height:auto !important}
  .rail-view{position:static;height:auto;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:0 5vw 2rem;-webkit-overflow-scrolling:touch}
  .rail{transform:none !important}
  .rail .office-card{width:76vw;scroll-snap-align:center;min-height:0}

  .footer-cta{padding:16svh 5vw}
  .footer-grid{grid-template-columns:1fr;gap:2.5rem}
  .f-signoff{white-space:normal;font-size:clamp(2.5rem,13vw,4rem)}
  .f-legal{flex-direction:column;gap:.75rem}
}

@media (min-width:992px){
  .mobile-menu{display:none}
}

/* ======================= reduced motion: static states ==================== */
@media (prefers-reduced-motion: reduce){
  .cloud-box,.h1-style{transform:none !important}
  .rail{transform:none !important}
  .rail-view{position:static;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:2rem}
  .rail-wrap{height:auto !important}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* =============================================================================
   P2 INNER PAGES (2026-08-26): built IN the locked P1 system. Same tokens, same
   shape roles (radius 3, flat, borderless fills), same faces, same accent
   scarcity. No new hues: the only literals reused are #78652c (the darkened
   text-gold on cream, P1 precedent) and gold-alpha glows of --gold itself.
   ========================================================================== */

/* keyboard focus: visible ring sitewide (a11y floor; hover styles stay as-is) */
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---- page head: inner-page lead band on canvas ---- */
.page-head{background:var(--cream);color:var(--ink);padding:calc(var(--nav-h) + 12svh) 6vw 10svh}
.page-head-inner{max-width:1400px;margin:0 auto}
.page-head .label{color:#78652c}
.page-head-title{font-family:var(--font-display);font-size:clamp(2.2rem,4.6vw,3.7rem);line-height:1.02;text-transform:uppercase;letter-spacing:-1px;max-width:56rem;margin-top:1.25rem;text-wrap:balance}
.page-head-title.is-long{font-size:clamp(1.7rem,2.9vw,2.6rem);line-height:1.14;max-width:64rem} /* the About opening statement (24 words) holds dignity at a notch down */
.page-head-sub{margin-top:1.75rem;font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.5;max-width:38rem;color:var(--ink-soft)}

/* ---- services page: the four services as chapter cards (white, radius 3, flat) ---- */
.svc-chapters{background:var(--cream);padding:0 6vw 6svh}
.chapters-inner{max-width:1400px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.svc-chapter{background:var(--white);border-radius:3px;overflow:clip;display:grid;grid-template-columns:1fr 1fr;min-height:440px}
.ch-media{position:relative;min-height:300px}
.ch-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* P3: typographic chapter plate (consultancy): the system's navy band + gold label
   + display line; the fallback the slot map allows when no honest premium photo fits */
.ch-plate{position:absolute;inset:0;background:var(--navy-deep);color:var(--cream);display:flex;flex-direction:column;justify-content:center;padding:12%;overflow:clip}
.ch-plate::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(80% 52% at 50% 100%,rgba(201,162,75,.18),transparent 72%),
  linear-gradient(to top,var(--navy),var(--navy-deep) 70%)}
.ch-plate .label{position:relative;color:var(--gold)}
.ch-plate-line{position:relative;font-family:var(--font-display);font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.06;letter-spacing:-1px;text-transform:uppercase;margin-top:1rem;max-width:18ch}
.ch-plate-rule{position:relative;height:1px;background:var(--line-gold);opacity:.35;margin-top:1.5rem;max-width:9rem}
.ch-copy{padding:56px 48px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.ch-idx{font-size:.9375rem;color:var(--ink-soft)}
.ch-name{font-family:var(--font-display);font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:.06em;text-transform:uppercase;margin-top:.75rem}
.ch-copy p{margin-top:1.25rem;font-size:1.0625rem;line-height:1.55;color:var(--ink-soft);max-width:34rem}
.ch-link{margin-top:1.75rem;font-size:.9375rem;font-weight:600;color:#78652c;border-bottom:1px solid var(--gold);padding-bottom:2px;transition:color .25s ease,border-color .25s ease}
.ch-link:hover{color:var(--ink);border-color:var(--ink)}
.svc-sector{text-align:center;padding:6svh 6vw 14svh;background:var(--cream);font-size:1.0625rem;color:var(--ink-soft)}

/* ---- about page ---- */
.about-frame{background:var(--cream);line-height:0}
.about-frame img{width:100%;max-height:80svh;object-fit:cover}
.about-body{background:var(--cream);padding:12svh 6vw 0}
.about-body-inner{max-width:1400px;margin:0 auto}
.about-p{font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.5;max-width:38rem}
.about-p.is-offset{margin-top:8svh;margin-left:auto;max-width:34rem;font-size:1.1875rem;color:var(--ink-soft)}
.values-rows{background:var(--cream);padding:12svh 6vw 0}
.vr-inner{max-width:1400px;margin:0 auto}
.vr-inner .label{color:#78652c;display:block;margin-bottom:2rem}
.value-row{display:grid;grid-template-columns:3.5rem 1fr 1.4fr;gap:2rem;padding:2.25rem 0;border-top:1px solid var(--line-light);align-items:baseline}
.value-row:last-child{border-bottom:1px solid var(--line-light)}
.vr-num{font-size:.9375rem;font-weight:600;color:#78652c}
.vr-name{font-family:var(--font-display);font-size:clamp(1.25rem,1.9vw,1.6rem);text-transform:uppercase;letter-spacing:.06em}
.vr-line{font-size:1.0625rem;line-height:1.55;color:var(--ink-soft);max-width:36rem}
.about-presence{background:var(--cream);padding:12svh 6vw 16svh}
.about-presence-inner{max-width:1400px;margin:0 auto}
.about-presence .label{color:#78652c;display:block;margin-bottom:1.5rem}
.about-presence p:not(.label){font-size:1.1875rem;line-height:1.6;max-width:38rem}

/* ---- contact page: the offices ARE the page (dusk-navy hero) ---- */
.contact-hero{position:relative;background:var(--navy-deep);color:var(--cream);padding:calc(var(--nav-h) + 10svh) 6vw 14svh;overflow:clip}
.contact-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(90% 46% at 50% 100%,rgba(201,162,75,.16),transparent 70%),
  linear-gradient(to top,var(--navy),var(--navy-deep) 72%)}
.contact-head{position:relative;text-align:center;margin-bottom:9svh}
.contact-head .label{color:var(--gold)} /* kit: gold labels on navy */
.contact-title{font-family:var(--font-display);font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.02;text-transform:uppercase;letter-spacing:-1px;max-width:56rem;margin:1.25rem auto 0;text-wrap:balance}
.office-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1400px;margin:0 auto;align-items:stretch}
.office-grid .office-card{min-height:380px}

/* ---- 404: navy sky treatment, tiny ---- */
.nf-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--navy-deep);color:var(--cream);padding:calc(var(--nav-h) + 6svh) 6vw 14svh;overflow:clip}
.nf-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(70% 38% at 50% 100%,rgba(201,162,75,.18),transparent 72%),
  linear-gradient(to top,var(--navy),var(--navy-deep) 70%)}
.nf-code{position:relative;font-family:var(--font-display);font-size:clamp(5.5rem,17vw,12rem);line-height:1;letter-spacing:-1px;opacity:.16}
.nf-line{position:relative;font-family:var(--font-display);font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.06;text-transform:uppercase;letter-spacing:-1px;max-width:44rem;margin-top:1.25rem;text-wrap:balance}
.nf-hero .btn-pill{position:relative;margin-top:3rem}

/* ---- P2 responsive ---- */
@media (max-width:991px){
  .page-head{padding:calc(var(--nav-h) + 10svh) 5vw 8svh}
  .svc-chapters{padding:0 5vw 4svh}
  .svc-chapter{grid-template-columns:1fr;min-height:0}
  .ch-media{order:-1;min-height:0;aspect-ratio:4/3}
  .ch-copy{padding:28px 18px 36px}
  .svc-sector{padding:6svh 5vw 14svh}
  .about-body{padding:10svh 5vw 0}
  .about-p.is-offset{margin-left:0}
  .values-rows{padding:10svh 5vw 0}
  .value-row{grid-template-columns:2.5rem 1fr;row-gap:.75rem}
  .vr-line{grid-column:2}
  .about-presence{padding:10svh 5vw 14svh}
  .contact-hero{padding:calc(var(--nav-h) + 8svh) 5vw 12svh}
  .office-grid{grid-template-columns:1fr;gap:16px}
  .office-grid .office-card{min-height:0}
}