/* ============================================================
   Dr. Todd McGinnis — LANDING PAGE
   Self-contained. Same brand as the main site: the five client
   colours, Manrope for display and Newsreader for reading.
   Loaded ONLY on page-landing.php; client.css does not load there.
   ============================================================ */

:root{
  /* the five client colours, used as given */
  --harbor:#355A67;          /* PRIMARY    */
  --stone:#7B786F;           /* SECONDARY  */
  --clay:#8A6F57;            /* ACCENT     */
  --linen:#F3EEE6;           /* BACKGROUND */
  --ink:#2E3338;             /* TEXT       */

  /* derived shades only — straight tints of the five above */
  --harbor-deep:#223A42;
  --harbor-mist:#E6EDEF;
  --stone-mist:#EDEAE3;
  --stone-pale:#E7E1D6;
  --clay-btn:#755E4A;        /* accent -15%: clears AA behind a light label */
  --clay-deeper:#5F4C3B;
  --clay-light:#C9B79F;
  --linen-warm:#F9F5EF;
  --linen-deep:#EDE7DC;
  --paper:#F9F5EF;
  --ink-soft:#2E3338;
  --ink-faint:#696660;       /* secondary -15%: the AA floor for small text */
  --slate:#223A42;

  --f-display:"Manrope",-apple-system,Helvetica,sans-serif;
  --f-body:"Newsreader",Georgia,serif;

  --shell:min(1200px, 100% - 3rem);
  --stone-r:999px;

  --step-h1:clamp(2.4rem, 1.5rem + 3.7vw, 4.1rem);
  --step-h2:clamp(1.85rem, 1.25rem + 2.3vw, 2.85rem);
  --step-h3:clamp(1.3rem, 1.08rem + .95vw, 1.72rem);
  --step-body:clamp(1.08rem, 1rem + .3vw, 1.18rem);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* WPForms brand tokens. The parent styles every form generically from
     these; the LP is self-contained so it has to carry its own copy. */
  --form-field-bg:#F3EEE6;
  --form-field-border:rgba(123,120,111,.4);
  --form-field-text:#2E3338;
  --form-label:#696660;
  --form-label-sub:rgba(105,102,96,.8);
  --form-required:#755E4A;
  --form-radius:2px;
  --form-focus:#8A6F57;
  --form-focus-ring:rgba(138,111,87,.16);
  --form-btn-bg:#755E4A;
  --form-btn-text:#F9F5EF;
  --form-btn-bg-hover:#5F4C3B;
  --form-btn-text-hover:#F9F5EF;
  --form-btn-radius:2px;
}

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

body.lp-page{
  margin:0;
  background:var(--linen);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--step-body);
  font-weight:400;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  overflow-x:hidden;
}

.lp-page h1,.lp-page h2,.lp-page h3,.lp-page h4{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.035em;
  /* NOT balance — Chromium scrambles word order on multi-line headings */
  text-wrap:pretty;
  margin:0;color:var(--ink);
}
.lp-page h1{font-size:var(--step-h1);line-height:1.03}
.lp-page h2{font-size:var(--step-h2)}
.lp-page h3{font-size:var(--step-h3);line-height:1.18}
.lp-page p{margin:0 0 1.15em}
.lp-page p:last-child{margin-bottom:0}
.lp-page em{font-style:italic}
.lp-page a{color:inherit}
.lp-page img{display:block;max-width:100%;height:auto}
.lp-page ::selection{background:var(--clay-light);color:var(--harbor-deep)}

.lp-shell{width:var(--shell);margin-inline:auto}

/* ---------- shared eyebrow / rule ---------- */
.lp-eyebrow{
  margin:0 0 .9rem;font-family:var(--f-body);font-weight:700;
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--harbor-deep);
}
.lp-eyebrow--light{color:var(--clay-light)}
/* Gold rules span the full column, never a 64px stub. The logo underlines
   the whole wordmark — a short floating tick reads as generic decoration. */
.lp-rule{display:block;width:100%;height:1px;margin:1.4rem 0;
  background:rgba(201,183,159,.72)}

/* ---------- buttons ---------- */
.lp-page .btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-body);font-weight:600;
  font-size:.99rem;letter-spacing:.005em;
  padding:1rem 1.9rem;
  border-radius:var(--stone-r);
  border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.lp-page .btn .arw{transition:transform .45s var(--ease-out)}
