/* Hallmark · macrostructure: Trust-Ladder Funnel · genre: editorial
 * theme: Jacky Brand V2 (locked design system — ../readme.md, ../guidelines/source-v2-style-guide.html)
 * paper: cream #FAF9F6 (light band) · display: geometric-sans (Poppins) · accent: sky #B9F4FF (cool)
 * nav: sticky masthead + pill CTA · footer: statement + ink band
 * enrichment: none (typography + hand-drawn SVG motif only)
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 * NOTE: theme is NOT rotated. This project ships a locked brand system; consistency
 * outweighs Hallmark's diversification rule (see SKILL.md § design.md-managed projects).
 */

/* ===========================================================================
   0 · TOKEN EXTENSION
   --accent-ink (#0284C7) is the system's "readable blue", but it measures
   4.1:1 on cream/white — just under WCAG AA for body-size text. This adds one
   darker step for small text and micro-labels. --accent-ink is still correct
   for icons, rules and large type; this is only for text under 18px.
   ======================================================================== */

/* ===========================================================================
   1 · RESET + BASE
   ======================================================================== */

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* height:auto stops the intrinsic `height` attribute (kept for CLS) from
   beating the CSS aspect-ratio that actually governs the crop. */
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Focus is never animated — it must appear the instant focus lands. */
:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.on-ink :focus-visible { outline-color: var(--accent); }

.skip-link {
  position: absolute;
  left: var(--space-6);
  top: -100px;
  z-index: 100;
  background: var(--text-primary);
  color: #fff;
  padding: var(--space-5) var(--space-8);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { top: var(--space-6); }

.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;
}

/* ===========================================================================
   2 · LAYOUT PRIMITIVES
   ======================================================================== */

.wrap {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}
.wrap--narrow { max-width: 860px; }
.wrap--tight  { max-width: 720px; }

.section { padding-block: clamp(40px, 5.5vw, 56px); }
.section--tall { padding-block: clamp(52px, 7vw, 72px); }
.section--cream { background: var(--bg-base); }
.section--white { background: var(--bg-white); }
.section--alt   { background: var(--bg-alt); }
.section--ink   { background: var(--bg-contrast); color: var(--text-on-contrast); }

/* ===========================================================================
   3 · TYPOGRAPHY
   ======================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: var(--text-eyebrow-transform);
  color: var(--text-eyebrow);
}
.eyebrow::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  flex-shrink: 0;
}
.eyebrow--bare::before { display: none; }
.on-ink .eyebrow { color: var(--accent); }

/* Display type is always roman. Emphasis comes from the drawn motif, never italics. */
.h1 {
  font-size: clamp(32px, 6.4vw, 56px);
  font-weight: var(--text-h1-weight);
  letter-spacing: var(--text-h1-tracking);
  line-height: 1.1;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
.h2 {
  font-size: clamp(27px, 4.6vw, 40px);
  font-weight: var(--text-h2-weight);
  letter-spacing: -0.9px;
  line-height: 1.18;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
.h3 {
  font-size: clamp(19px, 2.4vw, var(--text-h3-size));
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-leading);
  letter-spacing: -0.3px;
  text-wrap: pretty;
}
.lede {
  font-size: clamp(16px, 2vw, var(--text-body-size));
  line-height: var(--text-body-leading);
  color: var(--text-muted);
  text-wrap: pretty;
}
.on-ink .lede { color: rgba(250, 249, 246, 0.72); }
.section--alt > .wrap .lede,
.section--alt .section-head .lede { color: var(--text-eyebrow); }

.section-head { display: flex; flex-direction: column; gap: var(--space-5); }
.h2__aside {
  display: block;
  margin-top: var(--space-4);
  font-size: 0.42em;
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--text-eyebrow);
}
.section-head--center { align-items: center; text-align: center; margin-inline: auto; }
.section-head .lede { max-width: 620px; }

/* ===========================================================================
   4 · BRAND MOTIFS — hand-drawn circle + underline
   Each is a 4–5px sky stroke on an imperfect path. One per section, maximum.
   ======================================================================== */

.circled { position: relative; display: inline-block; padding: 2px 6px; }
.circled__art {
  position: absolute;
  top: -6px; left: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 12px);
  overflow: visible;
  z-index: 0;
  pointer-events: none;
}
.circled__art path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  transition: stroke-dashoffset var(--dur-draw) var(--ease-inout) 300ms;
}
.circled.is-drawn .circled__art path { stroke-dashoffset: 0; }
.circled__text { position: relative; z-index: 1; }

.underlined { position: relative; display: inline-block; }
.underlined__text { position: relative; z-index: 1; }
.underlined__art {
  position: absolute;
  left: 0; bottom: -0.16em;
  width: 100%; height: 0.3em;
  overflow: visible;
  z-index: 0;
  pointer-events: none;
}
.underlined__art path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 210;
  stroke-dashoffset: 210;
  transition: stroke-dashoffset var(--dur-draw) var(--ease-inout) 260ms;
}
.underlined.is-drawn .underlined__art path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .circled__art path,
  .underlined__art path { stroke-dashoffset: 0; transition: none; }
}

/* ===========================================================================
   5 · REVEAL
   ======================================================================== */

/* Hidden-until-revealed is gated behind `.js` (set by app.js on <html>) so that a
   blocked or broken script leaves the page fully readable rather than blank. */
