/* ============================================================
Revive O3 — Design System
Aesthetic: Soft Clinical Premium — functional medicine studio
Fonts: DM Serif Display (display) + Outfit (body)
============================================================ */
/* Fonts loaded via tags in each page's — see partial below.
Kept out of CSS @import, which is render-blocking and serializes the
font fetch behind this stylesheet instead of loading it in parallel. */
/* ── Reset ── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* wrappers (added for WebP sources) shouldn't generate their own box —
without this, the wrapper can size/position differently than the img it contains,
breaking percentage-based sizing and flex centering on the image inside. */
picture {
display: contents;
}
/* ── Tokens ── */
:root {
--air-white: #f8fafa;
--mist: #eaf4f4;
--mist-dark: #d4ecec;
--aqua-light: #b2dada;
--aqua-mid: #4da8a8;
--teal-deep: #1d6f72;
--teal-hover: #155759;
--charcoal: #1e2d2f;
--text: #2c3e3f;
--text-muted: #5a7070;
--text-light: #8aa3a3;
--border: #d0e8e8;
--shadow-sm: 0 2px 8px rgba(29,111,114,0.08);
--shadow-md: 0 6px 24px rgba(29,111,114,0.12);
--shadow-lg: 0 16px 48px rgba(29,111,114,0.14);
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-pill: 999px;
--transition: 0.22s ease;
--container: 1120px;
--font-display: 'DM Serif Display', Georgia, serif;
--font-body: 'Outfit', sans-serif;
}
/* ── Base ── */
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-weight: 400;
color: var(--text);
background: var(--air-white);
line-height: 1.7;
overflow-x: hidden;
}
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
ul { list-style: none; }
/* ── Layout ── */
.container {
width: min(var(--container), 100% - 2rem);
margin-inline: auto;
}
.section {
padding-block: clamp(4rem, 8vw, 7rem);
}
.section--mist {
background: var(--mist);
}
.section--charcoal {
background: var(--charcoal);
color: var(--air-white);
}
/* ── Typography ── */
h1, h2, h3, h4 {
font-family: var(--font-display);
line-height: 1.2;
letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); }
h4 { font-size: 1.15rem; }
.eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--aqua-mid);
margin-bottom: 0.75rem;
}
.section-intro {
max-width: 56ch;
color: var(--text-muted);
font-size: 1.05rem;
margin-top: 0.75rem;
}
.section-header {
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* ── Buttons ── */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 600;
padding: 0.85rem 1.75rem;
border-radius: var(--radius-pill);
border: 2px solid transparent;
cursor: pointer;
transition: background var(--transition), color var(--transition),
transform var(--transition), box-shadow var(--transition);
white-space: nowrap;
text-decoration: none;
}
.btn:focus-visible {
outline: 3px solid var(--aqua-mid);
outline-offset: 3px;
}
.btn--primary {
background: var(--teal-deep);
color: #fff;
box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
background: var(--teal-hover);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn--outline {
background: transparent;
color: var(--teal-deep);
border-color: var(--teal-deep);
}
.btn--outline:hover {
background: var(--teal-deep);
color: #fff;
transform: translateY(-2px);
}
.btn--ghost {
background: rgba(255,255,255,0.12);
color: #fff;
border-color: rgba(255,255,255,0.35);
}
.btn--ghost:hover {
background: rgba(255,255,255,0.22);
transform: translateY(-2px);
}
.btn--sm {
font-size: 0.875rem;
padding: 0.6rem 1.25rem;
}
.btn-group {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
/* ── Navigation ── */
.site-nav {
position: sticky;
top: 0;
z-index: 900;
background: rgba(248,250,250,0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.site-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 116px;
gap: 2rem;
}
/* Header logo image */
.site-nav__logo-img {
height: 100px;
width: auto;
display: block;
flex-shrink: 0;
}
/* Text logo — used in footer only (nav uses image) */
.site-nav__logo {
font-family: var(--font-display);
font-size: 1.45rem;
color: var(--teal-deep);
letter-spacing: -0.02em;
flex-shrink: 0;
}
/* In the nav bar, hide text logo if image is present */
.site-nav .site-nav__logo { display: none; }
/* ── O3 brand mark — O larger throughout, always matches surrounding text color ── */
.brand-o {
font-size: 1.18em;
font-weight: inherit;
color: inherit;
}
.brand-mark {
font-family: var(--font-display);
color: var(--teal-deep);
white-space: nowrap;
}
.brand-mark .brand-o {
font-size: 1.15em;
}
.brand-3 {
font-size: 0.72em;
vertical-align: sub;
font-family: var(--font-body);
font-weight: 600;
letter-spacing: 0;
}
.btn .brand-o {
font-size: inherit;
vertical-align: baseline;
letter-spacing: 0;
}
.btn .brand-3 {
font-size: 0.8em;
vertical-align: -0.12em;
letter-spacing: 0;
}
.site-nav__links {
display: flex;
gap: 2rem;
align-items: center;
}
.site-nav__links a {
font-size: 0.9rem;
font-weight: 500;
color: var(--text-muted);
transition: color var(--transition);
position: relative;
}
.site-nav__links a::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 0;
height: 2px;
background: var(--aqua-mid);
transition: width var(--transition);
border-radius: 2px;
}
.site-nav__links a:hover { color: var(--teal-deep); }
.site-nav__links a:hover::after { width: 100%; }
.site-nav__links a[aria-current="page"] { color: var(--teal-deep); }
.site-nav__links a[aria-current="page"]::after { width: 100%; }
.nav-cta {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 0.75rem;
}
/* Between the 768px mobile cutoff and ~900px, the full nav (links + two
CTA buttons) is too wide for the header — drop the "ReviveO3" prefix
on the portal link so it reads as just "Patient Portal". */
@media (min-width: 769px) and (max-width: 900px) {
.nav-portal-link__brand { display: none; }
}
/* Mobile hamburger */
.nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0.25rem;
color: var(--teal-deep);
}
.nav-toggle svg { display: block; }
/* ── Dragonfly motif (hero flight + scroll-triggered landings) ── */
.dragonfly {
width: 58px;
height: auto;
overflow: visible;
pointer-events: none;
}
.dragonfly__wing {
fill: rgba(178,218,218,0.55);
stroke: var(--aqua-mid);
stroke-width: 1.5;
}
.dragonfly__body {
fill: var(--teal-deep);
}
/* Each wing hinges at its OWN attachment point (not a shared body-centerline
pivot) so it folds toward the body instead of appearing to slide off it. */
.dragonfly__wing-flap--bl { transform-origin: 63px 41px; }
.dragonfly__wing-flap--br { transform-origin: 57px 41px; }
.dragonfly__wing-flap--fl { transform-origin: 61px 34px; }
.dragonfly__wing-flap--fr { transform-origin: 59px 34px; }
.dragonfly__vein {
stroke: var(--teal-deep);
stroke-width: 0.6;
opacity: 0.45;
}
.dragonfly__segment {
stroke: var(--mist);
stroke-width: 1;
opacity: 0.55;
}
@keyframes dragonfly-flap {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(0.32); }
}
.dragonfly__wing-flap {
animation: dragonfly-flap 1.7s ease-in-out infinite;
}
.dragonfly__wing-flap--fl,
.dragonfly__wing-flap--fr {
animation-delay: 0.08s;
}
/* Faster flutter while actually in flight; slows once landed */
.dragonfly--flying .dragonfly__wing-flap {
animation-duration: 0.16s;
}
.dragonfly--flying .dragonfly__wing-flap--fl,
.dragonfly--flying .dragonfly__wing-flap--fr {
animation-delay: 0.04s;
}
/* Scroll-triggered section dragonflies: fly in from off-position and land once */
.section-dragonfly {
position: absolute;
opacity: 0;
transform: translate(-40px, -18px) rotate(-10deg) scale(0.7);
}
.section-dragonfly.dragonfly--fly-in {
animation: dragonfly-land 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes dragonfly-land {
0% { opacity: 0; transform: translate(-40px, -18px) rotate(-10deg) scale(0.7); }
55% { opacity: 1; transform: translate(6px, 4px) rotate(4deg) scale(1.05); }
75% { opacity: 1; transform: translate(-3px, -2px) rotate(-2deg) scale(0.98); }
100% { opacity: 1; transform: translate(0, 0) rotate(var(--land-rotate, 0deg)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.section-dragonfly { display: none; }
}
/* ── Hero ── */
.hero {
position: relative;
overflow: hidden;
padding-block: clamp(5rem, 12vw, 9rem);
background: var(--air-white);
}
/* Shore-inspired atmospheric hero background */
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 70% at 68% 38%, rgba(77,168,168,0.22) 0%, transparent 60%),
radial-gradient(ellipse 55% 55% at 18% 75%, rgba(178,218,218,0.18) 0%, transparent 55%),
radial-gradient(ellipse 100% 40% at 50% 100%, rgba(224, 200, 150, 0.13) 0%, transparent 60%),
linear-gradient(170deg, rgba(232,248,248,0.6) 0%, rgba(248,240,220,0.18) 100%);
pointer-events: none;
}
.hero__bg-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 6%;
z-index: 0;
}
/* Desktop serves a separate wide (3200x1200) crop of this photo — see the
markup — sized so object-fit:cover shows the full lighthouse
and full runners edge-to-edge at typical desktop widths, no letterbox
workaround needed. */
@media (min-width: 769px) {
.hero__bg-photo {
object-position: center 20%;
}
}
.hero__scrim {
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(248,250,250,0.5) 0%, rgba(248,250,250,0.42) 40%, rgba(248,250,250,0.26) 65%, rgba(248,240,220,0.12) 100%);
z-index: 0;
}
.hero .container {
position: relative;
z-index: 1;
}
.hero__inner {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
max-width: 700px;
}
.hero__eyebrow {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--aqua-mid);
}
.hero h1 {
position: relative;
margin-top: 0.5rem;
color: var(--charcoal);
}
.hero h1 em {
font-style: italic;
color: var(--teal-deep);
}
.hero__sub {
position: relative;
z-index: 0;
font-size: clamp(1rem, 2vw, 1.15rem);
color: var(--text);
max-width: 56ch;
margin: -1.5rem 0 0 -3.5rem;
padding: 2.5rem 3.5rem;
}
/* Same closest-side wash as before, just on a bigger box (extended past
the text's own edges via inset) so it reaches further left/right —
and far enough vertically that the top and bottom lines don't sit
right at the gradient's own edge (that's what was making only the
center line read as washed: closest-side's vertical radius was
exactly the text's own half-height, so the first/last lines landed
exactly on the 100%-transparent stop). */
.hero__sub::before {
content: '';
position: absolute;
inset: -9rem -6rem;
z-index: -1;
pointer-events: none;
background: radial-gradient(ellipse closest-side at center, rgba(248,250,250,0.85) 0%, rgba(248,250,250,0.5) 40%, transparent 100%);
}
/* Header already surfaces this on desktop; only needed as its own element
on mobile where the nav CTA is hidden. */
.hero__portal-link {
display: none;
}
.hero__ctas {
margin-top: 0.25rem;
}
/* ── Trust Bar ── */
.trust-bar {
padding-block: 2rem;
background: var(--mist);
border-block: 1px solid var(--border);
}
.trust-bar__grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem 3rem;
}
.trust-chip {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--teal-deep);
letter-spacing: 0.03em;
}
.trust-chip svg {
flex-shrink: 0;
color: var(--aqua-mid);
}
/* ── Cards ── */
.card {
background: #fff;
border-radius: var(--radius-md);
border: 1px solid var(--border);
padding: 2rem;
box-shadow: var(--shadow-sm);
transition: transform var(--transition), box-shadow var(--transition);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.card__icon {
width: 52px;
height: 52px;
border-radius: var(--radius-sm);
background: var(--mist);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
color: var(--teal-deep);
}
.card h3 { margin-bottom: 0.5rem; }
.card p {
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.65;
}
.card .card-cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 1.25rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--teal-deep);
transition: gap var(--transition);
}
.card .card-cta:hover { gap: 0.7rem; }
.card--bio {
display: grid;
grid-template-columns: 300px 1fr;
gap: 2.5rem;
align-items: start;
text-align: left;
}
.card--bio-reverse { grid-template-columns: 1fr 300px; }
.card--bio-reverse .card--bio__photo { order: 2; }
.card--bio__photo {
border-radius: var(--radius-md);
overflow: hidden;
background: transparent;
border: 0;
height: auto;
}
.card--bio__photo img {
display: block;
width: 100%;
height: auto;
}
/* Grid layouts */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
/* ── Services Grid ── */
.services-grid {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
justify-content: center;
}
.services-grid > * {
flex: 0 1 calc(33.333% - 1rem);
min-width: 260px;
}
/* ── Why Choose ── */
.why-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 2rem;
margin-top: 0.5rem;
}
.why-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.75rem;
}
.why-item__icon {
flex-shrink: 0;
width: 44px;
height: 44px;
background: var(--mist);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--teal-deep);
}
.why-item h4 { margin-bottom: 0.25rem; color: var(--charcoal); }
.why-item p { font-size: 0.9rem; color: var(--text-muted); }
/* ── How It Works ── */
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2rem;
position: relative;
}
.step {
text-align: center;
padding: 2rem 1.5rem;
}
.step__num {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--teal-deep);
color: #fff;
font-family: var(--font-display);
font-size: 1.4rem;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.25rem;
}
.step h3 { margin-bottom: 0.5rem; }
.step p { font-size: 0.95rem; color: var(--text-muted); }
/* ── Root-Cause Philosophy Section ── */
.philosophy-section {
background: var(--charcoal);
color: var(--air-white);
padding-block: clamp(4rem, 8vw, 6rem);
position: relative;
overflow: hidden;
}
.philosophy-section::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(77,168,168,0.08) 0%, transparent 70%);
pointer-events: none;
}
/* Mortar-and-pestle accent — fills the section edge to edge (now sourced from a
1071x1080 frame extracted from the source video, not the old 474x478 photo,
so it holds up at full-bleed without softening). Biased toward the pestle/
bowl (60% horizontal) rather than dead center. Grayscale + a fade on all four
sides (two intersecting masks) keep it from ever showing a hard edge or
competing with the copy up close. */
.philosophy-section__accent {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 60% center;
opacity: 0.4;
filter: grayscale(30%) brightness(0.9);
mask-image:
linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
mask-composite: intersect;
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
-webkit-mask-composite: source-in;
z-index: 0;
pointer-events: none;
}
/* Desktop: this section is wide/short, so width is what's forcing the crop
(cover needs to scale up to cover the width, cropping height in the process).
A slight inset needs less scale, showing more of the image's height —
the side mask already fades to charcoal well before this new edge, so it
still reads as a diffused blend, not a hard-edged gap. */
@media (min-width: 769px) {
.philosophy-section__accent {
left: 4%;
width: 92%;
}
}
.philosophy-section .eyebrow { color: var(--aqua-light); }
.philosophy-section h2 { color: #fff; }
.philosophy-section .section-intro { color: rgba(255,255,255,0.65); }
.philosophy-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 2.5rem;
margin-top: 1rem;
}
.philosophy-item {
text-align: center;
padding: 1.5rem;
border: 1px solid rgba(77,168,168,0.20);
border-radius: var(--radius-md);
background: rgba(255,255,255,0.03);
}
.philosophy-item__num {
font-family: var(--font-display);
font-size: 3rem;
color: var(--aqua-mid);
opacity: 0.5;
line-height: 1;
margin-bottom: 0.75rem;
display: inline-block;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.philosophy-item:hover .philosophy-item__num {
transform: scale(1.15);
opacity: 1;
}
.philosophy-item h3 {
color: #fff;
font-size: 1.3rem;
margin-bottom: 0.75rem;
}
.philosophy-item p {
color: rgba(255,255,255,0.6);
font-size: 0.9rem;
line-height: 1.7;
}
/* ── Icon Grid (Vidaful-style service overview) ── */
.icon-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
}
.icon-card {
flex: 0 1 200px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 2rem 1.5rem;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
transition: transform var(--transition), box-shadow var(--transition);
text-decoration: none;
color: inherit;
}
.icon-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.icon-card__icon {
width: 84px;
height: 84px;
border-radius: 50%;
background: var(--mist);
display: flex;
align-items: center;
justify-content: center;
color: var(--teal-deep);
margin-bottom: 1rem;
transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.icon-card:hover .icon-card__icon {
transform: scale(1.15);
background: var(--teal-deep);
color: #fff;
}
.icon-card h3 {
font-size: 1rem;
color: var(--charcoal);
margin-bottom: 0.4rem;
}
.icon-card p {
font-size: 0.8rem;
color: var(--text-muted);
line-height: 1.55;
}
/* ── Shore Community Section ── */
.shore-section {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, rgba(234,244,244,0.9) 0%, rgba(248,240,220,0.5) 100%);
padding-block: clamp(4rem, 7vw, 6rem);
}
.shore-section__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
z-index: 0;
}
.shore-section__scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(234,244,244,0.93) 0%, rgba(248,240,220,0.78) 45%, rgba(234,244,244,0.6) 100%);
z-index: 1;
}
.shore-section::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,40 C200,80 400,0 600,40 C800,80 1000,0 1200,40 L1200,80 L0,80 Z' fill='rgba(234,244,244,0.6)'/%3E%3C/svg%3E") no-repeat bottom;
background-size: cover;
pointer-events: none;
z-index: 2;
}
.shore-section .container {
position: relative;
z-index: 3;
}
.shore-tags {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1.5rem;
justify-content: center;
}
/* ── David's Dream Affiliation Band ── */
.davids-dream-band {
background: #fff;
border-block: 1px solid var(--border);
padding-block: 2.25rem;
text-align: center;
position: relative;
z-index: 2;
}
.davids-dream-band__inner {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.davids-dream-band img {
height: 60px;
width: auto;
border-radius: var(--radius-sm);
}
.davids-dream-band p {
font-size: 0.9rem;
color: var(--text);
max-width: 42ch;
line-height: 1.6;
text-align: left;
}
.davids-dream-band a {
color: var(--teal-deep);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(29,111,114,0.3);
transition: text-decoration-color var(--transition);
}
.davids-dream-band a:hover {
text-decoration-color: var(--teal-deep);
}
/* ── Privacy Callout ── */
.privacy-callout {
background: var(--charcoal);
border-radius: var(--radius-lg);
padding: clamp(2.5rem, 5vw, 4rem);
display: flex;
flex-wrap: wrap;
gap: 2rem;
align-items: center;
justify-content: space-between;
}
.privacy-callout h2 { color: var(--air-white); }
.privacy-callout p {
color: rgba(255,255,255,0.65);
font-size: 0.95rem;
margin-top: 0.5rem;
max-width: 48ch;
}
/* ── Reviews Placeholder ── */
.reviews-section {
text-align: center;
}
.reviews-stars {
display: flex;
justify-content: center;
gap: 0.3rem;
margin-block: 1.25rem;
color: #d4a017;
font-size: 1.5rem;
}
.testimonial-featured {
max-width: 720px;
margin: 0 auto 2.5rem;
text-align: center;
background: linear-gradient(135deg, var(--mist) 0%, var(--air-white) 100%);
border: 1px solid var(--aqua-mid);
border-radius: var(--radius-lg);
padding: clamp(2rem, 5vw, 3rem);
box-shadow: var(--shadow-md);
}
.testimonial-featured .reviews-stars { justify-content: center; color: #d4a017; }
.testimonial-featured__badge {
display: inline-block;
background: var(--teal-deep);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.35rem 0.85rem;
border-radius: var(--radius-pill);
margin-bottom: 0.5rem;
}
.testimonial-featured__quote {
font-family: var(--font-display);
font-size: clamp(1.15rem, 2.5vw, 1.4rem);
line-height: 1.5;
color: var(--charcoal);
font-style: italic;
}
.testimonial-featured__name {
margin-top: 1.5rem;
font-weight: 700;
color: var(--charcoal);
font-size: 1rem;
}
.testimonial-featured__name span {
color: var(--text-light);
font-weight: 400;
}
.reviews-note {
color: var(--text-muted);
font-size: 0.9rem;
font-style: italic;
margin-top: 0.5rem;
}
/* ── Location / Map ── */
.map-placeholder {
width: 100%;
height: 320px;
background: var(--mist-dark);
border-radius: var(--radius-md);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 0.9rem;
margin-top: 2rem;
overflow: hidden;
}
.map-placeholder iframe {
width: 100%;
height: 100%;
border: 0;
}
.service-areas {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.5rem;
justify-content: center;
}
.area-tag {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
padding: 0.45rem 1rem;
font-size: 0.85rem;
font-weight: 500;
color: var(--teal-deep);
}
.area-tag-group--recovery {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
/* ── CareCredit featured panel ── */
.carecredit-panel {
max-width: 640px;
margin: 0 auto;
text-align: center;
background: linear-gradient(135deg, var(--mist) 0%, var(--air-white) 100%);
border: 1px solid var(--aqua-mid);
border-radius: var(--radius-lg);
padding: clamp(2.5rem, 6vw, 3.5rem);
box-shadow: var(--shadow-md);
}
.carecredit-panel__logo {
height: clamp(58px, 8vw, 92px);
width: auto;
display: block;
margin: 0 auto 1.5rem;
}
.carecredit-panel p {
color: var(--text-muted);
margin-top: 0.75rem;
line-height: 1.7;
}
.softwave-panel {
max-width: 880px;
margin: 0 auto;
text-align: center;
background: linear-gradient(135deg, var(--mist) 0%, var(--air-white) 100%);
border: 1px solid var(--aqua-mid);
border-radius: var(--radius-lg);
padding: clamp(2.5rem, 6vw, 3.5rem);
box-shadow: var(--shadow-md);
}
.softwave-panel__logo {
height: clamp(70px, 10vw, 112px);
width: auto;
display: block;
margin: 0 auto 1.5rem;
}
.softwave-panel p {
color: var(--text-muted);
margin-top: 0.75rem;
line-height: 1.7;
}
.softwave-panel__leagues {
position: relative;
overflow: hidden;
margin-top: 1.75rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
}
/* Edge fade via static overlay layers rather than mask-image — masking an
ancestor of a constantly-transforming element forces the browser to
re-composite every frame instead of just translating a GPU layer, which
is what was making the scroll look choppy. */
.softwave-panel__leagues::before,
.softwave-panel__leagues::after {
content: '';
position: absolute;
top: 1.5rem;
bottom: 0;
width: 56px;
z-index: 1;
pointer-events: none;
}
.softwave-panel__leagues::before {
left: 0;
background: linear-gradient(90deg, var(--mist) 0%, rgba(234,244,244,0) 100%);
}
.softwave-panel__leagues::after {
right: 0;
background: linear-gradient(270deg, var(--air-white) 0%, rgba(248,250,250,0) 100%);
}
.softwave-panel__leagues-track {
display: flex;
align-items: center;
width: max-content;
animation: softwave-leagues-scroll 75s linear infinite;
will-change: transform;
backface-visibility: hidden;
}
@keyframes softwave-leagues-scroll {
from { transform: translateX(0) translateZ(0); }
to { transform: translateX(-50%) translateZ(0); }
}
.softwave-panel__leagues span {
flex-shrink: 0;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--teal-deep);
text-transform: uppercase;
white-space: nowrap;
}
.softwave-panel__leagues span::after {
content: '•';
margin: 0 1.25rem;
color: var(--aqua-light);
font-weight: 400;
}
@media (prefers-reduced-motion: reduce) {
.softwave-panel__leagues-track { animation: none; }
}
.softwave-panel__veteran {
margin-top: 1.75rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
}
/* ── Final CTA Banner ── */
.cta-banner {
background: linear-gradient(135deg, var(--teal-deep) 0%, #155253 100%);
padding-block: clamp(4rem, 7vw, 6rem);
text-align: center;
position: relative;
overflow: hidden;
}
.cta-banner::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(77,168,168,0.25) 0%, transparent 65%);
pointer-events: none;
}
.cta-banner h2 { color: #fff; position: relative; }
.cta-banner p { color: rgba(255,255,255,0.7); position: relative; margin-top: 0.75rem; font-size: 1.05rem; }
.cta-banner .btn-group { justify-content: center; margin-top: 2rem; position: relative; }
/* ── Footer ── */
.site-footer {
background: var(--charcoal);
color: rgba(255,255,255,0.65);
padding-block: 3.5rem 2rem;
font-size: 0.875rem;
}
.site-footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
column-gap: 3rem;
row-gap: 0.75rem;
margin-bottom: 3rem;
}
.footer-brand__icon {
height: 120px;
width: auto;
display: block;
margin-bottom: 0.85rem;
margin-left: -10px;
background: #fff;
border-radius: 50%;
padding: 10px;
}
.footer-brand .site-nav__logo {
display: block;
margin-bottom: 0.75rem;
/* .site-nav__logo's base color (teal-deep) is meant for a light background;
this is the only place the text logo actually renders, so it needs its own
light-on-charcoal color here for the brand-o/brand-3 inherit rule to work. */
color: rgba(255,255,255,0.92);
}
.footer-brand p {
line-height: 1.65;
max-width: 32ch;
}
.site-footer h4 {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
margin-bottom: 1rem;
}
.footer-links li + li { margin-top: 0.6rem; }
.footer-links a { transition: color var(--transition); }
.footer-links a:hover { color: var(--aqua-light); }
/* Patient portal link needs to stand out from the plain-text contact links
around it, so it gets pill/badge treatment instead of matching them. */
.footer-portal-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: var(--teal-deep);
color: #fff;
font-weight: 600;
font-size: 0.8rem;
padding: 0.5rem 1rem;
border-radius: var(--radius-pill);
margin-top: 0.35rem;
width: fit-content;
transition: background var(--transition), transform var(--transition);
}
.footer-portal-link:hover {
background: var(--aqua-mid);
transform: translateY(-1px);
}
.footer-partner {
display: flex;
margin-top: 1.25rem;
}
.footer-partner a {
display: inline-block;
background: var(--teal-deep);
border-radius: 10px;
padding: 10px 16px;
transition: transform var(--transition);
}
.footer-partner a:hover {
transform: translateY(-2px);
}
.site-footer__bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 1.5rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: space-between;
align-items: center;
}
.footer-legal {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
}
.footer-legal a { transition: color var(--transition); }
.footer-legal a:hover { color: var(--aqua-light); }
/* ── Sticky Mobile Bar ── */
.mobile-bar {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 850;
background: var(--charcoal);
border-top: 1px solid rgba(255,255,255,0.1);
padding: 0.65rem 1.25rem;
padding-bottom: max(0.65rem, env(safe-area-inset-bottom));
}
.mobile-bar__inner {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
width: 100%;
}
/* ── Desktop sticky bar ── */
.desktop-bar {
display: none;
position: fixed;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 850;
background: rgba(30, 45, 47, 0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(77,168,168,0.25);
border-radius: var(--radius-pill);
padding: 0.5rem 0.75rem;
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
transform: translateX(-50%) translateY(8px);
}
.desktop-bar.visible {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.desktop-bar__inner {
display: flex;
align-items: center;
gap: 0.5rem;
}
.desktop-bar .btn {
padding: 0.55rem 1.1rem;
font-size: 0.82rem;
}
.desktop-bar__menu {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: var(--radius-pill);
padding: 0.55rem 1.1rem;
cursor: pointer;
color: rgba(255,255,255,0.8);
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.82rem;
font-weight: 600;
font-family: var(--font-body);
transition: background var(--transition), color var(--transition);
}
.desktop-bar__menu:hover {
background: rgba(255,255,255,0.18);
color: #fff;
}
@media (min-width: 769px) {
.desktop-bar { display: flex; }
}
.mobile-bar .btn {
flex: 0 1 130px;
justify-content: center;
padding: 0.75rem 1rem;
font-size: 0.875rem;
}
/* Mobile nav overlay — slides up when Menu tapped */
.mobile-nav-overlay {
display: block;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 840;
background: var(--charcoal);
border-top: 1px solid rgba(255,255,255,0.12);
border-radius: 20px 20px 0 0;
padding: 1.5rem 1.5rem 7rem;
transform: translateY(100%);
transition: transform 0.28s cubic-bezier(0.32, 0, 0.67, 0);
}
.mobile-nav-overlay.open {
transform: translateY(0);
}
.mobile-nav-overlay__handle {
width: 36px;
height: 4px;
background: rgba(255,255,255,0.2);
border-radius: 2px;
margin: 0 auto 1.5rem;
}
.mobile-nav-overlay nav a {
display: block;
padding: 0.9rem 0;
font-size: 1.1rem;
font-weight: 600;
color: rgba(255,255,255,0.75);
border-bottom: 1px solid rgba(255,255,255,0.08);
text-decoration: none;
transition: color 0.2s;
}
.mobile-nav-overlay nav a:last-child { border-bottom: none; }
.mobile-nav-overlay nav a:hover,
.mobile-nav-overlay nav a[aria-current="page"] { color: var(--aqua-light); }
.mobile-overlay-backdrop {
display: none;
position: fixed;
inset: 0;
z-index: 830;
background: rgba(0,0,0,0.45);
}
.mobile-overlay-backdrop.open { display: block; }
/* Hamburger in sticky bar */
.mobile-bar__menu {
background: rgba(255,255,255,0.1);
border: 1.5px solid rgba(255,255,255,0.25);
border-radius: var(--radius-pill);
padding: 0.75rem 1rem;
cursor: pointer;
color: #fff;
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.875rem;
font-weight: 600;
font-family: var(--font-body);
transition: background var(--transition);
}
.mobile-bar__menu:hover {
background: rgba(255,255,255,0.18);
}
/* ── Page Hero (interior pages) ── */
.page-hero {
background: linear-gradient(135deg, var(--mist) 0%, var(--air-white) 100%);
padding-block: clamp(3.5rem, 8vw, 6rem);
border-bottom: 1px solid var(--border);
text-align: center;
}
.page-hero .eyebrow { display: block; }
.page-hero--photo {
position: relative;
background: var(--charcoal);
border-bottom: none;
overflow: hidden;
padding-block: clamp(4rem, 10vw, 7rem);
}
.page-hero--photo .page-hero__bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background-size: cover;
background-position: center 80%;
}
.page-hero--photo .page-hero__scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 33, 35, 0.78) 0%, rgba(15, 33, 35, 0.55) 45%, rgba(15, 33, 35, 0.85) 100%);
}
.page-hero--photo .container { position: relative; z-index: 1; }
.page-hero--photo .eyebrow { color: var(--aqua-light); }
.page-hero--photo h1 { color: #fff; }
.page-hero--photo .section-intro { color: rgba(255, 255, 255, 0.82); }
/* ── Service Detail (services page) ── */
.service-detail {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 3rem;
align-items: start;
padding-block: 3rem;
border-bottom: 1px solid var(--border);
}
.service-detail:last-child { border-bottom: none; }
.service-detail__icon {
width: 80px;
height: 80px;
background: var(--mist);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--teal-deep);
}
.service-detail h3 { margin-bottom: 0.75rem; }
.service-detail p { color: var(--text-muted); margin-bottom: 1rem; }
.service-detail--photo {
grid-template-columns: 1fr 1fr;
align-items: center;
}
.service-detail--photo img {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border: 1px solid var(--border);
border-radius: var(--radius-md);
transition: opacity 0.4s ease;
}
/* ── Three-up supporting photo grid ── */
.photo-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.85rem;
}
/* defaults to display:contents, which promotes its children
into this grid as (invisible) items too, breaking the 3-column auto-placement.
Excluding source explicitly keeps only the ![]()
as real grid items. */
.photo-grid-3 source {
display: none;
}
.photo-grid-3 img {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
/* ── Two-up supporting photo grid — larger than photo-grid-3's thirds ── */
.photo-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.85rem;
}
.photo-grid-2 picture {
display: block;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.photo-grid-2 img {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
transform: scale(1.1);
}
/* This shot is a wide wall scene with the bag itself sitting in the upper-
right — zoom in and shift the crop window toward that corner instead
of the default center. */
.photo-grid-2 img.iv-bag-wall-1-img {
/* This source is nearly square already, so object-fit:cover barely
crops anything — object-position has almost nothing to reposition.
transform-origin is what actually controls where scale() zooms
toward, since a CSS transform is applied to the whole (already
cover-fit) box around its own origin point, independent of
object-position. */
transform-origin: 78% 22%;
transform: scale(1.75);
}
/* Show more of the photo overall, weighted toward the top (hooks + bags)
over the bottom (excess tubing) — no extra zoom, and the crop window
biased well toward the top of the source image. */
.photo-grid-2 img.iv-bags-dual-img {
object-position: center 25%;
transform: none;
}
/* Give the Ozone/IV photo column more room than the default 1fr/1fr split
so the two IV bag photos render larger — desktop only; mobile already
stacks to a single column via .service-detail's own mobile override. */
@media (min-width: 769px) {
#ozone-iv-boosters {
grid-template-columns: 1.25fr 1fr;
}
}
/* ── Two-up video embed grid ── */
.video-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.video-embed {
aspect-ratio: 16/9;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--border);
}
.video-embed iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.photo-placeholder {
width: 100%;
aspect-ratio: 1;
border-radius: var(--radius-md);
background: var(--mist);
border: 2px dashed var(--border);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 1rem;
color: var(--text-muted);
font-weight: 600;
font-size: 0.95rem;
}
/* ── Homepage "What We Offer" photo band ── */
.section--photo-offer {
position: relative;
overflow: hidden;
background: var(--charcoal);
}
.section--photo-offer .photo-offer__bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background-size: cover;
background-position: center 40%;
}
.section--photo-offer .photo-offer__scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 33, 35, 0.92) 0%, rgba(15, 33, 35, 0.82) 50%, rgba(15, 33, 35, 0.92) 100%);
}
.section--photo-offer .container { position: relative; z-index: 1; }
.section--photo-offer .eyebrow { color: var(--aqua-light); }
.section--photo-offer h2 { color: #fff; }
.section--photo-offer .section-intro { color: rgba(255, 255, 255, 0.8); }
.section--photo-offer .icon-card {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.16);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.section--photo-offer .icon-card:hover {
background: rgba(255, 255, 255, 0.13);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.section--photo-offer .icon-card h3 { color: #fff; }
.section--photo-offer .icon-card p { color: rgba(255, 255, 255, 0.72); }
.section--photo-offer .icon-card__icon {
background: rgba(255, 255, 255, 0.12);
color: var(--aqua-light);
}
.section--photo-offer .icon-card:hover .icon-card__icon {
background: var(--aqua-light);
color: var(--charcoal);
}
/* ── About page ── */
.mission-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: clamp(2rem, 5vw, 3.5rem);
align-items: center;
}
.mission-grid__media img {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
object-position: center center;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
}
.about-img-placeholder {
aspect-ratio: 4/5;
background: var(--mist);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 0.85rem;
text-align: center;
padding: 2rem;
}
/* ── Contact page ── */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
/* ── Form styles ── */
.form-group {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-bottom: 1.25rem;
}
.form-group label {
font-size: 0.875rem;
font-weight: 600;
color: var(--charcoal);
}
.form-control {
font-family: var(--font-body);
font-size: 0.95rem;
color: var(--text);
background: #fff;
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.75rem 1rem;
transition: border-color var(--transition), box-shadow var(--transition);
width: 100%;
appearance: none;
}
.form-control:focus {
outline: none;
border-color: var(--aqua-mid);
box-shadow: 0 0 0 3px rgba(77,168,168,0.15);
}
textarea.form-control { resize: vertical; min-height: 130px; }
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
/* Consent checkbox */
.form-consent {
display: flex;
gap: 0.75rem;
align-items: flex-start;
margin-bottom: 1.5rem;
padding: 1.25rem;
background: var(--mist);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
}
.form-consent input[type="checkbox"] {
margin-top: 0.2rem;
flex-shrink: 0;
width: 18px;
height: 18px;
accent-color: var(--teal-deep);
cursor: pointer;
}
.form-consent label {
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.55;
cursor: pointer;
}
/* Privacy disclaimer inline */
.form-disclaimer {
font-size: 0.8rem;
color: var(--text-light);
line-height: 1.55;
margin-top: 0.75rem;
}
.form-disclaimer a {
color: var(--aqua-mid);
text-decoration: underline;
text-decoration-color: transparent;
transition: text-decoration-color var(--transition);
}
.form-disclaimer a:hover { text-decoration-color: var(--aqua-mid); }
.hidden { display: none !important; }
/* Contact info sidebar */
.contact-info { display: flex; flex-direction: column; gap: 2rem; }
.contact-info-item {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.contact-info-item__icon {
flex-shrink: 0;
width: 44px;
height: 44px;
background: var(--mist);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--teal-deep);
}
.contact-info-item h4 {
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 0.25rem;
font-family: var(--font-body);
}
.contact-info-item a {
color: var(--teal-deep);
font-weight: 500;
transition: color var(--transition);
}
.contact-info-item a:hover { color: var(--aqua-mid); }
/* ── Pricing Menu ── */
.pricing-category {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 2rem;
margin-bottom: 1.5rem;
box-shadow: var(--shadow-sm);
}
.pricing-cat-title {
display: flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 600;
color: var(--teal-deep);
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border);
cursor: default;
list-style: none;
}
.pricing-cat-title::-webkit-details-marker {
display: none;
}
/* Category content always renders regardless of the open state —
the collapse behavior below is opted back in on mobile only. */
.pricing-category .pricing-grid {
display: grid;
}
.pricing-cat-chevron {
display: none;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 0.75rem;
}
.price-item {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding: 0.65rem 0.9rem;
background: var(--mist);
border-radius: var(--radius-sm);
font-size: 0.875rem;
}
.price-name {
color: var(--text);
font-weight: 500;
flex: 1;
line-height: 1.4;
}
.price-name small {
display: block;
font-size: 0.75rem;
color: var(--text-muted);
font-weight: 400;
margin-top: 0.15rem;
}
.price-val {
font-weight: 700;
color: var(--teal-deep);
white-space: nowrap;
flex-shrink: 0;
}
.price-val.coming-soon {
color: var(--aqua-mid);
font-weight: 500;
font-style: italic;
font-size: 0.8rem;
}
/* ── Privacy / Policy page ── */
.policy-content { max-width: 72ch; }
.policy-content h2 { font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.policy-content h3 { font-size: 1.15rem; margin-top: 1.75rem; margin-bottom: 0.5rem; }
.policy-content p { color: var(--text-muted); margin-bottom: 1rem; line-height: 1.75; }
.policy-content ul { margin-left: 1.25rem; list-style: disc; }
.policy-content ul li { color: var(--text-muted); margin-bottom: 0.4rem; font-size: 0.95rem; }
.policy-content strong { color: var(--text); }
.policy-notice {
background: var(--mist);
border-left: 4px solid var(--aqua-mid);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
padding: 1rem 1.25rem;
font-size: 0.875rem;
color: var(--text-muted);
margin-top: 1rem;
}
/* ── Thank You page ── */
.thankyou-section {
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 4rem 1rem;
}
.thankyou-icon {
width: 80px;
height: 80px;
background: var(--mist);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 2rem;
color: var(--teal-deep);
}
/* ── Hero word reveal animation ── */
@keyframes word-reveal {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-word {
display: block;
opacity: 0;
animation: word-reveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Revive — black */
.hero-word--1 {
animation-delay: 0.35s;
color: #000;
}
/* Restore — white; the hero scrim is nearly as light as white text, so a soft
dark halo (not just a drop shadow) is needed to keep it legible */
.hero-word--2 {
animation-delay: 0.95s;
color: #fff;
text-shadow: 0 0 2px rgba(30,45,47,0.85), 0 0 8px rgba(30,45,47,0.7), 0 1px 3px rgba(30,45,47,0.5);
font-style: normal;
}
/* Reignite — italic, teal */
.hero-word--3 {
animation-delay: 1.55s;
color: var(--teal-deep);
font-style: italic;
}
/* ── Scroll fade-in animation ── */
.fade-up {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.55s ease, transform 0.55s ease;
}
.fade-up.visible {
opacity: 1;
transform: translateY(0);
}
/* ── Responsive ── */
@media (max-width: 768px) {
/* Pricing categories become expand/collapse accordions on mobile only —
desktop keeps everything open via the unconditional display:grid
rule above; this re-enables 's native collapsed state. */
.pricing-category .pricing-grid {
display: none;
}
.pricing-category[open] .pricing-grid {
display: grid;
}
.pricing-cat-title {
cursor: pointer;
margin-bottom: 0;
}
.pricing-category[open] .pricing-cat-title {
margin-bottom: 1.5rem;
}
.pricing-cat-chevron {
display: block;
margin-left: auto;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.pricing-category[open] .pricing-cat-chevron {
transform: rotate(180deg);
}
.site-nav__links { display: none; }
.site-nav__links.open { display: flex; flex-direction: column; position: absolute; top: 68px; left: 0; right: 0; background: var(--air-white); border-bottom: 1px solid var(--border); padding: 1.25rem 1.5rem; gap: 1rem; }
.nav-toggle { display: block; }
.nav-cta .btn { display: none; }
/* Footer: center + compact on mobile */
.site-footer { text-align: center; }
.site-footer__grid {
grid-template-columns: 1fr 1fr;
column-gap: 1.5rem;
row-gap: 0.75rem;
}
.footer-brand {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
align-items: center;
}
.footer-brand > div { align-items: center; }
.site-footer__bottom { flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; }
.footer-legal { justify-content: center; }
.contact-grid { grid-template-columns: 1fr; }
.service-detail { grid-template-columns: 1fr; }
.card--bio { grid-template-columns: 1fr; }
.card--bio-reverse .card--bio__photo { order: 0; }
.card--bio__photo { width: 260px; height: auto; margin: 0 auto; }
.card--bio__photo img { clip-path: inset(2px); }
/* Shore Community photo: recenter on the two people instead of the image's
geometric center, which was cropping the woman on the right roughly in half. */
.shore-section__bg {
object-position: 68% 35%;
}
.mission-grid { grid-template-columns: 1fr; }
.page-hero--photo { padding-block: 3.5rem; }
.page-hero--photo .page-hero__scrim {
background: linear-gradient(180deg, rgba(15, 33, 35, 0.82) 0%, rgba(15, 33, 35, 0.7) 100%);
}
.form-row { grid-template-columns: 1fr; }
.form-control { font-size: 16px; }
.video-grid-2 { grid-template-columns: 1fr; }
.photo-grid-3 { gap: 0.5rem; }
.mobile-bar { display: flex; }
body { padding-bottom: 80px; }
.privacy-callout { flex-direction: column; }
/* Mobile-only line break */
.mobile-br { display: block; }
/* About page bio cards — center photo and name on mobile */
.card > div[style*="display:flex"] {
flex-direction: column;
align-items: center;
text-align: center;
}
/* Icon grid: 2 per row on mobile */
.icon-card {
flex: 0 1 calc(50% - 1rem);
min-width: 0;
}
/* Hero restructure: photo becomes a prominent top band framing the headline,
subtext + CTAs sit below it on the plain background for easy reading. */
.hero {
padding-top: 0;
}
/* "Reignite" — italic teal reads lighter than the bolded/haloed Revive and
Restore above it; add a soft dark halo to give it the same weight. */
.hero-word--3 {
text-shadow: 0 0 2px rgba(0,0,0,0.6), 0 0 10px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.5);
}
.hero__bg-photo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: auto;
height: 320px;
width: 100%;
object-fit: cover;
object-position: center 20%;
}
.hero__scrim {
top: 0;
left: 0;
right: 0;
bottom: auto;
height: 320px;
background: linear-gradient(180deg, rgba(248,250,250,0.85) 0%, rgba(248,250,250,0.32) 16%, rgba(248,250,250,0.3) 55%, rgba(241,234,217,0.55) 78%, rgba(241,234,217,0.85) 92%, #f1ead9 100%);
}
.hero__inner {
padding-top: 2.5rem;
}
/* Sandy wash beneath the photo — echoes the beach photo's tone instead of
dropping straight to plain white, then diffuses back to white after the
CTAs so it doesn't carry into the next section. */
.hero::after {
content: '';
position: absolute;
top: 320px;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, #f1ead9 0%, #f1ead9 78%, var(--air-white) 100%);
pointer-events: none;
z-index: 0;
}
/* Pull the sub-copy up so it sits over the diffused tail of the photo
instead of on the plain background below it — the extended scrim
fade above does the blending, so no separate card/background is
needed here anymore. */
.hero__sub {
margin: 3.25rem 0 0 0;
padding: 0;
background: none;
}
.hero__sub::before {
content: none;
}
.hero__ctas {
margin-top: 0.25rem;
}
.hero__portal-link {
display: block;
margin-top: 1.5rem;
}
.hero__portal-link a {
display: flex;
align-items: center;
justify-content: center;
gap: 0.85rem;
background: #fff;
border: 1px solid var(--aqua-mid);
border-radius: var(--radius-lg);
padding: 1.1rem 1.5rem;
box-shadow: var(--shadow-sm);
}
.hero__portal-link__icon {
width: 42px;
height: 42px;
flex-shrink: 0;
}
.hero__portal-link span {
font-size: 1rem;
font-weight: 700;
color: var(--teal-deep);
}
/* Mortar-and-pestle accent: this section runs very tall on mobile (stacked
text), so height:100% forces a severe zoom to cover it, showing only ~22%
of the image's width. Capping the height to 45% needs far less scale-up,
showing ~49% of the width instead — full width still covered (object-fit:
cover), just less zoomed in. The top/bottom mask already fades it into the
surrounding charcoal, so the shorter height reads as intentional. */
.philosophy-section__accent {
height: 45%;
}
/* "What We Offer" background photo: zoom out slightly instead of the tight
crop that "cover" forces on this section's tall mobile height */
.section--photo-offer .photo-offer__bg {
background-size: 400% auto;
background-position: center top;
}
/* Nerve, Back & Recovery conditions: force 2 per row instead of each
wrapping to its own line */
.area-tag-group--recovery {
gap: 0.4rem 0.6rem;
}
.area-tag-group--recovery .area-tag {
padding: 0.45rem 0.7rem;
font-size: 0.78rem;
white-space: nowrap;
}
/* "Serving Manahawkin & Southern Ocean County" section: the town-tag list here
just repeats the Our Community list higher up the page — drop it on mobile
to cut the redundancy and the extra vertical space. */
.service-areas {
display: none;
}
/* Center the Get Directions CTA + address beneath the map on mobile */
.directions-cta {
justify-content: center;
text-align: center;
}
/* CareCredit CTA: prevent the nowrap button from overflowing off the right edge */
.carecredit-panel .btn,
.softwave-panel .btn {
width: 100%;
justify-content: center;
white-space: normal;
text-align: center;
}
.softwave-panel__leagues span::after { margin: 0 0.85rem; }
.softwave-panel__leagues-track { animation-duration: 42s; }
/* The SoftWave logo jpg has a solid pure-white background; match the panel
to it exactly on mobile so the logo doesn't sit in a visible white box
against the panel's tinted mist gradient. */
.softwave-panel {
background: #fff;
}
}
@media (max-width: 480px) {
.btn-group { flex-direction: column; }
.btn-group .btn { width: 100%; justify-content: center; }
.trust-bar__grid { gap: 1rem 2rem; }
}