/* ==========================================================
   REVELION METHOD — stylesheet
   Editorial-cinematic, deep off-black, ember accent.
   ========================================================== */

/* ---------- tokens ---------- */
:root {
  --bg: #0E1A2C;
  --bg-soft: #14253F;
  --bg-warm: #1A2D4A;
  --paper: #F2EDE3;
  --ink: #F2EDE3;
  --ink-soft: #D4D8DF;
  --muted: #8A93A7;
  --rule: rgba(242, 237, 227, 0.12);
  --rule-strong: rgba(242, 237, 227, 0.28);

  --ember: #D4A574;
  --ember-soft: #E8CB9A;
  --ember-deep: #B5895A;

  --warm: #E8A98A;
  --warm-soft: #F4C8AE;
  --warm-deep: #C88066;

  --ff-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-accent: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --ff-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(20px, 4vw, 56px);
  --col: min(1280px, 100vw - 2 * var(--gutter));

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  background: var(--bg);
}
body {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: clamp(16px, 0.5vw + 0.85rem, 18px);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  overflow-x: clip;
  min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; transition: opacity .3s var(--ease-out), color .3s var(--ease-out); }
a:hover { opacity: .7; }
ul { margin: 0; padding: 0; list-style: none; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--ember); color: var(--bg); }

/* ---------- typography ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 300; letter-spacing: -0.015em; }
.display {
  font-family: var(--ff-display);
  font-weight: 300;
  /* Tighter cap on large screens so big displays don't overwhelm */
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.018em;
  margin: 0;
}
.display em, .display strong { font-style: normal; font-weight: 400; color: var(--ember-soft); }
.display--big { font-size: clamp(38px, 5.4vw, 80px); letter-spacing: -0.022em; }
.display span { display: block; }

.text-accent { color: var(--ember-soft); }
.text-warm   { color: var(--warm-soft); }
em { font-style: normal; }
strong { font-weight: 500; }
.muted { color: var(--muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-mono);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  margin: 0 0 28px;
}
.eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 24px var(--ember);
  animation: pulse 2.4s infinite ease-in-out;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.85); }
}

.lede {
  font-family: var(--ff-accent);
  font-weight: 300;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.4;
  letter-spacing: 0;
  margin: 0 0 18px;
  color: var(--ink);
  max-width: 48ch;
}
.lede--end { color: var(--warm-soft); }

/* ---------- chosen strip (travels from doors ring into Calibration) ---------- */
.chosen-strip {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 60px;
  background: var(--ember);
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 28px var(--ember),
    0 0 72px rgba(212, 165, 116, 0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  will-change: top, left, height, transform, opacity;
}

/* give the "What this is" card a bit of left inset so the strip sits cleanly */
.contrast__col--yes { padding-left: clamp(40px, 4vw, 64px); }

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

/* .cursor styles intentionally omitted — custom cursor removed.
   Browser-native cursor used everywhere now. */
.cursor { display: none !important; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  /* Off-white bar that pops against the dark page below */
  background: rgba(242, 237, 227, 0.96);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(14, 26, 44, 0.10);
  box-shadow: 0 8px 24px rgba(4, 8, 16, 0.28);
  /* Dark text inside the light bar */
  color: var(--bg);
  transition: background .4s var(--ease-out), padding .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.nav.is-scrolled {
  background: rgba(242, 237, 227, 0.985);
  padding: 14px var(--gutter);
  border-bottom: 1px solid rgba(14, 26, 44, 0.14);
  box-shadow: 0 12px 30px rgba(4, 8, 16, 0.32);
}
.nav__mark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-display);
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--bg);
}
.nav__mark-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 14px var(--ember);
}
.nav__mark-logo {
  height: 56px; width: auto;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(14, 26, 44, 0.18));
}
.nav__links {
  display: flex; gap: 32px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(14, 26, 44, 0.88);
}
.nav__links a {
  position: relative;
  color: inherit;
  font-weight: 500;
  transition: color .25s var(--ease-out);
}
.nav__links a:hover { color: var(--bg); }
.nav__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: var(--ember);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.nav__links a:hover::after { transform: scaleX(1); }
@media (max-width: 820px) {
  .nav__links { display: none; }
}

/* Light-nav scoped overrides: the ghost CTA was designed for a dark bg.
   On the off-white nav, swap to a dark-outlined pill that fills on hover. */
.nav .nav__cta.btn--ghost {
  color: var(--bg);
  border-color: rgba(14, 26, 44, 0.32);
  background: transparent;
  white-space: nowrap;
}
.nav .nav__cta.btn--ghost:hover {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
}

/* On phones we shrink the nav CTA so the full label "Book a call" doesn't
   wrap. Below 640px the CTA becomes a compact pill; below 420px it
   collapses to just "Book →" so it fits even on iPhone SE width. */
