/* =====================================================================================================
   The EyeSite Doctors of Optometry: site.css
   Design language: Georgetown Optician (client's chosen reference), rebuilt for The EyeSite and fixed for
   WCAG 2.2 AA. One stylesheet for every page. Page authors: DO NOT EDIT. Ask for a new component instead.
   Contents: 1 tokens · 2 fonts · 3 reset/base · 4 type · 5 layout & bands · 6 buttons & links · 7 chrome
   (announcement, header, nav, mobile menu, action bar) · 8 heroes & breadcrumbs · 9 content components ·
   10 people & reviews · 11 eyewear & insurance · 12 visit (hours, map, social) · 13 forms · 14 blog · 15 tables ·
   16 CTA band · 17 footer · 18 motion · 18b forced colours · 19 print
   ===================================================================================================== */

/* ---------- 1. TOKENS ----------------------------------------------------------------------------------
   Colour (contrast ratios are WCAG 2.x, measured against the background named):
   --teal       #004B5A  bands, header, footer, hours card; ALL text on light bg. White on it 9.75:1; on blush 7.82:1
   --teal-900   #003A46  'Call' half of the mobile action bar, pressed states. White on it 11.6:1
   --blush      #F6E3D3  alternate section bands, review cards, tags. Teal text 7.82:1
   --coral      #C73A29  THE booking colour: 'Request appointment' + form submit only. White text 5.17:1
                         (Georgetown's #E24E3C is 3.90:1 and fails). Hover -> teal (on teal bands -> white)
   --turq       #2AA8C2  logo turquoise. DECORATION ONLY (2.81:1 on white): glyphs, icon accents, portrait rings,
                         review quote marks, map
   --turq-ink   #0B6575  turquoise text: eyebrows, categories, link hover. 6.7:1 white, 5.38:1 blush
   --turq-light #8FD6E4  focus ring + accents on teal bands. 5.99:1 on teal
   --grey       #505050  logo grey: muted meta (dates, fine print). 8.06:1 white, 6.47:1 blush
   --mist       #E6F3F5  info notes, icon wells on white. Teal on it 8.6:1
   --error      #B42318  form errors. 6.4:1 white.   --success #1D6B45  6.6:1 white
   --draft-bg   #FFF4D6 / --draft-ink #6B4400  'Draft, pending doctor review' notes (staging only). 8.2:1
   Hairlines: --line teal 20% (dividers), --line-strong teal 30% (feature top rules), --wline white 30% (on teal)
   Type: Marcellus 400 UPPERCASE for H1-H3 (display); Karla 400-700 for everything else.
         H1 41->64 (hero 41->72) · H2 28->50 · H3 24->33 · body 16/24 · article 16->21 · blog prose 17->19/1.6
         nav, buttons, text links 14px 700 uppercase · eyebrow 14px 700 +0.12em
   Space: section padding 80 desktop / 48 tablet / 40 phone; grid gap 24; container 1400 max with 20px gutters
   Radii: --r 24 (images, cards, map, hours) · --r-sm 20 (service-card images) · pills 9999 · inputs 5
   ------------------------------------------------------------------------------------------------------ */
:root{
  --teal:#004B5A; --teal-900:#003A46; --teal-700:#0A5D6D; --blush:#F6E3D3; --blush-200:#FAEFE6;
  --coral:#C73A29; --turq:#2AA8C2; --turq-ink:#0B6575; --turq-light:#8FD6E4;
  --grey:#505050; --mist:#E6F3F5; --white:#fff;
  --error:#B42318; --error-bg:#FDECEA; --success:#1D6B45; --success-bg:#E5F3EC;
  --draft-bg:#FFF4D6; --draft-ink:#6B4400; --draft-line:#C98A00;
  --line:rgba(0,75,90,.2); --line-strong:rgba(0,75,90,.3); --wline:rgba(255,255,255,.3);
  --input-line:#8A9DA2;  /* 3.0:1 on white: meets 1.4.11 for input borders */

  --display:'Marcellus','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --body:'Karla',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fs-h1:clamp(2.5625rem,1.75rem + 2.6vw,4rem);
  --fs-hero:clamp(2.5625rem,1.55rem + 3.3vw,4.5rem);
  --fs-h2:clamp(1.75rem,1.1rem + 2.2vw,3.125rem);
  --fs-h3:clamp(1.5rem,1.22rem + .9vw,2.0625rem);
  --fs-lead:clamp(1.125rem,.95rem + .7vw,1.5rem);
  --fs-article:clamp(1rem,.86rem + .5vw,1.3125rem);
  --fs-prose:clamp(1.0625rem,.98rem + .3vw,1.1875rem);

  --gutter:20px; --max:1400px; --pad:80px; --gap:24px;
  --r:24px; --r-sm:20px; --r-input:5px; --pill:9999px;
  --hdr-h:96px; --abar-h:0px;
  --ease:cubic-bezier(.4,0,.2,1);
  --focus:var(--teal);
  --glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 2.5h37'/%3E%3Cpath d='M3 2.5h13.5l-1.2 7.6a3 3 0 0 1-3 2.5H7.2a3 3 0 0 1-3-2.5z'/%3E%3Cpath d='M23.5 2.5H37l-1.2 7.6a3 3 0 0 1-3 2.5h-5.1a3 3 0 0 1-3-2.5z'/%3E%3Cpath d='M16.5 4.6c1.6-1.2 5.4-1.2 7 0'/%3E%3C/svg%3E");
  /* the clinic's interlocking-Y exam-room wallpaper, used ONCE: the map facade (see STYLEGUIDE) */
  --wallpaper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='44' viewBox='0 0 70 44'%3E%3Crect width='70' height='44' fill='%23E3B567'/%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M35 22v17M35 22l-14.7 -8.5M35 22l14.7 -8.5M0 0v17M0 0l-14.7 -8.5M0 0l14.7 -8.5M70 0v17M70 0l-14.7 -8.5M70 0l14.7 -8.5M0 44v17M0 44l-14.7 -8.5M0 44l14.7 -8.5M70 44v17M70 44l-14.7 -8.5M70 44l14.7 -8.5' stroke='%23EECD92' stroke-width='22'/%3E%3Cpath d='M35 22v17M35 22l-14.7 -8.5M35 22l14.7 -8.5M0 0v17M0 0l-14.7 -8.5M0 0l14.7 -8.5M70 0v17M70 0l-14.7 -8.5M70 0l14.7 -8.5M0 44v17M0 44l-14.7 -8.5M0 44l14.7 -8.5M70 44v17M70 44l-14.7 -8.5M70 44l14.7 -8.5' stroke='%23FBF6EE' stroke-width='16'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width:991px){ :root{ --pad:56px; } }
@media (max-width:767px){ :root{ --pad:44px; } }
@media (max-width:575px){ :root{ --gutter:16px; } }
@media (max-width:1023px){ :root{ --hdr-h:64px; } }
@media (max-width:767px){ :root{ --abar-h:56px; } }
/* the bar is hidden until the hero CTAs scroll away (site.js); no bottom scroll padding while it is hidden */
html.abar-hidden{ --abar-h:0px; }

/* ---------- 2. FONTS (self-hosted latin subsets, OFL) ---------- */
@font-face{ font-family:'Marcellus'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/fonts/marcellus-latin-400.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:'Karla'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/assets/fonts/karla-latin-var.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:'Karla'; font-style:italic; font-weight:400 700; font-display:swap;
  src:url(/assets/fonts/karla-italic-latin-var.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; }

/* ---------- 3. RESET / BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--hdr-h) + 24px); scroll-padding-bottom:calc(var(--abar-h) + 16px); }
body{ margin:0; background:var(--white); color:var(--teal); font:400 16px/1.5 var(--body); -webkit-font-smoothing:antialiased; overflow-x:clip; }
img,svg,video,iframe{ display:block; max-width:100%; }
img{ height:auto; }
picture{ display:contents; }
a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:4px; }
a[href^="tel:"]{ white-space:nowrap; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0; padding:0; }
ul[class],ol[class]{ list-style:none; }
h1,h2,h3,h4,h5,h6{ margin:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
address{ font-style:normal; }
hr{ border:0; border-top:1px solid var(--line); margin:40px 0; }
[hidden]{ display:none !important; }
main:focus{ outline:none; }
.icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.icon{ width:20px; height:20px; flex:none; }
body.menu-open{ overflow:hidden; }

.sr-only{ position:absolute !important; 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:16px; top:-120px; z-index:300; background:var(--white); color:var(--teal); padding:14px 22px; border-radius:var(--pill);
  font-weight:700; text-decoration:none; box-shadow:0 0 0 3px var(--teal); }
.skip-link:focus{ top:12px; }

/* focus: always visible, 3px. Light bg = teal; teal bg = light turquoise */
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:6px; }
.on-teal{ --focus:var(--turq-light); }
.on-light{ --focus:var(--teal); }

/* ---------- 4. TYPE ---------- */
h1,h2,h3,.h1,.h2,.h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:0; text-wrap:balance; }
h1,.h1{ font-size:var(--fs-h1); line-height:1.1; }
h2,.h2{ font-size:var(--fs-h2); line-height:1.2; }
h3,.h3{ font-size:var(--fs-h3); line-height:1.22; }
h4,.h4{ font:700 21px/1.33 var(--body); text-transform:none; }
@media (max-width:767px){ h4,.h4{ font-size:19px; } }
.eyebrow{ display:flex; align-items:center; gap:12px; margin:0 0 20px; font:700 14px/1.4 var(--body); text-transform:uppercase; letter-spacing:.12em; color:var(--turq-ink); }
.eyebrow::before{ content:""; flex:none; width:35px; height:14px; background:var(--turq); -webkit-mask:var(--glyph) no-repeat center/contain; mask:var(--glyph) no-repeat center/contain; }
.center .eyebrow, .eyebrow.center{ justify-content:center; }
.on-teal .eyebrow{ color:var(--blush); }
.on-teal .eyebrow::before{ background:var(--turq-light); }
.eyebrow--plain::before{ display:none; }
.lead{ font-size:var(--fs-lead); line-height:1.55; }
.article{ font-size:var(--fs-article); line-height:1.5; }
.small{ font-size:14px; line-height:1.5; }
.fineprint{ font-size:14px; line-height:1.5; color:var(--grey); }
.on-teal .fineprint{ color:#D6E3E6; }
.muted{ color:var(--grey); }
.center{ text-align:center; }
.measure{ max-width:70ch; }
.text-balance{ text-wrap:balance; }
.num{ font:700 21px/1.33 var(--body); font-variant-numeric:tabular-nums; }

/* ---------- 5. LAYOUT & BANDS ----------
   Bands alternate: teal hero -> blush -> white -> teal -> white -> blush ... Never two of the same colour in a row. */
.container{ width:min(var(--max), 100% - 2*var(--gutter)); margin-inline:auto; }
.container--narrow{ max-width:980px; }
.container--prose{ max-width:760px; }
.section{ padding-block:var(--pad); }
.section--tight{ padding-block:calc(var(--pad) * .6); }
.section + .section--flush-top{ padding-top:0; }
.bg-white{ background:var(--white); }
.bg-blush{ background:var(--blush); }
.bg-teal{ background:var(--teal); color:var(--white); }
.bg-mist{ background:var(--mist); }
.section-head{ margin-bottom:48px; max-width:900px; }
.section-head.center{ margin-inline:auto; }
.section-head h2 + p, .section-head h2 + .article, .section-head h2 + .lead{ margin-top:24px; }
.section-head > .tlink, .section-head > .actions{ margin-top:28px; }
.split-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px 48px; flex-wrap:wrap; margin-bottom:48px; }
.split-head > div:first-child{ max-width:860px; }
.split-head .intro{ margin-top:20px; max-width:640px; }
.split-head-aside{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; text-align:right; }
@media (max-width:1219px){ .split-head-aside{ align-items:flex-start; text-align:left; } }
@media (max-width:767px){
  .section-head, .split-head{ margin-bottom:32px; }
}
.grid{ display:grid; gap:var(--gap); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1199px){ .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:991px){ .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }
.stack > * + *{ margin-top:var(--stack,24px); }
.mt-0{ margin-top:0 !important; } .mt-s{ margin-top:16px; } .mt-m{ margin-top:32px; } .mt-l{ margin-top:56px; }
.mb-0{ margin-bottom:0 !important; } .mb-s{ margin-bottom:16px; } .mb-m{ margin-bottom:32px; } .mb-l{ margin-bottom:56px; }
/* keep a short string on one line ("6–9 months", "Forma-I", "9-1-1"); use instead of invisible joiner characters */
.nowrap{ white-space:nowrap; }

