/* All Care Dental — sixth direction, 2026-09-07.
   Built by hand after the "Ground Floor" document-style build was rejected outright.
   Brief: warm, image-led, confident, unmistakably a family dental practice — the qualities
   that made the client point at flowdentalcare.ca — but built from our own structure and
   our own argument, not a copy of its bento grid.

   Palette is the client's own logo: navy #0C489C, teal #3CB4B4, on a warm cream ground.
   Type (owner's change round, 2026-09-18): Lexend, one family for everything. The owner asked for
   type that is "Clear Understand"; Chillax's quirky rounded display letters were the hardest thing
   on the page to read. Lexend keeps a round, friendly bold at almost Chillax's width, so heading
   sizes carry over, but its letters are plain and it was drawn for reading fluency first. It is a
   wide face with generous spacing: body text is left at its default tracking on purpose, and the
   nav is set a size smaller than it was so the full header still fits at 1340px.
   --head and --text stay separate tokens so a display face can come back without touching rules.
*/

:root{
  --navy:#0C489C; --navy-d:#083A80; --navy-x:#062B60;
  --teal:#3CB4B4; --teal-d:#1A7070; --teal-l:#E6F5F4;
  --ink:#14181F; --body:#5A6472; --muted:#646E7C;
  --cream:#FBF8F3; --sand:#F3EEE5; --line:#E8E1D5;
  --white:#fff;
  --r:16px; --r-sm:10px; --hdr-h:90px;
  --wrap:1220px;
  --head:'Lexend','Segoe UI',system-ui,sans-serif;
  --text:'Lexend','Segoe UI',system-ui,sans-serif;
  --sh:0 1px 2px rgba(20,24,31,.04),0 8px 24px rgba(20,24,31,.06);
  --sh-h:0 18px 44px rgba(20,24,31,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--body);
  font:400 17px/1.65 var(--text);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none}
h1,h2,h3,h4{font-family:var(--head);color:var(--ink);margin:0 0 14px;font-weight:600;
  line-height:1.12;letter-spacing:-.02em}
h1{font-size:60px;font-weight:700}
h2{font-size:42px}
h3{font-size:22px;line-height:1.25;letter-spacing:-.01em}
h4{font-size:18px;letter-spacing:-.005em}
p{margin:0 0 16px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.sec{padding:92px 0}
.sec-sm{padding:64px 0}
.cream{background:var(--cream)}
.sand{background:var(--sand)}
.lead{font-size:19.5px;line-height:1.6;color:var(--body);max-width:60ch}
.ctr{text-align:center}
.ctr .lead{margin-left:auto;margin-right:auto}
.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}
[id]{scroll-margin-top:104px}
.kicker{display:inline-flex;align-items:center;gap:10px;font:600 14px/1 var(--text);
  letter-spacing:.02em;color:var(--teal-d);margin-bottom:16px}
.kicker::before{content:"";width:26px;height:2px;background:var(--teal);flex:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:600 16px/1 var(--text);padding:17px 30px;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:.18s}
.btn svg{width:17px;height:17px;flex:none}
.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);box-shadow:0 10px 26px rgba(12,72,156,.3)}
.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 10px 26px rgba(60,180,180,.34)}
.btn-line{background:transparent;color:var(--ink);border-color:#D6CEC0}
.btn-line:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px)}
.btn-w{background:#fff;color:var(--navy);border-color:#fff}
.btn-w:hover{background:var(--cream);color:var(--navy);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.2)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff;transform:translateY(-2px)}
.btn-sm{padding:12px 22px;font-size:15px}
.more{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--text);color:var(--navy)}
.more svg{width:15px;height:15px;transition:.18s}
a:hover .more svg,.more:hover svg{transform:translateX(4px)}

/* ---------- header ----------
   One white row. Logo and actions are the fixed bookends; the nav floats between them with real
   space on both sides. The phone carries the live open/closed state instead of a "CALL THE
   OFFICE" label — a patient wants to know whether they can ring right now, not what the number is
   labelled. There is no utility bar: the address, hours and email it held are all on the page. */
.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);
  transition:background .25s,border-color .25s}
/* Over the slider the header is transparent with a reversed logo; it turns solid on scroll.
   .over is set by script only when a slider is present, so inner pages keep the solid header. */
