/* ══════════════════════════════════════════════════════════════════════════
   Jeroen Stolk — site v5 (multi-page)
   Shared design system: obsidian / brass DNA. Radical, clean, high-contrast,
   editorial serif display (Playfair Display). Premium, elegant, high-contrast.
   Used by: /index.html, /my-story/index.html, /work-with-me/index.html
   ══════════════════════════════════════════════════════════════════════════ */

/* ── self-hosted display + body fonts ──
   Display = Playfair Display (editorial serif), self-hosted from Google Fonts.
   Google serves Playfair Display v40 as a VARIABLE font (weight axis 400-900),
   so one woff2 per subset covers every weight the site uses (400 for .dtitle,
   700 for all headings). Two subsets: latin (primary) + latin-ext (coverage).
   font-display:swap so text paints immediately in the serif fallback and swaps
   in Playfair when ready (no invisible-text flash on a heading-heavy page).
   Body = Inter, self-hosted. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('/assets/fonts/playfair-display-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('/assets/fonts/playfair-display-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:block;
  src:url('/assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:block;
  src:url('/assets/fonts/inter-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* ── display weights (all-sans pass, 14 jul) ──
   The site's display type is now INTER, not Playfair. Inter needs real 500/700/800
   faces so the rebalanced headings render crisp (no faux-bold synthesis). Weights:
     500  the fine "credential" lines (hero rail, .dtitle, tw-name, p.cred) — refined
     700  section headings + H3 + big numbers/prices — bold, present
     800  the dominant page statements (the "payoff") — matches the banner Jeroen picked
   font-display:swap so headings paint in the fallback and swap in (no invisible text). */
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/inter-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/inter-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;
  src:url('/assets/fonts/inter-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --bg:#0B0A09;
  --bg-deep:#070605;
  --bg-warm:#15110C;
  --bg-paper:#F3ECE1;
  --bg-cream:#FBF6EE;
  --ink:#23201B;
  --ink-dim:#3A332C;
  --ink-muted:#7A7065;
  --text:#F6F2EC;
  --text-dim:#E4DED4;
  --text-muted:#B0A89C;
  --text-faint:#8C8478;
  --accent:#C8956C;
  --accent-hi:#E4BD96;
  --accent-deep:#A8703F;
  --accent-muted:#9C7350;
  --accent-ink:#A86F46;
  --accent-muted-ink:#7E5B36;
  --border:rgba(255,255,255,0.085);
  --border-warm:rgba(200,149,108,0.28);
  --border-ink:rgba(35,32,27,0.12);
  --border-ink-warm:rgba(168,112,63,0.30);
  /* display is now Inter too — the whole site is all-sans (14 jul). Hierarchy is
     carried by weight (500/700/800) + tight negative tracking per koptype, not by a
     serif. Playfair faces above are kept loaded but no longer referenced here. */
  --display:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  /* labels moved off JetBrains Mono to self-hosted Inter (v-labels): readable,
     premium, on-brand. --mono now points at the Inter stack as a safety net so no
     label can ever fall back to the techy monospace. Tracking is moderated per
     class (~0.08-0.11em) and contrast lifted (brighter brass/cream). */
  --mono:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --radius:8px;
  --radius-lg:10px;
  /* one shared vertical stack gap for the paired story columns (.how-wrap /
     .story-wrap) so the two sibling pages breathe identically (rank 21) */
  --stack-gap:clamp(2.6rem,5vw,4rem);
  /* ── ONE type scale, shared by all pages (consistency pass v30) ──
     Clear steps, identical treatment for the same level everywhere.
     H1  page-hero statement (one per page, the largest)
     H2  section heading — ONE size + title-case for ALL section headers
     H3  sub-heading inside a section (step titles, tier names)
     quote  the centered display pull-quote (the emotional peak)
     lead  intro / opening statement, a notch above body
     body  running body copy, one size everywhere */
  /* type scale trimmed ~5-7% on the big steps for the all-sans pass: Inter reads
     optically larger/wider than Playfair at the same px, so the serif metrics are
     dialled back a notch to keep headings composed, not oversized. */
  --fs-h1:clamp(2.4rem,4.8vw,3.45rem);
  --fs-h2:clamp(1.92rem,3.25vw,2.6rem);
  --fs-h3:clamp(1.35rem,2.1vw,1.72rem);
  --fs-quote:clamp(1.9rem,3.7vw,2.72rem);
  --fs-lead:clamp(18px,1.45vw,21px);
  --fs-body:clamp(16.5px,1.25vw,18px);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--bg);overflow-x:clip;scroll-padding-top:96px;}
/* every in-page jump target clears the fixed header so no section starts under the
   nav on an anchor jump (rank 1, P0). Header height ≈ 96px covers both nav states. */
.section,.page-head,.how,.getback,.hero{scroll-margin-top:96px;}
body{
  font-family:var(--body);background:var(--bg);color:var(--text);
  font-size:16px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
::selection{background:rgba(200,149,108,0.30);color:#fff;}
img{max-width:100%;}
a{color:inherit;}

/* ════════ atmosphere ════════
   Warm brass glow over pure obsidian — depth without ever going grey/misty.
   Two layers on the dark base, both fixed to the viewport so the whole page
   (every section) keeps a soft top-and-bottom warmth:
     • .dawn  — glow rising from the BOTTOM, reacts to scroll (--p).
     • .spark — broad, heavily-blurred AMBIENT from the top so the hero is
                never pitch-black. Its bright centre sits ABOVE the viewport,
                so only the soft falloff shows: warmth, no hotspot.
   TUNING KNOBS (single number each, safe to nudge on the eye):
     --dawn-rest   baseline bottom warmth with no scroll   (was effectively 0.10)
     --dawn-gain   extra bottom warmth added over a full scroll
     --spark-alpha peak alpha of the top ambient — keep low, no hotspot
   Only the three approved brass tints are used:
     rgba(228,189,150) · rgba(200,149,108) · rgba(168,112,63). */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  --dawn-rest:0.40;
  --dawn-gain:0.16;
  --spark-alpha:0.11;}
.atmos .base{position:absolute;inset:0;background:linear-gradient(180deg,#0B0A09 0%,#0E0B08 50%,#100C08 100%);}
.atmos .dawn{
  position:absolute;left:50%;bottom:-46vh;transform:translateX(-50%);
  width:150vw;height:120vh;border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(228,189,150,0.26) 0%, rgba(200,149,108,0.13) 28%,
    rgba(168,112,63,0.05) 48%, transparent 70%);
  filter:blur(24px);opacity:calc(var(--dawn-rest) + var(--p,0)*var(--dawn-gain));transition:opacity 0.2s linear;}
/* broad top ambient — bright centre parked above the viewport, only the soft
   falloff is visible, so it lifts the black without a spotlight. */
.atmos .spark{display:block;
  position:absolute;left:50%;top:-34vh;transform:translateX(-50%);
  width:185vw;height:138vh;border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(228,189,150,var(--spark-alpha)) 0%,
    rgba(200,149,108,calc(var(--spark-alpha)*0.52)) 44%,
    rgba(168,112,63,calc(var(--spark-alpha)*0.20)) 66%, transparent 80%);
  filter:blur(66px);}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.12;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;}
.progress{position:fixed;top:0;left:0;height:2px;z-index:90;width:0%;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent),var(--accent-hi));
  box-shadow:0 0 12px rgba(200,149,108,0.6);}

/* ════════ nav ════════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.5rem,6vw,4rem);
  transition:background 0.4s ease,border-color 0.4s ease,padding 0.4s ease,box-shadow 0.4s ease,backdrop-filter 0.4s ease,-webkit-backdrop-filter 0.4s ease;
  -webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);
  border-bottom:1px solid transparent;}
.nav.scrolled{background:rgba(11,10,9,0.80);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-warm);padding-top:0.85rem;padding-bottom:0.85rem;
  box-shadow:0 10px 30px -20px rgba(0,0,0,0.8);}
/* on subpages the nav sits over content from the top, so give it a base tint */
.nav.solid{background:rgba(11,10,9,0.72);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.nav .brand{font-family:var(--display);font-weight:700;font-size:1.16rem;color:var(--text);
  text-decoration:none;letter-spacing:-0.01em;white-space:nowrap;}
.nav .brand .brass{color:var(--accent);}
.nav-links{display:flex;align-items:center;gap:clamp(1.4rem,2.6vw,2.4rem);}
.nav-links a{font-family:var(--body);font-size:0.96rem;font-weight:600;letter-spacing:0.005em;
  color:var(--text-dim);text-decoration:none;transition:color 0.3s ease;position:relative;}
.nav-links a.nav-text:hover{color:var(--accent-hi);}
.nav-links a.nav-text.active{color:var(--accent-hi);}
/* underline rendered on every nav-text at opacity 0 so the active state fades in/out
   in step with the color transition, instead of snapping (rank 14). */
.nav-links a.nav-text::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;
  background:var(--accent);opacity:0;transition:opacity 0.3s ease;}
