/* ============================================================
   WVV STUDIOS — NOCTURNE EDITORIAL
   A dark agency portfolio styled as a midnight magazine.
   Single-file, self-contained, mobile-first.
   ============================================================ */

/* ---------- Tokens — Monochrome (white-on-black) ---------- */
:root {
  --ink-base:    #000000;
  --ink-deep:    #000000;
  --ink-elev:    #0a0a0a;
  --ink-rise:    #141414;

  --paper:       #ffffff;
  --paper-soft:  #ededed;
  --paper-dim:   #a8a8a8;
  --paper-faint: #6a6a6a;

  --rule:        rgba(255, 255, 255, 0.10);
  --rule-strong: rgba(255, 255, 255, 0.22);

  --brass:        #ffffff;
  --brass-bright: #ffffff;
  --terracotta:   #ffffff;
  --moss:         #ffffff;

  --font-display: 'Fraunces', 'Iowan Old Style', 'Times New Roman', serif;
  --font-body:    'Manrope', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --container-w: 1380px;
  --gutter:      clamp(20px, 4vw, 56px);
  --section-y:   clamp(96px, 13vw, 200px);

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-mag:    cubic-bezier(0.65, 0.05, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink-base);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  font-feature-settings: "ss01", "cv11";
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select, button { font: inherit; color: inherit; }
::selection { background: var(--paper); color: var(--ink-base); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--paper); color: var(--ink-base);
  padding: 12px 18px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Focus */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Layout primitives ---------- */
.shell {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}
.eyebrow--dim { color: var(--paper-dim); }
.rule {
  height: 1px;
  background: var(--rule);
  width: 100%;
}

/* Display heading utilities */
.display {
  font-family: var(--font-display);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  line-height: 0.94;
  letter-spacing: -0.02em;
  color: var(--paper);
  text-wrap: balance;
}
.display em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-weight: 350;
  color: var(--paper-soft);
}
.display strong { font-weight: 600; font-style: normal; }

/* ---------- Grain overlay (atmospheric film grain) ---------- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* ============================================================
   MASTHEAD — sticky thin top strip
   ============================================================ */
.masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  background: color-mix(in srgb, var(--ink-base) 78%, transparent);
  border-bottom: 1px solid var(--rule);
}
.masthead__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  gap: 32px;
}
.masthead__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
}
.masthead__brand b {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 30, "SOFT" 50, "WONK" 0;
  font-size: 22px;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--paper);
}
.masthead__brand b em {
  font-style: italic;
  font-variation-settings: "opsz" 30, "SOFT" 100, "WONK" 1;
  color: var(--brass);
  margin-left: -2px;
}
.masthead__nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.masthead__nav a {
  position: relative;
  color: var(--paper-dim);
  transition: color 200ms var(--ease-out);
}
.masthead__nav a:hover, .masthead__nav a:focus-visible { color: var(--paper); }
.masthead__nav a span {
  color: var(--brass);
  margin-right: 6px;
  font-weight: 500;
}
.masthead__cta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-base);
  background: var(--brass);
  padding: 9px 16px 8px;
  border-radius: 999px;
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.masthead__cta:hover { background: var(--brass-bright); transform: translateY(-1px); }

.masthead__menu {
  display: none;
  width: 38px; height: 38px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  align-items: center; justify-content: center;
  color: var(--paper);
}
.masthead__menu svg { width: 16px; height: 16px; }

@media (max-width: 880px) {
  .masthead__nav, .masthead__cta { display: none; }
  .masthead__menu { display: inline-flex; }
}

/* Mobile menu overlay */
.menu-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: var(--ink-deep);
  display: none;
  flex-direction: column;
  padding: 80px var(--gutter) 40px;
}
.menu-overlay.is-open { display: flex; }
.menu-overlay nav {
  margin-top: auto;
  display: flex; flex-direction: column;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 0;
  font-size: clamp(36px, 8vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.menu-overlay nav a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--paper);
}
.menu-overlay nav a span {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--brass);
  flex-shrink: 0;
  width: 36px;
}
.menu-overlay__close {
  position: absolute; top: 18px; right: var(--gutter);
  width: 38px; height: 38px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
}
.menu-overlay__foot {
  margin-top: 40px;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper-dim);
}
body.menu-open { overflow: hidden; }

/* ============================================================
   TICKER — running marquee strip (under masthead, top of hero)
   ============================================================ */
.ticker {
  position: relative;
  margin-top: 56px;
  border-bottom: 1px solid var(--rule);
  background: var(--ink-deep);
  overflow: hidden;
  height: 38px;
  display: flex;
  align-items: center;
}
.ticker__track {
  display: flex;
  gap: 56px;
  animation: tickerScroll 42s linear infinite;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
  flex-shrink: 0;
  padding-left: 56px;
}
.ticker__track span { display: inline-flex; align-items: center; gap: 14px; }
.ticker__track span::before {
  content: '◆';
  color: var(--brass);
  font-size: 8px;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   HERO — editorial cover
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(72px, 14vw, 180px) 0 clamp(48px, 8vw, 96px);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 1; }

.hero__meta-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: clamp(48px, 8vw, 88px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.hero__meta-top b {
  color: var(--paper);
  font-weight: 500;
  margin-right: 8px;
}
.hero__meta-top em {
  font-style: normal;
  color: var(--brass);
}

.hero__h1 {
  margin: 0 0 clamp(40px, 6vw, 64px);
  font-size: clamp(48px, 10.5vw, 168px);
  max-width: 14ch;
}
.hero__h1 em {
  display: inline-block;
  padding-right: 0.05em;
}
.hero__h1 .pad-right { padding-right: 0.1em; }

.hero__under {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: end;
  margin-top: clamp(40px, 6vw, 80px);
}
@media (max-width: 880px) {
  .hero__under { grid-template-columns: 1fr; gap: 32px; }
}

.hero__lede {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.5;
  color: var(--paper-soft);
  max-width: 50ch;
  font-weight: 300;
}
.hero__lede strong {
  color: var(--paper);
  font-weight: 500;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 1px;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-end;
}
@media (max-width: 880px) { .hero__actions { align-items: flex-start; } }

.hero__primary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 26px 18px 28px;
  background: var(--paper);
  color: var(--ink-base);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.hero__primary:hover { background: var(--brass-bright); transform: translateY(-2px); }
.hero__primary svg { width: 14px; height: 14px; }

.hero__second {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--rule-strong);
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.hero__second:hover { color: var(--paper); border-color: var(--brass); }

.hero__bottom {
  margin-top: clamp(56px, 9vw, 110px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.hero__bottom > div { display: flex; flex-direction: column; gap: 4px; }
.hero__bottom span:first-child { color: var(--paper-faint); font-size: 10px; }
.hero__bottom b { color: var(--paper); font-weight: 500; font-size: 11.5px; }
@media (max-width: 720px) {
  .hero__bottom { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
}

/* ============================================================
   ISSUE HEADER — magazine-style section title block
   ============================================================ */
.issue {
  padding-top: var(--section-y);
  position: relative;
}
.issue__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: end;
  padding-bottom: clamp(36px, 5vw, 60px);
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: clamp(40px, 6vw, 72px);
}
.issue__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-size: clamp(80px, 16vw, 220px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--brass);
  font-feature-settings: "lnum", "ss01";
}
.issue__num em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.issue__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.issue__kicker {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.issue__kicker b { color: var(--brass); font-weight: 500; }
.issue__kicker::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--brass);
}
.issue__title {
  margin: 0;
  font-size: clamp(36px, 6vw, 86px);
  font-family: var(--font-display);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--paper);
  text-wrap: balance;
}
.issue__title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--paper-soft);
}
.issue__sub {
  max-width: 56ch;
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--paper-dim);
  line-height: 1.55;
  font-weight: 300;
}
@media (max-width: 720px) {
  .issue__head { grid-template-columns: 1fr; gap: 12px; padding-bottom: 28px; }
  .issue__num { font-size: clamp(72px, 22vw, 140px); }
}

/* ============================================================
   SECTION 01 — THE INDEX (the work)
   Magazine-style table-of-contents listing
   ============================================================ */
.index-meta {
  display: grid;
  grid-template-columns: 60px 1.4fr 1fr 1fr 0.8fr 60px;
  gap: 16px;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.index-list { display: flex; flex-direction: column; }
.index-row {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1.4fr 1fr 1fr 0.8fr 60px;
  gap: 16px;
  align-items: baseline;
  padding: clamp(18px, 2.4vw, 28px) 0;
  border-bottom: 1px solid var(--rule);
  transition: background 280ms var(--ease-out);
  text-decoration: none;
  color: var(--paper);
}
.index-row:hover { background: rgba(255, 255, 255, 0.04); }
.index-row__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--brass);
}
.index-row__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--paper);
  transition: color 240ms var(--ease-out), transform 360ms var(--ease-out);
}
.index-row:hover .index-row__name {
  color: var(--brass-bright);
  transform: translateX(8px);
}
.index-row__name em {
  font-style: italic;
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
}
.index-row__niche, .index-row__loc, .index-row__price {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--paper-dim);
  font-feature-settings: "tnum";
}
.index-row__price {
  text-align: right;
  color: var(--paper);
  font-weight: 500;
}
.index-row__price small {
  display: block;
  font-size: 10px;
  color: var(--paper-faint);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 4px;
}
.index-row__arrow {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--paper-dim);
  transition: color 240ms var(--ease-out), transform 280ms var(--ease-out);
}
.index-row:hover .index-row__arrow {
  color: var(--brass);
  transform: translate(6px, -3px);
}

