/* =========================================================
   VISION DEVELOPMENT — National Transformation OS
   Dark editorial system. Hairlines, mono labels, one accent.
   ========================================================= */

:root{
  /* ---- Type scale ---- */
  --text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm:   clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.22vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1.04rem + 0.42vw, 1.3125rem);
  --text-xl:   clamp(1.5rem, 1.24rem + 1.1vw, 2.125rem);
  --text-2xl:  clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --text-3xl:  clamp(2.5rem, 1.3rem + 4.2vw, 4.5rem);
  --text-hero: clamp(2.75rem, 1rem + 6.2vw, 6.25rem);

  /* ---- Spacing ---- */
  --space-1:.25rem;  --space-2:.5rem;   --space-3:.75rem;  --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem;  --space-8:2rem;    --space-10:2.5rem;
  --space-12:3rem;   --space-16:4rem;   --space-20:5rem;   --space-24:6rem;
  --space-32:8rem;

  /* ---- Colour: warm daylight editorial ---- */
  --ink:        #FBFAF7;   /* page surface  */
  --ink-2:      #F3EFE7;   /* alt surface   */
  --ink-3:      #EAE4D9;   /* raised        */
  --paper:      #16181C;   /* primary text  */
  --muted:      #5A6270;   /* secondary     */
  --faint:      #8A93A1;   /* tertiary      */
  --line:       rgba(22,24,28,.13);
  --line-strong:rgba(22,24,28,.26);
  --signal:     #0E8C81;   /* deep teal, AA on paper */
  --signal-dim: rgba(14,140,129,.10);
  --warm:       #B7791F;   /* gold highlight */
  --on-media:   #FFFFFF;   /* text over photography */

  /* ---- Fonts ---- */
  --font-display:'Clash Display','Satoshi','Helvetica Neue',sans-serif;
  --font-body:'Satoshi','Helvetica Neue',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* ---- Layout ---- */
  --wrap: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --sec-pad: clamp(4.5rem, 10vw, 9rem);
  --ease: cubic-bezier(.16,1,.3,1);
  --t: 220ms var(--ease);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:none; text-size-adjust:none;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
  background:var(--ink);
}

body{
  min-height:100dvh;
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.65;
  color:var(--paper);
  background:var(--ink);
  overflow-x:hidden;
}

img,video,svg{display:block;max-width:100%;height:auto}
ul[role=list],ol[role=list]{list-style:none}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
h1,h2,h3,h4{text-wrap:balance;line-height:1.08;font-weight:500;letter-spacing:-.012em;word-spacing:.04em;font-family:var(--font-display)}
p{text-wrap:pretty}

::selection{background:var(--signal-dim);color:var(--paper)}

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

.skip{
  position:absolute;left:var(--space-4);top:-4rem;z-index:200;
  background:var(--signal);color:#04100F;padding:.6rem 1rem;
  font-family:var(--font-mono);font-size:var(--text-xs);text-decoration:none;
  transition:top var(--t);
}
.skip:focus{top:var(--space-4)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

.mono{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:400;
}

.eyebrow{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--signal);
  margin-bottom:var(--space-8);
}

.num{color:var(--signal);display:block;margin-bottom:var(--space-4)}

