/* ============================================================
   EMBER AND INSIGHT — LANDING PAGE
   The LP's conversion STRUCTURE in the main site's DESIGN.
   Self-contained: the parent's landing.css is never loaded for
   this template (tpa_landing_enqueue fires only for the exact
   page-landing.php), so everything the page needs is here.

   Vocabulary borrowed verbatim from client.css so the LP reads as
   the same practice: loam header with the two-tier wordmark, a
   deep-loam placard on a full-bleed photograph, cream plates with
   a hard rust offset block, tinted full-bleed bands, Lustria over
   Hanken Grotesk, and CTAs that wipe rust to deep sage.
   ============================================================ */
:root{
  --sage:#5E7A5C; --sage-dark:#45573F; --sage-deep:#1F2A20; --sage-tint:#E4E8DF;
  --sand:#8C7A5E; --sand-tint:#EAE3D6; --rust:#9E6240; --rust-dark:#7E4B30; --rust-tint:#EFDDD2;
  --sand-ink:#6E5F45; --rust-ink:#7E4B30; --ember-lt:#C98A63; --btn-hover:#4C6446;
  --plate-hover:#F5EDE2;
  --bg:#F2F3EE; --paper:#FBFAF6; --loam:#252218; --loam-2:#312C21; --loam-soft:#3A352A;
  --ink-mute:#5C564A; --on-dark:#EFEDE5; --on-sage:#DADDD6;
  --font-h:"Lustria",Georgia,serif;
  --font-b:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --wrap:1180px;
  --sec:clamp(52px,7vw,92px);
  --hdr-h:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--loam);
  font:400 18px/1.75 var(--font-b);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03;
  background-image:url('../images/noise.svg')}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-h);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.014em}
h1{line-height:1.03}h2,h3{line-height:1.12}
p{margin:0 0 1.05em;text-wrap:pretty}p:last-child{margin-bottom:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--rust-ink);outline-offset:3px}
.lp-wrap{width:min(100% - 44px,var(--wrap));margin-inline:auto;position:relative;z-index:2}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--loam);color:var(--on-dark);padding:12px 18px}
.skip-link:focus{left:8px;top:8px}

/* ---------- buttons: the site's architectural rectangle ---------- */
.lp-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-block;
  font:600 .93rem/1 var(--font-b);letter-spacing:.09em;text-transform:uppercase;
  padding:18px 32px 17px;border-radius:0;text-decoration:none;cursor:pointer;border:0;
  background:var(--rust);color:#FDFBF7;box-shadow:inset 0 0 0 1px transparent;
  transition:box-shadow .35s ease,color .3s;text-align:center}
.lp-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-hover);
  transform:scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.lp-btn:hover,.lp-btn:focus-visible{box-shadow:inset 0 0 0 1px rgba(253,251,247,.45)}
.lp-btn:hover::before,.lp-btn:focus-visible::before{transform:scaleX(1)}
.lp-btn--line{background:transparent;color:var(--rust-ink);box-shadow:inset 0 0 0 1px var(--rust)}
.lp-btn--line:hover{color:#FDFBF7;box-shadow:inset 0 0 0 1px var(--btn-hover)}
.lp-tlink{display:inline-block;font:600 .9rem/1.4 var(--font-b);letter-spacing:.11em;
  text-transform:uppercase;text-decoration:none;color:var(--rust-ink);padding-bottom:4px;
  background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;
  background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .34s cubic-bezier(.22,1,.36,1),color .25s}
.lp-tlink:hover{background-size:100% 2px;color:var(--loam)}
.lp-tlink--l{color:var(--on-dark)}

/* the site's section label — small, tracked, sand-ink (never an "eyebrow" band) */
.lp-eyebrow{font:600 .72rem/1.6 var(--font-b);letter-spacing:.17em;text-transform:uppercase;
  color:var(--sand-ink);margin:0 0 14px}
.lp-eyebrow--l{color:var(--ember-lt)}

/* ============================ HEADER ============================ */
/* Paper ground, matching the main site: the client's lockup is #3E0A16 and
   measured 1.05:1 on the old loam bar. Inks re-measured against #FBFAF6 —
   loam 15.2:1, rust-ink 6.85:1, rust brackets 4.7:1. */
.lp-header{position:fixed;inset:0 0 auto;z-index:60;height:var(--hdr-h);display:flex;align-items:center;
  background:var(--paper);box-shadow:0 1px 0 rgba(37,34,24,.13)}
.lp-header__in{width:min(100% - 34px,1320px);margin-inline:auto;display:flex;align-items:center;gap:22px}
.lp-brand{display:flex;align-items:center;text-decoration:none;line-height:1;flex:0 0 auto;min-width:0}
.lp-brand__logo{display:block;flex:0 0 auto}
/* max-width:none — a height-pinned lockup under img{max-width:100%} squashes
   rather than scales once the viewport gets narrow */
.lp-brand__logo img{display:block;height:60px;width:auto;max-width:none}
.lp-nav{display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,1.6vw,1.4rem);
  flex:1 1 auto;margin:0;padding:0;list-style:none}
