/* ============================================================
   Interas Research — Broadsheet editorial
   Newsprint white #FAFAF8 · ink #161512 · giant serif display
   Hairline rules · B&W photography · film grain
   ============================================================ */

:root{
  --bg:#FAFAF8;
  --paper:#F4F3EF;
  --ink:#161512;
  --body:#44423D;
  --muted:#6E6B64;
  --faint:#9B978E;
  --line:rgba(22,21,18,.16);
  --line-heavy:rgba(22,21,18,.85);
  --accent:#C79A5C; /* Interas gold, echoed from the mark; the page's one warm accent */
  --stinger:#B3232C; /* audit red: corrections, positions, held agents. Never decoration */
  --serif:'Source Serif 4', Georgia, serif;
  --sans:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
section[id]{scroll-margin-top:96px;}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
h1,h2,h4{text-wrap:balance;}
.rn,.dateline,.adv-n{font-variant-numeric:tabular-nums;}

/* Film grain — fixed, non-interactive, GPU-cheap */
body::after{
  content:"";
  position:fixed;inset:0;z-index:90;pointer-events:none;
  opacity:.05;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

/* ---------- Header: solid ink masthead. Paper does not froth ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--ink);
  border-bottom:1px solid rgba(250,250,248,.22);
}
header.scrolled{
  box-shadow:0 1px 0 rgba(250,250,248,.12);
}
header .brand{color:var(--bg);}
header .brand-diamond line:nth-child(3){stroke:#9AA6B1;}
header .brand-diamond line:nth-child(4){stroke:#8B96A3;}
header nav.primary a{color:rgba(250,250,248,.72);}
header nav.primary a:hover{color:var(--bg);border-bottom-color:var(--bg);}
header nav.primary a[aria-current="page"]{color:var(--bg);border-bottom-color:var(--bg);}
header .nav-toggle span{background:var(--bg);}
header .nav-actions .btn{background:transparent;color:var(--bg);border-color:var(--bg);}
header .nav-actions .btn:hover{background:var(--bg);color:var(--ink);}
.masthead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:72px;max-width:none;margin:0;}
.masthead .brand{grid-column:1;justify-self:start;}
nav.primary{grid-column:2;justify-self:center;}
.nav-actions{grid-column:3;justify-self:end;display:flex;align-items:center;gap:14px;}
.brand{
  display:flex;align-items:center;gap:12px;
  font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:-.01em;
  text-decoration:none;color:var(--ink);
}
nav.primary{display:flex;gap:34px;}
nav.primary a{
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;color:var(--muted);
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
nav.primary a:hover{color:var(--ink);border-bottom-color:var(--ink);}
.nav-toggle{display:none;background:none;border:none;padding:8px;cursor:pointer;}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0;transition:transform .2s ease,opacity .2s ease;}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-open .nav-toggle span:nth-child(2){opacity:0;}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ---------- Buttons ---------- */
/* Buttons in sans semibold sentence case: actions speak human, labels speak machine */
.btn{
  font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.01em;
  text-decoration:none;padding:12px 22px;border-radius:0;
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--ink);cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--ink);color:var(--bg);}
.btn-primary:hover{background:#000;color:#fff;}
.btn-ghost{background:transparent;color:var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--bg);}

.skip-link{
  position:absolute;left:8px;top:8px;z-index:200;transform:translateY(-200%);
  background:var(--ink);color:var(--bg);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding:10px 16px;transition:transform .2s ease;
}
.skip-link:focus{transform:translateY(0);}

/* ---------- Hero: giant serif + photograph ---------- */
/* fixed header floats above, so the hero starts beneath it and scrolls under the glass */
.hero{padding:clamp(110px,15vh,160px) 0 0;border-bottom:1px solid var(--line);}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:56px;align-items:center;
}
/* Dateline: editorial furniture that dates the page without naming anyone */
.dateline{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border-top:2px solid var(--line-heavy);border-bottom:1px solid var(--line);
  padding:9px 0;margin-bottom:40px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:28px;display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:32px;height:2px;background:var(--accent);}
.hero h1{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(38px,5.2vw,66px);line-height:1.04;letter-spacing:-.02em;
  margin:0 0 26px;color:var(--ink);
}
.hero .lede{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(18px,1.7vw,21px);line-height:1.5;color:var(--body);
  max-width:26em;margin:0 0 28px;
}
/* Sided note (Vektor sovereignty paragraph): a marginalium, not body copy */
.hero .sub{
  font-size:15.5px;line-height:1.7;color:var(--muted);
  max-width:42em;margin:0 0 30px;
  border-left:2px solid var(--accent);padding-left:18px;
}
.hero .sub strong{color:var(--ink);}
.ctas{display:flex;gap:14px;flex-wrap:wrap;padding-bottom:56px;}

.hero-photo{margin:0;color:var(--ink);}
.hero-photo svg{display:block;width:100%;height:auto;color:var(--ink);}

