/* ============================================================================
   MEGAN QUIGLEY, LCSW — LANDING PAGE
   Self-contained. The parent's landing CSS/JS are dequeued; this file is the
   whole stylesheet for page-landing.php.
   ============================================================================ */

:root{
  --bronze:#8C6C45; --rust:#8C4E2A; --rust-deep:#73401F; --clay:#D0A493;
  --cream:#ECE4DB; --oat:#E3D8CB; --plate:#E7DBCF; --bark:#2A1E14;
  --ink:#231C16; --muted:#5C4A3B;
  --fh:'Alegreya',Georgia,serif; --fb:'Hanken Grotesk',system-ui,sans-serif;
  --e:cubic-bezier(.22,.61,.36,1);
  --sy:clamp(54px,7vw,88px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
body.mq-lp{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--fb); font-size:18px; line-height:1.72; text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
}
body.mq-lp img{display:block; max-width:100%}
body.mq-lp h1,body.mq-lp h2,body.mq-lp h3{
  font-family:var(--fh); font-weight:500; line-height:1.14;
  margin:0; letter-spacing:-.005em; text-wrap:balance;
}
body.mq-lp h1{font-size:clamp(2.3rem,4.6vw,3.6rem); line-height:1.06; letter-spacing:-.016em}
body.mq-lp h2{font-size:clamp(1.8rem,3.3vw,2.5rem); color:var(--rust)}
body.mq-lp h3{font-size:clamp(1.15rem,1.9vw,1.4rem); color:var(--ink)}
body.mq-lp p{margin:0 0 1.05em}
body.mq-lp p:last-child{margin-bottom:0}
body.mq-lp a{color:inherit}
:focus-visible{outline:2.5px solid var(--rust); outline-offset:3px}

.lp-container{max-width:1140px; margin:0 auto; padding:0 26px}
.lp-narrow{max-width:820px}
.lp-centre{text-align:center}
.lp-lede{max-width:640px; margin:14px auto 0; color:var(--muted)}
.lp-section{padding:var(--sy) 0}
.lp-oat{background:var(--oat)}
.lp-plate{
  background:var(--cream); border-radius:3px 30px 3px 30px;
  box-shadow:0 26px 60px -34px rgba(30,18,9,.9);
}
.lp-rule{display:block; width:72px; height:2.5px; background:var(--bronze); border-radius:2px; margin:24px 0}

/* ---------- buttons ---------- */
.lp-btn{
  display:inline-block; font-family:var(--fb); font-size:1rem; font-weight:600;
  letter-spacing:.012em; line-height:1.25; text-decoration:none;
  padding:17px 32px; border:0; cursor:pointer;
  border-radius:3px 16px 3px 16px;
  transition:background-color .28s var(--e), box-shadow .28s var(--e);
}
.lp-btn-primary{
  background:var(--rust); color:#fff;
  box-shadow:0 1px 0 rgba(115,64,31,.9), 0 8px 22px -14px rgba(42,30,20,.85);
}
.lp-btn-primary:hover,.lp-btn-primary:focus-visible{background:var(--rust-deep)}
.lp-btn-onbark{background:var(--clay); color:var(--bark)}
.lp-btn-onbark:hover{background:#E0BCAB}

/* ============================================================
   HEADER
   ============================================================ */
.lp-header{position:absolute; inset:0 0 auto 0; z-index:20; padding:14px 0}
.lp-header-inner{
  display:flex; align-items:center; gap:26px;
  background:var(--cream); border-radius:2px 20px 2px 20px;
  box-shadow:0 14px 34px -24px rgba(30,18,9,.9);
  padding:12px 30px; max-width:1400px;
}
.lp-brand{text-decoration:none; line-height:1.05; flex:0 1 auto; min-width:0}
.lp-brand b{
  display:block; font-family:var(--fh); font-weight:500;
  font-size:1.22rem; color:var(--rust); letter-spacing:.004em;
}
/* Was 0.6rem in a light muted grey and effectively unreadable. Measured
   solid, not an alpha tint, and up to a size a person can actually read. */
.lp-brand span{
  display:block; margin-top:4px;
  font-size:.78rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:#6B5847;
}
.lp-nav{margin-left:auto}
.lp-nav-links{display:flex; gap:24px; list-style:none; margin:0; padding:0}
.lp-nav-links a{
  font-size:.875rem; font-weight:500; letter-spacing:.028em;
  text-decoration:none; color:var(--ink); white-space:nowrap;
}
.lp-nav-links a:hover{color:var(--rust)}
.lp-header-phone{text-decoration:none; text-align:right; flex:0 0 auto}
.lp-header-phone span{
  display:block; font-size:.62rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.lp-header-phone b{display:block; font-size:.95rem; color:var(--rust)}

/* ============================================================
   HERO — photo ground, cream plate. Shorter than the homepage's.
   ============================================================ */
.lp-hero{position:relative; overflow:hidden; background:var(--bark); min-height:600px}
.lp-hero-bg{position:absolute; inset:0}
.lp-hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:38% 42%;
  filter:brightness(.95) saturate(1.03);
}
.lp-hero-inner{
  position:relative; z-index:2;
  padding-top:150px; padding-bottom:78px;
  display:flex; justify-content:flex-start;
}
.lp-hero-plate{max-width:620px; padding:44px 46px 42px}
.lp-service{
  margin:0 0 14px; font-family:var(--fb);
  font-size:.9rem; font-weight:600; letter-spacing:.05em; color:var(--rust-deep);
}
.lp-hero-sub{margin-top:18px; font-size:1.24rem; line-height:1.45; color:var(--rust); font-weight:500}
.lp-hero-ctas{display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px}
.lp-hero-alt{
  font-size:.95rem; font-weight:600; color:var(--rust);
  text-decoration:underline; text-underline-offset:4px;
}
.lp-hero-alt:hover{color:var(--rust-deep)}

/* ============================================================
   ASSURANCE STRIPE — full width, under the hero
   ============================================================ */
.lp-assure{background:var(--bark); color:var(--cream)}
.lp-assure ul{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:14px 54px; list-style:none; margin:0; padding:24px 0;
}
.lp-assure li{
  display:flex; align-items:center; gap:12px;
  font-size:.98rem; font-weight:500; letter-spacing:.01em;
}
.lp-assure li::before{
  content:''; width:9px; height:9px; border-radius:50%;
  background:var(--clay); flex:0 0 auto;
}

/* ============================================================
   TWO-COLUMN SECTIONS
   ============================================================ */
.lp-two{display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); gap:56px; align-items:center}
.lp-two--rev .lp-two-copy{order:2}
.lp-two-visual{position:relative}
.lp-two-visual img{
  width:100%; height:auto; border-radius:3px 46px 3px 46px;
  box-shadow:0 24px 54px -36px rgba(42,30,20,.85);
}
.lp-two-copy h2{margin-bottom:20px}

/* the gradient field, carried from the homepage */
.lp-field{
  position:relative; overflow:hidden;
  background-color:#EAE0D5;
  background-image:
    radial-gradient(46% 26% at 84% 9%,  rgba(208,164,147,.5),  rgba(208,164,147,0) 72%),
    radial-gradient(40% 22% at 10% 33%, rgba(236,228,219,.9),  rgba(236,228,219,0) 74%),
    radial-gradient(46% 24% at 86% 62%, rgba(208,164,147,.44), rgba(208,164,147,0) 74%),
    linear-gradient(177deg,#ECE4DB 0%,#E9DED2 34%,#E3D2C4 68%,#DCC4B4 100%);
}
.lp-thread{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.lp-thread path{fill:none; stroke:var(--bronze); stroke-linecap:round}
.lp-field .lp-container{position:relative; z-index:1}

.lp-ticks{list-style:none; margin:0 0 1.05em; padding:0}
.lp-ticks li{position:relative; padding-left:28px; margin-bottom:12px; line-height:1.6}
.lp-ticks li::before{
  content:''; position:absolute; left:2px; top:.62em;
  width:9px; height:9px; background:var(--clay); border-radius:50%;
  box-shadow:0 0 0 3px #E4D1C5;
}
.lp-close{font-family:var(--fh); font-size:1.4rem; line-height:1.34; color:var(--rust-deep)}
.lp-floater{
  margin-top:-38px; margin-left:34px; position:relative;
  background:var(--cream); border-radius:3px 26px 3px 26px;
  padding:20px 24px; max-width:340px;
  box-shadow:0 22px 48px -32px rgba(42,30,20,.9);
  font-family:var(--fh); font-style:italic; font-size:1.1rem;
  line-height:1.38; color:var(--rust-deep);
}

/* ============================================================
   DARK BAND
   ============================================================ */
.lp-band{background:var(--bark); color:var(--cream); padding:calc(var(--sy) * .8) 0; text-align:center}
.lp-band h2{color:var(--clay); margin-bottom:28px; font-size:clamp(1.9rem,3.4vw,2.7rem)}

/* ============================================================
   BENEFITS
   ============================================================ */
.lp-bens-head{margin:calc(var(--sy) * .7) 0 26px; color:var(--rust); font-size:clamp(1.4rem,2.4vw,1.85rem); font-family:var(--fh)}
.lp-bens{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; list-style:none; margin:0; padding:0}
.lp-bens li{
  background:var(--cream); border-radius:3px 26px 3px 26px; padding:22px 24px;
  box-shadow:0 18px 40px -34px rgba(42,30,20,.8);
}
.lp-bens b{display:block; font-family:var(--fh); font-weight:500; font-size:1.1rem; color:var(--rust-deep); margin-bottom:6px}
.lp-bens span{font-size:.98rem; line-height:1.55}

/* ============================================================
   THREE PHASES — lit in sequence, on a loop
   Each card carries its OWN keyframes rather than sharing one with a delay:
   a delay would shift each card's reset too, so they could never settle
   together between cycles.
   ============================================================ */
.lp-phases{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  list-style:none; margin:44px 0 0; padding:0; counter-reset:none;
}
.lp-phase{
  position:relative; background:var(--plate);
  border:1.5px solid rgba(140,108,69,.28);
  border-radius:3px 40px 3px 40px; padding:34px 30px 32px;
  animation-duration:12s; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
}
.lp-phase h3{margin-bottom:10px; color:var(--rust-deep)}
.lp-phase p{font-size:1rem; line-height:1.6; margin:0}
.lp-phase-n{
  display:block; font-family:var(--fh); font-size:2.1rem; font-weight:700;
  line-height:1; color:var(--bronze); margin-bottom:14px;
  transition:color .5s var(--e);
}
.lp-phase:nth-child(1){animation-name:phase1}
.lp-phase:nth-child(2){animation-name:phase2}
.lp-phase:nth-child(3){animation-name:phase3}
@keyframes phase1{
  0%,  24%      {border-color:rgba(140,108,69,.28); box-shadow:0 18px 40px -34px rgba(42,30,20,.8); transform:translateY(0)}
  8%,  16%      {border-color:var(--rust); box-shadow:0 22px 46px -28px rgba(42,30,20,.9); transform:translateY(-4px)}
  100%          {border-color:rgba(140,108,69,.28)}
}
@keyframes phase2{
  0%,  24%, 58% {border-color:rgba(140,108,69,.28); box-shadow:0 18px 40px -34px rgba(42,30,20,.8); transform:translateY(0)}
  33%, 41%      {border-color:var(--rust); box-shadow:0 22px 46px -28px rgba(42,30,20,.9); transform:translateY(-4px)}
  100%          {border-color:rgba(140,108,69,.28)}
}
@keyframes phase3{
  0%,  58%      {border-color:rgba(140,108,69,.28); box-shadow:0 18px 40px -34px rgba(42,30,20,.8); transform:translateY(0)}
  66%, 74%      {border-color:var(--rust); box-shadow:0 22px 46px -28px rgba(42,30,20,.9); transform:translateY(-4px)}
  100%          {border-color:rgba(140,108,69,.28)}
}
@media (prefers-reduced-motion:reduce){
  .lp-phase{animation:none}
}

/* ============================================================
   WHY TRUST ME — headshot + bio, then the pillars.
   No left-edge accent rule anywhere in here.
   ============================================================ */
.lp-trust-grid{display:grid; grid-template-columns:330px minmax(0,1fr); gap:48px; align-items:start; margin-top:42px}
.lp-trust-figure{margin:0}
.lp-trust-figure img{
  width:100%; height:auto;
  border:9px solid var(--cream); border-radius:3px 44px 3px 44px;
  box-shadow:0 26px 56px -30px rgba(42,30,20,.9);
}
.lp-trust-figure figcaption{
  margin-top:14px; font-size:.78rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
}
.lp-trust-copy{
  background:var(--cream); border-radius:3px 40px 3px 40px;
  padding:36px 40px; box-shadow:0 24px 54px -38px rgba(42,30,20,.8);
}
.lp-sig{font-family:var(--fh); font-style:italic; font-size:1.2rem; color:var(--rust-deep)}
.lp-creds{list-style:none; margin:18px 0 0; padding:0}
.lp-creds li{position:relative; padding-left:26px; margin-bottom:8px; font-size:.98rem}
.lp-creds li::before{
  content:''; position:absolute; left:0; top:.6em;
  width:8px; height:8px; background:var(--clay); border-radius:50%;
}
.lp-pillars{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
  list-style:none; margin:44px 0 0; padding:0;
}
.lp-pillars li{
  background:var(--cream); border-radius:3px 30px 3px 30px;
  padding:28px 28px 26px; border:0;   /* never a left-edge accent rule */
  box-shadow:0 20px 44px -36px rgba(42,30,20,.8);
}
.lp-pillars h3{color:var(--rust-deep); margin-bottom:10px}
.lp-pillars p{font-size:.99rem; line-height:1.6; margin:0}

/* ============================================================
   FAQ
   ============================================================ */
.lp-faqs{list-style:none; margin:34px 0 0; padding:0; border-top:1.5px solid rgba(140,108,69,.42)}
.lp-faq{border-bottom:1.5px solid rgba(140,108,69,.28)}
.lp-faq-q{
  display:flex; align-items:flex-start; gap:18px; width:100%;
  margin:0; padding:22px 0; background:none; border:0; cursor:pointer;
  text-align:left; font-family:var(--fh); font-weight:500;
  font-size:clamp(1.15rem,1.9vw,1.4rem); line-height:1.3; color:var(--ink);
  transition:color .24s var(--e);
}
.lp-faq-q:hover{color:var(--rust)}
.lp-faq-q > span:first-child{flex:1 1 auto; min-width:0}
.lp-faq-mark{
  flex:0 0 auto; width:12px; height:12px; margin-top:.44em;
  border-right:2px solid var(--bronze); border-bottom:2px solid var(--bronze);
  transform:rotate(45deg); transition:transform .34s var(--e), border-color .24s var(--e);
}
.lp-faq.open .lp-faq-mark{transform:rotate(-135deg); border-color:var(--rust)}
.lp-faq.open .lp-faq-q{color:var(--rust)}
.lp-faq-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s var(--e)}
.lp-faq.open .lp-faq-a{grid-template-rows:1fr}
.lp-faq-a-in{overflow:hidden}
.lp-faq-a-body{padding:0 0 24px 30px; max-width:64ch}
.lp-faq-a-body p{font-size:1.02rem}

/* ============================================================
   FORM — copy and form share one stripe
   ============================================================ */
.lp-form-section{background:var(--bark); color:var(--cream); padding:var(--sy) 0}
.lp-form-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start}
.lp-form-copy h2{color:var(--clay); margin-bottom:20px}
.lp-form-copy p{color:#E4D9CE}
.lp-next{list-style:none; margin:30px 0 0; padding:0}
.lp-next li{display:flex; gap:18px; padding:16px 0; border-top:1px solid rgba(208,164,147,.26)}
.lp-next-n{
  flex:0 0 auto; font-family:var(--fh); font-size:1.15rem; font-weight:700;
  color:var(--clay); min-width:2em; padding-top:.1em;
}
.lp-next b{display:block; color:var(--cream); font-family:var(--fh); font-weight:500; font-size:1.1rem; margin-bottom:4px}
.lp-next span{color:#E4D9CE; font-size:.99rem; line-height:1.55}
.lp-next a{color:var(--clay)}

.lp-form-card{padding:38px 40px 36px}
.lp-form-card h3{color:var(--rust); font-size:1.5rem; margin-bottom:8px}
.lp-form-sub{color:var(--muted); font-size:.98rem; margin-bottom:22px}

/* Secure / Payments — their own row, two columns, beneath the form */
.lp-assurances{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
  list-style:none; margin:var(--sy) 0 0; padding:0;
}
.lp-assurances li{
  border-top:1.5px solid rgba(208,164,147,.3); padding-top:22px;
}
.lp-assurances h3{color:var(--clay); font-size:1.12rem; margin-bottom:8px}
.lp-assurances p{color:#CFC2B4; font-size:.98rem; line-height:1.6; margin:0}

/* ============================================================
   FOOTER — the main site's
   ============================================================ */
.lp-footer{background:var(--bark); color:#CFC2B4; padding:14px 0 30px}
.lp-foot{display:flex; flex-wrap:wrap; align-items:center; gap:18px 32px;
  border-top:1px solid rgba(208,164,147,.2); padding-top:26px}
.lp-foot-brand b{
  display:block; font-family:var(--fh); font-weight:500;
  font-size:1.24rem; color:var(--cream);
}
.lp-foot-brand span{
  display:block; margin-top:6px; font-size:.74rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--clay);
}
.lp-foot-legal{display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin-left:auto; font-size:.82rem}
.lp-foot-legal a{color:#A8998A; text-decoration:none}
.lp-foot-legal a:hover{color:var(--clay); text-decoration:underline; text-underline-offset:3px}
.lp-fee{margin:22px 0 0; font-size:.8rem; line-height:1.6; color:#A8998A; max-width:70ch}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .lp-bens,.lp-pillars,.lp-phases{grid-template-columns:1fr 1fr}
  .lp-trust-grid{grid-template-columns:260px minmax(0,1fr); gap:32px}
}
@media (max-width:900px){
  .lp-nav{display:none}
  .lp-two,.lp-form-grid{grid-template-columns:1fr; gap:34px}
  .lp-two--rev .lp-two-copy{order:0}
  .lp-hero-inner{padding-top:132px; padding-bottom:56px}
}
@media (max-width:768px){
  .lp-hero{min-height:0}
  .lp-hero-bg{position:relative; height:260px}
  .lp-hero-bg img{object-position:34% 42%}
  .lp-hero-inner{display:block; padding-top:0; padding-bottom:var(--sy); margin-top:-46px}
  .lp-hero-plate{max-width:none; padding:32px 26px 30px}
  .lp-header{position:relative; background:var(--cream)}
  .lp-header-inner{box-shadow:none; padding:8px 0}
  .lp-bens,.lp-pillars,.lp-phases,.lp-assurances{grid-template-columns:1fr}
  .lp-trust-grid{grid-template-columns:1fr}
  .lp-trust-figure{max-width:300px}
  .lp-trust-copy{padding:28px 24px}
  .lp-form-card{padding:28px 24px 26px}
  .lp-floater{margin-left:0; max-width:none}
  .lp-assure ul{gap:12px 26px; padding:20px 0}
}
@media (max-width:480px){
  .lp-container{padding:0 20px}
  .lp-assure li{font-size:.94rem}
}

/* ============================================================
   TOUCH ACCESSIBILITY
   ============================================================ */
@media (hover:none) and (pointer:coarse){
  .lp-btn,.lp-hero-alt,.lp-header-phone{
    font-size:14px; min-height:44px; min-width:44px; box-sizing:border-box;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .lp-header-phone{flex-direction:column; align-items:flex-end; justify-content:center}
  .lp-nav-links a{
    font-size:14px; min-height:44px; min-width:44px; box-sizing:border-box;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .lp-brand span,.lp-header-phone span,.lp-trust-figure figcaption,
  .lp-foot-brand span,.lp-foot-legal,.lp-fee,.lp-service{font-size:14px}
  .lp-faq-q{min-height:44px}
  a[href^="tel:"],a[href^="mailto:"]{min-height:44px; display:inline-flex; align-items:center}
  /* The footer legal links and the brand lockup are still links, and both
     measured 24px and 39px tall. Easy to miss because neither looks like a
     control — which is exactly why the sweep checks every anchor. */
  .lp-foot-legal a{min-height:44px; display:inline-flex; align-items:center; box-sizing:border-box}
  .lp-brand{min-height:44px; display:flex; flex-direction:column; justify-content:center; box-sizing:border-box}
}

/* ============================================================
   DARK-BAND HEADING COLOURS — specificity, not preference.
   `body.mq-lp h2` is (0,1,2): one class plus TWO element selectors. A
   section rule like `.lp-band h2` is (0,1,1) and LOSES the tiebreak on
   element count, so every heading on a dark band inherited the light-ground
   colour. Measured on the live page: .lp-assurances h3 rendered #231C16 on
   #2A1E14 — about 1.05:1, invisible — and two h2s sat near 2.2:1.
   Prefixing with body.mq-lp takes these to (0,2,2) so they actually win.
   Clay on bark is 8.71:1 and cream on bark 12.89:1.
   ============================================================ */
body.mq-lp .lp-band h2,
body.mq-lp .lp-form-copy h2,
body.mq-lp .lp-assurances h3{color:var(--clay)}
body.mq-lp .lp-form-card h3{color:var(--rust)}
body.mq-lp .lp-trust-copy h2,
body.mq-lp .lp-pillars h3,
body.mq-lp .lp-phase h3{color:var(--rust-deep)}