.nav-links a.nav-text.active::after{opacity:0.7;}
.nav-links a.nav-cta{font-weight:600;color:#241405;padding:0.56rem 1.3rem;border-radius:9px;
  white-space:nowrap;
  background:linear-gradient(180deg,var(--accent),var(--accent-deep));
  border:1px solid rgba(255,233,210,0.28);
  box-shadow:0 8px 20px -14px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,244,232,0.28);
  transition:transform 0.3s ease,filter 0.3s ease;}
.nav-links a.nav-cta:hover{color:#241405;transform:translateY(-1px);filter:brightness(1.06);}
/* the CTA label swaps to a shorter form on the narrowest phones (see 400px query) */
.nav-links a.nav-cta .cta-short{display:none;}

/* ── mobile menu: hamburger toggle (shown < 820px) ── */
.nav-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent;}
.nav-toggle-bar{display:block;width:23px;height:2px;border-radius:2px;background:var(--text);
  transition:transform 0.3s cubic-bezier(.2,.8,.2,1),opacity 0.2s ease;}
body.nav-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.nav-open .nav-toggle-bar:nth-child(2){opacity:0;}
body.nav-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* lock background scroll while the drawer is open */
body.nav-open{overflow:hidden;}

@media(max-width:820px){
  .nav-links a.nav-text{display:none;}
  .nav-links{gap:0.55rem;}
  /* keep the most-tapped control at a comfortable ~40px touch height (rank 17) */
  .nav-links a.nav-cta{padding:0.66rem 1.1rem;font-size:0.88rem;
    min-height:40px;display:inline-flex;align-items:center;justify-content:center;}
  .nav .brand{font-size:1.12rem;}
  .nav-toggle{display:flex;}
}
@media(max-width:400px){
  .nav{padding-left:1rem;padding-right:1rem;}
  .nav-links a.nav-cta{padding:0.44rem 0.8rem;font-size:0.8rem;}
  .nav-links a.nav-cta .cta-full{display:none;}
  .nav-links a.nav-cta .cta-short{display:inline;}
}

/* ── mobile menu: slide-in drawer + backdrop ── */
.nav-drawer{position:fixed;inset:0;z-index:80;overflow:hidden;
  visibility:hidden;opacity:0;transition:opacity 0.3s ease,visibility 0s linear 0.3s;}
.nav-drawer.open{visibility:visible;opacity:1;transition:opacity 0.3s ease;}
.nav-drawer-backdrop{position:absolute;inset:0;background:rgba(7,6,5,0.66);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.nav-drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,340px);
  display:flex;flex-direction:column;
  padding:calc(1.4rem + env(safe-area-inset-top,0px)) clamp(1.4rem,6vw,1.9rem)
          calc(1.6rem + env(safe-area-inset-bottom,0px));
  background:linear-gradient(200deg,#15110C 0%,#0B0A09 60%);
  border-left:1px solid var(--border-warm);box-shadow:-24px 0 60px -30px rgba(0,0,0,0.85);
  transform:translateX(100%);transition:transform 0.38s cubic-bezier(.2,.8,.2,1);}
.nav-drawer.open .nav-drawer-panel{transform:none;}
.nav-drawer-close{align-self:flex-end;width:44px;height:44px;margin:-0.4rem -0.4rem 0.4rem 0;
  display:flex;align-items:center;justify-content:center;border:0;background:transparent;
  color:var(--text-dim);font-family:var(--display);font-size:2rem;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:color 0.25s ease;}
.nav-drawer-close:hover{color:var(--accent-hi);}
.nav-drawer-links{display:flex;flex-direction:column;margin-top:0.4rem;}
.nav-drawer-links a{display:flex;align-items:center;min-height:52px;
  font-family:var(--display);font-weight:700;letter-spacing:-0.018em;font-size:1.42rem;
  color:var(--text);text-decoration:none;border-bottom:1px solid var(--border);
  transition:color 0.25s ease;}
.nav-drawer-links a:hover,.nav-drawer-links a.active{color:var(--accent);}
.nav-drawer-cta{margin-top:auto;width:100%;padding:1rem 1.5rem;}
@media(min-width:821px){
  .nav-drawer{display:none;}
}

/* ════════ sticky mobile action bar ════════ */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:75;display:none;
  padding:0.7rem clamp(1rem,5vw,1.4rem) calc(0.7rem + env(safe-area-inset-bottom,0px));
  background:rgba(11,10,9,0.92);backdrop-filter:blur(14px);
  border-top:1px solid var(--border-warm);box-shadow:0 -14px 34px -20px rgba(0,0,0,0.85);
  transform:translateY(120%);transition:transform 0.45s cubic-bezier(.2,.8,.2,1);}
.mobile-bar.show{transform:translateY(0);}
.mobile-bar .cta-pill{display:flex;width:100%;padding:1rem 1.5rem;font-size:0.98rem;}

/* ════════ shared primitives ════════ */
.section{position:relative;z-index:2;padding:clamp(84px,10vw,124px) clamp(1.5rem,6vw,7rem);}
.section.tight{padding-top:clamp(64px,7vw,90px);padding-bottom:clamp(64px,7vw,90px);}
.wrap{max-width:1180px;margin:0 auto;}
.wrap-narrow{max-width:760px;margin:0 auto;}
.hairline{position:relative;}
.hairline::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(620px,74%);height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-muted),transparent);opacity:0.55;}

.eyebrow{font-family:var(--body);font-size:12.5px;letter-spacing:0.11em;text-transform:uppercase;
  font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:0.85rem;
  margin-bottom:22px;}
.eyebrow::before{content:'';width:30px;height:1px;background:var(--accent);opacity:0.85;}
.eyebrow.center{justify-content:center;}
.eyebrow.center::before{display:none;}

.h-display{font-family:var(--display);font-weight:700;letter-spacing:-0.021em;
  font-size:var(--fs-h2);line-height:1.06;color:var(--text);text-wrap:balance;}
.h-display .brass{color:var(--accent);}

.prose p{color:var(--text-dim);font-weight:400;font-size:var(--fs-body);
  line-height:1.68;margin-bottom:1.35rem;max-width:64ch;text-wrap:pretty;}
.prose p:last-child{margin-bottom:0;}
.prose p b,.prose p strong{color:var(--text);font-weight:600;}
.prose p.lead{color:#EDE7E0;font-size:var(--fs-lead);line-height:1.55;max-width:60ch;}
.sec-intro{color:var(--text-dim);font-size:clamp(17px,1.3vw,19.5px);line-height:1.6;
  max-width:56ch;margin-top:6px;}

/* light / paper section variants */
.on-light{background:var(--bg-paper);color:var(--ink);}
.on-light.cream{background:var(--bg-cream);}
.on-light::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(620px,74%);height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-muted-ink),transparent);opacity:0.55;}
.on-light .eyebrow{color:var(--accent-ink);font-weight:600;}
.on-light .eyebrow::before{background:var(--accent-ink);}
.on-light .h-display{color:var(--ink);}
.on-light .h-display .brass{color:var(--accent-ink);}
.on-light .prose p{color:var(--ink-dim);}
.on-light .prose p b,.on-light .prose p strong{color:var(--ink);}
.on-light .prose p.lead{color:var(--ink);}
.on-light .sec-intro{color:var(--ink-dim);}

/* deep-dark radical variant */
.on-deep{background:var(--bg-deep);}
.on-deep::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(620px,74%);height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-muted),transparent);opacity:0.5;}

