/* Fonts are served from this site rather than Google Fonts, so a page view
   sends nothing to a third party. Latin and Latin Extended subsets only
   (English and Spanish). Both families are under the SIL Open Font Licence. */
/* latin-ext */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(../media/fonts/josefin-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(../media/fonts/josefin-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../media/fonts/josefin-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../media/fonts/josefin-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../media/fonts/josefin-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../media/fonts/josefin-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../media/fonts/josefin-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../media/fonts/josefin-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../media/fonts/lato-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../media/fonts/lato-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../media/fonts/lato-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../media/fonts/lato-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../media/fonts/lato-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../media/fonts/lato-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Houston Surgical Weight Loss
   Editorial / high-contrast system: off-white ground, wide-tracked uppercase
   display type, a single brand-blue accent carrying every rule, border and CTA. */

:root {
  /* Brand palette sampled from the practice logo: blue #01a2ea, leaf #85bf34.
     --accent carries text and borders (4.8:1 on --paper); --accent-bright is
     the logo blue, too light for text but the top end of every gradient.
     Darks are navy rather than neutral black and the ground is warm ivory
     rather than grey, so the page reads richer than a flat one-colour scheme.
     --gold is a restrained metallic for small marks on dark surfaces only:
     2.3:1 on ivory, 7.5:1 on navy. */
  --accent: #0076ad;
  --accent-mid: #0093d8;
  --accent-bright: #01a2ea;
  --leaf: #7fb534;
  --gold: #c9a86a;
  --accent-soft: rgba(1, 162, 234, 0.1);

  --ink: #0b1d2a;
  --ink-2: #123044;
  --body: #47596a;
  --muted: #7d909f;
  --paper: #fbfaf6;
  --paper-2: #f3f0e8;
  --white: #ffffff;
  --black: #0b1d2a;
  --line: rgba(11, 29, 42, 0.13);

  --display: 'Josefin Sans', 'Century Gothic', 'Futura', system-ui, sans-serif;
  --sans: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --maxw: 1180px;
  --pad: clamp(18px, 5vw, 44px);
  --section: clamp(56px, 8vw, 104px);

  /* Uniform tracking scale — the whole look hangs off these. */
  --track-xl: 0.14em;
  --track-lg: 0.2em;
  --track-sm: 0.14em;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Room for the pinned menu bar, so a jump to a section is not hidden under it. */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--pad);
}
.container.narrow { max-width: 860px; }

.pad-lg { padding-block: var(--section); }
.pad-sm { padding-block: clamp(30px, 4vw, 54px); }

/* The hairline accent divider that closes almost every section. */
.rule {
  width: min(var(--maxw), 100%);
  margin: var(--section) auto 0;
  padding-inline: var(--pad);
  margin-bottom: calc(var(--section) * -1);
}
.rule::after {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent) 16%, var(--accent) 84%, transparent);
}

.mini-rule {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent) 16%, var(--accent) 84%, transparent);
  margin: clamp(44px, 6vw, 72px) 0;
}

/* ---------- Typography ---------- */

.display {
  font-family: var(--display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--track-xl);
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 26px;
  font-size: clamp(1.6rem, 5.4vw, 2.85rem);
  text-wrap: balance;
}
.display.center { text-align: center; }

/* Left-aligned headings get the accent marker bar from the reference. */
.display.bar {
  position: relative;
  padding-left: 20px;
  text-align: left;
}
.display.bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.08em;
  bottom: 0.18em;
  width: 5px;
  background: linear-gradient(to bottom, var(--accent-bright), var(--accent));
}

h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 12px;
}

h4 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  margin: 0 0 8px;
}

p { margin: 0 0 22px; }
p:last-child { margin-bottom: 0; }
p a { color: var(--accent); }
p a:hover { text-decoration: underline; }

.intro { font-size: 1.02rem; max-width: 62ch; }
.intro.center { margin-inline: auto; text-align: center; }

.fine {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--accent);
  line-height: 1.7;
}

.center-block { text-align: center; }
.center-cta { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 40px); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: var(--display);
  font-size: 0.84rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-lg);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  border: 2px solid var(--accent);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-outline { background: var(--white); color: var(--ink); }
.btn-outline:hover { background: var(--accent); color: var(--white); }

.btn-solid {
  background: linear-gradient(135deg, var(--accent-mid), var(--accent) 70%);
  color: var(--white);
  border-radius: 999px;
  border-color: transparent;
  box-shadow: 0 10px 24px -12px rgba(0, 118, 173, 0.85);
}
.btn-solid:hover {
  background: linear-gradient(135deg, var(--ink-2), var(--ink) 70%);
  border-color: transparent;
  box-shadow: 0 14px 30px -14px rgba(11, 29, 42, 0.7);
}

.btn-outline-light {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
}
.btn-outline-light:hover { background: var(--accent); color: var(--white); }

/* ---------- Header ---------- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 60;
}

.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px var(--pad) 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.brand-mark { width: 40px; height: 58px; object-fit: contain; }
.brand-name {
  font-family: var(--display);
  font-weight: 300;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-top: 8px;
  text-indent: 0.3em;
}
.brand-name-lg {
  color: var(--ink);
  font-size: clamp(1.15rem, 5.2vw, 1.7rem);
  letter-spacing: 0.28em;
  margin-top: 0;
  line-height: 1.15;
}

.nav-toggle {
  width: 48px;
  height: 40px;
  border: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  position: relative;
  transition: background 0.25s ease;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.25s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span::after { transform: translateY(-6px) rotate(-45deg); }

.nav-wrap { width: 100%; }

.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Spanish labels run ~25% longer than English, and the seven practice links
     have to share one row in both. The cap matters more than the floor: left
     fluid to 26px, Spanish needs 1,122px of a 1,092px container on a wide
     monitor and Centro del Paciente drops to the next row. */
  gap: 4px clamp(13px, 1.2vw, 20px);
}

/* Zero-height full-width flex item: forces the store and Lantern onto a row of
   their own regardless of label length. Hidden on mobile, where the nav is a
   single column and there is nothing to break. */
.nav-break {
  flex-basis: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0 !important;
}
.nav-links a {
  display: block;
  padding: 7px 2px;
  font-family: var(--display);
  font-size: 0.82rem;
  text-transform: uppercase;
  /* Slightly tighter than --track-sm: across ~85 characters of Spanish nav
     this recovers more width than any gap change can, and at 0.82rem the
     difference from 0.14em is not perceptible. */
  letter-spacing: 0.105em;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.nav-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.header-cta { width: 100%; max-width: 420px; }

/* The pinned bar, once the full header has scrolled away (see main.js): just
   the menu, with the logo and call-to-action left behind at the top. */
.site-header.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.45);
  animation: header-in 0.28s ease;
}
.site-header.is-fixed .brand,
.site-header.is-fixed .header-cta { display: none; }
.site-header.is-fixed .header-inner { padding-top: 10px; padding-bottom: 10px; gap: 0; }
/* On a phone the open menu can be taller than the screen. */
.site-header.is-fixed .nav-wrap.open { max-height: calc(100vh - 60px); overflow-y: auto; }
@keyframes header-in {
  from { transform: translateY(-100%); }
  to { transform: none; }
}
/* The language pill is fixed at top left; step it below the bar. */
.lang-switch { transition: top 0.28s ease; }
body:has(.site-header.is-fixed) .lang-switch { top: calc(var(--bar-h, 0px) + 12px); }

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

