/* ============================================================================
JOINTS SITE TEMPLATE — EDITORIAL BLUE-CLINICAL (reusable fictional demo)
----------------------------------------------------------------------------
Forked 2026-07-28 from the Berliner concept build (real client, hip & knee,
Bronx NY) and genericized into a reusable template — see README.md for the
template provenance; this fork: Kingsley A. Oladeji, MD / Texas Orthopedic Practice.
Design system carried over from the mendoza-editorial build. This page runs
the BLUE-CLINICAL theme: . The warm palette below
is kept as the :root default so the theme swap still works, but is unused
here.
NOTE: the scroll-scrubbed anatomical spine centerpiece from the Mendoza
build was REMOVED, not adapted. This template is hip and knee, so spine
anatomy would be wrong, and the standing rule is no hand-drawn anatomy on
physician marketing sites. The motion system (reveal, sticky header,
counters, hover lift) is retained; the anatomy is not.
Aesthetic: high-end editorial / luxury private clinic. Type-led (Source Serif
4 headings, Public Sans body), ONE accent, 8px grid, fine
accent hairline rules as section dividers.
THEMING CONTRACT
- EVERY colour is a CSS custom property. The layout, type scale, grid, and
motion are identical across themes. Only the token VALUES change.
- Default (:root) = "warm" (editorial terracotta on sand paper).
- = "blue-clinical" (bright blue / navy on light
blue-white). Same elegant page in a clinical-blue suit.
MOTION CONTRACT (learned the hard way — do not regress)
- Every element is FULL-OPACITY and complete AT REST.
- Reveal is pure polish: a self-terminating fade-up that only ENDS at
opacity:1. No .in class -> element stays visible. No JS -> visible.
prefers-reduced-motion -> everything static and complete.
- Nothing on this page is EVER made visible by animation.
========================================================================== */
@font-face {
font-family: 'Public Sans';
font-style: normal; font-weight: 100 900; font-display: swap;
src: url(../fonts/public-sans-var.woff2) format('woff2');
}
@font-face {
font-family: 'Source Serif 4';
font-style: normal; font-weight: 200 900; font-display: swap;
src: url(../fonts/source-serif-4-var.woff2) format('woff2');
}
/* ---- THEME A: warm (default) --------------------------------------------- */
:root {
--bg: #f8f4ec; /* sand paper */
--surface: #fffdf8; /* lifted warm white */
--tint: #f1e9db; /* alternating band */
--ink: #2b2622; /* ink */
--ink-dim: #5b5344; /* supporting text */
--ink-faint: #8b8070; /* meta / eyebrow-muted */
--accent: #bb5a3c; /* terracotta (ONLY accent) */
--accent-2: #9d4227; /* accent hover */
--accent-ink: #fffaf3; /* text on accent */
--line: #e2d8c6; /* neutral hairline */
--divider: rgba(187, 90, 60, .30); /* accent section rule */
--accent-soft: rgba(187, 90, 60, .10); /* icon wash / chips */
--portrait-shadow: rgba(80, 45, 25, .38);
--card-shadow: rgba(80, 45, 25, .10);
--footer-bg: #2b2622;
--footer-ink: #cabfae;
--footer-head: #f8f4ec;
--footer-line: #4a4238;
/* Shared, non-colour design tokens (identical across themes). */
--font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--serif: "Source Serif 4", Georgia, "Times New Roman", serif;
--ease: cubic-bezier(.2, .7, .2, 1);
--gutter: clamp(24px, 6vw, 96px);
--maxw: 1200px;
--measure: 46rem; /* one shared reading column: prose, FAQ, section heads */
}
/* ---- THEME B: blue-clinical ---------------------------------------------- */
.theme-blue {
--bg: #f5f9fc;
--surface: #ffffff;
--tint: #e4eef7;
--ink: #0c3557; /* deep navy ink */
--ink-dim: #40607b;
--ink-faint: #7d94a8;
--accent: #005cb9; /* bright blue (ONLY accent) */
--accent-2: #00497a; /* deep navy hover */
--accent-ink: #ffffff;
--line: #d3e2ef;
--divider: rgba(0, 92, 185, .28);
--accent-soft: rgba(0, 92, 185, .10);
--portrait-shadow: rgba(10, 50, 90, .35);
--card-shadow: rgba(10, 50, 90, .12);
--footer-bg: #00304f;
--footer-ink: #a9c2d8;
--footer-head: #ffffff;
--footer-line: #14496b;
}
/* ==========================================================================
BASE
========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
background: var(--bg);
color: var(--ink);
font-family: var(--font);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }
a:hover { color: var(--accent-2); }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.skip {
position: absolute; left: -999px; top: 0;
background: var(--accent); color: var(--accent-ink);
padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100;
}
.skip:focus { left: 0; }
/* Section rhythm + the fine accent hairline divider between every section. */
.section { padding: clamp(64px, 9vw, 120px) 0; border-top: 1px solid var(--divider); }
.section--tint { background: var(--tint); }
.eyebrow {
margin: 0 0 16px;
font-size: .75rem; font-weight: 600; letter-spacing: .16em;
text-transform: uppercase; color: var(--accent);
}
h2 {
margin: 0;
font-family: var(--serif); font-weight: 500;
font-size: clamp(1.9rem, 3.4vw, 2.9rem);
line-height: 1.1; letter-spacing: -0.01em; color: var(--ink);
}
h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--ink); }
.section-head { max-width: var(--measure); margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; }
.section-head .eyebrow { }
.section-head h2 { margin-bottom: 20px; }
.section-head .rule {
width: 48px; height: 2px; background: var(--accent);
margin: 20px auto 0; border-radius: 2px;
}
.lede {
margin: 0; font-size: clamp(1.02rem, 1.5vw, 1.18rem);
line-height: 1.6; color: var(--ink-dim);
}
/* ==========================================================================
STICKY EDITORIAL HEADER (brand lockup + nav + phone + CTA + theme toggle)
========================================================================== */
.site-header {
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--bg) 86%, transparent);
-webkit-backdrop-filter: saturate(1.15) blur(9px);
backdrop-filter: saturate(1.15) blur(9px);
border-bottom: 1px solid transparent;
transition: box-shadow .28s var(--ease), border-color .28s var(--ease), background-color .28s var(--ease);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--bg); } }
.site-header.scrolled {
border-bottom-color: var(--line);
box-shadow: 0 10px 34px -20px var(--card-shadow);
}
.site-header__inner {
max-width: var(--maxw); margin-inline: auto;
padding: 11px var(--gutter);
display: flex; align-items: center; gap: clamp(16px, 2.4vw, 30px);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); margin-right: auto; min-width: 0; }
.brand__mark { width: 34px; height: 34px; color: var(--accent); flex: 0 0 auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; }
.brand__name { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; color: var(--ink); letter-spacing: -.01em; }
.brand__sub { font-size: .72rem; color: var(--ink-faint); letter-spacing: .01em; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 28px); }
.navlink {
font-size: .93rem; font-weight: 500; color: var(--ink-dim); text-decoration: none;
position: relative; padding: 6px 1px; white-space: nowrap;
transition: color .2s var(--ease);
}
.navlink::after {
content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px;
background: var(--accent); transition: right .3s var(--ease);
}
.navlink:hover { color: var(--ink); }
.navlink:hover::after { right: 0; }
.header-cta { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 18px); }
.header-phone { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; white-space: nowrap; transition: color .2s var(--ease); }
.header-phone svg { width: 17px; height: 17px; color: var(--accent); }
.header-phone:hover { color: var(--accent); }
.btn--sm { min-height: 44px; padding: 10px 20px; font-size: .95rem; border-radius: 9px; }
.btn__short { display: none; }
.theme-toggle {
display: inline-flex; align-items: center; gap: 8px;
font-size: .78rem; font-weight: 600; letter-spacing: .03em; white-space: nowrap;
color: var(--ink-dim); text-decoration: none;
border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px;
transition: border-color .2s var(--ease), color .2s var(--ease);
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle__dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto;
background: #005cb9; box-shadow: inset 0 0 0 2px rgba(255,255,255,.65); }
.theme-blue .theme-toggle__dot { background: #bb5a3c; }
/* anchored sections clear the sticky header when jumped to */
:where(#about, #care, #video, #locations, #contact) { scroll-margin-top: 78px; }
/* ==========================================================================
HERO — reused verbatim from the approved editorial-warm hero.
Type sizes / grid / 3-line name wrap are UNCHANGED; only colours are tokenised.
========================================================================== */
.hero {
--hero-colgap: clamp(32px, 5vw, 72px);
position: relative;
background: var(--bg); color: var(--ink);
padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(56px, 9vw, 120px);
overflow: clip;
}
.hero__inner {
max-width: var(--maxw); margin-inline: auto;
display: grid;
grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
grid-template-areas: "text portrait";
align-items: start;
column-gap: var(--hero-colgap);
row-gap: clamp(32px, 6vw, 56px);
}
.hero__text { grid-area: text; align-self: center; max-width: 34ch; }
.hero__overline {
margin: 0 0 24px;
font-size: .75rem; font-weight: 600; letter-spacing: .16em;
text-transform: uppercase; color: var(--ink-faint);
}
.hero__name {
margin: 0; font-family: var(--serif); font-weight: 500;
font-size: clamp(2.5rem, 6vw, 5rem);
line-height: 1.02; letter-spacing: -0.02em; color: var(--ink);
}
.hero__rule {
height: 1px; width: 100%; margin: 24px 0;
background: var(--accent);
transform: scaleX(1); transform-origin: left center;
}
.hero__credential {
margin: 0; font-size: clamp(.95rem, 1.4vw, 1.1rem);
font-weight: 500; letter-spacing: .01em; color: var(--ink-dim);
}
.hero__tagline {
margin: 16px 0 0; font-family: var(--serif); font-weight: 400;
font-size: clamp(1.3rem, 2.3vw, 1.85rem); line-height: 1.28; color: var(--ink);
}
.hero__cta { margin: 40px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 52px; padding: 14px 28px; border-radius: 10px;
font-family: var(--font); font-size: 1.02rem; font-weight: 600; letter-spacing: .01em; line-height: 1;
text-decoration: none; cursor: pointer; border: 0;
transition: transform .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
}
.btn--primary {
background: var(--accent); color: var(--accent-ink);
box-shadow: 0 6px 18px -8px var(--portrait-shadow);
}
.btn--primary:hover { background: var(--accent-2); color: var(--accent-ink); transform: translateY(-1px); }
.btn--ghost {
background: transparent; color: var(--ink); border: 1px solid var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--bg); transform: translateY(-1px); }
.btn--ghost svg, .btn--ghost .glyph { color: var(--accent); }
.btn--ghost:hover svg, .btn--ghost:hover .glyph { color: var(--accent-ink); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hero__phoneglyph { color: var(--accent); font-size: 1.05em; line-height: 1; }
.hero__btn--phone:hover .hero__phoneglyph { color: var(--accent-ink); }
.hero__portrait {
grid-area: portrait; align-self: start; position: relative;
aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden;
background: var(--line);
box-shadow: 0 30px 60px -30px var(--portrait-shadow);
}
.hero__portrait::after {
content: ""; position: absolute; inset: 0;
border: 1px solid rgba(43, 38, 34, .10); border-radius: inherit; pointer-events: none;
}
.hero__portrait img {
position: absolute; inset: 0; width: 100%; height: 120%;
object-fit: cover; object-position: 50% 22%; display: block; will-change: transform;
}
/* ==========================================================================
VALUE TRIO — "why him". Editorial: accent index numeral + serif head, hairline.
========================================================================== */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.vitem { padding-top: 24px; border-top: 2px solid var(--accent); }
.vitem__no {
font-family: var(--serif); font-size: 1.05rem; font-weight: 600;
color: var(--accent); letter-spacing: .02em;
}
.vitem h3 { margin: 12px 0 10px; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.2; }
.vitem p { margin: 0; color: var(--ink-dim); font-size: 1.02rem; }
/* ==========================================================================
CONDITIONS — index grid. Flat wayfinding icons in accent, serif labels.
========================================================================== */
.cond-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 1px; background: var(--divider);
border: 1px solid var(--divider); border-radius: 14px;
/* `overflow: clip`, NOT hidden. `hidden` creates a SCROLL CONTAINER,
which becomes the scrollport for any descendant using
`animation-timeline: view()`. A card is always fully visible inside
its own grid, so progress pins at 1 and the reveal never plays.
`clip` gives identical clipping with no scroll container. */
overflow: clip;
}
.cond { background: var(--bg); padding: clamp(16px, 1.6vw, 20px) clamp(16px, 1.8vw, 22px); }
.section--tint .cond { background: var(--tint); }
/* .cond__icon REMOVED. Hand-drawn/abstract SVG glyphs on physician marketing
pages were rejected outright. Do not reintroduce them. */
.cond h4 { margin: 0 0 5px; font-size: 1.06rem; line-height: 1.22; }
.cond p { margin: 0; font-size: .9rem; color: var(--ink-dim); line-height: 1.45; }
.cond-note {
margin: clamp(28px, 4vw, 40px) auto 0; max-width: 60rem; text-align: center;
font-size: .95rem; color: var(--ink-faint);
}
/* ==========================================================================
MEET THE SURGEON
========================================================================== */
.about {
display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
gap: clamp(36px, 6vw, 80px); align-items: center;
}
.about__photo { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden;
background: var(--line); box-shadow: 0 30px 60px -30px var(--portrait-shadow); }
.about__photo::after { content: ""; position: absolute; inset: 0;
border: 1px solid rgba(43,38,34,.10); border-radius: inherit; pointer-events: none; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.about__text .role {
margin: 8px 0 20px; font-family: var(--serif); font-style: italic;
font-size: 1.15rem; color: var(--accent);
}
.about__text > p { color: var(--ink-dim); font-size: 1.05rem; max-width: 52ch; }
.about__text h2 { margin-top: 4px; }
.badges { list-style: none; margin: 26px 0; padding: 0; display: grid; gap: 12px; }
.badges li {
display: flex; align-items: flex-start; gap: 12px;
font-size: 1rem; font-weight: 500; color: var(--ink);
}
.badges svg {
flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px;
color: var(--accent-ink); background: var(--accent);
border-radius: 50%; padding: 3px;
}
/* Full-bleed stat row: its own band, edge to edge inside the wrap. */
.statband { border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider);
background: var(--surface); }
.statband .wrap { padding-block: clamp(30px, 4vw, 46px); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px);
text-align: center; }
.stats .stat { padding: 0 8px; }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; gap: 26px; } }
.stat b { display: block; font-family: var(--serif); font-weight: 500;
font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1; color: var(--accent);
font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 10px; font-size: .95rem; color: var(--ink-dim); line-height: 1.4; }
/* credential band variant: institution names instead of counters.
Stays a single horizontal row at every width (never stacks). */
/* .stats.stats--cred doubled specificity on purpose: a later `.stats` rule
(the template's 2-counter band, ~line 946) otherwise wins by order. */
.stats.stats--cred { grid-template-columns: repeat(3, auto); justify-content: space-between; align-items: start; max-width: none; }
.stats.stats--cred .stat b { font-size: clamp(1.05rem, 2.2vw, 2.1rem); line-height: 1.15; letter-spacing: .01em; white-space: nowrap; }
.stats.stats--cred .stat span { margin-top: 8px; font-size: clamp(.68rem, 1.4vw, .95rem); }
@media (max-width: 760px) {
.stats.stats--cred { grid-template-columns: repeat(3, auto); gap: 12px; }
.stats.stats--cred .stat { padding: 0; }
}
/* ==========================================================================
REVIEWS
========================================================================== */
.stars { color: var(--accent); letter-spacing: 2px; }
.rating-line {
display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: center;
margin: 0 auto clamp(36px, 5vw, 52px); font-size: 1rem; color: var(--ink-dim);
}
.rating-line b { color: var(--ink); }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 28px); }
.rev {
position: relative; margin: 0; background: var(--surface);
border: 1px solid var(--line); border-radius: 14px;
padding: clamp(24px, 2.6vw, 32px);
box-shadow: 0 18px 40px -30px var(--card-shadow);
}
.rev::before {
content: "\201C"; position: absolute; top: 6px; right: 18px;
font-family: var(--serif); font-size: 4rem; line-height: 1;
color: var(--accent-soft); pointer-events: none;
}
.rev .stars { font-size: .95rem; }
.rev p {
margin: 14px 0 20px; font-family: var(--serif); font-size: 1.1rem;
line-height: 1.5; color: var(--ink);
}
.rev__meta { display: flex; flex-direction: column; gap: 2px; font-size: .85rem; }
.rev__meta b { color: var(--ink); }
.rev__meta .src { color: var(--ink-faint); }
.reviews__note { margin: clamp(28px, 4vw, 40px) auto 0; max-width: 60rem; text-align: center;
font-size: .85rem; color: var(--ink-faint); line-height: 1.6; }
/* ==========================================================================
LOCATIONS — themed ridge silhouette (fills follow the accent, so it swaps)
========================================================================== */
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 28px); }
.loc {
background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
overflow: hidden; box-shadow: 0 18px 40px -30px var(--card-shadow);
}
.loc__banner { position: relative; height: 120px; color: var(--accent); background: var(--accent-soft); }
.loc__banner svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.loc__banner span {
position: absolute; left: 20px; bottom: 14px;
font-family: var(--serif); font-weight: 600; font-size: 1.25rem; color: var(--ink);
z-index: 1;
}
.loc__body { padding: 22px clamp(20px, 2.2vw, 26px) 26px; }
.loc__body .region { margin: 0 0 8px; font-size: .78rem; font-weight: 600;
letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.loc__body p { margin: 0 0 12px; color: var(--ink-dim); font-size: .98rem; }
.loc__body a { font-weight: 600; }
/* ==========================================================================
CONTACT
========================================================================== */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: clamp(36px, 6vw, 72px); align-items: start; }
.contact__info h2 { margin-bottom: 16px; }
.infoline { display: flex; align-items: flex-start; gap: 14px; margin-top: 18px; }
.infoline svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.infoline span { display: flex; flex-direction: column; }
.infoline b { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.infoline a, .infoline span > :not(b) { color: var(--ink); font-weight: 500; }
.infoline a:hover { color: var(--accent); }
.form { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
padding: clamp(24px, 3vw, 40px); box-shadow: 0 24px 50px -34px var(--card-shadow); }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 7px; font-size: .82rem; font-weight: 600;
letter-spacing: .04em; color: var(--ink-dim); }
.field input, .field textarea {
width: 100%; font-family: var(--font); font-size: 1rem; color: var(--ink);
background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
padding: 13px 14px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.form .btn--primary { width: 100%; margin-top: 4px; }
.form__ok {
display: none; margin-top: 18px; padding: 14px 16px; border-radius: 10px;
background: var(--accent-soft); border: 1px solid var(--divider);
color: var(--ink); font-size: .95rem;
}
.form__ok.show { display: block; }
.form__note { margin: 16px 0 0; font-size: .8rem; line-height: 1.6; color: var(--ink-faint); }
/* ==========================================================================
FOOTER
========================================================================== */
.site-footer { background: var(--footer-bg); color: var(--footer-ink); padding: clamp(48px, 7vw, 80px) 0 40px; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(28px, 5vw, 64px); }
.footer-brand__name { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; color: var(--footer-head); }
.footer-brand__sub { display: block; margin-top: 4px; font-size: .82rem; color: var(--footer-ink); }
.footer-brand p { margin: 16px 0 0; max-width: 40ch; font-size: .92rem; line-height: 1.6; }
.footer-col h4 { margin: 0 0 14px; font-family: var(--font); font-weight: 600; font-size: .78rem;
letter-spacing: .12em; text-transform: uppercase; color: var(--footer-head); }
.footer-col a, .footer-col p { display: block; margin: 0 0 9px; color: var(--footer-ink);
text-decoration: none; font-size: .95rem; }
.footer-col a:hover { color: var(--accent); }
.disclaimer { margin-top: clamp(36px, 5vw, 56px); padding-top: 22px;
border-top: 1px solid var(--footer-line); font-size: .82rem; color: var(--footer-ink); }
/* ==========================================================================
MICRO-MOTION — hover / press affordances (base; killed by reduced-motion)
========================================================================== */
.rev, .loc {
transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.rev:hover, .loc:hover {
transform: translateY(-5px);
box-shadow: 0 26px 52px -28px var(--card-shadow);
border-color: var(--divider);
}
.cond { transition: background-color .25s var(--ease); }
.cond:hover { background: var(--accent-soft); }
.stat { transition: transform .25s var(--ease); }
.about:hover .stat { transform: none; }
.btn:active { transform: translateY(0) scale(.985); }
.navlink:active, .theme-toggle:active, .header-phone:active { transform: translateY(1px); }
/* ==========================================================================
MOTION — reveal is polish only. Resting state is always fully visible.
========================================================================== */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
.reveal.in { animation: reveal-in .62s var(--ease) both; }
@keyframes reveal-in {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: none; }
}
/* staggered entrance for grid children as a group enters view */
.cond-grid .cond.in:nth-child(4n+2) { animation-delay: .06s; }
.cond-grid .cond.in:nth-child(4n+3) { animation-delay: .12s; }
.cond-grid .cond.in:nth-child(4n+4) { animation-delay: .18s; }
.rev-grid .rev.in:nth-child(3n+2) { animation-delay: .08s; }
.rev-grid .rev.in:nth-child(3n+3) { animation-delay: .16s; }
.loc-grid .loc.in:nth-child(2) { animation-delay: .09s; }
.loc-grid .loc.in:nth-child(3) { animation-delay: .18s; }
.trio .vitem.in:nth-child(2) { animation-delay: .09s; }
.trio .vitem.in:nth-child(3) { animation-delay: .18s; }
/* section hairline rules draw in when their head reveals */
.section-head.in .rule { animation: rule-draw .7s var(--ease) .12s both; }
@keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Hero entrance stagger — starts hidden, is `both`, and ENDS at opacity:1,
so a settled screenshot / no-support browser simply shows everything. */
.hero__overline, .hero__name, .hero__credential,
.hero__tagline, .hero__cta, .hero__portrait {
animation: hero-rise .72s var(--ease) both;
}
.hero__overline { animation-delay: .00s; }
.hero__name { animation-delay: .06s; }
.hero__credential { animation-delay: .18s; }
.hero__tagline { animation-delay: .24s; }
.hero__cta { animation-delay: .30s; }
.hero__portrait { animation: hero-portrait-in .9s var(--ease) .10s both; }
.hero__rule { animation: hero-draw .7s var(--ease) .12s both; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hero-portrait-in { from { opacity: 0; transform: translateY(20px) scale(1.015); } to { opacity: 1; transform: none; } }
@keyframes hero-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* ONE signature scroll motion: portrait parallax on the inner ![]()
. */
@supports (animation-timeline: scroll()) {
.hero__portrait img {
animation: hero-parallax linear both;
animation-timeline: scroll(root block);
animation-range: 0 120vh;
}
@keyframes hero-parallax { from { transform: translateY(0); } to { transform: translateY(-12%); } }
}
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation: none !important; transition: none !important; }
.reveal, .reveal.in { opacity: 1 !important; transform: none !important; }
.hero__rule { transform: scaleX(1) !important; }
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 1000px) {
.cond-grid { grid-template-columns: repeat(2, 1fr); }
.rev-grid { grid-template-columns: repeat(2, 1fr); }
.loc-grid { grid-template-columns: 1fr; }
.footer-top { grid-template-columns: 1fr 1fr; }
.about { grid-template-columns: 1fr; }
.about__photo { max-width: 380px; }
/* header collapses: brand + toggle + Request only */
.site-nav { display: none; }
.header-phone { display: none; }
.brand__sub { display: none; }
.brand__name { font-size: .95rem; }
.btn__full { display: none; }
.btn__short { display: inline; }
}
/* Spine centerpiece is STATIC (unpinned, final, all captions in flow) on
narrow screens — a pinned 100vh scrub is wrong on a phone. Overrides both
the native and the JS-fallback enhanced paths. */
@media (max-width: 760px) {
.trio { grid-template-columns: 1fr; gap: 0; }
.vitem { border-top: none; padding-top: 0; margin-top: 28px; }
.vitem:first-child { margin-top: 0; }
.vitem { border-top: 2px solid var(--accent); padding-top: 24px; margin-top: 32px; }
.contact { grid-template-columns: 1fr; }
.footer-top { grid-template-columns: 1fr; }
}
/* Hero: single column, portrait on top (matches the approved hero) */
@media (max-width: 720px) {
.hero__inner { grid-template-columns: 1fr; grid-template-areas: "portrait" "text"; row-gap: clamp(28px, 8vw, 44px); }
.hero__text { align-self: start; max-width: none; }
.hero__portrait { aspect-ratio: 4 / 4.4; }
.hero__rule { margin: 20px 0; }
.hero__cta { margin-top: 32px; }
.hero__cta .btn { flex: 1 1 auto; }
}
@media (max-width: 520px) {
.cond-grid { grid-template-columns: 1fr; }
.rev-grid { grid-template-columns: 1fr; }
.stats { gap: 20px 32px; }
}
@media (max-width: 430px) {
.theme-toggle__lbl { display: none; }
.theme-toggle { padding: 8px 10px; gap: 0; }
.header-cta { gap: 10px; }
.site-header__inner { gap: 12px; }
}
/* ==========================================================================
VIDEO — click-to-play facade
Nothing loads from YouTube until the visitor presses play, so the page
stays fast and makes zero third-party requests on first paint. The facade
is a real