/* The Cream marketing website.
 *
 * Layout and composition only. Every colour and face comes from
 * ../cream-tokens.css, so the site and the platform cannot drift apart.
 *
 * The sections here are responsive adaptations of the deck compositions in
 * marketing/compositions/. Same artwork, same words, reflowed for a page
 * that scrolls rather than a slide that does not.
 */

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

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(198, 161, 91, 0.10), transparent 60%),
    var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

::selection { background: rgba(198, 161, 91, 0.28); }

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ground-raise); color: var(--ink);
  padding: 12px 18px; border: 1px solid var(--gold);
}
.skip:focus { left: 12px; top: 12px; }

/* ---------------------------------------------------------------- shell */

.inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Section rhythm.
   Bands used to be within a few pixels of each other in height, which gave
   the page a metronome: the same beat nine times, and no opinion about
   which argument matters most. `tight` and `wide` break that up, so the
   page has short sharp moments and long quiet ones. */
.band {
  padding: clamp(72px, 9vw, 128px) 0;
  border-top: 1px solid var(--rule);
}
.band.tight { padding: clamp(48px, 5.5vw, 78px) 0; }

/* Heading on the left, the paragraph beside it rather than beneath it.
   Halves the vertical run of a section opening. */
.head-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(36px, 4vw, 54px);
}
.head-row .lede { max-width: 48ch; }
.band:first-of-type { border-top: none; }
.band.sink { background: linear-gradient(180deg, var(--ground-sink), transparent 70%); }

/* --------------------------------------------------------- navigation */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(22, 18, 11, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav .inner {
  display: flex; align-items: center; gap: 24px;
  min-height: 68px;
}
.brand {
  font-family: var(--serif);
  font-size: 23px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none;
  margin-right: auto;
}
.brand .dot { color: var(--gold); }

.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links a,
.nav-links span {
  display: block;
  font-size: 13px; letter-spacing: 0.04em;
  padding: 8px 14px; border-radius: 99px;
  text-decoration: none; color: var(--ink-soft);
  transition: color .18s ease-out, background-color .18s ease-out;
}
.nav-links a:hover { color: var(--ink); background: rgba(232, 220, 188, 0.06); }
.nav-links a[aria-current="page"] { color: var(--gold-bright); background: rgba(198, 161, 91, 0.10); }
/* Destinations whose pages have not been built yet. They become links as
   each page lands; until then they are plainly not clickable rather than
   promising a door that does not exist. */
.nav-links span { color: var(--ink-faint); cursor: default; }

/* ------------------------------------------------------------ type */

.eyebrow {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.eyebrow.quiet { color: var(--ink-faint); }

/* The display sizes are deliberately gentler than the viewport suggests.
   Most headings sit in a column roughly half the window wide, so scaling
   hard off vw made them outgrow their own measure in the middle widths.
   `balance` evens the rag so a line never ends on a single orphan word. */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; text-wrap: balance; }
h1 { font-size: clamp(34px, 4.8vw, 58px); line-height: 1.08; }
h2 { font-size: clamp(28px, 3.7vw, 46px); line-height: 1.12; }
h3 { font-size: clamp(19px, 2vw, 23px); line-height: 1.3; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--gold-bright); }

.lede {
  font-size: clamp(15.5px, 1.4vw, 17.5px);
  line-height: 1.68;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-top: 28px;
  text-wrap: pretty;
}
.lede strong { color: var(--ink); font-weight: 600; }
.lede.first { margin-top: 0; }

.section-head { max-width: 760px; margin-bottom: clamp(44px, 5vw, 72px); }
.section-head.centre { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.centre .lede,
.close .lede { margin-left: auto; margin-right: auto; }

.aside {
  font-family: var(--serif); font-style: italic;
  font-size: 17px; line-height: 1.55; color: var(--gold);
  max-width: 62ch;
}
.aside.centred { margin-left: auto; margin-right: auto; text-align: center; }
.aside.ruled { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule); }
.aside.spaced { margin-top: 44px; }
.aside.after-block { margin-top: 40px; }

/* Every illustrative figure on this site is invented. This is the label
   that says so, and it sits with the figure, never in the small print. */
