/*
Theme Name:   Z-Dermatology & Skin Wellness Center
Theme URI:    https://z-dermatology.com/
Author:       Z-Dermatology
Description:  Custom WordPress theme for Z-Dermatology & Skin Wellness Center, Huntington Beach CA. Built from the approved static design, with a one-click demo importer that creates every inner page, the page hierarchy and all four menus.
Version:      1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  zderm
Tags:         custom-menu, translation-ready, block-styles
*/

/* ==========================================================================
   Z-Dermatology & Skin Wellness Center — design system
   Aesthetic preserved from the existing site:
     blush #E7C4C4 · warm grey · Poppins (light) headings · Roboto body
   What changed: a real spacing + type scale, consistent components,
   proper contrast, and a testimonial slider that actually works.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Brand — sampled directly from the live site */
  --blush:        #E7C4C4;   /* the site's pink */
  --blush-deep:   #C99898;   /* decorative pink: rules, markers, borders, focus rings */
  /* Text pink. #C99898 measures 2.3-2.5:1 on our backgrounds, which fails WCAG
     1.4.3 AA (4.5:1) — it is fine as a graphic, not as words. This is the same
     hue carried down until it clears 4.5:1 on white, cream, the section tint
     and the glance panel. */
  --blush-ink:    #8B5E5E;
  --blush-soft:   #F3E2E2;
  --blush-tint:   #FBF5F4;

  --ink:          #2A2A2A;
  --ink-soft:     #4A4A4A;
  --grey:         #6E6E6E;
  /* #9A9A9A measured 2.6-2.8:1 on our backgrounds — it read as "lighter grey"
     but failed WCAG 1.4.3 AA everywhere it carried words. Same role, darkened
     until it clears 4.5:1 on white, cream, the tint and the glance panel. */
  --grey-light:   #6F6F6F;
  --line:         #EAE4E3;   /* hairlines between cards and rows */
  /* Form field borders only. #EAE4E3 measured 1.26:1 against white — the boxes
     were nearly invisible, and WCAG 1.4.11 asks for 3:1 on the boundary of an
     interactive control. This is the same warm grey taken down until it clears
     that on white, cream and the section tint. Deliberately NOT applied to the
     decorative hairlines, which would coarsen the whole page.

     Three values were tried. #EAE4E3 (1.26:1) was invisible. #998C89 (3.25:1)
     read as heavy. #B5A9A6 (2.28:1) looked right but fails the 3:1 that WCAG
     1.4.11 asks of an interactive control's boundary. #9E918D is the lightest
     shade that clears the rule — 3.05:1, barely darker than the one that
     looked right, and compliant. */
  --line-field:   #9E918D;
  /* Form error red. 7.41:1 on white — clears 4.5:1 for the message text and
     3:1 for the field ring, so the same value serves both. */
  --err:          #A4231C;
  --err-soft:     rgba(164, 35, 28, .16);
  /* Interactive star fill. 3.86:1 on white — an input control has to clear
     3:1, which the brighter Google-style golds do not. */
  --star-on:      #A9791A;
  --cream:        #FBF9F8;
  --white:        #FFFFFF;

  /* TrustMyDoc partner accent — used ONLY in telehealth blocks */
  --tmd-gold:     #AF853A;
  --tmd-gold-dim: #8B6628;
  --tmd-navy:     #182639;
  --tmd-cream:    #F5EDD6;

  --star:         #E9B949;

  /* Type */
  --font-display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Roboto', 'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --t-hero:  clamp(2.4rem, 1.4rem + 3.6vw, 4.25rem);
  --t-h1:    clamp(2rem, 1.4rem + 2.2vw, 3.1rem);
  --t-h2:    clamp(1.65rem, 1.2rem + 1.7vw, 2.5rem);
  --t-h3:    clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  --t-lead:  clamp(1.05rem, 1rem + .3vw, 1.2rem);
  --t-body:  1.0625rem;
  --t-small: .9rem;
  --t-eyebrow: .78rem;

  /* Spacing scale */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 5.5rem;  --s-10: 7.5rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gutter:    clamp(1.25rem, .5rem + 2.5vw, 3rem);
  --maxw:      1200px;
  --maxw-prose: 68ch;

  --radius:    4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 3px rgba(42,42,42,.06), 0 6px 18px rgba(42,42,42,.05);
  --shadow-md: 0 2px 8px rgba(42,42,42,.07), 0 18px 40px rgba(42,42,42,.08);
  --ease: cubic-bezier(.22,.61,.36,1);

  --header-h: 92px;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--white);
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 200;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 var(--s-4);
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 300; }
h4 { font-size: 1.05rem; font-weight: 400; }
p  { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }
a  { color: var(--blush-ink); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--ink); }

