/* ============================================================
   POLLY — Somatic Noir / Bold Editorial
   Single-file landing page. Contact links are placeholders (#).
   Swap the portrait images by setting --img on .portrait blocks.
   ============================================================ */

/* metric-matched fallback for Fraunces: Georgia adjusted so the
   font-display:swap reflow barely moves the huge hero type (CLS fix) */
@font-face{
  font-family:"Fraunces-fallback";
  src:local("Georgia");
  size-adjust:98%;
  ascent-override:96%;
  descent-override:24%;
  line-gap-override:0%;
}

:root{
  --paper:      #f1ece2;   /* warm off-white */
  --paper-2:    #e7e0d2;   /* deeper paper */
  --paper-3:    #ded5c3;
  --ink:        #17130e;   /* warm near-black */
  --ink-2:      #3f392f;
  --ink-soft:   #6b6355;
  --clay:       #bf5236;   /* terracotta accent */
  --clay-deep:  #8f3c25;
  --line:       rgba(23,19,14,.16);
  --line-soft:  rgba(23,19,14,.09);

  --ff-display: "Fraunces", "Fraunces-fallback", Georgia, serif;
  --ff-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-mono:    "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --pad: clamp(1.25rem, 5vw, 6.5rem);
  --maxw: 1500px;

  --e: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:clamp(1rem,.55rem + .55vw,1.18rem);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* film grain overlay --------------------------------------------------- */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:9999;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

::selection{ background:var(--clay); color:var(--paper); }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---- typography ------------------------------------------------------ */
.kicker{
  font-family:var(--ff-mono);
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:lowercase;
  color:var(--clay-deep);
  display:inline-flex; align-items:center; gap:.6em;
  margin:0 0 1.4rem;
}
.kicker::before{
  content:""; width:2.2rem; height:1px; background:var(--clay);
  display:inline-block;
}

h1,h2,h3{
  font-family:var(--ff-display);
  font-weight:600;
  line-height:.98;
  letter-spacing:-.02em;
  margin:0;
  font-optical-sizing:auto;
}
em, .it{ font-style:italic; }
.ink-clay{ color:var(--clay); }

/* section number tag */
.num{
  font-family:var(--ff-mono);
  font-size:.8rem;
  color:var(--ink-soft);
  letter-spacing:.05em;
}

/* ---- buttons --------------------------------------------------------- */
.btn{
  --bg:var(--ink); --fg:var(--paper);
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--ff-mono); font-size:.9rem; letter-spacing:.01em;
  padding:1.05em 1.7em;
  border-radius:100px;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--ink);
  cursor:pointer;
  transition:color .5s var(--e), transform .35s var(--e);
  z-index:0;
  will-change:transform;
}
.btn span{ position:relative; z-index:2; }
.btn .arrow{ transition:transform .45s var(--e); }
.btn::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--clay);
  transform:translateY(101%);
  transition:transform .5s var(--e);
}
.btn:hover{ color:var(--paper); transform:translateY(-2px); }
.btn:hover::before{ transform:translateY(0); }
.btn:hover .arrow{ transform:translate(4px,-4px); }

.btn--ghost{
  --bg:transparent; --fg:var(--ink);
  border-color:var(--line);
}
.btn--clay{
  --bg:var(--clay-deep); --fg:var(--paper);
  border-color:var(--clay-deep);
}
.btn--clay::before{ background:var(--ink); }

/* ==================================================================== */
/* NAV                                                                  */
/* ==================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.15rem var(--pad);
  transition:background .4s var(--e), padding .4s var(--e), box-shadow .4s var(--e);
}
.nav.scrolled{
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  padding-top:.8rem; padding-bottom:.8rem;
  box-shadow:0 1px 0 var(--line-soft);
}
.brand{
  font-family:var(--ff-mono); font-size:1.05rem; letter-spacing:.02em;
  display:inline-flex; align-items:center;
}
.brand b{ font-weight:500; }
.brand .dot{ color:var(--clay); }
.nav-links{ display:flex; align-items:center; gap:2rem; }
.nav-links a{
  font-family:var(--ff-mono); font-size:.82rem; color:var(--ink-2);
  position:relative;
}
.nav-links a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0;
  background:var(--clay); transition:width .4s var(--e);
}
.nav-links a:not(.btn):hover::after{ width:100%; }
.nav-links a:not(.btn):hover{ color:var(--ink); }
.nav-links a.btn{ color:var(--fg); }           /* keep button text = its own --fg, not nav ink */
.nav .btn{ padding:.7em 1.25em; min-height:3rem; }  /* 48px touch target */
.brand{ padding:.55em 0; }                          /* logo touch target */

/* hamburger — hidden on desktop */
.nav-toggle{
  display:none;
  width:3rem; height:3rem;                          /* 48px touch target */
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
  background:transparent; border:1px solid var(--line); border-radius:100px;
  cursor:pointer; padding:0;
}
.nav-toggle .bar{
  width:1.15rem; height:1.5px; background:var(--ink);
  transition:transform .35s var(--e), opacity .3s var(--e);
}
.nav.open .nav-toggle .bar:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav.open .nav-toggle .bar:nth-child(2){ opacity:0; }
.nav.open .nav-toggle .bar:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.nav-links{ margin-left:auto; }                     /* keep links grouped right, as before */
.nav-actions{ display:flex; align-items:center; gap:.7rem; margin-left:2rem; }

@media (max-width:860px){
  .nav-toggle{ display:inline-flex; }
  .nav.open{ background:var(--paper); box-shadow:0 1px 0 var(--line-soft); }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    display:none; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:.4rem var(--pad) 1rem;
  }
  .nav.open .nav-links{ display:flex; }
  .nav-links a:not(.btn){
    display:block; padding:.95em .2em;               /* ≥48px touch rows */
    font-size:.95rem; border-bottom:1px solid var(--line-soft);
  }
  .nav-links a:not(.btn)::after{ display:none; }
}
@media (max-width:520px){
  .nav{ padding-left:1.05rem; padding-right:1.05rem; }
  .nav .btn{ padding:.6em .95em; font-size:.78rem; }
  .brand{ font-size:.98rem; }
  .nav-links{ padding-left:1.05rem; padding-right:1.05rem; }
}

/* ==================================================================== */
/* HERO                                                                 */
/* ==================================================================== */
.hero{
  padding:clamp(8rem,15vh,11rem) var(--pad) clamp(3rem,6vw,5rem);
  max-width:var(--maxw); margin:0 auto;
  display:grid;
  grid-template-columns:1.35fr .9fr;
  gap:clamp(1.5rem,4vw,4rem);
  align-items:end;
}
.hero-head h1{
  font-size:clamp(3.4rem, 2rem + 9vw, 11rem);
  font-weight:340;
  letter-spacing:-.035em;
}
.hero-head h1 b{ font-weight:600; }
.hero-head h1 .swash{ font-style:italic; font-weight:400; color:var(--clay); }
.hero-lede{
  font-family:var(--ff-display);
  font-size:clamp(1.35rem, .9rem + 1.7vw, 2.35rem);
  font-weight:300; line-height:1.24; letter-spacing:-.015em;
  max-width:30ch; margin:2rem 0 0;
  color:var(--ink);
}
.hero-lede b{ font-weight:600; }
.hero-sub{
  max-width:44ch; margin:1.6rem 0 0; color:var(--ink-2);
  font-size:1.02rem;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.3rem; }