@media (max-width: 640px) {
  .nav {
    /* Slimmer bar on phones — less padding, smaller logo so the header
       takes less of the screen real estate. */
    padding: 10px var(--gutter);
  }
  .nav.is-scrolled { padding: 8px var(--gutter); }
  .nav__mark-logo { height: 36px; }
  .nav__mark { font-size: 17px; gap: 8px; }
  .nav .nav__cta {
    padding: 8px 14px;
    font-size: 14px;
    gap: 6px;
    white-space: nowrap;
  }
}
@media (max-width: 420px) {
  .nav .nav__cta .nav__cta-suffix { display: none; }
  .nav__mark-logo { height: 32px; }
  .nav__mark { font-size: 16px; }
}

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--ember);
  --btn-ink: var(--bg);
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  position: relative;
  overflow: hidden;
  transition: transform .5s var(--ease-out), background .3s var(--ease-out), color .3s var(--ease-out);
  will-change: transform;
}
.btn svg { width: 14px; height: 14px; transition: transform .4s var(--ease-out); }
.btn:hover { opacity: 1; }
.btn:hover svg { transform: translateX(4px); }
.btn--primary:hover { background: var(--ink); color: var(--bg); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  border: 1px solid var(--rule-strong);
  padding: 10px 18px;
  font-size: 15px;
}
.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--text {
  --btn-bg: transparent;
  --btn-ink: var(--ink-soft);
  padding: 14px 6px;
  position: relative;
}
/* Default underline animation for plain .btn--text uses */
.btn--text:not(.btn--scroll)::after {
  content: "";
  position: absolute; left: 6px; right: 6px; bottom: 10px;
  height: 1px; background: currentColor;
  transform: scaleX(1); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.btn--text:not(.btn--scroll):hover::after {
  transform: scaleX(0); transform-origin: right;
}

/* "Scroll to next" variant: no big underline, just a gently-bouncing down
   chevron next to the label. The bouncing signals interactivity at rest;
   on hover the chevron jumps further and a hairline underline draws under
   just the text. */
.btn--scroll {
  align-items: center;
  gap: 10px;
}
.btn--scroll-chevron {
  width: 14px; height: 14px;
  display: inline-block;
  flex-shrink: 0;
  color: currentColor;
  animation: btnScrollBob 1.8s var(--ease-out) infinite;
}
.btn--scroll:hover .btn--scroll-chevron {
  animation-duration: 1s;
}
.btn--scroll span {
  position: relative;
  padding-bottom: 3px;
}
.btn--scroll span::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.btn--scroll:hover span::after,
.btn--scroll:focus-visible span::after {
  transform: scaleX(1);
}

@keyframes btnScrollBob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  40%      { transform: translateY(3px); opacity: 1; }
  70%      { transform: translateY(0);  opacity: 0.7; }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .btn--scroll-chevron { animation: none; opacity: 0.85; }
}
.btn--large {
  padding: 20px 32px;
  font-size: 15px;
}

/* ---------- layout helpers ---------- */
main { display: block; }

.section {
  padding: clamp(100px, 13vw, 180px) var(--gutter);
  position: relative;
  max-width: 100vw;
}
.section__index {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 60px;
  display: flex; align-items: center; gap: 14px;
}
.section__index::before {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--rule-strong);
}

/* ---------- reveal system ---------- */
.reveal { opacity: 0; transform: translateY(22px); }
.splitline .char, .display [data-split] .char { display: inline-block; }

/* ---------- HERO ---------- */
.hero {
  min-height: 100svh;
  padding: clamp(120px, 16vw, 200px) var(--gutter) clamp(60px, 8vw, 120px);
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 82% 22%, rgba(232, 169, 138, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 50% at 88% 55%, rgba(212, 165, 116, 0.12), transparent 55%),
    radial-gradient(ellipse 70% 60% at 12% 90%, rgba(232, 169, 138, 0.08), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--rule);
}
.hero__inner { position: relative; z-index: 2; max-width: 1280px; }

/* Hero ring animation (100 stripes that appear on scroll and form an eye/iris) */
.hero__ring {
  display: none;
  pointer-events: none;
}
@media (min-width: 960px) {
  .hero__ring {
    display: block;
    position: absolute;
    top: 2% !important; /* sits higher in the hero — user-tuned */
    right: clamp(16px, 4vw, 72px);
    width: clamp(500px, 52vw, 820px);
    aspect-ratio: 1 / 1;
    z-index: 1;
  }
  .hero__inner {
    max-width: 700px;
  }
}
.hero__ring-seg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 12%;
  background: var(--ember-soft);
  transform-origin: 50% 230%;
  opacity: 0;
  box-shadow: 0 0 6px rgba(232, 203, 154, 0.3);
  transition:
    background .55s var(--ease-out),
    width .7s var(--ease-out),
    height .7s var(--ease-out),
    box-shadow .8s var(--ease-out);
}
.hero__ring-seg.is-chosen {
  background: var(--ember);
  width: 4px;
  height: 22%;
  box-shadow:
    0 0 28px var(--ember),
    0 0 72px rgba(212, 165, 116, 0.55);
}

