/* ============================================================
   CustomerConvert.Pro — production stylesheet (mobile-first)
   8-section sunrise journey
   ============================================================ */

/* ---------- design tokens ---------- */
:root {
  /* sky band — 8 stops, midnight → noon */
  --midnight: #08060F;  /* §1  · 0.000 */
  --purple:   #14091C;  /* §2  · 0.143 */
  --wine:     #2A0F1F;  /* (legacy autopsy color, retained) */
  --rust:     #4A1F1A;  /* §4  · 0.429 */
  --amber:    #8B3A1A;  /* §5  · 0.572 */
  --gold:     #C97A2B;  /* §6  · 0.715 */
  --late:     #E8B860;  /* §7  · 0.858 */
  --noon:     #F4E4B8;  /* §8  · 1.000 */

  --ink:      #0a0814;     /* dark text on light skies */
  --bone:     #f5ecd9;     /* light text on dark skies */
  --blood:    #8B1A1A;     /* the brand wound color */
  --gold-fg:  #C9A45A;     /* gold accent text */

  --ease:     cubic-bezier(.22,.61,.36,1);

  --serif:    'Playfair Display', Georgia, serif;
  --sans:     'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  /* type scale (mobile-first) */
  --t-xs:    12px;
  --t-sm:    14px;
  --t-base:  16px;
  --t-md:    18px;
  --t-lg:    22px;
  --t-xl:    28px;
  --t-2xl:   34px;
  --t-3xl:   42px;
  --t-hero:  48px;

  /* spacing */
  --pad-x:   20px;
  --gap-sm:  12px;
  --gap-md:  20px;
  --gap-lg:  32px;
  --gap-xl:  56px;

  /* sky-progress driven by JS (0 → 1) */
  --sky-progress: 0;

  /* topbar height */
  --topbar-h: 48px;
}

@media (min-width: 768px) {
  :root {
    --pad-x: 32px;
    --t-xl:  32px;
    --t-2xl: 44px;
    --t-3xl: 60px;
    --t-hero: 72px;
    --topbar-h: 56px;
  }
}
@media (min-width: 1100px) {
  :root {
    --pad-x: 48px;
    --t-2xl: 56px;
    --t-3xl: 72px;
    --t-hero: 88px;
  }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior-y: contain; }
/* CSS smooth-scroll only when Lenis is NOT active (reduce-motion / no JS) */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--bone);
  background: var(--midnight);
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, p, blockquote, figure { margin: 0; }

/* ---------- sky band ---------- */
.sky {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% calc(var(--sky-progress) * 100%),
      rgba(255, 230, 180, 0.06) 0%,
      rgba(255, 230, 180, 0) 60%);
  mix-blend-mode: screen;
}

body { background: var(--midnight); }

.sec { position: relative; z-index: 1; }
main { position: relative; z-index: 1; }

