/* ============================================================
   DEVIS — Exposure Intelligence
   Design system + homepage styles
   Direction: warm-black canvas, brushed gold, surgical corvette red.
   Classical serif gravitas (Cormorant) over disciplined sans (Hanken Grotesk).
   Palantir-grade restraint. No AI-slop: no glow, no card grids, no centered sludge.
   ============================================================ */

/* ---- Tokens ---- */
:root{
  /* colour — tinted, never pure black/white */
  --ink:        #0c0b09;   /* warm near-black canvas */
  --ink-rise:   #131210;   /* barely-raised surface, used sparingly */
  --ink-deep:   #070605;   /* deepest wells / footer */
  --bone:       #ece5d7;   /* warm off-white text */
  --bone-dim:   #9c9486;   /* muted warm secondary */
  --bone-faint: #8a8276;   /* faintest captions — lifted to ~AA on ink */
  --gold:       #c6a35a;   /* brushed gold */
  --gold-bright:#e7cd91;   /* gold highlight */
  --gold-deep:  #8a6f38;   /* gold shadow */
  --red:        #c01f2d;   /* corvette red — surgical only */
  --red-bright: #e23b46;
  --line:       rgba(236,229,215,.12);
  --line-soft:  rgba(236,229,215,.07);

  /* type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --label: "Marcellus", var(--serif);

  /* fluid scale */
  --step--1: clamp(.78rem, .74rem + .2vw, .9rem);
  --step-0:  clamp(1rem, .95rem + .25vw, 1.18rem);
  --step-1:  clamp(1.3rem, 1.15rem + .7vw, 1.65rem);
  --step-2:  clamp(1.8rem, 1.4rem + 1.8vw, 2.7rem);
  --step-3:  clamp(2.4rem, 1.7rem + 3.4vw, 4.2rem);
  --step-4:  clamp(3rem, 1.9rem + 5.4vw, 6.6rem);

  /* space */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --chapter: clamp(5.5rem, 11vh, 11rem);
  --maxw: 1240px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-expo: cubic-bezier(.16,1,.3,1);
}

/* ---- Reset / base ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-size:var(--step-0);
  font-weight:380;
  line-height:1.6;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold); color:var(--ink); }

/* a faint film-grain / vignette to keep the black from going flat */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(198,163,90,.06), transparent 60%),
    radial-gradient(100% 60% at 50% 120%, rgba(0,0,0,.5), transparent 60%);
}

/* ---- Layout ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ position:relative; z-index:1; padding-block:var(--chapter); }
.section + .section{ border-top:1px solid var(--line-soft); }
.measure{ max-width:62ch; }
.measure-tight{ max-width:46ch; }

/* ---- Typographic helpers ---- */
.eyebrow{
  font-family:var(--label);
  font-size:var(--step--1);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.4rem;
  display:flex; align-items:center; gap:.9rem;
}
.eyebrow::before{ content:""; width:2.2rem; height:1px; background:var(--gold); opacity:.7; }
.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.01em;
  color:var(--bone);
  margin:0;
  text-wrap:balance;
}
.h-hero{ font-size:var(--step-4); }
.h-1{ font-size:var(--step-3); }
.h-2{ font-size:var(--step-2); }
.lead{ font-size:var(--step-1); color:var(--bone); line-height:1.4; font-weight:380; }
.dim{ color:var(--bone-dim); }
.muted{ color:var(--bone-faint); font-size:var(--step--1); }
.serif-accent{ font-family:var(--serif); font-style:italic; color:var(--gold-bright); }