.hdr.over{background:transparent;border-color:transparent}
.hdr.over .brand img{filter:brightness(0) invert(1)}
.hdr.over .nav > li > a{color:#fff}
.hdr.over .nav > li > a:hover{color:#fff}
.hdr.over .nav > li.on > a{color:#fff}
.hdr.over .hdr-tel{color:#fff}
.hdr.over .hdr-tel .num svg{color:#fff}
.hdr.over .hdr-tel .st{color:#BFEDEC}
.hdr.over .hdr-tel .st i{background:#7FDCDA}
.hdr.over .btn-navy{background:#fff;color:var(--navy);border-color:#fff}
.hdr.over .btn-navy:hover{background:var(--cream);color:var(--navy)}
.hdr.over .burger{border-color:rgba(255,255,255,.55);background:transparent}
.hdr.over .burger span,.hdr.over .burger::before,.hdr.over .burger::after{background:#fff}
.hdr.over .tel-ico{border-color:rgba(255,255,255,.55);color:#fff}
.hdr > .wrap{display:flex;align-items:center;height:90px;gap:18px;max-width:1400px}
.brand{flex:none}                       /* the wordmark distorts the moment it can shrink */
.brand img{height:48px;width:auto}
.nav{display:flex;align-items:center;gap:6px;margin:0 auto;list-style:none;padding:0}
.nav > li{position:relative}
/* 15px, not the 16.5px Synonym had: Lexend is wider and its x-height larger, so it reads the same
   size, and the full nav still fits beside the phone block at 1340px. */
.nav > li > a{display:flex;align-items:center;gap:6px;font:500 15px/1 var(--text);color:var(--ink);
  padding:14px 4px;position:relative;transition:color .16s;white-space:nowrap}
.nav > li + li{margin-left:12px}
.nav > li > a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .18s}
.nav > li > a:hover{color:var(--navy)}
.nav > li > a:hover::after,.nav > li.on > a::after{transform:scaleX(1)}
.nav > li.on > a{color:var(--navy);font-weight:600}
.nav .cv{width:12px;height:12px;transition:.18s;opacity:.6}
.nav > li:hover .cv{transform:rotate(180deg)}
.sub{position:absolute;top:calc(100% + 4px);left:-16px;min-width:290px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-h);padding:8px;
  list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s}
.nav > li:hover .sub,.nav > li:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub li{margin:0}
.sub a{display:block;padding:10px 14px;border-radius:var(--r-sm);font-size:16px;color:var(--body)}
.sub a:hover{background:var(--cream);color:var(--navy)}
.hdr-end{flex:none;display:flex;align-items:center;gap:14px;margin-left:14px}
/* The open/closed line is written by the clock, so its length changes with the day: "Open until
   7:00 pm" is 150px, "Open alternate Saturdays until 6:00 pm — call to check" was 380px. .hdr-end
   never shrinks, so the long sentence pushed the Book button 112px past the right edge of a 1440
   window and every page scrolled sideways (measured: scrollWidth 1552 at 1440, on every page).
   212px holds the longest line the clock currently writes ("Open — ask about Saturdays") without
   the hours block's ellipsis, and keeps the Book button inside the window at every width down to
   1339, where the burger takes over (at 1340-1360 it eats into the wrap's 28px gutter, no more).
   A longer sentence will be ellipsised rather than break the header, so keep those strings short. */
.hdr-tel{display:grid;gap:5px;line-height:1;color:var(--ink);max-width:212px}
.hdr-tel .num{display:flex;align-items:center;gap:8px;font:700 18px/1 var(--text);
  font-variant-numeric:tabular-nums}
.hdr-tel .num svg{width:16px;height:16px;color:var(--teal-d)}
.hdr-tel .st{display:flex;align-items:center;gap:7px;font:500 12.5px/1.2 var(--text);color:var(--teal-d)}
.hdr-tel .st i{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none}
.hdr-tel:hover .num{color:var(--navy)}
.tel-ico{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:var(--r-sm);
  place-items:center;color:var(--navy)}
.tel-ico svg{width:19px;height:19px}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;cursor:pointer;position:relative}
.burger span,.burger::before,.burger::after{content:"";position:absolute;left:13px;width:20px;
  height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.burger span{top:22px}.burger::before{top:16px}.burger::after{top:28px}
.burger[aria-expanded=true] span{opacity:0}
.burger[aria-expanded=true]::before{top:22px;transform:rotate(45deg)}
.burger[aria-expanded=true]::after{top:22px;transform:rotate(-45deg)}
.mnav{display:none;visibility:hidden;background:#fff;border-top:1px solid var(--line);max-height:0;overflow:hidden;
  transition:max-height .3s}
.mnav.open{max-height:82vh;overflow-y:auto;visibility:visible}
.mnav ul{list-style:none;margin:0;padding:0}
.mnav > ul > li > a{display:block;padding:16px 28px;font:600 17px/1.2 var(--text);color:var(--ink);
  border-bottom:1px solid var(--line)}
.msub{background:var(--cream)}
.msub a{display:block;padding:12px 28px 12px 44px;font-size:16px;color:var(--body)}
.mcta{padding:20px 28px 26px;display:grid;gap:10px}


/* ---------- navigation flyout ----------
   A contained two-column panel: the seven service groups on the left, the treatments in the
   hovered group on the right. Replaces a full-width mega panel (too big) and stacked horizontal
   sub-bars (read as three odd bands), both rejected. */
.nav > li.has-fly{position:relative}
/* The panel touches the nav item — no gap to cross. The visible 9px space is a TRANSPARENT TOP
   BORDER, so it is part of the element and keeps the item hovered while the pointer travels into
   the panel. A real gap breaks any diagonal approach: the menu closes mid-move, and a bridge
   drawn inside the panel cannot help because the panel is already hidden by then. */
.fly{position:absolute;top:100%;left:-18px;display:none;
  grid-template-columns:238px 264px;background:#fff;
  border:1px solid var(--line);border-top:9px solid transparent;background-clip:padding-box;
  border-radius:var(--r);box-shadow:0 20px 46px rgba(20,24,31,.16);overflow:hidden;z-index:80}
.fly.one{grid-template-columns:264px}
.nav > li.has-fly.open .fly,.nav > li.has-fly:focus-within .fly{display:grid}

.fly-l{background:var(--cream);padding:10px;border-right:1px solid var(--line)}
.fly-l .grp{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 12px;border-radius:var(--r-sm);font:500 15px/1.25 var(--text);color:var(--body);
  transition:.14s}
.fly-l .grp .gc{width:13px;height:13px;opacity:.4;flex:none}
.fly-l .grp .gc svg{width:13px;height:13px;display:block}
.fly-l .grp:hover{color:var(--navy)}
.fly-l .grp.on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(20,24,31,.08)}
.fly-l .grp.on .gc{opacity:1;color:var(--teal-d)}
.fly-r{padding:10px}
.fly-r .fg{display:none;flex-direction:column;gap:1px}
.fly-r .fg.on{display:flex}
.fly-r a{display:block;padding:10px 12px;border-radius:var(--r-sm);
  font:400 15px/1.3 var(--text);color:var(--body);transition:.14s}
.fly-r a:hover{background:var(--cream);color:var(--navy)}
.mnav .mg{padding:16px 28px 6px;font:600 12px/1 var(--text);letter-spacing:.12em;
  text-transform:uppercase;color:var(--teal-d)}


/* ================= INNER PAGES =================
   Same design system as the home page — one radius, one type scale, the same tile language for
   related links — but deliberately different shapes. The home page is a slider, two mosaics and
   two bands; an inner page is a split hero, a statement, a checklist, a numbered spine, a money
   band, an accordion and three tiles. */

/* ---------- split hero ---------- */
.phero{display:grid;grid-template-columns:52% 48%;align-items:center;background:var(--cream)}
.phero-tx{padding:84px 56px 84px 6vw;max-width:720px}
.phero h1{font-size:54px;line-height:1.06;letter-spacing:-.025em;margin:0 0 16px;max-width:15ch}
.phero-lead{font-size:20px;line-height:1.6;color:var(--body);max-width:46ch;margin:0 0 28px}
.phero-cta{display:flex;flex-wrap:wrap;gap:12px}
.phero-ph{position:relative;min-height:520px;align-self:stretch}
.phero-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 24%}
.crumb{display:flex;align-items:center;gap:9px;font:500 14.5px/1 var(--text);color:var(--muted);
  margin-bottom:22px;flex-wrap:wrap}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--navy)}
.crumb svg{width:12px;height:12px;opacity:.6}

/* ---------- statement ---------- */
.statement{background:#fff;padding:76px 0}
.statement .wrap{max-width:900px}
.statement i{display:block;width:56px;height:3px;background:var(--teal);margin-bottom:26px}
.statement p{margin:0;font:500 30px/1.42 var(--head);letter-spacing:-.012em;color:var(--ink)}

/* ---------- signs: ruled checklist beside a photograph ---------- */
.signs{background:var(--cream);padding:84px 0}
.signs-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.signs .ticks{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line)}
.signs .ticks li{display:flex;align-items:flex-start;gap:14px;padding:18px 0;
  border-bottom:1px solid var(--line);font:500 18.5px/1.45 var(--text);color:var(--ink)}
.signs .ticks svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--teal-d)}
.signs-ph img{width:100%;aspect-ratio:4/4.4;object-fit:cover;object-position:50% 18%;
  border-radius:var(--r);box-shadow:var(--sh)}

/* ---------- stages: numbered spine ---------- */
.stages{background:#fff;padding:84px 0}
.spine{list-style:none;margin:44px 0 0;padding:0;position:relative;max-width:820px}
.spine::before{content:"";position:absolute;left:26px;top:12px;bottom:12px;width:2px;background:var(--line)}
.spine li{position:relative;display:grid;grid-template-columns:54px 1fr;gap:0 30px;
  padding-bottom:34px}
.spine li:last-child{padding-bottom:0}
.spine b{position:relative;z-index:2;width:54px;height:54px;border-radius:50%;background:var(--teal-d);
  color:#fff;display:grid;place-items:center;font:700 16px/1 var(--text)}
.spine h3{margin:12px 0 6px;font-size:22px}
.spine p{margin:0;font-size:17px;line-height:1.6;color:var(--body);max-width:58ch}

/* ---------- money band ---------- */
.pmoney{background:var(--navy);color:#fff;padding:76px 0}
.pmoney h2{color:#fff;margin:0;max-width:14ch}
.pmoney .kicker{color:#8FD8D8}
.pmoney .kicker::before{background:#8FD8D8}
.pmoney-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.pmoney p{color:rgba(255,255,255,.9);font-size:18.5px;line-height:1.65;margin:0 0 26px;max-width:56ch}

/* ---------- FAQ accordion ---------- */
.faqwrap{background:#fff}
.faqs{margin-top:34px;border-top:1px solid var(--line);max-width:920px}
.faqs details{border-bottom:1px solid var(--line)}
.faqs summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;font:600 20px/1.35 var(--head);
  letter-spacing:-.01em;color:var(--ink);transition:color .16s}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary:hover{color:var(--navy)}
.faqs summary svg{width:18px;height:18px;flex:none;color:var(--teal-d);transition:transform .2s}
.faqs details[open] summary svg{transform:rotate(180deg)}
.faqs details > div{padding:0 0 24px}
.faqs p{margin:0;font-size:17.5px;line-height:1.7;color:var(--body);max-width:70ch}

/* ---------- simple prose page (about, privacy, forms…) ---------- */
.prose{max-width:760px}
.prose h2{margin-top:44px;font-size:30px}
.prose h2:first-child{margin-top:0}
.prose h3{margin-top:30px;font-size:21px}
.prose p,.prose li{font-size:17.5px;line-height:1.75;color:var(--body)}
.prose ul{padding-left:22px;margin-bottom:20px}
.prose li{margin-bottom:9px}
.prose a{border-bottom:1px solid var(--line)}
.prose a:hover{border-color:var(--navy)}

/* ---------- index page: grouped list of everything ---------- */
.grouplist{display:grid;gap:56px;margin-top:44px}
.grouplist h2{font-size:26px;margin-bottom:0}
.grouplist .gl-head{display:flex;align-items:baseline;gap:16px;padding-bottom:14px;
  border-bottom:2px solid var(--navy);margin-bottom:6px}
.grouplist .gl-head span{font:600 14px/1 var(--text);color:var(--muted)}
.glrow{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px}
.glrow a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;
  border-bottom:1px solid var(--line);font:500 17.5px/1.35 var(--text);color:var(--ink);transition:.16s}
.glrow svg{width:16px;height:16px;flex:none;color:var(--teal-d);transition:transform .16s}
.glrow a:hover{color:var(--navy);padding-left:8px}
.glrow a:hover svg{transform:translateX(4px)}

@media (max-width:1180px){
  .phero h1{font-size:44px}
}
@media (max-width:1040px){
  .phero{grid-template-columns:1fr}
  .phero-tx{padding:56px 6vw}
  .phero-ph{min-height:340px;order:-1}
  .signs-grid,.pmoney-grid{grid-template-columns:1fr;gap:38px}
  .signs-ph{max-width:440px}
  .glrow{grid-template-columns:repeat(2,1fr);gap:0 30px}
}
@media (max-width:760px){
  .phero h1{font-size:32px}
  .phero-lead{font-size:17.5px}
  .phero-ph{min-height:240px}
  .statement{padding:52px 0}
  .statement p{font-size:22px}
  .signs,.stages,.pmoney{padding:56px 0}
  .signs .ticks li{font-size:17px}
  .spine li{grid-template-columns:44px 1fr;gap:0 20px}
  .spine b{width:44px;height:44px;font-size:14px}
  .spine::before{left:21px}
  .spine h3{font-size:19px}
  .faqs summary{font-size:17.5px}
  .glrow{grid-template-columns:1fr}
}

/* ---------- footer: the full service index, as both reference sites do ---------- */
.fsvc{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,.16)}
.fsvc ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fsvc a{font-size:15px}
.fsvc h4.second{margin-top:26px}
.fbase{display:grid;grid-template-columns:1.1fr 1fr 1.2fr;gap:34px;padding:40px 0 0;align-items:start}
.fbase .addr{font:500 16px/1.6 var(--text);color:rgba(255,255,255,.82);margin:0}
.fcon p{margin:0 0 10px}
.ftel{font:700 26px/1 var(--head);color:#fff;font-variant-numeric:tabular-nums}
.fhrs{display:grid;gap:7px}
.fhrs span{display:flex;justify-content:space-between;gap:20px;font-size:15px;
  border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:6px}
.fhrs b{font-weight:500;color:#fff;font-variant-numeric:tabular-nums}

@media (max-width:1180px){
  .mm-in{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1040px){
  .fsvc{grid-template-columns:repeat(3,1fr)}
  .fbase{grid-template-columns:1fr;gap:26px}
}
@media (max-width:760px){
  .fsvc{grid-template-columns:1fr;gap:26px;padding-bottom:32px}
  .fhrs span{font-size:14.5px}
}

/* ---------- HERO SLIDER ----------
   Four slides. Each one makes a different point and carries its own button to a different place,
   so a visitor who never scrolls still meets four reasons to act. Crossfade, not slide: it keeps
   the type still while the photograph changes. Autoplay pauses on hover and focus, and does not
   run at all under prefers-reduced-motion. */
.slider{position:relative;background:var(--navy-x);overflow:hidden;
  margin-top:calc(-1 * var(--hdr-h))}
.slides{position:relative;height:calc(660px + var(--hdr-h))}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease}
.slide.on{opacity:1;visibility:visible}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
/* Two scrims: one down from the top so the floating header stays legible over any photograph,
   one across from the left for the headline. Without the top band the phone number in the header
   lands on whatever the photo happens to be doing at that point. */
.slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,26,58,.62) 0%,rgba(6,26,58,.28) 14%,rgba(6,26,58,0) 26%),
             linear-gradient(90deg,rgba(6,26,58,.9) 0%,rgba(6,26,58,.74) 38%,rgba(6,26,58,.24) 74%,rgba(6,26,58,.1) 100%)}
.slide-in{position:relative;z-index:2;height:100%;display:flex;align-items:center;
  padding-top:var(--hdr-h)}
.slide-c{max-width:640px;color:#fff;padding-bottom:38px}
.slide-c h1,.slide-c h2{color:#fff;margin:0 0 18px;font-size:62px;line-height:1.03;font-weight:700}
.slide-c p{color:rgba(255,255,255,.9);font-size:20px;line-height:1.55;margin:0 0 30px;max-width:46ch}
.slide-c .btn-w{background:#fff;color:var(--navy);border-color:#fff}
.slide-c .btn-w:hover{background:var(--cream);color:var(--navy);transform:translateY(-2px)}
/* controls */
.s-dots{position:absolute;left:0;right:0;bottom:26px;z-index:5;display:flex;justify-content:center;gap:10px}
.s-dots button{width:34px;height:4px;border:0;padding:0;cursor:pointer;background-color:rgba(255,255,255,.4);
  border-radius:2px;transition:background .2s}
.s-dots button[aria-current=true]{background-color:#fff}
.s-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:52px;height:52px;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:rgba(6,26,58,.28);
  color:#fff;cursor:pointer;display:grid;place-items:center;transition:.18s}
.s-arrow:hover{background:#fff;color:var(--navy);border-color:#fff}
.s-arrow svg{width:20px;height:20px}
.s-prev{left:24px}.s-next{right:24px}
.s-prev svg{transform:rotate(180deg)}

/* ---------- teal fact strip ---------- */
.facts{background:var(--teal)}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 28px;
  padding-top:20px;padding-bottom:20px}
.facts div{display:flex;align-items:flex-start;gap:11px;font:600 15.5px/1.35 var(--text);color:#08312F}
.facts svg{margin-top:2px}
.facts svg{width:19px;height:19px;flex:none;opacity:.75}

/* ---------- the referral argument: the page's centrepiece ---------- */
.ref-head{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end;margin-bottom:44px}
.ref-head h2{margin-bottom:0;max-width:16ch}
.refs{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.ref{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:.2s}
a.ref:hover{transform:translateY(-5px);box-shadow:var(--sh-h);border-color:transparent}
.ref-img{aspect-ratio:4/3.4;overflow:hidden}
.ref-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
a.ref:hover .ref-img img{transform:scale(1.04)}
.ref-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.ref-body h3{font-size:19px;margin-bottom:12px}
.ref-body p{margin:0;font:500 15.5px/1.45 var(--text);color:var(--navy)}



/* ================= THE PAGE SYSTEM =================
   Two archetypes, alternating: grid → band → grid → band. Earlier versions failed in both
   directions — one tile repeated 22 times read as "the same contour the whole time", and eight
   one-off section shapes read as no structure at all. Two shapes on a rhythm is the answer.
   Everything below shares one radius, one heading treatment and one spacing scale. */

/* ---------- ARCHETYPE 1: the mosaic ---------- */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:236px;gap:16px}
.m{position:relative;border-radius:var(--r);overflow:hidden;display:flex;align-items:flex-end;
  transition:transform .22s,box-shadow .22s;background:var(--navy-x);grid-column:span 2}
.m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 26%;transition:transform .45s}
.m::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,26,58,0) 42%,rgba(6,26,58,.22) 58%,rgba(6,26,58,.78) 82%,rgba(6,26,58,.95) 100%)}
.m.h2::after{background:linear-gradient(180deg,rgba(6,26,58,0) 52%,rgba(6,26,58,.2) 66%,rgba(6,26,58,.8) 86%,rgba(6,26,58,.96) 100%)}
.m:hover{transform:translateY(-6px);box-shadow:var(--sh-h)}
.m:hover img{transform:scale(1.06)}
.m-b{position:relative;z-index:2;padding:26px 24px 24px;color:#fff;width:100%}
.m-b h3{color:#fff;margin:0 0 7px;font-size:21px;line-height:1.2}
.m-b p{margin:0;color:rgba(255,255,255,.88);font-size:15.5px;line-height:1.45;max-width:34ch}
.m.w3{grid-column:span 3}
.m.w4{grid-column:span 4}
.m.h2{grid-row:span 2}
.m.feature .m-b{padding:34px 32px 32px}
.m.feature .m-b h3{font-size:34px;margin-bottom:10px;letter-spacing:-.02em}
.m.feature .m-b p{font-size:17px;max-width:40ch}
/* tiles with no photograph: the rhythm breaks on purpose, twice per grid */
.m.solid::after{display:none}
.m.solid{align-items:center}
.m.s-navy{background:var(--navy)}
.m.s-navy:hover{background:var(--navy-d)}
.m.s-teal{background:var(--teal)}
.m.s-teal .m-b h3,.m.s-teal .m-b p{color:#08312F}
.m.s-teal .m-b p{opacity:.86}
.m.s-teal:hover{background:var(--teal-d)}
.m.s-teal:hover .m-b h3,.m.s-teal:hover .m-b p{color:#fff}
.m.s-navy .more{color:#fff;margin-top:14px}
.m .bigtel{display:block;margin-top:16px;font:700 30px/1 var(--head);
  font-variant-numeric:tabular-nums;color:#fff;letter-spacing:-.01em}
.tiers{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tiers b{font:600 13.5px/1 var(--text);background:rgba(8,49,47,.14);color:#08312F;
  padding:8px 14px;border-radius:999px}
.tag{position:absolute;top:16px;left:16px;z-index:3;background:var(--teal);color:#08312F;
  font:600 11.5px/1 var(--text);letter-spacing:.03em;padding:8px 13px;border-radius:999px}

/* ---------- ARCHETYPE 2: the band. One layout, two colourways. ---------- */
.band2{display:grid;grid-template-columns:54% 46%;align-items:center;background:var(--cream)}
.band2.dark{background:var(--navy);color:#fff}
.band2-tx{padding:100px 56px 100px 6vw;max-width:720px}
.band2-tx h2{font-size:48px;line-height:1.07;max-width:15ch;margin-bottom:18px}
.band2-tx p{font-size:19px;line-height:1.6;max-width:54ch;color:var(--body);margin-bottom:28px}
.band2.dark h2{color:#fff}
.band2.dark p{color:rgba(255,255,255,.86)}
.band2.dark .kicker{color:#8FD8D8}
.band2.dark .kicker::before{background:#8FD8D8}
.band2-links{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:0;max-width:440px}
.band2-links a{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--line);color:var(--ink);
  font:600 17px/1.3 var(--text);transition:.16s}
.band2-links svg{width:16px;height:16px;color:var(--teal-d);flex:none;transition:transform .16s}
.band2-links a:hover{color:var(--navy);padding-left:8px}
.band2-links a:hover svg{transform:translateX(4px)}
.band2.dark .band2-links a{color:#fff;border-bottom-color:rgba(255,255,255,.24)}
.band2.dark .band2-links svg{color:#8FD8D8}
.band2.dark .band2-links a:hover{color:#fff}
.band2-ph{position:relative;min-height:620px}
.band2-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%}

@media (max-width:1180px){
  .band2-tx h2{font-size:38px}
}
@media (max-width:1040px){
  .mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:220px}
  .m.w3{grid-column:span 2}
  .m.w4{grid-column:span 4}
  .m.feature{grid-column:span 4}
  .m.feature .m-b h3{font-size:30px}
  .band2{grid-template-columns:1fr}
  .band2-tx{padding:64px 6vw}
  .band2-ph{min-height:380px;order:-1}
}
@media (max-width:760px){
  .mosaic{grid-template-columns:1fr;grid-auto-rows:auto;gap:14px}
  .m,.m.w3,.m.w4,.m.feature{grid-column:span 1;grid-row:span 1;min-height:250px}
  .m.feature .m-b h3{font-size:26px}
  .m.solid{min-height:0}
  .band2-tx h2{font-size:30px}
  .band2-ph{min-height:260px}
}

/* ---------- doctor ----------
   A designed banner, not a plain gradient: a soft arc anchoring him, a dot texture, the practice
   mark as a large watermark, and a teal gradient base. The portrait is a cut-out produced by
   tools/cutout-ai.js (ISNet). MediaPipe selfie segmentation was tried first and chewed the
   hairline and shoulder — it is tuned for live video, not a still portrait. */
.docband{position:relative;overflow:hidden;padding:0;
  background:linear-gradient(112deg,#EAF7F6 0%,#A9E0DD 46%,#4FBEBC 100%)}
/* dot texture */
.docband::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(8,49,47,.10) 1.4px,transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(100deg,#000 0 46%,transparent 78%);
  mask-image:linear-gradient(100deg,#000 0 46%,transparent 78%)}
/* the arc he stands against */
.docband::after{content:"";position:absolute;left:-90px;bottom:-260px;width:640px;height:640px;
  border-radius:50%;background:rgba(255,255,255,.42);pointer-events:none}
.docband .wrap{position:relative;z-index:3}
/* the practice mark, oversized and faint, bled off the right edge */
img.docmark{position:absolute;right:-110px;top:50%;transform:translateY(-50%);width:440px;
  opacity:.13;z-index:1;pointer-events:none}
.doc{display:grid;grid-template-columns:340px minmax(0,1fr);gap:56px;align-items:end;
  padding-top:60px}
.doc .lead{max-width:56ch;margin-bottom:16px}
.doc-ph{position:relative;max-width:none;align-self:end}
.doc-ph img{display:block;width:100%;height:auto;border-radius:0;box-shadow:none;
  aspect-ratio:auto;object-fit:contain;
  filter:drop-shadow(0 20px 24px rgba(8,49,47,.26))}
.doc > div:last-child{padding-bottom:80px}
.creds{list-style:none;padding:0;margin:26px 0 30px;display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
.creds li{display:flex;gap:11px;align-items:flex-start;font-size:16.5px;color:var(--ink);font-weight:500}
.creds svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--teal-d)}

/* ---------- things you can say ---------- */
.say{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.say-ph img{width:100%;aspect-ratio:4/4.4;object-fit:cover;border-radius:var(--r);box-shadow:var(--sh)}
.says{display:grid;gap:14px;margin-top:6px}
.said{background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);
  border-radius:var(--r-sm);padding:18px 22px}
.said q{display:block;font:600 18.5px/1.35 var(--head);color:var(--ink);margin-bottom:6px;
  quotes:'\201C' '\201D'}
.said p{margin:0;font-size:16px;line-height:1.55}

/* ---------- first visit steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:44px}
.step{position:relative;padding-top:28px;border-top:3px solid var(--line)}
.step.on{border-top-color:var(--teal)}
.step b{position:absolute;top:-16px;left:0;width:34px;height:34px;border-radius:50%;
  background:var(--navy);color:#fff;display:grid;place-items:center;
  font:600 15px/1 var(--text)}
.step h3{margin:0 0 8px;font-size:18px;letter-spacing:-.005em}
.step p{margin:0;font-size:16px;line-height:1.55}
.step .dur{display:block;font:600 13px/1 var(--text);color:var(--teal-d);margin-bottom:9px;
  letter-spacing:.02em}

/* ---------- money band ---------- */
.money{background:var(--navy);color:rgba(255,255,255,.9);position:relative;overflow:hidden}
.money h2,.money h3{color:#fff}
.money .kicker{color:#8FD8D8}
.money .kicker::before{background:#8FD8D8}
.money-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.money-ph img{width:100%;aspect-ratio:4/3.2;object-fit:cover;border-radius:var(--r)}
.mlist{display:grid;gap:22px;margin-top:30px}
.mlist div{padding-left:20px;border-left:2px solid rgba(255,255,255,.32)}
.mlist h3{font-size:19px;margin-bottom:6px}
.mlist p{margin:0;color:rgba(255,255,255,.84);font-size:16.5px}
.mnote{margin-top:30px;border:1.5px solid rgba(255,255,255,.4);border-radius:var(--r-sm);
  padding:16px 22px;font-size:16px;color:#fff}

.facts4{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:16px}
.facts4 li{display:flex;gap:13px;align-items:flex-start;font:500 18px/1.5 var(--text);color:#fff}
.facts4 svg{width:20px;height:20px;flex:none;margin-top:3px;color:#8FD8D8}

/* ---------- visit ---------- */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.hours{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-top:22px}
.hours th,.hours td{padding:13px 20px;font-size:16.5px;border-bottom:1px solid var(--line);text-align:left}
.hours th{font-weight:500;color:var(--ink)}
.hours td{text-align:right;color:var(--body);font-variant-numeric:tabular-nums}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:0}
.hours tr.today{background:var(--teal-l)}
.hours tr.today th,.hours tr.today td{font-weight:600;color:var(--ink)}
.hours tr.shut th,.hours tr.shut td{color:var(--muted)}
.open-now{display:inline-flex;align-items:center;gap:9px;font:600 17px/1 var(--text);color:var(--ink);
  background:var(--teal-l);border-radius:999px;padding:11px 18px}
.open-now i{width:9px;height:9px;border-radius:50%;background:var(--teal-d);flex:none}
.visit-ph img{width:100%;aspect-ratio:4/3.1;object-fit:cover;border-radius:var(--r);box-shadow:var(--sh)}
.addrline{margin:22px 0 0;font:500 17px/1.5 var(--text);color:var(--ink)}

/* ---------- booking form ---------- */
.book{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.book .full{grid-column:1/-1}
.fld{display:grid;gap:7px}
.fld label{font:600 14px/1 var(--text);color:var(--ink)}
.fld input,.fld select,.fld textarea{font:400 16.5px/1.4 var(--text);padding:14px 16px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--cream);color:var(--ink);width:100%}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--teal);background:#fff}
.fld textarea{min-height:96px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips label{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);
  border-radius:999px;padding:9px 16px;font-size:15.5px;cursor:pointer;transition:.16s;background:var(--cream)}
.chips label:hover{border-color:var(--teal)}
.chips input{accent-color:var(--teal);width:15px;height:15px}
.chips input:checked + span{font-weight:600;color:var(--navy)}
.formnote{font-size:14.5px;color:var(--muted);margin:0}

/* ---------- CTA band ---------- */
.endcta{background:var(--teal);color:#08312F;text-align:center}
.endcta h2{color:#08312F;max-width:20ch;margin:0 auto 14px}
.endcta p{color:#06302E;max-width:56ch;margin:0 auto 28px;font-size:18.5px}
.endcta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.endcta .btn-ink{background:#08312F;color:#fff;border-color:#08312F}
.endcta .btn-ink:hover{background:#062422;transform:translateY(-2px)}
.endcta .btn-w{background:#fff;color:#08312F;border-color:#fff}
.endcta .btn-w:hover{background:var(--cream);transform:translateY(-2px)}

/* ---------- footer ---------- */
.foot{background:var(--navy-x);color:rgba(255,255,255,.76);padding:72px 0 0;font-size:16px}
.foot a{color:rgba(255,255,255,.76)}
.foot a:hover{color:#fff}
.foot h2,.foot h4{color:#fff;font:600 13px/1 var(--text);letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.2)}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.flogo img{height:52px;width:auto;filter:brightness(0) invert(1);margin-bottom:20px;opacity:.95}
.fbot{margin-top:56px;border-top:1px solid rgba(255,255,255,.16);padding:22px 0 26px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14.5px;
  color:rgba(255,255,255,.6)}

/* ---------- sticky call bar on phones ---------- */
.bar{display:none}

/* ---------- reveal on scroll: a scroll sweep, never IntersectionObserver — an anchor jump
     can skip an observer and leave content stuck at opacity:0 ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}

/* ================= RESPONSIVE ================= */
@media (max-width:1260px){
  .nav > li + li{margin-left:14px}
  .nav > li > a{font-size:15.5px}
  .hdr-end{gap:16px;margin-left:18px}
}
@media (max-width:1180px){
  h1{font-size:52px}h2{font-size:36px}
  .refs{grid-template-columns:repeat(3,1fr)}
  .nav > li > a{padding:12px 10px;font-size:15px}
}
@media (max-width:1040px){
  .facts .wrap{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}
  .burger{display:block}
  .mnav{display:block}
  .slides{height:calc(560px + var(--hdr-h))}
  .slide-c h1,.slide-c h2{font-size:46px}
  .s-arrow{display:none}
  .hero-ph::after{display:none}
  .ref-head{grid-template-columns:1fr;gap:20px;align-items:start}
  .mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:220px}
  .m.w3{grid-column:span 2}
  .m.w4{grid-column:span 4}
  .m.feature{grid-column:span 4}
  .m.feature .m-b h3{font-size:30px}
  .doc,.say,.money-grid,.visit{grid-template-columns:1fr;gap:38px}
  .doc-ph{max-width:260px}
  .doc{padding-top:44px}
  .doc > div:last-child{padding-bottom:52px}
  .doc-ph{max-width:320px}
  .say-ph{max-width:420px}
  .steps{grid-template-columns:repeat(2,1fr);gap:34px 26px}
  .book{grid-template-columns:1fr;padding:28px}
  .fgrid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:760px){
  :root{--r:14px;--hdr-h:70px}
  .docband{padding:52px 0}
  body{font-size:16.5px}
  .sec{padding:58px 0}
  .sec-sm{padding:44px 0}
  .wrap{padding:0 20px}
  h1{font-size:36px}h2{font-size:29px}h3{font-size:20px}
  .lead,.hero .lead{font-size:17.5px}
  .hdr > .wrap{height:70px;gap:12px}
  .brand img{height:36px}
  .hdr-tel{display:none}
  .tel-ico{display:grid}
  .hdr-end .btn{display:none}
  .hdr-end{gap:9px}
  .slides{height:auto;min-height:calc(500px + var(--hdr-h))}
  .slide{position:absolute}
  .slide-c h1,.slide-c h2{font-size:34px;line-height:1.08}
  .slide-c p{font-size:17px;margin-bottom:24px}
  .slide-c{padding-bottom:54px}
  /* A phone crops a landscape frame to about half its width, so WHICH half decides whether the
     headline lands on a face. The hero frames are chosen with their subject on the right and a quiet
     left side (see PIN in photos.js), so phones are shown that left side. */
  .slide img{object-position:26% 38%}
  .slide::after{background:linear-gradient(180deg,rgba(6,26,58,.62) 0%,rgba(6,26,58,.8) 55%,rgba(6,26,58,.92) 100%)}
  .s-dots{bottom:18px}
  .facts .wrap{grid-template-columns:1fr;gap:12px}
  .refs{grid-template-columns:1fr;gap:14px}
  .ref{flex-direction:row;align-items:stretch}
  .ref-img{flex:0 0 38%;aspect-ratio:auto}
  .ref-body{padding:16px 18px}
  .ref-body h3{font-size:18px}
  .mosaic{grid-template-columns:1fr;grid-auto-rows:auto;gap:14px}
  .m,.m.w3,.m.w4,.m.feature{grid-column:span 1;grid-row:span 1;min-height:250px}
  .m.feature .m-b h3{font-size:26px}
  .m.solid{min-height:0}
  .steps{grid-template-columns:1fr;gap:30px}
  .creds{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr;gap:32px}
  .book{padding:22px}
  .visit-ph{order:-1}
  body{padding-bottom:66px}
  .bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    box-shadow:0 -4px 18px rgba(20,24,31,.14)}
  .bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
    padding:18px 8px;font:600 16px/1 var(--text);background:var(--navy);color:#fff}
  .bar a + a{background:var(--teal);color:#08312F}
  .bar svg{width:17px;height:17px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
  .rv{opacity:1;transform:none}
}

/* ================= DESIGNED GROUNDS =================
   The client's note, twice: "the whole page seems kind of plain", then "its the same background
   colour the whole time, no design, the variation is barely a shade". The first pass was the
   mistake he is describing — hero, statement, checklist, steps, FAQ and related were all cream or
   sand, six sections of the same off-white separated by nothing but a tint.

   So the page now alternates properly. Reading down a treatment page:
       hero        cream + photograph
       statement   NAVY, one big white sentence
       signs       WHITE, bright, photograph
       stages      SAND, dot grid, photograph
       money       NAVY under a photograph
       faq         WHITE, cards on cream
       related     CREAM, photographs
       close       TEAL
   Light, dark, light, warm, dark, light, warm, colour. Nothing sits next to a section it could be
   mistaken for. */

/* The dot grid, shared. A section opts in by adding .tex. */
.tex{position:relative;isolation:isolate;overflow:hidden}
.tex > *{position:relative;z-index:2}
.tex::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(12,32,72,.30) 1.3px,transparent 1.3px);
  background-size:22px 22px;opacity:.16}

/* statement — the "in short" line is the argument of the whole page, so it gets the loudest
   treatment on it: a full navy band, white display type, the teal rule sitting on the dark. */
.statement{background:var(--navy);color:#fff;padding:104px 0;position:relative;isolation:isolate;
  overflow:hidden}
.statement::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.5) 1.3px,transparent 1.3px);
  background-size:24px 24px;opacity:.11}
.statement::after{content:"";position:absolute;right:-160px;top:-160px;width:520px;height:520px;
  border-radius:50%;background:var(--teal);opacity:.22;filter:blur(70px);z-index:0}
.statement .wrap{position:relative;z-index:2}
.statement i{background:var(--teal);width:72px;height:4px}
.statement p{color:#fff}

/* signs — bright white, so it reads as a clean break after the navy above it */
.signs{background:#fff}
.signs-ph{position:relative}
.signs-ph::before{content:"";position:absolute;right:-26px;bottom:-26px;width:62%;height:62%;
  border-radius:var(--r);background:var(--teal);opacity:.16;filter:blur(26px)}
.signs-ph img{position:relative;z-index:2}

/* stages — the warm one. Sand, dot grid, and a navy bloom in the corner. */
.stages{background:var(--sand);padding:92px 0}
.stages::after{content:"";position:absolute;right:-120px;top:-90px;width:420px;height:420px;
  border-radius:50%;background:var(--navy);opacity:.09;filter:blur(60px);z-index:0}

/* money band. It used to carry a photograph under the navy; at the right-hand end the gradient
   thinned to 82% and a face showed through behind the text, which looks like a mistake rather than a
   design. The ground is now the gradient and the dot grid alone - still not a flat colour field. */
.pmoney{position:relative;isolation:isolate;overflow:hidden;padding:88px 0}
.pmoney::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,var(--navy) 0%,var(--navy-d) 52%,var(--navy-x) 100%)}
.pmoney > .wrap{position:relative;z-index:3}
.pmoney.tex::before{z-index:2;background-image:radial-gradient(rgba(255,255,255,.55) 1.3px,transparent 1.3px);opacity:.10}

/* FAQ — white ground, the accordion lifted onto a cream card so it is an object on the page */
.faqwrap{background:#fff}
.faqwrap .faqs{background:var(--cream);border:1px solid var(--line);border-top:1px solid var(--line);
  border-radius:var(--r);padding:2px 32px;box-shadow:0 18px 44px rgba(12,32,72,.07)}
.faqwrap .faqs details{border-color:rgba(12,32,72,.10)}
.faqwrap .faqs details:last-child{border-bottom:none}

/* closing band — a lit corner rather than one flat teal */
.endcta{background:radial-gradient(130% 170% at 82% -10%,#7BD6D3 0%,var(--teal) 52%,#249A9A 100%)}
.endcta.tex::before{background-image:radial-gradient(rgba(8,49,47,.5) 1.3px,transparent 1.3px);opacity:.13}

/* prose pages (about, forms, privacy) must not be a white sheet either */
.sec.paper{background:radial-gradient(110% 130% at 100% 0%,var(--cream) 0%,#fff 46%,var(--cream) 100%)}

@media (max-width:760px){
  .statement{padding:60px 0}
  .stages{padding:62px 0}
  .pmoney{padding:62px 0}
  .faqwrap .faqs{padding:2px 20px}
}

/* stages — the numbered spine had a dead right half at 1440. A tall photograph fills it, placed on
   the LEFT so the section mirrors the checklist above rather than repeating its shape. */
.stages-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:start;margin-top:40px}
.stages-ph{position:sticky;top:calc(var(--hdr-h) + 26px)}
.stages-ph img{width:100%;aspect-ratio:3/4.1;object-fit:cover;object-position:50% 20%;
  border-radius:var(--r);box-shadow:0 22px 54px rgba(12,32,72,.14)}
.stages .spine{margin-top:0}
@media (max-width:1040px){
  .stages-grid{grid-template-columns:1fr;gap:34px}
  .stages-ph{position:static;max-width:420px}
  .stages-ph img{aspect-ratio:4/3}
}

/* A section head with no paragraph beside it should not leave half the row empty. */
.ref-head.one{grid-template-columns:1fr}
.ref-head.one h2{max-width:26ch}

/* Skip link: off-screen until it takes focus, then it lands under the sticky header. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font:600 15px/1 var(--text)}
.skip:focus{left:0}

/* The booking form's checkbox group is a fieldset now, for the legend. Strip the default chrome so
   it lays out exactly as the div it replaced. */
fieldset.fld{border:0;margin:0;padding:0;min-width:0}
fieldset.fld > legend{padding:0;font:600 14px/1.2 var(--text);color:var(--ink);margin-bottom:10px}

/* The soft blooms sit deliberately outside their boxes, which at 390px can widen the page and give
   the whole site a horizontal scrollbar. Clip them at the section instead of removing them. */
.statement,.signs{overflow:hidden}

/* The doctor panel. The only photograph of Dr. Malik is 313x313, so it is never drawn larger than
   that — stretched to fill the checklist column it was obviously soft. Instead the frame around it
   does the work: a tinted card with the dot grid and his name set beneath the cutout. */
.docpanel{position:relative;align-self:center;justify-self:center;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0%,#F2FBFA 0%,var(--teal-l) 60%,#D3EEEC 100%);
  border-radius:var(--r);padding:26px 26px 0;text-align:center;max-width:380px;width:100%;
  box-shadow:0 20px 50px rgba(12,32,72,.10)}
.docpanel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(8,49,47,.30) 1.3px,transparent 1.3px);
  background-size:20px 20px;opacity:.18}
.docpanel img{position:relative;z-index:2;display:block;margin:0 auto;
  width:313px;max-width:100%;height:auto}
.docpanel-name{position:relative;z-index:2;display:block;padding:14px 0 20px;
  font:600 18px/1.3 var(--head);color:var(--ink)}
.docpanel-name b{display:block;font:500 14px/1.4 var(--text);color:var(--muted);margin-top:4px}
@media (max-width:760px){ .docpanel{padding:20px 20px 0} }

/* Touch targets. On a phone the footer links were 19px tall with a 10px gap — accurate enough with
   a mouse, fiddly with a thumb. Padding the anchors themselves (not the list items) grows the tap
   area to ~40px without changing how the column looks. */
@media (max-width:900px){
  .foot ul{gap:2px}
  .foot ul a{display:block;padding:10px 0}
  .foot p a{display:inline-block;padding:9px 0}
}

/* Slider dots read as 4px bars but were also only 4px to hit. background-clip:content-box keeps the
   bar exactly as it looks while the padding gives a thumb something to land on. */
.s-dots button{padding:14px 0;height:32px;background-clip:content-box;box-sizing:border-box}
.s-dots button::after{content:none}

/* The phone number in the utility bar is a primary action on a phone; give it a real hit area. */
@media (max-width:900px){
  /* Not .hdr — forcing display here overrode the display:none that hides the header phone block
     below 1040px, which widened the header to 617px inside a 390px window and pushed the burger
     clean off the screen. Phones were left with no navigation at all. */
  .bar a[href^="tel:"],.ctr .lead a[href^="tel:"]{display:inline-flex;align-items:center;min-height:40px}
}

/* Header tier. The full nav plus the brand, the phone block and the Book button needs about 1360px;
   below that the Book button was being sliced off by the window edge, all the way down to the old
   1040px burger breakpoint. The switch to the burger happens at 1339 instead, so no laptop between
   1041 and 1333 gets a clipped header. Kept separate from the 1040 block, which handles page
   layout rather than the header. */
@media (max-width:1339px){
  .nav{display:none}
  .burger{display:block}
  .mnav{display:block}
}

/* The booking form's result panel. It replaces the fields on submit, so nobody can walk away
   believing a request was sent when there is no backend to receive it. */
#bookdone{background:#FFF4E2;border:1px solid #E8CFA4;border-radius:var(--r);padding:20px 24px}
#bookdone p{margin:0;font-size:17px;line-height:1.6;color:var(--ink)}
#bookdone a{border-bottom:1px solid var(--line);font-weight:600}
.book [aria-invalid=true]{border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.12)}

/* Caption legibility on the photo tiles.
   The tile scrim is a gradient over the whole tile, so it is only dark enough where the tile is
   tall. On a 236px desktop tile or a 250px phone tile the caption starts around 55% of the height,
   where the gradient is still nearly clear, and white 21px type landed straight on the photograph —
   1.1:1 in the worst case. This puts a second, short gradient directly behind the caption block, so
   the type always has a dark ground whatever the tile height. */
.m-b{isolation:isolate}
.m-b::before{content:"";position:absolute;left:0;right:0;bottom:0;top:-86px;z-index:-1;
  background:linear-gradient(180deg,rgba(6,26,58,0) 0%,rgba(6,26,58,.42) 26%,rgba(6,26,58,.80) 52%,rgba(6,26,58,.93) 78%,rgba(6,26,58,.96) 100%)}
/* The hero slides carry white type over a photograph. See the note in the patch history: the
   headline was landing on a face, so the text column is now a near-solid panel and the subject is
   pushed out of it. */
/* The hero slides carry white type over a photograph too; deepen their scrim at the text end. */
.slide::after{background:
  linear-gradient(180deg,rgba(6,26,58,.62) 0%,rgba(6,26,58,.28) 14%,rgba(6,26,58,0) 26%),
  linear-gradient(90deg,rgba(6,26,58,.94) 0%,rgba(6,26,58,.82) 38%,rgba(6,26,58,.34) 74%,rgba(6,26,58,.16) 100%)}

/* Closed state. The dot is the only colour cue on the header phone block, and it stayed the "open"
   teal at every hour of the day. Specificity here matches .hdr.over .hdr-tel .st i so the reversed
   header over the hero cannot re-green it. */
.st.shut i{background:#C2410C}
.hdr.over .hdr-tel .st.shut i{background:#FDBA74}
.hdr-tel .st.shut{color:#9A3412}
.hdr.over .hdr-tel .st.shut{color:#FED7AA}

/* The booking chips are custom-styled labels wrapping a native checkbox, so the focus ring landed
   on a control the eye cannot find. Put the ring on the chip the user is actually looking at. */
.chips label:has(input:focus-visible){outline:3px solid var(--teal);outline-offset:2px;border-radius:999px}
.chips input:focus-visible{outline:none}


/* ==================================================================================================
   OWNER CHANGE ROUND, 2026-09-18. One block per agent; edit only inside your own markers.
   ================================================================================================== */
/* ==== BRAND ==== */
/* Footer badges (tools/dental-v6/badges.js). A white tray, so every mark keeps its own colours: CDA's
   guidelines forbid recolouring, greyscale and dark grounds, which rules out white-on-navy logos.
   Heights are set by optical weight (about equal inked area), not one shared height: the CDA lockup
   is nearly square and dense, the Invisalign wordmark long and light. */
/* The association and brand marks. They were a pill floating in the middle of the footer, narrower
   than everything above them and clearly bolted on. Now they are a band the full width of the
   footer's own grid, so they line up with the columns and the base row, and the marks are large
   enough to be read rather than noticed. Full colour on white because CDA's identity guidelines
   forbid recolouring their mark or putting it on a dark or busy ground, and what suits one has to
   suit all three. The trademark line moved down to the legal row, where small print belongs. */
.foot .fbadges{margin:56px 0 0}
.foot .fbadges ul{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;
  gap:24px;margin:0;padding:30px 44px;list-style:none;background:#fff;border-radius:var(--r);
  box-shadow:0 10px 30px rgba(3,20,48,.18)}
.foot .fbadges li{display:flex;align-items:center;justify-content:center;min-width:0;
  position:relative}
/* Hairlines between the marks, so three logos read as one considered row rather than three
   unrelated pictures. Drawn on the element, not as a border, so the outer two stay clean. */
.foot .fbadges li+li::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:1px;height:46px;background:rgba(12,72,156,.14)}
.foot .fbadges img{display:block;width:auto;max-width:100%}
/* Sized by optical weight, not by a common height: the CDA maple leaf is dense and nearly square,
   the Invisalign wordmark long and light, the ODA mark a wide oval. */
.fbadges .b-cda{height:82px}
.fbadges .b-inv{height:46px}
.fbadges .b-oda{height:64px}
.foot .fbadges + .fbot{margin-top:34px}
@media (max-width:900px){
  .foot .fbadges ul{padding:26px 28px;gap:18px}
  .foot .fbadges li+li::before{left:-9px;height:38px}
  .fbadges .b-cda{height:66px}
  .fbadges .b-inv{height:37px}
  .fbadges .b-oda{height:52px}
}
@media (max-width:560px){
  /* Three across at 390 would put each mark under 90px wide. Stacked, each one gets the full
     width and stays legible; the hairline becomes the divider between rows. */
  .foot .fbadges{margin-top:40px}
  .foot .fbadges ul{grid-template-columns:1fr;gap:20px;padding:24px 20px}
  .foot .fbadges li+li::before{left:0;top:-10px;transform:none;width:100%;height:1px}
  .fbadges .b-cda{height:72px}
  .fbadges .b-inv{height:40px}
  .fbadges .b-oda{height:56px}
}
/* Dr. Malik in the home doctor band (img/dr-malik-cut.webp, head to waist). On a wide screen his
   waist line sits on the band's bottom edge. Once the band stacks, the photo sits above the text and
   the straight crop would float mid-band, so it fades out instead; and on a phone it is held smaller
   so the name and credentials are not pushed off the first screen. */
@media (max-width:1040px){
  /* The drop shadow moves to the wrapper: a mask on the img also clips the img's own shadow at its
     box, which drew a hard vertical line down beside his arm. */
  .doc-ph{filter:drop-shadow(0 20px 24px rgba(8,49,47,.26))}
  .doc-ph img{filter:none;-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
}
@media (max-width:760px){
  .doc-ph{max-width:250px}
}
/* The burger menu opens the white .mnav panel UNDER the header, but .over is set by scroll position
   alone, so at the top of the home page the header stayed reversed: the white logo, the white X and
   the white Book button all sat on white and vanished. Nothing was clickable that you could see.
   The menu is inside the header, so :has() can undo the reversal for exactly that state. This is a
   header fix living in the brand block because the reversed logo is what made it visible; move it
   up beside the other .hdr.over rules when this block is merged. */
.hdr.over:has(#mnav.open){background:#fff;border-color:var(--line)}
.hdr.over:has(#mnav.open) .brand img{filter:none}
.hdr.over:has(#mnav.open) .burger{border-color:var(--line);background:#fff}
.hdr.over:has(#mnav.open) .burger span,
.hdr.over:has(#mnav.open) .burger::before,
.hdr.over:has(#mnav.open) .burger::after{background:var(--ink)}
.hdr.over:has(#mnav.open) .tel-ico{border-color:var(--line);color:var(--navy)}
.hdr.over:has(#mnav.open) .btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.hdr.over:has(#mnav.open) .btn-navy:hover{background:var(--navy-d);border-color:var(--navy-d)}
.hdr.over:has(#mnav.open) .hdr-tel{color:var(--ink)}
.hdr.over:has(#mnav.open) .hdr-tel .num svg{color:var(--teal-d)}
.hdr.over:has(#mnav.open) .hdr-tel .st{color:var(--teal-d)}
.hdr.over:has(#mnav.open) .hdr-tel .st i{background:var(--teal)}
.hdr.over:has(#mnav.open) .hdr-tel .st.shut{color:#9A3412}
.hdr.over:has(#mnav.open) .hdr-tel .st.shut i{background:#C2410C}
.hdr.over:has(#mnav.open) .hdr-tel .st.maybe{color:#92400E}
.hdr.over:has(#mnav.open) .hdr-tel .st.maybe i{background:#D97706}
/* ==== /BRAND ==== */
/* ==== CLINIC ==== */
/* Real photographs of the office (img/clinic/, handed out by photos.js). They are cropped in the file
   around what matters, so the slot's own framing rules, written for stock portraits (keep the face
   near the top), are not what these need. Only the frames that need a nudge are listed. */
.phero-ph img[src$="clinic/xray-intraoral-arm.jpg"]{object-position:50% 50%}
.phero-ph img[src$="clinic/reception-desk.jpg"]{object-position:50% 62%}
.m img[src$="clinic/xray-panoramic-unit.jpg"]{object-position:50% 0%}
/* ==== /CLINIC ==== */
/* ==== TEAM ==== */
/* Our dentists (team.html, tools/dental-v6/team.js). The principal gets the large split on white,
   the two associates share a navy band as compact entries: not three equal cards. Every portrait
   sits in the same rounded 4:5 frame; Dr. Tanzeem's holds a monogram, because no photograph of her
   exists and a stock portrait of a doctor is banned. Frames size their type with cqi, so the
   monogram scales with the frame from 116px on a phone to 420px on a desktop. */
.tm{padding:92px 0}
.tm-a{display:grid;grid-template-columns:200px minmax(0,1fr);grid-template-areas:"ph hd" "ph bd";
  grid-template-rows:auto 1fr;gap:0 30px;align-items:start}
.tm-a.bare{grid-template-areas:"ph hd";grid-template-rows:auto}
.tm-ph{grid-area:ph;position:relative;container-type:inline-size}
.tm-hd{grid-area:hd}
.tm-bd{grid-area:bd}
.tm-ph img,.tm-mono{position:relative;z-index:2;display:block;width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover;object-position:50% 14%;border-radius:var(--r);box-shadow:var(--sh)}
.tm-hd h2{margin:0 0 8px;font-size:30px}
.tm-deg{margin:0;font:600 17px/1.45 var(--text);color:var(--navy);text-wrap:balance}
.tm-facts{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line)}
.tm-facts li{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);
  font:500 16.5px/1.45 var(--text);color:var(--ink)}
.tm-facts svg{width:19px;height:19px;flex:none;margin-top:2px;color:var(--teal-d)}
.tm-lab{margin:26px 0 2px;font:600 13px/1.2 var(--text);letter-spacing:.02em;color:var(--teal-d)}
.tm-links{display:grid;max-width:440px}
/* an associate's links end where the facts above them end, at any width, so the rules line up */
.tm-a:not(.big) .tm-links{max-width:none}
.tm-links a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--line);font:600 16.5px/1.3 var(--text);color:var(--ink);transition:.16s}
.tm-links svg{width:16px;height:16px;flex:none;color:var(--teal-d);transition:transform .16s}
.tm-links a:hover{color:var(--navy);padding-left:6px}
.tm-links a:hover svg{transform:translateX(4px)}
.tm-more{margin-top:26px;min-height:40px}

/* the monogram: the practice's tinted ground and dot grid, initials in the display face, and the
   split rule from the wordmark (navy, dot, teal) beneath them */
.tm-mono{display:grid;place-content:center;justify-items:center;gap:7cqi;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 0%,#F2FBFA 0%,var(--teal-l) 58%,#CFECEA 100%)}
.tm-mono::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(8,49,47,.34) 1.3px,transparent 1.3px);background-size:18px 18px;opacity:.2}
.tm-mono b{position:relative;font:600 36cqi/1 var(--head);letter-spacing:-.04em;color:var(--navy)}
.tm-rule{position:relative;display:flex;align-items:center;gap:3cqi}
.tm-rule i{display:block;width:17cqi;height:2px;background:var(--navy)}
.tm-rule i:last-child{background:var(--teal)}
.tm-rule em{display:block;width:6px;height:6px;border-radius:50%;background:var(--teal-d)}

/* principal: large portrait left, facts centred beside it, on white with a teal bloom and the dot
   grid fading out from behind the portrait */
.tm-top{background:#fff}
.tm-top.tex::before{-webkit-mask-image:linear-gradient(90deg,#000 0 26%,transparent 58%);
  mask-image:linear-gradient(90deg,#000 0 26%,transparent 58%)}
.tm-top::after{content:"";position:absolute;right:-160px;bottom:-200px;width:560px;height:560px;
  border-radius:50%;background:var(--teal);opacity:.13;filter:blur(80px);z-index:0}
.tm-a.big{grid-template-columns:minmax(0,420px) minmax(0,1fr);grid-template-areas:"ph ." "ph hd" "ph bd" "ph .";
  grid-template-rows:1fr auto auto 1fr;gap:0 76px}
.tm-a.big .tm-ph::before{content:"";position:absolute;left:-26px;bottom:-26px;width:64%;height:62%;
  border-radius:var(--r);background:var(--teal);opacity:.18;filter:blur(26px)}
.tm-a.big .tm-ph img{object-position:50% 9%;box-shadow:0 22px 54px rgba(12,32,72,.14)}
.tm-a.big h2{font-size:46px}
.tm-a.big .tm-deg{font-size:18.5px}
.tm-a.big .tm-facts,.tm-a.big .tm-links{max-width:520px}

/* associates: a navy band, two entries divided by a hairline */
.tm-pair{background:var(--navy);color:#fff}
.tm-pair.tex::before{background-image:radial-gradient(rgba(255,255,255,.5) 1.3px,transparent 1.3px);
  background-size:24px 24px;opacity:.11}
.tm-pair::after{content:"";position:absolute;right:-160px;top:-180px;width:540px;height:540px;
  border-radius:50%;background:var(--teal);opacity:.22;filter:blur(70px);z-index:0}
.tm-duo{display:grid;grid-template-columns:1fr 1fr;gap:0}
.tm-duo > .tm-a:first-child{padding-right:48px}
.tm-duo > .tm-a + .tm-a{padding-left:48px;border-left:1px solid rgba(255,255,255,.18)}
.tm-pair h2{color:#fff}
.tm-pair .kicker{color:#8FD8D8}
.tm-pair .kicker::before{background:#8FD8D8}
.tm-pair .tm-deg{color:#CDEFEE}
.tm-pair .tm-ph img,.tm-pair .tm-mono{box-shadow:0 18px 40px rgba(3,20,48,.35)}
.tm-pair .tm-facts{border-top-color:rgba(255,255,255,.2)}
.tm-pair .tm-facts li{color:#fff;border-bottom-color:rgba(255,255,255,.2)}
.tm-pair .tm-facts svg,.tm-pair .tm-links svg{color:#8FD8D8}
.tm-pair .tm-lab{color:#8FD8D8}
.tm-pair .tm-links a{color:#fff;border-bottom-color:rgba(255,255,255,.24)}
.tm-pair .tm-links a:hover{color:#fff}
.tm-note{margin:64px 0 0;padding-top:26px;border-top:1px solid rgba(255,255,255,.18);
  font:500 16.5px/1.55 var(--text);color:rgba(255,255,255,.88)}
.tm-note a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45)}
.tm-note a:hover{border-bottom-color:#fff}

@media (max-width:1180px){
  .tm-a.big{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:0 52px}
  .tm-a.big h2{font-size:40px}
  .tm-a:not(.big){grid-template-columns:170px minmax(0,1fr);gap:0 26px}
  .tm-duo > .tm-a:first-child{padding-right:36px}
  .tm-duo > .tm-a + .tm-a{padding-left:36px}
}
@media (max-width:1040px){
  .tm-a.big{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:0 40px}
  .tm-a.big h2{font-size:34px}
  .tm-a:not(.big){grid-template-columns:200px minmax(0,1fr);gap:0 32px}
  .tm-duo{grid-template-columns:1fr}
  .tm-duo > .tm-a:first-child{padding-right:0}
  .tm-duo > .tm-a + .tm-a{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.18);
    margin-top:44px;padding-top:44px}
  /* stacked, an entry with nothing under the name centres it on the frame instead of leaving it
     hanging at the top with an empty column below */
  .tm-a.bare{align-items:center}
}
/* Phones: the principal stacks, portrait first. An associate keeps a small frame beside the name,
   role and degree, with the facts and links running full width underneath. */
@media (max-width:760px){
  .tm{padding:58px 0}
  .tm-a.big{grid-template-columns:minmax(0,1fr);grid-template-areas:"ph" "hd" "bd";
    grid-template-rows:auto;gap:28px 0}
  .tm-a.big .tm-ph{max-width:360px}
  .tm-a.big .tm-ph img{aspect-ratio:1/1.08}
  .tm-a.big .tm-ph::before{left:-14px;bottom:-14px}
  .tm-a.big h2{font-size:32px}
  .tm-a.big .tm-deg{font-size:17px}
  .tm-a.big .tm-facts{margin-top:0}
  .tm-a:not(.big){grid-template-columns:112px minmax(0,1fr);grid-template-areas:"ph hd" "bd bd";
    grid-template-rows:auto;gap:20px 18px;align-items:center}
  .tm-a.bare{grid-template-areas:"ph hd"}
  .tm-a:not(.big) .kicker{margin-bottom:10px}
  .tm-hd h2{font-size:23px;margin-bottom:6px}
  .tm-deg{font-size:15.5px}
  .tm-a:not(.big) .tm-facts{margin-top:0}
  .tm-links{max-width:none}
  .tm-duo > .tm-a + .tm-a{margin-top:36px;padding-top:36px}
  .tm-note{margin-top:44px}
}
/* the narrowest phones: a 112px frame leaves the name column too narrow for "Associate dentist" on
   one line, so the frame gives up 16px */
@media (max-width:360px){
  .tm-a:not(.big){grid-template-columns:96px minmax(0,1fr);gap:20px 16px}
}
/* ==== /TEAM ==== */
/* ==== FORMS ==== */
/* The patient-forms page is styled in the FORMS2 block at the end of this file, where the
   whole set of five forms was rebuilt. Nothing lives here. */
/* ==== /FORMS ==== */
/* ==== PATIENTINFO ==== */
/* patient-information.html and cdcp.html (tools/dental-v6/patientinfo.js). Both pages are built from
   the site's own shapes (split header, statement, stages spine, checklist, the FAQ accordion card,
   steps, the navy band, the teal close). Only what they needed and nothing else had is new here:
   an accordion of ruled label/answer rows with an hours aside, the co-payment table, the coverage
   grid, the not-covered list on navy, and the apply cards. */

/* In-sentence links. `.ul` carries no style, so a link in running text was navy on grey with nothing
   else to set it apart (WCAG 1.4.1). This one is underlined. */
.pl{color:var(--navy);font-weight:600;border-bottom:1px solid rgba(12,72,156,.35);transition:border-color .16s}
.pl:hover{border-bottom-color:var(--navy)}
.pl[href^="tel:"]{white-space:nowrap}   /* "1-" was left at a line end on its own */

/* ---- patient information: the five panels beside the hours ---- */
.pi-accsec::after{content:"";position:absolute;left:-200px;bottom:-200px;width:560px;height:560px;
  border-radius:50%;background:var(--teal);opacity:.13;filter:blur(80px);z-index:0;pointer-events:none}
.pi-grid{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:40px;align-items:start}
.faqwrap .pi-acc{margin-top:0;max-width:none}
.pi-t{display:flex;align-items:baseline;gap:16px}
.pi-t b{font:600 14px/1 var(--text);color:var(--teal-d);font-variant-numeric:tabular-nums;flex:none}
.pi-rows{margin:0;display:grid}
.pi-rows > div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:4px 26px;padding:15px 0;
  border-top:1px solid rgba(12,32,72,.09)}
.pi-rows > div:first-child{border-top:0;padding-top:2px}
.pi-rows dt{font:600 16px/1.5 var(--text);color:var(--ink)}
.pi-rows dd{margin:0;font-size:16.5px;line-height:1.6;color:var(--body);overflow-wrap:anywhere}
/* Not sticky: the .tex ground is overflow:hidden, which makes the section the sticky element's
   scroll container, so it never stuck and was pushed 84px down its column instead. */
.pi-side{background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:26px 24px 24px;box-shadow:0 18px 44px rgba(12,32,72,.07)}
.pi-side h2{font-size:22px;margin:0}
.pi-side h2.pi-side-h2{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.pi-side .hours{margin-top:14px}
.pi-side .hours th,.pi-side .hours td{padding:10px 14px;font-size:15px}
.pi-side .hours td{white-space:nowrap}
.pi-side p{font-size:15.5px;line-height:1.55;margin:12px 0 0}

/* infection control. With a real photograph it is the site's checklist-beside-a-photo; without one,
   the same list on sand in two columns, never a stand-in picture. */
.pi-ticks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pi-ticks li{display:flex;align-items:flex-start;gap:14px;padding:17px 0;border-bottom:1px solid var(--line);
  font:500 17.5px/1.5 var(--text);color:var(--ink)}
.pi-ticks svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--teal-d)}
.pi-ster-np .pi-ticks{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;margin-top:30px;border-top:0}
.pi-ster-np .pi-ticks li:nth-child(-n+2){border-top:1px solid var(--line)}

/* ---- CDCP ---- */
.pi-two{display:grid;grid-template-columns:1.3fr .7fr;gap:56px;align-items:start;margin-top:42px}
.pi-two .spine{margin-top:0}
.pi-elig .spine h3{font-size:20px;line-height:1.3}
.pi-notes{display:grid;gap:16px}
.pi-note{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;
  box-shadow:0 10px 30px rgba(12,32,72,.06)}
.pi-note h3{font-size:18px;margin-bottom:8px}
.pi-note p{margin:0;font-size:15.5px;line-height:1.6}

.pi-two-even{grid-template-columns:1.05fr .95fr;align-items:center;margin-top:0}
.pi-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-top:28px;box-shadow:0 14px 36px rgba(12,32,72,.07)}
.pi-table th,.pi-table td{padding:17px 20px;text-align:left;border-bottom:1px solid var(--line)}
.pi-table thead th{background:var(--navy);color:#fff;font:600 14px/1.3 var(--text);border-bottom:0}
.pi-table tbody th{font:600 17px/1.35 var(--text);color:var(--ink)}
.pi-table td{font:700 24px/1 var(--head);color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.pi-table td:last-child{color:var(--teal-d)}
.pi-table tbody tr:last-child th,.pi-table tbody tr:last-child td{border-bottom:0}
.pi-tnote{margin:12px 0 0;font-size:15px;color:var(--muted)}
.pi-ticks-pay li{font-size:17px}

.pi-cov{background:radial-gradient(120% 90% at 0% 0%,var(--teal-l) 0%,#fff 52%,var(--cream) 100%)}
.pi-covgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.pi-cg{background:#fff;border:1px solid var(--line);border-top:3px solid var(--teal);border-radius:var(--r);
  padding:22px 22px 14px;box-shadow:var(--sh)}
.pi-cg h3{font-size:19px;margin-bottom:8px}
.pi-cg ul{list-style:none;margin:0;padding:0}
.pi-cg li{padding:10px 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.45;color:var(--ink)}
.pi-cg li:first-child{border-top:0}
.pi-pa{display:block;margin-top:5px;font:600 13px/1.2 var(--text);color:var(--teal-d);letter-spacing:.01em}
.pi-pa::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal);
  margin-right:7px;vertical-align:1px}
.pi-legend{margin-top:28px;display:grid;gap:8px;max-width:860px}
.pi-legend p{margin:0;font-size:15.5px;line-height:1.6}
.pi-legend .pi-pa{display:inline-block;margin:0 8px 0 0}

/* The heading column of this band is short and the list beside it is ten rows deep; left-aligned to
   the top it left a hole of empty navy the height of the section. Centred, the heading sits against
   the middle of the list. (Above 1040 only: below that the grid is one column.) */
.pi-not .pmoney-grid{align-items:center}
.pi-not .pi-nonote{max-width:34ch}
.pi-nolist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.pi-nolist li{position:relative;padding:13px 0 13px 24px;border-bottom:1px solid rgba(255,255,255,.18);
  font:500 16.5px/1.45 var(--text);color:#fff}
.pi-nolist li::before{content:"";position:absolute;left:0;top:24px;width:12px;height:2px;background:#8FD8D8}
.pi-nolist li:first-child{grid-column:1/-1}
.pmoney p.pi-nonote{margin:20px 0 0;font-size:15.5px;color:rgba(255,255,255,.84)}
.pi-not .pl{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
.pi-not .pl:hover{border-bottom-color:#fff}

.pi-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.pi-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 20px;box-shadow:var(--sh)}
.pi-card h3{font-size:20px;margin-bottom:10px}
.pi-card p{font-size:16px;line-height:1.6;margin:0 0 10px}
.pi-after{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:34px;padding-top:30px;
  border-top:1px solid rgba(12,32,72,.12)}
.pi-after h3{font-size:19px;margin-bottom:8px}
.pi-after p{margin:0;font-size:16.5px;line-height:1.65}
.pi-scam{display:inline-block;margin:28px 0 0;background:#fff;border-left:4px solid var(--teal);
  border-radius:var(--r-sm);padding:13px 20px;font:600 16.5px/1.45 var(--text);color:var(--ink)}

.pi-here{background:radial-gradient(90% 120% at 100% 100%,var(--teal-l) 0%,#fff 58%)}
.pi-here h2{max-width:22ch}
.pi-checked{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);display:grid;gap:6px}
.pi-checked p{margin:0;font-size:15.5px;line-height:1.6}
.pi-checked .pi-date{font:600 14px/1.4 var(--text);color:var(--muted)}

@media (max-width:1180px){
  .pi-covgrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1040px){
  .pi-grid,.pi-two,.pi-two-even{grid-template-columns:minmax(0,1fr);gap:34px}
  .pi-covgrid{grid-template-columns:repeat(2,1fr)}
  .pi-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .pi-rows > div{grid-template-columns:1fr;gap:3px}
  .pi-t{gap:12px}
  .pi-ster-np .pi-ticks{grid-template-columns:1fr}
  .pi-ster-np .pi-ticks li:nth-child(2){border-top:0}
  .pi-ticks li{font-size:16.5px}
  .pi-elig .spine h3{font-size:18px}
  .pi-table th,.pi-table td{padding:13px 12px}
  .pi-table thead th{font-size:13px}
  .pi-table tbody th{font-size:15px}
  .pi-table td{font-size:20px}
  .pi-covgrid,.pi-cards,.pi-after,.pi-nolist{grid-template-columns:1fr}
  .pi-side{padding:22px 18px 20px}
  .pi-side .hours th,.pi-side .hours td{padding:10px 12px}
  .pi-covgrid{gap:12px;margin-top:28px}
  .pi-cg{padding:18px 20px 10px}
  .pi-cg li{padding:8px 0}
  .pi-after{gap:22px}
  .pi-scam{display:block}
}
@media (max-width:380px){
  .pi-side .hours td{white-space:normal}
}
/* ==== /PATIENTINFO ==== */
/* ==== REFERRALS ==== */
/* referrals.html: the dentists' form sits on NAVY (the page header above it is cream, so the two
   cannot be mistaken for each other), the patients' part closes the page on the lit TEAL ground.
   contact.html#parking: a navy band between the light hours block and the cream booking form, with
   a drawn route diagram on a light card. The 'place' photo pool has no spare frame, and a picture of
   the walk is more use here than a stock street anyway. */
/* overflow:CLIP, not hidden. Both clip the teal bloom below, but `hidden` also makes the section a
   scroll container, and position:sticky inside a scroll container that never scrolls never sticks:
   .rf-aside scrolled straight off the top AND sat 116px below the form (the sticky offset applied
   against the section's own box). `clip` clips without the scrollport, so the aside sticks. */
.rf-dent,.park{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--navy);
  color:rgba(255,255,255,.86);padding:92px 0}
.rf-dent::before,.park::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.5) 1.3px,transparent 1.3px);
  background-size:24px 24px;opacity:.10}
.rf-dent::after,.park::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:var(--teal);opacity:.2;filter:blur(80px);z-index:0;pointer-events:none}
.rf-dent::after{left:-200px;bottom:-220px}
.park::after{right:-180px;top:-200px}
.rf-dent > .wrap,.park > .wrap{position:relative;z-index:2}
.rf-dent h2,.park h2{color:#fff}
.rf-dent .kicker,.park .kicker{color:#8FD8D8}
.rf-dent .kicker::before,.park .kicker::before{background:#8FD8D8}

/* dentists: a short aside, then the form */
.rf-grid{display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);gap:56px;align-items:start}
.rf-aside{position:sticky;top:calc(var(--hdr-h) + 26px)}
.rf-aside h2{margin-bottom:0}
.rf-info{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.2)}
.rf-info li{display:flex;align-items:flex-start;gap:13px;padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.2);font:500 16.5px/1.5 var(--text);color:#fff}
.rf-info svg{width:20px;height:20px;flex:none;margin-top:2px;color:#8FD8D8}
.rf-info a{color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.5)}
.rf-info a:hover{border-color:#fff}

.rform{box-shadow:0 26px 60px rgba(0,0,0,.22);border-color:transparent}
fieldset.rf-set > legend{font:600 19px/1.2 var(--head);letter-spacing:-.01em;color:var(--ink);margin-bottom:16px}
.rf-set + .rf-set,.rform > .fld.full{padding-top:4px}
.rf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.rf-row3{grid-template-columns:1.3fr 1fr 1fr}
.rf-groups{display:grid;gap:16px}
.rf-gl{display:block;font:600 13px/1 var(--text);letter-spacing:.02em;color:var(--teal-d);margin-bottom:9px}
.rform .chips input[type=radio]{accent-color:var(--navy)}
.rform input[type=file]{padding:12px 14px;cursor:pointer}
.rf-hint{font-size:14.5px;color:var(--muted)}
.rf-consent label{display:flex;align-items:flex-start;gap:11px;font:500 16px/1.5 var(--text);color:var(--ink);cursor:pointer}
.rf-consent input{width:19px;height:19px;flex:none;margin:2px 0 0;accent-color:var(--navy)}
.rf-consent input[aria-invalid=true]{outline:2px solid #B3261E;outline-offset:2px}
.rf-submit{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.rf-done{background:#FFF4E2;border:1px solid #E8CFA4;border-radius:var(--r);padding:20px 24px}
.rf-done p{margin:0;font-size:17px;line-height:1.6;color:var(--ink)}
.rf-done a{border-bottom:1px solid var(--line);font-weight:600}
.rf-done:focus{outline:3px solid var(--teal);outline-offset:3px}

/* patients: the closing band, lit teal like every page's last section */
.rf-pat{background:radial-gradient(130% 170% at 82% -10%,#7BD6D3 0%,var(--teal) 52%,#249A9A 100%);
  color:#08312F;padding:84px 0}
.rf-pat.tex::before{background-image:radial-gradient(rgba(8,49,47,.5) 1.3px,transparent 1.3px);opacity:.13}
.rf-pat .kicker{color:#08312F}
.rf-pat .kicker::before{background:#08312F}
.rf-pat h2{color:#08312F;max-width:22ch}
.rf-pat-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 56px;margin:30px 0 34px;max-width:980px}
.rf-pat-grid > div{border-left:3px solid rgba(8,49,47,.5);padding-left:22px}
.rf-pat h3{color:#08312F;font-size:21px;margin-bottom:6px}
.rf-pat p{margin:0;color:#06302E;font-size:17.5px;line-height:1.6;max-width:44ch}
.rf-pat .btns{display:flex;gap:12px;flex-wrap:wrap}
.rf-pat .btn-ink{background:#08312F;color:#fff;border-color:#08312F}
.rf-pat .btn-ink:hover{background:#062422;transform:translateY(-2px)}

/* contact page: parking */
.park-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:64px;align-items:center}
.park h2{max-width:none;margin-bottom:0}
.park-steps{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:22px}
.park-steps li{display:grid;grid-template-columns:42px 1fr;gap:18px;align-items:start}
.park-steps b{width:42px;height:42px;border-radius:50%;background:#fff;color:var(--navy);
  display:grid;place-items:center;font:700 16px/1 var(--text)}
.park-steps h3{color:#fff;font-size:20px;margin:8px 0 4px}
.park-steps p{margin:0;color:rgba(255,255,255,.86);font-size:16.5px;line-height:1.55;max-width:46ch}
.park-notes{list-style:none;margin:30px 0 30px;padding:0;border-top:1px solid rgba(255,255,255,.2)}
.park-notes li{display:flex;align-items:flex-start;gap:13px;padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.2);font:500 16px/1.5 var(--text);color:#fff}
.park-notes svg{width:20px;height:20px;flex:none;margin-top:2px;color:#8FD8D8}
.park-map{margin:0;background:#fff;color:var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.26);
  max-width:460px;justify-self:end;width:100%}
.park-map svg{display:block;width:100%;height:auto}
.park-map text{font-family:var(--text)}
.park-map .pm-st{font-size:11.5px;font-weight:600;letter-spacing:.09em;fill:#646E7C}
.park-map .pm-b{font-size:16px;font-weight:700}
.park-map .pm-s{font-size:13.5px}
.park-map .pm-xs{font-size:12.5px}
.park-map .pm-p{font-size:24px;font-weight:700;font-family:var(--head)}
.park-map figcaption{font-size:13px;line-height:1.45;color:var(--muted);padding:12px 18px 14px}

@media (max-width:1040px){
  .rf-grid,.park-grid{grid-template-columns:1fr;gap:40px}
  .rf-aside{position:static}
  .park-map{justify-self:start}
}
@media (max-width:760px){
  .rf-dent,.park{padding:58px 0}
  .rf-pat{padding:58px 0}
  .rf-row,.rf-row3{grid-template-columns:1fr}
  .rf-pat-grid{grid-template-columns:1fr;gap:22px}
  .rf-pat p{font-size:16.5px}
  .park-steps h3{font-size:18.5px}
  /* seventeen pills one to a row made the form a 3000px scroll on a phone: two to a row, as cells */
  .rf-g .chips{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .rf-g .chips label{border-radius:var(--r-sm);padding:10px 11px;font-size:14.5px;line-height:1.3;align-items:flex-start}
  .rf-g .chips input{margin-top:1px}
}
/* ==== /REFERRALS ==== */
/* ==== CATGRID ==== */
/* The services category grid. The owner liked Edition Dental's six photo tiles: a hard caption bar
   across the foot of each photograph, a bold uppercase label in it. Adapted rather than copied:
   ten groups on the site's deep navy with the dot grid, the site's radius, and a navy caption bar
   with a teal rule instead of Edition's grey one.
   Edition rests its photos in black and white. That was tried here and dropped after looking at it:
   navy-toned monochrome on a navy ground turned ten different faces into ten near-identical blue
   rectangles, and because the effect could only run under (hover:hover) a phone saw colour while a
   laptop saw grey — the same page in two registers, on a site where most visitors are on phones.
   The photographs ARE the argument for each area, so they rest in colour on every device, under a
   10% navy veil that seats them on the band. The pointer gets the lift instead: the veil goes, the
   frame grows 4.5% and the caption bar brightens to the brand navy.
   Caption contrast, measured on the rendered pixels along the text line of all ten tiles: worst
   12.49:1 at 1440 and 12.13:1 at 390 (AA needs 4.5), the bar being rgba(navy,.86) over the veil. */
.catgrid{background:var(--navy-x);padding:48px 0 56px}
.catgrid.tex::before{background-image:radial-gradient(rgba(255,255,255,.6) 1.3px,transparent 1.3px);opacity:.10}
.cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
/* The label is sized to its own tile (cqi = 1% of the tile's width), so the longest group name,
   PROSTHODONTICS, can never run past the bar at any width; the cap keeps short names from growing. */
.cat{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;
  background:var(--navy);isolation:isolate;container-type:inline-size}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;
  transition:transform .5s ease}
.cat-l{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;
  min-height:74px;padding:12px 16px;background:rgba(6,26,58,.86);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-top:3px solid var(--teal);
  color:#fff;font:700 16.5px/1.2 var(--text);font-size:min(16.5px,7.6cqi);letter-spacing:.035em;
  text-transform:uppercase}
.cat:focus-visible{outline:3px solid #8FD8D8;outline-offset:3px}
.cat::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:#061A3A;
  opacity:.10;transition:opacity .4s ease}
.cat-l{transition:background .3s}
.cat:hover::before,.cat:focus-visible::before{opacity:0}
.cat:hover img,.cat:focus-visible img{transform:scale(1.045)}
.cat:hover .cat-l,.cat:focus-visible .cat-l{background:rgba(12,72,156,.86)}
@media (max-width:1180px){
  .cat-l{font-size:min(15px,7.7cqi);letter-spacing:.025em;padding:12px 14px}
}
/* Two columns from the site's usual 1040 break: five across below it leaves tiles too narrow to
   label. Ten tiles never split into three columns without an orphan. */
@media (max-width:1040px){
  .cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .cat{aspect-ratio:16/9}
  .cat-l{font-size:18px;min-height:0;padding:14px 18px}
}
/* Phones: still two across, so all ten areas fit in about one screen. Tracking comes off here —
   uppercase needs it less at this size than it needs the width. */
@media (max-width:760px){
  .catgrid{padding:28px 0 32px}
  .cats{gap:12px}
  .cat{aspect-ratio:1/1.08}
  .cat-l{font-size:min(15px,8.7cqi);letter-spacing:0;min-height:56px;padding:9px 12px}
}
/* Below 360px two columns would need an 11px label, so the tiles stack. */
@media (max-width:359px){
  .cats{grid-template-columns:1fr}
  .cat{aspect-ratio:16/9}
  .cat-l{font-size:15px;min-height:0}
}
/* The grouped list under the grid: no extra top margin (the section padding is enough), and on a
   phone the group name wraps above its count instead of beside it. */
.catgrid + .sec .grouplist{margin-top:0}
@media (max-width:760px){
  .grouplist{gap:44px}
  .grouplist h2{font-size:23px}
  .grouplist .gl-head{flex-wrap:wrap;gap:4px 12px}
}
/* ==== /CATGRID ==== */
/* ==== PROD ==== */
/* The legal row's links were 19px tall on a phone - under the 24px minimum a finger needs (WCAG
   2.5.8). The footer's column links were padded in an earlier pass and this row was missed. */
.fbot a{display:inline-block;padding:5px 0}
/* A link that IS the whole paragraph is a call to action, not an inline reference, so it needs the
   same 24px as a button. Links inside a sentence are exempt and stay as they are. */
p > a.pl:only-child{display:inline-block;padding:4px 0}
/* Footer column links were padded at phone width only, so on a desktop they were 19px tall - under
   the 24px minimum, which applies to a mouse as much as a finger. A list of links is not a sentence,
   so none of them is exempt. */
.foot ul a{display:inline-block;padding:3px 0}
.fcon p a{display:inline-block;padding:3px 0}

/* The trademark acknowledgement now sits in the legal row; it is small print and should look it. */
.fbot .ftm{color:rgba(255,255,255,.5);font-size:13px}
@media (max-width:760px){ .fbot .ftm{font-size:12.5px} }

/* The honeypot: off-screen rather than display:none, because some bots skip hidden inputs and some
   password managers fill them. A real person never reaches it - it is out of the tab order too. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* The one place the site tells someone what happened to their request. Three tones: neutral while
   nothing has happened, good when the server confirmed it, bad when it did not - and "bad" must be
   as findable as "good", because it carries the phone number. */
.formout{margin-top:6px;padding:20px 22px;border-radius:var(--r);border:2px solid var(--line);
  background:#fff;font:400 17px/1.55 var(--text);color:var(--ink)}
.formout p{margin:0}
.formout a{font-weight:600;border-bottom:2px solid currentColor}
.formout.good{border-color:var(--teal);background:var(--teal-l)}
.formout.bad{border-color:#C2410C;background:#FFF5F0}
.formout:focus{outline:3px solid var(--teal);outline-offset:3px}
@media (max-width:600px){ .formout{padding:16px 16px;font-size:16px} }
/* ==== /PROD ==== */
/* ==== HOURS ==== */
/* The new-patient form, offered where someone is already deciding to come in. One line, a document
   icon and a sentence saying what it saves them; not a second call to action competing with Book. */
/* The forms, named at the point of booking. One chip per form, each landing on that form's own card
   on the forms page - a patient who needs the child form or a records transfer should not have to
   discover that the set exists. */
.bookform-dl{margin:22px 0 0;text-align:center}
.bookform-dl > p{margin:0 0 12px;font:400 16px/1.5 var(--text);color:var(--body)}
.bookform-dl ul{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;
  list-style:none;margin:0;padding:0}
.bookform-dl a{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--text);color:var(--navy);
  border:2px solid var(--line);border-radius:999px;padding:10px 16px;background:#fff;transition:.16s}
.bookform-dl a:hover{border-color:var(--navy);transform:translateY(-1px)}
.bookform-dl a svg{width:17px;height:17px;color:var(--teal-d);flex:none}
@media (max-width:600px){ .bookform-dl a{font-size:14.5px;padding:9px 13px} }

/* Arriving from one of those chips, the card says so for a moment rather than leaving the visitor to
   work out which of five forms they were sent to. */
.fm-card:target,.fm-list li:target{outline:3px solid var(--teal);outline-offset:6px;border-radius:var(--r)}
[id^="form-"]{scroll-margin-top:110px}

/* Alternate Saturdays: until the practice says which ones, a Saturday is neither open nor shut. */
.st.maybe i{background:#D97706}
.hdr.over .hdr-tel .st.maybe i{background:#FCD34D}
.hdr-tel .st.maybe{color:#92400E}
.hdr.over .hdr-tel .st.maybe{color:#FDE68A}
.open-now.st.shut i{background:#C2410C}
.hours td small{display:block;font:500 13.5px/1.3 var(--text);color:var(--muted);margin-top:3px}
.fhrs em{font-style:normal;font-size:13px;color:rgba(255,255,255,.66)}
.doc-assoc{margin:18px 0 22px;font:500 17px/1.5 var(--text);color:var(--body)}
.doc .btns{display:flex;flex-wrap:wrap;gap:12px}
/* A backstop for the header status line: whatever it says, it may never widen the header and push
   the Book button off the page (it did, by 112px, once Saturdays needed explaining). */
.hdr-tel{min-width:0}
.hdr-tel .st{max-width:250px;white-space:nowrap;overflow:hidden}
.hdr-tel .st span{overflow:hidden;text-overflow:ellipsis}
/* ==== /HOURS ==== */

/* ==== FIXES ==== */
/* The split page header, measured. `.phero-ph` is a LANDSCAPE box at every width —
   691x520 (1.33:1) at 1440, 566x520 (1.09:1) at 1180, 1024x340 (3.01:1) at 1024,
   768x340 (2.26:1) at 768, 760x240 (3.17:1) at 760 and 390x240 (1.63:1) at 390 — and page.js
   hands it a 2:3 PORTRAIT frame. A portrait in a 3:1 box shows 22% of its own height: at the two
   stacked widths heads were cut off at the chin and several headers were a band of wall or trees.
   Fixed here rather than by asking photos.js for a wide frame, because that would move ~45 slots
   out of the tall pools into the wide ones while the library is being refetched, and three
   families (paperwork, help, family-life) have no wide frames at all.
   1. The stacked header keeps a 5:3 box instead of a fixed 340/240px strip, so the ratio tops out
      near 1.9:1 and a portrait keeps 35-40% of its height instead of 22%.
      After: 691x520 at 1440, 500x520 at 1041, 1024x540 at 1024, 768x461 at 768, 390x234 at 390.
   2. The crop point moves from 24% down the overflow to 6%. 24% cut heads off at the chin; 12%
      still shaved the top of the skull off six of the 45 frames, because the box only shows 39-53%
      of a 2:3 portrait and 12% of that overflow is 6-8% of the whole picture. Measured on the
      frames themselves: heads in this library start between 3% and 12% down, so 6% (a 3-4% bite)
      clears all but a face that is already touching the top edge of its own file. The per-file
      overrides on the clinic photographs above are more specific and still win.
   3. Four families are not portraits and must NOT be cropped to the top: `equipment` is rooms and
      chairs (subject 30-90% down), `rest` is someone lying or waking (40-80%), `paperwork` is
      hands and documents (20-75%), `sport` is a player in the middle of the frame. Keyed on the
      family prefix, not the file name, so they survive the library being re-fetched — a per-file
      rule would go stale the moment PH.next hands the slot a different frame.
   4. What is left after this is not a crop problem and must not be chased here. Four frames put
      their subject BELOW the window at every setting — children-tall4 (a girl under a big white
      canopy), children-tall7 (a skate park, figure tiny), older-adults-tall14 (a couple at 55-90%
      behind a blind) and women-tall25 (a woman at 55-100%). Cull them in photos.js and refill;
      no single object-position serves both a head-and-shoulders portrait and those. */
.phero-ph img{object-position:50% 6%}
.phero-ph img[src*="/equipment-"]{object-position:50% 50%}
.phero-ph img[src*="/rest-"]{object-position:50% 50%}
.phero-ph img[src*="/paperwork-"]{object-position:50% 32%}
.phero-ph img[src*="/sport-"]{object-position:50% 40%}
@media (max-width:1040px){
  .phero-ph{min-height:min(60vw,580px)}
}
@media (max-width:760px){
  .phero-ph{min-height:60vw}
}
/* 1024 is the tightest window on the site: the box is 1024x580 (1.77:1), so a 2:3 frame scales to
   1536px tall behind it and only 38% of the picture is ever on screen — against 53% at 1440 and
   44% at 390. Start that narrow window at 6% and it ends at 42%, which loses the face of any frame
   whose subject sits mid-height: teeth-whitening was a headscarf and no face, veneers a forehead.
   This band alone starts lower, so the same 38% lands over the face. Measured after: 6.8%-45% at
   1024, 6.6%-47% at 768. It is a base-specificity rule, so the four family overrides above still
   win inside it. */
@media (min-width:761px) and (max-width:1040px){
  .phero-ph img{object-position:50% 11%}
}
/* ==== /FIXES ==== */
/* ==== FORMS2 ==== */
/* Patient forms. Five of them (adult and child new-patient, medical history update, orthodontic
   intake, records transfer), so the page cannot be one download card repeated five times — the
   client rejects identical repeated blocks. It runs in three movements instead:
     1  .fm       warm sand ground, the TWO new-patient forms as a pair of real first pages you can
                  see, tilted opposite ways so a pair reads as a choice rather than a repeat
     2  .fm-how   navy band, what happens after you download one
     3  .fm-rest  cream ground with a dot grid, the other three as a ruled LIST — a different
                  archetype, and rows whose lengths differ, so the eye never sees a tile again
   Every form states the same three things: what it is, who needs it, how long it takes. */

.fm{background:linear-gradient(165deg,var(--sand) 0%,var(--cream) 58%,#fff 100%)}
.fm::after{content:"";position:absolute;left:-140px;bottom:-160px;width:460px;height:460px;border-radius:50%;
  background:var(--teal);opacity:.14;filter:blur(70px);z-index:0;pointer-events:none}
.fm-top{max-width:760px;margin-bottom:56px}
.fm-top h2{margin-bottom:16px}
.fm-top p{margin:0;font-size:18.5px;line-height:1.65;color:var(--body);max-width:62ch}

.fm-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:start}
.fm-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:38px 38px 40px;box-shadow:var(--sh)}
/* The sheet is a picture OF the form, not a second link to it: the markup hides it from assistive
   tech and from the keyboard, because the two buttons below say the same thing in words. */
.fm-sheets{position:relative;display:block;width:100%;max-width:212px;margin-bottom:34px}
.fm-sheets img,.fm-back{border-radius:6px;
  box-shadow:0 1px 3px rgba(12,32,72,.10),0 22px 46px rgba(12,32,72,.15)}
.fm-sheets img{position:relative;z-index:2;width:100%;height:auto;background:#fff;
  transform:rotate(-2deg);transition:transform .25s ease}
.fm-back{position:absolute;inset:0;z-index:1;background:#fff;border:1px solid var(--line);
  transform:rotate(3.5deg) translate(14px,7px)}
.fm-card:nth-child(2) .fm-sheets img{transform:rotate(2deg)}
.fm-card:nth-child(2) .fm-back{transform:rotate(-3.5deg) translate(-14px,7px)}
.fm-card:hover .fm-sheets img{transform:rotate(-1deg) translateY(-7px)}
.fm-card:nth-child(2):hover .fm-sheets img{transform:rotate(1deg) translateY(-7px)}
/* which of the two this is, said loudly: picking the wrong one wastes a trip */
.fm-tag{display:inline-block;font:600 16px/1 var(--text);color:var(--teal-d);
  padding-bottom:9px;border-bottom:2px solid var(--teal);margin-bottom:18px}
.fm-card h3{font-size:30px;margin:0 0 12px}
.fm-card p{margin:0 0 14px;font-size:17px;line-height:1.62;color:var(--body)}
.fm-who b{color:var(--ink);font-weight:600}
.fm-meta{font-size:15.5px;line-height:1.5;color:var(--muted);margin-bottom:26px}
.fm-card .fm-meta{margin-bottom:26px}
.fm-btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---- 2: what happens next ---- */
.fm-how{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:#fff;padding:84px 0}
.fm-how::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.5) 1.3px,transparent 1.3px);background-size:24px 24px;opacity:.10}
.fm-how::after{content:"";position:absolute;right:-150px;top:-170px;width:500px;height:500px;border-radius:50%;
  background:var(--teal);opacity:.22;filter:blur(70px);z-index:0;pointer-events:none}
.fm-how .wrap{position:relative;z-index:2}
.fm-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px}
.fm-steps b{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;margin-bottom:22px;
  background:#fff;color:var(--navy);font:700 16px/1 var(--text)}
.fm-steps h3{color:#fff;font-size:24px;margin:0 0 8px}
.fm-steps p{margin:0;font-size:17.5px;line-height:1.6;color:rgba(255,255,255,.88);max-width:32ch}
.fm-end{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:48px}
.fm-note{display:inline-flex;align-items:center;gap:12px;margin:0;padding:14px 22px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);font:500 17px/1.45 var(--text);color:#fff}
.fm-note svg{width:20px;height:20px;flex:none;color:#8FD8D8}
/* An in-sentence white link on navy needs more than colour to be a link (WCAG 1.4.1). */
.fm-more{display:inline-flex;align-items:center;gap:9px;padding:6px 2px;font:600 17px/1.45 var(--text);
  color:#fff;border-bottom:1px solid rgba(255,255,255,.45);transition:border-color .16s,gap .16s}
.fm-more svg{width:18px;height:18px;flex:none;color:#8FD8D8}
.fm-more:hover,.fm-more:focus-visible{border-bottom-color:#fff;gap:13px}

/* ---- 3: the other three, as a ruled list ---- */
.fm-rest{position:relative;isolation:isolate;overflow:hidden;background:var(--cream)}
.fm-rest::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(12,32,72,.30) 1.3px,transparent 1.3px);
  background-size:22px 22px;opacity:.13}
.fm-rest::after{content:"";position:absolute;right:-180px;top:-140px;width:480px;height:480px;border-radius:50%;
  background:var(--teal);opacity:.13;filter:blur(74px);z-index:0;pointer-events:none}
.fm-rest .wrap{position:relative;z-index:2}
.fm-rest-head{max-width:720px}
.fm-rest-head h2{margin-bottom:14px}
.fm-rest-head p{margin:0;font-size:18.5px;line-height:1.65;color:var(--body);max-width:60ch}
.fm-rows{list-style:none;margin:44px 0 0;padding:0;border-top:1px solid var(--line)}
.fm-rows li{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.55fr) minmax(0,.8fr);
  gap:40px;padding:34px 0;border-bottom:1px solid var(--line);align-items:start}
.fm-row-a h3{font-size:26px;margin:0 0 9px}
.fm-kind{display:block;font:600 15.5px/1.45 var(--text);color:var(--teal-d)}
.fm-row-b p{margin:0;font-size:17px;line-height:1.62;color:var(--body)}
.fm-row-b .fm-who{margin-top:10px}
.fm-row-c{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.fm-time{display:inline-flex;align-items:center;gap:9px;font:600 16.5px/1 var(--text);color:var(--ink)}
.fm-time svg{width:18px;height:18px;flex:none;color:var(--teal-d)}
.fm-file{font-size:15px;line-height:1.5;color:var(--muted)}
.fm-dl{display:inline-flex;align-items:center;gap:9px;margin-top:6px;padding:14px 24px;border-radius:999px;
  border:2px solid var(--navy);background:#fff;color:var(--navy);font:600 16px/1 var(--text);transition:.18s}
.fm-dl svg{width:17px;height:17px;flex:none}
.fm-dl:hover,.fm-dl:focus-visible{background:var(--navy);color:#fff;transform:translateY(-2px)}
.fm-open{display:inline-flex;padding:6px 2px;font:600 15.5px/1.4 var(--text);color:var(--navy);
  border-bottom:1px solid rgba(12,72,156,.4)}
.fm-open:hover,.fm-open:focus-visible{border-bottom-color:var(--navy)}
.fm-ask{display:flex;align-items:center;gap:14px;margin:42px 0 0;padding:20px 26px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  font-size:17.5px;line-height:1.6;color:var(--body);box-shadow:var(--sh)}
.fm-ask svg{width:22px;height:22px;flex:none;color:var(--teal-d)}
.fm-ask a{font-weight:600;border-bottom:1px solid rgba(12,72,156,.4)}
.fm-ask a:hover{border-bottom-color:var(--navy)}

@media (max-width:1040px){
  .fm-pair{grid-template-columns:1fr;gap:30px}
  .fm-card{padding:32px 30px 34px}
  .fm-rows li{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:20px 36px}
  .fm-row-c{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px 24px}
  .fm-dl{margin-top:0}
}
@media (max-width:760px){
  .fm-top{margin-bottom:34px}
  .fm-top p,.fm-rest-head p{font-size:17px}
  .fm-card{padding:26px 22px 30px}
  .fm-sheets{max-width:160px;margin-bottom:26px}
  .fm-card h3{font-size:24px}
  .fm-tag{font-size:15px;margin-bottom:14px}
  .fm-btns .btn{width:100%}
  .fm-how{padding:60px 0}
  .fm-steps{grid-template-columns:1fr;gap:26px}
  .fm-steps li{display:grid;grid-template-columns:44px 1fr;column-gap:18px}
  .fm-steps b{width:44px;height:44px;margin:0;font-size:14px;grid-row:span 2}
  .fm-steps h3{font-size:20px;margin:9px 0 4px}
  .fm-end{margin-top:36px;gap:16px}
  .fm-note{border-radius:var(--r);align-items:flex-start;padding:14px 18px;font-size:16px}
  .fm-note svg{margin-top:2px}
  .fm-more{font-size:16.5px}
  .fm-rows{margin-top:30px}
  .fm-rows li{grid-template-columns:1fr;gap:14px;padding:28px 0}
  .fm-row-a h3{font-size:22px}
  .fm-row-c{gap:12px 20px}
  .fm-dl{width:100%;justify-content:center}
  .fm-ask{align-items:flex-start;padding:18px 20px;font-size:16.5px}
  .fm-ask svg{margin-top:3px}
}
@media (prefers-reduced-motion:reduce){
  .fm-sheets img{transition:none}
  .fm-card:hover .fm-sheets img,.fm-card:nth-child(2):hover .fm-sheets img{transform:none}
  .fm-dl:hover{transform:none}
}
/* ==== /FORMS2 ==== */
/* ==== SHELL ==== */
/* The two tiles with no photograph — "Something hurts today" in the surgical mosaic and "Insurance
   billed directly" below it — were drawing a hard horizontal edge across their lower third, where
   a flat brighter blue block began. It read as a half-loaded image on the two most important tiles
   on the home page. `.m-b::before` is the scrim that keeps white type legible over a photograph; it
   runs from 86px above the caption to the foot of the tile, and `.m.solid{align-items:center}`
   centres the caption, so on a solid tile the scrim stopped in the middle of flat navy and the
   join showed. A solid tile has no photograph to scrim. */
.m.solid .m-b::before{display:none}
/* Between 761 and 1040 the base row collapsed to one column, so the wordmark, the address, the
   phone, the email and the whole hours list ran down the left-hand half and left the right-hand
   half of the footer empty for about 300px. Three columns still fit at these widths - measured at
   1024 the cells are ~300/275/330px and the longest strings in them ("info@allcaredental.ca" and
   "11:00 am - 7:00 pm") are 165px and 130px - so the footer keeps the shape it has at 1440 and the
   association logos below it sit on an even row rather than under a hole. */
@media (min-width:761px) and (max-width:1040px){
  .fbase{grid-template-columns:1fr 1fr;gap:28px 34px}
  .fbase .fhrs{grid-column:1 / -1}
}
/* Above 900 the hours column is wide enough for "Sat (alternate) 11:00 am - 6:00 pm" on one line,
   so the footer goes back to the three columns it has at 1440. Below it the day rows would wrap
   mid-time, so the hours take a full-width row of their own under the other two. */
@media (min-width:901px) and (max-width:1040px){
  .fbase{grid-template-columns:1fr 1fr 1.2fr}
  .fbase .fhrs{grid-column:auto}
}
/* ==== /SHELL ==== */