.lp-nav li{position:relative}
/* the main site's ember [ ] brackets sliding in on hover */
.lp-nav a{display:block;padding:10px 11px;text-decoration:none;color:var(--loam);
  font:400 1rem/1 var(--font-h);transition:color .32s;position:relative}
.lp-nav a::before,.lp-nav a::after{position:absolute;top:50%;color:var(--rust);
  font:400 1.25rem/1 var(--font-h);opacity:0;
  transition:opacity .3s,transform .42s cubic-bezier(.22,1,.36,1)}
.lp-nav a::before{content:"[";left:0;transform:translate(7px,-50%)}
.lp-nav a::after{content:"]";right:0;transform:translate(-7px,-50%)}
.lp-nav a:hover{color:var(--rust-ink)}
.lp-nav a:hover::before,.lp-nav a:hover::after,
.lp-nav a:focus-visible::before,.lp-nav a:focus-visible::after{opacity:1;transform:translate(0,-50%)}
.lp-header__end{display:flex;align-items:center;gap:14px;flex:0 0 auto;margin-left:auto}
.lp-header__dual{display:flex;flex-direction:column;flex:0 0 auto;border:1px solid var(--rust)}
.lp-header__dual a{display:flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;white-space:nowrap;padding:0 22px;transition:background .28s,color .28s}
.lp-header__cta{height:32px;background:var(--rust);color:#FDFBF7;
  font:800 .7rem/1 var(--font-b);letter-spacing:.14em;text-transform:uppercase}
.lp-header__cta:hover{background:var(--btn-hover)}
.lp-header__tel{height:31px;background:transparent;color:var(--rust-ink);
  font:600 .84rem/1 var(--font-b);border-top:1px solid var(--rust)}
.lp-header__tel:hover{background:var(--btn-hover);color:#FDFBF7}
.lp-header__tel svg{width:12px;height:12px;fill:currentColor;flex:0 0 auto}

/* --- burger + drawer (mobile only; shown by the breakpoint block below) --- */
.lp-burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  padding:0;align-items:center;justify-content:center;flex:0 0 auto;margin-left:auto}
.lp-burger span{display:block;width:23px;height:1.5px;background:var(--loam);position:relative;flex-shrink:0}
.lp-burger span::before,.lp-burger span::after{content:"";position:absolute;left:0;width:23px;height:1.5px;background:inherit}
.lp-burger span::before{top:-7px}.lp-burger span::after{top:7px}
.lp-scrim{position:fixed;inset:0;z-index:79;background:rgba(20,18,13,.55);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.lp-scrim.on{opacity:1;visibility:visible}
/* full width, per Matt: a 400px panel on a 390px phone left a useless sliver */
.lp-drawer{position:fixed;inset:0;z-index:80;width:100%;background:var(--loam);color:var(--on-dark);
  padding:18px 26px 40px;overflow-y:auto;transform:translateX(102%);
  transition:transform .42s cubic-bezier(.22,1,.36,1);height:100vh;height:100dvh;
  display:none}
.lp-drawer.is-open{transform:none}
.lp-drawer__top{display:flex;justify-content:flex-end;margin-bottom:8px}
.lp-drawer__x{width:44px;height:44px;border:0;background:transparent;font-size:30px;line-height:1;
  color:var(--on-dark);cursor:pointer}
.lp-drawer__nav{list-style:none;margin:0;padding:0}
.lp-drawer__nav li{border-bottom:1px solid rgba(239,237,229,.14)}
.lp-drawer__nav a{display:block;padding:16px 2px;text-decoration:none;color:var(--on-dark);
  font:600 1rem/1.3 var(--font-b);letter-spacing:.08em;text-transform:uppercase}
.lp-drawer__foot{margin-top:26px;display:grid;gap:12px}
.lp-drawer__tel{text-decoration:none;color:var(--on-dark);font:600 1.1rem/1 var(--font-b);
  display:block;text-align:center;padding:14px;border:1px solid var(--rust)}
.lp-drawer__foot .lp-btn{text-align:center;width:100%}

/* ============================ HERO — placard on the photograph ============================ */
/* No plinth: on the main site it keeps two photographs apart, but here the
   trust bar sits directly below and is dark too, so it read as a stray band. */
.lp-hero{background:var(--loam);padding-top:var(--hdr-h);padding-bottom:0;
  position:relative;overflow:hidden;isolation:isolate}
.lp-hero__sky{position:absolute;left:0;right:0;top:var(--hdr-h);bottom:0;z-index:0;overflow:hidden}
/* Frosted-glass foliage, cut to the hero's own proportion, so a centred crop
   is correct — no subject to keep clear of the window. */
/* Mirrored so the trail runs in on the RIGHT, away from the slab. Done here
   rather than baked into the file: a flipped file also flips the licence
   watermark, and the flip would silently vanish the moment the licensed
   final replaces this comp. */
.lp-hero__sky img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  transform:scaleX(-1)}
.lp-hero__sky::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,18,13,.24) 0%,rgba(20,18,13,.06) 34%,rgba(20,18,13,.34) 100%)}
.lp-hero__in{position:relative;z-index:3;padding:clamp(38px,5vw,60px) 0 clamp(40px,5vw,64px);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,60px);align-items:center}
/* No headshot: one column, and the placard keeps the main hero's 772px measure
   instead of stretching the full width. */