/* SVG motion: marching dashes, pulse rings, blinking telemetry bars */
@keyframes dashmove{to{stroke-dashoffset:-96}}
@keyframes pulse{0%{transform:scale(.55);opacity:.7}80%,100%{transform:scale(1.6);opacity:0}}
@keyframes softblink{0%,100%{opacity:.15}50%{opacity:.6}}
.hero-photo .marching{stroke-dasharray:4 8;animation:dashmove 4s linear infinite}
.hero-photo .pulse-ring{transform-origin:center;transform-box:fill-box;animation:pulse 3.2s ease-out infinite}
.hero-photo .blink{animation:softblink 3.5s ease-in-out infinite}
.hero-photo figcaption{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  color:var(--faint);padding:12px 2px 0;
  border-top:1px solid var(--line);margin-top:14px;
}

.hero-foot{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;
  border-top:1px solid var(--line);
  padding:28px 0 34px;margin-top:8px;
}
.hero-foot p{font-size:14.5px;line-height:1.7;margin:0;max-width:44em;color:var(--muted);}
.hero-foot strong{color:var(--ink);}

/* ---------- Sections ---------- */
.sec{padding:110px 0;}
.sec-rule{border-top:2px solid var(--line-heavy);}
.sec-paper{background:var(--paper);border-top:1px solid var(--line);}
.sec-close{background:var(--ink);color:var(--body);}

/* Optical section rhythm: each section breathes for its own content, not a metronome */
.sec-thesis{padding:128px 0 104px;}
.sec-exp{padding:92px 0;}
.sec-join{padding:136px 0 148px;}

/* Double rule: the newspaper's loud section break */
.rule-double{border-top:2px solid var(--line-heavy);position:relative;}
.rule-double::before{content:"";position:absolute;top:3px;left:0;right:0;height:1px;background:rgba(22,21,18,.45);}

/* Folio: oversized pale numeral hanging beside the heading */
.sec-head,.spread-head,.sec .inner{display:grid;grid-template-columns:auto 1fr;column-gap:30px;align-items:start;}
.folio{
  font-family:var(--serif);font-weight:700;font-size:clamp(58px,7.5vw,112px);
  line-height:.78;letter-spacing:-.04em;color:rgba(22,21,18,.13);
  user-select:none;padding-top:6px;min-width:1.2em;
}
.sec-close .folio{color:rgba(250,250,248,.15);}

/* Thesis spread: op-ed two-column, head left, argument right */
.spread{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start;}
.spread-body{border-left:1px solid var(--line);padding-left:44px;}
.spread-body p{
  font-size:16.5px;line-height:1.75;margin:0 0 14px;max-width:32em;
  text-align:justify;hyphens:auto;-webkit-hyphens:auto;
}
.spread-body p:first-child::first-letter{
  font-family:var(--serif);font-weight:700;font-size:3.6em;line-height:.82;
  float:left;padding:7px 10px 0 0;color:var(--ink);
}

/* Claims: numbered positions, defended */
.claims{margin:28px 0 0;padding:0;list-style:none;border-top:1px solid var(--line);}
.claims li{
  display:grid;grid-template-columns:36px 1fr;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--line);
  font-family:var(--serif);font-size:17.5px;line-height:1.45;color:var(--ink);
}
.claims li span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--stinger);padding-top:5px;}

/* Position: the house line on what it is against */
.position{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.6;color:var(--ink);max-width:34em;margin:30px 0 0;}
.position b{
  color:var(--stinger);font-style:normal;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;margin-right:10px;
}
.stung{font-style:normal;color:var(--stinger);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;}

.sec-head{max-width:860px;}
.kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:22px;display:flex;align-items:center;gap:12px;
}
.kicker::before{content:"";width:28px;height:1px;background:var(--accent);}
h2{
  font-family:var(--serif);font-size:clamp(28px,3.4vw,42px);font-weight:700;
  letter-spacing:-.02em;line-height:1.1;margin:0 0 20px;color:var(--ink);
}
.sec-head p{font-size:16px;line-height:1.7;margin:0 0 14px;max-width:40em;}
.thesis-close{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(19px,2vw,23px);color:var(--ink);
  max-width:24em;margin-top:26px;
}

/* ---------- Experience: ledger rows ---------- */
.rows{margin-top:64px;border-top:2px solid var(--line-heavy);}
.card{
  display:grid;grid-template-columns:200px 1fr;gap:32px;align-content:start;
  padding:34px 0;
  border-bottom:1px solid var(--line);
}
.card:last-child{border-bottom:2px solid var(--line-heavy);}
.rn{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding-top:8px;}
.card h4{
  margin:0 0 8px;font-family:var(--serif);font-size:clamp(18px,1.9vw,22px);
  font-weight:600;color:var(--ink);letter-spacing:-.01em;
  transition:transform .25s ease;
}
.card:hover h4{transform:translateX(6px);}
.card p{margin:0;font-size:15px;line-height:1.6;color:var(--muted);max-width:44em;}