/* ---- Buttons ---- */
.btn{
  --bg:transparent; --fg:var(--bone);
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--sans); font-weight:560; font-size:var(--step--1);
  letter-spacing:.06em; text-transform:uppercase;
  padding:.95em 1.6em; border:1px solid var(--line);
  color:var(--fg); background:var(--bg);
  cursor:pointer; transition:all .45s var(--ease); position:relative; overflow:hidden;
}
.btn .arr{ transition:transform .45s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn--primary{
  border-color:var(--gold); color:var(--ink);
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
}
.btn--primary:hover{ background:linear-gradient(180deg,#f1dca8,var(--gold-bright)); border-color:var(--gold-bright); }
.btn--ghost{ border-color:var(--line); color:var(--bone); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold-bright); }
.btn--red:hover{ border-color:var(--red); box-shadow:inset 0 0 0 1px var(--red); }

/* text link with travelling rule */
.tlink{
  display:inline-flex; align-items:center; gap:.6rem;
  color:var(--gold); font-weight:500; font-size:var(--step--1);
  letter-spacing:.08em; text-transform:uppercase; font-family:var(--sans);
}
.tlink .arr{ transition:transform .4s var(--ease); }
.tlink:hover{ color:var(--gold-bright); }
.tlink:hover .arr{ transform:translateX(5px); }

/* ============================================================
   TOP BAR + NAV
   ============================================================ */
.topbar{
  background:var(--ink-deep); border-bottom:1px solid var(--line-soft);
  font-size:var(--step--1); position:relative; z-index:40;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:42px; }
.topbar a.letter{
  display:inline-flex; align-items:center; gap:.6rem; color:var(--bone-dim);
  letter-spacing:.04em; transition:color .4s var(--ease);
}
.topbar a.letter:hover{ color:var(--gold-bright); }
.topbar a.letter .seal{ color:var(--red); font-size:1.1em; line-height:0; }
.topbar .motto{ color:var(--bone-faint); letter-spacing:.28em; text-transform:uppercase; font-family:var(--label); font-size:.72rem; }
@media (max-width:760px){ .topbar .motto{ display:none; } }

.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line-soft);
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.nav.scrolled{ background:color-mix(in srgb, var(--ink-deep) 92%, transparent); border-color:var(--line); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:1.5rem; }
.brand{ display:flex; align-items:center; gap:.9rem; }
.brand img{ height:26px; width:auto; }
.nav-right{ display:flex; align-items:center; gap:1.4rem; }
.nav-cta{ display:inline-flex; }
@media (max-width:600px){ .nav-cta .btn{ padding:.8em 1.05em; font-size:.7rem; } .brand img{ height:22px; } }

/* hamburger */
.burger{
  appearance:none; background:none; border:none; cursor:pointer;
  width:44px; height:44px; display:grid; place-items:center; gap:0; color:var(--bone);
}
.burger span{ display:block; width:24px; height:1.5px; background:currentColor; transition:transform .5s var(--ease), opacity .3s var(--ease); }
.burger span + span{ margin-top:6px; }
.burger:hover{ color:var(--gold-bright); }
body.menu-open .burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* full slide-out menu */
.menu{
  position:fixed; inset:0; z-index:45;
  background:linear-gradient(160deg, var(--ink-deep), var(--ink));
  display:grid; grid-template-columns:1.2fr 1fr; align-items:center;
  padding:clamp(4rem,12vh,9rem) var(--gutter) var(--gutter);
  clip-path:inset(0 0 100% 0); opacity:0; pointer-events:none;
  transition:clip-path .7s var(--ease-expo), opacity .4s var(--ease);
}
body.menu-open .menu{ clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto; }
.menu-nav{ list-style:none; margin:0; padding:0; }
.menu-nav li{ overflow:hidden; }
.menu-nav a{
  font-family:var(--serif); font-size:clamp(2rem,5.5vw,3.6rem); font-weight:500;
  line-height:1.18; color:var(--bone); display:inline-flex; align-items:baseline; gap:1rem;
  transform:translateY(110%); transition:transform .7s var(--ease-expo), color .35s var(--ease);
}
.menu-nav a .idx{ font-family:var(--label); font-size:.85rem; color:var(--gold); letter-spacing:.2em; }
body.menu-open .menu-nav a{ transform:translateY(0); }
.menu-nav a:hover{ color:var(--gold-bright); }
.menu-aside{ border-left:1px solid var(--line); padding-left:clamp(1.5rem,3vw,3rem); align-self:center; }
.menu-aside .eyebrow{ margin-bottom:1rem; }
.menu-aside p{ color:var(--bone-dim); max-width:34ch; }
.menu-aside .menu-meta{ margin-top:2.5rem; display:flex; flex-direction:column; gap:.5rem; }
.menu-aside .menu-meta a{ color:var(--bone-dim); font-size:var(--step--1); letter-spacing:.05em; }
.menu-aside .menu-meta a:hover{ color:var(--gold); }
@media (max-width:820px){ .menu{ grid-template-columns:1fr; align-content:center; } .menu-aside{ display:none; } }
.menu-stagger li:nth-child(1) a{ transition-delay:.06s; }
.menu-stagger li:nth-child(2) a{ transition-delay:.12s; }
.menu-stagger li:nth-child(3) a{ transition-delay:.18s; }
.menu-stagger li:nth-child(4) a{ transition-delay:.24s; }
.menu-stagger li:nth-child(5) a{ transition-delay:.30s; }
.menu-stagger li:nth-child(6) a{ transition-delay:.36s; }
.menu-stagger li:nth-child(7) a{ transition-delay:.42s; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; z-index:1; padding-block:clamp(5rem,15vh,11rem) var(--chapter); overflow:hidden; }
.hero .wrap{ position:relative; }
.hero .eyebrow{ color:var(--gold); }
.hero h1{ margin:0 0 1.8rem; max-width:18ch; }
.hero .sub{ max-width:40ch; color:var(--bone-dim); margin:0 0 2.8rem; }
.hero .sub em{ color:var(--bone); font-style:normal; }
.hero-actions{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }
.hero-actions .micro{ color:var(--bone-faint); font-size:var(--step--1); letter-spacing:.04em; }
/* slow red signal line tracing the hero */
.signal{ position:absolute; left:var(--gutter); top:0; bottom:0; width:1px; background:linear-gradient(180deg,transparent, var(--line), transparent); }
.signal::after{
  content:""; position:absolute; left:-1px; top:0; width:3px; height:24%;
  background:linear-gradient(180deg, transparent, var(--red-bright), transparent);
  filter:drop-shadow(0 0 6px var(--red));
  animation:signal 7s var(--ease) infinite;
}
@keyframes signal{ 0%{ top:-25%; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ top:100%; opacity:0; } }
@media (max-width:760px){ .signal{ display:none; } }

/* ---- Redaction reveal (the signature) ---- */
.redact{ position:relative; display:inline; color:var(--bone); }
.redact::after{
  content:""; position:absolute; inset:.04em -.12em .08em; transform-origin:right center;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold) 60%, var(--gold-bright));
  transition:transform 1.05s var(--ease-expo);
}
.redact.shown::after{ transform:scaleX(0); }
@media (prefers-reduced-motion: reduce){ .redact::after{ display:none; } }

/* ---- Scroll reveal ---- */
.rise{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease-expo); }
.rise.shown{ opacity:1; transform:none; }
.rise[data-d="1"]{ transition-delay:.08s; }
.rise[data-d="2"]{ transition-delay:.16s; }
.rise[data-d="3"]{ transition-delay:.24s; }
.rise[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ .rise{ opacity:1; transform:none; } }

/* ============================================================
   THE QUESTION (wedge)
   ============================================================ */
.wedge .display{ max-width:20ch; }
.wedge .display .serif-accent{ font-style:italic; }
.wedge p{ margin-top:1.6rem; }

/* ============================================================
   THE SPINE — three beats, connected by the signal line (no cards)
   ============================================================ */
.spine{ display:grid; gap:0; margin-top:3rem; }
.beat{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,3vw,2.6rem);
  padding-block:clamp(1.8rem,4vw,2.8rem); border-top:1px solid var(--line);
  align-items:start;
}
.beat:last-child{ border-bottom:1px solid var(--line); }
.beat .num{
  font-family:var(--label); color:var(--gold); font-size:var(--step-1);
  position:relative; padding-right:clamp(1rem,3vw,2.4rem); line-height:1;
}
.beat h3{ font-family:var(--serif); font-weight:500; font-size:var(--step-2); margin:0 0 .6rem; line-height:1.08; color:var(--bone); }
.beat p{ margin:0; color:var(--bone-dim); max-width:54ch; }
.beat strong{ color:var(--gold-bright); font-weight:500; }
.spine-foot{ margin-top:2.2rem; color:var(--bone-dim); }
.spine-foot em{ color:var(--bone); font-style:italic; font-family:var(--serif); font-size:1.15em; }

/* ============================================================
   FIVE LENSES — list with hairlines, not a card grid
   ============================================================ */
.lenses{ margin-top:2.6rem; border-top:1px solid var(--line); }
.lens{
  display:grid; grid-template-columns:minmax(0,.4fr) minmax(0,1fr); gap:clamp(1rem,3vw,2.5rem);
  padding-block:1.5rem; border-bottom:1px solid var(--line-soft);
  transition:padding-left .5s var(--ease), border-color .5s var(--ease);
}
.lens:hover{ padding-left:.8rem; border-color:var(--gold); }
.lens .ln{ font-family:var(--serif); font-size:var(--step-1); color:var(--bone); display:flex; align-items:baseline; gap:.8rem; }
.lens .ln .k{ font-family:var(--label); font-size:.8rem; letter-spacing:.2em; color:var(--gold); }
.lens p{ margin:0; color:var(--bone-dim); align-self:center; }
.lens p .x{ color:var(--bone); }

/* ============================================================
   PROOF / AUTHORITY
   ============================================================ */