.composite {
  font-family: var(--serif); font-style: italic;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-faint);
  margin-top: 18px; max-width: 62ch;
}

/* --------------------------------------------------------- buttons */

.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.btn {
  display: inline-block;
  font-size: 14px; letter-spacing: 0.06em;
  padding: 14px 26px; border-radius: 3px;
  text-decoration: none;
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  transition: background-color .18s ease-out, border-color .18s ease-out, color .18s ease-out;
}
.btn:hover { background: rgba(198, 161, 91, 0.12); border-color: var(--gold-bright); }
.btn.solid { background: var(--gold); color: #17120A; border-color: var(--gold); font-weight: 600; }
.btn.solid:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.btn.quiet { border-color: var(--rule-strong); color: var(--ink-soft); }
.btn.quiet:hover { border-color: var(--ink-faint); color: var(--ink); background: transparent; }

.nav .btn { padding: 9px 18px; font-size: 13px; }

/* ------------------------------------------------------- two column */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 84px);
  align-items: center;
}
.split.wide-left { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); }
/* For the scorecard, where the artefact is dense and the prose beside it is
   short, the panel takes the larger share so the bars can breathe. */
.split.wide-right { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); }

/* ---------------------------------------------------------- hero mark */

.hero-seal { text-align: center; }
.hero-seal svg { width: clamp(180px, 24vw, 300px); height: auto; display: block; margin: 0 auto; }
.hero-seal-cap {
  margin-top: 26px;
  font-family: var(--serif); font-style: italic;
  font-size: 17px; color: var(--ink-soft);
}
@media (max-width: 1000px) {
  /* On one column the mark leads, quietly, at a size that does not
     compete with the headline underneath it. */
  .hero-seal { order: -1; margin-bottom: 8px; }
  .hero-seal svg { width: 120px; }
  .hero-seal-cap { margin-top: 16px; font-size: 15px; }
}

/* -------------------------------------------------- panel (an artefact) */

.panel {
  /* The panel answers to its own width, not the window's. A viewport
     breakpoint stacked the scorecard while the panel still had 600px to
     play with, which is where the empty space came from. */
  container-type: inline-size;
  background: linear-gradient(160deg, #201A11 0%, #191409 100%);
  border: 1px solid rgba(198, 161, 91, 0.25);
  border-radius: 10px;
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.5);
  padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3.4vw, 50px) clamp(26px, 3vw, 38px);
}
.panel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap; margin-bottom: 6px;
}
.panel-title { font-family: var(--serif); font-size: 19px; }
.panel-note { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); }

/* ============================================================ passport */

.passport {
  background: linear-gradient(160deg, #201A11 0%, #191409 100%);
  border: 1px solid rgba(198, 161, 91, 0.28);
  border-radius: 10px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 4px 18px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 rgba(237, 230, 211, 0.06);
  padding: clamp(30px, 3.6vw, 46px) clamp(24px, 3.6vw, 52px) clamp(28px, 3vw, 40px);
  position: relative;
  transform: rotate(-1.2deg);
}
/* The binding, stitched down the left margin.
   We are showing one page of the passport rather than an open spread, so
   the thread belongs at the bound edge, not through the middle of the
   page. That keeps it clear of every stamp and every line of writing
   instead of fighting them, which is what a centre line did. */
.passport::before {
  content: ""; position: absolute;
  left: clamp(10px, 1.5vw, 22px); top: 30px; bottom: 30px;
  width: 2px; z-index: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(232, 220, 188, 0.22) 0 5px,
    transparent 5px 13px
  );
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}
/* Everything the reader is meant to read rides above the thread. */
.pass-head, .pass-holder, .stamp-grid { position: relative; z-index: 1; }
.pass-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.pass-title { font-family: var(--serif); font-size: 20px; letter-spacing: 0.02em; }
.pass-title .dot { color: var(--gold); }
.pass-no { font-size: 10.5px; letter-spacing: 0.2em; color: var(--ink-faint); text-transform: uppercase; }
.pass-holder { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-soft); margin-bottom: 30px; }