/* ── CTA: primary filled brass ── */
.cta-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0.7rem;
  font-family:var(--body);font-size:1rem;font-weight:600;letter-spacing:0.015em;
  color:#241405;text-decoration:none;padding:1rem 2.2rem;border-radius:10px;
  border:1px solid rgba(255,233,210,0.32);
  background:linear-gradient(180deg,var(--accent) 0%,var(--accent-deep) 100%);
  box-shadow:0 1px 0 rgba(255,244,232,0.30) inset,0 10px 26px -16px rgba(0,0,0,0.65);
  transition:transform 0.35s cubic-bezier(.2,.8,.2,1),box-shadow 0.35s ease,gap 0.35s ease,filter 0.35s ease;}
.cta-pill .arr{color:#241405;transition:transform 0.35s cubic-bezier(.2,.8,.2,1);}
.cta-pill:hover{transform:translateY(-1px);gap:0.95rem;filter:brightness(1.05);
  box-shadow:0 1px 0 rgba(255,244,232,0.34) inset,0 14px 30px -16px rgba(0,0,0,0.7);}
.cta-pill:hover .arr{transform:translateX(4px);}
.cta-pill:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;}

/* ── CTA: secondary soft link (brass, underlined) ── */
.cta-soft{display:inline-flex;align-items:center;gap:0.5rem;
  font-family:var(--body);font-size:0.98rem;font-weight:600;letter-spacing:0.01em;
  color:var(--accent-hi);text-decoration:none;
  border-bottom:1px solid var(--border-warm);padding-bottom:3px;
  transition:color 0.3s ease,border-color 0.3s ease,gap 0.3s ease;}
.cta-soft .arr{color:var(--accent-hi);font-size:0.9em;transition:transform 0.3s ease;}
.cta-soft:hover{color:#F2D8B8;border-color:var(--accent);gap:0.7rem;}
.cta-soft:hover .arr{transform:translateX(3px);}
.on-light .cta-soft{color:var(--accent-ink);border-bottom-color:var(--border-ink-warm);}
.on-light .cta-soft .arr{color:var(--accent-ink);}
.on-light .cta-soft:hover{color:#6F4014;border-color:var(--accent-deep);}

/* ── CTA: ghost/outline ── */
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:0.55rem;width:100%;
  font-family:var(--body);font-size:0.98rem;font-weight:600;letter-spacing:0.01em;
  color:var(--accent-hi);text-decoration:none;padding:0.92rem 1.4rem;border-radius:10px;
  border:1px solid var(--border-warm);background:rgba(200,149,108,0.05);
  transition:background 0.3s ease,border-color 0.3s ease,transform 0.3s ease,color 0.3s ease;}
.btn-ghost .arr{color:var(--accent);transition:transform 0.3s ease;}
.btn-ghost:hover{background:rgba(200,149,108,0.12);border-color:var(--accent);transform:translateY(-1px);color:#F2D8B8;}
.btn-ghost:hover .arr{transform:translateX(3px);}

.cta-row{display:flex;align-items:center;gap:1.4rem 2rem;flex-wrap:wrap;}
.cta-row.center{justify-content:center;}
.cta-note{font-family:var(--body);font-size:0.72rem;letter-spacing:0.09em;text-transform:uppercase;
  font-weight:600;color:var(--text-dim);margin-top:1rem;}
.on-light .cta-note{color:var(--ink-muted);}

/* ════════ reveal ════════ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:0.07s;}
.reveal.d2{transition-delay:0.14s;}
.reveal.d3{transition-delay:0.21s;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}.reveal{opacity:1;transform:none;transition:none;}}

/* shared photo frame */
.photo-wrap{position:relative;}
.photo-wrap::before{content:'';position:absolute;inset:-6% -5%;z-index:0;pointer-events:none;
  background:radial-gradient(60% 55% at 60% 45%,rgba(200,149,108,0.16),transparent 72%);
  filter:blur(28px);opacity:0.5;}
.photo-frame{position:relative;z-index:1;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--border-warm);
  box-shadow:0 30px 70px -50px rgba(0,0,0,0.8);}
.photo-frame img{display:block;width:100%;height:auto;}
/* inner blend: an inset vignette to obsidian + a soft warm multiply so bright framed
   photos sink into the dark instead of sitting as flat luminous rectangles (rank 5). */
.photo-frame::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;mix-blend-mode:multiply;
  box-shadow:inset 0 0 55px rgba(11,10,9,0.55);
  background:radial-gradient(120% 120% at 50% 40%,transparent 55%,rgba(11,10,9,0.5));}

/* ════════ HERO ════════ */
.hero{position:relative;z-index:2;min-height:88svh;display:flex;align-items:center;
  padding:clamp(7.5rem,13vw,10rem) clamp(1.6rem,6vw,7rem) clamp(4rem,7vw,6rem);}
/* minmax(0,…) on both tracks so a nowrap display line can never grow the copy
   column into the figure — the JS fitter scales the type to the real column width. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,0.72fr);gap:clamp(2.2rem,5vw,4.4rem);
  align-items:center;max-width:1180px;margin:0 auto;width:100%;}
.hero .eyebrow{margin-bottom:1.6rem;}
/* ── 1 · credentials lead — three short "I've ..." statements, Playfair, set on a
   copper vertical rail. They open the hero and set up the payoff below. Each line
   never wraps on desktop; the JS fitter (.fitline) scales the whole block down as a
   safety net so the longest line ("I've built successful businesses.") fits the copy
   column and never spills into the figure. The payoff below stays clearly the largest. */
.hero .cred-track{display:flex;flex-direction:column;align-items:flex-start;gap:0.34rem;
  padding-left:1.2rem;border-left:2px solid var(--accent);
  margin-bottom:clamp(1.5rem,2.9vw,2.1rem);
  font-size:clamp(1.42rem,2.35vw,2.02rem);}
.hero .cred-track .kl{display:block;white-space:nowrap;font-family:var(--display);
  font-weight:500;letter-spacing:-0.008em;font-size:1em;line-height:1.26;color:var(--text-dim);}
.hero .cred-track .kl .brass{color:var(--accent);}
/* ── 2 · the payoff — the page's single H1, the dominant element in the hero
   (≈2× the credentials), directly under the rail. The fitter keeps it on one line
   on desktop; on mobile it wraps (see responsive). ── */
.hero h1{font-family:var(--display);font-weight:800;letter-spacing:-0.03em;
  font-size:clamp(2.5rem,4.7vw,3.65rem);line-height:1.02;color:var(--text);white-space:nowrap;
  margin-bottom:clamp(1.4rem,2.8vw,2rem);}
.hero h1 .brass{color:var(--accent);}
/* ── 3 · promise + closer ── */
.hero-lines{display:flex;flex-direction:column;gap:0.5rem;max-width:44ch;}
.hero-lines .hl{color:var(--text-dim);font-weight:400;
  font-size:clamp(17px,1.45vw,20.5px);line-height:1.45;}
.hero-lines .hl .brass{color:var(--accent);}
/* subtle hand-drawn brass underline, ONLY under "unstoppable" — a thin, slightly
   tapered brushstroke (not a hard rule), low emphasis. em-based so it scales with
   the clamp() font-size and stays put under the word on desktop and mobile. */
.hero-lines .hl .us-underline{position:relative;}
.hero-lines .hl .us-underline::after{content:'';position:absolute;left:-0.12em;right:-0.12em;bottom:-0.34em;
  height:0.30em;pointer-events:none;opacity:0.62;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M3,4.4 C42,2.3 88,2.0 128,2.9 C160,3.6 186,4.2 197,3.6 C186,5.5 160,5.9 128,5.5 C88,5.0 42,5.4 3,5.8 Z' fill='%23D4A574'/%3E%3C/svg%3E") no-repeat center/100% 100%;}
.hero .sub{color:var(--text-dim);font-size:clamp(16.5px,1.25vw,19px);line-height:1.62;
  max-width:52ch;margin-top:1.7rem;}
.hero-ctas{margin-top:2.4rem;}
/* secondary/ghost hero button — the filled brass pill is reserved for the book-a-call action */
.hero-ctas .btn-ghost{width:auto;padding:0.95rem 2rem;font-size:1rem;}
.hero .cta-note{margin-top:1.3rem;}
/* hero figure — free-standing cut-out planted at the base of the hero, rising out of the dark.
   Absolutely pinned to the content-box right edge and the section's bottom so the hip-cut
   coincides with the hero's lower border ("staat erin", not floating). Removed from grid flow,
   so the copy column keeps its exact width/position. Width is bounded by 44svh as well so the
   figure never grows taller than the hero and clips his head on short viewports. */
.hero-figure{position:absolute;z-index:1;margin:0;pointer-events:none;
  right:max(clamp(1.6rem,6vw,7rem),calc(50vw - 590px));
  bottom:0;width:min(clamp(240px,30vw,400px),44svh);}
.hero-figure-inner{position:relative;margin:0;width:100%;}
/* warm dawn glow behind him so he reads as lit out of the obsidian, not pasted on top */
.hero-figure-inner::before{content:'';position:absolute;z-index:0;left:50%;bottom:6%;
  transform:translateX(-50%);width:152%;height:80%;pointer-events:none;
  background:radial-gradient(52% 58% at 50% 54%,rgba(228,189,150,0.32),rgba(200,149,108,0.12) 42%,transparent 72%);
  filter:blur(15px);}
/* soft grounding shadow so the base sinks into the floor instead of hovering */
.hero-figure-inner::after{content:'';position:absolute;z-index:0;left:50%;bottom:0.5%;
  transform:translateX(-50%);width:82%;height:9%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,0.62),transparent 70%);
  filter:blur(11px);}