.link{
  color:var(--paper);text-decoration:none;
  border-bottom:1px solid var(--line-strong);padding-bottom:2px;
}
.link:hover{color:var(--signal);border-bottom-color:var(--signal)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:.95rem 1.6rem;border:1px solid var(--line-strong);
  color:var(--paper);background:transparent;white-space:nowrap;
  transition:background var(--t),border-color var(--t),color var(--t);
}
.btn--solid{background:var(--paper);color:#05080A;border-color:var(--paper)}
.btn--solid:hover{background:var(--signal);border-color:var(--signal);color:#04100F}
.btn--ghost:hover{border-color:var(--signal);color:var(--signal)}

/* ---------- Nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background var(--t),border-color var(--t),backdrop-filter var(--t);
}
.nav--scrolled{
  background:rgba(5,6,7,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--wrap);margin-inline:auto;padding:var(--space-4) var(--gutter);
  display:flex;align-items:center;gap:var(--space-8);
}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--paper);text-decoration:none;flex-shrink:0}
.brand__mark{width:26px;height:26px;color:var(--signal);flex-shrink:0}
.brand__type{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:.2em;text-transform:uppercase;
}
.nav__links{display:flex;gap:var(--space-6);margin-left:auto}
.nav__links a{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;position:relative;padding-bottom:3px;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--signal);transition:width 320ms var(--ease);
}
.nav__links a:hover{color:var(--paper)}
.nav__links a:hover::after{width:100%}
.nav__cta{padding:.65rem 1.1rem}

.nav__toggle{display:none;width:34px;height:34px;flex-direction:column;justify-content:center;gap:6px;margin-left:auto}
.nav__toggle span{display:block;height:1px;width:22px;background:var(--paper);transition:transform var(--t),opacity var(--t)}
.nav__toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:95;background:var(--ink);
  display:flex;align-items:center;padding:var(--space-16) var(--gutter);
}
.menu[hidden]{display:none}
.menu__links{display:flex;flex-direction:column;gap:var(--space-5);width:100%}
.menu__links a{
  color:var(--paper);text-decoration:none;font-family:var(--font-display);
  font-size:var(--text-lg);letter-spacing:-.02em;
  display:flex;align-items:baseline;gap:var(--space-4);
  border-bottom:1px solid var(--line);padding-bottom:var(--space-4);
}
.menu__links .mono{color:var(--signal);font-size:.7rem}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:var(--space-32) var(--space-8);
  overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img,.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top, var(--ink) 2%, rgba(5,6,7,.72) 42%, rgba(5,6,7,.55) 100%),
    linear-gradient(to right, rgba(5,6,7,.85) 0%, rgba(5,6,7,.25) 70%);
}
.hero__inner{position:relative;z-index:1}
.hero__h{
  letter-spacing:-.005em;word-spacing:.02em;
  font-size:var(--text-hero);
  font-weight:600;
  line-height:.96;
  margin-bottom:var(--space-8);
}
.hero__sub{
  font-size:var(--text-lg);color:var(--muted);max-width:56ch;
  line-height:1.55;margin-bottom:var(--space-10);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.hero__foot{
  position:relative;z-index:1;
  max-width:var(--wrap);margin:var(--space-20) auto 0;width:100%;
  padding:var(--space-4) var(--gutter) 0;
  display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
  color:var(--faint);
}
.hero__foot::before{
  content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:0;
  height:1px;background:var(--line);
}

/* ---------- Credibility bar ---------- */
.cred{border-bottom:1px solid var(--line);padding-block:var(--space-10);background:var(--ink)}
.cred__label{color:var(--faint);margin-bottom:var(--space-5)}
.cred__list{
  list-style:none;display:flex;flex-wrap:wrap;
  gap:var(--space-3) var(--space-8);align-items:center;
}
.cred__list li{
  font-family:var(--font-body);font-size:var(--text-base);font-weight:500;
  color:var(--muted);letter-spacing:0;
}

/* ---------- Section shell ---------- */
.sec{padding-block:var(--sec-pad);border-bottom:1px solid var(--line);position:relative}
.sec--alt{background:var(--ink-2)}
.sec__head{max-width:60ch;margin-bottom:var(--space-16)}
.sec__head--row{margin-bottom:var(--space-12)}
.sec__h{font-size:var(--text-2xl);margin-bottom:var(--space-5)}
.sec__head--row .sec__h{margin-bottom:0}
.sec__sub{color:var(--muted);font-size:var(--text-lg);line-height:1.55;max-width:52ch}
.sec__sub--wide{margin-bottom:var(--space-12);margin-top:calc(var(--space-5) * -1)}
.sec__note{
  margin-top:var(--space-12);color:var(--faint);font-size:var(--text-sm);
  max-width:64ch;padding-top:var(--space-6);border-top:1px solid var(--line);
}
.sec__note a{color:var(--signal);text-decoration:none;border-bottom:1px solid var(--signal-dim)}
.sec__note a:hover{border-bottom-color:var(--signal)}

/* Media-backed sections */
.sec--media{overflow:hidden}
.sec--media .wrap{position:relative;z-index:1}
.sec__media{position:absolute;inset:0;z-index:0}
.sec__media img,.sec__media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.sec__media video{opacity:0;transition:opacity 900ms var(--ease)}
.sec__media video.is-playing{opacity:1}
.sec__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to right, var(--ink) 8%, rgba(5,6,7,.90) 45%, rgba(5,6,7,.72) 100%);
}
.sec--evidence .sec__scrim{background:linear-gradient(to bottom, var(--ink) 4%, rgba(5,6,7,.90) 38%, rgba(5,6,7,.93) 100%)}
.sec--close .sec__scrim{background:linear-gradient(to bottom, var(--ink) 6%, rgba(11,14,16,.95) 40%, rgba(11,14,16,.975) 100%)}

/* Full-bleed divider band */
.band{position:relative;height:clamp(14rem,32vh,26rem);overflow:hidden;border-bottom:1px solid var(--line)}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band__scrim{position:absolute;inset:0;background:linear-gradient(to bottom, var(--ink) 0%, rgba(5,6,7,.35) 40%, var(--ink-2) 100%)}

