/* OB/GYN of Jacksonville - site styles
   No external fonts or scripts: nothing loads from third parties.
   Icons are inline SVG based on Feather Icons (MIT license).

   Colors are set only in :root below. To change the color scheme, change
   these values; nothing else in the file needs editing. */

:root {
  /* Brand colors: "Blush & Navy", the practice flyer's navy blue and soft pink.
     Every text/background pair passes WCAG AA contrast. */
  --primary-900: #1b3a6b;   /* headings, dark panels */
  --primary-700: #24508f;   /* buttons, links */
  --primary-100: #d6e2f3;
  --primary-50: #eaf1fb;
  --accent-700: #b02a63;    /* small accent text, focus ring */
  --accent-300: #eea3b8;    /* decorative lines, card edges */
  --accent-100: #fadbe4;
  --accent-50: #fdf1f5;
  --mark: #f6b8c9;          /* heart in the logo */
  --on-dark: #dde7f6;       /* body text on dark panels */

  /* Surfaces */
  --bg: #ffffff;
  --bg-soft: #fcebf0;
  --hero-bg: linear-gradient(120deg, #e1ecfa 0%, #f5eef7 50%, #fbe1e9 100%);
  --page-hero-bg: linear-gradient(120deg, #e1ecfa 0%, #f6eef6 55%, #fbe4eb 100%);
  --callout-bg: linear-gradient(120deg, #1b3a6b 0%, #2c5ea3 100%);
  --footer-bg: #16305a;

  /* Glows, button shadow and map */
  --blob-accent: rgba(238, 163, 184, .35);
  --blob-primary: rgba(36, 80, 143, .14);
  --btn-shadow: rgba(36, 80, 143, .3);
  --mark-soft: rgba(246, 184, 201, .10);
  --map-bg: #eaf1fb;
  --map-block: #dde8f7;
  --map-river: #fbe1e9;
  --map-halo: #eea3b8;
  --map-pin: #b02a63;

  /* Text and lines */
  --ink: #1d2433;
  --muted: #4a5465;
  --line: #dce3ee;

  /* Preview markers */
  --confirm-bg: #fff1a8;
  --confirm-ink: #3d3200;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(27, 58, 107, .06), 0 2px 8px rgba(27, 58, 107, .05);
  --shadow: 0 2px 4px rgba(27, 58, 107, .05), 0 12px 32px rgba(27, 58, 107, .10);
  --shadow-lg: 0 4px 10px rgba(27, 58, 107, .06), 0 24px 60px rgba(27, 58, 107, .16);
  --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 17px/1.65 var(--font-sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
a { color: var(--primary-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--primary-900); }
:focus-visible { outline: 3px solid var(--accent-700); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--font-serif); color: var(--primary-900); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.5rem); margin: 0 0 .45em; }
h2 { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.4rem); margin: 0 0 .5em; }
h3 { font-size: 1.22rem; margin: 0 0 .4em; line-height: 1.3; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; }
address { font-style: normal; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mt { margin-top: 1.2em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--primary-900); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { top: 12px; color: #fff; }

/* Preview-only markers. Remove the banner and every mark.confirm before launch. */
mark.confirm { background: var(--confirm-bg); color: var(--confirm-ink); padding: 0 .25em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.confirm-note { background: var(--confirm-bg); color: var(--confirm-ink); border-radius: var(--radius); padding: 12px 16px; font-size: .92rem; margin: 0 0 24px; }

/* ---------- Top bar ---------- */
.topbar { background: var(--primary-900); color: var(--on-dark); font-size: .88rem; }
.topbar-inner { display: flex; align-items: center; gap: 24px; min-height: 42px; }
.topbar-item { display: inline-flex; align-items: center; gap: 8px; }
.topbar .icon { width: 16px; height: 16px; color: var(--mark); }
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar a:hover { text-decoration: underline; color: #fff; }
.topbar-right { margin-left: auto; }
@media (max-width: 760px) { .topbar-hide-sm { display: none; } .topbar-right { margin-left: 0; } .topbar-inner { justify-content: center; } }

/* ---------- Header and navigation ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--line); }
.header-inner { position: relative; display: flex; align-items: center; gap: 20px; min-height: 80px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; color: var(--ink); }
.brand-mark { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-700), var(--primary-900)); color: var(--mark); box-shadow: 0 4px 12px rgba(27, 58, 107, .25); }
.brand-mark svg { width: 22px; height: 22px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font: 700 1.15rem var(--font-serif); color: var(--primary-900); white-space: nowrap; letter-spacing: -.01em; }
.brand-sub { font-size: .82rem; color: var(--muted); letter-spacing: .02em; }

.site-nav { display: flex; align-items: center; gap: 18px; }
.site-nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav a:not(.btn) { display: block; padding: 10px 11px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .96rem; font-weight: 500; white-space: nowrap; }
.site-nav a:not(.btn):hover { background: var(--primary-50); color: var(--primary-900); }
.site-nav a[aria-current="page"] { color: var(--primary-700); font-weight: 600; background: var(--primary-50); }
.nav-toggle { display: none; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 24px; border: 2px solid transparent; border-radius: 999px; font: 600 1rem var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s; }
.btn .icon { width: 18px; height: 18px; }
.btn-primary { background: var(--primary-700); color: #fff; box-shadow: 0 6px 18px var(--btn-shadow); }
.btn-primary:hover { background: var(--primary-900); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px var(--btn-shadow); }
.btn-secondary { background: #fff; color: var(--primary-700); border-color: var(--primary-100); }
.btn-secondary:hover { border-color: var(--primary-700); color: var(--primary-900); transform: translateY(-1px); }
.btn-light { background: #fff; color: var(--primary-900); }
.btn-light:hover { background: var(--primary-50); color: var(--primary-900); transform: translateY(-1px); }
.btn-sm { min-height: 44px; padding: 8px 18px; font-size: .95rem; }

@media (max-width: 1100px) {
  .js .nav-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border: 2px solid var(--primary-100); border-radius: 999px; background: #fff; color: var(--primary-700); font: 600 1rem var(--font-sans); cursor: pointer; }
  .js .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 24px 24px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .js .site-nav.open { display: flex; }
  .js .site-nav ul { flex-direction: column; }
  html:not(.js) .header-inner { flex-wrap: wrap; padding-bottom: 12px; }
  html:not(.js) .site-nav { width: 100%; flex-wrap: wrap; }
  html:not(.js) .site-nav ul { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .brand-mark { display: none; }
  .brand-name { font-size: 1.05rem; }
  .brand-sub { font-size: .78rem; }
}

/* ---------- Shared bits ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-700); }
.eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--accent-300); }
.lead { max-width: 36em; font-size: 1.16rem; color: var(--muted); }
.section { position: relative; padding: 96px 0; }
.section-soft { background: var(--bg-soft); }
.section.pt-0 { padding-top: 0; }
.section-tint { background: linear-gradient(180deg, #fff 0%, var(--primary-50) 100%); }
.section-head { max-width: 44rem; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head p { font-size: 1.1rem; color: var(--muted); margin: 0; }
.icon-badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--accent-50); color: var(--accent-700); border: 1px solid var(--accent-100); }
.icon-badge .icon { width: 24px; height: 24px; stroke-width: 1.8; }
.icon-badge.blue { background: var(--primary-50); color: var(--primary-700); border-color: var(--primary-100); }
.check-list { list-style: none; margin: 0 0 1em; padding: 0; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.check-list .icon { width: 22px; height: 22px; margin-top: 2px; padding: 3px; border-radius: 50%; background: var(--primary-50); color: var(--primary-700); stroke-width: 3; }
.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.text-link .icon { width: 17px; height: 17px; transition: transform .2s var(--ease); }
.text-link:hover .icon { transform: translateX(3px); }
@media (max-width: 860px) { .section { padding: 64px 0; } .section-head { margin-bottom: 32px; } }

/* ---------- Home hero ---------- */
.hero { position: relative; overflow: hidden; padding: 72px 0 132px; background: var(--hero-bg); }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.hero::before { width: 520px; height: 520px; right: -120px; top: -160px; background: radial-gradient(circle, var(--blob-accent), transparent 70%); }
.hero::after { width: 460px; height: 460px; left: -160px; bottom: -200px; background: radial-gradient(circle, var(--blob-primary), transparent 70%); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 34px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 0; padding: 0; list-style: none; font-size: .95rem; font-weight: 600; color: var(--primary-900); }
.trust-row li { display: inline-flex; align-items: center; gap: 8px; }
.trust-row .icon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #fff; color: var(--accent-700); stroke-width: 3; box-shadow: var(--shadow-sm); }

.portrait-wrap { position: relative; width: 100%; max-width: 440px; margin-left: auto; padding: 0 24px 24px 0; }
.portrait { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 999px 999px var(--radius-lg) var(--radius-lg); background: linear-gradient(160deg, #fff 0%, var(--primary-50) 45%, var(--accent-100) 100%); border: 8px solid #fff; box-shadow: var(--shadow-lg); overflow: hidden; text-align: center; color: var(--primary-900); }
.portrait-inner { padding: 24px; }
.portrait .icon { width: 64px; height: 64px; stroke-width: 1.2; color: var(--primary-700); opacity: .55; margin-bottom: 10px; }
.portrait strong { display: block; font: 700 1.1rem var(--font-serif); }
.portrait span { display: block; font-size: .9rem; color: var(--muted); }
.portrait.small { aspect-ratio: 4 / 5; border-radius: var(--radius); border: 0; box-shadow: none; }
.float-card { position: absolute; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); font-size: .9rem; line-height: 1.35; }
.float-card strong { display: block; color: var(--primary-900); font-size: .95rem; }
.float-card span { color: var(--muted); font-size: .84rem; }
.float-card .icon-badge { width: 42px; height: 42px; border-radius: 12px; }
.float-card .icon-badge .icon { width: 20px; height: 20px; }
.float-card.fc-bottom { left: -36px; bottom: 36px; }
.float-card.fc-top { right: -8px; top: 64px; }

/* Info cards overlapping the hero */
.info-cards { position: relative; z-index: 2; margin-top: -76px; }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.info-card { display: flex; gap: 16px; align-items: flex-start; padding: 26px; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); border: 1px solid rgba(220, 227, 238, .7); }
.info-card .info-label { margin: 0 0 4px; font: 700 .8rem var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.info-card p { margin: 0 0 6px; font-size: 1.02rem; color: var(--ink); }
.info-card .big { font: 700 1.3rem var(--font-sans); color: var(--primary-900); text-decoration: none; letter-spacing: .01em; }

@media (max-width: 960px) {
  .hero { padding: 48px 0 110px; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .portrait-wrap { margin: 0 auto; max-width: 360px; }
  .float-card.fc-bottom { left: -12px; }
  .info-grid { grid-template-columns: 1fr; }
}

/* ---------- Service cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { position: relative; display: flex; flex-direction: column; padding: 32px 28px 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent-100); }
.card .icon-badge { margin-bottom: 20px; }
.card p { color: var(--muted); margin-bottom: 18px; }
.card .text-link { margin-top: auto; }
.section-foot { margin-top: 40px; text-align: center; }
@media (max-width: 960px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .card-grid { grid-template-columns: 1fr; } }

/* ---------- Doctor intro ---------- */
.doctor { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; }
.doctor .portrait { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); max-width: 460px; }
.doctor-photo { position: relative; isolation: isolate; width: 100%; }
.doctor-photo::before { content: ""; position: absolute; inset: 28px -18px -18px 28px; border-radius: var(--radius-lg); background: var(--accent-100); z-index: -1; }
.doctor-body { position: relative; z-index: 1; }
@media (max-width: 960px) { .doctor { grid-template-columns: 1fr; gap: 48px; } .doctor .portrait { margin: 0 auto; max-width: 380px; } .doctor-photo { max-width: 380px; margin: 0 auto; } }

/* ---------- Steps ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps::before { content: ""; position: absolute; top: 30px; left: 16%; right: 16%; height: 2px; background: repeating-linear-gradient(90deg, var(--accent-300) 0 8px, transparent 8px 16px); }
.step { position: relative; text-align: center; padding: 0 12px; }
.step-num { position: relative; display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 20px; border-radius: 50%; background: #fff; border: 2px solid var(--accent-300); color: var(--primary-900); font: 700 1.4rem var(--font-serif); box-shadow: var(--shadow-sm); }
.step p { color: var(--muted); margin: 0; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 36px; } .steps::before { display: none; } }

/* ---------- Insurance ---------- */
.ins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ins-group { padding: 28px; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.ins-group h3 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; }
.ins-group h3 .icon { color: var(--accent-700); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.chips li { padding: 7px 14px; border-radius: 999px; background: var(--primary-50); color: var(--primary-900); font-size: .92rem; font-weight: 600; border: 1px solid var(--primary-100); }
.ins-note { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 28px 0 0; color: var(--muted); text-align: center; }
.ins-note .icon { color: var(--accent-700); }
@media (max-width: 960px) { .ins-grid { grid-template-columns: 1fr; } }

/* ---------- Location ---------- */
.location { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; border-radius: var(--radius-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow); border: 1px solid var(--line); }
.location-body { padding: 44px; }
.location-body h2 { margin-bottom: .6em; }
.detail { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.detail:last-of-type { border-bottom: 0; }
.detail .icon { color: var(--accent-700); margin-top: 3px; }
.detail strong { display: block; color: var(--primary-900); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.detail p { margin: 0; }
.location-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.map-art { position: relative; min-height: 380px; background: var(--primary-50); }
.map-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-art .m-bg { fill: var(--map-bg); }
.map-art .m-blocks { fill: var(--map-block); }
.map-art .m-river { stroke: var(--map-river); }
.map-art .map-ring { fill: var(--map-halo); }
.map-art .map-pin path { fill: var(--map-pin); }
.map-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-100% - 60px)); padding: 10px 16px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); font-size: .9rem; white-space: nowrap; text-align: center; }
.map-label strong { display: block; color: var(--primary-900); }
.map-label span { color: var(--muted); font-size: .82rem; }
@media (max-width: 960px) { .location { grid-template-columns: 1fr; } .location-body { padding: 32px 26px; } .map-art { min-height: 280px; } }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; padding: 56px 60px; border-radius: 28px; background: var(--callout-bg); color: var(--on-dark); box-shadow: var(--shadow-lg); }
.cta-band::before, .cta-band::after { content: ""; position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .10); pointer-events: none; }
.cta-band::before { width: 340px; height: 340px; right: -80px; top: -150px; }
.cta-band::after { width: 220px; height: 220px; right: 120px; bottom: -150px; background: var(--mark-soft); }
.cta-inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.cta-band h2 { color: #fff; margin: 0 0 .3em; }
.cta-band p { margin: 0; font-size: 1.08rem; max-width: 34em; }
.cta-band .eyebrow { color: var(--mark); }
.cta-band .eyebrow::before { background: var(--mark); }
@media (max-width: 620px) { .cta-band { padding: 40px 26px; border-radius: 22px; } }

/* ---------- Inner pages ---------- */
.page-hero { position: relative; overflow: hidden; padding: 64px 0 56px; background: var(--page-hero-bg); border-bottom: 1px solid var(--line); }
.page-hero::after { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -180px; border-radius: 50%; background: radial-gradient(circle, var(--blob-accent), transparent 70%); pointer-events: none; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { margin-bottom: .25em; }
.page-hero p { max-width: 40em; margin: 0; font-size: 1.15rem; color: var(--muted); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; font-size: .9rem; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--accent-300); }
.breadcrumb a { color: var(--muted); }

.layout { display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: start; }
.layout-main > *:first-child { margin-top: 0; }
.aside { position: sticky; top: 110px; display: grid; gap: 20px; }
.aside-card { padding: 28px; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow); border: 1px solid var(--line); }
.aside-card.dark { background: var(--callout-bg); color: var(--on-dark); border: 0; }
.aside-card.dark h2 { color: #fff; }
.aside-card h2 { font-size: 1.35rem; margin-bottom: .4em; }
.aside-card p { font-size: .98rem; }
.aside-card .btn { width: 100%; }
.aside-card .detail { border-color: var(--line); }
@media (max-width: 960px) { .layout { grid-template-columns: 1fr; gap: 40px; } .aside { position: static; } }

.prose > * { max-width: 46rem; }
.prose h2 { margin-top: 1.5em; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.2em; }

.service-list { display: grid; gap: 18px; }
.service { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 26px 28px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); scroll-margin-top: 120px; }
.service h2 { font-size: 1.35rem; margin: 4px 0 .35em; }
.service p { margin: 0 0 .5em; color: var(--muted); }
.service p:last-child { margin-bottom: 0; }

.cred-list { display: grid; grid-template-columns: 200px 1fr; margin: 0; border-top: 1px solid var(--line); }
.cred-list dt, .cred-list dd { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cred-list dt { padding-right: 16px; font-weight: 600; color: var(--primary-900); }
@media (max-width: 600px) {
  .cred-list { grid-template-columns: 1fr; }
  .cred-list dt { padding-bottom: 0; border-bottom: 0; }
  .cred-list dd { padding-top: 4px; }
}

.hours { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.hours th, .hours td { padding: 11px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.hours th { width: 45%; font-weight: 600; color: var(--primary-900); }
.hours caption { caption-side: top; text-align: left; }

.notice { display: flex; gap: 14px; padding: 18px 22px; border-radius: var(--radius); background: var(--accent-50); border: 1px solid var(--accent-100); }
.notice .icon { color: var(--accent-700); margin-top: 3px; }
.notice p { margin: 0; }

.mini-steps { display: grid; gap: 14px; margin: 0 0 1em; padding: 0; list-style: none; counter-reset: ms; }
.mini-steps li { display: flex; gap: 16px; align-items: flex-start; }
.mini-steps li::before { counter-increment: ms; content: counter(ms); flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-50); border: 2px solid var(--accent-300); color: var(--primary-900); font: 700 1rem var(--font-serif); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { padding: 72px 0 28px; background: var(--footer-bg); color: var(--on-dark); font-size: .95rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .btn-light, .site-footer .btn-light:hover { color: var(--primary-900); text-decoration: none; margin-top: 8px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-name { margin: 0; font: 700 1.2rem var(--font-serif); color: #fff; }
.footer-heading { margin: 0 0 16px; font: 700 .8rem var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mark); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact .icon { width: 17px; height: 17px; margin-top: 4px; color: var(--mark); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .86rem; }
.footer-bottom p { margin: 0; }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .card:hover, .btn:hover { transform: none; }
}

/* Subheading under a page title (About page: doctor's name) */
.page-hero .page-subhead { margin: 0 0 .35em; font: 700 clamp(1.35rem, 1.1rem + .9vw, 1.8rem) var(--font-serif); color: var(--primary-700); letter-spacing: -.01em; }

/* ---------- Motion ----------
   Subtle, one-time animations. Nothing loops. Everything is skipped for
   visitors who ask their device for reduced motion, and content stays
   visible if the script doesn't run (hiding only starts once site.js adds
   .reveal-ready). Hiding is instant; only the reveal is animated. */
.site-header { transition: box-shadow .3s ease; }
.site-header.scrolled { box-shadow: 0 8px 24px rgba(27, 58, 107, .08); }
.card .icon-badge { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.card:hover .icon-badge { background: var(--accent-700); border-color: var(--accent-700); color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  /* Page load: hero text rises in, photo settles, name card slides in */
  .hero-copy > * { animation: rv-rise .8s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: .1s; }
  .hero-copy > :nth-child(3) { animation-delay: .2s; }
  .hero-copy > :nth-child(4) { animation-delay: .3s; }
  .portrait-wrap .portrait { animation: rv-settle 1s var(--ease) .15s both; }
  .portrait-wrap .float-card { animation: rv-slide .8s var(--ease) .7s both; }
  .info-card { animation: rv-rise .8s var(--ease) .35s both; }
  .info-card:nth-child(2) { animation-delay: .45s; }
  .info-card:nth-child(3) { animation-delay: .55s; }
  .page-hero .container > * { animation: rv-rise .7s var(--ease) both; }
  .page-hero .container > :nth-child(2) { animation-delay: .08s; }
  .page-hero .container > :nth-child(3) { animation-delay: .16s; }
  .page-hero .container > :nth-child(4) { animation-delay: .24s; }

  /* Scroll: fade up once as each part comes into view */
  .reveal-ready .reveal:not(.is-visible),
  .reveal-ready .reveal-group:not(.is-visible) > .reveal-item { opacity: 0; transform: translateY(18px); }
  .reveal.is-visible,
  .reveal-group.is-visible > .reveal-item { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--reveal-delay, 0s); }

  /* Steps: the dashed line draws from left to right */
  .steps::before { transform-origin: left center; }
  .reveal-ready .steps:not(.is-visible)::before { transform: scaleX(0); }
  .steps.is-visible::before { transition: transform 1.4s var(--ease) .15s; }

  /* Map: the pin drops in and its halo opens */
  .map-ring { transform-box: fill-box; transform-origin: center; }
  .reveal-ready .location:not(.is-visible) .map-pin { opacity: 0; transform: translateY(-28px); }
  .reveal-ready .location:not(.is-visible) .map-ring { opacity: 0; transform: scale(.4); }
  .location.is-visible .map-pin { transition: opacity .5s ease .45s, transform .8s cubic-bezier(.3, 1.35, .5, 1) .45s; }
  .location.is-visible .map-ring { transition: transform 1.1s var(--ease) .75s, opacity 1.1s var(--ease) .75s; }

  .btn:active { transform: translateY(0) scale(.98); }
}

@keyframes rv-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rv-settle { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rv-slide { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

/* ---------- Buttons and small interactions ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.site-nav a:not(.btn) { transition: background-color .2s ease, color .2s ease; }
.chips li { transition: transform .2s var(--ease), background-color .2s ease, border-color .2s ease; }
.chips li:hover { background: #fff; border-color: var(--accent-300); }
.text-link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; }
.text-link:hover { background-size: calc(100% - 23px) 1px; }
.site-footer li a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 1px; }
.site-footer li a:hover { text-decoration: none; background-size: 100% 1px; }

@media (prefers-reduced-motion: no-preference) {
  /* Primary and light buttons: a soft light sweep on hover */
  .btn-primary::after, .btn-light::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%); background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%); }
  .btn-light::after { background: linear-gradient(115deg, transparent 30%, var(--blob-primary) 50%, transparent 70%); }
  .btn-primary:hover::after, .btn-light:hover::after { transform: translateX(120%); transition: transform .8s var(--ease); }

  /* Outline buttons: the color fills in from the left */
  .btn-secondary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--primary-50); transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ease); }
  .btn-secondary:hover { background: #fff; }
  .btn-secondary:hover::before { transform: scaleX(1); }

  /* Icons: the phone rings once, the map pin hops once */
  a[href^="tel:"]:hover .icon { animation: rv-ring .6s ease; }
  a[href*="maps/dir"]:hover .icon { animation: rv-hop .5s ease; }

  /* Links: underline draws in */
  .text-link, .site-footer li a { transition: background-size .3s var(--ease); }

  /* Cards, chips and logo */
  .card .icon-badge { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .3s var(--ease); }
  .card:hover .icon-badge { transform: scale(1.06) rotate(-4deg); }
  .chips li:hover { transform: translateY(-2px); }
  .brand:hover .brand-mark svg { animation: rv-beat .9s ease; }

  /* Small accent lines grow in with their section */
  .reveal-ready .reveal:not(.is-visible) .eyebrow::before { width: 0; }
  .reveal.is-visible .eyebrow::before { transition: width .6s var(--ease) .25s; }

  /* Step numbers pop in one by one */
  .steps.is-visible > .step .step-num { animation: rv-pop .6s var(--ease) .1s both; }
  .steps.is-visible > .step:nth-child(2) .step-num { animation-delay: .2s; }
  .steps.is-visible > .step:nth-child(3) .step-num { animation-delay: .3s; }

  /* Mobile menu slides down when opened */
  .js .site-nav.open { animation: rv-drop .25s var(--ease) both; }
}

@keyframes rv-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
@keyframes rv-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } 70% { transform: translateY(-1px); } }
@keyframes rv-beat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.18); } 40% { transform: scale(.96); } 60% { transform: scale(1.1); } }
@keyframes rv-pop { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes rv-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Fresh button touches (draft, 2 Oct 2026) ----------
   1. Tap ripple: a soft circle spreads from where a button is clicked or
      tapped (added by site.js, sits behind the label). Works on phones too.
   2. Hover glow: a soft blush ring joins the shadow (mouse devices only, so
      it never sticks after a tap on a phone).
   3. Home page: the main call button pulses twice after the page loads,
      then stops. Nothing loops. */
:root { --btn-glow: rgba(238, 163, 184, .5); --btn-glow-soft: rgba(238, 163, 184, .35); --btn-halo: rgba(176, 42, 99, .35); --btn-halo-end: rgba(176, 42, 99, 0); }
.btn-ripple { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; background: currentColor; --ripple-o: .3; opacity: var(--ripple-o); transform: scale(0); animation: rv-ripple .7s var(--ease) forwards; }
.btn-secondary .btn-ripple, .btn-light .btn-ripple { --ripple-o: .18; }

@media (prefers-reduced-motion: no-preference) {
  .hero-actions .btn-primary { animation: rv-halo 1.5s ease-out 1.4s 2; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .btn-primary:hover { box-shadow: 0 10px 24px var(--btn-shadow), 0 0 0 4px var(--btn-glow); }
  .btn-secondary:hover { box-shadow: 0 0 0 4px var(--btn-glow-soft); }
}
@keyframes rv-ripple { 45% { opacity: var(--ripple-o); } to { transform: scale(1); opacity: 0; } }
@keyframes rv-halo { 0% { box-shadow: 0 6px 18px var(--btn-shadow), 0 0 0 0 var(--btn-halo); } 100% { box-shadow: 0 6px 18px var(--btn-shadow), 0 0 0 14px var(--btn-halo-end); } }

/* ---------- Calls (3 Oct 2026) ----------
   Services page: one call button after the list.
   Phones only: a "Call to book" button fixed at the bottom of the screen, so
   calling is one tap from anywhere on the page. The footer gets extra bottom
   space so the button never covers its last line. Not shown on larger screens
   or when printing. */
.services-cta { margin-top: 20px; }
.call-bar { display: none; }
@media (max-width: 760px) {
  .call-bar { display: flex; position: fixed; z-index: 90; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); min-height: 52px; box-shadow: 0 10px 28px rgba(27, 58, 107, .35); }
  .site-footer { padding-bottom: calc(28px + 76px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .call-bar { animation: rv-rise .6s var(--ease) .6s both; }
}
@media print { .call-bar { display: none !important; } }

/* ---------- Headshot (3 Oct 2026) ----------
   Dr. Khan's photo comes from his own flyer and is only 228 px square, so it is
   shown small and round (never enlarged past ~150 px). On Home, the large arch
   becomes a brand panel: soft gradient, two quiet rings, his photo in the middle. */
.headshot { display: block; width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 6px solid #fff; box-shadow: 0 12px 30px rgba(27, 58, 107, .22); background: var(--primary-50); }
.portrait-brand { place-items: center; }
.portrait-art { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.portrait-art::before, .portrait-art::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.portrait-art::before { width: 230px; height: 230px; border: 2px solid rgba(176, 42, 99, .16); }
.portrait-art::after { width: 310px; height: 310px; border: 2px solid rgba(36, 80, 143, .1); }
.portrait-art .headshot { position: relative; z-index: 1; }
.doctor-card { text-align: center; }
.doctor-card .headshot { margin: 0 auto 16px; }
.doctor-card strong { display: block; font: 700 1.15rem var(--font-serif); color: var(--primary-900); }
.doctor-card span { display: block; margin-top: 2px; color: var(--muted); font-size: .92rem; }
@media (max-width: 960px) { .portrait-art::after { width: 270px; height: 270px; } }

/* ---------- Header on small phones (5 Oct 2026) ----------
   The registered name "OB/GYN of Jacksonville LLC" is longer, so up to 500 px
   the heart logo is hidden and the name and Menu button get a little tighter, and below 370 px
   the Menu button shows only its icon (the word stays for screen readers). */
@media (max-width: 500px) {
  .brand-mark { display: none; }
  .brand-name { font-size: .95rem; }
  .js .nav-toggle { padding: 8px 12px; gap: 6px; }
}
@media (max-width: 370px) {
  .brand-name { font-size: .9rem; }
  .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .js .nav-toggle { padding: 8px 11px; }
}

/* ---------- Faster first screen (6 Oct 2026) ----------
   First-screen text, buttons and info cards are visible from the first paint;
   they only glide 12px into place (same timing as before). The photo and the
   name card keep their fade. Reduced-motion visitors still get no motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *,
  .info-card,
  .page-hero .container > * { animation-name: rv-nudge; }
}
@keyframes rv-nudge { from { transform: translateY(12px); } to { transform: none; } }