.hero-figure-inner img{position:relative;z-index:1;display:block;width:100%;height:auto;
  filter:drop-shadow(0 16px 32px rgba(0,0,0,0.5));
  -webkit-mask-image:linear-gradient(to bottom,#000 89%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 89%,transparent 100%);}
/* name plate — small, set low-left in the dark beside him, never a boxed frame */
.hero-figure .hero-caption{position:absolute;z-index:3;left:0;bottom:9%;margin:0;
  text-align:left;line-height:1.12;pointer-events:none;}
.hero-figure .hero-caption .hero-caption-name{display:block;font-family:var(--display);font-weight:700;
  letter-spacing:-0.012em;font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--text);}
.hero-figure .hero-caption .brass{color:var(--accent);}
/* role title under the name — a clear, readable title, not a whisper-caption */
.hero-figure .hero-caption .hero-role{display:block;margin-top:0.35rem;font-family:var(--body);font-weight:600;
  font-size:clamp(0.9rem,1.1vw,1.02rem);letter-spacing:0.01em;text-transform:none;color:var(--accent-hi);}

/* ════════ page header (subpages) ════════ */
.page-head{position:relative;z-index:2;
  padding:clamp(8.5rem,15vw,11rem) clamp(1.6rem,6vw,7rem) clamp(2.5rem,5vw,4rem);}
.page-head .kick{font-family:var(--body);font-size:12.5px;letter-spacing:0.11em;text-transform:uppercase;
  font-weight:600;color:var(--accent);margin-bottom:1.4rem;}
.page-head h1,.page-head h2{font-family:var(--display);font-weight:800;letter-spacing:-0.028em;
  font-size:var(--fs-h1);line-height:1.04;color:var(--text);max-width:16ch;text-wrap:balance;}
.page-head h1 .brass,.page-head h2 .brass{color:var(--accent);}
/* a section heading (.h-display) sitting inside a page-head is an H2, not the page hero —
   keep it at the 700 section weight even though the hero statement above is now 800 */
.page-head .h-display{font-weight:700;font-size:var(--fs-h2);letter-spacing:-0.021em;line-height:1.06;max-width:20ch;}
.page-head .lede{color:var(--text-dim);font-size:var(--fs-lead);line-height:1.6;
  max-width:56ch;margin-top:1.5rem;}

/* ════════ WHAT I DELIVER — staccato / radical ════════ */
.deliver-head{max-width:820px;margin-bottom:clamp(3rem,6vw,4.6rem);}
.deliver-head .sec-intro{color:var(--text-muted);max-width:64ch;}
.deliver-stack{display:flex;flex-direction:column;gap:clamp(2.6rem,5vw,4.4rem);}
.dblock{display:grid;grid-template-columns:minmax(220px,0.42fr) 1fr;gap:clamp(1.4rem,4vw,3.4rem);
  align-items:start;padding-top:clamp(2.2rem,4vw,3rem);border-top:1px solid var(--border);}
.dblock:first-child{border-top:0;padding-top:0;}
.dblock .dnum{font-family:var(--body);font-size:0.75rem;letter-spacing:0.10em;color:var(--accent);
  font-weight:600;margin-bottom:1rem;display:block;}
.dblock .dtitle{font-family:var(--display);font-weight:500;letter-spacing:-0.012em;
  font-size:clamp(1.5rem,2.5vw,2.05rem);line-height:1.14;color:var(--text);max-width:14ch;}
.dblock .dtitle .brass{color:var(--accent);}
/* the beats: each short line breathes on its own */
.beats{display:flex;flex-direction:column;}
.beats .beat{font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.4;color:var(--text-muted);
  padding:0.42rem 0;max-width:46ch;transition:color .3s;}
.beats .beat.res{color:var(--text-dim);}
.beats .beat.turn{color:var(--text);font-weight:600;margin-top:0.55rem;margin-bottom:0.15rem;
  padding-left:1.1rem;border-left:2px solid var(--accent);}
.beats .beat.win{color:var(--accent-hi);font-weight:600;margin-top:0.55rem;
  font-size:clamp(17px,1.35vw,19.5px);}
@media(max-width:760px){
  .dblock{grid-template-columns:1fr;gap:1.2rem;}
  .dblock .dtitle{max-width:none;}
}

/* ════════ HOW I WORK (work-with-me opener) — one centered, balanced column ════════
   The whole page reads as a single designed piece: every block lives in one
   narrow column centered on the page (no more content hanging left with an
   empty right half). One alignment system, applied everywhere:
     · statements + headings (intro, kop, pull-quote, closer)  → centered
     · running body + the process (lead-in, the three steps)   → left within the column
     · the live call photo                                     → a centered, framed hero feature
   The step numbers keep their hairline-rule structure; the block just sits in
   the centered column instead of plastering itself to the left edge. */
.how{padding-top:clamp(8.5rem,15vw,11rem);padding-bottom:clamp(54px,7vw,80px);}
.how-wrap{--col:min(100%,700px);
  max-width:760px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;
  gap:var(--stack-gap);}

/* ── OPENER: self-intro + kop, centered ── */
.how-top{width:var(--col);display:flex;flex-direction:column;align-items:center;
  gap:clamp(1.4rem,2.8vw,2.1rem);text-align:center;}
.how-intro{font-family:var(--body);font-weight:400;color:var(--text-dim);
  font-size:var(--fs-lead);line-height:1.6;max-width:52ch;margin:0;}
/* the page's single H1 — the opener statement, on the hero/H1 scale.
   Stays larger than the mid-page pull-quote (--fs-quote < --fs-h1). */
.how-lead{font-family:var(--display);font-weight:800;letter-spacing:-0.028em;
  font-size:var(--fs-h1);line-height:1.04;color:var(--text);
  text-transform:none;text-wrap:balance;margin:0;}
.how-lead .brass{color:var(--accent);}

/* ── HERO FEATURE: the live mastermind-call photo, centered + framed ── */
.call-figure{margin:0;width:var(--col);}
.call-figure .photo-frame img{width:100%;height:auto;}

/* ── LEAD-IN: short statement, centered in the opener (no left-hanging dead space).
   Carries the opener now that the self-intro is gone, so it takes the same size the
   old .how-intro had (--fs-lead / 1.6) — larger and more prominent than plain body. ── */
.how-leadin{width:var(--col);text-align:center;}
.how-leadin p{font-size:var(--fs-lead);line-height:1.6;max-width:52ch;margin:0 auto 0.7rem;}
.how-leadin p:last-child{margin-bottom:0;}

/* ── STEPS: vertical flow, big brass number on a hairline rule ── */
.how-steps{width:var(--col);display:flex;flex-direction:column;
  gap:clamp(2.6rem,5vw,4rem);}
.how-step{display:grid;grid-template-columns:auto 1fr;
  gap:clamp(1.4rem,3vw,2.4rem);align-items:start;text-align:left;}
.how-step-num{font-family:var(--display);font-weight:700;color:var(--accent);
  font-size:clamp(2.5rem,4.7vw,3.7rem);line-height:0.86;letter-spacing:-0.022em;
  padding-right:clamp(1.2rem,2.6vw,2rem);
  border-right:1px solid rgba(200,149,108,0.28);}
.how-step-body{min-width:0;padding-top:0.3rem;}
.how-step-title{font-family:var(--display);font-weight:700;letter-spacing:-0.016em;
  font-size:var(--fs-h3);line-height:1.12;color:var(--text);
  margin:0 0 1.05rem;}

/* the two questions — a paired, emphasised block on a brass rule */
.how-step-q{border-left:2px solid var(--accent);padding-left:1.1rem;
  margin:0 0 1.15rem;display:flex;flex-direction:column;gap:0.32rem;}
.how-step-q p{font-family:var(--body);font-weight:600;color:var(--text);
  font-size:clamp(17.5px,1.4vw,20px);line-height:1.4;margin:0;}

.how-step-note{color:var(--text-dim);font-size:clamp(16px,1.1vw,17.5px);
  line-height:1.55;margin:0 0 0.95rem;}

/* staccato — short lines, each on its own line */
.how-staccato{color:var(--text-dim);font-size:clamp(16.5px,1.2vw,18.5px);
  line-height:1.72;margin:0;text-wrap:pretty;}
.how-pivot{color:var(--accent-hi);font-weight:600;font-size:1.06em;}

/* arrow list — no bullets, brass arrow marker */
.how-arrows{list-style:none;margin:0 0 1.25rem;padding:0;
  display:flex;flex-direction:column;gap:0.36rem;}
.how-arrows li{position:relative;padding-left:1.7rem;color:var(--text-dim);
  font-size:clamp(16.5px,1.2vw,18.5px);line-height:1.5;}
.how-arrows li::before{content:'\2192';position:absolute;left:0;top:0;
  color:var(--accent);font-weight:600;}

/* ── the emotional peak: ONE shared size for both story pages ──
   .how-quote (Work-with-me pull-quote) and .story-emph (My-story pivot line)
   share the exact same scale via .peak, so the peak reads identical on both. */
.peak{font-size:var(--fs-quote);}

/* ── PULL-QUOTE: the centered peak ── */
.how-quote{font-family:var(--display);font-weight:700;letter-spacing:-0.022em;
  line-height:1.1;color:var(--text);
  text-wrap:balance;text-align:center;max-width:22ch;border:0;
  margin:clamp(0.4rem,1vw,1rem) auto;padding:0;}
.how-quote .brass{color:var(--accent);}

/* ── CLOSER: centered closing statement ── */
.how-closer{font-family:var(--body);font-weight:400;color:var(--text-dim);
  font-size:var(--fs-lead);line-height:1.55;
  max-width:52ch;margin:0 auto;text-align:center;text-wrap:balance;}

/* tighten the gap into the getback/tiers below */
.how + .page-head{padding-top:clamp(1.5rem,3vw,2.6rem);}

/* mobile: single column, the step marker moves above its body */
@media(max-width:600px){
  .how-step{grid-template-columns:1fr;gap:0.5rem;text-align:left;}
  .how-step-num{border-right:0;padding-right:0;padding-bottom:0.15rem;line-height:1;}
  /* desktop-only manual line breaks in the opener/closer collapse into flowing
     paragraphs on small screens, so the copy never hacks into odd fragments */
  .br-desk{display:none;}
}

/* ════════ WHAT YOU GET BACK (work-with-me — emotional bridge before the tiers) ════════
   Same centered column as the opener: title centered, body left within it. */
.getback{position:relative;z-index:2;
  padding:clamp(2rem,4vw,3.2rem) clamp(1.5rem,6vw,7rem) clamp(1.6rem,3vw,2.6rem);}
.getback-wrap{--col:min(100%,700px);
  max-width:760px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;}
.getback-title{font-family:var(--display);font-weight:700;letter-spacing:-0.021em;
  font-size:var(--fs-h2);line-height:1.06;color:var(--text);text-wrap:balance;
  text-align:center;margin:0 0 clamp(1.6rem,3vw,2.4rem);}
.getback-title .brass{color:var(--accent);}
.getback-body{width:var(--col);}
/* cap the running body at a comfortable measure (~64ch) — rank 8 */
.getback-body p{max-width:64ch;}
.getback-body p .brass{color:var(--accent);font-weight:600;}
/* closing statement under the outcomes (work-with-me v34) */
.getback-close{margin-top:0.5rem;color:var(--text);}
/* the moved pull-quote now sits under the "Your Results" title, above the outcomes */
.getback-wrap .how-quote{margin-top:clamp(0.2rem,0.6vw,0.6rem);margin-bottom:clamp(1.4rem,2.6vw,2rem);}
/* keep the gap into the tiers header tight and consistent (mirrors .how + .page-head) */
.getback + .page-head{padding-top:clamp(1.5rem,3vw,2.6rem);padding-bottom:clamp(1.4rem,2.6vw,2.2rem);}
/* trim the padding stack between the "Two ways in" header and the price cards
   so there is no dead black gap above the tiers */
#ladder.section.tight{padding-top:clamp(20px,3vw,36px);}

/* ════════ LADDER (work-with-me + teaser) ════════ */
.ladder-head{text-align:center;max-width:680px;margin:0 auto clamp(2.8rem,5vw,4rem);}
.ladder-head .eyebrow{justify-content:center;}
.ladder-head .eyebrow::before{display:none;}
.ladder-head .sec-intro{margin:14px auto 0;}
.ladder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.5rem);align-items:stretch;}
.tier{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-lg);
  padding:clamp(1.7rem,2.4vw,2.2rem);
  background:linear-gradient(180deg,rgba(24,20,16,0.72),rgba(16,13,10,0.72));
  border:1px solid var(--border);}