/* ---------- per-section sky band backgrounds ---------- */
.sec-hero    { background: var(--midnight); }
/* C2 SHIPPED — wine commitment gradient: midnight → wine → blood → rust handoff */
.sec-victims { background: linear-gradient(180deg, #14091C 0%, #2A0A1A 50%, #3A0F1A 80%, var(--rust) 100%); }
.sec-slayer  { background: linear-gradient(180deg, var(--rust) 0%, var(--rust) 45%, var(--amber) 100%); }
.sec-urgency { background: linear-gradient(180deg, var(--amber) 0%, #A85423 55%, var(--gold) 100%); }
/* PATCH GRADIENT-STITCH (2026-05-03): §risk now starts at amber to match §slayer end
   (was gold — created hard band). §final starts at late to match §risk end
   (was noon — created mid-tone jump). §faq remains at noon (§final's end). */
.sec-risk    { background: linear-gradient(180deg, var(--amber) 0%, var(--gold) 45%, var(--late) 100%); }
.sec-final   { background: linear-gradient(180deg, var(--late) 0%, var(--noon) 50%, var(--noon) 100%); }
.sec-faq     { background: linear-gradient(180deg, var(--noon) 0%, var(--noon) 100%); }

/* ============================================================
   STICKY TOP BAR
   ============================================================ */
.topbar {
  position: fixed; left: 0; right: 0;
  z-index: 50;
  height: var(--topbar-h);
  background: rgba(8, 6, 15, 0.78);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: var(--bone);
  /* MOBILE: thumb-zone bottom bar */
  top: auto;
  bottom: 0;
  border-top: 1px solid rgba(245, 236, 217, 0.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: calc(var(--topbar-h) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px -12px rgba(0,0,0,0.6);
}
/* DESKTOP: keep topbar at top as before */
@media (min-width: 1024px) {
  .topbar {
    top: 0;
    bottom: auto;
    border-top: none;
    border-bottom: 1px solid rgba(245, 236, 217, 0.08);
    padding-bottom: 0;
    height: var(--topbar-h);
    box-shadow: none;
  }
}
/* FIX-7: reduce backdrop-filter cost on mobile */
@media (max-width: 768px) {
  .topbar {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}
.topbar__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  max-width: 1280px; margin: 0 auto;
  font-size: var(--t-sm);
}
.topbar__brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--bone);
  white-space: nowrap;
}
.topbar__logo { color: var(--gold-fg); flex-shrink: 0; }
.topbar__dot { color: var(--blood); }
.topbar__ticker {
  display: none;
  font-size: 13px;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.topbar__amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--blood);
  margin: 0 4px;
  letter-spacing: 0.01em;
}
.topbar__cta {
  display: inline-flex; align-items: center;
  padding: 7px 12px;
  background: var(--blood);
  color: var(--bone);
  font-weight: 600;
  font-size: 12px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.topbar__cta:hover { background: #a32424; transform: translateY(-1px); }
@media (min-width: 600px) {
  .topbar__ticker { display: inline-flex; }
  .topbar__inner { gap: 24px; }
  .topbar__cta { font-size: 13px; padding: 8px 14px; }
}
@media (min-width: 1024px) {
  .topbar__brand { font-size: 16px; }
}

/* push content below topbar */
/* Mobile: topbar is bottom-pinned, so reserve bottom space instead of top */
main { padding-bottom: calc(var(--topbar-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) {
  main { padding-top: var(--topbar-h); padding-bottom: 0; }
}

/* ============================================================
   SHARED SECTION SCAFFOLDING
   ============================================================ */
/* PATCH FIX-PAD (2026-05-03): reduced inter-section padding to remove dead space.
   Was 72/96 mobile, 112/128 desktop — created 168-240px combined gaps. */
.sec {
  padding: 56px 0 64px;
  position: relative;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.container--narrow { max-width: 760px; }

.sec__time {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-fg);
  margin-bottom: 18px;
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid rgba(201,164,90,.4);
  border-radius: 999px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sec__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--t-2xl);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  text-wrap: balance;
}
.sec__lead {
  font-size: var(--t-md);
  line-height: 1.55;
  max-width: 640px;
  opacity: 0.88;
  margin-bottom: var(--gap-md);
  text-wrap: pretty;
}
.sec__disclaimer {
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  opacity: 0.55;
  margin-bottom: var(--gap-xl);
  font-style: italic;
}
.sec__close {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-lg);
  margin: var(--gap-xl) 0 var(--gap-md);
  opacity: 0.95;
}
.sec__cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--gap-md);
  padding: 14px 22px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--t-base);
  letter-spacing: 0.01em;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.sec__cta:hover { background: var(--bone); color: var(--ink); transform: translateY(-1px); }
.sec__cta--centered {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: var(--gap-xl) auto 0;
  max-width: 360px;
}
.sec__cta--primary {
  background: var(--blood);
  color: var(--bone);
  border-color: var(--blood);
  padding: 16px 28px;
  font-size: var(--t-md);
  box-shadow: 0 12px 32px -10px rgba(139,26,26,0.6);
}
.sec__cta--primary:hover { background: #a32424; color: var(--bone); border-color: #a32424; }
.sec__cta--ink {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.sec__cta--ink:hover { background: var(--blood); color: var(--bone); border-color: var(--blood); }
.sec__cta--xl {
  padding: 18px 32px;
  font-size: var(--t-lg);
  margin-top: var(--gap-lg);
}

/* ---------- light-section flips ---------- */
.sec--light { color: var(--ink); }
.sec--light .sec__time { color: var(--blood); border-color: rgba(139,26,26,.45); }
.sec--light .sec__lead { opacity: 0.86; }

@media (min-width: 768px) {
  .sec { padding: 80px 0 80px; }
}

/* ============================================================
   §1 HERO — image-first; mobile stack → desktop two-column
   ============================================================ */
.sec-hero {
  padding: 0;
  background: var(--midnight);
}

/* MOBILE-FIRST: single column. Image fixed at 50vh top, copy below. */
/* FIX-6: dvh with vh fallback (iOS Safari respects browser chrome). */
/* §1 v2: rows are content-sized on mobile (no stretch gap); desktop overrides below. */
.hero__grid {
  display: grid;
  grid-template-rows: auto auto;
  width: 100%;
}

.hero__media {
  position: relative;
  margin: 0;
  width: 100%;
  height: 42vh;
  height: 42dvh;
  min-height: 280px;
  max-height: 360px;
  overflow: hidden;
  background: #06040b;
}
.hero__media img,
.hero__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center 8%; /* anchor near top so Cashbleed's crown stays in frame */
  display: block;
}
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8,6,15,0) 0%, rgba(8,6,15,0) 70%, rgba(8,6,15,0.85) 100%);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 20px var(--pad-x) 28px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.hero__h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(22px, 5.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin-bottom: 16px;
  text-wrap: balance;
  color: var(--bone);
}
.hero__h1 .cc {
  font-style: italic;
  color: var(--blood);
  font-weight: 700;
  white-space: nowrap;
}

.hero__sub {
  font-size: var(--t-base);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 0 28px;
  opacity: 0.88;
  text-wrap: pretty;
  color: var(--bone);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--blood);
  color: var(--bone);
  border: 1px solid var(--blood);
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--t-base);
  letter-spacing: 0.01em;
  box-shadow: 0 14px 32px -12px rgba(139,26,26,0.7);
  transition: background .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.hero__cta:hover {
  background: #a32424;
  border-color: #a32424;
  transform: translateY(-1px);
}

@media (min-width: 768px) {
  .hero__sub { font-size: var(--t-md); }
  .hero__copy { padding: 32px var(--pad-x); }
}

/* DESKTOP — two-column 50/50; image left full-height, copy right */
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - var(--topbar-h));
    min-height: calc(100dvh - var(--topbar-h));
    height: calc(100vh - var(--topbar-h));
    height: calc(100dvh - var(--topbar-h));
  }
  .hero__media {
    height: 100%;
    min-height: 0;
    max-height: none;
  }
  .hero__media img,
  .hero__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center 18%;
  }
  .hero__media::after {
    background: linear-gradient(90deg, rgba(8,6,15,0) 60%, rgba(8,6,15,0.55) 100%);
  }
  .hero__copy {
    padding: 24px clamp(32px, 5vw, 72px);
    max-width: none;
    margin: 0;
    min-height: 0;
  }
  .hero__h1 {
    font-size: clamp(40px, 4.4vw, 68px);
    margin-bottom: 22px;
  }
  .hero__sub {
    font-size: var(--t-md);
    margin-bottom: 32px;
  }
}

@media (min-width: 1280px) {
  .hero__h1 { font-size: clamp(48px, 4.6vw, 76px); }
}

/* ============================================================
   §2 — WHERE HE BLEEDS THEM (merged)
   Mobile: snap-scroll horizontal carousel + 7-dot indicator
   Desktop: 3-2-2 staggered grid, no carousel
   ============================================================ */
.sec-victims {
  padding-top: 64px;
  padding-bottom: 64px;
  /* FIX-8: clip rather than hidden — preserves shadows, prevents stacking-context side-effects. */
  overflow: hidden;
  overflow: clip;
}

.victims-wrap {
  position: relative;
  margin: var(--gap-lg) 0 0;
}