.lp-hero__in--solo{grid-template-columns:minmax(0,1fr)}
/* Shrink-wrap rather than sit at a fixed 772px: with no headshot beside it the
   slab was wider than its longest line, leaving a band of empty loam down the
   right-hand side. fit-content tracks the copy, and 772px stays the ceiling. */
.lp-hero__in--solo .lp-slab{width:fit-content;max-width:min(100%,772px)}
/* Paper, matching the header — so every ink inside had to be re-measured
   against #FBFAF6. The old set ran 1.12-2.75:1 on it; these are 5.9-15.2. */
.lp-slab{background:var(--paper);border:1px solid var(--rust);
  padding:clamp(30px,4.4vh,64px) clamp(24px,3vw,46px) clamp(32px,4.6vh,66px);
  box-shadow:0 48px 100px -55px rgba(0,0,0,.95)}
.lp-hero__place{font-family:var(--font-h);font-size:clamp(1.02rem,1.4vw,1.18rem);
  line-height:1.4;color:var(--rust-ink);margin:0 0 12px}
.lp-hero h1{color:var(--loam);font-size:clamp(2rem,4vw,3.3rem);letter-spacing:-.02em;max-width:18ch;margin:0}
/* Two beats, not one block. The first names who it is for; the SECOND names
   the service and where, so it carries the weight — larger, brighter, and set
   apart rather than running on from the line above. */
.lp-hero__sub{margin:clamp(18px,2.4vh,32px) 0 0;max-width:52ch}
.lp-hero__sub p{color:var(--ink-mute);font-family:var(--font-h);
  font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.5;margin:0 0 .62em}
.lp-hero__sub p:last-child{color:var(--rust-ink);
  font-size:clamp(1.16rem,1.75vw,1.44rem);line-height:1.42;margin-bottom:0}
.lp-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3.4vh,42px)}
.lp-hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;list-style:none;
  margin:clamp(20px,2.6vh,32px) 0 0;padding:0}
.lp-hero__meta li{font:600 1rem/1.5 var(--font-b);letter-spacing:.1em;text-transform:uppercase;color:var(--sand-ink)}
.lp-hero__meta li + li::before{content:"\00B7";margin-right:22px;color:var(--rust);font-weight:400}
/* portrait in the site's matted-print frame, credential card notched in */
.lp-hero__fig{margin:0;position:relative;justify-self:center;width:min(100%,320px)}
.lp-hero__fig picture{display:block}
.lp-hero__fig img{width:100%;height:auto;aspect-ratio:320/400;object-fit:cover;object-position:50% 18%}
.lp-hero__card{position:relative;margin:-52px 0 0 28px;background:var(--paper);color:var(--loam);
  padding:15px 19px 17px;box-shadow:10px 10px 0 0 var(--rust)}
.lp-hero__who{font-family:var(--font-h);font-size:1.14rem;line-height:1.25;margin:0 0 3px}
.lp-hero__cred{font:600 .7rem/1.5 var(--font-b);letter-spacing:.15em;text-transform:uppercase;
  color:var(--sand-ink);margin:0}

/* trust strip under the hero */
.lp-trustbar{background:var(--loam-2);color:rgba(239,237,229,.8);padding:14px 0}
.lp-trustbar ul{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 34px;list-style:none;margin:0;padding:0}
.lp-trustbar li{display:flex;align-items:center;gap:9px;
  font:600 .72rem/1.5 var(--font-b);letter-spacing:.14em;text-transform:uppercase}