.js .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================================
   6 · BUTTONS — pill, verb-first, trailing arrow (brand rule)
   ======================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--button-padding);
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--text-button-size);
  font-weight: var(--text-button-weight);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: var(--accent);
  color: var(--text-on-accent);
  transition:
    background var(--dur-fast) var(--ease-inout),
    transform var(--dur-fast) var(--ease-inout),
    opacity var(--dur-fast) var(--ease-inout);
}
.btn__arrow { flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn:active { transform: scale(var(--press-scale)); }
.btn__wave { flex-shrink: 0; display: inline-flex; transform-origin: 70% 85%; }
.btn__wave svg { width: 1.45em; height: 1.45em; overflow: visible; transform: rotate(12deg); }
.btn--wave:hover .btn__wave { animation: btnWave 1s var(--ease-inout) infinite; }
@keyframes btnWave {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(16deg); }
  30% { transform: rotate(-10deg); }
  45% { transform: rotate(14deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--wave:hover .btn__wave { animation: none; }
}
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  background: var(--accent);
}

.btn--dark { background: var(--text-primary); color: #fff; }
.btn--dark:hover { background: var(--bg-contrast); }

/* Secondary action: outlined, so it reads as the lower-priority of a pair
   without introducing a second fill colour. */
.btn--outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}
.btn--outline:hover {
  background: var(--bg-white);
  border-color: var(--accent-ink);
  color: var(--accent-ink);
}

.btn--sm { padding: 11px 22px; font-size: 13px; }
.btn--herocta { padding: 12px 24px; font-size: 14px; min-height: 44px; }
.btn--md { padding: var(--button-padding-sm); font-size: 15px; }
.btn--block { width: 100%; }

@media (max-width: 420px) {
  .btn { padding: 18px 28px; font-size: 15px; }
}

/* ===========================================================================
   7 · BADGES
   ======================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 13px;
  font-weight: var(--weight-medium);
  line-height: 1;
  white-space: nowrap;
}
.badge--alt { background: var(--bg-alt); color: var(--text-muted); }
.badge--wash { background: var(--accent-wash); color: var(--text-primary); }
.badge__dot {
  width: 7px; height: 7px;
  border-radius: var(--radius-pill);
  background: var(--text-primary);
  flex-shrink: 0;
}

/* Live-spots badge — the one place a pulse is allowed, because scarcity is real. */
.spots {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 8px 16px 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  font-size: 13px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.spots__pulse { position: relative; width: 8px; height: 8px; flex-shrink: 0; }
.spots__pulse::before,
.spots__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-ink);
}
.spots__pulse::before { animation: ds-ping 2s var(--ease-out) infinite; }
.spots__count { font-weight: var(--weight-semibold); }
.spots__period { color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .spots__pulse::before { animation: none; }
}

.stars { display: inline-flex; gap: 2px; color: var(--star); font-size: 15px; line-height: 1; }

/* ===========================================================================
   8 · NAV
   ======================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: transparent;
  padding: 14px var(--container-gutter);
  transition: padding var(--dur-base) var(--ease-out);
}
/* The bar itself is a floating white pill inset from the page edges, so the
   cream hero reads as one continuous field behind it. */
.nav__inner {
  background: var(--bg-white);
  border-radius: var(--radius-pill);
  padding: 12px var(--space-7);
  box-shadow: 0 1px 2px rgba(16, 18, 22, .04), 0 8px 24px rgba(16, 18, 22, .05);
  transition: padding var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.nav.is-stuck { padding-block: 10px; }
.nav.is-stuck .nav__inner {
  padding-block: 9px;
  box-shadow: 0 1px 2px rgba(16, 18, 22, .05), 0 10px 30px rgba(16, 18, 22, .09);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}
.nav__mark {
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: font-size var(--dur-base) var(--ease-out);
}
.nav.is-stuck .nav__mark { font-size: 16px; }
.nav__dot {
  margin-right: var(--space-4);
  width: 11px; height: 11px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  flex-shrink: 0;
}
.nav__links { display: flex; gap: var(--space-9); font-size: 14px; color: var(--text-muted); }
.nav__link {
  position: relative;
  padding-bottom: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  border-radius: 1px;
  background: var(--text-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover { color: var(--text-primary); }
.nav__link:hover::after { transform: scaleX(1); }

@media (max-width: 860px) {
  .nav__links { display: none; }
}
/* Wordmark drops to "Jacky Ye" so the CTA never gets clipped off the edge. */
@media (max-width: 560px) {
  .nav__inner { gap: var(--space-5); }
  .nav__markrest { display: none; }
  .nav__mark, .nav.is-stuck .nav__mark { font-size: 16px; }
  .nav .btn--sm { padding: 10px 16px; font-size: 13px; gap: var(--space-3); }
}
@media (max-width: 360px) {
  .nav__mark, .nav.is-stuck .nav__mark { font-size: 15px; }
  .nav .btn--sm { padding: 10px 14px; font-size: 12px; }
}

/* ===========================================================================
   9 · HERO
   ======================================================================== */

/* The hero occupies exactly the fold: viewport minus the sticky nav and minus
   the logos strip we want visible underneath it. The VSL is the ONE flexible
   item in the column (flex:1 + min-height:0), so it absorbs whatever vertical
   space the fixed-height text and CTA leave over. That means there is never
   dead space below the CTA, and "make the video bigger" can't push the page
   past the fold — the video can only ever claim what's actually left.
   Tune --hero-media-max to cap how large it may grow on tall screens. */
.hero {
  --hero-media-max: 460px;
  /* One token drives the space on BOTH sides of the CTA block, so the two stay
     equal at any viewport height instead of being hand-tuned to one. */
  --hero-cta-space: clamp(10px, 2.2vh, 22px);
  height: calc(100svh - var(--nav-h) - var(--logos-h));
  min-height: 420px;
  display: flex;
  align-items: stretch;
  /* bottom = --hero-cta-space minus the 4px .logos already contributes on top */
  padding-block: clamp(2px, 0.5vh, 8px) calc(var(--hero-cta-space) - var(--space-1));
}
/* Launch state: no VSL in the hero. The fixed-fold height above exists so the
   video can absorb leftover space; with no video there is no flexible item, so
   that height would strand dead space under the CTA. Content height instead.
   Remove this class from the markup when the VSL goes back in. */
/* No-VSL hero: fills the fold minus the nav and the logos strip, so the only
   thing visible under it is the logos — never the section after. Content is
   centred in that box, and the box collapses to its content on short screens. */
/* Content height, not fold height. Forcing the hero to fill the fold made the
   flex centring split the leftover ~110px evenly above and below the copy,
   which read as dead space at both ends. Hugging the content keeps the rhythm
   between rows intentional and brings the logo strip up under the CTA. */
.hero--novsl {
  height: auto;
  min-height: 0;
  align-items: center;
  padding-block: clamp(20px, 4vh, 44px) 0;
}
/* Vertical rhythm for the no-VSL hero. The base hero packs its rows tight so a
   video can claim the slack; without the video that reads as cramped, so each
   row gets deliberate air that scales with viewport height. */
/* Centred column with deliberate air between each row. The headline is the
   anchor: everything above it is small and tight, everything below steps down
   in weight, and the largest gap sits just before the CTA so the button reads
   as the destination rather than another line of copy. */
.hero--novsl .hero__inner {
  gap: 0;
  max-width: 1000px;
  align-items: center;
  text-align: center;
}
.hero--novsl .hero__meta {
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: 0;
}
.hero--novsl .hero__title {
  margin-block: clamp(14px, 2.2vh, 26px) 0;
  font-size: clamp(34px, 5.4vw, 64px);
  max-width: 17ch;
}
/* Centred, the headline must be free to wrap; the nowrap rule below exists for
   the left-aligned variant, where line 1 is a deliberate typographic unit. */
.hero--novsl .hero__line1 { white-space: normal; }
.hero--novsl .hero__br { display: none; }
.hero--novsl .hero__lede {
  margin-top: clamp(14px, 2.6vh, 28px);
  margin-inline: auto;
  max-width: 54ch;
  font-size: clamp(16px, 1.5vw, 20px);
}
.hero--novsl .hero__actions { margin-top: clamp(20px, 3.6vh, 38px); justify-content: center; }
.hero--novsl .hero__foot { margin-top: clamp(10px, 1.8vh, 18px); justify-content: center; }

.hero__inner {
  max-width: 1040px;
  margin-inline: auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: clamp(5px, 1vh, 11px);
}
/* flex:1 lets it grow into slack and shrink when the viewport is short;
   min-height:0 is required or the flex item refuses to shrink below content. */
.hero__media {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__meta .eyebrow { font-size: 10px; }
.hero__meta .spots { font-size: 11px; padding: 6px 13px 6px 10px; }
.hero__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: 0;
}
.hero__lede { margin: 0; max-width: 74ch; white-space: normal; font-size: clamp(15px, 1.7vw, 19px); }
.nav .btn--sm { padding: 9px 18px; font-size: 12px; }
.hero__ctahint { margin-top: var(--space-3); font-size: 12px; color: var(--text-muted); }
/* Primary + secondary side by side; wraps to a stack on narrow screens rather
   than shrinking the buttons below a comfortable tap target. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: clamp(10px, 2.4vh, 24px);
}
/* Scarcity + booking time sit UNDER the buttons: the headline earns attention
   first, the constraint lands once the visitor already wants in. */
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-6);
  margin-top: clamp(12px, 2.6vh, 26px);
}
.hero__foot .hero__ctahint { margin-top: 0; }

/* The rotating role flips on a shared baseline; width animates so the line never jumps. */
.rotator {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  white-space: nowrap;
  perspective: 900px;
  transition: width var(--dur-base) var(--ease-out);
}
.rotator__word {
  display: inline-block;
  white-space: nowrap;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
}
.rotator__word.is-out { animation: ds-flip-out 320ms var(--ease-inout) both; }
.rotator__word.is-in  { animation: ds-flip-in 420ms var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .rotator { width: auto !important; transition: none; }
  .rotator__word.is-out, .rotator__word.is-in { animation: none; }
}

.hero__proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-9);
  font-size: 14px;
  color: var(--text-muted);
  text-wrap: pretty;
}
.hero__title .circled { white-space: nowrap; }
.hero__line1 { white-space: normal; }
@media (min-width: 700px) { .hero__line1 { white-space: nowrap; } }
.hero__title { font-size: clamp(30px, 5.3vw, 62px); }
.hero__br { display: none; }
@media (min-width: 760px) { .hero__br { display: inline; } }

