/* Fonts: Inter and Playfair Display (SIL Open Font License), self-hosted in /fonts/ so pages don't wait on
   Google Fonts and visitors' browsers never contact a third party. Latin subset, same files Google serves. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/playfair-display-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/playfair-display-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/playfair-display-latin-500-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   THEME: the only place colors are defined. Four clinic colors (6 Nov 2026), nothing else:
     #FEBF4E gold, #FFFFFF white, #0A0906 black, #FFFAF5 off-white.
   Every other token is one of those four at an alpha (borders, shadows, overlays, secondary
   text). Photos, logo files, accreditation logos and the Google Maps embed keep their own colors.
   Rules: gold is never text or an icon on white/off-white (1.6:1); on light surfaces text, links
   and icons are black. Gold = button fills (black text, 12.1:1), accents/rules, and text on black
   (12.1:1). Contrast (WCAG AA 4.5:1 text, 3:1 UI), measured on the blended color:
     --ink on white 19.9, on off-white 19.2      --ink-muted on white 9.4, on off-white 9.2
     --on-dark on ink 19.9                        --on-dark-muted on ink 12.0
     --ink-field (control borders) on white 5.7   gold on ink 12.1, ink on gold 12.1
   ========================================================================== */
:root {
  color-scheme: light;
  /* the four colors */
  --gold: #FEBF4E;
  --white: #FFFFFF;
  --ink: #0A0906;
  --cream: #FFFAF5;
  /* alphas of them */
  --ink-muted: rgba(10,9,6,.75);      /* secondary text on light */
  --ink-field: rgba(10,9,6,.62);      /* form control borders (3:1 UI contrast) */
  --ink-line: rgba(10,9,6,.16);       /* card and divider borders (decorative) */
  --ink-tint: rgba(10,9,6,.05);       /* hover tint on light */
  --ink-shadow: rgba(10,9,6,.28);     /* shadows */
  --on-dark: #FFFFFF;
  --on-dark-muted: rgba(255,255,255,.78); /* secondary text on black */
  --on-dark-line: rgba(255,255,255,.18);  /* borders on black */
  --on-dark-tint: rgba(255,255,255,.1);   /* hover tint on black */
  --radius: 14px;
  --max: 1180px;
}
* { box-sizing: border-box; }
figure { margin: 0; }  /* WordPress prints photos as <figure>; no browser default margins */
[hidden] { display: none !important; }
/* Keeps #anchors (e.g. #doctor, #first-visit) clear of the sticky header */
html { scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font: 16px/1.65 Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 500; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(34px, 5.4vw, 60px); }
h2 { font-size: clamp(26px, 3.4vw, 40px); }
h3 { font: 600 18px/1.35 Inter, sans-serif; margin: 0 0 .4em; }
h1 em, h2 em { color: inherit; font-style: italic; }
.dark h1 em, .dark h2 em, .partner h2 em { color: var(--gold); }
.light h2 em, .light h1 em { color: var(--ink); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 780px; }
.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink); margin-top: 0; margin-bottom: 14px;  /* also when WordPress prints it as <p> */
}
.dark .eyebrow { color: var(--gold); }
.lead { font-size: 18px; color: var(--ink-muted); max-width: 56ch; }
.dark .lead { color: var(--on-dark-muted); }
section { padding: 88px 0; }
@media (max-width: 720px) { section { padding: 56px 0; } }
.bg-white { background: var(--white); }
.bg-cream { background: var(--cream); }
.bg-cream-2 { background: var(--cream); }

/* Accessibility helpers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 16px; border-radius: 8px;
  background: var(--ink); color: var(--on-dark); font-weight: 600; font-size: 15px; text-decoration: none;
}
.skip:focus { top: calc(8px + env(safe-area-inset-top, 0px)); }
/* Keyboard focus: deep gold on light surfaces, gold on dark ones */
:is(a, button, summary, .svc, input, select, textarea, .table-wrap):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
:is(.dark, header.site, footer.site) :is(a, button, summary, .svc, input, select, textarea):focus-visible,
.skip:focus-visible { outline-color: var(--gold); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 999px;
  font-weight: 600; font-size: 15px; text-decoration: none; border: 1.5px solid transparent;
  cursor: pointer; font-family: inherit; text-align: center;
}
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--ink); color: var(--gold); border-color: var(--gold); }
.btn-ghost { border-color: currentColor; color: var(--ink); background: none; }
.dark .btn-ghost { color: var(--on-dark); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 720px) { .hero .btns .btn, .page-hero .btns .btn { flex: 1 1 100%; justify-content: center; } }


/* Header */
header.site {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--ink);
  color: var(--on-dark); border-bottom: 2px solid var(--gold);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.logo img { height: 44px; width: auto; }
.logo span { font-family: "Playfair Display", serif; font-size: 22px; }
.menu { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; font-size: 15px; }
.menu > li { position: relative; }
.menu a { text-decoration: none; color: var(--on-dark-muted); }
.menu a:hover, .menu a.active { color: var(--on-dark); }
.menu a.active { box-shadow: inset 0 -2px 0 var(--gold); padding-bottom: 4px; }
/* Services: the link goes to the page, the separate toggle opens the list (disclosure) */
.menu .has-sub { display: flex; align-items: center; gap: 2px; }
.sub-toggle {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--on-dark-muted); cursor: pointer;
}
.sub-toggle:hover, .sub-toggle[aria-expanded="true"] { color: var(--on-dark); }
.sub-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu .sub {
  display: none; position: absolute; top: 100%; left: -16px; padding: 14px 0; margin-top: 10px; list-style: none;
  background: var(--ink); border: 1px solid var(--on-dark-line); border-radius: 12px; min-width: 250px;
  box-shadow: 0 20px 40px -20px rgba(10,9,6,.6);
}
.menu .sub::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.menu .has-sub:hover:not(.hover-off) > .sub, .menu .has-sub.open > .sub { display: block; }
/* 14 services: two columns keep the list short enough for a laptop screen */
.menu .sub { columns: 2; column-gap: 0; min-width: 470px; }
.menu .sub li { break-inside: avoid; }
.menu .sub a { display: block; padding: 7px 18px; font-size: 14px; }
.menu .sub a[aria-current="page"] { color: var(--on-dark); box-shadow: inset 2px 0 0 var(--gold); }
.nav-cta { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.phone { font-size: 15px; text-decoration: none; color: var(--on-dark); white-space: nowrap; }
/* "Book" + " a Consultation" are separate flex items: the gap stands in for the word space */
.nav-cta .btn { padding: 11px 20px; white-space: nowrap; gap: .28em; }
.burger {
  display: none; place-items: center; width: 44px; height: 44px; padding: 0; margin-right: -10px;
  background: none; border: 0; border-radius: 8px; color: var(--on-dark); cursor: pointer;
}
/* The menu scrolls inside the viewport below the 64px bar (+1px header border), so Book
   and Call stay reachable however long the list gets. */
.mobile-menu {
  display: none; border-top: 1px solid var(--on-dark-line); padding: 10px 0 calc(24px + env(safe-area-inset-bottom, 0px));
  max-height: calc(100vh - 65px - env(safe-area-inset-top, 0px));
  max-height: calc(100dvh - 65px - env(safe-area-inset-top, 0px));
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu li a, .mobile-menu .m-call { display: block; padding: 12px 20px; text-decoration: none; color: var(--on-dark); font-size: 17px; }
.mobile-menu li li a { padding: 9px 20px 9px 40px; font-size: 15.5px; color: var(--on-dark-muted); }
.mobile-menu a.active, .mobile-menu a[aria-current="page"] { color: var(--gold); }
.mobile-menu .btn { display: flex; justify-content: center; margin: 12px 20px 0; }
/* Mobile Services: link + toggle on one row, the 14 services collapse below */
.mobile-menu .m-row { display: flex; align-items: center; }
.mobile-menu .m-row a { flex: 1; min-width: 0; }
.mobile-menu .m-sub-toggle { width: 44px; height: 44px; margin-right: 10px; flex-shrink: 0; }
.mobile-menu .m-sub-toggle svg { width: 18px; height: 18px; }
.mobile-menu .m-sub { display: none; padding-bottom: 6px; }
.mobile-menu .m-has-sub.open > .m-sub { display: block; }
/* Narrow desktops: the labels wrapped to two lines at 1081px, so the header phone
   number (also in the hero, CTA and footer) drops out first and the gap tightens */
.menu a { white-space: nowrap; }
/* In that band a 44px phone icon keeps a call link in the header */
.phone-icon {
  display: none; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--on-dark-line); color: var(--on-dark);
}
.phone-icon:hover { border-color: var(--gold); }
.phone-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1340px) {
  .phone { display: none; }
  .phone-icon { display: grid; }
  .menu { gap: 20px; }
}
@media (max-width: 1200px) {
  .main-nav, .phone, .phone-icon { display: none; }
  .burger { display: grid; }
  .nav { height: 64px; }
  .logo img { height: 36px; }
  header.open .mobile-menu { display: block; }
}
/* Phones: the Book button stays, compact, with a short label */
@media (max-width: 480px) {
  .nav { gap: 12px; }
  .nav-cta { gap: 10px; }
  .nav-cta .btn { padding: 9px 14px; font-size: 14px; }
  .nav-cta .btn .lbl-rest { display: none; }
}