@media (max-width: 880px) {
  .index-meta { display: none; }
  .index-row {
    grid-template-columns: 36px 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 14px;
    padding: 22px 0;
  }
  .index-row__num { grid-row: 1; grid-column: 1; }
  .index-row__name { grid-row: 1; grid-column: 2; font-size: 24px; }
  .index-row__arrow { grid-row: 1; grid-column: 3; align-self: start; }
  .index-row__niche, .index-row__loc, .index-row__price {
    grid-row: 2;
    font-size: 11px;
  }
  .index-row__niche { grid-column: 2 / span 1; }
  .index-row__loc, .index-row__price { display: none; }
  .index-row__name br { display: none; }
}

.index-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.index-foot b { color: var(--paper); font-weight: 500; }

/* ============================================================
   SECTION 02 — THE PROMISE (free preview)
   ============================================================ */
.promise {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 880px) {
  .promise { grid-template-columns: 1fr; }
}

.promise__quote {
  position: relative;
  padding: clamp(24px, 4vw, 48px) 0;
}
.promise__quote::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 60px;
  height: 1px;
  background: var(--brass);
}
.promise__pull {
  font-family: var(--font-display);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 0;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin: 0 0 28px;
  text-wrap: balance;
}
.promise__pull em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--brass);
}

.promise__copy {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--paper-soft);
  font-weight: 300;
  max-width: 50ch;
}

.promise__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.promise__list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-weight: 350;
  font-variation-settings: "opsz" 36, "SOFT" 0, "WONK" 0;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.3;
  color: var(--paper);
  letter-spacing: -0.01em;
}
.promise__list li::before {
  content: counter(item, decimal-leading-zero);
  counter-increment: item;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--brass);
  align-self: center;
  padding-top: 4px;
}
.promise__list { counter-reset: item; }

.promise__cta-row {
  margin-top: 28px;
  display: flex; gap: 14px; flex-wrap: wrap;
  align-items: center;
}

/* ============================================================
   SECTION 03 — THE TARIFF (pricing)
   Editorial table treatment, NOT 3 cards
   ============================================================ */
.tariff {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule-strong);
}
.tariff__row {
  display: grid;
  grid-template-columns: 100px 1fr 1.2fr 200px 200px;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.tariff__row--featured {
  background: linear-gradient(
    to right,
    rgba(196, 154, 88, 0.045) 0%,
    rgba(196, 154, 88, 0.018) 50%,
    transparent 100%
  );
}
.tariff__row--featured::before {
  content: '';
  position: absolute;
  /* Sit the accent rule out in the left gutter so it's clearly separated
     from the tier text instead of crammed against it. The offset always
     stays within the shell gutter, so the rule never reaches the page edge.
     Applies on every breakpoint (desktop + mobile). */
  left: calc(-1 * clamp(14px, 1.5vw, 20px));
  top: 0; bottom: 0;
  width: 2px;
  background: var(--brass);
  pointer-events: none;
}
.tariff__row--featured::after {
  content: 'Most chosen';
  position: absolute;
  top: -1px;
  right: 0;
  transform: translateY(-100%);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-deep);
  background: var(--brass);
  padding: 6px 14px 5px;
  pointer-events: none;
}
.tariff__row--featured .tariff__price { color: var(--brass); }
.tariff__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.tariff__num span {
  display: block;
  margin-top: 4px;
  color: var(--paper-faint);
  font-size: 10px;
}
.tariff__name {
  font-family: var(--font-display);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  font-size: clamp(36px, 5.5vw, 78px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.tariff__name em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--brass);
}
.tariff__name small {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-top: 14px;
}
.tariff__for {
  font-size: 15px;
  line-height: 1.55;
  color: var(--paper-soft);
  font-weight: 300;
}
.tariff__for b {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 8px;
}
.tariff__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--paper-soft);
  font-weight: 300;
}
.tariff__list li {
  position: relative;
  padding-left: 18px;
}
.tariff__list li::before {
  content: '+';
  position: absolute;
  left: 0; top: 0;
  color: var(--brass);
  font-family: var(--font-mono);
  font-size: 12px;
}
.tariff__price {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--paper);
  font-feature-settings: "lnum", "tnum";
}
.tariff__price small {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-top: 12px;
  font-weight: 500;
  font-variation-settings: normal;
}

@media (max-width: 1100px) {
  .tariff__row {
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto auto auto;
    gap: 20px clamp(16px, 3vw, 32px);
    padding: 32px 0;
  }
  .tariff__num { grid-column: 1; grid-row: 1; }
  .tariff__name { grid-column: 2; grid-row: 1; }
  .tariff__price { grid-column: 1 / span 2; grid-row: 2; text-align: left; padding-top: 6px; }
  .tariff__for { grid-column: 1 / span 2; grid-row: 3; }
  .tariff__list { grid-column: 1 / span 2; grid-row: 4; padding-top: 4px; }
  .tariff__row { grid-template-rows: auto auto auto auto; }
}

/* ============================================================
   SECTION 04 — THE SPRINT (process)
   Vertical numbered editorial chapters
   ============================================================ */
.sprint {
  display: flex;
  flex-direction: column;
}
.sprint__step {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(32px, 6vw, 96px);
  padding: clamp(40px, 6vw, 80px) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.sprint__step:last-child { border-bottom: 0; }

.sprint__num {
  position: relative;
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-size: clamp(96px, 16vw, 240px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--paper);
  font-feature-settings: "lnum";
}
.sprint__num em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--brass);
}
.sprint__num-meta {
  display: block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
  font-variation-settings: normal;
  font-weight: 500;
}
.sprint__num-meta b { color: var(--brass); font-weight: 500; }

.sprint__body {}
.sprint__title {
  font-family: var(--font-display);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--paper);
  margin: 0 0 20px;
  text-wrap: balance;
}
.sprint__title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--paper-soft);
}
.sprint__intro {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--paper-soft);
  font-weight: 300;
  max-width: 60ch;
  margin: 0 0 32px;
}

.sprint__points {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.sprint__points li {
  padding: 18px 24px 18px 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sprint__points li:nth-child(odd) { border-right: 1px solid var(--rule); padding-right: 28px; }
.sprint__points li:nth-child(even) { padding-left: 28px; }
.sprint__points b {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.sprint__points span {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--paper-soft);
  font-weight: 300;
}

@media (max-width: 880px) {
  .sprint__step { grid-template-columns: 1fr; gap: 16px; }
  .sprint__points { grid-template-columns: 1fr; }
  .sprint__points li:nth-child(odd) { border-right: 0; padding-right: 0; }
  .sprint__points li:nth-child(even) { padding-left: 0; }
}

/* ============================================================
   CTA — full-bleed, monumental
   ============================================================ */
.cta {
  margin-top: clamp(96px, 14vw, 180px);
  position: relative;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  background: var(--ink-deep);
  overflow: hidden;
}
.cta__inner {
  position: relative;
  padding: clamp(80px, 14vw, 180px) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}
.cta__head {
  font-family: var(--font-display);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0;
  font-size: clamp(48px, 10vw, 160px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0;
  text-wrap: balance;
  max-width: 14ch;
}
.cta__head em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--brass);
}
.cta__row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  flex-wrap: wrap;
}
.cta__sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--paper-dim);
  max-width: 40ch;
  font-weight: 300;
}
.cta__sub b { color: var(--paper); font-weight: 500; }
.cta__big-btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 22px 32px 22px 36px;
  background: var(--paper);
  color: var(--ink-base);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 240ms var(--ease-out), transform 240ms var(--ease-out);
  align-self: end;
}
.cta__big-btn:hover { background: var(--brass-bright); transform: translateY(-3px); }
.cta__big-btn svg { width: 16px; height: 16px; }

/* ============================================================
   CONTACT — letterform
   ============================================================ */
.contact {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 88px);
  margin-bottom: 80px;
}
@media (max-width: 880px) {
  .contact { grid-template-columns: 1fr; }
}
.contact__copy {
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--paper-soft);
  font-weight: 300;
  max-width: 36ch;
  margin: 0 0 36px;
}

.contact__details {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.contact__details a {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
  color: var(--paper);
  transition: color 200ms var(--ease-out);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.contact__details a:hover { color: var(--brass-bright); }
.contact__details a span:first-child {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.contact__details a span:last-child {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-dim);
  letter-spacing: 0.1em;
}

/* ---------- Form ---------- */
.form {
  background: var(--ink-elev);
  border: 1px solid var(--rule);
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
}
.form::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60px; height: 1px;
  background: var(--brass);
}
.form__head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 4px;
}
.form__head b { color: var(--brass); font-weight: 500; }
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.field__label .req { color: var(--brass); margin-left: 4px; }
.field__input, .field__select, .field__textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--paper);
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color 200ms var(--ease-out);
  width: 100%;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.field__select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M3 5l4 4 4-4' stroke='%239aa099' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 28px;
}
.field__select option { background: var(--ink-base); color: var(--paper); }
.field__textarea { min-height: 132px; resize: vertical; line-height: 1.5; }
.field__input:focus, .field__select:focus, .field__textarea:focus {
  border-color: var(--brass);
}
.field__input::placeholder, .field__textarea::placeholder { color: var(--paper-faint); }

