/* ── QUANTILLION QUBITS institutional register A document that happens to be a website. Dark bands set the scene. Light document does the work.  */

:root{
  /* grounds */
  --paper:#FAFAF7;
  --paper-2:#ECEBE5;
  --deep:#0A0D11;
  --deep-2:#11151A;

  /* ink */
  --ink:#111318;
  --ink-2:#424750;
  --ink-3:#6E737C;
  --bone:#F6F4ED;
  --bone-2:#B8BCB7;
  --bone-3:#858A91;

  /* ────────── one accent, two values same hue, adjusted for ground ────────── */
  --bronze:#9A742F;          /* on paper */
  --brass:#D2B06B;           /* on deep  */

  --rule:rgba(21,23,27,.14);
  --rule-2:rgba(21,23,27,.28);
  --rule-d:rgba(242,241,236,.14);
  --rule-d2:rgba(242,241,236,.26);

  --display:'Instrument Serif',Georgia,serif;
  --text:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;

  --gut:clamp(20px,4.5vw,64px);
  --max:1240px;
  --measure:34em;
  --sec:clamp(58px,7.5vh,96px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --mast:60px;
  /* the feature band: a heavier paper stock, not a dark block */
  --stone:#E7E4DA;
  --stone-rule:rgba(21,23,27,.16);
  /* one hero system, so every page's title block sits on the same baseline */
  --hero-pad:clamp(56px,8.5vh,104px);
  --hero-gap:clamp(16px,2.1vh,24px);
  --hero-size:clamp(38px,5.4vw,78px);   /* sticky masthead height, so a hero fills exactly one screen */
}

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

html{background:var(--paper);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
::selection{background:var(--bronze);color:var(--paper)}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);
  padding:13px 20px;font-family:var(--mono);font-size:13px;text-decoration:none}
.skip:focus{left:12px;top:12px}

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

/* ────────────────────────────────── TYPE ────────────────────────────────── */

.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--bronze);
}
.eyebrow--onDark{color:var(--brass)}

.h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(28px,3.4vw,46px);line-height:1.06;letter-spacing:-.018em;
  text-wrap:balance;color:var(--ink);
}
.h2--onDark{color:var(--bone)}
.h2 em{font-style:italic;color:var(--bronze)}
.h2--onDark em{color:var(--brass)}

.chapno{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em;
  color:var(--bronze);margin-bottom:16px;
}
.chapno--onDark{color:var(--brass)}

/* document prose is a text serif, not the display face */
.lead{
  font-family:var(--text);font-size:clamp(19px,1.45vw,22px);line-height:1.52;
  color:var(--ink);max-width:var(--measure);
}
.lead--onDark{color:var(--bone)}
.doc__body p{
  font-family:var(--text);font-size:clamp(17px,1.12vw,18.5px);line-height:1.66;
  color:var(--ink-2);max-width:var(--measure);
}
.doc--dark .doc__body p{color:var(--bone-2)}
.doc__body > p + p{margin-top:1.1em}
.doc__body > .lead + p{margin-top:1.3em}

.fnote{
  font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--ink-3);
  max-width:var(--measure);padding-top:16px;margin-top:22px;border-top:1px solid var(--rule);
}
.fnote--wide{max-width:62ch;margin-top:36px}

/* ──────────────────────────────── BUTTONS ───────────────────────────────── */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 30px;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--ink);border-radius:0;
  transition:background 480ms var(--ease),color 480ms var(--ease),border-color 480ms var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--bronze);border-color:var(--bronze);color:var(--paper)}
.btn--sm{padding:11px 20px;font-size:11px}
.btn--lg{padding:19px 40px;font-size:12.5px}
.doc--dark .btn{background:var(--brass);border-color:var(--brass);color:var(--deep)}
.doc--dark .btn:hover{background:var(--bone);border-color:var(--bone)}
.btn--ghost{
  background:rgba(14,16,19,.34);color:var(--bone);border-color:rgba(242,241,236,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.btn--ghost:hover{background:rgba(14,16,19,.6);border-color:var(--bone);color:var(--bone)}

/* ──────────────────────────────── MASTHEAD ──────────────────────────────── */

.masthead{
  position:sticky;top:0;z-index:80;
  background:rgba(247,247,244,.90);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--rule);
}
.masthead__in{
  max-width:var(--max);margin-inline:auto;padding:13px var(--gut);
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);flex:none}
.brand__mark{width:32px;height:32px}  /* gold dragon-Q PNG since 18 Oct 2026; the old flat SVG needed a darkening filter */
.brand__wm{font-family:var(--display);font-size:19px;line-height:1;letter-spacing:.005em}

.nav{display:flex;gap:clamp(12px,1.7vw,26px);margin-inline:auto;flex-wrap:nowrap;overflow:hidden}
.nav__i{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);text-decoration:none;padding:6px 0;white-space:nowrap;
  border-bottom:1px solid transparent;transition:color 300ms var(--ease),border-color 300ms var(--ease);
}
.nav__i:hover{color:var(--ink)}
.nav__i.is-here{color:var(--bronze);border-bottom-color:var(--bronze)}

/* ────────────────────────────────── HERO ────────────────────────────────── */

.hero{
  position:relative;background:var(--deep);
  min-height:clamp(560px,calc(100svh - var(--mast)),980px);
  display:flex;align-items:flex-end;overflow:hidden;
}
.hero__media{position:absolute;z-index:0;inset:0;overflow:hidden}
.hero__img{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover}
/* Approved homepage motion study. The image remains the poster and fallback. */
.hero__video{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;background:transparent}
/* Shade only where the type sits. The photograph carries the rest. */
.hero__scrim{
  position:absolute;z-index:2;inset:0;
  background:
    linear-gradient(180deg,rgba(14,16,19,.14) 0%,rgba(14,16,19,0) 24%,
                    rgba(14,16,19,.40) 58%,rgba(14,16,19,.92) 100%),
    linear-gradient(94deg,rgba(14,16,19,.74) 0%,rgba(14,16,19,.34) 42%,rgba(14,16,19,0) 72%);
}
.hero__in{
  position:relative;z-index:3;width:100%;
  max-width:var(--max);margin-inline:auto;padding:0 var(--gut) var(--hero-pad);
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--hero-gap);
}
/* Wide enough that "The workload is a choice." holds one line and does not
   orphan its last word; the size steps back a little to pay for it. */
.hero__h{
  font-family:var(--display);font-weight:400;color:var(--bone);
  font-size:var(--hero-size);line-height:1.02;letter-spacing:-.026em;
  max-width:22ch;text-wrap:balance;
}
.hero__h em{font-style:italic;color:var(--brass)}
.hero__d{
  font-family:var(--text);font-size:clamp(17px,1.3vw,20px);line-height:1.52;
  color:var(--bone-2);max-width:48ch;
}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hero__acts .btn{background:var(--brass);border-color:var(--brass);color:var(--deep)}
.hero__acts .btn:hover{background:var(--bone);border-color:var(--bone)}
.hero__acts .btn--ghost{background:rgba(14,16,19,.34);color:var(--bone);border-color:rgba(242,241,236,.5)}
.hero__disc{
  position:absolute;z-index:2;left:var(--gut);bottom:clamp(22px,3vh,34px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;color:var(--brass);
  text-shadow:0 1px 12px rgba(14,16,19,.55);
}
.hero__disc::before{content:"";display:block;width:24px;height:1px;background:var(--brass);opacity:.82}

/* ────────────────────────────── STATUS BAND ─────────────────────────────── */

.status{background:var(--deep-2);padding-block:clamp(34px,5vh,54px);border-bottom:1px solid var(--rule-d)}
.status__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-bottom:20px;margin-bottom:26px;border-bottom:1px solid var(--rule-d);flex-wrap:wrap}
.status__head .eyebrow{color:var(--brass)}
.status__asat{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-3)}
.status__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule-d)}
.stat{background:var(--deep-2);padding:4px clamp(16px,2vw,26px) 4px 0;display:flex;
  flex-direction:column;gap:7px}
.stat + .stat{padding-left:clamp(16px,2vw,26px)}
.stat__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-3)}
.stat__v{font-family:var(--display);font-size:clamp(24px,2.5vw,34px);line-height:1.06;
  color:var(--bone);letter-spacing:-.012em}
.stat__v--zero{color:var(--brass);font-size:clamp(34px,3.6vw,50px)}
.stat__n{font-size:13.5px;line-height:1.45;color:var(--bone-3);max-width:26ch}
.stat--flag .stat__k{color:var(--brass)}

/* ─────────────────────────── DOCUMENT SECTIONS ──────────────────────────── */

.doc{padding-block:var(--sec);border-top:1px solid var(--rule)}
.doc--tint{background:var(--paper-2)}
.doc--dark{background:var(--deep);border-top-color:transparent}

/* sticky chapter rail beside a scrolling argument column */
.doc__grid{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);
  gap:clamp(20px,2.6vw,44px);align-items:start}
.doc__rail{position:sticky;top:104px}
.doc__body{min-width:0}

/* pull quote */
.pull{margin:36px 0;padding:4px 0 4px 24px;border-left:2px solid var(--bronze);max-width:36em}
.pull p{font-family:var(--display) !important;font-size:clamp(21px,2vw,27px) !important;
  line-height:1.28 !important;color:var(--ink) !important;max-width:none !important;
  letter-spacing:-.012em}
