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

html { scroll-behavior: smooth; }
html.lenis { height: auto; scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.1px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
section { position: relative; }

::selection { background: var(--sage); color: var(--pine); }

/* ============ shared voices ============ */
.mono-caps,
.kicker {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--moss);
}

[data-theme="dark"] .mono-caps,
[data-theme="dark"] .kicker { color: var(--khaki); }

.mono-link {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.mono-link:hover { color: var(--pine); border-color: var(--pine); }
.mono-link .arrow { transition: transform 0.3s var(--ease-out); }
.mono-link:hover .arrow { transform: translateX(4px); }

.btn-pill {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.1px;
  background: var(--pine);
  color: var(--on-accent);
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-pill);
  padding: 13px 24px;
  display: inline-block;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background 0.35s;
}
.btn-pill:hover {
  background: var(--pine-pressed);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(15, 76, 58, 0.55);
}
.btn-pill:active { transform: scale(0.985); }
.btn-pill.on-pine { background: var(--cream-on-dark); color: var(--pine); }
.btn-pill.on-pine:hover { background: var(--bone); }

/* the seal — real interlocked CT monogram (brand/logo-seal.png) */
.seal {
  width: 36px;
  height: 36px;
  flex: none;
  object-fit: contain;
}
/* on dark surfaces the monogram keeps its cream paper backing */
.seal-badge {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bone);
  display: inline-grid;
  place-items: center;
}
.seal-badge .seal { width: 42px; height: 42px; }

/* ============ nav ============ */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter);
  border: 0.5px solid transparent;
  transition: background 0.4s, box-shadow 0.4s, padding 0.4s, margin 0.4s,
    border-radius 0.4s, border-color 0.4s;
}
/* scrolled state — Vision-Pro liquid glass: clear slab, light bends at the rim */
.site-nav.is-scrolled {
  margin: 12px 16px 0;
  padding: 10px 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: url(#liquid-lens) blur(0.8px) saturate(160%) brightness(1.07) contrast(1.02);
  -webkit-backdrop-filter: blur(1.5px) saturate(160%) brightness(1.07);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 2px 3px -1px rgba(255, 255, 255, 0.9),
    inset 0 -3px 5px -2px rgba(255, 255, 255, 0.55),
    inset 4px 0 5px -3px rgba(255, 255, 255, 0.6),
    inset -4px 0 5px -3px rgba(255, 255, 255, 0.6),
    0 18px 36px rgba(26, 32, 24, 0.16);
  overflow: hidden;
}
/* top rim arc + soft bottom caustic — the thick-glass curvature */
.site-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(120% 180% at 50% -60%, rgba(255, 255, 255, 0.5) 38%, transparent 52%),
    radial-gradient(110% 200% at 50% 170%, rgba(255, 255, 255, 0.28) 36%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s;
}
.site-nav.is-scrolled::before { opacity: 1; }
.site-nav > * { position: relative; z-index: 1; }

.brand { display: inline-flex; align-items: center; gap: 12px; }

.wordmark {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.6px;
}
.wordmark em { font-style: italic; }

.nav-actions { display: flex; align-items: center; gap: 26px; }
.nav-login {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--spruce);
  position: relative;
}
.nav-login::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: var(--spruce);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.nav-login:hover::after { transform: scaleX(1); transform-origin: left; }

/* ============ 1 · hero ============ */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: clip;
}