.tier.flagship{border:1px solid var(--border-warm);
  background:linear-gradient(180deg,rgba(43,32,22,0.85),rgba(24,18,12,0.9));
  box-shadow:0 40px 90px -50px rgba(0,0,0,0.9),0 0 60px -30px rgba(200,149,108,0.5);}
.tier.flagship::before{content:'';position:absolute;inset:0;border-radius:var(--radius-lg);padding:1px;
  background:linear-gradient(160deg,rgba(228,189,150,0.55),rgba(200,149,108,0.05) 45%,rgba(168,112,63,0.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
.tier-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--body);font-size:0.64rem;letter-spacing:0.09em;text-transform:uppercase;font-weight:600;
  color:#241405;padding:0.4rem 0.95rem;border-radius:100px;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent-deep));
  border:1px solid rgba(255,233,210,0.4);box-shadow:0 8px 20px -12px rgba(0,0,0,0.7);white-space:nowrap;}
.tier-label{font-family:var(--body);font-size:0.74rem;letter-spacing:0.10em;text-transform:uppercase;
  color:var(--accent);font-weight:600;}
.tier.flagship .tier-label{color:var(--accent-hi);}
.tier-name{font-family:var(--display);font-weight:700;letter-spacing:-0.016em;
  font-size:var(--fs-h3);line-height:1.1;color:var(--text);margin:0.7rem 0 1rem;}
.tier-price{font-family:var(--display);font-weight:800;line-height:1;color:var(--accent);
  font-size:clamp(2.1rem,3vw,2.75rem);letter-spacing:-0.022em;display:flex;align-items:baseline;gap:0.5rem;}
.tier-price .from{font-family:var(--body);font-size:0.7rem;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--accent-hi);font-weight:600;}
.tier-summary{color:var(--text-dim);font-size:15px;line-height:1.55;margin:1.1rem 0 0.4rem;
  padding-bottom:1.1rem;border-bottom:1px solid var(--border);}
.tier-list{list-style:none;margin:1.1rem 0 0;display:flex;flex-direction:column;gap:0.72rem;}
.tier-list li{position:relative;padding-left:1.5rem;color:var(--text-dim);font-size:14.5px;line-height:1.5;text-wrap:pretty;}
.tier-list li::before{content:'\2192';position:absolute;left:0;top:0;color:var(--accent);font-size:0.9em;}
/* ── 1-on-1 session tier extras (work-with-me v34): duration line + "you walk away with" list ── */
.tier-duration{font-family:var(--body);font-size:0.77rem;letter-spacing:0.10em;text-transform:uppercase;
  color:var(--accent-hi);font-weight:600;line-height:1.3;margin:0 0 1.4rem;}
.ladder-grid.bare .tier-price + .tier-duration{margin-top:-0.7rem;}
.tier-list-label{font-family:var(--body);font-size:0.68rem;letter-spacing:0.10em;text-transform:uppercase;
  color:var(--accent-hi);font-weight:600;margin:0.2rem 0 0;}
