/* =====================================================================
   Summit View Counseling — landing page (page-landing-summit.php)
   Self-contained: the main site's client.css is NOT loaded here, so this
   file carries its own tokens, reset, header, footer and WPForms tokens.
   Design language deliberately mirrors the main site: Yeseva One display,
   Inter body, Space Grotesk nav, canyon/lake/dawn palette, hanging logo
   placard, photo hero under a radial scrim, dark Lake valley band.
   Fonts are @font-face'd in the template head (absolute URLs — this file
   gets inlined, where relative url()s break).
   ===================================================================== */

:root{
  --canyon:#C17A47;--canyon-deep:#A4622F;--canyon-glow:#E7A86E;
  --lake:#4A6B73;--lake-deep:#2E454B;--lake-night:#1E2E33;
  --sage:#8BA360;
  --dawn:#FAF8F5;--dawn-gold:#FBF1E3;--cream:#FAF2E7;
  --earth:#2D2A26;--earth-soft:#5A544C;
  --predawn:#EDEFEF;
  --line:rgba(45,42,38,.12);
  --maxw:1180px;
  --head-h:92px;
  --mast-drop:clamp(20px,3vw,28px);
  /* WPForms brand tokens — read by tpa-base's fleet-wide form hook. client.css
     defines these for the main site; the LP never loads it, so without this
     block WPForms 2.0 renders its default green submit button. */
  --form-field-bg:#fff;
  --form-field-border:rgba(45,42,38,.18);
  --form-field-text:var(--earth);
  --form-label:var(--earth-soft);
  --form-label-sub:rgba(45,42,38,.55);
  --form-required:var(--canyon-deep);
  --form-radius:3px;
  --form-focus:var(--canyon);
  --form-focus-ring:rgba(193,122,71,.16);
  --form-btn-bg:var(--canyon);
  --form-btn-text:#fff;
  --form-btn-bg-hover:var(--canyon-deep);
  --form-btn-text-hover:#fff;
  --form-btn-radius:2px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body.lp-summit{font-family:'Inter',system-ui,sans-serif;color:var(--earth);background:var(--dawn);line-height:1.72;font-size:1.02rem;-webkit-font-smoothing:antialiased;overflow-x:clip}
.lp-summit h1,.lp-summit h2,.lp-summit h3,.lp-summit h4{font-family:'Yeseva One',Georgia,serif;font-weight:400;line-height:1.12}
.lp-summit p{text-wrap:pretty}
.lp-summit img{display:block;max-width:100%}
.lp-summit a{color:inherit;text-decoration:none}
.lps-wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.2rem,4vw,2.6rem)}
.lps-center{text-align:center;margin-top:2.4rem}
.lps-body p{margin-bottom:1.05rem}
/* Subheadings inside body copy (the <h3>s an author writes into lp_pain_body /
   lp_authority_body). The global reset zeroes all margins and nothing put these
   back, so the paragraph beneath sat flush against the heading. */
.lps-body h3{font-size:1.2rem;margin:1.9rem 0 1rem}
.lps-body h3:first-child{margin-top:0}
.lps-body h4{font-size:1.05rem;margin:1.4rem 0 .6rem}
.lps-body h4:first-child{margin-top:0}

.lps-body p:last-child{margin-bottom:0}

/* buttons — no hover hop, colour/veil only */
.lps-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.55rem;
  font-weight:600;font-size:.95rem;padding:.8rem 1.5rem;border-radius:2px;cursor:pointer;
  border:1.5px solid transparent;transition:background .3s,color .3s;min-height:44px}
.lps-btn::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.16);transform:scaleX(0);
  transform-origin:left center;transition:transform .85s cubic-bezier(.22,1,.36,1);z-index:-1}
.lps-btn:hover::after{transform:scaleX(1)}
.lps-btn .arr{transition:transform .35s}
.lps-btn:hover .arr{transform:translateX(4px)}
.lps-btn--primary{background:var(--canyon)}
.lps-btn--primary:hover{background:var(--canyon-deep)}
.lps-btn--light{background:transparent;border-color:rgba(255,255,255,.55)}
.lps-btn--light:hover{background:rgba(255,255,255,.12)}
.lps-btn--ghost{background:transparent;border-color:currentColor}
.lps-btn--ghost:hover{background:rgba(193,122,71,.08)}
/* Colours carry a .lp-summit prefix on purpose. The reset above is
   `.lp-summit a{color:inherit}` at 0-1-1, and a bare `.lps-btn--primary` is
   0-1-0 — the element in the selector wins the tie, so every primary button
   outside a white-text section was rendering earth-on-canyon. Anything here
   that sets a colour on an <a> needs the prefix. See
   feedback_css_specificity_element_count_tiebreak. */