/* Visible focus everywhere — the current site has none */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blush-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--ink); color: #fff; padding: var(--s-3) var(--s-5);
  border-radius: var(--radius); font-size: var(--t-small);
}
.skip-link:focus { top: var(--s-4); color: #fff; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Layout ---------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 880px; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.25rem); }
.section--tint  { background: var(--blush-tint); }
.section--cream { background: var(--cream); }
.section--blush { background: var(--blush); }
.grid { display: grid; gap: var(--s-6); }
.split {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .split--media-right > .split__media { order: 2; } }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blush-ink);
  margin: 0 0 var(--s-3);
  display: block;
}
.section-head { max-width: var(--maxw-prose); margin-bottom: var(--s-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--tight { margin-bottom: var(--s-5); }
.section-head--tight .rule { margin-top: var(--s-4); }
/* Providers is the only user of --tight. Padding pulled in so the block
   sits closer to the marquee above and the TrustMyDoc block below. */
.section--tight { padding-block: 0 clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }
.lead { font-size: var(--t-lead); color: var(--ink-soft); }
.lead--sm { font-size: .975rem; margin-top: var(--s-4); }
.rule {
  width: 56px; height: 2px; background: var(--blush);
  border: 0; margin: var(--s-5) 0 0;
}
.section-head--center .rule { margin-inline: auto; }

/* ---------- 4. Buttons — one system, no stray blue ----------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--font-display);
  font-size: .92rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  padding: .95em 2em; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
  text-align: center; line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--blush); color: #3A2A2A; border-color: var(--blush); }
.btn--primary:hover { background: #DCB3B3; border-color: #DCB3B3; color: #3A2A2A; }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* --tmd-gold at 3.37:1 fails WCAG 1.4.3 behind white button text, so the
   button fill uses the darker shade of the same gold (4.9:1). The brand colour
   itself is unchanged. */
.btn--gold { background: #8F6A2C; color: #fff; border-color: #8F6A2C; }
.btn--gold:hover { background: var(--tmd-gold-dim); border-color: var(--tmd-gold-dim); color: #fff; }
.btn--sm { padding: .7em 1.4em; font-size: .82rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.btn-row--center { justify-content: center; }

/* ---------- 5. Header ----------------------------------------------------
   Two modes from one markup:

   .header--overlay  (homepage) sits ON the video — nothing opaque, so the
                     footage runs to the very top of the browser. Wordmark
                     and links are white; an info tier rides under the menu.
   default           (interior pages) is a solid white bar in normal flow.

   Scrolling past the hero turns the overlay solid white, drops the info
   tier, and returns the wordmark to full colour.                          */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.header.is-stuck { box-shadow: var(--shadow-sm); }

.header--overlay {
  position: fixed; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent; box-shadow: none;
}
.header--overlay.is-stuck {
  background: var(--white); border-bottom-color: var(--line); box-shadow: var(--shadow-sm);
}

.header__bar {
  display: flex; align-items: center; gap: clamp(1.25rem, .5rem + 2vw, 2.5rem);
  padding-block: var(--s-4); padding-inline: var(--gutter);
  max-width: var(--maxw); margin-inline: auto;
  transition: padding-block .3s var(--ease);
}
.header--overlay.is-stuck .header__bar { padding-block: var(--s-3); }

/* Horizontal wordmark — white over video, full colour once the bar is solid */
.header__logo { flex: none; display: block; }
.header__logo img {
  width: clamp(168px, 14vw, 208px); height: auto;
  transition: width .3s var(--ease), filter .3s var(--ease);
}
.header--overlay .header__logo img { filter: brightness(0) invert(1); }
.header--overlay.is-stuck .header__logo img { filter: none; width: clamp(170px, 15vw, 214px); }

.nav { display: none; margin-left: auto; }
@media (min-width: 1120px) { .nav { display: block; } }
.nav__list {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--s-1); list-style: none; margin: 0; padding: 0; flex-wrap: nowrap;
}
.nav__link {
  display: block; padding: .45rem .58rem; white-space: nowrap;
  font-family: var(--font-display); font-size: .92rem; font-weight: 300;
  color: var(--ink-soft); border-radius: var(--radius);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav__link:hover { background: var(--blush-tint); color: var(--ink); }
.nav__link[aria-current="page"] { background: var(--blush-soft); color: var(--ink); }
.header--overlay:not(.is-stuck) .nav__link { color: #fff; opacity: .92; }
.header--overlay:not(.is-stuck) .nav__link:hover { background: rgba(255,255,255,.15); opacity: 1; }
.header--overlay:not(.is-stuck) .nav__link[aria-current="page"] { background: rgba(255,255,255,.2); opacity: 1; }

.nav__item { position: relative; }
.nav__item--has-children > .nav__link::after {
  content: ''; display: inline-block; width: .36em; height: .36em; margin-left: .5em;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.nav__sub {
  position: absolute; top: 100%; left: 0; min-width: 230px; z-index: 5;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: var(--s-2); margin: 0; list-style: none;
  /* Closed with opacity + pointer-events rather than visibility:hidden. A
     visibility:hidden element cannot receive focus, so :focus-within could
     never fire and the whole menu was unreachable by keyboard — a WCAG 2.1.1
     failure. This way Tab moves into the panel, which opens it on arrival. */
  opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav__sub .nav__link { font-size: .9rem; padding: .5rem .7rem; color: var(--ink-soft); display: block; }
.header--overlay:not(.is-stuck) .nav__sub .nav__link { color: var(--ink-soft); opacity: 1; }
.header--overlay:not(.is-stuck) .nav__sub .nav__link:hover { background: var(--blush-tint); }

/* ---- third level: Services > category > individual service --------------
   The second panel flies out to the right of its category rather than opening
   downward, so a seventeen-item list does not run off the bottom of the
   screen. */
.nav__subitem { position: relative; }
.nav__subitem > .nav__link { padding-right: 1.6rem; }
.nav__subitem > .nav__link::after {
  content: ''; position: absolute; right: .7rem; top: 50%; margin-top: -.18em;
  width: .34em; height: .34em; border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: rotate(-45deg);
}
.nav__sub--2 {
  top: -.35rem; left: 100%; margin-left: .2rem; min-width: 250px;
  max-height: min(70vh, 640px); overflow-y: auto;
}
.nav__subitem:hover > .nav__sub--2,
.nav__subitem:focus-within > .nav__sub--2 { opacity: 1; pointer-events: auto; transform: translateY(0); }
/* Flip to the left when the panel would run past the viewport edge. */
.nav__item--mega .nav__sub--2.is-flipped { left: auto; right: 100%; margin: 0 .2rem 0 0; }
.nav__sub--2 .nav__link { font-size: .86rem; padding: .42rem .7rem; }
/* Services the live site lists with no page behind them, shown as plain text
   so nobody clicks into a dead end. */
.nav__link--plain { color: var(--grey-light); cursor: default; }
.nav__sub--2 { scrollbar-width: thin; }
.nav__sub .nav__link:hover { background: var(--blush-tint); border-radius: 6px; }
.nav__sub .nav__link--plain:hover { background: none; }

/* Mobile: the third level indents under its category instead of flying out. */
.mobile-nav .mobile-nav__sub--2 { margin: .15rem 0 .5rem; }
.mobile-nav .mobile-nav__sub--2 a,
.mobile-nav .mobile-nav__sub--2 span {
  font-size: .92rem; padding: .38rem 0 .38rem var(--s-6); color: var(--grey);
  display: block;
}
.mobile-nav .mobile-nav__sub--2 span { color: var(--grey-light); }

.header__aside { display: flex; align-items: center; gap: var(--s-4); flex: none; }
.header__phone {
  font-family: var(--font-display); font-size: 1rem; font-weight: 400;
  color: var(--ink); letter-spacing: .01em; white-space: nowrap; display: none;
}
/* Shown only in the band where the menu has collapsed to a burger and there
   is room for it. On wide screens the number lives in the info tier and the
   hero rail; on phones it lives in the fixed call bar. Putting it in the main
   bar as well pushes the Book button off the end of a nine-item menu. */
@media (min-width: 620px) and (max-width: 1119px) { .header__phone { display: inline; } }
.header__phone:hover { color: var(--blush-ink); }
.header--overlay:not(.is-stuck) .header__phone { color: #fff; }

/* Info tier — under the menu, hairline above, white on the video */
.header__info {
  display: none;
  border-top: 1px solid rgba(255,255,255,.28);
  overflow: hidden; max-height: 46px; opacity: 1;
  transition: max-height .3s var(--ease), opacity .25s var(--ease);
}
@media (min-width: 1120px) { .header--overlay .header__info { display: block; } }
.header--overlay.is-stuck .header__info { max-height: 0; opacity: 0; }
.header__info-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); max-width: var(--maxw); margin-inline: auto;
  padding: var(--s-2) var(--gutter);
  font-size: .78rem; color: rgba(255,255,255,.8); white-space: nowrap;
}
.header__info-in a { color: rgba(255,255,255,.8); }
.header__info-in a:hover { color: #fff; }
.header__info-right { display: flex; align-items: center; gap: var(--s-6); }
.header__rating { display: inline-flex; align-items: center; gap: .45rem; }
.header__rating strong { color: #fff; font-weight: 500; letter-spacing: .03em; }
/* flex:none matters — inside a tight flex row these would otherwise be
   shrunk to zero width and the stars would silently disappear. */
.stars { display: inline-flex; gap: 1.5px; color: var(--star); flex: none; }
.stars svg { width: 13px; height: 13px; fill: currentColor; flex: none; }

/* Mobile nav */
.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 11px; flex: none;
  background: none; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
@media (min-width: 1120px) { .burger { display: none; } }
.burger span { display: block; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s var(--ease); }
.header--overlay:not(.is-stuck) .burger { border-color: rgba(255,255,255,.55); }
.header--overlay:not(.is-stuck) .burger span { background: #fff; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  background: #fff; padding: calc(var(--header-h) + var(--s-5)) var(--gutter) var(--s-8);
  overflow-y: auto;
  transform: translateX(100%); transition: transform .34s var(--ease);
  visibility: hidden;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
@media (min-width: 1120px) { .mobile-nav { display: none; } }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav > ul > li { border-bottom: 1px solid var(--line); }
.mobile-nav a {
  display: block; padding: var(--s-4) 0;
  font-family: var(--font-display); font-weight: 300; font-size: 1.15rem; color: var(--ink);
}
.mobile-nav .mobile-nav__sub a { font-size: .98rem; padding: .45rem 0 .45rem var(--s-5); color: var(--grey); }
.mobile-nav__foot { margin-top: var(--s-7); display: grid; gap: var(--s-4); }
body.nav-open { overflow: hidden; }

/* ---------- 6. Hero ------------------------------------------------------
   Full-bleed video from the very top of the browser. Copy block left,
   hairline fact rail welded to the bottom edge.                          */
.hero { position: relative; min-height: min(92vh, 860px); display: flex; flex-direction: column;
        justify-content: center; overflow: hidden; background: #8E8A88; }
.hero__media { position: absolute; inset: 0; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(18,15,15,.52) 0%, rgba(18,15,15,.14) 24%, rgba(18,15,15,0) 46%),
    linear-gradient(0deg,   rgba(18,15,15,.44) 0%, rgba(18,15,15,0) 30%),
    linear-gradient(90deg,  rgba(24,20,20,.56) 0%, rgba(24,20,20,.26) 58%, rgba(24,20,20,.04) 100%);
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(9rem, 6rem + 8vw, 12rem) clamp(6rem, 4rem + 6vw, 9rem); }
.hero__content { max-width: 640px; color: #fff; }
.hero .eyebrow { color: rgba(255,255,255,.82); margin-bottom: var(--s-4); }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.35rem + 1.9vw, 2.75rem);   /* 44px at 1440 */
  font-weight: 200; color: #fff; line-height: 1.14;
  letter-spacing: .005em; margin: 0; text-wrap: balance;
}
.hero h1 span { display: block; font-size: .55em; letter-spacing: .09em; margin-top: .3em; opacity: .95; }
.hero__tagline {
  font-size: 1.0625rem; color: rgba(255,255,255,.9);
  margin: var(--s-5) 0 var(--s-6); max-width: 46ch;
}
.hero .btn-row { gap: var(--s-4); }

/* Fact rail, welded to the bottom of the video */
.hero__rail {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  border-top: 1px solid rgba(255,255,255,.22);
}
.hero__rail-in {
  display: flex; max-width: var(--maxw); margin-inline: auto;
  padding: var(--s-4) var(--gutter);
}
.hero__rail-item {
  display: flex; align-items: center; gap: .65rem;
  padding-inline: clamp(1.25rem, .5rem + 1.6vw, 2.2rem);
  border-left: 1px solid rgba(255,255,255,.2);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.78); white-space: nowrap;
}
.hero__rail-item:first-child { padding-left: 0; border-left: 0; }
.hero__rail-item b { color: #fff; font-weight: 500; }
/* The address is a link to the map, so it was picking up the site's link
   colour and reading brown against the video while everything either side of
   it was white. On this bar a link should look like the rest of the bar. */
.hero__rail-item a { color: inherit; }
.hero__rail-item a:hover { color: #fff; }
@media (max-width: 1100px) {
  .hero__rail-in { flex-wrap: wrap; gap: .2rem 1.5rem; }
  .hero__rail-item { border-left: 0; padding-inline: 0; white-space: normal; }
}
@media (max-width: 640px) {
  /* The number is already in the fixed call bar at the bottom of the screen. */
  .hero__rail-item:nth-child(4) { display: none; }
  .hero__rail-item { font-size: .64rem; letter-spacing: .1em; }
}

/* ---------- 7. Cards & media -------------------------------------------- */
.media { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--tall { aspect-ratio: 4 / 5; }
.media--wide { aspect-ratio: 3 / 2; }
/* Smaller supporting image — capped so it never dominates the copy beside it */
.media--portrait { aspect-ratio: 3 / 4; max-width: 330px; margin-inline: auto; }
@media (min-width: 860px) { .media--portrait { margin-inline: auto 0; } }

/* Welcome block: quieter than a section headline, tighter measure */
.section--welcome h2 { font-size: clamp(1.4rem, 1.15rem + .8vw, 1.85rem); font-weight: 300; }
.section--welcome p { font-size: .975rem; line-height: 1.72; max-width: 60ch; }
.section--welcome .eyebrow { font-size: .72rem; }
/* New Patients: same contained treatment as Welcome, image leading. */
.section--np { background: var(--cream); padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.25rem); }
.section--np h2 { font-size: clamp(1.4rem, 1.15rem + .8vw, 1.85rem); font-weight: 300; }
.section--np .media--wide { max-width: 520px; margin-inline: auto; }
.section--welcome .split { gap: clamp(1.75rem, 1rem + 2.5vw, 3.25rem); align-items: center; }
/* Copy leads; the image is a supporting note, not a co-star. */
@media (min-width: 860px) { .section--welcome .split { grid-template-columns: 1.3fr .7fr; } }

/* ---------- Our Services — continuous marquee, flush to the block above ---
   Driven by a CSS animation rather than a JS timer: it cannot stall, and it
   keeps running even if scripting is blocked. The tile set is duplicated in
   the markup so the loop is seamless.                                      */
/* Trailing space cut so the marquee sits close to Meet Our Providers. */
.svc { background: var(--white); overflow: hidden; padding-block: 0 clamp(2rem, 1.25rem + 2vw, 3rem); }
.svc__grid { display: grid; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) { .svc__grid { grid-template-columns: minmax(220px, 300px) 1fr; } }
.svc__head { padding: var(--s-6) var(--gutter); }
@media (min-width: 1000px) { .svc__head { padding-block: 0; } }
.svc__head h2 {
  font-family: var(--font-display); font-weight: 200; color: var(--grey-light);
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem); margin: 0; letter-spacing: .005em;
}

.svc__marquee { position: relative; overflow: hidden; }
/* the angled white wedge that cuts into the first tile on the current site */
.svc__marquee::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 110px; z-index: 4;
  background: var(--white); clip-path: polygon(0 0, 100% 0, 0 100%); pointer-events: none;
}
@media (max-width: 999px) { .svc__marquee::before { display: none; } }

.svc__tape { display: flex; width: max-content; animation: svc-scroll 44s linear infinite; }
.svc__marquee:hover .svc__tape,
.svc__marquee:focus-within .svc__tape { animation-play-state: paused; }
@keyframes svc-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .svc__tape { animation: none; }
  .svc__marquee { overflow-x: auto; }
}

.svc-tile {
  position: relative; display: block; flex: none;
  width: 410px; height: 450px; margin-right: 4px;
  background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;
  color: #fff; overflow: hidden;
}
.svc-tile::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(28,24,24,.18); transition: background .3s var(--ease);
}
.svc-tile:hover::after, .svc-tile:focus-visible::after { background: rgba(28,24,24,.34); }
.svc-tile__over {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 2; text-align: center; padding: 0 20px;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
}
.svc-tile__label {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-size: 23px; font-weight: 300; letter-spacing: 1px; color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.svc-tile__btn {
  font-family: var(--font-body); font-size: 20px; font-weight: 300; color: #fff;
  border: 1px solid #fff; padding: 5px 15px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.svc-tile:hover .svc-tile__btn { background: #fff; color: var(--ink); }
@media (max-width: 999px) { .svc-tile { width: 320px; height: 380px; } }

.cards { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blush-soft); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--blush-tint); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.card__title { font-family: var(--font-display); font-size: 1.12rem; font-weight: 300; color: var(--ink); margin: 0; }
.card__link {
  margin-top: auto; font-family: var(--font-display); font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blush-ink);
  display: inline-flex; align-items: center; gap: .5em;
}
.card__link::after { content: '→'; transition: transform .25s var(--ease); }
.card:hover .card__link::after { transform: translateX(4px); }
.card__link::before { content: ''; position: absolute; inset: 0; } /* full-card click target */

/* ---------- 8. Feature band (philosophy / new patients) ------------------ */
.band { position: relative; overflow: hidden; color: #fff; }
.band__media { position: absolute; inset: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28,24,24,.78) 0%, rgba(28,24,24,.55) 55%, rgba(28,24,24,.28) 100%); }
.band__inner { position: relative; padding-block: var(--section-y); }
.band__content { max-width: 560px; }

/* Compact band: same words, set in two columns so the block is about half
   as tall. Falls back to one column below 900px. */
.band--compact .band__inner { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.25rem); }
.band--compact .band__content { max-width: 100%; }
.band--compact .band__prose { margin-top: var(--s-5); }
.band--compact .band__prose p { font-size: .95rem; line-height: 1.7; break-inside: avoid; }
@media (min-width: 900px) {
  .band--compact .band__prose { column-count: 2; column-gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
  .band--compact .band__scrim {
    background: linear-gradient(90deg, rgba(28,24,24,.82) 0%, rgba(28,24,24,.7) 60%, rgba(28,24,24,.5) 100%);
  }
}
.band h2, .band h3 { color: #fff; }
.band .eyebrow { color: var(--blush); }
.band p { color: rgba(255,255,255,.9); }
.band .rule { background: var(--blush); }

/* ---------- 9. Providers ------------------------------------------------- */
.provider-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Compact variant for the homepage preview: landscape crop, tighter padding,
   bio clamped to three lines. The full text stays in the markup for search —
   only the visible height changes. */
.provider-grid--compact { gap: var(--s-5); }
.provider-grid--compact .provider__photo { aspect-ratio: 1 / 1; }
.provider-grid--compact .provider__body { padding: var(--s-4) var(--s-4) var(--s-5); gap: var(--s-2); }
.provider-grid--compact .provider__name { font-size: 1.18rem; }
.provider-grid--compact .provider__role { font-size: .72rem; }
.provider-grid--compact .provider__bio {
  font-size: .92rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: var(--s-1);
}
.provider-grid--compact .card__link { margin-top: var(--s-3); font-size: .76rem; }
/* The card is name, role and a way through — the quote lives on the Providers
   page, where there is room for it to sit with the bio. */
.provider__more { margin-top: var(--s-4); align-self: center; }
.provider {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
.provider__photo { aspect-ratio: 1 / 1; overflow: hidden; background: var(--blush-tint); }
.provider__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.provider__body { padding: var(--s-5) var(--s-5) var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.provider__name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 300; color: var(--ink); margin: 0; }
/* Name and title centred; bio and link stay left so the text block still reads. */
.provider__name, .provider__role { text-align: center; }
.provider__role {
  font-family: var(--font-display); font-size: .8rem; font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; color: var(--blush-ink); margin: 0;
}
.provider__bio { font-size: .98rem; color: var(--ink-soft); margin: 0; }
.provider__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.tag {
  font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
  background: var(--blush-tint); color: var(--ink-soft);
  border: 1px solid var(--blush-soft); border-radius: 100px; padding: .3em .8em;
}

/* CV disclosure */
.cv { margin-top: var(--s-4); border-top: 1px solid var(--line); }
.cv__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  background: none; border: 0; cursor: pointer; padding: var(--s-4) 0;
  font-family: var(--font-display); font-size: .84rem; font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink); text-align: left;
}
.cv__toggle:hover { color: var(--blush-ink); }
.cv__toggle .chev {
  width: .5rem; height: .5rem; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px); transition: transform .3s var(--ease);
}
.cv__toggle[aria-expanded="true"] .chev { transform: rotate(-135deg) translate(-2px,-2px); }
.cv__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.cv__panel[data-open="true"] { grid-template-rows: 1fr; }
.cv__panel > div { overflow: hidden; }
.cv__inner { padding-bottom: var(--s-5); display: grid; gap: var(--s-5); }
.cv__group { display: grid; gap: var(--s-2); }
.cv__label {
  font-family: var(--font-display); font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--grey-light); margin: 0;
}
.cv__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.cv__list li { font-size: .95rem; color: var(--ink-soft); padding-left: 1.1em; position: relative; line-height: 1.55; }
.cv__list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; background: var(--blush); border-radius: 50%; }
.placeholder {
  background: #FFF8E6; border: 1px dashed #E3C77A; border-radius: var(--radius);
  padding: .35em .7em; color: #7A5E1E; font-size: .88rem; font-style: italic; display: inline-block;
}

/* ---------- 10. Testimonials — the slider that actually works ------------ */
.reviews { position: relative; }
.reviews__badge {
  display: inline-flex; align-items: center; gap: var(--s-3);
  background: #fff; border: 1px solid var(--line); border-radius: 100px;
  padding: .55rem 1.25rem; box-shadow: var(--shadow-sm); margin-bottom: var(--s-6);
}
.reviews__badge .score { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: var(--ink); }
.reviews__badge .count { font-size: .84rem; color: var(--grey); }
.reviews__badge .stars svg { width: 16px; height: 16px; }

.slider { position: relative; }
.slider__viewport { overflow: hidden; }
.slider__track { display: flex; transition: transform .5s var(--ease); will-change: transform; }
.slider__slide { flex: 0 0 100%; min-width: 0; padding: 0 2px; }
@media (min-width: 900px) { .slider__slide { flex-basis: 50%; } }

.quote {
  height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  display: flex; flex-direction: column; gap: var(--s-4); margin-inline: .4rem;
}
.quote__mark { font-family: var(--font-display); font-size: 3rem; line-height: .6; color: var(--blush); }
.quote__text { font-size: 1.05rem; color: var(--ink-soft); flex: 1; margin: 0; }
.quote__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.quote__name { font-family: var(--font-display); font-weight: 400; font-size: 1rem; color: var(--ink); margin: 0; }
.quote__date { font-size: .8rem; color: var(--grey-light); margin: 0; }

.slider__controls { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-top: var(--s-6); }
.slider__btn {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.slider__btn:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); }
.slider__btn:disabled { opacity: .32; cursor: default; }
.slider__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.slider__dots { display: flex; gap: var(--s-2); }
.slider__dot {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--grey-light); background: transparent; transition: all .25s var(--ease);
}
.slider__dot[aria-selected="true"] { background: var(--blush-deep); border-color: var(--blush-deep); width: 26px; border-radius: 100px; }