.lp-page .btn:hover .arw{transform:translateX(5px)}
.lp-page .btn-clay{background:var(--clay-light);color:#33270A;box-shadow:0 2px 0 rgba(46,51,56,.10)}
.lp-page .btn-clay:hover{background:#F0C246;box-shadow:0 6px 22px -8px rgba(201,183,159,.85)}

.lp-page :focus-visible{outline:3px solid var(--harbor-deep);outline-offset:3px;border-radius:3px}
.bg-harbor :focus-visible,.lp-band :focus-visible{outline-color:var(--clay-light)}

/* ---------- section frames ---------- */
.lp-sec{position:relative;padding:clamp(2.8rem,7vw,4rem) 0}
.bg-linen{background:var(--linen)}
.bg-warm{background:var(--linen-warm)}
.bg-linen-warm{background:var(--harbor-mist)}
.bg-stone{background:var(--stone-mist)}
.bg-harbor{background:var(--slate);color:#EDF2F4}

.lp-sec-head{max-width:44ch;margin:0 auto clamp(2.4rem,4.6vw,3.6rem);text-align:center}
.lp-sec-head .lp-eyebrow{color:var(--harbor-deep)}
.lp-sec-intro{margin-top:1rem;color:var(--ink-soft)}
.bg-harbor .lp-sec-intro{color:rgba(237,234,227,.82)}

.lp-rich p{color:var(--ink-soft)}
.lp-rich ul{margin:1.1em 0;padding-left:1.2em}
.lp-rich li{margin:.35em 0;color:var(--ink-soft)}

/* ============================================================
   HEADER
   ============================================================ */
.lp-hdr{
  position:fixed;inset:0 0 auto 0;z-index:80;
  background:rgba(243,238,230,.82);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);
  transition:background-color .45s var(--ease),box-shadow .45s var(--ease),padding .45s var(--ease);
}
.lp-hdr.solid{
  background:rgba(243,238,230,.96);
  box-shadow:0 1px 0 rgba(46,51,56,.07),0 12px 34px -28px rgba(46,51,56,.5);
  padding:.24rem 0 !important;
}
.lp-hdr-in{display:flex;align-items:center;gap:1.4rem}
.lp-brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.lh{display:block;width:clamp(172px,15vw,192px);height:auto;transition:width .45s var(--ease)}
.lp-hdr.solid .lh{width:164px}

.lp-nav{margin-left:auto}
.lp-nav-list{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.lp-nav-list>li{position:relative}
.lp-nav-list a{
  display:block;padding:.6rem .8rem;
  font-size:.885rem;font-weight:500;letter-spacing:.005em;
  color:var(--ink);text-decoration:none;border-radius:8px;position:relative;
  transition:color .3s var(--ease);
}
.lp-nav-list>li>a::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:.32rem;height:1.5px;
  background:var(--clay-light);border-radius:1px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease-out);
}
.lp-nav-list>li>a:hover::after,.lp-nav-list>li>a:focus-visible::after{transform:scaleX(1)}
.lp-nav-list>li>a:hover{color:var(--harbor-deep)}
.lp-nav-tel,.lp-nav-cta{display:none}

.lp-hdr-cta{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.lp-hdr-tel{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.64rem 1.05rem;
  border:1px solid rgba(46,51,56,.22);border-radius:var(--stone-r);
  font-size:.875rem;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;
  transition:color .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease);
}
.lp-hdr-tel svg{width:15px;height:15px;stroke:var(--harbor);stroke-width:1.9;fill:none;flex-shrink:0;transition:stroke .35s var(--ease),transform .35s var(--ease-out)}
.lp-hdr-tel:hover{color:var(--harbor-deep);border-color:var(--harbor);background:rgba(53,90,103,.07)}
.lp-hdr-tel:hover svg{stroke:var(--harbor-deep);transform:rotate(-14deg) scale(1.08)}
.lp-hdr .btn{padding:.7rem 1.25rem;font-size:.855rem}

/* small-laptop band: drop the phone chip so the primary CTA never clips */
@media (min-width:769px) and (max-width:1180px){
  .lp-hdr-tel{display:none}
  .lp-hdr-in{gap:1rem}
  .lp-nav-list{gap:.05rem}
  .lp-nav-list a{padding:.56rem .55rem;font-size:.84rem}
  .lp-hdr .btn{padding:.64rem 1.05rem;font-size:.8rem}
  .lh{width:clamp(166px,14vw,180px)}
}

.lp-burger{display:none;background:none;border:0;padding:.6rem;cursor:pointer;margin-left:auto}
.lp-burger span{display:block;width:25px;height:2px;background:var(--ink);border-radius:2px;transition:transform .4s var(--ease),opacity .3s}
.lp-burger span+span{margin-top:6px}
.lp-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.lp-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.lp-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
/* ── Hero: full-bleed photograph with content over it, matching the homepage.
   The circular-headshot split is gone; the headshot now lives in Why Trust Me. ── */
.lp-hero{position:relative;min-height:clamp(540px,78svh,820px);display:flex;align-items:center;
  overflow:hidden;background:var(--slate)}
.lp-hero-img{position:absolute;inset:0;overflow:hidden}
.lp-hero-img picture,.lp-hero-img img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
/* The headline sits top-left over sky, so the wash has to be heaviest there —
   a bottom-left radial alone leaves white type on bright cloud. */
.lp-hero-scrim{position:absolute;inset:0;
  background:
    radial-gradient(120% 110% at 10% 22%, rgba(26,44,50,.78) 0%, rgba(30,50,58,.52) 34%, rgba(34,58,66,.18) 58%, rgba(34,58,66,0) 78%),
    linear-gradient(to right, rgba(26,44,50,.5) 0%, rgba(30,50,58,.18) 38%, rgba(34,58,66,0) 66%),
    linear-gradient(to top, rgba(30,50,58,.3) 0%, rgba(34,58,66,.08) 26%, rgba(34,58,66,0) 48%)}
.lp-hero-in{position:relative;z-index:2;padding:7rem 0 3rem}
.lp-hero-eyebrow{margin:0 0 1rem;font-size:.92rem;font-weight:600;letter-spacing:.02em;
  color:var(--clay-light);text-shadow:0 1px 12px rgba(22,38,44,.6)}
.lp-hero-h1{max-width:15ch;color:#FFFDF8;text-shadow:0 2px 34px rgba(22,38,44,.45)}
.lp-hero-sub{margin:clamp(1.9rem,3vw,2.9rem) 0 0;max-width:36ch;
  /* the reading serif, not the display sans — the H1's line-height:1.03 already
     crops tight, so the gap above has to be generous or the two collide */
  font-family:var(--f-body);font-style:italic;font-weight:400;
  font-size:clamp(1.2rem,1rem + .95vw,1.62rem);line-height:1.42;color:#F3EEE6;
  text-shadow:0 2px 22px rgba(22,38,44,.62)}
.lp-hero-act{margin-top:clamp(2rem,3.2vw,3rem);display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center}
.lp-hero-phone{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  color:#FFFDF8;font-weight:600;font-size:1.04rem;text-shadow:0 1px 12px rgba(22,38,44,.5);
  transition:color .3s var(--ease)}
.lp-hero-phone .ic-call{width:31px;height:21px;fill:var(--clay-light);flex:0 0 auto}
.lp-hero-phone:hover{color:var(--clay-light)}
.lp-hero-meta{list-style:none;margin:clamp(1.8rem,3vw,2.4rem) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.7rem 1.6rem}
.lp-hero-meta li{display:flex;align-items:center;gap:.55rem;font-size:.95rem;font-weight:600;
  color:rgba(249,245,239,.9);text-shadow:0 1px 10px rgba(22,38,44,.5)}
.lp-hero-meta .lp-dot{width:6px;height:6px;border-radius:50%;background:var(--clay-light);flex:0 0 auto}

.lp-badges{background:var(--linen);padding:1.4rem 0;border-bottom:1px solid rgba(201,183,159,.28)}
/* Badges use the full shell width rather than huddling in the middle.
   space-between only reads well while they sit on one line — once the row
   wraps (see the mobile override) it reverts to centred. */
.lp-badges-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2.4rem}
.lp-badge{display:inline-flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:600;color:var(--ink-soft)}
.lp-badge svg{width:18px;height:18px;stroke:var(--clay-deeper);stroke-width:1.9;fill:none;flex-shrink:0}

/* ============================================================
   SPLIT (problem / solution) — image stretches to text height
   ============================================================ */
.lp-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.2rem,4.6vw,4.4rem);align-items:stretch}
.lp-split-copy{align-self:center}
.lp-split-img{position:relative;min-height:100%;border-radius:20px;overflow:hidden;
  box-shadow:0 30px 60px -40px rgba(46,51,56,.5)}