.stamp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 34px) clamp(16px, 3vw, 44px); }
.cell { text-align: center; }
.seal { width: clamp(76px, 9vw, 118px); height: clamp(76px, 9vw, 118px); margin: 0 auto 10px; }
.seal svg { width: 100%; height: 100%; display: block; }
.stamped .seal { transform: rotate(-7deg); }
.stamped:nth-child(2) .seal { transform: rotate(4deg); }
.stamped:nth-child(4) .seal { transform: rotate(-3deg); }
.stamped:nth-child(5) .seal { transform: rotate(6deg); }
.pillar-name { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
.stamped .pillar-name { color: var(--ink); }
.signee { font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--gold-bright); margin-top: 5px; }
.await { font-size: 11px; color: var(--ink-faint); font-style: italic; margin-top: 5px; font-family: var(--serif); }
.date-line { font-size: 9px; letter-spacing: 0.18em; color: var(--ink-faint); margin-top: 3px; text-transform: uppercase; }

/* The stamp lands. Each seal presses down onto the page in turn, which is
   the one piece of motion on this site that carries an argument rather
   than decorating one. */
.stamp-grid .cell .seal { transform-origin: 50% 50%; }
.js .stamp-grid .cell {
  opacity: 0;
  transition: opacity .34s ease-out;
  transition-delay: calc(var(--i, 0) * 190ms);
}
.js .stamp-grid .cell .seal {
  transform: scale(1.55) rotate(-14deg);
  transition: transform .34s cubic-bezier(0.2, 0.9, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 190ms);
}
.js .revealed .stamp-grid .cell { opacity: 1; }
.js .revealed .stamp-grid .cell .seal { transform: none; }
.js .revealed .stamp-grid .stamped:nth-child(1) .seal { transform: rotate(-7deg); }
.js .revealed .stamp-grid .stamped:nth-child(2) .seal { transform: rotate(4deg); }
.js .revealed .stamp-grid .stamped:nth-child(4) .seal { transform: rotate(-3deg); }
.js .revealed .stamp-grid .stamped:nth-child(5) .seal { transform: rotate(6deg); }

/* ============================================================== claims */

.claims-label { font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 18px; }

/* Three across, not three down. Read as a row they look interchangeable,
   which is exactly what the section is saying about them. */
.claims-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.claims-row .claim {
  padding: clamp(24px, 2.6vw, 34px) clamp(20px, 2.4vw, 32px);
  border-left: 1px solid var(--rule);
}
.claims-row .claim:first-child { border-left: none; padding-left: 0; }
.claim {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 1.9vw, 22px); line-height: 1.45;
}
.claim.c1 { color: var(--ink-soft); opacity: 0.85; }
.claim.c2 { color: var(--ink-faint); opacity: 0.7; }
.claim.c3 { color: var(--ink-faint); opacity: 0.45; }
.verdict { margin-top: 28px; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }

/* ================================================================ turn */