/* ---------- 6. BUTTONS & LINKS ----------
   .btn            coral pill. ONLY for 'Request appointment' and form submit (the one booking colour)
   .btn--secondary teal pill for other primary actions (Check your coverage, Get directions, Glasses & sunglasses)
   .btn--outline   teal outline pill (tertiary); on teal bands use .btn--light / .btn--outline-light
   .tlink          uppercase underlined text link: the Georgetown secondary CTA */
.btn, .wpforms-submit{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:14px 26px;
  border:1.5px solid transparent; border-radius:var(--pill); background:var(--coral); color:var(--white);
  font:700 14px/1.3 var(--body); text-transform:uppercase; letter-spacing:.04em; text-decoration:none; text-align:center;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.btn:hover, .wpforms-submit:hover{ background:var(--teal); }
.btn:focus-visible, .wpforms-submit:focus-visible{ border-radius:var(--pill); }
.btn .icon{ width:18px; height:18px; }
.btn--secondary{ background:var(--teal); }
.btn--secondary:hover{ background:var(--teal-900); }
.btn--outline{ background:transparent; color:var(--teal); border-color:var(--teal); }
.btn--outline:hover{ background:var(--teal); color:var(--white); }
.on-teal .btn:hover{ background:var(--white); color:var(--teal); }
.btn--light, .on-teal .btn--secondary{ background:var(--white); color:var(--teal); }
.btn--light:hover, .on-teal .btn--secondary:hover{ background:var(--blush); color:var(--teal); }
.btn--outline-light, .on-teal .btn--outline{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.75); }
.btn--outline-light:hover, .on-teal .btn--outline:hover{ background:var(--white); color:var(--teal); border-color:var(--white); }
.btn--block{ display:flex; width:100%; }
.btn--sm{ min-height:40px; padding:10px 18px; font-size:13px; }
.btn[disabled], .btn[aria-disabled="true"], .wpforms-submit[aria-disabled="true"]{ opacity:.55; pointer-events:none; }

.tlink{ display:inline-flex; align-items:center; gap:8px; padding-block:8px; font:700 14px/1.3 var(--body); text-transform:uppercase; letter-spacing:.04em;
  color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:8px; background:none; border:0;
  transition:text-underline-offset .3s var(--ease), color .3s var(--ease); }
.tlink:hover{ text-underline-offset:4px; color:var(--turq-ink); }
.on-teal .tlink:hover{ color:var(--blush); }
.tlink .icon, .tlink svg{ width:16px; height:16px; flex:none; }
.bg-blush .tlink:hover{ color:var(--teal); }
.link{ text-decoration:underline; text-underline-offset:4px; }
.link:hover{ color:var(--turq-ink); }
.actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; }
.actions--center{ justify-content:center; }
@media (max-width:575px){
  .actions--stack{ flex-direction:column; align-items:stretch; gap:12px; }
  .actions--stack .btn{ width:100%; }
  .actions--stack .tlink{ justify-content:center; }
}

/* ---------- 7. CHROME ---------- */
/* 7a announcement bar (switch: announcement_enabled in site.yaml) */
.announce{ background:var(--blush); color:var(--teal); font-size:14px; line-height:1.45; }
.announce-inner{ padding-block:10px; text-align:center; }
.announce p{ text-wrap:balance; }
.announce .icon{ display:inline-block; width:18px; height:18px; vertical-align:-4px; margin-right:8px; }
.announce strong{ font-weight:700; }
@media (max-width:767px){
  .announce{ font-size:13px; }
  .announce-inner{ padding-block:8px; }
}
@media (max-width:991px){ .announce-lead{ display:none; } }

