/* ==========================================================================
   vocalenterprises.com — homepage
   Look direction is provisional (ink / cream / amber). Every color lives in
   :root so the accent and palette are a one-line swap when the pack arrives.
   ========================================================================== */

/* Self-hosted type (no third-party request, no layout shift on slow networks) */
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); }
/* Real italics — without these the browser slants the upright face and the slanted glyphs eat the space that follows them */
@font-face { font-family: "Barlow"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/barlow-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: italic; font-display: swap; src: url("../fonts/barlow-latin-500-italic.woff2") format("woff2"); }

:root {
  /* Palette */
  --ink: #0e0e10;
  --ink-2: #141416;
  --ink-3: #1b1b1f;
  --cream: #f3ebdd;
  --cream-soft: rgba(243, 235, 221, 0.72);
  --cream-mute: rgba(243, 235, 221, 0.46);
  --line: rgba(243, 235, 221, 0.14);

  /* The accent. Change this one value to retheme the page. */
  --accent: #d9a441;
  --accent-ink: #1a1305;
  --accent-soft: rgba(217, 164, 65, 0.16);
  --accent-glow: rgba(217, 164, 65, 0.28);

  /* Type */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rhythm */
  --gutter: 20px;
  --max: 1200px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 900ms;
}

@media (min-width: 700px) {
  :root { --gutter: 32px; }
}
@media (min-width: 1100px) {
  :root { --gutter: 48px; }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ink);
  color: var(--cream);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto; /* Lenis handles smoothing; native fallback stays honest */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  background: var(--ink);
  color: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.02; }
p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.skip {
  position: absolute; left: -999px; top: 8px;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 14px; border-radius: 6px; z-index: 100;
}
.skip:focus { left: 12px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Grain — one fixed layer, very quiet */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none; z-index: 60;
  opacity: 0.055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><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>");
  mix-blend-mode: soft-light;
}

/* --------------------------------------------------------------------------
   Top bar — minimal, quiet
   -------------------------------------------------------------------------- */

.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 14px 0;
  background: linear-gradient(to bottom, rgba(14,14,16,0.85), rgba(14,14,16,0));
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; }
.wordmark {
  font-family: var(--font-display);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  font-size: 15px; text-decoration: none; color: var(--cream);
}
.top nav a {
  font-size: 14px; color: var(--cream-soft); text-decoration: none;
  margin-left: 22px; letter-spacing: 0.02em;
}
.top nav a:hover { color: var(--cream); }

/* --------------------------------------------------------------------------
   Hero — scroll-scrubbed orbit behind the question and both doors
   -------------------------------------------------------------------------- */

/* Scroll feel: the hero pins for only half a screen of scroll. While it is pinned the
   question and doors drift upward and the next section slides in over the bottom edge,
   so the page visibly moves the whole time the orbit is turning. The orbit itself keeps
   scrubbing a little past the release (see progress() in site.js). */
.hero {
  position: relative;
  height: 150svh; /* 100svh pinned view + 50svh of pinned scroll */
  --p: 0;         /* pin progress 0→1, set by site.js */
}

.hero__sticky {
  position: sticky; top: 0;
  height: 100svh; min-height: 560px;
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* The section after the hero rides up over it like a sheet */
.section--first {
  position: relative; z-index: 2;
  margin-top: -14svh;
  background: var(--ink);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.35);
}
.no-js .hero { height: auto; }
.no-js .hero__sticky { position: relative; }
.no-js .section--first { margin-top: 0; border-radius: 0; box-shadow: none; }