/* MOBILE — horizontal snap carousel */
.victims-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch; /* PATCH FIX-B: equal-height cards in carousel */
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px var(--pad-x) 24px;
  scroll-padding-inline: var(--pad-x);
  touch-action: pan-x; /* FIX-7: lock horizontal pan on carousel; lets vertical page scroll pass through */
  overscroll-behavior-x: contain;
}
.victims-track::-webkit-scrollbar { display: none; }

.victim {
  flex: 0 0 calc(100% - (var(--pad-x) * 2));
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  background: rgba(8, 6, 15, 0.55);
  border: 1px solid rgba(245,236,217,0.10);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 48px -20px rgba(0,0,0,0.5);
}

/* Card photo — object-fit: contain (NO cropping in §2 cards) */
.victim__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: rgba(0,0,0,0.45);
  overflow: hidden;
}
.victim__photo picture,
.victim__photo img {
  width: 100%;
  height: 100%;
  display: block;
}
.victim__photo img {
  object-fit: contain;
  object-position: center;
}

/* PATCH FIX-S2-CLIP (2026-05-03): mobile photo box reverted to 4:3 to match locked card renders.
   Locked S2 cards are 4:3 horizontal — forcing 4:5 portrait clipped them. */
@media (max-width: 768px) {
  .victim__photo {
    aspect-ratio: 4 / 3;
    height: auto;
    max-height: none;
    /* keep object-fit: contain (declared above on .victim__photo img) */
  }
}

.victim__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto; /* PATCH FIX-B: body fills remaining card height for equal alignment */
}

/* PATCH FIX-B: diagnosis paragraph absorbs the slack so cards bottom-align */
.victim__wound { flex: 1 1 auto; }

.victim__name {
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: rgba(245,236,217,0.78);
  font-weight: 500;
  display: block;
}
.victim__name .victim__person {
  font-weight: 700;
  color: var(--bone);
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.01em;
}
.victim__name .victim__industry { color: var(--gold-fg); font-weight: 600; }
.victim__name .victim__biz { color: rgba(245,236,217,0.6); font-weight: 400; font-style: italic; }
.victim__name .victim__sep { color: rgba(245,236,217,0.4); margin: 0 4px; }
.victim__name { word-spacing: 1px; }

.victim__bleed {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 2px 0 4px;
  line-height: 1;
}
.victim__amount {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 40px;
  color: var(--blood);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.victim__per {
  font-size: 14px;
  color: rgba(245,236,217,0.65);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.victim__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--late);
  border-left: 3px solid var(--blood);
  padding-left: 14px;
  margin: 4px 0;
  text-wrap: balance;
}

.victim__wound {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.88;
  text-wrap: pretty;
  color: var(--bone);
}

/* Mobile dots indicator */
.victims-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 4px var(--pad-x) 0;
}
.victims-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(245,236,217,0.35);
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.victims-dot.is-active {
  background: var(--gold-fg);
  border-color: var(--gold-fg);
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(201,164,90,0.5);
}

/* DESKTOP — 1 row, all 7 cards static (≥1024px) */
@media (min-width: 1024px) {
  .sec-victims { padding-top: 80px; padding-bottom: 80px; }

  .victims-wrap {
    max-width: 1600px;
    margin: var(--gap-xl) auto 0;
    padding: 0 24px;
  }
  .victims-track {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: stretch;
    gap: 14px;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
    touch-action: auto; /* FIX-7: reset on desktop grid */
  }
  .victim {
    flex: initial;
    scroll-snap-align: none;
    grid-column: auto;
  }

  /* Compact card density for 7-in-a-row */
  .victim__photo { aspect-ratio: 4 / 3; }
  .victim__body { padding: 16px 16px 20px; gap: 10px; }
  .victim__name { font-size: 13px; line-height: 1.35; }
  .victim__name .victim__person { font-size: 15px; }
  .victim__name .victim__sep { margin: 0 2px; }
  .victim__amount { font-size: 26px; }
  .victim__per { font-size: 11px; }
  .victim__quote { font-size: 14px; padding-left: 10px; line-height: 1.4; }
  .victim__wound { font-size: 13px; line-height: 1.55; }

  /* Hide dots on desktop */
  .victims-dots { display: none; }
}

/* Wider desktop tweak — slightly more breathing room */
@media (min-width: 1440px) {
  .victims-wrap { padding: 0 40px; }
  .victims-track { gap: 18px; }
  .victim__body { padding: 20px 20px 24px; }
  .victim__amount { font-size: 30px; }
  .victim__name .victim__person { font-size: 16px; }
  .victim__quote { font-size: 15px; }
  .victim__wound { font-size: 14px; }
}

/* ============================================================
   §4 — MEET THE SLAYER (Iris Direction 1 — Cinematic Reveal)
   pre-dawn rust #4A1F1A · 5:42 AM
   Mobile: stacked. Desktop ≥1024px: two-column 50/50.
   Image is object-fit: contain — letterbox fills with rust.
   ============================================================ */
.sec-slayer {
  padding-top: 0;
  padding-bottom: 64px;
  background: var(--rust);
  background: linear-gradient(180deg, var(--rust) 0%, var(--rust) 50%, var(--amber) 100%);
}

.slayer__grid {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ----- Section label (small caps eyebrow over image) ----- */
.slayer__label {
  text-align: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 236, 217, 0.78);
  padding: 56px var(--pad-x) 24px;
  margin: 0;
}

/* ----- Image — mobile 21/9 cinematic (B2: trim ~50px vs baseline), desktop overrides ----- */
.slayer__hero {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 40vh;
  margin: 0;
  background: var(--rust);
  overflow: hidden;
}
.slayer__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  background: var(--rust);
}

/* ----- Caption + credential pill (left-aligned below image) ----- */
.slayer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 20px var(--pad-x) 0;
}
.slayer__caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--bone);
  margin: 0;
  letter-spacing: -0.005em;
}
.slayer__pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid rgba(201, 164, 90, 0.5);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-fg);
  background: rgba(8, 6, 15, 0.18);
  margin: 0;
  text-transform: none;
}

/* ----- Copy column ----- */
.slayer__copy-col {
  padding: 28px var(--pad-x) 8px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}
.slayer__time { margin-bottom: 14px; }

