:root{
  --canvas:#EDEAE3;          /* page ground the sheets float on */
  --sheet:#FBFAF7;
  --tint:#F2EFE8;            /* warm card tint inside sheets */
  --ink:#26231F;
  --ink-60:#5C574F;
  --ink-40:#8A847A;
  --sage:#7A9E8E;
  --sage-deep:#597D6D;
  --sage-pill:#A9C3B4;       /* mindora-green pill */
  --sage-pale:#B8C9B0;
  --terra:#C4956A;
  --line:rgba(38,35,31,.12);
  --r-sheet:30px;
  --r-card:20px;
  --ease:cubic-bezier(.22,.61,.21,1);
}
*{margin:0;padding:0;box-sizing:border-box}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:'Onest',sans-serif;
  font-size:16.5px;line-height:1.7;font-weight:400;
  color:var(--ink);background:var(--canvas);
  padding:14px 14px 0;padding-bottom:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:400;line-height:1.08;text-wrap:pretty;color:var(--ink);letter-spacing:-.02em}
p{text-wrap:pretty}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.warm{filter:sepia(.13) hue-rotate(-8deg) saturate(1.06) brightness(1.01)}
.gold-img{filter:sepia(.38) hue-rotate(-14deg) saturate(1.34) brightness(1.03) contrast(1.03)}
.goldwash{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,190,110,.22) 0%,rgba(224,150,80,.30) 100%);
  mix-blend-mode:soft-light}

/* ---------- sheets ---------- */
.sheet{
  background:var(--sheet);border-radius:var(--r-sheet);
  margin:0 auto 14px;max-width:1512px;
  padding:74px clamp(28px,5vw,84px);
  overflow:hidden;position:relative;
}
.sheet.photo{padding:0;background:var(--ink)}

/* ---------- micro-label kicker : dot + label + hairline ---------- */
.mk{
  display:flex;align-items:center;gap:12px;
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-60);
}
.mk::before{content:"";width:6px;height:6px;background:var(--terra);flex:none}
.mk::after{content:"";height:1px;flex:1;background:var(--line)}
.mk.on-photo{color:rgba(251,250,247,.97);font-weight:600;text-shadow:0 1px 10px rgba(38,35,31,.55)}
.mk.on-photo::after{background:rgba(251,250,247,.45)}
.hero-left .mk::before{display:none}