.hero__media {
  position: absolute; inset: 0; z-index: 0;
  background: var(--ink) url("../img/hero-poster.jpg") center / cover no-repeat;
}
.hero__media canvas { width: 100%; height: 100%; display: block; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(14,14,16,0.55) 0%, rgba(14,14,16,0.15) 35%, rgba(14,14,16,0.35) 70%, rgba(14,14,16,0.92) 100%);
}
@media (min-width: 900px) {
  .hero__media::after {
    background:
      linear-gradient(to right, rgba(14,14,16,0.94) 0%, rgba(14,14,16,0.86) 30%, rgba(14,14,16,0.5) 52%, rgba(14,14,16,0.08) 70%, rgba(14,14,16,0) 100%),
      linear-gradient(to bottom, rgba(14,14,16,0.45) 0%, rgba(14,14,16,0.05) 35%, rgba(14,14,16,0.25) 70%, rgba(14,14,16,0.92) 100%);
  }
}

.hero__content {
  position: relative; z-index: 1;
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 84px; padding-bottom: clamp(18px, 3.5vh, 44px);
  /* drifts up and softens as the hero pin runs out (--p is 0 without JS) */
  transform: translate3d(0, calc(var(--p) * -16svh), 0);
  opacity: calc(1 - var(--p) * 0.4);
  will-change: transform, opacity;
}

.hero__q {
  font-family: var(--font-display);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em;
  font-size: clamp(46px, 12vw, 124px);
  max-width: 12ch;
  line-height: 0.92;
  margin-bottom: clamp(10px, 1.6vh, 18px);
}
.hero__q .w { display: inline-block; }

.hero__sub {
  font-size: clamp(15px, 1.05vw + 10px, 19px);
  color: var(--cream-soft);
  max-width: 44ch;
  margin-bottom: clamp(18px, 3.2vh, 40px);
}

/* --------------------------------------------------------------------------
   Doors
   -------------------------------------------------------------------------- */

.doors {
  display: grid; gap: 12px;
}
@media (min-width: 900px) {
  .doors { grid-template-columns: 1fr 1fr; gap: 20px; }
}

.door {
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(20, 20, 23, 0.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: clamp(14px, 2vw, 26px) clamp(16px, 2.2vw, 28px);
  display: grid; gap: 10px;
  transition: border-color 500ms var(--ease), background 500ms var(--ease);
}
.door:hover, .door:focus-within {
  border-color: rgba(217, 164, 65, 0.45);
  background: rgba(22, 22, 25, 0.82);
}

/* Ambient footage behind each door — desktop only, fades in when the file exists */
.door__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; pointer-events: none;
  transition: opacity 1400ms var(--ease);
}
.door__bg.is-live { opacity: 0.22; }
.door > :not(.door__bg) { position: relative; z-index: 1; }

.door__statement {
  font-family: var(--font-display);
  font-weight: 600; letter-spacing: 0.005em;
  font-size: clamp(22px, 2.2vw + 8px, 34px);
  line-height: 1.05;
}
.door__statement::before {
  content: "“"; color: var(--accent); margin-right: 2px;
}
.door__statement::after {
  content: "”"; color: var(--accent); margin-left: 2px;
}
.door__line {
  font-size: 15px; color: var(--cream-soft); max-width: 48ch;
}
.door__row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 4px; flex-wrap: wrap;
}
.door__who {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--cream-mute);
}
.door__who img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line);
}
.door__who b { color: var(--cream-soft); font-weight: 500; }
.door__cap {
  font-size: 12.5px; color: var(--cream-mute); letter-spacing: 0.01em;
}