.hero-mini-links{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }
.trust-row{
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin-top:2.4rem;
  font-family:var(--ff-mono); font-size:.85rem; color:var(--ink-2);
  letter-spacing:.02em;
}
.trust-row span{ display:inline-flex; align-items:center; gap:.55em; }
.trust-row span::before{ content:"✳"; color:var(--clay); font-size:.8em; }

/* portrait block ------------------------------------------------------- */
.portrait{
  position:relative;
  aspect-ratio:3/3.9;
  border-radius:2px;
  overflow:hidden;
  background:
    linear-gradient(150deg, rgba(23,19,14,.06), rgba(23,19,14,.34)),
    var(--img, none),
    radial-gradient(120% 90% at 30% 20%, var(--paper-2), var(--paper-3) 55%, #b9ad97);
  background-size:cover; background-position:center;
  filter:grayscale(1) contrast(1.03);
  box-shadow:0 30px 60px -30px rgba(23,19,14,.5);
}
.portrait::before{  /* grain inside frame */
  content:""; position:absolute; inset:0; opacity:.35; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.portrait .cap{
  position:absolute; left:.9rem; bottom:.9rem; z-index:2;
  font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.05em;
  color:#fff; background:rgba(23,19,14,.62);
  border:1px solid rgba(255,255,255,.3); padding:.35em .7em; border-radius:2px;
}
.portrait .tag{
  position:absolute; top:.9rem; right:.9rem; z-index:2;
  font-family:var(--ff-mono); font-size:.74rem; color:#fff;
  background:rgba(23,19,14,.62); padding:.35em .7em; border-radius:2px;
  letter-spacing:.06em;
}
@media (max-width:860px){
  .hero{ grid-template-columns:1fr; align-items:start; }
  .portrait{ aspect-ratio:3/2.5; }
}

/* ==================================================================== */
/* MARQUEE                                                              */
/* ==================================================================== */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:1.1rem 0; overflow:hidden; white-space:nowrap;
  background:var(--ink); color:var(--paper);
}
.marquee-track{ display:inline-flex; will-change:transform; animation:scroll 32s linear infinite; }
.marquee-track span{
  font-family:var(--ff-mono); font-style:normal; font-weight:500;
  text-transform:uppercase; letter-spacing:.08em;
  font-size:clamp(1rem,.75rem + 1.1vw,1.6rem);
  padding:0 1.4rem; display:inline-flex; align-items:center; gap:1.4rem;
}
.marquee-track span::after{ content:"✳"; color:var(--clay); font-style:normal; font-size:.7em; }
@keyframes scroll{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* ==================================================================== */
/* GENERIC SECTION                                                      */
/* ==================================================================== */
section{ position:relative; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:clamp(4.5rem,9vw,9rem) var(--pad); }
.sec-head{ display:flex; justify-content:space-between; align-items:baseline; gap:2rem; flex-wrap:wrap; margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.sec-head .kicker{ margin-bottom:0; }

/* ---- SOS STATE ------------------------------------------------------- */
.sos{ background:var(--paper); }
.sos h2{
  font-size:clamp(3rem, 1.6rem + 8vw, 9.5rem);
  font-weight:300; letter-spacing:-.03em;
}
.sos h2 b{ font-weight:600; }
.sos h2 sup{ font-size:.28em; font-family:var(--ff-mono); font-weight:500; vertical-align:super; top:-.2em; }
.sos-def{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.5rem,1rem + 2vw,2.8rem); line-height:1.22; letter-spacing:-.015em;
  max-width:24ch; margin:2.4rem 0 0;
}
.sos-def em{ color:var(--clay); }
.sos-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,5rem);
  margin-top:clamp(3rem,6vw,5rem); align-items:start;
}
.decode{
  font-family:var(--ff-display); font-size:clamp(1.8rem,1.2rem + 2.5vw,3.4rem);
  font-weight:400; line-height:1.05; letter-spacing:-.02em;
}
.decode b{ font-weight:600; }
.decode .strike{ position:relative; color:var(--ink-soft); }
.decode .strike::after{ content:""; position:absolute; left:-2%; right:-2%; top:52%; height:2px; background:var(--clay); transform:rotate(-2deg); }
.chips{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:2rem; }
.chip{
  font-family:var(--ff-mono); font-size:.82rem; letter-spacing:.01em;
  padding:.5em 1em; border:1px solid var(--line); border-radius:100px;
  color:var(--ink-2); transition:.35s var(--e); cursor:default;
}
.chip:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); transform:translateY(-2px); }
.sos-note{ margin-top:2rem; color:var(--ink-soft); font-size:.98rem; max-width:40ch; }
.sos-note b{ color:var(--ink); font-weight:600; }

/* "how do you know" empathy list */
.knowlist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.knowlist li{
  position:relative;
  padding:1.15rem 0 1.15rem 2.6rem; border-bottom:1px solid var(--line-soft);
  font-size:1.06rem; color:var(--ink-2);
}
.knowlist li::before{
  content:counter(k,decimal-leading-zero); counter-increment:k;
  position:absolute; left:0; top:1.32rem;
  font-family:var(--ff-mono); font-size:.72rem; color:var(--clay);
}
.knowlist li em{ font-style:italic; }
.knowlist{ counter-reset:k; }
.knowlist li em{ color:var(--ink); }
@media (max-width:760px){ .sos-grid{ grid-template-columns:1fr; } }