.pull cite{display:block;margin-top:12px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-style:normal}
/* on a dark band the quote must flip, or it renders near-black on black */
.doc--dark .pull{border-left-color:var(--brass)}
.doc--dark .pull p{color:var(--bone) !important}
.doc--dark .pull cite{color:var(--bone-3)}

/* ───────────────────────────────── TABLE ────────────────────────────────── */

.tw{overflow-x:auto;margin-top:28px;border:1px solid var(--rule);background:#FCFCFA;position:relative}
.doc--tint .tw{background:#FAFAF7}

/* Every table is set wider than a phone screen on purpose (.tbl below has a
   480px floor) so its columns stay readable rather than crushed -- the
   trade-off is that it has to scroll sideways to be read in full. .tw already
   does that (overflow-x:auto), but nothing told a visitor it was possible, so
   the cut-off text just looked broken. Below the width a table is guaranteed
   to overflow at, a small label states it plainly, and a soft fade on the
   right edge shows there is more without needing to be read. */
@media (max-width:600px){
  .tw::before{
    content:"Swipe to see all columns \2192";
    display:block;
    padding:8px 14px;
    font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-3);background:var(--paper-2);
    border-bottom:1px solid var(--rule);
  }
  .tw::after{
    content:"";position:absolute;top:0;right:0;bottom:0;width:28px;
    background:linear-gradient(to right,rgba(252,252,250,0),rgba(252,252,250,.95));
    pointer-events:none;
  }
  .doc--tint .tw::after{background:linear-gradient(to right,rgba(250,250,247,0),rgba(250,250,247,.95))}
}
.tbl{border-collapse:collapse;width:100%;min-width:480px;font-size:15px}
.tbl__cap{caption-side:top;text-align:left;padding:14px 18px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--rule)}
.tbl th,.tbl td{text-align:left;padding:12px 18px;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:none}
.tbl thead th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;background:var(--paper-2)}
.doc--tint .tbl thead th{background:#E7E7E1}
.tbl tbody th{font-weight:600;color:var(--ink);font-family:var(--sans);font-size:15px}
.tbl td{color:var(--ink-2)}
.tbl td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--bronze);white-space:nowrap}

.tag{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--rule-2);color:var(--ink-3);white-space:nowrap}
.tag--on{border-color:var(--bronze);color:var(--bronze)}

/* ────────────────────────────── ASYMMETRIES ─────────────────────────────── */

.asym{list-style:none;margin-top:32px;display:flex;flex-direction:column}
.asym li{padding:24px 0;border-top:1px solid var(--rule)}
.asym li:last-child{border-bottom:1px solid var(--rule)}
.asym__h{font-family:var(--display);font-weight:400;font-size:clamp(21px,1.9vw,27px);
  line-height:1.2;margin-bottom:10px;color:var(--ink)}

/* ─────────────────────────────── NEGATIONS ──────────────────────────────── */

.neg{margin-top:30px;display:flex;flex-direction:column}
.neg > div{padding:22px 0;border-top:1px solid var(--rule-d);display:grid;gap:9px}
.neg > div:last-child{border-bottom:1px solid var(--rule-d)}
.neg dt{font-family:var(--display);font-size:clamp(20px,1.8vw,26px);line-height:1.22;
  color:var(--bone);letter-spacing:-.01em}
.neg dd{font-family:var(--text);font-size:clamp(16.5px,1.05vw,18px);line-height:1.62;
  color:var(--bone-2);max-width:44em}

/* ───────────────────────────────── LAYERS ───────────────────────────────── */

.layers{list-style:none;margin-top:clamp(40px,6vw,72px);display:flex;flex-direction:column}
.layer{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,4vw,64px);align-items:center;
  padding-block:clamp(34px,5vw,56px);border-top:1px solid var(--rule)}
.layer:last-child{border-bottom:1px solid var(--rule)}
.layer__art{overflow:hidden;background:var(--paper-2)}
.layer__art img{width:100%;height:clamp(220px,30vw,340px);object-fit:cover}
.layer__b{min-width:0}
.layer__n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bronze);margin-bottom:10px}
.layer__h{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.6vw,38px);
  line-height:1.1;letter-spacing:-.016em;margin-bottom:14px;color:var(--ink)}
.layer__b p{font-family:var(--text);font-size:clamp(16.5px,1.06vw,18px);line-height:1.62;
  color:var(--ink-2);max-width:44em}
.layer__meta{margin-top:16px !important;padding-top:14px;border-top:1px solid var(--rule);
  font-family:var(--mono) !important;font-size:12px !important;letter-spacing:.06em;
  color:var(--ink-3) !important;text-transform:none}
.layer__meta span{color:var(--ink-3);text-transform:uppercase;letter-spacing:.16em;
  font-size:10px;margin-right:12px}

/* ───────────────────────────────── PEOPLE ───────────────────────────────── */

.people{list-style:none;margin-top:clamp(38px,5vw,64px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule)}
.person{background:var(--paper-2);padding:clamp(20px,2.4vw,30px);display:flex;
  flex-direction:column;gap:10px}
.person__ph{
  width:100%;aspect-ratio:1/1;background:
    repeating-linear-gradient(135deg,rgba(21,23,27,.045) 0 7px,transparent 7px 14px),#E4E4DD;
  display:flex;align-items:center;justify-content:center;margin-bottom:8px;
  border:1px solid var(--rule);
}
.person__ph span{font-family:var(--display);font-size:26px;color:var(--ink-3);letter-spacing:.04em}
/* two-line roles would otherwise push the name out of alignment across the row */
.person__role{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--bronze);line-height:1.5;min-height:calc(2 * 1.5em)}
.person__name{font-family:var(--display);font-size:21px;line-height:1.2;color:var(--ink)}
.person__bio{font-family:var(--text);font-size:15px;line-height:1.55;color:var(--ink-3)}

/* ───────────────────────────────── STEPS ────────────────────────────────── */

.steps{list-style:none;margin-top:32px;display:flex;flex-direction:column}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:0 18px;
  padding:22px 0;border-top:1px solid var(--rule-d)}
.steps li:last-child{border-bottom:1px solid var(--rule-d)}
.steps__n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--brass);padding-top:5px}
.steps h3{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.6vw,24px);
  line-height:1.24;color:var(--bone);margin-bottom:7px}
.steps p{font-family:var(--text);font-size:16.5px;line-height:1.6;color:var(--bone-2);max-width:42em}

.engage__cta{margin-top:40px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.engage__note{font-family:var(--sans) !important;font-size:14px !important;
  color:var(--bone-3) !important;max-width:40ch !important}

/* ───────────────────────────────── FOOTER ───────────────────────────────── */
/* Light, structured, and signed off with the wordmark set large and pale, the
   way a printed report closes. Was a dark slab of legal text. */

.foot{
  background:var(--paper-2);color:var(--ink-2);
  border-top:1px solid var(--rule);
  padding-block:clamp(40px,5vh,64px) 18px;
}
.foot__grid{
  display:grid;grid-template-columns:1.15fr 1.5fr 1.35fr 1fr;
  gap:clamp(26px,3.4vw,50px);
  padding-bottom:clamp(24px,3vw,34px);
}
.foot__col{display:flex;flex-direction:column;gap:8px;min-width:0}
.foot__col--index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px clamp(14px,1.8vw,28px);align-content:start}
.foot__col--index .foot__k{grid-column:1/-1}
.foot__col--brand{gap:16px}
.foot__mark{width:44px;height:44px}
.foot__tag{font-family:var(--text);font-size:16px;line-height:1.5;color:var(--ink-2);max-width:26ch}
.foot__k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze);margin-bottom:6px;
}
.foot__a{
  display:flex;align-items:baseline;gap:10px;width:fit-content;
  font-family:var(--sans);font-size:15.5px;color:var(--ink-2);text-decoration:none;
  padding:2px 0;transition:color 260ms var(--ease);
}
.foot__n{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.08em}
.foot__a:hover{color:var(--ink)}
.foot__a:hover .foot__n{color:var(--bronze)}
.foot__a.is-here{color:var(--ink)}
.foot__a.is-here .foot__n{color:var(--bronze)}
.foot__line{font-size:14.5px;line-height:1.55;color:var(--ink-3)}
.foot__line strong{color:var(--ink);font-weight:600}
.foot__line--gap{margin-top:6px}
.foot__line a{font:inherit;color:var(--ink-2);white-space:normal;text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.foot__line a:hover{color:var(--ink);text-decoration-color:var(--bronze)}
.foot__no{white-space:nowrap}
.foot__cta{
  margin-top:12px;width:fit-content;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--bronze);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid rgba(138,106,47,.35);padding-bottom:4px;
  transition:border-color 260ms var(--ease);
}
.foot__cta:hover{border-bottom-color:var(--bronze)}