/* 7b header */
.site-header{ position:sticky; top:0; z-index:60; background:var(--teal); color:var(--white); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.site-header.is-scrolled{ box-shadow:0 1px 0 var(--wline); }
.hdr{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:24px; height:var(--hdr-h); transition:height .3s var(--ease); }
.brand{ justify-self:start; display:inline-flex; align-items:center; justify-content:center; background:var(--white); border-radius:16px; padding:7px 14px; text-decoration:none; }
.brand img{ height:60px; width:auto; transition:height .3s var(--ease); }
.is-scrolled .hdr{ height:80px; }
.is-scrolled .brand img{ height:50px; }
.mainnav{ justify-self:center; }
.pill{ display:flex; align-items:center; gap:2px; padding:6px; border-radius:100px; background:rgba(255,255,255,.66); }
.pill > li{ position:relative; }
.pill > li > a, .pill > li > button{ display:flex; align-items:center; gap:6px; height:42px; padding:0 16px; border:0; border-radius:100px; background:transparent;
  color:var(--teal); font:600 14px/1 var(--body); text-transform:uppercase; letter-spacing:.03em; text-decoration:none; white-space:nowrap;
  transition:background-color .3s var(--ease); }
.pill > li > a:hover, .pill > li > button:hover, .pill > li > button[aria-expanded="true"],
.pill > li[aria-current] > a, .pill > li[aria-current] > button{ background:rgba(255,255,255,.9); }
.pill .chev{ width:12px; height:12px; transition:transform .3s var(--ease); }
.pill button[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.pill :focus-visible{ --focus:var(--teal); outline-offset:1px; border-radius:100px; }
.sub{ position:absolute; top:calc(100% + 14px); left:-6px; min-width:270px; padding:16px 24px; border-radius:var(--r);
  background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px); border:1px solid rgba(255,255,255,.6);
  box-shadow:none; display:none; z-index:5; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .sub{ background:#F4F8F8; border-color:rgba(0,75,90,.14); } }
.sub::before{ content:""; position:absolute; left:0; right:0; top:-16px; height:16px; }
.has-sub.open > .sub{ display:block; }
.no-js .has-sub:hover > .sub, .no-js .has-sub:focus-within > .sub{ display:block; }
.sub a{ display:block; padding:8px 0; color:var(--teal); font:600 14px/1.45 var(--body); text-transform:uppercase; letter-spacing:.03em; text-decoration:none; }
.sub a:hover, .sub a[aria-current]{ text-decoration:underline; text-underline-offset:6px; }
.sub :focus-visible{ --focus:var(--teal); }
.sub-all{ margin-top:8px; padding-top:8px; border-top:1px solid var(--line); }
.sub-all a{ color:var(--turq-ink); }
.hdr-actions{ display:flex; align-items:center; gap:20px; justify-self:end; }
.hdr-phone{ display:inline-flex; align-items:center; gap:8px; color:var(--white); font:700 15px/1 var(--body); letter-spacing:.02em; text-decoration:none; white-space:nowrap; padding:10px 2px; }
.hdr-phone .icon{ width:20px; height:20px; color:var(--turq-light); }
.hdr-phone:hover .hdr-phone-num{ text-decoration:underline; text-underline-offset:5px; }
.burger{ display:none; width:44px; height:44px; border:0; background:none; position:relative; border-radius:10px; color:var(--white); }
.burger span{ position:absolute; left:12px; width:20px; height:2px; background:currentColor; border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.burger span:nth-child(1){ top:14px; } .burger span:nth-child(2){ top:21px; } .burger span:nth-child(3){ top:28px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(0); }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* phone as a 44px icon button below 1440 (number in the accessible name), full number from 1440 */
@media (max-width:1439px){
  .hdr-phone{ width:44px; height:44px; justify-content:center; border:1px solid var(--wline); border-radius:50%; padding:0; }
  .hdr-phone-num{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
}
@media (min-width:1024px) and (max-width:1279px){
  .hdr{ column-gap:14px; }
  .brand img{ height:52px; } .is-scrolled .brand img{ height:46px; }
  .pill > li > a, .pill > li > button{ padding:0 11px; }
  .hdr-actions{ gap:10px; }
  .hdr-cta{ padding-inline:20px; }
}
/* >= 1280: equal side tracks so the pill sits on the page axis (under the centred hero H1), not in the middle track */
@media (min-width:1280px){
  .hdr{ grid-template-columns:1fr auto 1fr; column-gap:16px; }
  .hdr-actions{ gap:10px; }
  .pill > li > a, .pill > li > button{ padding:0 12px; }
  .hdr-cta{ white-space:nowrap; padding-inline:20px; }
}
@media (max-width:1023px){
  .hdr, .is-scrolled .hdr{ height:var(--hdr-h); grid-template-columns:1fr auto; }
  .brand{ padding:5px 10px; border-radius:12px; }
  .brand img, .is-scrolled .brand img{ height:40px; }
  .mainnav{ display:none; }
  .hdr-actions{ gap:10px; }
  .hdr-cta{ min-height:44px; padding:10px 18px; font-size:13px; }
  .burger{ display:block; }
  .no-js .burger{ display:none; }
  .site-header.is-hidden{ transform:translateY(-100%); }
}
/* phones: the bottom action bar carries Call + Request, so the header is logo + burger only */
@media (max-width:767px){ .hdr-cta, .hdr-phone{ display:none; } }

/* 7c mobile menu (dialog; focus trapped, page behind inert; see site.js) */
.mmenu{ position:fixed; z-index:59; left:0; right:0; top:var(--mm-top,64px); bottom:0; background:var(--teal); color:var(--white);
  overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; border-top:1px solid var(--wline);
  transform:translateX(-100%); transition:transform .3s ease; }
.mmenu.open{ transform:none; }
.mmenu-inner{ padding:16px var(--gutter) 0; flex:1; }
.mm-list{ display:grid; }
.mm-list > li{ border-bottom:1px solid rgba(255,255,255,.12); }
.mm-list > li > a, .mm-list summary{ display:flex; justify-content:space-between; align-items:center; min-height:56px; padding:6px 0;
  font:600 17px/1.2 var(--body); text-transform:uppercase; letter-spacing:.03em; color:var(--white); text-decoration:none; cursor:pointer; list-style:none; }
.mm-list summary::-webkit-details-marker{ display:none; }
.pm{ width:18px; height:18px; position:relative; flex:none; }
.pm::before, .pm::after{ content:""; position:absolute; background:currentColor; left:0; right:0; top:8px; height:2px; transition:transform .3s var(--ease); }
.pm::after{ transform:rotate(90deg); }
details[open] > summary .pm::after{ transform:rotate(90deg) scaleX(0); }
.mm-list details ul{ list-style:none; padding:0 0 14px 16px; display:grid; }
.mm-list details ul a{ display:flex; align-items:center; min-height:44px; font:400 17px/1.3 var(--body); color:var(--white); text-decoration:none; }
.mm-list a[aria-current]{ text-decoration:underline; text-underline-offset:6px; }
.mm-meta{ padding:28px 0 24px; font-size:16px; line-height:1.6; }
.mm-meta p{ margin:0 0 10px; }
.mm-meta a{ color:var(--white); }
.mm-label{ font:700 14px/1.4 var(--body); text-transform:uppercase; letter-spacing:.1em; color:var(--blush); }
.mm-today{ color:#D6E3E6; }
.mm-meta .socials{ margin-top:16px; }
.mm-cta{ position:sticky; bottom:0; padding:16px var(--gutter) calc(16px + env(safe-area-inset-bottom)); background:var(--teal); border-top:1px solid rgba(255,255,255,.12); }
@media (min-width:1024px){ .mmenu{ display:none !important; } }

/* 7d mobile action bar (fixed bottom, phones < 768px): Call | Request appointment.
   On pages with a .hero it stays hidden (translated off-screen, html.abar-hidden) until the hero's own CTAs leave
   the viewport, so the first screen never shows the same two actions twice (site.js §3b). */
.actionbar{ display:none; }
@media (max-width:767px){
  .site-footer{ padding-bottom:calc(var(--abar-h) + env(safe-area-inset-bottom)); }
  .actionbar{ position:fixed; z-index:58; left:0; right:0; bottom:0; display:grid; grid-template-columns:1fr 1fr;
    padding-bottom:env(safe-area-inset-bottom); background:var(--teal-900); box-shadow:0 -6px 18px -8px rgba(0,30,36,.45); }
  .actionbar a{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:var(--abar-h); padding:0 10px; color:var(--white); text-decoration:none;
    font:700 13px/1.2 var(--body); text-transform:uppercase; letter-spacing:.03em; text-align:center; }
  .actionbar-call{ background:var(--teal-900); }
  .actionbar-request{ background:var(--coral); }
  .actionbar svg{ width:18px; height:18px; flex:none; color:var(--turq-light); }
  .actionbar a:focus-visible{ outline:3px solid var(--white); outline-offset:-5px; border-radius:8px; }
  .actionbar{ transition:transform .3s var(--ease), visibility 0s linear 0s; }
  .abar-hidden .actionbar{ transform:translateY(100%); visibility:hidden; transition:transform .3s var(--ease), visibility 0s linear .3s; }
  body.menu-open .actionbar{ display:none; }
}
@media (max-width:359px){ .actionbar a{ font-size:12px; letter-spacing:.01em; } .actionbar svg{ display:none; } }

/* socials */
.socials{ display:flex; gap:14px; }
.socials a{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--wline); color:var(--white); transition:background-color .3s var(--ease), color .3s var(--ease); }
.socials a:hover{ background:var(--white); color:var(--teal); }
.socials svg{ width:20px; height:20px; }

/* ---------- 8. HEROES & BREADCRUMBS ---------- */
/* 8a home hero: centred H1 (kicker + title), lead, CTAs, facts line, wide 24px-radius photo (2 crops) */
.hero{ background:var(--teal); color:var(--white); text-align:center; padding:64px 0 80px; }
.hero-h1{ font-size:var(--fs-hero); line-height:1.06; }
.hero-kicker{ display:block; font:700 14px/1.4 var(--body); letter-spacing:.16em; color:var(--blush); margin:0 0 24px; }
.hero-title{ display:block; max-width:14ch; margin-inline:auto; }
.hero .lead{ max-width:790px; margin:24px auto 0; }
.hero .actions{ justify-content:center; margin-top:36px; }
.hero-call{ color:var(--white); }
.hero-facts{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 32px; margin:28px auto 0; font-size:15px; line-height:1.45; color:#E3EDEF; }
.hero-facts li{ display:flex; align-items:center; gap:8px; }
.hero-facts li + li{ padding-left:32px; border-left:1px solid var(--wline); }
.hero-facts .icon{ width:18px; height:18px; color:var(--turq-light); }
.hero-facts a{ color:var(--white); text-underline-offset:4px; }
.hero-facts .chev-r{ display:none; width:16px; height:16px; flex:none; color:var(--turq-light); }
.hero-media{ margin:48px auto 0; max-width:1200px; border-radius:var(--r); overflow:hidden; aspect-ratio:2.15/1; background:var(--teal-900); }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:42% 50%; }
@media (max-width:899px){
  .hero-facts{ flex-direction:column; align-items:center; gap:8px; }
  .hero-facts li + li{ padding-left:0; border-left:0; }
}
@media (max-width:767px){
  .hero{ padding:28px 0 40px; }
  .hero .container{ display:flex; flex-direction:column; }
  .hero-media{ order:4; }
  .hero-facts{ order:5; }
  .hero-kicker{ font-size:12px; letter-spacing:.14em; margin-bottom:14px; }
  .hero .lead{ margin-top:16px; }
  .hero .actions{ margin-top:24px; flex-direction:column; align-items:stretch; gap:12px; }
  .hero .actions .btn{ width:100%; }
  .hero-call{ justify-content:center; min-height:48px; border:1.5px solid rgba(255,255,255,.75); border-radius:var(--pill); text-decoration:none; }
  .hero-facts{ flex-direction:column; align-items:stretch; gap:0; margin-top:16px; border:1px solid var(--wline); border-radius:16px; text-align:left; }
  .hero-facts li{ padding:12px 16px; }
  .hero-facts li + li{ padding-left:16px; border-left:0; border-top:1px solid var(--wline); }
  .hero-facts a{ flex:1; display:flex; justify-content:space-between; align-items:center; gap:8px; text-decoration:none; }
  .hero-hours-more{ display:none; }
  .hero-facts .chev-r{ display:block; }
  .hero-media{ margin-top:24px; aspect-ratio:1/.92; width:100%; }
  .hero-media img{ object-position:50% 50%; }
}

@media (max-width:359px){ .page-hero h1, .hero-h1{ overflow-wrap:anywhere; hyphens:auto; } }

/* 8b inner page hero (teal band). Breadcrumbs from the build sit directly above it on teal. */
.breadcrumbs{ background:var(--teal); color:#D6E3E6; font-size:14px; line-height:1.4; padding-top:40px; text-align:center; }
.breadcrumbs .container{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.breadcrumbs a{ color:#D6E3E6; text-underline-offset:3px; --focus:var(--turq-light); }
.breadcrumbs a:hover{ color:var(--white); }
.breadcrumbs .sep{ opacity:.7; }
.breadcrumbs [aria-current]{ color:var(--white); }
@media (max-width:767px){ .breadcrumbs [aria-current]{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; max-width:100%; } }
.page-hero{ background:var(--teal); color:var(--white); text-align:center; padding:72px 0 80px; }
.breadcrumbs + .page-hero{ padding-top:28px; }
.page-hero .eyebrow{ justify-content:center; }
.page-hero h1{ max-width:1100px; margin-inline:auto; }
.page-hero .lead{ max-width:925px; margin:28px auto 0; }
.page-hero .actions{ justify-content:center; margin-top:36px; }
.page-hero .hero-media{ max-width:1080px; }
.page-hero--plain{ padding-bottom:64px; }
.page-hero--left{ text-align:left; }
.page-hero--left h1, .page-hero--left .lead{ margin-left:0; }
@media (max-width:767px){
  .breadcrumbs{ padding-top:24px; font-size:13px; }
  .breadcrumbs .container{ justify-content:flex-start; }
  .page-hero{ padding:40px 0 44px; text-align:left; }
  .breadcrumbs + .page-hero{ padding-top:16px; }
  .page-hero .eyebrow{ justify-content:flex-start; }
  .page-hero .lead{ margin-top:16px; }
  .page-hero .actions{ justify-content:flex-start; flex-direction:column; align-items:stretch; gap:12px; margin-top:24px; }
  .page-hero .actions .tlink{ justify-content:center; }
  .page-hero .hero-media{ aspect-ratio:4/3; }
}

/* ---------- 9. CONTENT COMPONENTS ---------- */
/* 9a service cards (two-up, image zoom on hover; disabled for reduced motion) */
.card-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.svc-card{ display:flex; flex-direction:column; }
.svc-card-media{ display:block; border-radius:var(--r-sm); overflow:hidden; aspect-ratio:4/3; background:#E9DCCF; }
.svc-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s ease-in-out; }
.svc-card:hover .svc-card-media img{ transform:scale(1.08); }
.svc-card h3{ margin:30px 0 16px; }
.svc-card h3 a{ text-decoration:none; }
.svc-card h3 a:hover{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; }
.svc-card p{ max-width:600px; margin-bottom:24px; }
.svc-card .actions{ margin-top:auto; }
@media (max-width:767px){
  .card-grid{ grid-template-columns:1fr; gap:48px; }
  .svc-card h3{ margin:22px 0 12px; }
  .svc-card .actions{ flex-direction:column; align-items:stretch; gap:8px; }
  .svc-card .actions .tlink{ justify-content:center; }
}

/* 9b circle-icon tiles (top hairline). 4 per row desktop, list rows on phones */
.tiles{ display:grid; grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); gap:32px; }
.card-grid + .tiles{ margin-top:72px; }
.tile{ position:relative; display:flex; flex-direction:column; border-top:1px solid var(--line-strong); padding-top:32px; }
.tile-icon{ width:72px; height:72px; border-radius:50%; background:var(--teal); color:var(--white); --icon-accent:var(--turq); display:grid; place-items:center; margin-bottom:24px; flex:none; }
.tile-icon svg{ width:38px; height:38px; }
.tile h3{ font-size:clamp(1.25rem,1.1rem + .5vw,1.4375rem); line-height:1.25; margin-bottom:12px; }
.tile h3 a{ text-decoration:none; }
.tile h3 a::after{ content:""; position:absolute; inset:0; }
.tile:hover h3 a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.tile p{ font-size:15px; line-height:1.55; margin-bottom:18px; }
.tile .tlink{ margin-top:auto; align-self:flex-start; }
.tile-new{ display:inline-block; margin-left:6px; padding:2px 8px; border-radius:var(--pill); background:var(--white); color:var(--teal); font:700 11px/1.5 var(--body); letter-spacing:.08em; vertical-align:3px; }
.on-teal .tile{ border-top-color:var(--wline); }
.on-teal .tile-icon{ background:var(--white); color:var(--teal); }
@media (max-width:1199px){ .tiles{ --cols:2; gap:40px 32px; } }
@media (max-width:767px){
  .tiles{ grid-template-columns:1fr; gap:0; }
  .card-grid + .tiles{ margin-top:48px; }
  .tile{ display:grid; grid-template-columns:56px 1fr; column-gap:18px; padding:22px 0; }
  .tile:last-child{ border-bottom:1px solid var(--line-strong); }
  .tile-icon{ width:56px; height:56px; grid-row:1 / span 3; margin:0; }
  .tile-icon svg{ width:28px; height:28px; }
  .tile p{ margin-bottom:6px; }
}

/* 9c feature columns with top rules (Georgetown lens page). .features--3 for three. */
.features{ display:grid; grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); gap:32px; }
.features--3{ --cols:3; } .features--2{ --cols:2; }
.feature{ border-top:1px solid var(--line-strong); padding-top:36px; }
.feature-icon{ width:36px; height:36px; color:var(--teal); --icon-accent:var(--turq); margin-bottom:22px; }
.feature-title{ font:700 17px/1.4 var(--body); text-transform:none; margin-bottom:10px; }
.feature-meta{ display:block; font-weight:500; color:var(--grey); font-size:15px; }
.feature p{ font-size:15.5px; line-height:1.6; margin:0; }
.feature .tag{ margin-top:14px; justify-self:start; }   /* phones: .feature is a grid; keep the tag a small pill */
.on-teal .feature{ border-top-color:var(--wline); } .on-teal .feature-icon{ color:var(--white); }
@media (max-width:1199px){ .features{ --cols:2; } .features--3{ --cols:3; } }

@media (max-width:767px){
  .features{ --cols:1; gap:0; }
  .feature{ display:grid; grid-template-columns:44px 1fr; column-gap:14px; padding:22px 0; }
  .feature-icon{ width:30px; height:30px; margin:0; grid-row:1 / span 3; }
}

/* 9d numbered list (01 02 03) with hairlines; .numlist--cols lays it out as columns */
.numlist > li{ display:grid; grid-template-columns:56px 1fr; padding:28px 0; border-top:1px solid var(--line); }
.numlist > li:last-child{ border-bottom:1px solid var(--line); }
.numlist .num{ color:var(--teal); }
.numlist .h4{ margin-bottom:8px; }
.numlist p{ margin:0; }
.numlist--cols{ display:grid; grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); gap:0 40px; }
.numlist--cols > li{ grid-template-columns:1fr; align-content:start; border-bottom:0 !important; border-top:1px solid var(--line-strong); padding:28px 0 0; }
.numlist--cols .num{ margin-bottom:14px; display:block; }
.numlist--4{ --cols:4; }
@media (max-width:1199px){ .numlist--4{ --cols:2; } }
@media (max-width:991px){ .numlist--cols{ --cols:1; } .numlist--cols > li{ grid-template-columns:48px 1fr; padding:24px 0; } .numlist--cols > li:last-child{ border-bottom:1px solid var(--line) !important; } .numlist--cols .num{ margin:0; } }
@media (max-width:767px){ .numlist > li{ grid-template-columns:44px 1fr; padding:22px 0; } }

/* 9e numbered rows (age groups, steps): label + meta on the left, text on the right */
.rows > li{ display:grid; grid-template-columns:72px minmax(0,1fr) minmax(0,1.6fr); gap:12px 32px; padding:32px 0; border-top:1px solid var(--line-strong); align-items:start; }
.rows > li:last-child{ border-bottom:1px solid var(--line-strong); }
.rows .num{ font:700 21px/1.3 var(--body); font-variant-numeric:tabular-nums; padding-top:2px; }
.rows-title{ font-family:var(--display); font-size:24px; line-height:1.2; text-transform:uppercase; }
.rows-meta{ display:block; margin-top:8px; font:700 13px/1.4 var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--grey); }
.rows p{ margin:0; font-size:17px; line-height:1.6; }
@media (max-width:767px){ .rows > li{ grid-template-columns:44px 1fr; padding:24px 0; } .rows > li > :last-child{ grid-column:2; } .rows-title{ font-size:21px; } }

/* 9f checklist */
.checklist{ display:grid; grid-template-columns:repeat(var(--cols,2),minmax(0,1fr)); column-gap:40px; }
.checklist li{ display:grid; grid-template-columns:28px 1fr; align-items:start; padding:14px 0; border-top:1px solid var(--line-strong); font-size:17px; line-height:1.45; }
.checklist li.wide{ grid-column:1 / -1; }
.checklist .icon{ width:20px; height:20px; margin-top:2px; color:var(--turq-ink); }
.checklist--1{ --cols:1; }
@media (max-width:767px){ .checklist{ --cols:1; } }

/* 9g split: text + rounded image. .split--reverse puts the image first */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px 80px; align-items:center; }
.split--wide-text{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
.split--reverse > .split-media{ order:-1; }
.split--top{ align-items:start; }
.split-media{ border-radius:var(--r); overflow:hidden; aspect-ratio:var(--ar,4/3); background:#EEF1F1; }
.split-media img{ width:100%; height:100%; object-fit:cover; }
.split-text h2{ margin-bottom:28px; }
.split--eyewear{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:stretch; }
.split--eyewear .split-media{ aspect-ratio:auto; min-height:100%; }
@media (min-width:992px){ .split--eyewear .split-media{ position:relative; min-height:420px; } .split--eyewear .split-media img{ position:absolute; inset:0; } }
@media (max-width:991px){ .split--eyewear{ grid-template-columns:1fr; } .split--eyewear .split-media{ aspect-ratio:4/3; min-height:0; order:-1; } }
.split-text > .tlink, .split-text > .actions{ margin-top:28px; }
@media (max-width:991px){ .split, .split--wide-text{ grid-template-columns:1fr; gap:32px; } .split-media{ aspect-ratio:3/2; } .split--reverse > .split-media, .split-media--first{ order:-1; } }

/* wide rounded media block, figure + caption */
.wide-media{ border-radius:var(--r); overflow:hidden; aspect-ratio:var(--ar,2.4/1); background:#EEF1F1; }
.wide-media img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:767px){ .wide-media{ aspect-ratio:4/3; } }
.figure{ margin:0; }
.figure img{ border-radius:var(--r); width:100%; }
.figure figcaption{ margin-top:12px; font-size:14px; line-height:1.5; color:var(--grey); }
.photo-placeholder{ display:grid; place-items:center; aspect-ratio:var(--ar,4/3); border-radius:var(--r); background:var(--mist); border:2px dashed var(--turq-ink); color:var(--turq-ink);
  font:700 14px/1.4 var(--body); text-transform:uppercase; letter-spacing:.08em; text-align:center; padding:24px; }

/* 9h long-text / prose (pages and blog). ~70ch measure */
.prose{ font-size:var(--fs-prose); line-height:1.65; max-width:70ch; overflow-wrap:break-word; }   /* long source URLs wrap */
.prose > * + *{ margin-top:1.1em; }
.prose > :first-child{ margin-top:0; }
.prose p{ margin-bottom:0; }   /* margin-bottom only: "margin:0" (0,1,1) beat ".prose > * + *" and removed all paragraph spacing */
.prose h2{ font-size:clamp(1.625rem,1.2rem + 1.4vw,2.25rem); line-height:1.2; margin-top:1.9em; }
.prose h3{ font-size:clamp(1.375rem,1.15rem + .7vw,1.6875rem); line-height:1.25; margin-top:1.7em; }
.prose h4{ font-size:19px; margin-top:1.5em; }
.prose h2 + *, .prose h3 + *, .prose h4 + *{ margin-top:.7em; }
.prose a{ color:var(--teal); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.prose a:hover{ color:var(--turq-ink); text-decoration-thickness:2px; }
.prose ul, .prose ol{ padding-left:1.4em; }
.prose li + li{ margin-top:.45em; }
.prose li::marker{ color:var(--turq-ink); }
.prose strong{ font-weight:700; }
.prose blockquote{ margin:1.6em 0; padding:4px 0 4px 24px; border-left:3px solid var(--turq); font-size:1.08em; }
.prose img{ border-radius:var(--r); margin-block:1.6em; }
.prose figure{ margin:1.6em 0; }
.prose figcaption{ font-size:14px; color:var(--grey); margin-top:10px; }
.prose hr{ margin:2.2em 0; }
.prose table{ font-size:16px; }

/* 9i numbered FAQ accordion (details/summary; the build's 'faq' schema reads these) */
.acc{ border-bottom:1px solid var(--line); counter-reset:acc; }
.acc details{ border-top:1px solid var(--line); counter-increment:acc; }
.acc summary{ display:grid; grid-template-columns:56px 1fr 24px; align-items:start; padding:24px 0; cursor:pointer; list-style:none; font:700 19px/1.4 var(--body); }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::before{ content:counter(acc, decimal-leading-zero); font:700 19px/1.4 var(--body); font-variant-numeric:tabular-nums; }
.acc summary:hover .q{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.acc summary .chev{ width:22px; height:22px; margin-top:2px; transition:transform .3s var(--ease); }
.acc details[open] summary .chev{ transform:rotate(180deg); }
.acc .a{ padding:0 40px 28px 56px; font-size:17px; line-height:1.65; }
.acc .a > * + *{ margin-top:.9em; }
.acc .a a{ text-decoration:underline; text-underline-offset:4px; }
.acc details[open] .a{ animation:accIn .3s ease-in-out; }
@keyframes accIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.acc--plain summary{ grid-template-columns:1fr 24px; } .acc--plain summary::before{ display:none; } .acc--plain .a{ padding-left:0; }
.on-teal .acc, .on-teal .acc details{ border-color:var(--wline); }
@media (max-width:767px){
  .acc summary{ grid-template-columns:44px 1fr 22px; font-size:17px; padding:20px 0; }
  .acc summary::before{ font-size:17px; }
  .acc .a{ padding:0 0 24px 44px; font-size:16px; }
}
/* side column next to an accordion (sticky on desktop) */
.faq-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:40px 80px; align-items:start; }
.faq-side{ position:sticky; top:calc(var(--hdr-h) + 32px); }
.faq-side h2{ margin-bottom:24px; }
.faq-side p{ max-width:420px; }
@media (max-width:991px){ .faq-layout{ grid-template-columns:1fr; } .faq-side{ position:static; } }

/* 9i-b "On this page" jump nav: link chips under a label; one sideways-scrolling row on phones */
.jump-nav{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:56px; }
.jump-nav-label{ font:700 13px/1.4 var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--grey); margin-right:6px; }
@media (max-width:767px){
  .jump-nav{ flex-wrap:nowrap; overflow-x:auto; margin-inline:calc(var(--gutter) * -1); padding:4px var(--gutter); margin-bottom:40px; scrollbar-width:none; }
  .jump-nav::-webkit-scrollbar{ display:none; }
  .jump-nav .chip, .jump-nav-label{ flex:none; }
}

/* 9j notes / callouts. .note--draft is shown on staging only (body.env-production hides it) */
.note{ display:grid; grid-template-columns:24px 1fr; gap:14px; padding:20px 24px; border-radius:16px; background:var(--mist); color:var(--teal); font-size:16px; line-height:1.55; }
.note .icon{ width:22px; height:22px; margin-top:1px; color:var(--turq-ink); }
.note p{ margin:0; } .note p + p{ margin-top:8px; }
.note-title{ font-weight:700; }
.note--blush{ background:var(--blush); }
.note--warning{ background:#FBE9E5; } .note--warning .icon{ color:var(--error); }
.note--line{ background:none; border-radius:0; padding:20px 0; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); }
.note--draft{ background:var(--draft-bg); color:var(--draft-ink); border:1px dashed var(--draft-line); }
.note--draft .icon{ color:var(--draft-ink); }
.note--draft .note-title::before{ content:"Draft \2014  pending doctor review. "; }
.env-production .note--draft, .env-production .draft-only{ display:none !important; }
.tag{ display:inline-block; padding:4px 10px; border-radius:var(--pill); background:var(--blush); color:var(--teal); font:700 12px/1.4 var(--body); text-transform:uppercase; letter-spacing:.06em; }
.bg-blush .tag{ background:var(--white); }
.bg-blush .panel .tag, .bg-blush .post-card .tag{ background:var(--blush); }
.on-teal .tag{ background:var(--blush); color:var(--teal); }

/* white panel on blush / teal panel */
.panel{ background:var(--white); color:var(--teal); border-radius:var(--r); padding:48px; }
.panel h3{ margin-bottom:20px; }
.panel--teal{ background:var(--teal); color:var(--white); }
@media (max-width:575px){ .panel{ padding:32px 20px; } .panel .btn{ width:100%; } }

/* ---------- 10. PEOPLE & REVIEWS ---------- */
/* ring portrait: ring is CSS, never baked into the photo */
.ring{ display:block; flex:none; width:var(--ring,192px); height:var(--ring,192px); aspect-ratio:1; border-radius:50%; padding:calc(var(--ring,192px) * .036); background:var(--turq); }
.ring img{ width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 28%; border:calc(var(--ring,192px) * .022) solid var(--teal); }
.bg-white .ring img, .bg-blush .ring img, .ring--light img{ border-color:var(--white); }
.ring--sm{ --ring:72px; } .ring--md{ --ring:120px; }

.doctors{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; }
.doctor{ display:flex; flex-direction:column; }
.doctor-head{ display:flex; align-items:center; gap:28px; padding-bottom:32px; border-bottom:1px solid var(--wline); }
.doctor-name .cred, .cred{ display:block; margin-top:10px; font:700 14px/1.4 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--blush); }
.bg-white .cred, .bg-blush .cred{ color:var(--turq-ink); }
.doctor-body{ padding-top:32px; flex:1; }
.doctor .tlink{ margin-top:20px; align-self:flex-start; }
.doctors-foot{ margin-top:56px; padding-top:32px; border-top:1px solid var(--wline); display:flex; justify-content:space-between; align-items:center; gap:20px 40px; flex-wrap:wrap; }
.doctors-foot p{ margin:0; }
.bg-blush .doctor-head, .bg-white .doctor-head, .bg-blush .doctors-foot, .bg-white .doctors-foot{ border-color:var(--line-strong); }
@media (min-width:992px) and (max-width:1199px){ .doctor{ --ring:150px; } .doctor-head{ gap:22px; } .doctor-name{ font-size:clamp(1.375rem,1rem + .8vw,1.75rem); } }
@media (min-width:576px) and (max-width:991px){
  .doctors{ gap:32px; }
  .doctor{ --ring:120px; }
  .doctor-head{ flex-direction:column; text-align:center; gap:18px; padding-bottom:24px; }
  .doctor-name{ font-size:clamp(1.375rem,1rem + 1vw,1.75rem); }
  .doctor-body{ padding-top:24px; }
}
@media (max-width:575px){
  .doctors{ grid-template-columns:1fr; gap:56px; }
  .doctor-head{ flex-direction:column; text-align:center; gap:18px; padding-bottom:24px; }
  .doctor{ --ring:140px; }
  .doctor-body{ padding-top:24px; }
  .doctors-foot{ flex-direction:column; align-items:stretch; text-align:center; }
  .doctors-foot .actions{ flex-direction:column; align-items:stretch; gap:8px; }
  .doctors-foot .tlink{ justify-content:center; }
}

/* doctor mini rows (inside CTA band, FAQ side column, post 'Reviewed by') */
.doc-mini{ display:grid; border-top:1px solid var(--line); }
.doc-mini li{ border-bottom:1px solid var(--line); }
.doc-mini a{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:16px 4px; text-decoration:none; }
.doc-mini .ring{ --ring:64px; }
.doc-mini li:has(> a[aria-current="page"]){ display:none; }
.doc-mini .name{ display:block; font:700 17px/1.35 var(--body); }
.doc-mini .role{ display:block; font:700 12px/1.4 var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--turq-ink); margin-top:2px; white-space:nowrap; }
@media (max-width:575px){ .doc-mini .role-more{ display:none; } }
.doc-mini .icon{ width:20px; height:20px; transition:transform .3s var(--ease); }
.doc-mini a:hover .name{ text-decoration:underline; text-underline-offset:4px; }
.doc-mini a:hover .icon{ transform:translateX(4px); }
.on-teal .doc-mini, .on-teal .doc-mini li{ border-color:var(--wline); }
.on-teal .doc-mini .role{ color:var(--blush); }

/* provider page profile header (blush block under the teal page hero) */
.profile{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:24px 48px; align-items:center; padding-bottom:40px; border-bottom:1px solid var(--line-strong); }
.profile .ring{ --ring:200px; }
.profile-name{ font-size:var(--fs-h2); line-height:1.15; }
.profile .cred{ margin-top:12px; }
.profile-facts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.profile-body{ columns:2; column-gap:64px; margin-top:40px; }
.profile-body p{ break-inside:avoid; }
@media (max-width:991px){ .profile{ grid-template-columns:auto 1fr; } .profile > .actions{ grid-column:1 / -1; } .profile-body{ columns:1; } }
@media (max-width:575px){ .profile{ grid-template-columns:1fr; justify-items:center; text-align:center; } .profile .ring{ --ring:150px; } .profile-facts{ justify-content:center; } .profile > .actions{ justify-content:center; } }

/* reviews / generic slider: scroll-snap track + arrows + 1px progress bar. No autoplay. */
.slider-track{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 48px) / 3); gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; overscroll-behavior-x:contain; }
.slider-track:focus-visible{ outline-offset:6px; }
.slider-track::-webkit-scrollbar{ display:none; }
.slider-track > li{ scroll-snap-align:start; display:flex; }
.slider-ui{ display:flex; justify-content:flex-end; gap:8px; margin-top:24px; }
.no-js .slider-ui, .no-js .slider-progress{ display:none; }
.slider-ui button{ width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--line-strong); background:none; border-radius:50%; color:var(--teal); transition:background-color .3s var(--ease); }
.slider-ui button:hover{ background:var(--blush); }
.slider-ui button:disabled, .slider-ui button[aria-disabled="true"]{ opacity:.35; cursor:default; background:none; }
.slider-ui svg{ width:22px; height:22px; }
.slider-progress{ position:relative; height:1px; background:var(--line); margin-top:16px; overflow:hidden; }
.slider-progress span{ position:absolute; left:0; top:0; height:1px; background:var(--teal); width:33%; transition:transform .3s var(--ease); }
.slider-ui.is-static, .slider-progress.is-static{ display:none; }
@media (max-width:1023px){ .slider-track{ grid-auto-columns:calc((100% - 24px) / 2); } }
@media (max-width:767px){ .slider-track{ grid-auto-columns:88%; gap:14px; } .slider-ui{ justify-content:flex-start; } }