/* ---------- 11. TrustMyDoc telehealth block ----------------------------- */
.tmd {
  background: var(--tmd-navy); color: #fff; position: relative; overflow: hidden;
}
.tmd::before {
  content: ''; position: absolute; top: -30%; right: -10%; width: 60%; height: 120%;
  background: radial-gradient(closest-side, rgba(175,133,58,.28), transparent 72%);
  pointer-events: none;
}
.tmd__inner { position: relative; padding-block: var(--section-y); }
.tmd .eyebrow { color: #E4C77A; letter-spacing: .2em; }
.tmd h2 { color: #fff; font-weight: 300; }
.tmd h2 em { font-style: italic; color: #E4C77A; }
.tmd p { color: rgba(255,255,255,.82); }
.tmd .rule { background: var(--tmd-gold); }
.tmd__grid { display: grid; gap: clamp(2rem,1rem + 4vw,4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tmd__grid { grid-template-columns: 1.15fr .85fr; } }

.tmd-points { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.tmd-points li { padding-left: 1.9em; position: relative; color: rgba(255,255,255,.88); }
.tmd-points li::before {
  content: ''; position: absolute; left: 0; top: .3em; width: 1em; height: 1em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M5 0 H9 V5 H14 V9 H9 L5 5 V0 Z' fill='%23E4C77A'/><path d='M5 14 H9 V9 L5 5 H0 V9 H5 Z' fill='%23AF853A'/></svg>") no-repeat center / contain;
}
.tmd-points strong { color: #fff; font-weight: 500; }

.tmd-card {
  align-self: start;
  background: rgba(255,255,255,.075); border: 1px solid rgba(228,199,122,.4);
  border-radius: var(--radius-lg); padding: clamp(1.75rem,1rem + 2vw,2.5rem);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.tmd-card h3 { color: #fff; font-size: 1.2rem; font-weight: 300; }
.tmd-card ol { margin: 0; padding-left: 1.2em; color: rgba(255,255,255,.85); display: grid; gap: var(--s-3); }
.tmd-card ol::marker, .tmd-card li::marker { color: #E4C77A; }
.tmd__url {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: .82rem; letter-spacing: .06em; color: #E4C77A;
  border-top: 1px solid rgba(228,199,122,.3); padding-top: var(--s-4); margin-top: var(--s-5);
}
.tmd__disclaimer {
  font-size: .82rem; color: rgba(255,255,255,.55); margin-top: var(--s-5);
  border-left: 2px solid rgba(228,199,122,.4); padding-left: var(--s-4); line-height: 1.6;
}

/* ---------- Ways to get care: office | TrustMyDoc telehealth ------------- */
.ways { padding-block: var(--section-y); background: var(--cream); }
.ways__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: stretch; }
@media (min-width: 920px) { .ways__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }

.way {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.way__num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .2em; color: var(--grey-light);
}
.way h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 300; margin: 0; color: var(--ink); }
.way p { font-size: .95rem; line-height: 1.68; margin: 0; }
.way__actions { margin-top: auto; padding-top: var(--s-3); }
.way--office { border-top: 3px solid var(--blush); }
.way__phone {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); letter-spacing: .01em; display: inline-block;
}
.way__phone:hover { color: var(--blush-ink); }
.way__note { color: var(--grey); font-size: .88rem !important; }
.way__facts { margin: var(--s-2) 0 0; display: grid; gap: var(--s-3); }
.way__facts > div { display: grid; grid-template-columns: 88px 1fr; gap: var(--s-4); align-items: start; }
.way__facts dt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--grey-light); padding-top: .25em;
}
.way__facts dd { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--ink-soft); }
.way__facts dd a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--blush); }
.way__facts dd a:hover { color: var(--blush-ink); }

/* TrustMyDoc column — its own brand, deliberately distinct from ours */
.way--tmd { border-top: 3px solid var(--tmd-gold); background: #FFFDF8; }
.way__logo { width: clamp(190px, 40%, 250px); height: auto; }
.way__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.way__points li { position: relative; padding-left: 1.5em; font-size: .92rem; color: var(--ink-soft); }
.way__points li::before {
  content: ''; position: absolute; left: 0; top: .42em; width: .8em; height: .8em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M5 0 H9 V5 H14 V9 H9 L5 5 V0 Z' fill='%23182639'/><path d='M5 14 H9 V9 L5 5 H0 V9 H5 Z' fill='%23AF853A'/></svg>") no-repeat center / contain;
}
.way__get {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5);
  border-block: 1px solid #EFE6D2; padding-block: var(--s-4); margin-top: var(--s-2);
}
.way__badges { display: grid; gap: var(--s-3); flex: 1 1 200px; min-width: 0; }
.badge {
  display: inline-flex; align-items: center; gap: .7rem;
  background: var(--tmd-navy); color: #fff; border-radius: 6px;
  padding: .55rem 1.1rem .6rem; border: 1px solid var(--tmd-navy);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.badge:hover { background: #22334d; color: #fff; transform: translateY(-1px); }
.badge__mark { width: 22px; height: 22px; flex: none; fill: #fff; }
.badge__txt { display: flex; flex-direction: column; line-height: 1.15; }
.badge__txt small { font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.badge__txt strong { font-family: var(--font-display); font-size: .98rem; font-weight: 400; letter-spacing: .01em; }

.way__qr { margin: 0; text-align: center; flex: none; }
.qr-placeholder {
  width: 96px; height: 96px; border: 2px dashed var(--tmd-gold);
  border-radius: 6px; display: grid; place-items: center; background: #fff;
  color: var(--tmd-gold-dim); font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .62rem; letter-spacing: .14em; line-height: 1.5;
}
.way__qr figcaption {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--grey-light); margin-top: .5rem;
}
.way__fine { font-size: .8rem !important; color: var(--grey); line-height: 1.6 !important; margin-top: auto !important; }
.way__fine a { color: var(--tmd-gold-dim); text-decoration: underline; text-underline-offset: 2px; }

/* Light-background variant of the telehealth teaser */
.tmd-strip { background: var(--tmd-cream); border-block: 1px solid var(--tmd-gold); border-block-width: 2px 2px; }
.tmd-strip__inner {
  padding-block: clamp(2rem, 1rem + 3vw, 3.25rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5);
}
.tmd-strip__text { max-width: 62ch; }
.tmd-strip h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); font-weight: 300; margin-bottom: var(--s-2); color: #2E2617; }
.tmd-strip h2 em { font-style: italic; color: var(--tmd-gold-dim); }
.tmd-strip p { color: #5A5140; margin: 0; font-size: .98rem; }
.tmd-strip .eyebrow { color: var(--tmd-gold-dim); }

/* ---------- 12. Contact / footer ---------------------------------------- */
.contact-grid { display: grid; gap: clamp(2rem,1rem + 4vw,4rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); }
.field label { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); font-family: var(--font-display); }
.field input, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: .85rem 1rem; border: 1px solid var(--line-field); border-radius: var(--radius);
  background: #fff; width: 100%; transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:hover, .field textarea:hover { border-color: var(--ink-soft); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--blush-deep); box-shadow: 0 0 0 3px var(--blush-soft);
}
.field textarea { min-height: 130px; resize: vertical; }

/* ---------- Form validation ---------------------------------------------
   The error state is deliberately signalled three ways at once: a red ring,
   an icon, and a sentence saying what is wrong. WCAG 1.4.1 forbids colour as
   the only carrier of meaning — a red ring on its own tells a colour-blind
   visitor nothing. --err is 7.4:1 on white, well past the 4.5:1 needed for
   the message text and the 3:1 needed for the ring.                        */
.form-req { font-size: .84rem; color: var(--grey); margin: 0 0 var(--s-4); }
.req { color: var(--err); font-weight: 700; }
.field__opt {
  color: var(--grey-light); font-weight: 400; letter-spacing: .06em;
  text-transform: none; font-size: .92em;
}
.field__hint { font-size: .82rem; color: var(--grey); margin: 0; }

.field__err { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--err); }
.field__err:not([hidden]) { display: flex; gap: .45rem; align-items: flex-start; }
.field__err-i {
  flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin-top: .12rem;
  border-radius: 50%; background: var(--err); color: #fff;
  font: 700 .72rem/1.05rem var(--font-display); text-align: center;
}
.field.is-err input, .field.is-err textarea {
  border-color: var(--err); box-shadow: 0 0 0 2px var(--err-soft);
}
.field.is-err input:focus, .field.is-err textarea:focus {
  border-color: var(--err); box-shadow: 0 0 0 3px var(--err-soft);
}

/* "Did you mean gmail.com?" — a typo catch, not an error. Neutral colour so
   it does not read as a rejection, and a real button so it is keyboard
   reachable and announced as an action. */
.field__sugg { margin: 0; font-size: .86rem; color: var(--ink-soft); }
.field__sugg button {
  font: inherit; color: var(--ink); background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.field__sugg button:hover { color: var(--blush-ink); }

/* Announced to screen readers on submit, after the individual field errors
   have been marked. Visually it repeats what the rings already show. */
.form-status { margin: 0 0 var(--s-4); font-size: .88rem; color: var(--err); font-weight: 600; }
.form-status:empty { display: none; }
/* Column label above the form, matching Visit Us / Call Us / Office Hours in
   the column beside it so the two halves of the block start on the same line. */
.form-label {
  font-family: var(--font-display); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--grey-light); margin: 0 0 var(--s-4);
}

/* The form disclaimer sits under the submit button, centred, with a mono label
   in place of the old pink box. The measure cap matters: centred text without
   one breaks into ragged lines. */
.form-foot { display: grid; justify-items: center; text-align: center; gap: var(--s-5); margin-top: var(--s-2); }
.form-note { font-size: .8rem; line-height: 1.6; color: var(--grey); display: grid; gap: .35rem; max-width: 52ch; }
.form-note p { margin: 0; }
.form-note__lbl { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: .64rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--blush-ink); }

