@import url("../fonts/fonts.css");

/* ============================================================
   AARO consult sites — shared stylesheet

   This matches the parent site at ~/Claude/Github/aarowp. That
   stylesheet is the authority: tokens, type scale, button geometry,
   shadow ramp and section rhythm are taken from it, not invented here.
   If the parent changes, change this to follow — do not fork the system.

   From the parent, verbatim:
     ink #0B2240 · accent #0A7E6A · gold #B8882A · surface #F4F7FB
     Cormorant Garamond 300 display · Inter body 15px/1.65 · DM Mono labels
     radii 4 / 10 / 16 · three-stop shadows · 1px framed images
     sections separated by a hairline, alternate ground #F4F7FB

   The parent's signature: the second line of a display heading is set
   italic in the accent. See .hero h1 em.

   WhatsApp green (#25D366) appears nowhere on these pages. The affordance
   is carried by the WhatsApp glyph and the label, not by borrowing Meta's
   brand colour, which sat outside AARO's palette and made the primary
   action look like a third-party widget.

   The rule that governs button colour:

     accent green #0A7E6A — every button, and the floating WhatsApp button

   One colour for every action on the page. Filled is the default; the
   outline variant is the same green as a border and label, used only where
   two buttons sit together and one must read as secondary.
   ============================================================ */

:root {
  /* palette — parent tokens */
  --bg:          #FFFFFF;
  --surface:     #F4F7FB;
  --surface-2:   #E8EFF7;
  --ink:         #0B2240;
  --ink-muted:   #4A5A75;
  --ink-soft:    #8A98AD;
  --accent:      #0A7E6A;
  --accent-soft: #E0F2EE;
  --accent-lift: #0E9B82;
  --accent-deep: #075E4F;   /* button hover; staying in the green rather than going navy */
  --line:        #DCE4EE;
  --line-soft:   #E8EFF7;
  --inverse-bg:  #0B2240;
  --inverse-ink: #FFFFFF;
  --inverse-mute: rgb(255 255 255 / .55);
  --gold:        #B8882A;
  --gold-soft:   #F5E9CE;

  /* type — parent tokens */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, monospace;
  --display-weight: 300;
  --display-letter: -0.005em;
  --display-size-h1: clamp(42px, 5vw, 68px);
  --display-size-h2: clamp(28px, 3.2vw, 40px);
  --display-size-h3: clamp(20px, 2.2vw, 24px);

  /* geometry — parent tokens */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 16px;
  --img-radius: 10px;
  --img-border: 1px solid var(--line);

  --shadow-sm:    0 1px 2px rgb(15 28 50 / .06), 0 2px 4px rgb(15 28 50 / .04);
  --shadow-md:    0 4px 8px rgb(15 28 50 / .06), 0 12px 24px rgb(15 28 50 / .08), 0 24px 48px rgb(15 28 50 / .06);
  --shadow-hover: 0 8px 16px rgb(15 28 50 / .10), 0 20px 40px rgb(15 28 50 / .10), 0 32px 64px rgb(15 28 50 / .08);

  --container: 1320px;
  --section-pad-x: clamp(20px, 4vw, 56px);
  --section-pad-y: clamp(48px, 6vw, 88px);
  --grid-gap: 20px;
  --header-h: 72px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-muted);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss03", "ss04", "cv05", "liga";
  font-optical-sizing: auto;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-letter);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--display-size-h1); line-height: 1.04; }
h2 { font-size: var(--display-size-h2); line-height: 1.1; }
h3 { font-size: var(--display-size-h3); line-height: 1.2; }
h4 { font-size: 17px; line-height: 1.25; font-weight: 400; }

/* The parent's signature move. */
h1 em, h2 em, h3 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: inherit;
  color: var(--accent);
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: 13px; font-weight: 600; text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- layout ---------- */
.wrap {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: var(--section-pad-x);
}
/* Parent rhythm: sections are separated by a hairline, and alternate onto
   the pale ground rather than being boxed. */
.section { padding-block: var(--section-pad-y); position: relative; }
.section + .section { border-top: 1px solid var(--line); }
.section--wash { background: var(--surface); }
.section--wash + .section--wash { border-top-color: var(--line-soft); }

