/* ============================================================ DARE TO GROW THERAPY — stock "New Template – August 2026" LANDING PAGE Template default look (from tpa-warrenphillips), Dare to Grow mark, buttons re-skinned to the homepage's (see the block at the end). Adapted from the tpa-angelashuey "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{ /* Dare to Grow homepage palette: umber / paper / moss / wheat / terracotta. --amber keeps its template name but carries the moss primary. */ --ink:#2D2A26; --paper:#FFFDF9; --s0:#1F2B17; --s7:#ECEAE3; --amber:#4C7133; --amber-light:#C8B893; --on-dark:#F3F2EF; --on-dark-soft:#E6E2D6; --on-dark-accent:#C8B893; --tint-a:#F3F2EF; --tint-b:#ECEAE3; --fh:'Cinzel',Georgia,serif; --fb:'Montserrat',system-ui,sans-serif; --fl:'Montserrat',system-ui,sans-serif; --wrap:1180px; --r:18px; --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(--fl);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:#34511F;box-shadow:0 8px 22px rgba(76,113,51,.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(31,43,23,.25)} /* ---------- header -------------------------------------------------------- */ .lp-hdr{position:sticky;top:0;z-index:80;background:rgba(31,43,23,.95); border-bottom:1px solid rgba(243,242,239,.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 img{height:28px;width:auto;flex:none;filter:brightness(0) invert(1)} .lp-ftr-brand img{height:24px;width:auto;filter:brightness(0) invert(1) opacity(.9)} .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:600;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#C8B893;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(--fl);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(--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: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(31,43,23,.4) 0,rgba(31,43,23,.1) 26%, rgba(31,43,23,.1) 74%,rgba(31,43,23,.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(31,43,23,.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:#5E5850; 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(--fl);letter-spacing:.13em;text-transform:uppercase;color:#5E5850} .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)} /* ---------- field-log kicker (matches main-site .flog) --------------------- */ .flog{font-family:var(--fl);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(--fl);letter-spacing:.1em;text-transform:uppercase; color:#E6E2D6} .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:#5E5850;max-width:60ch} .lp-split-img{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3; box-shadow:0 2px 3px rgba(31,43,23,.05),0 20px 48px -26px rgba(31,43,23,.36)} .lp-problem{background:var(--tint-a)} .lp-solution{background:var(--tint-b)} .lp-pull{font-family:var(--fb);font-style:italic;font-weight:500;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:#5E5850;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:#5E5850} .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(--fb);font-style:italic;font-weight:500; font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.45;color:var(--ink)} /* ---------- process --------------------------------------------------------- */ .lp-process{background:var(--tint-a)} /* Wider container than the standard 1180px wrap, just for this section -- 3 boxes stay 3 boxes, but each gets more room so a longer step-closer sentence has a better shot at fitting on one line. */ .lp-process .lp-wrap{--wrap:1560px} .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(4,minmax(0,1fr)); gap:clamp(1.2rem,2vw,1.8rem)} .lp-step{background:var(--paper);border-radius:var(--r); padding:clamp(1.5rem,1.9vw,1.9rem);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:#5E5850} /* ---------- 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: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(45,42,38,.14);border-radius:var(--r); padding:1.8rem 1.7rem;box-shadow:0 2px 3px rgba(31,43,23,.04),0 14px 30px -22px rgba(31,43,23,.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:#5E5850} .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(31,43,23,.1),0 26px 56px -26px rgba(31,43,23,.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:#5E5850} .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(76,113,51,.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(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: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:#5E5850} /* ---------- 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(243,242,239,.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(--fl)} .lp-form-card{background:rgba(243,242,239,.055);border:1px solid rgba(243,242,239,.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(243,242,239,.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:#fff !important;opacity:1 !important} /* tpa-base injects its WPForms contract inline at wp_head:100, keyed on `.wpforms-container .wpforms-form ` — (0,3,x) AND !important, so the (0,2,x) rule above never lands. The contract is `var(--form-*, )` driven and client.css (which defines those tokens) is not enqueued on the LP, so the labels were painting at its #2b2b2b fallback: near-black on the dark form card. Token + a specificity match, label only — the fields keep whatever the contract gives them. */ .lp-form-card{--form-label:#fff} .lp-form-card .wpforms-container .wpforms-form .wpforms-field-label{ color:#fff !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(243,242,239,.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(243,242,239,.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(--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. ========================================================================== */ @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} } /* ============================================================ BUTTONS – re-skinned to the Dare to Grow homepage (mockup B .btn): terracotta (primary) / moss (secondary), 10px corners, Montserrat 700 caps .14em, the soft coloured drop shadow, no trailing line. ============================================================ */ .btn{border-radius:10px;border:0;font:700 .8rem/1.2 'Montserrat',system-ui,sans-serif;letter-spacing:.14em; text-transform:uppercase;padding:.95rem 1.4rem;gap:.55rem; transition:background-color .3s cubic-bezier(.17,.84,.3,1),color .3s cubic-bezier(.17,.84,.3,1)} .btn::after{content:none} .btn svg{display:none} .btn-amber,.lp-band--dark .btn{background:#C45D31;color:#fff;border-color:#C45D31;box-shadow:0 14px 26px -16px rgba(196,93,49,.9)} .btn-amber:hover,.btn-amber:focus-visible,.lp-band--dark .btn:hover,.lp-band--dark .btn:focus-visible{background:#A94B24;color:#fff;border-color:#A94B24;box-shadow:0 14px 26px -16px rgba(196,93,49,.9)} .btn-line,.btn-onDark,.lp-band .btn{background:#4C7133;color:#fff;border-color:#4C7133;box-shadow:0 14px 26px -16px rgba(52,81,31,.9)} .btn-line:hover,.btn-line:focus-visible,.btn-onDark:hover,.btn-onDark:focus-visible,.lp-band .btn:hover,.lp-band .btn:focus-visible{background:#34511F;color:#fff;border-color:#34511F;box-shadow:0 14px 26px -16px rgba(52,81,31,.9)} .lp-band--dark .btn{background:#C45D31;border-color:#C45D31;box-shadow:0 14px 26px -16px rgba(196,93,49,.9)} .lp-band--dark .btn:hover,.lp-band--dark .btn:focus-visible{background:#A94B24;border-color:#A94B24} .lp-hdr-btn{padding:.85rem 1.2rem;font-size:.72rem} .lp-form-card .wpforms-container .wpforms-form button.wpforms-submit, .lp-form-card .wpforms-form button.wpforms-submit{background:#C45D31 !important;border:0 !important;color:#fff !important;border-radius:10px !important; font:700 .8rem/1.4 'Montserrat',system-ui,sans-serif !important;letter-spacing:.14em !important;text-transform:uppercase !important; padding:.95rem 1.4rem !important;box-shadow:0 14px 26px -16px rgba(196,93,49,.9) !important} .lp-form-card .wpforms-container .wpforms-form button.wpforms-submit:hover, .lp-form-card .wpforms-form button.wpforms-submit:hover{background:#A94B24 !important} @media (hover:none) and (pointer:coarse){ .btn,.lp-form-card .wpforms-container .wpforms-form button.wpforms-submit{font-size:.88rem !important;letter-spacing:.1em !important;min-height:44px} } @media (max-width:768px),(hover:none) and (pointer:coarse) and (max-height:500px){ .lp-band .btn,.lp-hero-acts .btn{white-space:normal;line-height:1.3} } /* ---------- phones: section nav as a 2×2 grid of pills (approved on katiemccoog's LP) ---------- */ @media (max-width:768px),(hover:none) and (pointer:coarse) and (max-height:500px){ .lp-hdr{position:relative} .lp-hdr-in{flex-wrap:wrap;gap:.6rem .8rem;padding-block:.75rem .85rem;min-height:0} .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(243,242,239,.22);border-radius:10px;background:rgba(243,242,239,.06)} .lp-nav a::before,.lp-nav a::after{display:none} .lp-nav a{font-size:.88rem;min-height:44px} } @media (max-width:430px){ .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(243,242,239,.1)} .lp-tel-num svg{width:18px;height:18px} .lp-nav a{letter-spacing:.02em;padding-inline:.25rem} } /* ---------- homepage type (Cinzel + Montserrat) – Marco 2026-09-19: LPs follow the homepage fonts ---------- */ .lp-hero-plate h1{font-weight:600;letter-spacing:.01em} .lp-brand-text{font-weight:700;letter-spacing:.04em} @media (max-width:1100px) and (min-width:901px){ .lp-steps{grid-template-columns:repeat(2,minmax(0,1fr))} } /* rounded images, like the homepage photos (18px frames / 12px photos) */ .lp-split-img{border-radius:18px} .lp-portrait img{border-radius:14px} .lp-portrait picture::before{border-radius:18px} /* four phases on one row without running to the page edges */ .lp-process .lp-wrap{--wrap:1320px} @media (max-width:768px),(hover:none) and (pointer:coarse) and (max-height:500px){ .lp-hero-bg,.lp-hero-bg img{border-radius:18px} } /* moss CTA band: terracotta button, like the homepage's primary */ .lp-band .btn{background:#C45D31;border-color:#C45D31;box-shadow:0 14px 26px -16px rgba(196,93,49,.9)} .lp-band .btn:hover,.lp-band .btn:focus-visible{background:#A94B24;border-color:#A94B24;box-shadow:0 14px 26px -16px rgba(196,93,49,.9)} /* bio always sits in a text box (Marco 2026-09-19) – homepage note-card style */ .lp-trust-portrait>.lp-portrait-bio{position:relative;overflow:hidden;background:var(--paper);border:1px solid rgba(45,42,38,.1);border-radius:18px; padding:clamp(1.5rem,2.6vw,2.2rem) clamp(1.4rem,2.8vw,2.4rem);box-shadow:0 30px 60px -34px rgba(31,43,23,.55),0 8px 18px -12px rgba(31,43,23,.25)} .lp-trust-portrait>.lp-portrait-bio::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--amber)} @media (max-width:900px){ .lp-trust-portrait>.lp-portrait-bio{text-align:left} } /* rounded text boxes everywhere (homepage cards are 18px); form fields match the 10px buttons */ .lp-form-card{--form-radius:10px} .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-radius:10px !important} /* ---------- benefits: round bullets, not dashes ---------- */ .lp-benefit-list li::before{width:8px;height:8px;border-radius:50%;background:var(--amber);top:calc(1.1rem + .8em - 4px)} /* ---------- section spacing ---------- */ /* solution + benefits share one background: one section gap between them, not two */ .lp-solution + .lp-outcomes{padding-top:0} /* the portrait's offset backing adds ~16px below it: trim so the gap matches the other sections */ .lp-trust{padding-bottom:calc(var(--pad) - 16px)} .lp-trust h2{text-align:center} /* ---------- FAQ: the site's FAQ-page accordion ---------- */ .lp-faq-list{border-top:0;display:grid;gap:1.1rem} .lp-faq-row{border-bottom:0;background:var(--paper);border-radius:16px;box-shadow:0 18px 34px -26px rgba(31,43,23,.6); transition:transform .45s cubic-bezier(.17,.84,.3,1),box-shadow .45s cubic-bezier(.17,.84,.3,1)} .lp-faq-row.open{transform:translateY(-3px);box-shadow:0 30px 60px -34px rgba(31,43,23,.55),0 8px 18px -12px rgba(31,43,23,.25)} .lp-faq-q{display:grid;grid-template-columns:50px minmax(0,1fr) 16px;gap:1.1rem;align-items:center; padding:1.15rem clamp(1.1rem,2.4vw,1.6rem);border-radius:16px;font-family:var(--fh);font-weight:600; font-size:clamp(1.2rem,1.1rem + .35vw,1.38rem);line-height:1.3;letter-spacing:.01em;color:var(--ink);transition:none} .lp-faq-row.open .lp-faq-q{background:none;padding-left:clamp(1.1rem,2.4vw,1.6rem)} .lp-faq-q:hover .lp-faq-q-text{color:#34511F} .lp-faq-q-text{transition:color .3s} .lp-faq-node{width:50px;height:50px;border-radius:50%;background:var(--s7);display:grid;place-items:center; transition:background .45s,box-shadow .45s} .lp-faq-node img{width:66%;height:66%;object-fit:contain;transition:transform .6s cubic-bezier(.17,.84,.3,1)} .lp-faq-row.open .lp-faq-node{background:#fff;box-shadow:0 0 0 1.5px rgba(76,113,51,.28),0 0 0 7px #EAE7DE} .lp-faq-row.open .lp-faq-node img{transform:rotate(-28deg) scale(1.12)} .lp-faq-chev{width:10px;height:10px;border-right:2px solid #C45D31;border-bottom:2px solid #C45D31; transform:translateY(-3px) rotate(45deg);transition:transform .4s cubic-bezier(.17,.84,.3,1)} .lp-faq-row.open .lp-faq-chev{transform:translateY(2px) rotate(-135deg)} .lp-faq-a{transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1)} .lp-faq-a-in,.lp-faq-row.open .lp-faq-a-in{padding:0 clamp(1.1rem,2.4vw,1.6rem) 1.5rem calc(clamp(1.1rem,2.4vw,1.6rem) + 50px + 1.1rem)} .lp-faq-row:not(.open) .lp-faq-a-in{padding-bottom:0} .lp-faq-a p{font-size:1.08rem;line-height:1.8} @media (max-width:768px),(hover:none) and (pointer:coarse) and (max-height:500px){ .lp-faq-q{grid-template-columns:42px minmax(0,1fr) 14px;gap:.8rem;font-size:1.1rem} .lp-faq-node{width:42px;height:42px} .lp-faq-a-in,.lp-faq-row.open .lp-faq-a-in{padding-left:clamp(1.1rem,2.4vw,1.6rem)} } @media (hover:none) and (pointer:coarse){ .lp-faq-row.open{transform:none} } /* ---------- headshot + bio box: even heights (desktop/tablet) ---------- */ @media (min-width:901px){ .lp-trust-portrait{grid-template-columns:minmax(0,18rem) minmax(0,1fr);align-items:stretch} .lp-trust-portrait>.lp-portrait-bio{align-self:stretch;display:flex;flex-direction:column;justify-content:center} .lp-portrait--inline{position:relative;max-width:none;width:100%;height:100%;display:flex;flex-direction:column;margin:0} /* image fills the column; the offset backing stays inside it so both boxes end on the same line */ .lp-portrait--inline picture{flex:1 1 auto;min-height:0;margin:0 16px 16px 0} .lp-portrait--inline img{height:100%;object-fit:cover;object-position:50% 22%} /* name sits on the photo as a pill, like the homepage photo caption */ .lp-portrait--inline .lp-portrait-cap{position:absolute;z-index:2;left:12px;right:28px;bottom:28px;margin:0; padding:.55rem .8rem;border-radius:12px;background:rgba(255,253,249,.92);color:#34511F} } .lp-benefits-intro h2{line-height:1.14} /* problem section: photo at its own 3:2 shape so the whole couple shows, centred on the text */ .lp-problem .lp-split-img{aspect-ratio:3/2} .lp-problem .lp-split-img img{height:100%;object-position:50% 50%} /* ---------- problem, part 2: same section, full width under the text/photo row ---------- */ .lp-problem-more{margin-top:clamp(2.6rem,5vw,3.8rem);padding-top:clamp(2.2rem,4vw,3rem);border-top:1px solid rgba(45,42,38,.12)} .lp-problem-more h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.14;color:var(--ink);margin-bottom:1rem} .lp-problem-more p{font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.75;color:#5E5850} .lp-problem-more blockquote{position:relative;margin:1.8rem 0;padding:1.5rem clamp(1.4rem,3vw,2.2rem); background:var(--paper);border-radius:18px;box-shadow:0 30px 60px -34px rgba(31,43,23,.55),0 8px 18px -12px rgba(31,43,23,.25)} .lp-problem-more blockquote::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;border-radius:18px 0 0 18px;background:var(--amber)} .lp-problem-more blockquote p{margin:0;font-size:clamp(1.05rem,1.3vw,1.2rem);color:var(--ink)} .lp-problem-more blockquote p+p{margin-top:.5rem} .lp-problem-more .lp-pull{margin-top:1.6rem;max-width:none;color:var(--ink);font-weight:600} /* ---------- copy formatting follows the doc (Marco 2026-09-19): no bold/italic the doc does not have ---------- */ .lp-problem-more .lp-pull,.lp-pull{font-style:normal;font-weight:700} /* doc: bold only */ .lp-benefit-close{font-style:normal;font-weight:400} /* doc: plain */ .lp-band-h{font-weight:400} /* doc: plain line */ .lp-band--dark .lp-band-h{font-weight:600} /* doc: bold */ .lp-band-eyebrow{font-weight:500} /* doc: plain */