/* ---------- Advisory: dense security-bulletin rows (Vektor problem section) ---------- */
.advisory{margin-top:56px;border-top:2px solid var(--line-heavy);}
.adv-row{
  display:grid;grid-template-columns:56px 200px 1fr;gap:28px;
  padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.adv-row:last-child{border-bottom:2px solid var(--line-heavy);}
.adv-n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--faint);}
.adv-name{
  font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink);
  text-decoration:line-through;text-decoration-color:var(--stinger);text-decoration-thickness:1.5px;
}
.adv-row p{margin:0;font-size:15px;line-height:1.6;color:var(--muted);max-width:46em;}

/* Draft spec artifact shown under the stage */
.spec{
  margin:22px 0 0;padding:18px 20px;overflow-x:auto;
  background:var(--paper);border:1px solid var(--line);
  font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--body);
}
.spec code{font:inherit;}

/* ---------- Capabilities table: the registry, not a card row ---------- */
.tbl-wrap{overflow-x:auto;margin-top:56px;}
.ctable{width:100%;border-collapse:collapse;border-top:2px solid var(--line-heavy);}
.ctable th{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);text-align:left;padding:12px 24px 12px 0;border-bottom:1px solid var(--line);
}
.ctable td{padding:19px 24px 19px 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:15px;line-height:1.6;color:var(--muted);}
.ctable tr:last-child td{border-bottom:2px solid var(--line-heavy);}
.ctable td:first-child{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--ink);white-space:nowrap;padding-top:22px;}
.ctable td:nth-child(2){color:var(--ink);font-weight:600;}

/* ---------- Marquee: one kinetic band carrying the vocabulary ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line-heavy);border-bottom:1px solid var(--line-heavy);background:var(--paper);}
.marquee-track{display:flex;width:max-content;animation:marquee 26s linear infinite;}
.marquee-track span{
  font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;padding:13px 0;
}
@keyframes marquee{to{transform:translateX(-50%);}}

/* ---------- Join ---------- */
.lead{font-size:20px;margin-top:32px;font-family:var(--serif);}
.lead a,.mail{
  color:var(--ink);font-weight:500;text-decoration:none;
  border-bottom:1px solid var(--faint);
  transition:border-color .2s ease;
}
.lead a:hover,.mail:hover{border-bottom:2px solid var(--ink);}

.talent{display:flex;flex-wrap:wrap;margin-top:72px;border-top:1px solid var(--line);border-left:1px solid var(--line);}
.talent span{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  padding:16px 24px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  background:transparent;color:var(--body);
  transition:background .2s ease,color .2s ease;
}
.talent span:hover{background:var(--ink);color:var(--bg);}

/* ---------- Contact (ink close) ---------- */
.sec .inner{max-width:720px;}
.sec .inner p{font-size:17px;line-height:1.7;margin:0 0 14px;max-width:38em;}
.sec-close h2{color:var(--bg);}
.sec-close .kicker{color:var(--faint);}
.sec-close .inner p{color:rgba(250,250,248,.75);}
.sec-close .mail{color:var(--bg);border-bottom-color:var(--faint);}
.sec-close .mail:hover{border-bottom-color:var(--bg);}

/* ---------- Footer ---------- */
footer{
  background:var(--ink);color:var(--faint);
  border-top:1px solid rgba(250,250,248,.14);
  padding:36px 0 44px;
}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.footer-brand{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--bg);}
.footer-links{display:flex;gap:30px;}
.footer-links a{
  font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:0;
  text-decoration:none;color:var(--muted);
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.footer-links a:hover{color:var(--bg);border-bottom-color:var(--bg);}
.footer-fine{margin-top:30px;font-size:13px;color:var(--faint);opacity:.7;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:40px;}
  .hero-photo{max-width:480px;}
  .spread{grid-template-columns:1fr;gap:28px;}
  .spread-body{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:24px;}
}
@media (max-width:820px){
  .card{grid-template-columns:1fr;gap:8px;padding:26px 0;}
  .rn{padding-top:0;}
  .adv-row{grid-template-columns:1fr;gap:6px;padding:18px 0;}
}
@media (max-width:760px){
  .wrap{padding:0 20px;}
  body{overflow-x:clip;}
  .dateline .dc{display:none;}
  .sec-head,.spread-head,.sec .inner{grid-template-columns:1fr;}
  .folio{font-size:46px;line-height:.9;padding-top:0;}
  .marquee-track span{letter-spacing:.18em;}
  .nav-actions .btn{display:none;} /* header CTA hidden on mobile — hero carries the action */
  nav.primary{
    grid-column:auto;justify-self:auto; /* escape the masthead grid: absolute + full-bleed */
    position:absolute;top:72px;left:0;right:0;width:auto;
    background:var(--bg);border-bottom:2px solid var(--line-heavy);
    box-shadow:0 16px 28px rgba(22,21,18,.10);
    flex-direction:column;gap:0;padding:8px 20px 16px;
    transform:translateY(-10px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .28s ease,opacity .28s ease,visibility .28s;
  }
  .nav-open nav.primary{transform:none;opacity:1;visibility:visible;pointer-events:auto;}
  .nav-open{overflow:hidden;} /* lock page scroll while the menu is open */
  nav.primary a{padding:14px 0;border-bottom:1px solid var(--line);font-size:13px;}
  nav.primary a:last-child{border-bottom:none;}
  .nav-toggle{display:block;}
  /* the open panel is paper again: links back to ink */
  header nav.primary{background:var(--bg);border-bottom:2px solid var(--line-heavy);}
  header nav.primary a{color:var(--muted);}
  header nav.primary a:hover{color:var(--ink);border-bottom-color:transparent;}
  header nav.primary a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--line);}
  .hero{padding:clamp(104px,14vh,132px) 0 0;} /* clear the fixed 72px header */
  .ctas{padding-bottom:36px;}
  .hero-foot{grid-template-columns:1fr;gap:16px;padding:24px 0 30px;}
  .sec{padding:76px 0;}
  .footer-row{flex-direction:column;align-items:flex-start;}
}
@media (max-width:700px){
  /* diagram scales down to fit the phone screen, whole story visible */
  .stage-frame svg{min-width:0;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important;animation:none!important;}
  .hero-photo .marching,.hero-photo .pulse-ring,.hero-photo .blink{animation:none!important}
}

