/* Stillpoint ("Direction B") — sage gallery calm, roman serifs, arches. All colors/fonts come from tokens.css (semantic layer ONLY — --bg, --surface, --text, --accent, ... ). Pages must link tokens.css BEFORE this file. */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:hidden} body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-weight:300;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{display:block;max-width:100%} a{color:inherit} .wrap{max-width:1140px;margin:0 auto;padding:0 32px} /* connect-bar — cross-site band above the header linking therapy → MI training */ .connect-bar{background:var(--bg-tint);border-bottom:1px solid var(--line);font-family:var(--font-body)} .connect-bar-in{display:flex;align-items:baseline;justify-content:center;gap:16px;padding:9px 32px;font-size:12.5px;letter-spacing:.03em;color:var(--text-soft);flex-wrap:wrap} .connect-bar-in strong{color:var(--text);font-weight:500} .connect-bar-in a{color:var(--accent-hover);text-decoration:none;font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:10.5px;white-space:nowrap;border-bottom:1px solid var(--line);padding-bottom:1px} .connect-bar-in a:hover{color:var(--text)} /* header */ header.wrap{padding-top:16px} .header-in{display:flex;align-items:center;justify-content:space-between;gap:24px} .wordmark{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none} .wordmark .cred{font-weight:400;color:var(--olive-d)} nav{display:flex;align-items:center;gap:20px} nav a.navlink{text-decoration:none;font-size:12.5px;font-weight:400;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;padding-bottom:3px;border-bottom:2px solid transparent;transition:color .18s ease,border-color .18s ease} nav a.navlink:hover{color:var(--accent-hover);border-bottom-color:var(--line)} nav a.navlink[aria-current="page"]{color:var(--accent-hover);border-bottom-color:var(--accent)} .btn{display:inline-block;background:var(--accent);color:var(--surface);font-weight:400;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:16px 34px;border-radius:999px;transition:background .2s ease;white-space:nowrap} header .btn{padding:13px 24px;font-size:11px;letter-spacing:.13em;margin-left:22px} .btn:hover{background:var(--accent-hover)} .btn.ghost{background:transparent;border:1px solid var(--text);color:var(--text)} .btn.ghost:hover{background:var(--text);color:var(--surface)} /* hero — centered */ .hero{padding:64px 0 40px;text-align:center} .eyebrow{font-size:12px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-hover);margin-bottom:var(--vr-eyebrow)} h1{font-family:var(--font-display);font-weight:500;font-size:clamp(40px,5.4vw,72px);line-height:1.08;letter-spacing:.005em;max-width:19em;margin:0 auto 30px} h1 em,h2 em,h3 em{font-style:normal;font-weight:inherit} .hero-sub{font-size:18.5px;max-width:46ch;margin:0 auto 40px} .hero-cta{display:flex;justify-content:center;gap:18px;flex-wrap:wrap} /* hero — split (homepage: text left, portrait right) */ .hero-split{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,72px);align-items:center;padding-block:48px 72px} .hero-text{text-align:left} .hero-text .eyebrow{margin-bottom:24px} .hero-text h1{font-size:clamp(31px,3.7vw,48px);line-height:1.12;max-width:none;margin:0 0 26px} .hero-text .hero-sub{margin:0 0 36px;max-width:44ch} .hero-text .hero-cta{justify-content:flex-start} .hero-media{display:flex;justify-content:center} .hero-media .arch{width:min(400px,100%)} /* homepage hero photo — arch (dome top), square; replaces the portrait */ .hero-media .hero-photo{width:100%;overflow:hidden;border-radius:999px 999px 80px 80px;box-shadow:0 24px 60px rgba(46,55,47,.16);background:var(--accent-warm)} .hero-media .hero-photo img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 55%;display:block} @media(max-width:820px){.hero-media .hero-photo{max-width:440px;margin:0 auto}} /* About-me hero: the "Who I am" intro (two paragraphs) beside the portrait */ .about-hero .hero-text .hero-sub{margin-bottom:18px} .about-hero .about-lede{font-size:17px;line-height:1.7;max-width:50ch;margin:0 0 18px} .about-hero .about-lede:last-child{margin-bottom:0} /* arch portrait */ .arch-stage{position:relative;display:flex;justify-content:center;padding:64px 0 96px} .arch{width:min(420px,78vw);aspect-ratio:5/6.4;border-radius:999px 999px 10px 10px;overflow:hidden;background:var(--accent-warm);box-shadow:0 24px 60px rgba(46,55,47,.16)} .arch img{width:100%;height:100%;object-fit:cover;object-position:50% 20%} /* who — title card + 7 rounded cards */ .who{padding:96px 0;background:var(--bg-tint);border-radius:64px 64px 0 0} .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .card{background:var(--surface);border-radius:22px;padding:34px 30px;display:flex;flex-direction:column;gap:12px} .card.title-card{background:transparent;padding:24px 10px;grid-column:1/-1} .card.title-card h2{font-size:clamp(30px,3vw,40px);line-height:1.12} .card h4{font-family:var(--font-display);font-weight:600;font-size:24px;line-height:1.2} .card p{font-size:15.5px;color:var(--text-soft)} /* in-card inline link (e.g. Early Psychosis "Learn more") — the only route to that page now, so give it a clear action color + weight instead of soft italic body */ .card p a{color:var(--accent-hover);font-weight:500;white-space:nowrap} .card p a em{font-style:normal} /* approach — deep band, centered statement */ .approach{background:var(--bg-deep);color:var(--surface);padding:120px 0;text-align:center;position:relative} .approach .eyebrow{color:var(--accent-warm)} .approach-quote{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,3.1vw,40px);line-height:1.35;max-width:24em;margin:0 auto} .approach-quote em{font-style:italic;color:var(--accent-warm)} /* the routing link at the end of the pull-quote stays on one line */ .approach-quote a{white-space:nowrap} .approach .btn{margin-top:var(--vr-cta);background:var(--surface);color:var(--bg-deep)} .approach .btn:hover{background:#fff} /* consult */ .consult{position:relative;overflow:hidden;background:var(--surface);border-radius:64px;margin-block:96px;padding-block:110px;text-align:center} .consult.note{padding-block:60px;margin-block:56px 96px;border-radius:44px} .consult.note .eyebrow{margin-bottom:22px} h2{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,3.4vw,46px);line-height:1.15} .consult h2{max-width:17em;margin:0 auto 24px} .consult p{max-width:56ch;margin:0 auto 14px} /* arch motif — reusable brand element: soft arch echoing the portrait arches, tucked off an edge behind content */ .consult > *{position:relative;z-index:2} .arch-motif,.consult-art{position:absolute;inset:0;z-index:1;pointer-events:none} .bg-arch{position:absolute;right:-130px;bottom:-150px;width:440px;aspect-ratio:5/6.4;border-radius:999px 999px 10px 10px;background:var(--bg-tint)} .bg-arch-line{position:absolute;right:-260px;bottom:40px;width:440px;aspect-ratio:5/6.4;border-radius:999px 999px 10px 10px;border:1.5px solid var(--accent);opacity:.18} /* margin arch motif — brand element bled into the side margins (Get Started hero) */ .page-hero.has-brand-art{position:relative} .page-hero.has-brand-art > .eyebrow,.page-hero.has-brand-art > h1{position:relative;z-index:1} .margin-arch{position:absolute;inset:0;z-index:0;pointer-events:none} .margin-arch span{position:absolute;width:360px;aspect-ratio:5/6.4;border-radius:999px 999px 12px 12px;border:1.5px solid var(--accent);opacity:.15} .margin-arch-l{top:20px;left:-230px} .margin-arch-r{top:150px;right:-230px} @media(max-width:1180px){.margin-arch{display:none}} /* footer */ footer{border-top:1px solid var(--line);padding:34px 0 44px;font-size:13px;letter-spacing:.06em;color:var(--text-soft)} .footer-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} /* interior — therapy */ .page-hero{padding-block:64px 0;text-align:center} .page-hero .lede{font-size:18.5px;max-width:66ch;margin:0 auto;text-align:left} .therapy-body{max-width:760px;margin:0 auto;padding:32px 32px 0} .story{padding-block:72px 88px} .story-head{text-align:center;max-width:640px;margin:0 auto var(--vr-header)} .story-head:has(.eyebrow:only-child){margin-bottom:var(--vr-eyebrow)} .story-list{max-width:820px;margin:0 auto;columns:2;column-gap:56px} .story-list li{list-style:none;padding:13px 0 13px 30px;border-bottom:1px solid var(--line);font-size:16.5px;break-inside:avoid;position:relative} .story-list li::before{content:"";position:absolute;left:2px;top:22px;width:14px;height:9px;border-radius:999px 999px 0 0;background:var(--accent)} .room{background:var(--bg-tint);border-radius:64px;padding:96px 0;text-align:center} /* My-approach: "Your story" is the boxed section (tint room); "In the room" is plain on the page (centered), so the two don't read as stacked boxes. */ .story-section{padding-top:72px} .in-room{text-align:center;padding:72px 0 96px} .in-room .lede{max-width:60ch;margin:0 auto} .in-room .logistics{margin-top:44px} .room .lede{max-width:66ch;margin:0 auto;text-align:left;font-size:18.5px} .room h2{margin-bottom:28px} .logistics{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:44px} .chip{background:var(--surface);border-radius:999px;padding:12px 26px;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase} .therapy-figure{max-width:940px;margin:0 auto 8px;padding:0 32px} .therapy-figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 60%;border-radius:24px;box-shadow:0 24px 60px rgba(46,55,47,.14);display:block} /* early-psychosis intro: intro prose beside the woods image (no heading — the page title carries it). Desktop: text left, image right, vertically centered. Mobile: text then image. "How I work with it" is a separate cream panel below. */ .ep-intro{max-width:1040px;margin:0 auto;padding:40px 32px 0;display:grid;grid-template-columns:1fr .78fr;gap:56px;align-items:center} .ep-what p{margin:0} .ep-figure{margin:0} .ep-figure img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 60%;border-radius:24px;box-shadow:0 24px 60px rgba(46,55,47,.14);display:block} .ep-how-sec{padding-top:56px} @media(max-width:820px){.ep-intro{grid-template-columns:1fr;gap:26px}.ep-how-sec{padding-top:36px}} /* therapy hero — two-column intro (mirrors homepage .hero-split) with the raised-corner image frame */ .hero-split.therapy-hero{padding-block:48px 40px} .hero-split.therapy-hero h1{font-size:clamp(34px,4.2vw,56px)} .hero-split.therapy-hero .lede{font-size:17px;line-height:1.7;max-width:46ch;margin:0} .hero-media .frame{width:min(400px,100%)} .frame img{width:100%;height:100%;object-fit:cover;display:block} /* raised-corner frame — one exaggerated top-outer corner, calm elsewhere (arch family, not the portrait arch) */ .f-corner{aspect-ratio:5/6;overflow:hidden;background:var(--accent-warm);box-shadow:0 24px 60px rgba(46,55,47,.16);border-radius:28px 50% 28px 28px / 28px 40% 28px 28px} /* responsive rules live at the END of this file so they win the cascade */ /* interior — shared prose */ .therapy-body p{margin-bottom:18px} .therapy-body p:last-child{margin-bottom:0} .therapy-body h3{font-family:var(--font-display);font-weight:600;font-size:27px;line-height:1.2;margin:var(--vr-before-heading) 0 var(--vr-after-heading)} .therapy-body h3:first-child{margin-top:0} /* small arch portrait (interior pages) */ .arch-stage.compact{padding:40px 0 72px} .arch.arch-sm{width:min(320px,70vw)} /* cream panels (rates etc.) */ .panel{background:var(--surface);border-radius:22px;padding:48px 44px;max-width:760px;margin:0 auto var(--vr-stack)} .panel h3{font-family:var(--font-display);font-weight:600;font-size:27px;line-height:1.2;margin-bottom:16px} .panel p{margin-bottom:16px;font-size:16.5px;color:var(--text-soft)} .panel p:last-child{margin-bottom:0} /* highlighted callout panel — a distinct, warmer box (e.g. the accessibility note) */ .panel.panel-note{background:var(--bg-tint);border-left:3px solid var(--accent);padding:32px 40px} .panel.panel-note p{color:var(--text)} .panel-stage{padding:32px 0 96px} /* faq */ .faq{max-width:760px;margin:0 auto;padding:32px 32px 96px} .faq-item{padding:34px 0;border-bottom:1px solid var(--line)} .faq-item:first-child{border-top:1px solid var(--line)} .faq-item h3{font-family:var(--font-display);font-weight:600;font-size:27px;line-height:1.2;margin-bottom:12px} .faq-item p{font-size:16.5px;color:var(--text-soft)} /* highlighted callout inside a FAQ answer (e.g. the accessibility note) */ .faq-note{margin-top:14px;background:var(--bg-tint);border-left:3px solid var(--accent);padding:15px 20px;border-radius:0 12px 12px 0;color:var(--text);font-size:16.5px} /* get started — form */ .form-card{background:var(--surface);border-radius:22px;padding:52px 48px;max-width:760px;margin:48px auto 0} /* Get Started: two equal either/or options (book vs message) */ .start-options{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px;margin:16px auto 0} .start-card{background:var(--surface);border-radius:22px;padding:36px 32px;display:flex;flex-direction:column;gap:12px} .start-card h3{font-family:var(--font-display);font-weight:600;font-size:24px;line-height:1.2} .start-card p{font-size:15.5px;color:var(--text-soft);flex:1;margin:0} .start-card .btn{align-self:flex-start;margin-top:6px} #contact-form{scroll-margin-top:24px} @media(max-width:640px){.start-options{grid-template-columns:1fr}} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .field{display:flex;flex-direction:column;gap:8px;min-width:0} .field.full{grid-column:1/-1} .field label{font-size:11.5px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-hover)} .field input,.field select,.field textarea{font-family:var(--font-body);font-weight:300;font-size:16px;line-height:1.5;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;width:100%} .field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:46px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5' fill='none' stroke='%2339423A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center} .field textarea{min-height:150px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)} .form-card .btn{border:0;cursor:pointer;font-family:var(--font-body);margin-top:26px} .form-note{font-size:13px;letter-spacing:.02em;color:var(--text-soft);margin-top:20px;font-style:italic} /* contact form: hidden honeypot + submit status */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-status{margin-top:20px;font-size:15px;line-height:1.5} .form-status:empty{margin:0} .form-status.ok{color:var(--accent-hover)} .form-status.err{color:#9a4a3c} /* footer links */ footer a{text-decoration:none;border-bottom:1px solid var(--line)} footer a:hover{color:var(--accent-hover)} /* ============ ABOUT TEASER (homepage) — small portrait + a routing intro to about.html. Uses the raised-corner frame (not the arch) so it reads as a distinct moment from the hero portrait above it. ============ */ .about-teaser{display:grid;grid-template-columns:.72fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;padding-block:96px} .about-teaser-media{display:flex;justify-content:center} .about-teaser-media .frame{width:min(300px,100%)} .about-teaser h2{font-size:clamp(27px,2.9vw,38px);line-height:1.15;margin-bottom:var(--vr-after-heading)} .about-teaser p{max-width:52ch;color:var(--text-soft)} .about-teaser .btn{margin-top:var(--vr-cta)} @media(max-width:820px){ .about-teaser{grid-template-columns:1fr;gap:32px;padding-block:72px;text-align:center} .about-teaser p{margin-inline:auto} .about-teaser-media .frame{width:min(260px,70vw)} } /* ============ MOTION — on-load + scroll reveal (progressive, accessible) ============ */ @media (prefers-reduced-motion: no-preference){ @keyframes riseIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} /* on load: header fades, hero content rises in with a stagger */ header{animation:fadeIn 1s ease both} .hero > *,.hero .wrap > *,.page-hero > *,.hero-split .hero-text > *{animation:riseIn .9s cubic-bezier(.2,.7,.2,1) both} .hero > *:nth-child(2),.hero .wrap > *:nth-child(2),.page-hero > *:nth-child(2),.hero-split .hero-text > *:nth-child(2){animation-delay:.09s} .hero > *:nth-child(3),.hero .wrap > *:nth-child(3),.page-hero > *:nth-child(3),.hero-split .hero-text > *:nth-child(3){animation-delay:.18s} .hero > *:nth-child(4),.hero .wrap > *:nth-child(4),.page-hero > *:nth-child(4),.hero-split .hero-text > *:nth-child(4){animation-delay:.27s} .arch-stage,.hero-split .hero-media{animation:riseIn 1.05s cubic-bezier(.2,.7,.2,1) .2s both} } /* below-the-fold scroll reveal — targets get .reveal from anim.js (gated on reduced-motion there) */ .reveal{opacity:0;transform:translateY(32px)} .reveal.in{opacity:1;transform:none;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)} /* ============ RESPONSIVE (kept last so it wins the cascade) ============ */ @media(max-width:1000px){ .cards{grid-template-columns:repeat(2,1fr)} } @media(max-width:960px){ .header-in{flex-direction:column;gap:16px} nav{flex-wrap:wrap;justify-content:center;gap:12px 18px;width:100%} /* comfortable tap targets + separate the CTA pill from the wrapped nav row */ nav a.navlink{padding:11px 4px} header .btn{margin-left:0;margin-top:6px;flex-basis:100%;max-width:260px} } @media(max-width:820px){ .hero-split{grid-template-columns:1fr;gap:44px;padding-block:48px 64px} .hero-text{text-align:center} .hero-text h1{margin:0 auto 26px} .hero-text .hero-sub{margin:0 auto 36px} .hero-text .hero-cta{justify-content:center} .hero-media .arch{width:min(340px,78vw)} } @media(max-width:640px){ .wrap{padding:0 20px} nav{gap:10px 16px} nav a.navlink{font-size:12.5px;letter-spacing:.1em;padding:11px 4px} .connect-bar-in{flex-direction:column;align-items:center;text-align:center;gap:6px;font-size:11px;letter-spacing:.01em;padding:8px 16px} .connect-bar-in span{white-space:nowrap} .connect-bar-in a{font-size:11px} .page-hero .eyebrow,.hero-text .eyebrow{margin-top:8px} .btn{padding:13px 22px;font-size:11.5px} header .btn{white-space:normal;text-align:center;max-width:260px} h1{font-size:clamp(32px,8.5vw,44px)} /* "Who I work with" — compact two-column grid on mobile (title spans) */ .who .cards{grid-template-columns:1fr 1fr;gap:12px} .who .card.title-card{grid-column:1/-1;padding:6px 4px 2px} .who .card:not(.title-card){padding:20px 18px} .who .card h4{font-size:20px;line-height:1.15} .who .card p{font-size:13.5px;line-height:1.5} .story-list{columns:1} /* --- mobile vertical rhythm: redefine the scale ONCE; every tokenized rule (eyebrow, story-head, subheadings, CTAs, stacked panels) follows automatically --- */ :root{ --vr-eyebrow:16px; --vr-after-heading:12px; --vr-before-heading:32px; --vr-header:28px; --vr-cta:28px; --vr-cta-alt:20px; --vr-stack:16px; --vr-section:56px; } /* section bands normalize to one value on mobile */ .page-hero{padding-block:44px 0} .hero-split{padding-block:40px var(--vr-section)} .story{padding-block:var(--vr-section)} .who,.approach{padding:var(--vr-section) 0} .about-teaser{padding-block:var(--vr-section)} .story-section{padding-top:var(--vr-section)} .in-room{padding:var(--vr-section) 0} .in-room .logistics{margin-top:28px} .consult{padding-block:52px;border-radius:36px;margin-block:var(--vr-section);margin-inline:16px} .room{border-radius:36px;padding:48px 0} .panel-stage{padding:24px 0 var(--vr-section)} .faq{padding:24px 20px var(--vr-section)} .room h2,.consult h2{margin-bottom:20px} .bg-arch{width:320px;right:-140px} .bg-arch-line{width:320px;right:-210px;opacity:.14} .panel{padding:36px 26px} .form-card{padding:36px 26px} .form-grid{grid-template-columns:1fr} } /* ============ MOBILE NAV — hamburger + slide-down panel (<=820px) ============ Desktop (>820px) untouched: the toggle is display:none and nav keeps its existing rules. Below 820px the header returns to a row (wordmark left, hamburger right) and the