.quote{ display:flex; flex-direction:column; width:100%; background:var(--blush); border-radius:var(--r); padding:36px 36px 28px; margin:0; }
.bg-blush .quote{ background:var(--white); }
.quote::before{ content:"\201C"; display:block; height:44px; margin:-6px 0 14px -2px; font:400 96px/1 var(--display); color:var(--turq); }
.quote blockquote{ margin:0 0 28px; font-size:17px; line-height:1.65; }
.quote blockquote p + p{ margin-top:.7em; }
.quote figcaption{ margin-top:auto; padding-top:20px; border-top:1px solid var(--line-strong); display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:14px; font-size:14px; }
.avatar{ grid-row:span 2; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--teal); color:var(--white); font:700 15px/1 var(--body); letter-spacing:.04em; }
.quote .who{ font:700 16px/1.35 var(--body); }
.quote .src{ color:var(--grey); }
@media (max-width:767px){ .quote{ padding:28px 22px 22px; } .quote blockquote{ font-size:16px; } }

/* ---------- 11. EYEWEAR & INSURANCE ---------- */
/* typographic brand wall (no logos until the clinic supplies them with permission) */
.brandwall{ display:grid; grid-template-columns:repeat(var(--cols,6),minmax(0,1fr)); gap:4px 24px; padding-block:24px; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); }
.brandwall li{ display:flex; align-items:center; justify-content:center; text-align:center; min-height:56px; white-space:nowrap;
  font:400 clamp(1.0625rem,.7rem + .6vw,1.375rem)/1.25 var(--display); text-transform:uppercase; letter-spacing:.04em; }