/* ============================================================
   Vektor page
   ============================================================ */

nav.primary a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--ink);}
/* (masthead ink rules above carry the closed state; the open mobile panel restates ink) */

/* Hero: text + stage, no photo */
.hero-stage .hero-copy{max-width:820px;}
.hero-stage .ctas{padding-bottom:0;margin-bottom:56px;}
.hero-stage{padding-bottom:48px;}

/* Stage: diagram + step tabs */
.stage{margin-top:24px;border-top:2px solid var(--line-heavy);padding-top:40px;}
.stage-frame svg{display:block;width:100%;height:auto;color:var(--ink);}

/* Stage scene: the original per-step states */
.stage-frame .grp{opacity:.4;transition:opacity .5s ease;}
.stage-frame .lbl{font-size:11px;letter-spacing:2px;fill:var(--ink);opacity:.55;}
.stage-frame .frame-el{stroke:var(--ink);stroke-width:1.4;fill:none;}
.stage-frame .specline{fill:var(--ink);opacity:.35;}
.stage-frame .tile{fill:rgba(22,21,18,.03);stroke:var(--ink);stroke-width:1;}
.stage-frame .tick{fill:var(--ink);opacity:0;transition:opacity .3s ease .5s;}
.stage-frame .logbar{fill:var(--ink);opacity:.4;transform-origin:left center;}

.stage-frame[data-step="0"] .g-spec,
.stage-frame[data-step="1"] .g-plane,
.stage-frame[data-step="2"] .g-plane,
.stage-frame[data-step="3"] .g-plane,
.stage-frame[data-step="3"] .g-logs{opacity:1;}
.stage-frame[data-step="0"] .g-spec .frame-el,
.stage-frame[data-step="1"] .g-plane .frame-el,
.stage-frame[data-step="2"] .g-plane .frame-el,
.stage-frame[data-step="3"] .g-plane .frame-el,
.stage-frame[data-step="3"] .g-logs .frame-el{stroke-width:1.8;}

/* Declare: spec lines write in */
.stage-frame[data-step="0"] .specline{animation:stageLineIn .5s ease-out backwards;}
.stage-frame[data-step="0"] .specline:nth-of-type(2){animation-delay:.08s}
.stage-frame[data-step="0"] .specline:nth-of-type(3){animation-delay:.16s}
.stage-frame[data-step="0"] .specline:nth-of-type(4){animation-delay:.24s}
.stage-frame[data-step="0"] .specline:nth-of-type(5){animation-delay:.32s}
@keyframes stageLineIn{from{transform:scaleX(0);transform-origin:left center;}to{transform:scaleX(1);}}

/* Register: the fleet populates */
.stage-frame[data-step="1"] .tileset g,
.stage-frame[data-step="2"] .tileset g,
.stage-frame[data-step="3"] .tileset g{animation:stageTileIn .42s ease-out backwards;}
.stage-frame .tileset g:nth-child(1){animation-delay:.02s}.stage-frame .tileset g:nth-child(2){animation-delay:.1s}
.stage-frame .tileset g:nth-child(3){animation-delay:.18s}.stage-frame .tileset g:nth-child(4){animation-delay:.26s}
.stage-frame .tileset g:nth-child(5){animation-delay:.34s}.stage-frame .tileset g:nth-child(6){animation-delay:.42s}
@keyframes stageTileIn{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:translateY(0);}}
.stage-frame[data-step="1"] .tick,
.stage-frame[data-step="2"] .tick,
.stage-frame[data-step="3"] .tick{opacity:1;}