/* B2: also reduce slayer voice + signoff bottom margins */
.slayer__voice { margin-bottom: 20px !important; }
.slayer__signoff { margin-bottom: 20px !important; }

/* A1 merge: alarm-style time eyebrow on §5 (combined urgency + verdict) */
.sec__time--alarm {
  color: var(--blood, #b91c1c);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.slayer__voice {
  font-size: var(--t-base);
  line-height: 1.65;
  margin: 0 0 var(--gap-lg);
  color: var(--bone);
}
.slayer__voice p {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-md);
  line-height: 1.55;
  margin: 0 0 22px;
  text-wrap: pretty;
  letter-spacing: -0.005em;
}
.slayer__voice p:last-child { margin-bottom: 0; }
.slayer__voice p:first-child::first-letter {
  font-family: var(--serif);
  font-size: 3.2em;
  font-weight: 700;
  float: left;
  line-height: 0.85;
  margin: 6px 12px 0 0;
  color: var(--late);
}

/* ----- Real-photo Tony badge inline above CTA ----- */
.slayer__signoff {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: var(--gap-md) 0 var(--gap-md);
}
.slayer__badge {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--rust);
  border: 1.5px solid rgba(201, 164, 90, 0.55);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.5);
}
.slayer__badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
}
.slayer__badge-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-base);
  color: var(--bone);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ----- CTA — full-width on mobile ----- */
.slayer__cta {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 8px;
  padding: 16px 24px;
  background: var(--blood);
  color: var(--bone);
  border-color: var(--blood);
  font-size: var(--t-md);
  box-shadow: 0 12px 32px -10px rgba(139,26,26,0.6);
}
.slayer__cta:hover { background: #a32424; color: var(--bone); border-color: #a32424; }

/* ----- Tablet upscale ----- */
@media (min-width: 768px) {
  .slayer__voice p { font-size: var(--t-lg); line-height: 1.5; }
  .slayer__copy-col { padding: 48px var(--pad-x) 16px; }
  .slayer__label { font-size: 13px; padding: 72px var(--pad-x) 28px; }
}

/* ----- Desktop ≥1024px: two-column 50/50 ----- */
@media (min-width: 1024px) {
  .sec-slayer { padding-bottom: 0; }

  .slayer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "media copy";
    align-items: stretch;
    min-height: calc(100vh - var(--topbar-h));
    max-width: none;
  }

  .slayer__media-col {
    grid-area: media;
    position: relative;
    background: var(--rust);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 96px 0 48px;
    min-height: 100%;
  }

  /* Section label floats top-left over image column */
  .slayer__label {
    position: absolute;
    top: 36px;
    left: clamp(32px, 4vw, 56px);
    text-align: left;
    padding: 0;
    margin: 0;
    z-index: 2;
  }

  .slayer__hero {
    aspect-ratio: auto;
    flex: 1 1 auto;
    max-height: none;
    height: auto;
    min-height: 60vh;
    margin: 0;
  }
  .slayer__hero img {
    object-fit: contain;
    object-position: center;
  }

  .slayer__meta {
    padding: 24px clamp(32px, 4vw, 56px) 0;
  }

  .slayer__copy-col {
    grid-area: copy;
    background: var(--rust);
    padding: clamp(56px, 6vw, 88px) clamp(40px, 5vw, 72px);
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid rgba(245, 236, 217, 0.06);
  }

  .slayer__voice {
    max-width: 540px;
    margin-bottom: var(--gap-lg);
  }
  .slayer__voice p { font-size: 22px; line-height: 1.55; margin-bottom: 26px; }

  .slayer__cta {
    display: inline-flex;
    width: auto;
    align-self: flex-start;
  }
}

@media (min-width: 1280px) {
  .slayer__voice p { font-size: 24px; }
}

/* ============================================================
   §5 — THE SLAY SESSION (3 time-anchored beats)
   ============================================================ */
.beats {
  display: flex; flex-direction: column;
  gap: var(--gap-lg);
  margin: var(--gap-lg) 0;
  counter-reset: beat;
}
.beats__item {
  position: relative;
  padding: 28px 24px 28px 28px;
  background: rgba(8,6,15,0.32);
  border: 1px solid rgba(245,236,217,0.14);
  border-left: 3px solid var(--late);
  border-radius: 14px;
}
.beats__time {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--late);
  font-weight: 700;
  margin-bottom: 10px;
}
.beats__h {
  font-family: var(--serif);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.beats__body {
  font-size: var(--t-base);
  line-height: 1.6;
  opacity: 0.9;
  text-wrap: pretty;
}
@media (min-width: 768px) {
  .beats__body { font-size: var(--t-md); }
}

/* ============================================================
   §6 — ZERO DOWNSIDE (3 promises)
   ============================================================ */
.promises {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);
  margin: var(--gap-lg) 0;
}
.promises__item {
  padding: 28px 24px;
  background: rgba(8,6,15,0.28);
  border: 1px solid rgba(245,236,217,0.16);
  border-radius: 14px;
}
.promises__label {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--late);
  font-weight: 700;
  margin-bottom: 12px;
}
.promises__h {
  font-family: var(--serif);
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  text-wrap: balance;
}
.promises__body {
  font-size: var(--t-base);
  line-height: 1.6;
  opacity: 0.92;
  text-wrap: pretty;
}
@media (min-width: 800px) {
  .promises { grid-template-columns: repeat(3, 1fr); }
  .promises__item { padding: 32px 28px; }
}

/* ============================================================
   §7 — FAQ (light section)
   ============================================================ */
.sec-faq { color: var(--ink); }
.faq {
  margin: var(--gap-lg) 0;
  border-top: 1px solid rgba(10,8,20,0.22);
}
.faq__row {
  border-bottom: 1px solid rgba(10,8,20,0.22);
}
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  text-align: left;
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: -0.01em;
  color: var(--ink);
  cursor: pointer;
  transition: color .2s var(--ease);
}
.faq-q:hover { color: var(--blood); }
.faq-q[aria-expanded="true"] .faq-q__chev { transform: rotate(45deg); }
.faq-q__chev {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(10,8,20,0.4);
  display: grid; place-items: center;
  font-size: 18px;
  font-weight: 400;
  transition: transform .35s var(--ease);
}
.faq-a {
  padding: 0 4px 22px;
  max-width: 640px;
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.86;
}