.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(520px, 82vh, 760px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  overflow: hidden;
  background: #0b0b0d;
  padding: clamp(60px, 10vh, 110px) var(--pad);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
  /* Lifts the footage out of flat grey and gives it a slow drift. */
  filter: saturate(0.72) contrast(1.12) brightness(0.82);
  transform: scale(1.08);
  animation: heroDrift 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes heroDrift {
  from { transform: scale(1.08) translate3d(0, 0, 0); }
  to   { transform: scale(1.18) translate3d(-1.5%, -2%, 0); }
}

/* Two stacked layers: a dark vignette for legibility, then a blue-to-leaf
   duotone wash so the video reads as part of the brand, not stock footage. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 85% at 50% 42%, rgba(7, 22, 32, 0.32) 0%, rgba(7, 22, 32, 0.62) 62%, rgba(5, 16, 24, 0.86) 100%),
    linear-gradient(to bottom, rgba(5, 16, 24, 0.58) 0%, rgba(7, 22, 32, 0.16) 34%, rgba(5, 16, 24, 0.66) 100%),
    linear-gradient(140deg, rgba(1, 162, 234, 0.42) 0%, rgba(127, 181, 52, 0.15) 46%, rgba(11, 29, 42, 0.62) 100%);
}

.hero-grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.35;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.045) 0px,
    rgba(255, 255, 255, 0.045) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
}

.hero-mark {
  width: clamp(62px, 16vw, 96px);
  height: auto;
  margin-bottom: 18px;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.5));
}

/* The h1 wraps the three hero lines so the heading carries the full
   positioning statement. It is a flex column matching .hero-inner, so the
   lockup stacks and centres exactly as it did when these were siblings. */
.hero-heading {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: inherit;
  font-size: inherit;
}

.hero-kicker {
  margin: 0;
  display: block;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(0.82rem, 3.2vw, 1.05rem);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: rgba(255, 255, 255, 0.9);
}

.hero-word {
  margin: 6px 0 0;
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(2rem, 9.5vw, 4.4rem);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  line-height: 1.05;
  color: var(--white);
  text-shadow: 0 4px 34px rgba(0, 0, 0, 0.45);
}

.hero-tag {
  margin: 18px 0 0;
  font-family: var(--display);
  font-size: clamp(0.7rem, 2.9vw, 0.84rem);
  text-transform: uppercase;
  letter-spacing: clamp(0.1em, 0.6vw, 0.2em);
  color: var(--white);
  padding: 7px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.hero-cta { margin-top: 30px; min-width: min(300px, 88vw); }

.hero-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  color: var(--white);
  font-size: 0.92rem;
}
.hero-rating-text strong { font-size: 1.05rem; font-weight: 700; }

.stars { display: inline-flex; gap: 2px; color: var(--accent); }
.hero-rating .stars,
.testimonials .stars,
.footer-rating .stars { color: var(--gold); }
.stars svg { width: 15px; height: 15px; fill: currentColor; }

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 2;
  width: 26px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  display: grid;
  place-items: start center;
  padding-top: 8px;
}
.hero-scroll span {
  display: block;
  width: 3px;
  height: 7px;
  border-radius: 999px;
  background: var(--white);
  animation: scrollHint 1.8s ease-in-out infinite;
}
@keyframes scrollHint {
  0%, 100% { opacity: 0; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(6px); }
  70% { opacity: 0; transform: translateY(13px); }
}

/* ---------- Intro lead ---------- */

.intro-lead {
  max-width: 760px;
  margin: 0 auto clamp(34px, 5vw, 48px);
  text-align: center;
  font-size: clamp(1.02rem, 2.6vw, 1.16rem);
  line-height: 1.75;
  color: var(--ink-2);
}

/* ---------- Procedure comparison ---------- */

.compare-intro { max-width: 760px; }
.compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(0, 118, 173, 0.26);
  background: var(--white);
  box-shadow: 0 2px 6px -2px rgba(11, 29, 42, 0.06), 0 16px 34px -26px rgba(11, 29, 42, 0.5);
}
.compare-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.compare-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 0.93rem;
  line-height: 1.55;
}
.compare-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.compare-table th,
.compare-table td {
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.compare-table tbody tr:last-child > * { border-bottom: 0; }
.compare-table tbody tr:nth-child(even) { background: var(--paper); }
.compare-table thead th {
  background: var(--ink);
  color: var(--white);
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  width: 21%;
}
.compare-table thead td { background: var(--ink); }
.compare-table thead a { color: inherit; border-bottom: 1px solid var(--accent-bright); }
.compare-table thead a:hover { color: var(--accent-bright); }
.compare-table tbody th {
  position: sticky;
  left: 0;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  width: 16%;
}
.compare-note {
  margin: 18px 0 0;
  font-size: 0.9rem;
  color: var(--body);
}

/* ---------- Star list ---------- */

.star-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 820px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}
.star-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(0.9rem, 3.4vw, 1.06rem);
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  line-height: 1.6;
  color: var(--ink);
}
.star-list svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 4px;
  color: var(--accent);
}

/* ---------- Lifestyle word strip ---------- */

.word-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

.word-panel {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 100%;
}
.word-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.6s ease;
}
.word-panel:hover img { transform: scale(1.05); filter: grayscale(0.25) contrast(1.05); }
.word-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.34));
}
.word-panel figcaption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.1rem, 4.6vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--white);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* ---------- Split intro ---------- */

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(46px, 6vw, 72px); }
.split .btn { margin-top: 6px; }

/* ---------- Cards ---------- */

.card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

.card {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(0, 118, 173, 0.26);
  padding: clamp(26px, 4vw, 34px);
  box-shadow: 0 2px 6px -2px rgba(11, 29, 42, 0.06), 0 16px 34px -26px rgba(11, 29, 42, 0.5);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 4px 10px -4px rgba(11, 29, 42, 0.08), 0 30px 54px -30px rgba(11, 29, 42, 0.55);
}
.card p { font-size: 0.95rem; margin-bottom: 0; }

.card-index {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: var(--track-sm);
  color: var(--accent);
}

.card-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  color: var(--accent);
  margin-bottom: 20px;
  transition: background 0.3s ease, color 0.3s ease;
}
.card-icon svg { width: 22px; height: 22px; }
.card:hover .card-icon { background: var(--accent); color: var(--white); }

/* Procedure illustration in place of a line icon. Drawn on white, so it sits
   straight on the white card with no frame. */
.card-art {
  display: block;
  width: 120px;
  height: 120px;
  margin-bottom: 16px;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.card:hover .card-art { transform: scale(1.05); }

/* ---------- About ---------- */

.about { background: var(--paper-2); }

.about-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 60px); align-items: start; }

.about-media {
  margin: 0 auto;
  /* Was capped at 340px because the old headshot was only 300px wide and went
     soft above it. The replacement is 853px, so the frame can be larger. */
  max-width: 420px;
  width: 100%;
  text-align: center;
}
.about-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--accent);
}
.about-media figcaption {
  margin-top: 16px;
  display: inline-block;
  padding: 11px 20px;
  border: 2px solid var(--accent);
  font-family: var(--display);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  color: var(--ink);
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 30px;
  display: grid;
  gap: 14px;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.6;
}
.check-list svg {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 3px;
  color: var(--accent);
}

/* ---------- Process ---------- */

