/* ============================================================
   Living Hope Christian Therapy — Diane Ussery, LCSW
   LANDING PAGE — self-contained "Still Waters" brand
   Faustina (display) + Mulish (body). Loaded ONLY on
   page-landing.php (client.css does not load there).
   ============================================================ */

:root{
  --sky:#4A7A96;
  --sky-deep:#3A6178;
  --creek:#6B9E8A;
  --creek-deep:#3D7261;
  --buttercup:#E2B330;
  --linen:#F7F4EF;
  --linen-warm:#F1ECE3;
  --linen-deep:#E8E1D5;
  --slate:#1E2A30;
  --sky-mist:#EAF0F3;
  --creek-mist:#E8F0EA;
  --paper:#FFFDFA;
  --ink:#1E2A30;
  --ink-soft:#42545D;
  --ink-faint:#5D6D75;

  --f-display:"Faustina",Georgia,serif;
  --f-body:"Mulish",-apple-system,"Segoe UI",sans-serif;

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

  --step-h1:clamp(2.5rem, 1.5rem + 4.0vw, 4.4rem);
  --step-h2:clamp(1.95rem, 1.25rem + 2.5vw, 3.05rem);
  --step-h3:clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
  --step-body:clamp(1.02rem, 0.98rem + 0.22vw, 1.135rem);

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

*,*::before,*::after{box-sizing:border-box}
/* Every styled link class below (.lp-hdr-tel, .lp-hero-phone, .lp-nav-list a,
   etc.) redeclares text-decoration:none itself, so this base reset was never
   missed there — but the plain, unstyled tel: link in the "what happens
   next" form-steps list (no class of its own) fell through to the browser's
   native underline with nothing here to catch it. */
a{color:inherit;text-decoration:none}
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:500;
  line-height:1.1;
  letter-spacing:-.012em;
  text-wrap:balance;
  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(--buttercup);color:var(--slate)}