/* ---------- Iris: emerges at end of hero scroll to form the brand logo ---------- */
.hero__ring-iris {
  position: absolute;
  left: 50%;
  /* Visual ring centre lies below geometric centre — derived from the
     transform-origin: 50% 230% of the stripes. The iris sits at that pivot. */
  top: 65.6%;
  width: 8%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 42%, #E8CB9A 0%, #D4A574 55%, #A67844 100%);
  box-shadow:
    0 0 32px rgba(212, 165, 116, 0.45),
    0 0 96px rgba(212, 165, 116, 0.18);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.hero__ring-iris::before {
  /* limbal ring */
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border: 1px solid #7A5428;
  opacity: 0.55;
}
.hero__ring-iris::after {
  /* catchlight — slight wet-eye highlight upper-left */
  content: "";
  position: absolute;
  width: 28%;
  height: 32%;
  border-radius: 50%;
  top: 16%;
  left: 16%;
  background: radial-gradient(circle, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 70%);
}

/* ---------- Chosen-door axis: emerges from the iris, longer than the rest ---------- */
.hero__ring-chosen {
  position: absolute;
  left: 50%;
  top: 65.6%;             /* same pivot as the iris/ring */
  width: 5px;
  height: 0;              /* animated 0 → 36% via JS */
  background: var(--ember);
  transform-origin: 50% 100%;  /* bottom-centre — line grows out from the iris */
  /* 43.2° from 12 o'clock — the 1:25 chosen-door angle */
  transform: translate(-50%, -100%) rotate(43.2deg);
  opacity: 0;
  box-shadow:
    0 0 28px var(--ember),
    0 0 72px rgba(212, 165, 116, 0.55);
  pointer-events: none;
  z-index: 2;
  border-radius: 1px;
}

/* ---------- The Awakening: cinematic eye ---------- */
.hero-eye {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  width: min(780px, 72vw);
  aspect-ratio: 2 / 1;
  height: auto;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  filter:
    drop-shadow(0 24px 52px rgba(212, 165, 116, 0.18))
    drop-shadow(0 0 60px rgba(232, 169, 138, 0.12));
}
@media (max-width: 820px) {
  .hero-eye { width: min(540px, 94vw); top: 36%; }
}
.eye-bloom { opacity: 0; }
.eye-iris-fibers { opacity: 0; }
.eye-iris-rings circle { opacity: 0; }
.eye-outline { opacity: 0; }
.eye-lashes { opacity: 0; }
#eyePupil { opacity: 0; transform-origin: 400px 200px; }

@media (prefers-reduced-motion: reduce) {
  .hero-eye  { opacity: 0.85; }
  .eye-bloom { opacity: 1; }
  .eye-iris-fibers { opacity: 0.35; }
  .eye-iris-rings circle { opacity: 1; }
  .eye-outline { opacity: 0.85; }
  .eye-lashes  { opacity: 0.55; }
  #eyePupil    { opacity: 1; }
  #eyeLid      { y: 80; height: 240; }
}

.hero__title {
  font-family: var(--ff-display);
  /* Cap large-screen size lower so the headline reads naturally on 27"+ */
  font-size: clamp(42px, 5.6vw, 84px);
  line-height: 1.02;
  /* Slightly looser tracking so "burned out" doesn't have r/n collide */
  letter-spacing: -0.018em;
  margin: 0 0 clamp(32px, 4vw, 52px);
  font-weight: 300;
}
.hero__title .splitline { display: block; }
.hero__title .splitline--accent {
  color: var(--ember-soft);
}
.hero__sub {
  font-family: var(--ff-body);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
  max-width: 52ch;
  color: var(--ink-soft);
  margin: 0 0 44px;
  font-weight: 400;
}
.hero__ctas {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
  margin-bottom: clamp(52px, 7vw, 100px);
}
.hero__proof {
  display: inline-flex; align-items: center; gap: 18px;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  max-width: 620px;
}
.hero__proof-num {
  font-family: var(--ff-display);
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1;
  color: var(--ember);
}
.hero__proof-txt {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.hero__proof-txt .muted {
  font-size: 15px;
  letter-spacing: 0.08em;
}

.hero__scroll {
  position: absolute;
  bottom: 32px;
  right: var(--gutter);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-size: 15px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 2;
}
.hero__scroll-line {
  width: 1px; height: 50px;
  background: linear-gradient(to bottom, var(--ember), transparent);
  animation: scrollLine 2s infinite ease-in-out;
}
@keyframes scrollLine {
  0% { transform: scaleY(0.2); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0.2); transform-origin: bottom; }
}
@media (max-width: 720px) {
  .hero__scroll { display: none; }
}

/* ---------- SUNDAY ---------- */
.sunday {
  background: var(--bg);
  padding-bottom: clamp(48px, 6vw, 96px);
}
.sunday .display { max-width: 34ch; }

/* ---------- Sunday numbers (editorial replacement for the stat grid) ---------- */
.sunday__numbers {
  list-style: none;
  margin: clamp(64px, 8vw, 112px) auto 0;
  padding: 0;
  max-width: 900px;
  display: flex;
  flex-direction: column;
}
.sunday__num {
  padding: clamp(40px, 5vw, 64px) 0;
  border-top: 1px solid var(--rule);
}
.sunday__num:last-child { border-bottom: 1px solid var(--rule); }
.sunday__num-tag {
  display: block;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 28px;
}
.sunday__num-row {
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
}
.sunday__num-figure {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(72px, 10vw, 140px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--ember-soft);
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.sunday__num-figure em {
  font-family: var(--ff-accent);
  font-style: italic;
  font-weight: 300;
  font-size: 0.36em;
  color: var(--ember);
  letter-spacing: 0;
  line-height: 1.1;
}
.sunday__num-text {
  font-family: var(--ff-accent);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(18px, 1.45vw, 26px);
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
  min-width: 260px;
  max-width: 500px;
}
.sunday__num--accent .sunday__num-figure { color: var(--ember); }
.sunday__num--accent .sunday__num-figure em { color: var(--ember-soft); }
.sunday__num--accent .sunday__num-text { color: var(--ink); }
.sunday__num-src {
  display: inline-block;
  margin: 18px 0 0;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 600px) {
  .sunday__num-row { gap: 14px; }
  .sunday__num-figure { font-size: 64px; }
  .sunday__num-text { font-size: 17px; min-width: 0; }
}
.pullquote {
  margin: clamp(60px, 8vw, 120px) 0;
  padding: clamp(32px, 5vw, 56px);
  border-left: 2px solid rgba(212, 165, 116, 0.28);
  background: transparent;
  max-width: 900px;
  transition:
    border-color 1s var(--ease-out),
    background 1.2s var(--ease-out),
    box-shadow 1s var(--ease-out);
}
.pullquote.is-lit {
  border-left-color: var(--ember);
  background: linear-gradient(90deg, rgba(212, 165, 116, 0.08), transparent);
  box-shadow: -10px 0 36px -6px rgba(232, 203, 154, 0.45);
}
.pullquote blockquote {
  margin: 0;
  font-family: var(--ff-accent);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ink);
}
.pullquote blockquote p { margin: 0 0 2px; }
.pullquote figcaption {
  margin-top: 28px;
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.sunday__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-top: 40px;
  border-top: 1px solid var(--rule);
  padding-top: 52px;
}
.stat__num {
  font-family: var(--ff-display);
  font-size: clamp(44px, 5.5vw, 84px);
  line-height: 1;
  color: var(--ember-soft);
  letter-spacing: -0.02em;
}
.stat__lbl {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 28ch;
}
@media (max-width: 780px) {
  .sunday__stats { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- DIAGNOSIS ---------- */
.diagnosis { background: var(--bg); }
.diagnosis .display { max-width: 14ch; margin-bottom: clamp(40px, 6vw, 80px); }
.diagnosis__body {
  max-width: 720px;
  margin-left: auto;
  padding-left: clamp(0px, 6vw, 100px);
}

/* ---------- DOORS ---------- */
.doors {
  background: var(--bg);
  padding: 0;
}
.doors__sticky {
  padding: clamp(100px, 13vw, 180px) var(--gutter);
}
.doors__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
  min-height: 120vh;
}
.doors__copy { padding-top: 18vh; padding-bottom: 40vh; }
.doors__visual {
  position: sticky;
  top: 6vh;
  aspect-ratio: 1 / 1;
  /* 20% bigger than the previous 520px max; sticky top reduced so the
     ring + the counter-below-it still fit in viewport. */
  max-width: clamp(408px, 46vw, 624px);
  margin: 0 auto;
  width: 100%;
  align-self: start;
}
.doors__ring {
  position: absolute; inset: 0;
}
.door-seg {
  position: absolute;
  top: 50%; left: 50%;
  width: 2px;
  height: 11%;
  background: var(--ink-soft);
  transform-origin: 50% 230%;
  opacity: 0.55;
  transition: opacity .6s var(--ease-out), background .6s var(--ease-out), height .6s var(--ease-out), width .6s var(--ease-out);
}
.door-seg.is-off {
  opacity: 0.05;
  background: var(--muted);
}
.door-seg.is-chosen {
  opacity: 1;
  background: var(--ember);
  height: 17%;
  width: 4px;
  box-shadow: 0 0 24px var(--ember), 0 0 60px rgba(212,165,116,0.45);
}
.doors__center {
  position: absolute;
  /* Sits BELOW the ring, not overlapping the stripes */
  top: 100%; left: 50%;
  transform: translate(-50%, 18px);
  text-align: center;
  font-family: var(--ff-display);
  pointer-events: none;
}
.doors__counter {
  display: block;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ember-soft);
}
.doors__counter .muted { font-size: 0.55em; margin-left: 4px; color: var(--muted); }
.doors__label {
  display: block;
  margin-top: 8px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.doors__copy .display { max-width: 18ch; margin-bottom: 36px; }
.doors__paragraphs p {
  margin: 0 0 18px;
  font-size: clamp(18px, 1.3vw, 22px);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 44ch;
}
.doors__paragraphs p strong { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) {
  .doors__layout { grid-template-columns: 1fr; }
  .doors__visual { max-width: 380px; order: 2; }
}

/* ---------- MOBILE: hide doors-ring animation + flying strip ----------
   The countdown ring + chosen-stripe fly is desktop-only theatre. On
   mobile the ring sits below the copy (order:2) so by the time the user
   sees it the counter has already finished, and the flying strip then
   appears "out of nowhere" in the next section. Hide both so the text
   "Picture a round room. 100 doors..." carries the metaphor on its own. */
@media (max-width: 820px) {
  .doors__visual { display: none; }
  #chosenStrip { display: none !important; }
  /* Cut the dead vertical space the doors section had reserved for the
     now-hidden ring (sticky visual + 120vh min-height layout). */
  .doors__layout { min-height: 0; }
  .doors__copy { padding-top: 0; padding-bottom: 0; }
  .doors__sticky { padding: clamp(64px, 9vw, 100px) var(--gutter); }
}

/* Desktop/mobile copy variants for the doors section. The mobile version
   condenses 6 paragraphs to 2 so phone readers don't have to scroll a wall
   of text without the supporting ring animation to anchor them. */
.doors__paragraphs--mobile { display: none; }
@media (max-width: 820px) {
  .doors__paragraphs--desktop { display: none; }
  .doors__paragraphs--mobile  { display: block; }
}

/* ---------- HERO CTA caption (sits directly under primary button) ---------- */
.hero__cta-primary {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.hero__cta-caption {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__cta-caption::before {
  content: "";
  display: inline-block;
  width: 6px; height: 1px;
  background: var(--ember);
  margin-right: 10px;
  vertical-align: middle;
}

/* ---------- GUARANTEE callout ---------- */
.guarantee {
  background: var(--bg);
  text-align: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-top: clamp(80px, 10vw, 140px);
  padding-bottom: clamp(80px, 10vw, 140px);
}
.guarantee__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.guarantee__kicker {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ember);
  margin: 0 0 36px;
}
.guarantee__title {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(26px, 2.8vw, 42px);
  letter-spacing: -0.012em;
  line-height: 1.32;
  color: var(--ink);
  margin: 0 auto 28px;
  max-width: 34ch;
}
.guarantee__title em { display: inline; }
.guarantee__title em {
  font-family: var(--ff-accent);
  font-style: italic;
  font-weight: 300;
  color: var(--ember);
  display: inline-block;
  margin-top: 6px;
}
.guarantee__condition {
  font-family: var(--ff-accent);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--muted);
  margin: 0;
}

/* ---------- METHOD CTA caption ---------- */
.method__cta-caption {
  margin: 14px 0 0;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- CONTRAST ---------- */
.contrast { background: var(--bg); }
.contrast__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  margin-top: 20px;
}
.contrast__col {
  padding: clamp(32px, 4vw, 56px);
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg-soft);
  position: relative;
  overflow: hidden;
}
.contrast__col--no { opacity: 0.7; }
.contrast__col--no em { color: var(--muted); }
.contrast__col--yes {
  border-color: rgba(212, 165, 116, 0.32);
  background: linear-gradient(180deg, rgba(212,165,116,0.06), var(--bg-soft));
}
.contrast__col--yes em { color: var(--ember-soft); }
.contrast__label {
  font-family: var(--ff-display);
  /* Bumped mobile floor 22 → 28px so the column headers clearly outrank
     the 16px body items below them. */
  font-size: clamp(28px, 2.4vw, 36px);
  margin: 0 0 24px;
  letter-spacing: -0.012em;
  line-height: 1.1;
}
.contrast__col ul li {
  font-family: var(--ff-body);
  /* Mobile body 17 → 16 so the visual gap to the 28px label is clearer. */
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.5;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  position: relative;
  padding-left: 26px;
}
.contrast__col ul li:first-child { border-top: 0; }
.contrast__col--no ul li::before {
  content: "";
  position: absolute; left: 0; top: 22px;
  width: 14px; height: 1px;
  background: var(--muted);
}
.contrast__col--yes ul li::before {
  content: "";
  position: absolute; left: 0; top: 20px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--ember);
}
@media (max-width: 780px) {
  .contrast__grid { grid-template-columns: 1fr; }
}