/* ---------- pills ---------- */
.pill{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  padding:15px 28px;border-radius:999px;cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease),box-shadow .5s var(--ease);
  border:1px solid transparent;white-space:nowrap;
  position:relative;isolation:isolate;overflow:hidden;
}
/* liquid wipe: fill blooms from the left edge across the pill */
a.pill::before,button.pill::before{
  content:"";position:absolute;z-index:-1;left:-8%;top:50%;
  width:230%;aspect-ratio:1/1;border-radius:50%;
  background:var(--fill,transparent);
  transform:translate(-50%,-50%) scale(0);
  transition:transform .6s cubic-bezier(.19,1,.22,1);
}
a.pill:hover::before,button.pill:hover::before{transform:translate(-50%,-50%) scale(1)}
/* arrow fly-through: current arrow exits right, twin sweeps in from left */
.pill .arr{position:relative;display:inline-block;width:16px;height:15px;font-size:0;overflow:hidden}
.pill .arr::before,.pill .arr::after{
  content:"\2192";position:absolute;left:0;top:50%;width:100%;
  font-size:14px;line-height:1;text-align:center;
  transform:translate(0,-50%);
  transition:transform .45s cubic-bezier(.19,1,.22,1),opacity .45s var(--ease);
}
.pill .arr::after{transform:translate(-140%,-50%);opacity:0}
a.pill:hover .arr::before,button.pill:hover .arr::before{transform:translate(140%,-50%);opacity:0}
a.pill:hover .arr::after,button.pill:hover .arr::after{transform:translate(0,-50%);opacity:1}
.pill-white{background:#fff;color:var(--ink);--fill:var(--sage-deep)}
.pill-white:hover{color:#fff;box-shadow:0 10px 32px rgba(89,125,109,.42)}
.pill-sage{background:var(--sage-pill);color:var(--ink);--fill:var(--sage)}
.pill-sage:hover{color:#fff;box-shadow:0 10px 32px rgba(122,158,142,.48)}
.pill-ink{background:var(--ink);color:#F5F3EE;--fill:var(--sage-deep)}
.pill-ink:hover{box-shadow:0 10px 32px rgba(89,125,109,.42)}
.pill-line{background:transparent;color:var(--ink);border-color:rgba(38,35,31,.25);--fill:rgba(38,35,31,.05)}
.pill-line:hover{border-color:var(--ink)}
.pill-terra{background:var(--terra);color:var(--ink);--fill:#A9713A;box-shadow:0 6px 22px rgba(169,113,58,.38)}
.pill-terra:hover{color:#fff;box-shadow:0 12px 32px rgba(169,113,58,.52)}
@media (prefers-reduced-motion:reduce){
  a.pill::before,button.pill::before,.pill .arr::before,.pill .arr::after{transition:none}
}

/* ---------- chips (floating stat cards) ---------- */
.chipcard{
  background:#fff;border-radius:16px;padding:16px 22px;
  box-shadow:0 10px 34px rgba(38,35,31,.12);
  line-height:1.35;
}
.chipcard .big{font-size:17px;font-weight:500;letter-spacing:-.01em}
.chipcard .sml{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40);margin-top:3px}


/* ============================================================================
   LANDING PAGE — Trauma
   Brand-adapted: this is the Mindora Golden system (Onest, floating sheets on
   canvas, .mk kickers, liquid-wipe pills, .gold-img grade), NOT the stock
   parent LP skin. The primitives above are lifted verbatim from client.css so
   the LP is provably the same design system rather than a lookalike.
   client.css is dequeued on this template, so this file is self-contained.
   ============================================================================ */

body.landing-page{background:var(--canvas);padding:14px 14px 0;color:var(--ink)}

/* ---------- header ---------- */
.lp-header{position:absolute;top:0;left:0;right:0;z-index:120;padding:22px clamp(16px,3.5vw,44px) 0}
.lp-header-inner{
  display:flex;align-items:center;gap:20px;
  background:rgba(38,35,31,.20);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-radius:999px;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 44px rgba(38,35,31,.18);
  /* Inline-matched in page-landing.php <head> too: lp.css is deferred, and
     without the same padding at first paint the header jumps (CLS). */
  padding:9px 12px 9px 28px;
}
.lp-brand{line-height:1.14;color:#fff;margin-right:auto}
.lp-brand .bn{font-size:clamp(18px,1.9vw,26px);font-weight:500;letter-spacing:-.015em}
.lp-brand .cred{font-size:.68em;font-weight:300;opacity:.78}
.lp-brand .bs{font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--sage-pale);margin-top:2px}
.lp-phone{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:#fff;white-space:nowrap;transition:color .3s var(--ease)}
.lp-phone svg{width:14px;height:14px;color:var(--sage-pale);flex:none}
.lp-phone .ph-num{position:relative;padding-bottom:2px}
.lp-phone .ph-num::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.35)}
.lp-phone .ph-num::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--sage-pale);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.19,1,.22,1)}
.lp-phone:hover{color:var(--sage-pale)}
.lp-phone:hover .ph-num::after{transform:scaleX(1)}

/* ---------- hero ---------- */
.lp-hero{
  position:relative;border-radius:var(--r-sheet);overflow:hidden;
  max-width:1512px;margin:0 auto 14px;
  min-height:min(88vh,780px);display:flex;align-items:flex-end;
}
.lp-hero-bg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;z-index:0}
.lp-hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  /* Two layers: a left-anchored wash (text is left-aligned) over a bottom-heavy
     vertical wash. The moss image is busy, so this is deliberately strong. */
  background:
    linear-gradient(90deg,rgba(31,28,25,.80) 0%,rgba(31,28,25,.58) 34%,rgba(31,28,25,.24) 66%,rgba(31,28,25,.12) 100%),
    linear-gradient(180deg,rgba(31,28,25,.45) 0%,rgba(31,28,25,.28) 38%,rgba(31,28,25,.80) 100%);
}
.lp-hero-in{position:relative;z-index:2;padding:0 clamp(20px,4vw,72px) clamp(44px,5vw,66px);max-width:900px;color:#fff}
.lp-hero-in .mk{margin-bottom:20px}
.lp-hero h1{
  color:#FBFAF7;font-weight:300;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(40px,6.4vw,86px);margin-bottom:18px;
  text-shadow:0 6px 50px rgba(38,35,31,.5),0 2px 14px rgba(38,35,31,.3);
}
.lp-hero .lp-sub{
  font-size:clamp(19px,2.4vw,30px);font-weight:400;color:rgba(255,255,255,.96);
  letter-spacing:-.015em;max-width:24ch;margin-bottom:30px;
  text-shadow:0 2px 20px rgba(38,35,31,.5);
}
.lp-hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
/* Qualifier bullets under the hero — a short, legible checklist rather than the
   old cramped all-caps run-on. */
.lp-meta{
  display:flex;flex-direction:column;gap:11px;margin-top:26px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.28);max-width:none;
}
.lp-meta span{
  position:relative;padding-left:28px;
  font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.4;
  color:rgba(255,255,255,.95);text-shadow:0 1px 10px rgba(38,35,31,.6);
}
.lp-meta span::before{
  content:"";position:absolute;left:2px;top:.1em;width:7px;height:12px;
  border:solid var(--sage-pale);border-width:0 2px 2px 0;transform:rotate(45deg);
}

/* ---------- generic LP section head ---------- */
.lp-head{margin-bottom:28px}
.lp-head .mk{margin-bottom:20px}
.lp-head h2{font-size:clamp(30px,4vw,50px);font-weight:400;max-width:22ch;letter-spacing:-.025em}
.lp-prose p{color:var(--ink-60);font-size:16.5px;line-height:1.8;margin-bottom:15px;max-width:62ch}
.lp-prose p:last-child{margin-bottom:0}
.lp-prose strong{color:var(--ink);font-weight:500}
.lp-prose em{font-style:italic}

/* ---------- problem ---------- */
.lp-problem-grid{display:grid;grid-template-columns:1fr 340px;gap:clamp(32px,5vw,70px);align-items:start}
.lp-problem-fig{position:relative}
/* height:auto is REQUIRED, not decorative: these <img> carry width/height
   attributes for CLS, and an HTML height attribute supplies a used height —
   which makes the browser IGNORE aspect-ratio entirely (it only computes a
   MISSING dimension). Without it the figure renders at the raw image height
   instead of the designed crop (the bio portrait came out 840px tall against
   the mockup's 528px). Pairs with object-fit:cover to crop, not distort. */