.brandwall--3{ --cols:3; }
.brandwall--3 li{ justify-content:flex-start; text-align:left; font-size:clamp(1rem,.8rem + .45vw,1.25rem); min-height:48px; }
@media (max-width:1199px){ .brandwall{ --cols:4; } .brandwall--3{ --cols:3; } }
@media (max-width:767px){ .brandwall, .brandwall--3{ --cols:2; gap:0 16px; padding-block:12px; } .brandwall li{ justify-content:flex-start; text-align:left; min-height:40px; font-size:16px; } }
@media (min-width:992px) and (max-width:1149px){ .brandwall--3 li{ font-size:15px; letter-spacing:.02em; } }
@media (max-width:399px){ .brandwall li{ white-space:normal; } }
/* chips (insurer names, filters) */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chips li, .chip{ display:inline-flex; align-items:center; padding:8px 16px; border:1px solid var(--line-strong); border-radius:var(--pill); font:500 14px/1.3 var(--body); background:rgba(255,255,255,.55); color:var(--teal); text-decoration:none; }
a.chip:hover{ background:var(--white); border-color:var(--teal); }
.chip[aria-current], .chip.is-active{ background:var(--teal); color:var(--white); border-color:var(--teal); }
.ins{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:48px 80px; align-items:start; }
.ins h2{ margin-bottom:28px; }
.ins .chips{ margin-bottom:28px; }
@media (max-width:991px){ .ins{ grid-template-columns:1fr; } }

