/* 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)}

/* ==== SVCNAV — the services page, ONE section =================================================
   Replaces BOTH the old `.catgrid/.cats/.cat/.cat-l` photo grid AND the `.sec-idx/.spread/.idx/.ig`
   treatment index. The page used to state the same ten-area taxonomy twice — once as photographs,
   then again as ten headings over a text list — and the list was 37% of the page at 16.5% ink. The
   client saw it and said "this is just bad"; the version before that, a 3-column grid with a rule
   under every link and the arrow in a right gutter, he had already called "just a table".
   Here the photograph, the area name and that area's treatments are one block, so the taxonomy is
   stated once and every photograph stands at the head of the links it belongs to.
   `.glrow` is deliberately NOT touched: it is still the About page's six surgical links, and it
   sits inside the line range this replacement was first specified to delete.
   `container-type` is what lets the bands align to the page gutter without `100vw` — see below. */
.svcnav{display:block;container-type:inline-size}

/* ---------- band: an area with BIG+ treatments carries a full-width navy band ---------- */
.ar-band{position:relative;background:var(--navy-x);color:#fff;
  display:grid;grid-template-columns:42% minmax(0,1fr);align-items:center}
.ar-pr{grid-template-columns:minmax(0,1fr) 42%}
.ar-band.tex::before{background-image:radial-gradient(rgba(255,255,255,.6) 1.3px,transparent 1.3px);opacity:.10}
.ar-bph{position:relative;align-self:stretch;min-height:430px;border-right:4px solid var(--teal)}
.ar-pr .ar-bph{order:2;border-right:0;border-left:4px solid var(--teal)}
.ar-bph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* The photograph runs to the viewport edge and the TEXT keeps the page's own gutter, so the band is
   asymmetric with no full-bleed margin arithmetic to get wrong.
   `cqw`, NOT `vw`. `100vw` includes the classic scrollbar, so on any browser that reserves one the
   band's text sat about half a scrollbar out of line with every other section on the site — and it
   would have been the only `vw` in this stylesheet. 100cqw is `.svcnav`'s own inline size, which is
   the layout viewport and excludes the scrollbar, so the text lands exactly on `.wrap`'s edge. */
.ar-btx{padding:62px 56px}
.ar-pl .ar-btx{padding-right:max(28px,calc((100cqw - var(--wrap))/2 + 28px))}
.ar-pr .ar-btx{padding-left:max(28px,calc((100cqw - var(--wrap))/2 + 28px))}
.ar-band h2{display:inline-block;margin:0 0 28px;color:#fff;font-size:38px;letter-spacing:-.02em;
  padding-bottom:13px;border-bottom:3px solid var(--teal)}

/* ---------- grid: the smaller areas, between the bands ---------- */
/* Never a flat cream block: a cream-to-sand wash, a teal bloom top right, a navy bloom bottom left,
   and the site's own dot grid over all of it. */
.ar-grid{padding:62px 0 70px;background:
  radial-gradient(58% 66% at 90% 4%,rgba(60,180,180,.17),transparent 62%),
  radial-gradient(54% 62% at 4% 96%,rgba(12,72,156,.11),transparent 62%),
  linear-gradient(180deg,var(--cream) 0%,#fff 48%,var(--sand) 100%)}
.ar-grid.tex::before{opacity:.13}
.ars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:var(--cols);
  gap:22px;align-items:stretch}

/* The tile is the category tile the client approved — photograph, teal rule, navy name bar — with
   that area's treatments underneath it. The list is as long as the area is and the PHOTOGRAPH takes
   the height left over, so a one-treatment area is a tall picture and a four-treatment area a short
   one. Nothing is hidden behind a hover or a <details>. */
.ar{display:flex;flex-direction:column;position:relative;container-type:inline-size;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh);transition:box-shadow .2s,transform .2s}
.ar-ph{position:relative;flex:1 1 auto;min-height:190px;background:var(--navy);display:block}
.ar-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 26%}
/* The label is sized off the TILE's width (cqi) so PROSTHODONTICS can never run past its bar — but
   with a floor. Unbounded, `min(16.5px,7.6cqi)` gave a 146px tile an 11.1px label sitting beside a
   15px one in the same row, which reads as a rendering fault rather than a decision. */
.ar-l{margin:0;display:flex;align-items:center;gap:10px;min-height:62px;padding:12px 15px;
  background:var(--navy);border-top:3px solid var(--teal);color:#fff;
  font:700 16.5px/1.2 var(--text);font-size:clamp(13.5px,7.6cqi,16.5px);letter-spacing:.035em;
  text-transform:uppercase;hyphens:auto}
.ar-whole{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;color:#fff}
.ar-whole svg{width:16px;height:16px;flex:none;color:var(--teal);margin-left:auto;transition:transform .16s}
.ar-solo{display:flex}
.ar:hover,.ar:focus-within{box-shadow:var(--sh-h);transform:translateY(-3px)}
.ar-whole:focus-visible{outline:3px solid var(--teal);outline-offset:-3px}
.ar:hover .ar-whole svg{transform:translateX(4px)}
/* Landing feedback. Well over a hundred links per group across the site point at
   services.html#<groupId>, and on touch there is no hover and no focus ring to say the jump worked.
   Scoped to .svcnav so it cannot fire on the header or the booking form. */
.svcnav .ar:target{border-color:var(--teal);box-shadow:0 0 0 3px rgba(60,180,180,.38)}
.svcnav .ar-band:target .ar-bph{border-color:#8FD8D8}

/* ---------- one treatment link, both archetypes ---------- */
.ar-t{list-style:none;margin:0;padding:0}
.ar .ar-t{padding:5px 15px 11px}
/* The arrow rides the LAST WORD inside `.nw`. As a flex item it was pushed to a right-hand gutter
   the moment a name wrapped — the column that made the first version read as a table. Plain inline
   with a space in front, it became a line-break opportunity and dropped onto a line of its own at
   1180, 1100, 1040, 960, 901 and 320 — none of the three widths anyone reviews. Bound to the word
   it can do neither. See withArrow() in pages2.js. */
.ar-t .nw{white-space:nowrap}
.ar-t a{display:block;padding:10px 0;
  font:500 17.5px/1.35 var(--text);color:var(--ink);letter-spacing:-.01em;
  transition:color .16s,transform .16s}
.ar-t svg{display:inline-block;width:15px;height:15px;margin-left:8px;vertical-align:-2px;
  color:var(--teal-d);transition:transform .16s}
.ar-wide{columns:2;column-gap:48px}
.ar-wide li{break-inside:avoid;-webkit-column-break-inside:avoid}
.ar-wide a{color:#fff;font-size:20px;padding:11px 0}
.ar-wide svg{color:var(--teal);width:16px;height:16px;vertical-align:-2px}
.ar-t a:hover,.ar-t a:focus-visible{transform:translateX(5px);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.ar .ar-t a:hover,.ar .ar-t a:focus-visible{color:var(--navy);text-decoration-color:var(--teal-d)}
.ar-wide a:hover,.ar-wide a:focus-visible{text-decoration-color:var(--teal)}
.ar-t a:hover svg,.ar-t a:focus-visible svg{transform:translateX(3px)}

@media (max-width:1180px){
  .ar-band h2{font-size:32px}
  .ar-l{font-size:clamp(13px,7.7cqi,15px);letter-spacing:.025em}
}
@media (max-width:1040px){
  .ar-band,.ar-pr{grid-template-columns:minmax(0,1fr)}
  .ar-pr .ar-bph{order:0}
  .ar-bph,.ar-pr .ar-bph{min-height:0;aspect-ratio:2.8/1;border:0;border-bottom:4px solid var(--teal)}
  .ar-btx,.ar-pl .ar-btx,.ar-pr .ar-btx{padding:44px max(28px,calc((100cqw - var(--wrap))/2 + 28px))}
  .ar-grid{padding:48px 0 54px}
  .ars{gap:18px}
}
/* The run stays FOUR across as far down as the longest treatment name will go. Dropping to two at
   1040 doubled the number of tile rows and made the section 200px taller than the two sections it
   replaced (3482 against 3285) — measured, not guessed. */
@media (max-width:900px){
  .ars{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ar-l{font-size:17px;letter-spacing:.03em}
}
/* Phones. Ten photographs, ten names and 34 links have to fit a 390px column without becoming a
   scroll, so the tile turns on its side: the photograph and the area name are one header row and
   the treatments run under it full width. Nothing is dropped and nothing is hidden. */
@media (max-width:760px){
  .ar-band h2{font-size:25px;margin-bottom:20px;padding-bottom:10px}
  /* A 2.5:1 strip out of a 3:2 frame cropped the face off the General & preventive photograph.
     16/9 is the mildest crop that still reads as a band. */
  .ar-bph,.ar-pr .ar-bph{aspect-ratio:16/9}
  .ar-bph img{object-position:50% 34%}
  /* 20px, not 28px: `.wrap` drops to a 20px gutter at this breakpoint, and a band whose text keeps
     the desktop 28px sits 8px inboard of every other section on the page. */
  .ar-btx,.ar-pl .ar-btx,.ar-pr .ar-btx{padding:30px 20px 34px}
  .ar-wide{columns:1}
  .ar-wide a{font-size:18px;padding:9px 0}
  .ar-grid{padding:30px 0 34px}
  .ars{grid-template-columns:minmax(0,1fr)!important;gap:14px}
  .ar,.ar-whole{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:stretch;min-height:0}
  /* .ar-solo must NOT be a grid as well: .ar-whole would land in its 132px first column and the
     area name would be squeezed to nothing — it rendered as a 14px navy strip reading "C / D".
     The anchor IS the grid. */
  .ar-solo{display:block}
  .ar-ph{min-height:0;grid-column:1;grid-row:1}
  .ar-l{grid-column:2;grid-row:1;min-height:108px;border-top:0;border-left:3px solid var(--teal);
    font-size:16px;padding:10px 14px;letter-spacing:.02em}
  .ar-t{grid-column:1/-1;grid-row:2}
  .ar .ar-t{padding:2px 16px 8px}
  .ar-t a{font-size:17px;padding:11px 0}
  .ar:hover,.ar:focus-within{transform:none}
}
@media (max-width:359px){
  .ar,.ar-whole{grid-template-columns:96px minmax(0,1fr)}
  .ar-l{min-height:96px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .ar,.ar-t a,.ar-t svg,.ar-whole svg{transition:none!important;transform:none!important}
}
/* ==== /SVCNAV ==== */

/* ---------- .glrow: still the surgical list on the About page ---------- */
.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 stops for
   good on a dot or a swipe (see section 6 of the 2026-10-04 block at the end of this file). */
.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)}
/* .wrap is the flex item here, so without a width it shrink-to-fits around the 640px text column
   and its `margin:0 auto` then CENTRES that column in the slide — the headline ran 27.8%-72.2% at
   1440 while the scrim beneath it is built to darken the LEFT. The result was 28% of every frame
   wasted on empty navy and the right half of every headline sitting on bright photograph. It is a
   flex accident, not a decision: give it the page's own width and the text lands in the gutter all
   the other sections use, over the dark end of the scrim, leaving the right half of the frame for
   the person in it. */
.slide-in > .wrap{width:100%}
.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}
  /* The phone crop and the phone scrim used to live here and NEITHER of them ever applied: both
     were `.slide img` / `.slide::after`, and the unconditional rules further down the file have the
     same specificity and come later, which a media query does nothing to change. Phones were being
     shown the desktop's left-to-right scrim all along. They are now in the ?760 block that sits
     after those rules ("PHONES: the photograph gets the top"), where they actually win. */
  .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.
   Now that the headline sits in the left gutter (.slide-in > .wrap) instead of floating in the
   centre, the scrim can hold its weight where the words actually are — out to about 54% — and then
   drop away much faster than it used to. The old ramp never went below .16, which flattened every
   photograph to a navy smear; the right third of the frame now comes through nearly clear, which
   is where a copy-space frame puts its subject. */
.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,.93) 0%,rgba(6,26,58,.88) 34%,rgba(6,26,58,.72) 54%,
    rgba(6,26,58,.24) 76%,rgba(6,26,58,.05) 100%)}