/* Home hero */
.hero {
  position: relative; color: var(--on-dark); padding: 120px 0 110px;
  background: linear-gradient(90deg, rgba(10,9,6,.95) 0%, rgba(10,9,6,.85) 50%, rgba(10,9,6,.55) 100%),
              url("images/clinic/dr-asemota-white-dress.jpg") 70% center/cover, var(--ink);
}
.hero .lead { font-size: 20px; }
/* The eyebrow sits inside the home <h1> (so the heading carries "fertility clinic in Metro Atlanta"), styled as before. */
.hero h1 .eyebrow { display: block; width: fit-content; font-family: Inter, system-ui, sans-serif; font-style: normal; line-height: 1.65; margin: 5px 0 15px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 40px; font-size: 14px; color: var(--on-dark-muted); }
/* Check drawn in CSS: the self-hosted Latin font subset has no ✓ glyph. */
.hero-trust span::before { content: ""; display: inline-block; width: 9px; height: 5px; margin: 0 9px 0 1px; border-left: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: translateY(-4px) rotate(-45deg); }
@media (max-width: 720px) {
  .hero { padding: 64px 0 56px; background-position: 70% center; }
  .hero .lead { font-size: 17px; }
}

/* Inner-page hero: ONE template for every inner page */
.page-hero { background: var(--ink); color: var(--on-dark); padding: 64px 0 60px; }
.page-hero h1 { font-size: clamp(32px, 4.4vw, 50px); max-width: 20ch; }
.page-hero .lead { margin: 0; }
.crumbs { font-size: 13px; color: var(--on-dark-muted); margin-bottom: 22px; }
.crumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--on-dark); }
.crumbs span { margin: 0 8px; opacity: .5; }
@media (max-width: 720px) { .page-hero { padding: 44px 0 40px; } }

/* Two-column split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split > * { min-width: 0; }
.split.wide-left { grid-template-columns: 7fr 5fr; }
.split .media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; max-width: 100%; background: var(--cream); }
.split .media img { width: 100%; height: 100%; object-fit: cover; }
/* Two text columns (no image): align to the top so headings line up */
.split.top { align-items: start; }
.split p + h3, .split .checks + h3 { margin-top: 32px; }
@media (max-width: 860px) { .split, .split.wide-left { grid-template-columns: 1fr; gap: 32px; } }

/* Doctor */
.doctor-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.doctor-grid > * { min-width: 0; }
.portrait { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; max-width: 100%; background: var(--cream); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.creds { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.creds li { font-size: 13px; padding: 6px 12px; border: 1px solid var(--ink-line); border-radius: 999px; color: var(--ink-muted); }
blockquote.pull {
  margin: 28px 0 0; padding-left: 20px; border-left: 2px solid var(--gold);
  font-family: Inter, system-ui, sans-serif; font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.5; color: var(--ink);
}
.aside-line { color: var(--ink-muted); margin-top: 24px; }
@media (max-width: 720px) { blockquote.pull { font-size: 18px; } }
@media (max-width: 860px) { .doctor-grid { grid-template-columns: 1fr; gap: 32px; } .portrait { max-width: 420px; } }

/* Section head */
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.sec-head .lead { margin: 0; }

/* Service cards */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.svc-grid.three { grid-template-columns: repeat(3, 1fr); }
.svc-grid > * { min-width: 0; }
.svc {
  background: var(--white); border: 1px solid var(--ink-line); border-radius: var(--radius); padding: 26px 24px;
  text-decoration: none; display: flex; flex-direction: column;
}
/* Only linked cards react on hover; info-only cards (e.g. PGT types) are plain <div>s */
a.svc:hover { border-color: var(--gold); box-shadow: 0 10px 30px -18px rgba(10,9,6,.25); }
.svc svg { width: 34px; height: 34px; stroke: var(--ink); fill: none; stroke-width: 1.5; margin-bottom: 18px; }
.svc p { margin: 0; font-size: 14.5px; color: var(--ink-muted); flex: 1; }
.svc .more { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ink); }
/* Wide card: spans two tracks so the grid fills a 3-col (and 2-col) layout with no orphan.
   It must start in column 1 or 2 at 3 columns and in column 1 at 2 columns. */
.svc.span-2 { grid-column: span 2; }
/* Space around a grid that follows a heading or lead (.sec-head brings its own 44px) */
h2 + .svc-grid, .lead + .svc-grid { margin-top: 40px; }
.svc-grid + p { margin-top: 28px; }
@media (max-width: 1000px) { .svc-grid, .svc-grid.three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .svc-grid, .svc-grid.three { grid-template-columns: 1fr; } .svc.span-2 { grid-column: auto; } }

/* Feature grid (not a sequence): icon per item, same style as service cards */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; margin-top: 44px; }
.why-grid > * { min-width: 0; }
.why-item svg { display: block; width: 34px; height: 34px; stroke: var(--ink); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 16px; }
.why-item p { margin: 0; color: var(--ink-muted); font-size: 15px; }
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .why-grid { grid-template-columns: 1fr; gap: 28px; } }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; counter-reset: s; list-style: none; padding: 0; }
.steps > li { min-width: 0; }
.steps.four { grid-template-columns: repeat(4, 1fr); }
.steps li { background: var(--cream); border-radius: var(--radius); padding: 26px; }
.bg-cream .steps li { background: var(--white); border: 1px solid var(--ink-line); }
.steps li::before {
  counter-increment: s; content: counter(s);
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--gold); color: var(--ink); font-weight: 600; margin-bottom: 16px;
}
.steps p { margin: 0; color: var(--ink-muted); font-size: 15px; }
@media (max-width: 980px) { .steps.four { grid-template-columns: repeat(2, 1fr); } }
.steps.five { grid-template-columns: repeat(5, 1fr); }
/* Five steps can't split evenly, so below 1100px they go straight to one column (3 + 2
   left a gap), with the number beside the text to keep the list short */
@media (max-width: 1100px) {
  .steps.five { grid-template-columns: 1fr; gap: 12px; max-width: 780px; }
  .steps.five li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 18px; padding: 20px 24px; }
  .steps.five li::before { grid-row: span 2; margin-bottom: 0; }
  .steps.five h3 { margin: 5px 0 2px; }
}
@media (max-width: 820px) { .steps, .steps.four { grid-template-columns: 1fr; } }
/* Compact steps: number beside text, inside a card (contact page) */
.steps.compact { grid-template-columns: 1fr; gap: 16px; margin-top: 14px; }
.steps.compact li { background: none; border: 0; padding: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; }
.steps.compact li::before { grid-row: span 2; margin-bottom: 0; }
.steps.compact h3 { font-size: 15.5px; margin: 5px 0 2px; }
.steps.compact p { font-size: 14px; }

