/* ============================================================
   VISION HOLDINGS — DESIGN SYSTEM
   Oxblood / Ink / Stone / Gilt Stone — signed, not stamped.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Petit+Formal+Script&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Sora:wght@200;300;400;500;600;700&display=swap');

:root{
  /* --- brand palette (from brand book v1.0) --- */
  --oxblood: #4B2418;
  --oxblood-deep: #33170E;
  --oxblood-bright: #6B3324;
  --ink: #17130F;
  --ink-soft: #221C16;
  --stone: #F1E7DC;
  --stone-deep: #E6D7C6;
  --stone-line: #DCC9B2;
  --gilt: #D8C4A8;
  --gilt-dim: rgba(216,196,168,.4);

  /* --- functional text tokens --- */
  --text-on-stone: #1D160F;
  --text-on-stone-muted: #6E5C4B;
  --text-on-dark: #F1E7DC;
  --text-on-dark-muted: #B7A38C;

  /* --- type --- */
  --f-script: 'Petit Formal Script', cursive;
  --f-serif: 'Newsreader', serif;
  --f-sans: 'Sora', sans-serif;

  /* --- spacing scale --- */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6.5rem;
  --sp-7: 10rem;

  --container: 1240px;
  --edge: clamp(1.5rem, 5vw, 5rem);

  --ease: cubic-bezier(.16,.84,.44,1);
  --dur: .9s;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  background: var(--stone);
  color: var(--text-on-stone);
  font-family: var(--f-serif);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor: pointer; }

::selection{ background: var(--oxblood); color: var(--stone); }

:focus-visible{
  outline: 2px solid var(--oxblood);
  outline-offset: 3px;
}

/* ---------- type scale ---------- */
h1,h2,h3,h4{ margin:0; font-family: var(--f-serif); font-weight: 400; letter-spacing: -.01em; }
.h-display{ font-size: clamp(2.75rem, 6vw, 5.5rem); line-height: 1.02; font-weight: 400; }
.h-1{ font-size: clamp(2.25rem, 4.4vw, 3.6rem); line-height: 1.08; }
.h-2{ font-size: clamp(1.7rem, 2.8vw, 2.35rem); line-height: 1.16; }
.h-3{ font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.3; }
.body-lg{ font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.55; font-weight: 300; }
.body{ font-size: 1.05rem; line-height: 1.65; }
.body-sm{ font-size: .92rem; line-height: 1.6; }

