/* ==========================================================================
   Irvine Dentistry
   Design tokens and base styles carried over from concept/homepage-concept.html.
   Do not re-theme without checking that file — it is the approved direction.
   ========================================================================== */

:root{
  --ground:#FFFCF8;
  --surface:#FFFFFF;
  --blush:#FAEDE4;
  --blush-2:#F3DFD1;
  --sand:#F6F1E9;
  --ink:#2B221C;
  --ink-2:#5C4E44;
  --muted:#8B7A6C;
  --line:#EFE3D7;
  --line-2:#DCCBBA;
  /* Teal taken from the practice logo (~#70B8B8), darkened until white text
     passes WCAG AA on it. The logo teal itself is 2.3:1 against white — far
     below the 4.5:1 a button label needs — so it sets the hue here, not the
     lightness. Measured: --primary 6.3:1, --primary-2 4.8:1 against #fff.
     If you lighten either one, re-check those ratios first; .btn--solid and
     .closer both put white text straight onto them. */
  --primary:#156B6B;
  --primary-2:#1C7E7E;
  --primary-soft:#E2F0F0;
  --gold:#9E6B16;
  --gold-soft:#FBF0DC;
  --shadow:0 2px 4px rgba(43,34,28,.04), 0 18px 44px -24px rgba(43,34,28,.28);
  --r:14px;

  --f-display:"Newsreader",Georgia,"Times New Roman",serif;
  --f-body:"Mulish","Helvetica Neue",Arial,sans-serif;

  --maxw:1120px;
  --gutter:clamp(16px,4.5vw,48px);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#16120F;
    --surface:#1E1915;
    --blush:#2A201A;
    --blush-2:#352922;
    --sand:#221D18;
    --ink:#F4EDE6;
    --ink-2:#D2C5B8;
    --muted:#A0907F;
    --line:#332A23;
    --line-2:#473B31;
    --primary:#70BEBE;
    --primary-2:#8FD4D4;
    --primary-soft:#163434;
    --gold:#D6A455;
    --gold-soft:#2E2414;
    --shadow:0 2px 4px rgba(0,0,0,.4), 0 18px 44px -24px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --ground:#16120F;
  --surface:#1E1915;
  --blush:#2A201A;
  --blush-2:#352922;
  --sand:#221D18;
  --ink:#F4EDE6;
  --ink-2:#D2C5B8;
  --muted:#A0907F;
  --line:#332A23;
  --line-2:#473B31;
  --primary:#70BEBE;
  --primary-2:#8FD4D4;
  --primary-soft:#163434;
  --gold:#D6A455;
  --gold-soft:#2E2414;
  --shadow:0 2px 4px rgba(0,0,0,.4), 0 18px 44px -24px rgba(0,0,0,.9);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--f-body);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);font-weight:500;margin:0;text-wrap:balance;line-height:1.18;letter-spacing:-.008em}
p{margin:0}
img{display:block;max-width:100%}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:clamp(48px,6.5vw,86px)}
.band--tight{padding-block:clamp(34px,4.5vw,58px)}
.band--blush{background:var(--blush)}
.band--sand{background:var(--sand)}

.skip{position:absolute;left:-9999px;top:0;background:var(--primary);color:#fff;
  padding:12px 20px;border-radius:0 0 8px 0;z-index:100;font-weight:700;text-decoration:none}
.skip:focus{left:0}

a:focus-visible,button:focus-visible,summary:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* Flex column so the open mobile menu can take the remaining viewport height and
   scroll inside itself instead of overflowing off-screen. max-height uses dvh so
   it accounts for mobile browser chrome; the vh line is the fallback. */
.site-head{position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--ground) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;
  max-height:100vh;max-height:100dvh}
.site-head .wrap{display:flex;align-items:center;gap:14px;padding-block:10px}
/* :first-child, not just > .wrap — the mobile panel also carries .wrap. */
.site-head > .wrap:first-child{flex:none}
@media(min-width:1000px){.site-head .wrap{padding-block:12px}}
.brand{font-family:var(--f-display);font-size:22px;font-weight:600;letter-spacing:-.02em;
  white-space:nowrap;line-height:1;text-decoration:none;color:var(--ink);
  display:flex;align-items:center;flex:none}