@media (max-width: 899px) {
  .door__cap { display: none; }         /* keeps both doors on the first phone screen */
  .door { gap: 8px; }
  .door__row { flex-wrap: nowrap; }
  .door__who { flex-shrink: 0; }
  .door__who span { white-space: nowrap; }
  .btn { font-size: 14px; padding: 11px 15px; }
  .door__row { gap: 10px; }
  .door__who { gap: 8px; font-size: 13px; }
}
@media (max-height: 700px) and (max-width: 899px) {
  .door__line { display: none; }        /* very short phones: statement + button still fit */
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: var(--accent-ink);
  text-decoration: none; font-weight: 600; letter-spacing: 0.02em;
  font-size: 15px; padding: 12px 18px; border-radius: 999px;
  min-height: 44px; white-space: nowrap;
  transition: transform 500ms var(--ease), background 500ms var(--ease), box-shadow 500ms var(--ease);
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { background: #e4b358; box-shadow: 0 0 0 6px var(--accent-soft); }
.btn:active { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding-block: clamp(64px, 9vw, 128px); scroll-margin-top: 72px; }
/* Sales pages: a third less air between sections so the next one is visible sooner (Angelo, Sept 19) */
main:has(.sp-hero) .section { padding-block: clamp(48px, 6vw, 88px); }
[id] { scroll-margin-top: 72px; }
.section + .section { border-top: 1px solid var(--line); }

.kicker {
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500;
  font-size: 13px; color: var(--accent);
  margin-bottom: 14px;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.005em;
  font-size: clamp(34px, 5.2vw, 72px);
  line-height: 0.96;
  margin-bottom: clamp(20px, 3vw, 36px);
}
.lede { color: var(--cream-soft); font-size: clamp(17px, 1.1vw + 10px, 20px); max-width: 62ch; }

/* How we work */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  counter-reset: s;
}
@media (min-width: 900px) { .steps { grid-template-columns: repeat(5, 1fr); gap: 16px; } }
.steps li {
  counter-increment: s;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 18px 20px;
  background: var(--ink-2);
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  display: block;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  letter-spacing: 0.12em; color: var(--accent); margin-bottom: 10px;
}
.steps b { display: block; font-weight: 600; font-size: 17px; margin-bottom: 6px; line-height: 1.25; }
.steps span { color: var(--cream-soft); font-size: 15px; line-height: 1.5; }

/* Who we are */
.who { display: grid; gap: 28px; }
@media (min-width: 900px) { .who { grid-template-columns: 1fr 1fr; gap: 48px; } }
.person { display: grid; gap: 14px; align-content: start; }
.person__head { display: flex; align-items: center; gap: 14px; }
.person__head img {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line);
}
.person__name {
  font-family: var(--font-display); font-weight: 600; font-size: 26px; text-transform: uppercase; letter-spacing: 0.01em;
}
.person__role { font-size: 14px; color: var(--cream-mute); }
.person p { color: var(--cream-soft); font-size: 16.5px; max-width: 52ch; }
.person a { justify-self: start; color: var(--cream); text-decoration: none; font-size: 15px; border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
/* The offer's name inside each bio, so it reads as a name (and a door), not a phrase */
.person p .offer-name {
  font-size: inherit; font-weight: 500; color: var(--cream);
  border-bottom: 0; text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  transition: text-decoration-color 400ms var(--ease);
}
.person p .offer-name:hover { text-decoration-color: #fff; }
/* Option C: the name lights up once as the bio comes into view, then settles to a soft glow.
   Fires after the card's own fade-in (--dur) so the reader is already on the paragraph. */
@keyframes offer-glow {
  0%   { color: var(--cream); text-shadow: 0 0 0 rgba(217, 164, 65, 0); }
  35%  { color: #ffe6b3; text-shadow: 0 0 22px rgba(217, 164, 65, 0.95), 0 0 6px rgba(217, 164, 65, 0.7); }
  100% { color: #fff; text-shadow: 0 0 12px rgba(217, 164, 65, 0.55), 0 0 1px rgba(217, 164, 65, 0.4); }
}
.person.reveal.in p .offer-name { animation: offer-glow 2400ms var(--ease) 700ms both; }
.no-js .person p .offer-name { color: #fff; text-shadow: 0 0 12px rgba(217, 164, 65, 0.55), 0 0 1px rgba(217, 164, 65, 0.4); }

.textlink { color: var(--cream); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px; }

/* Welcome video slot — hidden until footage exists */
.video-slot[hidden] { display: none !important; }
.video-slot { margin-top: 40px; }
.video-slot__frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--ink-2);
}
.video-slot__frame img { width: 100%; height: 100%; object-fit: cover; }
.video-slot__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--cream);
}
.video-slot__play span {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(14,14,16,0.7); padding: 12px 18px; border-radius: 999px; font-weight: 600;
}
.video-slot__frame iframe, .video-slot__frame video { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Endorsements — built and hidden */
.leaders[hidden] { display: none !important; }
.cards { display: grid; gap: 16px; }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { border: 1px solid var(--line); border-radius: 12px; padding: 22px; background: var(--ink-2); display: grid; gap: 14px; }
.card blockquote { margin: 0; font-size: 17px; color: var(--cream); line-height: 1.5; }
.card__who { display: flex; align-items: center; gap: 12px; color: var(--cream-mute); font-size: 14px; }
.card__who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.card__who b { display: block; color: var(--cream-soft); font-weight: 500; }

/* Doors again */
.again .doors { margin-top: 8px; }
.again .door__line, .again .door__cap { display: none; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--line);
  padding-block: 36px 44px;
  color: var(--cream-mute); font-size: 14px;
}
.foot .wrap { display: grid; gap: 14px; }
@media (min-width: 900px) { .foot .wrap { grid-template-columns: 1fr auto; align-items: start; } }
.foot__brand b { display: block; color: var(--cream-soft); font-weight: 500; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot nav a { color: var(--cream-soft); text-decoration: none; }
.foot nav a:hover { color: var(--cream); }
.foot nav a[hidden] { display: none; }
.foot__note { grid-column: 1 / -1; font-size: 13px; color: var(--cream-mute); }

/* --------------------------------------------------------------------------
   Motion — slow, deliberate; nothing bounces
   -------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.in { opacity: 1; transform: none; }

.hero__q .w { opacity: 0; transform: translateY(0.35em); transition: opacity 1000ms var(--ease), transform 1000ms var(--ease); }
.js-ready .hero__q .w { opacity: 1; transform: none; }
.js-ready .hero__q .w:nth-child(1) { transition-delay: 120ms; }
.js-ready .hero__q .w:nth-child(2) { transition-delay: 260ms; }
.js-ready .hero__q .w:nth-child(3) { transition-delay: 400ms; }
.js-ready .hero__q .w:nth-child(4) { transition-delay: 540ms; }

/* Without JS, or with reduced motion, everything is simply visible. */
.no-js .reveal, .no-js .hero__q .w { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero__q .w { opacity: 1 !important; transform: none !important; transition: none !important; }
  .door__bg { display: none; }
  .hero { height: auto; --p: 0 !important; }
  .hero__sticky { position: relative; }
  .hero__media canvas { display: none; }
  .hero__content { transform: none; opacity: 1; }
  .section--first { margin-top: 0; border-radius: 0; box-shadow: none; }
  .person p .offer-name { animation: none !important; color: #fff; text-shadow: 0 0 12px rgba(217, 164, 65, 0.55); }
}

/* ==========================================================================
   SALES PAGE — /decision-clarity (and, later, /no-longer-bracing)
   Same tokens and primitives as the homepage; only the page-level blocks
   below are new. Prefix: .sp-
   ========================================================================== */

.top nav .top__apply { color: var(--cream); border-bottom: 1px solid var(--accent); padding-bottom: 1px; }

/* Hero — a still (ambient clip on desktop) behind the headline, no orbit */
.sp-hero { position: relative; min-height: 88svh; display: flex; align-items: flex-end; overflow: hidden; }
.sp-hero__media { position: absolute; inset: 0; z-index: 0; background: var(--ink) url("../img/crossroads-poster.jpg") center 30% / cover no-repeat; }
.sp-hero__media::before { content: ""; position: absolute; inset: 0; background: inherit; }
.sp-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0; transition: opacity 1600ms var(--ease); }
.sp-hero__media video.is-live { opacity: 1; }
.sp-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(14,14,16,0.55) 0%, rgba(14,14,16,0.25) 35%, rgba(14,14,16,0.72) 70%, rgba(14,14,16,1) 100%);
}
@media (min-width: 900px) {
  .sp-hero__media::after {
    background:
      linear-gradient(to right, rgba(14,14,16,0.92) 0%, rgba(14,14,16,0.78) 30%, rgba(14,14,16,0.30) 50%, rgba(14,14,16,0.04) 66%, rgba(14,14,16,0) 100%),
      linear-gradient(to bottom, rgba(14,14,16,0.30) 0%, rgba(14,14,16,0) 35%, rgba(14,14,16,0.30) 75%, rgba(14,14,16,1) 100%);
  }
  /* Desktop: slide the footage right and zoom a touch so Angelo sits beside the headline, not behind it.
     The poster (::before) and the video get the same geometry, so the fade-in doesn't jump. */
  .sp-hero__media::before,
  .sp-hero__media video { transform: translateX(6%) scale(1.15); transform-origin: 0 0; }
  .sp-hero__media::before { background-position: 0 0; }
  .sp-hero__media video { object-position: 0 0; }
}
.sp-hero__content { position: relative; z-index: 1; padding-top: 110px; padding-bottom: clamp(28px, 5vh, 56px); }
.sp-hero__kicker { font-size: 13.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.sp-hero__h1 {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.005em;
  font-size: clamp(36px, 5.6vw, 68px); line-height: 0.95; max-width: 14ch;
}
.sp-hero__sub { margin-top: clamp(16px, 2.4vh, 26px); font-size: clamp(16px, 1.05vw + 10px, 20px); color: var(--cream-soft); max-width: 52ch; }
.sp-hero__cta { margin-top: clamp(22px, 3.4vh, 36px); display: grid; gap: 10px; justify-items: start; }
.sp-hero__cta small { font-size: 13.5px; color: var(--cream-mute); }

/* Restraint strip — the limits, high on the page */
.sp-limits { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ink-2); }
.sp-limits ul { list-style: none; margin-block: 0; padding: 18px 0; display: grid; gap: 10px; } /* margin-block, not margin: the ul is also .wrap, whose auto side margins center it */
.sp-limits li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--cream-soft); }
.sp-limits li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 9px; }
@media (min-width: 900px) { .sp-limits ul { grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 22px 0; } }