/* ---------- Split grid ---------- */
.grid-split{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem)}
.grid-split--wide{grid-template-columns:minmax(0,4fr) minmax(0,6fr)}
.col-label__h{font-size:var(--text-xl);letter-spacing:-.03em}
.col-body>p{max-width:62ch;color:var(--muted)}
.col-body>p + p{margin-top:var(--space-5)}
.lead{font-size:var(--text-lg);color:var(--paper)!important;line-height:1.5;text-wrap:pretty}

/* Symptoms list */
.symptoms{margin-top:var(--space-10);display:grid;gap:var(--space-5)}
.symptoms li{display:grid;grid-template-columns:2.5rem 1fr;gap:var(--space-4);align-items:start;
  border-top:1px solid var(--line);padding-top:var(--space-5)}
.symptoms .mono{color:var(--signal)}
.symptoms p{color:var(--muted);max-width:52ch}

.pull{
  margin-top:var(--space-10);padding-left:var(--space-6);
  border-left:1px solid var(--signal);
  font-family:var(--font-display);font-size:var(--text-lg);
  color:var(--paper)!important;letter-spacing:-.02em;line-height:1.35;max-width:44ch;
}

/* Contrast block */
.contrast{
  margin-top:var(--space-12);display:grid;
  grid-template-columns:1fr 1px 1fr;gap:var(--space-8);
  border:1px solid var(--line);padding:var(--space-8);
}
.contrast__rule{background:var(--line)}
.contrast__tag{color:var(--faint);margin-bottom:var(--space-5)}
.contrast__side--on .contrast__tag{color:var(--signal)}
.contrast ul{list-style:none;display:grid;gap:var(--space-3)}
.contrast li{color:var(--muted);font-size:var(--text-sm);line-height:1.5}
.contrast__side--on li{color:var(--paper)}

/* ---------- Architecture rows ---------- */
.arch{display:grid;border-top:1px solid var(--line)}
.arch__item{
  display:grid;grid-template-columns:4rem minmax(0,18rem) minmax(0,1fr);
  gap:var(--space-6);align-items:baseline;
  padding-block:var(--space-6);border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:padding-left var(--t),border-color var(--t);
}
.arch__item:hover{padding-left:var(--space-3);border-bottom-color:var(--line-strong)}
.arch__n{color:var(--signal)}
.arch__k{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:-.02em}
.arch__d{color:var(--muted);font-size:var(--text-sm)}
.arch__item:hover .arch__k{color:var(--signal)}

/* ---------- Pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.pillar{background:var(--ink);padding:var(--space-8);transition:background var(--t)}
.pillar:hover{background:var(--ink-3)}
.pillar__n{color:var(--signal);display:block;margin-bottom:var(--space-8)}
.pillar h3{font-size:var(--text-lg);margin-bottom:var(--space-4)}
.pillar p{color:var(--muted);font-size:var(--text-sm);line-height:1.6}

/* ---------- Weapons ---------- */
.weapons{display:grid;border-top:1px solid var(--line)}
.weapons li{
  display:grid;grid-template-columns:4rem minmax(0,22rem) minmax(0,1fr);
  gap:var(--space-6);align-items:baseline;
  padding-block:var(--space-8);border-bottom:1px solid var(--line);
}
.weapons__n{color:var(--signal)}
.weapons h3{font-size:var(--text-lg)}
.weapons p{color:var(--muted);font-size:var(--text-sm)}

/* ---------- Engine ---------- */
.engine{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.engine__step{background:var(--ink);padding:var(--space-8) var(--space-6);position:relative}
.engine__n{color:var(--signal);display:block;margin-bottom:var(--space-10)}
.engine__step h3{font-size:var(--text-base);font-family:var(--font-display);letter-spacing:-.02em;margin-bottom:var(--space-3);line-height:1.2}
.engine__step p{color:var(--muted);font-size:var(--text-sm);line-height:1.55}

/* ---------- Evidence ---------- */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:rgba(5,6,7,.72);padding:var(--space-8);transition:background var(--t)}
.stat:hover{background:rgba(16,20,22,.9)}
.stat__fig{
  font-family:var(--font-display);font-size:var(--text-3xl);font-weight:600;
  letter-spacing:-.05em;line-height:1;margin-bottom:var(--space-4);
}
.stat__fig span{color:var(--signal);font-size:.5em;letter-spacing:-.02em;margin-left:.06em}
.stat__c{color:var(--signal);margin-bottom:var(--space-3)}
.stat__d{color:var(--muted);font-size:var(--text-sm);line-height:1.55}

/* ---------- Sprint ---------- */
.sprint{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.sprint__win{background:var(--ink-2);padding:var(--space-8)}
.sprint__range{color:var(--signal);margin-bottom:var(--space-10)}
.sprint__win h3{font-size:var(--text-lg);margin-bottom:var(--space-4)}
.sprint__win p{color:var(--muted);font-size:var(--text-sm)}

/* ---------- Book ---------- */
.sec--book{background:var(--ink)}
.book{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr);gap:clamp(2.5rem,7vw,7rem);align-items:center}
.book__visual{position:relative;aspect-ratio:4/3;border:1px solid var(--line);overflow:hidden;background:#000}
.book__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity 900ms var(--ease)}
.book__film.is-playing{opacity:.55}