/* PHONES: the photograph gets the top, the words get the bottom.
   Two things were wrong here and the second hid the first. The phone scrim written at the ?760
   breakpoint is DEAD - it is `.slide::after` like the rule above, same specificity, and a media
   query does not raise specificity, so the later unconditional rule won and phones were being
   served the desktop's left-to-right scrim. And the text was vertically CENTRED: at 390 the slide
   is 0.68:1, the copy runs 27%-85% of it, and five of the six slides put the headline straight
   across somebody's face. There is no object-position that fixes that - the text covers the middle
   of the frame whatever the photograph does.
   So on a phone the copy is bottom-anchored and the scrim is light through the top half: the face
   is above the words rather than behind them, and it works for any frame, including ones nobody
   has fetched yet. */
@media (max-width:760px){
  .slides{min-height:calc(600px + var(--hdr-h))}
  .slide-in{align-items:flex-end}
  /* At 390 the slide is 0.68:1 and the frames are landscape, so cover crops them HORIZONTALLY and
     the whole height is on screen - a Y position here does nothing at all. X is the only lever,
     and it has to find the subject, which on a copy-space frame sits right of centre.
     The extra `.slider .slides` is deliberate: the generated per-photograph rules at the end of
     this file are `.slide img[src$="..."]`, same specificity and later in the file, and they carry
     Y values measured against the DESKTOP 1.92:1 window. Left alone they would win here and drag
     the phone crop sideways for no reason. */
  .slider .slides .slide img{object-position:62% 50%}
  .slide::after{background:linear-gradient(180deg,
    rgba(6,26,58,.66) 0%,rgba(6,26,58,.26) 11%,rgba(6,26,58,.1) 26%,rgba(6,26,58,.16) 40%,
    rgba(6,26,58,.66) 56%,rgba(6,26,58,.9) 70%,rgba(6,26,58,.95) 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 ==== */
/* ==== 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. */
/* 30%, not 6%. Measured across the 33 page-header portraits with a detectable face: the median
   wants 30% and the interquartile range is 15-40%. 6% showed the top half of a portrait, which
   is a forehead and a pair of eyes on any frame whose face sits mid-height - the client found
   two of them himself. At 30% the 1440 window runs 15-65% and the 1024 window 19-57%, and a
   face centred anywhere from 35% to 55% is inside both. */
.phero-ph img{object-position:50% 30%}
.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){
  /* The narrow band shows only 38% of a 2:3 frame against 53% at 1440, so it needs to start LOWER
     than the base to land the same face, not higher: 34% puts the window at 21-59%. */
  .phero-ph img{object-position:50% 34%}
}
/* ==== /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 the same card, three across
                  (the client liked the card and not the ruled list it replaced, 2026-11-14)
   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-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 forms, the same card three across ---- */
.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}

@media (max-width:1040px){
  .fm-pair{grid-template-columns:1fr;gap:30px}
  .fm-card{padding:32px 30px 34px}
}
@media (max-width:760px){
  .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}
}
@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}
}

/* 2026-11-14: every form is a card. Headings carry no kicker and no paragraph. */
.fm-h{margin:0 0 40px}
.fm-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:stretch}
.fm-trio .fm-card{padding:32px 30px 34px}
.fm-trio .fm-sheets{max-width:176px;margin-bottom:30px}
.fm-trio .fm-card h3{font-size:25px}
.fm-meta,.fm-card .fm-meta{margin-bottom:24px}
.fm-meta .nw{white-space:nowrap}
/* three across: the button sits on the card's foot whatever the title wraps to */
@media (min-width:1041px){
.fm-trio .fm-card{display:flex;flex-direction:column}
.fm-trio .fm-card-tx{display:flex;flex-direction:column;align-items:flex-start;flex:1}
.fm-trio .fm-btns{margin-top:auto}
}
/* Tablet and phone: one card per row, the sheet BESIDE the words, so five cards are not five
   screens of mostly empty white. */
@media (max-width:1040px){
  .fm-pair,.fm-trio{grid-template-columns:1fr;gap:24px}
  .fm-card,.fm-trio .fm-card{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:40px;
    align-items:center;padding:32px 34px}
  .fm-sheets,.fm-trio .fm-sheets{max-width:none;margin:0}
  .fm-card h3,.fm-trio .fm-card h3{font-size:26px}
}
@media (max-width:760px){
  .fm-h{margin-bottom:26px}
  .fm-pair,.fm-trio{gap:18px}
  .fm-card,.fm-trio .fm-card{grid-template-columns:92px minmax(0,1fr);column-gap:22px;row-gap:0;
    align-items:start;padding:24px 20px 22px}
  .fm-card-tx{display:contents}
  .fm-sheets{grid-column:1;grid-row:1/4;margin-top:4px}
  .fm-tag{grid-column:2;justify-self:start;font-size:14px;line-height:1.3;padding-bottom:7px;margin-bottom:10px}
  .fm-card h3,.fm-trio .fm-card h3{grid-column:2;font-size:21px;margin-bottom:6px}
  .fm-card .fm-meta{grid-column:2;margin-bottom:0;font-size:15px}
  .fm-btns{grid-column:1/-1;margin-top:20px}
  .fm-back{transform:rotate(3.5deg) translate(7px,4px)}
  .fm-card:nth-child(2) .fm-back{transform:rotate(-3.5deg) translate(-7px,4px)}
}
/* ==== /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 ==== */