/* Check list */
.checks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.checks li { padding-left: 32px; position: relative; min-width: 0; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--gold); background: radial-gradient(circle, var(--gold) 0 3px, transparent 4px);
}
.checks.two { grid-template-columns: 1fr 1fr; gap: 12px 32px; }
@media (max-width: 620px) { .checks.two { grid-template-columns: 1fr; } }

/* Testimonials */
.t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.t-grid > * { min-width: 0; }
.t-card { background: var(--white); border: 1px solid var(--ink-line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; }
.t-card .t-label { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--ink); background: var(--cream); border-radius: 999px; padding: 4px 10px; }
.t-card q { display: block; margin: 14px 0 22px; font-size: 16px; line-height: 1.6; quotes: "“" "”"; flex: 1; }
.t-card .tag { display: inline-block; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--cream); border-radius: 999px; padding: 4px 10px; margin-top: 12px; }
.t-who { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.t-who .av { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--cream); display: grid; place-items: center; font-weight: 600; color: var(--ink); }
.t-who small { display: block; color: var(--ink-muted); }
.t-foot { margin-top: 28px; }
.t-foot a { color: var(--ink); font-weight: 600; text-decoration: none; }
@media (max-width: 900px) { .t-grid { grid-template-columns: 1fr; } }

/* Long-form story: a rule between stories (the change note comes first, so no :first-child) */
.story { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; padding: 0 0 40px; }
.story + .story { border-top: 1px solid var(--ink-line); padding-top: 40px; }
.story .who { font-size: 14px; color: var(--ink-muted); }
.story .who b { display: block; font-size: 17px; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.story blockquote { margin: 0; font-family: Inter, system-ui, sans-serif; font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.55; }
.story p { color: var(--ink-muted); }
@media (max-width: 720px) { .story { grid-template-columns: 1fr; gap: 14px; } .story blockquote { font-size: 18px; } }

/* Locations */
.loc-grid { display: grid; grid-template-columns: 1fr 1fr 0.9fr; gap: 18px; margin-top: 44px; }
.loc-grid > * { min-width: 0; }
.loc-grid.two { grid-template-columns: 1fr 1fr; }
.loc-grid.flush { margin-top: 0; }
.loc { border: 1px solid var(--ink-line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; background: var(--white); }
.loc .map {
  height: 150px; background:
    radial-gradient(circle at 60% 55%, var(--gold) 0 7px, transparent 8px),
    repeating-linear-gradient(0deg, transparent 0 28px, var(--ink-line) 28px 29px),
    repeating-linear-gradient(90deg, transparent 0 34px, var(--ink-line) 34px 35px),
    var(--cream);
}
.loc .map.tall { height: 240px; }
.loc .body { padding: 22px 24px 26px; }
.loc h2 { font-size: 30px; }
.loc address { font-style: normal; color: var(--ink-muted); font-size: 15px; margin-bottom: 14px; }
.loc .body p { margin: 0 0 14px; color: var(--ink-muted); font-size: 15px; }
.loc a.more { color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.loc .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hours { background: var(--cream); border-radius: var(--radius); padding: 24px; font-size: 15px; }
.bg-cream .hours { background: var(--white); border: 1px solid var(--ink-line); }
.hours dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 10px 0 18px; }
.hours dt { color: var(--ink-muted); }
.hours dd { margin: 0; overflow-wrap: anywhere; }
.hours a { text-decoration: none; }
.hours > p { margin: 10px 0 0; color: var(--ink-muted); }
@media (max-width: 900px) { .loc-grid, .loc-grid.two { grid-template-columns: 1fr; } }
.areas { columns: 4 160px; margin: 24px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink-muted); }
.areas li { padding: 3px 0; break-inside: avoid; }

/* Team: space after the h2, more between groups (the change notes come first, so no :first-of-type) */
.team-group { margin-top: 40px; }
.team-group + .team-group { margin-top: 56px; }
.accreditations { margin-top: 56px; }
.team-group h3, .accreditations h3 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 20px; }
/* Column count per group so no row holds a lone tile: 7 = 4+3, 4 = 4, 5 = 5 (3+2 on tablet) */
.team { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 22px; }
.team.cols-5 { --cols: 5; }
.member { min-width: 0; }
.member .ph { aspect-ratio: 4/5; max-width: 100%; border-radius: 12px; overflow: hidden; background: var(--cream); margin-bottom: 12px; }
.member .ph img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.member b { display: block; font-weight: 600; font-size: 15.5px; }
.member small { color: var(--ink-muted); font-size: 13.5px; }
@media (max-width: 900px) { .team.cols-5 { --cols: 3; } }
@media (max-width: 620px) {
  .team { --cols: 2; gap: 16px; }
  /* Phones: 7 clinical tiles in 2 columns would leave one alone, so the first tile spans
     the row with its photo at one column's width and the name beside it (1 + 3 rows of 2) */
  .team:not(.compact) > .member:first-child {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; align-items: center;
  }
  .team:not(.compact) > .member:first-child .ph { grid-row: span 2; margin: 0; }
  .team:not(.compact) > .member:first-child b { align-self: end; }
  .team:not(.compact) > .member:first-child small { align-self: start; }
  /* Phones: lab + admin become a compact list (small round avatar, name, role) */
  .team.compact { grid-template-columns: 1fr; gap: 12px; }
  .team.compact .member { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; }
  .team.compact .ph { grid-row: span 2; width: 52px; aspect-ratio: 1; border-radius: 50%; margin: 0; }
  .team.compact .member b { align-self: end; }
  .team.compact .member small { align-self: start; }
}

/* Credentials table */
.cv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.cv > div { background: var(--white); border: 1px solid var(--ink-line); border-radius: var(--radius); padding: 24px; min-width: 0; }
.cv ul { margin: 0; padding-left: 18px; color: var(--ink-muted); font-size: 15px; }
.cv li { margin-bottom: 8px; }
@media (max-width: 860px) { .cv { grid-template-columns: 1fr; } }

/* Price table: the wrapper carries the border and radius (border-collapse ignores them on
   the table) and scrolls sideways on narrow screens instead of widening the page */
.table-wrap { background: var(--white); border: 1px solid var(--ink-line); border-radius: var(--radius); overflow: hidden; overflow-x: auto; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { text-align: left; padding: 16px 22px; border-bottom: 1px solid var(--ink-line); }
.price-table th { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; background: var(--cream); }
.price-table td.amt { text-align: right; font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-table td.amt.tbd { font-weight: 500; font-size: 14px; color: var(--ink-muted); white-space: normal; }
.price-table th.amt { text-align: right; }
/* Comparison tables: row headers read as body text, not as column labels */
.price-table tbody th[scope="row"] { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ink); background: none; font-weight: 600; }
.price-table tr:last-child td { border-bottom: 0; }
/* Grouped rows (biopsy + PGT lab analysis): sub-row indented, shared rule removed */
.price-table tr.group-start td { border-bottom: 0; padding-bottom: 6px; }
.price-table tr.group-sub td { padding-top: 6px; }
.price-table tr.group-sub td:first-child { padding-left: 40px; color: var(--ink-muted); font-size: 15px; }
.fine { font-size: 13.5px; color: var(--ink-muted); margin-top: 14px; }
@media (max-width: 520px) { .price-table th, .price-table td { padding: 13px 14px; } .price-table td.amt { font-size: 16px; } .price-table tr.group-sub td:first-child { padding-left: 26px; } }

/* Typical-cycle estimate callout (financing) */
.estimate { background: var(--cream); border-radius: var(--radius); padding: 22px 24px; margin: 4px 0 24px; display: grid; gap: 6px; }
.estimate > * { min-width: 0; }
.estimate .label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.estimate .range { font-size: clamp(26px, 4vw, 32px); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--ink); }
.estimate .range small { font-size: 15px; font-weight: 500; color: var(--ink-muted); }
.estimate p { margin: 0; font-size: 14.5px; color: var(--ink-muted); max-width: 62ch; }