.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.info-list dt, .info-list .info-label {
  font-family: var(--font-display); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--grey-light); margin-bottom: var(--s-2);
}
.info-list a { color: var(--ink); }
.info-list a:hover { color: var(--blush-ink); }
.hours { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hours th, .hours td { text-align: left; padding: .45rem 0; border-bottom: 1px solid var(--line); font-weight: 400; color: var(--ink-soft); }
.hours td:last-child { text-align: right; color: var(--ink); }
.map { aspect-ratio: 16 / 10; border: 0; width: 100%; border-radius: var(--radius-lg); filter: grayscale(.35); }

/* Footer pulled in: 64/32 -> 40/24, and the columns sit closer to the bottom bar. */
.footer { background: var(--cream); border-top: 1px solid var(--line); padding-block: 2.5rem var(--s-5); }
.footer__grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: var(--s-5); }
.footer__logo img { width: 170px; margin-bottom: var(--s-3); }
.footer__col-h { font-family: var(--font-display); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey-light); margin-bottom: var(--s-3); font-weight: 500; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.footer a { color: var(--ink-soft); font-size: .94rem; }
.footer a:hover { color: var(--blush-ink); }
.footer__bottom {
  border-top: 1px solid var(--line); padding-top: var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  font-size: .84rem; color: var(--grey);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-5); }