.turn-split { display: flex; flex-wrap: wrap; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.turn-half { flex: 1 1 320px; padding: clamp(32px, 4vw, 52px) clamp(24px, 3.4vw, 56px); }
.turn-half + .turn-half { border-left: 1px solid var(--rule); }
.turn-label { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; margin-bottom: 22px; }
.turn-half.old .turn-label { color: var(--ink-faint); }
.turn-half.new .turn-label { color: var(--gold); }
.turn-half p.big { font-family: var(--serif); font-size: clamp(21px, 2.4vw, 27px); line-height: 1.45; }
.turn-half.old p.big { font-style: italic; color: var(--ink-faint); }
.turn-half.new p.big { color: var(--ink); }
.turn-half.new p.big strong { color: var(--gold-bright); font-weight: 400; font-style: italic; }

/* ============================================================== ladder */

/* The ladder rises: four steps, each taller than the last, so the shape of
   the section is the argument. It stays a ladder down to tablet, then
   becomes a vertical climb rather than a squashed row. */
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; }
.step { padding: 0 clamp(12px, 1.6vw, 22px); }
.step .riser { border-top: 1px solid var(--rule); padding-top: 26px; text-align: center; }
.step-no { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-faint); display: block; margin-bottom: 14px; }
.step .badge {
  width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.step .badge svg { width: 32px; height: 32px; }
.step h3 { margin-bottom: 8px; }
.step p { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.step .tier {
  display: block; margin-top: 12px;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint);
}
.s1 .riser { padding-bottom: 6px; }
.s2 .riser { padding-bottom: 40px; }
.s3 .riser { padding-bottom: 74px; }
.s4 .riser { padding-bottom: 108px; }
.s1 .badge { border: 1.5px dashed var(--t-self); color: var(--t-self); }
.s2 .badge { border: 1.5px solid var(--t-build); color: var(--t-build); }
.s3 .badge { border: 2px solid var(--t-call); color: var(--t-call); }
.s4 .badge { border: 2.5px solid var(--t-ref); color: var(--t-ref); background: rgba(231, 203, 130, 0.06); }
.s4 h3 { color: var(--gold-bright); }
.s4 .tier { color: var(--t-ref); }

/* each step rises into place as the ladder enters view */
.js .ladder .step {
  opacity: 0; transform: translateY(26px);
  transition: opacity .4s ease-out, transform .4s ease-out;
  transition-delay: calc(var(--i, 0) * 130ms);
}
.js .revealed .step { opacity: 1; transform: none; }

/* =========================================================== scorecard */

/* Every track can shrink. Fixed side columns plus a 1fr middle whose own
   minimum was the width of five segments pushed the status column past the
   panel edge on any narrow panel. */
.score-row {
  display: grid;
  grid-template-columns: minmax(64px, 106px) minmax(0, 1fr) minmax(88px, 142px);
  gap: clamp(10px, 1.4vw, 18px); align-items: center;
  padding: 15px 0; border-top: 1px solid var(--rule);
}
.score-row > * { min-width: 0; }
.score-row:first-of-type { border-top: none; }
.score-row .pillar { font-family: var(--serif); font-size: 17px; }
.score-row.claim-only .pillar { color: var(--ink-faint); }

.bars { display: flex; flex-direction: column; gap: 7px; }
.bar { display: flex; gap: 5px; align-items: center; }
.bar-tag { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); width: 72px; flex: none; line-height: 1.35; }
/* No cap: the segments take whatever the row gives them, so a wide panel
   reads as a full bar rather than a short one with space after it. */
.seg { flex: 1 1 0; min-width: 12px; height: 9px; border-radius: 2px; }

/* Only stack when the panel itself is genuinely too narrow for three
   tracks. Above that the row stays a row at any window size. */