/* Payment options (financing) */
.pay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.pay-grid > div { background: var(--white); border: 1px solid var(--ink-line); border-radius: var(--radius); padding: 24px; }
.pay-grid svg { display: block; width: 30px; height: 30px; stroke: var(--ink); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.pay-grid p { margin: 0; color: var(--ink-muted); font-size: 15px; }
.pay-grid .ph-text { display: inline-block; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
@media (max-width: 860px) { .pay-grid { grid-template-columns: 1fr; } }

/* FAQ */
.faq { margin-top: 32px; border-top: 1px solid var(--ink-line); }
.faq details { border-bottom: 1px solid var(--ink-line); padding: 4px 0; }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font-weight: 600; font-size: 16.5px; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 26px; font-weight: 400; color: var(--ink); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 20px; color: var(--ink-muted); max-width: 70ch; }

/* Form */
.form-card { background: var(--white); border: 1px solid var(--ink-line); border-radius: var(--radius); padding: 36px; }
.form-title { font-size: 28px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-card .form-grid { margin-top: 20px; }
.form-grid > * { min-width: 0; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
label .req { font-weight: 400; color: var(--ink-muted); }
/* 16px text keeps iOS from zooming in on focus */
input, select, textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--ink-field); border-radius: 10px; background: var(--white);
  font: 16px Inter, sans-serif; color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--ink); }
[aria-invalid="true"] { border-color: var(--ink); }
.field-error { margin: 6px 0 0; font-size: 14px; font-weight: 500; color: var(--ink); }
textarea { min-height: 130px; resize: vertical; }
.contact-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: start; }
.contact-grid > * { min-width: 0; }
.contact-side { display: grid; gap: 18px; }
.contact-side > * { min-width: 0; }
.form-intro { margin: 0 0 4px; font-size: 15.5px; color: var(--ink-muted); }
.form-intro b { color: var(--ink); font-weight: 600; }
/* Phone-first call line: shown only when the contact details card drops below the form */
.call-first { display: none; margin: 0 0 18px; padding: 14px 18px; background: var(--white); border: 1px solid var(--ink-line); border-radius: var(--radius); font-size: 15px; }
.call-first a { font-weight: 600; color: var(--ink); white-space: nowrap; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .call-first { display: block; } }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } .form-card { padding: 24px 20px; } }

/* CTA */
.cta { background: var(--cream); text-align: center; }
.cta .lead { margin: 0 auto; }
.cta .btns { justify-content: center; }

/* Footer, trimmed */
footer.site { background: var(--ink); color: var(--on-dark-muted); padding: 64px 0 28px; font-size: 14.5px; }
.f-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.f-grid > * { min-width: 0; }
footer h2 { color: var(--on-dark); font: 600 13px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 16px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--on-dark); }
.f-brand p { margin: 14px 0 0; max-width: 34ch; }
.f-brand .tag { font-family: Inter, system-ui, sans-serif; font-style: italic; font-weight: 500; color: var(--gold); font-size: 17px; }
/* Social links */
.social { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.social .icon { width: 38px; height: 38px; border: 1px solid var(--on-dark-line); border-radius: 50%; display: grid; place-items: center; }
.social svg { width: 17px; height: 17px; stroke: var(--on-dark); fill: none; stroke-width: 1.6; }
.social .ph-mark { font-size: 13px; }
.f-bottom { border-top: 1px solid var(--on-dark-line); margin-top: 48px; padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.f-bottom .f-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
@media (max-width: 900px) { .f-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .f-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Live maps */
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Photo placeholders (unused in this build) */
.ph-img { width: 100%; height: 100%; min-height: 100%; background: var(--cream); }
.logo span { color: var(--on-dark); }

/* Motion only for people who haven't asked to reduce it */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .btn { transition: transform .15s, background .15s; }
  .btn:hover { transform: translateY(-1px); }
  a.svc { transition: border-color .15s, box-shadow .15s; }
  .sub-toggle svg { transition: transform .15s; }
}

/* Insurance list + two-card payment grid */
.pay-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pay-grid .more { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.pay-grid .fine { margin-top: 12px; font-size: 13.5px; }
.insurers { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.insurers li { font-size: 14px; font-weight: 600; padding: 7px 14px; border: 1px solid var(--ink-line); border-radius: 999px; background: var(--cream); color: var(--ink); }
/* Accreditations: plain text in columns, no pill borders, so nothing looks like a button */
.plain-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px 32px; font-size: 15px; color: var(--ink); }
.plain-list li { min-width: 0; }
@media (max-width: 860px) { .pay-grid.two { grid-template-columns: 1fr; } }

/* ==========================================================================
   Production additions (5 Nov 2026 clinic review)
   ========================================================================== */

/* Card rows: card groups sit in ONE horizontal row (review 00:39, 08:25).
   Wider than the screen, the row scrolls sideways with snap points and arrow buttons. */
.row { position: relative; }
h2 + .row, .lead + .row, .sec-head + .row { margin-top: 8px; }
.row-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, calc((100% - 3 * 18px) / 4));
  gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 2px;
  padding: 4px 2px 18px; scrollbar-width: thin; scrollbar-color: var(--ink) transparent;
}
.row-track > * { scroll-snap-align: start; min-width: 0; }
.row-track.three { grid-auto-columns: minmax(260px, calc((100% - 2 * 18px) / 3)); }
.row-track:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 620px) { .row-track, .row-track.three { grid-auto-columns: 78%; } }
.row-nav { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 14px; }
.row-nav button {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--ink); color: var(--on-dark); border: 0;
}
.row-nav button:hover:not(:disabled) { background: var(--gold); color: var(--ink); }
.row-nav button:disabled { opacity: .3; cursor: default; }
.row-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.row.row-static .row-nav { visibility: hidden; }
/* Stronger cards: solid border, gold top rule, darker icons */
.svc { border-width: 1.5px; border-top: 4px solid var(--gold); }
a.svc:hover { border-color: var(--gold); box-shadow: 0 14px 30px -18px rgba(10,9,6,.35); }
.svc svg, .why-item svg, .pay-grid svg { stroke: var(--ink); stroke-width: 1.8; }
.svc h3 { color: var(--ink); }

/* Why choose: solid dark band, one row of four (review 01:07) */
.why-band { background: var(--ink); color: var(--on-dark); }
.why-band h2 { color: var(--on-dark); }
.why-band .why-item h3 { color: var(--on-dark); }
.why-band .why-item p { color: var(--on-dark-muted); }
.why-band .why-item svg { stroke: var(--gold); }
.why-band .accreditations h3 { color: var(--gold); }
.why-band .plain-list { color: var(--on-dark); }
.why-band .eyebrow { color: var(--gold); }

/* Footer: logo + restored "About Hope Fertility" block */
.f-logo { height: 44px; width: auto; margin-bottom: 14px; }
.f-about { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--on-dark-line); }
.f-about h2 { color: var(--gold); font-family: "Playfair Display", Georgia, serif; font-size: 20px; letter-spacing: 0; text-transform: none; font-weight: 500; }
.f-about p { max-width: 110ch; margin: 0 0 12px; line-height: 1.75; }
.f-about a { color: var(--gold); }
.f-about a:hover { color: var(--on-dark); text-decoration: underline; }
footer.site { color: var(--on-dark-muted); }

/* Location cards: building photo on top, map below (review 07:00) */
.loc .bldg { aspect-ratio: 16/9; overflow: hidden; background: var(--cream); }
.loc .bldg img { width: 100%; height: 100%; object-fit: cover; }

/* Team group photo: shown whole, never cropped, so nobody at the edge is cut off (review 01:54) */
.team-photo { margin: 36px 0 0; border-radius: var(--radius); overflow: hidden; background: var(--cream); }
.team-photo img { width: 100%; height: auto; }
.team-photo figcaption { padding: 12px 18px; font-size: 14px; color: var(--ink-muted); background: var(--white); }