/* Prose */
.sp-prose { display: grid; gap: 18px; max-width: 64ch; color: var(--cream-soft); font-size: clamp(17px, 0.5vw + 14px, 19px); line-height: 1.6; }
.sp-prose p strong { color: var(--cream); font-weight: 500; }
.sp-prose em { color: var(--cream); font-style: italic; }
.sp-prose .sp-ref { color: var(--cream-mute); font-size: 0.9em; }
.sp-h2 { max-width: 20ch; margin-bottom: clamp(18px, 2.6vw, 30px); }
.sp-pull {
  margin: clamp(28px, 4vw, 44px) 0 0; padding-left: 20px; border-left: 2px solid var(--accent);
  font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.08; color: var(--cream); max-width: 22ch;
}

/* Separate-before-you-decide pairs */
.sp-pairs { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 640px; }
.sp-pairs li { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; }
.sp-pairs li span:first-child { color: var(--cream); text-align: right; }
.sp-pairs li span:last-child { color: var(--cream-soft); }
.sp-pairs li i { font-style: normal; color: var(--accent); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.sp-pairs li.is-key span:first-child, .sp-pairs li.is-key span:last-child { font-weight: 500; color: var(--cream); }

/* Session arc — vertical timeline */
.sp-arc { list-style: none; margin: 0; padding: 0; counter-reset: arc; display: grid; gap: 0; }
.sp-arc li { counter-increment: arc; position: relative; padding: 18px 0 18px 58px; border-top: 1px solid var(--line); }
.sp-arc li:last-child { border-bottom: 1px solid var(--line); }
.sp-arc li::before {
  content: counter(arc, decimal-leading-zero); position: absolute; left: 0; top: 20px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.06em; color: var(--accent);
}
.sp-arc b { display: block; font-weight: 600; font-size: 18px; color: var(--cream); margin-bottom: 4px; }
.sp-arc span { color: var(--cream-soft); font-size: 16px; line-height: 1.5; display: block; max-width: 60ch; }
.sp-map { margin-top: clamp(26px, 4vw, 40px); border: 1px solid rgba(217,164,65,0.35); border-radius: 14px; padding: 22px 24px; background: var(--ink-2); max-width: 640px; }
.sp-map b { display: block; font-weight: 600; color: var(--cream); margin-bottom: 6px; }
.sp-map p { color: var(--cream-soft); font-size: 16px; }

/* Two-column section layout on desktop (prose beside a list/aside) */
@media (min-width: 900px) {
  .sp-cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
}

/* Demonstration — presented as a sample Map */
.sp-demo { display: grid; gap: 16px; }
.sp-demo__label {
  display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cream); background: rgba(217,164,65,0.14); border: 1px solid rgba(217,164,65,0.4); border-radius: 999px; padding: 8px 14px; justify-self: start;
}
.sp-demo__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.sp-demo__note { color: var(--cream-mute); font-size: 14.5px; max-width: 60ch; }
.sp-demo__card { border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2); padding: clamp(20px, 3vw, 32px); display: grid; gap: 22px; }
.sp-demo__part { display: grid; gap: 8px; padding-top: 22px; border-top: 1px solid var(--line); }
.sp-demo__part:first-child { padding-top: 0; border-top: 0; }
.sp-demo__part h3 { font-size: 17px; font-weight: 600; color: var(--cream); display: flex; gap: 12px; align-items: baseline; }
.sp-demo__part h3 i { font-style: normal; font-family: var(--font-display); color: var(--accent); font-size: 14px; letter-spacing: 0.06em; }
.sp-demo__part p { color: var(--cream-soft); font-size: 16px; line-height: 1.55; max-width: 66ch; }
.sp-demo__part p em { color: var(--cream); }
.sp-demo__result { border-color: rgba(217,164,65,0.4); }
.sp-demo__result p { color: var(--cream); }