.book__body .num{margin-bottom:var(--space-4)}
.book__body .lead{margin-bottom:var(--space-5)}
.book__body>p{color:var(--muted);max-width:52ch}
.book__meta{margin-block:var(--space-10);border-top:1px solid var(--line)}
.book__meta>div{
  display:grid;grid-template-columns:8rem 1fr;gap:var(--space-4);
  padding-block:var(--space-4);border-bottom:1px solid var(--line);
}
.book__meta dt{color:var(--faint);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase}
.book__meta dd{color:var(--paper);font-size:var(--text-sm)}
.book__cta{display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* ---------- Colin ---------- */
.portrait{margin-top:var(--space-8);border:1px solid var(--line);overflow:hidden}
.portrait img{width:100%;filter:saturate(.55) contrast(1.05) brightness(.86)}
.platforms{margin-top:var(--space-10);border-top:1px solid var(--line);padding-top:var(--space-6)}
.platforms__label{color:var(--faint);margin-bottom:var(--space-5)}
.platforms ul{list-style:none;display:grid;gap:var(--space-3)}
.platforms li{
  color:var(--muted);font-size:var(--text-sm);
  padding-left:var(--space-5);position:relative;
}
.platforms li::before{
  content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--signal);
}
.colin__link{margin-top:var(--space-8)}

/* ---------- Inquiries ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:var(--space-16)}
.tile{background:var(--ink-2);padding:var(--space-8);transition:background var(--t)}
.tile:hover{background:var(--ink-3)}
.tile h3{font-size:var(--text-lg);margin-bottom:var(--space-4)}
.tile p{color:var(--muted);font-size:var(--text-sm)}

.form{max-width:820px;display:grid;gap:var(--space-6)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.field{display:grid;gap:var(--space-2)}
.field label{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
}
.field input,.field select,.field textarea{
  background:transparent;border:none;border-bottom:1px solid var(--line);
  padding:.7rem 0;color:var(--paper);font-size:var(--text-base);
  border-radius:0;
}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 12px) 1.3rem,calc(100% - 7px) 1.3rem;background-size:5px 5px;background-repeat:no-repeat}
.field select option{background:var(--ink-2);color:var(--paper)}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--signal)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none}
.form__foot{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap;margin-top:var(--space-4)}
.form__note{color:var(--signal)}
.form.is-sent .form__row,.form.is-sent .field,.form.is-sent button{opacity:.35;pointer-events:none}

/* ---------- Footer ---------- */
.foot{padding-block:var(--space-12);background:var(--ink)}
.foot__inner{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);flex-wrap:wrap}
.foot__meta{color:var(--faint)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(10px);transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .engine{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__toggle{display:flex}
}

@media (max-width:860px){
  .grid-split,.grid-split--wide{grid-template-columns:1fr;gap:var(--space-8)}
  .col-label__h{font-size:var(--text-lg)}
  .book{grid-template-columns:1fr;gap:var(--space-10)}
  .book__visual{aspect-ratio:3/2}
  .tiles{grid-template-columns:1fr}
  .sprint{grid-template-columns:1fr}
  .contrast{grid-template-columns:1fr;gap:var(--space-6)}
  .contrast__rule{height:1px;width:100%}
  .arch__item,.weapons li{grid-template-columns:3rem 1fr;row-gap:var(--space-2)}
  .arch__d,.weapons p{grid-column:2}
}

@media (max-width:620px){
  .pillars{grid-template-columns:1fr}
  .engine{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .hero{min-height:92svh;padding-block:var(--space-24) var(--space-6)}
  .hero__foot{margin-top:var(--space-12);flex-direction:column;gap:var(--space-2)}
  .cred__list{gap:var(--space-2) var(--space-5)}
  .cred__list li{font-size:var(--text-sm)}
  .foot__inner{flex-direction:column;align-items:flex-start}
}

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

/* ---------- Image tiles ---------- */
.tiles{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.tile{position:relative;background:var(--ink);overflow:hidden;isolation:isolate;min-height:clamp(20rem,32vw,28rem);display:flex;align-items:flex-end}
.tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transform:scale(1.02);transition:transform 1200ms var(--ease),opacity 600ms var(--ease);
}
.tile::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, rgba(5,6,7,.96) 0%, rgba(5,6,7,.78) 34%, rgba(5,6,7,.30) 68%, rgba(5,6,7,.14) 100%);
}
.tile:hover img{transform:scale(1.07)}
.tile__body{position:relative;padding:var(--space-7) var(--space-6) var(--space-6)}
.tile__n{color:var(--signal);display:block;margin-bottom:var(--space-4)}
.tile h3{font-size:var(--text-lg);line-height:1.12;margin-bottom:var(--space-3)}
.tile p{color:var(--muted);font-size:var(--text-sm);line-height:1.55;max-width:34ch}
.tile--tall{min-height:clamp(24rem,38vw,34rem)}
.tile--step{min-height:clamp(18rem,26vw,24rem)}
.tile--step h3{font-size:var(--text-base);margin-bottom:0}

