/* ============================================================ URI CHRISTIAN COUNSELING — "New Template, August 2026" LANDING PAGE The LP's conversion structure in the SITE's own design language. Re-skinned in the site's Living Sage palette, Sorts Mill Goudy + Nunito Sans, and the homepage's soft-squircle sienna buttons. 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{ /* Living Sage — the same tokens the homepage uses, under the LP's names. --amber is the accent slot; here it is the site's sienna. */ --ink:#1F2822; --paper:#F4F1E9; --s0:#1F2822; --s7:#F4F5F2; --amber:#C4784A; --amber-light:#E0A87D; --on-dark:#FFFDF9; --on-dark-soft:#DDE3DE; --on-dark-accent:#E0A87D; --tint-a:#F4F1E9; --tint-b:#DCE5E0; --sage:#4A7C6F; --sage-deep:#3A6357; --sage-pale:#DCE5E0; --stone:#7B6E5D; /* --fh is the LP's "display" slot, but it is used for the small uppercase labels as much as for headings. The site sets those in Nunito Sans 700, so --fh holds Nunito Sans and --fd carries Sorts Mill Goudy for the actual headings (overridden in the RE-SKIN block at the foot of this file). */ --fh:'Nunito Sans',system-ui,sans-serif; --fd:'Sorts Mill Goudy',Georgia,serif; --fb:'Nunito Sans',system-ui,sans-serif; --wrap:1180px; --r:14px; --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: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} /* no trailing rule on buttons — the label carries them */ .btn::after{content:none} .btn-amber{background:var(--amber);color:var(--paper)} .btn-amber:hover,.btn-amber:focus-visible{background:#A8623A;border-color:#A8623A;box-shadow:0 0 0 4px rgba(196,120,74,.18)} .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);color:#FFFDF9;box-shadow:0 0 0 4px rgba(255,253,249,.28)} /* ---------- header -------------------------------------------------------- */ .lp-hdr{position:sticky;top:0;z-index:80;background:rgba(24,31,34,.95); border-bottom:1px solid rgba(251,250,246,.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 svg{width:26px;height:26px;flex:none;color:var(--amber-light)} .lp-brand-text{font-family:var(--fh);font-weight:600;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:700;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,253,249,.72);margin-top:2px} .lp-nav{display:flex;align-items:center;justify-content:center;gap:clamp(.2rem,1.1vw,.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(--fh);letter-spacing:.1em;text-transform:uppercase; 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(--fh);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(--fh);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:1rem 1.4rem;font-size:.7rem;letter-spacing:.09em} /* ---------- 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-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} /* ---------- solution benefits ---------------------------------------------- */ .lp-benefits-intro{max-width:66ch;margin-bottom:1.6rem} .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);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(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 .69rem/1.5 var(--fh);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:#3C4A47} .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);padding-top:clamp(2.2rem,4vw,3.2rem); border-top:2px solid rgba(139,115,64,.3)} .lp-portrait--inline{max-width:15rem;margin-inline:0} .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(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{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} .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} } /* ============================================================================ RE-SKIN — headings in the site's display face. --fh above is Nunito Sans so every small uppercase label, button and meta line matches the homepage. These are the places that are genuine headings, so they take Sorts Mill Goudy at weight 400 (the face has no bold; asking for 600 gets a synthesised smear). ============================================================================ */ h1,h2,h3,h4, .lp-hero-answer,.lp-pull,.lp-benefit-close,.lp-band-h, .lp-next-h,.lp-form-card h3,.lp-faq-q,.lp-ftr-brand span{ font-family:var(--fd);font-weight:400;letter-spacing:.002em} .lp-brand-text{font-family:var(--fd);font-weight:400;font-size:16.5px;letter-spacing:.02em} .lp-pull,.lp-benefit-close{font-style:italic} /* Buttons: the homepage's soft squircle — never a pill, never a hop. */ .btn{border-radius:14px;font-weight:700;letter-spacing:.14em;font-size:.82rem; padding:1.05rem 2rem} .btn-line{border-color:rgba(31,40,34,.28)} .btn-line:hover,.btn-line:focus-visible{background:var(--sage);border-color:var(--sage); color:#FFFDF9;box-shadow:0 0 0 4px rgba(74,124,111,.16)} /* The dark bands are the site's ink, and the sage carries the quieter ones. */ .lp-band{background:var(--amber)} .lp-band--dark{background:var(--s0)} .lp-hero-plate{border:1px solid rgba(31,40,34,.1)} /* Cards and images pick up the site's softer corner. */ .lp-split-img,.lp-step,.lp-benefit,.lp-hero-plate,.lp-trust-item,.lp-form-card{border-radius:18px} .lp-split-img{border-radius:clamp(2rem,6vw,4.5rem) 14px clamp(2rem,6vw,4.5rem) 14px} /* Rule #7 — the image column matches the height of the text beside it. The inherited template centres a fixed 4:3 box, which on a long copy block leaves a short photo floating in the middle of a tall row. Stretch instead, with the 4:3 kept only as a floor for short rows. */ .lp-split{align-items:stretch} .lp-split-img{aspect-ratio:auto;min-height:clamp(260px,30vw,420px)} .lp-split-img.cbar > img, .lp-split-img.cbar > picture > img{height:100%;top:0;object-fit:cover} @media (max-width:860px){ .lp-split-img{aspect-ratio:4/3;min-height:0} .lp-split-img.cbar > img, .lp-split-img.cbar > picture > img{height:110.5%} } /* WPForms on the dark card. tpa-base styles every field from the --form-* tokens behind !important, and the site-wide values in style.css are tuned for the light main-site card — on this dark one the label resolves to the site's ink and vanishes. Re-point the tokens on the card itself: custom properties resolve from the element, so this wins without a specificity war. */ .lp-form-card{ --form-label:#FFFDF9; --form-label-sub:rgba(255,253,249,.72); --form-required:#E0A87D; --form-field-bg:#F4F1E9; --form-field-text:#1F2822; --form-field-border:rgba(255,253,249,.22); --form-focus:#E0A87D; --form-focus-ring:rgba(224,168,125,.22); } .lp-form-card .wpforms-form .wpforms-field-label, .lp-form-card .wpforms-field-label{font-family:var(--fb) !important; color:var(--on-dark) !important;font-weight:700 !important;letter-spacing:.14em !important} .lp-form-card .wpforms-form .wpforms-field-description{color:var(--on-dark-soft) !important} @media (hover:none) and (pointer:coarse){ .lp-form-card .wpforms-form .wpforms-field-label, .lp-form-card .wpforms-field-label{font-size:.9rem !important} } /* ── Requested refinements ──────────────────────────────────────────────── Buttons lose the long trailing dash; the benefits list takes ordinary bullets instead of an em-rule; the closing line under it is bold and centred rather than italic; and the bio beside the portrait sits in a text box, matching the About page. */ /* benefits: a normal bullet, not a dash */ .lp-benefit-list li::before{content:"";width:7px;height:7px;border-radius:50%; background:var(--amber);top:1.62rem;left:1.15rem} /* the closing line: bold, centred, upright */ .lp-benefit-close{font-family:var(--fb);font-style:normal;font-weight:700; text-align:center;color:var(--ink)} /* the bio beside the portrait, in a text box */ .lp-trust-portrait > .lp-portrait-bio{background:var(--paper); border:1px solid rgba(31,40,34,.12);border-radius:18px; padding:clamp(1.2rem,2.4vw,1.9rem); box-shadow:0 2px 3px rgba(24,31,34,.04),0 18px 40px -30px rgba(24,31,34,.3)}