/* About page: warm layout after the clinic's reference design (review 04:45) */
.about-hero { background: var(--cream); padding: 72px 0; }
.about-hero .split { align-items: center; }
.about-hero h1 { color: var(--ink); font-size: clamp(34px, 4.6vw, 54px); }
.about-hero h1 em { color: var(--ink); display: block; margin-top: .2em; font-size: .78em; }
.about-hero .lead { color: var(--ink); }
.about-hero .media { aspect-ratio: 5/4; box-shadow: 0 30px 50px -30px var(--ink-shadow); }
.about-hero .crumbs, .about-hero .crumbs a { color: var(--ink); }
.btn-brown { background: var(--ink); color: var(--on-dark); }
.btn-brown:hover { background: var(--ink); }
.light .btn-ghost { color: var(--ink); }
.founder { display: grid; grid-template-columns: 4fr 5fr 3fr; gap: 48px; align-items: start; }
.founder > * { min-width: 0; }
.founder .portrait { aspect-ratio: 4/5; }
.founder .role { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.founder h2 { color: var(--ink); margin-top: 6px; }
.founder .title-line { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin: -4px 0 18px; }
.founder .edu { margin: 18px 0 0; padding: 16px 18px; border-left: 3px solid var(--gold); background: var(--cream); font-size: 14.5px; color: var(--ink-muted); }
.founder .edu b { color: var(--ink); }
.expertise { background: var(--cream); border: 1px solid var(--ink-line); border-radius: var(--radius); padding: 24px; }
.expertise h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.expertise .checks { gap: 10px; font-size: 15px; }
@media (max-width: 1000px) { .founder { grid-template-columns: 1fr 1fr; } .founder .expertise { grid-column: 1 / -1; } }
@media (max-width: 680px) { .founder { grid-template-columns: 1fr; } .founder .portrait { max-width: 420px; } }
.team-cats .cat { background: var(--white); border: 1px solid var(--ink-line); border-radius: var(--radius); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; }
.team-cats .cat .ph { aspect-ratio: 4/3; overflow: hidden; background: var(--cream); }
.team-cats .cat .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.team-cats .cat div.txt { padding: 18px 20px 22px; }
.team-cats .cat h3 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.team-cats .cat p { margin: 0; font-size: 14.5px; color: var(--ink-muted); }
.team-cats a.cat:hover { border-color: var(--gold); }
.partner { background: var(--ink); color: var(--on-dark); padding: 0; overflow: hidden; }
.partner .split { gap: 0; align-items: stretch; }
.partner .media { aspect-ratio: auto; min-height: 340px; border-radius: 0; }
.partner .txt { padding: 64px 48px; align-self: center; }
.partner h2 { color: var(--on-dark); }
.partner h2 em { color: var(--gold); display: block; font-size: .8em; }
.partner p { color: var(--on-dark-muted); }
@media (max-width: 860px) { .partner .txt { padding: 40px 20px; } .partner .media { min-height: 240px; } }
.member .ph { background: var(--cream); } /* the shared headshot backdrop */

/* Blog + resources */
.post-list { display: grid; gap: 18px; margin-top: 36px; }
.post-card { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: center; background: var(--white); border: 1.5px solid var(--ink-line); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 22px 24px; text-decoration: none; }
.post-card:hover { border-color: var(--gold); }
.post-card h2, .post-card h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 500; line-height: 1.15; font-size: 22px; margin: 0; color: var(--ink); }
.post-card .meta { font-size: 14px; color: var(--ink-muted); }
.post-card .more { color: var(--ink); font-weight: 600; font-size: 14px; white-space: nowrap; }
@media (max-width: 620px) { .post-card { grid-template-columns: 1fr; } }
.article { max-width: 720px; }
.article .meta { color: var(--on-dark-muted); font-size: 14px; margin-top: 10px; }
.article-body { font-size: 17px; }
.article-body h2 { font-size: 28px; margin-top: 1.6em; }
.author-box { display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: center; margin-top: 48px; padding: 20px; border-radius: var(--radius); background: var(--cream); }
.author-box img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: top; }
.author-box p { margin: 0; font-size: 14.5px; color: var(--ink-muted); }
.todo-box { border: 2px dashed var(--ink); border-radius: var(--radius); padding: 18px 20px; background: var(--white); color: var(--ink-muted); font-size: 15px; }

/* Accreditation logos: one continuous moving strip (as on the earlier mockups).
   The track holds the logo set four times and moves by half its width, so the loop is seamless. */
.marquee { overflow: hidden; margin-top: 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #0A0906 3%, #0A0906 97%, transparent); mask-image: linear-gradient(90deg, transparent, #0A0906 3%, #0A0906 97%, transparent); container-type: inline-size; }
.marquee-track { display: flex; gap: 22px; width: max-content; list-style: none; margin: 0; padding: 6px 0; }
.marquee-track li { flex: 0 0 auto; width: 200px; height: 120px; background: var(--white); border-radius: 14px; display: grid; place-items: center; padding: 14px 22px; }
.marquee-track img { max-width: 100%; max-height: 92px; width: auto; height: auto; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 45s linear infinite; }
  .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { width: auto; flex-wrap: wrap; }
  .marquee-track li[aria-hidden="true"] { display: none; }
}
@media (max-width: 620px) { .marquee-track li { width: 150px; height: 96px; padding: 10px 16px; } .marquee-track img { max-height: 70px; } }

/* Light header (clinic choice, 5 Nov): palette off-white #FFFAF5 with black text and the dark logo.
   To go back to the black header, delete this block and set the logo in tools/build.py to logo-light.png. */
header.site { background: var(--cream); color: var(--ink); border-bottom: 1px solid var(--ink-line); box-shadow: 0 2px 0 var(--gold); }
.menu a { color: var(--ink); }
.menu a:hover, .menu a.active { color: var(--ink); }
.menu a.active { box-shadow: inset 0 -2px 0 var(--ink); }
.sub-toggle { color: var(--ink); }
.sub-toggle:hover, .sub-toggle[aria-expanded="true"] { color: var(--ink); }
.menu .sub { background: var(--white); border: 1px solid var(--ink-line); box-shadow: 0 20px 40px -22px rgba(10,9,6,.35); }
.menu .sub a { color: var(--ink); }
.menu .sub a:hover { color: var(--ink); background: var(--cream); }
.menu .sub a[aria-current="page"] { color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.phone { color: var(--ink); font-weight: 600; }
.phone-icon { border-color: var(--ink-line); color: var(--ink); }
.phone-icon:hover { border-color: var(--ink); }
.burger { color: var(--ink); }
.mobile-menu { border-top-color: var(--ink-line); background: var(--cream); }
.mobile-menu li a, .mobile-menu .m-call { color: var(--ink); }
.mobile-menu li li a { color: var(--ink-muted); }
.mobile-menu a.active, .mobile-menu a[aria-current="page"] { color: var(--ink); font-weight: 600; }
header.site :is(a, button):focus-visible { outline-color: var(--ink); }
.logo span { color: var(--ink); }
/* The logo keeps its proportions; the menu gives way first */
.logo { flex-shrink: 0; }
.logo img { width: auto; aspect-ratio: 200 / 63; }

/* ==========================================================================
   UX audit fixes (6 Nov 2026). Later rules override the ones above.
   ========================================================================== */

/* Four-color lock: surfaces, links, buttons */
.bg-cream-2 { background: var(--white); } /* legacy class, no longer used in pages */
.cta { background: var(--cream); border-top: 4px solid var(--gold); }
.dark .btn-ghost, .partner .btn-ghost { color: var(--on-dark); }
.btn-brown:hover { background: var(--gold); color: var(--ink); }
.light .btn-gold:hover, .bg-white .btn-gold:hover, .bg-cream .btn-gold:hover { border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink-tint); }
.dark .btn-ghost:hover { background: var(--on-dark-tint); }
/* Links on light: black, so they keep an underline (or a → arrow + bold) as the non-color cue */
.hours a, .call-first a, .t-foot a, .form-notice a, .expertise a { text-decoration: underline; text-underline-offset: 3px; }
.estimate, .author-box { background: var(--cream); border: 1px solid var(--ink-line); }
.bg-cream .estimate, .bg-cream .author-box { background: var(--white); }
.t-who .av { background: var(--cream); border: 1px solid var(--ink-line); }
.menu .sub a:hover { background: var(--ink-tint); }
.mobile-menu a.active, .mobile-menu a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 4px 0 0 var(--gold); }
.about-hero .media { box-shadow: 0 30px 50px -30px var(--ink-shadow); }
.partner { background: var(--ink); }
::placeholder { color: var(--ink-muted); opacity: 1; }