/* ---------- METHOD (horizontal) ---------- */
.method { background: var(--bg); padding-bottom: 0; overflow: hidden; }
.method__intro .display { max-width: 18ch; margin: 28px 0 28px; }
.method__intro .lede { max-width: 56ch; }
.method__rail {
  margin-top: clamp(60px, 8vw, 120px);
  padding-bottom: clamp(80px, 10vw, 160px);
}
.method__track {
  display: flex;
  gap: clamp(20px, 2vw, 32px);
  padding: 0 var(--gutter);
  margin-left: calc(-1 * var(--gutter));
  will-change: transform;
}
.method__card {
  flex: 0 0 clamp(320px, 36vw, 460px);
  min-height: clamp(440px, 55vh, 560px);
  padding: clamp(28px, 3vw, 44px);
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 4px;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .6s var(--ease-out), border-color .6s var(--ease-out);
}
.method__card--accent {
  background: linear-gradient(180deg, rgba(232,169,138,0.14), var(--bg-soft));
  border-color: rgba(232, 169, 138, 0.42);
}
.method__card--accent .method__week { color: var(--warm-soft); }
.method__card--accent .method__list li::before { background: var(--warm); }
.method__card--outro {
  background: transparent;
  border: 1px dashed var(--rule-strong);
  justify-content: center;
  align-items: flex-start;
  flex: 0 0 clamp(320px, 30vw, 400px);
}
.method__num {
  font-family: var(--ff-display);
  font-size: 15px;
  color: var(--muted);
  letter-spacing: 0.1em;
}
.method__week {
  font-family: var(--ff-body);
  font-size: 15px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ember-soft);
  margin: 4px 0 auto;
}
.method__card--outro .method__week { display: none; }
.method__title {
  font-family: var(--ff-display);
  font-size: clamp(28px, 2.6vw, 40px);
  letter-spacing: -0.015em;
  margin: 48px 0 18px;
}
.method__card--outro .method__title { margin-top: 0; }
.method__body {
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
/* "What's included" expandable wrapping the bullet list — keeps each card
   compact by default; clients open to see deliverables. */
.method__details {
  margin-top: auto;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}
.method__details summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember-soft);
  padding: 4px 0;
  transition: color .25s var(--ease-out);
}
.method__details summary::-webkit-details-marker { display: none; }
.method__details summary:hover { color: var(--ember); }
.method__details summary::after {
  content: "+";
  display: inline-block;
  font-family: var(--ff-display);
  font-size: 18px;
  line-height: 0.6;
  color: currentColor;
  transition: transform .35s var(--ease-out);
}
.method__details[open] summary::after { content: "−"; }
.method__details .method__list {
  margin-top: 12px;
  animation: methodListIn .35s var(--ease-out);
}
@keyframes methodListIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0);     }
}