/* ===========================================================================
   10 · LOGO MARQUEE
   No logo files were supplied — company names render as typographic wordmarks
   rather than fabricated marks. Swap in real SVGs when licensed.
   ======================================================================== */

.logos { padding-block: clamp(18px, 3vh, 34px) clamp(18px, 3vh, 34px); }
.logos__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.logos__lede {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
  text-wrap: pretty;
}
.logos__lede--accent {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}
.marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: ds-marquee 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(40px, 7vw, var(--space-14));
  padding-right: clamp(40px, 7vw, var(--space-14));
}
.wordmark {
  flex-shrink: 0;
  font-size: clamp(15px, 1.9vw, 18px);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.5px;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out);
}
.marquee:hover .wordmark { color: var(--text-primary); }

.logo {
  flex-shrink: 0;
  height: var(--logo-h, 28px);
  width: auto;
  max-width: 190px;
  object-fit: contain;
  /* Desaturated so ten different brand palettes read as one quiet strip;
     lifts to full colour when the visitor hovers (which also pauses the scroll). */
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.marquee:hover .logo { filter: grayscale(0); opacity: 1; }
@media (max-width: 700px) {
  .logo { height: calc(var(--logo-h, 28px) * 0.86); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__group:last-child { display: none; }
  .marquee__group { flex-wrap: wrap; justify-content: center; row-gap: var(--space-6); padding-right: 0; }
}

/* ===========================================================================
   11 · FIT — who this is for / who it isn't
   ======================================================================== */

.fit__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-8);
  margin-top: var(--space-10);
}
.fit__col {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, var(--space-10));
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.fit__col--yes {
  background: linear-gradient(168deg, #F4FDFF 0%, var(--accent-wash) 58%, #DFF7FE 100%);
  box-shadow: var(--shadow-accent-rest);
}
.fit__col--no {
  background: linear-gradient(168deg, #FBFBFC 0%, var(--bg-alt) 60%, #EFF0F3 100%);
  box-shadow: 0 18px 40px -30px rgba(16, 18, 22, 0.4);
}
.fit__col:hover { transform: translateY(var(--hover-lift)); box-shadow: var(--shadow-lift); }
.fit__flourish {
  position: absolute;
  top: -26px; right: -22px;
  width: 150px; height: 150px;
  opacity: 0.28;
  pointer-events: none;
}
.fit__title {
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-7);
  font-size: clamp(17px, 2.2vw, 20px);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.3px;
}
.fit__col--yes .fit__title { border-bottom: 1px solid var(--accent-line); }
.fit__col--no  .fit__title { border-bottom: 1px solid rgba(16, 18, 22, 0.09); }
.fit__list { display: flex; flex-direction: column; gap: var(--space-5); }
.fit__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-6) var(--space-7);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 1px 2px rgba(16, 18, 22, 0.05);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.fit__item:hover { transform: translateX(5px); background: rgba(255, 255, 255, 0.96); }
.fit__col--yes .fit__item:hover { box-shadow: var(--shadow-accent); }
.fit__col--no  .fit__item:hover { box-shadow: 0 12px 26px -18px rgba(16, 18, 22, 0.5); }
.fit__mark { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }
.fit__mark path, .fit__mark polyline, .fit__mark line {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  transition: stroke-dashoffset var(--dur-base) var(--ease-inout);
}
.fit__col.is-drawn .fit__mark path,
.fit__col.is-drawn .fit__mark polyline,
.fit__col.is-drawn .fit__mark line { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .fit__mark path, .fit__mark polyline, .fit__mark line { stroke-dashoffset: 0; transition: none; }
}

/* ===========================================================================
   12 · RESULTS — the ink band. Loudest moment on the page.
   ======================================================================== */