.lp-problem-fig img{width:100%;height:auto;aspect-ratio:3/3.1;object-fit:cover;object-position:center 42%;border-radius:var(--r-card)}
.lp-problem-fig .chipcard{position:absolute;left:-26px;bottom:-24px;max-width:260px}
.lp-close{
  margin-top:32px;padding-top:26px;border-top:1px solid var(--line);
  font-size:clamp(19px,2.3vw,25px);font-weight:400;color:var(--ink);
  letter-spacing:-.015em;line-height:1.4;max-width:34ch;
}

/* ---------- about (Trish) ---------- */
.lp-about-grid{display:grid;grid-template-columns:400px 1fr;gap:clamp(34px,5vw,72px);align-items:center}
.lp-about-fig{position:relative}
.lp-about-fig img{width:100%;height:auto;aspect-ratio:3/3.5;object-fit:cover;object-position:center top;border-radius:var(--r-card);filter:sepia(.2) hue-rotate(-8deg) saturate(1.06) brightness(1.005)}
.lp-about-fig .nameplate{position:absolute;left:16px;bottom:16px}

/* ---------- solution : photo sheet (the homepage "bridge" treatment) ---------- */
.lp-solution{position:relative;padding:0;background:var(--ink);overflow:hidden}
.lp-solution img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;z-index:0}
.lp-solution::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(96deg,rgba(38,35,31,.82) 0%,rgba(61,84,72,.7) 55%,rgba(38,35,31,.34) 100%);
}
.lp-solution-in{position:relative;z-index:2;padding:clamp(60px,7vw,96px) clamp(24px,6vw,110px);max-width:860px}
.lp-solution-in .mk{margin-bottom:22px}
.lp-solution-in h2{color:#fff;font-size:clamp(32px,4.8vw,60px);font-weight:300;margin-bottom:26px;letter-spacing:-.03em}
.lp-solution-in p{color:rgba(251,250,247,.9);font-size:16.5px;line-height:1.8;margin-bottom:14px;max-width:56ch}
.lp-solution-in strong{color:var(--sage-pale);font-weight:500}
.lp-solution-in .pill{margin-top:26px}

/* ---------- results ---------- */
.lp-results{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.lp-rcard{background:var(--tint);border-radius:var(--r-card);padding:34px 36px}
.lp-rcard p{color:var(--ink-60);font-size:16.5px;line-height:1.75;margin:0}
.lp-rcard:first-child p{font-size:19px;color:var(--ink);letter-spacing:-.01em}

/* ---------- routing strip ---------- */
.lp-routing{text-align:center}
.lp-routing .mk{justify-content:center;margin-bottom:22px}
.lp-routing .mk::after,.lp-routing .mk::before{display:none}
.lp-routing-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- form ---------- */
.lp-form-sheet{position:relative;padding:0;background:var(--ink);overflow:hidden}
.lp-form-sheet img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;z-index:0}
.lp-form-sheet::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(38,35,31,.2) 0%,rgba(38,35,31,.1) 55%,rgba(38,35,31,.3) 100%)}
.lp-form-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 440px;gap:clamp(32px,5vw,88px);padding:clamp(34px,3.8vw,48px) clamp(24px,5vw,84px);align-items:center}
.lp-form-copy{color:#fff;background:rgba(38,35,31,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:22px;border:1px solid rgba(255,255,255,.12);padding:clamp(26px,3.5vw,46px)}
.lp-form-copy .mk{margin-bottom:22px}
.lp-form-copy h2{color:#fff;font-size:clamp(30px,4.2vw,54px);font-weight:300;margin-bottom:20px;letter-spacing:-.03em}
.lp-form-copy p{color:rgba(251,250,247,.9);font-size:16px;line-height:1.75;margin-bottom:12px;max-width:46ch}
.lp-form-card{background:var(--sheet);border-radius:22px;padding:34px 34px 36px;box-shadow:0 26px 70px rgba(38,35,31,.35)}
.lp-form-card h3{font-size:19px;font-weight:500;margin-bottom:10px;letter-spacing:-.01em}
.lp-form-card .form-sub{font-size:14px;color:var(--ink-60);line-height:1.65;margin-bottom:18px}
.lp-form-note{margin-top:14px;text-align:center;font-size:12.5px;color:var(--ink-40)}

/* ---------- facts + footer ---------- */
.lp-facts{background:var(--ink);border-radius:0 0 var(--r-card) var(--r-card);display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:32px clamp(24px,5vw,84px)}
.lp-fact{color:#F5F3EE}
.lp-fact a{transition:color .25s}
.lp-fact a:hover{color:var(--sage-pale)}
.lp-fact .fbig{font-size:clamp(17px,1.8vw,23px);font-weight:400;letter-spacing:-.01em;word-break:break-word}
.lp-fact .fsml{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,243,238,.55);margin-top:4px}
.lp-footer{background:var(--ink);border-radius:var(--r-sheet) var(--r-sheet) 0 0;max-width:1512px;margin:0 auto;color:#B9B2A9;padding:36px clamp(24px,5vw,84px) 28px}
.lp-footer-in{display:flex;gap:20px;align-items:center;flex-wrap:wrap;font-size:12.5px}
.lp-footer a{color:#9A938A;transition:color .25s}
.lp-footer a:hover{color:#F5F3EE}
.lp-footer .lp-copy{margin-left:auto;color:#9A938A;font-size:12px}  /* #7d766d = 3.49:1 on ink — fails AA */

/* ---------- WPForms (LP scope) ---------- */
.lp-form-card .wpforms-container .wpforms-field{padding:0 0 14px 0 !important}
.lp-form-card .wpforms-container .wpforms-field-label,
.lp-form-card .wpforms-container .wpforms-field-label.wpforms-field-label{
  font-family:'Onest',sans-serif !important;font-size:10.5px !important;font-weight:500 !important;
  letter-spacing:.16em !important;text-transform:uppercase !important;color:var(--ink-40) !important;margin-bottom:6px !important;
}
.lp-form-card .wpforms-container input[type=text],
.lp-form-card .wpforms-container input[type=email],
.lp-form-card .wpforms-container input[type=tel],
.lp-form-card .wpforms-container textarea{
  width:100% !important;padding:13px 16px !important;border-radius:12px !important;
  border:1px solid var(--line) !important;background:#fff !important;
  font-family:'Onest',sans-serif !important;font-size:15px !important;color:var(--ink) !important;box-shadow:none !important;
}
.lp-form-card .wpforms-container input:focus,
.lp-form-card .wpforms-container textarea:focus{border-color:var(--sage) !important;outline:none !important;box-shadow:none !important}
/* Same three form fixes as the main site's client.css (which is dequeued on
   the LP, so they must be restated here): textarea starts at 88px not WPForms'
   ~219px, no required asterisk, and the submit carries the → arrow. */
.lp-form-card .wpforms-container textarea{height:88px !important;min-height:88px !important;resize:vertical !important}
.lp-form-card .wpforms-container .wpforms-required-label{display:none !important}
.lp-form-card .wpforms-container .wpforms-submit::after{
  content:"\2192";font-size:14px;line-height:1;transition:transform .35s var(--ease);
}
.lp-form-card .wpforms-container .wpforms-submit:hover::after{transform:translateX(4px)}
.lp-form-card .wpforms-container .wpforms-submit,
.lp-form-card .wpforms-form .wpforms-submit{
  width:100% !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;
  background:var(--ink) !important;color:#F5F3EE !important;font-family:'Onest',sans-serif !important;
  font-size:12.5px !important;font-weight:500 !important;letter-spacing:.1em !important;text-transform:uppercase !important;
  padding:15px 28px !important;border:1px solid transparent !important;border-radius:999px !important;margin-top:6px !important;cursor:pointer !important;
  transition:background .4s var(--ease),box-shadow .5s var(--ease),color .3s var(--ease) !important;
}
.lp-form-card .wpforms-container .wpforms-submit:hover{background:var(--sage-deep) !important;color:#fff !important;box-shadow:0 10px 32px rgba(89,125,109,.42) !important}
.lp-form-card .wpforms-container .wpforms-submit-container{padding:0 !important}
.lp-form-card .wpforms-container .wpforms-required-label{color:var(--terra) !important}

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

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:1024px){
  .lp-problem-grid{grid-template-columns:1fr;gap:44px}
  .lp-about-grid{grid-template-columns:320px 1fr;gap:36px}
  .lp-form-grid{grid-template-columns:1fr;gap:38px}
  .lp-form-card{max-width:520px}
}
@media (max-width:768px){
  body.landing-page{padding:10px 10px 0}
  .sheet{padding:48px 22px;border-radius:22px}
  .lp-hero{border-radius:22px;min-height:auto;padding-top:120px}
  .lp-hero-in{padding:0 20px 40px}
  .lp-phone{display:none}
  .lp-header-inner{padding:9px 12px 9px 18px}
  /* Mobile portrait: the problem figure is decoration, not information —
     dropping it keeps the hero-to-copy path short and saves a fetch. */
  .lp-problem-fig{display:none}
  .lp-about-grid{grid-template-columns:1fr;gap:26px}
  .lp-about-fig{max-width:360px}
  .lp-results{grid-template-columns:1fr}
  .lp-facts{grid-template-columns:1fr;gap:20px;padding:28px 22px}
  .lp-form-grid{padding:44px 20px}
  .lp-footer{border-radius:22px 22px 0 0;padding:30px 22px 24px}
  .lp-footer .lp-copy{margin-left:0}
  .lp-solution-in{padding:56px 22px}
}
@media (max-width:480px){
  .lp-hero h1{font-size:clamp(34px,9vw,46px)}
  .lp-hero .lp-sub{font-size:18px}
  a.lp-cta.pill{padding-left:18px;padding-right:18px;letter-spacing:.05em;white-space:normal;text-align:center}
}

/* ---------- touch a11y (same floors as the main site) ---------- */
@media (hover:none) and (pointer:coarse){
  .mk,.lp-meta,.chipcard .sml,.lp-fact .fsml,.lp-footer-in,.lp-copy,.lp-form-note{font-size:14px !important}
  .pill{font-size:14px !important;min-height:44px}
  .lp-brand .bs{font-size:14px !important}
  /* .lp-brand .bn is 18px here, so its .cred child (.68em) lands at 12.2px. */
  .lp-brand .bn .cred{font-size:14px !important}
  /* Footer legal links render 24px tall — give them a real 44px tap box. */
  .lp-footer a{display:inline-block;min-height:44px;padding:11px 0;line-height:1.5;box-sizing:border-box}
  a[href^="tel:"]:not(.lp-phone):not(.nav-phone):not(.m-phone),a[href^="mailto:"]{min-height:44px;padding:10px 0;display:inline-block;box-sizing:border-box}
  .lp-form-card .wpforms-container .wpforms-field-label.wpforms-field-label{font-size:14px !important;letter-spacing:.1em !important}
  .lp-form-card .wpforms-container .wpforms-submit{min-height:44px !important;font-size:14px !important}
  .lp-hero,.lp-solution,.lp-form-sheet{background-attachment:scroll}
}

/* ============================================================================
   LP — sections added for the nervous-system copy (nav links, solution
   benefits, "why work with me", process steps + badges, about signature).
   Same Mindora Golden primitives as everything above.
   ============================================================================ */

/* ---------- header anchor nav ---------- */
.lp-nav{display:flex;align-items:center;gap:4px;margin:0 auto;flex-wrap:nowrap;white-space:nowrap}
.lp-nav a{
  display:inline-flex;align-items:center;height:40px;padding:0 13px;border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.92);transition:background .22s,color .22s;
}
.lp-nav a:hover{background:rgba(255,255,255,.16);color:#fff}

/* ---------- hero secondary CTA + credit ---------- */
.lp-hero-sec{
  font-size:14px;font-weight:500;color:rgba(255,255,255,.94);
  position:relative;padding-bottom:2px;white-space:nowrap;
  text-shadow:0 1px 12px rgba(38,35,31,.55);transition:color .3s var(--ease);
}
.lp-hero-sec::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.35)}
.lp-hero-sec::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--sage-pale);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.19,1,.22,1)}
.lp-hero-sec:hover{color:var(--sage-pale)}
.lp-hero-sec:hover::after{transform:scaleX(1)}
.lp-hero-credit{
  margin-top:22px;font-size:12.5px;font-weight:500;letter-spacing:.06em;
  color:rgba(255,255,255,.9);text-shadow:0 1px 12px rgba(38,35,31,.6);
}

/* ---------- solution benefits : smoked-glass chips on the photo sheet ---------- */
/* Cream, not --sage-pale: measured 2.73:1 against this photo's mid-scrim —
   fails WCAG AA (4.5:1) for an 11px label. Cream clears it, and the shadow
   holds up where the underlying photo runs bright. */
.lp-ben-intro{
  margin-top:30px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(251,250,247,.95) !important;
  text-shadow:0 1px 10px rgba(38,35,31,.6);
}
.lp-benefits{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;max-width:760px}
.lp-ben{
  background:rgba(38,35,31,.42);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:20px 22px;
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.lp-ben:hover{border-color:rgba(169,195,180,.5);background:rgba(38,35,31,.5)}
/* Sequential highlight: each chip glows in turn on a slow 16s loop (0/4/8/12s
   stagger), so attention moves through the four benefits one at a time. */
.lp-ben{animation:lp-ben-cycle 16s var(--ease) infinite}
.lp-ben:nth-child(2){animation-delay:4s}
.lp-ben:nth-child(3){animation-delay:8s}
.lp-ben:nth-child(4){animation-delay:12s}
@keyframes lp-ben-cycle{
  0%,3%   {border-color:rgba(255,255,255,.13);background:rgba(38,35,31,.42);box-shadow:0 0 0 rgba(0,0,0,0)}
  7%,19%  {border-color:rgba(169,195,180,.65);background:rgba(45,60,52,.62);box-shadow:0 14px 36px rgba(0,0,0,.28)}
  24%,100%{border-color:rgba(255,255,255,.13);background:rgba(38,35,31,.42);box-shadow:0 0 0 rgba(0,0,0,0)}
}
@media (prefers-reduced-motion:reduce){.lp-ben{animation:none}}
.lp-ben-l{font-size:16.5px;font-weight:500;color:#fff;letter-spacing:-.01em;margin-bottom:5px}
.lp-ben-b{font-size:14.5px;line-height:1.6;color:rgba(251,250,247,.82)}
.lp-analogy{
  margin-top:30px !important;font-size:clamp(18px,2.1vw,23px) !important;line-height:1.5 !important;
  color:#fff !important;font-weight:400;letter-spacing:-.015em;max-width:34ch !important;
}

/* ---------- why work with me ---------- */
.lp-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lp-tcard{background:var(--tint);border-radius:var(--r-card);padding:34px 34px 36px}
.lp-tcard h3{font-size:clamp(19px,2.1vw,23px);font-weight:500;letter-spacing:-.015em;margin-bottom:12px;line-height:1.25}
.lp-tcard p{color:var(--ink-60);font-size:16px;line-height:1.75;margin:0}

/* ---------- about signature + credentials ---------- */
.lp-sig{
  margin-top:20px;font-size:17px;font-weight:500;color:var(--ink);letter-spacing:-.01em;
}
.lp-creds{
  list-style:none;margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;
}
.lp-creds li{position:relative;padding-left:24px;color:var(--ink-60);font-size:15.5px;line-height:1.6}
.lp-creds li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--terra)}

/* ---------- process steps : the homepage rail, floated on canvas ----------
   .steps-sheet has NO background — the section floats directly on the canvas,
   exactly as on the homepage. This rule lives further down client.css than the
   primitives block lifted at the top of this file, so it has to be restated
   here or .sheet's cream background wins: the section renders as a sheet AND
   the canvas-coloured .lp-step-n chips (which mask the rail) show up as beige
   rectangles against it. Do not add a background. */
.steps-sheet{background:transparent}
/* overflow must be visible here so the highlight card's lift-shadow isn't
   clipped at the section edge — the shadow is what separates the cream card
   from the cream canvas behind it. */
.steps-sheet{overflow:visible}
/* ---------- process steps : the homepage rail, floated on canvas ---------- */
.lp-proc-intro{color:var(--ink-60);font-size:16.5px;line-height:1.8;max-width:56ch;margin-bottom:36px}
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);column-gap:44px;position:relative}
/* Same rule as the homepage stepper: the connector runs BETWEEN steps and stops
   at the last one, rather than trailing off the right edge past "03". */