.tier-list-label + .tier-list{margin-top:0.7rem;}
.tier-for{margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--border);}
.tier-for .flabel{font-family:var(--body);font-size:0.66rem;letter-spacing:0.10em;text-transform:uppercase;
  color:var(--accent);font-weight:600;display:block;margin-bottom:0.5rem;}
.tier-for p{color:var(--text-muted);font-size:14px;line-height:1.55;}
.tier.flagship .tier-for p{color:var(--text-dim);}
.tier-cta{margin-top:auto;padding:0.7rem 1.45rem;font-size:0.9rem;}
/* small text link under a tier's list, above the CTA (e.g. "More about this session") */
.tier-more{display:inline-block;margin-top:1.1rem;font-size:0.85rem;font-weight:600;
  color:var(--accent-hi);text-decoration:none;transition:color .18s ease;}
.tier-more:hover{color:var(--accent);}
.tier-more .arr{display:inline-block;margin-left:0.25em;}
/* ── stripped / bare tiers (work-with-me v3): name + price + one line + CTA ── */
.ladder-grid.bare .tier{padding:clamp(2.2rem,3vw,3rem) clamp(1.8rem,2.4vw,2.3rem);}
.ladder-grid.bare .tier-name{margin:0 0 1.4rem;}
.ladder-grid.bare .tier-price{margin-bottom:1.2rem;}
.ladder-grid.bare .tier-summary{border-bottom:0;padding-bottom:0;margin:0 0 1.8rem;max-width:26ch;
  font-size:15.5px;line-height:1.55;color:var(--text-dim);}
.ladder-grid.bare .tier.flagship .tier-name{color:var(--text);}
.ladder-grid.bare .tier-cta{margin-top:auto;}
/* ── two-tier layout (work-with-me v22): balanced, centered pair ──
   max-width matches the reading column above (760px) so the vertical ritme lines up. */
.ladder-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;
  margin-left:auto;margin-right:auto;gap:clamp(1.2rem,2.2vw,2rem);align-items:stretch;}
/* equal-height pair (work-with-me v38): both cards stretch to the tallest of the two and
   the CTA is pushed to the bottom of each card, so the two buttons sit on one baseline.
   The list gets extra breathing room so the shorter (1:1) card fills gracefully instead of
   leaving a void above its button (replaces the old rank-7 self-sizing approach). */
.ladder-grid.two .tier-cta{margin-top:auto;}
.ladder-grid.two .tier-list{gap:0.95rem;margin-bottom:clamp(1.5rem,2.8vw,2.1rem);}
/* the shorter (1:1) card carries slack because the flagship has two more lines of copy.
   split that slack: a little extra air above its list so the whitespace reads as centered
   breathing room, not a void dumped above the button. bullet rhythm stays identical to the
   flagship for a matched pair. desktop only (side by side); on mobile the cards stack and
   size to their own content, so the tweak is scoped above the 960px breakpoint. */
@media(min-width:961px){
  .ladder-grid.two #tier-1 .tier-list-label{margin-top:1.9rem;}
}
.ladder-grid.two.bare .tier-summary{max-width:38ch;}
.ladder-note{max-width:720px;margin:clamp(2.4rem,4vw,3.2rem) auto 0;text-align:center;}
.ladder-note .honest{color:var(--text-dim);font-size:15.5px;line-height:1.65;}
.ladder-note .honest b{color:var(--text);font-weight:600;}
.ladder-note .notsure{margin-top:1.4rem;font-family:var(--display);font-weight:500;letter-spacing:-0.012em;color:var(--text);
  font-size:clamp(1.12rem,1.65vw,1.4rem);line-height:1.42;}
.ladder-note .notsure .brass{color:var(--accent);}
.ladder-note .notsure a{color:var(--accent-hi);text-decoration:none;border-bottom:1px solid var(--border-warm);}
.ladder-note .notsure a:hover{color:#F2D8B8;border-color:var(--accent);}

/* ════════ THREE WAYS — home teaser (minimal rows) ════════ */
.teaser-head{max-width:640px;margin-bottom:clamp(2.4rem,4vw,3.2rem);}
.teaser-rows{display:flex;flex-direction:column;border-top:1px solid var(--border-ink);}
.on-light .teaser-rows{border-top-color:var(--border-ink);}
.trow{display:grid;grid-template-columns:auto 1fr auto auto;gap:clamp(1rem,3vw,2.4rem);align-items:center;
  padding:clamp(1.4rem,2.6vw,1.9rem) 0;border-bottom:1px solid var(--border-ink);
  text-decoration:none;color:inherit;transition:padding-left .35s ease;}
.trow:hover{padding-left:0.5rem;}
.trow .tw-step{font-family:var(--body);font-size:0.76rem;letter-spacing:0.10em;color:var(--accent-deep);font-weight:600;}
.trow .tw-name{font-family:var(--display);font-weight:500;letter-spacing:-0.012em;font-size:clamp(1.12rem,1.85vw,1.45rem);color:var(--ink);line-height:1.18;}
.trow .tw-name small{display:block;font-family:var(--body);font-size:0.86rem;color:var(--ink-muted);
  font-weight:400;margin-top:0.25rem;letter-spacing:0;}
.trow .tw-price{font-family:var(--display);font-weight:600;letter-spacing:-0.012em;font-size:clamp(1.05rem,1.6vw,1.32rem);color:var(--accent-ink);white-space:nowrap;}
.trow .tw-arr{color:var(--accent-ink);font-size:1.1rem;transition:transform .35s ease;justify-self:end;}
.trow:hover .tw-arr{transform:translateX(5px);}
.trow.flag .tw-name{color:var(--ink);}
.trow.flag .tw-tag{display:inline-block;font-family:var(--body);font-size:0.62rem;letter-spacing:0.08em;
  text-transform:uppercase;font-weight:600;color:#5a3d1e;background:rgba(200,149,108,0.20);
  border:1px solid var(--border-ink-warm);border-radius:6px;padding:0.2rem 0.5rem;margin-left:0.6rem;vertical-align:middle;}
.teaser-foot{margin-top:clamp(2rem,4vw,2.8rem);display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2rem;}
.teaser-foot .note{color:var(--ink-muted);font-size:14.5px;max-width:44ch;line-height:1.55;}
@media(max-width:680px){
  .trow{grid-template-columns:auto 1fr;grid-template-areas:'step name' 'price arr';row-gap:0.6rem;}
  .trow .tw-step{grid-area:step;}
  .trow .tw-name{grid-area:name;}
  .trow .tw-price{grid-area:price;justify-self:start;}
  .trow .tw-arr{grid-area:arr;}
}

/* ════════ PROOF ════════ */
.proof-head{text-align:center;max-width:680px;margin:0 auto clamp(2.6rem,5vw,3.6rem);}
.proof-head .eyebrow{justify-content:center;}
.proof-head .eyebrow::before{display:none;}
.proof-head .sec-intro{margin:14px auto 0;}
.proof-sub{margin:14px auto 0;max-width:46ch;color:var(--ink-dim);
  font-size:clamp(16px,1.3vw,18.5px);line-height:1.55;}
.proof-sub .brass{color:var(--accent-ink);font-weight:600;}
.proof-feature{display:grid;grid-template-columns:260px 1fr;gap:clamp(1.6rem,3vw,2.6rem);align-items:center;
  background:var(--bg-cream);border:1px solid var(--border-ink-warm);border-radius:var(--radius-lg);
  padding:clamp(1.6rem,3vw,2.6rem);margin-bottom:clamp(1rem,2vw,1.5rem);
  box-shadow:0 30px 60px -46px rgba(60,40,20,0.55);}
.proof-feature .pf-photo{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border-ink-warm);
  box-shadow:0 20px 44px -30px rgba(60,40,20,0.6);}
.proof-feature .pf-photo img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;}
.proof-feature .qmark{font-family:var(--display);font-size:2.4rem;color:var(--accent-ink);line-height:0.5;
  display:block;margin-bottom:0.4rem;}
.proof-feature blockquote{font-family:var(--body);font-weight:400;letter-spacing:-0.005em;
  font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.5;color:var(--ink);margin-bottom:1.3rem;}