/* ==================================================================================================
   OWNER ROUND, 2026-09-29: "images need less dark shadow / no shading", "header pictures are not
   great", "website hotbar goes mobile too early", "the services for mobile hotbar is kind of weird".
   Everything for that round is in this block, so it can be read (and undone) in one place.
   ================================================================================================== */

/* ---------- 1. PHOTOGRAPHS ARE SHOWN CLEAN ----------
   Every photograph used to sit under navy: the hero behind a gradient 93% opaque across its left
   half, every tile under a scrim that turned its lower half navy, and on a phone the tiles were
   practically solid navy with a face somewhere inside. That is what "dark shadow / shading" meant.
   The fix is not a lighter scrim - white type over a clean photograph fails contrast on any bright
   frame - it is to take the words OFF the photograph. The hero becomes a split (words on a navy
   panel, photograph beside it) and a tile becomes a card (photograph above, caption on white
   below). With no type on any photograph there is nothing left for a scrim to do.
   The soft drop shadows and teal glows under the checklist, stages and visit photographs go too. */
.signs-ph::before{display:none}
.signs-ph img,.stages-ph img,.say-ph img,.visit-ph img,.tm-a.big .tm-ph img,.tm-pair .tm-ph img{box-shadow:none}
.tm-a.big .tm-ph::before{display:none}

/* ---------- 2. THE HOME HERO: a full-width photograph with nothing laid over it ----------
   The same day's first answer was a split - words on a navy half, the photograph on the other half -
   and the owner said the header looked "way worse". The photograph goes back to full width. What
   makes that possible WITHOUT a dark layer is the photograph itself: a bright frame with the person
   on the right and plain light space on the left takes dark type directly, the way printed
   advertising does. Two treatments are built so they can be compared on the real frames:
     .hv-light  navy type straight onto the light side of the photograph
     .hv-card   the words on a solid white card over the photograph (works on any frame)
   The header stays solid white; it no longer floats over the slider. */
.slider{margin-top:0;background:var(--cream)}
/* ONE SHAPE AT EVERY WIDTH. The slide was a fixed 640px tall while the photograph stretched to the
   window's full width, so a 1720px window blew each frame up until only 56% of its height showed and
   faces lost their foreheads or chins - and every window size cut them differently (owner,
   2026-09-29: "we need some proper crop for all images"). The height now follows the width, so the
   same two thirds of every frame shows from 1260 to 1800, and each slide's `pos` in home.js is set
   once from where the face actually is (measured with a face detector, then checked by eye at
   1100, 1280, 1440, 1720 and 1920). */
