/* Conejo Valley Equine — one stylesheet, no build step. */

@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/assets/fonts/figtree.woff2) format('woff2'); }
@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/marcellus.woff2) format('woff2'); }

:root {
  --blue: #00539F;        /* brand: Canva "BLUE" 00539F */
  --blue-dark: #003F7A;
  --navy: #0A2540;
  --ink: #1D2B3A;
  --muted: #536476;
  --line: #DCE3EA;
  --sky: #EEF4FA;
  --sand: #F7F3EC;
  --red: #B91C1C;         /* emergency */
  --red-dark: #8F1616;
  --display: 'Marcellus', 'Iowan Old Style', Georgia, serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --shadow: 0 12px 32px rgb(10 37 64 / .12);
  --mast: 132px;          /* sticky ER bar + header, for anchor offsets */
}
@media (max-width: 1179px) { :root { --mast: 104px; } }

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }  /* square corners everywhere (client preference), incl. browser-default buttons */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--mast) + 16px); }
body { margin: 0; font: 400 1.0625rem/1.65 var(--sans); color: var(--ink); background: #fff; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.15; color: var(--navy); }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); color: var(--blue); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.25rem; font-weight: 700; }
p, ul, ol, table { margin: 0 0 1.1em; }
a { color: var(--blue); text-underline-offset: .18em; }
a:hover { color: var(--blue-dark); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.er-bar :focus-visible, .site-footer :focus-visible { outline-color: #fff; }
.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-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--navy); color: #fff; }
.skip-link:focus { top: 12px; color: #fff; }
.nowrap { white-space: nowrap; }

.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: calc(680px + 2 * var(--gutter)); }
.section { padding-block: clamp(48px, 7vw, 96px); }
.bg-sand { background: var(--sand); }
.bg-sky { background: var(--sky); }
.bg-blue { background: var(--blue); color: #fff; }
.center { text-align: center; }
.lede { font-size: clamp(1.125rem, 1.6vw, 1.3rem); color: var(--muted); }
.eyebrow { font: 700 .8125rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: .75em; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 46px; padding: .65em 1.4em; border: 2px solid var(--blue); background: var(--blue); color: #fff; font: 700 .9375rem/1.2 var(--sans); letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.btn-outline { background: transparent; color: var(--blue); }
.btn-outline:hover { background: var(--blue); color: #fff; }
.btn-red { background: var(--red); border-color: var(--red); }
.btn-red:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn .nowrap { display: contents; }  /* keep the no-wrap text in the label's flex item (no extra gap) */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.center .btn-row { justify-content: center; }

/* Sticky masthead: emergency bar + white header */
.masthead { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 1px 0 var(--line), 0 6px 18px rgb(10 37 64 / .06); }
.er-bar { display: flex; justify-content: center; align-items: center; gap: .4em 1em; flex-wrap: wrap; min-height: 40px; padding: 6px var(--gutter); background: var(--red); color: #fff; font-size: .9375rem; line-height: 1.3; text-align: center; }
.er-bar a { padding-block: 3px; color: #fff; font-weight: 700; }
.er-bar .er-call { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
.er-bar svg { width: 16px; height: 16px; }
.er-bar .er-more { font-weight: 500; }
.er-bar .er-short { display: none; font-weight: 700; }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 92px; }
.brand { flex: none; margin-right: auto; }
.brand img { width: 165px; height: auto; }
.menu-toggle { display: none; }
.site-nav { display: flex; align-items: center; gap: 22px; }
.nav-list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav-list > li { position: relative; display: flex; align-items: center; }
.nav-list > li > a { padding: 10px 8px; color: var(--ink); font-weight: 500; text-decoration: none; white-space: nowrap; }
.nav-list > li > a:hover, .nav-list a[aria-current] { color: var(--blue); }
.nav-list > li > a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.sub-toggle { display: grid; place-items: center; width: 26px; height: 32px; margin-left: -6px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.sub-toggle svg { width: 12px; height: 12px; transition: transform .15s; }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.ext-icon { width: .8em; height: .8em; margin-left: .25em; vertical-align: -.05em; }
.submenu { position: absolute; top: 100%; left: -12px; z-index: 5; display: none; min-width: 250px; margin: 0; padding: 10px; list-style: none; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.submenu a { display: block; padding: 8px 12px; color: var(--ink); text-decoration: none; line-height: 1.35; white-space: nowrap; }
.submenu a:hover, .submenu a[aria-current] { background: var(--sky); color: var(--blue); }
.submenu .all { font-weight: 700; color: var(--blue); }
.sub-toggle[aria-expanded="true"] + .submenu { display: block; }
@media (min-width: 1180px) and (hover: hover) { .nav-list > li:hover > .submenu { display: block; } }
/* 132px = the full desktop masthead: on short screens --mast drops to 40px, but the dropdown still hangs below the whole header */
@media (min-width: 1180px) { .submenu { max-height: calc(100dvh - 132px); overflow-y: auto; overscroll-behavior: contain; } }

/* Contact button (.appt; there's no appointments page, the practice doesn't book online): contact details
   appear on hover / focus (desktop) and below it in the mobile menu */
.appt { position: relative; }
.appt-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 5; display: none; width: 300px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); font-size: .9375rem; }
.appt-panel::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }  /* hover bridge */
.appt:focus-within .appt-panel { display: block; }
@media (hover: hover) { .appt:hover .appt-panel { display: block; } }
/* Escape hides a hover/focus popup until the pointer or focus comes back (js/site.js) */
@media (min-width: 1180px) { .appt.dismiss .appt-panel, .nav-list > li.dismiss > .sub-toggle[aria-expanded="false"] + .submenu { display: none; } }
.contact-list { margin: 0; padding: 0; list-style: none; }
.contact-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 6px 0; line-height: 1.45; }
.contact-list svg { width: 18px; height: 18px; margin-top: 2px; color: var(--blue); }
.contact-list a { font-weight: 600; }
.contact-list small { display: block; color: var(--muted); font-size: .8125rem; }

@media (max-width: 1179px) {
  .site-header .wrap { min-height: 64px; }
  .brand img { width: 118px; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 2px solid var(--blue); background: #fff; color: var(--blue); font: 700 .9375rem var(--sans); cursor: pointer; }
  .menu-toggle svg { width: 20px; height: 20px; }
  /* 104px = the full mobile masthead: on short screens --mast drops to 40px, but the panel still hangs below the whole header */
  .site-nav { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100dvh - 104px); overflow-y: auto; padding: 8px var(--gutter) 28px; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 18px 30px rgb(10 37 64 / .15); }
  .nav-open .site-nav { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .nav-list > li > a { flex: 1; padding: 14px 0; font-size: 1.0625rem; }
  .nav-list > li > a[aria-current] { text-decoration: none; }
  .sub-toggle { width: 48px; height: 48px; margin: 0; }
  .sub-toggle svg { width: 16px; height: 16px; }
  .submenu { position: static; flex-basis: 100%; min-width: 0; margin: 0 0 10px; padding: 4px 0 4px 12px; border: 0; border-left: 2px solid var(--line); box-shadow: none; }
  .appt { margin-top: 20px; }
  .appt > .btn { width: 100%; }
  .appt-panel { position: static; display: block; width: auto; margin-top: 14px; padding: 0; border: 0; box-shadow: none; }
  .appt-panel::before { content: none; }
}
@media (min-width: 700px) and (max-width: 1179px) { .site-nav { left: auto; width: 400px; border-left: 1px solid var(--line); } }
/* Keep the emergency bar on one line (--mast assumes it) */
@media (max-width: 640px) {
  .er-bar { font-size: .875rem; }
  .er-bar .er-long { display: none; }
  .er-bar .er-short { display: inline; }
}
@media (max-width: 364px) {
  .er-bar { font-size: .8125rem; column-gap: .7em; }
  .er-bar .er-call svg { display: none; }
  .er-bar a { padding-block: 4px; }
}
@media (max-width: 312px) { .er-bar .er-more { display: none; } }
/* Short screens (landscape phones, high zoom): only the emergency bar stays pinned */
@media (max-height: 500px) {
  :root { --mast: 40px; }
  .masthead { display: contents; }
  .er-bar { position: sticky; top: 0; z-index: 50; }
  .site-header { position: relative; z-index: 49; background: #fff; box-shadow: 0 1px 0 var(--line); }
}

/* Home */
.home-intro { padding-block: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 32px); text-align: center; }
.tagline { margin: 0; font: 400 clamp(2rem, 5vw, 3.25rem)/1.1 var(--display); color: var(--blue); text-wrap: balance; }
.call-line { margin: .9em 0 0; font-weight: 700; font-size: clamp(.875rem, 1.4vw, 1rem); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.call-line a { color: inherit; white-space: nowrap; text-decoration-color: var(--blue); text-decoration-thickness: 2px; }
.hero { position: relative; }
.hero img { width: 100%; aspect-ratio: 1919 / 709; min-height: 230px; object-fit: cover; }
/* Flared white frames: the home tiles panel and the frame round each page's headline photo (the photos
   themselves stay square). The corners jut out like the serifs of the Marcellus headings and each side
   sits --jut further in. The curve is Marcellus's own 'l' flare, as one cubic. Browsers without shape()
   just show square corners. The frame is the ::before, so the parent's drop-shadow follows the taper. */
.page-photo, .tiles {
  --jut: clamp(4px, .56vw, 8px); --flare: calc(var(--jut) * 13.5);  /* 13.5 = the font's own flare proportions */
  --tip: calc(var(--jut) * .14); --curve: calc(var(--flare) - var(--tip));
}
.page-photo::before, .tiles::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #fff;
  clip-path: shape(from 0 0, hline to 100%, vline to var(--tip),
    curve to calc(100% - var(--jut)) var(--flare) with calc(100% - var(--jut) * .842) calc(var(--tip) + var(--curve) * .221) / calc(100% - var(--jut)) calc(var(--tip) + var(--curve) * .65),
    vline to calc(100% - var(--flare)),
    curve to 100% calc(100% - var(--tip)) with calc(100% - var(--jut)) calc(100% - var(--tip) - var(--curve) * .65) / calc(100% - var(--jut) * .842) calc(100% - var(--tip) - var(--curve) * .221),
    vline to 100%, hline to 0, vline to calc(100% - var(--tip)),
    curve to var(--jut) calc(100% - var(--flare)) with calc(var(--jut) * .842) calc(100% - var(--tip) - var(--curve) * .221) / var(--jut) calc(100% - var(--tip) - var(--curve) * .65),
    vline to var(--flare),
    curve to 0 var(--tip) with var(--jut) calc(var(--tip) + var(--curve) * .65) / calc(var(--jut) * .842) calc(var(--tip) + var(--curve) * .221),
    close);
}
.tiles { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); margin: clamp(-56px, -4.5vw, -32px) clamp(0px, 3vw, 40px) 0; padding: clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px) clamp(34px, 3vw, 44px); filter: drop-shadow(0 12px 16px rgb(10 37 64 / .12)); }.tile { position: relative; display: block; text-decoration: none; }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tile span { position: absolute; left: 50%; bottom: 0; translate: -50% 50%; padding: .45em 1.1em; background: #fff; box-shadow: 0 4px 14px rgb(10 37 64 / .16); font: 400 clamp(1.05rem, 1.7vw, 1.35rem)/1.2 var(--display); color: var(--blue); white-space: nowrap; transition: background .15s, color .15s; }
.tile:hover span, .tile:focus-visible span { background: var(--blue); color: #fff; }
.tile.tile-er span { color: var(--red); }
.tile.tile-er:hover span, .tile.tile-er:focus-visible span { background: var(--red); color: #fff; }
@media (max-width: 760px) {
  /* Full width on phones: the panel's sides line up with the photo above and only its corners jut past
     them (otherwise the photo shows beside the tapered sides). The padding keeps the tiles where they were. */
  .tiles { grid-template-columns: repeat(2, 1fr); row-gap: 36px; margin-inline: calc(-1 * var(--jut)); padding-inline: calc(clamp(14px, 2vw, 24px) + var(--jut)); }
}
@media (max-width: 374px) { .tile span { padding-inline: .6em; font-size: 1rem; } }
.statement { margin-top: clamp(48px, 7vw, 88px); padding-block: clamp(48px, 7vw, 88px); }
.statement p { max-width: 62ch; margin: 0 auto; font-size: clamp(1.125rem, 1.8vw, 1.375rem); line-height: 1.6; text-align: center; }
@media (max-width: 600px) { .statement p { text-align: left; } }
.welcome { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.welcome h1 { margin-bottom: .2em; }
.welcome .sub { font-size: clamp(1.125rem, 1.6vw, 1.3rem); font-weight: 600; color: var(--navy); }
.svc-card { padding: clamp(22px, 3vw, 34px); background: var(--sky); }
.svc-card h2 { font-size: 1.6rem; }
.link-list { margin: 0 0 1.2em; padding: 0; list-style: none; }
.link-list li { border-bottom: 1px solid rgb(0 83 159 / .15); }
.link-list a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 2px; font-weight: 600; text-decoration: none; }
.link-list svg { flex: none; width: 1.1em; height: 1.1em; transition: translate .15s; }
.link-list a:hover svg { translate: 3px 0; }
@media (max-width: 900px) { .welcome { grid-template-columns: 1fr; } }

/* Appointments & policy band (home) */
.policy { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); }
.policy h3 { font-size: 1.2rem; }
.policy .contact-list { margin-top: 18px; }
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { padding: 8px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.hours th { padding-right: 16px; font-weight: 600; white-space: nowrap; color: var(--navy); }
.hours small { display: block; color: var(--muted); font-size: .875rem; }
@media (max-width: 900px) { .policy { grid-template-columns: 1fr; } }

/* Interior page head */
.page-head { padding-block: clamp(28px, 4vw, 56px); background: var(--sand); }
.page-head .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.page-head.no-photo .wrap { grid-template-columns: minmax(0, 860px); }
.page-head h1 { margin-bottom: .3em; }
.page-head .lede { margin: 0; }
.page-head img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* White frame (the home tiles panel's padding); shadow = --shadow. The tapered sides are --jut thicker,
   so the photo has the same white all round; the frame overhangs its column by --jut so the photo keeps its size. */
.page-photo { position: relative; margin-inline: calc(-1 * var(--jut)); padding: clamp(14px, 2vw, 24px) calc(clamp(14px, 2vw, 24px) + var(--jut)); filter: drop-shadow(0 12px 16px rgb(10 37 64 / .12)); }
.page-head .btn-row { margin-top: 24px; }
.crumbs { margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; font-size: .875rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; content: "/" / ""; margin-right: 4px; color: #9aa9b8; }
.crumbs a { color: var(--muted); }
@media (max-width: 800px) { .page-head .wrap { grid-template-columns: 1fr; } }

/* Body copy + side card */
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.prose:not(.wrap) { max-width: 70ch; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 1.4em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.6em; }
.prose li { margin-bottom: .35em; }
ul.ticks { padding: 0; list-style: none; }
ul.ticks li { position: relative; padding-left: 1.7em; }
ul.ticks li::before { content: ""; position: absolute; left: .2em; top: .5em; width: .55em; height: .3em; border: solid var(--blue); border-width: 0 0 2.5px 2.5px; rotate: -45deg; }
.side-card { position: sticky; top: calc(var(--mast) + 24px); padding: 26px; background: var(--sky); }
.side-card.is-er { background: #FDF1F1; }
.side-card h2 { font-size: 1.5rem; }
.side-card .btn { width: 100%; margin-top: 10px; }
.side-card .er-note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgb(0 83 159 / .15); font-size: .9375rem; }
.side-card .hours th, .side-card .hours td { display: block; padding: 0; border: 0; }
.side-card .hours tr { display: block; padding-block: 10px; border-bottom: 1px solid var(--line); }
.side-card .hours tr:last-child { border-bottom: 0; }  /* the note below draws the rule */
@media (max-width: 900px) { .content-grid { grid-template-columns: 1fr; } }
/* The card sticks only where all of it fits below the masthead (tallest, /contact/, needs 733px),
   so keyboard focus never lands on a link stuck below the window */
@media (max-width: 900px), (max-height: 760px) { .side-card { position: static; } }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0 0; }
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #000; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chips a { display: inline-block; padding: 8px 16px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 600; font-size: .9375rem; text-decoration: none; }
.chips a:hover { border-color: var(--blue); color: var(--blue); }

/* Card grids (services, modalities, forms) */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(18px, 2.4vw, 28px); margin: 0; padding: 0; list-style: none; }
.card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: box-shadow .2s, translate .2s; }
a.card:hover { box-shadow: var(--shadow); translate: 0 -3px; color: var(--ink); }
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.card h2, .card h3 { margin-bottom: .35em; font: 400 1.4rem/1.2 var(--display); color: var(--blue); }
.card p { margin-bottom: .9em; color: var(--muted); font-size: 1rem; }
.card .more { display: flex; align-items: center; gap: .35em; margin-top: auto; font-weight: 700; color: var(--blue); }
.card .more svg { width: 1em; height: 1em; }
.section-head { max-width: 760px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }

/* Online forms (rows, after VA Equine's documents page) */
.forms-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.forms-layout h2 { font-size: 1.75rem; }
.form-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.form-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.form-row > svg { width: 22px; height: 22px; color: var(--blue); transition: translate .15s; }
a.form-row:hover { color: var(--ink); }
a.form-row:hover .form-title { text-decoration: underline; }
a.form-row:hover > svg { translate: 4px 0; }
.form-icon { display: grid; place-items: center; width: 48px; height: 48px; background: var(--sky); color: var(--blue); }
.form-icon svg { width: 22px; height: 22px; }
.form-title { display: block; font: 400 1.35rem/1.25 var(--display); color: var(--blue); }
.form-desc { display: block; margin-top: 2px; color: var(--muted); font-size: .9375rem; }
.soon { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@media (max-width: 800px) { .forms-layout { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .form-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; } .form-icon { width: 40px; height: 40px; } .form-row .soon { grid-column: 2; } }

/* Team (one doctor per row, bios inline) */
.team { margin: 0; padding: 0; list-style: none; }
.doctor { display: grid; grid-template-columns: minmax(220px, 32%) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: clamp(32px, 5vw, 56px); border-top: 1px solid var(--line); }
.doctor:first-child { border-top: 0; padding-top: 0; }
.doctor > div { max-width: 62ch; }
.doctor img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--line); }
.team-group { margin-bottom: clamp(28px, 4vw, 44px); font: 700 .875rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.doctor h3 { margin-bottom: .6em; font: 400 clamp(1.6rem, 2.8vw, 2.1rem)/1.15 var(--display); color: var(--blue); }
.doctor .interests { padding: 14px 18px; background: var(--sky); font-size: 1rem; }
.doctor .interests strong { color: var(--navy); }
@media (max-width: 700px) { .doctor { grid-template-columns: 1fr; } .doctor img { max-width: 420px; } }

/* Contact methods */
.methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.method { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 24px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
a.method:hover { border-color: var(--blue); box-shadow: var(--shadow); color: var(--ink); }
.method svg { width: 28px; height: 28px; color: var(--blue); }
.method strong { font: 400 1.35rem/1.2 var(--display); color: var(--blue); }
.method span { color: var(--muted); font-size: .9375rem; }
.method b { color: var(--navy); }
.method.is-er { border-color: rgb(185 28 28 / .35); }
.method.is-er svg, .method.is-er strong { color: var(--red); }
@media (max-width: 1100px) { .methods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .methods { grid-template-columns: 1fr; } }

/* Form placeholder (Paperform embeds go here) */
.form-slot { padding: clamp(24px, 4vw, 40px); border: 2px dashed #a9bccf; background: #fff; text-align: center; }
.form-slot h2 { font-size: 1.6rem; }
.form-slot p { color: var(--muted); }
.form-slot .btn-row { justify-content: center; }

/* FAQ / accordions */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 18px 40px 18px 0; font-weight: 700; font-size: 1.0625rem; color: var(--navy); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; content: "+" / ""; position: absolute; right: 6px; top: 50%; translate: 0 -50%; font: 400 1.6rem/1 var(--sans); color: var(--blue); }
.faq details[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.faq details > div { padding: 0 0 12px; }

/* Resource lists */
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; margin: 0 0 8px; padding: 0; list-style: none; }
.res-grid.two { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
@media (min-width: 1000px) { .resources .res-grid.two { grid-template-columns: 1fr 1fr; } }
.res { display: flex; flex-direction: column; padding: 18px 20px; background: #fff; border: 1px solid var(--line); }
.res h3 { margin-bottom: .25em; font-size: 1.0625rem; }
.res p { margin: 0 0 .4em; color: var(--muted); font-size: .9375rem; }
.res .res-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: auto 0 0; font-weight: 600; color: var(--ink); }
.res-reviewed { margin-top: 40px; color: var(--muted); font-size: .9375rem; }
.res h3 a { text-decoration: none; }
.res h3 a:hover { text-decoration: underline; }
.res .res-src { margin: auto 0 0; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.library h2, .resources h2 { margin-top: clamp(36px, 5vw, 56px); }
.library .callout + h2, .resources nav + h2 { margin-top: 32px; }
.resources > p:not(.callout) { max-width: 75ch; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 1rem; }
.data-table th, .data-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.data-table thead th { background: var(--sky); color: var(--navy); font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; }
.data-table td a { font-weight: 600; white-space: nowrap; }
@media (max-width: 600px) {  /* stack table rows on phones so phone numbers never scroll out of view */
  .table-wrap thead { display: none; }
  .table-wrap tr, .table-wrap th, .table-wrap td { display: block; }
  .table-wrap th, .table-wrap td { padding: 0 14px; border: 0; }
  .table-wrap td:empty { display: none; }
  .table-wrap tr { padding-block: 12px; border-bottom: 1px solid var(--line); }
}
.toc { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.callout { padding: 20px 24px; border-left: 4px solid var(--blue); background: var(--sky); }
.callout.is-er { border-left-color: var(--red); background: #FDF1F1; }
.callout > :last-child { margin-bottom: 0; }
.draft-note { margin-bottom: 28px; padding: 12px 16px; border: 1px dashed #c58b00; background: #FFF8E6; color: #5c4400; font-size: .9375rem; }

/* CTA band */
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cta-band h2 { margin: 0 0 .2em; }
.cta-band p { margin: 0; }

/* Footer */
.site-footer { background: var(--navy); color: #c9d6e3; font-size: .9375rem; }
.site-footer a { color: #fff; }
.footer-main { display: grid; grid-template-columns: 1.3fr 1.25fr .8fr .9fr; gap: clamp(28px, 4vw, 56px); padding-block: clamp(48px, 6vw, 72px) 36px; }
.footer-brand img { width: 190px; margin-bottom: 14px; }
.footer-tagline { margin: 0 0 18px; font: 400 1.35rem/1.3 var(--display); color: #fff; }
.site-footer h2 { margin: 0 0 14px; font: 700 .8125rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { padding: 4px 0; }
.site-footer .contact-list svg { color: #8fb6e3; }
.site-footer .contact-list small { color: #a9bccf; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgb(255 255 255 / .3); }
.social a:hover { background: #fff; color: var(--navy); }
.social svg { width: 20px; height: 20px; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 20px 28px; border-top: 1px solid rgb(255 255 255 / .14); font-size: .875rem; }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: 6px 20px; }
@media (max-width: 1100px) { .footer-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-main { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
@media print {
  .masthead, .site-footer, .cta-band { display: none; }
  .side-card:not(:has(.hours)) { display: none; }  /* the Contact card holds the office hours, so it prints */
}