.lp-split-img picture,.lp-split-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lp-split--img-left .lp-split-img{order:-1}

.lp-symptoms{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.7rem}
.lp-symptoms li{position:relative;padding-left:1.7rem;color:var(--ink-soft);font-size:1.02rem;line-height:1.55}
.lp-symptoms li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;
  background:var(--harbor);box-shadow:0 0 0 4px rgba(53,90,103,.14)}
/* Closing line of the problem section. Bold, not italic — it is the turn in
   the argument, so it reads as a statement rather than an aside. Spacing
   matches the section rhythm above it instead of floating loose. */
.lp-page .lp-problem-close{margin:3.6rem 0 0;padding-top:1.6rem;
  border-top:1px solid rgba(201,183,159,.55);
  font-family:var(--f-display);font-style:normal;font-weight:600;
  font-size:clamp(1.24rem,1.02rem + .9vw,1.62rem);line-height:1.42;
  color:var(--harbor-deep)}
/* max-width lives on an inner span-equivalent, not the element carrying the
   rule — the border-top follows the box, and a short rule is exactly the
   partial gold tick we do not ship. */
.lp-page .lp-problem-close{max-width:none}

/* ============================================================
   MID CTA BANDS
   ============================================================ */
/* Interruption band — deliberately SHORT. It is a hinge between two long
   reading sections, not a section of its own, so it gets a compact height,
   gold hairlines top and bottom to delineate it, and a directional gradient
   rather than a flat fill. */
