/* ============================================================
   Willow Tree Mental Health — landing page.
   The LP loads the site's own client.css, so it inherits the real
   design system by construction: the four grounds, the petrol pill,
   the leaf watermark, the offset circle, the arch portrait, the
   hand-drawn icons. This file only carries the LP-only pieces.
   ============================================================ */

body.landing-page{background:var(--white)}
.lp-wrap{overflow-x:clip}

/* ---------- header: funnel discipline, no site nav ---------- */
.lp-header{
  position:sticky;top:0;z-index:90;background:var(--ground-warm);
  border-bottom:1px solid rgba(1,57,65,.09);
}
/* Same widening as the main site header, and the nav centres itself in the
   space between the lockup and the CTA (auto margins on both sides of a flex
   item split the free space evenly). */
.lp-header .container{max-width:1460px;padding-inline:clamp(24px,4vw,64px)}
.lp-header-inner{display:flex;align-items:center;gap:24px;min-height:84px;padding-block:10px}
.lp-brand{flex:0 1 auto;min-width:0;line-height:0}
.lp-brand img{width:260px;height:auto}
.lp-nav{margin-left:auto;margin-right:auto;display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.lp-nav a{font-size:15.5px;font-weight:600;color:var(--petrol);text-decoration:none;white-space:nowrap;position:relative;padding:6px 0}
.lp-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--petrol);transition:right .28s cubic-bezier(.22,.61,.36,1)}
.lp-nav a:hover::after,.lp-nav a:focus-visible::after{right:0}
.lp-head-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.lp-head-phone{font-weight:700;font-size:16px;color:var(--petrol);text-decoration:none;white-space:nowrap}

/* ---------- hero: photo ground, opaque plate carries the copy ----------
   Text on a photograph gets a PLATE, never a scrim — the canopy runs bright
   and the card does the legibility work. */
.lp-hero{position:relative;isolation:isolate;padding:64px 0 72px;background:var(--ground-warm);overflow:hidden}
.lp-hero-bg{position:absolute;inset:0;z-index:-1}
.lp-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.lp-hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:48px;align-items:center}
.lp-plate{
  background:rgba(255,255,255,.955);border-radius:var(--radius-card);
  padding:40px 44px 42px;box-shadow:0 22px 54px rgba(1,57,65,.22);
  border:1px solid rgba(1,57,65,.08);
}
.lp-eyebrow{font-family:var(--font-body);font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-green);margin:0 0 14px}
.lp-hero h1{font-size:clamp(33px,4vw,50px);letter-spacing:-.022em;margin:0 0 .34em}
.lp-hero-sub{font-size:20px;font-weight:500;color:var(--ink);margin:0 0 .5em}
.lp-hero-geo{font-size:16.5px;color:var(--ink-mute);margin:0 0 1.4em}
.lp-cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.lp-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin:22px 0 0;padding:0;list-style:none}
.lp-meta li{position:relative;padding-left:20px;font-size:15.5px;color:var(--ink-mute)}
.lp-meta li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;border-radius:50%;background:var(--sand)}
.lp-hero-figure{position:relative;isolation:isolate;margin:0}
.lp-hero-figure img{position:relative;z-index:1;width:100%;height:auto;border-radius:var(--radius-photo);box-shadow:0 20px 46px rgba(1,57,65,.28)}
.lp-hero-figure .offset-circle{width:56%;padding-bottom:56%;background:var(--sand);right:-34px;bottom:-30px}

/* ---------- trust badges strip ---------- */
.lp-badges{background:var(--white);border-bottom:1px solid var(--hairline)}
.lp-badges ul{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;list-style:none;margin:0;padding:20px 0}
.lp-badges li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--ink-mute)}
.lp-badges .dot{width:8px;height:8px;border-radius:50%;background:var(--sage);flex:0 0 auto}