.hero-vanta {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.8;
}
.hero-texture {
  position: absolute;
  inset: 0;
  background-image: url("../assets/contour-lines.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.hero-inner {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: var(--gutter);
  padding: 110px var(--gutter) 0;
  position: relative;
  max-width: 1480px;
  margin-inline: auto;
  width: 100%;
}

.hero-copy { padding-bottom: clamp(56px, 9vh, 110px); position: relative; z-index: 2; }

.hero-copy .kicker { margin-bottom: 28px; }

.hero-title {
  font-family: var(--serif);
  font-size: clamp(38px, 4.9vw, 72px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin-bottom: 28px;
}
.hero-title em { font-style: italic; font-weight: 400; }
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span { display: inline-block; }

.hero-sub {
  max-width: 46ch;
  color: var(--spruce);
  margin-bottom: 34px;
}

.hero-ctas { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero-micro { margin-top: 16px; opacity: 0.85; }

.hero-phone {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: center;
  width: clamp(250px, 22vw, 330px);
  margin-bottom: clamp(28px, 5vh, 64px);
}

.torn {
  position: absolute;
  border-radius: 6px;
}
.torn-olive {
  inset: 12% -14% 30% auto;
  width: 78%;
  background: var(--olive-paper);
  clip-path: polygon(2% 0%, 97% 1%, 100% 12%, 98% 38%, 100% 64%, 97% 88%, 99% 100%, 3% 99%, 0% 76%, 2% 52%, 0% 24%);
  box-shadow: 0 18px 40px -18px rgba(26, 26, 26, 0.35);
}

.phone {
  position: relative;
  border-radius: 54px;
  background: var(--ink);
  padding: 10px;
  box-shadow:
    0 40px 80px -32px rgba(26, 32, 24, 0.5),
    0 8px 24px -10px rgba(26, 32, 24, 0.3);
}

.phone-screen {
  position: relative;
  border-radius: 44px;
  overflow: hidden;
  aspect-ratio: 924 / 2000;
  background: var(--bone);
}

.phone-app {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.phone-app.is-active { opacity: 1; }

/* splash — recreated from components/splash.tsx / IMG_0804 */
.phone-splash {
  position: absolute;
  inset: 0;
  background: var(--bone);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 4;
}
.splash-stage {
  position: relative;
  width: 56%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-top: -10%;
}
.splash-halo {
  position: absolute;
  inset: -28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 252, 244, 0.9) 0%, rgba(var(--pine-rgb), 0.06) 45%, transparent 68%);
}
.splash-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.splash-seal {
  position: relative;
  width: 52%;
  height: 52%;
  object-fit: contain;
}
.splash-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8a7b63;
}
.dot-n { top: 3.7%; left: 50%; margin: -2px 0 0 -2px; }
.dot-s { top: 96.3%; left: 50%; margin: -2px 0 0 -2px; }
.dot-e { top: 50%; left: 96.3%; margin: -2px 0 0 -2px; }
.dot-w { top: 50%; left: 3.7%; margin: -2px 0 0 -2px; }

.splash-mark {
  font-family: var(--serif);
  font-size: clamp(26px, 9.4cqw, 36px);
  letter-spacing: -1px;
  color: var(--ink);
  margin-top: 7%;
}
.splash-mark em { font-style: italic; }
.splash-eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(var(--pine-rgb), 0.5);
  margin-top: 4.5%;
}
.splash-foot {
  position: absolute;
  bottom: 5.5%;
  left: 0;
  right: 0;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.splash-rule { width: 26px; height: 1px; background: var(--hairline-strong); }
.splash-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: rgba(var(--pine-rgb), 0.6);
}
.phone-splash { container-type: inline-size; }

/* dynamic island — hardware, always on top */
.phone-island {
  position: absolute;
  top: 1.7%;
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: 3.2%;
  background: #000;
  border-radius: 999px;
  z-index: 6;
}

@media (max-width: 900px) {
  .hero-phone { margin-bottom: 0; }
}

.hero-stamp {
  position: absolute;
  left: var(--gutter);
  bottom: 28px;
  z-index: 2;
}

@media (max-width: 900px) {
  .nav-login { display: none; }
  .hero-inner { grid-template-columns: 1fr; align-items: start; }
  .hero-copy { padding-top: 6vh; padding-bottom: 0; }
  .hero-phone { justify-self: center; margin-top: 24px; }
  .hero-stamp { display: none; }
}