.method__list li {
  font-size: clamp(16px, 1.05vw, 18px);
  color: var(--ink-soft);
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; gap: 10px;
}
.method__list li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--ember);
}
.method__card--outro .btn { margin-top: 20px; }

/* Mobile: vertical stack */
@media (max-width: 820px) {
  .method__rail { padding-bottom: 80px; }
  .method__track {
    flex-direction: column;
    padding: 0 var(--gutter);
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
  }
  .method__card {
    flex: 1 1 auto;
    min-height: auto;
    width: calc(100vw - 2 * var(--gutter));
  }
}

/* ---------- PROOF ---------- */
.proof { background: var(--bg); }
.proof .display { max-width: 20ch; margin-bottom: 60px; }

/* Company-name marquee: only companies from the live site */
.proof__marquee {
  margin: clamp(40px, 5vw, 80px) calc(-1 * var(--gutter));
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  position: relative;
}
.proof__marquee-track {
  display: inline-flex;
  /* Tighter gaps + faster scroll so more brand names cycle per second */
  gap: 22px;
  white-space: nowrap;
  animation: marquee 26s linear infinite;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: -0.01em;
  color: var(--ink-soft);
}
@media (max-width: 640px) {
  .proof__marquee-track {
    gap: 16px;
    animation-duration: 18s;
    font-size: 18px;
  }
}
.proof__marquee-track span:nth-child(even) { color: var(--ember); }
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.proof__grid {
  margin-top: clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 32px);
}
.tmn {
  margin: 0;
  padding: clamp(28px, 3vw, 40px);
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 4px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  transition: border-color .5s var(--ease-out), transform .6s var(--ease-out);
}
.tmn:hover { border-color: rgba(212,165,116,0.38); transform: translateY(-4px); }

