/* ============================================================
   Emergent — site stylesheet (homepage + form)
   Hand-coded rebuild v2 · June 2026
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "PP Eiko";
  src: url("fonts/PPEiko-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Eiko";
  src: url("fonts/PPEiko-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Eiko";
  src: url("fonts/PPEiko-LightItalic.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "PP Eiko";
  src: url("fonts/PPEiko-RegularItalic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg-dark: #181314;
  --bg-dark-2: #161112;
  --paper: #F1ECE8;
  --cream: #F2EAE2;
  --ink: #211D1E;
  --body-paper: #474142;
  --muted-paper: #6E6867;
  --peach-italic: #D2A992;
  --peach-sub: #DEC4B3;
  --quote-bar: #D8B7A5;
  --rose-diamond: #AC4458;
  --burgundy: #5C2B37;
  --burgundy-text: #5F2D3A;
  --mauve-btn: #9A6770;
  --plate: #5B2A36;
  --plate-label: #D0A4AC;
  --foot-dark: #9E8D91;
  --foot-paper: #8E8786;
  --rule-paper: #DDD6CF;
  --rule-dark: rgba(255,255,255,0.16);
  /* slides are inverted: dark plates, cream ink */
  --slide-paper: #1B1617;
  --slide-ink: #EFE7DF;
  --slide-rule: rgba(255,255,255,0.15);
  --slide-meta: #9C8F92;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "PP Eiko", Georgia, serif;
  --pad-x: clamp(24px, 4.6vw, 62px);
  --sec-y: clamp(76px, 12vh, 130px);
}

/* ---------- Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { font-family: var(--sans); background: var(--bg-dark); }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
section { position: relative; }

/* Left-anchored page column: all text starts at one line (~8.5% in), never centered */
.wrap {
  max-width: 1560px;
  margin-left: clamp(24px, 8.5vw, 210px);
  margin-right: auto;
  padding-right: clamp(24px, 3vw, 52px);
}

h1, h2, .serif { font-family: var(--serif); font-weight: 300; letter-spacing: -0.02em; }