.lp-trustbar svg{width:15px;height:15px;fill:none;stroke:var(--ember-lt);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ============================ SECTIONS ============================ */
.lp-section{padding:var(--sec) 0}
.lp-section--bg{background:var(--bg)}
.lp-section--sand{background:var(--sand-tint)}
.lp-section--sage{background:var(--sage-tint)}
.lp-section--loam{background:var(--sage-dark);color:var(--on-sage)}
.lp-section--loam h2,.lp-section--loam h3{color:var(--on-dark)}
.lp-section h2{font-size:clamp(1.8rem,3.4vw,2.7rem);max-width:20ch;margin:0 0 .62em}
.lp-section h2:has(br){max-width:none}
.lp-section--center{text-align:center}
.lp-section--center h2{margin-inline:auto}
/* Needs the element in the selector: .lp-section h2 above is (0,1,1) and its
   `margin` SHORTHAND wipes margin-inline:auto, so a bare .lp-h-center (0,1,0)
   loses and the heading centres its text inside a 20ch box still pinned left. */
.lp-section h2.lp-h-center{margin-inline:auto;text-align:center}
.lp-section--center .lp-steps{text-align:left;margin-bottom:clamp(38px,4.6vw,60px)}
/* the deck centres as a block; its plates still read left */
.lp-section--center .lp-faq{text-align:left}
.lp-h-center{margin-inline:auto;text-align:center}
.lp-section p{font-size:1.03rem;line-height:1.82;color:var(--loam-soft)}
.lp-section--loam p{color:var(--on-sage)}
.lp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4.4vw,68px);align-items:center}
.lp-grid--flip .lp-grid__text{order:2}
.lp-grid--flip .lp-grid__media{order:1}
/* The media column is absolutely-positioned inside its cell, so it can only
   match the copy column's height if the row stretches. Without this the image
   floors at its min-height and the sand shows through beneath it. */
.lp-grid--stretch{align-items:stretch}
.lp-grid__media img,.lp-grid__media picture{width:100%;height:100%;object-fit:cover}
.lp-grid__media img{border:1px solid var(--rust);object-position:50% 18%}
/* Tall enough that the portrait source shows both heads with space above —
   at 400px a cover crop cut them off. */
.lp-grid__media{position:relative;min-height:clamp(340px,38vw,560px)}
.lp-grid__media img,.lp-grid__media picture{position:absolute;inset:0}
/* credential sits directly under the name, quiet and tracked */
.lp-about-cred{font:600 .72rem/1.6 var(--font-b);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ember-lt);margin:2px 0 18px}
.lp-grid__text h2:has(+ .lp-about-cred){margin-bottom:0}
/* her portrait in the matted-print frame, not the landscape media slot */
.lp-about-fig{margin:0;justify-self:center;width:min(100%,320px)}
.lp-about-fig picture{display:block}
.lp-about-fig img{width:100%;height:auto;aspect-ratio:320/400;object-fit:cover;object-position:50% 18%;
  border:1px solid var(--rust);box-shadow:12px 12px 0 0 var(--rust)}