/* 14. Top-level menu items share one center line; the active item is underlined without extra padding */
.menu { align-items: center; }
.menu > li { display: flex; align-items: center; }
.menu a.active { box-shadow: none; padding-bottom: 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }

/* 7. Desktop menu with New Patients in place of Contact: tighter gaps keep it on one line */
.menu { gap: 20px; }
/* The bar is a little wider than the content column (1300 vs 1180) so logo, menu, number and Book fit inside it */
header.site .wrap.nav { max-width: 1300px; }
@media (max-width: 1340px) { .menu { gap: 16px; } .nav { gap: 18px; } .nav-cta { gap: 12px; } }

/* 8. Services dropdown: labelled groups in two columns, "All services" below */
.menu .sub { columns: auto; min-width: 0; width: 520px; padding: 16px 8px 8px; }
.menu .has-sub:hover:not(.hover-off) > .sub, .menu .has-sub.open > .sub { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.menu .sub ul, .mobile-menu .m-sub ul { list-style: none; margin: 0; padding: 0; }
.sub-group { min-width: 0; padding-bottom: 8px; }
.sub-h { margin: 0 0 4px; padding: 0 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.menu .sub a { padding: 6px 12px; border-radius: 8px; white-space: normal; }
.sub-all { grid-column: 1 / -1; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--ink-line); }
.menu .sub .sub-all a { font-weight: 600; }
.mobile-menu .sub-h { margin: 12px 0 2px; padding: 0 20px 0 40px; }
.mobile-menu .sub-all { border-top: 0; padding: 4px 0 0; }
.mobile-menu .sub-all a { display: block; padding: 9px 20px 9px 40px; font-size: 15.5px; font-weight: 600; color: var(--ink); text-decoration: none; }

/* 5. Header call icon stays in the bar at every width up to 1200px, phones included */
@media (max-width: 1200px) { .phone-icon { display: grid; } }
@media (max-width: 480px) { .nav { gap: 8px; } .nav-cta { gap: 8px; } }
@media (max-width: 400px) { .logo img { height: 32px; } }
/* 15. Mobile menu open: the page behind it doesn't scroll */
html.menu-open { overflow: hidden; }

/* 9. Card rows: arrows level with the heading on desktop, below the cards on phones */
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 28px; align-items: end; }
.row-head { grid-column: 1; grid-row: 1; min-width: 0; }
.row-head > :last-child, .row-head .sec-head, .row-head .sec-head > div > :last-child { margin-bottom: 0; }
.row-nav { grid-column: 2; grid-row: 1; margin: 0; }
.row-track { grid-column: 1 / -1; grid-row: 2; }
@media (max-width: 620px) {
  .row { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .row-nav { grid-column: 1; grid-row: 3; justify-content: flex-end; margin-top: -6px; }
  .row.row-static .row-nav { display: none; }
}

/* 6. Selects match the inputs: 48px tall, own chevron */
input, select { min-height: 48px; }
select {
  -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0906' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px 16px;
}

/* Form errors: no red. Black, bold, an icon, and a thicker border on the field */
[aria-invalid="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.field-error { color: var(--ink); font-weight: 600; display: flex; gap: 8px; align-items: flex-start; }
.field-error::before {
  content: "!"; flex: 0 0 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--ink); color: var(--white);
  font-size: 12px; font-weight: 700; line-height: 18px; text-align: center;
}

/* 1. Form closed (no data-endpoint): call-to-book notice, fields hidden, copy says "call".
   html.form-open is set by site.js only when the form can send. */
html:not(.form-open) .when-open, html.form-open .when-closed { display: none !important; }
.form-closed .form-fields { display: none; }
.form-closed-note { margin: 18px 0 20px; padding: 22px; background: var(--cream); border: 1px solid var(--ink-line); border-left: 4px solid var(--gold); border-radius: var(--radius); }
.form-closed-note p { margin: 12px 0 0; font-weight: 600; color: var(--ink); }
.btn-lg { font-size: 17px; padding: 16px 28px; }
@media (max-width: 560px) { .form-closed-note .btn { display: flex; justify-content: center; } }

/* 2. Form status: neutral info card; the bordered error look only when sending really failed */
.form-notice { margin: 18px 0 0; padding: 14px 18px; background: var(--cream); border: 1px solid var(--ink-line); border-left: 4px solid var(--ink); border-radius: 10px; color: var(--ink); font-size: 15px; }
.form-notice a { font-weight: 600; white-space: nowrap; }
.form-notice.is-sent { border-left-color: var(--gold); font-weight: 600; }
.form-notice.is-error { border: 2px solid var(--ink); font-weight: 600; }

/* 4. Accreditation strip: Pause toggle; one logo set is always at least as wide as the strip
   (plus a tile), so the same logo never shows twice at once */
.accred-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.accred-head h3 { margin: 0; }
.marquee-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--on-dark-line); background: none; color: var(--on-dark); font: 600 14px Inter, system-ui, sans-serif;
}
.marquee-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.marquee-toggle:hover { border-color: var(--gold); }
.marquee-toggle[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.marquee-track { gap: 0; }
.marquee-track li { margin-right: 22px; margin-right: max(22px, calc((100cqi + 222px) / 4 - 200px)); }
.marquee.is-paused .marquee-track { animation-play-state: paused; }
@media (max-width: 620px) { .marquee-track li { margin-right: max(22px, calc((100cqi + 172px) / 4 - 150px)); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { gap: 22px; justify-content: center; }
  .marquee-track li { margin-right: 0; }
}

/* 12. Home hero: the photo is a layer held to the right edge at the hero's full height (16:9), its left
   edge faded into black, so the faces sit beside the copy. The overlay stays >= .78 under all the copy
   (white text 9.9:1, muted text 6.9:1, gold eyebrow 6.0:1 even over the photo's white wall) and drops
   to .3 on the right. */
.hero { --copy-left: max(20px, 50% - 570px); background: var(--ink); isolation: isolate; overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; top: 0; bottom: 0; pointer-events: none; }
.hero::before {
  right: 0; aspect-ratio: 16 / 9; z-index: -2;
  background: url("images/clinic/dr-asemota-white-dress.jpg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #0A0906 28%); mask-image: linear-gradient(90deg, transparent, #0A0906 28%);
}
.hero::after {
  left: 0; right: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10,9,6,.95) 0, rgba(10,9,6,.9) calc(var(--copy-left) + 380px), rgba(10,9,6,.78) calc(var(--copy-left) + 660px), rgba(10,9,6,.3) calc(var(--copy-left) + 920px), rgba(10,9,6,.3) 100%);
}
.hero .wrap > * { max-width: 640px; }
@media (max-width: 1100px) {
  .hero::after { background: linear-gradient(90deg, rgba(10,9,6,.94) 0, rgba(10,9,6,.84) 62%, rgba(10,9,6,.4) 100%); }
}
@media (max-width: 720px) {
  .hero { background: var(--ink); }
  .hero::before { left: 0; aspect-ratio: auto; background-position: 62% center; -webkit-mask-image: none; mask-image: none; }
  .hero::after { background: linear-gradient(180deg, rgba(10,9,6,.84), rgba(10,9,6,.9)); }
}

/* 13. About founder: portrait | bio, the expertise card under the bio; credentials as short lists */
.founder { grid-template-columns: 4fr 8fr; column-gap: 56px; row-gap: 32px; }
.founder .portrait { grid-row: span 2; position: sticky; top: 100px; }
.founder .expertise { grid-column: 2; }
.founder .expertise .checks { grid-template-columns: 1fr; gap: 10px; }
.founder .edu { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: 4px 24px; padding: 18px 20px; }
.founder .edu h3 { grid-row: 1; margin: 0 0 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.founder .edu ul { grid-row: 2; margin: 0; padding-left: 16px; font-size: 14.5px; color: var(--ink-muted); }
.founder .edu li + li { margin-top: 6px; }
@media (max-width: 1000px) {
  .founder { grid-template-columns: 5fr 7fr; }
  .founder .edu { grid-template-columns: 1fr; }
  .founder .edu h3, .founder .edu ul { grid-row: auto; }
  .founder .edu ul + h3 { margin-top: 12px; }
}
@media (max-width: 680px) {
  .founder { grid-template-columns: 1fr; }
  .founder .portrait { grid-row: auto; position: static; }
  .founder .expertise { grid-column: auto; }
  .founder .expertise .checks { grid-template-columns: 1fr; }
}
.menu .sub a[aria-current="page"] { box-shadow: none; background: var(--ink-tint); font-weight: 600; color: var(--ink); }
.hours a.btn, .t-foot a.btn { text-decoration: none; }
/* Closed form: the notice already leads with the number, so the phone-first line would repeat it */
html:not(.form-open) .call-first { display: none !important; }
@media (max-width: 560px) { .form-closed-note { padding: 18px; } .form-closed-note .btn-lg { font-size: 16px; padding: 14px 18px; white-space: nowrap; } }

/* Clinic interior photo row (Locations) */
.gallery-item { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--cream); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* Sections whose photo was removed (each clinic photo is used only once): one readable text column */
.split.solo { grid-template-columns: minmax(0, 780px); }
/* Blog byline is text-only (no repeated portrait) */
.author-box { grid-template-columns: 1fr; }
.gallery.two-up { grid-auto-columns: minmax(260px, calc((100% - 18px) / 2)); }

/* Photo placeholders: a calm branded panel where a clinic photo will go.
   Add ?slots to any page URL to see each placeholder's file name (for whoever picks the photos). */
.ph-slot { aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--cream); border: 1px solid var(--ink-line); display: grid; place-items: center; position: relative; overflow: hidden; }
.bg-cream .ph-slot { background: var(--white); }
.ph-mark { width: 72px; height: 72px; color: var(--gold); }
.ph-slot-label { display: none; position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 8px 10px; border: 1px dashed var(--ink); border-radius: 8px; background: var(--white); color: var(--ink); font-size: 13px; line-height: 1.4; }
html.show-slots .ph-slot-label { display: block; }
.ph-slot .ph-mark { width: 160px; height: auto; opacity: .35; }
.split .media.ph-slot img.ph-mark, .media.ph-slot img.ph-mark { width: 160px; height: auto; max-width: 50%; object-fit: contain; }

/* 14. Doctor's review, 8 Nov 2026 ------------------------------------------------------------- */

/* Home hero: the doctor's white-dress portrait, shown clearly on the right (no dark overlay on her);
   the copy sits on solid black. Phones: the photo on top, the copy below it. */
.hero::before {
  left: max(52%, calc(var(--copy-left) + 680px)); right: 0; aspect-ratio: auto;
  background: url("images/clinic/dr-asemota-white-dress.jpg") center 28% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #0A0906 18%); mask-image: linear-gradient(90deg, transparent, #0A0906 18%);
}
.hero::after { display: none; }
@media (max-width: 860px) {
  .hero { --photo-h: min(110vw, 480px); padding-top: calc(var(--photo-h) + 28px); }
  .hero::before {
    left: 0; right: 0; bottom: auto; height: var(--photo-h); background-position: 40% 22%;
    -webkit-mask-image: linear-gradient(180deg, #0A0906 78%, transparent); mask-image: linear-gradient(180deg, #0A0906 78%, transparent);
  }
}

/* Home "Meet your doctor": text only (her photo is in the hero right above it) */
.doctor-grid.solo { grid-template-columns: minmax(0, 1fr); max-width: 860px; }

/* About: every team shows photo tiles on phones too (no tiny round avatars) */
.member .ph.no-photo {
  display: grid; place-items: center; border: 1px solid var(--ink-line);
  font-family: "Playfair Display", Georgia, serif; font-size: 34px; color: var(--ink);
}

/* About: the team group photo is shown whole (16:9, nobody at the edge cut off) */
.partner .media.group { aspect-ratio: 16 / 9; min-height: 0; align-self: center; }
@media (max-width: 620px) {
  .team, .team.cols-5 { --cols: 2; }
  /* The first tile spans the row only when the team has an odd count (7 -> 1 + 3x2, 5 -> 1 + 2x2; 4 -> 2x2) */
  .team:not(.compact) > .member:first-child:nth-last-child(even) { grid-column: auto; display: block; }
  .team:not(.compact) > .member:first-child:nth-last-child(even) .ph { margin-bottom: 12px; }
}

/* Blog article tables (imported posts) */
.article-body .table-wrap { margin: 24px 0; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 15px; }
.article-body th, .article-body td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--ink-line); }
.article-body th { background: var(--cream); font-weight: 600; }
.article-body tr:last-child td { border-bottom: 0; }
.article-body hr { border: 0; border-top: 1px solid var(--ink-line); margin: 32px 0; }

