/* =========================================================================
   Precision Plastic Surgery — theme styles
   Locked "teal" art direction from the Claude Design handoff.
   Tokens: teal #0d4d4d (accent on light), gold #d4a25a (accent on dark),
   forest ink #0d2424 (dark surfaces), Cormorant Garamond + Inter.
   ========================================================================= */

:root {
  --bg: #ffffff;
  --bg-alt: #f6f4f0;       /* "Bone" */
  --bg-dark: #0d2424;      /* "Forest Ink" */
  --fg: #161616;
  --fg-muted: #5a5a55;
  --fg-faint: #9c9a92;
  --accent: #0d4d4d;       /* deep teal — on light */
  --accent-soft: #e3eceb;
  --accent-ink: #ffffff;
  --gold: #d4a25a;         /* hero/gold accent — on dark only */
  --line: rgba(13, 36, 36, 0.10);
  --line-strong: rgba(13, 36, 36, 0.18);

  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-display-weight: 300;
  --font-display-italic: 300;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.22em;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }

/* ---- Type primitives ---- */
.display {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.02;
}
.display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-display-italic);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }

/* ---- Layout ---- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
.container-wide { max-width: 1440px; margin: 0 auto; padding: 0 48px; }
.section { padding: 120px 0; }
/* Hairline divider sitting roughly midway in the gap above the Services section. */
.home-divider { border: 0; border-top: 1px solid var(--line); max-width: 1040px; margin: 28px auto 0; }
.section-tight { padding: 80px 0; }
.hr { height: 1px; background: var(--line); width: 100%; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border: 1px solid transparent;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  border-radius: 0;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { background: var(--bg-dark); color: #fff; }
.btn--gold { background: var(--gold); color: #1a1208; border-color: var(--gold); }
.btn--gold:hover { background: #c5904a; color: #1a1208; }
.btn--light { background: #fff; color: var(--bg-dark); }
.btn--light:hover { background: var(--bg-alt); color: var(--bg-dark); }

.btn-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg); text-decoration: none;
  padding-bottom: 4px; border-bottom: 1px solid var(--line-strong);
  transition: color .25s ease, border-color .25s ease;
}
.btn-link:hover { color: var(--accent); border-color: var(--accent); }
.btn-link .arrow { transition: transform .3s ease; }
.btn-link:hover .arrow { transform: translateX(4px); }

/* ---- Image frame ---- */
.img-frame { position: relative; background: var(--bg-alt); overflow: hidden; }
.img-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Model disclaimer chip ---- */
.model-tag {
  position: absolute; bottom: 8px; right: 8px; z-index: 3;
  font-family: var(--font-body); font-size: 8.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  background: rgba(12,31,35,0.5); backdrop-filter: blur(4px);
  padding: 3px 7px; pointer-events: none;
}

/* =========================================================================
   NAV — transparent over hero, solid white once scrolled
   ========================================================================= */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: linear-gradient(to bottom, rgba(8,22,26,0.55) 0%, rgba(8,22,26,0.18) 70%, transparent 100%);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.site-nav.is-solid {
  background: color-mix(in oklab, var(--bg) 96%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-nav__inner {
  max-width: 1440px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 32px; gap: 20px;
}
.site-nav__brand { display: flex; align-items: center; gap: 18px; flex-shrink: 0; white-space: nowrap; text-decoration: none; }
.site-nav__mark { height: 64px; width: auto; display: block; transition: filter .35s ease; }
.site-nav__type { height: 74px; width: auto; display: block; transition: filter .35s ease; }
.site-nav.is-transparent .site-nav__mark,
.site-nav.is-transparent .site-nav__type { filter: brightness(0) invert(1); }

.site-nav__menu { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.site-nav__menu ul { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.site-nav__menu a,
.site-nav__menu .nav-disabled {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg); text-decoration: none; opacity: 0.78; white-space: nowrap;
  transition: color .35s ease, opacity .35s ease;
}
.site-nav__menu a:hover { color: var(--accent); opacity: 1; }
.site-nav.is-transparent .site-nav__menu a,
.site-nav.is-transparent .site-nav__menu .nav-disabled { color: #fff; opacity: 0.92; }
.site-nav.is-transparent .site-nav__menu a:hover { color: var(--gold); }
.site-nav__menu .nav-disabled { cursor: not-allowed; }
/* A non-link dropdown parent (e.g. Before & After) opens its menu, so it isn't "disabled". */
.site-nav__item.has-dropdown > .site-nav__parent { cursor: default; }
.site-nav__cta.btn { padding: 10px 16px; font-size: 10px; white-space: nowrap; color: #fff; }
.site-nav.is-transparent .site-nav__cta.btn {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.7);
}
.site-nav.is-transparent .site-nav__cta.btn:hover { background: rgba(255,255,255,0.12); }

.nav-toggle { display: none; }

/* =========================================================================
   HERO — full-bleed video
   ========================================================================= */
.hero { position: relative; min-height: min(92vh, 880px); overflow: hidden; background: #0c1f23; }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__embed { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background-color: #0c1f23; }
.hero__embed iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max(100vw, 163.556vh); height: max(56.25vw, 92vh); border: 0; pointer-events: none; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8,22,26,0.78) 0%, rgba(8,22,26,0.55) 38%, rgba(8,22,26,0.18) 68%, rgba(8,22,26,0) 100%);
}
.hero__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 160px;
  background: linear-gradient(to bottom, transparent, rgba(8,22,26,0.35)); pointer-events: none;
}
.hero__rail { position: absolute; top: 180px; left: 0; width: 4px; height: 96px; background: var(--gold); z-index: 2; }
.hero__content {
  position: relative; z-index: 2; min-height: min(92vh, 880px);
  display: flex; align-items: center; padding-top: 140px; padding-bottom: 100px;
}
.hero__inner { max-width: 660px; color: #fff; }
.hero__eyebrow { color: rgba(255,255,255,0.7); margin-bottom: 28px; letter-spacing: 0.28em; }
.hero__title { font-size: clamp(48px, 6.4vw, 100px); margin: 0; line-height: 1; color: #fff; }
.hero__title .display-italic { color: var(--gold); }
.hero__lede { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.86); max-width: 520px; margin: 36px 0 44px; }
.hero__actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.hero__actions .btn-link { color: #fff; border-bottom-color: rgba(255,255,255,0.4); }
.hero__badge {
  position: absolute; bottom: 40px; right: 40px; padding: 14px 18px;
  background: rgba(255,255,255,0.08); backdrop-filter: blur(8px);
  border-left: 2px solid var(--gold);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; z-index: 2;
}
.hero__disclaimer {
  position: absolute; bottom: 18px; left: 40px; z-index: 2;
  font-family: var(--font-body); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

/* =========================================================================
   ABOUT DR. SMITH
   ========================================================================= */
.about { background: var(--bg-alt); }
.about__grid { display: grid; grid-template-columns: 380px 1fr; gap: 72px; align-items: center; }
.about__portrait { aspect-ratio: 4/5; background: #fff; }
.about__portrait img { object-position: center 20%; }
.about__title { font-size: clamp(32px, 3.6vw, 52px); margin: 0 0 28px; max-width: 640px; }
.about__body { font-size: 16px; line-height: 1.75; color: var(--fg-muted); max-width: 620px; margin: 0 0 20px; }
.about__creds { display: flex; gap: 36px; flex-wrap: wrap; align-items: center; padding-top: 28px; border-top: 1px solid var(--line); }
.about__cred { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); }

/* =========================================================================
   INTRO BAND + AFFILIATIONS
   ========================================================================= */
.introband .container { text-align: center; max-width: 1040px; }
.introband__title { font-size: clamp(28px, 3.2vw, 44px); margin: 0 0 28px; }
.introband__lede { font-size: 16px; line-height: 1.75; color: var(--fg-muted); max-width: 820px; margin: 0 auto 40px; }
.introband__phone {
  display: inline-flex; align-items: center; gap: 20px;
  padding: 14px 28px; border: 1px solid var(--line-strong);
}
.introband__phone-divider { width: 1px; height: 18px; background: var(--line); }
.introband__phone a { font-family: var(--font-display); font-size: 22px; text-decoration: none; color: var(--fg); }
.affiliations { margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--line); }
/* Standalone affiliations band (moved below Meet Dr. Smith): drop the in-band top
   divider + gap that only read right when it trailed the intro copy. The section
   padding and the grid's own border carry the separation. */
.affiliations-band .affiliations { margin-top: 0; padding-top: 0; border-top: 0; }
.affiliations__eyebrow { margin-bottom: 28px; color: var(--fg-faint); }
.affiliations__grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.affiliation {
  position: relative; padding: 28px 24px 22px; text-align: center;
  border-right: 1px solid var(--line); background: #fff;
  display: flex; flex-direction: column; align-items: center; min-height: 180px; gap: 18px;
}
.affiliation:nth-child(4n) { border-right: none; }
.affiliation:nth-child(n+5) { border-top: 1px solid var(--line); }
.affiliation__logo-wrap { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
.affiliation__logo { width: 100%; height: 60px; object-fit: contain; object-position: center; filter: grayscale(1) contrast(1.08); opacity: 0.92; }
.affiliation__sub { font-family: var(--font-body); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); line-height: 1.3; }

/* =========================================================================
   SERVICES
   ========================================================================= */
.services__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; flex-wrap: wrap; gap: 24px; }
.services__title { font-size: clamp(36px, 4.4vw, 64px); margin: 0; max-width: 760px; }
.services__lede { font-size: 16px; line-height: 1.75; color: var(--fg-muted); max-width: 720px; margin: 0 0 56px; }
.services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.service-card { display: flex; flex-direction: column; }
.service-card .img-frame { aspect-ratio: 3/4; margin-bottom: 20px; }
.service-card__eyebrow { margin-bottom: 10px; }
.service-card__name { font-size: 26px; margin: 0 0 8px; line-height: 1.15; }
.service-card__desc { font-size: 14px; line-height: 1.55; color: var(--fg-muted); margin: 0 0 16px; }
.service-card .btn-link { align-self: flex-start; font-size: 10px; }

.medspa {
  margin-top: 36px; padding: 28px 36px; border: 1px solid var(--line); background: var(--bg-alt);
  display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
}
.medspa__icon { width: 44px; height: 44px; border: 1px solid var(--accent); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.medspa__eyebrow { margin-bottom: 6px; color: var(--accent); }
.medspa__title { font-size: 24px; margin: 0; line-height: 1.2; }

/* =========================================================================
   TESTIMONIALS
   ========================================================================= */
.testimonials .container { max-width: 960px; text-align: center; }
.testimonials__eyebrow { margin-bottom: 22px; }
.stars { letter-spacing: 0.2em; color: var(--accent); font-size: 13px; margin-bottom: 32px; }
.testimonial__quote { font-size: clamp(22px, 2.4vw, 34px); line-height: 1.4; margin: 0 0 36px; font-weight: 300; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.testimonial__meta { margin-bottom: 32px; }
.testimonial__name { font-size: 18px; margin-bottom: 4px; }
.testimonial__detail { font-size: 13px; font-style: italic; color: var(--fg-muted); }
.dots { display: inline-flex; gap: 6px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); transition: background .2s ease, width .2s ease; border: 0; padding: 0; }
.dot.active { background: var(--accent); width: 22px; border-radius: 4px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.testimonial__slide { animation: fadeIn .6s ease; }

/* =========================================================================
   BEFORE / AFTER
   ========================================================================= */
.ba { background: var(--bg-alt); }
.ba__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 56px; flex-wrap: wrap; gap: 24px; }
.ba__title { font-size: clamp(36px, 4.4vw, 60px); margin: 0; }
.ba__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ba-card { text-decoration: none; color: inherit; display: block; }
.ba-card__media { position: relative; margin-bottom: 18px; }
.ba-card__media .img-frame { aspect-ratio: 5/4; }
.ba-card__tag { position: absolute; top: 10px; padding: 4px 8px; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; }
.ba-card__tag--before { left: 10px; background: rgba(0,0,0,0.6); }
.ba-card__tag--after { right: 10px; background: var(--accent); color: var(--accent-ink); }
.ba-card__name { font-size: 22px; margin: 0 0 4px; }
.ba-card__foot { display: flex; justify-content: space-between; align-items: baseline; }
.ba-card__label { font-size: 13px; font-style: italic; color: var(--fg-muted); }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact { position: relative; background: var(--bg-dark); color: #fff; }
.contact__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.22; }
.contact .container { position: relative; padding: 120px 48px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; }
.contact__eyebrow { color: rgba(255,255,255,0.55); margin-bottom: 22px; }
.contact__title { font-size: clamp(36px, 4.4vw, 60px); margin: 0 0 28px; color: #fff; }
.contact__lede { font-size: 16px; line-height: 1.75; color: rgba(255,255,255,0.78); max-width: 480px; margin: 0 0 48px; }
.contact__locations { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.contact__loc { padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.18); }
.contact__loc-eyebrow { color: rgba(255,255,255,0.55); margin-bottom: 14px; }
.contact__loc-addr { font-size: 14px; line-height: 1.7; margin-bottom: 16px; }
.contact__loc-meta { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.7; }
.contact__loc-meta .k { opacity: 0.55; letter-spacing: 0.12em; text-transform: uppercase; font-size: 10px; }
.contact__form-wrap {
  background: rgba(255,255,255,0.05); padding: 48px;
  border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(12px); align-self: flex-start;
}
/* Style Contact Form 7 output to match the dark glass form */
.contact__form-wrap .wpcf7 label,
.contact__form-wrap .eyebrow { color: rgba(255,255,255,0.55); }
.contact__form-wrap .wpcf7-form-control-wrap { display: block; }
.contact__form-wrap input.wpcf7-form-control:not([type=submit]),
.contact__form-wrap select.wpcf7-form-control,
.contact__form-wrap textarea.wpcf7-form-control,
.contact__form-wrap .field {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding: 14px 0; font: inherit; color: #fff; outline: none;
  transition: border-color .2s ease;
}
.contact__form-wrap input::placeholder,
.contact__form-wrap textarea::placeholder { color: rgba(255,255,255,0.45); }
.contact__form-wrap select.wpcf7-form-control option { color: #222; }
.contact__form-wrap input:focus,
.contact__form-wrap select:focus,
.contact__form-wrap textarea:focus { border-bottom-color: var(--gold); }
.contact__form-wrap input.wpcf7-submit,
.contact__form-wrap .btn--light {
  width: 100%; justify-content: center; margin-top: 12px;
  background: #fff; color: var(--bg-dark);
  border: 1px solid #fff; padding: 16px 22px;
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
  border-radius: 0; transition: background .25s ease;
}
.contact__form-wrap input.wpcf7-submit:hover { background: var(--bg-alt); }
.contact__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact__field-label { display: block; margin-bottom: 8px; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { background: var(--bg-dark); color: rgba(255,255,255,0.78); border-top: 1px solid rgba(255,255,255,0.1); }
.site-footer .container { padding: 72px 48px 36px; }
.site-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px; }
.site-footer__logo { width: 180px; height: auto; margin-bottom: 20px; filter: invert(1) brightness(1.6) contrast(0.85); mix-blend-mode: screen; }
.site-footer__blurb { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.6); max-width: 320px; }
.site-footer__col-title { color: rgba(255,255,255,0.45); margin-bottom: 18px; }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.site-footer__col a { color: rgba(255,255,255,0.78); text-decoration: none; font-size: 14px; }
.site-footer__col a:hover { color: #fff; }
.site-footer__addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 36px 0 28px; border-top: 1px solid rgba(255,255,255,0.12); }
.site-footer__addr-eyebrow { color: rgba(255,255,255,0.45); margin-bottom: 8px; }
.site-footer__addr { font-size: 13px; line-height: 1.6; }
.site-footer__legal { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); flex-wrap: wrap; gap: 16px; }
.site-footer__legal, .site-footer__credit { font-size: 12px; color: rgba(255,255,255,0.45); }
.site-footer__credit a { color: rgba(255,255,255,0.7); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.2); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
  .about__grid { grid-template-columns: 1fr; gap: 40px; }
  .about__portrait { max-width: 420px; }
  .services__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .affiliations__grid { grid-template-columns: repeat(2, 1fr); }
  .affiliation:nth-child(4n) { border-right: 1px solid var(--line); }
  .affiliation:nth-child(2n) { border-right: none; }
  .affiliation:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ba__grid { grid-template-columns: 1fr; max-width: 560px; }
  .contact .container { grid-template-columns: 1fr; gap: 48px; padding: 90px 48px; }
  .medspa { grid-template-columns: 1fr; gap: 18px; text-align: left; }
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 900px) {
  .container, .container-wide { padding: 0 24px; }
  .section { padding: 80px 0; }
  .contact .container, .site-footer .container { padding-left: 24px; padding-right: 24px; }

  /* Mobile nav */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; background: transparent; border: 0; color: inherit;
  }
  .site-nav.is-transparent .nav-toggle { color: #fff; }
  .site-nav__menu {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px);
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 0; padding: 96px 32px 32px;
    background: var(--bg-dark); color: #fff;
    transform: translateX(100%); transition: transform .35s ease; z-index: 60;
  }
  .site-nav__menu.is-open { transform: translateX(0); }
  .site-nav__menu ul { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .site-nav__menu li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .site-nav__menu a, .site-nav__menu .nav-disabled { display: block; padding: 16px 0; color: #fff; opacity: 0.9; font-size: 13px; }
  .site-nav__cta.btn { margin-top: 20px; }
  .site-nav.is-transparent .site-nav__type { height: 56px; }
  .site-nav__type { height: 56px; }
  .site-nav__mark { height: 48px; }
}

@media (max-width: 640px) {
  .services__grid { grid-template-columns: 1fr; }

  /* Affiliations: compact 3-up badge block instead of a tall single column. */
  .affiliations { margin-top: 44px; padding-top: 32px; }
  .affiliations__grid { grid-template-columns: repeat(3, 1fr); }
  .affiliation { min-height: 104px; padding: 13px 10px 11px; gap: 8px; }
  .affiliation:nth-child(n) { border-right: 1px solid var(--line); border-top: none; }
  .affiliation:nth-child(3n) { border-right: none; }
  .affiliation:nth-child(n+4) { border-top: 1px solid var(--line); }
  .affiliation__logo { height: 38px; }
  .affiliation__sub { font-size: 8.5px; letter-spacing: 0.1em; }

  /* "Call Today" pill: stack eyebrow over the phone so the number stays on
     one line; the divider becomes a thin horizontal rule above the number. */
  .introband__phone { flex-direction: column; gap: 9px; padding: 12px 22px; }
  .introband__phone-divider { display: none; }
  .introband__phone a { white-space: nowrap; font-size: 19px; border-top: 1px solid var(--line); padding-top: 9px; }

  .contact__locations { grid-template-columns: 1fr; }
  .contact__form-row { grid-template-columns: 1fr; }
  .site-footer__top, .site-footer__addresses { grid-template-columns: 1fr; }
  .hero__badge { right: 20px; bottom: 20px; }
  .hero__disclaimer { left: 20px; }
}

@media (max-width: 400px) {
  /* Narrowest phones: 2-up affiliations so sub-labels stay legible. */
  .affiliations__grid { grid-template-columns: repeat(2, 1fr); }
  .affiliation:nth-child(n) { border-right: 1px solid var(--line); border-top: none; }
  .affiliation:nth-child(2n) { border-right: none; }
  .affiliation:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   NOTE FOR MAINTAINER / BASE-THEME AGENT
   ----------------------------------------------------------------------------
   The base theme.css (tokens in :root, resets, .container, .eyebrow, .display,
   .btn, .img-frame, etc.) is owned by another agent. The blocks below were
   added by Agent A for page.php and page-about.php and are intended to be
   APPENDED to the existing theme.css. They reference brand tokens via
   var(--token, #fallback) so they render correctly even before/until the
   final token names are confirmed against the base :root.

   // TODO: verify token names (--teal, --gold, --forest, --bone, --ink,
   //       --muted) match the base theme.css :root; the hex fallbacks are
   //       the spec values and can be dropped once confirmed.
   ============================================================================ */


/* ============================================================================
   Generic page  (page.php)
   ----------------------------------------------------------------------------
   Bone page-header band (optional eyebrow + H1) followed by a single
   constrained reading column (~760px) for the_content().
   ============================================================================ */

.page-head {
	background: var(--bone, #f6f4f0);
	padding: 5rem 0 3.5rem;
	border-bottom: 1px solid rgba(13, 36, 36, 0.1); /* hairline divider */
}

.page-head .eyebrow {
	color: var(--teal, #0d4d4d); /* accent on light surface */
	margin: 0 0 1rem;
}

.page-head .display {
	margin: 0;
	color: var(--ink, #161616);
}

.page-generic__body {
	max-width: 760px;
	margin: 0 auto;
	color: var(--ink, #161616);
	font-size: 1.0625rem;
	line-height: 1.75;
}

.page-generic__body > :first-child {
	margin-top: 0;
}

.page-generic__body > :last-child {
	margin-bottom: 0;
}

.page-generic__body a {
	color: var(--teal, #0d4d4d);
}


/* ============================================================================
   About Dr. Smith  (page-about.php)
   ----------------------------------------------------------------------------
   The original blind-built `.about-page__*` rules were removed when
   page-about.php was rebuilt against the approved Claude Design. The live
   About styles now live in the namespaced `.abt-*` ABOUT block at the end of
   this file (search "ABOUT  (page-about.php)").
   ============================================================================ */

/*
 * theme.css - Precision Plastic Surgery
 *
 * NOTE: This is a SHARED file. The :root design tokens and global styles are
 * owned by another agent. The block below is additive and self-contained: it
 * styles only page-contact.php and page-reviews.php. Every color uses
 * var(--token, #hex) so it renders correctly whether or not the foundation
 * tokens are present yet. Keep merges additive - do not edit other blocks.
 */

/* =========================================================================
 * page-contact.php  +  page-reviews.php   (Agent C)
 * ========================================================================= */

/* ---- Contact: dark consult section (forest-ink) ---------------------------- */
.contact-consult {
	background: var(--forest-ink, #0d2424);
	color: var(--bone, #f6f4f0);
}

.contact-consult .container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: start;
}

.contact-consult .eyebrow {
	color: var(--gold, #d4a25a); /* gold accent on dark surface */
}

.contact-consult__head .display {
	color: var(--bone, #f6f4f0);
	margin: 0.5rem 0 1.5rem;
}

.contact-consult__intro {
	color: var(--bone, #f6f4f0);
	opacity: 0.85;
	max-width: 34rem;
}

/* CF7 form sits on the dark surface - keep fields legible */
.contact-consult__form input[type="text"],
.contact-consult__form input[type="email"],
.contact-consult__form input[type="tel"],
.contact-consult__form input[type="url"],
.contact-consult__form input[type="number"],
.contact-consult__form select,
.contact-consult__form textarea {
	width: 100%;
	background: transparent;
	color: var(--bone, #f6f4f0);
	border: 0;
	border-bottom: 1px solid rgba(246, 244, 240, 0.35); /* hairline divider */
	padding: 0.75rem 0;
	font-family: inherit;
}

.contact-consult__form input::placeholder,
.contact-consult__form textarea::placeholder {
	color: rgba(246, 244, 240, 0.6);
}

.contact-consult__form input:focus,
.contact-consult__form select:focus,
.contact-consult__form textarea:focus {
	outline: none;
	border-bottom-color: var(--gold, #d4a25a);
}

/* ---- Contact: light location cards ---------------------------------------- */
.contact-locations {
	background: var(--bone, #f6f4f0);
}

.contact-locations__head {
	margin-bottom: 3rem;
}

.contact-locations__head .eyebrow {
	color: var(--teal, #0d4d4d); /* teal accent on light surface */
}

.contact-locations__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
}

.location-card__map {
	display: block;
	line-height: 0;
}

.location-card__map iframe {
	display: block;
	width: 100%;
}

.location-card__name {
	margin: 1.5rem 0 1rem;
	color: var(--ink, #161616);
}

.location-card__info {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-style: normal;
	color: var(--ink, #161616);
}

.location-card__label {
	display: inline-block;
	min-width: 3.5rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.72rem;
	color: var(--muted, #5a5a55);
}

.location-card__info a {
	color: var(--teal, #0d4d4d);
	text-decoration: none;
}

.location-card__info a:hover {
	text-decoration: underline;
}

.location-card__directions {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(22, 22, 22, 0.12); /* hairline divider */
}

.location-card__directions .eyebrow {
	color: var(--teal, #0d4d4d);
}

.location-card__directions p {
	color: var(--muted, #5a5a55);
	max-width: 32rem;
}

/* ---- Reviews: testimonial grid -------------------------------------------- */
.reviews__head {
	margin-bottom: 3rem;
}

.reviews__head .eyebrow {
	color: var(--teal, #0d4d4d);
}

.reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
}

.review-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2rem;
	background: var(--bone, #f6f4f0);
	border: 1px solid rgba(22, 22, 22, 0.08); /* hairline frame */
}

.review-card__stars {
	margin: 0;
	color: var(--gold, #d4a25a);
	letter-spacing: 0.2em;
	font-size: 1rem;
}

.review-card__quote {
	margin: 0;
	color: var(--ink, #161616);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 300;
	font-size: 1.25rem;
	line-height: 1.5;
}

.review-card__meta {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.review-card__name {
	color: var(--teal, #0d4d4d);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.78rem;
}

.review-card__detail {
	color: var(--muted, #5a5a55);
	font-size: 0.9rem;
}

.reviews__pagination {
	margin-top: 3.5rem;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.reviews__pagination .page-numbers {
	display: inline-block;
	padding: 0.5rem 0.9rem;
	color: var(--ink, #161616);
	text-decoration: none;
	border: 1px solid rgba(22, 22, 22, 0.15);
}

.reviews__pagination .page-numbers.current {
	background: var(--teal, #0d4d4d);
	color: var(--bone, #f6f4f0);
	border-color: var(--teal, #0d4d4d);
}

.reviews__empty {
	color: var(--muted, #5a5a55);
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
	.contact-consult .container,
	.contact-locations__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.reviews__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.reviews__grid {
		grid-template-columns: 1fr;
	}
}

/* ===== end Agent C block ================================================== */

/*
 * NOTE FOR MAINTAINER / AGENT A:
 * This file is owned by the base theme (Agent A). Agent B only contributes the
 * additive, clearly-commented blocks below. When merging, append these blocks
 * to the end of the canonical theme.css - they introduce no global/:root
 * changes and reuse the existing design tokens (hex values mirror :root).
 *
 * Tokens referenced: teal #0d4d4d, gold #d4a25a, forest ink #0d2424,
 * bone #f6f4f0, ink #161616, muted #5a5a55.
 */

/* ==========================================================================
   archive-procedures.php + single-procedures.php  (Agent B / build/procedures)
   ========================================================================== */

/* --- Page-header band (dark forest ink, gold eyebrow) --------------------- */
.page-header {
	background: #0d2424;
	color: #f6f4f0;
	padding: 5rem 0 3.5rem;
}
.page-header .eyebrow {
	color: #d4a25a;
}
.page-header h1.display {
	color: #f6f4f0;
	margin: 0;
}
.page-header__intro {
	margin-top: 1.25rem;
	max-width: 46rem;
	color: rgba(246, 244, 240, 0.78);
}

/* --- Breadcrumb ----------------------------------------------------------- */
.breadcrumb {
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 1.75rem;
	color: rgba(246, 244, 240, 0.7);
}
.breadcrumb a {
	color: rgba(246, 244, 240, 0.7);
	text-decoration: none;
}
.breadcrumb a:hover {
	color: #d4a25a;
}
.breadcrumb__sep {
	margin: 0 0.6rem;
	color: rgba(246, 244, 240, 0.4);
}
.breadcrumb [aria-current="page"] {
	color: #d4a25a;
}

/* --- Procedures grid (mirrors homepage Services cards) -------------------- */
.procedures-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem 2rem;
}
.procedure-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.procedure-card__media {
	display: block;
	margin-bottom: 1.25rem;
}
.procedure-card__media img {
	display: block;
	width: 100%;
	height: auto;
}
.procedure-card__title {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 300;
	font-size: 1.65rem;
	line-height: 1.15;
	color: #161616;
	margin: 0 0 0.5rem;
}
.procedure-card__desc {
	display: block;
	color: #5a5a55;
	font-size: 0.95rem;
	line-height: 1.55;
	margin-bottom: 0.9rem;
}
.procedure-card__cta {
	color: #0d4d4d; /* teal on light surface */
}
.procedure-card__link:hover .procedure-card__title {
	color: #0d4d4d;
}
.procedures-empty {
	color: #5a5a55;
}

/* --- Single: sibling sub-nav ---------------------------------------------- */
.procedure-subnav {
	border-bottom: 1px solid rgba(22, 22, 22, 0.12);
	background: #f6f4f0;
}
.procedure-subnav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
}
.procedure-subnav__item a {
	display: inline-block;
	padding: 1.1rem 0;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #5a5a55;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.procedure-subnav__item a:hover {
	color: #0d4d4d;
}
.procedure-subnav__item.is-current a {
	color: #0d4d4d;
	border-bottom-color: #0d4d4d;
}

/* --- Single: two-column layout -------------------------------------------- */
.procedure-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20rem;
	gap: 4rem;
	align-items: start;
}
.procedure-content {
	font-size: 1.02rem;
	line-height: 1.7;
	color: #161616;
}
.section-heading {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 300;
	font-size: 1.9rem;
	line-height: 1.15;
	color: #161616;
	margin: 3rem 0 1.25rem;
}

/* --- Quick-fact info boxes (body) ----------------------------------------- */
.quick-facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 2.5rem 0;
	border: 1px solid rgba(22, 22, 22, 0.14);
}
.fact-box {
	padding: 1.4rem 1.25rem;
	border-right: 1px solid rgba(22, 22, 22, 0.14);
}
.fact-box:last-child {
	border-right: 0;
}
.fact-box__label {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #5a5a55;
	margin-bottom: 0.45rem;
}
.fact-box__value {
	display: block;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.35rem;
	line-height: 1.2;
	color: #0d4d4d;
}

/* --- Inline video slot ---------------------------------------------------- */
.video-slot {
	position: relative;
	background: #0d2424;
}
.video-slot video,
.video-slot iframe,
.video-slot__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* --- Cost factors --------------------------------------------------------- */
.cost-factors__body,
.cost-factors p {
	color: #161616;
	line-height: 1.7;
}

/* --- FAQ accordion (native details/summary) ------------------------------- */
.faq-accordion__item {
	border-bottom: 1px solid rgba(22, 22, 22, 0.14);
}
.faq-accordion__q {
	cursor: pointer;
	list-style: none;
	padding: 1.25rem 2rem 1.25rem 0;
	position: relative;
	font-size: 1.05rem;
	color: #161616;
}
.faq-accordion__q::-webkit-details-marker {
	display: none;
}
.faq-accordion__q::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 1.1rem;
	font-size: 1.4rem;
	font-weight: 300;
	color: #0d4d4d;
}
.faq-accordion__item[open] .faq-accordion__q::after {
	content: "\2212"; /* minus sign */
}
.faq-accordion__a {
	padding: 0 0 1.5rem;
	color: #5a5a55;
	line-height: 1.7;
}

/* --- Sidebar -------------------------------------------------------------- */
.procedure-sidebar__sticky {
	position: sticky;
	top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}
.sidebar-heading {
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #5a5a55;
	margin: 0 0 1rem;
}

/* CTA card (dark surface -> gold accent allowed) */
.cta-card {
	background: #0d2424;
	color: #f6f4f0;
	padding: 2rem 1.75rem;
}
.cta-card .eyebrow {
	color: #d4a25a;
}
.cta-card__lead {
	color: #f6f4f0;
	font-size: 1.35rem;
	line-height: 1.25;
	margin: 0.5rem 0 1.5rem;
}
.cta-card__btn {
	display: block;
	text-align: center;
	margin-bottom: 1.1rem;
}
.cta-card__phone {
	display: block;
	text-align: center;
	color: #d4a25a;
	text-decoration: none;
	letter-spacing: 0.06em;
	font-size: 1.05rem;
}
.cta-card__phone:hover {
	color: #f6f4f0;
}

.related-procedures__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.related-procedures__list li {
	border-bottom: 1px solid rgba(22, 22, 22, 0.12);
}
.related-procedures__list a {
	display: block;
	padding: 0.7rem 0;
	color: #161616;
	text-decoration: none;
}
.related-procedures__list a:hover {
	color: #0d4d4d;
}

.sidebar-facts__list {
	margin: 0;
}
.sidebar-facts__list dt {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #5a5a55;
	margin-top: 0.9rem;
}
.sidebar-facts__list dt:first-child {
	margin-top: 0;
}
.sidebar-facts__list dd {
	margin: 0.2rem 0 0;
	color: #0d4d4d;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.2rem;
}

/* --- Before/after teaser -------------------------------------------------- */
.ba-teaser__grid {
	list-style: none;
	margin: 1.75rem 0 2rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
.ba-teaser__item a {
	display: block;
	text-decoration: none;
	color: inherit;
}
.ba-teaser__item img {
	display: block;
	width: 100%;
	height: auto;
}
.ba-teaser__title {
	display: block;
	margin-top: 0.9rem;
	font-size: 0.95rem;
	color: #161616;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 980px) {
	.procedure-layout {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.procedure-sidebar__sticky {
		position: static;
	}
	.procedures-grid,
	.ba-teaser__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 620px) {
	.procedures-grid,
	.ba-teaser__grid,
	.quick-facts {
		grid-template-columns: 1fr;
	}
	.fact-box {
		border-right: 0;
		border-bottom: 1px solid rgba(22, 22, 22, 0.14);
	}
	.fact-box:last-child {
		border-bottom: 0;
	}
}

/* =========================================================================
   PROCEDURE DETAIL (single-procedures.php) — from rhinoplasty-page.jsx
   ========================================================================= */
.procd-kicker { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }

/* Hero */
.procd-hero { position: relative; min-height: min(72vh, 760px); overflow: hidden; background: #0c1f23; border-bottom: 1px solid var(--line); }
.procd-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.procd-hero__scrim { position: absolute; inset: 0; background: linear-gradient(95deg, rgba(8,22,26,0.82) 0%, rgba(8,22,26,0.58) 34%, rgba(8,22,26,0.12) 64%, rgba(8,22,26,0) 100%); }
.procd-hero__rail { position: absolute; top: 200px; left: 0; width: 4px; height: 96px; background: var(--gold); z-index: 2; }
.procd-hero__inner { position: relative; z-index: 2; min-height: min(72vh, 760px); display: flex; flex-direction: column; justify-content: center; padding-top: 140px; padding-bottom: 80px; max-width: 1440px; }
.procd-hero__inner > * { max-width: 760px; }
.procd-crumb { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 36px; }
.procd-crumb a { color: rgba(255,255,255,0.65); text-decoration: none; }
.procd-crumb span { margin: 0 12px; opacity: 0.5; }
.procd-crumb em { color: #fff; font-style: normal; }
.procd-hero__eyebrow { color: rgba(255,255,255,0.7); letter-spacing: 0.26em; margin-bottom: 24px; }
.procd-hero__title { font-size: clamp(44px, 6vw, 96px); margin: 0; line-height: 0.98; letter-spacing: -0.025em; color: #fff; }
.procd-hero__lede { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.86); max-width: 560px; margin: 32px 0 40px; }
.procd-hero__actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.procd-hero__stamp { position: absolute; bottom: 36px; right: 36px; padding: 14px 18px; background: rgba(255,255,255,0.08); backdrop-filter: blur(8px); border-left: 2px solid var(--gold); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; z-index: 2; }
/* Procedure hero - mobile: trim eyebrow/lede/stamp, constrain + even out height, favor the right of the photo (Dr. Smith), wider H1->CTA gap */
@media (max-width: 768px) {
  .procd-hero, .procd-hero__inner { min-height: 58vh; }
  .procd-hero { max-height: 78vh; }
  .procd-hero__inner { padding-top: 104px; padding-bottom: 48px; }
  .procd-hero__img { object-position: 74% 18%; }
  .procd-hero__eyebrow, .procd-hero__lede, .procd-hero__stamp { display: none; }
  .procd-hero__title { margin-bottom: 44px; }
}

/* Intro + stats */
.procd-intro__grid { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 72px; align-items: start; }
.procd-intro__title { font-size: clamp(36px, 4.2vw, 60px); margin: 0 0 32px; line-height: 1.04; letter-spacing: -0.015em; max-width: 560px; }
.procd-intro__body { font-size: 17px; line-height: 1.75; color: var(--fg-muted); max-width: 540px; }
.procd-intro__body p { margin: 0 0 22px; }
.procd-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); max-width: 600px; margin-top: 12px; }
.procd-stat { padding: 18px 18px 20px; border-right: 1px solid var(--line); }
.procd-stat:last-child { border-right: none; }
.procd-stat__label { font-size: 9.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 6px; }
.procd-stat__val { font-size: 21px; color: var(--fg); }
.procd-intro__actions { margin-top: 40px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
/* Intro right rail: compact "Your Surgeon" card (small thumbnail, no oversized portrait) + the two offices. */
.procd-intro__rail { border: 1px solid var(--line); background: var(--bg); }
.procd-byline { padding: 24px; }
.procd-byline__eyebrow { color: var(--fg-faint); margin-bottom: 16px; }
.procd-byline__head { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.procd-byline__thumb { width: 84px; height: 84px; flex-shrink: 0; border: 1px solid var(--line); }
.procd-byline__thumb img { object-position: 50% 20%; }
.procd-byline__name { font-size: 23px; line-height: 1.1; letter-spacing: -0.01em; }
.procd-byline__creds { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); margin-top: 7px; }
.procd-byline__blurb { font-size: 13.5px; line-height: 1.65; color: var(--fg-muted); margin: 0 0 16px; }
.procd-intro__rail .procd-loc--strip { padding: 20px 24px; border-top: 1px solid var(--line); }
/* Hide the reCAPTCHA badge on the dev mirror - it shows an "Invalid domain" error because this domain isn't in the site-key allowlist. Restore on staging (see Notion). */
.grecaptcha-badge { visibility: hidden !important; opacity: 0 !important; }
/* Contact page only: the CF7 form has its own "Get in touch!" h2, which duplicates the template's heading. Hide the form's. */
body.page-id-25 .wpcf7 h2 { display: none; }
.procd-locs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-top: none; background: var(--bg-alt); }
.procd-loc { padding: 20px 24px; }
.procd-loc + .procd-loc { border-left: 1px solid var(--line); }
.procd-loc__addr { font-size: 14px; color: var(--fg); line-height: 1.5; margin: 8px 0 4px; }
.procd-loc a { font-family: var(--font-display); font-size: 19px; color: var(--accent); text-decoration: none; }

/* Content + sticky TOC */
.procd-content { background: var(--bg-alt); border-top: 1px solid var(--line); }
.procd-content__grid { display: grid; grid-template-columns: 260px 1fr; gap: 96px; align-items: flex-start; }
.procd-toc { position: sticky; top: 110px; align-self: flex-start; }
.procd-toc__list { list-style: none; padding: 0; margin: 0 0 24px; border-top: 1px solid var(--line); counter-reset: toc; }
.procd-toc__list li { border-bottom: 1px solid var(--line); }
.procd-toc__list a { display: flex; gap: 12px; padding: 12px 0; font-size: 13.5px; color: var(--fg); text-decoration: none; transition: color .25s ease; }
.procd-toc__list a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); font-family: var(--font-body); font-size: 10px; color: var(--fg-faint); letter-spacing: 0.1em; width: 20px; flex-shrink: 0; }
.procd-toc__list a:hover, .procd-toc__list a.is-active { color: var(--accent); }
.procd-toc__list a.is-active::before { color: var(--accent); }

/* Article (single WYSIWYG; H2 = numbered section) */
.procd-article { max-width: 820px; counter-reset: sec; }
.procd-article h2 { counter-increment: sec; font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 24px; padding-top: 56px; border-top: 1px solid var(--line); }
.procd-article h2:first-child { padding-top: 0; border-top: none; }
.procd-article h2::before { content: counter(sec, decimal-leading-zero) "  ·  Section"; display: block; font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.procd-article h3 { font-family: var(--font-display); font-weight: 400; font-size: 24px; margin: 32px 0 12px; }
.procd-article p { font-size: 16px; line-height: 1.75; color: var(--fg-muted); margin: 0 0 20px; }
.procd-article ul, .procd-article ol { font-size: 16px; line-height: 1.7; color: var(--fg); margin: 8px 0 24px; padding-left: 20px; }
.procd-article li { margin-bottom: 6px; }
.procd-article img { margin: 16px 0; }
.procd-article a { color: var(--accent); }

/* Before & After */
.procd-ba__head, .procd-faq__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 48px; }
.procd-ba__title, .procd-faq__title { font-size: clamp(32px, 4vw, 52px); margin: 0; line-height: 1.04; }
.procd-ba__grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.procd-ba__card { text-decoration: none; color: inherit; border-right: 1px solid var(--line); display: flex; flex-direction: column; transition: background .25s ease; }
.procd-ba__card:last-child { border-right: none; }
.procd-ba__card:hover { background: var(--bg-alt); }
.procd-ba__card .img-frame { aspect-ratio: 5/4; border-bottom: 1px solid var(--line); }
.procd-ba__name { font-size: 22px; margin: 0; padding: 24px 28px 26px; line-height: 1.15; }

/* FAQ accordion */
.procd-faq { background: var(--bg-alt); border-top: 1px solid var(--line); }
.procd-faq__grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); background: var(--bg); }
.procd-faq__item { border-right: 1px solid var(--line); border-top: 1px solid var(--line); }
.procd-faq__item:nth-child(2n) { border-right: none; }
.procd-faq__item:nth-child(1), .procd-faq__item:nth-child(2) { border-top: none; }
.procd-faq__q { width: 100%; text-align: left; padding: 26px 32px; background: transparent; border: none; cursor: pointer; display: flex; align-items: flex-start; gap: 20px; }
.procd-faq__n { font-family: var(--font-body); font-size: 11px; color: var(--fg-faint); letter-spacing: 0.1em; flex-shrink: 0; padding-top: 6px; }
.procd-faq__q .display { flex: 1; font-size: 22px; line-height: 1.25; color: var(--fg); }
.procd-faq__plus { font-family: var(--font-display); font-weight: 300; font-size: 24px; line-height: 1; color: var(--fg-faint); transition: transform .3s ease, color .25s ease; }
.procd-faq__item.is-open .procd-faq__plus { transform: rotate(45deg); color: var(--accent); }
.procd-faq__item.is-open .procd-faq__n { color: var(--accent); }
.procd-faq__a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.procd-faq__item.is-open .procd-faq__a { max-height: 600px; }
.procd-faq__a > div { padding: 0 32px 28px 64px; font-size: 15px; line-height: 1.7; color: var(--fg-muted); }

/* Consult band */
.procd-consult { background: var(--bg); border-top: 1px solid var(--line); }
.procd-consult__grid { padding: 88px 48px; display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: center; max-width: 1440px; }
.procd-consult__title { font-size: clamp(32px, 3.6vw, 52px); margin: 0; line-height: 1.05; max-width: 720px; }
.procd-consult__cta { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }
.procd-consult__phone { font-size: 22px; color: var(--fg); text-decoration: none; }

@media (max-width: 1024px) {
  .procd-intro__grid { grid-template-columns: 1fr; gap: 48px; }
  .procd-stats { grid-template-columns: repeat(2, 1fr); }
  .procd-stat:nth-child(2n) { border-right: none; }
  .procd-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .procd-content__grid { grid-template-columns: 1fr; gap: 32px; }
  .procd-toc { position: static; top: auto; }
  .procd-faq__grid { grid-template-columns: 1fr; }
  .procd-faq__item { border-right: none; }
  .procd-faq__item:nth-child(2) { border-top: 1px solid var(--line); }
  .procd-ba__grid { grid-template-columns: 1fr; }
  .procd-ba__card { border-right: none; border-bottom: 1px solid var(--line); }
  .procd-consult__grid { grid-template-columns: 1fr; gap: 28px; }
  .procd-consult__cta { align-items: flex-start; }
}

/* [ppvideo] — vertical YouTube clip floated in article prose; full-width on mobile */
.procd-article h2 { clear: both; }
.ppvideo { width: 240px; margin: 6px 0 18px 32px; float: right; }
.ppvideo--left { float: left; margin: 6px 32px 18px 0; }
.ppvideo__play { position: relative; display: block; width: 100%; aspect-ratio: 9/16; border: 0; padding: 0; cursor: pointer; background-size: cover; background-position: center; overflow: hidden; box-shadow: 0 6px 22px rgba(8,22,26,0.18); transition: box-shadow .3s ease; }
.ppvideo__play:hover { box-shadow: 0 18px 48px rgba(8,22,26,0.22); }
.ppvideo__play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8,22,26,0.05) 0%, rgba(8,22,26,0.12) 55%, rgba(8,22,26,0.70) 100%); }
.ppvideo__badge { position: absolute; top: 10px; left: 10px; z-index: 2; font-family: var(--font-body); font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; }
.ppvideo__badge::before { content: "\25CF"; color: var(--gold); margin-right: 6px; }
.ppvideo__medallion { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; width: 56px; height: 56px; background: rgba(255,255,255,0.95); transition: background .25s ease; }
.ppvideo__medallion::before { content: ""; position: absolute; top: 50%; left: 52%; transform: translate(-50%,-50%); width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid #0c1f23; }
.ppvideo__play:hover .ppvideo__medallion { background: var(--accent); }
.ppvideo__play:hover .ppvideo__medallion::before { border-left-color: #fff; }
.ppvideo__cap { margin-top: 10px; font-family: var(--font-display); font-size: 14.5px; line-height: 1.3; color: var(--fg); }
.ppvideo__frame { width: 100%; aspect-ratio: 9/16; border: 0; display: block; background: #000; }
@media (max-width: 640px) { .ppvideo, .ppvideo--left { float: none; width: 100%; max-width: 360px; margin: 18px auto; } }

/* =========================================================================
   NAV DROPDOWNS (F2) — Procedures + Resources
   ========================================================================= */
.site-nav__menu li.has-dropdown { position: relative; }
.site-nav__caret { display: inline-block; width: 5px; height: 5px; margin-left: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); opacity: .65; }
.site-nav__dropdown { position: absolute; top: 100%; left: 0; min-width: 250px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 48px rgba(8,22,26,0.14); padding: 8px 0; margin: 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 60; }
.site-nav__menu li.has-dropdown:hover > .site-nav__dropdown,
.site-nav__menu li.has-dropdown:focus-within > .site-nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.site-nav__menu ul.site-nav__dropdown { display: block; }
.site-nav__menu ul.site-nav__flyout { display: block; }
.site-nav__dropdown li { margin: 0; border: 0; }
.site-nav__dropdown a { display: block; padding: 9px 22px; font-family: var(--font-body); font-size: 12.5px; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--fg) !important; opacity: 1 !important; white-space: nowrap; }
.site-nav__dropdown a:hover { background: var(--bg-alt); color: var(--accent) !important; }
.dd-toggle { display: none; background: none; border: 0; cursor: pointer; }

@media (max-width: 900px) {
  .site-nav__menu li.has-dropdown { position: relative; }
  .site-nav__dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 6px 16px; margin: 0; max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  .site-nav__item.is-open > .site-nav__dropdown { max-height: 640px; }
  .site-nav__dropdown a { color: #fff !important; padding: 10px 0; font-size: 13px; }
  .site-nav__dropdown a:hover { background: transparent; color: var(--gold) !important; }
  .site-nav__caret { display: none; }
  .dd-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; position: absolute; right: 16px; top: 4px; }
  .dd-toggle::after { content: ""; width: 8px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .25s ease; }
  .site-nav__item.is-open .dd-toggle::after { transform: rotate(-135deg); }
}

/* =========================================================================
   PROCEDURES INDEX (page-procedures.php) — from procedures-page.jsx
   Bespoke tall hero + jump bar + Signature Four + Full Menu + consult band.
   Before/After reuses the homepage .ba block (no new CSS there). Reuses the
   shared .btn / .btn-link / .img-frame / .eyebrow / .display(-italic) /
   .container-wide / .section primitives wherever possible.
   ========================================================================= */
html { scroll-behavior: smooth; }
/* Anchor targets clear the fixed nav. */
.procidx [id^="proc-"], #full-menu { scroll-margin-top: 96px; }

/* ---- Hero (TALL, dark, full-bleed) ---- */
.procidx-hero { position: relative; min-height: min(72vh, 760px); overflow: hidden; background: #0c1f23; border-bottom: 1px solid var(--line); }
.procidx-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.procidx-hero__scrim { position: absolute; inset: 0; background: linear-gradient(95deg, rgba(8,22,26,0.78) 0%, rgba(8,22,26,0.55) 32%, rgba(8,22,26,0.12) 60%, rgba(8,22,26,0) 100%); }
.procidx-hero__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to bottom, transparent, rgba(8,22,26,0.30)); pointer-events: none; }
.procidx-hero__rail { position: absolute; top: 200px; left: 0; width: 4px; height: 88px; background: var(--gold); z-index: 2; }
.procidx-hero__inner { position: relative; z-index: 2; min-height: min(72vh, 760px); display: flex; flex-direction: column; justify-content: center; padding-top: 140px; padding-bottom: 80px; }
.procidx-hero__inner > * { max-width: 740px; }
.procidx-crumb { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 36px; }
.procidx-crumb a { color: rgba(255,255,255,0.65); text-decoration: none; }
.procidx-crumb a:hover { color: #fff; }
.procidx-crumb span { margin: 0 12px; opacity: 0.5; }
.procidx-crumb em { color: #fff; font-style: normal; }
.procidx-hero__eyebrow { color: rgba(255,255,255,0.7); letter-spacing: 0.26em; margin-bottom: 24px; }
.procidx-hero__title { font-size: clamp(44px, 6vw, 96px); margin: 0; line-height: 0.98; letter-spacing: -0.025em; color: #fff; }
.procidx-hero__lede { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.86); max-width: 540px; margin: 32px 0 40px; }
.procidx-hero__actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.procidx-hero__phone { color: #fff; border-bottom-color: rgba(255,255,255,0.4); }
.procidx-hero__phone:hover { color: var(--gold); border-bottom-color: var(--gold); }
.procidx-hero__stamp { position: absolute; bottom: 36px; right: 36px; padding: 14px 18px; background: rgba(255,255,255,0.08); backdrop-filter: blur(8px); border-left: 2px solid var(--gold); font-size: 10.5px; letter-spacing: 0.20em; text-transform: uppercase; color: #fff; z-index: 2; }

/* ---- Jump-to bar ---- */
.procidx-jump { background: var(--bg); border-bottom: 1px solid var(--line); padding: 22px 0; }
.procidx-jump__inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.procidx-jump__label { color: var(--fg-faint); flex-shrink: 0; }
.procidx-jump__links { display: flex; flex-wrap: wrap; flex: 1; }
.procidx-jump__links a { font-family: var(--font-body); font-size: 11.5px; font-weight: 500; color: var(--fg); text-decoration: none; padding: 6px 14px; border-left: 1px solid var(--line); transition: color .2s ease; }
.procidx-jump__links a:first-child { border-left: 0; }
.procidx-jump__links a:hover { color: var(--accent); }

/* ---- Shared section heads + meta line ---- */
.procidx-section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 64px; flex-wrap: wrap; gap: 24px; }
.procidx-section-head__title { font-size: clamp(36px, 4vw, 56px); margin: 0; max-width: 760px; line-height: 1.04; }
.procidx-section-head__note { font-size: 14px; line-height: 1.7; color: var(--fg-muted); margin: 0; max-width: 360px; }
.procidx-meta { font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 16px; }
.procidx-meta__num { color: var(--accent); }
.procidx-meta__sep { margin: 0 10px; opacity: 0.4; }
.procidx-meta--split { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

/* ---- Signature Four (2×2 hairline grid) ---- */
.procidx-feat { background: var(--bg); }
.procidx-feat__grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.procidx-feat__card { padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; background: var(--bg); }
.procidx-feat__card:nth-child(odd) { border-right: 1px solid var(--line); }
.procidx-feat__card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.procidx-feat__media { aspect-ratio: 4/5; }
.procidx-feat__name { font-size: 36px; line-height: 1.04; margin: 0 0 18px; letter-spacing: -0.015em; }
.procidx-feat__desc { font-size: 15px; line-height: 1.7; color: var(--fg-muted); margin: 0 0 28px; }

/* Stat chips (recovery / anesthesia) */
.procidx-stats { display: flex; gap: 24px; margin-bottom: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.procidx-stat__label { font-family: var(--font-body); font-size: 9.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 4px; }
.procidx-stat__val { font-size: 16px; color: var(--fg); }

/* ---- Full Menu (4-up hairline grid) ---- */
.procidx-menu { background: var(--bg-alt); }
.procidx-menu__grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); background: var(--bg); }
.procidx-menu__card { text-decoration: none; color: inherit; padding: 28px 28px 24px; display: flex; flex-direction: column; background: var(--bg); border-right: 1px solid var(--line); transition: background .25s ease; }
.procidx-menu__card:nth-child(4n) { border-right: 0; }
.procidx-menu__card:nth-child(n+5) { border-top: 1px solid var(--line); }
.procidx-menu__card:hover { background: var(--bg-alt); }
.procidx-menu__media { aspect-ratio: 4/3; margin-bottom: 20px; }
/* Full Menu cards are text-only (photos dropped per office); names enlarged to carry the card. */
.procidx-menu__card { padding-top: 32px; }
.procidx-menu__name { font-size: 32px; line-height: 1.08; margin: 14px 0 12px; letter-spacing: -0.015em; }
.procidx-menu__desc { font-size: 13.5px; line-height: 1.6; color: var(--fg-muted); margin: 0 0 18px; flex: 1; }
.procidx-menu__stat { padding-top: 14px; margin-bottom: 14px; border-top: 1px solid var(--line); }
.procidx-menu__stat-val { font-size: 12px; color: var(--fg); }
.procidx-menu__more { font-family: var(--font-body); font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; margin-top: auto; }

/* ---- Consult band ---- */
.procidx-consult { background: var(--bg); border-top: 1px solid var(--line); }
.procidx-consult__grid { padding: 88px 48px; display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: center; }
.procidx-consult__eyebrow { margin-bottom: 18px; color: var(--accent); }
.procidx-consult__title { font-size: clamp(32px, 3.6vw, 52px); margin: 0; line-height: 1.05; max-width: 720px; }
.procidx-consult__cta { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }
.procidx-consult__phone { font-size: 22px; color: var(--fg); text-decoration: none; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .procidx-feat__grid { grid-template-columns: 1fr; }
  .procidx-feat__card { border-right: 0 !important; }
  .procidx-feat__card:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .procidx-menu__grid { grid-template-columns: repeat(2, 1fr); }
  .procidx-menu__card:nth-child(4n) { border-right: 1px solid var(--line); }
  .procidx-menu__card:nth-child(2n) { border-right: 0; }
  .procidx-menu__card:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .procidx-feat__card { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
  .procidx-menu__grid { grid-template-columns: 1fr; }
  .procidx-menu__card { border-right: 0 !important; }
  .procidx-menu__card:nth-child(n+2) { border-top: 1px solid var(--line); }
  .procidx-consult__grid { grid-template-columns: 1fr; gap: 32px; padding: 64px 24px; }
  .procidx-consult__cta { align-items: flex-start; }
  .procidx-hero__stamp { display: none; }
}

/* ============================================================================
   ABOUT  (page-about.php)
   ----------------------------------------------------------------------------
   Faithful rebuild of the approved Claude Design (About Dr. Smith.html +
   about-page.jsx). Composition: Hero → Recognitions → Bio → Credentials →
   MissionTeamBand → Training → HumanitarianWork → PullQuote → ConsultBand →
   Contact. Additive + self-contained: reuses the shared .procidx-hero,
   .procidx-consult, .eyebrow, .display(-italic), .container(-wide), .btn,
   .btn-link, .img-frame, .stars primitives; everything else is namespaced
   .abt-*. Gold (--gold) appears on dark surfaces only; teal (--accent) is the
   light-surface accent. Hairline rules, no rounded corners.

   NOTE: the design referenced a JetBrains Mono ("--font-mono") for small
   meta/label lines; the base theme has no mono token, so these follow the
   established convention (.procidx-*) of using --font-body. En dashes are kept
   only inside numeric/date ranges (e.g. "2017 – Present"); em dashes are
   replaced by hyphens per the brand rules.
   ============================================================================ */

/* ---- Hero (extends .procidx-hero) ---- */
.abt-hero,
.abt-hero__inner { min-height: min(88vh, 880px); }
.abt-hero__img { object-position: 72% 40%; }
/* About - mobile: show Dr. Smith in the hero, compact recognitions/honors/training */
@media (max-width: 768px) {
  .abt-hero__img { object-position: 50% 20%; }
  .abt-hum__img { object-position: 50% 22%; }
  .abt-hum__cap { display: none; }
  .abt-recog { padding-top: 52px; }
  .abt-recog__grid { grid-template-columns: repeat(2, 1fr); }
  .abt-recog__grid { grid-template-columns: repeat(3, 1fr); }
  .abt-recog__card { padding: 12px 9px; min-height: 0; }
  .abt-recog__award { font-size: 14px; margin-top: 3px; line-height: 1.12; }
  .abt-recog__year { margin-top: 7px; padding-top: 6px; font-size: 9px; }
  .abt-cred { padding: 52px 0; }
  .abt-cred__split { grid-template-columns: 1fr; gap: 28px; }
  .abt-board { grid-template-columns: 30px 1fr; padding: 13px 2px; row-gap: 2px; }
  .abt-board__status { text-align: left; grid-column: 2; }
  .abt-train { padding: 52px 0; }
  .abt-train__head { margin-bottom: 26px; padding-bottom: 18px; }
  .abt-train__row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
}
.abt-hero__lede { margin-bottom: 8px; }
.abt-hero__metrics { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; margin-top: 40px; font-size: 13px; letter-spacing: 0.04em; }
.abt-metric__label { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 6px; }
.abt-metric__val { font-family: var(--font-body); font-size: 14px; color: #fff; }
.abt-metric__div { width: 1px; height: 30px; background: rgba(255,255,255,0.2); }

/* ---- Recognitions (3-up hairline grid) ---- */
.abt-recog { background: var(--bg); padding: 96px 0 0; }
.abt-recog__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; padding-bottom: 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: 16px; }
.abt-recog__head .eyebrow { color: var(--accent); }
.abt-recog__meta { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); }
.abt-recog__grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.abt-recog__card { padding: 44px 36px 40px; border-right: 1px solid var(--line); min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; background: var(--bg); }
.abt-recog__card:nth-child(3n) { border-right: 0; }
.abt-recog__source { color: var(--fg-faint); margin-bottom: 14px; }
.abt-recog__award { font-size: 32px; line-height: 1.05; letter-spacing: -0.005em; color: var(--fg); margin-top: 8px; }
.abt-recog__year { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }

/* ---- Bio (sticky aside + body) ---- */
.abt-bio { background: var(--bg); padding: 110px 0; }
.abt-bio__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: start; }
.abt-bio__aside { position: sticky; top: 110px; }
.abt-bio__aside .eyebrow { color: var(--accent); margin-bottom: 18px; }
.abt-bio__heading { font-size: clamp(36px, 4.2vw, 60px); margin: 0; line-height: 1.02; letter-spacing: -0.015em; color: var(--fg); }
.abt-bio__meta { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); line-height: 1.8; }
.abt-bio__p { font-size: 16px; line-height: 1.75; color: var(--fg-muted); margin: 0 0 22px; }
.abt-bio__p:last-of-type { margin-bottom: 0; }
.abt-bio__p--lead { font-size: 19px; line-height: 1.7; color: var(--fg); margin-bottom: 28px; letter-spacing: -0.005em; }
.abt-bio__cta { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }

/* ---- Credentials (Awards + Boards on Bone) ---- */
.abt-cred { background: var(--bg-alt); border-top: 1px solid var(--line); padding: 110px 0; }
.abt-cred__split { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; align-items: start; }
.abt-cred__split--awards { margin-bottom: 88px; }
.abt-cred__title { font-size: clamp(32px, 3.4vw, 48px); margin: 0; line-height: 1.04; letter-spacing: -0.015em; color: var(--fg); }
.abt-cred__note { font-size: 14px; line-height: 1.7; color: var(--fg-muted); margin: 20px 0 0; max-width: 320px; }
.abt-cred__intro .eyebrow { color: var(--accent); margin-bottom: 18px; }

.abt-awards-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: var(--bg); }
.abt-award { padding: 32px 28px; border-right: 1px solid var(--line); min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; }
.abt-award:nth-child(3n) { border-right: 0; }
.abt-award:nth-child(n+4) { border-top: 1px solid var(--line); }
.abt-award__title { font-size: 22px; line-height: 1.2; letter-spacing: -0.005em; color: var(--fg); }
.abt-award__source { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--font-body); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); }

.abt-boards { border: 1px solid var(--line); background: var(--bg); }
.abt-board { display: grid; grid-template-columns: 48px 1fr 220px; align-items: center; padding: 28px 32px; border-top: 1px solid var(--line); }
.abt-board:first-child { border-top: 0; }
.abt-board__num { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.18em; color: var(--fg-faint); }
.abt-board__name { font-size: 22px; line-height: 1.25; letter-spacing: -0.005em; color: var(--fg); }
.abt-board__status { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); text-align: right; }

/* ---- Mission Team Band (full-bleed editorial photo) ---- */
.abt-band { background: var(--bg-dark); position: relative; }
.abt-band__media { position: relative; width: 100%; aspect-ratio: 1800 / 806; max-height: 720px; overflow: hidden; }
.abt-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.abt-band__scrim { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(8,22,26,0.5) 0%, rgba(8,22,26,0.15) 40%, rgba(8,22,26,0) 60%, rgba(8,22,26,0.35) 100%); }
.abt-band__rail { position: absolute; top: 36px; left: 24px; width: 3px; height: 96px; background: var(--gold); z-index: 2; }
.abt-band__cap { position: absolute; top: 36px; left: 48px; max-width: 420px; color: #fff; z-index: 2; }
.abt-band__cap-eyebrow { color: rgba(255,255,255,0.7); letter-spacing: 0.24em; margin-bottom: 14px; }
.abt-band__cap-title { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -0.01em; color: #fff; }
.abt-band__cap-title .display-italic { color: var(--gold); }
.abt-band__stamp { position: absolute; bottom: 24px; right: 28px; padding: 12px 16px; background: rgba(8,22,26,0.45); backdrop-filter: blur(8px); border-left: 2px solid var(--gold); font-family: var(--font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; z-index: 2; }

/* ---- Training (vertical timeline) ---- */
.abt-train { background: var(--bg); padding: 110px 0; }
.abt-train__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; padding-bottom: 28px; border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: 24px; }
.abt-train__head .eyebrow { color: var(--accent); margin-bottom: 16px; }
.abt-train__title { font-size: clamp(34px, 3.8vw, 56px); margin: 0; line-height: 1.02; letter-spacing: -0.015em; color: var(--fg); }
.abt-train__meta { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); max-width: 320px; text-align: right; line-height: 1.7; }
.abt-train__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.abt-train__row { display: grid; grid-template-columns: 0.9fr 1.4fr 1.1fr; gap: 48px; align-items: start; padding: 34px 0 30px; border-bottom: 1px solid var(--line); }
.abt-train__stage { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.abt-train__year { font-size: 24px; letter-spacing: -0.005em; color: var(--fg); }
.abt-train__school { font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; color: var(--fg); font-weight: 500; }
.abt-train__role { font-size: 20px; letter-spacing: -0.005em; line-height: 1.25; color: var(--fg); margin-bottom: 6px; }
.abt-train__org { font-size: 15px; line-height: 1.55; color: var(--fg-muted); }
.abt-train__note { font-size: 15px; line-height: 1.7; color: var(--fg); font-style: italic; font-family: var(--font-display); padding-left: 24px; border-left: 1px solid var(--line); }

/* ---- Humanitarian Work (dark split: copy + photo) ---- */
.abt-hum { background: var(--bg-dark); color: #fff; position: relative; border-top: 1px solid rgba(255,255,255,0.08); }
.abt-hum__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 720px; }
.abt-hum__copy { position: relative; padding: 120px 64px 110px 0; padding-left: max(48px, calc((100vw - 1440px) / 2 + 48px)); }
.abt-hum__rail { position: absolute; top: 120px; left: calc(max(48px, calc((100vw - 1440px) / 2 + 48px)) - 24px); width: 4px; height: 96px; background: var(--gold); }
.abt-hum__eyebrow { color: var(--gold); margin-bottom: 22px; }
.abt-hum__title { font-size: clamp(40px, 4.6vw, 72px); margin: 0; line-height: 0.98; letter-spacing: -0.02em; color: #fff; }
.abt-hum__title .display-italic { color: var(--gold); }
.abt-hum__p { color: rgba(255,255,255,0.7); font-size: 15px; line-height: 1.75; max-width: 540px; margin: 0 0 32px; }
.abt-hum__p--lead { color: rgba(255,255,255,0.84); font-size: 17px; line-height: 1.7; margin: 36px 0 22px; }
.abt-hum__stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(255,255,255,0.18); margin-bottom: 36px; max-width: 540px; }
.abt-hum__stat { padding: 22px 18px; border-right: 1px solid rgba(255,255,255,0.18); }
.abt-hum__stat:last-child { border-right: 0; }
.abt-hum__stat-val { font-size: 28px; letter-spacing: -0.01em; color: var(--gold); }
.abt-hum__stat-label { font-family: var(--font-body); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 6px; }
.abt-hum__partners { list-style: none; padding: 0; margin: 0 0 36px; max-width: 540px; }
.abt-hum__partner { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.abt-hum__partner-name { font-size: 14px; color: rgba(255,255,255,0.85); }
.abt-hum__partner-sub { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); white-space: nowrap; }
.abt-hum__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.abt-hum__media { position: relative; aspect-ratio: 1600 / 1749; align-self: center; width: 100%; background: #0c1f23; }
.abt-hum__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.abt-hum__tint { position: absolute; inset: 0; background: linear-gradient(to right, rgba(12,31,35,0.4) 0%, rgba(12,31,35,0) 30%); }
.abt-hum__cap { position: absolute; left: 28px; bottom: 28px; padding: 12px 16px; background: rgba(12,31,35,0.55); backdrop-filter: blur(8px); border-left: 2px solid var(--gold); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; }

/* ---- Pull quote (on Bone) ---- */
.abt-quote { background: var(--bg-alt); padding: 110px 0; }
.abt-quote__inner { max-width: 1020px; }
.abt-quote__grid { display: grid; grid-template-columns: 40px 1fr; gap: 32px; align-items: start; }
.abt-quote__mark { font-size: 96px; line-height: 0.6; color: var(--accent); font-family: var(--font-display); }
.abt-quote__block { margin: 0; }
.abt-quote__text { font-weight: 300; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.32; letter-spacing: -0.005em; color: var(--fg); margin: 0; }
.abt-quote__foot { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.abt-quote__name { font-size: 22px; color: var(--fg); }
.abt-quote__title { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); margin-top: 4px; }
.abt-quote__stars { align-self: center; margin-bottom: 0; }

/* ---- Consult band (extends .procidx-consult) ---- */
.abt-consult { border-bottom: 1px solid var(--line); }
.abt-consult .procidx-consult__grid { grid-template-columns: 1.4fr 1fr; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .abt-bio__grid { grid-template-columns: 1fr; gap: 40px; }
  .abt-bio__aside { position: static; }
  .abt-cred__split { grid-template-columns: 1fr; gap: 32px; }
  .abt-awards-grid { grid-template-columns: repeat(2, 1fr); }
  .abt-award:nth-child(3n) { border-right: 1px solid var(--line); }
  .abt-award:nth-child(2n) { border-right: 0; }
  .abt-award:nth-child(n+3) { border-top: 1px solid var(--line); }
  .abt-hum__grid { grid-template-columns: 1fr; min-height: 0; }
  .abt-hum__copy { padding: 88px 24px 80px; }
  .abt-hum__rail { left: 0; }
  .abt-hum__media { aspect-ratio: 16 / 10; }
  .abt-train__row { grid-template-columns: 1fr; gap: 16px; }
  .abt-train__note { grid-column: 1 / -1; padding-left: 0; border-left: 0; padding-top: 12px; border-top: 1px solid var(--line); }
  .abt-train__meta { text-align: left; }
}
@media (max-width: 760px) {
  .abt-recog__grid { grid-template-columns: 1fr; }
  .abt-recog__card { border-right: 0; border-top: 1px solid var(--line); }
  .abt-recog__card:first-child { border-top: 0; }
  .abt-awards-grid { grid-template-columns: 1fr; }
  .abt-award { border-right: 0 !important; }
  .abt-award:nth-child(n+2) { border-top: 1px solid var(--line); }
  .abt-board { grid-template-columns: 1fr; gap: 8px; }
  .abt-board__status { text-align: left; }
  .abt-train__row { grid-template-columns: 1fr; gap: 16px; }
  .abt-band__cap { left: 28px; right: 28px; }
  .abt-hero__metrics { gap: 18px; }
  .abt-consult .procidx-consult__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   TEAM — Meet the Team template (page-team.php)
   Rebuild of design-reference/project/team-page.jsx. Reuses .procidx-hero,
   .container-wide, .eyebrow, .display(-italic), .btn primitives. Additive
   only; no rounded corners, hairline rules, design tokens throughout.
   ========================================================================= */

/* Ghost button (parity with design styles.css; theme shipped only btn--gold). */
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--fg); color: #fff; border-color: var(--fg); }

/* Shared on-light section eyebrow (matches design's accent eyebrows). */
.team-eyebrow { color: var(--accent); margin-bottom: 18px; }

/* ---- Hero (extends .procidx-hero) ---- */
.procidx-hero--team { min-height: min(78vh, 760px); }
.procidx-hero--team .procidx-hero__img { object-position: 50% 38%; }
.procidx-hero--team .procidx-hero__inner { justify-content: flex-end; min-height: min(78vh, 760px); }

/* ---- Intro ---- */
.team-intro { background: #fff; border-bottom: 1px solid var(--line); }
.team-intro__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 96px; align-items: start; }
.team-intro__title { font-size: clamp(32px, 3.4vw, 48px); margin: 0; line-height: 1.05; }
.team-intro__lede { font-size: 18px; line-height: 1.75; color: var(--fg); margin: 0 0 22px; }
.team-intro__body { font-size: 16px; line-height: 1.75; color: var(--fg-muted); margin: 0; }
.team-intro__stats { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.team-stat { padding: 22px 24px; border-right: 1px solid var(--line); }
.team-stat:last-child { border-right: 0; }
.team-stat__val { font-size: 44px; line-height: 1; color: var(--accent); }
.team-stat__label { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); margin-top: 10px; }

/* ---- Dr. Smith feature ---- */
.team-feature { background: var(--bg-alt); }
.team-feature__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; padding-bottom: 28px; border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: 24px; }
.team-feature__heading { font-size: clamp(34px, 3.6vw, 52px); margin: 0; line-height: 1.02; }
.team-feature__meta { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); text-align: right; line-height: 1.7; }
.team-feature__card { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: stretch; border: 1px solid var(--line); background: #fff; }
.team-feature__media { position: relative; min-height: 640px; background: #e3ddd0; overflow: hidden; }
.team-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.team-feature__strip { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 28px; background: linear-gradient(to top, rgba(8,22,26,0.78), rgba(8,22,26,0)); display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; }
.team-feature__strip span:first-child { color: rgba(255,255,255,0.7); }
.team-feature__strip span:last-child { color: rgba(255,255,255,0.85); }
.team-feature__body { padding: 56px 56px 48px; display: flex; flex-direction: column; justify-content: space-between; }
.team-feature__role { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; }
.team-feature__name { font-size: 52px; margin: 0; line-height: 1; }
.team-feature__bio { font-size: 17px; line-height: 1.75; color: var(--fg); margin: 32px 0 18px; }
.team-feature__bio--muted { font-size: 15px; color: var(--fg-muted); margin: 0; }
.team-feature__foot { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.team-creds { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.team-creds__label { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 4px; }
.team-creds__val { margin: 0; font-size: 14px; color: var(--fg); }
.team-feature__actions { display: flex; gap: 18px; margin-top: 32px; flex-wrap: wrap; }

/* ---- Roster grid ---- */
.team-roster { background: #fff; }
.team-roster__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; padding-bottom: 28px; border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: 24px; }
.team-roster__heading { font-size: clamp(34px, 3.6vw, 52px); margin: 0; line-height: 1.02; }
.team-roster__note { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); text-align: right; line-height: 1.7; }
.team-roster__grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.team-card { position: relative; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.team-card:nth-child(4n) { border-right: 0; }
.team-card:nth-child(n+5) { border-top: 1px solid var(--line); }
.team-card__media { aspect-ratio: 4 / 5; background: #e3ddd0; }
.team-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: saturate(0.95); }
.team-card__creds { position: absolute; bottom: 12px; left: 12px; font-family: var(--font-body); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; background: rgba(8,22,26,0.55); padding: 5px 9px; backdrop-filter: blur(6px); border-left: 2px solid var(--gold); }
.team-card__body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; gap: 12px; }
.team-card__name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.05; letter-spacing: -0.005em; }
.team-card__name span { font-weight: 300; }
.team-card__title { margin-top: 10px; font-family: var(--font-body); font-size: 12px; color: var(--accent); font-weight: 500; letter-spacing: 0.04em; line-height: 1.4; }
/* Bio clamped to 3 lines so every card holds a uniform height; the full
   bio lives in the per-member <dialog> opened by Read More. */
.team-card__bio { font-size: 13.5px; line-height: 1.7; color: var(--fg-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.team-card__foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); }
.team-card__since { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); }
.team-card__more { display: inline-flex; cursor: pointer; border: 0; background: transparent; padding: 0 0 2px; font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--accent); }
.team-card__more:hover { color: var(--fg); border-color: var(--fg); }
.team-card__more:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- Roster bio modal (native <dialog>) ---- */
.team-modal { width: min(92vw, 880px); max-height: 90vh; padding: 0; border: 1px solid var(--line-strong); background: #fff; color: var(--fg); overflow: hidden; }
.team-modal::backdrop { background: rgba(8, 22, 26, 0.72); }
.team-modal__inner { display: grid; grid-template-columns: 0.85fr 1fr; max-height: 90vh; }
.team-modal__media { position: relative; min-height: 320px; background: #e3ddd0; }
.team-modal__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.team-modal__body { padding: 48px 48px 40px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.team-modal__name { font-size: 40px; margin: 0; line-height: 1.02; }
.team-modal__role { margin-top: 0; }
.team-modal__bio { font-size: 15px; line-height: 1.78; color: var(--fg-muted); margin: 4px 0 0; }
.team-modal__since { margin-top: auto; padding-top: 18px; }
.team-modal__close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.92); color: var(--fg); font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.team-modal__close:hover { background: var(--fg); color: #fff; border-color: var(--fg); }

/* ---- Office mascot ---- */
.team-mascot { background: var(--bg-alt); padding: 96px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.team-mascot__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; align-items: center; }
.team-mascot__media { aspect-ratio: 4 / 5; border: 1px solid var(--line); background: #e3ddd0; }
.team-mascot__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.team-mascot__badge { position: absolute; top: 14px; left: 14px; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.22em; color: #fff; background: rgba(8,22,26,0.55); padding: 5px 9px; backdrop-filter: blur(6px); }
.team-mascot__heading { font-size: clamp(40px, 4.4vw, 64px); margin: 0; line-height: 0.98; }
.team-mascot__lede { font-size: 17px; line-height: 1.75; color: var(--fg); margin: 32px 0 18px; max-width: 520px; }
.team-mascot__body { font-size: 14px; line-height: 1.75; color: var(--fg-muted); margin: 0; max-width: 520px; }
.team-mascot__role { margin-top: 36px; display: inline-flex; align-items: center; gap: 18px; padding: 12px 20px; border: 1px solid var(--line-strong); font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg); }
.team-mascot__role-k { color: var(--fg-faint); }
.team-mascot__role-div { width: 1px; height: 14px; background: var(--line); }

/* ---- Consult band ---- */
.team-consult { padding: 88px 0; background: #fff; border-bottom: 1px solid var(--line); }
.team-consult__grid { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 48px; }
.team-consult__title { font-size: clamp(30px, 3.2vw, 48px); margin: 0; line-height: 1.05; }
.team-consult__cta { display: flex; gap: 18px; justify-content: flex-end; flex-wrap: wrap; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .team-intro__grid { grid-template-columns: 1fr; gap: 40px; }
  .team-feature__card { grid-template-columns: 1fr; gap: 0; }
  .team-feature__media { min-height: 480px; }
  .team-feature__body { padding: 40px; }
  .team-roster__grid { grid-template-columns: repeat(2, 1fr); }
  .team-card:nth-child(4n) { border-right: 1px solid var(--line); }
  .team-card:nth-child(2n) { border-right: 0; }
  .team-card:nth-child(n+3) { border-top: 1px solid var(--line); }
  .team-mascot__grid { grid-template-columns: 1fr; gap: 40px; }
  .team-consult__grid { grid-template-columns: 1fr; gap: 32px; }
  .team-consult__cta { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .team-modal__inner { grid-template-columns: 1fr; }
  .team-modal__media { min-height: 240px; max-height: 38vh; }
  .team-modal__body { padding: 32px 28px 28px; }
  .team-modal__name { font-size: 32px; }
}
@media (max-width: 640px) {
  .team-roster__grid { grid-template-columns: 1fr; }
  .team-card { border-right: 0; }
  .team-card:nth-child(2n) { border-right: 0; }
  .team-card:nth-child(n+2) { border-top: 1px solid var(--line); }
  .team-intro__stats { grid-template-columns: 1fr; }
  .team-stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .team-stat:last-child { border-bottom: 0; }
}

/* =========================================================================
   BLOG — single post (single.php) + index (home.php)
   From design-reference Blog Post.html + blog-post-page.jsx. Additive,
   self-contained block: reuses the base primitives (.container-wide, .eyebrow,
   .display/.display-italic, .btn-link, .img-frame, .stars) and the :root
   tokens. Labels use Inter (var(--font-body)) per the theme's font lock
   (Cormorant + Inter only). Gold is used on dark surfaces only.
   ========================================================================= */

/* ---- Single: hero (Bone band beneath the fixed nav) ---- */
.blogpost-hero { position: relative; background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: 168px 0 96px; overflow: hidden; }
.blogpost-hero__grid-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background-image: linear-gradient(to right, rgba(13,36,36,0.05) 1px, transparent 1px);
  background-size: 120px 100%; background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 80%, transparent 100%);
}
.blogpost-hero__inner { position: relative; }
.blogpost-crumb { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 28px; }
.blogpost-crumb a { color: var(--fg-faint); text-decoration: none; }
.blogpost-crumb a:hover { color: var(--accent); }
.blogpost-crumb span { margin: 0 12px; opacity: 0.5; }
.blogpost-crumb em { color: var(--fg); font-style: normal; }

.blogpost-hero__layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.blogpost-hero__layout.is-textonly { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
.blogpost-hero__eyebrow { color: var(--accent); margin-bottom: 24px; }
.blogpost-hero__title { font-size: clamp(40px, 5.4vw, 80px); margin: 0; line-height: 1.0; letter-spacing: -0.025em; color: var(--fg); }

.blogpost-meta { margin-top: 40px; display: flex; gap: 28px; flex-wrap: wrap; align-items: center; font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); }
.blogpost-meta__sep { width: 1px; height: 14px; background: var(--line-strong); }

.blogpost-author { margin-top: 36px; display: inline-flex; align-items: center; gap: 18px; padding: 14px 22px 14px 14px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.blogpost-author__avatar { width: 64px; height: 64px; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.blogpost-author__kicker { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 6px; }
.blogpost-author__name { font-size: 22px; letter-spacing: -0.01em; line-height: 1.1; }
.blogpost-author__role { font-size: 12px; color: var(--fg-muted); margin-top: 4px; }

/* Single: hero poster (dark "video" frame, gold rail + presentational play) */
.blogpost-poster { position: relative; }
.blogpost-poster__rail { position: absolute; top: -8px; left: -8px; width: 4px; height: 96px; background: var(--gold); z-index: 2; }
.blogpost-poster__frame { aspect-ratio: 4/3; background: var(--bg-dark); border: 1px solid var(--line); }
.blogpost-poster__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,22,26,0.45) 0%, rgba(8,22,26,0.05) 60%); }
.blogpost-poster__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.85); background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); color: #fff; transition: background .25s ease; z-index: 3; }
a.blogpost-poster__play:hover { background: rgba(255,255,255,0.22); }
.blogpost-poster__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; z-index: 3; }
.blogpost-poster__cap-watch { border-left: 2px solid var(--gold); padding-left: 10px; }
.blogpost-poster__cap-title { opacity: 0.78; }

/* ---- Single: body + sidebar ---- */
.blogpost-body { background: #fff; padding: 96px 0 88px; }
.blogpost-body__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 88px; align-items: start; }
.blogpost-article { max-width: 760px; }
.blogpost-prose { font-family: var(--font-body); font-size: 17px; line-height: 1.75; color: var(--fg-muted); }
.blogpost-prose > :first-child { margin-top: 0; }
.blogpost-prose p { margin: 0 0 22px; }
.blogpost-prose h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -0.01em; color: var(--fg); margin: 48px 0 20px; padding-top: 28px; border-top: 1px solid var(--line); }
.blogpost-prose h3 { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--fg); margin: 36px 0 14px; }
.blogpost-prose h4 { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg); margin: 28px 0 12px; }
.blogpost-prose a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.blogpost-prose ul, .blogpost-prose ol { margin: 0 0 24px; padding-left: 22px; }
.blogpost-prose li { margin-bottom: 8px; }
.blogpost-prose img { margin: 24px 0; }
.blogpost-prose blockquote { margin: 28px 0; padding-left: 24px; border-left: 3px solid var(--accent); font-family: var(--font-display); font-weight: 300; font-size: 24px; line-height: 1.4; color: var(--fg); }
.blogpost-pagelinks { margin: 24px 0; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.blogpost-pagelinks a { color: var(--accent); padding: 0 6px; }

.blogpost-foot { margin-top: 24px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.blogpost-foot__filed { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); }
.blogpost-foot__filed a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); }
.blogpost-share { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.blogpost-share__label { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); }
.blogpost-share a { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid var(--line-strong); }
.blogpost-share a:hover { color: var(--accent); border-color: var(--accent); }

/* Single: sidebar cards */
.blogpost-aside { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 24px; }
.bp-card { background: var(--bg-alt); border-left: 3px solid var(--accent); padding: 28px 28px 10px; }
.bp-card__eyebrow { color: var(--accent); margin-bottom: 22px; }
.bp-recent__list { list-style: none; margin: 0; padding: 0; }
.bp-recent__item { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.bp-recent__item:last-child { border-bottom: none; }
.bp-recent__link { display: block; font-size: 18px; font-weight: 400; line-height: 1.3; letter-spacing: -0.005em; color: var(--fg); text-decoration: none; }
.bp-recent__link:hover { color: var(--accent); }
.bp-recent__meta { margin-top: 8px; font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); }

.bp-ba { display: block; text-decoration: none; color: var(--fg); background: #fff; border: 1px solid var(--line); }
.bp-ba__head { padding: 22px 26px 0; display: flex; justify-content: space-between; align-items: baseline; }
.bp-ba__eyebrow { color: var(--accent); }
.bp-ba__media { position: relative; margin-top: 20px; }
.bp-ba__divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255,255,255,0.55); z-index: 2; }
.bp-ba__tag { position: absolute; top: 12px; z-index: 2; font-family: var(--font-body); font-size: 9px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; padding: 5px 9px; background: rgba(8,22,26,0.55); }
.bp-ba__tag--before { left: 12px; border-left: 2px solid var(--gold); }
.bp-ba__tag--after { right: 12px; border-right: 2px solid var(--gold); }
.bp-ba__frame { aspect-ratio: 353 / 281; }
.bp-ba__foot { padding: 20px 26px 24px; display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); }
.bp-ba__name { font-size: 20px; line-height: 1.1; letter-spacing: -0.005em; }
.bp-ba__label { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); margin-top: 8px; }
.bp-ba__arrow { font-size: 16px; color: var(--accent); }

.bp-consult { position: relative; background: var(--bg-dark); color: #fff; padding: 32px 28px 30px; overflow: hidden; }
.bp-consult__rail { position: absolute; top: 0; left: 0; width: 3px; height: 64px; background: var(--gold); }
.bp-consult__kicker { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 14px; }
.bp-consult__phone { display: block; font-size: 34px; font-weight: 300; letter-spacing: -0.015em; color: #fff; text-decoration: none; line-height: 1; margin-bottom: 22px; }
.bp-consult__phone:hover { color: var(--gold); }
.bp-consult__foot { display: flex; justify-content: space-between; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.15); font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); }

/* ---- Single: prev / next pagination ---- */
.blogpost-pager { background: var(--bg-alt); padding: 64px 0; border-top: 1px solid var(--line); }
.blogpost-pager__grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); background: #fff; }
.blogpost-pager__cell { display: block; padding: 36px 40px; text-decoration: none; color: var(--fg); transition: background .2s ease; }
.blogpost-pager__cell:hover { background: var(--bg-alt); }
.blogpost-pager__cell--next { border-left: 1px solid var(--line); text-align: right; }
.blogpost-pager__cell--empty { background: transparent; pointer-events: none; }
.blogpost-pager__dir { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.blogpost-pager__cell--next .blogpost-pager__dir { justify-content: flex-end; }
.blogpost-pager__title { font-size: 22px; font-weight: 400; letter-spacing: -0.005em; line-height: 1.25; }

/* ---- Single: reviews band ---- */
.blog-reviews { background: #fff; padding: 120px 0; border-top: 1px solid var(--line); }
.blog-reviews__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; padding-bottom: 28px; border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: 24px; }
.blog-reviews__eyebrow { color: var(--accent); margin-bottom: 16px; }
.blog-reviews__title { font-size: clamp(32px, 3.6vw, 52px); margin: 0; line-height: 1.04; letter-spacing: -0.015em; }
.blog-reviews__panel { display: grid; grid-template-columns: 300px 1fr; border: 1px solid var(--line); }
.blog-reviews__overall { padding: 40px 32px; background: var(--bg-alt); border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; }
.blog-reviews__overall-eyebrow { color: var(--accent); margin-bottom: 14px; }
.blog-reviews__verdict { font-size: 44px; font-weight: 400; letter-spacing: -0.01em; line-height: 1; margin-bottom: 14px; }
.blog-reviews__score { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.blog-reviews__score-num { font-size: 36px; font-weight: 400; line-height: 1; color: var(--fg); }
.blog-reviews__score-of { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); }
.blog-reviews__stars { margin-bottom: 12px; }
.blog-reviews__basis { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); }
.blog-reviews__source { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); }
.blog-reviews__source-name { color: var(--fg); }
.blog-reviews__cards { display: grid; grid-template-columns: repeat(3, 1fr); }
.blog-reviews__card { padding: 32px 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; background: #fff; }
.blog-reviews__card:last-child { border-right: none; }
.blog-reviews__card-stars { margin-bottom: 18px; }
.blog-reviews__card-quote { font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.4; letter-spacing: -0.005em; color: var(--fg); margin: 0; flex: 1; }
.blog-reviews__card-meta { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.blog-reviews__card-name { font-size: 18px; font-weight: 400; letter-spacing: -0.005em; }
.blog-reviews__card-date { margin-top: 4px; font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); }

/* ---- Index (home.php): card grid ---- */
.blogidx-head__lede { max-width: 640px; margin: 18px 0 0; font-size: 16px; line-height: 1.7; color: var(--fg-muted); }
.blogidx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }
.blogidx-card { display: flex; flex-direction: column; }
.blogidx-card__link { display: flex; flex-direction: column; text-decoration: none; color: var(--fg); }
.blogidx-card__media { aspect-ratio: 3/2; margin-bottom: 22px; }
.blogidx-card__media img { transition: transform .6s ease; }
.blogidx-card__link:hover .blogidx-card__media img { transform: scale(1.03); }
.blogidx-card__eyebrow { font-family: var(--font-body); font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.blogidx-card__title { font-size: 27px; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 14px; }
.blogidx-card__link:hover .blogidx-card__title { color: var(--accent); }
.blogidx-card__meta { display: flex; align-items: center; gap: 16px; font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 16px; }
.blogidx-card__sep { width: 1px; height: 12px; background: var(--line-strong); }
.blogidx-card__excerpt { font-size: 15px; line-height: 1.65; color: var(--fg-muted); margin: 0 0 18px; }
.blogidx-card__more { font-family: var(--font-body); font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; margin-top: auto; }
.blogidx-card__more .arrow { transition: transform .3s ease; }
.blogidx-card__link:hover .blogidx-card__more .arrow { transform: translateX(4px); }
.blogidx-empty { font-size: 16px; color: var(--fg-muted); }

/* Index pagination (the_posts_pagination markup) */
.blogidx .pagination { margin-top: 72px; display: flex; justify-content: center; }
.blogidx .pagination .nav-links { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.blogidx .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 10px 14px; font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--fg); text-decoration: none; border: 1px solid var(--line-strong); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.blogidx .page-numbers:hover { color: var(--accent); border-color: var(--accent); }
.blogidx .page-numbers.current { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.blogidx .page-numbers.dots { border-color: transparent; }

/* ---- Blog responsive ---- */
@media (max-width: 1024px) {
  .blogpost-hero__layout { grid-template-columns: 1fr; gap: 40px; }
  .blogpost-hero { padding-top: 132px; }
  .blogpost-poster { max-width: 560px; }
  .blogpost-body__grid { grid-template-columns: 1fr; gap: 56px; }
  .blogpost-aside { position: static; }
  .blog-reviews__panel { grid-template-columns: 1fr; }
  .blog-reviews__overall { border-right: none; border-bottom: 1px solid var(--line); }
  .blog-reviews__cards { grid-template-columns: 1fr; }
  .blog-reviews__card { border-right: none; border-bottom: 1px solid var(--line); }
  .blog-reviews__card:last-child { border-bottom: none; }
  .blogidx-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .blogpost-hero { padding: 116px 0 64px; }
  .blogpost-author { flex-wrap: wrap; }
  .blogpost-pager__grid { grid-template-columns: 1fr; }
  .blogpost-pager__cell--next { border-left: none; border-top: 1px solid var(--line); text-align: left; }
  .blogpost-pager__cell--next .blogpost-pager__dir { justify-content: flex-start; }
  .blog-reviews { padding: 80px 0; }
  .blogidx-grid { grid-template-columns: 1fr; max-width: 480px; }
}
/* ===== end Blog block ===================================================== */

/* =========================================================================
   BEFORE / AFTER — GALLERY (page-beforeAfter.php) + CASE DETAIL
   (single-before_after.php). ADDITIVE block, owned by the Before/After
   templates. From before-after-gallery-page.jsx + before-after-detail-page.jsx,
   re-skinned to the theme system (Cormorant + Inter only; gold on dark; teal
   on light; hairline grids; no new button variants). Reuses the shared
   .procidx-hero / .procidx-consult shells, the homepage .ba / .ba-card grid,
   and the .btn / .btn-link / .img-frame / .eyebrow / .display(-italic)
   primitives. Inter stands in for the prototype's mono labels.
   ========================================================================= */

/* ---- Gallery: hero stats ---- */
.bagal-stats { display: flex; gap: 40px; align-items: baseline; flex-wrap: wrap; margin-top: 8px; }
.bagal-stat__num { font-size: 38px; line-height: 1; color: var(--gold); }
.bagal-stat__label { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-top: 8px; }

/* ---- Gallery: sticky filter bar ---- */
.bagal-hero .procidx-hero__img { filter: grayscale(0.85) brightness(0.58) contrast(1.02); } /* muted hero per mockup */
.bagal-filter { position: sticky; top: 0; z-index: 30; background: color-mix(in oklab, var(--bg) 96%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.bagal-filter__inner { padding: 18px 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.bagal-filter__btns { display: flex; flex-wrap: wrap; align-self: flex-start; row-gap: 6px; }
.bagal-filter__select { display: none; width: 100%; padding: 14px 16px; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); background: var(--bg); border: 1px solid var(--line-strong); }
.bagal-filter__btn { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; padding: 12px 18px; background: transparent; color: var(--fg); border: 0; border-left: 1px solid var(--line); cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.bagal-filter__btn:first-child { border-left: 0; }
.bagal-filter__btn:hover { color: var(--accent); }
.bagal-filter__btn.is-active { background: var(--fg); color: var(--bg); }
.bagal-filter__count { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); white-space: nowrap; }

/* ---- Gallery: grid uses .ba / .ba__grid / .ba-card; just the filter toggle + empty state ---- */
.bagal-grid-sec { background: var(--bg-alt); }
.bagal-grid { grid-template-columns: repeat(3, 1fr); }
.ba-card.is-hidden { display: none; }
.bagal-empty { border: 1px dashed var(--line-strong); padding: 64px 32px; text-align: center; color: var(--fg-muted); }
.bagal-empty__eyebrow { margin-bottom: 12px; color: var(--fg-faint); }
.bagal-empty p { margin: 0; }

/* ---- Detail: solid hero band ----
   Per the June 4 review the case-detail hero is a solid dark band (no case
   photo - the case viewer directly below already shows it). Asserted here so
   the treatment doesn't depend on the shared .procidx-hero defaults; matches
   the interior .page-hero band. Additive: .procidx-hero rules are untouched
   (other pages still render the photo hero). */
.badet-hero { background: #0c1f23; border-bottom: 1px solid var(--line); }

/* ---- Detail: hero metric row ---- */
.badet-hero__metrics { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; margin-top: 40px; }
.badet-hero__metric-label { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 6px; }
.badet-hero__metric-val { font-family: var(--font-body); font-size: 14px; color: #fff; }
.badet-hero__rule { width: 1px; height: 28px; background: rgba(255,255,255,0.2); }

/* ---- Detail: case viewer ---- */
.badet-viewer { background: var(--bg); }
.badet-back { color: var(--accent); border-color: var(--accent); display: inline-block; margin-bottom: 28px; }
.badet-viewer__head { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: 16px; }
.badet-viewer__kicker { color: var(--accent); }
.badet-viewer__meta { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); }
.badet-stage__frame { position: relative; border: 1px solid var(--line); background: var(--bg-alt); overflow: hidden; }
.badet-stage__frame img { width: 100%; height: auto; display: block; }
.badet-stage__divider { display: none; } /* removed: cases are composite plates split top/bottom or left/right - an overlaid vertical line is wrong */
.badet-chip { position: absolute; top: 16px; font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; padding: 7px 12px; background: rgba(8,22,26,0.55); backdrop-filter: blur(6px); }
.badet-chip--before { left: 16px; border-left: 2px solid var(--gold); }
.badet-chip--after { right: 16px; border-right: 2px solid var(--gold); }
.badet-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.6); background: rgba(8,22,26,0.35); backdrop-filter: blur(6px); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 14px; cursor: pointer; transition: background .2s ease; }
.badet-arrow:hover { background: var(--gold); color: #1a1208; }
.badet-arrow--prev { left: 16px; }
.badet-arrow--next { right: 16px; }
.badet-stage__caption { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; flex-wrap: wrap; gap: 12px; }
.badet-stage__index { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg); }
.badet-stage__hint { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); }

/* ---- Detail: thumbnail rail ---- */
.badet-rail { margin-top: 32px; }
.badet-rail__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.badet-rail__kicker { color: var(--fg-faint); }
.badet-rail__hint { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); }
.badet-rail__grid { display: grid; gap: 16px; }
.badet-thumb { padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.badet-thumb__frame { position: relative; display: block; aspect-ratio: 1200 / 902; overflow: hidden; border: 1px solid var(--line); background: var(--bg-alt); }
.badet-thumb__frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.92); transition: filter .3s ease; }
.badet-thumb.is-active .badet-thumb__frame { border: 2px solid var(--accent); }
.badet-thumb.is-active .badet-thumb__frame img { filter: none; }
.badet-thumb__num { display: block; margin-top: 10px; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); }
.badet-thumb.is-active .badet-thumb__num { color: var(--accent); }

/* ---- Detail: case notes ---- */
.badet-notes { background: var(--bg); }
.badet-notes__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.badet-notes__kicker { color: var(--accent); margin-bottom: 18px; }
.badet-notes__title { font-size: clamp(28px, 2.6vw, 38px); margin: 0 0 24px; line-height: 1.1; letter-spacing: -0.01em; }
.badet-notes__body { font-size: 16px; line-height: 1.75; color: var(--fg); }
.badet-notes__body p { margin: 0 0 18px; }
.badet-notes__body p:last-child { margin-bottom: 0; }
.badet-notes__actions { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-top: 32px; }
.badet-dl { margin: 0; border-top: 1px solid var(--line); }
.badet-dl__row { display: grid; grid-template-columns: 180px 1fr; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.badet-dl__key { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); }
.badet-dl__val { margin: 0; font-size: 14px; color: var(--fg); line-height: 1.5; }

/* ---- Detail: pull quote ---- */
.badet-quote { background: var(--bg-alt); padding: 110px 0; }
.badet-quote__inner { max-width: 980px; display: grid; grid-template-columns: 40px 1fr; gap: 32px; align-items: flex-start; }
.badet-quote__mark { font-size: 96px; line-height: 0.6; color: var(--accent); font-family: var(--font-display); }
.badet-quote__block { margin: 0; }
.badet-quote__text { font-family: var(--font-display); font-weight: 300; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.35; letter-spacing: -0.005em; color: var(--fg); margin: 0; }
.badet-quote__foot { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.badet-quote__author { font-size: 22px; }
.badet-quote__detail { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); margin-top: 4px; }
.badet-quote__stars { align-self: center; }

/* ---- Detail: cross-procedure strip (dark) ---- */
.badet-cross { background: var(--bg-dark); color: #fff; padding: 110px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.badet-cross__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.14); flex-wrap: wrap; gap: 24px; }
.badet-cross__kicker { color: var(--gold); margin-bottom: 16px; }
.badet-cross__title { font-size: clamp(34px, 3.6vw, 52px); margin: 0; line-height: 1.02; color: #fff; letter-spacing: -0.015em; }
.badet-cross__title .display-italic { color: var(--gold); }
.badet-cross__all { color: #fff; border-bottom-color: rgba(255,255,255,0.4); }
.badet-cross__all:hover { color: var(--gold); border-color: var(--gold); }
.badet-cross__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.badet-cross__card { text-decoration: none; color: #fff; display: block; }
.badet-cross__media { position: relative; aspect-ratio: 4/3; border: 1px solid rgba(255,255,255,0.1); background: #1a2e30; }
.badet-cross__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8,22,26,0) 50%, rgba(8,22,26,0.78) 100%); }
.badet-cross__rail { position: absolute; left: 0; top: 24px; width: 3px; height: 56px; background: var(--gold); }
.badet-cross__foot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.14); }
.badet-cross__name { font-size: 28px; color: #fff; letter-spacing: -0.005em; }
.badet-cross__count { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 8px; }
.badet-cross__arrow { font-family: var(--font-body); font-size: 16px; color: var(--gold); }

/* ---- Before/After responsive ---- */
@media (max-width: 1024px) {
  .bagal-grid { grid-template-columns: repeat(2, 1fr); }
  .badet-notes__grid { grid-template-columns: 1fr; gap: 48px; }
  .badet-cross__grid { grid-template-columns: 1fr; gap: 24px; max-width: 560px; }
}
@media (max-width: 760px) {
  .bagal-filter__inner { padding: 16px 24px; }
  .bagal-filter__count { display: none; }
  .bagal-filter__btns { display: none; }
  .bagal-filter__select { display: block; }
  .bagal-grid { grid-template-columns: 1fr; max-width: 560px; }
  .badet-rail__grid { grid-template-columns: repeat(3, 1fr) !important; }
  .badet-dl__row { grid-template-columns: 130px 1fr; }
  .badet-quote__inner { grid-template-columns: 1fr; gap: 8px; }
  .badet-quote__mark { font-size: 64px; }
}

/* =========================================================================
   SHOP — Gift Certificates (page-shop.php) — from shop-page.jsx
   ADDITIVE block. Self-contained; touches nothing above. Presentational
   only — WooCommerce cart/checkout are wired by the maintainer (see the
   template header). Reuses the shared .btn / .btn--gold / .btn-link /
   .img-frame / .eyebrow / .display(-italic) / .container-wide / .section /
   .stars primitives. JetBrains Mono is intentionally NOT used: mono labels
   from the design fall back to Inter (the theme's only sans).
   ========================================================================= */
.shop [id] { scroll-margin-top: 96px; }

/* ---- Hero (tall, dark, full-bleed; mirrors the procedures hero) ---- */
.shop-hero { position: relative; min-height: min(86vh, 780px); overflow: hidden; background: #0c1f23; border-bottom: 1px solid var(--line); }
.shop-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.shop-hero__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,22,26,0.82) 0%, rgba(8,22,26,0.62) 32%, rgba(8,22,26,0.22) 62%, rgba(8,22,26,0) 92%); }
.shop-hero__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(to bottom, transparent, rgba(8,22,26,0.40)); pointer-events: none; }
.shop-hero__rail { position: absolute; top: 180px; left: 0; width: 4px; height: 96px; background: var(--gold); z-index: 2; }
.shop-hero__inner { position: relative; z-index: 2; min-height: min(86vh, 780px); display: flex; flex-direction: column; justify-content: center; padding-top: 140px; padding-bottom: 100px; }
.shop-hero__inner > * { max-width: 640px; }
.shop-hero__eyebrow { color: rgba(255,255,255,0.7); letter-spacing: 0.28em; margin-bottom: 28px; }
.shop-hero__title { font-size: clamp(48px, 6.2vw, 96px); margin: 0; line-height: 1; color: #fff; }
.shop-hero__title .display-italic { color: var(--gold); }
.shop-hero__lede { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.86); max-width: 500px; margin: 36px 0 44px; }
.shop-hero__actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.shop-hero__link { color: #fff; border-bottom-color: rgba(255,255,255,0.4); }
.shop-hero__link:hover { color: var(--gold); border-bottom-color: var(--gold); }
.shop-hero__stamp { position: absolute; bottom: 40px; right: 40px; padding: 14px 18px; background: rgba(255,255,255,0.08); backdrop-filter: blur(8px); border-left: 2px solid var(--gold); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; z-index: 2; }

/* ---- Product / configurator ---- */
.shop-product { background: var(--bg); }
.shop-product__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 88px; align-items: flex-start; }
.shop-preview { position: sticky; top: 100px; }
.shop-preview__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; gap: 16px; }
.shop-preview__label { color: var(--fg-faint); }
.shop-preview__sku { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); }
.shop-preview__note { font-size: 13px; line-height: 1.7; color: var(--fg-faint); margin: 24px 0 0; max-width: 480px; }

/* Certificate card */
.gc-cert { position: relative; aspect-ratio: 7 / 4; background: #2d4a37; color: #fff; padding: 44px 48px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; box-shadow: 0 30px 80px -40px rgba(20,40,28,0.55), 0 8px 24px -12px rgba(20,40,28,0.35); }
.gc-cert__rail { position: absolute; top: 0; left: 0; width: 4px; height: 88px; background: var(--gold); }
.gc-cert__watermark { position: absolute; right: -40px; bottom: -60px; width: 280px; opacity: 0.06; filter: brightness(0) invert(1); }
.gc-cert__small { font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 8px; }
.gc-cert__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.gc-cert__lockup { display: flex; align-items: center; gap: 12px; }
.gc-cert__mark { height: 38px; width: auto; filter: brightness(0) invert(1); }
.gc-cert__type { height: 32px; width: auto; filter: brightness(0) invert(1); }
.gc-cert__tr { text-align: right; }
.gc-cert__kicker { font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.gc-cert__no { font-size: 10px; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); }
.gc-cert__mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.gc-cert__to { flex: 1; min-width: 0; }
.gc-cert__recipient { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(28px, 3.4vw, 44px); line-height: 1; color: #fff; min-height: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-cert__ph { color: rgba(255,255,255,0.3); }
.gc-cert__value-wrap { text-align: right; flex-shrink: 0; }
.gc-cert__value { font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 5vw, 64px); line-height: 1; color: var(--gold); letter-spacing: -0.02em; }
.gc-cert__bot { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.18); }
.gc-cert__from-wrap { flex: 1; min-width: 0; }
.gc-cert__sender { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 18px; color: rgba(255,255,255,0.92); }
.gc-cert__msg { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.72); margin-top: 8px; max-width: 320px; }
.gc-cert__issued { text-align: right; }
.gc-cert__doctor { font-size: 11px; color: rgba(255,255,255,0.85); line-height: 1.5; }
.gc-cert__doctor span { color: rgba(255,255,255,0.5); font-size: 10px; }

/* Buy column */
.shop-buy__eyebrow { color: var(--accent); margin-bottom: 14px; }
.shop-buy__title { font-size: clamp(36px, 4vw, 56px); margin: 0; line-height: 1.04; }
.shop-buy__pricerow { display: flex; align-items: baseline; gap: 14px; margin: 16px 0 0; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.shop-buy__price { font-weight: 300; font-size: 56px; line-height: 1; letter-spacing: -0.02em; }
.shop-buy__stars { margin-left: auto; display: flex; align-items: baseline; gap: 6px; }
.shop-buy__stars .stars { color: var(--gold); font-size: 14px; }
.shop-buy__reviewcount { color: var(--fg-faint); font-size: 11px; }
.shop-buy__desc { font-size: 15px; line-height: 1.75; color: var(--fg-muted); margin: 24px 0 0; }

/* Form scaffolding */
.shop-fieldset { margin-top: 32px; }
.shop-fieldset__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.shop-fieldset__label { color: var(--fg); }
.shop-fieldset__req { font-size: 10px; color: var(--accent); letter-spacing: 0.16em; text-transform: uppercase; }
.shop-fieldset__opt { font-size: 10px; color: var(--fg-faint); letter-spacing: 0.16em; text-transform: uppercase; }
.shop-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.shop-field-label { display: block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 6px; }
.shop-field { width: 100%; background: var(--bg); border: 1px solid var(--line-strong); padding: 14px 16px; font-family: var(--font-body); font-size: 14px; color: var(--fg); outline: none; border-radius: 0; transition: border-color .2s ease; }
.shop-field:focus { border-color: var(--accent); }
.shop-field::placeholder { color: var(--fg-faint); }
.shop-textarea { min-height: 80px; resize: vertical; line-height: 1.6; }
.shop-counter { display: flex; justify-content: flex-end; font-size: 11px; color: var(--fg-faint); letter-spacing: 0.08em; margin-top: 4px; }

/* Denominations (hairline grid of cards) */
.gc-denoms { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.gc-denom { background: var(--bg); color: var(--fg); border: none; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 16px; text-align: left; cursor: pointer; transition: background .2s ease, color .2s ease; }
.gc-denom:nth-child(3n) { border-right: none; }
.gc-denom:nth-child(n+4) { border-bottom: none; }
.gc-denom.is-active { background: var(--accent); color: #fff; }
.gc-denom__amt { display: block; font-weight: 300; font-size: 26px; line-height: 1; margin-bottom: 6px; }
.gc-denom__sub { display: block; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.5; }
.gc-denom.is-active .gc-denom__sub { opacity: 0.7; }
.gc-custom { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
.gc-custom__sign { font-weight: 300; font-size: 32px; }
.gc-custom__input { font-family: var(--font-display); font-size: 28px; font-weight: 300; max-width: 200px; }
.gc-custom__range { font-size: 11px; color: var(--fg-faint); letter-spacing: 0.08em; }

/* Delivery options */
.gc-delivery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gc-deliv { background: var(--bg); border: 1px solid var(--line-strong); padding: 18px 20px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color .18s ease, background .18s ease; position: relative; }
.gc-deliv.is-active { border-color: var(--accent); background: var(--bg-alt); }
.gc-deliv.is-active::before { content: ""; position: absolute; top: -1px; left: -1px; width: 8px; height: 8px; background: var(--accent); }
.gc-deliv__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gc-deliv__title { font-weight: 400; font-size: 18px; color: var(--fg); }
.gc-deliv__price { font-size: 10px; letter-spacing: 0.1em; color: var(--fg-faint); }
.gc-deliv.is-active .gc-deliv__price { color: var(--accent); }
.gc-deliv__sub { font-size: 12px; color: var(--fg-muted); line-height: 1.5; }
.gc-senddate { margin-top: 18px; }

/* Add-to-cart row */
.shop-addrow { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); display: flex; gap: 16px; align-items: center; }
.gc-qty { display: flex; align-items: center; border: 1px solid var(--line-strong); height: 54px; }
.gc-qty__btn { background: transparent; border: none; width: 44px; height: 100%; font-size: 18px; color: var(--fg-muted); cursor: pointer; }
.gc-qty__val { width: 36px; text-align: center; font-size: 13px; color: var(--fg); }
.shop-addbtn { flex: 1; justify-content: center; padding: 18px 22px; font-size: 12px; }
.shop-secure { font-size: 11px; color: var(--fg-faint); letter-spacing: 0.08em; margin: 14px 0 0; text-align: center; }

/* ---- How it works ---- */
.shop-how { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.shop-how__head { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: flex-end; margin-bottom: 64px; }
.shop-how__eyebrow { color: var(--accent); margin-bottom: 18px; }
.shop-how__title { font-size: clamp(36px, 4vw, 56px); margin: 0; line-height: 1.04; }
.shop-how__intro { font-size: 16px; line-height: 1.7; color: var(--fg-muted); max-width: 540px; justify-self: end; margin: 0; }
.shop-how__grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: var(--bg); }
.shop-step { padding: 40px 36px 44px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; min-height: 240px; }
.shop-step:last-child { border-right: none; }
.shop-step__n { font-size: 11px; letter-spacing: 0.18em; color: var(--gold); }
.shop-step__t { font-weight: 400; font-size: 26px; line-height: 1.1; }
.shop-step__d { font-size: 14px; line-height: 1.7; color: var(--fg-muted); }

/* ---- Eligible procedures ---- */
.shop-elig { background: var(--bg); }
.shop-elig__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 56px; gap: 40px; flex-wrap: wrap; }
.shop-elig__eyebrow { color: var(--accent); margin-bottom: 14px; }
.shop-elig__title { font-size: clamp(36px, 4vw, 56px); margin: 0; line-height: 1.04; }
.shop-elig__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.shop-elig__card { display: flex; flex-direction: column; gap: 18px; text-decoration: none; color: inherit; }
.shop-elig__media { aspect-ratio: 5 / 4; }
.shop-elig__card:hover .shop-elig__media img { transform: scale(1.03); }
.shop-elig__media img { transition: transform .4s ease; }
.shop-elig__row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.shop-elig__name { font-weight: 400; font-size: 22px; line-height: 1.2; }
.shop-elig__price { font-size: 11px; color: var(--fg-faint); letter-spacing: 0.06em; white-space: nowrap; }

/* ---- Reviews band (dark) ---- */
.shop-reviews { background: var(--bg-dark); color: #fff; }
.shop-reviews__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 56px; gap: 40px; flex-wrap: wrap; }
.shop-reviews__eyebrow { color: var(--gold); margin-bottom: 14px; }
.shop-reviews__title { font-size: clamp(32px, 3.6vw, 48px); margin: 0; line-height: 1.04; color: #fff; }
.shop-reviews__title .display-italic { color: var(--gold); }
.shop-reviews__avg { text-align: right; }
.shop-reviews__avgstars { color: var(--gold); font-size: 22px; letter-spacing: 0.2em; }
.shop-reviews__avglabel { font-size: 11px; color: rgba(255,255,255,0.55); letter-spacing: 0.16em; text-transform: uppercase; margin-top: 6px; }
.shop-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(255,255,255,0.14); }
.shop-review { padding: 36px 32px; border-right: 1px solid rgba(255,255,255,0.14); display: flex; flex-direction: column; gap: 16px; min-height: 280px; }
.shop-review:last-child { border-right: none; }
.shop-review__stars { color: var(--gold); letter-spacing: 0.2em; font-size: 13px; }
.shop-review__t { font-weight: 400; font-size: 22px; color: #fff; line-height: 1.2; }
.shop-review__body { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.78); margin: 0; flex: 1; }
.shop-review__foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; gap: 12px; flex-wrap: wrap; }
.shop-review .btn-link { color: var(--gold); border-color: rgba(255,255,255,0.3); flex-shrink: 0; }
.shop-review .btn-link:hover { color: #fff; border-color: #fff; }
.shop-review__author { font-weight: 300; font-size: 16px; color: #fff; }
.shop-review__loc { font-size: 10px; letter-spacing: 0.14em; color: rgba(255,255,255,0.45); }

/* ---- FAQ ---- */
.shop-faq { background: var(--bg); border-top: 1px solid var(--line); }
.shop-faq__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; }
.shop-faq__eyebrow { color: var(--accent); margin-bottom: 14px; }
.shop-faq__title { font-size: clamp(34px, 4vw, 52px); margin: 0; line-height: 1.04; }
.shop-faq__note { font-size: 14px; line-height: 1.7; color: var(--fg-muted); margin: 24px 0 0; max-width: 320px; }
.shop-faq__note a { color: var(--accent); }
.shop-faq__list { border-top: 1px solid var(--line); }
.shop-faq__item { border-bottom: 1px solid var(--line); }
.shop-faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; background: transparent; border: none; text-align: left; cursor: pointer; }
.shop-faq__q .display { font-weight: 400; font-size: 22px; color: var(--fg); line-height: 1.3; }
.shop-faq__plus { width: 28px; height: 28px; flex-shrink: 0; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--fg-muted); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.shop-faq__item.is-open .shop-faq__plus { background: var(--accent); color: #fff; border-color: var(--accent); }
.shop-faq__a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.shop-faq__item.is-open .shop-faq__a { max-height: 600px; }
.shop-faq__a > div { font-size: 15px; line-height: 1.75; color: var(--fg-muted); padding: 0 80px 28px 0; max-width: 720px; }

/* ---- Corporate / bulk band ---- */
.shop-corp { background: var(--bg-alt); border-top: 1px solid var(--line); }
.shop-corp__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.shop-corp__eyebrow { color: var(--fg-faint); margin-bottom: 14px; }
.shop-corp__title { font-size: clamp(32px, 3.6vw, 52px); margin: 0; line-height: 1.04; }
.shop-corp__body { font-size: 16px; line-height: 1.75; color: var(--fg-muted); max-width: 540px; margin: 28px 0 36px; }
.shop-corp__cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.shop-corp__phone { color: var(--accent); border-color: var(--accent); }
.shop-corp__card { background: var(--bg); border: 1px solid var(--line); padding: 36px 40px; }
.shop-corp__cardlabel { color: var(--fg-faint); margin-bottom: 18px; }
.shop-corp__table { width: 100%; border-collapse: collapse; }
.shop-corp__table tr td { padding: 16px 0; border-bottom: 1px solid var(--line); }
.shop-corp__table tr:last-child td { border-bottom: none; }
.shop-corp__qty { font-size: 14px; color: var(--fg); }
.shop-corp__disc { font-size: 13px; text-align: right; letter-spacing: 0.06em; color: var(--accent); }

/* ---- Cart drawer + floating button (presentational stubs) ---- */
.shop-cart-overlay { position: fixed; inset: 0; background: rgba(12,31,35,0.45); z-index: 90; }
.shop-cart { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw; background: var(--bg); z-index: 100; box-shadow: -20px 0 60px -20px rgba(12,31,35,0.25); transform: translateX(105%); transition: transform .35s ease; display: flex; flex-direction: column; }
.shop-cart.is-open { transform: translateX(0); }
.shop-cart__head { display: flex; justify-content: space-between; align-items: center; padding: 28px 32px; border-bottom: 1px solid var(--line); }
.shop-cart__eyebrow { color: var(--fg-faint); margin-bottom: 4px; }
.shop-cart__count { font-weight: 400; font-size: 24px; }
.shop-cart__close { background: transparent; border: none; cursor: pointer; width: 36px; height: 36px; font-size: 22px; color: var(--fg-muted); }
.shop-cart__body { flex: 1; overflow-y: auto; padding: 8px 32px; }
.shop-cart__empty { padding: 64px 0; text-align: center; }
.shop-cart__empty-label { margin-bottom: 14px; color: var(--fg-faint); }
.shop-cart__empty p { font-size: 14px; color: var(--fg-muted); max-width: 280px; margin: 0 auto; }
.shop-cart__foot { padding: 24px 32px 32px; border-top: 1px solid var(--line); }
.shop-cart__subtotal { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.shop-cart__subtotal .eyebrow { color: var(--fg-faint); }
.shop-cart__sub { font-weight: 300; font-size: 32px; letter-spacing: -0.02em; }
.shop-cart__tax { font-size: 11px; color: var(--fg-faint); margin: 0 0 18px; letter-spacing: 0.04em; }
.shop-cart__checkout { width: 100%; justify-content: center; padding: 18px 22px; }
.shop-cart__checkout.is-disabled { opacity: 0.4; pointer-events: none; }
.shop-cart__continue { display: block; margin: 14px auto 0; background: transparent; border: none; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-muted); cursor: pointer; }
.shop-fab { position: fixed; bottom: 32px; right: 32px; z-index: 60; background: var(--accent); color: #fff; border: none; padding: 18px 24px; display: flex; align-items: center; gap: 18px; cursor: pointer; box-shadow: 0 20px 40px -16px rgba(13,77,77,0.6); }
.shop-fab__count { background: var(--gold); color: #1a1208; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.shop-fab__label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .shop-product__grid { grid-template-columns: 1fr; gap: 56px; }
  .shop-preview { position: static; }
  .shop-how__head { grid-template-columns: 1fr; gap: 28px; }
  .shop-how__intro { justify-self: start; }
  .shop-elig__grid { grid-template-columns: repeat(2, 1fr); }
  .shop-faq__grid { grid-template-columns: 1fr; gap: 40px; }
  .shop-corp__grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 760px) {
  .shop-hero__stamp { display: none; }
  .shop-how__grid { grid-template-columns: 1fr; }
  .shop-step { border-right: none; border-bottom: 1px solid var(--line); min-height: 0; }
  .shop-step:last-child { border-bottom: none; }
  .shop-elig__grid { grid-template-columns: 1fr; }
  .shop-reviews__grid { grid-template-columns: 1fr; }
  .shop-review { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.14); min-height: 0; }
  .shop-review:last-child { border-bottom: none; }
  .shop-form__row { grid-template-columns: 1fr; }
  .gc-delivery { grid-template-columns: 1fr; }
  .shop-faq__a > div { padding-right: 0; }
}
/* ===== end SHOP block ==================================================== */

/* =========================================================================
   INTERIOR PAGE SYSTEM (page.php, page-cancer.php, page-reviews.php)
   -------------------------------------------------------------------------
   One shared shell for every interior page: a dark PageHero band, a prose
   reading column that styles the_content() to the design's ProseSection / P /
   ProseList / PageFigure primitives, a dual gold CTA band, and the Reviews
   content (featured video + masonry of review cards). Additive only; reuses
   the locked tokens, .eyebrow, .display-italic, .img-frame and .container-wide.
   Mono labels are rendered in Inter (--font-body) per the brand boundaries.
   ========================================================================= */

/* ---- PageHero: compact, imageless dark band with logo-mark watermark ---- */
.page-hero {
  position: relative;
  background: #0c1f23;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 88% 0%, rgba(212, 162, 90, 0.10), transparent 55%);
}
.page-hero__mark {
  position: absolute; right: -40px; bottom: -56px;
  height: 360px; width: auto;
  filter: brightness(0) invert(1); opacity: 0.05; pointer-events: none;
}
.page-hero__rail {
  position: absolute; top: 150px; left: 0;
  width: 4px; height: 84px; background: var(--gold); z-index: 2;
}
.page-hero__inner {
  position: relative; z-index: 2;
  padding-top: 168px; padding-bottom: 84px;
  min-height: min(46vh, 460px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.page-hero__crumb {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6); margin-bottom: 28px;
}
.page-hero__crumb a { color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color .25s ease; }
.page-hero__crumb a:hover { color: #fff; }
.page-hero__crumb-sep { margin: 0 12px; opacity: 0.5; }
.page-hero__crumb-current { color: #fff; }
.page-hero__eyebrow { color: rgba(255, 255, 255, 0.7); letter-spacing: 0.26em; margin-bottom: 22px; }
.page-hero__title {
  margin: 0; max-width: 1000px; color: #fff;
  font-size: clamp(44px, 6vw, 92px); line-height: 0.98; letter-spacing: -0.025em;
}
.page-hero__title .display-italic { color: var(--gold); }

/* ---- Prose reading column: styles the_content() to the design primitives ---- */
.page-prose { background: var(--bg); }
.page-prose__inner {
  max-width: 820px; margin: 0 auto;
  padding: 80px 48px 64px;
}
.page-prose > .page-prose__inner > :first-child { margin-top: 0; }
.page-prose > .page-prose__inner > :last-child { margin-bottom: 0; }
.page-prose p {
  font-size: 17px; line-height: 1.8; color: var(--fg-muted); margin: 0 0 22px;
}
.page-prose h2 {
  font-family: var(--font-display); font-weight: var(--font-display-weight);
  font-size: clamp(30px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -0.015em;
  color: var(--fg); margin: 56px 0 28px;
}
.page-prose h3 {
  font-family: var(--font-display); font-weight: var(--font-display-weight);
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; color: var(--fg);
  margin: 40px 0 18px;
}
.page-prose h2 em, .page-prose h2 i,
.page-prose h3 em, .page-prose h3 i { font-style: italic; color: var(--accent); }
.page-prose a { color: var(--accent); text-decoration: none; }
.page-prose a:hover { text-decoration: underline; }
.page-prose ul, .page-prose ol {
  margin: 6px 0 24px; padding-left: 0; list-style: none;
}
.page-prose li {
  font-size: 16px; line-height: 1.7; color: var(--fg-muted);
  position: relative; padding-left: 28px; margin: 0 0 12px;
}
.page-prose li:last-child { margin-bottom: 0; }
.page-prose li::before { content: "\2013"; color: var(--accent); position: absolute; left: 0; top: 0; }
.page-prose figure { position: relative; margin: 8px 0 36px; }
.page-prose figure::before {
  content: ""; position: absolute; right: -16px; bottom: -16px;
  width: 180px; height: 180px; background: var(--accent-soft); z-index: 0;
}
.page-prose figure img {
  position: relative; z-index: 1; width: 100%;
  aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid var(--line); background: var(--bg-alt);
}
.page-prose figcaption {
  position: relative; z-index: 1;
  margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--accent);
  font-family: var(--font-body); font-size: 10.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--fg-faint); line-height: 1.6;
}

/* ---- Dual CTA band: dark teal, two gold buttons ---- */
.cta-band {
  background: var(--bg-dark); color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cta-band__inner {
  padding: 72px 48px;
  display: flex; gap: 28px; align-items: center; justify-content: center;
  flex-wrap: wrap;
}
.cta-band__arrow { margin-left: 2px; }

/* ---- Reviews content ---- */
.rev-section { background: var(--bg); padding: 72px 0 40px; }

/* Featured video card */
.rev-feature { max-width: 760px; margin: 0 auto 8px; }
.rev-feature__card {
  position: relative; display: block; aspect-ratio: 16 / 9;
  border: 1px solid var(--line); background: #1a3035;
  text-decoration: none; overflow: hidden;
  box-shadow: 0 8px 30px rgba(8, 22, 26, 0.12);
  transition: box-shadow .3s ease;
}
a.rev-feature__card:hover { box-shadow: 0 22px 60px rgba(8, 22, 26, 0.22); }
.rev-feature__media { position: absolute; inset: 0; border: 0; }
.rev-feature__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(8, 22, 26, 0.10) 0%, rgba(8, 22, 26, 0.18) 55%, rgba(8, 22, 26, 0.70) 100%);
}
.rev-feature__topic {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-family: var(--font-body); font-size: 10px; font-weight: 500;
  letter-spacing: 0.20em; text-transform: uppercase; color: #fff;
}
.rev-feature__dot { color: var(--gold); }
.rev-feature__play {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 36px rgba(8, 22, 26, 0.5);
  transition: background .25s ease, transform .25s ease;
}
a.rev-feature__card:hover .rev-feature__play { background: var(--gold); transform: translate(-50%, -50%) scale(1.06); }
.rev-feature__tri {
  width: 0; height: 0; margin-left: 4px;
  border-top: 13px solid transparent; border-bottom: 13px solid transparent;
  border-left: 20px solid #0c1f23; transition: border-left-color .25s ease;
}
a.rev-feature__card:hover .rev-feature__tri { border-left-color: #1a1208; }
.rev-feature__title {
  position: absolute; bottom: 22px; left: 22px; right: 22px; z-index: 2;
  font-size: 24px; line-height: 1.2; color: #fff;
}

/* Centered intro heading */
.rev-intro { max-width: 760px; margin: 56px auto 40px; text-align: center; }
.rev-intro__kicker {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.20em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 16px;
}
.rev-intro__title { font-size: clamp(30px, 3.6vw, 48px); margin: 0; line-height: 1.05; }
.rev-intro__title .display-italic { color: var(--accent); }

/* Masonry of review cards */
.rev-masonry { column-count: 3; column-gap: 22px; max-width: 1180px; margin: 0 auto; }
.rev-card {
  break-inside: avoid; margin-bottom: 22px;
  border: 1px solid var(--line); background: var(--bg);
  padding: 30px 30px 26px;
}
.rev-card--featured { border-top: 2px solid var(--accent); }
.rev-card__glyph {
  font-family: var(--font-display); font-style: italic;
  font-size: 56px; line-height: 0.6; color: var(--accent-soft); margin-bottom: 6px;
}
.rev-card__stars { margin-bottom: 16px; font-size: 14px; letter-spacing: 0.1em; color: var(--accent); }
.rev-card__quote {
  font-family: var(--font-display); font-style: italic;
  font-size: 17px; line-height: 1.6; color: var(--fg); margin: 0 0 22px;
}
.rev-card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rev-card__name {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--fg);
}
.rev-card__detail {
  font-family: var(--font-body); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint);
}

/* ---- Interior page responsive ---- */
@media (max-width: 980px) { .rev-masonry { column-count: 2; } }
@media (max-width: 760px) {
  .page-hero__inner { padding-top: 132px; padding-bottom: 64px; }
  .page-prose__inner { padding-left: 24px; padding-right: 24px; }
  .cta-band__inner { padding: 56px 24px; }
}
@media (max-width: 620px) { .rev-masonry { column-count: 1; } }


/* =========================================================================
   CONTACT PAGE (page-contact.php) from contact-page.jsx
   Editorial dark hero over the skyline + two-clinic locations with the real
   CF7 enquiry form, keyless Google map embeds, the shared .ba teaser, and a
   dark gold-button CTA band. Additive block: namespaced .contactx-* only,
   reusing .btn / .btn--gold / .btn-link / .img-frame / .eyebrow / .display
   and the :root tokens. No global or :root changes.
   ========================================================================= */

/* ---- Hero (dark, full-bleed skyline) ---- */
.contactx-hero { position: relative; min-height: min(58vh, 560px); overflow: hidden; background: #0c1f23; border-bottom: 1px solid var(--line); }
.contactx-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.contactx-hero__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,22,26,0.86) 0%, rgba(8,22,26,0.6) 38%, rgba(8,22,26,0.28) 70%, rgba(8,22,26,0.12) 100%); }
.contactx-hero__rail { position: absolute; top: 174px; left: 0; width: 4px; height: 84px; background: var(--gold); z-index: 2; }
.contactx-hero__inner { position: relative; z-index: 2; min-height: min(58vh, 560px); display: flex; align-items: center; padding-top: 150px; padding-bottom: 80px; }
.contactx-hero__content { max-width: 760px; color: #fff; }
.contactx-crumb { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 34px; }
.contactx-crumb a { color: rgba(255,255,255,0.65); text-decoration: none; }
.contactx-crumb a:hover { color: #fff; }
.contactx-crumb span { margin: 0 12px; opacity: 0.5; }
.contactx-crumb em { color: #fff; font-style: normal; }
.contactx-hero__eyebrow { color: rgba(255,255,255,0.72); letter-spacing: 0.26em; margin-bottom: 22px; }
.contactx-hero__title { font-size: clamp(48px, 7vw, 104px); margin: 0; line-height: 0.98; letter-spacing: -0.025em; color: #fff; }
.contactx-hero__lede { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.82); max-width: 540px; margin: 30px 0 0; }

/* ---- Locations + enquiry form ---- */
.contactx-locations__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(48px, 6vw, 96px); align-items: start; }
.contactx-locations__col { display: flex; flex-direction: column; gap: 48px; }
.contactx-locations__head .eyebrow { margin-bottom: 16px; color: var(--accent); }
.contactx-locations__title { font-size: clamp(34px, 4vw, 56px); margin: 0; line-height: 1.02; }

.contactx-clinic { padding-top: 28px; border-top: 1px solid var(--line-strong); }
.contactx-clinic__eyebrow { color: var(--fg-faint); margin-bottom: 16px; }
.contactx-clinic__name { font-size: clamp(30px, 3.2vw, 42px); margin: 0 0 20px; }
.contactx-clinic__addr { font-style: normal; font-size: 16px; line-height: 1.7; color: var(--fg); margin-bottom: 22px; }
.contactx-clinic__meta { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); margin-bottom: 26px; }
.contactx-clinic__cell { padding: 16px 18px 16px 0; }
.contactx-clinic__cell + .contactx-clinic__cell { padding: 16px 0 16px 18px; border-left: 1px solid var(--line); }
.contactx-clinic__label { font-size: 10px; color: var(--fg-faint); margin: 0 0 6px; }
.contactx-clinic__val { font-family: var(--font-display); font-size: 22px; color: var(--fg); text-decoration: none; }
a.contactx-clinic__val:hover { color: var(--accent); }
.contactx-clinic__val--muted { color: var(--fg-muted); }

/* Enquiry form card (light bone surface; styles the shared CF7 form for light) */
.contactx-form { background: var(--bg-alt); border: 1px solid var(--line); padding: clamp(28px, 3vw, 48px); align-self: start; }
.contactx-form__eyebrow { margin-bottom: 14px; color: var(--accent); }
.contactx-form__title { font-size: clamp(30px, 3.4vw, 46px); margin: 0 0 32px; }
.contactx-form__fallback { font-size: 16px; line-height: 1.7; color: var(--fg-muted); margin: 0; }
.contactx-form__fallback a { color: var(--accent); text-decoration: none; }
.contactx-form .wpcf7 label { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 8px; }
.contactx-form .wpcf7-form-control-wrap { display: block; }
.contactx-form input.wpcf7-form-control:not([type=submit]),
.contactx-form select.wpcf7-form-control,
.contactx-form textarea.wpcf7-form-control {
  width: 100%; background: #fff; border: 1px solid var(--line-strong);
  padding: 13px 14px; font: inherit; color: var(--fg); outline: none;
  border-radius: 0; transition: border-color .2s ease;
}
.contactx-form textarea.wpcf7-form-control { min-height: 120px; resize: vertical; }
.contactx-form input:focus, .contactx-form select:focus, .contactx-form textarea:focus { border-color: var(--accent); }
.contactx-form input.wpcf7-submit {
  width: 100%; margin-top: 8px; background: var(--accent); color: #fff;
  border: 1px solid var(--accent); padding: 16px 22px;
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
  border-radius: 0; transition: background .25s ease, color .25s ease;
}
.contactx-form input.wpcf7-submit:hover { background: var(--bg-dark); color: #fff; }

/* ---- Maps (keyless embeds, one per clinic) ---- */
.contactx-maps { background: var(--bg-alt); }
.contactx-maps__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(36px, 4vw, 64px); }
.contactx-map__head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 0 0 16px; border-bottom: 1px solid var(--line-strong); }
.contactx-map__city { color: var(--fg-faint); margin: 0 0 8px; }
.contactx-map__addr { font-size: 15px; line-height: 1.6; color: var(--fg); margin: 0; }
.contactx-map__link { font-size: 10px; white-space: nowrap; }
.contactx-map__frame { aspect-ratio: 16 / 10; margin-top: 20px; border: 1px solid var(--line); }
.contactx-map__frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.15) contrast(1.02); }

/* ---- CTA band (dark, gold button) ---- */
.contactx-cta { position: relative; background: var(--bg-dark); color: #fff; overflow: hidden; }
.contactx-cta__inner { position: relative; padding: 88px 48px; text-align: center; }
.contactx-cta__eyebrow { color: rgba(255,255,255,0.55); margin-bottom: 24px; }
.contactx-cta__title { font-size: clamp(32px, 4vw, 54px); margin: 0 0 44px; color: #fff; }
.contactx-cta__title .display-italic { color: var(--gold); }
.contactx-cta__actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.contactx-cta__btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.6); }
.contactx-cta__btn-outline:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .contactx-locations__grid { grid-template-columns: 1fr; gap: 48px; }
  .contactx-maps__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .contactx-clinic__meta { grid-template-columns: 1fr; }
  .contactx-clinic__cell + .contactx-clinic__cell { border-left: 0; border-top: 1px solid var(--line); padding: 16px 18px 16px 0; }
  .contactx-cta__inner { padding: 64px 24px; }
}
/* ===== end contact page block =========================================== */

/* =========================================================================
   BLOG INDEX (home.php) — from blog-index-page.jsx
   ADDITIVE, self-contained block. Text-first editorial reading list: light
   masthead, sticky category filter, hairline-divided post rows (optional
   thumbnail / video badge), native pagination. Reuses the shared :root tokens
   and primitives (.container-wide / .display / .img-frame). Fonts stay within
   the theme's Cormorant + Inter set (no mono), per the locked art direction.
   ========================================================================= */

/* ---- Masthead (light, on Bone) ---- */
.journal-hero { background: var(--bg-alt); border-bottom: 1px solid var(--line); padding: 124px 0 56px; }
.journal-hero__crumb { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 26px; }
.journal-hero__crumb a { color: var(--fg-faint); text-decoration: none; transition: color .25s ease; }
.journal-hero__crumb a:hover { color: var(--accent); }
.journal-hero__crumb .sep { margin: 0 12px; opacity: 0.5; }
.journal-hero__crumb em { color: var(--fg); font-style: normal; }
.journal-hero__title { font-size: clamp(44px, 5.4vw, 76px); margin: 0; line-height: 1; letter-spacing: -0.02em; color: var(--fg); }
.journal-hero__lede { font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--fg-muted); margin: 22px 0 0; max-width: 560px; }

/* ---- Sticky category filter ---- */
.journal-filter { position: sticky; top: 98px; z-index: 20; background: color-mix(in oklab, var(--bg) 94%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.journal-filter__inner { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 14px 0; }
.journal-filter__tab { appearance: none; background: none; border: none; padding: 8px 14px; cursor: pointer; position: relative; font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); transition: color .2s ease; }
.journal-filter__tab::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 1px; background: transparent; transition: background .2s ease; }
.journal-filter__tab:hover { color: var(--fg-muted); }
.journal-filter__tab.is-active { color: var(--accent); }
.journal-filter__tab.is-active::after { background: var(--accent); }

/* ---- Post list ---- */
.journal-list { background: #fff; padding: 32px 0 80px; }
.journal-list__rows { border-top: 1px solid var(--line); }
.journal-row[hidden] { display: none; }

.blog-row { display: grid; grid-template-columns: 150px 1fr; gap: 40px; align-items: start; padding: 40px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--fg); }
.blog-row--media { grid-template-columns: 150px 1fr 220px; }

/* Left rail — date + category */
.blog-row__rail { padding-top: 6px; }
.blog-row__date { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 12px; }
.blog-row__cat { font-family: var(--font-body); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }

/* Main — title + excerpt + read/watch */
.blog-row__title { font-size: clamp(26px, 2.4vw, 32px); font-weight: 400; margin: 0; line-height: 1.12; letter-spacing: -0.015em; color: var(--fg); transition: color .2s ease; }
.journal-row:first-child .blog-row__title { font-size: clamp(30px, 3vw, 40px); }
.blog-row:hover .blog-row__title { color: var(--accent); }
.blog-row__excerpt { font-family: var(--font-body); font-size: 15.5px; line-height: 1.65; color: var(--fg-muted); margin: 14px 0 0; max-width: 620px; }
/* Constrain long post titles to the excerpt column width so the index stays balanced */
.blog-row__title { max-width: 620px; }
.blog-row__meta { display: flex; align-items: center; gap: 16px; margin-top: 20px; font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); }
.blog-row__author { color: var(--fg-muted); }
.blog-row__sep { width: 1px; height: 11px; background: var(--line-strong); }
.blog-row__more { color: var(--accent); display: inline-flex; align-items: center; gap: 8px; }
.blog-row__more .arrow { transition: transform .3s ease; }
.blog-row:hover .blog-row__more .arrow { transform: translateX(4px); }

/* Optional thumbnail — photo or video poster */
.blog-row__thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--bg-dark); border: 1px solid var(--line); outline: 1px solid transparent; outline-offset: -1px; transition: outline-color .25s ease; }
.blog-row:hover .blog-row__thumb { outline-color: var(--accent); }
.blog-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.9) contrast(0.98); transform: scale(1); transition: filter .4s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.blog-row:hover .blog-row__thumb img { filter: saturate(1) contrast(1); transform: scale(1.04); }
.blog-row__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.85); background: rgba(8,22,26,0.35); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; }

