/* =================================================================
   SatyaUpadhyaya.com — Institutional Design System
   Philosophy: institutional intelligence, quiet confidence.
   "Expensive without trying to look expensive."
   ================================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Palette — strictly limited */
  --bg:        #FAFAF8;
  --bg-deep:   #111111;   /* inverted sections */
  --ink:       #111111;   /* primary text */
  --ink-2:     #5F6368;   /* secondary text */
  --line:      #E8E8E6;   /* borders */
  --accent:    #1F3B5B;   /* institutional navy */
  --success:   #2E5D3D;
  --paper-2:   #F4F4F1;   /* faint panel fill */

  /* derived tints (kept within palette family) */
  --ink-12:  rgba(17,17,17,.12);
  --ink-06:  rgba(17,17,17,.06);
  --ink-04:  rgba(17,17,17,.04);
  --accent-08: rgba(31,59,91,.08);
  --accent-14: rgba(31,59,91,.14);

  /* Type families (swap these for licensed faces) */
  --serif: "Source Serif 4", "Tiempos Headline", Georgia, serif;
  --sans:  "Hanken Grotesk", "Suisse Int'l", "Neue Haas Grotesk", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --eyebrow: "Libre Franklin", "Söhne", "Helvetica Neue", Arial, sans-serif;

  /* Type scale (px → rem at 16) */
  --t-eyebrow: .6875rem;   /* 11 */
  --t-small:   .78125rem;  /* 12.5 */
  --t-meta:    .84375rem;  /* 13.5 */
  --t-body:    .9375rem;   /* 15 */
  --t-body-lg: 1.0625rem;  /* 17 */
  --t-lead:    1.1875rem;  /* 19 */
  --t-h4:      1.375rem;   /* 22 */
  --t-h3:      1.75rem;    /* 28 */
  --t-h2:      2.125rem;   /* 34 */
  --t-h1:      2.875rem;   /* 46 */
  --t-display: 3.5rem;     /* 56 hero */

  /* Spacing scale (8pt) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --s-11: 160px; --s-12: 200px;

  /* Layout */
  --max:   1400px;
  --read:  720px;
  --gutter: 40px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .7s;

  /* Shadows — never heavier than ~5% */
  --shadow-1: 0 1px 2px rgba(17,17,17,.03);
  --shadow-2: 0 18px 48px rgba(17,17,17,.05);
}

/* ---------- Reset / base ---------- */
*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.6;
  font-weight:400;
  letter-spacing:-.005em;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#fff; }

/* ---------- Layout primitives ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.read{ max-width:var(--read); }
.grid12{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gutter); }

.section{ position:relative; padding-block:var(--s-11); }
.section--tight{ padding-block:var(--s-9); }
.divider{ border:0; border-top:1px solid var(--line); margin:0; }

/* ---------- Type ---------- */
.eyebrow{
  font-family:var(--eyebrow);
  font-size:var(--t-eyebrow);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-2);
  font-weight:600;
  margin:0;
}
.eyebrow--accent{ color:var(--accent); }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; letter-spacing:-.018em; margin:0; line-height:1.05; color:var(--ink); }
.display{ font-size:var(--t-display); line-height:.98; letter-spacing:-.028em; }
h1,.h1{ font-size:var(--t-h1); }
h2,.h2{ font-size:var(--t-h2); line-height:1.06; }
h3,.h3{ font-size:var(--t-h3); line-height:1.1; }
h4,.h4{ font-size:var(--t-h4); line-height:1.18; }

.lead{ font-size:var(--t-lead); line-height:1.5; color:var(--ink-2); font-weight:400; letter-spacing:-.012em; }
.body-lg{ font-size:var(--t-body-lg); line-height:1.62; color:var(--ink-2); }
p{ margin:0 0 1.1em; text-wrap:pretty; }
.muted{ color:var(--ink-2); }
strong{ font-weight:600; color:var(--ink); }

.section-head{ max-width:860px; }
.section-head .h2{ margin-top:var(--s-4); }
.section-head .lead{ margin-top:var(--s-5); }