/* Video block inside a testimonial card (always visible, no toggle) */
.tmn__video {
  margin-top: 18px;
}
.tmn__video-player {
  margin-top: 0;
  margin-bottom: 24px;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #07080a;
  border: 1px solid var(--rule);
  overflow: hidden;
  display: block;
  border-radius: 3px;
}
.tmn__video-player video,
.tmn__video-player iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: contain;
  background: #000;
}

/* Lazy thumbnail (shown before the user taps to play). Avoids the giant
   iOS Safari overlay play button being slapped on top of the poster image. */
.tmn__video-thumb {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}
.tmn__video-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out), filter .4s var(--ease-out);
}
.tmn__video-thumb:hover .tmn__video-thumb-img,
.tmn__video-thumb:focus-visible .tmn__video-thumb-img {
  transform: scale(1.03);
  filter: brightness(0.92);
}
/* Pill-shaped "Play video" button positioned at the bottom of the
   thumbnail so it doesn't sit on top of the client's face. */
.tmn__video-thumb-play {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  background: rgba(14, 26, 44, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #F2EDE3;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    0 0 0 1px rgba(212, 165, 116, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.45);
  transition: background .3s var(--ease-out), transform .3s var(--ease-out),
              color .3s var(--ease-out), box-shadow .3s var(--ease-out);
  pointer-events: none;
}
.tmn__video-thumb-play svg {
  width: 12px; height: 12px;
  flex-shrink: 0;
}
.tmn__video-thumb:hover .tmn__video-thumb-play,
.tmn__video-thumb:focus-visible .tmn__video-thumb-play {
  background: var(--ember);
  color: var(--bg);
  transform: translateX(-50%) translateY(-2px);
  box-shadow:
    0 0 0 1px var(--ember),
    0 12px 30px rgba(0, 0, 0, 0.55);
}
/* Subtle gradient overlay at the bottom of the thumb so the pill always
   has enough contrast against light backgrounds (sky / outdoor portraits) */
.tmn__video-thumb::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 96px;
  background: linear-gradient(180deg, transparent, rgba(14, 26, 44, 0.55));
  pointer-events: none;
}
.tmn blockquote {
  margin: 0 0 24px;
  font-family: var(--ff-accent);
  font-weight: 300;
  font-style: normal;                  /* description, not a quote */
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--ink-soft);
  quotes: none;
}
.tmn blockquote::before, .tmn blockquote::after { content: none; }
/* (legacy `summary .arrow` toggle removed — video shows inline now) */
.tmn figcaption {
  font-size: 15px;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: 14px;
}
.tmn__avatar {
  flex: 0 0 52px;
  width: 52px; height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-warm);
  border: 1px solid rgba(212,165,116,0.32);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tmn__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.tmn__avatar span {
  font-family: var(--ff-accent);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--ember-soft);
}
.tmn__meta {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.tmn__meta strong {
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tmn__meta span { color: var(--muted); font-size: 14px; line-height: 1.3; }
.tmn__linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--muted);
  opacity: 0.7;
  transition: color .25s var(--ease-out), opacity .25s var(--ease-out), transform .25s var(--ease-out);
  flex-shrink: 0;
}
.tmn__linkedin svg { width: 100%; height: 100%; display: block; }
.tmn__linkedin:hover {
  color: #0a66c2;   /* LinkedIn brand blue */
  opacity: 1;
  transform: translateY(-1px);
}
@media (max-width: 960px) { .proof__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .proof__grid { grid-template-columns: 1fr; } }