/* ---------- Statement sections ---------- */
.sec--stmt .num{display:block;margin-bottom:var(--space-6)}
.stmt{font-size:var(--text-3xl);line-height:1.02;letter-spacing:-.018em;word-spacing:.04em;max-width:18ch;margin-bottom:1.75rem}
.stmt__sub{color:var(--muted);font-size:var(--text-lg);line-height:1.45;max-width:58ch;margin-bottom:0}
.stmt__sub a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--signal)}
.ticks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem;margin:3.5rem 0;padding-top:2.25rem;border-top:1px solid var(--line)}
.ticks li{display:flex;gap:var(--space-5);align-items:baseline;color:var(--muted);font-size:var(--text-sm);line-height:1.5}
.ticks .mono{color:var(--signal)}

@media (max-width:1080px){
  .tiles--4,.tiles--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .ticks{grid-template-columns:1fr}
  .tiles--3{grid-template-columns:1fr}
  .tile--tall{min-height:22rem}
}
@media (max-width:620px){
  .tiles--4,.tiles--5{grid-template-columns:1fr}
  .tile,.tile--step{min-height:20rem}
}

.sec--stmt .sec__scrim{background:linear-gradient(to right, rgba(5,6,7,.94) 0%, rgba(5,6,7,.82) 46%, rgba(5,6,7,.55) 100%),linear-gradient(to top, rgba(5,6,7,.85) 0%, rgba(5,6,7,.10) 55%)}
.ticks--sprint li{flex-direction:column;gap:var(--space-3)}
.ticks--sprint .mono{font-size:var(--text-sm);letter-spacing:.08em}
.ticks--sprint li{color:var(--paper);font-size:var(--text-base)}


/* ============ LIGHT-SURFACE OVERRIDES ============ */
body{background:var(--ink);color:var(--paper)}

/* Full-bleed media sections: photography washed into paper, dark type */
.sec--media{position:relative;background:var(--ink)}
.sec--media .sec__media img,.sec--media .sec__media video{opacity:.62}
.sec__scrim{background:
  linear-gradient(90deg,rgba(251,250,247,.94) 0%,rgba(251,250,247,.80) 42%,rgba(251,250,247,.34) 78%,rgba(251,250,247,.18) 100%)}
.sec--media .stmt,.sec--media h2,.sec--media h3{color:var(--paper)}
.sec--media p,.sec--media li{color:var(--muted)}
.sec--media .stmt__sub{color:var(--muted)}
.sec--media .mono,.sec--media .num{color:var(--signal)}
.sec--media .ticks{border-top-color:var(--line-strong)}
.sec--media .ticks li{color:var(--paper)}
.sec--media .sec__note{color:var(--faint)}

/* Hero */
.hero{background:var(--ink)}
.hero__media img,.hero__media video{opacity:.72}
.hero__scrim{background:
  linear-gradient(90deg,rgba(251,250,247,.92) 0%,rgba(251,250,247,.72) 40%,rgba(251,250,247,.24) 76%,rgba(251,250,247,.06) 100%)}
.hero__h{color:var(--paper)}
.hero__sub{color:var(--muted)}
.hero .mono{color:var(--signal)}