.foot__legal{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px clamp(26px,3.4vw,50px);
  border-top:1px solid var(--rule);padding-top:22px;
}
.foot__legal p{font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.foot__legal strong{color:var(--ink-2);font-weight:600}

.foot__sign{
  font-family:var(--display);font-weight:400;
  font-size:clamp(24px,3.6vw,48px);line-height:.98;letter-spacing:-.028em;
  color:rgba(21,23,27,.12);
  margin:clamp(14px,1.8vw,20px) 0 10px;
  white-space:nowrap;user-select:none;
}

.foot__base{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding-top:16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}

@media (max-width:1000px){
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__legal{grid-template-columns:1fr}
}
@media (max-width:600px){
  .foot__grid{grid-template-columns:1fr;gap:26px}
  .foot__base{flex-direction:column;gap:8px}
}

/* ──────────────────────── PAGE HERO (inner pages) ───────────────────────── */

.phero{position:relative;background:var(--deep);overflow:hidden;
  min-height:clamp(520px,calc(100svh - var(--mast)),980px);
  display:flex;align-items:flex-end}
/* ── Full brightness. The masthead above is already a light bar, so the image needs no top scrim only enough shading at the bottom-left to carry the type.  */
.phero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero__scrim{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(14,16,19,.16) 0%,rgba(14,16,19,0) 26%,
                    rgba(14,16,19,.34) 60%,rgba(14,16,19,.90) 100%),
    linear-gradient(92deg,rgba(14,16,19,.70) 0%,rgba(14,16,19,.30) 44%,rgba(14,16,19,0) 74%)}
.phero__in{position:relative;z-index:2;width:100%;max-width:var(--max);margin-inline:auto;
  padding:0 var(--gut) var(--hero-pad);display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--hero-gap)}
.phero__h{font-family:var(--display);font-weight:400;color:var(--bone);
  font-size:var(--hero-size);line-height:1.02;letter-spacing:-.024em;
  max-width:19ch;text-wrap:balance}
.phero__h em{font-style:italic;color:var(--brass)}
.phero__d{font-family:var(--text);font-size:clamp(17px,1.3vw,20px);line-height:1.52;
  color:var(--bone-2);max-width:48ch}

/* ───────────────────────────── KEY FIGURE ROW ───────────────────────────── */

.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;
  background:var(--rule);border-block:1px solid var(--rule);margin-top:34px}
.kv__i{background:var(--paper);padding:22px clamp(14px,2vw,24px);display:flex;
  flex-direction:column;gap:8px}
.doc--tint .kv__i{background:var(--paper-2)}
.kv__v{font-family:var(--display);font-size:clamp(26px,2.7vw,38px);line-height:1.04;
  color:var(--bronze);letter-spacing:-.016em}
.kv__k{font-family:var(--sans);font-size:13.5px;line-height:1.45;color:var(--ink-3);max-width:22ch}

/* A concise visual explanation of the closed-loop hub, used on the overview. */
.power-loop{list-style:none;margin-top:32px;display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--rule);background:var(--rule);gap:1px}
.power-loop li{position:relative;min-height:148px;padding:20px 20px 20px 22px;background:var(--paper);display:flex;flex-direction:column;gap:7px}
.power-loop li:not(:last-child)::after{content:"→";position:absolute;right:-11px;top:50%;z-index:1;transform:translateY(-50%);width:22px;height:22px;border:1px solid var(--rule);background:var(--paper);display:grid;place-items:center;color:var(--bronze);font-family:var(--mono);font-size:13px}
.power-loop__n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--bronze)}
.power-loop strong{font-family:var(--display);font-size:23px;line-height:1.1;font-weight:400;color:var(--ink)}
.power-loop span:last-child{font-family:var(--text);font-size:14px;line-height:1.45;color:var(--ink-2);max-width:18ch}

/* ─────────────────────────────── CARD GRID ──────────────────────────────── */

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-top:32px}
.card{background:var(--paper);padding:clamp(20px,2.4vw,28px);display:flex;
  flex-direction:column;gap:9px}
.doc--tint .card{background:var(--paper-2)}
.card__n{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bronze)}
.card__h{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.22;color:var(--ink)}
.card__p{font-family:var(--text);font-size:15.5px;line-height:1.56;color:var(--ink-2)}

/* ───────────────────────────── SEVERITY CHIP ────────────────────────────── */

.sev{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--ink-2)}
.sev::before{content:"";width:9px;height:9px;flex:none}
.sev--l::before{background:#4A7C59}
.sev--m::before{background:#B5872E}
.sev--h::before{background:#A2453D}

/* ── ONWARD A chapter hands you to the next chapter. The ask appears once, at the end.  */

.onward{border-top:1px solid var(--rule);background:var(--paper)}
.reader-nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.35fr);gap:clamp(14px,2vw,26px);align-items:stretch;padding-block:clamp(24px,3.6vw,44px)}
.reader-nav--first{grid-template-columns:auto minmax(0,1.35fr);justify-content:end}
.reader-nav--final{grid-template-columns:minmax(0,1fr) auto;justify-content:start}
.reader-nav__item{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:118px;padding:20px 76px 20px 24px;border:1px solid var(--rule-2);text-decoration:none;color:var(--ink);overflow:hidden;transition:background 320ms var(--ease),color 320ms var(--ease),border-color 320ms var(--ease)}
.reader-nav__item:hover{background:var(--paper-2);border-color:var(--bronze)}
.reader-nav__item--next{background:var(--ink);border-color:var(--ink);color:var(--paper);padding-left:28px}
.reader-nav__item--next:hover{background:var(--bronze);border-color:var(--bronze);color:var(--deep)}
.reader-nav__eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--bronze);margin-bottom:8px}
.reader-nav__item--next .reader-nav__eyebrow{color:var(--brass)}
.reader-nav__title{font-family:var(--display);font-size:clamp(27px,3.2vw,44px);line-height:1;letter-spacing:-.025em}
.reader-nav__arrow{position:absolute;right:24px;top:50%;transform:translateY(-50%);font-family:var(--display);font-size:clamp(44px,5vw,70px);line-height:.8;color:var(--bronze);transition:transform 320ms var(--ease)}
.reader-nav__item--next .reader-nav__arrow{color:var(--brass)}
.reader-nav__item--previous:hover .reader-nav__arrow{transform:translate(-8px,-50%)}
.reader-nav__item--next:hover .reader-nav__arrow{transform:translate(8px,-50%)}
.reader-nav__top{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:88px;padding:12px;border:1px solid var(--rule-2);color:var(--ink);text-decoration:none;transition:background 320ms var(--ease),border-color 320ms var(--ease)}
.reader-nav__top span{font-family:var(--display);font-size:38px;line-height:.8;color:var(--bronze);transition:transform 320ms var(--ease)}
.reader-nav__top em{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-style:normal}
.reader-nav__top:hover{background:var(--paper-2);border-color:var(--bronze)}
.reader-nav__top:hover span{transform:translateY(-5px)}
/* the one invitation, at the end of the road */
.onward--invite{
  position:relative;overflow:hidden;border-top:0;
  background:
    linear-gradient(92deg,rgba(14,16,19,.72) 0%,rgba(14,16,19,.40) 52%,rgba(14,16,19,.14) 100%),
    var(--deep) url("../img/generated/invitation/invitation-concept-03-2400.jpg") center/cover no-repeat;
  /* WebP where the browser understands image-set(); others ignore this line and
     keep the JPG above. Both replace the 5.2 MB PNG (17 Oct 2026, review job 1).
     One 2400 px copy for every screen: on a phone this band is tall, so "cover"
     scales the picture up and a smaller copy would look soft. */
  background-image:
    linear-gradient(92deg,rgba(14,16,19,.72) 0%,rgba(14,16,19,.40) 52%,rgba(14,16,19,.14) 100%),
    image-set(url("../img/generated/invitation/invitation-concept-03-2400.webp") type("image/webp"),
              url("../img/generated/invitation/invitation-concept-03-2400.jpg") type("image/jpeg"));
}
.onward__in{
  position:relative;z-index:1;
  padding-block:clamp(88px,14vh,166px);
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2vh,22px);
}
.onward--invite .onward__k{color:var(--brass)}
.onward__h{
  font-family:var(--display);font-weight:400;color:var(--bone);
  font-size:clamp(32px,4.6vw,64px);line-height:1.04;letter-spacing:-.022em;
}
.onward__h em{font-style:italic;color:var(--brass)}
.onward--invite .onward__d{color:var(--bone-2);font-size:clamp(17px,1.3vw,19px);max-width:44ch}
.onward--invite .btn{background:var(--brass);border-color:var(--brass);color:var(--deep);margin-top:6px}
.onward--invite .btn:hover{background:var(--bone);border-color:var(--bone)}

/* ───────────────────────────────── REVEAL ───────────────────────────────── */

.rv{opacity:0;transform:translate3d(0,16px,0);
  transition:opacity 450ms var(--ease),transform 450ms var(--ease)}
.rv.in{opacity:1;transform:none}

/* ─────────────────────────────── RESPONSIVE ─────────────────────────────── */