/* ---------- section rhythm reuses the four grounds ---------- */
.lp-sec{padding:60px 0;position:relative;overflow:hidden;isolation:isolate}
.lp-sec--cool{background:var(--ground-cool)}
.lp-sec--sand{background:var(--sand)}
.lp-sec--warm{background:var(--ground-warm)}
.lp-sec--teal{background:var(--teal)}
.lp-sec--deep{background:var(--petrol);color:var(--ink-onDark)}
.lp-sec--deep h2,.lp-sec--deep h3{color:var(--ground-warm)}
.lp-sec--sand p{color:#3A3222}
.lp-sec h2{font-size:clamp(28px,3.1vw,39px);margin:0 0 .5em}
.lp-lead{font-size:18.5px;max-width:62ch}
.lp-split{display:grid;grid-template-columns:1.04fr .96fr;gap:48px;align-items:center}
.lp-split--rev .lp-split-copy{order:2}
.lp-split--rev .lp-split-fig{order:1}
.lp-split-fig{position:relative;isolation:isolate;margin:0}
.lp-split-fig img{position:relative;z-index:1;width:100%;height:auto;border-radius:var(--radius-photo);box-shadow:0 16px 40px rgba(1,57,65,.15)}
.lp-split-fig .offset-circle{width:52%;padding-bottom:52%;background:var(--teal);left:-34px;bottom:-28px}
.lp-split--rev .lp-split-fig .offset-circle{left:auto;right:-34px;background:var(--sand)}

.lp-symptoms{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.lp-symptoms li{position:relative;padding-left:30px;font-size:17px;line-height:1.6}
.lp-symptoms li::before{
  content:"";position:absolute;left:0;top:.34em;width:19px;height:19px;border-radius:50%;
  background:var(--sand);
}
.lp-symptoms li::after{
  content:"";position:absolute;left:6.5px;top:.62em;width:5px;height:9px;
  border-right:2px solid var(--petrol);border-bottom:2px solid var(--petrol);
  transform:rotate(42deg);
}
.lp-quote{
  margin:26px 0 0;padding:20px 24px;border-radius:var(--radius-card);
  background:var(--white);box-shadow:var(--shadow-card);
  font-family:var(--font-display);font-size:19px;line-height:1.45;color:var(--petrol);
}
.lp-sec--cool .lp-quote{background:var(--white)}

/* ---------- mid CTA band ---------- */
.lp-band{background:var(--petrol);color:var(--ink-onDark);padding:44px 0;text-align:center;position:relative;overflow:hidden;isolation:isolate}
.lp-band h2{color:var(--ground-warm);margin:0 0 20px;font-size:clamp(24px,2.7vw,33px)}
.lp-band .btn{background:var(--sand);border-color:var(--sand);color:var(--petrol)}
.lp-band .btn:hover,.lp-band .btn:focus-visible{background:var(--white);border-color:var(--white);color:var(--petrol)}
.lp-band .watermark{opacity:.14}

/* ---------- benefits + pillars ---------- */
.lp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.lp-card{background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius-card);padding:26px 28px;box-shadow:var(--shadow-card)}
.lp-card h3{font-size:19px;margin:0 0 .5em;color:var(--petrol)}
.lp-card p{margin:0;font-size:16.5px;color:var(--ink)}
.lp-card .panel-icon{width:42px;height:42px;margin-bottom:14px}

/* ---------- process: 3 numbered steps ---------- */
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
.lp-reveal .lp-step{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * .13s);
}
.lp-reveal.is-in .lp-step{opacity:1;transform:none}
@keyframes lpStepPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .lp-reveal .lp-step{opacity:1;transform:none;transition:none}
}
.lp-step{background:var(--white);border-radius:var(--radius-card);padding:30px 28px 28px;box-shadow:var(--shadow-card);position:relative;overflow:hidden}

/* Phase progression — the same device the recent landing pages use. A petrol
   line draws across the bottom of step 1, holds, clears; then step 2, then
   step 3, then the cycle repeats. It reads as a path being walked rather than
   three static cards, and unlike a one-shot entrance reveal it is still
   running whenever the visitor's eye arrives. One 10.5s cycle shared by all
   three, offset 3.5s apart. The disc warms while its own step is active. */
@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 held, filled */
  32.4% {transform:scaleX(1);opacity:0}
  32.41%,
  100%  {transform:scaleX(0);opacity:0}
}
@keyframes lpStepGlow{
  0%,4%   {background:var(--teal);transform:none}
  10%,29% {background:var(--sand);transform:translateY(-2px)}
  36%,100%{background:var(--teal);transform:none}
}
.lp-step::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,rgba(1,57,65,0) 0%,var(--accent-green) 16%,var(--petrol) 100%);
  transform-origin:left center;transform:scaleX(0);opacity:0;
  animation:lpStepSweep 10.5s cubic-bezier(.22,.61,.36,1) infinite;
}
.lp-step .lp-step-n{animation:lpStepGlow 10.5s ease-in-out infinite;transition:none}
.lp-steps .lp-step:nth-child(1)::after,
.lp-steps .lp-step:nth-child(1) .lp-step-n{animation-delay:0s}
.lp-steps .lp-step:nth-child(2)::after,
.lp-steps .lp-step:nth-child(2) .lp-step-n{animation-delay:3.5s}
.lp-steps .lp-step:nth-child(3)::after,
.lp-steps .lp-step:nth-child(3) .lp-step-n{animation-delay:7s}
@media (prefers-reduced-motion:reduce){
  .lp-step::after{animation:none;transform:scaleX(1);opacity:.45}
  .lp-step .lp-step-n{animation:none}
}
.lp-step-n{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--teal);color:var(--petrol);font-family:var(--font-display);font-size:21px;font-weight:600;margin-bottom:16px;
}
.lp-step h3{font-size:19px;margin:0 0 .5em}
.lp-step p{margin:0;font-size:16.5px}