.form__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding-top: 8px;
  flex-wrap: wrap;
}
.form__status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin: 0;
}
.form__status.is-error { color: var(--terracotta); }
.form__status.is-ok { color: var(--moss); }

.form__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--brass);
  color: var(--ink-base);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.form__btn:hover:not(:disabled) { background: var(--brass-bright); transform: translateY(-1px); }
.form__btn:disabled { opacity: 0.5; cursor: wait; }
.form__btn svg { width: 14px; height: 14px; }

.form__honey { position: absolute; left: -9999px; }

/* ============================================================
   FOOTER
   ============================================================ */
.colophon {
  border-top: 1px solid var(--rule);
  padding: 72px 0 40px;
  background: var(--ink-deep);
}
.colophon__grid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 64px;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 32px;
}
.colophon__brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 50, "WONK" 0;
  font-size: 22px;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 16px;
}
.colophon__brand em {
  font-style: italic;
  font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1;
  color: var(--brass);
}
.colophon__tagline {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.75;
  color: var(--paper-dim);
  letter-spacing: 0.01em;
}
.colophon__col-heading {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--paper-faint);
  display: block;
  margin-bottom: 18px;
}
.colophon__links {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.colophon__links a {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--paper-dim);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 200ms var(--ease-out);
}
.colophon__links a:hover { color: var(--paper); }
.colophon__loc {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--paper-faint);
  letter-spacing: 0.01em;
  display: block;
  margin-top: 4px;
}
.colophon__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.colophon__meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Stagger the hero pieces */
.hero__h1 { transition-delay: 60ms; }
.hero__lede, .hero__actions { transition-delay: 220ms; }
.hero__bottom { transition-delay: 360ms; }

/* ============================================================
   CRAFT LAYER — intro curtain, section indicator, axis morph,
   sticky numbers, drop caps, edge crosshairs.
   ============================================================ */

/* ---------- Cinematic intro curtain ---------- */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--ink-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  overflow: hidden;
}
.curtain__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper-faint);
  opacity: 0;
  animation: curtainFadeIn 600ms 100ms var(--ease-out) forwards;
}
.curtain__mark {
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 110px);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  letter-spacing: -0.02em;
  color: var(--paper);
  line-height: 1;
}
.curtain__mark em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--brass);
}
.curtain__bar {
  width: 0;
  height: 1px;
  background: var(--brass);
  display: block;
  animation: curtainBar 460ms 90ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes curtainBar { to { width: 240px; } }
@keyframes curtainFadeIn { to { opacity: 1; } }
.curtain.is-out {
  pointer-events: none;
  animation: curtainOut 700ms cubic-bezier(0.7, 0, 0.25, 1) forwards;
}
@keyframes curtainOut {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-101%); }
}
@media (prefers-reduced-motion: reduce) {
  .curtain { display: none !important; }
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--paper);
  z-index: 9997;
  pointer-events: none;
  transition: width 80ms linear;
}

/* ---------- Section indicator (bottom-left) ---------- */
.now-reading {
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px 11px;
  background: color-mix(in srgb, var(--ink-deep) 88%, transparent);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-faint);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.now-reading.is-shown { opacity: 1; transform: translateY(0); }
.now-reading b {
  color: var(--paper);
  font-weight: 500;
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.now-reading b::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--brass);
  display: block;
}
@media (max-width: 720px) { .now-reading { display: none; } }

/* ---------- Hero h1 axis morph on reveal ---------- */
.hero__h1 {
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  transition: opacity 900ms var(--ease-out),
              transform 900ms var(--ease-out),
              font-variation-settings 1600ms cubic-bezier(0.22, 1, 0.36, 1) 200ms;
}
.hero__h1.is-in { font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0; }
.hero__h1 em {
  transition: font-variation-settings 1800ms cubic-bezier(0.22, 1, 0.36, 1) 500ms,
              color 800ms var(--ease-out) 500ms;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  color: var(--paper);
}
.hero__h1.is-in em {
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--paper-soft);
}

/* ---------- Drop cap on Promise body ---------- */
.promise__copy {
  font-feature-settings: "ss01", "cv11";
}
.promise__copy::first-letter {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  font-size: 4.4em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.10em -0.05em -0.04em;
  color: var(--brass);
}

/* ---------- Sticky process numbers ---------- */
@media (min-width: 881px) {
  .sprint__step { align-items: start; }
  .sprint__num {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

/* ---------- Scroll-responsive masthead ---------- */
.masthead {
  transition: backdrop-filter 280ms var(--ease-out),
              background 280ms var(--ease-out),
              border-color 280ms var(--ease-out),
              height 280ms var(--ease-out);
}
.masthead.is-scrolled {
  background: color-mix(in srgb, var(--ink-deep) 94%, transparent);
  border-bottom-color: var(--rule-strong);
}

/* ---------- Page edge corner crosshairs ---------- */
.corners {
  position: fixed;
  top: 12px; right: 56px; bottom: 12px; left: 12px;
  pointer-events: none;
  z-index: 80;
}
.corners span {
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--rule-strong);
}
.corners span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.corners span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.corners span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.corners span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
@media (max-width: 980px) { .corners { right: 12px; } }
@media (max-width: 720px) { .corners { display: none; } }

/* ---------- Body fade-in once ready ---------- */
body.is-loading main, body.is-loading .masthead, body.is-loading .ticker, body.is-loading .colophon { opacity: 0; }
main, .masthead, .ticker, .colophon { transition: opacity 600ms var(--ease-out); }

/* ============================================================
   CRAFT LAYER II — char-split h1, preview cards, signature
   wordmark, ghost numeral, choreography, form success
   ============================================================ */

/* ---------- Letter-by-letter hero h1 reveal ---------- */
.hero__h1 .word { display: inline-block; white-space: nowrap; }
.hero__h1 .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  transition: opacity 700ms var(--ease-out),
              transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 22ms + 100ms);
}
.hero__h1.is-in .char { opacity: 1; transform: none; }
/* Override the global data-reveal hidden state since chars handle entry now */
.hero__h1[data-reveal],
.hero__h1[data-reveal].is-in {
  opacity: 1; transform: none;
}

/* ---------- Hero ghost numeral watermark ---------- */
.hero__ghost {
  position: absolute;
  right: -2vw;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 250;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(180px, 32vw, 480px);
  letter-spacing: -0.055em;
  color: var(--brass);
  opacity: 0.045;
  pointer-events: none;
  z-index: 0;
  line-height: 0.82;
  white-space: nowrap;
  user-select: none;
}
@media (max-width: 880px) { .hero__ghost { font-size: 36vw; right: -4vw; opacity: 0.05; } }
@media (max-width: 600px) { .hero__ghost { display: none; } }

