/* ──────────────────────────────────────────────────────────────────
LIMITLESS FITNESS SD · Design System v0.2
Gym/PT register — full-bleed photo, action-heavy, training-floor energy
Built FROM SCRATCH (the YOSHI editorial system is archived in main-yoshi.css.bak)
Tokens locked from Phase 0 brand package — Earth + Champion Gold + Bebas/Barlow
────────────────────────────────────────────────────────────────── */
:root {
/* Brand color tokens (Phase 0 brand package) */
--earth: #47443B;
--earth-deep: #2F2D26;
--earth-fog: #5A554A;
--earth-bright: #6B6555;
/* Champion Gold — Christian's brand spec (#B2933A). 1-unit shift
from prior #B19237 — visually identical, but use the exact value
so tokens match the logo gold and any future merch/spec work. */
--gold: #B2933A;
--gold-light: #C9A848;
--gold-bright: #E3BE5C;
--gold-faint: rgba(178, 147, 58, 0.10);
--gold-line: rgba(178, 147, 58, 0.22);
--gold-glow: rgba(178, 147, 58, 0.45);
--burnt: #FA854F;
--burnt-deep: #D86535;
/* v0.5: bumped khaki from #7A7462 (2.9:1 against earth-deep — FAILS WCAG AA)
to #B8AE99 (5.7:1 against earth-deep — PASSES AA). Original archived as --khaki-fog. */
--khaki: #B8AE99; /* Subtext · captions · quiet hierarchy */
--khaki-deep: #9C937E; /* Darker variant for use on cream backgrounds */
--khaki-fog: #6E6755; /* Deepest — borders, dividers only */
--cream: #FFF7D7;
--cream-soft: #F2EBC9;
--bone: #F2EBC9;
--white: #FFFFFF;
--black: #0A0905;
/* Semantic — dark-first */
--bg: #0A0905; /* near-black for full-bleed photo backgrounds */
--bg-card: var(--earth);
--bg-card-soft: var(--earth-fog);
--bg-cream: var(--cream); /* warm light-ground sections */
--text: var(--cream);
--text-dim: var(--khaki);
--text-on-cream: var(--earth-deep);
--accent: var(--gold);
--accent-hot: var(--burnt);
/* Type families — Bebas + Barlow + Barlow Condensed (athletic, NOT editorial) */
--font-display: 'Bebas Neue', 'Oswald', 'Impact', sans-serif;
--font-body: 'Barlow', system-ui, -apple-system, sans-serif;
--font-accent: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
/* Type scale — chunkier than YOSHI's editorial scale */
--t-eyebrow: clamp(11px, 0.65rem + 0.15vw, 13px);
--t-small: clamp(13px, 0.78rem + 0.15vw, 15px);
--t-body: clamp(16px, 0.95rem + 0.2vw, 18px);
--t-lead: clamp(19px, 1.1rem + 0.4vw, 24px);
--t-h4: clamp(22px, 1.2rem + 0.6vw, 30px);
--t-h3: clamp(28px, 1.5rem + 1vw, 42px);
--t-h2: clamp(40px, 2rem + 2vw, 72px);
--t-h1: clamp(56px, 2.5rem + 5vw, 128px);
--t-display: clamp(72px, 3rem + 8vw, 200px);
/* Spacing rhythm */
--s-pad-section: clamp(72px, 7vw, 128px);
--s-pad-x: clamp(20px, 5vw, 80px);
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
--s-9: 96px; --s-10: 128px;
/* Motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-snap: cubic-bezier(0.2, 0, 0, 1);
--d-fast: 180ms;
--d-base: 320ms;
--d-slow: 620ms;
/* Effects */
--shadow-card: 0 12px 40px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.22);
--shadow-lift: 0 28px 80px rgba(0,0,0,0.55), 0 8px 16px rgba(0,0,0,0.25);
--rule-gold: linear-gradient(to right, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
/* Legacy YOSHI token aliases (in case any generated long-tail page still references) */
--midnight: var(--earth); --midnight-deep: var(--earth-deep); --midnight-fog: var(--earth-fog);
--blue: var(--burnt); --mist: var(--khaki); --mist-fog: var(--khaki-fog);
--ivory: var(--cream); --ivory-deep: var(--bone);
--bg-card-warm: var(--earth-bright);
--text-muted: var(--khaki); --text-faint: var(--khaki-fog);
--gold-soft: var(--gold-faint);
--rule-mist: linear-gradient(to right, transparent, rgba(122,116,98,0.30) 50%, transparent);
--rule-burnt: linear-gradient(to right, transparent, var(--burnt) 20%, var(--burnt) 80%, transparent);
--step-eyebrow: var(--t-eyebrow); --step-small: var(--t-small); --step-body: var(--t-body);
--step-lead: var(--t-lead); --step-h4: var(--t-h4); --step-h3: var(--t-h3);
--step-h2: var(--t-h2); --step-h1: var(--t-h1); --step-display: var(--t-display);
--pad-section-y: var(--s-pad-section); --pad-section-y-tight: var(--s-pad-section); --pad-x: var(--s-pad-x);
--gap-1: var(--s-1); --gap-2: var(--s-2); --gap-3: var(--s-3); --gap-4: var(--s-4);
--gap-5: var(--s-5); --gap-6: var(--s-6); --gap-7: var(--s-7); --gap-8: var(--s-8); --gap-9: var(--s-9);
--dur-fast: var(--d-fast); --dur-base: var(--d-base); --dur-slow: var(--d-slow);
--shadow-lifted: var(--shadow-lift);
}
/* ─── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
font-family: var(--font-body);
font-size: var(--t-body);
line-height: 1.55;
font-weight: 400;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
font-synthesis: none; /* prevent fake-bold rendering of Bebas single-weight */
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
a:focus-visible, button:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 2px;
}
.skip-link {
position: absolute; left: -9999px;
background: var(--gold); color: var(--earth-deep);
padding: 12px 20px; font-weight: 700;
font-family: var(--font-accent); letter-spacing: 0.08em; text-transform: uppercase;
}
.skip-link:focus { left: 16px; top: 16px; z-index: 10000; }
/* ─── Typography helpers ────────────────────────────────────────── */
.eyebrow {
font-family: var(--font-accent);
font-size: var(--t-eyebrow);
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
display: inline-flex;
align-items: center;
gap: 12px;
}
.eyebrow::before {
content: '';
width: 28px;
height: 2px;
background: var(--gold);
}
.eyebrow--center::before { content: none; }
.eyebrow--center { display: block; text-align: center; }
.display {
font-family: var(--font-display);
font-weight: 400;
line-height: 0.92;
letter-spacing: 0.005em;
text-transform: uppercase;
}
.display--xl { font-size: var(--t-display); }
.display--l { font-size: var(--t-h1); }
.display--m { font-size: var(--t-h2); }
.display--s { font-size: var(--t-h3); }
.display .gold { color: var(--gold); }
.display .burnt { color: var(--burnt); }
.lead { font-size: var(--t-lead); line-height: 1.45; color: var(--cream); font-weight: 400; max-width: 64ch; }
.lead--dim { color: var(--khaki); }
.kicker {
font-family: var(--font-accent);
font-size: var(--t-small);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
font-weight: 600;
}
/* ─── CTA buttons ───────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 36px;
font-family: var(--font-accent);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
border-radius: 999px;
transition: transform var(--d-base) var(--ease-out),
box-shadow var(--d-base) var(--ease-out),
background var(--d-base) var(--ease-out),
color var(--d-base) var(--ease-out);
cursor: pointer;
white-space: nowrap;
}
.btn--primary {
background: var(--cream);
color: var(--earth-deep);
box-shadow: 0 8px 24px rgba(255, 247, 215, 0.18);
}
.btn--primary:hover {
background: var(--gold);
color: var(--earth-deep);
box-shadow: 0 14px 36px var(--gold-glow);
transform: translateY(-2px);
}
.btn--gold {
background: var(--gold);
color: var(--earth-deep);
}
.btn--gold:hover {
background: var(--gold-light);
transform: translateY(-2px);
box-shadow: 0 14px 36px var(--gold-glow);
}
.btn--ghost {
background: transparent;
color: var(--cream);
border: 1.5px solid rgba(255, 247, 215, 0.45);
}
.btn--ghost:hover {
border-color: var(--gold);
color: var(--gold);
}
.btn__arrow {
font-family: var(--font-body);
font-size: 18px;
font-weight: 600;
transition: transform var(--d-base) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }
/* ─── PT HEADER (replaces YOSHI editorial header + topbar) ─────── */
/* Transparent at top of page so the hero video reads edge-to-edge.
The .is-scrolled state (toggled by index.html JS at scrollY > 60)
restores the dark glass so the nav stays legible over light sections. */
.pt-header {
position: fixed; top: 0; left: 0; right: 0;
z-index: 100;
padding: 20px var(--s-pad-x);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: 1px solid transparent;
transition: background var(--d-base) var(--ease-out),
backdrop-filter var(--d-base) var(--ease-out),
border-color var(--d-base) var(--ease-out),
padding var(--d-base) var(--ease-out);
}
.pt-header.is-scrolled {
background: rgba(10, 9, 5, 0.82);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom-color: rgba(178, 147, 58, 0.18);
padding: 14px var(--s-pad-x);
}
.pt-header__brand { display: flex; align-items: center; flex-shrink: 0; }
/* New Limitless lockup (infinity + wordmark) ships at ~9:1 aspect.
Fix the HEIGHT so vertical rhythm with nav stays consistent across
viewports; let width flow from the intrinsic aspect ratio. */
.pt-header__brand img { height: 32px; width: auto; }
/* Mobile bumped 24 → 28px per Grid audit: at 24px on 2x DPR / 375px viewports
the Bebas-style stems anti-alias to mush. 28px clears the threshold and
stays on the 4/8 spacing grid. */
@media (max-width: 600px) { .pt-header__brand img { height: 28px; } }
.pt-nav { display: flex; align-items: center; gap: 28px; }
.pt-nav__link {
font-family: var(--font-accent);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cream);
transition: color var(--d-fast);
}
.pt-nav__link:hover, .pt-nav__link.is-active { color: var(--gold); }
.pt-nav__socials { display: flex; gap: 14px; margin: 0 8px; }
.pt-nav__socials a { color: var(--cream); transition: color var(--d-fast); }
.pt-nav__socials a:hover { color: var(--gold); }
.pt-nav__socials svg { width: 18px; height: 18px; }
.pt-nav__cta {
padding: 12px 22px;
background: var(--gold);
color: var(--earth-deep);
font-family: var(--font-accent);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: 999px;
transition: all var(--d-base) var(--ease-out);
}
.pt-nav__cta:hover { background: var(--cream); transform: translateY(-1px); }
/* ─── Services Dropdown ────────────────────────────────────────────
Mirrors the footer's Services column so visitors can jump straight to
a specific program from any page. Hover-triggered on desktop with a
:focus-within fallback for keyboard. Collapses to a static expanded
list inside the mobile drawer (no hover on touch). */
.pt-nav__item { position: relative; }
.pt-nav__item--has-dropdown > .pt-nav__link { cursor: pointer; }
.pt-nav__chevron {
display: inline-block;
margin-left: 4px;
font-size: 0.7em;
transition: transform var(--d-base) var(--ease-out);
vertical-align: middle;
}
.pt-nav__item--has-dropdown:hover .pt-nav__chevron,
.pt-nav__item--has-dropdown:focus-within .pt-nav__chevron {
transform: rotate(180deg);
}
.pt-nav__dropdown {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
background: rgba(10, 9, 5, 0.97);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid var(--gold-line);
border-radius: 10px;
padding: 10px 0;
min-width: 260px;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(178, 147, 58, 0.10);
opacity: 0;
pointer-events: none;
transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
z-index: 100;
}
/* Invisible bridge between trigger + dropdown so hover doesn't break in
the gap. */
.pt-nav__dropdown::before {
content: '';
position: absolute;
top: -14px; left: 0; right: 0;
height: 14px;
}
.pt-nav__item--has-dropdown:hover .pt-nav__dropdown,
.pt-nav__item--has-dropdown:focus-within .pt-nav__dropdown {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.pt-nav__dropdown-link {
display: block;
padding: 11px 22px;
font-family: var(--font-accent);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--cream);
text-decoration: none;
white-space: nowrap;
transition: background var(--d-fast), color var(--d-fast), padding-left var(--d-fast);
}
.pt-nav__dropdown-link:hover {
background: rgba(178, 147, 58, 0.10);
color: var(--gold);
padding-left: 28px;
}
.pt-nav__dropdown-divider {
height: 1px;
background: var(--gold-line);
margin: 6px 14px;
}
.pt-nav__dropdown-link--all { color: var(--gold-light); font-weight: 700; }
.pt-nav__dropdown-link--all:hover { color: var(--gold); }
/* Mobile drawer — dropdown becomes inline expanded list, no chevron rotation */
@media (max-width: 900px) {
.pt-nav__item { width: 100%; }
.pt-nav__dropdown {
position: static;
opacity: 1;
pointer-events: auto;
transform: none;
background: transparent;
border: none;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
padding: 8px 0 4px 16px;
min-width: 0;
z-index: auto;
}
.pt-nav__dropdown::before { display: none; }
.pt-nav__dropdown-link {
padding: 6px 0;
font-size: 14px;
color: rgba(255, 247, 215, 0.78);
white-space: normal;
}
.pt-nav__dropdown-link:hover { padding-left: 0; background: transparent; }
.pt-nav__chevron { display: none; }
.pt-nav__dropdown-divider { display: none; }
}
/* Hamburger toggle — DEFAULT visible (mobile-first), hidden on desktop.
Critical: source order matters. The base rule must come FIRST so the
later desktop @media query overrides it. Previous version had the
base rule AFTER the @media (max-width:900px) block, which made the
default `display: none` cascade win at mobile (same specificity,
later wins) — that's why the hamburger never appeared. */
.pt-nav__toggle {
display: flex;
width: 44px; height: 44px;
border: 1.5px solid rgba(255, 247, 215, 0.4);
border-radius: 999px;
align-items: center;
justify-content: center;
color: var(--cream);
background: rgba(10, 9, 5, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
}
.pt-nav__toggle:hover { border-color: var(--gold); color: var(--gold); }
@media (min-width: 901px) { .pt-nav__toggle { display: none !important; } }
@media (max-width: 900px) {
.pt-nav { display: none; }
.pt-nav.is-open {
display: flex;
position: fixed; top: 70px; left: 0; right: 0; bottom: 0;
flex-direction: column;
background: rgba(10, 9, 5, 0.96);
backdrop-filter: blur(20px);
padding: 40px 32px;
gap: 32px;
align-items: flex-start;
}
.pt-nav.is-open .pt-nav__link { font-size: 24px; }
}
/* ─── HERO BLEED (full-screen photo/video hero) ────────────────── */
.hero-bleed {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
isolation: isolate;
padding: 120px var(--s-pad-x) 80px;
background: var(--black);
}
.hero-bleed__media {
position: absolute;
inset: 0;
z-index: -2;
overflow: hidden;
}
.hero-bleed__media img,
.hero-bleed__media video,
.hero-bleed__media iframe {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
display: block;
}
.hero-bleed__media::after {
/* Cinematic vignette + duotone-leaning gradient for legibility */
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(10,9,5,0.55) 0%, rgba(10,9,5,0.20) 40%, rgba(10,9,5,0.75) 88%, rgba(10,9,5,0.95) 100%),
linear-gradient(90deg, rgba(10,9,5,0.55) 0%, rgba(10,9,5,0.12) 50%, rgba(10,9,5,0.30) 100%),
radial-gradient(ellipse at 70% 50%, rgba(178, 147, 58,0.10) 0%, transparent 70%);
z-index: 1;
}
.hero-bleed__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: 1400px;
margin: 0 auto;
}
.hero-bleed__eyebrow { margin-bottom: 24px; }
.hero-bleed__title {
font-family: var(--font-display);
font-size: var(--t-display);
line-height: 0.90;
font-weight: 400;
letter-spacing: 0.005em;
text-transform: uppercase;
color: var(--cream);
max-width: 16ch;
text-wrap: balance;
text-shadow: 0 4px 32px rgba(0,0,0,0.55);
}
/* Responsive headline scaling — prevents "LIMITLESS." truncation at
smaller viewports. Marc reported 2026-05-19 the headline cut off
("LIMIT" only) at 375 mobile, 768 tablet. v49 attempt #1 added
rules at `.hero-bleed__title` (0,1,0) but were overridden by a
higher-specificity `.hero-bleed--lower .hero-bleed__title` rule
(0,2,0) which still clamped at max 80px — too wide for 10-char
Bebas Neue "LIMITLESS." inside 375 viewport. v49 attempt #2 uses
the matching descendant selector to win the cascade. */
@media (max-width: 900px) {
.hero-bleed--lower .hero-bleed__title { font-size: clamp(44px, 8vw, 72px); }
}
@media (max-width: 600px) {
.hero-bleed--lower .hero-bleed__title { font-size: clamp(36px, 11vw, 52px); max-width: none; }
}
.hero-bleed__title .gold { color: var(--gold); }
.hero-bleed__sub {
margin-top: 28px;
font-family: var(--font-accent);
font-size: clamp(15px, 0.95rem + 0.4vw, 19px);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--cream);
max-width: 48ch;
font-weight: 500;
line-height: 1.4;
}
.hero-bleed__sub .gold { color: var(--gold-light); font-weight: 700; }
.hero-bleed__actions {
margin-top: 48px;
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.hero-bleed__scroll-hint {
position: absolute;
left: 50%;
bottom: 32px;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
color: var(--cream);
font-family: var(--font-accent);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
opacity: 0.7;
animation: scrollPulse 2.6s var(--ease-out) infinite;
}
.hero-bleed__scroll-hint svg { width: 22px; height: 22px; }
@keyframes scrollPulse {
0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.7; }
50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
}
/* ─── PROOF STRIP (NASM / years / clients badges) ──────────────── */
.proof-strip {
background: var(--earth-deep);
border-top: 1px solid var(--gold-line);
border-bottom: 1px solid var(--gold-line);
padding: 28px var(--s-pad-x);
}
.proof-strip__inner {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
align-items: center;
}
.proof-cell {
text-align: center;
}
.proof-cell__num {
font-family: var(--font-display);
font-size: clamp(28px, 1.5rem + 1.5vw, 48px);
color: var(--gold);
line-height: 1;
letter-spacing: 0.02em;
}
.proof-cell__label {
margin-top: 6px;
font-family: var(--font-accent);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--khaki);
}
@media (max-width: 700px) {
.proof-strip__inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
/* ─── SECTION wrapper ──────────────────────────────────────────── */
.section {
padding: var(--s-pad-section) var(--s-pad-x);
position: relative;
}
.section--earth { background: var(--earth-deep); color: var(--cream); }
.section--cream { background: var(--cream); color: var(--earth-deep); }
.section--cream .eyebrow { color: var(--burnt); }
.section--cream .eyebrow::before { background: var(--burnt); }
.section--cream .display .gold { color: var(--burnt); }
.section__inner { max-width: 1400px; margin: 0 auto; }
.section-head {
max-width: 56ch;
margin: 0 auto 64px;
text-align: center;
}
.section-head .eyebrow { margin-bottom: 20px; }
.section-head__title { font-family: var(--font-display); font-size: var(--t-h2); line-height: 0.95; }
.section-head__lead { margin-top: 24px; font-size: var(--t-lead); line-height: 1.5; color: inherit; opacity: 0.85; }
/* ─── SERVICE TILES (photo-tile grid, NOT editorial cards) ──────── */
.service-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 1100px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .service-grid { grid-template-columns: 1fr; } }
.service-tile {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 380px;
padding: 28px;
border-radius: 6px;
overflow: hidden;
isolation: isolate;
background: var(--earth);
transition: transform var(--d-base) var(--ease-out);
}
.service-tile:hover { transform: translateY(-6px); }
.service-tile__photo {
position: absolute; inset: 0;
z-index: -2;
background-size: cover;
background-position: center;
transition: transform var(--d-slow) var(--ease-out);
}
.service-tile:hover .service-tile__photo { transform: scale(1.05); }
.service-tile::before {
content: '';
position: absolute; inset: 0;
z-index: -1;
background: linear-gradient(180deg,
rgba(10,9,5,0.30) 0%,
rgba(10,9,5,0.20) 35%,
rgba(10,9,5,0.78) 78%,
rgba(10,9,5,0.92) 100%);
}
.service-tile__num {
position: absolute;
top: 24px; left: 28px;
font-family: var(--font-display);
font-size: 22px;
color: var(--gold);
letter-spacing: 0.05em;
}
.service-tile__eyebrow {
font-family: var(--font-accent);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold-light);
margin-bottom: 10px;
}
.service-tile__name {
font-family: var(--font-display);
font-size: clamp(28px, 1.6rem + 1vw, 38px);
line-height: 0.95;
color: var(--cream);
letter-spacing: 0.005em;
margin-bottom: 10px;
}
.service-tile__summary {
font-size: 15px;
line-height: 1.5;
color: rgba(255, 247, 215, 0.78);
margin-bottom: 18px;
max-width: 36ch;
}
.service-tile__link {
font-family: var(--font-accent);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
display: inline-flex;
align-items: center;
gap: 8px;
}
.service-tile__link::after {
content: '→';
transition: transform var(--d-base) var(--ease-out);
}
.service-tile:hover .service-tile__link::after { transform: translateX(4px); }
/* ─── ABOUT split (big portrait + body) ────────────────────────── */
.about-split {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 80px;
align-items: center;
}
@media (max-width: 900px) {
.about-split { grid-template-columns: 1fr; gap: 48px; }
}
.about-portrait {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 4px;
overflow: hidden;
box-shadow: var(--shadow-lift);
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-portrait::after {
/* Champion Gold horizon bar slipped across the portrait — brand-package callback */
content: '';
position: absolute;
left: 0; right: 0;
bottom: 12%;
height: 4px;
background: var(--gold);
box-shadow: 0 0 24px var(--gold-glow);
}
.about-body__title {
font-family: var(--font-display);
font-size: var(--t-h2);
line-height: 0.95;
margin: 16px 0 24px;
}
.about-body__lead {
font-size: var(--t-lead);
line-height: 1.5;
color: var(--cream);
margin-bottom: 24px;
}
.about-body__creds {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 32px;
}
.about-body__cred {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-accent);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cream);
}
.about-body__cred svg {
width: 22px; height: 22px;
color: var(--gold);
flex-shrink: 0;
}
/* ─── VIDEO ROW (Vimeo embeds) ─────────────────────────────────── */
.video-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 56px;
}
@media (max-width: 800px) { .video-row { grid-template-columns: 1fr; } }
.video-card {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 6px;
overflow: hidden;
background: var(--earth);
box-shadow: var(--shadow-card);
}
.video-card iframe { width: 100%; height: 100%; border: 0; }
.video-card__caption {
position: absolute;
left: 16px; bottom: 12px;
z-index: 2;
font-family: var(--font-accent);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--cream);
background: rgba(10,9,5,0.70);
padding: 6px 12px;
border-radius: 999px;
pointer-events: none;
}
/* ─── TESTIMONIAL CARDS ────────────────────────────────────────── */
.testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
@media (max-width: 1000px) { .testimonial-grid { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; } }
.testimonial {
background: var(--earth);
border: 1px solid var(--gold-line);
padding: 36px 32px;
border-radius: 4px;
position: relative;
display: flex;
flex-direction: column;
transition: transform var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}
.testimonial:hover {
transform: translateY(-4px);
border-color: var(--gold);
}
.testimonial__quote-mark {
font-family: var(--font-display);
font-size: 88px;
line-height: 0.6;
color: var(--gold);
margin-bottom: 8px;
opacity: 0.7;
}
.testimonial__body {
font-size: 16px;
line-height: 1.6;
color: var(--cream);
margin-bottom: 24px;
flex: 1;
}
.testimonial__attr {
padding-top: 20px;
border-top: 1px solid var(--gold-line);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.testimonial__name {
font-family: var(--font-display);
font-size: 22px;
letter-spacing: 0.04em;
color: var(--cream);
}
.testimonial__role {
font-family: var(--font-accent);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
font-weight: 600;
}
/* ─── BIG CTA BAND ─────────────────────────────────────────────── */
.cta-band {
position: relative;
padding: var(--s-pad-section) var(--s-pad-x);
background: var(--earth-deep);
text-align: center;
isolation: isolate;
overflow: hidden;
}
.cta-band__photo {
position: absolute; inset: 0;
z-index: -2;
background-size: cover;
background-position: center 25%;
filter: grayscale(15%);
}
.cta-band::before {
content: '';
position: absolute; inset: 0;
z-index: -1;
background: linear-gradient(180deg,
rgba(47,45,38,0.92) 0%,
rgba(47,45,38,0.82) 50%,
rgba(47,45,38,0.95) 100%);
}
.cta-band__inner { max-width: 880px; margin: 0 auto; }
.cta-band__title {
font-family: var(--font-display);
font-size: var(--t-h1);
line-height: 0.92;
color: var(--cream);
margin: 24px 0 24px;
}
.cta-band__title .gold { color: var(--gold); }
.cta-band__lead {
font-size: var(--t-lead);
line-height: 1.5;
color: var(--cream-soft);
max-width: 56ch;
margin: 0 auto 40px;
opacity: 0.92;
}
.cta-band__actions {
display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}
.cta-band__phone {
margin-top: 32px;
font-family: var(--font-accent);
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--khaki);
}
.cta-band__phone a { color: var(--gold); }
/* ─── GYM FACILITIES strip ─────────────────────────────────────── */
.facilities-strip {
background: var(--cream);
color: var(--earth-deep);
padding: 56px var(--s-pad-x);
}
.facilities-strip__inner {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: auto 1fr;
gap: 56px;
align-items: center;
}
@media (max-width: 800px) {
.facilities-strip__inner { grid-template-columns: 1fr; gap: 28px; }
}
.facilities-strip__label .eyebrow { color: var(--burnt); }
.facilities-strip__label .eyebrow::before { background: var(--burnt); }
.facilities-strip__label h3 {
font-family: var(--font-display);
font-size: var(--t-h3);
margin-top: 12px;
line-height: 0.95;
}
.facilities-list {
display: flex;
flex-wrap: wrap;
gap: 24px 40px;
}
.facility-cell {
font-family: var(--font-accent);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 12px;
}
.facility-cell::before {
content: '';
width: 8px; height: 8px;
background: var(--burnt);
border-radius: 50%;
flex-shrink: 0;
}
/* ─── FOOTER (PT register — bigger, more direct) ───────────────── */
.pt-footer {
background: #000;
color: var(--cream);
padding: 96px var(--s-pad-x) 32px;
border-top: 4px solid var(--gold);
}
.pt-footer__inner {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 48px;
}
@media (max-width: 900px) {
.pt-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.pt-footer__inner { grid-template-columns: 1fr; }
}
.pt-footer__brand img { width: 220px; height: auto; margin-bottom: 20px; }
.pt-footer__tagline {
font-family: var(--font-display);
font-size: 22px;
color: var(--gold);
letter-spacing: 0.04em;
margin-bottom: 20px;
}
.pt-footer__nap {
font-size: 14px;
line-height: 1.7;
color: rgba(255, 247, 215, 0.72);
}
.pt-footer__nap a { color: var(--cream); border-bottom: 1px solid var(--gold-line); }
.pt-footer__nap a:hover { color: var(--gold); border-color: var(--gold); }
.pt-footer__col-title {
font-family: var(--font-accent);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 20px;
}
.pt-footer__list { display: flex; flex-direction: column; gap: 10px; }
.pt-footer__list a {
font-size: 14px;
color: rgba(255, 247, 215, 0.78);
transition: color var(--d-fast);
}
.pt-footer__list a:hover { color: var(--gold); }
.pt-footer__bottom {
max-width: 1400px;
margin: 64px auto 0;
padding-top: 28px;
border-top: 1px solid rgba(255, 247, 215, 0.10);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
font-size: 12px;
font-family: var(--font-accent);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--khaki);
}
.pt-footer__bottom a { color: var(--khaki); }
.pt-footer__bottom a:hover { color: var(--gold); }
.pt-footer__byline {
margin-top: 40px;
text-align: center;
font-size: 12px;
font-family: var(--font-accent);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--khaki);
}
.pt-footer__byline a { color: var(--gold); }
.pt-footer__heart { color: var(--burnt); }
/* ─── Reveal animation (intersection-observer driven) ──────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-stagger { opacity: 1; transform: none; transition: none; }
.hero-bleed__scroll-hint { animation: none; }
* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
/* ─── Utility ───────────────────────────────────────────────────── */
.container { max-width: 1400px; margin: 0 auto; padding: 0 var(--s-pad-x); }
.mt-1{margin-top:var(--s-1);} .mt-2{margin-top:var(--s-2);} .mt-3{margin-top:var(--s-3);}
.mt-4{margin-top:var(--s-4);} .mt-5{margin-top:var(--s-5);} .mt-6{margin-top:var(--s-6);}
.mt-7{margin-top:var(--s-7);} .mt-8{margin-top:var(--s-8);} .mt-9{margin-top:var(--s-9);}
.text-center{text-align:center;}
.text-gold{color:var(--gold);} .text-burnt{color:var(--burnt);} .text-cream{color:var(--cream);}
/* ── LEGACY YOSHI styles (appended for backwards compat) ── */
/* The auto-generated long-tail pages (services/*, ca/*/*/*, etc.) still emit YOSHI editorial HTML structure. These rules let them render with the new Limitless tokens (earth + champion gold + bebas) until those page renderers get rewritten in build.mjs. */
/* ──────────────────────────────────────────────────────────────────
LIMITLESS FITNESS SD · Design System
Vintage athletic · Dark-first · Bebas Neue + Barlow + Barlow Condensed
v0.1 — Built on Phase 0 brand package (2026-05-17)
Palette extracted from Chris's Wix theme — authentic, not invented.
────────────────────────────────────────────────────────────────── */
:root {
/* — Limitless brand tokens (canonical names — use these in new CSS) — */
--earth: #47443B; /* Primary dark field · weight-room floor */
--earth-deep: #2F2D26; /* Deeper field for bg */
--earth-fog: #5A554A; /* Elevated surface */
--gold: #B2933A; /* Champion Gold · Christian's brand spec (was #B19237; 1-unit shift) */
--gold-light: #C9A848; /* Hover / highlight */
--gold-faint: rgba(178, 147, 58, 0.10);
--gold-line: rgba(178, 147, 58, 0.22);
--gold-soft: rgba(178, 147, 58, 0.06);
--burnt: #FA854F; /* Burnt Ember · secondary energy accent (Wix --wix-color-23) */
--burnt-light: #FF9F70;
--khaki: #B8AE99; /* Subtext · captions · quiet hierarchy (v0.5: bumped from #7A7462 for WCAG AA) */
--khaki-fog: #6E6755;
--cream: #FFF7D7; /* Warm background · print field · welcome */
--bone: #F2EBC9; /* Warmer ivory variant */
--white: #FFFFFF;
/* — Backwards-compat aliases (legacy YOSHI tokens used throughout CSS) — */
/* These map old names to the new Limitless palette so existing rule
selectors keep rendering correctly. New code should use the canonical
Limitless names above. */
--midnight: var(--earth);
--midnight-deep: var(--earth-deep);
--midnight-fog: var(--earth-fog);
--blue: var(--burnt);
--mist: var(--khaki);
--mist-fog: var(--khaki-fog);
--ivory: var(--cream);
--ivory-deep: var(--bone);
/* — Semantic — */
--bg: var(--earth-deep);
--bg-card: var(--earth);
--bg-card-warm: #3A372F;
--text: var(--cream);
--text-muted: var(--khaki);
--text-faint: var(--khaki-fog);
--accent: var(--gold);
--accent-hot: var(--burnt);
/* — Type families · athletic stack (replaces Cormorant/Montserrat) — */
--font-display: 'Bebas Neue', 'Oswald', 'Impact', sans-serif;
--font-body: 'Barlow', system-ui, -apple-system, sans-serif;
--font-accent: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
/* — Fluid type scale (editorial, NOT major-third uniform) — */
--step-eyebrow: clamp(11px, 0.65rem + 0.1vw, 12px);
--step-small: clamp(13px, 0.78rem + 0.1vw, 14px);
--step-body: clamp(15px, 0.9rem + 0.15vw, 17px);
--step-lead: clamp(18px, 1.05rem + 0.3vw, 21px);
--step-h4: clamp(22px, 1.2rem + 0.5vw, 28px);
--step-h3: clamp(28px, 1.5rem + 0.8vw, 38px);
--step-h2: clamp(38px, 2rem + 1.4vw, 56px);
--step-h1: clamp(54px, 2.5rem + 4vw, 112px);
--step-display: clamp(72px, 3rem + 6vw, 168px);
/* — Spacing rhythm (varies, not uniform 80) — */
--pad-section-y: clamp(80px, 8vw, 140px);
--pad-section-y-tight: clamp(56px, 5vw, 96px);
--pad-x: clamp(24px, 5vw, 96px);
--gap-1: 4px; --gap-2: 8px; --gap-3: 12px;
--gap-4: 16px; --gap-5: 24px; --gap-6: 32px;
--gap-7: 48px; --gap-8: 64px; --gap-9: 96px;
/* — Motion — */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-snap: cubic-bezier(0.2, 0, 0, 1);
--dur-fast: 180ms;
--dur-base: 320ms;
--dur-slow: 620ms;
/* — Shadows — */
--shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset,
0 8px 28px rgba(0,0,0,0.32),
0 1px 3px rgba(0,0,0,0.18);
--shadow-lifted: 0 1px 0 rgba(255,255,255,0.05) inset,
0 24px 60px rgba(0,0,0,0.40),
0 8px 16px rgba(0,0,0,0.20);
/* — Hairline rule — */
--rule-gold: linear-gradient(to right, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
--rule-mist: linear-gradient(to right, transparent, rgba(122,116,98,0.30) 50%, transparent);
--rule-burnt: linear-gradient(to right, transparent, var(--burnt) 20%, var(--burnt) 80%, transparent);
}
/* ── Reset (deliberate, not normalize) ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
font-family: var(--font-body);
font-size: var(--step-body);
line-height: 1.6;
font-weight: 400;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
/* Prevent fake-bold rendering of Bebas Neue (single-weight font) —
any selector that sets font-weight: 700 on Bebas becomes a no-op
instead of producing a synthetic-bold blur. */
font-synthesis: none;
}
/* Subtle Champion Gold dot pattern — vintage-athletic texture (replaces YOSHI editorial dot) */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: radial-gradient(circle at center, rgba(178, 147, 58,0.04) 1px, transparent 1px);
background-size: 56px 56px;
pointer-events: none;
z-index: 0;
opacity: 0.7;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 2px;
}
ul, ol { list-style: none; }
/* Skip-to-content for accessibility */
.skip-link {
position: absolute; left: -9999px;
background: var(--gold); color: var(--midnight-deep);
padding: 12px 20px; font-weight: 600;
}
.skip-link:focus { left: 16px; top: 16px; z-index: 1000; }
/* ─────────────────────────── TYPOGRAPHY ─────────────────────────── */
.eyebrow {
font-family: var(--font-body);
font-size: var(--step-eyebrow);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before {
content: '';
display: block;
width: 28px; height: 1px;
background: var(--gold);
}
.display, .display * {
font-family: var(--font-display);
font-weight: 300;
letter-spacing: -0.022em;
line-height: 0.96;
}
.serif-italic {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
letter-spacing: -0.005em;
}
h1, .h1 {
font-family: var(--font-display);
font-size: var(--step-h1);
font-weight: 300;
line-height: 0.98;
letter-spacing: -0.025em;
color: var(--ivory);
}
h2, .h2 {
font-family: var(--font-display);
font-size: var(--step-h2);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.015em;
}
h3, .h3 {
font-family: var(--font-display);
font-size: var(--step-h3);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.01em;
}
h4, .h4 {
font-family: var(--font-body);
font-size: var(--step-h4);
font-weight: 500;
line-height: 1.25;
letter-spacing: 0;
}
.lead {
font-family: var(--font-display);
font-size: var(--step-lead);
font-weight: 400;
line-height: 1.5;
color: var(--ivory);
max-width: 56ch;
}
.body-large {
font-size: clamp(16px, 0.95rem + 0.2vw, 18px);
line-height: 1.65;
color: var(--text-muted);
max-width: 64ch;
}
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
/* ─────────────────────────── LAYOUT ─────────────────────────── */
.container {
width: 100%;
max-width: 1320px;
margin-inline: auto;
padding-inline: var(--pad-x);
}
.container-narrow {
width: 100%;
max-width: 920px;
margin-inline: auto;
padding-inline: var(--pad-x);
}
.section { padding-block: var(--pad-section-y); position: relative; }
.section--tight { padding-block: var(--pad-section-y-tight); }
.section--dark { background: var(--midnight-deep); }
.section--midnight { background: var(--midnight); }
.section--warm { background: linear-gradient(180deg, var(--midnight) 0%, var(--midnight-deep) 100%); }
.rule-gold {
height: 1px;
background: var(--rule-gold);
border: 0;
margin: 0;
}
.rule-gold--short {
height: 1px;
width: 64px;
background: var(--gold);
border: 0;
}
/* Editorial section number — huge faded gold "01" "02" */
.section-num {
font-family: var(--font-display);
font-size: clamp(120px, 16vw, 240px);
font-weight: 300;
line-height: 0.85;
color: var(--gold);
opacity: 0.07;
letter-spacing: -0.04em;
position: absolute;
top: clamp(40px, 6vw, 80px);
right: var(--pad-x);
pointer-events: none;
user-select: none;
}
/* ─────────────────────────── HEADER + NAV ─────────────────────────── */
.topbar {
background: var(--midnight-deep);
border-bottom: 1px solid rgba(255,255,255,0.04);
font-size: 12px;
letter-spacing: 0.05em;
color: var(--mist);
}
.topbar__inner {
display: flex; align-items: center; justify-content: space-between;
padding: 10px var(--pad-x);
gap: 24px; flex-wrap: wrap;
}
.topbar__phone { color: var(--ivory); font-weight: 500; letter-spacing: 0.04em; }
.topbar__phone strong { color: var(--gold); margin-right: 6px; letter-spacing: 0.18em; font-size: 10px; font-weight: 700; }
.topbar__as-seen {
display: inline-flex; align-items: center; gap: 8px;
padding: 4px 12px;
background: var(--gold-faint);
border: 1px solid var(--gold-line);
border-radius: 999px;
color: var(--gold-light);
font-size: 11px; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
}
.topbar__as-seen::before {
content: ''; width: 5px; height: 5px;
background: var(--gold); border-radius: 50%;
box-shadow: 0 0 0 3px rgba(178, 147, 58,0.20);
}
.header {
position: sticky; top: 0; z-index: 50;
background: rgba(20, 29, 40, 0.92);
backdrop-filter: blur(18px) saturate(1.4);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.header__inner {
display: flex; align-items: center; justify-content: space-between;
padding: 18px var(--pad-x);
gap: 32px;
}
.brand { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.brand__mark { width: 52px; height: 52px; flex-shrink: 0; }
/* ── Limitless text wordmark (CSS-typeset until real SVG ships) ── */
/* Bebas Neue "LIMITLESS" with a Champion Gold horizon bar — Tracksmith
finishing-line treatment, matches the Phase 0 brand package monogram. */
.brand-lockup {
display: inline-flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
line-height: 1;
}
.brand-lockup__mark {
font-family: var(--font-display);
font-size: 30px;
letter-spacing: 0.08em;
color: var(--cream);
text-transform: uppercase;
font-weight: 400;
line-height: 1;
}
.brand-lockup__bar {
display: block;
height: 3px;
width: 100%;
background: var(--gold);
}
@media (max-width: 600px) {
.brand-lockup__mark { font-size: 24px; }
.brand-lockup__bar { height: 2px; }
}
/* Legacy YOSHI lockup (kept for the unused PNG fallback path) */
.brand-lockup--img {
display: block;
height: 56px;
width: auto;
flex-shrink: 0;
}
/* legacy media rule removed — .brand-lockup is now a flex column, not an img */
.brand__word {
font-family: var(--font-body);
font-size: 13px; font-weight: 600;
letter-spacing: 0.24em; text-transform: uppercase;
line-height: 1.1; color: var(--ivory);
}
.brand__word span {
display: block;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.32em;
color: var(--gold);
margin-top: 4px;
}
.nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }
.nav__link {
font-family: var(--font-body);
font-size: 13px; font-weight: 500;
letter-spacing: 0.05em;
color: var(--ivory);
position: relative;
padding: 8px 0;
transition: color var(--dur-fast) var(--ease-out);
}
.nav__link::after {
content: '';
position: absolute; bottom: 0; left: 0;
width: 0; height: 1px;
background: var(--gold);
transition: width var(--dur-base) var(--ease-out);
}
.nav__link:hover { color: var(--gold-light); }
.nav__link:hover::after { width: 100%; }
.nav__cta {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 22px;
background: var(--gold);
color: var(--midnight-deep);
font-family: var(--font-body);
font-size: 12px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
border-radius: 2px;
transition: background var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.nav__cta:hover { background: var(--gold-light); transform: translateY(-1px); }
.nav__toggle { display: none; }
.nav__toggle-icon--close { display: none; }
/* Mobile: nav becomes a slide-in drawer from the right; toggle button appears */
@media (max-width: 900px) {
.nav {
display: flex; /* defensive — don't rely on desktop rule cascading */
position: fixed;
top: 0; right: 0;
width: min(86vw, 380px);
height: 100vh;
height: 100svh;
background: linear-gradient(180deg, var(--midnight) 0%, var(--midnight-deep) 100%);
border-left: 1px solid var(--gold-line);
box-shadow: -20px 0 60px rgba(0,0,0,0.45);
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
padding: clamp(88px, 16vw, 120px) clamp(24px, 6vw, 36px) 32px;
transform: translateX(100%);
transition: transform 360ms var(--ease-out);
z-index: 100;
overflow-y: auto;
overscroll-behavior: contain;
}
.nav--open { transform: translateX(0); }
.nav__link {
font-family: var(--font-display);
font-size: 22px;
font-weight: 400;
letter-spacing: 0;
padding: 18px 0;
border-bottom: 1px solid var(--gold-faint);
width: 100%;
}
.nav__link::after { display: none; }
.nav__link:hover { color: var(--gold-light); }
.nav__cta {
margin-top: 24px;
justify-content: center;
width: 100%;
padding: 16px 22px;
}
/* Toggle button: visible on mobile, fixed to header */
.nav__toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
color: var(--ivory);
background: transparent;
border: 1px solid var(--gold-faint);
border-radius: 4px;
cursor: pointer;
position: relative;
z-index: 101;
transition: border-color var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.nav__toggle:hover { border-color: var(--gold-line); color: var(--gold-light); }
.nav__toggle:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon--open { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon--close { display: inline-flex; }
/* Backdrop behind the drawer */
.nav-backdrop {
position: fixed; inset: 0;
background: rgba(20,29,40,0.55);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
transition: opacity 360ms var(--ease-out);
z-index: 99;
}
.nav-backdrop--show { opacity: 1; pointer-events: auto; }
}
/* Larger desktops: ensure the backdrop never bleeds in */
@media (min-width: 901px) {
.nav-backdrop { display: none; }
}
/* Reduced-motion: snap the drawer instead of sliding */
@media (prefers-reduced-motion: reduce) {
.nav, .nav-backdrop { transition: none !important; }
}
/* ─────────────────────────── CINEMATIC HERO ─────────────────────────── */
.hero-cine {
position: relative;
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
isolation: isolate;
color: var(--ivory);
padding: clamp(120px, 14vh, 200px) var(--pad-x) clamp(48px, 6vw, 80px);
}
/* Layer 0: video / image background, ken-burns slow zoom */
.hero-cine__bg {
position: absolute;
inset: 0;
z-index: -3;
overflow: hidden;
background: var(--midnight-deep);
}
.hero-cine__bg video,
.hero-cine__bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
animation: ken-burns 28s ease-in-out infinite alternate;
will-change: transform;
}
.hero-cine__bg video { z-index: 1; }
.hero-cine__bg img { z-index: 0; }
@keyframes ken-burns {
from { transform: scale(1.02) translate(0, 0); }
to { transform: scale(1.12) translate(-1.5%, -2%); }
}
/* Layer 1: gradient overlay for legibility */
.hero-cine__overlay {
position: absolute;
inset: 0;
z-index: -2;
background:
linear-gradient(180deg, rgba(20,29,40,0.45) 0%, rgba(20,29,40,0.15) 35%, rgba(20,29,40,0.85) 80%, var(--midnight-deep) 100%),
linear-gradient(90deg, rgba(20,29,40,0.78) 0%, rgba(20,29,40,0.40) 45%, rgba(20,29,40,0.15) 100%);
pointer-events: none;
}
/* Layer 2: subtle film grain */
.hero-cine__grain {
position: absolute;
inset: 0;
z-index: -1;
opacity: 0.12;
mix-blend-mode: overlay;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
}
/* Layer 3: cursor-following gold glow */
.hero-cine__glow {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: radial-gradient(circle 480px at var(--mx, 30%) var(--my, 40%), rgba(178, 147, 58,0.18) 0%, transparent 60%);
transition: opacity 600ms ease;
}
/* Layer 4: faded diamond emblem watermark */
.hero-cine__emblem {
position: absolute;
right: clamp(-80px, -4vw, 40px);
top: 50%;
transform: translateY(-50%);
width: clamp(420px, 50vw, 720px);
height: auto;
opacity: 0.05;
z-index: -1;
pointer-events: none;
}
/* Hero content — the editorial moment */
.hero-cine__content {
position: relative;
z-index: 2;
max-width: 1320px;
width: 100%;
margin: 0 auto;
}
.hero-cine__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: clamp(20px, 3vw, 32px);
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
}
.hero-cine__eyebrow::before {
content: '';
width: 32px;
height: 1px;
background: var(--gold);
}
.hero-cine__headline {
font-family: var(--font-display);
font-size: clamp(54px, 8vw, 132px);
font-weight: 300;
line-height: 0.94;
letter-spacing: -0.030em;
color: var(--white);
max-width: 14ch;
text-shadow: 0 2px 60px rgba(0,0,0,0.55);
margin-bottom: clamp(24px, 3vw, 36px);
}
.hero-cine__headline em {
font-style: italic;
font-weight: 400;
color: var(--gold-light);
}
.hero-cine__sub {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(19px, 1.1rem + 0.6vw, 26px);
line-height: 1.45;
color: var(--ivory);
max-width: 48ch;
margin-bottom: clamp(36px, 4vw, 56px);
text-shadow: 0 1px 20px rgba(0,0,0,0.6);
}
.hero-cine__ctas {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-bottom: clamp(40px, 5vw, 64px);
}
.hero-cine__proof {
display: flex;
align-items: center;
gap: clamp(20px, 3vw, 40px);
padding-top: 28px;
border-top: 1px solid rgba(245,240,232,0.18);
flex-wrap: wrap;
}
.hero-cine__proof-cell {
display: flex;
flex-direction: column;
gap: 4px;
}
.hero-cine__proof-num {
font-family: var(--font-display);
font-size: clamp(28px, 2.4vw, 38px);
font-weight: 400;
line-height: 1;
color: var(--ivory);
letter-spacing: -0.015em;
}
.hero-cine__proof-num--stars { color: var(--gold); letter-spacing: 4px; font-family: var(--font-body); }
.hero-cine__proof-label {
font-family: var(--font-body);
font-size: 10px; font-weight: 600;
letter-spacing: 0.20em; text-transform: uppercase;
color: var(--mist);
}
.hero-cine__proof-sep {
width: 1px;
height: 38px;
background: rgba(245,240,232,0.18);
}
/* Scroll indicator */
.hero-cine__scroll {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: var(--mist);
font-family: var(--font-body);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
opacity: 0.7;
animation: scroll-bob 2.4s ease-in-out infinite;
}
.hero-cine__scroll-line {
width: 1px;
height: 36px;
background: linear-gradient(to bottom, var(--gold) 0%, transparent 100%);
}
@keyframes scroll-bob {
0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.7; }
50% { transform: translateX(-50%) translateY(6px); opacity: 1; }
}
/* ─── AGENT STRIP — replaces the in-hero card ─── */
.agent-strip {
background: var(--midnight);
border-top: 1px solid rgba(178, 147, 58,0.18);
border-bottom: 1px solid rgba(178, 147, 58,0.18);
padding: clamp(40px, 5vw, 64px) var(--pad-x);
position: relative;
}
.agent-strip::before {
content: '';
position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
width: 120px; height: 1px; background: var(--gold);
}
.agent-strip__inner {
max-width: 1320px;
margin-inline: auto;
display: grid;
grid-template-columns: auto 1fr auto;
gap: clamp(28px, 4vw, 64px);
align-items: center;
}
@media (max-width: 900px) {
.agent-strip__inner { grid-template-columns: 1fr; text-align: left; }
}
.agent-strip__avatar {
width: 88px; height: 88px;
border-radius: 50%;
border: 2px solid var(--gold);
padding: 3px;
background: var(--midnight-deep);
overflow: hidden;
flex-shrink: 0;
}
.agent-strip__avatar img {
width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
.agent-strip__copy {
display: flex; flex-direction: column; gap: 6px;
}
.agent-strip__name {
font-family: var(--font-display);
font-size: clamp(22px, 1.5vw, 28px);
font-weight: 500;
color: var(--ivory);
line-height: 1.1;
letter-spacing: -0.01em;
}
.agent-strip__role {
font-family: var(--font-body);
font-size: 10px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold);
}
.agent-strip__pitch {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(15px, 1vw, 17px);
color: var(--mist);
line-height: 1.5;
max-width: 56ch;
margin-top: 4px;
}
.agent-strip__cta {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px;
background: transparent;
color: var(--gold);
border: 1px solid var(--gold);
font-family: var(--font-body);
font-size: 11px; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
border-radius: 2px;
transition: all var(--dur-base) var(--ease-out);
}
.agent-strip__cta:hover {
background: var(--gold); color: var(--midnight-deep);
}
/* Legacy .hero keep as fallback */
.hero {
position: relative;
min-height: clamp(680px, 92vh, 920px);
display: grid;
grid-template-columns: 1.25fr 0.75fr;
gap: clamp(40px, 6vw, 96px);
padding: clamp(72px, 9vw, 140px) var(--pad-x) clamp(60px, 7vw, 96px);
overflow: hidden;
background:
radial-gradient(ellipse at 18% 35%, rgba(178, 147, 58,0.08) 0%, transparent 55%),
radial-gradient(ellipse at 92% 90%, rgba(44, 74, 124, 0.12) 0%, transparent 50%),
linear-gradient(180deg, var(--midnight) 0%, var(--midnight-deep) 100%);
}
.hero::after {
content: '';
position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 0;
height: 1px;
background: var(--rule-gold);
}
.hero__content {
display: flex; flex-direction: column; justify-content: center;
position: relative; z-index: 2;
max-width: 760px;
}
.hero__eyebrow { margin-bottom: clamp(20px, 3vw, 32px); }
.hero__headline {
font-family: var(--font-display);
font-size: var(--step-h1);
font-weight: 300;
line-height: 0.96;
letter-spacing: -0.028em;
color: var(--ivory);
max-width: 14ch;
margin-bottom: clamp(20px, 3vw, 32px);
}
.hero__headline em {
font-style: italic;
font-weight: 400;
color: var(--gold-light);
}
.hero__sub {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(18px, 1.05rem + 0.5vw, 24px);
font-weight: 400;
line-height: 1.5;
color: var(--ivory);
max-width: 46ch;
margin-bottom: clamp(32px, 4vw, 48px);
opacity: 0.86;
}
.hero__ctas {
display: flex; gap: 16px; flex-wrap: wrap;
margin-bottom: clamp(40px, 5vw, 64px);
}
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 16px 28px;
font-family: var(--font-body);
font-size: 12px; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
border-radius: 2px;
transition: all var(--dur-base) var(--ease-out);
cursor: pointer;
}
.btn--gold {
background: var(--gold);
color: var(--midnight-deep);
box-shadow: 0 8px 24px rgba(178, 147, 58,0.20);
}
.btn--gold:hover {
background: var(--gold-light);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(178, 147, 58,0.30);
}
.btn--outline {
background: transparent;
color: var(--ivory);
border: 1px solid rgba(245,240,232,0.30);
}
.btn--outline:hover {
border-color: var(--gold);
color: var(--gold-light);
}
.btn__arrow { font-family: var(--font-body); transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.hero__proof {
display: flex; align-items: center; gap: 28px;
padding-top: 28px;
border-top: 1px solid rgba(245,240,232,0.10);
max-width: 540px;
}
.hero__proof-stars {
color: var(--gold);
font-size: 16px;
letter-spacing: 2px;
}
.hero__proof-text {
font-size: 13px;
color: var(--text-muted);
line-height: 1.5;
}
.hero__proof-text strong {
display: block;
color: var(--ivory);
font-weight: 600;
letter-spacing: 0.04em;
margin-bottom: 2px;
}
.hero__side {
position: relative; z-index: 2;
display: flex; flex-direction: column; justify-content: center;
align-items: flex-end;
}
.hero__card {
position: relative;
width: 100%;
max-width: 380px;
background: var(--bg-card-warm);
border: 1px solid rgba(178, 147, 58,0.18);
padding: 36px 32px;
border-radius: 2px;
box-shadow: var(--shadow-lifted);
}
.hero__card::before {
content: '';
position: absolute; top: -1px; left: 24px; right: 24px;
height: 2px; background: var(--gold);
}
.hero__card-eyebrow {
font-family: var(--font-body);
font-size: 10px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold);
margin-bottom: 18px;
}
.hero__card-headshot-wrap {
width: 92px; height: 92px;
border-radius: 50%;
overflow: hidden;
margin-bottom: 18px;
border: 2px solid var(--gold);
padding: 3px;
}
.hero__card-headshot {
width: 100%; height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
background: var(--midnight);
}
.hero__card-name {
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
line-height: 1.1;
color: var(--ivory);
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.hero__card-role {
font-family: var(--font-body);
font-size: 11px; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--gold);
margin-bottom: 24px;
}
.hero__card-meta {
display: grid; gap: 14px;
font-size: 13px; line-height: 1.4;
color: var(--text-muted);
}
.hero__card-meta-row {
display: grid;
grid-template-columns: 14px 1fr;
gap: 12px;
align-items: start;
}
.hero__card-meta-row::before {
content: '';
margin-top: 6px;
width: 6px; height: 6px;
background: var(--gold);
border-radius: 0;
transform: rotate(45deg);
}
.hero__card-meta strong { color: var(--ivory); font-weight: 600; }
@media (max-width: 1024px) {
.hero { grid-template-columns: 1fr; gap: 48px; min-height: auto; }
.hero__side { align-items: flex-start; }
.hero__card { max-width: 100%; }
}
/* ─────────────────────────── PRESS STRIP ─────────────────────────── */
.press-strip {
padding: 32px var(--pad-x);
background: var(--midnight-deep);
border-top: 1px solid rgba(178, 147, 58,0.10);
border-bottom: 1px solid rgba(178, 147, 58,0.10);
}
.press-strip__inner {
max-width: 1320px;
margin-inline: auto;
display: flex; align-items: center; justify-content: center;
gap: clamp(24px, 5vw, 72px);
flex-wrap: wrap;
}
.press-strip__label {
font-family: var(--font-body);
font-size: 10px; font-weight: 700;
letter-spacing: 0.32em; text-transform: uppercase;
color: var(--mist);
}
.press-strip__outlet {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(20px, 1.4vw, 26px);
font-weight: 400;
color: var(--ivory);
letter-spacing: 0.04em;
}
.press-strip__div {
width: 1px; height: 18px;
background: rgba(178, 147, 58,0.30);
}
/* ─────────────────────────── NEWS DOSSIER (world-class) ─────────────────────────── */
.dossier {
background: var(--midnight);
position: relative;
}
.dossier::before {
/* Subtle vertical column rule on the right — magazine layout cue */
content: '';
position: absolute;
top: 0; bottom: 0;
right: clamp(12px, 4vw, 56px);
width: 1px;
background: linear-gradient(180deg, transparent 0%, rgba(178, 147, 58,0.12) 22%, rgba(178, 147, 58,0.12) 78%, transparent 100%);
pointer-events: none;
}
.dossier__head {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(40px, 6vw, 96px);
align-items: end;
margin-bottom: clamp(48px, 6vw, 80px);
}
.dossier__head-right {
font-family: var(--font-display);
font-size: clamp(16px, 1.25vw, 18px);
line-height: 1.65;
color: var(--text-muted);
max-width: 52ch;
}
.dossier__head-right em { font-style: italic; color: var(--gold-light); font-weight: 400; }
.dossier__head-link {
display: inline-block;
margin-top: 18px;
font-family: var(--font-body);
font-size: 12px; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--gold);
border-bottom: 1px solid rgba(178, 147, 58,0.35);
padding-bottom: 2px;
transition: color var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.dossier__head-link:hover { color: var(--gold-light); border-color: var(--gold-light); }
.dossier__title {
font-family: var(--font-display);
font-size: var(--step-h2);
font-weight: 400;
line-height: 1.0;
letter-spacing: -0.015em;
color: var(--ivory);
margin-top: 24px;
max-width: 14ch;
}
.dossier__title em { font-style: italic; color: var(--gold-light); font-weight: 400; }
/* ─── Stat strip (on the /news/ page) ─── */
.dossier__stat-strip {
display: flex; align-items: center; justify-content: center;
gap: clamp(24px, 4vw, 56px);
padding: 32px 0;
margin-bottom: clamp(48px, 6vw, 72px);
border-top: 1px solid rgba(178, 147, 58,0.12);
border-bottom: 1px solid rgba(178, 147, 58,0.12);
flex-wrap: wrap;
}
.dossier__stat { text-align: center; }
.dossier__stat-num {
font-family: var(--font-display);
font-size: clamp(36px, 4vw, 56px);
font-weight: 400;
line-height: 1;
color: var(--gold-light);
letter-spacing: -0.02em;
}
.dossier__stat-label {
margin-top: 8px;
font-family: var(--font-body);
font-size: 11px; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--mist);
}
.dossier__stat-sep {
width: 1px; height: 36px;
background: var(--gold-line);
}
/* ─── Feature row (1-up hero card) + series head ─── */
.dossier__feature-row {
margin-bottom: clamp(56px, 7vw, 96px);
}
.dossier__series-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 32px;
margin-bottom: clamp(32px, 4vw, 48px);
padding-bottom: 24px;
border-bottom: 1px solid var(--gold-line);
flex-wrap: wrap;
}
.dossier__series-title {
font-family: var(--font-display);
font-size: clamp(22px, 2vw, 32px);
font-weight: 400;
line-height: 1.2;
color: var(--ivory);
letter-spacing: -0.01em;
max-width: 32ch;
margin: 0;
}
.dossier__series-title em { font-style: italic; color: var(--gold-light); font-weight: 400; }
/* ─── Supporting grid ─── */
.dossier__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 2.5vw, 36px);
}
@media (max-width: 1024px) {
.dossier__grid { grid-template-columns: 1fr; }
.dossier__head { grid-template-columns: 1fr; }
.dossier__series-head { flex-direction: column; align-items: flex-start; }
}
/* ─── Card base ─── */
.news-card {
background: var(--midnight-deep);
border: 1px solid var(--gold-faint);
display: flex; flex-direction: column;
transition: border-color var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.news-card:hover {
border-color: rgba(178, 147, 58,0.35);
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 2px 0 var(--gold-faint) inset;
}
/* ─── Feature variant: side-by-side on desktop ─── */
.news-card--feature {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 0;
}
.news-card--feature .news-card__media { aspect-ratio: 4 / 3; }
.news-card--feature .news-card__body {
padding: clamp(32px, 3.5vw, 56px);
gap: 20px;
justify-content: center;
}
.news-card--feature .news-card__title {
font-size: clamp(26px, 2.4vw, 36px);
line-height: 1.1;
}
.news-card--feature .news-card__quote {
font-size: clamp(17px, 1.5vw, 21px);
line-height: 1.5;
}
@media (max-width: 1024px) {
.news-card--feature { grid-template-columns: 1fr; }
.news-card--feature .news-card__media { aspect-ratio: 16 / 9; }
}
/* ─── Media (thumbnail + overlays) ─── */
.news-card__media {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--midnight-deep);
display: block;
}
.news-card__thumb {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 35%;
transition: transform 1200ms var(--ease-out), filter 600ms var(--ease-out);
filter: saturate(0.92) contrast(1.02);
}
.news-card:hover .news-card__thumb {
transform: scale(1.045);
filter: saturate(1) contrast(1.04);
}
.news-card__media-grade {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(20,29,40,0.55) 0%, transparent 30%, transparent 55%, rgba(20,29,40,0.85) 100%),
linear-gradient(90deg, rgba(20,29,40,0.25) 0%, transparent 25%);
pointer-events: none;
z-index: 1;
}
.news-card__media::after {
/* Tiny gold rule along the bottom of the media — premium magazine cue */
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: linear-gradient(90deg, var(--gold) 0%, transparent 60%);
z-index: 2;
transform: scaleX(0.3);
transform-origin: left;
transition: transform 600ms var(--ease-out);
}
.news-card:hover .news-card__media::after { transform: scaleX(1); }
.news-card__media-top {
position: absolute;
top: 16px; left: 16px; right: 16px;
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
z-index: 3;
}
.news-card__kicker {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
background: rgba(20,29,40,0.72);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(178, 147, 58,0.30);
font-family: var(--font-body);
font-size: 10px; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--gold);
}
.news-card__kicker-dot {
width: 5px; height: 5px;
background: var(--gold);
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(178, 147, 58,0.22);
}
.news-card__date-pill {
padding: 6px 10px;
background: rgba(20,29,40,0.72);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(245,240,232,0.18);
font-family: var(--font-body);
font-size: 10px; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ivory);
}
.news-card__media-bottom {
position: absolute;
bottom: 16px; left: 16px; right: 16px;
z-index: 3;
}
.news-card__outlet-mark {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(14px, 1vw, 17px);
letter-spacing: 0.01em;
color: var(--ivory);
opacity: 0.82;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
/* ─── Play button (center, hover-amplified) ─── */
.news-card__play {
position: absolute; top: 50%; left: 50%;
width: 64px; height: 64px;
transform: translate(-50%, -50%) scale(0.9);
background: var(--gold);
color: var(--midnight-deep);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(0,0,0,0.45),
0 0 0 0 rgba(178, 147, 58,0);
transition: transform 320ms var(--ease-out),
box-shadow 320ms var(--ease-out),
background-color 320ms var(--ease-out);
z-index: 4;
opacity: 0.94;
}
.news-card:hover .news-card__play {
transform: translate(-50%, -50%) scale(1.06);
box-shadow: 0 12px 32px rgba(0,0,0,0.55),
0 0 0 12px var(--gold-faint);
background-color: var(--gold-light);
opacity: 1;
}
.news-card__play svg { width: 22px; height: 22px; margin-left: 3px; }
.news-card--feature .news-card__play { width: 76px; height: 76px; }
.news-card--feature .news-card__play svg { width: 26px; height: 26px; }
/* ─── Body ─── */
.news-card__body {
padding: 28px 28px 32px;
display: flex; flex-direction: column; gap: 14px;
flex-grow: 1;
}
.news-card__meta {
display: flex; align-items: center; flex-wrap: wrap;
gap: 12px;
font-family: var(--font-body);
font-size: 10px; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--gold);
}
.news-card__meta-sep {
width: 1px; height: 10px;
background: rgba(178, 147, 58,0.32);
}
.news-card__meta-reporter {
color: var(--mist);
font-weight: 600;
letter-spacing: 0.14em;
}
.news-card__meta-date {
color: var(--mist);
font-weight: 500;
letter-spacing: 0.14em;
}
.news-card__title {
font-family: var(--font-display);
font-size: clamp(20px, 1.4vw, 24px);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.005em;
color: var(--ivory);
margin: 0;
}
.news-card__quote {
position: relative;
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 15px;
line-height: 1.55;
color: var(--text-muted);
padding-left: 20px;
margin: 4px 0 0;
border-left: 1px solid var(--gold);
}
.news-card__quote-mark {
font-family: var(--font-display);
font-style: italic;
font-size: 1.05em;
color: var(--gold);
opacity: 0.9;
margin-right: 1px;
}
.news-card__quote-mark--end { margin-left: 1px; margin-right: 0; }
.news-card__quote-attr {
display: block;
margin-top: 10px;
font-family: var(--font-body);
font-style: normal;
font-size: 11px; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--gold);
}
/* ─── Actions row ─── */
.news-card__actions {
display: flex; flex-wrap: wrap;
gap: 14px 24px;
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid rgba(178, 147, 58,0.12);
}
.news-card__action {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-body);
font-size: 12px; font-weight: 600;
letter-spacing: 0.10em; text-transform: uppercase;
transition: color var(--dur-base) var(--ease-out);
}
.news-card__action--primary {
color: var(--gold);
}
.news-card__action--primary:hover { color: var(--gold-light); }
.news-card__action--secondary {
color: var(--mist);
}
.news-card__action--secondary:hover { color: var(--ivory); }
/* Focus rings for keyboard nav */
.news-card__media:focus-visible,
.news-card__action:focus-visible,
.dossier__head-link:focus-visible {
outline: 2px solid var(--gold-light);
outline-offset: 3px;
}
/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
.news-card,
.news-card__thumb,
.news-card__play,
.news-card__media::after { transition: none !important; }
.news-card:hover { transform: none; }
.news-card:hover .news-card__thumb { transform: none; }
}
/* ─────────────────────────── TRUST BAR ─────────────────────────── */
.trustbar {
background: var(--ivory);
color: var(--midnight-deep);
padding: clamp(48px, 5vw, 72px) var(--pad-x);
position: relative;
}
.trustbar::before, .trustbar::after {
content: '';
position: absolute; left: 0; right: 0;
height: 1px;
background: linear-gradient(to right, transparent, rgba(30,42,56,0.18) 50%, transparent);
}
.trustbar::before { top: 0; }
.trustbar::after { bottom: 0; }
.trustbar__inner {
max-width: 1320px;
margin-inline: auto;
}
.trustbar__label {
font-family: var(--font-body);
font-size: 10px; font-weight: 700;
letter-spacing: 0.32em; text-transform: uppercase;
color: var(--midnight);
text-align: center;
margin-bottom: 28px;
}
.trustbar__label::before, .trustbar__label::after {
content: '— ';
color: var(--gold);
}
.trustbar__label::after { content: ' —'; }
.trustbar__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid rgba(30,42,56,0.10);
}
@media (max-width: 900px) { .trustbar__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .trustbar__grid { grid-template-columns: 1fr; } }
.trustbar__cell {
padding: 22px 24px;
font-family: var(--font-display);
font-style: italic;
font-size: clamp(16px, 1vw, 19px);
line-height: 1.35;
color: var(--midnight);
border-bottom: 1px solid rgba(30,42,56,0.10);
border-right: 1px solid rgba(30,42,56,0.10);
display: flex; align-items: center; gap: 14px;
}
.trustbar__cell:nth-child(3n) { border-right: 0; }
@media (max-width: 900px) {
.trustbar__cell { border-right: 0; }
.trustbar__cell:nth-child(2n-1) { border-right: 1px solid rgba(30,42,56,0.10); }
}
@media (max-width: 600px) {
.trustbar__cell:nth-child(2n-1) { border-right: 0; }
}
.trustbar__cell::before {
content: '';
width: 6px; height: 6px;
background: var(--gold);
transform: rotate(45deg);
flex-shrink: 0;
}
/* ─────────────────────────── SERVICES GRID ─────────────────────────── */
.services {
background: var(--midnight-deep);
position: relative;
}
.services__intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 96px);
margin-bottom: clamp(56px, 6vw, 80px);
align-items: end;
}
@media (max-width: 900px) { .services__intro { grid-template-columns: 1fr; } }
.services__grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: clamp(16px, 1.5vw, 24px);
}
@media (max-width: 900px) { .services__grid { grid-template-columns: 1fr; } }
.svc-card {
background: var(--midnight);
border: 1px solid rgba(178, 147, 58,0.10);
padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 40px) clamp(32px, 3vw, 44px);
position: relative;
display: flex; flex-direction: column;
gap: 20px;
transition: all var(--dur-base) var(--ease-out);
text-decoration: none;
min-height: 320px;
}
.svc-card:hover {
border-color: rgba(178, 147, 58,0.40);
transform: translateY(-3px);
background: var(--bg-card-warm);
}
.svc-card::before {
content: '';
position: absolute; top: 0; left: clamp(28px, 3vw, 40px); right: clamp(28px, 3vw, 40px);
height: 1px;
background: rgba(178, 147, 58,0.30);
transition: background var(--dur-base) var(--ease-out);
}
.svc-card:hover::before { background: var(--gold); }
.svc-card--feature {
grid-column: span 8;
background: linear-gradient(135deg, var(--earth) 0%, var(--earth-deep) 100%);
min-height: 380px;
}
.svc-card--standard { grid-column: span 4; }
@media (max-width: 1200px) {
.svc-card--feature { grid-column: span 12; }
.svc-card--standard { grid-column: span 6; }
}
@media (max-width: 900px) {
.svc-card--feature, .svc-card--standard { grid-column: span 1; }
}
.svc-card__num {
font-family: var(--font-body);
font-size: 11px; font-weight: 700;
letter-spacing: 0.20em; color: var(--gold);
}
.svc-card__eyebrow {
font-family: var(--font-body);
font-size: 10px; font-weight: 600;
letter-spacing: 0.20em; text-transform: uppercase;
color: var(--mist);
}
.svc-card__title {
font-family: var(--font-display);
font-size: clamp(24px, 2vw, 34px);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--ivory);
}
.svc-card--feature .svc-card__title { font-size: clamp(32px, 2.6vw, 44px); max-width: 18ch; }
.svc-card__desc {
font-size: 14px; line-height: 1.6;
color: var(--text-muted);
flex-grow: 1;
}
.svc-card__link {
font-family: var(--font-body);
font-size: 11px; font-weight: 700;
letter-spacing: 0.20em; text-transform: uppercase;
color: var(--gold);
display: inline-flex; align-items: center; gap: 10px;
margin-top: auto;
}
.svc-card__link::after {
content: '→';
transition: transform var(--dur-base) var(--ease-out);
}
.svc-card:hover .svc-card__link::after { transform: translateX(6px); }
/* ─────────────────────────── ABOUT ─────────────────────────── */
.about {
background: var(--ivory);
color: var(--midnight-deep);
padding-block: var(--pad-section-y);
}
.about__inner {
max-width: 1320px;
margin-inline: auto;
padding-inline: var(--pad-x);
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: clamp(40px, 6vw, 96px);
align-items: start;
}
@media (max-width: 900px) { .about__inner { grid-template-columns: 1fr; } }
.about__visual {
position: relative;
aspect-ratio: 4 / 5;
background: var(--midnight);
overflow: hidden;
}
.about__visual::before {
content: '';
position: absolute; inset: -1px;
border: 1px solid var(--gold);
pointer-events: none;
transform: translate(20px, 20px);
}
.about__photo {
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(0.15) contrast(1.05);
}
.about__visual-caption {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 16px 20px;
background: linear-gradient(to top, rgba(20,29,40,0.92), transparent);
font-family: var(--font-display);
font-style: italic;
font-size: 14px;
color: var(--ivory);
}
.about__content { padding-top: clamp(20px, 4vw, 48px); }
.about__eyebrow {
color: var(--gold);
}
.about__title {
font-family: var(--font-display);
font-size: var(--step-h2);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.018em;
color: var(--midnight-deep);
margin: 24px 0 28px;
max-width: 16ch;
}
.about__title em { font-style: italic; color: var(--gold); font-weight: 400; }
.about__body p {
font-size: 16px; line-height: 1.7;
color: var(--midnight);
margin-bottom: 18px;
max-width: 56ch;
}
.about__body p:first-child {
font-family: var(--font-display);
font-size: 19px;
line-height: 1.55;
color: var(--midnight-deep);
}
.about__credentials {
margin-top: 36px;
padding-top: 28px;
border-top: 1px solid rgba(30,42,56,0.12);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 700px) { .about__credentials { grid-template-columns: 1fr 1fr; } }
.about__cred-num {
font-family: var(--font-display);
font-size: clamp(40px, 4vw, 56px);
font-weight: 300;
line-height: 1;
color: var(--midnight-deep);
letter-spacing: -0.02em;
}
.about__cred-num span { color: var(--gold); font-size: 0.6em; vertical-align: super; }
.about__cred-label {
font-family: var(--font-body);
font-size: 11px; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--mist-fog);
margin-top: 8px;
}
/* ─────────────────────────── REVIEW WALL ─────────────────────────── */
.reviews-section {
background: var(--midnight);
position: relative;
}
.reviews__head {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
margin-bottom: clamp(48px, 5vw, 72px);
gap: 32px;
}
@media (max-width: 700px) { .reviews__head { grid-template-columns: 1fr; } }
.reviews__rating-block {
display: flex; align-items: baseline; gap: 16px;
font-family: var(--font-display);
color: var(--gold);
}
.reviews__rating-num {
font-size: clamp(40px, 4vw, 56px);
font-weight: 300;
line-height: 1;
letter-spacing: -0.02em;
}
.reviews__rating-stars { color: var(--gold); font-size: 18px; letter-spacing: 4px; }
.reviews__rating-text {
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--mist);
text-transform: uppercase;
}
.reviews__grid {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
grid-template-rows: auto auto;
gap: clamp(20px, 2vw, 32px);
}
@media (max-width: 1024px) {
.reviews__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
.reviews__grid { grid-template-columns: 1fr; }
}
.review {
background: var(--midnight-deep);
border: 1px solid rgba(178, 147, 58,0.10);
padding: clamp(28px, 2.5vw, 36px);
position: relative;
}
.review--feature {
grid-row: span 2;
background: linear-gradient(160deg, var(--midnight) 0%, var(--midnight-deep) 100%);
border-color: rgba(178, 147, 58,0.25);
}
.review--feature .review__quote { font-size: clamp(20px, 1.4vw, 24px); }
.review__quote-mark {
position: absolute; top: 16px; left: 24px;
font-family: var(--font-display);
font-size: 96px;
line-height: 0.7;
color: var(--gold);
opacity: 0.18;
font-style: italic;
}
.review__stars {
font-size: 13px; letter-spacing: 3px;
color: var(--gold);
margin-bottom: 18px;
position: relative; z-index: 2;
}
.review__quote {
font-family: var(--font-display);
font-style: italic;
font-size: 17px;
line-height: 1.55;
color: var(--ivory);
margin-bottom: 24px;
position: relative; z-index: 2;
}
.review__attr {
display: flex; justify-content: space-between; align-items: center;
padding-top: 20px;
border-top: 1px solid rgba(245,240,232,0.10);
font-size: 12px;
font-family: var(--font-body);
letter-spacing: 0.04em;
}
.review__name { color: var(--ivory); font-weight: 600; }
.review__source { color: var(--gold); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; font-size: 10px; }
/* ─────────────────────────── AREAS / MAP ─────────────────────────── */
.areas {
background: var(--midnight-deep);
position: relative;
}
.areas__head {
margin-bottom: clamp(48px, 5vw, 72px);
max-width: 720px;
}
.areas__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid rgba(178, 147, 58,0.15);
}
@media (max-width: 900px) { .areas__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .areas__grid { grid-template-columns: 1fr; } }
.area {
padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px) clamp(24px, 2vw, 32px);
border-bottom: 1px solid rgba(178, 147, 58,0.10);
border-right: 1px solid rgba(178, 147, 58,0.10);
transition: background var(--dur-base) var(--ease-out);
}
.areas__grid > .area:nth-child(4n) { border-right: 0; }
@media (max-width: 900px) {
.areas__grid > .area { border-right: 0; }
.areas__grid > .area:nth-child(2n-1) { border-right: 1px solid rgba(178, 147, 58,0.10); }
}
@media (max-width: 500px) {
.areas__grid > .area:nth-child(2n-1) { border-right: 0; }
}
.area:hover { background: rgba(178, 147, 58,0.04); }
.area__name {
font-family: var(--font-display);
font-size: clamp(20px, 1.3vw, 24px);
font-weight: 500;
line-height: 1.1;
color: var(--ivory);
margin-bottom: 6px;
}
.area__zip {
font-family: var(--font-body);
font-size: 11px; font-weight: 600;
letter-spacing: 0.18em;
color: var(--gold);
margin-bottom: 14px;
}
.area__desc {
font-size: 13px; line-height: 1.55;
color: var(--text-muted);
margin-bottom: 18px;
}
.area__link {
font-family: var(--font-body);
font-size: 10px; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--gold);
}
.area__link::after { content: ' →'; }
/* ─── Service Areas hub — photo cards (used on /service-areas/) ─── */
a.area {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
border-right: 1px solid rgba(178, 147, 58,0.10);
border-bottom: 1px solid rgba(178, 147, 58,0.10);
padding: 0;
overflow: hidden;
background: rgba(15,12,8,0.30);
transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
a.area:hover {
background: rgba(178, 147, 58,0.06);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(178, 147, 58,0.25);
}
.area__photo {
width: 100%;
aspect-ratio: 16 / 10;
background-size: cover;
background-position: center 32%;
background-color: var(--midnight-deep);
position: relative;
}
.area__photo::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(15,12,8,0) 50%, rgba(15,12,8,0.45) 100%);
pointer-events: none;
}
.area__body {
padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px) clamp(24px, 2vw, 32px);
flex: 1;
display: flex;
flex-direction: column;
}
.area__eyebrow {
font-family: var(--font-body);
font-size: 10px; font-weight: 700;
letter-spacing: 0.20em; text-transform: uppercase;
color: var(--burnt-ember, #FA854F);
margin-bottom: 10px;
}
.area--feature {
grid-column: span 2;
background: linear-gradient(180deg, rgba(178, 147, 58,0.08) 0%, rgba(15,12,8,0.30) 60%);
}
.area--feature .area__photo { aspect-ratio: 21 / 10; background-position: center 18%; }
.area--feature .area__name { font-size: clamp(28px, 2.2vw, 36px); }
.area--feature .area__eyebrow { color: var(--gold); }
@media (max-width: 900px) {
.area--feature { grid-column: span 2; }
.area--feature .area__photo { aspect-ratio: 16 / 9; }
}
@media (max-width: 500px) {
.area--feature { grid-column: span 1; }
.area--feature .area__photo { aspect-ratio: 16 / 10; }
}
/* ═════════════════════════════════════════════════════════════════
ABOUT CHRIS — flagship athlete-bio dossier (/about/)
Self-contained block. All classes prefixed .about- or page-local.
═════════════════════════════════════════════════════════════════ */
/* ── Hero — full-bleed editorial portrait OR video ──────────────── */
.about-hero {
position: relative;
min-height: 92vh;
padding: clamp(96px, 14vh, 160px) 0 clamp(80px, 11vh, 128px);
background-image: var(--hero-photo);
background-size: cover;
background-position: center 18%;
background-color: var(--earth-deep);
display: flex;
align-items: flex-end;
overflow: hidden;
}
.about-hero--video { min-height: 100vh; min-height: 100svh; }
/* Vimeo iframe scaled to fully cover viewport — kills letterboxing on any aspect ratio.
16:9 video: width = max(100vw, 177.78vh), height = max(56.25vw, 100vh). */
.about-hero__video {
position: absolute; inset: 0;
overflow: hidden;
pointer-events: none; /* hero text is clickable, video is decorative */
z-index: 0;
}
.about-hero__video iframe {
position: absolute;
top: 50%; left: 50%;
width: max(100vw, 177.78vh);
height: max(56.25vw, 100vh);
transform: translate(-50%, -50%);
border: 0;
pointer-events: none;
}
.about-hero__media-overlay {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(10,9,5,0.40) 0%, rgba(10,9,5,0.15) 28%, rgba(10,9,5,0.55) 65%, rgba(10,9,5,0.96) 100%),
radial-gradient(ellipse at 80% 20%, rgba(178, 147, 58,0.10) 0%, transparent 60%);
pointer-events: none;
z-index: 1;
}
.about-hero .container { position: relative; z-index: 2; max-width: 1280px; }
.about-hero__actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 36px;
align-items: center;
}
.about-hero__actions .btn {
cursor: pointer;
font-family: var(--font-body);
font-size: 12px; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
padding: 14px 22px;
text-decoration: none;
border: 1px solid transparent;
display: inline-flex; align-items: center;
transition: transform 200ms ease-out, background 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}
.about-hero__actions .btn:hover { transform: translateY(-2px); }
.about-hero__actions .btn--gold {
background: var(--gold);
color: var(--earth-deep);
}
.about-hero__actions .btn--gold:hover { background: var(--gold-bright); }
.about-hero__actions .btn--outline {
background: rgba(10,9,5,0.45);
color: var(--cream);
border-color: rgba(255,247,215,0.40);
backdrop-filter: blur(2px);
}
.about-hero__actions .btn--outline:hover { border-color: var(--gold); color: var(--gold-bright); }
.about-hero__scroll-cue {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: var(--cream);
opacity: 0.65;
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.30em;
text-transform: uppercase;
animation: aboutScrollPulse 2.2s ease-in-out infinite;
pointer-events: none;
}
@keyframes aboutScrollPulse {
0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; }
50% { transform: translateX(-50%) translateY(6px); opacity: 0.95; }
}
@media (max-width: 720px) {
.about-hero__scroll-cue { bottom: 18px; font-size: 9px; }
.about-hero__video iframe { width: max(177.78vh, 100vw); }
}
/* ── Vimeo lightbox modal — triggered by [data-vimeo-lightbox] ── */
.vimeo-lightbox-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,0.92);
z-index: 9999;
display: flex; align-items: center; justify-content: center;
padding: clamp(16px, 4vw, 48px);
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease-out;
}
.vimeo-lightbox-backdrop.is-open { opacity: 1; pointer-events: auto; }
.vimeo-lightbox-frame {
position: relative;
width: min(100%, 1280px);
aspect-ratio: 16 / 9;
background: #000;
box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(178, 147, 58,0.30);
}
.vimeo-lightbox-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.vimeo-lightbox-close {
position: absolute;
top: -44px; right: 0;
background: transparent; border: 0;
color: var(--cream);
font-family: var(--font-body);
font-size: 12px; font-weight: 700;
letter-spacing: 0.20em; text-transform: uppercase;
cursor: pointer;
padding: 8px 12px;
display: inline-flex; align-items: center; gap: 8px;
}
.vimeo-lightbox-close:hover { color: var(--gold-bright); }
.about-hero__breadcrumb {
font-family: var(--font-body);
font-size: 11px; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--khaki);
margin-bottom: 32px;
}
.about-hero__breadcrumb a { color: var(--khaki); text-decoration: none; }
.about-hero__breadcrumb a:hover { color: var(--gold); }
.about-hero__breadcrumb-sep { margin: 0 10px; color: var(--gold); }
.about-hero__eyebrow {
font-family: var(--font-body);
font-size: 12px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold);
margin-bottom: 24px;
}
.about-hero__title {
font-family: var(--font-display);
font-size: clamp(72px, 12vw, 200px);
line-height: 0.85;
font-weight: 400;
color: var(--cream);
letter-spacing: -0.01em;
text-transform: uppercase;
margin: 0 0 24px;
text-shadow:
0 2px 4px rgba(0,0,0,0.55),
0 6px 18px rgba(0,0,0,0.45);
}
.about-hero__title em {
font-style: normal;
background: linear-gradient(
180deg,
#FFF2C2 0%, #F5D673 20%, #FFEFB0 48%,
#FFF4C8 52%, #ECC558 70%, #DBB54A 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter:
drop-shadow(2px 3px 0 rgba(250, 133, 79, 0.85))
drop-shadow(2px 3px 2px rgba(250, 133, 79, 0.55))
drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55))
drop-shadow(0 4px 8px rgba(0, 0, 0, 0.40));
text-shadow: none;
}
.about-hero__tagline {
font-family: var(--font-body);
font-size: clamp(16px, 1.2vw, 20px);
font-weight: 400;
line-height: 1.45;
color: var(--cream);
max-width: 640px;
margin: 0;
}
/* ── Stat bar ───────────────────────────────────────────────────── */
.about-stats {
background: var(--earth-deep);
border-top: 1px solid var(--gold-line);
border-bottom: 1px solid var(--gold-line);
padding: clamp(40px, 5vh, 64px) 0;
}
.about-stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.about-stats__cell {
padding: 16px clamp(20px, 3vw, 40px);
border-right: 1px solid var(--gold-line);
text-align: left;
}
.about-stats__cell:last-child { border-right: 0; }
.about-stats__num {
font-family: var(--font-display);
font-size: clamp(56px, 5.5vw, 84px);
line-height: 0.85;
color: var(--gold-bright);
letter-spacing: -0.01em;
margin-bottom: 8px;
}
.about-stats__num span {
font-size: 0.5em;
vertical-align: super;
color: var(--burnt);
margin-left: 4px;
}
.about-stats__label {
font-family: var(--font-body);
font-size: 12px; font-weight: 700;
letter-spacing: 0.20em; text-transform: uppercase;
color: var(--cream);
margin-bottom: 6px;
}
.about-stats__sub {
font-family: var(--font-body);
font-size: 13px; line-height: 1.4;
color: var(--khaki);
}
@media (max-width: 900px) {
.about-stats__grid { grid-template-columns: repeat(2, 1fr); }
.about-stats__cell:nth-child(2) { border-right: 0; }
.about-stats__cell:nth-child(1), .about-stats__cell:nth-child(2) { border-bottom: 1px solid var(--gold-line); padding-bottom: 32px; }
.about-stats__cell:nth-child(3), .about-stats__cell:nth-child(4) { padding-top: 32px; }
}
@media (max-width: 540px) {
.about-stats__grid { grid-template-columns: 1fr; }
.about-stats__cell { border-right: 0; border-bottom: 1px solid var(--gold-line); padding: 24px 0; }
.about-stats__cell:last-child { border-bottom: 0; }
}
/* ── Story / Origin block ───────────────────────────────────────── */
.about-story {
background: var(--earth);
padding: clamp(72px, 10vh, 120px) 0;
}
.about-story__grid {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: clamp(40px, 5vw, 80px);
align-items: center;
}
.about-story__photo {
aspect-ratio: 4 / 5;
background-size: cover;
background-position: center 22%;
background-color: var(--earth-deep);
border: 1px solid var(--gold-line);
position: relative;
}
.about-story__photo::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 70%, rgba(10,9,5,0.45) 100%);
pointer-events: none;
}
.about-story__prose { max-width: 640px; }
.about-story__h2 {
font-family: var(--font-display);
font-size: clamp(36px, 4.5vw, 64px);
line-height: 0.95;
color: var(--cream);
margin: 0 0 28px;
text-transform: uppercase;
letter-spacing: -0.005em;
}
.about-story__h2 em {
font-style: normal;
color: var(--gold-bright);
}
.about-story__lead {
font-family: var(--font-body);
font-size: clamp(17px, 1.15vw, 19px);
line-height: 1.55;
color: var(--cream);
margin-bottom: 20px;
}
.about-story__prose p {
font-family: var(--font-body);
font-size: 15.5px;
line-height: 1.65;
color: var(--khaki);
margin-bottom: 16px;
}
.about-story__prose p em { color: var(--gold-bright); font-style: normal; font-weight: 600; }
.about-story__signoff {
font-family: var(--font-body);
font-size: 12px; font-weight: 700;
letter-spacing: 0.20em; text-transform: uppercase;
color: var(--gold);
margin-top: 28px;
}
@media (max-width: 900px) {
.about-story__grid { grid-template-columns: 1fr; }
.about-story__photo { aspect-ratio: 16 / 11; max-width: 560px; margin-inline: auto; }
}
/* ── Photo strip ────────────────────────────────────────────────── */
.about-photo-strip { background: var(--earth-deep); }
.about-photo-strip__row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
}
.about-photo-strip__cell {
aspect-ratio: 4 / 5;
background-size: cover;
background-position: center 35%;
background-color: var(--earth);
transition: transform var(--dur-base, 280ms) ease-out;
}
.about-photo-strip__cell:hover { transform: scale(1.02); }
@media (max-width: 900px) {
.about-photo-strip__row { grid-template-columns: repeat(2, 1fr); }
}
/* ── Credentials wall ───────────────────────────────────────────── */
.about-credentials {
background: var(--earth);
padding: clamp(72px, 10vh, 120px) 0;
}
.about-credentials__h2 {
font-family: var(--font-display);
font-size: clamp(36px, 4.5vw, 64px);
line-height: 0.95;
color: var(--cream);
margin: 0 0 48px;
text-transform: uppercase;
letter-spacing: -0.005em;
}
.about-credentials__h2 em { font-style: normal; color: var(--gold-bright); }
.about-credentials__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
border: 1px solid var(--gold-line);
}
.cred-card {
padding: 32px 24px;
border-right: 1px solid var(--gold-line);
background: var(--earth-deep);
transition: background var(--dur-base, 280ms) ease-out;
}
.cred-card:last-child { border-right: 0; }
.cred-card:hover { background: rgba(178, 147, 58,0.06); }
.cred-card__num {
font-family: var(--font-display);
font-size: 36px;
color: var(--gold);
line-height: 0.8;
margin-bottom: 16px;
letter-spacing: -0.01em;
}
.cred-card__title {
font-family: var(--font-body);
font-size: 14px; font-weight: 700;
line-height: 1.4;
color: var(--cream);
letter-spacing: 0.01em;
}
@media (max-width: 900px) {
.about-credentials__grid { grid-template-columns: repeat(2, 1fr); }
.cred-card { border-right: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line); }
.cred-card:nth-child(2n) { border-right: 0; }
.cred-card:nth-last-child(-n+2):nth-child(odd) { border-bottom: 0; }
.cred-card:last-child { border-right: 0; border-bottom: 0; }
}
@media (max-width: 540px) {
.about-credentials__grid { grid-template-columns: 1fr; }
.cred-card { border-right: 0; border-bottom: 1px solid var(--gold-line); }
.cred-card:last-child { border-bottom: 0; }
}
/* ── Methodology pillars ────────────────────────────────────────── */
.about-methodology {
background: var(--earth-deep);
padding: clamp(72px, 10vh, 120px) 0;
}
.about-methodology__h2 {
font-family: var(--font-display);
font-size: clamp(36px, 4.5vw, 64px);
line-height: 0.95;
color: var(--cream);
margin: 0 0 48px;
text-transform: uppercase;
letter-spacing: -0.005em;
}
.about-methodology__h2 em { font-style: normal; color: var(--gold-bright); }
.about-methodology__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.pillar {
background: var(--earth);
border: 1px solid var(--gold-line);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform var(--dur-base, 280ms) ease-out, border-color var(--dur-base, 280ms) ease-out;
}
.pillar:hover { transform: translateY(-4px); border-color: var(--gold); }
.pillar__photo {
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center 40%;
background-color: var(--earth-deep);
}
.pillar__body { padding: 28px 28px 32px; flex: 1; display: flex; flex-direction: column; }
.pillar__num {
font-family: var(--font-display);
font-size: 14px; font-weight: 400;
letter-spacing: 0.30em;
color: var(--gold);
margin-bottom: 14px;
}
.pillar__title {
font-family: var(--font-display);
font-size: clamp(28px, 2.4vw, 36px);
line-height: 0.95;
color: var(--cream);
margin: 0 0 14px;
letter-spacing: 0.005em;
text-transform: uppercase;
}
.pillar__copy {
font-family: var(--font-body);
font-size: 15px; line-height: 1.6;
color: var(--khaki);
margin: 0;
}
@media (max-width: 900px) { .about-methodology__grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
/* ── Audience grid ──────────────────────────────────────────────── */
.about-audience {
background: var(--earth);
padding: clamp(72px, 10vh, 120px) 0;
}
.about-audience__h2 {
font-family: var(--font-display);
font-size: clamp(36px, 4.5vw, 64px);
line-height: 0.95;
color: var(--cream);
margin: 0 0 16px;
text-transform: uppercase;
letter-spacing: -0.005em;
}
.about-audience__h2 em { font-style: normal; color: var(--gold-bright); }
.about-audience__lead {
font-family: var(--font-body);
font-size: 16px; line-height: 1.6;
color: var(--khaki);
max-width: 640px;
margin: 0 0 48px;
}
.about-audience__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.aud-card {
background: var(--earth-deep);
border: 1px solid var(--gold-line);
padding: 24px 22px;
display: flex;
align-items: center;
gap: 16px;
transition: background var(--dur-base, 280ms) ease-out, border-color var(--dur-base, 280ms) ease-out, transform var(--dur-base, 280ms) ease-out;
}
.aud-card:hover {
background: rgba(178, 147, 58,0.06);
border-color: var(--gold);
transform: translateX(2px);
}
.aud-card__check {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 50%;
background: var(--gold);
color: var(--earth-deep);
font-family: var(--font-body); font-weight: 800;
font-size: 14px;
display: flex; align-items: center; justify-content: center;
}
.aud-card__label {
font-family: var(--font-body);
font-size: 14px; font-weight: 600;
line-height: 1.35;
color: var(--cream);
}
@media (max-width: 1000px) { .about-audience__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .about-audience__grid { grid-template-columns: 1fr; } }
/* ── Voices (video + testimonials) ──────────────────────────────── */
.about-voices {
background: var(--earth-deep);
padding: clamp(72px, 10vh, 120px) 0;
}
.about-voices__h2 {
font-family: var(--font-display);
font-size: clamp(36px, 4.5vw, 64px);
line-height: 0.95;
color: var(--cream);
margin: 0 0 48px;
text-transform: uppercase;
letter-spacing: -0.005em;
}
.about-voices__h2 em { font-style: normal; color: var(--gold-bright); }
/* Vertical Vimeo clips (9:16). Capped so they read as story-cards,
not billboards. Centered row with breathing room around them. */
.about-voices__videos {
display: flex;
justify-content: center;
align-items: flex-start;
gap: clamp(20px, 3vw, 40px);
flex-wrap: wrap;
}
.vid-frame {
background: var(--earth);
border: 1px solid var(--gold-line);
border-radius: 6px;
overflow: hidden;
position: relative;
width: 100%;
max-width: 340px;
box-shadow: 0 18px 40px rgba(0,0,0,0.32), 0 0 0 1px rgba(178, 147, 58,0.10);
transition: transform var(--dur-base, 280ms) ease-out, box-shadow var(--dur-base, 280ms) ease-out, border-color var(--dur-base, 280ms) ease-out;
}
.vid-frame:hover {
transform: translateY(-3px);
border-color: var(--gold);
box-shadow: 0 22px 52px rgba(0,0,0,0.40), 0 0 0 1px var(--gold-line);
}
.vid-frame iframe {
width: 100%;
aspect-ratio: 9 / 16;
display: block;
border: 0;
background: var(--earth-deep);
}
.vid-frame__caption {
font-family: var(--font-body);
font-size: 11px; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--gold);
padding: 12px 16px;
border-top: 1px solid var(--gold-line);
text-align: center;
}
@media (max-width: 520px) {
.vid-frame { max-width: 100%; }
}
/* ── Facility / Where-to-find row ───────────────────────────────── */
.about-facility {
background: var(--earth);
padding: clamp(64px, 8vh, 96px) 0;
border-top: 1px solid var(--gold-line);
}
.about-facility__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.about-facility__card {
background: var(--earth-deep);
border: 1px solid var(--gold-line);
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 8px;
}
.about-facility__eyebrow {
font-family: var(--font-body);
font-size: 10px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold);
}
.about-facility__title {
font-family: var(--font-display);
font-size: clamp(24px, 2vw, 32px);
line-height: 1;
color: var(--cream);
margin: 6px 0 4px;
text-transform: uppercase;
}
.about-facility__loc {
font-family: var(--font-body);
font-size: 13px; font-weight: 600;
letter-spacing: 0.05em;
color: var(--khaki);
margin-bottom: 8px;
}
.about-facility__copy {
font-family: var(--font-body);
font-size: 14px; line-height: 1.55;
color: var(--khaki);
margin: 0;
}
@media (max-width: 900px) { .about-facility__grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
/* ═════════════════════════════════════════════════════════════════
SERVICES INDEX — flagship hub (/services/)
═════════════════════════════════════════════════════════════════ */
/* Featured program — split photo + body */
.svc-feature {
background: var(--earth);
padding: clamp(72px, 10vh, 120px) 0;
}
.svc-feature__grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(40px, 5vw, 80px);
align-items: center;
max-width: 1280px;
margin: 0 auto;
}
.svc-feature__photo {
position: relative;
aspect-ratio: 4 / 5;
background-size: cover;
background-position: center 22%;
background-color: var(--earth-deep);
border: 1px solid var(--gold-line);
display: block;
text-decoration: none;
overflow: hidden;
transition: transform var(--dur-base, 280ms) ease-out, border-color var(--dur-base, 280ms) ease-out;
}
.svc-feature__photo:hover { transform: translateY(-4px); border-color: var(--gold); }
.svc-feature__photo::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(10,9,5,0.55) 100%);
}
.svc-feature__photo-eyebrow {
position: absolute;
top: 22px; left: 22px;
z-index: 2;
font-family: var(--font-body);
font-size: 10px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--earth-deep);
background: var(--gold);
padding: 6px 12px;
border-radius: 2px;
}
.svc-feature__body { max-width: 580px; }
.svc-feature__h2 {
font-family: var(--font-display);
font-size: clamp(40px, 4.8vw, 72px);
line-height: 0.95;
color: var(--cream);
margin: 0 0 24px;
text-transform: uppercase;
letter-spacing: -0.005em;
}
.svc-feature__h2 em { font-style: normal; color: var(--gold-bright); display: block; }
.svc-feature__lead {
font-family: var(--font-body);
font-size: clamp(16px, 1.05vw, 18px);
line-height: 1.6;
color: var(--cream);
margin-bottom: 28px;
}
.svc-feature__points {
list-style: none;
padding: 0;
margin: 0 0 32px;
display: grid;
gap: 12px;
}
.svc-feature__points li {
font-family: var(--font-body);
font-size: 14.5px;
line-height: 1.5;
color: var(--khaki);
display: flex; align-items: flex-start; gap: 12px;
}
.svc-feature__check {
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--gold);
color: var(--earth-deep);
font-size: 12px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
margin-top: 1px;
}
.svc-feature__actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.svc-feature__actions .btn,
.svc-chooser .btn,
.svc-grid-section .btn {
font-family: var(--font-body);
font-size: 12px; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
padding: 14px 22px;
text-decoration: none;
border: 1px solid transparent;
display: inline-flex; align-items: center;
cursor: pointer;
transition: transform 200ms ease-out, background 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}
.svc-feature__actions .btn:hover { transform: translateY(-2px); }
.svc-feature__actions .btn--gold { background: var(--gold); color: var(--earth-deep); }
.svc-feature__actions .btn--gold:hover { background: var(--gold-bright); }
.svc-feature__actions .btn--outline { background: transparent; color: var(--cream); border-color: rgba(255,247,215,0.40); }
.svc-feature__actions .btn--outline:hover { border-color: var(--gold); color: var(--gold-bright); }
@media (max-width: 900px) {
.svc-feature__grid { grid-template-columns: 1fr; gap: 32px; }
.svc-feature__photo { aspect-ratio: 16 / 11; max-width: 600px; }
}
/* Supporting programs — photo card grid */
.svc-grid-section {
background: var(--earth-deep);
padding: clamp(72px, 10vh, 120px) 0;
}
.svc-grid-section__h2 {
font-family: var(--font-display);
font-size: clamp(36px, 4.5vw, 64px);
line-height: 0.95;
color: var(--cream);
margin: 0 0 16px;
text-transform: uppercase;
letter-spacing: -0.005em;
}
.svc-grid-section__h2 em { font-style: normal; color: var(--gold-bright); }
.svc-grid-section__lead {
font-family: var(--font-body);
font-size: 16px; line-height: 1.6;
color: var(--khaki);
max-width: 700px;
margin: 0 0 48px;
}
.svc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.svc-card-v2 {
display: flex;
flex-direction: column;
background: var(--earth);
border: 1px solid var(--gold-line);
text-decoration: none;
color: inherit;
overflow: hidden;
transition: transform var(--dur-base, 280ms) ease-out, border-color var(--dur-base, 280ms) ease-out, box-shadow var(--dur-base, 280ms) ease-out;
}
.svc-card-v2:hover {
transform: translateY(-4px);
border-color: var(--gold);
box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.svc-card-v2__photo {
aspect-ratio: 16 / 11;
background-size: cover;
background-position: center 30%;
background-color: var(--earth-deep);
}
.svc-card-v2__body {
padding: 24px 24px 28px;
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.svc-card-v2__num {
font-family: var(--font-display);
font-size: 14px;
letter-spacing: 0.30em;
color: var(--gold);
margin: 0;
}
.svc-card-v2__eyebrow {
font-family: var(--font-body);
font-size: 9px; font-weight: 700;
letter-spacing: 0.20em; text-transform: uppercase;
color: var(--burnt);
line-height: 1.4;
}
.svc-card-v2__title {
font-family: var(--font-display);
font-size: clamp(24px, 2vw, 30px);
line-height: 0.95;
color: var(--cream);
margin: 4px 0 4px;
text-transform: uppercase;
}
.svc-card-v2__desc {
font-family: var(--font-body);
font-size: 14.5px;
line-height: 1.55;
color: var(--khaki);
margin: 0 0 8px;
}
.svc-card-v2__points {
list-style: none;
padding: 0; margin: 0 0 16px;
display: grid; gap: 6px;
}
.svc-card-v2__points li {
font-family: var(--font-body);
font-size: 13px; line-height: 1.45;
color: var(--khaki);
padding-left: 16px;
position: relative;
}
.svc-card-v2__points li::before {
content: "—";
position: absolute; left: 0;
color: var(--gold);
}
.svc-card-v2__link {
margin-top: auto;
font-family: var(--font-body);
font-size: 11px; font-weight: 700;
letter-spacing: 0.20em; text-transform: uppercase;
color: var(--gold);
}
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
/* "How to choose" — 6 quick-route cards */
.svc-chooser {
background: var(--earth);
padding: clamp(72px, 10vh, 120px) 0;
}
.svc-chooser__h2 {
font-family: var(--font-display);
font-size: clamp(36px, 4.5vw, 64px);
line-height: 0.95;
color: var(--cream);
margin: 0 0 48px;
text-transform: uppercase;
letter-spacing: -0.005em;
}
.svc-chooser__h2 em { font-style: normal; color: var(--gold-bright); }
.svc-chooser__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.chooser-card {
background: var(--earth-deep);
border: 1px solid var(--gold-line);
padding: 24px 22px 26px;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: 8px;
transition: transform var(--dur-base, 280ms) ease-out, border-color var(--dur-base, 280ms) ease-out, background var(--dur-base, 280ms) ease-out;
}
.chooser-card:hover {
transform: translateY(-2px);
border-color: var(--gold);
background: rgba(178, 147, 58,0.06);
}
.chooser-card__tag {
font-family: var(--font-body);
font-size: 10px; font-weight: 700;
letter-spacing: 0.20em; text-transform: uppercase;
color: var(--burnt);
}
.chooser-card__title {
font-family: var(--font-display);
font-size: clamp(22px, 1.6vw, 28px);
line-height: 1;
color: var(--cream);
margin: 0;
text-transform: uppercase;
}
.chooser-card__copy {
font-family: var(--font-body);
font-size: 14px; line-height: 1.55;
color: var(--khaki);
margin: 0;
}
.chooser-card__link {
margin-top: auto;
font-family: var(--font-body);
font-size: 11px; font-weight: 700;
letter-spacing: 0.20em; text-transform: uppercase;
color: var(--gold);
padding-top: 10px;
}
@media (max-width: 900px) { .svc-chooser__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .svc-chooser__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
/* FAQ — accordion */
.svc-faq {
background: var(--earth-deep);
padding: clamp(72px, 10vh, 120px) 0;
}
.svc-faq__h2 {
font-family: var(--font-display);
font-size: clamp(36px, 4.5vw, 64px);
line-height: 0.95;
color: var(--cream);
margin: 0 0 48px;
text-transform: uppercase;
letter-spacing: -0.005em;
}
.svc-faq__h2 em { font-style: normal; color: var(--gold-bright); }
.svc-faq__list { max-width: 880px; margin: 0 auto; }
.faq-item {
border-top: 1px solid var(--gold-line);
padding: 24px 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--gold-line); }
.faq-item__q {
list-style: none;
cursor: pointer;
font-family: var(--font-display);
font-size: clamp(18px, 1.4vw, 22px);
line-height: 1.3;
color: var(--cream);
display: flex; align-items: flex-start; justify-content: space-between;
gap: 24px;
padding-right: 4px;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__icon {
flex-shrink: 0;
width: 28px; height: 28px;
position: relative;
border: 1px solid var(--gold);
border-radius: 50%;
transition: transform 240ms ease-out, background 240ms ease-out;
}
.faq-item__icon::before,
.faq-item__icon::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 12px; height: 2px;
background: var(--gold);
transform: translate(-50%, -50%);
transition: transform 240ms ease-out;
}
.faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-item__icon { background: var(--gold); }
.faq-item[open] .faq-item__icon::before,
.faq-item[open] .faq-item__icon::after { background: var(--earth-deep); }
.faq-item[open] .faq-item__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item__a {
padding: 16px 4px 0;
font-family: var(--font-body);
font-size: 15.5px; line-height: 1.65;
color: var(--khaki);
max-width: 760px;
}
.faq-item__a p { margin: 0 0 14px; }
.faq-item__more {
display: inline-block;
font-size: 11px; font-weight: 700;
letter-spacing: 0.20em; text-transform: uppercase;
color: var(--gold);
}
/* ─────────────────────────── CONTACT FORM ─────────────────────────── */
.contact-section {
background:
radial-gradient(ellipse at 75% 30%, rgba(178, 147, 58,0.10) 0%, transparent 50%),
linear-gradient(180deg, var(--midnight-deep) 0%, var(--midnight) 100%);
}
.contact__inner {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: clamp(48px, 6vw, 96px);
align-items: start;
}
@media (max-width: 1024px) { .contact__inner { grid-template-columns: 1fr; } }
.contact__lhs h2 {
margin: 24px 0 24px;
max-width: 14ch;
}
.contact__lhs h2 em { font-style: italic; color: var(--gold); font-weight: 400; }
.contact__lhs p {
font-size: 16px; line-height: 1.7;
color: var(--text-muted);
max-width: 42ch;
margin-bottom: 32px;
}
.contact__office {
margin-top: 40px;
padding-top: 28px;
border-top: 1px solid rgba(178, 147, 58,0.15);
}
.contact__office-label {
font-family: var(--font-body);
font-size: 10px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold); margin-bottom: 16px;
}
.contact__office-addr {
font-family: var(--font-display);
font-size: 20px; font-weight: 400; line-height: 1.4;
color: var(--ivory);
margin-bottom: 12px;
}
.contact__office-meta {
font-size: 13px; line-height: 1.7;
color: var(--text-muted);
}
.contact__office-meta strong { color: var(--ivory); }
.form {
background: rgba(20, 29, 40, 0.5);
border: 1px solid rgba(178, 147, 58,0.20);
padding: clamp(32px, 4vw, 48px);
position: relative;
}
.form::before {
content: '';
position: absolute; top: -1px; left: 32px; right: 32px;
height: 2px;
background: var(--gold);
}
.form__row {
display: grid; gap: 24px;
grid-template-columns: 1fr 1fr;
margin-bottom: 24px;
}
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.form__row--single { grid-template-columns: 1fr; }
.form__field { display: flex; flex-direction: column; gap: 8px; }
.form__label {
font-family: var(--font-body);
font-size: 10px; font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--gold);
}
.form__input, .form__select, .form__textarea {
font-family: var(--font-body);
font-size: 15px;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(245,240,232,0.18);
padding: 12px 0;
color: var(--ivory);
transition: border-color var(--dur-base) var(--ease-out);
}
.form__input:focus, .form__select:focus, .form__textarea:focus {
outline: none;
border-bottom-color: var(--gold);
}
.form__select { appearance: none; cursor: pointer; background: transparent; }
.form__textarea { resize: vertical; min-height: 96px; padding-top: 12px; line-height: 1.5; }
.form__radio-group {
display: flex; gap: 24px; flex-wrap: wrap; padding-top: 6px;
}
.form__radio {
display: inline-flex; align-items: center; gap: 10px;
font-size: 14px; color: var(--ivory); cursor: pointer;
}
.form__radio input { accent-color: var(--gold); }
.form__submit {
margin-top: 16px;
width: 100%;
padding: 20px;
background: var(--gold);
color: var(--midnight-deep);
font-family: var(--font-body);
font-size: 12px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
border-radius: 2px;
transition: background var(--dur-fast) var(--ease-out);
}
.form__submit:hover { background: var(--gold-light); }
.form__legal {
font-size: 11px;
color: var(--text-faint);
text-align: center;
margin-top: 16px;
letter-spacing: 0.04em;
}
/* ─────────────────────────── FAQ ─────────────────────────── */
.faq {
background: var(--ivory);
color: var(--midnight-deep);
}
.faq__inner {
max-width: 920px;
margin-inline: auto;
padding: var(--pad-section-y) var(--pad-x);
}
.faq__head { text-align: center; margin-bottom: clamp(48px, 5vw, 72px); }
.faq__head h2 {
font-family: var(--font-display);
font-size: var(--step-h2);
font-weight: 400;
color: var(--midnight-deep);
margin: 20px 0 16px;
letter-spacing: -0.015em;
}
.faq__head h2 em { font-style: italic; color: var(--gold); }
.faq__head p { font-size: 16px; line-height: 1.6; color: var(--mist-fog); max-width: 52ch; margin: 0 auto; }
.faq__list { border-top: 1px solid rgba(30,42,56,0.12); }
.faq__item {
border-bottom: 1px solid rgba(30,42,56,0.12);
}
.faq__q {
width: 100%;
text-align: left;
padding: 28px 0;
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
font-family: var(--font-display);
font-size: clamp(19px, 1.2vw, 22px);
font-weight: 500;
color: var(--midnight-deep);
letter-spacing: -0.005em;
}
.faq__q-icon {
width: 22px; height: 22px;
flex-shrink: 0;
position: relative;
color: var(--gold);
}
.faq__q-icon::before, .faq__q-icon::after {
content: '';
position: absolute; top: 50%; left: 50%;
width: 14px; height: 1px;
background: currentColor;
transform: translate(-50%, -50%);
transition: transform var(--dur-base) var(--ease-out);
}
.faq__q-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__q-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a {
padding: 0 0 28px;
font-size: 16px;
line-height: 1.7;
color: var(--mist-fog);
max-width: 72ch;
}
/* ─────────────────────────── CITY/NEIGHBORHOOD HERO ─────────────────────────── */
.geo-hero {
background: var(--midnight);
padding: clamp(60px, 7vw, 96px) var(--pad-x) clamp(56px, 6vw, 80px);
position: relative;
border-bottom: 1px solid rgba(178, 147, 58,0.15);
}
.geo-hero__breadcrumb {
font-family: var(--font-body);
font-size: 11px; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--mist);
margin-bottom: 24px;
}
.geo-hero__breadcrumb a { color: var(--gold); transition: color var(--dur-fast); }
.geo-hero__breadcrumb a:hover { color: var(--gold-light); }
.geo-hero__breadcrumb-sep { margin: 0 12px; color: var(--mist-fog); }
.geo-hero__title {
font-family: var(--font-display);
font-size: clamp(48px, 6vw, 92px);
font-weight: 300;
line-height: 0.98;
letter-spacing: -0.025em;
color: var(--ivory);
max-width: 18ch;
margin-bottom: 28px;
}
.geo-hero__title em { font-style: italic; color: var(--gold-light); font-weight: 400; }
.geo-hero__lead {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(18px, 1.1rem + 0.5vw, 24px);
line-height: 1.55;
color: var(--ivory);
max-width: 58ch;
opacity: 0.9;
}
.geo-hero__meta {
display: flex; gap: clamp(24px, 3vw, 48px);
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid rgba(245,240,232,0.10);
max-width: 720px;
flex-wrap: wrap;
}
.geo-hero__meta-cell { font-size: 13px; }
.geo-hero__meta-label {
font-family: var(--font-body);
font-size: 10px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold);
margin-bottom: 6px;
}
.geo-hero__meta-value { color: var(--ivory); font-weight: 500; font-size: 15px; }
/* ─────────────────────────── PROSE (city body content) ─────────────────────────── */
.prose {
font-size: 16px; line-height: 1.75;
color: var(--text);
max-width: 68ch;
}
.prose p { margin-bottom: 22px; }
.prose h2 {
font-family: var(--font-display);
font-size: clamp(28px, 2vw, 38px);
font-weight: 400;
color: var(--ivory);
margin: 56px 0 20px;
letter-spacing: -0.01em;
}
.prose h3 {
font-family: var(--font-body);
font-size: 18px; font-weight: 600;
letter-spacing: 0.04em;
color: var(--gold);
margin: 36px 0 12px;
text-transform: uppercase; letter-spacing: 0.12em;
font-size: 13px;
}
.prose ul { padding-left: 24px; margin-bottom: 22px; }
.prose li { position: relative; padding-left: 20px; margin-bottom: 10px; color: var(--text); }
.prose li::before {
content: ''; position: absolute; left: 0; top: 11px;
width: 6px; height: 6px;
background: var(--gold); transform: rotate(45deg);
}
.prose a { color: var(--gold-light); border-bottom: 1px solid rgba(178, 147, 58,0.40); transition: border-color var(--dur-fast); }
.prose a:hover { border-bottom-color: var(--gold-light); }
.prose strong { color: var(--ivory); font-weight: 600; }
.city-grid {
display: grid;
grid-template-columns: 1fr 0.4fr;
gap: clamp(40px, 5vw, 80px);
margin-top: clamp(60px, 7vw, 96px);
}
@media (max-width: 1024px) { .city-grid { grid-template-columns: 1fr; } }
.local-context-card {
background: var(--bg-card-warm);
border: 1px solid rgba(178, 147, 58,0.18);
padding: clamp(28px, 3vw, 40px);
position: sticky; top: 100px;
}
.local-context-card h3 {
font-family: var(--font-body);
font-size: 11px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold);
margin-bottom: 24px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(178, 147, 58,0.20);
}
.local-context-card dl { display: grid; gap: 18px; }
.local-context-card dt {
font-family: var(--font-body);
font-size: 10px; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--mist);
margin-bottom: 4px;
}
.local-context-card dd {
font-family: var(--font-display);
font-size: 17px; line-height: 1.4;
color: var(--ivory);
}
.local-context-card ul { font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.local-context-card li { margin-bottom: 4px; }
.local-context-card li::before { content: '— '; color: var(--gold); }
/* ─────────────────────────── FOOTER ─────────────────────────── */
.footer {
background: var(--earth-deep); /* matches earth field — no seam */
border-top: 1px solid var(--gold-line);
padding: clamp(64px, 7vw, 96px) var(--pad-x) clamp(32px, 4vw, 48px);
color: var(--text-muted);
}
.footer__inner {
max-width: 1320px;
margin-inline: auto;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: clamp(32px, 4vw, 64px);
margin-bottom: 56px;
}
@media (max-width: 1024px) { .footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer__inner { grid-template-columns: 1fr; } }
.footer__brand-block { padding-right: 32px; }
.footer__brand-block .brand { margin-bottom: 24px; }
.footer__tagline {
font-family: var(--font-display);
font-style: italic;
font-size: 18px;
color: var(--ivory);
margin-bottom: 24px;
line-height: 1.5;
}
.footer__nap { font-size: 14px; line-height: 1.7; color: var(--text-muted); }
.footer__nap strong { color: var(--ivory); font-weight: 600; }
.footer__col-title {
font-family: var(--font-body);
font-size: 11px; font-weight: 700;
letter-spacing: 0.20em; text-transform: uppercase;
color: var(--gold);
margin-bottom: 20px;
}
.footer__list { display: grid; gap: 12px; }
.footer__list a {
font-size: 14px;
color: var(--text-muted);
transition: color var(--dur-fast);
}
.footer__list a:hover { color: var(--ivory); }
.footer__ext {
display: inline-block;
font-size: 0.85em;
color: var(--gold);
opacity: 0.7;
transform: translateY(-1px);
transition: opacity var(--dur-fast);
}
.footer__list a:hover .footer__ext { opacity: 1; }
/* ─── Byline (Site built with ♥ by Ketchup) ─── */
.footer__byline {
margin-top: 16px;
padding: 18px 0 4px;
border-top: 1px solid var(--gold-faint);
text-align: center;
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
font-weight: 400;
color: var(--mist);
letter-spacing: 0.02em;
}
.footer__byline a {
color: var(--gold-light);
font-style: normal;
font-family: var(--font-body);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 11px;
margin-left: 2px;
border-bottom: 1px solid transparent;
transition: border-color var(--dur-fast), color var(--dur-fast);
}
.footer__byline a:hover {
color: var(--gold);
border-bottom-color: var(--gold);
}
.footer__heart {
display: inline-block;
color: var(--gold);
font-size: 1.05em;
vertical-align: -0.05em;
margin: 0 2px;
transform: scale(1);
transition: transform var(--dur-base) var(--ease-out);
}
.footer__byline:hover .footer__heart {
transform: scale(1.18);
}
.footer__social {
display: flex; gap: 16px;
margin-top: 24px;
}
.footer__social a {
width: 36px; height: 36px;
border: 1px solid rgba(178, 147, 58,0.25);
display: flex; align-items: center; justify-content: center;
color: var(--gold);
transition: all var(--dur-fast) var(--ease-out);
}
.footer__social a:hover {
background: var(--gold);
color: var(--midnight-deep);
border-color: var(--gold);
}
.footer__social svg { width: 16px; height: 16px; }
.footer__bottom {
max-width: 1320px;
margin-inline: auto;
padding-top: 32px;
border-top: 1px solid rgba(255,255,255,0.05);
display: flex; justify-content: space-between; align-items: center;
gap: 24px; flex-wrap: wrap;
font-size: 12px; color: var(--text-faint);
letter-spacing: 0.04em;
}
.footer__bottom a { color: var(--text-muted); }
.footer__bottom a:hover { color: var(--ivory); }
.footer__bottom-links { display: flex; gap: 24px; flex-wrap: wrap; }
/* ─────────────────────────── REVEAL ANIMATION ─────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
will-change: opacity, transform;
}
.reveal.is-in {
opacity: 1;
transform: translateY(0);
}
.reveal-stagger > * {
opacity: 0;
transform: translateY(20px);
transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 450ms; }
.reveal-stagger.is-in > *:nth-child(7) { transition-delay: 540ms; }
.reveal-stagger.is-in > *:nth-child(8) { transition-delay: 630ms; }
.reveal-stagger.is-in > * { opacity: 1; transform: translateY(0); }
@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;
}
.reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}
/* Print niceties */
@media print {
body::before { display: none; }
.header, .footer__social, .form, .nav__cta { display: none; }
}
/* ─── FORCE-OVERRIDE: geo-hero photo mode (appended last to win cascade) ─── */
.geo-hero.geo-hero--photo {
position: relative !important;
background-image: var(--hero-photo) !important;
background-size: cover !important;
background-position: center 25% !important;
background-color: var(--earth-deep) !important;
isolation: isolate;
min-height: 78vh !important;
display: flex !important;
align-items: center !important;
padding: clamp(140px, 12vw, 220px) var(--s-pad-x) clamp(64px, 7vw, 96px) !important;
}
.geo-hero--photo > .container { position: relative; z-index: 2; }
.geo-hero--photo .geo-hero__media-overlay {
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
background:
linear-gradient(180deg, rgba(10,9,5,0.55) 0%, rgba(10,9,5,0.20) 40%, rgba(10,9,5,0.88) 100%),
linear-gradient(90deg, rgba(10,9,5,0.55) 0%, rgba(10,9,5,0.10) 60%, rgba(10,9,5,0.30) 100%) !important;
pointer-events: none;
}
.geo-hero--photo .geo-hero__title { color: var(--cream) !important; text-shadow: 0 4px 32px rgba(0,0,0,0.55); }
.geo-hero--photo .geo-hero__title em { color: var(--gold) !important; font-style: normal !important; }
.geo-hero--photo .geo-hero__lead { color: var(--cream) !important; max-width: 56ch !important; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.geo-hero--photo .geo-hero__breadcrumb { color: var(--gold-light); }
.geo-hero--photo .geo-hero__breadcrumb a { color: var(--cream); }
.geo-hero--photo .geo-hero__meta-cell {
background: rgba(10,9,5,0.55);
border: 1px solid var(--gold-line);
padding: 16px 20px;
border-radius: 4px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.geo-hero--photo .geo-hero__meta-label { color: var(--gold-light) !important; }
.geo-hero--photo .geo-hero__meta-value { color: var(--cream) !important; }
@media (max-width: 800px) {
.geo-hero.geo-hero--photo { min-height: 65vh !important; }
}
/* Reviews hero — strengthened legibility scrim + horizontal flip on the
bg photo. Photo lives on a ::before pseudo so we can scaleX(-1) it
without flipping the headline/cutout. Parent background-image is
cleared to none — pseudo carries the photo. */
.geo-hero--reviews { background-image: none !important; }
.geo-hero--reviews::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background-image: var(--hero-photo);
background-size: cover;
background-position: 25% 30%; /* mirror of 75% after scaleX */
background-repeat: no-repeat;
background-color: var(--earth-deep);
transform: scaleX(-1);
pointer-events: none;
}
.geo-hero--reviews .geo-hero__media-overlay {
background:
linear-gradient(180deg, rgba(10,9,5,0.50) 0%, rgba(10,9,5,0.30) 35%, rgba(10,9,5,0.85) 100%),
linear-gradient(90deg, rgba(10,9,5,0.78) 0%, rgba(10,9,5,0.55) 30%, rgba(10,9,5,0.22) 60%, rgba(10,9,5,0.30) 100%) !important;
}
/* ═══════════════════════════════════════════════════════════════
v0.3 — design-critique fixes (post-audit)
- Gym-floor texture (film grain)
- Hero lower-thirds + marquee ribbon + bigger headline
- Results rail (outcomes-based, replaces credentials proof)
- Bento services grid (featured 1:1 + Comp Prep)
- Vimeo chrome killer for testimonial videos
═══════════════════════════════════════════════════════════════ */
/* ─── Film-grain texture overlay (GORUCK/Tracksmith register) ──── */
/* Inline SVG noise filter — adds 4% chalk/sweat-grit on every dark section */
.grain-bg::after,
.section--earth::after,
.hero-bleed::after,
.cta-band::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.06;
mix-blend-mode: overlay;
z-index: 0;
background-image: url("data:image/svg+xml;utf8,");
}
.section--earth, .hero-bleed, .cta-band { position: relative; }
.section--earth > *, .hero-bleed > *, .cta-band > * { position: relative; z-index: 1; }
/* ─── HERO REBUILD: lower-thirds + marquee + bigger type ──────── */
/* Marquee ribbon — slides above-the-fold from right to left at 22s loop */
.hero-marquee {
/* v33 retired — marquee moved to top of page as .top-marquee. */
display: none;
}
/* v34 TOP TICKER — fixed at very top of viewport, ABOVE the header.
Header is pushed down to top: 38px to sit below this strip. */
.top-marquee {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 110; /* above .pt-header (100) */
width: 100%;
overflow: hidden;
background: rgba(10, 9, 5, 0.96);
border-bottom: 1px solid var(--gold-line);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.top-marquee__track {
display: inline-flex;
white-space: nowrap;
animation: marquee-slide 26s linear infinite;
will-change: transform;
padding: 10px 0;
}
.top-marquee__item {
font-family: var(--font-accent);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cream);
padding: 0 28px;
white-space: nowrap;
}
.top-marquee__item--gold { color: var(--gold); }
.top-marquee__item::before {
content: '⌁';
margin-right: 28px;
color: var(--gold);
font-weight: 400;
}
@media (prefers-reduced-motion: reduce) {
.top-marquee__track { animation: none; }
}
@media (max-width: 700px) {
.top-marquee__item { font-size: 10.5px; padding: 0 18px; }
.top-marquee__item::before { margin-right: 18px; }
}
.hero-marquee__track {
display: inline-flex;
white-space: nowrap;
animation: marquee-slide 22s linear infinite;
will-change: transform;
padding: 12px 0;
}
.hero-marquee__item {
font-family: var(--font-accent);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cream);
padding: 0 32px;
white-space: nowrap;
}
.hero-marquee__item--gold { color: var(--gold); }
.hero-marquee__item::before {
content: '⌁';
margin-right: 32px;
color: var(--gold);
font-weight: 400;
}
@keyframes marquee-slide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.hero-marquee__track { animation: none; }
}
@media (max-width: 700px) {
.hero-marquee__item { font-size: 11px; padding: 0 20px; }
}
/* Lower-thirds layout — push content to bottom of hero */
.hero-bleed.hero-bleed--lower {
align-items: flex-end;
padding-top: 120px; /* room for header (~80) + gap */
padding-bottom: 96px;
min-height: 100vh;
}
.hero-bleed--lower .hero-bleed__inner {
max-width: 1400px;
}
/* Half-screen layout: keep text content inside the LEFT 50% of viewport
so it never overlaps the photo on the right half. */
@media (min-width: 801px) {
.hero-bleed--lower .hero-bleed__inner {
max-width: calc(50vw - 32px);
padding-right: clamp(24px, 4vw, 64px);
}
}
.hero-bleed--lower .hero-bleed__title {
/* v23: dialed down from 240px max — billboard energy was too much.
Still commanding but no longer overwhelming the photo + reel. */
font-size: clamp(64px, 3rem + 5.5vw, 156px);
line-height: 0.88;
letter-spacing: -0.01em;
max-width: 14ch;
}
.hero-bleed--lower .hero-bleed__sub {
margin-top: 32px;
max-width: 52ch;
font-size: clamp(15px, 0.92rem + 0.45vw, 19px);
letter-spacing: 0.10em;
font-weight: 500;
line-height: 1.45;
}
.hero-bleed--lower .hero-bleed__actions { margin-top: 40px; }
@media (max-width: 800px) {
.hero-bleed.hero-bleed--lower {
padding-top: 140px;
padding-bottom: 64px;
}
/* v49 tighter clamp — Marc reported "LIMITLESS." cut off at 768/375.
Previous max 80px overflowed the small-viewport content area. */
.hero-bleed--lower .hero-bleed__title {
font-size: clamp(44px, 8vw, 64px);
max-width: none;
}
}
@media (max-width: 600px) {
.hero-bleed--lower .hero-bleed__title {
font-size: clamp(36px, 11vw, 52px);
max-width: none;
}
}
/* ─── RESULTS RAIL — outcomes-based proof (replaces credentials strip) ── */
/* v24: results-band restyled to match the /about/ stat bar exactly.
Bigger numerals · burnt-ember superscripts · dividers between cells ·
left-aligned for editorial weight (was tiny + centered). */
.results-band {
background: var(--earth-deep);
border-top: 1px solid var(--gold-line);
border-bottom: 1px solid var(--gold-line);
padding: clamp(40px, 5vh, 64px) var(--s-pad-x);
position: relative;
overflow: hidden;
}
.results-band__inner {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
align-items: stretch;
}
.results-stat {
padding: 16px clamp(20px, 3vw, 40px);
border-right: 1px solid var(--gold-line);
text-align: left;
}
.results-stat:last-child { border-right: 0; }
.results-stat__num {
display: block;
font-family: var(--font-display);
font-size: clamp(56px, 5.5vw, 84px);
color: var(--gold-bright);
line-height: 0.85;
letter-spacing: -0.01em;
margin-bottom: 8px;
}
.results-stat__num .plus,
.results-stat__num .star,
.results-stat__num span {
font-size: 0.5em;
vertical-align: super;
color: var(--burnt);
margin-left: 4px;
}
.results-stat__label {
margin-top: 0;
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--cream);
margin-bottom: 6px;
}
.results-stat__sublabel {
margin-top: 0;
font-family: var(--font-body);
font-size: 13px;
line-height: 1.4;
color: var(--khaki);
}
@media (max-width: 900px) {
.results-band__inner { grid-template-columns: repeat(2, 1fr); }
.results-stat:nth-child(2) { border-right: 0; }
.results-stat:nth-child(1), .results-stat:nth-child(2) { border-bottom: 1px solid var(--gold-line); padding-bottom: 32px; }
.results-stat:nth-child(3), .results-stat:nth-child(4) { padding-top: 32px; }
}
@media (max-width: 540px) {
.results-band__inner { grid-template-columns: 1fr; }
.results-stat { border-right: 0; border-bottom: 1px solid var(--gold-line); padding: 24px 0; }
.results-stat:last-child { border-bottom: 0; }
}
/* Named results rail — 3 featured client outcomes */
.named-results {
background: var(--earth);
padding: var(--s-pad-section) var(--s-pad-x);
}
.named-results__inner { max-width: 1400px; margin: 0 auto; }
.named-results__head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 32px;
margin-bottom: 56px;
flex-wrap: wrap;
}
.named-results__title {
font-family: var(--font-display);
font-size: var(--t-h2);
line-height: 0.95;
letter-spacing: 0.005em;
max-width: 22ch;
}
.named-results__title .gold { color: var(--gold); }
.named-results__sub {
font-family: var(--font-accent);
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
max-width: 32ch;
}
.named-results__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 1000px) { .named-results__grid { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; } }
.result-card {
position: relative;
background: var(--earth-deep);
border: 1px solid var(--gold-line);
border-radius: 4px;
padding: 32px 28px;
overflow: hidden;
isolation: isolate;
}
.result-card__photo {
position: absolute;
inset: 0;
z-index: -2;
background-size: cover;
background-position: center 25%;
opacity: 0.42;
}
.result-card::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(10,9,5,0.55) 0%, rgba(10,9,5,0.92) 70%);
}
.result-card__metric {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 20px;
}
.result-card__num {
font-family: var(--font-display);
font-size: clamp(48px, 2rem + 2.5vw, 76px);
color: var(--gold);
line-height: 0.92;
letter-spacing: 0.005em;
}
.result-card__unit {
font-family: var(--font-accent);
font-size: 14px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cream);
font-weight: 600;
}
.result-card__quote {
font-size: 15px;
line-height: 1.55;
color: var(--cream);
font-style: italic;
margin-bottom: 20px;
position: relative;
padding-left: 18px;
}
.result-card__quote::before {
content: '';
position: absolute;
left: 0; top: 4px; bottom: 4px;
width: 2px;
background: var(--gold);
}
.result-card__attr {
padding-top: 16px;
border-top: 1px solid var(--gold-line);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.result-card__name {
font-family: var(--font-display);
font-size: 20px;
color: var(--cream);
letter-spacing: 0.03em;
}
.result-card__role {
font-family: var(--font-accent);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-light);
font-weight: 600;
}
/* ─── BENTO SERVICES GRID — featured 1:1 + Comp Prep ────────────── */
.service-bento {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(220px, auto);
gap: 20px;
}
.service-bento .service-tile {
grid-column: span 2; /* default — small tile */
min-height: 320px;
}
.service-bento .service-tile--featured {
grid-column: span 4; /* 1:1 Personal Training takes 2/3 width */
grid-row: span 2;
min-height: 480px;
}
.service-bento .service-tile--vertical {
grid-column: span 2; /* Comp Prep — vertical column */
grid-row: span 2;
min-height: 480px;
}
.service-bento .service-tile--featured .service-tile__name { font-size: clamp(36px, 1.8rem + 1.6vw, 52px); }
.service-bento .service-tile--vertical .service-tile__name { font-size: clamp(30px, 1.6rem + 1.2vw, 42px); }
/* Duration ribbon on each tile */
.service-tile__ribbon {
position: absolute;
top: 24px;
right: 24px;
background: var(--gold);
color: var(--earth-deep);
font-family: var(--font-accent);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 999px;
}
@media (max-width: 1100px) {
.service-bento {
grid-template-columns: repeat(2, 1fr);
}
.service-bento .service-tile { grid-column: span 1; }
.service-bento .service-tile--featured { grid-column: span 2; grid-row: auto; }
.service-bento .service-tile--vertical { grid-column: span 1; grid-row: auto; }
}
@media (max-width: 640px) {
.service-bento { grid-template-columns: 1fr; }
.service-bento .service-tile,
.service-bento .service-tile--featured,
.service-bento .service-tile--vertical { grid-column: span 1; grid-row: auto; min-height: 340px; }
}
/* ─── Vimeo chrome killer for testimonial videos ───────────────── */
/* Wrap the iframe so we can mask the playhead/heart/share UI from
Vimeo's player. Use overflow:hidden + scale to crop the chrome. */
.video-card--clean {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 6px;
overflow: hidden;
background: var(--earth);
box-shadow: var(--shadow-card);
cursor: pointer;
}
.video-card--clean iframe {
width: calc(100% + 24px); /* hide vimeo right-edge controls */
height: calc(100% + 60px); /* hide vimeo bottom playbar */
margin-left: -12px;
margin-top: 0;
border: 0;
pointer-events: none; /* require explicit unlock to interact */
}
.video-card--clean.is-active iframe { pointer-events: auto; }
.video-card--clean::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10,9,5,0) 0%, rgba(10,9,5,0) 60%, rgba(10,9,5,0.65) 100%);
pointer-events: none;
}
.video-card--clean.is-active::after { opacity: 0; transition: opacity 200ms; }
/* CREAM-SECTION OVERRIDE — when video cards live inside .section--cream
(e.g. the Reviews section now), the dark earth fill + heavy vignette
reads as two black islands floating on cream. Soften them so they
seat into the lighter palette: keep the dark frame (videos need a
dark bezel) but soften the shadow + add a hairline edge, and pull
the bottom vignette down to ~0.35 so the caption gradient doesn't
read as a hard black bar against cream. */
.section--cream .video-card--clean {
box-shadow: 0 18px 48px rgba(10, 9, 5, 0.18);
border: 1px solid rgba(10, 9, 5, 0.08);
}
.section--cream .video-card--clean::after {
background: linear-gradient(180deg, rgba(10,9,5,0) 0%, rgba(10,9,5,0) 60%, rgba(10,9,5,0.35) 100%);
}
.video-card__play-btn {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 4;
width: 78px; height: 78px;
border-radius: 50%;
background: rgba(178, 147, 58, 0.92);
display: flex;
align-items: center;
justify-content: center;
color: var(--earth-deep);
border: 0;
cursor: pointer;
box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 0 0 0 var(--gold-glow);
transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
}
.video-card__play-btn:hover {
transform: translate(-50%, -50%) scale(1.08);
box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 12px var(--gold-glow);
}
.video-card__play-btn svg { width: 24px; height: 24px; margin-left: 3px; }
.video-card--clean.is-active .video-card__play-btn { display: none; }
.video-card__caption {
position: absolute;
left: 16px; bottom: 12px;
z-index: 3;
font-family: var(--font-accent);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--cream);
background: rgba(10,9,5,0.70);
padding: 6px 12px;
border-radius: 999px;
pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════════
v0.4 — HERO VIDEO TRUE-BACKGROUND FORCE-OVERRIDE
Legacy YOSHI CSS later in cascade was overriding .hero-bleed__media
making the iframe render at default 286×150. These rules sit at the
END of the file with !important to guarantee the Vimeo iframe fills
the hero like a real CSS background-video (cover + center + crop).
Canonical pattern: width/height = max(100vw|vh, aspect-corrected vh|vw)
═══════════════════════════════════════════════════════════════ */
.hero-bleed {
position: relative !important;
isolation: isolate;
overflow: hidden !important;
}
.hero-bleed__media {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 0 !important; /* below content (z:1) and overlay (z:1) */
overflow: hidden !important;
pointer-events: none;
background: #000; /* black backdrop while video loads */
}
/* ── v27 retired: half-screen photo. v28: CUTOUT-ON-DARK — Chris is a
transparent PNG floating on a dark hero with a warm gold rim-light. */
/* Rim-light radial behind where Chris stands — gives the cutout edges
a subtle warm "spotlight" without showing a real background. */
/* v0.5 — CINEMATIC GYM BACKDROP (replaces video)
Single heavily-blurred photo of the SMTF training floor (img_4368.jpg —
signature red rack equipment on deep black). Heavy blur turns the
gym into atmospheric color washes; the warmlight overlay adds tungsten
key-light + cool fill; existing rim-light radial focuses the eye on
where Chris stands. Slow ken-burns zoom keeps the image alive without
the bandwidth/distraction of a video. */
.hero-bleed__gym-bg {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
background: #0a0905;
}
.hero-bleed__gym-img {
position: absolute;
top: 50%; left: 50%;
width: 108%;
height: 108%;
object-fit: cover;
object-position: center 42%;
/* scaleX(-1) flips the gym photo horizontally — preserved through the
ken-burns keyframes below so the flip stays during the slow zoom. */
transform: translate(-50%, -50%) scaleX(-1) scale(1.0);
/* Blur dialed back from 32px → 16px so the SMTF red racks read as
recognizable gym, not just abstract color washes. Brightness up
and saturation up to compensate for less-aggressive blur. */
filter: blur(16px) saturate(1.30) brightness(0.78) contrast(1.08);
opacity: 0.95;
will-change: transform;
animation: heroKenBurns 36s ease-in-out infinite alternate;
}
@keyframes heroKenBurns {
0% { transform: translate(-50%, -50%) scaleX(-1) scale(1.00); }
100% { transform: translate(-50%, -50%) scaleX(-1) scale(1.10); }
}
@media (prefers-reduced-motion: reduce) {
.hero-bleed__gym-img { animation: none; }
}
.hero-bleed__gym-warmlight {
position: absolute;
inset: 0;
background:
/* Warm tungsten key from upper-right — matches Chris's rim light */
radial-gradient(ellipse 42% 62% at 72% 28%, rgba(212, 165, 64, 0.28) 0%, rgba(178, 147, 58, 0.10) 45%, transparent 78%),
/* Cool fill from bottom-left for color separation */
radial-gradient(ellipse 46% 58% at 16% 92%, rgba(34, 36, 52, 0.42) 0%, transparent 70%),
/* Subtle red signature halo from the racks */
radial-gradient(ellipse 30% 45% at 50% 55%, rgba(140, 30, 28, 0.14) 0%, transparent 70%);
mix-blend-mode: screen;
pointer-events: none;
}
/* Cinematic film grain — restored from v31. Subtle SVG noise, 6% opacity. */
.hero-bleed__grain {
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
opacity: 0.07;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.7 0 0 0 0 0.65 0 0 0 0 0.55 0 0 0 0.85 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ═══════════════════════════════════════════════════════════════
HERO BACKDROP VARIANTS — togglable via ?bg=studio|gradient|minimal
The default (no param) is the cinematic gym backdrop above.
These override the .hero-bleed__gym-* layers for A/B comparison. */
/* ─── VARIANT B: Cinematic Studio Black ─────────────────────────
Pure black backdrop + single warm gold spotlight from upper-right.
Mimics a single-key-light studio shot. Mirrors Chris's actual rim. */
body.hv-studio .hero-bleed__gym-img { opacity: 0 !important; animation: none !important; }
body.hv-studio .hero-bleed__gym-bg { background: #050402; }
body.hv-studio .hero-bleed__gym-warmlight {
background:
/* Tight, brighter tungsten spotlight from upper-right */
radial-gradient(ellipse 48% 78% at 74% 30%, rgba(232, 188, 92, 0.38) 0%, rgba(212, 165, 64, 0.12) 38%, transparent 72%),
/* Floor pool — barely-there warm reflection at the bottom */
radial-gradient(ellipse 60% 28% at 50% 108%, rgba(40, 28, 18, 0.50) 0%, transparent 70%);
mix-blend-mode: normal !important;
}
body.hv-studio .hero-bleed__rimlight {
background:
linear-gradient(90deg, rgba(5,4,2,0.82) 0%, rgba(5,4,2,0.42) 38%, rgba(5,4,2,0.0) 62%, rgba(5,4,2,0.18) 100%),
linear-gradient(180deg, rgba(5,4,2,0.18) 0%, transparent 32%, rgba(5,4,2,0.55) 88%, rgba(5,4,2,0.92) 100%) !important;
}
/* ─── VARIANT C: Animated Gradient + Particles ─────────────────
Deep gradient with slow-drifting gold "dust" particles. Modern,
more motion than gym variant. Particles are CSS radials drifting. */
body.hv-gradient .hero-bleed__gym-img { opacity: 0 !important; animation: none !important; }
body.hv-gradient .hero-bleed__gym-bg {
background:
radial-gradient(ellipse at 78% 28%, rgba(72, 50, 24, 0.55) 0%, transparent 50%),
radial-gradient(ellipse at 16% 86%, rgba(28, 30, 42, 0.55) 0%, transparent 50%),
linear-gradient(160deg, #100c07 0%, #060503 60%, #020100 100%);
}
body.hv-gradient .hero-bleed__gym-warmlight {
background:
/* Five gold dust particles drifting across the field */
radial-gradient(circle 3px at 22% 18%, rgba(232, 188, 92, 0.85) 0%, transparent 100%),
radial-gradient(circle 2px at 86% 72%, rgba(232, 188, 92, 0.70) 0%, transparent 100%),
radial-gradient(circle 4px at 64% 12%, rgba(232, 188, 92, 0.55) 0%, transparent 100%),
radial-gradient(circle 2px at 38% 88%, rgba(212, 165, 64, 0.70) 0%, transparent 100%),
radial-gradient(circle 3px at 92% 38%, rgba(212, 165, 64, 0.60) 0%, transparent 100%),
radial-gradient(circle 2px at 12% 54%, rgba(232, 188, 92, 0.50) 0%, transparent 100%),
radial-gradient(circle 2px at 52% 62%, rgba(232, 188, 92, 0.45) 0%, transparent 100%),
/* Subtle warm halo behind where Chris stands */
radial-gradient(ellipse 36% 56% at 72% 34%, rgba(212, 165, 64, 0.18) 0%, transparent 72%);
mix-blend-mode: normal !important;
animation: particleDrift 28s ease-in-out infinite alternate;
}
@keyframes particleDrift {
0% { transform: translate(0, 0); }
50% { transform: translate(18px, -14px); }
100% { transform: translate(-12px, 8px); }
}
@media (prefers-reduced-motion: reduce) {
body.hv-gradient .hero-bleed__gym-warmlight { animation: none; }
}
/* ─── VARIANT D: Architectural Minimal ─────────────────────────
Solid dark backdrop + one vertical gold accent line behind Chris.
Confident, Bauhaus-ish, all visual weight on type + cutout. */
body.hv-minimal .hero-bleed__gym-img { opacity: 0 !important; animation: none !important; }
body.hv-minimal .hero-bleed__gym-bg {
background: #060503;
}
body.hv-minimal .hero-bleed__gym-bg::after {
/* Vertical gold accent line — placed between text and cutout so it
reads as a divider, not hidden behind Chris. Soft glow on both sides. */
content: '';
position: absolute;
top: 16%; bottom: 16%;
left: 48%;
width: 1px;
background: linear-gradient(180deg, transparent 0%, rgba(212, 165, 64, 0.0) 6%, rgba(212, 165, 64, 0.45) 24%, rgba(232, 188, 92, 0.92) 50%, rgba(212, 165, 64, 0.45) 76%, rgba(212, 165, 64, 0.0) 94%, transparent 100%);
box-shadow: 0 0 40px rgba(212, 165, 64, 0.50), 0 0 80px rgba(212, 165, 64, 0.20);
pointer-events: none;
}
@media (max-width: 900px) {
body.hv-minimal .hero-bleed__gym-bg::after { left: 55%; opacity: 0.55; }
}
@media (max-width: 600px) {
body.hv-minimal .hero-bleed__gym-bg::after { display: none; }
}
body.hv-minimal .hero-bleed__gym-warmlight {
background:
/* Soft warm wash centered on the accent line for atmosphere */
radial-gradient(ellipse 32% 56% at 72% 50%, rgba(212, 165, 64, 0.12) 0%, transparent 75%);
mix-blend-mode: normal !important;
}
body.hv-minimal .hero-bleed__rimlight {
background:
linear-gradient(90deg, rgba(5,4,2,0.72) 0%, rgba(5,4,2,0.20) 50%, rgba(5,4,2,0.18) 100%),
linear-gradient(180deg, transparent 0%, transparent 58%, rgba(5,4,2,0.50) 92%, rgba(5,4,2,0.85) 100%) !important;
}
body.hv-minimal .hero-bleed__grain { opacity: 0.04; }
/* v42 TALKING MODE — AI Chris video is FULL-SCREEN inside the hero so all 3
hand gestures stay in frame. object-fit: contain preserves aspect (portrait
video letterboxes with pure-black bars). mix-blend-mode: lighten dissolves
the black bars + the video's black BG into the page's pure #000 — Chris's
body and arms float across the entire screen with hands visible at full reach. */
.hero-bleed--talking .hero-bleed__video {
position: absolute !important;
inset: 0 !important;
top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
z-index: 2 !important;
overflow: hidden !important;
background: #000 !important;
filter: none !important;
}
.hero-bleed--talking .hero-bleed__video-mp4 {
position: absolute !important;
top: 0 !important; left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
opacity: 1 !important;
filter: none !important;
mix-blend-mode: lighten; /* black bars + video bg dissolve into page bg */
}
.hero-bleed--talking .hero-bleed__video-iframe { display: none !important; }
.hero-bleed--talking .hero-bleed__cutout { display: none !important; }
/* Text always above the full-screen video. */
.hero-bleed--talking .hero-bleed__inner { z-index: 5 !important; }
/* v41 — TRUE PURE BLACK. Bulldoze every layer + maximize specificity.
Body, html, hero section, all hero layers — all forced to #000. */
html, body { background: #000 !important; }
section.hero-bleed.hero-bleed--lower.hero-bleed--talking,
section.hero-bleed.hero-bleed--lower.hero-bleed--talking .hero-bleed__media,
section.hero-bleed.hero-bleed--lower.hero-bleed--talking .hero-bleed__rimlight,
section.hero-bleed.hero-bleed--lower.hero-bleed--talking .hero-bleed__noise,
section.hero-bleed.hero-bleed--lower.hero-bleed--talking .hero-bleed__video,
section.hero-bleed.hero-bleed--lower.hero-bleed--talking .hero-bleed__inner,
.hero-bleed--talking,
.hero-bleed--talking *:not(.hero-bleed__title):not(.hero-bleed__line):not(.btn):not(.btn--primary):not(.btn--ghost):not(.gold):not(.hero-bleed__sub):not(.hero-bleed__actions):not(span) {
background: #000 !important;
}
.hero-bleed--talking .hero-bleed__rimlight {
background-image: none !important;
background: #000 !important;
}
/* Kill the ::after vignette overlay in talking mode. */
.hero-bleed--talking .hero-bleed__media::after { display: none !important; background: #000 !important; }
.hero-bleed--talking::before,
.hero-bleed--talking::after { display: none !important; }
/* v46 TOP-EDGE SCRIM on header pseudo. */
.pt-header::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
height: 140px;
background: linear-gradient(180deg, rgba(10, 9, 5, 0.55) 0%, rgba(10, 9, 5, 0.20) 80px, transparent 140px);
pointer-events: none;
z-index: -1;
transition: opacity 240ms ease;
opacity: 1;
}
.pt-header.is-scrolled::before {
opacity: 0;
}
/* v43 LIGHT-STREAK SUMMON — Chris's hand gesture creates a glowing gold light
streak that sweeps left-to-right across each line, "painting" the text into
existence as the streak passes. Premium cinematic feel, ties directly to the
AI video's hand choreography. Inspired by Tracksmith/Nike SB hero treatments. */
.hero-bleed--gymdrop .hero-bleed__line {
position: relative;
display: inline-block;
opacity: 0;
/* Clip from the right — text reveals L→R as the inset shrinks. */
clip-path: inset(0 100% 0 -8px);
-webkit-clip-path: inset(0 100% 0 -8px);
transform: translateY(8px);
animation: handStreak 1.6s cubic-bezier(0.4, 0, 0.18, 1) forwards;
}
.hero-bleed--talking .hero-bleed__sub.hero-bleed__line,
.hero-bleed--talking .hero-bleed__actions.hero-bleed__line {
display: block; /* sub/actions need block to wrap properly */
}
/* The gold light bar that travels along the reveal edge — pseudo-element
sized to span just past the line's vertical extent. */
.hero-bleed--gymdrop .hero-bleed__line::after {
content: "";
position: absolute;
top: -6%; bottom: -6%;
left: 0;
width: 5px;
background: linear-gradient(180deg,
transparent 0%,
rgba(255,242,194,0.0) 10%,
rgba(255,242,194,0.9) 35%,
#FFF4C8 50%,
rgba(255,239,176,0.9) 65%,
rgba(219,181,74,0.0) 90%,
transparent 100%);
box-shadow:
0 0 12px rgba(255, 244, 200, 1),
0 0 28px rgba(255, 184, 74, 0.85),
0 0 56px rgba(178, 147, 58, 0.55);
opacity: 0;
pointer-events: none;
animation: handStreakBar 1.6s cubic-bezier(0.4, 0, 0.18, 1) forwards;
z-index: 1;
}
@keyframes handStreak {
0% { opacity: 0; clip-path: inset(0 100% 0 -8px); -webkit-clip-path: inset(0 100% 0 -8px); transform: translateY(8px); }
10% { opacity: 1; }
92% { transform: translateY(0); }
100% { opacity: 1; clip-path: inset(0 0% 0 -8px); -webkit-clip-path: inset(0 0% 0 -8px); transform: translateY(0); }
}
@keyframes handStreakBar {
0% { left: 0; opacity: 0; }
8% { opacity: 1; }
88% { opacity: 1; }
100% { left: 100%; opacity: 0; }
}
/* Motion timing — tightened from video-synced (1.0/3.4/6.0/6.4s) to a
snappy staggered reveal now that there's no AI-Chris hand choreography
to sync to. Still premium, just punchier. */
.hero-bleed--gymdrop .hero-bleed__line--1 { animation-delay: 0.20s; }
.hero-bleed--gymdrop .hero-bleed__line--1::after { animation-delay: 0.20s; }
.hero-bleed--gymdrop .hero-bleed__line--2 { animation-delay: 0.75s; }
.hero-bleed--gymdrop .hero-bleed__line--2::after { animation-delay: 0.75s; }
.hero-bleed--gymdrop .hero-bleed__line--3 { animation-delay: 1.55s; }
.hero-bleed--gymdrop .hero-bleed__line--3::after { animation-delay: 1.55s; }
.hero-bleed--gymdrop .hero-bleed__line--4 { animation-delay: 2.00s; }
.hero-bleed--gymdrop .hero-bleed__line--4::after { animation-delay: 2.00s; }
/* GOLD "LIMITLESS." gets the EXTRA punch — longer streak, bigger glow,
plus a shimmer pass that sweeps across the gold gradient AFTER reveal. */
.hero-bleed--gymdrop .hero-bleed__line--2 {
animation-name: handStreakGold;
animation-duration: 2.0s;
}
.hero-bleed--gymdrop .hero-bleed__line--2::after {
width: 8px;
box-shadow:
0 0 18px rgba(255, 244, 200, 1),
0 0 42px rgba(255, 184, 74, 1),
0 0 80px rgba(178, 147, 58, 0.7),
0 0 120px rgba(250, 133, 79, 0.4);
animation-name: handStreakBarGold;
animation-duration: 2.0s;
}
@keyframes handStreakGold {
0% { opacity: 0; clip-path: inset(0 100% 0 -10px); -webkit-clip-path: inset(0 100% 0 -10px); transform: translateY(10px) scale(0.92); }
8% { opacity: 1; }
88% { transform: translateY(-4px) scale(1.04); clip-path: inset(0 0% 0 -10px); -webkit-clip-path: inset(0 0% 0 -10px); }
100% { opacity: 1; clip-path: inset(0 0% 0 -10px); -webkit-clip-path: inset(0 0% 0 -10px); transform: translateY(0) scale(1); }
}
@keyframes handStreakBarGold {
0% { left: 0; opacity: 0; }
6% { opacity: 1; }
90% { opacity: 1; }
100% { left: 100%; opacity: 0; }
}
/* Reduced-motion: show everything instantly, no streaks. */
@media (prefers-reduced-motion: reduce) {
.hero-bleed--gymdrop .hero-bleed__line {
opacity: 1 !important;
clip-path: none !important;
-webkit-clip-path: none !important;
transform: none !important;
animation: none !important;
}
.hero-bleed--gymdrop .hero-bleed__line::after { display: none !important; }
}
/* v45 SEE-THROUGH SOLID TEXT — restore the original solid fills (cream + gold
gradient on "Limitless.") but apply mix-blend-mode: screen so the bright
text pixels additively combine with the video underneath. Chris's body is
visible through the text without sacrificing the gold gradient or readability.
Screen blend math: result = 1 - (1-text)*(1-video). Bright pixels win. */
.hero-bleed--talking .hero-bleed__inner {
mix-blend-mode: screen;
isolation: auto;
}
.hero-bleed--talking .hero-bleed__title,
.hero-bleed--talking .hero-bleed__sub,
.hero-bleed--talking .hero-bleed__actions {
mix-blend-mode: screen;
}
/* CTAs (filled buttons) need to stay solid — exempt them from screen blend
so the gold "Start Today" button and outlined "See Services" both stay
clean and clickable-feeling, not see-through. */
.hero-bleed--talking .hero-bleed__actions .btn { mix-blend-mode: normal; }
/* Respect reduced motion — show everything immediately. */
@media (prefers-reduced-motion: reduce) {
.hero-bleed--gymdrop .hero-bleed__line {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
}
.hero-bleed__video-iframe {
display: none; /* shown only if MP4 fails */
position: absolute;
top: 50%; left: 50%;
width: max(100vw, 177.78vh);
height: max(56.25vw, 100vh);
transform: translate(-50%, -50%);
border: 0;
pointer-events: none;
/* v34 ambient mode */
opacity: 0.22;
filter: saturate(0.7) blur(1px);
}
/* When the video file is missing, the