/* ---------- about / signature ---------- */
.lp-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,4vw,56px);align-items:start}
.lp-about-fig{position:relative;isolation:isolate;margin:0}
.lp-about-fig img{
  position:relative;z-index:1;width:100%;height:auto;display:block;
  border-radius:50% 50% var(--radius-card) var(--radius-card) / 42% 42% var(--radius-card) var(--radius-card);
  box-shadow:0 18px 40px rgba(1,57,65,.18);
}
.lp-about-fig .offset-circle{width:62%;padding-bottom:62%;background:var(--teal);left:-30px;bottom:-24px}
.lp-signature{font-family:var(--font-display);font-size:22px;color:var(--accent-green);margin:18px 0 0}
.lp-creds{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.lp-creds li{position:relative;padding-left:22px;font-size:16px;color:var(--ink-mute)}
.lp-creds li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:2px;background:var(--sand)}

/* ---------- testimonials ---------- */
.lp-quotes{columns:2;column-gap:24px;margin-top:30px}
.lp-quote-card{break-inside:avoid;margin:0 0 24px;background:var(--white);border:1px solid #E6EDEF;border-radius:var(--radius-card);padding:24px 26px 20px;box-shadow:var(--shadow-card)}
.lp-quote-card blockquote{margin:0;font-size:16.5px;line-height:1.7}
.lp-quote-card figcaption{margin-top:12px;font-family:var(--font-display);font-size:15px;color:var(--accent-green);font-weight:500}
.lp-quote-card figcaption::before{content:"— "}

/* ---------- FAQ ---------- */
.lp-faqs{max-width:840px;margin:30px auto 0}
.lp-faq{border-top:1px solid var(--hairline)}
.lp-faq:last-child{border-bottom:1px solid var(--hairline)}
.lp-faq-q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  background:none;border:0;cursor:pointer;text-align:left;padding:22px 4px;
  font-family:var(--font-display);font-size:1.2rem;font-weight:500;line-height:1.32;color:var(--petrol);
}
.lp-faq-mark{flex:0 0 auto;width:30px;height:30px;margin-top:2px;border-radius:50%;background:var(--ground-warm);display:grid;place-items:center;transition:background .3s ease}
.lp-faq-mark::before{content:"";width:8px;height:8px;border-right:1.8px solid var(--petrol);border-bottom:1.8px solid var(--petrol);transform:translateY(-2px) rotate(45deg);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.lp-faq-q[aria-expanded="true"] .lp-faq-mark{background:var(--sand)}
.lp-faq-q[aria-expanded="true"] .lp-faq-mark::before{transform:translateY(1px) rotate(225deg)}
.lp-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.22,1,.36,1)}
.lp-faq-q[aria-expanded="true"] + .lp-faq-a{grid-template-rows:1fr}
.lp-faq-a > div{overflow:hidden;min-height:0}
.lp-faq-a p{padding:0 4px 24px;margin:0;font-size:1.04rem;line-height:1.75;max-width:62ch}

/* ---------- what happens next ---------- */
.lp-next{display:grid;gap:16px;margin-top:26px;padding:0;list-style:none;counter-reset:lpnext}
.lp-next li{position:relative;padding-left:46px;font-size:17px;line-height:1.65}
.lp-next li::before{
  counter-increment:lpnext;content:counter(lpnext);
  position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;
  background:var(--sand);color:var(--petrol);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:600;font-size:16px;
}

