/* ============================================================ HEARD BY DR. K — "New Template — August 2026" LANDING PAGE The LP's conversion structure in the SITE's own design language. Adapted from the tpa-angelashuey "page-landing-emdr" pattern. Self-contained on purpose: page-landing-compass.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{ /* Heard by Dr. K palette: loam / linen / sage / cedar. --amber keeps its template name but carries the sage accent. */ --ink:#2D2A26; --paper:#F7F4F0; --s0:#2D2A26; --s7:#EFE6DF; --amber:#7A9E7E; --amber-light:#A9C2AB; --on-dark:#F7F4F0; --on-dark-soft:#E7E0D8; --on-dark-accent:#A9C2AB; --tint-a:#F7F4F0; --tint-b:#F1E5E3; --fh:'Young Serif',Georgia,serif; --fb:'Lato','Helvetica Neue',Arial,sans-serif; --fl:'Lato','Helvetica Neue',Arial,sans-serif; --wrap:1180px; --r:6px; --pad:clamp(3.2rem,6vw,5.4rem); --hdr-h:88px; } *,*::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:400} 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 .9rem/1.2 var(--fl);letter-spacing:.04em;text-transform:uppercase; -webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;text-rendering:optimizeLegibility; 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} /* Heard by Dr. K: plain buttons – no trailing line or arrow */ .btn::after{content:none} .btn svg{display:none} .btn-amber{background:var(--amber);color:var(--paper)} .btn-amber:hover,.btn-amber:focus-visible{background:#5F8163;box-shadow:0 8px 22px rgba(95,129,99,.4)} .btn-line{background:transparent;color:var(--ink);border-color:rgba(45,42,38,.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(45,42,38,.25)} /* ---------- header -------------------------------------------------------- */ .lp-hdr{position:sticky;top:0;z-index:80;background:rgba(45,42,38,.96); border-bottom:1px solid rgba(247,244,240,.1);transition:box-shadow .35s ease,background-color .35s ease} .lp-hdr.stuck{background:var(--s0);box-shadow:0 1px 18px rgba(0,0,0,.3)} .lp-hdr-in{display:flex;align-items:center;gap:1.1rem;min-height:var(--hdr-h)} .lp-brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:0;text-decoration:none;color:var(--paper)} .lp-brand img{height:32px;width:auto;flex:none;filter:brightness(0) invert(1)} .lp-brand-text{font-family:var(--fh);font-weight:400;font-size:15.5px;letter-spacing:.02em;line-height:1.2;white-space:nowrap} .lp-brand-text span{display:block;font-family:var(--fb);font-weight:400;font-size:11.5px;letter-spacing:.03em;color:#D8CFC4;margin-top:2px} .lp-hdr .lp-wrap{width:min(100% - 2.6rem,1360px)} .lp-nav{display:flex;align-items:center;justify-content:center;gap:clamp(.6rem,1.9vw,1.9rem); flex:1 1 auto;min-width:0} .lp-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px; padding:0 .55rem;text-decoration:none;color:var(--paper); font:700 .72rem/1 var(--fl);letter-spacing:.1em;text-transform:uppercase; white-space:nowrap;transition:color .3s} .lp-nav a::before{content:"";position:absolute;z-index:-1;left:2px;right:2px;bottom:8px;height:1px; background:var(--amber-light);opacity:.7; transition:height .44s cubic-bezier(.22,1,.36,1),bottom .44s cubic-bezier(.22,1,.36,1),opacity .32s} .lp-nav a:hover::before,.lp-nav a:focus-visible::before{height:26px;bottom:7px;opacity:1} .lp-nav a:hover,.lp-nav a:focus-visible{color:var(--s0)} .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(--fl);letter-spacing:.15em;text-transform:uppercase;color:var(--amber-light)} .lp-tel-num{display:flex;align-items:center;gap:.44rem;font:700 1.05rem/1.15 var(--fl);color:var(--paper)} .lp-tel-num svg{flex:0 0 auto;stroke:var(--amber-light)} .lp-tel:hover .lp-tel-num{color:var(--amber-light)} .lp-hdr-btn{padding:.95rem 1.35rem;font-size:.8rem;letter-spacing:.04em} /* ---------- 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(45,42,38,.4) 0,rgba(45,42,38,.1) 26%, rgba(45,42,38,.1) 74%,rgba(45,42,38,.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(45,42,38,.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:400;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:#6B645B; 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:row;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;text-decoration:none} .lp-hero-tel-lbl{font:700 .66rem/1 var(--fl);letter-spacing:.13em;text-transform:uppercase;color:#6B645B} .lp-hero-tel-num{font:700 1.1rem/1.15 var(--fl);color:var(--ink)} .lp-hero-tel:hover .lp-hero-tel-num{color:var(--amber)} .lp-hero-plate h1{font-style:italic;font-weight:500} .lp-hero-link{display:inline-flex;align-items:center;min-height:44px;font:600 .95rem/1.3 var(--fl); color:var(--ink);text-decoration:none;border-bottom:1.5px solid rgba(45,42,38,.35)} .lp-hero-link:hover,.lp-hero-link:focus-visible{color:var(--amber);border-bottom-color:var(--amber)} /* ---------- field-log kicker (matches main-site .flog) --------------------- */ .flog{font-family:var(--fl);font-weight:700;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(--fl);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:#4A453E;max-width:60ch} .lp-split-img{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3; box-shadow:0 2px 3px rgba(45,42,38,.05),0 20px 48px -26px rgba(45,42,38,.36)} .lp-problem{background:var(--tint-a)} .lp-solution{background:var(--tint-b)} /* solution + outcomes share one background: don't stack two full section paddings between them */ .lp-solution + .lp-outcomes{padding-top:0} .lp-pull{font-family:var(--fh);font-style:italic;font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.42; color:var(--ink);margin-top:1.3rem;max-width:36ch} .lp-split-text h3{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.14;letter-spacing:-.01em;color:var(--ink); margin:2rem 0 .8rem} /* ---------- 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;color:var(--ink);margin-bottom:1rem} .lp-benefits-intro p{color:#4A453E;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(45,42,38,.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:#4A453E} /* same bullet mark as the main site's inner pages (sage leaf-square) */ .lp-benefit-list li::before{content:"";position:absolute;left:1.15rem;top:calc(1.1rem + .62em); width:9px;height:9px;border-radius:3px 6px 3px 6px;background:var(--amber)} .lp-benefit-close{margin-top:1.6rem;font-family:var(--fh);font-style:italic; 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(45,42,38,.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(--fl);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:#4A453E} /* ---------- 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(--fl);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:400;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;text-align:center} .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(45,42,38,.14);border-radius:var(--r); padding:1.8rem 1.7rem;box-shadow:0 2px 3px rgba(45,42,38,.04),0 14px 30px -22px rgba(45,42,38,.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:#4A453E} .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(45,42,38,.1),0 26px 56px -26px rgba(45,42,38,.45)} .lp-portrait-cap{margin-top:.9rem;font:700 .69rem/1.5 var(--fl);letter-spacing:.12em; text-transform:uppercase;color:var(--amber)} .lp-portrait-bio{margin-top:.6rem} .lp-portrait-bio p{font-size:.98rem;line-height:1.65;color:#4A453E} .lp-portrait-bio p+p{margin-top:.7rem} .lp-trust-portrait{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(2rem,4vw,3.4rem); align-items:start;margin-top:clamp(2.2rem,4vw,3.2rem); /* boxed: headshot + name + bio sit together in one card, like the trust items above */ background:var(--paper);border:1px solid rgba(45,42,38,.14);border-radius:var(--r); padding:clamp(1.8rem,3.4vw,3rem); box-shadow:0 2px 3px rgba(45,42,38,.04),0 14px 30px -22px rgba(45,42,38,.28)} .lp-portrait--inline{max-width:15rem;margin-inline:0} /* No bio on this LP: center the portrait instead of leaving an empty column */ .lp-trust-portrait:not(:has(.lp-portrait-bio)){grid-template-columns:1fr;justify-items:center} .lp-trust-portrait:not(:has(.lp-portrait-bio)) .lp-portrait--inline{margin-inline:auto} .lp-trust-portrait>.lp-portrait-bio{margin-top:0;align-self:center} .lp-trust-portrait>.lp-portrait-bio p{font-size:1.05rem;line-height:1.8;max-width:64ch} /* ---------- 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(45,42,38,.14)} .lp-faq-row{border-bottom:1px solid rgba(45,42,38,.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:400;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:#4A453E} /* ---------- 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.7rem,3vw,2.5rem);line-height:1.14;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(247,244,240,.16)} .lp-next-h{font-family:var(--fh);font-weight:400;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(--fl)} .lp-form-card{ /* Dark form card: the site-wide WPForms brand tokens (style.css) are tuned for light backgrounds, so redefine them here — they inherit into .wpforms-container. */ --form-field-bg:rgba(247,244,240,.06); --form-field-border:rgba(247,244,240,.32); --form-field-text:#F7F4F0; --form-label:#E7E0D8; --form-label-sub:rgba(231,224,216,.7); --form-required:#A9C2AB; --form-focus:#A9C2AB; --form-focus-ring:rgba(169,194,171,.3); --form-btn-bg:#7A9E7E; --form-btn-text:#FFFFFF; --form-btn-bg-hover:#A9C2AB; --form-btn-text-hover:#2D2A26; --form-radius:2px; --form-btn-radius:2px; } .lp-form-card{background:rgba(247,244,240,.055);border:1px solid rgba(247,244,240,.18); border-radius:var(--r);padding:clamp(1.6rem,2.4vw,2.2rem)} .lp-form-card h3{font-family:var(--fh);font-weight:400;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(247,244,240,.16)} .lp-assurance h4{font:700 .72rem/1.4 var(--fl);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(--fl) !important;font-size:11px !important; letter-spacing:.08em !important;text-transform:uppercase !important;color:#E7E0D8 !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(247,244,240,.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(247,244,240,.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 img{height:24px;width:auto;filter:brightness(0) invert(1) opacity(.9)} .lp-ftr-brand span{font-family:var(--fh);font-weight:400;font-size:14px} .lp-ftr-line{font:700 .74rem/1.6 var(--fl);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. ========================================================================== */ /* Header stays ONE line: nav labels never wrap; as the row narrows the phone (also in the hero plate) goes first, then the header button. */ @media (max-width:1280px) and (min-width:769px){ .lp-hdr-cta .lp-tel{display:none} } @media (max-width:1080px){ .lp-nav{gap:.5rem} .lp-nav a{padding:0 .35rem;font-size:.67rem;letter-spacing:.08em} } @media (max-width:980px) and (min-width:769px){ .lp-hdr-btn{display:none} } /* Hero 50/50 (Heard by Dr. K): copy on linen left, photo fully visible right. Below 901px the template's stacked hero takes over. */ @media (min-width:901px){ .lp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch; padding:0;background:var(--paper)} .lp-hero::after{content:none} .lp-hero-bg{position:relative;inset:auto;grid-column:2;grid-row:1;min-height:0; margin:clamp(20px,3vw,40px) clamp(20px,3vw,40px) clamp(20px,3vw,40px) 0;border-radius:14px 54px 14px 54px; box-shadow:0 30px 60px -30px rgba(45,42,38,.35)} .lp-hero .lp-wrap{grid-column:1;grid-row:1;width:auto;margin:0;display:flex;align-items:center; justify-content:flex-end; padding:clamp(3rem,5vw,4.4rem) clamp(1.8rem,4vw,3.6rem) clamp(3rem,5vw,4.4rem) max(1.3rem,calc((100vw - var(--wrap)) / 2))} .lp-hero-plate{background:transparent;border:0;box-shadow:none;padding:0;width:auto;max-width:36rem} } @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{grid-template-columns:1fr;text-align:center} .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} /* phones: header scrolls away (a 3-row sticky bar ate the screen); section links become a readable 2x2 grid of pills instead of a sideways strip */ .lp-hdr{position:relative} .lp-hdr-in{flex-wrap:wrap;gap:.6rem .8rem;padding-block:.75rem .85rem;min-height:0} .lp-brand{order:1} .lp-hdr-cta{order:2;margin-left:auto} .lp-hdr-btn{display:none} .lp-tel-lbl{display:none} .lp-nav{order:3;flex:1 0 100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.45rem;overflow:visible;padding:0} .lp-nav a{justify-content:center;text-align:center;white-space:nowrap;padding:.55rem .4rem; letter-spacing:.05em;border:1px solid rgba(247,244,240,.22);border-radius:6px 14px 6px 14px; background:rgba(247,244,240,.06)} .lp-nav a::before{display:none} .lp-nav a:hover,.lp-nav a:focus-visible{color:var(--paper);background:rgba(169,194,171,.25)} .lp-hero{min-height:auto;display:block;padding:0 0 2.4rem} .lp-hero-bg{position:relative;inset:auto;height:clamp(15rem,58vw,21rem);margin:16px 16px 0;border-radius:14px 40px 14px 40px} .lp-hero::after{content:none} .lp-hero .lp-wrap{margin-top:1.1rem} .lp-hero-plate{max-width:100%;padding:1.6rem 1.4rem;border-radius:14px 40px 14px 40px} .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:.9rem;letter-spacing:.04em;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} } /* ---------- Heard by Dr. K: site button shape + serif weight ---------- */ .btn{border-radius:26px 8px 26px 8px} [class*="lp-"] h1,[class*="lp-"] h2,[class*="lp-"] h3{font-weight:400} /* ---------- phones: last word (after the touch block on purpose) ----------- */ @media (max-width:768px),(hover:none) and (pointer:coarse) and (max-height:500px){ .lp-nav a{font-size:.88rem;min-height:44px} .lp-tel-num{font-size:1rem} /* buttons: one line, sentence case, full width */ .btn{white-space:nowrap;text-transform:none;letter-spacing:.01em;font-size:.95rem; padding:.95rem 1rem;min-height:48px} .lp-hero-acts .btn,.lp-band .btn,.lp-sec .btn,.lp-form-sec .btn{width:100%} /* hero call line: centred under the button, label + number on one line */ .lp-hero-acts{flex-direction:column;align-items:stretch;gap:.9rem} .lp-hero-tel{justify-content:center;align-items:center;flex-wrap:wrap;gap:.15rem .5rem;min-height:44px} .lp-hero-tel-lbl{font-size:.8rem;letter-spacing:.08em} .lp-hero-tel-num{min-height:0;font-size:1.05rem} } @media (max-width:430px){ /* keep logo + phone on one row: the header phone becomes a round icon (the full number is right below in the hero) */ .lp-tel{min-height:0} .lp-tel-num{font-size:0;gap:0;width:44px;height:44px;min-height:44px;justify-content:center; border-radius:50%;background:rgba(247,244,240,.1)} .lp-tel-num svg{width:18px;height:18px} .lp-nav a{letter-spacing:.02em;padding-inline:.25rem} .btn{font-size:.88rem;letter-spacing:0;padding-inline:.7rem} } /* never let a label spill outside its button on the narrowest phones */ @media (max-width:359px){ .btn{white-space:normal;line-height:1.25} } /* LP form submit: same crisp type as the buttons */ .lp-form-card .wpforms-container .wpforms-form button.wpforms-submit{font-size:.9rem !important;letter-spacing:.04em !important;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}