.lp-step::before{
  content:"";position:absolute;top:13px;left:0;
  width:calc(100% + 44px);height:1px;background:var(--line);
}
.lp-step:last-child::before{display:none}
.lp-step{position:relative;padding-top:0}

/* Highlight card — a card fades in behind whichever step is currently lit
   (0/4/8s stagger), matching the homepage stepper. No travelling marker. */
.lp-step::after{
  content:"";position:absolute;z-index:0;
  top:-18px;left:calc(var(--lp-scx) * -1);right:calc(var(--lp-scx) * -1);bottom:-22px;
  --lp-scx:20px;border-radius:var(--r-card);
  background:#E6EFE9;border:1px solid rgba(122,158,142,.55);
  box-shadow:0 18px 46px rgba(38,35,31,.14);opacity:0;
  animation:lp-step-card 12s var(--ease) infinite;
}
.lp-step:nth-child(2)::after{animation-delay:4s}
.lp-step:nth-child(3)::after{animation-delay:8s}
@keyframes lp-step-card{0%,5%{opacity:0}9%,29%{opacity:1}35%,100%{opacity:0}}
.lp-step h3,.lp-step p{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.lp-step::after{animation:none;opacity:0}}

/* Sequential animation: each step's number lifts and deepens in turn, so the
   three steps read as a progression, in sync with the card above. */