/* Who guides you */
.sp-guide { display: grid; gap: 28px; }
.sp-guide__portrait { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; max-width: 420px; background: var(--ink-2); }
.sp-guide__portrait img { width: 100%; height: 100%; object-fit: cover; }
.sp-guide__portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,14,16,0.55), rgba(14,14,16,0) 45%); }
.sp-guide__cap { position: absolute; left: 18px; bottom: 16px; z-index: 1; font-size: 13.5px; color: var(--cream-soft); }
.sp-guide__cap b { display: block; color: var(--cream); font-weight: 600; font-size: 16px; }
.sp-facts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.sp-facts li { font-size: 14.5px; color: var(--cream-mute); padding-left: 16px; position: relative; }
.sp-facts li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 1px; background: var(--accent); }
.sp-promises { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.sp-promises li { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); font-size: 15.5px; color: var(--cream-soft); line-height: 1.5; }
.sp-promises li b { color: var(--cream); font-weight: 500; }
@media (min-width: 900px) {
  .sp-guide { grid-template-columns: 340px minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
  .sp-guide__portrait { max-width: none; }
  /* The whole left column (portrait + facts) sticks together; sticking only the portrait let the facts scroll up into it */
  .sp-guide > :first-child { position: sticky; top: 96px; }
}

/* Self-check */
.sp-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 680px; }
.sp-check li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); font-size: 16.5px; color: var(--cream); line-height: 1.45; }
.sp-check li::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; border: 1.5px solid var(--accent); border-radius: 5px; }
.sp-check__after { margin-top: 18px; color: var(--cream-soft); }

