/* ==========================================================================
Stillwater Psychiatric, shared stylesheet
Template demonstration by DBJ Technologies. Not an operating practice.
Phase 0: design tokens, base, accessibility, layout primitives, chrome.
Component CSS is appended per build phase.
========================================================================== */
/* --- Design tokens (carried verbatim from the source build) --------------- */
:root {
--bg: #FAFAFA;
--bg-cream: #F5EFE7;
--bg-warm-cream: #F1E9DD;
--bg-sage: #E8EDE7;
--bg-mist: #EEF2F1;
--slate: #2C3F47;
--slate-deep: #1A2830;
--slate-rich: #243640;
--teal: #4F7C82;
--teal-deep: #3F656B;
--teal-pale: rgba(79,124,130,0.10);
--teal-soft: rgba(79,124,130,0.18);
--sage: #7C9082;
--sage-deep: #66795F;
--sage-pale: rgba(124,144,130,0.14);
--taupe: #637176;
--taupe-light: #9CA8AA;
--cream-text: #E8E1D4;
--hairline: rgba(79,124,130,0.22);
--hairline-slate: rgba(44,63,71,0.10);
--hairline-cream: rgba(232,225,212,0.20);
--shadow-soft: 0 2px 14px rgba(44,63,71,0.06);
--shadow-lift: 0 12px 36px rgba(44,63,71,0.12);
--shadow-deep: 0 28px 64px -28px rgba(44,63,71,0.28);
--fs-display: clamp(2.8rem, 5.2vw, 4.5rem);
--fs-h2: clamp(2rem, 3.4vw, 2.95rem);
--fs-h3: 1.42rem;
--fs-body: 1.06rem;
--fs-eyebrow: 0.72rem;
/* Motion system. One source of truth for the enter and hover cadence. */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--dur-fast: 200ms;
--dur: 280ms;
--dur-enter: 560ms;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--slate);
font-family: 'Outfit', system-ui, sans-serif;
font-feature-settings: 'kern', 'liga';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-size: var(--fs-body);
line-height: 1.85;
font-weight: 400;
font-feature-settings: 'kern', 'liga', 'onum';
}
h1, h2, h3, h4 {
font-family: 'Lora', 'Source Serif Pro', 'Times New Roman', serif;
font-weight: 500;
color: var(--slate);
line-height: 1.08;
margin: 0;
font-feature-settings: 'kern', 'liga';
letter-spacing: -0.005em;
}
/* Baseline heading sizes. Classed section headings override these via
specificity; this guarantees unclassed headings on the legal and answer
pages render at a deliberate scale rather than browser defaults. */
h1 { font-size: var(--fs-h2); }
h2 { font-size: 1.62rem; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.12rem; }
p { margin: 0 0 1.1rem; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; font-family: 'Lora', serif; }
img { max-width: 100%; height: auto; display: block; }
/* --- Accessibility -------------------------------------------------------- */
.skip-link {
position: absolute;
left: 0.6rem;
top: -3rem;
z-index: 200;
background: var(--teal);
color: #fff;
padding: 0.7rem 1.2rem;
font-family: 'Outfit', sans-serif;
font-size: 0.74rem;
letter-spacing: 0.18em;
text-transform: uppercase;
transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 0.6rem; }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 3px;
}
/* The motion system honors the patient's vestibular needs. Clinical, not
cosmetic: the brief commits to this and the build does too. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* --- Layout primitives ---------------------------------------------------- */
.wrap {
max-width: 1280px;
margin: 0 auto;
padding: 0 clamp(1.5rem, 6vw, 4rem);
width: 100%;
}
.section {
position: relative;
padding: clamp(5rem, 9vw, 7.5rem) clamp(1.5rem, 6vw, 4rem);
overflow: hidden;
}
.section .wrap-inner {
max-width: 1280px;
margin: 0 auto;
width: 100%;
position: relative;
}
/* Narrow reading column for long-form prose pages (the answer library).
Keeps line length to a comfortable measure rather than the full grid. */
.section .wrap-inner.wrap-inner-narrow {
max-width: 820px;
}
.section-cream { background: var(--bg-cream); }
.section-warm-cream { background: var(--bg-warm-cream); }
.section-sage { background: var(--bg-sage); }
.section-mist { background: var(--bg-mist); }
/* --- Eyebrow -------------------------------------------------------------- */
.eyebrow {
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: var(--fs-eyebrow);
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--teal);
margin: 0 0 1.4rem;
display: inline-block;
}
.eyebrow-cream { color: var(--teal-deep); }
.eyebrow-sage { color: var(--sage-deep); }
.eyebrow-on-slate { color: #C9D6D8; }
/* --- Buttons -------------------------------------------------------------- */
.btn {
display: inline-block;
background: var(--teal);
color: #fff;
border: none;
border-radius: 0;
padding: 1.05rem 2.4rem;
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
cursor: pointer;
transition: background var(--dur) var(--ease),
transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.btn:hover {
background: var(--teal-deep);
transform: translateY(-1px);
box-shadow: var(--shadow-lift);
}
.btn-ghost {
background: transparent;
border: 1px solid var(--slate);
color: var(--slate);
padding: 1.05rem 2.4rem;
letter-spacing: 0.22em;
font-size: 0.78rem;
text-transform: uppercase;
font-family: 'Outfit', sans-serif;
font-weight: 500;
}
.btn-ghost:hover { background: var(--slate); color: #fff; }
.btn-sage { background: var(--sage); }
.btn-sage:hover { background: var(--sage-deep); }
/* --- Navigation: centered split, real multi-page links -------------------- */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: #fff;
border-bottom: 1px solid var(--hairline-slate);
}
.nav-inner {
display: grid;
grid-template-columns: 1fr auto 1fr auto;
align-items: center;
/* 2.6rem, not 3rem: at the 1440 cap the wider gap put the grid's own
content 4px past the cap, which is a horizontal scrollbar on a 1440
viewport. Grid tracks do not shrink below their content, so the nav
cannot absorb an overrun the way a flex row would. */
column-gap: clamp(1.4rem, 3.4vw, 2.6rem);
padding: 1.3rem clamp(1.5rem, 6vw, 4rem);
max-width: 1440px;
margin: 0 auto;
}
.nav-links-left { justify-self: end; }
.nav-links-right { justify-self: start; }
.nav-links {
display: flex;
gap: clamp(1.1rem, 2.4vw, 2rem);
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
font-family: 'Outfit', sans-serif;
font-weight: 400;
font-size: 0.74rem;
color: var(--taupe);
letter-spacing: 0.22em;
text-transform: uppercase;
transition: color var(--dur-fast) var(--ease);
}
.nav-links a:hover { color: var(--slate); }
/* Current-page marker. Each page sets aria-current="page" on its link. */
.nav-links a[aria-current="page"] { color: var(--teal); }
.nav-links a[aria-current="page"]::after {
content: '';
display: block;
height: 1px;
background: var(--teal);
margin-top: 4px;
width: 100%;
}
.nav-brand {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.6rem;
justify-self: center;
text-decoration: none;
color: inherit;
}
.nav-brand-mark {
width: 38px;
height: 38px;
flex-shrink: 0;
display: block;
transition: transform 420ms var(--ease);
}
.nav-brand:hover .wordmark { color: var(--teal); }
.nav-brand:hover .nav-brand-mark { transform: scale(1.06); }
.nav-brand-text { display: flex; flex-direction: column; gap: 0.16rem; }
.wordmark {
font-family: 'Lora', serif;
font-weight: 500;
font-size: 1.18rem;
letter-spacing: 0.32em;
color: var(--slate);
text-transform: uppercase;
line-height: 1;
transition: color var(--dur-fast) var(--ease);
}
.nav-tagline {
font-family: 'Outfit', sans-serif;
font-style: italic;
font-weight: 300;
font-size: 0.62rem;
color: var(--taupe-light);
letter-spacing: 0.04em;
line-height: 1;
}
.nav-end {
display: flex;
align-items: center;
gap: 1rem;
justify-self: end;
}
/* A grid track that is too narrow does not report as overflow, it just wraps
its text. "Become a Patient" broke across three lines before the burger
took over. Forbidding the wrap turns a silent layout failure into a
measurable width, which is what the breakpoint below is set against. */
.nav-links a,
.nav-crisis,
.nav-cta { white-space: nowrap; }
/* The crisis affordance. Quiet by design, reachable on every page. */
.nav-crisis {
font-family: 'Outfit', sans-serif;
font-size: 0.66rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--taupe);
border-bottom: 1px solid var(--hairline-slate);
padding-bottom: 2px;
transition: color var(--dur-fast) var(--ease);
}
.nav-crisis:hover { color: var(--teal); }
.nav-cta {
padding: 0.78rem 1.4rem;
font-size: 0.66rem;
letter-spacing: 0.22em;
}
/* Mobile menu. The source build hid every link below 1024px; a real
multi-page site needs a true menu, so this is a deliberate UX upgrade. */
.nav-toggle {
display: none;
width: 40px; height: 40px;
background: transparent;
border: 1px solid var(--hairline-slate);
cursor: pointer;
padding: 0;
position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
content: '';
position: absolute;
left: 50%;
width: 18px;
height: 1.5px;
background: var(--slate);
transform: translateX(-50%);
transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle span { top: 50%; transform: translate(-50%, -50%); }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav.is-open .nav-toggle span { background: transparent; }
.nav.is-open .nav-toggle span::before { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.nav.is-open .nav-toggle span::after { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }
.nav-mobile {
display: none;
border-top: 1px solid var(--hairline-slate);
background: #fff;
padding: 1rem clamp(1.5rem, 6vw, 4rem) 1.6rem;
}
.nav.is-open .nav-mobile { display: block; }
.nav-mobile a {
display: block;
padding: 0.85rem 0;
border-bottom: 1px solid var(--hairline-slate);
font-family: 'Outfit', sans-serif;
font-size: 0.8rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--slate);
}
.nav-mobile a[aria-current="page"] { color: var(--teal); }
/* color restated because `.nav-mobile a` out-specifies `.btn`, which
left the drawer CTA dark-on-teal */
.nav-mobile .nav-mobile-cta { margin-top: 1.1rem; border-bottom: none; color: #fff; }
/* 1151, not 1023. The desktop nav needs ~1136px to lay out without wrapping
its CTA, so handing off to it at 1024 produced a nav that "fit" only because
"Become a Patient" broke across three lines. The burger now owns everything
below the width where the real nav actually works. This breakpoint is the
nav's alone; the section-layout queries elsewhere in this file stay at
1023. */
@media (max-width: 1151px) {
/* Flex, not the desktop grid: the grid kept tracks sized for hidden
children and pushed the menu toggle past the right edge on phones
(toggle at x=387 on a 375px viewport = no navigation at all). */
.nav-inner {
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 0.8rem;
padding: 1rem clamp(1rem, 4vw, 2.5rem);
}
.nav-links-left, .nav-links-right { display: none; }
.nav-crisis { display: none; }
.nav-toggle { display: block; flex-shrink: 0; }
.nav-end { gap: 0.7rem; flex-shrink: 0; }
}
@media (min-width: 1152px) {
.nav-mobile { display: none !important; }
}
/* The laptop band. At the designed type scale the desktop grid's content
(eight links, the lockup, the crisis line, the CTA) is ~1444px wide, and
grid tracks never shrink below their content. So every width from the
handoff up to the 1440 cap overflowed the viewport and dragged the whole
page into a horizontal scroll: 143px of overrun at 1280, with the crisis
line and the Become a Patient button off-screen entirely. 1280 and 1366 are
the two most common laptop widths in use, which made this the nav most
desktop visitors actually got.
These rules buy the pixels back out of the type's tracking and the gaps
rather than surrender the full nav to a burger on a real desktop. The type
scale steps down, it does not restyle: same faces, same case, same colors.
They carry all the way up with no upper bound on purpose. The original scale
needed ~1536px of content inside a box capped at 1440, so it never fit at
any viewport: it simply wrapped the CTA instead of reporting an overflow.
There is no width at which it was the intended design, so this is now the
desktop nav rather than a laptop exception to it. */
@media (min-width: 1152px) {
.nav-inner {
column-gap: clamp(0.9rem, 1.8vw, 1.6rem);
padding: 1.15rem clamp(1rem, 2.6vw, 2rem);
}
.nav-links { gap: clamp(0.8rem, 1.35vw, 1.35rem); }
.nav-links a { font-size: 0.68rem; letter-spacing: 0.13em; }
.nav-crisis { font-size: 0.6rem; letter-spacing: 0.12em; }
.nav-cta { padding: 0.68rem 1rem; letter-spacing: 0.14em; }
.nav-end { gap: 0.7rem; }
.nav-brand { gap: 0.5rem; }
.nav-brand-mark { width: 34px; height: 34px; }
.wordmark { font-size: 1.02rem; letter-spacing: 0.24em; }
}
@media (max-width: 480px) {
/* Phone budget: 375 - 32 padding = 343px for brand + CTA + toggle.
Every rule here buys the pixels that keep the toggle on screen. */
.nav-inner { padding: 0.9rem 1rem; column-gap: 0.5rem; }
.nav-cta { padding: 0.6rem 0.75rem; font-size: 0.58rem; letter-spacing: 0.12em; }
.nav-tagline { display: none; }
.wordmark { font-size: 0.95rem; letter-spacing: 0.18em; }
.nav-brand { gap: 0.5rem; }
.nav-brand-mark { width: 30px; height: 30px; }
.nav-end { gap: 0.5rem; }
.nav-toggle { width: 28px; }
}
@media (max-width: 360px) {
/* Mark-only brand on the narrowest phones; the wordmark repeats in
the hero and footer, the toggle must never leave the screen. */
.nav-brand-text { display: none; }
}
/* HERO -- compact, editorial, single-screen */
.hero {
position: relative;
background:
radial-gradient(900px 480px at 78% 24%, rgba(79,124,130,0.05), transparent 70%),
linear-gradient(180deg, #FAFAFA 0%, var(--bg-mist) 100%);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
align-items: center;
gap: clamp(1.5rem, 3.5vw, 3rem);
padding: clamp(2.5rem, 4.5vw, 4rem) 0;
overflow: hidden;
}
.hero-content {
position: relative;
z-index: 1;
max-width: 560px;
padding-left: clamp(1.5rem, 6vw, 5.5rem);
padding-right: clamp(1rem, 2.5vw, 1.5rem);
}
.hero-figure {
position: relative;
z-index: 1;
margin: 0;
padding-right: clamp(1.5rem, 5vw, 4rem);
}
.hero-figure img {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
max-height: 460px;
object-fit: cover;
object-position: center;
border-radius: 2px;
box-shadow: var(--shadow-deep);
}
@media (max-width: 1023px) {
.hero {
grid-template-columns: 1fr;
gap: 1.6rem;
padding: clamp(2rem, 5vw, 3rem) 0 clamp(2rem, 5vw, 3rem);
}
.hero-figure {
padding-left: clamp(1.5rem, 5vw, 3rem);
padding-right: clamp(1.5rem, 5vw, 3rem);
order: 2;
}
.hero-figure img { max-height: 320px; }
}
.hero-eyebrow {
color: var(--teal);
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 0.68rem;
letter-spacing: 0.32em;
text-transform: uppercase;
margin-bottom: 0.9rem;
}
.hero h1 {
font-size: clamp(1.9rem, 3.4vw, 2.9rem);
font-weight: 500;
color: var(--slate);
letter-spacing: -0.012em;
line-height: 1.12;
margin-bottom: 0.85rem;
text-align: left;
}
.hero h1 em {
font-style: italic;
color: var(--teal);
}
.hero-physician {
font-family: 'Outfit', sans-serif;
font-weight: 400;
color: var(--taupe);
font-size: 0.84rem;
letter-spacing: 0.04em;
margin-bottom: 1.1rem;
}
.hero p.lead {
font-family: 'Outfit', sans-serif;
font-weight: 400;
color: var(--taupe);
font-size: 0.96rem;
line-height: 1.65;
max-width: 480px;
margin-bottom: 1.5rem;
}
.hero-cta-row {
display: flex;
gap: 0.8rem;
flex-wrap: wrap;
align-items: center;
margin-bottom: 1.3rem;
}
.hero-phones {
display: flex;
gap: 1.4rem;
flex-wrap: wrap;
font-family: 'Outfit', sans-serif;
font-size: 0.8rem;
color: var(--taupe);
letter-spacing: 0.04em;
}
.hero-phones span strong {
display: block;
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 0.62rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 0.2rem;
}
/* FOUNDER LETTER (section 02) */
.founder-spread {
position: relative;
background: var(--bg-cream);
padding: clamp(5rem, 9vw, 7.5rem) clamp(1.5rem, 6vw, 4rem);
overflow: hidden;
}
.founder-grid {
display: grid;
grid-template-columns: 5fr 6fr;
gap: clamp(2.4rem, 5vw, 4.5rem);
align-items: stretch;
max-width: 1280px;
margin: 0 auto;
position: relative;
}
.founder-figure {
margin: 0;
border-top: 1px solid var(--hairline);
padding-top: 1.4rem;
}
/* The portrait is a background-removed cutout, so it sits on a soft
studio panel rather than floating on the section color. */
.founder-figure img {
width: 100%;
height: 100%;
min-height: 600px;
max-height: 780px;
object-fit: contain;
object-position: center bottom;
border-radius: 3px;
background: linear-gradient(168deg, var(--bg-cream) 0%, rgba(79,124,130,0.12) 100%);
}
.founder-body {
display: flex;
flex-direction: column;
justify-content: center;
}
.founder-body :is(h1, h2) {
font-size: var(--fs-h2);
margin-bottom: 0.5rem;
}
.founder-title {
font-family: 'Outfit', sans-serif;
font-style: italic;
font-weight: 400;
color: var(--taupe);
font-size: 1rem;
margin: 0 0 1.8rem;
}
.founder-body p {
color: var(--slate);
line-height: 1.95;
font-size: 1.04rem;
margin-bottom: 1.4rem;
}
.founder-body p.dropcap-para::first-letter {
font-family: 'Lora', serif;
font-weight: 500;
color: var(--teal);
font-size: 4.4em;
line-height: 0.85;
float: left;
margin: 0.08em 0.55rem 0 0;
}
.signature-block {
margin-top: 1.6rem;
padding-top: 1.4rem;
border-top: 1px solid var(--hairline);
}
.signature-name {
font-family: 'Lora', serif;
font-style: italic;
font-weight: 500;
color: var(--slate);
font-size: 1.5rem;
letter-spacing: 0;
margin: 0 0 0.4rem;
}
.signature-title {
font-family: 'Outfit', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--teal);
line-height: 1.7;
}
@media (max-width: 1023px) {
.founder-grid { grid-template-columns: 1fr; }
.founder-figure img { min-height: 460px; }
}
/* SYMPTOMS GRID (section 03) */
.symptoms-head {
max-width: 720px;
margin-bottom: 3rem;
}
.symptoms-head :is(h1, h2) {
font-size: var(--fs-h2);
margin-bottom: 1.2rem;
}
.symptoms-head p {
color: var(--taupe);
font-size: 1.06rem;
max-width: 620px;
}
.symptoms-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.4rem;
}
.symptom-card {
background: #fff;
box-shadow: var(--shadow-soft);
padding: 2rem 1.9rem 2.1rem;
border-top: 2px solid var(--teal);
display: flex;
flex-direction: column;
gap: 0.9rem;
transition: transform 280ms ease, box-shadow 280ms ease;
}
.symptom-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lift);
}
.symptom-mark {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--teal);
border-radius: 50%;
font-family: 'Lora', serif;
font-style: italic;
font-weight: 500;
font-size: 0.84rem;
color: var(--teal);
}
.symptom-card h3 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: 1.18rem;
color: var(--slate);
line-height: 1.3;
margin: 0;
}
.symptom-card p {
color: var(--taupe);
font-size: 0.98rem;
line-height: 1.7;
margin: 0;
flex: 1 1 auto;
}
@media (max-width: 1023px) {
.symptoms-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.symptoms-grid { grid-template-columns: 1fr; }
}
/* TRD (section 04, deep slate field) */
.trd {
background: var(--slate-rich);
color: var(--cream-text);
padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 6vw, 4rem);
position: relative;
overflow: hidden;
}
.trd-grid {
display: grid;
grid-template-columns: 4fr 7fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
max-width: 1280px;
margin: 0 auto;
position: relative;
}
.trd-figure {
margin: 0;
align-self: center;
}
.trd-figure img {
width: 100%;
max-width: 360px;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 0;
box-shadow: var(--shadow-deep);
}
.trd-body {
display: flex;
flex-direction: column;
}
.trd .eyebrow {
color: #B6CDD0;
}
.trd :is(h1, h2) {
color: #F4EFE6;
font-size: var(--fs-h2);
margin-bottom: 1rem;
}
.trd :is(h1, h2) em {
font-style: italic;
color: #C9D6D8;
}
.trd-sub {
font-family: 'Outfit', sans-serif;
font-style: italic;
color: #C9D6D8;
font-size: 1.05rem;
line-height: 1.7;
max-width: 580px;
margin-bottom: 2.6rem;
}
.trd-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.4rem;
margin-bottom: 2.4rem;
}
.trd-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
padding: 1.8rem 1.6rem;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.trd-card-eyebrow {
font-family: 'Outfit', sans-serif;
font-size: 0.66rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #B6CDD0;
font-weight: 500;
}
.trd-card h3 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: 1.2rem;
color: #F4EFE6;
line-height: 1.3;
margin: 0;
}
.trd-stat {
font-family: 'Lora', serif;
font-style: italic;
font-weight: 500;
color: #B6CDD0;
font-size: 1rem;
padding: 0.5rem 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.trd-card p {
color: #C9D6D8;
font-size: 0.94rem;
line-height: 1.65;
margin: 0;
}
.trd-foot {
font-family: 'Outfit', sans-serif;
font-size: 0.74rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #B6CDD0;
padding-top: 1.4rem;
border-top: 1px solid rgba(255,255,255,0.10);
}
@media (max-width: 1023px) {
.trd-grid { grid-template-columns: 1fr; }
.trd-figure { max-width: 320px; }
.trd-cards { grid-template-columns: 1fr; }
}
/* PERINATAL (section 05) */
.perinatal {
background: var(--bg-cream);
}
.perinatal-grid {
display: grid;
grid-template-columns: 6fr 5fr;
gap: clamp(2.4rem, 5vw, 4.5rem);
align-items: center;
max-width: 1280px;
margin: 0 auto;
position: relative;
}
.perinatal-copy :is(h1, h2) {
font-size: var(--fs-h2);
margin-bottom: 2rem;
}
.perinatal-copy :is(h1, h2) em {
font-style: italic;
color: var(--teal);
}
.perinatal-copy p {
color: var(--slate);
font-size: 1.04rem;
line-height: 1.95;
margin-bottom: 1.4rem;
max-width: 580px;
}
.perinatal-figure {
margin: 0;
}
.perinatal-figure img {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 0;
box-shadow: var(--shadow-deep);
}
.perinatal-cta {
margin-top: 1.6rem;
}
@media (max-width: 1023px) {
.perinatal-grid { grid-template-columns: 1fr; }
}
/* ADOLESCENTS (section 06) */
.adolescents {
background: var(--bg);
}
.adolescents-grid {
display: grid;
grid-template-columns: 6fr 5fr;
gap: clamp(2.4rem, 5vw, 4.5rem);
align-items: start;
max-width: 1280px;
margin: 0 auto;
position: relative;
}
.adolescents-copy :is(h1, h2) {
font-size: var(--fs-h2);
margin-bottom: 1rem;
}
.adolescents-copy :is(h1, h2) em {
font-style: italic;
color: var(--teal);
}
.adolescents-intro {
color: var(--taupe);
font-size: 1.04rem;
max-width: 540px;
margin-bottom: 2.4rem;
}
.adolescents-rows {
background: #fff;
box-shadow: var(--shadow-soft);
padding: 2rem 2.2rem;
border-top: 2px solid var(--teal);
}
.adolescent-row {
padding: 1.1rem 0;
border-bottom: 1px solid var(--hairline-slate);
}
.adolescent-row:last-child { border-bottom: none; }
.adolescent-row dt {
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 0.7rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 0.4rem;
}
.adolescent-row dd {
margin: 0;
color: var(--slate);
font-size: 0.99rem;
line-height: 1.7;
}
.adolescents-figure {
margin: 0;
align-self: stretch;
}
.adolescents-figure img {
width: 100%;
height: 100%;
min-height: 460px;
object-fit: cover;
border-radius: 0;
box-shadow: var(--shadow-deep);
}
.adolescents-cta {
margin-top: 1.8rem;
}
@media (max-width: 1023px) {
.adolescents-grid { grid-template-columns: 1fr; }
.adolescents-figure img { min-height: 360px; }
}
/* INSURANCE (section 07) */
.insurance {
background: var(--bg-mist);
}
.insurance-head {
max-width: 720px;
margin-bottom: 2.8rem;
}
.insurance-head :is(h1, h2) {
font-size: var(--fs-h2);
margin-bottom: 1rem;
}
.insurance-head :is(h1, h2) em {
font-style: italic;
color: var(--teal);
}
.insurance-head p {
color: var(--taupe);
font-size: 1.04rem;
}
.carrier-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 2.4rem;
}
.carrier-card {
background: #fff;
padding: 1.4rem 1.6rem;
border: 1px solid var(--hairline-slate);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
font-family: 'Lora', serif;
font-weight: 500;
font-size: 1.05rem;
color: var(--slate);
}
.carrier-tier {
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 0.6rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--teal);
}
.insurance-fineprint {
padding-top: 1.6rem;
border-top: 1px solid var(--hairline);
max-width: 720px;
}
.insurance-fineprint p {
font-family: 'Outfit', sans-serif;
font-style: italic;
color: var(--taupe);
font-size: 0.92rem;
line-height: 1.75;
margin-bottom: 0.6rem;
}
@media (max-width: 1023px) {
.carrier-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
.carrier-grid { grid-template-columns: 1fr; }
}
/* LOCATIONS (section 08) */
.locations {
background: var(--bg);
}
.locations-head {
max-width: 720px;
margin-bottom: 2.6rem;
}
.locations-head :is(h1, h2) {
font-size: var(--fs-h2);
margin-bottom: 1rem;
}
.locations-head :is(h1, h2) em {
font-style: italic;
color: var(--teal);
}
.locations-sub {
font-family: 'Lora', serif;
font-style: italic;
color: var(--slate);
font-size: 1.18rem;
line-height: 1.55;
max-width: 600px;
}
.locations-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.6rem;
}
.location-card {
background: #fff;
box-shadow: var(--shadow-soft);
padding: 2rem 2rem 2.2rem;
border-top: 2px solid var(--teal);
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.location-tag {
font-family: 'Outfit', sans-serif;
font-size: 0.66rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--teal);
font-weight: 500;
}
.location-name {
font-family: 'Lora', serif;
font-weight: 500;
font-size: 1.5rem;
color: var(--slate);
margin: 0;
}
.location-address {
font-family: 'Outfit', sans-serif;
font-size: 0.96rem;
color: var(--slate);
line-height: 1.7;
}
.location-address span {
display: block;
color: var(--taupe);
font-size: 0.86rem;
margin-top: 0.2rem;
}
.location-rows {
margin-top: 0.4rem;
padding-top: 1.1rem;
border-top: 1px solid var(--hairline-slate);
}
.location-row {
padding: 0.7rem 0;
border-bottom: 1px solid var(--hairline-slate);
}
.location-row:last-child { border-bottom: none; }
.location-row dt {
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 0.66rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 0.3rem;
}
.location-row dd {
margin: 0;
color: var(--slate);
font-size: 0.94rem;
line-height: 1.6;
}
.telehealth-band {
margin-top: 1.6rem;
background: var(--teal-pale);
border-left: 3px solid var(--teal);
padding: 1.6rem 1.8rem;
}
.telehealth-band-eyebrow {
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 0.7rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 0.6rem;
}
.telehealth-band p {
color: var(--slate);
font-size: 0.98rem;
line-height: 1.7;
margin: 0;
}
.telehealth-band p strong {
font-family: 'Lora', serif;
font-style: italic;
font-weight: 500;
color: var(--teal);
}
@media (max-width: 1023px) {
.locations-grid { grid-template-columns: 1fr; }
}
/* TEAM (section 09) */
.team {
background: var(--bg-cream);
}
.team-head {
max-width: 720px;
margin-bottom: 3rem;
}
.team-head :is(h1, h2) {
font-size: var(--fs-h2);
margin-bottom: 1rem;
}
.team-head :is(h1, h2) em {
font-style: italic;
color: var(--teal);
}
.team-sub {
color: var(--taupe);
font-size: 1.04rem;
max-width: 620px;
}
.team-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.4rem;
}
.team-card {
background: #fff;
box-shadow: var(--shadow-soft);
padding: 2rem 2.1rem 2.2rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.team-card-clinical { border-top: 2px solid var(--teal); }
.team-card-ops { border-top: 2px solid var(--sage); }
/* Circular avatar portrait */
.team-portrait {
width: 108px;
height: 108px;
margin: 0 0 0.2rem;
border-radius: 50%;
overflow: hidden;
background: var(--bg-cream);
box-shadow: 0 0 0 2px var(--teal), 0 0 0 6px rgba(79,124,130,0.12), 0 6px 16px rgba(40,72,76,0.12);
transition: transform 380ms cubic-bezier(0.22,0.61,0.36,1), box-shadow 380ms ease;
}
.team-card-ops .team-portrait {
box-shadow: 0 0 0 2px var(--sage), 0 0 0 6px rgba(132,160,128,0.14), 0 6px 16px rgba(40,72,76,0.10);
}
.team-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 22%;
display: block;
transition: transform 620ms cubic-bezier(0.22,0.61,0.36,1), filter 380ms ease;
filter: saturate(0.97);
}
.team-card:hover .team-portrait {
transform: scale(1.04);
box-shadow: 0 0 0 2px var(--teal), 0 0 0 8px rgba(79,124,130,0.18), 0 10px 24px rgba(40,72,76,0.20);
}
.team-card-ops:hover .team-portrait {
box-shadow: 0 0 0 2px var(--sage), 0 0 0 8px rgba(132,160,128,0.22), 0 10px 24px rgba(40,72,76,0.18);
}
.team-card:hover .team-portrait img {
transform: scale(1.06);
filter: saturate(1.06);
}
.team-role {
font-family: 'Outfit', sans-serif;
font-size: 0.66rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--teal);
font-weight: 500;
}
.team-card-ops .team-role { color: var(--sage-deep); }
.team-name {
font-family: 'Lora', serif;
font-weight: 500;
font-size: 1.35rem;
color: var(--slate);
margin: 0;
}
.team-creds {
font-family: 'Outfit', sans-serif;
font-style: italic;
font-weight: 400;
font-size: 0.92rem;
color: var(--taupe);
margin: 0;
}
.team-card p {
color: var(--slate);
font-size: 0.97rem;
line-height: 1.75;
margin: 0;
}
.team-final {
margin-top: 0.4rem;
padding-top: 1rem;
border-top: 1px solid var(--hairline-slate);
font-family: 'Lora', serif;
font-style: italic;
font-weight: 500;
color: var(--slate);
font-size: 0.96rem;
}
.team-card-ops .team-final {
color: var(--sage-deep);
}
@media (max-width: 1023px) {
.team-grid { grid-template-columns: 1fr; }
}
/* FIRST VISIT (section 10) */
.first-visit {
background: var(--bg);
}
.firstvisit-grid {
display: grid;
grid-template-columns: 5fr 6fr;
gap: clamp(2.4rem, 5vw, 4.5rem);
align-items: start;
}
.firstvisit-copy :is(h1, h2) {
font-size: var(--fs-h2);
margin-bottom: 1.2rem;
}
.firstvisit-copy :is(h1, h2) em {
font-style: italic;
color: var(--teal);
}
.firstvisit-intro {
color: var(--slate);
font-size: 1.06rem;
line-height: 1.85;
margin-bottom: 1.6rem;
max-width: 480px;
}
.firstvisit-figure {
margin: 1.4rem 0 0;
}
.firstvisit-figure img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 0;
box-shadow: var(--shadow-soft);
}
.firstvisit-rows {
background: #fff;
box-shadow: var(--shadow-soft);
padding: 2rem 2.2rem;
border-top: 2px solid var(--teal);
}
.firstvisit-row {
padding: 1.1rem 0;
border-bottom: 1px solid var(--hairline-slate);
}
.firstvisit-row:last-child { border-bottom: none; }
.firstvisit-row dt {
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 0.7rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 0.4rem;
}
.firstvisit-row dd {
margin: 0;
color: var(--slate);
font-size: 0.97rem;
line-height: 1.7;
}
@media (max-width: 1023px) {
.firstvisit-grid { grid-template-columns: 1fr; }
}
/* CRISIS (section 11, deep slate) */
.crisis {
background: var(--slate-deep);
color: var(--cream-text);
padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 6vw, 4rem);
position: relative;
overflow: hidden;
}
.crisis-figure-bg {
position: absolute;
inset: 0;
z-index: 0;
opacity: 0.20;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.crisis-fade {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(26,40,48,0.78) 0%, rgba(26,40,48,0.92) 60%, rgba(26,40,48,0.98) 100%);
}
.crisis-inner {
position: relative;
z-index: 2;
max-width: 1280px;
margin: 0 auto;
}
.crisis-head {
max-width: 760px;
margin-bottom: 3rem;
}
.crisis .eyebrow {
color: #C9D6D8;
}
.crisis :is(h1, h2) {
color: #F4EFE6;
font-size: var(--fs-h2);
margin-bottom: 1.2rem;
}
.crisis :is(h1, h2) em {
font-style: italic;
color: #C9D6D8;
}
.crisis-sub {
font-family: 'Lora', serif;
font-style: italic;
color: #C9D6D8;
font-size: 1.18rem;
line-height: 1.55;
max-width: 640px;
}
.crisis-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.4rem;
margin-bottom: 2.4rem;
}
.crisis-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
padding: 1.8rem 1.7rem;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.crisis-card h3 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: 1.18rem;
color: #F4EFE6;
line-height: 1.3;
margin: 0;
}
.crisis-card p {
color: #C9D6D8;
font-size: 0.95rem;
line-height: 1.7;
margin: 0;
}
.crisis-card-num {
font-family: 'Lora', serif;
font-style: italic;
font-weight: 500;
color: #B6CDD0;
font-size: 1.4rem;
letter-spacing: 0.04em;
margin-bottom: 0.2rem;
}
.crisis-foot {
font-family: 'Lora', serif;
font-style: italic;
color: #C9D6D8;
font-size: 1.05rem;
line-height: 1.65;
max-width: 740px;
padding-top: 1.6rem;
border-top: 1px solid rgba(255,255,255,0.10);
}
@media (max-width: 1023px) {
.crisis-cards { grid-template-columns: 1fr; }
}
/* FOOTER (section 12) */
footer.site-footer {
background: var(--slate-deep);
color: var(--cream-text);
font-family: 'Outfit', sans-serif;
font-feature-settings: 'kern', 'liga', 'onum';
}
.footer-grid {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr 1fr;
gap: 2.4rem;
max-width: 1280px;
margin: 0 auto;
padding: clamp(3.5rem, 6vw, 5rem) clamp(1.5rem, 6vw, 4rem) clamp(2.5rem, 4vw, 3.5rem);
}
.footer-brand {
font-family: 'Lora', serif;
font-weight: 500;
font-size: 1.1rem;
letter-spacing: 0.32em;
color: #F4EFE6;
text-transform: uppercase;
margin-bottom: 1rem;
}
.footer-tag {
font-family: 'Lora', serif;
font-style: italic;
color: #C9D6D8;
font-size: 0.96rem;
margin-bottom: 1.4rem;
}
.footer-blurb {
font-family: 'Outfit', sans-serif;
font-size: 0.88rem;
color: var(--taupe-light);
line-height: 1.75;
max-width: 320px;
margin-bottom: 1.4rem;
}
.footer-credit {
font-family: 'Outfit', sans-serif;
font-size: 0.7rem;
color: var(--teal);
letter-spacing: 0.28em;
text-transform: uppercase;
display: inline-block;
margin-top: 0.4rem;
}
.footer-credit:hover { color: #F4EFE6; }
.footer-col h4 {
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 0.7rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #C9D6D8;
margin: 0 0 1rem;
}
.footer-col p,
.footer-col li {
font-size: 0.92rem;
color: var(--taupe-light);
line-height: 1.85;
margin: 0;
}
.footer-col p strong {
color: #E8E1D4;
font-weight: 400;
font-family: 'Lora', serif;
font-style: italic;
}
.footer-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-col ul li {
padding: 0.18rem 0;
}
.licensure-block {
background: var(--slate-rich);
border-top: 1px solid rgba(255,255,255,0.08);
padding: 2rem clamp(1.5rem, 6vw, 4rem);
}
.licensure-inner {
max-width: 1280px;
margin: 0 auto;
}
.licensure-eyebrow {
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 0.66rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #C9D6D8;
margin-bottom: 0.8rem;
}
.licensure-block p {
font-family: 'Outfit', sans-serif;
font-size: 0.84rem;
color: var(--taupe-light);
line-height: 1.85;
margin: 0 0 0.6rem;
max-width: 1080px;
}
.licensure-block p strong {
color: #E8E1D4;
font-weight: 400;
}
.footer-bottom {
background: #0F1A1F;
border-top: 1px solid rgba(255,255,255,0.05);
padding: 1.4rem 1.5rem;
text-align: center;
font-size: 0.78rem;
color: var(--taupe-light);
letter-spacing: 0.04em;
}
.footer-bottom a {
color: #C9D6D8;
margin: 0 0.6rem;
}
@media (max-width: 1023px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* Section accent imagery */
.section-accent {
margin: 0;
position: relative;
}
.section-accent img {
width: 100%;
object-fit: cover;
border-radius: 0;
box-shadow: var(--shadow-soft);
}
.symptoms-with-accent {
display: grid;
grid-template-columns: 7fr 4fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: end;
margin-bottom: 3rem;
}
.symptoms-with-accent .symptoms-head { margin-bottom: 0; }
.symptoms-with-accent .section-accent img {
aspect-ratio: 4 / 3;
object-position: center;
}
@media (max-width: 1023px) {
.symptoms-with-accent { grid-template-columns: 1fr; }
}
.insurance-accent {
margin: 2rem 0 2.4rem;
max-width: 540px;
}
.insurance-accent img {
aspect-ratio: 3 / 2;
object-fit: cover;
}
.locations-accent {
margin: 0 0 2.6rem;
}
.locations-accent img {
width: 100%;
aspect-ratio: 21 / 9;
object-fit: cover;
object-position: center;
box-shadow: var(--shadow-deep);
}
.team-accent {
margin: 0 0 3rem;
max-width: 460px;
}
.team-accent img {
aspect-ratio: 3 / 2;
object-fit: cover;
}
.preface-footer {
background: var(--bg-cream);
padding: clamp(4rem, 7vw, 5.5rem) clamp(1.5rem, 6vw, 4rem);
}
.preface-footer-grid {
display: grid;
grid-template-columns: 5fr 6fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
max-width: 1280px;
margin: 0 auto;
}
.preface-footer-figure {
margin: 0;
}
.preface-footer-figure img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
box-shadow: var(--shadow-deep);
}
.preface-footer-copy h2 {
font-size: clamp(1.7rem, 2.8vw, 2.2rem);
margin-bottom: 1rem;
}
.preface-footer-copy h2 em {
font-style: italic;
color: var(--teal);
}
.preface-footer-copy p {
color: var(--slate);
font-size: 1.04rem;
line-height: 1.85;
max-width: 540px;
margin-bottom: 1.4rem;
}
.preface-footer-cta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 0.4rem;
}
@media (max-width: 1023px) {
.preface-footer-grid { grid-template-columns: 1fr; }
}
/* Section index header */
.section-index {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2.4rem;
font-family: 'Outfit', sans-serif;
font-size: 0.66rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--teal);
font-weight: 500;
}
.section-index .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--teal);
flex-shrink: 0;
}
.section-index .rule {
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--teal) 0%, transparent 100%);
max-width: 240px;
opacity: 0.4;
}
.crisis .section-index,
.trd .section-index { color: #C9D6D8; }
.crisis .section-index .dot,
.trd .section-index .dot { background: #C9D6D8; }
.crisis .section-index .rule,
.trd .section-index .rule {
background: linear-gradient(90deg, #C9D6D8 0%, transparent 100%);
}
/* ===== POLISH LAYER ===== */
html { scroll-behavior: smooth; }
::selection { background: var(--teal); color: #fff; }
/* Route enter transition */
section[data-route]:not([hidden]) {
animation: routeEnter 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes routeEnter {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* Scroll-triggered reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 760ms cubic-bezier(0.22,0.61,0.36,1), transform 760ms cubic-bezier(0.22,0.61,0.36,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 600ms cubic-bezier(0.22,0.61,0.36,1), transform 600ms cubic-bezier(0.22,0.61,0.36,1); }
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
/* JavaScript fully disabled: the reveal classes never receive
.is-visible, so reset them to their resting visible state. This
matters most on crisis.html, where the 988 and ED cards must show. */
@media (scripting: none) {
.reveal,
.reveal-stagger > * { opacity: 1; transform: none; }
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 60ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 130ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 340ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 410ms; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 550ms; }
.reveal-stagger.is-visible > *:nth-child(9) { transition-delay: 620ms; }
.reveal-stagger.is-visible > *:nth-child(10) { transition-delay: 690ms; }
.reveal-stagger.is-visible > *:nth-child(11) { transition-delay: 760ms; }
.reveal-stagger.is-visible > *:nth-child(12) { transition-delay: 830ms; }
/* Animated counter */
.counter { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
/* ----- HERO POLISH ----- */
.hero { isolation: isolate; }
.hero::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(520px 360px at var(--mx, 32%) var(--my, 38%), rgba(79,124,130,0.10), transparent 65%),
radial-gradient(640px 420px at 78% 82%, rgba(79,124,130,0.05), transparent 70%);
transition: background 240ms ease;
pointer-events: none;
}
.hero-availability {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.5rem 0.85rem 0.5rem 0.7rem;
background: rgba(255,255,255,0.7);
border: 1px solid rgba(79,124,130,0.18);
border-radius: 999px;
font-family: 'Outfit', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--slate);
margin-bottom: 1rem;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.hero-availability .dot-live {
width: 8px; height: 8px;
border-radius: 50%;
background: #2ea44f;
box-shadow: 0 0 0 0 rgba(46,164,79,0.55);
animation: livePulse 2.4s ease-out infinite;
}
@keyframes livePulse {
0% { box-shadow: 0 0 0 0 rgba(46,164,79,0.55); }
100% { box-shadow: 0 0 0 9px rgba(46,164,79,0); }
}
.hero h1 .word {
display: inline-block;
opacity: 0;
transform: translateY(0.32em);
animation: wordIn 720ms cubic-bezier(0.22,0.61,0.36,1) forwards;
}
@keyframes wordIn { to { opacity: 1; transform: translateY(0); } }
.hero-figure { overflow: hidden; }
.hero-figure::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(180px 180px at var(--fx, 50%) var(--fy, 50%), rgba(255,255,255,0.18), transparent 65%);
pointer-events: none;
opacity: 0;
transition: opacity 320ms ease;
}
.hero-figure:hover::after { opacity: 1; }
/* ----- TMS COIL SVG ----- */
.tms-stage {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem 0 0.4rem;
}
.tms-svg { width: 100%; max-width: 380px; height: auto; }
.tms-pulse-ring {
transform-box: fill-box;
transform-origin: center;
animation: tmsPulse 2.6s ease-out infinite;
opacity: 0;
}
.tms-pulse-ring.r2 { animation-delay: 0.86s; }
.tms-pulse-ring.r3 { animation-delay: 1.72s; }
@keyframes tmsPulse {
0% { transform: scale(0.5); opacity: 0.9; }
100% { transform: scale(2.0); opacity: 0; }
}
.tms-coil-glow {
transform-box: fill-box;
transform-origin: center;
animation: tmsCoilGlow 2.6s ease-in-out infinite;
}
@keyframes tmsCoilGlow {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
.tms-spark {
animation: tmsSpark 2.6s ease-in-out infinite;
}
@keyframes tmsSpark {
0%, 100% { opacity: 0.0; }
45%, 55% { opacity: 1; }
}
/* ----- OUTCOME COUNTERS ----- */
.outcome-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(1rem, 3vw, 2rem);
padding: 1.6rem clamp(1.5rem, 4vw, 2.4rem);
margin-top: 2rem;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.03);
backdrop-filter: blur(6px);
border-radius: 4px;
}
.outcome-stat { text-align: left; }
.outcome-stat .num {
display: block;
font-family: 'Lora', serif;
font-weight: 500;
font-size: clamp(2rem, 4.4vw, 3.4rem);
color: #C9D6D8;
line-height: 1;
letter-spacing: -0.012em;
}
.outcome-stat .num .suffix {
font-size: 0.55em;
color: rgba(201,214,216,0.7);
margin-left: 0.18em;
letter-spacing: 0.04em;
}
.outcome-stat .label {
display: block;
font-family: 'Outfit', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(201,214,216,0.74);
margin-top: 0.7rem;
}
.outcome-stat .footnote {
display: block;
font-family: 'Outfit', sans-serif;
font-style: italic;
font-size: 0.74rem;
color: rgba(212,223,225,0.82);
margin-top: 0.4rem;
line-height: 1.5;
}
@media (max-width: 768px) {
.outcome-strip { grid-template-columns: 1fr; gap: 1.4rem; }
}
/* ----- PHQ-9 SELF SCREEN ----- */
.phq9 {
max-width: 760px;
margin: 4rem auto 0;
padding: clamp(2rem, 4vw, 2.8rem);
background: var(--bg-cream);
border: 1px solid var(--hairline);
border-radius: 4px;
}
.phq9-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 0.6rem;
}
.phq9 h3 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: clamp(1.3rem, 2vw, 1.55rem);
color: var(--slate);
letter-spacing: -0.012em;
}
.phq9-private {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: 'Outfit', sans-serif;
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--teal);
}
.phq9-private::before {
content: '';
width: 6px; height: 6px; border-radius: 50%;
background: var(--teal);
}
.phq9-intro {
font-family: 'Outfit', sans-serif;
color: var(--taupe);
font-size: 0.94rem;
line-height: 1.7;
margin-bottom: 1.6rem;
}
.phq9-q {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.6rem 1rem;
padding: 0.9rem 0;
border-top: 1px solid var(--hairline);
align-items: center;
}
.phq9-q:first-of-type { border-top: 1px solid rgba(0,0,0,0.10); }
.phq9-q .q-text {
font-family: 'Outfit', sans-serif;
font-size: 0.92rem;
color: var(--slate);
line-height: 1.5;
}
.phq9-q .q-num {
font-family: 'Lora', serif;
font-weight: 500;
color: var(--teal);
margin-right: 0.4rem;
}
.phq9-q .q-buttons {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
}
.phq9-q .q-buttons button {
appearance: none;
border: 1px solid var(--hairline);
background: rgba(255,255,255,0.6);
color: var(--taupe);
font-family: 'Outfit', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.05em;
padding: 0.45rem 0.7rem;
border-radius: 999px;
cursor: pointer;
transition: all 200ms ease;
}
.phq9-q .q-buttons button:hover {
border-color: var(--teal);
color: var(--teal);
}
.phq9-q .q-buttons button.is-selected {
background: var(--teal);
border-color: var(--teal);
color: #fff;
}
@media (max-width: 640px) {
.phq9-q { grid-template-columns: 1fr; }
}
.phq9-result {
margin-top: 1.6rem;
padding: 1.4rem 1.4rem;
background: #fff;
border: 1px solid var(--hairline);
border-left: 3px solid var(--teal);
border-radius: 2px;
opacity: 0;
transform: translateY(8px);
transition: opacity 480ms ease, transform 480ms ease;
}
.phq9-result.is-visible { opacity: 1; transform: translateY(0); }
.phq9-result .score-line {
font-family: 'Outfit', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 0.6rem;
}
.phq9-result .score-headline {
font-family: 'Lora', serif;
font-size: 1.2rem;
font-weight: 500;
color: var(--slate);
margin-bottom: 0.5rem;
}
.phq9-result p {
font-family: 'Outfit', sans-serif;
color: var(--taupe);
font-size: 0.92rem;
line-height: 1.7;
}
/* ----- INSURANCE INSTANT CHECK ----- */
.insurance-check {
max-width: 720px;
margin: 0 auto 2.8rem;
padding: clamp(1.6rem, 3vw, 2.2rem);
background: #fff;
border: 1px solid var(--hairline);
border-radius: 4px;
box-shadow: var(--shadow-soft);
}
.insurance-check h3 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: clamp(1.15rem, 1.8vw, 1.4rem);
color: var(--slate);
margin-bottom: 0.4rem;
}
.insurance-check .sub {
font-family: 'Outfit', sans-serif;
color: var(--taupe);
font-size: 0.86rem;
line-height: 1.6;
margin-bottom: 1.2rem;
}
.insurance-check .ic-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.6rem;
align-items: stretch;
}
.insurance-check select {
appearance: none;
width: 100%;
padding: 0.85rem 2.2rem 0.85rem 1rem;
font-family: 'Outfit', sans-serif;
font-size: 0.92rem;
color: var(--slate);
background: var(--bg-cream);
border: 1px solid var(--hairline);
border-radius: 2px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 1rem center;
}
.insurance-check button {
padding: 0.85rem 1.5rem;
background: var(--teal);
color: #fff;
border: 0;
border-radius: 2px;
font-family: 'Outfit', sans-serif;
font-size: 0.74rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
transition: background 200ms ease;
}
.insurance-check button:hover { background: var(--slate); }
.ic-result {
margin-top: 1.2rem;
padding: 1rem 1.2rem;
border-radius: 2px;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 360ms ease, max-height 480ms ease, padding 360ms ease, margin-top 360ms ease;
}
.ic-result.is-visible {
opacity: 1;
max-height: 320px;
}
.ic-result.in-network {
background: #ecf4f3;
border: 1px solid rgba(79,124,130,0.28);
border-left: 3px solid #2ea44f;
}
.ic-result.out-of-network {
background: #fdf6ed;
border: 1px solid rgba(184,140,84,0.28);
border-left: 3px solid #b88c54;
}
.ic-result .ic-status {
font-family: 'Outfit', sans-serif;
font-size: 0.68rem;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 0.4rem;
}
.ic-result.in-network .ic-status { color: #2ea44f; }
.ic-result.out-of-network .ic-status { color: #b88c54; }
.ic-result .ic-headline {
font-family: 'Lora', serif;
font-size: 1.15rem;
font-weight: 500;
color: var(--slate);
margin-bottom: 0.4rem;
}
.ic-result p {
font-family: 'Outfit', sans-serif;
color: var(--taupe);
font-size: 0.88rem;
line-height: 1.6;
}
.ic-spinner {
display: inline-block;
width: 14px; height: 14px;
border: 2px solid rgba(79,124,130,0.25);
border-top-color: var(--teal);
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-right: 0.5rem;
vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ----- ADOLESCENT PARENT CHECKLIST ----- */
.adolescent-checklist {
max-width: 720px;
margin: 2.4rem 0 0;
padding: clamp(1.6rem, 3vw, 2.2rem);
background: #fff;
border: 1px solid var(--hairline);
border-radius: 4px;
box-shadow: var(--shadow-soft);
}
.adolescent-checklist h3 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: clamp(1.2rem, 1.9vw, 1.45rem);
color: var(--slate);
margin-bottom: 0.4rem;
}
.adolescent-checklist .sub {
font-family: 'Outfit', sans-serif;
color: var(--taupe);
font-size: 0.9rem;
line-height: 1.65;
margin-bottom: 1.2rem;
}
.ac-list {
list-style: none;
margin: 0; padding: 0;
display: grid;
gap: 0.55rem;
}
.ac-item {
display: flex;
align-items: flex-start;
gap: 0.7rem;
padding: 0.85rem 1rem;
background: var(--bg-cream);
border: 1px solid var(--hairline);
border-radius: 2px;
cursor: pointer;
font-family: 'Outfit', sans-serif;
font-size: 0.92rem;
line-height: 1.5;
color: var(--slate);
transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.ac-item:hover { border-color: var(--teal); transform: translateX(2px); }
.ac-item.is-checked { background: rgba(79,124,130,0.07); border-color: var(--teal); }
.ac-check {
flex-shrink: 0;
width: 20px; height: 20px;
border: 1.6px solid rgba(79,124,130,0.4);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all 220ms ease;
margin-top: 1px;
}
.ac-item.is-checked .ac-check {
background: var(--teal);
border-color: var(--teal);
}
.ac-check svg {
width: 12px; height: 12px;
stroke: #fff;
stroke-width: 2.4;
fill: none;
stroke-dasharray: 16;
stroke-dashoffset: 16;
transition: stroke-dashoffset 320ms ease;
}
.ac-item.is-checked .ac-check svg { stroke-dashoffset: 0; }
.ac-summary {
margin-top: 1.4rem;
padding: 1rem 1.2rem;
background: rgba(79,124,130,0.06);
border-left: 3px solid var(--teal);
border-radius: 2px;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 360ms ease, max-height 480ms ease, padding 360ms ease, margin-top 360ms ease;
}
.ac-summary.is-visible {
opacity: 1;
max-height: 360px;
}
.ac-summary .count {
font-family: 'Outfit', sans-serif;
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 0.4rem;
}
.ac-summary .headline {
font-family: 'Lora', serif;
font-size: 1.1rem;
font-weight: 500;
color: var(--slate);
margin-bottom: 0.4rem;
}
.ac-summary p {
font-family: 'Outfit', sans-serif;
font-size: 0.9rem;
color: var(--taupe);
line-height: 1.65;
}
/* ----- PERINATAL TRIMESTER TABS ----- */
.perinatal-tabs {
max-width: 720px;
margin: 2rem 0 0;
padding: clamp(1.6rem, 3vw, 2.2rem);
background: var(--bg-cream);
border: 1px solid var(--hairline);
border-radius: 4px;
}
.perinatal-tabs h3 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: clamp(1.15rem, 1.8vw, 1.4rem);
color: var(--slate);
margin-bottom: 0.35rem;
}
.perinatal-tabs .sub {
font-family: 'Outfit', sans-serif;
color: var(--taupe);
font-size: 0.88rem;
line-height: 1.6;
margin-bottom: 1rem;
}
.pt-tabs-row {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
margin-bottom: 1.2rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--hairline);
}
.pt-tab {
appearance: none;
background: transparent;
border: 1px solid var(--hairline);
color: var(--taupe);
font-family: 'Outfit', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 0.5rem 0.85rem;
border-radius: 999px;
cursor: pointer;
transition: all 220ms ease;
}
.pt-tab:hover { border-color: var(--teal); color: var(--teal); }
.pt-tab.is-active {
background: var(--teal);
border-color: var(--teal);
color: #fff;
}
.pt-panel {
display: none;
animation: ptPanelIn 380ms cubic-bezier(0.22,0.61,0.36,1);
}
.pt-panel.is-active { display: block; }
@keyframes ptPanelIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.pt-panel h4 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: 1.05rem;
color: var(--slate);
margin-bottom: 0.5rem;
}
.pt-panel p {
font-family: 'Outfit', sans-serif;
color: var(--taupe);
font-size: 0.9rem;
line-height: 1.7;
margin-bottom: 0.7rem;
}
.pt-panel ul {
list-style: none;
padding: 0;
margin: 0.5rem 0 0;
}
.pt-panel li {
position: relative;
padding: 0.45rem 0 0.45rem 1.4rem;
font-family: 'Outfit', sans-serif;
font-size: 0.86rem;
color: var(--slate);
line-height: 1.55;
border-bottom: 1px solid var(--hairline);
}
.pt-panel li:last-child { border-bottom: none; }
.pt-panel li::before {
content: '';
position: absolute;
left: 0; top: 1rem;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--teal);
}
/* ----- TEAM HOVER ENHANCEMENTS ----- */
.team-card {
transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
}
.team-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-deep);
}
.team-cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 1rem;
padding: 0.55rem 0.9rem;
background: transparent;
border: 1px solid var(--hairline);
border-radius: 2px;
font-family: 'Outfit', sans-serif;
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--teal);
text-decoration: none;
transition: all 220ms ease;
}
.team-cta:hover {
background: var(--teal);
border-color: var(--teal);
color: #fff;
}
.team-cta-arrow { transition: transform 200ms ease; }
.team-cta:hover .team-cta-arrow { transform: translateX(2px); }
/* ----- TRD TRAJECTORY CHART ----- */
.trd-chart {
margin-top: 2.4rem;
padding: 1.4rem clamp(1rem, 3vw, 1.8rem);
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 4px;
}
.trd-chart-head h3 {
color: #C9D6D8;
font-family: 'Lora', serif;
font-weight: 500;
font-size: clamp(1.1rem, 1.7vw, 1.35rem);
margin-bottom: 0.4rem;
}
.trd-chart-head p {
color: rgba(201,214,216,0.72);
font-family: 'Outfit', sans-serif;
font-size: 0.88rem;
line-height: 1.65;
margin-bottom: 1.1rem;
max-width: 660px;
}
.trd-chart-svg {
width: 100%;
height: auto;
max-height: 360px;
display: block;
}
.trd-chart-line {
transition: stroke-dashoffset 2200ms cubic-bezier(0.65,0,0.35,1);
}
.trd-chart-area {
opacity: 0;
transition: opacity 1400ms ease 1200ms;
}
.trd-chart.is-active .trd-chart-area { opacity: 1; }
.trd-chart-dot {
opacity: 0;
transform-box: fill-box;
transform-origin: center;
transform: scale(0);
transition: opacity 320ms ease, transform 320ms cubic-bezier(0.34,1.56,0.64,1);
}
.trd-chart.is-active .trd-chart-dot { opacity: 1; transform: scale(1); }
.trd-chart.is-active .trd-chart-dot:nth-of-type(1) { transition-delay: 380ms; }
.trd-chart.is-active .trd-chart-dot:nth-of-type(2) { transition-delay: 660ms; }
.trd-chart.is-active .trd-chart-dot:nth-of-type(3) { transition-delay: 940ms; }
.trd-chart.is-active .trd-chart-dot:nth-of-type(4) { transition-delay: 1220ms; }
.trd-chart.is-active .trd-chart-dot:nth-of-type(5) { transition-delay: 1500ms; }
.trd-chart.is-active .trd-chart-dot:nth-of-type(6) { transition-delay: 1780ms; }
.trd-chart.is-active .trd-chart-dot:nth-of-type(7) { transition-delay: 2060ms; }
.trd-chart-annotation {
opacity: 0;
transition: opacity 600ms ease 1900ms;
}
.trd-chart.is-active .trd-chart-annotation { opacity: 1; }
/* ----- LOCATIONS MAP ----- */
.locations-map {
max-width: 1100px;
margin: 0 auto 2.6rem;
padding: 1.6rem clamp(1rem, 3vw, 2rem);
background: #fff;
border: 1px solid var(--hairline);
border-radius: 4px;
box-shadow: var(--shadow-soft);
}
.locations-map-svg {
width: 100%;
height: auto;
display: block;
max-height: 360px;
}
.map-pin-ring {
transform-box: fill-box;
transform-origin: center;
animation: mapPinPulse 2.6s ease-out infinite;
opacity: 0;
}
.map-pin-ring.b { animation-delay: 1.3s; }
@keyframes mapPinPulse {
0% { transform: scale(0.55); opacity: 0.65; }
100% { transform: scale(1.7); opacity: 0; }
}
.map-route-path {
stroke-dasharray: 10 6;
animation: mapRouteFlow 18s linear infinite;
}
@keyframes mapRouteFlow {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: -800; }
}
.map-shuttle {
animation: mapShuttle 7s cubic-bezier(0.55,0,0.45,1) infinite;
}
@keyframes mapShuttle {
0% { offset-distance: 0%; }
45% { offset-distance: 100%; }
55% { offset-distance: 100%; }
100% { offset-distance: 0%; }
}
.map-legend {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.8rem;
padding-top: 1rem;
border-top: 1px solid var(--hairline);
margin-top: 1rem;
}
.map-legend > span {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: 'Outfit', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--taupe);
}
.map-legend .swatch {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--teal);
}
.map-legend .swatch.dashed {
background: transparent;
border: 1px dashed var(--teal);
}
/* ----- LEAD FORM ----- */
.lead-form {
margin: 1rem 0 1.1rem;
max-width: 520px;
position: relative;
}
.lf-fields {
display: grid;
grid-template-columns: 1.15fr 1.05fr 1fr;
gap: 0.55rem;
margin-bottom: 0.7rem;
}
@media (max-width: 720px) {
.lf-fields { grid-template-columns: 1fr; }
}
.lf-field {
display: flex;
flex-direction: column;
gap: 0.22rem;
}
.lf-field > span {
font-family: 'Outfit', sans-serif;
font-size: 0.58rem;
font-weight: 500;
color: var(--teal);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.lf-field input, .lf-field select, .lf-field textarea {
appearance: none;
width: 100%;
padding: 0.62rem 0.75rem;
font-family: 'Outfit', sans-serif;
font-size: 0.86rem;
color: var(--slate);
background: rgba(255,255,255,0.78);
border: 1px solid var(--hairline);
border-radius: 2px;
transition: border-color 200ms ease, background 200ms ease;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.lf-field textarea {
min-height: 4.6rem;
line-height: 1.55;
resize: vertical;
}
.lf-field select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.7rem center;
padding-right: 1.8rem;
}
.lf-field input::placeholder, .lf-field textarea::placeholder { color: rgba(40,72,76,0.4); }
.lf-field input:focus, .lf-field select:focus, .lf-field textarea:focus {
outline: none;
border-color: var(--teal);
background: #fff;
}
.lf-submit {
appearance: none;
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.78rem 1.3rem;
background: var(--teal);
color: #fff;
border: 0;
border-radius: 2px;
font-family: 'Outfit', sans-serif;
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
cursor: pointer;
transition: background 200ms ease, padding 200ms ease;
}
.lf-submit:hover { background: var(--slate); padding-right: 1.5rem; }
.lf-arrow { transition: transform 200ms ease; }
.lf-submit:hover .lf-arrow { transform: translateX(3px); }
.lead-form.lf-submitting .lf-submit { opacity: 0.65; pointer-events: none; }
.lf-secondary {
font-family: 'Outfit', sans-serif;
font-size: 0.78rem;
color: var(--taupe);
margin-top: 0.7rem;
letter-spacing: 0.02em;
}
.lf-secondary a { color: var(--teal); border-bottom: 1px dotted rgba(79,124,130,0.4); padding-bottom: 1px; }
.lf-secondary a:hover { color: var(--slate); border-bottom-color: var(--slate); }
.lf-success {
display: none;
padding: 1.1rem 1.2rem;
background: rgba(46,164,79,0.08);
border: 1px solid rgba(46,164,79,0.22);
border-left: 3px solid #2ea44f;
border-radius: 2px;
font-family: 'Outfit', sans-serif;
font-size: 0.92rem;
color: var(--slate);
line-height: 1.6;
animation: lfSuccessIn 540ms cubic-bezier(0.22,0.61,0.36,1);
}
@keyframes lfSuccessIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.lead-form.is-submitted .lf-fields,
.lead-form.is-submitted .lf-submit { display: none; }
.lead-form.is-submitted .lf-success { display: block; }
/* First-visit form variant, larger and warmer */
.lead-form-firstvisit {
max-width: 720px;
margin: 3rem auto 0;
padding: clamp(1.6rem, 3vw, 2.4rem);
background: var(--bg-cream);
border: 1px solid var(--hairline);
border-radius: 4px;
}
.lead-form-firstvisit h3 {
font-family: 'Lora', serif;
font-weight: 500;
font-size: clamp(1.3rem, 2vw, 1.55rem);
color: var(--slate);
margin-bottom: 0.5rem;
}
.lead-form-firstvisit .sub {
font-family: 'Outfit', sans-serif;
color: var(--taupe);
font-size: 0.92rem;
line-height: 1.65;
margin-bottom: 1.4rem;
}
.lead-form-firstvisit .lf-fields {
grid-template-columns: 1fr 1fr;
}
.lead-form-firstvisit .lf-fields-wide {
grid-column: 1 / -1;
}
@media (max-width: 720px) {
.lead-form-firstvisit .lf-fields { grid-template-columns: 1fr; }
}
/* ----- 988 CRISIS PULSE ----- */
.crisis-988 {
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding: 0.95rem 1.4rem;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.16);
border-radius: 4px;
font-family: 'Outfit', sans-serif;
color: var(--cream-text);
letter-spacing: 0.04em;
margin: 1.4rem 0 0.6rem;
position: relative;
}
.crisis-988::before {
content: '';
position: absolute;
inset: 0;
border-radius: 4px;
border: 1px solid rgba(201,214,216,0.32);
animation: crisisPulse 3.2s ease-out infinite;
opacity: 0;
pointer-events: none;
}
@keyframes crisisPulse {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.05); opacity: 0; }
}
.crisis-988 .lifeline-num {
font-family: 'Lora', serif;
font-size: 1.6rem;
font-weight: 500;
letter-spacing: 0.04em;
}
.crisis-988 .lifeline-label {
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(201,214,216,0.7);
}
/* ----- FIRST VISIT TIMELINE PROGRESS ----- */
.firstvisit-rows { position: relative; padding-left: 28px; }
.firstvisit-rows::before {
content: '';
position: absolute;
left: 6px; top: 22px; bottom: 22px;
width: 2px;
background: rgba(79,124,130,0.18);
border-radius: 2px;
}
.firstvisit-rows::after {
content: '';
position: absolute;
left: 6px; top: 22px;
width: 2px;
height: var(--fv-progress, 0%);
background: var(--teal);
border-radius: 2px;
transition: height 1400ms cubic-bezier(0.22,0.61,0.36,1);
}
.firstvisit-row { position: relative; }
.firstvisit-row::before {
content: '';
position: absolute;
left: -28px; top: 22px;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--bg-cream);
border: 2px solid rgba(79,124,130,0.32);
transition: border-color 320ms ease, background 320ms ease, transform 320ms ease;
}
.firstvisit-row.is-visible::before {
border-color: var(--teal);
background: var(--teal);
transform: scale(1.05);
}
/* ----- REDUCED MOTION ----- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.hero h1 .word { opacity: 1; transform: none; }
.reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}
/* ----- STICKY RESERVE FAB ----- */
.fab-reserve {
position: fixed;
bottom: 22px;
right: 22px;
z-index: 50;
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.85rem 1.3rem;
background: var(--teal);
color: #fff;
border-radius: 999px;
font-family: 'Outfit', sans-serif;
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 10px 28px rgba(40,72,76,0.22);
transition: opacity 320ms cubic-bezier(0.22,0.61,0.36,1), transform 320ms cubic-bezier(0.22,0.61,0.36,1), background 220ms ease, box-shadow 220ms ease;
opacity: 0;
transform: translateY(20px);
pointer-events: none;
}
.fab-reserve.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.fab-reserve:hover {
background: var(--slate);
box-shadow: 0 16px 36px rgba(40,72,76,0.32);
}
.fab-reserve .fab-arrow { transition: transform 200ms ease; }
.fab-reserve:hover .fab-arrow { transform: translateX(3px); }
@media (max-width: 540px) {
.fab-reserve {
bottom: 14px;
right: 14px;
padding: 0.72rem 1.05rem;
font-size: 0.6rem;
}
}
/* ----- FOCUS RINGS (accessibility) ----- */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 3px;
border-radius: 2px;
}
/* ----- PRINT ----- */
@media print {
.nav, .hero-availability, .phq9, .insurance-check, .lead-form, .crisis-988, .tms-stage, .outcome-strip, .locations-map, .perinatal-tabs, .adolescent-checklist { display: none !important; }
[data-route] { display: block !important; page-break-after: always; }
[data-route][hidden] { display: block !important; }
body { background: #fff; color: #111; }
.hero { padding: 1rem 0; }
.hero-figure img { max-height: 220px; }
a { color: inherit; text-decoration: none; }
}
/* ----- Q&A RELATED LINKS ----- */
.answer-disclaimer {
font-size: 0.84rem;
color: var(--taupe);
margin-top: -0.3rem;
margin-bottom: 1.7rem;
}
.answer-related {
margin-top: 3rem;
padding-top: 1.8rem;
border-top: 1px solid var(--hairline);
}
.answer-related h2 {
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 1rem;
}
.answer-related ul { list-style: none; padding: 0; margin: 0 0 1.6rem; }
.answer-related li {
padding: 0.7rem 0;
border-bottom: 1px solid var(--hairline-slate);
font-family: 'Lora', serif;
font-size: 1.05rem;
}
.answer-related li a { color: var(--slate); transition: color var(--dur-fast) var(--ease); }
.answer-related li a:hover { color: var(--teal); }
.answer-related > p { margin: 0; }