/* ==================================================================
   Third Eye Media — Monthly Content Production Partnership (V3)
   Light-mode variant of the V2 system (rebuilt from direct
   observation of bymonolog.com): paper base, ink type, giant
   condensed uppercase display, halftone texture, 2px radii.
   All code and assets original.
   ================================================================== */

:root {
  --ink: #080807;
  --paper: #E8E8E3;
  --dim: rgba(8, 8, 7, 0.68);      /* V5: darker for contrast on grey and white */
  --dim-ink: rgba(8, 8, 7, 0.68);
  --line: rgba(8, 8, 7, 0.16);
  --line-ink: rgba(8, 8, 7, 0.16);

  /* V5.3.2 type pairing. Alata ships as a single 400 weight, so nothing
     may ask it for bold: see the synthetic-bold guard at the end of this
     file. Inter carries every reading and UI role; Space Mono keeps its
     production-metadata role unchanged from V5.3.1. */
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-disp: "Alata", "Trebuchet MS", sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  --radius: 2px;
  --gutter: clamp(16px, 2.5vw, 36px);
  --header-h: 72px;              /* sticky header height, shared by anchor offsets */
  --anchor-gap: 28px;            /* breathing room between header and heading */

  --disp-xl: clamp(3.2rem, 13vw, 15rem);   /* full-width chapter headings */
  --disp-lg: clamp(2.6rem, 8.6vw, 9.8rem); /* statement headings */
  --disp-md: clamp(2rem, 5vw, 5.4rem);
  --body: 1.125rem;              /* V5.3.2: 17px to 18px for Inter's reading size */
  --body-lg: clamp(1.25rem, 1.9vw, 1.75rem);
  --mono-size: 0.72rem;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body);
  /* V5.3.2: Inter reads a shade heavier than Space Grotesk at the same
     weight, so the default drops 500 to 400 and the leading opens up.
     Places that deliberately set 500 or 600 keep it. */
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.011em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
fieldset { border: 0; min-inline-size: auto; }
legend { padding: 0; }

::selection { background: var(--ink); color: var(--paper); }
.theme-light ::selection { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.theme-light :focus-visible, .app-form :focus-visible { outline-color: var(--ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; top: -80px; left: var(--gutter);
  z-index: 300; background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: var(--mono-size);
  text-transform: uppercase; padding: 0.7rem 1rem; text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus { top: 8px; }

.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- shared text styles ---------- */

.mono {
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dim);
}
.theme-light .mono { color: var(--dim-ink); }

.disp {
  font-family: var(--font-disp);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.015em;
}

/* section label: "● Label" */
.slabel {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  font-weight: 500;
}
.slabel::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}

/* mono index chip: "PS ←[01/05]" */
.chipdex {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  text-transform: uppercase;
  color: var(--dim);
}
.theme-light .chipdex { color: var(--dim-ink); }
.chipdex .box {
  border: 1px solid currentColor;
  border-radius: var(--radius);
  padding: 0.1rem 0.4rem;
}

/* stat chip (MONOLOG-style bordered stat) */
.statchip {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  padding: 0.35rem 0.7rem;
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  padding: 0.45rem 0.45rem 0.45rem 0.95rem;
  min-height: 44px;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.btn:hover, .btn:focus-visible { opacity: 0.92; transform: translateY(-1px); }
.btn .sq {
  display: grid;
  place-content: center;
  width: 32px; height: 32px;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  font-size: 0.9rem;
  transition: transform 0.2s ease;
}
.btn:hover .sq, .btn:focus-visible .sq { transform: translate(1px, -1px); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark .sq { background: var(--paper); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn .sq { transition: none; }
  .btn:hover { transform: none; }
}

/* ---------- textures ---------- */

.halftone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(8, 8, 7, 0.12) 1px, transparent 1.6px);
  background-size: 5px 5px;
  mask-image: linear-gradient(160deg, rgba(0,0,0,0.9), rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.75));
  -webkit-mask-image: linear-gradient(160deg, rgba(0,0,0,0.9), rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.75));
}

.smoke {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 62% 18%, rgba(8,8,7,0.10), transparent 62%),
    radial-gradient(ellipse 65% 45% at 18% 62%, rgba(8,8,7,0.05), transparent 60%),
    radial-gradient(ellipse 90% 40% at 80% 88%, rgba(8,8,7,0.04), transparent 65%),
    linear-gradient(180deg, #f2f2ee 0%, #ecece8 45%, #E8E8E3 100%);
}

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

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem var(--gutter);
  transition: background-color 0.3s ease;
}
.nav.is-scrolled { background: rgba(232, 232, 227, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.logo {
  font-family: var(--font-disp);
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-decoration: none;
  line-height: 1;
  color: var(--ink);
}
.logo .o { display: inline-block; transform: scaleX(1.25); }

.nav__links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1.4rem;
  list-style: none;
}
.nav__links a {
  text-decoration: none;
  font-size: 0.98rem;
  color: var(--ink);
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.nav__links a:hover, .nav__links a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

.nav__right { display: flex; align-items: center; gap: 0.9rem; }
.menu-btn {
  display: none;
  background: none;
  border: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 500;
  min-height: 44px; min-width: 44px;
  cursor: pointer;
}

@media (max-width: 1080px) {
  .nav__links { display: none; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .nav .btn--nav { padding: 0.35rem 0.35rem 0.35rem 0.75rem; font-size: 0.88rem; }
}
@media (max-width: 560px) {
  .nav .btn--nav .btn-label { display: none; }
  .nav .btn--nav { padding: 0.35rem; }
}

/* menu overlay */
.menu-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--paper);
  display: none;
  flex-direction: column;
  padding: var(--gutter);
}
.menu-overlay.is-open { display: flex; }
.menu-overlay__top { display: flex; justify-content: space-between; align-items: center; }
.menu-overlay__links { list-style: none; margin-top: 8vh; }
.menu-overlay__links li { border-bottom: 1px solid var(--line); }
.menu-overlay__links a {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-disp);
  font-size: clamp(2.2rem, 9vw, 4rem);
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 0;
  line-height: 1;
}
.menu-overlay .btn { margin-top: auto; justify-content: center; }

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

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
}
.hero__center {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 110px var(--gutter) 0;
}
.eye-glyph {
  width: 64px; height: 30px;
  margin-bottom: 1.6rem;
  color: var(--ink);
}
.hero__copy { max-width: 34rem; }
.hero__copy h1 {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.hero__copy .sub {
  margin-top: 1.2rem;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  color: var(--dim);
  max-width: 30rem;
  margin-left: auto; margin-right: auto;
}
.hero__meta {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}
.hero__cta { margin-top: 1.8rem; }
.hero__note {
  margin-top: 1.1rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--dim);
  max-width: 30rem;
}

.hero__wordmark {
  position: relative;
  z-index: 1;
  font-family: var(--font-disp);
  text-transform: uppercase;
  font-size: 12.2vw;
  line-height: 0.78;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-align: center;
  color: rgba(8, 8, 7, 0.75);
  margin-bottom: -0.06em;
  user-select: none;
}

.hero__chapter {
  position: absolute;
  z-index: 2;
  bottom: 1.1rem;
  left: var(--gutter);
}
.hero__scroll {
  position: absolute;
  z-index: 2;
  bottom: 1.1rem;
  right: var(--gutter);
}

/* ---------- chapters shared ---------- */

section { position: relative; }
.pad-y { padding-top: clamp(80px, 11vw, 170px); padding-bottom: clamp(80px, 11vw, 170px); }

.theme-light { background: #F6F6F2; color: var(--ink); }

.giant {
  font-size: var(--disp-xl);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
}
@media (max-width: 700px) {
  .giant { white-space: normal; line-height: 0.9; }
}

/* reveal */
.rv { opacity: 0; transform: translateY(22px); }
.rv.in {
  opacity: 1; transform: none;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.rv[data-d="1"].in { transition-delay: 0.1s; }
.rv[data-d="2"].in { transition-delay: 0.2s; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .rv.in { transition: none; }
}

/* ---------- metrics / fit row ---------- */

.fitline {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.1rem var(--gutter);
}
.fitline span { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; }
.fitline span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.5; }

/* ---------- positioning ---------- */

.position__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}
.position__aside { display: flex; flex-direction: column; gap: 0.5rem; }
.position__aside .bignum {
  font-family: var(--font-disp);
  font-size: clamp(2.6rem, 4.5vw, 4.6rem);
  line-height: 1;
}
.position__main h2 {
  font-size: clamp(1.7rem, 3.1vw, 2.9rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 24ch;
}
.position__main .lede {
  margin-top: 1.6rem;
  font-size: var(--body-lg);
  line-height: 1.4;
  color: var(--dim);
  max-width: 44ch;
}
.position__sig {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2.2rem;
}
.position__sig .mark {
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  place-content: center;
  color: var(--dim);
}
.position__sig .who { font-size: 0.9rem; line-height: 1.35; }
.position__sig .who span { display: block; color: var(--dim); }

.problems {
  list-style: none;
  margin-top: clamp(3rem, 6vw, 5rem);
  counter-reset: pr;
}
.problems li {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 1.2rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
  font-size: clamp(1.15rem, 2.1vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--dim);
  transition: color 0.4s ease;
}
.problems li.lit, .problems li:hover { color: var(--ink); }
.problems li:last-child { border-bottom: 1px solid var(--line); }
.problems .n { font-family: var(--font-mono); font-size: var(--mono-size); color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .problems li { transition: none; color: var(--ink); } }

.position__close {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: var(--body-lg);
  font-weight: 500;
  max-width: 46ch;
}

/* ---------- brands strip ---------- */

.brands { border-top: 1px solid var(--line); }
.brands__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 3rem;
  padding-top: 2.2rem;
  padding-bottom: 1rem;
}
.brands__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin-bottom: clamp(2.2rem, 5vw, 4rem);
}
.brands__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  text-align: center;
  min-height: 150px;
  padding: 1.6rem 1.2rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.brands__cell img {
  height: 44px;
  width: auto;
  max-width: 82%;
  object-fit: contain;
  transition: filter 0.25s ease;
}
.brands__cell:hover img, .brands__cell:focus-within img { filter: brightness(0); }
@media (prefers-reduced-motion: reduce) { .brands__cell img { transition: none; } }
@media (max-width: 1000px) {
  .brands__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .brands__grid { grid-template-columns: repeat(2, 1fr); }
  .brands__cell { min-height: 120px; }
  .brands__cell img { height: 36px; }
}

/* ---------- stories (light theme) ---------- */

.stories .giant { padding-top: clamp(60px, 8vw, 120px); }
.stories__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.2rem;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
.story-row {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 4vw, 5rem);
  align-items: start;
  border-top: 1px solid var(--line-ink);
  padding: clamp(1.8rem, 4vw, 3.2rem) 0;
}
.story-row__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 130% 90% at 25% 0%, rgba(8,8,7,0.34), rgba(8,8,7,0.1) 55%, rgba(8,8,7,0.22)),
    #c9c9c1;
  position: relative;
  overflow: hidden;
}
.story-row__media::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(8,8,7,0.16) 1px, transparent 1.5px);
  background-size: 4px 4px;
  /* V6: the dot grid was designed to give the empty placeholder frame some
     texture. Over a real photograph it reads as dirt, so it drops to 20%.
     V6.1: down again to 10% — still there on an empty frame, effectively
     invisible over the PluxNet photograph. */
  opacity: 0.1;
}
.story-row__media .cap {
  position: absolute;
  left: 1rem; bottom: 0.85rem;
  z-index: 1;
}
.story-row__body { display: flex; flex-direction: column; gap: 1rem; }
.story-row__body h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.story-row__body .desc { color: var(--dim-ink); max-width: 44ch; line-height: 1.5; }
.story-row__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 0.6rem;
}
.story-row__stats .stat { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.story-row__stats .stat small { font-size: 0.85rem; color: var(--dim-ink); max-width: 18ch; line-height: 1.35; }
.story-row__note { font-size: 0.8rem; color: var(--dim-ink); max-width: 40ch; }

.bigrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  border-top: 1px solid var(--line-ink);
  border-bottom: 1px solid var(--line-ink);
  padding: clamp(1.2rem, 2.6vw, 2rem) 0;
  text-decoration: none;
  transition: padding-left 0.25s ease;
}
.bigrow:hover, .bigrow:focus-visible { padding-left: 0.8rem; }
@media (prefers-reduced-motion: reduce) { .bigrow, .bigrow:hover { transition: none; padding-left: 0; } }
.bigrow .idx { font-family: var(--font-disp); font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: 1; }
.bigrow .lbl {
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.bigrow .arr { font-size: clamp(1.5rem, 3vw, 2.6rem); }
@media (max-width: 900px) {
  .story-row { grid-template-columns: 1fr; }
}

/* ---------- standard + capabilities ---------- */

.standard__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
}
.standard__quote blockquote {
  margin-top: 1.2rem;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.standard__quote .ctx { margin-top: 1.4rem; color: var(--dim); max-width: 38ch; line-height: 1.5; }

.caps { list-style: none; margin-top: 1.4rem; }
.caps li {
  font-size: clamp(1.6rem, 3.4vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.16;
  color: var(--dim);
  transition: color 0.35s ease;
}
.caps li.lit, .caps li:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .caps li { transition: none; color: var(--ink); } }
@media (max-width: 900px) {
  .standard__grid { grid-template-columns: 1fr; }
}

/* ---------- process ---------- */

.steps { border-top: 1px solid var(--line); margin-top: 1.4rem; }
.step {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr);
  gap: clamp(1.5rem, 3.5vw, 4rem);
  align-items: start;
  border-bottom: 1px solid var(--line);
  padding: clamp(1.6rem, 3.5vw, 3rem) 0;
}
.step h3 {
  font-size: clamp(1.3rem, 2.3vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.step p { color: var(--dim); line-height: 1.5; max-width: 44ch; }
.step__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 120% 90% at 70% 10%, rgba(232,232,227,0.14), rgba(232,232,227,0.02) 60%),
    #121211;
  position: relative;
  overflow: hidden;
}
.step__media::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(232,232,227,0.08) 1px, transparent 1.5px);
  background-size: 4px 4px;
}
@media (max-width: 900px) {
  .step { grid-template-columns: 1fr; gap: 0.9rem; }
  .step__media { max-width: 420px; }
}

/* ---------- continuity ---------- */

.contin__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.contin__grid h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 500; letter-spacing: -0.015em; margin: 0.9rem 0 1.2rem; }
.contin__list { list-style: none; }
.contin__list li {
  border-top: 1px solid var(--line);
  padding: 0.8rem 0;
  color: var(--dim);
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.9rem;
}
.contin__list .n { font-family: var(--font-mono); font-size: var(--mono-size); }
.contin__text { color: var(--dim); font-size: var(--body-lg); line-height: 1.45; max-width: 40ch; }
@media (max-width: 800px) { .contin__grid { grid-template-columns: 1fr; } }

/* ---------- investment (light) ---------- */