/* Govern: policy sweep passes, one agent is held */
.stage-frame .sweep{opacity:0;}
.stage-frame .sweep-rect{fill:rgba(22,21,18,.05);}
.stage-frame .sweep-edge{stroke:var(--ink);stroke-width:1.4;}
.stage-frame[data-step="2"] .sweep{animation:stageSweep 1.9s cubic-bezier(.4,0,.2,1) infinite;}
@keyframes stageSweep{0%{opacity:0;transform:translateX(-50px);}12%{opacity:1;}88%{opacity:1;}100%{opacity:0;transform:translateX(290px);}}
.stage-frame .held{opacity:0;fill:var(--ink);transition:opacity .3s ease .5s,fill .4s ease;}
.stage-frame[data-step="1"] .held,
.stage-frame[data-step="2"] .held,
.stage-frame[data-step="3"] .held{opacity:1;}
.stage-frame[data-step="2"] .held,
.stage-frame[data-step="3"] .held{fill:#B3232C;}
.stage-frame[data-step="2"] .held-tile,
.stage-frame[data-step="3"] .held-tile{fill:rgba(179,35,43,.12);stroke:#B3232C;stroke-width:1.6;}
.stage-frame[data-step="2"] .held-tile .tick,
.stage-frame[data-step="3"] .held-tile .tick{opacity:0 !important;transition:none;}

/* Observe: logbars grow */
.stage-frame[data-step="3"] .logbar{animation:stageBarGrow .6s ease-out backwards;}
.stage-frame .logbar:nth-of-type(2){animation-delay:.12s}.stage-frame .logbar:nth-of-type(3){animation-delay:.24s}
.stage-frame .logbar:nth-of-type(4){animation-delay:.36s}.stage-frame .logbar:nth-of-type(5){animation-delay:.48s}
@keyframes stageBarGrow{from{transform:scaleX(.15);}to{transform:scaleX(1);}}

@media (prefers-reduced-motion: reduce){
  .stage-frame *{animation:none !important;}
  .stage-frame .grp{opacity:1;}
  .stage-frame .tick,.stage-frame .held{opacity:1;}
}

.stage-steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-left:none;margin-top:8px;}
.stage-steps button{
  font-family:var(--sans);text-align:left;background:transparent;border:none;
  border-left:1px solid var(--line);padding:16px 18px;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;
  transition:background .2s ease,color .2s ease;
}
.stage-steps button .sn{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);}
.stage-steps button .st{font-size:13px;color:var(--body);line-height:1.4;}
.stage-steps button:hover{background:rgba(22,21,18,.04);}
.stage-steps button[aria-selected="true"]{background:var(--ink);}
.stage-steps button[aria-selected="true"] .sn{color:var(--faint);}
.stage-steps button[aria-selected="true"] .st{color:var(--bg);}

.stage-cap{
  font-family:var(--serif);font-size:17px;color:var(--ink);
  margin:20px 0 0;min-height:1.5em;
}

/* CTA close section extras */
.cta-line{font-size:17px;color:var(--body);}
.cta-actions{margin-top:28px;}
.sec-close .btn-ghost{border-color:var(--bg);color:var(--bg);}
.sec-close .btn-ghost:hover{background:var(--bg);color:var(--ink);}

@media (max-width:820px){
  .stage-steps{grid-template-columns:1fr 1fr;}
  .stage-steps button{border-top:1px solid var(--line);}
}
@media (max-width:480px){
  .stage-steps{grid-template-columns:1fr;}
}

/* ============================================================
   v4 shared components (narrative deck, 11 Oct 2026)
   Used by onepager-v4-film / onepager-v4-nofilm / site pages.
   Appended only: no rule above this line changes.
   ============================================================ */

/* Masthead: the company line sits under the name (hero stays clean) */
.brand-block{display:flex;flex-direction:column;line-height:1.12;}
.brand-tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(250,250,248,.58);margin-top:4px;
}

/* Hero lede rotator: three statements, one visible at a time */
.lede-rotator{margin:0 0 28px;}
.lede-rotator .rotator-line{margin:0;}
.lede-rotator.js{position:relative;}
.lede-rotator.js .rotator-line{
  position:absolute;top:0;left:0;right:0;
  opacity:0;transform:translateY(8px);
  transition:opacity .7s ease,transform .7s ease;
}
.lede-rotator.js .rotator-line.is-active{opacity:1;transform:none;}