/* symptom list — the site's bracket marker, never a bullet */
.lp-symptoms{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.lp-symptoms li{display:flex;gap:12px;font-size:1.01rem;line-height:1.7;color:var(--loam-soft)}
.lp-symptoms li::before{content:"[";color:var(--rust);font-family:var(--font-h);font-size:1.15em;line-height:1.4;flex:0 0 auto}
.lp-section--loam .lp-symptoms li{color:var(--on-sage)}

/* pull quote on a cream plate with the hard rust offset */
.lp-quote{background:var(--paper);border:1px solid var(--rust);color:var(--loam);
  padding:22px 26px;margin:26px 0 0;box-shadow:11px 11px 0 0 var(--rust);max-width:44ch}
.lp-quote p{font-family:var(--font-h);font-style:italic;font-size:clamp(1.1rem,1.7vw,1.32rem);
  line-height:1.4;color:var(--loam);margin:0}
.lp-quote__label{display:block;font:600 .68rem/1.6 var(--font-b);letter-spacing:.16em;
  text-transform:uppercase;color:var(--sand-ink);margin-bottom:8px;font-style:normal}
.lp-section p.lp-close{font-family:var(--font-h);font-size:2.25em;line-height:1.28;
  color:var(--rust-ink);margin:28px 0 0;max-width:34ch}
.lp-solution-close{margin-top:clamp(34px,4vw,52px);text-align:center}
/* Wide enough that the <br> in the field is the only break on desktop — at 44ch
   the second sentence wrapped again and the deliberate two-line shape was lost. */
.lp-section .lp-solution-close p.lp-close{margin:0 auto clamp(24px,2.8vw,34px);max-width:100%}

/* benefits — one card per line, stacked in the text column
   Each is a single sentence on the site's cream plate. The offset block is
   lighter than the pull quote's (6px vs 11px) because five of them stack: at
   full weight the column reads as scaffolding rather than a list. */
.lp-benefits__intro{margin:26px 0 0;font-weight:600;color:var(--rust-ink)}
.lp-benefits{list-style:none;margin:18px 0 0;padding:0 8px 0 0;display:grid;gap:14px}
.lp-benefits li{background:var(--paper);border:1px solid var(--rust);
  box-shadow:6px 6px 0 0 var(--rust);padding:14px 18px;
  font-size:1.01rem;line-height:1.6;color:var(--loam)}
.lp-section--loam .lp-benefits li{color:var(--loam)}

/* mid-page CTA band */
/* Fixed-parallax photograph, the same treatment the inner-page stripes use.
   The scrim is heavy enough that #EFEDE5 stays well clear of AA on it. */
.lp-band{position:relative;color:var(--on-dark);padding:clamp(56px,7vw,96px) 0;text-align:center;
  background-color:var(--loam);background-size:cover;background-position:50% 50%;
  background-attachment:fixed;background-repeat:no-repeat}
.lp-band.bg-loaded{background-image:linear-gradient(rgba(31,28,20,.74),rgba(31,28,20,.74)),
  image-set(url('../images/lp-band-wm.webp') type('image/webp'),url('../images/lp-band-wm.jpg') type('image/jpeg'))}
.lp-band h2{color:var(--on-dark);margin:0 auto;max-width:22ch;font-size:2.25em}
.lp-band .lp-btn{margin-top:26px}

/* process — three steps, no arbitrary numbering */
/* Pillars borrow the homepage contact cards: three tinted grounds walking
   sage → sand → rust, each on a cream plate with the hard rust offset block.
   No numbering, no rule above or below the heading — both are on the do-not-
   ship list; the colour walk and the offset carry the rhythm instead. */
.lp-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px);
  margin:clamp(30px,3.6vw,46px) 0 0;list-style:none;padding:0}
.lp-pillars li{position:relative;padding:clamp(24px,2.6vw,32px) clamp(22px,2.4vw,30px) clamp(26px,2.8vw,34px);
  border:1px solid var(--rust);color:var(--loam);
  box-shadow:11px 11px 0 0 var(--rust)}
.lp-pillars li:nth-child(3n+1){background:var(--sage-tint)}
.lp-pillars li:nth-child(3n+2){background:var(--sand-tint)}
.lp-pillars li:nth-child(3n+3){background:var(--rust-tint)}
.lp-pillars b{display:block;font-family:var(--font-h);font-weight:400;
  font-size:clamp(1.16rem,1.7vw,1.38rem);line-height:1.24;color:var(--loam);margin-bottom:11px}
.lp-pillars span{display:block;font-size:.98rem;line-height:1.72;color:var(--loam-soft)}

.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px);margin-top:34px}
.lp-step{background:var(--paper);border:1px solid var(--rust);padding:26px 24px 28px;
  box-shadow:6px 6px 0 0 rgba(158,98,64,.35);
  transition:box-shadow .6s cubic-bezier(.22,1,.36,1),background .6s,transform .6s cubic-bezier(.22,1,.36,1)}
/* the walk-through: one step lifts at a time, then all rest before it loops.
   transform/box-shadow only — never layout properties. */
.lp-step.is-on{background:var(--plate-hover);box-shadow:14px 14px 0 0 var(--rust);transform:translateY(-4px)}
.lp-section .lp-step h3{font-size:1.3rem;color:var(--loam);margin:0 0 10px}
.lp-step p{font-size:.99rem;line-height:1.7}

/* testimonials */
.lp-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:30px}
.lp-quotes figure{margin:0;background:var(--paper);border:1px solid rgba(158,98,64,.3);padding:24px 26px}
.lp-quotes blockquote{margin:0;font-family:var(--font-h);font-style:italic;
  font-size:1.1rem;line-height:1.5;color:var(--loam)}
.lp-quotes figcaption{margin-top:14px;font:600 .72rem/1.5 var(--font-b);letter-spacing:.14em;
  text-transform:uppercase;color:var(--sand-ink)}

/* FAQ — the same Plate Deck the main site's FAQ page uses, so the two match.
   Constrained to the answer's measure rather than the full column, so an open
   answer leaves no dead band beside it. */
/* 36px to match the main site's .faq-stack. It has to clear the 14px offset
   block an OPEN item casts downward — at the old 18px the shadow ate most of
   the gap and the next question sat almost against the open panel. */