/* ---------- Buttons / CTA system ---------- */
.btn{
  --c:var(--ink);
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:var(--t-meta); font-weight:500;
  letter-spacing:.01em; color:var(--c);
  padding:14px 22px; border:1px solid currentColor; border-radius:2px;
  background:transparent; cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn .arr{ transition:transform .5s var(--ease-out); }
.btn:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.btn:hover .arr{ transform:translateX(4px); }
.btn--accent{ --c:var(--accent); }
.btn--accent:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn--ghost{ border-color:var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); background:transparent; color:var(--ink); }
.btn--lg{ padding:18px 30px; font-size:var(--t-body); }
.btn--invert{ --c:rgba(255,255,255,.5); color:#fff; }
.btn--invert:hover{ background:#fff; color:var(--ink); border-color:#fff; }

.link-cta{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:var(--t-meta); font-weight:500;
  color:var(--accent); padding-bottom:3px;
  border-bottom:1px solid var(--accent-14);
  transition:border-color .4s var(--ease), gap .4s var(--ease);
}
.link-cta .arr{ transition:transform .45s var(--ease-out); }
.link-cta:hover{ border-color:var(--accent); }
.link-cta:hover .arr{ transform:translateX(5px); }

/* ---------- Reveal animation primitive ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* =================================================================
   NAVIGATION
   ================================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.nav__brand{
  display:flex; align-items:center; transition:opacity .5s var(--ease);
}
.nav__logo{
  height:42px; width:auto; filter:brightness(0) invert(1); transition:filter .5s var(--ease);
}
.nav--solid .nav__logo{ filter:none; }
.nav__links{ display:flex; align-items:center; gap:var(--s-7); }
.nav__links a{
  font-size:var(--t-meta); color:rgba(255,255,255,.72); font-weight:450;
  position:relative; transition:color .35s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:#fff; transition:width .4s var(--ease);
}
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ color:#fff !important; }
.nav--solid{ background:rgba(250,250,248,.82); backdrop-filter:saturate(140%) blur(14px); border-bottom-color:var(--line); }
.nav--solid .nav__links a{ color:var(--ink-2); }
.nav--solid .nav__links a::after{ background:var(--ink); }
.nav--solid .nav__links a:hover{ color:var(--ink); }
.nav--solid .nav__cta{ color:var(--accent) !important; }
.nav__menu-btn{ display:none; }

/* =================================================================
   SIGNATURE: TRANSFORMATION LINE (left rail)
   ================================================================= */
.tline{
  position:fixed; top:0; left:max(20px, calc((100vw - var(--max))/2 + 6px));
  width:2px; height:100vh; z-index:40; pointer-events:none;
}
.tline__track{ position:absolute; inset:0; background:var(--ink-12); }
.tline__fill{ position:absolute; left:0; top:0; width:100%; height:0; background:var(--accent); transition:height .12s linear; }
@media (max-width:1100px){ .tline{ display:none; } }

/* =================================================================
   HERO
   ================================================================= */
/* Full-bleed cinematic hero — the keynote image IS the hero.
   HeroMediaLayer stays reusable: swap the two <img> for a <video>
   (base sharp + a blurred copy masked to the right) with zero layout change. */
.hero{ position:relative; min-height:110vh; background:#080c14; overflow:hidden; }

/* MediaLayer — three stacked layers */
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img,.hero-media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:20% center; }
/* L1 — original, sharp, focal point preserved on the left */
.hero-media__base{ filter:grayscale(1) contrast(1.05) brightness(1.02); }
/* L2 — directional blur: a blurred copy masked so it fades in from ~55% → right edge */
.hero-media__blur{
  filter:grayscale(1) contrast(1.05) blur(22px);
  -webkit-mask-image:linear-gradient(90deg, transparent 42%, rgba(0,0,0,.55) 62%, #000 86%);
  mask-image:linear-gradient(90deg, transparent 42%, rgba(0,0,0,.55) 62%, #000 86%);
}
/* L3 — dark institutional overlay blending into the navy accent */
.hero-media__overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,12,20,.45) 0%, rgba(15,20,30,.65) 50%, rgba(31,59,91,.82) 100%);
}
/* subtle edge vignette to remove distractions */
.hero-media__vignette{ position:absolute; inset:0; box-shadow:inset 0 0 250px rgba(0,0,0,.35); pointer-events:none; }

/* ContentLayer — placed in the middle third, optically (not mathematically) balanced.
   Generous gap below the nav; large negative space beneath the CTA cluster. */
.hero__inner{ position:relative; z-index:5; min-height:110vh; display:flex; align-items:flex-start; padding-top:clamp(190px, 24vh, 280px); padding-bottom:clamp(150px, 18vh, 220px); }
.hero-content{ margin-left:auto; width:min(620px, 54%); }
.hero .eyebrow{ color:rgba(255,255,255,.55); letter-spacing:.25em; }
.hero .display{ color:#fff; margin-top:var(--s-6); max-width:14ch; text-shadow:0 1px 30px rgba(0,0,0,.25); }
.hero .lead{ color:rgba(255,255,255,.82); margin-top:2.75rem; max-width:48ch; font-size:var(--t-body-lg); line-height:1.62; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-8); align-items:center; }
.hero-context{ margin-top:var(--s-5); }
.hero .link-cta{ color:#fff; border-bottom-color:rgba(255,255,255,.32); }
.hero .link-cta:hover{ border-bottom-color:#fff; }
.hero-trust{
  margin-top:var(--s-8); padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; gap:var(--s-5); flex-wrap:wrap;
}
.hero-trust__label{ font-family:var(--eyebrow); font-size:var(--t-eyebrow); letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:600; }
.hero-trust__names{ display:flex; gap:var(--s-5); flex-wrap:wrap; }
.hero-trust__names span{ font-size:var(--t-meta); color:#fff; font-weight:500; letter-spacing:.01em; }
.hero-trust__names span + span::before{ content:"·"; color:rgba(255,255,255,.4); margin-right:var(--s-5); margin-left:0; }

/* button on dark imagery */
.btn--light{ background:#fff; border-color:#fff; color:var(--ink); }
.btn--light:hover{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }

/* scroll indicator (white, bottom-right gutter) */
.scroll-cue{
  position:absolute; right:var(--gutter); bottom:30px; z-index:6;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.55);
}
.scroll-cue__line{ width:1px; height:48px; background:rgba(255,255,255,.2); position:relative; overflow:hidden; }
.scroll-cue__line::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:rgba(255,255,255,.9); animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(300%);} }

/* =================================================================
   INSTITUTIONAL EXPERIENCE MARQUEE
   ================================================================= */
.marquee{
  background:#0B1220; height:120px; display:flex; align-items:stretch; overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
}
.marquee__label{
  flex:0 0 auto; display:flex; align-items:center; padding-inline:var(--gutter);
  font-family:var(--eyebrow); font-size:var(--t-eyebrow); letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  color:rgba(255,255,255,.5); white-space:nowrap; position:relative; z-index:3; background:#0B1220;
  border-right:1px solid rgba(255,255,255,.08);
}
.marquee__viewport{
  position:relative; flex:1 1 auto; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.marquee__track{ display:flex; width:max-content; height:100%; animation:marquee 32s linear infinite; }
.marquee__viewport:hover .marquee__track{ animation-play-state:paused; }
.marquee__group{ display:flex; align-items:center; gap:var(--s-9); padding-right:var(--s-9); }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.mlogo{ position:relative; display:flex; align-items:center; justify-content:center; height:120px; }
.mlogo__img{ height:auto; max-height:30px; max-width:150px; width:auto; opacity:.55; transition:opacity .45s var(--ease); }
.mlogo__word{ font-family:var(--mono); font-weight:500; font-size:1.0625rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; opacity:.55; transition:opacity .45s var(--ease); }
.mlogo:hover .mlogo__img,.mlogo:hover .mlogo__word{ opacity:1; }
.mlogo__tip{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%) translateY(5px); white-space:nowrap;
  font-family:var(--mono); font-size:10px; letter-spacing:.07em; color:rgba(255,255,255,.65);
  opacity:0; transition:opacity .4s var(--ease), transform .4s var(--ease); pointer-events:none;
}
.mlogo:hover .mlogo__tip{ opacity:1; transform:translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } }
@media (max-width:720px){
  .marquee{ height:104px; }
  .marquee__label{ display:none; }
}

/* =================================================================
   SECTION 2 — THE SHIFT (timeline)
   ================================================================= */
.shift__layout{ display:grid; grid-template-columns:minmax(220px,300px) minmax(0,1fr); column-gap:var(--s-9); margin-top:var(--s-9); }
.timeline{ position:sticky; top:120px; align-self:start; }
.timeline__line{ position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--line); }
.timeline__progress{ position:absolute; left:7px; top:6px; width:2px; background:var(--accent); height:0; transition:height .2s linear; }
.tl-node{ position:relative; padding-left:var(--s-6); margin-bottom:var(--s-7); cursor:default; }
.tl-node__dot{
  position:absolute; left:0; top:5px; width:16px; height:16px; border-radius:50%;
  border:1.5px solid var(--ink-12); background:var(--bg); transition:all .5s var(--ease);
}
.tl-node__yr{ font-family:var(--mono); font-size:var(--t-small); letter-spacing:.08em; color:var(--ink-2); transition:color .5s var(--ease); }
.tl-node__era{ font-family:var(--serif); font-size:1.1rem; margin-top:4px; color:var(--ink-2); transition:color .5s var(--ease); }
.tl-node.is-active .tl-node__dot{ border-color:var(--accent); background:var(--accent); transform:scale(1.05); }
.tl-node.is-active .tl-node__yr{ color:var(--accent); }
.tl-node.is-active .tl-node__era{ color:var(--ink); }
.tl-node.is-past .tl-node__dot{ border-color:var(--ink); background:var(--ink); }
.tl-node.is-past .tl-node__era,.tl-node.is-past .tl-node__yr{ color:var(--ink-2); }
.tl-node--operational.is-active .tl-node__dot{ box-shadow:0 0 0 5px var(--accent-08); }

