/* Kinetic Haus site styles (kh.css). Built by W/build-s01.py in stage S01 from the inline <style> blocks   of the seven site pages: shared sections verbatim, page-only sections wrapped in :where(body.p-<page>)   (zero specificity), the stacked dock/nav/button/testimonial/team/image-bar/responsive layers reduced   to their cascade winners. Custom properties live in tokens.css. */
/* ============ FONTS (S03) ============ */
/* Montserrat, latin subset, self-hosted from /fonts/. No local() source, so the browser always
   fetches the file and every visitor sees the same face. tokens.css documents the licensed swap. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/montserrat-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/montserrat-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/montserrat-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/montserrat-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/montserrat-latin-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Metric matched fallback, so line breaks do not move before the web font arrives or on a
   machine that never gets it. size-adjust, ascent-override and descent-override come from
   W/probe-fontmetrics.js: width delta 0.117 percent, line box delta 0.735 percent. */
@font-face{font-family:'Montserrat Fallback';src:local('Helvetica Neue'),local('Arial');size-adjust:111.5%;ascent-override:87%;descent-override:22.4%;line-gap-override:0%}

/* ============ RESET & BASE ============ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: var(--fs-3); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
body { font-family: var(--font-brand); background: #000; color: #fff; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; transition: color 0.3s; cursor: pointer; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ============ AWARD-LEVEL SCROLL SYSTEM ============ */
/* Hero pin, prevent flash during GSAP pin */
.hero-bg { transform-origin: center center; overflow: hidden; }
.hero-title-line { display: block; }

/* Cinematic section transitions */
.section-cinema { opacity: 0; transform: translateY(60px); }
.section-cinema.gsap-active { opacity: 1; transform: translateY(0); }

/* Scroll velocity tilt */
.velocity-tilt {  }

/* Smooth scroll overrides */
.pin-spacer { overflow: visible; }

/* Enhanced gallery momentum */
.gallery-row {  }

/* Founder clip-path base */
.founder-card {  }

/* Staff card entrance */
.staff-card { perspective: 1000px; }

/* Section divider GSAP ready */
.section-divider {  }

/* Accent color highlight for interactive elements */
.gsap-highlight { color: var(--chrome); }

/* Smooth scrollbar hide for Lenis */
html.lenis::-webkit-scrollbar { display: none; }
html.lenis { scrollbar-width: none; }

/* ============ SPLIT-TEXT CHARACTER ANIMATION ============ */
.split-heading { overflow: hidden; }
.split-heading .char { display: inline-block; }
.split-heading .char-space { width: 0.3em; display: inline-block; }

/* ============ INFINITE MARQUEE GALLERY ============ */
.gallery-marquee-section { overflow: hidden; mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent); }
.gallery-marquee-row { display: flex; gap: 16px; width: max-content; padding: 8px 0; }
.gallery-marquee-row.scroll-left { animation: marqueeLeft 45s linear infinite; }
.gallery-marquee-row.scroll-right { animation: marqueeRight 45s linear infinite; }
@keyframes marqueeLeft {
 0% { transform: translateX(0); }          100% { transform: translateX(calc(-100% / 3)); } 
}
@keyframes marqueeRight {
 0% { transform: translateX(calc(-100% / 3)); } 100% { transform: translateX(0); } 
}
.gallery-marquee-row:hover { animation-play-state: paused; }
.gallery-marquee-item { flex: 0 0 auto; width: 380px; height: 270px; border-radius: 4px; overflow: hidden; cursor: pointer; position: relative; }
.gallery-marquee-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; filter: grayscale(10%) brightness(0.92); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease; }
.gallery-marquee-item:hover img { transform: scale(1.06); filter: grayscale(0%) brightness(1); }
@media (max-width: 768px) {
.gallery-marquee-item { width: 280px; height: 200px; }
}

/* ============ ARCHITECTURAL ACCENTS ============ */
/* Corner marks, small L-shaped brackets on key sections */
.corner-marks { position: relative; }
.corner-marks::before, .corner-marks::after { content: ''; position: absolute; width: 24px; height: 24px; border: 1px solid rgba(255,255,255,0.12); pointer-events: none; z-index: 3; }
.corner-marks::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.corner-marks::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* Thin horizontal rule accent */
.rule-accent { width: 48px; height: 1px; background: rgba(255,255,255,0.1); margin: 32px 0; }

/* Grid overlay for hero section, faint architectural grid */
.hero-grid-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px); background-size: 120px 120px; mask-image: radial-gradient(ellipse at 30% 50%, black 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 30% 50%, black 20%, transparent 70%); }

/* Subtle crosshair accent */
.crosshair { position: relative; display: inline-block; }
.crosshair::before, .crosshair::after { content: ''; position: absolute; background: rgba(192,192,192,0.15); }
.crosshair::before { width: 1px; height: 12px; top: 50%; left: -20px; transform: translateY(-50%); }
.crosshair::after { width: 12px; height: 1px; top: 50%; left: -26px; transform: translateY(-50%); }

/* Section index numbers, faint numbering */
.section-index { position: absolute; top: var(--section-pad); right: var(--side-pad); font-size: var(--fs-1); font-weight: 400; letter-spacing: var(--track-kicker); color: var(--muted); text-transform: uppercase; writing-mode: vertical-rl; }

/* ============ UTILITY ============ */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--side-pad); width: 100%; }
.container-fluid { width: 100%; }
.section { padding: var(--section-pad) 0; }
.text-chrome { color: var(--chrome); }
.text-gray { color: var(--gray-400); }
.text-white { color: var(--white); }
.bg-black { background: var(--black); }
.bg-gray-900 { background: var(--gray-900); }
.bg-gray-800 { background: var(--gray-800); }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: var(--track-ui); }
.tracking-wider { letter-spacing: var(--track-kicker); }
.font-light { font-weight: 300; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }

/* ============ TYPOGRAPHY ============ */
.display-xl { font-size: var(--fs-7); font-weight: 700; line-height: 0.92; letter-spacing: var(--track-tight); text-transform: uppercase; }
.display-lg { font-size: var(--fs-6); font-weight: 600; line-height: 1; letter-spacing: var(--track-tight); text-transform: uppercase; }
.display-md { font-size: var(--fs-5); font-weight: 500; line-height: 1.1; letter-spacing: var(--track-tight); }
.heading-sm { font-size: var(--fs-3); font-weight: 500; letter-spacing: var(--track-kicker); text-transform: uppercase; }
.body-lg { font-size: var(--fs-4); font-weight: 300; line-height: 1.7; color: var(--gray-200); }
.body-md { font-size: var(--fs-4); font-weight: 400; line-height: 1.6; color: var(--gray-400); }

/* ============ REVEAL ANIMATIONS ============ */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-50px); transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(50px); transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.85); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Blur-in reveal */
.reveal-blur { opacity: 0; filter: blur(12px); transform: translateY(20px); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), filter 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-blur.visible { opacity: 1; filter: blur(0); transform: translateY(0); }

/* Rotate-in reveal */
.reveal-rotate { opacity: 0; transform: rotate(-5deg) translateY(40px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-rotate.visible { opacity: 1; transform: rotate(0) translateY(0); }

/* Clip reveal (wipe in) */
.reveal-clip { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-clip.visible { clip-path: inset(0 0 0 0); }

/* Float-up parallax for images */
.parallax-float { transition: transform 0.1s linear; }

/* Glow pulse on scroll */
.scroll-glow { transition: box-shadow 0.6s ease; }
.scroll-glow.visible { animation: glowPulse 2s ease-in-out; }
@keyframes glowPulse {
0% { box-shadow: 0 0 0 rgba(192,192,192,0); }
50% { box-shadow: 0 0 24px rgba(192,192,192,0.12), 0 0 48px rgba(192,192,192,0.04); }
100% { box-shadow: 0 0 0 rgba(192,192,192,0); }
}

/* Counter number animation */
.count-up { font-variant-numeric: tabular-nums; }

/* Section divider line animation */
.section-divider { width: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(192,192,192,0.2), transparent); margin: 0 auto; transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.section-divider.visible { width: 60%; }

/* Stagger children */
.stagger-children .reveal:nth-child(1) { transition-delay: 0s; }
.stagger-children .reveal:nth-child(2) { transition-delay: 0.1s; }
.stagger-children .reveal:nth-child(3) { transition-delay: 0.2s; }
.stagger-children .reveal:nth-child(4) { transition-delay: 0.3s; }
.stagger-children .reveal:nth-child(5) { transition-delay: 0.4s; }
.stagger-children .reveal:nth-child(6) { transition-delay: 0.5s; }
.stagger-children .reveal:nth-child(7) { transition-delay: 0.6s; }
.stagger-children .reveal:nth-child(8) { transition-delay: 0.7s; }
.stagger-children .reveal:nth-child(9) { transition-delay: 0.8s; }
.stagger-children .reveal:nth-child(10) { transition-delay: 0.9s; }
.stagger-children .reveal:nth-child(11) { transition-delay: 1.0s; }
.stagger-children .reveal:nth-child(12) { transition-delay: 1.1s; }

/* Text split animation */
.text-reveal { overflow: hidden; display: inline-block; }
.text-reveal-inner { display: inline-block; transform: translateY(110%); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.text-reveal.visible .text-reveal-inner { transform: translateY(0); }

/* ============ RESOLVED: BUTTONS (from BUTTONS) ============ */
.btn { display:inline-flex; align-items:center; gap:10px; padding:18px 42px; font-family:var(--font-brand); font-size: var(--fs-2); font-weight:500; letter-spacing: var(--track-ui); text-transform:uppercase; border:none; cursor:pointer; transition:all 0.5s cubic-bezier(0.16, 1, 0.3, 1); position:relative; overflow:hidden; }
.btn::before { content:''; position:absolute; top:50%; left:50%; width:0; height:0; background:rgba(255,255,255,0.08); border-radius:50%; transform:translate(-50%, -50%); transition:width 0.7s ease, height 0.7s ease; }
.btn:hover::before { width:400px; height:400px; }
.btn-primary { background:var(--white); color:var(--black); }
.btn-primary:hover { background:var(--chrome); transform:translateY(-1px); box-shadow:0 4px 24px rgba(192, 192, 192, 0.15); }
.btn-outline { background:transparent; color:rgba(255,255,255,0.8); border:1px solid rgba(255,255,255,0.2); }
.btn-outline:hover { border-color:rgba(255,255,255,0.5); color:#ffffff; box-shadow:0 0 20px rgba(192,192,192,0.08); }
.btn-arrow::after { content:'\2192'; transition:transform 0.3s; }
.btn-arrow:hover::after { transform:translateX(6px); }

/* ============ RESOLVED: NAV-DESKTOP (from NAV) ============ */
.nav { position:fixed; top:0; left:0; right:0; z-index:1000; padding:0; height:var(--nav-h); transition:background 0.5s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.5s cubic-bezier(0.16, 1, 0.3, 1), -webkit-backdrop-filter 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1); background:transparent; backdrop-filter:blur(0px); border-bottom:1px solid transparent; }
.nav.scrolled { background:rgba(8,8,8,0.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,0.06); box-shadow:0 4px 24px rgba(0,0,0,0.45); }
.nav.scrolled .container { padding:0 var(--side-pad); }
.nav-inner { display:flex; height:var(--nav-h); align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:6px; }
.nav-logo-icon { width:40px; height:40px; margin-left:0; }
.nav-logo-icon:hover { transform:none; }
.nav-logo-icon svg { width:100%; height:100%; }
.nav-logo-wordmark { height:14px; display:flex; align-items:center; }
.nav-logo-wordmark svg { height:100%; width:auto; }
.nav-links { display:flex; gap:24px; align-items:center; }
.nav-links a { font-size: var(--fs-1); letter-spacing: var(--track-ui); text-transform:uppercase; position:relative; }
.nav-links a:not(.nav-cta) { font-weight:400; color:rgba(255,255,255,0.75); transition:color 0.4s ease, opacity 0.4s ease; text-shadow:0 1px 8px rgba(0,0,0,0.6); }
.nav-links a:not(.btn)::after { content:''; position:absolute; bottom:-4px; left:50%; width:0; height:1px; background:var(--chrome); transition:width 0.4s cubic-bezier(0.16, 1, 0.3, 1), left 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.nav-links a:not(.btn):hover { color:#ffffff; }
.nav-links a:not(.btn):hover::after { width:100%; left:0; }
.nav-cta { padding:7px 24px; font-size: var(--fs-1); white-space:nowrap; font-weight:500; letter-spacing: var(--track-ui); text-shadow:none; background:transparent; color:rgba(255,255,255,0.8); border:1px solid rgba(255,255,255,0.2); border-radius:2px; transition:all 0.4s ease; }
.nav-cta:hover { background:transparent; color:#ffffff; border-color:rgba(255,255,255,0.6); box-shadow:0 0 20px rgba(192,192,192,0.12); }
.nav-toggle { display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; cursor:pointer; padding:8px; width:40px; height:40px; position:relative; z-index:1001; appearance:none; -webkit-appearance:none; background:transparent; border:0; border-radius:0; box-shadow:none; color:inherit; font:inherit; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--white); border-radius:2px; transition:transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.25s ease, background 0.3s ease; transform-origin:center; }
.nav-toggle:hover span { background:var(--chrome); }
.nav-toggle.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-toggle.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ============ HERO ============ */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: var(--nav-h); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; background: #000; }
.hero-bg-video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; min-width: 100%; min-height: 100%; object-fit: cover; object-position: center center; transform: translate(-50%, -50%); pointer-events: none; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.92) 100%); z-index: 1; }
.hero-vignette { position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 100px 30px rgba(0,0,0,0.4); pointer-events: none; }
/* Scanlines, light sweep, grain, particles, removed for clean minimal aesthetic */
.hero-scanline, .hero-light-sweep, .hero-grain, .hero-particles, .particle { display: none; }

.hero-content { position: relative; z-index: 2; }
.hero-label { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 32px; opacity: 0; animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards; }
@keyframes hero-fade-up {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-label .dot { width: 6px; height: 6px; min-width: 6px; min-height: 6px; flex: 0 0 6px; flex-shrink: 0; background: var(--chrome); border-radius: 50%; display: block; animation: pulse-dot 3s ease-in-out infinite; }
@keyframes pulse-dot {
0%, 100% { opacity: 0.8; transform: scale(1); }
50% { opacity: 0.3; transform: scale(1.2); }
}
.hero-title { margin-bottom: 32px; max-width: 900px; overflow: hidden; }
.hero-title-line { display: block; opacity: 0; transform: translateY(100%); animation: title-reveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.hero-title-line:nth-child(1) { animation-delay: 0.7s; }
.hero-title-line:nth-child(2) { animation-delay: 0.9s; color: var(--chrome); }
@keyframes title-reveal {
from { opacity: 0; transform: translateY(100%); }
to { opacity: 1; transform: translateY(0); }
}
.hero-subtitle { max-width: 600px; margin-bottom: 48px; opacity: 0; animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards; }
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; opacity: 0; animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards; }
.hero-scroll { display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2; margin-top: 80px; }
.hero-scroll span { font-size: var(--fs-1); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); font-weight: 400; }
.scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(255,255,255,0.85), transparent); animation: scroll-anim 2s ease-in-out infinite; }
@keyframes scroll-anim {
0% { transform: scaleY(0); transform-origin: top; }
50% { transform: scaleY(1); transform-origin: top; }
51% { transform-origin: bottom; }
100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Hero logo watermark */
.hero-watermark { position: absolute; right: -5%; top: 50%; transform: translateY(-50%); width: clamp(300px, 40vw, 600px); height: auto; opacity: 0.02; pointer-events: none; z-index: 1; }
.hero-watermark svg { width: 100%; height: 100%; }

/* ============ MARQUEE ============ */
.marquee-section { padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.15); border-bottom: 1px solid rgba(255,255,255,0.15); overflow: hidden; mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); }
.marquee-track { display: flex; animation: marquee 35s linear infinite; width: max-content; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-track span { font-size: var(--fs-1); font-weight: 400; letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); white-space: nowrap; padding: 0 32px; transition: color 0.4s ease; }
.marquee-track span:hover { color: rgba(255,255,255,0.92); }
.marquee-track .lime { color: var(--muted); font-size: var(--fs-1); }
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* clientScroll handled by JS for seamless scrolling */

/* ============ SECTION HEADINGS ============ */
.section-heading-line { width: 40px; height: 1px; background: rgba(192,192,192,0.5); margin-bottom: 24px; transform-origin: left; transform: scaleX(0); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.section-heading-line.visible { transform: scaleX(1); }

/* ============ ABOUT ============ */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; }
.stat-card { padding: 24px; border: 1px solid rgba(255,255,255,0.12); border-radius: 2px; transition: all 0.5s ease; position: relative; overflow: hidden; background: transparent; }
.stat-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(192,192,192,0.03), transparent); transition: left 0.7s; }
.stat-card:hover::before { left: 100%; }
.stat-card:hover { border-color: rgba(255,255,255,0.22); }
.stat-number { font-size: var(--fs-5); font-weight: 300; color: var(--white); line-height: 1; margin-bottom: 8px; letter-spacing: var(--track-tight); }
.stat-label { font-size: var(--fs-1); font-weight: 400; letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--muted); }
.about-image { width: 100%; aspect-ratio: 4/5; background: #000; position: relative; overflow: hidden; }
.about-image img, .perf-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.about-image:hover img, .about-image:hover .perf-img { animation: none; transform: scale(1.06); }
.about-image::after { display: none; }
.about-image::before { content: ''; position: absolute; inset: 0; border: 1px solid rgba(192,192,192,0.0); z-index: 2; transition: border-color 0.4s; }
.about-image:hover::before { border-color: rgba(192,192,192,0.2); }

/* ============ CLASSES ============ */
.classes-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; gap: 32px; }
.classes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
.class-card { position: relative; padding: 44px 28px 36px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.1); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; overflow: hidden; text-align: center; display: flex; flex-direction: column; align-items: center; }
.class-card::before { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: rgba(192,192,192,0.4); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.class-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.04) 0%, transparent 70%); opacity: 0; transition: opacity 0.6s; }
.class-card:hover::after { opacity: 1; }
.class-card:hover::before { width: 60%; left: 20%; }
.class-card:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.18); }
.class-series { display: none; }
.class-title-row { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 0; position: relative; z-index: 1; width: 100%; }
.class-title-row img { height: 44px; flex-shrink: 0; filter: brightness(0) invert(1); opacity: 0.7; transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.class-card:hover .class-title-row img { opacity: 1; transform: scale(1.06); }
.class-name { font-size: var(--fs-3); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-ui); position: relative; z-index: 1; color: var(--white); }
.class-desc { font-size: var(--fs-1); line-height: 1.55; color: rgba(255,255,255,0.6); position: relative; z-index: 1; text-align: center; }
.class-tag { display: none; }

