/* Athēnix Patient Hub — concept. Tokens match athenixbody.com (and the finder).
   Layout: sidebar (content types + tag filters with counts) and a main column,
   the pattern both live Hubs use at desktop width. */
:root {
  --primary: #002b3c;
  --primary-2: #0a3b4e;
  --rust: #8a5535;
  --sand: #d0c0a7;
  --black: #0b0b0b;
  --white: #ffffff;
  --off-white: #fafafa;
  --cream: #f2efe9;
  --light-gray: #e6e9eb;
  --mid-gray: #575757;
  --text: var(--black);
  --text-2: var(--mid-gray);
  --border: var(--light-gray);
  --shadow: 0 1px 3px rgba(0,43,60,.06), 0 4px 12px rgba(0,43,60,.05);
  --shadow-lg: 0 10px 30px rgba(0,43,60,.14);
  --font: 'proxima-nova', 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;
  --max: 1440px;        /* Athēnix's own header grid */
  --hub-max: 1920px;    /* the Hub itself uses the screen */
  --side: 256px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--white); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Header (athenixbody.com) ─────────────────────────────────────────── */
/* Matches the Location + Provider Finder header exactly (one row, full width, read from its styles.css 2026-10-06) */
header { background: var(--primary); color: var(--white); position: relative; z-index: 50; }
.hdr-top { padding: 20px 0; }
.hdr-inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--hub-max); margin: 0 auto; padding: 0 48px; }   /* same width + side padding as .hub: logo lines up with the sidebar, the CTA with the content's right edge */
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand-logo { height: 32px; width: auto; display: block; }
.header-right { display: flex; align-items: center; gap: 40px; flex-shrink: 0; }
.header-contact { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--white); font-size: 15px; font-weight: 400; letter-spacing: .4px; white-space: nowrap; transition: color .2s; }
.header-contact:hover { color: var(--sand); }
.header-contact svg { width: 16px; height: 16px; flex-shrink: 0; }
.header-cta { background: var(--white); color: var(--primary); border: 1px solid var(--white); border-radius: 50px; padding: 14px 30px; font-size: 16px; font-weight: 400; letter-spacing: .4px; line-height: 1; text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s; }
.header-cta:hover { background: var(--sand); border-color: var(--sand); }
.hamburger-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: none; padding: 0; margin-left: auto; }
.hamburger-btn svg { width: 26px; height: 26px; color: var(--white); }
.mobile-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--primary); box-shadow: 0 12px 24px rgba(0,43,60,.25); z-index: 999; padding: 8px 0 16px; border-top: 1px solid rgba(255,255,255,.12); }
.mobile-menu.open { display: block; }
.mobile-menu a { display: flex; align-items: center; gap: 10px; padding: 14px 20px; color: var(--white); text-decoration: none; font-size: 16px; font-weight: 400; letter-spacing: .4px; }
.mobile-menu a svg { width: 16px; height: 16px; }
.mobile-menu a:hover { background: rgba(255,255,255,.08); }
.mobile-menu .mobile-menu-divider { height: 1px; background: rgba(255,255,255,.12); margin: 8px 20px; }
.mobile-menu a.header-cta { display: inline-flex; justify-content: center; color: var(--primary); background: var(--white); margin: 10px 20px 0; padding: 14px 30px; }

/* ── Shell ────────────────────────────────────────────────────────────── */
.hub { max-width: var(--hub-max); margin: 0 auto; padding: 36px 48px 60px; display: grid; grid-template-columns: var(--side) 1fr; gap: 44px; align-items: start; }

/* Sidebar */
.side { position: sticky; top: 24px; }
.side-title { font-size: 20px; font-weight: 600; color: var(--primary); margin: 2px 0 18px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.side-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 10px; border: none; background: transparent; font-size: 14px; font-weight: 600; color: var(--primary); text-align: left; }
.side-link svg { width: 16px; height: 16px; opacity: .8; }
.side-link:hover { background: var(--cream); }
.side-link.active { background: var(--primary); color: var(--white); }
.side-link .count { margin-left: auto; font-size: 12px; font-weight: 500; opacity: .6; }
.side-group { margin-bottom: 18px; }
.side-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin-bottom: 8px; padding-left: 12px; }
.side-list { display: flex; flex-direction: column; }
.side-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; border: none; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 500; color: var(--text); text-align: left; }
.side-item:hover { background: var(--cream); }
.side-item.active { background: var(--cream); color: var(--primary); font-weight: 600; box-shadow: none; }
.side-item .n { font-size: 12px; color: var(--text-2); }
/* Accordions: one open at a time; the header shows the current pick when closed */
.side-acc { border-top: 1px solid var(--border); padding: 6px 0; }
.side-acc-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: none; background: transparent; text-align: left; }
.side-acc-head .side-label { margin: 0; padding: 0; }
.side-acc-value { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--primary); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-acc-head svg { width: 14px; height: 14px; color: var(--text-2); transition: transform .2s; flex-shrink: 0; }
.side-acc.open .side-acc-head svg { transform: rotate(180deg); }
.side-acc .side-list { display: none; padding-bottom: 6px; }
.side-acc.open .side-list { display: flex; }
.side-acc.open .side-acc-value { display: none; }
.side-select { width: 100%; font: inherit; font-size: 14px; font-weight: 500; color: var(--primary); padding: 9px 34px 9px 12px; border: 1px solid rgba(0,43,60,.18); border-radius: 10px; background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002b3c' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center/14px; -webkit-appearance: none; appearance: none; }
.clear-btn { margin-top: 4px; padding: 9px 12px; border-radius: 10px; border: 1px solid transparent; background: transparent; font-size: 13px; font-weight: 600; color: var(--rust); }
.clear-btn:hover { border-color: var(--rust); }

/* On the Hub overview the filters are hidden; they belong inside a content type */
body.hub-overview .side-group, body.hub-overview .side-acc, body.hub-overview .clear-btn, body.hub-overview .m-bar { display: none !important; }

/* Main */
.main { min-width: 0; }
/* Mobile bar + filter sheet: hidden on desktop */
.m-bar, .m-tabs, .sheet, .sheet-backdrop { display: none; }
body.patient-view .m-tabs { display: none !important; }
.main-head[hidden] { display: none !important; }
.main-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.result-line { margin: 0; font-size: 14px; color: var(--text-2); }
.result-line b { color: var(--primary); }
.hub-stats { display: flex; gap: 24px; flex-shrink: 0; }
.stat { text-align: right; }
.stat b { display: block; font-size: 22px; font-weight: 600; color: var(--primary); line-height: 1; }
.stat span { font-size: 12px; color: var(--text-2); }

.hub-section { margin-bottom: 48px; }
.hub-section.hidden, .hub-section[hidden], .side-link[hidden] { display: none !important; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
@media (min-width: 901px) { .section-head { margin-bottom: 24px; } }   /* more air between wall titles and their grids on desktop */
.section-head h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; color: var(--primary); }
.section-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--white); display: inline-flex; align-items: center; justify-content: center; }
.section-icon svg { width: 15px; height: 15px; }
.see-all { background: none; border: none; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rust); }