.brand em{font-style:normal;color:var(--primary)}

/* Real logo, 350×163 (2.15:1). width:auto keeps the true ratio — it is NOT being
   stretched. It read as too tall at 42px because of the lockup itself: the tooth
   mark is a tall element while "Irvine Dentistry" is small beside it, so the whole
   thing takes header height the wordmark doesn't use. Scaled down so the header is
   compact; below this the wordmark stops being legible.
   The source is low-resolution — the largest the old WEO site serves — so don't
   scale it past ~120px wide or it goes soft. A vector original would let the mark
   sit larger without either problem. */
.brand img{height:36px;width:auto;display:block}
@media(min-width:1000px){.brand img{height:42px}}

/* The wordmark inside the logo is dark slate and disappears against the dark
   background, so lift it in dark mode. Applied to the file, not the container,
   because the PNG is transparent. */
:root[data-theme="dark"] .brand img,
:root[data-theme="dark"] .foot-logo{filter:brightness(0) invert(1) sepia(.35) saturate(4) hue-rotate(125deg) brightness(1.15)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand img,
  :root:not([data-theme="light"]) .foot-logo{filter:brightness(0) invert(1) sepia(.35) saturate(4) hue-rotate(125deg) brightness(1.15)}
}

.nav{display:none;gap:24px;margin-left:auto;font-size:15px;color:var(--ink-2)}
.nav a{text-decoration:none;color:inherit}
.nav a:hover{color:var(--primary)}
.nav a[aria-current="page"]{color:var(--primary);font-weight:700}

.head-cta{margin-left:auto;display:flex;align-items:center;gap:12px}
.tel{font-size:15.5px;font-weight:700;text-decoration:none;white-space:nowrap;color:var(--ink);display:none}
@media(min-width:580px){.tel{display:inline}}
@media(min-width:1000px){.nav{display:flex}.head-cta{margin-left:0}.nav-toggle{display:none}}
/* The header CTA is white-space:nowrap, so below ~400px the brand + button +
   hamburger no longer fit and the page scrolls sideways (2px at 360, 42px at
   320 — 360 is a common Android width). Tighten the button rather than let it
   wrap to two lines or drop it. Re-measure here if the label ever gets longer. */
@media(max-width:400px){
  .site-head .wrap{gap:10px;padding-inline:12px}
  .head-cta{gap:8px}
  .head-cta .btn{padding-inline:13px;font-size:14px}
}

.nav-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;border:1px solid var(--line-2);border-radius:10px;
  background:transparent;color:var(--ink);cursor:pointer;padding:0}
.nav-toggle svg{width:20px;height:20px}
.nav-toggle .ico-close{display:none}
.nav-toggle[aria-expanded="true"] .ico-open{display:none}
.nav-toggle[aria-expanded="true"] .ico-close{display:block}
/* Must come AFTER the .nav-toggle base rule above — same specificity, so source
   order decides. The earlier min-width:1000px block can't hide it on its own. */
@media(min-width:1000px){.nav-toggle{display:none}}

/* Specificity note: the panel carries .wrap for its gutters, and .site-head .wrap
   sets display:flex. These selectors are scoped to match that weight and come
   later, so display:none wins. Don't drop the .site-head prefix. */
.site-head .nav-mobile{display:none;border-top:1px solid var(--line);background:var(--ground)}
/* The menu has 13 links plus a phone row — taller than a small phone screen. As a
   flex child of the capped-height .site-head it scrolls inside itself.
   min-height:0 is required: flex items default to min-height:auto, which refuses to
   shrink below content height, so without it the panel just overflows off-screen
   and the page behind scrolls instead. overscroll-behavior:contain stops the scroll
   chaining to the body when you reach the end. */