.section__head { max-width: 720px; margin: 0 auto clamp(32px, 4vw, 48px); text-align: center; }
.section__head p { margin-top: 14px; font-size: 15px; max-width: 580px; margin-inline: auto; color: var(--ink-muted); }

/* ---------- eyebrow / label, the mono face ---------- */
/* The parent uses DM Mono at 10.5px with heavy tracking for every label.
   It is the third voice in the system and doing without it loses the look. */
.eyebrow, .card__step, .compare__badge, .utility, .doctor__creds {
  font-family: var(--font-mono);
}
.eyebrow {
  display: inline-block; margin-bottom: 12px;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 500; color: var(--accent);
}
.hero .eyebrow { color: #9FE3D2; }

/* ---------- scroll progress ---------- */
.scroll-progress {
  position: fixed; inset: 0 0 auto; z-index: 95;
  height: 2px; transform-origin: 0 50%; transform: scaleX(0);
  background: var(--accent);
  will-change: transform; pointer-events: none;
}

/* ---------- utility bar ---------- */
.utility {
  position: relative; z-index: 91;
  background: var(--ink); color: var(--inverse-mute);
  font-size: 12px; letter-spacing: .04em; padding: 8px 0;
}
.utility__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.utility__contact { display: flex; gap: 20px; }
.utility a { color: #fff; text-decoration: none; transition: color .2s var(--ease); }
.utility a:hover { color: var(--accent-soft); }
@media (max-width: 719px) {
  .utility__place { display: none; }
  .utility__inner { justify-content: center; }
}

/* ---------- buttons ---------- */
/* Geometry straight from the parent: 4px radius, 13px/600 body face,
   .02em tracking, a 2px lift and the three-stop shadow on hover. */
.btn {
  --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 24px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-sm);
  font: 600 13px/1.2 var(--font-body); letter-spacing: .02em;
  /* Buttons with an icon were 46px and buttons without were 43.6px, because
     the 18px glyph is taller than a 13px line. One height for all of them, so
     a row of mixed buttons sits on a single baseline. */
  min-height: 46px;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); --btn-bg: var(--accent-deep); --btn-bd: var(--accent-deep); }
.btn:active { transform: translateY(0); transition-duration: .08s; }

.btn__icon {
  /* 15px, matching the optical size of the parent's text arrow. At 18px the
     glyph read as a badge stuck onto the label rather than part of it. */
  display: grid; place-items: center; width: 15px; height: 15px;
  flex: 0 0 auto; transition: transform .2s var(--ease);
}
.btn__icon svg { width: 100%; height: 100%; }
.btn:hover .btn__icon { transform: translateX(3px); }

.btn--light,
.btn--outline { --btn-bg: transparent; --btn-fg: var(--accent); --btn-bd: var(--accent); }
.btn--light:hover,
.btn--outline:hover { --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent); }
.btn--accent  { --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent); }
.btn--accent:hover { --btn-bg: var(--ink); --btn-bd: var(--ink); }
/* WhatsApp buttons are navy like everything else — see the rule at the top of
   this file. .btn--wa exists only to carry the glyph behaviour. */
.btn--wa .btn__icon { transform: none; }
.btn--wa:hover .btn__icon { transform: scale(1.08); }
.btn--block { width: 100%; }

/* On the navy hero and CTA band the outline variant would be a green line on
   a dark ground, which is weak. It fills instead — still the same green. */
.hero .btn--light, .hero .btn--outline,
.cta-band .btn--light, .cta-band .btn--outline {
  --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent);
}
/* The parent's primary hero CTAs are .btn--lg: 16/28, 14px, 51px tall. */
.btn--lg { padding: 16px 28px; font-size: 14px; min-height: 51px; }
.btn--sm { padding: 9px 16px; font-size: 12px; min-height: 38px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn__icon { transition: background-color .2s linear, color .2s linear; }
  .btn:hover, .btn:active, .btn:hover .btn__icon { transform: none; }
}