.process-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 34px); margin-top: clamp(34px, 5vw, 50px); }
.step-num {
  width: 50px;
  height: 50px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--accent);
  margin-bottom: 18px;
  transition: background 0.3s ease, color 0.3s ease;
}
.step:hover .step-num {
  background: linear-gradient(135deg, var(--accent-mid), var(--accent) 70%);
  border-color: transparent;
  color: var(--white);
  box-shadow: 0 10px 22px -12px rgba(0, 118, 173, 0.9);
}
.step p { font-size: 0.94rem; margin-bottom: 0; }

/* ---------- Testimonials ---------- */

/* Strips that scroll sideways on their own: the home page reviews and the
   Lantern employer logos. Without script (or with reduced motion) a strip is
   simply a row the reader can swipe. main.js clones the items once so the
   loop is seamless, then adds .is-scrolling; the track then slides left by
   exactly one set of items, which is half its width less half a gap. */
.marquee {
  --marquee-gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee::-webkit-scrollbar { display: none; }
.marquee-track {
  display: flex;
  gap: var(--marquee-gap);
  width: max-content;
  margin: 0;
  padding: 6px 0;
  list-style: none;
}
.marquee.is-scrolling { overflow: hidden; }
.marquee.is-scrolling .marquee-track {
  animation: marquee-scroll var(--marquee-duration, 45s) linear infinite;
}
.marquee.is-scrolling:hover .marquee-track,
.marquee.is-scrolling:focus-within .marquee-track { animation-play-state: paused; }

@keyframes marquee-scroll {
  to { transform: translateX(calc(-50% - var(--marquee-gap) / 2)); }
}

.marquee-track .testimonial-card { flex: 0 0 min(360px, 80vw); }

/* Employer logos, each on its own white tile so logos drawn with and without a
   white ground sit alike. */
.logo-marquee { --marquee-gap: 14px; margin-block: 26px 10px; }
.logo-track li {
  flex: none;
  display: grid;
  place-items: center;
  width: 168px;
  height: 84px;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--line);
}
.logo-track img { display: block; max-width: 100%; max-height: 48px; width: auto; height: auto; }
.logo-note { margin-bottom: 28px; }

.testimonials {
  background: linear-gradient(165deg, var(--ink) 0%, var(--ink-2) 52%, var(--ink) 100%);
}
.testimonials .display { color: var(--white); }
.testimonials .rule { display: none; }

.testimonial-card {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 22px;
  padding: clamp(24px, 4vw, 32px);
  text-align: center;
  transition: background 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.testimonial-card:hover { background: rgba(255, 255, 255, 0.09); transform: translateY(-4px); }
.testimonial-card h3 {
  color: var(--white);
  font-size: clamp(1.05rem, 4.4vw, 1.3rem);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  margin-bottom: 8px;
}
.t-sub {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--accent-bright);
  margin-bottom: 18px;
}
.testimonial-card blockquote {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.82);
}
/* In the scrolling strip a long review is cut to a few lines so the cards
   stay a similar height; the Real Results page carries every review in full. */
.marquee-track .testimonial-card blockquote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.t-foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  color: var(--muted);
}

/* ---------- Price block ---------- */

.price-block {
  margin-top: clamp(32px, 5vw, 46px);
  text-align: center;
}
.price-label {
  display: inline-block;
  padding: 10px 26px;
  border: 1px solid var(--ink);
  font-family: var(--display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: var(--track-lg);
  color: var(--ink);
}
.price-starting {
  display: block;
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--body);
}
.price-figure {
  display: block;
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(2.6rem, 12vw, 4.6rem);
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: var(--accent);
  background: linear-gradient(135deg, var(--accent-bright), var(--accent) 65%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 22px;
}
.price-block img {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  border: 1px solid var(--line);
}
.price-fine {
  margin: 16px auto 0;
  max-width: 620px;
  font-size: 0.73rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- Trust row ---------- */

.trust-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: clamp(30px, 4vw, 42px);
  padding-top: clamp(26px, 4vw, 34px);
  border-top: 1px solid var(--line);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  color: var(--ink);
  line-height: 1.5;
}
.trust-item svg { width: 20px; height: 20px; flex: none; color: var(--accent); }

/* ---------- FAQ ---------- */

.faq-list { margin-top: clamp(26px, 4vw, 38px); }

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.96rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  color: var(--ink);
  line-height: 1.5;
  transition: color 0.25s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  transition: background 0.3s ease;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform 0.3s ease, background 0.3s ease;
}
.faq-icon::before { width: 11px; height: 1.5px; }
.faq-icon::after { width: 1.5px; height: 11px; }
.faq-item[open] .faq-icon { background: var(--accent); }
.faq-item[open] .faq-icon::before { background: var(--white); }
.faq-item[open] .faq-icon::after { transform: scaleY(0); }
.faq-item p {
  margin: 0;
  padding: 0 0 24px;
  font-size: 0.95rem;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Contact ---------- */

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 32px;
}

/* ---------- Footer ---------- */

.site-footer {
  background: linear-gradient(175deg, var(--ink-2) 0%, var(--ink) 45%, #071620 100%);
  color: rgba(255, 255, 255, 0.78);
  padding-block: clamp(46px, 7vw, 72px) 26px;
  text-align: center;
  font-size: 0.92rem;
}
.footer-logo { display: inline-block; margin-bottom: 30px; }
.footer-logo img { width: min(280px, 76vw); height: auto; }

.site-footer h4 { color: var(--white); letter-spacing: 0.12em; }
.footer-location p { color: rgba(255, 255, 255, 0.7); margin: 0; line-height: 1.7; }

.footer-rule {
  height: 1px;
  background: var(--accent);
  margin: 28px auto;
  max-width: 560px;
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 26px;
}
.footer-contact li { display: inline-flex; align-items: center; gap: 9px; }
.footer-contact svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.footer-contact a:hover { color: var(--accent); }

.footer-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.72);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 30px;
  font-family: var(--display);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
}
.footer-nav a { color: rgba(255, 255, 255, 0.75); }
.footer-nav a:hover { color: var(--accent); }

.footer-social { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.footer-social a {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.8);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.footer-social svg { width: 17px; height: 17px; }

.footer-bottom {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.5);
}
.footer-bottom a:hover { color: var(--accent); }

/* ---------- Language switcher ---------- */

.lang-switch {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 95;
  display: flex;
  align-items: stretch;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.3);
  font-family: var(--display);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}
/* The hairline keeps the white stripes of the US flag legible on the
   white pill, and the flag readable on the accent-filled active state. */
.lang-switch .flag {
  width: 19px;
  height: 13.5px;
  flex: none;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}
.lang-switch a + a { border-left: 1px solid var(--line); }
.lang-switch a:hover { color: var(--accent); }
.lang-switch a.is-active {
  background: linear-gradient(135deg, var(--accent-mid), var(--accent) 75%);
  color: var(--white);
}

/* ---------- Floating candidate CTA ---------- */

.candidate-pill {
  position: fixed;
  left: 14px;
  bottom: 16px;
  z-index: 90;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-mid), var(--accent) 70%);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.84rem;
  line-height: 1;
  box-shadow: 0 10px 26px -10px rgba(0, 118, 173, 0.9), 0 2px 8px -2px rgba(11, 29, 42, 0.35);
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.candidate-pill:hover {
  background: linear-gradient(135deg, var(--ink-2), var(--ink) 70%);
  transform: translateY(-2px);
}

/* ---------- Scroll reveal ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.3, 1),
              transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
  transition-delay: var(--delay, 0ms);
}
.js .reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header.is-fixed { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-video { animation: none; transform: scale(1.02); }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* The switcher is fixed at top left; on narrow screens the header needs to
   start below it so the pill never sits on top of the centred logo. */