.invest .giant { padding-top: clamp(60px, 8vw, 120px); }
.invest__intro {
  padding-top: 1.2rem;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem 4rem;
  align-items: start;
}
.invest__intro p { max-width: 62ch; color: var(--dim-ink); line-height: 1.5; }
.tier-row {
  display: grid;
  grid-template-columns: minmax(0, 3.4fr) minmax(0, 3.2fr) minmax(0, 3.4fr) auto;
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: start;
  border-top: 1px solid var(--line-ink);
  padding: clamp(1.8rem, 4vw, 3.2rem) 0;
}
.tier-row:last-of-type { border-bottom: 1px solid var(--line-ink); }
.tier-row__id { display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; }
.tier-row__id h3 {
  font-family: var(--font-disp);
  font-size: clamp(1.9rem, 3.4vw, 3.4rem);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
}
.tier-row--featured .tier-row__id h3 { font-size: clamp(2.1rem, 3.9vw, 3.9rem); }
.tier-row__price { display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start; }
.tier-row__price .statchip { font-size: clamp(1.5rem, 2.6vw, 2.4rem); }
.tier-row__price small { color: var(--dim-ink); font-size: 0.85rem; }
.tier-row__fit { color: var(--dim-ink); line-height: 1.45; font-size: 0.95rem; max-width: 34ch; margin-top: 0.7rem; }
.tier-row__inc { list-style: none; }
.tier-row__inc li {
  border-top: 1px solid rgba(8, 8, 7, 0.12);
  padding: 0.55rem 0;
  font-size: 0.92rem;
}
.tier-row__inc li:first-child { border-top: 0; padding-top: 0; }
.tier-row .btn { white-space: nowrap; }
@media (max-width: 1000px) {
  .tier-row { grid-template-columns: 1fr 1fr; }
  .tier-row .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 640px) {
  .tier-row { grid-template-columns: 1fr; }
}

/* ---------- first 90 days ---------- */

.ninety__list { margin-top: 1.4rem; border-top: 1px solid var(--line); }
.ninety__row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr);
  gap: clamp(1.2rem, 3vw, 3.5rem);
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding: clamp(1.3rem, 2.6vw, 2.2rem) 0;
}
.ninety__row h3 { font-size: clamp(1.3rem, 2.3vw, 2rem); font-weight: 500; letter-spacing: -0.02em; }
.ninety__row p { color: var(--dim); line-height: 1.5; }
.ninety__note { margin-top: 1.4rem; color: var(--dim); font-size: 0.95rem; }
@media (max-width: 800px) {
  .ninety__row { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ---------- responsibilities ---------- */

.resp__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.resp__grid h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 500; margin: 0.9rem 0 1.2rem; letter-spacing: -0.015em; }
.resp__list { list-style: none; }
.resp__list li { border-top: 1px solid rgba(8, 8, 7, 0.12); padding: 0.65rem 0; font-size: 0.95rem; }
@media (max-width: 800px) { .resp__grid { grid-template-columns: 1fr; } }

.sepcosts {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--line-ink);
  border-radius: var(--radius);
}
.sepcosts summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  min-height: 44px;
}
.sepcosts summary::-webkit-details-marker { display: none; }
.sepcosts summary .chev { transition: transform 0.25s ease; font-family: var(--font-mono); }
.sepcosts[open] summary .chev { transform: rotate(180deg); }
.sepcosts[open] summary { border-bottom: 1px solid var(--line-ink); }
.sepcosts__body { padding: 1.4rem; }
.sepcosts__body ul { list-style: none; columns: 2; column-gap: 3rem; }
.sepcosts__body li { border-top: 1px solid rgba(8, 8, 7, 0.1); padding: 0.55rem 0; font-size: 0.92rem; break-inside: avoid; }
.sepcosts__body p { margin-top: 1.2rem; color: var(--dim-ink); font-size: 0.92rem; max-width: 66ch; }
@media (max-width: 700px) { .sepcosts__body ul { columns: 1; } }

/* ---------- guarantee ---------- */

.guarantee { text-align: center; overflow: hidden; }
.guarantee h2 { font-size: var(--disp-lg); }
.guarantee__body {
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  max-width: 36rem;
  line-height: 1.5;
}
.guarantee__body p + p { margin-top: 1rem; color: var(--dim); }
.guarantee__conds {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  max-width: 34rem;
  text-align: left;
}
.guarantee__conds li {
  border-top: 1px solid var(--line);
  padding: 0.8rem 0;
  color: var(--dim);
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.9rem;
  font-size: 0.95rem;
}
.guarantee__conds li:last-child { border-bottom: 1px solid var(--line); }
.guarantee__conds .n { font-family: var(--font-mono); font-size: var(--mono-size); }

/* ---------- fit filter ---------- */

.fit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.fit__grid h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 500; margin: 0.9rem 0 1.2rem; letter-spacing: -0.015em; }
.fit__list { list-style: none; }
.fit__list li {
  border-top: 1px solid var(--line);
  padding: 0.75rem 0;
  color: var(--dim);
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.8rem;
  font-size: 0.98rem;
}
.fit__list .mk { font-family: var(--font-mono); color: var(--ink); }
.fit__note {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  color: var(--dim);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 880px;
}
@media (max-width: 800px) { .fit__grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */

.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: start;
}
.faq__aside { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.faq__aside .mark {
  width: 56px; height: 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid; place-content: center;
  color: var(--dim);
}
.faq__aside h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.faq__aside p { color: var(--dim); max-width: 30ch; line-height: 1.5; }

.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  background: none; border: 0; color: inherit;
  font-family: inherit; text-align: left; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1.2rem;
  padding: 1.15rem 0;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  min-height: 44px;
}
.faq__q .chev { font-family: var(--font-mono); transition: transform 0.25s ease; flex: none; }
.faq__q[aria-expanded="true"] .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .faq__q .chev, .sepcosts summary .chev { transition: none; } }
.faq__a[hidden] { display: none; }
.faq__a p { color: var(--dim); line-height: 1.55; max-width: 58ch; padding-bottom: 1.15rem; }
@media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; } }

/* ---------- final CTA + application ---------- */

.finale {
  position: relative;
  overflow: hidden;
  padding-top: clamp(110px, 15vw, 220px);
}
.finale__lines { position: relative; z-index: 1; }
.finale__lines .ln {
  display: block;
  font-size: clamp(2.6rem, 8.2vw, 9.4rem);
  line-height: 0.92;
}
.finale__lines .ln:nth-child(2) { margin-left: clamp(2rem, 9vw, 11rem); }
.finale__lines .ln:nth-child(3) { margin-left: clamp(0.5rem, 3.5vw, 4rem); }
.finale__lines .arr { display: inline-block; transform: translateY(-0.05em); }

.finale__panel {
  position: relative;
  z-index: 1;
  margin-top: clamp(3.5rem, 8vw, 7rem);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: start;
  padding-bottom: clamp(80px, 10vw, 150px);
}
.finale__intro { display: flex; flex-direction: column; gap: 1.3rem; }
.finale__intro p { color: var(--dim); line-height: 1.55; max-width: 42ch; }
.finale__intro .qual { color: var(--ink); font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.6; text-transform: uppercase; }
@media (max-width: 980px) { .finale__panel { grid-template-columns: 1fr; } }

/* application form */
.app-form {
  background: #F6F6F2;
  color: var(--ink);
  border: 1px solid var(--line-ink);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.6rem);
}
.app-form h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-weight: 500; letter-spacing: -0.02em; }
.app-form .micro { color: var(--dim-ink); font-size: 0.88rem; margin-top: 0.4rem; }
.app-form .mono { color: var(--dim-ink); }

.progress {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0 1.6rem;
}
.progress .track { flex: 1; height: 2px; background: rgba(8,8,7,0.15); border-radius: 2px; position: relative; }
.progress .track::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--p, 50%);
  background: var(--ink);
  transition: width 0.35s ease;
}
@media (prefers-reduced-motion: reduce) { .progress .track::after { transition: none; } }

.fstep[hidden] { display: none; }

.fld { margin-bottom: 1.2rem; }
.fld > label, .fld .glabel {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  text-transform: uppercase;
  color: var(--dim-ink);
  margin-bottom: 0.5rem;
}
.fld input[type="text"], .fld input[type="email"], .fld input[type="tel"], .fld input[type="url"] {
  width: 100%;
  background: rgba(8,8,7,0.04);
  border: 1px solid rgba(8,8,7,0.25);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  padding: 0.8rem 0.9rem;
  min-height: 48px;
}
.fld input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.fld .err {
  display: none;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
}
.fld.bad .err { display: block; }
.fld.bad input, .fld.bad .opts { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }

.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
@media (max-width: 620px) { .fld-row { grid-template-columns: 1fr; } }

.opts {
  border: 1px solid rgba(8,8,7,0.25);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.opts--one { grid-template-columns: 1fr; }
.opt {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.75rem 0.9rem;
  border-top: 1px solid rgba(8,8,7,0.12);
  cursor: pointer;
  min-height: 48px;
  font-size: 0.93rem;
}
.opts .opt:first-child, .opts:not(.opts--one) .opt:nth-child(2) { border-top: 0; }
.opts:not(.opts--one) .opt:nth-child(odd) { border-right: 1px solid rgba(8,8,7,0.12); }
.opt input {
  appearance: none;
  width: 15px; height: 15px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  display: grid; place-content: center;
  cursor: pointer;
  flex: none;
}
.opt input[type="radio"] { border-radius: 50%; }
.opt input::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--ink);
  transform: scale(0);
}
.opt input[type="radio"]::before { border-radius: 50%; }
.opt input:checked::before { transform: scale(1); }
.opt input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.opt:has(input:checked) { background: rgba(8,8,7,0.06); font-weight: 700; }
@media (max-width: 620px) {
  .opts { grid-template-columns: 1fr; }
  .opts:not(.opts--one) .opt:nth-child(odd) { border-right: 0; }
  .opts:not(.opts--one) .opt:nth-child(2) { border-top: 1px solid rgba(8,8,7,0.12); }
}

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.factions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-top: 1.6rem; flex-wrap: wrap;
}
.back-btn {
  background: none; border: 0;
  color: var(--dim-ink);
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  text-transform: uppercase;
  cursor: pointer;
  min-height: 44px;
  border-bottom: 1px solid transparent;
}
.back-btn:hover, .back-btn:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }

.fstatus { margin-top: 1.3rem; font-size: 0.95rem; line-height: 1.55; }
.fstatus[data-state="error"] { border: 1px solid var(--ink); border-radius: var(--radius); padding: 1rem 1.1rem; }
.fstatus[data-state="loading"] { color: var(--dim-ink); }
.fstatus a { font-weight: 700; }
.btn[disabled] { opacity: 0.55; cursor: wait; }

/* ---------- sticky mobile CTA ---------- */

.mcta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem var(--gutter);
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  transition: transform 0.3s ease;
}
.mcta.on { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .mcta { transition: none; } }
.mcta a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  min-height: 44px;
}
@media (max-width: 760px) { .mcta { display: block; } }

/* ---------- footer ---------- */

.footer { border-top: 1px solid var(--line); }
.footer__links { list-style: none; padding-top: clamp(2rem, 4vw, 3.5rem); }
.footer__links li { border-bottom: 1px solid var(--line); }
.footer__links a {
  display: flex; justify-content: space-between; align-items: center;
  text-decoration: none;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  padding: 0.8rem 0;
}
.footer__links a .mono { font-size: 0.7rem; }
.footer__links a:hover, .footer__links a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }

.footer__mid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding-top: 2.2rem;
  padding-bottom: 2.2rem;
}
.footer__mid p { max-width: 34ch; color: var(--dim); font-size: 0.92rem; line-height: 1.55; }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 3rem;
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
  padding-bottom: 1.4rem;
}
.footer__base .cell { display: flex; flex-direction: column; gap: 0.2rem; }
.footer__base a { text-decoration: none; }
.footer__base a:hover, .footer__base a:focus-visible { text-decoration: underline; }

.footer__band {
  position: relative;
  overflow: hidden;
  min-height: clamp(180px, 26vw, 320px);
  background:
    radial-gradient(ellipse 60% 120% at 15% 50%, rgba(8,8,7,0.85), transparent 55%),
    radial-gradient(ellipse 55% 110% at 78% 30%, rgba(8,8,7,0.7), transparent 52%),
    var(--paper);
}
.footer__band::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(232,232,227,0.85) 1.2px, transparent 1.7px);
  background-size: 5px 5px;
}
.footer__band .inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.2rem var(--gutter);
  mix-blend-mode: difference;
  color: var(--paper);
}
.footer__band .fmark { font-family: var(--font-disp); text-transform: uppercase; font-size: 1.1rem; }

/* ---------- thank you ---------- */

.thanks {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 120px var(--gutter) 80px;
}
.thanks__inner { position: relative; z-index: 1; max-width: 44rem; }
.thanks h1 { font-size: clamp(2.4rem, 7vw, 6.5rem); line-height: 0.94; margin: 1.4rem 0 1.6rem; }
.thanks p { color: var(--dim); line-height: 1.55; max-width: 40rem; margin: 0 auto; }
.thanks p + p { margin-top: 0.9rem; }
.thanks .btn { margin-top: 2rem; }

/* ---------- case studies ---------- */

.cs-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.cs-tags span {
  border: 1px solid currentColor;
  border-radius: var(--radius);
  padding: 0.3rem 0.65rem;
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  text-transform: uppercase;
  opacity: 0.8;
  white-space: nowrap;
}

.cs-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding: 0.4rem 0 0.35rem;
  min-height: 44px;
  align-self: flex-start;
}
.cs-link .arr { transition: transform 0.2s ease; }
.cs-link:hover .arr, .cs-link:focus-visible .arr { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .cs-link .arr, .cs-link:hover .arr { transition: none; transform: none; } }

.story-row--flip .story-row__media { order: 2; }
@media (max-width: 900px) { .story-row--flip .story-row__media { order: 0; } }

/* media placeholder frames (dark frames read as unlit screens on the light page) */
.ph-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(ellipse 130% 90% at 30% 0%, rgba(232,232,227,0.13), rgba(232,232,227,0.02) 60%),
    #121211;
  display: grid;
  place-items: center;
}
.ph-media::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(232,232,227,0.08) 1px, transparent 1.5px);
  background-size: 4px 4px;
  pointer-events: none;
}
.ph-media--live { display: block; background: var(--ink); }
.ph-media--live::after { display: none; }
.ph-media--live video, .ph-media--live img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-media__glyph {
  font-size: 1.6rem;
  color: rgba(232, 232, 227, 0.5);
  border: 1px solid rgba(232, 232, 227, 0.3);
  border-radius: 50%;
  width: 58px; height: 58px;
  display: grid; place-items: center;
}
.ph-media__cap {
  position: absolute;
  left: 1rem; bottom: 0.85rem;
  z-index: 1;
  color: rgba(232, 232, 227, 0.55);
}
.ph-media--sq { aspect-ratio: 4 / 3; }
.ph-media--sq .ph-media__glyph { display: none; }
.ph-media--hero { margin-top: clamp(2rem, 4vw, 3.5rem); }