/* ============ section scaffolds ============ */
[data-theme="dark"] { background: var(--forest); color: var(--cream-on-dark); }
[data-theme="pine"] { background: var(--pine); color: var(--cream-on-dark); }

.display {
  font-family: var(--serif);
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.018em;
}
.display .line { display: block; overflow: hidden; }
.display .line > span { display: inline-block; }

.body-copy {
  max-width: 42ch;
  color: var(--spruce);
}
[data-theme="dark"] .body-copy,
.body-copy.dim { color: var(--khaki); }

.mono-foot {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--moss);
}
[data-theme="dark"] .mono-foot { color: var(--khaki); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.pill-sage { background: var(--sage); color: var(--pine); }
.pill-sage .dot { background: var(--pine); }

.rule-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--hairline);
  padding: 18px var(--gutter) 0;
  max-width: 1480px;
  margin-inline: auto;
}

/* ============ 2 · evidence (stats + quote) ============ */
.manifesto { padding: clamp(90px, 14vh, 160px) var(--gutter); }

.manifesto-frame {
  border: 1px solid var(--forest-hairline);
  max-width: 1380px;
  margin-inline: auto;
  padding: clamp(64px, 9vh, 110px) var(--gutter);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(44px, 7vh, 72px);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: 980px;
}
.stat {
  padding: 0 28px;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.stat + .stat { border-left: 1px solid var(--forest-hairline); }
.stat-k {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--khaki);
}
.stat-n {
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 54px);
  letter-spacing: -1.2px;
  line-height: 1;
  color: var(--cream-on-dark);
}
.stat-f {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.4px;
  color: var(--khaki);
}

.quote {
  display: grid;
  gap: 32px;
  justify-items: center;
}
.quote p {
  font-family: var(--serif);
  font-size: clamp(21px, 2.5vw, 34px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--cream-on-dark);
  max-width: 30em;
}
.quote .line { display: block; overflow: hidden; }
.quote .line > span { display: inline-block; }
.quote em { font-style: italic; }

.underline-mint {
  position: relative;
  white-space: nowrap;
}
.underline-mint::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: var(--mint);
  transform: scaleX(var(--draw, 1));
  transform-origin: left;
}

.quote-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.45;
  color: var(--khaki);
  max-width: 36em;
  margin-top: -12px;
}

.quote-attr {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--khaki);
}


@media (max-width: 760px) {
  .stat-row { grid-template-columns: 1fr; gap: 32px; }
  .stat + .stat { border-left: 0; }
}

/* ============ 3 · capture ============ */
.capture { padding: clamp(80px, 12vh, 140px) 0 clamp(90px, 13vh, 150px); }

.capture-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gutter);
  align-items: start;
  padding: 56px var(--gutter) 0;
  max-width: 1480px;
  margin-inline: auto;
}

.step-kicker { display: block; margin-bottom: 24px; }
.capture-copy .display { margin-bottom: 28px; }

.collage {
  position: relative;
  min-height: 480px;
  margin-top: 40px;
}

.torn-olive-lg,
.torn-rust-lg { position: absolute; }
.torn-olive-lg {
  background: var(--olive-paper);
  inset: 4% 30% 18% 2%;
  clip-path: polygon(1% 2%, 96% 0%, 100% 18%, 98% 47%, 100% 79%, 97% 100%, 4% 98%, 0% 71%, 2% 38%);
  transform: rotate(-2deg);
}
.torn-rust-lg {
  background: var(--rust-paper);
  inset: 30% 2% 6% 34%;
  clip-path: polygon(3% 0%, 98% 2%, 100% 32%, 97% 66%, 100% 97%, 2% 100%, 0% 64%, 3% 30%);
  transform: rotate(1.5deg);
}