.proof-meta{display:flex;align-items:center;gap:0.65rem;}
.proof-meta .who{font-weight:600;color:var(--ink);font-size:0.98rem;}
.proof-meta .role{color:var(--ink-muted);font-size:0.85rem;}
.proof-meta .role::before{content:'\00B7';margin-right:0.5rem;color:var(--accent-ink);}

/* Real results: two clean bands.
   1) six text testimonials — a centered flex-wrap band of equal-height cards
      (two clean rows of three). No stretched/half-empty card.
   2) the two video cards + the "Share your story" CTA — their own equal-height row. */
.proof-text{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(1rem,1.8vw,1.4rem);margin-bottom:clamp(1rem,1.8vw,1.4rem);}
.proof-text .pcard{flex:0 1 calc(33.333% - 1rem);min-width:0;}
.proof-video{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.4rem);align-items:stretch;}
.pcard{display:flex;flex-direction:column;border-radius:var(--radius);
  background:var(--bg-cream);border:1px solid var(--border-ink);padding:clamp(1.4rem,2.2vw,1.8rem);
  box-shadow:0 20px 44px -40px rgba(60,40,20,0.5);}
.pcard .phead{display:flex;align-items:center;gap:0.8rem;margin-bottom:1.1rem;}
.pcard .avatar{width:52px;height:52px;border-radius:50%;overflow:hidden;flex:0 0 52px;
  border:1px solid var(--border-ink-warm);}
.pcard .avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.pcard .avatar.initial{display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;letter-spacing:-0.01em;font-size:1.35rem;color:#241405;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent-deep));}
.pcard .pname{font-weight:600;color:var(--ink);font-size:0.96rem;line-height:1.2;}
.pcard .prole{color:var(--ink-muted);font-size:0.8rem;margin-top:2px;}
.pcard blockquote{color:var(--ink-dim);font-size:15px;line-height:1.6;}
.pcard blockquote::before{content:'\201C';color:var(--accent-ink);font-family:var(--display);
  font-size:1.4rem;line-height:0;margin-right:0.1rem;vertical-align:-0.35rem;}
/* one brass highlight per review — legible accent-ink on the cream proof section */
.proof-feature blockquote .brass,.pcard blockquote .brass{color:var(--accent-ink);font-weight:600;}
/* featured (Sem) quote is regular weight — keep the brass highlight in the accent colour but not bold */
.proof-feature blockquote .brass{font-weight:400;}

/* sample / format-example card — clearly marked, never mistaken for real */
.pcard.sample{background:repeating-linear-gradient(135deg,rgba(200,149,108,0.05) 0 12px,rgba(200,149,108,0.02) 12px 24px),var(--bg-cream);
  border:1.5px dashed var(--accent-ink);}
.sample-flag{font-family:var(--body);font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;
  color:#5a3d1e;background:rgba(200,149,108,0.18);border:1px solid var(--border-ink-warm);
  border-radius:6px;padding:0.4rem 0.6rem;display:inline-block;margin-bottom:1rem;line-height:1.35;}
.result-tag{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--body);font-weight:600;
  font-size:0.84rem;letter-spacing:0.02em;color:#241405;padding:0.5rem 0.9rem;border-radius:8px;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));border:1px solid rgba(255,233,210,0.5);
  margin-bottom:1rem;}
.pcard.sample .pname{color:var(--ink-muted);font-style:italic;font-weight:500;}

/* empty slot cards */
.pcard.slot{background:transparent;border:1.5px dashed var(--border-ink);box-shadow:none;
  align-items:center;justify-content:center;text-align:center;min-height:150px;color:var(--ink-muted);}
.pcard.slot .plus{width:38px;height:38px;border-radius:50%;border:1px solid var(--border-ink-warm);
  display:flex;align-items:center;justify-content:center;color:var(--accent-ink);font-size:1.3rem;margin-bottom:0.8rem;}
.pcard.slot span{font-family:var(--body);font-size:0.7rem;letter-spacing:0.09em;text-transform:uppercase;font-weight:600;color:var(--accent-ink);}

/* closing "Share your story" card — a deliberate CTA, not a placeholder.
   Solid cream card like the real proof cards, with a brass ring around the +.
   Sits in the video row and stretches to the same height as the two videos. */
.slot-cta{align-items:center;justify-content:center;text-align:center;gap:0.95rem;
  min-height:150px;text-decoration:none;background:var(--bg-cream);
  border:1px solid var(--border-ink-warm);box-shadow:0 20px 44px -40px rgba(60,40,20,0.5);
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;}
.slot-cta .plus{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--accent-ink);
  color:var(--accent-ink);display:flex;align-items:center;justify-content:center;
  font-size:1.55rem;line-height:1;
  transition:transform .35s ease,background .35s ease,color .35s ease;}
.slot-cta .slot-label{font-family:var(--display);font-weight:700;letter-spacing:-0.014em;
  font-size:1.18rem;color:var(--ink);line-height:1.2;}
.slot-cta .slot-sub{font-family:var(--body);font-size:0.68rem;letter-spacing:0.09em;font-weight:600;
  text-transform:uppercase;color:var(--accent-ink);}
.slot-cta:hover{transform:translateY(-2px);border-color:var(--accent-ink);
  box-shadow:0 26px 52px -36px rgba(60,40,20,0.6);}