.lp-summit .lps-btn--primary,
.lp-summit .lps-btn--primary:hover,
.lp-summit .lps-btn--light{color:#fff}
.lp-summit .lps-btn--ghost{color:var(--canyon-deep)}
.lp-summit .lps-dual a{color:#fff}
.lp-summit .lps-drawer-phone{color:var(--lake-deep)}
.lp-summit .lps-drawer-phone-btn{color:#fff}
.lp-summit .lps-form-contact a{color:var(--lake-deep)}
.lp-summit .lps-form-contact a:hover{color:var(--canyon-deep)}
/* footer sits on --earth, so its hover lifts toward the glow, not the deep */
.lp-summit .lps-footer-contact a:hover,
.lp-summit .lps-footer-legal a:hover{color:var(--canyon-glow)}

/* ===== MASTHEAD ===== */
.lps-header{position:sticky;top:0;z-index:60;background:rgba(250,242,231,.94);backdrop-filter:blur(12px);
  border-bottom:2px solid var(--canyon)}
.lps-header.is-scrolled{--head-h:66px}
.lps-header-inner{display:flex;align-items:center;gap:1.6rem;min-height:var(--head-h);
  transition:min-height .38s cubic-bezier(.22,.61,.36,1)}
/* hanging logo placard — same board treatment as the main site header */
.lps-brand{position:relative;display:block;flex:1 1 0;height:var(--head-h);
  min-width:calc((var(--head-h) + var(--mast-drop) - 8px)*1.452 + 10px);
  transition:min-width .38s cubic-bezier(.22,.61,.36,1),height .38s cubic-bezier(.22,.61,.36,1)}
.lps-brand img{position:absolute;top:0;left:0;height:calc(var(--head-h) + var(--mast-drop));width:auto;
  max-width:none;display:block;background:var(--cream);padding:3px 4px;border:1px solid var(--line);
  border-top:0;border-bottom:2px solid var(--canyon);border-radius:0 0 2px 2px;
  box-shadow:0 18px 30px -16px rgba(30,46,51,.35);transition:height .38s cubic-bezier(.22,.61,.36,1)}
/* equal 1 1 0 flanks on .lps-brand and .lps-cta are what centre the nav on the
   header midline — same trick as the main site's .brand / .nav-cta pair */
.lps-nav{margin-left:auto;margin-right:auto}
.lps-cta{display:flex;align-items:center;gap:.9rem;flex:1 1 0;min-width:0;justify-content:flex-end}
.lps-nav ul{display:flex;align-items:center;gap:2rem;list-style:none;font-family:'Space Grotesk',sans-serif;white-space:nowrap}
.lps-nav a{font-weight:500;font-size:.93rem;padding:.4rem 0;transition:color .25s}
.lps-nav a:hover{color:var(--canyon-deep)}
.lps-dual{display:flex;flex-direction:column;height:60px;align-self:center;border:1.5px solid var(--canyon);
  border-radius:3px;overflow:hidden;flex-shrink:0;transition:height .38s cubic-bezier(.22,.61,.36,1)}
.lps-header.is-scrolled .lps-dual{height:48px}
.lps-dual a{display:flex;align-items:center;justify-content:center;flex:1;padding:0 22px;white-space:nowrap;
  font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:background .3s}
.lps-dual-top{background:var(--canyon);color:#fff}
.lps-dual-top:hover{background:var(--canyon-deep)}
.lps-dual-bottom{background:var(--lake);color:#fff;text-transform:none;letter-spacing:0;font-size:.86rem}
.lps-dual-bottom:hover{background:var(--lake-deep)}
.lps-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  background:none;border:0;cursor:pointer;flex-shrink:0}
.lps-burger span{display:block;height:2px;width:24px;background:var(--earth);transition:.3s}
.lps-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.lps-burger.is-open span:nth-child(2){opacity:0}
.lps-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* drawer — breakpoint MUST match the burger's, see feedback_drawer_breakpoint_must_match_burger */
.lps-drawer{position:fixed;inset:var(--head-h) 0 auto 0;background:var(--cream);border-bottom:2px solid var(--canyon);
  padding:1.4rem clamp(1.2rem,4vw,2.6rem) 1.8rem;transform:translateY(-120%);transition:transform .35s ease;
  z-index:55;display:none}
.lps-drawer.is-open{transform:translateY(0)}
.lps-drawer ul{list-style:none;display:flex;flex-direction:column;gap:.2rem}
.lps-drawer a{display:block;padding:.85rem 0;font-family:'Space Grotesk',sans-serif;font-weight:500;
  font-size:1.05rem;border-bottom:1px solid var(--line);min-height:44px}
/* .lp-summit prefix required: `.lps-drawer a` is 0-1-1 and sets `padding:.85rem 0`,
   which beats a bare `.lps-drawer-cta` at 0-1-0 and left the button text sitting
   flat against its own edges. */
.lp-summit .lps-drawer-cta,.lp-summit .lps-drawer-phone-btn{margin-top:.9rem;width:100%;
  justify-content:center;text-align:center;padding:.95rem 1.6rem}
.lps-drawer-phone-btn{background:var(--lake);border-color:var(--lake)}
.lps-drawer-phone-btn:hover{background:var(--lake-deep)}
.lps-drawer-phone{font-weight:700;color:var(--lake-deep)}

/* ===== HERO ===== */
/* ~60% of the homepage hero. An LP is not a homepage — the image is a banner
   over the offer, not the whole above-the-fold moment, so the next section
   should be reachable without scrolling past a full viewport of photograph.
   object-position: bottom means the shorter box eats the SKY off the top and
   keeps the ridgeline and the climbers. */
.lps-hero{position:relative;min-height:clamp(506px,68vh,714px);display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;isolation:isolate;overflow:hidden}
.lps-hero picture.bg{position:absolute;inset:0;width:100%;height:100%;z-index:-3}
.lps-hero picture.bg img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.lps-hero::after{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(ellipse 60% 52% at 50% 46%,rgba(30,46,51,.38),rgba(30,46,51,0) 72%),
             linear-gradient(180deg,rgba(30,46,51,.22),rgba(30,46,51,.06) 42%,rgba(30,46,51,.1) 72%,rgba(30,46,51,.72))}
/* 1040, not the 880 the homepage hero uses: LP headlines are full sentences and
   at 880 each sentence wrapped, so a two-sentence headline came out four lines
   deep. The longest EMDR sentence measures 916px unwrapped at 3.3rem, so this
   holds one-sentence-per-line down to roughly a 960px viewport. */
.lps-hero-inner{max-width:1040px;padding:3.5rem 1.2rem 3.9rem}
.lps-eyebrow{display:inline-block;font-weight:900;letter-spacing:.24em;text-transform:uppercase;font-size:.82rem;
  color:#FBEEE0;text-shadow:0 1px 3px rgba(20,32,36,.6),0 3px 16px rgba(20,32,36,.5)}
/* Smaller than the homepage's 7rem on purpose. The homepage H1 is three words
   ("Reach Your Summit"); LP headlines are full sentences, and at 7rem they run
   six lines and swallow the hero. */
.lps-hero h1{font-size:clamp(2.1rem,4.1vw,3.3rem);letter-spacing:.5px;margin:.45rem 0 .85rem;
  text-shadow:0 2px 6px rgba(20,32,36,.45),0 6px 40px rgba(20,32,36,.55)}
.lps-hero-sub{font-size:clamp(1.1rem,2.3vw,1.42rem);max-width:min(660px,92vw);margin:0 auto;color:#f8f3ea;
  line-height:1.3;text-shadow:0 1px 3px rgba(20,32,36,.55),0 3px 18px rgba(20,32,36,.5)}
.lps-hero-ctas{margin-top:1.5rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
/* ===== TRUST STRIPE — its own band under the hero ===== */
.lps-trust{background:var(--cream);border-bottom:1px solid var(--line)}
.lps-trust ul{list-style:none;display:flex;gap:clamp(1.4rem,4vw,3rem);justify-content:center;flex-wrap:wrap;
  padding-top:.95rem;padding-bottom:.95rem;font-size:.92rem;color:var(--earth-soft);font-weight:600;
  letter-spacing:.01em}
.lps-trust li{position:relative;padding-left:1.05rem;white-space:nowrap}
.lps-trust li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--canyon)}

/* ===== SECTIONS ===== */
.lps-section{padding:clamp(3.6rem,8vw,6rem) 0}
.lps-section--dawn{background:var(--dawn-gold)}
.lps-section--lake{background:var(--predawn)}
.lps-section-head{max-width:52ch;margin:0 auto clamp(2.4rem,5vw,3.4rem);text-align:center}
.lps-section-head h2,.lps-split-text h2,.lps-about-text h2,.lps-faq-head h2{
  font-size:clamp(1.7rem,3.6vw,2.5rem);margin-bottom:.9rem}
.lps-section-head p{color:var(--earth-soft)}

/* ===== PROBLEM — the valley ===== */
.lps-valley{background:var(--lake-night);color:#cdd8d8;padding:clamp(3.6rem,8vw,6rem) 0}
.lps-valley-h{color:#fff;font-size:clamp(1.8rem,4vw,2.7rem);text-align:center;max-width:22ch;margin:0 auto clamp(2.4rem,5vw,3.4rem)}
.lps-valley-grid{display:grid;grid-template-columns:1fr 380px;gap:clamp(2rem,5vw,3.6rem);align-items:start}
.lps-valley-copy{color:#cdd8d8}
/* dashed trail down the symptom list — per-item segments, never one container
   span (see feedback_waypoint_rail_segments_not_container_span) */
.lps-trail{list-style:none;margin:2rem 0 0;padding-left:2.4rem}
.lps-trail li{position:relative;padding:.75rem 0 .75rem 0;color:#e4ecec}
/* z-index matters here: ::after paints after ::before by default, so without it
   the dashed rail drew straight over the dot's opaque fill and read as passing
   through the circle. Dot above, rail below — no dashes inside any circle. */
.lps-trail li::before{content:"";position:absolute;left:-2.4rem;top:calc(.75rem + .86em);width:11px;height:11px;border-radius:50%;
  border:2px solid var(--canyon-glow);background:var(--lake-night);transform:translate(-50%,-50%);z-index:1}
.lps-trail li:not(:last-child)::after{content:"";position:absolute;left:-2.4rem;top:calc(.75rem + .86em);bottom:calc(-.75rem - .86em);width:2px;
  background:repeating-linear-gradient(var(--canyon-glow) 0 6px,transparent 6px 12px);opacity:.5;transform:translateX(-50%);z-index:0}
.lps-valley-close{margin-top:2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);color:#fff;
  font-size:1.08rem}
.lps-valley-visual{position:relative}
.lps-valley-visual img{width:100%;height:auto;border-radius:3px}
.lps-floater{position:absolute;left:-1.2rem;bottom:-1.2rem;max-width:16rem;background:var(--cream);color:var(--earth);
  padding:1rem 1.15rem;border-left:3px solid var(--canyon);font-size:.95rem;line-height:1.5;
  box-shadow:0 20px 40px -22px rgba(0,0,0,.6)}

/* ===== SPLIT (solution / about) ===== */
/* stretch, not center: the image column has to match the text column's height
   or the section reads as a small picture floating beside a wall of copy —
   see feedback_svc_image_matches_text_height */
.lps-split{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:clamp(2rem,5vw,3.6rem);align-items:stretch}
.lps-split-img{position:relative;min-height:100%}
.lps-split-img img{width:100%;height:100%;min-height:320px;object-fit:cover;border-radius:3px}
.lps-float{position:absolute;right:-1.2rem;bottom:-1.4rem;max-width:15rem;background:var(--lake-night);color:#e4ecec;
  padding:1rem 1.15rem;border-left:3px solid var(--canyon-glow);font-size:.94rem;line-height:1.5;
  box-shadow:0 20px 40px -22px rgba(0,0,0,.5)}
.lps-float-label{display:block;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.7rem;
  color:var(--canyon-glow);margin-bottom:.35rem}
.lps-analogy{margin:1.6rem 0;padding-left:1.2rem;border-left:3px solid var(--canyon);font-style:italic;
  color:var(--earth-soft)}
.lps-benefits-intro{margin-top:1.4rem;font-weight:600}
.lps-benefits{list-style:none;margin:1rem 0 1.8rem}
.lps-benefits li{position:relative;padding:.5rem 0 .5rem 1.6rem}
.lps-benefits li::before{content:"";position:absolute;left:0;top:1.15em;width:8px;height:8px;border-radius:50%;
  background:var(--sage)}
.lps-benefits strong{display:block;font-weight:700}

/* ===== PROCESS — the route ===== */
.lps-route{list-style:none;display:grid;gap:1.4rem;max-width:840px;margin:0 auto;padding-left:2.6rem}
.lps-route-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:1.5rem 1.6rem}
/* Marker sits at 50% of its OWN card, so it stays on the card's midline no
   matter how tall that card runs. Fill is --predawn (the process band's own
   background), not transparent, so the dashed rail is masked behind the circle
   rather than showing through it; the cycle swaps that fill to canyon. */
.lps-route-step::before{content:"";position:absolute;left:-2.6rem;top:50%;width:13px;height:13px;border-radius:50%;
  border:2px solid var(--canyon);background:var(--predawn);transform:translate(-50%,-50%);z-index:1}
/* Rail is drawn per step but the segments abut, so it reads as one dashed line
   from the first marker to the last — per-item segments, never a container span
   (feedback_waypoint_rail_segments_not_container_span). First step starts at its
   own marker, last step stops at its marker, middles span the full gap. */
.lps-route-step::after{content:"";position:absolute;left:-2.6rem;width:2px;
  background:repeating-linear-gradient(var(--canyon) 0 6px,transparent 6px 12px);opacity:.45;
  transform:translateX(-50%);z-index:0}
.lps-route-step::after{top:0;height:calc(100% + 1.4rem)}
.lps-route-step:first-child::after{top:50%;height:calc(50% + 1.4rem)}
.lps-route-step:last-child::after{top:0;height:50%}
.lps-route-step:first-child:last-child::after{display:none}
.lps-route-step h3{font-size:1.25rem;margin-bottom:.5rem}
.lps-route-step .lps-body{color:var(--earth-soft)}

/* ===== ABOUT ===== */
.lps-about{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:clamp(2rem,5vw,3.4rem);align-items:start}
.lps-portrait{position:relative}
.lps-portrait::before{content:"";position:absolute;inset:14px -14px -14px 14px;border:2px solid var(--canyon);
  border-radius:3px;z-index:0}
.lps-portrait img{position:relative;z-index:1;width:100%;height:auto;border-radius:3px}
.lps-creds{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 1.2rem}
.lps-creds li{font-size:.82rem;font-weight:600;letter-spacing:.04em;padding:.3rem .7rem;border-radius:2px;
  background:rgba(193,122,71,.1);color:var(--canyon-deep)}
.lps-signature{margin-top:1.4rem;font-family:'Yeseva One',Georgia,serif;font-size:1.3rem;color:var(--canyon-deep)}
.lps-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.4rem;
  margin-top:clamp(2.4rem,5vw,3.6rem)}
.lps-pillar{background:#fff;border:1px solid var(--line);border-top:3px solid var(--canyon);border-radius:3px;
  padding:1.5rem 1.4rem}
.lps-pillar h3{font-size:1.15rem;margin-bottom:1rem}
.lps-pillar p{color:var(--earth-soft);font-size:.97rem}

/* ===== FAQ ===== */
.lps-faq-grid{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:clamp(2rem,5vw,3.4rem);align-items:start}
.lps-faq-head p{color:var(--earth-soft);margin-bottom:1.4rem}
.lps-faq-item{border-bottom:1px solid var(--line);padding:.2rem 0}
.lps-faq-item summary{cursor:pointer;list-style:none;padding:1.05rem 2rem 1.05rem 2.2rem;position:relative;
  font-weight:600;font-size:1.02rem;min-height:44px}
.lps-faq-item summary::-webkit-details-marker{display:none}
/* padding-top (1.05rem) + half a line (.86em) puts the marker on the optical
   centre of the QUESTION'S FIRST LINE. The old flat 1.55em sat 5.5px high and
   read as misaligned, worse on two-line questions. */
.lps-faq-item summary::before{content:"";position:absolute;left:.5rem;top:calc(1.05rem + .86em);width:11px;height:11px;
  border-radius:50%;border:2px solid var(--canyon);background:transparent;transform:translateY(-50%)}
.lps-faq-item[open] summary::before{background:var(--canyon)}
.lps-faq-item summary::after{content:"";position:absolute;right:.4rem;top:calc(1.05rem + .86em);width:8px;height:8px;
  border-right:2px solid var(--canyon-deep);border-bottom:2px solid var(--canyon-deep);
  transform:translateY(-50%) rotate(45deg);transition:transform .25s}
.lps-faq-item[open] summary::after{transform:translateY(-50%) rotate(-135deg)}
.lps-faq-a{padding:0 2rem 1.2rem 2.2rem;color:var(--earth-soft)}
.lps-faq-a p{margin-bottom:.9rem}
.lps-faq-a p:last-child{margin-bottom:0}

/* ===== WHAT'S NEXT — sunrise band ===== */
.lps-summit{padding:clamp(3.6rem,8vw,6rem) 0;text-align:center;
  background:linear-gradient(180deg,var(--lake-night) 0%,#4A3F44 42%,var(--canyon-deep) 100%);color:#fff}
.lps-summit h2{font-size:clamp(1.8rem,4vw,2.7rem);max-width:20ch;margin:0 auto}
.lps-summit-lead{max-width:56ch;margin:1.1rem auto 0;color:#f6e9dc}
.lps-summit-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem;
  margin-top:clamp(2.2rem,5vw,3.2rem);text-align:left}
.lps-summit-step{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:3px;
  padding:1.4rem 1.3rem}
.lps-summit-step h3{font-size:1.12rem;margin-bottom:.45rem;color:#fff}
.lps-summit-step p{color:#f1e4d8;font-size:.97rem}

/* ===== FORM ===== */
.lps-form{padding:clamp(3.6rem,8vw,6rem) 0;background:var(--dawn)}
.lps-form-grid{display:grid;grid-template-columns:1fr minmax(0,480px);gap:clamp(2rem,5vw,3.6rem);align-items:start}
.lps-form-copy h2{font-size:clamp(1.7rem,3.6vw,2.5rem);margin-bottom:1rem}
.lps-form-copy .lps-body{color:var(--earth-soft)}
.lps-form-detail{margin-top:1.2rem;padding-left:1.1rem;border-left:3px solid var(--sage);color:var(--earth-soft)}
.lps-form-contact{list-style:none;margin-top:1.6rem;display:grid;gap:.5rem;font-weight:600}
.lps-form-contact a{color:var(--lake-deep);min-height:44px;display:inline-flex;align-items:center}
.lps-form-contact a:hover{color:var(--canyon-deep)}
.lps-form-card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--canyon);border-radius:3px;
  padding:clamp(1.6rem,3vw,2.2rem);box-shadow:0 26px 60px -34px rgba(30,46,51,.5)}
.lps-form-card h3{font-size:1.4rem;margin-bottom:.4rem}
.lps-form-card-sub{color:var(--earth-soft);font-size:.95rem;margin-bottom:1.2rem}


.lps-pillars-h{font-size:clamp(1.7rem,3.6vw,2.5rem);text-align:center;max-width:22ch;
  margin:0 auto clamp(1.8rem,4vw,2.6rem)}
/* the form's assurance block, fed from lp_form_detail so the client owns the words */
.lps-form-detail h4{font-size:1.02rem;margin-bottom:.25rem}
.lps-form-detail p{margin-bottom:.9rem;font-size:.97rem}
.lps-form-detail p:last-child{margin-bottom:0}
.lps-form-detail ol{margin:.4rem 0 0 1.1rem}
.lps-form-detail li{margin-bottom:.45rem}


/* ===== ROUTE STEP CYCLE =====
   Marker and card light up together, one step at a time, then repeat — the
   same staggered-delay pattern the recent LPs use (one shared cycle, each
   step offset by cycle/steps). 3 steps x 3.5s. */
@keyframes lpsRouteDot{
  0%,3%    {background:var(--predawn);transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 0 rgba(193,122,71,0)}
  9%,28%   {background:var(--canyon);transform:translate(-50%,-50%) scale(1.28);box-shadow:0 0 0 7px rgba(193,122,71,.15)}
  34%,100% {background:var(--predawn);transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 0 rgba(193,122,71,0)}
}
@keyframes lpsRouteCard{
  0%,3%    {border-color:var(--line);box-shadow:0 0 0 rgba(30,46,51,0)}
  9%,28%   {border-color:rgba(193,122,71,.55);box-shadow:0 18px 38px -26px rgba(30,46,51,.5)}
  34%,100% {border-color:var(--line);box-shadow:0 0 0 rgba(30,46,51,0)}
}
.lps-route-step{animation:lpsRouteCard 10.5s ease-in-out infinite}
.lps-route-step::before{animation:lpsRouteDot 10.5s ease-in-out infinite}
.lps-route-step:nth-child(2),.lps-route-step:nth-child(2)::before{animation-delay:3.5s}
.lps-route-step:nth-child(3),.lps-route-step:nth-child(3)::before{animation-delay:7s}
/* Scoped to these two animations only — a blanket motion reset would also kill
   the nav hover grace period, see
   feedback_reduced_motion_blanket_reset_kills_hover_dropdowns */
@media (prefers-reduced-motion: reduce){
  .lps-route-step,.lps-route-step::before{animation:none}
}

/* ===== ASSURANCES — own full-width row beneath the form + its copy ===== */
.lps-assurances{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);
  max-width:1080px;margin:clamp(2.4rem,5vw,3.4rem) auto 0;padding-top:clamp(1.8rem,4vw,2.4rem);
  border-top:1px solid var(--line)}
.lps-assurance h3{font-size:1.12rem;margin-bottom:.4rem}
.lps-assurance p{color:var(--earth-soft);font-size:.97rem}
@media(max-width:768px){.lps-assurances{grid-template-columns:1fr}}

/* ===== FOOTER ===== */
.lps-footer{background:var(--earth);color:rgba(250,248,245,.78);padding:clamp(2.6rem,5vw,3.6rem) 0 2rem}
.lps-footer-top{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;
  padding-bottom:1.6rem;border-bottom:1px solid rgba(250,248,245,.14)}
.lps-footer-logo{background:var(--cream);padding:6px 8px;border-radius:2px;height:auto}
.lps-footer-contact{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-weight:600}
.lps-footer-contact a{min-height:44px;display:inline-flex;align-items:center}
.lps-footer-contact a:hover{color:var(--canyon-glow)}
.lps-footer-disclosure{margin:1.4rem 0;font-size:.9rem;line-height:1.6;color:rgba(250,248,245,.66);max-width:70ch}
.lps-footer-base{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:1.2rem;border-top:1px solid rgba(250,248,245,.14);font-size:.85rem}
.lps-footer-legal{display:flex;gap:1.2rem;flex-wrap:wrap}
.lps-footer-legal a:hover{color:var(--canyon-glow)}

/* ===== RESPONSIVE ===== */
@media(max-width:980px){
  .lps-nav{display:none}
  .lps-burger{display:flex}
  .lps-drawer{display:block}
  .lps-valley-grid,.lps-split,.lps-about,.lps-faq-grid,.lps-form-grid{grid-template-columns:1fr}
  .lps-split-img{order:-1}
  .lps-floater,.lps-float{position:static;max-width:none;margin-top:1rem;box-shadow:none}
}
@media(max-width:768px){
  :root{--head-h:68px}
  .lps-header.is-scrolled{--head-h:54px}
  /* brand keeps its reserved footprint at desktop widths so the nav centres,
     but on a phone that min-width plus the dual box plus the burger overruns
     352px of usable header — the burger was clipping off the right edge. */
  .lps-header-inner{gap:.7rem}
  .lps-brand{min-width:0;flex:none;width:96px}
  .lps-dual{height:48px}
  .lps-dual a{padding:0 12px;font-size:.72rem}
  .lps-dual-bottom{font-size:.8rem}
  .lps-hero{min-height:clamp(446px,62vh,624px)}
  .lps-hero-inner{padding:2.8rem 1rem 3.2rem}
  .lps-hero-ctas .lps-btn{width:100%;justify-content:center}
  /* Header CTA moves into the drawer on a phone. */
  .lps-dual{display:none}
  .lps-burger{position:relative;top:4px}
  /* more air around the hero copy */
  .lps-hero-inner{padding:3.4rem 1rem 3.8rem}
  .lps-hero h1{margin:.7rem 0 1.1rem}
  .lps-hero-ctas{margin-top:1.9rem;gap:.8rem}
  .lps-trust ul{padding-top:1.1rem;padding-bottom:1.1rem}
  .lps-trail,.lps-route{padding-left:2rem}
  /* :not(:last-child) was dropped from the route rail when it became a
     three-part segment set, so the old override missed the LAST step and its
     dashes sat 0.6rem off to the left of the others. Target ::after flat. */
  .lps-trail li::before,.lps-route-step::before,
  .lps-trail li:not(:last-child)::after,.lps-route-step::after{left:-2rem}
  /* one body image per LP on a phone — the second is decorative repetition */
  .lps-split-img{display:none}
  .lps-portrait::before{inset:10px -10px -10px 10px}
  .lps-footer-top,.lps-footer-base{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  /* 14vw overflowed the viewport on a 390px phone — a long pair like "Yourself
     Again" ran wider than the container, which then dragged the 100%-width CTAs
     out with it. Cap the type and let long words break rather than push. */
  .lps-hero h1{font-size:clamp(1.75rem,7.6vw,2.4rem);letter-spacing:0;overflow-wrap:break-word}
  .lps-summit-steps{grid-template-columns:1fr}
}

/* ===== TOUCH-DEVICE ACCESSIBILITY — DO NOT REMOVE =====
   Desktop fine print stays small; on touch it must clear 14px. Use hover/pointer,
   NOT max-width — iPad Pro 11 landscape is 1194px and still a touch device. */
@media (hover:none) and (pointer:coarse){
  button{font-size:1rem}
  .lps-eyebrow,.lps-dual a,.lps-creds li,.lps-float-label,.lps-footer-base,
  .lps-footer-disclosure,.lps-form-card-sub,.lps-pillar p,
  .lps-summit-step p,.lps-floater,.lps-float,.lps-trust ul{font-size:.88rem}
  .lps-btn{font-size:1rem}
  /* iPad Mini landscape (1024) still shows the dual CTA and is a touch device,
     so each half has to clear 44px on its own — which makes the box ~88px, so
     the header stops compressing on touch. Same reasoning as the main site. */
  /* nav links too: 34px tall and "FAQ" only 29px wide */
  .lps-nav a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  .lps-dual{height:auto}
  .lps-dual a{min-height:44px}
  .lps-header.is-scrolled{--head-h:92px}
  .lps-header.is-scrolled .lps-dual{height:auto}
  /* footer legal pair were 24px tall */
  .lps-footer-legal a,.lps-footer-contact a{min-height:44px;display:inline-flex;align-items:center}
  .lps-nav a,.lps-drawer a,.lps-faq-item summary{font-size:1rem}
  .lp-summit .wpforms-field-label,
  .lp-summit .wpforms-field-sublabel{font-size:.88rem!important}
}

/* ===== LP OVERFLOW GUARD — DO NOT REMOVE =====
   A single long display word is enough to widen a container past the viewport
   and drag the 100%-width CTAs with it. Handle that with overflow-wrap ONLY.
   Do NOT add `.lps-wrap{max-width:100%}` here: this block sits after the base
   rules, so a 100% cap wins on source order and silently defeats the 1180px
   container — which is exactly how these containers went full-bleed. */
body.lp-summit{max-width:100vw}
.lps-hero h1,.lps-hero-sub,.lps-valley-h,.lps-summit h2,
.lps-split-text h2,.lps-faq-head h2,.lps-form-copy h2{overflow-wrap:break-word}

/* ===== CONTENT MEASURES — match the main site =====
   .lps-wrap is the same 1180px shell as the site's .wrap, but the site never
   runs body copy the full width of it: .service-body caps at 1080, .trail at
   1020, .summit .wrap at 920, and the reading columns land around 508-533px.
   Without these the LP set 900px+ lines of text next to the site's ~520px. */
.lps-valley-grid{max-width:1020px;margin-left:auto;margin-right:auto}
.lps-split,.lps-about,.lps-faq-grid,.lps-form-grid,.lps-pillars{max-width:1080px;margin-left:auto;margin-right:auto}
.lps-summit .lps-wrap{max-width:920px}
.lps-summit-lead{max-width:62ch}
.lps-section-head{max-width:52ch}
/* single-column body copy still needs a measure cap */
.lps-route-step .lps-body,.lps-about-text .lps-body,.lps-form-copy .lps-body{max-width:66ch}