/* ---- THE SOS FORMULA (chain diagram) --------------------------------- */
.chain-sec{ background:var(--paper); overflow:hidden; }
/* big wordmark treatment, matching the hero's "SOS / Coaching." scale */
.chain-h2{ line-height:.92; }
.chain-h2-sos, .chain-h2-formula{
  display:inline-block; font-size:clamp(3.4rem, 2rem + 9vw, 11rem);
  font-weight:340; letter-spacing:-.035em;
}
.chain-h2-sos{ color:var(--ink); }
.chain-h2-formula{ color:var(--clay); font-style:italic; }
.chain-h2-sub{
  font-family:var(--ff-mono); font-size:.85rem; letter-spacing:.08em;
  text-transform:lowercase; color:var(--ink-soft); margin:.6rem 0 0;
}
.chain-diagram{
  position:relative; width:min(100%,560px); aspect-ratio:800/1000;
  margin:clamp(3rem,6vw,4.5rem) auto 0;
}
.chain-line{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.chain-line path{
  fill:none; stroke:var(--clay); stroke-width:1.4; opacity:.55;
  stroke-linecap:round;
}
.chain-node{
  position:absolute; z-index:3; width:37%; aspect-ratio:300/150;
  transform:translate(-50%,-50%); text-align:center;
}
.chain-oval{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.chain-oval ellipse{ fill:var(--paper); stroke:var(--clay); stroke-width:1.3; }
/* a small evolving symbol per link — tight/scattered/hazy/closing, opening
   into the bloom on the result oval below. Own visual language, not a copy.
   Pinned to the oval's upper third, independent of the label below — it
   doesn't push the wording around or share its vertical centering. */
.chain-icon{
  position:absolute; top:24%; left:50%; transform:translate(-50%,-50%);
  z-index:1; width:20px; height:20px; opacity:.9;
}
.chain-label{
  position:absolute; top:58%; left:50%; transform:translate(-50%,-50%);
  z-index:1; width:100%; font-family:var(--ff-display); font-weight:500;
  font-style:italic; letter-spacing:-.01em; color:var(--ink);
  font-size:clamp(.92rem,.7rem + .9vw,1.2rem); text-align:center;
  padding:0 1.4rem; line-height:1.2;
}
.chain-node.n1{ left:26%;   top:14%; }
.chain-node.n2{ left:62%;   top:36%; }
.chain-node.n3{ left:26%;   top:58%; }
.chain-node.n4{ left:62%;   top:82%; width:42.5%; aspect-ratio:340/160; }

/* explanation table, one row per link — mono voice, same register as the
   hero's credential line, kept fully separate from the diagram above it */
.chain-table{
  max-width:640px; margin:clamp(2.6rem,5vw,3.8rem) auto 0;
  border-top:1px solid var(--line-soft);
}
.ct-row{
  display:grid; grid-template-columns:minmax(0,15ch) 1fr; gap:1rem 2rem;
  align-items:baseline; padding:1.1rem 0; border-bottom:1px solid var(--line-soft);
}
.ct-step{
  font-family:var(--ff-display); font-weight:600; font-style:italic;
  color:var(--clay-deep); font-size:1.02rem; letter-spacing:-.01em;
}
.ct-desc{
  font-family:var(--ff-mono); font-size:.82rem; line-height:1.65;
  letter-spacing:.01em; color:var(--ink-2);
}
.chain-note{
  max-width:52ch; margin:clamp(2.4rem,5vw,3.6rem) auto 0; text-align:center;
  color:var(--ink-2); font-size:1.02rem; line-height:1.6;
}
.chain-note b{ color:var(--ink); font-weight:600; }
/* full-bleed photo moment — breaks out to the viewport edge regardless of
   .wrap's padding; .chain-sec has overflow:hidden so this can't cause a
   horizontal scrollbar. The payoff line sits on top of it, not below. */
/* simple half/half split — photo one side, text the other. No breakout,
   no overlay: plain grid, so it's easy to actually control. */
.chain-photo-split{
  position:relative; z-index:3; display:grid;
  grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center;
  margin-top:clamp(3.5rem,7vw,5.5rem);
}
.cps-photo{
  margin:0; height:clamp(420px,46vw,620px); overflow:hidden;
}
.cps-photo img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1); }
.cps-text{
  align-self:start; margin-top:.4rem;
  font-family:var(--ff-body); font-weight:400; font-style:normal;
  font-size:clamp(1.2rem,.9rem + 1vw,1.6rem); line-height:1.55;
  color:var(--ink); max-width:26ch;
}
.cps-text b{ font-weight:700; color:var(--ink); }
.cps-text em{
  font-family:var(--ff-display); font-style:italic; font-weight:500;
  color:var(--clay-deep);
}
@media (min-width:761px){
  /* photo bleeds to the true viewport edge on the left, no gap, no
     rounding — cancels both .wrap's own padding AND, on screens wider
     than --maxw, the extra centering margin outside .wrap itself, so no
     beige shows past it at any width. */
  .cps-photo{
    margin-left:calc(-1 * (var(--pad) + max(0px, (100vw - var(--maxw)) / 2)));
    width:calc(100% + var(--pad) + max(0px, (100vw - var(--maxw)) / 2));
  }
}

/* result — the flip side of the chain: a final, static oval below the photo */
/* one shared position:relative context spanning table -> note -> photo ->
   result, so a single thread can run through all of it. The full-bleed
   photo still escapes this (and .wrap) via its own viewport-relative
   transform — nesting doesn't affect that technique. */
.chain-flow{ position:relative; }
.chain-flow-line{
  position:absolute; inset:0; width:100%; height:100%; overflow:visible;
  z-index:2; pointer-events:none;
}
.chain-flow-line path{
  fill:none; stroke:var(--clay); stroke-width:.6; opacity:.63;
  stroke-linecap:round;
}
.chain-result{
  position:relative; z-index:3; display:flex; flex-direction:column;
  align-items:center; text-align:center;
  max-width:480px; margin:clamp(3rem,6vw,4.5rem) auto 0;
}
.cr-oval{
  position:relative; width:min(100%,280px); aspect-ratio:300/150;
  margin-top:1.3rem;
}
.cr-icon{
  position:absolute; top:24%; left:50%; transform:translate(-50%,-50%);
  z-index:1; width:26px; height:26px; opacity:.9;
}
.cr-oval .chain-label{ top:58%; font-size:clamp(1rem,.8rem + .8vw,1.2rem); }
.cr-line{
  margin:1.5rem 0 0; font-size:1.05rem; color:var(--ink-2); max-width:32ch; line-height:1.6;
}
.cr-line em{ font-style:italic; color:var(--clay-deep); font-weight:600; }
@media (max-width:640px){
  .chain-diagram{ width:100%; }
  .chain-icon{ width:17px; height:17px; }
  .chain-label{ font-size:.95rem; padding:0 1rem; }
  .ct-row{ grid-template-columns:1fr; gap:.3rem; padding:1rem 0; }
  .chain-note{ text-align:left; }
  .chain-photo-split{ grid-template-columns:1fr; text-align:center; }
  .cps-photo{ height:60vw; max-height:340px; }
  .cps-text{ max-width:none; margin:0 auto; }
  .cr-icon{ width:22px; height:22px; }
}