.slot-cta:hover .plus{background:var(--accent-ink);color:#fff;transform:scale(1.06);}

/* video testimonial card — obsidian/brass, plays on click with sound */
.pcard.vidcard{padding:0;overflow:hidden;background:var(--bg-deep);
  border:1px solid var(--border-ink-warm);box-shadow:0 24px 50px -34px rgba(60,40,20,0.6);}
.vid-media{position:relative;width:100%;height:100%;min-height:100%;aspect-ratio:4/5;
  cursor:pointer;background:#070605;border-radius:var(--radius);overflow:hidden;}
.vid-el{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 26%;display:block;}
.vid-media::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .3s ease;
  background:linear-gradient(180deg,rgba(7,6,5,0.22) 0%,rgba(7,6,5,0) 26%,rgba(7,6,5,0) 52%,rgba(7,6,5,0.9) 100%);}
.vid-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,233,210,0.55);cursor:pointer;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 36px -14px rgba(0,0,0,0.75);transition:transform .18s ease,opacity .25s ease;}
.vid-play svg{width:26px;height:26px;fill:#180d02;margin-left:3px;}
.vid-play:hover{transform:translate(-50%,-50%) scale(1.07);}
.vid-tag{position:absolute;top:0.85rem;left:0.85rem;z-index:2;font-family:var(--body);
  font-size:0.63rem;letter-spacing:0.09em;text-transform:uppercase;font-weight:600;color:#F4E4D0;
  background:rgba(7,6,5,0.55);border:1px solid rgba(200,149,108,0.4);border-radius:6px;
  padding:0.32rem 0.55rem;backdrop-filter:blur(4px);transition:opacity .25s ease;}
.vid-name{position:absolute;left:1.05rem;bottom:0.95rem;z-index:2;display:flex;flex-direction:column;gap:2px;
  transition:opacity .25s ease;}
.vid-name .pname{font-weight:600;color:#fff;font-size:0.98rem;line-height:1.2;}
/* role in Inter (matches the text cards), just a lighter tone for legibility on dark */
.vid-name .prole{color:#D8CEC1;font-size:0.8rem;font-family:var(--body);letter-spacing:0;}
.vid-media.playing{cursor:default;}
.vid-media.playing::after{opacity:0;}
.vid-media.playing .vid-play,.vid-media.playing .vid-name,.vid-media.playing .vid-tag{opacity:0;pointer-events:none;}
.proof-cta{text-align:center;margin-top:clamp(2.4rem,4vw,3.2rem);}

/* ════════ WHO I AM / MY STORY ════════ */
/* One centered, balanced reading column — mirrors the Work-with-me (.how-wrap)
   system so the two story pages read as a pair. Centered display statements
   (kop + pivot) and a centered framed portrait feature; running body left-aligned
   inside the column. No side-by-side grid, so there is never an empty half. */
.story-wrap{--col:min(100%,700px);
  max-width:760px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;
  gap:var(--stack-gap);}

/* KOP — centered page statement (H1) */
.story-top{width:var(--col);text-align:center;}
/* the my-story page hero is a LONG two-sentence statement, so it stays at the 700
   section weight (not the 800 payoff weight) to read as a composed narrative line,
   not a heavy bold block; tracking pulled in for the sans metrics. */
.story-wrap h1{font-family:var(--display);font-weight:700;letter-spacing:-0.021em;
  font-size:var(--fs-h1);line-height:1.06;color:var(--text);
  max-width:18ch;margin:0 auto;text-wrap:balance;}
.story-wrap h1 .brass{color:var(--accent);}

/* PORTRAIT — framed feature (shared photo-frame look) */
.story-portrait{margin:0;width:100%;max-width:600px;}
.story-portrait .photo-frame img{aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;}

/* OPENING — kop + intro copy left, a smaller framed portrait floated right beside them.
   The copy wraps under the photo (flow-root contains the float), so there is no empty
   column. The pivot + continued body below are unaffected. */
.story-intro{width:var(--col);display:flow-root;}
.story-intro h1{text-align:left;max-width:none;margin:0 0 1.15rem;}
.story-intro .story-portrait{float:right;width:clamp(220px,38%,300px);max-width:300px;
  margin:0.35rem 0 1.3rem 2rem;}
/* let the intro copy fill the column width and wrap around the float */
.story-intro .story-body{width:auto;}
.story-intro .story-body.prose p.lead{max-width:none;}
.story-intro .story-body.prose p:first-of-type{margin-top:0;}
/* mobile: stack cleanly — photo on top (centered, smaller), then kop + copy */
@media(max-width:640px){
  .story-intro .story-portrait{float:none;width:min(300px,80%);margin:0 auto 1.6rem;}
  .story-intro h1{text-align:center;}
}

/* BODY — running copy, left-aligned inside the centered column */
.story-body{width:var(--col);}
/* cap the running body at a comfortable measure (~64ch) while the 700px column still
   holds headings, pull-quotes and photos, so the rhythm is unchanged (rank 8) */
.story-body.prose p{max-width:64ch;}
.story-body.prose p:not(.lead){font-size:var(--fs-body);}

/* PIVOT — the turning point of the story, a centered display statement (the peak).
   Size comes from the shared .peak class so it matches the Work-with-me pull-quote. */
.story-emph{width:var(--col);font-family:var(--display);font-weight:700;letter-spacing:-0.022em;
  line-height:1.12;color:var(--text);
  text-align:center;text-wrap:balance;max-width:24ch;margin:0 auto;}
.story-emph .brass{color:var(--accent);}

/* SIGNATURE — small letter sign-off, left in the reading flow */
.signature{width:var(--col);margin:0;font-family:var(--body);font-weight:400;font-size:var(--fs-body);
  line-height:1.68;color:var(--text-dim);letter-spacing:0;}
.signature .heart{color:var(--accent);font-style:normal;}
.signature .name{color:var(--accent);}

/* closing CTA under the signature — the highest-intent moment of the story page.
   The .story-wrap gap already separates the signature from the CTA, so no extra
   margin-top here (removes the doubled sign-off void, rank 21). */
.story-cta{width:var(--col);display:flex;justify-content:center;margin-top:0;}

/* breathing room under the signature before the footer */
.story-head{padding-bottom:clamp(3.5rem,7vw,5.5rem);}

@media(max-width:600px){
  /* keep the portrait a comfortable, non-dominant feature on small screens */
  .story-portrait{max-width:320px;}
}

/* ════════ YOUR LIFE (outcome) ════════ */
.life-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(2.2rem,5vw,4.4rem);align-items:center;}
.life-copy .h-display{margin:14px 0 26px;max-width:18ch;}
.life-copy .prose p.close{font-family:var(--display);font-weight:500;letter-spacing:-0.014em;
  font-size:clamp(1.28rem,2vw,1.62rem);line-height:1.38;color:var(--text);max-width:26ch;margin-top:1.8rem;}
.life-copy .prose p.close .brass{color:var(--accent);}
.life-photo .photo-frame img{aspect-ratio:5/4;object-fit:cover;}

/* ════════ CLOSER ════════ */
.closer{text-align:center;}
.closer .h-display{max-width:20ch;margin:0 auto 1.6rem;}
.closer .sub{color:var(--text-dim);font-size:clamp(17px,1.3vw,19.5px);line-height:1.62;
  max-width:52ch;margin:0 auto 2.4rem;}
.closer .cta-row{justify-content:center;}
.closer .cta-note{margin-top:1.3rem;}

/* ════════ footer — minimal: name + links + copyright ════════ */
.foot{position:relative;z-index:2;
  background:linear-gradient(180deg,#15110C 0%,var(--bg) 40%);border-top:1px solid var(--border);
  padding:clamp(2.8rem,5vw,3.8rem) clamp(1.5rem,6vw,4rem) clamp(2.4rem,4vw,3rem);
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem 2rem;flex-wrap:wrap;}
.foot-name{font-family:var(--display);font-weight:700;letter-spacing:-0.012em;
  font-size:clamp(1.08rem,1.55vw,1.26rem);color:var(--text);}
.foot-name .brass{color:var(--accent);}
.foot-links{display:flex;gap:1.4rem 1.9rem;flex-wrap:wrap;}
.foot-links a{color:var(--text-muted);text-decoration:none;font-size:0.9rem;font-weight:600;transition:color 0.3s;}
.foot-links a:hover{color:var(--accent-hi);}
.foot .tiny{font-family:var(--body);font-size:0.64rem;letter-spacing:0.08em;text-transform:uppercase;
  font-weight:600;color:var(--text-muted);width:100%;margin-top:0.4rem;}
/* the fixed mobile action bar shows <=760px; give the footer room so it never
   covers the links (M4) */
@media(max-width:760px){
  .foot{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));}
}
@media(max-width:640px){
  .foot{flex-direction:column;align-items:flex-start;gap:1.2rem;}
  /* footer links are the de-facto mobile nav — real 44px tap targets, stacked (M5) */
  .foot-links{flex-direction:column;gap:0.15rem;width:100%;}
  .foot-links a{display:flex;align-items:center;min-height:44px;padding:0.4rem 0;font-size:1rem;}
}

/* ════════ RESPONSIVE ════════ */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:clamp(2.4rem,7vw,3.4rem);}
  /* single-column hero: figure drops back into flow, sits centered below the copy, scaled down */
  .hero-figure{position:static;width:min(320px,72vw);margin:0.4rem auto 0;right:auto;bottom:auto;}
  .hero-figure .hero-caption{position:static;text-align:center;margin-top:0.9rem;}
  /* single-column hero: the credentials and the payoff wrap instead of shrinking, so
     the type stays readable on phones; the fitter becomes a no-op (wrapped lines never
     exceed the column). The payoff steps down to a phone-friendly clamp. */
  .hero .cred-track .kl{white-space:normal;}
  .hero h1{white-space:normal;font-size:clamp(2.35rem,9vw,3.1rem);}
  .ladder-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto;gap:1.4rem;}
  .ladder-grid.two{grid-template-columns:1fr;max-width:520px;gap:1.4rem;}
  .ladder-grid.two.bare .tier-summary{max-width:none;}
  .proof-feature{grid-template-columns:1fr;text-align:center;}
  .proof-feature .pf-photo{max-width:200px;margin:0 auto;}
  .proof-meta{justify-content:center;}
  /* tablet: text cards go two-up; video row two-up with the CTA closing full width */
  .proof-text .pcard{flex:0 1 calc(50% - 0.7rem);}
  .proof-video{grid-template-columns:repeat(2,1fr);}
  .proof-video .slot-cta{grid-column:span 2;}
  .life-grid{grid-template-columns:1fr;gap:2.6rem;}
  .life-photo{order:-1;max-width:520px;margin:0 auto;}
}
@media(max-width:760px){
  .mobile-bar{display:block;}
  /* single column: text + video stack one-up, centered */
  .proof-text{max-width:440px;margin-left:auto;margin-right:auto;}
  .proof-text .pcard{flex:0 1 100%;}
  .proof-video{grid-template-columns:1fr;max-width:440px;margin:0 auto;}
  .proof-video .slot-cta{grid-column:auto;}
  .hero{min-height:auto;padding-top:clamp(6.5rem,20vw,8rem);}
}
@media(max-width:520px){
  .hero-ctas .cta-row{gap:1.1rem;}
  .cta-pill{padding:1rem 1.7rem;}
  .signature{text-align:left;}
}