/* ---------- Synthetic preview cards on Index row hover ---------- */
.preview-stage {
  position: fixed;
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  height: 380px;
  z-index: 70;
  pointer-events: none;
  opacity: 0;
  transition: opacity 360ms var(--ease-out);
}
.preview-stage.is-shown { opacity: 1; }
.preview {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 32px 64px -20px rgba(0, 0, 0, 0.7),
              0 0 0 1px var(--rule);
  opacity: 0;
  transform: translate(20px, 8px) scale(0.96) rotate(1.5deg);
  transition: opacity 460ms var(--ease-out),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  border-radius: 2px;
}
.preview.is-active {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(0deg);
}
.preview__band { height: 84px; flex-shrink: 0; position: relative; overflow: hidden; }
.preview__body {
  flex: 1;
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.preview__meta {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.preview__head {
  font-size: 36px;
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
}
.preview__sub {
  font-size: 12.5px;
  line-height: 1.45;
  margin: 4px 0 12px;
}
.preview__pill {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 13px;
  margin-top: auto;
}
.preview__rule {
  width: 36px;
  height: 1px;
  margin-top: 6px;
}

/* Preview 1 — Hartwell Electrical (trade, charcoal + electric amber) */
.preview[data-pin="hartwell"] .preview__band {
  background: #15181d;
  background-image:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(255, 178, 0, 0.16) 22px 26px);
}
.preview[data-pin="hartwell"] .preview__body {
  background: #f2f3f1;
  color: #15181d;
}
.preview[data-pin="hartwell"] .preview__meta { color: #9a7212; letter-spacing: 0.22em; }
.preview[data-pin="hartwell"] .preview__head {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "opsz" 9, "SOFT" 100, "WONK" 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 30px;
}
.preview[data-pin="hartwell"] .preview__head em { font-style: normal; color: #b07d00; }
.preview[data-pin="hartwell"] .preview__pill { background: #ffb200; color: #15181d; }
.preview[data-pin="hartwell"] .preview__rule { background: #ffb200; }

/* Preview 2 — Tindarra Roasters (maker, espresso + cream + terracotta) */
.preview[data-pin="tindarra"] .preview__band {
  background: #2a1d16;
  background-image:
    radial-gradient(circle at 50% 120%, rgba(181, 97, 47, 0.55) 0 40%, transparent 60%);
}
.preview[data-pin="tindarra"] .preview__body {
  background: #f3ece1;
  color: #2a1d16;
}
.preview[data-pin="tindarra"] .preview__meta { color: #8a6a4a; }
.preview[data-pin="tindarra"] .preview__head {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: 38px;
  color: #2a1d16;
}
.preview[data-pin="tindarra"] .preview__head em {
  font-style: italic;
  color: #b5612f;
}
.preview[data-pin="tindarra"] .preview__pill {
  background: transparent;
  color: #b5612f;
  border: 1px solid #b5612f;
}
.preview[data-pin="tindarra"] .preview__rule { background: #b5612f; }

/* Preview 3 — Saltgrove Movement (wellness, eucalypt + sage + clay) */
.preview[data-pin="saltgrove"] .preview__band {
  background: #3f4a3a;
  background-image:
    repeating-linear-gradient(0deg, rgba(238, 240, 234, 0.05) 0 1px, transparent 1px 16px);
}
.preview[data-pin="saltgrove"] .preview__body {
  background: #eef0ea;
  color: #2b3127;
}
.preview[data-pin="saltgrove"] .preview__meta { color: #7c8a5c; }
.preview[data-pin="saltgrove"] .preview__head {
  font-family: var(--font-display);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0;
  font-size: 36px;
}
.preview[data-pin="saltgrove"] .preview__head em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: #7c8a5c;
}
.preview[data-pin="saltgrove"] .preview__pill { background: #3f4a3a; color: #eef0ea; }
.preview[data-pin="saltgrove"] .preview__rule { background: #7c8a5c; }

@media (max-width: 1180px) { .preview-stage { display: none; } }

/* ---------- Tariff stagger choreography ---------- */
.tariff__row[data-reveal] { transform: translateY(28px) translateX(-18px); }
.tariff__row[data-reveal].is-in { transform: none; }

/* ---------- Sprint alternating reveal ---------- */
.sprint__step[data-reveal] { transform: translateY(28px); }
.sprint__step:nth-child(odd)[data-reveal] { transform: translateY(28px) translateX(-22px); }
.sprint__step:nth-child(even)[data-reveal] { transform: translateY(28px) translateX(22px); }
.sprint__step[data-reveal].is-in { transform: none; }

/* ---------- Index row stagger ---------- */
.index-row[data-reveal] { transform: translateY(20px) translateX(-12px); }
.index-row[data-reveal].is-in { transform: none; }

/* ---------- Ticker hover pause ---------- */
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }

/* ---------- Massive signature wordmark ---------- */
.signature {
  border-top: 1px solid var(--rule);
  background: var(--ink-deep);
  padding: 0;
  text-align: center;
  overflow: hidden;
  line-height: 0;
  position: relative;
}
.signature__mark {
  font-family: var(--font-display);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  font-size: clamp(80px, 24vw, 380px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--paper);
  display: inline-block;
  white-space: nowrap;
  margin-bottom: -0.16em;
  position: relative;
  z-index: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.signature__mark.is-in { clip-path: inset(0 0 0 0); }
.signature__mark em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--brass);
}
/* Reset data-reveal default state for signature */
.signature__mark[data-reveal] { opacity: 1; transform: none; }

/* ---------- Form success transformation ---------- */
.form__success {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0 8px;
  opacity: 0;
}
.form__success.is-shown {
  display: flex;
  animation: successIn 700ms var(--ease-out) forwards;
}
@keyframes successIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.form__tick {
  width: 56px; height: 56px;
  color: var(--brass);
  margin-bottom: 6px;
}
.form__tick-ring {
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  animation: drawRing 700ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards;
}
.form__tick-path {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: drawTick 480ms cubic-bezier(0.22, 1, 0.36, 1) 800ms forwards;
}
@keyframes drawRing { to { stroke-dashoffset: 0; } }
@keyframes drawTick { to { stroke-dashoffset: 0; } }
.form__success-head {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.form__success-head em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--brass);
}
.form__success-body {
  font-size: 15px;
  color: var(--paper-soft);
  line-height: 1.55;
  margin: 0;
}
.form__success-body a {
  color: var(--brass);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 1px;
}

/* ============================================================
   DENSITY PASS — kill empty space, pack the spreads
   ============================================================ */

/* Tighter section rhythm */
:root {
  --section-y: clamp(36px, 5vw, 72px);
  --gutter:    clamp(16px, 3vw, 40px);
}
.hero { padding: clamp(24px, 3.5vw, 56px) 0 clamp(16px, 2vw, 36px); }
.cta { margin-top: clamp(36px, 5vw, 80px); }
.cta__inner { padding: clamp(32px, 5vw, 72px) 0; }
.issue {
  padding-top: var(--section-y);
}
.issue__head {
  padding-bottom: clamp(14px, 2vw, 28px);
  margin-bottom: clamp(20px, 3vw, 36px);
}
.sprint__step { padding: clamp(20px, 3vw, 40px) 0; }
.tariff__row { padding: clamp(16px, 2.5vw, 28px) 0; }
.contact { margin-bottom: clamp(48px, 7vw, 100px); }
.colophon { padding: 48px 0 32px; }
.colophon__grid {
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 720px) {
  .colophon__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Hero — dense top kicker strip ---------- */
.hero__strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  padding-bottom: 14px;
  margin-bottom: clamp(32px, 5vw, 56px);
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 1;
}
.hero__strip > div {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 18px;
  border-right: 1px solid var(--rule);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.hero__strip > div:first-child { padding-left: 0; }
.hero__strip > div:last-child { border-right: 0; padding-right: 0; }
.hero__strip span {
  color: var(--paper-faint);
  font-size: 9.5px;
  letter-spacing: 0.16em;
}
.hero__strip b {
  color: var(--paper);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.1em;
}
.hero__status-live {
  color: var(--moss) !important;
  display: inline-flex; align-items: center; gap: 8px;
}
.hero__status-live::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--moss);
  border-radius: 999px;
  animation: statusPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
@media (max-width: 880px) {
  .hero__strip { grid-template-columns: repeat(2, 1fr); gap: 14px 0; padding-bottom: 14px; }
  .hero__strip > div { padding: 4px 14px; border-right: 1px solid var(--rule); }
  .hero__strip > div:nth-child(2n) { border-right: 0; padding-right: 0; }
  .hero__strip > div:nth-child(2n+1) { padding-left: 0; }
  /* Mobile: the Studio / Status strip sits above the fold, where the scroll-reveal
     IntersectionObserver often doesn't fire until the first scroll/refresh — leaving
     "Taking briefs" invisible on load. Force it visible at the top (not sticky). */
  .hero__strip[data-reveal] { opacity: 1 !important; transform: none !important; }
  /* Mobile: the preview cards are hover-only, so the "Hover for preview" hint is dead
     weight on touch. Hide it. */
  .index-foot__hint { display: none; }
}

/* Hero h1 — slightly tighter, give room for under-grid */
.hero__h1 {
  margin: 0 0 clamp(24px, 4vw, 48px);
  font-size: clamp(44px, 9.5vw, 152px);
}

/* ---------- Hero under — 2-col lede + live rail ---------- */
.hero__under {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: stretch;
  margin-top: 0;
  position: relative;
  z-index: 1;
}
.hero__lede-wrap {
  display: flex; flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
  justify-content: space-between;
}
.hero__actions { align-items: center !important; flex-direction: row !important; flex-wrap: wrap; gap: 12px 18px; }

.hero__live-rail {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--ink-deep) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0;
}

/* Wrapper details — only acts as a collapsible on mobile */
.hero__live-rail-wrap { }
.hero__live-rail-wrap > summary { list-style: none; }
.hero__live-rail-wrap > summary::-webkit-details-marker { display: none; }
.hero__live-rail-toggle {
  display: none;
  cursor: pointer;
  user-select: none;
  align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--ink-deep) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  color: var(--paper-dim);
}
.hero__live-rail-toggle b { color: var(--paper); font-weight: 500; }
.hero__live-rail-chev {
  font-family: var(--font-mono);
  color: var(--brass);
  transition: transform 240ms var(--ease-out);
  display: inline-block;
}
.hero__live-rail-wrap[open] .hero__live-rail-chev { transform: rotate(180deg); }
.hero__live-rail-wrap[open] .hero__live-rail-toggle {
  border-bottom: 0;
}
@media (max-width: 720px) {
  .hero__live-rail-toggle { display: flex; }
  .hero__live-rail { display: none; }
  .hero__live-rail-wrap[open] .hero__live-rail { display: flex; }
}
.hero__live-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
}
.hero__live-row:last-child { border-bottom: 0; }
.hero__live-row span {
  color: var(--paper-faint);
  font-size: 10px;
  letter-spacing: 0.16em;
}
.hero__live-row b {
  color: var(--paper);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-feature-settings: "tnum";
}
.hero__live-row b i {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--moss);
  font-style: normal;
  animation: statusPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@media (max-width: 880px) {
  .hero__under { grid-template-columns: 1fr; }
}

/* ---------- Hero bottom — 8-cell folio strip ---------- */
.hero__bottom {
  margin-top: clamp(32px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  position: relative;
  z-index: 1;
}
.hero__bottom > div {
  display: flex; flex-direction: column; gap: 3px;
  padding: 0 12px;
  border-right: 1px solid var(--rule);
}
.hero__bottom > div:first-child { padding-left: 0; }
.hero__bottom > div:last-child { border-right: 0; padding-right: 0; }
.hero__bottom span:first-child {
  color: var(--paper-faint);
  font-size: 9px;
  letter-spacing: 0.16em;
}
.hero__bottom b {
  color: var(--paper);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  line-height: 1.35;
}
@media (max-width: 1180px) {
  .hero__bottom { grid-template-columns: repeat(4, 1fr); gap: 14px 0; }
  .hero__bottom > div:nth-child(4n+1) { padding-left: 0; }
  .hero__bottom > div:nth-child(4n) { border-right: 0; padding-right: 0; }
}
@media (max-width: 600px) {
  .hero__bottom { grid-template-columns: repeat(2, 1fr); }
  .hero__bottom > div:nth-child(2n+1) { padding-left: 0; }
  .hero__bottom > div:nth-child(2n) { border-right: 0; padding-right: 0; }
  .hero__bottom > div:nth-child(4n+1) { border-right: 1px solid var(--rule); padding-right: 12px; }
}

/* ---------- Hero closing pull-quote ---------- */
.hero__quote {
  margin-top: clamp(48px, 7vw, 96px);
  padding: clamp(28px, 4vw, 56px) 0 clamp(8px, 1.5vw, 16px);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(24px, 4vw, 56px);
  position: relative;
  z-index: 1;
}
.hero__quote-mark {
  position: absolute;
  top: -0.18em;
  left: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 250;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  font-size: clamp(96px, 13vw, 180px);
  line-height: 1;
  color: var(--brass);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
.hero__quote-text {
  font-family: var(--font-display);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--paper);
  text-wrap: pretty;
  margin: 0;
  padding-left: clamp(56px, 8vw, 110px);
}
.hero__quote-text em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--paper-soft);
}
.hero__quote-attr {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
  white-space: nowrap;
}
.hero__quote-attr b { color: var(--paper); font-weight: 500; }
.hero__quote-attr span { color: var(--paper-faint); font-size: 10px; letter-spacing: 0.16em; }
@media (max-width: 720px) {
  .hero__quote { grid-template-columns: 1fr; gap: 18px; }
  .hero__quote-attr { text-align: left; }
  .hero__quote-text { padding-left: clamp(40px, 12vw, 64px); }
}

/* ---------- Contact — dense tips sidebar ---------- */
.contact__tips {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.contact__tips-head {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 14px;
  display: flex; justify-content: space-between;
}
.contact__tips-head em { font-style: normal; color: var(--paper-faint); font-size: 10px; }
.contact__tips-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.contact__tips-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--paper-soft);
  font-weight: 300;
}
.contact__tips-list li:last-child { border-bottom: 0; }
.contact__tips-list li::before {
  content: '+';
  font-family: var(--font-mono);
  color: var(--brass);
  font-size: 12px;
  align-self: start;
  padding-top: 2px;
}

/* ---------- Pricing — denser bullet rows ---------- */
.tariff__list { gap: 4px; font-size: 13.5px; }
.tariff__list li { padding-left: 16px; line-height: 1.4; }
.tariff__list li.tariff__example {
  margin-top: 12px;
  padding: 10px 0 0;
  border-top: 1px dashed var(--rule);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.tariff__list li.tariff__example::before { content: none; }
.tariff__list li.tariff__example b { color: var(--brass); font-weight: 500; }

/* ============================================================
   SPRINT — numbers become massive watermark backdrops
   ============================================================ */
.sprint .sprint__step {
  display: block;
  position: relative;
  padding: clamp(36px, 5vw, 80px) 0;
}
.sprint .sprint__step:last-child { border-bottom: 0; }

.sprint__watermark {
  position: absolute;
  top: 50%;
  left: clamp(8px, 1.5vw, 24px);
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 250;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-size: clamp(180px, 26vw, 360px);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--brass);
  opacity: 0.075;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  font-feature-settings: "lnum";
  white-space: nowrap;
}
.sprint .sprint__step:nth-child(2n) .sprint__watermark {
  left: auto;
  right: clamp(8px, 1.5vw, 24px);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  opacity: 0.08;
}
.sprint__body {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
}
.sprint__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  width: 100%;
}
.sprint__meta::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--brass);
}
.sprint__meta b { color: var(--brass); font-weight: 500; }
.sprint .sprint__points { grid-template-columns: 1fr 1fr; }