/* Empty state */
.journal-empty { padding: 88px 0; text-align: center; font-family: var(--font-display); font-weight: 300; font-size: 26px; color: var(--fg-muted); }

/* ---- Pagination ---- */
.journal-pager { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 48px; }
.journal-pager__edge { min-width: 90px; }
.journal-pager__edge--next { text-align: right; }
.journal-pager__edge a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid var(--line-strong); transition: color .25s ease, border-color .25s ease; }
.journal-pager__edge a:hover { color: var(--accent); border-color: var(--accent); }
.journal-pager__edge a .arrow { transition: transform .3s ease; }
.journal-pager__edge--prev a:hover .arrow { transform: translateX(-4px); }
.journal-pager__edge--next a:hover .arrow { transform: translateX(4px); }
.journal-pager__nums { display: flex; align-items: center; border: 1px solid var(--line); }
.journal-pager__nums .page-numbers { display: flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0 6px; border-left: 1px solid var(--line); font-family: var(--font-body); font-size: 12px; letter-spacing: 0.1em; color: var(--fg-muted); text-decoration: none; transition: background .2s ease, color .2s ease; }
.journal-pager__nums .page-numbers:first-child { border-left: none; }
.journal-pager__nums a.page-numbers:hover { background: var(--bg-alt); color: var(--accent); }
.journal-pager__nums .page-numbers.current { background: var(--accent); color: #fff; }
.journal-pager__nums .page-numbers.dots { color: var(--fg-faint); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .journal-hero { padding-top: 104px; }
  .journal-filter { top: 80px; }
}
@media (max-width: 860px) {
  .blog-row, .blog-row--media { grid-template-columns: 1fr; gap: 18px; }
  .blog-row__thumb { order: -1; max-width: 320px; }
}
@media (max-width: 560px) {
  .journal-pager { flex-wrap: wrap; justify-content: center; }
  .journal-pager__edge { min-width: 0; text-align: center; }
}

/* =========================================================================
   NAV — desktop third-level flyout + designed mobile accordion panel
   (additive; see template-parts/mobile-menu.php + theme.js)
   ========================================================================= */

/* ---- Desktop: third-level flyout off a dropdown parent ---- */
.site-nav__dropdown li.has-flyout { position: relative; }
/* Parent flyout link: flex row so the caret stays vertically centered even when the label wraps */
.site-nav__dropdown li.has-flyout > a { display: flex; align-items: center; justify-content: space-between; }
.site-nav__caret--right {
  margin-left: 8px; transform: rotate(-45deg);
  border-width: 0 1.5px 1.5px 0; opacity: .6; float: none; flex: none;
}
.site-nav__flyout {
  position: absolute; top: 0; left: 100%; display: block;
  min-width: 240px; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 18px 48px rgba(8,22,26,0.14);
  padding: 8px 0; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateX(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 61;
}
.site-nav__dropdown li.has-flyout:hover > .site-nav__flyout,
.site-nav__dropdown li.has-flyout:focus-within > .site-nav__flyout {
  opacity: 1; visibility: visible; transform: translateX(0);
}
.site-nav__flyout li { margin: 0; border: 0; }
.site-nav__flyout a {
  display: block; padding: 9px 22px; font-family: var(--font-body);
  font-size: 12.5px; font-weight: 400; letter-spacing: 0.02em; text-transform: none;
  color: var(--fg) !important; opacity: 1 !important; white-space: nowrap;
}
.site-nav__flyout a:hover { background: var(--bg-alt); color: var(--accent) !important; }

/* =========================================================================
   MOBILE MENU — full-screen accordion panel (precision_nav_tree 'top')
   ========================================================================= */
.mm {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s ease, visibility .4s ease;
}
.mm.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.mm__panel {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  background: #0c1f23; color: #f3efe7;
  transform: translateY(-12px); transition: transform .4s ease;
}
.mm.is-open .mm__panel { transform: translateY(0); }

/* Header */
.mm__header {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 14px;
}
.mm__logo { height: 52px; width: auto; filter: brightness(0) invert(1); opacity: 0.92; }
.mm__close {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.13); background: transparent; color: #f3efe7;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .25s ease, border-color .25s ease;
}
.mm__close:hover { background: rgba(255,255,255,0.06); border-color: rgba(212,162,90,0.5); }
.mm__hairline {
  flex-shrink: 0; height: 1px; margin: 0 22px;
  background: linear-gradient(to right, var(--gold), transparent 70%); opacity: 0.6;
}

/* Body (scrolls) */
.mm__body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 20px; }
.mm__eyebrow { display: block; padding: 16px 26px 6px; font-size: 9.5px; letter-spacing: 0.3em; color: rgba(243,239,231,0.4); }
.mm__list { list-style: none; margin: 0; padding: 0; }