@media (max-width: 620px) {
  .header-inner { padding-top: 56px; }
}

/* ---------- Mobile nav ---------- */

@media (max-width: 1023px) {
  .nav-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
  }
  .nav-wrap.open { grid-template-rows: 1fr; }
  .nav-links {
    overflow: hidden;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
  }
  .nav-break { display: none; }
  .nav-links li { border-bottom: 1px solid var(--line); }
  .nav-links li:first-child { border-top: 1px solid var(--line); }
  .nav-links a { padding: 14px 4px; text-align: center; border-bottom: 0; }
}

/* ---------- Responsive layout ---------- */

@media (min-width: 640px) {
  .word-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .word-panel { aspect-ratio: 3 / 4; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /*
   * The home page procedure cards sit on twice as many half-width tracks, so an
   * odd card left over on the last row can be centred instead of leaving a gap.
   */
  #services .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #services .card-grid > * { grid-column: span 2; }
  #services .card-grid > :last-child:nth-child(odd) { grid-column: 2 / span 2; }
  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .star-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
  .candidate-pill { left: 22px; bottom: 22px; }
}

/* Between the mobile breakpoint and roughly a laptop, the container is narrow
   enough that Spanish still cannot fit seven links at full size. Shrink the
   nav type a little through that band rather than let Centro del Paciente
   strand itself on a row of its own. English has room to spare either way. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav-links a { font-size: 0.74rem; }
  .nav-shop { padding: 7px 13px !important; }
}

/* Self-Pay joined the main row, and Pago Particular is the longest label in
   it. Spanish gets slightly smaller, tighter type at every desktop width so all
   eight practice links still share one row, checked from 1024px to 1920px. */
@media (min-width: 1024px) {
  html[lang="es"] .nav-links a { font-size: 0.72rem; letter-spacing: 0.08em; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  html[lang="es"] .nav-links a { font-size: 0.66rem; letter-spacing: 0.06em; }
}

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
  /* The pinned bar keeps to one row: the store and Lantern stay at the top. */
  .site-header.is-fixed .nav-break,
  .site-header.is-fixed .nav-shop-item,
  .site-header.is-fixed .nav-brand-item { display: none; }
  .header-inner { padding-bottom: 22px; }
  .header-cta { max-width: none; width: auto; }
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #services .card-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #services .card-grid > :last-child:nth-child(odd) { grid-column: span 2; }
  /* A last row of two starts one track in; a last row of one sits in the middle. */
  #services .card-grid > :nth-child(3n + 1):nth-last-child(2) { grid-column: 2 / span 2; }
  #services .card-grid > :nth-child(3n + 1):last-child { grid-column: 3 / span 2; }
  .process-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trust-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .about-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; }
  .about-media { margin: 0; }
  .display { font-size: clamp(2rem, 3.4vw, 2.9rem); }
}

/* ======================================================================
   Patient Center — dropdown nav, interior page hero, long-form prose.
   Everything below serves patient-center/*.html plus the one dropdown
   that the home page shares with them.
   ====================================================================== */

/* ---------- Patient Center dropdown ---------- */

.nav-links .has-sub { position: relative; }

.sub-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.sub-caret {
  width: 11px;
  height: 11px;
  flex: none;
  transition: transform 0.25s ease;
}
.has-sub.open > .sub-toggle .sub-caret { transform: rotate(180deg); }

.nav-sub {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-sub a {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .nav-sub {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 8px);
    min-width: 250px;
    padding: 10px 0;
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: 0 22px 44px rgba(11, 29, 42, 0.14);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    z-index: 70;
  }
  .has-sub:hover > .nav-sub,
  .has-sub:focus-within > .nav-sub,
  .has-sub.open > .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
  .nav-sub a {
    padding: 9px 22px;
    text-align: left;
    border-bottom: 0;
    white-space: nowrap;
  }
  .nav-sub a:hover,
  .nav-sub a[aria-current="page"] {
    color: var(--accent);
    background: var(--accent-soft);
  }
}

@media (max-width: 1023px) {
  /* On phones the submenu is an accordion inside the burger menu — it only
     unfolds once Patient Center is tapped, so the menu never becomes a wall
     of eighteen links.

     The 0fr/1fr trick collapses ONE grid child, so the grid has to be the
     <li> — two rows, the toggle and the whole submenu — not the <ul>. Making
     the <ul> the grid container silently half-works: grid-template-rows sets
     only the first row, the other eleven items get auto-sized implicit rows,
     and the menu collapses its first entry while the rest stay on screen. */
  .nav-links .has-sub {
    display: grid;
    grid-template-rows: auto 0fr;
    transition: grid-template-rows 0.3s ease;
  }
  .nav-links .has-sub.open { grid-template-rows: auto 1fr; }
  .nav-links .has-sub > .nav-sub {
    overflow: hidden;
    min-height: 0;
    background: var(--paper-2);
  }
  /* .sub-toggle is inline-flex so the caret sits beside the label, which also
     opts it out of the centred text every other nav row gets. Put it back. */
  .nav-links .has-sub > .sub-toggle { justify-content: center; }
  .nav-sub > li { border-bottom: 0 !important; }
  .nav-sub > li:first-child { border-top: 0 !important; }
  .nav-sub a { padding: 11px 4px; }

  /* The open menu is taller than the screen, so the floating candidate pill
     ends up sitting on top of the links it overlaps. Stand it down until the
     menu closes. The language pill would cover the first menu item, so it
     steps aside too. */
  body:has(.nav-wrap.open) .candidate-pill,
  body:has(.nav-wrap.open) .lang-switch {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* ---------- Interior page hero ---------- */

.page-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: end center;
  min-height: clamp(280px, 42vh, 420px);
  padding: clamp(46px, 8vw, 84px) 0 clamp(34px, 5vw, 54px);
  background: var(--ink);
  overflow: hidden;
}
.page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.page-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(11, 29, 42, 0.55) 0%, rgba(11, 29, 42, 0.82) 100%);
}
.page-hero-inner { text-align: center; color: var(--white); }
.page-hero-kicker {
  font-family: var(--display);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: var(--track-lg);
  color: var(--gold);
  margin: 0 0 14px;
}
.page-hero-title {
  font-family: var(--display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--track-xl);
  line-height: 1.16;
  font-size: clamp(1.5rem, 4.6vw, 2.6rem);
  margin: 0;
  text-wrap: balance;
}
.page-hero-tag {
  margin: 16px auto 0;
  max-width: 60ch;
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- Breadcrumb ---------- */

.crumbs {
  border-bottom: 1px solid var(--line);
  background: var(--white);
  font-family: var(--display);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  color: var(--muted);
}
.crumbs .container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-block: 14px;
}
.crumbs a { color: var(--accent); }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); }

/* ---------- Long-form prose ---------- */

.prose > h2.display { margin-top: clamp(42px, 5vw, 64px); }
.prose > h2.display:first-child { margin-top: 0; }
/* The lead paragraph runs the full column, like the paragraphs under it. */
.prose > .intro { max-width: none; }
.prose h3 { margin-top: 30px; }
.prose .card h3 { margin-top: 0; }

/* An outbound link at the foot of a card, e.g. a financing application. */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--accent);
}
.card-link:hover { text-decoration: underline; }

/* A financing provider's wordmark standing in for the card heading. */
.pay-logo { margin-bottom: 14px; }
.pay-logo img { display: block; height: 40px; width: auto; }
.card-link svg { width: 15px; height: 15px; flex: none; }
.prose .card-grid,
.prose .split,
.prose .table-wrap,
.prose .price-block { margin-block: clamp(22px, 3vw, 32px); }