.site-head .nav-mobile.is-open{display:block;min-height:0;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media(min-width:1000px){.site-head .nav-mobile,.site-head .nav-mobile.is-open{display:none}}
/* Body scroll lock while the menu is open.
   Released above 1000px: the menu is hidden there, so a stale .nav-open left over
   from resizing a narrow window wider would otherwise lock desktop scrolling. */
body.nav-open{overflow:hidden}
@media(min-width:1000px){body.nav-open{overflow:visible}}
.nav-mobile ul{list-style:none;margin:0;padding:8px 0 18px}
.nav-mobile a{display:block;padding:13px 0;text-decoration:none;color:var(--ink);
  font-size:17px;border-bottom:1px solid var(--line)}
.nav-mobile a[aria-current="page"]{color:var(--primary);font-weight:700}
.nav-mobile .tel-row{display:block;padding-top:16px;font-weight:700;color:var(--primary);
  font-size:18px;text-decoration:none;border:0}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-body);font-weight:700;font-size:15.5px;
  padding:13px 24px;border-radius:999px;text-decoration:none;
  border:1.5px solid var(--primary);white-space:nowrap;cursor:pointer}
.btn--solid{background:var(--primary);color:#fff}
.btn--solid:hover{background:var(--primary-2);border-color:var(--primary-2)}
:root[data-theme="dark"] .btn--solid{color:#0F1613}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn--solid{color:#0F1613}}
.btn--ghost{color:var(--primary);background:transparent}
.btn--ghost:hover{background:var(--primary-soft)}
.btn--lg{padding:15px 30px;font-size:16.5px}

/* --------------------------------------------------------------------------
   Placeholders — gold means "unconfirmed, do not ship as fact"
   -------------------------------------------------------------------------- */

.ph{background:var(--blush-2);border-radius:var(--r);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:28px 24px;text-align:center;color:var(--muted)}
.ph b{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700}
.ph span{font-size:13.5px;line-height:1.55;max-width:34ch;font-style:italic}

.tbd{border-bottom:1.5px dotted var(--gold);text-underline-offset:3px}

/* Block-level draft copy — words written FOR someone rather than BY them, or any
   paragraph awaiting sign-off. Deliberately loud: a dotted underline works inline
   but disappears on a full paragraph, and unapproved copy that looks live is
   exactly how invented lines end up shipping. */
.prose p.tbd,
.prose .tbd-list li{border-bottom:0;background:var(--gold-soft);
  border-left:3px solid var(--gold);border-radius:0 8px 8px 0;
  padding:13px 16px;color:var(--ink-2);font-size:15.8px;display:block}
.prose .tbd-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.prose .tbd-list li::before{content:none}
.prose .tbd-list li b{color:var(--ink)}
.tbd-tag{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);background:var(--gold-soft);border:1px solid var(--gold);
  border-radius:999px;padding:2px 8px;margin-left:7px;white-space:nowrap;vertical-align:middle}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero{background:var(--blush);padding-block:clamp(36px,5vw,66px)}
.hero-grid{display:grid;gap:32px;align-items:center}
@media(min-width:880px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:56px}}
/* max-width was 13ch, sized for the old short headline "Your family's dentist in
   Irvine." At 34px on a phone that is only ~259px wide inside a 390px screen, so
   the current, longer headline wrapped four times into a narrow column. Let it use
   the width it has on mobile; keep a measure limit only where there's room. */
.hero h1{font-size:clamp(34px,5.2vw,56px);margin-bottom:18px}
@media(min-width:880px){.hero h1{max-width:18ch}}
/* Two sentences, two blocks — see the note in index.html. */
.h1-sentences span{display:block;text-wrap:balance}
.hero .lede{font-size:clamp(17px,1.8vw,19.5px);color:var(--ink-2);max-width:42ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-media{position:relative}
/* 4:3, not the concept's 4:5 — the available photos are landscape, and a 4:5 crop
   of any of them loses too much width to stay sharp. The current hero file is cut
   to exactly 4:3, so object-fit has no overflow to work with and object-position
   does nothing; it is kept for the next photo, which may not arrive pre-cropped.
   If you swap in one that isn't 4:3, re-check what object-position is holding in
   frame before trusting it. */
/* height:auto is load-bearing. The <img> carries width/height attributes (they stop
   the page shifting as it loads), and those become presentational hints. width:100%
   overrides the width hint, but without height:auto the height hint stays at the
   file's pixel height and aspect-ratio is ignored entirely — the crop silently does
   nothing. Don't remove it. */
.hero-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:42% 22%;
  border-radius:var(--r);box-shadow:var(--shadow)}