/* case-study page layout */
.cs-hero { padding-top: 140px; display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.cs-hero__cat { letter-spacing: 0.08em; }
.cs-hero__title {
  font-size: clamp(2rem, 4.6vw, 4.6rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 22ch;
  text-wrap: balance;
}
.cs-hero__intro { font-size: var(--body-lg); line-height: 1.5; color: var(--dim); max-width: 52ch; }

.cs-section { padding-top: clamp(56px, 8vw, 110px); }
.cs-section:last-of-type { padding-bottom: clamp(56px, 8vw, 110px); }
.cs-steps { margin-top: 1.2rem; }
.cs-steps .step { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
@media (max-width: 900px) { .cs-steps .step { grid-template-columns: 1fr; } }

.ph-media--feature { margin-top: 1.4rem; }
.cs-cliprow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.8rem, 1.5vw, 1.4rem);
  margin-top: clamp(0.8rem, 1.5vw, 1.4rem);
}
.cs-gallery-label { margin-top: clamp(1.6rem, 3vw, 2.6rem); }
.cs-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.8rem, 1.5vw, 1.4rem);
  margin-top: 0.8rem;
}
@media (max-width: 760px) {
  .cs-cliprow, .cs-gallery { grid-template-columns: 1fr; }
}

.cs-outcome {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 2.5vw, 2rem);
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 900px;
}
.cs-outcome p { line-height: 1.55; }
.cs-editable {
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: none;
}
.cs-quote { font-size: var(--body-lg); font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; }

.cs-cta {
  padding-top: clamp(80px, 11vw, 160px);
  padding-bottom: clamp(80px, 11vw, 160px);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
}
.cs-cta__title { font-size: var(--disp-lg); line-height: 0.92; }

.ph-media--live iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- device mockups + showcase selector ---------- */

.showcase {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: start;
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
}
.showcase__left {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.showcase__stage { width: 100%; display: flex; justify-content: center; }
.showcase__cap { text-align: center; min-height: 1.2em; max-width: 26ch; }

.showcase__right {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.6rem, 4vw, 4rem);
}
.showcase__howto {
  color: var(--dim);
  font-size: 0.98rem;
  line-height: 1.5;
  max-width: 46ch;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.showcase__rail {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1.4vw, 1rem);
  margin-top: 0.7rem;
  margin-bottom: 1.6rem;
}

/* thumbnails / selector — every thumb is exactly the same height,
   portrait ones are narrow, the landscape one is simply wider */
.thumb {
  position: relative;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #0d0d0c;
  cursor: pointer;
  height: clamp(122px, 15.5vw, 178px);
  aspect-ratio: 9 / 16;
  flex: 0 0 auto;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.thumb--h { aspect-ratio: 16 / 9; }
.thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.thumb::after {
  content: "\25B6";
  position: absolute;
  top: 42%; left: 50%;
  transform: translate(-40%, -50%);
  font-size: 0.85rem;
  color: #fff;
  opacity: 0.9;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
  pointer-events: none;
}
.thumb__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.4rem 0.45rem;
  font-size: 0.58rem;
  line-height: 1.2;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,0.82));
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.thumb:hover img, .thumb:focus-visible img { opacity: 0.88; }
.thumb.is-active { border-color: currentColor; transform: translateY(-2px); }
.thumb.is-active img { opacity: 1; }
.thumb.is-active::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .thumb, .thumb img { transition: none; }
  .thumb.is-active { transform: none; }
}

@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; }
  .showcase__left { position: static; }
  .showcase__right {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: clamp(1.6rem, 4vw, 2.4rem);
  }
}

/* ---------- player chrome (custom controls) ---------- */

.device-media {
  position: absolute;
  inset: 0;
  overflow: hidden;   /* clips YouTube's chrome margin — see below */
  background: #000;
}

/* The iframe is deliberately TALLER than its window. YouTube fits the video
   by width, so the extra height becomes empty letterbox margin inside the
   iframe, and YouTube draws its title/branding chrome at the top of that
   margin — above the picture, not over it. Shifting the iframe up by exactly
   the margin height puts the chrome outside the clip. The video itself is
   never scaled, cropped or repositioned: it fills the window edge to edge at
   its true aspect ratio. */
.player-host, .device-media iframe {
  position: absolute;
  border: 0;
  left: 0;
  top: -130px;
  width: 100%;
  height: calc(100% + 260px);
}

.player-toggle {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.player-toggle__glyph {
  font-size: 1.3rem;
  letter-spacing: 2px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
  pointer-events: none;
}
.is-playing .player-toggle:hover .player-toggle__glyph,
.is-playing .player-toggle:focus-visible .player-toggle__glyph { opacity: 0.9; }
@media (prefers-reduced-motion: reduce) { .player-toggle__glyph { transition: none; } }

/* The poster only introduces a clip before its first play. Once playback has
   started it never returns, so pausing leaves the live player on screen and
   the viewer sees the exact frame they paused on. */
.player-poster {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #000;
  overflow: hidden;
  display: block;
}
.player-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.player-poster__glyph {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(8, 8, 7, 0.55);
  border: 1px solid rgba(255,255,255,0.7);
  color: #fff;
  font-size: 1rem;
  padding-left: 3px;
}
.is-playing .player-poster,
.has-started .player-poster { display: none; }

/* ---------- iPhone mockup ---------- */

.phone {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 9 / 19.5;
  background: linear-gradient(150deg, #3a3a37 0%, #17110f 22%, #101010 55%, #2a2a28 100%);
  border-radius: 13% / 6%;
  padding: 10px;
  box-shadow:
    inset 0 0 0 2px rgba(232, 232, 227, 0.14),
    inset 0 0 0 6px #050504,
    0 30px 60px rgba(8, 8, 7, 0.4);
}
.phone::before {
  content: "";
  position: absolute;
  right: -2px; top: 26%;
  width: 3px; height: 13%;
  border-radius: 2px;
  background: linear-gradient(#4a4a46, #2a2a27);
}
.phone__screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 11% / 5.1%;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;      /* clip centred, screen letterboxes it */
  justify-content: center;
}
.phone__screen::after {
  content: "";
  position: absolute;
  top: 2.4%; left: 50%;
  transform: translateX(-50%);
  width: 30%; height: 3%;
  background: #000;
  border-radius: 999px;
  z-index: 4;
  pointer-events: none;
}
/* The video window is a true 9:16 Short screen. The player is never widened
   or scaled: it is exactly the width of the window, so YouTube fits the clip
   by width and centres it. Whatever the source aspect ratio, the whole frame
   is visible — nothing is cropped left, right, top or bottom — and the screen
   letterboxes anything that is not natively 9:16. */
.phone__video {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
}
.phone__video .player-poster img {
  object-fit: contain;   /* poster matches the player: never cropped */
}
/* opt-in per clip: set fit: "cover" in the data file to fill the screen with
   the centre strip instead (crops the sides — only for clips whose content is
   genuinely centred with padding either side) */
.phone__video .device-media.is-cover .player-host,
.phone__video .device-media.is-cover iframe {
  left: 50%;
  width: 316%;
  transform: translateX(-50%);
}
.phone__video .device-media.is-cover .player-poster img {
  object-fit: cover;
}

/* ---------- MacBook Pro mockup ---------- */

/* kept clear of the viewport edges, especially once stacked on mobile */
.laptop { width: 100%; max-width: 560px; margin: 0 auto; }
@media (max-width: 900px) { .laptop { max-width: 86%; } }
@media (max-width: 520px) { .laptop { max-width: 80%; } }
.laptop__lid {
  position: relative;
  background: linear-gradient(160deg, #34342f, #17110f 60%, #232320);
  border-radius: 14px 14px 0 0;
  padding: 11px 11px 14px;
  box-shadow: inset 0 0 0 1px rgba(232, 232, 227, 0.12);
}
.laptop__lid::after {
  content: "";
  position: absolute;
  top: 5px; left: 50%;
  transform: translateX(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #0c0c0b;
  box-shadow: inset 0 0 0 1px rgba(232,232,227,0.14);
}
.laptop__display {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* matches the footage, so nothing is cropped */
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}
.laptop__base {
  position: relative;
  height: 15px;
  margin: 0 auto;
  width: 112%;
  left: -6%;
  background: linear-gradient(180deg, #2a2a27, #3a3a36 40%, #191917);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 20px 40px rgba(8, 8, 7, 0.4);
}
.laptop__base::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 14%; height: 5px;
  background: #14140f;
  border-radius: 0 0 6px 6px;
}

/* ---------- full screen (native YouTube player, no restrictions) ---------- */

.fs-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.85rem;
  min-height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: border-color 0.2s ease;
}
.fs-btn:hover, .fs-btn:focus-visible { border-color: currentColor; }
@media (prefers-reduced-motion: reduce) { .fs-btn { transition: none; } }

.fs-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fs-overlay iframe { width: 100%; height: 100%; border: 0; }
.fs-close {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top, 0px));
  right: 1rem;
  z-index: 2;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  min-height: 44px;
  cursor: pointer;
}

/* ==================================================================
   V4 hero production carousel + video lightbox
   Reuses the .phone / .phone__screen / .phone__video / .device-media /
   .player-poster / .player-toggle mock-up already defined above (the
   same component the PluxNet case study renders).
   ================================================================== */

.hcar {
  --hcar-h: clamp(320px, 34vw, 480px);
  --hcar-gap: clamp(1.1rem, 2.4vw, 2.4rem);
  width: 100%;
  margin-top: clamp(1.6rem, 3.4vw, 3rem);   /* sits closer under "See How It Works" */
  padding-bottom: clamp(2.2rem, 4.5vw, 4rem);   /* clear space below the dots */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.1rem, 2.2vw, 1.8rem);
}

/* the whole composition (arrows + pair + annotation) is one centred row */
.hcar__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hcar-gap);
  width: 100%;
  max-width: 100%;
}

.hcar__viewport {
  position: relative;
  width: max-content;      /* the composition sizes to its content, then centres */
  max-width: 100%;
}

.hcar__slide {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: var(--hcar-gap);
  opacity: 0;
  visibility: hidden;
  transform: translateX(12px);
  transition: opacity 480ms ease, transform 480ms ease, visibility 0s linear 480ms;
}
.hcar__slide + .hcar__slide { position: absolute; inset: 0; }
.hcar__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 480ms ease, transform 480ms ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .hcar__slide, .hcar__slide.is-active {
    transition: opacity 120ms linear, visibility 0s;
    transform: none;
  }
}

/* behind-the-scenes still: matched height, cropped not stretched */
.hcar__bts {
  position: relative;
  height: var(--hcar-h);
  aspect-ratio: 3 / 2;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #d9d9d3;
  box-shadow: 0 30px 60px rgba(8, 8, 7, 0.30);
}
.hcar__bts img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* phone: same mock-up, height-matched and vertically centred against the still */
.hcar__phonewrap { display: flex; align-items: center; }
.hcar .phone {
  height: var(--hcar-h);
  width: auto;
  max-width: none;
  aspect-ratio: 9 / 19.5;
  padding: 8px;
}
.hcar .player-poster { cursor: pointer; }
.hcar .player-poster img { object-fit: cover; }

/* handwritten annotation, right of the phone */
.hcar__note {
  --note-w: clamp(96px, 9.5vw, 150px);
  width: var(--note-w);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  color: var(--ink);
  align-self: center;
  /* lift the block so the arrow tip lands level with the phone play button
     rather than below it (tip sits at 74/84 down the SVG) */
  transform: translateY(calc(-0.32 * var(--note-w) - 1.35rem));
}
.hcar__note-text {
  font-family: "Caveat", "Bradley Hand", cursive;
  font-size: clamp(1.15rem, 1.65vw, 1.6rem);
  line-height: 1.06;
}
.hcar__note-arrow { width: 100%; height: auto; opacity: 0.9; }

/* play trigger over the still (mobile only) */
.hcar__btsplay {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.hcar__btsplay span {
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(8, 8, 7, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: #fff;
  font-size: 1.1rem;
  padding-left: 4px;
}
.hcar__btsplay:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }

/* mobile annotation sits inside the still so it adds no height */
.hcar__note--m {
  position: absolute;
  right: 3.5%;
  bottom: 5%;
  width: 34%;
  max-width: 132px;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
  text-shadow: 0 1px 8px rgba(8, 8, 7, 0.65);
  pointer-events: none;
}
.hcar__note--m .hcar__note-text { font-size: clamp(0.95rem, 4vw, 1.25rem); }

/* navigation arrows, symmetrical either side of the composition */
.hcar__nav {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.hcar__nav:hover, .hcar__nav:focus-visible {
  border-color: currentColor;
  background: rgba(8, 8, 7, 0.05);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) { .hcar__nav { transition: none; } .hcar__nav:hover { transform: none; } }

/* dots, centred beneath the whole composition */
.hcar__dots { display: flex; gap: 0.55rem; align-items: center; }
.hcar__dot {
  width: 9px; height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.hcar__dot.is-active { background: var(--ink); transform: scale(1.25); }
.hcar__dot:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hcar__dot { transition: none; } }

/* tablet: pair stays side by side, annotation steps aside */
@media (max-width: 1100px) {
  .hcar { --hcar-h: clamp(300px, 38vw, 430px); }
  .hcar__slide { grid-template-columns: auto auto; }
  .hcar__bts { aspect-ratio: 4 / 3; }
  .hcar__note { display: none; }
}

/* mobile: the still alone becomes the trigger, no phone in the carousel */
@media (max-width: 860px) {
  .hcar { --hcar-h: auto; --hcar-gap: 0.5rem; }
  .hcar__viewport { width: 100%; }
  .hcar__slide { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .hcar__bts {
    height: auto;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 3 / 2;
  }
  .hcar__phonewrap { display: none; }      /* phone appears in the lightbox instead */
  .hcar__btsplay { display: grid; }
  .hcar__note--m { display: flex; }
}

/* ---------------- lightbox: frosted white over the live page ---------------- */

body.hcar-lightbox-open { position: fixed; width: 100%; overflow: hidden; }
/* Keep the live page from repainting behind the fixed video layer. Mobile
   browsers can visibly flash when an animated page, a fixed body and a
   backdrop-filter are composited together. Visibility preserves the page's
   layout and scroll position while the modal owns the screen. */
body.hcar-lightbox-open > .nav,
body.hcar-lightbox-open > main,
body.hcar-lightbox-open > footer,
body.hcar-lightbox-open > #menu-overlay { visibility: hidden; }

.lbx { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
.lbx__backdrop {
  position: absolute;
  inset: 0;
  background: #fcfcfa;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.lbx__panel {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
  max-height: 100svh;
}
.lbx__stack { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.lbx__phone {
  height: min(72svh, 600px);
  width: auto;
  max-width: none;
  aspect-ratio: 9 / 19.5;
}
.lbx__title { color: var(--dim-ink); }

/* controls stay dark so they read against the white frosted backdrop */
.lbx__close {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top, 0px));
  right: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid rgba(8, 8, 7, 0.2);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  text-transform: uppercase;
  padding: 0.55rem 0.85rem;
  min-height: 44px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(8, 8, 7, 0.18);
}

.lbx__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: min(100%, 420px);
  padding: 0.4rem 0.6rem;
  background: var(--ink);
  border: 1px solid rgba(8, 8, 7, 0.2);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(8, 8, 7, 0.18);
}
.lbx__ctl {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--paper);
  font-size: 0.9rem;
  cursor: pointer;
}
.lbx__ctl:hover, .lbx__ctl:focus-visible { background: rgba(255, 255, 255, 0.16); }
.lbx__range { flex: 1; accent-color: var(--paper); cursor: pointer; min-width: 0; height: 24px; }
.lbx__close:focus-visible, .lbx__ctl:focus-visible, .lbx__range:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .lbx__phone { height: min(64svh, 520px); }
  .lbx__bar { width: min(100%, 320px); }
}