/* Rows */
.mm__row {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: transparent; border: 0; text-align: left; text-decoration: none;
  color: #f3efe7; transition: background .25s ease;
}
.mm__row--l0 { padding: 15px 26px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.mm__row--l1, .mm__row--l2, .mm__row--l3 { padding: 12px 26px; }
.mm__row-label { display: flex; align-items: baseline; gap: 13px; flex: 1; min-width: 0; }
.mm__num {
  font-family: var(--font-body); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.16em; color: var(--gold); opacity: 0.85; min-width: 16px;
}
.mm__text { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.01em; line-height: 1.16; }
.mm__row--l0 .mm__text { font-size: 22px; }
.mm__row--l1 .mm__text { font-size: 20px; }
.mm__row--l2 .mm__text,
.mm__row--l3 .mm__text { font-size: 17px; }

/* Indent + left hairline on nested rows */
.mm__item--l1 > .mm__row,
.mm__item--l1 > .mm__overview { padding-left: 44px; border-left: 1px solid rgba(255,255,255,0.07); }
.mm__item--l2 > .mm__row,
.mm__item--l2 > .mm__overview { padding-left: 62px; border-left: 1px solid rgba(255,255,255,0.07); }
.mm__item--l3 > .mm__row,
.mm__item--l3 > .mm__overview { padding-left: 80px; border-left: 1px solid rgba(255,255,255,0.07); }

/* Toggle open state: gold wash + active left rule */
.mm__item.is-open > .mm__row--toggle { background: rgba(212,162,90,0.05); }
.mm__item.is-open.mm__item--l1 > .mm__row,
.mm__item.is-open.mm__item--l2 > .mm__row { border-left-color: rgba(212,162,90,0.35); }

/* Chevron */
.mm__chev {
  flex-shrink: 0; width: 8px; height: 8px;
  border: solid var(--gold); border-width: 0 1.4px 1.4px 0;
  transform: rotate(-45deg); transition: transform .3s ease;
}
.mm__item.is-open > .mm__row--toggle .mm__chev { transform: rotate(45deg); }
.mm__chev--static { transform: rotate(-45deg); }

/* Expandable group (grid 0fr->1fr handles nested heights) */
.mm__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; background: #0a1a1e; }
.mm__item.is-open > .mm__sub { grid-template-rows: 1fr; }
.mm__sub-inner { overflow: hidden; min-height: 0; }

/* Overview link (parent's own destination) */
.mm__overview {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 26px; text-decoration: none;
}
.mm__overview span:first-child {
  font-family: var(--font-body); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}

/* Footer */
.mm__footer {
  flex-shrink: 0; padding: 18px 26px 30px;
  border-top: 1px solid rgba(255,255,255,0.13);
  background: linear-gradient(to top, rgba(0,0,0,0.25), transparent);
}
.mm__cta.btn { width: 100%; justify-content: center; padding: 15px 20px; }
.mm__call { display: flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; margin: 16px 0 18px; }
.mm__call-label { font-size: 8.5px; letter-spacing: 0.22em; color: rgba(243,239,231,0.4); }
.mm__call-num { font-size: 20px; color: #f3efe7; white-space: nowrap; }
.mm__locations { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.07); }
.mm__loc-city { font-size: 8px; letter-spacing: 0.2em; color: var(--gold); margin-bottom: 5px; }
.mm__loc-addr { font-family: var(--font-body); font-size: 11px; line-height: 1.4; color: rgba(243,239,231,0.62); }

/* Body scroll lock while the panel is open */
body.mm-open { overflow: hidden; }

/* The hamburger now opens the .mm panel; retire the old reflow slide-in menu. */
@media (max-width: 900px) {
  .site-nav__menu { display: none; }
}

/* =========================================================================
   PROCEDURES INDEX POLISH (page-procedures.php) — the Signature Four cards
   are now single <a> wrappers (whole card clickable, no nested links), so
   restore the link reset the old <article> never needed and give the card
   the same hover affordance as .procidx-menu__card. Additive + scoped to
   .procidx-feat; reuses existing tokens (.btn-link, --bg-alt, --accent).
   ========================================================================= */
a.procidx-feat__card { text-decoration: none; color: inherit; transition: background .25s ease; }
a.procidx-feat__card:hover { background: var(--bg-alt); }
a.procidx-feat__card:hover .btn-link { color: var(--accent); border-color: var(--accent); }
a.procidx-feat__card:hover .btn-link .arrow { transform: translateX(4px); }

/* =========================================================================
   BEFORE/AFTER DETAIL — mobile polish (single-before_after.php)
   ADDITIVE block, scoped to the page's .badet-* classes only; desktop
   (>760px) is untouched. On mobile the stage runs near full-bleed (cancels
   the 24px container gutter), the overlay arrows that covered the photos
   are removed in favor of touch swipe (handled by the template's inline
   script), the hint copy switches to the swipe wording, and the thumbnail
   rail sits tighter against the case notes.
   ========================================================================= */
.badet-stage__hint--mobile { display: none; }
@media (max-width: 760px) {
  /* Near full-bleed stage: pull across the 24px .container-wide gutter */
  .badet-stage { margin-left: -24px; margin-right: -24px; }
  .badet-stage__frame { border-left: 0; border-right: 0; }

  /* Swipe replaces the overlay arrows that blocked the photos */
  .badet-arrow { display: none; }
  .badet-stage__hint--desktop { display: none; }
  .badet-stage__hint--mobile { display: inline; }

  /* Tighter seam between the thumbnail grid and the case-notes text */
  .badet-viewer.section { padding-bottom: 36px; }
  .badet-notes.section { padding-top: 44px; }
  .badet-rail { margin-top: 24px; }
}
/* ===== end before/after detail mobile block ============================== */

/* =========================================================================
   REVIEWS PAGE POLISH (page-reviews.php) - inline video reviews
   Additive block scoped to the Reviews page card classes only. A standard
   .rev-card can now carry an optional video that plays INLINE: a click-to-
   play thumbnail (.rev-card__video-thumb, the video's own poster) swaps to
   the real player (.rev-card__video-frame, an iframe or native video).
   Reuses the shared :root tokens; no global or :root changes. The old
   .rev-feature card is no longer rendered by the template.
   ========================================================================= */
.rev-card__video {
  position: relative; aspect-ratio: 16 / 9;
  margin: 0 0 22px; overflow: hidden;
  background: #0c1f23; /* dark video surface, matches .rev-feature / hero */
}
.rev-card--video-only .rev-card__video { margin-bottom: 18px; }
.rev-card__video-thumb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; padding: 0; border: 0; background: transparent;
  cursor: pointer;
}
.rev-card__video-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.rev-card__video-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(8, 22, 26, 0.06) 0%, rgba(8, 22, 26, 0.14) 60%, rgba(8, 22, 26, 0.45) 100%);
}
.rev-card__video-play {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 26px rgba(8, 22, 26, 0.45);
  transition: background .25s ease, transform .25s ease;
}
.rev-card__video-thumb:hover .rev-card__video-play,
.rev-card__video-thumb:focus-visible .rev-card__video-play {
  background: var(--gold);
  transform: translate(-50%, -50%) scale(1.06);
}
.rev-card__video-tri {
  width: 0; height: 0; margin-left: 3px;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
  border-left: 14px solid #0c1f23; transition: border-left-color .25s ease;
}
.rev-card__video-thumb:hover .rev-card__video-tri,
.rev-card__video-thumb:focus-visible .rev-card__video-tri { border-left-color: #1a1208; }
.rev-card__video-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; border: 0; background: #000;
}

