@font-face{font-family:'Cabinet Grotesk';src:url('fonts/cabinet-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Cabinet Grotesk';src:url('fonts/cabinet-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* All Care Medical - conventional practice-website theme. GENERATED by tools/medical-wp/make-css.py.
   Blue, at the owner's request (2026-09-18): medical blue #1759C2 with an azure accent and
   calls to action in their own colour. Dental next door is navy + teal with a serif. */

:root{
  --navy:#1759C2; --navy-d:#10469E; --navy-x:#0B2B63;
  --teal:#2F80ED; --teal-d:#1A64C8; --teal-l:#E8F1FD;
  --ink:#0E1F3A; --body:#4A5870; --muted:#5F6E85;
  --line:#DCE5F2; --tint:#F2F7FE; --white:#fff;
  --warm:#1759C2; --warm-l:#F2F7FE;
  --grad:linear-gradient(115deg,#0B2B63 0%,#10469E 55%,#1759C2 100%);
  --shadow:0 2px 14px rgba(16,35,63,.07);
  --shadow-h:0 14px 34px rgba(16,35,63,.14);
  --wrap:1200px; --r:16px;
  /* Cabinet Grotesk for display, Satoshi for UI and body. */
  --head:'Cabinet Grotesk',"Segoe UI",Arial,sans-serif;
  --ui:'Satoshi',"Segoe UI",Arial,sans-serif;
  --text:'Satoshi',"Segoe UI",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--text);font-size:16px;line-height:1.75;color:var(--body);background:var(--white);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--teal-d)}
h1,h2,h3,h4,h5{font-family:var(--ui);color:var(--ink);margin:0 0 14px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
h1,h2{font-family:var(--head);font-weight:800;letter-spacing:-.02em;line-height:1.14}
h1{font-size:54px}h2{font-size:42px}h3{font-size:21px}h4{font-size:17px}
p{margin:0 0 16px}
ul{margin:0 0 16px;padding-left:20px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sec{padding:72px 0}
.sec.tint{background:var(--tint);position:relative}
.sec.cream{background:var(--warm-l);position:relative}
.sec.cream::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(192,138,62,.075) 1px,transparent 1px);background-size:24px 24px}
.sec.cream > *{position:relative;z-index:1}
.sec.tint::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(12,72,156,.055) 1px,transparent 1px);background-size:24px 24px}
.sec.tint > *{position:relative;z-index:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
/* hash landings must clear the sticky header */
[id]{scroll-margin-top:96px}
@media (max-width:760px){[id]{scroll-margin-top:80px}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--ui);font-weight:600;font-size:15px;
  padding:14px 30px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:.22s;line-height:1.2}