/* ---- WITHOUT SAFETY (dark) ------------------------------------------ */
.dark{ background:var(--ink); color:var(--paper); }
.dark .kicker{ color:#e0a48f; }
.dark .kicker::before{ background:var(--clay); }
.dark .num{ color:rgba(241,236,226,.5); }
.without h2{
  font-size:clamp(3.4rem,2rem + 9vw,11rem); font-weight:300; line-height:.9;
  letter-spacing:-.04em; color:var(--paper);
}
.without h2 .out{ -webkit-text-stroke:1px var(--paper); color:transparent; }
.cost-list{ list-style:none; margin:clamp(2.5rem,5vw,4rem) 0 0; padding:0; }
.cost-list li{
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:baseline;
  padding:1.5rem 0; border-top:1px solid rgba(241,236,226,.14);
  font-family:var(--ff-display); font-weight:300; letter-spacing:-.01em;
  font-size:clamp(1.35rem,.9rem + 1.6vw,2.4rem); line-height:1.18;
  color:rgba(241,236,226,.92);
  transition:.4s var(--e);
}
.cost-list li:last-child{ border-bottom:1px solid rgba(241,236,226,.14); }
.cost-list li .n{ font-family:var(--ff-mono); font-size:.75rem; color:#e9b7a6; font-weight:500; }
.cost-list li em{ color:#e9b7a6; font-style:italic; }
.cost-list li:hover{ padding-left:1rem; color:var(--paper); }

/* ---- METHOD ---------------------------------------------------------- */
.method .lead{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.6rem,1.1rem + 2vw,3rem); line-height:1.15; letter-spacing:-.02em;
  max-width:20ch;
}
.method .lead b{ font-weight:600; }
.mrow{
  display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);
  padding:clamp(2rem,4vw,3.2rem) 0; border-top:1px solid var(--line);
  align-items:start;
}
.mrow:last-of-type{ border-bottom:1px solid var(--line); }
.mrow .big{
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(2.6rem,1.5rem + 4.5vw,5.5rem); line-height:.9; letter-spacing:-.03em;
  color:var(--ink);
}
.mrow .big small{ font-size:.32em; font-weight:400; color:var(--clay-deep); display:block; font-family:var(--ff-mono); letter-spacing:.02em; margin-top:.6em; }
.mrow h3{ font-size:clamp(1.5rem,1rem + 1.4vw,2.2rem); font-weight:500; margin-bottom:.7rem; }
.mrow p{ margin:0; color:var(--ink-2); max-width:46ch; }
@media (max-width:760px){ .mrow{ grid-template-columns:1fr; gap:.8rem; } }

/* ---- EXPERTISE / PROOF band ----------------------------------------- */
.proof{ background:var(--paper-2); }
.proof .lead{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.5rem,1rem + 2vw,2.9rem); line-height:1.18; letter-spacing:-.018em;
  max-width:26ch;
}
.proof .lead b{ font-weight:600; }
.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  margin-top:clamp(3rem,6vw,5rem);
  background:var(--line); border:1px solid var(--line);
}
.stat{ background:var(--paper-2); padding:clamp(1.6rem,3vw,2.6rem) 1.4rem; }
.stat .v{ font-family:var(--ff-display); font-weight:600; font-size:clamp(2.4rem,1.4rem + 4vw,4.4rem); line-height:1; letter-spacing:-.03em; }
.stat .v .u{ color:var(--clay); }
.stat .l{ font-family:var(--ff-mono); font-size:.74rem; color:var(--ink-soft); margin-top:.8rem; letter-spacing:.02em; text-transform:lowercase; }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* about: photo + bio two-column */
.about-grid{
  display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(2rem,5vw,4.5rem);
  margin-top:clamp(2.5rem,5vw,4rem); align-items:start;
}
.about-portrait{
  position:relative; aspect-ratio:3/3.7; border-radius:2px; overflow:hidden;
  background:radial-gradient(120% 90% at 30% 20%, var(--paper-3), #cabfa9 60%, #b0a389);
  box-shadow:0 30px 60px -34px rgba(23,19,14,.5);
}
.about-portrait img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 22%;
  filter:grayscale(1) contrast(1.03);
}
.about-portrait::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(150deg, rgba(23,19,14,.05), rgba(23,19,14,.3));
}
.about-portrait .tag{
  position:absolute; left:.9rem; bottom:.9rem; z-index:2;
  font-family:var(--ff-mono); font-size:.72rem; color:#fff;
  background:rgba(23,19,14,.62); padding:.35em .7em; border-radius:2px; letter-spacing:.05em;
}
.about-bio p{ margin:0 0 1.05rem; color:var(--ink-2); max-width:52ch; }
.about-bio p:last-child{ margin-bottom:0; }
.about-bio .big-line{
  font-family:var(--ff-display); font-weight:400; font-style:italic;
  font-size:clamp(1.3rem,1rem + 1.2vw,1.9rem); line-height:1.25; letter-spacing:-.01em;
  color:var(--ink); margin:1.4rem 0;
}
.about-bio .lede-open{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.4rem,1rem + 1.6vw,2.3rem); line-height:1.2; letter-spacing:-.015em;
  color:var(--ink); max-width:24ch; margin:0 0 1.6rem;
}
.about-bio .lede-open b{ font-weight:600; }
.creds{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-top:clamp(1.8rem,4vw,2.6rem);
  padding-top:clamp(1.5rem,3vw,2.2rem); border-top:1px solid var(--line);
}
.cred{
  font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.01em;
  padding:.5em 1em; border:1px solid var(--line); border-radius:100px; color:var(--ink-2);
}
.cred b{ color:var(--ink); font-weight:500; }
@media (max-width:760px){ .about-grid{ grid-template-columns:1fr; } .about-portrait{ aspect-ratio:3/2.6; max-width:360px; } }

/* ---- READY BADGE (rotating seal) -------------------------------------- */
.ready-badge{ width:clamp(84px,9vw,120px); height:clamp(84px,9vw,120px); flex-shrink:0; }
.ready-badge--lg{ width:clamp(120px,14vw,180px); height:clamp(120px,14vw,180px); margin-bottom:1.6rem; }
.ready-badge--xl{ width:clamp(160px,20vw,260px); height:clamp(160px,20vw,260px); }
.ready-badge--hero{ width:clamp(70px,10vw,150px); height:clamp(70px,10vw,150px); }
.hero-name-row{ display:inline-flex; align-items:center; gap:clamp(.8rem,2.2vw,1.8rem); }
.shift-visual-row{ display:flex; align-items:center; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3rem); }
.ready-badge svg{ width:100%; height:100%; display:block; animation:badgeSpin 26s linear infinite; }
.ready-badge:hover svg{ animation-play-state:paused; }
.ready-badge .badge-bg{ fill:var(--clay-deep); }
.ready-badge .badge-dot{ fill:var(--paper); }
.ready-badge text{ font-family:var(--ff-mono); font-size:7.2px; letter-spacing:.3em; fill:var(--paper); }
@keyframes badgeSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .ready-badge svg{ animation:none; } }