.prose-list,
.prose-steps {
  margin: 0 0 22px;
  padding-left: 0;
  list-style: none;
}
.prose-list > li,
.prose-steps > li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 11px;
}
.prose-list > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.72em;
  width: 7px;
  height: 7px;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
}
.prose-steps { counter-reset: step; }
.prose-steps > li { counter-increment: step; }
.prose-steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.15em;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--accent);
}
/* Nested lists sit tighter and lose the outer item's trailing gap. */
.prose-list .prose-list { margin: 10px 0 0; }

.prose .card .prose-list { margin-bottom: 0; }
.prose .card .prose-list > li { font-size: 0.95rem; }

.table-wrap { overflow-x: auto; }
.prose-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 460px;
}
.prose-table th,
.prose-table td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.prose-table th {
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  color: var(--ink);
  background: var(--paper-2);
}

/* Warning copy on the discharge page — the one block that must not be skimmed. */
.alert-block {
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  padding: clamp(22px, 3vw, 32px);
  margin-block: clamp(26px, 3vw, 38px);
}
.alert-block > h2.display { margin-top: 0; padding-left: 0; }
.alert-block > h2.display::before { display: none; }

/* ---------- Page CTA and related links ---------- */

.pc-cta {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--white);
  padding-block: clamp(48px, 7vw, 82px);
}
.pc-cta .display { color: var(--white); }
.pc-cta .intro { color: rgba(255, 255, 255, 0.78); }

.pc-related { background: var(--paper-2); }
/* Flex rather than grid so a short last row (two links on the About pages)
   sits in the middle instead of hugging the left. */
.pc-link-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(26px, 4vw, 38px);
}
.pc-link-grid > .pc-link { flex: 0 0 100%; }
.pc-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.pc-link:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(11, 29, 42, 0.08);
}
.pc-link-label {
  font-family: var(--display);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  color: var(--ink);
}
.pc-link svg { width: 17px; height: 17px; flex: none; color: var(--accent); }

@media (min-width: 640px) {
  .pc-link-grid > .pc-link { flex-basis: calc((100% - 12px) / 2); }
}
@media (min-width: 1024px) {
  .pc-link-grid > .pc-link { flex-basis: calc((100% - 24px) / 3); }
}

/* ======================================================================
   Lantern page — the cost callout, the seven-step flow, the covered /
   not-covered split, the searchable employer list and the surgery cards.
   The old version of this page buried all of this in collapsed accordions.
   ====================================================================== */

/* ---------- Cost callout ---------- */

.cost-callout {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--white);
  padding: clamp(28px, 4vw, 44px);
  margin-block: clamp(30px, 4vw, 44px);
  text-align: center;
}
.cost-kicker {
  font-family: var(--display);
  font-size: clamp(0.85rem, 2.4vw, 1.05rem);
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  color: var(--gold);
  margin: 0 0 24px;
}
.cost-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  justify-items: center;
}
.cost-cell { display: block; }
.cost-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 6px;
}
.cost-figure {
  display: block;
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.1;
}
.cost-figure.is-was {
  font-size: clamp(1.25rem, 5vw, 1.7rem);
  color: rgba(255, 255, 255, 0.72);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent-bright);
}
.cost-figure.is-now {
  font-size: clamp(2.6rem, 11vw, 4.2rem);
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #ffffff 0%, var(--accent-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cost-arrow {
  width: 26px;
  height: 26px;
  color: var(--accent-bright);
  transform: rotate(90deg);
}
.cost-note {
  margin: 22px auto 0;
  max-width: 48ch;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
}
.cost-callout .fine { color: rgba(255, 255, 255, 0.55); margin-top: 10px; }

@media (min-width: 640px) {
  .cost-compare { grid-template-columns: 1fr auto 1fr; gap: 24px; }
  .cost-arrow { transform: none; }
}

/* ---------- Seven-step flow ---------- */

.steps-flow {
  list-style: none;
  counter-reset: flow;
  margin: clamp(26px, 4vw, 38px) 0;
  padding: 0;
}
.steps-flow > li {
  counter-increment: flow;
  position: relative;
  padding: 0 0 26px 58px;
}
/* The rail joins one step to the next; the last step has nothing to join to. */
.steps-flow > li::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent-bright), rgba(1, 162, 234, 0.12));
}
.steps-flow > li:last-child { padding-bottom: 0; }
.steps-flow > li:last-child::after { display: none; }
.steps-flow > li::before {
  content: counter(flow);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  color: var(--white);
  font-family: var(--display);
  font-size: 0.95rem;
}
.steps-body h3 { margin: 9px 0 8px; }
.steps-body p { margin: 0; font-size: 0.97rem; }

/* ---------- Covered / does not apply ---------- */

.covered-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-block: clamp(24px, 3vw, 34px);
}
.covered-col {
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--line);
  background: var(--white);
}
.covered-col.is-yes { border-top: 4px solid var(--leaf); }
.covered-col.is-no { border-top: 4px solid var(--muted); background: var(--paper-2); }
.covered-col h3 { margin-bottom: 16px; }

.mark-list { list-style: none; margin: 0; padding: 0; }
.mark-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 11px;
  font-size: 0.97rem;
}
.mark-list li:last-child { margin-bottom: 0; }
.mark-list svg { width: 17px; height: 17px; flex: none; margin-top: 0.28em; }
.mark-list.is-yes svg { color: var(--leaf); }
.mark-list.is-no svg { color: var(--muted); }
.mark-list.is-no li { color: var(--muted); }

@media (min-width: 720px) {
  .covered-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Employer finder ---------- */

.employer-finder {
  border: 1px solid var(--line);
  background: var(--white);
  padding: clamp(20px, 3vw, 30px);
  margin-block: clamp(24px, 3vw, 34px);
}
.employer-search {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.employer-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.employer-search svg { width: 19px; height: 19px; flex: none; color: var(--accent); }
.employer-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 15px 0;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
}
.employer-search input:focus { outline: none; }
.employer-search input::-webkit-search-cancel-button { cursor: pointer; }

.employer-status {
  margin: 14px 0 0;
  font-family: var(--display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  color: var(--muted);
}

.employer-groups {
  margin-top: 22px;
  /* A masonry-ish flow: the letter groups are wildly uneven in length, and
     columns keep the block from becoming one very long ribbon. */
  columns: 1;
  column-gap: 30px;
}
.employer-group {
  break-inside: avoid;
  margin-bottom: 22px;
}
.employer-letter {
  margin: 0 0 9px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  color: var(--accent);
  font-size: 0.85rem;
}
.employer-list { list-style: none; margin: 0; padding: 0; }
.employer-list li {
  font-size: 0.93rem;
  line-height: 1.55;
  padding: 3px 0;
  color: var(--body);
}
.employer-list li[hidden] { display: none; }

.employer-empty {
  margin: 18px 0 0;
  padding: 18px 20px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  font-size: 0.95rem;
}
.employer-empty[hidden] { display: none; }

@media (min-width: 640px) { .employer-groups { columns: 2; } }
@media (min-width: 1000px) { .employer-groups { columns: 3; } }

/* ---------- Surgery cards ---------- */

.surgery-stack {
  display: grid;
  gap: 18px;
  margin-block: clamp(24px, 3vw, 34px);
}
.surgery-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  background: var(--white);
  padding: clamp(22px, 3vw, 32px);
}
.surgery-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.surgery-head h3 { margin: 0 0 4px; }
/* Smaller than on the home page cards: here the picture sits beside the title. */
.surgery-head .card-art { width: 72px; height: 72px; margin-bottom: 0; flex: none; }
.surgery-sub {
  margin: 0;
  font-family: var(--display);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  color: var(--muted);
}
.surgery-body p { font-size: 0.97rem; }
.surgery-body p:last-child { margin-bottom: 0; }

.surgery-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.surgery-stats dt {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  line-height: 1.1;
  color: var(--accent);
}
.surgery-stats dd {
  margin: 5px 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--muted);
}