/* 15. Doctor's review, 8 Nov 2026 (2) */
/* About hero: photo slideshow (crossfade, like the earlier mockup's banner) */
.media.slideshow { position: relative; }
.media.slideshow img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.media.slideshow img.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .media.slideshow img { transition: none; } }

/* 16. Home "How we can help" + Services "Find the right path": treatments as a bulleted list in
   ONE column on every screen (the doctor, 8 Nov 2026). */
.treatment-list { list-style: none; margin: 8px 0 0; padding: 0; max-width: 820px; }
.treatment-list li { break-inside: avoid; position: relative; padding: 14px 0 14px 26px; border-bottom: 1px solid var(--ink-line); }
.treatment-list li::before { content: ""; position: absolute; left: 2px; top: 22px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.treatment-list a { font-weight: 600; font-size: 17px; color: var(--ink); text-decoration: none; }
.treatment-list a::after { content: " →"; color: var(--ink); }
.treatment-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.treatment-list span { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-muted); }
.sec-head + .treatment-list { margin-top: 0; }

/* 17. UX review fixes (8 Nov 2026) --------------------------------------------------------------- */
/* Phone numbers never break across lines */
.nw { white-space: nowrap; }
/* Treatment list: the whole row is the link target */
.treatment-list li { transition: background-color .15s; }
.treatment-list a::before { content: ""; position: absolute; inset: 0; }
.treatment-list li:hover { background: var(--white); }
.treatment-list a:focus-visible { outline: none; }
.treatment-list li:has(a:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.t-foot + .btns { margin-top: 18px; }
/* About slideshow: pause button (WCAG 2.2.2) */
.slide-toggle {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ink-line);
  background: var(--white); color: var(--ink); font: 600 14px/1 Inter, system-ui, sans-serif; cursor: pointer;
}
.slide-toggle:hover { border-color: var(--gold); }
.slide-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Maps load only when asked (no request to Google until then) */
.map.map-click { display: grid; place-items: center; align-content: center; gap: 12px; background: var(--cream); }
.map.map-click svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 1.8; }
.map.map-click .btn { background: var(--white); }
/* Phones: shorter hero photo so the headline and Book button show on the first screen */
@media (max-width: 860px) {
  .hero { --photo-h: min(82vw, 340px); }
  .hero::before { background-position: 42% 18%; }
}
/* Phones: every numbered process uses the compact layout (number beside the text) */
@media (max-width: 820px) {
  .steps:not(.compact) { gap: 12px; }
  .steps:not(.compact) li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 16px; padding: 18px 20px; }
  .steps:not(.compact) li::before { grid-row: span 2; margin-bottom: 0; }
  .steps:not(.compact) h3 { margin: 5px 0 2px; }
}
.steps.compact h4 { font-size: 15.5px; margin: 5px 0 2px; }
/* Phones: footer links easy to tap, two columns, 44px social icons */
@media (max-width: 520px) {
  footer.site ul { gap: 0; }
  footer.site ul a { display: block; padding: 10px 0; }
  .f-grid { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .f-grid > :first-child, .f-grid > :last-child { grid-column: 1 / -1; }
}
.social .icon { width: 44px; height: 44px; }
/* Phones: location buttons stacked full width, all the same size */
@media (max-width: 560px) {
  .loc .actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .loc .actions .btn { justify-content: center; text-align: center; width: 100%; min-width: 0; }
}
/* Photo placeholders: hidden on phones and tablets until the clinic's photos arrive */
@media (max-width: 860px) { .media.ph-slot { display: none; } }
/* Intro text in full ink on light sections (it read as secondary) */
.light .lead { color: var(--ink); }
/* Every button row: full-width buttons on phones */
@media (max-width: 720px) { .btns .btn { flex: 1 1 100%; justify-content: center; } }
/* Team category cards: a visible "Meet the team" cue */
.team-cats .cat .more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--ink); }
/* 404: light section with helpful links */
.notfound { padding: 72px 0 80px; }
.notfound h1 { color: var(--ink); }
.nf-links { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 24px; max-width: 760px; }
.nf-links a { display: block; padding: 10px 0; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--ink-line); text-decoration: none; }
.nf-links a:hover { border-color: var(--gold); }
@media (max-width: 620px) { .nf-links { grid-template-columns: 1fr 1fr; } }
/* Phones: the hero uses the phone-sized copy of the photo (preloaded in the page head) */
@media (max-width: 860px) { .hero::before { background-image: url("images/clinic/sized/dr-asemota-white-dress-1024.jpg"); } }