@media (max-width:1080px){
  .nav{display:none}
  .masthead__in{justify-content:space-between}
}
@media (max-width:860px){
  .doc__grid{grid-template-columns:1fr;gap:18px}
  .doc__rail{position:static}
  .doc__body{border-left:0;padding-left:0}
  .chapno{font-size:clamp(56px,16vw,88px)}
  .layer{grid-template-columns:1fr;gap:20px}
  .layer__art{order:-1}
  .status__grid{grid-template-columns:1fr 1fr}
  .stat,.stat + .stat{padding:16px}
  .people{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .brand__wm{display:none}
  .status__grid{grid-template-columns:1fr}
  .people{grid-template-columns:1fr}
  .hero__acts{flex-direction:column;align-items:stretch;width:100%}
  .hero__acts .btn{width:100%}
  .steps li{grid-template-columns:1fr;gap:8px}
}

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

/* ────────────────────────── MASTHEAD END + MENU ─────────────────────────── */

.mast__end{display:flex;align-items:center;gap:12px;flex:none;margin-left:auto}

.burger{
  display:none;width:40px;height:40px;padding:0;border:1px solid var(--rule-2);
  background:transparent;cursor:pointer;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;border-radius:0;
}
.burger span{display:block;width:16px;height:1px;background:var(--ink);
  transition:transform 340ms var(--ease),opacity 240ms var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.menu{border-top:1px solid var(--rule);background:var(--paper);
  max-height:min(78svh,720px);overflow-y:auto}
.menu[hidden]{display:none}
.menu__in{max-width:var(--max);margin-inline:auto;padding:6px var(--gut) 20px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--rule)}
.menu__i{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:baseline;
  background:var(--paper);padding:18px 16px;text-decoration:none;
  transition:background 260ms var(--ease)}
.menu__i:hover{background:var(--paper-2)}
.menu__n{grid-row:span 2;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--bronze);padding-top:4px}
.menu__t{font-family:var(--display);font-size:22px;line-height:1.2;color:var(--ink)}
.menu__d{font-family:var(--text);font-size:14.5px;line-height:1.5;color:var(--ink-3)}
.menu__i.is-here .menu__t{color:var(--bronze)}

/* ───────────────────── ROUTES (overview switchboard) ────────────────────── */

.routes{list-style:none;margin-top:clamp(30px,4vw,48px);display:grid;gap:1px;background:var(--rule);
  border-block:1px solid var(--rule)}
.routes a{display:grid;grid-template-columns:auto minmax(150px,220px) 1fr;gap:4px 24px;
  align-items:baseline;background:var(--paper-2);padding:22px clamp(14px,2vw,24px);
  text-decoration:none;transition:background 300ms var(--ease)}
.routes a:hover{background:#E7E7E1}
.routes__n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--bronze)}
.routes__t{font-family:var(--display);font-size:clamp(21px,2vw,27px);line-height:1.14;color:var(--ink)}
.routes__d{font-family:var(--text);font-size:16px;line-height:1.55;color:var(--ink-2);max-width:56ch}
.routes a:hover .routes__t{color:var(--bronze)}

/* tighter negation list for the overview */
.neg--tight > div{padding:16px 0}
.neg--tight dd{font-size:16.5px;max-width:52ch}

/* a section that butts directly onto the one above it */
.doc--top0{border-top:0;padding-top:0}

/* ────────────────────── SCRUBBED FILM (architecture) ────────────────────── */

.flight{position:relative;height:600vh;z-index:1}
.stage{position:sticky;top:var(--mast);height:calc(100svh - var(--mast));
  overflow:hidden;background:var(--deep)}
.film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;background:var(--deep) center/cover no-repeat}
.flight__cap{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end}
.flight__cap .phero__in{padding-bottom:var(--hero-pad)}

.telemetry{position:absolute;z-index:4;right:var(--gut);bottom:clamp(26px,4vh,44px);
  display:flex;align-items:center;gap:13px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bone-3);
  opacity:0;transition:opacity 700ms var(--ease)}
.telemetry.is-on{opacity:1}
.telemetry__k{color:var(--brass);min-width:8ch;text-align:right}
.telemetry__bar{display:block;width:clamp(64px,8vw,120px);height:1px;background:var(--rule-d2)}
.telemetry__bar i{display:block;height:100%;width:0;background:var(--brass);transition:width 120ms linear}
.telemetry__v{font-variant-numeric:tabular-nums;min-width:3ch}

/* no film: the poster still carries the page */
body.film-still .flight{height:auto}
body.film-still .stage{position:relative;height:clamp(520px,calc(100svh - var(--mast)),980px);
  background:var(--deep) url("../img/hero_architecture.jpg") center/cover no-repeat}
body.film-still .film{opacity:0;pointer-events:none}
body.film-still .telemetry{display:none}

/* ───────────────────────────── RESPONSIVE nav ───────────────────────────── */

@media (max-width:1180px){
  .nav{display:none}
  .burger{display:flex}
  .masthead__in{justify-content:space-between}
}
@media (max-width:560px){
  .routes a{grid-template-columns:auto 1fr;gap:4px 14px}
  .routes__d{grid-column:1 / -1;margin-top:4px}
  .menu__t{font-size:20px}
  .telemetry__k{display:none}
  .hero__disc{bottom:20px;gap:8px;font-size:10px;letter-spacing:.15em}
  .hero__disc::before{width:18px}
  .power-loop{grid-template-columns:1fr 1fr}
  .power-loop li{min-height:132px;padding:18px}
  .power-loop li:nth-child(2)::after{display:none}
}

/* ──────────────────────────────── FIGURES ───────────────────────────────── */

.figw{display:flex;flex-direction:column;gap:12px;margin-top:clamp(28px,3.6vw,44px)}
.figw img{width:100%;height:auto;border:1px solid var(--rule);background:var(--paper-2)}
.figw figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.6}
.doc--dark .figw img{border-color:var(--rule-d);background:var(--deep-2)}
.doc--dark .figw figcaption{color:var(--bone-3)}

/* full-bleed figure that breaks the reading column */
.figw--wide{margin-top:clamp(34px,5vw,60px)}
.figw--wide img{max-height:none}

/* ── before / after, stated plainly no slider, no implied same-place trickery  */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:clamp(28px,3.6vw,44px)}
.pair figure{background:var(--paper);display:flex;flex-direction:column}
.doc--tint .pair figure{background:var(--paper-2)}
.pair img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pair figcaption{padding:14px 16px;display:flex;flex-direction:column;gap:5px}
.pair .pair__k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bronze)}
.pair .pair__t{font-family:var(--text);font-size:15.5px;line-height:1.5;color:var(--ink-2)}

@media (max-width:640px){ .pair{grid-template-columns:1fr} }


/* ── FEATURE BAND Was a near-black slab. Now a heavier paper stock with a faint grain, so the step from the reading ground is a change of stock rather than of lighting.  */

.doc--feature{
  background:var(--stone);
  position:relative;
  border-top:1px solid var(--stone-rule);
  border-bottom:1px solid var(--stone-rule);
}
.doc--feature::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.35'/></svg>");
  mix-blend-mode:multiply;
}
.doc--feature > *{position:relative;z-index:1}

/* everything that was written for a dark ground now reads as ink on stone */
.doc--feature .h2--onDark,
.doc--feature .neg dt,
.doc--feature .steps h3{color:var(--ink)}
.doc--feature .h2--onDark em{color:var(--bronze)}
.doc--feature .lead--onDark,
.doc--feature .doc__body p,
.doc--feature .neg dd,
.doc--feature .steps p{color:var(--ink-2)}
.doc--feature .chapno--onDark,
.doc--feature .eyebrow--onDark,
.doc--feature .steps__n{color:var(--bronze)}
.doc--feature .neg > div,
.doc--feature .steps li{border-top-color:var(--stone-rule)}
.doc--feature .neg > div:last-child,
.doc--feature .steps li:last-child{border-bottom-color:var(--stone-rule)}
.doc--feature .pull{border-left-color:var(--bronze)}
.doc--feature .pull p{color:var(--ink) !important}
.doc--feature .pull cite{color:var(--ink-3)}
.doc--feature .btn{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.doc--feature .btn:hover{background:var(--bronze);border-color:var(--bronze)}
.doc--feature .engage__note{color:var(--ink-3) !important}
.doc--feature .fnote{color:var(--ink-3);border-top-color:var(--stone-rule)}
.doc--feature .tw{background:#EFEDE4;border-color:var(--stone-rule)}
.doc--feature .tbl thead th{background:#DFDCD2}
.doc--feature .tbl th,.doc--feature .tbl td{border-bottom-color:var(--stone-rule)}

/* ── THE RAIL The left column used to hold a heading and then nothing for the rest of the section. The chapter number now fills it, set large and pale like a folio in a printed report, and a hairline separates the two columns.  */

.chapno{
  font-family:var(--display);
  font-size:clamp(64px,8.5vw,124px);
  line-height:.82;
  letter-spacing:-.045em;
  color:rgba(21,23,27,.11);
  margin-bottom:10px;
  font-weight:400;
  text-transform:none;
}
.doc--feature .chapno{color:rgba(21,23,27,.13)}
.chapno--onDark{color:rgba(242,241,236,.13)}

.doc__body{
  border-left:1px solid var(--rule);
  padding-left:clamp(26px,3.6vw,60px);
}
.doc--feature .doc__body{border-left-color:var(--stone-rule)}

/* Preview-only mobile composition: the wide film becomes a deliberate static hero on phones. */
@media (max-width:767px){
  .flight{height:auto}
  .flight .stage{
    position:relative;top:auto;height:clamp(620px,calc(100svh - var(--mast)),760px);
    background:var(--deep) url("../img/hero_architecture.jpg") 54% center/cover no-repeat;
  }
  .flight .film{display:none}
  .flight__cap .phero__in{padding-bottom:clamp(34px,7vh,58px)}
  .flight__cap .phero__h{font-size:clamp(38px,10.5vw,52px);max-width:12ch}
  .flight__cap .phero__d{max-width:31ch}
  .flight .telemetry,.flight .hero__disc{display:none}
}
/* Mobile homepage: preserve the full 16:9 moving scene, then let the copy read
   on its own panel. This avoids a tall-screen crop without sacrificing motion. */
@media (max-width:767px){
  .hero{min-height:0;display:block;background:var(--deep)}
  .hero__media{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16 / 9;
    border-bottom:1px solid var(--rule-d)}
  .hero__img,.hero__video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hero__scrim{display:none}
  .hero__in{position:relative;z-index:3;max-width:none;padding:clamp(34px,8vw,46px) var(--gut) clamp(46px,10vw,70px);
    background:linear-gradient(180deg,var(--deep-2) 0%,var(--deep) 100%)}
  .hero__h{font-size:clamp(38px,10.5vw,52px);max-width:12ch}
  .hero__d{max-width:31ch}
  .hero__acts{width:100%;margin-top:8px}
  .hero__acts .btn{width:100%}
  body.film-still .flight{height:auto}
  body.film-still .stage{
    position:relative;top:auto;height:auto;min-height:0;display:flex;flex-direction:column;
    overflow:visible;background:var(--deep)
  }
  body.film-still .stage::before{
    content:"";display:block;flex:none;width:100%;aspect-ratio:16 / 9;
    background:var(--deep) url("../img/hero_architecture.jpg") center/contain no-repeat;
    border-bottom:1px solid var(--rule-d)
  }
  body.film-still .film{display:none}
  body.film-still .phero__scrim{display:none}
  body.film-still .flight__cap{
    position:relative;inset:auto;display:block;background:linear-gradient(180deg,var(--deep) 0%,var(--deep-2) 100%)
  }
  body.film-still .flight__cap .phero__in{
    padding:clamp(38px,8vw,58px) var(--gut) clamp(46px,10vw,72px)
  }
  body.film-still .flight__cap .phero__h{font-size:clamp(38px,10.5vw,52px);max-width:12ch}
  body.film-still .flight__cap .phero__d{max-width:31ch}
  body.film-still .telemetry,body.film-still .hero__disc{display:none}
}
/* Compact on-page route for long reading pages. */
.chapter-nav{
  position:sticky;top:var(--mast);z-index:8;
  background:rgba(250,250,247,.94);border-bottom:1px solid var(--rule);
  backdrop-filter:blur(12px);
}
.chapter-nav__in{display:flex;align-items:center;gap:clamp(18px,3vw,42px);min-height:46px;overflow:auto}
.chapter-nav__label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.chapter-nav__links{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);min-width:max-content}
.chapter-nav__a{font-family:var(--sans);font-size:13px;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:color 220ms var(--ease)}
.chapter-nav__a span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--bronze);margin-right:7px}
.chapter-nav__a:hover{color:var(--ink)}
.doc[id]{scroll-margin-top:calc(var(--mast) + 54px)}