.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(--sky-deep);
}
.lp-eyebrow--light{color:var(--buttercup)}
/* 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(226,179,48,.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);
  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-gold{background:var(--buttercup);color:#33270A;box-shadow:0 2px 0 rgba(30,42,48,.10)}
.lp-page .btn-gold:hover{background:#F0C246;box-shadow:0 6px 22px -8px rgba(226,179,48,.85)}

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

/* ---------- 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-skymist{background:var(--sky-mist)}
.bg-creekmist{background:var(--creek-mist)}
.bg-slate{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(--sky-deep)}
.lp-sec-intro{margin-top:1rem;color:var(--ink-soft)}
.bg-slate .lp-sec-intro{color:rgba(237,242,244,.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(247,244,239,.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(247,244,239,.96);
  box-shadow:0 1px 0 rgba(30,42,48,.07),0 12px 34px -28px rgba(30,42,48,.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(--buttercup);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(--sky-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(30,42,48,.22);border-radius:var(--stone);
  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(--sky);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(--sky-deep);border-color:var(--sky);background:rgba(74,122,150,.07)}
.lp-hdr-tel:hover svg{stroke:var(--sky-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}
.lp-hero-scrim{position:absolute;inset:0;
  background:
    radial-gradient(115% 125% at 17% 84%, rgba(14,22,28,.74) 0%, rgba(16,26,32,.42) 32%, rgba(20,32,40,.12) 54%, rgba(20,32,40,0) 72%),
    linear-gradient(to top, rgba(16,26,32,.24) 0%, rgba(18,28,34,.06) 26%, rgba(20,32,40,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:#FFE9A8;text-shadow:0 1px 12px rgba(10,18,24,.6)}
.lp-hero-h1{max-width:15ch;color:#FFFDF8;text-shadow:0 2px 34px rgba(10,18,24,.45)}
.lp-hero-sub{margin:clamp(1.2rem,2vw,1.9rem) 0 0;max-width:34ch;
  font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem);line-height:1.3;color:#FFE9A8;
  text-shadow:0 2px 22px rgba(10,18,24,.5)}
.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(10,18,24,.5);
  transition:color .3s var(--ease)}
.lp-hero-phone .ic-callchat{width:31px;height:21px;fill:var(--buttercup);flex:0 0 auto}
.lp-hero-phone:hover{color:var(--buttercup)}
.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(255,253,248,.9);text-shadow:0 1px 10px rgba(10,18,24,.5)}
.lp-hero-meta .lp-dot{width:6px;height:6px;border-radius:50%;background:var(--buttercup);flex:0 0 auto}

.lp-badges{background:var(--linen);padding:1.4rem 0;border-bottom:1px solid rgba(226,179,48,.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-badges--pair .lp-badges-row{justify-content:center;gap:1rem 4.5rem}
.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(--creek-deep);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(30,42,48,.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(--sky);box-shadow:0 0 0 4px rgba(74,122,150,.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(226,179,48,.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(--sky-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(--sky-deep) 0%,var(--sky) 52%,#5C8CA6 100%);
  border-top:2px solid var(--buttercup);
  border-bottom:2px solid var(--buttercup)}
.lp-band--2{background:linear-gradient(105deg,#2F5266 0%,var(--sky-deep) 58%,var(--sky) 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(--buttercup)}
.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(--creek-mist);margin-top:.1rem}
.lp-benefit-tick svg{width:15px;height:15px;stroke:var(--creek-deep);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(--buttercup)}
.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(30,42,48,.06);overflow:hidden;
  box-shadow:0 2px 0 rgba(30,42,48,.04),0 22px 48px -36px rgba(30,42,48,.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(226,179,48,0) 0%,var(--buttercup) 18%,var(--buttercup) 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(226,179,48,.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(30,42,48,.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(30,42,48,.07);overflow:hidden;
  box-shadow:0 14px 34px -30px rgba(30,42,48,.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(--buttercup)}
.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(--buttercup);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(226,179,48,.85)}
.lp-form-sub{color:rgba(237,242,244,.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,242,244,.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(--buttercup);stroke-width:1.8;fill:none;flex-shrink:0;margin-top:.15rem}

.lp-form-card{
  background:rgba(247,244,239,.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(226,235,238,.78);padding:3.2rem 0 2.4rem;
  border-top:2px solid var(--buttercup)}
/* 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(226,235,238,.68)}
.lp-ftr-legal{display:flex;gap:1.4rem;flex-wrap:wrap}
.lp-ftr-legal a{color:rgba(226,235,238,.72);text-decoration:none;font-size:.88rem;
  transition:color .3s var(--ease)}
.lp-ftr-legal a:hover{color:var(--buttercup)}
.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:#F7F4EF;--lh-hope:#F7F4EF;--lh-tag:#F7F4EF;--lh-rule:#E2B330}
.lp-ftr-contact{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.lp-ftr-contact a{color:rgba(226,235,238,.82);text-decoration:none;font-size:.95rem;transition:color .3s var(--ease)}
.lp-ftr-contact a:hover{color:var(--buttercup)}
.lp-ftr-dot{opacity:.35}
.lp-ftr-base{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(226,179,48,.34);
  font-size:.83rem;color:rgba(226,235,238,.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}
}
/* LANDSCAPE PHONES — 2026-08-13
   An iPhone 13 in landscape is 926px WIDE (428px tall), so it clears this
   768px gate and falls into the 769-1180px block above: desktop nav, crammed,
   in a 428px-tall window. Height plus touch is the only reliable signal —
   max-height:500px excludes iPad Pro 11 landscape (834px tall), which no
   max-width can. This block owns the burger AND its drawer; they must stay on
   one condition or the menu opens into an unstyled list. It sits after the
   769-1180px block, so it wins there on source order. */
