/* ======================================================================
Magnolia Men's Health , Design System
BMW-inspired editorial-medical, black + #C8A45A gold
Maps 1:1 to Webflow Style Guide classes when migrating.
====================================================================== */
/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{min-height:100vh;line-height:1.5;font-family:var(--font-sans);color:var(--ink);background:var(--bg)}
img,svg,picture,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
input,select,textarea{font:inherit}
ul,ol{list-style:none}
/* ---------- 2. Tokens ---------- */
:root{
/* surface */
--bg:#ffffff;
--bg-elev:#fafaf8;
--bg-tinted:#f4f3ee; /* warm cream , softer than gray */
--bg-dark:#0c0c0c;
--bg-dark-2:#181818;
--bg-dark-3:#262626;
/* ink */
--ink:#1a1a1a;
--ink-2:#2a2a2a;
--ink-3:#595959;
--ink-4:#8a8a8a;
--ink-5:#b8b8b8;
/* line */
--line:#e6e3da;
--line-2:#d4d0c4;
--line-dark:#2a2a2a;
--line-dark-2:#1f1f1f;
/* brand */
--gold:#C8A45A;
--gold-2:#A6863D;
--gold-3:#876B2F;
--gold-soft:rgba(200,164,90,.12);
/* type */
--font-sans:-apple-system,BlinkMacSystemFont,'Inter','Helvetica Neue',system-ui,sans-serif;
--font-serif:'Playfair Display',Georgia,'Times New Roman',serif;
/* size */
--container:1320px;
--container-narrow:1024px;
--container-prose:720px;
--gutter:40px;
/* radius */
--r:0; /* BMW = sharp corners */
--r-pill:980px;
/* shadow (rare) */
--shadow-card:0 1px 0 rgba(0,0,0,.04);
--shadow-lift:0 12px 40px rgba(0,0,0,.06);
}
/* ---------- 3. Layout ---------- */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 var(--gutter)}
.wrap-prose{max-width:var(--container-prose);margin:0 auto;padding:0 var(--gutter)}
.section{padding:120px 0}
.section-sm{padding:80px 0}
.section-lg{padding:160px 0}
.section-dark{background:var(--bg-dark);color:#fff}
.section-dark .ink-3,.section-dark .ink-4{color:#9b9b9b}
.section-tinted{background:var(--bg-tinted)}
/* ---------- 4. Typography ---------- */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:36px;height:1px;background:var(--gold)}
.eyebrow-no-rule::before{display:none}
h1,h2,h3,h4,h5,h6{font-family:var(--font-sans);font-weight:300;letter-spacing:-.01em;line-height:1.05;text-transform:uppercase;color:inherit}
h1{font-size:clamp(48px,5.6vw,80px)}
h2{font-size:clamp(36px,4.4vw,60px);line-height:1.07}
h3{font-size:clamp(24px,2.4vw,32px);font-weight:400;line-height:1.15}
h4{font-size:20px;font-weight:600;line-height:1.25;letter-spacing:.01em}
/* italic-serif accents (used for emphasis words inside headings,
for prices, for stat numerals , the editorial gold layer) */
.serif,.italic{font-family:var(--font-serif);font-style:italic;font-weight:500;text-transform:none;letter-spacing:-.01em;color:var(--gold)}
.serif-ink{color:inherit}
p{font-size:17px;line-height:1.6;color:var(--ink-3)}
.section-dark p{color:#bdbdbd}
.lede{font-size:19px;line-height:1.55;color:var(--ink-3);max-width:600px}
.section-dark .lede{color:#cfcfcf}
a.text-link{color:var(--gold-2);font-weight:600}
a.text-link:hover{color:var(--gold-3)}
.section-dark a.text-link{color:var(--gold)}
/* ---------- 5. Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:18px 28px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:0;border-radius:var(--r);transition:background .2s ease,color .2s ease,border-color .2s ease;white-space:nowrap}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn-primary{background:var(--gold);color:#000}
.btn-primary:hover{background:var(--gold-2);color:#fff}
.btn-line{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.section-dark .btn-line{color:#fff;border-color:rgba(255,255,255,.4)}
.section-dark .btn-line:hover{background:#fff;color:#000}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-arrow::after{content:"→";font-size:16px;line-height:1;transition:transform .2s ease}
.btn-arrow:hover::after{transform:translateX(4px)}
/* ---------- 6. Nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-row{display:flex;align-items:center;justify-content:space-between;min-height:88px;gap:32px;padding:8px 0}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand-logo{height:68px;width:auto;display:block;transition:opacity .2s ease}
.brand:hover .brand-logo{opacity:.85}
.brand-on-dark .brand-logo{height:64px}
.foot-bot .brand-logo{height:32px}
@media (max-width:680px){.brand-logo{height:48px}.brand-on-dark .brand-logo{height:48px}}
/* legacy brand-mark kept for any stragglers */
.brand-mark{display:none}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-link{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink-2);position:relative;padding:8px 0}
.nav-link:hover{color:var(--gold-2)}
.nav-link[aria-haspopup="true"]::after{content:"⌄";display:inline-block;margin-left:6px;color:var(--ink-4);font-weight:400;transform:translateY(-2px)}
/* dropdown */
.has-dropdown{position:relative}
.dropdown{position:absolute;top:100%;left:0;min-width:300px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lift);padding:14px;display:none}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{display:block}
.dropdown a{display:block;padding:12px 16px;font-size:14px;color:var(--ink-2);font-weight:500;letter-spacing:0;text-transform:none;border-left:2px solid transparent}
.dropdown a:hover{background:var(--bg-tinted);border-left-color:var(--gold);color:var(--ink)}
.dropdown a small{display:block;color:var(--ink-4);font-size:11px;font-weight:500;margin-top:2px;letter-spacing:.04em;text-transform:uppercase}
.nav-cta{padding:13px 22px;background:var(--gold);color:#000;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;border:0}
.nav-cta:hover{background:var(--gold-2)}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:0;cursor:pointer;padding:0}
.nav-toggle::before{content:"";width:22px;height:2px;background:var(--ink);box-shadow:0 -7px 0 var(--ink),0 7px 0 var(--ink);transition:transform .3s ease,box-shadow .3s ease}
/* mobile nav layout: hamburger left, logo center, CTA right */
@media (max-width:1100px){
.nav-row{
position:relative;
display:grid;
grid-template-columns:44px 1fr auto;
grid-template-rows:auto;
align-items:center;
min-height:84px;
padding:4px 0;
}
.nav-toggle{display:flex;grid-column:1;grid-row:1;justify-self:start}
.nav-cta{
grid-column:3;grid-row:1;justify-self:end;
padding:11px 20px;font-size:11px;letter-spacing:.06em;
border-radius:9999px;
}
/* Logo absolutely centered on the SCREEN (not relative to the space between
the hamburger and the CTA). Hamburger + CTA still float at the edges.
Scoped to .nav-row > .brand so this doesn't apply to the footer logo,
which would otherwise float in the middle of the hero. */
.nav-row > .brand{
position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);
justify-content:center;
z-index:1;
}
.nav-row .brand-logo{height:76px}
.nav-links{display:none}
}
@media (max-width:480px){
.nav-row{min-height:76px;padding:3px 0}
.nav-row .brand-logo{height:70px}
.nav-cta{padding:10px 16px;font-size:10px;border-radius:9999px}
}
/* slide-in mobile drawer */
.mobile-drawer{
position:fixed;top:0;left:0;bottom:0;
width:84%;max-width:340px;
background:#fff;z-index:200;
transform:translateX(-100%);
transition:transform .35s cubic-bezier(.4,0,.2,1);
padding:88px 0 32px;
overflow-y:auto;
box-shadow:0 0 40px rgba(0,0,0,0);
display:flex;flex-direction:column;
visibility:hidden;
}
.mobile-drawer.is-open{transform:translateX(0);visibility:visible;box-shadow:8px 0 40px rgba(0,0,0,.18)}
.mobile-drawer-overlay{
position:fixed;inset:0;
background:rgba(0,0,0,.55);
z-index:199;opacity:0;
pointer-events:none;
transition:opacity .3s ease;
}
.mobile-drawer-overlay.is-open{opacity:1;pointer-events:auto}
.mobile-drawer-close{
position:absolute;top:18px;right:18px;
width:40px;height:40px;
background:transparent;border:0;cursor:pointer;
display:flex;align-items:center;justify-content:center;
font-size:24px;color:var(--ink);
}
.mobile-drawer-section{
padding:0 24px 24px;border-bottom:1px solid var(--line);
}
.mobile-drawer-section:last-child{border-bottom:0}
.mobile-drawer-eyebrow{
font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
color:var(--gold);padding:18px 0 10px;
}
.mobile-drawer a.drawer-link{
display:flex;flex-direction:column;
padding:14px 0;border-bottom:1px solid var(--line);
font-size:16px;font-weight:600;letter-spacing:-.005em;color:var(--ink);
text-transform:none;
}
.mobile-drawer a.drawer-link:last-child{border-bottom:0}
.mobile-drawer a.drawer-link small{
display:block;font-size:11px;font-weight:500;letter-spacing:.04em;
color:var(--ink-4);margin-top:3px;text-transform:uppercase;
}
.mobile-drawer a.drawer-link:hover{color:var(--gold-2)}
.mobile-drawer-cta{
margin:24px 24px 0;padding:18px 24px;background:var(--gold);color:#000;
font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
text-align:center;border:0;cursor:pointer;
}
.mobile-drawer-call{
margin:16px 24px 0;padding:16px 24px;
border:1px solid var(--ink);
font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
text-align:center;color:var(--ink);
}
@media (max-width:1100px){
.nav-toggle.is-open::before{transform:rotate(45deg);box-shadow:0 0 0 var(--ink),0 0 0 var(--ink)}
.nav-toggle.is-open::after{content:"";position:absolute;width:22px;height:2px;background:var(--ink);transform:rotate(-45deg)}
body.drawer-open{overflow:hidden}
}
/* ---------- 7. Hero ---------- */
.hero{position:relative;background:linear-gradient(135deg,#000 0%,#141414 50%,#262626 100%);color:#fff;min-height:680px;display:flex;align-items:flex-end;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 80% 30%,rgba(200,164,90,.14),transparent 55%);pointer-events:none}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;background:linear-gradient(180deg,transparent,#000);pointer-events:none}
/* Service/location subpage heroes don't have a tall photographic background
to fade out, so the 160px black bottom-gradient just covers the trust-bar
text. Suppress it on .hero-page. */
.hero.hero-page::after{display:none}
/* ---------- Subpage hero ambient texture ----------
Inspired by Function Health, Levels, Stripe — two layered effects
give dark heroes life without competing with the gold medallion:
1) Aurora mesh: two soft gold radial blobs that drift on a 28s cycle.
Reads as ambient depth, not motion-noise.
2) Quincunx dot grid: 32px tile with a single low-opacity gold dot.
Suggests molecular precision (the same trick Stripe Press and
Linear use to read as "engineered"). Static; lets the aurora
do the moving.
Applies to .hero.hero-page only (services, locations, about, faq,
contact, book, resources). Home hero already has the molecule
animation doing the visual work.
`prefers-reduced-motion` halts the aurora drift but keeps the layers. */
.hero.hero-page{
background-color:#0c0c0c;
background-image:
/* Aurora mesh — drifting gold blobs */
radial-gradient(ellipse 60% 45% at 22% 25%, rgba(200,164,90,.13), transparent 65%),
radial-gradient(ellipse 55% 50% at 78% 78%, rgba(200,164,90,.10), transparent 70%),
/* Quincunx dot grid — molecular precision texture */
radial-gradient(circle 1px at 50% 50%, rgba(200,164,90,.10) 0 1px, transparent 1.5px),
/* Base gradient */
linear-gradient(135deg,#0c0c0c 0%,#141414 50%,#1f1f1f 100%);
background-size: 200% 200%, 220% 220%, 32px 32px, 100% 100%;
background-position: 0 0, 100% 100%, 0 0, 0 0;
background-repeat: no-repeat, no-repeat, repeat, no-repeat;
animation: hero-aurora 28s ease-in-out infinite alternate;
}
@keyframes hero-aurora{
to{background-position: 18% 12%, 82% 88%, 0 0, 0 0}
}
@media (prefers-reduced-motion:reduce){
.hero.hero-page{animation:none}
}
.hero-inner{position:relative;z-index:2;width:100%;padding:120px 0 100px}
.hero h1{max-width:1080px;margin:32px 0 0;color:#fff}
.hero .lede{font-size:16px;line-height:1.55;color:rgba(255,255,255,.62);font-weight:400;max-width:580px;margin:0 0 44px}
/* Hero CTAs are independent pill buttons, side-by-side. No connected strip,
no shared border. */
.hero-cta-row{display:inline-flex;align-items:stretch;gap:12px;flex-wrap:wrap}
.hero-cta-row > *{
padding:18px 28px;font-size:13px;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;border-radius:9999px;
}
.hero-cta-row .btn-primary{padding:18px 28px;border-radius:9999px}
.hero-cta-row .btn-line-hero{
background:transparent;color:#fff;
border:1.5px solid rgba(255,255,255,.55);
display:inline-flex;align-items:center;justify-content:center;gap:10px;
text-decoration:none;
}
.hero-cta-row .btn-line-hero::before{
content:"";width:18px;height:18px;flex-shrink:0;
background:currentColor;
-webkit-mask-image:url("data:image/svg+xml;utf8,");
mask-image:url("data:image/svg+xml;utf8,");
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-size:contain;mask-size:contain;
}
.hero-cta-row .btn-line-hero:hover{background:rgba(255,255,255,.08);color:var(--gold)}
/* Base hero-stats: positioning is set by the variant
(.hero-with-mol on home, .hero-page on subpages, the 1100px media query
for tablet/mobile). Keeping the base rule layout-only avoids cascade
conflicts with .hero .hero-stats below. */
.hero-stats{display:flex;gap:48px;z-index:3}
.hero-stat{text-align:right}
.hero-stat-num{font-family:var(--font-serif);font-style:italic;font-size:46px;color:var(--gold);font-weight:500;line-height:1.05;letter-spacing:-.01em;display:block;padding-bottom:4px}
.hero-stat-num small{font-size:22px;color:var(--gold-2);font-style:normal;font-family:var(--font-sans);font-weight:700;letter-spacing:.02em;margin-left:4px}
.hero-stat-label{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#888;margin-top:14px}
/* hero variant: shorter, used on subpages */
/* Hero subhead: standardized sans-serif two-part subhead under the H1.
Replaces the older italic-serif gold treatment on heroes site-wide.
Use --gold (already centralized) for the accent span. */
.hero-subhead{
font-family:var(--font-sans);
font-style:normal;font-weight:500;
font-size:clamp(20px,2.3vw,28px);
line-height:1.35;letter-spacing:-.005em;
color:#fff;
margin:24px auto 0;
max-width:680px;
}
.hero-subhead .accent{color:var(--gold)}
/* Hero kicker — emotional/editorial deck for the home hero.
Italic Playfair gold, sized between H1 and lede. Pulls the eye
to the emotional turn ("You don't have to.") and visually
separates from the gray descriptive lede that follows. */
.hero-kicker{
font-family:var(--font-serif);
font-style:italic;font-weight:500;
font-size:clamp(28px,3.4vw,44px);
line-height:1.15;letter-spacing:-.01em;
color:var(--gold);
margin:18px 0 28px;
max-width:680px;
}
@media (max-width:680px){
.hero-kicker{font-size:28px;margin:14px 0 22px}
}
/* Standalone gold accent utility — used for inline H1 emphasis on legacy heroes
(FAQ, contact, blog, guides, location pages). Replaces the older .serif italic. */
.hero-page h1 .accent,
.hero h1 .accent{color:var(--gold);font-style:normal}
/* In a centered hero-page (services/locations), keep subhead centered */
.hero-page .hero-subhead{text-align:center}
/* On dark backgrounds the white reads great; on light the page already overrides hero white */
@media (max-width:560px){
.hero-subhead{font-size:17px;margin-top:18px;max-width:none}
}
/* Service-page hero medallion: a centered animated glyph above the title */
.hero-medallion{
position:relative;
width:140px;height:140px;
margin:0 auto 8px;
display:flex;align-items:center;justify-content:center;
}
.hero-medallion::before,
.hero-medallion::after{
content:"";position:absolute;border-radius:50%;
border:1px solid rgba(200,164,90,.35);pointer-events:none;
}
.hero-medallion::before{inset:0;animation:hero-med-ring 4.5s ease-out infinite}
.hero-medallion::after{inset:14px;border-color:rgba(200,164,90,.20);animation:hero-med-ring 4.5s ease-out 1.5s infinite}
@keyframes hero-med-ring{
0%{transform:scale(.85);opacity:.55}
70%{transform:scale(1.18);opacity:0}
100%{transform:scale(1.18);opacity:0}
}
.hero-medallion svg{
width:68px;height:68px;color:var(--gold);
position:relative;z-index:2;
stroke:currentColor;fill:none;
stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.hero-medallion svg .filled{fill:currentColor;stroke:none}
@media (max-width:900px){
.hero-medallion{width:104px;height:104px;margin:0 auto 4px}
.hero-medallion svg{width:50px;height:50px}
}
@media (prefers-reduced-motion:reduce){
.hero-medallion::before,.hero-medallion::after{animation:none;opacity:.3}
}
.hero-page{min-height:auto;padding:32px 0 48px;display:block;text-align:center}
.hero-page .hero-inner{max-width:920px;margin:0 auto;padding:0;text-align:center;position:relative;z-index:2}
.hero-page .crumb{justify-content:center}
.hero-page h1{font-size:clamp(36px,4.4vw,60px);margin:16px 0 12px;text-align:center}
.hero-page .lede{font-size:16px;line-height:1.55;color:rgba(255,255,255,.62);font-weight:400;margin:14px auto 0;max-width:620px;text-align:center}
.hero-page .hero-cta-row{margin-top:28px;justify-content:center;display:inline-flex}
/* Specificity bump (.hero.hero-page) so this wins over the later
`.hero .hero-stats{position:relative;z-index:2}` rule that's needed
for the home hero. right/bottom/left/top:auto neutralizes any leftover
offsets from earlier rules. */
.hero.hero-page .hero-stats{
position:static;display:flex;justify-content:center;
flex-wrap:wrap;gap:28px 64px;margin:32px auto 0;
max-width:920px;padding:24px var(--gutter) 0;
border-top:1px solid rgba(255,255,255,.12);text-align:center;
right:auto;bottom:auto;left:auto;top:auto;
}
.hero-page .hero-stat{text-align:center}
.hero-page .hero-stat-num{display:block}
.hero-page .hero-stat-label{margin:0 auto;max-width:200px}
@media (max-width:900px){
/* On mobile, the sticky navbar already covers the top of the page, so we don't need
a 140px top buffer — that just creates dead space. Tighten the padding. */
.hero-page{min-height:0;padding:20px 0 36px}
.hero-page .hero-inner{padding:0}
.hero-page h1{margin:12px 0 8px}
.hero-page .hero-cta-row{margin-top:20px}
.hero-page .hero-stats{margin-top:24px;padding-top:20px;gap:20px 32px}
}
/* ---------- 8. Section heads ---------- */
.section-head{display:grid;grid-template-columns:1fr 1.5fr;gap:80px;margin-bottom:80px;align-items:end}
.section-head-center{display:block;text-align:center;max-width:880px;margin:0 auto 80px}
.section-head h2{margin-top:20px}
.section-head p{margin-top:24px}
/* ---------- 9. Step grid (How It Works) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:32px}
.section-dark .steps{}
.step{
padding:40px 32px 36px;
background:var(--bg-tinted);
border:1px solid var(--line);
border-left:3px solid var(--gold);
position:relative;
transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.step:hover{
transform:translateY(-3px);
box-shadow:0 16px 40px rgba(0,0,0,.06);
}
/* light section variant: keep white step cards on tinted sections so they pop */
.section-tinted .step{background:#fff}
/* dark section variant: elevated dark surface with gold left rule */
.section-dark .step{
background:var(--bg-dark-2);
border-color:var(--line-dark);
border-left-color:var(--gold);
}
.section-dark .step:hover{
box-shadow:0 16px 40px rgba(0,0,0,.45);
border-color:var(--gold);
}
.section-dark .step p{color:#bdbdbd}
.step-num{font-family:var(--font-serif);font-style:italic;font-size:44px;color:var(--gold);font-weight:500;line-height:1;margin-bottom:20px}
.step h4{margin-bottom:14px;text-transform:uppercase;font-weight:700;letter-spacing:.02em;font-size:18px}
.step p{font-size:15px;line-height:1.6;color:var(--ink-3)}
@media (max-width:900px){
.steps{grid-template-columns:1fr;gap:16px}
.step{padding:32px 26px 28px}
}
/* ---------- 10. Checklist (What's Included) ---------- */
.checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.checklist-item{padding:20px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;font-size:16px;color:var(--ink-2)}
.checklist-item::before{content:"✓";color:var(--gold);font-weight:700;font-size:18px;flex-shrink:0}
.section-dark .checklist{border-top-color:var(--line-dark)}
.section-dark .checklist-item{border-bottom-color:var(--line-dark);color:#dcdcdc}
/* ---------- 11. Service grid ---------- */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc{background:#181818;border:1px solid #262626;color:#fff;padding:40px;display:flex;flex-direction:column;gap:20px;min-height:380px;transition:border-color .25s ease,transform .25s ease}
.svc:hover{border-color:var(--gold);transform:translateY(-2px)}
.svc-tag{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.svc-title{font-size:24px;font-weight:300;text-transform:uppercase;line-height:1.15;letter-spacing:-.005em;color:#fff}
.svc-body{color:#9c9c9c;font-size:15px;flex:1;line-height:1.55}
.svc-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #262626;padding-top:20px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#9c9c9c}
.svc-foot .price{color:var(--gold);font-family:var(--font-serif);font-style:italic;font-size:22px;font-weight:500;letter-spacing:0;text-transform:none}
.svc-foot .more{color:var(--gold)}
/* light service card variant */
.svc-light{background:#fff;border:1px solid var(--line);color:var(--ink)}
.svc-light .svc-title{color:var(--ink)}
.svc-light .svc-body{color:var(--ink-3)}
.svc-light .svc-foot{border-top-color:var(--line);color:var(--ink-3)}
.svc-light:hover{border-color:var(--gold);background:#fff}
/* ---------- 12. Testimonial ---------- */
.test-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:80px;align-items:center}
.quote-text{font-size:30px;line-height:1.35;font-weight:300;color:var(--ink);letter-spacing:-.005em;margin-bottom:32px}
.quote-text::before{content:"";display:block;width:48px;height:2px;background:var(--gold);margin-bottom:32px}
.section-dark .quote-text{color:#fff}
.quote-author{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:16px}
.avatar{width:52px;height:52px;background:var(--bg-dark);color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-style:italic;font-size:22px;font-weight:500;flex-shrink:0}
.avatar.avatar-photo{border-radius:50%;object-fit:cover;object-position:center 25%;background:#222;border:1px solid rgba(200,164,90,.35);padding:0}
.author-strip .avatar.avatar-photo{width:44px;height:44px}
/* Guide images: scroll-reveal fade + slight rise (uses existing .reveal → .in observer in app.js) */
.guide-hero-img.reveal,.guide-inline-img.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.guide-hero-img.reveal.in,.guide-inline-img.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.guide-hero-img.reveal,.guide-inline-img.reveal{opacity:1;transform:none;transition:none}}
.guide-inline-img{margin:48px 0;border-radius:4px;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.guide-inline-img img{width:100%;height:auto;display:block}
.test-meta{border-left:1px solid var(--line);padding-left:48px}
.test-meta dt{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);margin-bottom:6px}
.test-meta dd{font-family:var(--font-serif);font-style:italic;font-size:32px;color:var(--gold);font-weight:500;margin-bottom:32px;line-height:1}
/* horizontal metric row variant for testimonials */
.test-meta-row{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:32px;
margin-top:48px;
padding-top:32px;
border-top:1px solid var(--line);
}
.section-dark .test-meta-row{border-top-color:var(--line-dark)}
.test-meta-row > div{display:flex;flex-direction:column;gap:6px}
.test-meta-row dt{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4)}
.section-dark .test-meta-row dt{color:#888}
.test-meta-row dd{font-family:var(--font-serif);font-style:italic;font-size:32px;color:var(--gold);font-weight:500;line-height:1;margin:0}
@media (max-width:680px){
.test-meta-row{grid-template-columns:repeat(3,1fr);gap:14px;padding-top:24px;margin-top:32px}
.test-meta-row dd{font-size:22px}
.test-meta-row dt{font-size:9px;letter-spacing:.14em}
}
/* What's Included grid (homepage) - balanced columns + responsive image */
.included-grid{
display:grid;
grid-template-columns:1.15fr 1fr;
gap:56px;
align-items:center;
}
.included-img{
position:relative;
aspect-ratio:4/5;
overflow:hidden;
width:100%;
}
.included-img img{
width:100%;height:100%;
object-fit:cover;
filter:saturate(.85) contrast(1.05) brightness(.95);
}
.included-img::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.75));
pointer-events:none;
}
.included-img-meta{
position:absolute;left:24px;right:24px;bottom:24px;color:#fff;z-index:2;
}
.included-img-tag{
font-size:11px;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;color:var(--gold);margin-bottom:6px;
}
.included-img-price{
font-family:var(--font-serif);font-style:italic;
font-size:36px;font-weight:500;line-height:1;color:var(--gold);
}
.included-img-price small{
font-size:18px;color:#cfcfcf;margin-left:6px;
font-style:normal;font-family:var(--font-sans);font-weight:600;
letter-spacing:.02em;text-transform:lowercase;
}
.included-img-meta{display:flex;flex-direction:column;gap:6px}
.included-img-clarifier{
font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:#9b9b9b;margin-top:2px;
}
@media (max-width:900px){
.included-grid{grid-template-columns:1fr;gap:32px}
.included-img{aspect-ratio:16/10;max-width:520px;margin:0 auto;width:100%}
}
/* simple testimonial card grid (3-up) */
.test-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.test-card{background:var(--bg-tinted);padding:36px;border-left:2px solid var(--gold)}
.test-card .stars{color:var(--gold);font-size:14px;letter-spacing:.15em;margin-bottom:20px;display:block}
.test-card-quote{font-size:16px;line-height:1.55;color:var(--ink-2);margin-bottom:24px}
.test-card-author{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:700;letter-spacing:.02em}
.test-card-author small{display:block;color:var(--ink-4);font-weight:500;margin-top:2px;letter-spacing:.04em;text-transform:uppercase}
/* ---------- 13. Pricing teaser ---------- */
.pricing-band{background:var(--bg-dark);color:#fff;padding:100px 0;position:relative;overflow:hidden}
.pricing-band::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 90% 50%,var(--gold-soft),transparent 60%);pointer-events:none}
.pricing-band-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:center;position:relative;z-index:2}
.big-price{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:140px;line-height:1;color:var(--gold);letter-spacing:-.02em;white-space:nowrap}
/* Bumped from 32 → 56 so '/month' reads at the same glance as the dollar number — pricing must
never look like a one-time fee on first scan. */
.big-price small{font-size:56px;color:var(--gold-2);font-weight:500;letter-spacing:0;white-space:nowrap;font-style:normal;font-family:var(--font-sans);font-weight:700;margin-left:8px}
.pricing-band h2{color:#fff;margin-bottom:20px}
/* ---------- 14. FAQ accordion ---------- */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{display:flex;justify-content:space-between;align-items:center;width:100%;padding:28px 0;text-align:left;font-size:20px;font-weight:600;letter-spacing:-.005em;color:var(--ink);cursor:pointer;list-style:none;transition:color .2s ease}
.faq-q::-webkit-details-marker{display:none}
.faq-q:hover{color:var(--gold-2)}
.faq-q::after{content:"+";font-family:var(--font-serif);font-style:italic;font-size:32px;color:var(--gold);font-weight:400;transition:transform .25s ease}
.faq-item[open] .faq-q::after{content:"−"}
.faq-a{padding:0 0 28px;font-size:16px;line-height:1.65;color:var(--ink-3);max-width:780px}
/* ---------- 15. Form (lead capture) ---------- */
.form{display:flex;flex-direction:column;gap:18px;max-width:480px}
.form-row{display:flex;gap:0}
.form input,.form textarea,.form select{padding:18px 20px;border:1px solid var(--line);background:#fff;font-size:16px;border-radius:0;color:var(--ink);width:100%}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--gold)}
.form-row input{flex:1;border-right:0}
.form-row .btn{padding:0 28px;font-size:13px}
.form label{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4)}
.form-note{font-size:13px;color:var(--ink-4);margin-top:8px}
.section-dark .form input{background:#181818;border-color:#2a2a2a;color:#fff}
.section-dark .form input:focus{border-color:var(--gold)}
.section-dark .form-note{color:var(--ink-5)}
/* ---------- 16. Modal (Cal.com) ---------- */
dialog.modal{padding:0;border:0;background:#fff;max-width:520px;width:90vw;border-radius:0;box-shadow:0 32px 80px rgba(0,0,0,.4)}
dialog.modal::backdrop{background:rgba(0,0,0,.6)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;border-bottom:1px solid var(--line)}
.modal-head h4{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.modal-close{font-size:24px;color:var(--ink-4);width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.modal-close:hover{color:var(--ink)}
.modal-body{padding:32px 28px;min-height:380px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:18px}
.spinner{width:32px;height:32px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.modal-fallback{font-size:14px;color:var(--ink-3)}
.modal-fallback strong{display:block;margin-top:4px;color:var(--gold-2);font-size:18px;letter-spacing:.02em}
/* ---------- 17. Footer ---------- */
footer{background:#000;color:#9b9b9b;padding:80px 0 32px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid #1f1f1f;margin-bottom:32px}
.foot-grid h5{color:#fff;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:20px}
.foot-grid ul li{padding:6px 0}
.foot-grid ul a{color:#9b9b9b;font-size:14px}
.foot-grid ul a:hover{color:var(--gold)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:12px;color:#666;letter-spacing:.04em}
.foot-bot .brand{color:#fff;font-size:13px}
.foot-bot .brand-mark{width:30px;height:30px}
.foot-bot .brand-mark::after{font-size:18px}
/* Footer responsive: brand info top, link columns horizontal even on small mobile */
@media (max-width:1100px){
.foot-grid{grid-template-columns:repeat(3,1fr);gap:32px}
.foot-grid > div:first-child{grid-column:1 / -1;margin-bottom:8px}
}
@media (max-width:480px){
.foot-grid{grid-template-columns:1fr 1fr;gap:24px}
.foot-grid > div:first-child{grid-column:1 / -1}
.foot-grid h5{font-size:10px}
.foot-grid ul a{font-size:13px}
}
/* ---------- 18. Sub-page bits ---------- */
.crumb{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:24px;display:flex;gap:12px;align-items:center}
.crumb a{color:var(--ink-4)}
.section-dark .crumb a{color:#888}
.tag{display:inline-block;padding:4px 12px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--gold-soft);color:var(--gold-2);border:1px solid var(--gold)}
.note{padding:24px 28px;background:var(--bg-tinted);border-left:2px solid var(--gold);font-size:15px;color:var(--ink-2);line-height:1.6;margin:32px 0}
.note strong{color:var(--ink)}
/* card list (resources, blog index, guides index) */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:#fff;border:1px solid var(--line);transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden}
.card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 18px 48px rgba(0,0,0,.08)}
.card-img{aspect-ratio:16/10;background:linear-gradient(135deg,var(--bg-tinted),#e8e3d4);position:relative;overflow:hidden}
.card-img > img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.card:hover .card-img > img{transform:scale(1.04)}
.card-img-tag{position:absolute;left:14px;top:14px;background:#000;color:var(--gold);padding:5px 11px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;z-index:3}
.card-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.card-meta{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin-bottom:12px;display:flex;gap:12px;flex-wrap:wrap}
.card h4{font-size:18px;line-height:1.3;text-transform:none;letter-spacing:-.005em;font-weight:600;color:var(--ink);margin:0 0 10px}
.card p{font-size:14px;line-height:1.55;color:var(--ink-3);margin:0;flex:1}
.card-foot{margin-top:18px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);display:flex;align-items:center;gap:6px}
.card:hover .card-foot{color:var(--gold)}
/* Guides grid: 2 cols on desktop, larger card body */
.guides-grid{grid-template-columns:repeat(2,1fr);gap:32px}
.guides-grid .card-body{padding:32px 32px 36px}
.guides-grid .card h4{font-size:22px;line-height:1.25;margin-bottom:12px}
.guides-grid .card p{font-size:15px;line-height:1.6}
@media (max-width:900px){.guides-grid{grid-template-columns:1fr;gap:18px}.guides-grid .card-body{padding:22px 22px 26px}.guides-grid .card h4{font-size:19px}}
/* Featured hero post (blog index) */
.blog-hero{
display:grid;grid-template-columns:1.15fr .85fr;gap:48px;
margin-bottom:64px;text-decoration:none;color:inherit;
border:1px solid var(--line);background:#fff;overflow:hidden;
transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.blog-hero:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 24px 64px rgba(0,0,0,.1)}
.blog-hero-img{aspect-ratio:16/10;position:relative;overflow:hidden;background:#1a1a1a}
.blog-hero-img > img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.blog-hero:hover .blog-hero-img > img{transform:scale(1.04)}
.blog-hero-img .card-img-tag{padding:6px 14px;font-size:11px}
.blog-hero-body{display:flex;flex-direction:column;justify-content:center;padding:44px 44px 44px 0}
.blog-hero h2{
text-transform:none;font-weight:600;letter-spacing:-.01em;
font-size:clamp(26px,2.4vw,36px);line-height:1.2;margin:14px 0 16px;color:var(--ink);
}
.blog-hero-body p{font-size:16px;line-height:1.6;color:var(--ink-3);margin:0}
/* Category filter pills */
.cat-filter{
display:flex;gap:8px;flex-wrap:wrap;align-items:center;
padding:24px 0;border-bottom:1px solid var(--line);background:#fff;
}
.cat-filter-label{
font-size:11px;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-4);margin-right:8px;
}
.cat-pill{
display:inline-block;padding:7px 14px;font-size:12px;font-weight:600;
letter-spacing:.04em;color:var(--ink-2);background:#fff;
border:1px solid var(--line);text-decoration:none;
transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.cat-pill:hover{border-color:var(--ink);color:var(--ink)}
.cat-pill.is-active{background:#000;color:var(--gold);border-color:#000}
@media (max-width:900px){
.blog-hero{grid-template-columns:1fr;gap:0;margin-bottom:40px}
.blog-hero-body{padding:24px 22px 28px}
.blog-hero h2{font-size:22px;margin:10px 0 12px}
.blog-hero-body p{font-size:15px}
.card-grid{grid-template-columns:1fr 1fr;gap:18px}
.cat-filter{padding:16px 0;gap:6px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
.cat-filter-label{flex-shrink:0}
.cat-pill{flex-shrink:0;padding:6px 12px;font-size:11px}
}
@media (max-width:560px){
.card-grid{grid-template-columns:1fr;gap:16px}
.card-body{padding:18px 20px 22px}
.card h4{font-size:17px}
.card p{font-size:14px}
.card-meta{font-size:10px;letter-spacing:.14em;gap:10px}
}
/* table (pricing) */
.table{width:100%;border-collapse:collapse;font-size:15px}
.table th{text-align:left;padding:16px;background:#000;color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.table td{padding:20px 16px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.table tr:hover td{background:var(--bg-tinted)}
.table .price{font-family:var(--font-serif);font-style:italic;color:var(--gold-2);font-weight:500;font-size:18px}
/* author / pull quote inside long-form posts */
.author-strip{display:flex;align-items:center;gap:16px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:32px 0}
.author-strip .avatar{width:44px;height:44px;font-size:18px}
.author-strip .meta{font-size:13px;color:var(--ink-3)}
.author-strip .meta strong{color:var(--ink);display:block}
/* prose styles */
.prose{font-size:18px;line-height:1.72;color:var(--ink-2)}
.prose h2{font-size:32px;text-transform:none;font-weight:600;letter-spacing:-.01em;margin:48px 0 16px}
.prose h3{font-size:22px;text-transform:none;font-weight:600;margin:32px 0 12px;letter-spacing:-.005em}
.prose p,.prose ul,.prose ol{margin-bottom:20px;color:var(--ink-2)}
.prose ul,.prose ol{padding-left:22px}
.prose ul li,.prose ol li{margin-bottom:8px;list-style:disc}
.prose ol li{list-style:decimal}
.prose a{color:var(--gold-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose blockquote{border-left:2px solid var(--gold);padding:0 0 0 24px;margin:32px 0;font-family:var(--font-serif);font-style:italic;font-size:24px;color:var(--ink);font-weight:500;line-height:1.4}
.prose hr{border:0;height:1px;background:var(--line);margin:48px 0}
/* fade-in entrance for in-view sections */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease-out,transform .6s ease-out}
.reveal.in{opacity:1;transform:none}
/* staggered grid children */
.stagger > *{opacity:0;transform:translateY(20px);transition:opacity .55s ease-out,transform .55s ease-out}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:0ms}
.stagger.in > *:nth-child(2){transition-delay:90ms}
.stagger.in > *:nth-child(3){transition-delay:180ms}
.stagger.in > *:nth-child(4){transition-delay:270ms}
.stagger.in > *:nth-child(5){transition-delay:360ms}
.stagger.in > *:nth-child(6){transition-delay:450ms}
.stagger.in > *:nth-child(7){transition-delay:540ms}
.stagger.in > *:nth-child(8){transition-delay:630ms}
@media (prefers-reduced-motion:reduce){
.reveal,.stagger > *,.kenburns,.glow-pulse,html{transition:none!important;animation:none!important;scroll-behavior:auto}
.reveal,.stagger > *{opacity:1;transform:none}
}
/* ---------- 20. Imagery system ---------- */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img,.hero-bg-img{width:100%;height:100%;object-fit:cover;opacity:.35;filter:saturate(.7) contrast(1.05)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.85) 100%);pointer-events:none}
.hero .hero-inner,.hero .hero-stats{position:relative;z-index:2}
/* ---------- 20b. Hero molecule (testosterone animation) ---------- */
.hero-with-mol{
background:radial-gradient(ellipse at 72% 55%, #3a3a3a 0%, #1f1f1f 60%, #111 100%);
min-height:600px;
display:flex;
align-items:center;
padding:56px 0 48px;
}
.hero-with-mol .wrap{position:relative;z-index:2;width:100%}
.hero-with-mol .hero-inner{padding:0}
.hero-grid{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:48px;
align-items:center;
}
.hero-mol{
position:relative;
width:100%;
aspect-ratio:1;
max-width:560px;
margin:0 auto;
pointer-events:none;
opacity:.98;
right:auto;top:auto;transform:none;
}
.hero-mol svg{width:100%;height:100%;display:block}
.hero-with-mol .hero-stats{
position:relative;
display:flex;
gap:48px;
margin-top:64px;
z-index:3;
right:auto;bottom:auto;
}
@media (max-width:1100px){
.hero-with-mol{min-height:560px;padding:80px 0 40px;position:relative;overflow:hidden}
.hero-grid{grid-template-columns:1fr;gap:24px;position:relative;z-index:2}
/* On tablet/mobile, the molecule becomes a faint background image behind the text */
.hero-with-mol .hero-mol{
position:absolute;
inset:0;
width:100%;height:100%;
max-width:none;
aspect-ratio:auto;
margin:0;
opacity:.32;
z-index:1;
pointer-events:none;
}
.hero-with-mol .hero-mol svg{
width:auto;height:115%;
position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%) scale(1.25);
}
.hero-with-mol .hero-stats{margin-top:36px;gap:32px}
}
@media (max-width:600px){
.hero-with-mol .hero-mol{opacity:.28}
.hero-with-mol .hero-mol svg{transform:translate(-50%,-50%) scale(1.5)}
.hero-with-mol .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex-wrap:nowrap}
.hero-with-mol .hero-stat{min-width:0;text-align:left}
.hero-stat-num{font-size:30px}
.hero-stat-num small{font-size:15px}
.hero-stat-label{font-size:9.5px;letter-spacing:.16em}
}
/* ring expand-and-fade pulse */
@keyframes m-ring-pulse{
0%{transform:scale(.45);opacity:0}
18%{opacity:.55}
100%{transform:scale(1.6);opacity:0}
}
.hero-mol .m-ring{transform-origin:300px 300px;animation:m-ring-pulse 5.5s ease-out infinite}
.hero-mol .m-r2{animation-delay:1.83s}
.hero-mol .m-r3{animation-delay:3.66s}
/* slow molecule rotation */
@keyframes m-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.hero-mol .m-molecule{transform-origin:300px 320px;animation:m-spin 90s linear infinite}
/* atom pulse , subtle opacity breathing */
@keyframes m-atom-pulse{0%,100%{opacity:.7}50%{opacity:1}}
.hero-mol .m-atoms circle{animation:m-atom-pulse 3.2s ease-in-out infinite}
.hero-mol .m-atoms circle:nth-child(2){animation-delay:.4s}
.hero-mol .m-atoms circle:nth-child(3){animation-delay:.8s}
.hero-mol .m-atoms circle:nth-child(4){animation-delay:1.2s}
.hero-mol .m-atoms circle:nth-child(5){animation-delay:1.6s}
.hero-mol .m-atoms circle:nth-child(6){animation-delay:2s}
.hero-mol .m-atoms circle:nth-child(7){animation-delay:2.4s}
.hero-mol .m-atoms circle:nth-child(8){animation-delay:2.8s}
/* orbital electrons , three different orbits and speeds */
@keyframes m-orbit-cw{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes m-orbit-ccw{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
.hero-mol .m-orbit{transform-origin:300px 300px}
.hero-mol .m-o1{animation:m-orbit-cw 14s linear infinite}
.hero-mol .m-o2{animation:m-orbit-ccw 22s linear infinite}
.hero-mol .m-o3{animation:m-orbit-cw 18s linear infinite;transform:rotate(140deg)}
@media (prefers-reduced-motion:reduce){
.hero-mol .m-ring,.hero-mol .m-molecule,.hero-mol .m-atoms circle,.hero-mol .m-orbit{animation:none!important}
.hero-mol .m-ring{opacity:.25}
}
/* ---------- 22. Service carousel , continuous newsticker ---------- */
.svc-carousel{
position:relative;
/* Edge fade so cards appear/disappear smoothly */
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.svc-carousel-track{
overflow:hidden;
padding:8px 0 16px;
}
.svc-carousel-shift{
transition:transform .45s cubic-bezier(.4,0,.2,1);
will-change:transform;
}
.svc-carousel-inner{
display:flex;
width:max-content;
animation:svc-marquee 44s linear infinite;
will-change:transform;
}
.svc-carousel:hover .svc-carousel-inner,
.svc-carousel.is-snapped .svc-carousel-inner,
.svc-carousel:focus-within .svc-carousel-inner{
animation-play-state:paused;
}
/* focused state , clicked card highlighted with brighter border + glow + scale */
.svc-carousel-inner .svc.svc-focused{
border-color:var(--gold)!important;
box-shadow:0 0 0 1px var(--gold), 0 18px 50px rgba(200,164,90,.18);
transform:translateY(-3px);
z-index:2;
}
.svc-carousel-inner .svc.svc-focused .more::after{
content:" , click again to view";
font-size:11px;
color:var(--gold);
margin-left:6px;
letter-spacing:.04em;
}
.svc-carousel-inner .svc{
flex:0 0 clamp(300px, calc((100vw - 80px - 48px) / 3), 414px);
margin-right:24px; /* uniform spacing , uses margin not gap so loop is seamless */
}
@keyframes svc-marquee{
0% {transform:translate3d(0,0,0)}
100% {transform:translate3d(-50%,0,0)}
}
@media (max-width:1100px){
.svc-carousel-inner{animation-duration:50s}
.svc-carousel-inner .svc{flex:0 0 clamp(280px, calc((100vw - 44px - 24px) / 2), 380px)}
}
@media (max-width:680px){
.svc-carousel-inner .svc{flex:0 0 calc(100vw - 64px)}
}
/* Manual prev/next arrows for the marquee — large overlay buttons on the
left and right edges of the carousel so users can clearly navigate without
needing to discover the click-to-snap interaction. */
.svc-carousel{position:relative}
.svc-carousel-controls{display:none} /* hide the old top-right arrow row; we use overlays instead */
.svc-carousel-arrow{
position:absolute;top:50%;transform:translateY(-50%);
width:64px;height:64px;border-radius:50%;
border:1px solid rgba(200,164,90,.55);
background:rgba(12,12,12,.78);color:var(--gold);
display:flex;align-items:center;justify-content:center;
cursor:pointer;z-index:8;
box-shadow:0 12px 32px rgba(0,0,0,.45);
backdrop-filter:blur(6px);
transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.svc-carousel-arrow svg{width:24px;height:24px}
.svc-carousel-arrow:hover{background:var(--gold);color:#000;border-color:var(--gold);transform:translateY(-50%) scale(1.04)}
.svc-carousel-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.svc-carousel-arrow.svc-carousel-arrow-prev{left:-12px}
.svc-carousel-arrow.svc-carousel-arrow-next{right:-12px}
.section-dark .svc-carousel-arrow{border-color:rgba(200,164,90,.65)}
@media (max-width:900px){
/* On mobile, native horizontal scroll-snap is the swipe path — hide the overlay arrows
because the iOS swipe gesture is the primary interaction. */
.svc-carousel-arrow{display:none!important}
}
@media (prefers-reduced-motion:reduce){
.svc-carousel-inner{animation:none}
.svc-carousel-track{overflow-x:auto;scrollbar-width:none}
.svc-carousel-track::-webkit-scrollbar{display:none}
}
/* Mobile carousel: native horizontal scroll-snap (placed after base rules to win cascade).
On touch devices iOS handles finger swipe + flick + snap natively, far more reliable than JS. */
@media (max-width:900px){
.svc-carousel-inner{animation:none;width:auto}
.svc-carousel-shift{transform:none!important;transition:none}
.svc-carousel-track{
overflow-x:auto;overflow-y:hidden;
/* `proximity` lets the JS autoscroll drift smoothly through cards without snapping back,
while still snapping when the user swipes and releases near a snap point. */
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
scroll-padding-left:24px;
scrollbar-width:none;
padding-left:24px;padding-right:24px;
}
.svc-carousel-track::-webkit-scrollbar{display:none}
.svc-carousel-inner > .svc{scroll-snap-align:start}
.svc-carousel-inner > [aria-hidden="true"]{display:none}
.svc-carousel-controls{display:none!important}
.svc-carousel{-webkit-mask-image:none;mask-image:none}
}
/* ---------- 23. Free First Visit sticky banner (bottom of viewport) ---------- */
.free-banner{
position:fixed;
bottom:0;left:0;right:0;
z-index:99;
background:var(--gold);color:#0c0c0c;
padding:14px 0;font-size:13px;
box-shadow:0 -8px 28px rgba(0,0,0,.22), 0 -1px 0 rgba(0,0,0,.12);
border-top:1px solid rgba(0,0,0,.15);
/* slide-in from bottom on page load */
transform:translateY(100%);
animation:free-banner-in .5s cubic-bezier(.2,.7,.3,1) forwards .3s;
}
@keyframes free-banner-in{to{transform:translateY(0)}}
.free-banner .wrap{
display:flex;align-items:center;justify-content:center;
gap:14px;flex-wrap:wrap;
}
.free-banner-tag{
font-size:11px;letter-spacing:.18em;text-transform:uppercase;
font-weight:800;background:#000;color:var(--gold);
padding:5px 11px;
}
.free-banner-text{font-weight:600;letter-spacing:.01em}
.free-banner-cta{font-weight:700;text-decoration:underline;text-underline-offset:3px;color:#000;background:transparent}
.free-banner-cta:hover{text-decoration-thickness:2px}
/* Body offset so footer content isn't hidden under the bar */
body:has(.free-banner){padding-bottom:64px}
@media (max-width:768px){
.free-banner-text{font-size:12px}
.free-banner-tag{font-size:10px}
.free-banner{padding:12px 0}
body:has(.free-banner){padding-bottom:88px}
}
@media (max-width:480px){
.free-banner .wrap{gap:8px;padding:0 16px}
.free-banner-text{flex:1 1 100%;text-align:center;order:2}
.free-banner-tag{order:1}
.free-banner-cta{order:3}
}
@media (prefers-reduced-motion:reduce){
.free-banner{animation:none;transform:none}
}
/* ---------- 24. Insurance accepted strip ---------- */
.insurance-section{
padding:80px 0;
background:var(--bg-tinted);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.insurance-section h2{
font-size:clamp(32px,3.6vw,48px);
text-transform:uppercase;font-weight:300;letter-spacing:-.01em;line-height:1.1;
max-width:880px;
}
.insurance-section .lede{
font-size:17px;line-height:1.65;max-width:820px;margin-top:24px;color:var(--ink-3);
}
.insurance-logos{
display:grid;grid-template-columns:repeat(6,1fr);gap:14px;
margin:48px 0 24px;
}
.insurance-logo{
background:#fff;border:1px solid var(--line);
padding:14px 18px;
height:84px;
display:flex;align-items:center;justify-content:center;
transition:border-color .25s ease,transform .25s ease;
}
@media(max-width:900px){
.insurance-logos{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
.insurance-logos{grid-template-columns:repeat(2,1fr);gap:10px}
.insurance-logo{height:64px;padding:10px 12px}
.insurance-logo img{max-height:32px;max-width:110px}
}
.insurance-logo img{
max-height:42px;max-width:140px;width:auto;
filter:grayscale(.6) opacity(.78);
transition:filter .25s ease;
}
.insurance-logo:hover{border-color:var(--gold);transform:translateY(-2px)}
.insurance-logo:hover img{filter:grayscale(0) opacity(1)}
.insurance-cta-row{
display:flex;align-items:center;gap:18px;
flex-wrap:wrap;
margin-top:32px;
font-size:15px;color:var(--ink-3);
}
.insurance-cta-row .btn{flex-shrink:0}
/* ---------- 25. Two paths comparison ---------- */
.two-paths-grid{
display:grid;grid-template-columns:1fr 1fr;gap:32px;
margin-top:64px;
}
.path-card{
background:#fff;border:1px solid var(--line);
padding:56px 40px 40px;
display:flex;flex-direction:column;gap:20px;
position:relative;
min-width:0;
transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.path-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.path-card-featured{
border-color:var(--gold);
box-shadow:0 12px 40px rgba(200,164,90,.1);
}
.path-card-featured::before{
content:"MOST POPULAR";
position:absolute;
top:-13px;left:32px;
background:var(--gold);color:#000;
font-size:10px;font-weight:800;letter-spacing:.2em;
padding:5px 14px;
}
.path-tag{
font-size:11px;font-weight:700;letter-spacing:.18em;
color:var(--gold);text-transform:uppercase;
}
.path-card h3{
text-transform:none;font-weight:600;letter-spacing:-.01em;
font-size:28px;line-height:1.15;margin:0;color:var(--ink);
}
.path-card .price-line{
font-family:var(--font-serif);font-style:italic;
font-size:40px;font-weight:500;
color:var(--gold);margin-top:4px;line-height:1;
white-space:nowrap;
}
.path-card .price-line small{
/* Bumped to 22px so /month is unmissable next to the dollar number */
font-size:22px;color:var(--gold-2);font-style:normal;
font-family:var(--font-sans);font-weight:700;
margin-left:8px;letter-spacing:.04em;text-transform:lowercase;
white-space:nowrap;
}
.path-card .price-clarifier{
font-size:12px;color:var(--ink-4);margin-top:8px;
letter-spacing:.04em;
}
.path-card ul{margin:0;padding:0;list-style:none;flex:1}
.path-card ul li{
padding:14px 0;border-bottom:1px solid var(--line);
font-size:15px;line-height:1.5;color:var(--ink-2);
display:flex;align-items:flex-start;gap:14px;
}
.path-card ul li::before{
content:"";flex-shrink:0;
width:8px;height:8px;background:var(--gold);
margin-top:7px;
}
.path-card ul li:last-child{border-bottom:0}
.path-card .btn{margin-top:8px;align-self:flex-start}
.path-card-foot{
margin-top:56px;text-align:center;
font-size:16px;color:var(--ink-3);max-width:680px;
margin-left:auto;margin-right:auto;line-height:1.6;
}
.path-card-foot strong{color:var(--ink)}
@media (max-width:900px){
.two-paths-grid{grid-template-columns:1fr;gap:24px}
.path-card{padding:48px 24px 32px}
}
/* ---------- 26. Page-level callout (hybrid badge for service pages) ---------- */
.hybrid-callout{
display:flex;align-items:center;gap:24px;
padding:24px 32px;
background:var(--bg-tinted);
border-left:3px solid var(--gold);
margin:48px 0;
}
.hybrid-callout-icon{
width:48px;height:48px;flex-shrink:0;
background:#fff;border:1px solid var(--gold);
display:flex;align-items:center;justify-content:center;
color:var(--gold);
}
.hybrid-callout strong{display:block;color:var(--ink);margin-bottom:4px;font-size:15px;letter-spacing:.02em}
.hybrid-callout p{margin:0;font-size:14px;color:var(--ink-3);line-height:1.55}
/* ---------- 27. EEAT components: byline, quick-facts, candidate, timeline, references, doctor bio ---------- */
.author-byline{
display:flex;align-items:center;gap:20px;
padding:24px 0;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
margin:0;font-size:14px;color:var(--ink-3);line-height:1.55;
flex-wrap:wrap;
}
.author-byline-photo{
width:64px;height:64px;flex-shrink:0;
background:var(--bg-dark);color:var(--gold);
display:flex;align-items:center;justify-content:center;
font-family:var(--font-serif);font-style:italic;font-size:24px;font-weight:500;
overflow:hidden;
}
.author-byline-photo img{width:100%;height:100%;object-fit:cover;display:block}
.author-byline-meta strong{color:var(--ink);font-size:15px;font-weight:700;display:block;letter-spacing:.01em}
.author-byline-meta .creds{color:var(--ink-3);font-size:13px;margin-top:2px}
.author-byline-meta .reviewed{font-size:12px;color:var(--ink-4);margin-top:4px;letter-spacing:.04em;text-transform:uppercase}
.quick-facts{
background:var(--bg-tinted);
border:1px solid var(--line);
border-left:3px solid var(--gold);
padding:32px 36px;
margin:48px 0;
}
.quick-facts h4{
font-size:11px;letter-spacing:.18em;text-transform:uppercase;
color:var(--gold);font-weight:700;margin-bottom:18px;
font-family:var(--font-sans);
}
.quick-facts ul{list-style:none;padding:0;margin:0}
.quick-facts li{
padding:8px 0 8px 22px;font-size:15px;line-height:1.55;color:var(--ink-2);
position:relative;
}
.quick-facts li::before{
content:"›";position:absolute;left:0;top:7px;
color:var(--gold);font-weight:700;font-size:18px;line-height:1;
}
.quick-facts li strong{color:var(--ink);font-weight:600}
.candidate-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:48px}
.candidate-card{
padding:36px 32px;background:#fff;border:1px solid var(--line);
}
.candidate-card.is-yes{border-left:3px solid var(--gold)}
.candidate-card.is-no{border-left:3px solid var(--ink-4)}
.candidate-card h4{
font-size:13px;letter-spacing:.18em;text-transform:uppercase;
margin-bottom:20px;font-weight:700;color:var(--ink);
}
.candidate-card.is-yes h4{color:var(--gold-2)}
.candidate-card ul{list-style:none;padding:0;margin:0}
.candidate-card li{
padding:10px 0 10px 24px;font-size:14px;line-height:1.55;color:var(--ink-2);
position:relative;border-bottom:1px solid var(--line);
}
.candidate-card li:last-child{border-bottom:0}
.candidate-card.is-yes li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:700}
.candidate-card.is-no li::before{content:"−";position:absolute;left:0;color:var(--ink-4);font-weight:700}
@media (max-width:780px){.candidate-grid{grid-template-columns:1fr;gap:16px}}
.timeline{margin:48px 0;border-left:1px solid var(--line);padding-left:0}
.timeline-row{
display:grid;grid-template-columns:160px 1fr;gap:32px;
padding:18px 0 18px 28px;border-bottom:1px solid var(--line);
position:relative;
}
.timeline-row::before{
content:"";position:absolute;left:-5px;top:24px;
width:9px;height:9px;background:var(--gold);
border:2px solid #fff;
}
.timeline-row:last-child{border-bottom:0}
.timeline-when{
font-family:var(--font-serif);font-style:italic;font-weight:500;
color:var(--gold);font-size:18px;line-height:1.2;
}
.timeline-what{font-size:15px;line-height:1.55;color:var(--ink-2)}
.timeline-what strong{color:var(--ink);font-weight:600;display:block;margin-bottom:4px}
@media (max-width:680px){.timeline-row{grid-template-columns:1fr;gap:6px;padding-left:24px}}
.diff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);margin:48px 0;border:1px solid var(--line)}
.diff-item{padding:28px 24px;background:#fff;font-size:14px;line-height:1.55;color:var(--ink-2);min-width:0}
.diff-item .diff-num{
font-family:var(--font-serif);font-style:italic;color:var(--gold);
font-size:24px;font-weight:500;line-height:1;margin-bottom:12px;display:block;
}
.diff-item strong{color:var(--ink);font-weight:600;display:block;margin-bottom:6px;font-size:15px}
/* Dark variant: when diff-item has a dark inline background, headers should be light */
.diff-item[style*="background:#181818"] strong,
.diff-item[style*="background:#1f1f1f"] strong{color:#fff}
@media (max-width:900px){.diff-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* On mobile we abandon grid in favor of flex-column to dodge a grid-track edge case
where 1fr columns kept resolving to 3 implicit tracks due to inline children sizing. */
@media (max-width:600px){
.diff-grid{display:flex;flex-direction:column}
.diff-item{width:100%}
}
.references{
margin:48px 0;padding:32px 36px;
background:#fafafa;border-left:3px solid var(--ink-4);
}
.references h4{
font-size:11px;letter-spacing:.18em;text-transform:uppercase;
color:var(--ink-3);font-weight:700;margin-bottom:18px;
}
.references ol{counter-reset:ref;list-style:none;padding:0;margin:0}
.references li{
counter-increment:ref;
padding:10px 0 10px 32px;
font-size:13px;line-height:1.5;color:var(--ink-3);
position:relative;border-bottom:1px solid var(--line);
}
.references li::before{
content:counter(ref);position:absolute;left:0;top:10px;
font-family:var(--font-serif);font-style:italic;
color:var(--gold);font-size:14px;font-weight:500;
}
.references li:last-child{border-bottom:0}
.references em{color:var(--ink-2);font-style:italic}
.references a{color:var(--gold-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* inline citation superscript */
.cite{
font-size:.7em;color:var(--gold-2);font-weight:600;
vertical-align:super;line-height:0;
text-decoration:none;margin-left:1px;
}
.cite:hover{color:var(--gold-3)}
/* doctor bio block (full EEAT) */
.doctor-bio{
display:grid;grid-template-columns:240px 1fr;gap:48px;
padding:48px;background:var(--bg-tinted);
border-left:3px solid var(--gold);
margin:48px 0;align-items:start;
}
.doctor-bio-photo{
aspect-ratio:4/5;width:100%;
background:linear-gradient(135deg,#1a1a1a,#262626);
display:flex;align-items:center;justify-content:center;
color:var(--gold);font-family:var(--font-serif);font-style:italic;
font-size:64px;font-weight:500;
overflow:hidden;
}
.doctor-bio-photo img{width:100%;height:100%;object-fit:cover;display:block}
.doctor-bio h3{
font-size:22px;text-transform:none;font-weight:600;letter-spacing:-.005em;
color:var(--ink);margin-bottom:6px;
}
.doctor-bio .role{
font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
color:var(--gold-2);margin-bottom:18px;
}
.doctor-bio p{font-size:15px;line-height:1.65;color:var(--ink-3);margin-bottom:14px}
.doctor-bio ul{margin:18px 0 0;padding:0;list-style:none}
.doctor-bio li{padding:6px 0;font-size:13px;line-height:1.5;color:var(--ink-3)}
.doctor-bio li::before{content:"›";color:var(--gold);font-weight:700;margin-right:8px}
@media (max-width:780px){.doctor-bio{grid-template-columns:1fr;padding:32px;gap:24px}.doctor-bio-photo{max-width:200px}}
@keyframes kenburns{
0%,100%{transform:scale(1) translate(0,0)}
50%{transform:scale(1.06) translate(-1%,-1%)}
}
.kenburns{animation:kenburns 18s ease-in-out infinite}
@keyframes glow-pulse{
0%,100%{opacity:.85}
50%{opacity:1}
}
.glow-pulse{animation:glow-pulse 3.5s ease-in-out infinite}
/* dot grid background pattern */
.dot-grid{
background-image:radial-gradient(rgba(200,164,90,.18) 1px, transparent 1px);
background-size:24px 24px;
background-position:0 0;
}
.section-dark .dot-grid{background-image:radial-gradient(rgba(200,164,90,.12) 1px, transparent 1px)}
/* hero noise texture overlay */
.noise::before{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
opacity:.7;mix-blend-mode:overlay
}
/* ---------- 21. SVG icons ---------- */
.icon{width:32px;height:32px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icon-sm{width:20px;height:20px}
.icon-lg{width:48px;height:48px;stroke-width:1.25}
.icon-xl{width:72px;height:72px;stroke-width:1}
.icon-gold{stroke:var(--gold)}
/* service icon framing */
.svc-icon{
width:64px;height:64px;border:1px solid rgba(200,164,90,.4);
display:flex;align-items:center;justify-content:center;
background:rgba(200,164,90,.06);transition:all .3s ease;
margin-bottom:8px
}
.svc:hover .svc-icon{border-color:var(--gold);background:rgba(200,164,90,.12);transform:translateY(-2px)}
.svc-light .svc-icon{border-color:rgba(200,164,90,.5);background:rgba(200,164,90,.08)}
/* process step icon */
.step-icon-row{display:flex;align-items:center;gap:24px;margin-bottom:24px}
.step-icon{width:48px;height:48px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold)}
.section-dark .step-icon{border-color:#2a2a2a}
/* photo card variant for blog/guide */
.card-img{overflow:hidden;position:relative}
.card-img-photo{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.4,0,.2,1);position:absolute;inset:0;filter:saturate(.85) contrast(1.05) brightness(.95)}
.card:hover .card-img-photo{transform:scale(1.05);filter:saturate(1) contrast(1.05) brightness(1)}
.card-img-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.6) 100%);z-index:1}
.card-img-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--gold);opacity:.55;z-index:2;transition:opacity .3s ease,transform .3s ease}
.card:hover .card-img-icon{opacity:.8;transform:translate(-50%,-50%) scale(1.08)}
.card-img-tag{z-index:3}
/* atmospheric inline image (in prose, between sections) */
.image-strip{position:relative;height:280px;margin:0;overflow:hidden}
.image-strip img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.05)}
.image-strip::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.6),transparent 30%,transparent 70%,rgba(0,0,0,.6))}
/* animated underline for text links */
.link-anim{position:relative;display:inline-block}
.link-anim::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:currentColor;transition:width .3s ease}
.link-anim:hover::after{width:100%}
/* count-up stat */
.count{font-variant-numeric:tabular-nums}
/* CTA button with animated arrow */
.btn-arrow{position:relative;overflow:hidden}
.btn-arrow::after{display:inline-block;transition:transform .25s cubic-bezier(.4,0,.2,1)}
.btn-arrow:hover::after{transform:translateX(6px)}
/* glow accent on hero stats */
.hero-stat-num{position:relative}
.hero-stat-num::after{
content:"";position:absolute;left:50%;bottom:-4px;width:40px;height:1px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
transform:translateX(-50%);opacity:0;transition:opacity .4s ease
}
.hero-stat:hover .hero-stat-num::after{opacity:1}
/* modal entrance animation */
@keyframes modal-in{
from{opacity:0;transform:translateY(20px) scale(.98)}
to{opacity:1;transform:translateY(0) scale(1)}
}
dialog.modal[open]{animation:modal-in .3s cubic-bezier(.4,0,.2,1)}
dialog.modal[open]::backdrop{animation:fade-in .3s ease}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
/* ---------- 19. Responsive ---------- */
@media (max-width:1100px){
.nav-links{display:none}
.nav-toggle{display:flex}
/* Hero on tablet/mobile: stack children vertically and let stats wrap inside the wrap */
.hero{flex-direction:column;align-items:stretch}
.hero-stats{position:static;justify-content:flex-start;margin-top:32px;flex-wrap:wrap;padding:0 var(--gutter) 32px;gap:28px 32px}
.hero-stat{text-align:left;min-width:0}
.section-head,.test-grid,.pricing-band-grid{grid-template-columns:1fr;gap:32px}
.services-grid,.test-cards,.card-grid{grid-template-columns:1fr 1fr}
.checklist{grid-template-columns:1fr}
.steps{grid-template-columns:1fr;gap:40px;padding-top:48px}
.test-meta{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:32px}
.foot-grid{grid-template-columns:1fr 1fr;gap:32px}
/* Prevent grid items from forcing horizontal overflow due to min-content */
.svc,.diff-item,.path-card,.step,.test-card,.card{min-width:0}
}
@media (max-width:680px){
:root{--gutter:22px}
.section{padding:80px 0}
.section-lg{padding:100px 0}
.services-grid,.test-cards,.card-grid{grid-template-columns:1fr}
.hero{min-height:520px}
.hero-inner{padding:48px 0 40px}
/* Mobile: pill buttons side-by-side. Tighter padding + smaller font so both fit.
Bottom margin keeps them off the trust-stats below. */
.hero-cta-row{
display:flex;flex-direction:row;align-items:stretch;
gap:10px;flex-wrap:nowrap;width:100%;
margin-bottom:32px;
}
.hero-cta-row > *{
padding:13px 14px;font-size:11px;letter-spacing:.03em;
min-width:0;text-align:center;white-space:nowrap;
border-radius:9999px;
}
/* Primary takes ~2/3 because the long "Book Free Testosterone Check" needs the room */
.hero-cta-row .btn-primary{padding:13px 14px;flex:2 1 0}
.hero-cta-row .btn-line-hero{
flex:1 1 0;padding:13px 12px;
border:1.5px solid rgba(255,255,255,.55);
color:#fff;background:transparent;gap:6px;
}
.hero-cta-row .btn-line-hero::before{width:14px;height:14px}
.big-price{font-size:84px}
.big-price small{font-size:36px;margin-left:4px}
.path-card .price-line{font-size:48px}
.path-card .price-line small{font-size:24px}
.quote-text{font-size:22px}
.hero-stat-num{font-size:32px}
.hero-stat-label{font-size:10px}
}
/* Belt-and-suspenders: prevent any unintended horizontal scroll on the page itself.
Use `clip` (not `hidden`) so position:sticky on the nav still works — `hidden` creates
a scroll container that breaks sticky parents. */
html,body{overflow-x:clip}
/* About-page doctor profile (founder + bio) */
.doctor-profile-grid{
display:grid;grid-template-columns:.9fr 1.4fr;gap:80px;align-items:start;
}
@media (max-width:900px){
.doctor-profile-grid{grid-template-columns:1fr;gap:32px}
.doctor-profile-grid > div:first-child{max-width:420px;margin:0 auto}
}
/* About-page team + clinic grids responsive */
@media (max-width:900px){
.team-grid{grid-template-columns:1fr!important}
.clinic-grid{grid-template-columns:repeat(2,1fr)!important}
}
/* Per-image focal points across about-page clinic gallery so faces stay in frame */
.clinic-grid img,.team-grid img{object-position:center 30%}
.team-grid img[src*="farhan-seated"]{object-position:center 22%}
.team-grid img[src*="rachael-seated"]{object-position:center 25%}
.team-grid img[src*="mina-shipman"]{object-position:center 22%}
.team-grid img[src*="cindy-kummerle"]{object-position:center 22%}
.clinic-grid img[src*="patient-front-desk"]{object-position:center 35%}
.clinic-grid img[src*="rachael-consultation"]{object-position:center 30%}
.clinic-grid img[src*="mina-phlebotomy"]{object-position:center 40%}
.clinic-grid img[src*="staff-iv-prep"]{object-position:center 40%}
.clinic-grid img[src*="clinic-nurses-station"]{object-position:center 35%}
.included-img img{object-position:center 35%}
@media (max-width:560px){
.clinic-grid{grid-template-columns:1fr!important}
}
/* ---------- Homepage services skim block (TL;DR for fast scanners) ---------- */
.skim-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.skim-tile{
display:flex;flex-direction:column;
padding:24px 22px 22px;
background:#fff;border:1px solid var(--line);
text-decoration:none;color:inherit;
transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
min-height:170px;
}
.skim-tile:hover{
border-color:var(--gold);transform:translateY(-2px);
box-shadow:0 12px 32px rgba(0,0,0,.06);
}
.skim-name{
font-size:15px;font-weight:600;letter-spacing:-.005em;
color:var(--ink);line-height:1.25;margin-bottom:8px;
}
.skim-blurb{
font-size:13px;line-height:1.5;color:var(--ink-3);
flex:1;margin-bottom:14px;
}
.skim-price{
font-family:var(--font-serif);font-style:italic;font-weight:500;
font-size:24px;line-height:1;color:var(--gold);
border-top:1px solid var(--line);padding-top:12px;
}
.skim-price span{
display:block;font-family:var(--font-sans);font-style:normal;font-weight:600;
font-size:11px;letter-spacing:.06em;text-transform:uppercase;
color:var(--ink-4);margin-top:4px;
}
.skim-tile:hover .skim-price{color:var(--gold-2)}
@media (max-width:1100px){.skim-grid{grid-template-columns:repeat(3,1fr);gap:12px}}
@media (max-width:760px){
.skim-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.skim-tile{padding:18px 16px 16px;min-height:auto}
.skim-name{font-size:14px}
.skim-blurb{font-size:12px}
.skim-price{font-size:20px;padding-top:10px}
}
@media (max-width:420px){.skim-grid{grid-template-columns:1fr}}
/* ---------- Homepage clinic / team photo strip ---------- */
.home-clinic-grid{
display:grid;gap:14px;
grid-template-columns:repeat(4,1fr);
grid-template-rows:240px 240px 200px;
margin-top:48px;
}
.home-clinic-photo{
position:relative;overflow:hidden;
background:#1a1a1a;border:1px solid var(--line);
display:block;text-decoration:none;
transition:transform .25s ease, border-color .25s ease;
}
.home-clinic-photo:hover{transform:translateY(-2px);border-color:var(--gold)}
.home-clinic-photo img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block}
/* Per-image focal points so faces aren't cropped out on the desktop tile grid */
.home-clinic-photo img[src*="farhan-white-coat"]{object-position:center 18%}
.home-clinic-photo img[src*="rachael-white-coat"]{object-position:center 22%}
.home-clinic-photo img[src*="patient-front-desk"]{object-position:center 30%}
.home-clinic-photo img[src*="clinic-nurses-station"]{object-position:center 35%}
.home-clinic-photo img[src*="mina-phlebotomy"]{object-position:center 40%}
.home-clinic-photo img[src*="rachael-prp"]{object-position:center 35%}
/* Two big featured tiles (Farhan + Rachael) each span 2 cols × 2 rows.
Remaining four clinic photos fill row 3 in equal columns. */
.home-clinic-photo:nth-child(1){grid-column:1 / span 2;grid-row:1 / span 2}
.home-clinic-photo:nth-child(2){grid-column:3 / span 2;grid-row:1 / span 2}
.home-clinic-photo:nth-child(3){grid-column:1;grid-row:3}
.home-clinic-photo:nth-child(4){grid-column:2;grid-row:3}
.home-clinic-photo:nth-child(5){grid-column:3;grid-row:3}
.home-clinic-photo:nth-child(6){grid-column:4;grid-row:3}
.home-clinic-cap{
position:absolute;left:0;right:0;bottom:0;
padding:20px 22px;color:#fff;
background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));
z-index:2;
}
.home-clinic-cap .cap-tag{
font-size:10px;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;color:var(--gold);margin-bottom:4px;
}
.home-clinic-cap .cap-name{font-size:16px;font-weight:600;letter-spacing:-.005em;color:#fff}
@media (max-width:900px){
.home-clinic-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:auto;gap:10px}
.home-clinic-photo{aspect-ratio:1}
/* On mobile, both featured tiles stack full-width above the smaller four. */
.home-clinic-photo:nth-child(1){grid-column:1 / -1;grid-row:auto;aspect-ratio:4/3}
.home-clinic-photo:nth-child(2){grid-column:1 / -1;grid-row:auto;aspect-ratio:4/3}
.home-clinic-photo:nth-child(3),
.home-clinic-photo:nth-child(4),
.home-clinic-photo:nth-child(5),
.home-clinic-photo:nth-child(6){grid-column:auto;grid-row:auto;aspect-ratio:1}
}
@media (max-width:480px){
.home-clinic-photo:nth-child(1),
.home-clinic-photo:nth-child(2){aspect-ratio:4/5}
}
/* ---------- Video components ---------- */
/* Full-width hero / story video block (homepage). Click-to-play on poster. */
.video-feature{
position:relative;display:block;width:100%;
aspect-ratio:16/9;
background:#000;border:1px solid var(--line-dark);
overflow:hidden;cursor:pointer;
text-decoration:none;
transition:transform .3s ease, box-shadow .3s ease;
}
.video-feature:hover{transform:translateY(-2px);box-shadow:0 24px 64px rgba(200,164,90,.18)}
.video-feature img.video-poster,
.video-feature video{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.video-feature::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.55) 100%);
pointer-events:none;
}
.video-feature .video-play{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:96px;height:96px;border-radius:50%;
background:rgba(0,0,0,.55);
border:1.5px solid var(--gold);
display:flex;align-items:center;justify-content:center;
z-index:3;transition:background .25s ease, transform .25s ease;
pointer-events:none;
}
.video-feature:hover .video-play{background:var(--gold);transform:translate(-50%,-50%) scale(1.06)}
.video-feature .video-play::after{
content:"";display:block;
width:0;height:0;
border-left:22px solid var(--gold);
border-top:14px solid transparent;
border-bottom:14px solid transparent;
margin-left:6px;
transition:border-color .25s ease;
}
.video-feature:hover .video-play::after{border-left-color:#000}
.video-feature .video-label{
position:absolute;left:32px;bottom:32px;z-index:3;
color:#fff;max-width:60%;
}
.video-feature .video-label .eyebrow{color:var(--gold);margin-bottom:8px;display:flex}
.video-feature .video-label h3{
text-transform:none;font-size:clamp(22px,3vw,32px);
font-weight:600;letter-spacing:-.005em;color:#fff;line-height:1.1;
}
.video-feature.is-playing::after,
.video-feature.is-playing .video-play,
.video-feature.is-playing .video-label{display:none}
.video-feature.is-playing{cursor:default}
/* Video testimonial grid (3 cards) */
.video-testimonials{
display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
margin-top:48px;
}
.video-card{
position:relative;display:block;aspect-ratio:9/16;
background:#000;border:1px solid var(--line-dark);
overflow:hidden;cursor:pointer;text-decoration:none;
transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.video-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 18px 48px rgba(0,0,0,.45)}
.video-card img,
.video-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.video-card::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.15) 35%,rgba(0,0,0,.7) 100%);
pointer-events:none;
}
.video-card .video-play{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:64px;height:64px;border-radius:50%;
background:rgba(0,0,0,.55);border:1.5px solid var(--gold);
display:flex;align-items:center;justify-content:center;z-index:3;
pointer-events:none;
}
.video-card:hover .video-play{background:var(--gold)}
.video-card .video-play::after{
content:"";width:0;height:0;
border-left:14px solid var(--gold);
border-top:9px solid transparent;border-bottom:9px solid transparent;
margin-left:4px;
}
.video-card:hover .video-play::after{border-left-color:#000}
.video-card .video-meta{
position:absolute;left:18px;right:18px;bottom:16px;z-index:3;color:#fff;
}
.video-card .video-meta .name{font-size:14px;font-weight:600;letter-spacing:.005em}
.video-card .video-meta .tag{
font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
color:var(--gold);margin-bottom:4px;
}
.video-card.is-playing::after,
.video-card.is-playing .video-play,
.video-card.is-playing .video-meta{display:none}
.video-card.is-playing{cursor:default}
.quote-card-static{
background:#fff;border:1px solid var(--line);
padding:32px 28px;
display:flex;flex-direction:column;justify-content:center;
min-width:0;
}
.quote-card-static .quote-text{margin:0;font-style:italic}
.quote-card-static .quote-author{display:flex;align-items:center;gap:12px;font-weight:600;font-size:14px;color:var(--ink)}
.quote-card-static .avatar{
width:40px;height:40px;border-radius:50%;
background:var(--gold);color:#000;display:flex;align-items:center;justify-content:center;
font-family:var(--font-serif);font-style:italic;font-weight:500;
}
@media (max-width:900px){
.video-testimonials{grid-template-columns:1fr 1fr;gap:16px}
.quote-card-static{grid-column:1 / -1}
}
@media (max-width:560px){
.video-testimonials{grid-template-columns:1fr;gap:16px}
.video-card{aspect-ratio:4/5;max-width:520px;margin:0 auto;width:100%}
.video-feature .video-label{left:20px;right:20px;bottom:20px;max-width:none}
.video-feature .video-play{width:72px;height:72px}
.video-feature .video-play::after{border-left-width:18px;border-top-width:11px;border-bottom-width:11px}
}
/* ============================================================
SERVICE PAGE PHOTO COMPONENTS
Three editorial treatments to break long-form scroll:
- svc-photo-band: full wrap-width image with caption strip
- svc-photo-split: image + text side-by-side, alternating sides
- svc-photo-trio: three-up portrait gallery
============================================================ */
.svc-photo-band{margin:96px auto;max-width:var(--wrap-w,1200px);padding:0 var(--gutter,24px)}
.svc-photo-band-frame{position:relative;overflow:hidden;border-radius:2px;background:var(--ink)}
.svc-photo-band-frame img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block}
.svc-photo-band-cap{margin-top:18px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.svc-photo-band-cap-text{flex:1;min-width:280px;font-size:16px;line-height:1.5;color:var(--ink-2);max-width:640px;font-style:italic;font-family:var(--font-serif);letter-spacing:.005em}
.svc-photo-band-cap-meta{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);text-align:right;flex-shrink:0;line-height:1.5}
.svc-photo-band-cap-meta strong{display:block;color:var(--gold);font-weight:600}
.svc-photo-split-wrap{margin:120px auto;max-width:var(--wrap-w,1200px);padding:0 var(--gutter,24px)}
.svc-photo-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.svc-photo-split-img{position:relative;overflow:hidden;border-radius:2px}
.svc-photo-split-img img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.svc-photo-split.is-flipped .svc-photo-split-img{order:2}
.svc-photo-split-text .eyebrow{margin-bottom:18px}
.svc-photo-split-text h3{font-size:clamp(28px,3vw,38px);font-weight:600;letter-spacing:-.012em;line-height:1.15;margin-bottom:20px;text-transform:none;color:var(--ink)}
.svc-photo-split-text h3 .serif{font-family:var(--font-serif);font-style:italic;font-weight:500;color:var(--gold-2)}
.svc-photo-split-text p{font-size:17px;line-height:1.7;color:var(--ink-2);margin-bottom:14px}
.svc-photo-split-text p:last-child{margin-bottom:0}
.svc-photo-split-stat{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);display:flex;gap:32px}
.svc-photo-split-stat > div strong{display:block;font-family:var(--font-serif);font-style:italic;font-size:30px;color:var(--gold);font-weight:500;line-height:1}
.svc-photo-split-stat > div span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin-top:8px}
.svc-photo-trio-wrap{margin:96px auto;max-width:var(--wrap-w,1200px);padding:0 var(--gutter,24px)}
.svc-photo-trio-head{text-align:center;margin-bottom:48px}
.svc-photo-trio-head h3{font-size:clamp(26px,2.6vw,34px);font-weight:600;letter-spacing:-.01em;text-transform:none;margin-top:14px;margin-bottom:16px}
.svc-photo-trio-head p{font-size:16px;line-height:1.6;color:var(--ink-3);max-width:560px;margin:0 auto}
.svc-photo-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.svc-photo-trio-item{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:2px;background:var(--ink)}
.svc-photo-trio-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.svc-photo-trio-item:hover img{transform:scale(1.04)}
.svc-photo-trio-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55) 100%);pointer-events:none}
.svc-photo-trio-cap{position:absolute;left:18px;right:18px;bottom:16px;color:#fff;z-index:2}
.svc-photo-trio-cap .tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:4px;display:block}
.svc-photo-trio-cap .name{font-size:15px;font-weight:500;line-height:1.3;display:block;text-shadow:0 1px 12px rgba(0,0,0,.5)}
@media(max-width:900px){
.svc-photo-band{margin:64px auto}
.svc-photo-band-frame img{aspect-ratio:16/10}
.svc-photo-split-wrap{margin:72px auto}
.svc-photo-split{grid-template-columns:1fr;gap:32px}
.svc-photo-split.is-flipped .svc-photo-split-img{order:0}
.svc-photo-split-img img{aspect-ratio:4/3}
.svc-photo-trio-wrap{margin:64px auto}
.svc-photo-trio{grid-template-columns:1fr;gap:10px}
.svc-photo-trio-item{aspect-ratio:16/10}
.svc-photo-band-cap{flex-direction:column;align-items:flex-start;gap:12px}
.svc-photo-band-cap-meta{text-align:left}
}
/* ============================================================
SERVICE PAGE — UPGRADED EDITORIAL TREATMENTS
- svc-photo-cinema: full-bleed dark hero with text overlay (Hone/Equinox style)
- svc-photo-gallery: aspirational lifestyle gallery (replaces staff trio)
============================================================ */
.svc-photo-cinema{position:relative;margin:120px 0;padding:0}
.svc-photo-cinema-frame{position:relative;overflow:hidden;background:#000}
.svc-photo-cinema-frame img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block;opacity:.86;transition:transform 1.4s cubic-bezier(.2,.7,.3,1)}
.svc-photo-cinema:hover .svc-photo-cinema-frame img{transform:scale(1.02)}
.svc-photo-cinema-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:80px clamp(32px,6vw,120px);background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.45) 30%,rgba(0,0,0,.05) 60%,transparent 80%);color:#fff;pointer-events:none}
.svc-photo-cinema-tag{position:absolute;top:32px;right:clamp(32px,6vw,120px);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7);padding:8px 14px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.2);backdrop-filter:blur(4px)}
.svc-photo-cinema-eyebrow{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:24px}
.svc-photo-cinema-eyebrow::before{content:"";display:inline-block;width:32px;height:1px;background:var(--gold);margin-right:14px;vertical-align:middle}
.svc-photo-cinema-headline{font-size:clamp(36px,5.2vw,68px);font-weight:300;font-family:var(--font-serif);font-style:italic;letter-spacing:-.018em;line-height:1.04;max-width:760px;margin:0 0 24px;color:#fff;text-transform:none}
.svc-photo-cinema-meta{font-size:16px;line-height:1.55;color:rgba(255,255,255,.82);max-width:560px;letter-spacing:.003em;margin:0;font-weight:300}
.svc-photo-gallery-wrap{margin:120px auto;max-width:var(--wrap-w,1200px);padding:0 var(--gutter,24px)}
.svc-photo-gallery-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px;gap:48px;border-bottom:1px solid var(--line);padding-bottom:32px;flex-wrap:wrap}
.svc-photo-gallery-head .eyebrow{margin-bottom:18px}
.svc-photo-gallery-head h3{font-size:clamp(28px,3vw,40px);font-weight:600;letter-spacing:-.012em;text-transform:none;line-height:1.12;margin:0;flex:1;min-width:280px}
.svc-photo-gallery-head h3 .serif{font-family:var(--font-serif);font-style:italic;font-weight:500;color:var(--gold-2)}
.svc-photo-gallery-head .meta{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);text-align:right;flex-shrink:0;line-height:1.7;font-weight:500}
.svc-photo-gallery-head .meta strong{display:block;color:var(--gold);letter-spacing:.16em;font-weight:600}
.svc-photo-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.svc-photo-gallery-item{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--ink)}
.svc-photo-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) brightness(.96);transition:transform 1s cubic-bezier(.2,.7,.3,1),filter .6s ease}
.svc-photo-gallery-item:hover img{transform:scale(1.04);filter:saturate(1) brightness(1)}
.svc-photo-gallery-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.65) 100%);pointer-events:none}
.svc-photo-gallery-cap{position:absolute;left:22px;right:22px;bottom:20px;color:#fff;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.svc-photo-gallery-cap .num{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:20px;color:var(--gold);letter-spacing:0;line-height:1}
.svc-photo-gallery-cap .lbl{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;text-align:right;line-height:1.4}
/* Refinements to existing split for tighter editorial feel */
.svc-photo-split-text h3{font-size:clamp(30px,3.4vw,44px)}
.svc-photo-split-stat > div strong{font-size:34px}
@media(max-width:900px){
.svc-photo-cinema{margin:64px 0}
.svc-photo-cinema-overlay{padding:48px 24px;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.2) 70%,transparent 90%)}
.svc-photo-cinema-headline{font-size:clamp(28px,8vw,40px);max-width:none}
.svc-photo-cinema-tag{top:20px;right:20px;font-size:9px;padding:6px 10px}
.svc-photo-gallery-wrap{margin:72px auto}
.svc-photo-gallery-head{flex-direction:column;align-items:flex-start;gap:16px}
.svc-photo-gallery-head .meta{text-align:left}
.svc-photo-gallery-grid{grid-template-columns:1fr;gap:10px}
.svc-photo-gallery-item{aspect-ratio:16/9}
}
/* ============================================================
HOME PAGE — HORIZONTAL SERVICE CARDS
2-column grid, text left + image right with gradient blend.
7th card centers alone in the row.
============================================================ */
.svc-cards-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1100px;margin:0 auto}
.svc-card-row{position:relative;display:grid;grid-template-columns:1.1fr 1fr;background:#141414;border:1px solid #1f1f1f;border-radius:6px;overflow:hidden;text-decoration:none;color:inherit;min-height:220px;transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .4s ease,box-shadow .4s ease}
.svc-card-row:hover{border-color:#2e2a20;transform:translateY(-2px);box-shadow:0 12px 40px -12px rgba(200,164,90,.18)}
.svc-card-row-text{padding:36px 32px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.svc-card-row-title{font-size:22px;font-weight:600;color:var(--gold);letter-spacing:-.005em;margin:0 0 16px;text-transform:none;line-height:1.2}
.svc-card-row-rule{height:1px;width:48px;background:rgba(200,164,90,.32);margin:0 0 18px}
.svc-card-row-body{font-size:14.5px;line-height:1.6;color:#bdbdbd;margin:0 0 24px;flex:1}
.svc-card-row-cta{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:8px;align-self:flex-start;transition:gap .3s ease}
.svc-card-row-cta::after{content:"→";font-style:italic;font-family:var(--font-serif);font-size:18px;font-weight:500;line-height:1}
.svc-card-row:hover .svc-card-row-cta{gap:14px}
.svc-card-row-img{position:relative;overflow:hidden}
.svc-card-row-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.svc-card-row:hover .svc-card-row-img img{transform:scale(1.04)}
.svc-card-row-img::before{content:"";position:absolute;inset:0;background:linear-gradient(to right,#141414 0%,rgba(20,20,20,.55) 30%,transparent 65%);pointer-events:none;z-index:1}
.svc-card-row.is-solo{grid-column:1 / -1;max-width:540px;margin:0 auto}
@media(max-width:900px){
.svc-cards-wrap{grid-template-columns:1fr}
.svc-card-row{grid-template-columns:1.1fr 1fr;min-height:200px}
.svc-card-row.is-solo{max-width:none}
}
@media(max-width:600px){
.svc-card-row{grid-template-columns:1.5fr 1fr;min-height:130px}
.svc-card-row-text{padding:16px 18px}
.svc-card-row-title{font-size:16px;margin:0 0 8px;line-height:1.2}
.svc-card-row-rule{width:32px;margin:0 0 8px}
.svc-card-row-body{font-size:12.5px;line-height:1.4;margin:0 0 10px}
.svc-card-row-cta{font-size:10px;letter-spacing:.14em;gap:6px}
.svc-card-row-cta::after{font-size:14px}
.svc-card-row-img{aspect-ratio:auto}
.svc-card-row-img::before{background:linear-gradient(to right,#141414 0%,rgba(20,20,20,.55) 35%,transparent 70%)}
}
/* ============================================================
INSURANCE COMPARISON MATH BLOCK
Used on home page insurance section and TRT pricing area
============================================================ */
.cost-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:32px auto 24px;max-width:920px}
.cost-compare-card{background:#181818;border:1px solid #2a2a2a;padding:28px 28px 24px;color:#dcdcdc;position:relative}
.cost-compare-card.is-cash{border-left:3px solid var(--gold)}
.cost-compare-tag{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600;margin-bottom:14px}
.cost-compare-card.is-cash .cost-compare-tag{color:var(--gold)}
.cost-compare-h{font-size:18px;font-weight:600;color:#fff;text-transform:none;letter-spacing:-.005em;line-height:1.25;margin-bottom:18px}
.cost-compare-rows{font-size:14px;line-height:1.5;color:rgba(255,255,255,.72)}
.cost-compare-rows > div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.08);gap:12px}
.cost-compare-rows > div:last-child{border-bottom:0}
.cost-compare-rows .label{color:rgba(255,255,255,.6)}
.cost-compare-rows .val{color:#fff;font-weight:500;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
.cost-compare-total{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cost-compare-total .label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600}
.cost-compare-total .val{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:32px;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.cost-compare-card.is-cash .cost-compare-total .val{color:var(--gold)}
.cost-compare-foot{font-size:12px;line-height:1.5;color:rgba(255,255,255,.45);margin-top:14px;font-style:italic;font-family:var(--font-serif)}
.cost-compare-note{max-width:920px;margin:8px auto 0;font-size:12px;color:rgba(255,255,255,.45);line-height:1.55;text-align:center}
/* Light-section variant for the TRT page (which uses a light background) */
.cost-compare.is-light .cost-compare-card{background:#fff;border-color:var(--line);color:var(--ink-2)}
.cost-compare.is-light .cost-compare-tag{color:var(--ink-4)}
.cost-compare.is-light .cost-compare-card.is-cash .cost-compare-tag{color:var(--gold-2)}
.cost-compare.is-light .cost-compare-h{color:var(--ink)}
.cost-compare.is-light .cost-compare-rows{color:var(--ink-3)}
.cost-compare.is-light .cost-compare-rows .label{color:var(--ink-4)}
.cost-compare.is-light .cost-compare-rows .val{color:var(--ink)}
.cost-compare.is-light .cost-compare-rows > div{border-bottom-color:rgba(0,0,0,.08)}
.cost-compare.is-light .cost-compare-total{border-top-color:rgba(0,0,0,.15)}
.cost-compare.is-light .cost-compare-total .label{color:var(--ink-4)}
.cost-compare.is-light .cost-compare-total .val{color:var(--ink)}
.cost-compare.is-light .cost-compare-foot{color:var(--ink-4)}
.cost-compare.is-light .cost-compare-note{color:var(--ink-4)}
@media(max-width:720px){
.cost-compare{grid-template-columns:1fr;gap:12px}
}
/* ============================================================
GUIDE PAGE FIXES — mobile overflow + collapsible mobile TOC
============================================================ */
/* Fix #1 — allow grid items to shrink below content min-width.
Without this, a wide child (like an embedded table) forces the
prose column to the table's natural width, overflowing on mobile. */
.guide-grid > *{min-width:0}
/* Fix #2 — constrain prose width per-breakpoint, override inline style */
.guide-grid .prose{max-width:100%}
@media(min-width:901px){
.guide-grid .prose{max-width:760px}
}
/* Fix #3 — wide content (tables, embeds, code, images, long URLs) stays inside */
.guide-grid .prose-embed{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.guide-grid .prose-embed > *,
.guide-grid .prose-embed table{max-width:100%}
.guide-grid .prose pre,
.guide-grid .prose code{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;word-break:break-word}
.guide-grid .prose img{max-width:100%;height:auto}
.guide-grid .prose a{word-break:break-word}
/* Fix #4 — collapsible mobile TOC.
Hidden on desktop where the sticky sidebar TOC handles navigation.
On mobile, sits at the top of the article body as an expandable list. */
.toc-mobile{display:none}
@media(max-width:900px){
.toc-mobile{
display:block;
/* STICKY under the sticky nav so it stays visible mid-scroll */
position:sticky;
top:84px;
z-index:50;
background:var(--bg-tinted);
border:1px solid var(--line);
border-left:3px solid var(--gold);
margin:0 0 36px;
border-radius:2px;
box-shadow:0 4px 16px -8px rgba(0,0,0,.12);
}
.toc-mobile summary{
display:flex;align-items:center;justify-content:space-between;
padding:14px 18px;cursor:pointer;list-style:none;
font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
color:var(--gold-2);
user-select:none;
background:var(--bg-tinted);
}
.toc-mobile summary::-webkit-details-marker{display:none}
.toc-mobile summary::marker{content:""}
.toc-mobile summary::after{
content:"+";font-size:22px;font-weight:300;line-height:1;
color:var(--gold);transition:transform .3s ease;
}
.toc-mobile[open] summary::after{content:"−"}
.toc-mobile-list{
padding:4px 18px 12px;
border-top:1px solid var(--line);
background:#fff;
/* Cap height so an expanded TOC doesn't take the whole screen — internal scroll */
max-height:calc(100vh - 200px);
overflow-y:auto;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
}
.toc-mobile-list a{
display:block;padding:12px 0;
font-size:14.5px;line-height:1.4;color:var(--ink-2);
border-bottom:1px solid var(--line);text-decoration:none;
font-weight:500;
}
.toc-mobile-list a:last-child{border-bottom:0}
.toc-mobile-list a:active,
.toc-mobile-list a:hover{color:var(--gold-2)}
/* When user jumps to a section, the sticky TOC + sticky nav cover ~150px,
so push anchor targets down a bit so the heading isn't hidden underneath */
.prose h2[id]{scroll-margin-top:160px}
}
/* ============================================================
GUIDE TABLES — comparison tables in guide content
Desktop: clean editorial table with hover, gold optimal cells
Tablet (769–900px): horizontal scroll fallback
Mobile (≤768px): stacked-card transform with data-label pattern
============================================================ */
.guide-grid .prose table{
width:100%;
border-collapse:collapse;
font-size:14.5px;line-height:1.5;
margin:32px 0;
background:#fff;
border:1px solid var(--line);
}
.guide-grid .prose table caption{
caption-side:top;
text-align:left;
padding:0 0 14px;
font-size:13px;font-weight:600;
letter-spacing:.04em;
color:var(--ink-2);
line-height:1.45;
}
.guide-grid .prose table thead{
background:var(--bg-tinted);
}
.guide-grid .prose table th{
text-align:left;
padding:14px 16px;
font-weight:700;font-size:11.5px;
letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-3);
border-bottom:1px solid var(--line-2);
vertical-align:bottom;
}
.guide-grid .prose table td{
padding:14px 16px;
border-bottom:1px solid var(--line);
vertical-align:top;
color:var(--ink-2);
transition:background .15s ease;
}
.guide-grid .prose table tbody tr:last-child td{border-bottom:0}
.guide-grid .prose table tbody tr:hover td{background:rgba(200,164,90,.04)}
.guide-grid .prose table td.optimal-cell{
background:rgba(200,164,90,.08);
color:var(--ink);
font-weight:600;
position:relative;
}
.guide-grid .prose table td.optimal-cell::before{
content:"";
position:absolute;left:0;top:0;bottom:0;
width:2px;background:var(--gold);
opacity:.6;
}
.guide-grid .prose table tbody tr:hover td.optimal-cell{background:rgba(200,164,90,.16)}
/* Tablet — between mobile and desktop, horizontal scroll fallback */
@media (max-width:900px) and (min-width:769px){
.guide-grid .prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
}
/* Mobile — transform to stacked cards using data-label attributes
(auto-added by JS in app.js from the matching | ) */
@media (max-width:768px){
/* Defeat CMS-embedded min-width that forces tables wider than mobile viewport */
.guide-grid .prose table,
.guide-grid .prose .hormone-table{
min-width:0 !important;
width:100% !important;
max-width:100% !important;
}
.guide-grid .prose table td,
.guide-grid .prose .hormone-table td{
white-space:normal !important;
}
.guide-grid .prose table{
display:block;
border:0;background:transparent;
margin:24px 0;
overflow:visible;
}
.guide-grid .prose table caption{
padding:0 0 16px;
font-size:13px;color:var(--ink-2);
}
.guide-grid .prose table thead{display:none}
.guide-grid .prose table tbody{display:block}
.guide-grid .prose table tr{
display:block;
background:#fff;
border:1px solid var(--line);
border-left:3px solid var(--gold);
border-radius:2px;
margin-bottom:14px;
box-shadow:0 1px 3px rgba(0,0,0,.04);
/* Stagger fade-in */
opacity:0;
transform:translateY(10px);
animation:guideRowFade .55s cubic-bezier(.2,.7,.3,1) forwards;
}
.guide-grid .prose table tr:nth-child(1){animation-delay:.04s}
.guide-grid .prose table tr:nth-child(2){animation-delay:.10s}
.guide-grid .prose table tr:nth-child(3){animation-delay:.16s}
.guide-grid .prose table tr:nth-child(4){animation-delay:.22s}
.guide-grid .prose table tr:nth-child(5){animation-delay:.28s}
.guide-grid .prose table tr:nth-child(6){animation-delay:.34s}
.guide-grid .prose table tr:nth-child(7){animation-delay:.40s}
.guide-grid .prose table tr:nth-child(n+8){animation-delay:.46s}
/* First TD = card header */
.guide-grid .prose table tr td:first-child{
display:block;
padding:13px 16px 11px;
font-size:16px;font-weight:700;
color:var(--ink);
border-bottom:1px solid var(--line);
background:linear-gradient(to right,rgba(200,164,90,.08),transparent 70%);
line-height:1.3;
}
.guide-grid .prose table tr td:first-child::before{display:none}
/* Other TDs = label + value rows */
.guide-grid .prose table tr td{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:14px;
padding:11px 16px;
border-bottom:1px solid rgba(0,0,0,.05);
font-size:14px;line-height:1.45;
color:var(--ink-2);
}
.guide-grid .prose table tr td:last-child{border-bottom:0;padding-bottom:14px}
.guide-grid .prose table tr td::before{
content:attr(data-label);
flex:0 0 auto;max-width:45%;
font-size:10.5px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-4);
line-height:1.55;
padding-top:2px;
}
/* Value text aligns right */
.guide-grid .prose table tr td:not(:first-child){
text-align:right;
}
.guide-grid .prose table tr td.optimal-cell{
background:linear-gradient(to right,rgba(200,164,90,.06),rgba(200,164,90,.14));
color:var(--ink);
font-weight:600;
}
.guide-grid .prose table tr td.optimal-cell::before{
color:var(--gold-2);
}
.guide-grid .prose table tr td.optimal-cell::after{
content:"OPTIMAL";
position:absolute;right:14px;top:6px;
font-size:8px;font-weight:700;letter-spacing:.16em;
color:var(--gold-2);background:rgba(200,164,90,.18);
padding:2px 6px;border-radius:2px;
pointer-events:none;
}
.guide-grid .prose table tr td.optimal-cell{
position:relative;padding-top:24px;
}
}
@keyframes guideRowFade{
to{opacity:1;transform:translateY(0)}
}
|