.shift__narrative .tl-detail{ border-top:1px solid var(--line); padding-top:var(--s-6); margin-bottom:var(--s-7); }
.shift__narrative .tl-detail:first-child{ border-top:0; padding-top:0; }
.tl-detail__era{ font-family:var(--eyebrow); font-size:var(--t-eyebrow); letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.tl-detail h4{ margin-top:var(--s-3); }
.tl-detail p{ margin-top:var(--s-3); color:var(--ink-2); max-width:62ch; }

.shift__turn{ margin-top:var(--s-8); padding-top:var(--s-8); border-top:1px solid var(--line); }
.shift__turn p{ font-size:var(--t-h4); line-height:1.4; font-family:var(--serif); color:var(--ink); max-width:24ch; letter-spacing:-.01em; }
.shift__turn p.sub{ font-size:var(--t-body-lg); font-family:var(--sans); color:var(--ink-2); max-width:64ch; margin-top:var(--s-5); letter-spacing:-.005em; line-height:1.6; }

/* architecture reveal */
.arch{ margin-top:var(--s-8); padding:var(--s-7); border:1px solid var(--line); background:#fff; border-radius:3px; }
.arch__head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:var(--s-6); }
.arch__head .eyebrow{ color:var(--ink-2); }
.arch__stack{ display:flex; flex-direction:column; gap:10px; }
.arch__row{
  display:flex; align-items:center; gap:16px; padding:16px 20px; border:1px solid var(--line);
  border-radius:2px; background:var(--bg); position:relative;
  opacity:.55; transform:translateY(8px); transition:all .6s var(--ease);
}
.arch__row.in{ opacity:1; transform:none; }
.arch__row.is-key{ border-color:var(--accent); background:var(--accent-08); opacity:1; }
.arch__row .idx{ font-family:var(--mono); font-size:var(--t-small); color:var(--ink-2); width:24px; }
.arch__row .lbl{ font-size:var(--t-body); font-weight:500; }
.arch__row.is-key .lbl{ color:var(--accent); }
.arch__row .note{ margin-left:auto; font-family:var(--mono); font-size:var(--t-small); color:var(--ink-2); }
.arch__connector{ width:1px; height:14px; background:var(--ink-12); margin-left:31px; }

.pull-quote{ margin-top:var(--s-9); padding-left:var(--s-6); border-left:2px solid var(--accent); }
.pull-quote p{ font-family:var(--serif); font-size:var(--t-h3); line-height:1.2; color:var(--ink); max-width:18ch; letter-spacing:-.015em; margin:0; }

/* =================================================================
   SECTION 3 — DOSSIERS
   ================================================================= */
.dossiers{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); margin-top:var(--s-9); border:1px solid var(--line); }
.dossier{
  background:#fff; padding:var(--s-8) var(--s-7); position:relative; display:flex; flex-direction:column;
  min-height:440px; transition:background .5s var(--ease), transform .5s var(--ease); overflow:hidden;
}
.dossier:hover{ background:#fff; transform:translateY(-2px); z-index:2; box-shadow:var(--shadow-2); }
.dossier__top{ display:flex; justify-content:space-between; align-items:baseline; }
.dossier__num{ font-family:var(--mono); font-size:var(--t-meta); color:var(--ink-2); letter-spacing:.06em; transition:color .5s var(--ease); }
.dossier:hover .dossier__num{ color:var(--accent); }
.dossier__industry{ font-family:var(--eyebrow); font-size:var(--t-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); text-align:right; max-width:50%; font-weight:600; }
.dossier__title{ font-family:var(--serif); font-size:1.6rem; line-height:1.12; margin-top:var(--s-6); letter-spacing:-.018em; max-width:14ch; }
.dossier__summary{ color:var(--ink-2); font-size:var(--t-body); margin-top:var(--s-5); max-width:46ch; }
.dossier__spacer{ flex:1; }

/* operational signals (revealed on hover) */
.dossier__signals{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); margin-top:var(--s-6);
  padding-top:var(--s-5); border-top:1px solid var(--line);
  opacity:0; transform:translateY(10px); transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.dossier:hover .dossier__signals{ opacity:1; transform:none; }
.signal__num{ font-family:var(--serif); font-size:1.85rem; color:var(--accent); line-height:1; }
.signal__lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-top:6px; line-height:1.3; }
.dossier__cta{ margin-top:var(--s-6); }