/* For / not for */
.sp-fit { display: grid; gap: 22px; }
.sp-fit > div { border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 3vw, 28px); background: var(--ink-2); }
.sp-fit h3 { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.sp-fit p, .sp-fit li { color: var(--cream-soft); font-size: 16px; line-height: 1.55; }
.sp-fit ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.sp-fit li::marker { color: var(--accent); }
.sp-fit li b { color: var(--cream); font-weight: 500; }
@media (min-width: 900px) { .sp-fit { grid-template-columns: 1fr 1fr; gap: 24px; } }

/* Included */
.sp-incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.sp-incl li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; color: var(--cream-soft); line-height: 1.5; }
.sp-incl li b { color: var(--cream); font-weight: 500; }
.sp-incl li::before { content: ""; width: 16px; height: 16px; margin-top: 5px; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent); }
.sp-incl__note { margin-top: 14px; font-size: 14px; color: var(--cream-mute); }

/* Price */
.sp-price { border: 1px solid rgba(217,164,65,0.35); border-radius: 18px; background: var(--ink-2); padding: clamp(24px, 4vw, 40px); display: grid; gap: 18px; }
.sp-price__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(48px, 7vw, 84px); line-height: 1; letter-spacing: 0.005em; }
.sp-price__num small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 15px; color: var(--cream-mute); letter-spacing: 0; margin-top: 8px; }
.sp-price__alt { font-size: 17px; color: var(--cream); }
.sp-price__alt b { font-weight: 600; }
.sp-price p { color: var(--cream-soft); font-size: 16px; max-width: 60ch; }
@media (min-width: 900px) { .sp-price { grid-template-columns: auto 1fr; gap: 40px; align-items: start; } .sp-price__text { display: grid; gap: 14px; } }