.results__head { margin-bottom: var(--space-9); }
.results__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
  gap: var(--space-10) var(--space-9);
}
.stat { display: flex; flex-direction: column; gap: var(--space-3); }
.stat__value {
  align-self: flex-start;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--accent);
  font-size: clamp(34px, 5vw, 46px);
  font-weight: var(--weight-bold);
  letter-spacing: -1.2px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: border-bottom-width var(--dur-base) var(--ease-out);
}
.stat:hover .stat__value { border-bottom-width: 5px; }
.stat__label {
  margin-top: 4px;
  max-width: 190px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ===========================================================================
   13 · TIMELINE — "do I have enough experience?"
   ======================================================================== */

/* The whole timeline widget is built by JS. Without it, hide the shell rather
   than leave an empty box — the section heading still explains the point. */
.tl { display: none; flex-direction: column; gap: var(--space-4); }
.js .tl { display: flex; }
.tl__self {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  text-align: center;
  width: fit-content;
  margin-inline: auto;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
  box-shadow: var(--shadow-lift);
}
.tl__self label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 15px;
  font-weight: var(--weight-medium);
}
.tl__input {
  width: 76px;
  padding: 10px 0;
  -moz-appearance: textfield;
  appearance: textfield;
  border: 1.5px solid var(--accent);
  outline: none;
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
  text-align: center;
  font-size: 15px;
  font-weight: var(--weight-semibold);
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tl__input:focus { border-color: var(--accent-ink); box-shadow: var(--shadow-accent-sm); }
.tl__input::-webkit-outer-spin-button,
.tl__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tl__hint { font-size: 13px; color: var(--text-eyebrow); }

.tl__axis {
  position: relative;
  height: 92px;
  padding-inline: 78px;
  border-radius: var(--radius-lg);
  background: var(--accent-wash);
  overflow: hidden;
}
.tl__axislabel {
  position: absolute;
  left: 46px; top: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tl__axislabel span { width: 26px; height: 1px; background: var(--accent-line); }
.tl__axislabel em { font-style: normal; color: var(--accent-ink); font-size: 13px; line-height: 1; }
.tl__track {
  position: absolute;
  left: 46px; right: 46px; top: 29px;
  height: 6px;
  border-radius: 3px;
  background: var(--accent-track);
}
.tl__fill {
  position: absolute;
  top: 29px;
  height: 6px;
  width: 0;
  border-radius: 3px;
  background: var(--accent);
  transition: width 900ms var(--ease-out) 120ms;
}
.tl__tick {
  position: absolute;
  top: 66px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out) 500ms;
}
.tl__axis.is-in .tl__tick { opacity: 1; }
.tl__tick i { display: block; width: 1px; height: 5px; background: var(--accent-line); }
.tl__tick span { font-size: 10.5px; line-height: 1; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tl__edge {
  position: absolute;
  top: 136px;
  max-width: 190px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out) 620ms;
}
.tl__axis.is-in .tl__edge { opacity: 1; }
.tl__edge--start { left: 78px; }
.tl__edge--end { right: 78px; text-align: right; }

.tl__you {
  position: absolute;
  top: 4px;
  z-index: 4;
  transform: translateX(-50%);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--text-primary);
  color: #fff;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  transition: left var(--dur-base) var(--ease-out);
}
.tl__youline {
  position: absolute;
  top: 10px; bottom: 8px;
  width: 2px;
  z-index: 1;
  transform: translateX(-50%);
  opacity: 0.5;
  background: repeating-linear-gradient(to bottom, var(--text-primary) 0 5px, transparent 5px 10px);
  transition: left var(--dur-base) var(--ease-out);
}
.tl__you[hidden], .tl__youline[hidden] { display: none; }

.tl__dot {
  position: absolute;
  top: 32px;
  width: 46px; height: 46px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  z-index: 2;
  background: var(--bg-white);
  color: var(--text-muted-soft);
  font-size: 16px;
  font-weight: var(--weight-bold);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 3px var(--accent-wash), inset 0 0 0 2px var(--accent-line);
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  transition:
    width var(--dur-base) var(--ease-out),
    height var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}
.tl__axis.is-in .tl__dot { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tl__axis.is-in .tl__dot:hover { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 0 3px var(--bg-white), inset 0 0 0 2px var(--accent); }
.tl__dot[aria-selected="true"] {
  width: 62px; height: 62px;
  z-index: 3;
  background-color: var(--accent);
  color: var(--text-on-accent);
  font-size: 21px;
  box-shadow: 0 0 0 5px var(--bg-white), var(--shadow-accent-lg);
}
.tl__axis.is-in .tl__dot[aria-selected="true"]:hover { transform: translate(-50%, -50%) scale(1); }
.tl__ping {
  position: absolute;
  top: 32px;
  width: 62px; height: 62px; max-width: 62px; max-height: 62px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  animation: ds-ping 2.4s var(--ease-out) infinite;
  pointer-events: none;
  z-index: 1;
}

/* Mobile swaps the axis for a scroll-snap chip row — 7 dots on a 320px axis is unusable. */
.tl__chips {
  display: none;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--space-3) var(--space-1) var(--space-6);
  -webkit-overflow-scrolling: touch;
}
.tl__chip {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 10px 16px 10px 10px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tl__chip i {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-white);
  font-style: normal;
  font-size: 13px;
  font-weight: var(--weight-bold);
  background-size: cover;
  background-position: center;
}
.tl__chip[aria-selected="true"] { background: var(--accent); color: var(--text-on-accent); }