/* Vektor questions */
.qa{margin-top:8px;border-top:2px solid var(--line-heavy);}
.qa-row{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:40px;padding:26px 0;border-bottom:1px solid var(--line);
}
.qa-row:last-child{border-bottom:2px solid var(--line-heavy);}
.qa-q{
  font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:clamp(19px,2vw,23px);line-height:1.3;color:var(--ink);
  letter-spacing:-.01em;
}
.qa-a{font-size:15.5px;line-height:1.7;color:var(--muted);max-width:38em;}
.qa-a b{color:var(--ink);font-weight:600;}

/* Authority line: the section's closing argument */
.vektor-close{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(18px,2vw,22px);line-height:1.55;color:var(--ink);
  max-width:30em;margin:38px 0 0;
}

/* Bring-your-own strip */
.byo-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:44px;
}
.byo-cell{background:var(--bg);padding:18px 22px;}
.byo-cell .k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:8px;
}
.byo-cell .v{font-size:14px;line-height:1.6;color:var(--ink);}
.byo-cell .v span{color:var(--muted);}

/* Demo plate */
.demo{
  margin-top:64px;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);
  gap:28px;align-items:end;
}
.demo-note{padding-bottom:6px;}
.demo-note .fig{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);line-height:1.9;
}
.demo-note .fig b{color:var(--ink);font-weight:500;}
.demo-frame{
  position:relative;background:var(--ink);aspect-ratio:16/9;
  display:grid;place-items:center;border:1px solid var(--line-heavy);
  overflow:hidden;
}
.demo-frame video{width:100%;height:100%;object-fit:contain;background:#000;display:block;}

/* Hero film frame (film edition) */
.hero-film-frame{position:relative;border:1px solid var(--line-heavy);background:var(--ink);}
.hero-film-frame video{display:block;width:100%;height:auto;background:var(--ink);}
.hero-film-tag{
  margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);text-align:right;
}

/* Domains */
.domains{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-top:2px solid var(--line-heavy);border-bottom:1px solid var(--line);
}
.domain{
  background:var(--bg);padding:32px 28px;
  font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,34px);
  color:var(--ink);letter-spacing:-.02em;
}
.domain .d-sub{
  display:block;margin-top:10px;font-family:var(--mono);font-size:11px;
  font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}

/* The shift: statement band + the eight problems */
.shift-statement{
  font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:clamp(21px,2.6vw,30px);line-height:1.35;color:var(--ink);
  letter-spacing:-.01em;max-width:24em;margin:0 0 20px;
}
.shift-body p{font-size:16px;line-height:1.7;margin:0 0 14px;max-width:40em;}
.problems{
  display:grid;grid-template-columns:1fr 1fr;gap:0 48px;
  margin:36px 0 0;padding:0;list-style:none;
  border-top:2px solid var(--line-heavy);
}
.problems li{
  display:flex;gap:16px;align-items:baseline;
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--ink);
  padding:13px 0;border-bottom:1px solid var(--line);
}
.problems li:nth-last-child(-n+2){border-bottom:2px solid var(--line-heavy);}
.problems .pn{font-size:11px;letter-spacing:.08em;color:var(--faint);}
.shift-close{font-size:16px;line-height:1.7;max-width:40em;margin:26px 0 0;}
.shift-close strong{color:var(--ink);}

/* Beliefs: vision headline + mission block, both verbatim */
.creed-k{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px;
}
.mission{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(17px,1.8vw,20px);line-height:1.6;color:var(--ink);
  border-left:2px solid var(--accent);padding-left:20px;max-width:34em;margin:26px 0 0;
}

/* Question teaser list (multi-page home) */
.qlist{margin:8px 0 0;padding:0;list-style:none;border-top:2px solid var(--line-heavy);}
.qlist li{
  font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:clamp(17px,1.8vw,20px);color:var(--ink);letter-spacing:-.01em;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.qlist li:last-child{border-bottom:2px solid var(--line-heavy);}

/* Closing question at the ink close */
.closing-q{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(17px,1.9vw,21px);color:rgba(250,250,248,.72);
  margin:0 0 16px;
}

/* Architecture strip (Vektor page): agents and runtimes above,
   the six-column Vektor band, enterprise below */
.arch{margin-top:48px;border:1px solid var(--line-heavy);background:var(--bg);}
.arch-k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:8px;
}
.arch-top{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);}
.arch-cell{padding:8px 20px 18px;}
.arch-cell + .arch-cell{border-left:1px solid var(--line);}
.arch-v{font-size:13.5px;line-height:1.6;color:var(--ink);}
.arch-v span{color:var(--muted);}
.arch-vektor{background:var(--ink);}
.arch-vektor .vektor-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);padding:14px 20px 4px;
}
.arch-cols{display:grid;grid-template-columns:repeat(6,1fr);}
.arch-cols .vc{
  padding:10px 12px 16px;text-align:center;
  font-family:var(--sans);font-size:13px;font-weight:600;
  color:rgba(250,250,248,.92);
  border-left:1px solid rgba(250,250,248,.14);
}
.arch-cols .vc:first-child{border-left:none;}
.arch-cols .vc::before{
  content:attr(data-k);display:block;
  font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(250,250,248,.5);margin-bottom:6px;
}
.arch-bottom{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);}

