/* Odontología Integral y Especializada (OIYE) — shared stylesheet
   Design system: navy brand, teal accent, WhatsApp-green CTA. No carousel anywhere. */

:root {
  --navy: #0e3a5f;
  --navy-dark: #082742;
  --navy-light: #e7eef5;
  --teal: #14a3a0;
  --teal-dark: #0d7d7a;
  --whatsapp: #087a3e;
  --whatsapp-dark: #076b36;
  --ink: #1c2b36;
  --ink-soft: #4b5b68;
  --line: #dde5ea;
  --bg: #ffffff;
  --bg-soft: #f5f8fa;
  --warn-bg: #fff4e5;
  --warn-line: #f0c98a;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(14, 58, 95, 0.10);
  --shadow-sm: 0 3px 10px rgba(14, 58, 95, 0.08);
  --maxw: 1180px;
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 901px) {
  html { overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; }
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy-dark);
  line-height: 1.18;
  margin: 0 0 0.5em;
  font-weight: 600;
}
h1 { font-size: clamp(1.9rem, 1.5rem + 1.8vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2.15rem); }
h3 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.4rem); }
p { margin: 0 0 1em; color: var(--ink-soft); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.sect { padding: 64px 0; }
.sect--soft { background: var(--bg-soft); }
.sect--navy { background: var(--navy-dark); color: #fff; }
.sect--navy h2, .sect--navy h3 { color: #fff; }
.sect--navy p { color: #c9d7e2; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700;
  color: var(--teal-dark); margin: 0 0 .6em;
}
.center { text-align: center; }
.center p { margin-left: auto; margin-right: auto; }
.lede { font-size: 1.08rem; max-width: 62ch; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 0; top: 0; transform: translateY(-120%); background: var(--navy); color: #fff;
  padding: 10px 16px; z-index: 200; border-radius: 0 0 8px 0;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  padding: 14px 24px; border-radius: 999px; font-weight: 700; font-size: 1rem;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.btn--whatsapp { background: var(--whatsapp); color: #fff; }
.btn--whatsapp:hover { background: var(--whatsapp-dark); }
/* On outline buttons the WhatsApp mark keeps its brand green so the button still
   reads as "this opens WhatsApp" without a green fill behind it. */
.btn--ghost .ico-wa, .btn--ghost-invert .ico-wa { fill: var(--whatsapp); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy-light); }
.btn--ghost-invert { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost-invert:hover { background: rgba(255,255,255,.12); }
.btn--sm { padding: 10px 18px; font-size: .92rem; }
.btn--block { width: 100%; }

/* ---------- Header ---------- */
.nav {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line);
}
.nav__in { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { height: 40px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--ink);
  padding: 6px 2px; border-bottom: 2px solid transparent;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--navy); border-color: var(--teal); }
.nav__right { display: flex; align-items: center; gap: 14px; }
.nav__phone { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; color: var(--ink-soft); text-decoration: none; }
.nav__phone-full { display: none; }
.nav__phone-short { display: inline; }
.nav__toggle { display: none; }
.nav__menu { display: none; }
@media (max-width: 880px) {
  .nav__links { display: none; }
  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
    border-radius: 10px; border: 1px solid var(--line); background: #fff;
  }
  .nav__toggle svg { width: 22px; height: 22px; }
  .nav__menu {
    position: absolute; left: 0; right: 0; top: 100%; background: #fff;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .nav__menu.is-open { display: block; }
  .nav__menu ul { list-style: none; margin: 0; padding: 10px 20px 18px; display: grid; gap: 4px; }
  .nav__menu a { display: block; padding: 10px 6px; text-decoration: none; font-weight: 600; color: var(--ink); border-radius: 8px; }
  .nav__menu a:hover { background: var(--navy-light); }
}
@media (min-width: 720px) { .nav__phone-full { display: inline; }
  .nav__phone-short { display: none; } }

/* ---------- Hero ---------- */
.hero { padding: 96px 0 108px; background: linear-gradient(180deg, var(--navy-light) 0%, #fff 78%); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 68px; align-items: center; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: 40px; } }
.hero__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.hero h1 { margin-bottom: 0.55em; }
.hero h2.lede { margin-bottom: 1.5em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 18px; }
.hero__note { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.chips { list-style: none; margin: 20px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li {
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px;
  font-size: .86rem; font-weight: 600; color: var(--navy-dark);
}
.chips li::before { content: "✓ "; color: var(--teal-dark); }

@media (max-width: 640px) {
  .hero { padding: 48px 0 56px; }
  .hero__grid > div:first-child { text-align: center; }
  .hero h1 { font-size: 1.6rem; line-height: 1.28; }
  .hero .eyebrow { display: block; }
  .hero__cta { justify-content: center; }
  .chips { justify-content: center; }
}

/* ---------- Service hero (inner pages) ---------- */
.svc-hero { padding: 48px 0 56px; background: linear-gradient(180deg, var(--navy-light) 0%, #fff 85%); }
.svc-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .svc-hero__grid { grid-template-columns: 1fr; } .svc-hero__grid > .hero__media { order: -1; } }
.breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 18px; font-size: .84rem; color: var(--ink-soft); }
.breadcrumb a { text-decoration: none; color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb li:not(:last-child)::after { content: "›"; margin-left: 6px; color: #b7c3cc; }

/* ---------- Specialty grid (homepage) ---------- */
.grid-7 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .grid-7 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-7 { grid-template-columns: 1fr; } }
.svc-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease;
}
.svc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.svc-card__media { aspect-ratio: 16/9; overflow: hidden; background: var(--navy-light); }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; }
.svc-card__body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.svc-card__body h3 { margin-bottom: .35em; font-size: 1.08rem; }
.svc-card__body p { font-size: .92rem; margin-bottom: 14px; flex: 1; }
.svc-card__link { font-weight: 700; font-size: .88rem; color: var(--teal-dark); }

/* ---------- Cards / benefits / steps ---------- */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 720px) { .card-grid { grid-template-columns: 1fr; } }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .card-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .card-grid--3 { grid-template-columns: 1fr; } }
.info-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.info-card h3 { font-size: 1.02rem; margin-bottom: .3em; }
.info-card p { font-size: .92rem; margin: 0; }
.icon-badge {
  width: 42px; height: 42px; border-radius: 12px; background: var(--navy-light);
  color: var(--navy); display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.icon-badge svg { width: 22px; height: 22px; fill: currentColor; }

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.steps li { counter-increment: step; position: relative; padding-left: 54px; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px; width: 40px; height: 40px;
  border-radius: 50%; background: var(--teal); color: #fff; font-family: var(--font-head); font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.steps h3 { margin-bottom: .25em; font-size: 1rem; }
.steps p { font-size: .92rem; margin: 0; }

/* ---------- Trust bar ---------- */
.trust-bar { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: center; padding: 22px 0; }
.trust-bar__item { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; color: var(--ink-soft); }
.trust-bar__item svg { width: 24px; height: 24px; fill: var(--teal-dark); flex: none; }
.trust-bar__item .ico-wa { fill: var(--whatsapp-dark); }

/* ---------- Doctor / team ---------- */
.doctor {
  display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center;
}
@media (max-width: 760px) { .doctor { grid-template-columns: 1fr; } }
.doctor__photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.doctor__name { font-family: var(--font-head); font-size: 1.4rem; color: var(--navy-dark); margin: 0 0 .2em; }
.doctor__role { color: var(--teal-dark); font-weight: 700; font-size: .92rem; margin: 0 0 .8em; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 4px; font-weight: 700; color: var(--navy-dark); font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 1.5rem; color: var(--teal-dark); flex: none; font-weight: 400;
  transition: transform .15s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 4px 18px; margin: 0; font-size: .95rem; }

/* ---------- Assessment widget (gum self-check) ---------- */
.check {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px 26px; max-width: 460px; margin-left: auto;
}
@media (max-width: 900px) { .check { margin: 0; max-width: none; } }
.check__top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.check__title { font-family: var(--font-head); font-size: 1.15rem; margin: 0; color: var(--navy-dark); }
.check__sub { font-size: .86rem; color: var(--ink-soft); margin: 0 0 16px; }
.check__list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.check__list label {
  display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; color: var(--ink);
  cursor: pointer; padding: 4px 0;
}
.check__list input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--teal); flex: none; }
.check__result {
  border-radius: var(--radius-sm); padding: 14px 16px; font-size: .9rem; font-weight: 600; margin-bottom: 16px;
  transition: background-color .2s ease, color .2s ease;
}
.check.is-ok .check__result { background: #e6f6ee; color: #1a7a4c; }
.check.is-warn .check__result { background: var(--warn-bg); color: #93600a; }
.check.is-alert .check__result { background: #fdeaea; color: #a12727; }

/* ---------- Map ---------- */
.map-frame {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  aspect-ratio: 16/9; background: var(--navy-light);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Closing CTA ---------- */
.cta-close { text-align: center; }
.cta-close .btn { margin: 0 auto; }

/* ---------- Footer ---------- */
.footer { background: var(--navy-dark); color: #c9d7e2; padding: 48px 0 26px; font-size: .9rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; margin-bottom: 30px; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand { width: 100%; text-align: center; justify-self: center; }
.footer__brand img { display: block; height: 64px !important; width: auto !important; max-width: 100%; margin: 0 auto 16px; }
.footer__brand p { margin-inline: auto; }
.footer h3 { color: #fff; font-family: var(--font-body); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer a { color: #c9d7e2; text-decoration: none; }
.footer a:hover { color: #fff; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.14); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .82rem; color: #93a7b7; }
.footer__bottom a { color: #93a7b7; }

/* ---------- WhatsApp floating button ---------- */
.fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 150; width: 60px; height: 60px;
  border-radius: 50%; background: var(--whatsapp); color: #fff; display: flex; align-items: center;
  justify-content: center; text-decoration: none;
}
.fab svg { width: 30px; height: 30px; fill: #fff; }
.fab:hover { background: var(--whatsapp-dark); }

/* ---------- Pago con tarjeta (paybar) ---------- */
.paybar {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: -6px 0 16px; padding: 9px 14px 9px 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.paybar__label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .84rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap;
}
.paybar__label svg { width: 18px; height: 18px; fill: var(--teal-dark); flex: none; }
.paybar__cards { display: inline-flex; align-items: center; gap: 8px; }
.paycard {
  width: 46px; height: 30px; border-radius: 7px; display: block; flex: none;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(14, 58, 95, .10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.paybar:hover .paycard { box-shadow: 0 3px 8px rgba(14, 58, 95, .14); }
.paycard:hover { transform: translateY(-2px); }
.paybar--navy {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); box-shadow: none;
}
.paybar--navy .paybar__label { color: #dbe6ef; }
.paybar--navy .paybar__label svg { fill: #7fe3e0; }
/* Block-level so it always takes its own line above the CTA -- as an inline-flex it
   flowed alongside the button on wide screens and competed with it. */
.paybar--center { display: flex; width: fit-content; margin: 0 auto 22px; }
/* In the heroes the pill is inline-flex, so it follows the surrounding text-align --
   centered with the rest of the home hero on phones, left-aligned on inner pages. */
/* Phones: the pill must stay a single row -- wrapped onto two lines it stretches
   almost edge to edge and stops reading as one compact badge. Everything shrinks
   together (shorter label, smaller cards, tighter gaps) so it fits even at 320px. */
.paybar__txt--short { display: none; }
@media (max-width: 560px) {
  .paybar { flex-wrap: nowrap; gap: 9px; padding: 7px 11px 7px 9px; }
  .paybar__label { font-size: .8rem; }
  .paybar__label svg { width: 16px; height: 16px; }
  .paybar__txt--full { display: none; }
  .paybar__txt--short { display: inline; }
  .paybar__cards { gap: 6px; }
  .paycard { width: 40px; height: 26px; border-radius: 6px; }
}

/* Phones: the hero eyebrow (brand name) and the location/hours note each have to
   stay on a single line -- wrapped they read as two unrelated fragments. Same
   full/short swap the paybar uses. */
.swap-short { display: none; }
@media (max-width: 560px) {
  .swap-full { display: none; }
  .swap-short { display: inline; }
  .hero__note { font-size: .84rem; }
  .hero .eyebrow { letter-spacing: .05em; }
}

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0; }
.section-title { max-width: 640px; margin: 0 auto 42px; text-align: center; }
.section-title p { margin: 0 auto; }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .two-up { grid-template-columns: 1fr; } }
.two-up figure { margin: 0; }
.two-up figcaption { text-align: center; font-weight: 700; font-size: .88rem; margin-top: 8px; color: var(--navy-dark); }
.pill {
  display: inline-block; background: var(--teal-dark); color: #fff; font-size: .74rem; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
}
noscript .fab, noscript .nav__toggle { display: none; }

/* Hero variant: the team cut-out sits on white so it reads as a card on the
   tinted hero gradient rather than a pasted rectangle. */
.hero__media--team { background: #fff; }

/* ---------- Brand mark ----------
   Heads the column beside the gum self-check. The rule sits below it, dividing
   the logo from the heading that follows. */
.brand-mark {
  margin: 0 0 28px; padding-bottom: 26px; border-bottom: 1px solid var(--line);
  text-align: center;
}
.brand-mark img { width: 330px; max-width: 100%; height: auto; margin: 0 auto; }
.brand-mark figcaption {
  margin: 12px auto 0; font-size: .86rem; color: var(--ink-soft); max-width: 42ch;
}
@media (max-width: 900px) {
  .brand-mark { margin-bottom: 24px; padding-bottom: 22px; }
  .brand-mark img { width: 260px; }
}

/* ---------- Team photo (real clinic team) ----------
   The source photo is cut out on white, so the frame is white too and the team
   reads as standing inside the card rather than on a pasted rectangle. */
.team-figure { margin: 0; }
.team-figure__frame {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.team-figure__frame img { width: 100%; height: auto; display: block; }
.team-figure figcaption {
  margin-top: 12px; font-size: .86rem; color: var(--ink-soft); text-align: center;
}

/* ---------- Location media (fachada + map) ----------
   Stacked on mobile (unchanged). From 901px up — the same point .hero__grid
   switches to two columns — they sit side by side instead of one on top of the
   other, which shortens this column enough that align-items:center on
   .hero__grid actually centers the text beside it instead of just top-aligning it. */
.location-media { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 901px) {
  .location-media { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 20px; }
}

/* ---------- Photo gallery (consultorio) ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 880px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }
.gallery figure { margin: 0; }
.gallery__media {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); background: var(--navy-light); aspect-ratio: 16 / 9;
}
.gallery__media img { width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption {
  margin-top: 11px; font-size: .88rem; font-weight: 600; color: var(--navy-dark);
}
.gallery figcaption span { display: block; font-weight: 400; color: var(--ink-soft); font-size: .84rem; }

/* ---------- Before / after cases ---------- */
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 820px) { .cases { grid-template-columns: 1fr; } }
.case {
  margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.case__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); }
.case__side { position: relative; background: var(--navy-light); }
.case__side img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.case__tag {
  position: absolute; top: 9px; left: 9px; background: rgba(8, 39, 66, .84); color: #fff;
  font-size: .67rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
.case__tag--after { background: var(--teal-dark); }
.case figcaption { padding: 15px 18px 17px; font-size: .9rem; color: var(--ink-soft); }
.case figcaption strong { display: block; color: var(--navy-dark); font-size: .95rem; margin-bottom: 3px; }
.media-note {
  font-size: .82rem; color: var(--ink-soft); text-align: center; margin: 24px auto 0; max-width: 68ch;
}