/* ---------- Shared atoms ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 11px;
  font-weight: 700; font-size: clamp(13px, 1.15vw, 17px);
}
.dia { width: 0.78em; height: 0.78em; transform: rotate(45deg); flex: 0 0 auto; background: var(--burgundy-text); }
.eyebrow--paper { color: var(--burgundy-text); }

.btn {
  display: inline-block;
  font-weight: 700; font-size: clamp(15px, 1.22vw, 18px);
  color: #FFFFFF; padding: 0.78em 2.25em;
  border-radius: 2px; transition: opacity .18s ease-out;
  cursor: pointer;
}
.btn:hover { opacity: .86; }
.btn:focus-visible { outline: 2px solid var(--peach-sub); outline-offset: 3px; }
.btn--mauve { background: var(--mauve-btn); }
.btn--burgundy { background: var(--burgundy); }

.foot { font-size: clamp(13px, 1.3vw, 18px); line-height: 1.32; }
.foot--dark { color: var(--foot-dark); }
.foot--paper { color: var(--foot-paper); }

.logo { width: clamp(108px, 9.4vw, 138px); }
.logo svg { display: block; width: 100%; height: auto; }

/* ================= HERO ================= */
.hero {
  min-height: 100svh;
  background: var(--bg-dark);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.hero-billboard {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 52%; height: 100%;
  object-fit: cover; object-position: center top;
  opacity: .92; pointer-events: none;
}
.hero-fade {
  position: absolute; top: 0; right: 0; bottom: 0; width: 60%;
  background: linear-gradient(90deg, var(--bg-dark) 0%, rgba(24,19,20,.55) 28%, rgba(24,19,20,0) 62%),
              linear-gradient(0deg, rgba(24,19,20,.85) 0%, rgba(24,19,20,0) 30%);
  pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  padding-block: clamp(40px, 5.6vh, 68px) clamp(64px, 10vh, 110px);
}

/* QA P2 — the qualifier now carries real weight */
.qualifier {
  margin-top: 2.4vh;
  display: flex; align-items: center; gap: 14px;
  font-weight: 700; font-size: clamp(16px, 1.62vw, 24px);
  color: #FFFFFF;
}
.qualifier .dia { background: var(--rose-diamond); }
.qualifier strong { color: var(--peach-sub); font-weight: 700; }

.hero h1 {
  margin-top: 1.8vh;
  font-size: clamp(44px, 5.45vw, 88px);
  line-height: 1.115; color: var(--cream);
}
.hero h1 em { font-style: italic; color: var(--peach-italic); }

.hero-sub {
  margin-top: 4.6vh; font-weight: 700;
  font-size: clamp(18px, 2.02vw, 30px);
  line-height: 1.3;
  color: var(--peach-sub);
}
.hero-quote {
  margin-top: 3.4vh;
  border-left: 4px solid var(--quote-bar); padding-left: 22px;
  font-weight: 700; font-size: clamp(16px, 1.75vw, 26px);
  line-height: 1.5; color: #FFFFFF;
}
.hero .btn { margin-top: 3.6vh; }
.hero .foot { margin-top: 2.4vh; }

/* ================= SECTION SHELL (one rhythm everywhere) ================= */
.sec { padding-block: var(--sec-y); }
.sec--snug { padding-block: clamp(48px, 7vh, 88px) clamp(24px, 3.2vh, 42px); }
.sec--tightbottom { padding-bottom: clamp(28px, 4vh, 52px); }
/* dark FAQ flowing into dark closing reads as one void; keep the seam tight */
.sec--dark + section.closing { padding-top: clamp(32px, 4.5vh, 56px); }
.sec--paper { background: var(--paper); }
.sec--dark { background: var(--bg-dark-2); }
.sec + .sec--paper { border-top: 1px solid var(--rule-paper); }

.sec-h2 { font-size: clamp(38px, 4.45vw, 70px); line-height: 1.12; }
.sec--paper .sec-h2 { color: var(--ink); margin-top: 3vh; }
.sec--dark .sec-h2 { color: #EFE7DF; }

/* ================= BIO ================= */
.bio-split {
  margin-top: 1.6vh;
  display: grid; grid-template-columns: minmax(0, 56ch) 1fr;
  gap: 2.2vw; align-items: start;
}
/* v2.1: bio runs solo (video slot removed until the founder video exists) */
.bio-solo { margin-top: 1.2vh; }
.bio-copy p {
  font-size: clamp(14px, 1.18vw, 17.5px);
  line-height: 1.5; color: var(--body-paper);
  max-width: 56ch;
}
.bio-copy p + p { margin-top: 1em; }
.bio-copy strong { color: var(--ink); }
.sec--snug .sec-h2 { margin-top: 1.2vh; font-size: clamp(35px, 3.85vw, 58px); }

/* credentials card — the no-client proof block (QA P1) */
.creds {
  margin-top: 3.6vh;
  border: 1px solid var(--rule-paper);
  border-left: 3px solid var(--burgundy);
  background: #F6F2EE;
}
.cred-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 14px 22px;
  font-size: clamp(13px, 1.18vw, 17px);
}
.cred-row + .cred-row { border-top: 1px solid var(--rule-paper); }
.cred-row .k { color: var(--muted-paper); }
.cred-row .v { color: var(--ink); font-weight: 700; text-align: right; }

.video-card {
  width: 100%; max-width: 580px; aspect-ratio: 16 / 9;
  background: #1E191A;
  border: 1px solid #2C2627;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(18px, 2.4vw, 34px);
}
.video-card .vc-play {
  position: absolute; top: clamp(16px, 2vw, 28px); left: clamp(16px, 2vw, 28px);
  width: clamp(44px, 4.6vw, 64px); height: clamp(44px, 4.6vw, 64px);
  border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center;
}
.video-card .vc-play::after {
  content: ""; display: block;
  border-style: solid; border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent rgba(255,255,255,.85);
  margin-left: 4px;
}
.video-card .vc-slot {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: #8E8083; font-weight: 700;
}
.video-card .vc-title { font-family: var(--serif); font-weight: 300; color: var(--cream); font-size: clamp(22px, 2.3vw, 34px); line-height: 1.15; margin-top: 8px; }
.video-card .vc-meta { color: #9E8D91; font-size: clamp(12px, 1.05vw, 15px); margin-top: 10px; }

.bio-after {
  margin-top: 2.2vh;
  font-size: clamp(18px, 1.85vw, 29px);
  color: var(--ink); font-weight: 400;
}
.bio-after strong { font-weight: 700; }

/* ================= EXHIBITS ================= */
.exhibits-note {
  margin-top: 2.6vh;
  color: var(--muted-paper);
  font-size: clamp(13px, 1.18vw, 17px); line-height: 1.55;
}
.exhibit {
  margin-top: 6.4vh; padding-top: 5.4vh;
  border-top: 1px solid var(--rule-paper);
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 2.4vw; align-items: start;
}
.exhibit:first-of-type { border-top: 0; padding-top: 0; }
.ex-label {
  font-weight: 700; color: var(--burgundy-text);
  font-size: clamp(15px, 1.4vw, 21px);
}
.ex-label span { color: var(--ink); }
/* hierarchy: serif finding leads; statement and caption support it */
.ex-finding {
  font-family: var(--serif); font-weight: 300; letter-spacing: -0.015em;
  margin-top: 2.4vh;
  font-size: clamp(26px, 2.7vw, 42px); line-height: 1.16;
  color: var(--ink);
}
.ex-statement {
  margin-top: 2.6vh;
  font-size: clamp(14px, 1.28vw, 18px); line-height: 1.55;
  color: #5C5556; font-weight: 400; max-width: 46ch;
}
.ex-caption {
  margin-top: 1.4vh; color: var(--foot-paper);
  font-size: clamp(12.5px, 1.12vw, 16px); line-height: 1.5; max-width: 52ch;
}
.ex-img {
  border: 1px solid var(--rule-paper); background: #FBF8F5;
  cursor: zoom-in;
}
.ex-img img { width: 100%; height: auto; color: transparent; display: block; }
.ex-hint {
  margin-top: 9px; color: var(--burgundy-text);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
  font-size: clamp(11.5px, 0.95vw, 14px); letter-spacing: .04em;
}

/* click-to-enlarge overlay */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(18,14,15,.93);
  display: none; align-items: center; justify-content: center;
  padding: 3vmin; cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 94vw; max-height: 92vh; width: auto; height: auto;
  box-shadow: 0 10px 48px rgba(0,0,0,.55);
}
.lightbox-close {
  position: absolute; top: 16px; right: 24px;
  background: none; border: 0; cursor: pointer;
  color: #E8D5C9; font-size: 38px; line-height: 1;
}

/* ================= CTA BREAK ================= */
.cta-break { text-align: center; }
.cta-break .sec-h2 { margin-inline: auto; max-width: 22ch; }
.cta-break .btn { margin-top: 4.6vh; }
.cta-break .foot { margin-top: 2.2vh; }

/* ================= DELIVERABLES ================= */
.deliv {
  margin-top: 6.8vh; padding-top: 6vh;
  border-top: 1px solid var(--rule-paper);
  display: grid; grid-template-columns: 0.95fr 1.35fr;
  gap: 4vw; align-items: start;
}
.deliv:first-of-type { border-top: 0; padding-top: 0; margin-top: 5.6vh; }
.deliv-title {
  font-family: var(--serif); font-weight: 300; letter-spacing: -0.015em;
  font-size: clamp(26px, 2.75vw, 44px); line-height: 1.16;
  color: var(--ink);
}
.deliv-tag {
  margin-top: 1.8vh; font-weight: 700;
  color: var(--burgundy-text);
  font-size: clamp(14px, 1.3vw, 20px);
}
.deliv-body {
  margin-top: 2.6vh;
  font-size: clamp(15px, 1.34vw, 20px); line-height: 1.55;
  color: var(--body-paper); max-width: 46ch;
}
.deliv-body + .deliv-body { margin-top: 1.2em; }
.deliv-cta { margin-top: 3.6vh; }
.deliv-cta .foot { margin-top: 2vh; font-size: clamp(12px, 1.1vw, 15.5px); }

/* ================= DECK (steppable slide previews — QA P2) ================= */
.deck { width: 100%; }
.deck-stage {
  container-type: inline-size;
  position: relative; aspect-ratio: 16 / 10.3;
  background: var(--slide-paper);
  border: 1px solid #2E2829;
  overflow: hidden; /* nothing ever escapes a slide */
}
.slide {
  position: absolute; inset: 0;
  padding: 4.6cqi 5.2cqi;
  display: none; flex-direction: column;
  color: var(--slide-ink);
}
.slide.is-active { display: flex; }
.s-head {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 1.75cqi; letter-spacing: .16em; text-transform: uppercase;
  color: var(--slide-meta); font-weight: 600;
}
.s-title {
  font-family: var(--serif); font-weight: 300; letter-spacing: -0.015em;
  font-size: 5.4cqi; line-height: 1.1;
  margin-top: 2.4cqi;
}
.s-title::after {
  content: ""; display: block;
  width: 5.4cqi; height: 1px; background: var(--slide-ink);
  margin-top: 2cqi;
}
.s-body { margin-top: 3.2cqi; }
.s-foot {
  margin-top: auto; padding-top: 1.8cqi;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  font-size: 1.85cqi; line-height: 1.35; color: var(--slide-meta);
}
.s-foot span:first-child { max-width: 76cqi; }
.s-foot .sig { font-family: var(--serif); font-weight: 300; font-size: 2.3cqi; color: #B9ACA0; letter-spacing: 0; }

/* slide: ledger table */
.s-table { width: 100%; border-collapse: collapse; }
.s-table th {
  text-align: left; font-size: 1.7cqi; letter-spacing: .12em; text-transform: uppercase;
  color: var(--slide-meta); font-weight: 600;
  border-bottom: 1px solid var(--slide-ink);
  padding: 0 1.2cqi 1.2cqi 0;
}
.s-table td {
  font-size: 2.15cqi; line-height: 1.35;
  border-bottom: 1px solid var(--slide-rule);
  padding: 1.45cqi 1.2cqi 1.45cqi 0;
  vertical-align: top;
}
.s-table .num { font-weight: 700; white-space: nowrap; }
.s-table .src { color: var(--slide-meta); font-size: 1.95cqi; }
.s-table .flag { color: #D8A6B0; font-weight: 700; }

/* slide: quadrant grid */
.s-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6cqi; }
.s-quad > div { border-top: 1px solid var(--slide-ink); padding: 1.6cqi 0 2cqi; }
.s-quad h4 { font-size: 2.05cqi; font-weight: 700; }
.s-quad p { font-size: 1.82cqi; line-height: 1.42; color: #C8BEB8; margin-top: .9cqi; }

/* slide: numbered decisions */
.s-dec { border-top: 1px solid var(--slide-ink); }
.s-dec-row {
  display: grid; grid-template-columns: 3.4cqi 1fr auto;
  gap: 0 2.4cqi; padding: 2cqi 0 1.9cqi;
  border-bottom: 1px solid var(--slide-rule);
}
.s-dec-row .n { font-family: var(--serif); font-weight: 300; font-size: 2.8cqi; color: var(--peach-sub); }
.s-dec-row h4 { font-size: 2.1cqi; font-weight: 700; line-height: 1.3; }
.s-dec-row p { grid-column: 2; font-size: 1.85cqi; color: var(--slide-meta); margin-top: .7cqi; }
.s-dec-row .amt { font-size: 2.6cqi; font-weight: 700; white-space: nowrap; }
.s-dec-row .amt small { font-size: 1.7cqi; font-weight: 400; color: var(--slide-meta); }
.s-note { margin-top: 2.6cqi; font-size: 1.95cqi; line-height: 1.5; color: #C8BEB8; border-top: 1px solid var(--slide-ink); padding-top: 1.8cqi; }
.s-note strong { color: var(--slide-ink); }

/* slide: trace chain */
.s-trace { margin-top: 1cqi; }
.s-trace .big { font-size: 6.4cqi; font-weight: 700; letter-spacing: -0.01em; }
.s-trace .big small { font-size: 2.2cqi; font-weight: 400; color: var(--slide-meta); margin-left: 1cqi; }
.s-chain { margin-top: 2.6cqi; border-top: 1px solid var(--slide-ink); }
.s-chain-row {
  display: flex; justify-content: space-between; gap: 3cqi;
  padding: 1.7cqi 0; border-bottom: 1px solid var(--slide-rule);
  font-size: 2.05cqi;
}
.s-chain-row .num { font-weight: 700; white-space: nowrap; }

/* image-slide decks (real workbook mocks) */
.deck--img .deck-stage { aspect-ratio: 2100 / 1340; }
.slide--img { padding: 0; }
.slide--img img { width: 100%; height: 100%; object-fit: cover; display: block; color: transparent; }

/* every deck is enlargeable: stage click or the hint button below it */
.deck-stage { cursor: zoom-in; }
.deck-enlarge {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans);
  color: var(--burgundy-text);
  text-decoration: underline; text-underline-offset: 2px;
  font-size: clamp(11.5px, 0.95vw, 14px); letter-spacing: .04em;
}
.deck-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(18,14,15,.93);
  display: none; align-items: center; justify-content: center;
  padding: 3vmin;
}
.deck-overlay.is-open { display: flex; }
.deck-overlay-inner { width: min(94vw, 1500px); }
.deck--overlay { max-width: none !important; width: 100%; margin: 0 !important; }
.deck--overlay .deck-stage { cursor: default; }
.deck--overlay .deck-btn { border-color: #8A8385; color: #EDE5E2; }
.deck--overlay .deck-count { color: #C9BFBD; }
.deck--overlay .deck-dot.is-active { background: var(--peach-sub); }

/* deck controls */
.deck-nav { margin-top: 14px; display: flex; align-items: center; gap: 16px; }
.deck-btn {
  width: 38px; height: 38px;
  background: transparent; border: 1px solid #4A4445; border-radius: 2px;
  color: var(--ink); font-size: 19px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: opacity .15s ease-out;
}
.sec--paper .deck-btn { border-color: #B9B2AB; color: var(--ink); }
.deck-btn:hover { opacity: .7; }
.deck-btn:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }
.deck-dots { display: flex; gap: 8px; }
.deck-dot { width: 7px; height: 7px; border-radius: 50%; background: #C5BEB7; }
.deck-dot.is-active { background: var(--burgundy); }
.deck-count { margin-left: auto; font-size: 13px; color: var(--foot-paper); letter-spacing: .08em; }

/* ================= RECORDS REVIEW BAND (see the work first) ================= */
.hero-rr-link {
  display: inline-block; margin-top: 1.8vh;
  font-weight: 700; font-size: clamp(13px, 1.15vw, 17px);
  color: var(--peach-sub);
  transition: opacity .18s ease-out;
}
.hero-rr-link:hover { opacity: .85; }
.rr-band { padding-top: clamp(44px, 6.5vh, 80px); }
.rr-line {
  font-size: clamp(26px, 2.7vw, 42px); line-height: 1.15;
  color: #EFE7DF;
}
.rr-support {
  margin-top: 1.8vh; color: #CBC0BD;
  font-size: clamp(14px, 1.32vw, 20px); line-height: 1.5; max-width: 64ch;
}
.rr-band .btn { margin-top: 2.6vh; }

/* ================= COST ================= */
.cost-split {
  margin-top: 7vh;
  display: grid; grid-template-columns: 1fr 1.18fr;
  gap: 2.4vw; align-items: start;
}
.plate { background: var(--plate); padding: 4.6vh 1.4vw 4vh 2.6vw; }
.plate-row { display: grid; grid-template-columns: clamp(64px, 6.4vw, 98px) 1fr; gap: 1.5vw; }
.plate-row.center { align-items: center; }
.plate-lbl { text-align: right; color: var(--plate-label); font-size: clamp(13px, 1.42vw, 21px); line-height: 1.45; }
.plate-val { color: #FFFFFF; font-weight: 700; font-size: clamp(14px, 1.5vw, 22px); line-height: 1.45; }
.plate hr { border: 0; height: 1px; background: var(--rule-dark); margin: 3.2vh 0; }
.plate hr:last-child { margin-bottom: 0; }

.guarantee { padding-top: .6vh; }
.g-head { color: #FFFFFF; font-weight: 700; font-size: clamp(14px, 1.46vw, 22px); }
.g-lede { margin-top: 2.6vh; color: #F3EDED; font-size: clamp(13.5px, 1.32vw, 20px); line-height: 1.5; }
.g-lede strong { color: #FFFFFF; }
.g-sub { margin-top: 3vh; color: #E8E0E0; font-size: clamp(12px, 1.04vw, 16.5px); }
.guarantee ul { margin-top: 2.6vh; padding-left: 1.4em; color: #E3DBDA; font-size: clamp(12px, 1.04vw, 16.5px); line-height: 1.5; }
.guarantee li + li { margin-top: 1.35em; }
.g-close { margin-top: 3vh; color: #E8E0E0; font-size: clamp(12px, 1.04vw, 16.5px); line-height: 1.5; }
/* QA P1 (secondary) — the "guinea pig" answer */
.g-reframe {
  margin-top: 3.2vh; padding-top: 2.6vh;
  border-top: 1px solid var(--rule-dark);
  color: #F3EDED; font-size: clamp(13.5px, 1.32vw, 20px); line-height: 1.5;
}
.g-reframe strong { color: #FFFFFF; }

.cost-cta { margin-top: 6.8vh; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cost-cta .foot { margin-top: 2.2vh; }

/* ================= FAQ ================= */
.faq-label {
  font-size: clamp(13px, 1.2vw, 18px); letter-spacing: .22em; text-transform: uppercase;
  color: #B9AAAE; font-weight: 600;
}
.faq-list { margin-top: 2.8vh; border-top: 2px solid #EDE5E0; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,.22); }
.faq-item:last-child { border-bottom: 2px solid #EDE5E0; }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(20px, 3.4vh, 34px) 0;
  color: #FFFFFF; font-size: clamp(15px, 1.6vw, 25px); font-weight: 400;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--peach-sub); outline-offset: 4px; }
.fx { position: relative; width: 22px; height: 22px; flex: 0 0 auto; opacity: .75; }
.fx::before, .fx::after {
  content: ""; position: absolute; background: #D8CFCB;
  top: 50%; left: 0; width: 100%; height: 1.5px; margin-top: -0.75px;
  transition: transform .2s ease-out;
}
.fx::after { transform: rotate(90deg); }
.faq-item[open] .fx::before { transform: rotate(45deg); }
.faq-item[open] .fx::after { transform: rotate(135deg); }
.faq-a {
  color: #CBC0BD; font-size: clamp(14px, 1.4vw, 21px); line-height: 1.55;
  padding-bottom: clamp(22px, 3.6vh, 36px); max-width: 75ch;
}

/* ================= CLOSING ================= */
section.closing { padding-block: clamp(52px, 8vh, 104px); }
.closing-grid {
  margin-top: 3.2vh;
  display: grid; grid-template-columns: 1.42fr 1fr;
  gap: 1.5vw; align-items: start;
}
.closing-quote {
  border-left: 3px solid #7A4450; padding-left: clamp(18px, 2vw, 28px);
}
.closing-quote p {
  color: #F1EAEA; font-size: clamp(15px, 1.5vw, 23px); line-height: 1.45;
}
.closing-quote p + p { margin-top: 1.15em; }
.closing .btn { margin-top: 3vh; }
.closing .foot { margin-top: 1.4vh; }
/* Portrait is capped by HEIGHT so the text column, not the photo,
   governs the grid row. Kills the dead gap before the couplet. */
.portrait { justify-self: start; }
.portrait img { width: auto; height: auto; max-height: clamp(322px, 41.5vh, 540px); }
.portrait figcaption { margin-top: 14px; color: #D8CFCB; font-size: clamp(13px, 1.25vw, 18px); }
.portrait figcaption strong { color: #FFFFFF; }
.couplet {
  margin-top: 2.5vh;
  font-family: var(--serif); font-weight: 300; letter-spacing: -0.02em;
  font-size: clamp(26px, 3.15vw, 50px); line-height: 1.16;
  color: var(--cream);
}
.closing .logo { margin-top: 3vh; color: #E9E0D8; }

/* ================= FORM PAGE ================= */
.formpage { min-height: 100svh; background: var(--bg-dark); padding-block: 4vh 10vh; }
.form-grid {
  margin-top: 5.6vh;
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: 4.5vw; align-items: start;
}
.formpage h1 { font-size: clamp(40px, 4.8vw, 76px); line-height: 1.08; color: var(--cream); margin-top: 4.2vh; }
.formpage h1 em { font-style: italic; color: var(--peach-italic); }
.form-points { margin-top: 4.2vh; display: grid; gap: 2.4vh; }
.form-point { display: flex; gap: 14px; align-items: baseline; color: #EDE5E2; font-size: clamp(15px, 1.4vw, 21px); line-height: 1.5; }
.form-point .dia { background: var(--rose-diamond); position: relative; top: -1px; }
.cal-embed {
  height: 700px;
  border: 1px solid #2A2425;
  background: #1B1617;
}

/* ================= MOBILE (one rhythm — QA P2/P3 mobile) ================= */
@media (max-width: 880px) {
  :root { --sec-y: 60px; --pad-x: 24px; }
  br.d { display: none; }

  .btn { font-size: 16px; padding: 14px 36px; }
  .foot { font-size: 14px; }
  .eyebrow { font-size: 13px; }

  /* hero */
  .hero { min-height: 100svh; }
  .hero-billboard { width: 100%; opacity: .45; object-position: right top; }
  .hero-fade { width: 100%; background: linear-gradient(0deg, var(--bg-dark) 8%, rgba(24,19,20,.72) 45%, rgba(24,19,20,.35) 100%); }
  .hero-inner { padding-block: 20px 44px; }
  .logo { width: 128px; }
  .qualifier { margin-top: 22px; font-size: 16px; gap: 11px; }
  .hero h1 { margin-top: 12px; font-size: clamp(38px, 11vw, 52px); text-wrap: balance; }
  .hero-sub { margin-top: 26px; font-size: 19px; line-height: 1.4; }
  .hero-quote { margin-top: 24px; font-size: 16.5px; padding-left: 18px; border-left-width: 3px; }
  .hero .btn { margin-top: 30px; }
  .hero .foot { margin-top: 22px; }

  .sec-h2 { font-size: clamp(30px, 8.6vw, 42px); }
  .sec--paper .sec-h2 { margin-top: 18px; }

  /* bio */
  .bio-split { grid-template-columns: 1fr; gap: 30px; margin-top: 30px; }
  .bio-copy p { font-size: 16px; max-width: none; }
  .cred-row { padding: 12px 16px; font-size: 13.5px; flex-direction: column; gap: 2px; }
  .cred-row .v { text-align: left; }
  .bio-after { margin-top: 34px; font-size: 19px; line-height: 1.45; }

  /* exhibits */
  .exhibit { grid-template-columns: 1fr; gap: 22px; margin-top: 44px; padding-top: 40px; }
  .ex-statement { font-size: 17px; max-width: none; }
  .ex-finding { font-size: 24px; margin-top: 24px; }

  /* deliverables — video/preview sits in the content column (QA P2 mobile) */
  .deliv { grid-template-columns: 1fr; gap: 24px; margin-top: 44px; padding-top: 40px; }
  .deliv-title { font-size: 26px; }
  .deliv-body { font-size: 16px; max-width: none; }
  .deck { width: 100%; }
  .deck-nav { gap: 12px; }
  .deck-btn { width: 44px; height: 44px; }

  /* cost */
  .cost-split { grid-template-columns: 1fr; gap: 26px; margin-top: 32px; }
  .plate { padding: 26px 20px 22px; }
  .plate-row { grid-template-columns: 86px 1fr; gap: 16px; }
  .plate-lbl { font-size: 14.5px; }
  .plate-val { font-size: 16px; }
  .plate hr { margin: 20px 0; }
  .g-head { font-size: 16.5px; }
  .g-lede { margin-top: 16px; font-size: 15.5px; }
  .g-sub, .guarantee ul, .g-close { font-size: 14px; }
  .g-reframe { margin-top: 22px; padding-top: 18px; font-size: 15.5px; }
  .cost-cta { margin-top: 38px; }

  /* faq */
  .faq-item summary { font-size: 15px; padding: 18px 0; }
  .faq-a { font-size: 14.5px; }

  /* closing */
  .closing-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 28px; }
  .portrait { max-width: 320px; }
  .couplet { margin-top: 52px; font-size: clamp(26px, 8vw, 36px); }

  /* form */
  .form-grid { grid-template-columns: 1fr; gap: 32px; }
  .formpage h1 { font-size: clamp(34px, 10vw, 46px); }
  .cal-embed { height: 620px; }
  .portrait { justify-self: start; }
  .portrait img { max-height: 380px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}