.ph--hero{aspect-ratio:4/5;box-shadow:var(--shadow)}
.hero-card{background:var(--surface);border-radius:12px;padding:15px 19px;box-shadow:var(--shadow);
  margin:-44px 18px 0;position:relative;z-index:2}
.hero-card strong{display:block;font-family:var(--f-display);font-size:17px;font-weight:600}
.hero-card span{font-size:13.5px;color:var(--muted)}

/* Interior page hero — smaller, no photo */
.page-hero{background:var(--blush);padding-block:clamp(30px,4.5vw,54px)}
.page-hero h1{font-size:clamp(30px,4.4vw,46px);max-width:18ch;margin-bottom:14px}
.page-hero .lede{font-size:clamp(16.5px,1.7vw,19px);color:var(--ink-2);max-width:56ch}
.page-hero .hero-actions{margin-top:24px}

.crumbs{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--primary);text-decoration:underline}
.crumbs span{margin-inline:7px;opacity:.6}

/* --------------------------------------------------------------------------
   Hero facts — the three callouts under the subline
   -------------------------------------------------------------------------- */

.hero-facts{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hero-facts li{display:inline-flex;align-items:center;gap:7px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:999px;
  padding:7px 14px;font-size:14px;font-weight:600;color:var(--ink-2)}
/* Small teal dot keeps the brand colour present without a solid block of it. */
.hero-facts li::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--primary);flex:none}
.hero-facts + .hero-actions{margin-top:20px}

/* --------------------------------------------------------------------------
   Facts bar — UNUSED as of 20 Sep 2026
   The full-width teal stripe that used to sit below the hero. Its three items are
   now .hero-facts chips inside the hero. Kept so the desktop stripe can be put
   back quickly if wanted; delete this block if that decision is settled.
   -------------------------------------------------------------------------- */