/* Sticky mobile call bar */
.callbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr;
  background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -2px 14px rgba(0,0,0,.07);
}
@media (min-width: 720px) { .callbar { display: none; } }
.callbar a {
  padding: .95rem .5rem; text-align: center;
  font-family: var(--font-display); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
}
.callbar a + a { background: var(--blush); color: #3A2A2A; }
@media (max-width: 719px) { body { padding-bottom: 52px; } }

/* Reveal on scroll.
   Scoped to .js so that if JavaScript fails or is blocked, every section
   is still fully visible — content is never hidden behind a script. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ---------- Testimonials — continuous marquee of real reviews ------------
   CSS-animated like the services row, so it cannot stall. The card set is
   duplicated in the markup for a seamless loop; the copy is hidden from
   screen readers.                                                         */
.revs { background: var(--blush-tint); padding-block: clamp(2rem, 1.25rem + 2.4vw, 3.25rem); overflow: hidden; }
.revs__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5);
}
.revs__head h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); font-weight: 200; margin: 0; }
.revs__meta { display: inline-flex; align-items: center; gap: .6rem; font-size: .86rem; color: var(--grey); flex-wrap: wrap; }
.revs__meta strong { color: var(--ink); font-family: var(--font-display); font-weight: 400; }
.revs__link {
  font-family: var(--font-display); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blush-ink); border-bottom: 1px solid var(--blush); padding-bottom: 1px; margin-left: .5rem;
}
.revs__link:hover { color: var(--ink); border-color: var(--ink); }

.revs__rail {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.revs__tape { display: flex; width: max-content; gap: var(--s-4); animation: revs-scroll 68s linear infinite; }
.revs__rail:hover .revs__tape,
.revs__rail:focus-within .revs__tape { animation-play-state: paused; }
@keyframes revs-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .revs__tape { animation: none; }
  .revs__rail { overflow-x: auto; }
}
.rev {
  width: 340px; flex: none; margin: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3);
}
.rev blockquote {
  margin: 0; font-size: .95rem; line-height: 1.62; color: var(--ink-soft); flex: 1;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.rev figcaption { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.rev__who { font-family: var(--font-display); font-size: .9rem; font-weight: 400; color: var(--ink); }
.rev__when { font-size: .74rem; color: var(--grey-light); }

/* ---------- 15. Interior pages ------------------------------------------- */
/* One shared set of rules for About, New Patients, Insurance, Online Forms,
   Specials, Testimonials and Contact, so every page inherits the homepage
   aesthetic rather than growing its own. */

.section--page { padding-block: clamp(2.5rem, 1.75rem + 2.4vw, 4rem); }
/* Interior images stay modest — the copy leads on these pages. */
/* 460 rather than 520: at 520 the image nearly filled its column, so the
   auto margins had only ~25px to work with and it read as flush left. */
.section--page .media--wide { max-width: 460px; margin-inline: auto; }
/* Close-up crops frame better slightly above centre. */
.section--page .media--wide img { object-position: 50% 45%; }

/* Interior H1s sit in the same tinted head block on every page. An h1 at the
   homepage's display size would overpower these shorter pages, so it is set
   one step down. */
.section--tint h1 {
  font-family: var(--font-display); font-weight: 200; color: var(--ink);
  font-size: clamp(1.65rem, 1.25rem + 1.6vw, 2.5rem); line-height: 1.18;
}
/* ch here would resolve against the 16px container font, not the h1, and the
   long SEO headings would wrap to four lines. Fixed measure instead. */
.section--tint .section-head { max-width: 46rem; }

/* A link inside a paragraph has to be identifiable without colour vision
   (WCAG 1.4.1). Underline the ones that sit in running text; buttons and
   list-style navigation links are distinguishable by their own shape. */
.main p a:not(.btn), main p a:not(.btn), .legal-doc a:not(.btn), .fine a, .form-note a {
  text-decoration: underline; text-underline-offset: .18em;
  text-decoration-thickness: .06em; text-decoration-color: var(--blush);
}
.prose p a:not(.btn):hover, .legal-doc p a:hover, .qa__a p a:not(.btn):hover {
  text-decoration-color: currentColor;
}

.prose > p { margin: 0 0 var(--s-4); }
.prose > p:last-child { margin-bottom: 0; }
.prose h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); margin: var(--s-6) 0 var(--s-4);
}
.prose h2:first-child { margin-top: 0; }
/* Left-aligned, not centred: it usually sits under a split whose text column
   starts at the wrap edge, and centring it reads as a misalignment. */
.prose--wide { max-width: 72ch; }
/* Sub-headings: weight and a hairline beneath, no marker. The blush rule that
   was here sat where a pull-quote marker goes, so the eye read these as asides
   instead of headings. A rule underneath reads as a heading the way a table
   column header does. */
.prose h3 {
  font-family: var(--font-display); font-weight: 500; color: var(--ink);
  font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem); line-height: 1.3;
  letter-spacing: .01em;
  margin: var(--s-6) 0 var(--s-4); padding: 0 0 .5rem;
  border-bottom: 1px solid var(--line);
}
.prose h3:first-child { margin-top: 0; }
/* Markers sit in the left gutter so the text block keeps the same left edge as
   the paragraphs around it. */
.prose ul, .prose ol { margin: 0 0 var(--s-4); padding-left: 1.25rem; }
.prose li { margin-bottom: .4rem; }
.prose li::marker { color: var(--blush-deep); font-size: .9em; }
.prose ol { counter-reset: step; list-style: none; padding-left: 0; }
.prose ol > li {
  counter-increment: step; position: relative; padding-left: 2.35rem;
  margin-bottom: var(--s-4);
}
.prose ol > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: .12em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .1em; color: var(--blush-ink);
}

.fine { font-size: .86rem; color: var(--grey); margin-top: var(--s-5); }

/* ---- Leave a review: star input ---------------------------------------
   Built on a radio group rather than buttons or a row of spans. That buys
   arrow-key movement, a group announced as "1 of 5", and a control that
   still works with JavaScript switched off — none of which come free with
   a div. The radios are only visually hidden once JS has confirmed it can
   draw the stars (.is-enhanced), so a no-JS visitor gets plain radio
   buttons beside the stars instead of an unusable row of pictures.       */
.rateus {
  max-width: 620px; margin: var(--s-7) auto 0; text-align: center;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.rateus__set { border: 0; padding: 0; margin: 0; }
.rateus__legend {
  padding: 0; margin: 0 auto var(--s-4); font-family: var(--font-display);
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--grey);
}
.rateus__stars {
  display: flex; justify-content: center; align-items: center; gap: .25rem;
}
.rateus__star {
  display: grid; place-items: center; cursor: pointer;
  /* 44px keeps every star a comfortable tap target on a phone, well past
     the 24px WCAG 2.5.8 floor. */
  width: 44px; height: 44px; border-radius: var(--radius);
}
.rateus__star svg { width: 30px; height: 30px; }
.rateus__star svg path {
  /* Empty state is an outline, not a pale fill: an unselected star has to be
     visible at 3:1 in its own right (WCAG 1.4.11), and a light grey fill is
     not. --star-on is 3.86:1 on white, so both states clear it. */
  fill: none; stroke: var(--grey-light); stroke-width: 1.6;
  transition: fill .15s var(--ease), stroke .15s var(--ease);
}
.rateus__star.is-on svg path { fill: var(--star-on); stroke: var(--star-on); }
/* Keyboard focus has to land on the star, since the radio itself is hidden. */
.rateus__input:focus-visible + .rateus__star {
  outline: 2px solid var(--ink); outline-offset: 2px;
}
.rateus.is-enhanced .rateus__input {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.rateus__out {
  margin: var(--s-4) 0 var(--s-5); font-size: .9rem; color: var(--ink-soft);
  min-height: 1.4em;      /* reserve the line so nothing jumps on selection */
}
.rateus button[type="submit"][disabled] { opacity: .5; cursor: not-allowed; }

/* ---- Small-screen corrections ----------------------------------------
   Found by sweeping every page at 320, 360, 390 and 768. */

/* At 320px the logo, the Book button and the burger did not fit on one row,
   pushing the page 30px wider than the screen. The sticky call bar at the
   bottom already carries Book and Call, so the header button is redundant on
   the narrowest phones. */
@media (max-width: 400px) {
  .header__bar { gap: .75rem; }
  .header__logo img,
  .header--overlay.is-stuck .header__logo img { width: 148px; }
  .header__aside .btn { display: none; }
}

/* Tap targets. WCAG 2.2 asks for 24x24 CSS pixels on anything that is not a
   link inside a sentence; the footer columns, breadcrumbs and jump rail were
   all 17px tall. Links in running prose are exempt and left alone. */
@media (max-width: 900px) {
  .footer__grid ul a,
  .footer__grid p a,
  .footer__legal a,
  .crumbs a, .crumbs span[aria-current],
  .onpage__list a,
  .info-list a {
    display: inline-block; min-height: 24px; line-height: 24px;
  }
  .footer__grid ul li { margin-bottom: .35rem; }
}

/* Labels that fell below ~10px on a phone. The TrustMyDoc block is deliberately
   left out: its small type is a drawing of a phone screen, not text to read. */
@media (max-width: 640px) {
  .crumbs { font-size: .68rem; }
  .glance dt { font-size: .68rem; }
  .hero__rail-item { font-size: .68rem; }
  .form-note__lbl { font-size: .68rem; }
  .w2 tbody th { font-size: .7rem; }
  .rev__when, .revs__link { font-size: .8rem; }
}

/* ---- Providers: alternating photo / text rows -------------------------
   A card grid caps how much a provider can say. Full-width rows give the bio
   room, and alternating the portrait side stops three rows reading as a list. */
.prow {
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3rem); align-items: start;
  padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.prow:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 880px) {
  .prow { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
  /* Photo to the right on alternate rows. Source order stays photo-first, so
     a screen reader and a phone both still meet the portrait before the bio. */
  .prow--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
  .prow--flip .prow__media { order: 2; }
}
.prow__media {
  border-radius: var(--radius-lg); overflow: hidden; background: var(--blush-tint);
  aspect-ratio: 4 / 5;
}
@media (min-width: 880px) { .prow__media { position: sticky; top: 6.5rem; } }
.prow__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

.prow__body { display: flex; flex-direction: column; gap: var(--s-3); }
.prow__name {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); line-height: 1.2; margin: 0;
}
.prow__role {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blush-ink); margin: 0;
}
.prow .provider__tags { margin-top: var(--s-2); }
/* The provider's own words, set apart from the biography that follows. */
.prow__quote {
  margin: var(--s-4) 0 0; padding: 0 0 0 2.2rem; position: relative;
}
.prow__quote::before {
  content: '\201C'; position: absolute; left: 0; top: -.28em;
  font-family: var(--font-display); font-size: 2.6rem; line-height: 1;
  color: var(--blush); font-weight: 400;
}
.prow__quote p {
  margin: 0; font-style: italic; font-size: .95rem; line-height: 1.7;
  color: var(--ink-soft);
}
.prow__cite {
  display: block; margin-top: .55rem; font-style: normal;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blush-ink);
}
.prow__cite::before { content: '\2014\00a0'; }