@container (max-width: 430px) {
  .score-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .score-row .status { text-align: left; }
  .score-row .pillar { font-size: 19px; }
}
.self .seg.on { border: 1px solid var(--ink-faint); background: transparent; }
.self .seg.off { border: 1px solid rgba(138, 128, 105, 0.25); background: transparent; }
.evid .seg.off { border: 1px solid rgba(138, 128, 105, 0.2); background: transparent; }
.evid .seg.e1 { background: #6E5C3F; }
.evid .seg.e2 { background: #8F7448; }
.evid .seg.e3 { background: var(--t-call); }
.evid .seg.e4 { background: var(--t-ref); }
.evid .seg.e5 { background: var(--gold-bright); }

.score-row .status { text-align: right; }
.score-row .flag { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.score-row.validated .flag { color: var(--t-ref); }
.score-row.evidenced .flag { color: var(--t-call); }
.score-row.claim-only .flag { color: var(--ink-faint); }
.score-row .by { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--gold-bright); margin-top: 3px; }
.score-row .note { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--ink-faint); margin-top: 3px; }

.legend { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); align-items: center; }
.legend .item { display: flex; gap: 9px; align-items: center; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.key { width: 30px; height: 9px; border-radius: 2px; flex: none; }
.key.line { border: 1px solid var(--ink-faint); }
.key.ombre { background: linear-gradient(to right, #8F7448, var(--gold-bright)); }
.key.sig { width: auto; height: auto; font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--gold-bright); }

/* ============================================================= pillars */

.pillar-band {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
/* Six across carries a terse line. Three across carries a real sentence,
   which is what the Develop page needs. */
.pillar-band.roomy { grid-template-columns: repeat(3, 1fr); }
.pillar-band.roomy .pillar-cell:nth-child(3n + 1) { border-left: none; }
.pillar-band.roomy .pillar-cell:nth-child(n + 4) { border-top: 1px solid var(--rule); }
.pillar-cell { padding: clamp(26px, 3vw, 44px) clamp(12px, 1.6vw, 26px); text-align: center; border-left: 1px solid var(--rule); }
.pillar-cell:first-child { border-left: none; }
.glyph { width: clamp(46px, 5vw, 64px); height: clamp(46px, 5vw, 64px); margin: 0 auto 20px; }
.glyph svg { width: 100%; height: 100%; stroke: var(--gold); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pillar-cell h3 { font-size: 19px; margin-bottom: 10px; }
.pillar-cell p { font-family: var(--serif); font-style: italic; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }

/* ======================================================= ruled rows */

/* Three offers, two audiences each. Ruled regions rather than a card grid:
   the house rule is whitespace before borders, borders before boxes. */
.rows { border-top: 1px solid var(--rule); }
.row-item {
  display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 46px);
  padding: clamp(28px, 3.2vw, 40px) 0;
  border-bottom: 1px solid var(--rule);
}
.row-item h3 { color: var(--ink); }
.row-item .row-kicker { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.row-item .who { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.row-item p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.row-item a.more { display: inline-block; margin-top: 14px; font-size: 13.5px; color: var(--gold-bright); text-decoration: none; border-bottom: 1px solid rgba(198, 161, 91, 0.4); }
.row-item a.more:hover { border-bottom-color: var(--gold-bright); }

/* ========================================================== anonymity */

/* One card the reader operates, centred, with its control beneath. */
.stage-single { display: grid; justify-items: center; gap: 30px; }
.stage-single .veil-card { width: min(100%, 460px); }
.stage-control { text-align: center; }
.stage-note {
  margin-top: 16px; max-width: 42ch;
  font-family: var(--serif); font-style: italic;
  font-size: 14.5px; line-height: 1.55; color: var(--ink-faint);
}

/* Two faces of the same fact, stacked in one cell so the card never
   changes height when the name is released. */
.swap { display: grid; }
.swap > * { grid-area: 1 / 1; transition: opacity .28s ease-out; }
.swap .role-line { display: block; }
[data-state="veiled"] .face-named,
[data-state="named"] .face-veiled { opacity: 0; visibility: hidden; }
[data-state="veiled"] .face-veiled,
[data-state="named"] .face-named { opacity: 1; visibility: visible; }

.veil-card { transition: border-color .28s ease-out, box-shadow .28s ease-out; }
.veil-card[data-state="named"] { border-color: rgba(198, 161, 91, 0.45); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.stage { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(24px, 3.6vw, 56px); align-items: center; }
.veil-card {
  background: linear-gradient(165deg, #1F1911 0%, #181309 100%);
  border: 1px solid var(--rule); border-radius: 10px;
  padding: clamp(24px, 2.6vw, 34px) clamp(22px, 2.8vw, 36px) clamp(22px, 2.4vw, 30px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.veil-card .card-label { font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 22px; }
.veil-card .who-row { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
/* The two faces style themselves, rather than inheriting from a state on
   the card, because both now live inside the same card at once. */
.mark-swap { width: 56px; height: 56px; flex: none; }
.mark { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.mark.face-veiled { border: 1.5px dashed var(--ink-faint); }
.mark.face-veiled svg { width: 24px; height: 24px; stroke: var(--ink-faint); fill: none; }
.mark.face-named { border: 2px solid var(--gold); }
.mark.face-named span { font-family: var(--serif); font-size: 21px; color: var(--gold-bright); }
.veil-card h3 { font-size: 20px; line-height: 1.25; }
.face-named h3 { color: var(--gold-bright); }
.veil-card .role-line { font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--ink-soft); margin-top: 3px; }
.veil-card .traits { border-top: 1px solid var(--rule); padding-top: 18px; }
.veil-card .traits p { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }
.veil-card .traits strong { color: var(--ink); font-weight: 600; }
.veil-card .promise { margin-top: 20px; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-faint); }
.veil-card .promise .face-named { color: var(--gold); }
.veil-turn { text-align: center; width: 150px; flex: none; }
.veil-turn svg { width: 42px; height: 42px; margin-bottom: 12px; }
.veil-turn p { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); line-height: 1.8; }

/* ============================================================== gaps */

.gaps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
.gap .gap-mark {
  width: 40px; height: 40px; border-radius: 50%; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule-strong);
}
.gap .gap-mark svg { width: 18px; height: 18px; stroke: var(--gold); fill: none; stroke-width: 1.6; stroke-linecap: round; }
.gap h3 { font-size: 20px; margin-bottom: 10px; }
.gap p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }

/* ============================================================= steps */

.numbered { border-top: 1px solid var(--rule); }
.numbered li {
  list-style: none;
  display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(16px, 2.4vw, 36px); align-items: baseline;
  padding: clamp(22px, 2.6vw, 30px) 0; border-bottom: 1px solid var(--rule);
}
.numbered .n { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--gold); }
.numbered h3 { font-size: 21px; }
.numbered p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); }

/* ========================================================= north star */

.ns-label { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ns-label svg { width: 18px; height: 18px; flex: none; }
.ns-statement { font-family: var(--serif); font-style: italic; font-size: clamp(23px, 2.7vw, 32px); line-height: 1.3; color: var(--ink); }
.ns-meta { font-family: var(--serif); font-style: italic; font-size: 12.5px; color: var(--ink-faint); margin-top: 14px; }

.timeline { margin-top: 30px; border-top: 1px solid var(--rule); list-style: none; }
.timeline li {
  display: grid; grid-template-columns: 92px minmax(0, 1fr);
  gap: 20px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.timeline li:last-child { border-bottom: none; }
.timeline .when { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.timeline .what { font-size: 14.5px; color: var(--ink-soft); }
.timeline .what em { font-family: var(--serif); color: var(--gold-bright); font-size: 15.5px; }
.ns-keep { text-align: right; margin-top: 18px; font-size: 15px; }

/* ========================================================= reference */

.quote-card { position: relative; }
.quote-card .qmark {
  position: absolute; top: 40px; left: 32px;
  font-family: var(--serif); font-size: 100px; line-height: 0.6;
  color: var(--gold); opacity: 0.35;
}
.quote-card .quote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 2.3vw, 27px); line-height: 1.5; color: var(--ink);
  padding-left: 46px;
}
.quote-card .attr { padding-left: 46px; margin-top: 24px; font-size: 13.5px; color: var(--ink-soft); }
.quote-card .attr em {
  display: block; margin-bottom: 3px;
  font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--gold-bright);
}
.quote-card .adds { padding-left: 46px; margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.add-chip {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid rgba(198, 161, 91, 0.4); color: var(--gold);
  border-radius: 99px; padding: 7px 15px;
}
.add-chip.deep { background: rgba(198, 161, 91, 0.12); }

/* ==================================================== transformations */

.journeys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.journey {
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
  font-size: 15px; color: var(--ink-soft);
}
.journey .tick { font-size: 12px; color: var(--gold); width: 14px; flex: none; }
.journey.lived { color: var(--ink); }
.journey.lived .name { color: var(--gold-bright); font-family: var(--serif); font-style: italic; font-size: 16.5px; }

/* ============================================================ terms */

.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px); }
.terms.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.term h3 { font-size: 21px; margin-bottom: 10px; }
.term p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.term a { color: var(--gold-bright); }

/* The privacy posture, said where we are actually asking for something
   rather than only on a page nobody visits.
   A ruled region, not a panel. This is static prose, so it does not earn a
   box, a tint and an accent edge on top of each other; the gold left edge
   in particular belongs to the console's interactive cards, where it means
   "this is a link". A rule and some air say the same thing more quietly,
   which suits a passage about restraint. */
.posture { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--rule); }
/* Body first, then the lead, and the lead is scoped inside .posture so it
   actually wins. The lead is itself a <p>, so a bare `.posture p` rule
   placed after it silently flattened it to body text. */
.posture p { font-size: 15px; line-height: 1.7; color: var(--ink-soft); max-width: 54ch; }
.posture .posture-lead {
  font-family: var(--serif); font-size: 21px; line-height: 1.35;
  color: var(--ink); margin-bottom: 12px; max-width: 40ch;
}

.panel-foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); }
.aside a { color: var(--gold-bright); }

