/* ==========================================================================
   Jupiter Laser & Regenerative Medicine — Design System
   Near-black surfaces, gold as the accent. Built for speed, clarity, and trust.
   ========================================================================== */

:root {
  /* Surfaces. These are deliberately near-neutral.
     They used to be warm near-blacks -- --surface was #0e0d0a and --line
     #2e2a20, four to fourteen points more red than blue -- and since --surface
     is the body background on all 56 pages, the whole site read brown rather
     than black. Gold over a warm near-black desaturates into sepia, so the
     field has to be neutral for the gold to read as gold.
     One point of blue is kept so the black is not dead flat against warm
     accents; do not add red here. Gold belongs on type, buttons, borders and
     icons, not in the background. */
  --ink: #0a0a0b;
  --ink-2: #111112;
  --ink-3: #18181a;
  --surface: #080809;
  --mist: #101011;
  --mist-2: #161618;
  --line: #2a2a2d;
  --text: #c9c2b1;
  --text-soft: #a49b88;
  --head: #f3efe4;
  --accent: #d3ac57;
  --accent-light: #f2d491;
  --accent-mid: #e4c273;
  --gold: #f5b93d;
  --green: #6bd6a8;
  --red: #f09a8b;
  --laser: linear-gradient(120deg, #f2d491 0%, #d3ac57 52%, #8a6a2a 100%);
  /* Kept but no longer used on surfaces. It is a flat 0.12 gold sheet, which is
     the wide-low-alpha pattern that turned this site brown -- .card-icon and
     .prose .callout now use a single flat rgba instead. Do not reintroduce it
     as a background on anything large. */
  --laser-soft: linear-gradient(120deg, rgba(232, 199, 120, 0.12), rgba(211, 172, 87, 0.12) 52%, rgba(138, 106, 42, 0.12));

  /* Type */
  --font-head: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Rhythm */
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45), 0 14px 40px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 6px 14px rgba(0, 0, 0, 0.5), 0 30px 80px rgba(0, 0, 0, 0.5);
  --wrap: 1180px;
  --wrap-narrow: 860px;
  --header-h: 76px;

  /* Type scale below body.
     Headings were already on a sensible scale; everything under body size was
     not. There were roughly twenty values between 0.72 and 0.95rem -- 0.84,
     0.85, 0.86, 0.88, 0.9, 0.92, 0.94, 0.95 -- differences too small to read as
     hierarchy but large enough to stop anything looking deliberate. Three steps
     is enough for secondary text, captions and labels. */
  --fs-sm: 0.9375rem;   /* 15px - card body, secondary prose */
  --fs-xs: 0.8125rem;   /* 13px - captions, footnotes, meta */
  --fs-2xs: 0.6875rem;  /* 11px - kickers and uppercase labels */

  /* Spacing scale. Same problem as type: 0.5/0.55, 0.7/0.8/0.9,
     1.0/1.1/1.2/1.4 were all in use with no system behind them. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Section rhythm. Every .section used to get identical padding, so a major
     section and a minor one carried equal weight and the page read as one long
     undifferentiated column -- the actual cause of "too much", more than word
     count was. Three tiers give the page a pulse. */
  --section-y: clamp(3rem, 6vw, 4.75rem);
  --section-y-major: clamp(4.25rem, 9vw, 7rem);
  --section-y-tight: clamp(2rem, 4vw, 3rem);
}

/* --------------------------------------------------------------------------
   Reset + base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--head);
  line-height: 1.18;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.35rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; }

p { margin: 0 0 1.15em; }

/* Available to screen readers, invisible on screen. Used for the corner cell of
   the comparison tables, which labels every row but has nothing to display. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The comparison tables scroll horizontally on narrow screens; tabindex makes
   them reachable, and a focus ring shows a keyboard user where they are. */
.table-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-mid); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-light); }

ul, ol { padding-left: 1.35em; margin: 0 0 1.2em; }
li { margin-bottom: 0.45em; }

strong { color: var(--head); font-weight: 600; }
/* `strong` must never paint dark ink onto a dark surface (WCAG 1.4.3).
   Every dark context inherits its surrounding text color instead. */