/* ---- expandable "learn more" (about bio + tier cards) ----------------- */
.more-toggle{ margin-top:1.4rem; }
.more-toggle summary{
  cursor:pointer; list-style:none;
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--ff-mono); font-size:.82rem; letter-spacing:.02em; color:var(--clay-deep);
}
.more-toggle summary::-webkit-details-marker{ display:none; }
.more-toggle summary::after{
  content:"+"; font-size:1rem; color:var(--clay); transition:transform .3s var(--e);
}
.more-toggle[open] summary::after{ content:"−"; }
.more-toggle .more-body{ margin-top:1.2rem; }
.more-cta{ margin-top:1.8rem !important; padding-top:1.4rem; border-top:1px solid var(--line); }
.more-cta a{ font-family:var(--ff-mono); font-size:.9rem; color:var(--clay-deep); border-bottom:1px solid var(--clay); padding-bottom:2px; white-space:nowrap; }
.more-cta a:hover{ color:var(--clay-deep); }
.tier.feature .more-toggle summary{ color:#e9b7a6; }

/* method lead: bold opener in display, quieter "I listen. I observe." in mono */
.method .lead b{ font-weight:600; }
.method .lead .aside{
  font-family:var(--ff-mono); font-weight:400; font-style:normal;
  font-size:.62em; letter-spacing:.01em; color:var(--ink-soft);
  display:inline-block; vertical-align:baseline;
}

/* ---- QUIZ PROMO ------------------------------------------------------- */
.quizpromo{ background:var(--paper-2); }
.quizpromo-grid{
  display:grid; grid-template-columns:minmax(0,340px) 1fr;
  gap:clamp(1.8rem,4vw,3.4rem); align-items:center;
}
.quizpromo-media img{
  display:block; width:100%; height:auto; aspect-ratio:608/760; object-fit:cover;
  border-radius:12px; border:1px solid var(--line);
  box-shadow:0 26px 46px -26px rgba(23,19,14,.42);
}
.quizpromo h2{
  font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem); font-weight:600; letter-spacing:-.02em;
  line-height:1.12; margin:0 0 1.2rem;
}
.quizpromo h2 em{ color:var(--clay); font-style:italic; }
.quizpromo .quizpromo-lede{ max-width:46ch; margin:0 0 1.1rem; color:var(--ink-2); font-size:1.06rem; }
.quizpromo .quizpromo-why{
  max-width:44ch; margin:0 0 2rem; padding-left:1rem; border-left:2px solid var(--clay);
  color:var(--ink-2); font-size:.98rem; font-style:italic;
}
.quizpromo-cta{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.quizpromo-note{ font-family:var(--ff-mono); font-size:.76rem; color:var(--ink-soft); }
@media (max-width:760px){
  .quizpromo-grid{ grid-template-columns:1fr; gap:1.6rem; }
  .quizpromo-media{ max-width:340px; }
}

/* ---- RESULTS ---------------------------------------------------------- */
.results{ background:var(--paper); overflow:hidden; }
.results .pull{
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:clamp(1.8rem,1.1rem + 3vw,4rem); line-height:1.08; letter-spacing:-.02em;
  max-width:20ch; margin:0 0 clamp(2.4rem,5vw,3.4rem);
}
.results .pull b{ font-style:normal; font-weight:600; }
.results .results-sub{
  font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem); font-weight:600; letter-spacing:-.02em;
  line-height:1.12; margin:0 0 1.2rem;
}
.results .results-sub em{ color:var(--clay); font-style:italic; }
.hero-so{
  font-family:var(--ff-display); font-weight:600; font-style:italic;
  font-size:clamp(2.2rem,1.5rem + 2.6vw,3.4rem); line-height:1;
  letter-spacing:-.03em; color:var(--clay); margin:1.5rem 0 .2rem;
}
.hero-sub--land{ margin-top:.4rem; }
.hero-sub--land b{ font-weight:700; color:var(--ink); }
.hero-aside{ display:inline-block; font-style:italic; font-weight:500; color:var(--ink-2); }
.hero-aside br{ content:""; display:block; margin-top:.55em; }
.hero-aside b{ font-style:italic; font-weight:700; color:var(--ink); }
.results .results-word{
  font-family:var(--ff-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(2.6rem,1.6rem + 5.6vw,5.6rem); line-height:1; letter-spacing:.02em;
  color:var(--clay); margin:0 0 .6rem;
}
.results h2{
  font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem); font-weight:600; letter-spacing:-.02em;
  line-height:1.12; margin-bottom:1.2rem;
}
.results h2 em{ color:var(--clay); font-style:italic; }
.results .results-intro{
  max-width:54ch; margin:0 0 clamp(2.5rem,5vw,3.6rem); color:var(--ink-2); font-size:1.06rem;
}
.results-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem 2rem; }
.result{ position:relative; padding-left:1.5rem; }
.result::before{
  content:"✳"; position:absolute; left:0; top:.25rem; color:var(--clay); font-size:.85rem;
}
.result h3{
  font-family:var(--ff-display); font-weight:600; font-size:1.12rem; line-height:1.25;
  letter-spacing:-.01em; margin:0 0 .4rem;
}
.result p{ margin:0; color:var(--ink-2); font-size:.94rem; line-height:1.55; }
.results-note{
  margin:clamp(2.5rem,5vw,3.5rem) 0 0; padding-top:1.4rem; border-top:1px solid var(--line);
  font-family:var(--ff-mono); font-size:.74rem; line-height:1.7; color:var(--ink-soft); max-width:70ch;
}
@media (max-width:900px){ .results-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .results-grid{ grid-template-columns:1fr; gap:1.4rem; } }