@media (max-width: 880px) {
  .sprint__watermark { font-size: clamp(200px, 60vw, 360px); opacity: 0.06; }
  .sprint .sprint__points { grid-template-columns: 1fr; }
}

/* ============================================================
   FAQ — native <details> dropdowns
   ============================================================ */
.faq__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule-strong);
}
.faq__item {
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: clamp(18px, 2.4vw, 30px) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--paper);
  list-style: none;
  user-select: none;
  transition: color 220ms var(--ease-out);
}
.faq__item summary::-webkit-details-marker,
.faq__item summary::marker { display: none; content: ''; }
.faq__item summary > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--brass);
  flex-shrink: 0;
  transition: transform 360ms var(--ease-out),
              background 280ms var(--ease-out),
              border-color 280ms var(--ease-out),
              color 280ms var(--ease-out);
}
.faq__item summary:hover { color: var(--brass-bright); }
.faq__item summary:hover > span {
  background: color-mix(in srgb, var(--brass) 18%, transparent);
  border-color: var(--brass);
}
.faq__item[open] summary { color: var(--brass); }
.faq__item[open] summary > span {
  transform: rotate(45deg);
  background: var(--brass);
  color: var(--ink-base);
  border-color: var(--brass);
}
.faq__body {
  padding: 0 0 clamp(20px, 2.6vw, 32px);
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--paper-soft);
  font-weight: 300;
  /* JS-driven smooth expand: animate via inline max-height + opacity */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  transform: translateY(-4px);
  transition:
    max-height 520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 360ms cubic-bezier(0.22, 1, 0.36, 1) 80ms,
    padding-bottom 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.faq__item.is-open .faq__body {
  opacity: 1;
  padding-bottom: clamp(20px, 2.6vw, 32px);
  transform: translateY(0);
}
.faq__body p { margin: 0; }
.faq__item[open] .faq__body { animation: none; }
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   TWEAK MODES — feel-shifting overrides
   ============================================================ */

/* ---------- MOOD: Daylight (paper editorial, ink on cream) ---------- */
body[data-mood="daylight"] {
  --ink-base:    #f1ebe0;
  --ink-deep:    #ece5d6;
  --ink-elev:    #e3dccb;
  --ink-rise:    #d8d0bd;
  --paper:       #1a1612;
  --paper-soft:  #2a241d;
  --paper-dim:   #5b5247;
  --paper-faint: #8a8073;
  --rule:        rgba(26, 22, 18, 0.14);
  --rule-strong: rgba(26, 22, 18, 0.30);
  --brass:       #b04e26;
  --brass-bright:#c2402a;
  --moss:        #4a6b3d;
}
body[data-mood="daylight"] .grain { mix-blend-mode: multiply; opacity: 0.07; }
body[data-mood="daylight"] .preview-stage,
body[data-mood="daylight"] .preview { filter: none; }

/* ---------- MOOD: Inferno (oxblood ink, bone paper) ---------- */
body[data-mood="inferno"] {
  --ink-base:    #100506;
  --ink-deep:    #1a0708;
  --ink-elev:    #260a0c;
  --ink-rise:    #320d10;
  --paper:       #f3e9d8;
  --paper-soft:  #e2d5be;
  --paper-dim:   #a89882;
  --paper-faint: #6b5f50;
  --rule:        rgba(243, 233, 216, 0.12);
  --rule-strong: rgba(243, 233, 216, 0.26);
  --brass:       #ff5b3a;
  --brass-bright:#ff7a4a;
  --moss:        #d39a3e;
}

/* ---------- MOOD: Aqueous (deep teal + sodium lamp) ---------- */
body[data-mood="aqueous"] {
  --ink-base:    #04161b;
  --ink-deep:    #061d23;
  --ink-elev:    #08252c;
  --ink-rise:    #0c2f37;
  --paper:       #e6f0ec;
  --paper-soft:  #c9d8d2;
  --paper-dim:   #7e948c;
  --paper-faint: #506962;
  --rule:        rgba(230, 240, 236, 0.10);
  --rule-strong: rgba(230, 240, 236, 0.24);
  --brass:       #f5b341;
  --brass-bright:#ffc760;
  --moss:        #7ad3a8;
}

/* ---------- TYPE VOICE ---------- */
/* Press — harder, slab-ish; reduce SOFT, push weight up */
body[data-voice="press"] .display,
body[data-voice="press"] .hero__h1,
body[data-voice="press"] .issue__title,
body[data-voice="press"] .sprint__title,
body[data-voice="press"] .tariff__name,
body[data-voice="press"] .promise__pull,
body[data-voice="press"] .cta__head,
body[data-voice="press"] .signature__mark,
body[data-voice="press"] .index-row__name,
body[data-voice="press"] .faq__item summary {
  font-variation-settings: "opsz" 9, "SOFT" 0, "WONK" 0 !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
}
body[data-voice="press"] .display em,
body[data-voice="press"] .hero__h1 em,
body[data-voice="press"] .issue__title em,
body[data-voice="press"] .sprint__title em,
body[data-voice="press"] .tariff__name em,
body[data-voice="press"] .promise__pull em,
body[data-voice="press"] .cta__head em,
body[data-voice="press"] .signature__mark em,
body[data-voice="press"] .index-row__name em {
  font-variation-settings: "opsz" 9, "SOFT" 0, "WONK" 0 !important;
  font-style: italic;
  font-weight: 600 !important;
}