/* Education & credentials, in the shape of her reference: a mono label with a
   short rule under it, then an italic list. */
.creds { margin-top: var(--s-5); }
.creds__h {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500;
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blush-ink); margin: 0 0 var(--s-4); padding-bottom: .5rem;
  border-bottom: 0; position: relative;
}
.creds__h::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 2.6rem; height: 1px;
  background: var(--blush);
}
.creds__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.creds__list li {
  position: relative; padding-left: 1.15rem; font-style: italic;
  font-size: .94rem; line-height: 1.55; color: var(--ink-soft);
}
.creds__list li::before {
  content: ''; position: absolute; left: .1rem; top: .62em;
  width: 4px; height: 4px; background: var(--blush-deep);
}
.prow__bio { margin-top: var(--s-4); }
.prow__bio p { margin: 0 0 var(--s-4); color: var(--ink-soft); }
.prow__bio p:last-child { margin-bottom: 0; }
.prow .cv { margin-top: var(--s-5); }

/* Light emphasis inside a legal document — used where the source paperwork
   shouted in capitals. Same weight of emphasis, without the shouting. */
.u-soft {
  text-decoration: underline; text-decoration-color: var(--blush);
  text-decoration-thickness: .09em; text-underline-offset: .2em;
}

/* Insurance carrier logos: fixed row height so nine logos of different
   proportions still line up. */
.logo-grid {
  list-style: none; margin: var(--s-7) 0 0; padding: 0;
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.logo-grid li {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s-4); display: grid; place-items: center; min-height: 104px;
}
.logo-grid img { max-height: 56px; width: auto; object-fit: contain; }

/* Two centred cards rather than two full-width rows: the form name sits above
   its own button, so each download reads as one object. */
.doc-list {
  list-style: none; margin: 0 auto; padding: 0; max-width: 700px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4);
}
.doc-list li {
  flex: 0 1 300px; display: grid; justify-items: center; gap: var(--s-4);
  padding: var(--s-6) var(--s-5);
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.doc-list__name { font-family: var(--font-display); font-size: 1.08rem; font-weight: 400; color: var(--ink); }

.specials { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.specials img { width: 100%; display: block; }

/* Testimonials page: the same card as the homepage marquee, but in a static
   grid and without the 4-line clamp, since here the review is the content. */
.rev-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.rev--static { width: auto; }
.rev--static blockquote { display: block; -webkit-line-clamp: none; overflow: visible; }

/* ---------- 16. Insurance page ------------------------------------------- */
/* Everything on this page is centred, including the last row of logos — which
   a grid cannot do, so the logo row is a centred flex wrap instead. */
.section--centred { text-align: center; }
.section--centred .prose--wide { margin-inline: auto; }

.logo-grid {
  list-style: none; margin: var(--s-7) auto 0; padding: 0; max-width: 880px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4);
}
.logo-grid li {
  flex: 0 1 196px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s-4);
  display: grid; place-items: center; min-height: 104px;
}
.logo-grid img { max-height: 52px; width: auto; object-fit: contain; }

.callout {
  max-width: 640px; margin: var(--s-7) auto 0; padding: var(--s-5) var(--s-6);
  background: var(--blush-tint); border: 1px solid var(--blush-soft);
  border-radius: var(--radius-lg); text-align: center;
}
.callout__lead {
  font-family: var(--font-display); font-size: 1.08rem; font-weight: 400;
  color: var(--ink); margin: 0 0 var(--s-3);
}
.callout p { margin: 0 0 var(--s-3); font-size: .94rem; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); font-weight: 500; }

/* Interior pages already end on a padded content section, so the shared
   Connect block does not need its own top padding on top of that. */
.section--page + #contact { padding-top: 0; }

/* ---------- 17. Specials ------------------------------------------------- */
.specials { margin: 0; }
.specials__empty {
  max-width: 560px; margin: 0 auto; padding: var(--s-7) var(--s-6);
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.specials__lead {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 300;
  color: var(--ink); margin: 0 0 var(--s-3);
}
.specials__empty p { margin: 0; }
.specials__empty p + p { margin-top: var(--s-3); font-size: .95rem; }

.specials__doc { max-width: 860px; margin: 0 auto; }
.specials__frame {
  width: 100%; aspect-ratio: 8.5 / 11; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; background: #fff; display: block;
}
.specials__img {
  display: block; width: 100%; height: auto; border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.specials__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; margin-top: var(--s-5); }
.specials__fine { font-size: .86rem; color: var(--grey); margin-top: var(--s-4); }

/* ---------- 18. Testimonials page ---------------------------------------- */
.tbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .55rem; padding-bottom: var(--s-6); }
.tbar__score { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.tbar__count { font-size: .9rem; color: var(--grey); }
.tbar__link { font-family: var(--font-display); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blush-ink); border-bottom: 1px solid var(--blush);
  padding-bottom: 2px; margin-left: .75rem; }
.tbar__link:hover { color: var(--ink); border-color: var(--ink); }

/* The featured pull quote */
.feat { margin: 0 0 var(--s-6); padding: clamp(1.75rem, 1rem + 2.5vw, 3rem); text-align: center;
  background: var(--blush-tint); border-radius: var(--radius-lg); }
.feat blockquote { margin: 0 auto var(--s-4); font-family: var(--font-display); font-weight: 200;
  font-size: clamp(1.2rem, 1rem + 1.1vw, 1.75rem); line-height: 1.4; color: var(--ink); max-width: 34ch; }
.feat figcaption { display: flex; gap: .6rem; justify-content: center; align-items: baseline; }

/* ---------- 19. Two ways comparison -------------------------------------- */
.w2-wrap { overflow-x: auto; }
.w2 { width: 100%; border-collapse: collapse; min-width: 680px; }
/* Titles centred; cells left-aligned, because comparing across rows is the
   entire job of this block and centred cells make that harder. */
.w2 thead th { text-align: center; padding: 0 var(--s-5) var(--s-5); vertical-align: bottom; }
.w2__t { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; color: var(--ink); }
.w2__logo { display: block; margin: .55rem auto 0; height: 20px; width: auto; }
.w2 tbody th {
  text-align: left; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--grey-light); font-weight: 400;
  padding: var(--s-4) var(--s-5) var(--s-4) 0; width: 150px; vertical-align: top;
}
.w2 td { padding: var(--s-4) var(--s-5); vertical-align: top; font-size: .95rem; border-top: 1px solid var(--line); }
.w2 tbody tr td:last-child { background: var(--cream); }
.w2 tfoot td { border-top: 1px solid var(--line); padding-top: var(--s-5); text-align: center; }
@media (max-width: 700px) { .w2 tbody th { width: 110px; } }

/* A short H1 that is meant to hold one line on a desktop; it still wraps on
   narrow screens, where forcing one line would shrink it past readable. */
.h1--fit { text-wrap: balance; }
@media (min-width: 900px) { .section--tint .h1--fit { white-space: nowrap; } }

/* ---------- 20. TrustMyDoc block, extended (telehealth page) -------------- */
/* The homepage block, continued into a second navy panel carrying the detail
   this page needs. Same gradient, so the two read as one field. */
.tmdb__panel--more {
  padding-top: 0; padding-bottom: 3rem;
  background: linear-gradient(120deg, #1B2B41 0%, #24374F 48%, #3A4E6B 100%);
}
.tmdb__panel--more::before { display: none; }
.tmdb-more { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); grid-template-columns: 1fr;
  border-top: 1px solid rgba(228,199,122,.28); padding-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
@media (min-width: 900px) { .tmdb-more { grid-template-columns: 1.4fr .85fr; } }
.tmdb-more__h {
  margin: 0 0 var(--s-4); font-family: var(--tmdb-fd, 'Poppins', sans-serif); font-weight: 300;
  font-size: 1.15rem; color: #fff;
}
.tmdb-more__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 620px) { .tmdb-more__list { grid-template-columns: 1fr 1fr; } }
.tmdb-more__list li {
  position: relative; padding-left: 1.6em; font-size: .92rem; line-height: 1.6;
  color: rgba(255,255,255,.82);
}
.tmdb-more__list li::before {
  content: ''; position: absolute; left: 0; top: .34em; width: .85em; height: .85em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M5 0 H9 V5 H14 V9 H9 L5 5 V0 Z' fill='%23E4C77A'/><path d='M5 14 H9 V9 L5 5 H0 V9 H5 Z' fill='%23AF853A'/></svg>") no-repeat center / contain;
}
.tmdb-more__list strong { color: #fff; font-weight: 500; }
.tmdb-more__note {
  margin: var(--s-5) 0 0; padding-left: var(--s-4); border-left: 2px solid rgba(228,199,122,.4);
  font-size: .84rem; line-height: 1.6; color: rgba(255,255,255,.6);
}
.tmdb-steps ol { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-3);
  color: rgba(255,255,255,.82); font-size: .92rem; line-height: 1.6; }