.lp-band{color:#fff;padding:clamp(1.5rem,2.6vw,2.1rem) 0;position:relative;overflow:hidden;
  background:linear-gradient(105deg,var(--harbor-deep) 0%,var(--harbor) 52%,#5C8CA6 100%);
  border-top:2px solid var(--clay-light);
  border-bottom:2px solid var(--clay-light)}
.lp-band--2{background:linear-gradient(105deg,#2F5266 0%,var(--harbor-deep) 58%,var(--harbor) 100%)}
.lp-band::before{content:"";position:absolute;right:-6%;top:-70%;width:min(560px,44%);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.12),rgba(255,255,255,0) 66%);pointer-events:none}
.lp-band-in{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2.5rem}
/* Headline shrinks to a single confident line at band scale.
   MUST be .lp-page-prefixed: the base `.lp-page h2` rule is (0,1,1) and
   outranks a bare `.lp-band-h` (0,1,0), which silently reverts colour,
   size and margin. Same trap as `.lp-page h1` vs `.lp-hero-h1`. */
/* Same scale as the homepage featured lead (.orient .lead) so the band
   carries real weight rather than reading as a caption. */
.lp-page .lp-band-h{color:#fff;font-size:clamp(1.44rem,1.02rem + 1.85vw,2.5rem);line-height:1.25;margin:0}
.lp-band-eyebrow{margin:0 0 .6rem;font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--clay-light)}
.lp-band-h{color:#fff;max-width:22ch;flex:1 1 460px}
.lp-band--2 .lp-band-in{flex-direction:column;text-align:center}
.lp-band--2 .lp-band-h{max-width:24ch}
.lp-band-btn{flex-shrink:0}

/* ============================================================
   SOLUTION benefits
   ============================================================ */
.lp-benefits{list-style:none;margin:1.7rem 0 0;padding:0;display:grid;gap:1.05rem}
.lp-benefits li{display:flex;gap:.85rem;align-items:flex-start}
.lp-benefit-tick{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--stone-mist);margin-top:.1rem}
.lp-benefit-tick svg{width:15px;height:15px;stroke:var(--clay-deeper);stroke-width:2.4;fill:none}
.lp-benefit-text{color:var(--ink-soft);line-height:1.58}
.lp-benefit-text strong{color:var(--ink);font-weight:700;margin-right:.35em}

/* ============================================================
   PROCESS (3 steps, gold numerals)
   ============================================================ */
.lp-process{border-top:2px solid var(--clay-light)}
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.4rem)}
.lp-step{position:relative;background:var(--paper);border-radius:20px;padding:clamp(1.8rem,3vw,2.4rem);
  border:1px solid rgba(46,51,56,.06);overflow:hidden;
  box-shadow:0 2px 0 rgba(46,51,56,.04),0 22px 48px -36px rgba(46,51,56,.5);text-align:center}
.lp-step-num{display:block;font-family:var(--f-display);font-weight:600;line-height:1;
  font-size:clamp(2.4rem,1.6rem + 2.6vw,3.4rem);color:#A67C10;margin-bottom:.6rem}

/* Phase progression: a gold line draws across the bottom of 01, then 02,
   then 03, then loops. Reads as a path being walked rather than three static
   cards. One 6s cycle shared by all three, offset 2s apart. */
@keyframes lpStepSweep{
  0%      {transform:scaleX(0);opacity:1}
  8.6%    {transform:scaleX(1);opacity:1}   /* ~0.9s to draw */
  29.5%   {transform:scaleX(1);opacity:1}   /* ~2.2s hold, filled */
  32.4%   {transform:scaleX(1);opacity:0}
  32.41%,
  100%    {transform:scaleX(0);opacity:0}
}
.lp-step::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,rgba(201,183,159,0) 0%,var(--clay-light) 18%,var(--clay-light) 100%);
  transform-origin:left center;transform:scaleX(0);opacity:0;
  animation:lpStepSweep 10.5s cubic-bezier(.22,.61,.36,1) infinite;
}
.lp-steps .lp-step:nth-child(1)::after{animation-delay:0s}
.lp-steps .lp-step:nth-child(2)::after{animation-delay:3.5s}
.lp-steps .lp-step:nth-child(3)::after{animation-delay:7s}
@media (prefers-reduced-motion: reduce){
  .lp-step::after{animation:none;transform:scaleX(1);opacity:.5}
}
.lp-step h3{margin-bottom:.6rem}
.lp-step p{color:var(--ink-soft);font-size:1rem;line-height:1.6;margin:0}

/* ============================================================
   TRUST PILLARS
   ============================================================ */
.lp-trust-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.4rem)}
.lp-trust-grid--img{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center}
/* The pillars below carry a gold border-top, so this headline needs real
   separation — at the old value the rule crowded the descenders. */