@media (min-width: 768px) {
  .faq-q { padding: 24px 6px; font-size: var(--t-lg); }
  .faq-a { padding: 0 6px 28px; font-size: var(--t-md); }
}

/* ============================================================
   §8 — FINAL CTA (image-first bookend, light)
   ============================================================ */
.sec-final { padding-top: 0; padding-bottom: 80px; }
.final__hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  max-height: 76vh;
  overflow: hidden;
  margin-bottom: 56px;
  background: var(--late);
}
.final__hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.final__hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(244,228,184,0) 60%, rgba(244,228,184,0.95) 100%);
  pointer-events: none;
}
.final__h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--t-3xl);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
  color: var(--ink);
  text-wrap: balance;
}
.final__sub {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.86;
  margin-bottom: var(--gap-lg);
  max-width: 640px;
  text-wrap: pretty;
}
.final__voice {
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: var(--gap-lg);
}
.final__voice p {
  margin-bottom: 16px;
  text-wrap: pretty;
}
.final__close {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--ink);
  opacity: 0.92;
  margin-top: 20px;
  text-wrap: balance;
}
@media (min-width: 768px) {
  .final__hero { aspect-ratio: 21 / 9; max-height: 70vh; }
  .final__voice { font-size: var(--t-md); }
}

/* light-section CTA flips */
.sec--light .sec__cta {
  border-color: var(--ink);
  color: var(--ink);
}
.sec--light .sec__cta:hover {
  background: var(--ink);
  color: var(--bone);
}
.sec--light .sec__cta--primary {
  background: var(--ink);
  color: var(--bone);
  border-color: var(--ink);
}
.sec--light .sec__cta--primary:hover {
  background: var(--blood);
  color: var(--bone);
  border-color: var(--blood);
}
.sec--light .sec__close { color: var(--ink); }

/* ============================================================
   FOOTER easter egg
   ============================================================ */
.footer__easter {
  margin-top: 28px;
  text-align: center;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink);
  opacity: 0.45;
  padding: 0 var(--pad-x);
}

/* ============================================================
   GSAP reveal — initial state
   ============================================================ */
.gsap-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
  /* FIX-5: will-change applied dynamically by GSAP, not here. */
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .gsap-ready .reveal { opacity: 1 !important; transform: none !important; }
}

/* utility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   §1 v2 — CASE FILE COVER (additive — keeps hero chassis intact)
   Adds: case-label (above image), stamp-bar (below image), framed-copy (around H1+sub)
   ============================================================ */
.hero__media-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.case-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-fg);
  background: rgba(201, 164, 90, 0.06);
  border-bottom: 1px solid rgba(201, 164, 90, 0.25);
  padding: 12px var(--pad-x);
  margin: 0;
  text-align: center;
}
.stamp-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(201, 164, 90, 0.25);
  border-bottom: 1px solid rgba(201, 164, 90, 0.18);
  background: rgba(8, 6, 15, 0.55);
}
.stamp-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  text-align: center;
  border-right: 1px solid rgba(201, 164, 90, 0.18);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.stamp-cell:last-child { border-right: 0; }
.stamp-cell__k { color: rgba(245, 236, 217, 0.5); font-weight: 600; letter-spacing: 0.22em; font-size: 9px; }
.stamp-cell__v { color: var(--gold-fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.framed-copy {
  border: 1px solid rgba(201, 164, 90, 0.28);
  padding: 16px 18px;
  margin-bottom: 14px;
  background: rgba(8, 6, 15, 0.18);
}
.framed-copy .hero__h1 { margin-bottom: 10px; }
.framed-copy .hero__sub { margin-bottom: 0; }
@media (min-width: 768px) {
  .case-label { font-size: 11px; padding: 14px var(--pad-x); }
  .stamp-cell { padding: 12px 12px; font-size: 11px; }
  .stamp-cell__k { font-size: 10px; }
}
@media (min-width: 1024px) {
  /* Desktop: media-wrap fills the left column; image flexes to fill remaining height */
  .hero__media-wrap {
    height: 100%;
    min-height: 0;
  }
  .hero__media-wrap .hero__media {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
  .framed-copy { padding: 32px; margin-bottom: 28px; }
}

/* ============================================================
   §2 v2 — MUSEUM PLACARD (additive — keeps card chassis intact)
   Adds: matting line on photo + 4 field labels (Exhibit/Daily Loss/Statement/Diagnosis)
   ============================================================ */
.victim__photo {
  border-bottom: 2px solid rgba(201, 164, 90, 0.35); /* matting line — the visual hinge */
}
.placard-label {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-fg);
  opacity: 0.78;
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201, 164, 90, 0.16);
  margin-bottom: 4px;
}
.placard-label--exhibit {
  color: var(--gold-fg);
  opacity: 1;
  font-size: 10px;
  letter-spacing: 0.32em;
}
.victim__body { gap: 10px; }
.victim__body .placard-label + .victim__name,
.victim__body .placard-label + .victim__bleed,
.victim__body .placard-label + .victim__quote,
.victim__body .placard-label + .victim__wound { margin-top: 2px; }
@media (min-width: 768px) {
  .placard-label { font-size: 10px; }
  .placard-label--exhibit { font-size: 11px; }
}

/* ============================================================
   §2 BEIGE PHOTO-BG PREVIEWS — uncomment ONE block to ship
   Goal: turn letterbox bars into a visible matte (museum frame mat)
   so 4:3 photo box stops reading as "cropped". object-fit:contain stays.
   ============================================================ */

/* ---- OPTION B1 — "Bone Mat" (cleanest, most museum) ----
.victim__photo {
  background: var(--bone);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.08),
    inset 0 2px 8px rgba(0,0,0,0.06);
}
*/

/* ---- OPTION B2 — "Aged Parchment" (warmer, more patina) ----
.victim__photo {
  background: #E8DCC0;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.10),
    inset 0 2px 10px rgba(0,0,0,0.08);
}
*/

/* ---- OPTION B3 — "Linen Mat with Bronze Bevel" (most premium) ----
.victim__photo {
  background: #EFE3CC;
  box-shadow:
    inset 0 0 0 4px #E8DCC0,
    inset 0 0 0 5px rgba(143,90,38,0.35),
    inset 0 6px 12px rgba(0,0,0,0.08);
}
*/

/* ============================================================
   §5 — "THE CLOCK IS ALREADY RUNNING" (RE-ADD)
   3 horizontal cards, side-by-side on BOTH desktop AND mobile.
   Blood-red dollar amounts blink with staggered timing.
   ============================================================ */
.sec-urgency {
  /* Background gradient defined above. Section chassis (.sec) supplies vertical padding. */
}
.urgency__head {
  text-align: center;
}
.urgency__head .sec__time { margin-left: auto; margin-right: auto; }
.urgency__head .sec__title { margin-left: auto; margin-right: auto; }
.urgency__head .sec__lead {
  margin-left: auto;
  margin-right: auto;
  max-width: 560px;
}
.urgency__ftc {
  font-size: 12px;
  font-style: italic;
  color: var(--bone);
  opacity: 0.6;
  text-align: center;
  max-width: 42ch;
  margin: 12px auto 0;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .urgency__ftc { font-size: 13px; }
}

.urgency__cards-wrap {
  text-align: center;
  margin-top: var(--gap-lg);
}
.urgency__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--gap-lg);
  width: 100%;
}
@media (min-width: 768px) {
  .urgency__cards { gap: 16px; }
}
@media (min-width: 1024px) {
  .urgency__cards { gap: 24px; max-width: 960px; margin-left: auto; margin-right: auto; margin-bottom: var(--gap-lg); }
}