.kicker{
  font-family: var(--f-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.dark .kicker{ color: var(--gilt); }

.eyebrow-num{
  font-family: var(--f-sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .15em;
  color: var(--text-on-stone-muted);
}

.italic{ font-style: italic; font-weight: 400; }
.muted{ color: var(--text-on-stone-muted); }
.dark .muted{ color: var(--text-on-dark-muted); }

/* ---------- layout ---------- */
.wrap{ max-width: var(--container); margin: 0 auto; padding-left: var(--edge); padding-right: var(--edge); }
.section{ padding: var(--sp-6) 0; position: relative; }
.section-tight{ padding: var(--sp-5) 0; }
.dark{ background: var(--ink); color: var(--text-on-dark); }
.dark h1,.dark h2,.dark h3,.dark h4{ color: var(--text-on-dark); }
.panel-oxblood{ background: linear-gradient(160deg, var(--oxblood) 0%, var(--oxblood-deep) 100%); color: var(--text-on-dark); }
.panel-oxblood h1,.panel-oxblood h2,.panel-oxblood h3{ color: var(--text-on-dark); }

.grid{ display:grid; gap: var(--sp-4); }
.grid-2{ grid-template-columns: 1fr 1fr; }
.grid-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 980px){
  .grid-2,.grid-4{ grid-template-columns: 1fr; }
}

.hr{ height:1px; background: var(--stone-line); border:0; margin: var(--sp-4) 0; }
.dark .hr, .panel-oxblood .hr{ background: var(--gilt-dim); }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex; align-items:center; gap: .6em;
  font-family: var(--f-sans); font-size: .82rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 1em 1.7em;
  border: 1px solid var(--oxblood);
  color: var(--oxblood);
  background: transparent;
  border-radius: 2px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover{ background: var(--oxblood); color: var(--stone); }
.btn-solid{ background: var(--oxblood); color: var(--stone); }
.btn-solid:hover{ background: var(--ink); border-color: var(--ink); }
.dark .btn, .panel-oxblood .btn{ border-color: var(--gilt); color: var(--stone); }
.dark .btn:hover, .panel-oxblood .btn:hover{ background: var(--gilt); color: var(--ink); }

.btn-arrow{ transition: transform var(--dur) var(--ease); }
.btn:hover .btn-arrow{ transform: translateX(4px); }

.text-link{
  font-family: var(--f-sans); font-size: .8rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--gilt);
  padding-bottom: .3em;
  display: inline-flex; align-items:center; gap:.5em;
  transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.text-link:hover{ border-color: var(--oxblood); gap: .8em; }
.dark .text-link, .panel-oxblood .text-link{ border-color: var(--gilt); }
.dark .text-link:hover, .panel-oxblood .text-link:hover{ border-color: var(--stone); }

/* ---------- nav ---------- */
.site-nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.6rem var(--edge);
  transition: background var(--dur) var(--ease), padding var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-nav.on-dark{ color: var(--stone); }
.site-nav.scrolled{
  background: rgba(241,231,220,.92);
  backdrop-filter: blur(10px);
  color: var(--text-on-stone);
  padding: 1.05rem var(--edge);
  border-color: var(--stone-line);
}
.site-nav.scrolled .wordmark-icon{ color: var(--oxblood); }
.site-nav.scrolled a{ color: var(--text-on-stone); }

.wordmark{ display:flex; align-items:center; gap:.6rem; }
.wordmark-icon{ width: 30px; height:30px; color: var(--gilt); flex-shrink:0; transition: color var(--dur) var(--ease); }
.site-nav.scrolled .wordmark-icon{ color: var(--oxblood); }
.wordmark-text{ display:flex; flex-direction:column; line-height:1; }
.wordmark-vision{ font-family: var(--f-script); font-size: 1.55rem; line-height:1; }
.wordmark-holdings{ font-family: var(--f-sans); font-size: .56rem; letter-spacing: .28em; color: var(--gilt); margin-top:.15rem; }
.site-nav.scrolled .wordmark-holdings{ color: var(--oxblood); }

.nav-links{ display:flex; align-items:center; gap: 2.4rem; }
.nav-links a{
  font-family: var(--f-sans); font-size: .78rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  position: relative; padding-bottom: 4px;
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: currentColor; transition: right var(--dur) var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-links a.active{ opacity: 1; }

.nav-toggle{ display:none; background:none; border:0; color: inherit; }
@media (max-width: 860px){
  .nav-links{
    position:fixed; inset:0; z-index:99;
    background: var(--ink); color: var(--stone);
    flex-direction:column; justify-content:center; gap: 2.2rem;
    transform: translateY(-100%); transition: transform .6s var(--ease);
  }
  .nav-links.open{ transform: translateY(0); }
  .nav-links a{ font-size: 1.1rem; }
  .nav-toggle{ display:block; z-index: 101; }
}

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform: translateY(0); }
.reveal-stagger > *{ opacity:0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-stagger.in > *{ opacity:1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay: .04s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay: .13s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay: .22s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay: .31s; }

/* ---------- signature draw ---------- */
.sig-path{
  fill:none; stroke: currentColor; stroke-width: 3.2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray: 340; stroke-dashoffset: 340;
  transition: stroke-dashoffset 1.8s var(--ease);
}
.sig-draw.in .sig-path{ stroke-dashoffset: 0; }

/* ---------- cards ---------- */
.card{
  background: var(--stone-deep);
  border: 1px solid var(--stone-line);
  padding: var(--sp-4);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.card:hover{ transform: translateY(-6px); border-color: var(--oxblood); }
.dark .card{ background: var(--ink-soft); border-color: var(--gilt-dim); }
.dark .card:hover{ border-color: var(--gilt); }

.num-tag{ font-family: var(--f-sans); font-size: .75rem; letter-spacing: .1em; color: var(--oxblood); }
.dark .num-tag{ color: var(--gilt); }

/* ---------- footer ---------- */
.site-footer{ background: var(--ink); color: var(--text-on-dark); padding: var(--sp-6) 0 var(--sp-3); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: 1rem; margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--gilt-dim); font-family: var(--f-sans); font-size: .75rem; color: var(--text-on-dark-muted); letter-spacing:.04em; }

/* ---------- misc ---------- */
.tag{
  font-family: var(--f-sans); font-size: .7rem; font-weight: 600; letter-spacing:.1em; text-transform:uppercase;
  color: var(--oxblood); border: 1px solid var(--oxblood); padding: .4em .8em; border-radius: 2px; display:inline-block;
}
.dark .tag{ color: var(--gilt); border-color: var(--gilt); }

.parallax-layer{ will-change: transform; }

.hairline-frame{ border:1px solid var(--stone-line); }

.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.mark-watermark{ position:absolute; opacity:.06; pointer-events:none; }

/* ============================================================
   PAGE COMPOSITION — built on the tokens above.
   ============================================================ */

/* ---------- skip link ---------- */
.skip-link{
  position:absolute; left: var(--edge); top: 0; z-index: 200;
  font-family: var(--f-sans); font-size:.75rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  background: var(--stone); color: var(--oxblood);
  padding: .9em 1.4em; border:1px solid var(--oxblood);
  transform: translateY(-150%); transition: transform .3s var(--ease);
}
.skip-link:focus{ transform: translateY(0); }

/* nav mark is always drawn — it is a logo, not an animation */
.wordmark-icon path{
  fill:none; stroke: currentColor; stroke-width:3.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.nav-toggle{ width:34px; height:34px; padding:0; position:relative; }
.nav-toggle span{
  position:absolute; left:6px; right:6px; height:1px; background: currentColor;
  transition: transform .45s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span:nth-child(1){ top:13px; }
.nav-toggle span:nth-child(2){ top:20px; }
.nav-toggle[aria-expanded="true"]{ color: var(--stone); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ transform: translateY(-3.5px) rotate(-45deg); }
body.nav-open{ overflow: hidden; }

/* ---------- hero ---------- */
.hero{
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--text-on-dark);
  min-height: 100vh; min-height: 100svh;
  display:flex; align-items:flex-end;
  padding: calc(var(--sp-7) + 2rem) 0 var(--sp-5);
}
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 90% at 78% 15%, rgba(75,36,24,.55) 0%, rgba(23,19,15,0) 60%);
}
/* :not(.hero-sig) — the watermark must stay out of flow; a bare `> *` rule
   would outrank .hero-sig's own position and drop it back into the layout. */
.hero > *:not(.hero-sig){ position:relative; z-index:2; }
.hero-sig{
  position:absolute; z-index:1; top:8%; right:-6vw;
  width: clamp(320px, 46vw, 720px); color: var(--gilt);
  opacity:.09; pointer-events:none;
}
.hero-mark{ width:76px; height:76px; color: var(--gilt); margin-bottom: var(--sp-3); }
.hero-kicker{ display:flex; align-items:center; gap:1rem; margin-bottom: var(--sp-3); }
.hero-kicker::after{ content:''; height:1px; width:clamp(40px,10vw,160px); background: var(--gilt-dim); }
.hero h1{ max-width: 15ch; }
.hero-sub{ max-width: 46ch; margin: var(--sp-3) 0 0; color: var(--text-on-dark-muted); }
.hero-actions{ display:flex; flex-wrap:wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.hero-foot{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap: var(--sp-3);
  margin-top: var(--sp-6); padding-top: var(--sp-3); border-top:1px solid var(--gilt-dim);
}
.scroll-cue{
  font-family: var(--f-sans); font-size:.68rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color: var(--text-on-dark-muted);
  display:flex; align-items:center; gap:.8rem;
}
.scroll-cue::after{
  content:''; width:1px; height:34px; background: var(--gilt-dim);
  transform-origin: top; animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{ transform: scaleY(.25); opacity:.4 } 50%{ transform: scaleY(1); opacity:1 } }

/* ---------- interior page head ---------- */
.page-head{
  background: var(--ink); color: var(--text-on-dark);
  padding: calc(var(--sp-7) + 1rem) 0 var(--sp-6);
  position: relative; overflow: hidden;
}
.page-head::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(100% 120% at 85% 0%, rgba(75,36,24,.5) 0%, rgba(23,19,15,0) 65%);
}
.page-head > *:not(.hero-sig){ position:relative; z-index:2; }
.page-head h1{ max-width: 17ch; margin-top: var(--sp-2); }
.page-head .lede{ max-width: 52ch; margin-top: var(--sp-3); color: var(--text-on-dark-muted); }

/* ---------- editorial split ---------- */
.split{ display:grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: var(--sp-5); align-items:start; }
.split-aside{ position: sticky; top: calc(var(--sp-5) + 1rem); }
@media (max-width: 980px){
  .split{ grid-template-columns:1fr; gap: var(--sp-4); }
  .split-aside{ position:static; }
}

/* ---------- section headers ---------- */
.section-head{ max-width: 60ch; }
.section-head .kicker{ display:block; margin-bottom: var(--sp-2); }
.section-head p{ margin: var(--sp-2) 0 0; }

/* ---------- signature section transition ---------- */
.sig-rule{
  display:flex; align-items:center; gap: var(--sp-3);
  padding: var(--sp-5) 0; color: var(--oxblood);
}
.sig-rule::before,.sig-rule::after{ content:''; height:1px; flex:1; background: var(--stone-line); }
.sig-rule svg{ width:56px; height:56px; flex-shrink:0; }
.dark .sig-rule, .panel-oxblood .sig-rule{ color: var(--gilt); }
.dark .sig-rule::before,.dark .sig-rule::after,
.panel-oxblood .sig-rule::before,.panel-oxblood .sig-rule::after{ background: var(--gilt-dim); }

/* ---------- ethos strip ---------- */
.ethos{ display:grid; grid-template-columns: repeat(3,1fr); gap:0; border-top:1px solid var(--stone-line); border-bottom:1px solid var(--stone-line); }
.ethos > div{ padding: var(--sp-4) var(--sp-3) var(--sp-4) 0; border-right:1px solid var(--stone-line); }
.ethos > div:last-child{ border-right:0; }
.ethos > div:not(:first-child){ padding-left: var(--sp-3); }
.dark .ethos, .dark .ethos > div{ border-color: var(--gilt-dim); }
@media (max-width: 860px){
  .ethos{ grid-template-columns:1fr; }
  .ethos > div{ border-right:0; border-bottom:1px solid var(--stone-line); padding-left:0 !important; }
  .ethos > div:last-child{ border-bottom:0; }
  .dark .ethos > div{ border-color: var(--gilt-dim); }
}

/* ---------- sector cards ---------- */
.card-link{ display:flex; flex-direction:column; height:100%; }
.card-link .card-arrow{ margin-top:auto; padding-top: var(--sp-3); font-family: var(--f-sans); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color: var(--oxblood); display:inline-flex; gap:.5em; transition: gap var(--dur) var(--ease); }
.dark .card-link .card-arrow{ color: var(--gilt); }
.card:hover .card-arrow{ gap:.95em; }
.card h3{ margin: var(--sp-2) 0 var(--sp-1); }

/* ---------- numbered process steps ---------- */
.steps{ display:grid; gap:0; }
.step{
  display:grid; grid-template-columns: 5.5rem minmax(0,1fr) minmax(0,1.15fr);
  gap: var(--sp-3); padding: var(--sp-4) 0; border-top:1px solid var(--stone-line);
}
.step:last-child{ border-bottom:1px solid var(--stone-line); }
.dark .step{ border-color: var(--gilt-dim); }
.step-num{ font-family: var(--f-sans); font-size:.75rem; font-weight:600; letter-spacing:.18em; color: var(--oxblood); padding-top:.5rem; }
.dark .step-num{ color: var(--gilt); }
.step h3{ font-size: clamp(1.4rem,2.2vw,1.9rem); }
@media (max-width: 860px){
  .step{ grid-template-columns:1fr; gap: var(--sp-2); }
  .step-num{ padding-top:0; }
}

/* ---------- principle list ---------- */
.principles{ display:grid; grid-template-columns: repeat(2,1fr); gap:0; border-top:1px solid var(--stone-line); }
.principles > div{ padding: var(--sp-4); border-bottom:1px solid var(--stone-line); border-right:1px solid var(--stone-line); }
.principles > div:nth-child(2n){ border-right:0; }
.principles > div:first-child, .principles > div:nth-child(2){ padding-top: var(--sp-4); }
.dark .principles, .dark .principles > div{ border-color: var(--gilt-dim); }
@media (max-width: 860px){
  .principles{ grid-template-columns:1fr; }
  .principles > div{ border-right:0; padding-left:0; padding-right:0; }
}

/* ---------- sector rows ---------- */
/* Sector rows are full-bleed sections alternating stone/ink, so the bg change
   is the divider — the hairline is only needed between same-coloured rows. */
.sector{ padding: var(--sp-6) 0; }
.sector + .sector.dark, .sector.dark + .sector{ border-top:0; }
.sector-grid{ display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: var(--sp-5); align-items:start; }
.sector-index{ font-family: var(--f-sans); font-size:.72rem; font-weight:600; letter-spacing:.2em; color: var(--oxblood); }
.dark .sector-index{ color: var(--gilt); }
.sector h2{ margin-top: var(--sp-2); }
.criteria{ display:grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.criteria li{ display:grid; grid-template-columns: 1.6rem 1fr; gap:.5rem; align-items:baseline; }
.criteria li::before{ content:'—'; color: var(--oxblood); font-family: var(--f-sans); }
.dark .criteria li::before{ color: var(--gilt); }
@media (max-width: 980px){ .sector-grid{ grid-template-columns:1fr; gap: var(--sp-3); } }

/* ---------- insights empty state ---------- */
.insight-empty{
  border:1px solid var(--stone-line); padding: var(--sp-6) var(--sp-4);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap: var(--sp-2);
}
.dark .insight-empty{ border-color: var(--gilt-dim); }
.insight-empty svg{ width:64px; height:64px; color: var(--oxblood); opacity:.6; margin-bottom: var(--sp-1); }
.dark .insight-empty svg{ color: var(--gilt); }
.insight-empty p{ max-width: 46ch; margin:0; }

/* ---------- contact ---------- */
.contact-band{ text-align:left; }
.contact-band h2{ max-width: 18ch; }
.contact-inner{ display:grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--sp-4); align-items:end; }
@media (max-width: 860px){ .contact-inner{ grid-template-columns:1fr; align-items:start; } }
.mail-link{
  font-family: var(--f-serif); font-size: clamp(1.35rem,3.4vw,2.5rem);
  font-weight:300; letter-spacing:-.01em; display:inline-block;
  border-bottom:1px solid var(--gilt-dim); padding-bottom:.2em;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  word-break: break-word;
}
.mail-link:hover{ border-color: currentColor; }
.detail-list{ display:grid; gap: var(--sp-3); }
.detail-list dt{ font-family: var(--f-sans); font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color: var(--oxblood); margin-bottom:.4rem; }
.dark .detail-list dt, .panel-oxblood .detail-list dt{ color: var(--gilt); }
.detail-list dd{ margin:0; }

/* ---------- footer extras ---------- */
.footer-head{ font-family: var(--f-sans); font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color: var(--gilt); margin-bottom: var(--sp-2); }
.footer-list{ display:grid; gap:.7rem; }
.footer-list a{ font-family: var(--f-sans); font-size:.85rem; color: var(--text-on-dark-muted); transition: color var(--dur) var(--ease); }
.footer-list a:hover{ color: var(--stone); }
.footer-note{ max-width: 34ch; color: var(--text-on-dark-muted); margin: var(--sp-2) 0 0; }

/* ---------- mobile nav overlay ----------
   .site-nav.scrolled uses backdrop-filter, which makes the header a containing
   block for position:fixed descendants — that traps the full-screen menu inside
   the ~70px bar as soon as the page is scrolled. Drop the blur for an opaque
   bar at mobile widths, and let the ink overlay own the screen while open. */
@media (max-width: 860px){
  .site-nav.scrolled{ backdrop-filter: none; background: var(--stone); }

  body.nav-open .site-nav,
  body.nav-open .site-nav.scrolled{ background: transparent; border-color: transparent; }
  body.nav-open .site-nav.scrolled a,
  body.nav-open .site-nav.scrolled .nav-links a{ color: var(--stone); }
  body.nav-open .site-nav.scrolled .wordmark-icon,
  body.nav-open .site-nav.scrolled .wordmark-holdings{ color: var(--gilt); }
  body.nav-open .site-nav.scrolled .wordmark-vision{ color: var(--stone); }

  /* the overlay is always ink, so the ring must be light */
  .nav-links :focus-visible{ outline-color: var(--gilt); }
}

/* ---------- no-JS / JS-failure fallback ----------
   Reveals start at opacity:0 and are switched on by IntersectionObserver. If
   the script never runs, the page must still be fully readable. <head> sets
   the .js flag, so anything else means "show everything". */
html:not(.js) .reveal,
html:not(.js) .reveal-stagger > *{ opacity:1; transform:none; }
html:not(.js) .sig-path{ stroke-dashoffset:0; }

/* ---------- focus rings on dark surfaces ----------
   The global ring is oxblood, which is ~1.3:1 against ink. */
.dark :focus-visible,
.panel-oxblood :focus-visible,
.site-footer :focus-visible,
.site-nav.on-dark:not(.scrolled) :focus-visible{ outline-color: var(--gilt); }

/* ---------- dark-surface corrections ----------
   Oxblood panels are dark surfaces too, and .eyebrow-num defaults to a
   stone-muted brown that is unreadable on ink. Mirror the .dark treatment. */
.dark .eyebrow-num,
.panel-oxblood .eyebrow-num,
.panel-oxblood .kicker,
.panel-oxblood .num-tag,
.panel-oxblood .step-num,
.panel-oxblood .sector-index{ color: var(--gilt); }
.panel-oxblood .muted{ color: var(--text-on-dark-muted); }
.panel-oxblood .hr{ background: var(--gilt-dim); }

/* ---------- stagger depth ---------- */
.reveal-stagger.in > *:nth-child(5){ transition-delay: .40s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay: .49s; }
.reveal-stagger.in > *:nth-child(7){ transition-delay: .58s; }
.reveal-stagger.in > *:nth-child(8){ transition-delay: .67s; }

@media (prefers-reduced-motion: reduce){
  .scroll-cue::after{ animation:none; transform:scaleY(1); }
  .sig-path{ stroke-dashoffset: 0 !important; }
}