/* Links inside body copy. .term and .aside were each styled individually,
   which meant .lede, .timeline and anything written later fell through to
   the browser default and rendered as blue underlined text on a dark warm
   ground. Styling the class of thing rather than the instance so it cannot
   happen again. The underline is a border, matching .row-item a.more, so it
   sits away from the descenders instead of cutting through them. */
main p a,
.lede a,
.timeline a {
  color: var(--gold-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(198, 161, 91, 0.45);
  transition: border-color 140ms ease;
}
main p a:hover,
.lede a:hover,
.timeline a:hover { border-bottom-color: var(--gold-bright); }

/* ============================================================= forms */

.field { margin-bottom: 20px; }
.field label,
.consent span,
.composed label {
  display: block; margin-bottom: 8px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}
.field .opt { letter-spacing: 0.16em; color: var(--ink-faint); opacity: 0.7; }
.field input,
.field textarea,
.composed textarea {
  width: 100%; display: block;
  background: var(--ground-sink); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 3px;
  padding: 12px 14px; font-family: var(--sans); font-size: 15px; line-height: 1.55;
  transition: border-color .18s ease-out;
}
.field textarea, .composed textarea { resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--rule-strong); }
.field input:focus, .field textarea:focus { border-color: var(--gold); outline: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); opacity: 0.75; }