.collage-photo {
  position: absolute;
  filter: drop-shadow(0 16px 28px rgba(26, 26, 26, 0.28));
}
.collage-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fffaf0;
  z-index: -1;
}
.collage-photo,
.collage-photo::before { clip-path: var(--rip); }
.collage-photo img {
  width: 100%;
  height: auto;
  padding: 4.5%;
}
.photo-shelf {
  --rip: polygon(0.8% 3.2%, 7% 0.6%, 18% 2.4%, 31% 0.3%, 46% 2.8%, 61% 0.9%, 74% 2.6%, 88% 0.4%, 99% 2.9%, 98.4% 14%, 99.8% 29%, 97.9% 47%, 99.6% 64%, 98.1% 81%, 99.3% 96%, 88% 98.6%, 73% 99.8%, 58% 97.9%, 43% 99.7%, 27% 98.2%, 12% 99.6%, 1.4% 97.4%, 0.2% 83%, 1.9% 66%, 0.4% 49%, 1.7% 31%, 0.3% 15%);
}
.photo-record {
  --rip: polygon(1.6% 1.2%, 14% 2.8%, 29% 0.5%, 45% 2.6%, 60% 0.8%, 76% 2.4%, 91% 0.6%, 99.2% 3.4%, 97.8% 18%, 99.5% 36%, 98% 55%, 99.7% 74%, 98.2% 92%, 95% 99.2%, 80% 97.6%, 64% 99.4%, 48% 97.8%, 32% 99.5%, 16% 97.9%, 2.2% 99.1%, 0.6% 84%, 2.1% 65%, 0.4% 46%, 1.8% 27%, 0.5% 10%);
}
.photo-kitchen {
  --rip: polygon(0.5% 2.4%, 12% 0.7%, 26% 2.9%, 41% 0.4%, 57% 2.5%, 72% 0.6%, 87% 2.8%, 99.4% 1.1%, 98.1% 16%, 99.8% 34%, 97.7% 52%, 99.4% 70%, 97.9% 87%, 99.1% 98.3%, 84% 97.5%, 69% 99.6%, 53% 97.7%, 37% 99.8%, 21% 98%, 6% 99.5%, 0.9% 95%, 2.2% 78%, 0.3% 60%, 1.9% 42%, 0.6% 24%, 2% 9%);
}
.photo-shelf { left: 8%; top: 10%; width: 48%; transform: rotate(-1.5deg); z-index: 2; }
.photo-record { right: 4%; top: 0; width: 34%; transform: rotate(2deg); z-index: 1; }
.photo-kitchen { right: 12%; bottom: 4%; width: 44%; transform: rotate(-1deg); z-index: 3; }

.photo-chip {
  position: absolute;
  top: 9%;
  left: 7%;
  background: #1b1916;
  color: #fff8e7;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 6px;
}

.collage-pill { position: absolute; top: -16px; right: 18%; z-index: 4; }

.collage-caption {
  position: absolute;
  bottom: -42px;
  left: 12%;
}

@media (max-width: 900px) {
  .capture-inner { grid-template-columns: 1fr; }
  .collage { min-height: 380px; margin-top: 70px; }
}

/* ============ 4 · pipeline ============ */
.pipeline { padding: clamp(90px, 13vh, 150px) 0 0; overflow: clip; }

.pipeline-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--gutter);
  align-items: center;
  padding: 0 var(--gutter);
  max-width: 1480px;
  margin-inline: auto;
}

.pipeline-copy .kicker { margin-bottom: 26px; }
.pipeline-copy .display {
  margin-bottom: 26px;
  font-size: clamp(28px, 3.1vw, 46px);
  white-space: nowrap;
}
@media (max-width: 1000px) {
  .pipeline-copy .display { white-space: normal; }
}

.pipeline-instrument {
  position: relative;
  width: min(520px, 90%);
  aspect-ratio: 1;
  justify-self: center;
}
.dial { position: absolute; inset: 0; width: 100%; height: 100%; }
.dial-object {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 54%;
  object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.55));
}