/* Ghost — feather light, airy, all SOFT, low weight */
body[data-voice="ghost"] .display,
body[data-voice="ghost"] .hero__h1,
body[data-voice="ghost"] .issue__title,
body[data-voice="ghost"] .sprint__title,
body[data-voice="ghost"] .tariff__name,
body[data-voice="ghost"] .promise__pull,
body[data-voice="ghost"] .cta__head,
body[data-voice="ghost"] .signature__mark,
body[data-voice="ghost"] .index-row__name {
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0 !important;
  font-weight: 250 !important;
  letter-spacing: -0.012em !important;
}
body[data-voice="ghost"] .display em,
body[data-voice="ghost"] .hero__h1 em,
body[data-voice="ghost"] .issue__title em,
body[data-voice="ghost"] .sprint__title em,
body[data-voice="ghost"] .tariff__name em,
body[data-voice="ghost"] .promise__pull em,
body[data-voice="ghost"] .cta__head em,
body[data-voice="ghost"] .index-row__name em {
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1 !important;
  font-weight: 250 !important;
}

/* Boutique — italic dominant, wonky everywhere, high contrast */
body[data-voice="boutique"] .display,
body[data-voice="boutique"] .hero__h1,
body[data-voice="boutique"] .issue__title,
body[data-voice="boutique"] .sprint__title,
body[data-voice="boutique"] .tariff__name,
body[data-voice="boutique"] .promise__pull,
body[data-voice="boutique"] .cta__head,
body[data-voice="boutique"] .signature__mark,
body[data-voice="boutique"] .index-row__name,
body[data-voice="boutique"] .faq__item summary {
  font-style: italic !important;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1 !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
}
body[data-voice="boutique"] .masthead__brand b,
body[data-voice="boutique"] .colophon__brand,
body[data-voice="boutique"] .curtain__mark {
  font-style: italic !important;
  font-variation-settings: "opsz" 30, "SOFT" 100, "WONK" 1 !important;
}

/* ---------- DENSITY / CADENCE ---------- */
body[data-density="sparse"] {
  --section-y: clamp(120px, 16vw, 240px) !important;
  --gutter:    clamp(28px, 5vw, 72px) !important;
}
body[data-density="sparse"] .hero { padding: clamp(96px, 14vw, 200px) 0 clamp(72px, 10vw, 140px) !important; }
body[data-density="sparse"] .hero__h1 { font-size: clamp(56px, 12vw, 200px) !important; max-width: 12ch !important; }
body[data-density="sparse"] .sprint__step { padding: clamp(80px, 14vw, 200px) 0 !important; }
body[data-density="sparse"] .tariff__row { padding: clamp(40px, 6vw, 80px) 0 !important; }
body[data-density="sparse"] .ticker__track { animation-duration: 80s !important; }
body[data-density="sparse"] .cta__inner { padding: clamp(120px, 18vw, 240px) 0 !important; }

body[data-density="packed"] {
  --section-y: clamp(28px, 4vw, 56px) !important;
  --gutter:    clamp(12px, 2vw, 28px) !important;
}
body[data-density="packed"] .hero { padding: clamp(20px, 3vw, 44px) 0 clamp(12px, 2vw, 28px) !important; }
body[data-density="packed"] .hero__h1 { font-size: clamp(36px, 7.5vw, 120px) !important; margin-bottom: clamp(16px, 2vw, 28px) !important; }
body[data-density="packed"] .sprint__step { padding: clamp(20px, 3vw, 36px) 0 !important; }
body[data-density="packed"] .tariff__row { padding: clamp(14px, 2vw, 24px) 0 !important; }
body[data-density="packed"] .issue__head { padding-bottom: clamp(14px, 2vw, 24px) !important; margin-bottom: clamp(18px, 2.5vw, 32px) !important; }
body[data-density="packed"] .ticker__track { animation-duration: 22s !important; }
body[data-density="packed"] .cta__inner { padding: clamp(28px, 4vw, 56px) 0 !important; }
body[data-density="packed"] .cta__head { font-size: clamp(36px, 7vw, 110px) !important; }

/* ---------- ATMOSPHERE TOGGLES ---------- */
body[data-grain="off"] .grain { display: none; }
body[data-corners="off"] .corners { display: none; }
body[data-ticker="off"] .ticker { display: none; }
body[data-ticker="off"] .hero { padding-top: clamp(72px, 10vw, 140px); }

/* ============================================================
   MOBILE OPTIMIZATION PASS — ≤ 600px
   Goal: tighter rhythm, generous touch targets, no iOS zoom,
   readable type, full-bleed CTAs, calmer chrome.
   ============================================================ */