/* ============ PERFORMANCE ============ */
.perf-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; }
.perf-intro { grid-column: 1; grid-row: 1; }
.perf-features-wrap { grid-column: 1; grid-row: 2; }
.perf-video-wrap { grid-column: 2; grid-row: 1 / 3; }
.perf-features { display: flex; flex-direction: column; gap: 32px; margin-top: 40px; }
.perf-feature { display: flex; gap: 20px; align-items: flex-start; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.perf-feature:hover { transform: translateX(8px); }
.perf-icon { width: 44px; height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); font-size: var(--fs-4); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.perf-feature:hover .perf-icon { background: rgba(255,255,255,0.08); border-color: rgba(192,192,192,0.3); }
.perf-feature-title { font-size: var(--fs-2); font-weight: 600; margin-bottom: 4px; letter-spacing: var(--track-tight); }
.perf-feature-desc { font-size: var(--fs-2); color: var(--gray-400); line-height: 1.5; }

/* ============ CHALLENGE ============ */
.challenge-section { background: var(--black); position: relative; }
.challenge-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(192,192,192,0.02) 0%, transparent 70%); pointer-events: none; }
.challenge-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; background: rgba(192,192,192,0.05); border: 1px solid rgba(192,192,192,0.15); margin-bottom: 32px; }
.challenge-badge span { font-size: var(--fs-1); font-weight: 500; letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--chrome); }
.challenge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }
.challenge-card { padding: 40px 32px; background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.1); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); position: relative; overflow: hidden; }
.challenge-card:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); transform: translateY(-2px); }
.challenge-vol { font-size: var(--fs-1); font-weight: 500; letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--chrome); margin-bottom: 12px; position: relative; z-index: 1; }
.challenge-theme { font-size: var(--fs-4); font-weight: 600; text-transform: uppercase; margin-bottom: 8px; position: relative; z-index: 1; }
.challenge-date { font-size: var(--fs-1); color: var(--gray-400); margin-bottom: 16px; position: relative; z-index: 1; }
.challenge-details { font-size: var(--fs-2); color: var(--gray-400); line-height: 1.6; position: relative; z-index: 1; }
.challenge-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.tier-card { padding: 32px; border: 1px solid rgba(255,255,255,0.1); text-align: center; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.tier-card:hover { border-color: rgba(255,255,255,0.2); transform: translateY(-2px); }
.tier-name { font-size: var(--fs-1); font-weight: 500; letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--chrome); margin-bottom: 12px; }
.tier-commitment { font-size: var(--fs-2); color: var(--gray-400); line-height: 1.6; }

/* ============ TESTIMONIALS ============ */
.testimonial-wrapper { position: relative; }
.testimonial-showcase { position: relative; overflow: hidden; min-height: 500px; background: rgba(255,255,255,0.02); border: 1px solid rgba(192,192,192,0.14); border-radius: 4px; padding: 40px; }
.testimonial-showcase::before, .testimonial-showcase::after { content: ''; position: absolute; width: 20px; height: 20px; border: 1px solid rgba(255,255,255,0.08); pointer-events: none; z-index: 3; }
.testimonial-showcase::before { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.testimonial-showcase::after { bottom: 12px; right: 12px; border-left: none; border-top: none; }
.testimonial-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateX(24px); transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s; pointer-events: none; }
.testimonial-slide.active { position: relative; opacity: 1; visibility: visible; transform: translateX(0); transition: opacity 0.45s ease 0.1s, transform 0.45s ease 0.1s, visibility 0s; pointer-events: auto; }
.testimonial-split { display: grid; grid-template-columns: 3fr 5fr; gap: 64px; align-items: center; }
.testimonial-content .body-lg { font-size: var(--fs-4); }
.testimonial-img-wrap { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 3/4; }
.testimonial-img-wrap img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%); transition: transform 0.6s ease, filter 0.6s ease; }
.testimonial-slide.active .testimonial-img-wrap img { transform: scale(1.02); }
.testimonial-img-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.3) 100%); pointer-events: none; }
.testimonial-content { display: flex; flex-direction: column; justify-content: center; }
.testimonial-quote-mark { font-size: var(--fs-6); line-height: 1; color: var(--chrome); opacity: 0.15; font-family: var(--font-brand); }
.testimonial-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); background: transparent; color: rgba(255,255,255,0.5); font-size: var(--fs-3); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); z-index: 10; }
.testimonial-nav-btn:hover { border-color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.04); }
.testimonial-nav-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.t-prev { left: -60px; }
.t-next { right: -60px; }
.testimonial-dots { display: flex; justify-content: center; gap: 12px; margin-top: 40px; }
.t-dot { width: 40px; height: 3px; border: none; background: rgba(192,192,192,0.2); cursor: pointer; transition: all 0.4s ease; padding: 0; }
.t-dot.active { background: var(--chrome); width: 56px; }
.t-dot:hover { background: rgba(192,192,192,0.5); }

/* ============ TEAM ============ */
.team-section { position: relative; }
.team-founders { margin-bottom: 120px; }
.founders-header { text-align: center; margin-bottom: 80px; }
.founders-scroller { position: relative; }
.founders-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-bottom: 80px; }
.founders-nav { display: none; }
.founders-nav-btn { background: rgba(192,192,192,0.08); border: 1px solid rgba(192,192,192,0.25); color: var(--chrome); width: 44px; height: 44px; border-radius: 50%; font-size: var(--fs-4); cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; }
.founders-nav-btn:hover, .founders-nav-btn:active { background: rgba(192,192,192,0.18); border-color: var(--chrome); }
.class-series-group { margin-bottom: 0; }
.class-series-body { /* open by default on desktop */; }
.founder-card { text-align: center; position: relative; }
.founder-photo { width: 100%; aspect-ratio: 1; background: transparent; border-radius: 2px; overflow: hidden; margin-bottom: 32px; border: 1px solid rgba(255,255,255,0.1); transition: border-color 0.5s ease; }
.founder-photo { position: relative; }
.founder-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: grayscale(15%); transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s ease; }
.founder-name { font-size: var(--fs-3); font-weight: 600; text-transform: uppercase; color: var(--chrome); margin-bottom: 8px; letter-spacing: var(--track-ui); cursor: pointer; }
.founder-role { font-size: var(--fs-1); font-weight: 400; letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--gray-400); margin-bottom: 6px; }
.founder-bio-hint { font-size: var(--fs-1); letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--gray-600); margin-bottom: 24px; }
.founder-bio { font-size: var(--fs-2); line-height: 1.8; color: var(--gray-200); text-align: left; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease; }
.founder-card.expanded .founder-bio { max-height: 500px; opacity: 1; }
.founder-name::after { content: '+'; margin-left: 8px; font-size: var(--fs-2); color: var(--chrome); }
.founder-card.expanded .founder-name::after { content: '\2212'; }

.staff-header { text-align: center; margin-bottom: 64px; }
.staff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 32px; }
.staff-card { perspective: 800px; height: 320px; cursor: pointer; }
.staff-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; }
.staff-card:hover .staff-card-inner { transform: rotateY(180deg); }
.staff-card-front, .staff-card-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); overflow: hidden; }
.staff-card-front { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; background: var(--gray-900); text-align: center; }
.staff-card-back { transform: rotateY(180deg); background: var(--gray-900); border-color: rgba(192,192,192,0.15); padding: 28px 24px; display: flex; flex-direction: column; justify-content: center; }
.staff-card-back .staff-name { font-size: var(--fs-2); margin-bottom: 4px; }
.staff-card-back .staff-role { margin-bottom: 16px; }
.staff-bio { font-size: var(--fs-1); line-height: 1.7; color: var(--gray-400); }
.staff-photo { width: 138px; height: 161px; margin: 0 auto 24px; background: transparent; border-radius: 4px; overflow: hidden; border: 1px solid rgba(192,192,192,0.1); }
.staff-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.staff-name { font-size: var(--fs-2); font-weight: 600; text-transform: uppercase; margin-bottom: 6px; letter-spacing: var(--track-tight); }
.staff-role { font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--gray-400); }
.staff-flip-hint { font-size: var(--fs-1); color: var(--gray-600); margin-top: 12px; letter-spacing: var(--track-ui); text-transform: uppercase; }
.staff-scroll-hint { display: none; font-size: var(--fs-1); color: var(--gray-500); letter-spacing: var(--track-ui); text-transform: uppercase; text-align: center; margin-bottom: 20px; }

/* ============ BY THE NUMBERS BAND ============ */
.numbers-band { padding: clamp(32px, 4vw, 48px) 0; border-top: 1px solid rgba(0,0,0,0.06); border-bottom: 1px solid rgba(0,0,0,0.06); background: #f4f3f0; }
.numbers-band-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.numbers-item { text-align: center; position: relative; }
.numbers-item + .numbers-item::before { content: ''; position: absolute; left: -16px; top: 15%; height: 70%; width: 1px; background: rgba(0,0,0,0.12); }
.numbers-value { font-size: var(--fs-5); font-weight: 700; letter-spacing: var(--track-tight); color: #111; line-height: 1; margin-bottom: 10px; }
.numbers-label { font-size: var(--fs-1); font-weight: 500; letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted-on-light); }
@media (max-width: 768px) {
.numbers-band-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
.numbers-item + .numbers-item::before { display: none; }
}

/* ============ CLINICAL PROCESS STRIP ============ */
.process-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0 0 56px; border: 1px solid rgba(255,255,255,0.1); }
.process-step { padding: 36px 28px 32px; position: relative; }
.process-step + .process-step { border-left: 1px solid rgba(255,255,255,0.1); }
.process-num { display: block; font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--track-kicker); color: var(--chrome); margin-bottom: 14px; }
.process-title { font-size: var(--fs-3); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-tight); color: #e8e8e8; margin-bottom: 10px; }
.process-desc { font-size: var(--fs-1); line-height: 1.65; color: rgba(255,255,255,0.5); font-weight: 300; }
@media (max-width: 900px) {
.process-strip { grid-template-columns: repeat(2, 1fr); }
.process-step:nth-child(3) { border-left: none; }
.process-step:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.1); }
}
@media (max-width: 520px) {
.process-strip { grid-template-columns: 1fr; }
.process-step + .process-step { border-left: none; border-top: 1px solid rgba(255,255,255,0.1); }
}

