/* GENERATED by build.mjs from 56 files. Edit the sources, not this file. */
/* ---- css/fonts.css ---- */
/* Self-hosted Google Fonts (Bricolage Grotesque, Instrument Sans, Instrument Serif; OFL).
Generated from the Google Fonts css2 API so the fonts load from this domain with no
render-blocking third-party stylesheet. latin + latin-ext subsets only. */
/* latin-ext */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/bricolage-grotesque-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/bricolage-grotesque-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/bricolage-grotesque-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/bricolage-grotesque-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/bricolage-grotesque-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/bricolage-grotesque-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/bricolage-grotesque-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/bricolage-grotesque-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/bricolage-grotesque-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/bricolage-grotesque-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Instrument Sans';
font-style: italic;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/instrument-sans-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Instrument Sans';
font-style: italic;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/instrument-sans-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/instrument-sans-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/instrument-sans-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/instrument-sans-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/instrument-sans-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/instrument-sans-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/instrument-sans-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/instrument-sans-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/instrument-sans-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Instrument Serif';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Instrument Serif';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/instrument-serif-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Instrument Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/instrument-serif-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Instrument Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/instrument-serif-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---- css/tokens.css ---- */
/* ============================================================
PT Template 3 — "Modern Momentum" Design Tokens
ONE-VARIABLE REBRAND: swap --accent-h/s/l to re-skin the site.
============================================================ */
:root {
/* --- Accent system (client-configurable) ---
Amplify Physical Therapy and Wellness. Sampled from the clinic logo: the
dominant blue in the figure mark is #019EFF = hsl(203 100% 50%). Full
saturation is kept (the logo's blue reads as fully saturated); lightness
is nudged down to 47%, the closest point to the logo that still clears
3:1 white-on-accent contrast (WCAG AA for bold/large button text and UI
components) — 48% drops to 3.12:1, too thin a margin to be safe across
every accent-filled button in the site.
The logo's secondary green (#8CC420) stays in the logo only; this template
is a single-accent system by design. */
--accent-h: 203;
--accent-s: 100%;
--accent-l: 47%;
--accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
--accent-strong: hsl(var(--accent-h) var(--accent-s) 27%);
--accent-soft: hsl(var(--accent-h) 60% 92%);
--accent-glow: hsl(var(--accent-h) 80% 45% / 0.35);
--accent-on: #ffffff;
/* --- Neutrals --- */
--ink: #0e1b21;
--ink-2: #14252d;
--ink-3: #1b323c;
--bone: #f6f3ec;
--bone-2: #efeae0;
--white: #ffffff;
--line-ink: hsl(200 20% 90%);
--line-bone: hsl(40 15% 84%);
/* --- Text on dark / light --- */
--text-on-ink: #f2f5f4;
--text-on-ink-dim: hsl(190 15% 72%);
--text-on-bone: #17262d;
--text-on-bone-dim: hsl(200 12% 38%);
/* --- Highlight (stars, tiny sparks ONLY) --- */
--ember: #f2a33c;
/* --- Typography --- */
--font-display: "Bricolage Grotesque", sans-serif;
--font-body: "Instrument Sans", sans-serif;
--font-quote: "Instrument Serif", serif;
/* Fluid type scale */
--fs-hero: clamp(2.75rem, 1.2rem + 6.5vw, 6rem);
--fs-h2: clamp(2rem, 1rem + 3.6vw, 3.6rem);
--fs-h3: clamp(1.35rem, 1.05rem + 1.2vw, 2rem);
--fs-h4: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
--fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
--fs-small: 0.875rem;
--fs-ghost: clamp(8rem, 20vw, 22rem); /* giant ghost numerals */
/* --- Space & shape --- */
--sp-section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
--sp-gap: clamp(1.25rem, 1rem + 1vw, 2rem);
--radius-card: 20px;
--radius-lg: 32px;
--radius-pill: 999px;
/* --- Elevation --- */
--shadow-soft: 0 6px 24px hsl(200 30% 10% / 0.08), 0 2px 8px hsl(200 30% 10% / 0.05);
--shadow-lift: 0 18px 50px hsl(200 35% 10% / 0.16), 0 6px 16px hsl(200 35% 10% / 0.08);
--shadow-glow: 0 0 60px var(--accent-glow);
/* --- Motion --- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-reveal: 700ms;
/* --- Layout --- */
--container: 1200px;
--nav-h: 76px;
}
/* ---- css/base.css ---- */
/* ============================================================
PT Template 3 — Base: reset, typography, shared components.
Section-specific styles belong in css/sections/*.css, scoped
under their section root class. Do NOT add section styles here.
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
html.reduced-motion { scroll-behavior: auto; }
/* Anchored sections must clear the fixed nav when jumped to */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.6;
color: var(--text-on-bone);
background: var(--bone);
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
img, svg, video, iframe { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
a { color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }
h1, h2, h3, h4 {
font-family: var(--font-display);
line-height: 1.05;
letter-spacing: -0.02em;
text-wrap: balance;
font-weight: 700;
}
h1 { font-size: var(--fs-hero); font-weight: 800; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* --- Layout --- */
.container {
width: min(var(--container), 100% - 2.5rem);
margin-inline: auto;
}
/* --- Section rhythm helpers --- */
.section-pad { padding-block: var(--sp-section); }
.on-ink { color: var(--text-on-ink); background: var(--ink); }
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink h4 { color: var(--white); }
/* --- Eyebrow + section heading pattern --- */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
/* accent-strong, not accent: accent at 47% lightness is 2.92:1 on bone, short of the
4.5:1 AA text minimum. accent-strong clears 7.8:1+ against bone/white. */
color: var(--accent-strong);
}
.eyebrow::before {
content: "";
width: 2rem;
height: 2px;
background: var(--accent-strong);
border-radius: 2px;
}
.on-ink .eyebrow { color: hsl(var(--accent-h) 70% 62%); }
.on-ink .eyebrow::before { background: hsl(var(--accent-h) 70% 62%); }
.section-head { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head p { margin-top: 1rem; color: var(--text-on-bone-dim); max-width: 52ch; }
.on-ink .section-head p { color: var(--text-on-ink-dim); }
/* --- Buttons --- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 0.95rem 1.9rem;
border-radius: var(--radius-pill);
border: 2px solid transparent;
font-family: var(--font-display);
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.01em;
text-decoration: none;
cursor: pointer;
transition: transform 300ms var(--ease-spring), box-shadow 300ms var(--ease-out),
background-color 200ms var(--ease-out), color 200ms var(--ease-out),
border-color 200ms var(--ease-out);
will-change: transform;
}
/* accent-strong, not accent: white-on-accent at 16px/600 weight is ~4.0:1, short of the
4.5:1 AA text minimum (it only clears the 3:1 large-text/UI-component threshold).
accent-strong clears 8:1+ against white. */
.btn--solid { background: var(--accent-strong); color: var(--accent-on); box-shadow: 0 8px 24px var(--accent-glow); }
/* Hover keeps accent-strong (not accent): accent at 47% lightness is 3.24:1 white-on-accent,
short of the 4.5:1 AA text minimum. The lift comes from the shadow, not a lighter fill. */
.btn--solid:hover { background: var(--accent-strong); box-shadow: 0 12px 32px var(--accent-glow); }
.btn--ghost { border-color: currentColor; background: transparent; color: inherit; }
.btn--ghost:hover { background: hsl(0 0% 100% / 0.08); }
.btn .btn__arrow { transition: transform 300ms var(--ease-spring); }
.btn:hover .btn__arrow { transform: translateX(4px); }
/* --- Reveal-on-scroll (driven by js/core.js) ---
Gated under html.js (set by a synchronous inline script in , before paint) so
content defaults to fully visible when JavaScript never runs. Without this gate,
[data-reveal] elements would stay at opacity:0 forever with JS disabled, since only
core.js's IntersectionObserver ever adds .is-visible.
:where() keeps the gate at zero specificity, so these rules weigh the same as a bare
[data-reveal] and section CSS can still override them (the journey crossfade, the
waiting-section VS badge, the booking chip). */
:where(html.js) [data-reveal] {
opacity: 0;
transform: translateY(28px);
transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
transition-delay: var(--reveal-delay, 0ms);
}
:where(html.js) [data-reveal].is-visible { opacity: 1; transform: none; }
/* Hero content is above the fold and is the page's Largest Contentful Paint (the H1 on
interior pages). Hiding it until core.js runs delayed it ~2.8 s on mobile, so heroes
render immediately instead of fading in. Later sections keep the reveal. */
:where(html.js) :is(.sec-00-inthero, .sec-02-hero, .sec-50-wwt-hero, .sec-55-cond-hero, .sec-60-svc-hero, .sec-65-serv-hero) [data-reveal] {
opacity: 1;
transform: none;
transition: none;
}
html.reduced-motion [data-reveal] { opacity: 1; transform: none; transition: none; }
/* Pure-CSS backstop: lands content visible instantly even if core.js is slow to run,
errors, or JS is disabled entirely, mirroring the html.reduced-motion behavior above. */
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1; transform: none; transition: none; }
}
/* --- Marquee (duplicate .marquee__track content twice) --- */
.marquee { overflow: hidden; display: flex; }
.marquee__track {
display: flex;
align-items: center;
gap: 3rem;
flex-shrink: 0;
min-width: 100%;
padding-right: 3rem;
animation: marquee-scroll var(--marquee-dur, 36s) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
html.reduced-motion .marquee__track { animation: none; }
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(calc(-100% - 3rem)); }
}
/* --- Grain texture for dark sections --- */
.grain { position: relative; }
.grain::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain > * { position: relative; z-index: 1; }
/* --- Ghost numeral --- */
.ghost-num {
font-family: var(--font-display);
font-size: var(--fs-ghost);
font-weight: 800;
line-height: 0.8;
color: transparent;
-webkit-text-stroke: 1.5px hsl(0 0% 100% / 0.14);
user-select: none;
pointer-events: none;
}
/* --- Pulse-line brand motif (canonical EKG path lives in the addendum spec) --- */
.pulse-line { display: block; width: 100%; height: 44px; }
.pulse-line path {
stroke: var(--accent);
stroke-width: 2;
vector-effect: non-scaling-stroke;
stroke-linecap: round;
stroke-linejoin: round;
}
.pulse-line--draw path { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-reveal].is-visible .pulse-line--draw path,
.pulse-line--draw[data-reveal].is-visible path {
stroke-dashoffset: 0;
transition: stroke-dashoffset 1400ms var(--ease-out) 200ms;
}
html.reduced-motion .pulse-line--draw path { stroke-dashoffset: 0; transition: none; }
/* No-JS: .is-visible never gets added, so land the stroke drawn instead of permanently hidden. */
html:not(.js) .pulse-line--draw path { stroke-dashoffset: 0; }
/* --- Auto chapter numbers (data-chapter stamped by core.js) --- */
.section-head { position: relative; }
.section-head[data-chapter]::before {
content: attr(data-chapter);
position: absolute;
top: -0.55em;
left: -0.06em;
z-index: -1;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(4.5rem, 3rem + 6vw, 7.5rem);
line-height: 1;
color: currentColor;
opacity: 0.06;
pointer-events: none;
user-select: none;
}
/* --- Chapter spine (injected by core.js, desktop only) --- */
.chapter-spine {
position: fixed;
left: 1.4rem;
top: 50%;
transform: translateY(-50%);
z-index: 90;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
font-family: var(--font-display);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
color: #fff;
mix-blend-mode: difference; /* legible on both bone and ink sections */
pointer-events: none;
}
.chapter-spine__rail {
width: 2px;
height: 72px;
background: hsl(0 0% 100% / 0.25);
border-radius: 2px;
overflow: hidden;
}
.chapter-spine__fill {
display: block;
width: 100%;
height: 100%;
background: #fff;
transform: scaleY(0);
transform-origin: top;
transition: transform 500ms var(--ease-out);
}
.chapter-spine__total { opacity: 0.55; }
/* --- Cursor-reactive glow (injected by core.js on section.on-ink) --- */
.cursor-glow {
position: absolute;
top: -220px;
left: -220px;
width: 440px;
height: 440px;
z-index: 0;
border-radius: 50%;
background: radial-gradient(circle, var(--accent-glow), transparent 62%);
opacity: 0;
pointer-events: none;
transition: transform 700ms var(--ease-out), opacity 500ms var(--ease-out);
will-change: transform, opacity;
}
/* --- Reduced-motion backstop: catches any animation/transition not already covered by a
section's own prefers-reduced-motion rule or the JS-driven html.reduced-motion class. --- */
@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;
}
}
/* --- Skip link: first focusable element in the DOM, hidden until focused --- */
.skip-link {
position: absolute;
top: -4rem;
left: 1rem;
z-index: 1000;
padding: 0.85rem 1.4rem;
background: var(--accent-strong);
color: var(--accent-on);
border-radius: var(--radius-pill);
font-family: var(--font-display);
font-weight: 600;
text-decoration: none;
transition: top 200ms var(--ease-out);
}
.skip-link:focus-visible {
top: 1rem;
outline: 3px solid var(--white);
outline-offset: 3px;
}
/* --- Screen-reader only --- */
.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;
}
/* ---- css/sections/00-interior-hero.css ---- */
/* ============================================================
00-interior-hero — shared compact page hero for ALL interior
pages (About, What We Treat, Services, condition/service pages).
Page fragments use these classes with their own content; do not
duplicate these styles per page.
============================================================ */
.sec-00-inthero {
position: relative;
/* ::before below is a glow at right:-10%. Without clipping it widens the layout
viewport on mobile (a 390px device rendered a 429px viewport, i.e. the whole page
zoomed out with a dead gutter) on every interior page. overflow-x:clip contains it
without creating a scroll container and without clipping the wave on the Y axis. */
overflow-x: clip;
display: flex;
align-items: center;
min-height: clamp(380px, 52vh, 560px);
padding-top: calc(var(--nav-h) + clamp(2.5rem, 5vw, 4rem));
padding-bottom: clamp(4rem, 9vw, 7rem); /* clears the wave */
}
/* Soft accent glow, echoes the home hero without the photo weight */
.sec-00-inthero::before {
content: "";
position: absolute;
top: -20%;
right: -10%;
width: 55%;
height: 120%;
background: radial-gradient(circle at 65% 40%, var(--accent-glow), transparent 60%);
filter: blur(70px);
opacity: 0.55;
pointer-events: none;
}
.sec-00-inthero__crumbs {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.25rem;
font-size: 0.82rem;
color: var(--text-on-ink-dim);
}
.sec-00-inthero__crumbs a {
color: inherit;
text-decoration: none;
transition: color 200ms var(--ease-out);
}
.sec-00-inthero__crumbs a:hover { color: var(--text-on-ink); }
.sec-00-inthero__crumbs [aria-current] { color: hsl(var(--accent-h) 70% 62%); }
.sec-00-inthero h1 {
font-size: clamp(2.4rem, 1.4rem + 4.5vw, 4.5rem);
max-width: 18ch;
}
.sec-00-inthero__sub {
margin-top: 1.25rem;
max-width: 52ch;
color: var(--text-on-ink-dim);
font-size: var(--fs-body);
}
.sec-00-inthero__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.9rem;
margin-top: 2rem;
}
/* Small symptom/context chips usable in the meta row */
.sec-00-inthero__chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.9rem;
border-radius: var(--radius-pill);
border: 1px solid hsl(0 0% 100% / 0.22);
color: var(--text-on-ink-dim);
font-size: 0.82rem;
font-family: var(--font-display);
font-weight: 600;
}
.sec-00-inthero__wave {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: clamp(36px, 5.5vw, 80px);
pointer-events: none;
}
/* ---- css/sections/01-nav.css ---- */
/* ============================================================
Section 01 — Nav
Fixed ink-glass bar, condenses on scroll, scroll-progress line,
full-screen overlay menu on mobile. All selectors scoped under
.sec-01-nav (plus a required body-scroll-lock state class the
nav JS toggles while the mobile overlay is open).
============================================================ */
.sec-01-nav {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
z-index: 200;
font-family: var(--font-body);
}
/* --- Bar --- */
.sec-01-nav .sec-01-nav__bar {
position: relative;
/* Must paint above the mobile overlay (z-index 199) so the toggle stays clickable while the menu is open */
z-index: 210;
background: hsl(200 35% 6% / 0.62);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-bottom: 1px solid hsl(0 0% 100% / 0.08);
transition: background-color 400ms var(--ease-out), border-color 400ms var(--ease-out);
}
html.is-scrolled .sec-01-nav .sec-01-nav__bar {
background: hsl(200 40% 5% / 0.86);
border-bottom-color: hsl(0 0% 100% / 0.12);
box-shadow: var(--shadow-soft);
}
.sec-01-nav .sec-01-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(1rem, 3vw, 2.5rem);
height: var(--nav-h);
transition: height 400ms var(--ease-out);
}
html.is-scrolled .sec-01-nav .sec-01-nav__inner {
height: calc(var(--nav-h) - 18px);
}
/* --- Logo --- */
.sec-01-nav .sec-01-nav__logo {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.35rem);
letter-spacing: -0.01em;
color: var(--text-on-ink);
text-decoration: none;
white-space: nowrap;
}
.sec-01-nav .sec-01-nav__logo-dot {
width: 0.4em;
height: 0.4em;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
}
/* --- Center links --- */
.sec-01-nav .sec-01-nav__links {
display: flex;
align-items: center;
gap: clamp(1.25rem, 2vw, 2.25rem);
}
.sec-01-nav .sec-01-nav__link {
position: relative;
color: var(--text-on-ink-dim);
font-weight: 500;
font-size: 0.95rem;
text-decoration: none;
padding-block: 0.4rem;
white-space: nowrap;
transition: color 200ms var(--ease-out);
}
.sec-01-nav .sec-01-nav__link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: var(--accent);
border-radius: 2px;
transform: scaleX(0);
transform-origin: left;
transition: transform 320ms var(--ease-out);
}
.sec-01-nav .sec-01-nav__link:hover,
.sec-01-nav .sec-01-nav__link:focus-visible {
color: var(--text-on-ink);
}
.sec-01-nav .sec-01-nav__link:hover::after,
.sec-01-nav .sec-01-nav__link:focus-visible::after {
transform: scaleX(1);
}
/* --- Multi-location slot (kept dark-safe if ever enabled) --- */
.sec-01-nav .sec-01-nav__locations { position: relative; }
.sec-01-nav .sec-01-nav__locations-toggle {
background: none;
border: none;
color: var(--text-on-ink-dim);
font: inherit;
font-size: 0.95rem;
cursor: pointer;
}
.sec-01-nav .sec-01-nav__locations-menu {
position: absolute;
top: 100%;
left: 0;
margin-top: 0.75rem;
min-width: 180px;
background: var(--ink-2);
border-radius: var(--radius-card);
padding: 0.5rem;
box-shadow: var(--shadow-lift);
}
/* --- Right actions --- */
.sec-01-nav .sec-01-nav__actions {
display: flex;
align-items: center;
gap: clamp(0.75rem, 2vw, 1.5rem);
}
.sec-01-nav .sec-01-nav__phone {
color: var(--text-on-ink-dim);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
white-space: nowrap;
transition: color 200ms var(--ease-out);
}
.sec-01-nav .sec-01-nav__phone:hover { color: var(--text-on-ink); }
.sec-01-nav .sec-01-nav__cta {
padding-block: 0.7rem;
font-size: 0.9rem;
white-space: nowrap;
}
/* --- Scroll progress: clean straight bar driven by --scroll-progress --- */
.sec-01-nav .sec-01-nav__progress {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
overflow: hidden;
}
.sec-01-nav .sec-01-nav__progress-bar {
display: block;
width: 100%;
height: 100%;
background: var(--accent);
transform: scaleX(var(--scroll-progress, 0));
transform-origin: left;
}
/* --- Hamburger toggle (mobile) --- */
.sec-01-nav .sec-01-nav__toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 42px;
height: 42px;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.sec-01-nav .sec-01-nav__toggle-line {
display: block;
width: 24px;
height: 2px;
margin-inline: auto;
background: var(--text-on-ink);
border-radius: 2px;
transition: transform 320ms var(--ease-spring), opacity 200ms var(--ease-out);
}
.sec-01-nav .sec-01-nav__toggle[aria-expanded="true"] .sec-01-nav__toggle-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.sec-01-nav .sec-01-nav__toggle[aria-expanded="true"] .sec-01-nav__toggle-line:nth-child(2) {
opacity: 0;
}
.sec-01-nav .sec-01-nav__toggle[aria-expanded="true"] .sec-01-nav__toggle-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* --- Full-screen ink overlay menu --- */
.sec-01-nav .sec-01-nav__overlay {
position: fixed;
inset: 0;
z-index: 199;
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(2.5rem, 8vh, 4rem);
padding: calc(var(--nav-h) + 1.75rem) clamp(2rem, 8vw, 4rem) clamp(2rem, 8vw, 4rem);
background: var(--ink);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 380ms var(--ease-out), visibility 380ms;
}
.sec-01-nav .sec-01-nav__overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.sec-01-nav .sec-01-nav__overlay-links {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.sec-01-nav .sec-01-nav__overlay-link {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.25rem, 1.5rem + 5vw, 3.75rem);
letter-spacing: -0.02em;
color: var(--text-on-ink);
text-decoration: none;
opacity: 0;
transform: translateY(18px);
transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
transition-delay: 0ms;
}
.sec-01-nav .sec-01-nav__overlay.is-open .sec-01-nav__overlay-link {
opacity: 1;
transform: none;
transition-delay: calc(var(--i, 0) * 70ms + 80ms);
}
.sec-01-nav .sec-01-nav__overlay-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.5rem;
opacity: 0;
transition: opacity 420ms var(--ease-out);
transition-delay: 380ms;
}
.sec-01-nav .sec-01-nav__overlay.is-open .sec-01-nav__overlay-footer {
opacity: 1;
}
.sec-01-nav .sec-01-nav__overlay-phone {
color: var(--text-on-ink-dim);
font-weight: 600;
font-size: 1.1rem;
text-decoration: none;
}
/* Body scroll lock while the mobile overlay is open (state class set by js/sections/01-nav.js) */
body.sec-01-nav-lock {
overflow: hidden;
}
/* --- Reduced motion: no slide/stagger, just fade --- */
html.reduced-motion .sec-01-nav .sec-01-nav__overlay-link,
html.reduced-motion .sec-01-nav .sec-01-nav__toggle-line,
html.reduced-motion .sec-01-nav .sec-01-nav__overlay {
transition-duration: 1ms;
transform: none;
}
html.reduced-motion .sec-01-nav .sec-01-nav__overlay.is-open .sec-01-nav__overlay-link {
transition-delay: 0ms;
}
/* --- Breakpoint: mobile nav --- */
@media (max-width: 1200px) {
.sec-01-nav .sec-01-nav__links,
.sec-01-nav .sec-01-nav__phone,
.sec-01-nav .sec-01-nav__cta {
display: none;
}
.sec-01-nav .sec-01-nav__toggle {
display: flex;
}
}
@media (max-width: 480px) {
.sec-01-nav .sec-01-nav__overlay-footer {
flex-direction: column;
align-items: flex-start;
}
}
/* --- Desktop dropdowns (Services / What We Treat) --- */
.sec-01-nav .sec-01-nav__item { position: relative; display: flex; align-items: center; }
.sec-01-nav .sec-01-nav__link--parent {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.sec-01-nav .sec-01-nav__caret {
transition: transform 250ms var(--ease-out);
opacity: 0.7;
}
.sec-01-nav .sec-01-nav__item:hover .sec-01-nav__caret,
.sec-01-nav .sec-01-nav__item:focus-within .sec-01-nav__caret {
transform: rotate(180deg);
opacity: 1;
}
.sec-01-nav .sec-01-nav__dropdown {
position: absolute;
top: 100%;
left: -0.75rem;
margin-top: 0.9rem;
min-width: 230px;
padding: 0.5rem;
background: var(--ink-2);
border: 1px solid hsl(0 0% 100% / 0.1);
border-radius: var(--radius-card);
box-shadow: var(--shadow-lift);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 220ms;
z-index: 5;
}
/* Invisible hover bridge across the gap between link and panel */
.sec-01-nav .sec-01-nav__dropdown::before {
content: "";
position: absolute;
top: -0.95rem;
left: 0;
right: 0;
height: 1rem;
}
.sec-01-nav .sec-01-nav__item:hover .sec-01-nav__dropdown,
.sec-01-nav .sec-01-nav__item:focus-within .sec-01-nav__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sec-01-nav .sec-01-nav__dropdown-link {
display: block;
padding: 0.55rem 0.85rem;
border-radius: 10px;
color: var(--text-on-ink-dim);
font-size: 0.92rem;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.sec-01-nav .sec-01-nav__dropdown-link:hover,
.sec-01-nav .sec-01-nav__dropdown-link:focus-visible {
background: hsl(0 0% 100% / 0.07);
color: var(--text-on-ink);
}
.sec-01-nav .sec-01-nav__dropdown-link--all {
margin-top: 0.3rem;
border-top: 1px solid hsl(0 0% 100% / 0.1);
border-radius: 0 0 10px 10px;
color: hsl(var(--accent-h) 70% 62%);
font-family: var(--font-display);
font-weight: 600;
}
html.reduced-motion .sec-01-nav .sec-01-nav__dropdown,
html.reduced-motion .sec-01-nav .sec-01-nav__caret { transition: none; }
/* --- Mobile overlay groups (expandable sublists) --- */
.sec-01-nav .sec-01-nav__overlay { overflow-y: auto; justify-content: flex-start; }
.sec-01-nav .sec-01-nav__overlay-links { margin-block: auto; }
.sec-01-nav .sec-01-nav__overlay-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.sec-01-nav .sec-01-nav__overlay-expand {
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: hsl(0 0% 100% / 0.06);
border: 1px solid hsl(0 0% 100% / 0.15);
border-radius: 50%;
color: var(--text-on-ink);
cursor: pointer;
opacity: 0;
transform: translateY(18px);
transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out),
background-color 200ms var(--ease-out);
}
.sec-01-nav .sec-01-nav__overlay.is-open .sec-01-nav__overlay-expand {
opacity: 1;
transform: none;
transition-delay: calc(var(--i, 0) * 70ms + 80ms), calc(var(--i, 0) * 70ms + 80ms), 0ms;
}
.sec-01-nav .sec-01-nav__overlay-expand svg {
transition: transform 250ms var(--ease-out);
}
.sec-01-nav .sec-01-nav__overlay-group.is-expanded .sec-01-nav__overlay-expand svg {
transform: rotate(180deg);
}
.sec-01-nav .sec-01-nav__overlay-sub {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 320ms var(--ease-out);
}
.sec-01-nav .sec-01-nav__overlay-group.is-expanded .sec-01-nav__overlay-sub {
grid-template-rows: 1fr;
}
.sec-01-nav .sec-01-nav__overlay-sub-inner {
overflow: hidden;
display: flex;
flex-direction: column;
}
.sec-01-nav .sec-01-nav__overlay-sub-inner a {
padding: 0.55rem 0 0.55rem 1.25rem;
color: var(--text-on-ink-dim);
font-size: 1.05rem;
font-weight: 500;
text-decoration: none;
border-left: 2px solid hsl(0 0% 100% / 0.12);
transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.sec-01-nav .sec-01-nav__overlay-sub-inner a:hover,
.sec-01-nav .sec-01-nav__overlay-sub-inner a:focus-visible {
color: var(--text-on-ink);
border-left-color: var(--accent);
}
html.reduced-motion .sec-01-nav .sec-01-nav__overlay-sub,
html.reduced-motion .sec-01-nav .sec-01-nav__overlay-expand { transition: none; }
/* --- Image logo (optional) ---
The default logo is a text wordmark. To use a client's real logo, swap the wordmark in
sections/01-nav.html for:
![[CLINIC_NAME_PLACEHOLDER]](assets/images/logo.webp)
Height-driven so it tracks the bar's scrolled shrink. Supply a white/knockout logo:
the bar is dark in every state. */
.sec-01-nav .sec-01-nav__logo-img {
height: clamp(30px, 2.4vw, 38px);
width: auto;
display: block;
transition: height 400ms var(--ease-out);
}
html.is-scrolled .sec-01-nav .sec-01-nav__logo-img {
height: clamp(26px, 2vw, 32px);
}
/* --- Long dropdowns ---
A client with many condition/service pages produces a tall single-column dropdown that
can run off a laptop screen. Add sec-01-nav__dropdown--cols2 to the panel for two
columns; the max-height is a backstop for anything longer still.
NOTE: if you add TOP-LEVEL nav items, or the clinic name is long, re-check the desktop
row just above the hamburger breakpoint and raise it if the CTA clips. The breakpoint is
1200px because the row (logo + 4 links + phone + CTA) needs about 1200px once the logo is
a full clinic name; it used to be 900px, which left the CTA overflowing the container
from 901px up to ~1200px on every load. The shrink guards below keep a longer-than-usual
name from breaking the row outright, but an image logo is the better answer. */
.sec-01-nav .sec-01-nav__inner { flex-wrap: nowrap; }
.sec-01-nav .sec-01-nav__logo {
min-width: 0;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sec-01-nav .sec-01-nav__actions { flex-shrink: 0; }
.sec-01-nav .sec-01-nav__dropdown {
max-height: calc(100vh - var(--nav-h) - 3rem);
overflow-y: auto;
overscroll-behavior: contain;
}
.sec-01-nav .sec-01-nav__dropdown--cols2 {
display: grid;
grid-template-columns: repeat(2, minmax(200px, 1fr));
gap: 0 1rem;
min-width: 470px;
}
.sec-01-nav .sec-01-nav__dropdown--cols2 .sec-01-nav__dropdown-link--all {
grid-column: 1 / -1;
}
/* ---- css/sections/02-hero.css ---- */
/* ============================================================
02-hero — scoped under .sec-02-hero
============================================================ */
.sec-02-hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
padding-top: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3.5rem));
padding-bottom: clamp(4rem, 10vw, 7rem);
overflow: clip;
}
/* --- Layered background --- */
.sec-02-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
isolation: isolate; /* contain mix-blend-mode to this layer only */
}
.sec-02-hero__photo {
position: absolute;
inset: -10% -5% -20% -5%;
will-change: transform;
animation: sec-02-hero-kenburns 28s ease-in-out infinite alternate;
}
.sec-02-hero__photo img {
width: 100%;
height: 100%;
object-fit: cover;
/* Duotone grade: strip color from the source photo, then let the tint
layer below inject the accent hue via mix-blend-mode. */
filter: grayscale(1) brightness(0.7) contrast(1.05);
}
@keyframes sec-02-hero-kenburns {
from { transform: scale(1) translate3d(0, 0, 0); }
to { transform: scale(1.06) translate3d(-1.5%, -1%, 0); }
}
html.reduced-motion .sec-02-hero__photo { animation: none; transform: none; }
/* Accent duotone tint — blends with the grayscale photo beneath it */
.sec-02-hero__tint {
position: absolute;
inset: 0;
background: linear-gradient(
160deg,
hsl(var(--accent-h) 60% 18% / 0.85),
hsl(var(--accent-h) 30% 8% / 0.92)
);
mix-blend-mode: color;
}
.sec-02-hero__scrim {
position: absolute;
inset: 0;
background:
linear-gradient(100deg, hsl(190 40% 5% / 0.94) 0%, hsl(190 35% 6% / 0.72) 32%, hsl(190 30% 6% / 0.32) 58%, hsl(190 30% 6% / 0.18) 100%),
linear-gradient(0deg, hsl(190 40% 4% / 0.9) 0%, hsl(190 35% 5% / 0.35) 32%, transparent 62%);
}
.sec-02-hero__glow {
position: absolute;
top: 10%;
left: 55%;
width: min(60vw, 900px);
height: min(60vw, 900px);
border-radius: 50%;
background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
filter: blur(10px);
opacity: 0.7;
animation: sec-02-hero-drift 16s var(--ease-out) infinite alternate;
}
@keyframes sec-02-hero-drift {
from { transform: translate(-3%, -2%) scale(1); }
to { transform: translate(4%, 5%) scale(1.12); }
}
html.reduced-motion .sec-02-hero__glow { animation: none; }
/* --- Content row (left copy column + right figure column) --- */
.sec-02-hero__inner {
position: relative;
z-index: 1;
}
@media (min-width: 1024px) {
.sec-02-hero__inner {
display: grid;
grid-template-columns: minmax(0, 58%) minmax(0, 42%);
align-items: center;
column-gap: clamp(2rem, 4vw, 4rem);
}
}
.sec-02-hero__content {
min-width: 0;
}
.sec-02-hero__eyebrow {
margin-bottom: 1.4rem;
}
.sec-02-hero__headline {
margin: 0 0 1.4rem;
max-width: 18ch;
}
.sec-02-hero__line {
display: block;
}
.sec-02-hero__line--rotator {
color: var(--accent-soft);
}
/* Rotating word: sizer establishes intrinsic width from the widest option */
.sec-02-hero__rotator {
position: relative;
display: inline-block;
vertical-align: top;
overflow: hidden;
color: hsl(var(--accent-h) 75% 68%);
}
.sec-02-hero__rotator-sizer {
visibility: hidden;
display: grid;
}
.sec-02-hero__rotator-sizer span {
grid-area: 1 / 1;
}
.sec-02-hero__rotator-word {
position: absolute;
inset: 0;
display: flex;
align-items: flex-start;
opacity: 1;
transform: translateY(0);
will-change: transform, opacity;
}
.sec-02-hero__rotator-word.is-leaving {
transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
opacity: 0;
transform: translateY(0.35em);
}
.sec-02-hero__rotator-word.is-entering {
transition: opacity 650ms cubic-bezier(0.22, 1, 0.36, 1), transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
opacity: 1;
transform: translateY(0);
}
html.reduced-motion .sec-02-hero__rotator-word {
transition: none;
}
.sec-02-hero__line--static {
color: var(--white);
}
.sec-02-hero__word-wrap {
display: inline-block;
overflow: hidden;
vertical-align: top;
margin-right: 0.28em;
}
.sec-02-hero__word {
display: inline-block;
transform: translateY(100%);
transition: transform 700ms var(--ease-out);
}
html.is-loaded .sec-02-hero__word-wrap:nth-of-type(1) .sec-02-hero__word { transition-delay: 260ms; }
html.is-loaded .sec-02-hero__word-wrap:nth-of-type(2) .sec-02-hero__word { transition-delay: 340ms; }
html.is-loaded .sec-02-hero__word { transform: translateY(0); }
html.reduced-motion .sec-02-hero__word { transform: none; transition: none; }
.sec-02-hero__subhead {
max-width: 46ch;
font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
color: var(--text-on-ink-dim);
margin-bottom: clamp(1.8rem, 3vw, 2.4rem);
}
.sec-02-hero__cta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: clamp(2.2rem, 4vw, 3rem);
}
/* --- Google rating chip --- */
.sec-02-hero__rating {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.65rem;
background: var(--white);
color: var(--text-on-bone);
border-radius: var(--radius-pill);
padding: 0.7rem 1.25rem 0.7rem 0.75rem;
box-shadow: var(--shadow-lift);
animation: sec-02-hero-float 6s ease-in-out infinite;
will-change: transform;
}
@keyframes sec-02-hero-float {
0%, 100% { transform: translateY(-4px); }
50% { transform: translateY(4px); }
}
html.reduced-motion .sec-02-hero__rating { animation: none; }
.sec-02-hero__rating-badge {
display: inline-flex;
width: 30px;
height: 30px;
align-items: center;
justify-content: center;
background: var(--bone);
border-radius: 50%;
flex-shrink: 0;
}
.sec-02-hero__rating-text {
font-size: 0.9rem;
font-weight: 500;
white-space: nowrap;
}
.sec-02-hero__rating-text strong {
color: var(--text-on-bone);
font-family: var(--font-display);
font-weight: 700;
}
.sec-02-hero__rating-dot {
margin: 0 0.15rem;
color: var(--text-on-bone-dim);
}
/* --- Right visual column: duotone portrait in an arch frame --- */
.sec-02-hero__figure {
display: none; /* desktop-only composition; mobile hero is unchanged */
}
@media (min-width: 1024px) {
.sec-02-hero__figure {
/* In-flow grid child: vertically centered against the headline/copy column */
display: block;
position: relative;
align-self: center;
justify-self: center;
width: min(340px, 100%);
}
.sec-02-hero__figure-glow {
position: absolute;
inset: -22% -30%;
z-index: 0;
border-radius: 50%;
background: radial-gradient(circle, var(--accent-glow) 0%, transparent 72%);
filter: blur(30px);
opacity: 0.8;
}
.sec-02-hero__figure-ring {
position: absolute;
inset: -14px;
z-index: 1;
border: 1.5px solid hsl(var(--accent-h) 70% 62% / 0.4);
border-radius: 999px 999px 32px 32px;
transform: translate(16px, 20px);
pointer-events: none;
}
.sec-02-hero__figure-frame {
position: relative;
z-index: 2;
width: 100%;
aspect-ratio: 7 / 9;
border-radius: 999px 999px 24px 24px;
overflow: hidden;
box-shadow: var(--shadow-lift);
}
.sec-02-hero__figure-img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) brightness(0.78) contrast(1.05);
transform: scale(1.02);
transition: filter 550ms var(--ease-out), transform 550ms var(--ease-out);
}
.sec-02-hero__figure-tint {
position: absolute;
inset: 0;
background: linear-gradient(
165deg,
hsl(var(--accent-h) 60% 20% / 0.75),
hsl(var(--accent-h) 35% 10% / 0.85)
);
mix-blend-mode: color;
transition: opacity 550ms var(--ease-out);
}
/* Warm slightly on hover — less tinted, a touch of life comes back in */
.sec-02-hero__figure:hover .sec-02-hero__figure-img,
.sec-02-hero__figure:focus-within .sec-02-hero__figure-img {
filter: grayscale(0.5) brightness(0.92) contrast(1.02);
transform: scale(1.05);
}
.sec-02-hero__figure:hover .sec-02-hero__figure-tint,
.sec-02-hero__figure:focus-within .sec-02-hero__figure-tint {
opacity: 0.6;
}
/* --- Docked chips: rating (lower-left of frame) + openings (upper-right) --- */
.sec-02-hero__chip {
position: absolute;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--white);
color: var(--text-on-bone);
border-radius: var(--radius-pill);
padding: 0.55rem 0.95rem 0.55rem 0.6rem;
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
box-shadow: var(--shadow-lift);
will-change: transform;
}
.sec-02-hero__chip-icon {
color: var(--accent-strong);
flex-shrink: 0;
}
.sec-02-hero__chip--openings {
top: clamp(-0.75rem, -2vw, -0.25rem);
right: clamp(-1rem, -3vw, -0.4rem);
animation: sec-02-hero-float-b 7s ease-in-out infinite;
}
@keyframes sec-02-hero-float-b {
0%, 100% { transform: translateY(3px); }
50% { transform: translateY(-5px); }
}
html.reduced-motion .sec-02-hero__chip--openings { animation: none; }
/* Move the Google rating chip out of the copy column and dock it onto
the frame's lower-left edge. */
.sec-02-hero__rating {
margin-top: clamp(-1.5rem, -3vw, -0.5rem);
margin-left: clamp(0px, 4vw, 3rem);
margin-right: clamp(-14rem, -16vw, -10rem);
}
}
/* --- Curved bottom divider --- */
.sec-02-hero__divider {
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: clamp(50px, 8vw, 110px);
z-index: 1;
pointer-events: none;
}
/* --- Layout: rating chip overlaps photo edge on tablet (figure not shown yet) --- */
@media (min-width: 900px) and (max-width: 1023px) {
.sec-02-hero__rating {
margin-left: clamp(0px, 4vw, 3rem);
}
}
@media (max-width: 640px) {
.sec-02-hero__headline { max-width: 100%; }
.sec-02-hero__cta { flex-direction: column; align-items: stretch; }
.sec-02-hero__cta .btn { width: 100%; }
.sec-02-hero__rating { margin-top: 0.5rem; }
}
/* ---- css/sections/03-trust.css ---- */
/* ============================================================
03-trust — scoped under .sec-03-trust
Chip marquee, tilted -2deg on desktop, straightens ≤820px.
============================================================ */
.sec-03-trust {
background: var(--bone);
padding-block: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
border-top: 1px solid var(--line-bone);
border-bottom: 1px solid var(--line-bone);
overflow: hidden;
position: relative;
}
.sec-03-trust__inner {
width: 100%;
}
.sec-03-trust__marquee {
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.sec-03-trust__track {
--marquee-dur: 34s;
gap: 0.85rem;
/* base.css's .marquee__track carries a 3rem padding-right (sized for the wider gap
other marquees use), which left a visibly bigger gap at the seam between this
track's last chip and the next track's first chip than the 0.85rem gap used
between every other chip. Match it so the loop point isn't inconsistent. */
padding-right: 0.85rem;
}
/* --- Pill chips --- */
.sec-03-trust__chip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
background: var(--white);
border: 1px solid var(--line-bone);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-soft);
padding: 0.55rem 1.1rem;
}
.sec-03-trust__chip--logo {
/* This was a faux wordmark (display font, 700, larger, small-caps) sitting among
body-font badge chips, which reads as a font-loading glitch rather than a logo. */
font-family: var(--font-body);
font-variant-caps: normal;
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.02em;
color: var(--text-on-bone);
}
.sec-03-trust__chip--badge {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.85rem;
color: var(--text-on-bone);
}
.sec-03-trust__icon {
width: 15px;
height: 15px;
fill: var(--accent);
flex-shrink: 0;
}
.sec-03-trust__icon--star {
fill: var(--ember);
}
/* --- Accent star-cluster flourish between chips --- */
.sec-03-trust__stars {
font-size: 0.75rem;
letter-spacing: 0.12em;
color: var(--ember);
padding-inline: 0.15rem;
}
@media (max-width: 820px) {
.sec-03-trust__marquee {
transform: none;
}
}
@media (max-width: 640px) {
.sec-03-trust__chip--logo {
font-size: 0.92rem;
}
.sec-03-trust__chip--badge {
font-size: 0.78rem;
}
.sec-03-trust__chip {
padding: 0.5rem 0.9rem;
}
}
/* ---- css/sections/04-conditions.css ---- */
/* ============================================================
04-conditions — body model + always-visible condition cards
Every selector scoped under .sec-04-conditions.
============================================================ */
.sec-04-conditions {
background: radial-gradient(120% 85% at 50% 0%, #fbf9f3 0%, var(--bone) 50%, #eee8db 100%);
}
/* --- Layout: mobile-first single column, model → left cards → right cards --- */
.sec-04-conditions .bm-layout {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "model" "left" "right";
gap: clamp(2rem, 5vw, 3rem);
align-items: start;
}
@media (min-width: 900px) {
.sec-04-conditions .bm-layout {
grid-template-columns: 1fr minmax(260px, 330px) 1fr;
grid-template-areas: "left model right";
align-items: center;
gap: clamp(1.5rem, 3vw, 3rem);
}
}
/* --- Body model + dots --- */
.sec-04-conditions .bm-model {
grid-area: model;
position: relative;
width: 100%;
max-width: 260px;
margin-inline: auto;
}
@media (min-width: 900px) {
.sec-04-conditions .bm-model {
max-width: 330px;
}
}
.sec-04-conditions .bm-model__glow {
position: absolute;
inset: -14%;
z-index: 0;
border-radius: 50%;
background: radial-gradient(circle at 50% 42%, var(--accent-soft), transparent 68%);
filter: blur(28px);
pointer-events: none;
}
.sec-04-conditions .bm-model img {
position: relative;
z-index: 1;
width: 100%;
height: auto; /* the img carries width/height attrs — without this it renders stretched */
display: block;
border-radius: 20px;
box-shadow: var(--shadow-lift);
filter: grayscale(1) contrast(1.04);
}
/* Accent-duotone tint over the model — tracks --accent so the render
re-skins with the client's brand instead of shipping the raw asset look */
.sec-04-conditions .bm-model__tint {
position: absolute;
inset: 0;
z-index: 1;
border-radius: 20px;
background: linear-gradient(170deg, hsl(var(--accent-h) 55% 62% / 0.5), hsl(var(--accent-h) 65% 30% / 0.55));
mix-blend-mode: color;
pointer-events: none;
}
/* --- Tap hint chip (dismisses permanently on first interaction) --- */
.sec-04-conditions .bm-hint {
position: absolute;
z-index: 4;
top: -14px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: var(--white);
color: var(--accent-strong);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.68rem;
letter-spacing: 0.01em;
white-space: nowrap;
padding: 0.35rem 0.75rem;
border-radius: 999px;
box-shadow: var(--shadow-soft);
pointer-events: none;
animation: bm-hint-bob 2.5s ease-in-out infinite;
transition: opacity 300ms var(--ease-out);
}
.sec-04-conditions .bm-hint.is-dismissed {
opacity: 0;
}
@keyframes bm-hint-bob {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-6px); }
}
html.reduced-motion .sec-04-conditions .bm-hint {
animation: none;
}
/* --- Active region glow: soft accent halo behind the active dot --- */
.sec-04-conditions .bm-active-glow {
position: absolute;
z-index: 1;
width: 90px;
height: 90px;
left: 0;
top: 0;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle, var(--accent-glow), transparent 70%);
filter: blur(6px);
opacity: 0;
pointer-events: none;
transition: opacity 300ms var(--ease-out);
}
.sec-04-conditions .bm-active-glow.is-visible {
opacity: 1;
}
html.reduced-motion .sec-04-conditions .bm-active-glow {
transition: none;
}
html.reduced-motion .sec-04-conditions .bm-active-glow.is-visible {
opacity: 0.55;
}
.sec-04-conditions .bm-dot {
position: absolute;
z-index: 2;
width: 28px;
height: 28px;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 2px solid var(--accent-strong);
background: var(--white);
color: var(--accent-strong);
font-family: var(--font-display);
font-weight: 800;
font-size: 0.7rem;
line-height: 1;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow-soft);
transition: background 250ms var(--ease-out), color 250ms var(--ease-out),
border-color 250ms var(--ease-out), transform 250ms var(--ease-spring);
}
/* 44px invisible tap target around the visible dot */
.sec-04-conditions .bm-dot::before {
content: "";
position: absolute;
inset: -8px;
border-radius: 50%;
}
.sec-04-conditions .bm-dot__ring {
position: absolute;
inset: -8px;
border-radius: 50%;
border: 1.5px solid var(--accent-strong);
opacity: 0;
}
.sec-04-conditions .bm-dot:hover,
.sec-04-conditions .bm-dot:focus-visible {
transform: translate(-50%, -50%) scale(1.08);
}
.sec-04-conditions .bm-dot:focus-visible {
outline: 3px solid var(--accent-strong);
outline-offset: 3px;
}
.sec-04-conditions .bm-dot.is-active {
background: var(--accent-strong);
border-color: var(--accent-strong);
color: var(--accent-on);
transform: translate(-50%, -50%) scale(1.18);
}
/* --- Idle breathing loop: attention cue on one dot at a time, pre-interaction only --- */
.sec-04-conditions .bm-dot.is-breathing {
animation: bm-breathe 1.6s ease-in-out;
}
@keyframes bm-breathe {
0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: var(--shadow-soft); }
50% { transform: translate(-50%, -50%) scale(1.12); box-shadow: var(--shadow-soft), 0 0 0 8px var(--accent-glow); }
}
html.reduced-motion .sec-04-conditions .bm-dot.is-breathing {
animation: none;
}
.sec-04-conditions .bm-dot.is-active .bm-dot__ring {
opacity: 1;
animation: bm-pulse 1.8s ease-out infinite;
}
@keyframes bm-pulse {
from { transform: scale(0.55); opacity: 0.8; }
to { transform: scale(1.9); opacity: 0; }
}
html.reduced-motion .sec-04-conditions .bm-dot.is-active .bm-dot__ring {
animation: none;
opacity: 0.45;
transform: scale(1);
}
/* --- Condition cards (always visible, both columns) --- */
.sec-04-conditions .bm-cards {
display: grid;
gap: clamp(0.9rem, 1.8vw, 1.15rem);
align-content: center;
}
.sec-04-conditions .bm-cards--left { grid-area: left; }
.sec-04-conditions .bm-cards--right { grid-area: right; }
.sec-04-conditions .bm-card {
background: var(--white);
border-radius: var(--radius-card);
box-shadow: var(--shadow-soft);
border: 1.5px solid transparent;
padding: clamp(1.1rem, 2vw, 1.5rem);
transition: border-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out),
transform 300ms var(--ease-spring);
}
.sec-04-conditions .bm-card.is-active {
border-color: var(--accent-strong);
box-shadow: var(--shadow-lift);
transform: translateY(-3px);
}
.sec-04-conditions .bm-card__head {
display: flex;
align-items: center;
gap: 0.7rem;
}
.sec-04-conditions .bm-card__num {
width: 26px;
height: 26px;
flex-shrink: 0;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent-strong);
font-family: var(--font-display);
font-weight: 800;
font-size: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
transition: background 250ms var(--ease-out), color 250ms var(--ease-out);
}
.sec-04-conditions .bm-card.is-active .bm-card__num {
background: var(--accent-strong);
color: var(--accent-on);
}
.sec-04-conditions .bm-card h3 {
font-size: 1.05rem;
margin: 0;
}
.sec-04-conditions .bm-card p {
margin-top: 0.5rem;
color: var(--text-on-bone-dim);
font-size: 0.92rem;
line-height: 1.55;
}
.sec-04-conditions .bm-card__link {
margin-top: 0.65rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.9rem;
color: var(--accent-strong);
text-decoration: none;
transition: gap 200ms var(--ease-spring), color 200ms var(--ease-out);
}
.sec-04-conditions .bm-card__link:hover {
gap: 0.65rem;
color: var(--accent-strong);
}
/* --- Bottom CTA --- */
.sec-04-conditions .bm-cta {
display: flex;
justify-content: center;
margin-top: clamp(2.5rem, 5vw, 4rem);
}
html.reduced-motion .sec-04-conditions .bm-dot,
html.reduced-motion .sec-04-conditions .bm-card {
transition: none;
}
/* ---- css/sections/05-services.css ---- */
/* ============================================================
05-services — bento grid, bone section.
Scoped under .sec-05-services. See section contract in
docs/superpowers/specs/2026-07-13-modern-momentum-home-design.md
============================================================ */
.sec-05-services {
background: radial-gradient(120% 85% at 50% 0%, #fbf9f3 0%, var(--bone) 50%, #eee8db 100%);
}
.sec-05-services__grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: clamp(260px, 22vw, 340px) clamp(260px, 22vw, 340px) clamp(190px, 15vw, 240px);
gap: var(--sp-gap);
}
.sec-05-services__tile {
position: relative;
display: block;
grid-column: 1 / 13;
border-radius: var(--radius-card);
overflow: hidden;
isolation: isolate;
text-decoration: none;
color: var(--white);
box-shadow: var(--shadow-soft);
transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
.sec-05-services__tile:hover,
.sec-05-services__tile:focus-visible {
transform: translateY(-6px);
box-shadow: var(--shadow-lift);
}
.sec-05-services__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.85) contrast(1.05) brightness(0.85);
transform: scale(1.02);
transition: filter 600ms var(--ease-out), transform 900ms var(--ease-out);
}
.sec-05-services__tile::before {
content: "";
position: absolute;
inset: 0;
background: hsl(var(--accent-h) 70% 30% / 0.5);
mix-blend-mode: color;
z-index: 1;
transition: opacity 500ms var(--ease-out);
}
.sec-05-services__tile:hover .sec-05-services__photo,
.sec-05-services__tile:focus-visible .sec-05-services__photo {
filter: grayscale(0) contrast(1) brightness(0.92);
transform: scale(1.08);
}
.sec-05-services__tile:hover::before,
.sec-05-services__tile:focus-visible::before {
opacity: 0;
}
.sec-05-services__scrim {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to top, hsl(200 30% 6% / 0.88) 0%, hsl(200 30% 6% / 0.25) 55%, transparent 85%);
}
.sec-05-services__body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 0.5rem;
height: 100%;
padding: 1.5rem 1.6rem;
justify-content: flex-end;
}
.sec-05-services__title {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-h4);
letter-spacing: -0.01em;
}
.sec-05-services__tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.sec-05-services__tag {
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.2;
color: hsl(0 0% 100% / 0.92);
background: hsl(0 0% 100% / 0.16);
border: 1px solid hsl(0 0% 100% / 0.32);
border-radius: var(--radius-pill);
padding: 0.28rem 0.7rem;
white-space: nowrap;
backdrop-filter: blur(6px);
}
.sec-05-services__desc {
font-size: 0.92rem;
line-height: 1.45;
color: hsl(0 0% 100% / 0.82);
max-width: 34ch;
}
.sec-05-services__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
margin-top: 0.35rem;
border-radius: var(--radius-pill);
background: hsl(0 0% 100% / 0.14);
border: 1px solid hsl(0 0% 100% / 0.28);
font-size: 1rem;
transition: transform 350ms var(--ease-spring), background-color 300ms var(--ease-out);
}
.sec-05-services__tile:hover .sec-05-services__arrow,
.sec-05-services__tile:focus-visible .sec-05-services__arrow {
transform: translateX(6px);
background: var(--accent-strong);
}
/* --- Bento placement (desktop) --- */
@media (min-width: 861px) {
/* Row 1-2: feature tile left, two-up stack right.
Row 3: three equal tiles, the last of which opens the full services index.
Seven tiles, twelve columns, no holes and no orphan row. */
.sec-05-services__tile--pt {
grid-column: 1 / 7;
grid-row: 1 / 3;
}
.sec-05-services__tile--sports {
grid-column: 7 / 13;
grid-row: 1 / 2;
}
.sec-05-services__tile--needling {
grid-column: 7 / 10;
grid-row: 2 / 3;
}
.sec-05-services__tile--massage {
grid-column: 10 / 13;
grid-row: 2 / 3;
/* intentional offset to break perfect bento alignment */
margin-top: 1.75rem;
}
.sec-05-services__tile--manual {
grid-column: 1 / 5;
grid-row: 3 / 4;
}
.sec-05-services__tile--perf {
grid-column: 5 / 9;
grid-row: 3 / 4;
}
.sec-05-services__tile--all {
grid-column: 9 / 13;
grid-row: 3 / 4;
}
/* Compact body for the short tiles: the offset row-2 tile and the whole third row. */
.sec-05-services__tile--massage .sec-05-services__body,
.sec-05-services__tile--manual .sec-05-services__body,
.sec-05-services__tile--perf .sec-05-services__body,
.sec-05-services__tile--all .sec-05-services__body {
padding: 1.25rem 1.1rem;
gap: 0.4rem;
}
.sec-05-services__tile--massage .sec-05-services__title,
.sec-05-services__tile--manual .sec-05-services__title,
.sec-05-services__tile--perf .sec-05-services__title,
.sec-05-services__tile--all .sec-05-services__title {
font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
}
.sec-05-services__tile--massage .sec-05-services__tags,
.sec-05-services__tile--manual .sec-05-services__tags,
.sec-05-services__tile--perf .sec-05-services__tags,
.sec-05-services__tile--all .sec-05-services__tags {
gap: 0.3rem;
}
.sec-05-services__tile--massage .sec-05-services__tag,
.sec-05-services__tile--manual .sec-05-services__tag,
.sec-05-services__tile--perf .sec-05-services__tag,
.sec-05-services__tile--all .sec-05-services__tag {
font-size: 0.64rem;
padding: 0.24rem 0.55rem;
}
.sec-05-services__tile--massage .sec-05-services__desc,
.sec-05-services__tile--manual .sec-05-services__desc,
.sec-05-services__tile--perf .sec-05-services__desc,
.sec-05-services__tile--all .sec-05-services__desc {
font-size: 0.82rem;
max-width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.sec-05-services__tile--massage .sec-05-services__arrow,
.sec-05-services__tile--manual .sec-05-services__arrow,
.sec-05-services__tile--perf .sec-05-services__arrow,
.sec-05-services__tile--all .sec-05-services__arrow {
width: 2rem;
height: 2rem;
margin-top: 0.15rem;
}
.sec-05-services__tile--pt .sec-05-services__title {
font-size: var(--fs-h3);
}
.sec-05-services__tile--pt .sec-05-services__body {
padding: 2.25rem;
}
}
/* --- Mobile stack --- */
@media (max-width: 860px) {
.sec-05-services__grid {
grid-template-columns: 1fr;
grid-template-rows: none;
}
.sec-05-services__tile {
grid-column: 1 / -1;
height: 320px;
order: 2;
}
.sec-05-services__tile--pt {
height: 380px;
order: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.sec-05-services__tile,
.sec-05-services__photo,
.sec-05-services__tile::before,
.sec-05-services__arrow {
transition: none;
}
}
/* ---- css/sections/06-journey.css ---- */
/* ============================================================
06-journey — scroll-pinned 4-phase signature section.
Scoped under .sec-06-journey. Desktop: sticky pin + crossfade
driven by js/sections/06-journey.js. Mobile/reduced-motion:
stacked cards, JS pinning logic does not engage (see guard).
============================================================ */
.sec-06-journey {
/* Dark act: melts into 16-comebacks strip below (see elevation addendum) */
background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 70%, #0a1418 100%);
position: relative;
}
/* --- Wave divider: melts the services vignette's bottom edge (#eee8db)
into this dark section — see css/sections/05-services.css background. */
.sec-06-journey__wave {
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: clamp(32px, 4.5vw, 64px);
pointer-events: none;
}
.sec-06-journey__head {
/* Extra top padding clears the wave (max ~64px) so it never overlaps the eyebrow/H2 */
padding-top: calc(var(--sp-section) + clamp(32px, 4.5vw, 64px));
padding-bottom: clamp(2rem, 5vw, 3.5rem);
max-width: 46ch;
}
.sec-06-journey__head p:not(.eyebrow) {
margin-top: 1rem;
color: var(--text-on-ink-dim);
max-width: 52ch;
}
/* --- Pin wrapper --- */
.sec-06-journey__pin-wrap {
position: relative;
height: 400vh;
}
.sec-06-journey__pin {
position: sticky;
top: var(--nav-h);
height: calc(100svh - var(--nav-h));
display: flex;
align-items: center;
overflow: hidden;
}
/* .sec-06-journey__inner sizing comes from the shared .container class —
don't override its width or the pinned content goes full-bleed. */
/* --- Progress nav (dots + rail + status) --- */
.sec-06-journey__nav {
/* positioned so the absolutely-placed rail anchors here, not the sticky pin */
position: relative;
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: clamp(2.5rem, 6vw, 4rem);
max-width: 30rem;
}
.sec-06-journey__dots {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
padding: 0;
}
.sec-06-journey__dot-item { position: relative; z-index: 2; }
.sec-06-journey__rail {
position: absolute;
left: 1.1rem;
right: 1.1rem;
top: 1.2rem; /* vertical center of the 2.4rem dots row */
height: 2px;
transform: translateY(-50%);
background: hsl(0 0% 100% / 0.15);
border-radius: 2px;
overflow: hidden;
z-index: 1;
}
.sec-06-journey__rail-fill {
display: block;
height: 100%;
width: calc(var(--journey-fill, 0) * 100%);
background: var(--accent);
transition: width 500ms var(--ease-out);
}
.sec-06-journey__dot {
display: flex;
align-items: center;
justify-content: center;
width: 2.4rem;
height: 2.4rem;
border-radius: var(--radius-pill);
border: 1px solid hsl(0 0% 100% / 0.25);
background: var(--ink-2);
color: var(--text-on-ink-dim);
font-family: var(--font-display);
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out),
border-color 300ms var(--ease-out), transform 300ms var(--ease-spring);
}
.sec-06-journey__dot:hover { border-color: var(--accent); }
.sec-06-journey__dot.is-active,
.sec-06-journey__dot[aria-current="true"] {
background: var(--accent-strong);
border-color: var(--accent-strong);
color: var(--accent-on);
transform: scale(1.08);
}
.sec-06-journey__status {
font-size: 0.85rem;
letter-spacing: 0.04em;
color: var(--text-on-ink-dim);
}
.sec-06-journey__status strong,
.sec-06-journey__status span { color: var(--text-on-ink); font-weight: 600; }
/* --- Stage --- */
.sec-06-journey__stage {
position: relative;
min-height: clamp(360px, 46vw, 480px);
}
.sec-06-journey__line { display: none; }
.sec-06-journey__phase {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
/* Top-align so the photo tracks the content block instead of sinking
toward the vertical center of the tall pinned stage */
align-items: start;
gap: clamp(2rem, 5vw, 4rem);
}
.sec-06-journey__frame {
margin-top: 1.25rem; /* optical alignment with the timeline chip / phase name */
}
.sec-06-journey__ghost {
position: absolute;
top: -0.35em;
left: -0.02em;
z-index: 0;
}
.sec-06-journey__content {
position: relative;
z-index: 1;
}
.sec-06-journey__chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.75rem;
margin-bottom: 0.9rem;
border-radius: var(--radius-pill);
background: var(--accent-soft);
color: var(--accent-strong);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.02em;
}
.sec-06-journey__chip-icon { flex-shrink: 0; }
.sec-06-journey__name {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: hsl(var(--accent-h) 70% 62%);
margin-bottom: 0.75rem;
}
.sec-06-journey__promise {
color: var(--white);
margin-bottom: 1.25rem;
}
.sec-06-journey__bullets {
display: flex;
flex-direction: column;
gap: 0.65rem;
color: var(--text-on-ink-dim);
max-width: 34ch;
}
.sec-06-journey__bullets li {
position: relative;
padding-left: 1.4rem;
line-height: 1.5;
}
.sec-06-journey__bullets li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 0.5rem;
height: 0.5rem;
border-radius: var(--radius-pill);
background: var(--accent);
}
.sec-06-journey__frame {
position: relative;
z-index: 1;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 3;
box-shadow: var(--shadow-lift);
/* Capped so the photo's height roughly matches the text block — keeps the
two columns reading as one even row instead of the photo dominating */
max-width: 460px;
justify-self: end;
width: 100%;
}
.sec-06-journey__frame img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* --- Micro-CTA row (below pinned wrapper) --- */
.sec-06-journey__cta {
padding-block: clamp(2.5rem, 4vw, 4rem) clamp(2rem, 3vw, 3rem);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.sec-06-journey__cta-text {
color: var(--text-on-ink-dim);
max-width: 36ch;
font-size: var(--fs-body);
}
.sec-06-journey__cta-btn { color: var(--white); }
/* --- Desktop pinned crossfade --- */
/* Parent-qualified selectors so these outrank base.css's
[data-reveal].is-visible (the phases carry data-reveal for mobile). */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
.sec-06-journey .sec-06-journey__phase {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(18px);
pointer-events: none;
transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
}
.sec-06-journey .sec-06-journey__phase.is-active {
opacity: 1;
transform: none;
pointer-events: auto;
}
}
/* --- Mobile / reduced-motion: stacked cards, no pinning --- */
@media (max-width: 820px), (prefers-reduced-motion: reduce) {
.sec-06-journey__pin-wrap { height: auto; }
.sec-06-journey__pin {
position: static;
top: auto;
height: auto;
display: block;
overflow: visible;
}
.sec-06-journey__nav { display: none; }
.sec-06-journey__stage {
display: flex;
flex-direction: column;
gap: clamp(2rem, 8vw, 3rem);
min-height: 0;
padding-left: 1.75rem;
}
.sec-06-journey__line {
display: block;
position: absolute;
top: 0.5rem;
bottom: 0.5rem;
left: 0.35rem;
width: 2px;
background: linear-gradient(to bottom, var(--accent), hsl(0 0% 100% / 0.12));
transform: scaleY(0);
transform-origin: top;
transition: transform 900ms var(--ease-out);
}
.sec-06-journey__line.is-visible { transform: scaleY(1); }
html.reduced-motion .sec-06-journey__line { transform: scaleY(1); transition: none; }
.sec-06-journey__phase {
position: relative;
display: block;
padding: 1.75rem 1.5rem;
border-radius: var(--radius-card);
background: var(--ink-2);
border: 1px solid hsl(0 0% 100% / 0.08);
overflow: hidden;
}
.sec-06-journey__ghost {
top: -0.6rem;
left: 0.5rem;
font-size: clamp(4.5rem, 24vw, 7.5rem);
opacity: 0.6;
}
.sec-06-journey__content { margin-bottom: 1.5rem; }
.sec-06-journey__bullets { max-width: none; }
.sec-06-journey__frame { aspect-ratio: 16 / 10; }
}
/* --- No JS: 06-journey.js never runs, so nothing ever adds .is-active past phase 1 and
scroll never advances the pin. Force the same stacked-cards fallback as mobile/reduced-
motion above so all four phases stay reachable and visible without a script. --- */
html:not(.js) .sec-06-journey__pin-wrap { height: auto; }
html:not(.js) .sec-06-journey__pin {
position: static;
top: auto;
height: auto;
display: block;
overflow: visible;
}
html:not(.js) .sec-06-journey__nav { display: none; }
html:not(.js) .sec-06-journey__stage {
display: flex;
flex-direction: column;
gap: clamp(2rem, 8vw, 3rem);
min-height: 0;
}
html:not(.js) .sec-06-journey__phase {
position: relative;
display: block;
opacity: 1;
transform: none;
pointer-events: auto;
padding: 1.75rem 1.5rem;
border-radius: var(--radius-card);
background: var(--ink-2);
border: 1px solid hsl(0 0% 100% / 0.08);
overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
.sec-06-journey__dot,
.sec-06-journey__rail-fill,
.sec-06-journey__phase {
transition: none;
}
}
/* ---- css/sections/07-results.css ---- */
/* ============================================================
07-results — dark stat interlude band
All selectors scoped under .sec-07-results
============================================================ */
.sec-07-results {
/* Dark act continues from 16-comebacks strip / 06-journey, returns to --ink */
background: linear-gradient(180deg, #0a1418 0%, var(--ink) 45%);
position: relative;
padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem);
overflow: hidden;
}
/* --- drifting background glows --- */
.sec-07-results__glow {
position: absolute;
width: min(60vw, 620px);
height: min(60vw, 620px);
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
opacity: 0.55;
z-index: 0;
}
.sec-07-results__glow--one {
top: -10%;
left: -8%;
background: radial-gradient(circle, var(--accent-glow), transparent 70%);
animation: sec-07-drift-a 22s ease-in-out infinite;
}
.sec-07-results__glow--two {
bottom: -18%;
right: -6%;
background: radial-gradient(circle, hsl(var(--accent-h) 70% 50% / 0.28), transparent 70%);
animation: sec-07-drift-b 26s ease-in-out infinite;
}
@keyframes sec-07-drift-a {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(6%, 8%) scale(1.1); }
}
@keyframes sec-07-drift-b {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-8%, -6%) scale(1.08); }
}
html.reduced-motion .sec-07-results__glow { animation: none; }
.sec-07-results__inner {
position: relative;
z-index: 1;
}
.sec-07-results__head {
text-align: center;
margin-bottom: clamp(2.5rem, 2rem + 3vw, 4rem);
}
.sec-07-results__head .eyebrow {
justify-content: center;
margin-bottom: 1rem;
}
.sec-07-results__head h2 {
max-width: 20ch;
margin-inline: auto;
}
/* --- stat grid --- */
.sec-07-results__statwrap {
position: relative;
}
/* Canonical pulse-line motif, stretched behind the stat row at mid-height.
Sits under the stat text (z-index) and draws its stroke on reveal
(base.css handles the [data-reveal].is-visible draw transition). */
.sec-07-results__pulse {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: clamp(50px, 8vw, 90px);
transform: translateY(-50%);
opacity: 0.5;
z-index: 0;
pointer-events: none;
}
.sec-07-results__stats {
position: relative;
z-index: 1;
display: grid;
/* This build ships 3 verified stats (see sections/07-results.html), not the master's 4,
so this is 3 columns, not repeat(4): a 4-track grid would left-pack 3 items against
the left edge with a dead column on the right.
minmax(0,1fr) so an unbroken value (e.g. an unreplaced placeholder token) can't force
the track wider than the container */
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 42rem;
margin-inline: auto;
gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
text-align: center;
}
@media (max-width: 760px) {
.sec-07-results__stats {
gap: 2rem 1.25rem;
}
}
.sec-07-results__stat {
display: flex;
flex-direction: column;
align-items: center;
}
.sec-07-results__tick {
display: block;
width: 2px;
height: 1.5rem;
margin-bottom: 0.9rem;
background: var(--accent);
border-radius: 2px;
}
.sec-07-results__value {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(3.5rem, 2.2rem + 5.5vw, 5.5rem);
line-height: 1;
letter-spacing: -0.02em;
color: var(--white);
margin-bottom: 0.6rem;
max-width: 100%;
overflow-wrap: anywhere;
position: relative;
z-index: 1;
/* local halo so the pulse-line passing behind the numerals doesn't
compete with legibility */
text-shadow: 0 0 22px var(--ink), 0 0 14px var(--ink), 0 0 6px var(--ink);
}
.sec-07-results__label {
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-on-ink-dim);
}
/* --- divider + trust line --- */
.sec-07-results__divider {
border: none;
border-top: 1px solid hsl(0 0% 100% / 0.12);
margin: clamp(2.5rem, 2rem + 3vw, 4rem) 0 clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem);
}
.sec-07-results__trust {
text-align: center;
font-size: 0.95rem;
color: var(--text-on-ink-dim);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
.sec-07-results__star {
color: var(--ember);
}
.sec-07-results__dot {
color: hsl(0 0% 100% / 0.3);
}
/* ---- css/sections/08-why.css ---- */
/* ============================================================
08-why — sticky photo collage + sequential differentiators
All selectors scoped under .sec-08-why
============================================================ */
.sec-08-why {
background: radial-gradient(120% 85% at 50% 0%, #fbf9f3 0%, var(--bone) 50%, #eee8db 100%);
position: relative;
}
.sec-08-why__head {
text-align: center;
margin-inline: auto;
}
.sec-08-why__head .eyebrow { justify-content: center; }
.sec-08-why__head h2 { margin-inline: auto; }
.sec-08-why__grid {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
gap: clamp(2.5rem, 2rem + 4vw, 6rem);
align-items: start;
}
/* --- collage column (sticky on desktop) --- */
.sec-08-why__collage-col {
position: sticky;
top: calc(var(--nav-h) + 2rem);
align-self: start;
}
.sec-08-why__collage {
position: relative;
padding: 2.5rem 2rem 3.5rem 0;
}
.sec-08-why__frame {
position: absolute;
top: 3.5rem;
right: -0.75rem;
width: 62%;
height: 58%;
border: 3px solid var(--accent);
border-radius: var(--radius-lg);
z-index: 0;
}
.sec-08-why__photo {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lift);
position: relative;
}
.sec-08-why__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sec-08-why__photo--a {
width: 82%;
aspect-ratio: 900 / 680;
z-index: 1;
}
.sec-08-why__photo--b {
position: absolute;
right: 0;
bottom: 0;
width: 52%;
aspect-ratio: 620 / 480;
z-index: 2;
border: 6px solid var(--bone);
}
.sec-08-why__badge {
position: absolute;
left: -0.5rem;
bottom: 0.5rem;
z-index: 3;
display: flex;
flex-direction: column;
gap: 0.15rem;
background: var(--white);
padding: 0.85rem 1.2rem;
border-radius: var(--radius-card);
box-shadow: var(--shadow-lift);
}
.sec-08-why__badge strong {
font-family: var(--font-display);
font-size: 0.95rem;
color: var(--text-on-bone);
}
.sec-08-why__badge span {
font-size: 0.78rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--accent-strong);
font-weight: 600;
}
/* --- differentiator list --- */
.sec-08-why__list {
display: flex;
flex-direction: column;
gap: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
}
.sec-08-why__item {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: start;
gap: 1.25rem;
padding: 0.25rem 0;
opacity: 0.55;
transition: opacity 400ms var(--ease-out);
}
.sec-08-why__item.is-active {
opacity: 1;
}
.sec-08-why__num {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.5rem;
color: var(--text-on-bone-dim);
transition: color 400ms var(--ease-out);
}
.sec-08-why__item.is-active .sec-08-why__num {
color: var(--accent-strong);
}
.sec-08-why__title {
margin-bottom: 0.5rem;
}
.sec-08-why__copy {
color: var(--text-on-bone-dim);
max-width: 46ch;
}
.sec-08-why__check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
border: 2px solid var(--line-bone);
color: var(--accent-strong);
transition: border-color 400ms var(--ease-out);
}
.sec-08-why__item.is-active .sec-08-why__check {
border-color: var(--accent-strong);
}
.sec-08-why__check-path {
stroke-dasharray: 24;
stroke-dashoffset: 24;
transition: stroke-dashoffset 500ms var(--ease-out);
}
.sec-08-why__item.is-active .sec-08-why__check-path {
stroke-dashoffset: 0;
}
/* --- responsive --- */
@media (max-width: 900px) {
.sec-08-why__grid {
grid-template-columns: 1fr;
}
.sec-08-why__collage-col {
position: static;
top: auto;
margin-bottom: 1rem;
}
.sec-08-why__collage {
max-width: 420px;
margin-inline: auto;
}
.sec-08-why__item {
opacity: 1;
}
.sec-08-why__num {
color: var(--accent-strong);
}
.sec-08-why__check {
border-color: var(--accent-strong);
}
.sec-08-why__check-path {
stroke-dashoffset: 0;
}
}
html.reduced-motion .sec-08-why__photo {
transform: none !important;
}
/* ---- css/sections/09-team.css ---- */
/* ============================================================
09-team — team cards with duotone→color portrait hover + tilt
All selectors scoped under .sec-09-team
============================================================ */
.sec-09-team__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-gap);
}
@media (max-width: 860px) {
.sec-09-team__grid { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
}
/* --- Solo-practitioner variant ---
For a single-clinician clinic, a 3-up grid holding one card leaves two dead columns. The
--solo modifier turns the single card into a horizontal feature: portrait on the left,
the longer bio on the right. Below 860px the base rule above already collapses it to one
column, and --solo returns the card to a stacked layout so the portrait keeps its shape. */
.sec-09-team__grid--solo {
grid-template-columns: minmax(0, 1fr);
max-width: 56rem;
margin-inline: auto;
}
.sec-09-team__card--solo {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: clamp(1.25rem, 3vw, 2.5rem);
align-items: center;
padding: 1.5rem;
text-align: left;
}
.sec-09-team__card--solo .sec-09-team__body { padding-bottom: 0; }
.sec-09-team__card--solo .sec-09-team__chips { justify-content: flex-start; }
@media (max-width: 700px) {
.sec-09-team__card--solo {
grid-template-columns: minmax(0, 1fr);
text-align: center;
}
.sec-09-team__card--solo .sec-09-team__chips { justify-content: center; }
}
.sec-09-team__card {
background: var(--white);
border-radius: var(--radius-card);
overflow: visible;
box-shadow: var(--shadow-soft);
padding: 1.5rem 1.5rem 0;
transition: box-shadow 400ms var(--ease-out), transform 400ms var(--ease-out);
transform-style: preserve-3d;
will-change: transform;
}
.sec-09-team__card:hover,
.sec-09-team__card:focus-within {
box-shadow: var(--shadow-lift);
}
/* --- Arched signature frame: media wrapper stays overflow-visible so
the offset ring never clips, even under the card's tilt transform --- */
.sec-09-team__media {
position: relative;
overflow: visible;
}
.sec-09-team__ring {
position: absolute;
inset: 0;
border: 2px solid var(--accent);
border-radius: 999px 999px var(--radius-card) var(--radius-card);
background: none;
opacity: 0.25;
transform: translate(10px, 10px) scale(1);
transition: opacity 300ms ease, transform 300ms ease;
pointer-events: none;
}
.sec-09-team__card:hover .sec-09-team__ring,
.sec-09-team__card:focus-within .sec-09-team__ring {
opacity: 1;
transform: translate(10px, 10px) scale(1.02);
}
.sec-09-team__photo-wrap {
position: relative;
z-index: 1;
aspect-ratio: 5 / 6;
overflow: hidden;
border-radius: 999px 999px var(--radius-card) var(--radius-card);
background: var(--bone-2);
}
.sec-09-team__photo {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.85) contrast(1.05) brightness(0.98);
transition: filter 600ms var(--ease-out), transform 600ms var(--ease-out);
transform: scale(1.02);
}
.sec-09-team__photo-wrap::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(160deg, var(--accent-glow), transparent 65%);
mix-blend-mode: multiply;
opacity: 0.6;
transition: opacity 600ms var(--ease-out);
pointer-events: none;
}
.sec-09-team__card:hover .sec-09-team__photo,
.sec-09-team__card:focus-within .sec-09-team__photo {
filter: grayscale(0) contrast(1) brightness(1);
transform: scale(1.06);
}
.sec-09-team__card:hover .sec-09-team__photo-wrap::after,
.sec-09-team__card:focus-within .sec-09-team__photo-wrap::after {
opacity: 0;
}
.sec-09-team__body {
padding: 1.5rem 0 1.8rem;
}
.sec-09-team__name {
font-size: var(--fs-h4);
margin-bottom: 0.2rem;
}
.sec-09-team__role {
font-size: var(--fs-small);
color: var(--text-on-bone-dim);
margin-bottom: 0.9rem;
}
.sec-09-team__chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.sec-09-team__chip {
font-family: var(--font-display);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
padding: 0.3rem 0.7rem;
border-radius: var(--radius-pill);
background: var(--accent-soft);
color: var(--accent-strong);
}
.sec-09-team__quote {
font-style: italic;
font-size: 0.95rem;
color: var(--text-on-bone-dim);
border-top: 1px solid var(--line-bone);
padding-top: 0.9rem;
}
.sec-09-team__ask {
margin-top: 0.9rem;
padding-top: 0.8rem;
border-top: 1px solid var(--line-bone);
}
.sec-09-team__ask-label {
font-family: var(--font-display);
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-strong);
margin-bottom: 0.3rem;
}
.sec-09-team__ask-text {
font-size: 0.88rem;
line-height: 1.4;
color: var(--text-on-bone-dim);
}
.sec-09-team__book {
margin-top: 0.9rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.9rem;
color: var(--accent-strong);
text-decoration: none;
transition: gap 200ms var(--ease-spring), color 200ms var(--ease-out);
}
.sec-09-team__book-arrow {
transition: transform 300ms var(--ease-spring);
}
.sec-09-team__book:hover,
.sec-09-team__book:focus-visible {
gap: 0.65rem;
color: var(--accent-strong);
}
.sec-09-team__book:hover .sec-09-team__book-arrow,
.sec-09-team__book:focus-visible .sec-09-team__book-arrow {
transform: translateX(4px);
}
.sec-09-team__cta {
margin-top: clamp(2rem, 4vw, 3rem);
text-align: center;
}
@media (prefers-reduced-motion: reduce) {
.sec-09-team__card,
.sec-09-team__photo,
.sec-09-team__photo-wrap::after,
.sec-09-team__ring,
.sec-09-team__book-arrow {
transition: none;
}
}
/* html.reduced-motion (site-wide JS flag) — ring stays static, no draw-in */
html.reduced-motion .sec-09-team__ring {
opacity: 0.5;
transform: translate(10px, 10px) scale(1);
transition: none;
}
html.reduced-motion .sec-09-team__card:hover .sec-09-team__ring,
html.reduced-motion .sec-09-team__card:focus-within .sec-09-team__ring {
opacity: 0.5;
transform: translate(10px, 10px) scale(1);
}
/* Bios differ in length, so the "Book with ..." link floated at a different height in each
card. Push it to the bottom and give the role line a consistent box.
Excludes --solo: that variant is a two-column grid (portrait | bio), and this flex-column
override was collapsing it to one column, stretching the portrait to the full card width. */
.sec-09-team__card:not(.sec-09-team__card--solo) { display: flex; flex-direction: column; }
.sec-09-team__body { display: flex; flex-direction: column; flex: 1; }
.sec-09-team__book { margin-top: auto; }
.sec-09-team__role { min-height: 2.6em; }
/* ---- css/sections/10-testimonials.css ---- */
/* ============================================================
10-testimonials — cinematic quote carousel + opposite-direction
vertical review marquee ("Proof Wall"). Scoped under
.sec-10-testimonials
============================================================ */
/* --- Carousel --- */
.sec-10-testimonials__carousel {
max-width: 48rem;
margin: 0 auto clamp(3.5rem, 6vw, 5rem);
text-align: center;
}
.sec-10-testimonials__viewport {
position: relative;
overflow: hidden;
min-height: 15rem;
}
.sec-10-testimonials__track {
position: relative;
display: block;
}
.sec-10-testimonials__slide {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
opacity: 0;
transform: translateX(24px);
transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
pointer-events: none;
}
.sec-10-testimonials__slide.is-active {
position: relative;
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.sec-10-testimonials__slide.is-prev {
transform: translateX(-24px);
}
.sec-10-testimonials__glyph {
font-family: var(--font-quote);
font-size: clamp(3.5rem, 4vw, 5.5rem);
line-height: 0.6;
color: var(--accent);
opacity: 0.85;
}
.sec-10-testimonials__quote {
font-family: var(--font-quote);
font-style: italic;
font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
line-height: 1.35;
margin: 0.5rem 0 1.5rem;
max-width: 42ch;
}
.sec-10-testimonials__stars {
color: var(--ember);
letter-spacing: 0.15em;
margin-bottom: 0.6rem;
font-size: 0.95rem;
}
.sec-10-testimonials__attr {
color: var(--text-on-ink-dim);
font-size: 0.9rem;
}
.sec-10-testimonials__controls {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
margin-top: 2rem;
}
.sec-10-testimonials__arrow {
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
border: 1px solid hsl(0 0% 100% / 0.2);
background: transparent;
color: var(--text-on-ink);
font-size: 1.1rem;
cursor: pointer;
transition: background 250ms var(--ease-out), border-color 250ms var(--ease-out), transform 250ms var(--ease-spring);
}
.sec-10-testimonials__arrow:hover {
background: hsl(0 0% 100% / 0.1);
border-color: var(--accent);
transform: translateY(-2px);
}
.sec-10-testimonials__dots {
display: flex;
gap: 0.5rem;
}
.sec-10-testimonials__dot {
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
border: none;
background: hsl(0 0% 100% / 0.25);
cursor: pointer;
padding: 0;
transition: background 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.sec-10-testimonials__dot.is-active {
background: var(--accent);
transform: scale(1.3);
}
/* --- Review wall ---
Opposite-direction vertical marquee. This was frozen to a static grid at one point
because clients read the moving cards as "cut off mid-review". It is animated again,
rebuilt so it does not reproduce that complaint:
1. the viewport is tall enough that whole reviews are always readable, never slivers
2. the top and bottom edges are a gradient mask, so partials fade rather than hard-cut
3. it pauses on hover and on focus-within, so anyone can stop it and read
4. mobile and reduced-motion fall back to the plain static grid
DO NOT shorten the wall or thin the review count without redoing the maths below. Both
are load-bearing, and getting either wrong brings the "truncated" complaint straight back. */
.sec-10-testimonials__wall {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-gap);
align-items: start;
/* Sizing is driven by the loop maths, not by eye. With card height C, gap G and pitch
P = C + G, the number of cards guaranteed FULLY inside the clear zone at EVERY phase
of the scroll is floor((clear - C) / P). For three full cards, clear >= 3P + C.
With C=188 and G=20 => P=208, so the clear zone must be >= 812px. The fade bands are a
fixed 120px each (not a %, so they cannot grow with the section and eat the clear
zone), hence a minimum height of ~812 + 240.
The two columns carry DISJOINT sets of 6 reviews (12 unique in total). Both halves of
that matter:
- disjoint, because rotating ONE shared list by half only separates the columns at
t=0; they run at different speeds (54s vs 62s) and drift back into sync, so the
same reviewer appears in both columns.
- 6 per column, because a set must be TALLER than the window or a void opens at an
edge on every loop. 6 cards = 1248px against a ~1060px window. 4 would be 832px.
Two sets per column and translateY(-50%) = exactly one set, so the loop has no seam. */
height: clamp(1060px, 108vh, 1180px);
overflow: hidden;
position: relative;
/* 120px is deep relative to a ~188px card, so a partial fades across most of its body
instead of showing crisp text and then vanishing at a hard edge. */
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
}
.sec-10-testimonials__col {
height: 100%;
overflow: hidden;
}
.sec-10-testimonials__col-track {
display: flex;
flex-direction: column;
gap: 0;
will-change: transform;
}
.sec-10-testimonials__col-set {
display: flex;
flex-direction: column;
gap: 20px;
/* The set carries its own TRAILING gap and the track has gap:0. If the gap lived on the
track instead, the seam between set 1 and set 2 would be one gap short and the loop
would visibly jump every cycle. */
padding-bottom: 20px;
}
.sec-10-testimonials [data-marquee-dup] { display: flex; }
.sec-10-testimonials__col[data-dir="up"] .sec-10-testimonials__col-track {
animation: sec-10-marquee-up 54s linear infinite;
}
.sec-10-testimonials__col[data-dir="down"] .sec-10-testimonials__col-track {
animation: sec-10-marquee-down 62s linear infinite;
}
/* Anyone can stop it to actually read a review */
.sec-10-testimonials__wall:hover .sec-10-testimonials__col-track,
.sec-10-testimonials__wall:focus-within .sec-10-testimonials__col-track {
animation-play-state: paused;
}
/* --- Mobile: static grid ---
A narrow screen makes moving text materially harder to read, and the mask would eat a
larger share of a small viewport. Below 820px this reverts to the plain grid: full
height, no mask, no animation, duplicate sets hidden. */
@media (max-width: 820px) {
.sec-10-testimonials__wall {
grid-template-columns: 1fr;
height: auto;
overflow: visible;
-webkit-mask-image: none;
mask-image: none;
}
.sec-10-testimonials__col {
height: auto;
overflow: visible;
display: flex;
flex-direction: column;
gap: var(--sp-gap);
}
.sec-10-testimonials__col-track { animation: none !important; transform: none !important; }
.sec-10-testimonials__col-set { padding-bottom: 0; gap: var(--sp-gap); }
.sec-10-testimonials [data-marquee-dup] { display: none; }
/* Both columns stay visible and simply stack. The columns hold DISJOINT reviews, so
hiding either one drops half of them from every phone. */
/* The mobile column is static, so height is free: stop truncating mid-sentence. */
.sec-10-testimonials__snippet { -webkit-line-clamp: 6; }
}
/* --- Reduced motion: static grid, and the height/mask must go too, or the wall keeps a
fixed tall box with most of its cards masked out and unreachable. --- */
@media (prefers-reduced-motion: reduce) {
.sec-10-testimonials__wall {
height: auto;
overflow: visible;
-webkit-mask-image: none;
mask-image: none;
}
.sec-10-testimonials__col { height: auto; overflow: visible; }
.sec-10-testimonials__col-track { animation: none !important; transform: none !important; }
.sec-10-testimonials__col-set { padding-bottom: 0; }
.sec-10-testimonials [data-marquee-dup] { display: none; }
}
/* core.js also sets html.reduced-motion; mirror it so the toggle works without a reload. */
html.reduced-motion .sec-10-testimonials__wall {
height: auto;
overflow: visible;
-webkit-mask-image: none;
mask-image: none;
}
html.reduced-motion .sec-10-testimonials__col { height: auto; overflow: visible; }
html.reduced-motion .sec-10-testimonials__col-track { animation: none !important; transform: none !important; }
html.reduced-motion .sec-10-testimonials__col-set { padding-bottom: 0; }
html.reduced-motion .sec-10-testimonials [data-marquee-dup] { display: none; }
@keyframes sec-10-marquee-up {
from { transform: translateY(0); }
to { transform: translateY(-50%); }
}
@keyframes sec-10-marquee-down {
from { transform: translateY(-50%); }
to { transform: translateY(0); }
}
.sec-10-testimonials__review {
background: #fbfbf9;
color: var(--text-on-bone);
border-radius: var(--radius-card);
padding: 1.6rem 1.65rem;
box-shadow: var(--shadow-soft);
}
.sec-10-testimonials__review-head {
display: flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 0.5rem;
}
.sec-10-testimonials__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.1rem;
height: 2.1rem;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent-strong);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.9rem;
flex-shrink: 0;
}
.sec-10-testimonials__review-name {
font-weight: 600;
font-size: 0.9rem;
}
.sec-10-testimonials__review .sec-10-testimonials__stars {
color: var(--ember);
font-size: 0.8rem;
margin-bottom: 0.4rem;
}
.sec-10-testimonials__snippet {
font-size: var(--fs-small);
line-height: 1.5;
color: var(--text-on-bone);
margin-bottom: 0.55rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sec-10-testimonials__via {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
color: var(--text-on-bone-dim);
}
/* --- Google lockup --- */
.sec-10-testimonials__lockup {
margin-top: clamp(2rem, 4vw, 3rem);
text-align: center;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1rem 1.5rem;
}
.sec-10-testimonials__lockup-rating {
font-weight: 600;
color: var(--text-on-ink);
}
.sec-10-testimonials__lockup-link {
color: var(--accent);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 200ms var(--ease-out);
}
.sec-10-testimonials__lockup-link:hover {
border-color: currentColor;
}
/* Mobile stacking for the wall lives with the wall rules above, not here: it used to also
carry `.__col--b { display: none }`, which silently dropped half the reviews from every
phone once the two columns held DISJOINT sets. */
/* --- Reduced motion: no auto-slide feel --- */
@media (prefers-reduced-motion: reduce) {
.sec-10-testimonials__slide { transition: opacity 200ms linear; transform: none; }
}
html.reduced-motion .sec-10-testimonials__slide { transition: opacity 200ms linear; transform: none; }
/* ---- css/sections/11-insurance.css ---- */
/* ============================================================
11-insurance — scoped under .sec-11-insurance
============================================================ */
.sec-11-insurance {
position: relative;
background: radial-gradient(120% 85% at 50% 0%, #fbf9f3 0%, var(--bone) 50%, #eee8db 100%);
}
/* Slightly more compact than the default section rhythm */
.sec-11-insurance.section-pad {
padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
}
/* --- Panel pair: horizontal (side-by-side) --- */
.sec-11-insurance__panels {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.5rem, 3vw, 2.5rem);
}
/* Decorative accent blob tucked behind panel 1's corner */
.sec-11-insurance__accent {
position: absolute;
top: -2.5rem;
left: -2.5rem;
width: 200px;
height: 200px;
border-radius: 50%;
background: var(--accent-soft);
filter: blur(36px);
opacity: 0.85;
z-index: 0;
pointer-events: none;
}
.sec-11-insurance__panel {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
padding: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
}
.sec-11-insurance__panel-title {
margin-bottom: 0.6rem;
}
.sec-11-insurance__panel-lead {
color: var(--text-on-bone-dim);
margin-bottom: 1.6rem;
max-width: 40ch;
}
/* --- In Network / Out of Network sub-groups --- */
.sec-11-insurance__group {
margin-bottom: 1.6rem;
}
.sec-11-insurance__group-label {
font-family: var(--font-display);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent-strong);
margin-bottom: 0.7rem;
}
.sec-11-insurance__group .sec-11-insurance__panel-lead {
margin-top: 0.9rem;
margin-bottom: 0;
max-width: none;
}
/* --- Insurance tile grid --- */
.sec-11-insurance__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.9rem;
}
.sec-11-insurance__chip {
border: 1px solid var(--line-bone);
border-radius: var(--radius-card);
padding: 1.1rem 0.75rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 84px;
background: var(--bone);
transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out), background-color 240ms var(--ease-out);
}
.sec-11-insurance__chip:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-soft);
border-color: var(--accent-strong);
background: var(--white);
}
.sec-11-insurance__chip span {
font-family: var(--font-display);
font-variant-caps: all-small-caps;
letter-spacing: 0.04em;
font-weight: 650;
font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
line-height: 1.15;
color: var(--text-on-bone);
}
.sec-11-insurance__footnote {
margin-top: auto;
font-size: var(--fs-small);
color: var(--text-on-bone-dim);
}
.sec-11-insurance__footnote a {
color: var(--accent-strong);
font-weight: 600;
text-decoration: underline;
text-decoration-color: hsl(var(--accent-h) 60% 60% / 0.4);
text-underline-offset: 2px;
}
.sec-11-insurance__footnote a:hover {
text-decoration-color: currentColor;
}
/* --- Paperwork panel --- */
.sec-11-insurance__downloads {
display: flex;
flex-direction: column;
gap: 0.9rem;
margin-bottom: 1.6rem;
}
.sec-11-insurance__download {
justify-content: flex-start;
border-color: var(--line-bone);
color: var(--text-on-bone);
width: 100%;
}
.sec-11-insurance__download:hover {
background: var(--accent-soft);
border-color: var(--accent-strong);
color: var(--accent-strong);
}
.sec-11-insurance__download-icon {
flex-shrink: 0;
}
.sec-11-insurance__reassurance {
margin-top: auto;
font-size: var(--fs-small);
color: var(--text-on-bone-dim);
}
@media (max-width: 860px) {
.sec-11-insurance__panels {
grid-template-columns: 1fr;
}
.sec-11-insurance__accent {
display: none;
}
}
@media (max-width: 480px) {
.sec-11-insurance__grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* --- Free benefits check form (replaces the paperwork panel) --- */
.sec-11-insurance__form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem 1rem;
margin-bottom: 1.1rem;
}
@media (max-width: 560px) {
.sec-11-insurance__form-grid { grid-template-columns: 1fr; }
}
.sec-11-insurance__field { display: flex; flex-direction: column; gap: 0.3rem; }
.sec-11-insurance__field--wide { grid-column: 1 / -1; }
.sec-11-insurance__field span {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.02em;
color: var(--text-on-bone);
}
.sec-11-insurance__field small {
font-family: var(--font-body);
font-weight: 400;
color: var(--text-on-bone-dim);
}
.sec-11-insurance__field input {
width: 100%;
padding: 0.65rem 0.85rem;
border: 1.5px solid var(--line-bone);
border-radius: 12px;
background: var(--bone);
color: var(--text-on-bone);
font-size: 0.95rem;
transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.sec-11-insurance__field input:focus {
outline: none;
border-color: var(--accent-strong);
background: var(--white);
}
.sec-11-insurance__field input.is-invalid { border-color: #d64545; }
.sec-11-insurance__form-error {
margin-bottom: 0.9rem;
font-size: 0.85rem;
color: #b03a3a;
}
.sec-11-insurance__form-error a { color: inherit; font-weight: 600; }
.sec-11-insurance__submit { width: 100%; }
.sec-11-insurance__form-success {
padding: 1.25rem;
border-radius: var(--radius-card);
background: var(--accent-soft);
border: 1.5px solid var(--accent);
}
.sec-11-insurance__form-success:focus { outline: none; }
.sec-11-insurance__success-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.1rem;
color: var(--accent-strong);
margin-bottom: 0.35rem;
}
.sec-11-insurance__success-text {
font-size: 0.92rem;
line-height: 1.55;
color: var(--text-on-bone);
}
/* ---- css/sections/12-booking.css ---- */
/* ============================================================
12-booking — scoped under .sec-12-booking
============================================================ */
.sec-12-booking {
position: relative;
overflow: clip;
}
/* --- Wave divider (extends hero's wave language; FAQ above is --bone) --- */
.sec-12-booking__wave {
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: clamp(32px, 4.5vw, 64px);
pointer-events: none;
z-index: 0;
}
/* --- Drifting radial accent glow behind the form panel --- */
.sec-12-booking__glow {
position: absolute;
top: 8%;
right: 8%;
width: min(52vw, 780px);
height: min(52vw, 780px);
border-radius: 50%;
background: radial-gradient(circle, var(--accent-glow) 0%, transparent 68%);
filter: blur(20px);
opacity: 0.85;
z-index: 0;
animation: sec-12-booking-drift 24s var(--ease-out) infinite alternate;
}
@keyframes sec-12-booking-drift {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(-6%, 6%) scale(1.15); }
}
html.reduced-motion .sec-12-booking__glow { animation: none; }
.sec-12-booking__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: clamp(2.5rem, 5vw, 5rem);
align-items: start;
}
/* --- Left: info column --- */
.sec-12-booking__info {
padding-top: clamp(0.5rem, 2vw, 1.5rem);
}
.sec-12-booking__heading {
margin: 1rem 0 1.1rem;
max-width: 14ch;
}
.sec-12-booking__lead {
max-width: 42ch;
color: var(--text-on-ink-dim);
margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
.sec-12-booking__rows {
display: flex;
flex-direction: column;
gap: 1.1rem;
margin-bottom: 2rem;
}
.sec-12-booking__row {
display: flex;
align-items: flex-start;
gap: 0.85rem;
}
.sec-12-booking__row-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: hsl(0 0% 100% / 0.06);
border: 1px solid hsl(0 0% 100% / 0.1);
color: hsl(var(--accent-h) 70% 65%);
}
.sec-12-booking__row-text {
padding-top: 0.5rem;
font-size: 0.98rem;
}
.sec-12-booking__row-text strong {
color: var(--white);
font-family: var(--font-display);
margin-right: 0.35em;
}
.sec-12-booking__row-link {
display: block;
color: var(--white);
font-family: var(--font-display);
font-weight: 600;
text-decoration: none;
}
.sec-12-booking__row-link:hover { color: hsl(var(--accent-h) 70% 65%); }
.sec-12-booking__row-sub {
display: block;
color: var(--text-on-ink-dim);
font-size: 0.86rem;
}
.sec-12-booking__trust {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--text-on-ink);
}
.sec-12-booking__trust span[aria-hidden] { color: var(--ember); }
/* --- Right: form panel --- */
.sec-12-booking__panel-wrap {
position: relative;
}
/* --- Response-time trust chip, docked to the panel's top edge --- */
.sec-12-booking__chip {
position: absolute;
top: 0;
right: clamp(1.5rem, 4vw, 2.5rem);
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.4rem;
max-width: calc(100% - 3rem);
background: var(--white);
color: var(--text-on-bone);
padding: 0.5rem 1rem;
border-radius: var(--radius-pill);
box-shadow: var(--shadow-soft);
font-family: var(--font-display);
font-weight: 600;
font-size: 0.78rem;
line-height: 1.2;
white-space: nowrap;
}
.sec-12-booking__chip-icon {
flex-shrink: 0;
color: var(--accent);
}
/* Dock the chip half-on/half-off the panel's top border without fighting
the generic [data-reveal] rules (which set transform to none/28px). */
.sec-12-booking__chip[data-reveal] {
transform: translateY(calc(-50% + 18px));
}
.sec-12-booking__chip[data-reveal].is-visible {
transform: translateY(-50%);
}
html.reduced-motion .sec-12-booking__chip[data-reveal] {
transform: translateY(-50%);
}
.sec-12-booking__panel {
position: relative;
background: linear-gradient(160deg, hsl(190 28% 13% / 0.92), hsl(190 30% 8% / 0.92));
border: 1px solid hsl(0 0% 100% / 0.09);
border-radius: var(--radius-lg);
padding: clamp(1.75rem, 3vw, 2.75rem);
box-shadow: var(--shadow-lift), 0 0 0 1px hsl(var(--accent-h) 70% 55% / 0.08) inset, 0 0 70px hsl(var(--accent-h) 70% 40% / 0.12);
backdrop-filter: blur(18px);
overflow: hidden;
}
@keyframes sec-12-booking-shake {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
30%, 50%, 70% { transform: translateX(-5px); }
40%, 60% { transform: translateX(5px); }
}
.sec-12-booking__panel.has-error { animation: sec-12-booking-shake 420ms var(--ease-out); }
html.reduced-motion .sec-12-booking__panel.has-error { animation: none; }
/* --- Progress --- */
.sec-12-booking__progress {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.sec-12-booking__progress-text {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-on-ink-dim);
}
.sec-12-booking__dots {
display: flex;
gap: 0.4rem;
}
.sec-12-booking__dot {
width: 1.6rem;
height: 5px;
border-radius: var(--radius-pill);
background: hsl(0 0% 100% / 0.14);
transition: background 300ms var(--ease-out);
}
.sec-12-booking__dot.is-active { background: var(--accent); }
.sec-12-booking__dot.is-complete { background: hsl(var(--accent-h) 70% 55% / 0.65); }
html.reduced-motion .sec-12-booking__dot { transition: none; }
/* --- Honeypot --- */
.sec-12-booking__hp { position: absolute; left: -9999px; }
/* --- Steps --- */
.sec-12-booking__steps {
min-height: 9.5rem;
}
.sec-12-booking__step {
transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out);
}
.sec-12-booking__step[hidden] { display: none; }
.sec-12-booking__step.is-leaving-fwd { transform: translateX(-26px); opacity: 0; }
.sec-12-booking__step.is-leaving-back { transform: translateX(26px); opacity: 0; }
.sec-12-booking__step.is-entering-fwd { transform: translateX(26px); opacity: 0; }
.sec-12-booking__step.is-entering-back { transform: translateX(-26px); opacity: 0; }
html.reduced-motion .sec-12-booking__step {
transition: none !important;
transform: none !important;
}
.sec-12-booking__question {
display: block;
font-family: var(--font-display);
font-size: var(--fs-h4);
color: var(--white);
margin-bottom: 1rem;
}
.sec-12-booking__input {
width: 100%;
background: hsl(0 0% 100% / 0.05);
border: 1.5px solid hsl(0 0% 100% / 0.16);
border-radius: 14px;
padding: 0.9rem 1.1rem;
color: var(--white);
font-size: 1.05rem;
transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.sec-12-booking__input::placeholder { color: hsl(190 15% 62%); }
.sec-12-booking__input:focus {
outline: none;
border-color: var(--accent);
background: hsl(0 0% 100% / 0.08);
}
.sec-12-booking__input.is-invalid {
border-color: #ff7b6b;
}
.sec-12-booking__input--textarea {
resize: vertical;
min-height: 5rem;
font-family: var(--font-body);
}
.sec-12-booking__hint {
margin-top: 0.6rem;
font-size: 0.85rem;
color: var(--text-on-ink-dim);
}
.sec-12-booking__error {
margin-top: 0.5rem;
min-height: 1.1rem;
font-size: 0.85rem;
font-weight: 600;
color: #ff7b6b;
}
/* --- Step 5: summary --- */
.sec-12-booking__summary {
display: flex;
flex-direction: column;
gap: 0.65rem;
margin-bottom: 1.5rem;
}
.sec-12-booking__summary-row {
display: grid;
grid-template-columns: 5.5rem 1fr auto;
align-items: baseline;
gap: 0.75rem;
padding: 0.6rem 0;
border-bottom: 1px solid hsl(0 0% 100% / 0.08);
}
.sec-12-booking__summary-label {
font-size: 0.78rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-on-ink-dim);
}
.sec-12-booking__summary-value {
color: var(--white);
font-weight: 500;
overflow-wrap: anywhere;
}
.sec-12-booking__edit {
background: none;
border: none;
padding: 0.2rem 0.3rem;
color: hsl(var(--accent-h) 70% 65%);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.sec-12-booking__edit:hover { color: var(--white); }
.sec-12-booking__consent {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.78rem;
line-height: 1.5;
color: var(--text-on-ink-dim);
margin-bottom: 1.5rem;
cursor: pointer;
}
/* A2P consent checkbox: name="sms-consent" must never be removed (launch check) */
.sec-12-booking__consent-box {
flex-shrink: 0;
width: 1.05rem;
height: 1.05rem;
margin-top: 0.15rem;
accent-color: var(--accent);
cursor: pointer;
}
.sec-12-booking__submit { width: 100%; }
/* --- Nav row --- */
.sec-12-booking__nav {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1.25rem;
margin-top: clamp(1.5rem, 3vw, 2rem);
}
.sec-12-booking__back {
background: none;
border: none;
color: var(--text-on-ink-dim);
font-family: var(--font-display);
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
padding: 0.5rem 0.25rem;
margin-right: auto;
transition: color 200ms var(--ease-out);
}
.sec-12-booking__back:hover { color: var(--white); }
.sec-12-booking__back[hidden] { display: none; }
/* Step 5 has its own full-width submit button; JS hides the shared continue nav button on that step */
.sec-12-booking__continue[hidden] { display: none; }
/* --- Success state --- */
.sec-12-booking__success {
position: relative;
text-align: center;
padding: clamp(1rem, 3vw, 2rem) 0;
overflow: hidden;
}
.sec-12-booking__success[hidden] { display: none; }
.sec-12-booking__success-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
/* --- Confetti micro-burst (generated by JS, removed after ~1.4s) --- */
.sec-12-booking__confetti {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 2;
}
.sec-12-booking__confetti-piece {
position: absolute;
top: -12px;
width: 6px;
height: 10px;
border-radius: 2px;
opacity: 1;
animation: sec-12-booking-confetti-fall var(--fall-dur, 1.1s) ease-in var(--fall-delay, 0s) forwards;
}
@keyframes sec-12-booking-confetti-fall {
0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
80% { opacity: 1; }
100% { transform: translate(var(--fall-x, 0), 160px) rotate(var(--fall-rot, 260deg)); opacity: 0; }
}
html.reduced-motion .sec-12-booking__confetti { display: none; }
.sec-12-booking__check {
color: var(--accent);
margin: 0 auto 1.25rem;
}
.sec-12-booking__check-circle {
stroke-dasharray: 232;
stroke-dashoffset: 232;
animation: sec-12-booking-draw 700ms var(--ease-out) forwards;
}
.sec-12-booking__check-mark {
stroke-dasharray: 64;
stroke-dashoffset: 64;
animation: sec-12-booking-draw 480ms var(--ease-out) 620ms forwards;
}
@keyframes sec-12-booking-draw {
to { stroke-dashoffset: 0; }
}
html.reduced-motion .sec-12-booking__check-circle,
html.reduced-motion .sec-12-booking__check-mark {
animation: none;
stroke-dashoffset: 0;
}
.sec-12-booking__success-heading {
color: var(--white);
margin-bottom: 0.6rem;
}
.sec-12-booking__success-text {
color: var(--text-on-ink-dim);
max-width: 32ch;
margin: 0 auto 1.5rem;
}
/* --- Mobile: single column, info condensed above panel --- */
@media (max-width: 900px) {
.sec-12-booking__inner {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.sec-12-booking__heading { max-width: 100%; }
.sec-12-booking__lead { max-width: 100%; }
.sec-12-booking__rows { margin-bottom: 1.5rem; }
.sec-12-booking__glow { width: 90vw; height: 90vw; top: 0; right: -20%; }
}
@media (max-width: 560px) {
.sec-12-booking__panel { padding: 1.5rem; }
.sec-12-booking__summary-row {
grid-template-columns: 1fr auto;
}
.sec-12-booking__summary-label { grid-column: 1 / -1; }
}
/* Below 480px the pill has no room to overlap the panel corner cleanly —
drop it into normal flow, stacked above the panel. */
@media (max-width: 480px) {
.sec-12-booking__panel-wrap {
display: flex;
flex-direction: column;
align-items: center;
}
.sec-12-booking__chip {
position: static;
max-width: 100%;
white-space: normal;
text-align: center;
margin-bottom: 1rem;
}
.sec-12-booking__chip[data-reveal],
.sec-12-booking__chip[data-reveal].is-visible,
html.reduced-motion .sec-12-booking__chip[data-reveal] {
transform: none;
}
}
/* Each step is a