.proof .display{ max-width:24ch; }
.proof .stand{ color:var(--bone-dim); margin-top:1.4rem; max-width:58ch; }
.proof .stand b{ color:var(--bone); font-weight:500; }
.presswrap{ margin-top:2.6rem; }
.presswrap .plabel{ font-family:var(--label); letter-spacing:.28em; text-transform:uppercase; font-size:.72rem; color:var(--bone-faint); margin-bottom:1.1rem; }
.press{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1.2rem,4vw,2.8rem);
  padding-block:.4rem;
}
.press span{
  font-family:var(--serif); font-size:clamp(1.1rem,2.6vw,1.5rem); color:var(--bone-dim);
  letter-spacing:.02em; transition:color .4s var(--ease); white-space:nowrap;
}
.press span:hover{ color:var(--gold-bright); }
.press .dot{ color:var(--gold); font-family:var(--sans); font-size:.7em; }

/* ============================================================
   CLOSE
   ============================================================ */
.dvs-close{ text-align:left; }
.dvs-close .display{ max-width:18ch; }
.close-cta{ margin-top:2.6rem; display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }
.reassure{
  margin-top:2.6rem; max-width:60ch; padding-left:1.4rem;
  border-left:2px solid var(--red); color:var(--bone-dim);
}
.reassure b{ color:var(--bone); font-weight:500; }

/* ============================================================
   BRIDGE — every section hands off to the next
   ============================================================ */
.bridge{
  margin-top:clamp(2.4rem,6vw,4rem); padding-top:1.6rem; border-top:1px dashed var(--line);
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.bridge .b-from{ color:var(--bone-dim); font-size:clamp(1.05rem, .95rem + .55vw, 1.45rem); font-style:italic; font-family:var(--serif); max-width:54ch; line-height:1.45; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--ink-deep); border-top:1px solid var(--line); position:relative; z-index:1; padding-block:clamp(3.5rem,8vh,6rem) 2.5rem; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(1.5rem,4vw,3rem); }
.foot-brand img{ height:30px; width:auto; margin-bottom:1.1rem; }
.foot-brand .fmotto{ font-family:var(--label); letter-spacing:.26em; text-transform:uppercase; font-size:.72rem; color:var(--gold); }
.foot-brand .ftrans{ color:var(--bone-faint); font-size:var(--step--1); margin-top:.5rem; max-width:30ch; }
.fcol h4{ font-family:var(--label); letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; color:var(--bone-dim); margin:0 0 1.1rem; font-weight:400; }
.fcol a{ display:block; color:var(--bone-dim); font-size:var(--step--1); padding-block:.38rem; transition:color .3s var(--ease); }
.fcol a:hover{ color:var(--gold-bright); }
.foot-base{ margin-top:clamp(2.5rem,6vw,4rem); padding-top:1.6rem; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.foot-base .legal{ color:var(--bone-faint); font-size:.78rem; max-width:62ch; line-height:1.7; }
.foot-base .legal b{ color:var(--bone-dim); font-weight:500; }
@media (max-width:820px){ .foot-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-top{ grid-template-columns:1fr; } }

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:44; display:none;
  padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--ink-deep) 94%, transparent);
  backdrop-filter:blur(12px); border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .5s var(--ease-expo);
}
.sticky-cta.show{ transform:translateY(0); }
.sticky-cta .btn{ width:100%; justify-content:center; }
@media (max-width:600px){ .sticky-cta{ display:block; } }

/* utility */
.h1-line{ display:block; }
.nowrap{ white-space:nowrap; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ============================================================
   CINEMATIC MEDIA — bigger statement type + full-bleed video/image
   ============================================================ */
:root{
  --step-2: clamp(2rem, 1.5rem + 2.1vw, 3.1rem);
  --step-3: clamp(2.1rem, 1rem + 5vw, 5.3rem);
  --step-4: clamp(1.95rem, 9vw, 8.2rem);
}

/* ---- Cinematic hero (video bg) ---- */
.hero--cinema{
  position:relative; min-height:clamp(620px, 94svh, 1060px);
  display:flex; align-items:flex-end; padding:0 0 clamp(3rem,8vh,6.5rem);
  overflow:hidden;
}
.hero--cinema .hero-inner{ position:relative; z-index:2; width:100%; }
.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--ink-deep); }
.hero-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.4) contrast(1.06) brightness(.58); }
.hero-scrim{ position:absolute; inset:0; z-index:1; background:
  linear-gradient(86deg, rgba(7,6,5,.95) 0%, rgba(7,6,5,.66) 40%, rgba(7,6,5,.18) 90%),
  linear-gradient(0deg, var(--ink) 1%, rgba(7,6,5,.06) 34%, rgba(7,6,5,.5) 100%),
  radial-gradient(130% 92% at 12% 90%, rgba(198,163,90,.13), transparent 56%); }
.hero--cinema h1{ font-size:clamp(2.8rem, 1.2rem + 9vw, 9.4rem); letter-spacing:-.038em; line-height:.92; font-weight:600; text-shadow:0 2px 50px rgba(0,0,0,.5); }
.hero--cinema .sub{ color:var(--bone); opacity:.9; text-shadow:0 1px 24px rgba(0,0,0,.5); font-size:clamp(0.95rem, 0.82rem + 0.65vw, 1.45rem); }
.hero--cinema .micro{ color:var(--bone-dim); }

/* ---- Full-bleed cinematic statement chapter ---- */
.cinema{ position:relative; min-height:clamp(440px,74svh,780px); display:flex; align-items:center; overflow:hidden; z-index:1; }
.section + .cinema, .cinema + .section{ border-top:none; }
.cinema-media{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--ink); }
.cinema-media img, .cinema-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(.55) contrast(1.06) brightness(.5); }
.cinema-scrim{ position:absolute; inset:0; z-index:1; background:
  linear-gradient(0deg, var(--ink) 2%, rgba(7,6,5,.32) 46%, var(--ink) 99%),
  linear-gradient(88deg, rgba(7,6,5,.82), rgba(7,6,5,.2) 72%); }
.cinema .wrap{ position:relative; z-index:2; }
.cinema h2.cinema-line{ font-size:var(--step-3); max-width:20ch; line-height:1.04; text-shadow:0 2px 40px rgba(0,0,0,.5); }
.cinema--close{ min-height:clamp(560px,88svh,980px); }
.cinema--close .reassure{ backdrop-filter:blur(2px); }
@media (prefers-reduced-motion: reduce){ .hero-media video, .cinema-media video{ display:none; } }
/* mobile nav: sticky bottom CTA covers conversion, so drop the inline nav CTA */
@media (max-width:600px){ .nav-cta{ display:none; } }
/* on phones/tablets, let the hero wrap naturally (kill the desktop line-breaks + balanced wrap) */
@media (max-width:768px){ .hero--cinema h1 br{ display:none; } .hero--cinema h1{ text-wrap:normal; } }
@media (max-width:480px){
  .hero--cinema{ min-height:clamp(560px, 78svh, 740px); }
  .hero--cinema h1{ font-size:clamp(1.7rem, 8vw, 2.6rem); line-height:1.08; overflow-wrap:break-word; }
  .hero--cinema .sub{ font-size:.92rem; overflow-wrap:break-word; }
  .display{ overflow-wrap:break-word; }
  .eyebrow{ letter-spacing:.2em; gap:.6rem; }
}