.tl__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  padding: clamp(14px, 2vw, 22px);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.tl__panel:hover { box-shadow: var(--shadow-lift); }
.tl__panelgrid {
  min-height: 184px;
  display: grid;
  grid-template-columns: 156px 300px minmax(320px, 1fr);
  gap: var(--space-8);
  align-items: center;
  animation: ds-reveal var(--dur-base) var(--ease-out) both;
}
.tl__who {
  order: 1;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-right: var(--space-7);
}
.tl__move { order: 3; }
.tl__avatar {
  width: 58px; height: 58px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-align: center;
  color: var(--ink-950);
}
.tl__yoe { display: flex; flex-direction: column; gap: 2px; }
.tl__yoenum {
  font-size: 30px;
  font-weight: var(--weight-bold);
  letter-spacing: -1.1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tl__yoelabel { font-size: 11.5px; font-weight: var(--weight-medium); letter-spacing: 0.04em; color: var(--text-eyebrow); }
.tl__name { margin-top: 8px; font-size: 17px; font-weight: var(--weight-semibold); }
.tl__name.is-pending { color: var(--text-muted); }

.tl__move { order: 3; display: grid; grid-template-columns: 140px minmax(0, 1fr); align-content: start; gap: var(--space-4) var(--space-6); min-width: 0; }
.tl__stage {
  grid-column: 1 / -1;
  align-self: flex-start;
  justify-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  font-size: 11.5px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
}
.tl__leg { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tl__legkey {
  font-size: 10.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-eyebrow);
}
.tl__leg--after .tl__legkey { color: var(--accent-ink); }
.tl__from { font-size: 14px; line-height: 1.4; color: var(--text-muted); text-wrap: pretty; }
.tl__from.is-pending { color: var(--text-muted); font-style: italic; }
.tl__to {
  display: flex;
  align-items: baseline;
  gap: 11px;
  font-size: clamp(15px, 1.8vw, 17px);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.4px;
  line-height: 1.3;
  text-wrap: pretty;
}
.tl__arrow { width: 24px; height: 14px; flex-shrink: 0; align-self: center; overflow: visible; }
.tl__note { grid-column: 1 / -1; font-size: 14px; line-height: 1.55; color: var(--text-muted); text-wrap: pretty; }

.tl__metrics { order: 2; display: flex; flex-direction: row; gap: var(--space-5); flex: 1 1 auto; padding-right: var(--space-7); border-right: 1px solid var(--bg-alt); }
.tl__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 118px;
  padding: var(--space-6) var(--space-7);
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.tl__metric:hover { transform: translateY(-2px); box-shadow: var(--shadow-accent-sm); }
.tl__metricnum { display: flex; align-items: baseline; gap: 5px; }
.tl__metricnum b {
  font-size: 30px;
  font-weight: var(--weight-bold);
  letter-spacing: -1.1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tl__metricnum span { font-size: 14px; font-weight: var(--weight-medium); color: var(--text-muted); }
.tl__metriclabel { font-size: 11.5px; line-height: 1.4; color: var(--text-eyebrow); }

@media (max-width: 900px) {
  .tl__panelgrid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .tl__who { padding-right: 0; padding-bottom: var(--space-6); }
  .tl__metrics { flex-direction: row; flex-wrap: wrap; padding-right: 0; border-right: none; padding-bottom: var(--space-6); border-bottom: 1px solid var(--bg-alt); }
  .tl__metric { flex: 1 1 150px; }
}
@media (max-width: 760px) {
  .tl__axis { display: none; }
  .tl__chips { display: flex; }
}

/* ===========================================================================
   14 · DELIVERABLES — numbered journey cards
   ======================================================================== */

.journeys { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-10); }
.journey {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  padding: clamp(24px, 4vw, var(--card-padding));
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.journey:hover { transform: translateY(var(--hover-lift)); box-shadow: var(--shadow-lift); }
.journey { box-shadow: 0 2px 4px rgba(20,20,19,0.04), 0 8px 20px rgba(20,20,19,0.06); }
/* 46×48 at 12px radius — deliberately square-ish, never round. */
.journey__num {
  display: grid;
  place-items: center;
  width: 46px; height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 17px;
  font-weight: var(--weight-bold);
  transition: transform var(--dur-base) var(--ease-out);
}
.journey:hover .journey__num { transform: scale(1.06); }
.journey__body { min-width: 0; }
.journey__eyebrow {
  margin-bottom: 4px;
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-eyebrow);
}
.journey__title { margin-block: 2px 6px; }
.journey__text { font-size: clamp(15px, 1.8vw, var(--text-body-size)); line-height: var(--text-body-leading); color: var(--text-muted); text-wrap: pretty; }

.closer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-9);
  flex-wrap: wrap;
  padding: clamp(24px, 4vw, var(--card-padding));
  border-radius: var(--radius-lg);
  background: var(--bg-contrast);
  color: var(--text-on-contrast);
}
.closer__text { min-width: 0; }
.closer__text p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: rgba(250, 249, 246, 0.72); text-wrap: pretty; }

@media (max-width: 560px) {
  .journey { gap: var(--space-6); }
  .closer { flex-direction: column; align-items: stretch; }
  .closer .btn { width: 100%; }
}

/* ===========================================================================
   15 · VSL
   ======================================================================== */

/* Height-driven so the frame can fill leftover flex space; aspect-ratio then
   derives its width, and max-width keeps it inside the column on wide screens.
   Scoped under .hero__media for specificity (0,2,0) so it beats the base
   .vsl__frame rule below regardless of source order. */
.hero__media .vsl__frame {
  height: 100%;
  max-height: var(--hero-media-max, 460px);
  width: auto;
  max-width: 100%;
}
.vsl__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-9); text-align: center; }
.vsl__frame {
  position: relative;
  height: clamp(190px, 41svh, 450px);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, var(--bg-white) 0 14px, var(--hatch-line) 14px 28px);
}
.vsl__play {
  display: grid;
  place-items: center;
  width: clamp(56px, 9vw, 72px);
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: clamp(17px, 2.4vw, 22px);
  padding-left: 4px;
}
.vsl__tag {
  position: absolute;
  left: 20px; bottom: 16px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: var(--text-muted);
}

/* ===========================================================================
   16 · STORIES — video cards + two auto-scrolling proof rows
   ======================================================================== */

/* 4-up on desktop, 2-up on phones. The 46% floor is what forces the second
   column on narrow screens — a single stack of 9:16 frames is ~3 screens tall. */
.vidgrid {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(46%, 200px), 1fr));
  gap: var(--space-7);
}
.vidcard {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.vidcard:hover { transform: translateY(var(--hover-lift)); box-shadow: var(--shadow-lift); }
.vidcard__frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, var(--bg-alt) 0 12px, var(--bg-white) 12px 24px);
}
.vidcard__play {
  display: grid;
  place-items: center;
  width: clamp(48px, 7vw, 60px);
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: clamp(15px, 2vw, 19px);
  padding-left: 4px;
  box-shadow: var(--shadow-lift);
  transition: transform var(--dur-base) var(--ease-out);
}
.vidcard:hover .vidcard__play { transform: scale(1.09); }
.vidcard__tag {
  position: absolute;
  left: 14px; bottom: 12px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: var(--text-eyebrow);
}

.casegrid {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-9);
}
.casecard {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.casecard:hover { transform: translateY(var(--hover-lift)); box-shadow: var(--shadow-lift); }
.casecard__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, var(--bg-alt) 0 12px, var(--bg-white) 12px 24px);
}
.casecard__play {
  display: grid;
  place-items: center;
  width: clamp(48px, 6vw, 60px);
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: clamp(15px, 2vw, 19px);
  padding-left: 4px;
  box-shadow: var(--shadow-lift);
  transition: transform var(--dur-base) var(--ease-out);
}
.casecard:hover .casecard__play { transform: scale(1.09); }
.casecard__tag {
  position: absolute;
  left: 14px; bottom: 12px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-white);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
}
.casecard__frame--live { background: var(--ink-950); display: block; }
.casecard__frame--live wistia-player { display: block; width: 100%; height: 100%; }
.casecard__body { display: flex; flex-direction: column; gap: var(--space-2); }
.casecard__name { font-size: 14px; font-weight: var(--weight-semibold); color: var(--text-primary); }
.casecard__desc { font-size: 14px; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }

.pm__rows { margin-top: var(--space-11); display: flex; flex-direction: column; gap: var(--space-6); }
.pm {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.pm__track {
  display: flex;
  width: max-content;
  animation: ds-marquee var(--pm-speed, 80s) linear infinite;
}
.pm__track--rev { animation-direction: reverse; }
/* Pause on hover so a quote can actually be finished. */
.pm:hover .pm__track { animation-play-state: paused; }
.pm__group { display: flex; gap: var(--space-7); padding-right: var(--space-7); }

.proofcard {
  width: 330px;
  height: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
  padding: var(--space-9);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.proofcard:hover { transform: translateY(var(--hover-lift)); box-shadow: var(--shadow-lift); }
.proofcard--wide { width: 560px; }
.proofcard__quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 11;
  overflow: hidden;
  font-size: 14.5px;
  line-height: 1.55;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  text-wrap: pretty;
}
.proofcard__quote strong { font-weight: var(--weight-semibold); }
.proofcard__who { margin-top: auto; display: flex; align-items: center; gap: 14px; }
.proofcard__avatar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--ink-950);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  overflow: hidden;
}
.proofcard__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proofcard__name { font-size: 14.5px; font-weight: var(--weight-semibold); }
.proofcard__role { font-size: 13px; line-height: 1.35; color: var(--text-eyebrow); }

/* Reduced motion: stop the scroll and hand control to the reader. */
@media (prefers-reduced-motion: reduce) {
  .pm {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .pm__track { animation: none; }
  .pm__group + .pm__group { display: none; }
}

/* ===========================================================================
   17 · ABOUT
   ======================================================================== */

.about__grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: clamp(32px, 6vw, var(--space-13));
  align-items: start;
}
.about__portrait {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-base);
}
.about__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
  transition: transform var(--dur-slow) var(--ease-out);
}
.about__portrait:hover img { transform: scale(1.03); }
.about__portrait::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: var(--accent);
  transform: scaleX(0.34);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out);
}
.about__portrait:hover::after { transform: scaleX(1); }
.about__facts { margin-top: var(--space-9); display: flex; flex-direction: column; gap: var(--space-5); }
.fact {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-7);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  box-shadow: 0 1px 2px rgba(16, 18, 22, 0.05);
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.fact:hover { background: var(--accent-wash); box-shadow: var(--shadow-accent-sm); transform: translateX(4px); }
.fact b { font-size: 17px; font-weight: var(--weight-bold); letter-spacing: -0.4px; white-space: nowrap; }
.fact span { font-size: 13px; line-height: 1.4; color: var(--text-muted); }

.about__lede { margin-bottom: var(--space-8); font-size: clamp(17px, 2.2vw, 19px); line-height: 1.6; letter-spacing: -0.2px; text-wrap: pretty; }
.about__pull {
  margin-bottom: var(--space-8);
  padding: var(--space-7) var(--space-9);
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
  font-size: clamp(18px, 2.4vw, 21px);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.4px;
  line-height: 1.4;
}
.about__body { display: flex; flex-direction: column; gap: var(--space-6); }
.about__body p { font-size: clamp(15px, 1.8vw, 16px); line-height: 1.7; color: var(--text-muted); text-wrap: pretty; }

@media (max-width: 820px) {
  .about__grid { grid-template-columns: minmax(0, 1fr); }
  .about__portrait { max-width: 340px; }
  .about__facts { flex-direction: row; flex-wrap: wrap; }
  .fact { flex: 1 1 180px; }
}

/* ===========================================================================
   18 · APPLY — the one conversion surface
   ======================================================================== */

.apply__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-7); }
.apply__title { text-align: center; max-width: 900px; font-size: clamp(22px, 3vw, 32px); }
.panel {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-card);
}
.panel__steps {
  display: flex;
  justify-content: center;
  gap: var(--space-9);
  flex-wrap: wrap;
  padding: 20px var(--space-8);
  font-size: 14px;
}
.panel__step { display: flex; align-items: center; gap: var(--space-3); color: var(--text-muted); }
.panel__step i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transition: background var(--dur-base) var(--ease-out);
}
.panel__step.is-active { color: var(--text-primary); font-weight: var(--weight-semibold); }
.panel__step.is-active i { background: var(--text-primary); }
.panel__step.is-done i { background: var(--accent-ink); }

.panel__body { display: flex; flex-wrap: wrap; border-top: 1px solid var(--surface-field); }
.panel__form { flex: 1 1 100%; max-width: 560px; margin-inline: auto; padding: clamp(24px, 4vw, var(--card-padding)); }
.panel__cal {
  flex: 1 1 300px;
  max-width: 340px;
  min-width: 0;
  padding: clamp(18px, 2.4vw, var(--space-8));
  background: var(--bg-alt);
  position: relative;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.panel__cal.is-locked { opacity: 1; }

.panel__sub { margin-block: var(--space-5) 4px; font-size: 15px; font-weight: var(--weight-semibold); }
.panel__note { margin-bottom: var(--space-8); font-size: 15px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }

/* "On the free call we'll…" — sits above the form fields. Mirrors the
   .fit__item check language, but with its own mark: .fit__mark is drawn by a
   scroll trigger scoped to .fit__col, so reusing it here would render blank. */
.callnote { margin-bottom: var(--space-8); }
.callnote__title {
  margin-bottom: var(--space-6);
  font-size: 17px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.3px;
  color: var(--text-primary);
}
.callnote__list { display: flex; flex-direction: column; gap: var(--space-5); }
.callnote__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-primary);
  text-wrap: pretty;
}
.callnote__mark { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; }

.field { width: 100%; padding: var(--field-padding); border: none; outline: none; border-radius: var(--radius-sm); background: var(--surface-field); font-size: 14px; }
.field::placeholder { color: var(--text-muted-soft); }
.field:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 0; }
.field.is-invalid { box-shadow: inset 0 0 0 2px var(--error); }

.form__rows { display: flex; flex-direction: column; gap: 10px; }
.form__row { display: flex; gap: 10px; flex-wrap: wrap; }
.form__row > * { flex: 1 1 130px; min-width: 0; }
.form__tel { display: flex; gap: 10px; align-items: stretch; }
.form__cc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-field);
  font-size: 14px;
  color: var(--text-eyebrow);
}
.form__consent {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-block: var(--space-7);
  cursor: pointer;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.form__consent input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.field--select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 11px 7px; }