/* ---------- 12. VISIT US: contact links, hours card, map facade ---------- */
.contact-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 32px; margin:0 0 20px; }
.contact-links a{ display:inline-flex; align-items:center; gap:8px; padding-block:6px; font:500 17px/1.4 var(--body); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.contact-links .icon{ width:18px; height:18px; color:var(--turq-ink); }
.contact-links a:hover{ color:var(--turq-ink); }
.visit-head{ max-width:980px; margin:0 auto 48px; text-align:center; }
.visit-head h2{ margin-bottom:24px; }
.visit-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
@media (max-width:991px){ .visit-grid{ grid-template-columns:1fr; } }
@media (max-width:767px){ .contact-links{ flex-direction:column; align-items:flex-start; gap:4px; } .visit-head{ text-align:left; margin-bottom:32px; } .visit-head .eyebrow{ justify-content:flex-start; } }

.hours-card{ background:var(--teal); color:var(--white); border-radius:var(--r); padding:64px 80px; }
.hours-card .hours-title{ text-align:center; margin-bottom:40px; font-size:var(--fs-h2); line-height:1.2; }
.hours-list{ margin:0; }
.hours-list > div{ display:grid; grid-template-columns:1fr 1px 1fr; align-items:center; gap:24px; padding:14px 0; border-bottom:1px solid var(--wline);
  font:400 17px/1.35 var(--body); text-transform:uppercase; letter-spacing:.03em; }
.hours-list > div::before{ content:""; grid-column:2; grid-row:1; width:1px; height:20px; background:var(--wline); }
.hours-list dt{ grid-column:1; grid-row:1; }
.hours-list dd{ grid-column:3; grid-row:1; margin:0; text-align:right; }
.hours-list .is-today{ font-weight:700; }
.today-tag{ display:inline-block; margin-left:10px; padding:2px 8px; border-radius:var(--pill); background:var(--blush); color:var(--teal); font:700 11px/1.5 var(--body); letter-spacing:.08em; vertical-align:2px; }
.hours-note{ margin-top:28px; font-size:15px; line-height:1.55; color:#E3EDEF; }
@media (max-width:991px){ .hours-card{ padding:48px 40px; } }
@media (max-width:575px){ .hours-card{ padding:36px 20px; } .hours-card .hours-title{ margin-bottom:24px; } .hours-list > div{ font-size:15px; gap:12px; } }
@media (max-width:399px){ .hours-list > div{ grid-template-columns:auto 1px 1fr; gap:10px; font-size:14px; letter-spacing:0; } .hours-list dd{ white-space:nowrap; } }

/* map facade: the clinic's wallpaper + address card. Google's iframe loads only on click (privacy + speed). */
.map-facade{ position:relative; border-radius:var(--r); overflow:hidden; min-height:440px; background:#E3B567 var(--wallpaper) 0 0/84px 52.8px; display:grid; place-items:center; padding:32px; }
.map-card{ position:relative; z-index:1; width:min(100%,440px); background:var(--white); color:var(--teal); border:1px solid rgba(0,75,90,.14); border-radius:20px; padding:36px 36px 28px; }
.map-card .glyph{ width:56px; height:22px; color:var(--turq); margin-bottom:18px; }
.map-name{ font:400 26px/1.2 var(--display); text-transform:uppercase; margin:0 0 12px; }
.map-card address{ font-size:16px; line-height:1.55; margin-bottom:22px; }
.map-card .actions{ gap:10px 20px; }
.map-card .fineprint{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.map-label{ position:absolute; left:16px; top:16px; padding:6px 12px; border-radius:var(--pill); background:rgba(255,255,255,.92); font:700 12px/1.4 var(--body); letter-spacing:.08em; text-transform:uppercase; }
.map-facade.is-loaded{ background:#E7ECED; place-items:end start; padding:16px; }
.map-facade iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* once the map is loaded the card docks bottom-left as a compact overlay: address + Get directions stay available */
.map-facade.is-loaded .map-card{ width:auto; max-width:min(100%,340px); padding:16px 18px; box-shadow:0 2px 0 rgba(0,40,48,.08); }
.map-facade.is-loaded .map-card .glyph, .map-facade.is-loaded .map-card .fineprint, .map-facade.is-loaded [data-map-load]{ display:none; }
.map-facade.is-loaded .map-name{ font-size:18px; margin-bottom:4px; }
.map-facade.is-loaded .map-card address{ font-size:14px; margin-bottom:10px; }
.map-facade.is-loaded .map-card .btn{ min-height:40px; padding:9px 16px; font-size:13px; }
.no-js [data-map-load]{ display:none; }
@media (max-width:991px){ .map-facade{ min-height:360px; } }
@media (max-width:575px){ .map-facade{ padding:104px 16px 16px; min-height:0; } .map-card{ padding:28px 22px 22px; } .map-card .actions{ flex-direction:column; align-items:stretch; } .map-card .tlink{ justify-content:center; }
  .map-facade.is-loaded{ min-height:440px; padding:12px; } .map-facade.is-loaded .map-card .actions{ flex-direction:row; } }

/* social block (Georgetown's follow band): white handle card + 4 square clinic photos. Static: no feed, no embeds. */
.social{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.4fr); gap:24px; align-items:stretch; }
.social-card{ background:var(--white); border-radius:var(--r); padding:40px; display:flex; flex-direction:column; justify-content:center; }
.social-card h2{ margin-bottom:16px; text-transform:none; overflow-wrap:anywhere; }
.social-links{ display:flex; flex-wrap:wrap; gap:4px 24px; }
.social-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.social-tiles li{ aspect-ratio:1; border-radius:var(--r); overflow:hidden; background:#E9DCCF; }
.social-tiles img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:991px){ .social{ grid-template-columns:1fr; } .social-card{ padding:32px; } }
@media (max-width:575px){ .social-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } .social-card{ padding:28px 22px; } }

/* ---------- 13. FORMS ----------
   Labels are always visible (never placeholder-only). Inputs 46px+, 5px radius. Errors: text + icon + border,
   linked with aria-describedby. Honeypot .hp is off-screen. The appointment form's submit keeps the exact
   classes 'wpforms-submit appointment_form_submit' (GTM triggers) and the contact form 'wpforms-submit'. */
.form{ display:grid; gap:22px; max-width:760px; }
.form-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
@media (max-width:767px){ .form-row{ grid-template-columns:1fr; } }
.field{ display:grid; gap:8px; align-content:start; }   /* start: a field without an error message must not stretch */
.field label, .field legend, .label{ font:600 15px/1.4 var(--body); color:var(--teal); padding:0; }
.req{ color:var(--error); margin-left:2px; }
.optional{ font-weight:400; color:var(--grey); margin-left:6px; font-size:14px; }
.hint{ font-size:14px; line-height:1.5; color:var(--grey); margin:0; }
.input, .field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea{
  width:100%; min-height:48px; padding:12px 14px; border:1px solid var(--input-line); border-radius:var(--r-input); background:var(--white);
  color:var(--teal); font:400 16px/1.4 var(--body); transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.field textarea{ min-height:132px; resize:vertical; }
.field select{ appearance:none; -webkit-appearance:none; padding-right:44px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004B5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; }
.field ::placeholder{ color:#5F7479; opacity:1; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--teal); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:3px solid var(--teal); outline-offset:1px; border-color:var(--teal); border-radius:var(--r-input); }
.field--error input, .field--error select, .field--error textarea, [aria-invalid="true"]{ border-color:var(--error) !important; border-width:2px; }
.field-error{ display:flex; gap:8px; align-items:flex-start; color:var(--error); font:600 14px/1.45 var(--body); margin:0; }
.field-error .icon{ width:18px; height:18px; margin-top:1px; }
fieldset.field{ border:0; margin:0; padding:0; }
/* a heading inside a legend: WebKit drops the h3's bottom margin there, so the gap lives on the legend */
.field legend > h3{ margin-bottom:0; }
.field legend:has(> h3){ padding-bottom:20px; }
.choices{ display:flex; flex-wrap:wrap; gap:10px 24px; }
.choice{ display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:16px; cursor:pointer; }
.choice input{ width:20px; height:20px; margin:0; accent-color:var(--teal); flex:none; }
@media (max-width:575px){ .choices{ column-gap:12px; } .choice{ gap:8px; } }
/* question option rows (the coverage checker): the whole row is the label; native radio/checkbox inside */
.options{ display:grid; gap:10px; }
.option, .field .option{ display:grid; grid-template-columns:20px 1fr; gap:12px; align-items:start; padding:14px 16px; border:1.5px solid var(--line-strong);
  border-radius:12px; background:var(--white); color:var(--teal); font:500 16px/1.4 var(--body); cursor:pointer;
  transition:border-color .2s var(--ease), background-color .2s var(--ease); }
.option input{ width:20px; height:20px; margin:1px 0 0; accent-color:var(--teal); }
.option:hover{ border-color:var(--teal); }
.option:has(input:checked){ border-color:var(--teal); background:var(--mist); }
.option:has(input:focus-visible){ outline:3px solid var(--teal); outline-offset:2px; }
.option input:focus-visible{ outline:none; }
.option:has([aria-invalid="true"]){ border-color:var(--error); }
.option [aria-invalid="true"]{ border-width:0; }
.option .muted{ display:block; font-weight:400; }
.option--none{ border-style:dashed; }
.hp{ position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-privacy{ font-size:14px; line-height:1.55; color:var(--grey); margin:0; }
.form-privacy a{ color:var(--teal); text-decoration:underline; }
.form-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; }
.form .cf-turnstile{ min-height:65px; }
.form-status{ border-radius:16px; padding:20px 24px; font-size:16px; line-height:1.55; display:grid; grid-template-columns:24px 1fr; gap:14px; }
.form-status .icon{ width:22px; height:22px; margin-top:1px; }
.form-status--success{ background:var(--success-bg); color:var(--success); }
.form-status--error{ background:var(--error-bg); color:var(--error); }
.form-status strong{ display:block; margin-bottom:4px; }
.form-errors{ display:grid; gap:2px; margin-top:6px; }
.form-errors a{ color:inherit; text-underline-offset:3px; }
.form-card{ background:var(--blush-200); border-radius:var(--r); padding:48px; }
.bg-blush .form-card{ background:var(--white); }
@media (max-width:575px){ .form-card{ padding:28px 18px; } .form-actions .btn, .form-actions .wpforms-submit{ width:100%; } }
.wpforms-submit{ cursor:pointer; }

/* ---------- 14. BLOG ---------- */
.post-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.post-card{ position:relative; display:flex; flex-direction:column; background:var(--blush-200); border-radius:var(--r); padding:32px 32px 28px; transition:background-color .3s var(--ease); }
.bg-blush .post-card{ background:var(--white); }
.post-card-media{ margin:-32px -32px 24px; border-radius:var(--r) var(--r) 0 0; overflow:hidden; aspect-ratio:3/2; }
.post-card-media img{ width:100%; height:100%; object-fit:cover; }
.post-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0 0 16px; font:700 13px/1.4 var(--body); text-transform:uppercase; letter-spacing:.08em; }
.post-meta time, .post-meta .read{ color:var(--grey); font-weight:500; }
.post-cat{ position:relative; z-index:1; color:var(--turq-ink); text-decoration:none; }
a.post-cat:hover{ text-decoration:underline; text-underline-offset:4px; }
.post-card-title{ font-size:clamp(1.3125rem,1.15rem + .55vw,1.625rem); line-height:1.25; margin-bottom:14px; overflow-wrap:anywhere; hyphens:auto; }
.post-card-title a{ text-decoration:none; }
.post-card-title a::after{ content:""; position:absolute; inset:0; border-radius:var(--r); }
.post-card:hover .post-card-title a{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.post-card-excerpt{ font-size:15.5px; line-height:1.6; margin-bottom:20px; }  /* whole sentences from the build (<= 200 chars): never clamped mid-sentence */
.post-card .tlink{ margin-top:auto; align-self:flex-start; }
/* the title link is stretched over the card: draw its focus ring on the card. Only that link is focusable on cards
   (the category is plain text), so there is one tab stop per card and no ring on mouse click. */
.post-card:has(.post-card-title a:focus-visible){ outline:3px solid var(--teal); outline-offset:3px; }
.post-card-title a:focus-visible{ outline:none; }
a.post-cat{ display:inline-block; min-height:24px; padding-block:3px; }
@media (max-width:991px){ .post-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .post-grid--home > :nth-child(3){ display:none; } }
@media (max-width:575px){ .post-grid{ grid-template-columns:1fr; gap:16px; } .post-card{ padding:26px 22px 22px; } .post-card-media{ margin:-26px -22px 20px; }
  .post-card .post-meta{ flex-direction:column; align-items:flex-start; gap:2px; } }

/* category filter row + pagination */
.cat-filter{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.pagination{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin-top:56px; }
.pagination a, .pagination span{ display:grid; place-items:center; min-width:48px; height:48px; padding:0 14px; border-radius:var(--pill); border:1px solid var(--line-strong); text-decoration:none; font:700 15px/1 var(--body); }
.pagination a:hover{ background:var(--blush); }
.pagination [aria-current]{ background:var(--teal); color:var(--white); border-color:var(--teal); }
.pagination .gap{ border:0; min-width:24px; }

/* post header (inside .page-hero) + byline + reviewed-by slot */
.post-hero .post-meta{ justify-content:center; color:#D6E3E6; margin-bottom:24px; }
.post-hero .post-meta time, .post-hero .post-meta .read{ color:#D6E3E6; }
.post-hero .post-cat{ color:var(--blush); }
.post-hero h1{ font-size:clamp(2.125rem,1.45rem + 2.3vw,3.5rem); line-height:1.12; max-width:1000px; }
.byline{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin-top:24px; font-size:15px; color:#E3EDEF; }
.reviewed-by{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--pill); background:rgba(255,255,255,.1); }
.reviewed-by .icon{ width:18px; height:18px; color:var(--turq-light); }
@media (max-width:767px){ .post-hero .post-meta, .byline{ justify-content:flex-start; } }
.post-body{ padding-block:var(--pad); }
.post-body .prose{ margin-inline:auto; }
.post-foot{ max-width:70ch; margin:56px auto 0; padding-top:28px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 32px; align-items:center; }

/* ---------- 15. TABLES ---------- */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:16px; border:1px solid var(--line); }
.table{ width:100%; border-collapse:collapse; font-size:16px; line-height:1.5; }
.table caption{ text-align:left; font-weight:700; padding:0 0 12px; }
.table th, .table td{ padding:14px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.table thead th{ background:var(--blush); font:700 14px/1.4 var(--body); text-transform:uppercase; letter-spacing:.06em; }
.table tbody tr:last-child > *{ border-bottom:0; }
.table tbody th{ font-weight:700; }

/* ---------- 16. CTA BAND (rounded teal panel; sits in a white or blush section, never touching the footer) ---------- */
.cta-band{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:40px 72px; align-items:center; padding:72px 80px; border-radius:var(--r); background:var(--teal); color:var(--white); }
.cta-band h2{ margin-bottom:20px; }
.cta-band .actions{ margin-top:32px; }
.cta-band p a{ color:var(--white); text-decoration:underline; text-underline-offset:4px; }
@media (max-width:991px){ .cta-band{ grid-template-columns:1fr; padding:48px 40px; } }
@media (max-width:575px){ .cta-band{ padding:36px 20px; } .cta-band .actions{ flex-direction:column; align-items:stretch; gap:10px; } .cta-band .actions .tlink{ justify-content:center; } }

/* ---------- 17. FOOTER ---------- */
.site-footer{ background:var(--teal); color:var(--white); border-top:1px solid var(--wline); }
.f-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,2fr); }
.f-brand{ padding:72px 64px 64px 0; border-right:1px solid var(--wline); display:flex; flex-direction:column; align-items:flex-start; }
.brand--footer img{ height:72px; }
.f-tagline{ max-width:340px; margin:24px 0 32px; font-size:16px; line-height:1.55; color:#E3EDEF; }
.f-acc--hours{ width:100%; max-width:340px; }
.f-cta{ margin-top:28px; }
.f-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr) auto; gap:40px; padding:72px 0 64px 64px; }
.f-title{ display:block; font:700 15px/1.5 var(--body); text-transform:uppercase; letter-spacing:.08em; margin:0 0 20px; }
.f-acc > summary{ display:flex; justify-content:space-between; align-items:center; list-style:none; pointer-events:none; }
.f-acc > summary::-webkit-details-marker{ display:none; }
.f-acc .chev{ display:none; width:18px; height:18px; transition:transform .3s var(--ease); }
.f-links{ display:grid; gap:4px; }
.f-links a{ display:inline-block; padding:5px 0; color:var(--white); text-decoration:none; font-size:16px; line-height:1.4; }
.f-links a:hover, .f-links a[aria-current]{ text-decoration:underline; text-underline-offset:5px; }
.f-contact{ display:grid; gap:12px; font-size:16px; line-height:1.5; }
.f-contact a{ color:var(--white); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.f-note{ display:block; font-size:13px; color:#D6E3E6; margin-top:2px; }
.f-hours{ display:grid; gap:6px; margin:0; font-size:15px; }
.f-hours > div{ display:grid; grid-template-columns:48px 1fr; gap:12px; }
.f-hours dt{ font-weight:700; } .f-hours dd{ margin:0; }
.f-hours .is-today{ color:var(--blush); }
/* pages that already show the hours card (home, about, contact, emergency, forms): body_class hide-footer-hours */
:is(.page-home, .hide-footer-hours) .f-acc--hours{ display:none; }
.f-hours .is-today dd::after{ content:" \00B7  today"; font-weight:700; }
.f-bottom{ border-top:1px solid var(--wline); padding:18px 0; font-size:14px; line-height:1.7; color:#D6E3E6; }
.f-bottom-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 28px; text-align:center; }
.f-bottom p{ margin:0; }
.f-bottom a{ color:var(--white); text-underline-offset:3px; display:inline-block; padding:4px 0; }
.f-bottom .dot{ margin:0 10px; }
.f-disclaimer{ color:var(--white); }
@media (max-width:1199px){
  .f-grid{ grid-template-columns:1fr; }
  .f-brand{ border-right:0; padding:56px 0 40px; border-bottom:1px solid var(--wline); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-auto-flow:column;
    grid-template-rows:auto auto 1fr; column-gap:48px; align-items:start; }
  .f-brand .brand{ grid-column:1; grid-row:1; justify-self:start; }
  .f-tagline{ grid-column:1; grid-row:2; margin:20px 0 0; }
  .f-cta{ grid-column:1; grid-row:3; justify-self:start; margin-top:24px; }
  .f-acc--hours{ grid-column:2; grid-row:1 / span 3; max-width:none; }
  .f-cols{ padding:40px 0 48px; grid-template-columns:repeat(3,minmax(0,1fr)) auto; }
}
/* no footer hours (768-1199): logo | tagline | CTA sit in one row */
@media (min-width:768px) and (max-width:1199px){
  :is(.page-home, .hide-footer-hours) .f-brand{ grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto; align-items:center; }
  :is(.page-home, .hide-footer-hours) .f-tagline{ grid-column:2; grid-row:1; margin:0; }
  :is(.page-home, .hide-footer-hours) .f-cta{ grid-column:3; grid-row:1; margin:0; }
}
@media (max-width:767px){
  .f-brand{ display:flex; padding:44px 0 0; border-bottom:0; }
  .f-tagline, .f-cta, .f-acc--hours{ grid-column:auto; grid-row:auto; }
  .brand--footer img{ height:56px; }
  .f-tagline{ margin:20px 0 24px; }
  .f-cta{ order:1; margin:0 0 28px; }
  .f-acc--hours{ order:2; max-width:none; border-top:1px solid var(--wline); }
  .f-cols{ grid-template-columns:1fr; gap:0; padding:0 0 32px; }
  .f-acc{ border-bottom:1px solid var(--wline); }
  .f-acc > summary{ pointer-events:auto; padding:18px 0; cursor:pointer; min-height:56px; }
  .f-acc > summary .f-title{ margin:0; }
  .f-acc .chev{ display:block; }
  .f-acc[open] .chev{ transform:rotate(180deg); }
  .f-acc .f-body{ padding:0 0 22px; }
  .f-follow{ padding-top:28px; }
  .f-follow .f-title{ margin-bottom:14px; }
  .f-bottom-inner{ flex-direction:column; gap:2px; }
}

/* ---------- 18. MOTION ---------- */
/* reveal-on-scroll: only when JS adds .js-reveal to <html> and motion is allowed; content is visible without JS */
.js-reveal .reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js-reveal .reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:0s !important; animation:none !important; scroll-behavior:auto !important; }
  .svc-card:hover .svc-card-media img{ transform:none; }
  .js-reveal .reveal{ opacity:1; transform:none; }
}

/* ---------- 18b. FORCED COLORS (Windows High Contrast): CSS-drawn marks use background:currentColor, which forced
   colours resets; give them system colours. Keep the logo's white badge so the grey wordmark stays legible. ---------- */
@media (forced-colors:active){
  .burger{ border:1px solid ButtonText; }
  .burger span, .pm::before, .pm::after{ background:ButtonText; forced-color-adjust:none; }
  .brand{ forced-color-adjust:none; background:#fff; }
  .eyebrow::before{ background:CanvasText; forced-color-adjust:none; }
  .actionbar a{ border:1px solid ButtonText; }
  .ring{ forced-color-adjust:none; }
}

/* ---------- 19. PRINT ---------- */
@media print{
  .announce, .site-header, .mmenu, .actionbar, .social, .slider-ui, .slider-progress, .map-facade, .skip-link, .f-cols, .f-cta, .hero-media, .svc-card-media{ display:none !important; }
  body{ padding:0; color:#000; font-size:12pt; }
  .bg-teal, .hero, .page-hero, .hours-card, .cta-band, .site-footer, .breadcrumbs{ background:none !important; color:#000 !important; }
  .on-teal *{ color:#000 !important; }
  .section{ padding-block:24px; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:10pt; }
  .slider-track{ display:block; overflow:visible; }
  .slider-track > li{ margin-bottom:12pt; }
  .js-reveal .reveal{ opacity:1; transform:none; }
  details:not([open]) > :not(summary){ display:block; }
}

/* ---------- 20. UTILITIES: image focal point for object-fit:cover crops ---------- */
.obj-left{ object-position:25% 50% !important; } .obj-center-left{ object-position:40% 50% !important; }
.obj-center-right{ object-position:60% 50% !important; } .obj-right{ object-position:75% 50% !important; }
.obj-top{ object-position:50% 25% !important; } .obj-bottom{ object-position:50% 75% !important; }