/* ---- TIERS: START / OBSERVE / SHIFT ---------------------------------- */
.tiers{ background:var(--paper-2); }
.tiers .tiers-intro{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.4rem,1rem + 1.7vw,2.4rem); line-height:1.2; letter-spacing:-.015em;
  max-width:26ch; margin:0 0 1.4rem; color:var(--ink);
}
.tiers .tiers-intro b{ font-weight:600; }
.tiers .tiers-notice{
  max-width:56ch; margin:0 0 clamp(2.5rem,5vw,4rem);
  padding:.9rem 1.2rem; border-left:3px solid var(--clay); background:var(--paper);
  border-radius:0 6px 6px 0; font-size:.92rem; line-height:1.6; color:var(--ink-2);
}
.tiers .tiers-notice b{ color:var(--ink); font-weight:600; }
.tier-grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; align-items:stretch; }
.tier{
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:6px;
  padding:clamp(1.5rem,2.5vw,2.1rem);
}
.tier.feature{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
/* round, photo-topped card — same inner classes as .tier, just capsule-shaped
   with a circular photo badge up top and everything centered under it. */
.tier-round{
  align-items:center; text-align:center;
  border-radius:130px 130px 20px 20px; padding:2.6rem 1.5rem 2rem;
}
.tier-round .tier-frame, .tier-round .tier-foot, .tier-round .more-toggle{ width:100%; }
.tier-round .more-body{ text-align:left; }
.tr-photo{
  width:112px; height:112px; flex:0 0 auto; border-radius:50%; overflow:hidden;
  margin:0 0 1.4rem; border:1px solid var(--line-soft);
}
.tier.feature .tr-photo{ border-color:rgba(241,236,226,.25); }
.tr-photo img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1); }
@media (max-width:980px){ .tier-grid{ grid-template-columns:repeat(2,1fr); } }
.tier .tier-name{
  font-family:var(--ff-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem); line-height:1;
}
.tier .tier-sub{ font-family:var(--ff-mono); font-size:.8rem; color:var(--clay-deep); margin-top:.55rem; }
.tier.feature .tier-sub{ color:#e9b7a6; }
.tier .tier-frame{
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:1.02rem; line-height:1.35; color:var(--ink-2);
  margin:1.2rem 0; padding:1rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.tier.feature .tier-frame{ color:rgba(241,236,226,.82); border-color:rgba(241,236,226,.18); }
.tier .tier-h{
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); margin:1.3rem 0 .6rem;
}
.tier.feature .tier-h{ color:rgba(241,236,226,.55); }
.tier ul.tier-for{ list-style:none; margin:0; padding:0; }
.tier ul.tier-for li{
  position:relative; padding:.35rem 0 .35rem 1.3rem; font-size:.92rem; color:var(--ink-2); line-height:1.4;
}
.tier.feature ul.tier-for li{ color:rgba(241,236,226,.9); }
.tier ul.tier-for li::before{ content:"·"; position:absolute; left:.35rem; color:var(--clay); font-weight:700; }
.tier .tier-do{ font-size:.92rem; color:var(--ink-2); line-height:1.5; margin:0; }
.tier.feature .tier-do{ color:rgba(241,236,226,.88); }
.tier .tier-fmt{ font-family:var(--ff-mono); font-size:.8rem; color:var(--ink-2); line-height:1.7; margin:.4rem 0 0; }
.tier.feature .tier-fmt{ color:rgba(241,236,226,.8); }
.tier .tier-foot{ margin-top:auto; padding-top:1.4rem; }
.tier .tier-price{
  font-family:var(--ff-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(1.9rem,1.4rem + 1.4vw,2.5rem); line-height:1;
}
.tier .tier-was{
  font-family:var(--ff-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(2.3rem,1.7rem + 1.8vw,3.1rem); line-height:1;
  color:var(--clay); text-decoration:line-through;
  text-decoration-thickness:.055em; margin-bottom:.1rem;
}
.tier.feature .tier-was{ color:#e9b7a6; }
.tier .tier-price .per{ font-family:var(--ff-mono); font-weight:400; font-size:.4em; color:var(--ink-soft); letter-spacing:.02em; }
.tier.feature .tier-price .per{ color:rgba(241,236,226,.6); }
.tier .tier-price-note{ font-family:var(--ff-mono); font-size:.68rem; color:var(--clay-deep); margin-top:.3rem; letter-spacing:.04em; text-transform:uppercase; }
.tier.feature .tier-price-note{ color:#e9b7a6; }
.tier .btn{ margin-top:1rem; width:100%; justify-content:center; }
.tiers-closer{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:clamp(2rem,4vw,2.6rem); border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem;
}
.tiers-closer .txt{
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:clamp(1.2rem,.9rem + 1vw,1.7rem); color:var(--ink); flex:1; min-width:16ch; margin:0;
}
.tiers-closer .closer-cta{ display:flex; flex-wrap:wrap; gap:.7rem; }
@media (max-width:860px){ .tier-grid{ grid-template-columns:1fr; } }

/* ---- TESTIMONIALS ------------------------------------------------------ */
.testimonials{ background:var(--paper); }
.testimonials h2{
  font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem); font-weight:600; letter-spacing:-.02em;
  max-width:16ch; margin-bottom:clamp(2.5rem,5vw,4rem);
}
.testimonials h2 em{ color:var(--clay); font-style:italic; }
.testi-carousel{ position:relative; display:flex; align-items:center; padding:0 clamp(2.6rem,6vw,3.6rem); }
.tc-viewport{ overflow:hidden; width:100%; }
.tc-track{ display:flex; align-items:center; will-change:transform; }
.tc-slide{
  flex:0 0 auto; width:min(300px,64vw); margin:0 .8rem; cursor:pointer;
  opacity:.4; transform:scale(.82); transition:opacity .5s var(--e), transform .5s var(--e);
}
.tc-slide.active{ opacity:1; transform:scale(1); cursor:zoom-in; }
.tc-frame{
  background:var(--paper-2); border:1px solid var(--line); border-radius:10px; padding:.6rem;
  box-shadow:0 20px 38px -22px rgba(23,19,14,.28); transition:box-shadow .5s var(--e);
}
.tc-slide.active .tc-frame{ box-shadow:0 30px 52px -20px rgba(23,19,14,.4); }
.tc-frame img{ display:block; width:100%; height:min(380px,52vh); object-fit:contain; border-radius:6px; }
.tc-arrow{
  position:relative;
  flex:0 0 auto; z-index:2; width:42px; height:42px; border-radius:50%; background:var(--paper);
  border:1px solid var(--line); color:var(--ink); font-size:1.5rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .3s var(--e);
}
.tc-arrow:hover{ background:var(--paper-2); }
.tc-prev{ position:absolute; left:0; } .tc-next{ position:absolute; right:0; }
.tc-dots{ display:flex; justify-content:center; gap:.5rem; margin-top:1.5rem; }
.tc-dot{ position:relative; width:8px; height:8px; padding:0; border-radius:50%; background:var(--line); border:none;
  cursor:pointer; transition:background .3s var(--e), transform .3s var(--e); }
.tc-dot::before{ content:""; position:absolute; inset:-18px; } /* invisible tap-area expansion, no layout/visual impact */
.tc-dot.active{ background:var(--clay); transform:scale(1.35); }
.tc-arrow::before{ content:""; position:absolute; inset:-4px; } /* invisible tap-area expansion, no layout/visual impact */
@media (max-width:640px){
  .testi-carousel{ padding:0 2.4rem; }
  .tc-slide{ width:74vw; margin:0 .5rem; }
  .tc-frame img{ height:min(320px,46vh); }
  .tc-arrow{ width:36px; height:36px; font-size:1.2rem; }
}

.lightbox{
  position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center;
  background:rgba(23,19,14,.92); padding:clamp(1rem,5vw,3rem);
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(88vw,720px); max-height:86vh; width:auto; height:auto; border-radius:8px;
  box-shadow:0 30px 60px rgba(0,0,0,.5); }
.lb-close,.lb-prev,.lb-next{
  position:absolute; background:none; border:none; color:var(--paper); cursor:pointer;
  opacity:.72; transition:opacity .2s var(--e); line-height:1;
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{ opacity:1; }
.lb-close{ top:1.1rem; right:1.3rem; font-size:2.2rem; }
.lb-prev,.lb-next{ top:50%; transform:translateY(-50%); font-size:3rem; padding:.5rem 1rem; }
.lb-prev{ left:.3rem; } .lb-next{ right:.3rem; }
@media (max-width:640px){ .lb-prev,.lb-next{ font-size:2.3rem; opacity:.92; } .lb-close{ font-size:1.9rem; } }

/* ---- OWN YOUR SHIFT -------------------------------------------------- */
.shift{ background:var(--paper); overflow:hidden; }
.shift .pull{
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:clamp(1.8rem,1.1rem + 3vw,4rem); line-height:1.08; letter-spacing:-.02em;
  max-width:20ch; margin:0;
}
.shift .pull b{ font-style:normal; font-weight:600; }
.shift p.body{ max-width:44ch; margin:2rem 0 0; color:var(--ink-2); font-size:1.06rem; }
.wordmark{
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(3.6rem,2rem + 14vw,15rem); line-height:.82; letter-spacing:-.05em;
  margin-top:clamp(2.5rem,6vw,5rem); color:var(--ink);
  display:flex; flex-direction:column;
}
.wordmark span:nth-child(2){ margin-left:.14em; }
.wordmark span:nth-child(3){ color:transparent; -webkit-text-stroke:1.5px var(--ink); margin-left:.28em; }


/* ---- CONTACT --------------------------------------------------------- */
.contact{ background:var(--clay-deep); color:var(--paper); }
.contact .kicker{ color:#f5d9cf; }
.contact .kicker::before{ background:var(--paper); }
.contact h2{
  font-size:clamp(2.4rem,1.4rem + 6vw,6.5rem); font-weight:400; letter-spacing:-.03em; line-height:.98;
  max-width:18ch; color:var(--paper);
}
.contact h2 em{ font-style:italic; font-weight:300; }
.cards{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  margin-top:clamp(3rem,6vw,4.5rem);
  background:rgba(241,236,226,.28); border:1px solid rgba(241,236,226,.28);
}
.card{
  background:var(--clay-deep); padding:clamp(1.6rem,3vw,2.4rem) 1.5rem clamp(1.6rem,3vw,2.4rem);
  display:flex; flex-direction:column; min-height:15rem; justify-content:space-between;
  position:relative; overflow:hidden; transition:.45s var(--e);
}
.card::before{ content:""; position:absolute; inset:0; background:var(--ink); transform:translateY(100%); transition:transform .5s var(--e); z-index:0; }
.card:hover{ background:var(--ink); }
.card:hover::before{ transform:translateY(0); }
.card > *{ position:relative; z-index:1; }
.card .idx{ font-family:var(--ff-mono); font-size:.72rem; opacity:.92; letter-spacing:.05em; }
.card .ct{ font-family:var(--ff-display); font-weight:500; font-size:clamp(1.4rem,1rem + 1vw,1.9rem); line-height:1.02; margin-top:1rem; }
.card .cd{ font-size:.92rem; color:var(--paper); margin-top:.5rem; }
.card .go{ font-family:var(--ff-mono); font-size:.8rem; margin-top:1.4rem; display:inline-flex; align-items:center; gap:.5em; }
.card .go .arrow{ transition:transform .4s var(--e); }
.card:hover .go .arrow{ transform:translate(4px,-4px); }
.card--primary{ background:var(--ink); }
.card--primary::before{ background:#000; }
.reassure{
  margin-top:clamp(2.5rem,5vw,4rem); font-family:var(--ff-display); font-style:italic;
  font-weight:300; font-size:clamp(1.3rem,.9rem + 1.4vw,2.2rem); letter-spacing:-.01em;
  color:var(--paper); max-width:26ch;
}
@media (max-width:900px){ .cards{ grid-template-columns:repeat(2,1fr); } .card{ min-height:12rem; } }
@media (max-width:520px){ .cards{ grid-template-columns:1fr; } }

/* ---- FOOTER ---------------------------------------------------------- */
.footer{ background:var(--ink); color:var(--paper); }
.footer .wrap{ padding-top:clamp(3rem,6vw,5rem); padding-bottom:clamp(2rem,4vw,3rem); }
.foot-top{ display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:flex-start; }
.foot-brand{ font-family:var(--ff-display); font-weight:400; font-size:clamp(2rem,1.4rem + 3vw,4rem); letter-spacing:-.03em; line-height:1; }
.foot-brand .dot{ color:var(--clay); }
.foot-links{ display:flex; gap:.2rem 1.2rem; flex-wrap:wrap; font-family:var(--ff-mono); font-size:.82rem; }
.foot-links a{
  color:rgba(241,236,226,.7);
  display:inline-flex; align-items:center;
  padding:.9em .2em; min-height:3rem;               /* 48px touch targets */
}
.foot-links a:hover{ color:var(--clay); }
.foot-social{ gap:.4em; }
.foot-ico{ width:1.05em; height:1.05em; flex:none; }
.disclaimer{
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:1.5rem; border-top:1px solid rgba(241,236,226,.14);
  font-family:var(--ff-mono); font-size:.72rem; color:rgba(241,236,226,.5); line-height:1.7;
  display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.disclaimer p{ margin:0; max-width:60ch; }

/* ---- FAQ ------------------------------------------------------------- */
.faq{ background:var(--paper); }
.faq-list{ max-width:760px; border-top:1px solid var(--line); }
.faq-list details{ border-bottom:1px solid var(--line-soft); }
.faq-list summary{
  cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:baseline; gap:1.2rem;
  padding:1.2rem 0;
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(1.15rem, 1rem + .8vw, 1.6rem); letter-spacing:-.01em;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:"+"; font-family:var(--ff-mono); font-size:1rem; color:var(--clay);
  flex-shrink:0; transition:transform .3s var(--e);
}
.faq-list details[open] summary::after{ content:"−"; }
.faq-list .fa{ margin:0; padding:0 0 1.4rem; color:var(--ink-2); max-width:58ch; font-size:1.02rem; }

/* screen-reader-only (for structural headings the design hides) */
.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;
}

/* ---- reveal animation ------------------------------------------------ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--e), transform .9s var(--e); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* hero load stagger (CSS only) */
.hero .load{ opacity:0; transform:translateY(24px); animation:riseIn 1s var(--e) forwards; }
.hero .load.d1{ animation-delay:.05s; }
.hero .load.d2{ animation-delay:.18s; }
.hero .load.d3{ animation-delay:.32s; }
.hero .load.d4{ animation-delay:.46s; }
.hero .load.d5{ animation-delay:.6s; }
/* .hero-media used to fade/scale in (opacity:0 + .6s animation, .1s delay)
   like the rest of the hero — but it's the LCP element (the portrait), and
   that animation directly delayed Largest Contentful Paint by ~0.7s even
   though the image itself was already preloaded and fast. Now paints
   immediately; only the text above it still does the staggered entrance. */
@keyframes riseIn{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .hero .load{ opacity:1; transform:none; animation:none; }
}

/* ==================================================================== */
/* BOOKING + FORMS (Phase 4)                                            */
/* ==================================================================== */
.book{ background:var(--paper-2); }
.book h2{
  font-size:clamp(2.4rem,1.5rem + 6vw,6rem); font-weight:400; letter-spacing:-.03em; line-height:.98;
  max-width:16ch; color:var(--ink);
}
.book h2 em{ font-style:italic; font-weight:300; color:var(--clay); }
.book .lede{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.35rem,1rem + 1.6vw,2.4rem); line-height:1.2; letter-spacing:-.018em;
  max-width:26ch; color:var(--ink-2);
}
.book .lede b{ font-weight:600; color:var(--ink); }
.expect{
  list-style:none; margin:clamp(2rem,4vw,3rem) 0 0; padding:0;
  max-width:56ch; border-top:1px solid var(--line);
}
.expect li{
  padding:.85rem 0 .85rem 1.8rem; border-bottom:1px solid var(--line-soft);
  font-size:1rem; color:var(--ink-2); position:relative;
}
.expect li::before{
  content:"✳"; position:absolute; left:.2rem; top:.95rem;
  color:var(--clay-deep); font-size:.8em;
}
.expect li b{ color:var(--ink); }
.book-cta{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  margin-top:clamp(2rem,4vw,3rem);
}
.book-cta-note{ font-family:var(--ff-mono); font-size:.82rem; color:var(--ink-soft); }

/* generic form fields (light surfaces) */
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field > label{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.04em;
  text-transform:lowercase; color:var(--ink-soft);
}
.field input, .field textarea{
  font-family:var(--ff-body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  padding:.78em .9em; width:100%;
  transition:border-color .3s var(--e), background .3s var(--e), box-shadow .3s var(--e);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-soft); }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--clay); background:#fff;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--clay) 16%, transparent);
}
.field textarea{ resize:vertical; min-height:6.5em; line-height:1.5; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form-grid .field.full{ grid-column:1 / -1; }
.form-actions{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:1.6rem; }
.form-status{
  font-family:var(--ff-mono); font-size:.82rem; color:var(--ink-2);
  min-height:1.3em; letter-spacing:.01em;
}
.form-status.err{ color:var(--clay-deep); font-weight:500; }
/* honeypot: present for bots, hidden for humans */
.hp{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; overflow:hidden; opacity:0;
}

/* paper button — for use on the clay/dark contact surface */
.btn--paper{ --bg:var(--paper); --fg:var(--ink); border-color:var(--paper); }
.btn--paper::before{ background:var(--ink); }
.btn--paper:hover{ color:var(--paper); }

/* contact-section "write a note" form (on clay) */
.noteform{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid rgba(241,236,226,.28); padding-top:clamp(2rem,4vw,3rem);
  max-width:660px;
}
.noteform .nf-head{
  font-family:var(--ff-display); font-weight:400; font-style:italic;
  font-size:clamp(1.3rem,.9rem + 1.3vw,2rem); letter-spacing:-.01em; line-height:1.12;
  color:var(--paper); margin:0 0 1.6rem; max-width:22ch;
}
.contact .field > label{ color:#f5d9cf; }
.contact .field input, .contact .field textarea{
  background:color-mix(in srgb, var(--paper) 10%, transparent);
  border-color:rgba(241,236,226,.42); color:var(--paper);
}
.contact .field input::placeholder, .contact .field textarea::placeholder{ color:rgba(241,236,226,.6); }
.contact .field input:focus, .contact .field textarea:focus{
  border-color:var(--paper); background:color-mix(in srgb, var(--paper) 16%, transparent);
  box-shadow:0 0 0 3px rgba(241,236,226,.2);
}
.contact .form-status{ color:var(--paper); }
.contact .form-status.err{ color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.5); }

@media (max-width:760px){
  .form-grid{ grid-template-columns:1fr; }
}
/* who this is for (inside SOS) ---------------------------------------- */
.whofor{
  margin-top:clamp(3.5rem,7vw,6rem);
  padding-top:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--line);
}
.whofor h3{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.6rem,1rem + 2.4vw,3.2rem);
  line-height:1.1; letter-spacing:-.02em; max-width:22ch; margin:0 0 clamp(2rem,4vw,3rem);
}
.whofor-list{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1.2rem 2rem;
}
.whofor-list li{
  font-size:1rem; line-height:1.5; padding-left:1.4em; position:relative; color:var(--ink-2);
}
.whofor-list li::before{
  content:"✳"; position:absolute; left:0; top:0; color:var(--clay); font-size:.85em;
}
.whofor-list em{ font-style:normal; color:var(--ink); font-weight:500; }
.whofor-close{
  margin:clamp(2rem,4vw,3rem) 0 0; max-width:52ch;
  color:var(--ink-soft); font-size:1.02rem; line-height:1.65;
}
.whofor-close b{ color:var(--ink); font-weight:600; }

/* belief / worldview --------------------------------------------------- */
.belief{ background:var(--paper-2); }
.belief h2{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(2.2rem,1.3rem + 4.4vw,5.4rem);
  line-height:1.02; letter-spacing:-.03em; margin:0; max-width:18ch;
}
.belief h2 em{ font-style:italic; color:var(--clay); }
.belief h2 .strike{ position:relative; color:var(--ink-soft); }
.belief h2 .strike::after{
  content:""; position:absolute; left:-2%; right:-2%; top:52%; height:2px;
  background:var(--clay); transform:rotate(-2deg);
}
.belief-grid{
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,5vw,5rem);
  margin-top:clamp(2.5rem,5vw,4.5rem);
}
.belief-lead{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.3rem,.9rem + 1.5vw,2rem); line-height:1.25; letter-spacing:-.01em;
  margin:0 0 1rem; color:var(--ink-2);
}
.belief-lead b{ color:var(--ink); font-weight:600; font-style:italic; }
.belief-grid p{ margin:0 0 1.3rem; color:var(--ink-2); line-height:1.7; max-width:46ch; }
.belief-grid p b{ color:var(--ink); font-weight:600; }
.belief-close{
  margin-top:2rem !important; padding-top:1.6rem; border-top:1px solid var(--line);
  font-size:1.08rem;
}
@media (max-width:860px){ .belief-grid{ grid-template-columns:1fr; } }

/* SOS payoff line (method) --------------------------------------------- */
.sos-payoff{
  margin:clamp(3.5rem,7vw,6rem) 0 0; padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--line);
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.5rem,1rem + 2.2vw,3rem); line-height:1.2; letter-spacing:-.02em;
  max-width:24ch;
}
.sos-payoff b{ color:var(--clay); font-weight:600; font-style:italic; }
.method-price-teaser{
  display:inline-flex; align-items:center; gap:.6em; margin-top:1.6rem;
  padding:.7em 1.3em; border:1px solid var(--line); border-radius:999px;
  font-family:var(--ff-mono); font-size:.85rem; color:var(--clay-deep); text-decoration:none;
  transition:border-color .3s var(--e), color .3s var(--e), transform .3s var(--e);
}
.method-price-teaser:hover{ border-color:var(--clay); color:var(--clay); transform:translateY(-2px); }
.method-price-teaser .arrow{ color:var(--clay); transition:transform .4s var(--e); }
.method-price-teaser:hover .arrow{ transform:translateY(3px); }