@media (max-width: 600px) {

  /* Generous gutters + breathable section rhythm */
  :root {
    --gutter:    22px !important;
    --section-y: 68px !important;
  }

  /* Body weight — slightly easier to read at small sizes */
  body { font-size: 15.5px; line-height: 1.55; }

  /* ---------- Masthead (top bar) ---------- */
  .masthead { padding-top: 14px; padding-bottom: 14px; }
  .masthead__logo b { font-size: 14px; }

  /* ---------- Hero ---------- */
  .hero { padding: 28px 0 36px !important; }

  /* Hero strip: 2x2 with cleaner cells */
  .hero__strip {
    grid-template-columns: 1fr 1fr;
    gap: 14px 14px !important;
    padding-bottom: 18px;
    margin-bottom: 28px;
  }
  .hero__strip > div {
    padding: 0 !important;
    border-right: 0 !important;
    gap: 6px;
  }
  .hero__strip span { font-size: 9px; }
  .hero__strip b { font-size: 12px; }

  /* Eyebrow above H1 */
  .hero .eyebrow { font-size: 10px; letter-spacing: 0.18em; }

  /* Hero h1 — sized for 360–414 viewports */
  .hero__h1 {
    font-size: clamp(40px, 12.5vw, 60px) !important;
    line-height: 1.0 !important;
    margin: 18px 0 22px !important;
    letter-spacing: -0.015em;
  }

  /* Lede paragraph under H1 */
  .hero__lede {
    font-size: 16px;
    line-height: 1.5;
    max-width: none;
  }

  /* Hero CTAs — full-width stacked, big tap targets */
  .hero__actions {
    width: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 22px;
  }
  .hero__primary, .hero__second {
    width: 100%;
    justify-content: center;
    padding: 16px 22px;
    font-size: 14px;
    min-height: 52px;
    box-sizing: border-box;
  }

  /* Hero pull-quote spacing */
  .hero__quote { margin-top: 28px; padding-top: 24px; }
  .hero__quote-body { font-size: 18px; line-height: 1.4; }

  /* Live-rail toggle — taller hit target */
  .hero__live-rail-toggle {
    padding: 14px 16px;
    min-height: 48px;
  }

  /* ---------- Issue heads (section openers) ---------- */
  .issue { padding-top: var(--section-y); }
  .issue__head {
    padding-bottom: 18px !important;
    margin-bottom: 24px !important;
    gap: 14px !important;
  }
  .issue__num {
    font-size: 64px !important;
    line-height: 1 !important;
  }
  .issue__title-wrap { gap: 14px !important; }
  .issue__kicker { font-size: 10px; gap: 10px; }
  .issue__kicker::before { width: 16px; }
  .issue__title {
    font-size: clamp(30px, 9vw, 44px) !important;
    line-height: 1.05 !important;
  }
  .issue__sub { font-size: 15px; line-height: 1.55; }

  /* ---------- The Index (homepage pricing snapshot) ----------
     Show the price on mobile — it was display:none ≤880px, which hid
     the exact figure prospects came to see. Name + descriptor stack on
     the left; the price holds the right rail in place of the decorative
     arrow. minmax(0,1fr) lets the name shrink instead of pushing the
     row wider than the screen. */
  .index-row {
    padding: 18px 0 !important;
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    column-gap: 14px !important;
    row-gap: 3px !important;
    align-items: center;
  }
  .index-row__num { font-size: 11px; align-self: center; grid-row: 1; grid-column: 1; }
  .index-row__name {
    font-size: 22px !important;
    line-height: 1.05;
    grid-row: 1 !important;
    grid-column: 2 !important;
    min-width: 0;
  }
  .index-row__niche {
    font-size: 10px !important;
    color: var(--paper-faint);
    letter-spacing: 0.14em;
    grid-row: 2 !important;
    grid-column: 2 !important;
    display: block !important;
  }
  .index-row__loc { display: none !important; }
  .index-row__price {
    display: block !important;
    grid-row: 1 / span 2 !important;
    grid-column: 3 !important;
    align-self: center;
    text-align: right;
    white-space: nowrap;
    font-size: 16px !important;
    color: var(--paper);
    font-weight: 500;
  }
  .index-row__price small {
    display: block;
    font-size: 9px;
    margin-top: 2px;
    color: var(--paper-faint);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .index-row__arrow { display: none !important; }
  /* Disable the desktop hover-translate on touch */
  .index-row:hover .index-row__name { transform: none; }

  /* ---------- The Promise ---------- */
  .promise { gap: 28px; }
  .promise__pull { font-size: clamp(26px, 7.5vw, 36px) !important; line-height: 1.1; }
  .promise__points { gap: 18px; }

  /* ---------- The Rates (pricing) ---------- */
  .tariff__row {
    padding: 26px 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    row-gap: 14px;
  }
  .tariff__row > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .tariff__num {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    font-size: 11px;
  }
  .tariff__num span {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    color: var(--paper-faint);
  }
  .tariff__name {
    font-size: 30px !important;
    margin-top: 0 !important;
  }
  .tariff__name small { font-size: 11px; margin-top: 8px; }
  .tariff__for { font-size: 14px; line-height: 1.5; }
  .tariff__for b { font-size: 9.5px; margin-bottom: 6px; }
  .tariff__list { font-size: 14px; }
  .tariff__list li { line-height: 1.45; padding-left: 16px; }
  .tariff__price {
    text-align: left !important;
    font-size: 36px !important;
    padding-top: 4px;
  }
  .tariff__price small { font-size: 10px; margin-top: 4px; }
  /* Featured row "Most chosen" ribbon: simpler on mobile */
  .tariff__row--featured::after {
    top: 18px;
    right: 0;
    font-size: 9px;
    padding: 4px 10px;
  }

  /* ---------- The Sprint ---------- */
  .sprint__step {
    padding: 22px 0 !important;
    gap: 14px !important;
  }
  .sprint__num { font-size: 48px !important; }
  .sprint__title { font-size: 26px !important; line-height: 1.1; }
  .sprint__body { font-size: 15px; line-height: 1.55; }
  .sprint__points { gap: 12px !important; }
  .sprint__point { font-size: 13px; }

  /* ---------- The Footnotes (FAQ) ---------- */
  .faq__item summary {
    padding: 18px 0 !important;
    font-size: 17px !important;
    min-height: 56px;
    gap: 14px;
    align-items: center;
  }
  .faq__item summary > span {
    width: 36px; height: 36px;
    flex-shrink: 0;
  }
  .faq__body { font-size: 15px; line-height: 1.6; }

  /* ---------- The Reply (contact) ---------- */
  .contact { gap: 36px; margin-bottom: 64px !important; }
  .form__head { font-size: 14px; }
  .field__label { font-size: 11px; letter-spacing: 0.16em; }

  /* iOS zoom prevention — inputs must be ≥16px */
  .field__input,
  .field__select,
  .field__textarea {
    font-size: 16px !important;
    padding: 12px 0;
  }
  .field__textarea { min-height: 110px; }
  .form__row { gap: 18px; }

  .form__bottom { flex-direction: column; align-items: stretch; gap: 14px; }
  .form__submit {
    width: 100%;
    justify-content: center;
    padding: 16px 22px;
    min-height: 52px;
    font-size: 14px;
  }

  /* ---------- CTA band (between sections) ---------- */
  .cta__inner { padding: 44px 0 !important; }
  .cta__head { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.1; }
  .cta__btn {
    width: 100%;
    justify-content: center;
    padding: 16px 22px;
    min-height: 52px;
  }

  /* ---------- Colophon (footer) ---------- */
  .colophon { padding: 40px 0 28px !important; }
  .colophon__grid { gap: 28px !important; }
  .colophon__col-heading { font-size: 9.5px; }
  .colophon__links a { font-size: 14px; padding: 4px 0; }
  .colophon__loc { font-size: 11px; }

  /* ---------- Quiet the chrome on phones ---------- */
  .ticker { display: none; }              /* dense mono ticker — pure noise on mobile */
  .scroll-progress { display: none; }     /* tiny progress dot — nothing to chase */
  .signature__mark { font-size: clamp(80px, 28vw, 140px) !important; }

  /* Drop the full-viewport film-grain layer on phones: at 0.045 opacity it's
     imperceptible on a handset, but mix-blend-mode on a fixed full-screen layer
     forces a whole-viewport composite every scroll frame (jank on low-end GPUs)
     and can read as noise on cheaper panels. Desktop keeps the grain. */
  .grain { display: none; }
}

/* Ultra-small phones (≤ 360px) — give text one more notch */
@media (max-width: 360px) {
  .hero__h1     { font-size: 36px !important; }
  .issue__title { font-size: 28px !important; }
  .issue__num   { font-size: 56px !important; }
  .tariff__name { font-size: 26px !important; }
  .tariff__price{ font-size: 32px !important; }
}

/* ============================================================
   MULTI-PAGE SHELL — shared components for /work, case studies,
   and the studio/services/contact pages. Monochrome Nocturne
   language only: hairline rules, mono labels, Fraunces display.
   No accent colour (studio site stays white-on-black).
   ============================================================ */

/* ---------- Active nav state (current page) ---------- */
.masthead__nav a.is-active { color: var(--paper); }
.masthead__nav a.is-active::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  margin-left: 7px;
  border-radius: 999px;
  background: var(--paper);
  vertical-align: middle;
}
/* New-shell nav has no leading numerals, so give it a touch more air. */
.masthead__nav--pages { gap: 30px; }

/* ---------- Generic page intro (non-issue pages) ---------- */
/* Clears the fixed 56px masthead (subpages have no ticker spacer) and
   adds breathing room above the first section. */
.page-top { padding-top: calc(56px + clamp(28px, 5vw, 72px)); }
/* Issue header with no number (intro pages) — let the title-wrap span
   the full width instead of being squeezed into the number column. */
.issue__head--solo { grid-template-columns: 1fr; gap: 0; }

/* Differentiate stacked sections with a raised, inset CARD (not a
   full-bleed band): the dark-grey tone cuts off before the viewport
   edges, the corners round, and a soft shadow lifts it off the page.
   The section provides the outer inset + vertical rhythm; the inner
   .shell becomes the card. */
.issue--raised {
  padding-left: clamp(16px, 3vw, 44px);
  padding-right: clamp(16px, 3vw, 44px);
  padding-bottom: var(--section-y);
}
.issue--raised > .shell {
  background: #1b1c22;
  border: 1px solid var(--rule);
  border-radius: 24px;
  box-shadow: 0 28px 64px -30px rgba(0, 0, 0, 0.85);
  padding-top: clamp(36px, 5vw, 72px);
  padding-bottom: clamp(36px, 5vw, 72px);
  overflow: hidden;
}

/* Studio page — top-align the big section numbers so each sits up
   beside its headline (instead of sinking to the baseline and crowding
   the next section's number). Scoped to Studio only. */
.studio-page .issue__head { align-items: start; }
.studio-page .issue__num { margin-top: 0.18em; }

/* ---------- Compact "quality floor" triad (Studio) ---------- */
.floor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule-strong);
}
.floor__item {
  padding: clamp(22px, 2.6vw, 34px) clamp(20px, 2.5vw, 36px) clamp(22px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--rule);
}
.floor__item:not(:last-child) { border-right: 1px solid var(--rule); }
.floor__item:not(:first-child) { padding-left: clamp(20px, 2.5vw, 36px); }
.floor__meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 12px;
}
.floor__term {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 40, "SOFT" 50, "WONK" 0;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--paper);
  margin: 0 0 10px;
}
.floor__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--paper-soft);
  font-weight: 300;
  margin: 0;
  max-width: 34ch;
}
@media (max-width: 760px) {
  .floor { grid-template-columns: 1fr; }
  .floor__item { border-right: 0 !important; padding: 20px 0 !important; }
}

/* ---------- Browser frame (wraps real screenshots) ---------- */
.frame {
  border: 1px solid var(--rule-strong);
  background: var(--ink-elev);
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 32px 70px -28px rgba(0, 0, 0, 0.85);
}
.frame__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--ink-deep);
  border-bottom: 1px solid var(--rule);
}
.frame__dots { display: flex; gap: 6px; flex-shrink: 0; }
.frame__dots span {
  width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--rule-strong);
}
.frame__url {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--paper-faint);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 12px;
  background: var(--ink-base);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.frame__view { display: block; background: var(--ink-base); }
.frame__view img { display: block; width: 100%; height: auto; }
/* Tall full-page captures sit in a scrollable viewport — "scroll the
   real site" inside the frame, instead of a page-length image. */
.frame--scroll .frame__view {
  max-height: 76vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.frame--scroll .frame__view::-webkit-scrollbar { width: 8px; }
.frame--scroll .frame__view::-webkit-scrollbar-thumb {
  background: var(--rule-strong); border-radius: 999px;
}

/* Phone frame for mobile captures */
.frame--phone {
  max-width: 320px;
  border-radius: 22px;
  border-width: 6px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9);
}
.frame--phone .frame__bar { display: none; }
.frame--phone .frame__view { max-height: 78vh; overflow-y: auto; overscroll-behavior: contain; }

/* Whisper-light treatment so colourful client shots sit calmly in the
   dark world until focused. Originals stay untreated on disk. */
.frame__view img { filter: brightness(0.95) saturate(0.98); transition: filter 500ms var(--ease-out); }
.frame:hover .frame__view img,
a:hover .frame__view img { filter: none; }