/* Featured journey hero: portrait still + story panel (Instagram stills are vertical) */
.hero { display: grid; grid-template-columns: 380px 1fr; background: var(--primary); color: var(--white); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); margin-bottom: 18px; min-height: 440px; }
.hero-media { position: relative; background: var(--primary-2); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-media .play { position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.hero-media .play svg { width: 22px; height: 22px; fill: currentColor; stroke: none; margin-left: 3px; }
.hero-body { padding: 36px 40px; display: flex; flex-direction: column; gap: 16px; }
.hero-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sand); }
.hero-name { font-size: 34px; font-weight: 600; line-height: 1.1; }
.hero-name span { font-size: 18px; font-weight: 400; opacity: .75; margin-left: 10px; }
.hero-quote { font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.88); margin: 0; max-width: 620px; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hero-facts { display: grid; grid-template-columns: repeat(3, auto); gap: 24px; justify-content: start; }
.fact b { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sand); margin-bottom: 4px; }
.fact span { font-size: 14px; color: rgba(255,255,255,.9); }
.stages { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stage-pill { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.8); }
.stage-pill.on { background: var(--sand); color: var(--primary); border-color: var(--sand); }
.stages .arrow { opacity: .4; font-size: 12px; }
.hero-cta { margin-top: auto; display: flex; align-items: center; gap: 14px; }
.btn-light { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: var(--white); color: var(--primary); font-size: 14px; font-weight: 600; border: none; }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: transparent; color: var(--white); font-size: 14px; font-weight: 600; border: 1px solid rgba(255,255,255,.35); }
.hero-nav { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; }
.hero-nav button { width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(0,43,60,.7); color: var(--white); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.hero-nav svg { width: 16px; height: 16px; }

.tag { padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(255,255,255,.14); color: var(--white); border: 1px solid rgba(255,255,255,.22); }
.tag.who { background: var(--sand); color: var(--primary); border-color: var(--sand); }

/* Featured journey: the Athēnix Lookbook popup, inline, in Hub styling */
.jfeat { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; background: var(--white); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); margin-bottom: 20px; }
.jfeat[hidden] { display: none; }
.jm-media { position: relative; background: var(--primary-2); aspect-ratio: 9 / 16; }
.jfeat .jm-media { aspect-ratio: auto; height: auto; align-self: stretch; min-height: 520px; }
@media (min-width: 901px) { #journeyHero, .jfeat-page { min-height: 660px; } #journeyHero .jm-media, .jfeat-page .jm-media { min-height: 0; } #journeyHero .jm-arrow { top: 330px; } }   /* at least 660 tall, grows for a long quote; the slider's arrows sit at a fixed 330px so they never move between slides   /* slider and journey page share one height, so the portrait has the same presence on both */   /* one height for every slide: the arrows stay put */
.jm-media img, .jm-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; background: #000; }
/* Lookbook covers: the whole studio photo, bottom-anchored, with its flat backdrop colour extended to fill the frame */
.jm-media.flat img { object-fit: contain; object-position: center bottom; background: transparent; }
/* Instagram covers are 9:16 frames: show them whole over a blurred copy instead of cropping to landscape */
.jm-media.portrait { overflow: hidden; }
.jm-media.portrait img { object-fit: contain; object-position: center; background: transparent; }
.jm-media.portrait img.jm-blur { object-fit: cover; filter: blur(28px) brightness(.8) saturate(1.1); transform: scale(1.2); }
.jm-play[hidden] { display: none; }
.jm-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; border: none; padding: 0; background: rgba(255,255,255,.92); color: var(--primary); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.jm-play svg { width: 24px; height: 24px; fill: currentColor; margin-left: 3px; }
.jm-handle { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; color: var(--white); font-size: 13px; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.jm-body { padding: 44px 48px 40px; display: flex; flex-direction: column; gap: 14px; min-width: 0; overflow: hidden; }
.jm-body > * { max-width: 640px; }
.jm-body .jm-quote { max-width: 30em; }
.jm-body .jm-quote { -webkit-line-clamp: unset; display: block; }
.jm-body .jm-quote { flex-shrink: 0; }   /* never squeezed by the card's height */
#journeyHero .jm-quote.long { font-size: 17px; line-height: 1.45; }   /* the two longest Lookbook quotes (Molly, Jasmin) fit the slider uncut */   /* always the whole quote (all 11 Lookbook quotes fit the slider card uncut) */   /* ~60 characters a line: a quote block, not a banner */
#journeyHero .jm-body { padding-right: 104px; }   /* keep text clear of the slider's next arrow */
@media (max-width: 1279px) and (min-width: 901px) { #journeyHero .jm-body { padding-right: 76px; } }
.jm-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rust); }
.jm-name { margin: 0; font-size: 34px; font-weight: 600; color: var(--primary); }
.jm-facts { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--text-2); }
.jm-facts b { color: var(--primary); font-weight: 600; }
.jm-rule { border: none; border-top: 1px solid var(--border); margin: 4px 0; width: 100%; }
.jm-who { display: flex; gap: 32px; flex-wrap: wrap; }
.jm-row { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; margin-top: 10px; }   /* a little more air under Procedures */
.jm-body .pv-label { margin-bottom: 6px; }
.stages.dark .stage-pill { border-color: rgba(0,43,60,.18); color: var(--text-2); }
.stages.dark .stage-pill.on { background: var(--sand); color: var(--primary); border-color: var(--sand); }
.stages.dark .arrow { color: var(--text-2); }
.jm-quote { margin: 6px 0 0; font-size: 19px; line-height: 1.5; font-style: italic; color: var(--rust); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.jm-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 18px; }