/* ==================================================================
   V4: navigation, accordion, outcome-group and form improvements.
   Section padding, row spacing and heading scale are deliberately the
   original Version 4 values; nothing here compresses the page rhythm.
   ================================================================== */

/* ---- anchor targets clear the sticky header (layout bug fix) ---- */
html { scroll-padding-top: calc(var(--header-h) + var(--anchor-gap)); }
:target { scroll-margin-top: calc(var(--header-h) + var(--anchor-gap)); }
#main, #partnership, #work, #content-plan, #process, #capacity, #faq, #apply,
.hcar, .brands, .guarantee, .stories, .invest {
  scroll-margin-top: calc(var(--header-h) + var(--anchor-gap));
}
@media (max-width: 1080px) { :root { --header-h: 66px; --anchor-gap: 22px; } }
@media (max-width: 560px)  { :root { --header-h: 62px; --anchor-gap: 18px; } }

/* ---- outcome groups (four themed groups, full ink contrast) ---- */
.ogrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.8vw, 2.6rem);
  margin-top: 1.4rem;
}
.ogroup h3 {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  padding-bottom: 0.6rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.ogroup ul { list-style: none; }
.ogroup li {
  color: var(--ink);            /* readable at rest, never faint */
  font-size: 0.98rem;
  line-height: 1.5;
  padding: 0.3rem 0;
}
@media (max-width: 700px) { .ogrid { grid-template-columns: minmax(0, 1fr); } }

/* ---- production-story transition now carries a single CTA ---- */
.bigrow--cta:hover { padding-left: 0; }
.bigrow--cta .lbl { max-width: 22ch; }
@media (max-width: 760px) {
  .bigrow--cta { grid-template-columns: auto 1fr; row-gap: 1rem; }
  .bigrow--cta .btn { grid-column: 1 / -1; justify-self: start; }
}

/* ---- shared style for the repeated section CTA ---- */
.sect-cta { margin-top: clamp(1.8rem, 3.4vw, 2.8rem); }

/* ---- shortened 90-day plan introduction ---- */
.plan__lede { max-width: 60ch; }
.plan__lede p + p { margin-top: 0.7rem; }

/* ---- accordion open/closed indicators ---- */
.faq__q .chev, .sepcosts summary .chev { transition: transform 0.22s ease; }
.faq__q[aria-expanded="true"] .chev,
.sepcosts[open] summary .chev { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .faq__q .chev, .sepcosts summary .chev { transition: none; }
}

/* ---- application form: proper Additional Context textarea ---- */
.app-form textarea {
  width: 100%;
  min-height: 140px;
  background: rgba(8, 8, 7, 0.04);
  border: 1px solid rgba(8, 8, 7, 0.25);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.85rem 0.95rem;
  resize: vertical;
}
.app-form textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.app-form textarea::placeholder { color: rgba(8, 8, 7, 0.45); }

/* respectful note when the stated budget sits under the entry level */
.fstatus[data-state="note"] {
  border: 1px solid var(--line-ink);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  color: var(--ink);
}
.ty-note {
  margin-top: 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 40rem;
  text-align: left;
}

/* the decorative final-CTA arrow points into empty space once the
   display lines wrap on small screens, so it is hidden there */
@media (max-width: 760px) { .finale__lines .arr { display: none; } }

/* ==================================================================
   V4.3: section-introduction hierarchy and the bottleneck chapter.

   Three deliberate section structures, applied selectively:
     A  .chead   centred chapter introduction  (major conceptual moments)
     B  .ehead   left-aligned editorial intro  (narrative argument)
     C  .fhead   functional heading            (scanning and comparison)

   Everything here is additive. No existing section padding, row
   spacing or heading scale is modified: the spacious Version 4
   pacing is preserved deliberately.
   ================================================================== */

/* ---------- Structure A: centred chapter introduction ---------- */

.chead {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(0.75rem, 1.2vw, 1.05rem);   /* label sits close to its headline */
}
.chead .slabel { justify-content: center; }
/* chapter label: the existing dotted section label set in the mono face */
.chead__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.chead__title {
  font-size: clamp(1.9rem, 3.5vw, 3.25rem);
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: -0.022em;
  max-width: min(100%, 1010px);          /* two to three balanced lines */
  text-wrap: balance;
}
.chead__lede {
  font-size: var(--body-lg);
  line-height: 1.45;
  color: var(--dim);
  max-width: min(100%, 820px);
  text-wrap: pretty;
}

/* centred eyebrow above a full-bleed .giant chapter heading. The giant
   heading's original top padding moves to the eyebrow, so the section
   keeps exactly the spacing budget it had before. */
.chead__eyebrow {
  display: block;
  text-align: center;
  margin-bottom: clamp(0.65rem, 1.1vw, 1rem);
}
.stories .chead__eyebrow,
.invest .chead__eyebrow { padding-top: clamp(60px, 8vw, 120px); }
.stories .chead__eyebrow + .giant,
.invest .chead__eyebrow + .giant { padding-top: 0; }
#process .chead__eyebrow { padding-top: clamp(1.5rem, 3vw, 2.6rem); }

/* short centred line under a giant chapter heading */
.chead__under {
  margin: clamp(1.4rem, 2.6vw, 2.2rem) auto 0;
  max-width: min(100%, 760px);
  text-align: center;
  font-size: var(--body-lg);
  line-height: 1.45;
  color: var(--dim);
  text-wrap: pretty;
}
.theme-light .chead__under { color: var(--dim-ink); }

/* ---------- Structure B: left-aligned editorial introduction ---------- */

.ehead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.7rem, 1.1vw, 1rem);
}
.ehead__title {
  font-size: clamp(1.7rem, 3.1vw, 2.9rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 26ch;
}
.ehead__lede {
  font-size: var(--body-lg);
  line-height: 1.45;
  color: var(--dim);
  max-width: 54ch;
}

/* the editorial intro is followed by its supporting copy, then the
   functional index row */
.ehead + .plan__lede { margin-top: clamp(1.3rem, 2.3vw, 1.9rem); }
.ehead + .contin__grid { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ---------- Structure C: functional heading ---------- */

.fhead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}
.fhead__title {
  font-size: clamp(1.35rem, 2.2vw, 1.95rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 34ch;
}

/* ---------- the bottleneck chapter ---------- */

.chapter { position: relative; }

/* "02" stays a secondary editorial detail and never forces the main
   composition into two columns */
.chapter__num {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: clamp(1.8rem, 3.4vw, 3rem);
  color: var(--dim);
}
.chapter__num b {
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.6vw, 2.6rem);
  line-height: 1;
  color: var(--ink);
  opacity: 0.42;
}
/* Only lifted into the outer margin where there is genuinely room beside
   the centred headline, so it can never collide with it. */
@media (min-width: 1400px) {
  .chapter__num {
    position: absolute;
    top: clamp(80px, 11vw, 170px);
    left: var(--gutter);
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin-bottom: 0;
    max-width: 7.5rem;
  }
}

/* ---- the supplied bottleneck diagram ---- */

/* diagram left, supporting copy right, under the centred chapter head.
   The copy column is vertically centred against the taller diagram. */
.bsplit {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
  margin-top: clamp(2.8rem, 5.5vw, 4.8rem);
}
.bsplit__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.8rem, 3.2vw, 2.6rem);
}

.bdiag {
  width: 100%;
  margin: 0;
}

.bdiag__btn {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius);
  color: inherit;
}
.bdiag__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;        /* reserves the space: no layout shift */
  border-radius: var(--radius);
  /* the supplied still sits on a lighter ground than the page, so a hairline
     plus a slight lift make it read as a deliberate plate */
  border: 1px solid var(--line);
  box-shadow: 0 2px 16px rgba(8, 8, 7, 0.07), 0 1px 3px rgba(8, 8, 7, 0.05);
}
.bdiag__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* Understated expand affordance. In the two-column layout the diagram is
   roughly half the content width at every size, so its own labels are small
   everywhere: the affordance is always available. */
.bdiag__zoom {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(252, 252, 250, 0.86);
  color: var(--ink);
}
.bdiag__zoom::before {
  content: "";
  width: 9px; height: 9px;
  border: 1px solid currentColor;
  border-radius: 1px;
  opacity: 0.75;
}

/* supporting description: left-aligned beside the diagram, restrained
   measure so the column never runs long */
.bdiag__desc {
  margin: 0;
  text-align: left;
  max-width: 46ch;
}

/* the signature reads as an editorial mark, quiet, under the copy */
.bsplit .position__sig { margin-top: 0; }

/* stack the diagram above its copy before the columns get too narrow to
   hold either one comfortably */
@media (max-width: 900px) {
  .bsplit {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.8rem, 4vw, 2.6rem);
  }
  .bdiag__desc { max-width: none; }
}

/* ---- expanded diagram: same frosted white treatment as the video lightbox ---- */

.dlbx {
  position: fixed;
  inset: 0;
  z-index: 1000;              /* same layer as the video lightbox */
  display: none;
  background: rgba(252, 252, 250, 0.80);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}
.dlbx.is-open { display: block; }
body.dlbx-open { overflow: hidden; }

.dlbx__scroll {
  position: absolute;
  inset: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
}
.dlbx__img {
  border-radius: var(--radius);
  box-shadow: 0 2px 40px rgba(8, 8, 7, 0.10);
  /* Open with the complete diagram visible on phones and tablets. Browser
     pinch zoom remains available for inspecting the smaller labels. */
  width: auto;
  max-width: calc(100vw - 24px);
  max-height: calc(100svh - 24px);
  height: auto;
  object-fit: contain;
}
@media (min-width: 1000px) {
  .dlbx__img { max-width: calc(100vw - 80px); max-height: 88svh; }
}

.dlbx__close {
  position: absolute;
  top: clamp(10px, 2vw, 22px);
  right: clamp(10px, 2vw, 22px);
  z-index: 2;
  width: 42px; height: 42px;
  display: grid;
  place-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(252, 252, 250, 0.92);
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
}
.dlbx__close:hover, .dlbx__close:focus-visible { background: var(--ink); color: var(--paper); }
.dlbx__hint {
  position: absolute;
  left: 50%;
  bottom: clamp(10px, 2vw, 22px);
  transform: translateX(-50%);
  z-index: 2;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(252, 252, 250, 0.92);
  white-space: nowrap;
  font-size: 0.66rem;
}
@media (min-width: 1000px) { .dlbx__hint { display: none; } }

/* ==================================================================
   V5: components introduced by the Version 5 content changes.
   Purely additive on top of the approved V4 system. No existing V4
   padding, row spacing or heading scale is modified.
   ================================================================== */