/* Capital section 03: disclose the present boundary clearly; do not simulate unavailable terms. */
.capital-boundary{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:clamp(30px,4vw,48px);border:1px solid var(--stone-rule);background:var(--stone-rule)}
.capital-boundary > div{padding:clamp(24px,3vw,38px);background:rgba(255,255,255,.30)}
.capital-boundary__later{background:rgba(255,255,255,.52) !important}
.capital-boundary p{margin:0 0 18px !important;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze) !important}
.capital-boundary h3{margin:0 0 12px;font-family:var(--display);font-size:clamp(26px,2.5vw,38px);font-weight:400;line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
.capital-boundary span,.capital-boundary__note{font-family:var(--text);font-size:17px;line-height:1.6;color:var(--ink-2)}
.capital-boundary__note{max-width:56ch;margin-top:24px !important}
/* FINAL RHYTHM PASS: compact reading transitions without reducing the content. */
.onward--invite .onward__in{padding-block:clamp(72px,10vh,120px)}

@media (max-width:767px){
  /* Inner-page titles remain cinematic, but no longer consume a whole phone screen. */
  .phero{min-height:clamp(440px,72svh,560px)}
  .phero__in{padding-bottom:clamp(34px,7vh,58px)}
  /* The chapter hand-off and final invitation now feel like a close, not another chapter. */
  .reader-nav,.reader-nav--first,.reader-nav--final{grid-template-columns:1fr auto;gap:10px;padding-block:20px}
  .reader-nav__item{min-height:94px;padding:17px 62px 17px 18px}
  .reader-nav__item--next{grid-column:1 / -1;grid-row:1;padding-left:20px}
  .reader-nav__item--previous{grid-column:1;grid-row:2}
  .reader-nav__top{grid-column:2;grid-row:2;min-width:76px}
  .reader-nav--first .reader-nav__item--next{grid-row:1}
  .reader-nav--first .reader-nav__top{grid-column:2;grid-row:2}
  .reader-nav--final .reader-nav__item--previous{grid-column:1;grid-row:1}
  .reader-nav--final .reader-nav__top{grid-column:2;grid-row:1}
  .reader-nav__title{font-size:clamp(28px,8vw,38px)}
  .reader-nav__arrow{right:18px;font-size:46px}
  .capital-boundary{grid-template-columns:1fr}
  .onward--invite .onward__in{padding-block:clamp(58px,9vh,86px)}
  .onward__h{font-size:clamp(30px,9vw,44px)}
}
/* LIVE CONTACT PANEL */
.contact-dialog{width:min(560px,calc(100% - 32px));margin:auto;border:1px solid var(--rule-2);padding:0;background:var(--paper);color:var(--ink);box-shadow:0 28px 90px rgba(0,0,0,.34)}
.contact-dialog::backdrop{background:rgba(10,13,17,.70);backdrop-filter:blur(5px)}
.contact-dialog__in{position:relative;padding:clamp(30px,5vw,52px)}
.contact-dialog__close{position:absolute;right:16px;top:14px;width:38px;height:38px;border:0;background:transparent;color:var(--ink-2);font:300 32px/1 var(--display);cursor:pointer}
.contact-dialog__close:hover{color:var(--bronze)}
.contact-dialog__k{font:500 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);margin-bottom:18px}
.contact-dialog__h{font:400 clamp(32px,4.2vw,48px)/1.04 var(--display);letter-spacing:-.025em;color:var(--ink)}
.contact-dialog__h em{font-style:italic;color:var(--bronze)}
.contact-dialog__d{margin-top:18px;max-width:42ch;font:17px/1.58 var(--text);color:var(--ink-2)}
.contact-dialog__routes{display:grid;gap:1px;margin-top:28px;border:1px solid var(--rule);background:var(--rule)}
.contact-route{display:flex;flex-direction:column;gap:5px;padding:18px 20px;background:var(--paper);text-decoration:none;transition:background 220ms var(--ease)}
.contact-route:hover{background:var(--paper-2)}
.contact-route span{font:500 10px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.contact-route strong{font:500 clamp(17px,2.1vw,21px)/1.2 var(--sans);color:var(--ink)}
@media (max-width:560px){.contact-dialog{width:calc(100% - 24px)}.contact-dialog__in{padding:30px 24px}.contact-route{padding:16px}.contact-route strong{font-size:16px}}
/* QQ CLOSED LOOP */
.qq-loop{margin-top:clamp(32px,4.5vw,56px);padding:clamp(24px,4vw,50px);position:relative;overflow:hidden;background:radial-gradient(circle at 50% 44%,#1A2028 0%,var(--deep-2) 42%,var(--deep) 100%);border:1px solid var(--rule-d);color:var(--bone)}
.qq-loop::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(210,176,107,.09),transparent 30%,transparent 72%,rgba(210,176,107,.05));}
.qq-loop > *{position:relative;z-index:1}
.qq-loop__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:28px;align-items:end}
.qq-loop__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:16px}
.qq-loop__h{font-family:var(--display);font-weight:400;font-size:clamp(30px,4vw,52px);line-height:1.02;letter-spacing:-.027em;color:var(--bone)}
.qq-loop__h em{font-style:italic;color:var(--brass)}
.qq-loop__intro{font-family:var(--text);font-size:clamp(16px,1.25vw,18px);line-height:1.58;color:var(--bone-2);max-width:37ch}
.qq-loop__stagebar{display:flex;flex-wrap:wrap;gap:1px;margin-top:clamp(28px,4vw,46px);border:1px solid var(--rule-d);background:var(--rule-d)}
.qq-loop__stage{appearance:none;border:0;background:var(--deep);color:var(--bone-3);padding:13px 15px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background 220ms var(--ease),color 220ms var(--ease);flex:1 1 120px;text-align:left}
.qq-loop__stage span{color:var(--brass);margin-right:8px}
.qq-loop__stage:hover,.qq-loop__stage.is-active{background:rgba(210,176,107,.12);color:var(--bone)}
.qq-loop__body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(230px,.5fr);gap:clamp(22px,4vw,52px);align-items:center;margin-top:clamp(24px,3.5vw,44px)}
.qq-loop__svg{display:block;width:100%;height:auto;overflow:visible}
.qq-loop__orbit{fill:none;stroke:rgba(242,241,236,.17);stroke-width:1.2}
.qq-loop__segment{fill:none;stroke:rgba(242,241,236,.20);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:3 10;transition:stroke 350ms var(--ease),stroke-width 350ms var(--ease);animation:qq-loop-flow 6s linear infinite}
.qq-loop__segment.is-active{stroke:var(--brass);stroke-width:3.5;filter:drop-shadow(0 0 7px rgba(210,176,107,.42))}
.qq-loop__particle{fill:var(--brass)}
.qq-loop__center-ring{fill:none;stroke:rgba(210,176,107,.5);stroke-width:1.3}
.qq-loop__center-word{font-family:var(--display);font-size:48px;letter-spacing:-.07em;fill:var(--bone)}
.qq-loop__center-sub{font-family:var(--mono);font-size:9px;letter-spacing:.19em;fill:var(--bone-3)}
.qq-loop__node{transition:opacity 280ms var(--ease);opacity:.78}
.qq-loop__node.is-active{opacity:1}
.qq-loop__node-disc{fill:#11171E;stroke:rgba(242,241,236,.26);stroke-width:1.5;transition:fill 280ms var(--ease),stroke 280ms var(--ease)}
.qq-loop__node.is-active .qq-loop__node-disc{fill:#242B32;stroke:var(--brass);stroke-width:2.5;filter:drop-shadow(0 0 10px rgba(210,176,107,.24))}
.qq-loop__icon{fill:none;stroke:var(--bone-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.qq-loop__node-n{font-family:var(--mono);font-size:9px;letter-spacing:.15em;fill:var(--brass)}
.qq-loop__node-t{font-family:var(--text);font-size:15px;fill:var(--bone)}
.qq-loop__detail{border-left:1px solid rgba(210,176,107,.55);padding-left:clamp(18px,2.5vw,28px);min-height:188px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.qq-loop__detail-n{font-family:var(--mono);font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--brass);margin-bottom:12px}
.qq-loop__detail-h{font-family:var(--display);font-size:clamp(25px,2.9vw,37px);line-height:1.06;font-weight:400;letter-spacing:-.02em;color:var(--bone)}
.qq-loop__detail-p{font-family:var(--text);font-size:17px;line-height:1.58;color:var(--bone-2);margin-top:14px;max-width:30ch}
.qq-loop__detail-note{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-3);margin-top:22px;line-height:1.5}
@keyframes qq-loop-flow{to{stroke-dashoffset:-52}}
@media (max-width:760px){.qq-loop{margin-inline:calc(var(--gut) * -1);padding:30px var(--gut)}.qq-loop__head,.qq-loop__body{grid-template-columns:1fr}.qq-loop__svg{width:calc(100% + 12px);margin-left:-6px}.qq-loop__detail{min-height:0;border-left:0;border-top:1px solid rgba(210,176,107,.55);padding:22px 0 0}.qq-loop__stage{flex-basis:calc(50% - 1px)}}
@media (max-width:440px){.qq-loop__stage{flex-basis:100%}.qq-loop__node-t{font-size:13px}.qq-loop__node-n{font-size:8px}}
@media (prefers-reduced-motion:reduce){.qq-loop__segment{animation:none}.qq-loop__motion{display:none}.qq-loop__node,.qq-loop__segment{transition:none}}
/* QQ CLOSED LOOP LANDSCAPE PASS */
.qq-loop-band{background:var(--deep);border-top:1px solid var(--rule-d);border-bottom:1px solid var(--rule-d);padding-block:clamp(26px,4vw,52px)}
.qq-loop-band .qq-loop{margin:0;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(270px,.64fr);grid-template-areas:"visual head" "visual detail" "visual stages";gap:18px clamp(28px,4vw,56px);padding:clamp(24px,3.2vw,42px);min-height:0}
.qq-loop-band .qq-loop__head{grid-area:head;display:block}
.qq-loop-band .qq-loop__k{margin-bottom:12px}
.qq-loop-band .qq-loop__h{font-size:clamp(30px,3.4vw,47px)}
.qq-loop-band .qq-loop__intro{margin-top:16px}
.qq-loop-band .qq-loop__body{display:contents}
.qq-loop-band .qq-loop__svg{grid-area:visual;align-self:center;width:100%;max-height:430px}
.qq-loop-band .qq-loop__detail{grid-area:detail;align-self:start;min-height:0;padding-left:20px;padding-top:2px}
.qq-loop-band .qq-loop__detail-p{font-size:16.5px}
.qq-loop-band .qq-loop__detail-note{margin-top:16px}
.qq-loop-band .qq-loop__stagebar{grid-area:stages;display:grid;grid-template-columns:1fr;gap:1px;margin:0}
.qq-loop-band .qq-loop__stage{padding:10px 12px;min-height:40px;flex:auto}
@media (max-width:900px){.qq-loop-band .qq-loop{grid-template-columns:minmax(0,1.25fr) minmax(230px,.75fr);gap:18px 28px}.qq-loop-band .qq-loop__svg{max-height:365px}.qq-loop-band .qq-loop__h{font-size:34px}.qq-loop-band .qq-loop__intro{font-size:16px}.qq-loop-band .qq-loop__detail-h{font-size:29px}}
@media (max-width:760px){.qq-loop-band{padding-block:0}.qq-loop-band .wrap{padding:0}.qq-loop-band .qq-loop{margin:0;grid-template-columns:1fr;grid-template-areas:"head" "stages" "visual" "detail";padding:30px var(--gut);gap:24px}.qq-loop-band .qq-loop__stagebar{grid-template-columns:repeat(2,minmax(0,1fr))}.qq-loop-band .qq-loop__stage{min-height:44px}.qq-loop-band .qq-loop__svg{width:calc(100% + 10px);margin-left:-5px;max-height:none}.qq-loop-band .qq-loop__detail{padding:22px 0 0;border-left:0;border-top:1px solid rgba(210,176,107,.55)}}
@media (max-width:440px){.qq-loop-band .qq-loop__stagebar{grid-template-columns:1fr}.qq-loop-band .qq-loop__stage{padding:11px 12px}}
/* QQ CLOSED LOOP REFINED */
.qq-loop-band .qq-loop{grid-template-columns:minmax(0,1.48fr) minmax(275px,.72fr);grid-template-areas:"visual head" "visual detail" "stages stages";gap:18px clamp(30px,4vw,58px);padding:clamp(24px,3vw,38px)}
.qq-loop-band .qq-loop__svg{max-height:418px}
.qq-loop-band .qq-loop__head{align-self:end}
.qq-loop-band .qq-loop__h{font-size:clamp(30px,3.25vw,45px)}
.qq-loop-band .qq-loop__intro{max-width:34ch}
.qq-loop-band .qq-loop__detail{align-self:start;padding-left:22px;padding-top:0}
.qq-loop-band .qq-loop__detail-h{font-size:clamp(26px,2.45vw,34px)}
.qq-loop-band .qq-loop__detail-p{max-width:31ch}
.qq-loop-band .qq-loop__stagebar{grid-template-columns:repeat(4,minmax(0,1fr));border-color:rgba(242,241,236,.2)}
.qq-loop-band .qq-loop__stage{min-height:46px;padding:12px 14px;text-align:center}
.qq-loop__sun-ray{fill:none;stroke:rgba(232,194,110,.35);stroke-width:1.2;filter:drop-shadow(0 0 7px rgba(232,194,110,.38))}
.qq-loop__sun{fill:url(#qq-loop-sun);filter:drop-shadow(0 0 10px rgba(232,194,110,.5))}
.qq-loop__sun-mark{fill:none;stroke:#FFF2C3;stroke-width:1.1;stroke-linecap:round;opacity:.9}
.qq-loop__battery-side{fill:#313C46;stroke:#9FA8AD;stroke-width:1}
.qq-loop__battery-face{fill:url(#qq-loop-battery);stroke:#D0D3C9;stroke-width:1}
.qq-loop__battery-line{fill:none;stroke:#111820;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.qq-loop__rack-side{fill:#111920;stroke:#697681;stroke-width:1}
.qq-loop__rack-face{fill:url(#qq-loop-compute);stroke:#9BA6AA;stroke-width:1}
.qq-loop__rack-line{fill:none;stroke:#D2B06B;stroke-width:1.25;stroke-linecap:round}
.qq-loop__capital-back{fill:#4F3B1B;stroke:#D2B06B;stroke-width:1}
.qq-loop__capital-face{fill:url(#qq-loop-capital);stroke:#F0D695;stroke-width:1}
.qq-loop__capital-line{fill:none;stroke:#4B3512;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.qq-loop__float{transform-box:fill-box;transform-origin:center;animation:qq-loop-float 5.6s ease-in-out infinite}
.qq-loop__float--battery{animation-delay:-1.4s}.qq-loop__float--compute{animation-delay:-2.8s}.qq-loop__float--capital{animation-delay:-4.2s}
@keyframes qq-loop-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (max-width:900px){.qq-loop-band .qq-loop{grid-template-columns:minmax(0,1.18fr) minmax(235px,.82fr);gap:16px 28px}.qq-loop-band .qq-loop__svg{max-height:350px}.qq-loop-band .qq-loop__stage{padding:11px 8px;font-size:9px}}
@media (max-width:760px){.qq-loop-band .qq-loop{grid-template-areas:"head" "stages" "visual" "detail"}.qq-loop-band .qq-loop__stagebar{grid-template-columns:repeat(2,minmax(0,1fr))}.qq-loop-band .qq-loop__stage{text-align:left;font-size:10px}.qq-loop-band .qq-loop__svg{max-height:none}}
@media (prefers-reduced-motion:reduce){.qq-loop__float{animation:none}}
/* QQ CLOSED LOOP TONAL BALANCE */
.qq-loop-band{background:linear-gradient(180deg,var(--paper-2) 0%,var(--stone) 50%,var(--paper-2) 100%);border-top-color:var(--stone-rule);border-bottom-color:var(--stone-rule);padding-block:clamp(30px,4.5vw,58px)}
.qq-loop-band .qq-loop{border-color:rgba(210,176,107,.38);box-shadow:0 20px 54px rgba(21,23,27,.16)}
@media (max-width:760px){.qq-loop-band{padding-block:14px}.qq-loop-band .wrap{padding-inline:var(--gut)}.qq-loop-band .qq-loop{border-color:rgba(210,176,107,.32)}}
/* QQ CLOSED LOOP FINAL DETAIL PASS */
.qq-loop-band{position:relative;isolation:isolate}
.qq-loop-band::before,.qq-loop-band::after{content:"";position:absolute;left:50%;width:min(76vw,980px);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(121,102,73,.28),transparent)}
.qq-loop-band::before{top:0}.qq-loop-band::after{bottom:0}
.qq-loop-band .qq-loop{transition:transform 280ms var(--ease),box-shadow 280ms var(--ease)}
.qq-loop-band .qq-loop__stage{position:relative;overflow:hidden;transition:transform 220ms var(--ease),background 220ms var(--ease),color 220ms var(--ease),box-shadow 220ms var(--ease)}
.qq-loop-band .qq-loop__stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,rgba(255,255,255,.08),transparent 28%,transparent 72%,rgba(210,176,107,.11));opacity:0;transition:opacity 220ms var(--ease)}
.qq-loop-band .qq-loop__stage:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.20)}
.qq-loop-band .qq-loop__stage:hover::after,.qq-loop-band .qq-loop__stage.is-active::after{opacity:1}
.qq-loop-band .qq-loop__stage:focus-visible{outline:1px solid var(--brass);outline-offset:-3px}
@media (max-width:760px){
  .qq-loop-band{padding-block:10px}
  .qq-loop-band .qq-loop{gap:20px;padding-block:26px}
  .qq-loop-band .qq-loop__head{margin-bottom:-2px}
  .qq-loop-band .qq-loop__stage:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){.qq-loop-band .qq-loop,.qq-loop-band .qq-loop__stage,.qq-loop-band .qq-loop__stage::after{transition:none}.qq-loop-band .qq-loop__stage:hover{transform:none}}
/* OVERVIEW LEADERSHIP SLATE */
.leadership{display:grid;grid-template-columns:minmax(300px,.82fr) minmax(0,1.68fr);gap:1px;margin-top:clamp(38px,5vw,64px);background:var(--rule);border:1px solid var(--rule)}
.leadership__feature{display:flex;flex-direction:column;background:var(--deep);color:var(--bone);min-width:0}
.leadership__team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule)}
.leadership__card{display:flex;flex-direction:column;min-width:0;background:var(--paper)}
.leadership__media{position:relative;overflow:hidden;aspect-ratio:1.48/1;background:var(--stone)}
.leadership__media--founder{aspect-ratio:1/1.1}
.leadership__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(155deg,rgba(210,176,107,.12),transparent 30%,transparent 72%,rgba(10,13,17,.16));mix-blend-mode:soft-light}
.leadership__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 18%;filter:saturate(.92) contrast(1.03);transition:transform 700ms var(--ease),filter 500ms var(--ease)}
.leadership__feature .leadership__media img{object-position:center 16%}
.leadership__card:hover .leadership__media img,.leadership__feature:hover .leadership__media img{transform:scale(1.035);filter:saturate(1) contrast(1.05)}
.leadership__copy,.leadership__feature-copy{padding:clamp(18px,2.2vw,29px)}
.leadership__feature-copy{display:flex;flex:1;flex-direction:column;padding:clamp(24px,3vw,38px)}
.leadership__role{font-family:var(--mono);font-size:9.5px;line-height:1.45;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze);min-height:calc(2 * 1.45em)}
.leadership__feature .leadership__role{color:var(--brass);min-height:0}
.leadership__name{margin-top:10px;font-family:var(--display);font-size:clamp(25px,2.25vw,34px);font-weight:400;line-height:.98;letter-spacing:-.03em;color:var(--ink)}
.leadership__feature .leadership__name{font-size:clamp(34px,3.25vw,52px);color:var(--bone)}
.leadership__bio{margin-top:13px;font-family:var(--text);font-size:15px;line-height:1.53;color:var(--ink-2)}
.leadership__feature .leadership__bio{margin-top:auto;padding-top:22px;color:var(--bone-2);font-size:16px;line-height:1.58}
@media (max-width:900px){.leadership{grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr)}.leadership__copy{padding:18px}.leadership__role{font-size:8.8px}.leadership__bio{font-size:14.5px}.leadership__feature-copy{padding:24px}.leadership__feature .leadership__bio{font-size:15px}}
@media (max-width:760px){.leadership{grid-template-columns:1fr}.leadership__media--founder{aspect-ratio:4/3}.leadership__feature-copy{padding:28px var(--gut) 30px}.leadership__feature .leadership__bio{margin-top:18px;padding-top:0}.leadership__team{grid-template-columns:repeat(2,minmax(0,1fr))}.leadership__media{aspect-ratio:1/1.06}.leadership__copy{padding:18px}.leadership__name{font-size:26px}.leadership__bio{font-size:14px;line-height:1.5}}
@media (max-width:440px){.leadership__team{grid-template-columns:1fr}.leadership__media{aspect-ratio:4/3}.leadership__copy{padding:20px}.leadership__role{min-height:0}.leadership__name{font-size:28px}.leadership__bio{font-size:15px}}
@media (prefers-reduced-motion:reduce){.leadership__media img{transition:none}.leadership__card:hover .leadership__media img,.leadership__feature:hover .leadership__media img{transform:none}}
/* Energy design row: three cards under the leadership grid. Its columns copy the grid above, so each card sits under the column above it. */
.leadership__energy{grid-column:1/-1;display:grid;grid-template-columns:minmax(300px,.82fr) repeat(2,minmax(0,.84fr));gap:1px;background:var(--rule)}
.leadership__kicker{grid-column:1/-1;margin:0;padding:15px clamp(18px,2.2vw,29px);background:var(--paper);font-family:var(--mono);font-size:9.5px;line-height:1.45;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze)}
@media (max-width:900px){.leadership__energy{grid-template-columns:minmax(260px,.78fr) repeat(2,minmax(0,.61fr))}}
@media (max-width:760px){.leadership__energy{grid-template-columns:1fr}}

/* ═══════════════ MOBILE FIX: qq-loop-band collapse ═══════════════
   The closed-loop graphic (architecture.html) has FOUR separate rule blocks
   that all set grid-template-columns on .qq-loop-band .qq-loop, at three
   different breakpoints (unscoped, max-width:900px, max-width:760px x2),
   layered in by several "refined"/"pass" edits over time without removing
   what came before. Because 375px satisfies every one of those max-width
   conditions at once, the LAST one physically written in the file always
   wins for that property -- and the last one anyone had written happened to
   be the max-width:900px block, a 2-column layout never meant for a phone.
   Net effect: the intro paragraph and the stage-detail text were squeezed
   into a track as narrow as ~235px and wrapped one word per line.

   Proven the hard way: an earlier attempt to fix this was placed a few
   hundred lines earlier in the file and was itself silently overridden by a
   rule below it, for the exact same reason. This rule is deliberately kept
   at the true end of the file so nothing can ever again land after it and
   re-break this. If more qq-loop-band CSS is added later, it must go above
   this comment, not below it. */
@media (max-width:760px){
  .qq-loop-band .qq-loop{
    grid-template-columns:1fr !important;
    grid-template-areas:"head" "stages" "visual" "detail" !important;
  }
  .qq-loop-band .qq-loop__stagebar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qq-loop-band .qq-loop__intro{max-width:none}
  .qq-loop-band .qq-loop__detail-p{max-width:none}
}
@media (max-width:440px){
  .qq-loop-band .qq-loop__stagebar{grid-template-columns:1fr}
}

/* ═══════════════ MOBILE FIX: qq-loop-band diagram text ═══════════════
   The circle diagram is one SVG, sized by its viewBox (940 x 540). On a
   phone the fix above forces it to sit in a single narrow column, so the
   whole SVG -- picture and writing together -- gets scaled down to roughly
   31% of its drawn size (measured live: a 375px phone renders it about
   295px wide). All the little labels inside it ("Solar field", "01 /
   GENERATE", the "QQ" wordmark) are sized in that same SVG scale, so they
   shrink by the same 31% -- proven by measuring the real, on-screen text:
   the node labels came out 5px tall. Not "small". Unreadable.

   Font sizes below are set high enough in the SVG's own units to still
   read as ordinary small print once that ~31% shrink is applied. This
   only touches text/number sizes, not the icons or circles, and only
   inside .qq-loop-band, so the diagram elsewhere on the site is untouched.
   Keep this below the block above, for the same reason that one gives. */
@media (max-width:760px){
  .qq-loop-band .qq-loop__node-t{font-size:26px}
  .qq-loop-band .qq-loop__node-n{font-size:17px}
  .qq-loop-band .qq-loop__center-word{font-size:50px}
  .qq-loop-band .qq-loop__center-sub{font-size:15px}
}

/* ═══════════════ MOBILE FIX: qq-loop-band "Solar field" overlap ═══════
   Bigger label text (fix above) needs more room than the drawing was
   built with. The "Solar field" label sits closest to the centre circle
   of the four, so it's the one that touches -- measured live, a 12px
   overlap between that label and the centre ring.

   Fix: shrink the centre circle a little, on mobile only. That moves its
   edge away from all four labels equally (this one just needed it most).
   Not a font change -- these two circles are actual SVG shapes, and
   modern CSS can resize an SVG shape's radius the same way it resizes
   anything else. The "QQ" wordmark inside still fits with room to spare
   at this smaller radius (checked against its own real height).
   Desktop, and every other use of this diagram, is untouched -- this
   only applies inside .qq-loop-band below 760px. */
@media (max-width:760px){
  .qq-loop-band .qq-loop__center circle:first-child{r:64px}
  .qq-loop-band .qq-loop__center-ring{r:63px}
}
/* Caption-to-label gap on the four nodes (18 Oct 2026). At the bigger
   phone sizes above, "04 / CAPITAL" sat ~3px into "Asset discipline".
   CSS `y` does not move SVG text in Chrome (see the handover log), but
   CSS `transform` does. Caption up a little, label down a little.
   Measured at 375px wide: ink gap 0px before, about 4px after. */
@media (max-width:760px){
  .qq-loop-band .qq-loop__node-n{transform:translateY(-5px)}
  .qq-loop-band .qq-loop__node-t{transform:translateY(7px)}
}
/* ── Readability layer · 17 Oct 2026 ────────────────────────────────────
   Two rules, applied site-wide:
   1. No reading text under 12px (labels were 8.8-11.5px).
   2. Small text on the light grounds (paper, paper-2, stone) meets the
      4.5:1 contrast rule. Two darker text-only tones do this; the brand
      bronze and grey stay as they are for lines, hovers and large type.
   Text on the dark grounds already passed and keeps its brass/bone colour.
   The big faint chapter numbers and the footer wordmark are decoration
   and stay as designed. */
:root{--bronze-text:#6F5220;--ink-3-text:#545961}

.nav__i,.mast__end .btn,.eyebrow,.status__asat,.stat__k,
.pull cite,.figw figcaption,.tbl__cap,.tbl thead th,
.power-loop__n,.routes__n,.pair .pair__k,.chapter-nav__label,.chapter-nav__a span,
.reader-nav__eyebrow,.reader-nav__top em,
.foot__k,.foot__n,.foot__cta,.foot__base,
.leadership__role,.leadership__kicker,
.telemetry__k,.telemetry__v,.hero__disc,
.qq-loop__k,.qq-loop__detail-n,.qq-loop__detail-note{font-size:12px}
.capital-boundary p{font-size:12px !important}

.nav__i{color:var(--ink-3-text)}
.nav__i.is-here{color:var(--bronze-text);border-bottom-color:var(--bronze-text)}
.power-loop__n,.routes__n,.pair .pair__k,.chapter-nav__a span,
.reader-nav__eyebrow,.foot__k,.foot__cta,
.leadership__copy .leadership__role,.leadership__kicker,
.doc--feature .steps__n{color:var(--bronze-text)}
.reader-nav__item--next .reader-nav__eyebrow{color:var(--brass)}
.reader-nav__item--next:hover .reader-nav__eyebrow{color:var(--deep)}
.capital-boundary p{color:var(--bronze-text) !important}
.pull cite,.figw figcaption,.tbl__cap,.tbl thead th,.chapter-nav__label,
.foot__n,.foot__line,.foot__legal p,.foot__base,
.doc--feature .pull cite{color:var(--ink-3-text)}
.doc--feature .engage__note{color:var(--ink-3-text) !important}
.foot__a:hover .foot__n,.foot__a.is-here .foot__n{color:var(--bronze-text)}
.doc--dark .pull cite,.doc--dark .figw figcaption{color:var(--bone-3)}

/* "Artist's impression" tag on every hero picture (17 Oct 2026).
   The hero pictures are made images, not photographs; this says so. */
.hero__note{position:absolute;z-index:3;right:var(--gut);top:16px;margin:0;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:#F6F4ED;background:rgba(10,13,17,.62);padding:5px 9px;border-radius:2px;pointer-events:none}
/* The four stage tabs of the operating-architecture diagram (were 9-10px). */
.qq-loop .qq-loop__stage,.qq-loop-band .qq-loop__stage{font-size:12px}

/* ── SITE VISIT · real photographs, Kuala Selangor, 2 Oct 2026 ──
   The "Photograph" tag is the opposite of .hero__note: this one is real. */
.photo-tag{position:absolute;z-index:2;left:10px;top:10px;margin:0;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:#F6F4ED;background:rgba(10,13,17,.66);padding:5px 9px;border-radius:2px;pointer-events:none}

.visit{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px);margin-top:clamp(30px,4vw,52px)}
.visit figure{margin:0}
.visit__pano{position:relative}
.visit__a{display:block;overflow:hidden;background:var(--paper-2)}
.visit__a img{display:block;width:100%;height:auto;transition:transform .5s var(--ease)}
.visit__a:hover img{transform:scale(1.025)}
.visit__a:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.visit figcaption{font-family:var(--sans);font-size:14px;line-height:1.45;color:var(--ink-2);margin-top:9px}
.visit__k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bronze-text);padding-top:16px;border-top:1px solid var(--rule)}
.visit__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);margin-top:-8px}
@media (max-width:900px){.visit__row{grid-template-columns:repeat(2,minmax(0,1fr))}}

.lightbox{width:min(1180px,calc(100% - 24px));max-height:calc(100% - 24px);margin:auto;border:0;
  padding:0;background:var(--deep);color:var(--bone);box-shadow:0 28px 90px rgba(0,0,0,.5)}
.lightbox::backdrop{background:rgba(10,13,17,.88)}
.lightbox__in{position:relative;margin:0}
.lightbox__img{display:block;width:100%;height:auto;max-height:calc(100vh - 96px);object-fit:contain;background:var(--deep)}
.lightbox__cap{margin:0;padding:13px 16px 15px;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--bone-2)}
.lightbox__close,.lightbox__nav{position:absolute;width:44px;height:44px;display:grid;place-items:center;
  border:0;border-radius:2px;background:rgba(10,13,17,.66);color:#F6F4ED;font-size:22px;line-height:1;cursor:pointer}
.lightbox__close{top:8px;right:8px;font-size:28px}
.lightbox__nav{top:calc(50% - 44px)}
.lightbox__nav--prev{left:8px}
.lightbox__nav--next{right:8px}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(10,13,17,.9)}
.lightbox__close:focus-visible,.lightbox__nav:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* Home: one real photograph under the status band, leading to the full set. */
.status__ground{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);align-items:center;
  gap:clamp(16px,2.4vw,32px);margin-top:clamp(24px,3vw,34px);padding-top:clamp(24px,3vw,34px);
  border-top:1px solid var(--rule-d);color:inherit;text-decoration:none}
.status__ground-img{position:relative;display:block;overflow:hidden}
.status__ground-img img{display:block;width:100%;height:auto;transition:transform .5s var(--ease)}
.status__ground:hover .status__ground-img img{transform:scale(1.02)}
.status__ground:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
.status__ground-copy{display:flex;flex-direction:column;gap:9px}
.status__ground-t{font-family:var(--display);font-size:clamp(22px,2.1vw,28px);line-height:1.15;color:var(--bone)}
.status__ground-cta{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
@media (max-width:760px){.status__ground{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.visit__a img,.status__ground-img img{transition:none}}

/* <picture> wrappers from the light-pictures build step (pages.js webpify):
   no box of their own, so every <img> lays out exactly as before. The <source>
   must not take part either, or a flex "gap" adds 12 px above the picture. */
picture{display:contents}
picture>source{display:none}

/* ── PROGRESS · dated Stage I steps on the home page (review job 3, 18 Oct 2026) ── */
.progress .eyebrow{color:var(--bronze-text)}
.progress__list{list-style:none;margin:28px 0 0;padding:0;border-left:1px solid var(--rule-2)}
.progress__list li{position:relative;display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;padding:0 0 18px 22px}
.progress__list li:last-child{padding-bottom:4px}
.progress__list li::before{content:"";position:absolute;left:-5px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--bronze)}
.progress__list li:last-child::before{box-shadow:0 0 0 4px rgba(154,116,47,.24)}
.progress__list time{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--bronze-text);padding-top:3px;white-space:nowrap}
.progress__list span{font-family:var(--sans);font-size:15.5px;line-height:1.5;color:var(--ink)}
.progress__next{margin-top:26px;padding:clamp(16px,2vw,22px);border:1px solid var(--rule-2);background:var(--paper)}
.progress__k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-text);margin:0 0 12px}
.progress__gates{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule)}
.progress__gates li{background:var(--paper);padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.progress__gates strong{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3-text)}
.progress__gates .is-gate{background:#F3EEE2}
.progress__gates .is-gate strong{color:var(--bronze-text)}
.progress__gates span{font-family:var(--sans);font-size:14.5px;line-height:1.4;color:var(--ink)}
.progress__note{font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink-3-text);margin:14px 0 0}
@media (max-width:760px){
  .progress__list li{grid-template-columns:1fr;gap:2px}
  .progress__gates{grid-template-columns:1fr 1fr}
}