#journeyHero { cursor: pointer; }
.jfeat-page { cursor: default; margin-bottom: 0; }
.jt { margin-bottom: 0; }
.jt-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.jt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(0,43,60,.18); background: var(--white); color: var(--primary); font-size: 13px; font-weight: 600; }
.jt-chip span { font-size: 11px; color: var(--text-2); }
.jt-chip.active { background: var(--primary); color: var(--white); border-color: var(--primary); }
.jt-chip.active span { color: rgba(255,255,255,.7); }
.jt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.jt-post { position: relative; display: block; cursor: pointer; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: var(--primary); text-decoration: none; color: var(--white); box-shadow: var(--shadow); }
.jt-post img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .4s ease; }
.jt-post:hover img { transform: scale(1.03); }
.jt-stage-tag { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 999px; background: var(--sand); color: var(--primary); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.jt-post .play { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.jt-post .play svg { width: 16px; height: 16px; fill: currentColor; margin-left: 2px; }
.jt-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 14px 14px; background: linear-gradient(to top, rgba(0,20,30,.85), rgba(0,20,30,0)); }
.jt-date { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sand); }
.jt-title { font-size: 13.5px; line-height: 1.35; margin-top: 4px; }

/* Video lightbox */
.vlb-backdrop { position: fixed; inset: 0; z-index: 120; background: rgba(0,16,24,.86); display: flex; align-items: safe center; overflow-y: auto; justify-content: center; gap: 24px; padding: 24px; }
.vlb-backdrop[hidden] { display: none; }
.vlb { display: flex; flex-direction: column; gap: 12px; width: min(420px, calc((100vh - 210px) * 9 / 16)); max-width: 100%; }   /* height left for the caption under the 9:16 video */
.vlb:has(.vlb-book) { width: min(420px, calc((100vh - 270px) * 9 / 16)); }
.vlb-frame { position: relative; }   /* holds the video and its Share icon */
.vlb video { width: 100%; aspect-ratio: 9 / 16; border-radius: 16px; background: #000; display: block; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.vlb-cap { color: var(--white); font-size: 13px; line-height: 1.4; }
.vlb-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: rgba(255,255,255,.8); }
.vlb-meta b { color: var(--white); }
.vlb-count { margin-left: auto; font-size: 12px; color: rgba(255,255,255,.6); }
.vlb-who { color: var(--white); font-weight: 700; text-decoration: none; }
.vlb-who:hover { text-decoration: underline; }
.vlb-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.vlb-tag { padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(255,255,255,.14); color: var(--white); border: 1px solid rgba(255,255,255,.22); }
.vlb-tag.who { background: var(--sand); color: var(--primary); border-color: var(--sand); }
.vlb-title { margin-top: 8px; font-size: 14px; color: var(--white); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vlb-ig { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--sand); }
.vlb-book { display: block; margin-top: 12px; padding: 12px 18px; border-radius: 999px; background: var(--white); color: var(--primary); font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; transition: background .15s; }   /* same as the nav's Schedule Consultation */
.vlb-book:hover { background: var(--sand); }
.vlb-book + .vlb-ig { margin-top: 10px; }
.vlb-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.14); color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.vlb-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.vlb-arrow { width: 52px; height: 52px; border-radius: 50%; border: none; background: rgba(255,255,255,.94); color: var(--primary); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.vlb-arrow:disabled { opacity: .25; cursor: default; }
.vlb-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.video-card, .social-tile { cursor: pointer; }

/* Journey wall: phone-portrait cards (Name's / procedure / @handle over the still) */
.journey-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.journey-row:empty { display: none; }
body.hub-overview .social-row { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1240px) and (min-width: 901px) { .ba-grid, .video-row, .jt-grid, .journey-row, .social-row, body.hub-overview .social-row { grid-template-columns: repeat(3, 1fr); } .pv-related .ba-grid { grid-template-columns: repeat(3, 1fr); } }
.jm-nav-count { position: absolute; top: 18px; right: 20px; z-index: 3; font-size: 12px; font-weight: 600; color: var(--text-2); }
.jm-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,.94); color: var(--primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.25); cursor: pointer; }
.jm-arrow:hover { background: var(--primary); color: var(--white); }
.jm-arrow.prev { left: 16px; } .jm-arrow.next { right: 16px; }
.jm-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jb-card { position: relative; border-radius: 14px; overflow: hidden; background: var(--primary); aspect-ratio: 9 / 16; box-shadow: var(--shadow); cursor: pointer; }
/* Journey cards follow the video-card system: play centered, Share top right, caption bottom left over a fade (no pills) */
.jb-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .4s ease; }
.jb-card:hover img { transform: scale(1.04); }
.jb-card .play { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.jb-card .play svg { width: 16px; height: 16px; fill: currentColor; stroke: none; margin-left: 3px; }
.jb-card .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 14px 14px; background: linear-gradient(to top, rgba(0,43,60,.9), transparent); color: var(--white); font-size: 12px; }
/* Journeys outrank a single before & after: the patient's name leads, larger than any card caption */
.jb-card .jb-name { font-size: 24px; font-weight: 600; line-height: 1.1; }
.jb-card .jb-proc { font-size: 14px; font-weight: 600; margin-top: 4px; }
.jb-card .jb-meta { margin-top: 4px; opacity: .85; }