/* Contact line in the ink close */
.contrib-mail{
  font-family:var(--serif);font-size:clamp(20px,2.4vw,26px);font-weight:600;
  color:var(--bg);text-decoration:none;border-bottom:2px solid var(--accent);
}
.contrib-mail:hover{color:var(--accent);}

/* v4 responsive */
@media (max-width:960px){
  .qa-row{grid-template-columns:1fr;gap:8px;}
  .byo-grid{grid-template-columns:1fr;}
  .domains{grid-template-columns:1fr;}
  .demo{grid-template-columns:1fr;gap:16px;}
  .demo-note{order:2;}
  .hero-film-tag{text-align:left;}
  .problems{grid-template-columns:1fr;}
  .problems li:nth-last-child(-n+2){border-bottom:1px solid var(--line);}
  .problems li:last-child{border-bottom:2px solid var(--line-heavy);}
  .arch-top{grid-template-columns:1fr;}
  .arch-bottom{grid-template-columns:1fr;}
  .arch-cell + .arch-cell{border-left:none;border-top:1px solid var(--line);}
  .arch-cols{grid-template-columns:repeat(3,1fr);}
  .arch-cols .vc:nth-child(4){border-left:none;}
  .arch-cols .vc:nth-child(n+4){border-top:1px solid rgba(250,250,248,.14);}
}

/* ============================================================
   Round 29 · remove the AI feel (.v4 overrides only)
   Scoped under `.v4` (body class, onepager-v4-film/nofilm only).
   Every rule ABOVE this line is restored byte-for-byte to
   snapshots/pre-round29-1530/styles.css. styles.css is shared by
   every page that links it -- not just the root-level onepagers,
   but also site-broadsheet/*.html, preview-a/, preview-bw/,
   deploy-launch/ and deploy-nofilm/ (fix-round SF1: an earlier
   pass edited .problems li/.pn, .creed-k and .mission unscoped
   on the "solely used by v4" assumption and broke
   site-broadsheet/index.html by ~206k px at 1440; every v4-only
   value now lives only in the .v4-scoped rules below).
   ============================================================ */

/* Darkened bronze for gold-as-text on light ground: 4.56:1 on --bg
   (gold itself is 2.45:1 and fails). Gold stays as-is for rules and
   the diamond mark, and for gold text on the dark --ink ground
   (7.13:1), where it already passes. */