@media (min-width: 560px) {
  .surgery-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Lantern: a nav tab badged with its own logo ----------
   The supplied asset is an opaque white JPEG, so it can only sit on a white
   surface. That is the header on desktop; on mobile the nav panel goes to
   paper-2, so the tab carries its own white chip to sit on. */

.nav-brand {
  display: inline-flex !important;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.nav-brand img {
  width: auto;
  height: 21px;
  /* Nudges the logo's own white ground toward the header's warm ivory so the
     asset does not read as a pasted-on rectangle. */
  mix-blend-mode: multiply;
  transition: opacity 0.25s ease;
}
.nav-brand:hover img { opacity: 0.72; }
.nav-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (min-width: 1024px) {
  .nav-brand-item { margin-left: 4px; }
  .nav-brand img { height: 23px; }
}

@media (max-width: 1023px) {
  .nav-links .nav-brand-item { display: flex; justify-content: center; }
  .nav-brand {
    padding: 11px 18px;
    margin: 9px 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .nav-brand img { height: 22px; mix-blend-mode: normal; }
}

/* ---------- Vitamin E Store: a tab that reads as an action ----------
   Every other nav item takes you to a page about the practice; this one takes
   you off-site to buy something. It gets the accent pill so patients can find
   it without reading the menu, and so it does not get mistaken for a section. */

.nav-shop {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 16px !important;
  border: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent) !important;
  border-radius: 999px;
  color: var(--accent) !important;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.nav-shop svg { width: 15px; height: 15px; flex: none; }
.nav-shop:hover {
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  color: var(--white) !important;
  box-shadow: 0 6px 16px rgba(1, 162, 234, 0.28);
}
.nav-shop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (min-width: 1024px) {
  /* The store and the Lantern badge are the two items that lead off-site, and
     the nav wraps them onto a row of their own at common desktop widths. That
     reads well — practice sections above, actions below — so lean into it with
     spacing rather than a divider rule, which dangles once a wrap happens. */
  .nav-shop-item { margin-left: 8px; }
}

@media (max-width: 1023px) {
  .nav-links .nav-shop-item { display: flex; justify-content: center; }
  .nav-shop { margin: 11px 0; padding: 12px 22px !important; }
  .nav-shop svg { width: 16px; height: 16px; }
}

/* ---------- Affiliate disclosure ----------
   The practice earns a commission on the vitamin store link, so the FTC wants
   this stated clearly and next to the link itself. That rules out fine print:
   body-size text on a tinted panel, at full body contrast, sitting directly
   under the button rather than italicised at the foot of the page. */

.affiliate-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  max-width: 64ch;
  margin: 18px auto 0;
  padding: 15px 19px;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  font-size: 0.89rem;
  line-height: 1.65;
  color: var(--body);
  text-align: left;
}
.affiliate-note svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 0.3em;
  color: var(--accent);
}
.affiliate-note strong { color: var(--ink); }

/* The same statement site-wide, covering the store tab in the nav. */
.footer-affiliate {
  max-width: 68ch;
  margin: 0 auto clamp(20px, 3vw, 28px);
  font-size: 0.82rem;
  line-height: 1.6;
  text-align: center;
  color: rgba(255, 255, 255, 0.66);
}

/* ---------- Procedure pages ---------- */

/* On procedure pages the h3s name whole operations — hernia, gallbladder,
   intestinal — so they carry more weight than an inline subheading. */
.prose-proc h3 {
  font-size: 1.22rem;
  letter-spacing: 0.08em;
  margin-top: 38px;
}
.prose-proc h3 + p { margin-top: 0; }


/* The figures that answer "what does this actually do", above the fold. */
.proc-stats {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(26px, 4vw, 40px);
}
.proc-stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 34px);
  margin: 0;
  text-align: center;
}
.proc-stat-row dt {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.3rem, 4.2vw, 1.85rem);
  line-height: 1.1;
  color: var(--accent);
}
.proc-stat-row dd {
  margin: 7px 0 0;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--muted);
}
@media (min-width: 760px) {
  .proc-stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A draft awaiting clinical sign-off says so loudly, in the practice's own
   sight line, so it cannot quietly be mistaken for finished copy. */
.draft-banner {
  background: #fff6e5;
  border-bottom: 3px solid #c9a86a;
  padding-block: clamp(20px, 3vw, 30px);
  color: #4a3a1c;
}
.draft-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  color: #7a5c14;
}
.draft-title svg { width: 18px; height: 18px; flex: none; }
.draft-banner p { margin: 0 0 10px; font-size: 0.92rem; line-height: 1.65; }
.draft-banner code {
  background: rgba(122, 92, 20, 0.12);
  padding: 1px 6px;
  font-size: 0.86em;
}
.draft-sub { font-weight: 700; margin-top: 14px !important; }
.draft-banner .prose-steps { margin: 0; }
.draft-banner .prose-steps > li { font-size: 0.92rem; margin-bottom: 8px; }
.draft-banner .prose-steps > li::before { color: #7a5c14; }

/* A section the surgeon still has to write, marked so it cannot ship unnoticed. */
.review-placeholder {
  border: 2px dashed #c9a86a;
  background: #fffaf0;
  padding: clamp(18px, 3vw, 26px);
  margin-block: clamp(20px, 3vw, 28px);
  color: #4a3a1c;
}
.review-placeholder p { font-size: 0.93rem; }
.review-placeholder p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------------
   About Us pages.
   ---------------------------------------------------------------------- */

/* Dr. Wadiwala's portrait, above his biography. Floated beside the prose on a
   wide screen and full width on a narrow one, rather than a fixed column that
   would strand the text at tablet sizes. */
.about-portrait {
  margin: 0 0 clamp(20px, 3vw, 30px);
  max-width: 320px;
}

.about-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
  border: 1px solid var(--line);
}

@media (min-width: 720px) {
  .about-portrait {
    float: right;
    max-width: 300px;
    margin: 4px 0 24px 32px;
  }
}

/* Address / hours / contact, side by side. */
.office-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin: clamp(20px, 3vw, 28px) 0;
}

.office-card {
  border: 1px solid var(--line);
  background: var(--paper-2);
  padding: clamp(16px, 2.4vw, 22px);
}

.office-card h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--track-lg);
  text-transform: uppercase;
  color: var(--accent);
}

.office-card p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--ink);
}

.office-card a { color: var(--accent); }
.office-closed { color: var(--muted); }

/* The map. A fixed aspect ratio keeps the iframe from collapsing before it
   loads, which otherwise shifts everything below it. */
.office-map {
  margin: clamp(20px, 3vw, 30px) 0;
  border: 1px solid var(--line);
  line-height: 0;
}

.office-map iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border: 0;
}

/* A photograph the practice still owes us. Deliberately conspicuous: it is a
   gap in the page, and it should read as one until it is filled. */