/* name reveal (proof / about) ------------------------------------------ */
.proof h2{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(2.4rem,1.4rem + 5vw,6rem);
  line-height:1; letter-spacing:-.03em; margin:0 0 clamp(1.8rem,3.5vw,3rem);
}
.proof h2 b{ font-weight:400; }
.proof h2 .swash{ font-style:italic; font-weight:400; color:var(--clay); }

/* workbooks ------------------------------------------------------------ */
.books{ background:var(--paper-2); }
.books h2{
  font-size:clamp(2.2rem,1.4rem + 5vw,5.2rem); font-weight:300; letter-spacing:-.03em;
  line-height:1.02; margin:0; max-width:16ch;
}
.books h2 em{ font-style:italic; color:var(--clay); }
.books .lede{
  margin:clamp(1.6rem,3vw,2.4rem) 0 0; max-width:58ch;
  color:var(--ink-soft); font-size:1.05rem; line-height:1.7;
}
.books .lede b{ font-weight:600; color:var(--ink); }
.book-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,300px));
  justify-content:space-between;
  gap:clamp(1.5rem,4vw,3rem); margin-top:clamp(3rem,6vw,5rem);
}
@media (max-width:760px){
  .book-grid{ grid-template-columns:1fr; justify-content:center; max-width:300px; margin-left:auto; margin-right:auto; }
}
.bookcard{ display:flex; flex-direction:column; gap:1.2rem; }
/* The covers are 3-D mock-ups on transparency — they float on the paper,
   they are not cropped into a coloured tile. drop-shadow (not box-shadow)
   so the shadow follows the book's silhouette, not its bounding box. */
.bookcover{
  display:block; width:100%; height:auto; aspect-ratio:507/760; object-fit:contain;
  filter:drop-shadow(0 22px 26px rgba(23,19,14,.28));
  transition:transform .5s var(--e), filter .5s var(--e);
}
.bookcard:hover .bookcover{
  transform:translateY(-8px);
  filter:drop-shadow(0 32px 34px rgba(23,19,14,.34));
}
.bookmeta .bt{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(1.2rem,.9rem + .9vw,1.6rem); line-height:1.15; letter-spacing:-.01em;
}
.bookmeta .bt b{ font-weight:400; font-style:italic; }
.bookmeta .bd{
  font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.03em;
  color:var(--ink-soft); margin-top:.5rem; line-height:1.5;
}
.bookcard .go{
  font-family:var(--ff-mono); font-size:.78rem; color:var(--clay-deep);
  margin-top:1rem; display:inline-flex; align-items:center; gap:.5em;
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.bookcard .go .arrow{ transition:transform .4s var(--e); }
.bookcard:hover .go{ border-bottom-color:var(--clay); }
.bookcard:hover .go .arrow{ transform:translate(3px,-3px); }