/* "See more" expandable hidden grid + toggle button */
.proof__grid--more {
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    max-height .9s var(--ease-in-out),
    opacity .55s var(--ease-out),
    margin-top .55s var(--ease-out);
}
.proof__grid--more.is-open {
  max-height: 6000px;
  opacity: 1;
  pointer-events: auto;
  margin-top: clamp(20px, 2vw, 32px);
}
.proof__grid--more .tmn {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.proof__grid--more.is-open .tmn {
  opacity: 1;
  transform: none;
}
.proof__grid--more.is-open .tmn:nth-child(1) { transition-delay: 0.00s; }
.proof__grid--more.is-open .tmn:nth-child(2) { transition-delay: 0.06s; }
.proof__grid--more.is-open .tmn:nth-child(3) { transition-delay: 0.12s; }
.proof__grid--more.is-open .tmn:nth-child(4) { transition-delay: 0.18s; }
.proof__grid--more.is-open .tmn:nth-child(5) { transition-delay: 0.24s; }
.proof__grid--more.is-open .tmn:nth-child(6) { transition-delay: 0.30s; }
.proof__grid--more.is-open .tmn:nth-child(7) { transition-delay: 0.36s; }

.proof__more-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(40px, 5vw, 64px);
}
.proof__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 0;
  transition:
    background .35s var(--ease-out),
    color .35s var(--ease-out),
    border-color .35s var(--ease-out);
}
.proof__more-btn:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.proof__more-btn svg {
  width: 14px;
  height: 14px;
  transition: transform .4s var(--ease-out);
}
.proof__more-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ---------- ABOUT ---------- */
.about { background: var(--bg); }
.about__grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.about__portrait {
  position: sticky; top: 100px;
  margin: 0;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-warm);
  box-shadow:
    0 30px 80px -40px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(212, 165, 116, 0.12);
}
.about__portrait::before {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(212,165,116,0.12), transparent 60%),
    linear-gradient(180deg, transparent 55%, rgba(12, 26, 46, 0.85));
  pointer-events: none;
}
.about__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
  transition: transform 1.2s var(--ease-out);
}
.about__portrait:hover img { transform: scale(1.03); }
.about__portrait-caption {
  position: absolute; left: clamp(24px, 3vw, 40px); right: clamp(24px, 3vw, 40px);
  bottom: clamp(24px, 3vw, 40px);
  z-index: 3;
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

.about__copy .display { max-width: 14ch; margin-bottom: 44px; }
.about__story p {
  margin: 0 0 18px;
  font-size: clamp(18px, 1.3vw, 22px);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 52ch;
}
.about__signoff {
  margin-top: 32px !important;
  font-family: var(--ff-accent);
  font-weight: 300;
  font-size: clamp(22px, 1.8vw, 28px) !important;
  color: var(--warm-soft) !important;
  line-height: 1.4 !important;
  letter-spacing: 0;
  border-left: 2px solid var(--warm);
  padding-left: 20px;
}

/* About section: Julius's video toggle (same pattern as testimonial video) */
.about__video {
  margin-top: 32px;
  max-width: 440px;
}
.about__video summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ember-soft);
  transition: color .3s var(--ease-out);
  padding: 4px 0;
}
.about__video summary::-webkit-details-marker { display: none; }
.about__video summary::before {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transition: transform .4s var(--ease-out);
}
.about__video[open] summary::before { transform: rotate(90deg); }
.about__video summary:hover { color: var(--warm-soft); }
.about__video {
  max-width: 640px;
}
.about__video-player {
  margin-top: 18px;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #07080a;
  border: 1px solid var(--rule);
  overflow: hidden;
  border-radius: 3px;
}
.about__video-player video {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}
@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  /* Mobile portrait: keep a tall portrait aspect (4/5) instead of 16/10 so
     Julius's face isn't cropped at the top and bottom on phones. Object
     position pulls slightly above centre so the face stays in the frame
     even when the gradient overlay covers the lower portion. */
  .about__portrait {
    position: relative; top: 0;
    aspect-ratio: 4 / 5;
    max-width: 380px;
    margin: 0 auto;
  }
  .about__portrait img { object-position: center 22%; }
}

/* ---------- FIT ---------- */
.fit { background: var(--bg); }
.fit .display { max-width: 16ch; margin-bottom: 60px; }
.fit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
}
.fit__col {
  padding: clamp(32px, 4vw, 52px);
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg-soft);
}
.fit__col--no { opacity: 0.72; }
.fit__label {
  font-family: var(--ff-display);
  font-size: clamp(22px, 2vw, 30px);
  margin: 0 0 28px;
  color: var(--ember-soft);
}
.fit__col--no .fit__label { color: var(--muted); }
.fit__col ul li {
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  font-size: clamp(18px, 1.3vw, 22px);
  line-height: 1.65;
  color: var(--ink-soft);
}
.fit__col ul li:first-child { border-top: 0; }
@media (max-width: 820px) {
  .fit__grid { grid-template-columns: 1fr; }
}