/* Before & Afters wall (Teitelbaum pattern): one photo per card, After by
   default, a switch flips to Before. Angles belong to the detail view. */
.ba-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ba-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.ba-pair { position: relative; aspect-ratio: 4 / 5; background: #e9edf0; }
.ba-pair figure { position: absolute; inset: 0; margin: 0; overflow: hidden; display: none; }
.ba-pair img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-card.show-after .ba-pair figure:nth-child(2), .ba-card:not(.show-after) .ba-pair figure:nth-child(1) { display: block; }
.ba-pair figcaption { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(0,43,60,.78); color: var(--white); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
.ba-share { position: absolute; right: 12px; top: 12px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: var(--primary); display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.ba-share svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Journey and patient pages: Share sits on the photo's top-right corner, like the wall cards (header keeps back, title, Next) */
.photo-share { width: 40px; height: 40px; top: 14px; right: 14px; z-index: 3; }
.photo-share svg { width: 18px; height: 18px; }
.ba-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(to top, rgba(0,20,30,.62), rgba(0,20,30,0)); pointer-events: none; }
.ba-thumb { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 56px; height: 56px; border-radius: 6px; padding: 0; border: 2px solid rgba(255,255,255,.95); overflow: hidden; background: #e9edf0; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.ba-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.ba-card.show-after .ba-thumb img:nth-child(1), .ba-card:not(.show-after) .ba-thumb img:nth-child(2) { display: block; }
.ba-cap { position: absolute; left: 14px; right: 80px; bottom: 14px; z-index: 2; color: var(--white); text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.ba-cap-proc { font-size: 14px; font-weight: 600; line-height: 1.25; }
.ba-more { font-weight: 500; opacity: .8; margin-left: 2px; }
.ba-cap-demo { font-size: 12px; opacity: .85; margin-top: 3px; }
.ba-card .ba-body { display: none; }
.ba-patient { position: absolute; left: 12px; bottom: 12px; height: 56px; display: flex; align-items: center; z-index: 2; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--white); text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.ba-body { padding: 14px 16px 16px; }
.ba-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ba-proc { font-size: 15px; font-weight: 600; color: var(--primary); }
.ba-demo { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.ba-who { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ba-who .tag { background: var(--cream); color: var(--primary); border-color: transparent; }
.ba-foot, .angles { display: none; }
.share { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--white); font-size: 12px; font-weight: 600; color: var(--primary); margin-left: auto; }
.share svg { width: 14px; height: 14px; }
.demo-row { display: flex; gap: 20px; flex-wrap: wrap; margin: 0 0 28px; }   /* no rules: matches the Videos chips row */
.ba-grid.grouped > .empty, .ba-grid > .empty { grid-column: 1 / -1; padding: 40px 24px; border: 1px dashed var(--border); border-radius: 16px; text-align: center; color: var(--text-2); font-size: 15px; }
.side-item .n:empty, .side-item[data-zero] .n { opacity: .5; }
.demo-row[hidden] { display: none; }
.demo-field { display: flex; flex-direction: column; gap: 6px; min-width: 170px; }
.demo-field span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.demo-field select { font: inherit; font-size: 14px; font-weight: 500; color: var(--primary); padding: 9px 34px 9px 12px; border: 1px solid rgba(0,43,60,.18); border-radius: 10px; background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002b3c' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center/14px; -webkit-appearance: none; appearance: none; }
/* Grouped wall (one block per treatment area) */
.ba-grid.grouped { display: block; }
.hub-section.is-grouped > .section-head .see-all { display: none; }
.ba-group { margin-bottom: 0; }
/* Content breaks: one rule, generous air, used everywhere a new block starts */
.ba-group + .ba-group, .hub-section + .hub-section, .pv-facts, .pv-views, .pv-related, .jt, .jfeat-page + .jt { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--border); }
.pv-cta { margin-top: 56px; }
.hub-section + .hub-section { margin-top: 0; padding-top: 48px; }
/* Single-section tabs (Journeys, Before & Afters, Videos): the hidden sections before it don't earn a divider */
body:not(.hub-overview) .hub-section { border-top: none; padding-top: 0; margin-top: 0; }
.ba-group-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ba-group-head h3 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.01em; color: var(--primary); }
.ba-group-head .pv-count { font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 5px 10px; border-radius: 999px; background: var(--cream); color: var(--primary); }
.ba-group-head .see-all { margin-left: auto; padding: 9px 16px; border: 1px solid var(--primary); border-radius: 999px; color: var(--primary); }
.ba-group-head .see-all:hover { background: var(--primary); color: var(--white); }

/* Patient page */
.ba-card { cursor: pointer; }
body.patient-view .m-bar, body.patient-view .main-head, body.patient-view .hub-section, body.patient-view .sheet, body.patient-view .sheet-backdrop { display: none !important; }
body.patient-view .hub { grid-template-columns: 1fr; }
/* Desktop detail pages (patient / journey): the sidebar collapses to an icon rail instead of disappearing */
@media (min-width: 901px) {
  body.patient-view .hub { grid-template-columns: 52px 1fr; gap: 32px; }
  body.patient-view .side > :not(.side-nav) { display: none !important; }
  body.patient-view .side-nav { padding: 6px 0 0; margin: 0; border: none; gap: 6px; }
  body.patient-view .side-link { width: 52px; height: 52px; padding: 0; justify-content: center; font-size: 0; gap: 0; border-radius: 14px; }
  body.patient-view .side-link svg { width: 20px; height: 20px; opacity: .9; }
  body.patient-view .side-link .count { display: none; }
  /* the section you came from reopens your results: on hover it becomes the 'open panel' icon */
  body.patient-view .side-link.active:hover svg { display: none; }
  body.patient-view .side-link.active:hover::before { content: ''; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M9 4v16'/%3E%3Cpath d='M13 10l2 2-2 2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M9 4v16'/%3E%3Cpath d='M13 10l2 2-2 2'/%3E%3C/svg%3E") center / contain no-repeat; }
  body.patient-view .side-link.active:hover { box-shadow: 0 0 0 3px rgba(0,43,60,.15); }
}
.patient[hidden] { display: none; }
.pv-top { margin-bottom: 18px; }
.pv-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; font-size: 13px; font-weight: 600; color: var(--text-2); }
.pv-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.pv-title { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 600; color: var(--primary); }
.pv-title svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pv-actions { display: flex; gap: 8px; }
.pv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--primary); background: var(--white); color: var(--primary); font-size: 13px; font-weight: 600; text-decoration: none; }
.pv-btn.primary { background: var(--primary); color: var(--white); }
.pv-btn.big { padding: 14px 24px; font-size: 14px; }
.pv-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv-viewer { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.pv-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: #e9edf0; }
.pv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; background: #e9edf0; }
.pv-photo figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(0,43,60,.78); color: var(--white); font-size: 12px; font-weight: 600; }
.pv-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: var(--primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: pointer; }
.pv-arrow.prev { left: 14px; } .pv-arrow.next { right: 14px; }
.pv-viewer.single .pv-arrow { display: none; }
.pv-side-note { display: none; }
.pv-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pv-viewer-foot { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 28px; }
.pv-count { font-size: 13px; color: var(--text-2); }
.pv-angles { display: flex; gap: 6px; }
.pv-angle { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(0,43,60,.18); background: var(--white); color: var(--primary); font-size: 13px; font-weight: 600; }
.pv-angle.active { background: var(--primary); color: var(--white); border-color: var(--primary); }
.pv-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin-bottom: 8px; }
.pv-facts { display: flex; flex-wrap: wrap; gap: 28px 40px; }
.pv-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-pill { padding: 7px 12px; border-radius: 999px; background: var(--cream); color: var(--primary); font-size: 13px; font-weight: 600; }
.pv-pill.dark { background: var(--primary); color: var(--white); }
.pv-pill.link { background: var(--white); border: 1px solid rgba(0,43,60,.18); text-decoration: underline; text-decoration-color: rgba(0,43,60,.35); text-underline-offset: 3px; }
.pv-appears { margin: 24px 0; padding: 18px 22px; border-radius: 14px; background: var(--cream); }
.pv-appears .pv-label { color: var(--rust); margin-bottom: 4px; }
.pv-appears p { margin: 0; font-size: 14.5px; color: var(--primary); }
.pv-appears a { color: var(--primary); font-weight: 600; }
.pv-views { display: grid; gap: 28px; }
.pv-strip { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 16px; }
.pv-related .ba-grid { grid-template-columns: repeat(3, 1fr); }
.pv-strip figure { margin: 0; position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #e9edf0; }
.pv-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-strip figcaption { position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(0,43,60,.78); color: var(--white); font-size: 11px; font-weight: 600; }
.pv-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 30px; border-radius: 16px; background: var(--primary); color: var(--white); }
.pv-cta-lead { display: flex; align-items: center; gap: 20px; min-width: 0; }
.pv-cta-doc { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid var(--sand); background: var(--primary-2); }
.pv-cta-title { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.pv-cta-sub { font-size: 14px; color: rgba(255,255,255,.78); }
.pv-cta .pv-btn.primary { background: var(--sand); color: var(--primary); border-color: var(--sand); white-space: nowrap; }
.pv-related { margin-bottom: 20px; }
.pv-cta + .pv-related { margin-top: 48px; }
.doc-cta { margin-top: 48px; }
.doc-cta[hidden] { display: none; }   /* .pv-cta's display:flex would otherwise override [hidden] */   /* surgeon filter: book that surgeon, below the wall */
.doc-cta .pv-btn.primary { background: var(--white); border-color: var(--white); color: var(--primary); transition: background .15s, border-color .15s; }   /* same as the nav's Schedule Consultation */
.doc-cta .pv-btn.primary:hover { background: var(--sand); border-color: var(--sand); }
.load-more-wrap { text-align: center; margin-top: 22px; }
.load-more { padding: 12px 26px; border-radius: 999px; border: 1px solid var(--primary); background: var(--white); color: var(--primary); font-size: 14px; font-weight: 600; }
.load-more:hover { background: var(--primary); color: var(--white); }

/* Videos */
.video-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.video-card { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 9 / 14; background: var(--primary); box-shadow: var(--shadow); }
.video-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card .play { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.video-card .play svg { width: 16px; height: 16px; fill: currentColor; stroke: none; margin-left: 3px; }
.video-card .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 12px; background: linear-gradient(to top, rgba(0,43,60,.9), transparent); color: var(--white); font-size: 12px; }
.video-card .cap b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.video-card .vk { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; background: var(--sand); color: var(--primary); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.video-chips { margin-bottom: 16px; }
.video-chips[hidden] { display: none; }

/* Social */
.social-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.social-tile { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--primary); }
.social-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.social-tile .ig { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,43,60,.7); color: var(--white); display: flex; align-items: center; justify-content: center; }
.social-tile .ig svg { width: 13px; height: 13px; }
.social-tile .handle { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(0,43,60,.78); color: var(--white); font-size: 11px; font-weight: 600; }

.disclaimer { margin: 10px 0 0; font-size: 12.5px; color: var(--text-2); max-width: 900px; line-height: 1.5; }
.site-foot { display: none; }
/* ── Athēnix site-wide bottom, matched to athenixbody.com: centers bar, CTA band, footer ── */
.ath-centers { display: grid; grid-template-columns: 96px auto 1fr 96px; align-items: stretch; height: 52px; margin-top: 64px; background: #8b5b45; color: var(--white); }
.ac-arrow { border: none; background: #c9b79c; color: var(--white); display: flex; align-items: center; justify-content: center; }
.ac-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ac-label { display: flex; align-items: center; padding: 0 56px 0 80px; font-size: 15px; font-weight: 500; white-space: nowrap; }
.ac-track { display: flex; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; scroll-snap-type: x mandatory; }
.ac-track::-webkit-scrollbar { display: none; }
.ac-item { flex: 0 0 25%; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--white); text-decoration: none; font-size: 14px; white-space: nowrap; scroll-snap-align: start; }
.ac-item svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ac-item:hover { color: var(--sand); }
.ath-cta { position: relative; min-height: 540px; display: flex; align-items: center; overflow: hidden; background: #cfc6bb; }
.ath-cta picture, .ath-cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ath-cta-body { position: relative; max-width: 470px; margin-left: max(24px, calc(50% - 540px)); color: var(--white); }
.ath-cta h2 { margin: 0 0 22px; font-size: 44px; line-height: 1.12; font-weight: 600; }
.ath-cta p { margin: 0 0 30px; font-size: 14px; line-height: 1.75; }
.ath-cta-btn { display: inline-block; padding: 12px 26px; border-radius: 999px; background: var(--white); color: var(--primary); font-size: 14px; font-weight: 500; text-decoration: none; }
.ath-cta-btn:hover { background: var(--sand); }
.ath-foot { background: var(--primary); color: var(--white); }
.af-main { max-width: 1100px; margin: 0 auto; padding: 56px 24px; display: grid; grid-template-columns: 280px 1fr 240px; gap: 56px; align-items: center; }
.af-brand { display: flex; flex-direction: column; align-items: center; gap: 30px; padding-right: 56px; border-right: 1px solid rgba(255,255,255,.35); align-self: stretch; justify-content: center; }
.af-brand img { width: 226px; height: auto; display: block; }
.af-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; }
.af-social a { color: var(--white); display: block; }
.af-social svg { width: 16px; height: 16px; fill: currentColor; }
.af-social svg.stroke { fill: none; stroke: currentColor; stroke-width: 1.8; }
.af-social svg.stroke circle:last-child { fill: currentColor; stroke: none; }
.af-social a:hover { color: var(--sand); }
.af-middle p { margin: 0 0 10px; font-size: 14px; line-height: 1.7; }
.af-join { font-size: 15px !important; }
.af-letter { display: inline-block; margin-top: 14px; color: var(--white); font-size: 19px; text-decoration: underline; text-underline-offset: 3px; }
.af-letter:hover { color: var(--sand); }
.af-finder { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 214px; border-radius: 10px; background-size: cover; background-position: center; color: var(--white); text-decoration: none; text-align: center; font-size: 19px; font-weight: 600; line-height: 1.35; text-shadow: 0 1px 6px rgba(0,43,60,.45); overflow: hidden; }
.af-finder::before { content: ''; position: absolute; inset: 0; background: rgba(0,43,60,.12); transition: background .2s; }
.af-finder:hover::before { background: rgba(0,43,60,.3); }
.af-finder > * { position: relative; }
.af-finder svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.af-about { display: inline-block; margin-top: 14px; color: var(--white); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.af-legal { background: #efefef; color: #222; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 18px max(24px, calc(50% - 550px)); font-size: 11.5px; }
.af-legal p { margin: 0; }
.af-links { display: flex; justify-content: center; }
.af-links a { color: #222; text-decoration: none; padding: 0 8px; border-left: 1px solid #bbb; }
.af-links a:first-child { border-left: none; }
.af-links a:hover { text-decoration: underline; }
.af-s3 { justify-self: end; display: flex; align-items: center; gap: 10px; color: #222; text-decoration: none; font-size: 11px; line-height: 1.3; }
.af-s3-mark { display: flex; gap: 3px; } .af-s3-mark i { width: 5px; height: 22px; background: #d0c0a7; display: block; }
@media (max-width: 900px) {
  .ath-centers { grid-template-columns: 44px 1fr 44px; height: 48px; margin-top: 40px; }
  .ac-label { display: none; }
  .ac-item { flex-basis: 50%; font-size: 13px; }
  .ath-cta { min-height: 520px; align-items: center; }
  .ath-cta-body { margin: 0 auto; padding: 0 24px; text-align: center; }
  .ath-cta h2 { font-size: 32px; }
  .af-main { grid-template-columns: 1fr; gap: 34px; text-align: center; justify-items: center; padding: 44px 24px; }
  .af-brand { border-right: none; padding-right: 0; }
  .af-finder { width: 220px; }
  .af-legal { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 12px; }
  .af-s3 { justify-self: center; }
}

@media (max-width: 1100px) {
}
@media (max-width: 900px) {
  .m-bar { display: block; margin-bottom: 18px; }
  .m-tabs { display: flex; gap: 22px; overflow-x: auto; margin: -4px 0 18px; border-bottom: 1px solid rgba(0,43,60,.12); scrollbar-width: none; }
  .m-tabs::-webkit-scrollbar { display: none; }
  .m-tab { flex: none; border: none; background: none; padding: 10px 0 12px; font: inherit; font-size: 15px; font-weight: 600; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .m-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
  .m-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
  .m-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(0,43,60,.18); background: var(--white); font-size: 14px; font-weight: 600; color: var(--primary); }
  .m-chip.active { background: var(--primary); color: var(--white); border-color: var(--primary); }
  .m-chip .x { font-size: 16px; line-height: 1; }
  .m-heading { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 10px; }
  .m-heading h2 { margin: 0; font-size: 26px; font-weight: 600; color: var(--primary); }
  .m-count { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
  .m-filters { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--primary); background: var(--white); color: var(--primary); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .m-filters svg { width: 16px; height: 16px; }
  .sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 80; }
  .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--white); border-radius: 20px 20px 0 0; padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 40px rgba(0,0,0,.2); transform: translateY(100%); transition: transform .3s ease; }
  body.sheet-open .sheet { display: block; transform: translateY(0); }
  body.sheet-open .sheet-backdrop { display: block; }
  .sheet-handle { width: 42px; height: 4px; border-radius: 2px; background: var(--light-gray); margin: 4px auto 14px; }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; font-size: 18px; font-weight: 600; color: var(--primary); margin-bottom: 12px; }
  .sheet-close { border: none; background: var(--primary); color: var(--white); font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 999px; }
  .sheet-field { display: block; margin-bottom: 14px; }
  .sheet-field span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin-bottom: 6px; }
  .sheet-field select { width: 100%; font: inherit; font-size: 16px; color: var(--primary); padding: 12px 40px 12px 14px; border: 1px solid var(--primary); border-radius: 999px; background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002b3c' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 14px center/16px; -webkit-appearance: none; appearance: none; }
  .sheet-clear { border: none; background: none; color: var(--rust); font-size: 14px; font-weight: 600; padding: 6px 0; }
  .main-head { display: none; }
  .side { display: none; }
  .ba-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ba-patient { font-size: 11px; }
  .see-all { display: none; }
  .ba-group-head .see-all { display: inline-block; padding: 7px 12px; font-size: 11px; }
  .ba-group-head h3 { font-size: 22px; }
  .ba-group + .ba-group, .hub-section + .hub-section, .pv-facts, .pv-views, .pv-related, .jt { margin-top: 32px; padding-top: 28px; }
  .pv-cta { margin-top: 32px; }
  .hub-section + .hub-section { margin-top: 0; }
  .pv-cta + .pv-related { margin-top: 28px; }
  .m-tools { display: flex; align-items: center; justify-content: space-between; }
  .m-cols { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--white); color: var(--primary); padding: 0; }
  .m-cols svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .m-cols .ic-1 { display: none; }
  .m-cols[data-cols="1"] .ic-2 { display: none; }
  .m-cols[data-cols="1"] .ic-1 { display: block; }
  body.cols-1 .ba-grid, body.cols-1 .journey-row, body.cols-1 .video-row, body.cols-1 .jt-grid { grid-template-columns: 1fr; }
  body.cols-1 .ba-cap-demo { display: block; }
  body.cols-1 .ba-cap-proc { font-size: 15px; }
  .ba-pair figcaption, .ba-share { top: 10px; }
  .ba-pair figcaption, .ba-patient { left: 10px; }
  .ba-cap { left: 10px; right: 62px; bottom: 10px; }
  .ba-cap-proc { font-size: 12.5px; }
  .ba-cap-demo { display: none; }
  .ba-share, .ba-thumb { right: 10px; }
  /* Phones: the Before thumbnail becomes a plain toggle switch; the image thumbnail is desktop only */
  .ba-thumb { bottom: 12px; width: 34px; height: 20px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.95); background: transparent; box-shadow: none; filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); overflow: visible; }
  .ba-thumb img { display: none !important; }
  .ba-thumb::after { content: ''; position: absolute; top: 1.5px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); transition: transform .2s; }
  .ba-card.show-after .ba-thumb::after { transform: translateX(14px); }
  .ba-thumb::before { content: ''; position: absolute; inset: -12px; }   /* smaller switch, same thumb-sized tap area */
  .ba-cap { right: 70px; }
  .ba-patient { bottom: 10px; height: 44px; }
  .demo-row { display: none; }
  /* Phones: Next stays beside the title (no extra row) */
  .pv-head { flex-direction: row; align-items: center; gap: 12px; }
  .pv-title { min-width: 0; }
  .pv-actions { flex: none; }
  .pv-actions .primary { white-space: nowrap; padding: 9px 14px; }
  .pv-title { font-size: 22px; }
  /* Teitelbaum on phones: one photo at a time, arrows step Before → After → next angle */
  .pv-viewer { grid-template-columns: 1fr; gap: 0; }
  .pv-viewer[data-side="before"] .pv-photo:nth-of-type(2), .pv-viewer[data-side="after"] .pv-photo:nth-of-type(1) { display: none; }
  .pv-viewer.single .pv-arrow { display: flex; }
  .pv-side-note { display: inline; }
  .pv-photo { border-radius: 12px; }
  .pv-viewer-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pv-facts { gap: 18px 24px; }
  .pv-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pv-related .ba-grid { grid-template-columns: 1fr 1fr; }
  .pv-cta { flex-direction: column; align-items: flex-start; padding: 22px; }
  .pv-cta-doc { width: 64px; height: 64px; }
  .pv-cta-lead { gap: 14px; }
  .ba-who .tag:nth-child(n+3) { display: none; }
  .ba-body { padding: 10px 12px 12px; }
  .ba-top { flex-direction: column; gap: 2px; }
  .ba-proc { font-size: 13.5px; }
  .ba-demo { font-size: 12px; white-space: normal; }
  .ba-who { margin-top: 8px; }
  .hdr-top { padding: 14px 0; }
  .hdr-inner { padding: 0 16px; }
  .brand-logo { height: 21px; }
  .header-right { gap: 18px; margin-left: auto; margin-right: 6px; }
  .header-right .header-contact span { display: none; }
  .header-right .header-contact svg { width: 20px; height: 20px; }
  .header-right .header-cta { display: none; }
  .hamburger-btn { display: flex; margin-left: 0; }
  .hub { grid-template-columns: 1fr; padding: 24px 16px 40px; gap: 20px; }
  .side { position: static; }
  .side-nav { flex-direction: row; overflow-x: auto; }
  .side-link { width: auto; white-space: nowrap; }
  .side-link .count { display: none; }
  .side-group { display: none; }
  .clear-btn { display: none; }
  .journey-row, .video-row, .social-row, .jt-grid, body.hub-overview .social-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .jb-card .cap { padding: 36px 10px 10px; font-size: 11px; } .jb-card .jb-name { font-size: 18px; } .jb-card .jb-proc { font-size: 12.5px; }
  .jfeat { grid-template-columns: 1fr; min-height: 0; border-radius: 14px; }
  .vlb-backdrop { padding: 0; gap: 0; align-items: stretch; }
  .vlb { width: 100%; justify-content: center; padding: 56px 16px 24px; }
  .vlb video { aspect-ratio: auto; max-height: 68vh; width: auto; max-width: 100%; margin: 0 auto; }
  .vlb-frame { width: fit-content; max-width: 100%; margin: 0 auto; }   /* hug the video so its Share icon sits on it */
  .vlb-arrow { position: absolute; top: 45%; width: 40px; height: 40px; }
  .vlb-arrow.prev { left: 8px; } .vlb-arrow.next { right: 8px; }
  .jm-nav-count { top: 12px; right: 14px; color: var(--white); text-shadow: 0 1px 4px rgba(0,0,0,.6); }
  #journeyHero { container-type: inline-size; }
  .jm-arrow { width: 40px; height: 40px; top: calc(62.5cqw); }   /* middle of the 4:5 photo (width x 5/4 / 2), the same on every slide whatever the details' length */
  .jm-arrow.prev { left: 10px; } .jm-arrow.next { right: 10px; }
  .jfeat .jm-media { aspect-ratio: 4 / 5; height: auto; min-height: 0; }

  .jm-body { padding: 22px 18px 24px; }
  #journeyHero .jm-body { padding-right: 18px; }
  .jm-name { font-size: 26px; }
  .jm-quote { font-size: 16px; }
  .jt-post { border-radius: 12px; }
  .jt-cap { padding: 40px 10px 10px; }
  .jt-title { font-size: 11.5px; }
}