.facts{background:var(--primary);color:#fff}
:root[data-theme="dark"] .facts{color:#0F1613}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .facts{color:#0F1613}}
.facts .wrap{display:flex;flex-wrap:wrap;gap:10px 40px;padding-block:16px;
  font-size:15px;font-weight:600;justify-content:space-between;align-items:center}
.facts .tbd{border-bottom-color:currentColor}
.facts .tbd-tag{color:inherit;border-color:currentColor;background:transparent}

/* --------------------------------------------------------------------------
   Section heads and prose
   -------------------------------------------------------------------------- */

.sec-head{max-width:52ch;margin-bottom:32px}
.sec-head h2{font-size:clamp(27px,3.6vw,38px);margin-bottom:12px}
.sec-head p{color:var(--ink-2);font-size:17px}

.prose{max-width:66ch}
.prose h2{font-size:clamp(25px,3.2vw,34px);margin-bottom:12px}
.prose h3{font-size:21px;margin-bottom:7px}
.prose p{color:var(--ink-2)}
.prose p+p,.prose p+h3,.prose ul+h3,.prose p+ul{margin-top:16px}
.prose h2+p,.prose h3+p{margin-top:0}
.prose h3+*{margin-top:8px}
.prose ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.prose ul li{display:flex;gap:11px;color:var(--ink-2);font-size:15.8px}
.prose ul li::before{content:"✓";color:var(--primary);font-weight:700;flex:none}
.prose ul.plain li::before{content:"—";color:var(--muted);font-weight:400}
.prose section+section{margin-top:clamp(30px,4vw,46px)}

/* --------------------------------------------------------------------------
   Value props
   -------------------------------------------------------------------------- */

.props{display:grid;gap:14px}
@media(min-width:620px){.props{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.props{grid-template-columns:repeat(3,1fr)}}
.prop{background:var(--surface);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.prop h3{font-size:20px;margin-bottom:5px}
.prop p{font-size:14.5px;color:var(--muted)}
.prop--lead{background:var(--primary-soft)}
.prop--lead h3{color:var(--primary)}
.prop--lead p{color:var(--ink-2)}

/* --------------------------------------------------------------------------
   Offer / price card
   -------------------------------------------------------------------------- */

.offer-grid{display:grid;gap:26px;align-items:center}
@media(min-width:860px){.offer-grid{grid-template-columns:.92fr 1.08fr;gap:50px}}
.offer-grid .ph{aspect-ratio:4/3;min-height:230px}
.price-card{background:var(--surface);border-radius:var(--r);padding:28px;box-shadow:var(--shadow)}
.price-card .amt{font-family:var(--f-display);font-size:58px;line-height:1;color:var(--gold);font-weight:600}
.price-card .amt small{font-size:25px;vertical-align:super}
.price-card ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;font-size:15.5px;color:var(--ink-2)}
.price-card li{display:flex;gap:10px}
.tick{color:var(--primary);font-weight:700}
.fine{font-size:12.5px;color:var(--muted);margin-top:16px;line-height:1.55}

/* --------------------------------------------------------------------------
   Services list
   -------------------------------------------------------------------------- */

.svc{display:grid;gap:0}
@media(min-width:600px){.svc{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.svc{grid-template-columns:repeat(4,1fr)}}
.svc a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 0;border-bottom:1px solid var(--line-2);text-decoration:none;font-size:17px;color:var(--ink)}
@media(min-width:600px){.svc a{padding-right:22px}}
.svc a:hover{color:var(--primary)}
.svc a i{font-style:normal;color:var(--muted)}
.svc a:hover i{color:var(--primary)}

/* --------------------------------------------------------------------------
   Doctor
   -------------------------------------------------------------------------- */

.doc{display:grid;gap:26px;align-items:start}
@media(min-width:880px){.doc{grid-template-columns:1.15fr .85fr;gap:54px}}
.doc h2{font-size:clamp(27px,3.6vw,38px);margin-bottom:16px}
.doc p{color:var(--ink-2);max-width:58ch}
.doc p+p{margin-top:13px}
.creds{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.creds li{background:var(--surface);border-radius:12px;padding:16px 18px}
.creds b{display:block;font-family:var(--f-display);font-size:17px;font-weight:600;margin-bottom:2px}
.creds span{font-size:14px;color:var(--muted)}

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */

.rev{display:grid;gap:16px}
@media(min-width:780px){.rev{grid-template-columns:repeat(3,1fr)}}
figure.q{margin:0;background:var(--surface);border-radius:var(--r);padding:24px;
  display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
figure.q blockquote{margin:0;font-family:var(--f-display);font-size:17.5px;line-height:1.5}
figure.q figcaption{font-size:13.5px;color:var(--muted);margin-top:auto}
figure.q figcaption b{color:var(--ink-2)}
.stars{color:var(--gold);letter-spacing:.16em;font-size:14px}

/* Themed review label. Sentence case on purpose — the concept's avoid-list rules
   out uppercase letter-spaced eyebrows. Each label names the part of the promise
   the quote below it proves. */
.q-theme{font-size:13.5px;font-weight:700;color:var(--primary)}
figure.q .q-theme + blockquote{margin-top:-4px}
.rev--two{display:grid;gap:16px}
@media(min-width:780px){.rev--two{grid-template-columns:repeat(2,1fr)}}

/* The visit sequence. Deliberately not numbered step cards — those are on the
   concept's avoid-list. A simple marked list reads as a description of how an
   appointment goes rather than a process diagram. */
/* Selectors are doubled with a .prose variant on purpose. .flow is used inside
   .prose, where `.prose ul li` (0,1,2) outranks a bare `.flow li` (0,1,1) and would
   otherwise keep display:flex and the ✓ marker. Don't simplify these back down.

   Absolutely-positioned marker rather than display:flex on the li: flex makes a <b>
   and the text after it two separate flex items, so "Your exam — with Dr. Lee"
   renders as two ragged columns instead of one flowing sentence. */
.flow,.prose .flow{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;max-width:60ch}
.flow li,.prose .flow li{display:block;position:relative;padding-left:20px;
  font-size:16px;color:var(--ink-2);line-height:1.6}
.flow li::before,.prose .flow li::before{content:"";position:absolute;left:0;top:10px;
  width:7px;height:7px;border-radius:50%;background:var(--primary)}
.flow li b,.prose .flow li b{color:var(--ink);font-weight:700}

.rev-meta{display:flex;flex-wrap:wrap;gap:8px 32px;margin-bottom:24px;font-size:15px;color:var(--muted)}
.rev-meta strong{color:var(--ink);font-size:18px;font-weight:700}

/* --------------------------------------------------------------------------
   Two-column, chips, cards
   -------------------------------------------------------------------------- */

.two{display:grid;gap:28px}
@media(min-width:860px){.two{grid-template-columns:1fr 1fr;gap:50px}}
.two--aside{gap:28px}
@media(min-width:900px){.two--aside{grid-template-columns:1.35fr .65fr;gap:52px;align-items:start}}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{border:1px solid var(--line-2);border-radius:999px;padding:6px 15px;font-size:14px;
  color:var(--ink-2);background:var(--surface)}
.chip--lang{border-color:var(--primary);color:var(--primary);background:var(--primary-soft);font-weight:600}

.card-soft{background:var(--surface);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.card-soft h3{font-size:21px;margin-bottom:9px}
.card-soft p{color:var(--ink-2);font-size:15.5px}
.card-soft p+p{margin-top:10px}
.card-soft .btn{margin-top:18px}

.aside-card{background:var(--surface);border-radius:var(--r);padding:24px;box-shadow:var(--shadow);
  position:sticky;top:96px}
.aside-card h3{font-size:19px;margin-bottom:8px}
.aside-card p{font-size:15px;color:var(--ink-2)}
.aside-card .btn{margin-top:16px;width:100%}
.aside-card .tel-line{display:block;margin-top:12px;text-align:center;font-size:15px;color:var(--muted);text-decoration:none}
.aside-card .tel-line b{color:var(--ink);font-size:16.5px}
@media(max-width:899px){.aside-card{position:static}}


/* --------------------------------------------------------------------------
   Appointment request form (/contact)
   Replaces the online scheduler, which is not in place for launch. Fields mirror
   the request form on the old WEO site so nothing the front desk relies on is lost.
   -------------------------------------------------------------------------- */

.apt-form{display:grid;gap:22px;max-width:62ch}
.apt-form .field{display:grid;gap:7px}
.apt-form label,.apt-form legend{font-size:15px;font-weight:700;color:var(--ink)}
.apt-form .req{color:var(--primary)}
.apt-form .hint{font-size:13.5px;color:var(--muted);font-weight:400;line-height:1.5}
.apt-form input[type=text],
.apt-form input[type=tel],
.apt-form input[type=email],
.apt-form textarea{
  font-family:var(--f-body);font-size:16px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:10px;
  padding:12px 14px;width:100%}
.apt-form textarea{min-height:110px;resize:vertical}
.apt-form input:focus-visible,.apt-form textarea:focus-visible{
  outline:2.5px solid var(--gold);outline-offset:2px;border-color:var(--primary)}
/* Radio groups: a fieldset with no default border, options wrapping as chips. */
.apt-form fieldset{border:0;padding:0;margin:0;display:grid;gap:9px}
.apt-form .opts{display:flex;flex-wrap:wrap;gap:9px}
.apt-form .opts label{display:inline-flex;align-items:center;gap:8px;font-weight:500;
  background:var(--surface);border:1px solid var(--line-2);border-radius:999px;
  padding:9px 15px;cursor:pointer;font-size:15px}
.apt-form .opts input{accent-color:var(--primary);margin:0}
.apt-form .opts label:has(input:checked){border-color:var(--primary);
  background:var(--primary-soft);font-weight:700}
.apt-form .opts label:focus-within{outline:2.5px solid var(--gold);outline-offset:2px}
/* Honeypot — hidden from people, visible to bots that fill every field. */
.apt-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.apt-form .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px}
.apt-form .actions .fine{margin-top:0}

/* --------------------------------------------------------------------------
   Hours and address
   -------------------------------------------------------------------------- */

.hours{width:100%;border-collapse:collapse;font-size:15.5px}
.hours th,.hours td{text-align:left;padding:11px 0;border-bottom:1px solid var(--line);font-weight:400}
.hours th{color:var(--muted);font-weight:500}
.hours td{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.hours tr.hl th,.hours tr.hl td{color:var(--primary);font-weight:700}
.addr{font-size:17.5px;line-height:1.6;color:var(--ink-2)}
.addr a{color:var(--primary);font-weight:700;text-decoration:none}
.addr a:hover{text-decoration:underline}
.ph--map{aspect-ratio:16/10;margin-top:18px}
.map-embed{width:100%;aspect-ratio:16/10;border:0;border-radius:var(--r);margin-top:18px;display:block}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;font-family:var(--f-display);font-size:19px;font-weight:600;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--primary);font-size:23px;flex:none;font-family:var(--f-body)}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:10px;color:var(--ink-2);font-size:15.5px;max-width:70ch}

/* --------------------------------------------------------------------------
   Closer
   -------------------------------------------------------------------------- */

.closer{background:var(--primary);color:#fff}
:root[data-theme="dark"] .closer{color:#0F1613}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .closer{color:#0F1613}}
.closer h2{font-size:clamp(29px,4.2vw,44px);max-width:17ch;margin-bottom:14px}
.closer p{opacity:.9;max-width:44ch;font-size:17px}
.closer .btn--solid{background:var(--ground);color:var(--primary);border-color:var(--ground)}
.closer .btn--ghost{color:inherit;border-color:currentColor}
.closer .btn--ghost:hover{background:rgba(255,255,255,.14)}
.closer .tbd-tag{color:inherit;border-color:currentColor;background:transparent}


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-foot{background:var(--sand);padding-block:44px 30px;margin-top:0;font-size:15px}
.foot-grid{display:grid;gap:28px}
@media(min-width:760px){.foot-grid{grid-template-columns:1.2fr 1fr 1fr}}
.foot-grid h3{font-family:var(--f-body);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:12px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot-grid a{color:var(--ink-2);text-decoration:none}
.foot-grid a:hover{color:var(--primary);text-decoration:underline}
.foot-grid .addr{font-size:15.5px}
.foot-brand{font-family:var(--f-display);font-size:21px;font-weight:600;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:10px;display:block}
.foot-brand em{font-style:normal;color:var(--primary)}
.foot-logo{height:56px;width:auto;display:block;margin-bottom:14px}
.foot-legal{margin-top:34px;padding-top:20px;border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  font-size:13.5px;color:var(--muted)}
.foot-legal a{color:inherit;text-decoration:none}
.foot-legal a:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   Utility / status pages
   -------------------------------------------------------------------------- */

.status{padding-block:clamp(60px,10vw,120px);text-align:center}
.status h1{font-size:clamp(30px,5vw,46px);margin-bottom:14px}
.status p{color:var(--ink-2);max-width:48ch;margin-inline:auto;font-size:17px}
.status .hero-actions{justify-content:center}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* Services navigation and directory: scoped to these components. */
.services-menu{position:relative}
.services-menu summary{cursor:pointer;list-style:none;white-space:nowrap}
.services-menu summary::-webkit-details-marker{display:none}
.services-menu summary:hover,.services-menu[open] summary{color:var(--primary)}
.services-menu-panel{position:absolute;top:calc(100% + 14px);left:-20px;width:300px;max-height:calc(100dvh - 100px);overflow-y:auto;padding:10px;background:var(--ground);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow)}
.nav .services-menu-panel a{display:block;padding:10px 12px;line-height:1.4;border-radius:6px}
.nav .services-menu-panel a:hover,.nav .services-menu-panel a:focus-visible{background:var(--primary-soft)}
.service-directory{display:grid;gap:16px}
.service-directory-link{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);text-decoration:none;color:var(--ink)}
.service-directory-link:hover{border-color:var(--primary);background:var(--primary-soft)}
.service-directory-link h3{font-size:24px}
.service-directory-link p{color:var(--ink-2);font-size:15.5px}
.service-directory-more{margin-top:auto;padding-top:6px;color:var(--primary);font-size:14px;font-weight:700}
@media(min-width:620px){.service-directory{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.service-directory{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Homepage service cards. Icon plus name only — no descriptions. The section
   has to reassure visitors that this is a full general practice without
   dominating the brand story, so it stays compact.

   Two across on phones rather than one: seven full-width rows is a long scroll
   on the page that already runs longest. The icon sits in a soft disc, the
   same primary-soft the cards use on hover, so hovering fills the card around
   an already-tinted disc rather than introducing a new colour. */
.svc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.svc-cards a{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:12px;text-align:center;padding:22px 14px;border:1px solid var(--line-2);
  border-radius:var(--r);background:var(--surface);color:var(--ink);text-decoration:none;
  font-weight:600;line-height:1.35}
.svc-cards a:hover{color:var(--primary);background:var(--primary-soft);border-color:var(--primary)}
.svc-card-ico{display:grid;place-items:center;width:54px;height:54px;flex:none;
  border-radius:50%;background:var(--primary-soft);color:var(--primary)}
.svc-cards a:hover .svc-card-ico{background:var(--surface)}
/* Line icons: no fill, stroke follows the link colour. */
.svc-card-ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.svc-card-label{font-size:15px}
/* Sits at the foot of the card so the labels above it stay aligned whether the
   name wraps to one line or two. margin-top:auto needs the card to be a flex
   column, which it is. Not a link itself — the whole card already is one. */
.svc-card-more{margin-top:auto;padding-top:10px;font-size:13px;font-weight:700;color:var(--primary)}
.svc-cards a:hover .svc-card-more{color:var(--primary)}
@media(min-width:720px){
  .svc-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .svc-card-label{font-size:15.5px}
}
@media(min-width:1000px){
  .svc-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .svc-cards a{padding:26px 16px}
}

/* ---- Comfort section (home) ---------------------------------------------
   Centred and single-column: the bands either side of it are both two-column,
   and a third would flatten the page. The photo is wider than the text block
   so it reads as the subject of the section rather than an illustration of it.
   4:3 matches the file exactly, so nothing is cropped — see the section
   comment in index.html before swapping the photo for one of another shape. */
.comfort{text-align:center}
.comfort-head{max-width:62ch;margin-inline:auto}
.comfort-head h2{font-size:clamp(27px,3.6vw,38px);margin-bottom:14px}
.comfort-head p{color:var(--ink-2);font-size:17px;max-width:58ch;margin-inline:auto}
.comfort-photo{max-width:860px;margin:clamp(26px,3.2vw,36px) auto 0}
/* height:auto for the same reason as .hero-media img — the width/height
   attributes are presentational hints and would otherwise win over aspect-ratio. */
.comfort-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;
  border-radius:var(--r);box-shadow:var(--shadow)}

/* Photo sitting where the New Patients placeholder was. 4:3 matches both the
   file and the .ph box it replaced, so the offer grid keeps its proportions. */
.offer-photo{margin:0}
.offer-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r);box-shadow:var(--shadow)}

/* Credential tiles as a full-width row under the bio, rather than stacked in
   the portrait column — that left the text column several hundred pixels
   short and the section read as broken. */
.creds--row{margin-top:26px}
@media(min-width:560px){.creds--row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:880px){.creds--row{grid-template-columns:repeat(4,minmax(0,1fr))}}