.urgency__card {
  background: rgba(8, 6, 15, 0.45);
  border: 1px solid rgba(201, 164, 90, 0.25);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 38px -22px rgba(8, 6, 15, 0.7);
  /* aspect-ratio keeps cards consistent on tight mobile widths */
  min-height: 130px;
}
@media (min-width: 768px) {
  .urgency__card {
    padding: 22px 18px;
    border-radius: 16px;
    gap: 10px;
    min-height: 170px;
  }
}
@media (min-width: 1024px) {
  .urgency__card {
    padding: 32px 24px;
    border-radius: 18px;
    gap: 14px;
    min-height: 200px;
  }
}

.urgency__day {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-fg);
  font-weight: 700;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
  .urgency__day { font-size: 11px; }
}
@media (min-width: 1024px) {
  .urgency__day { font-size: 12px; }
}

.urgency__amount {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  color: var(--bone);
  margin: 0;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 480px) {
  .urgency__amount { font-size: 20px; }
}
@media (min-width: 768px) {
  .urgency__amount { font-size: 36px; }
}
@media (min-width: 1024px) {
  .urgency__amount { font-size: 48px; }
}

.urgency__desc {
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1.32;
  color: var(--bone);
  opacity: 0.78;
  margin: 0;
  text-wrap: balance;
}
@media (min-width: 768px) {
  .urgency__desc { font-size: 13px; line-height: 1.45; }
}
@media (min-width: 1024px) {
  .urgency__desc { font-size: 14px; }
}

/* Blood-red blinking dollar amount — high-contrast on rust BG */
.bleed-amount {
  display: inline-block;
  color: #ffe9c8;
  text-shadow:
    0 0 1px rgba(0,0,0,0.55),
    0 2px 8px rgba(255, 64, 64, 0.55),
    0 0 22px rgba(255, 84, 84, 0.45);
  animation: bleed-blink 1.4s ease-in-out infinite;
  animation-delay: var(--blink-delay, 0s);
  will-change: opacity;
}
@keyframes bleed-blink {
  0%   { opacity: 1; }
  50%  { opacity: 0.45; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bleed-amount {
    animation: none;
    opacity: 1;
  }
}

.urgency__close {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--bone);
  opacity: 0.92;
  margin: var(--gap-md) auto var(--gap-md);
  max-width: 560px;
  text-wrap: balance;
}
@media (min-width: 768px) {
  .urgency__close { font-size: var(--t-lg); }
}

.urgency__cta {
  margin-top: 0;
}

/* ============================================================
   PHASE 2 — §6 "MORNING VERDICT"
   Dark-seal envelope (wine-red bordered), gold wax seal,
   outcome triptych inside.
   ============================================================ */
.verdict__cc {
  font-family: var(--serif);
  font-style: italic;
  color: var(--blood);
  font-weight: 700;
  white-space: nowrap;
}

.seal {
  position: relative;
  margin: var(--gap-lg) 0 var(--gap-md);
  padding: 64px 22px 32px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(139, 26, 26, 0.22) 0%, rgba(8, 6, 15, 0) 60%),
    rgba(8, 6, 15, 0.55);
  border: 2px solid var(--blood);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(201, 164, 90, 0.30) inset,
    0 30px 60px -28px rgba(8, 6, 15, 0.7);
}
/* Envelope flap — subtle gold V at top */
.seal::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 26px;
  background:
    linear-gradient(180deg, rgba(201, 164, 90, 0.18) 0%, transparent 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  pointer-events: none;
}
.seal__wax {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 14px rgba(8, 6, 15, 0.55));
  background: transparent;
  display: inline-block;
  z-index: 2;
}
.seal__head {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--t-xl);
  color: var(--bone);
  text-align: center;
  margin: 4px 0 6px;
  letter-spacing: -0.015em;
}
.seal__sub {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-fg);
  text-align: center;
  margin: 0 0 var(--gap-md);
}

.verdict {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);
  margin: 0;
}
.verdict__card {
  position: relative;
  padding: 22px 22px 24px;
  background: rgba(8, 6, 15, 0.40);
  border: 1px solid rgba(201, 164, 90, 0.28);
  border-radius: 12px;
}
.verdict__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px;
}
.verdict__num {
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  font-size: 28px;
  color: var(--gold-fg);
  margin: 0;
  line-height: 1;
  letter-spacing: -0.01em;
  flex: 0 0 auto;
}
.verdict__h {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--t-lg);
  color: var(--bone);
  margin: 0;
  letter-spacing: -0.015em;
  text-wrap: balance;
  flex: 1 1 auto;
}
.verdict__body {
  font-size: var(--t-base);
  line-height: 1.6;
  opacity: 0.92;
  text-wrap: pretty;
  color: var(--bone);
  margin: 0;
}