.lp-faq{max-width:720px;margin:clamp(26px,3.4vw,40px) auto 0;text-align:left;
  display:flex;flex-direction:column;gap:36px}
.lp-faq__item{background:var(--paper);border:1px solid var(--rust);position:relative;
  box-shadow:9px 9px 0 0 var(--rust);
  transition:box-shadow .55s cubic-bezier(.22,1,.36,1),background .45s}
.lp-faq__item:hover,.lp-faq__item:focus-within{background:var(--plate-hover);box-shadow:14px 14px 0 0 var(--rust)}
.lp-faq__item.is-open{background:var(--plate-hover);box-shadow:14px 14px 0 0 var(--sage)}
.lp-faq__q{width:100%;display:flex;align-items:flex-start;gap:14px;background:none;border:0;
  cursor:pointer;text-align:left;padding:clamp(17px,1.9vw,23px) clamp(19px,2.1vw,27px);
  font-family:var(--font-h);font-size:clamp(1.04rem,1.45vw,1.2rem);line-height:1.32;
  color:var(--loam);transition:color .3s}
.lp-faq__q:hover{color:var(--rust-ink)}
.lp-faq__q span:last-child{flex:1 1 auto}
.lp-faq__m{flex:0 0 auto;width:9px;height:9px;margin-top:.45em;
  border-right:1.5px solid var(--rust);border-bottom:1.5px solid var(--rust);
  transform:rotate(45deg);transition:transform .42s cubic-bezier(.22,1,.36,1)}
.lp-faq__item.is-open .lp-faq__m{transform:rotate(-135deg)}
.lp-faq__item.is-open .lp-faq__q{color:var(--rust-ink)}
.lp-faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.22,1,.36,1)}
.lp-faq__item.is-open .lp-faq__a{grid-template-rows:1fr}
.lp-faq__a>div{overflow:hidden}
.lp-faq__a-in{padding:0 clamp(19px,2.1vw,27px) clamp(19px,2.1vw,25px);max-width:none}
.lp-faq__a-in::before{content:"";display:block;width:46px;height:1px;background:var(--rust);margin-bottom:14px}
.lp-faq__a p{font-size:1rem;line-height:1.8;color:var(--loam-soft)}

/* what's next */
.lp-next{display:grid;gap:18px;margin-top:28px;list-style:none;padding:0}
.lp-next li{border-top:2px solid var(--rust);padding-top:16px}
.lp-next b{display:block;font-family:var(--font-h);font-weight:400;font-size:1.16rem;margin-bottom:6px}
.lp-next span{font-size:.99rem;line-height:1.7;color:var(--loam-soft)}
.lp-next a[href^="tel:"],.lp-next a[href^="mailto:"]{text-decoration:none}

/* ============================ FORM ============================ */
.lp-form-section{background-color:var(--sand-tint);background-size:cover;background-position:50% 50%;
  padding:var(--sec) 0}
.lp-form-section.bg-loaded{background-image:linear-gradient(rgba(251,247,241,.74),rgba(251,247,241,.74)),
  image-set(url('../images/front-cta-wm.webp') type('image/webp'),url('../images/front-cta-wm.jpg') type('image/jpeg'))}
.lp-form-card{background:var(--paper);padding:clamp(30px,3.6vw,52px);
  box-shadow:0 40px 90px -55px rgba(37,34,24,.75)}
/* the ask and the three steps run down the left, the form sits to its right */
/* The copy runs down the left and the form STRETCHES to match its height —
   the message field takes up the slack, so both columns finish on the same
   line whatever the copy length. */
.lp-form-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4vw,64px);align-items:stretch}
.lp-form-copy h2{font-size:clamp(1.8rem,3.2vw,2.5rem);margin:0 0 .62em;max-width:18ch}
.lp-form-lead{max-width:52ch}
.lp-form-lead p{margin-bottom:1em}
.lp-form-fields{min-width:0;display:flex;flex-direction:column}
/* align-items:stretch spelled out: switching these to flex INHERITS WPForms'
   own value for its layout engine, and the fields stop filling the column. */
.lp-form-fields .wpforms-container,
.lp-form-fields .wpforms-form,
.lp-form-fields .wpforms-field-container{display:flex;flex-direction:column;align-items:stretch;
  flex:1 1 auto;min-height:0;width:100%;max-width:none;margin:0}
