/* ------------------------------------------------------------ brand ---- */
  @font-face {
    font-family: "Klein Condensed";
    src: url("/fonts/Klein-Condensed-Black.ttf") format("truetype");
    font-weight: 900; font-style: normal; font-display: swap;
  }

  :root {
    /* paper world (default ground: the printed feature) */
    --sc-canvas:      #F6F1E8;
    --sc-surface:     #EFE8DC;
    --sc-ink:         #1D1913;
    --sc-ink-soft:    #5C5245;
    --sc-accent:      #E62E00;   /* scarlet, darkened a step for paper */
    --sc-accent-ink:  #FFF6EE;
    --sc-font-display: "Klein Condensed", "Inter Tight", system-ui, sans-serif;
    --sc-font-text:    "Inter Tight", system-ui, sans-serif;
    --sc-font-mono:    "Inter Tight", system-ui, sans-serif;
    --sc-shadow-color: 30 20% 8%;
    --sc-maxw: 76rem;
  }

  /* Klein is condensed black caps: it needs looser leading than the engine's
     0.94 and reads best uppercase. */
  .sc-display {
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: 0.004em;
  }
  .sc-label { font-weight: 600; letter-spacing: 0.13em; }
  body { font-weight: 450; }
  strong { font-weight: 700; }

  /* two-stop accent: same hue, lifted for dark grounds */
  .ground--deep, .ground--coal {
    --sc-ink: #F4EFE7; --sc-ink-soft: #A79C8D;
    --sc-accent: #FF4D1F; --sc-accent-ink: #14100C;
    --sc-hairline: color-mix(in oklab, #F4EFE7 14%, transparent);
    color: var(--sc-ink);
  }
  .ground--paper   { background: #F6F1E8; }
  .ground--paper2  { background: #EFE8DC; }
  .ground--deep    { background: #0B1014; }   /* under the waterline */
  .ground--coal    { background: #17120E; }
  .ground--deep { --sc-canvas: #0B1014; --sc-surface: #121922; }
  .ground--coal { --sc-canvas: #17120E; --sc-surface: #201A14; }

  /* ------------------------------------------------------------ chrome ---- */
  /* Chaptered editorial: no fixed bar. A folio in the margin instead. */
  .folio {
    position: fixed; left: clamp(0.8rem, 2vw, 2rem); bottom: clamp(1rem, 4vh, 2.5rem);
    z-index: var(--sc-z-chrome);
    font-size: var(--sc-t-xs); letter-spacing: 0.13em; text-transform: uppercase;
    font-weight: 600; color: var(--sc-ink-soft);
    writing-mode: vertical-rl; transform: rotate(180deg);
    transition: opacity 300ms var(--sc-ease-out);
  }
  .folio__num { color: var(--sc-accent); }
  @media (max-width: 860px) { .folio { display: none; } }

  .mast {
    position: fixed; top: clamp(0.9rem, 2.5vh, 1.6rem); left: 0; right: 0;
    display: flex; justify-content: center; z-index: var(--sc-z-chrome);
    pointer-events: none;
  }
  .mast img { height: clamp(14px, 1.6vw, 20px); width: auto; opacity: 0.92; }
  .mast--invert img { filter: none; } /* logo is scarlet, holds on both grounds */

  /* menu: a discreet index, not a nav bar */
  .menu-btn {
    position: fixed; top: clamp(0.7rem, 2vh, 1.3rem); right: clamp(0.9rem, 2.5vw, 2rem);
    z-index: calc(var(--sc-z-chrome) + 1);
    background: rgba(246, 241, 232, 0.92); color: #1D1913;
    border: 1px solid rgba(29, 25, 19, 0.18); border-radius: var(--sc-r-pill);
    padding: 0.42rem 1rem; cursor: pointer;
    font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
    transition: transform 140ms var(--sc-ease-out);
  }
  .menu-btn:hover { transform: translateY(-1px); }
  .menu-btn:active { transform: translateY(1px); }
  .site-index {
    position: fixed; inset: 0; z-index: calc(var(--sc-z-chrome) + 2);
    background: #17120E; color: #F4EFE7;
    display: grid; align-content: center;
    padding: var(--sc-gutter);
  }
  .site-index .sc-label { color: #A79C8D; margin-bottom: var(--sc-4); }
  .site-index__cols {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-8);
    width: 100%; max-width: var(--sc-maxw); margin-inline: auto;
  }
  @media (max-width: 700px) { .site-index__cols { grid-template-columns: 1fr; gap: var(--sc-6); } }
  .site-index__list { display: grid; gap: var(--sc-2); }
  .site-index__list a {
    font-family: var(--sc-font-display); font-weight: 900; text-transform: uppercase;
    font-size: clamp(1.6rem, 4.5vw, 2.6rem); line-height: 1.05;
    color: #F4EFE7; text-decoration: none; width: fit-content;
  }
  .site-index__list a:hover { color: #FF4D1F; }
  .site-index__close {
    position: absolute; top: clamp(0.7rem, 2vh, 1.3rem); right: clamp(0.9rem, 2.5vw, 2rem);
    background: none; border: 1px solid rgba(244, 239, 231, 0.3); border-radius: var(--sc-r-pill);
    color: #F4EFE7; padding: 0.42rem 1rem; cursor: pointer;
    font-size: var(--sc-t-xs); font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  }
  .site-index__close:hover { border-color: #FF4D1F; color: #FF4D1F; }

  /* floating WhatsApp, arrives after the title page */
  .wa-float {
    position: fixed; right: clamp(0.9rem, 2.5vw, 2rem); bottom: clamp(1rem, 3vh, 2rem);
    z-index: var(--sc-z-chrome);
    width: 3.4rem; height: 3.4rem; display: grid; place-items: center;
    opacity: 0; transform: translateY(10px) scale(0.95); pointer-events: none;
    transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out);
  }
  .wa-float--on { opacity: 1; transform: none; pointer-events: auto; }
  .wa-float .wa-icon { width: 100%; height: 100%; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.28)); }
  .wa-float:hover { transform: translateY(-2px); }

  .call-ring__sub { font-size: var(--sc-t-xs); letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600; color: var(--sc-accent); }

  /* ------------------------------------------------------------ ch 1 ----- */
  .title-page { min-height: 92svh; display: grid; align-content: center; }
  .title-page .sc-wrap { display: grid; gap: var(--sc-6); }
  .title-page h1 { font-size: clamp(2.6rem, 1rem + 6.2vw, 6.6rem); max-width: 16ch; }
  .title-page h1 em { font-style: normal; color: var(--sc-accent); }
  .title-kicker { max-width: 52ch; }
  .title-rule { width: clamp(4rem, 8vw, 7rem); height: 3px; background: var(--sc-accent); }

  /* the launch film, below the title page copy */
  .launch-film { margin-top: clamp(3rem, 7vh, 5rem); padding-bottom: clamp(1rem, 3vh, 2rem); }
  .launch-film__frame {
    aspect-ratio: 16 / 9; background: #17120E;
    box-shadow: var(--sc-e3); overflow: hidden;
  }
  .launch-film__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
  .launch-film .figcap { margin-top: var(--sc-3); }

  /* the WhatsApp mark on the closing ask */
  .close-cta { display: inline-flex; align-items: center; gap: 0.55em; }
  .wa-icon { width: 1.25em; height: 1.25em; flex: none; }

  /* ------------------------------------------------------------ ch 2 ----- */
  .call-stage { display: grid; place-items: center; text-align: center; padding-inline: var(--sc-gutter); }
  .call-stage__inner { display: grid; gap: var(--sc-5); justify-items: center; max-width: 40rem; }
  .call-scene { position: absolute; inset-inline: var(--sc-gutter); top: 14svh; text-align: center; }
  .call-ring {
    position: relative; width: clamp(11rem, 28vw, 16rem); aspect-ratio: 1;
    border-radius: 50%; border: 2px solid var(--sc-hairline-strong);
    display: grid; place-content: center; margin-inline: auto;
  }
  .call-ring::before, .call-ring::after {
    content: ""; position: absolute; inset: -2px; border-radius: 50%;
    border: 2px solid var(--sc-accent); opacity: 0;
  }
  .is-ringing .call-ring::before { animation: ringpulse 1.5s var(--sc-ease-out) infinite; }
  .is-ringing .call-ring::after  { animation: ringpulse 1.5s var(--sc-ease-out) 0.75s infinite; }
  .is-ringing .call-ring { animation: buzz 0.36s linear infinite; }
  @keyframes ringpulse { 0% { transform: scale(1); opacity: 0.85; } 100% { transform: scale(1.65); opacity: 0; } }
  @keyframes buzz {
    0%,100% { transform: translateX(0); } 20% { transform: translateX(-1.5px); }
    40% { transform: translateX(1.5px); } 60% { transform: translateX(-1px); } 80% { transform: translateX(1px); }
  }
  .call-ring__time { font-family: var(--sc-font-display); font-weight: 900; font-size: var(--sc-t-2xl); letter-spacing: 0.01em; }
  .call-ring__who { font-size: var(--sc-t-xs); letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600; color: var(--sc-ink-soft); }
  .call-missed {
    position: absolute; inset: 0; display: grid; place-content: center;
    opacity: 0; transform: scale(0.96); transition: opacity 300ms var(--sc-ease-out), transform 300ms var(--sc-ease-out);
  }
  .call-missed span {
    font-family: var(--sc-font-display); font-weight: 900; text-transform: uppercase;
    font-size: var(--sc-t-lg); color: var(--sc-accent); letter-spacing: 0.02em;
  }
  .is-dead .call-ring { border-color: var(--sc-hairline); animation: none; }
  .is-dead .call-ring::before, .is-dead .call-ring::after { animation: none; opacity: 0; }
  .is-dead .call-ring__live { opacity: 0.14; }
  .is-dead .call-missed { opacity: 1; transform: none; }
  .call-ring__live { display: grid; gap: var(--sc-2); transition: opacity 300ms var(--sc-ease-out); }
  .call-copy { position: absolute; inset-inline: var(--sc-gutter); bottom: 10svh; text-align: center; }
  .call-copy .sc-lede { margin-inline: auto; }

  /* ------------------------------------------------------------ ch 3 ----- */
  .ledger { border-top: 1px solid var(--sc-hairline-strong); }
  .ledger__row {
    display: grid; grid-template-columns: minmax(9rem, 16rem) 1fr auto;
    gap: var(--sc-5); padding-block: var(--sc-6);
    border-bottom: 1px solid var(--sc-hairline);
    align-items: baseline;
  }
  .ledger__what { font-family: var(--sc-font-display); font-weight: 900; text-transform: uppercase; font-size: var(--sc-t-xl); line-height: 0.95; }
  .ledger__note { color: var(--sc-ink-soft); max-width: 46ch; text-wrap: pretty; }
  .ledger__verdict { font-size: var(--sc-t-xs); letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700; color: var(--sc-accent); white-space: nowrap; }
  @media (max-width: 860px) {
    .ledger__row { grid-template-columns: 1fr; gap: var(--sc-3); }
    .ledger__verdict { order: -1; }
  }
  .silence { height: 34svh; display: grid; place-content: end center; padding-bottom: var(--sc-7); }
  .silence p { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600; }

  /* ------------------------------------------------------------ ch 4 ----- */
  /* The waterline: the hard cut itself, lit from above. */
  .waterline { position: relative; }
  .waterline::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 22svh;
    background: linear-gradient(180deg,
      color-mix(in oklab, #F6F1E8 14%, transparent) 0%,
      color-mix(in oklab, #9FB6C4 7%, transparent) 34%, transparent 100%);
    pointer-events: none;
  }
  .berg-stage { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1rem, 4vw, 4rem); align-items: center; padding: clamp(1rem, 4vw, 3rem) var(--sc-gutter); }
  .berg-fig { position: relative; height: min(86svh, 46rem); }
  .berg-fig svg { width: 100%; height: 100%; }
  .berg-fig path, .berg-fig line { stroke: var(--sc-ink); fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
  .berg-fig .berg-facet { stroke-width: 1.5; opacity: 0.55; }
  .berg-fig .berg-water { stroke: #7FA3B8; stroke-width: 3; }
  .berg-fig .berg-accent { stroke: var(--sc-accent); stroke-width: 2; }
  .berg-fig .berg-dot { fill: var(--sc-accent); stroke: none; }
  .berg-fig .berg-fill { stroke: none; }
  .berg-tiplabel {
    position: absolute; top: 7.5%; right: 2%;
    font-size: var(--sc-t-xs); letter-spacing: 0.13em; text-transform: uppercase;
    font-weight: 700; color: var(--sc-ink);
  }
  .berg-plateblock {
    position: absolute; right: 0; bottom: 0; text-align: right;
    font-size: var(--sc-t-xs); letter-spacing: 0.13em; text-transform: uppercase;
    font-weight: 600; color: var(--sc-ink-soft);
    border: 1px solid var(--sc-hairline); padding: var(--sc-3) var(--sc-4);
    background: var(--sc-canvas);
  }
  .berg-plateblock strong { display: block; color: var(--sc-ink); }
  .berg-labels { display: grid; gap: var(--sc-3); align-content: center; }
  .berg-copy h2 { font-size: var(--sc-t-3xl); max-width: 14ch; }
  .berg-item {
    display: grid; grid-template-columns: auto 1fr; gap: var(--sc-4); align-items: baseline;
    padding-block: var(--sc-2); border-bottom: 1px solid var(--sc-hairline);
  }
  .berg-item__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sc-accent); align-self: center; }
  .berg-item__name { font-weight: 700; }
  .berg-item small { color: var(--sc-ink-soft); display: block; font-size: var(--sc-t-sm); }
  .berg-tipnote { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 34ch; }
  .berg-close { margin-top: var(--sc-4); }
  .berg-close .sc-lede { max-width: 56ch; }
  .berg-close .sc-lede strong { color: var(--sc-accent); }
  @media (max-width: 960px) {
    .berg-stage { grid-template-columns: 1fr; align-content: start; gap: var(--sc-2); padding-top: 5svh; }
    .berg-fig { height: 22svh; }
    .berg-copy h2 { font-size: var(--sc-t-lg); max-width: none; }
    .berg-tipnote { display: none; }
    .berg-item { padding-block: var(--sc-1); gap: var(--sc-3); }
    .berg-item__name { font-size: var(--sc-t-sm); }
    .berg-item small { display: none; }
    .berg-plateblock { display: none; }
    .berg-close { margin-top: var(--sc-2); }
    .berg-close .sc-lede { font-size: var(--sc-t-base); }
    .berg-tiplabel { top: 4%; }
  }

  /* ------------------------------------------------------------ ch 5 ----- */
  .proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  @media (max-width: 960px) { .proof-grid { grid-template-columns: 1fr; } }
  .proof-fig figcaption, .figcap {
    font-size: var(--sc-t-xs); letter-spacing: 0.13em; text-transform: uppercase;
    font-weight: 600; color: var(--sc-ink-soft); margin-top: var(--sc-3);
  }
  .stat { padding-block: var(--sc-6); border-bottom: 1px solid var(--sc-hairline); }
  .stat:first-child { padding-top: 0; }
  .stat__num { font-family: var(--sc-font-display); font-weight: 900; font-size: var(--sc-t-3xl); line-height: 0.95; text-transform: uppercase; }
  .stat__num .sc-nums { color: var(--sc-accent); }
  .stat p { color: var(--sc-ink-soft); max-width: 44ch; margin-top: var(--sc-2); }
  .proof-foot { margin-top: var(--sc-7); color: var(--sc-ink-soft); max-width: 62ch; }

  /* ------------------------------------------------------------ ch 6 ----- */
  .founder-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center; height: 100%; padding: clamp(4rem, 9svh, 6rem) var(--sc-gutter); }
  .founder-media { position: relative; height: min(70svh, 40rem); }
  .founder-media video, .founder-media .sc-stage__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .founder-media { box-shadow: var(--sc-e3); }
  .founder-artefact {
    position: absolute; left: clamp(-3rem, -4vw, -1.5rem); bottom: clamp(-2rem, -3vh, -1rem);
    width: clamp(8rem, 14vw, 11.5rem); margin: 0; rotate: -3deg;
    background: #FDFBF7; padding: var(--sc-2) var(--sc-2) var(--sc-3);
    box-shadow: var(--sc-e2);
  }
  .founder-artefact img { width: 100%; height: auto; }
  .founder-artefact figcaption {
    font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase;
    font-weight: 600; color: #5C5245; margin-top: var(--sc-2); text-align: center;
  }
  @media (max-width: 960px) { .founder-artefact { left: auto; right: -0.5rem; bottom: -1.5rem; width: 7.5rem; } }
  .founder-copy { display: grid; gap: var(--sc-4); max-width: 56ch; }
  .founder-copy h2 { font-size: var(--sc-t-2xl); max-width: 16ch; }
  .founder-copy .figcap { margin-top: 0; }
  @media (max-width: 960px) {
    .founder-grid { grid-template-columns: 1fr; align-content: start; padding-top: 9svh; gap: var(--sc-4); }
    .founder-copy .figcap { display: none; }
    .founder-media { height: 34svh; }
    .founder-copy { font-size: var(--sc-t-sm); }
  }

  /* ------------------------------------------------------------ ch 7 ----- */
  .deal-flip h2 { font-size: var(--sc-t-3xl); max-width: 18ch; }
  .deal-flip .flip { color: var(--sc-accent); }
  .deal-plate {
    margin-top: var(--sc-8);
    border: 2px solid var(--sc-ink); padding: clamp(1.5rem, 4vw, 3rem);
    display: grid; gap: var(--sc-4);
    background: var(--sc-canvas); box-shadow: var(--sc-e2);
  }
  .deal-plate__headline { font-family: var(--sc-font-display); font-weight: 900; text-transform: uppercase; font-size: var(--sc-t-2xl); line-height: 0.95; }
  .deal-plate__headline em { font-style: normal; color: var(--sc-accent); }
  .deal-plate__terms { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-6); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); font-weight: 600; }
  .deal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-2) var(--sc-7); margin-top: var(--sc-7); }
  @media (max-width: 860px) { .deal-cols { grid-template-columns: 1fr; } }
  .deal-cols li { padding-block: var(--sc-3); border-bottom: 1px solid var(--sc-hairline); list-style: none; }
  .deal-cols ul { margin: 0; padding: 0; }
  .deal-catch { margin-top: var(--sc-8); max-width: 62ch; }
  .deal-catch h3 { font-family: var(--sc-font-display); font-weight: 900; text-transform: uppercase; font-size: var(--sc-t-xl); margin: 0 0 var(--sc-3); }
  .qa { margin-top: var(--sc-8); border-top: 1px solid var(--sc-hairline-strong); }
  .qa div { padding-block: var(--sc-5); border-bottom: 1px solid var(--sc-hairline); }
  .qa dt { font-weight: 700; margin-bottom: var(--sc-2); }
  .qa dd { margin: 0; color: var(--sc-ink-soft); max-width: 62ch; }

  /* ------------------------------------------------------------ ch 8 ----- */
  .close-stage { display: grid; align-content: center; justify-items: start; padding-inline: var(--sc-gutter); padding-top: clamp(3rem, 8svh, 5rem); }
  .close-inner { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; display: grid; gap: var(--sc-6); }
  .close-inner h2 { font-size: clamp(2.6rem, 1.2rem + 6.4vw, 7rem); max-width: 13ch; }
  .close-cta {
    font-size: var(--sc-t-xl); font-weight: 700; color: var(--sc-ink);
    text-decoration: none;
    max-width: 26ch; line-height: 1.3;
  }
  .close-cta span {
    text-decoration: underline;
    text-decoration-color: var(--sc-accent); text-decoration-thickness: 3px; text-underline-offset: 0.3em;
  }
  .close-cta:hover { color: var(--sc-accent); }
  .close-sub { color: var(--sc-ink-soft); max-width: 52ch; }
  .close-alt { color: var(--sc-ink-soft); }
  .close-alt a { color: var(--sc-ink); text-decoration-thickness: 2px; text-decoration-color: var(--sc-hairline-strong); }
  .close-alt a:hover { text-decoration-color: var(--sc-accent); }
  .colophon {
    margin-top: var(--sc-8); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline);
    display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-6); align-items: center;
    font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--sc-ink-soft);
  }
  .colophon img { height: 13px; width: auto; }

  /* flow sections directly after pinned acts: reduced entry padding */
  .after-pin { padding-top: clamp(2rem, 4vw, 4rem); }

/* The site's global stylesheet forces Inter Tight onto every heading with
   !important. These win on specificity (class beats type selector). */
.sc-display {
  font-family: "Klein Condensed", "Inter Tight", system-ui, sans-serif !important;
  font-weight: 900 !important;
  line-height: 0.92 !important;
  letter-spacing: 0.004em !important;
  text-transform: uppercase !important;
}
/* The page's own colour root. The site bundle sets near-white text on <body>
   and loads after this sheet in the built site, so nothing here may rely on
   body-level inheritance or stylesheet order. */
.scroll-home {
  font-family: "Inter Tight", system-ui, sans-serif;
  color: var(--sc-ink);
  background: var(--sc-canvas);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  letter-spacing: var(--sc-track-normal);
  font-weight: 450;
}