@media (min-width: 800px) {
  .seal { padding: 72px 32px 40px; }
  .verdict { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .verdict__card { padding: 24px 22px 28px; }
}
@media (min-width: 1024px) {
  .seal { padding: 80px 40px 48px; }
}

/* ============================================================
   PHASE 2 — §7 "CONFESSIONAL BAR"
   Native <details>/<summary> accordion, single-open via `name=confess`.
   Sticky desktop right rail. Pull-quote insert.
   ============================================================ */
.confess {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  margin: var(--gap-lg) 0 var(--gap-md);
}
.confess__main { min-width: 0; }

.confess__row {
  border-bottom: 1px solid rgba(10, 8, 20, 0.22);
}
.confess__row:first-child {
  border-top: 1px solid rgba(10, 8, 20, 0.22);
}
.confess__row[open] {
  background: rgba(10, 8, 20, 0.03);
}
.confess__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color .2s var(--ease);
}
.confess__q::-webkit-details-marker { display: none; }
.confess__q:hover { color: var(--blood); }
.confess__qtext { flex: 1 1 auto; text-wrap: pretty; }
.confess__chev {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(10, 8, 20, 0.4);
  display: grid; place-items: center;
  font-size: 18px;
  font-weight: 400;
  transition: transform .35s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.confess__row[open] .confess__chev {
  transform: rotate(45deg);
  background: var(--blood);
  color: var(--bone);
  border-color: var(--blood);
}
.confess__a {
  padding: 0 4px 22px;
  max-width: 720px;
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.86;
}
.confess__a p { margin: 0; text-wrap: pretty; }

/* Pull-quote — large serif, blood-red rule, gold attribution */
.confess__pull {
  margin: 28px 0 28px;
  padding: 18px 0 4px 22px;
  border-left: 3px solid var(--blood);
}
.confess__pull blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 3.8vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.confess__pull blockquote p { margin: 0; }
.confess__pull figcaption {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blood);
  opacity: 0.85;
}

/* Sticky right-rail CTA — desktop only */
.confess__rail {
  display: none;
}
@media (min-width: 1024px) {
  .confess {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 56px;
    align-items: start;
  }
  .confess__rail {
    display: block;
    position: sticky;
    top: calc(var(--topbar-h) + 24px);
    align-self: start;
  }
  .confess__rail-inner {
    padding: 22px 22px 24px;
    background: rgba(10, 8, 20, 0.06);
    border: 1px solid rgba(10, 8, 20, 0.22);
    border-left: 3px solid var(--blood);
    border-radius: 14px;
  }
  .confess__rail-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--blood);
    margin: 0 0 8px;
  }
  .confess__rail-h {
    font-family: var(--serif);
    font-weight: 700;
    font-size: var(--t-md);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 14px;
    text-wrap: balance;
  }
  .confess__rail-cta {
    display: inline-flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    padding: 13px 18px;
    background: var(--ink);
    color: var(--bone);
    border-radius: 999px;
    font-weight: 600;
    font-size: var(--t-sm);
    letter-spacing: 0.01em;
    transition: background .25s var(--ease), transform .25s var(--ease);
  }
  .confess__rail-cta:hover {
    background: var(--blood);
    transform: translateY(-1px);
  }
}
@media (min-width: 768px) {
  .confess__q { padding: 24px 6px; font-size: var(--t-lg); }
  .confess__a { padding: 0 6px 28px; font-size: var(--t-md); }
}

/* ============================================================
   PHASE 2 — §8 HYBRID v2 "BOOK YOUR SLAY SESSION"
   Centered Tony photo (no overlay, no crop), recap cards,
   Calendly inline embed, 3 witness cards.
   ============================================================ */
.sec-final {
  /* §8 fix: clip not hidden */
  overflow: hidden;
  overflow: clip;
  padding-top: 48px;
  padding-bottom: 48px;
}

.final__portrait {
  margin: 12px auto 12px;
  padding: 0 var(--pad-x);
  max-width: 480px;
  text-align: center;
}
.final__portrait img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 360px;
  margin: 0 auto;
  /* No crop, no overlay */
  border-radius: 12px;
  background: rgba(10, 8, 20, 0.04);
  box-shadow: 0 24px 56px -28px rgba(10, 8, 20, 0.32);
  object-fit: contain;
}
.final__portrait figcaption {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
.final__portrait-name {
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  font-size: var(--t-md);
  color: var(--ink);
  letter-spacing: -0.005em;
}
.final__portrait-cred {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blood);
}

@media (min-width: 768px) {
  .final__portrait { max-width: 560px; }
  .final__portrait img { max-width: 420px; }
}