.photo-slot {
  border: 2px dashed var(--line);
  background: var(--paper-2);
  padding: clamp(22px, 4vw, 34px);
  margin-block: clamp(14px, 2vw, 20px);
  text-align: center;
}

.photo-slot p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.photo-slot strong { color: var(--body); }

/* ----------------------------------------------------------------------
   Procedure animation.

   Stock medical animations come on a saturated orange ground that fights the
   ivory page, so the clip sits in its own dark panel — the colour then reads
   as part of a contained illustration rather than a clash. Letterboxed with
   `contain` so nothing is cropped whatever the source aspect ratio.
   ---------------------------------------------------------------------- */

.proc-video {
  margin: clamp(28px, 4vw, 40px) 0;
}

.proc-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--ink);
  border: 1px solid var(--line);
}

.proc-video figcaption {
  margin-top: 10px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--body);
}

.proc-video-text { display: block; }

.proc-video-length { color: var(--muted); white-space: nowrap; }

/* Phone-shot clips (patient testimonials) are portrait: keep them phone-sized
   and centred rather than stretched across the column. */
.proc-video-portrait { max-width: 380px; margin-inline: auto; }
.proc-video-portrait video { aspect-ratio: 9 / 16; }

.proc-video-credit {
  display: block;
  margin-top: 4px;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ======================================================================
   Real Results page: before-and-after photos and patients' stories.

   Every pair shows the two photos at the same 4:5 frame, cropped from the
   top so faces stay in, with a Before / After tag on each. A patient who
   sent one picture with both halves gets a single wide frame instead. Each
   photo is a link to its full-size file; main.js opens it in the viewer.
   ====================================================================== */

.results-intro { padding-top: clamp(36px, 5vw, 56px); }
.results-video { padding-bottom: 0; }
.results-outro { padding-bottom: clamp(36px, 5vw, 56px); }
.results-outro .results-disclaimer { margin-top: 0; }
.results-disclaimer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 16px 20px;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  font-size: 0.9rem;
  line-height: 1.6;
}
.results-disclaimer svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--accent); }

.results-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.results-jump a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--accent);
  font-family: var(--display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  color: var(--accent);
  transition: background 0.25s ease, color 0.25s ease;
}
.results-jump a:hover { background: var(--accent); color: var(--white); }
.results-jump span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: var(--accent-soft);
  font-family: var(--sans);
  letter-spacing: 0;
}
.results-jump a:hover span { background: rgba(255, 255, 255, 0.2); }

/* ---------- Photo pairs ---------- */

.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ba-combined { grid-template-columns: 1fr; }
.ba-photo {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--paper-2);
  cursor: zoom-in;
}
.ba-combined .ba-photo { aspect-ratio: 8 / 5; }
.ba-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.ba-combined .ba-photo img { object-fit: contain; object-position: center; }
.ba-photo:hover img { transform: scale(1.04); }
.ba-photo:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.ba-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 10px;
  font-family: var(--display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  color: var(--white);
  background: rgba(11, 29, 42, 0.78);
}
.ba-tag-after { background: var(--accent); }
.ba-combined .ba-tag-after { left: auto; right: 10px; }

.ba-more {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}
.ba-more:hover { text-decoration: underline; }

/* ---------- Stories ---------- */

.story-list { display: grid; gap: clamp(24px, 4vw, 40px); margin-top: clamp(26px, 4vw, 38px); }
.story-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(18px, 3vw, 28px);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 16px 34px -26px rgba(11, 29, 42, 0.45);
  scroll-margin-top: 90px;
}
.story-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 1.25rem;
  letter-spacing: var(--track-sm);
}
.story-proc {
  padding: 4px 10px;
  background: var(--accent-soft);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.story-result { margin: 0 0 12px; color: var(--body); }
.story-result strong {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--accent);
  margin-right: 4px;
}
.story-headline {
  margin: 0 0 14px;
  padding: 0;
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  line-height: 1.45;
  color: var(--ink);
}
.story-text p { font-size: 0.95rem; }
.story-text p:last-child { margin-bottom: 0; }
/* Long stories are cut to a few lines until the reader asks for the rest. */
.story-text.is-clamped {
  max-height: 11.5em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
  mask-image: linear-gradient(#000 60%, transparent);
}
.story-toggle,
.story-original summary {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}
.story-toggle:hover,
.story-original summary:hover { text-decoration: underline; }
.story-original { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.story-original summary { margin: 0; font-weight: 400; font-style: italic; }
.story-original p { margin-top: 10px; font-size: 0.9rem; color: var(--body); }

/* ---------- Gallery ---------- */

.results-gallery { background: var(--paper-2); }
.result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: clamp(22px, 3vw, 32px);
}
.result-card {
  padding: 12px 12px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.result-name { margin: 12px 0 0; font-size: 1rem; letter-spacing: var(--track-sm); }
.result-card .ba-more { display: block; }

@media (min-width: 640px) {
  .result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .story-card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .story-card:nth-child(even) .story-photos { order: 2; }
}
@media (min-width: 1024px) {
  .result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Google reviews ---------- */

/* Columns rather than a grid, so short and long reviews pack without gaps. */
.review-grid { columns: 1; column-gap: 20px; margin-top: clamp(22px, 3vw, 32px); }
.review-card {
  break-inside: avoid;
  margin: 0 0 20px;
  padding: 22px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px -24px rgba(11, 29, 42, 0.45);
}
.review-card .stars { color: var(--gold); }
.review-card blockquote { margin: 12px 0 14px; padding: 0; }
.review-card blockquote p { font-size: 0.95rem; margin-bottom: 10px; }
.review-card blockquote p:last-child { margin-bottom: 0; }
.review-card figcaption { font-size: 0.85rem; color: var(--muted); }
.review-card figcaption strong {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: var(--track-sm);
  text-transform: uppercase;
  color: var(--ink);
}
@media (min-width: 700px) { .review-grid { columns: 2; } }
@media (min-width: 1024px) { .review-grid { columns: 3; } }

/* ---------- Full-size viewer ---------- */

.photo-viewer {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(8, 18, 26, 0.94);
  color: var(--white);
}
.photo-viewer::backdrop { background: rgba(8, 18, 26, 0.94); }
.viewer-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  margin: 0;
  padding: 56px 64px 24px;
}
.viewer-img { max-width: 100%; max-height: calc(100dvh - 130px); object-fit: contain; }
.photo-viewer figcaption {
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: var(--track-sm);
  text-transform: uppercase;
}
.viewer-count { margin-left: 10px; color: rgba(255, 255, 255, 0.55); }
.viewer-btn,
.viewer-close {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  cursor: pointer;
  transition: background 0.2s ease;
}
.viewer-btn:hover,
.viewer-close:hover { background: rgba(255, 255, 255, 0.2); }
.viewer-btn svg { width: 18px; height: 18px; }
.viewer-prev { left: 12px; top: 50%; transform: translateY(-50%) scaleX(-1); }
.viewer-next { right: 12px; top: 50%; transform: translateY(-50%); }
.viewer-btn[hidden] { display: none; }
.viewer-close { top: 12px; right: 12px; font-size: 1.6rem; line-height: 1; }

@media (max-width: 640px) {
  .viewer-frame { padding: 60px 10px 90px; }
  .viewer-prev,
  .viewer-next { top: auto; bottom: 20px; transform: none; }
  .viewer-prev { left: calc(50% - 56px); transform: scaleX(-1); }
  .viewer-next { right: calc(50% - 56px); }
}

/* ======================================================================
   Appointment request modal.

   Opens on a timer rather than immediately, and remembers a dismissal for a
   week — a popup that reappears every page view is the fastest way to make
   people leave. Styled after the reference: plain labels, soft grey fields,
   generous spacing, nothing shouting.
   ====================================================================== */

.appt-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 32px);
  background: rgba(11, 29, 42, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.25s ease;
  overflow-y: auto;
}
.appt-overlay[hidden] { display: none; }
.appt-overlay.is-open { opacity: 1; }

.appt-modal {
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - clamp(24px, 8vw, 64px));
  overflow-y: auto;
  background: var(--white);
  border-radius: 4px;
  box-shadow: 0 30px 70px rgba(11, 29, 42, 0.32);
  transform: translateY(12px) scale(0.99);
  transition: transform 0.25s ease;
}
.appt-overlay.is-open .appt-modal { transform: none; }