.slides{height:clamp(560px,44.5vw,800px)}
.slide{background:var(--cream)}
.slide::after{content:none}
.slide img,.slider .slides .slide img{position:absolute;inset:0;left:0;width:100%;height:100%;object-position:50% 30%}
.slide-in{padding-top:0;align-items:center}
.slide-in > .wrap{width:100%}
.slide-c{max-width:560px;padding-bottom:0}
.slide-c h1,.slide-c h2{font-size:56px;line-height:1.04;letter-spacing:-.02em}
.slide-c p{font-size:19px}
.s-dots{bottom:26px}
.s-arrow{background:#fff;border-color:#fff;color:var(--navy);box-shadow:0 2px 10px rgba(6,26,58,.16)}
.s-arrow:hover{background:var(--cream);border-color:var(--cream);color:var(--navy)}
.s-dots button{background-color:rgba(12,72,156,.28)}
.s-dots button[aria-current=true]{background-color:var(--navy)}

.hv-light .slide-c{max-width:520px}
/* the dots sit under the words, in the page gutter, instead of across whoever is in the photograph */
.hv-light .s-dots{left:calc(max(0px,(100% - var(--wrap)) / 2) + 28px);right:auto;justify-content:flex-start}
/* per-slide nudge (home.js SLIDES[].nudge): a frame is only ever enlarged, never distorted */
@media (min-width:901px){
  /* grown from the top edge, so the enlargement never pushes a head out of the top of the slide */
  .slide img.nudge-r{transform:scale(1.14);transform-origin:0 0}
  .slide img.nudge-l{transform:scale(1.14);transform-origin:100% 0}
}
.hv-light .slide-c h1,.hv-light .slide-c h2{color:var(--navy-x)}
.hv-light .slide-c p{color:var(--ink)}
.hv-light .slide-c .btn-w{background:var(--navy);color:#fff;border-color:var(--navy)}
.hv-light .slide-c .btn-w:hover{background:var(--navy-d);border-color:var(--navy-d);color:#fff}

.hv-card .slide-c{background:#fff;border-radius:22px;padding:40px 44px 42px;max-width:560px;
  box-shadow:0 10px 40px rgba(6,26,58,.12)}
.hv-card .slide-c h1,.hv-card .slide-c h2{color:var(--navy-x);font-size:46px}
.hv-card .slide-c p{color:var(--body);font-size:18px;margin-bottom:26px}
.hv-card .slide-c .btn-w{background:var(--navy);color:#fff;border-color:var(--navy)}
.hv-card .slide-c .btn-w:hover{background:var(--navy-d);border-color:var(--navy-d);color:#fff}
.hv-card .s-dots button{background-color:rgba(255,255,255,.6)}
.hv-card .s-dots button[aria-current=true]{background-color:#fff}

/* Narrower windows scale each photograph down, which lifts whatever runs across the middle of the
   frame (a horizon, a field) up behind the paragraph. The words sit higher from 1280 down so they
   stay on the plain upper part of the frame; measured on every slide at 1100, 1280 and 1440. */
@media (min-width:901px) and (max-width:1280px){
  .hv-light .slide-in{align-items:flex-start;padding-top:64px}
}
@media (max-width:1180px){
  .hv-light .slide-c{max-width:440px}
}
@media (max-width:1180px){
  .slide-c h1,.slide-c h2{font-size:48px}
  .hv-card .slide-c h1,.hv-card .slide-c h2{font-size:40px}
}
/* below 1340 the page gutter is narrower than the arrow, which then sat on the first letters of every
   line; the dots, a swipe and the autoplay still move the slides */
@media (max-width:1339px){
  .slider .s-arrow{display:none}
}
@media (max-width:1040px){
  .slide-c{max-width:440px}
  .slide-c h1,.slide-c h2{font-size:40px}
  .hv-card .slide-c h1,.hv-card .slide-c h2{font-size:34px}
  .hv-card .slide-c{padding:30px 32px 32px}
  .slide-c p{font-size:17px}
  .s-arrow{display:none}
}
/* Phones and upright tablets: under 900px there is no room for words beside a face (measured: three
   slides fell below 4.5:1 at 820), so the photograph is a strip across the top and the words sit
   under it on white. The slides share one grid cell so nothing jumps. */
@media (max-width:900px){
  .slides{height:auto;min-height:0;display:grid}
  .slide{position:relative;inset:auto;grid-area:1/1;display:flex;flex-direction:column;background:#fff}
  .slide img,.slider .slides .slide img{position:relative;inset:auto;width:100%;
    height:clamp(260px,80vw,380px);object-position:80% 30%;flex:none}
  .slide-in{height:auto;flex:1;align-items:flex-start}
  .slide-in > .wrap{padding:24px 20px 62px}
  .slide-c,.hv-card .slide-c{max-width:none;background:transparent;box-shadow:none;padding:0;border-radius:0}
  .slide-c h1,.slide-c h2,.hv-card .slide-c h1,.hv-card .slide-c h2{font-size:31px;margin-bottom:12px;color:var(--navy-x)}
  .slide-c p,.hv-card .slide-c p{font-size:16.5px;margin-bottom:22px;color:var(--ink)}
  .slide-c .btn-w{background:var(--navy);color:#fff;border-color:var(--navy)}
  .s-dots{left:20px;right:auto;bottom:26px;justify-content:flex-start}
  .s-dots button,.hv-card .s-dots button{background-color:rgba(12,72,156,.28)}
  .s-dots button[aria-current=true],.hv-card .s-dots button[aria-current=true]{background-color:var(--navy)}
}

/* ---------- 3. TILES: the photograph fills the tile, the title sits on a solid white label ----------
   First attempt (same day) split each tile into a photo box and a caption box: three different card
   anatomies in one grid, a letterbox of white beside every sideways tile, and the hover zoom spilled
   the photograph across the caption. The owner: "i dont think this was a good way to do the squares".
   So the photograph fills the tile edge to edge again - the mosaic he approved - and the words sit on
   an opaque white label in the bottom-left corner. Nothing is darkened; the label is not a scrim, it
   is a surface, so the photograph around it is shown exactly as it was taken. */
.m::after,.m.h2::after,.m-b::before{content:none;display:none}
.m{background:var(--cream)}
.mosaic{grid-auto-rows:280px}
.m-b{position:absolute;left:12px;bottom:12px;right:auto;width:auto;max-width:calc(100% - 24px);
  background:#fff;border-radius:12px;padding:11px 16px 12px;color:var(--ink);
  box-shadow:0 2px 12px rgba(6,26,58,.10)}
.m-b h3{color:var(--ink);font-size:18px;margin:0 0 2px}
.m-b p{color:var(--body);font-size:14px;line-height:1.4;max-width:32ch}
.m:hover .m-b h3{color:var(--navy)}
.m.feature .m-b{left:18px;bottom:18px;padding:20px 24px 22px;max-width:min(440px,calc(100% - 36px))}
.m.feature .m-b h3{font-size:28px;margin-bottom:6px}
.m.feature .m-b p{font-size:16px;max-width:38ch}
/* the solid tiles keep their colour and carry their words directly, as before */
.m.solid .m-b{position:relative;left:auto;bottom:auto;max-width:none;background:transparent;box-shadow:none;
  padding:26px 24px 24px;color:#fff}
.m.solid .m-b h3{color:#fff;font-size:21px}
.m.solid .m-b p{color:rgba(255,255,255,.88);font-size:15.5px}
.m.solid:hover .m-b h3{color:#fff}
@media (max-width:760px){
  .mosaic{grid-auto-rows:auto}
  .m,.m.w3,.m.w4,.m.feature{min-height:270px}
  .m.solid{min-height:0}
  .m-b,.m.feature .m-b{left:12px;bottom:12px;max-width:calc(100% - 24px);padding:13px 16px 14px}
  .m.feature .m-b h3{font-size:22px}
  .m.feature .m-b p{font-size:14.5px}
}

/* ---------- 4. THE HEADER KEEPS ITS FULL MENU DOWN TO 1100px ----------
   It went to the burger at 1339px, so a 1280 laptop - and any browser window that is not
   maximised - got a phone menu beside a whole desktop header's worth of empty space. The full row
   needed ~1330px only because nothing in it ever gave way. Now, in steps: under 1340 the logo
   steps down and "Home" leaves the row (the logo IS the home link), which alone brings the whole
   header - phone number, open/closed line and all - down to 1220; under 1220 the number becomes the
   round phone button phones already use; the burger takes over only under 1100. And when it does,
   the phone, Book and burger sit at the right edge: they used to pack in against the logo and leave
   the right half of the header empty. */
/* The nav takes the free space and centres in it, so the phone and Book button sit on the right
   edge at every width instead of wherever the nav happened to end. */
.hdr > .wrap > nav{flex:1;min-width:0;display:flex;justify-content:center}
.hdr-end{margin-left:0}
@media (max-width:1339px){
  .nav{display:flex}
  .burger{display:none}
  .mnav{display:none}
  .brand img{height:40px}
  .nav > li:first-child{display:none}
  .nav > li + li{margin-left:8px}
  .nav > li:nth-child(2){margin-left:0}
  .nav > li > a{font-size:14.5px;padding:14px 3px}
  .hdr > .wrap{gap:12px}
  .hdr-end{gap:12px;margin-left:12px}
}
@media (max-width:1219px){
  .hdr-tel{display:none}
  .tel-ico{display:grid}
}
@media (max-width:1099px){
  .nav{display:none}
  .burger{display:block}
  .mnav{display:block}
  .hdr-end{margin-left:auto}
}
@media (min-width:761px) and (max-width:1099px){
  .hdr-tel{display:grid}
  .tel-ico{display:none}
}
@media (max-width:760px){
  .brand img{height:36px}
}

/* ---------- 5. THE PHONE MENU: folds, not a wall ---------- */
.mnav > ul > li > a,.macc > summary{display:flex;align-items:center;justify-content:space-between;
  padding:17px 24px;font:600 17px/1.2 var(--text);color:var(--ink);border-bottom:1px solid var(--line);
  cursor:pointer;list-style:none;min-height:56px}
.macc > summary::-webkit-details-marker,.mgrp > summary::-webkit-details-marker{display:none}
.mcv{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--teal-d);
  transition:transform .2s}
.mcv svg{width:16px;height:16px}
details[open] > summary > .mcv{transform:rotate(180deg)}
.macc[open] > summary{color:var(--navy);background:var(--cream)}
.mnav .msub{background:#fff;border-bottom:1px solid var(--line);padding:4px 0 8px}
.mnav .msub a{display:block;padding:13px 24px 13px 40px;font:500 16px/1.3 var(--text);color:var(--body)}
.mnav .msub a[aria-current=page]{color:var(--navy);font-weight:600;box-shadow:inset 3px 0 0 var(--teal)}
.mnav .msub .mall{color:var(--navy);font-weight:600}
.mnav .msub a.mone{font-weight:600;color:var(--ink)}
.mgrp > summary{display:flex;align-items:center;gap:10px;padding:13px 24px 13px 40px;cursor:pointer;
  list-style:none;font:600 16px/1.3 var(--text);color:var(--ink);min-height:48px}
.mgrp > summary .mn{font:600 12px/1 var(--text);color:var(--teal-d);background:var(--teal-l);
  border-radius:999px;padding:4px 8px}
.mgrp > summary .mcv{margin-left:auto;width:24px;height:24px}
.mgrp[open] > summary{color:var(--navy)}
.mgrp ul{background:var(--cream);margin:2px 16px 8px 40px;border-radius:var(--r-sm);padding:4px 0}
.mnav .mgrp ul a{padding:11px 16px;font-size:15.5px}


/* ==================================================================================================
   OWNER ROUND, 2026-10-04: "for all care dental on mobile it kinda doesnt look proper", "it needs to
   be properly organized on mobile", and the hero photographs to be families showing their teeth.
   PHONES ONLY (<=760px) unless a rule says otherwise: the desktop layout was approved and is untouched.
   ================================================================================================== */

/* ---------- 1. THE TREATMENT GRIDS: two to a row, the photograph above its title ----------
   One tile per row made each grid nine screens of 270px photographs, every one with a white label
   laid across the lower third of the frame - which is exactly where a smile is. On a phone the label
   moves under the photograph and the tiles go two to a row: the grid reads as a menu, nothing covers
   a face, and each grid takes about half the scrolling it did. This is not the caption-below card the
   owner turned down on 2026-09-29: that mixed three tile shapes in one desktop grid and let the hover
   zoom spill over the words. Here every small tile is the same square, and there is no hover. */
@media (max-width:760px){
  .mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:12px}
  .m,.m.w3,.m.w4,.m.feature{grid-column:span 1;grid-row:span 1;min-height:0;flex-direction:column;
    align-items:stretch;background:#fff;border:1px solid var(--line)}
  .m.feature{grid-column:1 / -1}
  .m img{position:relative;inset:auto;flex:none;height:auto;aspect-ratio:1}
  .m.feature img{aspect-ratio:16 / 10}
  .m:hover{transform:none;box-shadow:none}
  .m:hover img{transform:none}
  .m-b,.m.feature .m-b{position:static;flex:1;width:auto;max-width:none;border-radius:0;box-shadow:none;
    background:#fff;padding:10px 12px 12px}
  .m-b h3{font-size:15.5px;line-height:1.25;margin:0}
  .m-b p{display:none}
  .m.feature .m-b{padding:14px 16px 16px}
  .m.feature .m-b h3{font-size:21px;margin:0 0 4px}
  .m.feature .m-b p{display:block;font-size:14.5px;max-width:none}
  /* the emergency tile has no photograph: it keeps its navy and its number, at half a row */
  .m.solid{background:var(--navy);border-color:var(--navy);justify-content:center}
  .m.solid .m-b{background:transparent;padding:16px 14px}
  .m.solid .m-b h3{font-size:17px;margin:0 0 6px}
  .m.solid .m-b p{display:block;font-size:13.5px;line-height:1.4}
  .m .bigtel{font-size:19px;margin-top:10px}
}

/* ---------- 2. THE BOOKING FORM: choices in cells, the forms as a list ----------
   Thirteen pills of thirteen widths, one to a line, ran down the left of the form like a ragged
   margin, and the five patient-form links above it were five centred pills of five widths. Both
   become one clean column of full-width rows. (Two cells to a row, as the referral form does, put
   every choice on three lines inside the form's own padding.) */
@media (max-width:760px){
  #bookform .chips{display:grid;grid-template-columns:1fr;gap:7px}
  #bookform .chips label{border-radius:var(--r-sm);padding:12px 14px;font-size:15px;line-height:1.3;
    min-height:46px}
  #bookform .chips input{flex:none}
  #bookform .chips label:has(input:focus-visible){border-radius:var(--r-sm)}
  .bookform-dl ul{display:grid;grid-template-columns:1fr;gap:8px;max-width:420px;margin:0 auto}
  .bookform-dl a{display:flex;border-radius:var(--r-sm);padding:13px 16px;font-size:15px;line-height:1.2}
}

/* ---------- 3. THE FOOTER: link lists two to a row ----------
   Twenty-four links one under another were a full screen and a half of navy before the address.
   Each link is a full-height row (~40px) for a thumb: the desktop rule `.foot ul a{padding:3px 0}`
   comes later in this file than the old phone padding and had quietly shrunk them to 26px. */
@media (max-width:760px){
  .fsvc ul{grid-template-columns:1fr 1fr;gap:0 18px}
  .fsvc ul a{display:block;padding:9px 0;line-height:1.3}
}

/* ---------- 4. THE HERO: families, shown whole ----------
   "They don't like the image of the woman in the header; they want family images, showing off teeth."
   A family is a wide group, and a family photograph almost never leaves the empty left half of the
   frame that the words need (the copy-space frames of 2026-09-29 were single people standing at one
   edge). Laying the words over the group would hide people, so on desktop the photograph sits in the
   right 62% of the slide and fades, over its first 14%, into a gradient sampled from its OWN left
   edge, top to bottom (`bg` in home.js, from tools/dental-v6/hero-edge.py). The wall simply carries
   on under the words: one picture, nothing darkened, nobody cut in half. The type sits on that
   sampled colour, so its contrast no longer depends on what the photograph happens to have behind
   a headline. Each slide's crop is two custom properties set in home.js: --pos for the desktop box,
   --mpos for the phone strip. */
.slider .slides .slide img{object-position:var(--pos,50% 30%)}
@media (min-width:1041px){
  .hv-fade .slide{background:var(--hbg,var(--cream))}
  .slider.hv-fade .slides .slide img{left:auto;right:0;width:62%;transform:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%);
    mask-image:linear-gradient(90deg,transparent 0,#000 14%)}
  .hv-fade .slide-c{max-width:480px}
  .hv-fade .slide-in{align-items:center;padding-top:0}
}
@media (min-width:1041px) and (max-width:1180px){
  .hv-fade .slide-c{max-width:410px}
}
/* 901-1040: measured, the words ran onto the photograph (2.4:1 on the frenectomy headline at 901), and
   a box narrow enough to clear them cut the families at both ends. So the hero stacks here as it does
   on a phone - the photograph a strip across the top, the words under it on white - with a taller
   strip, because a family is wider than a face. */
@media (min-width:901px) and (max-width:1040px){
  .hv-fade .slides{height:auto;min-height:0;display:grid}
  .hv-fade .slide{position:relative;inset:auto;grid-area:1/1;display:flex;flex-direction:column;background:#fff}
  .slider.hv-fade .slides .slide img{position:relative;inset:auto;width:100%;height:min(54vw,560px);flex:none;
    transform:none;object-position:var(--mpos,var(--pos,50% 30%))}
  .hv-fade .slide-in{height:auto;flex:1;align-items:flex-start;padding-top:0}
  .hv-fade .slide-in > .wrap{padding:30px 28px 66px}
  .hv-fade .slide-c{max-width:640px}
  .hv-fade .s-dots{left:28px;right:auto;bottom:28px;justify-content:flex-start}
}
/* On a phone the frame is a strip above the words, shown nearly whole: a family is wider than a
   face, and the old strip (80vw tall) cut whoever stood at either end. */
@media (max-width:900px){
  .slide img,.slider .slides .slide img{height:clamp(240px,64vw,420px);object-position:var(--mpos,var(--pos,50% 30%))}
}

/* ---------- 5. THE HEADER ON A PHONE: a photograph with a panel over its foot ----------
   "I just don't think this is the right kind of header for mobile." Stacked as photo strip, headline,
   three-line paragraph, button and dots, the hero had the anatomy of the treatment cards under it: a
   short picture and a block of text, reading as content rather than as the top of the page. Now the
   photograph is taller (it carries the header), and a white panel with rounded top corners rises over
   its lower edge with the headline and one full-width button - the paragraph is for desktop; the
   button names the treatment, and its page says the rest. The panel is a surface, not a scrim: the
   photograph above it is shown as taken, and no face is under it (each slide's --mpos is set so the
   whole family sits in the visible window). Every slide is the same height, so nothing jumps. */
@media (max-width:1040px){
  .slider.hv-fade .slides .slide img{height:clamp(300px,88vw,560px)}
  .hv-fade .slide-in{position:relative;z-index:2;margin-top:-26px;border-radius:24px 24px 0 0;
    background:#fff;display:flex;align-items:stretch}
  .hv-fade .slide-in > .wrap{display:flex;padding:24px 20px 58px}
  .hv-fade .slide-c{display:flex;flex-direction:column;max-width:none;width:100%;padding:0}
  .hv-fade .slide-c h2{font-size:29px;line-height:1.1;margin:0 0 18px;max-width:20ch}
  .hv-fade .slide-c p{display:none}
  .hv-fade .slide-c .btn{margin-top:auto;align-self:flex-start}
  .hv-fade .s-dots{left:0;right:0;bottom:24px;justify-content:center}
}
@media (max-width:560px){
  .hv-fade .slide-c .btn{align-self:stretch;justify-content:center}
}
@media (min-width:761px) and (max-width:1040px){
  .slider.hv-fade .slides .slide img{height:min(54vw,560px)}
  .hv-fade .slide-in > .wrap{padding:28px 28px 62px}
  .hv-fade .slide-c h2{font-size:36px;max-width:none}
  .hv-fade .s-dots{left:28px;right:auto;justify-content:flex-start}
}

/* ---------- 6. THE SLIDER MOVES ON A PHONE ----------
   A sideways swipe turns the slide (assets/site.js); pan-y leaves vertical scrolling to the browser
   and hands the horizontal gesture to the script. Under "Reduce motion" the slides still change, as
   a cross-fade: the global reduced-motion rule above zeroes every transition, which would make the
   change an abrupt cut, and a dissolve is exactly what the setting asks movement to become. */
.slider .slides{touch-action:pan-y}
@media (prefers-reduced-motion:reduce){
  .slider .slide{transition-duration:.7s!important}
}

/* ==========================================================================================
   OWNER ROUND, 2026-10-23: THE HEADER LIKE SMILESTUDIO360 (.hv-bleed, laid over .hv-fade)
   "still not attractive ... photos look like stock ... no dentist in them ... the header layout".
   The hero photographs are now generated dentist-and-patient scenes (tools/dental-v6/hero-generate.mjs)
   composed for a banner: the people in the right half, the left 45% a bright, softly blurred clinic.
   So from 1041px the photograph fills the slide edge to edge and the headline sits straight on that
   empty left side - no fade, no flat ground, and nothing laid over the picture (the owner's
   no-shading rule stands; the frames are made light where the words go). Straight to the point: a
   bigger headline and one button; the paragraph is for the treatment page. Controls follow the
   reference: round arrows bottom-right (its "01 —— 06" counter was tried and dropped, 2026-10-23).
   Below 1041px nothing here applies: .hv-fade's approved phone layout (photo, then a white panel
   with the headline and one button) is unchanged.
   ========================================================================================== */
/* The words, the counter and the arrows line up with the header's logo (the header sits on a 1400px
   grid, the page sections on 1220): at 1720 the old 1220 gutter pushed the headline 90px nearer the
   people and broke every headline onto three lines. */
@media (min-width:1041px){
  /* cqw = the slider's own width: a % inside --hx resolved against whichever box used it, so the text
     column never narrowed at 1720 and 1920 */
  .hv-bleed{container-type:inline-size;--hx:max(28px,calc((100cqw - 1400px) / 2 + 28px))}
  .hv-bleed .slides{height:clamp(580px,46vw,860px)}
  .slider.hv-bleed .slides .slide img{left:0;right:0;width:100%;
    -webkit-mask-image:none;mask-image:none;object-position:var(--pos,50% 40%)}
  .hv-bleed .slide-in{align-items:center;padding-top:0}
  .hv-bleed .slide-in > .wrap{max-width:none;width:100%;margin:0;padding:0 28px 0 var(--hx)}
  /* the people start at about 43% of the width in every frame, so the words end at 41.5% */
  .hv-bleed .slide-c,.hv-bleed.hv-fade .slide-c{max-width:min(600px,calc(41.5cqw - var(--hx)));padding-bottom:40px}
  .hv-bleed .slide-c h2{font-size:clamp(42px,3.1cqw,56px);line-height:1.04;font-weight:700;
    letter-spacing:-.03em;margin:0 0 30px;color:var(--navy-x)}
  .hv-bleed .slide-c p{display:none}
  .hv-bleed .slide-c .btn-w{padding:17px 30px;font-size:17px;border-radius:999px;
    box-shadow:0 10px 28px rgba(12,72,156,.22)}
  .hv-bleed .slide-c .btn-w svg{width:19px;height:19px;transition:transform .2s}
  .hv-bleed .slide-c .btn-w:hover svg{transform:translateX(3px)}
  /* No slide indicator on desktop ("this 1 - 6 counter isnt needed"): the arrows move the slides and,
     like a dot did, stop the autoplay for good. The phone layout keeps its small bars. */
  .hv-bleed .s-dots,.hv-bleed.hv-fade .s-dots{display:none}
  /* the arrows move to the bottom-right corner, clear of the words at every width */
  .slider.hv-bleed .s-arrow{display:grid;top:auto;bottom:24px;transform:none;width:56px;height:56px;
    background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9);color:var(--navy);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 20px rgba(6,26,58,.14)}
  .slider.hv-bleed .s-arrow:hover{background:#fff}
  .slider.hv-bleed .s-next{right:var(--hx);left:auto}
  .slider.hv-bleed .s-prev{right:calc(var(--hx) + 68px);left:auto}
}
/* 1041-1240: the frame is trimmed to fit a narrower box, so the people sit nearer the words - at 1100 a
   450px column put "four" on the man's shoulder and "referral." on the patient's scarf */
@media (min-width:1041px) and (max-width:1240px){
  .hv-bleed .slide-c,.hv-bleed.hv-fade .slide-c{max-width:370px}
  .hv-bleed .slide-c h2{font-size:42px}
}
/* THE WHITE WASH (2026-10-23). The regenerated frames are exposed like real photographs, so the wall
   behind the headline is a mid-light grey or cream, not the blown-out white of the first set - which
   was itself one of the things that read as AI. Navy on it measured 2.9-4.2:1. smilestudio360 answers
   this the same way on every slide: a white wash from the left edge that fades out before the people.
   It only ever LIGHTENS (the owner's rule is against darkening a photograph), it stops short of every
   face, and its strength is per slide (--wash, set in home.js) so a plain wall gets less of it. */
@media (min-width:1041px){
  .hv-bleed .slide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,var(--wash,.6)) 0,
      rgba(255,255,255,var(--wash,.6)) 38cqw,rgba(255,255,255,0) 54cqw)}
}
@media (min-width:1041px) and (max-width:1240px){
  .hv-bleed .slide::after{background:linear-gradient(90deg,rgba(255,255,255,var(--wash,.6)) 0,
      rgba(255,255,255,var(--wash,.6)) calc(var(--hx) + 360px),rgba(255,255,255,0) calc(var(--hx) + 540px))}
}

/* Photo tiles carry their name only (2026-10-23, "the grey text descriptions can be removed"), so the
   label is one line and the title needs no space under it. */
.m-b h3:last-child{margin-bottom:0}

/* ---- PER-PHOTOGRAPH CROPS (generated by tools/dental-v6/crop-fit.py) -------------------
   One rule per photograph: object-position = the centre of the faces in it, which keeps the
   faces in view in ANY box at ANY width (see the docstring of crop-fit.py). Scoped to main so
   it beats the slot defaults (.phero-ph img and friends) without touching the hero slider.
   Regenerate after any photo change; hand-set values live in MANUAL in the script. */
main img[src$="/appliance-wide2.webp"]{object-position:23% 66%}  /* 1 face(s) */
main img[src$="/baby-tall1.webp"]{object-position:48% 30%}  /* 1 face(s) */
main img[src$="/baby-tall2.webp"]{object-position:55% 32%}  /* 2 face(s) */
main img[src$="/baby-tall3.webp"]{object-position:41% 35%}  /* 1 face(s) */
main img[src$="/braces-tall1.webp"]{object-position:47% 49%}  /* 1 face(s) */
main img[src$="/braces-tall2.webp"]{object-position:46% 29%}  /* 1 face(s) */
main img[src$="/braces-tall3.webp"]{object-position:51% 43%}  /* 1 face(s) */
main img[src$="/braces-wide1.webp"]{object-position:47% 43%}  /* 1 face(s) */
main img[src$="/braces-wide2.webp"]{object-position:53% 46%}  /* 1 face(s) */
main img[src$="/braces-wide3.webp"]{object-position:64% 37%}  /* 4 face(s) */
main img[src$="/braces-wide4.webp"]{object-position:53% 37%}  /* 1 face(s) */
main img[src$="/braces-wide5.webp"]{object-position:55% 48%}  /* 1 face(s) */
main img[src$="/braces-wide6.webp"]{object-position:44% 42%}  /* 1 face(s) */
main img[src$="/braces-wide7.webp"]{object-position:51% 42%}  /* 1 face(s) */
main img[src$="/braces-wide8.webp"]{object-position:51% 11%}  /* 1 face(s) */
main img[src$="/children-tall13.webp"]{object-position:49% 36%}  /* 1 face(s) */
main img[src$="/children-tall16.webp"]{object-position:54% 26%}  /* 1 face(s) */
main img[src$="/children-tall17.webp"]{object-position:64% 55%}  /* 1 face(s) */
main img[src$="/children-tall7.webp"]{object-position:45% 41%}  /* 2 face(s) */
main img[src$="/children-wide16.webp"]{object-position:39% 47%}  /* 1 face(s) */
main img[src$="/children-wide17.webp"]{object-position:61% 39%}  /* 1 face(s) */
main img[src$="/children-wide18.webp"]{object-position:46% 44%}  /* 1 face(s) */
main img[src$="/children-wide19.webp"]{object-position:51% 40%}  /* 1 face(s) */
main img[src$="/children-wide20.webp"]{object-position:52% 44%}  /* 1 face(s) */
main img[src$="/children-wide21.webp"]{object-position:55% 59%}  /* 2 face(s) */
main img[src$="/children-wide22.webp"]{object-position:46% 46%}  /* 1 face(s) */
main img[src$="/children-wide7.webp"]{object-position:50% 53%}  /* 1 face(s) */
main img[src$="/children-wide8.webp"]{object-position:44% 48%}  /* 1 face(s) */
main img[src$="/equipment-tall2.webp"]{object-position:36% 41%}  /* 2 face(s) */
main img[src$="/family-life-tall10.webp"]{object-position:46% 44%}  /* 1 face(s) */
main img[src$="/family-life-tall11.webp"]{object-position:65% 61%}  /* 9 face(s) */
main img[src$="/family-life-tall12.webp"]{object-position:63% 43%}  /* 3 face(s) */
main img[src$="/family-life-tall5.webp"]{object-position:48% 61%}  /* 5 face(s) */
main img[src$="/family-life-tall6.webp"]{object-position:48% 45%}  /* 4 face(s) */
main img[src$="/family-life-tall7.webp"]{object-position:48% 33%}  /* 3 face(s) */
main img[src$="/family-life-tall8.webp"]{object-position:22% 52%}  /* 3 face(s) */
main img[src$="/family-life-tall9.webp"]{object-position:42% 43%}  /* 2 face(s) */
main img[src$="/family-life-wide1.webp"]{object-position:47% 21%}  /* 4 face(s) */
main img[src$="/family-life-wide2.webp"]{object-position:54% 44%}  /* 4 face(s) */
main img[src$="/family-life-wide3.webp"]{object-position:47% 38%}  /* 7 face(s) */
main img[src$="/family-life-wide4.webp"]{object-position:52% 32%}  /* 2 face(s) */
main img[src$="/family-life-wide5.webp"]{object-position:56% 28%}  /* 2 face(s) */
main img[src$="/family-life-wide6.webp"]{object-position:52% 24%}  /* 3 face(s) */
main img[src$="/family-life-wide7.webp"]{object-position:52% 48%}  /* 1 face(s) */
main img[src$="/family-life-wide8.webp"]{object-position:50% 30%}  /* 2 face(s) */
main img[src$="/family-life-wide9.webp"]{object-position:53% 47%}  /* 6 face(s) */
main img[src$="/help-tall1.webp"]{object-position:61% 61%}  /* 1 face(s) */
main img[src$="/home-dental-implants.webp"]{object-position:47% 35%}  /* 1 face(s) */
main img[src$="/men-tall1.webp"]{object-position:57% 53%}  /* 1 face(s) */
main img[src$="/men-tall10.webp"]{object-position:50% 36%}  /* 1 face(s) */
main img[src$="/men-tall13.webp"]{object-position:40% 38%}  /* 1 face(s) */
main img[src$="/men-tall15.webp"]{object-position:48% 44%}  /* 2 face(s) */
main img[src$="/men-tall17.webp"]{object-position:57% 41%}  /* 1 face(s) */
main img[src$="/men-tall18.webp"]{object-position:51% 49%}  /* 1 face(s) */
main img[src$="/men-tall2.webp"]{object-position:43% 35%}  /* 1 face(s) */
main img[src$="/men-tall24.webp"]{object-position:37% 58%}  /* 2 face(s) */
main img[src$="/men-tall25.webp"]{object-position:47% 41%}  /* 1 face(s) */
main img[src$="/men-tall26.webp"]{object-position:51% 41%}  /* 1 face(s) */
main img[src$="/men-tall3.webp"]{object-position:55% 44%}  /* 1 face(s) */
main img[src$="/men-tall34.webp"]{object-position:46% 49%}  /* 2 face(s) */
main img[src$="/men-tall35.webp"]{object-position:49% 49%}  /* 1 face(s) */
main img[src$="/men-tall36.webp"]{object-position:51% 48%}  /* 2 face(s) */
main img[src$="/men-tall5.webp"]{object-position:45% 31%}  /* 1 face(s) */
main img[src$="/men-tall6.webp"]{object-position:45% 36%}  /* 1 face(s) */
main img[src$="/men-tall9.webp"]{object-position:54% 33%}  /* 1 face(s) */
main img[src$="/men-wide1.webp"]{object-position:54% 41%}  /* 1 face(s) */
main img[src$="/men-wide10.webp"]{object-position:50% 37%}  /* 1 face(s) */
main img[src$="/men-wide11.webp"]{object-position:37% 57%}  /* 2 face(s) */
main img[src$="/men-wide12.webp"]{object-position:43% 42%}  /* 1 face(s) */
main img[src$="/men-wide13.webp"]{object-position:32% 37%}  /* 1 face(s) */
main img[src$="/men-wide14.webp"]{object-position:52% 43%}  /* 1 face(s) */
main img[src$="/men-wide15.webp"]{object-position:46% 42%}  /* 1 face(s) */
main img[src$="/men-wide16.webp"]{object-position:52% 49%}  /* 1 face(s) */
main img[src$="/men-wide17.webp"]{object-position:48% 44%}  /* 2 face(s) */
main img[src$="/men-wide2.webp"]{object-position:47% 44%}  /* 1 face(s) */
main img[src$="/men-wide22.webp"]{object-position:47% 42%}  /* 1 face(s) */
main img[src$="/men-wide23.webp"]{object-position:70% 47%}  /* 1 face(s) */
main img[src$="/men-wide24.webp"]{object-position:53% 55%}  /* 1 face(s) */
main img[src$="/men-wide26.webp"]{object-position:50% 53%}  /* 1 face(s) */
main img[src$="/men-wide27.webp"]{object-position:58% 41%}  /* 1 face(s) */
main img[src$="/men-wide28.webp"]{object-position:53% 39%}  /* 1 face(s) */
main img[src$="/men-wide3.webp"]{object-position:49% 39%}  /* 1 face(s) */
main img[src$="/men-wide30.webp"]{object-position:67% 37%}  /* 1 face(s) */
main img[src$="/men-wide31.webp"]{object-position:49% 51%}  /* 1 face(s) */
main img[src$="/men-wide33.webp"]{object-position:67% 29%}  /* 2 face(s) */
main img[src$="/men-wide35.webp"]{object-position:55% 38%}  /* 1 face(s) */
main img[src$="/men-wide38.webp"]{object-position:31% 46%}  /* 3 face(s) */
main img[src$="/men-wide4.webp"]{object-position:49% 46%}  /* 1 face(s) */
main img[src$="/men-wide42.webp"]{object-position:65% 50%}  /* 3 face(s) */
main img[src$="/men-wide43.webp"]{object-position:50% 57%}  /* 2 face(s) */
main img[src$="/men-wide44.webp"]{object-position:36% 36%}  /* 1 face(s) */
main img[src$="/men-wide46.webp"]{object-position:68% 35%}  /* 2 face(s) */
main img[src$="/men-wide6.webp"]{object-position:49% 39%}  /* 1 face(s) */
main img[src$="/men-wide7.webp"]{object-position:50% 49%}  /* 1 face(s) */
main img[src$="/men-wide8.webp"]{object-position:52% 44%}  /* 1 face(s) */
main img[src$="/men-wide9.webp"]{object-position:39% 42%}  /* 1 face(s) */
main img[src$="/older-adults-tall1.webp"]{object-position:59% 34%}  /* 2 face(s) */
main img[src$="/older-adults-tall10.webp"]{object-position:53% 35%}  /* 2 face(s) */
main img[src$="/older-adults-tall12.webp"]{object-position:40% 38%}  /* 1 face(s) */
main img[src$="/older-adults-tall13.webp"]{object-position:49% 41%}  /* 1 face(s) */
main img[src$="/older-adults-tall14.webp"]{object-position:38% 26%}  /* 1 face(s) */
main img[src$="/older-adults-tall16.webp"]{object-position:42% 37%}  /* 1 face(s) */
main img[src$="/older-adults-tall22.webp"]{object-position:51% 27%}  /* 2 face(s) */
main img[src$="/older-adults-tall23.webp"]{object-position:50% 36%}  /* 2 face(s) */
main img[src$="/older-adults-tall24.webp"]{object-position:50% 35%}  /* 2 face(s) */
main img[src$="/older-adults-tall25.webp"]{object-position:69% 29%}  /* 4 face(s) */
main img[src$="/older-adults-tall26.webp"]{object-position:43% 32%}  /* 1 face(s) */
main img[src$="/older-adults-tall3.webp"]{object-position:47% 42%}  /* 2 face(s) */
main img[src$="/older-adults-tall4.webp"]{object-position:45% 51%}  /* 1 face(s) */
main img[src$="/older-adults-tall5.webp"]{object-position:52% 24%}  /* 3 face(s) */
main img[src$="/older-adults-tall7.webp"]{object-position:59% 42%}  /* 1 face(s) */
main img[src$="/older-adults-tall9.webp"]{object-position:60% 41%}  /* 2 face(s) */
main img[src$="/older-adults-wide10.webp"]{object-position:64% 64%}  /* 4 face(s) */
main img[src$="/older-adults-wide13.webp"]{object-position:27% 18%}  /* 1 face(s) */
main img[src$="/older-adults-wide14.webp"]{object-position:55% 49%}  /* 1 face(s) */
main img[src$="/older-adults-wide16.webp"]{object-position:48% 28%}  /* 1 face(s) */
main img[src$="/older-adults-wide18.webp"]{object-position:59% 55%}  /* 1 face(s) */
main img[src$="/older-adults-wide19.webp"]{object-position:67% 23%}  /* 1 face(s) */
main img[src$="/older-adults-wide20.webp"]{object-position:55% 37%}  /* 1 face(s) */
main img[src$="/older-adults-wide21.webp"]{object-position:77% 5%}  /* 1 face(s) */
main img[src$="/older-adults-wide23.webp"]{object-position:54% 64%}  /* 2 face(s) */
main img[src$="/older-adults-wide24.webp"]{object-position:44% 49%}  /* 3 face(s) */
main img[src$="/older-adults-wide25.webp"]{object-position:19% 83%}  /* 2 face(s) */
main img[src$="/older-adults-wide26.webp"]{object-position:35% 29%}  /* 1 face(s) */
main img[src$="/older-adults-wide3.webp"]{object-position:44% 55%}  /* 2 face(s) */
main img[src$="/older-adults-wide32.webp"]{object-position:84% 68%}  /* 4 face(s) */
main img[src$="/older-adults-wide33.webp"]{object-position:66% 41%}  /* 1 face(s) */
main img[src$="/older-adults-wide34.webp"]{object-position:51% 42%}  /* 3 face(s) */
main img[src$="/older-adults-wide5.webp"]{object-position:52% 49%}  /* 1 face(s) */
main img[src$="/older-adults-wide6.webp"]{object-position:55% 44%}  /* 3 face(s) */
main img[src$="/older-adults-wide7.webp"]{object-position:61% 24%}  /* 2 face(s) */
main img[src$="/pain-tall1.webp"]{object-position:48% 42%}  /* 3 face(s) */
main img[src$="/pain-tall10.webp"]{object-position:77% 56%}  /* 1 face(s) */
main img[src$="/pain-tall12.webp"]{object-position:46% 51%}  /* 1 face(s) */
main img[src$="/pain-tall13.webp"]{object-position:41% 36%}  /* 1 face(s) */
main img[src$="/pain-tall2.webp"]{object-position:48% 38%}  /* 1 face(s) */
main img[src$="/pain-tall3.webp"]{object-position:52% 38%}  /* 1 face(s) */
main img[src$="/pain-tall4.webp"]{object-position:45% 47%}  /* 2 face(s) */
main img[src$="/pain-tall5.webp"]{object-position:51% 27%}  /* 1 face(s) */
main img[src$="/pain-tall7.webp"]{object-position:56% 42%}  /* 1 face(s) */
main img[src$="/pain-tall8.webp"]{object-position:61% 27%}  /* 1 face(s) */
main img[src$="/pain-tall9.webp"]{object-position:47% 37%}  /* 1 face(s) */
main img[src$="/pain-wide1.webp"]{object-position:47% 55%}  /* 2 face(s) */
main img[src$="/pain-wide3.webp"]{object-position:52% 32%}  /* 1 face(s) */
main img[src$="/paperwork-tall2.webp"]{object-position:51% 39%}  /* 2 face(s) */
main img[src$="/paperwork-tall3.webp"]{object-position:56% 29%}  /* 1 face(s) */
main img[src$="/recovery-wide1.webp"]{object-position:50% 31%}  /* 1 face(s) */
main img[src$="/sleep-tall1.webp"]{object-position:60% 41%}  /* 1 face(s) */
main img[src$="/smile-tall1.webp"]{object-position:73% 29%}  /* 1 face(s) */
main img[src$="/smile-tall10.webp"]{object-position:58% 37%}  /* 1 face(s) */
main img[src$="/smile-tall11.webp"]{object-position:47% 19%}  /* 1 face(s) */
main img[src$="/smile-tall12.webp"]{object-position:49% 32%}  /* 2 face(s) */
main img[src$="/smile-tall2.webp"]{object-position:51% 42%}  /* 1 face(s) */
main img[src$="/smile-tall3.webp"]{object-position:58% 49%}  /* 1 face(s) */
main img[src$="/smile-tall4.webp"]{object-position:55% 49%}  /* 2 face(s) */
main img[src$="/smile-tall5.webp"]{object-position:58% 41%}  /* 1 face(s) */
main img[src$="/smile-tall6.webp"]{object-position:64% 55%}  /* 2 face(s) */
main img[src$="/smile-tall7.webp"]{object-position:52% 26%}  /* 1 face(s) */
main img[src$="/smile-tall8.webp"]{object-position:52% 36%}  /* 1 face(s) */
main img[src$="/smile-tall9.webp"]{object-position:48% 41%}  /* 1 face(s) */
main img[src$="/smile-wide1.webp"]{object-position:49% 38%}  /* 1 face(s) */
main img[src$="/smile-wide2.webp"]{object-position:61% 42%}  /* 1 face(s) */
main img[src$="/smile-wide3.webp"]{object-position:47% 38%}  /* 1 face(s) */
main img[src$="/smile-wide4.webp"]{object-position:53% 49%}  /* 1 face(s) */
main img[src$="/smile-wide6.webp"]{object-position:32% 36%}  /* 1 face(s) */
main img[src$="/smile-wide7.webp"]{object-position:67% 29%}  /* 1 face(s) */
main img[src$="/sport-tall1.webp"]{object-position:46% 50%}  /* 2 face(s) */
main img[src$="/sport-tall7.webp"]{object-position:45% 23%}  /* 1 face(s) */
main img[src$="/sport-wide5.webp"]{object-position:62% 27%}  /* 3 face(s) */
main img[src$="/women-tall1.webp"]{object-position:53% 31%}  /* 1 face(s) */
main img[src$="/women-tall13.webp"]{object-position:50% 41%}  /* set by eye */
main img[src$="/women-tall17.webp"]{object-position:60% 39%}  /* 1 face(s) */
main img[src$="/women-tall18.webp"]{object-position:37% 39%}  /* 2 face(s) */
main img[src$="/women-tall2.webp"]{object-position:50% 43%}  /* 1 face(s) */
main img[src$="/women-tall28.webp"]{object-position:47% 54%}  /* 1 face(s) */
main img[src$="/women-tall29.webp"]{object-position:40% 32%}  /* 1 face(s) */
main img[src$="/women-tall32.webp"]{object-position:51% 27%}  /* 1 face(s) */
main img[src$="/women-tall33.webp"]{object-position:39% 35%}  /* 1 face(s) */
main img[src$="/women-tall7.webp"]{object-position:35% 42%}  /* 1 face(s) */
main img[src$="/women-wide1.webp"]{object-position:47% 49%}  /* 1 face(s) */
main img[src$="/women-wide12.webp"]{object-position:58% 52%}  /* 1 face(s) */
main img[src$="/women-wide14.webp"]{object-position:40% 49%}  /* 1 face(s) */
main img[src$="/women-wide17.webp"]{object-position:55% 49%}  /* 1 face(s) */
main img[src$="/women-wide18.webp"]{object-position:34% 44%}  /* 2 face(s) */
main img[src$="/women-wide20.webp"]{object-position:42% 47%}  /* 1 face(s) */
main img[src$="/women-wide21.webp"]{object-position:54% 50%}  /* 1 face(s) */
main img[src$="/women-wide24.webp"]{object-position:53% 30%}  /* 1 face(s) */
main img[src$="/women-wide26.webp"]{object-position:49% 46%}  /* 1 face(s) */
main img[src$="/women-wide28.webp"]{object-position:66% 41%}  /* 2 face(s) */
main img[src$="/women-wide3.webp"]{object-position:73% 59%}  /* 3 face(s) */
main img[src$="/women-wide34.webp"]{object-position:61% 36%}  /* 1 face(s) */
main img[src$="/women-wide37.webp"]{object-position:51% 46%}  /* 1 face(s) */
main img[src$="/women-wide4.webp"]{object-position:43% 42%}  /* 1 face(s) */
main img[src$="/women-wide46.webp"]{object-position:51% 41%}  /* 1 face(s) */
main img[src$="/women-wide5.webp"]{object-position:12% 15%}  /* 1 face(s) */
main img[src$="/women-wide7.webp"]{object-position:62% 40%}  /* 2 face(s) */
main img[src$="/women-wide9.webp"]{object-position:48% 37%}  /* 1 face(s) */
main img[src$="/young-adults-tall1.webp"]{object-position:48% 35%}  /* 1 face(s) */
main img[src$="/young-adults-tall11.webp"]{object-position:41% 25%}  /* 1 face(s) */
main img[src$="/young-adults-tall12.webp"]{object-position:56% 29%}  /* 1 face(s) */
main img[src$="/young-adults-tall13.webp"]{object-position:51% 55%}  /* 2 face(s) */
main img[src$="/young-adults-tall15.webp"]{object-position:90% 72%}  /* 1 face(s) */
main img[src$="/young-adults-tall16.webp"]{object-position:41% 42%}  /* 1 face(s) */
main img[src$="/young-adults-tall3.webp"]{object-position:70% 32%}  /* 1 face(s) */
main img[src$="/young-adults-tall6.webp"]{object-position:60% 35%}  /* 1 face(s) */
main img[src$="/young-adults-tall7.webp"]{object-position:42% 44%}  /* 1 face(s) */
main img[src$="/young-adults-tall9.webp"]{object-position:49% 48%}  /* 2 face(s) */
main img[src$="/young-adults-wide1.webp"]{object-position:58% 36%}  /* 1 face(s) */
main img[src$="/young-adults-wide10.webp"]{object-position:50% 51%}  /* 1 face(s) */
main img[src$="/young-adults-wide12.webp"]{object-position:60% 38%}  /* 1 face(s) */
main img[src$="/young-adults-wide15.webp"]{object-position:49% 55%}  /* 1 face(s) */
main img[src$="/young-adults-wide16.webp"]{object-position:53% 46%}  /* 1 face(s) */
main img[src$="/young-adults-wide17.webp"]{object-position:48% 54%}  /* 1 face(s) */
main img[src$="/young-adults-wide19.webp"]{object-position:56% 38%}  /* 1 face(s) */
main img[src$="/young-adults-wide21.webp"]{object-position:40% 32%}  /* 1 face(s) */
main img[src$="/young-adults-wide3.webp"]{object-position:41% 47%}  /* 1 face(s) */
main img[src$="/young-adults-wide5.webp"]{object-position:72% 38%}  /* 1 face(s) */
main img[src$="/young-adults-wide8.webp"]{object-position:67% 40%}  /* 2 face(s) */