/* ---- hero eyebrow: the category has to survive a quick scan ---- */
.hero__eyebrow {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* ---- bottleneck: problem to solution transformation rows ---- */
.tform__head {
  display: grid;
  /* 5 / 42 / 6 / 47 proportions, as fr so the column gap comes out of the
     tracks instead of overflowing the row */
  grid-template-columns: minmax(0, 5fr) minmax(0, 42fr) minmax(0, 6fr) minmax(0, 47fr);
  gap: 0 1rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: 0.7rem;
}
.tform {
  list-style: none;
  counter-reset: tf;
}
.tform__row {
  display: grid;
  /* 5 / 42 / 6 / 47 proportions, as fr so the column gap comes out of the
     tracks instead of overflowing the row */
  grid-template-columns: minmax(0, 5fr) minmax(0, 42fr) minmax(0, 6fr) minmax(0, 47fr);
  gap: 0 1rem;
  align-items: baseline;
  padding: clamp(0.9rem, 1.8vw, 1.35rem) 0;
  border-top: 1px solid var(--line);
}
.tform__row:last-child { border-bottom: 1px solid var(--line); }
.tform__n {
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  color: var(--dim);
}
.tform__problem,
.tform__solution {
  font-size: clamp(1.05rem, 1.85vw, 1.65rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--dim);
  transition: color 0.45s ease;
}
.tform__arrow {
  align-self: center;
  color: var(--ink);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}
.tform__arrow svg { width: 100%; height: auto; max-width: 40px; }

/* scroll-lighting, adapted to the transformation:
   problem resolves first, then the arrow, then the solution */
.tform__row.lit .tform__problem { color: var(--ink); }
.tform__row.lit .tform__arrow { opacity: 1; transform: none; }
.tform__row.lit .tform__solution {
  color: var(--ink);
  transition-delay: 0.18s;
}
.tform__row:hover .tform__problem,
.tform__row:hover .tform__solution { color: var(--ink); }
.tform__row:hover .tform__arrow { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tform__problem, .tform__solution, .tform__arrow { transition: none; }
  .tform__problem, .tform__solution { color: var(--ink); }
  .tform__arrow { opacity: 1; transform: none; }
}
@media (max-width: 860px) {
  .tform__head { display: none; }
  .tform__row {
    grid-template-columns: 3.2rem minmax(0, 1fr);
    row-gap: 0.5rem;
  }
  .tform__n { grid-row: 1; }
  .tform__problem { grid-column: 2; }
  .tform__arrow {
    grid-column: 2;
    width: 26px;
    transform: rotate(90deg) translateX(-4px);
    transform-origin: left centre;
    margin: 0.15rem 0 0.15rem 0.1rem;
  }
  .tform__row.lit .tform__arrow { transform: rotate(90deg); }
  .tform__solution { grid-column: 2; }
}

/* ---- 90-day plan: promise, split layout, four outputs ---- */
.plan__promise {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.1rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding: clamp(0.9rem, 1.7vw, 1.2rem) clamp(1rem, 2vw, 1.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.plan__promise strong {
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.plan__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  margin-top: clamp(2.4rem, 4.5vw, 3.6rem);
}
.plan__split .ninety__list { list-style: none; }
/* inside the narrower split column the V4 three-column row is too tight,
   so the label sits above a two-line-friendly heading and copy */
.plan__split .ninety__row {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
}
.plan__split .ninety__row h3 {
  font-size: clamp(1.15rem, 1.75vw, 1.5rem);
  line-height: 1.2;
  max-width: 22ch;
}
.plan__split .ninety__row p { font-size: 0.95rem; max-width: 46ch; }
.plan__split .ninety__row:first-child { border-top: 1px solid var(--line); }
.ninety__row[data-plan-src] { cursor: default; }
.ninety__row[data-plan-src]:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.ninety__row.is-active h3 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ---- the 90-day plan mock-up ---- */
.planmock { margin: 0; position: sticky; top: calc(var(--header-h) + 24px); }
.pm__doc {
  background: #F4F4F0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 2vw, 1.6rem);
  box-shadow: 0 2px 22px rgba(8, 8, 7, 0.06);
}
.pm__top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.pm__top .mono:first-child { color: var(--ink); }
.pm__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.35s ease;
}
.pm__meta > div { display: flex; flex-direction: column; gap: 0.2rem; }
.pm__meta b { font-size: 0.86rem; font-weight: 500; line-height: 1.3; }
.pm__grid {
  display: grid;
  grid-template-columns: minmax(84px, 0.8fr) repeat(3, minmax(0, 1fr));
  gap: 0 clamp(0.5rem, 1vw, 0.9rem);
  padding: 0.9rem 0;
}
.pm__labels, .pm__month { display: flex; flex-direction: column; }
.pm__month + .pm__month { border-left: 1px solid var(--line); padding-left: clamp(0.5rem, 1vw, 0.9rem); }
.pm__mh {
  color: var(--ink);
  padding-bottom: 0.55rem;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}
.pm__rl, .pm__cell {
  padding: 0.42rem 0;
  min-height: 2.55rem;
  transition: color 0.3s ease, background 0.3s ease;
}
.pm__rl { color: var(--dim); }
.pm__cell {
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--dim);
  letter-spacing: -0.01em;
}
.pm__rec {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--line);
  transition: background 0.35s ease;
}
.pm__rec b {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.pm__rec--cap b { font-family: var(--font-disp); font-weight: 400; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.01em; }
.pm__cap { display: block; margin-top: 0.7rem; }

/* highlight state, driven by hover/focus on an output row */
.pm__cell.is-lit, .pm__rl.is-lit { color: var(--ink); }
.pm__meta.is-lit, .pm__rec.is-lit { background: rgba(8, 8, 7, 0.045); }
.pm__meta.is-lit b, .pm__rec.is-lit b { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .pm__cell, .pm__rl, .pm__meta, .pm__rec { transition: none; }
}

/* ---- integrated four-step process strip ---- */
.pstrip { margin-top: clamp(2.6rem, 5vw, 4rem); }
.pstrip__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.pstrip__item {
  padding: clamp(1rem, 2vw, 1.5rem) clamp(0.9rem, 1.6vw, 1.4rem);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.pstrip__item:last-child { border-right: 1px solid var(--line); }
.pstrip__list { border-bottom: 1px solid var(--line); }
.pstrip__item h4 {
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0.55rem 0 0.4rem;
}
.pstrip__item p { font-size: 0.92rem; line-height: 1.45; color: var(--dim); }

/* ---- capacity: outcome + operating-model lines, no per-tier CTA ---- */
.tier-row { grid-template-columns: minmax(0, 3.4fr) minmax(0, 3.2fr) minmax(0, 4fr); }
.tier-row__outcome {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 1.1rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
  max-width: 34ch;
}
.tier-row__concept {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  margin-top: clamp(1rem, 2vw, 1.6rem);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.tier-row__concept b {
  font-family: var(--font-disp);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 1.9vw, 1.7rem);
  letter-spacing: 0.005em;
  line-height: 1.05;
}
.capacity__close {
  margin-top: clamp(2.4rem, 4.5vw, 3.4rem);
  max-width: 64ch;
}
.capacity__close p { color: var(--dim-ink); line-height: 1.55; }

/* ---- responsibilities: grouped duties + process flow ---- */
.fhead__lede {
  font-size: var(--body-lg);
  line-height: 1.45;
  color: var(--dim);
  max-width: 56ch;
}
.rgroups { display: flex; flex-direction: column; margin-top: 0.4rem; }
.rgroup { padding: 0.85rem 0; border-top: 1px solid var(--line); }
.rgroup:last-child { border-bottom: 1px solid var(--line); }
.rgroup h4 {
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}
.rgroup p { font-size: 0.94rem; line-height: 1.45; color: var(--dim-ink); }
.pflow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.pflow li {
  background: #F6F6F2;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: clamp(0.8rem, 1.5vw, 1.1rem);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* ---- guarantee: remedy list and the both-ways note ---- */
.guar__remedy {
  max-width: 46rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  text-align: left;
}
.guar__lead { font-size: var(--body-lg); line-height: 1.45; margin-bottom: 1rem; }
.guar__list { list-style: none; }
.guar__list li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.4;
}
.guar__list li:last-child { border-bottom: 1px solid var(--line); }
.guar__both {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  max-width: 46rem;
  margin: clamp(1.8rem, 3.5vw, 2.6rem) auto 0;
  text-align: left;
}
.guar__both p { margin-top: 0.4rem; font-size: 0.94rem; line-height: 1.5; color: var(--dim); }

/* ---- qualification: grouped fit reasons ---- */
.fitgroups { display: flex; flex-direction: column; margin-top: 0.4rem; }
.fitgroup { padding: 0.85rem 0; border-top: 1px solid var(--line); }
.fitgroup:last-child { border-bottom: 1px solid var(--line); }
.fitgroup h4 {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.4rem;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}
.fitgroup p { margin-left: 1.9rem; font-size: 0.94rem; line-height: 1.45; color: var(--dim); }

/* ---- continuity payoff ---- */
.contin__payoff {
  margin-top: clamp(2.4rem, 4.5vw, 3.6rem);
  padding-top: clamp(1.4rem, 2.6vw, 2rem);
  border-top: 1px solid var(--line);
  font-size: clamp(1.4rem, 2.6vw, 2.3rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 30ch;
}

/* ---- form: helper text, conditional field, next steps, consent ---- */
.ghelp {
  display: block;
  margin: 0.25rem 0 0.6rem;
  font-size: 0.85rem;
  color: var(--dim);
}
.fld--conditional {
  border-left: 2px solid var(--line-ink);
  padding-left: clamp(0.8rem, 1.6vw, 1.2rem);
}
.nextup {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  padding: clamp(0.95rem, 1.8vw, 1.3rem);
  border: 1px solid var(--line-ink);
  border-radius: var(--radius);
}
.nextup__flow {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  margin: 0.6rem 0 0.7rem;
}
.nextup__flow li {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nextup__flow li + li::before { content: "\2192"; margin-right: 0.55rem; opacity: 0.5; }
.nextup p { font-size: 0.9rem; line-height: 1.5; color: var(--dim-ink); }
.consent {
  margin-top: 1rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--dim-ink);
}
.finale__reassure {
  font-size: 0.9rem !important;
  color: var(--dim) !important;
}

/* ---- privacy page ---- */
.legal { max-width: 44rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.legal h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0.5rem;
}
.legal p { line-height: 1.6; color: var(--dim); }
.legal p + p { margin-top: 0.7rem; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- V5 responsive ---- */
@media (max-width: 1080px) {
  .plan__split { grid-template-columns: minmax(0, 1fr); }
  .planmock { position: static; }
  .pstrip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pstrip__item:nth-child(2n) { border-right: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .tier-row { grid-template-columns: minmax(0, 1fr); }
  .tier-row__outcome { max-width: none; }
  .pflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guar__both { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .pm__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pm__labels { display: none; }
  .pm__grid { padding-top: 0; }
  .pm__month { padding: 0.7rem 0; border-top: 1px solid var(--line); }
  .pm__month:first-of-type { border-top: 0; }
  .pm__month + .pm__month { border-left: 0; padding-left: 0; }
  .pm__cell { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.6rem; min-height: 0; }
  .pm__cell::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: var(--mono-size);
    text-transform: uppercase;
    color: var(--dim);
  }
  .pm__meta { grid-template-columns: minmax(0, 1fr); }
  .pstrip__list { grid-template-columns: minmax(0, 1fr); }
  .pstrip__item { border-right: 1px solid var(--line); }
  .pflow { grid-template-columns: minmax(0, 1fr); }
  .plan__promise { flex-direction: column; gap: 0.4rem; }
}

/* ==================================================================
   V5.1: section surfaces, dividers and the restructured outcome
   section. Backgrounds alternate so adjacent chapters read as
   separate rather than as one continuous scroll.
   ================================================================== */

/* ---- surfaces ---- */
.surface--white { background: #FCFCFA; color: var(--ink); }
.surface--white .mono, .surface--white .chipdex { color: var(--dim-ink); }
.surface--light { background: #F6F6F2; color: var(--ink); }
.surface--light .mono, .surface--light .chipdex { color: var(--dim-ink); }

/* dotted ground: the page halftone, held behind the content */
.surface--dots { position: relative; isolation: isolate; }
.surface--dots::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(8, 8, 7, 0.13) 1px, transparent 1.6px);
  background-size: 5px 5px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

/* hairline where two sections share the same ground */
.sec-divide { border-top: 1px solid var(--line); }

/* ---- offer name, introduced once in the bottleneck chapter ---- */
.offer__intro {
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
  font-size: var(--body-lg);
  line-height: 1.45;
  color: var(--dim);
  max-width: 54ch;
}
.offer__intro b { color: var(--ink); font-weight: 500; }

/* ---- outcome: label, then headline, then lede, then the four groups ---- */
.outcome__head {
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 1.4vw, 1.15rem);
  max-width: min(100%, 62rem);
}
.outcome__title {
  font-size: clamp(1.7rem, 3.1vw, 2.9rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 26ch;
}
.outcome__lede {
  font-size: var(--body-lg);
  line-height: 1.45;
  color: var(--dim);
  max-width: 58ch;
}
.outcome__bar { padding-top: clamp(2.4rem, 4.5vw, 3.6rem); padding-bottom: 0; }

.ogrid--v5 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 0;
  margin-top: 0;
}
.ogroup--v5 {
  padding: clamp(1.5rem, 2.8vw, 2.2rem) 0 clamp(1.7rem, 3.2vw, 2.6rem);
  border-top: 1px solid var(--line);
}
.ogroup--v5 h3 {
  font-size: clamp(1.15rem, 1.75vw, 1.5rem);
  line-height: 1.2;
  padding-bottom: 0;
  margin: 0.5rem 0 1rem;
  border-bottom: 0;
  max-width: 26ch;
}
.ogroup--v5 ul { display: flex; flex-direction: column; gap: 0.75rem; }
.ogroup--v5 li {
  display: grid;
  grid-template-columns: 0.85rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: baseline;
  padding: 0;
  color: var(--dim);
  line-height: 1.5;
  max-width: 42ch;
}
.ogroup--v5 li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  transform: translateY(-0.15em);
}
@media (max-width: 820px) {
  .ogrid--v5 { grid-template-columns: minmax(0, 1fr); }
  .ogroup--v5 li, .ogroup--v5 h3 { max-width: none; }
}

/* the FAQ sits on its own ground now, so it keeps its top padding */
#faq.surface--light { padding-top: clamp(80px, 11vw, 170px); }

/* ---- nav: the V5 labels are descriptive and therefore longer. V4 centred
   the links with position:absolute, which takes them out of flow and lets
   them run under the CTA once the labels grow. They are now an in-flow
   flex item that centres inside the space left between the logo and the
   CTA, so an overlap is structurally impossible at any width. ---- */
.nav > nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.nav__links {
  position: static;
  left: auto;
  transform: none;
  flex-wrap: nowrap;
  justify-content: center;
}
.nav__links a { white-space: nowrap; }
@media (max-width: 1200px) {
  .nav__links { display: none; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .nav .btn--nav { padding: 0.35rem 0.35rem 0.35rem 0.75rem; font-size: 0.88rem; }
}
@media (min-width: 1201px) and (max-width: 1500px) {
  .nav__links { gap: clamp(0.9rem, 1.6vw, 1.4rem); }
  .nav__links a { font-size: 0.92rem; }
}

/* ==================================================================
   V5.2: dark chapters, outcome bullets, brands heading, spacing.
   ================================================================== */

/* ---- dark chapters ----
   The custom properties are redefined inside the section, so every
   component that already uses --ink / --dim / --line inverts with it
   instead of needing a parallel set of dark-mode rules. */
.surface--dark {
  --ink: #F4F4EF;
  --paper: #0C0C0B;
  --dim: rgba(244, 244, 239, 0.68);
  --dim-ink: rgba(244, 244, 239, 0.68);
  --line: rgba(244, 244, 239, 0.20);
  --line-ink: rgba(244, 244, 239, 0.20);
  background: #0C0C0B;
  color: #F4F4EF;
  position: relative;
  isolation: isolate;
}
.surface--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(244, 244, 239, 0.10) 1px, transparent 1.6px);
  background-size: 5px 5px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.surface--dark ::selection { background: #F4F4EF; color: #0C0C0B; }
.surface--dark :focus-visible { outline-color: #F4F4EF; }

/* the plan document stays a light sheet on the dark ground, so it
   restores the light token set for its own contents */
.surface--dark .pm__doc {
  --ink: #080807;
  --dim: rgba(8, 8, 7, 0.68);
  --dim-ink: rgba(8, 8, 7, 0.68);
  --line: rgba(8, 8, 7, 0.16);
  --line-ink: rgba(8, 8, 7, 0.16);
  color: #080807;
  background: #F6F6F2;
  box-shadow: 0 2px 34px rgba(0, 0, 0, 0.45);
}
.surface--dark .pm__cap { color: rgba(244, 244, 239, 0.62); }

/* ---- outcome bullets take the continuity index treatment ---- */
.ogroup--v5 h3 { margin-top: 0; }
.ogroup--v5 ul { gap: 0; }
.ogroup--v5 li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding: 0.8rem 0;
  color: var(--dim);
  line-height: 1.5;
  max-width: none;
}
.ogroup--v5 li::before { content: none; }
.ogroup--v5 .n {
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  color: var(--dim);
}

/* ---- brands: the line reads as a real heading ---- */
.brands__title {
  font-size: clamp(1.35rem, 2.4vw, 2.1rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* ---- continuity followed a full-height dark chapter, so the empty
   paper run above it is cut by roughly half ---- */
.contin-sec { padding-top: clamp(48px, 5.6vw, 86px); }

/* ==================================================================
   V5.3: breathing room under the dark chapter, quieter dot texture.
   ================================================================== */

/* The qualification chapter sits directly under the black guarantee
   block, so the black-to-paper edge is already the divider. The extra
   hairline is gone and the heading now starts clear of the boundary
   instead of sitting on it. */
.qual-sec {
  padding-top: clamp(58px, 6.6vw, 104px);
  padding-bottom: clamp(80px, 11vw, 170px);
}
/* the dark block above it closes a little tighter to compensate */
.guarantee.surface--dark { padding-bottom: clamp(58px, 7vw, 112px); }

/* Dot texture at 40% strength in the plan and application chapters.
   Ground colour is unchanged; only the dots are quieter. */
#content-plan.surface--dark::before { opacity: 0.4; }
#apply .halftone { opacity: 0.4; }

/* the plan section now carries two promise strips: no charge, then turnaround */
.plan__promise + .plan__promise { margin-top: 0.6rem; }

/* ==================================================================
   V5.1: living textures. Animated grain over the whole page, and the
   static halftones replaced by canvas dot fields that drift and
   answer the pointer. Mounted by assets/js/texture.js.
   ================================================================== */

/* ---- animated grain ---- */
.grain {
  position: fixed;
  inset: -50% 0 0 -50%;
  width: 200%;
  height: 200vh;
  z-index: 400;
  pointer-events: none;
  opacity: 0.5;
  background-repeat: repeat;
  background-attachment: fixed;
  will-change: transform;
  animation: grain-shift 0.5s steps(1) infinite;
}
@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  17% { transform: translate(-5%, -10%); }
  33% { transform: translate(3%, -15%); }
  50% { transform: translate(12%, 9%); }
  67% { transform: translate(9%, 4%); }
  83% { transform: translate(-1%, 7%); }
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; opacity: 0.35; }
}

/* ---- dot fields ---- */
.dotfield {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  overflow: hidden;
}
.dotfield canvas { display: block; width: 100%; height: 100%; }

/* the canvas replaces the static CSS dot pattern wherever it mounts */
.has-dotfield .halftone {
  background-image: none;
  -webkit-mask-image: none;
          mask-image: none;
}
.surface--dark.has-dotfield::before { content: none; }
.surface--dark.has-dotfield > .dotfield { z-index: -1; }

/* On phones the nav CTA loses its label and becomes a wordless square, which
   reads as a cut-off button. The sticky bar already carries the full call to
   action once the hero scrolls away, and the hero holds its own button before
   that, so the square is removed rather than shown without words. */
@media (max-width: 560px) {
  .nav .btn--nav { display: none; }
}
/* the sticky bar is the mobile call to action, so give it real presence */
@media (max-width: 560px) {
  .mcta a { font-size: 1rem; }
}

/* ==================================================================
   V5.1.1: navigation set in all caps, header and footer. Letter
   spacing is opened slightly so caps stay legible at this size.
   ================================================================== */
.nav__links a,
.footer__links a {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.nav__links a { font-size: 0.86rem; }
@media (min-width: 1201px) and (max-width: 1500px) {
  .nav__links a { font-size: 0.8rem; }
}

/* ==================================================================
   V5.1.2: every heading level set in capitals.

   Applies to h1 through h6 and to the controls that act as headings
   (the FAQ buttons sit inside h3 and inherit; the accordion summary
   is included so it does not read as the odd one out).

   Caps need different metrics from the mixed case these headings were
   drawn for: the tight negative tracking used for lowercase display
   type collapses in capitals, and caps have no descenders, so line
   height can close up. Both are corrected per size band rather than
   globally, so the large chapter type and the small group headings
   each stay in proportion.
   ================================================================== */

h1, h2, h3, h4, h5, h6,
.faq__q,                 /* a button inside an h3: form controls do not
                            inherit text-transform, so name it directly */
.sepcosts summary {
  text-transform: uppercase;
}

/* --- large chapter headings --- */
h1,
.chead__title,
.ehead__title,
.outcome__title {
  letter-spacing: -0.005em;
  line-height: 1.08;
}

/* --- mid-level headings --- */
.fhead__title,
.faq__aside h2,
.story-row__body h3,
.contin__grid h3,
.resp__grid h3,
.fit__grid h3,
.ninety__row h3,
.app-form h3 {
  letter-spacing: 0.01em;
  line-height: 1.15;
}

/* --- small group headings, where caps need the most air --- */
.ogroup h3,
.step h3,
.rgroup h4,
.fitgroup h4,
.pstrip__item h4,
.bneck__head h3 {
  letter-spacing: 0.05em;
  line-height: 1.3;
}

/* the FAQ question is a button inside an h3, so it inherits the caps
   but keeps its own tracking */
.faq__q { letter-spacing: 0.02em; line-height: 1.3; }
.sepcosts summary { letter-spacing: 0.04em; }

/* Anton is already drawn in caps, so the display headings need nothing
   beyond their existing tracking */
.disp, .giant, .tier-row__id h3 { letter-spacing: -0.015em; }
.giant { letter-spacing: -0.028em; }

/* ==================================================================
   V5.3.1: scroll-reactive header.

   The mechanics are V5.3's, on V5.1.2's type. Two scroll-driven values,
   both set by assets/js/nav-theme.js:

     --p        0 at the top of the page, 1 once scrolled past the
                intro band. Drives the logo scale and fades the
                "Third Eye Media" wordmarks out, leaving the monogram.

     --on-dark  0 over light ground, 1 over a dark chapter, easing
                across a feather band straddling each boundary so the
                whole header cross-fades rather than snapping.

   Everything below reads those two numbers. No class toggling, so the
   header is always mid-transition-accurate rather than jumping.

   Deliberate difference from V5.3: the glass keeps V5.1.2's blur
   (10px, no saturation boost) and its heavier opacity. Only the
   colour of the glass follows --on-dark.
   ================================================================== */

.nav {
  --p: 0;
  --on-dark: 0;

  /* logo geometry, recomputed from --p in JS */
  --logo-frame-h: 76px;
  --logo-frame-w: 123px;
  --logo-layer-h: 76px;
  --logo-layer-top: 0px;

  transition: none;
}

/* ---- glass: V5.1.2's blur and weight, tinted by the ground ---- */
.nav.is-scrolled {
  background:
    color-mix(in srgb, rgba(232,232,227,0.88), rgba(12,12,11,0.88) calc(var(--on-dark) * 100%));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---- everything in the bar follows --on-dark ---- */
.nav .nav__links a,
.nav .menu-btn {
  color: color-mix(in srgb, var(--ink), #F4F4EF calc(var(--on-dark) * 100%));
}
.nav .btn--nav {
  background: color-mix(in srgb, var(--ink), #F4F4EF calc(var(--on-dark) * 100%));
  color: color-mix(in srgb, var(--paper), #0C0C0B calc(var(--on-dark) * 100%));
}
.nav .btn--nav .sq {
  background: color-mix(in srgb, var(--paper), #0C0C0B calc(var(--on-dark) * 100%));
  color: color-mix(in srgb, var(--ink), #F4F4EF calc(var(--on-dark) * 100%));
}
.nav .btn--nav:focus-visible,
.nav .nav__links a:focus-visible,
.nav .menu-btn:focus-visible {
  outline-color: color-mix(in srgb, var(--ink), #F4F4EF calc(var(--on-dark) * 100%));
}

/* ---- the logo ---- */
.logo--mark {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}
.logo__frame {
  position: relative;
  display: block;
  overflow: hidden;                       /* crops to the monogram as --p rises */
  height: var(--logo-frame-h);
  width: var(--logo-frame-w);
}
.logo__layer {
  position: absolute;
  left: 0;
  top: var(--logo-layer-top);
  height: var(--logo-layer-h);
  width: auto;
  display: block;
}

/* the monogram always shows; only its colour cross-fades */
.logo__mono--light  { opacity: calc(1 - var(--on-dark)); }
.logo__mono--dark   { opacity: var(--on-dark); }

/* the wordmarks fade out as the page scrolls, and follow the ground too */
.logo__words--light { opacity: calc((1 - var(--p)) * (1 - var(--on-dark))); }
.logo__words--dark  { opacity: calc((1 - var(--p)) * var(--on-dark)); }

/* The overlay sits on paper (`.menu-overlay { background: var(--paper) }`),
   so it takes the BLACK lockup. The layer names describe the ground they
   are drawn for, not their own colour: `--light` is the black lockup for
   light grounds, `--dark` is the white one for dark grounds. This pinned
   `--dark` and put a white logo on a near-white overlay. */
.menu-overlay .logo__mono--dark,
.menu-overlay .logo__words--dark { opacity: 0; }
.menu-overlay .logo__mono--light  { opacity: 1; }
.menu-overlay .logo__words--light { opacity: 1; }
.menu-overlay .logo--mark { --logo-frame-h: 76px; --logo-frame-w: 123px; --logo-layer-h: 76px; --logo-layer-top: 0px; }

/* anchors are offset against the settled (scrolled) header, which is the
   state the page is always in when an anchor jump happens. The settled
   height is set by the CTA button plus padding on desktop and by the Menu
   button on phones, so nav-theme.js measures and republishes it; these are
   the fallbacks for the first paint. */
:root { --header-h: 73px; --anchor-gap: 28px; }
@media (max-width: 1080px) { :root { --header-h: 71px; --anchor-gap: 22px; } }
@media (max-width: 560px)  { :root { --header-h: 62px; --anchor-gap: 18px; } }

@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}

/* ==================================================================
   V5.3.2: Alata + Inter.

   Alata  = statements and major headings   (--font-disp)
   Inter  = explanation, body, UI           (--font-body)
   Mono   = production-system metadata      (--font-mono, unchanged)

   The tokens at the top of this file carry the swap. Everything below
   is the consequence of it: Alata has no bold, and it is a normal-width
   humanist face where Anton was extremely condensed, so the display
   scale has to come down or the nowrap headings clip.
   ================================================================== */

/* ---- 1. the display tier grows to include the major headings ----
   In V5.3.1 the chapter and statement titles were set in the body face.
   Alata measures within 1% of Space Grotesk on the same string, so they
   move across at their existing sizes without reflowing. ---- */
.hero__copy h1,
.chead__title,
.ehead__title,
.outcome__title,
.fhead__title {
  font-family: var(--font-disp);
}

/* ---- 2. synthetic-bold guard ----
   Alata ships one weight. Any element asking for 500+ would be
   faux-bolded by the browser: smeared stems, uneven joins, blown-out
   counters at display sizes. Every element set in Alata is pinned to
   400 so the browser never has to synthesise. Weight comes from size
   and spacing instead. ---- */
.disp,
.giant,
.logo,
.hero__copy h1,
.chead__title,
.ehead__title,
.outcome__title,
.fhead__title,
.tier-row__id h3,
.tier-row__concept b,
.pm__rec--cap b,
.chapter__num b,
.bigrow .idx,
.position__aside .bignum,
.menu-overlay__links a,
.footer__band .fmark {
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-font-synthesis: none;
}

/* ---- 3. display scale, retuned for Alata's width ----
   Measured on the canvas: Alata renders the same uppercase string 1.34x
   wider than Anton at the same pixel size. `.giant` is nowrap with
   overflow hidden, so the old 13vw would have clipped it. Each step is
   divided by that ratio, which keeps the giant headings filling the
   measure exactly as they did before. ---- */
:root {
  --disp-xl: clamp(2.4rem, 9.6vw, 11.2rem);
  --disp-lg: clamp(2.0rem, 6.4vw, 7.3rem);
  --disp-md: clamp(1.5rem, 3.7vw, 4rem);
}
.tier-row__id h3 { font-size: clamp(1.45rem, 2.55vw, 2.55rem); }
.tier-row--featured .tier-row__id h3 { font-size: clamp(1.6rem, 2.9vw, 2.9rem); }
.menu-overlay__links a { font-size: clamp(1.7rem, 6.7vw, 3rem); }
.position__aside .bignum { font-size: clamp(2rem, 3.4vw, 3.5rem); }
.bigrow .idx { font-size: clamp(1.25rem, 2.3vw, 2.1rem); }
.chapter__num b { font-size: clamp(1.5rem, 2vw, 2rem); }
.tier-row__concept b { font-size: clamp(1rem, 1.6vw, 1.4rem); }
.pm__rec--cap b { font-size: 1rem; }
.footer__band .fmark { font-size: 1rem; }

/* ---- 4. tracking, retuned for Alata ----
   Anton is drawn tight and needed negative tracking to stop the caps
   fusing. Alata is drawn open, so the same negative values close the
   counters up. Display sizes sit at zero; the mid sizes take a hair of
   positive tracking because caps in a humanist face need the air. ---- */
.disp,
.giant,
.tier-row__id h3 { letter-spacing: 0; }
.giant { letter-spacing: -0.005em; }
.hero__copy h1,
.chead__title,
.ehead__title,
.outcome__title { letter-spacing: 0.004em; }
.fhead__title { letter-spacing: 0.012em; }
.disp { line-height: 1; }

/* ---- 5. Inter's reading and UI weights ----
   Body dropped to 400 at the top of the file, so the places that were
   relying on the old inherited 500 have to ask for it. Used sparingly:
   navigation, controls, labels and compact subheadings only. ---- */
.nav__links a,
.menu-overlay__links,
.footer__links a,
.btn,
.menu-btn,
.faq__q,
.sepcosts summary {
  font-weight: 500;
}

/* Space Mono is loaded at 400 only, so every mono element is pinned
   there. Without this the inherited UI weight above reaches the mono
   labels and chevrons and the browser fakes the bold. (V5.3.1 had 83
   elements in that state because its body weight was 500; dropping the
   body to 400 removed most of them, and this closes the rest.) */
.skip-link,
.mono,
.chipdex,
.problems .n,
.contin__list .n,
.sepcosts summary .chev,
.guarantee__conds .n,
.fit__list .mk,
.faq__q .chev,
.finale__intro .qual,
.fld > label,
.fld .glabel,
.back-btn,
.cs-tags span,
.cs-link,
.cs-editable,
.fs-btn,
.fs-close,
.lbx__close,
.chead__label,
.tform__n,
.nextup__flow li,
.ogroup--v5 .n {
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-font-synthesis: none;
}

/* form fields: inherit Inter rather than the UA's Arial, and hold the
   16px floor that stops iOS zooming the viewport on focus */
input, textarea, select, button {
  font-family: var(--font-body);
  font-optical-sizing: auto;
}
.app-form input,
.app-form textarea,
.app-form select {
  font-weight: 400;
  font-size: max(1rem, 0.98rem);
  letter-spacing: -0.006em;
}

/* ---- 6. paragraph readability ----
   The point of the exercise. Inter at 18/1.6 with a measure held near
   70 characters, which is where this column width lands. ---- */
p {
  line-height: 1.6;
}
.mono, p.mono, .slabel, .chipdex {
  line-height: 1.45;           /* mono keeps its tighter setting */
}

/* ---- 7. small screens: Alata needs lower floors ----
   The clamp minimums in the base scale were chosen for Anton's
   condensed caps. Below ~700px those floors, not the fluid vw term,
   are what the browser uses, and at Alata's width they push headings
   that are composed as one line onto two. Only the floors move here,
   so nothing above 700px changes. ---- */
@media (max-width: 700px) {
  :root { --disp-xl: clamp(2rem, 9.6vw, 11.2rem); }
  .finale__lines .ln { font-size: clamp(2rem, 8.2vw, 9.4rem); }
  .tier-row__concept b { font-size: clamp(0.95rem, 1.6vw, 1.4rem); }
  .pm__rec--cap b { font-size: 0.85rem; }
}

/* ---- 8. mono scale: every mono size raised by 3px ----
   The mono role carries the section numbers, eyebrows, field labels and
   production metadata, and it was set small enough to be hard to read.
   Each declared mono size gains a flat 3px rather than a multiplier, so
   the relationships between the mono steps are preserved exactly.

   `--mono-size` covers the 168-element bulk; the six rules under it are
   the mono sizes declared independently of the token. Each selector here
   matches or beats the specificity of the rule it supersedes.

   Deliberately NOT included: `.faq__q .chev`, `.sepcosts summary .chev`
   and `.fit__list .mk`. Those are the +, x and dash glyphs, which carry
   no mono size of their own and instead inherit from the heading or row
   they sit in, so they stay optically locked to it. Adding 3px there
   would break that alignment rather than improve legibility. ---- */
:root { --mono-size: calc(0.72rem + 3px); }        /* 11.52px -> 14.52px */
.finale__intro .qual   { font-size: calc(0.8rem + 3px); }   /* 12.8  -> 15.8  */
.cs-editable           { font-size: calc(0.8rem + 3px); }   /* 12.8  -> 15.8  */
.chead__label          { font-size: calc(0.78rem + 3px); }  /* 12.48 -> 15.48 */
.nextup__flow li       { font-size: calc(0.7rem + 3px); }   /* 11.2  -> 14.2  */
.footer__links a .mono { font-size: calc(0.7rem + 3px); }   /* 11.2  -> 14.2  */
.footer__mid p.mono    { font-size: calc(0.92rem + 3px); }  /* 14.72 -> 17.72 */

/* The investment intro is `grid-template-columns: auto minmax(0, 1fr)`,
   so the mono label in column one takes its own content width and the
   paragraph gets whatever is left. At the larger mono size that label
   grows past what a phone can spare, squeezing column two below its
   longest word: it clipped, and the row pushed the page 2px wider than
   the viewport. Stacking the two on small screens is the narrowest fix
   and matches how every other two-column row here already behaves. */
@media (max-width: 700px) {
  .invest__intro { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
}

/* ==================================================================
   V5.3.2: the logo accent on the section labels.

   #FD4700 is sampled directly from the artwork in assets/brand/ (the
   same value in both the black and white lockups).

   It is used for ONE role: the mono label that names a chapter. Those
   labels sit above the H1 or an H2 and mark where a new section starts,
   so colouring them turns the mono register into a wayfinding cue.
   Everything else in mono stays ink on purpose: the index numerals
   (M.01, O.01, P.01, 01/03), the group labels above H3s, the form field
   labels, the captions and the chevrons. If those took the accent too
   the page would read as highlighted rather than structured.

   Two grounds, one hue. The brand orange is only 2.81:1 on paper, which
   fails AA for text this size, so light grounds get the same hue and
   saturation darkened to 36% lightness. Dark grounds keep the true
   brand orange, which clears AA there comfortably.

     #FD4700 on #0C0C0B   5.66:1
     #B93400 on #E8E8E3   4.81:1   (paper, the darkest light ground)
     #B93400 on #F6F6F2   5.45:1
     #B93400 on #FCFCFA   5.75:1

   The double class is deliberate: `.theme-light .mono` sets a colour at
   (0,2,0) and these have to outrank it.
   ================================================================== */
:root {
  --accent: #FD4700;              /* sampled from the logo artwork */
  --accent-label: #B93400;        /* same hue, darkened for AA on light ground */
}
/* Only .surface--dark is actually a dark ground. `.footer__band` looks
   like one because nav-theme.js lists it alongside .surface--dark, but
   that is the header's inversion range, not a background: the band
   itself renders on paper, so it keeps the light accent. */
.surface--dark { --accent-label: var(--accent); }

.slabel.slabel,                   /* the section-label component, incl. .chead__label */
.hero__eyebrow.hero__eyebrow,     /* the offer name above the hero H1 */
.mono.mono:has(+ h2) {            /* section labels written as a bare .mono */
  color: var(--accent-label);
}

/* ==================================================================
   V5.3.2 EXPERIMENT: the accent across the whole mono register,
   with the chapter labels set bold.

   This supersedes the "one role only" restriction in the block above:
   the index numerals, the group labels, the field labels, the captions,
   the pricing qualifier and the chevrons now all take the accent, and
   the chapter labels are distinguished by weight instead of by colour.

   Rollback points if this is too much:
     .checkpoints/v5-3-2-20260808-100856-labels-only-accent/
     .checkpoints/v5-3-2-20260808-095453-pre-accent/

   The `:root ` prefix on each selector is load-bearing: it lifts them to
   (0,2,0) so they outrank `.theme-light .mono`, which sets its own
   colour at that specificity.
   ================================================================== */

/* the plan mock-up is a light card sitting inside a dark chapter. It
   already restores the light ink tokens; it needs the light accent for
   the same reason, or its mono would take the bright brand orange at
   3.36:1 on a near-white card. */
.surface--dark .pm__doc { --accent-label: #B93400; }

:root .mono,
:root .slabel,
:root .chipdex,
:root .chead__label,
:root .problems .n,
:root .contin__list .n,
:root .guarantee__conds .n,
:root .ogroup--v5 .n,
:root .tform__n,
:root .nextup__flow li,
:root .fit__list .mk,
:root .faq__q .chev,
:root .sepcosts summary .chev,
:root .finale__intro .qual,
:root .fld > label,
:root .fld .glabel,
:root .back-btn,
:root .cs-tags span,
:root .cs-link,
:root .cs-editable,
:root .fs-btn,
:root .fs-close,
:root .lbx__close,
:root .pm__cell::before {
  color: var(--accent-label);
}

/* The skip link sits on its own ink chip at every breakpoint, so it
   takes the full-strength brand orange rather than the darkened light
   variant: #B93400 on #080807 is 2.36:1, and this is the one element on
   the page a keyboard user depends on. #FD4700 there is 5.66:1. */
:root .skip-link { color: var(--accent); }

/* Chapter labels keep their rank by weight now that colour no longer
   separates them. Space Mono 700 is loaded in the page head, so this is
   a real weight and not a synthesised one. */
.slabel.slabel,
.hero__eyebrow.hero__eyebrow,
.mono.mono:has(+ h2) {
  font-weight: 700;
}

/* Three mono elements sit under rules more specific than the block
   above and kept their old colour: the hero pricing qualifier, the plan
   mock-up letterhead and the footer band line. (0,3,0) reaches them. */
:root .hero__meta .mono,
:root .footer__band .inner .mono {
  color: var(--accent-label);
}

/* The story media placeholders are a mid grey, darker than any real
   surface on the page, and the standard light accent is only 3.55:1 on
   it. Same hue again, taken down to 30% lightness for 4.58:1. When real
   media replaces these placeholders this rule should be revisited. */
.story-row__media { --accent-label: #9B2C00; }

/* ==================================================================
   V5.3.2: accent refinements.
   ================================================================== */

/* ---- 1. bottleneck rows: the transformation reads left to right ----
   The problem resolves to ink, the arrow and the outcome carry the
   accent, so the eye is pulled across the row toward what changes. The
   arrow SVG strokes with currentColor, so colouring the span is enough.
   Both keep the scroll-lit reveal: they start dim and resolve. ---- */
.tform__arrow { color: var(--accent-label); }
.tform__row.lit .tform__problem,
.tform__row:hover .tform__problem { color: var(--ink); }
.tform__row.lit .tform__solution,
.tform__row:hover .tform__solution { color: var(--accent-label); }
@media (prefers-reduced-motion: reduce) {
  .tform__problem { color: var(--ink); }
  .tform__solution { color: var(--accent-label); }
}

/* ---- 2. the client wall stays neutral ----
   Ten logos already carry ten different brand colours. Orange captions
   underneath compete with them, so this section keeps its mono in ink. */
.brands .mono { color: var(--ink); }

/* ---- 3. the 90-day outputs: accent on hover, not at rest ----
   At rest the list is plain white against the dark chapter. Hovering an
   output lights its label and heading, and the accent then reappears
   inside the mock-up on the parts of the plan that output produces, so
   the colour draws the connection between the two columns. ---- */
.plan__split .ninety__row .mono,
.plan__split .ninety__row h3 {
  color: var(--ink);
  transition: color 0.25s ease;
}
.plan__split .ninety__row:hover .mono,
.plan__split .ninety__row:hover h3,
.plan__split .ninety__row.is-active .mono,
.plan__split .ninety__row.is-active h3 {
  color: var(--accent-label);
}
/* colour replaces the underline as the active affordance */
.ninety__row.is-active h3 { text-decoration: none; }

/* ---- 4. the plan mock-up: black at rest, accent where it is lit ---- */
.pm__doc .mono,
.pm__doc .pm__mh,
.pm__doc .pm__rl,
.pm__doc .pm__cell,
.pm__doc .pm__rec b,
.pm__doc .pm__meta b {
  color: var(--ink);
}
.pm__doc .pm__rl { color: var(--dim); }

.pm__cell.is-lit,
.pm__rl.is-lit,
.pm__meta.is-lit b,
.pm__rec.is-lit b {
  color: var(--accent-label);
}
/* the transparent orange wash, plus a rule down the lit edge so the
   block reads as one highlighted region rather than tinted text */
.pm__cell.is-lit {
  background: rgba(253, 71, 0, 0.10);
  border-radius: var(--radius);
}
.pm__meta.is-lit,
.pm__rec.is-lit {
  background: rgba(253, 71, 0, 0.10);
  box-shadow: inset 2px 0 0 var(--accent-label);
}
.pm__rl.is-lit { font-weight: 700; }

/* ---- 5. footer navigation: colour instead of an underline ---- */
.footer__links a:hover,
.footer__links a:focus-visible {
  color: var(--accent-label);
  text-decoration: none;
}

/* ==================================================================
   V5.3.2: annotation round two.
   ================================================================== */

/* ---- 1. the plan mock-up: room inside the highlight ----
   The wash used to sit flush against the text. The padding is on the
   resting state, not the lit state, so nothing shifts when a highlight
   turns on: only the background appears. `.pm__meta` and `.pm__rec`
   pull their new horizontal padding back with a negative margin, so the
   text stays aligned with the rest of the document and the highlight
   bleeds out toward the card edge instead of boxing the copy in. ---- */
.pm__mh {
  padding-left: 0.55rem;
  padding-right: 0.55rem;
}
.pm__rl { padding: 0.55rem 0; }
.pm__cell {
  padding: 0.55rem;
  border-radius: var(--radius);
}
.pm__meta {
  padding: 0.9rem 0.7rem;
  margin: 0 -0.7rem;
  border-radius: var(--radius);
}
.pm__rec {
  padding: 0.8rem 0.7rem;
  margin: 0 -0.7rem;
  border-radius: var(--radius);
}

/* the calendar cells take a border on hover. An inset shadow rather than
   a real border, so the row heights do not move as the pointer travels. */
.pm__cell { transition: color 0.3s ease, background 0.3s ease, box-shadow 0.2s ease; }
.pm__cell:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-label), transparent 55%);
}
.pm__cell.is-lit:hover {
  box-shadow: inset 0 0 0 1px var(--accent-label);
}

/* ---- 2. the closing note drops away from the mock-up ---- */
.ninety__note { margin-top: clamp(2.6rem, 5vw, 4.4rem); }

/* ---- 3. qualification: both columns now share one structure ----
   The "not the right model" list was five bare sentences against six
   heading-and-description blocks, so the columns never lined up. It is
   now the same .fitgroup component; every original sentence is kept
   word for word as the description. The strong-fit headings carry the
   accent so the positive column is the one that reads first. ---- */
.fit--yes .fitgroup h4 { color: var(--accent-label); }
.fit--no .fitgroup h4 { color: var(--ink); }

/* ==================================================================
   V5.3.2: annotation round three.
   ================================================================== */

/* ---- 1. qualification rows line up across both columns ----
   Superseded in round five: reserving two lines on the heading AND the
   paragraph separately opened a gap between a short heading and its own
   copy, which read as vertical centring. The floor now sits on the
   block, so any slack collects under the paragraph and the text stays
   top-aligned. See "qualification: top-aligned" further down. ---- */

/* ---- 2. the client wall is logos only ----
   The captions duplicated each logo's alt text, so removing them costs
   nothing for screen readers and lets the marks centre in their cell.
   Hidden rather than deleted, so this is one line to undo. ---- */
.brands__cell .mono { display: none; }
.brands__cell { gap: 0; }

/* ---- 3. (removed in round five) ----
   The ACFE logo in this wall was enlarged here on the assumption that
   it was the "ACFE placeholder" that read small. It was not: the one
   that read small is the ACFE case study's media placeholder, which is
   handled in round five. Every logo is back on the shared 44px. ---- */

/* ==================================================================
   V5.3.2: annotation round four.
   ================================================================== */

/* ---- 1. case study titles all settle on three lines ----
   The 20ch cap put two of the three titles onto a fourth line. Measured
   empirically rather than by character count, because word-break
   granularity decides this, not average character width: the three
   titles need 416px, 456px and 446px respectively to hold three lines.
   22ch lands around 472px, clear of all three, and still inside the
   485px column so the narrower story rows are unaffected. ---- */
.story-row__body h3 { max-width: 22ch; }

/* ---- 2. the closing outcome heading reads on two lines ----
   "Every production cycle leaves you better prepared for the next" is
   the longest of the four and was the only one running to three lines.
   It needs 466px; the others would collapse to a single line above
   449px, so the wider measure is given to this heading alone rather
   than to the whole group. ---- */
.ogroup--v5:last-child h3 { max-width: 33ch; }
@media (max-width: 820px) {
  /* the stacked layout drops every cap, including the one above */
  .ogroup--v5:last-child h3 { max-width: none; }
}

/* ==================================================================
   V5.3.2: annotation round five.
   ================================================================== */

/* ---- 1. the ACFE case study gets the same media size as the others ----
   Story rows are `7fr 5fr` and every row puts the media first in the
   markup, so the media lands in the wide track. The middle row is
   flipped with `order: 2`, which pushed its media into the 5fr track:
   485x303 against 679x425 for its neighbours. Flipping the track sizes
   with it keeps the media on the 7fr side whichever way the row reads,
   so all three placeholders now match. ---- */
.story-row--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 900px) {
  .story-row--flip { grid-template-columns: 1fr; }
}

/* ---- 2. qualification: top-aligned ----
   The floor that keeps opposite rows level now sits on the whole block
   rather than on the heading and the paragraph separately. A short
   heading is followed immediately by its own copy, and the leftover
   space collects at the bottom of the block where it reads as spacing
   between items rather than as a centred pair. Released below 800px,
   where the two columns stack and there is nothing to align to. ---- */
.fitgroup { min-height: 6.85rem; }
@media (max-width: 800px) {
  .fitgroup { min-height: 0; }
}

/* Round six: the reserved floor was leaving 142px of empty space across
   the eleven points, concentrated in the four whose heading and copy
   both run short. Dropping the floor from 7.4rem to 6.85rem takes that
   to 98px, about 30% less, while still keeping opposite rows level.
   Five of the eleven had no slack to begin with (their content already
   exceeds the floor) so they are unchanged, and the reduction lands
   where the space actually was. */

/* ==================================================================
   V6: only the PluxNet production story is shown.

   The ACFE and Graça Machel Trust stories keep their full markup in
   the source and are hidden with the `hidden` attribute. `.story-row`
   sets `display: grid`, which outranks the browser's default styling
   for `[hidden]`, so the rule below is what actually takes them out of
   the layout and the accessibility tree.

   To restore either story: remove `hidden` from its `<article>` and
   put the visible counts back to 01/03, 02/03, 03/03.
   ================================================================== */
.story-row[hidden] { display: none; }

/* ==================================================================
   V6: PluxNet case study additions.

   Three small additions only. The case-study layout itself is
   unchanged: every other class it uses already exists above.
   ================================================================== */

/* the hero image sits inside the hero, below the tags, at the same
   measure as the hero copy rather than as a separate full-bleed block */
.cs-hero__media {
  /* held to the hero copy's measure rather than the full wrap, so it reads
     as part of the hero rather than a separate full-bleed block */
  max-width: 860px;
  margin: clamp(2rem, 4vw, 3.2rem) 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #c9c9c1;
  aspect-ratio: 16 / 10;
}
.cs-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fills the frame without distorting */
  display: block;
}

/* V6.1: the partnership line sits beside the hero image. The image keeps the
   larger share; the line takes the rest and centres against it. On narrow
   screens the two stack and the line gets a full reading measure back. */
.cs-hero__figrow {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3.2vw, 2.8rem);
  align-items: center;
  width: 100%;
  margin: clamp(2rem, 4vw, 3.2rem) 0 0;
}
.cs-hero__figrow .cs-hero__media { max-width: none; margin: 0; }
.cs-hero__aside {
  margin: 0;
  font-size: var(--body);
  line-height: 1.55;
  color: var(--dim);
  max-width: 40ch;
}
@media (max-width: 860px) {
  .cs-hero__figrow { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .cs-hero__aside { max-width: 62ch; }
}

/* the closing CTA gained a supporting line and a qualifier */
.cs-cta__lede {
  margin: clamp(1rem, 2vw, 1.4rem) auto 0;
  max-width: 52ch;
  color: var(--dim);
  line-height: 1.55;
}
.cs-cta__qual { margin-top: 1.2rem; }

/* the landing-page story media now carries a real image. object-fit keeps
   it filling the 16:10 frame without distorting. The caption only shows
   when there is no image: if the file is missing the img removes itself,
   `:has(img)` stops matching and the labelled placeholder returns. */
.story-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}
.story-row__media:has(img) .cap { display: none; }
.story-row__media picture { display: block; width: 100%; height: 100%; }

/* ==================================================================
   V6: PluxNet case study corrections.
   ================================================================== */

/* ---- 1. thumbnail captions: white, and made to fit ----
   They were orange because the V5.3.2 accent sweep set `:root .mono` at
   (0,2,0), which outranked `.thumb__cap`'s own `color: #fff`. They were
   also clamped to two lines and cut off mid-word.

   They stay over the image, where white reads against the gradient. The
   page behind the rail is paper, so moving them underneath would have
   made white invisible. Fitting them instead: the mono uppercase
   tracking drops back to near-normal and the clamp goes to three lines,
   which holds the longest label in the set. The thumbnails themselves
   are untouched, so the rail stays uniform. */
/* `.thumb .thumb__cap` not `.thumb__cap`: the accent sweep's `:root .mono`
   sits at (0,2,0) and would otherwise keep winning the colour. */
.thumb .thumb__cap {
  color: #F4F4EF;
  font-size: 0.52rem;
  letter-spacing: 0.01em;
  line-height: 1.25;
  padding: 0.5rem 0.4rem 0.35rem;
  -webkit-line-clamp: 3;
  background: linear-gradient(transparent, rgba(0,0,0,0.55) 32%, rgba(0,0,0,0.88));
}
/* On phones the rail thumbs fall to their minimum height, so the frames get
   narrow and three lines is no longer enough for the longer labels. The
   floor comes up slightly and the caption takes a fourth line. */
@media (max-width: 700px) {
  .thumb img { height: clamp(146px, 38vw, 178px); }
  .thumb .thumb__cap {
    font-size: 0.46rem;
    letter-spacing: 0;
    -webkit-line-clamp: 4;
    padding: 0.45rem 0.35rem 0.3rem;
  }
}

/* ---- 2. the landing-page story caption reads white ----
   Same cause: the accent sweep reached `.cap`. On the story frame it
   sits over a dark placeholder or over the image, so it needs to be
   light in both cases. */
.story-row__media .cap { color: #F4F4EF; }


/* ==================================================================
   V6.1 — the PluxNet hero campaign selector

   The hero is one permanent composition; there is no slide carousel,
   so nothing here has to keep a constant width between slides. That
   frees the frame to be the collage's own 16:10 and drop the crop.

   Each panel is clipped to its slice by an inline clip-path polygon
   traced from that PNG's alpha (set by hero-carousel.js). The shipped
   images carry ~35px of colour bleed past their boundary, so the clip
   edge always lands on solid pixels: one clean anti-aliased cut, no
   stair-stepping, no transparent fringe. Adjacent polygons overlap by
   ~3px so no white crack can open along a seam.
   ================================================================== */

.hcar {
  /* Room above and below for a panel that lifts out of the frame, so it never
     collides with the copy or the fit markers. A panel scaled about its own
     centre escapes by half the scale increase, so at 1.2x that is 0.1 x the
     frame height; the reserve is tied to that height, not to the viewport. */
  padding-top: calc(var(--hcar-h) * 0.13);
  padding-bottom: calc(var(--hcar-h) * 0.15);
}

/* The phone is the thing being chosen, so it stays above a panel that grows
   far enough right to reach it, and sits a little further off: the rightmost
   panel gains ~22px on its right edge when it lifts, which without this ate
   most of the gap. */
.hcar__phonewrap {
  position: relative;
  z-index: 2;
  margin-left: clamp(0.6rem, 2vw, 1.9rem);
}
@media (max-width: 860px) { .hcar__phonewrap { margin-left: 0; } }

/* the frame is the collage's own aspect, and it no longer clips: the
   lifted panel has to be able to leave it */
.hcar__bts--sel {
  aspect-ratio: 16 / 10;
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.hsel {
  position: absolute;
  inset: 0;
  isolation: isolate;
  /* the resting composition keeps the depth the flattened still had */
  filter: drop-shadow(0 26px 46px rgba(8, 8, 7, 0.28));
}

.hsel__panel {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 1;
  transform: scale(1);
  /* --clip-rest / --clip-lift are set per panel by hero-carousel.js. At rest
     only the two end panels carry rounded corners, which is what rounds the
     whole composition; every corner rounds once a panel lifts. */
  clip-path: var(--clip-rest);
  transition: transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 460ms ease;
  will-change: transform, filter;
}

/* V6.2: only a panel that is actually picked rounds its corners. Hover used
   to round too, which meant that with one panel committed, sweeping across a
   middle panel rounded it at scale 1 — reading as a second selection. */
.hsel__panel.is-preview,
.hsel__panel.is-committed { clip-path: var(--clip-lift); }

.hsel__panel picture,
.hsel__panel img { display: block; width: 100%; height: 100%; }
.hsel__panel img { object-fit: fill; }   /* the box is already the exact aspect */

/* ---- states B and C: previewed and committed ----
   The picked panel is the monochrome one and the other three stay in full
   colour, so the choice reads as "this one is loaded" rather than "this one
   is highlighted". Preview and committed differ only in how far forward they
   come; at rest, and on the fifth beat of the rotation, nothing is picked and
   all four sit in colour at scale 1. */
.hsel__panel.is-preview {
  z-index: 10;
  transform: scale(1.2);
  filter: grayscale(1) drop-shadow(0 34px 44px rgba(8, 8, 7, 0.55));
}

.hsel__panel.is-committed {
  z-index: 10;
  transform: scale(1.12);
  filter: grayscale(1) drop-shadow(0 30px 40px rgba(8, 8, 7, 0.52));
}

/* after a commitment the other three are live again, so they get only a
   quiet affordance — never the 1.4x preview, which would compete */
.hsel--locked .hsel__panel:not(.is-committed):hover {
  filter: brightness(1.06);
  z-index: 2;
}

.hsel__panel:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: -3px;
  z-index: 11;
}

/* ---- lightbox selector: calmer. Hover is a cue, never a change ---- */
.hsel--lightbox .hsel__panel.is-committed:hover {
  filter: grayscale(1) drop-shadow(0 30px 40px rgba(8, 8, 7, 0.52));
}

/* ---- mobile: the collage is a still, exactly as V6.0 ----
   The panels stay in the DOM so the artwork is identical, but they stop
   being controls: no preview, no commitment, no scaling, and taps fall
   through to the play button over them. */
@media (max-width: 860px) {
  .hcar { padding-top: 0; padding-bottom: clamp(2.2rem, 4.5vw, 4rem); }
  .hcar__bts--sel {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 30px 60px rgba(8, 8, 7, 0.30);
  }
  .hsel { pointer-events: none; filter: none; }
  .hsel__panel,
  .hsel__panel:hover,
  .hsel__panel.is-preview,
  .hsel__panel.is-committed {
    filter: none;
    transform: none;
    z-index: 1;
    clip-path: var(--clip-rest);      /* no lift, so no lifted corners either */
  }
}

/* ---- reduced motion: keep every function, drop the movement ---- */
@media (prefers-reduced-motion: reduce) {
  .hsel__panel { transition: filter 140ms linear; will-change: auto; }
  .hsel__panel.is-preview {
    transform: scale(1.06);
    filter: grayscale(1) drop-shadow(0 18px 26px rgba(8, 8, 7, 0.45));
  }
  .hsel__panel.is-committed {
    transform: scale(1.04);
    filter: grayscale(1) drop-shadow(0 16px 24px rgba(8, 8, 7, 0.42));
  }
}

/* ==================================================================
   V6.1 — the two-column selector lightbox (desktop / tablet landscape)
   ================================================================== */

.lbx--sel .lbx__panel { width: 100%; padding: clamp(1rem, 2.4vw, 2rem); }

/* A 9:19.5 phone cannot be 57% of a landscape viewport's WIDTH — at
   1440x900 the tallest phone that fits is ~330px wide, so a fixed 57/43
   grid would leave ~400px of dead space beside it. The columns hug their
   content instead: the phone takes all the height the viewport allows,
   which is what makes the vertical video watchable, and the selector
   takes a bounded, readable width. */
.lbx__two {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.6rem, 4vw, 4rem);
  max-width: min(100%, 1200px);
  margin: 0 auto;
}
.lbx--sel .lbx__stack { flex: 0 0 auto; gap: 0.8rem; }
/* V6.2: the selector carries more weight here — it is how the visitor moves
   between campaigns without leaving the lightbox, so it gets a wider column
   and the collage inside it reads at a usable size. */
.lbx__side { flex: 0 0 clamp(340px, 36vw, 580px); align-self: center; min-width: 0; }

.lbx--sel .lbx__phone { height: min(76svh, 760px); }

.lbx__side {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.lbx__sidehead {
  margin: 0;
  color: var(--dim-ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* in the lightbox the collage is a block in the flow, not an overlay on a
   figure, and it needs room around it for the raised panel */
.lbx__side .hsel {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  margin: clamp(1rem, 2.6vw, 2.2rem) 0;
}

.lbx__title--side { margin: 0; font-size: calc(var(--mono-size) + 2px); color: var(--ink); }
.lbx__hint { margin: 0; font-size: 0.9rem; color: var(--dim); }

/* the selector lightbox is only built above the desktop line, but a tablet
   rotated while it is open stacks rather than crushes */
@media (max-width: 900px) {
  .lbx__two { flex-direction: column; gap: 1rem; }
  .lbx--sel .lbx__phone { height: min(52svh, 460px); }
  .lbx__side { flex: 0 0 auto; width: 100%; max-width: 400px; }
  .lbx__side .hsel { margin: 0.6rem 0; }
}

/* Mobile keeps the phone as the viewing surface and swaps the desktop collage
   for a compact rail of the four campaign posters. */
.lbx__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  width: 100%;
}
.lbx__thumb {
  position: relative;
  min-width: 0;
  padding: 0;
  aspect-ratio: 9 / 13;
  overflow: hidden;
  border: 1px solid rgba(8, 8, 7, 0.25);
  border-radius: var(--radius);
  background: var(--ink);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.lbx__thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.lbx__thumb-index {
  position: absolute;
  right: 0.3rem;
  bottom: 0.3rem;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(8, 8, 7, 0.82);
  color: var(--paper);
  font-size: 0.58rem;
}
.lbx__thumb:hover,
.lbx__thumb:focus-visible,
.lbx__thumb.is-active { opacity: 1; }
.lbx__thumb.is-active { border-color: var(--accent); transform: translateY(-2px); }
.lbx__thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 860px) {
  .lbx--compact .lbx__panel {
    width: 100%;
    min-height: 100svh;
    overflow: auto;
    padding: max(3.6rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px));
  }
  .lbx--compact .lbx__two { width: min(100%, 390px); gap: 0.8rem; }
  .lbx--compact .lbx__stack { width: 100%; gap: 0.6rem; }
  .lbx--compact .lbx__phone { height: min(54svh, 455px); }
  .lbx--compact .lbx__bar { width: min(100%, 320px); }
  .lbx__side--compact { max-width: 320px; gap: 0.55rem; }
  .lbx__side--compact .lbx__sidehead { text-align: center; font-size: 0.66rem; }
  .lbx__title--side { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lbx__thumb { transition: none; }
  .lbx__thumb.is-active { transform: none; }
}


/* ==================================================================
   V6.1 — thank-you page: "What happens next"

   Reuses the numbered-step language of `.pstrip` from the landing page
   rather than introducing a new component, but stacks the rows instead
   of running four columns: the thanks panel is a narrow, centred 44rem
   measure, where four columns would leave each step two words wide.
   The block is left-aligned inside the centred panel so the four steps
   can actually be scanned.
   ================================================================== */

.ty-next {
  margin: clamp(2.2rem, 4.5vw, 3.4rem) 0 0;
  text-align: left;
}

.ty-next__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}
.ty-next__head h2 { margin: 0; color: var(--accent-label); }

.ty-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ty-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(0.8rem, 2vw, 1.3rem);
  padding: clamp(0.9rem, 2vw, 1.25rem) 0;
  border-bottom: 1px solid var(--line);
}
.ty-steps li > .mono {
  grid-row: 1 / span 2;
  color: var(--accent-label);
  line-height: 1.4;
}
.ty-steps h3 {
  margin: 0 0 0.3rem;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
/* .thanks p centres itself on a 40rem measure; inside a step it is a
   grid cell and must not do either */
.ty-steps p {
  margin: 0;
  max-width: none;
  font-size: 0.95rem;
  line-height: 1.5;
}

.ty-free { margin-top: clamp(1.4rem, 3vw, 2rem) !important; }

@media (max-width: 560px) {
  .ty-next__head { flex-direction: column; gap: 0.3rem; align-items: flex-start; }
  .ty-steps li { column-gap: 0.7rem; }
}


/* ==================================================================
   V6.2 — the "Production Stories" section title at 0.8x

   The section heading only. Everything inside the story rows keeps the
   size it had.
   ================================================================== */

#stories-h { font-size: calc(var(--disp-xl) * 0.8); }

/* ---- lightbox: hovering an unpicked panel lifts it above the other
   unpicked ones, but never above the campaign that is playing ---- */
.hsel--lightbox .hsel__panel:not(.is-committed):hover {
  z-index: 5;                      /* over the resting panels, under the picked one at 10 */
  transform: scale(1.08);
  filter: drop-shadow(0 18px 26px rgba(8, 8, 7, 0.42));
}