/* ============================================================
   SELF-REVIEW FIXES (focus, redaction fail-safe, show-the-work, 8->1)
   ============================================================ */

/* focus visibility — there were zero focus rules */
:where(a,button,[tabindex],input,summary):focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; border-radius:1px; }
.btn--primary:focus-visible{ outline-color:var(--bone); }
.burger:focus-visible{ outline-offset:-2px; }

/* redaction: CSS auto-clear fail-safe so a JS/slow-load failure never leaves text censored */
.redact::after{ animation: redactAuto 1.1s var(--ease-expo) 1.2s forwards; }
.redact.shown::after{ animation:none; transform:scaleX(0); }
@keyframes redactAuto{ to{ transform:scaleX(0); } }
@media (prefers-reduced-motion: reduce){ .redact::after{ animation:none; } }

/* signal line above the cinematic scrim */
.signal{ z-index:2; }

/* ===== THE DELIVERABLE — a real artifact, not a description ===== */
.show .wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.show .wrap > *{ min-width:0; }
@media (max-width:880px){ .show .wrap{ grid-template-columns:minmax(0,1fr); } }
.show-copy h2{ margin:0 0 1.1rem; }
.show-copy p{ color:var(--bone-dim); max-width:42ch; }
.show-copy .tlink{ margin-top:1.7rem; }
.brief{ position:relative; background:linear-gradient(180deg,#16130d,#0e0c09); border:1px solid var(--line); border-top:2px solid var(--gold); padding:clamp(1.4rem,3vw,2.3rem); box-shadow:0 50px 90px -45px rgba(0,0,0,.85); }
.brief-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem; border-bottom:1px solid var(--line-soft); padding-bottom:.95rem; margin-bottom:1.15rem; }
.brief-mark{ font-family:var(--label); letter-spacing:.42em; color:var(--gold); font-size:1rem; }
.brief-tag{ font-family:var(--label); letter-spacing:.16em; text-transform:uppercase; font-size:.6rem; color:var(--bone-faint); white-space:nowrap; }
.brief-sub{ font-size:.9rem; color:var(--bone-dim); margin-bottom:1.25rem; }
.brief-signal{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--label); letter-spacing:.14em; text-transform:uppercase; font-size:.68rem; color:var(--red-bright); margin-bottom:1.4rem; }
.brief-signal .sig-dot{ width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 3px rgba(192,31,45,.16); animation:pulse 3.2s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(192,31,45,.16); } 50%{ box-shadow:0 0 0 6px rgba(192,31,45,.04); } }
@media (prefers-reduced-motion: reduce){ .brief-signal .sig-dot{ animation:none; } }
.brief-findings{ list-style:none; margin:0 0 1.35rem; padding:0; display:grid; gap:.95rem; }
.brief-findings li{ font-size:.95rem; color:var(--bone); line-height:1.5; }
.brief-findings .f-k{ display:inline-block; min-width:6rem; font-family:var(--label); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.brief-mean{ border-top:1px solid var(--line-soft); padding-top:1.15rem; font-size:.95rem; color:var(--bone-dim); }
.brief-mean .mean-k{ display:block; font-family:var(--label); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:.4rem; }
.brief-stamp{ position:absolute; top:.9rem; right:1.1rem; font-size:.52rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-faint); }
.redact-box{ background:var(--ink-deep); color:transparent; border-radius:1px; padding:0 .2em; user-select:none; box-shadow:inset 0 0 0 1px var(--line-soft); }