/* ---------- form ---------- */
.lp-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.lp-form-card{background:var(--white);border:2px solid var(--sand);border-radius:var(--radius-card);padding:30px 32px 32px;box-shadow:0 14px 34px rgba(1,57,65,.09)}
.lp-form-card h2{margin-top:0}
/* its own row beneath the copy and the form */
.lp-trustline{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3.4vw,52px);
  margin-top:clamp(36px,4vw,54px);padding-top:clamp(28px,3.2vw,40px);
  border-top:1px solid rgba(1,57,65,.16);
}
.lp-trustline div{font-size:15.5px;color:#12454C}
.lp-trustline strong{display:block;font-family:var(--font-display);color:var(--petrol);font-size:17px;font-weight:500;margin-bottom:6px}
.lp-trustline p{margin:0;line-height:1.65}
.lp-trustline a{color:var(--petrol);text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){.lp-trustline{grid-template-columns:1fr;gap:22px}}

/* ---------- footer ---------- */
.lp-footer{background:var(--white);border-top:1px solid var(--hairline);padding:34px 0 30px;font-size:15px;color:var(--ink-mute)}
.lp-footer-inner{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.lp-footer a{color:var(--petrol);text-decoration:none}
.lp-footer a:hover{text-decoration:underline}
.lp-fee{margin:16px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-mute);max-width:78ch}

/* ================= RESPONSIVE ================= */
@media (max-width:1024px){
  .lp-hero-grid,.lp-split,.lp-about-grid,.lp-form-grid{gap:34px}
  .lp-cards,.lp-steps{grid-template-columns:1fr 1fr}
  .lp-plate{padding:32px 30px 34px}
}
@media (max-width:860px){
  .lp-header-inner{min-height:70px;gap:14px}
  .lp-brand img{width:196px}
  .lp-nav{display:none}
  .lp-hero-grid,.lp-split,.lp-about-grid,.lp-form-grid{grid-template-columns:1fr}
  .lp-split--rev .lp-split-copy,.lp-split--rev .lp-split-fig{order:initial}
  .lp-hero-figure{max-width:460px;margin-inline:auto}
  .lp-about-fig{max-width:340px;margin-inline:auto}
  .lp-cards,.lp-steps{grid-template-columns:1fr}
  .lp-quotes{columns:1}
  .lp-sec{padding:48px 0}
}
@media (max-width:560px){
  /* The brand is a flex item next to the CTA; without a floor it squeezes to
     ~82px and the lockup becomes unreadable. Drop the phone instead. */
  .lp-head-phone{display:none}
  .lp-brand{flex:0 0 auto}
  .lp-brand img{width:172px}
}
@media (max-width:480px){
  .lp-brand img{width:158px}
  .lp-hero{padding:40px 0 48px}
  .lp-plate{padding:26px 22px 28px;border-radius:16px}
  .lp-hero h1{font-size:clamp(27px,7.6vw,34px)}
  .lp-cta-row .btn{width:100%}
  .lp-form-card{padding:24px 20px 26px}
}

/* ========== TOUCH-DEVICE RULES — DO NOT REMOVE ==========
   The LP carries its own header and CTA copies, so a fix in client.css does
   not necessarily reach it. Duplicated here by design. */
@media (hover: none) and (pointer: coarse) {
  button, input[type="submit"], input[type="button"] { font-size: 14px; }
  .btn, a.btn, button.btn { font-size: 14px; min-height: 48px; box-sizing: border-box; }
  .lp-nav a, .lp-head-phone {
    font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box;
  }
  .lp-eyebrow, .lp-meta li, .lp-badges li, .lp-creds li, .lp-footer,
  .lp-fee, .lp-trustline div, .lp-quote-card figcaption { font-size: 15px; }
  .lp-faq-q { min-height: 44px; }
  a[href^="tel:"], a[href^="mailto:"] { min-height: 44px; padding: 12px 0; display: inline-block; box-sizing: border-box; }
  .lp-footer a { display: inline-flex; align-items: center; min-height: 44px; }
  .wpforms-container .wpforms-field-label,
  .lp-form-card .wpforms-container .wpforms-field-label.wpforms-field-label {
    font-size: 14px !important; line-height: 1.4 !important;
  }
  .wpforms-form .wpforms-submit {
    min-height: 44px !important; padding-top: 12px !important; padding-bottom: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-faq-a, .lp-faq-mark, .lp-faq-mark::before, .lp-nav a::after { transition: none; }
}


/* about-the-practice: the copy runs long, so the portrait travels with it */
.lp-about-fig{position:sticky;top:104px;align-self:start}
.lp-about-copy p{font-size:17px;line-height:1.8;margin:0 0 1.05em}
.lp-next-h{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--petrol);margin:28px 0 6px}
.lp-form-sub{font-size:15.5px;color:var(--ink-mute);margin:0 0 18px}
.lp-footer-brand{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lp-footer-logo{width:190px;height:auto;display:block}
@media (max-width:860px){.lp-about-fig{position:static}}

/* The team photo is her own, 700px wide and no larger — so it earns its
   presence from column width, not from upscaling. An even split renders it
   ~540px across; sticky lets it travel beside the longer copy column. */
@media (max-width:860px){.lp-about-fig{max-width:420px}}

/* the header lockup is a link — it has to clear the 44px tap floor on touch */
@media (hover:none) and (pointer:coarse){
  .lp-brand{min-height:44px;display:inline-flex;align-items:center}
}