/* ==================================================================
   WOOCOMMERCE PAGES — image-size guard
   woocommerce-layout.css ships `.woocommerce-page img { height: auto;
   max-width: 100% }`, which out-specifies the theme's single-class
   image rules and inflates the chrome images to natural size (the
   2378px logo-mark "giant leaf" over the cart). Re-assert each
   explicit size at higher specificity. theme.css loads after the
   WooCommerce styles, so equal-or-higher specificity here wins.
   ================================================================== */
.woocommerce-page .site-nav__mark { height: 64px; }
.woocommerce-page .site-nav__type { height: 74px; }
.woocommerce-page .mm__logo { height: 52px; }
.woocommerce-page .page-hero__mark { display: none; }
.woocommerce-page .contact__bg { height: 100%; }

@media (max-width: 900px) {
  .woocommerce-page .site-nav__type,
  .woocommerce-page .site-nav.is-transparent .site-nav__type { height: 56px; }
  .woocommerce-page .site-nav__mark { height: 48px; }
}

/* ============================================================
   Responsive content embeds (cross-device fix)
   Legacy YouTube/photo embeds were wrapped in inline
   style="float:left" with a fixed 560x315 iframe, which
   overflows on mobile. Target ONLY the inline-style floats
   (the "hair-float" class embeds are left as-is) and make
   them un-floated, responsive 16:9, centered.
   ============================================================ */
.procd-article [style*="float"],
.page-prose [style*="float"],
.page-prose__inner [style*="float"],
.blogpost-prose [style*="float"],
.entry-content [style*="float"] {
  float: none !important;
  width: auto !important;
  max-width: 560px !important;
  margin: 1.5rem auto !important;
}
.procd-article [style*="float"] iframe,
.page-prose [style*="float"] iframe,
.blogpost-prose [style*="float"] iframe,
.entry-content [style*="float"] iframe {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 0;
}
.procd-article [style*="float"] img,
.page-prose [style*="float"] img,
.blogpost-prose [style*="float"] img,
.entry-content [style*="float"] img {
  display: block;
  width: 100% !important;
  height: auto !important;
}
/* Safety: no content image/iframe ever overflows the viewport */
.page-prose img, .procd-article img, .blogpost-prose img,
.page-prose iframe, .procd-article iframe, .blogpost-prose iframe { max-width: 100%; }