.annot {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.annot-line { display: block; width: 120px; height: 1px; background: var(--mint); opacity: 0.7; }
.annot-tr { top: 31%; right: -19%; }
.annot-br { bottom: 33%; right: -15%; }

.stage-chain {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  padding: clamp(56px, 8vh, 90px) var(--gutter) clamp(70px, 10vh, 110px);
}

.stage-chip {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--khaki);
  border: 1px solid var(--forest-hairline);
  padding: 12px 22px;
  border-radius: 4px;
  position: relative;
  transition: color 0.45s var(--ease-out), border-color 0.45s var(--ease-out),
    background 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.stage-chip + .stage-chip { margin-left: 34px; }
.stage-chip + .stage-chip::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 50%;
  width: 26px;
  height: 1px;
  background: var(--forest-hairline);
}
.stage-chip + .stage-chip::after {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--khaki);
  border-right: 1px solid var(--khaki);
  transform: translateY(-50%) rotate(45deg);
}

/* a live signal travels the chain (js-driven) — reads as a process, not buttons */
.stage-chip::before,
.stage-chip::after {
  transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.stage-chip.is-done {
  color: var(--mint);
  border-color: color-mix(in srgb, var(--mint) 42%, transparent);
}
.stage-chip.is-active {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--forest);
  animation: chipPulse 1.5s var(--ease-inout) infinite;
}
.stage-chip.is-active::before,
.stage-chip.is-done::before { background: var(--mint); }
.stage-chip.is-active::after,
.stage-chip.is-done::after { border-color: var(--mint); }
@keyframes chipPulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--mint), 0 10px 28px -12px rgba(var(--mint-rgb), 0.5); }
  50%      { box-shadow: 0 0 0 1px var(--mint), 0 16px 40px -10px rgba(var(--mint-rgb), 0.85); }
}

@media (max-width: 1000px) {
  .pipeline-inner { grid-template-columns: 1fr; }
  .annot-tr { right: 0; }
  .annot-br { right: 4%; }
  .stage-chain { gap: 16px; }
  .stage-chip + .stage-chip { margin-left: 0; }
  .stage-chip + .stage-chip::before,
  .stage-chip + .stage-chip::after { display: none; }
}

/* Phones: the side callout lines run off-screen and pull the whole
   instrument visually to the right. Center the dial and present the two
   readouts as balanced labels above and below the camera — no crossing
   lines — so the composition reads centered and clean. */
@media (max-width: 680px) {
  .pipeline-instrument { width: min(440px, 80%); }
  .dial-object { width: 52%; }
  /* Center via left/right + flex (not transform): the reveal animation
     tweens .annot's transform, so transform-based centering would break. */
  .annot {
    left: 0;
    right: 0;
    justify-content: center;
    gap: 0;
  }
  .annot-line { display: none; }
  .annot .mono-foot {
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--mint);
    opacity: 0.92;
  }
  .annot-tr { top: 5%; bottom: auto; }
  .annot-br { bottom: 5%; top: auto; }
}

/* ============ 5 · report ============ */
.report {
  background: var(--parchment);
  border-block: 1px solid var(--hairline);
  padding: clamp(90px, 13vh, 150px) var(--gutter);
}

.report-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: calc(var(--gutter) * 1.4);
  align-items: center;
  max-width: 1420px;
  margin-inline: auto;
}

.report-stack { position: relative; min-height: 540px; }

.torn-olive-rpt,
.torn-rust-rpt { position: absolute; }
.torn-olive-rpt {
  background: var(--olive-paper);
  inset: 2% 58% 30% 0%;
  clip-path: polygon(2% 1%, 97% 0%, 100% 24%, 98% 55%, 100% 84%, 96% 100%, 3% 98%, 0% 66%, 2% 33%);
  transform: rotate(-3deg);
}
.torn-rust-rpt {
  background: var(--rust-paper);
  inset: 38% 64% 2% 2%;
  clip-path: polygon(1% 3%, 98% 0%, 100% 38%, 97% 70%, 99% 100%, 2% 97%, 0% 60%, 3% 28%);
  transform: rotate(2deg);
}