.field--select:invalid, .field--select option[value=""] { color: var(--text-muted-soft); }
.form__qual { margin-top: var(--space-6); display: flex; flex-direction: column; gap: 10px; }
.form__stack { display: flex; flex-direction: column; gap: 10px; }
.form__stack > span { display: block; }
.form__quallabel { font-size: var(--text-eyebrow-size); font-weight: var(--weight-semibold); letter-spacing: var(--text-eyebrow-tracking); text-transform: var(--text-eyebrow-transform); color: var(--text-eyebrow); }
.form__radios { border: none; margin: var(--space-3) 0 0; padding: 0; }
.form__radios legend { padding: 0; margin-bottom: var(--space-4); font-size: 14px; line-height: 1.5; color: var(--text-primary); text-wrap: pretty; }
.form__radiorow { display: flex; gap: 10px; flex-wrap: wrap; }
.form__radio { flex: 1 1 120px; display: flex; align-items: center; gap: var(--space-4); padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-field); font-size: 14px; cursor: pointer; transition: box-shadow var(--dur-fast) var(--ease-out); }
.form__radio input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent-ink); }
.form__radio:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent-ink); background: var(--accent-wash); }
.form__decline { margin-top: var(--space-7); padding: var(--card-padding-compact); border-radius: var(--radius-lg); background: var(--surface-field); font-size: 14px; line-height: 1.65; color: var(--text-muted); display: flex; flex-direction: column; gap: var(--space-5); text-wrap: pretty; }
.form__decline[hidden] { display: none; }
.form__declinetitle { font-size: 17px; font-weight: var(--weight-semibold); color: var(--text-primary); }
.form__success { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.form__success[hidden] { display: none; }
.form__successtitle { font-size: 18px; font-weight: var(--weight-semibold); color: var(--text-primary); }
.form__declinealt { margin-top: var(--space-6); font-size: 13.5px; color: var(--text-muted); }

/* Free resources inside the decline panel: a declined applicant is still a
   warm lead, so the panel ends with somewhere to go rather than a dead stop. */
.form__declineres {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--divider);
}
.form__declinereslabel {
  margin-bottom: var(--space-5);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: var(--text-eyebrow-transform);
  color: var(--text-eyebrow);
}
.form__declinelinks { display: flex; flex-direction: column; gap: var(--space-5); list-style: none; }
.form__declinelinks a {
  font-size: 14.5px;
  line-height: 1.45;
  font-weight: var(--weight-medium);
  color: var(--accent-ink);
  text-decoration: none;
  text-wrap: pretty;
}
.form__declinelinks a:hover { text-decoration: underline; }
.form__declinealt a { color: var(--accent-ink); font-weight: var(--weight-medium); }
.form__error { margin-bottom: var(--space-5); font-size: 13px; color: var(--error); }
.form__error[hidden] { display: none; }

.form__progress { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: var(--space-7); }
.form__progressdot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.form__progressdot.is-active { background: var(--accent-ink); transform: scale(1.25); }
.form__progressdot.is-done { background: var(--accent-ink); opacity: 0.5; }
.form__step { display: none; }
.form__step.is-active { display: block; }
.form__step[data-step="1"] .btn { margin-top: var(--space-7); }
.form__stepnav { display: flex; gap: 10px; margin-top: var(--space-7); }
.form__stepnav .form__back { flex: 0 0 auto; }
.form__stepnav .btn--block { flex: 1 1 auto; }
.form__step[data-step="2"] .form__radios { margin-top: 0; }

.cal__criteria { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-6); text-align: left; }
.cal__criteria li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.cal__criteria li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--accent); }
.panel__lock {
  position: absolute;
  inset-inline: var(--space-8);
  top: 44%;
  z-index: 5;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  box-shadow: var(--shadow-lift);
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  animation: ds-reveal var(--dur-base) var(--ease-out) both;
}
.panel__lock[hidden] { display: none; }

.cal__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-7); }
.cal__title { font-size: 15px; font-weight: var(--weight-semibold); }
.cal__meta { font-size: 13px; color: var(--text-eyebrow); }
.cal__embed {
  width: 100%;
  min-height: 460px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-white);
}
.cal__fallback { position: relative; padding: var(--space-6) var(--space-5); min-height: 460px; }
.calmock { display: flex; flex-direction: column; gap: var(--space-5); filter: grayscale(1); opacity: 0.5; user-select: none; }
.calmock__cal { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-field); }
.calmock__monthrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.calmock__month { font-size: 12px; font-weight: var(--weight-semibold); color: var(--text-muted); }
.calmock__navs { display: flex; gap: var(--space-3); }
.calmock__navs span { width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--grey-300); }
.calmock__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calmock__dow { display: grid; place-items: center; height: 16px; font-size: 9px; font-weight: var(--weight-semibold); color: var(--grey-500); }
.calmock__day { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-pill); background: var(--white); font-size: 10px; color: var(--grey-400); }
.calmock__day--pad { background: none; }
.calmock__day.is-open { background: var(--grey-300); color: var(--grey-700); font-weight: var(--weight-semibold); }
.calmock__times { display: none; }
.calmock__timeslabel { font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: var(--text-eyebrow-tracking); text-transform: uppercase; color: var(--grey-500); }
.calmock__slot { padding: 11px; border-radius: var(--radius-sm); background: var(--surface-field); text-align: center; font-size: 13px; color: var(--grey-600); }
.calmock__veil {
  position: absolute;
  left: var(--space-5); right: var(--space-5);
  top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--card-padding-compact);
  border-radius: var(--radius-lg);
  background: var(--bg-white);
  box-shadow: var(--shadow-lift);
  text-align: center;
}
.calmock__veiltitle { font-size: 17px; font-weight: var(--weight-semibold); color: var(--text-primary); }
.calmock__veil p:not(.calmock__veiltitle) { font-size: 14px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }

@media (max-width: 900px) {
  .panel__cal { flex-basis: 100%; max-width: none; }
  .cal__embed { min-height: 520px; }
}

/* ===========================================================================
   19 · FAQ
   ======================================================================== */