/* ---------- FAQ ---------- */
.faq { background: var(--bg); }
.faq .display { max-width: 20ch; margin-bottom: 60px; }
.faq__list {
  max-width: 860px;
  border-top: 1px solid var(--rule);
}
.faq__item {
  border-bottom: 1px solid var(--rule);
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 60px 28px 0;
  font-family: var(--ff-display);
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.35;
  position: relative;
  transition: color .3s var(--ease-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%) rotate(0deg);
  width: 18px; height: 18px;
  background:
    linear-gradient(currentColor, currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 100% no-repeat;
  transition: transform .4s var(--ease-out);
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item[open] summary { color: var(--ember-soft); }
.faq__item summary:hover { color: var(--ember-soft); }
.faq__body {
  padding: 0 60px 32px 0;
}
.faq__body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* ---------- FINAL ---------- */
.final {
  background:
    radial-gradient(ellipse 55% 45% at 30% 12%, rgba(232,169,138,0.18), transparent 60%),
    radial-gradient(ellipse 55% 45% at 70% 10%, rgba(212,165,116,0.18), transparent 60%),
    var(--bg);
  text-align: center;
  overflow: hidden;
  /* Tighter top padding so the calendar appears above the fold when the user
     jumps here from a CTA. Bottom padding kept for breathing room. */
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(80px, 10vw, 140px);
}
.final__inner { max-width: 840px; margin: 0 auto; }
.final__title {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 16px 0 18px;
}
.final__title span { display: block; }
.final__title em { font-style: normal; color: var(--warm-soft); }
.final__sub {
  font-family: var(--ff-accent);
  font-weight: 300;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.calendly {
  max-width: 960px;
  margin: 0 auto;
  text-align: left;
}
.calendly__card {
  background: #FFFFFF;
  border-radius: 14px;
  padding: clamp(12px, 1.5vw, 20px);
  box-shadow:
    0 40px 100px -40px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(212, 165, 116, 0.25),
    0 0 0 6px rgba(212, 165, 116, 0.06);
  overflow: hidden;
}
.calendly-inline-widget {
  width: 100%;
  min-height: 1100px;
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
}
@media (max-width: 720px) {
  .calendly-inline-widget { min-height: 1400px; }
}
.final__note {
  display: block;
  margin-top: 28px;
  text-align: center;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.final__note a { color: var(--ember-soft); border-bottom: 1px solid rgba(212, 165, 116, 0.4); }

/* ---------- FOOTER ---------- */
.footer {
  padding: clamp(60px, 8vw, 100px) var(--gutter) 40px;
  border-top: 1px solid var(--rule);
  background: var(--bg);
}
.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.footer__brand {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--ff-display);
  font-size: 22px;
}
.footer__logo {
  height: 30px; width: auto;
  display: block;
}
.footer__tag {
  max-width: 52ch;
  color: var(--ink-soft);
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 52px 0;
}
.footer__cols h4 {
  font-family: var(--ff-body);
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 20px;
}
.footer__cols p {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.footer__bottom {
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between;
  font-size: 15px;
  color: var(--muted);
  flex-wrap: wrap;
  gap: 16px;
}
@media (max-width: 820px) {
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  .footer__cols { grid-template-columns: 1fr; }
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .cursor { display: none; }
  .hero__scroll-line { animation: none; }
}

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ==========================================================================
   MOBILE PASS — consolidated phone-only tweaks
   ========================================================================== */

/* Section indices (eyebrows) slightly larger on mobile so they don't get
   visually overtaken by 16-18px body copy below them. */
@media (max-width: 640px) {
  .section__index { font-size: 13px; letter-spacing: 0.18em; }
}

/* Hero proof line: the long "Senior professionals coached from M-B · Amazon
   · Sanofi · …" wraps to 3-4 lines on phones. Trim the brand list and the
   secondary "All of them look forward to Mondays" muted line so the 70+
   block is compact. */
@media (max-width: 640px) {
  .hero__proof { padding-top: 18px; gap: 14px; }
  .hero__proof-num { font-size: 44px; }
  .hero__proof-txt {
    font-size: 14px;
    line-height: 1.45;
  }
  /* Replace the long brand list with a short version via attribute swap */
  .hero__proof-txt .hero__proof-brands-long { display: none; }
  .hero__proof-txt .hero__proof-brands-short { display: inline; }
  .hero__proof-txt .muted { display: none; }
}
@media (min-width: 641px) {
  .hero__proof-txt .hero__proof-brands-short { display: none; }
}

/* Hero CTAs: stack vertically on phones so each button is a full-width
   thumb target. */
@media (max-width: 640px) {
  .hero__ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .hero__ctas .btn { justify-content: center; }
  .hero__ctas .btn--text { padding: 12px 6px; }
}

/* Pullquote: tighter padding + smaller left bar on phones so the quote
   fits within thumb-reach width without the chunky frame eating space. */
@media (max-width: 640px) {
  .pullquote {
    margin: 32px 0;
    padding: 18px 20px;
    border-left-width: 2px;
  }
  .pullquote blockquote {
    font-size: 18px;
    line-height: 1.5;
  }
}

/* Testimonial avatar meta: shorten the role/company/country line so it
   doesn't wrap to 2-3 lines on phones. */
@media (max-width: 640px) {
  .tmn__meta strong { font-size: 16px; line-height: 1.3; }
  .tmn__meta span   { font-size: 13px; line-height: 1.3; }
  .tmn blockquote   { font-size: 16px; line-height: 1.55; }
}

/* Footer cols: stack to a single column on the narrowest phones for
   easier scanning. */
@media (max-width: 520px) {
  .footer__cols { grid-template-columns: 1fr; gap: 28px; }
}

/* Final/Book section title: slightly smaller + tighter line-height on
   mobile so "This call is the start of the change." doesn't dangle the
   word "change." on a third line. */
@media (max-width: 640px) {
  .final__title {
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.15;
    margin: 12px 0 16px;
  }
  .final__sub {
    font-size: 15px;
    line-height: 1.45;
    margin-bottom: 22px;
  }
  .final {
    padding-top: clamp(48px, 7vw, 80px);
    padding-bottom: clamp(64px, 8vw, 100px);
  }
}

/* Calendly iframe lazy-load placeholder: the live site replaces the
   ".calendly-deferred" element with the real widget on first user
   interaction (see inline script at end of index.html). */
.calendly-deferred {
  width: 100%;
  min-height: 360px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #FFFFFF, #F2EDE3);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bg);
}
.calendly-deferred:hover { filter: brightness(0.96); }
.calendly-deferred::before {
  content: "→ Tap to load the calendar";
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border: 1px solid rgba(14,26,44,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
  font-weight: 500;
}
@media (min-width: 821px) {
  /* Desktop: load immediately, no placeholder needed. */
  .calendly-deferred { min-height: 0; padding: 0; background: transparent; cursor: default; }
  .calendly-deferred::before { display: none; }
}

/* Auto-hide nav on scroll-down (mobile only). JS toggles .nav--hidden. */
.nav { transform: translateY(0); transition: transform .35s var(--ease-out), background .4s var(--ease-out), padding .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.nav--hidden { transform: translateY(-100%); }