.tmdb-steps ol::marker, .tmdb-steps li::marker { color: #E4C77A; }

/* Six questions in two columns of three. Each column keeps its own top rule so
   the two stacks read as parallel lists rather than one broken one. */
.faq-cols { display: grid; gap: 0 clamp(2rem, 1rem + 3vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .faq-cols { grid-template-columns: 1fr 1fr; } }

/* ---------- 21. Legal document (privacy policy) -------------------------- */
/* Small, dense, serif-free but formal: the point is that it reads as a legal
   document rather than as another marketing page. */
/* The measure was 74ch — comfortable for reading, but these two pages are
   reference documents people scan rather than read straight through, and the
   column looked lost in the page. Widened by one inch on each side. The
   min() keeps it from overflowing the viewport on a tablet, where two inches
   of extra column is more than the screen has to give. */
.legal-doc {
  max-width: min(100%, calc(74ch + 2in));
  margin-inline: auto; font-size: .84rem; line-height: 1.75; color: var(--grey);
}
.legal-doc h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: var(--ink);
  margin: 0 0 var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line);
}
.legal-doc h3 {
  font-family: var(--font-display); font-weight: 500; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); margin: var(--s-6) 0 var(--s-3);
}
.legal-doc h4 {
  font-family: var(--font-display); font-weight: 500; font-size: .84rem; color: var(--ink);
  margin: var(--s-5) 0 var(--s-2);
}
.legal-doc p { margin: 0 0 var(--s-4); }
.legal-doc strong { color: var(--ink); font-weight: 500; }
.legal-quote {
  padding-left: var(--s-4); border-left: 2px solid var(--blush); color: var(--ink-soft);
}

/* ---------- 22. Service category link lists ------------------------------ */
.svc-links__h {
  font-family: var(--font-display); font-weight: 300; font-size: 1.3rem; color: var(--ink);
  margin: 0 0 var(--s-5);
}
.svc-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.svc-links--one { grid-template-columns: 1fr; }
.svc-links li a, .svc-links li span {
  display: block; padding: var(--s-4) var(--s-5); border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: #fff; font-family: var(--font-display);
  font-size: .98rem; font-weight: 400; color: var(--ink); transition: border-color .2s, background-color .2s;
}
.svc-links li a:hover { border-color: var(--blush); background: var(--blush-tint); }
/* Services the live site lists without a page behind them stay unlinked. */
.svc-links li span { color: var(--grey); background: var(--cream); }

/* Breadcrumb trail on the service detail pages. Deliberately quiet — it is
   there for orientation and for the crawler, not to compete with the H1. */
.crumbs {
  background: var(--white); padding-block: var(--s-5) 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .62rem; letter-spacing: .13em; text-transform: uppercase;
}
.crumbs .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.crumbs a { color: var(--grey); text-decoration: none; }
.crumbs a:hover { color: var(--blush-ink); text-decoration: underline; }
.crumbs span[aria-current] { color: var(--ink); }
.crumbs__sep { color: var(--blush); }

/* "At a glance" spec strip: anesthesia, setting, duration, downtime. */
.section--glance { background: var(--white); padding-block: 0 clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }
.glance {
  margin: 0; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--cream);
  display: grid; grid-template-columns: 1fr; gap: 0;
}
.glance__row {
  padding: var(--s-5) var(--s-5);
  border-bottom: 1px solid var(--line);
}
.glance__row:last-child { border-bottom: 0; }
.glance dt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blush-ink); margin: 0 0 .45rem;
}
.glance dd {
  margin: 0; font-family: var(--font-display); font-weight: 300;
  font-size: .98rem; line-height: 1.45; color: var(--ink);
}
@media (min-width: 720px) {
  .glance { grid-template-columns: repeat(2, 1fr); }
  .glance__row { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
  .glance__row:nth-child(2n) { border-right: 0; }
  /* Last row of a full two-column grid has no border under it. */
  .glance__row:nth-last-child(-n+2):nth-child(2n+1) ~ .glance__row,
  .glance__row:nth-last-child(1):nth-child(2n+1) { border-bottom: 0; }
}
@media (min-width: 1000px) {
  .glance { grid-template-columns: repeat(4, 1fr); }
  .glance__row { border-bottom: 0; border-right: 1px solid var(--line); }
  .glance__row:last-child { border-right: 0; }
  .glance__row:nth-child(2n) { border-right: 1px solid var(--line); }
  .glance__row:last-child { border-right: 0; }
}

/* ---- Service-page questions: accordion + "On this page" rail ---------- */
.qa-layout { display: grid; gap: 2rem; }
@media (min-width: 900px) {
  .qa-layout { grid-template-columns: minmax(0, 1fr) 15.5rem; gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
}

.onpage { align-self: start; }
@media (min-width: 900px) { .onpage { position: sticky; top: 6.5rem; } }
/* On a phone the collapsed questions already are the table of contents — a
   jump list above them would just say everything twice. Hidden, not removed:
   the anchors stay in the HTML for crawlers either way. */
@media (max-width: 899px) { .onpage { display: none; } }
.onpage__h {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500;
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blush-ink); margin: 0 0 .9rem;
}
.onpage__list {
  list-style: none; margin: 0; padding: 0 0 0 1rem; display: grid; gap: .55rem;
  border-left: 1px solid var(--line);
}
.onpage__list a {
  display: block; font-family: var(--font-display); font-weight: 300;
  font-size: .88rem; line-height: 1.45; color: var(--grey); text-decoration: none;
  transition: color .2s;
}
.onpage__list a:hover { color: var(--blush-ink); }
.onpage__list a.is-open { color: var(--ink); }

.qa { border-bottom: 1px solid var(--line); scroll-margin-top: 6rem; }
.qa:first-of-type { border-top: 1px solid var(--line); }
.qa__s { list-style: none; cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; position: relative; }
.qa__s::-webkit-details-marker { display: none; }
.qa__s:focus-visible { outline: 2px solid var(--blush-deep); outline-offset: 3px; }
.qa__q {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem); line-height: 1.3;
  margin: 0; display: inline; transition: color .2s;
}
.qa__s:hover .qa__q { color: var(--blush-ink); }
/* Plus that becomes a minus: two bars, and only the upright one turns. One
   pseudo-element can't do it — rotating a whole "+" just gives you a "+". */
.qa__s::before, .qa__s::after {
  content: ''; position: absolute; right: .35rem; top: 50%;
  width: .82rem; height: 1px; margin-top: -.5px; background: var(--blush-deep);
}
.qa__s::before { transform: rotate(90deg); transition: transform .22s ease; }
.qa[open] .qa__s::before { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) { .qa__s::before { transition: none; } }

.qa__a { padding: 0 0 1.4rem; }
/* .prose > p can't reach these — they sit one level deeper, inside the panel. */
.qa__a > p { margin: 0 0 var(--s-4); }
.qa__a > *:last-child { margin-bottom: 0; }
.qa__a h3 { margin-top: var(--s-5); }

/* Tick list used on the service detail pages. */
.tick { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-2); }
.tick li { position: relative; padding-left: 1.5em; }
.tick li::before {
  content: ''; position: absolute; left: 0; top: .45em; width: .7em; height: .7em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M5 0 H9 V5 H14 V9 H9 L5 5 V0 Z' fill='%23E7C4C4'/><path d='M5 14 H9 V9 L5 5 H0 V9 H5 Z' fill='%23C99898'/></svg>") no-repeat center / contain;
}
@media (min-width: 620px) { .tick--two { grid-template-columns: 1fr 1fr; } }

/* Numbered steps on the service pages. */
.steps { margin: 0 0 var(--s-4); padding-left: 1.3em; display: grid; gap: var(--s-3); }
.steps::marker, .steps li::marker { color: var(--blush-deep); }

/* Services index: three category cards. */
.cat-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 860px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
.cat {
  display: block; padding: var(--s-6) var(--s-5); background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); transition: border-color .2s, background-color .2s;
}
.cat:hover { border-color: var(--blush); background: var(--blush-tint); }
.cat__name { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 300; color: var(--ink); }
.cat__desc { display: block; margin-top: var(--s-3); font-size: .92rem; color: var(--grey); }

/* ==========================================================================
   TrustMyDoc physician block — v1.0
   Namespace is .tmdb- , NOT .tmd- : z-dermatology.com already uses .tmd,
   .tmd-card and friends for a different block, and the two collided.
   SOURCE OF TRUTH. Do not fork this file; edit it here and re-copy.

   Every selector is namespaced .tmdb- so the block cannot collide with, or be
   restyled by, the host site's CSS. Nothing here targets a bare element
   outside .tmdb.

   Fonts: Poppins (display), Roboto (body), JetBrains Mono (labels).
   Add to the host page <head> if not already loaded:
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&family=Roboto:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
   ========================================================================== */

.tmdb{
  --tmdb-gold:#AF853A;
  --tmdb-gold-dim:#8B6628;
  --tmdb-gold-lt:#E4C77A;
  --tmdb-navy:#182639;
  --tmdb-cream:#F5EDD6;
  --tmdb-fd:'Poppins',Helvetica,Arial,sans-serif;
  --tmdb-fb:'Roboto',Helvetica,Arial,sans-serif;
  --tmdb-fm:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* host may override these two to sit the disclosure on its own page colour */
  --tmdb-legal-bg:#F2EFEE;
  --tmdb-legal-line:#E3DEDA;
  --tmdb-legal-ink:#6E6E6E;

  display:block;
  line-height:1.65;
}
.tmdb *,
.tmdb *::before,
.tmdb *::after{box-sizing:border-box}
.tmdb img{display:block;max-width:100%}
/* must out-specify the rule above (class+element beats a bare class) */
.tmdb img.tmdb__logo-inline{display:inline-block}
.tmdb a{text-decoration:none;color:inherit}