.appt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(18px, 3vw, 24px) clamp(20px, 4vw, 32px);
  border-bottom: 1px solid var(--line);
}
.appt-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.05rem, 3.4vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-transform: none;
}
.appt-close {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--muted);
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease;
}
.appt-close svg { width: 18px; height: 18px; }
.appt-close:hover { background: var(--paper-2); color: var(--ink); }
.appt-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.appt-form { padding: clamp(18px, 3vw, 26px) clamp(20px, 4vw, 32px) clamp(22px, 4vw, 30px); }

.appt-field { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.appt-field > label,
.appt-field > legend {
  display: block;
  padding: 0;
  margin-bottom: 7px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}

.appt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 18px;
}
@media (min-width: 520px) {
  .appt-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.appt-field input[type="text"],
.appt-field input[type="email"],
.appt-field input[type="tel"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: #e9eef0;
  font-family: var(--sans);
  font-size: 0.97rem;
  color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.appt-field input::placeholder { color: #8d9aa2; }
.appt-field input:focus {
  outline: none;
  background: var(--white);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.appt-field input[aria-invalid="true"] {
  border-color: #b3261e;
  background: #fdf0ef;
}

.appt-radios { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.appt-radio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--body);
}
.appt-radio input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; flex: none; }
.appt-radio svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.appt-radio:hover { color: var(--ink); }

.appt-error {
  margin: 0 0 14px;
  padding: 11px 14px;
  background: #fdf0ef;
  border-left: 3px solid #b3261e;
  font-size: 0.9rem;
  color: #7f1d17;
}
.appt-error[hidden] { display: none; }
.appt-error a { color: inherit; font-weight: 700; }

/* Turnstile stays zero-height unless it needs the visitor to tick a box. */
.appt-turnstile:not(:empty) { margin-bottom: 12px; }

.appt-submit { width: 100%; margin-top: 4px; }
.appt-submit:disabled { opacity: 0.7; cursor: wait; }

.appt-fine {
  margin: 14px 0 0;
  font-size: 0.84rem;
  text-align: center;
  color: var(--muted);
}
.appt-fine a { color: var(--accent); font-weight: 700; }

/* The confirmation that replaces the form on submit. */
.appt-done { padding: clamp(26px, 5vw, 40px) clamp(20px, 4vw, 32px); text-align: center; }
.appt-done svg { width: 44px; height: 44px; color: var(--leaf); margin-bottom: 14px; }
.appt-done h3 { margin-bottom: 10px; }
.appt-done p { font-size: 0.95rem; }

@media (prefers-reduced-motion: reduce) {
  .appt-overlay,
  .appt-modal { transition: none; }
}

/* "Read more" on a procedure card — the cards now lead somewhere, and that
   needs to be visible rather than discovered by hovering. */
.card-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-family: var(--display);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, gap 0.25s ease;
}
.card-more svg { width: 15px; height: 15px; flex: none; }
.card-more:hover { border-bottom-color: var(--accent); gap: 11px; }
.card:hover .card-more { border-bottom-color: var(--accent); }

/* ---------- Medical Weight Loss page ---------- */

.mwl-band { background: var(--paper-2); }

.mwl-intro { align-items: center; }
.mwl-actions { justify-content: flex-start; margin-top: 8px; }
.mwl-intro-img { margin: 0; }
.mwl-intro-img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--accent);
}

/* Three steps rather than the home page's four, so three columns from tablet up. */
@media (min-width: 768px) {
  .process-steps.steps-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.step-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-family: var(--display);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, gap 0.25s ease;
}
.step-action svg { width: 15px; height: 15px; flex: none; }
.step-action:hover { border-bottom-color: var(--accent); gap: 11px; }

/* Three cards: one column on phones, three side by side from tablet up — the
   two-column middle step would leave the third card on its own. */
@media (min-width: 640px) and (max-width: 767px) {
  .card-grid.card-grid-three { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) {
  .card-grid.card-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A card led by a photo: the photo runs edge to edge, the text keeps the padding. */
.card.photo-card { padding: 0; overflow: hidden; }
.photo-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.photo-card:hover img { transform: scale(1.04); }
.photo-card-body { padding: clamp(22px, 3.4vw, 30px); text-align: center; }

.med-grid { margin-top: clamp(30px, 4vw, 44px); }
/* Cards in a row share a height, so "Full details" lines up along the bottom. */
.med-card { display: flex; flex-direction: column; }
.med-card .med-more { margin-top: auto; }
.med-card .med-form { margin-bottom: 16px; }
.med-img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: contain;
  margin-bottom: 20px;
}
/* Each medication card carries its drug's colours: a bar along the top and
   the name set as a gradient wordmark, echoing the brand without its logo. */
.med-card { --med-1: var(--accent); --med-2: var(--accent-bright); border-top: 4px solid var(--med-1); }
.med-card--wegovy { --med-1: #0098a6; --med-2: #c4157a; }
.med-card--ozempic { --med-1: #d7261e; --med-2: #f28c00; }
.med-card--mounjaro { --med-1: #5b1f8f; --med-2: #a12fb0; }
.med-card--zepbound { --med-1: #1f5f8b; --med-2: #3fa7c4; }
.med-card--contrave { --med-1: #0057a8; --med-2: #2b8fd6; }
.med-card--phentermine { --med-1: #2e7d4f; --med-2: #7fb534; }

.med-card h3.med-brand {
  margin-bottom: 6px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  background: linear-gradient(90deg, var(--med-1), var(--med-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.med-card--ozempic h3.med-brand { text-transform: uppercase; letter-spacing: 0.02em; }
.med-brand sup { font-size: 0.4em; font-weight: 400; vertical-align: super; }
.med-generic {
  font-family: var(--display);
  font-size: 0.74rem !important;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  color: var(--med-1);
  margin-bottom: 14px !important;
}
.med-card > p { margin-bottom: 12px; }
.med-form { color: var(--ink); }

.med-more { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.med-more summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  color: var(--accent);
}
.med-more summary::-webkit-details-marker { display: none; }
.med-more summary svg { width: 14px; height: 14px; transition: transform 0.25s ease; }
.med-more[open] summary svg { transform: rotate(180deg); }
.med-label {
  margin: 16px 0 6px !important;
  font-family: var(--display);
  font-size: 0.74rem !important;
  text-transform: uppercase;
  letter-spacing: var(--track-sm);
  color: var(--ink);
}
.med-more ul { margin: 0; padding-left: 18px; font-size: 0.9rem; line-height: 1.6; }
.med-more li { margin-bottom: 5px; }

.med-note {
  max-width: 760px;
  margin: clamp(26px, 4vw, 36px) auto 0;
  text-align: center;
  font-size: 0.86rem;
  color: var(--muted);
}