.report-page {
  position: absolute;
  background: var(--bone);
  border: 1px solid var(--hairline);
  box-shadow: 0 24px 48px -24px rgba(26, 32, 24, 0.35);
}

.page-cover {
  left: 6%;
  top: 4%;
  width: 38%;
  aspect-ratio: 3 / 4;
  transform: rotate(-2.5deg);
  padding: 9% 7%;
  display: flex;
  flex-direction: column;
  z-index: 3;
}
.cover-seal { width: 32px; height: 32px; margin-bottom: 14%; }
.cover-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(15px, 1.6vw, 23px);
  line-height: 1.3;
  letter-spacing: -0.3px;
  margin-bottom: auto;
}
.cover-date { padding-top: 12px; border-top: 1px solid var(--hairline); }
.stamp {
  position: absolute;
  right: 6%;
  bottom: 14%;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--terracotta);
  border: 2px solid var(--terracotta);
  border-radius: 4px;
  padding: 8px 14px;
  transform: rotate(-12deg);
  opacity: 0.85;
  mask-image: url("../assets/paper-grain.png");
  mask-size: 280px;
}

.page-table {
  left: 30%;
  top: 0;
  width: 36%;
  aspect-ratio: 3 / 4;
  transform: rotate(1deg);
  padding: 6% 4%;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10.5px;
  font-feature-settings: "tnum" on, "lnum" on;
  color: var(--ink);
}
.table-head,
.table-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 2px;
  border-bottom: 1px solid var(--hairline);
}
.table-head { color: var(--moss); text-transform: uppercase; letter-spacing: 1.2px; }
.table-row span:last-child { font-family: var(--serif); font-size: 12.5px; }
.table-row.is-total { border-bottom: none; padding-top: 12px; color: var(--pine); font-weight: 500; }

.page-appendix {
  right: 0;
  top: 7%;
  width: 34%;
  aspect-ratio: 3 / 4;
  transform: rotate(3deg);
  padding: 5%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.appendix-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  flex: 1;
}
.appendix-grid img { width: 100%; height: 100%; object-fit: cover; }
.page-foot { text-align: right; }

.report-copy { display: grid; justify-items: start; gap: 24px; }
.format-chips { display: flex; gap: 12px; }
.format-chip {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.6px;
  color: var(--moss);
  border: 1px solid var(--hairline);
  background: var(--bone);
  padding: 8px 16px;
  border-radius: 4px;
}

@media (max-width: 1000px) {
  .report-inner { grid-template-columns: 1fr; }
  .report-stack { min-height: 0; aspect-ratio: 4 / 3; }
}

/* Phones: the absolute collage can't hold fixed-height cards without the
   table content overflowing onto the copy below. Re-flow the three pages
   into a compact, centered, lightly-fanned pile that sizes to its content
   and stays short enough to avoid endless scrolling. */
@media (max-width: 680px) {
  .report { padding-block: clamp(56px, 9vh, 88px); }
  .report-inner { gap: 30px; }

  .report-stack {
    aspect-ratio: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: 8px 0;
  }
  /* torn paper accents are tuned to the desktop collage — drop them here */
  .torn-olive-rpt,
  .torn-rust-rpt { display: none; }

  .report-page {
    position: relative;
    inset: auto;
    width: min(76%, 300px);
    aspect-ratio: auto;
    align-self: center;
  }
  .page-cover {
    order: 1;
    z-index: 3;
    padding: 24px 22px;
    transform: rotate(-2.5deg);
  }
  .page-table {
    order: 2;
    z-index: 2;
    margin-top: -38px;
    padding: 18px 18px;
    font-size: 11.5px;
    transform: rotate(2deg);
  }
  .page-table .table-head,
  .page-table .table-row { padding: 5px 2px; }
  .page-table .table-row span:last-child { font-size: 13px; }
  /* keep the sample compact — show a handful of items plus the total */
  .page-table .table-row:nth-child(n + 6):not(.is-total) { display: none; }
  .page-appendix {
    order: 3;
    z-index: 1;
    aspect-ratio: 3 / 2;
    margin-top: -14px;
    padding: 16px;
    transform: rotate(-2deg);
  }
  /* a short three-up photo strip instead of the tall 2-column grid */
  .page-appendix .appendix-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .page-appendix .appendix-grid img:nth-child(n + 4) { display: none; }
  .cover-seal { width: 28px; height: 28px; margin-bottom: 14px; }
  .cover-title { font-size: 19px; }
}