.v4{--accent-text:#946B33;}

/* Eight-problem list: mono-as-shorthand becomes Plex Sans (numerals stay
   mono, per the rule that mono is only for figure captions/numerals).
   SF4: .pn was --faint on --bg (2.79:1, fails); --muted passes (5.09:1). */
.v4 .problems li{font-family:var(--sans);font-size:14px;letter-spacing:.01em;}
.v4 .problems .pn{font-family:var(--mono);color:var(--muted);}

/* Beliefs labels: 10.5px was under the 11px mono-label floor */
.v4 .creed-k{font-size:11px;}

/* Mission: drop the 2px left stripe for a hairline top rule, scoped to
   `.sec-head .mission` -- SF2: the generic `.sec-head p{font-size:16px;
   margin:0 0 14px;max-width:40em}` rule (0,1,1) was beating plain
   `.mission` (0,1,0) on font-size/margin/max-width, silently demoting the
   mission statement to 16px. `.v4 .sec-head .mission` is (0,2,0) and wins
   outright instead of relying on property-by-property luck. */
.v4 .sec-head .mission{
  border-left:none;border-top:none;
  padding:0 0 0 20px;margin:0;
  font-size:clamp(17px,1.8vw,20px);line-height:1.6;max-width:34em;
}
/* SF2: the "Mission" label (not "Vision") indents to match the paragraph
   below it -- :has() targets only the creed-k immediately before .mission */
/* The hairline sits ABOVE the label, so label and paragraph read as one
   block (the rule used to fall between them). */
.v4 .creed-k:has(+ .mission){
  border-top:1px solid var(--line);margin:26px 0 12px;padding:20px 0 0 20px;
}

/* SF3: the contributors close puts `wrap` and `inner` on the SAME div,
   so `.inner{max-width:720px}` was narrowing the very box that `.wrap`
   also auto-centers -- shrinking the 130px centering inset that every
   other section gets for free from its own separate `.wrap`, and
   producing a different left x (40px instead of 170px at 1440). Give
   the shared div back `.wrap`'s own box (centered, 1180 max) and put
   the 860px reading-width cap on the inner content div instead, which
   is exactly how `.wrap > .sec-head` does it for sections 01-04. */
.v4 .sec .inner{max-width:var(--maxw);margin-left:auto;margin-right:auto;}
.v4 .sec .inner > div:only-child{max-width:860px;}

/* SF4: footer-links/.footer-fine are shared by every page; v4's dark
   footer needs readable color, not --muted (too dark on --ink) or a
   dimming opacity on an already-passing color. */
.v4 .footer-links a{color:rgba(250,250,248,.72);}
.v4 .footer-fine{opacity:1;}

/* SF5: default :focus-visible is outline:var(--ink), invisible on the
   dark .sec-close/footer grounds (ink-on-ink). */
.v4 .sec-close :focus-visible,
.v4 footer :focus-visible{outline-color:var(--bg);}

/* SF7: the mobile nav dropdown's drop shadow */
.v4 nav.primary{box-shadow:none;}

/* SF8: drop the gold lead-rule dash before every "0N · Label" kicker */
.v4 .kicker::before{display:none;}

/* Ghost numerals removed from the markup (see onepager-v4-*.html):
   .sec-head and .sec .inner are `grid-template-columns:auto 1fr`
   to hold the old folio numeral beside the heading block. With the
   numeral gone, the one remaining child must span both tracks or
   the auto-sized first column would squeeze the section heading
   into a sliver. */
.v4 .sec-head > div:only-child,
.v4 .sec .inner > div:only-child{grid-column:1/-1;}

/* Nav links: Plex Mono uppercase -> Plex Sans, sentence case */
.v4 nav.primary a{
  font-family:var(--sans);font-size:13.5px;letter-spacing:.01em;text-transform:none;
}

/* Bring-your-own labels: gold text replaced by the passing bronze;
   10.5px was under the 11px mono-label floor */
.v4 .byo-cell .k{color:var(--accent-text);font-size:11px;}

/* Micro-type floor: brand tag was 9.5px (a fail); 11px is the mono floor */
.v4 .brand-tag{font-size:11px;white-space:nowrap;}

/* Contributors close: root cause of the "empty underline" --
   `.lead a,.mail{color:var(--ink);border-bottom:1px solid var(--faint);}`
   is a legacy rule (shared with onepager-v2/v3) with specificity
   (0,1,1). It beats `.contrib-mail`'s (0,1,0), so inside
   `<p class="lead"><a class="contrib-mail">` the anchor actually
   rendered with color:var(--ink) on the `.sec-close` dark-ink
   background -- ink-on-ink text, contrast ~1:1 -- under a visible
   var(--faint) rule (6.27:1 on ink). That reads exactly as an
   empty underline. Re-assert at higher specificity, v4-only. */
.v4 .contrib-mail{color:var(--bg);border-bottom:2px solid var(--accent);}
.v4 .contrib-mail:hover{color:var(--accent);border-bottom:2px solid var(--accent);}

/* Type scale (v4 only). The page had drifted to 31 distinct text styles:
   eleven serif sizes, italic on six unrelated roles, and six different
   tracking values on the 11-12px mono labels. Every role now maps to one
   of these tiers, and each family has one job:
     serif upright 700  display   h1, every section h2 (incl. 01)
     serif upright 600  subhead   domain names, Q&A questions, mail link
     serif italic 400   voice     lede, closing lines, mission (only here)
     sans 16 / 14 / 13  body, secondary, fine print
     mono 11 caps .12em labels (kickers, figure captions, tags)        */
.v4{
  --fs-sub:clamp(20px,2.2vw,24px);
  --fs-voice:clamp(18px,1.8vw,21px);
  --fs-body:16px;--fs-small:14px;--fs-fine:13px;
  --fs-label:11px;--tr-label:.12em;
}
/* 01's statement was a one-off italic 30px; it is the section's h2 */
.v4 .shift-statement{
  font-style:normal;font-weight:700;font-size:clamp(28px,3.4vw,42px);
  letter-spacing:-.02em;line-height:1.1;
}
.v4 .domain,
.v4 .qa-q,
.v4 .contrib-mail{
  font-style:normal;font-weight:600;font-size:var(--fs-sub);
  letter-spacing:-.01em;line-height:1.3;
}
.v4 .hero .lede,
.v4 .vektor-close,
.v4 .sec-head .mission,
.v4 .sec .inner .closing-q{font-style:italic;font-weight:400;font-size:var(--fs-voice);}
.v4 .qa-a,
.v4 .sec .inner p:not([class]){font-size:var(--fs-body);}
.v4 .problems li,
.v4 .byo-cell .v,
.v4 nav.primary a,
.v4 .footer-links a{font-size:var(--fs-small);letter-spacing:0;}
.v4 .footer-fine{font-size:var(--fs-fine);}
.v4 .kicker,
.v4 .brand-tag,
.v4 .hero-film-tag,
.v4 .demo-note .fig,
.v4 .domain .d-sub,
.v4 .byo-cell .k,
.v4 .creed-k{
  font-size:var(--fs-label);letter-spacing:var(--tr-label);font-weight:400;
}
.v4 .demo-note .fig b{font-weight:400;}
.v4 .demo-note .fig{text-wrap:balance;}