/* ===== EIGHT REPORTS -> ONE MAP ===== */
.vs-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(1.2rem,4vw,3.2rem); align-items:start; margin-top:2.8rem; }
@media (max-width:760px){ .vs-grid{ grid-template-columns:1fr; } .vs-arrow{ transform:rotate(90deg); justify-self:center; padding:.4rem 0; } }
.vs-col .vs-label{ display:block; margin-top:2.4rem; font-size:var(--step--1); color:var(--bone-dim); max-width:32ch; }
.vs-stack{ position:relative; height:220px; }
.vs-stack .rep{ position:absolute; width:48%; height:60%; background:#19160f; border:1px solid var(--line); border-top:2px solid var(--gold-deep); box-shadow:0 12px 30px -18px #000; display:grid; place-items:center; padding:.5rem; text-align:center; font-family:var(--label); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-faint); }
.vs-stack .rep:nth-child(1){ left:1%;  top:2%;  transform:rotate(-9deg); }
.vs-stack .rep:nth-child(2){ left:20%; top:0%;  transform:rotate(4deg); }
.vs-stack .rep:nth-child(3){ left:40%; top:5%;  transform:rotate(-3deg); }
.vs-stack .rep:nth-child(4){ left:8%;  top:24%; transform:rotate(7deg); }
.vs-stack .rep:nth-child(5){ left:30%; top:30%; transform:rotate(-6deg); }
.vs-stack .rep:nth-child(6){ left:48%; top:34%; transform:rotate(3deg); }
.vs-stack .rep:nth-child(7){ left:18%; top:46%; transform:rotate(-4deg); }
.vs-stack .rep:nth-child(8){ left:38%; top:50%; transform:rotate(8deg); }
.vs-arrow{ color:var(--gold); font-size:1.7rem; align-self:center; opacity:.8; }
.vs-map{ position:relative; height:220px; border:1px solid var(--gold-deep); background:radial-gradient(130% 130% at 28% 22%, rgba(198,163,90,.14), transparent 60%), linear-gradient(180deg,#141009,#0e0b08); display:grid; place-items:center; box-shadow:0 30px 70px -40px rgba(198,163,90,.25); }
.vs-map svg{ width:80%; height:auto; color:var(--gold); }
.vs-map .vs-cap{ position:absolute; bottom:.9rem; left:1rem; font-family:var(--label); letter-spacing:.2em; text-transform:uppercase; font-size:.6rem; color:var(--gold); }

/* ===== PROBLEM MOVEMENT — four DISTINCT sections, Palantir-scale type ===== */
/* boldness = scale + crushed tracking + tight leading (never heavy weight) */
.word-xl{ display:inline-block; font-family:var(--serif); font-weight:600; font-size:clamp(3.2rem, 1.8rem + 11vw, 11rem); line-height:.88; letter-spacing:-.04em; }
@media (max-width:480px){ .word-xl{ font-size:clamp(2.5rem, 13vw, 4.2rem); } }
.problem h2{ font-weight:500; letter-spacing:-.03em; line-height:.96; font-size:clamp(2.5rem, 1.3rem + 6.6vw, 7rem); margin:0; text-wrap:pretty; }
.problem .eyebrow{ color:var(--gold); }
.problem p{ color:var(--bone-dim); }
.problem p em{ color:var(--bone); font-style:italic; }

/* beat-1 — THE OVERTURE: giant left headline, demoted right body, gold spine */
.beat-overture{ position:relative; border-top:none; padding-block:clamp(4rem,11vh,8.5rem); }
.beat-overture .wrap{ position:relative; }
.beat-overture .spine{ position:absolute; left:-1px; top:.6rem; bottom:0; width:1px; background:linear-gradient(180deg,var(--gold),transparent 92%); }
.beat-overture .ov-head h2{ max-width:13ch; }
.beat-overture .word-xl{ margin-top:.04em; }
.beat-overture .dot{ color:var(--red); }
.beat-overture .ov-body{ max-width:60ch; margin:2.4rem 0 0 0; }

/* beat-2 — THE SPLIT / LEDGER: two columns, right-aligned headline, monument glyph */
.beat-cost{ border-top:none; text-align:center; }
.beat-cost .wrap{ max-width:66ch; }
.beat-cost .cost-inner{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-block:clamp(2.6rem,6vw,4.8rem); }
.beat-cost .eyebrow{ justify-content:center; color:var(--gold); }
.beat-cost .eyebrow::after{ content:""; width:2.2rem; height:1px; background:var(--gold); opacity:.7; }
.beat-cost h2{ max-width:18ch; margin:0 auto 2rem; }
.beat-cost p{ max-width:54ch; margin-inline:auto; }

/* beat-3 — THE INDICTMENT: full-bleed dark cinema slab, the redaction peak */
.beat-indict{ border-top:none; }
.beat-indict .cinema-media{ background:radial-gradient(120% 110% at 72% 50%, rgba(46,34,16,.55), var(--ink-deep) 60%); }
.beat-indict .wrap{ position:relative; z-index:2; }
.beat-indict .ind-head h2{ max-width:17ch; }
.beat-indict .ind-body{ max-width:46ch; margin-top:1.8rem; color:var(--bone); }

/* turn — THE EXHALE: centered, narrow, flanked by gold 'window' hairlines */
.turn{ border-top:1px solid var(--line); text-align:left; }
.turn .eyebrow{ color:var(--gold); }
.turn h2{ font-size:clamp(2.5rem, 1.3rem + 6.2vw, 6.6rem); line-height:1.0; letter-spacing:-.03em; font-weight:500; max-width:24ch; margin:0 0 2.6rem; }
.turn .answer{ border-left:2px solid var(--gold); padding-left:clamp(1.4rem,3vw,2.6rem); max-width:60ch; }
.turn .answer .lead{ color:var(--bone); }
.turn .answer .lead b{ color:var(--gold-bright); font-weight:500; }
/* mobile guards for the four distinct sections (headless lays out wider than set, so guard generously) */
@media (max-width:820px){
  .problem h2{ font-size:clamp(2rem, 7.4vw, 3.6rem); line-height:1.02; }
  .word-xl{ font-size:clamp(2.6rem, 12vw, 5rem); line-height:.92; }
  .problem p{ overflow-wrap:break-word; }
  .beat-overture .ov-head h2{ max-width:none; }
  .beat-overture .ov-body{ max-width:none; margin:1.8rem 0 0 0; }
  .beat-indict .ind-head h2{ max-width:none; }
  .turn h2{ font-size:clamp(2rem, 7.4vw, 3.4rem); }
}

/* ===== AUDIT FIXES (2026-06-29) ===== */
html{ overflow-x:hidden; }
.display, .lead, p, li, .vs-label, .b-from, .reassure, .stand, .ind-body, .ov-body{ overflow-wrap:break-word; }
/* signal: animate transform (not top) for perf */
@keyframes signal{ 0%{ transform:translateY(-120%); opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ transform:translateY(440%); opacity:0; } }
.signal::after{ will-change:transform; }
/* legal small-print lifted to ~AA contrast */
.foot-base .legal{ color:var(--bone-faint); }
/* close headline width (formerly an inline style) */
.dvs-close .display{ max-width:15ch; }
/* touch targets >= ~44px on small screens */
@media (max-width:760px){
  .fcol a{ padding-block:.62rem; }
  .tlink{ padding-block:.4rem; }
  .topbar .letter{ padding-block:.35rem; }
  .menu-meta a{ padding-block:.5rem; }
}
/* smallest phones (<=400px): let the brief breathe so nothing clips at 320 */
@media (max-width:400px){
  .brief{ padding:clamp(1.1rem,4.5vw,1.5rem); }
  .brief-tag{ white-space:normal; text-align:right; }
}
/* lenses: stack name above body on mobile — the .4fr name column can't shrink
   below a long word like "Political", so the 2-col grid overlaps the body. */
@media (max-width:640px){
  .lens{ grid-template-columns:1fr; gap:.45rem; }
  .lens p{ align-self:start; }
  .lens:hover{ padding-left:0; }
}

/* ===== CLIENT LOGIN ===== */
.nav-login{ color:var(--bone-dim); font-size:var(--step--1); letter-spacing:.04em; transition:color .3s var(--ease); white-space:nowrap; }
.nav-login:hover{ color:var(--gold); }
.nav-login[aria-current="page"]{ color:var(--gold); }
@media (max-width:600px){ .nav-login{ display:none; } }

.auth{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:66vh; padding-block:clamp(2.6rem,7vh,5rem); padding-inline:clamp(1.25rem,5vw,2rem); }
.auth-shell{ width:100%; max-width:30rem; min-width:0; }
.auth-card{ position:relative; max-width:100%; background:linear-gradient(180deg,#15120b,#0d0b08); border:1px solid var(--gold-deep); box-shadow:inset 0 0 0 1px rgba(198,163,90,.10), 0 60px 110px -55px rgba(0,0,0,.9); padding:clamp(1.7rem,5vw,2.6rem); }
.auth-brand{ text-align:center; margin-bottom:1.9rem; }
.auth-wordmark{ display:block; height:34px; width:auto; margin:0 auto; }
.auth-motto{ font-family:var(--label); letter-spacing:.22em; text-transform:uppercase; font-size:.58rem; color:var(--gold); margin:.85rem 0 0; }
.auth-rule{ display:block; width:46px; height:2px; background:var(--red); margin:.8rem auto 0; }

.auth-form{ display:grid; grid-template-columns:minmax(0,1fr); gap:.9rem; }
.auth-field{ display:flex; align-items:center; border:1px solid var(--line); background:#100e09; transition:border-color .3s var(--ease); }
.auth-field:focus-within{ border-color:var(--gold); }
.auth-ico{ display:grid; place-items:center; width:42px; flex:none; color:var(--bone-faint); }
.auth-field input{ flex:1; min-width:0; background:transparent; border:0; color:var(--bone); font-family:var(--sans); font-size:var(--step-0); padding:.9rem .4rem; outline:none; }
.auth-field input::placeholder{ color:var(--bone-faint); }
.auth-field input:-webkit-autofill{ -webkit-text-fill-color:var(--bone); transition:background-color 9999s; }
.auth-eye{ display:grid; place-items:center; background:transparent; border:0; color:var(--bone-faint); padding:0 .8rem; cursor:pointer; transition:color .3s var(--ease); }
.auth-eye:hover, .auth-eye.on{ color:var(--gold); }

.auth-alert{ font-size:var(--step--1); line-height:1.4; padding:.65rem .85rem; border:1px solid; }
.auth-alert.err{ color:#f0b8bd; border-color:rgba(192,31,45,.5); background:rgba(192,31,45,.09); }
.auth-alert.ok{ color:#e6d6aa; border-color:var(--gold-deep); background:rgba(198,163,90,.09); }

.auth-submit{ width:100%; border:0; background:var(--red); color:#fff; font-family:var(--sans); font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:.78rem; padding:.95rem 1rem; margin-top:.3rem; cursor:pointer; transition:background .3s var(--ease); }
.auth-submit:hover{ background:var(--red-bright); }
.auth-submit:disabled{ opacity:.6; cursor:default; }

.auth-or{ display:flex; align-items:center; gap:.85rem; color:var(--bone-faint); font-family:var(--label); letter-spacing:.2em; text-transform:uppercase; font-size:.58rem; margin:.2rem 0; }
.auth-or::before, .auth-or::after{ content:""; flex:1; height:1px; background:var(--line); }

.auth-sso{ display:block; text-align:center; border:1px solid var(--line); color:var(--bone); padding:.85rem 1rem; font-family:var(--sans); font-size:var(--step--1); letter-spacing:.04em; transition:border-color .3s var(--ease), color .3s var(--ease); }
.auth-sso:hover{ border-color:var(--gold); color:var(--gold-bright); }
.auth-forgot{ display:block; text-align:center; color:var(--bone-dim); font-size:var(--step--1); margin-top:.2rem; transition:color .3s var(--ease); }
.auth-forgot:hover{ color:var(--gold); }

.auth-secure{ display:flex; align-items:center; justify-content:center; gap:.5rem; margin:1.5rem 0 0; color:var(--bone-faint); font-family:var(--label); letter-spacing:.08em; text-transform:uppercase; font-size:.56rem; text-align:center; }
.auth-secure .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none; }
.auth-secure b{ color:var(--bone-dim); font-weight:500; }
.auth-secure, .auth-secure b{ overflow-wrap:anywhere; }
.auth-foot{ text-align:center; color:var(--bone-dim); font-size:var(--step--1); margin:1.7rem auto 0; max-width:38ch; }
.auth-foot a{ color:var(--gold); }
.auth-foot a:hover{ color:var(--gold-bright); }

/* ============================================================
   INTERIOR PAGES — shared
   ============================================================ */
/* active menu item (interior pages mark their own nav link) */
.menu-nav a[aria-current="page"]{ color:var(--gold); }
.menu-nav a[aria-current="page"] .idx{ color:var(--gold-bright); }

/* interior hero (no video) — wider measure than the homepage cinema hero */
.hero--lead{ padding-block:clamp(4.5rem,13vh,9rem) var(--chapter); }
.hero--lead h1{ max-width:22ch; margin:0 0 1.6rem; }
.hero--lead .sub{ max-width:54ch; color:var(--bone-dim); margin:0; }

/* ============================================================
   PLATFORM PAGE
   ============================================================ */
/* short system cue above the proof */
.cue{ max-width:56ch; color:var(--bone-dim); margin-top:1.5rem; }
.cue b{ color:var(--bone); font-weight:500; }

/* ---- the worked cross-lens link (the proof) ---- */
.xlink{
  position:relative; margin-top:2.8rem; max-width:780px;
  background:linear-gradient(180deg,#15120c,#0e0c09);
  border:1px solid var(--line); border-top:2px solid var(--gold);
  padding:clamp(1.4rem,3.6vw,2.4rem);
  box-shadow:0 50px 90px -50px rgba(0,0,0,.85);
}
.xlink-stamp{ position:absolute; top:.9rem; right:1.1rem; font-family:var(--label); font-size:.52rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim); }
.xlink-reports{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1rem,3vw,1.8rem); margin-top:.6rem; }
.xlink-report{ min-width:0; border:1px solid var(--line-soft); border-top:2px solid var(--gold-deep); background:#100e09; padding:clamp(1rem,2.6vw,1.4rem); }
.xlink-desk{ display:block; font-family:var(--label); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:.7rem; }
.xlink-verdict{ font-family:var(--serif); font-size:var(--step-1); color:var(--bone); line-height:1.18; margin:0 0 .7rem; }
.xlink-alone{ font-size:.78rem; letter-spacing:.03em; color:var(--bone-dim); }
.xlink-join{ display:flex; align-items:center; gap:1rem; margin:1.4rem 0; color:var(--gold); font-family:var(--label); letter-spacing:.22em; text-transform:uppercase; font-size:.64rem; }
.xlink-join::before, .xlink-join::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold-deep),transparent); }
.xlink-read{ border:1px solid var(--gold-deep); border-top:2px solid var(--red); background:radial-gradient(120% 120% at 18% 0%, rgba(192,31,45,.07), transparent 58%), #0e0b08; padding:clamp(1.1rem,3vw,1.6rem); color:var(--bone-dim); line-height:1.55; }
.xlink-read-k{ display:block; font-family:var(--label); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--red-bright); margin-bottom:.5rem; }
.xlink-read b{ color:var(--bone); font-weight:500; }
@media (max-width:560px){ .xlink-reports{ grid-template-columns:minmax(0,1fr); } }

/* ---- engine shape: a textual flow, not a map (no card grid) ---- */
.engine-flow{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(.8rem,2.2vw,1.6rem); margin-top:2.6rem; }
.estep{ min-width:0; border-top:1px solid var(--line); padding-top:1rem; position:relative; }
.estep .es-n{ font-family:var(--label); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.estep h3{ font-family:var(--serif); font-weight:500; font-size:var(--step-1); line-height:1.1; margin:.45rem 0 .5rem; color:var(--bone); }
.estep p{ margin:0; color:var(--bone-dim); font-size:var(--step--1); }
.estep:not(:last-child)::after{ content:"\2192"; position:absolute; top:1rem; right:-.7rem; color:var(--gold-deep); font-family:var(--sans); }
@media (max-width:680px){ .engine-flow{ grid-template-columns:minmax(0,1fr); gap:0; } .estep{ padding-block:1.1rem; } .estep:not(:last-child)::after{ content:""; } }
.engine-note{ margin-top:2rem; max-width:62ch; color:var(--bone-dim); }
.engine-note b{ color:var(--bone); font-weight:500; }

/* ---- what it is / isn't ---- */
.nots{ margin-top:2.6rem; border-top:1px solid var(--line); }
.not-row{ display:grid; grid-template-columns:minmax(0,.46fr) minmax(0,1fr); gap:clamp(1rem,3vw,2.4rem); padding-block:1.4rem; border-bottom:1px solid var(--line-soft); align-items:baseline; }
.not-row .nk{ font-family:var(--serif); font-size:var(--step-1); color:var(--bone-faint); line-height:1.15; }
.not-row p{ margin:0; color:var(--bone-dim); align-self:center; }
.not-row p b{ color:var(--bone); font-weight:500; }
.nots-aff{ margin-top:2.2rem; }
.nots-aff .display{ max-width:24ch; }
.nots-aff .display b{ color:var(--gold-bright); font-weight:500; }
@media (max-width:640px){ .not-row{ grid-template-columns:minmax(0,1fr); gap:.4rem; } .not-row p{ align-self:start; } }

/* ============================================================
   SPRINTS PAGE
   ============================================================ */
.sprints{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; margin-top:2.8rem; border-top:1px solid var(--line); }
.sprint{ min-width:0; padding-block:clamp(1.6rem,3.5vw,2.6rem); }
.sprint .s-k{ font-family:var(--label); letter-spacing:.24em; text-transform:uppercase; font-size:.7rem; color:var(--gold); display:block; margin-bottom:1rem; }
.sprint h3{ font-family:var(--serif); font-weight:500; font-size:var(--step-2); line-height:1.05; margin:0 0 .6rem; color:var(--bone); }
.sprint .s-plus{ font-family:var(--label); letter-spacing:.04em; font-size:var(--step--1); color:var(--gold-bright); margin:0 0 1rem; }
.sprint .s-point{ color:var(--bone-dim); margin:0 0 1.3rem; }
.sprint .s-point b{ color:var(--bone); font-weight:500; }
.sprint .s-q{ font-family:var(--serif); font-style:italic; color:var(--gold-bright); font-size:var(--step-1); line-height:1.3; margin:0 0 1.3rem; }
.sprint ul{ list-style:none; margin:0 0 1.3rem; padding:0; display:grid; gap:.7rem; }
.sprint li{ color:var(--bone-dim); font-size:var(--step--1); line-height:1.45; padding-left:1.2rem; position:relative; }
.sprint li::before{ content:""; position:absolute; left:0; top:.62em; width:.5rem; height:1px; background:var(--gold); }
.sprint .s-who{ color:var(--bone-dim); font-size:var(--step--1); font-style:italic; }
@media (min-width:761px){
  .sprint--company{ padding-right:clamp(1.6rem,4vw,3.2rem); border-right:1px solid var(--line); }
  .sprint--deal{ padding-left:clamp(1.6rem,4vw,3.2rem); }
}
@media (max-width:760px){
  .sprints{ grid-template-columns:minmax(0,1fr); }
  .sprint--deal{ border-top:1px solid var(--line); }
}
.lenses-line{ margin-top:2.4rem; color:var(--bone-dim); }
.lenses-line b{ color:var(--bone); font-weight:500; }
.lenses-line em{ color:var(--gold-bright); font-style:italic; }

/* ============================================================
   DELIVERABLE PAGE — questions + what to listen for
   ============================================================ */
.qcard{ position:relative; margin-top:2.6rem; max-width:800px; background:linear-gradient(180deg,#15120c,#0e0c09); border:1px solid var(--line); border-top:2px solid var(--gold); padding:clamp(1.4rem,3.6vw,2.4rem); box-shadow:0 50px 90px -50px rgba(0,0,0,.85); }
.qcard-stamp{ position:absolute; top:.9rem; right:1.1rem; font-family:var(--label); font-size:.52rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim); }
.qk{ display:block; font-family:var(--label); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:.55rem; }
.qcard-finding{ font-family:var(--serif); font-size:var(--step-1); color:var(--bone); line-height:1.25; padding-bottom:1.2rem; border-bottom:1px solid var(--line-soft); }
.qcard-ask{ padding-block:1.2rem; border-bottom:1px solid var(--line-soft); }
.qcard-ask .qtext{ margin:0; font-family:var(--serif); font-style:italic; color:var(--gold-bright); font-size:var(--step-1); line-height:1.3; }
.qcard-listen{ padding-top:1.2rem; }
.ladder{ list-style:none; margin:.1rem 0 0; padding:0; display:grid; gap:.7rem; }
.lvl{ min-width:0; padding:.75rem .95rem; border-left:2px solid var(--line); background:#100e09; color:var(--bone-dim); font-size:var(--step--1); line-height:1.5; }
.lvl-k{ font-family:var(--label); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; margin-right:.55rem; }
.lvl--strong{ border-left-color:var(--gold); }
.lvl--strong .lvl-k{ color:var(--gold-bright); }
.lvl--weak{ border-left-color:var(--bone-faint); }
.lvl--weak .lvl-k{ color:var(--bone-dim); }
.lvl--flag{ border-left-color:var(--red); }
.lvl--flag .lvl-k{ color:var(--red-bright); }
.qcard-foot{ margin-top:1.3rem; padding-top:1.2rem; border-top:1px solid var(--line-soft); color:var(--bone-dim); font-size:var(--step--1); line-height:1.55; }
.qcard-foot b{ color:var(--bone); font-weight:500; }

/* deliverable — evidence record (supporting proof) */
.evlist{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.85rem; max-width:62ch; }
.evlist li{ color:var(--bone-dim); padding-left:1.3rem; position:relative; line-height:1.5; }
.evlist li::before{ content:""; position:absolute; left:0; top:.72em; width:.55rem; height:1px; background:var(--gold); }
.evlist li b{ color:var(--bone); font-weight:500; }

/* ============================================================
   APPLICATIONS PAGE — roles, trigger-tagged
   ============================================================ */
.roles{ margin-top:2.8rem; border-top:1px solid var(--line); }
.role{ display:grid; grid-template-columns:minmax(0,.44fr) minmax(0,1fr); gap:clamp(1.2rem,4vw,3rem); padding-block:clamp(1.8rem,4vw,2.6rem); border-bottom:1px solid var(--line-soft); align-items:start; }
.role .r-num{ font-family:var(--label); color:var(--gold); font-size:.66rem; letter-spacing:.2em; display:block; margin-bottom:.7rem; }
.role h3{ font-family:var(--serif); font-weight:500; font-size:var(--step-1); line-height:1.14; margin:0; color:var(--bone); }
.role .r-body{ min-width:0; }
.role .r-sit{ margin:0 0 1.1rem; color:var(--bone-dim); }
.role .r-sit b{ color:var(--bone); font-weight:500; }
.role .r-when{ margin:0; color:var(--bone); font-family:var(--serif); font-style:italic; font-size:var(--step-0); line-height:1.45; padding-left:1rem; border-left:2px solid var(--gold-deep); }
@media (max-width:640px){ .role{ grid-template-columns:minmax(0,1fr); gap:.85rem; } }

/* ============================================================
   LETTER PAGE
   ============================================================ */
.letter-shell{ max-width:64ch; margin-inline:auto; }
.letter-shell .eyebrow{ justify-content:flex-start; }
.letter-title{ font-family:var(--serif); font-weight:500; font-size:var(--step-2); line-height:1.08; color:var(--bone); margin:0 0 1.6rem; max-width:18ch; }
.letter-rule{ display:block; width:48px; height:2px; background:var(--red); margin:0 0 2.4rem; }
.letter-body p{ font-size:var(--step-0); line-height:1.8; color:var(--bone); margin:0 0 1.5rem; }
.letter-body p em{ color:var(--gold-bright); font-style:italic; }
.letter-body strong{ color:var(--bone); font-weight:500; }
.letter-sign{ margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--line-soft); }
.letter-sign .ls-name{ font-family:var(--serif); font-style:italic; color:var(--gold-bright); font-size:var(--step-1); }
.letter-sign .ls-role{ display:block; font-family:var(--label); letter-spacing:.18em; text-transform:uppercase; font-size:.66rem; color:var(--bone-dim); margin-top:.55rem; }

/* ============================================================
   CALL PAGE — Calendly embed
   ============================================================ */
.call-embed{ margin-top:2.4rem; border:1px solid var(--line); border-top:2px solid var(--gold); background:var(--ink-rise); padding:clamp(.5rem,1.5vw,1rem); }
.cal-inline{ min-width:0; width:100%; height:760px; }
@media (max-width:600px){ .cal-inline{ height:1040px; } }
.call-alt{ margin-top:1.8rem; color:var(--bone-dim); font-size:var(--step--1); line-height:1.6; }
.call-alt a{ color:var(--gold); }
.call-alt a:hover{ color:var(--gold-bright); }

/* ============================================================
   LEGAL / DOC PAGES (terms, privacy)
   ============================================================ */
.doc{ max-width:68ch; margin-inline:auto; }
.doc-meta{ font-family:var(--label); letter-spacing:.16em; text-transform:uppercase; font-size:.64rem; color:var(--bone-dim); margin-bottom:1.4rem; }
.doc-note{ border-left:2px solid var(--gold-deep); padding:.9rem 1.1rem; background:var(--ink-rise); color:var(--bone-dim); font-size:var(--step--1); line-height:1.6; margin:0 0 2.4rem; }
.doc h2{ font-family:var(--serif); font-weight:500; font-size:var(--step-1); line-height:1.15; margin:2.6rem 0 .8rem; color:var(--bone); }
.doc h2:first-of-type{ margin-top:0; }
.doc p, .doc li{ color:var(--bone-dim); line-height:1.7; }
.doc p{ margin:0 0 1rem; }
.doc ul{ margin:0 0 1.2rem; padding-left:1.2rem; }
.doc li{ margin-bottom:.5rem; }
.doc a{ color:var(--gold); }
.doc a:hover{ color:var(--gold-bright); }
.doc strong{ color:var(--bone); font-weight:500; }

/* ============================================================
   404
   ============================================================ */
.nf{ min-height:54vh; display:flex; flex-direction:column; justify-content:center; }
.nf .code{ font-family:var(--label); letter-spacing:.3em; color:var(--gold); font-size:.8rem; margin-bottom:1rem; }
.nf .close-cta{ margin-top:2.2rem; }

/* ============================================================
   FIELD NOTES — index + article
   ============================================================ */
.fn-list{ margin-top:2.8rem; border-top:1px solid var(--line); }
.fn-item{ display:block; padding-block:clamp(1.5rem,3.6vw,2.4rem); border-bottom:1px solid var(--line-soft); transition:padding-left .45s var(--ease); }
.fn-item:hover{ padding-left:.7rem; }
.fn-item .fn-kicker{ font-family:var(--label); letter-spacing:.2em; text-transform:uppercase; font-size:.62rem; color:var(--gold); }
.fn-item h3{ font-family:var(--serif); font-weight:500; font-size:var(--step-2); line-height:1.06; margin:.6rem 0 .55rem; color:var(--bone); }
.fn-item p{ margin:0; color:var(--bone-dim); max-width:62ch; }
.fn-item .fn-more{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem; color:var(--gold); font-size:var(--step--1); letter-spacing:.06em; text-transform:uppercase; font-family:var(--sans); }
.fn-item .fn-more .arr{ transition:transform .4s var(--ease); }
.fn-item:hover .fn-more{ color:var(--gold-bright); }
.fn-item:hover .fn-more .arr{ transform:translateX(5px); }
.fn-soon{ padding-block:1.6rem; color:var(--bone-dim); font-style:italic; font-family:var(--serif); border-bottom:1px solid var(--line-soft); }

/* article reading layout (reuses .doc container) */
.article-head{ margin-bottom:2rem; }
.article-head .dek{ color:var(--bone-dim); font-family:var(--serif); font-style:italic; font-size:var(--step-1); line-height:1.4; margin:1rem 0 0; }
.article-meta{ font-family:var(--label); letter-spacing:.16em; text-transform:uppercase; font-size:.62rem; color:var(--bone-dim); margin-top:1.4rem; }
.doc .pull{ font-family:var(--serif); font-style:italic; color:var(--gold-bright); font-size:var(--step-1); line-height:1.35; border-left:2px solid var(--gold-deep); padding-left:1.2rem; margin:2rem 0; }

/* ============================================================
   SKIP LINK (a11y — WCAG 2.4.1 Bypass Blocks)
   ============================================================ */
.skip-link{ position:fixed; left:1rem; top:-3.5rem; z-index:100; background:var(--gold); color:var(--ink); font-family:var(--sans); font-weight:600; font-size:var(--step--1); letter-spacing:.04em; text-transform:uppercase; padding:.7rem 1.15rem; transition:top .22s var(--ease); }
.skip-link:focus-visible, .skip-link:focus{ top:1rem; outline:2px solid var(--bone); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .skip-link{ transition:none; } }