/* 18. Services "Find the right path": treatment tabs (after the clinic's current Services page, improved).
   Markup is an accordion (button + panel per treatment). Phones: accordion, one open at a time.
   Desktop (.tx.ready, ≥ 900px): the buttons form a left column; the open panel sits beside them. */
.tx { margin-top: 8px; }
.tx-item { margin: 0; font: inherit; }
.tx-btn {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 12px 18px; margin: 0 0 8px;
  background: var(--white); border: 1px solid var(--ink-line); border-radius: 12px; color: var(--ink);
  font: 600 16px/1.3 Inter, system-ui, sans-serif; text-align: left; cursor: pointer;
}
.tx-btn svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.8; }
.tx-btn:hover { border-color: var(--gold); }
.tx-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tx-btn[aria-expanded="true"] { background: var(--gold); border-color: var(--gold); }
.tx-btn::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; flex: none; }
.tx-btn[aria-expanded="true"]::after { transform: rotate(-135deg); }
.tx-panel { background: var(--white); border: 1px solid var(--ink-line); border-top: 4px solid var(--gold); border-radius: var(--radius); padding: 24px 22px 26px; margin: 0 0 14px; }
.tx-panel[hidden] { display: none; }
.tx-title { display: none; }
.tx-desc { margin: 0; font-size: 17px; color: var(--ink); }
.tx-label { margin: 22px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.tx-panel .checks { margin-top: 12px; gap: 10px; }
.tx-panel .btns { margin-top: 24px; }
@media (min-width: 900px) {
  .tx.ready { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .tx.ready .tx-item { grid-column: 1; }
  .tx.ready .tx-btn::after { transform: rotate(-45deg); }
  .tx.ready .tx-btn[aria-expanded="true"]::after { transform: rotate(-45deg); }
  .tx.ready .tx-panel { grid-column: 2; grid-row: 1 / span var(--tx-n, 11); margin: 0; padding: 34px 36px 36px; position: sticky; top: 110px; }
  .tx.ready .tx-title { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font-family: "Playfair Display", Georgia, serif; font-size: 30px; line-height: 1.2; color: var(--ink); }
  .tx.ready .tx-title svg { width: 34px; height: 34px; fill: none; stroke: var(--ink); stroke-width: 1.8; flex: none; }
  .tx.ready .tx-panel .checks { grid-template-columns: 1fr 1fr; column-gap: 28px; }
}
@media (prefers-reduced-motion: reduce) { .tx-btn::after { transition: none; } }
/* Space between a heading and the treatment tabs */
h2 + .tx { margin-top: 32px; }
/* Consultation form: spam-trap field, invisible to people and screen readers */
.form-card .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 19. A wide photo that keeps its own shape (no 4:3 crop), e.g. New Patients "Fertility testing for couples" */
.split .media.wide { aspect-ratio: auto; align-self: center; }
.split .media.wide img { height: auto; }

/* 20. Services dropdown: group names are labels, not links. Small muted caps with a hairline rule,
   no hover, no pointer, so they read as section dividers; the links below keep the hover background. */
.sub-h { display: flex; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: .16em; color: var(--ink-muted);
  cursor: default; user-select: none; -webkit-user-select: none; }
.sub-h::after { content: ""; flex: 1; height: 1px; background: var(--ink-line); }
.menu .sub-h { margin: 2px 0 6px; }
.menu .sub a { color: var(--ink); font-weight: 500; }
.menu .sub a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }
.mobile-menu .sub-h { padding-right: 20px; }

/* 21. Home: featured treatment-pricing card (doctor's request, 10 Nov) */
.price-card { background: var(--ink); color: var(--on-dark); border-radius: var(--radius); padding: clamp(28px, 5vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end;
  box-shadow: 0 30px 50px -34px rgba(10,9,6,.55); border-top: 4px solid var(--gold); }
.price-card h2 { color: var(--on-dark); margin-bottom: .35em; }
.light .price-card h2 em { color: var(--gold); }
.light .price-card .eyebrow { color: var(--gold); }
.price-card .pc-sub { color: var(--gold); font-weight: 600; font-size: 17px; margin: 0 0 18px; }
.price-card p { color: var(--on-dark-muted); max-width: 64ch; }
.price-card .pc-text p:last-child { margin-bottom: 0; }
@media (max-width: 820px) { .price-card { grid-template-columns: 1fr; } .price-card .pc-cta .btn { width: 100%; } }

/* 22. Portrait photos in a two-column section (taller 4:5 frame) */
.split .media.tall { aspect-ratio: 4/5; }

/* 23. Services: treatment card grid (Dr. Asemota's preferred layout) */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
.svc-card { position: relative; background: var(--white); border: 1.5px solid var(--gold); border-radius: var(--radius);
  padding: 32px 26px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: box-shadow .2s ease, transform .2s ease; }
.svc-card:hover, .svc-card:focus-within { box-shadow: 0 18px 36px -22px var(--ink-shadow); transform: translateY(-2px); }
.svc-card > svg { width: 76px; height: 76px; margin-bottom: 2px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svc-kicker { margin: 4px 0 0; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.svc-card h3 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 23px; line-height: 1.2; }
.svc-card h3 a { color: inherit; text-decoration: none; }
.svc-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }  /* whole card clickable */
.svc-card h3 a:focus-visible { outline: none; }
.svc-card:has(h3 a:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.svc-card p:not(.svc-kicker) { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); flex: 1; }
.svc-more { margin-top: 6px; font-size: 14.5px; font-weight: 600; color: var(--ink); border-bottom: 1.5px solid var(--gold); padding-bottom: 2px; }
.svc-card:hover .svc-more { border-bottom-color: var(--ink); }
.svc-note { margin-top: 26px; }
@media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr; } .svc-card { padding: 26px 20px 24px; } }
@media (prefers-reduced-motion: reduce) { .svc-card { transition: none; } .svc-card:hover, .svc-card:focus-within { transform: none; } }

/* 24. New 48-unit line icons in the home treatment tabs (thicker so they match the old 32-unit weight) */
.tx-btn svg[viewBox="0 0 48 48"], .tx-title svg[viewBox="0 0 48 48"] { stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tx-btn svg[viewBox="0 0 48 48"] { width: 32px; height: 32px; stroke-width: 2.3; }
.tx.ready .tx-title svg[viewBox="0 0 48 48"] { width: 42px; height: 42px; stroke-width: 2.1; }