/* ============ 6 · ledger ============ */
.ledger { padding: clamp(40px, 6vh, 70px) var(--gutter); }

.ledger-frame {
  position: relative;
  border: 1px solid var(--hairline);
  max-width: 1420px;
  margin-inline: auto;
  min-height: max(86vh, 700px);
  display: grid;
  place-items: center;
  overflow: clip;
  padding: 56px;
}

.ledger-center {
  text-align: center;
  max-width: 56ch;
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 24px;
}
.body-copy.centered { margin-inline: auto; text-align: center; }

.specimens { list-style: none; position: absolute; inset: 0; z-index: 1; }

.specimen {
  position: absolute;
  background: var(--parchment);
  border: 1px solid var(--hairline);
  padding: 10px 10px 16px;
  text-align: center;
  box-shadow: 0 18px 36px -20px rgba(26, 32, 24, 0.3);
}
.specimen img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 14px; }
.spec-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 6px;
}
.spec-value {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.4px;
  color: var(--ink);
}

.pill-review {
  background: var(--deep-tan);
  color: var(--terracotta);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-top: 10px;
}
.pill-review .dot { background: var(--terracotta); }

.spec-1 { width: clamp(180px, 18vw, 250px); left: 4%; top: 8%; transform: rotate(-2deg); }
.spec-2 { width: clamp(160px, 16vw, 220px); right: 16%; top: 5%; transform: rotate(1.6deg); }
.spec-3 { width: clamp(160px, 16vw, 220px); left: 9%; bottom: 7%; transform: rotate(1.2deg); }
.spec-4 { width: clamp(180px, 18vw, 250px); right: 26%; bottom: -4%; transform: rotate(-1.4deg); }
.spec-5 { width: clamp(150px, 15vw, 200px); right: 2%; bottom: 26%; transform: rotate(2.2deg); }

@media (max-width: 1000px) {
  .ledger-frame { min-height: 0; padding: 80px 24px; }
  .specimens { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; }
  .specimen { position: static; transform: none !important; width: auto; }
}

/* ============ 7 · two chairs ============ */
.twochairs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
}

.chair {
  padding: clamp(70px, 10vh, 120px) clamp(32px, 4.5vw, 80px) clamp(80px, 11vh, 130px);
  display: grid;
  gap: 22px;
  align-content: start;
  justify-items: start;
}

.chair-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 2.8vw, 41px);
  letter-spacing: -0.018em;
  line-height: 1.1;
}

.kicker-mint { color: var(--mint) !important; }
.body-copy.light { color: color-mix(in srgb, var(--cream-on-dark) 78%, var(--mint)); }

.pill-darkpine { background: var(--dark-pine); color: var(--mint); }
.pill-darkpine .dot { background: var(--mint); }

.chair-photo {
  margin-top: 18px;
  border: 1px solid var(--hairline);
  background: var(--parchment);
  padding: 10px;
  width: 100%;
  max-width: 520px;
}
.chair-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.framed-cream { border-color: color-mix(in srgb, var(--cream-on-dark) 35%, transparent); background: transparent; }

.chair-adjuster .mono-link,
.chair-adjuster .btn-pill { margin-top: 4px; }

/* download + request-agent CTAs: matched width across both chairs */
.chair-cta {
  min-width: 16rem;
  text-align: center;
}

.seam-seal {
  position: absolute;
  left: 50%;
  bottom: clamp(36px, 6vh, 70px);
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bone);
  display: grid;
  place-items: center;
  z-index: 2;
}
.seam-seal .seal { width: 42px; height: 42px; }