.lp-page .lp-trust-h{max-width:20ch;margin-bottom:clamp(2.8rem,5vw,4.2rem)}
.lp-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.2rem)}
.lp-trust-grid--img .lp-pillars{grid-template-columns:1fr}
.lp-pillar{padding-top:1.1rem;border-top:1px solid rgba(201,183,159,.55)}
.lp-pillar h3{font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem);margin-bottom:.5rem}
.lp-pillar p{color:var(--ink-soft);font-size:.99rem;line-height:1.6;margin:0}
.lp-trust-img{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;
  box-shadow:0 30px 60px -40px rgba(46,51,56,.5)}
.lp-trust-img picture,.lp-trust-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ============================================================
   FAQ accordion — gold morphing markers, grid 0fr→1fr reveal
   ============================================================ */
/* Card padding and the gold question underline match the main-site FAQ page,
   so the landing page reads as the same practice rather than a stray funnel. */
.lp-faq-list{max-width:820px;margin:0 auto;display:grid;gap:1rem}
.lp-faq-item{background:var(--paper);border-radius:16px;border:1px solid rgba(46,51,56,.07);overflow:hidden;
  box-shadow:0 14px 34px -30px rgba(46,51,56,.5)}
.lp-faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:1.6rem clamp(1.6rem,3vw,2.2rem);
  font-family:var(--f-display);font-size:clamp(1.08rem,1rem + .45vw,1.32rem);font-weight:500;color:var(--ink);
}
/* Gold rule under the question, echoing the logo's underline of "Hope".
   Drawn on a span so it hugs the text and never reaches the marker. */
.lp-faq-q > span:first-child{
  display:inline-block;padding-bottom:.5rem;
  border-bottom:2px solid transparent;transition:border-color .35s var(--ease)}
.lp-faq-item.open .lp-faq-q > span:first-child{border-bottom-color:var(--clay-light)}
.lp-faq-mark{position:relative;width:18px;height:18px;flex-shrink:0}
.lp-faq-mark::before,.lp-faq-mark::after{content:"";position:absolute;background:var(--clay-light);border-radius:2px;
  transition:transform .4s var(--ease)}
.lp-faq-mark::before{left:0;top:8px;width:18px;height:2px}
.lp-faq-mark::after{left:8px;top:0;width:2px;height:18px}
.lp-faq-item.open .lp-faq-mark::after{transform:scaleY(0)}
.lp-faq-a-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.lp-faq-item.open .lp-faq-a-wrap{grid-template-rows:1fr}
.lp-faq-a{overflow:hidden}
/* .lp-page-prefixed: `.lp-faq-a>*` is only (0,1,0) and loses to `.lp-page p`,
   which strips the horizontal inset and pins the answer to the card edge. */
.lp-page .lp-faq-a>*{margin:0 clamp(1.6rem,3vw,2.2rem) 2.2rem}
/* `.lp-page p:last-child{margin-bottom:0}` is (0,2,1) and zeroes the final
   paragraph, collapsing the answer onto the card edge. (0,3,0) beats it. */
.lp-page .lp-faq-a>*:last-child{margin-bottom:2.2rem}
.lp-faq-a p{color:var(--ink-soft);line-height:1.66}
.lp-faq-a p:first-child{padding-top:.2rem}

/* ============================================================
   FORM
   ============================================================ */