/* Step label is now a pill that lights up in turn — exactly the homepage
   stepper. Non-interactive (pointer-events:none); the pill masks the rail and
   the step-live cycle syncs with the highlight card + travelling marker. */
.lp-step-pill{
  pointer-events:none;position:relative;z-index:1;margin-bottom:26px;
  padding:12px 24px;font-size:11.5px;letter-spacing:.14em;
  background:var(--sheet);border-color:rgba(38,35,31,.22);color:var(--ink);
  animation:lp-step-live 12s var(--ease) infinite;
}
.lp-step:nth-child(2) .lp-step-pill{animation-delay:4s}
.lp-step:nth-child(3) .lp-step-pill{animation-delay:8s}
@keyframes lp-step-live{
  0%,2%   {background:var(--sheet);border-color:rgba(38,35,31,.22);box-shadow:0 0 0 rgba(122,158,142,0);transform:scale(1)}
  9%,29%  {background:var(--sage-pill);border-color:var(--sage-pill);box-shadow:0 10px 26px rgba(122,158,142,.42);transform:scale(1.05)}
  36%,100%{background:var(--sheet);border-color:rgba(38,35,31,.22);box-shadow:0 0 0 rgba(122,158,142,0);transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){.lp-step-pill{animation:none}}
.lp-step h3{font-size:clamp(20px,2.2vw,25px);font-weight:400;letter-spacing:-.02em;margin-bottom:10px}
.lp-step p{color:var(--ink-60);font-size:16px;line-height:1.75;max-width:34ch}
/* --sage-deep is only 3.82:1 on the canvas; this is a phone number people
   actually need to read and tap. #4C6B5C is the same green at 4.90:1. */
.lp-step p a{color:#4C6B5C;text-decoration:underline;text-underline-offset:3px}
.lp-step p a:hover{color:var(--terra)}

/* ---------- trust badges ---------- */
.lp-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.lp-badge{
  background:var(--sheet);border:1px solid var(--line);border-radius:999px;
  padding:12px 24px;display:inline-flex;align-items:baseline;gap:10px;
}
.lp-badge-l{font-size:13px;font-weight:500;color:var(--ink);letter-spacing:.02em;white-space:nowrap}
.lp-badge-s{font-size:12.5px;color:var(--ink-60)}  /* ink-40 = 3.55:1 on the sheet — fails AA */

/* ---------- form section extras ---------- */
.lp-form-phone{margin-top:16px !important;color:rgba(251,250,247,.9) !important}
.lp-form-phone a{color:#fff;font-weight:500;border-bottom:1px solid rgba(255,255,255,.4);transition:color .25s,border-color .25s}
.lp-form-phone a:hover{color:var(--sage-pale);border-color:var(--sage-pale)}

/* ============================================================================
   RESPONSIVE — new sections
   ============================================================================ */
@media (max-width:1024px){
  .lp-trust{grid-template-columns:1fr;gap:14px}
  .lp-nav{display:none}
}
@media (max-width:768px){
  .lp-benefits{grid-template-columns:1fr}
  /* Stack the phases; the connecting rail only reads as a row. */
  .lp-steps{grid-template-columns:1fr;row-gap:34px}
  .lp-steps::before,.lp-step::before,.lp-step::after{display:none}
  .lp-badges{margin-top:34px}
  .lp-hero-actions{flex-direction:column;align-items:flex-start;gap:14px}
  .lp-tcard{padding:26px 24px 28px}
}
@media (max-width:480px){
  .lp-badge{width:100%;justify-content:center;flex-wrap:wrap;text-align:center}
}

/* ---------- touch a11y for the new bits ---------- */
@media (hover:none) and (pointer:coarse){
  .lp-nav a{font-size:14px !important;min-height:44px}
  .lp-hero-sec{font-size:14px !important;min-height:44px;display:inline-flex;align-items:center}
  .lp-hero-credit,.lp-ben-intro,.lp-step-pill,.lp-badge-l,.lp-badge-s{font-size:14px !important}
  .lp-ben-b,.lp-creds li{font-size:14px !important}
}

/* ============================================================================
   LP STICKY HEADER + FOOTER DISCLAIMER (matches the main site header behaviour)
   ============================================================================ */
/* The in-hero capsule (.lp-header) scrolls away; this light bar slides in on
   scroll, exactly like the main site's header.sticky-bar. */
.lp-sticky{
  position:fixed;top:0;left:0;right:0;z-index:130;
  background:rgba(251,250,247,.95);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transform:translateY(-100%);transition:transform .3s var(--ease);
  padding:0 clamp(20px,3.5vw,44px);
}
.lp-sticky.show{transform:translateY(0)}
.lp-sticky-in{display:flex;align-items:center;gap:22px;height:64px;max-width:1512px;margin:0 auto}
.lp-sticky .lp-brand{color:var(--ink);margin-right:auto}
.lp-sticky .lp-brand .bs{color:var(--sage-deep)}
.lp-sticky .lp-nav a{color:var(--ink-60)}
.lp-sticky .lp-nav a:hover{background:var(--tint);color:var(--ink)}
.lp-sticky .lp-phone{color:var(--ink)}
.lp-sticky .lp-phone svg{color:var(--sage-deep)}
.lp-sticky .lp-phone .ph-num::before{background:rgba(38,35,31,.28)}
.lp-sticky .lp-phone .ph-num::after{background:var(--sage-deep)}
.lp-sticky .lp-phone:hover{color:var(--sage-deep)}

/* Fees / consultation disclaimer, mirroring the parent LP template's
   .lp-footer-compliance line. */
.lp-footer-compliance{
  border-top:1px solid rgba(245,243,238,.12);
  padding:18px 0 4px;margin-top:6px;
  font-size:12.5px;color:#9A938A;line-height:1.6;
}

@media (max-width:900px){
  /* Sticky bar drops its anchor nav on narrow screens (like the main site). */
  .lp-sticky .lp-nav{display:none}
}
@media (hover:none) and (pointer:coarse){
  .lp-footer-compliance{font-size:14px}
}

/* ============================================================================
   HEADER — ported verbatim from the main site (client.css) so the LP header is
   pixel-identical: a smoked-glass capsule floating over the hero (.nav-wrap)
   that hands off to a light sticky bar (header.sticky-bar) on scroll. lp.css
   shares the same CSS variables, so these rules work unchanged.
   ============================================================================ */
.nav-wrap{position:absolute;top:0;left:0;right:0;z-index:125;padding:22px clamp(20px,3.5vw,44px) 0}
.nav{display:flex;align-items:center;gap:28px}
.brand{line-height:1.14;color:#fff;text-decoration:none}
.brand .bn{font-size:clamp(20px,1.9vw,27px);font-weight:500;letter-spacing:-.015em}
.bn .cred{font-size:.68em;font-weight:300;opacity:.78;letter-spacing:.02em}
.brand .bs{font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;opacity:.92;margin-top:2px}
.nav-links{display:flex;align-items:center;gap:22px;list-style:none;margin:0 auto;padding:0;flex-wrap:nowrap;white-space:nowrap}
.nav-links>li{position:relative;height:40px;display:flex;align-items:center}
.nav-links>li>a{
  display:inline-flex;align-items:center;height:40px;
  padding:0 13px;border-radius:999px;text-decoration:none;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.96);
  transition:background .22s,color .22s;
}
.nav-links>li>a:hover{background:rgba(255,255,255,.16);color:#fff}
.nav-phone{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:#fff;letter-spacing:.03em;white-space:nowrap;text-decoration:none;transition:color .3s var(--ease)}
.nav-phone .ph-ico{width:14px;height:14px;color:var(--sage-pale);flex:none}
.nav-phone .ph-num{position:relative;padding-bottom:2px}
.nav-phone .ph-num::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.35)}
.nav-phone .ph-num::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--sage-pale);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.19,1,.22,1)}
.nav-phone:hover{color:var(--sage-pale)}
.nav-phone:hover .ph-num::after{transform:scaleX(1)}
.nav-phone:hover .ph-ico{animation:ph-ring .55s var(--ease)}
@keyframes ph-ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}45%{transform:rotate(11deg)}70%{transform:rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){.nav-phone:hover .ph-ico{animation:none}}
.nav-cta{flex:none}
.nav-wrap .nav{
  background:rgba(38,35,31,.20);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-radius:999px;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 44px rgba(38,35,31,.18);
  padding:9px 12px 9px 28px;
}
.nav-wrap .brand{color:#fff}
.nav-wrap .brand .bs{color:var(--sage-pale);opacity:1}
.nav-wrap .nav-links>li>a{color:rgba(255,255,255,.92)}
.nav-wrap .nav-links>li>a:hover{background:rgba(255,255,255,.14);color:#fff}
.nav-wrap .nav-phone{color:#fff}
.nav-wrap .nav-phone:hover{color:var(--sage-pale)}
.nav-wrap .burger span{background:#fff}
html.m-open .nav-wrap .nav{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
header.sticky-bar{
  position:fixed;top:0;left:0;right:0;z-index:126;
  background:rgba(251,250,247,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transform:translateY(-100%);transition:transform .3s var(--ease);
  padding:0 clamp(20px,3.5vw,44px);
}
header.sticky-bar.show{transform:translateY(0)}
header.sticky-bar .nav{height:64px}
header.sticky-bar .brand{color:var(--ink)}
header.sticky-bar .brand .bs{color:var(--sage-deep)}
header.sticky-bar .nav-links>li>a{color:var(--ink-60)}
header.sticky-bar .nav-links>li>a:hover{background:var(--tint);color:var(--ink)}
header.sticky-bar .nav-phone{color:var(--ink)}
header.sticky-bar .nav-phone:hover{color:var(--sage-deep)}
header.sticky-bar .ph-ico{color:var(--sage-deep)}
header.sticky-bar .ph-num::before{background:rgba(38,35,31,.28)}
header.sticky-bar .ph-num::after{background:var(--sage-deep)}
.burger{display:none;margin-left:auto;background:none;border:none;cursor:pointer;padding:8px;z-index:130}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;border-radius:2px;transition:transform .3s var(--ease),opacity .3s,background .3s}
header.sticky-bar .burger span{background:var(--ink)}
/* Anchor-nav targets (The Overwhelm / The Work / About) must clear the sticky
   bar when jumped to, or the section heading lands hidden underneath it. */
#problem,#solution,#why,#about,#process,#next,#form{scroll-margin-top:84px}
.burger.open span{background:var(--ink)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none}

@media (max-width:1024px){
  .nav-links{display:none}
  .burger{display:block}
}
@media (max-width:768px){
  .nav-phone,.nav-cta{display:none}
  .mobile-menu{
    display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;
    background:var(--sheet);overflow-y:auto;padding:90px 28px 60px;
  }
  .mobile-menu.open{display:block}
  .mobile-menu-close{position:absolute;top:24px;right:24px;background:none;border:none;cursor:pointer;color:var(--ink);width:40px;height:40px;padding:8px}
  .mobile-nav-links{list-style:none;margin:0;padding:0}
  .mobile-nav-links>li{border-bottom:1px solid var(--line)}
  .mobile-menu a{display:block;padding:16px 4px;font-size:17px;font-weight:500;color:var(--ink);text-decoration:none}
  .mobile-cta{margin-top:24px;display:flex;flex-direction:column;gap:14px}
  .mobile-cta .pill{justify-content:center;white-space:normal;text-align:center;letter-spacing:.04em;line-height:1.4;color:#F5F3EE;font-size:14px}
  html.m-open .nav-wrap .brand{visibility:hidden}
  .m-phone{text-align:center;font-size:16px;font-weight:500;color:var(--ink);text-decoration:none}
}

/* ============================================================================
   TOUCH-DEVICE ACCESSIBILITY — ported header (audit fix, 2026-07-21)
   Two reasons this has to live at the END of lp.css and not in client.css:
     1. page-landing.php deregisters client.css, so the main site's touch
        overrides never load on this page at all.
     2. The header rules above were ported verbatim from client.css and sit
        AFTER the earlier touch blocks in this file (lines ~553, ~597), so
        those blocks lose on source order at equal specificity.
   `(hover:none) and (pointer:coarse)`, never max-width: iPad Pro 11 landscape
   is 1194px wide and is still a touch device.
   ============================================================================ */
@media (hover:none) and (pointer:coarse){
  /* Anchor nav pills — 11.5px text locked inside a fixed 40px box. Release the
     fixed height on both the li and the a so padding can reach 44px. */
  .nav-links>li{height:auto}
  .nav-links>li>a{
    height:auto;min-height:44px;font-size:14px !important;
    padding:11px 13px;box-sizing:border-box;
  }

  /* Wordmark: 39px tall from its two text lines alone. */
  .nav .brand,
  .lp-sticky .brand{
    display:inline-block;min-height:44px;padding:3px 0;box-sizing:border-box;
  }
  /* .brand .bs is deliberately NOT bumped to 14px here. At 10px it is a
     letter-spaced wordmark sub-line, not reading copy, and raising it wraps
     "BRAINSPOTTING THERAPY" onto a second line — which grows the capsule until
     it overlaps the hero eyebrow. The audit does not flag it. */

  /* Burger measures 40x42 (24px bars + 8px padding), just under the 44px tap
     target. client.css fixes this for the main site, but the LP deregisters it.
     Lock the box rather than growing padding so the bars stay centred. */
  .burger{min-width:44px;min-height:44px;display:flex;flex-direction:column;justify-content:center;align-items:center;box-sizing:border-box}
  .burger span{flex-shrink:0}

  /* Phone link: a 24px line box at 13px. Distinct class from .m-phone, whose
     drawer padding is set separately, so this does not collide with it. */
  .nav-phone{
    font-size:14px !important;min-height:44px;
    padding:10px 0;box-sizing:border-box;
  }
}

/* ============================================================================
   MOBILE PORTRAIT — form width + footer centring (2026-07-21)
   ============================================================================ */
@media (max-width:480px){
  /* The form sat inside three nested paddings that stacked up: the sheet (22px),
     the grid (20px) and the card (34px) — 152px of chrome on a 390px screen,
     leaving the inputs only 218px wide. The sheet's side padding is redundant
     here (its background image is absolutely positioned and the grid already
     insets the content), so drop it and trim the other two. Inputs are
     width:100% of the card, so they widen with it: 218px -> ~306px. */
  .lp-form-sheet{padding-left:0;padding-right:0}
  .lp-form-grid{padding-left:14px;padding-right:14px}
  .lp-form-card{padding-left:18px;padding-right:18px}

  /* Footer reads as a centred stack on portrait: the legal links and copyright
     wrap onto their own lines, so left-alignment left them ragged. */
  .lp-footer-in{justify-content:center;text-align:center}
  .lp-footer-compliance{text-align:center}
}

/* <picture> must not create a box — see the matching note in client.css.
   .lp-solution img / .lp-form-sheet img are absolutely positioned section
   backgrounds; without this the wrapper became the flow child and the photo
   rendered inline above the copy. */
picture{display:contents}