/* =================================================================
   SECTION 4 — EXPERIENCE (institutional timeline)
   ================================================================= */
.exp{ margin-top:var(--s-9); border-top:1px solid var(--line); }
.exp__row{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr) auto;
  align-items:center; gap:var(--s-7); padding:var(--s-6) 0; border-bottom:1px solid var(--line);
  cursor:default; transition:padding .5s var(--ease);
}
.exp__org{ display:flex; align-items:baseline; gap:var(--s-4); }
.exp__org .idx{ font-family:var(--mono); font-size:var(--t-small); color:var(--ink-2); width:28px; }
.exp__org .name{ font-family:var(--serif); font-size:1.45rem; letter-spacing:-.01em; transition:color .4s var(--ease); }
.exp__role{ color:var(--ink-2); font-size:var(--t-body); max-width:60ch; }
.exp__meta{ font-family:var(--mono); font-size:var(--t-small); color:var(--ink-2); white-space:nowrap; transition:color .4s var(--ease); }
.exp__row:hover{ }
.exp__row:hover .name{ color:var(--accent); }
.exp__row:hover .exp__meta{ color:var(--ink); }
.exp__support{ margin-top:var(--s-7); }

/* =================================================================
   SECTION 5 — AI OPERATING MODELS (capability map)
   ================================================================= */
