/* ══════════════════════════════════════════════════════════════════════════ Cindy Hodgson Therapy – landing page "The Same Room". Self-contained by design: the LP template owns its own and this is the only stylesheet it loads. It therefore inherits NOTHING from client.css – not the tokens, not the buttons, not the mark, and not the touch block. Every one of those is restated here on purpose. Validator Checks 18 and 32 test this file separately for exactly that reason. It is the site's design on the LP's structure: her palette, EB Garamond and Plus Jakarta Sans, the ivory plates, the rule-and-nick lockup, the ladder of grounds climbing out of ivory into the pale blues. ══════════════════════════════════════════════════════════════════════════ */ :root{ --sky:#7FB3D3; --lav:#C8A2C8; --plum:#DDA0DD; --ivory:#F8F9FA; --navy:#1A1A2E; --plum-ground:#3B2544; --plum-deep:#5E3D62; --sky-deep:#2F5A78; --rung1:#EAF2F8; --rung2:#DBE9F4; --rung3:#C9DEEF; --rule:rgba(26,26,46,.12); --rule-strong:rgba(26,26,46,.22); --fh:'EB Garamond',Georgia,'Times New Roman',serif; --fb:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --wrap:71.25rem; --hdr-h:66px; --footer-bg:#3B2544; --footer-text:rgba(248,249,250,.8); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 12px)} html,body{overflow-x:clip} body{margin:0;background:var(--ivory);color:var(--navy); font-family:var(--fb);font-size:1.0312rem;line-height:1.7; text-wrap:pretty;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} picture{display:contents} h1,h2,h3{font-family:var(--fh);font-weight:400;text-wrap:balance; line-height:1.08;margin:0;letter-spacing:-.012em} p{margin:0 0 1em} p:last-child{margin-bottom:0} .lp-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 30px} .skip{position:absolute;left:-9999px} .skip:focus{left:16px;top:16px;z-index:9999;background:var(--navy);color:var(--ivory);padding:10px 16px} :focus-visible{outline:2.5px solid var(--sky-deep);outline-offset:3px} /* ───────── buttons – squared, editorial. No translateY, ever. ───────── */ .btn{ display:inline-flex;align-items:center;gap:12px; font-family:var(--fb);font-size:0.9062rem;font-weight:600;letter-spacing:.055em;text-transform:uppercase; position:relative;padding:15px 34px 15px 26px;border-radius:2px;border:1px solid var(--plum); background:var(--plum);color:var(--navy); /* accent fill, navy type – 8.24:1 */ text-decoration:none;cursor:pointer; transition:background .3s cubic-bezier(.22,1,.36,1),color .3s,border-color .3s; } .btn:hover,.btn:focus-visible{background:var(--plum-deep);border-color:var(--plum-deep);color:var(--ivory)} /* A plain drawn arrow, never the brand mark: the mark belongs where a NAME sits on it, and a button label is not a lockup. */ .btn-arrow{position:absolute;right:.8em;top:50%;width:1.05em;height:1.6px;background:currentColor; opacity:0;transform:translateY(-50%) translateX(-7px);pointer-events:none; transition:opacity .26s ease,transform .42s cubic-bezier(.22,1,.36,1)} .btn-arrow::after{content:"";position:absolute;right:-1px;top:50%;width:.5em;height:.5em; border-top:1.6px solid currentColor;border-right:1.6px solid currentColor; transform:translate(0,-50%) rotate(45deg)} .btn:hover .btn-arrow,.btn:focus-visible .btn-arrow{opacity:1;transform:translateY(-50%) translateX(0)} /* ───────── the mark – rule and nick ───────── */ .rn{position:relative;display:block;height:.075em;background:currentColor} .rn::before{content:"";position:absolute;left:var(--rn-x,7%);top:-.125em;width:.075em;height:.325em;background:currentColor} .rn--plain::before{content:none} .brand{font-size:1.4rem;text-decoration:none;color:var(--navy);display:inline-block;white-space:nowrap; min-width:0;flex:0 1 auto} .brand-name{display:block;font-family:var(--fh);font-weight:600;font-size:1em;letter-spacing:.02em;line-height:1.12} .brand-rule{margin-top:.22em;color:var(--lav);height:.1em;transition:color .32s ease} .brand-rule::before{width:.1em;top:-.1125em} .brand:hover .brand-rule,.brand:focus-visible .brand-rule{color:var(--plum-deep)} /* ───────── header ───────── */ /* Solid, not a wash. The main site fades its header out over the hero photograph; on the landing page that reads as a smear rather than a deliberate overlay, so this one is simply opaque ivory. */ .lp-hdr{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--hdr-h); border-bottom:1px solid var(--plum); background:var(--ivory)} .lp-hdr-in{max-width:var(--wrap);margin:0 auto;padding:0 30px;height:var(--hdr-h); display:flex;align-items:center;gap:16px} .lp-nav{margin-left:auto;display:flex;align-items:center;gap:2px;min-width:0} .lp-nav a{display:block;padding:9px 10px;font-size:0.75rem;font-weight:600;letter-spacing:.04em; text-transform:uppercase;text-decoration:none;color:var(--navy);position:relative;transition:color .22s; white-space:nowrap} .lp-nav a::before{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:1.5px; background:var(--plum-deep);transform:scaleX(0);transform-origin:left center; transition:transform .4s cubic-bezier(.22,1,.36,1)} .lp-nav a:hover,.lp-nav a:focus-visible{color:var(--plum-deep)} .lp-nav a:hover::before,.lp-nav a:focus-visible::before{transform:scaleX(1)} .lp-hdr-cta{display:flex;align-items:center;gap:13px;margin-left:6px} .hdr-tel{position:relative;display:inline-flex;align-items:center;gap:7px; font-size:0.9062rem;font-weight:600;text-decoration:none;color:var(--navy); white-space:nowrap;padding-bottom:3px;transition:color .3s ease} .hdr-tel .rn{width:14px;flex:none;font-size:1.8em;color:var(--plum-deep); opacity:0;transform:scaleX(.25);transform-origin:left center; transition:opacity .35s ease,transform .55s cubic-bezier(.22,1,.36,1)} .hdr-tel:hover,.hdr-tel:focus-visible{color:var(--plum-deep)} .hdr-tel:hover .rn,.hdr-tel:focus-visible .rn{opacity:1;transform:none} .lp-hdr-cta .btn{font-size:0.7188rem;letter-spacing:.03em;padding:11px 26px 11px 14px} /* ───────── hero – stepped plates over the photograph ───────── */ /* Full-bleed: the photograph holds the whole fold and the plates sit on it, the same move the main site's hero makes. .lp-hero-fig follows .lp-hero-in in the markup, so it is pulled behind it here rather than reordered. */ .lp-hero{position:relative;isolation:isolate;background:var(--navy)} .lp-hero-fig{position:absolute;inset:0;z-index:0} .lp-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 26%} .lp-hero-in{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto; min-height:clamp(560px,76vh,760px); padding:calc(var(--hdr-h) + 56px) 30px 100px; display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:9px} /* One box now, not three: the descriptor line, headline and action all stack inside a single ivory plate. */ .hero-plate{background:var(--ivory);max-width:min(100%,680px);padding:32px 34px 34px} .lp-hero h1{font-size:clamp(2.05rem,4.4vw,3.4rem);line-height:1.04;letter-spacing:-.026em;margin:0} /* The headline's own supporting line, in the same box. Plum-deep rather than navy: a second voice under the title, the same move the main site makes with p.first on the turn and the bio. */ .hero-sub{font-family:var(--fh);font-size:1.7rem;line-height:1.28; color:var(--plum-deep);margin:22px 0 0} /* Space between the three stacked groups (descriptor / headline / action) now that they share one box - only fires when the group above it is actually present, so a blank descriptor or headline never leaves a gap. */ .hero-geo-sub + h1, .hero-geo-lead + h1{margin-top:34px} .hero-actions{margin-top:34px} /* THE DESCRIPTOR LINE. Two tiers rather than two equal sentences, so the offer and the qualifier stop competing. The FIRST line is the offer, set large in the display face; everything after it is the qualifier - where she works, who can be seen. */ .hero-geo-lead{font-family:var(--fh);font-size:clamp(1.34rem,2.3vw,1.78rem); line-height:1.16;letter-spacing:-.014em;color:var(--navy);margin:0} .hero-geo-sub{font-size:0.9688rem;font-weight:600;letter-spacing:.022em; line-height:1.4;color:var(--sky-deep);margin:14px 0 0} /* Lifted off the 14px floor. At 14px it was the smallest thing in the hero and a hair under the 14.5px button label beside it - two sizes close enough to look like a mistake rather than a hierarchy. */ .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px} .hero-actions .tel{font-family:var(--fh);font-size:1.32rem;color:var(--navy);text-decoration:none; border-bottom:1px solid var(--lav);padding-bottom:2px;transition:color .24s,border-color .24s} .hero-actions .tel:hover{color:var(--plum-deep);border-color:var(--plum-deep)} /* "Bring Your Whole Self" is a statement, not an action, so it is not a button - a button label has to be something you DO. It closes the action plate as a line in the second voice: EB Garamond italic in plum-deep, the register this site already uses for p.first on the turn and the bio. A hairline above it gives it a place on the plate instead of leaving it adrift under the buttons. It is still a link to the form, so it carries the site's own affordance - a lavender rule at rest, because something underlined is something clickable, with the plum rule drawing over it on hover. That is the same gesture the nav, the service names and the header phone all make, so it needs no new vocabulary. */ .lp-secondary{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--rule)} .lp-secondary a{position:relative;display:inline-block; font-family:var(--fh);font-style:italic;font-size:1.34rem;line-height:1.3; color:var(--plum-deep);text-decoration:none; border-bottom:1px solid var(--lav);padding-bottom:3px; transition:color .24s ease} .lp-secondary a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px; background:var(--plum-deep);transform:scaleX(0);transform-origin:left center; transition:transform .45s cubic-bezier(.22,1,.36,1)} .lp-secondary a:hover,.lp-secondary a:focus-visible{color:var(--navy)} .lp-secondary a:hover::after,.lp-secondary a:focus-visible::after{transform:scaleX(1)} @media (prefers-reduced-motion:reduce){.lp-secondary a::after{transition:none}} /* ───────── trust stripe — its own band under the hero ───────── Set in sentence case at reading size, deliberately NOT tracked-uppercase micro-type: that treatment is an eyebrow, and this page has none. */ .lp-trustbar{background:var(--rung1);border-top:1px solid var(--plum);border-bottom:1px solid var(--plum)} .lp-trustbar ul{list-style:none;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center; justify-content:center;gap:14px clamp(26px,4.4vw,64px);padding-top:19px;padding-bottom:19px} .lp-trustbar li{position:relative;font-size:0.9375rem;line-height:1.5;font-weight:600;color:var(--plum-deep)} /* a hairline between items — a divider, not the brand mark, which belongs only where a name sits on it */ .lp-trustbar li + li::before{content:"";position:absolute;top:50%; left:calc(-1 * clamp(26px,4.4vw,64px) / 2);width:1px;height:1.1em; transform:translateY(-50%);background:var(--lav)} /* ───────── shared section furniture ───────── */ .lp-problem,.lp-solution,.lp-process,.lp-trust,.lp-faq,.lp-next{padding:clamp(52px,6vw,86px) 0} .lp-problem{background:var(--ivory)} .rung-1{background:var(--rung1)} .rung-2{background:var(--rung2);border-top:1px solid var(--plum)} .rung-3{background:var(--rung3)} .lp-faq{background:var(--ivory)} .lp-next{background:var(--rung1)} /* One subheadline treatment. .lp-copy h3 and .lp-benefits h3 are peers of the section headlines in her doc, not a tier below them, so they are set identically - same face, size, weight and colour. */ .lp-problem h2,.lp-solution h2,.lp-process h2,.lp-trust h2,.lp-faq h2,.lp-next h2, .lp-copy h3,.lp-benefits h3{ font-family:var(--fh);font-weight:400;color:var(--navy); font-size:clamp(1.7rem,3.3vw,2.4rem);line-height:1.08;letter-spacing:-.012em;margin:0 0 22px} .lp-copy p,.lp-next p:not(.lp-lead){font-size:1.025rem;line-height:1.78;color:rgba(26,26,46,.88)} /* The problem section carries two headings in her doc; the second had been demoted to an eyebrow, which flattened her structure. It needs room above it where it follows body copy. */ .lp-copy h3{margin-top:1.4em} .lp-lead{font-family:var(--fh);font-size:1.3rem;line-height:1.44;color:var(--plum-deep); max-width:60ch;margin:0 0 26px} /* .lp-copy .lp-quiet, not just .lp-quiet: ".lp-copy p" above outranks a bare class selector on specificity (class+type beats class alone), so a plain .lp-quiet rule silently loses its font-size to that one. */ .lp-copy .lp-quiet{font-family:var(--fh);font-style:italic;font-size:1.25rem;line-height:1.5; color:var(--plum-deep);margin:22px 0 0;padding-top:20px;border-top:1px solid var(--rule)} .lp-list{margin:18px 0;padding-left:1.15em} .lp-list li{font-size:1.0125rem;line-height:1.7;margin-bottom:.45em} .lp-list li::marker{color:var(--lav)} .lp-cta-row{margin:clamp(28px,3vw,42px) 0 0} /* image beside text – the copy sets the height, the image fills it */ .lp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,40%); gap:clamp(28px,3.6vw,56px);align-items:stretch;min-height:clamp(260px,28vw,380px)} .lp-split--rev .lp-copy{order:2} .lp-split--rev .lp-figure{order:1} .lp-copy{min-width:0} .lp-figure{min-width:0;position:relative} .lp-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* ───────── mid CTA band ───────── */ .lp-band{background:var(--plum-ground);color:var(--ivory);padding:clamp(46px,5vw,68px) 0;text-align:center} /* the max-widths need re-centring or they stay pinned left inside the band */ .lp-band h2{color:var(--ivory);font-size:clamp(1.6rem,3vw,2.15rem);margin:0 auto 18px;max-width:22ch} .lp-band p{color:rgba(248,249,250,.88);max-width:56ch;margin:0 auto 24px} /* ───────── benefits ───────── */ .lp-benefits{margin-top:clamp(34px,4vw,52px)} .lp-benefits h3{margin-bottom:20px} .lp-benefits ul{list-style:none;margin:0;padding:0;display:grid;gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .lp-benefits li{background:var(--ivory);border:1px solid rgba(127,179,211,.55);padding:18px 20px 19px} .lp-benefit-label{display:block;font-family:var(--fh);font-size:1.18rem;line-height:1.25;color:var(--navy)} .lp-benefit-body{display:block;margin-top:6px;font-size:0.9688rem;line-height:1.62;color:rgba(26,26,46,.82)} /* ───────── process – exactly three steps ───────── */ /* The intro pair and the CTA are centred; the cards keep their own left-aligned reading. Targeted rather than text-align on the section, which would centre the step copy too. */ .lp-process > .lp-wrap > h2, .lp-process > .lp-wrap > .lp-lead, .lp-process > .lp-wrap > .lp-cta-row{text-align:center} .lp-process > .lp-wrap > .lp-lead{margin-left:auto;margin-right:auto} .lp-steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,2.6vw,34px); grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .lp-steps li{background:var(--ivory);padding:26px 24px 26px;position:relative; box-shadow:0 0 0 1px rgba(26,26,46,.06)} .lp-step-n{display:block;font-family:var(--fh);font-size:2.4rem;line-height:1;color:var(--lav); margin-bottom:10px;transform-origin:left bottom} .lp-steps h3{font-size:1.3rem;margin:0 0 10px} .lp-steps p{font-size:0.9688rem;line-height:1.66;color:rgba(26,26,46,.84);margin:0} /* The closing line is the payoff, set apart from the lead-in with real space rather than just a line-break, and bolded rather than run in as more body copy. */ .lp-step-close{display:block;margin-top:14px} /* ── the three steps walk ────────────────────────────────────────────────── One, two, three, a beat, and round again - so the process reads as a sequence you move through rather than three boxes sitting still. Each card runs the same 6s cycle offset by 1.6s, which is why there is no JS here and nothing to fall out of sync. Only paint and transform are animated: the plum bar scales, the number scales and changes colour, the card changes ground and shadow. No layout property moves, so the row never reflows mid-cycle. */ .lp-steps li::before{ content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--plum); transform:scaleX(0);transform-origin:left center; } @keyframes lpStepCard{ 0%,100%{background:var(--ivory);box-shadow:0 0 0 1px rgba(26,26,46,.06)} 5%,24% {background:#fff;box-shadow:0 20px 44px -30px rgba(26,26,46,.62), 0 0 0 1px rgba(221,160,221,.55)} 30% {background:var(--ivory);box-shadow:0 0 0 1px rgba(26,26,46,.06)} } @keyframes lpStepBar{ 0% {transform:scaleX(0)} 5%,24% {transform:scaleX(1)} 30%,100%{transform:scaleX(0);transform-origin:left center} } @keyframes lpStepNum{ 0%,100%{color:var(--lav);transform:scale(1)} 5%,24% {color:var(--plum-deep);transform:scale(1.18)} 30% {color:var(--lav);transform:scale(1)} } .lp-steps li, .lp-steps li::before, .lp-steps li .lp-step-n{ animation-duration:6s;animation-timing-function:cubic-bezier(.22,1,.36,1); animation-iteration-count:infinite; } .lp-steps li{animation-name:lpStepCard} .lp-steps li::before{animation-name:lpStepBar} .lp-steps li .lp-step-n{animation-name:lpStepNum} .lp-steps li:nth-child(2), .lp-steps li:nth-child(2)::before, .lp-steps li:nth-child(2) .lp-step-n{animation-delay:1.6s} .lp-steps li:nth-child(3), .lp-steps li:nth-child(3)::before, .lp-steps li:nth-child(3) .lp-step-n{animation-delay:3.2s} /* Reduced motion: the sequence stops and every card rests. The bar stays drawn on all three so nothing looks half-finished. */ @media (prefers-reduced-motion:reduce){ .lp-steps li,.lp-steps li::before,.lp-steps li .lp-step-n{animation:none} .lp-steps li::before{transform:scaleX(1)} .lp-steps li .lp-step-n{color:var(--plum-deep)} } /* ───────── trust + about ───────── */ /* The section title reads as a title: centred, and given real air before the three reasons rather than the standard 22px that had it sitting on top of them. The About Cindy block below keeps its left-aligned reading. */ .lp-trust > .lp-wrap > h2{text-align:center;margin-bottom:clamp(40px,4.6vw,64px)} .lp-pillars{display:grid;gap:clamp(20px,2.6vw,34px);grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .lp-pillar h3{font-size:clamp(1.32rem,2.2vw,1.62rem);font-weight:600;color:var(--navy); margin:0 0 12px;padding-bottom:.36em;border-bottom:1px solid var(--lav)} .lp-pillar p{font-size:0.9688rem;line-height:1.68;color:rgba(26,26,46,.84);margin:0} .lp-about{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(28px,3.6vw,54px); align-items:start;margin-top:clamp(38px,4.4vw,64px)} .lp-about-portrait{margin:0;position:relative;padding:0 0 22px 22px} .lp-about-portrait::before{content:"";position:absolute;left:0;bottom:0; width:calc(100% - 40px);height:calc(100% - 48px);background:var(--sky)} .lp-about-portrait img{position:relative;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:2px} .lp-about-copy{background:var(--ivory);padding:clamp(24px,3vw,36px)} .lp-about-copy h3{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:0 0 14px} .lp-about-copy p{font-size:1.0125rem;line-height:1.76;color:rgba(26,26,46,.88)} .lp-sig{font-family:var(--fh);font-style:italic;font-size:1.24rem;color:var(--plum-deep)} .lp-creds{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px} .lp-creds li{font-size:0.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--plum-deep)} /* ───────── FAQ – the main site's accordion, same mechanism ───────── */ .lp-faq-list{display:flex;flex-direction:column;max-width:900px} .faq-q{border-top:1px solid var(--rule);margin:0} .faq-q:last-child{border-bottom:1px solid var(--rule)} .faq-q > button{all:unset;box-sizing:border-box;display:flex;align-items:flex-start;gap:18px; width:100%;cursor:pointer;padding:22px 0 21px; font-family:var(--fh);font-size:clamp(1.16rem,2vw,1.38rem);line-height:1.24;color:var(--navy)} .faq-q > button:focus-visible{outline:2.5px solid var(--sky-deep);outline-offset:3px} .faq-q > button .qtext{flex:1 1 auto} /* A rotating chevron, not a +/- toggle. Two reasons it is drawn rather than composed from the brand mark: a generic plus/minus is the one accordion affordance the house style rules out, and the mark itself belongs only where a NAME sits on it or as a nav state - never on a button. */ .faq-chev{flex:0 0 auto;width:13px;height:13px;margin-top:.42em;position:relative} .faq-chev::before{content:"";position:absolute;left:1px;top:1px;width:9px;height:9px; border-right:1.8px solid var(--plum-deep);border-bottom:1.8px solid var(--plum-deep); transform:rotate(45deg);transform-origin:center; transition:transform .38s cubic-bezier(.22,1,.36,1)} .faq-q[data-open="true"] .faq-chev::before{transform:rotate(-135deg)} .faq-q[data-open="true"] > button{color:var(--plum-deep)} .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.22,1,.36,1)} .faq-q[data-open="true"] .faq-a{grid-template-rows:1fr} .faq-a > div{overflow:hidden;min-height:0} .faq-a p{font-size:1.0125rem;line-height:1.78;color:rgba(26,26,46,.86);margin:0 0 1em;max-width:62ch} .faq-a > div > *:last-child{margin-bottom:24px} /* ───────── what happens next ───────── */ /* her doc's four closing lines, at body size - they had been split across two sections with one of them set as a display lead */ .lp-firststep{margin:0 0 1.6em;max-width:56ch} .lp-firststep p{font-size:1.025rem;line-height:1.78;color:rgba(26,26,46,.88);margin:0 0 1em} .lp-firststep p:last-child{margin-bottom:0} .lp-next-title{font-size:clamp(1.32rem,2.2vw,1.62rem);font-weight:600;color:var(--navy);margin:0 0 14px} .lp-tel-inline{font-weight:700;color:var(--plum-deep);text-decoration:underline; text-underline-offset:3px;text-decoration-thickness:1.5px; transition:color .22s ease,text-decoration-color .22s ease} .lp-tel-inline:hover,.lp-tel-inline:focus-visible{color:var(--sky-deep);text-decoration-thickness:2.5px} .lp-next-steps{margin:0;padding-left:1.3em;max-width:64ch} .lp-next-steps li{margin-bottom:.7em;font-size:1.0125rem;line-height:1.7} .lp-next-steps li::marker{color:var(--plum-deep);font-weight:700} .lp-next-steps strong{display:block} .lp-next-steps span{color:rgba(26,26,46,.84)} /* ───────── form ───────── */ .lp-form-sec{background:var(--rung3);padding:clamp(52px,6vw,86px) 0; --lp-form-col:470px;--lp-form-gap:clamp(30px,4vw,56px)} .lp-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--lp-form-col)); gap:var(--lp-form-gap);align-items:start} .lp-form-copy h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin:0 0 18px} .lp-form-copy p{font-size:1.025rem;line-height:1.78;color:rgba(26,26,46,.88)} .cc{display:block;background:var(--ivory);border:1px solid rgba(127,179,211,.55); padding:16px 20px 17px;text-decoration:none;margin-top:22px;max-width:360px; transition:border-color .3s ease,box-shadow .3s ease} .cc:hover,.cc:focus-visible{border-color:var(--plum);box-shadow:0 14px 30px -22px rgba(26,26,46,.5)} .cc-label{display:block;font-size:0.7812rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--plum-deep);margin-bottom:5px} .cc-value{display:block;font-family:var(--fh);font-size:1.2rem;line-height:1.3;color:var(--navy)} /* two assurances under the contact block, one per column */ .lp-assurances{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,var(--lp-form-col)); gap:var(--lp-form-gap);margin-top:clamp(34px,4vw,56px); padding-top:clamp(28px,3.4vw,42px);border-top:1px solid rgba(26,26,46,.14)} .lp-assurances h3{font-size:clamp(1.16rem,1.9vw,1.34rem);font-weight:600;color:var(--navy);margin:0 0 10px} .lp-assurances p{font-size:0.9688rem;line-height:1.7;color:rgba(26,26,46,.84);margin:0 0 .6em} .lp-assurances p:last-child{margin-bottom:0} .lp-note{font-size:1.025rem;color:rgba(26,26,46,.84);margin:0 auto 24px;max-width:46ch} .form-wrap{background:var(--ivory);border:1px solid rgba(127,179,211,.6);padding:30px 28px 28px} .lp-form-card-title{font-size:1.4rem;margin:0 0 18px} .form-note{font-size:0.8125rem;line-height:1.5;color:rgba(26,26,46,.64);margin:14px 0 0;text-align:center} /* ───────── footer ───────── */ .lp-footer{background:var(--footer-bg);color:var(--footer-text);padding:46px 0 30px} .lp-footer .foot-brand{font-size:1.3125rem;color:var(--ivory);display:inline-block;text-decoration:none} .lp-footer .brand-rule{color:var(--plum)} .lp-footer .foot-brand:hover .brand-rule{color:var(--ivory)} .lp-foot-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:14px 26px;margin-top:26px;padding-top:20px;border-top:1px solid rgba(248,249,250,.14)} .lp-foot-links{display:flex;flex-wrap:wrap;gap:22px;font-size:0.875rem} .lp-foot-links a{color:rgba(248,249,250,.76);text-decoration:none;transition:color .22s} .lp-foot-links a:hover{color:var(--plum)} .copy{font-size:0.8438rem;color:rgba(248,249,250,.58);margin:0} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .btn,.btn-arrow,.faq-a,.faq-chev::before,.faq-chev::after,.lp-nav a::before, .hdr-tel,.hdr-tel .rn,.brand-rule{transition:none} } /* ══════════════ responsive ══════════════ The second condition is a phone in LANDSCAPE (~926px wide, ~428px tall), which every bare max-width rule would skip entirely. This file inherits nothing from client.css, so the condition is restated here in full. */ @media (max-width:1024px){ .lp-split{grid-template-columns:minmax(0,1fr) minmax(0,36%);gap:32px} .lp-form-sec{--lp-form-col:400px;--lp-form-gap:36px} .lp-nav a{padding:9px 7px;font-size:0.7188rem} } @media (max-width:71.25em), (hover:none) and (pointer:coarse) and (max-height:500px){ :root{--hdr-h:64px} .lp-wrap,.lp-hdr-in{padding-left:22px;padding-right:22px} /* No hamburger on this page: the anchor nav simply steps aside and the phone plus the CTA – the two things an ad visitor actually needs – stay in the header at every width. Nothing is hidden behind a drawer. */ .lp-nav{display:none} .lp-hdr-cta{margin-left:auto} /* Below this breakpoint the plates run the full width, so there is no clear column beside them - the only way the photograph survives is a real window of it ABOVE the stack. The extra top padding is that window, and because the image is height-bound at these widths (it overflows horizontally, not vertically) object-position X is live and can slide the praying hands into it. 82% puts them in the window rather than off the right edge. */ .lp-hero-in{min-height:clamp(620px,84vh,780px); padding:calc(var(--hdr-h) + 200px) 22px 34px;gap:6px} .lp-hero-img{object-position:82% 20%} .hero-plate{max-width:none;width:100%} .hero-plate{padding:22px 22px 24px} /* stacked, the hairlines have nothing to divide */ .lp-trustbar ul{justify-content:flex-start;gap:10px 26px;padding-top:16px;padding-bottom:16px} .lp-trustbar li + li::before{content:none} .lp-split,.lp-split--rev{grid-template-columns:minmax(0,1fr);gap:24px;min-height:0} .lp-split--rev .lp-copy,.lp-split--rev .lp-figure{order:0} .lp-figure img{position:relative;inset:auto;aspect-ratio:4/3;height:auto} .lp-about{grid-template-columns:minmax(0,1fr);gap:28px} .lp-about-portrait{max-width:280px;padding:0 0 18px 18px} .lp-form-grid{grid-template-columns:minmax(0,1fr);gap:30px} .lp-assurances{grid-template-columns:minmax(0,1fr)} .lp-foot-base{justify-content:flex-start} .form-wrap{padding:26px 22px 24px} /* A notched iPhone in landscape: viewport-fit=cover lets the art reach the physical edges, so the content column has to inset itself or copy slides under the notch. */ .lp-wrap,.lp-hdr-in{ padding-left:max(22px, env(safe-area-inset-left, 0px)); padding-right:max(22px, env(safe-area-inset-right, 0px)); } } @media (max-width:480px){ .lp-hero h1{font-size:2.1rem} .brand{font-size:1.12rem} /* On a phone the header keeps the PHONE, not the button: "Free Consultation" wraps to two lines at this width once the touch floor lifts it to 14px, which doubles the header height and clips the lockup. A tel: link is also the single highest-value tap on an ad landing page, and the form CTA is three hundred pixels below it either way. */ .lp-hdr-cta .btn{display:none} .lp-hdr-cta .hdr-tel{font-size:1rem} } /* ══════════════ touch minimums – ≥14px everywhere, ≥44px tap targets. Duplicated from client.css by design: this page loads neither that file nor the parent's. Never put `display` in this block – it resurrects hidden elements, and .lp-nav above is deliberately hidden. ══════════════ */ @media (hover:none) and (pointer:coarse){ button,input[type="submit"],input[type="button"]{font-size:14px} .btn,a.btn{font-size:14px;min-height:44px;box-sizing:border-box} .hdr-tel{font-size:14px;min-height:44px;align-items:center} /* both lockups — measured 26-32px tall on a phone, under the tap floor */ .brand,.lp-footer .foot-brand{min-height:44px} .lp-nav a{font-size:14px;min-height:44px;align-items:center} a[href^="tel:"],a[href^="mailto:"]{min-height:44px;padding-top:11px;padding-bottom:11px;box-sizing:border-box} /* the phone inside a numbered step is inline, so it needs its own box */ .lp-tel-inline{display:inline-block;min-height:44px;padding-top:11px;padding-bottom:11px;box-sizing:border-box} .faq-q > button{font-size:1.14rem;min-height:44px} .lp-trustbar li,.lp-creds li,.cc-label{font-size:0.9375rem} .lp-secondary a{min-height:44px;padding-top:8px;padding-bottom:10px} .lp-foot-links,.copy,.form-note{font-size:0.875rem} .lp-foot-links a{padding:11px 0;display:inline-block} .hero-geo-sub{font-size:0.9688rem} .lp-benefit-body,.lp-steps p,.lp-pillar p{font-size:0.9688rem} .wpforms-container .wpforms-field-label, .wpforms-container .wpforms-field-label.wpforms-field-label{font-size:14px !important;line-height:1.4 !important} .wpforms-form .wpforms-submit, button[type="submit"].wpforms-submit{min-height:44px !important;height:auto !important; padding-top:12px !important;padding-bottom:12px !important;box-sizing:border-box !important} }