.faq { margin-top: var(--space-10); display: flex; flex-direction: column; gap: var(--space-5); }
.faq__item { border-radius: var(--radius-sm); background: var(--surface-card); transition: box-shadow var(--dur-base) var(--ease-out); }
.faq__item:hover { box-shadow: var(--shadow-lift); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  width: 100%;
  padding: 24px 28px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: clamp(15px, 1.9vw, 16px);
  font-weight: var(--weight-semibold);
  line-height: 1.45;
}
.faq__chev {
  flex-shrink: 0;
  color: var(--text-muted-soft);
  font-size: 18px;
  line-height: 1;
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.faq__q[aria-expanded="true"] .faq__chev { transform: rotate(180deg); color: var(--text-primary); }
/* Collapsed only when JS can open it again; otherwise every answer stays readable. */
.faq__a {
  display: grid;
  grid-template-rows: 1fr;
}
.js .faq__a {
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.faq__q[aria-expanded="true"] + .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding: 0 28px 24px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ===========================================================================
   20 · FINAL CTA + FOOTER
   ======================================================================== */

.final { text-align: center; }
.final__inner { max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.final .btn { margin-top: var(--space-4); }

.pm__more { margin-top: var(--space-9); text-align: center; font-size: 14px; }
.pm__more a { color: var(--accent-ink); font-weight: var(--weight-medium); }

.footer { background: var(--bg-alt); color: var(--text-primary); padding-block: var(--space-8); border-top: var(--divider); }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }

/* ===========================================================================
   RESULTS PAGE (results.html) — full-detail proof, no per-client comp figures
   ======================================================================== */

.rp__head { text-align: center; }
.rp__head .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.rp__title { max-width: 720px; }

/* Masonry via CSS columns: quotes vary a lot in length, and columns pack them
   tighter than a grid without needing fixed heights or clamping. */
.rp__masonry {
  margin-top: var(--space-10);
  columns: 3 320px;
  column-gap: var(--space-8);
}
/* A short wall (3-4 cards) can't balance in multicol — it dumps one card per
   column and leaves a void. Lay those out as a grid row instead. */
.rp__masonry--row {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: var(--space-8);
  align-items: start;
}
.rp__masonry--row .rp__quote { margin: 0; }
.rp__quote {
  break-inside: avoid;
  margin: 0 0 var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.rp__quote:hover { transform: translateY(var(--hover-lift)); box-shadow: var(--shadow-lift); }
/* Fixed column structure, so a strip's height never depends on how long the
   typed values happen to be — long values wrap inside their own cell instead
   of reflowing the whole strip. Before/After pair up; the metric spans below. */
.rp__spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--accent-line);
}
.rp__specitem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp__specitem:nth-child(3) { grid-column: 1 / -1; }
.rp__speckey {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-eyebrow);
}
.rp__specval { font-size: 14px; font-weight: var(--weight-semibold); color: var(--text-primary); }
.rp__specval em { font-style: normal; background: var(--accent); color: var(--ink-950); padding: 0 4px; border-radius: 3px; box-decoration-break: clone; }
.rp__quote blockquote {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  text-wrap: pretty;
}
.rp__who { display: flex; align-items: center; gap: var(--space-5); }
/* Stars sit tight to the quote they rate, rather than taking the card's full gap. */
.rp__quote .stars { font-size: 14px; letter-spacing: 1px; margin-bottom: calc(var(--space-7) * -0.55); }

/* Results-page wall only (scoped to #written so the main page keeps its look):
   the section is grey, so white cards read as distinct objects. Border carries
   the definition, shadow carries the depth, and both intensify on hover. */

/* Editorial span grid. A 12-col base gives four widths that tile cleanly
   (4+4+4, 6+6, 8+4, 12), so rows land flush without hand-balancing. Width is
   opt-in per card via one modifier; everything else defaults to half. Because
   grid-auto-flow is dense, a card that changes length — or a new one dropped in
   anywhere — backfills the nearest gap instead of leaving a hole. */
#written .rp__masonry {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: row dense;
  align-items: stretch;
  gap: var(--space-8);
}
#written .rp__quote { grid-column: span 6; margin: 0; }
/* Cards fill their row's height, so uneven neighbours never leave grey voids.
   Pushing the attribution to the bottom turns the leftover room into deliberate
   card space rather than a gap. */
#written .rp__who { margin-top: auto; }
#written .rp__quote--narrow  { grid-column: span 4; }
#written .rp__quote--wide    { grid-column: span 8; }
#written .rp__quote--feature { grid-column: span 12; }

/* Full-width cards get room to breathe and a larger quote, so a long
   testimonial reads as a deliberate feature rather than an overflow. */
#written .rp__quote--feature { padding: var(--space-9) var(--space-10); }
#written .rp__quote--feature blockquote { font-size: 16.5px; line-height: 1.65; }
#written .rp__quote--feature > blockquote { max-width: 68ch; }

/* Keep the four widths PROPORTIONAL at this breakpoint rather than collapsing
   them — halving 12→6 preserves the 2+4 / 3+3 / 6 tiling, so length-matched
   pairs still converge in height instead of one card stretching half-empty. */
@media (max-width: 1040px) {
  #written .rp__masonry { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #written .rp__quote { grid-column: span 3; }
  #written .rp__quote--narrow { grid-column: span 2; }
  #written .rp__quote--wide { grid-column: span 4; }
  #written .rp__quote--feature { grid-column: span 6; }
}
@media (max-width: 700px) {
  #written .rp__masonry { grid-template-columns: minmax(0, 1fr); }
  #written .rp__quote,
  #written .rp__quote--narrow,
  #written .rp__quote--wide,
  #written .rp__quote--feature { grid-column: span 1; }
  #written .rp__quote--feature { padding: var(--space-8); }
}

#written .rp__quote {
  background: var(--bg-white);
  border: var(--border-width) solid var(--border);
  box-shadow: var(--shadow-soft);
}
#written .rp__quote:hover {
  transform: translateY(-4px);
  border-color: var(--accent-ink);
  box-shadow: var(--shadow-lift);
}

.rp__shots {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-8);
}
.rp__shot { display: flex; flex-direction: column; gap: var(--space-5); }
.rp__shot image-slot {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-field);
}
.rp__shotcap { font-size: 13px; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }

.rp__video {
  margin-top: var(--space-10);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-950);
}
.rp__video wistia-player { display: block; width: 100%; }

.rp__ctainner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-7); }

@media (max-width: 700px) {
  .rp__masonry { columns: 1; }
}
.footer__mark { font-size: 18px; font-weight: var(--weight-bold); letter-spacing: -0.5px; }
.footer__mark span { color: var(--accent-ink); }
.footer__nav { display: flex; gap: var(--space-8); font-size: 13px; }
.footer__nav a { color: var(--text-muted); text-decoration: none; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out); }
.footer__nav a:hover { color: var(--text-primary); }
.footer__nav a.is-accent { color: var(--accent-ink); font-weight: var(--weight-medium); }
.footer__copy { font-size: 12px; color: var(--text-eyebrow); }