/* Mobile: nested scroll inside a screenshot frame is a touch trap — you
   try to scroll the page and drag the image instead. On phones, drop the
   scroll entirely: cap the frame, fade the bottom, and the "Open the live
   site" button is the path to see the rest. */
@media (max-width: 760px) {
  .frame--scroll .frame__view,
  .frame--phone .frame__view {
    max-height: 58vh;
    overflow: hidden;
  }
  .frame--scroll, .frame--phone { position: relative; }
  .frame--scroll::after, .frame--phone::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 84px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.9));
    pointer-events: none;
  }
}

/* ---------- Work index — portfolio grid ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4.5vw, 56px);
}
@media (max-width: 760px) { .work-grid { grid-template-columns: minmax(0, 1fr); } }
/* A lone final card (odd count, e.g. the 3rd of 3) centres under the row
   at single-column width, instead of stranding in the left column. */
@media (min-width: 761px) {
  .work-grid > .work-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - clamp(14px, 2.25vw, 28px));
    margin-inline: auto;
  }
}

/* ---------- Partners (Studio page) ---------- */
.partners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  border-top: 1px solid var(--rule-strong);
  padding-top: clamp(28px, 4vw, 48px);
}
@media (max-width: 720px) { .partners { grid-template-columns: 1fr; gap: 40px; } }
.partner__role {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 16px;
}
.partner__role::before { content: ''; width: 24px; height: 1px; background: var(--paper); }
.partner__name {
  font-family: var(--font-display);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 0 16px;
}
.partner__name em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--paper-soft);
}
.partner__bio {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: var(--paper-soft);
  font-weight: 300;
  max-width: 42ch;
  margin: 0;
}

.work-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none;
  color: var(--paper);
}
.work-card__frame {
  transition: transform 520ms var(--ease-out), box-shadow 520ms var(--ease-out);
}
.work-card:hover .work-card__frame,
.work-card:focus-visible .work-card__frame {
  transform: translateY(-6px);
  box-shadow: 0 44px 90px -30px rgba(0, 0, 0, 0.92);
}
.work-card__meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 18px;
  align-items: baseline;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.work-card__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--paper);
  transition: color 240ms var(--ease-out);
}
.work-card__name em {
  font-style: italic;
  font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
}
.work-card:hover .work-card__name { color: var(--paper-soft); }
.work-card__niche {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.work-card__tier {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--paper);
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.work-card__tier small {
  display: block;
  margin-top: 4px;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

/* ---------- Case study ---------- */
.case-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 4vw, 48px);
  align-items: end;
  padding-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: clamp(36px, 5vw, 64px);
}
.case-head__kicker {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 22px;
}
.case-head__kicker::before { content: ''; width: 24px; height: 1px; background: var(--paper); }
.case-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--paper);
  text-wrap: balance;
}
.case-head__title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--paper-soft);
}
.case-head__sum {
  margin: 22px 0 0;
  max-width: 52ch;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--paper-soft);
  font-weight: 300;
}
.case-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  border: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  text-align: right;
  white-space: nowrap;
}
.case-badge span { font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-faint); }
.case-badge b { font-size: 15px; letter-spacing: 0.02em; color: var(--paper); font-weight: 500; }

/* Spec/demo honesty banner */
.case-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 20px;
  margin-bottom: clamp(36px, 5vw, 56px);
  border: 1px solid var(--rule);
  background: var(--ink-elev);
  font-size: 14px;
  line-height: 1.55;
  color: var(--paper-soft);
  font-weight: 300;
}
.case-note b { color: var(--paper); font-weight: 500; }
.case-note::before {
  content: '\2726';
  font-size: 12px;
  color: var(--paper-dim);
  flex-shrink: 0;
  padding-top: 2px;
}

/* Screenshot spread — desktop + mobile side by side on wide screens */
.case-shots {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 44px);
  margin-bottom: clamp(48px, 7vw, 96px);
}
.case-shots__mobile { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.case-shots__cap {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
@media (min-width: 900px) {
  .case-shots { grid-template-columns: 1fr 340px; align-items: start; }
}

/* Narrative — Brief / Challenge / Approach / Result */
.case-story { display: flex; flex-direction: column; }
.case-story__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(28px, 4vw, 44px) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.case-story__row:first-child { border-top: 1px solid var(--rule); }
.case-story__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-dim);
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.case-story__label b { color: var(--paper); font-weight: 500; }
.case-story__body {
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.62;
  color: var(--paper-soft);
  font-weight: 300;
  max-width: 60ch;
}
.case-story__body p { margin: 0 0 14px; }
.case-story__body p:last-child { margin-bottom: 0; }
.case-story__body strong { color: var(--paper); font-weight: 500; }
.case-story__body ul { margin: 6px 0 0; padding: 0; list-style: none; }
.case-story__body li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.5;
}
.case-story__body li::before {
  content: '+';
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono);
  color: var(--paper-dim);
}
/* Honest sourcing flag */
.needs {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-base);
  background: var(--paper-dim);
  padding: 1px 7px 2px;
  border-radius: 3px;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .case-story__row { grid-template-columns: 1fr; gap: 12px; }
}

/* Live link block */
.case-live {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: clamp(48px, 7vw, 88px) 0 0;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--rule-strong);
  background: var(--ink-deep);
}
.case-live__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-faint); margin: 0 0 8px; }
.case-live__url { font-family: var(--font-display); font-size: clamp(22px, 3vw, 34px); font-weight: 350; font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0; letter-spacing: -0.01em; color: var(--paper); }

/* Prev / next */
.case-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
  margin-top: clamp(48px, 7vw, 88px);
}
.case-pager a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(24px, 3vw, 36px) 0;
  text-decoration: none;
  transition: color 220ms var(--ease-out);
}
.case-pager a:last-child { text-align: right; align-items: flex-end; border-left: 1px solid var(--rule); padding-left: 24px; }
.case-pager a:first-child { padding-right: 24px; }
.case-pager span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-faint); }
.case-pager b {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -0.015em;
  color: var(--paper-dim);
  transition: color 220ms var(--ease-out);
}
.case-pager a:hover b { color: var(--paper); }
@media (max-width: 600px) {
  .case-pager { grid-template-columns: 1fr; }
  .case-pager a:last-child { border-left: 0; border-top: 1px solid var(--rule); text-align: left; align-items: flex-start; padding-left: 0; }
}

/* ============================================================
   MOBILE FIT PASS — added 2026-06-08
   Kills horizontal scroll on phones across every page. Desktop is
   untouched: every rule below sits inside a mobile media query,
   except the overflow firewall (a visual no-op on desktop, where
   nothing overflows in the first place).

   Root cause: several grids paired a fixed-px or nowrap column with
   a 1fr text column that had no min-width:0, so a long word/email/
   badge forced the row wider than the viewport; and the large
   decorative type (sprint watermark, signature) bled past the edge
   relying on `body { overflow-x: clip }`, which iOS Safari does not
   honour on its own — it scrolls the html/viewport instead.
   ============================================================ */

/* --- Overflow firewall ---------------------------------------------
   body already clips horizontally; iOS Safari often scrolls the html
   element instead, so clip there too. `clip` (not `hidden`) creates no
   scroll container, so position:sticky and the fixed masthead keep
   working. This contains decorative spill (watermarks, signature) that
   is meant to bleed but should never produce a scrollbar. */
html { overflow-x: clip; }

/* Media/embeds can never exceed their column. (img already capped; this
   covers the wrappers and is harmless on desktop.) */
img, svg, video, picture, canvas, iframe { max-width: 100%; }

/* --- Case-study header: stack title + tier badge ------------------
   The badge is `white-space: nowrap` (~196px) and the header was
   `1fr auto` at every width, so on phones the title column couldn't
   shrink enough and the badge pushed past the edge (overflowed by
   360px, dead-on the edge at 390 — i.e. the iPhone 14 report). Stack
   them and let the badge read as a left-aligned line below the title. */
@media (max-width: 760px) {
  .case-head {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
  }
  .case-head__title { min-width: 0; }
  .case-badge {
    align-self: start;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    text-align: left;
    white-space: normal;
  }
  .case-badge span::after { content: ' '; }
}

/* --- Phone-width fit fixes (≤600px) ------------------------------- */
@media (max-width: 600px) {
  /* Let text columns actually shrink instead of forcing the row wider
     than the screen (grid/flex children default to min-width:auto). */
  .work-card__name,
  .case-head__title,
  .tariff__name,
  .partner__name,
  .case-live__url { min-width: 0; overflow-wrap: anywhere; }

  /* Work index cards: the name column must be allowed to shrink. */
  .work-card__meta { grid-template-columns: minmax(0, 1fr) auto; }

  /* Contact rows: a 90px label + the (unbreakable) email in a 1fr
     column overflowed at ≤360px. Trim the label rail and let the value
     wrap as a last resort. */
  .contact__details a {
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 4px 10px;
  }
  .contact__details a span:nth-child(2) {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Sprint watermark (services "01–04"): 60vw is ~234px at 390px and
     bleeds past the right edge on iOS before the firewall catches it.
     Cap it so the numeral stays inside the page on its own. */
  .sprint__watermark { font-size: clamp(120px, 40vw, 180px) !important; }
}