.btn svg{width:17px;height:17px;flex:none}
.btn-teal{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn-teal:hover{background:var(--teal-d);border-color:var(--teal-d);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(23,89,194,.34)}
.btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-navy:hover{background:var(--navy-d);border-color:var(--navy-d);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff;transform:translateY(-2px)}
.btn-line{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-line:hover{background:var(--navy);border-color:var(--navy);color:#fff;transform:translateY(-2px)}
.btn-sm{padding:11px 22px;font-size:14px}

/* ---------- top utility bar ---------- */
.topbar{background:var(--navy-x);color:#C6D6EC;font-size:13.5px;line-height:1}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;padding-top:8px;padding-bottom:8px}
.tb-l,.tb-r{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.tb-i{display:inline-flex;align-items:center;gap:8px;color:#C6D6EC}
.tb-i svg{width:14px;height:14px;color:var(--teal);flex:none}
a.tb-i:hover{color:#fff}
.tb-r a.tb-i{font-weight:600;color:#fff}

/* ---------- header ---------- */
/* Header is two rows: a centred-logo row that scrolls away, and a dark nav bar that sticks.
   The negative sticky top lets the top row slide off before the bar pins. */
.hdr{position:sticky;top:0;z-index:60;background:#fff}
.hdr-main{background:#fff;border-bottom:2px solid var(--line)}
.hdr-main .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;min-height:104px}
.hdr-tel{display:flex;align-items:center;gap:13px;justify-self:start}
.ht-ico{width:48px;height:48px;border-radius:50%;background:var(--teal-l);color:var(--teal-d);
  display:flex;align-items:center;justify-content:center;flex:none;transition:.22s;border:2px solid var(--teal-l)}
.ht-ico svg{width:20px;height:20px}
.hdr-tel:hover .ht-ico{background:var(--teal);color:#fff;border-color:var(--teal)}
.ht-txt{display:flex;flex-direction:column;font-family:var(--ui);font-size:18px;font-weight:700;
  color:var(--ink);line-height:1.25}
.ht-txt b{font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.brand{flex:none;display:block;justify-self:center}
.brand img{height:62px;width:auto;display:block}
.hdr-end{justify-self:end;display:flex;align-items:center;gap:14px}
.navbar{background:var(--navy-x);position:relative;z-index:2}
.hdr.stuck .navbar{box-shadow:0 6px 22px rgba(10,46,91,.28)}
.navbar .wrap{display:flex;justify-content:center}
.nav{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav > li{position:relative}
.nav > li > a{display:flex;align-items:center;gap:7px;font-family:var(--ui);font-weight:600;font-size:13.5px;
  letter-spacing:.09em;text-transform:uppercase;color:#fff;padding:20px 20px;position:relative}
.nav > li > a::after{content:"";position:absolute;left:20px;right:20px;bottom:12px;height:3px;background:var(--teal);
  transform:scaleX(0);transition:transform .25s;transform-origin:left}
.nav > li > a:hover{color:#A9CEFF}
.nav > li > a:hover::after,.nav > li.on > a::after{transform:scaleX(1)}
.nav > li.on > a{color:#A9CEFF}
.nav .caret{width:10px;height:10px;opacity:.55}
.sub{position:absolute;top:100%;left:0;min-width:274px;background:#fff;border:2px solid var(--line);
  border-top:4px solid var(--teal);box-shadow:var(--shadow-h);list-style:none;margin:0;padding:8px 0;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.22s;z-index:5}
.nav > li:hover .sub,.nav > li:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub a{display:block;padding:9px 20px;font-size:14.5px;color:var(--body);border-bottom:1px solid #F2F6FA}
.sub li:last-child a{border-bottom:0}
.sub a:hover{background:var(--tint);color:var(--navy);padding-left:25px}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line);background:#fff;border-radius:12px;
  align-items:center;justify-content:center;cursor:pointer;flex:none}
.burger span{display:block;width:20px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.hdr-phone{display:none;font-family:var(--ui);font-weight:600;color:var(--navy);align-items:center;gap:8px;font-size:15px}
.hdr-phone svg{width:16px;height:16px}
.mnav{display:none;border-top:1px solid var(--line);background:#fff}
.mnav ul{list-style:none;margin:0;padding:0}
.mnav > ul > li > a{display:block;padding:15px 24px;font-family:var(--ui);font-weight:500;color:var(--ink);border-bottom:1px solid var(--line)}
.mnav .msub a{padding:11px 24px 11px 42px;font-size:14.5px;color:var(--body);display:block;border-bottom:1px solid #F2F6FA}
.mnav .mcta{padding:18px 24px}
.mnav .mcta .btn{width:100%;justify-content:center}
.hdr.open .mnav{display:block}


/* ---------- sticky quick-action rail ---------- */
.rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:3px}
.rail a{display:flex;flex-direction:column;align-items:center;gap:5px;width:66px;padding:14px 6px;
  background:var(--navy-x);color:#fff;border-radius:16px 0 0 16px;font-family:var(--ui);font-size:11px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:.22s}
.rail a:hover{background:var(--teal);color:#fff;width:78px}
.rail svg{width:20px;height:20px}

/* ---------- promo strip ---------- */
.promo{background:var(--navy-x);color:#B9CCE6;font-size:13px;line-height:1}
.promo .wrap{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  min-height:42px;padding-top:9px;padding-bottom:9px}
.promo-sep{width:1px;height:14px;background:rgba(255,255,255,.24)}
.promo a:hover{color:#fff}

/* ---------- hero slider ---------- */
.hero{position:relative;overflow:hidden;background:var(--navy-x)}
.slides{position:relative;height:640px}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;pointer-events:none}
.slide.on{opacity:1;pointer-events:auto}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,32,68,.9) 0%,rgba(8,32,68,.78) 42%,rgba(8,32,68,.34) 100%);z-index:1}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 7s ease-out}
.slide.on img{transform:scale(1)}
.slide .wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding-bottom:150px}
.slide-in{max-width:640px;color:#fff}
.kick{display:inline-flex;align-items:center;gap:12px;font-family:var(--ui);font-weight:600;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;color:#A9CEFF;margin-bottom:18px}
.kick::before{content:"";width:34px;height:2px;background:var(--teal)}
.slide h1{font-family:var(--head);color:#fff;font-size:56px;margin-bottom:18px;text-shadow:0 2px 18px rgba(0,0,0,.28)}
.slide h1 em{font-style:normal;color:#A9CEFF}
.slide p{font-size:18.5px;color:#DCE6F3;margin-bottom:30px;max-width:530px}
.slide-btns{display:flex;gap:14px;flex-wrap:wrap}
.slide .slide-in > *{opacity:0;transform:translateY(24px)}
.slide.on .slide-in > *{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
.slide.on .slide-in > *:nth-child(1){transition-delay:.15s}
.slide.on .slide-in > *:nth-child(2){transition-delay:.3s}
.slide.on .slide-in > *:nth-child(3){transition-delay:.45s}
.slide.on .slide-in > *:nth-child(4){transition-delay:.6s}
.sl-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:rgba(9,32,66,.34);color:#fff;display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:.22s}
.sl-arrow:hover{background:var(--teal);border-color:var(--teal)}
.sl-arrow svg{width:16px;height:16px}
.sl-prev{left:26px}.sl-next{right:26px}
.dots{position:absolute;left:0;right:0;bottom:168px;z-index:4;display:flex;justify-content:center;gap:10px}
.dots button{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.75);background:transparent;padding:0;cursor:pointer;transition:.22s}
.dots button.on{background:var(--teal);border-color:var(--teal);width:30px;border-radius:6px}

/* ---------- feature boxes over the hero ---------- */
.feat{position:relative;z-index:5;margin-top:-92px}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#fff;border:2px solid var(--line);
  box-shadow:0 18px 40px rgba(16,35,63,.13);border-radius:var(--r);overflow:hidden}
.feat-box{padding:27px 26px;display:flex;gap:18px;align-items:flex-start;border-right:2px solid var(--line);transition:.25s}
.feat-box:last-child{border-right:0}
.feat-box:hover{background:var(--tint)}
.fico{width:62px;height:62px;border-radius:50%;background:var(--teal-l);color:var(--teal-d);display:flex;
  align-items:center;justify-content:center;flex:none;transition:.25s}
.feat-box:hover .fico{background:var(--teal);color:#fff}
.fico svg{width:28px;height:28px}
.feat-box h3{font-size:18px;margin-bottom:5px}
.feat-box p{font-size:14.5px;margin:0;line-height:1.6}

/* ---------- section headings ---------- */
.shead{margin-bottom:42px}
.shead.mid{text-align:center;max-width:700px;margin-left:auto;margin-right:auto}
.slabel{font-family:var(--ui);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-d);display:block;margin-bottom:12px}
.shead h2{margin-bottom:16px}
.shead p{font-size:17px;margin:0}
.shead p + p{margin-top:15px}
.about .ticks{margin-top:28px}
.rule{display:flex;align-items:center;gap:8px;margin:0 0 16px}
.shead.mid .rule{justify-content:center}
.rule i{display:block;height:3px;width:40px;background:var(--line);border-radius:2px}
.rule b{display:block;width:8px;height:8px;background:var(--teal);transform:rotate(45deg)}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.about-pics{position:relative;padding:0 0 68px 0}
.about-pics .p1{border-radius:26px;overflow:hidden;box-shadow:var(--shadow)}
.about-pics .p1 img{width:100%;height:430px;object-fit:cover}
.about-pics .p2{position:absolute;right:0;bottom:0;width:47%;border:8px solid #fff;border-radius:22px;
  overflow:hidden;box-shadow:var(--shadow-h)}
.about-pics .p2 img{width:100%;height:200px;object-fit:cover}
.badge{position:absolute;left:0;bottom:14px;background:var(--navy);color:#fff;padding:18px 26px;border-radius:var(--r);
  font-family:var(--ui);box-shadow:var(--shadow-h)}
.badge b{display:block;font-family:var(--head);font-size:36px;font-weight:800;line-height:1}
.badge span{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:#9FC0E8}
.ticks{list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--ink);font-weight:600;font-family:var(--ui)}
.ticks svg{width:19px;height:19px;color:var(--teal);flex:none;margin-top:3px}
.sig{display:flex;align-items:center;gap:16px;margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.sig img{width:62px;height:62px;border-radius:50%;object-fit:cover;object-position:center 22%;flex:none}
.sig b{display:block;font-family:var(--ui);color:var(--ink);font-size:16px}
.sig span{font-size:14px;color:var(--muted)}

/* ---------- services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc{background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:28px 26px;position:relative;
  transition:.28s;overflow:hidden;display:flex;flex-direction:column}
.svc::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--teal);transform:scaleX(0);
  transform-origin:left;transition:transform .3s}
.svc:hover{box-shadow:10px 10px 0 rgba(12,72,156,.10);transform:translateY(-6px);border-color:var(--navy)}
.svc:hover::before{transform:scaleX(1)}
.sico{width:62px;height:62px;border-radius:50%;background:var(--teal-l);color:var(--navy);display:flex;
  align-items:center;justify-content:center;margin-bottom:15px;transition:.28s}
.sico svg{width:29px;height:29px}
.svc:hover .sico{background:var(--navy);color:#fff}
.svc h3{margin-bottom:9px}
.svc p{font-size:14.5px;margin-bottom:14px;line-height:1.6;color:var(--body)}
.more{font-family:var(--ui);font-weight:600;font-size:14px;color:var(--navy);display:inline-flex;align-items:center;gap:8px;margin-top:auto;align-self:flex-start}
.more svg{width:14px;height:14px;transition:.25s}
.svc:hover .more svg{transform:translateX(5px)}
.svc-foot{text-align:center;margin-top:34px}

/* ---------- stats ---------- */
.stats{position:relative;background:var(--navy);padding:62px 0;overflow:hidden}
.stats img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.13}
.stats .wrap{position:relative;z-index:2}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat{color:#fff;padding:0 12px;border-right:1px solid rgba(255,255,255,.16)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--head);font-size:46px;font-weight:700;line-height:1;margin-bottom:8px}
.stat b i{font-style:normal;color:#A9CEFF}
.stat span{font-size:14.5px;color:#BFD3EC;letter-spacing:.03em}

/* ---------- doctor ---------- */
.doc{display:grid;grid-template-columns:330px 1fr;gap:58px;align-items:center}
.doc-pic{position:relative}
.doc-pic .fr{border-radius:26px;overflow:hidden;box-shadow:var(--shadow-h)}
.doc-pic img{width:100%;height:340px;object-fit:cover;object-position:center 18%}
.doc-pic .tag{position:absolute;left:-16px;bottom:30px;background:var(--teal);color:#fff;font-family:var(--ui);
  font-weight:600;font-size:14px;padding:12px 22px;border-radius:999px;box-shadow:var(--shadow-h)}
.creds{list-style:none;padding:0;margin:0 0 26px}
.creds li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px dashed var(--line);font-size:15.5px}
.creds li:last-child{border-bottom:0}
.creds svg{width:18px;height:18px;color:var(--teal);flex:none;margin-top:5px}

/* ---------- CTA band ---------- */
.cta{position:relative;padding:62px 0;overflow:hidden;background:var(--navy-x)}
.cta img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2}
.cta .wrap{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.cta h2{color:#fff;margin-bottom:8px;font-size:34px}
.cta p{color:#C6D6EC;margin:0;font-size:17px}
.cta-btns{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- testimonials ---------- */
.note{text-align:center;font-size:14px;color:var(--muted);font-style:italic;margin:-34px 0 44px}
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tst{background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:28px 26px 24px;position:relative;transition:.28s}
.tst:hover{box-shadow:10px 10px 0 rgba(23,89,194,.16);transform:translateY(-5px);border-color:var(--teal)}
.quo{position:absolute;top:26px;right:28px;font-family:var(--head);font-size:64px;line-height:1;color:var(--tint);font-weight:700}
.stars{display:flex;gap:3px;margin-bottom:16px;position:relative}
.stars svg{width:17px;height:17px;color:#F0A83C}
.tst p{font-size:15.5px;color:var(--body);position:relative;margin-bottom:22px}
.who{display:flex;align-items:center;gap:13px;padding-top:18px;border-top:1px solid var(--line)}
.avi{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:var(--ui);font-weight:600;font-size:15px;flex:none}
.who b{display:block;font-family:var(--ui);font-size:15px;color:var(--ink)}
.who span{font-size:13.5px;color:var(--muted)}

/* ---------- visit / hours + map ---------- */
.visit{display:grid;grid-template-columns:1fr 1.15fr;gap:0;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.hours{padding:44px 42px}
.hours h3{font-size:23px;margin-bottom:20px}
.htab{width:100%;border-collapse:collapse;margin-bottom:26px}
.htab th,.htab td{text-align:left;padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;font-weight:400}
.htab td:last-child{text-align:right;font-family:var(--ui);font-weight:600;color:var(--ink)}
.htab tr.today th,.htab tr.today td{color:var(--navy);font-weight:700}
.htab tr.today th::after{content:"Today";display:inline-block;margin-left:9px;background:var(--teal-l);color:var(--teal-d);
  font-family:var(--ui);font-size:11px;font-weight:600;padding:2px 8px;border-radius:3px;letter-spacing:.04em;vertical-align:middle}
.addr{display:flex;gap:13px;align-items:flex-start;margin-bottom:12px;font-size:15.5px}
.addr svg{width:19px;height:19px;color:var(--teal);flex:none;margin-top:5px}
.addr b{font-family:var(--ui);color:var(--ink);display:block}
.map{background:var(--tint);position:relative;min-height:430px}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.18)}

/* ---------- footer ---------- */
.foot{background:var(--navy-x);color:#B7C9E2;padding:62px 0 0;font-size:15px}
.foot h4{color:#fff;font-size:17px;margin-bottom:22px;position:relative;padding-bottom:14px}
.foot h4::after{content:"";position:absolute;left:0;bottom:0;width:42px;height:4px;background:var(--teal)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:38px;padding-bottom:44px}
.flogo{background:#fff;border-radius:var(--r);padding:16px 20px;display:inline-block;margin-bottom:22px}
.flogo img{height:76px;width:auto}
.foot p{font-size:14.5px;line-height:1.75}
.flinks{list-style:none;padding:0;margin:0}
.flinks li{margin-bottom:11px}
.flinks a{color:#B7C9E2;font-size:14.5px;display:inline-flex;align-items:center;gap:9px;transition:.22s}
.flinks a::before{content:"";width:5px;height:5px;background:var(--teal);transform:rotate(45deg);flex:none}
.flinks a:hover{color:#fff;transform:translateX(4px)}
.fcon{list-style:none;padding:0;margin:0}
.fcon li{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px;font-size:14.5px;line-height:1.6}
.fcon svg{width:17px;height:17px;color:var(--teal);flex:none;margin-top:4px}
.fcon a{color:#B7C9E2}.fcon a:hover{color:#fff}
.fbot{border-top:1px solid rgba(255,255,255,.12);padding:22px 0;display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px}
.fbot a{color:#B7C9E2}.fbot a:hover{color:#fff}
.neigh{background:rgba(255,255,255,.055);border-radius:var(--r);padding:18px 22px;margin-bottom:26px;font-size:14px;line-height:1.6}
.neigh b{color:#fff;font-family:var(--ui)}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}


/* ---------- brand marks and curved section edges ---------- */
/* The rule marker is the tooth from the client's own logo, not a generic diamond. */
.rule b{width:auto;height:auto;background:none;transform:none;color:var(--teal);display:flex}
.rule b svg{width:18px;height:18px;display:block}

.wv{position:absolute;left:0;width:100%;height:60px;z-index:3;display:block;pointer-events:none}
.wv-t{top:-1px}
.wv-b{bottom:-1px;transform:rotate(180deg)}

img.wm{position:absolute;right:-40px;top:50%;transform:translateY(-50%);height:190%;width:auto;
  opacity:.09;z-index:1;pointer-events:none;max-width:none}

/* ---------- pull quote ---------- */
.pq{margin:26px 0 0;padding:22px 26px;background:var(--tint);border-left:4px solid var(--teal);
  border-radius:0 var(--r) var(--r) 0;font-family:var(--head);font-size:20px;line-height:1.5;
  color:var(--ink);font-weight:500;font-style:italic}
.pq cite{display:block;margin-top:10px;font-family:var(--text);font-size:13.5px;font-style:normal;
  font-weight:600;color:var(--muted);letter-spacing:.03em;text-transform:uppercase}

/* ---------- first-visit steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.steps::before{content:"";position:absolute;top:26px;left:12%;right:12%;height:2px;
  background:repeating-linear-gradient(90deg,var(--line) 0 9px,transparent 9px 17px);z-index:0}
.steps li{position:relative;z-index:1;text-align:center;padding:0 6px}
.sn{width:52px;height:52px;border-radius:50%;background:var(--warm-l);color:var(--warm);border:2px solid #fff;
  box-shadow:0 0 0 2px var(--warm-l);display:flex;align-items:center;justify-content:center;margin:0 auto 15px;
  font-family:var(--ui);font-weight:700;font-size:19px;transition:.28s}
.steps li:hover .sn{background:var(--warm);color:#fff;box-shadow:0 8px 18px rgba(226,154,60,.35)}
.steps h3{font-size:18px;margin-bottom:7px}
.steps p{font-size:14.5px;line-height:1.65;margin:0}


/* ---------- how can we help you ---------- */
.helpband{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}
.helpband-pic{position:relative;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-h)}
.helpband-pic img{width:100%;height:520px;object-fit:cover}
.helpband-pic .hb-tag{position:absolute;left:20px;bottom:20px;right:20px;background:rgba(255,255,255,.94);
  border-radius:18px;padding:16px 20px;backdrop-filter:blur(4px)}
.helpband-pic .hb-tag b{display:block;font-family:var(--ui);font-weight:700;color:var(--ink);font-size:15.5px}
.helpband-pic .hb-tag span{font-size:13.5px;color:var(--body);line-height:1.5;display:block;margin-top:2px}
.helpband .shead{margin-bottom:26px}

.helpgrid{display:grid;grid-template-columns:1fr;gap:11px}
.pill{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;
  border:2px solid var(--line);border-radius:999px;padding:14px 22px;font-size:15.5px;color:var(--body);
  transition:.24s;font-family:var(--ui)}
.pill b{color:var(--ink);font-weight:600}
.pill span{width:32px;height:32px;border-radius:50%;background:var(--teal-l);color:var(--teal-d);flex:none;
  display:flex;align-items:center;justify-content:center;transition:.24s}
.pill span svg{width:15px;height:15px}
.pill:hover{border-color:var(--navy);box-shadow:7px 7px 0 rgba(12,72,156,.10);transform:translateX(4px);color:var(--body)}
.pill:hover span{background:var(--teal);color:#fff}

/* ---------- stats band on the brand gradient ---------- */
.stats{background:var(--grad)}
.stats .stat b i{color:#A9CEFF}
.stats .stat span{color:#D3E3F5}


/* ================= INNER PAGES ================= */

/* ---------- page banner ---------- */
.pbanner{position:relative;background:var(--grad);padding:66px 0 82px;overflow:hidden;text-align:center}
.pbanner .wrap{position:relative;z-index:2}
.pbanner h1{color:#fff;font-size:44px;margin:0 0 12px;text-shadow:0 2px 16px rgba(0,0,0,.16)}
.pbanner .lede{color:#D6E6F7;font-size:17.5px;max-width:660px;margin:0 auto;line-height:1.7}
.crumb{display:flex;justify-content:center;align-items:center;gap:9px;flex-wrap:wrap;list-style:none;
  margin:0 0 16px;padding:0;font-size:13.5px;color:#A9C6E6;font-family:var(--ui);font-weight:500}
.crumb a{color:#A9C6E6}
.crumb a:hover{color:#fff}
.crumb li::after{content:"/";margin-left:9px;opacity:.5}
.crumb li:last-child{color:#fff}
.crumb li:last-child::after{display:none}

/* ---------- content + sidebar ---------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:54px;align-items:start}
.layout > *{min-width:0}
.side{position:sticky;top:78px;display:grid;gap:22px}
.wid{background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow)}
.wid h4{font-size:17px;margin-bottom:18px;padding-bottom:13px;border-bottom:1px solid var(--line);position:relative}
.wid h4::after{content:"";position:absolute;left:0;bottom:-2px;width:48px;height:4px;background:var(--teal)}
.wlist{list-style:none;padding:0;margin:0}
.wlist a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;
  font-size:14.5px;color:var(--body);border-bottom:1px dashed var(--line);transition:.2s}
.wlist li:last-child a{border-bottom:0}
.wlist a::after{content:"";width:6px;height:6px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:rotate(-45deg);flex:none;opacity:.5;transition:.2s}
.wlist a:hover{color:var(--navy);padding-left:6px}
.wlist a:hover::after{opacity:1}
.wlist li.on a{color:var(--navy);font-weight:700;font-family:var(--ui)}
.whours{width:100%;border-collapse:collapse}
.whours th,.whours td{text-align:left;padding:9px 0;font-size:14px;font-weight:400;border-bottom:1px dashed var(--line)}
.whours td{text-align:right;font-family:var(--ui);font-weight:600;color:var(--ink)}
.whours tr:last-child th,.whours tr:last-child td{border-bottom:0}
.whours tr.today th,.whours tr.today td{color:var(--navy);font-weight:700}
.wid-help{background:var(--grad);border:0;color:#fff;text-align:center;position:relative;overflow:hidden}
.wid-help h4{color:#fff;border-bottom-color:rgba(255,255,255,.25)}
.wid-help h4::after{background:#fff;opacity:.7}
.wid-help p{font-size:14.5px;color:#D6E6F7;margin-bottom:18px}
.wid-help .btn{width:100%;justify-content:center}
.wid-help .wm{opacity:.12;right:-56px}
.wid-help > *{position:relative;z-index:2}

/* ---------- article ---------- */
.prose{font-size:16.5px}
.prose > h2{font-size:29px;margin:44px 0 16px}
.prose > h2:first-child{margin-top:0}
.prose > h3{font-size:19px;margin:28px 0 10px}
.prose p{margin:0 0 18px}
.prose > ul{margin:0 0 20px;padding-left:0;list-style:none}
.prose > ul > li{position:relative;padding-left:30px;margin-bottom:11px}
.prose > ul > li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;border-radius:50%;
  background:var(--teal)}
.lead{font-size:19.5px;line-height:1.7;color:var(--ink);font-family:var(--ui);font-weight:500;margin-bottom:26px}
.panel{background:var(--tint);border-radius:var(--r);padding:30px 32px;margin:0 0 26px}
.panel h3{margin-top:0}
.panel > *:last-child{margin-bottom:0}
.panel-warm{background:var(--warm-l);border-left:4px solid var(--warm)}
.panel-teal{background:var(--teal-l);border-left:4px solid var(--teal)}

.checks{list-style:none;padding:0;margin:0}
.checks li{display:flex;gap:13px;align-items:flex-start;padding:11px 0;border-bottom:1px dashed var(--line);font-size:16px}
.checks li:last-child{border-bottom:0;padding-bottom:0}
.checks svg{width:19px;height:19px;color:var(--teal);flex:none;margin-top:5px}

.nsteps{list-style:none;padding:0;margin:0 0 26px;counter-reset:ns}
.nsteps li{position:relative;padding:0 0 26px 66px;counter-increment:ns}
.nsteps li::before{content:counter(ns);position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;
  background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-weight:700;font-size:17px}
.nsteps li::after{content:"";position:absolute;left:21px;top:52px;bottom:6px;width:2px;
  background:repeating-linear-gradient(180deg,var(--line) 0 6px,transparent 6px 12px)}
.nsteps li:last-child{padding-bottom:0}
.nsteps li:last-child::after{display:none}
.nsteps h3{font-size:18px;margin:9px 0 6px}
.nsteps p{font-size:15.5px;margin:0}

.faq{display:grid;gap:12px;margin-bottom:26px}
.faq details{border:2px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;transition:.2s}
.faq details[open]{box-shadow:var(--shadow);border-color:#CFDDEC}
.faq summary{cursor:pointer;padding:17px 52px 17px 22px;font-family:var(--ui);font-weight:600;font-size:16px;
  color:var(--ink);position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:23px;width:9px;height:9px;
  border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg);transition:.25s}
.faq details[open] summary::after{transform:rotate(225deg);top:26px}
.faq summary:hover{color:var(--navy)}
.faq .ans{padding:0 22px 20px;font-size:15.5px}
.faq .ans p:last-child{margin-bottom:0}

.relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:30px}
.rel{border:2px solid var(--line);border-radius:var(--r);padding:20px 20px;background:#fff;transition:.25s;
  display:flex;flex-direction:column;gap:9px}
.rel:hover{box-shadow:8px 8px 0 rgba(12,72,156,.10);transform:translateY(-4px);border-color:var(--navy)}
.rel b{font-family:var(--ui);font-size:15.5px;color:var(--ink)}
.rel span{font-size:13.5px;color:var(--body);line-height:1.55}

.endcta{position:relative;overflow:hidden;background:var(--grad);border-radius:var(--r);padding:38px 40px;
  color:#fff;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.endcta > *{position:relative;z-index:2}
.endcta h3{color:#fff;font-family:var(--head);font-size:25px;margin:0 0 6px}
.endcta p{color:#D6E6F7;margin:0;font-size:15.5px}
.endcta .wm{opacity:.11;right:-30px}
.endcta-b{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- services directory ---------- */
.grp{margin-bottom:52px}
.grp:last-child{margin-bottom:0}
.grp-h{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.grp-h h2{margin:0;font-size:26px}
.grp-h i{flex:1;height:3px;background:var(--line);display:block;border-radius:2px}
.grp-h span{font-size:13.5px;color:var(--muted);font-family:var(--ui);font-weight:600}

/* ---------- contact form ---------- */
.form{display:grid;gap:18px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field label{display:block;font-family:var(--ui);font-weight:600;font-size:14.5px;color:var(--ink);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;font-family:var(--text);font-size:15.5px;color:var(--ink);background:#fff;transition:.2s}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);outline:none;
  box-shadow:0 0 0 3px rgba(23,89,194,.15)}
.field .hint{font-size:13px;color:var(--muted);margin-top:6px;display:block}
.formnote{background:var(--warm-l);border-left:4px solid var(--warm);border-radius:0 12px 12px 0;padding:14px 18px;
  font-size:14px;color:var(--ink)}

/* ---------- contact info cards ---------- */
.icards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:52px}
.icard{background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:32px 28px;text-align:center;transition:.28s}
.icard:hover{box-shadow:10px 10px 0 rgba(12,72,156,.10);transform:translateY(-5px);border-color:var(--navy)}
.icard .fico{margin:0 auto 18px}
.icard h3{font-size:18px;margin-bottom:8px}
.icard p{font-size:15px;margin:0;line-height:1.65}
.icard a{color:var(--navy);font-family:var(--ui);font-weight:600}

/* ---------- emergency triage ---------- */
.triage{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-bottom:30px}
.tri{border:2px solid var(--line);border-left:6px solid var(--warm);border-radius:0 var(--r) var(--r) 0;
  padding:24px 26px;background:#fff}
.tri h3{font-size:18px;margin-bottom:12px}
.tri ol{margin:0;padding-left:20px;font-size:15px}
.tri ol li{margin-bottom:7px}
.tri ol li:last-child{margin-bottom:0}
.urgent{background:var(--grad);color:#fff;border-radius:var(--r);padding:32px 36px;margin-bottom:40px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden}
.urgent > *{position:relative;z-index:2}
.urgent h2{color:#fff;margin:0 0 6px;font-size:27px}
.urgent p{color:#D6E6F7;margin:0}
.urgent .wm{opacity:.12}

/* ---------- about / bio ---------- */
.bio{display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:start;margin-bottom:20px}
.bio-pic{border-radius:26px;overflow:hidden;box-shadow:var(--shadow-h);position:relative}
.bio-pic img{width:100%;height:340px;object-fit:cover;object-position:center 18%}

@media (min-width:1041px){ .hdr{top:-106px} }

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .nav > li > a{padding:34px 11px;font-size:15px}
  .doc{grid-template-columns:330px 1fr;gap:44px}
}
@media (max-width:1040px){
  h1{font-size:42px}h2{font-size:32px}
  .navbar{display:none}
  .burger{display:flex}
  .hdr-main .wrap{min-height:78px;gap:12px}
  .hdr-end .btn{display:none}
  .ht-txt{display:none}
  .brand img{height:48px}
  .rail a{width:58px;padding:12px 5px;font-size:10px}
  .slides{height:560px}
  .slide h1{font-size:42px}
  .feat-grid{grid-template-columns:1fr}
  .feat-box{border-right:0;border-bottom:1px solid var(--line)}
  .feat-box:last-child{border-bottom:0}
  .svc-grid,.tst-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:30px 22px}
  .helpband{grid-template-columns:1fr;gap:32px}
  .helpband-pic img{height:330px}
  .steps::before{display:none}
  .about,.doc{grid-template-columns:1fr;gap:44px}
  .doc-pic img{height:380px}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:36px 24px}
  .stat:nth-child(2){border-right:0}
  .visit{grid-template-columns:1fr}
  .map{min-height:330px}
  .fgrid{grid-template-columns:1fr 1fr;gap:38px}
  .layout{grid-template-columns:1fr;gap:46px}
  .side{position:static;grid-template-columns:repeat(2,1fr)}
  .bio{grid-template-columns:260px 1fr;gap:34px}
  .icards{grid-template-columns:1fr;gap:18px}
  .pbanner h1{font-size:34px}
}
@media (max-width:760px){
  .sec{padding:52px 0}
  h1{font-size:34px}h2{font-size:27px}h3{font-size:19px}
  body{font-size:15.5px}
  .wrap{padding:0 18px}
  .topbar .tb-l{display:none}
  .topbar .wrap{justify-content:center}
  .tb-r{gap:18px;font-size:13px}
  .slides{height:600px}
  .slide h1{font-size:33px}
  .slide p{font-size:16.5px}
  .slide .wrap{padding-bottom:150px}
  .slide::before{background:linear-gradient(180deg,rgba(8,32,68,.82) 0%,rgba(8,32,68,.9) 100%)}
  .slide-btns{width:100%}
  .slide-btns .btn{flex:1 1 100%;justify-content:center}
  .sl-arrow{display:none}
  .dots{bottom:132px}
  /* phone icon, centred logo, burger */
  .hdr-main .wrap{gap:10px;min-height:68px}
  .brand img{height:40px}
  .ht-ico{width:42px;height:42px}
  .promo .wrap{gap:10px;font-size:12px}
  .promo .tb-i:nth-of-type(2),.promo-sep{display:none}
  /* the rail becomes a bottom action bar */
  .rail{top:auto;bottom:0;left:0;right:0;transform:none;flex-direction:row;gap:0}
  .rail a{flex:1;width:auto;border-radius:0;flex-direction:row;gap:8px;padding:14px 6px;font-size:12px;
    border-top:2px solid rgba(255,255,255,.16)}
  .rail a:hover{width:auto}
  body{padding-bottom:54px}
  .feat{margin-top:-70px}
  .feat-box{padding:26px 24px}
  .shead{margin-bottom:30px}
  .svc-grid,.tst-grid{grid-template-columns:1fr;gap:20px}
  .steps{grid-template-columns:1fr;gap:22px}
  .pill{padding:13px 18px;font-size:15px}
  .helpband-pic img{height:240px}
  .helpband-pic .hb-tag{left:14px;right:14px;bottom:14px;padding:13px 16px}
  .wv{height:34px}
  .pq{font-size:17px;padding:18px 20px}
  .svc{padding:30px 26px}
  .ticks{grid-template-columns:1fr}
  .about-pics{padding-bottom:56px}
  .about-pics .p1 img{height:290px}
  .about-pics .p2{width:52%}
  .about-pics .p2 img{height:150px}
  .badge{padding:14px 20px}
  .badge b{font-size:27px}
  .stat-grid{gap:30px 16px}
  .stat b{font-size:36px}
  .stat{border-right:0}
  .doc-pic img{height:330px}
  .doc-pic .tag{left:0}
  .cta{padding:54px 0}
  .cta h2{font-size:27px}
  .cta .wrap{flex-direction:column;align-items:flex-start}
  .cta-btns .btn{flex:1 1 auto;justify-content:center}
  .hours{padding:32px 24px}
  .note{margin:-22px 0 30px}
  .layout{gap:38px}
  .side{grid-template-columns:1fr}
  .bio{grid-template-columns:1fr;gap:26px}
  .pbanner{padding:44px 0 58px}
  .pbanner h1{font-size:28px}
  .pbanner .lede{font-size:16px}
  .prose > h2{font-size:24px}
  .lead{font-size:17.5px}
  .panel{padding:24px 22px}
  .relgrid,.triage,.frow{grid-template-columns:1fr}
  .grp-h{flex-wrap:wrap;gap:8px}
  .grp-h i,.grp-h span{display:none}
  .nsteps li{padding-left:56px}
  .nsteps li::before{width:38px;height:38px;font-size:15px}
  .nsteps li::after{left:18px}
  .endcta,.urgent{padding:28px 24px}
  .endcta-b .btn{flex:1 1 auto;justify-content:center}
  .fgrid{grid-template-columns:1fr;gap:34px;padding-bottom:40px}
  .foot{padding-top:56px}
  .fbot{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  .rv{opacity:1;transform:none}
  .slide img{transform:none}
}

/* ---- call-to-action accent: blue ---- */
:root{--cta:#0B6BDE;--cta-d:#0856B5;--on-cta:#fff;--cta-glow:rgba(11,107,222,.32);--hello-bg:#0B6BDE;--hello-ink:#fff;--hero-em:#A9CEFF}


/* ================================================================
   MEDICAL-ONLY: this clinic gets its own header, hero, services band
   and booking widget. It must not read as the Dental site recoloured.
   ================================================================ */
:root{--sky:#E8F1FD;--scrim:8,26,60}

.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;color:var(--navy);padding:10px 16px;
  border-radius:10px;font-family:var(--ui);font-weight:700;box-shadow:var(--shadow-h)}
.skip:focus{top:12px}

/* ---- calls to action carry their own colour ---- */
.btn-teal{background:var(--cta);border-color:var(--cta);color:var(--on-cta)}
.btn-teal:hover{background:var(--cta-d);border-color:var(--cta-d);color:var(--on-cta);box-shadow:0 8px 20px var(--cta-glow)}
.btn-line:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.rail a:hover{background:var(--cta);color:var(--on-cta)}
/* On blue or dark grounds the primary button turns WHITE: a blue button on the blue band was 1.29:1. */
.mband .btn-teal,.pbanner .btn-teal,.cta-m .btn-teal,.wband .btn-teal,.wid-help .btn-teal{background:#fff;border-color:#fff;color:var(--navy-d)}
.mband .btn-teal:hover,.pbanner .btn-teal:hover,.cta-m .btn-teal:hover,.wband .btn-teal:hover,.wid-help .btn-teal:hover{background:var(--sky);border-color:var(--sky);color:var(--navy-x)}
/* The phone's fixed bar has no hover, so its Book button always wears the call-to-action colour. */
.rail a:nth-child(2){background:var(--cta);color:var(--on-cta)}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---- Hello Bar: the clinic's current announcements, above everything ---- */
.hello{background:var(--hello-bg);color:var(--hello-ink);font-family:var(--ui);font-size:14px;line-height:1.35;position:relative}
.hello .wrap{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding-top:6px;padding-bottom:6px}
.hello-msgs{display:grid;flex:1;min-width:0;text-align:center}
.hello-msg{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}
.hello-msg.on{opacity:1;visibility:visible;transition:opacity .5s ease}
.hello-msg span{font-weight:500}
.hello-msg a{color:var(--hello-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;padding:6px 2px}
.hello-msg a svg{width:14px;height:14px}
.hello-msg a:hover{color:var(--hello-ink);text-decoration-thickness:2px}
.hello-x{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--hello-ink);
  display:grid;place-items:center;cursor:pointer;opacity:.85}
.hello-x:hover{opacity:1;background:rgba(0,0,0,.12)}
.hello-x svg{width:18px;height:18px}
html.hello-off .hello{display:none}

/* ---- info bar: the exact address leads, and a tap opens directions ---- */
.promo{background:var(--sky);color:var(--navy-x);font-size:13.5px}
.promo .wrap{min-height:40px}
.promo .tb-i{color:var(--navy-x)}
.promo .tb-i svg{color:var(--teal-d)}
.promo .tb-addr{font-weight:700}
.promo .tb-addr span{text-decoration:underline;text-decoration-color:rgba(23,89,194,.35);text-underline-offset:3px}
.promo .tb-addr span span{text-decoration:none}
.promo .sm{display:none}
.promo-sep{background:rgba(11,43,99,.2)}
.promo a:hover{color:var(--navy)}

/* ---- header: logo left, nav right, one row. Burger on the LEFT when it shows. ---- */
.hdr{top:0}
.hdr-main .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;min-height:94px}
.brand{justify-self:auto}
.brand img{height:58px}
.navbar{background:transparent;position:static;flex:1;display:flex;justify-content:flex-end}
.hdr.stuck .navbar{box-shadow:none}
.hdr.stuck .hdr-main{box-shadow:0 6px 22px rgba(var(--scrim),.1)}
.navbar .wrap{display:block;padding:0;max-width:none}
.nav{gap:0}
.nav > li > a{color:var(--ink);text-transform:none;letter-spacing:0;font-size:16px;font-weight:600;padding:34px 17px}
.nav > li > a::after{left:17px;right:17px;bottom:26px;height:3px;background:var(--navy)}
.nav > li > a:hover{color:var(--navy)}
.nav > li.on > a{color:var(--navy)}
.sub{border-top-color:var(--navy)}
.sub a{text-transform:none}
.hdr-end{display:flex;align-items:center;gap:16px;flex:none}
.hdr-tel{display:flex;align-items:center;gap:11px}
.ht-txt{font-size:17px}
.ht-ico{background:var(--sky);color:var(--navy);border-color:var(--sky)}
.hdr-tel:hover .ht-ico{background:var(--navy);color:#fff;border-color:var(--navy)}
.burger{border:2px solid var(--line);order:-1}
.burger:hover{border-color:var(--navy)}

/* ---- the drawer: slides in from the left, where the burger is ---- */
.scrim{position:fixed;inset:0;z-index:88;background:rgba(var(--scrim),.52)}
.scrim[hidden]{display:none}
.drawer{position:fixed;top:0;left:0;bottom:0;z-index:90;width:min(86vw,360px);background:#fff;overflow-y:auto;
  display:flex;flex-direction:column;box-shadow:12px 0 40px rgba(var(--scrim),.24);
  transform:translateX(-102%);visibility:hidden;transition:transform .32s ease,visibility 0s .32s}
html.d-open{overflow:hidden}
html.d-open .drawer{transform:none;visibility:visible;transition:transform .32s ease}
.d-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 14px 20px;border-bottom:2px solid var(--line)}
.d-top img{height:38px;width:auto}
.d-x{width:46px;height:46px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;flex:none}
.d-x svg{width:20px;height:20px}
.d-nav{list-style:none;margin:0;padding:8px 0}
.d-nav > li{border-bottom:1px solid var(--line)}
.d-nav > li > a{display:block;padding:15px 22px;font-family:var(--ui);font-weight:600;font-size:17px;color:var(--ink)}
.d-nav > li > a[aria-current]{color:var(--navy);box-shadow:inset 4px 0 0 var(--navy)}
.d-has{display:grid;grid-template-columns:1fr auto;align-items:center}
.d-tog{width:52px;height:52px;border:0;background:none;color:var(--ink);cursor:pointer;display:grid;place-items:center}
.d-tog svg{width:18px;height:18px;transition:transform .25s}
.d-tog[aria-expanded=true] svg{transform:rotate(180deg)}
.d-sub{grid-column:1/-1;list-style:none;margin:0;padding:0 0 10px;background:var(--tint)}
.d-sub a{display:block;padding:11px 22px 11px 36px;font-size:15.5px;color:var(--body)}
.d-cta{display:grid;gap:10px;padding:20px 20px 12px}
.d-cta .btn{justify-content:center}
.d-addr{display:flex;gap:12px;align-items:flex-start;margin:6px 20px 24px;padding:14px 16px;border-radius:14px;
  background:var(--sky);color:var(--navy-x);font-size:14px;line-height:1.45}
.d-addr svg{width:20px;height:20px;flex:none;color:var(--navy);margin-top:2px}
.d-addr b{display:block;font-family:var(--ui)}

/* ---- hero: the photograph crossfades between patients, the words stay ---- */
.mhero{position:relative;overflow:hidden;background:var(--navy-x);min-height:600px;display:flex;align-items:center}
.mh-pics{position:absolute;inset:0;z-index:0}
.mhero .mh-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pd);opacity:0;transition:opacity 1.4s ease}
.mhero .mh-img.on{opacity:1}
.mhero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(var(--scrim),.5) 0%,rgba(var(--scrim),.62) 50%,rgba(var(--scrim),.86) 100%)}
.mhero .wrap{position:relative;z-index:2;text-align:center;padding-top:74px;padding-bottom:124px}
.mhero h1{color:#fff;font-size:56px;margin:0 auto 18px;max-width:940px;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.mhero h1 em{font-style:normal;color:var(--hero-em)}
.mhero p{color:#E3ECF8;font-size:19px;max-width:660px;margin:0 auto 30px}
.mact{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:900px;margin:0 auto}
.mact a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  background:rgba(255,255,255,.11);border:2px solid rgba(255,255,255,.34);border-radius:16px;
  padding:20px 12px;color:#fff;font-family:var(--ui);font-weight:600;font-size:15px;transition:.24s;
  backdrop-filter:blur(3px);text-align:center;line-height:1.3}
.mact a svg{width:24px;height:24px}
.mact a:hover{background:#fff;color:var(--navy);border-color:#fff;transform:translateY(-3px)}
.mact a.pri{background:#fff;border-color:#fff;color:var(--navy-d)}
.mact a.pri:hover{background:var(--sky);color:var(--navy-x);border-color:var(--sky)}

/* ---- feature boxes each end in their own next step ---- */
.fico{background:var(--sky);color:var(--navy)}
.feat-box:hover .fico{background:var(--navy);color:#fff}
.feat-box .more{margin-top:10px;font-size:14.5px;padding:4px 0}

/* ---- services: photo cards drifting in opposite directions on a blue band ---- */
.mband{background:var(--navy);position:relative;overflow:hidden;padding:66px 0 74px}
.mband .wrap{position:relative;z-index:2}
.mband .shead h2,.mband .shead p{color:#fff}
.mband .shead p{color:#DCE8F8}
.mband .rule i{background:rgba(255,255,255,.3)}
.mband .rule b{color:#A9CEFF}
.mrow-wrap{overflow:hidden;padding:6px 0 4px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mrow{display:flex;width:max-content;animation:mdrift 78s linear infinite}
.mrow.r2{animation:mdrift2 92s linear infinite;margin-top:16px}
.mrow-wrap:hover .mrow,.mrow-wrap:focus-within .mrow{animation-play-state:paused}
@keyframes mdrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mdrift2{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mcard{position:relative;display:block;width:262px;height:300px;flex:0 0 262px;margin-right:16px;
  border-radius:18px;overflow:hidden;background:var(--navy-d);box-shadow:0 12px 30px rgba(0,0,0,.22)}
.mcard img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.mcard:hover img,.mcard:focus-visible img{transform:scale(1.06)}
.mcard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--scrim),0) 36%,rgba(var(--scrim),.6) 68%,rgba(var(--scrim),.94) 100%)}
.mcard .cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:18px}
.mcard .cap b{display:block;font-family:var(--head);font-weight:800;font-size:19px;line-height:1.25;color:#fff}
.mcard .cap span{display:block;font-size:14px;color:#DCE8F8;margin-top:4px;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .4s ease,opacity .4s ease}
.mcard:hover .cap span,.mcard:focus-visible .cap span{max-height:70px;opacity:1}
.mband-foot{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ---- booking widget ---- */
.bookrow{display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:start}
.booker{background:#fff;border:2px solid var(--line);border-radius:20px;padding:28px 30px 24px;
  box-shadow:0 18px 50px rgba(var(--scrim),.1)}
.booker h3{text-align:center;font-size:23px;margin-bottom:18px}
.bk-l{display:block;font-family:var(--ui);font-weight:600;color:var(--navy);font-size:15.5px;margin:16px 0 8px}
.bk-l select{width:100%;font:inherit;font-size:16px;padding:13px 15px;border:2px solid var(--line);
  border-radius:12px;background:#fff;color:var(--ink);margin-top:8px;font-weight:400}
.bk-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.bk-cal{position:relative;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--teal-d);
  font-size:14.5px;cursor:pointer;margin:0}
.bk-cal svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bk-cal span{text-decoration:underline;text-underline-offset:3px}
.bk-cal button{display:inline-flex;align-items:center;gap:6px;background:none;border:0;font:inherit;
  font-weight:600;color:var(--teal-d);cursor:pointer;padding:9px 0;margin:-9px 0}
.bk-cal input{position:absolute;left:0;top:100%;width:1px;height:1px;opacity:0;pointer-events:none;margin:0;padding:0;border:0}
.bk-daywrap{display:grid;grid-template-columns:34px 1fr 34px;align-items:stretch;border-bottom:2px solid var(--line);margin-bottom:6px}
.bk-days{display:flex;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.bk-days::-webkit-scrollbar{display:none}
.bk-days button{flex:1 0 auto;min-width:124px;background:none;border:0;border-bottom:3px solid transparent;
  padding:12px 14px;font:inherit;font-size:14.5px;color:var(--muted);cursor:pointer;text-align:center;
  line-height:1.3;scroll-snap-align:start;font-family:var(--ui)}
.bk-days button b{display:block;color:var(--navy);font-weight:700}
.bk-days button[aria-selected=true]{border-bottom-color:var(--navy)}
.bk-days button.off b{color:var(--muted)}
.bk-arrow{background:none;border:0;color:var(--navy);cursor:pointer;display:grid;place-items:center;padding:0}
.bk-arrow:hover{color:var(--teal-d)}
.bk-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bk-group{margin-top:16px}
.bk-group > span{display:block;text-align:center;font-family:var(--ui);font-weight:600;color:var(--muted);
  font-size:14.5px;margin-bottom:10px}
.bk-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.bk-grid button{font:inherit;font-family:var(--ui);font-weight:600;font-size:14.5px;padding:11px 4px;border:0;
  border-radius:10px;background:var(--sky);color:var(--navy);cursor:pointer;font-variant-numeric:tabular-nums;transition:.18s}
.bk-grid button:hover{background:#D2E3FB}
.bk-grid button[aria-pressed=true]{background:var(--navy);color:#fff}
.bk-grid .more{background:none;text-decoration:underline;text-underline-offset:3px;color:var(--teal-d)}
.bk-empty{text-align:center;color:var(--muted);padding:26px 10px;font-size:15.5px}
.bk-details{margin-top:22px;padding-top:22px;border-top:2px solid var(--line)}
.bk-picked{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--sky);border-radius:12px;
  padding:12px 16px;margin-bottom:16px;font-size:15.5px}
.bk-picked span{color:var(--muted)}
.bk-picked b{color:var(--navy);font-weight:700;font-family:var(--ui)}
.bk-change{margin-left:auto;background:none;border:0;font:inherit;font-weight:600;color:var(--teal-d);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.bk-note{margin-top:18px;font-size:14px;color:var(--muted);text-align:center}

/* scroll-padding on the page itself, not scroll-margin on the targets: Tab moves focus to links
   and buttons, which mostly have no id, and the browser parked them under the sticky header. This
   covers both, so the [id] rule inherited from the Dental sheet is turned off. */
html{scroll-padding-top:110px;scroll-padding-bottom:28px}
[id],main [id]{scroll-margin-top:0}

/* ---- "sick today? walk in": the words beside the clinic's real front door ---- */
.wband{position:relative;overflow:hidden;background:var(--navy-x);min-height:520px;display:flex;align-items:center}
.wband-pic{position:absolute;top:0;right:0;bottom:0;width:56%}
.wband-pic img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.wband-pic::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--navy-x) 0%,rgba(var(--scrim),0) 22%)}
.wband .wrap{position:relative;z-index:2;width:100%;padding-top:84px;padding-bottom:84px}
.wband-in{max-width:44%}
.wband h2{color:#fff;font-size:44px;margin-bottom:12px}
.wband p{color:#E3ECF8;font-size:18px;margin-bottom:26px}

/* ---- pre-footer call to action, on every page ---- */
.cta-m{padding:70px 0}
.cta-m img.bg{opacity:1;object-position:center 30%}
.cta-m::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(var(--scrim),.94) 0%,rgba(var(--scrim),.84) 55%,rgba(var(--scrim),.55) 100%)}
.cta-m h2{font-size:34px;max-width:620px}
.cta-m p{color:#DCE8F8}

/* ---- a call to action between sections of an inner page ---- */
.midcta{display:flex;align-items:center;justify-content:space-between;gap:18px 26px;flex-wrap:wrap;
  background:var(--sky);border-left:5px solid var(--navy);border-radius:0 var(--r) var(--r) 0;padding:22px 26px;margin:6px 0 40px}
.midcta b{display:block;font-family:var(--ui);color:var(--ink);font-size:18px;margin-bottom:2px}
.midcta span{font-size:15px;color:var(--body)}
.midcta-b{display:flex;gap:10px;flex-wrap:wrap}
.midcta-b .btn{padding:12px 22px;font-size:14.5px}
.prose .btnrow{margin:6px 0 10px}

/* ---- page banner actions ---- */
.pb-acts{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ---- FAQ on every page: heading and a "still have a question" box beside the answers ---- */
.faqsec{background:var(--tint);position:relative}
.faqsec::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(23,89,194,.06) 1px,transparent 1px);background-size:24px 24px}
.faqsec > *{position:relative;z-index:1}
.faqgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto 1fr;
  grid-template-areas:"t list" "ask list";gap:22px 56px;align-items:start}
.faq-t{grid-area:t;margin:0}
.faqgrid .faq{grid-area:list}
.faqgrid .faq-ask{grid-area:ask}
.faq-ask{background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:22px 24px}
.faq-ask b{display:block;font-family:var(--ui);color:var(--ink);font-size:17px}
.faq-ask p{font-size:15px;margin:4px 0 16px}
.faq-ask-b{display:flex;gap:10px;flex-wrap:wrap}
.faqgrid .faq{margin:0}
.faq summary::after{border-color:var(--navy)}
.faq details[open]{border-color:#C9D9F0}
.prose .faq-ask{margin:0 0 26px}

/* ---- photo service cards (services page) ---- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pcard{background:#fff;border:2px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:.28s}
.pcard:hover{box-shadow:10px 10px 0 rgba(var(--scrim),.08);transform:translateY(-5px);border-color:var(--navy)}
.pcard-img{height:196px;overflow:hidden;flex:none}
.pcard-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .5s ease}
.pcard:hover .pcard-img img{transform:scale(1.06)}
.pcard-b{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.pcard-b h3{font-size:19px;margin-bottom:4px}
.pcard-b .sub{display:block;font-size:13px;color:var(--teal-d);font-family:var(--ui);font-weight:700;
  letter-spacing:.02em;margin-bottom:10px}
.pcard-b p{font-size:14.5px;margin:0 0 14px;line-height:1.62}
.pcard-b .more{margin-top:auto;padding:6px 0;color:var(--cta-d)}
.pcard-b .more:hover{color:var(--navy)}

/* ---- contact cards get their own button ---- */
.icard .btn{margin-top:18px}
/* the base theme colours every link in a card navy, which put navy type on the orange button (1.39:1) */
.icard .btn-teal,.icard .btn-teal:hover{color:var(--on-cta)}
.icard .btn-line:hover{color:#fff}
/* the badge label was #9FC0E8 on the blue badge: 3.45:1 */
.badge span{color:#DCE8F8}
.icard:hover{box-shadow:10px 10px 0 rgba(var(--scrim),.08)}

/* ---- the team: professional photographs to come ---- */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,280px));justify-content:center;gap:28px}
.tm{margin:0}
.tm-pic{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:var(--sky)}
.tm-pic img{width:100%;height:100%;object-fit:cover}
.tm-wait .tm-pic{background:linear-gradient(160deg,var(--sky) 0%,#D5E4FA 100%);border:2px solid #CCDCF3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.tm-wait .tm-pic img.tm-mark{width:42%;height:auto;opacity:.22}
.tm-wait .tm-pic span{font-family:var(--ui);font-weight:600;font-size:14px;color:var(--navy)}
.tm figcaption{padding:16px 4px 0;text-align:center}
.tm figcaption b{display:block;font-family:var(--ui);color:var(--ink);font-size:18px}
.tm figcaption span{display:block;font-size:14.5px;color:var(--body)}
.tm figcaption i{display:block;font-style:normal;font-size:13.5px;color:var(--muted);margin-top:2px}
.bio .tm{max-width:340px}
.prose > ul.checks > li{padding-left:0}
.prose > ul.checks > li::before{display:none}
.storefig{margin:0 0 22px}
.storefig img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.storefig figcaption{font-size:14.5px;color:var(--muted);margin-top:10px}

/* ---- medical responsive ---- */
@media (max-width:1180px){
  .nav > li > a{padding:34px 12px}
  .nav > li > a::after{left:12px;right:12px}
}
@media (max-width:1040px){
  .navbar{display:none}
  .hdr-main .wrap{min-height:78px;gap:12px;justify-content:flex-start}
  .brand{margin-right:auto}
  .ht-txt{display:none}
  .hdr-end .btn{display:inline-flex;padding:11px 20px;font-size:14px}
  .mhero{min-height:520px}
  .mhero h1{font-size:40px}
  .mact{grid-template-columns:repeat(2,1fr);max-width:520px}
  .bookrow{grid-template-columns:1fr;gap:34px}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .faqgrid{grid-template-columns:1fr;grid-template-areas:"t" "list" "ask";gap:22px}
  .wband h2{font-size:36px}
  .wband-in{max-width:48%}
}
@media (max-width:760px){
  .hello{font-size:13px}
  .hello .wrap{padding-right:8px;min-height:40px}
  .hello-msgs{text-align:left;position:relative}
  /* one line per offer on a phone: the whole message is the link, the CTA words go to screen readers */
  .hello-msg a{position:static;padding:0}
  .hello-msg a::after{content:"";position:absolute;inset:-6px 0}
  .hello-cta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* "Are you open right now" is the first thing a sick person asks, and on a phone this bar was
     the address alone - the live line was the one thing here a Google listing cannot do. It now
     takes the first row, with the full address (which the owner asked for verbatim) under it. */
  .promo .wrap{min-height:38px;justify-content:flex-start;font-size:12.5px;flex-wrap:wrap;
    row-gap:1px;padding-top:5px;padding-bottom:5px;line-height:1.5}
  .promo .tb-mail,.promo .promo-sep{display:none}
  /* the Dental sheet hides the second .tb-i on a phone (`.promo .tb-i:nth-of-type(2)`), which is
     this one, and that rule is a class+pseudo-class - it needs the same weight to beat it */
  .promo .tb-i.tb-open{display:inline-flex;order:-1;flex:1 0 100%;font-weight:600}
  .promo .lg{display:none}.promo .sm{display:inline}
  .hdr-main .wrap{min-height:68px;gap:10px}
  .brand img{height:40px}
  .hdr-end .btn{display:none}
  /* plus the fixed Call/Book/Map bar along the bottom */
  html{scroll-padding-top:84px;scroll-padding-bottom:92px}
  .mhero{min-height:0}
  .mhero .wrap{padding-top:52px;padding-bottom:104px}
  .mhero h1{font-size:31px}
  .mhero p{font-size:16.5px}
  .mact{grid-template-columns:1fr;gap:10px;max-width:none}
  .mact a{flex-direction:row;justify-content:flex-start;gap:12px;padding:15px 18px;text-align:left}
  .mband{padding:48px 0 54px}
  .mcard{width:216px;flex-basis:216px;height:262px}
  .mband-foot .btn{flex:1 1 100%;justify-content:center}
  .booker{padding:22px 18px 20px;border-radius:16px}
  .bk-grid{grid-template-columns:repeat(3,1fr)}
  .bk-daywrap{grid-template-columns:28px 1fr 28px}
  .pgrid{grid-template-columns:1fr}
  .wband{display:block;min-height:0}
  .wband-pic{position:relative;width:100%;aspect-ratio:3/2}
  .wband-pic::before{background:linear-gradient(180deg,rgba(var(--scrim),0) 60%,var(--navy-x) 100%)}
  .wband .wrap{padding-top:18px;padding-bottom:56px}
  .wband-in{max-width:none}
  .wband h2{font-size:30px}
  .wband p{font-size:16.5px}
  .wband .cta-btns .btn,.cta-m .cta-btns .btn,.btnrow .btn{flex:1 1 100%;justify-content:center}
  .cta-m{padding:56px 0}
  .cta-m::before{background:rgba(var(--scrim),.86)}
  .cta-m h2{font-size:26px}
  .cta-btns{width:100%}
  .midcta{padding:20px 20px;margin-bottom:34px}
  .midcta-b{width:100%}
  .midcta-b .btn{flex:1 1 100%;justify-content:center}
  .pb-acts .btn{flex:1 1 100%;justify-content:center}
  .faq-ask-b .btn{flex:1 1 auto;justify-content:center}
  .team{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .tm-pic{border-radius:16px}
  .tm-wait .tm-pic span{font-size:12.5px;text-align:center;padding:0 10px}
  .tm figcaption b{font-size:16px}
  .tm figcaption span{font-size:13.5px}
  .bio .tm{max-width:300px;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){
  .hello-msg,.mhero .mh-img,.drawer{transition:none!important}
}


/* ================================================================
   REVIEW PASS, 2026-09-19. Fixes found by reading every page at 390
   and 1440 and driving the site in a browser. Later rules win, so
   this block overrides the ones above on purpose.
   ================================================================ */

/* The header gained a Book button, and the full nav no longer fits at 1041-1159: it pushed the
   button off the right edge and the page scrolled sideways. The drawer tier now runs to 1200. */
@media (max-width:1200px){
  .navbar{display:none}
  .burger{display:flex}
  .hdr-main .wrap{min-height:82px;gap:12px;justify-content:flex-start}
  .brand{margin-right:auto}
  .ht-txt{display:none}
  .hdr-end .btn{display:inline-flex;padding:11px 20px;font-size:14px}
}

/* ---- headings do not leave a single word on the last line ---- */
h1,h2,.pbanner .lede,.mhero p,.cta-m p{text-wrap:balance}
.cta-m h2{max-width:700px}
/* a wide park scene: a short band cannot hold a close-up without cutting a face in half */
.cta-m img.bg{object-position:center 46%}

/* ---- the skip link's shadow showed as a smudge over the hello bar ---- */
.skip{box-shadow:none}
.skip:focus{box-shadow:var(--shadow-h)}

/* ---- the dropdown caret sat below the label like a stray mark ---- */
.nav .caret{display:flex;width:12px;height:12px;opacity:.75}
.nav .caret svg{display:block;width:100%;height:100%;stroke-width:2.4}

/* ---- tap targets: WCAG 2.5.8 wants 24px, and a thumb wants more ---- */
.flinks a{padding:9px 0}
.fcon a{display:inline-block;padding:5px 0}
.crumb a{display:inline-block;padding:9px 2px}
.feat-box .more{padding:9px 0}
.bk-arrow{min-width:40px}
.hello-x{width:44px;height:44px}
.promo .tb-addr{min-height:40px}

/* ---- info bar: the email crowded the bar into two lines below 1040 ---- */
@media (max-width:1040px){
  .promo .tb-mail,.promo .promo-sep ~ .promo-sep{display:none}
}
@media (max-width:374px){ .promo{font-size:12px} }

/* ---- the booker ---- */
.bk-days button{flex:0 0 25%;min-width:0}
.bk-more{display:block;width:100%;margin-top:10px;padding:11px;border:2px solid var(--line);border-radius:10px;
  background:#fff;color:var(--teal-d);font:inherit;font-family:var(--ui);font-weight:600;cursor:pointer}
.bk-more:hover{border-color:var(--navy);color:var(--navy)}
.book-notes{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:20px}
.book-notes li{padding-left:18px;border-left:3px solid var(--sky)}
.book-notes h3{font-size:17px;margin-bottom:4px}
.book-notes p{font-size:15.5px;margin:0}
@media (min-width:1041px){ .bookrow > .book-intro{position:sticky;top:120px} }

/* ---- the sidebar slid under the sticky header ---- */
.side{top:118px}

/* ---- a photograph and a distinct emergency note on the Patients page ---- */
.prosefig{margin:0 0 28px}
.prosefig img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 34%;border-radius:var(--r)}
.panel-alert{background:#FFF1EE;border-left:4px solid #C0392B}

/* ---- the FAQ prompt is one line now, not a second pair of buttons above the closing band ---- */
.faq-ask{grid-area:ask;margin:0;font-size:15.5px;color:var(--body)}
.faq-ask a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.prose .faq-ask{margin:0 0 26px}

/* ---- the feature boxes ended flush against the blue band ---- */
.feat + .mband{margin-top:64px}

/* ---- the team: a portrait when there is one, otherwise a card that still says something ---- */
.tm-txt{background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:26px 24px;
  box-shadow:var(--shadow)}
.tm-txt figcaption{padding:0;text-align:left}
.tm-txt figcaption b{font-size:19px}
.tm-txt figcaption span{color:var(--teal-d);font-family:var(--ui);font-weight:600;font-size:14px;margin-top:2px}
.tm-txt figcaption p{font-size:15px;margin:12px 0 0;line-height:1.6}
.bio-solo{display:block}
.bio-solo .prose{max-width:820px}
.updated{font-size:14.5px;color:var(--muted);margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}

/* ---- the hero: the words sit BELOW the faces, not across them ----
   A centred headline in the middle of a full-bleed photo landed on every face. The text block is
   anchored to the bottom and the scrim is light at the top, so the people read and the words stay
   legible over the darker foot of the picture. */
.mhero{min-height:720px;align-items:flex-end}
.mhero .wrap{padding-top:170px;padding-bottom:120px}
.mhero::before{background:linear-gradient(180deg,rgba(var(--scrim),.22) 0%,rgba(var(--scrim),.42) 42%,rgba(var(--scrim),.86) 100%)}

/* ---- the hero photograph changes, and now says so ---- */
/* Centred under the four action buttons. Against the right edge they sat beside the fixed
   CALL/BOOK/MAP rail and were missed entirely. Clear of the feature boxes, which overlap the foot
   of the hero by 92px. */
.mh-dots{display:flex;gap:2px;align-items:center;justify-content:center;width:max-content;
  margin:22px auto 0;background:rgba(var(--scrim),.34);border-radius:999px;padding:0 4px;backdrop-filter:blur(2px)}
.mh-dots .dot{width:34px;height:34px;padding:14px 11px;border:0;background:rgba(255,255,255,.55);
  background-clip:content-box;border-radius:999px;cursor:pointer;transition:.22s}
.mh-dots .dot:hover{background:rgba(255,255,255,.85);background-clip:content-box}
.mh-dots .dot[aria-current]{background:#fff;background-clip:content-box;padding-left:5px;padding-right:5px;width:40px}

/* ---- watermark and alignment slips found at 1440 ---- */
.wid-help h4{text-align:center}
.wid-help h4::after{left:50%;transform:translateX(-50%)}
.wid-help .wm{opacity:.07;right:-80px}
.pbanner .wm{opacity:.06;right:-130px}

/* ---- headings that changed level for document structure keep their size ---- */
.feat-box h2{font-size:18px;margin-bottom:5px;font-family:var(--ui);font-weight:700;letter-spacing:-.01em;line-height:1.25}
.icard h2{font-size:18px;margin-bottom:8px;font-family:var(--ui);font-weight:700;letter-spacing:-.01em;line-height:1.25}
.wid h3{font-size:17px;margin-bottom:18px;padding-bottom:13px;border-bottom:1px solid var(--line);position:relative}
.wid h3::after{content:"";position:absolute;left:0;bottom:-2px;width:48px;height:4px;background:var(--navy)}
.wid-help h3{color:#fff;border-bottom-color:rgba(255,255,255,.25);text-align:center}
.wid-help h3::after{background:#fff;opacity:.7;left:50%;transform:translateX(-50%)}
.foot .fh{color:#fff;font-size:17px;margin-bottom:22px;position:relative;padding-bottom:14px;
  font-family:var(--ui);font-weight:700;letter-spacing:-.01em;line-height:1.25}
.foot .fh::after{content:"";position:absolute;left:0;bottom:0;width:42px;height:4px;background:var(--teal)}

/* ---- the info bar's own links, and the address block on the home page ---- */
.promo a.tb-i{min-height:34px;display:inline-flex;align-items:center}
.wid-help a[href*="book"]{display:inline-block;padding:8px 0}
.addr a{display:inline-flex;align-items:center;min-height:32px}

/* ---- footer contact lines were 14-20px tall to tap ---- */
.fcon a{display:inline-flex;align-items:center;min-height:36px;padding:4px 0}
.fbot a{display:inline-block;padding:9px 0}

/* ---- footer: the reversed lockup, no white tile ---- */
.flogo{display:block;height:54px;width:auto;background:none;padding:0;border-radius:0;margin-bottom:20px}

@media (max-width:1040px){
  .feat + .mband{margin-top:48px}
}

@media (max-width:760px){
  /* the Book button does not fit beside the burger, the logo and the phone icon */
  .hdr-end .btn{display:none}

  /* The hero photograph is a strip above the words. Full-bleed landscape frames cropped to a
     phone's tall box became foreheads, and the headline sat across the faces. */
  .mhero{display:block;min-height:0}
  .mhero::before{display:none}
  .mh-pics{position:relative;width:100%;aspect-ratio:3/2}
  .mhero .mh-img{object-position:var(--pm)}
  /* On a phone they sit on the photo. The positioning context is .mhero .wrap, which starts just
     below the strip, so -52px lifts them back onto the bottom of the picture. */
  .mh-dots{position:absolute;top:-52px;right:8px;margin:0;z-index:3}
  .mh-pics::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:90px;z-index:2;
    background:linear-gradient(180deg,rgba(var(--scrim),0),var(--navy-x))}
  .mhero .wrap{padding-top:10px;padding-bottom:104px;text-align:left}
  .mhero h1,.mhero p{margin-left:0;margin-right:0;text-align:left}
  .feat + .mband{margin-top:36px}

  /* The marquee never paused on a touch screen and clipped its labels. The rows are swiped
     instead, one card at a time, with the descriptions always visible. */
  .mrow-wrap{-webkit-mask-image:none;mask-image:none;overflow:visible}
  .mrow{animation:none!important;width:auto;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:0 18px 10px;scrollbar-width:none}
  .mrow::-webkit-scrollbar{display:none}
  .mrow.r2{margin-top:12px}
  .mcard{scroll-snap-align:center}
  .mcard[aria-hidden="true"]{display:none}
  .mcard .cap span{max-height:none;opacity:1}
  .mcard::after{background:linear-gradient(180deg,rgba(var(--scrim),0) 26%,rgba(var(--scrim),.66) 58%,rgba(var(--scrim),.95) 100%)}

  /* the longer service groups become compact rows: 18 identical photo cards was 15 screens */
  .pgrid-row .pcard{display:grid;grid-template-columns:104px 1fr;align-items:stretch}
  .pgrid-row .pcard-img{height:100%;min-height:118px}
  .pgrid-row .pcard-b{padding:14px 16px 16px}
  .pgrid-row .pcard-b p{font-size:14px;margin-bottom:10px}

  /* contact cards as rows, not three tall centred blocks */
  .icards{gap:10px;margin-bottom:36px}
  .icard{display:grid;grid-template-columns:52px 1fr;gap:6px 14px;text-align:left;align-items:center;padding:16px}
  .icard .fico{width:52px;height:52px;margin:0;grid-row:span 2}
  .icard .fico svg{width:24px;height:24px}
  .icard h3{font-size:16.5px;margin:0;align-self:end}
  .icard p{font-size:14px;align-self:start}
  .icard .btn{grid-column:2;margin-top:4px}

  .team{grid-template-columns:1fr;gap:14px}
  .tm-txt{padding:20px 18px}
  .tm-txt figcaption p{font-size:14.5px}

  /* the booker on a phone */
  .bk-days button{flex:0 0 50%}

  /* the footer was 1.6 screens: the two link lists sit side by side */
  .fgrid{grid-template-columns:1fr 1fr;gap:28px 18px}
  .fgrid > :first-child,.fgrid > :last-child{grid-column:1/-1}
  .flogo{height:46px}
  .fbot{gap:6px}
}

/* ---- landscape phone: the hello bar, the info bar and a 68px header filled the screen ---- */
@media (max-height:500px) and (orientation:landscape){
  .hello,.promo{display:none}
  .hdr-main .wrap{min-height:54px}
  .brand img{height:32px}
  .rail a{padding:8px 6px;font-size:10px}
  .mh-pics{aspect-ratio:auto;height:52vh}
  .mhero .wrap{padding-top:8px;padding-bottom:64px}
}

@media (prefers-reduced-motion:reduce){
  /* the inherited reset only shortened the animation, so the marquee restarted every frame and
     jumped instead of stopping */
  .mrow,.mrow.r2{animation:none!important;transform:none!important}
}

/* ---- print: people print the hours and the address ---- */
@media print{
  .hello,.promo,.hdr,.drawer,.scrim,.rail,.mh-dots,.mrow-wrap,.cta,.cta-m,.wband,.booker,
  .pb-acts,.btnrow,.midcta,.faq-ask,.map,.skip,.wm,.wv{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  a{color:#000;text-decoration:underline}
  /* printing the target of a link is useful in an article, but a maps URL is 100 characters of noise */
  .prose a[href^="http"]:not([href*="google.com/maps"])::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
  .pbanner{background:#fff!important;padding:0 0 12pt}
  .pbanner h1,.pbanner .lede,.crumb,.crumb a,.crumb li:last-child{color:#000!important;text-shadow:none}
  .wid-help{background:#fff!important;border:1px solid #999}
  .wid-help h3,.wid-help p,.wid-help a{color:#000!important}
  .sec{padding:12pt 0}
  .mhero{min-height:0}
  .mhero .mh-pics{display:none}
  .mhero .wrap{padding:0}
  .mhero h1,.mhero p{color:#000;text-align:left}
  .foot{background:#fff;color:#000;padding:12pt 0}
  .foot .fh,.foot a,.foot p,.fcon a,.fbot{color:#000}
  .faq details{border:1px solid #999}
  .faq details:not([open]) .ans{display:block}   /* print every answer, not just the open one */
}


/* =========================================================================
   ACCESSIBILITY PASS, 2026-09-19. Everything here came out of keyboard and
   screen-reader testing of the built pages.
   ========================================================================= */

/* ---- a form that fails has to SAY so (WCAG 3.3.1, 3.3.3) ---- */
/* Until now an empty required field only moved focus: nothing changed on screen and nothing was
   announced, so on a phone it looked as though the button was dead. */
.req{font-family:var(--ui);font-weight:500;font-size:13px;color:var(--muted);letter-spacing:0}
.err{display:block;margin-top:6px;font-size:14.5px;font-weight:600;line-height:1.35;color:#B3261E}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:#B3261E;background:#FFF7F6}
.field input[aria-invalid="true"]:focus,.field textarea[aria-invalid="true"]:focus{border-color:#B3261E}
.formerr{margin:0 0 16px;padding:12px 15px;border:2px solid #B3261E;border-radius:12px;
  background:#FFF3F1;color:#8A1C16;font-weight:600;font-size:15px;line-height:1.5}
.formerr[hidden]{display:none}

/* ---- a link inside a sentence cannot be told apart by colour alone (WCAG 1.4.1) ---- */
/* Navy on grey body text is under 3:1, so these carry an underline. Buttons, cards and nav links
   are not inline in a sentence and are left alone. */
/* Paragraphs and definitions only, NOT list items: every link in a list of links was matching this
   and the services index came out fully underlined. A link inside a sentence is the case this rule
   exists for. */
main :is(p,dd) a:not([class]),.formnote a,.formok a,.faq .ans a{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.crumb a{text-decoration:none}

/* ---- the focus ring has to be visible on the dark bands too (WCAG 1.4.11) ---- */
/* The azure ring is 3.9:1 on white but nearly invisible on the blue sections. */
.mhero :focus-visible,.mband :focus-visible,.wband :focus-visible,.cta :focus-visible,
.stats :focus-visible,.pbanner :focus-visible,.foot :focus-visible,.hello :focus-visible{
  outline-color:#fff}

/* ---- a stop for the two things that move on their own, without a button on the design ---- */
/* WCAG 2.2.2 wants a way to stop anything that starts moving by itself. The owner did not want a
   pause button sitting on the hero photograph, so the control is invisible until a keyboard reaches
   it - and the gestures people actually make already stop both: pressing a dot stops the hero for
   good, hovering the service rows stops them, and on a phone neither animates at all. */
.a11y-stop{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;background:none;color:#fff}
.a11y-stop:focus-visible{position:static;width:auto;height:auto;clip:auto;overflow:visible;
  min-height:34px;padding:9px 16px;background:#fff;color:var(--navy-x);border-radius:999px;
  font-family:var(--ui);font-size:13px;font-weight:700;cursor:pointer;outline-offset:3px}

/* ---- and somewhere for focus to land once the drift is stopped ---- */
/* Only the duplicated cards are on screen while the rows drift; the ones a keyboard reaches are
   the originals, which may be entirely off-screen. Stopping turns each row into an ordinary
   scroller, the same treatment phones get, so the focused card can be brought into view. */
.mq-still{-webkit-mask-image:none;mask-image:none;overflow:visible}
.mq-still .mrow,.mq-still .mrow.r2{animation:none;transform:none;width:auto;overflow-x:auto;
  scroll-behavior:smooth;scrollbar-width:none;padding:4px 0}
.mq-still .mrow::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.mq-still .mrow{scroll-behavior:auto}}


/* ---- the page has to be readable with no JavaScript ---- */
/* Every section under a .rv is invisible until the script adds .in, so a browser with scripting
   off - or one request that fails - left the services page as two headings on white. The head adds
   .js to <html> before the stylesheet loads, and the animation is an enhancement on top. */
html:not(.js) .rv{opacity:1;transform:none}
html:not(.js) .booker form{display:none}
html:not(.js) .mh-dots,html:not(.js) .mq-bar{display:none}   /* nothing moves without the script */
/* =========================================================================
   TABLETS AND IN-BETWEEN WIDTHS, 2026-09-19. Everything here came out of
   reading the built pages at 320, 360, 390, 414, 600, 768, 800, 1024, 1100,
   1180, 1201, 1280 and 1440.
   ========================================================================= */

/* ---- the CALL/BOOK/MAP rail was drawn ON TOP of the words ---- */
/* It is 66px of opaque navy fixed down the right edge (58px under 1041px), and the content column
   ran underneath it. At 1100 and 1180 - iPad Air and iPad Pro 11 in landscape - the hours table
   read "9:00 am - 7:00 p" with the final "m" behind the MAP tab, which is the one fact a walk-in
   clinic exists to publish. The column reserves the rail's width, and gives it back as soon as the
   centred page's own margin is wide enough to hold it. */
@media (min-width:761px) and (max-width:1040px){
  main .wrap,.foot .wrap{padding-right:70px}
}
@media (min-width:1041px) and (max-width:1200px){
  main .wrap,.foot .wrap{padding-right:78px}
}
@media (min-width:1201px) and (max-width:1360px){
  main .wrap,.foot .wrap{padding-right:max(24px,calc(78px - (100vw - 1200px)/2))}
}
/* The marquee bleeds past the container by design, so it cannot take the padding above; instead its
   right-hand fade is finished before the rail starts. In pixels, not per cent, so the fade is the
   same width at 800 as at 1600 and always clears the 66-78px tab column. */
@media (min-width:761px){
  .mrow-wrap{-webkit-mask-image:linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 96px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 96px),transparent)}
}

/* ---- three feature boxes stayed three until they actually stopped fitting ---- */
/* They were dropping to one full-width column at 1040px, the NAV's breakpoint, which has nothing
   to do with them: on both iPad orientations each box became a 150px band with its right half
   empty. At 1024 the columns are 324px against 330px at 1041 - the same box. */
@media (max-width:1040px) and (min-width:981px){
  .feat-grid{grid-template-columns:repeat(3,1fr)}
}

/* ---- the About page's inset was two thirds empty desk ---- */
/* bp-hands.jpg is a 900x1348 portrait in a 243x200 box: centred, the crop is the table top. From
   the top it holds the cuff, the clinician's hand on the bulb and the patient's arm. */
.about-pics .p2 img{object-position:center top}

/* ---- 320px: one row of appointment times was twice the height of the others ---- */
/* "12:00 pm" is the only label wide enough to wrap, so the afternoon's first row broke to two
   lines and the grid stepped in and out. */
@media (max-width:374px){
  .bk-grid button{white-space:nowrap;font-size:13.5px;padding-left:4px;padding-right:4px;
    font-variant-numeric:tabular-nums}
}

/* nothing drifts on a phone - the rows are swiped - so a stop control would control nothing.
   This has to come after .mq-bar's own rule: a media query adds no specificity. */


/* ---- a service page's related links, and the way back ---- */
/* Both classes shipped with no rules at all: the related items ran their title straight into their
   subtitle, and the arrow - an <svg> with a viewBox and no width - filled 500px of the page,
   because nothing in this stylesheet sizes a bare SVG in prose. Any new inline icon needs its own
   size rule; there is no global fallback and there should not be one. */
.slinks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.slinks li{display:flex;flex-direction:column;gap:3px;padding:14px 18px;
  background:var(--tint);border:1px solid var(--line);border-radius:12px}
.slinks li:hover{border-color:var(--cta)}
.slinks a{font-weight:700;font-size:16.5px;color:var(--navy-x)}
.slinks span{font-size:14.5px;color:var(--muted);line-height:1.5}
.backlink{margin:30px 0 0}
.backlink a{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:var(--cta)}
.backlink svg{width:17px;height:17px;flex:none}
.prose .slinks li::before{content:none}   /* .prose > ul > li::before would add a second bullet */

/* ---- the index of every service, at the top of the hub ---- */
/* Eighteen services down a page is seven phone screens. This is the tap that skips them, and the
   eighteen internal links a crawler meets before anything else on the page. */
.sindex{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 30px;margin:0 0 42px;padding:26px 28px;
  background:var(--sky);border:1px solid var(--line);border-radius:var(--r)}
/* a label, not a heading: as an h3 above the page's first h2 it broke the heading outline, and a
   list of links needs its group named for a screen reader, not ranked in the document structure
   (the group carries aria-label; this span is decoration) */
.sindex-t{display:block;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  margin:0 0 10px;font-family:var(--ui);font-weight:700}
.sindex ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.sindex a{font-weight:600;font-size:15.5px;color:var(--navy-x);display:inline-block;padding:3px 0}
.sindex a:hover{color:var(--cta);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.sindex{grid-template-columns:1fr 1fr;gap:20px}}
@media (max-width:560px){.sindex{grid-template-columns:1fr;padding:20px 18px;margin-bottom:30px}}

/* ---- the map's ground, for the moment before it arrives and for the visitors who never get it ---- */
/* The embed is about half a megabyte of Google's code, on the page people open when they are
   unwell and looking for the door, so it is fetched as the visitor comes down the page rather than
   with the page's own assets. This is what stands in its place until then - and permanently for a
   browser with scripting off, or a phone on a metered or 2G connection, where the control stays a
   plain link to Google Maps. The address and the directions link sit OUTSIDE the box, in .mapcol,
   so they survive every one of those cases and the load itself. */
.map-off{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:34px 24px;text-align:center;background:var(--sky);
  background-image:radial-gradient(circle at 1px 1px,rgba(23,89,194,.16) 1px,transparent 0);
  background-size:16px 16px}
.map-load{display:inline-flex;align-items:center;gap:12px;padding:14px 22px;border:2px solid var(--navy);
  border-radius:999px;background:var(--white);color:var(--navy);font-family:var(--ui);font-weight:700;
  font-size:16px;cursor:pointer;text-align:left;box-shadow:var(--shadow)}
.map-load:hover{background:var(--navy);color:var(--white);box-shadow:var(--shadow-h)}
.map-load svg{width:22px;height:22px;flex:none}
.map-load span{display:flex;flex-direction:column;line-height:1.25}
.map-load span b{font-size:16px}
.map-load span:last-child{font-weight:500;font-size:12.5px;opacity:.75}
/* the address is a caption under the map, not something inside it that a load can destroy */
.mapcol{display:flex;flex-direction:column;background:var(--sky);min-width:0}
.mapcol .map{flex:1 1 auto}
.map-alt{margin:0;color:var(--navy-x);font-size:15px;line-height:1.6}
.mapcol > .map-alt{padding:16px 22px;text-align:center;border-top:1px solid var(--line)}
.map-alt a{font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---- <picture> is a wrapper, not a box: the <img> keeps the layout ---- */
picture{display:contents}   /* a wrapper, never a box: the <img> inside keeps the layout */