.lp-form-fields .wpforms-form .wpforms-field{width:100% !important;max-width:none !important}
.lp-form-fields .wpforms-field-textarea{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.lp-form-fields .wpforms-field-textarea textarea{flex:1 1 auto;min-height:130px;resize:vertical}
.lp-contact{display:grid;gap:14px;align-content:start;margin:0}
.lp-cline{position:relative;margin:0;padding:16px 20px}
.lp-cline:nth-child(1){background:var(--sage-tint)}
.lp-cline:nth-child(2){background:var(--sand-tint)}
.lp-cline:nth-child(3){background:var(--rust-tint)}
.lp-cline b{display:block;margin-bottom:5px;font:600 .68rem/1.6 var(--font-b);
  letter-spacing:.16em;text-transform:uppercase;color:var(--sand-ink)}
.lp-cline a,.lp-cline span{display:inline-block;color:var(--loam);font-size:1.01rem;
  line-height:1.45;text-decoration:none;overflow-wrap:anywhere}
/* assurance row beneath the form — two tinted plates, the site's contact-card
   treatment. One of them carries the fee disclosure every LP must show. */
.lp-assure{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);
  margin-top:clamp(32px,3.8vw,48px);padding-top:clamp(28px,3.4vw,42px);
  border-top:1px solid rgba(37,34,24,.14)}
.lp-assure__item{padding:clamp(20px,2.2vw,26px) clamp(20px,2.2vw,26px) clamp(22px,2.4vw,28px);
  border:1px solid rgba(158,98,64,.34)}
.lp-assure__item:nth-child(odd){background:var(--sage-tint)}
.lp-assure__item:nth-child(even){background:var(--sand-tint)}
.lp-section .lp-assure h3,.lp-assure h3{font-size:clamp(1.06rem,1.5vw,1.22rem);color:var(--loam);margin:0 0 9px}
.lp-assure p{font-size:.95rem;line-height:1.7;color:var(--loam-soft);margin:0}
.lp-footer__legal{display:flex;gap:20px}
.lp-footer__legal a{color:var(--rust-ink);font-size:.82rem;text-decoration:none;transition:color .25s}
.lp-footer__legal a:hover{color:var(--loam)}
.lp-form-note{font-size:.74rem;line-height:1.5;color:var(--ink-mute);margin:7px 0 0;text-align:center}
/* field placement only — colours and type come from the parent's token hook */
.lp-form-card .wpforms-container,
.lp-form-card .wpforms-form,
.lp-form-card .wpforms-field-container{display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:none;margin:0}
.lp-form-card .wpforms-form .wpforms-field{width:100% !important;max-width:none !important}
.lp-form-missing{background:var(--rust-tint);border:1px solid var(--rust);padding:18px 20px;font-size:.95rem}

/* ============================ FOOTER ============================ */
/* Paper ground so the lockup can run here too. Every ink is a measured solid
   against #FBFAF6, not an rgba alpha tuned for deep sage. */
.lp-footer{background:var(--paper);color:var(--ink-mute);padding:40px 0 26px;
  border-top:1px solid rgba(37,34,24,.10)}
.lp-footer__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  padding-bottom:20px;border-bottom:1px solid rgba(37,34,24,.16)}
.lp-footer__brand{margin:0;line-height:0;display:inline-block}
.lp-footer__logo{display:block}
.lp-footer__logo img{display:block;height:54px;width:auto;max-width:none}
.lp-footer__contact{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.92rem}
.lp-footer__contact a{color:var(--rust-ink);text-decoration:none}
.lp-footer__contact a:hover{color:var(--loam)}
.lp-footer__bot{padding-top:18px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px}
.lp-footer__cp{font-size:.8rem;color:var(--ink-mute);margin:0}
/* A.A.C. R4-6-217 — required on EVERY page, the landing page included */
.lp-footer__sup{margin:16px 0 0;font-size:.755rem;line-height:1.65;color:var(--ink-mute);max-width:104ch}
.lp-footer__sup a{color:var(--rust-ink)}
.lp-footer__sup a[href^="tel:"],.lp-footer__sup a[href^="mailto:"]{text-decoration:none}
/* fee disclosure — required on every LP */