.consent {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 26px 0 4px; padding-top: 20px; border-top: 1px solid var(--rule);
  cursor: pointer;
}
.consent input { margin-top: 2px; width: 16px; height: 16px; flex: none; accent-color: var(--gold); }
.consent span {
  margin-bottom: 0;
  font-size: 13.5px; letter-spacing: 0.01em; text-transform: none; line-height: 1.6;
  color: var(--ink-soft);
}
.consent:hover span { color: var(--ink); }

.form-note { margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--gold); min-height: 1px; }
.form-note.bad { color: var(--below); }

.challenge { margin: 22px 0 4px; min-height: 65px; }

/* The honeypot. Off screen rather than display:none, because some form
   fillers skip hidden fields but happily fill this one. */
.trap {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.composed { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--rule); }
.composed textarea { font-family: var(--mono); font-size: 12.5px; }

/* ============================================================== desk */

/* The only human voice on the site, so it gets the largest type and the
   whole measure. It used to sit in a 24 character column at half the size
   of the headings around it, which read as an afterthought. */
.desk-band .eyebrow { text-align: center; }
.desk-quote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 2.9vw, 36px); line-height: 1.42;
  color: var(--ink); max-width: 34ch; margin: 0 auto;
  text-wrap: balance; text-align: center;
}
.desk-attr {
  margin-top: 30px; text-align: center;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint);
}

/* ============================================================ close */

.close { text-align: center; }
.close .actions { justify-content: center; }

/* =========================================================== footer */

.foot { border-top: 1px solid var(--rule); padding: 56px 0 64px; }
.foot .inner { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
.foot .brand { margin-right: 0; }
.foot .blurb { font-size: 14px; color: var(--ink-faint); margin-top: 14px; max-width: 40ch; line-height: 1.6; }
.foot h4 { font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); font-weight: 400; margin-bottom: 16px; }
.foot ul { list-style: none; display: grid; gap: 10px; }
.foot a { color: var(--ink-soft); text-decoration: none; font-size: 14px; }
.foot a:hover { color: var(--gold-bright); }
.foot li span { color: var(--ink-faint); font-size: 14px; }
.foot .fine { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 24px; font-size: 12.5px; color: var(--ink-faint); }

/* ============================================================ reveal */

/* Two things on this site move, and both of them are making an argument:
   the stamps press onto the passport, and the ladder climbs. Everything
   else is simply present when you reach it. A page where every section
   fades up spends its motion budget on nothing and blunts the two moments
   that should land.

   A group never moves itself. It only tells its children when to. */