.aom{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--s-9); margin-top:var(--s-9); align-items:start; }
.aom__thesis{ position:sticky; top:120px; }
.aom__thesis p{ color:var(--ink-2); max-width:42ch; }
.capmap{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.cap{
  background:#fff; padding:var(--s-6); cursor:default; position:relative; min-height:200px;
  display:flex; flex-direction:column; transition:background .5s var(--ease);
}
.cap__idx{ font-family:var(--mono); font-size:var(--t-small); color:var(--ink-2); letter-spacing:.06em; }
.cap__title{ font-family:var(--serif); font-size:1.2rem; margin-top:var(--s-5); line-height:1.15; transition:color .4s var(--ease); }
.cap__body{ color:var(--ink-2); font-size:var(--t-meta); margin-top:var(--s-4);
  max-height:0; opacity:0; overflow:hidden; transition:max-height .6s var(--ease), opacity .5s var(--ease), margin .5s var(--ease); }
.cap:hover{ background:var(--paper-2); }
.cap:hover .cap__title{ color:var(--accent); }
.cap:hover .cap__body{ max-height:160px; opacity:1; }
.cap__node{ position:absolute; top:var(--s-6); right:var(--s-6); width:9px; height:9px; border:1px solid var(--ink-12); border-radius:50%; transition:all .4s var(--ease); }
.cap:hover .cap__node{ border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 4px var(--accent-08); }
.aom__support{ margin-top:var(--s-7); grid-column:1/-1; }

/* =================================================================
   SECTION 6 — THINKING (editorial list)
   ================================================================= */
.thinking__list{ margin-top:var(--s-8); border-top:1px solid var(--line); }
.entry{
  display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:var(--s-7);
  padding:var(--s-6) 0; border-bottom:1px solid var(--line);
  transition:padding-left .5s var(--ease); position:relative;
}
.entry::before{ content:""; position:absolute; left:-24px; top:0; bottom:0; width:2px; background:var(--accent); transform:scaleY(0); transform-origin:top; transition:transform .5s var(--ease); }
.entry:hover{ padding-left:14px; }
.entry:hover::before{ transform:scaleY(1); }
.entry__cat{ font-family:var(--eyebrow); font-size:var(--t-eyebrow); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.entry__date{ display:block; color:var(--ink-2); font-size:var(--t-small); margin-top:6px; }
.entry__title{ font-family:var(--serif); font-size:1.35rem; line-height:1.18; letter-spacing:-.012em; }
.entry__desc{ color:var(--ink-2); font-size:var(--t-body); margin-top:var(--s-3); max-width:64ch; }

/* =================================================================
   SECTION 7 — CLOSING (poster)
   ================================================================= */
.closing{ background:var(--bg-deep); color:#fff; text-align:center; padding-block:var(--s-12); position:relative; overflow:hidden; }
.closing .conv-node{ position:absolute; left:50%; top:0; transform:translateX(-50%); }
.closing__inner{ position:relative; z-index:2; max-width:1040px; margin-inline:auto; }
.closing h2{ color:#fff; font-size:clamp(2.6rem,5.6vw,5rem); line-height:1.04; letter-spacing:-.025em; max-width:18ch; margin-inline:auto; }
.closing .sub{ font-family:var(--serif); font-size:var(--t-h4); color:rgba(255,255,255,.62); margin-top:var(--s-6); }
.closing .statement{ color:rgba(255,255,255,.66); font-size:var(--t-body-lg); max-width:60ch; margin:var(--s-7) auto 0; line-height:1.6; }
.closing .support{ font-family:var(--mono); font-size:var(--t-small); color:rgba(255,255,255,.4); letter-spacing:.04em; max-width:64ch; margin:var(--s-6) auto 0; }
.closing__cta{ margin-top:var(--s-8); }

/* =================================================================
   FOOTER
   ================================================================= */
.footer{ background:var(--bg-deep); color:rgba(255,255,255,.6); padding-block:var(--s-8); border-top:1px solid rgba(255,255,255,.08); }
.footer__inner{ display:flex; justify-content:space-between; gap:var(--s-7); flex-wrap:wrap; align-items:flex-start; }
.footer__brand{ display:inline-flex; align-items:center; }
.footer__logo{ height:40px; width:auto; filter:brightness(0) invert(1); opacity:.92; }
.footer__cols{ display:flex; gap:var(--s-9); flex-wrap:wrap; }
.footer__col h5{ font-family:var(--eyebrow); font-size:var(--t-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.4); margin:0 0 var(--s-4); font-weight:600; }
.footer__col a{ display:block; font-size:var(--t-meta); color:rgba(255,255,255,.66); margin-bottom:10px; transition:color .35s var(--ease); }
.footer__col a:hover{ color:#fff; }
.footer__legal{ margin-top:var(--s-8); padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.08); font-size:var(--t-small); color:rgba(255,255,255,.38); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width:1024px){
  :root{ --t-display:2.75rem; --t-h1:2.25rem; --t-h2:1.85rem; --gutter:28px; }
  .hero__inner{ padding-top:clamp(150px, 20vh, 220px); padding-bottom:clamp(120px, 14vh, 180px); }
  .hero-content{ width:min(620px, 64%); }
  .shift__layout{ grid-template-columns:1fr; }
  .timeline{ position:static; display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-5); }
  .timeline__line,.timeline__progress{ display:none; }
  .aom{ grid-template-columns:1fr; gap:var(--s-7); }
  .aom__thesis{ position:static; }
}
@media (max-width:720px){
  :root{ --t-display:2.2rem; --t-h2:1.6rem; --t-h3:1.4rem; }
  .nav__links{ display:none; }
  .nav__menu-btn{ display:inline-flex; }
  .dossiers{ grid-template-columns:1fr; }
  .capmap{ grid-template-columns:1fr; }
  .exp__row{ grid-template-columns:1fr; gap:var(--s-3); align-items:start; }
  .exp__meta{ white-space:normal; }
  .entry{ grid-template-columns:1fr; gap:var(--s-3); }
  .timeline{ grid-template-columns:1fr; }
  .hero-trust{ gap:var(--s-3); }
  .hero-content{ width:100%; max-width:560px; }
  .hero-media img{ object-position:30% center; }
  .hero-media__blur{ -webkit-mask-image:none; mask-image:none; filter:grayscale(1) contrast(1.04) blur(7px); }
  .hero-media__overlay{ background:linear-gradient(175deg, rgba(8,12,20,.5) 0%, rgba(15,20,30,.66) 52%, rgba(31,59,91,.85) 100%); }
}