/* ---------- the navy panel ---------- */
.tmdb__panel{position:relative;overflow:hidden;padding:2.75rem 0 2.1rem;color:rgba(255,255,255,.76);
  background:linear-gradient(120deg,#182639 0%,#22344F 48%,#3A4E6B 100%)}
.tmdb__panel::before{content:'';position:absolute;left:6%;top:-70%;width:46%;height:240%;
  background:radial-gradient(closest-side,rgba(175,133,58,.32),rgba(175,133,58,0) 72%)}
.tmdb__wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(1.25rem,2vw + .5rem,3rem)}
.tmdb__in{position:relative;display:grid;grid-template-columns:1fr;gap:1.8rem;align-items:center}
@media(min-width:900px){.tmdb__in{grid-template-columns:auto 1fr;gap:calc(3rem + 19px)}}

/* ---------- copy ---------- */
.tmdb__h{margin:0 0 .6rem;font-family:var(--tmdb-fd);color:#fff;font-weight:300;
  font-size:clamp(1.15rem,.98rem + .85vw,1.55rem);line-height:1.32;letter-spacing:0}
.tmdb__logo-inline{height:1.02em;width:auto;display:inline-block;vertical-align:-.16em;
  margin:0 .12em;filter:brightness(0) invert(1)}
.tmdb__who{color:var(--tmdb-gold-lt);font-weight:400}
/* keeps the logo and the word 'app' on the same line whatever the name length */
.tmdb__brand{white-space:nowrap}

.tmdb__lede{margin:0;color:#fff;font-family:var(--tmdb-fb);font-size:.9rem;line-height:1.6;max-width:none}
@media(min-width:1180px){.tmdb__lede{white-space:nowrap}}
.tmdb__trio{margin:.45rem 0 .35rem;font-family:var(--tmdb-fb);font-size:.94rem;font-weight:400;color:#fff}
.tmdb__resp{margin:0;font-family:var(--tmdb-fb);font-size:.94rem;color:var(--tmdb-gold-lt)}
.tmdb__pts{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .5rem}
.tmdb__pts li{font-family:var(--tmdb-fm);font-size:.61rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tmdb-gold-lt);background:rgba(228,199,122,.12);border:1px solid rgba(228,199,122,.3);
  border-radius:100px;padding:.34em .8em}
.tmdb__emerg{margin:1.1rem auto 0;max-width:52ch;font-family:var(--tmdb-fb);font-size:.72rem;
  line-height:1.55;color:rgba(255,255,255,.66);font-weight:400}

/* ---------- download group ---------- */
.tmdb-dl{margin-top:1.45rem;text-align:center}
.tmdb-dl__lbl{display:block;margin-bottom:.8rem;font-family:var(--tmdb-fd);font-size:.7rem;
  font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.tmdb-dl__row{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.tmdb-dl__btn{display:inline-flex;align-items:center;gap:.7rem;background:transparent;
  border:1px solid rgba(255,255,255,.42);border-radius:8px;padding:.55rem 1.15rem .6rem;
  transition:border-color .25s,background-color .25s}
.tmdb-dl__btn:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.tmdb-dl__btn svg{width:26px;height:26px;flex:none}
.tmdb-dl__t{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.tmdb-dl__t small{font-family:var(--tmdb-fb);font-size:.62rem;color:rgba(255,255,255,.78)}
.tmdb-dl__t strong{font-family:var(--tmdb-fd);font-size:1.02rem;font-weight:400;color:#fff}
.tmdb-dl__url{display:inline-block;margin-top:.95rem;padding-top:.7rem;
  border-top:1px solid rgba(228,199,122,.34);font-family:var(--tmdb-fm);font-size:.74rem;
  letter-spacing:.08em;color:var(--tmdb-gold-lt)}
.tmdb-dl__url:hover{color:#fff}

/* ---------- phones ---------- */
.tmdb-phones{display:flex;align-items:flex-end;flex:none;justify-content:center}
.tmdb-ph{width:169px;flex:none;aspect-ratio:196/394;border-radius:28px;background:#0C1626;
  padding:9px;box-shadow:0 26px 60px rgba(0,0,0,.46);position:relative}
.tmdb-ph::before{content:'';position:absolute;top:15px;left:50%;transform:translateX(-50%);
  width:54px;height:5px;border-radius:99px;background:rgba(255,255,255,.2);z-index:3}
.tmdb-ph__s{width:100%;height:100%;border-radius:20px;overflow:hidden;position:relative;
  background:linear-gradient(180deg,#fff,var(--tmdb-cream));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;padding:.9rem}
.tmdb-phones .tmdb-ph:first-child{transform:rotate(-4deg) translateY(8px);z-index:1}
.tmdb-phones .tmdb-ph:first-child .tmdb-ph__s{padding:0;gap:0}
.tmdb-phones .tmdb-ph:last-child{transform:rotate(4deg) translateX(7px);width:153px;z-index:2}

.tmdb-strip{position:absolute;top:0;left:0;right:0;z-index:2;padding:1.925rem .4rem .75rem;
  display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,0))}
.tmdb-strip img{width:84%}

.tmdb-card{width:100%;height:100%;display:flex;flex-direction:column}
/* NOTE: pic padding-top MUST stay (strip height + pic padding-bottom) or the gap
   above the photo stops matching the gap below it. Currently 63px + 12px. */
.tmdb-card__pic{flex:1;background:#fff;display:grid;place-items:center;padding:4.725rem .55rem .75rem}
.tmdb-card__photo{width:80%;aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  border:1px solid rgba(24,38,57,.18);background:linear-gradient(160deg,#E8EDF3,#D7DFE9);
  display:grid;place-items:center}
.tmdb-card__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.tmdb-card__photo svg{width:52%;fill:#9FB0C4}
.tmdb-card__meta{background:#fff;padding:.6rem .85rem 1.05rem;text-align:center;display:grid;gap:.3rem}
.tmdb-card__name{font-family:var(--tmdb-fd);font-size:.56rem;font-weight:400;color:var(--tmdb-navy);
  white-space:nowrap}
.tmdb-card__role{font-family:var(--tmdb-fm);font-size:.42rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tmdb-gold-dim)}
.tmdb-card__pill{font-family:var(--tmdb-fd);font-size:.56rem;letter-spacing:.06em;
  background:var(--tmdb-gold);color:#fff;border-radius:100px;padding:.4em .9em}

.tmdb-ph__logo{width:88%}
.tmdb-qr{width:70%;aspect-ratio:1;border-radius:8px;background:#fff;padding:5px;
  box-shadow:0 2px 10px rgba(24,38,57,.14)}
.tmdb-qr img{width:100%;height:100%;display:block}
.tmdb-ph__note{font-family:var(--tmdb-fm);font-size:.46rem;letter-spacing:.1em;
  color:var(--tmdb-gold-dim);text-transform:uppercase;text-align:center}

/* ---------- disclosure ---------- */
.tmdb-legal{background:var(--tmdb-legal-bg);border-top:1px solid var(--tmdb-legal-line)}
.tmdb-legal__in{max-width:1180px;margin:0 auto;padding:1.05rem clamp(1.25rem,2vw + .5rem,3rem);
  display:grid;grid-template-columns:1fr;gap:.45rem}
@media(min-width:820px){.tmdb-legal__in{grid-template-columns:104px 1fr;gap:2rem;align-items:start}}
.tmdb-legal__lbl{font-family:var(--tmdb-fm);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tmdb-gold-dim);padding-top:.3em}
.tmdb-legal p{margin:0;font-family:var(--tmdb-fb);font-size:.675rem;line-height:1.72;
  text-align:left;font-style:italic;color:var(--tmdb-legal-ink)}

@media (prefers-reduced-motion: reduce){
  .tmdb-dl__btn{transition:none}
}

/* ==========================================================================
   WordPress glue
   --------------------------------------------------------------------------
   Everything above is the approved design, unchanged. Everything below exists
   only because WordPress emits markup the static build never had: the admin
   bar, core block alignment classes, captions, pagination, comments and the
   blog sidebar. Nothing here restyles the design.
   ========================================================================== */

/* --- Admin bar. The header is sticky/fixed, so it has to start below it. --- */
.admin-bar .header { top: 32px; }
.admin-bar .header--overlay { top: 32px; }
.admin-bar .mobile-nav { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .header,
  .admin-bar .header--overlay,
  .admin-bar .mobile-nav { top: 46px; }
}

/* --- Core's own visually-hidden class, aliased onto the design's. --- */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed !important; top: var(--s-4); left: var(--s-4);
  width: auto; height: auto; clip: auto; clip-path: none;
  padding: var(--s-3) var(--s-5); background: var(--white); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow-md); z-index: 200;
}

/* --- Block alignment and captions. --- */
.alignleft  { float: left;  margin: 0 var(--s-5) var(--s-4) 0; }
.alignright { float: right; margin: 0 0 var(--s-4) var(--s-5); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { margin-inline: auto; }
.prose .alignfull { width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption img { display: block; }
.wp-caption-text, .wp-element-caption, figcaption {
  font-size: var(--t-small); color: var(--grey); margin-top: var(--s-2);
}
.wp-block-image img { max-width: 100%; height: auto; border-radius: var(--radius); }
.wp-block-quote {
  border-left: 2px solid var(--blush-deep); padding-left: var(--s-5); margin-inline: 0;
  font-family: var(--font-display); font-weight: 300;
}

/* --- Pagination and paginated posts. --- */
.navigation.pagination, .page-links {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  justify-content: center; margin-top: var(--s-7);
}
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.navigation.pagination a, .navigation.pagination .current,
.page-links a, .page-links > .post-page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; padding: .55rem .8rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-display); font-size: .92rem; color: var(--ink);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.navigation.pagination a:hover, .page-links a:hover {
  background: var(--blush-tint); border-color: var(--blush-soft);
}
.navigation.pagination .current, .page-links > .post-page-numbers:not(a) {
  background: var(--blush-soft); border-color: var(--blush-deep); color: var(--blush-ink);
}

/* --- Blog sidebar widgets. --- */
.widget { margin-bottom: var(--s-6); }
.widget__title {
  font-family: var(--font-display); font-weight: 300; font-size: 1.05rem;
  letter-spacing: .04em; margin: 0 0 var(--s-3);
}
.widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.widget a { color: var(--ink); }
.widget a:hover { color: var(--blush-ink); }

/* --- Comments. Plain, because the design never called for them. --- */
.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.comment-list ol { list-style: none; padding-left: var(--s-5); }
.comment-body { border-bottom: 1px solid var(--line); padding-bottom: var(--s-4); }
.comment-meta { font-size: var(--t-small); color: var(--grey); }
.comment-form { display: grid; gap: var(--s-4); }
.comment-form input[type="text"], .comment-form input[type="email"],
.comment-form input[type="url"], .comment-form textarea {
  width: 100%; padding: .8rem .9rem; font: inherit; color: var(--ink);
  background: var(--white); border: 1px solid var(--line-field); border-radius: var(--radius);
}

/* --- Search form outside the contact block. --- */
.searchform { display: grid; gap: var(--s-4); max-width: 34rem; }