/* FAQ */
.sp-faq { border-top: 1px solid var(--line); max-width: 760px; }
.sp-faq details { border-bottom: 1px solid var(--line); }
.sp-faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font-size: 17.5px; font-weight: 500; color: var(--cream); line-height: 1.35; }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; color: var(--accent); font-size: 22px; font-weight: 400; transition: transform 300ms var(--ease); }
.sp-faq details[open] summary::after { transform: rotate(45deg); }
.sp-faq details p { padding: 0 0 20px; color: var(--cream-soft); font-size: 16px; line-height: 1.55; max-width: 64ch; }

/* Close */
.sp-close { text-align: left; }
.sp-close .sp-h2 { max-width: 16ch; font-size: clamp(38px, 5.6vw, 72px); }
.sp-close__cta { margin-top: clamp(22px, 3vw, 34px); display: grid; gap: 12px; justify-items: start; }
.sp-close__cta small { font-size: 14px; color: var(--cream-mute); max-width: 44ch; }

/* Testimonials — built, hidden until the first permissioned one */
.sp-testimonials[hidden] { display: none !important; }
.sp-testimonials .sp-frame { font-size: 15px; color: var(--cream-mute); margin-bottom: 22px; max-width: 60ch; }

/* Phones and small tablets (under 900px) — desktop rules above are untouched.
   The footage becomes a band across the top 62% of the hero so the frame is cropped far less,
   the figure is centered with --hero-x (set per page: Angelo sits left of center, Maralle right),
   and the band's lower edge fades to ink under the headline. The clip plays here too (site.js). */
@media (max-width: 899px) {
  .sp-hero__media { --hero-x: 40%; bottom: auto; height: 62%; background-position: var(--hero-x) 18%; }
  .sp-hero__media::before { background-position: var(--hero-x) 18%; }
  .sp-hero__media video { object-position: var(--hero-x) 18%; }
  /* Homepage poster (shown only until the first orbit frame draws): match the pulled-back framing */
  .hero__media { background-size: 152% auto; background-position: center 6%; }
}
@media (prefers-reduced-motion: reduce) { .sp-hero__media video { display: none; } }

/* Editorial two-column: heading stays on the left while the prose scrolls (desktop) */
@media (min-width: 900px) {
  .sp-cols--head { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .sp-cols--head .sp-head { position: sticky; top: 96px; }
  .sp-cols--head .sp-h2 { margin-bottom: 0; }
}