/* Large displays: five across */
/* Walls are 3 per row on every desktop width (Andrés, 2026-10-06: larger images; tried 5, then 4) */
@media (min-width: 901px) { .ba-grid, .video-row, .jt-grid, .journey-row { grid-template-columns: repeat(4, 1fr); } }   /* trying 4 (was 3) */

/* Pitch callouts (present-hub.js): the card sits under the Hub's header and the page makes room for it */
html.present-on #presentCard { top: 110px; max-height: calc(100vh - 142px); }
@media (min-width: 900px) { html.present-on .hub { padding-right: 504px; } }
#presentBrackets { position: fixed; inset: 0; pointer-events: none; z-index: 1149; }
#presentBrackets .pb { position: absolute; width: 8px; border: 2px solid #8a5535; border-left: none; border-radius: 0 6px 6px 0; box-sizing: border-box; }
/* Callout card: "Harvested from Instagram" pill (content we pulled, vs Athēnix's own Lookbook) */
#presentCard .pc-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }
#presentCard .pc-pill { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 5px 11px; border: 1px solid rgba(208,192,167,.45); border-radius: 999px; background: rgba(208,192,167,.1); color: #d0c0a7; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
#presentCard .pc-pill > span { width: 6px; height: 6px; border-radius: 50%; background: #c98a5e; }
#presentCard .pc-pill.sm { margin: 0 0 0 6px; padding: 3px 8px; font-size: 9.5px; vertical-align: 2px; }
#presentCard .pc-pill.audit { border-color: rgba(143,196,214,.5); background: rgba(143,196,214,.12); color: #bfe0ea; }
#presentCard .pc-pill.audit > span { background: #6fb6cc; }
/* Sidebar: the selected center or surgeon in the Location Finder */
.side-finder { display: flex; align-items: center; gap: 8px; margin: 14px 12px 0; font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; }
.side-finder[hidden] { display: none; }
.side-finder:hover { text-decoration: underline; }
.side-finder svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
/* A selected tag shows an X in front: click again to remove it */
.side-item.active > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.side-item.active > span:first-child::before { content: ''; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5l5 5M10.5 5.5l-5 5' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.side-item.active:hover > span:first-child::before { background-color: #8a5535; }
/* Surgeon selected: their centers are marked (not filtered) in the Center list and its header */
.side-item.practice:not(.active) { background: rgba(0,43,60,.06); color: var(--primary); font-weight: 600; }
.side-item.practice:not(.active) > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.side-item.practice:not(.active) > span:first-child::before { content: ''; flex: none; width: 16px; height: 16px; background: var(--primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7Zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7Zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.side-acc-value.practice { max-width: 150px; color: #8a5535; }
/* Callout mode: the card takes the right side, so the walls switch to fewer, larger cards (at least 320px each) instead of four small ones */
@media (min-width: 901px) {
  /* Fill up to the card: no centering gap; the left edge still lines up with the header logo */
  html.present-on .hub { max-width: none; margin: 0; padding-left: max(48px, calc((100vw - var(--hub-max)) / 2 + 48px)); padding-right: 536px; }   /* 64px clear of the card */
  html.present-on .ba-grid, html.present-on .video-row, html.present-on .jt-grid, html.present-on .journey-row { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}