/* Photo tiles keep white type on their own gradient */
.tile__body{background:linear-gradient(180deg,transparent 0%,rgba(10,12,16,.04) 32%,rgba(10,12,16,.68) 70%,rgba(10,12,16,.90) 100%)}
.tile h3{color:#fff}
.tile p{color:rgba(255,255,255,.86)}
.tile .mono{color:#7FF0E2}

/* Chrome */
.nav{background:rgba(251,250,247,.82);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.6) blur(14px)}
.nav.is-stuck{background:rgba(251,250,247,.95);box-shadow:0 1px 0 var(--line),0 10px 34px rgba(20,22,28,.07)}
.nav a{color:var(--paper)}
.nav__cta{border-color:var(--paper);color:var(--paper)}
.nav__cta:hover{background:var(--paper);color:var(--ink)}
.btn--primary{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--primary:hover{background:transparent;color:var(--paper)}
.btn--ghost{border-color:var(--line-strong);color:var(--paper)}
.btn--ghost:hover{background:var(--paper);color:var(--ink)}
.num,.mono{color:var(--signal)}
.stat{background:rgba(255,255,255,.62);border-color:var(--line)}
.stat__fig{color:var(--paper)}
.stat__fig span{color:var(--warm)}
.quote{border-left-color:var(--signal);color:var(--paper)}
footer{background:var(--ink-2);color:var(--muted);border-top:1px solid var(--line)}
input,textarea,select{background:#fff;border:1px solid var(--line-strong);color:var(--paper)}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,textarea:focus,select:focus{border-color:var(--signal);outline:2px solid var(--signal-dim)}
::selection{background:var(--signal);color:#fff}
img{background:var(--ink-3)}
.band img{opacity:.9}

/* ---- statement sections: light wash (must beat .sec--stmt specificity) ---- */
.sec--stmt .sec__scrim,
.sec--evidence .sec__scrim,
.sec--media .sec__scrim{
  background:
    linear-gradient(to right, rgba(251,250,247,.95) 0%, rgba(251,250,247,.84) 44%, rgba(251,250,247,.42) 78%, rgba(251,250,247,.20) 100%),
    linear-gradient(to top, rgba(251,250,247,.55) 0%, rgba(251,250,247,0) 60%);
}
.sec--stmt .stmt,.sec--stmt h2{color:var(--paper)}
.sec--stmt .stmt__sub,.sec--stmt p{color:var(--muted)}
.sec--stmt .ticks li{color:var(--paper)}
.sec--stmt .quote{color:var(--paper);border-left-color:var(--signal)}
.hero .btn--primary{background:#16181C;color:#FBFAF7;border-color:#16181C}
.hero .btn--primary:hover{background:transparent;color:#16181C;border-color:#16181C}
.hero .btn--ghost{border-color:rgba(22,24,28,.42);color:#16181C}
.hero .btn--ghost:hover{background:#16181C;color:#FBFAF7;border-color:#16181C}

/* ---- buttons (correct class names) ---- */
.btn--solid{background:#16181C;color:#FBFAF7;border-color:#16181C}
.btn--solid:hover{background:var(--signal);border-color:var(--signal);color:#fff}
.btn--ghost{border-color:rgba(22,24,28,.40);color:#16181C;background:rgba(255,255,255,.42)}
.btn--ghost:hover{background:#16181C;border-color:#16181C;color:#FBFAF7}
.hero__foot .mono{color:var(--muted)}
.band__scrim{background:linear-gradient(to bottom,rgba(251,250,247,.30) 0%,rgba(251,250,247,0) 30%,rgba(251,250,247,0) 70%,rgba(251,250,247,.30) 100%)}


/* ---- inquiry channel cards ---- */
.channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);margin:var(--space-12) 0 var(--space-16);border-radius:2px;overflow:hidden}
.channel{background:rgba(255,255,255,.80);padding:var(--space-8) var(--space-6)}
.channel h3{font-family:var(--font-display);font-size:var(--text-lg);line-height:1.18;color:var(--paper);margin:0 0 var(--space-3)}
.channel p{font-size:var(--text-sm);line-height:1.55;color:var(--muted);margin:0}
@media (max-width:820px){.channels{grid-template-columns:1fr}}

/* ---- form + foot legibility ---- */
.form label,.form .mono,.field__label{color:var(--muted)}
.hero__foot .mono{color:var(--paper);opacity:.72}
.cred__list li{color:var(--paper)}
.sec--close .sec__scrim{background:linear-gradient(to right,rgba(251,250,247,.96) 0%,rgba(251,250,247,.88) 50%,rgba(251,250,247,.52) 100%)}

/* ---- 18 Aug edits ---- */
/* book: film only, no layered still */
.book__visual{aspect-ratio:3/4;background:#0A0C0E}
.book__film{opacity:1}
.book__film.is-playing{opacity:1}
/* poster image fallback fills the frame like the film */
.book__visual > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* section 01 ticks: heavier for legibility */
.ticks--bold li{color:var(--paper);font-size:var(--text-base);font-weight:600;line-height:1.45}
.ticks--bold .mono{font-weight:500}
/* channel cards with no sub-copy */
.channel{display:flex;align-items:center;min-height:6.5rem}
.channel h3{margin:0}
/* hero: no button row, tighten the stack */
.hero__sub{margin-bottom:0}

/* ---- video inside photo tiles ---- */
.tile{position:relative;overflow:hidden}
.tile__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  opacity:0;transition:opacity 900ms var(--ease)}
.tile__vid.is-playing{opacity:1}
.tile__body{position:relative;z-index:2}
/* bands carry motion too */
.band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 900ms var(--ease)}
.band video.is-playing{opacity:1}
.band__scrim{z-index:2}
@media (max-width:620px){
  .tile__vid,.band video{display:none}
}

/* ---- Book: show the whole object, no aggressive crop ---- */
.book__visual{aspect-ratio:16/10;background:#0A0C0E}
.book__visual > img{display:none}

/* ---- 01: consultants and briefcases carry the point, not the signage ---- */
#problem .sec__media img,#problem .sec__media video{object-position:center 60%}

/* ---- Pillar 1: keep the dial and the 11 above the caption ---- */
#pillars .tile:first-child img{object-position:center 42%}

/* ---- Mobile: keep hero copy fully legible over the still ---- */
@media (max-width:620px){
  .hero__media img{opacity:.42}
  .hero__scrim{background:linear-gradient(180deg,rgba(251,250,247,.96) 0%,rgba(251,250,247,.90) 55%,rgba(251,250,247,.80) 100%)}
}

/* ============================================================
   LAYERING SYSTEM — depth without new photography
   Tone ladder, feathered media, glass type panels, grain,
   register marks. Palette untouched: paper, ink, teal, gold.
   Dial the whole system back from the tokens below.
   ============================================================ */
:root{
  --lay-grain:.055;        /* film grain strength            */
  --lay-feather:11%;       /* media dissolve into paper      */
  --lay-glass:.52;         /* type panel opacity over photo  */
  --lay-lift:26px;         /* card shadow throw              */
  --lay-edge:rgba(255,255,255,.72); /* top light edge        */
}

/* --- 1. grain: one fixed layer over the whole page --- */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;
  opacity:var(--lay-grain);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* --- 2. tone ladder: rhythm comes from the paper, not from decoration --- */
#what{background:var(--ink-2)}
#pillars{background:var(--ink)}
#weapons{background:var(--ink-2)}
#engine{background:var(--ink)}
.sec--book{background:var(--ink-2)}
#colin{background:var(--ink)}

/* seam: hairline plus a short register tick at each section top */
.sec::before{
  content:"";position:absolute;top:0;left:0;z-index:4;
  width:clamp(2.5rem,7vw,6rem);height:2px;background:var(--signal);opacity:.42;
}
.sec--media::before{opacity:.55}

/* soft light off the top edge of every section — separates equal tones */
.sec::after{
  content:"";position:absolute;inset:0 0 auto 0;height:38%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.50),rgba(255,255,255,0));
}
.sec--media::after,.sec--book::after{display:none}
.sec > .wrap{position:relative;z-index:3}

/* --- 3. feather the photography into the paper, top and bottom --- */
.sec--media .sec__media{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--lay-feather),#000 calc(100% - var(--lay-feather)),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--lay-feather),#000 calc(100% - var(--lay-feather)),transparent 100%);
}
.hero__media{
  -webkit-mask-image:linear-gradient(to bottom,#000 76%,rgba(0,0,0,.72) 92%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 76%,rgba(0,0,0,.72) 92%,transparent 100%);
}
/* an extra wash layer above the scrim: airier, less slab */
.sec--media .sec__media::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 10% 46%,rgba(251,250,247,.26),rgba(251,250,247,0) 58%);
}

/* 08 breaks from 07 by wash direction, not by a new picture */
#sprint .sec__scrim{
  background:
    linear-gradient(180deg,rgba(251,250,247,.90) 0%,rgba(251,250,247,.66) 46%,rgba(251,250,247,.78) 100%),
    linear-gradient(90deg,rgba(251,250,247,.34),rgba(251,250,247,0) 70%)!important;
}

/* --- 4. glass panel under type sitting on photography --- */
.sec--media .wrap{isolation:isolate}
.sec--stmt .wrap::before,.sec--evidence .sec__head::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:calc(var(--space-8) * -1.1);bottom:calc(var(--space-8) * -1.1);
  left:-26vw;right:24%;
  background:linear-gradient(90deg,rgba(251,250,247,var(--lay-glass)),rgba(251,250,247,.20) 70%,rgba(251,250,247,0));
  -webkit-backdrop-filter:blur(3px) saturate(1.04);backdrop-filter:blur(3px) saturate(1.04);
  -webkit-mask-image:radial-gradient(130% 72% at 30% 50%,#000 40%,rgba(0,0,0,.48) 68%,transparent 87%);
  mask-image:radial-gradient(130% 72% at 30% 50%,#000 40%,rgba(0,0,0,.48) 68%,transparent 87%);
}
.sec--evidence .sec__head{position:relative;isolation:isolate}

/* --- 5. cards: raise the layer count — inset edge, hairline, thrown shadow --- */
.pillar,.engine__step,.sprint__win,.stat,.channel{
  box-shadow:
    inset 0 1px 0 var(--lay-edge),
    0 0 0 1px var(--line),
    0 var(--lay-lift) calc(var(--lay-lift) * 1.8) calc(var(--lay-lift) * -1.35) rgba(20,22,28,.34);
}
.stat{box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 0 0 1px var(--line),0 18px 40px -26px rgba(20,22,28,.28)}

/* --- 6. photo tiles: light off the top, hairline frame, deeper foot --- */
.tile{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 var(--lay-lift) calc(var(--lay-lift) * 1.7) calc(var(--lay-lift) * -1.4) rgba(20,22,28,.44);
}
.tile__wash{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(251,250,247,.30) 0%,rgba(251,250,247,0) 34%),
    radial-gradient(100% 60% at 50% 0%,rgba(255,255,255,.22),transparent 60%);
}

/* --- 7. register marks: systems detail, faint, never decorative noise --- */
.reg{
  position:absolute;width:9px;height:9px;pointer-events:none;opacity:.5;
  background:
    linear-gradient(var(--line-strong),var(--line-strong)) center/1px 100% no-repeat,
    linear-gradient(var(--line-strong),var(--line-strong)) center/100% 1px no-repeat;
}
.sec__head{position:relative}
.sec__head .reg{top:-2.25rem;left:0;opacity:.34}

/* --- 8. section 01 ticks: unbolded, full ink, one step up --- */
.ticks--lead li{color:var(--paper);font-size:var(--text-base);font-weight:400;line-height:1.45}
.ticks--lead .mono{color:var(--signal);font-weight:500}

/* --- 9. mobile: drop the expensive layers, keep the tone ladder --- */
@media (max-width:820px){
  :root{--lay-glass:.72;--lay-lift:16px}
  .sec--stmt .wrap::before,.sec--evidence .sec__head::before{right:-10vw;-webkit-backdrop-filter:none;backdrop-filter:none}
  .sec--media .sec__media::after{display:none}
  body::after{opacity:.04}
}
@media (prefers-reduced-motion:reduce){body::after{opacity:.03}}

/* the particle map is black-backed: gentler dissolve, no grey wedge at the seam */
#system{--lay-feather:18%}
#system .sec__media img,#system .sec__media video{opacity:.52}
#system .sec__scrim{background:
  linear-gradient(90deg,rgba(251,250,247,.94) 0%,rgba(251,250,247,.80) 44%,rgba(251,250,247,.40) 78%,rgba(251,250,247,.22) 100%),
  linear-gradient(180deg,rgba(251,250,247,.62) 0%,rgba(251,250,247,0) 34%,rgba(251,250,247,.52) 100%)!important}


/* ---------- FORM STATES ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* .form .mono sets --muted on labels; the status line must outrank it */
.form .form__note{color:var(--signal)}
.form .form__note--error{color:var(--warm)}
.field input.is-invalid,.field textarea.is-invalid{border-bottom-color:var(--warm)}
.form__note--error{color:var(--warm)}
.form button[disabled]{opacity:.45;cursor:default}

/* Section 01 — the Bugatti must read; the metaphor is the point.
   Lighter wash on the right half, image closer to full strength. */
#problem .sec__media img{opacity:.9}
#problem .sec__scrim{background:
  linear-gradient(90deg,rgba(251,250,247,.96) 0%,rgba(251,250,247,.90) 32%,rgba(251,250,247,.52) 58%,rgba(251,250,247,.16) 84%,rgba(251,250,247,.06) 100%),
  linear-gradient(to top,rgba(251,250,247,.80) 0%,rgba(251,250,247,.66) 22%,rgba(251,250,247,.30) 44%,rgba(251,250,247,0) 62%)}

/* ---------- Book blurb: title locked to one line ----------
   The full book title must never break across lines. It measures ~21.75x the
   font size in width, so the paragraph is sized from the measured column width
   at each breakpoint to guarantee the title always fits. */
.booktitle{white-space:nowrap}
.book__body .lead{font-size:1.25rem}                       /* 20px; col 457-491 */
@media (max-width:1080px){
  .book__body .lead{font-size:1.03rem}                     /* 16.5px; col narrows to 374 */
}
@media (max-width:860px){
  .book__body .lead{font-size:1.1875rem}                   /* 19px; single column, col 556-573 */
}
@media (max-width:620px){
  .book__body .lead{font-size:min(1.1875rem,calc(4.45vw - 2px))}
}

/* ---------- Colin section pull quote ----------
   Replaces the duplicated venue list. Same family as .pull (teal hairline +
   display type) but scaled up so it holds its own beside the tall portrait. */
.pull--xl{
  margin-top:var(--space-10);
  font-size:clamp(1.6rem,1.1rem + 1.9vw,2.5rem);
  line-height:1.1;letter-spacing:-.024em;word-spacing:.04em;
  max-width:17ch;text-wrap:balance;
}
@media (max-width:620px){
  .pull--xl{font-size:clamp(1.4rem,1.1rem + 2.6vw,1.9rem);max-width:20ch}
}