/* ---------- header ---------- */
/* The parent header is white, bordered and always solid — it does not fade in
   over the hero. Matching that, but keeping it fixed so the CTA stays reachable
   on a long page, which the parent does not have to solve. */
.header {
  position: sticky; top: 0; z-index: 90;
  height: var(--header-h); display: flex; align-items: center;
  background: var(--bg); border-bottom: 1px solid var(--line);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
.header__logo img { width: clamp(120px, 14vw, 150px); }
/* The parent's header is always light, so the light-on-dark logo never shows. */
.header__logo .logo--light { display: none; }
.header__logo .logo--dark  { display: block; }
.header.is-stuck { box-shadow: var(--shadow-sm); }
.header.is-hidden { transform: translateY(-100%); }
.header__cta { display: none; }
@media (min-width: 720px) { .header__cta { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) { .header.is-hidden { transform: none; } }

/* ---------- hero ---------- */
/* The parent hero is a photograph under a navy tint with the copy on the left,
   an eyebrow above and the accent italic on the second line. */
.hero { position: relative; display: grid; align-items: center; min-height: min(78svh, 720px); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 50% 50%); }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(11 34 64 / .92) 0%, rgb(11 34 64 / .74) 42%, rgb(11 34 64 / .34) 74%, rgb(11 34 64 / .18) 100%),
    linear-gradient(180deg, rgb(11 34 64 / .30) 0%, rgb(11 34 64 / .12) 40%, rgb(11 34 64 / .42) 100%);
}
@media (max-width: 899px) {
  .hero__scrim { background: linear-gradient(180deg, rgb(11 34 64 / .82) 0%, rgb(11 34 64 / .70) 50%, rgb(11 34 64 / .88) 100%); }
}
.hero__inner { position: relative; padding-block: clamp(56px, 8vw, 96px); }
.hero__body { max-width: 620px; color: #fff; }
.hero h1 { color: #fff; }
.hero h1 em { display: block; color: #9FE3D2; }
.hero__sub {
  margin-top: 24px; font-size: 18px; line-height: 1.65;
  color: rgb(255 255 255 / .90); max-width: 44ch; font-weight: 400;
}
.hero__note { margin-top: 16px; font-size: 15px; color: rgb(255 255 255 / .68); max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* The stack is driven by margin-top alone. Leaving the default paragraph
   bottom margin in place made each gap the larger of two competing values. */
.hero__body > p { margin-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  .hero__body > * { opacity: 0; transform: translateY(16px); animation: rise .8s var(--ease) forwards; }
  .hero__body > :nth-child(1) { animation-delay: .08s; }
  .hero__body > :nth-child(2) { animation-delay: .18s; }
  .hero__body > :nth-child(3) { animation-delay: .26s; }
  .hero__body > :nth-child(n+4) { animation-delay: .34s; }
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- statement ---------- */
.statement { text-align: center; }
.statement p {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--display-size-h2); line-height: 1.15; letter-spacing: var(--display-letter);
  color: var(--ink); margin-inline: auto; max-width: min(100%, 900px);
}
.statement p em { font-style: italic; color: var(--accent); }
.statement .statement__tail {
  font-family: var(--font-body); font-size: 15px; font-weight: 400;
  color: var(--ink-muted); max-width: 62ch; margin: 24px auto 0; letter-spacing: 0;
}

/* ---------- image frame ---------- */
/* Parent .img-wrap: 1px line, 10px radius, pale ground behind. */
.card__media, .video__frame, .locations__flagship img, .compare__col img {
  border-radius: var(--img-radius);
  border: var(--img-border);
  background: var(--surface);
  overflow: hidden;
}

/* ---------- cards ---------- */
.cards { display: grid; gap: var(--grid-gap); }
.cards--grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
/* Inside a card the media is already framed by the card edge. */
.card__media { position: relative; aspect-ratio: 3 / 2; border: 0; border-radius: 0; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card__media img { transform: scale(1.03); }
/* The parent uses a flat 24px, but its cards sit in a narrow 4-up grid. These
   are wide split cards — the copy column runs to ~600px — and at that width
   24px leaves the text sitting on the edge. Scales with the viewport so the
   narrow grid cards keep something close to the parent's value. */
.card__body { padding: clamp(24px, 3vw, 40px); }
.card__body h3 + p { margin-top: 12px; }
.card__body .btn { margin-top: 24px; }

.cards--split .card { display: grid; }
@media (min-width: 860px) {
  .cards--split .card { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); align-items: center; }
  .cards--split .card__media { aspect-ratio: auto; height: 100%; min-height: 320px; }
  .cards--split .card:nth-child(even) .card__media { order: 2; }
}

/* Parent .card-tag: mono, 10.5px, .16em, uppercase, muted. */
.card__step {
  display: inline-block; margin-bottom: 12px;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .card, .card__media img { transition: none; }
  .card:hover, .card:hover .card__media img { transform: none; }
}

/* ---------- benefit tiles ---------- */
.benefits { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.benefit {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px 24px; text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.benefit:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.benefit svg {
  width: 22px; height: 22px; color: var(--accent); stroke-width: 1.6;
  box-sizing: content-box; padding: 12px; margin: 0 auto 20px;
  background: var(--accent-soft); border-radius: 50%;
}
.benefit h3 { font-size: var(--display-size-h3); }
.benefit p { margin-top: 12px; font-size: 14px; color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .benefit { transition: none; } .benefit:hover { transform: none; } }

/* ---------- bullet list ---------- */
.bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bullets li {
  display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start;
  padding: 18px 20px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.bullets li:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.bullets svg { width: 20px; height: 20px; color: var(--accent); margin-top: 2px; }
.bullets strong { color: var(--ink); font-weight: 600; }

/* ---------- comparison ---------- */
.compare { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.compare__col {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.compare__col:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.compare__col--highlight { border-color: var(--accent); }
.compare__col img { width: 100%; max-width: 240px; margin: 0 auto 20px; border: 0; }
.compare__col h3 { text-align: center; margin-bottom: 20px; }
.compare__col dl { margin: 0; display: grid; }
.compare__col dt {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 500; padding-top: 16px;
}
.compare__col dd { margin: 4px 0 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--ink); }
.compare__col dd:last-of-type { border-bottom: 0; padding-bottom: 0; }
/* Parent .pill--teal. */
.compare__badge {
  display: block; width: fit-content; margin: 0 auto 16px;
  padding: 5px 12px; border-radius: 100px;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-soft);
}
@media (prefers-reduced-motion: reduce) { .compare__col { transition: none; } .compare__col:hover { transform: none; } }

/* ---------- doctors ---------- */
.doctor { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; padding-block: clamp(24px, 3vw, 40px); }
.doctor + .doctor { border-top: 1px solid var(--line); }
.doctor__photo img { width: 100%; }
.doctor__photo img[src$=".jpg"], .doctor__photo img[src$=".jpeg"] {
  border-radius: var(--img-radius); border: var(--img-border); aspect-ratio: 3/4; object-fit: cover;
}
.doctor__role { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--accent); margin-top: 12px; }
.doctor__creds { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-top: 8px; }
/* No bottom margin: .btn is inline-flex so it does not margin-collapse with a
   paragraph, and the two margins were stacking to 39px on pages without a
   press block against 24px on the one with. Spacing below the bio belongs to
   whatever follows it. */
.doctor__bio { margin-top: 20px; margin-bottom: 0; }

/* Press mention. Deliberately not a panel: no border, no ground, no second
   photograph. It reads as a continuation of the doctor's own column, set off
   by a hairline and the broadcaster's mark, so the section stays one thing. */
.doctor__press { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.doctor__press-logo { width: 46px; margin-bottom: 12px; }
.doctor__press p { font-size: 14px; line-height: 1.75; color: var(--ink-muted); }
/* The button's gap used to come from the bio paragraph's bottom margin. With
   the press block in between, that paragraph is a last child and its margin
   collapses to nothing, so the button sat against the text. Own the spacing. */
.doctor .btn { margin-top: 24px; }
@media (min-width: 800px) {
  .doctor { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); }
  .doctor:nth-child(even) .doctor__photo { order: 2; }
}

/* ---------- insurance ---------- */
/* A continuous marquee rather than a static 4+3 grid, which left an orphan
   row. Same mechanism as the parent's news bar: the set is rendered twice and
   the track travels exactly -50%, so the seam never shows. */
.logos { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
         mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logos__track { display: flex; width: max-content; animation: logo-scroll 42s linear infinite; }
.logos:hover .logos__track, .logos:focus-within .logos__track { animation-play-state: paused; }
.logos__set { display: flex; align-items: center; gap: clamp(48px, 6vw, 88px); padding-right: clamp(48px, 6vw, 88px); }
.logos picture, .logos img { display: block; }
.logos img {
  width: auto; height: clamp(40px, 4.4vw, 60px); max-width: 200px; object-fit: contain;
  filter: grayscale(1); opacity: .6; transition: filter .22s var(--ease), opacity .22s var(--ease);
}
.logos img:hover { filter: grayscale(0); opacity: 1; }
@keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Motion off: fall back to the centred wrapped row. */
@media (prefers-reduced-motion: reduce) {
  .logos { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .logos__track { width: auto; animation: none; justify-content: center; flex-wrap: wrap; }
  .logos__set { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .logos__set[aria-hidden="true"] { display: none; }
}

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
/* The parent sets accordion questions in the body face at 15px/500, not in the
   display serif. At h3 size the serif turned every question into two lines of
   large italicised-looking text and swamped the answers underneath. */
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 1.5;
  letter-spacing: normal;
  color: var(--ink); transition: color .18s var(--ease);
}
.faq__q:hover { color: var(--accent); }
/* The parent's control is a bare accent plus that rotates 45° into a cross —
   no circle, no fill, no swap of one bar for another. */
.faq__sign {
  position: relative; flex: 0 0 auto; width: 20px; height: 20px;
  transition: transform .25s var(--ease);
}
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  width: 15px; height: 1.5px; background: var(--accent);
  transform: translate(-50%, -50%);
}
.faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__sign { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p { padding: 0 44px 18px 0; color: var(--ink-muted); font-size: 14px; line-height: 1.7; }
.faq__a ul { padding: 0 44px 18px 20px; margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.7; }
@media (max-width: 719px) {
  .faq__q { font-size: 14.5px; padding: 16px 0; }
  .faq__a p, .faq__a ul { padding-right: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__a, .faq__sign { transition: none; }
  .faq__q[aria-expanded="true"] .faq__sign { transform: none; }
}

/* ---------- video ---------- */
.video { max-width: 900px; margin-inline: auto; }
.video__frame { position: relative; aspect-ratio: 16 / 9; background: var(--ink); box-shadow: var(--shadow-md); }
.video__frame img { width: 100%; height: 100%; object-fit: cover; opacity: .78; transition: opacity .22s var(--ease); }
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* The poster image and the play circle are both children of this button.
   A default grid gives them a row each, which pushed the circle below the
   frame; both are placed in the same cell so the circle sits over the image. */
.video__play {
  position: absolute; inset: 0; width: 100%;
  /* minmax(0,…) not 1fr: a 1fr track has an automatic min-content floor, and
     the 4:3 prostate poster's intrinsic height pushed the row to 674px inside
     a 504px button, dragging the centred circle below the frame. */
  display: grid; grid-template: "stack" minmax(0, 1fr) / minmax(0, 1fr);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.video__play > * { grid-area: stack; }
/* <picture> is inline by default, so a percentage height on it resolves to
   auto and the image inside cannot fill. It only showed on the prostate page,
   whose poster is 4:3 against a 16:9 frame. */
.video__play picture { display: block; width: 100%; height: 100%; }
.video__play img { width: 100%; height: 100%; object-fit: cover; }
.video__play span { place-self: center; }
.video__play:hover img { opacity: 1; }
.video__play span {
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
  background: rgb(255 255 255 / .95); box-shadow: var(--shadow-md);
  transition: transform .22s var(--ease), background-color .22s var(--ease);
}
.video__play:hover span { transform: scale(1.06); background: #fff; }
.video__play svg { width: 22px; height: 22px; margin-left: 3px; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .video__play:hover span { transform: none; } }

/* ---------- locations ---------- */
.locations { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 900px) { .locations { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); } }
.locations__flagship img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.locations__flagship h3 { margin-top: 20px; }
.locations__addr { margin-top: 12px; color: var(--ink-muted); font-style: normal; }
/* Side by side, not stacked. As a grid these two sat in a four-row ladder —
   label, button, label, button — which read as cramped and made two links look
   like a list of steps. */
.locations__links { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 28px; }
/* One label wraps to two lines and the other does not, which left the two
   buttons on different baselines. Each column takes the full height and the
   label absorbs the slack, so the buttons align whatever the labels do. */
.locations__links > div { flex: 1 1 200px; display: flex; flex-direction: column; }
.locations__links > div p { flex: 1 1 auto; }
.locations__links .btn { width: 100%; }
.locations__links p {
  margin: 0 0 8px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
.locations__list { display: grid; }
.locations__list > div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.locations__list > div:last-child { border-bottom: 0; }
.locations__list h4 { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--ink); }
.locations__list address { font-style: normal; color: var(--ink-muted); margin-top: 6px; font-size: 14px; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--inverse-bg); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
.cta-band h2 em { color: #9FE3D2; }
.cta-band p { color: var(--inverse-mute); max-width: 54ch; margin: 16px auto 0; }
.cta-band .btn { margin-top: 28px; }
.cta-band__meta { margin-top: 20px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--inverse-mute); }

/* ---------- footer ---------- */
/* The parent footer is navy, so the light logo belongs here. */
.footer { background: var(--inverse-bg); color: var(--inverse-mute); padding-block: 56px 0; }
.footer__grid { display: grid; gap: 32px; }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 260px minmax(0, 1fr); gap: 56px; } }
.footer img { width: 160px; }
.footer p { color: var(--inverse-mute); font-size: 14px; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; padding: 0; list-style: none; }
.footer__nav a { color: var(--inverse-mute); text-decoration: none; font-size: 14px; transition: color .2s var(--ease); }
.footer__nav a:hover { color: #fff; }
.footer__bar {
  margin-top: 40px; padding-block: 24px;
  border-top: 1px solid rgb(255 255 255 / .14);
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: 12px; letter-spacing: .02em; color: var(--inverse-mute);
}
.footer__bar a { color: #fff; text-decoration: none; font-weight: 500; }
.footer__bar a:hover { color: var(--accent-soft); }

/* ---------- floating + sticky WhatsApp ---------- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: 50%; background: var(--accent); color: #fff;
  box-shadow: var(--shadow-md); text-decoration: none;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease);
}
.wa-float:hover { transform: scale(1.06); background: var(--accent-lift); box-shadow: var(--shadow-hover); }
.wa-float svg { width: 28px; height: 28px; }

.wa-bar {
  position: fixed; inset: auto 0 0; z-index: 82;
  display: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / .96);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform .3s var(--ease);
}
.wa-bar.is-in { transform: none; }
@media (max-width: 767px) {
  .wa-bar { display: block; }
  body.has-wa-bar .wa-float { display: none; }
  .wa-float { right: 16px; bottom: 16px; width: 50px; height: 50px; }
  .wa-float svg { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float:hover { transform: none; }
  .wa-bar { transition: none; }
}

/* ---------- scroll reveal ---------- */
/* Shorter travel and a faster curve than before: the parent site is restrained
   and a long slow rise would read as a different product. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
    transition-delay: calc(var(--i, 0) * 60ms);
  }
  .reveal.is-in { opacity: 1; transform: none; }
  .stagger.is-in { transition-delay: 0s; }
  .stagger > * {
    opacity: 0; transform: translateY(12px);
    transition: opacity .45s var(--ease), transform .45s var(--ease);
    transition-delay: calc(var(--i, 0) * 60ms);
  }
  .stagger.is-in > * { opacity: 1; transform: none; }
}

/* ---------- print ---------- */
@media print {
  .header, .utility, .wa-float, .wa-bar, .video, .skip-link, .scroll-progress { display: none !important; }
  .hero { min-height: auto; }
  .faq__a { grid-template-rows: 1fr !important; }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  body { color: #000; }
}