.lp-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(2.4rem,5vw,4.5rem);align-items:start}
.lp-form-copy h2{color:#FBFDFD;max-width:18ch}
.lp-form-copy .lp-rule{background:rgba(201,183,159,.85)}
.lp-form-sub{color:rgba(237,234,227,.86);max-width:44ch}
.lp-form-trust{list-style:none;margin:1.9rem 0 0;padding:0;display:grid;gap:1.05rem}
.lp-form-trust li{display:flex;gap:.8rem;align-items:flex-start;color:rgba(237,234,227,.82);font-size:.95rem;line-height:1.55}
.lp-form-trust strong{color:#fff;font-weight:700}
.lp-form-trust svg{width:20px;height:20px;stroke:var(--clay-light);stroke-width:1.8;fill:none;flex-shrink:0;margin-top:.15rem}

.lp-form-card{
  background:rgba(243,238,230,.98);color:var(--ink);
  border-radius:22px;padding:clamp(1.75rem,3vw,2.5rem);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7);
}
.lp-form-card h3{font-size:1.42rem;margin-bottom:1.2rem}
.lp-form-disclaimer{margin-top:1rem;font-size:.82rem;color:#5A6B74;line-height:1.55;text-align:center}

/* ============================================================
   FOOTER
   ============================================================ */
/* The form section above is also slate — without a gold rule and a darker
   shade the footer just reads as more of the same band. */
.lp-ftr{background:#162025;color:rgba(230,237,239,.78);padding:3.2rem 0 2.4rem;
  border-top:2px solid var(--clay-light)}
/* No max-width here: .lp-shell creates its gutter with margin-inline:auto,
   so narrowing the box centres it instead of keeping it left-aligned. */
.lp-ftr-compliance{margin-top:2.2rem;font-size:.9rem;line-height:1.6;
  color:rgba(230,237,239,.68)}
.lp-ftr-legal{display:flex;gap:1.4rem;flex-wrap:wrap}
.lp-ftr-legal a{color:rgba(230,237,239,.72);text-decoration:none;font-size:.88rem;
  transition:color .3s var(--ease)}
.lp-ftr-legal a:hover{color:var(--clay-light)}
.lp-ftr-in{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2.4rem;justify-content:space-between}
.lh-ftr{width:clamp(180px,20vw,224px);--lh-word:#F3EEE6;--lh-hope:#F3EEE6;--lh-tag:#F3EEE6;--lh-rule:#C9B79F}
.lp-ftr-contact{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.lp-ftr-contact a{color:rgba(230,237,239,.82);text-decoration:none;font-size:.95rem;transition:color .3s var(--ease)}
.lp-ftr-contact a:hover{color:var(--clay-light)}
.lp-ftr-dot{opacity:.35}
.lp-ftr-base{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(201,183,159,.34);
  font-size:.83rem;color:rgba(230,237,239,.64);
  display:flex;flex-wrap:wrap;gap:.9rem 2rem;align-items:center;justify-content:space-between}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
/* force-visible safety net — if the observer never fires */
@keyframes lpForceVisible{to{opacity:1;transform:none}}
.reveal{animation:lpForceVisible .01s 6s forwards}
.reveal.in{animation:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;animation:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  :root{--shell:min(1200px, 100% - 2.5rem)}
  .lp-form-grid{grid-template-columns:1fr;gap:2.6rem}
  .lp-trust-grid--img{grid-template-columns:1fr}
  .lp-trust-grid--img .lp-pillars{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .lp-hero-h1,.lp-hero-sub{max-width:none}
  .lp-problem-close{max-width:none}
}
@media (max-width:768px){
  :root{--shell:min(1200px, 100% - 2rem)}
  .lp-burger{display:block;position:relative;z-index:95}
  .lp-hdr-cta{display:none}
  .lp-nav{
    position:fixed;inset:0 0 auto 0;
    flex-direction:column;
    background:var(--linen);
    padding:5rem 1.5rem 1.4rem;
    max-height:100svh;overflow-y:auto;
    transform:translateY(-102%);transition:transform .5s var(--ease-out);
    box-shadow:0 30px 60px -30px rgba(46,51,56,.5);margin-left:0;
  }
  .lp-nav.open{transform:translateY(0)}
  .lp-nav-list{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .lp-nav-list a{padding:.7rem .2rem;font-size:1.05rem;border-radius:0}
  .lp-nav-list>li>a::after{display:none}
  .lp-nav-tel{display:block;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid rgba(46,51,56,.14)}
  .lp-nav-tel a{font-family:var(--f-display);font-size:1.2rem;color:var(--harbor-deep)}
  .lp-nav-cta{display:block;margin-top:1rem}
  .lp-nav-cta .btn{width:100%;justify-content:center}

  .lp-split,.lp-split--img-left{grid-template-columns:1fr;gap:1.7rem}
  .lp-split--img-left .lp-split-img,.lp-split--img-right .lp-split-img{order:0;min-height:0;aspect-ratio:4/3}
  .lp-steps{grid-template-columns:1fr}
  .lp-pillars,.lp-trust-grid--img .lp-pillars{grid-template-columns:1fr}
  .lp-band-in{flex-direction:column;text-align:center}
  .lp-band-h{flex-basis:auto}
}
@media (max-width:480px){
  .lp-ftr-in{flex-direction:column;align-items:flex-start}
  .lp-badges-row{gap:.8rem 1.4rem;justify-content:center}
}

/* ============================================================
   TOUCH A11Y — ≥14px text, ≥44px tap targets, no fixed bg
   ============================================================ */
@media (hover:none) and (pointer:coarse){
  .lp-nav-list a,.lp-hdr-tel,.lp-hero-phone,.lp-ftr-contact a{min-height:44px;display:inline-flex;align-items:center}
  .lp-hero-phone{flex-direction:column;align-items:flex-start;justify-content:center;padding-block:.3rem}
  a[href^="tel:"],a[href^="mailto:"]{min-height:44px}
  .lp-faq-q{min-height:44px}

  .lp-badge,.lp-hero-meta li,.lp-benefit-text,.lp-pillar p,.lp-step p,
  .lp-form-trust li,.lp-form-sub{font-size:.95rem !important}
  .lp-form-disclaimer,.lp-ftr-base,.lp-hero-phone-lbl{font-size:.88rem !important}
  .lp-eyebrow{font-size:.82rem !important}

  /* WPForms accessible floors (beats the 604-rule modern theme cascade) */
  .wpforms-form .wpforms-field-label,
  .wpforms-container .wpforms-field-label.wpforms-field-label{font-size:14px !important;line-height:1.4 !important}
  .wpforms-form .wpforms-submit,
  button[type="submit"].wpforms-submit{min-height:44px !important;padding-top:12px !important;padding-bottom:12px !important}
}

/* ── About the therapist — sits inside Why Trust Me; the headshot belongs here,
   not in the hero. Mirrors the main site's bio card treatment. ── */
.lp-about{margin-top:clamp(2.4rem,4vw,3.4rem);display:grid;
  grid-template-columns:minmax(0,.38fr) minmax(0,1fr);gap:clamp(1.4rem,3vw,2.6rem);
  align-items:start;background:var(--paper);border-radius:18px;
  padding:clamp(1.4rem,2.6vw,2.2rem);
  box-shadow:0 2px 0 rgba(46,51,56,.04),0 26px 54px -40px rgba(46,51,56,.45)}
.lp-about-photo picture,.lp-about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;
  object-position:50% 22%;border-radius:14px;display:block}
.lp-about-h{margin:0;font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.24rem,1.05rem + .8vw,1.62rem);line-height:1.2;color:var(--ink);
  padding-bottom:.55rem;border-bottom:2px solid rgba(201,183,159,.75)}
.lp-about-cred{margin:.7rem 0 0;font-size:.9rem;line-height:1.5;color:var(--ink-soft)}
.lp-about-bio{margin-top:1rem}
.lp-about-bio p{margin:0 0 1em;color:var(--ink-soft);line-height:1.8}
.lp-about-bio p:last-child{margin-bottom:0}
@media (max-width:820px){
  .lp-about{grid-template-columns:1fr}
  .lp-about-photo{max-width:280px;margin-inline:auto}
}
@media (hover:none) and (pointer:coarse){ .lp-about-cred{font-size:.92rem} }

/* ============================================================
   OUTCOMES — "what life looks like coming back"
   Its own section rather than a run-on paragraph under the phases.
   Asymmetric: statement column left, the list of returns right.
   ============================================================ */
.lp-outcomes{border-top:2px solid var(--clay-light)}
.lp-outcomes-in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.4rem);align-items:start}
.lp-outcomes-head h2{max-width:16ch;margin:0}
.lp-page .lp-outcomes-lead{margin:1.7rem 0 0;color:var(--ink-soft);
  font-size:clamp(1.06rem,1rem + .3vw,1.18rem);line-height:1.72;max-width:34ch}
.lp-page .lp-outcomes-close{margin:1.5rem 0 0;padding-top:1.3rem;
  border-top:1px solid rgba(201,183,159,.55);
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.14rem,1rem + .6vw,1.42rem);line-height:1.42;
  color:var(--harbor-deep)}
.lp-outcomes-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.lp-outcomes-list li{position:relative;padding:1.05rem 0 1.05rem 2.5rem;
  border-bottom:1px solid rgba(46,51,56,.09);
  color:var(--ink);font-size:clamp(1.02rem,.98rem + .25vw,1.12rem);line-height:1.6}
.lp-outcomes-list li:first-child{padding-top:0}
.lp-outcomes-list li:last-child{border-bottom:0;padding-bottom:0}
.lp-outcomes-list li::before{
  content:"";position:absolute;left:0;top:1.35rem;width:1.35rem;height:1.35rem;
  border-radius:50%;background:var(--clay-light);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.lp-outcomes-list li:first-child::before{top:.3rem}
@media (max-width:860px){
  .lp-outcomes-in{grid-template-columns:1fr}
}

/* ============================================================
   FORM COPY COLUMN — intro, "what happens next", reassurance
   ============================================================ */
.lp-form-intro{margin-top:1.1rem}
.lp-form-intro p{margin:0 0 1em;color:rgba(237,234,227,.86);line-height:1.75;max-width:46ch}
.lp-form-intro p:last-child{margin-bottom:0}
.lp-form-next{margin-top:2.1rem;padding-top:1.7rem;border-top:1px solid rgba(201,183,159,.45)}
.lp-form-next h3{margin:0 0 1.1rem;color:#FBFDFD;
  font-size:clamp(1.18rem,1.05rem + .5vw,1.42rem)}
.lp-form-steps{list-style:none;counter-reset:lpfs;margin:0;padding:0;display:grid;gap:.95rem}
.lp-form-steps li{counter-increment:lpfs;position:relative;padding-left:2.6rem;
  color:rgba(237,234,227,.88);line-height:1.62;max-width:44ch}
.lp-form-steps li::before{
  content:counter(lpfs);position:absolute;left:0;top:-.1rem;
  width:1.75rem;height:1.75rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--clay-light);color:#33270A;
  font-family:var(--f-display);font-weight:600;font-size:.95rem;line-height:1}
/* Full width beneath both columns, split two-up. */
.lp-form-trust{list-style:none;margin:clamp(2.4rem,4vw,3.4rem) 0 0;padding:clamp(2rem,3.4vw,2.6rem) 0 0;
  border-top:1px solid rgba(201,183,159,.45);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem clamp(2rem,5vw,4.5rem)}
@media (max-width:760px){.lp-form-trust{grid-template-columns:1fr}}
.lp-form-trust li>span{display:block}
.lp-form-trust strong{display:block;margin-bottom:.35rem}
.lp-form-trust .lp-form-trust-line{display:block;line-height:1.55}
.lp-form-trust .lp-form-trust-line + .lp-form-trust-line{margin-top:.25rem}

/* .lp-hero is a flex container — the wave MUST be taken out of flow or it
   becomes a flex sibling and steals width from the content column. */
.lp-edge{position:absolute;left:0;right:0;bottom:-1px;z-index:3;
  display:block;width:100%;height:clamp(26px,3.4vw,50px);pointer-events:none}
/* .lp-page h1 (0,1,1) outranks .lp-hero-h1 (0,1,0) — the hero sits on a
   photograph and must stay light. */
.lp-page .lp-hero-h1{color:#FFFDF8}
.lp-page .lp-hero-sub{color:#F3EEE6}
.lp-page .lp-hero-eyebrow{color:var(--clay-light)}
/* phone link sits on the photo — .lp-page a would otherwise darken it.
   Icon keeps the 30:24 viewBox aspect so the glyphs aren't squashed. */
.lp-page .lp-hero-phone{color:#FFFDF8}
.lp-page .lp-hero-phone:hover{color:var(--clay-light)}
.lp-hero-phone .ic-call{width:31px;height:21px;fill:var(--clay-light)}

/* ── Header: transparent over the hero photo, solid on scroll — same behaviour
   as the homepage. The scrim uses z-index:0 (never -1: a negative pseudo is
   fragile inside a stacking context and renders invisibly), with the header
   content lifted above it. ── */
.lp-hdr{background:rgba(243,238,230,0);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.lp-hdr::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom, rgba(26,44,50,.58) 0%, rgba(26,44,50,.34) 58%, rgba(26,44,50,0) 100%);
  opacity:1;transition:opacity .45s var(--ease);
}
.lp-hdr.solid::before{opacity:0}
.lp-hdr-in{position:relative;z-index:1}
.lp-hdr.solid{
  background:rgba(243,238,230,.96);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);
}
/* knocked-out state over the photograph */
.lp-hdr:not(.solid) .lp-brand{--lh-word:#F3EEE6;--lh-hope:#F3EEE6;--lh-tag:#F3EEE6;--lh-rule:#C9B79F}
.lp-page .lp-hdr:not(.solid) .lp-nav-list>li>a{color:#fff}
.lp-page .lp-hdr:not(.solid) .lp-nav-list>li>a:hover{color:#fff}
.lp-hdr:not(.solid) .lp-hdr-tel{color:#fff;border-color:rgba(255,255,255,.45)}
.lp-hdr:not(.solid) .lp-hdr-tel svg{stroke:var(--clay-light)}
.lp-hdr:not(.solid) .lp-hdr-tel:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.16)}
.lp-hdr:not(.solid) .lp-hdr-tel:hover svg{stroke:#fff}
.lp-hdr:not(.solid) .lp-burger span{background:#fff}
/* the hero already starts under the fixed header, so no offset change needed */


/* ========== TOUCH A11Y — gaps found in the final audit sweep ==========
   All of these clear the 14px text / 44x44 target floors on touch devices
   only; desktop sizing is untouched. */
@media (hover: none) and (pointer: coarse){
  /* drawer CTA rendered 13.7px */
  .lp-nav .btn{font-size:14px !important}
  /* "FAQ" is short enough to render 40px wide */
  .lp-nav-list>li>a{min-width:44px}
  /* burger was 44x37 */
  .lp-burger{min-height:44px;display:inline-flex;flex-direction:column;justify-content:center}
  /* footer phone / email / legal links were 21-24px tall */
  .lp-ftr-contact a,.lp-ftr-legal a{min-height:44px;display:inline-flex;align-items:center;font-size:14px !important}
  /* Phone link inside a sentence: it is display:inline, so min-height is
     inert. Vertical padding grows the hit rect without breaking the line. */
  .lp-form-steps a{padding-block:.75rem}
}

/* Brand lockup — the wordmark art with the harbor field knocked out, so it
   reads on the photo hero as well as on the dark footer. */
.lp-brand{display:inline-flex;align-items:center;text-decoration:none}
.lp-brand img{display:block;height:34px;width:auto;max-width:none}
.lp-ftr-brand img.lh-ftr{display:block;height:30px;width:auto;max-width:none}
@media (max-width:768px){
  .lp-brand img{height:26px}
  .lp-ftr-brand img.lh-ftr{height:24px}
}

@media (hover:none) and (pointer:coarse){
  /* the wordmark is a link home — it has to clear the 44px floor too */
  .lp-brand{min-height:44px;align-items:center}
}