@media (max-width:768px), (hover:none) and (pointer:coarse) and (max-height:500px){
  :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(30,42,48,.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(30,42,48,.14)}
  .lp-nav-tel a{font-family:var(--f-display);font-size:1.2rem;color:var(--sky-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,.lp-badges--pair .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 About Diane 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(30,42,48,.04),0 26px 54px -40px rgba(30,42,48,.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(226,179,48,.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}
/* Desktop 2-col: the headshot stretches to the FULL height of the copy beside it —
   image top = copy top, image bottom = copy bottom. The picture is absolutely
   filled so it never contributes to the row height; the copy alone sets it. */
@media (min-width:821px){
  .lp-about{align-items:stretch}
  .lp-about-photo{position:relative;min-height:100%}
  .lp-about-photo picture{position:absolute;inset:0;display:block}
  .lp-about-photo picture,.lp-about-photo img{aspect-ratio:auto;height:100%;
    width:100%;object-fit:cover}
  .lp-about-copy>*:last-child,.lp-about-bio>*: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} }
/* Bio card with no photo (About photo field blank) — copy spans the card. */
.lp-about.lp-about--nophoto{grid-template-columns:1fr}

/* ============================================================
   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(--buttercup)}
.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(226,179,48,.55);
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.14rem,1rem + .6vw,1.42rem);line-height:1.42;
  color:var(--sky-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(30,42,48,.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(--buttercup);
  -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,242,244,.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(226,179,48,.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,242,244,.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(--buttercup);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(226,179,48,.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-wave{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:#FFE9A8}
.lp-page .lp-hero-eyebrow{color:#FFE9A8}
/* 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(--buttercup)}
.lp-hero-phone .ic-callchat{width:31px;height:21px;fill:var(--buttercup)}

/* ── 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(247,244,239,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(14,22,28,.58) 0%, rgba(14,22,28,.34) 58%, rgba(14,22,28,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(247,244,239,.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:#F7F4EF;--lh-hope:#F7F4EF;--lh-tag:#F7F4EF;--lh-rule:#E2B330}
.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(--buttercup)}
.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}
  /* Header CTA rendered 13.68px, and 12.8px in the 769-1180px band. */
  .lp-hdr .btn{font-size:14px !important}
  /* "FAQ" is short enough to render 40px wide */
  .lp-nav-list>li>a{min-width:44px}
  /* burger was 44x37. Height only here — the `display` half is scoped to
     max-width:768px below, because setting display in this unscoped touch
     block re-shows the burger on iPad Pro 11 landscape (1194px, touch)
     alongside the full nav. */
  .lp-burger{min-height:44px}
  /* 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}
}

/* Burger bar centring — scoped to the breakpoint where the burger is shown.
   See the note on .lp-burger in the touch block above. */
@media (hover:none) and (pointer:coarse) and (max-width:768px){
  .lp-burger{display:inline-flex;flex-direction:column;justify-content:center}
}

/* ==================================================================
   LP MOBILE PORTRAIT PASS — 2026-08-04
   ================================================================== */
@media (max-width:768px), (hover:none) and (pointer:coarse) and (max-height:500px){

  /* (1) Drawer was unreadable: at the top of the page the header is not
     .solid, and `.lp-page .lp-hdr:not(.solid) .lp-nav-list>li>a{color:#fff}`
     (0,4,1) painted the links white on the linen drawer panel. The burger
     bars and the wordmark had the same problem. html.lp-nav-lock is set by
     the drawer JS, so it is the correct hook — and it only applies while the
     drawer is actually open, leaving the over-hero header untouched. */
  html.lp-nav-lock .lp-page .lp-hdr:not(.solid) .lp-nav-list>li>a,
  html.lp-nav-lock .lp-page .lp-hdr:not(.solid) .lp-nav-list>li>a:hover{
    color:var(--ink);
  }
  html.lp-nav-lock .lp-hdr:not(.solid) .lp-burger span{background:var(--ink)}
  html.lp-nav-lock .lp-hdr:not(.solid) .lp-brand{
    --lh-word:var(--ink);--lh-hope:var(--sky-deep);
    --lh-tag:var(--ink-soft);--lh-rule:var(--buttercup);
  }

  /* (2) Phone becomes a real button in the drawer, matching the CTA below it. */
  .lp-nav-tel{margin-top:1.2rem;padding-top:1.2rem}
  .lp-nav-tel a{
    display:flex;align-items:center;justify-content:center;gap:.55rem;
    width:100%;min-height:48px;padding:1rem 1.6rem;
    border:1.5px solid rgba(30,42,48,.28);border-radius:var(--stone);
    font-family:var(--f-body);font-size:1rem;font-weight:600;
    color:var(--ink);text-decoration:none;
  }

  /* (3) Hero eyebrow was .92rem — too quiet for the first line on the page. */
  .lp-page .lp-hero-eyebrow{font-size:1.12rem;margin-bottom:1.15rem}

  /* (4) H1 sat almost on top of the italic subhead. Note the selector must be
     `.lp-page .lp-hero-sub` (0,2,1): both are <p>, and `.lp-page p{margin:0 0
     1.15em}` (0,1,1) outranks a bare .lp-hero-sub (0,1,0). That is why the
     ORIGINAL `.lp-hero-sub{margin:clamp(1.2rem,2vw,1.9rem) 0 0}` never
     applied either — the gap was 0 all along, not just too small. */
  .lp-page .lp-hero-sub{margin-top:1.85rem}

  /* (5) Phone becomes a button directly under the CTA, same size, stacked. */
  .lp-hero-act{flex-direction:column;align-items:stretch;gap:.85rem}
  .lp-hero-act .btn{width:100%;justify-content:center}
  .lp-hero-phone{
    flex-direction:row;align-items:center;justify-content:center;
    width:100%;min-height:48px;padding:1rem 1.9rem;
    border:1.5px solid rgba(255,253,248,.5);border-radius:var(--stone);
    background:rgba(255,253,248,.12);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    font-size:.99rem;font-weight:600;
  }

  /* (6) Trust row centred under the stacked buttons. */
  .lp-hero-meta{justify-content:center;text-align:center;gap:.55rem 1.3rem}
  .lp-hero-meta li{justify-content:center}

  /* (7) Centre the whole LP footer: logo, fee disclosure, copyright, legal. */
  .lp-ftr-in{flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .lp-ftr-brand{justify-content:center}
  .lp-ftr-compliance{text-align:center}
  .lp-ftr-base{
    flex-direction:column;align-items:center;justify-content:center;
    text-align:center;gap:.9rem;
  }
  .lp-ftr-legal{justify-content:center;width:100%}
}

/* ==================================================================
   MOBILE LANDSCAPE — safe area, 2026-08-13
   viewport-fit=cover (page-landing.php) lets full-bleed art reach the
   physical screen edges, which is what removes the white stripes beside the
   notch. The content column must then inset itself, or copy slides under the
   notch on whichever side the phone is rotated to.
   ================================================================== */
@media (hover:none) and (pointer:coarse) and (max-height:500px){
  .lp-shell,.shell,.lp-hdr-in,.lp-ftr-in{
    padding-left:env(safe-area-inset-left,0px);
    padding-right:env(safe-area-inset-right,0px);
  }
}

/* ==================================================================
   HEADSHOT HERO — page-landing-headshot.php only (2026-11-10).
   Copy left, Diane's portrait right in an arch frame, both over the
   scenic photo. Scoped to .lp-hero--hs so page-landing.php is untouched.
   ================================================================== */
.lp-hero--hs{min-height:clamp(600px,86svh,880px)}
.lp-hero--hs .lp-hero-scrim{background:
    linear-gradient(90deg, rgba(14,22,28,.72) 0%, rgba(16,26,32,.5) 42%, rgba(20,32,40,.22) 70%, rgba(20,32,40,.12) 100%),
    linear-gradient(to top, rgba(16,26,32,.3) 0%, rgba(18,28,34,0) 40%)}
.lp-hs-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;width:var(--shell)}
.lp-hs-copy{order:1;min-width:0}
.lp-hs-photo{order:2;display:flex;justify-content:center}
.lp-hs-frame{position:relative;width:min(100%,400px);aspect-ratio:4/5;
  border-radius:200px 200px 22px 22px;overflow:hidden;
  border:6px solid rgba(255,253,248,.92);
  box-shadow:0 30px 70px -24px rgba(8,14,18,.65),0 0 0 1px rgba(226,179,48,.55)}
.lp-hs-frame::after{content:"";position:absolute;inset:10px;border-radius:190px 190px 14px 14px;
  border:1px solid rgba(255,233,168,.55);pointer-events:none}
.lp-hs-frame picture,.lp-hs-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.lp-page .lp-hero-intro{margin:1.1rem 0 0;max-width:40ch;color:#FFFDF8;font-size:clamp(1.05rem,1rem + .3vw,1.2rem);
  line-height:1.6;text-shadow:0 1px 14px rgba(10,18,24,.55)}
.lp-page .lp-outcomes-lead + .lp-outcomes-lead{margin-top:1rem}
.lp-hs-cta{margin-top:clamp(2.2rem,3.5vw,3rem);text-align:center}
/* Column band: flex-basis 460px would become 460px of HEIGHT. */
.page-template-page-landing-headshot .lp-band--2 .lp-band-h{flex:0 0 auto;max-width:24ch}
/* Quoted thoughts read as quotes: italic display face, a step up in size. */
.page-template-page-landing-headshot .lp-symptoms li{font-family:var(--f-display);font-style:italic;
  font-size:clamp(1.12rem,1.02rem + .45vw,1.32rem);color:var(--ink)}

@media (min-width:769px) and (max-width:1024px){
  .lp-hs-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:2rem}
  .lp-hs-frame{width:min(100%,320px)}
}
@media (max-width:768px), (hover:none) and (pointer:coarse) and (max-height:500px){
  .lp-hero--hs .lp-hero-scrim{background:rgba(14,22,28,.55)}
}
@media (max-width:768px){
  .lp-hs-grid{grid-template-columns:1fr;gap:1.6rem}
  .lp-hs-photo{order:0}
  .lp-hs-frame{width:min(68vw,260px);border-width:5px}
  .lp-hero--hs .lp-hero-in{padding-top:6rem}
  .lp-hs-photo{justify-content:center}
  .lp-page .lp-hero-intro{max-width:none}
  .lp-hs-cta .btn{width:100%;justify-content:center}
}
/* Landscape phone: keep it side by side, smaller portrait, so the copy
   isn't pushed below a 428px-tall window. */
@media (hover:none) and (pointer:coarse) and (max-height:500px) and (min-width:600px){
  .lp-hs-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,.7fr)}
  .lp-hs-grid{align-items:start}
  .lp-hs-photo{order:2;padding-top:.4rem}
  .lp-hs-frame{width:min(100%,220px)}
}