/* =========================================================================
Modern Minds Health — modernmindshealth.com
Built 1:1 from the Paper design "MMH Home v3 / Desktop 1440" + "Mobile 390"
========================================================================= */
/* ---------- Font -------------------------------------------------------- */
@font-face {
font-family: 'SF Pro';
src: url('assets/fonts/SF-Pro.woff2') format('woff2-variations');
font-weight: 1 1000;
font-style: normal;
font-display: swap;
}
/* ---------- Design tokens (exported from Paper) -------------------------- */
:root {
/* surfaces */
--color-ground: #F5F3F2;
--color-surface: #F2EEEC;
--color-raised: #EAE6E3;
--color-hairline: #00000012;
--color-border: #E4E1DF;
--surface-sunken: #E5E1DE;
--color-white: #FFFFFF;
/* text */
--color-disabled: #A39D99;
--color-quiet: #68625E;
--color-muted: #625C58;
--color-body: #4A4542;
--color-ink: #1C1916;
/* dark mode surfaces */
--color-dark: #13100E;
--color-dark-raised: #201D1B;
--color-dark-line: #332F2B;
--color-on-dark: #FFFFFF;
--color-on-dark-body: #CFC9C5;
--color-on-dark-quiet: #B0ABA7;
--color-glass-fill: #FFFFFF1F;
--color-glass-line: #FFFFFF33;
/* accent — brand green */
--color-brand-green: #016E4A;
--color-accent-50: #EDF8F2;
--color-accent-100: #D6EFE1;
--color-accent-200: #B2DDC5;
--color-accent-600: #1F6A4A;
--color-accent-700: #095538;
--color-accent-800: #07412B;
--color-accent-900: #05311F;
--color-green-300: #9AE4BF;
--color-green-400: #7BD3A9;
--color-green-500: #53BC8D;
--color-green-600: #2EA375;
/* accent — leaf */
--color-leaf-50: #EEFBE6;
--color-leaf-100: #D6F5C5;
--color-leaf-200: #B9E89D;
--color-leaf-400: #84C757;
--color-leaf-500: #5CA904;
--color-leaf-600: #488700;
--color-leaf-700: #356700;
--color-leaf-800: #295101;
/* accent — sage */
--color-sage-300: #C0DDA5;
--color-sage-400: #A1CA7A;
--color-sage-500: #7FB04D;
--color-sage-600: #6C9D34;
/* type */
--font-display: 'SF Pro', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
--font-body: 'SF Pro', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
--text-hero-lg: 68px;
--text-hero: 64px;
--text-stat: 96px;
--text-h2-lg: 52px;
--text-h2: 40px;
--text-lead: 19px;
--text-h3: 18px;
--text-body: 16px;
--text-caption: 13.5px;
--text-overline: 11px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--tracking-hero: -0.03em;
--tracking-h2: -0.022em;
--tracking-h3: -0.01em;
--tracking-tight: -0.01em;
--tracking-overline: 0.18em;
--leading-hero: 68px;
--leading-hero-tight: 65px;
--leading-hero-90: 61px;
--leading-h2: 46px;
--leading-h2-lg: 48px;
--leading-h2-90: 52px;
--leading-h3: 26px;
--leading-lead: 30px;
--leading-lead-140: 25px;
--leading-body: 26px;
--leading-body-140: 24px;
--leading-card-140: 21px;
--leading-caption: 20px;
--leading-caption-140: 18px;
--leading-stat-90: 86px;
/* layout */
--container-content: 1200px;
--spacing-gutter: 120px;
/* radii */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 14px;
--radius-button: 8px;
--radius-pill: 999px;
}
/* ---------- Reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* jump links land below the fixed nav rather than under it */
:target { scroll-margin-top: 88px; }
body {
margin: 0;
background: var(--color-ground);
color: var(--color-ink);
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-body);
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-optical-sizing: auto;
overflow-x: hidden;
}
/* Deliberately NOT setting overflow-x on : any value other than
`visible` (hidden *or* clip) stops the root being the sticky scrollport in
Blink, which silently kills the pinned outcomes sequence and the sticky FAQ
column. Overflow is contained per-section instead. */
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, blockquote, dl, dd, figure { margin: 0; }
:focus-visible {
outline: 2px solid var(--color-green-400);
outline-offset: 3px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
.skip-link {
position: absolute;
left: 50%;
top: 0;
z-index: 100;
transform: translate(-50%, -120%);
padding: 10px 18px;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
background: var(--color-white);
color: var(--color-ink);
font-size: 14px;
font-weight: var(--font-weight-medium);
transition: transform .2s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }
/* ---------- Shared layout ----------------------------------------------- */
.wrap {
width: 100%;
max-width: calc(var(--container-content) + var(--spacing-gutter) * 2);
margin-inline: auto;
padding-inline: var(--spacing-gutter);
}
.section { position: relative; }
.section--dark { background: var(--color-dark); color: var(--color-on-dark); }
.section--light { background: var(--color-ground); }
.overline {
font-family: var(--font-body);
font-size: var(--text-overline);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--tracking-overline);
line-height: 14px;
text-transform: uppercase;
color: var(--color-quiet);
}
.section--dark .overline { color: var(--color-on-dark-quiet); }
.h2 {
font-family: var(--font-display);
font-size: var(--text-h2-lg);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-h2);
line-height: var(--leading-h2-90);
color: var(--color-ink);
}
.section--dark .h2 { color: var(--color-on-dark); }
.lead {
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: 27px;
color: var(--color-muted);
}
.section--dark .lead { color: var(--color-on-dark-body); }
/* ---------- Buttons ----------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
flex-shrink: 0;
border-radius: var(--radius-button);
font-family: var(--font-body);
font-size: 14px;
line-height: 18px;
white-space: nowrap;
transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, filter .18s ease;
}
.btn:active { transform: translateY(1px); }
/* light / primary-on-dark */
.btn--light {
padding: 9px 16px;
color: var(--color-ink);
font-weight: var(--font-weight-medium);
background-image: linear-gradient(in oklab 180deg, oklab(100% 0 0) 0%, oklab(95.1% 0.003 0.005) 100%);
box-shadow: #FFFFFF 0 1px 0 inset, #00000014 0 0 0 1px, #0000000D 0 1px 2px;
}
.btn--light:hover { filter: brightness(1.02); box-shadow: #FFFFFF 0 1px 0 inset, #0000001F 0 0 0 1px, #00000014 0 2px 6px; }
.btn--light-lg {
padding: 11px 18px;
color: var(--color-ink);
font-weight: var(--font-weight-medium);
background-image: linear-gradient(in oklab 180deg, oklab(100% 0 0) 0%, oklab(95.1% 0.003 0.005) 100%);
box-shadow: #FFFFFF 0 1px 0 inset, #00000029 0 1px 3px, #00000024 0 6px 18px;
}
.btn--light-lg:hover { box-shadow: #FFFFFF 0 1px 0 inset, #00000029 0 1px 3px, #0000002E 0 8px 24px; }
/* dark glass */
.btn--dark {
padding: 9px 15px;
color: #FFFFFF;
background-image: linear-gradient(in oklab 180deg, oklab(21.9% 0.001 0.006) 0%, oklab(27% 0.001 .0004) 100%);
box-shadow: #FFFFFF33 0 1px 0 inset, #1D1C19 0 0 0 1px;
}
.btn--dark:hover { filter: brightness(1.18); }
.btn--dark-lg {
padding: 12px 22px;
color: #FFFFFF;
background-image: linear-gradient(in oklab 180deg, oklab(21.6% 0.003 0.007) 0%, oklab(27.5% 0 0) 100%);
box-shadow: #FFFFFF2E 0 1px 0 inset, #00000024 0 1px 3px;
}
.btn--dark-lg:hover { filter: brightness(1.18); }
/* =========================================================================
01 · Hero (dark)
========================================================================= */
.hero {
position: relative;
height: 720px;
overflow: clip;
background: var(--color-dark-raised);
isolation: isolate;
}
.hero__photo {
position: absolute;
top: -719px;
left: -57px;
width: 1538px;
height: 2050px;
background-image: url('assets/img/hero-blanket.jpg');
background-size: cover;
background-position: 50%;
}
/* top scrim under the nav */
.hero__scrim-top {
position: absolute;
inset: 0 0 auto 0;
height: 144px;
opacity: .6;
background-image: linear-gradient(in oklab 180deg, oklab(0% 0 0) 0%, oklab(0% 0 0 / 0%) 100%);
}
/* angled scrim carrying the headline */
.hero__scrim-angle {
position: absolute;
inset: 0;
background-image: linear-gradient(in oklab 15.52deg,
oklab(0% 0 0 / 82%) 38.7%,
oklab(0% 0 0 / 46%) 56.15%,
oklab(0% 0 0 / 0%) 84.62%);
}
/* bottom scrim */
.hero__scrim-bottom {
position: absolute;
inset: auto 0 0 0;
height: 510px;
opacity: .6;
background-image: linear-gradient(in oklab 180deg, oklab(0% 0 0 / 0%) 0%, oklab(0% 0 0) 76.44%);
}
/* ---------- Nav --------------------------------------------------------- */
.nav {
/* fixed, not sticky: the heroes clip their overflow and are only 720px tall,
so a sticky nav would unstick as soon as the hero scrolled past */
position: fixed;
inset: 0 0 auto 0;
z-index: 40;
transition: background-color .3s ease, border-color .3s ease;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: var(--spacing-gutter);
background-color: #0F0D0B26;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-bottom: 1px solid #FFFFFF26;
}
/* phones: script.js hides the bar while scrolling down and brings it back on
the first scroll up; focus-within keeps it reachable for keyboard users */
@media (max-width: 900px) {
.nav {
transition: background-color .3s ease, border-color .3s ease,
transform .32s cubic-bezier(.2,.7,.3,1);
}
.nav--hidden { transform: translateY(-100%); }
.nav--hidden:focus-within { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.nav { transition-duration: 0s; }
}
.nav__brand { display: flex; align-items: center; flex-shrink: 0; width: 210px; }
/* -------- inverted state, while the bar is over a light section ----------
script.js measures every dark block once and flips .is-light when the bar's
own midline is not inside one. The button pair inverts as a set so there is
still one solid primary and one outlined secondary either way. */
.nav.is-light {
background-color: #F5F3F2D9;
backdrop-filter: blur(14px) saturate(150%);
-webkit-backdrop-filter: blur(14px) saturate(150%);
border-bottom-color: var(--color-hairline);
}
.nav__links a,
.nav__brand svg path,
.nav__toggle svg path,
.nav .btn { transition: color .3s ease, fill .3s ease, stroke .3s ease, background-color .3s ease, box-shadow .3s ease; }
.nav.is-light .nav__links a { color: var(--color-ink); }
.nav.is-light .nav__brand svg path { fill: var(--color-ink); }
.nav.is-light .nav__toggle svg path { stroke: var(--color-ink); }
.nav.is-light .btn--dark {
background-image: none;
background-color: var(--color-white);
color: var(--color-ink);
box-shadow: #FFFFFF 0 1px 0 inset, #00000014 0 0 0 1px, #0000000D 0 1px 2px;
}
.nav.is-light .btn--dark svg path { stroke: var(--color-ink); }
.nav.is-light .btn--dark:hover { filter: none; background-color: #FBFAFA; }
.nav.is-light .btn--light {
background-image: none;
background-color: var(--color-ink);
color: var(--color-white);
box-shadow: #FFFFFF29 0 1px 0 inset, #00000029 0 1px 3px;
}
.nav.is-light .btn--light:hover { filter: none; background-color: #2A2622; }
/* the three logos all go home */
.nav__brand, .drawer__brand, .footer__mark { transition: opacity .16s ease; }
.nav__brand:hover, .drawer__brand:hover { opacity: .82; }
.footer__mark:hover { opacity: .88; }
.nav__brand svg { width: 42px; height: 27px; flex-shrink: 0; }
/* gap 8 + 12px of inline padding keeps text-edge to text-edge at the designed
32px while giving each link a hit area for the hover box */
.nav__links { display: flex; align-items: center; gap: 8px; }
.nav__links a {
padding: 7px 12px;
border-radius: var(--radius-button);
color: #FFFFFF;
font-family: var(--font-body);
font-size: 14px;
line-height: 18px;
white-space: nowrap;
opacity: .92;
transition: opacity .16s ease, background-color .16s ease;
}
.nav__links a:hover,
.nav__links a:focus-visible { opacity: 1; background-color: #FFFFFF1A; }
.nav.is-light .nav__links a:hover,
.nav.is-light .nav__links a:focus-visible { background-color: #1C191614; }
.nav__actions {
display: flex;
align-items: center;
justify-content: flex-end;
flex-shrink: 0;
gap: 10px;
width: 210px;
}
.nav__toggle { display: none; }
/* ---------- Hero copy --------------------------------------------------- */
.hero__copy {
position: absolute;
left: var(--spacing-gutter);
bottom: 56px;
z-index: 5;
width: 700px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.hero__title {
width: 660px;
max-width: 100%;
font-family: var(--font-display);
font-size: var(--text-hero-lg);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-hero);
line-height: var(--leading-hero-90);
color: var(--color-on-dark);
text-shadow: #0000001A 0 1px 3px;
}
.hero__sub {
width: 600px;
max-width: 100%;
font-family: var(--font-body);
font-size: 18px;
line-height: var(--leading-lead-140);
color: var(--color-on-dark-body);
}
.hero__cta { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
/* ---------- Hero stat rail --------------------------------------------- */
.hero__stats {
position: absolute;
right: var(--spacing-gutter);
bottom: 56px;
z-index: 5;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 24px;
}
.hero__stat { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
/* =========================================================================
Hero entrance — plays once on load, on the hero only
The photo settles from a 1.04 scale while the copy rises into place in
three staggered beats. `.js-hero` is set by script.js, so the resting
state is the finished one and a visitor without JS sees the hero intact
rather than a blank box. The photo never fades from zero: it is the LCP
element, and fading it would report a late paint.
========================================================================= */
.js-hero .hero__photo {
animation: hero-photo 1.25s cubic-bezier(.2,.7,.3,1) both;
}
.js-hero .hero__copy > *,
.js-hero .hero__stats {
animation: hero-rise .72s cubic-bezier(.2,.7,.3,1) both;
}
.js-hero .hero__title { animation-delay: .06s; }
.js-hero .hero__sub { animation-delay: .16s; }
.js-hero .hero__cta { animation-delay: .26s; }
.js-hero .hero__stats { animation-delay: .34s; }
/* the expanding Spravato pill on the home hero comes in last */
.js-hero .hero__pill {
animation: hero-rise .72s cubic-bezier(.2,.7,.3,1) .42s both;
}
@keyframes hero-photo {
from { transform: scale(1.04); }
to { transform: scale(1); }
}
@keyframes hero-rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.js-hero .hero__photo,
.js-hero .hero__copy > *,
.js-hero .hero__stats,
.js-hero .hero__pill { animation: none; }
}
.hero__stat b {
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: 21px;
color: var(--color-on-dark);
}
.hero__stat span {
font-family: var(--font-body);
font-size: 14px;
line-height: 21px;
color: var(--color-on-dark-body);
}
.hero__rule { width: 1px; height: 45px; background: #FFFFFF26; flex-shrink: 0; }
/* ---------- Spravato glass card ---------------------------------------- */
.hero__pill {
position: absolute;
top: 169px;
left: calc(50% + 234px);
z-index: 5;
width: 360px;
padding: 1px;
/* 43px is the same stadium a 999px radius resolves to on an 86px-tall box,
but it interpolates cleanly. Animating from 999px meant the browser kept
clamping the huge specified value against a box that was growing, so the
corners ballooned outward mid-open before snapping back. */
border-radius: 43px;
overflow: clip;
box-shadow: #00000047 0 12px 34px;
background-image: linear-gradient(in oklab 140deg,
oklab(100% 0 0 / 65%) 0%,
oklab(100% 0 0 / 24%) 34%,
oklab(100% 0 0 / 8%) 62%,
oklab(100% 0 0 / 4%) 100%);
}
.hero__pill-inner {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 22px 16px 16px;
border-radius: 42px;
background-image: linear-gradient(in oklab 180deg, oklab(22.2% -.0002 0.006) 0%, oklab(27% 0.001 .0004) 100%);
backdrop-filter: blur(40px) saturate(140%);
-webkit-backdrop-filter: blur(40px) saturate(140%);
box-shadow: #FFFFFF1F 0 1px 0 inset, #FFFFFF33 0 0 0 1px, #00000052 0 5px 16px;
}
.hero__pill-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: var(--radius-pill);
background-image: linear-gradient(in oklab 180deg, oklab(72% -0.114 0.038) 0%, oklab(57.6% -0.114 0.038) 100%);
box-shadow: #FFFFFF33 0 1px 0 inset, #7BD3A947 0 0 0 1px;
}
.hero__pill-text { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; }
.hero__pill-text b {
font-family: var(--font-body);
font-size: 17px;
font-weight: var(--font-weight-medium);
line-height: 23px;
color: #FFFFFF;
}
.hero__pill-text span {
font-family: var(--font-body);
font-size: 15px;
line-height: 21px;
color: #FFFFFF80;
}
.hero__pill-chev { flex-shrink: 0; transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.hero__pill.is-open .hero__pill-chev { transform: rotate(180deg); }
/* expanded state — the pill becomes a 26px-radius detail card.
One shared easing and duration across radius + height keeps the morph
reading as a single movement rather than two competing ones. */
.hero__pill,
.hero__pill-inner,
.hero__pill-detail {
/* a plain ease-out. The old curve reached 90% of its travel in the first
third of the duration, which read as a snap-then-settle bounce once the
radius morph and the staggered contents piled on top of it. */
--ease-open: cubic-bezier(.2,.6,.3,1);
--dur-open: .34s;
}
.hero__pill-inner {
width: 100%;
text-align: left;
transition: border-radius var(--dur-open) var(--ease-open),
background-color var(--dur-open) var(--ease-open);
}
.hero__pill {
transition: border-radius var(--dur-open) var(--ease-open),
background-color var(--dur-open) var(--ease-open),
box-shadow var(--dur-open) var(--ease-open);
}
.hero__pill.is-open { border-radius: 26px; }
/* 25px nests inside the 26px shell across the 1px rim */
.hero__pill.is-open .hero__pill-inner {
border-radius: 25px 25px 0 0;
background-image: none;
background-color: var(--color-dark-raised);
box-shadow: #FFFFFF1F 0 1px 0 inset;
}
.hero__pill.is-open {
background-image: none;
background-color: var(--color-dark-raised);
box-shadow: #FFFFFF1F 0 1px 0 inset, #FFFFFF33 0 0 0 1px, #00000059 0 6px 20px;
}
.hero__pill-detail {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--dur-open) var(--ease-open);
}
.hero__pill.is-open .hero__pill-detail { grid-template-rows: 1fr; }
/* the contents fade in as one block just after the panel starts opening, and
fade straight back out on close so nothing lingers while it collapses */
.hero__pill-detail-inner > * {
opacity: 0;
transition: opacity .18s ease;
}
.hero__pill.is-open .hero__pill-detail-inner > * { opacity: 1; transition-delay: .08s; }
/* the clip element must carry no padding of its own, or the 1fr track
collapses to just that padding */
.hero__pill-detail-clip { overflow: hidden; min-height: 0; }
.hero__pill-detail-inner {
display: flex;
flex-direction: column;
padding: 0 24px 24px;
border-top: 1px solid #FFFFFF1F;
}
.hero__pill-copy { margin-top: 20px; font-family: var(--font-body); font-size: 14px; line-height: 21px; color: #FFFFFFCC; }
.hero__pill-overline {
margin: 24px 0 12px;
font-family: var(--font-body);
font-size: 11px;
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-overline);
line-height: 14px;
text-transform: uppercase;
color: #FFFFFF80;
}
.hero__pill-specs { display: flex; flex-direction: column; gap: 9px; margin: 0; }
.hero__pill-specs > div { display: flex; align-items: baseline; gap: 10px; }
.hero__pill-specs dt { flex-grow: 1; font-family: var(--font-body); font-size: 14px; line-height: 20px; color: #FFFFFF80; }
.hero__pill-specs dd { flex-shrink: 0; margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 20px; color: #FFFFFF; white-space: nowrap; }
.btn--green {
padding: 12px 18px;
color: var(--color-on-dark);
font-weight: var(--font-weight-medium);
background-image: linear-gradient(in oklab 180deg, var(--color-green-500) 0%, var(--color-green-600) 100%);
box-shadow: #FFFFFF4D 0 1px 0 inset, #00000029 0 1px 3px, #0000002E 0 6px 18px;
}
.btn--green:hover { filter: brightness(1.06); }
.hero__pill-cta { margin-top: 26px; }
/* =========================================================================
02 · Insurance band (light)
========================================================================= */
.band {
display: flex;
flex-direction: column;
align-items: center;
padding: 48px var(--spacing-gutter);
background: var(--color-ground);
border-bottom: 1px solid var(--color-hairline);
}
.band__inner {
width: 100%;
max-width: var(--container-content);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding-bottom: 8px;
}
.ticker {
position: relative;
width: 100%;
height: 44px;
overflow: clip;
}
/* ---------- Marquee system ---------------------------------------------
script.js clones each track's contents once, so the track holds its content
twice. Shifting by half the track plus half a gap lands copy 2 exactly where
copy 1 began, which makes the loop seamless in either direction. */
[data-marquee] {
--marquee-gap: 0px;
--marquee-time: 40s;
width: max-content;
animation: marquee-left var(--marquee-time) linear infinite;
will-change: transform;
}
[data-marquee-dir="right"] { animation-name: marquee-right; }
/* Only the insurer ticker pauses on hover — its hover-to-focus effect needs a
still target. The gallery, press wall and team cards run continuously. */
.ticker__track:hover { animation-play-state: paused; }
@keyframes marquee-left {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(calc(-50% - var(--marquee-gap) / 2), 0, 0); }
}
@keyframes marquee-right {
from { transform: translate3d(calc(-50% - var(--marquee-gap) / 2), 0, 0); }
to { transform: translate3d(0, 0, 0); }
}
.ticker__track {
display: flex;
align-items: center;
gap: 64px;
height: 44px;
--marquee-gap: 64px;
--marquee-time: 46s;
}
.ticker__logo { display: flex; align-items: center; flex-shrink: 0; height: 44px; }
/* the global svg max-width would shrink logos inside the max-content track */
.ticker__logo svg { flex-shrink: 0; max-width: none; }
/* Hovering one insurer pulls it into focus and softens the rest. The :has()
guard matters: hovering the 64px gap between logos would otherwise blur the
whole row with nothing in focus, which reads as a bug rather than an effect.
Scoped to hover-capable pointers so a tap on a phone cannot leave it stuck. */
@media (hover: hover) {
.ticker__logo { transition: filter .24s ease, opacity .24s ease; }
.ticker__track:has(.ticker__logo:hover) .ticker__logo { filter: blur(2.5px); opacity: .4; }
/* the :has() blur above scores 0,4,0 — the focused logo has to repeat the
same :has() prefix to outrank it, or it blurs along with everything else */
.ticker__track:has(.ticker__logo:hover) .ticker__logo:hover { filter: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.ticker__logo { transition: none; }
}
.ticker__fade {
position: absolute;
inset: 0 0 0 auto;
width: 160px;
pointer-events: none;
background-image: linear-gradient(in oklab 270deg,
oklab(97.5% 0.002 0.003) 0%,
oklab(97.5% 0.002 0.003 / 0%) 100%);
}
/* =========================================================================
03 · Problem / stat cards (light)
========================================================================= */
.problem {
display: flex;
flex-direction: column;
align-items: center;
padding: 150px var(--spacing-gutter);
background: var(--color-ground);
}
.problem__overline { color: var(--color-muted); margin-bottom: 20px; }
.problem__title {
width: 760px;
max-width: 100%;
text-align: center;
letter-spacing: var(--tracking-tight);
}
.statcards {
display: flex;
width: 100%;
max-width: var(--container-content);
margin-top: 50px;
border-radius: 16px;
overflow: clip;
background-image: linear-gradient(in oklab 180deg, oklab(96.1% 0.003 0.004) 0%, oklab(93.7% 0.004 0.007) 100%);
box-shadow:
#FFFFFFF2 0 1px 0 inset,
#00000012 0 -1px 0 inset,
#FFFFFF80 1px 0 0 inset,
#FFFFFF80 -1px 0 0 inset,
#00000026 0 0 0 1px,
#00000014 0 2px 8px;
}
.statcard {
position: relative;
isolation: isolate;
flex: 1 1 0;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 420px;
padding: 44px 40px;
background: #FBF6F4;
}
.statcard:first-of-type { background: #FAF6F4; }
/* Hover wash. The design uses Paper's mesh-gradient shader, which has no CSS
equivalent. ::after is the deep green bed; ::before is a lighter bloom that
tracks the pointer, which is what gives it the mesh-gradient feel. */
.statcard::after {
content: '';
position: absolute;
inset: 0;
z-index: -2;
opacity: 0;
transition: opacity .55s ease;
background:
radial-gradient(72% 62% at 22% 78%, #2EA375 0%, #2EA37500 68%),
radial-gradient(64% 56% at 92% 92%, #53BC8D 0%, #53BC8D00 64%),
linear-gradient(158deg, #9AE4BF 0%, #34A06F 100%);
}
.statcard:hover::after,
.statcard:focus-within::after { opacity: 1; }
.statcard::before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 620px;
height: 620px;
margin: -310px 0 0 -310px;
border-radius: 50%;
pointer-events: none;
opacity: 0;
background: radial-gradient(circle closest-side,
#F2FBF6 0%, #CDEEDC 32%, #9AE4BF80 58%, #9AE4BF00 100%);
/* px offsets come from script.js; the short transition gives it a soft trail */
transform: translate3d(var(--mx, 50%), var(--my, 50%), 0);
transition: opacity .45s ease, transform .28s cubic-bezier(.22,.68,.32,1);
will-change: transform;
}
.statcard:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.statcard::before { transition: opacity .2s ease; }
}
.statcard__figure {
font-family: var(--font-display);
font-size: var(--text-stat);
font-weight: var(--font-weight-regular);
letter-spacing: -0.04em;
line-height: var(--leading-stat-90);
color: var(--color-ink);
}
.statcard__body {
font-family: var(--font-body);
font-size: 16px;
line-height: 22px;
color: var(--color-body);
}
.statcard__divider {
flex-shrink: 0;
width: 1px;
background: #00000026;
box-shadow: #FFFFFFB3 1px 0 0;
}
/* =========================================================================
04 · Treatments (light)
========================================================================= */
.treatments {
display: flex;
flex-direction: column;
align-items: center;
padding: 150px var(--spacing-gutter);
background: var(--color-ground);
}
.treatments__overline { color: var(--color-muted); margin-bottom: 20px; }
.treatments__title { text-align: center; letter-spacing: var(--tracking-tight); }
.treatments__lead {
width: 660px;
max-width: 100%;
margin-top: 20px;
text-align: center;
font-family: var(--font-body);
font-size: 18px;
line-height: 27px;
color: var(--color-body);
}
.tcards {
display: flex;
align-items: flex-start;
gap: 16px;
width: 100%;
max-width: var(--container-content);
margin-top: 50px;
}
/* the whole card is a link to that treatment's page; colour is inherited so
the heading and description keep their designed treatment */
.tcard {
flex: 1 1 0;
display: flex;
flex-direction: column;
min-width: 0;
color: inherit;
text-decoration: none;
transition: transform .28s cubic-bezier(.22,.68,.32,1);
}
.tcard:hover { transform: translateY(-3px); }
.tcard:hover .tcard__name { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .tcard { transition: none; } }
/* =========================================================================
Treatment card overlays — each UI completes itself on hover
The same idea as the how-it-works steps, which fill in as you scroll: at
rest the panel sits in its "before" state, and hovering resolves it. Two
guards matter. `.js-tcards` is set by script.js, so the cards render
finished if the script never runs; `hover: hover` keeps touch devices —
which can never trigger the hover — on the finished state permanently.
Nothing here hides text: only state colour, the dial arc, and a few pixels
of movement animate, so the panels are fully legible without hovering.
========================================================================= */
@media (hover: hover) {
.js-tcards .tcard__glass,
.js-tcards .tcard__glass-stack,
.js-tcards .tcard__chat { --t: cubic-bezier(.2,.7,.3,1); }
/* ---- TMS: the progress ring draws round to session 6 ----
The arc is drawn, not moved: the inline dasharray of "44 176" is exactly
one circumference, so offsetting it by 44 would slide the same arc to a
different clock position instead of hiding it. Overriding the array to a
single full-circle dash means the offset genuinely reveals it. */
.js-tcards .tcard__dial-arc {
stroke-dasharray: 220;
stroke-dashoffset: 220;
transition: stroke-dashoffset .82s var(--t, ease);
}
.js-tcards .tcard:hover .tcard__dial-arc,
.js-tcards .tcard:focus-visible .tcard__dial-arc { stroke-dashoffset: 147; }
.js-tcards .tcard__glass-accent {
opacity: .4;
transition: opacity .4s ease .34s;
}
.js-tcards .tcard:hover .tcard__glass-accent,
.js-tcards .tcard:focus-visible .tcard__glass-accent { opacity: 1; }
/* ---- ADHD: the three checks turn green in turn ---- */
.js-tcards .tcard__glass--adhd .tcard__glass-row svg circle,
.js-tcards .tcard__glass--adhd .tcard__glass-row svg path {
stroke: #B0ABA7;
transition: stroke .34s ease;
}
.js-tcards .tcard:hover .tcard__glass--adhd .tcard__glass-row svg circle,
.js-tcards .tcard:hover .tcard__glass--adhd .tcard__glass-row svg path,
.js-tcards .tcard:focus-visible .tcard__glass--adhd .tcard__glass-row svg circle,
.js-tcards .tcard:focus-visible .tcard__glass--adhd .tcard__glass-row svg path {
stroke: #7BD3A9;
}
.js-tcards .tcard__glass--adhd .tcard__glass-row:nth-of-type(2) svg * { transition-delay: .06s; }
.js-tcards .tcard__glass--adhd .tcard__glass-row:nth-of-type(3) svg * { transition-delay: .15s; }
.js-tcards .tcard__glass--adhd .tcard__glass-row:nth-of-type(4) svg * { transition-delay: .24s; }
/* ---- Spravato: the status dot wakes, then the three tiles settle ---- */
.js-tcards .tcard__dot {
background: #B0ABA7;
transition: background .36s ease, box-shadow .36s ease;
}
.js-tcards .tcard:hover .tcard__dot,
.js-tcards .tcard:focus-visible .tcard__dot {
background: #7BD3A9;
box-shadow: #7BD3A959 0 0 0 4px;
}
.js-tcards .tcard__tile {
opacity: .62;
transform: translateY(5px);
transition: opacity .38s var(--t, ease), transform .38s var(--t, ease);
}
.js-tcards .tcard:hover .tcard__tile,
.js-tcards .tcard:focus-visible .tcard__tile {
opacity: 1;
transform: none;
}
.js-tcards .tcard__tile:nth-child(2) { transition-delay: .08s; }
.js-tcards .tcard__tile:nth-child(3) { transition-delay: .16s; }
/* ---- Medication: the message lands, then its timestamp ---- */
.js-tcards .tcard__bubble {
opacity: .68;
transform: translateY(6px);
transition: opacity .4s var(--t, ease), transform .4s var(--t, ease);
}
.js-tcards .tcard:hover .tcard__bubble,
.js-tcards .tcard:focus-visible .tcard__bubble {
opacity: 1;
transform: none;
}
.js-tcards .tcard__bubble-time {
opacity: .35;
transition: opacity .38s ease .2s;
}
.js-tcards .tcard:hover .tcard__bubble-time,
.js-tcards .tcard:focus-visible .tcard__bubble-time { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
/* every panel simply rests in its finished state */
.js-tcards .tcard__dial-arc { stroke-dasharray: 220; stroke-dashoffset: 147; }
.js-tcards .tcard__glass--adhd .tcard__glass-row svg circle,
.js-tcards .tcard__glass--adhd .tcard__glass-row svg path { stroke: #7BD3A9; }
.js-tcards .tcard__dot { background: #7BD3A9; }
.js-tcards .tcard__tile,
.js-tcards .tcard__bubble { opacity: 1; transform: none; }
.js-tcards .tcard__glass-accent,
.js-tcards .tcard__bubble-time { opacity: 1; }
.js-tcards .tcard__dial-arc,
.js-tcards .tcard__glass-accent,
.js-tcards .tcard__tile,
.js-tcards .tcard__bubble,
.js-tcards .tcard__bubble-time,
.js-tcards .tcard__dot { transition: none; }
}
.tcard__media {
position: relative;
width: 100%;
height: 520px;
margin-bottom: 22px;
border-radius: 16px;
overflow: clip;
background: var(--color-dark-raised);
box-shadow: #00000012 0 0 0 1px;
}
.tcard__photo {
position: absolute;
background-size: cover;
background-position: 50%;
}
/* each photo is cropped exactly as framed in the design */
.tcard__photo--tms { width: 362px; height: 654px; left: -53px; top: -132px; background-image: url('assets/img/tms-device.jpg'); }
.tcard__photo--adhd { width: 804px; height: 536px; left: -33px; top: -16px; background-image: url('assets/img/woman-at-counter.jpg'); }
.tcard__photo--spravato { width: 691px; height: 1244px; left: -38px; top: -503px; background-image: url('assets/img/hero-blanket.jpg'); }
.tcard__photo--meds { width: 996px; height: 664px; left: -9px; top: -118px; background-image: url('assets/img/black-marble-desk.jpg'); }
.tcard__scrim {
position: absolute;
inset: 0;
border-radius: 16px;
background-image: linear-gradient(in oklab 180deg, oklab(0% 0 0 / 0%) 42%, oklab(0% 0 0 / 78%) 100%);
}
/* shared glass panel treatment */
.tcard__glass,
.tcard__pill,
.tcard__tile,
.tcard__bubble {
background-color: #161210D1;
backdrop-filter: blur(40px) saturate(125%);
-webkit-backdrop-filter: blur(40px) saturate(125%);
box-shadow: #FFFFFF1F 0 1px 0 inset, #FFFFFF33 0 0 0 1px, #00000038 0 2px 8px;
}
.tcard__glass {
position: absolute;
left: 20px;
width: 248px;
border-radius: 14px;
}
/* TMS session dial */
.tcard__glass--tms {
bottom: 24px;
height: 144px;
display: flex;
align-items: center;
gap: 18px;
padding: 18px;
}
.tcard__dial { position: relative; flex-shrink: 0; width: 82px; height: 82px; }
.tcard__dial svg { position: absolute; top: 0; left: 0; }
.tcard__dial-text {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tcard__dial-num { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; line-height: 22px; color: #FFFFFF; }
.tcard__dial-of { font-family: var(--font-body); font-size: 10px; line-height: 13px; color: #FFFFFF99; }
.tcard__glass-body { display: flex; flex-direction: column; justify-content: center; flex-grow: 1; gap: 7px; }
.tcard__glass-title { font-family: var(--font-body); font-size: 13px; font-weight: var(--font-weight-medium); line-height: 18px; color: #FFFFFF; }
.tcard__glass-sub { font-family: var(--font-body); font-size: 12px; line-height: 17px; color: #FFFFFFB3; }
.tcard__glass-rule { height: 1px; margin-block: 2px; background: #FFFFFF1F; flex-shrink: 0; }
.tcard__glass-accent { font-family: var(--font-body); font-size: 12px; font-weight: var(--font-weight-medium); line-height: 17px; color: var(--color-green-400); }
/* ADHD checklist */
.tcard__glass--adhd {
bottom: 25px;
height: 152px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 14px 16px;
}
.tcard__glass-row { display: flex; align-items: center; gap: 9px; }
.tcard__glass-row--split { justify-content: space-between; }
.tcard__glass-row--top { border-top: 1px solid #FFFFFF1F; padding-top: 9px; }
.tcard__glass-row svg { flex-shrink: 0; }
.tcard__glass-row .tcard__glass-title { font-size: 12px; line-height: 16px; flex-shrink: 0; }
.tcard__glass-meta { font-family: var(--font-body); font-size: 11px; line-height: 14px; color: #FFFFFF80; flex-shrink: 0; }
.tcard__glass-item { font-family: var(--font-body); font-size: 12px; line-height: 16px; color: #FFFFFFE6; }
.tcard__glass-item--strong { color: #FFFFFF; font-weight: var(--font-weight-medium); }
/* Spravato live-session stack */
.tcard__glass-stack {
position: absolute;
left: 20px;
bottom: 34px;
width: 248px;
height: 134px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 10px;
}
.tcard__pill {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
height: 40px;
padding: 11px 13px;
border-radius: 12px;
}
.tcard__dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--color-green-400); }
.tcard__pill-text { flex-grow: 1; font-family: var(--font-body); font-size: 12px; font-weight: var(--font-weight-medium); line-height: 16px; color: #FFFFFF; }
.tcard__tiles { display: flex; gap: 8px; flex-shrink: 0; height: 102px; }
.tcard__tile {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
height: 80px;
border-radius: 12px;
}
.tcard__tile-val { font-family: var(--font-body); font-size: 13px; font-weight: var(--font-weight-medium); line-height: 16px; color: #FFFFFF; }
.tcard__tile-lab { font-family: var(--font-body); font-size: 10px; line-height: 12px; color: #FFFFFF80; }
/* Medication management chat */
.tcard__chat {
position: absolute;
left: 20px;
bottom: 62px;
width: 248px;
display: flex;
align-items: flex-end;
gap: 9px;
height: 102px;
}
.tcard__avatar {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: 11px;
font-weight: var(--font-weight-medium);
letter-spacing: 0.02em;
line-height: 14px;
color: #FFFFFF;
background-image: linear-gradient(in oklab 180deg, oklab(39.7% 0.004 0.006) 0%, oklab(31.1% 0.003 0.006) 100%);
box-shadow: #FFFFFF29 0 0 0 1px;
}
.tcard__chat-body { display: flex; flex-direction: column; flex-grow: 1; gap: 5px; }
.tcard__bubble {
display: flex;
flex-direction: column;
gap: 4px;
padding: 11px 13px;
border-radius: 14px 14px 14px 5px;
}
.tcard__bubble-from { font-family: var(--font-body); font-size: 11px; font-weight: var(--font-weight-medium); line-height: 14px; color: var(--color-green-400); }
.tcard__bubble-msg { font-family: var(--font-body); font-size: 12px; line-height: 17px; color: #FFFFFF; }
.tcard__bubble-time { padding-left: 3px; font-family: var(--font-body); font-size: 10px; line-height: 13px; color: #FFFFFF80; }
/* card captions */
.tcard__head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.tcard__name {
font-family: var(--font-body);
font-size: 17px;
font-weight: var(--font-weight-medium);
line-height: var(--leading-card-140);
color: var(--color-ink);
}
.tcard__desc {
font-family: var(--font-body);
font-size: 16px;
line-height: 23px;
color: var(--color-muted);
}
.chip {
display: inline-flex;
align-items: center;
flex-shrink: 0;
padding: 3px 10px;
border-radius: var(--radius-pill);
background: var(--color-accent-100);
font-family: var(--font-body);
font-size: 11px;
font-weight: var(--font-weight-medium);
line-height: 14px;
color: var(--color-green-600);
white-space: nowrap;
}
.btn--ink {
padding: 12px 22px;
background: var(--color-ink);
color: #FFFFFF;
font-weight: var(--font-weight-medium);
box-shadow: #FFFFFF2E 0 1px 0 inset, #00000024 0 1px 3px;
}
.btn--ink:hover { background: #2A2622; }
.treatments__cta { margin-top: 50px; }
/* the problem section is centred, so its CTA centres with it */
.problem__cta { margin-top: 48px; align-self: center; }
@media (max-width: 900px) { .problem__cta { margin-top: 32px; } }
/* =========================================================================
05 · How it works (dark)
========================================================================= */
.howto {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 180px var(--spacing-gutter);
background: var(--color-dark);
}
.howto__overline { margin-bottom: 20px; }
.howto__title { letter-spacing: var(--tracking-tight); }
.howto__lead { width: 660px; max-width: 100%; margin-top: 20px; font-size: 18px; line-height: 27px; }
.steps {
position: relative;
display: flex;
flex-direction: column;
gap: 72px;
width: 100%;
max-width: var(--container-content);
margin-top: 50px;
}
/* the rail runs behind the numbered markers; the fill shows progress */
.steps__rail {
position: absolute;
left: 19px;
top: 20px;
/* script.js measures first marker centre -> last marker centre. Running the
track to the bottom of the section instead left a long grey tail below the
last step that the fill could never reach. */
height: var(--rail-track, 0px);
width: 2px;
background: #FFFFFF1A;
}
.steps__rail-fill {
position: absolute;
left: 19px;
top: 20px;
width: 2px;
height: 392px;
border-radius: var(--radius-pill);
background: var(--color-green-400);
}
.step { position: relative; display: flex; align-items: flex-start; gap: 44px; }
.step__num {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: var(--radius-pill);
background: var(--color-dark);
box-shadow: var(--color-green-400) 0 0 0 2px;
font-family: var(--font-body);
font-size: 15px;
font-weight: var(--font-weight-medium);
line-height: 18px;
color: var(--color-green-400);
}
.step__copy { display: flex; flex-direction: column; flex-shrink: 0; width: 360px; padding-top: 6px; }
.step__title {
margin-bottom: 12px;
font-family: var(--font-body);
font-size: 20px;
font-weight: var(--font-weight-medium);
line-height: var(--leading-card-140);
color: var(--color-on-dark);
}
.step__body { font-family: var(--font-body); font-size: 16px; line-height: 23px; color: var(--color-on-dark-body); }
.step__media {
position: relative;
flex: 1 1 0;
height: 320px;
min-width: 0;
border-radius: var(--radius-sm);
outline: 1px solid var(--color-muted);
overflow: clip;
box-shadow: #00000033 0 2px 2px 2px inset;
}
.step__photo {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
background-size: cover;
background-position: 50%;
box-shadow: #00000033 0 2px 2px 2px inset;
}
.step__photo--book {
background-image: linear-gradient(in oklab 180deg, oklab(0% 0 0 / 50%) 0%, oklab(24.5% 0 0) 100%), url('assets/img/woman-on-phone.jpg');
}
.step__photo--match {
left: -129px; top: -58px; right: auto; bottom: auto;
width: 970px; height: 436px;
background-image: linear-gradient(in oklab 180deg, oklab(0% 0 0 / 50%) 0%, oklab(19.7% 0.001 .0007) 100%), url('assets/img/man-presenting.jpg');
}
.step__photo--verify {
background-image: linear-gradient(in oklab 180deg, oklab(0% 0 0 / 50%) 0%, oklab(24.5% 0 0) 100%), url('assets/img/woman-at-desk.jpg');
}
/* shared glass panel for the three step overlays */
.cal, .match, .eob {
background-color: #161210D1;
border-radius: 18px;
}
.cal, .match {
backdrop-filter: blur(40px) saturate(150%);
-webkit-backdrop-filter: blur(40px) saturate(150%);
box-shadow: #FFFFFF1F 0 1px 0 inset, #FFFFFF33 0 0 0 1px, #00000038 0 2px 8px;
padding: 22px;
}
/* step 1 — booking calendar */
.cal { width: 410px; max-width: calc(100% - 32px); }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal__month { font-family: var(--font-body); font-size: 15px; font-weight: var(--font-weight-medium); line-height: 20px; color: #FFFFFF; }
.cal__nav { display: flex; align-items: center; gap: 12px; }
.cal__dow, .cal__week { display: flex; align-items: center; gap: 4px; }
.cal__dow { margin-bottom: 7px; }
.cal__dow span { flex: 1 1 0; text-align: center; font-family: var(--font-body); font-size: 12px; line-height: 16px; color: #FFFFFF66; }
.cal__week { margin-bottom: 5px; }
.cal__week span { flex: 1 1 0; text-align: center; font-family: var(--font-body); font-size: 14px; line-height: 18px; color: #FFFFFFCC; }
.cal__week span.is-dim { color: #FFFFFF4D; }
.cal__week--last { margin-bottom: 0; }
.cal__sel-wrap { display: flex; align-items: center; justify-content: center; height: 30px; }
.cal__sel {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 30px;
height: 30px;
font-size: 14px;
font-weight: var(--font-weight-semibold);
line-height: 18px;
color: #0A2A1C;
}
/* the pill lives on a pseudo so it can bloom in behind the number without the
gradient snapping — a background-image cannot be interpolated */
.cal__sel::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border: 1px solid #8CCFAE;
border-radius: var(--radius-pill);
background-image: linear-gradient(in oklab 180deg, oklab(80% -0.100 0.032) 0%, oklab(96.1% -0.042 0.013) 100%);
background-origin: border-box;
box-shadow: #00000033 0 2px 3px inset;
}
/* .cal__week span outranks .cal__sel on its own, which left the selected
day white on mint. Scoped here so the dark number actually applies. */
.cal__week .cal__sel { color: #0A2A1C; }
.cal__rule { height: 1px; margin: 14px 0 12px; background: #FFFFFF1F; }
.cal__slots { display: flex; align-items: center; gap: 6px; }
.cal__slot {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
height: 36px;
border-radius: 7px;
background: #FFFFFF1F;
font-family: var(--font-body);
font-size: 13px;
line-height: 17px;
color: #FFFFFF;
}
.cal__slot--active {
font-weight: var(--font-weight-medium);
color: var(--color-ink);
}
.cal__slot--active::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: 7px;
background: linear-gradient(in oklab 180deg, oklab(80% -0.100 0.032) 0%, oklab(97.5% -0.035 0.011) 100%);
box-shadow: #00000033 0 1px 0 inset, #94DDB9 0 0 0 1px;
}
/* step 2 — treatment match */
.match {
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
display: flex;
flex-direction: column;
gap: 18px;
width: 430px;
max-width: calc(100% - 32px);
}
.match__head { display: flex; align-items: center; justify-content: space-between; }
.match__label {
font-family: var(--font-body);
font-size: 12px;
font-weight: var(--font-weight-medium);
letter-spacing: 0.14em;
line-height: 16px;
text-transform: uppercase;
color: var(--color-on-dark-quiet);
}
.match__rec { font-family: var(--font-body); font-size: 12px; font-weight: var(--font-weight-medium); line-height: 16px; color: #91DDB8; }
.match__grid { display: flex; align-items: flex-start; justify-content: space-between; }
.match__opt { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; gap: 11px; width: 86px; }
.match__icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 16px;
background: #FFFFFF14;
box-shadow: #FFFFFF1F 0 0 0 1px;
}
.match__icon { position: relative; isolation: isolate; }
.match__icon--on::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: 16px;
background-image: linear-gradient(in oklab 180deg, oklab(81.5% -0.096 0.032) 0%, oklab(95.7% -0.039 0.012) 100%);
box-shadow: #FFFFFF3D 0 1px 0 inset, #7BD3A947 0 0 0 1px;
}
.match__name {
font-family: var(--font-body);
font-size: 13px;
font-weight: var(--font-weight-medium);
letter-spacing: 0.01em;
line-height: 17px;
color: var(--color-on-dark-quiet);
}
.match__name--on { color: var(--color-on-dark); }
/* step 3 — explanation of benefits */
.eob {
flex-shrink: 0;
width: 420px;
max-width: calc(100% - 32px);
overflow: clip;
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
filter: saturate(150%);
box-shadow: #FFFFFF3D 0 1px 0 inset, #FFFFFF29 0 0 0 1px, #00000059 0 10px 26px;
}
.eob__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 14px; }
.eob__verified {
display: flex;
align-items: center;
gap: 5px;
padding: 4px 9px 4px 6px;
border-radius: var(--radius-pill);
background: #7BD3A924;
box-shadow: #7BD3A93D 0 0 0 1px;
font-family: var(--font-body);
font-size: 13px;
font-weight: var(--font-weight-medium);
line-height: 17px;
color: #93DEBA;
}
.eob__rule { height: 1px; background: #FFFFFF1F; }
.eob__body { display: flex; align-items: flex-end; justify-content: space-between; padding: 14px 18px 16px; }
.eob__cost { display: flex; flex-direction: column; gap: 3px; }
.eob__cost-label { font-family: var(--font-body); font-size: 14px; line-height: 19px; color: #FFFFFF80; }
.eob__cost-value { font-family: var(--font-display); font-size: 34px; letter-spacing: -0.02em; line-height: 38px; color: #FFFFFF; }
.eob__approved { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-family: var(--font-body); font-size: 13px; line-height: 18px; color: #FFFFFF80; }
.eob__approved-when { color: #FFFFFFCC; }
.btn--glass {
padding: 11px 20px;
background: #FFFFFF14;
color: #FFFFFF;
font-weight: var(--font-weight-medium);
box-shadow: #FFFFFF1F 0 1px 0 inset, #FFFFFF2E 0 0 0 1px;
}
.btn--glass:hover { background: #FFFFFF1F; }
.howto__cta { margin-top: 50px; }
/* =========================================================================
06 · Outcomes (light) — pinned horizontal sequence
========================================================================= */
.outcomes {
display: flex;
flex-direction: column;
align-items: center;
padding: 150px var(--spacing-gutter) 240px;
background: var(--color-ground);
}
.outcomes__overline { color: var(--color-muted); margin-bottom: 20px; }
.outcomes__title { text-align: center; letter-spacing: var(--tracking-tight); }
.outcomes__lead {
width: 660px;
max-width: 100%;
margin-top: 20px;
text-align: center;
font-family: var(--font-body);
font-size: 18px;
line-height: 27px;
color: var(--color-body);
}
/* The driver is a tall spacer. The sticky child holds still inside it, so the
page appears to pause while the cards advance sideways. Height = one extra
viewport per transition after the first card. */
.outcomes__driver {
position: relative;
width: 100%;
max-width: var(--container-content);
margin-top: 50px;
/* real height is set in script.js from the pinned block + one viewport of
travel per transition; this is only a pre-hydration fallback */
height: calc(600px + 300vh);
}
.outcomes__sticky {
position: sticky;
/* centre the heading + card + ticks stack in the viewport while pinned */
top: max(24px, calc((100vh - 820px) / 2));
display: flex;
flex-direction: column;
gap: 24px;
}
.outcomes__viewport { width: 100%; overflow: clip; border-radius: 20px; }
.outcomes__track {
display: flex;
gap: 20px;
width: max-content;
will-change: transform;
}
.ocard {
position: relative;
flex: 0 0 auto;
width: var(--ocard-w, 1200px);
height: 600px;
border-radius: 20px;
overflow: clip;
background-color: #2E2926;
background-size: cover;
background-position: 50%;
}
.ocard__scrim {
position: absolute;
inset: 0 0 auto 0;
height: 280px;
background-image: linear-gradient(in oklab 180deg, oklab(0% 0 0 / 55%) 0%, oklab(0% 0 0 / 0%) 100%);
}
.ocard__title {
position: absolute;
left: 40px;
top: 40px;
width: 520px;
max-width: calc(100% - 80px);
font-family: var(--font-display);
font-size: 32px;
font-weight: var(--font-weight-regular);
letter-spacing: -0.02em;
line-height: 38px;
color: #FFFFFF;
}
.ocard__title--wide { width: 560px; }
.ocard__title--widest { width: 580px; }
/* the two glass panels share a treatment */
.ocard__quote, .ocard__data {
position: absolute;
bottom: 40px;
padding: 18px;
border-radius: 16px;
background-color: #161210D1;
backdrop-filter: blur(40px) saturate(125%);
-webkit-backdrop-filter: blur(40px) saturate(125%);
box-shadow: #FFFFFF1F 0 1px 0 inset, #FFFFFF33 0 0 0 1px, #00000052 0 4px 14px;
}
.ocard__quote { left: 40px; width: 330px; }
.ocard__quote--wide { width: 340px; }
.ocard__data { right: 40px; width: 300px; }
.ocard__data--wide { width: 320px; }
.ocard__who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ocard__avatar {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: var(--radius-pill);
box-shadow: #0000001A 0 0 0 1px;
font-family: var(--font-body);
font-size: 13px;
font-weight: var(--font-weight-medium);
letter-spacing: 0.01em;
line-height: 17px;
color: var(--color-ink);
}
.ocard__meta { display: flex; flex-direction: column; gap: 2px; }
.ocard__meta b { font-family: var(--font-body); font-size: 13px; font-weight: var(--font-weight-medium); line-height: 17px; color: #FFFFFF; }
.ocard__meta span { font-family: var(--font-body); font-size: 11px; line-height: 15px; color: #FFFFFF80; }
.ocard__said { font-family: var(--font-body); font-size: 13px; line-height: 19px; color: #FFFFFFCC; }
.ocard__data-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.ocard__data-label { font-family: var(--font-body); font-size: 12px; line-height: 16px; color: #FFFFFFB3; }
.ocard__data-label--block { display: block; margin-bottom: 16px; }
.ocard__data-value { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.02em; line-height: 26px; color: #FFFFFF; }
.ocard__note { font-family: var(--font-body); font-size: 11px; line-height: 15px; color: #FFFFFF80; }
.ocard__bar {
height: 5px;
margin-bottom: 10px;
border-radius: var(--radius-pill);
background: #FFFFFF1F;
overflow: clip;
}
.ocard__bar span { display: block; height: 5px; border-radius: var(--radius-pill); background: var(--color-green-400); }
.ocard__timeline { display: flex; align-items: center; margin-bottom: 14px; }
.ocard__stop {
display: flex;
flex-direction: column;
align-items: center;
flex: 1 1 0;
gap: 7px;
font-family: var(--font-body);
font-size: 10px;
line-height: 12px;
color: #FFFFFFB3;
}
.ocard__stop i { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--color-green-400); flex-shrink: 0; }
.ocard__link { flex: 1 1 0; height: 2px; margin-bottom: 19px; background: var(--color-green-400); }
.ocard__checks { display: flex; flex-direction: column; gap: 10px; }
.ocard__checks li { display: flex; align-items: center; gap: 9px; font-family: var(--font-body); font-size: 12px; line-height: 16px; color: #FFFFFFCC; }
.ocard__checks svg { flex-shrink: 0; }
.ocard__bars { display: flex; align-items: flex-end; gap: 7px; height: 44px; margin-bottom: 14px; }
.ocard__bars span { flex: 1 1 0; border-radius: 3px; background: #FFFFFF33; }
.ocard__bars span.is-mid { background: #7BD3A980; }
.ocard__bars span.is-good { background: var(--color-green-400); }
.outcomes__ticks { display: flex; gap: 6px; width: 100%; }
.outcomes__ticks button {
flex: 1 1 0;
height: 3px;
padding: 0;
border-radius: var(--radius-pill);
background: #00000014;
transition: background .3s ease;
}
.outcomes__ticks button.is-active { background: var(--color-ink); }
/* =========================================================================
08 · The space (dark)
========================================================================= */
.space {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding-bottom: 150px;
background: var(--color-dark);
overflow: clip;
}
.space__hero {
position: relative;
flex-shrink: 0;
width: 100%;
height: 702px;
}
.space__hero-fade {
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 362px;
background-image: linear-gradient(in oklab 180deg, oklab(17.6% 0.004 0.005 / 0%) 0%, oklab(17.6% 0.004 0.005) 100%);
}
.space__head {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: var(--container-content);
margin-top: 70px;
padding-inline: var(--spacing-gutter);
}
.space__overline { margin-bottom: 20px; }
.space__title { width: 640px; max-width: 100%; text-align: center; letter-spacing: var(--tracking-tight); }
.space__lead {
width: 620px;
max-width: 100%;
margin-top: 20px;
text-align: center;
font-family: var(--font-body);
font-size: 18px;
line-height: 27px;
color: var(--color-on-dark-body);
}
.gallery {
position: relative;
flex-shrink: 0;
width: 100%;
max-width: var(--container-content);
margin-top: 50px;
overflow: clip;
}
.gallery__track {
display: flex;
gap: 20px;
--marquee-gap: 20px;
--marquee-time: 43.6s;
/* draggable: keep vertical swipes scrolling the page, claim horizontal */
touch-action: pan-y;
cursor: grab;
}
.gallery__track:active { cursor: grabbing; }
.gallery__item {
flex-shrink: 0;
width: 440px;
height: 460px;
border-radius: var(--radius-sm);
overflow: clip;
background-color: #26221F;
background-size: cover;
background-position: 50%;
}
.gallery__fade {
position: absolute;
right: 0;
top: 0;
width: 170px;
height: 460px;
pointer-events: none;
background-image: linear-gradient(in oklab 270deg,
oklab(17.6% 0.004 0.005) 0%,
oklab(17.6% 0.004 0.005 / 82%) 38%,
oklab(17.6% 0.004 0.005 / 0%) 100%);
}
.space__cta { margin-top: 86px; }
/* =========================================================================
Featured in (light)
========================================================================= */
.press {
display: flex;
flex-direction: column;
align-items: center;
padding: 150px var(--spacing-gutter);
background: var(--color-ground);
overflow: clip;
}
.press__overline { color: var(--color-muted); margin-bottom: 20px; }
.press__title { width: 700px; max-width: 100%; text-align: center; letter-spacing: var(--tracking-tight); }
.press__lead {
width: 600px;
max-width: 100%;
margin-top: 20px;
text-align: center;
font-family: var(--font-body);
font-size: 18px;
line-height: 27px;
color: var(--color-body);
}
.press__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.presswall {
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 100%;
max-width: var(--container-content);
margin-top: 56px;
border-radius: 18px;
overflow: clip;
background: var(--color-ground);
box-shadow: #00000012 0 0 0 1px;
}
/* rows are wider than the wall and the second is offset, so the grid reads as
a continuous wall rather than a tidy 6-up table */
.presswall__row {
display: flex;
flex-shrink: 0;
height: 190px;
--marquee-gap: 0px;
--marquee-time: 64s;
}
.presswall__row:first-child { border-bottom: 1px solid var(--color-hairline); }
.presswall__cell {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 248px;
background: var(--color-ground);
border-right: 1px solid var(--color-hairline);
}
.presswall__cell svg { flex-shrink: 0; max-width: none; }
/* =========================================================================
09 · Care team (light)
========================================================================= */
.team {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 150px var(--spacing-gutter);
background: var(--color-ground);
}
.team__overline { color: var(--color-muted); margin-bottom: 20px; }
.team__title { letter-spacing: var(--tracking-tight); }
.team__lead {
width: 560px;
max-width: 100%;
margin-top: 20px;
font-family: var(--font-body);
font-size: 18px;
line-height: 27px;
color: var(--color-body);
}
/* arrows sit flush right, pulled up into the header's whitespace */
.team__nav {
display: flex;
align-self: flex-end;
flex-shrink: 0;
gap: 10px;
margin-top: -58px;
}
.rowbtn {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: var(--radius-pill);
background: #FFFFFF;
box-shadow: #00000012 0 0 0 1px, #00000008 0 1px 2px, #0000000A 0 2px 6px;
transition: transform .18s ease, box-shadow .18s ease;
}
.rowbtn:hover { box-shadow: #00000024 0 0 0 1px, #00000014 0 2px 8px; }
.rowbtn:active { transform: scale(.94); }
.rowbtn[disabled] { opacity: .4; cursor: default; }
/* 340px cards drifting rightward through a 1200px window */
.team__viewport {
width: 100%;
max-width: var(--container-content);
margin-top: 50px;
overflow: clip;
}
.team__cards {
display: flex;
gap: 20px;
height: 505px;
--marquee-gap: 20px;
--marquee-time: 48.7s;
}
.tmember {
position: relative;
flex: 0 0 340px;
border-radius: var(--radius-sm);
overflow: clip;
background: #E8E4E1;
box-shadow: #0000001A 0 0 0 1px, #0000000A 0 1px 2px, #0000000F 0 4px 12px, #0000000A 0 14px 32px;
}
.tmember__photo {
position: absolute;
inset: 0;
background-size: cover;
background-position: 50%;
transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.tmember:hover .tmember__photo,
.tmember:focus-within .tmember__photo { transform: scale(1.03); }
.tmember__scrim {
position: absolute;
inset: 0;
background-image: linear-gradient(in oklab 180deg, oklab(0% 0 0 / 0%) 36%, oklab(0% 0 0 / 84%) 100%);
transition: background-image .4s ease, opacity .4s ease;
}
/* on hover the scrim rises to carry the bio copy */
.tmember:hover .tmember__scrim,
.tmember:focus-within .tmember__scrim {
background-image: linear-gradient(in oklab 180deg, oklab(0% 0 0 / 34%) 0%, oklab(0% 0 0 / 72%) 40%, oklab(0% 0 0 / 90%) 100%);
}
.tmember__body {
position: absolute;
left: 22px;
right: 22px;
bottom: 22px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* the bio is laid out but collapsed; hover expands it without reflowing the row */
.tmember__bio {
font-family: var(--font-body);
font-size: 15px;
line-height: 22px;
color: #FFFFFFE6;
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows .42s cubic-bezier(.2,.7,.3,1), opacity .32s ease, margin-bottom .42s cubic-bezier(.2,.7,.3,1);
margin-bottom: 0;
overflow: hidden;
}
.tmember__bio > * { min-height: 0; }
.tmember:hover .tmember__bio,
.tmember:focus-within .tmember__bio {
grid-template-rows: 1fr;
opacity: 1;
margin-bottom: 16px;
}
.tmember__name {
margin-bottom: 3px;
font-family: var(--font-body);
font-size: 19px;
font-weight: var(--font-weight-medium);
letter-spacing: -0.012em;
line-height: 25px;
color: var(--color-on-dark);
}
.tmember__role {
margin-bottom: 7px;
font-family: var(--font-body);
font-size: 15px;
line-height: 21px;
color: #FFFFFFB8;
}
.team__cta { margin-top: 50px; align-self: flex-start; }
/* =========================================================================
10 · Reviews (light)
========================================================================= */
.reviews {
display: flex;
flex-direction: column;
align-items: center;
padding: 150px var(--spacing-gutter);
background: var(--color-ground);
}
.reviews__overline { color: var(--color-muted); margin-bottom: 20px; }
.reviews__title { text-align: center; letter-spacing: var(--tracking-tight); }
.reviews__lead {
width: 620px;
max-width: 100%;
margin-top: 20px;
text-align: center;
font-family: var(--font-body);
font-size: 18px;
line-height: 27px;
color: var(--color-body);
}
.reviews__cta { margin-top: 40px; }
.reviewgrid {
position: relative;
display: flex;
align-items: flex-start;
gap: 16px;
width: 100%;
max-width: var(--container-content);
margin-top: 40px;
/* the column is taller than the section — the fade below crops it */
margin-bottom: -110px;
}
.reviewgrid__col { flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.review {
display: flex;
flex-direction: column;
padding: 20px;
border-radius: 16px;
background-image: linear-gradient(in oklab 180deg, oklab(25% 0.004 0.006) 0%, oklab(16.5% 0.003 0.004) 100%);
box-shadow:
#FFFFFF24 0 1px 0 inset,
#00000052 0 -1px 0 inset,
#FFFFFF0F 0 0 0 1px inset,
#00000047 0 0 0 1px,
#0000002E 0 1px 2px,
#00000038 0 6px 14px,
#00000033 0 18px 36px;
}
.review__head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.review__avatar {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: var(--radius-pill);
box-shadow: #FFFFFF52 0 1px 0 inset, #0000002E 0 0 0 1px, #00000047 0 2px 4px;
font-family: var(--font-body);
font-size: 13px;
font-weight: var(--font-weight-medium);
letter-spacing: 0.01em;
line-height: 17px;
color: var(--color-ink);
}
.review__who { display: flex; flex-direction: column; gap: 1px; }
.review__who b { font-family: var(--font-body); font-size: 14px; font-weight: var(--font-weight-medium); line-height: 19px; color: var(--color-on-dark); }
.review__who span { font-family: var(--font-body); font-size: 13px; line-height: 18px; color: var(--color-on-dark-quiet); }
.review__stars { display: flex; align-items: center; gap: 4px; margin: 10px 0 11px; }
.review__stars svg { width: 15px; height: 15px; flex-shrink: 0; }
.review__text { font-family: var(--font-body); font-size: 16px; line-height: 26px; color: var(--color-on-dark-body); }
/* =========================================================================
11 · FAQ (light)
========================================================================= */
.faq {
display: flex;
flex-direction: column;
align-items: center;
padding: 150px var(--spacing-gutter);
background: var(--color-ground);
}
.faq__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
width: 100%;
max-width: var(--container-content);
padding-bottom: 32px;
border-bottom: 2px solid var(--color-hairline);
box-shadow: #FFFFFF 0 2px 0;
}
.faq__title { letter-spacing: var(--tracking-tight); }
.faq__lead {
flex-shrink: 0;
width: 400px;
text-align: right;
font-family: var(--font-body);
font-size: 17px;
line-height: var(--leading-body-140);
color: var(--color-body);
}
.faq__body {
display: flex;
align-items: flex-start;
gap: 80px;
width: 100%;
max-width: var(--container-content);
margin-top: 56px;
}
.faq__panel { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; }
.faq__cat {
margin-bottom: 24px;
font-family: var(--font-display);
font-size: 24px;
font-weight: var(--font-weight-medium);
letter-spacing: -0.015em;
line-height: 30px;
color: var(--color-ink);
}
.faq__item:not(:last-child) { margin-bottom: 10px; }
.faq__item {
border-radius: 14px;
background: #FFFFFF;
box-shadow: #00000012 0 0 0 1px, #00000008 0 1px 2px, #0000000A 0 2px 6px;
}
.faq__q {
display: flex;
align-items: center;
gap: 20px;
width: 100%;
padding: 22px 24px;
text-align: left;
font-family: var(--font-body);
font-size: 17px;
font-weight: var(--font-weight-medium);
line-height: 24px;
color: var(--color-ink);
}
.faq__q span { flex-grow: 1; }
/* open: the button's lower padding becomes the 14px gap above the answer,
and the answer carries the card's 22px bottom padding */
.faq__item.is-open .faq__q { padding-bottom: 14px; }
.faq__icon { flex-shrink: 0; transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.faq__item.is-open .faq__icon { transform: rotate(45deg); }
/* height animates via the 0fr → 1fr grid track so no magic max-height */
.faq__a {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .38s cubic-bezier(.2,.7,.3,1);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; min-height: 0; }
.faq__a p {
padding: 0 24px 22px;
font-family: var(--font-body);
font-size: 16px;
line-height: 25px;
color: var(--color-body);
}
.faq__empty {
padding: 22px 24px;
border-radius: 14px;
background: #FFFFFF;
box-shadow: #00000012 0 0 0 1px, #00000008 0 1px 2px, #0000000A 0 2px 6px;
font-family: var(--font-body);
font-size: 16px;
line-height: 25px;
color: var(--color-body);
}
.faq__empty a { color: var(--color-accent-700); font-weight: var(--font-weight-medium); text-decoration: underline; text-underline-offset: 2px; }
.faq__tabs {
display: flex;
flex-direction: column;
flex-shrink: 0;
gap: 3px;
width: 230px;
border-left: 1px solid var(--color-hairline);
}
.faq__tab {
display: flex;
align-items: center;
flex-shrink: 0;
width: 206px;
padding: 8px 16px;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-family: var(--font-body);
font-size: 15px;
line-height: 22px;
text-align: left;
color: var(--color-muted);
transition: background-color .2s ease, color .2s ease;
}
.faq__tab:hover { background: #00000008; color: var(--color-ink); }
.faq__tab.is-active {
background: #000000;
color: var(--color-on-dark);
font-weight: var(--font-weight-medium);
box-shadow: none;
}
/* =========================================================================
12 · Get started (dark)
========================================================================= */
.getstarted {
position: relative;
height: 620px;
overflow: clip;
border-radius: 0 0 48px 48px;
background: #26221F;
}
.getstarted__photo {
position: absolute;
inset: 0;
background-image: linear-gradient(in oklab 180deg, var(--color-hairline) -114.59%, var(--color-ink) 68.51%), url('assets/img/two-women-talking.jpg');
background-size: cover;
background-position: 50%;
}
.getstarted__inner {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding-inline: var(--spacing-gutter);
text-align: center;
}
.getstarted__title {
width: 620px;
max-width: 100%;
font-family: var(--font-display);
font-size: 56px;
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-tight);
line-height: 50px;
color: var(--color-on-dark);
}
.getstarted__lead {
width: 600px;
max-width: 100%;
margin-top: 24px;
font-family: var(--font-body);
font-size: 17px;
line-height: var(--leading-body-140);
color: var(--color-on-dark-body);
}
.getstarted__cta { display: flex; align-items: center; gap: 12px; margin-top: 38px; }
.btn--mint {
gap: 8px;
padding: 14px 24px;
font-size: 15px;
font-weight: var(--font-weight-medium);
color: var(--color-ink);
background-image: linear-gradient(in oklab 180deg, oklab(86% -0.086 0.028) 0%, oklab(96.6% -0.038 0.012) 100%);
outline: 1px solid #A5E8C6;
box-shadow: #FFFFFF66 0 1px 0 inset, #00000029 0 1px 3px, #0000002E 0 6px 18px;
}
.btn--mint:hover { filter: brightness(1.03); box-shadow: #FFFFFF66 0 1px 0 inset, #00000029 0 1px 3px, #00000038 0 8px 24px; }
/* =========================================================================
13 · Footer
========================================================================= */
.footer {
display: flex;
flex-direction: column;
align-items: center;
padding: 100px var(--spacing-gutter) 48px;
background: var(--color-ground);
}
.footer__top {
display: flex;
align-items: flex-start;
gap: 80px;
width: 100%;
max-width: var(--container-content);
}
.footer__brand { display: flex; flex-direction: column; flex-shrink: 0; width: 300px; }
.footer__mark {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 52px;
height: 52px;
margin-bottom: 22px;
border-radius: 13px;
background-image: linear-gradient(in oklab 160deg, oklab(33.3% 0.005 0.007) 20.45%, oklab(21.6% 0.003 0.007) 46%, oklab(15.1% 0.002 0.005) 100%);
box-shadow: #FFFFFF3D 0 1px 0 inset, #7BD3A93D 0 0 0 1px;
}
.footer__tagline { font-family: var(--font-body); font-size: 14px; font-weight: var(--font-weight-medium); line-height: 21px; color: var(--color-ink); }
.footer__sub { margin-bottom: 22px; font-family: var(--font-body); font-size: 14px; line-height: 21px; color: var(--color-muted); }
.footer__addr { font-style: normal; }
.footer__addr a {
display: block;
font-family: var(--font-body);
font-size: 14px;
line-height: 22px;
color: var(--color-body);
transition: color .16s ease;
}
.footer__addr a:hover { color: var(--color-ink); }
.footer__tel { margin-top: 10px; }
/* office hours sit under the address in the same quiet register */
.footer__hours {
margin-top: 10px;
font-family: var(--font-body);
font-size: 14px;
line-height: 22px;
color: var(--color-muted);
}
.footer__col { display: flex; flex-direction: column; flex: 1 1 0; gap: 12px; min-width: 0; }
.footer__coltitle {
margin-bottom: 4px;
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--font-weight-medium);
letter-spacing: -0.005em;
line-height: 18px;
color: var(--color-ink);
}
.footer__col a {
font-family: var(--font-body);
font-size: 14px;
line-height: 20px;
color: var(--color-body);
transition: color .16s ease;
}
.footer__col a:hover { color: var(--color-ink); }
.footer__legal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
max-width: var(--container-content);
margin-top: 40px;
padding-top: 28px;
border-top: 1px solid var(--color-hairline);
}
.footer__copy { font-family: var(--font-body); font-size: 13px; line-height: 19px; color: var(--color-quiet); }
.footer__legal-links { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.footer__legal-links a {
font-family: var(--font-body);
font-size: 13px;
line-height: 19px;
color: var(--color-quiet);
transition: color .16s ease;
}
.footer__legal-links a:hover { color: var(--color-ink); }
/* fades the bottom of the wall back into the page ground */
.reviewgrid__fade {
position: absolute;
left: -80px;
right: -80px;
bottom: -40px;
height: 480px;
pointer-events: none;
background-image: linear-gradient(in oklab 180deg,
oklab(97.5% 0.002 0.003 / 0%) 0%,
oklab(96.5% 0.002 0.002) 60%);
}
/* =========================================================================
Mobile drawer + sticky action bar (shown at <=900px)
========================================================================= */
.drawer {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
flex-direction: column;
background: var(--color-dark);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
body.menu-open { overflow: hidden; }
.drawer__top {
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
height: 56px;
padding-inline: 20px;
}
.drawer__brand { display: flex; align-items: center; }
.drawer__close {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-right: -10px;
}
.drawer__links { display: flex; flex-direction: column; padding-inline: 20px; }
.drawer__links a {
display: flex;
align-items: center;
justify-content: space-between;
height: 68px;
border-bottom: 1px solid #FFFFFF14;
font-family: var(--font-display);
font-size: 23px;
letter-spacing: var(--tracking-tight);
line-height: 31px;
color: var(--color-on-dark);
}
.drawer__foot { margin-top: auto; padding: 0 20px 32px; }
.drawer__actions { display: flex; gap: 10px; }
.drawer__book { flex: 1 1 auto; height: 50px; font-size: 15px; }
.drawer__call {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 50px;
height: 50px;
border-radius: var(--radius-button);
background: #FFFFFF14;
box-shadow: #FFFFFF2E 0 0 0 1px;
}
.drawer__contact { margin-top: 24px; }
.drawer__contact a {
display: block;
font-family: var(--font-body);
font-size: 15px;
font-weight: var(--font-weight-medium);
line-height: 21px;
color: var(--color-on-dark);
}
.drawer__contact p { margin-top: 4px; font-family: var(--font-body); font-size: 14px; line-height: 20px; color: var(--color-on-dark-quiet); }
.actionbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
display: none;
align-items: center;
gap: 10px;
height: 88px;
padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px));
background: #FFFFFFF2;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: #00000012 0 -1px 0 inset, #00000014 0 -4px 16px;
}
.actionbar__icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
gap: 4px;
width: 64px;
height: 52px;
border-radius: var(--radius-button);
background: var(--color-white);
box-shadow: #00000012 0 0 0 1px;
font-family: var(--font-body);
font-size: 11px;
font-weight: var(--font-weight-medium);
line-height: 13px;
color: var(--color-ink);
}
.actionbar__book {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
gap: 8px;
height: 52px;
border-radius: var(--radius-button);
background: var(--color-ink);
box-shadow: #FFFFFF2E 0 1px 0 inset, #00000024 0 1px 3px;
font-family: var(--font-body);
font-size: 15px;
font-weight: var(--font-weight-medium);
line-height: 19px;
color: var(--color-white);
}
/* =========================================================================
Tablet — let the fixed desktop widths become fluid
========================================================================= */
@media (max-width: 1279px) {
:root { --spacing-gutter: 48px; }
.hero__copy, .hero__stats { position: static; }
.hero { display: flex; flex-direction: column; justify-content: flex-end; }
.hero__pill { left: auto; right: var(--spacing-gutter); }
.hero__title, .hero__sub { width: auto; }
.step__copy { width: 300px; }
.faq__body { gap: 40px; }
.footer__top { gap: 40px; flex-wrap: wrap; }
.footer__brand { width: 100%; }
}
/* =========================================================================
Mobile — matches the Paper "Mobile 390" artboard
========================================================================= */
@media (max-width: 900px) {
:root { --spacing-gutter: 20px; }
body { padding-bottom: 88px; } /* clear the sticky action bar */
.actionbar { display: flex; }
/* ---- nav ---- */
.nav { height: 56px; }
.nav__links, .nav__actions { display: none; }
.nav__brand { width: auto; }
.nav__toggle {
display: flex;
align-items: center;
justify-content: flex-end;
width: 40px;
height: 40px;
margin-right: -9px;
}
/* ---- hero ---- */
.hero {
height: 660px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 26px;
}
.hero__photo {
inset: 0;
width: 100%;
height: 100%;
background-image: url('assets/img/hero-blanket.jpg');
background-size: auto 1200px;
background-position: 44% 72%;
}
.hero__scrim-top, .hero__scrim-bottom { display: none; }
.hero__scrim-angle {
background-image: linear-gradient(in oklab 8deg,
oklab(0% 0 0 / 93%) 0%, oklab(0% 0 0 / 88%) 28%, oklab(0% 0 0 / 62%) 55%,
oklab(0% 0 0 / 40%) 66%, oklab(0% 0 0 / 24%) 80%, oklab(0% 0 0 / 42%) 92%,
oklab(0% 0 0 / 64%) 100%);
}
.hero__copy {
position: static;
width: 100%;
padding-inline: var(--spacing-gutter);
gap: 10px;
}
/* tighter leading than desktop: at 38px the display face carries a two-line
headline fine at 1.05, and the deck sits closer under it */
.hero__title { width: 100%; font-size: 38px; line-height: 40px; letter-spacing: -0.028em; }
.hero__sub { width: 100%; font-size: 16px; line-height: 25px; }
/* the two CTAs stack full width, as in the mobile artboards */
.hero__cta { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 6px; width: 100%; }
.hero__cta .btn {
height: 52px;
padding: 0;
gap: 9px;
font-size: var(--text-body);
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-tight);
}
.hero__cta .btn svg { width: 16px; height: 16px; }
.hero__cta .btn--light-lg { background-image: none; background-color: var(--color-ground); box-shadow: none; }
.hero__cta .btn--dark-lg {
background-image: none;
background-color: var(--color-glass-fill);
box-shadow: inset 0 0 0 1px var(--color-glass-line);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
/* the stat rail sits under the CTAs on a hairline, three columns */
.hero__stats {
position: static;
display: flex;
align-items: flex-start;
justify-content: flex-start;
gap: 14px;
margin: 20px var(--spacing-gutter) 0;
padding-top: 18px;
border-top: 1px solid var(--color-glass-line);
}
.hero__stat { align-items: flex-start; flex: 1 1 0; text-align: left; }
.hero__stat b {
font-size: var(--text-caption);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-caption-140);
}
.hero__stat span { font-size: 12.5px; line-height: 17px; color: var(--color-on-dark-quiet); }
.hero__rule { display: none; }
.hero__pill { display: none; }
/* ---- shared section rhythm ---- */
.problem, .treatments, .outcomes, .press, .team, .reviews, .faq { padding: 72px var(--spacing-gutter); }
.howto { padding: 76px var(--spacing-gutter); }
.band { padding: 32px var(--spacing-gutter); }
.footer { padding: 56px var(--spacing-gutter) 40px; }
.space { padding-bottom: 72px; }
.h2 { font-size: 32px; line-height: 35px; }
.lead, .problem__title, .treatments__lead, .howto__lead, .outcomes__lead,
.press__lead, .team__lead, .reviews__lead { width: 100%; }
.treatments__lead, .outcomes__lead, .press__lead, .team__lead, .reviews__lead,
.howto__lead, .space__lead { font-size: 16px; line-height: 24px; }
/* the mobile artboard keeps these line breaks, so they stay — hiding a
would run the surrounding words together ("fits you,and tells") */
/* ---- 03 problem ---- */
.statcards { flex-direction: column; }
/* column now, so `flex: 1 1 0` governs height and left the cards at just
their padding with the figure and copy spilling out */
.statcard { flex: 0 0 auto; min-height: 0; padding: 28px 24px; }
.statcard__figure { font-size: 64px; line-height: 60px; margin-bottom: 20px; }
.statcard__divider { width: auto; height: 1px; box-shadow: #FFFFFFB3 0 1px 0; }
/* ---- 04 treatments — becomes a snap scroller ---- */
.tcards {
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-inline: var(--spacing-gutter);
margin-inline: calc(var(--spacing-gutter) * -1);
width: calc(100% + var(--spacing-gutter) * 2);
max-width: none;
}
.tcards::-webkit-scrollbar { display: none; }
.tcard { flex: 0 0 300px; scroll-snap-align: center; }
.tcard__media { height: 460px; }
/* ---- 05 how it works ---- */
.steps { gap: 48px; }
.step { flex-direction: column; gap: 16px; padding-left: 60px; }
.step__num { position: absolute; left: 0; top: 0; }
.step__copy { width: 100%; padding-top: 6px; }
/* the step turns into a column here, so `flex: 1 1 0` from the base rule
governs height and collapsed the panel to nothing — set the basis, not
just the height */
.step__media { flex: 0 0 240px; height: 240px; margin-left: -60px; width: calc(100% + 60px); }
.steps__rail, .steps__rail-fill { display: none; }
.cal, .match, .eob { transform: scale(.72); transform-origin: center; }
/* the panel is scaled to .72, but max-width still clamped its unscaled box
to the phone container while the four 86px options need 388px — the grid
spilled out of the glass. Unclamped, 430px × .72 = 310px fits the media. */
.match { position: absolute; max-width: none; }
/* the match photo is a 970px-wide crop hung off to the left on desktop; at
phone width that pushes the panel inside it off the right edge */
.step__photo--match { inset: 0; width: auto; height: auto; }
/* ---- 06 outcomes ---- */
.outcomes__driver { height: calc(520px + 300vh); }
/* pin high: the overline tucks behind the fixed nav, the title clears its
bottom edge, and with the viewport-capped card height set later in the
file the card bottom just clears the sticky action bar */
.outcomes__sticky { top: 20px; }
.ocard { height: 520px; }
.ocard__title { left: 20px; top: 24px; width: calc(100% - 40px); font-size: 24px; line-height: 29px; }
/* phones carry the patient's words only: two stacked glass panels left the
card crowded and the score bar unreadable at this width, so the stats
panel is dropped and the quote takes the bottom of the card */
.ocard__quote {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
width: auto;
margin: 0;
}
.ocard__data { display: none; }
/* ---- 08 the space ---- */
.space__hero { height: 340px; }
.space__hero-fade { height: 200px; }
.space__head { margin-top: 40px; }
.space__title { width: 100%; }
.gallery { margin-inline: 0; overflow-x: auto; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery__track { padding-inline: var(--spacing-gutter); }
.gallery__item { width: 260px; height: 300px; }
.gallery__fade { display: none; }
.space__cta { margin-top: 40px; }
/* ---- press ---- */
.presswall__row { width: 100%; height: 96px; }
.presswall__row--offset { margin-left: 0; }
.presswall__cell { flex: 1 1 0; width: auto; }
.presswall__cell:nth-child(n+4) { display: none; }
.presswall__cell svg { max-width: 76%; height: auto; }
/* ---- 09 team ---- */
.team__nav { display: none; }
.team__cards {
height: auto;
gap: 12px;
padding-inline: var(--spacing-gutter);
margin-inline: calc(var(--spacing-gutter) * -1);
width: calc(100% + var(--spacing-gutter) * 2);
max-width: none;
}
.tmember { flex: 0 0 260px; height: 370px; }
/* ---- 10 reviews ---- */
.reviewgrid { flex-direction: column; margin-bottom: -60px; }
.reviewgrid__fade { left: -20px; right: -20px; height: 260px; }
/* ---- 11 FAQ ---- */
.faq__head { flex-direction: column; align-items: flex-start; gap: 16px; }
.faq__lead { width: 100%; text-align: left; }
.faq__body { flex-direction: column-reverse; gap: 32px; margin-top: 32px; }
/* two stacked rows that scroll sideways together — half the scroll length
of the old single strip */
.faq__tabs {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(2, auto);
justify-content: start;
gap: 8px;
width: calc(100% + var(--spacing-gutter) * 2);
margin-inline: calc(var(--spacing-gutter) * -1);
padding-inline: var(--spacing-gutter);
border-left: 0;
overflow-x: auto;
scrollbar-width: none;
}
.faq__tabs::-webkit-scrollbar { display: none; }
.faq__tab { width: auto; flex-shrink: 0; border-radius: var(--radius-button); white-space: nowrap; }
.faq__q { font-size: 16px; gap: 12px; padding: 18px 18px; }
.faq__a p { padding: 0 18px 18px; font-size: 15px; line-height: 24px; }
.faq__item.is-open .faq__q { padding-bottom: 12px; }
/* ---- 12 CTA ---- */
.getstarted { height: 420px; border-radius: 0 0 32px 32px; }
.getstarted__title { width: 100%; font-size: 32px; line-height: 35px; }
.getstarted__lead { width: 100%; margin-top: 16px; font-size: 15px; line-height: 23px; }
.getstarted__cta { margin-top: 26px; }
/* ---- 13 footer ---- */
.footer__top { flex-direction: column; gap: 32px; }
.footer__brand { width: 100%; }
.footer__col { flex: 1 1 auto; width: 100%; }
.footer__legal { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 40px; }
.footer__legal-links { gap: 16px; }
}
/* 390 is the mobile artboard width, so the hero keeps its designed 38px there
and only steps down on the narrower phones below it */
@media (max-width: 380px) {
.hero__title { font-size: 34px; line-height: 36px; }
}
@media (max-width: 420px) {
.statcard__figure { font-size: 56px; line-height: 54px; }
}
@media (max-width: 900px) {
/* the mobile band's ticker is shorter than desktop's */
.ticker, .ticker__track, .ticker__logo { height: 34px; }
.ticker__logo svg { transform: scale(.78); transform-origin: center; }
.ticker__track { gap: 44px; }
.ticker__fade { width: 80px; }
.band__inner { padding-bottom: 0; gap: 0; }
/* the mobile press section drops the lead paragraph */
.press__lead { display: none; }
.press__title { font-size: 26px; line-height: 29px; }
}
/* the drawer owns the screen while it is open */
body.menu-open .actionbar { display: none; }
.drawer__links { overflow-y: auto; }
/* =========================================================================
Revisions — timeline progression, outcomes framing, review cards
========================================================================= */
/* ---- 05 how it works: a real vertical timeline ------------------------- */
.steps__rail-fill {
/* height is driven by scroll position in script.js */
height: var(--rail-fill, 0px);
transition: height .12s linear;
}
.step {
transition: opacity .5s ease;
}
.step__copy,
.step__media {
opacity: .5;
transform: translateY(14px);
transition: opacity .6s cubic-bezier(.22,.68,.32,1),
transform .6s cubic-bezier(.22,.68,.32,1);
}
.step__media { transition-delay: .06s; }
.step.is-active .step__copy,
.step.is-active .step__media { opacity: 1; transform: none; }
/* the marker only lights up once that step is the one being read */
.step__num {
color: var(--color-on-dark-quiet);
box-shadow: #FFFFFF29 0 0 0 2px;
transition: color .45s ease, box-shadow .45s ease, background-color .45s ease;
}
.step.is-active .step__num {
color: var(--color-green-400);
box-shadow: var(--color-green-400) 0 0 0 2px, #7BD3A926 0 0 0 8px;
}
@media (prefers-reduced-motion: reduce) {
.step__copy, .step__media { opacity: 1; transform: none; }
.steps__rail-fill { transition: none; }
}
/* ---- 06 outcomes: heading stays on screen with the card ---------------- */
.outcomes__sticky {
align-items: center;
gap: 22px;
}
.outcomes__head {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.outcomes__head .outcomes__lead { margin-top: 14px; }
/* card shrinks on short viewports so heading + card + ticks all stay visible */
.ocard { height: min(600px, calc(100vh - 320px)); }
/* ---- 10 reviews: cards are links now ---------------------------------- */
.review {
transition: transform .28s cubic-bezier(.22,.68,.32,1), box-shadow .28s ease;
}
.review:hover {
transform: translateY(-3px);
box-shadow:
#FFFFFF3D 0 1px 0 inset,
#00000052 0 -1px 0 inset,
#FFFFFF1A 0 0 0 1px inset,
#7BD3A959 0 0 0 1px,
#0000002E 0 1px 2px,
#00000038 0 10px 20px,
#00000038 0 24px 48px;
}
.review:hover .review__who b { color: var(--color-green-300); }
.review__who b { transition: color .28s ease; }
/* Google mark on the reviews button */
.gmark {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 22px;
height: 22px;
margin-left: -4px;
border-radius: var(--radius-pill);
background: #FFFFFF;
}
@media (max-width: 900px) {
/* these rows are marquees now, not manual scrollers — the earlier
overflow/padding overrides would break the loop maths */
.gallery { overflow: clip; }
.gallery__track { padding-inline: 0; }
.gallery__item { width: 240px; height: 300px; }
.team__viewport {
width: calc(100% + var(--spacing-gutter) * 2);
max-width: none;
margin-inline: calc(var(--spacing-gutter) * -1);
overflow: clip;
}
.team__cards {
width: max-content;
height: auto;
padding-inline: 0;
margin-inline: 0;
gap: 12px;
--marquee-gap: 12px;
}
.tmember { flex: 0 0 240px; height: 340px; }
/* the phone track is much narrower, so the desktop 64s loop crawls */
.presswall__row { width: max-content; height: 96px; --marquee-time: 24s; }
.presswall__cell { width: 150px; flex: 0 0 150px; }
.presswall__cell:nth-child(n+4) { display: flex; }
}
/* keep the two revised sections on their original Paper rhythm:
the team row lost its arrow cluster (which occupied -18px net), and the
Google mark must not make the reviews button taller than a 42px control */
.team__viewport { margin-top: 32px; }
.gmark { width: 18px; height: 18px; }
.gmark svg { width: 13px; height: 13px; }
/* =========================================================================
Inner pages — the nav sits on a solid dark bar instead of over a photo
========================================================================= */
.pagehead {
position: relative;
height: 64px;
background: var(--color-dark);
}
.nav__links a[aria-current="page"] { opacity: 1; font-weight: var(--font-weight-medium); }
.pagehero {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 120px var(--spacing-gutter) 150px;
background: var(--color-ground);
}
.pagehero__overline { color: var(--color-muted); margin-bottom: 20px; }
.pagehero__title {
font-family: var(--font-display);
font-size: var(--text-hero-lg);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-hero);
line-height: var(--leading-hero-90);
color: var(--color-ink);
}
.pagehero__lead {
width: 660px;
max-width: 100%;
margin-top: 20px;
font-family: var(--font-body);
font-size: 18px;
line-height: 27px;
color: var(--color-body);
}
.pagehero__lead a { color: var(--color-accent-700); font-weight: var(--font-weight-medium); text-decoration: underline; text-underline-offset: 2px; }
.pagehero__cta { margin-top: 40px; }
@media (max-width: 900px) {
.pagehead { height: 56px; }
.pagehero { padding: 56px var(--spacing-gutter) 72px; }
.pagehero__title { font-size: 40px; line-height: 42px; }
.pagehero__lead { font-size: 16px; line-height: 24px; }
}
/* =========================================================================
Legal pages — long-form prose
========================================================================= */
.legal {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 100px var(--spacing-gutter) 140px;
background: var(--color-ground);
}
.legal__head { width: 100%; max-width: 720px; margin-inline: auto; }
.legal__overline { color: var(--color-muted); margin-bottom: 20px; }
.legal__title {
font-family: var(--font-display);
font-size: var(--text-h2-lg);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-h2-90);
color: var(--color-ink);
}
.legal__revised {
margin-top: 14px;
font-family: var(--font-body);
font-size: var(--text-caption);
line-height: var(--leading-caption);
color: var(--color-quiet);
}
.legal__body {
width: 100%;
max-width: 720px; /* ~72 characters, comfortable for long reading */
margin: 48px auto 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 27px;
color: var(--color-body);
}
.legal__body p { margin-bottom: 20px; }
.legal__body h2 {
margin: 44px 0 14px;
font-family: var(--font-display);
font-size: 22px;
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-h3);
line-height: 30px;
color: var(--color-ink);
scroll-margin-top: 88px;
}
.legal__body h3 {
margin: 26px 0 10px;
font-family: var(--font-body);
font-size: 16px;
font-weight: var(--font-weight-semibold);
line-height: 24px;
color: var(--color-ink);
}
.legal__body ul { margin: 0 0 20px; padding-left: 0; list-style: none; }
.legal__body ul li { position: relative; padding-left: 22px; margin-bottom: 10px; }
.legal__body ul li::before {
content: '';
position: absolute;
left: 4px;
top: 12px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--color-green-600);
}
.legal__body strong { color: var(--color-ink); font-weight: var(--font-weight-semibold); }
.legal__body a {
color: var(--color-accent-700);
font-weight: var(--font-weight-medium);
text-decoration: underline;
text-underline-offset: 2px;
}
.legal__notice {
padding: 16px 18px;
border-radius: var(--radius-md);
background: var(--color-accent-50);
box-shadow: #09553826 0 0 0 1px;
color: var(--color-accent-800);
font-weight: var(--font-weight-medium);
}
.legal__toc {
margin: 32px 0 8px;
padding: 24px 26px;
border-radius: var(--radius-lg);
background: #FFFFFF;
box-shadow: #00000012 0 0 0 1px, #0000000A 0 2px 6px;
}
.legal__body .legal__toc-title {
margin-bottom: 14px;
font-family: var(--font-body);
font-size: var(--text-overline);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--tracking-overline);
line-height: 14px;
text-transform: uppercase;
color: var(--color-muted);
}
.legal__body .legal__toc ol { counter-reset: toc; display: flex; flex-direction: column; gap: 8px; }
.legal__body .legal__toc li { counter-increment: toc; display: flex; gap: 10px; font-size: 15px; line-height: 22px; }
.legal__toc li::before { content: counter(toc) '.'; flex-shrink: 0; width: 20px; color: var(--color-disabled); }
.legal__toc a { color: var(--color-body); font-weight: var(--font-weight-regular); text-decoration: none; }
.legal__toc a:hover { color: var(--color-accent-700); text-decoration: underline; }
.legal__address { font-style: normal; margin-bottom: 20px; line-height: 27px; }
.legal__rule { height: 1px; margin: 48px 0 8px; border: 0; background: var(--color-border); }
@media (max-width: 900px) {
.legal { padding: 56px var(--spacing-gutter) 72px; }
.legal__title { font-size: 34px; line-height: 38px; }
.legal__body { margin-top: 32px; font-size: 15px; line-height: 25px; }
.legal__body h2 { margin-top: 34px; font-size: 20px; line-height: 27px; }
}
/* =========================================================================
Treatments page
========================================================================= */
/* the mobile artboards trim a trailing sentence from some hero decks; this
hides it below the breakpoint rather than shipping two copies of the text */
.hide-sm { display: inline; }
@media (max-width: 900px) { .hide-sm { display: none; } }
.show-sm { display: none; }
@media (max-width: 900px) { .show-sm { display: inline; } }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hero--treatments .hero__photo {
/* the photo is 3:2, so at 1440 wide it stands 960 tall against a 720 hero.
-32 is the one offset that clears the clinician's face below the nav and
still keeps the patient's face inside the frame rather than cut off. */
top: -32px; left: 0;
width: 100%; height: 960px;
background-image: url('assets/img/tms-session.jpg');
}
@media (max-width: 900px) {
.hero--treatments .hero__photo { background-size: cover; background-position: 62% 22%; }
}
/* ---- insurance band with a caption above the logos ---- */
.band--captioned { gap: 26px; padding: 44px var(--spacing-gutter) 52px; }
.band__caption {
font-family: var(--font-body);
font-size: var(--text-caption);
line-height: var(--leading-caption);
color: var(--color-muted);
text-align: center;
}
.band--captioned .band__inner { padding-bottom: 0; gap: 0; }
/* ---- how we match ---- */
.matcher {
display: flex;
flex-direction: column;
align-items: center;
padding: 104px var(--spacing-gutter) 120px;
background: var(--color-ground);
}
.matcher__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
width: 100%;
max-width: var(--container-content);
}
.matcher__title {
width: 760px;
max-width: 100%;
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-h2);
line-height: var(--leading-h2);
color: var(--color-ink);
}
.matcher__lead {
width: 620px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: var(--leading-lead);
color: var(--color-body);
}
.matchlist {
display: flex;
flex-direction: column;
width: 100%;
max-width: var(--container-content);
margin-top: 64px;
border-top: 1px solid var(--color-border);
}
.matchrow {
display: flex;
align-items: flex-start;
gap: 56px;
padding-block: 36px;
border-bottom: 1px solid var(--color-border);
}
.matchrow__num {
flex-shrink: 0;
width: 44px;
padding-top: 5px;
font-family: var(--font-body);
font-size: var(--text-caption);
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-overline);
line-height: 18px;
color: var(--color-muted);
}
.matchrow__q {
flex-shrink: 0;
width: 420px;
font-family: var(--font-display);
font-size: 22px;
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-h3);
line-height: 30px;
color: var(--color-ink);
}
.matchrow__a {
display: flex;
flex-direction: column;
flex-shrink: 0;
gap: 10px;
width: 560px;
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-body);
}
.matchrow__rec { color: var(--color-accent-700); font-weight: var(--font-weight-semibold); }
/* ---- the four treatment blocks ---- */
.tblocks {
display: flex;
flex-direction: column;
align-items: center;
gap: 104px;
padding: 112px var(--spacing-gutter) 128px;
background: var(--color-surface);
}
.tblock {
display: flex;
align-items: center;
gap: 72px;
width: 100%;
max-width: var(--container-content);
scroll-margin-top: 88px;
}
.tblock--flip { flex-direction: row-reverse; }
.tblock__media {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 508px;
height: 460px;
border-radius: var(--radius-lg);
overflow: clip;
background: var(--color-raised);
}
.tblock__photo {
width: 100%;
height: 100%;
background-size: cover;
background-position: 50%;
transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.tblock:hover .tblock__photo { transform: scale(1.035); }
.tblock__copy {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-shrink: 0;
gap: 20px;
width: 620px;
max-width: 100%;
}
.tblock__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
display: inline-flex;
align-items: center;
padding: 5px 11px;
border-radius: var(--radius-pill);
background: var(--color-raised);
font-family: var(--font-body);
font-size: 12px;
font-weight: var(--font-weight-medium);
letter-spacing: 0.02em;
line-height: 16px;
color: var(--color-muted);
}
.tblock__title {
width: 600px;
max-width: 100%;
font-family: var(--font-display);
font-size: 36px;
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-h2);
line-height: 42px;
color: var(--color-ink);
}
.tblock__lead {
width: 600px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: var(--leading-lead);
color: var(--color-body);
}
.tblock__lead a { color: var(--color-accent-700); font-weight: var(--font-weight-medium); text-decoration: underline; text-underline-offset: 2px; }
.tblock__stats {
display: flex;
align-items: flex-start;
width: 600px;
max-width: 100%;
margin: 8px 0 0;
padding-block: 20px;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.tblock__stats > div { display: flex; flex-direction: column; flex-shrink: 0; gap: 4px; }
.tblock__stats > div:nth-child(1) { width: 190px; }
.tblock__stats > div:nth-child(2) { width: 200px; }
.tblock__stats > div:nth-child(3) { width: 210px; }
.tblock__stats dt {
font-family: var(--font-display);
font-size: 21px;
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-tight);
line-height: 26px;
color: var(--color-ink);
}
.tblock__stats dd {
margin: 0;
font-family: var(--font-body);
font-size: var(--text-caption);
line-height: var(--leading-caption);
color: var(--color-quiet);
}
.tblock__cta { margin-top: 6px; padding: 12px 18px; gap: 8px; font-size: var(--text-body); letter-spacing: var(--tracking-tight); }
/* ---- compare table on the dark photo ---- */
.compare {
display: flex;
flex-direction: column;
align-items: center;
padding: 112px var(--spacing-gutter) 120px;
background-color: var(--color-dark);
background-image: linear-gradient(in oklab 15.52deg,
oklab(0% 0 0 / 98%) 20%, oklab(0% 0 0 / 93%) 52%, oklab(0% 0 0 / 82%) 100%),
url('assets/img/waiting-room-bw.jpg');
background-size: cover;
background-position: 50%;
}
.compare__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
width: 100%;
max-width: var(--container-content);
}
.compare__title {
width: 800px;
max-width: 100%;
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-h2);
line-height: var(--leading-h2);
color: var(--color-on-dark);
}
.compare__lead {
width: 620px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: var(--leading-lead);
color: var(--color-on-dark-body);
}
.compare__scroll {
width: 100%;
max-width: var(--container-content);
margin-top: 56px;
overflow-x: auto;
}
.ctable { width: 100%; min-width: 1200px; border-collapse: collapse; text-align: left; }
.ctable thead th {
padding: 0 16px 18px 0;
font-family: var(--font-display);
font-size: 19px;
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-tight);
line-height: 24px;
color: var(--color-on-dark);
vertical-align: bottom;
}
.ctable thead tr { border-bottom: 1px solid var(--color-dark-line); }
.ctable tbody tr { border-bottom: 1px solid var(--color-dark-line); }
.ctable tbody th {
width: 260px;
padding: 24px 24px 24px 0;
font-family: var(--font-body);
font-size: var(--text-caption);
font-weight: var(--font-weight-medium);
letter-spacing: 0.06em;
line-height: 18px;
text-transform: uppercase;
color: var(--color-on-dark-quiet);
vertical-align: top;
}
.ctable tbody td {
width: 235px;
padding: 24px 16px 24px 0;
font-family: var(--font-body);
font-size: 15px;
line-height: 22px;
color: var(--color-on-dark-body);
vertical-align: top;
}
.ctable thead td { width: 260px; }
/* ---- FAQ, two-column ---- */
.tfaq {
display: flex;
align-items: flex-start;
gap: 80px;
padding: 112px var(--spacing-gutter) 128px;
background: var(--color-ground);
}
.tfaq__head {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-shrink: 0;
gap: 18px;
width: 380px;
position: sticky;
top: 88px;
}
.tfaq__title {
width: 360px;
max-width: 100%;
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-h2);
line-height: var(--leading-h2);
color: var(--color-ink);
}
.tfaq__lead {
width: 340px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-body);
}
.tfaq__lead a { color: var(--color-accent-700); font-weight: var(--font-weight-medium); text-decoration: underline; text-underline-offset: 2px; }
.tfaq__list {
display: flex;
flex-direction: column;
/* shrinkable: at 1280-1439 the head + 740px list outgrow the content
column and the cards ran off the right edge */
flex-shrink: 1;
min-width: 0;
width: 740px;
max-width: 100%;
border-top: 1px solid var(--color-border);
}
.tfaq__item {
display: flex;
flex-direction: column;
gap: 10px;
padding-block: 28px;
border-bottom: 1px solid var(--color-border);
}
/* subpage FAQs reuse the home accordion cards; the list drops its hairlines
and the h3 wrapper keeps the document outline without adding style */
.tfaq__list--acc { border-top: 0; }
.faq__h { margin: 0; font: inherit; }
.tfaq__item h3,
.tfaq__item p { width: 700px; max-width: 100%; }
.tfaq__item h3 {
font-family: var(--font-display);
font-size: 20px;
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-h3);
line-height: 28px;
color: var(--color-ink);
}
.tfaq__item p {
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-body);
}
@media (max-width: 1279px) {
.matchrow { gap: 32px; }
.matchrow__q { width: 320px; }
.matchrow__a { width: auto; flex: 1 1 0; }
.tblock { gap: 40px; }
.tblock__media { width: 400px; }
/* min-width:0 lets the copy column shrink past the fixed widths inside it */
.tblock__copy, .tblock__title, .tblock__lead, .tblock__stats { width: auto; flex: 1 1 0; min-width: 0; }
.tblock__stats { flex-wrap: wrap; }
.tfaq { gap: 40px; }
/* min-width:0 lets the list shrink past the 700px width its rows declare */
.tfaq__list { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 900px) {
/* the mobile artboards show the ticker on its own, without the caption */
.band--captioned { padding: 32px var(--spacing-gutter); gap: 0; }
.band__caption { display: none; }
.matcher { padding: 72px var(--spacing-gutter); }
.matcher__title, .compare__title, .tfaq__title { font-size: 28px; line-height: 34px; width: 100%; }
.matcher__lead, .compare__lead { width: 100%; font-size: 16px; line-height: 24px; }
.matchlist { margin-top: 40px; }
.matchrow { flex-direction: column; gap: 12px; padding-block: 28px; }
.matchrow__num { width: auto; padding-top: 0; }
.matchrow__q { width: 100%; font-size: 20px; line-height: 27px; }
.matchrow__a { width: 100%; }
.tblocks { gap: 64px; padding: 72px var(--spacing-gutter); }
.tblock, .tblock--flip { flex-direction: column; align-items: flex-start; gap: 24px; }
.tblock__media { width: 100%; height: 300px; }
.tblock__title { font-size: 28px; line-height: 34px; }
.tblock__lead { font-size: 16px; line-height: 24px; }
.tblock__stats { flex-direction: column; gap: 16px; width: 100%; }
.tblock__stats > div { width: 100% !important; }
.compare { padding: 72px var(--spacing-gutter); }
.compare__scroll { margin-top: 32px; }
/* the table restacks into cards below this breakpoint (see the comparison
block later in the file), so the old sticky label column is gone */
.tfaq { flex-direction: column; gap: 32px; padding: 72px var(--spacing-gutter); }
.tfaq__head { position: static; width: 100%; }
.tfaq__lead { width: 100%; }
.tfaq__list { width: 100%; }
.tfaq__item h3 { font-size: 18px; line-height: 25px; }
}
/* the captioned band has no hairline under it (the home-page band does) */
.band--captioned { border-bottom: 0; }
/* -------------------------------------------------------------------------
Line-break parity with the design.
The SF Pro webfont we ship composes about 1.3% narrower than the SF Pro
Text that Paper lays out with. Most blocks wrap identically anyway, but a
line that ends within a pixel or two of its box in the design can pack one
extra word here, costing the block a line. Adding this class restores the
design's line breaks. Use it only on blocks measured against Paper.
------------------------------------------------------------------------- */
.wrap-as-designed { letter-spacing: 0.004em; }
/* =========================================================================
Conditions page
========================================================================= */
.hero--conditions .hero__photo {
top: -190px; left: 0;
width: 100%; height: 960px;
background-image: url('assets/img/two-women-talking.jpg');
}
@media (max-width: 900px) {
/* frame the clinician's face in the clear upper-left of the photo — the
old right-side crop showed only the back of the patient's head */
.hero--conditions .hero__photo { background-size: auto 900px; background-position: 16% 0%; }
.hero--conditions .hero__scrim-angle {
background-image: linear-gradient(in oklab 8deg,
oklab(0% 0 0 / 93%) 0%, oklab(0% 0 0 / 88%) 28%, oklab(0% 0 0 / 62%) 55%,
oklab(0% 0 0 / 44%) 70%, oklab(0% 0 0 / 34%) 84%, oklab(0% 0 0 / 62%) 100%);
}
}
/* ---- what we treat, six condition cards ---- */
.cgrid {
display: flex;
flex-direction: column;
align-items: center;
padding: 104px var(--spacing-gutter) 120px;
background: var(--color-ground);
}
.cgrid__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
width: 100%;
max-width: var(--container-content);
}
.cgrid__title {
width: 780px;
max-width: 100%;
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-h2);
line-height: var(--leading-h2);
color: var(--color-ink);
}
.cgrid__lead {
width: 620px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: var(--leading-lead);
color: var(--color-body);
}
.cgrid__list {
display: flex;
flex-wrap: wrap;
gap: 30px;
width: 100%;
max-width: var(--container-content);
margin-top: 56px;
list-style: none;
}
.ccard {
display: flex;
flex-direction: column;
flex-shrink: 0;
gap: 14px;
width: 380px;
padding: 30px 28px 26px;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ccard:hover {
border-color: var(--color-accent-200);
box-shadow: #0000000F 0 4px 16px;
transform: translateY(-2px);
}
.ccard__icon { display: flex; height: 26px; color: var(--color-ink); }
.ccard__icon svg { flex-shrink: 0; }
.ccard__title {
font-family: var(--font-display);
font-size: 25px;
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-h3);
line-height: 31px;
color: var(--color-ink);
}
.ccard__copy {
font-family: var(--font-body);
font-size: 15px;
line-height: 23px;
color: var(--color-body);
}
/* ---- are you treatment-resistant, on the dark photo ---- */
.trdcheck {
display: flex;
flex-direction: column;
align-items: center;
padding: 112px var(--spacing-gutter) 124px;
background-color: var(--color-dark);
background-image: linear-gradient(in oklab 15.52deg,
oklab(0% 0 0 / 98%) 20%, oklab(0% 0 0 / 93%) 52%, oklab(0% 0 0 / 82%) 100%),
url('assets/img/waiting-room-bw.jpg');
background-size: cover;
background-position: 50%;
}
.trdcheck__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
width: 100%;
max-width: var(--container-content);
}
.section--dark .trdcheck__overline { color: var(--color-green-400); }
.trdcheck__title {
width: 840px;
max-width: 100%;
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-h2);
line-height: var(--leading-h2);
color: var(--color-on-dark);
}
.trdcheck__lead {
width: 660px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: var(--leading-lead);
color: var(--color-on-dark-body);
}
.trdlist {
display: flex;
flex-wrap: wrap;
gap: 24px;
width: 100%;
max-width: var(--container-content);
margin-top: 52px;
list-style: none;
}
.trdcard {
display: flex;
align-items: flex-start;
flex-shrink: 0;
gap: 16px;
width: 588px;
padding: 26px 28px;
border: 1px solid var(--color-dark-line);
border-radius: var(--radius-lg);
background: var(--color-dark-raised);
}
.trdcard__num {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin-top: 1px;
border-radius: var(--radius-pill);
background: var(--color-dark-line);
font-family: var(--font-body);
font-size: 13px;
font-weight: var(--font-weight-semibold);
line-height: 16px;
color: var(--color-on-dark-body);
}
.trdcard p {
flex-shrink: 0;
width: 490px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-h3);
color: var(--color-on-dark-body);
}
@media (max-width: 1279px) {
.ccard { width: calc((100% - 60px) / 3); }
.trdcard { width: calc((100% - 24px) / 2); }
.trdcard p { width: auto; flex: 1 1 0; }
}
@media (max-width: 900px) {
.cgrid { padding: 72px var(--spacing-gutter); }
.cgrid__title, .trdcheck__title { width: 100%; font-size: 28px; line-height: 34px; }
.cgrid__lead, .trdcheck__lead { width: 100%; font-size: 16px; line-height: 24px; }
/* the cards become a single ruled list, as in the mobile artboard */
.cgrid__list { flex-direction: column; gap: 0; margin-top: 34px; }
.ccard {
display: grid;
grid-template-columns: 24px 1fr;
column-gap: 14px;
row-gap: 5px;
width: 100%;
padding: 20px 0;
border: 0;
border-bottom: 1px solid var(--color-border);
border-radius: 0;
background: none;
}
.ccard:hover { transform: none; box-shadow: none; border-color: var(--color-border); }
.ccard__icon { grid-row: 1 / span 2; width: 24px; height: 24px; align-items: center; }
.ccard__icon svg { width: 24px; height: 24px; }
.ccard__title { font-size: var(--text-lead); font-weight: var(--font-weight-semibold); line-height: var(--leading-lead-140); }
.ccard__copy { color: var(--color-muted); line-height: 22px; }
.trdcheck { padding: 72px var(--spacing-gutter); }
.trdlist { flex-direction: column; gap: 12px; margin-top: 34px; }
.trdcard { width: 100%; padding: 18px; gap: 14px; }
.trdcard__num {
width: 24px; height: 24px; margin-top: 2px;
background: var(--color-glass-fill);
font-size: 12px; font-weight: var(--font-weight-medium);
color: var(--color-on-dark-quiet);
}
.trdcard p { width: 100%; font-size: 15px; line-height: 23px; }
}
/* =========================================================================
About page
========================================================================= */
.hero--about .hero__photo {
top: -189px; left: -72px;
width: 1504px; height: 1171px;
background-image: url('assets/img/mmh-team-group.jpg');
}
/* ---- why we exist ---- */
.awhy {
display: flex;
align-items: flex-start;
gap: 100px;
padding: 112px var(--spacing-gutter) 180px;
background: var(--color-ground);
}
.awhy__head {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-shrink: 0;
gap: 18px;
width: 420px;
}
.awhy__title {
width: 400px;
max-width: 100%;
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-h2);
line-height: var(--leading-h2);
color: var(--color-ink);
}
.awhy__body {
display: flex;
flex-direction: column;
flex-shrink: 0;
gap: 22px;
width: 680px;
}
.awhy__body p {
width: 660px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: var(--leading-lead);
color: var(--color-body);
}
/* ---- founder quote ---- */
.aquote {
display: flex;
flex-direction: column;
padding: 0 240px 0 300px;
background: var(--color-ground);
}
.aquote__text {
font-family: var(--font-display);
font-size: 34px;
font-weight: var(--font-weight-regular);
letter-spacing: -0.018em;
line-height: var(--leading-h2);
text-align: center;
color: var(--color-ink);
}
.aquote__by {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 26px;
font-family: var(--font-body);
font-size: 15px;
line-height: var(--leading-caption-140);
color: var(--color-muted);
}
.aquote__by b { font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-tight); color: var(--color-ink); }
.aquote__avatar {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: var(--radius-pill);
background-image: url('assets/img/dr-hammad-khan.jpg');
background-size: cover;
background-position: 62% 26%;
}
/* ---- founder credentials + bio ---- */
.afounder {
display: flex;
flex-direction: column;
align-items: center;
padding: 128px var(--spacing-gutter) 132px;
background: var(--color-ground);
}
.afounder__inner {
display: flex;
align-items: flex-start;
gap: 60px;
width: 100%;
max-width: var(--container-content);
margin-top: 72px;
padding-top: 44px;
border-top: 1px solid var(--color-hairline);
}
.creds {
display: flex;
flex-direction: column;
flex-shrink: 0;
gap: 14px;
width: 240px;
padding: 20px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-white);
}
.creds p {
font-family: var(--font-body);
font-size: var(--text-caption);
line-height: var(--leading-caption);
color: var(--color-body);
}
.creds .creds__overline { line-height: 14px; color: var(--color-muted); }
.afounder__cols {
display: flex;
flex-shrink: 0;
gap: 60px;
width: 900px;
margin-top: 34px;
}
.afounder__col {
display: flex;
flex-direction: column;
flex-shrink: 0;
gap: 16px;
width: 420px;
}
.afounder__col p {
font-family: var(--font-body);
font-size: 15.5px;
line-height: var(--leading-lead-140);
color: var(--color-ink);
}
.afounder__muted { color: var(--color-muted); }
/* ---- care team ---- */
.ateam {
display: flex;
flex-direction: column;
align-items: center;
padding: 112px var(--spacing-gutter) 124px;
background: var(--color-surface);
}
.ateam__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
width: 100%;
max-width: var(--container-content);
}
.ateam__title {
width: 780px;
max-width: 100%;
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-h2);
line-height: var(--leading-h2);
color: var(--color-ink);
}
.ateam__lead {
width: 620px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: var(--leading-lead);
color: var(--color-body);
}
.ateam__grid {
display: flex;
gap: 20px;
width: 100%;
max-width: var(--container-content);
margin-top: 56px;
}
.pcard {
display: flex;
flex-direction: column;
flex-shrink: 0;
gap: 16px;
width: 285px;
}
.pcard__photo {
flex-shrink: 0;
height: 340px;
border-radius: var(--radius-lg);
background-size: cover;
background-color: #E8E4E1;
}
.pcard__id { display: flex; flex-direction: column; gap: 3px; }
.pcard__id h3 {
font-family: var(--font-display);
font-size: var(--text-lead);
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-h3);
line-height: var(--leading-lead-140);
color: var(--color-ink);
}
.pcard__role {
font-family: var(--font-body);
font-size: var(--text-caption);
line-height: var(--leading-caption);
color: var(--color-accent-700);
}
.pcard__bio {
font-family: var(--font-body);
font-size: 14px;
line-height: var(--leading-card-140);
color: var(--color-body);
}
/* ---- our clinic ---- */
.aclinic {
display: flex;
flex-direction: column;
align-items: center;
padding: 112px var(--spacing-gutter) 120px;
background: var(--color-dark);
}
.aclinic__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
width: 100%;
max-width: var(--container-content);
}
.section--dark .aclinic__overline { color: var(--color-green-400); }
.aclinic__title {
width: 720px;
max-width: 100%;
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-h2);
line-height: var(--leading-h2);
color: var(--color-on-dark);
}
.aclinic__lead {
width: 620px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: var(--leading-lead);
color: var(--color-on-dark-body);
}
.aclinic__gallery {
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
max-width: var(--container-content);
margin-top: 56px;
}
.aclinic__wide {
height: 440px;
border-radius: var(--radius-lg);
}
.aclinic__row { display: flex; gap: 20px; }
.aclinic__tile {
flex: 1 1 0;
height: 280px;
border-radius: var(--radius-lg);
background-size: cover;
background-position: 50%;
}
/* ---- visit us ---- */
.avisit {
display: flex;
align-items: flex-start;
gap: 100px;
padding: 112px var(--spacing-gutter) 124px;
background: var(--color-ground);
}
.avisit__head {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-shrink: 0;
gap: 18px;
width: 520px;
}
.avisit__title {
width: 500px;
max-width: 100%;
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-h2);
line-height: var(--leading-h2);
color: var(--color-ink);
}
.avisit__lead {
width: 480px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: var(--leading-lead);
color: var(--color-body);
}
.factlist {
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 580px;
border-top: 1px solid var(--color-border);
}
.factlist__row {
display: flex;
align-items: flex-start;
gap: 32px;
padding-block: 22px;
border-bottom: 1px solid var(--color-border);
}
.factlist dt {
flex-shrink: 0;
width: 150px;
font-family: var(--font-body);
font-size: var(--text-caption);
font-weight: var(--font-weight-medium);
letter-spacing: 0.06em;
line-height: var(--leading-caption-140);
text-transform: uppercase;
color: var(--color-quiet);
}
.factlist dd {
flex-shrink: 0;
width: 390px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-h3);
color: var(--color-ink);
}
.factlist dd a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.factlist dd a:hover { color: var(--color-accent-700); }
@media (max-width: 1279px) {
.awhy, .avisit { gap: 56px; }
.awhy__body, .awhy__body p, .avisit__lead { width: auto; flex: 1 1 0; }
.aquote { padding-inline: var(--spacing-gutter); }
.afounder__cols { width: auto; flex: 1 1 0; }
.afounder__col, .factlist dd { width: auto; flex: 1 1 0; }
.ateam__grid { gap: 16px; }
.pcard { width: auto; flex: 1 1 0; }
.factlist { width: auto; flex: 1 1 0; }
}
@media (max-width: 900px) {
.awhy { flex-direction: column; gap: 24px; padding: 72px var(--spacing-gutter); }
.awhy__head, .awhy__title { width: 100%; }
.awhy__title, .ateam__title, .aclinic__title, .avisit__title { font-size: 28px; line-height: 34px; width: 100%; }
.awhy__body p, .ateam__lead, .aclinic__lead, .avisit__lead { font-size: 16px; line-height: 24px; }
/* the mobile artboard crops the group photo tighter and lower */
.hero--about .hero__photo { background-size: 150% auto; background-position: 50% 4%; }
/* the quote sits on its own raised band, left aligned */
.aquote { padding: 60px var(--spacing-gutter); background: var(--color-raised); }
.aquote__text { font-size: 22px; line-height: 30px; letter-spacing: var(--tracking-h3); text-align: left; }
.aquote__by { flex-wrap: wrap; justify-content: flex-start; gap: 8px; font-size: 14px; }
.afounder { padding: 0 var(--spacing-gutter) 72px; }
.afounder__inner { flex-direction: column; gap: 28px; margin-top: 0; padding-top: 0; border-top: 0; }
.creds { width: 100%; }
.afounder__cols { flex-direction: column; gap: 28px; width: 100%; margin-top: 0; }
.afounder__col { width: 100%; }
.ateam { padding: 72px var(--spacing-gutter); }
.ateam__grid { flex-direction: column; gap: 32px; margin-top: 34px; }
.pcard { width: 100%; }
.pcard__photo { height: 380px; }
.aclinic { padding: 72px var(--spacing-gutter); }
.aclinic__gallery { margin-top: 34px; gap: 12px; }
.aclinic__wide { height: 240px; }
.aclinic__row { flex-direction: column; gap: 12px; }
/* the row is a column here, so the tiles' `flex: 1 1 0` governs height and
collapsed them to nothing — set the basis, not just the height */
.aclinic__tile { flex: 0 0 200px; height: 200px; }
.avisit { flex-direction: column; gap: 32px; padding: 72px var(--spacing-gutter); }
.avisit__head { width: 100%; }
.factlist__row { flex-direction: column; gap: 6px; padding-block: 18px; }
.factlist dt { width: 100%; }
.factlist dd { width: 100%; font-size: 15px; line-height: 23px; }
}
/* =========================================================================
Patient resources page
========================================================================= */
.hero--resources .hero__photo {
top: -34px; left: 0;
width: 100%; height: 960px;
background-image: url('assets/img/woman-on-phone.jpg');
}
/* ---- your first visit ---- */
.pvisit {
display: flex;
flex-direction: column;
align-items: center;
padding: 104px var(--spacing-gutter) 120px;
background: var(--color-ground);
}
.pvisit__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
width: 100%;
max-width: var(--container-content);
}
.pvisit__title {
width: 780px;
max-width: 100%;
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-h2);
line-height: var(--leading-h2);
color: var(--color-ink);
}
.pvisit__lead {
width: 640px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: var(--leading-lead);
color: var(--color-body);
}
.steplist {
display: flex;
flex-direction: column;
width: 100%;
max-width: var(--container-content);
margin-top: 60px;
border-top: 1px solid var(--color-border);
}
.steprow {
display: flex;
align-items: flex-start;
gap: 48px;
padding-block: 34px;
border-bottom: 1px solid var(--color-border);
}
.steprow__meta { display: flex; flex-direction: column; flex-shrink: 0; gap: 4px; width: 130px; }
.steprow__num {
font-family: var(--font-body);
font-size: var(--text-caption);
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-overline);
line-height: var(--leading-caption-140);
color: var(--color-muted);
}
.steprow__stage {
font-family: var(--font-body);
font-size: var(--text-caption);
font-weight: var(--font-weight-medium);
line-height: var(--leading-caption);
color: var(--color-accent-700);
}
.steprow__title {
flex-shrink: 0;
width: 380px;
font-family: var(--font-display);
font-size: 22px;
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-h3);
line-height: var(--leading-lead);
color: var(--color-ink);
}
.steprow__copy {
flex-shrink: 0;
width: 594px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-h3);
color: var(--color-body);
}
/* ---- tools and forms ---- */
.tools {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 140px var(--spacing-gutter);
background: var(--color-ground);
}
.tools__head { width: 100%; max-width: var(--container-content); }
.tools__title {
width: 760px;
max-width: 100%;
font-family: var(--font-display);
font-size: var(--text-h2-lg);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-h2-90);
color: var(--color-ink);
}
.tools__lead {
width: 660px;
max-width: 100%;
margin-top: 20px;
font-family: var(--font-body);
font-size: var(--text-h3);
line-height: 27px;
color: var(--color-body);
}
.tools__funnels {
display: flex;
gap: 24px;
width: 100%;
max-width: var(--container-content);
margin-top: 50px;
}
.funnel {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-shrink: 0;
width: 588px;
padding: 36px;
border-radius: 16px;
background: var(--color-white);
box-shadow: #FFFFFFF2 0 1px 0 inset, #00000026 0 0 0 1px, #00000014 0 2px 8px;
transition: box-shadow .18s ease, transform .18s ease;
}
.funnel:hover { transform: translateY(-2px); box-shadow: #FFFFFFF2 0 1px 0 inset, #00000026 0 0 0 1px, #0000001F 0 6px 18px; }
.funnel__body { display: flex; flex-direction: column; }
.funnel__tag {
display: inline-flex;
align-items: center;
align-self: flex-start;
margin-bottom: 20px;
padding: 6px 12px;
border-radius: var(--radius-pill);
background: var(--color-accent-50);
box-shadow: inset 0 0 0 1px var(--color-accent-200);
font-family: var(--font-body);
font-size: 12px;
font-weight: var(--font-weight-medium);
line-height: 15px;
color: var(--color-accent-700);
}
.funnel__title {
font-family: var(--font-display);
font-size: 28px;
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-tight);
line-height: 34px;
color: var(--color-ink);
}
.funnel__copy {
width: 460px;
max-width: 100%;
margin-top: 12px;
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-body-140);
color: var(--color-body);
}
.funnel__cta { align-self: flex-start; margin-top: 32px; padding: 12px 22px; font-size: 15px; line-height: var(--leading-caption); }
.tools__links {
display: flex;
gap: 24px;
width: 100%;
max-width: var(--container-content);
margin-top: 24px;
}
.linkcard {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-shrink: 0;
width: 384px;
padding: 28px;
border-radius: var(--radius-lg);
background: var(--color-white);
box-shadow: #00000012 0 0 0 1px, #00000008 0 1px 2px, #0000000A 0 2px 6px;
transition: box-shadow .18s ease, transform .18s ease;
}
.linkcard:hover { transform: translateY(-2px); box-shadow: #00000012 0 0 0 1px, #00000008 0 1px 2px, #00000014 0 6px 16px; }
.linkcard h3 {
font-family: var(--font-body);
font-size: var(--text-lead);
font-weight: var(--font-weight-medium);
line-height: var(--leading-lead-140);
color: var(--color-ink);
}
.linkcard p {
width: 320px;
max-width: 100%;
margin-top: 8px;
font-family: var(--font-body);
font-size: 15px;
line-height: 22px;
color: var(--color-muted);
}
.linkcard__more {
display: flex;
align-items: center;
gap: 6px;
margin-top: 24px;
font-family: var(--font-body);
font-size: 14.5px;
font-weight: var(--font-weight-medium);
line-height: 19px;
color: var(--color-accent-700);
}
/* ---- insurance and coverage, on the dark photo ---- */
.cover {
display: flex;
flex-direction: column;
align-items: center;
padding: 112px var(--spacing-gutter) 124px;
background-color: var(--color-dark);
background-image: linear-gradient(in oklab 15.52deg,
oklab(0% 0 0 / 98%) 20%, oklab(0% 0 0 / 93%) 52%, oklab(0% 0 0 / 82%) 100%),
url('assets/img/waiting-room-bw.jpg');
background-size: cover;
background-position: 82% center;
}
.cover__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
width: 100%;
max-width: var(--container-content);
}
.section--dark .cover__overline { color: var(--color-green-400); }
.cover__title {
width: 820px;
max-width: 100%;
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-h2);
line-height: var(--leading-h2);
color: var(--color-on-dark);
}
.cover__lead {
width: 680px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: var(--leading-lead);
color: var(--color-on-dark-body);
}
.cover__body {
display: flex;
align-items: flex-start;
gap: 40px;
width: 100%;
max-width: var(--container-content);
margin-top: 52px;
}
.plangrid {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
gap: 12px;
width: 730px;
padding: 36px 30px;
border-radius: var(--radius-lg);
background: var(--color-ground);
}
/* the shared insurer logos, laid out as a fixed grid instead of a marquee */
.plangrid .ticker__logo { width: 158px; height: 62px; justify-content: center; }
.plannote { display: flex; flex-direction: column; flex-shrink: 0; gap: 14px; width: 430px; }
.section--dark .plannote__overline { color: var(--color-green-400); }
.plannote__list {
font-family: var(--font-body);
font-size: var(--text-body);
line-height: 28px;
color: var(--color-on-dark-body);
}
.plannote__fine {
margin-top: 6px;
padding-top: 16px;
border-top: 1px solid var(--color-dark-line);
font-family: var(--font-body);
font-size: 14px;
line-height: 22px;
color: var(--color-on-dark-quiet);
}
.plannote__fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.plannote__fine a:hover { color: var(--color-on-dark); }
.cover__promises {
display: flex;
gap: 24px;
width: 100%;
max-width: var(--container-content);
margin-top: 44px;
}
.promise {
display: flex;
flex-direction: column;
flex-shrink: 0;
gap: 10px;
width: 384px;
padding-top: 26px;
border-top: 2px solid var(--color-green-500);
}
.promise h3 {
width: 360px;
max-width: 100%;
font-family: var(--font-display);
font-size: var(--text-lead);
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-h3);
line-height: var(--leading-h3);
color: var(--color-on-dark);
}
.promise p {
width: 360px;
max-width: 100%;
font-family: var(--font-body);
font-size: 15px;
line-height: 23px;
color: var(--color-on-dark-body);
}
.getstarted__lead a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1279px) {
.steprow { gap: 32px; }
.steprow__title { width: 300px; }
.steprow__copy { width: auto; flex: 1 1 0; }
.funnel, .linkcard, .promise, .plangrid, .plannote { width: auto; flex: 1 1 0; }
.funnel__copy, .linkcard p, .promise h3, .promise p { width: 100%; }
}
@media (max-width: 900px) {
/* the mobile artboard crops the same photo tighter */
/* the mobile artboard's portrait crop reads as a stock headshot at this size;
Moiz asked for the office instead */
.hero--resources .hero__photo {
/* the waiting-room shot from the home clinic section: chandelier up top,
the armchair row settling in under the headline */
background-image: url('assets/img/waiting-room.jpg');
background-size: cover;
background-position: 45% 50%;
}
.pvisit { padding: 72px var(--spacing-gutter); }
.pvisit__title, .cover__title { font-size: 28px; line-height: 34px; width: 100%; }
.pvisit__lead, .cover__lead, .tools__lead { width: 100%; font-size: 16px; line-height: 24px; }
.steplist { margin-top: 34px; }
.steprow { flex-direction: column; gap: 10px; padding-block: 26px; }
.steprow__meta { flex-direction: row; align-items: baseline; gap: 10px; width: 100%; }
/* the number sits inline with the stage name here, and 0.18em of tracking
pulls "02" apart into "0 2" at this size */
.steprow__num { letter-spacing: 0.05em; }
.steprow__title { width: 100%; font-size: 20px; line-height: 27px; }
.steprow__copy { width: 100%; font-size: 15px; line-height: 23px; }
.tools { padding: 72px var(--spacing-gutter); }
.tools__title { width: 100%; font-size: 30px; line-height: 34px; }
.tools__funnels, .tools__links { flex-direction: column; gap: 12px; margin-top: 34px; }
.funnel { width: 100%; padding: 24px; }
.funnel__title { font-size: 24px; line-height: 30px; }
.linkcard { width: 100%; padding: 22px; }
.cover { padding: 72px var(--spacing-gutter); }
.cover__body { flex-direction: column; gap: 24px; margin-top: 34px; }
.plangrid { width: 100%; padding: 22px 16px; gap: 8px; justify-content: center; }
.plangrid .ticker__logo { width: calc((100% - 8px) / 2); height: 54px; }
.plangrid .ticker__logo svg { transform: scale(.8); }
.plannote { width: 100%; }
.cover__promises { flex-direction: column; gap: 24px; margin-top: 34px; }
.promise { width: 100%; padding-top: 18px; }
}
/* =========================================================================
For providers page
========================================================================= */
.hero--providers .hero__photo {
top: -140px; left: 0;
width: 100%; height: 960px;
background-image: url('assets/img/mmh-meeting.jpg');
}
/* ---- who to refer ---- */
.refer {
display: flex;
align-items: flex-start;
gap: 90px;
padding: 104px var(--spacing-gutter) 120px;
background: var(--color-ground);
}
.refer__head {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-shrink: 0;
gap: 18px;
width: 400px;
}
.refer__title {
width: 390px;
max-width: 100%;
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-h2);
line-height: var(--leading-h2);
color: var(--color-ink);
}
.refer__lead {
width: 380px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-h3);
color: var(--color-body);
}
.criteria {
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 710px;
border-top: 1px solid var(--color-border);
}
.criteria li {
display: flex;
align-items: flex-start;
gap: 22px;
padding-block: 24px;
border-bottom: 1px solid var(--color-border);
}
.criteria__dot {
flex-shrink: 0;
width: 8px;
height: 8px;
margin-top: 9px;
border-radius: var(--radius-pill);
background: var(--color-leaf-500);
}
.criteria p {
flex-shrink: 0;
width: 680px;
max-width: 100%;
font-family: var(--font-body);
font-size: 17px;
line-height: 26px;
color: var(--color-ink);
}
/* ---- how to refer, on the dark photo ---- */
.howrefer {
display: flex;
flex-direction: column;
align-items: center;
padding: 112px var(--spacing-gutter) 124px;
background-color: var(--color-dark);
background-image: linear-gradient(in oklab 15.52deg,
oklab(0% 0 0 / 98%) 20%, oklab(0% 0 0 / 93%) 52%, oklab(0% 0 0 / 82%) 100%),
url('assets/img/waiting-room-bw.jpg');
background-size: cover;
background-position: 28% center;
}
.howrefer__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
width: 100%;
max-width: var(--container-content);
}
.section--dark .howrefer__overline { color: var(--color-green-400); }
.howrefer__title {
width: 760px;
max-width: 100%;
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-h2);
line-height: var(--leading-h2);
color: var(--color-on-dark);
}
.howrefer__lead {
width: 640px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: var(--leading-lead);
color: var(--color-on-dark-body);
}
.channels {
display: flex;
gap: 40px;
width: 100%;
max-width: var(--container-content);
margin-top: 56px;
}
.channel { display: flex; flex-direction: column; flex-shrink: 0; gap: 20px; width: 373px; }
/* the little "status chip" above each channel */
.refchip {
display: flex;
flex-direction: column;
gap: 14px;
padding: 18px;
border: 1px solid var(--color-dark-line);
border-radius: var(--radius-lg);
background: var(--color-dark-raised);
}
.refchip__row { display: flex; align-items: center; gap: 12px; }
.refchip__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-pill);
}
.refchip__icon--call { background: var(--color-green-500); }
.refchip__icon--doc { background: var(--color-dark-line); border-radius: var(--radius-sm); }
.refchip__icon--lock { background: var(--color-accent-800); }
.refchip__id { display: flex; flex-direction: column; flex-grow: 1; gap: 2px; min-width: 0; }
.refchip__id b {
font-family: var(--font-body);
font-size: 14.5px;
font-weight: var(--font-weight-medium);
line-height: var(--leading-caption-140);
color: var(--color-on-dark);
}
.refchip__id span {
font-family: var(--font-body);
font-size: 13px;
line-height: 16px;
color: var(--color-on-dark-quiet);
}
.refchip__state {
flex-shrink: 0;
font-family: var(--font-body);
font-size: 12.5px;
font-weight: var(--font-weight-medium);
line-height: 16px;
text-align: right;
color: var(--color-green-400);
}
.waveform { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.waveform i { width: 3px; border-radius: 2px; background: var(--color-green-600); }
.waveform i.is-mid { background: var(--color-green-500); }
.waveform i.is-hi { background: var(--color-green-400); }
.waveform i.is-off { background: var(--color-dark-line); }
.refchip__progress { display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 26px; }
.refchip__bar { height: 6px; border-radius: var(--radius-pill); background: var(--color-dark-line); }
.refchip__bar i { display: block; width: 100%; height: 6px; border-radius: var(--radius-pill); background: var(--color-green-500); }
.refchip__progress p {
font-family: var(--font-body);
font-size: 12px;
line-height: 16px;
color: var(--color-on-dark-quiet);
}
.refchip__tags { display: flex; align-items: center; gap: 8px; height: 26px; }
.refchip__tags span {
padding: 5px 10px;
border-radius: var(--radius-pill);
background: var(--color-dark-line);
font-family: var(--font-body);
font-size: 12px;
line-height: 16px;
color: var(--color-on-dark-body);
}
.channel__copy { display: flex; flex-direction: column; gap: 10px; }
.channel__copy h3 {
font-family: var(--font-display);
font-size: 22px;
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-h3);
line-height: 29px;
color: var(--color-on-dark);
}
.channel__copy p {
font-family: var(--font-body);
font-size: 15.5px;
line-height: var(--leading-body-140);
color: var(--color-on-dark-body);
}
/* ---- what you get back ---- */
.getback {
display: flex;
flex-direction: column;
align-items: center;
padding: 112px var(--spacing-gutter) 124px;
background: var(--color-surface);
}
.getback__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
width: 100%;
max-width: var(--container-content);
}
.getback__title {
width: 760px;
max-width: 100%;
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-h2);
line-height: var(--leading-h2);
color: var(--color-ink);
}
.getback__lead {
width: 640px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: var(--leading-lead);
color: var(--color-body);
}
.getback__grid {
display: flex;
gap: 24px;
width: 100%;
max-width: var(--container-content);
margin-top: 52px;
}
.gbcard {
display: flex;
flex-direction: column;
flex-shrink: 0;
gap: 10px;
width: 282px;
padding-top: 24px;
border-top: 1px solid var(--color-ink);
}
.gbcard h3 {
width: 270px;
max-width: 100%;
font-family: var(--font-display);
font-size: var(--text-lead);
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-h3);
line-height: var(--leading-h3);
color: var(--color-ink);
}
.gbcard p {
width: 270px;
max-width: 100%;
font-family: var(--font-body);
font-size: 15px;
line-height: 23px;
color: var(--color-body);
}
@media (max-width: 1279px) {
.refer { gap: 56px; }
.criteria, .criteria p { width: auto; flex: 1 1 0; }
.channels { gap: 24px; }
.channel, .gbcard { width: auto; flex: 1 1 0; }
.gbcard h3, .gbcard p { width: 100%; }
}
@media (max-width: 900px) {
/* the mobile artboard crops the same photo tighter */
/* frame Dr. Khan's full profile — the old 62% offset clipped his crown
and pushed his face into the headline */
.hero--providers .hero__photo { background-size: cover; background-position: 74% 50%; }
.refer { flex-direction: column; gap: 28px; padding: 72px var(--spacing-gutter); }
.refer__head, .refer__title, .refer__lead { width: 100%; }
.refer__title, .howrefer__title, .getback__title { font-size: 28px; line-height: 34px; width: 100%; }
.howrefer__lead, .getback__lead { width: 100%; font-size: 16px; line-height: 24px; }
.criteria { width: 100%; }
.criteria li { gap: 14px; padding-block: 18px; }
.criteria p { width: 100%; font-size: 15.5px; line-height: 24px; }
.howrefer { padding: 72px var(--spacing-gutter); }
.channels { flex-direction: column; gap: 32px; margin-top: 34px; }
.channel { width: 100%; }
.channel__copy h3 { font-size: 20px; line-height: 27px; }
.getback { padding: 72px var(--spacing-gutter); }
.getback__grid { flex-direction: column; gap: 24px; margin-top: 34px; }
.gbcard { width: 100%; padding-top: 18px; }
}
/* =========================================================================
Treatment / condition detail pages (TMS, TRD, accelerated TMS)
========================================================================= */
.hero--tms .hero__photo {
top: -760px; left: 0;
width: 100%; height: 2601px;
background-image: url('assets/img/tms-coil-patient.jpg');
}
/* ---- two-column explainer: sticky-ish label left, prose right ---- */
.explain {
display: flex;
align-items: flex-start;
gap: 100px;
padding: 112px var(--spacing-gutter) 124px;
background: var(--color-ground);
}
.explain--basics { padding: 104px var(--spacing-gutter) 120px; }
.explain--safety { background: var(--color-surface); }
.explain__head {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-shrink: 0;
gap: 18px;
width: 420px;
}
.explain__title {
width: 410px;
max-width: 100%;
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-h2);
line-height: var(--leading-h2);
color: var(--color-ink);
}
.explain__note {
width: 390px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-h3);
color: var(--color-body);
}
.explain__body {
display: flex;
flex-direction: column;
flex-shrink: 0;
gap: 22px;
width: 680px;
}
.explain__body p {
width: 660px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: var(--leading-lead);
color: var(--color-body);
}
/* ---- what a session is like, on the dark photo ---- */
.session {
display: flex;
flex-direction: column;
align-items: center;
overflow: clip;
padding: 112px var(--spacing-gutter) 124px;
background-color: var(--color-dark);
background-image: linear-gradient(in oklab 15.52deg,
oklab(0% 0 0 / 98%) 20%, oklab(0% 0 0 / 93%) 52%, oklab(0% 0 0 / 82%) 100%),
url('assets/img/waiting-room-bw.jpg');
background-size: cover;
background-position: 50%;
}
.session__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
width: 100%;
max-width: var(--container-content);
}
.section--dark .session__overline { color: var(--color-green-400); }
.session__title {
width: 800px;
max-width: 100%;
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: var(--font-weight-regular);
letter-spacing: var(--tracking-h2);
line-height: var(--leading-h2);
color: var(--color-on-dark);
}
.session__lead {
width: 640px;
max-width: 100%;
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: var(--leading-lead);
color: var(--color-on-dark-body);
}
.sesslist {
display: flex;
gap: 40px;
width: 100%;
max-width: var(--container-content);
margin-top: 56px;
}
.sesscard {
display: flex;
flex-direction: column;
flex-shrink: 0;
gap: 12px;
width: 373px;
padding-top: 22px;
border-top: 1px solid var(--color-glass-line);
}
.sesscard__num {
font-family: var(--font-body);
font-size: 14px;
line-height: var(--leading-caption-140);
color: var(--color-on-dark-quiet);
}
.sesscard h3 {
font-family: var(--font-display);
font-size: 22px;
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-h3);
line-height: 29px;
color: var(--color-on-dark);
}
.sesscard p {
font-family: var(--font-body);
font-size: 15.5px;
line-height: var(--leading-body-140);
color: var(--color-on-dark-body);
}
@media (max-width: 1279px) {
.explain { gap: 56px; }
.explain__body, .explain__body p { width: auto; flex: 1 1 0; }
.sesslist { gap: 24px; }
.sesscard { width: auto; flex: 1 1 0; }
}
@media (max-width: 900px) {
/* the mobile artboard crops the same photo tighter */
.hero--tms .hero__photo { background-size: cover; background-position: 60% 24%; }
.explain, .explain--basics { flex-direction: column; gap: 24px; padding: 72px var(--spacing-gutter); }
.explain__head, .explain__title, .explain__note { width: 100%; }
.explain__title, .session__title { font-size: 28px; line-height: 34px; width: 100%; }
.explain__body { width: 100%; gap: 18px; }
.explain__body p, .session__lead { width: 100%; font-size: 16px; line-height: 24px; }
.session { padding: 72px var(--spacing-gutter); }
.sesslist { flex-direction: column; gap: 24px; margin-top: 34px; }
.sesscard { width: 100%; padding-top: 18px; }
.sesscard h3 { font-size: 20px; line-height: 27px; }
}
/* ---- treatment-resistant depression page ---- */
.hero--trd .hero__photo {
top: -234px; left: 0;
width: 100%; height: 960px;
background-image: url('assets/img/hands-gold-jewelry.jpg');
}
/* same dark criteria block as the conditions page, framed further right */
.trdcheck--right { background-position: 22% center; }
@media (max-width: 900px) {
.hero--trd .hero__photo { background-size: cover; background-position: 45% 40%; }
}
/* ---- accelerated TMS page ---- */
.hero--accel .hero__photo {
top: -150px; left: 0;
width: 100%; height: 960px;
background-image: url('assets/img/front-desk-team.jpg');
}
/* ---- Spravato page ---- */
.hero--spravato .hero__photo {
top: -300px; left: 0;
width: 100%; height: 1400px;
background-image: url('assets/img/person-on-chair.jpg');
background-size: cover;
background-position: 50% 30%;
}
@media (max-width: 900px) {
.hero--spravato .hero__photo { background-size: cover; background-position: 54% 34%; }
}
/* ---- ADHD testing page ----
same photo the ADHD block on treatments.html uses, so the two read as one
subject when a visitor clicks through */
.hero--adhd .hero__photo {
top: -120px; left: 0;
width: 100%; height: 960px;
background-image: url('assets/img/woman-countertop.jpg');
background-size: cover;
background-position: 50% 42%;
}
@media (max-width: 900px) {
.hero--adhd .hero__photo { background-size: cover; background-position: 38% 44%; }
}
/* ---- medication management page ---- */
.hero--meds .hero__photo {
top: -120px; left: 0;
width: 100%; height: 960px;
background-image: url('assets/img/mmh-meeting.jpg');
background-size: cover;
background-position: 50% 38%;
}
@media (max-width: 900px) {
.hero--meds .hero__photo { background-size: cover; background-position: 62% 40%; }
}
.accel-intro {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--spacing-gutter) var(--spacing-gutter) 0;
background: var(--color-ground);
}
.accel-intro__lede,
.accel-intro__sub {
width: 980px;
max-width: 100%;
font-family: var(--font-display);
font-size: 28px;
font-weight: var(--font-weight-regular);
letter-spacing: -0.015em;
line-height: 40px;
color: var(--color-ink);
}
.accel-intro__sub { margin-top: 14px; color: var(--color-muted); }
.accel-week {
display: flex;
flex-direction: column;
align-items: center;
padding: 96px var(--spacing-gutter) var(--spacing-gutter);
background: var(--color-ground);
}
.weekcard {
display: flex;
flex-direction: column;
width: 100%;
max-width: var(--container-content);
padding: 40px 44px 44px;
border: 1px solid var(--color-hairline);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.weekcard__head { padding-bottom: 26px; }
.weekcard__head h2 {
font-family: var(--font-display);
font-size: 24px;
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-h3);
line-height: 32px;
color: var(--color-ink);
}
.dayrow {
display: flex;
align-items: flex-start;
gap: 26px;
padding-block: 24px;
border-top: 1px solid var(--color-hairline);
}
.dayrow__day { flex-shrink: 0; display: flex; align-items: flex-start; width: 78px; }
.dayrow__day span {
padding: 5px 11px;
border-radius: var(--radius-pill);
background: var(--color-raised);
font-family: var(--font-body);
font-size: 12px;
font-weight: var(--font-weight-medium);
line-height: 16px;
white-space: nowrap;
color: var(--color-muted);
}
.dayrow__photo {
flex-shrink: 0;
width: 150px;
height: 100px;
border-radius: var(--radius-md);
background-color: #E8E4E1;
background-size: cover;
}
.dayrow__copy { display: flex; flex-direction: column; flex-shrink: 0; gap: 7px; width: 832px; max-width: 100%; }
.dayrow__copy h3 {
font-family: var(--font-display);
font-size: var(--text-h3);
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-h3);
line-height: var(--leading-lead-140);
color: var(--color-ink);
}
.dayrow__copy p {
font-family: var(--font-body);
font-size: 15px;
line-height: 23px;
color: var(--color-muted);
}
@media (max-width: 1279px) {
.dayrow__copy { width: auto; flex: 1 1 0; }
}
@media (max-width: 900px) {
.hero--accel .hero__photo { background-size: cover; background-position: 34% 42%; }
.accel-intro { padding: 56px var(--spacing-gutter) 0; }
.accel-intro__lede, .accel-intro__sub { width: 100%; font-size: 21px; line-height: 30px; }
.accel-week { padding: 40px var(--spacing-gutter) 72px; }
.weekcard { padding: 24px 20px 20px; }
.weekcard__head { padding-bottom: 18px; }
.weekcard__head h2 { font-size: 20px; line-height: 27px; }
.dayrow { flex-wrap: wrap; gap: 14px; padding-block: 18px; }
.dayrow__day { width: auto; }
.dayrow__photo { width: 100%; height: 160px; order: 3; }
/* flex-basis, not width: the tablet rule above sets `flex: 1 1 0`, which wins
on the main axis and would let the copy share the chip's line */
.dayrow__copy { flex: 0 0 100%; order: 2; }
}
/* =========================================================================
How it works — the three overlays finish themselves as you scroll in
Each card starts one beat before its punchline: the day unpicked, the
treatment unmatched, the claim unverified. As its step wakes (the same
.is-active the timeline already sets) it settles into exactly the state it
was designed in — nothing here changes the resting design, only how it
arrives. Scoped to .js-steps so the cards render finished if the script
never runs, and the global reduced-motion rule collapses it to an instant
state change.
========================================================================= */
.cal__sel::before,
.cal__slot--active::before,
.match__icon--on::before {
transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
/* the verification lands a little slower than the other two beats — it is the
payoff of the three, and the tick needs room to draw after the pill settles */
.eob__verified { transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1); }
.cal__sel,
.cal__slot--active,
.match__name--on,
.match__rec,
.match__icon--on svg path,
.match__icon--on svg rect { transition: color .7s ease, stroke .7s ease; }
.eob__verified svg path { transition: stroke-dashoffset .9s ease .55s; }
/* ---- step 1: the day gets picked, then the time ---- */
.js-steps .step:not(.is-active) .cal__sel::before { opacity: 0; transform: scale(.5); }
.js-steps .step:not(.is-active) .cal__sel { color: #FFFFFFCC; }
.js-steps .step:not(.is-active) .cal__slot--active::before { opacity: 0; transform: scale(.94); }
.js-steps .step:not(.is-active) .cal__slot--active { color: #FFFFFF; }
.step.is-active .cal__sel::before { transition-delay: .3s; }
.step.is-active .cal__sel { transition-delay: .3s; }
.step.is-active .cal__slot--active::before,
.step.is-active .cal__slot--active { transition-delay: .8s; }
/* ---- step 2: the matched treatment lights up ---- */
.js-steps .step:not(.is-active) .match__icon--on::before { opacity: 0; transform: scale(.9); }
.js-steps .step:not(.is-active) .match__name--on { color: var(--color-on-dark-quiet); }
/* the icon is drawn dark for the mint fill, so it has to ride back to grey */
.js-steps .step:not(.is-active) .match__icon--on svg path { stroke: #B0ABA7; }
.js-steps .step:not(.is-active) .match__rec { color: transparent; }
.step.is-active .match__icon--on::before,
.step.is-active .match__icon--on svg path,
.step.is-active .match__name--on { transition-delay: .35s; }
.step.is-active .match__rec { transition-delay: .85s; }
/* ---- step 3: the claim comes back verified, and the tick draws ---- */
.js-steps .step:not(.is-active) .eob__verified { opacity: 0; transform: scale(.92); }
/* ~9.6 user units of path; 12 overshoots slightly so the tick lands early */
.eob__verified svg path { stroke-dasharray: 12; stroke-dashoffset: 0; }
.js-steps .step:not(.is-active) .eob__verified svg path { stroke-dashoffset: 12; }
.step.is-active .eob__verified { transition-delay: .5s; }
/* =========================================================================
Tablet portrait — 601 to 900
These widths take the mobile stack, which is correct for the type and the
gutters, but a single column of full-width cards wastes the room a tablet
actually has. The card grids go back to two or three across here.
Everything sets an explicit flex-basis rather than width: the tablet rule
above hands most of these `flex: 1 1 0`, and a basis of 0 both beats width
and stops flex-wrap from ever wrapping.
========================================================================= */
@media (min-width: 601px) and (max-width: 900px) {
/* about — care team and the clinic tiles */
.ateam__grid { flex-direction: row; flex-wrap: wrap; gap: 20px; }
.pcard { flex: 0 0 calc((100% - 20px) / 2); }
.pcard__photo { height: 300px; }
.aclinic__row { flex-direction: row; gap: 12px; }
.aclinic__tile { flex: 1 1 0; height: 180px; }
/* conditions and TRD — the numbered criteria cards */
.trdlist { flex-direction: row; flex-wrap: wrap; gap: 12px; }
.trdcard { flex: 0 0 calc((100% - 12px) / 2); }
/* patient resources — the two funnel cards, link cards and promises */
.tools__funnels { flex-direction: row; gap: 16px; }
.funnel { flex: 1 1 0; }
.tools__links { flex-direction: row; flex-wrap: wrap; gap: 12px; }
.linkcard { flex: 0 0 calc((100% - 12px) / 2); }
.cover__promises { flex-direction: row; flex-wrap: wrap; gap: 24px; }
.promise { flex: 0 0 calc((100% - 24px) / 2); }
/* for providers — referral channels and what you get back */
.channels { flex-direction: row; flex-wrap: wrap; gap: 20px; }
.channel { flex: 0 0 calc((100% - 20px) / 2); }
.getback__grid { flex-direction: row; flex-wrap: wrap; gap: 20px; }
.gbcard { flex: 0 0 calc((100% - 20px) / 2); }
/* TMS therapy — the three session beats */
.sesslist { flex-direction: row; gap: 16px; }
.sesscard { flex: 1 1 0; }
/* conditions — the six condition rows read fine as a list, but two up uses
the width without shrinking the type */
.cgrid__list { flex-direction: row; flex-wrap: wrap; column-gap: 28px; }
.ccard { flex: 0 0 calc((100% - 28px) / 2); }
}
/* =========================================================================
Mobile — hero photos fill the hero
Each page sets its desktop crop geometry with `.hero--x .hero__photo`
(things like `top: -189px; width: 1504px`). That outranks the generic
mobile `.hero__photo` rule, so on a phone the layer kept its desktop box
and every percentage in background-size/position resolved against 1504px
instead of 390. This sits at the end of the file so it wins the tie, and
leaves each page free to set only size and position above.
========================================================================= */
@media (max-width: 900px) {
.hero .hero__photo {
inset: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
/* =========================================================================
Mobile refinements — Aug 10 review pass
========================================================================= */
@media (max-width: 900px) {
/* ---- awkward wraps in the section headers ----------------------------
The mobile artboards set these headlines and decks on a 330px measure
and let them break evenly. Balancing does the same job without hard
coding a width per heading. */
.hero__title,
.problem__title, .treatments__title, .howto__title, .outcomes__title,
.space__title, .press__title, .team__title, .reviews__title, .faq__title,
.cgrid__title, .trdcheck__title, .awhy__title, .ateam__title, .aclinic__title,
.avisit__title, .pvisit__title, .cover__title, .tools__title, .refer__title,
.howrefer__title, .getback__title, .explain__title, .session__title,
.tfaq__title, .matcher__title, .compare__title, .getstarted__title {
text-wrap: balance;
}
.treatments__lead, .outcomes__lead, .space__lead, .team__lead, .howto__lead,
.reviews__lead, .problem__lead, .hero__sub {
text-wrap: pretty;
}
/* the decks carry a hard
placed for the desktop measure; at phone width
it leaves a two-word orphan line */
.treatments__lead br, .outcomes__lead br, .space__lead br, .team__lead br,
.howto__lead br, .reviews__lead br, .problem__lead br, .press__lead br,
.hero__title br {
display: none;
}
/* ---- reviews: the artboard shows four, not nine ---------------------- */
/* three stacked columns of three was nine cards to scroll past; the artboard
shows four and fades out */
.reviewgrid__col:nth-child(3) { display: none; }
.reviewgrid__col:nth-child(2) .review:nth-of-type(n + 2) { display: none; }
/* ---- care team: a tappable 2x2 instead of a marquee ------------------
The track never reads as scrollable on a phone. Two up, and tapping a
card reveals that person's bio rather than relying on hover. */
/* undo the marquee-era full-bleed viewport — the grid sits inside the
normal gutters */
.team__viewport { overflow: visible; width: 100%; margin-inline: 0; }
.team__cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
height: auto;
width: 100%;
animation: none;
}
/* the card must grow to whatever the open bio needs, so the body sits in
flow at the bottom of a flex column instead of hanging absolutely */
.tmember {
flex: none;
width: auto;
height: auto;
min-height: 250px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
/* relative, not static: the photo and scrim are absolute and would paint
over in-flow static text */
.tmember__body { position: relative; inset: auto; margin: 14px; }
.tmember__name { font-size: 15px; line-height: 20px; margin-bottom: 2px; }
.tmember__role { font-size: 12.5px; line-height: 17px; margin-bottom: 4px; }
.tmember__bio { font-size: 12.5px; line-height: 18px; }
/* tap target state, set by script.js */
.tmember.is-open .tmember__bio { grid-template-rows: 1fr; opacity: 1; margin-bottom: 10px; }
.tmember.is-open .tmember__scrim {
background-image: linear-gradient(in oklab 180deg, oklab(0% 0 0 / 34%) 0%,
oklab(0% 0 0 / 72%) 40%, oklab(0% 0 0 / 90%) 100%);
}
/* script.js clones the track contents for the seamless marquee loop; in grid
mode those duplicates would just be four extra cards */
.team__cards > [aria-hidden="true"] { display: none; }
}
/* ---- About: where our providers trained ------------------------------
A logo marquee in the same idiom as the insurer ticker. The four marks
that exist as freely licensed SVGs on Wikimedia Commons are the real
wordmarks, recoloured to a single grey via currentColor; Emory and the
San Francisco VA have no free mark, so they are set in type at the same
optical weight and sit naturally beside the others. */
.trained {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: 100%;
max-width: var(--container-content);
margin-top: 44px;
padding-top: 34px;
border-top: 1px solid var(--color-hairline);
}
.trained__label {
font-family: var(--font-body);
font-size: 12px;
font-weight: var(--font-weight-medium);
letter-spacing: 0.14em;
line-height: 16px;
text-transform: uppercase;
color: var(--color-muted);
}
.trained__viewport {
position: relative;
width: 100%;
overflow: clip;
/* the row fades out at both edges rather than stopping hard */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}
.trained__track {
display: flex;
align-items: center;
gap: 68px;
height: 46px;
--marquee-gap: 68px;
--marquee-time: 42s;
}
.trained__logo {
display: flex;
align-items: center;
flex-shrink: 0;
height: 46px;
color: #7C756F;
}
.trained__logo svg { flex-shrink: 0; max-width: none; }
.trained__logo--type {
font-family: var(--font-display);
font-size: 17px;
font-weight: var(--font-weight-medium);
letter-spacing: 0.01em;
white-space: nowrap;
}
@media (max-width: 900px) {
.trained { margin-top: 32px; padding-top: 26px; gap: 16px; }
.trained__track { gap: 44px; --marquee-gap: 44px; --marquee-time: 26s; height: 40px; }
.trained__logo { height: 40px; }
.trained__logo svg { height: auto; max-height: 26px; width: auto; }
.trained__logo--type { font-size: 15px; }
.trained__viewport {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
}
}
/* ---- D1: the About page was reading airy; tighten its vertical rhythm -- */
@media (min-width: 901px) {
.awhy { padding-top: 104px; padding-bottom: 104px; }
.ateam { padding-top: 92px; padding-bottom: 100px; }
.ateam__grid { margin-top: 44px; }
}
.awhy__lead {
margin-top: 16px;
font-family: var(--font-body);
font-size: 18px;
line-height: 27px;
color: var(--color-body);
}
@media (max-width: 900px) { .awhy__lead { font-size: 16px; line-height: 25px; } }
/* D5: Arshdeep's credential line is one line where the others wrap to two,
which started her bio 20px above the rest of the row. Reserve two lines so
every bio in the row begins on the same baseline. */
.pcard__role { min-height: 40px; }
@media (max-width: 900px) { .pcard__role { min-height: 0; } }
/* ---- Crisis notice ----------------------------------------------------
Required on a site that screens with the PHQ-9 (item 9 asks about
self-harm) and markets a treatment indicated for suicidal ideation.
Quiet but findable: it sits above the legal row in every footer. */
.crisis {
width: 100%;
max-width: var(--container-content);
margin: 0 auto;
padding: 16px 18px;
border: 1px solid var(--color-hairline);
border-radius: 12px;
background: #FFFFFF;
}
.crisis p {
font-family: var(--font-body);
font-size: 13.5px;
line-height: 21px;
color: var(--color-body);
}
.crisis b { font-weight: var(--font-weight-semibold); color: var(--color-ink); }
.crisis a {
color: var(--color-accent-700);
font-weight: var(--font-weight-medium);
text-decoration: underline;
text-underline-offset: 2px;
}
@media (max-width: 900px) { .crisis { padding: 14px 16px; } .crisis p { font-size: 13px; line-height: 20px; } }
/* the PHQ-9 entry point carries the same notice inline */
.funnel__crisis {
margin-top: 10px;
font-family: var(--font-body);
font-size: 12.5px;
line-height: 19px;
color: var(--color-muted);
}
.funnel__crisis a { color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 2px; }
/* ---- Footer spacing pass ---------------------------------------------
The crisis notice sits between the link columns and the legal row, so it
needs air on both sides; before this it butted straight onto the brand
column with all 64px of the gap falling below it. */
.crisis { margin-top: 56px; }
@media (max-width: 900px) {
.crisis { margin-top: 36px; }
.footer__legal { margin-top: 32px; }
/* the three link columns read as one long list stacked full width;
two up keeps the footer scannable without shrinking the tap targets */
.footer__top { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 20px; }
.footer__brand { grid-column: 1 / -1; }
.footer__col { width: auto; }
.footer__col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
/* phones stack: at 375 a second column forces "Medication management" and
the condition names to wrap, which reads worse than the taller list */
.footer__top { grid-template-columns: 1fr; gap: 30px; }
.footer__col:last-child { grid-column: auto; }
}
/* ---- Outcomes on phones: swipe, not pinned scroll ---------------------
Same interaction as the treatment cards above it. The pinned driver stays
on desktop; here the browser handles the scrolling natively, which removes
the per-frame transform that made it feel laggy and stopped the section
from holding the viewport for four screens. */
@media (max-width: 900px) {
.outcomes__driver { height: auto !important; }
.outcomes__sticky { position: static; gap: 20px; }
.outcomes__viewport {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
width: calc(100% + var(--spacing-gutter) * 2);
max-width: none;
margin-inline: calc(var(--spacing-gutter) * -1);
padding-inline: var(--spacing-gutter);
border-radius: 0;
}
.outcomes__viewport::-webkit-scrollbar { display: none; }
.outcomes__track { transform: none !important; width: max-content; gap: 12px; }
.ocard {
flex: 0 0 84vw;
width: 84vw !important;
max-width: 330px;
height: 500px;
scroll-snap-align: center;
border-radius: 20px;
}
}
/* ---- Comparison table on phones --------------------------------------
Four treatment columns cannot fit at 375px: the table was 840px wide in a
335px window, so it clipped mid-word with no affordance that it scrolled,
and the oversized child is what let the page pinch out. Below the
breakpoint the same markup restacks into one card per attribute, with each
value labelled by its treatment, so nothing scrolls sideways at all. */
@media (max-width: 900px) {
.compare__scroll { overflow-x: visible; }
.ctable { min-width: 0; width: 100%; display: block; }
.ctable thead { display: none; }
.ctable tbody, .ctable tbody tr, .ctable tbody th, .ctable tbody td { display: block; width: auto; }
.ctable tbody tr {
padding: 18px;
margin-bottom: 12px;
border: 1px solid var(--color-dark-line);
border-radius: 16px;
background: #FFFFFF08;
}
.ctable tbody tr:last-child { margin-bottom: 0; }
.ctable tbody th {
width: auto;
padding: 0 0 12px;
font-size: 12px;
letter-spacing: 0.14em;
color: var(--color-on-dark-quiet);
}
.ctable tbody td {
width: auto;
min-width: 0;
padding: 10px 0 0;
border-top: 1px solid var(--color-dark-line);
font-size: 15px;
line-height: 22px;
}
.ctable tbody td:first-of-type { border-top: 0; padding-top: 0; }
/* the column header travels with each value now */
.ctable tbody td::before {
content: attr(data-label);
display: block;
margin-bottom: 3px;
font-family: var(--font-body);
font-size: 12.5px;
font-weight: var(--font-weight-medium);
line-height: 17px;
color: var(--color-green-400);
}
}
/* ---- Comparison as a swipe deck on phones -----------------------------
One card per treatment, swiped like the treatment cards above. Built by
script.js from the table; when JS runs, the table is hidden on phones and
this replaces it. Without JS the table remains, restacked by the block
above, so the content is never lost. */
.cswipe { display: none; }
@media (max-width: 900px) {
.js-cswipe .compare__scroll { display: none; }
.js-cswipe .cswipe {
display: flex;
gap: 12px;
margin-top: 32px;
width: calc(100% + var(--spacing-gutter) * 2);
margin-inline: calc(var(--spacing-gutter) * -1);
padding-inline: var(--spacing-gutter);
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.js-cswipe .cswipe::-webkit-scrollbar { display: none; }
.cswipe__card {
flex: 0 0 84%;
max-width: 320px;
scroll-snap-align: center;
padding: 22px 20px 24px;
border: 1px solid var(--color-dark-line);
border-radius: 18px;
background: #FFFFFF08;
}
.cswipe__name {
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--color-dark-line);
font-family: var(--font-display);
font-size: 20px;
font-weight: var(--font-weight-medium);
letter-spacing: var(--tracking-tight);
line-height: 26px;
color: var(--color-on-dark);
}
.cswipe__label {
font-family: var(--font-body);
font-size: 11.5px;
font-weight: var(--font-weight-medium);
letter-spacing: 0.14em;
line-height: 15px;
text-transform: uppercase;
color: var(--color-green-400);
}
.cswipe__value {
margin: 5px 0 16px;
font-family: var(--font-body);
font-size: 15px;
line-height: 22px;
color: var(--color-on-dark-body);
}
.cswipe__value:last-child { margin-bottom: 0; }
}
/* =========================================================================
Treatments page — nothing may force the layout wider than the viewport
Symptom this fixes: on iOS Safari the page rendered permanently zoomed
out. The cause is a feedback loop, not a single rule. `.matchrow`,
`.tblock` and `.tblock__stats` all pair a hard pixel width with
`flex-shrink: 0`, so their rows demand ~1000-1150px no matter how narrow
the screen is. Once the layout is forced past 900px the `max-width: 900px`
mobile block stops matching, the phone layout switches off, and the page
stays wide, which keeps the query off. Safari then scales the whole
document down to fit, which is the persistent zoomed-out state.
The fix is to let every one of those boxes shrink. The pixel widths stay,
so the desktop composition is unchanged when the room exists, but they are
now ceilings rather than floors and the loop can never start.
========================================================================= */
.matchrow__q,
.matchrow__a,
.tblock__copy,
.tblock__media,
.tblock__stats,
.tfaq__head,
.tfaq__list {
flex-shrink: 1;
min-width: 0;
max-width: 100%;
}
/* the three stats sit on one rail at desktop and wrap when the room goes,
rather than insisting on 190 + 200 + 210 = 600px forever */
.tblock__stats { flex-wrap: wrap; row-gap: 16px; }
.tblock__stats > div,
.tblock__stats > div:nth-child(1),
.tblock__stats > div:nth-child(2),
.tblock__stats > div:nth-child(3) {
flex: 1 1 170px;
min-width: 0;
width: auto;
}
/* long unbroken strings (URLs, emails) must not push a column open either */
.tblock__lead, .tblock__title, .matchrow__a, .tfaq__item p { overflow-wrap: break-word; }
/* Hard guarantee: these three sections can never contribute to the document
width, whatever the media query state. Verified safe to clip because the
only two `position: sticky` elements on the site are `.outcomes__sticky`
(home) and `.tfaq__head`, neither of which lives in here — clipping an
ancestor of a sticky element would re-parent its scrollport and break it,
which is why `.tfaq` is deliberately left alone.
This is the belt to the fluid-sizing braces above: even if a future change
reintroduces a rigid child, it gets trimmed instead of forcing iOS Safari
to scale the whole document down. */
.tblocks,
.matcher,
.compare { overflow-x: clip; }
/* the fixed chrome gets the same treatment: when the mobile block is off the
desktop nav list is wider than a phone, and a fixed box that overflows can
still be measured into the document width */
.nav,
.drawer { overflow-x: clip; }
/* ---- Treatment block stats on phones ---------------------------------
Rebuilt on Grid rather than flex. In a flex column, `flex: 1 1 170px`
applies its basis to the *vertical* axis, and any stray row direction
pushes the second and third stat off the side — which is how two of the
three ended up clipped off-screen on iOS. `grid-template-columns: 1fr`
cannot flip axis or overflow, so all three always stack and stay visible.
The CTA also moves above the closing rule and tucks under the stats. */
@media (max-width: 900px) {
.tblock__stats {
display: grid !important;
grid-template-columns: 1fr;
gap: 14px;
width: 100%;
max-width: 100%;
border-bottom: 0;
padding-block: 18px 6px;
}
.tblock__stats > div,
.tblock__stats > div:nth-child(1),
.tblock__stats > div:nth-child(2),
.tblock__stats > div:nth-child(3) {
width: auto !important;
min-width: 0;
display: block;
}
.tblock__stats dt { font-size: 19px; line-height: 25px; }
.tblock__stats dd { margin-top: 2px; }
/* button sits above the closing line, close under the stats */
.tblock__cta { margin-top: 16px; }
.tblock__copy {
padding-bottom: 26px;
border-bottom: 1px solid var(--color-border);
}
.tblock:last-child .tblock__copy { border-bottom: 0; padding-bottom: 0; }
}
/* The status pill had a hard 40px height, so when the copy grew from "A nurse"
to "A concierge" the second line spilled outside the rounded box. min-height
keeps the designed size for one line and lets it grow if copy changes again. */
.tcard__pill { height: auto; min-height: 40px; }
/* ============================================================ Insurance checker */
/* .btn and .icheck__nav set their own display, which outranks the UA's
[hidden] rule — without this, "hidden" controls still render. */
.icheck [hidden] { display: none !important; }
.icheck {
display: flex;
align-items: flex-start;
gap: 80px;
padding: 104px var(--spacing-gutter) 120px;
background: var(--color-surface);
}
.icheck__intro { flex: 1 1 0; min-width: 0; position: sticky; top: 96px; }
.icheck__title {
margin-top: 14px;
font-family: var(--font-display);
font-size: 38px;
line-height: 46px;
letter-spacing: -0.01em;
color: var(--color-ink);
max-width: 480px;
}
.icheck__lead {
margin-top: 16px;
font-size: var(--text-lead);
line-height: var(--leading-lead);
color: var(--color-body);
max-width: 460px;
}
.icheck__carriers { margin-top: 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.icheck__carriers li {
padding: 7px 14px;
border-radius: var(--radius-pill);
background: var(--color-white);
box-shadow: var(--color-hairline) 0 0 0 1px inset;
font-size: 13px;
line-height: 16px;
font-weight: var(--font-weight-medium);
color: var(--color-muted);
}
.icheck__card {
flex: 0 0 520px;
max-width: 100%;
padding: 30px 30px 32px;
border-radius: 18px;
background: var(--color-white);
box-shadow: #00000005 0 1px 2px, #0000000A 0 6px 24px -8px, var(--color-hairline) 0 0 0 1px inset;
}
.icheck__progress { display: flex; gap: 6px; }
.icheck__progress i { height: 3px; flex: 1 1 0; border-radius: 2px; background: var(--color-raised); transition: background .25s ease; }
.icheck__progress i.is-done { background: var(--color-accent-600); }
.icheck__stepcount { margin-top: 14px; font-size: 13px; line-height: 16px; color: var(--color-quiet); }
.icheck__step { margin: 0; padding: 0; border: 0; }
.icheck__q {
padding: 0;
margin: 6px 0 18px;
font-family: var(--font-display);
font-size: 24px;
line-height: 30px;
letter-spacing: -0.005em;
color: var(--color-ink);
}
.icheck__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.icheck__opt { position: relative; display: inline-flex; cursor: pointer; }
.icheck__opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.icheck__opt span {
padding: 11px 16px;
border-radius: var(--radius-sm);
background: var(--color-ground);
box-shadow: var(--color-hairline) 0 0 0 1px inset;
font-size: 14px;
line-height: 18px;
font-weight: var(--font-weight-medium);
color: var(--color-body);
transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.icheck__opt:hover span { background: var(--color-raised); }
.icheck__opt input:checked + span {
background: var(--color-accent-50);
color: var(--color-accent-800);
box-shadow: var(--color-accent-600) 0 0 0 1.5px inset;
}
.icheck__opt input:focus-visible + span { outline: 2px solid var(--color-accent-600); outline-offset: 2px; }
.icheck__note {
margin-top: 14px;
padding: 12px 14px;
border-radius: var(--radius-sm);
background: var(--color-accent-50);
font-size: 13.5px;
line-height: 19px;
color: var(--color-accent-800);
}
.icheck__field { margin-top: 16px; }
.icheck__field:first-of-type { margin-top: 0; }
.icheck__field label,
.icheck__grouplabel {
display: block;
margin-bottom: 7px;
font-size: 13px;
line-height: 16px;
font-weight: var(--font-weight-medium);
color: var(--color-muted);
}
.icheck__optional { font-weight: var(--font-weight-regular, 400); color: var(--color-disabled); }
.icheck__field input,
.icheck__field select {
width: 100%;
padding: 12px 14px;
border: 0;
border-radius: var(--radius-sm);
background: var(--color-ground);
box-shadow: var(--color-hairline) 0 0 0 1px inset;
font-family: var(--font-body);
font-size: 16px;
line-height: 20px;
color: var(--color-ink);
transition: box-shadow .15s ease, background .15s ease;
appearance: none;
}
.icheck__field select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2368625E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 38px;
}
.icheck__field input::placeholder { color: var(--color-disabled); }
.icheck__field input:focus-visible,
.icheck__field select:focus-visible {
outline: none;
background: var(--color-white);
box-shadow: var(--color-accent-600) 0 0 0 1.5px inset;
}
.icheck__field.is-invalid input,
.icheck__field.is-invalid select { box-shadow: #B4231F 0 0 0 1.5px inset; }
.icheck__consent { display: flex; gap: 10px; margin-top: 18px; cursor: pointer; }
.icheck__consent--optional { margin-top: 12px; }
.icheck__consent input { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--color-accent-700); }
.icheck__consent span { font-size: 12.5px; line-height: 18px; color: var(--color-quiet); }
.icheck__consent a { color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 2px; }
.icheck__consent.is-invalid span { color: #B4231F; }
.icheck__error {
margin-top: 16px;
padding: 11px 14px;
border-radius: var(--radius-sm);
background: #FBEDEC;
font-size: 13.5px;
line-height: 19px;
color: #8C1D1A;
}
.icheck__error a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.icheck__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }
.icheck__nav .icheck__next { margin-left: auto; }
.icheck__back {
padding: 12px 18px;
background: transparent;
box-shadow: var(--color-hairline) 0 0 0 1px inset;
color: var(--color-body);
font-weight: var(--font-weight-medium);
cursor: pointer;
border: 0;
}
.icheck__back:hover { background: var(--color-ground); }
.icheck__next { cursor: pointer; border: 0; }
.icheck__next[disabled] { opacity: .6; cursor: default; }
.icheck__success { text-align: left; }
.icheck__successtitle {
margin-top: 10px;
font-family: var(--font-display);
font-size: 26px;
line-height: 32px;
letter-spacing: -0.005em;
color: var(--color-ink);
}
.icheck__successcopy { margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--color-body); }
.icheck__successcopy a { color: var(--color-accent-700); font-weight: var(--font-weight-medium); text-decoration: underline; text-underline-offset: 2px; }
.icheck__successfine { margin-top: 14px; font-size: 12.5px; line-height: 18px; color: var(--color-quiet); }
.icheck__successfine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.icheck__backlink {
display: inline-block;
margin-top: 18px;
font-size: 14px;
line-height: 18px;
font-weight: var(--font-weight-medium);
color: var(--color-accent-700);
text-decoration: underline;
text-underline-offset: 2px;
}
@media (max-width: 1279px) {
.icheck { gap: 48px; }
.icheck__card { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 900px) {
.icheck { flex-direction: column; gap: 34px; padding-top: 64px; padding-bottom: 72px; }
.icheck__intro { position: static; }
.icheck__title { font-size: 28px; line-height: 34px; }
.icheck__card { flex: 0 0 auto; width: 100%; padding: 22px 18px 24px; }
}
/* ============================================================ Content photography
Converted from CSS backgrounds to real ![]()
elements so the photos are
indexable and responsive. Containers keep their geometry; the img fills. */
.photo-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; border-radius: inherit; }
.photo-img--fill { position: absolute; inset: 0; }
.ocard { position: relative; }
.ocard__title, .ocard__quote { position: relative; }
.space__hero { position: relative; }
/* ============================================================ Breadcrumbs */
.crumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
font-size: 13px;
line-height: 16px;
font-weight: var(--font-weight-medium);
color: var(--color-on-dark-quiet);
}
.crumbs a { color: inherit; }
.crumbs a:hover { color: var(--color-on-dark); text-decoration: underline; text-underline-offset: 2px; }
.crumbs__sep { opacity: .55; }
.crumbs [aria-current="page"] { color: var(--color-on-dark-body); }