/* ============================ REVEALS ============================ */
.lp-rv{opacity:0;transform:translateY(18px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.lp-rv.in{opacity:1;transform:none}
.no-js .lp-rv{opacity:1;transform:none}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1000px){
  .lp-hero__in{grid-template-columns:1fr;gap:34px}
  .lp-hero__fig{justify-self:start;max-width:300px}
  .lp-grid,.lp-form-grid{grid-template-columns:1fr;gap:30px}
  .lp-form-fields .wpforms-field-textarea textarea{min-height:150px}
  .lp-assure{grid-template-columns:1fr}
  .lp-grid--flip .lp-grid__text,.lp-grid--flip .lp-grid__media{order:0}
  .lp-grid__media{min-height:240px}
  .lp-steps,.lp-pillars{grid-template-columns:1fr}
}
/* A landscape phone is ~926px WIDE, so a max-width gate never reaches it.
   Extend the CONDITION of the mobile block rather than duplicating its rules;
   max-height:500px is what excludes iPad Pro 11 landscape (834px tall). */
@media (max-width:768px),
       (hover:none) and (pointer:coarse) and (max-height:500px){
  :root{--hdr-h:62px}

  /* HEADER: nav and both CTAs move into the drawer; only brand + burger remain.
     The header had been trying to hold a two-tier CTA block, a phone number and
     a wordmark in 62px of height. */
  .lp-nav{display:none}
  .lp-header__dual{display:none}
  .lp-burger{display:flex}
  .lp-drawer{display:block}
  .lp-header__in{width:min(100% - 28px,1320px);gap:12px}
  /* height-sized, never flex-shrunk — shrinking a pinned lockup squashes it */
  .lp-brand{flex:0 0 auto;min-width:0}
  .lp-brand__logo img{height:52px}

  .lp-band{background-attachment:scroll;padding:44px 0}
  .lp-hero__in{padding-top:26px}
  .lp-slab{padding:26px 20px 30px}
  .lp-hero h1{font-size:clamp(1.8rem,7.4vw,2.5rem);max-width:none}
  .lp-hero__cta{margin-top:26px}
  .lp-hero__cta .lp-btn{width:100%}
  .lp-hero__sub{max-width:none}
  /* UNDERSTAND · RECONNECT · THRIVE: one centred line. The desktop rule pairs a
     22px gap with a 22px margin on the "·" pseudo-element, which on a phone
     totalled 44px between items, wrapped, and stranded a separator at the start
     of the second line. */
  .lp-hero__meta{justify-content:center;flex-wrap:nowrap;gap:0;margin-top:22px}
  .lp-hero__meta li{letter-spacing:.05em;white-space:nowrap}
  .lp-hero__meta li + li::before{margin-right:9px;margin-left:9px}

  /* TRUST STRIPE: a ragged centred wrap became a tidy two-up, each item's icon
     locked to its own label instead of drifting across the row. */
  .lp-trustbar{padding:16px 0}
  .lp-trustbar ul{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;justify-content:stretch}
  .lp-trustbar li{align-items:flex-start;gap:8px;line-height:1.35}
  .lp-trustbar svg{margin-top:2px}

  .lp-quote{max-width:none}
  /* 2.25em is a desktop size — at 40px on a phone this ran to five lines */
  .lp-section p.lp-close{font-size:1.5rem;line-height:1.3}

  /* FOOTER: centred as a block — the stacked left rail read as debris */
  .lp-footer__top,.lp-footer__bot{flex-direction:column;align-items:center;text-align:center}
  .lp-footer__brand{display:block}
  .lp-footer__legal{justify-content:center;flex-wrap:wrap}
  .lp-footer__cp{text-align:center}
  .lp-footer__sup{text-align:center;margin-left:auto;margin-right:auto}
}
@media (max-width:480px){
  body{font-size:17px}
  .lp-wrap{width:min(100% - 32px,var(--wrap))}
  .lp-form-card{padding:24px 18px}
}
@media (max-height:500px) and (orientation:landscape){
  .lp-hero__in{padding-top:22px;padding-bottom:26px}
}

/* touch devices: 14px text floor and 44px tap targets.
   NEVER put `display` in this block — it resurrects width-hidden elements. */
@media (hover:none) and (pointer:coarse){
  .lp-band{background-attachment:scroll}
  button,input[type="submit"],input[type="button"]{font-size:14px}
  .lp-btn,a.lp-btn,button.lp-btn,.lp-tlink{font-size:14px;min-height:44px;box-sizing:border-box}
  .lp-nav a,.lp-header__tel,.lp-faq__q{font-size:14px;min-height:44px}
  .lp-eyebrow,.lp-trustbar li,.lp-hero__meta li,.lp-hero__cred,.lp-quote__label,
  .lp-quotes figcaption,.lp-cline b,
  .lp-footer__cp,.lp-footer__sup,.lp-form-note{font-size:.88rem}
  a[href^="tel:"],a[href^="mailto:"]{min-height:44px;padding:10px 0;box-sizing:border-box}
  .wpforms-container .wpforms-field-label,
  .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;height:auto !important}
}
@media (prefers-reduced-motion:reduce){
  .lp-band{background-attachment:scroll}
  .lp-step,.lp-step.is-on{transition:none;transform:none}
  .lp-rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .lp-faq__a,.lp-faq__m{transition:none}
}