@media (max-width: 900px) {
  .twochairs { grid-template-columns: 1fr; }
  .seam-seal { display: none; }
}

/* ============ 8 · finale: waitlist + footer ============ */
.finale {
  padding: clamp(20px, 3vh, 32px) clamp(20px, 3vh, 32px) 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.finale-panel {
  background: var(--bone);
  color: var(--ink);
  border-radius: 24px;
  border: 1px solid var(--hairline);
  flex: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 30px;
  padding: clamp(64px, 9vh, 110px) var(--gutter) clamp(40px, 6vh, 64px);
}

.finale-seal { width: 54px; height: 54px; }

.finale-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 78px);
  line-height: 1.06;
  letter-spacing: -0.022em;
}
.finale-title .line { display: block; overflow: hidden; }
.finale-title .line > span { display: inline-block; }

.finale-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--spruce);
  max-width: 52ch;
}

/* waitlist form */
.wait-form {
  width: 100%;
  max-width: 760px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
  text-align: left;
  margin-top: 10px;
}
.field { display: grid; gap: 8px; }
.field-wide { grid-column: 1 / -1; }
.field label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--moss);
}
.field label .opt { text-transform: none; letter-spacing: 0.4px; opacity: 0.7; }
.field input,
.field select {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--hairline-strong);
  border-radius: 0;
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: -0.1px;
  color: var(--ink);
  padding: 8px 2px 10px;
  transition: border-color 0.25s;
}
.field input::placeholder { color: color-mix(in srgb, var(--moss) 60%, transparent); }
.field select:invalid { color: color-mix(in srgb, var(--moss) 60%, transparent); }
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--pine);
}
.field select {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%234E7253" stroke-width="1.5"/></svg>');
  background-repeat: no-repeat;
  background-position: right 4px center;
  cursor: pointer;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.privacy-micro { letter-spacing: 0.4px; opacity: 0.85; }

.form-confirm {
  grid-column: 1 / -1;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--pine);
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
}
.form-error {
  grid-column: 1 / -1;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--brick);
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
}
.form-error a { text-decoration: underline; text-underline-offset: 3px; }

/* footer */
.finale-footer {
  width: 100%;
  max-width: 1100px;
  border-top: 1px solid var(--hairline);
  margin-top: clamp(24px, 5vh, 56px);
  padding-top: 28px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 24px;
  align-items: start;
  text-align: left;
}
.foot-tagline {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.2px;
  color: var(--spruce);
}
.foot-tagline em { font-style: italic; }
.foot-col {
  list-style: none;
  display: grid;
  gap: 10px;
  justify-items: start;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--moss);
}
.foot-col a { transition: color 0.25s; }
.foot-col a:hover { color: var(--pine); }
.foot-copyright { justify-items: end; text-align: right; }

/* brand column — tagline + Suncoast Venture Studio attribution */
.foot-brand { display: grid; align-content: start; gap: clamp(18px, 3vh, 28px); }
.foot-studio { display: grid; justify-items: start; text-align: left; gap: 11px; }
.studio-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: -0.2px;
  color: var(--spruce);
}
.studio-line .studio-name { font-style: normal; color: var(--pine); }
.studio-addr {
  font-style: normal;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1.4px;
  line-height: 1.95;
  color: var(--moss);
}

.marquee {
  overflow: clip;
  padding-block: 18px 14px;
}
.marquee-track {
  display: flex;
  white-space: nowrap;
  width: max-content;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--cream-on-dark);
}

@media (max-width: 900px) {
  .wait-form { grid-template-columns: 1fr; }
  .finale-footer { grid-template-columns: 1fr; }
  .foot-copyright { justify-items: start; text-align: left; }
}

/* ============ grain overlay ============ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  background-image: url("../assets/paper-grain.png");
  background-size: 512px;
  opacity: 0.06;
  mix-blend-mode: multiply;
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}