.topbar strong,
.hero strong,
.page-hero strong,
.section-dark strong,
.card-dark strong,
.cta-band strong,
.site-footer strong,
.hero-card strong { color: inherit; }
.section-dark strong, .cta-band strong, .hero strong, .page-hero strong { color: #fff; }
.topbar strong { color: #ded6c3; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

blockquote {
  margin: 1.6em 0;
  padding: 1.1em 1.4em;
  border-left: 4px solid var(--accent);
  background: var(--mist);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.05em;
  color: var(--head);
}

::selection { background: rgba(232, 199, 120, 0.28); }

/* Focus visibility */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--ink);
  color: #fff;
  padding: 0.7em 1.2em;
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.wrap { width: min(var(--wrap), calc(100% - 2.5rem)); margin-inline: auto; }
.wrap-narrow { width: min(var(--wrap-narrow), calc(100% - 2.5rem)); margin-inline: auto; }

.section { padding: var(--section-y) 0; }
.section-major { padding: var(--section-y-major) 0; }
.section-tight { padding: var(--section-y-tight) 0; }
.section-mist { background: var(--mist); }
.section-dark { background: var(--ink); color: #cac3b3; }
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p { color: #cac3b3; }
.section-dark a { color: #e8c778; }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  /* Was align-items:center. A centred grid row sizes to its tallest column,
     then drops every shorter column into the middle of that row -- so any
     pairing where one side runs noticeably longer than the other (a brief
     bio next to a tall photo + stacked cards on /meet-dr-cedeno/, four
     short info-tiles next to long-form prose on /about/ and /contact/)
     opened with a large blank gap above the short column that read as a
     broken page, not a design choice. Two content columns are a document,
     not a centred graphic pairing: they should start together at the top
     the way a reader expects, the same as any other multi-column text
     layout. Where columns are close in height already (home.html's short
     paired sections) start and center render identically, so this has no
     visible effect there. */
  align-items: start;
}
.split.rev { grid-template-columns: 0.95fr 1.05fr; }
/* Sidebar column that needs to travel the full row height (a sticky card).
   align-items:start alone would size it to its own content and give
   position:sticky no room to move, so it still needs an explicit stretch. */
.split-aside { align-self: stretch; }
@media (max-width: 900px) {
  .split, .split.rev { grid-template-columns: 1fr; }
}

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-2 { margin-bottom: 2rem; }

/* Section headers */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e4c273;
  margin-bottom: 1rem;
}
.kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--laser);
  border-radius: 2px;
}
.section-dark .kicker { color: #e8c778; }

.lede {
  font-size: clamp(1.1rem, 1.8vw, 1.25rem);
  color: var(--text);
  max-width: 46em;
}
.center .lede { margin-inline: auto; }
.section-head { max-width: 780px; margin: 0 auto var(--sp-7); text-align: center; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.88rem;
  line-height: 1;
  padding: 1em 1.7em;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary {
  background: linear-gradient(120deg, #e9c878, #b98f35);
  color: #201703;
  box-shadow: 0 8px 24px rgba(168, 130, 47, 0.35);
}
.btn-primary:hover {
  color: #201703;
  box-shadow: 0 12px 32px rgba(168, 130, 47, 0.5);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--head);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-light); transform: translateY(-2px); }

.section-dark .btn-ghost, .hero .btn-ghost,
.page-hero .btn-ghost, .cta-band .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.section-dark .btn-ghost:hover, .hero .btn-ghost:hover,
.page-hero .btn-ghost:hover, .cta-band .btn-ghost:hover { border-color: #e8c778; color: #e8c778; }

.btn-lg { font-size: 0.95rem; padding: 1.15em 2.1em; }
.btn-sm { font-size: 0.8rem; padding: 0.75em 1.3em; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

.link-arrow {
  font-family: var(--font-head);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.link-arrow::after { content: "→"; transition: transform 0.18s ease; }
.link-arrow:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--ink);
  color: #a49b88;
  font-size: 0.85rem;
  position: relative;
  z-index: 60;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 40px;
  padding-block: 4px;
}
.topbar a { color: #ded6c3; text-decoration: none; }
.topbar a:hover { color: #e8c778; }
.topbar-item { display: inline-flex; align-items: center; gap: 0.45em; }
.topbar > .wrap > a.topbar-item { white-space: nowrap; flex: none; }
.topbar-left { display: flex; gap: 1.6rem; align-items: center; }
.topbar .ic { width: 14px; height: 14px; flex: none; }
@media (max-width: 800px) {
  .topbar-left .topbar-item:not(:first-child) { display: none; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 13, 10, 0.9);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Blur lives on a pseudo-element: backdrop-filter on the header itself would
   make it the containing block for the position:fixed mobile nav panel. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-header.scrolled {
  border-color: #2e2a20;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-right: auto;
  flex: none;
}
.logo-mark { width: 44px; height: 44px; flex: none; }
.logo-text { display: flex; flex-direction: column; line-height: 1.12; }
.logo-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.14rem;
  color: var(--head);
  letter-spacing: -0.01em;
}
.logo-tag {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--laser);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Primary nav */
.nav { display: flex; align-items: center; gap: 0.2rem; }
.nav > li { list-style: none; margin: 0; position: relative; }
.nav { padding: 0; margin: 0; }
.nav a, .nav button.nav-toggle-sub {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--head);
  text-decoration: none;
  padding: 0.65em 0.85em;
  border-radius: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav a:hover, .nav button.nav-toggle-sub:hover { background: var(--mist); color: var(--accent-light); }
.nav a.active { color: var(--accent-light); }
.nav a.active::after {
  content: "";
  display: block;
  position: absolute;
  left: 0.85em; right: 0.85em; bottom: 0.2em;
  height: 2px;
  background: var(--laser);
  border-radius: 2px;
}
.nav > li > a { position: relative; }

.nav .caret { width: 10px; height: 10px; transition: transform 0.2s ease; }
.nav li.open > .nav-toggle-sub .caret,
.nav li:hover > .nav-toggle-sub .caret { transform: rotate(180deg); }

.subnav {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 250px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 70;
}
.nav li:hover > .subnav,
.nav li:focus-within > .subnav,
.nav li.open > .subnav {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.subnav li { margin: 0; }
.subnav a {
  display: block;
  padding: 0.55em 0.9em;
  font-weight: 500;
  font-size: 0.92rem;
  border-radius: 9px;
  width: 100%;
}
.subnav .subnav-all {
  font-weight: 700;
  color: var(--accent-light);
  border-bottom: 1px solid var(--line);
  border-radius: 9px 9px 0 0;
  margin-bottom: 0.3rem;
}

.header-cta { display: flex; align-items: center; gap: 0.7rem; flex: none; position: relative; z-index: 45; }

.nav-burger {
  position: relative;
  z-index: 45;   /* must sit above .site-nav (40) so it stays tappable when open */
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--head);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
body.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1079px) {
  .nav-burger { display: flex; }
  .site-nav {
    position: fixed;
    inset: 0;
    top: 0;
    background: #0e0d0a;
    z-index: 40;
    padding: calc(var(--header-h) + 56px) 1.4rem 3rem;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }
  body.nav-open .site-nav { transform: translateX(0); visibility: visible; transition: transform 0.3s ease; }
  .nav { flex-direction: column; align-items: stretch; gap: 0.1rem; }
  .nav a, .nav button.nav-toggle-sub { width: 100%; justify-content: space-between; font-size: 1.1rem; padding: 0.8em 0.6em; }
  .subnav {
    position: static;
    transform: none;
    opacity: 1;
    visibility: hidden;
    display: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    margin-left: 0.8rem;
  }
  .nav li.open > .subnav,
  .nav li:hover > .subnav,
  .nav li:focus-within > .subnav { transform: none; }
  .nav li.open > .subnav { display: block; visibility: visible; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 640px) {
  /* The callbar's "Book Online" covers this CTA; keep the header slim */
  .header-cta .btn { display: none; }
  .logo-name { font-size: 1.02rem; }
}

/* --------------------------------------------------------------------------
   Hero (dark, laser-animated)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(211, 172, 87, 0.13), transparent 62%),
    radial-gradient(900px 500px at 12% 110%, rgba(138, 106, 42, 0.08), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #cac3b3;
  overflow: hidden;
}
.hero::before {
  /* dot grid */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(214, 185, 116, 0.07) 1px, transparent 1.6px);
  background-size: 30px 30px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 75%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 75%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; }

.hero-inner {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(3.4rem, 7vw, 6rem) 0 clamp(3.6rem, 7vw, 6.4rem);
}
@media (max-width: 940px) {
  .hero-inner { grid-template-columns: 1fr; }
}

.hero h1 { color: #fff; margin-bottom: 0.5em; }
.hero .accent {
  background: var(--laser);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lede { color: #cac3b3; }

.hero-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.6rem 0 1.9rem; padding: 0; list-style: none; }
.hero-badges li {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.86rem;
  font-weight: 500;
  color: #e6dfcc;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(214, 185, 116, 0.22);
  padding: 0.45em 0.95em;
  border-radius: 999px;
  margin: 0;
}
.hero-badges .ic { width: 15px; height: 15px; color: #e8c778; }

/* Cinematic video hero — centered composition */
.hero.has-video .hero-inner {
  display: flex;
  justify-content: center;
  text-align: center;
  padding: clamp(4rem, 9vw, 7.5rem) 0;
}
.hero.has-video .hero-glass { max-width: 880px; }
.hero.has-video .hero-glass .lede { margin-inline: auto; }
.hero.has-video .hero-badges { justify-content: center; }
.hero.has-video .hero-glass .btn-row { justify-content: center; }
.hero-glass {
  background: rgba(12, 11, 8, 0.66);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(214, 185, 116, 0.28);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
@supports not (backdrop-filter: blur(10px)) {
  .hero-glass { background: rgba(12, 11, 8, 0.85); }
}

.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: url("/assets/img/hero-poster.webp") 50% 74%/cover no-repeat #0c0b08;
}
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  display: block;
  image-rendering: auto;
  backface-visibility: hidden;
  transform: translateZ(0);
}
/* No tint — the footage plays at its natural brightness. All text contrast
   comes from the .hero-glass panel. */
.hero.has-video::before { opacity: 0; }
.hero.has-video .laser-beams { display: none; }

.video-toggle {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(214, 185, 116, 0.5);
  background: rgba(12, 11, 8, 0.72);
  color: #f2d491;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.video-toggle:hover { background: rgba(12, 11, 8, 0.92); border-color: #f2d491; }
.video-toggle svg { width: 17px; height: 17px; }
.video-toggle .ic-play { display: none; }
.video-toggle[aria-pressed="true"] .ic-play { display: block; }
.video-toggle[aria-pressed="true"] .ic-pause { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-media video { display: none; }
}

/* laser beam sweep */
.laser-beams {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.laser-beams i {
  position: absolute;
  left: -30%;
  width: 160%;
  height: 1.5px;
  /* The glow is baked into the gradient rather than applied with
     filter: drop-shadow(). A filter on a permanently animating element 160%
     as wide as the hero repaints that whole area every frame, forever, even
     once the hero has scrolled away. The gradient costs nothing to composite. */
  background: linear-gradient(90deg,
    transparent,
    rgba(232, 199, 120, 0.18) 32%,
    rgba(232, 199, 120, 0.75) 47%,
    rgba(242, 212, 145, 0.9) 50%,
    rgba(138, 106, 42, 0.7) 53%,
    rgba(138, 106, 42, 0.16) 68%,
    transparent);
  opacity: 0;
  animation: beam 9s linear infinite;
}
.laser-beams i:nth-child(1) { top: 22%; animation-delay: 0s; transform: rotate(-7deg); }
.laser-beams i:nth-child(2) { top: 54%; animation-delay: 3s; transform: rotate(5deg); }
.laser-beams i:nth-child(3) { top: 80%; animation-delay: 6s; transform: rotate(-3deg); }
@keyframes beam {
  0% { opacity: 0; translate: -18% 0; }
  12% { opacity: 1; }
  42% { opacity: 0.85; }
  58% { opacity: 0; translate: 18% 0; }
  100% { opacity: 0; translate: 18% 0; }
}

/* Hero visual card */
.hero-visual { position: relative; }
.hero-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(214, 185, 116, 0.22);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.hero-card h3 { color: #fff; font-size: 1.1rem; margin-bottom: 1.1rem; }
.hero-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hero-stat {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(214, 185, 116, 0.16);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.hero-stat b {
  display: block;
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-weight: 700;
  background: var(--laser);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}
.hero-stat span { font-size: 0.82rem; color: #a49b88; line-height: 1.4; display: block; margin-top: 0.25em; }

/* Page hero (interior pages)
   ---------------------------------------------------------------------------
   This started as a copy of .hero, which was the mistake. On the homepage that
   background sits behind a video and a hero card and is never seen bare; here it
   IS the whole visual, so a backdrop was doing a subject's job and every interior
   page opened on a flat dark rectangle.

   Three faults, all fixed below. The key light was centred at `85% -20%` -- above
   the element, so `overflow: hidden` clipped the bright core and only its faint
   tail reached the page. The grain was rgba(...,0.12) on #0c0b08, which is not a
   texture, it is a rumour. And the block ended with no edge and no elevation, so
   it dissolved into the next section instead of resolving.

   Light is built as a source rather than a wash: a small bright specular core
   with a broad falloff around it, and a dim counter-fill in the opposite corner
   so the field is never one flat tone. Nothing here animates. */
.page-hero {
  position: relative;
  /* Lifts the block, and its shadow, above the following section. Safe: every
     sticky or floating element in this file sits at 40-300, so this only has to
     out-stack a plain sibling. */
  z-index: 1;
  background:
    /* Specular core. Tight and genuinely bright -- a wide low-alpha gold over
       near-black just desaturates into brown, so the luminance has to be
       concentrated somewhere or none of it reads as light. */
    radial-gradient(360px 260px at 79% 15%, rgba(247, 228, 181, 0.19), transparent 72%),
    /* Second, dimmer glow low-left. Keeps the block from reading as a single
       spotlight on an otherwise flat field -- two sources, same rule as the
       core: small and bright rather than wide and washed. */
    radial-gradient(260px 200px at 6% 92%, rgba(211, 172, 87, 0.09), transparent 70%),
    /* Falloff around the core. Was 0.22 across 880x520 -- the single largest
       source of brown on the site. */
    radial-gradient(880px 520px at 76% 14%, rgba(214, 176, 92, 0.1), transparent 68%),
    /* The 118deg rake is deliberately gone. A 0.07 gold film across 46% of the
       block is exactly the wide-low-alpha gold the comment above warns about,
       and it tinted the half of the hero the type sits in. Direction now comes
       from the core and the counter-fill alone. */
    radial-gradient(680px 420px at -8% 118%, rgba(138, 106, 42, 0.07), transparent 62%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #cac3b3;
  padding: clamp(2.8rem, 6vw, 4.6rem) 0 clamp(2.6rem, 5vw, 4rem);
  overflow: hidden;
  /* No box-shadow. The lift used to be a warm gold spill, on the reasoning that
     you cannot darken near-black so elevation must be spent in light. True, but
     it leaked gold onto the page below the hero, which is where the brown was
     escaping the block that owned it. The base now ends on --ink-2 against a
     --surface page, so the boundary still steps without any colour. */
}
.page-hero::before {
  /* Grain, masked to the light rather than to the top edge: it appears where the
     light falls and is gone in shadow, which is how texture behaves. A uniform
     screen-door across the whole block reads as a rendering artefact. */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(224, 198, 134, 0.08) 0.9px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: radial-gradient(700px 440px at 76% 14%, rgba(0,0,0,0.85), transparent 70%);
  -webkit-mask-image: radial-gradient(700px 440px at 76% 14%, rgba(0,0,0,0.85), transparent 70%);
  pointer-events: none;
}
.page-hero::after {
  /* The edge. Fades to transparent at both ends so it never terminates in a hard
     stub against the viewport. */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(211, 172, 87, 0.3) 22%,
    rgba(242, 212, 145, 0.55) 52%,
    rgba(211, 172, 87, 0.3) 78%,
    transparent 100%);
  pointer-events: none;
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; max-width: 18em; }
/* 44em at this size ran to ~100 characters, well past the 45-75 that stays
   comfortable. Tighter also makes the open right-hand side read as deliberate
   ragged-right rather than a wide block that happens to stop short. */
.page-hero .lede { color: #cac3b3; max-width: 34em; }
.page-hero .btn-row { margin-top: 1.8rem; }
/* On a wide screen the light sits well right of the text column and the worst
   contrast in the block is 5.2:1. Narrow the viewport and the two occupy the
   same space: at 390px the light landed straight on the breadcrumbs and took
   #948b76 down to 3.07:1, under the 4.5 AA needs. Measured, not guessed.

   So on small screens the source retreats into the top-right corner and loses
   most of its intensity. The text column keeps the dark end of the plane, which
   is the only part of the composition a phone actually has room for. */
@media (max-width: 980px) {
  .page-hero {
    background:
      radial-gradient(220px 170px at 96% 4%, rgba(247, 228, 181, 0.09), transparent 72%),
      radial-gradient(560px 340px at 98% 0%, rgba(214, 176, 92, 0.07), transparent 68%),
      radial-gradient(520px 340px at -12% 116%, rgba(138, 106, 42, 0.06), transparent 62%),
      linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  }
  .page-hero::before {
    mask-image: radial-gradient(460px 300px at 96% 2%, rgba(0,0,0,0.7), transparent 70%);
    -webkit-mask-image: radial-gradient(460px 300px at 96% 2%, rgba(0,0,0,0.7), transparent 70%);
  }
}

/* Breadcrumbs */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  font-size: 0.84rem;
}
.crumbs li { display: inline-flex; align-items: center; gap: 0.35em; margin: 0; color: #948b76; }
.crumbs li + li::before { content: "/"; color: #8a8170; margin-right: 0.35em; }
.crumbs a { color: #beb59f; text-decoration: none; }
.crumbs a:hover { color: #e8c778; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #d6b974; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card p { font-size: var(--fs-sm); }
.card .link-arrow { margin-top: auto; font-size: var(--fs-sm); position: relative; z-index: 2; }

.card-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(211, 172, 87, 0.06);
  border: 1px solid rgba(211, 172, 87, 0.18);
  margin-bottom: 1.2rem;
}
.card-icon svg { width: 27px; height: 27px; color: var(--accent-mid); }

.card-glow::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--laser);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.card-glow:hover::before { opacity: 1; }

/* Dark cards */
.card-dark {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(214, 185, 116, 0.18);
  box-shadow: none;
}
.card-dark h3, .card-dark h4 { color: #fff; }
.card-dark p { color: #beb59f; }
.card-dark:hover { border-color: rgba(214, 185, 116, 0.55); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35); }

/* Feature list rows */
.check-list { list-style: none; padding: 0; margin: 1.2rem 0; }
.check-list li {
  position: relative;
  padding-left: 2.1em;
  margin-bottom: 0.7em;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.16em;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: linear-gradient(135deg, #e9c878, #b98f35);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: 0.38em;
  top: 0.52em;
  width: 0.58em;
  height: 0.3em;
  border-left: 2.5px solid #201703;
  border-bottom: 2.5px solid #201703;
  transform: rotate(-45deg);
}

/* Stat band */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; text-align: center; }
@media (max-width: 860px) { .stats-band { grid-template-columns: repeat(2, 1fr); } }
.stat {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(214, 185, 116, 0.18);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.stat:hover { transform: translateY(-5px); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35); border-color: rgba(214, 185, 116, 0.55); }
.stat b {
  order: 1;
  font-family: var(--font-head);
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 700;
  display: block;
  background: var(--laser);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}
.stat::after {
  content: "";
  order: 2;
  width: 26px;
  height: 2px;
  background: var(--laser);
  border-radius: 2px;
  margin: 0.7em 0;
}
.stat span { order: 3; display: block; font-size: 0.92rem; color: var(--text-soft); }
.section-dark .stat span { color: #a49b88; }
.section:not(.section-dark) .stat { background: var(--mist); border-color: var(--line); }

/* Steps / timeline */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: 0; position: relative; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 2rem 4.4rem;
  margin: 0;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -0.2rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  color: #201703;
  background: linear-gradient(135deg, #e9c878, #b98f35);
  box-shadow: 0 8px 20px rgba(168, 130, 47, 0.35);
  z-index: 2;
}
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 2.8rem;
  bottom: -0.2rem;
  width: 2px;
  background: linear-gradient(180deg, rgba(168, 130, 47, 0.5), rgba(168, 130, 47, 0.08));
}
.steps h3, .steps h4 { margin-bottom: 0.3em; }
.steps p { font-size: 0.98rem; }

/* Comparison table */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
table.compare { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 0.95rem; }
table.compare th, table.compare td { padding: 0.95em 1.2em; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.compare thead th {
  font-family: var(--font-head);
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink-2);
  border-bottom: 0;
}
table.compare thead th:first-child { border-radius: 0; }
table.compare tbody tr:last-child td { border-bottom: 0; }
table.compare tbody tr:nth-child(even) { background: var(--mist); }
table.compare td strong { white-space: nowrap; }
table.compare .yes { color: var(--green); font-weight: 700; }
table.compare .no { color: var(--red); font-weight: 700; }

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */
.faq-tools { margin-bottom: 2rem; }
.faq-search {
  width: 100%;
  font: inherit;
  padding: 0.95em 1.3em 0.95em 3em;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--head);
  background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a49b88' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 1.1em center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(232, 199, 120, 0.18); }

.faq-cats { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.1rem; }
.faq-cat {
  font-family: var(--font-head);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--mist);
  color: var(--text);
  cursor: pointer;
  transition: all 0.18s ease;
}
.faq-cat:hover { border-color: var(--accent); color: var(--accent-light); }
.faq-cat.active { background: linear-gradient(120deg, #e9c878, #b98f35); color: #201703; border-color: transparent; }

.faq-group-title { margin: 2.6rem 0 1.1rem; font-size: 1.3rem; }
.faq-group-title:first-of-type { margin-top: 0; }

details.faq {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--mist);
  margin-bottom: 0.8rem;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
details.faq[open] { border-color: #d6b974; box-shadow: var(--shadow-sm); }
details.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.3rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--head);
  transition: color 0.15s ease;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary:hover { color: var(--accent-light); }
details.faq summary::after {
  content: "";
  flex: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--mist-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f3efe4' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat center;
  transition: transform 0.25s ease, background-color 0.2s ease;
}
details.faq[open] summary::after { transform: rotate(45deg); background-color: var(--mist-2); }
.faq-a { padding: 0 1.3rem 1.2rem; font-size: 0.98rem; }
.faq-a p:last-child { margin-bottom: 0; }
details.faq.hidden { display: none; }

.faq-empty {
  display: none;
  text-align: center;
  padding: 2.4rem;
  background: var(--mist);
  border-radius: var(--radius-lg);
  color: var(--text-soft);
}
.faq-empty.visible { display: block; }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.testi-track:focus-visible { outline: 3px solid #f2d491; outline-offset: 4px; border-radius: var(--radius-lg); }
.testi-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(420px, 85%);
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.4rem 0.2rem 1.4rem;
  scrollbar-width: none;
}
.testi-track::-webkit-scrollbar { display: none; }
.testi {
  scroll-snap-align: start;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.7rem 1.8rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.section-dark .testi { background: rgba(255,255,255,0.05); border-color: rgba(214,185,116,0.18); }
.section-dark .testi p { color: #ded6c3; }
.section-dark .testi footer { color: #a49b88; }
.testi .stars { color: var(--gold); letter-spacing: 2px; font-size: 1rem; margin-bottom: 0.7rem; }
.testi p { font-size: 0.99rem; font-style: italic; color: var(--head); }
.testi footer { margin-top: auto; padding-top: 0.9rem; font-size: 0.88rem; font-weight: 600; color: var(--text-soft); font-style: normal; }
.testi-nav { display: flex; gap: 0.6rem; justify-content: center; margin-top: 0.4rem; }
.testi-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--mist);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: var(--head);
  transition: all 0.18s ease;
}
.testi-btn:hover { border-color: var(--accent); color: var(--accent-light); transform: translateY(-2px); }
.section-dark .testi-btn { background: rgba(255,255,255,0.06); border-color: rgba(214,185,116,0.3); color: #fff; }

/* --------------------------------------------------------------------------
   Foot pain map
   -------------------------------------------------------------------------- */
@keyframes foot-float {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}

/* X-ray draw-in: every bone traces itself on reveal */
.js [data-reveal] .bone,
.js [data-reveal] .tendon,
.js [data-reveal] .fascia,
.js [data-reveal] .tissue {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  fill-opacity: 0;
}
.js [data-reveal].revealed .bone,
.js [data-reveal].revealed .tendon,
.js [data-reveal].revealed .fascia,
.js [data-reveal].revealed .tissue {
  animation: bone-draw 1.4s ease forwards;
}
.js [data-reveal].revealed .bone:nth-of-type(odd) { animation-delay: 0.15s; }
.js [data-reveal].revealed .tendon { animation-delay: 0.7s; }
.js [data-reveal].revealed .fascia { animation-delay: 0.95s; }
@keyframes bone-draw {
  to { stroke-dashoffset: 0; fill-opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] .bone, .js [data-reveal] .tendon,
  .js [data-reveal] .fascia, .js [data-reveal] .tissue {
    stroke-dasharray: none; stroke-dashoffset: 0; fill-opacity: 1; animation: none;
  }
}

/* Selected zone lights up */
@keyframes halo {
  0%   { transform: scale(0.55); opacity: 0.95; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Hero entrance

   The supporting content settles in around the headline on load. The <h1> is
   deliberately excluded: fading text from opacity 0 postpones the moment the
   browser counts it as painted, and the headline is a Largest Contentful Paint
   candidate. Animating it would trade a measured ranking signal for an effect
   nobody asked for. So the headline is simply there, and everything else
   arrives around it -- which reads as more deliberate than sliding the whole
   block anyway.

   Gated on .js: the class is set by the inline script in <head>, so a browser
   that never runs it renders the hero at full opacity instead of an empty box.
   Transform and opacity only, so nothing reflows and no CLS is introduced.
   -------------------------------------------------------------------------- */
.js .hero-glass > .kicker,
.js .hero-glass > .lede,
.js .hero-glass > .hero-badges,
.js .hero-glass > .btn-row {
  animation: fadeUp 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.js .hero-glass > .kicker      { animation-delay: 0.05s; }
.js .hero-glass > .lede        { animation-delay: 0.14s; }
.js .hero-glass > .hero-badges { animation-delay: 0.22s; }
.js .hero-glass > .btn-row     { animation-delay: 0.30s; }

@media (prefers-reduced-motion: reduce) {
  .js .hero-glass > .kicker,
  .js .hero-glass > .lede,
  .js .hero-glass > .hero-badges,
  .js .hero-glass > .btn-row {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Quiz
   -------------------------------------------------------------------------- */
.quiz {
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  max-width: 720px;
  margin-inline: auto;
}
.quiz-progress { height: 6px; background: var(--mist-2); border-radius: 3px; overflow: hidden; margin-bottom: 1.8rem; }
.quiz-progress i { display: block; height: 100%; width: 0; background: var(--laser); border-radius: 3px; transition: width 0.35s ease; }
.quiz-step { display: none; }
.quiz-step.active { display: block; animation: fadeUp 0.3s ease; }
.quiz-q { font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; color: var(--head); margin-bottom: 1.2rem; }
.quiz-opts { display: grid; gap: 0.7rem; }
.quiz-opt {
  min-height: 44px;
  text-align: left;
  font: inherit;
  font-weight: 500;
  padding: 1em 1.3em;
  background: var(--mist-2);
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--head);
}
.quiz-opt:hover { border-color: var(--accent); background: #1c1c1f; transform: translateX(4px); }
.quiz-result { text-align: center; }
.quiz-result .quiz-icon { font-size: 3rem; line-height: 1; margin-bottom: 1rem; }
.quiz-restart { margin-top: 1rem; background: none; border: 0; color: var(--text-soft); cursor: pointer; font: inherit; font-size: 0.9rem; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-head); font-weight: 600; font-size: 0.88rem; color: var(--head); }
.field input, .field select, .field textarea {
  font: inherit;
  padding: 0.85em 1.1em;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--mist);
  color: var(--head);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(232, 199, 120, 0.16);
}
.field textarea { min-height: 130px; resize: vertical; }
.form-note { font-size: 0.84rem; color: var(--text-soft); }
.form-status { display: none; padding: 1em 1.3em; border-radius: 12px; font-weight: 500; margin-top: 1rem; }
.form-status.ok { display: block; background: #e7f8f1; color: #0c6b4c; border: 1px solid #b5e6d3; }
.form-status.err { display: block; background: #fdeeec; color: #a03329; border: 1px solid #f3c8c2; }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  border: 1px solid rgba(214, 185, 116, 0.28);
  background:
    radial-gradient(800px 400px at 85% 0%, rgba(232, 199, 120, 0.08), transparent 60%),
    radial-gradient(700px 400px at 10% 100%, rgba(138, 106, 42, 0.07), transparent 60%),
    linear-gradient(120deg, var(--ink) 0%, var(--ink-2) 100%);
  border-radius: var(--radius-lg);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  color: #cac3b3;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 2rem;
  align-items: center;
}
@media (max-width: 800px) { .cta-band { grid-template-columns: 1fr; } }
.cta-band h2 { color: #fff; margin-bottom: 0.35em; }
.cta-band p { margin: 0; }
.cta-band .btn-row { flex: none; }

/* --------------------------------------------------------------------------
   Prose / article
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Explanatory diagrams

   Inline SVG rather than images: nothing to request, nothing to lay out late,
   sharp at any pixel density, and it can read the site's own colour tokens so
   it themes with the page instead of sitting on top of it. aspect-ratio holds
   the box before paint, so a diagram never costs a layout shift.

   Photographs are the wrong tool on a condition page anyway. These exist to
   show the one thing the prose is spending a paragraph describing.
   -------------------------------------------------------------------------- */
.diagram {
  margin: var(--sp-6) 0;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.diagram svg { display: block; width: 100%; height: auto; aspect-ratio: 640 / 300; }
.diagram figcaption {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 62ch;
}

.dg-arch   { fill: none; stroke: rgba(201, 194, 177, 0.30); stroke-width: 30; stroke-linecap: round; }
.dg-bone   { fill: rgba(201, 194, 177, 0.30); stroke: var(--text-soft); stroke-width: 1.5; }
.dg-fascia { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; }
.dg-hot      { fill: rgba(245, 185, 61, 0.22); }
.dg-hot-core { fill: var(--gold); }
.dg-ground { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 5 6; }
.dg-lead   { fill: none; stroke: var(--line); stroke-width: 1.5; }
.dg-label  { fill: var(--text-soft); font-size: 15px; font-family: inherit; }
.dg-fascia-label { fill: var(--accent-light); font-weight: 600; }
.dg-arch-label   { fill: var(--text); }

/* Per-diagram parts. All of them lean on the same idea: muted grey is anatomy,
   gold is whatever the page is actually about. */
.dg-head    { fill: var(--text); font-weight: 600; }
.dg-vessel  { fill: rgba(201, 194, 177, 0.10); stroke: var(--text-soft); stroke-width: 2; }
.dg-valve   { fill: none; stroke: var(--text-soft); stroke-width: 4; stroke-linecap: round; }
.dg-valve-open { stroke: var(--gold); }
.dg-flow-up   { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.dg-flow-down { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.dg-pool    { fill: rgba(245, 185, 61, 0.30); }
.dg-bonebar { fill: none; stroke: var(--text-soft); stroke-width: 13; stroke-linecap: round; }
.dg-joint   { fill: rgba(201, 194, 177, 0.30); stroke: var(--text-soft); stroke-width: 1.5; }
.dg-joint-mid  { fill: rgba(245, 185, 61, 0.28); stroke: var(--accent); }
.dg-joint-late { fill: rgba(245, 185, 61, 0.50); stroke: var(--gold); }
.dg-limb    { fill: rgba(201, 194, 177, 0.08); stroke: var(--text-soft); stroke-width: 2; }
.dg-zone    { stroke: none; }
.dg-zone-3  { fill: rgba(245, 185, 61, 0.10); }
.dg-zone-2  { fill: rgba(245, 185, 61, 0.18); }
.dg-zone-1  { fill: rgba(245, 185, 61, 0.34); }
.dg-muscle  { fill: rgba(201, 194, 177, 0.16); stroke: var(--text-soft); stroke-width: 2; }
.dg-tendon  { fill: none; stroke: var(--accent); stroke-width: 15; stroke-linecap: round; }
.dg-layer   { stroke: var(--line); stroke-width: 1.5; }
.dg-layer-1 { fill: rgba(201, 194, 177, 0.05); }
.dg-layer-2 { fill: rgba(201, 194, 177, 0.09); }
.dg-layer-3 { fill: rgba(201, 194, 177, 0.14); }
.dg-beam       { fill: none; stroke-width: 5; stroke-linecap: round; }
.dg-beam-short { stroke: var(--gold); }
.dg-beam-long  { stroke: var(--accent); }
.dg-foot { fill: rgba(201, 194, 177, 0.08); stroke: var(--text-soft); stroke-width: 2; }
.dg-toe  { fill: none; stroke: var(--text-soft); stroke-width: 10; stroke-linecap: round; }


@media (max-width: 640px) {
  .diagram { padding: var(--sp-4) var(--sp-3) var(--sp-3); }
  .dg-label { font-size: 18px; }
}

/* Reading measure. --wrap-narrow is 860px, which at a 17px body puts a line of
   running text at roughly 101 characters; comfortable reading is 45-75. The
   container stays 860px so tables, figures and headings keep their width, and
   only the text that gets read line after line is constrained. */
.prose p,
.prose li { max-width: 72ch; }

.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose > :first-child { margin-top: 0; }
.prose img { border-radius: var(--radius-lg); }
.prose .callout {
  background: rgba(211, 172, 87, 0.06);
  border: 1px solid rgba(211, 172, 87, 0.2);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.7rem;
  margin: 1.8rem 0;
}
.prose .callout h4 { margin-bottom: 0.4em; }
.prose .callout p:last-child { margin-bottom: 0; }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  font-size: 0.88rem;
  color: #a49b88;
  margin-top: 1rem;
}

/* Photo slots.
   Each frame renders the gold monogram fallback underneath; the <img> removes
   itself if the file isn't present yet, so a missing photo never shows a broken
   image. Drop files into assets/img/photos/ to fill them. */
.photo-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #e9c878, #b98f35);
  display: grid;
  place-items: center;
  min-height: 260px;
  box-shadow: var(--shadow-md);
}
.photo-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-frame .monogram {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 4rem);
  color: #201703;
  letter-spacing: 0.02em;
}
.photo-frame .cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1.4rem 1rem;
  background: linear-gradient(0deg, rgba(12,11,8,0.88), transparent);
  color: #f7f4ec;
  font-size: 0.9rem;
  z-index: 2;
}
.photo-portrait { aspect-ratio: 4 / 5; min-height: 0; }

/* Atmospheric page images. These ship 16:9, and .photo-frame img is absolutely
   positioned with object-fit:cover, so the box height comes entirely from CSS —
   a min-height frame would render ~2.9:1 on desktop and ~1.2:1 on a phone,
   cropping each image differently at every viewport. min-height:0 is required
   or .photo-frame's base 260px becomes a floor below ~462px wide. */
.photo-atmos { aspect-ratio: 16 / 9; min-height: 0; }

/* Author box */
.author-box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  align-items: center;
  background: var(--mist);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  margin-top: 3rem;
}
@media (max-width: 560px) { .author-box { grid-template-columns: 1fr; } }
.author-box .avatar {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d8b055, #a5802e);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.6rem;
  color: #fff;
  flex: none;
}
.author-box h4 { margin-bottom: 0.2em; }
.author-box p { font-size: 0.93rem; margin: 0; }

/* Avatar with a real photo. The monogram renders first as the fallback base
   (same pattern as .photo-frame), and the <img> covers it and removes itself
   on error, so a missing file never shows a broken image. */
.avatar-photo { position: relative; overflow: hidden; }
.avatar-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: #a49b88;
  padding: clamp(3rem, 6vw, 4.5rem) 0 0;
  font-size: 0.94rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1.1fr;
  gap: 2.4rem;
  padding-bottom: 2.8rem;
}
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4, .site-footer .footer-h {
  color: #fff;
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.55em; }
.site-footer a { color: #beb59f; text-decoration: none; transition: color 0.15s ease; }
.site-footer a:hover { color: #e8c778; }
.footer-brand .logo-name { color: #fff; }
.footer-about { font-size: 0.92rem; margin-top: 1rem; color: #a49b88; }
.footer-contact li { display: flex; gap: 0.7em; align-items: flex-start; }
.footer-contact .ic { width: 16px; height: 16px; margin-top: 0.3em; color: #e8c778; flex: none; }
.footer-hours { list-style: none; padding: 0; }
.footer-hours li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.9rem;
  border-bottom: 1px dashed rgba(214, 185, 116, 0.14);
  padding-bottom: 0.45em;
  white-space: nowrap;
}
/* Office label rows. Two offices on different schedules share this list, so
   each block needs a header or the Gardens hours read as a continuation of
   Jupiter's -- which is the misreading that put the wrong hours in the schema
   in the first place. No border, since it heads a group rather than being a
   row in it. */
.footer-hours-office {
  border-bottom: 0 !important;
  padding-bottom: 0.15em !important;
  margin-top: 0.9rem;
  color: #d6b974;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer-hours-office:first-child { margin-top: 0; }
.footer-hours li > span { white-space: nowrap; }
.footer-hours li > span:first-child { flex: none; }
.footer-hours li > span:last-child { text-align: right; }
.footer-hours span:last-child { color: #ded6c3; font-weight: 500; }
/* Social row. 44px boxes because these are real controls, which is the rule
   the touch-target pass set for buttons and the call bar -- an icon link in a
   dense footer is exactly where a thumb lands between two targets. */
.footer-social {
  border-top: 1px solid rgba(214, 185, 116, 0.12);
  padding: 1.2rem 0 0.2rem;
}
.footer-social .wrap {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #a49b88;
  border: 1px solid rgba(214, 185, 116, 0.22);
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.footer-social a:hover {
  color: var(--accent-light);
  border-color: rgba(214, 185, 116, 0.55);
  transform: translateY(-2px);
}
.footer-social svg { width: 20px; height: 20px; }

.footer-bottom {
  border-top: 1px solid rgba(214, 185, 116, 0.12);
  padding: 1.4rem 0 1.6rem;
  font-size: 0.8rem;
  color: #8a8170;
}
.footer-bottom .wrap { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: space-between; }
.footer-bottom a { color: #a49b88; }
.footer-disclaimer {
  font-size: 0.78rem;
  color: #857c67;
  border-top: 1px solid rgba(214, 185, 116, 0.12);
  padding: 1.2rem 0;
}

/* Footer city links */
.footer-cities {
  border-top: 1px solid rgba(214, 185, 116, 0.14);
  padding: 2.4rem 0 2.6rem;
}
.footer-cities h2 {
  font-size: 0.86rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 0.5rem;
}
.footer-cities-note {
  font-size: 0.87rem;
  color: #a49b88;
  max-width: 60ch;
  margin: 0 0 1.3rem;
}
.footer-cities .link-arrow {
  display: inline-flex;
  margin-top: 1.3rem;
  font-size: 0.88rem;
  color: #e4c273;
}
.city-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.55rem 1.6rem;
  font-size: 0.9rem;
}
.city-links a { color: #beb59f; text-decoration: none; }
.city-links a:hover { color: #f2d491; }
.city-links li { margin: 0; }

/* --------------------------------------------------------------------------
   Virtual assistant
   -------------------------------------------------------------------------- */
.assist-fab {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 48;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.3em;
  border: 1px solid rgba(214, 185, 116, 0.45);
  border-radius: 999px;
  background: linear-gradient(120deg, #e9c878, #b98f35);
  color: #201703;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.assist-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.45); }
.assist-fab svg { width: 20px; height: 20px; }
@media (max-width: 760px) {
  .assist-fab { bottom: 4.4rem; right: 0.9rem; padding: 0.85em; }
  .assist-fab-label { display: none; }
  .to-top { display: none; }
}
body.assist-open .assist-fab { display: none; }

.assist-panel {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 90;
  width: min(400px, calc(100vw - 1.8rem));
  max-height: min(640px, calc(100dvh - 2rem));
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.assist-panel[hidden] { display: none; }
.assist-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(120deg, var(--ink), var(--ink-3));
  color: #f7f4ec;
}
.assist-head h2 { font-size: 1.02rem; color: #fff; margin: 0; }
.assist-head p { font-size: 0.78rem; margin: 0; color: #cac3b3; }
.assist-avatar {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(120deg, #e9c878, #b98f35);
  color: #201703;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
}
.assist-close {
  margin-left: auto;
  background: none;
  border: 0;
  color: #f7f4ec;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2em 0.4em;
  border-radius: 8px;
}
.assist-close:hover { background: rgba(255,255,255,0.12); }

.assist-log {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: var(--mist);
  min-height: 180px;
}
.assist-msg {
  max-width: 88%;
  padding: 0.7em 1em;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.55;
}
.assist-msg.bot {
  background: #fff;
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.assist-msg.user {
  background: linear-gradient(120deg, #e9c878, #b98f35);
  color: #201703;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}
.assist-msg a { font-weight: 600; }
.assist-msg ul { margin: 0.5em 0 0; padding-left: 1.2em; }
.assist-msg li { margin-bottom: 0.3em; }

.assist-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.7rem 1rem 0.3rem;
  background: #fff;
  border-top: 1px solid var(--line);
}
.assist-chip {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45em 0.95em;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--head);
  cursor: pointer;
  transition: all 0.15s ease;
}
.assist-chip:hover { border-color: var(--accent); color: var(--accent-light); }

.assist-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: #fff;
}
.assist-form input {
  flex: 1;
  font: inherit;
  font-size: 0.94rem;
  padding: 0.7em 1em;
  border: 1.5px solid var(--line);
  border-radius: 999px;
}
.assist-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,199,120,0.25); }
.assist-form button {
  width: 44px; height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(120deg, #e9c878, #b98f35);
  color: #201703;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.assist-form button svg { width: 19px; height: 19px; }
.assist-note {
  font-size: 0.72rem;
  color: var(--text-soft);
  padding: 0 1.1rem 0.9rem;
  margin: 0;
  background: #fff;
}
.assist-typing { display: inline-flex; gap: 4px; align-items: center; padding: 0.4em 0; }
.assist-typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #b98f35;
  animation: blink 1.2s infinite;
}
.assist-typing i:nth-child(2) { animation-delay: 0.2s; }
.assist-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* --------------------------------------------------------------------------
   Media page
   -------------------------------------------------------------------------- */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--ink);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Video library grid */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
@media (max-width: 980px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .video-grid { grid-template-columns: 1fr; } }
.video-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  font: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d6b974; }
.video-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
}
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.video-card:hover .video-thumb img { transform: scale(1.05); }
.video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(12, 11, 8, 0.25);
  transition: background 0.2s ease;
}
.video-card:hover .video-play { background: rgba(12, 11, 8, 0.05); }
.video-play svg {
  width: 54px;
  height: 54px;
  color: #fff;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.5));
  background: linear-gradient(120deg, #e9c878, #b98f35);
  color: #201703;
  border-radius: 50%;
  padding: 14px;
  transition: transform 0.2s ease;
}
.video-card:hover .video-play svg { transform: scale(1.12); }
.video-title {
  padding: 0.9rem 1.1rem 1.1rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--head);
  line-height: 1.45;
}

/* Expanding video lightbox */
.video-modal { position: fixed; inset: 0; z-index: 120; }
.video-modal[hidden] { display: none; }
.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 5, 0.88);
  backdrop-filter: blur(6px);
}
.video-modal-box {
  position: relative;
  width: min(1100px, 94vw);
  margin: 50vh auto 0;
  transform: translateY(-50%);
  animation: fadeUp 0.25s ease;
}
.video-modal-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}
.video-modal-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-modal-title {
  color: #f7f4ec;
  font-family: var(--font-head);
  font-size: 1.1rem;
  margin: 1rem 0 0;
  text-align: center;
}
.video-modal-close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 44px; height: 44px;
  border: 1px solid rgba(214,185,116,0.5);
  border-radius: 50%;
  background: rgba(12, 11, 8, 0.8);
  color: #f2d491;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.video-modal-close:hover { background: #201c15; }

/* Location pages */
.loc-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.6rem 0; }
@media (max-width: 760px) { .loc-meta { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Utility widgets
   -------------------------------------------------------------------------- */
/* Back to top */
.to-top {
  position: fixed;
  right: 1.2rem;
  bottom: 5.2rem;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--ink-2);
  color: #e8c778;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
  z-index: 45;
  box-shadow: var(--shadow-md);
  display: grid;
  place-items: center;
}
.to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--ink-3); }

/* Mobile call bar */
.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 46;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
}
.callbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.95em;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
}
.callbar .cb-call { background: linear-gradient(120deg, #e9c878, #b98f35); color: #201703; }
.callbar .cb-book { background: var(--ink); color: #fff; }
.callbar .ic { width: 17px; height: 17px; }
@media (max-width: 760px) {
  .callbar { display: grid; }
  body { padding-bottom: 52px; }
  .to-top { bottom: 4.6rem; }
}

/* Reveal animations.
   Scoped to .js so that with JavaScript disabled or broken every element stays
   visible instead of being permanently stuck at opacity:0 (WCAG 1.4.3/4.1). */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.65, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.65, 0.3, 1);
  transition-delay: var(--rd, 0s);
}
.js [data-reveal].revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* Icon default */
.ic { width: 20px; height: 20px; display: inline-block; vertical-align: -0.18em; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; padding: 0; list-style: none; margin: 1.2rem 0; }
.chips li { margin: 0; }
.chips a, .chips span {
  display: inline-block;
  font-size: 0.86rem;
  font-weight: 500;
  padding: 0.45em 1em;
  border-radius: 999px;
  background: var(--mist-2);
  border: 1px solid var(--line);
  color: var(--head);
  text-decoration: none;
  transition: all 0.15s ease;
}
.chips a:hover { border-color: var(--accent); color: var(--accent-light); background: #1c1c1f; }

/* Alert / disclaimer */
.med-note {
  font-size: 0.85rem;
  color: var(--text-soft);
  background: var(--mist);
  border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0;
  padding: 0.9em 1.2em;
  margin-top: 2rem;
}

/* Map */
.map-embed {
  border: 0;
  width: 100%;
  height: 420px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: block;
}

/* Location info cards on contact */
.info-tile {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.info-tile .card-icon { margin: 0; width: 46px; height: 46px; border-radius: 12px; flex: none; }
.info-tile .card-icon svg { width: 22px; height: 22px; }
.info-tile h3 { font-size: 1.05rem; margin-bottom: 0.25em; }
.info-tile p { font-size: 0.95rem; margin: 0; }

/* 404 */
.page-404 { text-align: center; padding: clamp(4rem, 10vw, 8rem) 0; }
.page-404 .big {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(5rem, 16vw, 9rem);
  line-height: 1;
  background: var(--laser);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Print */
@media print {
  .topbar, .site-header, .callbar, .to-top, .site-footer, .laser-beams { display: none !important; }
  body { color: #000; }
}


/* ==========================================================================
   FINAL BUTTON COLOR GUARANTEE
   Context rules like `.section-dark a {color:gold}` outrank `.btn-primary`
   (0-1-1 vs 0-1-0), which made gold-on-gold buttons. These overrides are
   last in the file and maximally specific: buttons keep their own text
   color in EVERY context. Do not add link-color rules below this block.
   ========================================================================== */
.btn-primary, a.btn-primary,
.hero a.btn-primary, .page-hero a.btn-primary,
.section-dark a.btn-primary, .cta-band a.btn-primary,
.section-dark .cta-band a.btn-primary {
  color: #201703;
}
.btn-primary:hover, a.btn-primary:hover,
.hero a.btn-primary:hover, .page-hero a.btn-primary:hover,
.section-dark a.btn-primary:hover, .cta-band a.btn-primary:hover {
  color: #201703;
}
a.btn-ghost { color: var(--head); }
.hero a.btn-ghost, .page-hero a.btn-ghost,
.section-dark a.btn-ghost, .cta-band a.btn-ghost,
.section-dark .cta-band a.btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.hero a.btn-ghost:hover, .page-hero a.btn-ghost:hover,
.section-dark a.btn-ghost:hover, .cta-band a.btn-ghost:hover {
  color: #f2d491;
  border-color: #f2d491;
}


/* Assistant panel stays a light island — self-contained colors */
.assist-msg.bot { color: #4a4438; }
.assist-msg.bot a { color: #7d611f; }
.assist-log { background: #f2ece0; }
.assist-chip { color: #181510; }
.assist-chip:hover { color: #7d611f; }
.assist-form input { background: #fff; color: #181510; border-color: #ddd5c2; }
.assist-note { color: #6b6353; }
.form-status.ok { color: #0c6b4c; }
.form-status.err { color: #a03329; }

/* ==========================================================================
   DYNAMIC LAYER — motion that carries meaning, not decoration.
   Every effect below is disabled under prefers-reduced-motion.
   ========================================================================== */

/* Scroll progress rail */
.scroll-rail {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}
.scroll-rail i {
  display: block;
  height: 100%;
  /* Driven by transform, not width. Width is a layout property: animating it
     on every scroll frame forced a reflow the whole page long, and the
     transition below kept that reflow running continuously. scaleX is
     composited, so scrolling costs nothing. */
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
  background: linear-gradient(90deg, #b98f35, #f2d491 60%, #e9c878);
  box-shadow: 0 0 12px rgba(242, 212, 145, 0.6);
  transition: transform 0.08s linear;
}


/* Stat panel: radial rings that draw as they scroll in */
.statring-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.7rem 1.4rem;
}
@media (max-width: 1080px) { .statring-grid { grid-template-columns: 1fr; } }
.statring {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}
.statring-dial {
  position: relative;
  width: 84px; height: 84px;
  flex: none;
}
.statring-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.statring-dial .track { fill: none; stroke: rgba(214, 185, 116, 0.16); stroke-width: 7; }
.statring-dial .fill {
  fill: none;
  stroke: url(#ringgrad);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 251.2;
  stroke-dashoffset: 251.2;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.statring-dial b {
  position: absolute;
  inset: 0;
  display: grid !important;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.16rem;
  color: #f2d491;
  letter-spacing: -0.02em;
  line-height: 1;
}
.statring p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text);
  text-wrap: pretty;
}

/* Counter pop as the value lands */
[data-counter].counted { animation: count-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes count-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
[data-counter] { display: inline-block; }

/* Condition ticker — continuous marquee, pauses on hover/focus */
.ticker {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding: 0.9rem 0;
  background: #0d0d0e;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track {
  display: flex;
  gap: 2.6rem;
  width: max-content;
  animation: ticker-slide 38s linear infinite;
}
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #cfc6b2;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.ticker a::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e9c878, #b98f35);
  flex: none;
}
.ticker a:hover { color: #f2d491; }
@keyframes ticker-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Hero parallax drift was removed on 2026-08-14 (see main.js). The
   will-change: transform that lived here promoted the video to its own
   compositor layer permanently, which cost memory on every page load for an
   effect that no longer exists. */

/* Card sheen sweep on hover */
.card-glow { overflow: hidden; }
.card-glow::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(242, 212, 145, 0.09), transparent);
  transform: skewX(-18deg);
  transition: left 0.75s cubic-bezier(0.2, 0.7, 0.3, 1);
  pointer-events: none;
  z-index: 1;
}
.card-glow:hover::after { left: 125%; }

@media (prefers-reduced-motion: reduce) {
  .scroll-rail, .ticker { display: none; }
  .statring-dial .fill { transition: none; }
  [data-counter].counted { animation: none; }
  .card-glow::after { display: none; }
}


/* Abacoa wordmark */
.logo-wordmark {
  width: 210px;
  height: auto;
  display: block;
  transition: opacity 0.2s ease;
}
.logo:hover .logo-wordmark { opacity: 0.86; }
@media (max-width: 900px) { .logo-wordmark { width: 178px; } }
@media (max-width: 640px) { .logo-wordmark { width: 152px; } }
.site-footer .logo-wordmark { width: 230px; }


/* Legibility floor: nothing renders below 12px at any width.
   This was previously wrapped in @media (max-width: 1100px), which contradicted
   its own comment — every desktop width fell straight through it and kept
   11.52px on the assistant note and the symptom-card tags. It is unconditional
   now, and it lives at the end of the stylesheet (see "Legibility floor" below)
   so that later component rules can't quietly undercut it on source order. */


/* --------------------------------------------------------------------------
   Header fit
   The desktop bar measured 1357px of content against a 1180px .wrap, so on
   every common laptop width (1280 / 1366 / 1440 / 1512) the Book Appointment
   button was pushed past the right edge. Three moves fix it: give the header
   its own wider container, tighten the nav at laptop widths, and hand mid-size
   screens the burger instead of a crammed bar.
   Every rule is min-width guarded so none of it leaks into the mobile menu.
   -------------------------------------------------------------------------- */
@media (min-width: 1080px) {
  /* Three columns rather than a flex row, so the nav is centred on the bar
     instead of drifting toward whichever side has the wider neighbour. The
     outer columns are equal, so the nav lands on the true centre and the logo
     and CTA sit against their own edges. */
  .site-header .wrap {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    /* 1280 rather than 1400: with the phone gone the bar no longer needs the
       extra room, and at 1440 a 1400px container left 20px gutters that read
       as edge-to-edge. This keeps the header a touch wider than the 1180px
       body copy without touching the viewport edges. */
    width: min(1280px, calc(100% - 2.5rem));
    gap: 1rem;
  }
  /* margin-right:auto was what shoved the nav and CTA to the right. */
  .logo { margin-right: 0; justify-self: start; }
  .site-nav { justify-self: center; }
  .header-cta { justify-self: end; }

  .nav { gap: 0.1rem; }
  .nav a, .nav button.nav-toggle-sub {
    font-size: 0.9rem;
    padding: 0.65em 0.62em;
    gap: 0.25em;
  }
  .nav a.active::after { left: 0.62em; right: 0.62em; }
}

/* The roomy config (full logo, open/closed pill, generous nav padding)
   measures 1208px, which needs a 1260px container to breathe — so it starts at
   1300px. Below that, trim and drop the pill; it is repeated in the footer and
   on every contact block. */
@media (min-width: 1080px) and (max-width: 1299px) {
  .site-header .wrap { gap: 0.8rem; }
  .nav a, .nav button.nav-toggle-sub { font-size: 0.86rem; padding: 0.65em 0.45em; }
  .nav a.active::after { left: 0.45em; right: 0.45em; }
  .header-cta { gap: 0.55rem; }
  .logo-wordmark { width: 178px; }
}


/* Buttons are nowrap so labels never break mid-phrase on desktop, but at 320px
   a long CTA ("Request an appointment for Foot BBL") measured 448px and dragged
   its .btn-row, the surrounding .prose and the hero glass panel past the
   viewport, letting the whole page scroll sideways. Below 560px let the label
   wrap instead — it only wraps when it genuinely doesn't fit, so nothing
   changes on 375/390 where the labels already fit on one line. */
@media (max-width: 560px) {
  .btn {
    white-space: normal;
    text-align: center;
    max-width: 100%;
    letter-spacing: 0.06em;
    line-height: 1.25;
  }
  .btn-lg { padding: 1em 1.5em; }
}

/* The contact page's info tiles are flex rows (icon + text). Flex items default
   to min-width:auto, so the unbreakable "AbacoaPodiatry@gmail.com" token set a
   327px floor and pushed the tile past a 280px container at 320px wide. Let the
   text column shrink and let the address/email wrap. */
.info-tile > * { min-width: 0; }
.info-tile p, .info-tile a { overflow-wrap: anywhere; }


/* Symptom guide cards. These carry the copy and condition links that used to
   sit behind the interactive foot diagram; without hotspots driving them they
   are all visible at once, so they need to read as a set. */
.symptom-grid { align-items: stretch; }
.symptom-card { display: flex; flex-direction: column; }
.symptom-card .tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-light);
  border: 1px solid rgba(214, 185, 116, 0.35);
  background: rgba(214, 185, 116, 0.08);
  border-radius: 999px;
  padding: 0.35em 0.9em;
  margin-bottom: 0.9rem;
}
.symptom-card h3 { font-size: 1.12rem; margin-bottom: 0.5em; }
.symptom-card ul { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.symptom-card ul li { margin: 0; font-size: 0.92rem; }
/* Pin the CTA to the bottom so buttons line up across cards of uneven height. */
.symptom-card .btn { margin-top: auto; align-self: flex-start; }


/* --------------------------------------------------------------------------
   Legibility floor
   Nothing renders below 12px, at any width. Kept at the end of the file on
   purpose: .symptom-card .tag sets 0.72rem (11.52px) further up, and a rule of
   equal specificity only wins if it comes last.
   -------------------------------------------------------------------------- */
.footer-bottom,
.footer-bottom a,
.footer-disclaimer,
.article-meta,
.crumbs,
.symptom-card .tag,
.form-note,
.med-note,
.assist-note,
.assist-note a {
  font-size: 0.8rem;
  line-height: 1.55;
}
.logo-tag { font-size: 0.75rem; }


/* --------------------------------------------------------------------------
   Touch targets
   Measured on a 390px viewport: the footer link columns rendered 18px-tall
   targets, the city list 16px, the legal row 15px and the breadcrumbs 20px —
   all of them stacked close enough that a thumb lands between two links as
   easily as on one. WCAG 2.5.8 asks for 24x24 CSS px; Apple and Google both ask
   for 44px on anything that behaves like a button.

   So the rules split by what the control actually is:
     - real controls (buttons, chips, arrow links, the call bar) get 44px;
     - dense secondary link lists get a 24px box plus padding, which both
       enlarges the target and opens up the gap between neighbours.

   Scoped to coarse pointers and to <=980px so the desktop layout — where a
   mouse makes an 18px row perfectly clickable — is untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 980px), (pointer: coarse) {
  /* Controls: full 44px. inline-flex + centring keeps the label optically
     centred as the box grows, so nothing shifts visually. */
  .btn-sm,
  .faq-cat,
  .link-arrow,
  .callbar a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .link-arrow { justify-content: flex-start; }

  /* Dense link lists: make the whole row tappable rather than just the glyphs.
     Negative inline margin keeps the text optically flush with the column edge
     while the padded box extends past it. */
  .site-footer .footer-grid ul li a,
  .footer-contact li a,
  .city-links a,
  .symptom-card ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0.25rem 0.4rem;
    margin-inline: -0.4rem;
  }
  /* The gap between neighbours matters as much as the box: 2.5.8 passes an
     undersized target when no other target sits within its 24px circle. */
  .site-footer .footer-grid ul li { margin-bottom: 0.15em; }
  .city-links { gap: 0.35rem 1.6rem; }
  .symptom-card ul li + li { margin-top: 0.1rem; }

  /* Legal row and breadcrumbs: same treatment, smaller box — these sit on one
     line with wide horizontal gaps, so only the vertical axis is short. */
  .footer-bottom a,
  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
  }
  .footer-bottom .wrap { gap: 0.4rem 2rem; }
}


/* --------------------------------------------------------------------------
   Scrollable comparison tables
   main.js marks a .table-scroll that genuinely overflows with [data-scrollable]
   and adds the caption below it. A gradient fade over the right edge was tried
   first and dropped: the table cells are opaque, so any overlay inside the
   scroll container is painted underneath them, and moving it outside would mean
   wrapping all three tables in an extra element for a cue that a plain sentence
   states more clearly.
   -------------------------------------------------------------------------- */
.table-scroll:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.table-hint {
  display: none;
  font-size: 0.8rem;
  color: var(--text-soft);
  margin: 0.55rem 0 0;
}
@media (max-width: 760px) {
  /* Only worth saying on the widths where the table is actually clipped. */
  .table-scroll[data-scrollable] + .table-hint { display: block; }
}


/* ==========================================================================
   Instagram strip (homepage)
   Pure CSS marquee. The track holds every tile twice and translates by exactly
   -50%, so the second copy lands where the first began and the loop has no
   seam. Only transform is animated, so it runs on the compositor and costs
   nothing on the main thread -- the same reason the hero parallax had to go.
   ========================================================================== */
.ig-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.ig-head h2 { margin: 0; }

.ig-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  /* Fades the strip into the section at both edges so tiles enter and leave
     rather than being chopped off at the viewport wall. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ig-viewport::-webkit-scrollbar { display: none; }
.ig-viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.ig-track {
  display: flex;
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0.25rem 1.25rem;
  width: max-content;
  animation: ig-roll var(--ig-duration, 56s) linear infinite;
}
/* Hovering or tabbing into the strip stops it, so nobody has to chase a
   moving target to read a caption. */
.ig-viewport:hover .ig-track,
.ig-viewport:focus-within .ig-track { animation-play-state: paused; }

.ig-item {
  position: relative;
  flex: 0 0 auto;
  /* Uniform height, width follows the image. A single aspect ratio sliced the
     "After" half off the before/after collages, which are near square while
     the clinical photos are tall. The per-tile aspect-ratio is set inline from
     the real file dimensions so width is reserved before the image decodes. */
  height: clamp(230px, 27vw, 320px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--mist-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.ig-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ig-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem 0.9rem 0.75rem;
  background: linear-gradient(0deg, rgba(12, 11, 8, 0.92), transparent);
  color: #f3efe4;
  font-size: 0.78rem;
  line-height: 1.3;
}
.ig-note {
  margin: 1.6rem 0 0;
  font-size: 0.8rem;
  color: var(--text-soft);
  text-align: center;
}

@keyframes ig-roll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Reduced motion: no autoplay at all. The strip becomes an ordinary
   horizontally scrollable row, which it already is underneath. */
@media (prefers-reduced-motion: reduce) {
  .ig-track { animation: none; }
}