/* Recap cards (3 across on desktop, 1 on mobile) */
.recap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 0 var(--gap-xl);
  padding: 0;
}
.recap__card {
  padding: 20px 22px 22px;
  background: rgba(10, 8, 20, 0.04);
  border: 1px solid rgba(10, 8, 20, 0.18);
  border-left: 3px solid var(--blood);
  border-radius: 12px;
}
.recap__k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blood);
  margin: 0 0 6px;
}
.recap__v {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 4px;
}
.recap__d {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.82;
  margin: 0;
}
@media (min-width: 768px) {
  .recap { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* §8 booking CTA anchor (Cal.com modal trigger) */
.book-anchor {
  scroll-margin-top: calc(var(--topbar-h) + 16px);
  margin: 0;
}
.book-anchor--cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0;
}
/* Force the gold-on-wine §4 treatment even inside .sec--light */
.sec--light .book__cta,
.book__cta {
  background: var(--blood);
  color: var(--bone);
  border-color: var(--blood);
  padding: 18px 36px;
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: 0.005em;
  border-radius: 999px;
  box-shadow: 0 16px 40px -12px rgba(139, 26, 26, 0.55);
  cursor: pointer;
  margin: 0;
}
.sec--light .book__cta:hover,
.book__cta:hover {
  background: #a32424;
  color: var(--bone);
  border-color: #a32424;
  transform: translateY(-1px);
}
.book__cta:focus-visible {
  outline: 2px solid var(--blood);
  outline-offset: 4px;
}
.book__sub {
  margin: 6px 0 0;
  font-size: var(--t-sm, 0.95rem);
  color: var(--ink);
  opacity: 0.78;
  letter-spacing: 0.01em;
}
@media (min-width: 768px) {
  .book__cta { padding: 20px 44px; font-size: var(--t-xl, 1.25rem); }
}

/* Witness cards */
.witness__head {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 14px 0 8px;
  text-wrap: balance;
}
.witness {
  /* Mobile: horizontal scroll-snap carousel (peek next card) */
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin: 0 calc(var(--pad-x) * -1);
  padding: 4px var(--pad-x) 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--pad-x);
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: none;
  list-style: none;
}
.witness::-webkit-scrollbar { display: none; }
.witness__card {
  flex: 0 0 84%;
  min-width: 0;
  scroll-snap-align: start;
  padding: 18px 20px 18px;
  background: rgba(10, 8, 20, 0.04);
  border: 1px solid rgba(10, 8, 20, 0.18);
  border-left: 3px solid var(--blood);
  border-radius: 12px;
}
.witness__quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 12px;
  text-wrap: balance;
}
.witness__attr {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blood);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.witness__sep { opacity: 0.45; }
.witness__city { color: var(--ink); opacity: 0.7; font-weight: 600; }
@media (min-width: 768px) {
  /* Desktop/tablet: revert to 3-column grid */
  .witness {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    touch-action: auto;
  }
  .witness__card { flex: initial; scroll-snap-align: none; }
  .witness__quote { font-size: var(--t-base); }
}
@media (min-width: 1024px) {
  .witness__quote { font-size: var(--t-md); }
}

/* ============================================================
   PHASE 2 — color override: .sec__cta--ink in light sections
   The `.sec--light .sec__cta` color: ink rule overrides the
   --ink variant's bone color. Re-assert bone here (more specific).
   ============================================================ */
.sec--light .sec__cta--ink,
.sec--light .sec__cta--ink:hover {
  color: var(--bone);
}

/* ============================================================
   PHASE 3 — LEX FIXES
   site footer + legal page chassis
   ============================================================ */

/* Site footer — neutral, dark, legal-only */
.site-footer {
  position: relative;
  z-index: 2;
  background: #08060F; /* near-black, matches --midnight */
  color: rgba(245, 236, 217, 0.7);
  border-top: 1px solid rgba(245, 236, 217, 0.10);
  padding: 32px var(--pad-x);
  font-family: var(--sans);
}
@media (min-width: 768px) {
  .site-footer { padding: 48px var(--pad-x); }
}
.site-footer__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.site-footer__copy {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: rgba(245, 236, 217, 0.75);
}
.site-footer__nav {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.site-footer__nav a {
  color: rgba(245, 236, 217, 0.85);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(245, 236, 217, 0.25);
  transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease);
}
.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: var(--bone);
  text-decoration-color: rgba(245, 236, 217, 0.7);
}
.site-footer__sep {
  color: rgba(245, 236, 217, 0.35);
}
.site-footer__disclosure {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(245, 236, 217, 0.55);
  max-width: 60ch;
  margin: 4px auto 0;
}
@media (min-width: 768px) {
  .site-footer__copy,
  .site-footer__nav,
  .site-footer__disclosure { font-size: 13px; }
}

/* ---------- legal page chassis (privacy.html, terms.html) ---------- */
.legal-page {
  background: var(--midnight);
  color: var(--bone);
  min-height: 100vh;
}
.legal-page main {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(var(--topbar-h) + 48px) var(--pad-x) 64px;
}
@media (min-width: 768px) {
  .legal-page main {
    padding: calc(var(--topbar-h) + 72px) var(--pad-x) 96px;
  }
}
.legal-page h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--t-2xl);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin-bottom: 8px;
}
.legal-page .legal-meta {
  font-size: 13px;
  color: rgba(245, 236, 217, 0.6);
  margin-bottom: 32px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.legal-page h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--t-lg);
  line-height: 1.2;
  color: var(--bone);
  margin-top: 36px;
  margin-bottom: 12px;
}
.legal-page p,
.legal-page li {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: rgba(245, 236, 217, 0.88);
}
@media (min-width: 768px) {
  .legal-page p,
  .legal-page li { font-size: 16px; }
}
.legal-page p + p { margin-top: 12px; }
.legal-page ul {
  list-style: disc;
  padding-left: 22px;
  margin: 12px 0 0;
}
.legal-page li + li { margin-top: 6px; }
.legal-page a {
  color: var(--bone);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(245, 236, 217, 0.4);
}
.legal-page a:hover { text-decoration-color: var(--bone); }
.legal-page .legal-disclaimer {
  margin-top: 48px;
  padding: 16px 20px;
  border: 1px solid rgba(245, 236, 217, 0.15);
  border-radius: 4px;
  font-size: 13px;
  font-style: italic;
  color: rgba(245, 236, 217, 0.7);
  background: rgba(245, 236, 217, 0.03);
}
.legal-page .legal-back {
  display: inline-block;
  margin-top: 24px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(245, 236, 217, 0.7);
}
.legal-page .legal-back:hover { color: var(--bone); }

/* simple top bar for legal pages */
.legal-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(8, 6, 15, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(245, 236, 217, 0.08);
}
.legal-topbar__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.legal-topbar a.brand {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--bone);
}
.legal-topbar a.brand .dot { color: var(--blood); }

/* legal topbar links should not inherit body underline */
.legal-page .legal-topbar a { text-decoration: none; }
.legal-page .legal-topbar a.brand { color: var(--bone); }
.legal-page .legal-topbar a:hover { color: var(--bone); }

/* SEO footer tagline */
.site-footer__tagline {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(201, 164, 90, 0.85);
  margin: 0 0 0.65rem 0;
  letter-spacing: 0.01em;
}