/* ============ Tokens ============ */ :root{ --paper:#f2f6f5; --white:#fdfefd; --ink:#102d35; --green:#092229; --ox:#8ed8e8; --oxwash:#dbeef2; --gold:#e84d38; --gold-deep:#c2371f; --muted:#51666c; --muted-dark:#9fb8bd; --line:#d3dedd; --line-dark:rgba(255,255,255,.18); --pad:clamp(20px,4vw,56px); --rad:22px; --rad-img:14px; --serif:"Libre Caslon Display",Georgia,serif; --serif-i:"Libre Caslon Text",Georgia,serif; --sans:"DM Sans",Arial,sans-serif; --shadow:0 24px 60px rgba(9,34,41,.16),0 4px 14px rgba(9,34,41,.08); } *{box-sizing:border-box} html{scroll-behavior:smooth} html,body{overflow-x:clip} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.55} a{color:inherit;text-decoration:none} button,input,textarea{font:inherit} button{color:inherit} /* height:auto is REQUIRED — images carry intrinsic width/height attributes (for CLS), and without this the raw pixel height wins wherever CSS only sets width. */ img{max-width:100%;height:auto;display:block} .skip-link{position:fixed;top:0;left:1rem;z-index:1000;padding:.75rem 1rem;background:var(--white);border-radius:0 0 12px 12px;transform:translateY(-120%)} .skip-link:focus{transform:none} /* ============ Kicker system ============ */ .kicker,.eyebrow{display:flex;align-items:center;gap:.8rem;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;margin:0 0 1.6rem} .kicker:before{content:"";width:44px;height:2px;background:var(--gold);flex:none} .mini-kicker{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;margin:0 0 1rem} /* ============ Buttons & links ============ */ .button{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;border:0;border-radius:999px;padding:1rem 1.75rem;font-size:.95rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;line-height:1} .button:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(9,34,41,.18)} .button-gold{background:var(--gold);color:#07181d} .button:focus-visible,.text-link:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible+*,.ba input:focus-visible~.ba-handle{outline:2px solid var(--gold);outline-offset:3px} /* ============ Header (pill nav) ============ */ .site-header{position:sticky;top:0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:76px;padding:0 var(--pad);background:rgba(242,246,245,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .25s,background .25s} .site-header.compact{min-height:62px;background:rgba(242,246,245,.95);box-shadow:0 8px 24px rgba(9,34,41,.08)} .brand{display:inline-flex;align-items:center;gap:.72rem;font-size:1.1rem;font-weight:600;letter-spacing:-.03em} .brand em{font-family:var(--serif);font-weight:400} .brand-mark{position:relative;width:26px;height:26px;display:block} .brand-mark i{position:absolute;width:9px;height:9px;border-color:currentColor;border-style:solid} .brand-mark i:nth-child(1){top:0;left:0;border-width:1.5px 0 0 1.5px} .brand-mark i:nth-child(2){top:0;right:0;border-width:1.5px 1.5px 0 0} .brand-mark i:nth-child(3){bottom:0;left:0;border-width:0 0 1.5px 1.5px} .brand-mark i:nth-child(4){right:0;bottom:0;border-width:0 1.5px 1.5px 0} .site-header nav{display:flex;gap:.4rem} .site-header nav a{padding:.55rem 1.05rem;border-radius:999px;font-size:.85rem;font-weight:500;transition:background .2s} .site-header nav a:hover,.site-header nav a:focus-visible{background:rgba(9,34,41,.07)} .header-cta{justify-self:end;padding:.8rem 1.4rem;font-size:.85rem} .menu-button{display:none;background:none;border:0;font-weight:600;cursor:pointer;padding:.6rem 1rem;border-radius:999px;border:1px solid var(--line)} /* Legal and thanks pages carry no nav and no menu button. The 1020px rule hides .header-cta and hands over to .menu-button — with no menu button on those pages that would leave them with no way back, so .header-plain opts out of the swap. */ .site-header.header-plain{grid-template-columns:1fr auto} /* ============ Hero ============ */ .hero{position:relative;padding:clamp(4rem,9vh,7.5rem) var(--pad) 0;text-align:center} .hero-inner{position:relative;z-index:1;max-width:1280px;margin:0 auto} .booking-chip:hover,.booking-chip:focus-visible{color:var(--ink)} .booking-chip:hover .chip-arrow{transform:translateY(2px)} .hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(3.2rem,7.4vw,7.5rem);line-height:.96;letter-spacing:-.04em;margin:0 0 1.8rem;text-wrap:balance} .hs1:after{content:"";position:absolute;inset:18%;border-radius:50%;border:1px solid rgba(16,45,53,.09)} @keyframes drift1{to{transform:translate(-34px,42px) rotate(6deg)}} @keyframes drift2{to{transform:translate(26px,-30px) rotate(-4deg)}} @keyframes drift3{to{transform:translate(44px,26px)}} .service-bar .button{margin-left:clamp(.5rem,2vw,1.5rem)} /* ============ Ticker ============ */ .ticker{overflow:hidden;background:var(--ox);padding:1.05rem 0} .ticker div{display:flex;gap:2rem;width:max-content;animation:ticker 28s linear infinite;text-transform:uppercase;font-size:.7rem;font-weight:600;letter-spacing:.14em} .ticker i{font-style:normal;color:var(--gold-deep)} @keyframes ticker{to{transform:translateX(-50%)}} /* ============ Section scaffolding ============ */ .section{padding:clamp(90px,12vh,150px) var(--pad)} .section>.kicker,.section>h2,.section>.lead,.section>.steps-row,.section>.service-list,.section>.addon,.section>.note,.section>.team-row,.section>.work-head,.section>.case-card,.section>.feat-head,.section>.feat-row,.aftercare-row,.contact-grid,.ed-row{max-width:1240px;margin-left:auto;margin-right:auto} .section h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,4.6vw,4.4rem);line-height:1;letter-spacing:-.035em;margin:0 0 1.6rem;text-wrap:balance} .section h2 em{font-weight:400} .lead{font-size:1.1rem;max-width:58ch;margin:0 0 2.2rem} .lead-center{margin:0 auto 3.5rem;text-align:center} .dark-pass{background:var(--green);color:var(--paper)} .dark-pass .lead,.dark-pass .note{color:var(--muted-dark)} .sky-pass{background:var(--oxwash)} .sky-pass .lead{color:#274850} .chip-list li:before{content:"";width:8px;height:8px;background:var(--gold);flex:none} .fact-stack{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-dark)} .fact-stack li{padding:1.15rem 0;border-bottom:1px solid var(--line-dark)} .fact-stack b{display:flex;align-items:center;font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.1} .fact-stack b:before{content:"";width:8px;height:8px;background:var(--gold);margin-right:.85rem;flex:none} .fact-stack span{display:block;margin:.4rem 0 0 1.35rem;font-size:.92rem;color:var(--muted-dark)} /* ============ Editorial rows ============ */ .ed-row{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center} .ed-flip .ed-text{order:1} .ed-flip .ed-visual{order:0} /* Websites visual: layered site sheets */ .ed-visual{position:relative} /* ============ Video feature ============ * Ported verbatim from the umbrella sheet (root index.html §414-425) so the therapist video section is the same component, not a lookalike. The one addition is the dark-pass pair at the end: the root runs this section on sky, but on this page #work is paper and #answers is sky, so a sky video section would put two sky grounds side by side. It runs on green here instead, and .vlist needs light text on that ground. */ .vframe{position:relative;aspect-ratio:16/9;border-radius:var(--rad-img);overflow:hidden; background:var(--green);box-shadow:0 30px 60px -30px rgba(16,45,53,.45)} .vplayer{display:block;width:100%;height:100%;object-fit:cover;background:var(--green)} /* No dividers: five ruled rows beside a single image read as a table and made the column look twice as long as the player. Markers and tight leading instead. */ .vlist{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.62rem} .vlist li{position:relative;padding-left:1.3rem;font-size:.95rem;line-height:1.42;color:#274850} .vlist li:before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;background:var(--gold)} .vlist b{font-weight:600;color:var(--ink)} #video .ed-row{align-items:center} @media(min-width:1021px){#video .ed-row{grid-template-columns:1.32fr .88fr;gap:clamp(2rem,4vw,3.5rem)}} /* Green ground: #274850 body text and ink bold both disappear on it. */ .dark-pass .vlist li{color:var(--muted-dark)} .dark-pass .vlist b{color:var(--paper)} /* ============ Work / portfolio ============ */ .work-head{margin-bottom:2.6rem} .work-head h2{margin:0} .case-card{position:relative;margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:calc(var(--rad) + 6px);padding:clamp(.8rem,1.6vw,1.4rem);box-shadow:var(--shadow)} .frame-corner,.photo-slot:before,.photo-slot:after{position:absolute;width:16px;height:16px;border-color:var(--gold);border-style:solid;pointer-events:none} .case-card .frame-corner.tl{top:-6px;left:-6px;border-width:2px 0 0 2px} .case-card .frame-corner.br{right:-6px;bottom:-6px;border-width:0 2px 2px 0} .photo-slot:before{content:"";top:12px;left:12px;border-width:1.5px 0 0 1.5px;border-color:var(--gold-deep);z-index:3} .photo-slot:after{content:"";right:12px;bottom:12px;border-width:0 1.5px 1.5px 0;border-color:var(--gold-deep);z-index:3} .ba-handle:before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:var(--gold)} .case-row{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(2rem,4vw,3.8rem);align-items:start;max-width:1240px;margin:0 auto} .case-row>*{min-width:0} .case-main{width:100%} .case-side{display:flex;flex-direction:column;align-items:flex-start;gap:1.3rem;padding-top:.4rem} .case-head{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3vw,2.7rem);line-height:1.08;letter-spacing:-.02em;margin:0;max-width:16ch} .case-head em{font-style:italic} .did-stack b:before{content:"";width:8px;height:8px;background:var(--gold);margin-right:.85rem;flex:none} .drag-hint:before{content:"◂ ▸";color:var(--gold);letter-spacing:.05em;margin-right:.55rem} .feat-head{display:flex;align-items:baseline;gap:1.4rem;margin:5rem auto 1.8rem;flex-wrap:wrap} .feat-head h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.4vw,2.2rem);margin:0} .feat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem} /* Padding is EQUAL top and bottom so the button + line sit optically centred between the hairline rule above and the section edge below. The section's own bottom padding is zeroed out so it can't add space on one side only. */ .cta-band{display:flex;align-items:center;justify-content:flex-start;gap:1.1rem 2.2rem;flex-wrap:wrap;max-width:1240px;margin:clamp(2.2rem,4vh,3.2rem) auto 0;padding:2.4rem 0;border-top:1px solid var(--line)} .section:has(> .cta-band:last-child){padding-bottom:0} .cta-band .button{flex:none} .cta-band p{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.15;letter-spacing:-.01em;max-width:26ch} .sky-pass .cta-band{border-top-color:rgba(9,34,41,.16)} .feat{background:var(--white);border:1px solid var(--line);border-radius:var(--rad);padding:1.1rem 1.1rem 1.4rem;transition:transform .25s,box-shadow .25s} .feat:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .feat h4{font-family:var(--serif);font-weight:400;font-size:1.2rem;margin:1.1rem .3rem .3rem} .feat p{margin:0 .3rem;font-size:.85rem;color:var(--muted)} .feat-shot:hover img,.feat-shot:focus-visible img{transform:scale(1.03)} .lightbox{border:0;border-radius:var(--rad);padding:.9rem .9rem 1rem;width:min(1080px,94vw);background:var(--white);box-shadow:var(--shadow)} .lightbox::backdrop{background:rgba(9,34,41,.74);backdrop-filter:blur(5px)} .lightbox img{width:100%;border-radius:var(--rad-img);border:1px solid var(--line)} .lb-cap{margin:.85rem .3rem .1rem;font-size:.86rem;color:var(--muted)} .lb-close{position:absolute;top:1.3rem;right:1.3rem;width:42px;height:42px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);cursor:pointer;font-size:.95rem;line-height:1} .lb-close:hover{background:var(--gold);color:#07181d} /* ============ Studio ============ */ .studio{text-align:center} .studio .kicker{justify-content:center} .studio .kicker:before{display:none} .studio .kicker:after{content:"";width:44px;height:2px;background:var(--gold);order:-1;margin-right:.8rem} .team-row{display:grid;grid-template-columns:repeat(2,minmax(0,420px));gap:2rem;justify-content:center;margin:0 auto} .person{background:var(--white);border:1px solid var(--line);border-radius:var(--rad);padding:1.2rem 1.2rem 1.8rem;text-align:left} .photo-slot{position:relative;aspect-ratio:1000/564;border-radius:var(--rad-img);overflow:hidden; background:radial-gradient(135% 115% at 50% 6%,#f2fbfd 0%,var(--oxwash) 48%,#a8dfec 100%)} .photo-slot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom;z-index:2; filter:drop-shadow(0 14px 24px rgba(16,45,53,.22))} .photo-slot .ps-ring,.photo-slot .ps-sq,.photo-slot .ps-dot{position:absolute;z-index:1;pointer-events:none} .photo-slot .ps-ring{width:58%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(16,45,53,.14);right:-13%;top:-24%} .photo-slot .ps-ring:after{content:"";position:absolute;inset:17%;border-radius:50%;border:1px solid rgba(16,45,53,.09)} .photo-slot .ps-sq{width:26%;aspect-ratio:1;border:1px solid rgba(232,77,56,.34);border-radius:9px;left:-7%;bottom:-14%;transform:rotate(11deg)} .photo-slot .ps-dot{width:13%;aspect-ratio:1;border-radius:50%;background:rgba(253,254,253,.55);left:9%;top:13%} .person h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;margin:1.3rem .4rem .2rem} .person .role{margin:0 .4rem .8rem;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-deep)} .person p{margin:0 .4rem;font-size:.92rem;color:var(--muted)} .z-row:nth-child(even) .z-text{order:1} .z-row:nth-child(even) .z-vis{order:0} .z-row:nth-child(even) .mock-panel{margin-left:0;margin-right:auto} .mp-search i:after{content:"";position:absolute;right:-4px;bottom:-3px;width:5px;height:2px;background:var(--ox);transform:rotate(45deg)} .mp-map:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.9) 44%,transparent 46%),linear-gradient(200deg,transparent 60%,rgba(255,255,255,.85) 62%,transparent 64%)} .mp-acts .is-call{background:var(--gold);color:#25120d} .mp-row span:before{content:"✓";font-size:.66rem} .mp-chart:before{content:"";position:absolute;left:0;right:0;bottom:1.25rem;border-bottom:1px solid var(--line)} .mp-chart .is-now i{background:linear-gradient(180deg,var(--gold) 0%,#f07a68 100%)} .mp-chart .is-now small{color:var(--gold-deep);font-weight:600} .z-row.visible .mp-chart i{animation:barRise .85s cubic-bezier(.2,.7,.2,1) backwards} @keyframes barRise{from{height:0}to{height:var(--h)}} .care-card li:before{content:"✓";display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:rgba(232,77,56,.13);color:var(--gold-deep);font-size:.72rem;font-weight:700;flex:none} /* ============ Contact ============ */ .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2.5rem,6vw,6rem);align-items:start} .contact-copy p{max-width:44ch} .contact-copy>p:not(.kicker):not(.contact-note){font-size:1.08rem;color:var(--muted-dark);margin:0 0 2rem} .contact-note{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:var(--ox);margin:0} .inquiry-form{background:var(--white);color:var(--ink);border-radius:var(--rad);padding:clamp(1.5rem,3.5vw,2.6rem);box-shadow:var(--shadow)} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem} .inquiry-form label{display:block;margin-bottom:1.3rem} .inquiry-form label>span{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.11em;margin-bottom:.45rem} .inquiry-form input,.inquiry-form textarea{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:.8rem .95rem;outline:none;transition:border-color .2s,box-shadow .2s} .inquiry-form input:focus,.inquiry-form textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(142,216,232,.4)} .inquiry-form textarea{resize:vertical} .inquiry-form input:user-invalid,.inquiry-form textarea:user-invalid{border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(232,77,56,.18)} .inquiry-form .button{width:100%;margin-top:.4rem} .field-hint{display:block;margin-top:.5rem;font-size:.78rem;line-height:1.5;font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)} .contact-alt{margin:.9rem 0 0;font-size:.92rem;color:var(--muted-dark)} .contact-alt a{border-bottom:1.5px solid var(--gold);padding-bottom:.12rem;font-weight:600;color:#e8f1f2} .footer-bottom a{border-bottom:1px solid rgba(255,255,255,.3)} .form-note{font-size:.72rem;color:var(--muted);margin:1rem 0 0} .honey{position:absolute;left:-9999px} /* ============ Footer ============ */ footer{padding:4rem var(--pad) 1.5rem;background:var(--green);color:var(--paper);display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;border-top:1px solid var(--line-dark)} .footer-brand{font-size:1.25rem} footer>p{max-width:420px;margin:0;justify-self:end;color:var(--muted-dark)} .footer-links{display:flex;gap:1.8rem;font-size:.85rem;flex-wrap:wrap} .footer-links a{display:inline-block;padding:.28rem 0;border-bottom:1px solid transparent;transition:border-color .2s} .footer-links a:hover{border-color:currentColor} .footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--line-dark);padding-top:1.1rem;color:var(--muted-dark);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em} /* ============ Legal pages & thanks (shared) ============ */ .legal-page{max-width:850px;margin:0 auto;padding:clamp(5rem,10vw,9rem) var(--pad)} .legal-page h1{font-family:var(--serif);font-size:clamp(3rem,7vw,5.5rem);font-weight:400;line-height:.95;letter-spacing:-.04em;margin:0 0 1rem} .legal-page h2{font-family:var(--serif);font-size:1.7rem;font-weight:400;margin:2.6rem 0 .5rem} .legal-page p{font-size:1.02rem;max-width:68ch} .legal-date{color:var(--muted);font-size:.72rem!important;text-transform:uppercase;letter-spacing:.1em} .contact.section .contact-copy .eyebrow{color:inherit} /* ============ Motion ============ */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.visible{opacity:1;transform:none} .no-js .reveal{opacity:1;transform:none} .service-list li.reveal:nth-child(even){transition-delay:.12s} /* ============ Responsive ============ */ @media(max-width:1020px){ .site-header{grid-template-columns:1fr auto} .site-header nav,.header-cta{display:none} .site-header.header-plain .header-cta{display:inline-flex} .menu-button{display:inline-flex;align-items:center;gap:.5rem} .site-header.open nav{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);padding:.6rem var(--pad) 1.2rem;border-bottom:1px solid var(--line)} .site-header.open nav a{padding:1rem .4rem;border-radius:0;border-bottom:1px solid var(--line)} .ed-row{grid-template-columns:1fr;gap:3rem} .case-row{grid-template-columns:1fr;gap:2.6rem} .case-head{max-width:24ch} .ed-flip .ed-visual{order:1} .feat-row{grid-template-columns:1fr 1fr} .z-row:nth-child(even) .z-text{order:0} .z-row:nth-child(even) .z-vis{order:1} .z-vis .mock-panel,.z-row:nth-child(even) .mock-panel{margin:0} .aftercare-row,.contact-grid{grid-template-columns:1fr} .team-row{grid-template-columns:repeat(2,1fr)} } @media(max-width:680px){ .site-header.header-plain .header-cta{padding:.6rem 1rem;font-size:.8rem} body{font-size:16px} .hero h1{font-size:clamp(2.7rem,13vw,4rem)} .service-bar .button{margin:1.2rem 0 0} .steps-row,.team-row,.field-row,.aftercare-cards{grid-template-columns:1fr} /* Portfolio becomes a swipe carousel: all six stay reachable without six screens of scrolling */ .feat-row{display:flex;grid-template-columns:none;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory; scroll-padding-left:var(--pad);padding:.25rem var(--pad) 1.1rem;margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1); -webkit-overflow-scrolling:touch;scrollbar-width:none} .feat-row::-webkit-scrollbar{display:none} .feat-row:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .feat{flex:0 0 82%;scroll-snap-align:start} .cta-band{margin-top:2rem;padding:1.9rem 0} .cta-band .button{width:100%;text-align:center} footer{grid-template-columns:1fr} footer>p{justify-self:start} .footer-bottom{flex-direction:column;gap:.5rem} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .reveal{opacity:1;transform:none} .ticker div{animation:none} } /* Libre Caslon Display ships no italic — Chrome would synthesize a fake slant. Libre Caslon Text is its companion face and has a true drawn italic. */ /* Libre Caslon Text is a text-optimised face: larger x-height than Display, so at the same px it reads oversized. .94em optically matches it to the Display roman. */ h1 em,h2 em,h3 em,.case-head em,.brand em,.hero h1 em{font-family:var(--serif-i);font-style:italic;font-size:.94em} /* ================================================================ THERAPISTS VERTICAL — additions only. Everything above is the shared Firm & Frame system, inherited from law-firms/styles.css unchanged. Four new components live here: .doors, .screen-check, .terms-card, .tier-not-yet — all built from existing primitives. No new radii, shadows, hues, or motion types. See therapists/DESIGN.md. ================================================================ */ /* Label variant: the row names the ways in rather than quoting survey shares. */ .doors-top.is-labels b{font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.15} .doors.visible .doors-web path{stroke-dashoffset:0} .no-js .doors-web path{stroke-dashoffset:0} .sc-q:before{content:"";width:8px;height:8px;background:var(--gold);margin-right:.85rem;flex:none;position:relative;top:-.24em} .fit-col.is-out h3 i{background:none;border:1.5px solid rgba(9,34,41,.34)} .fit-col.is-out li{color:#4d666f} /* quieter than the left column but still AA on sky wash */ /* --- .terms-card — ownership, deliberately document-like --- */ .terms-card{position:relative;max-width:920px;margin:3rem auto 0;background:var(--white);border:1px solid var(--line); border-radius:calc(var(--rad) + 6px);padding:clamp(1.6rem,3.4vw,2.8rem);box-shadow:var(--shadow)} .terms-card .frame-corner.tl{top:-6px;left:-6px;border-width:2px 0 0 2px} .terms-card .frame-corner.br{right:-6px;bottom:-6px;border-width:0 2px 2px 0} .terms-card dt:before{content:"";width:8px;height:8px;background:var(--gold);margin-right:.8rem;flex:none;position:relative;top:-.2em} /* --- Group practices --- */ /* .fact-stack is drawn for dark passes; this is its light-ground variant. */ .sky-pass .fact-stack{border-top-color:rgba(9,34,41,.16)} .sky-pass .fact-stack li{border-bottom-color:rgba(9,34,41,.16)} .sky-pass .fact-stack span{color:#33555e} .is-open{background:rgba(46,158,91,.16);color:#1e6b41} .is-full{background:rgba(9,34,41,.09);color:var(--muted)} /* --- Placeholder study frames (swapped for real shots later) --- */ .slot{aspect-ratio:16/10;border-radius:var(--rad-img);border:1px solid var(--line);position:relative;overflow:hidden; background:radial-gradient(120% 110% at 50% 4%,#f4fcfd 0%,var(--oxwash) 55%,#bce5ef 100%)} .slot .frame-corner.tl{top:12px;left:12px;border-width:1.5px 0 0 1.5px;border-color:var(--gold-deep)} .slot .frame-corner.br{right:12px;bottom:12px;border-width:0 1.5px 1.5px 0;border-color:var(--gold-deep)} /* Inline footer mail link was 16px tall — below the 24px target floor. */ .footer-bottom a{display:inline-block;padding:.34rem 0} @media(max-width:680px){ .sc-most:before{content:"Most sites: ";font-weight:600;color:var(--ox);opacity:.7} .sc-ours:before{content:"Ours: ";font-weight:600;color:var(--ox)} } /* `.section>h2` is given `margin-left/right:auto` by the max-width rule, but the later `.section h2` block ties it on specificity and its `margin` shorthand resets both to 0 — so every h2 sat 44px left of its own kicker and lead, and the centred `.studio` heading was off-centre. Matches the root fix. */ .section>h2{margin-inline:auto} /* ============================================================================ 2026-08-19 copy replacement — components the new text needs. Nothing here is a new visual language: each rule either lets an existing component hold longer copy, or gives an existing component a second column count. See the section notes below. ============================================================================ */ /* --- Featured design study: the .case-row from the law page, carrying prose instead of a before/after slider. --- */ .case-side p{margin:0;font-size:.98rem;line-height:1.6;color:var(--muted);max-width:46ch} .case-side .case-head{margin-bottom:-.2rem} .case-main .case-card .slot{border:0} .feat-row.is-two{grid-template-columns:repeat(2,1fr)} /* --- How we work: four steps at four across were 20 words each. The rewritten steps run two paragraphs, so they need half the row each. --- */ .steps-row.is-two{grid-template-columns:repeat(2,1fr)} .terms-card .did-stack b:before{position:relative;top:-.2em} /* .cta-band's hairline is drawn for light ground; on the green pass the light line was brighter than the type above it. */ .dark-pass .cta-band{border-top-color:var(--line-dark)} /* --- Contact: practice size replaces the states + clinicians pair --- */ .inquiry-form select{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--paper); padding:.8rem 2.4rem .8rem .95rem;outline:none;font:inherit;color:inherit;cursor:pointer; transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23092229' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .95rem center;background-size:12px 8px} .inquiry-form select:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(142,216,232,.4)} /* The nav carries five items now and the button label is longer. Between the 1020px nav cutoff and 1180px the three header cells were colliding. */ @media(max-width:1180px) and (min-width:1021px){ .site-header nav a{padding:.55rem .72rem} .header-cta{padding:.75rem 1.1rem;font-size:.8rem} } @media(max-width:1020px){ .steps-row.is-two{grid-template-columns:1fr 1fr} } @media(max-width:680px){ .steps-row.is-two,.feat-row.is-two{grid-template-columns:1fr} .feat-row.is-two{display:grid} } .service-bar .button{white-space:nowrap} @media(max-width:680px){ .sc-most:before{color:var(--muted)} .sc-ours:before{color:var(--gold-deep)} } /* --- Alignment and contrast corrections found in the browser --- */ /* The six-question section now closes on two centred lines; the note above them was the only left-ranged element in that coda. */ .note.is-coda{text-align:center} /* The contact note grew from one line to a sentence; at 44ch of letterspaced uppercase it stacked three lines tight against the email line. */ .contact-copy .contact-note{max-width:54ch} /* Brad, 2026-08-21: more air under the uppercase reassurance line so "Prefer email?" reads as a separate offer rather than a continuation of it. ⚠️ Scoped by id on purpose. The shared rule up at `.contact-copy>p:not(.kicker):not(.contact-note){margin:0 0 2rem}` scores (0,3,1) — each :not() contributes its argument — and had silently beaten the plain `.contact-alt{margin-top:1.3rem}` that used to sit here, so that override had never once applied. `.contact-copy>p.contact-alt` is only (0,2,1) and loses too. The id settles it. The same collision eats `.contact-alt{font-size:.92rem}`, so this line renders at 1.08rem, not .92rem. Both colliding rules sit above the THERAPISTS marker, so law-firms has it too. Left as found — only the spacing Brad asked about is fixed here. */ #contact .contact-copy>p.contact-alt{margin-top:2.6rem} /* --- "Before the first message" (#answers) --------------------------------- Rebuilt 2026-08-20 from Brad's canvas design 2a (Desktop/Therapy Website Section Design 2/Six Questions Section.dc.html). An accordion: six question rows, each opening onto a "most therapy sites" vs "the sites we build" pair. This RESTORES the comparison that design 1 had dropped. The canvas export drives every state through inline style strings from JS; here the states are classes and attribute selectors, so the styling stays in CSS and script.js only flips flags. */ .qa-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(2rem,5vw,5rem);align-items:end;max-width:1240px;margin:0 auto clamp(2.5rem,5vw,4rem)} .qa-head h2{max-width:20ch;text-wrap:pretty;margin:0} .qa-intro .lead{max-width:46ch;color:var(--muted);margin:0 0 1.4rem} .qa-controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap} .qa-all{background:none;border:1px solid var(--line);border-radius:999px;padding:.55rem 1.1rem; font-size:.78rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase; cursor:pointer;transition:border-color .2s,transform .2s} .qa-all:hover{border-color:var(--ink);transform:translateY(-1px)} .qa-count{font-size:.78rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)} .qa{list-style:none;margin:0 auto;padding:0;max-width:1240px;border-top:1px solid var(--line);counter-reset:qa} .qa>li{counter-increment:qa;border-bottom:1px solid var(--line)} .qa-h{margin:0;font-weight:400} .qa-btn{width:100%;display:grid;grid-template-columns:auto auto 1fr auto;gap:1rem;align-items:center; text-align:left;background:none;border:0;padding:1.35rem .25rem;cursor:pointer;color:inherit;transition:background .2s} /* Numeral from a counter, not markup — see .q-list note in the 2026-08-20 handover. */ .qa-btn:before{content:counter(qa,decimal-leading-zero);font-size:.72rem;font-weight:600; letter-spacing:.14em;color:var(--muted);min-width:1.6rem} .qa-btn:hover{background:rgba(253,254,253,.55)} .qa-sq{width:8px;height:8px;display:block;background:var(--gold);transition:transform .4s cubic-bezier(.2,.7,.2,1)} .qa-btn[aria-expanded="true"] .qa-sq{transform:rotate(45deg) scale(1.25)} .qa-q{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.15;letter-spacing:-.015em;text-wrap:pretty} .qa-ico{position:relative;width:34px;height:34px;border:1px solid var(--line);border-radius:999px;display:inline-block;flex:none} .qa-ico:before,.qa-ico:after{content:"";position:absolute;top:50%;left:50%;width:11px;height:1.5px; background:var(--ink);transform:translate(-50%,-50%)} .qa-ico:after{transform:translate(-50%,-50%) rotate(90deg); transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .3s} .qa-btn[aria-expanded="true"] .qa-ico:after{transform:translate(-50%,-50%) rotate(0deg);opacity:0} /* 0fr→1fr animates height without measuring a pixel value in JS. State class is .is-expanded, NOT .is-open: an unscoped `.is-open` rule already exists above for the group roster's availability badge, and reusing the name painted a green wash across every open panel. */ .qa-panel{display:grid;grid-template-rows:0fr;opacity:0; transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1),opacity .4s cubic-bezier(.2,.7,.2,1)} .qa-panel.is-expanded{grid-template-rows:1fr;opacity:1} .qa-panel-in{overflow:hidden} /* Without JS every answer must still be readable. */ .no-js .qa-panel{grid-template-rows:1fr;opacity:1} .qa>li.reveal:nth-child(2){transition-delay:.09s} .qa>li.reveal:nth-child(3){transition-delay:.18s} .qa>li.reveal:nth-child(4){transition-delay:.27s} .qa>li.reveal:nth-child(5){transition-delay:.36s} .qa>li.reveal:nth-child(6){transition-delay:.45s} /* Reuses the .terms-card shell; only width, inset marks and the two-column footer differ. */ .standard-card{max-width:900px;margin:clamp(3rem,6vw,5rem) auto 0} .standard-card .frame-corner{width:26px;height:26px} .standard-card .frame-corner.tl{top:14px;left:14px;border-width:2px 0 0 2px} .standard-card .frame-corner.br{right:14px;bottom:14px;border-width:0 2px 2px 0} .std-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(1.5rem,4vw,3rem);align-items:end} .standard-card .mini-kicker{color:var(--muted);margin:0 0 1rem} .standard-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,2.8vw,2.4rem); line-height:1.1;letter-spacing:-.02em;margin:0 0 1rem;max-width:28ch;text-wrap:pretty} .standard-card h3+p{margin:0;max-width:52ch;color:var(--muted)} /* Brad, 2026-08-21: the reassurance line centres under the button rather than ranging left off its edge. Matches .hero-act, which the hero handoff centres. */ .standard-act{display:flex;flex-direction:column;align-items:center;gap:.9rem} .standard-act span{font-size:.88rem;color:var(--muted);text-align:center} @media(max-width:680px){ .qa-btn{grid-template-columns:auto auto 1fr auto;gap:.7rem;padding:1.15rem .2rem} .standard-act .button{width:100%;text-align:center} /* .std-note keeps the desktop 3rem right padding: the inset corner mark occupies the bottom-right 40px, and 2.4rem cleared it by under 2px. */ } /* #answers moved onto the sky ground 2026-08-20, once #groups was removed and stopped forcing it to paper — this is the ground Brad's artboard specified. On sky the house hairline is rgba(9,34,41,.16), not --line (which is drawn for paper and nearly vanishes here). Same rule the .z-row / .cta-band use. */ .sky-pass .qa,.sky-pass .qa>li{border-color:rgba(9,34,41,.16)} .sky-pass .qa-ico,.sky-pass .qa-all{border-color:rgba(9,34,41,.22)} .sky-pass .qa-btn:hover{background:rgba(253,254,253,.6)} /* --- 2026-08-20 copy round: hero CTA stack, new sections ------------------- */ .sb-cta .button{margin-left:0} .not-list b:before{content:"";width:8px;height:8px;border:1.5px solid rgba(9,34,41,.34);flex:none} .not-list li>:not(b):not(span){grid-column:2} /* Six-question panels now carry one body of copy, not a two-card comparison. .qa-most / .qa-ours CSS above is left live but unused. */ .qa-body{padding:.4rem .25rem 1.8rem clamp(.25rem,6vw,3.9rem)} .qa-body p{margin:0;max-width:74ch;font-size:1.02rem;line-height:1.62;color:var(--muted)} @media(max-width:680px){ .sb-cta .button{width:100%;text-align:center} .qa-body{padding-left:.25rem} } /* Mobile menu CTA. The header's own .header-cta is a grid sibling of