/* ============ LIGHT SECTION ============ */
.section-light { background: #f4f3f0; color: #1a1a1a; }
.section-light .section-heading-line { background: rgba(0,0,0,0.25); }
.section-light .corporate-benefit-card { background: #fff; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.section-light .corporate-benefit-icon { color: #1a1a1a; }
.section-light .corporate-benefit-title { color: #111; }
.section-light .corporate-benefit-desc { color: rgba(0,0,0,0.55); }
.section-light .btn-primary { background: #111; color: #fff; border-color: #111; }
.section-light .btn-primary:hover { background: #2b2b2b; border-color: #2b2b2b; }
.section-light .char { color: #111; }

/* ============ AWARD ROUND: LAYERED HERO ============ */
.hero-layered { position: relative; z-index: 3; }
.hero-photo-card { position: absolute; display: block; overflow: hidden; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 20px 60px rgba(0,0,0,0.5); pointer-events: none; }
.hero-photo-card img { width: 100%; height: 100%; object-fit: cover; }
.hero-content { position: relative; }
.hero-photo-a { width: clamp(180px, 21vw, 360px); height: clamp(220px, 26vw, 440px); right: -1vw; top: -12%; z-index: 1; transform: rotate(4deg); }
.hero-photo-b { width: clamp(120px, 13.5vw, 230px); height: clamp(150px, 17vw, 290px); right: 17vw; top: 26%; z-index: 4; transform: rotate(-5deg); }
.hero-photo-c { width: clamp(130px, 15vw, 260px); height: clamp(100px, 11vw, 190px); right: -3vw; top: 68%; z-index: 2; transform: rotate(-3deg); }
@media (max-width: 768px) {
.hero-photo-a { top: -14%; right: -6px; width: 120px; height: 150px; }
.hero-photo-b { display: none; }
.hero-photo-c { display: none; }
}

/* ============ MANIFESTO ============ */
.manifesto-section { background: #f4f3f0; padding: clamp(72px, 9vw, 140px) 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.manifesto-text { font-size: var(--fs-5); font-weight: 700; line-height: 1.28; letter-spacing: var(--track-tight); text-transform: uppercase; color: #111; text-align: center; max-width: 1080px; margin: 0 auto; }
.m-chip { display: inline-block; width: clamp(52px, 6vw, 96px); height: clamp(36px, 4.2vw, 64px); border-radius: 999px; overflow: hidden; vertical-align: middle; margin: 0 6px; transform: translateY(-4px); position: relative; z-index: 1; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-radius 0.35s ease; }
.m-chip:hover { transform: translateY(-4px) scale(2.6); z-index: 30; border-radius: 6px; box-shadow: 0 18px 50px rgba(0,0,0,0.35); }
.m-chip img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); }
.m-kicker { display: none; } /* phone only, see MANIFESTO MOBILE below */

/* ============ PAGE HEROES & GATEWAY ============ */
.page-hero { min-height: 300px; padding: calc(var(--nav-h) + 20px) 0 20px; display: flex; align-items: center; position: relative; overflow: hidden; }
.page-hero > .container { width: 100%; }
/* S17: the page hero heading is one h1 that holds both the kicker line and the display word, so
   the heading text carries the service and the place instead of a single word. .ph-h1 is a bare
   wrapper: it takes the inherited type so the h1 user agent size and weight cannot reach the two
   spans, and both spans keep the block box they had as a <p> and an <h1>. Nothing here sets
   line-height, so the kicker still inherits normal from body exactly as it did. The rendered hero
   is unchanged. Nothing is hidden: both parts are on screen and both are read aloud. */
.ph-h1 { font-size: inherit; font-weight: inherit; }
.ph-kicker { display: block; font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--track-kicker); text-transform: uppercase; color: #fff; margin-bottom: 12px; }
.ph-title { display: block; font-size: var(--fs-6); font-weight: 800; line-height: 0.9; letter-spacing: var(--track-tight); color: #e8e8e8; text-transform: uppercase; }
.ph-sub { margin-top: 12px; color: #fff; max-width: 520px; font-size: var(--fs-3); line-height: 1.7; }
.ph-actions { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.ph-light { background: #f4f3f0; }
.ph-light .ph-title { color: #111; }
.ph-light .ph-sub { color: var(--muted-on-light); }
.ph-light .ph-kicker { color: #6b6b6b; }
.ph-video .ph-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.ph-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(10,10,10,0.94)); }
.gateway-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.gateway-card { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.gateway-card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) brightness(0.55); transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), filter 0.5s ease; }
.gateway-card:hover img { transform: scale(1.05); filter: grayscale(0%) brightness(0.75); }
.gateway-card-label { position: absolute; left: 22px; bottom: 18px; z-index: 2; color: #fff; font-size: var(--fs-4); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-tight); }
.gateway-card-arrow { position: absolute; right: 20px; bottom: 20px; z-index: 2; color: rgba(255,255,255,0.7); font-size: var(--fs-4); transition: transform 0.3s; }
.gateway-card:hover .gateway-card-arrow { transform: translateX(5px); color: #fff; }
@media (max-width: 900px) { .gateway-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gateway-grid { grid-template-columns: 1fr; } }

/* ============ RESOLVED: BUTTONS (from SLEEK HEADER UNIFICATION) ============ */
h2.display-md { font-size: var(--fs-5); font-weight:600; letter-spacing: var(--track-tight); line-height:1.12; }
.section-heading-line { width:26px; height:1px; opacity:0.7; }
.class-series-heading { font-weight:500; }
.btn { font-weight:600; }

/* ============ RESOLVED: NAV-DESKTOP (from SLEEK HEADER UNIFICATION, NATIVE CURSOR + BLEND NAV) ============ */
h2.display-md { font-size: var(--fs-5); font-weight:600; letter-spacing: var(--track-tight); line-height:1.12; }
.section-heading-line { width:26px; height:1px; opacity:0.7; }
.class-series-heading { font-weight:500; }
.btn { font-weight:600; }
/* S15: the nav CTA is a .btn, so its lighter weight has to be stated after .btn's. */
.nav-cta { font-weight:500; }
.nav { mix-blend-mode:difference; }
.nav.scrolled { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:none; box-shadow:none; }

/* S15: the six page-component base blocks below (gateway index, book section, class
   index, clinic services, team, pricing table) used to sit at the end of this file, after
   every block that customises them, which is why those blocks needed to be
   seen at all. They are base rules, so they belong before their overrides and the
   cascade now resolves by order. Nothing inside them changed. */
/* ============ GATEWAY INDEX (.haus-*) ============ */
:where(body.p-index) .haus-index { margin-top: 40px; border-top: 1px solid rgba(255,255,255,0.12); }
:where(body.p-index) .haus-row { position: relative; display: grid; grid-template-columns: 70px 1fr auto 40px; align-items: center; gap: 20px; padding: clamp(22px, 3vw, 38px) 8px; border-bottom: 1px solid rgba(255,255,255,0.12); text-decoration: none; cursor: pointer; }
:where(body.p-index) .haus-num { font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--track-kicker); color: rgba(255,255,255,0.35); transition: color 0.3s; }
:where(body.p-index) .haus-name { font-size: var(--fs-5); font-weight: 800; line-height: 0.95; letter-spacing: var(--track-tight); text-transform: uppercase; color: rgba(255,255,255,0.34); transition: color 0.35s, transform 0.45s cubic-bezier(0.16,1,0.3,1); }
:where(body.p-index) .haus-tag { font-size: var(--fs-1); font-weight: 500; letter-spacing: var(--track-ui); text-transform: uppercase; color: rgba(255,255,255,0.3); transition: color 0.3s; text-align: right; }
:where(body.p-index) .haus-arrow { font-size: var(--fs-4); color: rgba(255,255,255,0); transform: translateX(-10px); transition: all 0.35s; text-align: right; }
:where(body.p-index) .haus-row:hover .haus-name { transform: translateX(18px); }
:where(body.p-index) .haus-row:hover .haus-arrow { color: #fff; transform: translateX(0); }
:where(body.p-index) .haus-preview { position: fixed; left: 0; top: 0; width: clamp(220px, 22vw, 340px); aspect-ratio: 4/3; pointer-events: none; z-index: 50; overflow: hidden; opacity: 0; transform: scale(0.85) rotate(-3deg); transition: opacity 0.3s ease; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 24px 70px rgba(0,0,0,0.55); }
:where(body.p-index) .haus-preview.on { opacity: 1; transform: scale(1) rotate(-3deg); }
:where(body.p-index) .haus-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s; }
:where(body.p-index) .haus-preview img.show { opacity: 1; }
@media (max-width: 900px) { :where(body.p-index) .haus-preview { display: none; } :where(body.p-index) .haus-row { grid-template-columns: 44px 1fr 30px; } :where(body.p-index) .haus-tag { display: none; } }

/* ============ BOOK SECTION (.book-*, .bsport-*) ============ */
:where(body.p-index, body.p-classes) .book-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
:where(body.p-index, body.p-classes) .book-meta { display: flex; gap: 28px; flex-wrap: wrap; }
:where(body.p-index, body.p-classes) .book-meta div { text-align: right; }
:where(body.p-index, body.p-classes) .book-meta .bm-n { font-size: var(--fs-4); font-weight: 700; color: #fff; line-height: 1; }
:where(body.p-index, body.p-classes) .book-meta .bm-l { font-size: var(--fs-1); letter-spacing: var(--track-kicker); text-transform: uppercase; color: rgba(255,255,255,0.4); margin-top: 6px; }
:where(body.p-index, body.p-classes) .bsport-shell { position: relative; border: 1px solid rgba(255,255,255,0.14); background: #0e0e0e; padding: 10px; }
:where(body.p-index, body.p-classes) .bsport-shell::before { content: 'LIVE SCHEDULE'; position: absolute; top: -14px; left: 20px; background: #0a0a0a; padding: 0 10px; font-size: var(--fs-1); line-height: 1; font-weight: 600; letter-spacing: var(--track-kicker); color: var(--chrome); }
:where(body.p-index, body.p-classes) .bsport-frame { width: 100%; height: 780px; border: 0; display: block; filter: invert(1) hue-rotate(180deg); }
:where(body.p-index, body.p-classes) .bsport-note { margin-top: 12px; font-size: var(--fs-1); color: var(--muted); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
:where(body.p-index, body.p-classes) .bsport-note a { color: var(--chrome); text-decoration: underline; }
@media (max-width: 700px) { :where(body.p-index, body.p-classes) .bsport-frame { height: 640px; } :where(body.p-index, body.p-classes) .book-meta { display: none; } }

/* ============ CLASS INDEX (.cx-*) ============ */
:where(body.p-classes) .cx-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
:where(body.p-classes) .cx-pill { padding: 9px 18px; border: 1px solid rgba(255,255,255,0.18); background: transparent; color: rgba(255,255,255,0.6); font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--track-ui); text-transform: uppercase; cursor: pointer; transition: all 0.25s; }
:where(body.p-classes) .cx-pill:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
:where(body.p-classes) .cx-pill.active { background: #f4f3f0; color: #111; border-color: #f4f3f0; }
:where(body.p-classes) .cx-index { border-top: 1px solid rgba(255,255,255,0.12); }
:where(body.p-classes) .cx-row { border-bottom: 1px solid rgba(255,255,255,0.12); }
:where(body.p-classes) .cx-row.out { display: none; }
:where(body.p-classes) .cx-head { width: 100%; display: grid; grid-template-columns: 50px 40px 1fr auto 28px; align-items: center; gap: 18px; padding: 22px 6px; background: none; border: 0; text-align: left; cursor: pointer; }
:where(body.p-classes) .cx-num { font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--track-kicker); color: rgba(255,255,255,0.32); }
:where(body.p-classes) .cx-logo img { width: 30px; height: 30px; opacity: 0.55; transition: opacity 0.3s; }
:where(body.p-classes) .cx-name { font-size: var(--fs-5); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-tight); color: rgba(255,255,255,0.45); transition: color 0.3s, transform 0.4s cubic-bezier(0.16,1,0.3,1); }
:where(body.p-classes) .cx-series { font-size: var(--fs-1); letter-spacing: var(--track-ui); text-transform: uppercase; color: rgba(255,255,255,0.3); }
:where(body.p-classes) .cx-plus { font-size: var(--fs-4); color: rgba(255,255,255,0.4); transition: transform 0.35s, color 0.3s; }
:where(body.p-classes) .cx-row:hover .cx-name { transform: translateX(10px); }
:where(body.p-classes) .cx-row:hover .cx-logo img { opacity: 1; }
:where(body.p-classes) .cx-row.open .cx-plus { transform: rotate(45deg); }
:where(body.p-classes) .cx-inner { padding: 0 6px 26px 108px; max-width: 760px; }
:where(body.p-classes) .cx-inner p { font-size: var(--fs-2); line-height: 1.75; color: rgba(255,255,255,0.55); margin-bottom: 14px; }
:where(body.p-classes) .cx-book { font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--chrome); border-bottom: 1px solid rgba(192,192,192,0.4); padding-bottom: 3px; }
:where(body.p-classes) .cx-book:hover { color: #fff; border-color: #fff; }
@media (max-width: 700px) { :where(body.p-classes) .cx-head { grid-template-columns: 36px 1fr 22px; } :where(body.p-classes) .cx-logo, :where(body.p-classes) .cx-series { display: none; } :where(body.p-classes) .cx-inner { padding-left: 42px; } }

/* ============ CLINIC SERVICES (.svc-*, .clinic-book-band, .process-*) ============ */
:where(body.p-clinic) .svc-index { border-top: 1px solid rgba(0,0,0,0.18); margin-bottom: 40px; }
:where(body.p-clinic) .svc-row { border-bottom: 1px solid rgba(0,0,0,0.16); }
:where(body.p-clinic) .svc-head { width: 100%; display: grid; grid-template-columns: 54px 1fr auto 28px; align-items: center; gap: 18px; padding: 18px 6px; background: none; border: 0; text-align: left; cursor: pointer; }
:where(body.p-clinic) .svc-num { font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--track-kicker); color: var(--muted-on-light); }
:where(body.p-clinic) .svc-name { font-size: var(--fs-5); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-tight); color: var(--muted-on-light); transition: color 0.3s, transform 0.4s cubic-bezier(0.16,1,0.3,1); }
:where(body.p-clinic) .svc-row:hover .svc-name { color: #0a0a0a; transform: translateX(10px); }
:where(body.p-clinic) .svc-row.open .svc-name { color: #0a0a0a; }
:where(body.p-clinic) .svc-note { font-size: var(--fs-1); letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--muted-on-light); text-align: right; }
:where(body.p-clinic) .svc-plus { font-size: var(--fs-3); color: rgba(0,0,0,0.65); transition: transform 0.35s, color 0.3s; }
:where(body.p-clinic) .svc-row.open .svc-plus { transform: rotate(45deg); color: #0a0a0a; }
:where(body.p-clinic) .svc-inner { padding: 0 6px 24px 72px; max-width: 760px; }
:where(body.p-clinic) .svc-inner p { font-size: var(--fs-2); line-height: 1.8; color: rgba(0,0,0,0.75); margin-bottom: 14px; }
:where(body.p-clinic) .svc-book { font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--track-ui); text-transform: uppercase; color: #0a0a0a; border-bottom: 1px solid rgba(0,0,0,0.4); padding-bottom: 3px; }
:where(body.p-clinic) .clinic-book-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: clamp(24px, 3.5vw, 38px); border: 1px solid rgba(0,0,0,0.18); background: #fff; margin-bottom: 30px; }
:where(body.p-clinic) .clinic-book-band h3 { font-size: var(--fs-5); font-weight: 600; color: #0a0a0a; }
:where(body.p-clinic) .clinic-book-band p { color: rgba(0,0,0,0.68); font-size: var(--fs-2); margin-top: 6px; }
:where(body.p-clinic) .clinic-book-band .book-split { flex:1 0 100%; margin:0; padding-top:18px; border-top:1px solid rgba(0,0,0,0.12); color: rgba(0,0,0,0.68); font-size: var(--fs-1); line-height:1.6; }
/* S06: the booking split, said in words, in the clinic hero */
:where(body.p-clinic) .ph-note { margin-top:14px; font-size: var(--fs-1); line-height:1.5; letter-spacing: var(--track-tight); color:rgba(255,255,255,0.78); }
:where(body.p-clinic) #clinic .process-strip { border-color: rgba(0,0,0,0.18); }
:where(body.p-clinic) #clinic .process-step + .process-step { border-color: rgba(0,0,0,0.18); }
:where(body.p-clinic) #clinic .process-num { color: rgba(0,0,0,0.75); }
:where(body.p-clinic) #clinic .process-title { color: #0a0a0a; }
:where(body.p-clinic) #clinic .process-desc { color: rgba(0,0,0,0.72); }
@media (max-width: 700px) { :where(body.p-clinic) .svc-note { display: none; } :where(body.p-clinic) .svc-head { grid-template-columns: 40px 1fr 24px; } :where(body.p-clinic) .svc-inner { padding-left: 46px; } }

/* ============ TEAM (.tm-*) ============ */
:where(body.p-team) .tm-block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(36px, 5vw, 74px) 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
:where(body.p-team) .tm-block.rt .tm-photo { order: 2; }
:where(body.p-team) .tm-photo { position: relative; aspect-ratio: 4/5; overflow: hidden; }
:where(body.p-team) .tm-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
:where(body.p-team) .tm-num { font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--track-kicker); text-transform: uppercase; color: rgba(255,255,255,0.8); }
:where(body.p-team) .tm-name { font-size: var(--fs-5); font-weight: 800; text-transform: uppercase; letter-spacing: var(--track-tight); line-height: 1; color: #fff; margin: 12px 0 6px; }
:where(body.p-team) .tm-role { font-size: var(--fs-1); letter-spacing: var(--track-kicker); text-transform: uppercase; color: rgba(255,255,255,0.78); margin-bottom: 16px; }
:where(body.p-team) .tm-bio { font-size: var(--fs-2); line-height: 1.8; color: rgba(255,255,255,0.82); }
:where(body.p-team) .tm-staff-head { font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--track-kicker); text-transform: uppercase; color: rgba(255,255,255,0.85); margin: clamp(44px,6vw,74px) 0 16px; }
:where(body.p-team) .tm-slist { border-top: 1px solid rgba(255,255,255,0.14); }
:where(body.p-team) .tm-srow { border-bottom: 1px solid rgba(255,255,255,0.14); }
:where(body.p-team) .tm-shead { width: 100%; display: grid; grid-template-columns: 50px 1fr auto 28px; align-items: center; gap: 18px; padding: 18px 6px; background: none; border: 0; text-align: left; cursor: pointer; }
:where(body.p-team) .tm-snum { font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--track-kicker); color: rgba(255,255,255,0.65); }
:where(body.p-team) .tm-sname { font-size: var(--fs-4); font-weight: 600; text-transform: uppercase; color: rgba(255,255,255,0.92); transition: color 0.3s, transform 0.4s cubic-bezier(0.16,1,0.3,1); }
:where(body.p-team) .tm-srow:hover .tm-sname { color: #fff; transform: translateX(8px); }
:where(body.p-team) .tm-srole { font-size: var(--fs-1); letter-spacing: var(--track-ui); text-transform: uppercase; color: rgba(255,255,255,0.7); }
:where(body.p-team) .tm-splus { font-size: var(--fs-3); color: rgba(255,255,255,0.7); transition: transform 0.35s, color 0.3s; }
:where(body.p-team) .tm-srow.open .tm-splus { transform: rotate(45deg); color: #fff; }
:where(body.p-team) .tm-srow.open .tm-sname { color: #fff; }
:where(body.p-team) .tm-sinner { display: grid; grid-template-columns: 130px 1fr; gap: 24px; align-items: start; padding: 4px 6px 26px 68px; max-width: 860px; }
:where(body.p-team) .tm-sinner img { width: 130px; height: 162px; object-fit: cover; object-position: top center; }
:where(body.p-team) .tm-sinner p { font-size: var(--fs-2); line-height: 1.8; color: rgba(255,255,255,0.82); }
@media (max-width: 820px) { :where(body.p-team) .tm-block { grid-template-columns: 1fr; } :where(body.p-team) .tm-block.rt .tm-photo { order: 0; } :where(body.p-team) .tm-shead { grid-template-columns: 38px 1fr 24px; } :where(body.p-team) .tm-srole { display: none; } :where(body.p-team) .tm-sinner { grid-template-columns: 1fr; padding-left: 44px; } :where(body.p-team) .tm-sinner img { width: 110px; height: 138px; } }

/* ============ PRICING TABLE (.pr-*) ============ */
:where(body.p-pricing) .pr-table { border-top: 1px solid rgba(255,255,255,0.14); }
:where(body.p-pricing) .pr-row { display: grid; grid-template-columns: 48px 108px 1fr 1fr auto; align-items: center; gap: 18px; padding: 20px 8px; border-bottom: 1px solid rgba(255,255,255,0.1); transition: background 0.3s; }
:where(body.p-pricing) .pr-row:hover { background: rgba(255,255,255,0.035); }
:where(body.p-pricing) .pr-num { font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--track-kicker); color: var(--muted); }
:where(body.p-pricing) .pr-grp { font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--muted); }
:where(body.p-pricing) .pr-name { font-size: var(--fs-4); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-tight); color: rgba(255,255,255,0.85); display: flex; align-items: center; gap: 10px; transition: color 0.3s, transform 0.4s cubic-bezier(0.16,1,0.3,1); }
:where(body.p-pricing) .pr-row:hover .pr-name { color: #fff; transform: translateX(8px); }
:where(body.p-pricing) .pr-note { font-size: var(--fs-1); color: var(--muted); }
:where(body.p-pricing) .pr-price { font-size: var(--fs-4); font-weight: 700; color: #fff; text-align: right; white-space: nowrap; }
:where(body.p-pricing) .pr-per { font-size: var(--fs-1); font-weight: 500; color: var(--muted); margin-left: 2px; }
:where(body.p-pricing) .pr-badge { font-size: var(--fs-1); font-weight: 700; letter-spacing: var(--track-ui); text-transform: uppercase; color: #111; background: #f4f3f0; padding: 4px 8px; }
:where(body.p-pricing) .pr-best { background: rgba(255,255,255,0.045); }
:where(body.p-pricing) .pr-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); }
:where(body.p-pricing) .pr-foot p { font-size: var(--fs-1); color: var(--muted); max-width: 560px; }
@media (max-width: 860px) { :where(body.p-pricing) .pr-row { grid-template-columns: 36px 1fr auto; } :where(body.p-pricing) .pr-grp, :where(body.p-pricing) .pr-note { display: none; } }

/* ============ LEGIBILITY + RHYTHM ============ */
.cx-series, .cx-num { color: rgba(255,255,255,0.72); }
.cx-plus { color: rgba(255,255,255,0.75); }
.cx-name { color: rgba(255,255,255,0.82); }
.cx-inner p { color: rgba(255,255,255,0.82); }
.haus-num, .haus-tag { color: rgba(255,255,255,0.7); }
.haus-name { color: rgba(255,255,255,0.62); }
/* S08: .pr-num, .pr-grp, .pr-note, .pr-foot p, .svc-num, .svc-note, .svc-name,
   .numbers-label, .bsport-note and .section-index moved to the --muted and
   --muted-on-light tokens on their own rules. */
.process-desc { color: rgba(255,255,255,0.78); }
.process-num { color: rgba(255,255,255,0.8); }
.book-meta .bm-l { color: rgba(255,255,255,0.7); }
/* tighter section rhythm */
/* --section-pad is defined in tokens.css (S01) */
.section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }

/* ============ RESOLVED: NAV-DESKTOP (from TRANSPARENT NAV ON MOBILE/TABLET) ============ */
@media (max-width:1024px) {
.nav, .nav.scrolled { background:transparent; background-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; border-bottom:0; mix-blend-mode:normal; }
.nav::before, .nav::after { display:none; }
.nav-inner { background:transparent; }
}

/* ============ HIDE HERO PHOTO CARDS ON MOBILE ============ */
@media (max-width: 900px) {
.hero-photo-card, .hero-photo-a, .hero-photo-b, .hero-photo-c { display: none; }
}

/* ============ MOBILE FILTER PILLS FULL WIDTH ============ */
@media (max-width: 700px) {
.page-hero .ph-sub { margin-top: 16px; }
#classes { padding-top: 14px; }
}

/* ============ BIGGER MANIFESTO CHIPS ============ */
.m-chip { width: clamp(96px, 11vw, 190px); height: clamp(64px, 7.5vw, 124px); margin: 0 10px; transform: translateY(-6px); }
@media (max-width: 700px) {
.m-chip { width: 74px; height: 50px; margin: 0 6px; }
}

/* ============ RESOLVED: MOBILE-NAV (from FULLSCREEN MOBILE MENU, MOBILE NAV ICON + CTA FIXES, MOBILE MENU CTA + TOGGLE HARD FIX, HAMBURGER SVG ICON) ============ */
.nav-toggle { mix-blend-mode:normal; isolation:isolate; }
.nt-ico { display:block; width:32px; height:32px; overflow:visible; }
.nt-ico rect { fill:#ffffff; }
.nt-x, body.menu-open .nt-bars { display:none; }
body.menu-open .nt-x { display:block; }
@media (max-width:1024px) {
.nav-links.active a:not(.btn) { font-size: var(--fs-5); font-weight:700; letter-spacing: var(--track-tight); text-transform:uppercase; color:#fff; padding:12px 0; width:100%; text-align:center; }
.nav-links.active a:not(.btn)::after { display:none; }
.nav-links.active .nav-cta { margin-top:26px; width:100%; max-width:320px; background:#f4f3f0; color:#111; border-color:#f4f3f0; font-size: var(--fs-3); font-weight:700; letter-spacing: var(--track-ui); text-align:center; display:flex; align-items:center; justify-content:center; padding-left:24px; padding-right:24px; }
.nav-toggle span { transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.25s; display:block; width:26px; height:2px; background:#fff; border-radius:2px; opacity:1; }
body.menu-open .nav-toggle span { background:#fff; }
body.menu-open .nav-toggle span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity:0; }
body.menu-open .nav-toggle span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
body.menu-open { overflow:hidden; }
body.menu-open .nav-logo { position:relative; z-index:9999; }
body.menu-open .sticky-book-cta { opacity:0; pointer-events:none; }
.nav-toggle { flex-direction:column; display:flex; align-items:center; justify-content:center; width:44px; height:44px; opacity:1; visibility:visible; position:relative; z-index:10000; cursor:pointer; gap:0; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.55)); }
.nav-inner { display:flex; height:var(--nav-h); align-items:center; justify-content:space-between; }
.sticky-book-cta { white-space:nowrap; padding:13px 26px; font-size: var(--fs-1); letter-spacing: var(--track-ui); width:auto; max-width:none; display:inline-flex; align-items:center; gap:8px; }
.nt-ico { display:block; }
body.menu-open .nav-toggle { position:fixed; top:24px; right:22px; }
}

/* ============ MANIFESTO MOBILE ALIGNMENT ============ */
@media (max-width: 768px) {
:where(body.p-index) .manifesto-section { padding: 56px 0 64px; }
:where(body.p-index) .manifesto-section .container { padding-left: 20px; padding-right: 20px; }
/* Phone manifesto. A kicker, the statement as a stack of display lines, the four photos as a
   mosaic (one wide, three square) and One Haus as the closing block. The chips leave the
   sentence through flex order, so the desktop sentence keeps its markup. */
:where(body.p-index) .manifesto-text { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 6px; text-align: left; font-size: var(--fs-6); font-weight: 800; line-height: 0.98; letter-spacing: -0.035em; hyphens: none; max-width: 100%; }
:where(body.p-index) .manifesto-text .m-kicker { display: block; flex: 0 0 100%; font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--track-kicker); line-height: 1; color: rgba(17,17,17,0.72); margin-bottom: 22px; }
:where(body.p-index) .manifesto-text .m-line { flex: 0 0 100%; text-wrap: balance; }
:where(body.p-index) .manifesto-text .m-chip { order: 10; flex: 0 0 calc((100% - 12px) / 3); width: auto; height: auto; aspect-ratio: 1 / 1; margin: 6px 0 0; border-radius: 0; overflow: visible; }
:where(body.p-index) .manifesto-text .m-chip-wide { flex: 0 0 100%; aspect-ratio: 16 / 9; margin-top: 28px; }
:where(body.p-index) .manifesto-text .m-chip img { border-radius: 4px; }
:where(body.p-index) .manifesto-text .m-chip:hover { transform: none; box-shadow: none; border-radius: 0; }
:where(body.p-index) .manifesto-text .m-line-end { order: 20; flex: 0 0 auto; margin-top: 28px; font-size: var(--fs-7); line-height: 1; background: #111; color: #f4f3f0; padding: 10px 14px 6px; }
/* Stagger: lines first, then the mosaic, then One Haus. Children of the p in DOM order are
   kicker(1) chip(2) line(3) chip(4) line(5) line(6) chip(7) line(8) chip(9) line(10). */
:where(body.p-index) .manifesto-text .m-line, :where(body.p-index) .manifesto-text .m-chip { opacity: 0; transform: translateY(18px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
:where(body.p-index) .manifesto-text.visible .m-line, :where(body.p-index) .manifesto-text.visible .m-chip { opacity: 1; transform: none; }
:where(body.p-index) .manifesto-text > :nth-child(5) { transition-delay: 0.08s; }
:where(body.p-index) .manifesto-text > :nth-child(6) { transition-delay: 0.16s; }
:where(body.p-index) .manifesto-text > :nth-child(8) { transition-delay: 0.24s; }
:where(body.p-index) .manifesto-text > :nth-child(2) { transition-delay: 0.36s; }
:where(body.p-index) .manifesto-text > :nth-child(4) { transition-delay: 0.42s; }
:where(body.p-index) .manifesto-text > :nth-child(7) { transition-delay: 0.48s; }
:where(body.p-index) .manifesto-text > :nth-child(9) { transition-delay: 0.54s; }
:where(body.p-index) .manifesto-text > :nth-child(10) { transition-delay: 0.64s; }
}
@media (max-width: 480px) {
:where(body.p-index) .manifesto-section { padding: 48px 0 56px; }
}
@media (prefers-reduced-motion: reduce) {
:where(body.p-index) .manifesto-text .m-line, :where(body.p-index) .manifesto-text .m-chip { opacity: 1; transform: none; transition: none; }
}
/* S15: the hover scale overrides the mobile chip transform above, so it sits after it. */
.m-chip:hover { transform: translateY(-6px) scale(1.9); }
/* S08: the manifesto chip lightbox is gone. The chips are decorative (alt=""), so
   they no longer open anything and no longer claim a zoom cursor. */

/* ============ HAUS PREVIEW HOVER FIX ============ */
:where(body.p-index) .haus-preview { width: clamp(260px, 20vw, 320px); aspect-ratio: 4/3; border-radius: 2px; transition: opacity .28s ease, transform .38s cubic-bezier(.2,.8,.2,1); box-shadow: 0 18px 50px rgba(0,0,0,0.6); }
:where(body.p-index) .haus-preview img { transform: none; filter: grayscale(1) contrast(1.05); }

/* ============ HERO PHOTO CARD LOAD-IN ============ */
@keyframes khCardIn {
0%   { opacity: 0; clip-path: inset(100% 0 0 0); transform: rotate(var(--rot,0deg)) translateY(46px) scale(1.05); }
60%  { opacity: 1; }
100% { opacity: 1; clip-path: inset(0 0 0 0); transform: rotate(var(--rot,0deg)) translateY(0) scale(1); }
}
@keyframes khCardImgIn {
0%   { transform: scale(1.32); filter: grayscale(1) contrast(1.3) brightness(0.7); }
100% { transform: scale(1); filter: grayscale(1) contrast(1.05) brightness(1); }
}
:where(body.p-index) .hero-photo-a { --rot: 4deg; }
:where(body.p-index) .hero-photo-b { --rot: -5deg; }
:where(body.p-index) .hero-photo-c { --rot: -3deg; }
:where(body.p-index) .hero-photo-card { transform: rotate(var(--rot,0deg)); animation: khCardIn 1.15s cubic-bezier(.16,.84,.28,1) both; }
:where(body.p-index) .hero-photo-card img { animation: khCardImgIn 1.6s cubic-bezier(.16,.84,.28,1) both; }
:where(body.p-index) .hero-photo-a { animation-delay: .28s; }
:where(body.p-index) .hero-photo-a img { animation-delay: .28s; }
:where(body.p-index) .hero-photo-b { animation-delay: .52s; }
:where(body.p-index) .hero-photo-b img { animation-delay: .52s; }
:where(body.p-index) .hero-photo-c { animation-delay: .74s; }
:where(body.p-index) .hero-photo-c img { animation-delay: .74s; }

/* ============ HERO CARD FOCAL POINTS ============ */
:where(body.p-index) .hero-photo-a img { object-position: 30% 42%; }
:where(body.p-index) .hero-photo-b img { object-position: 50% 45%; }
:where(body.p-index) .hero-photo-c img { object-position: 45% 40%; }

/* ============ RESOLVED: BUTTONS (from MOBILE FULL-WIDTH CTA BUTTONS) ============ */
@media (max-width:768px) {
.hero-buttons .btn, .contact-cta .btn { width:100%; max-width:100%; }
.contact-cta { display:block; width:100%; max-width:100%; }
.contact-description { text-align:center; }
.pr-foot { text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px; }
.cta-block, .section-cta { text-align:center; }
.pr-foot > p, .pr-foot > .body-sm, .cta-block > p, .section-cta > p { text-align:center; margin-left:auto; margin-right:auto; max-width:34ch; }
}

/* ============ BOOK SECTION MOBILE BOTTOM PADDING ============ */
@media (max-width: 768px) {
:where(body.p-index) .bsport-note { margin-bottom: 0; padding-bottom: 8px; }
:where(body.p-index) .bsport-shell { margin-bottom: 18px; }
:where(body.p-index) #testimonials { padding-top: 64px; }
}
@media (max-width: 480px) {
:where(body.p-index) #testimonials { padding-top: 54px; }
}

/* ============ BSPORT EMBED, KH BRAND SKIN ============ */
iframe[src*="bsport"], .bsport-frame { filter: invert(1) grayscale(1) contrast(1.04); background: #ffffff; border: 0; display: block; width: 100%; }
.kh-bsport-wrap { background: #050505; }
.kh-bs-pad { padding: 0; background: #050505; }
@media (max-width: 768px) { iframe[src*="bsport"], .bsport-frame { height: 100%; min-height: 78vh; border-radius: 0; } }
/* inner-page additions to the bsport skin */
:where(body:not(.p-index)) .kh-bsport-wrap .kh-bs-head { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; background:#050505; border-bottom:1px solid rgba(255,255,255,0.14); }
:where(body:not(.p-index)) .kh-bsport-wrap .kh-bs-head .kh-bs-title { font-size: var(--fs-1); font-weight:700; letter-spacing: var(--track-kicker); text-transform:uppercase; color:#fff; }
@media (max-width:768px) { :where(body:not(.p-index)) .kh-bsport-wrap { padding:0; } }

/* ============ CLASSES MOBILE SECTION SPACING ============ */
@media (max-width: 768px) {
:where(body.p-classes) #book { padding-top: 72px; padding-bottom: 64px; }
:where(body.p-classes) #book .section-index, :where(body.p-classes) #book .section-heading-line { margin-top: 0; }
:where(body.p-classes) #book .section-heading-line, :where(body.p-classes) #book .display-md { margin-bottom: 26px; }
:where(body.p-classes) .cx-body + #book, :where(body.p-classes) .cx-book { margin-top: 0; }
}
@media (max-width: 480px) {
:where(body.p-classes) #book { padding-top: 60px; padding-bottom: 54px; }
}

/* ============ RESOLVED: TEAM (from TEAM MOBILE CENTERED PHOTOS, TEAM DESKTOP ROSTER LEGIBILITY, TEAM MOBILE HERO GAP, TEAM MOBILE SQUARE PHOTOS v2) ============ */
@media (max-width:768px) {
:where(body.p-team) .tm-sinner { display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; padding:22px 20px 28px; }
:where(body.p-team) .tm-sinner img, :where(body.p-team) .tm-sinner .tm-photo { display:block; margin:0 auto; width:100%; max-width:190px; aspect-ratio:1 / 1; height:auto; object-fit:cover; }
:where(body.p-team) .tm-sinner p, :where(body.p-team) .tm-sinner .tm-bio { text-align:center; margin-left:auto; margin-right:auto; max-width:42ch; font-size: var(--fs-2); line-height:1.62; }
:where(body.p-team) .tm-block { text-align:center; margin-top:0; margin-bottom:46px; }
:where(body.p-team) .tm-block .tm-photo, :where(body.p-team) .tm-block img { margin-left:auto; margin-right:auto; margin-top:0; }
:where(body.p-team) .tm-block .tm-bio, :where(body.p-team) .tm-block .tm-role, :where(body.p-team) .tm-block .tm-name { text-align:center; margin-left:auto; margin-right:auto; }
:where(body.p-team) .tm-block:first-of-type { margin-top:0; }
:where(body.p-team) .tm-photo { position:static; overflow:visible; display:block; width:100%; max-width:276px; margin:0 auto 22px; aspect-ratio:auto; height:auto; line-height:0; background:transparent; }
:where(body.p-team) .tm-photo img { position:static; inset:auto; display:block; width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; object-position:50% 22%; transform:none; opacity:1; visibility:visible; }
}
@media (min-width:769px) {
:where(body.p-team) .tm-srole { font-size: var(--fs-1); letter-spacing: var(--track-ui); color:rgba(255,255,255,0.78); font-weight:500; }
:where(body.p-team) .tm-snum { font-size: var(--fs-1); color:rgba(255,255,255,0.62); letter-spacing: var(--track-ui); }
:where(body.p-team) .tm-sname { font-size: var(--fs-4); letter-spacing: var(--track-tight); color:#fff; }
:where(body.p-team) .tm-splus, :where(body.p-team) .tm-srow.open .tm-splus { font-size: var(--fs-4); color:rgba(255,255,255,0.85); }
:where(body.p-team) .tm-role { font-size: var(--fs-2); letter-spacing: var(--track-ui); color:rgba(255,255,255,0.8); }
:where(body.p-team) .tm-num { font-size: var(--fs-1); color:rgba(255,255,255,0.65); }
:where(body.p-team) .tm-bio { font-size: var(--fs-3); line-height:1.72; color:rgba(255,255,255,0.82); }
:where(body.p-team) .tm-shead { padding-top:26px; padding-bottom:26px; }
}

/* ============ CONTACT CTA FULL WIDTH ============ */
@media (max-width: 768px) {
:where(body:not(.p-index)) .contact-cta { display: block; width: 100%; max-width: 100%; }
:where(body:not(.p-index)) .contact-cta .btn { width: 100%; display: flex; align-items: center; justify-content: center; }
:where(body:not(.p-index)) .contact-description { text-align: center; }
}

/* ============ RESOLVED: IMAGE-BARS (from KILL IMAGE CONTAINER BARS, KILL DEAD SPACE UNDER PHOTOS (ALL BREAKPOINTS)) ============ */
.about-image, .perf-img-wrap { background:transparent; line-height:0; }
.clinic-video-wrap { background:transparent; }
.clinic-video-wrap > div, .testimonial-img-wrap { background:transparent; line-height:0; }
.gallery-marquee-item { background:transparent; line-height:0; }
.about-image img, .perf-img-wrap img, .clinic-video-wrap img, .testimonial-img-wrap img, .tm-photo img { display:block; vertical-align:bottom; }
.gallery-marquee-item img { display:block; vertical-align:bottom; line-height:0; }
.perf-video-wrap video { display:block; vertical-align:bottom; }
img { vertical-align:bottom; }
.testimonial-showcase { min-height:0; background:transparent; }
.modal-content.gallery-mode { max-height:none; height:auto; overflow:visible; background:transparent; line-height:0; }
.modal-gallery-img { display:block; max-height:85vh; height:auto; vertical-align:bottom; }
.founder-photo, .staff-photo, .tm-photo, .gateway-card, .hero-photo-card, .perf-video-wrap, .ph-video-wrap { background:transparent; line-height:0; }
.tm-photo img, .hero-photo-card img { display:block; vertical-align:bottom; }
figure, picture { margin:0; background:transparent; line-height:0; }
figure > img, picture > img { display:block; vertical-align:bottom; }

/* ============ CLINIC CARD FOCAL ============ */
:where(body.p-index) .hero-photo-c img { object-position: 55% 50%; }

/* ============ FLOATING SUBSCRIBE (KH JOIN) ============ */
.khj { position:fixed; left:22px; bottom:22px; z-index:9500; font-family:inherit; }
.khj * { box-sizing:border-box; }
.khj-tab { display:inline-flex; align-items:center; gap:10px; background:#f4f3f0; color:#0a0a0a; border:1px solid #f4f3f0; padding:14px 20px; font-size: var(--fs-1); font-weight:700; letter-spacing: var(--track-kicker); text-transform:uppercase; cursor:pointer; border-radius:2px; box-shadow:0 14px 40px rgba(0,0,0,.45); transition:transform .3s cubic-bezier(.2,.9,.25,1),background .3s; }
.khj-tab:hover { transform:translateY(-2px); background:#fff; }
.khj-tab .khj-dot { width:6px; height:6px; border-radius:50%; background:#0a0a0a; animation:khjPulse 2.4s ease-in-out infinite; }
@keyframes khjPulse {
0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}
}
.khj-panel { position:absolute; left:0; bottom:0; width:352px; max-width:calc(100vw - 44px); background:#0a0a0a; border:1px solid rgba(255,255,255,.16); border-radius:3px; padding:26px 24px 24px; box-shadow:0 28px 70px rgba(0,0,0,.66); opacity:0; visibility:hidden; transform:translateY(14px) scale(.97); transform-origin:bottom left; transition:opacity .3s ease,transform .38s cubic-bezier(.2,.9,.25,1),visibility .3s; }
.khj.open .khj-panel { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.khj.open .khj-tab { opacity:0; pointer-events:none; }
.khj-x { position:absolute; top:12px; right:12px; width:30px; height:30px; border:0; background:transparent; color:rgba(255,255,255,.55); font-size: var(--fs-3); line-height:1; cursor:pointer; border-radius:50%; }
.khj-x:hover { color:#fff; }
.khj-kick { font-size: var(--fs-1); font-weight:700; letter-spacing: var(--track-kicker); text-transform:uppercase; color:rgba(255,255,255,.5); margin:0 0 8px; }
.khj-h { font-size: var(--fs-4); font-weight:700; letter-spacing: var(--track-tight); line-height:1.1; text-transform:uppercase; color:#fff; margin:0 0 8px; }
.khj-sub { font-size: var(--fs-1); line-height:1.5; color:rgba(255,255,255,.62); margin:0 0 18px; }
.khj-f { width:100%; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.2); color:#fff; font-size: var(--fs-2); padding:11px 0; margin-bottom:12px; transition:border-color .3s; font-family:inherit; }
.khj-f::placeholder { color:rgba(255,255,255,.34); }
.khj-f:focus-visible { border-bottom-color:#fff; outline:none; }
.khj-seg { display:flex; gap:8px; margin:6px 0 14px; }
.khj-seg button { flex:1; background:transparent; border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.6); font-size: var(--fs-1); font-weight:700; letter-spacing: var(--track-ui); text-transform:uppercase; padding:11px 6px; cursor:pointer; border-radius:2px; transition:all .25s; font-family:inherit; }
.khj-seg button.on { background:#f4f3f0; border-color:#f4f3f0; color:#0a0a0a; }
.khj-go { width:100%; background:#f4f3f0; color:#0a0a0a; border:1px solid #f4f3f0; padding:15px; font-size: var(--fs-1); font-weight:700; letter-spacing: var(--track-kicker); text-transform:uppercase; cursor:pointer; border-radius:2px; font-family:inherit; transition:background .3s; }
.khj-go:hover { background:#fff; }
.khj-go[disabled] { opacity:.5; cursor:not-allowed; }
.khj-note { font-size: var(--fs-1); letter-spacing: var(--track-tight); color:var(--muted); text-align:center; margin:12px 0 0; }
.khj-done { display:none; text-align:center; padding:16px 0 6px; }
.khj.done .khj-form { display:none; }
.khj.done .khj-done { display:block; }
.khj-check { width:42px; height:42px; border:1px solid rgba(255,255,255,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; color:#fff; font-size: var(--fs-4); }
.khj-err { font-size: var(--fs-1); color:#fff; background:rgba(255,255,255,.1); border-left:2px solid #fff; padding:8px 10px; margin-bottom:12px; display:none; }
@media (max-width:768px) {
.khj { left:0; right:0; bottom:0; }
.khj-tab { position:fixed; left:14px; bottom:16px; padding:13px 18px; font-size: var(--fs-1); }
.khj-panel { position:fixed; left:0; right:0; bottom:0; width:100%; max-width:100%; border-radius:14px 14px 0 0; border-left:0; border-right:0; border-bottom:0; padding:26px 20px calc(24px + env(safe-area-inset-bottom)); transform-origin:bottom center; transform:translateY(100%); }
.khj.open .khj-panel { transform:translateY(0); }
.khj-h { font-size: var(--fs-4); }
}

/* ============ BOOK SECTION WIDTH + PADDING ============ */
:where(body.p-index, body.p-classes) #book > .container, :where(body.p-index, body.p-classes) .cx-book > .container { padding-left: var(--side-pad); padding-right: var(--side-pad); }
:where(body.p-index, body.p-classes) #book { padding-top: 120px; padding-bottom: 120px; }
:where(body.p-index, body.p-classes) #book .bsport-shell { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
:where(body.p-index, body.p-classes) #book .bsport-note { margin-top: 18px; margin-bottom: 0; }
@media (max-width: 1024px) {
:where(body.p-index, body.p-classes) #book { padding-top: 88px; padding-bottom: 88px; }
}
@media (max-width: 768px) {
:where(body.p-index, body.p-classes) #book { padding-top: 64px; padding-bottom: 64px; }
:where(body.p-index, body.p-classes) #book .bsport-note { margin-top: 14px; }
}

/* ============ HERO CARD FLOAT ============ */
@keyframes khFloatA {
0%{transform:rotate(4deg) translate(0px,0px)}
50%{transform:rotate(5.1deg) translate(-7px,-16px)}
100%{transform:rotate(4deg) translate(0px,0px)}
}
@keyframes khFloatB {
0%{transform:rotate(-5deg) translate(0px,0px)}
50%{transform:rotate(-3.9deg) translate(9px,-11px)}
100%{transform:rotate(-5deg) translate(0px,0px)}
}
@keyframes khFloatC {
0%{transform:rotate(-3deg) translate(0px,0px)}
50%{transform:rotate(-2.1deg) translate(-5px,13px)}
100%{transform:rotate(-3deg) translate(0px,0px)}
}
:where(body.p-index) .hero-photo-card.khfloat { animation-fill-mode:none; }
:where(body.p-index) .hero-photo-a.khfloat { animation:khFloatA 9.5s ease-in-out infinite; }
:where(body.p-index) .hero-photo-b.khfloat { animation:khFloatB 12s ease-in-out infinite; animation-delay:-3s; }
:where(body.p-index) .hero-photo-c.khfloat { animation:khFloatC 14s ease-in-out infinite; animation-delay:-6s; }

/* ============ CORPORATE PAGE ============ */
:where(body.p-corporate) #apply { scroll-margin-top:110px; }
:where(body.p-corporate) .co-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12); margin-top:44px; }
:where(body.p-corporate) .co-item { background:#050505; padding:38px 34px; }
:where(body.p-corporate) .co-num { display:block; font-size: var(--fs-1); letter-spacing: var(--track-kicker); color:rgba(255,255,255,.45); margin-bottom:16px; }
:where(body.p-corporate) .co-h { font-size: var(--fs-4); font-weight:700; letter-spacing: var(--track-tight); text-transform:uppercase; color:#fff; margin:0 0 12px; }
:where(body.p-corporate) .co-p { font-size: var(--fs-2); line-height:1.68; color:rgba(255,255,255,.72); margin:0; }
:where(body.p-corporate) .co-lead { font-size: var(--fs-3); line-height:1.7; color:rgba(255,255,255,.72); max-width:56ch; margin:18px 0 0; }
:where(body.p-corporate) .co-form { margin-top:40px; max-width:760px; }
:where(body.p-corporate) .co-sent { margin:0 0 22px; padding:14px 16px; border-left:2px solid #f4f3f0; background:rgba(255,255,255,.06); color:#fff; font-size:var(--fs-2); line-height:1.5; }
:where(body.p-corporate) .co-row { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
:where(body.p-corporate) .co-field { display:block; margin-bottom:22px; }
:where(body.p-corporate) .co-field>span { display:block; font-size: var(--fs-1); font-weight:700; letter-spacing: var(--track-kicker); text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:9px; }
:where(body.p-corporate) .co-field input, :where(body.p-corporate) .co-field select, :where(body.p-corporate) .co-field textarea { width:100%; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.22); color:#fff; font-family:inherit; font-size: var(--fs-3); padding:12px 0; outline:none; transition:border-color .3s; border-radius:0; }
:where(body.p-corporate) .co-field textarea { border:1px solid rgba(255,255,255,.22); padding:14px; resize:vertical; }
:where(body.p-corporate) .co-field input:focus, :where(body.p-corporate) .co-field select:focus, :where(body.p-corporate) .co-field textarea:focus { border-bottom-color:#fff; }
:where(body.p-corporate) .co-field textarea:focus { border-color:#fff; }
:where(body.p-corporate) .co-field select { appearance:none; -webkit-appearance:none; cursor:pointer; }
:where(body.p-corporate) .co-field select option { background:#0a0a0a; color:#fff; }
:where(body.p-corporate) .co-field input::placeholder, :where(body.p-corporate) .co-field textarea::placeholder { color:rgba(255,255,255,.3); }
:where(body.p-corporate) .co-hp { position:absolute; left:-9999px; }
@media (max-width:1024px) {:where(body.p-corporate) .co-item { padding:32px 26px; }}
@media (max-width:768px) {
:where(body.p-corporate) .co-grid { grid-template-columns:1fr; margin-top:32px; }
:where(body.p-corporate) .co-item { padding:28px 22px; }
:where(body.p-corporate) .co-row { grid-template-columns:1fr; gap:0; }
:where(body.p-corporate) .co-form { margin-top:30px; }
}

/* ============ CORPORATE APPLY LAYOUT ============ */
:where(body.p-corporate) .co-apply { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.82fr); gap:64px; align-items:stretch; margin-top:40px; }
:where(body.p-corporate) .co-apply .co-form { margin-top:0; max-width:none; }
:where(body.p-corporate) .co-shot { margin:0; position:relative; overflow:hidden; min-height:100%; border:1px solid rgba(255,255,255,.14); }
:where(body.p-corporate) .co-shot img { width:100%; height:100%; min-height:520px; object-fit:cover; display:block; filter:grayscale(1) contrast(1.05); }
:where(body.p-corporate) .co-lead { color:rgba(255,255,255,.88); }
:where(body.p-corporate) .co-p { color:rgba(255,255,255,.86); }
:where(body.p-corporate) .co-num { color:rgba(255,255,255,.6); }
:where(body.p-corporate) .co-field>span { color:rgba(255,255,255,.8); }
:where(body.p-corporate) .co-field input, :where(body.p-corporate) .co-field select, :where(body.p-corporate) .co-field textarea { color:#fff; border-bottom-color:rgba(255,255,255,.34); }
:where(body.p-corporate) .co-field textarea { border-color:rgba(255,255,255,.34); }
:where(body.p-corporate) .co-field input::placeholder, :where(body.p-corporate) .co-field textarea::placeholder { color:rgba(255,255,255,.5); }
@media (max-width:1024px) {
:where(body.p-corporate) .co-apply { grid-template-columns:1fr; gap:34px; }
:where(body.p-corporate) .co-shot img { min-height:320px; }
}
@media (max-width:768px) {
:where(body.p-corporate) .co-apply { gap:26px; margin-top:28px; }
:where(body.p-corporate) .co-shot img { min-height:240px; }
}

/* ============ CLINIC BANNER COLOUR ============ */
:where(body.p-clinic) img[src*="clinic-assessment"] { filter:none; -webkit-filter:none; }

/* ============ WHY CHOOSE HEADER ONE LINE (MOBILE) ============ */
@media (max-width: 768px) {
:where(body.p-index) .why-choose-h br { display: none; }
:where(body.p-index) .why-choose-h { white-space: nowrap; font-size: var(--fs-5); line-height: 1.12; letter-spacing: var(--track-tight); }
}

/* ============ PRICING ENQUIRY LINE ============ */
:where(body.p-pricing) .pr-enquiry { font-size: var(--fs-3); line-height:1.65; color:rgba(255,255,255,.8); margin:0 0 14px; }
:where(body.p-pricing) .pr-enquiry a { color:#fff; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:768px) {:where(body.p-pricing) .pr-enquiry { font-size: var(--fs-2); text-align:center; }}

/* ============ RESOLVED: TEAM (from STAFF BIO FULL WIDTH) ============ */
:where(body.p-team) .tm-sinner .tm-bio-full { grid-column:1 / -1; width:100%; max-width:72ch; }
:where(body.p-team) .tm-sinner .tm-bio-full p { margin:0 0 16px; max-width:none; text-align:left; }
:where(body.p-team) .tm-sinner .tm-bio-full p:last-child { margin-bottom:0; }
@media (max-width:768px) {
:where(body.p-team) .tm-sinner .tm-bio-full { max-width:100%; }
:where(body.p-team) .tm-sinner .tm-bio-full p { text-align:center; }
}

/* ============ TESTIMONIAL MOBILE CARD FLATTEN ============ */
@media (max-width:768px) {
:where(body.p-clinic) #testimonials .testimonial-showcase { background:transparent; border:0; padding:0; min-height:0; height:auto; }
:where(body.p-clinic) .testimonial-slide { transition:opacity .3s ease; }
:where(body.p-clinic) .testimonial-slide:not(.active) { display:none; }
:where(body.p-clinic) .testimonial-slide.active { display:block; visibility:visible; position:relative; height:auto; }
:where(body.p-clinic) .testimonial-split { display:grid; grid-template-columns:1fr; grid-template-rows:auto auto; gap:16px; align-items:start; }
:where(body.p-clinic) .testimonial-content { justify-content:flex-start; height:auto; min-height:0; margin-top:0; padding:0; }
}

/* ============ RESOLVED: TESTIMONIAL-MOBILE (from TESTIMONIAL MOBILE VOID FIX, TESTIMONIAL MOBILE CARD FLATTEN) ============ */
@media (max-width:768px) {
:where(body.p-index, body.p-classes, body.p-performance, body.p-team, body.p-pricing, body.p-corporate) .testimonial-split { display:grid; grid-template-columns:1fr; grid-template-rows:auto auto; align-items:start; }
:where(body.p-index, body.p-classes, body.p-performance, body.p-team, body.p-pricing, body.p-corporate) .testimonial-img-wrap { height:auto; min-height:0; }
:where(body.p-index, body.p-classes, body.p-performance, body.p-team, body.p-pricing, body.p-corporate) .testimonial-img-wrap img { height:auto; aspect-ratio:4/3; object-fit:cover; display:block; }
:where(body.p-index, body.p-classes, body.p-performance, body.p-team, body.p-pricing, body.p-corporate) .testimonial-showcase { min-height:0; height:auto; }
:where(body.p-index, body.p-classes, body.p-performance, body.p-team, body.p-pricing, body.p-corporate) .testimonial-slide { height:auto; }
:where(body.p-index, body.p-classes, body.p-performance, body.p-team, body.p-pricing, body.p-corporate) #testimonials .testimonial-showcase { background:transparent; border:0; padding:0; min-height:0; height:auto; }
:where(body.p-index, body.p-classes, body.p-performance, body.p-team, body.p-pricing, body.p-corporate) .testimonial-slide:not(.active) { display:none; }
:where(body.p-index, body.p-classes, body.p-performance, body.p-team, body.p-pricing, body.p-corporate) .testimonial-slide.active { display:block; visibility:visible; position:relative; height:auto; }
:where(body.p-index, body.p-classes, body.p-performance, body.p-team, body.p-pricing, body.p-corporate) .testimonial-content { justify-content:flex-start; height:auto; min-height:0; margin-top:0; padding:0; }
}

/* ============ CLINIC NAV FORCED WHITE ============ */
:where(body.p-clinic) .nav { mix-blend-mode:normal; isolation:isolate; }
:where(body.p-clinic) .nav .nav-logo-wordmark, :where(body.p-clinic) .nav .nav-logo-icon, :where(body.p-clinic) .nav .nav-logo, :where(body.p-clinic) .nav .nav-links a, :where(body.p-clinic) .nav .nav-link, :where(body.p-clinic) .nav .nav-cta { color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.55); }
:where(body.p-clinic) .nav .nav-logo-icon img, :where(body.p-clinic) .nav .nav-logo img { filter:brightness(0) invert(1) drop-shadow(0 1px 8px rgba(0,0,0,.5)); }
:where(body.p-clinic) .nav .nav-cta { border-color:rgba(255,255,255,.75); }
:where(body.p-clinic) .nav .nav-toggle .nt-ico rect { fill:#fff; }

/* ============ CLINIC HERO VIDEO SIZE RESTORE ============ */
:where(body.p-clinic) .page-hero .ph-bg-video, :where(body.p-clinic) .ph-video .ph-bg-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; }

/* ============ HERO CLINIC CARD COLOUR CYCLER ============ */
:where(body.p-index) .hero-photo-c { width:clamp(176px,20vw,350px); height:clamp(135px,15vw,256px); right:-3vw; top:64%; z-index:2; }
:where(body.p-index) .hero-photo-c img { filter:none; }
:where(body.p-index) .hero-photo-c img.khc-cycle { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease; animation:none; }
:where(body.p-index) .hero-photo-c img.khc-cycle.khc-on { opacity:1; }

/* ============ HAUS PREVIEW CLINIC COLOUR ============ */
:where(body.p-index) .haus-preview img#p2 { filter:none; }

/* ============ PERF PHOTO SQUARE CORNERS ============ */
:where(body.p-performance) .perf-video-wrap .perf-img, :where(body.p-performance) .perf-video-wrap .perf-img > div, :where(body.p-performance) .perf-video-wrap .perf-img img { border-radius:0; }

/* ============ CLINIC BANNER CYCLER ============ */
:where(body.p-clinic) img[src*="clinic-assessment"] { filter:none; }
:where(body.p-clinic) .kh-banner-wrap { position:relative; overflow:hidden; }
:where(body.p-clinic) .kh-banner-wrap img.khb-cycle { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease; filter:none; }
:where(body.p-clinic) .kh-banner-wrap img.khb-cycle.khb-on { opacity:1; }

/* ============ RESOLVED: TEAM (from STAFF BOOK BUTTON, STAFF ROLE LABELS ON MOBILE) ============ */
:where(body.p-team) .tm-book { margin:18px 0 0; }
:where(body.p-team) .tm-book-btn { display:inline-flex; align-items:center; gap:8px; background:#f4f3f0; color:#0a0a0a; border:1px solid #f4f3f0; padding:12px 22px; font-size: var(--fs-1); font-weight:800; letter-spacing: var(--track-ui); text-transform:uppercase; border-radius:2px; text-decoration:none; transition:background .3s,transform .3s; }
:where(body.p-team) .tm-book-btn:hover { background:#fff; transform:translateY(-2px); }
@media (max-width:768px) {
:where(body.p-team) .tm-book { text-align:center; }
:where(body.p-team) .tm-book-btn { width:100%; justify-content:center; }
:where(body.p-team) .tm-shead { display:grid; grid-template-columns:40px 1fr 26px; align-items:center; column-gap:10px; row-gap:3px; padding-top:18px; padding-bottom:18px; }
:where(body.p-team) .tm-snum { grid-column:1; grid-row:1 / span 2; align-self:center; }
:where(body.p-team) .tm-sname { grid-column:2; grid-row:1; text-align:left; }
:where(body.p-team) .tm-srole { display:block; grid-column:2; grid-row:2; text-align:left; font-size: var(--fs-1); font-weight:600; letter-spacing: var(--track-ui); text-transform:uppercase; color:rgba(255,255,255,.62); line-height:1.3; white-space:normal; }
:where(body.p-team) .tm-splus { grid-column:3; grid-row:1 / span 2; align-self:center; }
}

/* ============ RESOLVED: DOCK (from FLOATING ACTION DOCK, DOCK PROMINENCE, DOCK POSITION LOCK, DOCK 50/50 MOBILE, DOCK ALWAYS VISIBLE, BOOK CTA MOVING ARROW, PANEL ABOVE BOOK BUTTON, FOOTER CLEARS THE DOCK (MOBILE), DOCK CLEARANCE FOR MOBILE BROWSER CHROME, DOCK EQUAL BUTTONS, DESKTOP SUBSCRIBE MODAL CENTER, KH_DOCK_CLEARANCE) ============ */
/* S06: the dock is CSS only. No JS writes position, opacity or visibility any more;
   the DOCK module moves the two nodes into .kh-dock once and stops there.
   Heights and vertical padding come from the KH_BUTTON_HEIGHT_RULE section below. */
@keyframes khDotPulse {
0%{box-shadow:0 0 0 0 rgba(255,255,255,.8)}70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@keyframes khBookPulse {
0%{box-shadow:0 18px 46px rgba(0,0,0,.62),0 0 0 0 rgba(255,255,255,.55)}
65%{box-shadow:0 18px 46px rgba(0,0,0,.62),0 0 0 16px rgba(255,255,255,0)}
100%{box-shadow:0 18px 46px rgba(0,0,0,.62),0 0 0 0 rgba(255,255,255,0)}
}
@keyframes khArrowNudge {
0%{transform:translateX(0)}
45%{transform:translateX(5px)}
70%{transform:translateX(1px)}
100%{transform:translateX(0)}
}
.kh-dock { position:fixed; right:26px; bottom:26px; left:auto; display:flex; align-items:center; gap:10px; z-index:9500; }
.kh-dock .khj { position:relative; left:auto; right:auto; bottom:auto; top:auto; }
.kh-dock .sticky-book-cta, .kh-dock .khj-tab { position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto; margin:0; }
.kh-dock .sticky-book-cta:hover, .kh-dock .khj-tab:hover { transform:translateY(-3px); }
body.menu-open .kh-dock { display:none; }

/* dock button skin */
.kh-dock .khj-tab { background:rgba(8,8,8,.9); border:1.5px solid rgba(255,255,255,.55); color:#fff; border-radius:3px; box-shadow:0 18px 46px rgba(0,0,0,.62); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); gap:10px; padding-left:26px; padding-right:26px; font-size:var(--fs-1); font-weight:800; letter-spacing:var(--track-ui); text-transform:uppercase; width:auto; max-width:none; transition:transform .3s cubic-bezier(.2,.9,.25,1),background .3s,opacity .3s; }
.kh-dock .khj-tab:hover { background:#0a0a0a; border-color:#fff; }
.kh-dock .khj-tab .khj-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#fff; flex:none; box-shadow:0 0 0 0 rgba(255,255,255,.85); animation:khDotPulse 2s ease-out infinite; }
.kh-dock .sticky-book-cta { background:#ffffff; color:#000; border:1.5px solid #ffffff; border-radius:3px; box-shadow:0 18px 46px rgba(0,0,0,.62); animation:khBookPulse 2.8s ease-out infinite; gap:9px; padding-left:26px; padding-right:26px; font-size:var(--fs-1); font-weight:800; letter-spacing:var(--track-ui); text-transform:uppercase; width:auto; max-width:none; float:none; transition:transform .3s cubic-bezier(.2,.9,.25,1),background .3s,opacity .3s; }
.kh-dock .sticky-book-cta:hover { background:#fff; animation:none; box-shadow:0 22px 56px rgba(0,0,0,.7),0 0 40px rgba(255,255,255,.35); }
.kh-dock .sticky-book-cta .cta-arrow { display:inline-block; margin-left:2px; font-size:var(--fs-1); line-height:1; animation:khArrowNudge 1.8s cubic-bezier(.4,0,.2,1) infinite; }
.kh-dock .sticky-book-cta:hover .cta-arrow { animation-duration:.9s; }

/* the open panel and its scrim */
.kh-dock .khj-panel { right:0; left:auto; bottom:calc(100% + 12px); transform-origin:bottom right; }
.kh-dock .khj.open { position:relative; z-index:10050; }
.kh-dock .khj.open .khj-tab { opacity:0; pointer-events:none; }
.kh-dock .khj.open ~ .sticky-book-cta { position:relative; z-index:1; }

.hero-scroll { margin-bottom:var(--kh-dock-gap); }
.nav-links.active { padding-bottom:calc(env(safe-area-inset-bottom,0px) + 40px); overscroll-behavior:contain; }
@media (max-width:1024px) and (min-width:769px) {
.kh-dock { right:20px; bottom:20px; }
}
@media (min-width:769px) {
.kh-dock .khj.open .khj-panel { position:fixed; left:calc(50% - 260px); top:max(60px, calc(50% - 290px)); right:auto; bottom:auto; width:520px; max-width:92vw; padding:44px 42px 38px; z-index:10060; transform-origin:center center; }
.khj.open::before { content:''; position:fixed; inset:0; background:rgba(5,5,5,.7); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); z-index:10055; }
.kh-dock .khj.open .khj-panel .khj-h { font-size: var(--fs-5); }
.kh-dock .khj.open .khj-panel .khj-sub { font-size: var(--fs-2); }
.kh-dock .khj.open .khj-panel .khj-f { font-size: var(--fs-3); padding:13px 0; }
}
@media (max-width:768px) {
.kh-dock { left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); width:auto; gap:8px; align-items:stretch; }
.kh-dock .khj { flex:1 1 50%; max-width:50%; min-width:0; display:flex; }
.kh-dock .khj-tab, .kh-dock .sticky-book-cta { flex:1 1 50%; width:100%; max-width:100%; min-width:0; padding-left:8px; padding-right:8px; overflow:hidden; text-overflow:ellipsis; text-align:center; }
.kh-dock .khj-panel { position:fixed; left:0; right:0; bottom:0; width:100%; max-width:100%; }
.kh-dock .khj.open::before { content:''; position:fixed; inset:0; background:rgba(5,5,5,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); z-index:10055; pointer-events:auto; }
.kh-dock .khj.open .khj-panel { z-index:10060; box-shadow:0 -18px 60px rgba(0,0,0,.7); }
.kh-dock .sticky-book-cta .cta-arrow { margin-left:1px; }
/* Clearance for the fixed dock, counted once. The dock sits 12px + safe area from the bottom
   and is --kh-btn-h tall, so it covers --kh-btn-h + 12px + safe area. The footer adds its own
   24px below this box, which leaves a 20px gap between the last footer row and the dock. */
.footer-bottom { display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; padding-bottom:calc(var(--kh-btn-h) + env(safe-area-inset-bottom,0px) + 8px); }
.footer-copyright { margin:0; text-align:center; }
.footer-bottom a, .footer-bottom .footer-social, .footer-bottom img, .footer-bottom svg { margin:0 auto; }
body { padding-bottom:0; }
.scroll-line { height:30px; }
}
@media (max-width:380px) {
.kh-dock .khj-tab .khj-dot { display:inline-block; width:6px; height:6px; }
}

/* ============ FILM GRAIN OVERLAY ============ */
/* film grain: a body pseudo-element, so no DOM node sits on top of the buttons */
body::after { content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0.015; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; /* static grain, calmer, more professional */; }
@keyframes grainShift {
0% { transform: translate(0, 0); }
25% { transform: translate(-3%, 7%); }
50% { transform: translate(5%, -2%); }
75% { transform: translate(-7%, -5%); }
100% { transform: translate(2%, 4%); }
}

/* ============ IMAGE BREATHE ZOOM ============ */
@keyframes imgBreathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
.about-image img, .about-image .perf-img, .about-image .perf-img { animation-delay: -1s; }

/* ============ IMAGE HOVER ENHANCE ============ */
.about-image img, .founder-photo img { filter: grayscale(15%) brightness(0.92); transition: filter 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.about-image:hover img { filter: grayscale(0%) brightness(1); }

/* ============ SECTION GLOW PULSE ============ */
.section-glow { position: relative; }
.section-glow::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 40%; height: 1px; background: linear-gradient(90deg, transparent, rgba(192,192,192,0.08), transparent); opacity: 0; transition: opacity 1s ease, width 1.5s cubic-bezier(0.16, 1, 0.3, 1); }
.section-glow.visible::before { opacity: 1; width: 80%; }

/* ============ CONTACT ============ */
.contact-section { position: relative; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.contact-info { position: relative; z-index: 2; }
.contact-address { margin-bottom: 48px; }
.contact-label { font-size: var(--fs-1); font-weight: 500; letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--gray-400); margin-bottom: 16px; }
.contact-address-text { font-size: var(--fs-3); font-weight: 400; line-height: 1.8; margin-bottom: 32px; }
.contact-address-text a { color: var(--chrome); transition: color 0.3s; }
.contact-address-text a:hover { color: var(--white); }
.contact-description { font-size: var(--fs-3); line-height: 1.8; color: var(--gray-200); margin-bottom: 48px; }
.contact-cta { display: inline-block; }

.contact-map { position: relative; height: 500px; border-radius: 4px; overflow: hidden; border: 1px solid rgba(255,255,255,0.04); }
.contact-map iframe { width: 100%; height: 100%; border: none; filter: grayscale(100%) invert(92%) contrast(83%); }

/* ============ KH CHROME VIDEO ============ */
.video-emblem-section { position: relative; overflow: hidden; background: #000; padding: 60px 0; display: flex; align-items: center; justify-content: center; }
.video-emblem-wrapper { position: relative; display: flex; align-items: center; justify-content: center; max-height: 400px; overflow: hidden; }
.video-emblem { width: 100%; max-width: 250px; display: block; margin: 0 auto; }
.video-emblem-fade-top, .video-emblem-fade-bottom { position: absolute; left: 0; right: 0; height: 120px; pointer-events: none; z-index: 2; }
.video-emblem-fade-top { top: 0; background: linear-gradient(to bottom, #000 0%, transparent 100%); }
.video-emblem-fade-bottom { bottom: 0; background: linear-gradient(to top, #000 0%, transparent 100%); }

/* ============ MEMBER EXPERIENCE ============ */
.member-exp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.member-exp-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 4px; padding: 32px 24px; text-align: center; transition: border-color 0.3s, transform 0.3s; }
.member-exp-card:hover { border-color: rgba(192,192,192,0.15); transform: translateY(-4px); }
.member-exp-icon { color: var(--chrome); margin-bottom: 16px; }
.member-exp-title { font-size: var(--fs-3); font-weight: 600; color: #fff; margin-bottom: 8px; }
.member-exp-desc { font-size: var(--fs-2); color: rgba(255,255,255,0.5); line-height: 1.6; }
@media (max-width: 900px) {
.member-exp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
.member-exp-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
}

/* ============ FOOTER ============ */
.footer { border-top: 1px solid rgba(255,255,255,0.04); padding: 72px 0 36px; position: relative; z-index: 2; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 60px; }
.footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.footer-logo-icon { width: 58px; height: 58px; margin-left: -16px; transition: transform 0.4s; }
.footer-logo-icon:hover { transform: rotate(-10deg) scale(0.95); }
.footer-logo-icon svg { width: 100%; height: 100%; }
.footer-logo-wordmark { height: 16px; display: flex; align-items: center; margin-top: 4px; }
.footer-logo-wordmark svg { height: 100%; width: auto; }
.footer-desc { font-size: var(--fs-2); line-height: 1.7; color: var(--gray-400); }
.footer-section-title { font-size: var(--fs-1); font-weight: 500; letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--white); margin-bottom: 20px; }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a { font-size: var(--fs-2); color: var(--gray-400); transition: color 0.3s; position: relative; }
.footer-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--chrome); transition: width 0.3s; }
.footer-links a:hover { color: var(--white); }
.footer-links a:hover::after { width: 100%; }
.footer-bottom { padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.04); display: flex; justify-content: space-between; align-items: center; }
.footer-copyright { font-size: var(--fs-1); color: var(--muted); }
.footer-social { display: flex; gap: 24px; }
.footer-social a { font-size: var(--fs-3); color: var(--gray-600); transition: color 0.3s; }
.footer-social a:hover { color: var(--chrome); }

/* ============ MODAL / LIGHTBOX ============ */
.modal-overlay { position: fixed; inset: 0; z-index: 9990; background: rgba(0,0,0,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; padding: 40px; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-overlay.active .modal-content { transform: scale(1) translateY(0); }
.modal-content { position: relative; max-width: 640px; width: 100%; max-height: 85vh; overflow-y: auto; transform: scale(0.92) translateY(20px); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.modal-content.gallery-mode { max-width: 90vw; display: flex; align-items: center; justify-content: center; }
.modal-close { position: fixed; top: 24px; right: 24px; z-index: 9991; width: 44px; height: 44px; border: 1px solid rgba(192,192,192,0.3); border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; font-size: var(--fs-4); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.modal-close:hover { border-color: var(--chrome); background: rgba(192,192,192,0.1); }
/* Class card modal */
.modal-class-card { background: var(--gray-900); border: 1px solid rgba(255,255,255,0.06); border-radius: 4px; padding: 56px 48px; text-align: center; }
.modal-class-card .class-series { display: block; font-size: var(--fs-1); font-weight: 400; letter-spacing: var(--track-kicker); color: rgba(255,255,255,0.35); margin-bottom: 24px; }
.modal-class-card .class-title-row { margin-bottom: 24px; }
.modal-class-card .class-title-row img { height: 52px; opacity: 1; }
.modal-class-card .class-title-row::after { display: none; }
.modal-class-card .class-name { font-size: var(--fs-4); letter-spacing: var(--track-ui); }
.modal-class-card .class-desc { font-size: var(--fs-3); line-height: 1.8; color: rgba(255,255,255,0.75); max-height: none; -webkit-line-clamp: unset; display: block; text-align: center; }
/* Gallery lightbox */
.modal-gallery-img { max-width: 90vw; max-height: 85vh; border-radius: 4px; object-fit: contain; }

/* ============ STICKY BOOK CTA ============ */
.sticky-book-cta { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(90px); z-index: 9500; display: inline-flex; align-items: center; gap: 10px; padding: 15px 44px; background: #f4f3f0; color: #111; font-size: var(--fs-1); font-weight: 700; letter-spacing: var(--track-ui); text-transform: uppercase; border: 1px solid rgba(0,0,0,0.15); box-shadow: 0 12px 40px rgba(0,0,0,0.45); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s; opacity: 0; }
.sticky-book-cta.visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.sticky-book-cta:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 60px rgba(255,255,255,0.12); }
.sticky-book-cta .cta-arrow { display: inline-block; margin-left: 8px; transition: transform 0.3s ease; }
.sticky-book-cta:hover .cta-arrow { transform: translateX(3px); }

/* S15: three base rules S10 promoted out of style attributes. They were written at the
   end of the file, below the responsive layer that narrows them, so that layer needed
   to be seen. They are base rules and now sit above it. */
.client-logos-track img { height: 65px; width: auto; opacity: 0.5; filter: brightness(0) invert(1); }
.clinic-video-wrap { margin-top: 40px; margin-bottom: 40px; text-align: center; }
.clinic-tagline { text-align: center; margin-top: 48px; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--chrome); }

/* ============ RESOLVED: RESPONSIVE (from RESPONSIVE) ============ */
.scroll-progress { position:fixed; top:0; left:0; height:2px; background:linear-gradient(90deg, rgba(192,192,192,0.2), rgba(255,255,255,0.8), rgba(192,192,192,0.4)); z-index:10000; width:0%; transition:width 0.08s linear; box-shadow:0 0 12px rgba(255,255,255,0.15), 0 0 4px rgba(192,192,192,0.3); }
@media (max-width:1024px) {
.about-grid, .perf-layout { grid-template-columns:1fr; gap:24px; }
.perf-intro, .perf-video-wrap, .perf-features-wrap { grid-column:1; grid-row:auto; }
.perf-layout > .perf-intro { order:1; }
.perf-layout > .perf-video-wrap { order:2; }
.perf-layout > .perf-features-wrap { order:3; }
.about-stats { grid-template-columns:1fr; }
.classes-grid, .challenge-grid, .founders-grid, .services-row { grid-template-columns:repeat(2, 1fr); }
.footer-grid { grid-template-columns:1fr 1fr; }
.contact-grid { grid-template-columns:1fr; gap:60px; }
.gallery-item { flex:0 0 280px; width:280px; height:200px; }
.gallery-item img { width:280px; height:200px; }
}
@media (max-width:768px) {
.section-index, .hero-grid-overlay, .floating-hud { display:none; }
body::after { display:none; }
.type-interstitial { padding:16px 0; }
.type-interstitial-text { font-size: var(--fs-6); padding:12px 0; }
.section-divider { margin:0; display:none; }
.hero-content { display:flex; flex-direction:column; justify-content:center; padding-bottom:20px; }
.hero-label, .hero-title { margin-bottom:16px; }
.hero-subtitle { margin-bottom:24px; font-size: var(--fs-2); }
.hero-buttons { gap:10px; flex-direction:column; align-items:stretch; }
.hero-buttons .btn { padding-left:24px; padding-right:24px; font-size: var(--fs-1); text-align:center; width:100%; }
.hero-scroll span { font-size: var(--fs-1); }
.scroll-line { height:28px; }
.hero-watermark { display:none; }
.nav-links { gap:16px; font-size: var(--fs-1); display:none; }
.nav-toggle { display:flex; }
.nav-links.active { display:flex; position:absolute; top:60px; left:-12px; right:-12px; flex-direction:column; background:rgba(12,12,12,0.75); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); padding:24px 20px; gap:14px; border-radius:0 0 4px 4px; border-top:1px solid rgba(255,255,255,0.04); }
.classes-grid { grid-template-columns:repeat(2, 1fr); }
.challenge-grid { grid-template-columns:1fr; gap:12px; }
.services-row { grid-template-columns:1fr; }
.testimonial-showcase { min-height:auto; }
.testimonial-split { grid-template-columns:1fr; gap:32px; }
.testimonial-img-wrap { aspect-ratio:4/3; max-height:280px; }
.testimonial-nav-btn { display:none; }
.class-series-group { margin-bottom:12px; }
.class-series-heading { cursor:pointer; position:relative; margin-bottom:0; padding-right:28px; user-select:none; -webkit-tap-highlight-color:transparent; }
.class-series-heading::after { content:'+'; position:absolute; right:4px; top:50%; transform:translateY(-60%); font-size: var(--fs-4); font-weight:300; color:var(--chrome); transition:transform 0.3s ease; }
.class-series-group.expanded .class-series-heading::after { content:'\2212'; }
.class-series-body { max-height:0; overflow:hidden; opacity:0; transition:max-height 0.45s ease, opacity 0.3s ease, margin 0.3s ease; margin-top:0; }
.class-series-group.expanded .class-series-body { max-height:4000px; opacity:1; margin-top:24px; }
.class-series-group .classes-grid { margin-bottom:0; }
.founders-scroller { position:relative; }
.founders-grid { display:flex; flex-wrap:nowrap; grid-template-columns:none; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:20px; padding:0 4px 8px 4px; margin-left:-4px; margin-right:-4px; margin-bottom:20px; }
.founders-grid::-webkit-scrollbar { display:none; }
.founders-grid .founder-card { flex:0 0 62%; max-width:62%; scroll-snap-align:center; }
.founders-nav { display:flex; justify-content:center; gap:16px; margin-bottom:60px; }
.schedule-item { grid-template-columns:80px 55px 1fr 100px auto; font-size: var(--fs-1); padding:12px 14px; margin-bottom:4px; }
.perf-heading { white-space:nowrap; }
.perf-heading-br { display:none; }
.perf-heading .text-chrome::before { content:' '; }
#team .founders-header { text-align:left; }
#team .founders-header .section-heading-line { margin-left:0; margin-right:auto; }
#team .founders-header p { margin-left:0; margin-right:0; max-width:100%; }
#clinic .clinic-top { text-align:left; margin-left:0; margin-right:0; max-width:100%; }
#clinic .clinic-top .section-heading-line { margin-left:0; margin-right:auto; }
#schedule .schedule-book-btn { display:block; width:100%; text-align:center; box-sizing:border-box; padding:12px 24px; font-size: var(--fs-1); }
.schedule-tabs { gap:4px; flex-wrap:nowrap; width:100%; justify-content:space-between; margin-bottom:20px; }
.schedule-tab[data-day="all"] { display:none; }
.schedule-tab { flex:1 1 0; min-width:0; padding:8px 0; font-size: var(--fs-1); text-align:center; }
.footer-grid { grid-template-columns:1fr 1fr 1fr; gap:20px 12px; }
.footer-grid > div:first-child { grid-column:1 / -1; }
.footer-section-title { font-size: var(--fs-1); }
.footer-links a, .footer-links p { font-size: var(--fs-1); }
.footer-bottom { flex-direction:column; gap:20px; text-align:center; }
.contact-grid { grid-template-columns:1fr; gap:24px; }
.about-image { aspect-ratio:16/10; margin-bottom:16px; }
.reveal.visible, .reveal-left.visible, .reveal-right.visible, .reveal-blur.visible { opacity:1; transform:none; }
.stagger-children > * { transition:opacity 0.8s ease; transform:none; }
.client-logos-track img { transform:scale(0.875); height:54px; }
.perf-img.autoplay-video, #clinic .autoplay-video { border-radius:0; aspect-ratio:16/9; object-fit:cover; width:100%; max-width:100%; }
.perf-video-wrap { border-radius:0; aspect-ratio:16/9; margin-bottom:12px; }
.perf-features { margin-top:16px; gap:12px; }
.perf-video-wrap video { border-radius:0; }
.service-name { font-size: var(--fs-3); font-weight:700; letter-spacing: var(--track-tight); text-transform:none; }
.clinic-tagline { font-size: var(--fs-1); margin-top:28px; }
.staff-grid { width:100%; max-width:100%; box-sizing:border-box; overflow:hidden; display:flex; flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:12px; padding:0 4px 8px; grid-template-columns:none; }
.staff-card { height:auto; min-width:0; width:100%; overflow:hidden; box-sizing:border-box; flex:0 0 56%; max-width:56%; scroll-snap-align:start; min-height:275px; }
.staff-card-inner { height:auto; min-height:240px; min-width:0; width:100%; transform:none; transform-style:flat; box-sizing:border-box; }
.staff-card:hover .staff-card-inner { transform:none; }
.staff-card-front { position:relative; padding:16px 8px; backface-visibility:visible; min-width:0; }
.staff-card-back { position:relative; transform:none; display:none; padding:16px 10px; backface-visibility:visible; overflow-y:auto; min-width:0; }
.staff-card.flipped .staff-card-front { display:none; }
.staff-card.flipped .staff-card-back { display:flex; transform:none; }
.staff-bio { font-size: var(--fs-1); line-height:1.5; }
.staff-flip-hint { font-size: var(--fs-1); visibility:hidden; position:relative; }
.staff-flip-hint::after { content:'TAP TO READ BIO'; visibility:visible; position:absolute; left:0; right:0; text-align:center; }
.staff-scroll-hint { display:block; }
.sticky-book-cta-legacy-marker { right:auto; left:50%; transform:translateX(-50%) translateY(20px); bottom:16px; padding:12px 22px; font-size: var(--fs-1); }
.sticky-book-cta.visible { transform:translateX(-50%) translateY(0); }
.class-info-strip { flex-wrap:wrap; padding:24px 0; gap:16px; }
.class-info-icon { width:56px; height:56px; border-radius:4px; }
.class-info-icon svg { width:26px; height:26px; }
.class-info-value { font-size: var(--fs-4); }
.class-info-label { font-size: var(--fs-1); }
.section-heading-line { margin-bottom:12px; }
.founders-header, [style*="text-align:center"][style*="margin-bottom:56px"] { margin-bottom:28px; }
.about-stats { gap:8px; }
.stat-card { padding:14px 12px; }
.about-content { gap:24px; }
.clinic-video-wrap { margin-top:24px; margin-bottom:24px; }
.clinic-cards-grid { gap:12px; }
.service-card { padding:20px 16px; }
.schedule-day { margin-bottom:16px; }
.pricing-lane { padding:24px 20px 20px; }
.pricing-item { padding:10px 0; }
.pricing-lane-cta { padding:12px 24px; margin-top:12px; }
.pricing-bonus { padding:16px 20px; margin-top:24px; }
.testimonial-content { padding:24px 20px; }
.testimonial-dots { margin-top:16px; }
.member-exp-grid { grid-template-columns:repeat(2, 1fr); gap:10px; max-width:none; }
.member-exp-card { padding:20px 14px; }
.member-exp-icon svg { width:28px; height:28px; }
.member-exp-title { font-size: var(--fs-2); margin-bottom:4px; }
.member-exp-desc { font-size: var(--fs-1); }
.corporate-benefits-grid { grid-template-columns:repeat(2, 1fr); gap:10px; max-width:none; }
.corporate-benefit-card { padding:20px 14px; }
.corporate-benefit-icon svg { width:28px; height:28px; }
.corporate-benefit-title { font-size: var(--fs-2); margin-bottom:4px; }
.corporate-benefit-desc { font-size: var(--fs-1); }
.staff-grid::-webkit-scrollbar { display:none; }
.staff-photo { width:112px; height:131px; margin-bottom:10px; }
.staff-name { font-size: var(--fs-2); }
.staff-role { font-size: var(--fs-1); }
.perf-feature { padding:14px; }
.gallery-item { flex:0 0 180px; width:180px; height:120px; }
.gallery-item img { width:180px; height:120px; }
.footer { padding:40px 0 24px; }
.contact-map { height:280px; }
.challenge-card { padding:20px 16px; }
.gallery-marquee-section .container + div { margin-top:24px; }
#schedule .display-md { margin-bottom:24px; }
}
@media (max-width:480px) {
.hero-label { margin-bottom:12px; font-size: var(--fs-1); }
.hero-title { margin-bottom:12px; }
.hero-subtitle { margin-bottom:20px; font-size: var(--fs-2); line-height:1.5; }
.hero-buttons { gap:8px; }
.hero-buttons .btn { padding-left:20px; padding-right:20px; font-size: var(--fs-1); }
.hero-scroll { margin-top:40px; }
.scroll-line { height:22px; }
.nav-logo { gap:4px; }
.display-xl { font-size: var(--fs-6); }
.display-lg { font-size: var(--fs-5); }
.about-stats { gap:8px; }
.stat-card { padding:12px; }
.section { padding:var(--section-pad) 0; }
.type-interstitial { padding:6px 0; }
.classes-grid { gap:1px; grid-template-columns:1fr; }
.services-row { gap:8px; }
.challenge-tiers { grid-template-columns:1fr; }
.class-card { padding:22px 16px; }
.schedule-item { grid-template-columns:70px 50px 1fr; font-size: var(--fs-1); padding:8px 10px; }
.schedule-coach, .schedule-spots { display:none; }
.schedule-class { white-space:nowrap; }
.gallery-item { flex:0 0 150px; width:150px; height:100px; }
.gallery-item img { width:150px; height:100px; }
.footer-social { gap:12px; }
.contact-map { height:240px; }
.testimonial-img-wrap { max-height:240px; }
.testimonial-content .body-lg { font-size: var(--fs-2); }
.staff-card { flex:0 0 50%; max-width:50%; min-height:250px; }
.staff-photo { width:90px; height:105px; }
.member-exp-card, .corporate-benefit-card { padding:14px 10px; }
.member-exp-title, .corporate-benefit-title { font-size: var(--fs-1); }
.member-exp-desc, .corporate-benefit-desc { font-size: var(--fs-1); line-height:1.4; }
.pricing-lane { padding:18px 16px 16px; }
.pricing-lane-title { font-size: var(--fs-3); }
.pricing-item-name { font-size: var(--fs-2); }
.pricing-item-price { font-size: var(--fs-3); }
.pricing-lane-cta { padding:10px 20px; font-size: var(--fs-1); }
}

/* ============ White background override: Clinic + Testimonials ============ */
#clinic.bg-black, #testimonials.bg-black { background: #ffffff; }
#clinic .text-white, #testimonials > .container > h2.text-white { color: #0a0a0a; }
#clinic .text-chrome { color: #6b6b6b; }
#clinic p { color: #2a2a2a; }
#clinic .clinic-top p { color: #2a2a2a; }
/* Solid heading lines (like other sections) on white bg */
#clinic .section-heading-line, #testimonials > .container > .section-heading-line { background: #0a0a0a; }
#clinic > .section-index, #testimonials > .section-index { color: var(--muted-on-light); }
#clinic .sr-only, #testimonials .sr-only { color: #0a0a0a; }
#clinic .service-card { background: #f5f5f5; border-color: rgba(0,0,0,0.08); }
#clinic .service-card .service-icon, #clinic .service-card .service-icon svg { color: #0a0a0a; stroke: #0a0a0a; }
#clinic .service-card .service-name { color: #0a0a0a; }
#clinic .service-card .service-desc { color: #4a4a4a; }
#clinic .clinic-tagline { color: #6b6b6b; }
#clinic .btn-primary { background: #1a1a1c; color: #ffffff; border-color: #1a1a1c; }
#clinic .btn-primary:hover { background: #000000; color: #ffffff; border-color: #000000; }

/* Testimonials card, solid black card on white section bg */
#testimonials .testimonial-showcase { background: #000000; border: 1px solid rgba(192,192,192,0.12); }
#testimonials .testimonial-img-wrap { border: 1px solid rgba(192,192,192,0.35); }
#testimonials .testimonial-content .body-lg, #testimonials .testimonial-content p { color: #e8e8e8; }
#testimonials .testimonial-content > div[style*="font-weight: 700"] { color: #ffffff; }
#testimonials .testimonial-content > div[style*="color: var(--chrome)"] { color: var(--chrome); }
#testimonials .testimonial-quote-mark { color: var(--chrome); opacity: 0.35; }

/* ============ UPCOMING EVENT SECTION ============ */
.event-section { position: relative; overflow: hidden; }
.event-section-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.event-section-label { font-size: var(--fs-1); font-weight: 500; letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--chrome); margin-bottom: 12px; }
.event-section-title { font-size: var(--fs-5); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-tight); line-height: 1.1; color: #fff; margin-bottom: 36px; }
.event-card { position: relative; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.1); padding: 48px 40px; text-align: left; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.event-card::before { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: rgba(192,192,192,0.4); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.event-card:hover::before { width: 60%; left: 20%; }
.event-card:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.18); }
.event-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.event-card-left { display: flex; flex-direction: column; gap: 20px; }
.event-card-name { font-size: var(--fs-4); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-tight); color: #fff; line-height: 1.2; }
.event-card-details { display: flex; flex-direction: column; gap: 10px; }
.event-card-detail { display: flex; align-items: center; gap: 10px; font-size: var(--fs-2); color: rgba(255,255,255,0.6); font-weight: 300; }
.event-card-detail-icon { flex-shrink: 0; width: 16px; height: 16px; opacity: 0.45; }
.event-card-right { display: flex; flex-direction: column; gap: 24px; }
.event-card-desc { font-size: var(--fs-2); line-height: 1.7; color: rgba(255,255,255,0.5); font-weight: 300; }
.event-card-cta { display: flex; }
.event-card-cta .btn { font-size: var(--fs-1); }
@media (max-width: 768px) {
.event-card-grid { grid-template-columns: 1fr; gap: 24px; }
.event-card { padding: 32px 24px; }
}

/* S15: the hero subtitle carried this clamp in a style attribute, where no stylesheet rule
   could reach it. As a class it sits between the mobile steps above and the 1200 px step
   below, so each still wins the widths it owns. */
.hs-clamp { font-size: clamp(1rem, 1.5vw, 1.25rem); }

/* ============ LARGE DESKTOP (1200px+), SCALE UP ============ */
@media (min-width: 1200px) {
/* --side-pad for this breakpoint is defined in tokens.css (S01); the --section-pad override never won */

/* --- NAV --- */
.nav-links a { font-size: var(--fs-1); }
.nav-cta { padding-left: 30px; padding-right: 30px; font-size: var(--fs-1); }

/* --- SECTION LABELS & SUBHEADERS --- */
.section-index { font-size: var(--fs-1); }
.section-heading-line { margin-bottom: 20px; }

/* --- HERO --- */
.hero-subtitle { font-size: var(--fs-4); }
.hero-buttons .btn { font-size: var(--fs-2); padding-left: 44px; padding-right: 44px; }
.hero-scroll span { font-size: var(--fs-1); }

/* --- ABOUT --- */
.about-label { font-size: var(--fs-1); }

/* --- CLASSES --- */
.class-card { padding: 52px 32px 44px; }
.class-title { font-size: var(--fs-4); }
.class-desc { font-size: var(--fs-3); line-height: 1.7; }
.class-card .btn { font-size: var(--fs-2); padding-left: 36px; padding-right: 36px; }
.class-badge { font-size: var(--fs-1); }
.class-series-label { font-size: var(--fs-1); }

/* --- EXPECT STRIP --- */
.expect-label { font-size: var(--fs-3); }
.expect-sublabel { font-size: var(--fs-2); }

/* --- CLINIC --- */
.clinic-title { font-size: var(--fs-4); }
.clinic-text { font-size: var(--fs-3); }

/* --- SCHEDULE --- */
.schedule-day-name { font-size: var(--fs-4); }
.schedule-class-name { font-size: var(--fs-3); }
.schedule-class-time { font-size: var(--fs-3); }
.schedule-item .btn { font-size: var(--fs-1); }

/* --- PRICING --- */
.pricing-lane { padding: 44px 32px; }
.pricing-lane-label { font-size: var(--fs-1); }
.pricing-lane-title { font-size: var(--fs-4); }
.pricing-item-name { font-size: var(--fs-4); }
.pricing-item-price { font-size: var(--fs-4); }
.pricing-item-note { font-size: var(--fs-2); }
.pricing-lane-cta { font-size: var(--fs-2); padding: 18px 36px; }
.pricing-period { font-size: var(--fs-2); }
.pricing-lane-badge { font-size: var(--fs-1); }

/* --- BONUS OFFER --- */
.bonus-offer-title { font-size: var(--fs-4); }
.bonus-offer-desc { font-size: var(--fs-3); }

/* --- TESTIMONIALS --- */
.testimonial-content .body-lg { font-size: var(--fs-4); }
.testimonial-name { font-size: var(--fs-3); }
.testimonial-role { font-size: var(--fs-2); }

/* --- MEMBER EXPERIENCE --- */
.member-exp-card { padding: 44px 28px; }
.member-exp-title { font-size: var(--fs-4); }
.member-exp-desc { font-size: var(--fs-3); }

/* --- PERFORMANCE CENTRE --- */
.perf-title { font-size: var(--fs-4); }
.perf-text { font-size: var(--fs-3); }
.perf-stat-num { font-size: var(--fs-4); }
.perf-stat-label { font-size: var(--fs-2); }

/* --- CORPORATE --- */
.corporate-benefit-card { padding: 48px 32px; }
.corporate-benefit-title { font-size: var(--fs-4); }
.corporate-benefit-desc { font-size: var(--fs-3); }

/* --- TEAM --- */
.staff-card { min-height: 440px; }
.staff-name { font-size: var(--fs-4); }
.staff-role { font-size: var(--fs-2); }
.staff-bio { font-size: var(--fs-3); }
.staff-flip-hint { font-size: var(--fs-1); }

/* --- INTERSTITIALS --- */
.type-interstitial-text { font-size: var(--fs-5); }

/* --- CONTACT --- */
.contact-heading { font-size: var(--fs-4); }
.contact-text { font-size: var(--fs-3); }
.contact-link { font-size: var(--fs-3); }

/* --- FOOTER --- */
.footer-section-title { font-size: var(--fs-2); }
.footer-links a, .footer-contact-item { font-size: var(--fs-3); }
.footer-bottom { font-size: var(--fs-2); }

/* --- GLOBAL SMALL TEXT BUMP --- */
.marquee-track span { font-size: var(--fs-1); }
}

/* ============ BSPORT BOOKING OVERLAY (#kh-book-overlay) ============ */
#kh-book-overlay { position:fixed; inset:0; z-index:100000; display:none; background:rgba(0,0,0,.85); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); cursor:auto; }
#kh-book-overlay.kh-open { display:block; }
#kh-book-overlay * { cursor:auto; }
#kh-book-shell { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(1180px,94vw); height:min(880px,90vh); background:#050505; border:1px solid rgba(255,255,255,.14); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 90px rgba(0,0,0,.7); }
#kh-book-bar { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid rgba(255,255,255,.1); background:#000; }
#kh-book-bar span { font-family:var(--font-brand); color:#fff; font-size: var(--fs-1); font-weight:700; letter-spacing: var(--track-ui); text-transform:uppercase; }
#kh-book-close { background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff; width:34px; height:34px; border-radius:50%; font-size: var(--fs-3); line-height:1; cursor:pointer; transition:background .2s,border-color .2s; }
#kh-book-close:hover { background:#fff; color:#000; border-color:#fff; }
#kh-book-body { flex:1 1 auto; background:#050505; position:relative; }
#kh-bsport-frame { width:100%; height:100%; border:0; display:block; }
#kh-book-load { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#8a8a8a; font-family:var(--font-brand); font-size: var(--fs-1); letter-spacing: var(--track-ui); text-transform:uppercase; background:#fff; }
html.kh-noscroll,body.kh-noscroll { overflow:hidden; }
@media(max-width:640px) {#kh-book-shell { width:100vw; height:100vh; border-radius:0; border:0; }}

/* ============ S05: MOBILE HERO POSTER, 44 PX HIT AREAS, ONE ROW OF CHIPS ============ */

/* The hero poster is a real image at every width. S09 layers the desktop video over it. */
.hero-poster img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* S09: the video starts transparent and fades in over the poster on its first playing event,
   so a slow or failed fetch leaves the poster on screen instead of a black box. */
.hero-bg-video { opacity:0; transition:opacity .5s; }
.hero-bg-video.is-playing { opacity:1; }
/* S09: the emblem carries width and height attributes so its box is reserved before the poster
   arrives. Those attributes are presentational hints on a video, so height has to be released
   back to the aspect ratio or the loop is stretched to 1080 px and clipped by its wrapper. */
.video-emblem { height:auto; }

/* --- 44 px hit areas --- */
.nav-links a:not(.btn) { padding:12px 4px; min-height:44px; display:inline-flex; align-items:center; }
.nav-links a:not(.btn)::after { top:calc(50% + 0.62em); bottom:auto; }
.nav-toggle { width:44px; height:44px; }
.t-dot, .t-dot.active { width:44px; height:44px; background:none; border:none; padding:0; position:relative; }
.t-dot::after { content:''; position:absolute; left:2px; right:2px; top:50%; height:3px; background:rgba(192,192,192,.2); }
.t-dot:hover { background:none; }
.t-dot:hover::after { background:rgba(192,192,192,.5); }
.t-dot.active::after { background:#fff; }
/* The testimonials section is a light band, so its bars invert (was on .t-dot itself). */
#testimonials .t-dot::after { background:rgba(0,0,0,.2); }
#testimonials .t-dot:hover::after { background:rgba(0,0,0,.45); }
#testimonials .t-dot.active::after { background:#0a0a0a; }
.footer-links a { display:inline-flex; align-items:center; padding:10px 0; min-height:44px; }
.footer-links a::after { top:calc(50% + 0.82em); bottom:auto; }
.footer-social a { display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; }
.cx-book, .svc-book, .tm-book-btn, .read-more { display:inline-flex; min-height:44px; align-items:center; }
.khj-tab { min-height:var(--kh-btn-h); }
/* Links that sit inside a sentence: the hit area grows, the line box does not. */
.bsport-note a, .contact-address-text a, .pr-enquiry a { display:inline-block; padding:15px 2px; margin:-15px 0; }
/* The corporate honeypot is parked off screen. Hide it so it is neither tabbable nor a 19 px target. */
:where(body.p-corporate) .co-hp { visibility:hidden; }
/* Testimonial arrows stay inside the viewport below 1200 px, where the side padding is 5vw. */
@media (max-width:1199px) {
.t-prev { left:-16px; }
.t-next { right:-16px; }
}

/* --- Filter chips in one horizontal row --- */
.cx-bar, .filter-row { display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px; }
.cx-bar::-webkit-scrollbar, .filter-row::-webkit-scrollbar { display:none; }
.cx-pill, .filter-btn { flex:0 0 auto; min-height:40px; padding:0 16px; font-size:var(--fs-1); display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; }

/* --- Below 768 px: static poster with a deeper scrim, two lines of copy, one button --- */
@media (max-width:767px) {
.hero-bg-video { display:none; }
.hero-overlay { background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.78) 100%); }
.hero-label, .hero-subtitle, .hero-scroll, .hero-photo-card, .hero-watermark { display:none; }
.hero-buttons .btn-outline:not(.nav-cta):not(.sticky-book-cta):not(.cx-pill) { display:none; }
.hero { min-height:0; padding:calc(var(--nav-h) + 96px) 0 96px; }
.hero-content { min-height:0; }
.hero-title { font-size:var(--fs-7); }
}

/* ============ KH_BUTTON_HEIGHT_RULE ============ */
/* One height for every button on the site: 44px on desktop, 40px on phones (--kh-btn-h in
   tokens.css). Chips (cx-pill, filter-btn), segment toggles and accordion heads are not
   buttons and keep their own size. The rule carries no priority flag: the padding overrides
   fight were deleted in S06. */
.btn, .nav-cta, .kh-dock .khj-tab, .kh-dock .sticky-book-cta, .khj-go, .newsletter-btn, .tm-book-btn, .event-card-cta .btn { height:var(--kh-btn-h); min-height:var(--kh-btn-h); padding-top:0; padding-bottom:0; line-height:1.1; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; white-space:nowrap; }
.kh-dock .khj-tab .khj-dot { width:6px; height:6px; }

/* ============ S07: ACCESSIBILITY ============ */

/* Skip link: off screen until it takes focus, then the first stop on every page. */
.skip-link { position:absolute; left:16px; top:-64px; z-index:20000; display:inline-flex; align-items:center; min-height:44px; padding:0 16px; background:#fff; color:#000; font-size:var(--fs-1); letter-spacing:var(--track-ui); text-transform:uppercase; }
.skip-link:focus { top:16px; }
#main:focus { outline:none; }
#main:focus-visible { outline:2px solid #fff; outline-offset:-4px; }

/* One visible focus ring for the whole site. .btn clips its ripple with overflow:hidden,
   so its ring sits inside the box. */
:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.btn:focus-visible { outline-offset:-3px; }
/* Measured limitation: Chrome moves focus into an iframe's own document, so the iframe
   element matches neither :focus nor :focus-within here. The two embedded third party
   frames (the bsport schedule and the Google map) are the only Tab stops this stylesheet
   cannot draw a ring on; each frame draws its own. */
/* Light bands need a dark ring, a white one would be invisible on them. */
:where(body.p-clinic) .svc-head:focus-visible, :where(body.p-clinic) .svc-book:focus-visible, #testimonials :focus-visible { outline-color:#0a0a0a; }

/* The hidden attribute is what takes collapsed accordion links out of the Tab order,
   so no author display rule may outrank it. */
[hidden] { display:none !important; }

/* The lightbox hid itself with opacity alone, so its close button sat in the Tab order
   of every page while the overlay was closed. */
.modal-overlay:not(.active) { visibility:hidden; }

/* Accordion heads are headings now; the heading must not change how they look. */
.acc-h { margin:0; font:inherit; color:inherit; letter-spacing:inherit; text-transform:none; }

/* Headings that name a section the design leaves unlabelled, for screen readers only. */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Closed menu leaves the Tab order at every width that shows the toggle, not only below 768. */
@media (max-width:1024px) {
.nav-links { display:none; }
.nav-links.active { display:flex; position:fixed; inset:0; height:100dvh; flex-direction:column; align-items:center; justify-content:center; background:#050505; z-index:9998; }
}
@media (min-width:1025px) {
.nav-toggle { display:none; }
}

/* The one reduced-motion block for the site. It covers the reveals, the marquees and the
   smooth scroll, not just the cosmetic pulses the per-page blocks used to cover. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
.reveal, .reveal-up, .hero-title-line { opacity:1; transform:none; clip-path:none; }
.marquee-track, .client-logos-track, .gallery-marquee-row { animation:none; transform:none; }
:where(body.p-index) .hero-photo-card, :where(body.p-index) .hero-photo-card.khfloat, :where(body.p-index) .hero-photo-card img { animation:none; clip-path:none; opacity:1; }
}

/* ============ S10: IMAGES ============ */
/* Every raster image on the seven pages is now a <picture> with an AVIF source and a JPEG
   fallback. The wrapper must not become a box: display:contents leaves the <img> as the flex
   or grid item, and as the percentage-sized child, that the slot CSS above already expects.
   .hero-poster is the one <picture> that is positioned in its own right, so it keeps its box. */
picture:not(.hero-poster) { display: contents; }

/* The three declarations the clinic banner and the performance frame carried inline. */
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.clinic-banner { width: 100%; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; position: relative; }
.clinic-banner img { filter: brightness(0.85); }
.frame-hair { position: absolute; inset: 0; border: 1px solid rgba(192,192,192,0.08); border-radius: 4px; }
:where(body.p-performance) .perf-img img { border-radius: 20px; filter: brightness(0.85); }

/* Logo ticker. The 48px gap is read back by the ticker in kh.js, keep the two in step. */
.client-logos-track { display: flex; gap: 48px; align-items: center; width: max-content; }
.footer-social img { height: 20px; filter: brightness(0) invert(0.4); transition: filter 0.3s; }

/* Blocks that carried these same values in a style attribute before S10. */
/* S15: four more, off the index, classes and performance pages. Each declaration below was
   in a style attribute that a responsive rule had to fight with. */
.shl-c { margin: 0 auto 24px; }
.ctr-56 { text-align: center; margin-bottom: 56px; }
.mt-48 { margin-top: 48px; }
.sec-rel { position: relative; }
.sec-rel-clip { position: relative; overflow: hidden; }
:where(body.p-clinic, body.p-performance) .page-hero > .container { position: relative; z-index: 2; }
.contact-grid { margin-top: 64px; }
.footer-hours { font-size: 0.85rem; color: var(--gray-400); margin-top: 16px; }
.khj-done .khj-sub { margin-bottom: 0; }

/* ============ S12: BLOG INDEX AND POSTS ============ */
/* blog.html and every post run on this shell: the shared nav, page hero, buttons and
   footer above, plus the card grid, the chip row and the post body below. Sizes come from
   the --fs-* steps, tracking from the --track-* values, muted text from --muted, so the
   blog reads in the same voice as the other seven pages. */

/* --- the card grid --- */
.articles-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.article-count { font-size: var(--fs-1); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.blog-filters { margin-bottom: 40px; }
.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.article-card { display: flex; flex-direction: column; background: var(--gray-900); border: 1px solid rgba(255,255,255,0.08); transition: border-color 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.article-card:hover { border-color: rgba(255,255,255,0.22); transform: translateY(-3px); }
.article-card-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--gray-800); }
.article-card-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.85); transition: filter 0.5s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.article-card:hover .article-card-img img { filter: grayscale(0) brightness(1); transform: scale(1.04); }
.article-card-body { display: flex; flex-direction: column; gap: 14px; padding: 24px; flex: 1; }
.article-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: var(--fs-1); letter-spacing: var(--track-ui); }
.article-card-tag { color: #fff; text-transform: uppercase; }
/* The date is never upper-cased: "June 22, 2026" is the one date format the site uses and
   text-transform would rewrite it in every reader, and in innerText, as JUNE 22, 2026. */
.article-card-date { color: var(--muted); }
.article-card-title { font-size: var(--fs-4); font-weight: 600; line-height: 1.35; letter-spacing: var(--track-tight); }
.article-card-title a { display: block; min-height: 44px; color: #fff; }
.article-card-title a:hover { color: var(--chrome); }
.article-card-excerpt { font-size: var(--fs-2); line-height: 1.75; color: rgba(255,255,255,0.78); }
.read-more { align-self: flex-start; margin-top: auto; font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--track-ui); text-transform: uppercase; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.35); }
.read-more:hover { border-bottom-color: #fff; }

/* --- the chips: one row, scrolled sideways below the fold width (S05 owns the layout) --- */
.filter-btn { background: transparent; border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.78); font-family: var(--font-brand); font-weight: 500; letter-spacing: var(--track-ui); text-transform: uppercase; transition: color 0.3s, border-color 0.3s, background 0.3s; }
.filter-btn:hover { color: #fff; border-color: rgba(255,255,255,0.45); }
.filter-btn[aria-pressed="true"] { background: #fff; border-color: #fff; color: #000; }

/* --- the pager. Hidden while one page holds every card, so it costs nothing today and
       works the moment the eleventh post lands. --- */
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 56px; }
.pager-btn { min-height: 44px; min-width: 44px; padding: 0 20px; background: transparent; border: 1px solid rgba(255,255,255,0.22); color: #fff; font-family: var(--font-brand); font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--track-ui); text-transform: uppercase; transition: border-color 0.3s, color 0.3s; }
.pager-btn:hover:not([disabled]) { border-color: #fff; }
/* disabled reads as muted text, not as a faded box: --muted still clears 4.5:1 on black. */
.pager-btn[disabled] { color: var(--muted); border-color: rgba(255,255,255,0.12); cursor: default; }
.pager-info { font-size: var(--fs-1); letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--muted); }

@media (max-width: 1099px) { .articles-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 699px) { .articles-grid { grid-template-columns: 1fr; } .articles-head { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* --- a post --- */
.post { padding-top: calc(var(--nav-h) + 40px); }
.post-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-1); letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--muted); }
.post-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255,255,255,0.78); }
.post-crumbs a:hover { color: #fff; }
.post-crumbs .post-crumb-here { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-tag { display: inline-flex; align-items: center; min-height: 32px; margin-top: 8px; padding: 0 12px; border: 1px solid rgba(255,255,255,0.22); font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--track-ui); text-transform: uppercase; color: #fff; }
.post-title { margin-top: 20px; max-width: 900px; font-size: var(--fs-5); font-weight: 700; line-height: 1.12; letter-spacing: var(--track-tight); color: #fff; }
.post-meta { margin-top: 14px; font-size: var(--fs-1); letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--muted); }
.post-hero { max-width: 900px; margin-top: 36px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--gray-800); }
.post-hero img { width: 100%; height: 100%; object-fit: cover; }
.post-body { max-width: 720px; margin-top: 48px; font-size: var(--fs-3); line-height: 1.8; color: rgba(255,255,255,0.82); }
.post-body p { margin-bottom: 24px; }
.post-body h2 { margin: 48px 0 16px; font-size: var(--fs-5); font-weight: 600; line-height: 1.2; letter-spacing: var(--track-tight); color: #fff; }
.post-body h3 { margin: 32px 0 12px; font-size: var(--fs-4); font-weight: 600; letter-spacing: var(--track-tight); color: #fff; }
.post-body ul, .post-body ol { margin: 0 0 24px 22px; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin-bottom: 10px; }
.post-body strong { color: #fff; font-weight: 600; }
/* An inline link keeps its line box and still answers a 44 px tap: the padding grows the
   hit area and the negative margin gives the height back to the paragraph. */
.post-body a { display: inline-block; padding: 11px 2px; margin: -11px 0; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.4); }
.post-body a:hover { border-bottom-color: #fff; }
.post-cta { max-width: 720px; margin-top: 56px; padding: 32px; background: var(--gray-900); border: 1px solid rgba(255,255,255,0.12); }
.post-cta h2 { font-size: var(--fs-4); font-weight: 600; letter-spacing: var(--track-tight); color: #fff; }
.post-cta p { margin: 12px 0 20px; font-size: var(--fs-2); line-height: 1.7; color: rgba(255,255,255,0.78); }
.post-related { max-width: 720px; margin: 64px 0 var(--section-pad); }
.post-related h2 { font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); }
.post-related a { display: flex; align-items: center; min-height: 44px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: var(--fs-3); color: rgba(255,255,255,0.82); }
.post-related a:first-of-type { border-top: 1px solid rgba(255,255,255,0.1); }
.post-related a:hover { color: #fff; }
@media (max-width: 767px) { .post-cta { padding: 24px; } .post-body { margin-top: 36px; } }

/* ============ S15: ORDER-RESOLVED OVERRIDES ============ */
/* The last four groups that only ever won because they carried. Each one is a
   genuine override of a rule written above it, so it belongs at the bottom of the file where
   order decides. Where the rule it has to beat is a compound or a hover selector, the beaten
   selector is repeated here with the value it already renders, rather than a flag. */

/* Mobile contact columns. Moved verbatim from its old place above the responsive layer. */
@media (max-width: 768px) {
.contact-info { display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.35fr); gap:22px 18px; align-items:start; text-align:left; }
.contact-address { grid-column:1; margin:0; text-align:left; }
.contact-label { margin-bottom:10px; font-size: var(--fs-1); letter-spacing: var(--track-kicker); }
.contact-address p,.contact-address div,.contact-address a { font-size: var(--fs-2); line-height:1.52; text-align:left; margin:0 0 2px; overflow-wrap:anywhere; word-break:break-word; }
.contact-description { grid-column:2; margin:0; text-align:left; font-size: var(--fs-2); line-height:1.62; color:rgba(255,255,255,.82); max-width:none; }
.contact-cta { grid-column:1 / -1; width:100%; max-width:100%; margin-top:4px; }
.contact-cta .btn { width:100%; }
}
@media (max-width: 400px) {
.contact-info { grid-template-columns:minmax(0,0.85fr) minmax(0,1.3fr); gap:18px 14px; }
.contact-address p,.contact-address div,.contact-address a { font-size: var(--fs-1); }
.contact-description { font-size: var(--fs-1); line-height:1.58; }
}

/* No pointer cursor below 1025 px. Every selector that sets one is named, so this rule wins
   each of them on order alone. */
@media (max-width: 1024px) {
body, a, button, .btn, .nav-toggle, .modal-close, .khj-tab, .khj-x, .khj-seg button, .khj-go,
.pager-btn[disabled], .cx-pill, .cx-head, .svc-head, .haus-row, .testimonial-nav-btn, .t-dot,
.tm-shead { cursor:auto; }
}

/* Reveals below 1025 px fade only, they never move. The two rules that would otherwise put a
   transform or a stagger delay back are repeated with the values they already render. */
@media (max-width: 1024px) {
.reveal, .reveal-left, .reveal-right, .reveal-blur { transform:none; transition:opacity 0.8s ease; }
.perf-feature:hover { transform:none; }
.stagger-children .reveal:nth-child(2), .stagger-children .reveal:nth-child(3) { transition-delay:0s; }
}

/* The mobile testimonial card. .testimonial-slide.active is repeated so the compound selector
   in the base block does not outrank the flat one. */
@media (max-width: 768px) {
:where(body.p-index, body.p-classes, body.p-performance, body.p-team, body.p-pricing, body.p-corporate) .testimonial-split { gap:16px; }
:where(body.p-index, body.p-classes, body.p-performance, body.p-team, body.p-pricing, body.p-corporate) .testimonial-slide,
:where(body.p-index, body.p-classes, body.p-performance, body.p-team, body.p-pricing, body.p-corporate) .testimonial-slide.active { transition:opacity .3s ease; }
}

/* The two blocks whose style attributes S15 moved into .shl-c and .ctr-56 narrow below
   1025 px, the way the responsive layer already narrows every other heading line. */
@media (max-width: 1024px) {
.shl-c { margin-bottom: 12px; }
.ctr-56 { margin-bottom: 28px; }
}

/* The fullscreen mobile menu. It replaces the dropdown-style .nav-links.active written in the
   responsive layer and the shorter one in the S07 block, so it is stated last. */
@media (max-width: 1024px) {
.nav-links.active { position:fixed; inset:0; top:0; left:0; right:0; bottom:0; width:100vw; height:100vh; height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:0 24px; margin:0; background:#050505; backdrop-filter:none; -webkit-backdrop-filter:none; border:0; border-radius:0; z-index:9998; overflow-y:auto; }
}

/* UI refinement: service discovery, contextual booking and quieter motion. */
:where(body.p-clinic) .page-hero::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(110deg,rgba(0,0,0,.84),rgba(0,0,0,.68));
}
:where(body.p-clinic) .nav { background:rgba(0,0,0,.78); }
.kh-dock .sticky-book-cta, .kh-dock .sticky-book-cta .cta-arrow,
.kh-dock .khj-tab .khj-dot { animation:none; }
.hero-buttons { animation-delay:.35s; animation-duration:.6s; }
.hero-title-line { animation-duration:.7s; }
.hero-title-line:nth-child(1) { animation-delay:.05s; }
.hero-title-line:nth-child(2) { animation-delay:.15s; }
@media (max-width:768px) {
  /* Reuse the existing service anchors; keep booking as the single filled action. */
  .hero-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; }
  .hero-buttons .btn-primary { grid-column:1 / -1; }
  .hero-buttons .btn-outline:not(.nav-cta):not(.sticky-book-cta):not(.cx-pill) {
    display:inline-flex; min-height:44px; height:auto; padding:8px 0;
    background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.4);
    font-size:11px; letter-spacing:.02em; white-space:normal; text-align:left;
    justify-content:flex-start; box-shadow:none;
  }
  .kh-dock { background:#0a0a0a; border:1px solid rgba(255,255,255,.3); padding:4px; border-radius:3px; }
  .kh-dock .khj { flex:0 0 104px; max-width:104px; }
  .kh-dock .khj-tab { background:transparent; border:0; box-shadow:none; padding:0 4px;
    font-size:10px; font-weight:500; letter-spacing:.04em; text-decoration:underline; text-underline-offset:4px; }
  .kh-dock .khj-tab .khj-dot { display:none; }
  .kh-dock .sticky-book-cta { flex:1 1 auto; width:auto; font-size:11px; letter-spacing:.04em; box-shadow:none; }
  .kh-dock .khj-tab, .kh-dock .sticky-book-cta { min-height:44px; }
  .footer-bottom { padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)); }
}

.service-label-short { display:none; }
@media (max-width:768px) {
  .hero-buttons .service-label-full { display:none; }
  .hero-buttons .service-label-short { display:inline; }
  .hero-buttons .btn-outline:not(.nav-cta):not(.sticky-book-cta):not(.cx-pill) { color:#fff; gap:8px; justify-content:space-between; }
}
@media (max-width:700px) {
  :where(body.p-clinic) .svc-head { grid-template-columns:32px minmax(0,1fr) 24px; gap:10px; }
  :where(body.p-clinic) .svc-name { min-width:0; overflow-wrap:anywhere; }
}
@media (max-width:380px) {
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid > div { min-width:0; overflow-wrap:anywhere; }
}
@media (max-width:380px) {
  .about-grid { grid-template-columns:minmax(0,1fr); }
  .about-grid > *, .event-card-grid > * { min-width:0; }
  :where(body.p-index) .haus-row { grid-template-columns:32px minmax(0,1fr) 24px; gap:10px; }
  :where(body.p-index) .haus-name { overflow-wrap:anywhere; }
  :where(body.p-index) .manifesto-text .m-line-end { font-size:clamp(32px,12vw,44px); max-width:100%; }
  .event-card-grid { grid-template-columns:minmax(0,1fr); }
  .event-card-detail { overflow-wrap:anywhere; }
  .event-card-cta .btn { white-space:normal; height:auto; min-height:44px; padding:10px; }
}
@media (max-width:380px) {
  .why-choose-h .text-chrome { overflow-wrap:anywhere; }
}
@media (max-width:380px) {
  :where(body.p-index) .why-choose-h { white-space:normal; }
  :where(body.p-pricing) .pr-row { grid-template-columns:24px minmax(0,1fr) auto; gap:8px; }
  :where(body.p-pricing) .pr-name { min-width:0; overflow-wrap:anywhere; }
}
@media (max-width:380px) {
  :where(body.p-pricing) .pr-foot > * { max-width:100%; min-width:0; overflow-wrap:anywhere; }
  :where(body.p-pricing) .pr-foot .btn { white-space:normal; height:auto; min-height:44px; padding:10px; }
}
/* Draggable hero photos keep their original composition until moved. */
.hero-photo-card { pointer-events:auto; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.hero-photo-card img { pointer-events:none; -webkit-user-drag:none; }
:where(body.p-index) .hero-photo-card.is-dragging { animation-play-state:paused; }
:where(body.p-index) .hero-photo-card.is-dragging { cursor:grabbing; z-index:5; }
.hero-photo-card:focus { outline:none; }
.hero-photo-card:focus-visible { filter:brightness(1.15); }
/* Menu focus uses a short underline instead of a rectangular frame. */
.nav-toggle:focus { outline:none; }
.nav-toggle:focus-visible::after {
  content:""; position:absolute; left:10px; right:10px; bottom:2px;
  height:2px; background:#fff; pointer-events:none;
}