.js [data-reveal="group"] { opacity: 1; transform: none; }

/* ======================================================= responsive */

@media (max-width: 1000px) {
  .split, .split.wide-left, .split.wide-right { grid-template-columns: minmax(0, 1fr); }
  .pillar-band { grid-template-columns: repeat(3, 1fr); }
  .pillar-cell:nth-child(3n + 1) { border-left: none; }
  .pillar-cell:nth-child(n + 4) { border-top: 1px solid var(--rule); }
  .row-item { grid-template-columns: 1fr; }
  .stage { grid-template-columns: 1fr; justify-items: stretch; }
  .veil-turn { width: auto; margin: 0 auto; }
  .veil-turn svg { transform: rotate(90deg); }
  .gaps { grid-template-columns: 1fr; }
  .terms, .terms.wide { grid-template-columns: 1fr; }
  .head-row { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .claims-row { grid-template-columns: 1fr; }
  .claims-row .claim { border-left: none; border-top: 1px solid var(--rule); padding-left: 0; padding-right: 0; }
  .claims-row .claim:first-child { border-top: none; }
  .numbered li { grid-template-columns: 40px minmax(0, 1fr); }
  .numbered li p { grid-column: 2; }
  .journeys { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  /* Stacked, the risers stop being a staircase, so their heights reset and
     each step needs real air above the rule that ends it. */
  .ladder { grid-template-columns: 1fr; }
  .step { padding: 0; }
  .step .riser { padding-top: 26px; text-align: left; display: grid; grid-template-columns: 68px 1fr; gap: 20px; align-items: start; }
  .s1 .riser, .s2 .riser, .s3 .riser, .s4 .riser { padding-bottom: 30px; }
  .step .badge { margin: 0; grid-row: span 3; }
  .step .step-no { grid-column: 2; margin-bottom: 6px; }
  .step h3, .step p, .step .tier { grid-column: 2; }
  .turn-half + .turn-half { border-left: none; border-top: 1px solid var(--rule); }
  .foot .inner { grid-template-columns: 1fr 1fr; }
  .foot .brand-col { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  /* Two tiers rather than one crowded row: identity and the one action on
     top, the destinations beneath, scrolling if they need to. */
  .nav .inner { flex-wrap: wrap; gap: 8px; min-height: 0; padding-top: 12px; padding-bottom: 8px; }
  .nav-links { order: 3; width: 100%; overflow-x: auto; margin: 0 -6px; }
  .nav-links a, .nav-links span { padding: 6px 10px; white-space: nowrap; font-size: 12.5px; }
  .brand { font-size: 21px; }
  .nav .btn { padding: 8px 14px; }
  .pillar-band { grid-template-columns: repeat(2, 1fr); }
  .pillar-cell:nth-child(3n + 1) { border-left: 1px solid var(--rule); }
  .pillar-cell:nth-child(2n + 1) { border-left: none; }
  .pillar-cell:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  /* tighter tracking so "AI Maturity" holds one line under its stamp */
  .pillar-name { font-size: 10px; letter-spacing: 0.12em; }
  .passport { transform: none; }
  .passport::before { display: none; }
  /* the booklet header stacks rather than fighting for one line */
  .pass-head { display: block; }
  .pass-no { display: block; margin-top: 6px; }
  .bar-tag { width: 74px; }
}

/* Motion is an argument here, never decoration, so when it is unwelcome it
   collapses to nothing rather than to something slower. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .ladder .step,
  .js .stamp-grid .cell { opacity: 1; transform: none; transition: none; }
  .js .stamp-grid .cell .seal { transform: none; transition: none; }
  .js .stamp-grid .stamped:nth-child(1) .seal { transform: rotate(-7deg); }
  .js .stamp-grid .stamped:nth-child(2) .seal { transform: rotate(4deg); }
  .js .stamp-grid .stamped:nth-child(4) .seal { transform: rotate(-3deg); }
  .js .stamp-grid .stamped:nth-child(5) .seal { transform: rotate(6deg); }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}