/* ============================================================ KERSTIN FLASHNER, LPCC — "New Template — August 2026" LANDING PAGE The LP's conversion structure in the SITE's own design language (Crimson Pro / Hanken Grotesk, sage/terracotta/cream palette). Re-skinned from the tpa-warrenphillips "Compass" pattern, itself adapted from tpa-angelashuey's "page-landing-emdr" pattern. Self-contained on purpose: page-landing-newtemplate.php owns its own and client.css is never enqueued here, so this file carries its own reset, tokens, touch block and landscape condition. Validator Checks 18 and 32 test this file separately for exactly that reason. ============================================================ */ :root{ --ink:#1F1F23; --paper:#F5F4F0; --s0:#515B55; --s7:#EFEEEA; --amber:#C47B5A; --amber-light:#D79A78; --on-dark:#F5F4F0; --on-dark-soft:#E8E8E8; --on-dark-accent:#D79A78; --tint-a:#F5F4F0; --tint-b:#EFEEEA; --fh:'Crimson Pro',Georgia,serif; --fb:'Hanken Grotesk',-apple-system,sans-serif; --wrap:1180px; --r:2px; --pad:clamp(3.2rem,6vw,5.4rem); --hdr-h:88px; /* Parent theme's #tpa-wpforms-brand style is injected unconditionally in wp_head at priority 100 — after this stylesheet's — so it wins any cascade tie on the shared .wpforms-form/.wpforms-submit selectors. It's token-driven (var(--form-btn-bg, var(--accent, ...#2d6e5e))) specifically so a page like this one, which never defines --accent/ --primary, doesn't fall through to its teal default. Defining the --form-* tokens here (CHILD CONTRACT, tpa-base functions.php) makes the late-loaded override resolve to this page's own amber palette instead. */ --form-field-bg:transparent; --form-field-border:rgba(251,250,246,.3); --form-field-text:var(--paper); --form-label:var(--amber-light); --form-required:var(--amber); --form-focus:var(--amber-light); --form-radius:0; --form-btn-bg:var(--amber); --form-btn-bg-hover:var(--amber-light); --form-btn-text:var(--paper); --form-btn-radius:2px; } *,*::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(--paper);color:var(--ink); font:400 1.0625rem/1.72 var(--fb);text-wrap:pretty;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} picture{display:contents} picture>source{display:none} h1,h2,h3,h4{font-family:var(--fh);text-wrap:balance;margin:0;font-weight:600} p{margin:0 0 1.05em} p:last-child{margin-bottom:0} a{color:inherit} a[href^="tel:"],a[href^="mailto:"]{text-decoration:none} :focus-visible{outline:2px solid var(--ink);outline-offset:3px} .lp-wrap{width:min(100% - 2.6rem,var(--wrap));margin-inline:auto} .lp-narrow{width:min(100% - 2.6rem,760px);margin-inline:auto} .lp-sec{padding:var(--pad) 0} .cbar{position:relative;overflow:hidden} .cbar img{position:absolute;top:0;left:0;width:100%;height:110.5%;object-fit:cover; object-position:center 50%} /* ---------- buttons ------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.85em; font:700 .78rem/1 var(--fh);letter-spacing:.1em;text-transform:uppercase; text-decoration:none;padding:1.15rem 2.1rem;border-radius:var(--r); border:1.5px solid transparent;position:relative; transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease} .btn::after{content:"";flex:0 0 auto;width:1.55em;height:1.5px;background:currentColor; opacity:.62;transition:opacity .3s ease} .btn:hover::after,.btn:focus-visible::after{opacity:1} .btn-amber{background:var(--amber);color:var(--paper)} .btn-amber:hover,.btn-amber:focus-visible{background:#71592E;box-shadow:0 8px 22px rgba(139,115,64,.4)} .btn-line{background:transparent;color:var(--ink);border-color:rgba(31,42,46,.35)} .btn-line:hover,.btn-line:focus-visible{background:var(--ink);color:#fff;border-color:var(--ink)} .btn-onDark{background:var(--paper);color:var(--ink)} .btn-onDark:hover,.btn-onDark:focus-visible{background:var(--amber-light);box-shadow:inset 0 0 0 2px rgba(24,31,34,.25)} /* ---------- header -------------------------------------------------------- */ /* Restyled to match the main site's header (client.css `header`/`.wordmark`/ `.main-nav`) — light translucent-cream bar, ink-colored text, understated hover states — instead of the LP's original dark-charcoal chrome, so a visitor landing here from the homepage sees one continuous practice. */ .lp-hdr{position:sticky;top:0;z-index:80;background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid rgba(31,31,35,.1);transition:box-shadow .35s ease,background-color .35s ease} .lp-hdr.stuck{background:var(--paper);box-shadow:0 1px 18px rgba(0,0,0,.08)} .lp-hdr-in{display:flex;align-items:center;gap:1.1rem;min-height:var(--hdr-h)} .lp-brand{display:flex;align-items:center;gap:.6em;flex:0 0 auto;min-width:0;text-decoration:none;color:var(--ink)} .lp-brand-mark{height:1.9em;width:auto;flex:none;display:block} .lp-brand-text{font-family:var(--fh);font-weight:500;font-size:15.5px;letter-spacing:.01em;line-height:1.2;white-space:nowrap} .lp-brand-text span{display:inline;font-family:var(--fb);font-weight:600;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--s0);margin-left:.35em;vertical-align:super} .lp-nav{display:flex;align-items:center;justify-content:center;gap:clamp(.6rem,1.6vw,1.6rem); flex:1 1 auto;min-width:0} .lp-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px; padding:0 .3rem;text-decoration:none;color:var(--s0); font:500 .92rem/1 var(--fb);letter-spacing:normal;text-transform:none; transition:color .3s} .lp-nav a:hover,.lp-nav a:focus-visible{color:var(--ink)} .lp-hdr-cta{display:flex;align-items:center;gap:1.1rem;flex:0 0 auto} .lp-tel{display:flex;flex-direction:column;gap:.2rem;min-height:44px;justify-content:center; text-decoration:none;white-space:nowrap} .lp-tel-lbl{font:700 .63rem/1 var(--fh);letter-spacing:.1em;text-transform:uppercase;color:var(--amber)} .lp-tel-num{display:flex;align-items:center;gap:.44rem;font:700 1.05rem/1.15 var(--fh);color:var(--ink)} .lp-tel-num svg{flex:0 0 auto;stroke:var(--amber)} .lp-tel:hover .lp-tel-num{color:var(--amber)} /* Matches the main site's nav CTA (.btn in client.css): clipped-corner shape, sentence case, no underline-dash accent — same button language as the rest of the site instead of the LP's own generic pill/rect style. */ .lp-hdr-btn{ padding:1rem 1.4rem; font-family:var(--fb); font-size:.85rem; font-weight:600; letter-spacing:.01em; text-transform:none; border-radius:0; clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px); } .lp-hdr-btn::after{ display:none } /* ---------- hero ---------------------------------------------------------- */ .lp-hero{position:relative;min-height:clamp(34rem,76vh,44rem);display:flex;align-items:center; padding:clamp(3rem,5vw,4.4rem) 0;overflow:hidden;background:var(--s0)} .lp-hero-bg{position:absolute;inset:0} .lp-hero-bg img{filter:saturate(1.05) contrast(1.02)} .lp-hero::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to bottom,rgba(24,31,34,.4) 0,rgba(24,31,34,.1) 26%, rgba(24,31,34,.1) 74%,rgba(24,31,34,.55) 100%)} .lp-hero .lp-wrap{position:relative;z-index:2} .lp-hero-plate{background:var(--paper);border-radius:var(--r);border:1px solid rgba(24,31,34,.1); width:fit-content;max-width:min(100%,40rem); padding:clamp(2.1rem,3vw,2.7rem) clamp(2rem,2.8vw,2.7rem); box-shadow:0 34px 70px -22px rgba(0,0,0,.5),0 3px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.85)} .lp-hero-plate .flog{margin-bottom:14px} .lp-hero-plate h1{font-size:clamp(1.9rem,3.9vw,3rem);line-height:1.1;letter-spacing:-.01em; color:var(--ink);margin-bottom:.6rem} .lp-hero-answer{font-family:var(--fh);font-weight:600;font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.25; color:var(--ink);margin-bottom:.9rem} .lp-hero-sub{font-size:clamp(1rem,1.25vw,1.08rem);line-height:1.6;color:#5E6D64; margin-bottom:1.6rem} .lp-hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:1.3rem} .lp-hero-tel{display:flex;flex-direction:column;gap:.15rem;text-decoration:none} .lp-hero-tel-lbl{font:700 .66rem/1 var(--fh);letter-spacing:.13em;text-transform:uppercase;color:#5E6D64} .lp-hero-tel-num{font:700 1.1rem/1.15 var(--fh);color:var(--ink)} .lp-hero-tel:hover .lp-hero-tel-num{color:var(--amber)} /* ---------- field-log kicker (matches main-site .flog) --------------------- */ .flog{font-family:var(--fh);font-weight:600;font-size:11.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--amber);display:flex;align-items:center;gap:9px} .flog::before{content:"";width:20px;height:1px;background:currentColor;opacity:.6} /* ---------- trust badges -------------------------------------------------- */ .lp-badges{background:var(--s0);padding:1.05rem 0} .lp-badges-in{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,3vw,2.6rem)} .lp-badge{display:inline-flex;align-items:center;gap:.55rem; font:700 .7rem/1.4 var(--fh);letter-spacing:.1em;text-transform:uppercase; color:#E8E8E8} .lp-badge svg{flex:0 0 auto;stroke:var(--amber-light)} /* ---------- split sections ------------------------------------------------ */ .lp-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,4vw,3.6rem);align-items:center} .lp-split--rev .lp-split-text{order:2} .lp-split--rev .lp-split-img{order:1} .lp-split-text h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.14;letter-spacing:-.01em; color:var(--ink);margin-bottom:1rem} .lp-split-text p{font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.75;color:#3C4A47;max-width:60ch} .lp-split-img{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3; box-shadow:0 2px 3px rgba(24,31,34,.05),0 20px 48px -26px rgba(24,31,34,.36)} .lp-problem{background:var(--tint-a)} .lp-solution{background:var(--tint-b)} .lp-pull{font-family:var(--fh);font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.42; color:var(--ink);margin-top:1.3rem;max-width:36ch} /* ---------- solution benefits ---------------------------------------------- */ .lp-benefits-intro{max-width:66ch;margin-bottom:1.6rem} .lp-benefits-intro h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.14;letter-spacing:-.01em; color:var(--ink);margin-bottom:1rem} /* matches .lp-split-text h2 exactly */ .lp-benefits-intro p{color:#3C4A47;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.75} .lp-benefit-list{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:1fr 1fr;gap:.9rem} .lp-benefit-list li{position:relative;margin:0; background:var(--paper);border:1px solid rgba(31,42,46,.2);border-radius:var(--r); padding:1.1rem 1.2rem 1.1rem 2.5rem; font-size:clamp(.98rem,1.15vw,1.06rem);line-height:1.6;color:#3C4A47} .lp-benefit-list li::before{content:"";position:absolute;left:1.1rem;top:1.5rem; width:.85rem;height:1.5px;background:var(--amber)} .lp-benefit-close{margin-top:1.6rem;font-family:var(--fh);text-align:center; font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.45;color:var(--ink)} /* ---------- process --------------------------------------------------------- */ .lp-process{background:var(--tint-a)} .lp-sec-head{max-width:60ch;margin-bottom:clamp(2rem,3.4vw,3rem)} .lp-process .lp-sec-head{max-width:none;text-align:center} .lp-sec-head h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.14;color:var(--ink)} .lp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,2.4vw,2.2rem)} .lp-step{background:var(--paper);border-radius:var(--r); padding:clamp(1.8rem,2.4vw,2.3rem);border:1px solid rgba(31,42,46,.16)} .lp-step-n{display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--paper); font:700 .95rem/1 var(--fh);margin-bottom:1rem} .lp-step h3{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.25;color:var(--ink); margin-bottom:.6rem} .lp-step p{font-size:1rem;line-height:1.68;color:#3C4A47} /* ---------- CTA bands ----------------------------------------------------- */ .lp-band{background:var(--amber);padding:clamp(2.6rem,4.4vw,3.8rem) 0;text-align:center} .lp-band--dark{background:var(--s0)} .lp-band-eyebrow{font-family:var(--fh);font-weight:700;font-size:.72rem;letter-spacing:.16em; text-transform:uppercase;color:var(--paper);opacity:.85;margin-bottom:1rem;display:block} .lp-band-h{font-family:var(--fh);font-weight:600;font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.25; color:var(--paper);margin-bottom:.6rem} .lp-band-body{color:var(--paper);opacity:.9;max-width:52ch;margin:0 auto 1.5rem} .lp-band .btn{margin-top:.5rem;background:var(--ink);color:var(--paper);border-color:var(--ink)} .lp-band .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)} .lp-band--dark .btn{background:var(--amber);color:var(--paper);border-color:var(--amber)} .lp-band--dark .btn:hover{background:var(--amber-light);border-color:var(--amber-light)} /* ---------- trust --------------------------------------------------------- */ .lp-trust{background:var(--tint-b)} .lp-trust h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.14;color:var(--ink); margin-bottom:1.6rem} .lp-trust-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem 2.2rem} .lp-trust-item{background:var(--paper);border:1px solid rgba(31,42,46,.14);border-radius:var(--r); padding:1.8rem 1.7rem;box-shadow:0 2px 3px rgba(24,31,34,.04),0 14px 30px -22px rgba(24,31,34,.28)} .lp-trust-item h3{font-size:clamp(1.1rem,1.5vw,1.28rem);line-height:1.3;color:var(--ink); margin-bottom:.45rem} .lp-trust-item p{font-size:1.02rem;line-height:1.7;color:#3C4A47} .lp-portrait{aspect-ratio:auto;box-shadow:none;overflow:visible;text-align:center; max-width:19rem;margin-inline:auto} .lp-portrait picture{position:relative;display:block;isolation:isolate} .lp-portrait picture::before{content:'';position:absolute;top:16px;left:16px;right:-16px; bottom:-16px;background:var(--amber-light);border-radius:var(--r);z-index:0} .lp-portrait img{position:relative;z-index:1;width:100%;height:auto;border-radius:var(--r); box-shadow:0 3px 5px rgba(24,31,34,.1),0 26px 56px -26px rgba(24,31,34,.45)} .lp-portrait-cap{margin-top:.9rem;font:700 .92rem/1.5 var(--fh);letter-spacing:.1em; text-transform:uppercase;color:var(--amber)} .lp-portrait-bio{margin-top:.6rem} .lp-portrait-bio p{font-size:.98rem;line-height:1.65;color:#3C4A47} .lp-portrait-bio p+p{margin-top:.7rem} .lp-trust-portrait{display:flex; flex-direction:row-reverse; align-items:center; justify-content:center; gap:clamp(1.6rem,3.5vw,2.6rem); margin-top:clamp(2.2rem,4vw,3.2rem); background:var(--paper); border:1px solid rgba(31,42,46,.14); border-radius:var(--r); padding:clamp(1.8rem,4vw,2.6rem) clamp(1.8rem,4vw,3rem); box-shadow:0 2px 3px rgba(24,31,34,.04),0 14px 30px -22px rgba(24,31,34,.28)} .lp-portrait--inline{max-width:15rem;flex-shrink:0} .lp-trust-portrait>.lp-portrait-bio{margin-top:0;text-align:left} .lp-trust-portrait>.lp-portrait-bio p{font-size:1.05rem;line-height:1.8;max-width:64ch;margin-inline:0} /* ---------- FAQ ----------------------------------------------------------- */ .lp-faq{background:var(--tint-a)} .lp-faq h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.14;color:var(--ink); margin-bottom:1.6rem} .lp-faq-list{border-top:1px solid rgba(31,42,46,.14)} .lp-faq-row{border-bottom:1px solid rgba(31,42,46,.14)} .lp-faq-q{position:relative;display:flex;align-items:flex-start;gap:1rem;width:100%; background:none;border:0;margin:0;cursor:pointer;text-align:left; padding:clamp(1.3rem,2vw,1.7rem) clamp(.4rem,1.4vw,1.2rem); font-family:var(--fh);font-weight:600;color:var(--ink); font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.3; transition:background-color .42s cubic-bezier(.22,1,.36,1),padding-left .42s} .lp-faq-row.open .lp-faq-q{background:var(--paper);padding-left:clamp(1rem,2.4vw,2rem)} .lp-faq-mark{flex:0 0 auto;width:10px;height:10px;margin-top:.42em; border-right:2px solid var(--amber);border-bottom:2px solid var(--amber); transform:rotate(-45deg);transition:transform .42s cubic-bezier(.22,1,.36,1)} .lp-faq-row.open .lp-faq-mark{transform:rotate(45deg)} .lp-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1)} .lp-faq-row.open .lp-faq-a{grid-template-rows:1fr} .lp-faq-a>div{overflow:hidden} .lp-faq-a-in{padding:0 clamp(.4rem,1.4vw,1.2rem)} .lp-faq-row.open .lp-faq-a-in{padding-top:.9rem;padding-bottom:1.6rem} .lp-faq-a p{font-size:1.03rem;line-height:1.75;color:#3C4A47} /* ---------- form section -------------------------------------------------- */ .lp-form-sec{background:var(--s0);color:var(--on-dark);padding:var(--pad) 0} .lp-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(2rem,3.6vw,3.4rem);align-items:start} .lp-form-copy h2{font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.12;color:var(--paper); margin-bottom:1rem} .lp-form-copy p{color:var(--on-dark-soft);font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.75} .lp-next{margin-top:clamp(1.8rem,2.6vw,2.4rem);padding-top:clamp(1.4rem,2vw,1.9rem); border-top:1px solid rgba(251,250,246,.16)} .lp-next-h{font-family:var(--fh);font-weight:600;font-size:clamp(1.15rem,1.6vw,1.35rem);color:var(--amber-light);margin-bottom:1rem} .lp-next-list{list-style:none;margin:0;padding:0;counter-reset:n;display:grid;gap:.95rem} .lp-next-list li{counter-increment:n;position:relative;padding-left:2.6rem; color:var(--on-dark-soft);font-size:1.02rem;line-height:1.65} .lp-next-list li::before{content:counter(n);position:absolute;left:0;top:.05em; width:26px;height:26px;border-radius:50%;display:grid;place-items:center; border:1px solid var(--amber-light);color:var(--amber-light); font:700 .78rem/1 var(--fh)} .lp-form-card{background:rgba(251,250,246,.055);border:1px solid rgba(251,250,246,.18); border-radius:var(--r);padding:clamp(1.6rem,2.4vw,2.2rem)} .lp-form-card h3{font-family:var(--fh);font-weight:600;font-size:clamp(1.2rem,1.7vw,1.45rem);color:var(--paper);margin-bottom:1.2rem} .lp-form-note{color:var(--on-dark-soft);font-size:.95rem} .lp-assurances{display:grid;grid-template-columns:1fr; gap:1.4rem; margin-top:clamp(2rem,3.2vw,2.8rem);padding-top:clamp(1.5rem,2.2vw,2rem); border-top:1px solid rgba(251,250,246,.16)} .lp-assurance h4{font:700 .72rem/1.4 var(--fh);letter-spacing:.14em;text-transform:uppercase; color:var(--amber-light);margin:0 0 .6rem} .lp-assurance p{color:var(--on-dark-soft);font-size:.98rem;line-height:1.68} /* -------- WPForms styling to match the site's underline field pattern ------ */ .lp-form-card .wpforms-field-label{font-family:var(--fh) !important;font-size:11px !important; letter-spacing:.08em !important;text-transform:uppercase !important;color:var(--amber-light) !important;opacity:1 !important} .lp-form-card .wpforms-form input[type=text], .lp-form-card .wpforms-form input[type=email], .lp-form-card .wpforms-form input[type=tel], .lp-form-card .wpforms-form textarea{ border:none !important;border-bottom:1.5px solid rgba(251,250,246,.3) !important;border-radius:0 !important; background:transparent !important;color:var(--paper) !important;padding:12px 4px !important;box-shadow:none !important} .lp-form-card .wpforms-form input:focus, .lp-form-card .wpforms-form textarea:focus{border-color:var(--amber-light) !important;box-shadow:none !important} .lp-form-card .wpforms-form textarea{min-height:90px !important;resize:vertical !important} .lp-form-card .wpforms-form button.wpforms-submit{ background:var(--amber) !important;color:var(--paper) !important;border:1.5px solid var(--amber) !important; box-shadow:none !important;border-radius:2px !important;width:100%;justify-content:center} .lp-form-card .wpforms-form button.wpforms-submit:hover{background:var(--amber-light) !important;border-color:var(--amber-light) !important} /* ---------- footer -------------------------------------------------------- */ .lp-ftr{background:var(--s0);color:var(--on-dark-soft); padding:clamp(2.2rem,3.4vw,3rem) 0 clamp(1.4rem,2vw,1.9rem); border-top:1px solid rgba(251,250,246,.1);text-align:center} .lp-ftr-brand{display:inline-flex;align-items:center;gap:8px;margin-bottom:1.1rem;color:var(--paper);text-decoration:none} .lp-ftr-brand svg{width:22px;height:22px;color:var(--amber-light)} .lp-ftr-brand span{font-family:var(--fh);font-weight:600;font-size:14px} .lp-ftr-line{font:700 .74rem/1.6 var(--fh);letter-spacing:.12em;text-transform:uppercase; color:var(--amber-light);margin-bottom:.9rem} .lp-ftr-fine{max-width:62ch;margin:0 auto 1.1rem;font-size:.92rem;line-height:1.66; color:var(--on-dark-soft)} .lp-ftr-btm{font-size:.88rem;color:var(--on-dark-soft)} .lp-ftr-btm a{color:var(--on-dark-soft);text-decoration:none} .lp-ftr-btm a:hover{color:var(--paper)} /* ========================================================================== RESPONSIVE — the mobile condition also catches landscape phones, which are ~926px WIDE and clear every max-width:768px gate. ========================================================================== */ @media (max-width:1080px){ .lp-nav{gap:.15rem} .lp-nav a{padding:0 .35rem;font-size:.67rem;letter-spacing:.08em} .lp-hdr-btn{display:none} } @media (max-width:900px){ .lp-split,.lp-form-grid,.lp-benefit-list{grid-template-columns:1fr} .lp-split--rev .lp-split-text,.lp-split--rev .lp-split-img{order:0} .lp-steps{grid-template-columns:1fr} .lp-portrait{max-width:24rem;margin-inline:auto} .lp-trust-portrait{flex-direction:column;text-align:center} .lp-trust-portrait>.lp-portrait-bio{text-align:center} .lp-trust-portrait>.lp-portrait-bio p{margin-inline:auto} .lp-portrait--inline{max-width:16rem;margin-inline:auto} } @media (max-width:768px),(hover:none) and (pointer:coarse) and (max-height:500px){ :root{--pad:clamp(2.6rem,7vw,3.6rem);--hdr-h:72px} .lp-hdr-in{flex-wrap:wrap;gap:.6rem;padding-block:.5rem} .lp-brand{order:1} .lp-hdr-cta{order:2;margin-left:auto} .lp-nav{order:3;flex:1 0 100%;justify-content:flex-start;overflow-x:auto; gap:.4rem;padding-bottom:.3rem;-webkit-overflow-scrolling:touch} .lp-nav a{white-space:nowrap} .lp-hero{min-height:auto;display:block;padding:0 0 2.4rem} .lp-hero-bg{position:relative;inset:auto;height:clamp(15rem,58vw,21rem)} .lp-hero::after{content:none} .lp-hero .lp-wrap{margin-top:clamp(-2.6rem,-6vw,-1.6rem)} .lp-hero-plate{max-width:100%;padding:1.6rem 1.4rem} .lp-assurances{grid-template-columns:1fr} .lp-badges-in{gap:.8rem 1.4rem} } @media (max-width:480px){ .lp-wrap,.lp-narrow{width:min(100% - 2rem,var(--wrap))} .btn{padding-inline:1.35rem;letter-spacing:.08em;gap:.6em} .btn::after{width:1.2em} .lp-hero-acts .btn{width:100%} } /* ---------- touch devices -------------------------------------------------- This block is the LP's OWN copy of the site's touch contract. lp-compass.css is loaded standalone, so nothing in client.css reaches here. */ @media (hover:none) and (pointer:coarse){ .flog,.lp-badge,.lp-tel-lbl,.lp-assurance h4,.lp-portrait-cap, .lp-ftr-line,.lp-ftr-btm,.lp-form-note,.lp-band-eyebrow,.lp-hero-tel-lbl{font-size:.88rem;letter-spacing:.1em} .lp-hero-tel,.lp-hero-tel-num{min-height:44px} .btn{font-size:.88rem;letter-spacing:.1em;min-height:44px} button,input[type="submit"],input[type="button"]{font-size:14px} .lp-nav a{font-size:.88rem;min-height:44px;min-width:44px} .lp-faq-q{font-size:1.05rem;min-height:44px} .lp-tel,.lp-tel-num{min-height:44px} a[href^="tel:"]:not([class]), a[href^="mailto:"]:not([class]){min-height:44px;display:inline-flex;align-items:center} .lp-ftr-btm a{min-height:44px;padding:12px 4px;display:inline-flex;align-items:center} .lp-benefit-list li,.lp-next-list li,.lp-step p,.lp-faq-a p,.lp-ftr-fine{font-size:.98rem} .lp-hero,.lp-band,.lp-form-sec{background-attachment:scroll} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition-duration:.01ms !important;animation-duration:.01ms !important} }