/* ==== css/fonts.css ==== */
/* Self-hosted latin subsets (OFL). Playfair Display and Archivo ship as variable fonts:
   one file covers every weight the brand kit asks for (--p-dw 500, labels 600, 700). */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url(../assets/fonts/playfair-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url(../assets/fonts/playfair-400i-viet.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url(../assets/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ==== css/brandkit.css ==== */
/* The studio stylesheet from heritage-brand-kit.html, taken WHOLE.
   An earlier version filtered it to 102 of 211 rules by selector prefix and
   dropped what the section text colour depends on, so everything below the
   trust bar rendered invisible. Rules for studio chrome we do not have are
   inert; filtering them was the bug. Regenerate from the brand kit, never
   hand-edit. */


/* ============================================================
   Heritage Dental Centre — brand studio
   Stance Agency, September 2026

   Tool chrome is deliberately neutral. Everything with colour
   in it is the client's own site rendering live in the stage.
   ============================================================ */

:root {
  /* Stance report chassis — LOCKED. Tokens copied from
     canberra-ortho/reports/report-aug-2026.html, not approximated. */
  --stance-dark:#0a0a0a; --stance-cream:#f7f5f0; --stance-green:#10b981;
  --accent-dark:#059669; --accent-soft:#d1fae5;
  --ink:#171717; --grey-1:#525252; --grey-2:#a3a3a3; --grey-3:#e5e5e5;
  --card:#fafafa; --red:#dc2626;

  --ink-soft:var(--grey-1); --muted:var(--grey-1); --stone:var(--grey-2);
  --ground:#ffffff; --surface:var(--card); --surface-2:#f1f0ed;
  --accent:var(--accent-dark); --accent-dim:rgba(16,185,129,.08);
  --line:var(--grey-3); --line-2:#efefef;
  --good:var(--accent-dark); --warn:var(--red);
  --shadow:0 1px 2px rgba(10,10,10,.04), 0 14px 38px rgba(10,10,10,.08);
  --r-card:8pt; --r-ctl:6pt;
  --f-display:"Outfit",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Outfit",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --pad:clamp(1.1rem,3.5vw,2.75rem);

  /* Deliberately single-theme. This is a client document on the Stance
     report chassis, which is a light artefact; a dark repaint would not
     be the same deliverable. color-scheme keeps the UA off the form
     controls on a dark-set machine. */
  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--f-body);font-size:1rem;line-height:1.6;padding-bottom:4.75rem;
}
.wrap{max-width:1500px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:1120px;margin:0 auto;padding:0 var(--pad)}

/* ---------------- masthead ---------------- */
.cover{
  background:var(--stance-dark);color:#fff;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:68px 68px;
}
.cover-in{max-width:1500px;margin:0 auto;padding:clamp(2.2rem,5vw,3.6rem) var(--pad) clamp(2rem,4vw,3rem)}
.cover .logo img{height:26px;width:auto;display:block;filter:invert(1);margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.cover .dot{width:8px;height:8px;border-radius:50%;background:var(--stance-green);margin-bottom:1.4rem}
.cover .eyebrow-c{
  color:var(--stance-green);font-family:var(--f-mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:500;margin:0 0 1rem;
}
.cover .crule{width:60mm;max-width:100%;height:1.5px;background:var(--stance-green);margin:0 0 1.2rem}
.cover .practice{font-size:1.3rem;font-weight:400;margin:0 0 .15rem}
.cover .url{color:var(--grey-2);font-size:.92rem;margin:0 0 1.6rem}
.cover .pills{display:flex;gap:.5rem;flex-wrap:wrap}
.pill{
  display:inline-block;padding:.34rem .85rem;border-radius:999px;
  font-family:var(--f-mono);font-size:.68rem;font-weight:500;
  border:1px solid rgba(255,255,255,0.16);color:#fff;
}
.pill .g{color:var(--stance-green);font-weight:700}
h1{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.04;letter-spacing:-.035em;
  margin:0 0 1.1rem;text-wrap:balance;max-width:19ch;color:#fff;
}
h1 em{font-style:normal;color:var(--stance-green)}
.standfirst{
  font-size:clamp(1rem,1.7vw,1.12rem);line-height:1.6;
  color:#d1d5db;max-width:62ch;margin:0 0 1.7rem;
}
.meta-strip{display:flex;flex-wrap:wrap;gap:0 2.5rem;
  border-top:1px solid rgba(255,255,255,.12);padding-top:1.1rem;margin-bottom:1.5rem}
.meta-strip div{padding:.4rem 0}
.meta-strip dt{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grey-2);margin:0 0 .18rem}
.meta-strip dd{margin:0;font-size:.9rem;font-weight:500;color:#fff}

/* ---------------- studio shell ---------------- */
.studio{
  display:grid;grid-template-columns:300px minmax(0,1fr);
  gap:clamp(1rem,2vw,1.75rem);align-items:start;
  margin-bottom:clamp(3rem,7vw,5rem);
}
@media (max-width:1040px){ .studio{grid-template-columns:1fr} }

/* --- control rail --- */
.rail{
  position:sticky;top:.85rem;
  background:#fff;border:1px solid var(--grey-3);border-radius:var(--r-card);
  max-height:calc(100vh - 6.5rem);overflow-y:auto;overscroll-behavior:contain;
}
@media (max-width:1040px){ .rail{position:static;max-height:none} }
.rail-head{
  position:sticky;top:0;z-index:3;background:#fff;
  border-bottom:1px solid var(--grey-3);padding:.85rem .95rem;
  display:flex;align-items:center;gap:.5rem;
}
.rail-head b{font-size:.82rem;font-weight:600;letter-spacing:-.005em}
.rail-head .sp{flex:1}
.mini-btn{
  font:inherit;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;background:transparent;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--r-ctl);padding:.3rem .55rem;cursor:pointer;
  transition:color .15s ease,border-color .15s ease;
}
.mini-btn:hover{color:var(--ink);border-color:var(--ink-soft)}
.mini-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.ctrl{border-bottom:1px solid var(--line-2);padding:.95rem}
.ctrl:last-child{border-bottom:0}
.ctrl-top{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.6rem}
.ctrl-top h3{
  margin:0;font-family:var(--f-mono);font-size:.6rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.ctrl-top .val{margin-left:auto;font-size:.76rem;font-weight:600;color:var(--ink)}
.ctrl-note{margin:.55rem 0 0;font-size:.74rem;line-height:1.5;color:var(--muted)}

.seg{display:grid;gap:.3rem}
.seg.two{grid-template-columns:1fr 1fr}
.seg.three{grid-template-columns:repeat(3,1fr)}
.seg.four{grid-template-columns:repeat(4,1fr)}
.sbtn{
  font:inherit;font-size:.76rem;font-weight:500;text-align:left;
  background:transparent;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:var(--r-ctl);padding:.46rem .6rem;
  cursor:pointer;position:relative;
  transition:border-color .14s ease,background .14s ease,color .14s ease;
  display:flex;align-items:center;gap:.4rem;min-width:0;
}
.sbtn:hover{border-color:var(--ink-soft);color:var(--ink)}
.sbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sbtn[aria-pressed="true"]{background:var(--stance-dark);color:#fff;border-color:var(--stance-dark);font-weight:600}
.sbtn .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbtn .star{
  margin-left:auto;font-family:var(--f-mono);font-size:.5rem;letter-spacing:.06em;
  opacity:.5;flex:none;
}
.sbtn[aria-pressed="true"] .star{opacity:.75}
.swatch-dot{width:13px;height:13px;border-radius:2px;flex:none;border:1px solid rgba(0,0,0,.14)}
.swatch-tri{width:13px;height:13px;border-radius:2px;flex:none;overflow:hidden;display:flex}
.swatch-tri i{flex:1;display:block}

/* --- stage --- */
.stage-wrap{min-width:0}
.stage-bar{
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  margin-bottom:.6rem;
}
.stage-bar .sp{flex:1}
.stage-bar .tag{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);
}

.screens{display:grid;gap:.85rem;grid-template-columns:1fr}
.screens.split{grid-template-columns:1fr 1fr}
@media (max-width:820px){ .screens.split{grid-template-columns:1fr} }

.screen{min-width:0}
.screen-label{
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.35rem;display:flex;align-items:center;gap:.4rem;
}
.screen-label .pip{width:6px;height:6px;border-radius:50%;background:var(--accent)}

.frame{
  border:1px solid var(--grey-3);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--shadow);background:#fff;
}
.frame-chrome{
  display:flex;align-items:center;gap:.35rem;padding:.42rem .6rem;
  background:var(--surface-2);border-bottom:1px solid var(--line);
}
.frame-chrome i{width:7px;height:7px;border-radius:50%;background:var(--line);display:block}
.frame-chrome .url{
  margin-left:.45rem;font-family:var(--f-mono);font-size:.55rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.viewport{
  overflow-y:auto;overflow-x:hidden;height:clamp(440px,64vh,720px);
  background:var(--p-ground);
  display:flex;justify-content:center;
  transition:background .3s ease;
}
.viewport.mob{background:var(--surface-2);padding:1rem 0}

/* ============================================================
   THE PREVIEW — everything below is the client's site.
   Namespaced under .site so tool chrome can never leak in.
   ============================================================ */

.site{
  width:100%;
  background:var(--p-ground);color:var(--p-ink);
  font-family:var(--p-body);line-height:1.6;
  transition:background .3s ease,color .3s ease;
}
.viewport.mob .site{max-width:390px;box-shadow:0 0 0 1px var(--line),0 8px 30px rgba(0,0,0,.14);border-radius:3px;overflow:hidden}
.site *{box-sizing:border-box}
.site-pad{
  padding-left:var(--p-pad,8%);padding-right:var(--p-pad,8%);
  transition:padding .25s ease;
}
.viewport.mob .site-pad{padding-left:1.1rem;padding-right:1.1rem}

/* backgrounds */
.s-sec{transition:background .3s ease,color .3s ease}
.site[data-sfc="tonal"] .s-sec.alt{background:var(--p-surface)}
.site[data-sfc="feature"] .s-sec.feat{background:var(--p-ink);color:var(--p-ground)}
.site[data-sfc="feature"] .s-sec.feat .rv{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);
}
.site[data-sfc="feature"] .s-sec.feat .rv .ln{background:rgba(255,255,255,.18)}
.site[data-sfc="feature"] .s-sec.feat .rv .src,
.site[data-sfc="feature"] .s-sec.feat .more{color:var(--p-ground);opacity:.72}
.site[data-sfc="feature"] .s-sec.feat .stars{color:var(--p-ground)}

/* nav */
.s-nav{
  display:flex;align-items:center;gap:1.1rem;
  padding-top:.95rem;padding-bottom:.95rem;
  border-bottom:1px solid var(--p-line);
}
.s-logo{display:flex;align-items:center;gap:.5rem;flex:none}
.s-logo svg{width:34px;height:auto;display:block;fill:var(--p-accent);transition:fill .3s ease}
.s-logo b{
  font-family:var(--p-display);font-weight:var(--p-dw);font-size:.94rem;
  letter-spacing:-.015em;line-height:1.05;
}
.s-links{display:flex;gap:1.05rem;font-size:.72rem;font-weight:500;margin-left:auto}
.s-links span{white-space:nowrap}
.s-nav .s-cta{font-size:.68rem;font-weight:600;padding:.4rem .7rem;flex:none}
.viewport.mob .s-links{display:none}

/* buttons */
.s-cta{
  background:var(--p-accent);color:var(--p-ground);
  border-radius:var(--p-r);display:inline-block;white-space:nowrap;
  transition:background .3s ease,border-radius .25s ease,color .3s ease;
}
.s-ghost{
  border:1px solid currentColor;color:var(--p-accent);
  border-radius:var(--p-r);display:inline-block;white-space:nowrap;
  transition:color .3s ease,border-radius .25s ease;
}

/* image slots — honest placeholders, not fake photography */
.s-slot{
  position:relative;overflow:hidden;border-radius:var(--p-r);
  background:linear-gradient(145deg,var(--p-accent) 0%,var(--p-ink) 100%);
  display:flex;align-items:flex-end;
  transition:border-radius .25s ease,background .3s ease;
}
.s-slot .wm{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:.14;pointer-events:none;
}
.s-slot .wm svg{width:58%;height:auto;fill:var(--p-ground)}
.s-slot .cap{
  position:relative;z-index:1;margin:0;padding:.45rem .55rem;
  font-family:var(--f-mono);font-size:.5rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--p-ground);opacity:.82;
}

/* hero: editorial */
.h-ed{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.2rem,3.5%,2.75rem);
  align-items:center;padding-top:clamp(1.8rem,5%,3.4rem);padding-bottom:clamp(1.8rem,5%,3.4rem)}
.viewport.mob .h-ed{grid-template-columns:1fr;gap:1.2rem}
.h-ed .slot{aspect-ratio:4/5;max-height:400px;margin-left:auto;width:100%}

/* hero: poster */
.h-po{position:relative;padding:0}
.h-po .slot{aspect-ratio:16/9;border-radius:0;align-items:flex-end;min-height:230px}
.viewport.mob .h-po .slot{aspect-ratio:3/4}
.h-po .over{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:clamp(1.1rem,4.5%,3rem);padding-top:3.5rem;
  background:linear-gradient(to top,rgba(0,0,0,.62),transparent);
  color:#fff;
}
.h-po .over .eyebrow,.h-po .over .lede{color:#fff;opacity:.9}
.h-po .over h2{color:#fff}
.h-po .bar{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  padding-top:.85rem;padding-bottom:.85rem;border-bottom:1px solid var(--p-line);
}

/* hero: index */
.h-ix{padding-top:clamp(2.2rem,6%,4.2rem);padding-bottom:clamp(1.4rem,3.5%,2.2rem)}
.h-ix h2{max-width:15ch}

/* shared hero type */
.eyebrow{
  font-family:var(--f-mono);font-size:.55rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--p-accent);margin:0 0 .65rem;
  transition:color .3s ease;
}
.site h2{
  font-family:var(--p-display);font-weight:var(--p-dw);
  font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.06;letter-spacing:-.023em;
  margin:0 0 .7rem;max-width:18ch;text-wrap:balance;
}
.viewport.mob .site h2{font-size:1.5rem}
.lede{font-size:.82rem;line-height:1.6;color:var(--p-muted);max-width:44ch;margin:0 0 1.05rem;
  transition:color .3s ease}
.h-row{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}
.h-row .s-cta{font-size:.76rem;font-weight:600;padding:.6rem 1.05rem}
.h-row .s-ghost{font-size:.76rem;font-weight:600;padding:.6rem 1.05rem}

/* trust strip */
.s-trust{
  display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center;
  padding-top:.75rem;padding-bottom:.75rem;
  border-top:1px solid var(--p-line);border-bottom:1px solid var(--p-line);
  font-size:.68rem;font-weight:500;
}
.s-trust .it{display:flex;align-items:center;gap:.35rem;white-space:nowrap}
.s-trust .st{color:var(--p-accent);font-family:var(--f-mono);font-weight:500;transition:color .3s ease}

/* section head */
.s-sec{padding-top:clamp(1.6rem,4.5%,2.9rem);padding-bottom:clamp(1.6rem,4.5%,2.9rem)}
.s-sec > .hd{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1rem}
.s-sec > .hd h3{
  font-family:var(--p-display);font-weight:var(--p-dw);font-size:1.28rem;
  line-height:1.1;letter-spacing:-.018em;margin:0;
}
.s-sec > .hd .more{
  margin-left:auto;font-size:.66rem;font-weight:600;color:var(--p-accent);
  white-space:nowrap;transition:color .3s ease;
}

/* services: grid */
.sv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.viewport.mob .sv-grid{grid-template-columns:1fr 1fr}
.sv-card{
  background:var(--p-surface);border:1px solid var(--p-line);border-radius:var(--p-r);
  padding:.75rem .8rem;display:flex;flex-direction:column;gap:.22rem;
  transition:border-radius .25s ease,background .3s ease,border-color .3s ease;
}
.sv-card b{font-size:.78rem;font-weight:600;letter-spacing:-.005em}
.sv-card span{font-size:.65rem;line-height:1.45;color:var(--p-muted);transition:color .3s ease}

/* services: feature */
.sv-feat{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.viewport.mob .sv-feat{grid-template-columns:1fr}
.sv-big{
  position:relative;border-radius:var(--p-r);overflow:hidden;min-height:150px;
  display:flex;align-items:flex-end;
  background:linear-gradient(145deg,var(--p-accent),var(--p-ink));
  transition:border-radius .25s ease,background .3s ease;
}
.sv-big .txt{position:relative;z-index:1;padding:.8rem;color:#fff}
.sv-big .txt b{display:block;font-size:.88rem;font-weight:600}
.sv-big .txt span{font-size:.64rem;opacity:.85}
.sv-small{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}

/* services: index list */
.sv-list{border-top:1px solid var(--p-line)}
.sv-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:baseline;
  padding:.62rem 0;border-bottom:1px solid var(--p-line);
}
.sv-row .n{font-family:var(--f-mono);font-size:.58rem;color:var(--p-accent);
  font-variant-numeric:tabular-nums;transition:color .3s ease}
.sv-row .nm{font-size:.86rem;font-weight:600;letter-spacing:-.008em}
.sv-row .ds{font-size:.66rem;color:var(--p-muted);text-align:right;transition:color .3s ease}
.viewport.mob .sv-row .ds{display:none}

/* team */
.tm-row{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem}
.viewport.mob .tm-row{grid-template-columns:repeat(3,1fr)}
.tm{display:flex;flex-direction:column;gap:.35rem}
.tm .slot{aspect-ratio:var(--tm-ratio,3/4)}
.tm b{font-size:.68rem;font-weight:600;line-height:1.2;letter-spacing:-.008em}
.tm span{font-size:.56rem;color:var(--p-muted);transition:color .3s ease}

/* reviews */
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.viewport.mob .rv-grid{grid-template-columns:1fr}
.rv{
  background:var(--p-surface);border:1px solid var(--p-line);border-radius:var(--p-r);
  padding:.75rem .8rem;display:flex;flex-direction:column;gap:.3rem;min-height:92px;
  transition:border-radius .25s ease,background .3s ease,border-color .3s ease;
}
.rv .stars{color:var(--p-accent);font-size:.7rem;letter-spacing:.08em;transition:color .3s ease}
.rv .ln{height:5px;border-radius:99px;background:var(--p-line);transition:background .3s ease}
.rv .ln.w2{width:86%}
.rv .ln.w3{width:62%}
.rv .src{
  margin-top:auto;font-family:var(--f-mono);font-size:.5rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--p-muted);transition:color .3s ease;
}

/* areas served */
.ar{display:flex;flex-wrap:wrap;gap:.3rem}
.ar span{
  font-size:.64rem;font-weight:500;padding:.26rem .55rem;
  border:1px solid var(--p-line);border-radius:var(--p-r);
  transition:border-radius .25s ease,border-color .3s ease;
}
.ar span.hot{background:var(--p-accent);color:var(--p-ground);border-color:var(--p-accent)}

/* footer */
.s-foot{
  background:var(--p-ink);color:var(--p-ground);
  padding-top:1.5rem;padding-bottom:1.5rem;
  display:flex;gap:1.2rem;flex-wrap:wrap;align-items:flex-start;
  transition:background .3s ease,color .3s ease;
}
.s-foot .blk{display:flex;flex-direction:column;gap:.15rem;font-size:.68rem;opacity:.82}
.s-foot .blk b{font-size:.72rem;font-weight:600;opacity:1;margin-bottom:.15rem}
.s-foot .fl{margin-left:auto;text-align:right}

/* ---------------- sections below the studio ---------------- */
section{margin-bottom:clamp(3rem,7vw,5rem);scroll-margin-top:1.5rem}
.sec-head{
  display:grid;grid-template-columns:auto 1fr;gap:0 1.3rem;align-items:start;
  border-top:1px solid var(--grey-3);padding-top:1.4rem;margin-bottom:1.6rem;
}
.sec-num{font-family:var(--f-mono);font-size:.7rem;font-weight:500;color:var(--accent-dark);
  padding-top:.5rem;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.sec-head h2{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.45rem,3vw,1.95rem);
  line-height:1.1;letter-spacing:-.02em;margin:0 0 .55rem;text-wrap:balance;
}
.sec-head h2::after{
  content:"";display:block;width:13mm;height:3pt;border-radius:2pt;
  background:var(--stance-green);margin-top:.55rem;
}
.sec-head .why{grid-column:2;margin:0;max-width:68ch;color:var(--ink-soft);font-size:.95rem;line-height:1.6}
.sec-head .why + .why{margin-top:.65rem}
.sec-head .why strong{color:var(--ink);font-weight:600}

textarea{
  width:100%;min-height:120px;resize:vertical;
  background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-card);padding:.95rem 1.1rem;
  font:inherit;font-size:.92rem;line-height:1.6;
}
textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
textarea::placeholder{color:var(--muted)}

.readout{background:var(--card);border:1px solid var(--grey-3);border-radius:var(--r-card);overflow:hidden}
.readout-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem 1.05rem;border-bottom:1px solid var(--line);
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.readout pre{margin:0;padding:1.05rem;overflow-x:auto;font-family:var(--f-mono);
  font-size:.73rem;line-height:1.75;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.readout pre .k{color:var(--muted)}
.readout pre .v{color:var(--ink);font-weight:500}

.confirm-block{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1.25rem,4vw,3rem);flex-wrap:wrap;
  background:var(--stance-dark);color:#fff;border-radius:var(--r-card);
  padding:clamp(1.6rem,4vw,2.5rem);
}
.confirm-block h2{font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.1;letter-spacing:-.02em;margin:0 0 .6rem;color:#fff}
.confirm-block p{margin:0;font-size:.92rem;line-height:1.6;color:#d1d5db;max-width:56ch}
.cb-text{min-width:0}
.saved-log{
  margin-top:1.15rem;padding-top:.95rem;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-direction:column;gap:.3rem;
}
.sl-row{display:flex;align-items:center;gap:.5rem;
  font-family:var(--f-mono);font-size:.72rem;color:#fff;font-variant-numeric:tabular-nums}
.sl-dot{width:6px;height:6px;border-radius:50%;background:var(--grey-2);flex:none}
.sl-dot.on{background:var(--stance-green)}
.sl-note{font-family:var(--f-mono);font-size:.62rem;line-height:1.5;
  letter-spacing:.02em;color:var(--grey-2);max-width:52ch}

#confirm-btn{
  font:inherit;font-size:.92rem;font-weight:600;background:var(--stance-green);color:#052e21;
  border:1px solid var(--stance-green);border-radius:999px;padding:.82rem 1.8rem;cursor:pointer;
  white-space:nowrap;transition:opacity .15s ease,background .15s ease;
}
#confirm-btn:hover{opacity:.9}
#confirm-btn:focus-visible{outline:2px solid var(--stance-green);outline-offset:3px}
#confirm-btn[disabled]{cursor:default;background:transparent;color:var(--stance-green);
  border-color:rgba(16,185,129,.4)}
#confirm-btn[disabled]::before{content:"\2713\00a0\00a0"}

footer{border-top:1px solid var(--line);padding:1.9rem 0 1rem;font-size:.8rem;color:var(--muted);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer p{margin:0}

/* savebar */
.savebar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;
  border-top:1px solid var(--grey-3);box-shadow:0 -6px 24px rgba(10,10,10,.08)}
.savebar-in{max-width:1500px;margin:0 auto;padding:.62rem var(--pad);
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.status{display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:500}
.dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.dot.ok{background:var(--good)} .dot.off{background:var(--warn)}
.dot.busy{background:var(--accent);animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}
.status small{color:var(--muted);font-weight:400;font-size:.76rem}
.chosen{margin-left:auto;display:flex;gap:.3rem;align-items:center;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chosen .sq{width:13px;height:13px;border-radius:2px;border:1px solid var(--line)}

@media (max-width:620px){
  .sec-head{grid-template-columns:1fr;gap:.3rem}
  .sec-head .why{grid-column:1}
  .sec-num{padding-top:0}
  .chosen{margin-left:0;width:100%}
}


/* --- host page: the studio rendered .site inside its own chrome. --- */
html { -webkit-text-size-adjust: 100%; }
body.bk { margin: 0; background: var(--p-ground, #EFEDE8); }
body.bk .site { min-height: 100vh; }
.s-slot.has-img { overflow: hidden; border-radius: var(--p-r, 19px); aspect-ratio: var(--tm-ratio, 3/4); }
.s-slot.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
a.sv-card, a.more, a.s-cta, a.s-ghost { text-decoration: none; }
.s-links a { color: inherit; text-decoration: none; }
.s-links a:hover, a.more:hover { text-decoration: underline; text-underline-offset: .2em; }
a.sv-card, a.sv-card b, a.sv-card span { color: inherit; }
a.sv-card b { color: var(--p-ink); }
a.sv-card:hover { border-color: var(--p-accent); }
.s-prose { max-width: 68ch; margin-top: 1.1rem; }
.s-prose p { font-family: var(--p-body); font-size: .95rem; line-height: 1.75; color: var(--p-muted); margin: 0 0 .9em; }
.s-prose p:last-child { margin-bottom: 0; }
.rv blockquote { margin: .7rem 0 .9rem; font-family: var(--p-body); font-size: .9rem; line-height: 1.6; color: var(--p-ink); }
.rv figcaption.src { display: block; }

/* ---------------------------------------------------------------------------
   Semantic headings.
   The studio's own chrome CSS came across with the preview stylesheet and
   carries a bare `h1 {}` rule (and others) intended for the studio page, not
   for the rendered site. Our markup uses real h1/h2 for the SEO outline, so
   those tags need the studio's display treatment stated explicitly and with
   enough specificity to win.
--------------------------------------------------------------------------- */
.site .h-ed h1 {
  font-family: var(--p-display);
  font-weight: var(--p-dw);
  font-size: clamp(2.3rem, 4.6vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.028em;
  color: var(--p-ink);
  font-style: normal;
  margin: .35rem 0 0;
}
.site .hd h2 {
  font-family: var(--p-display);
  font-weight: var(--p-dw);
  font-size: 1.28rem;
  line-height: 1.1;
  letter-spacing: -.018em;
  color: var(--p-ink);
  font-style: normal;
  margin: 0;
}
.site .ar span {
  display: inline-block;
  font-family: var(--p-body);
  font-size: .64rem;
  font-weight: 500;
  color: var(--p-ink);
  padding: .26rem .55rem;
  border: 1px solid var(--p-line);
  border-radius: var(--p-r);
}
.site .ar span.hot {
  background: var(--p-accent);
  color: var(--p-ground);
  border-color: var(--p-accent);
}

/* Dentist portraits: cut out and standing on the studio's own slot gradient
   (linear-gradient 145deg, accent -> ink) with the Rockies watermark behind,
   rather than each sitting on its own white studio backdrop. */
.site .tm .s-slot.cut { aspect-ratio: var(--tm-ratio, 3/4); align-items: flex-end; }
.site .tm .s-slot.cut img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 96%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}

/* The Rockies mark sits behind the dentists like a landscape, not centred where
   a torso hides it. Raised to shoulder height, wider, and a touch stronger so it
   reads through the gradient without competing with the face. */
.site .tm .s-slot.cut .wm {
  align-items: flex-start;
  padding-top: 26%;
  opacity: .22;
  z-index: 0;
}
.site .tm .s-slot.cut .wm svg { width: 82%; }

/* ---------------------------------------------------------------------------
   Motion support.
   Initial states are set by JS, never here, so the page renders complete with
   JS off or GSAP missing. These rules only smooth what motion touches.
--------------------------------------------------------------------------- */
.site .s-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--p-ground) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  transition: box-shadow .35s cubic-bezier(.16,1,.3,1),
              border-color .35s cubic-bezier(.16,1,.3,1);
}
.site .s-nav.is-stuck {
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 var(--p-line), 0 10px 30px -22px rgba(22,24,26,.5);
}

/* hover states, transform and opacity only */
.site .sv-card,
.site .tm .s-slot,
.site .rv { transition: transform .45s cubic-bezier(.16,1,.3,1); }
.site a.sv-card:hover { transform: translateY(-2px); }
.site .tm:hover .s-slot { transform: translateY(-3px); }
.site .s-cta,
.site .s-ghost { transition: transform .2s cubic-bezier(.16,1,.3,1); }
.site .s-cta:active,
.site .s-ghost:active { transform: scale(.98); }

/* the hero portrait is the only parallax surface */
.site .h-ed .s-slot { overflow: hidden; }
.site .h-ed .s-slot img { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .site *,
  .site *::before,
  .site *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---------------------------------------------------------------------------
   REAL-SITE TYPE SCALE

   The studio renders .site inside a small browser mockup, so its type is sized
   for a thumbnail: eyebrow .55rem, lede .82rem, section headings 1.28rem, names
   .68rem. Correct in a preview frame, far too small full-bleed at 1440px, which
   left a 56px headline sitting over a page of caption-sized text.

   Same proportions the brand kit established, scaled ~1.45x for a real viewport.
   Sizes are clamped so they hold from mobile to wide desktop.
--------------------------------------------------------------------------- */
.site .h-ed .eyebrow    { font-size: clamp(.72rem, .9vw, .8rem); letter-spacing: .14em; }
.site .h-ed .lede       { font-size: clamp(1.02rem, 1.25vw, 1.16rem); line-height: 1.6; max-width: 46ch; margin-top: 1.15rem; }
.site .h-ed .h-row      { margin-top: 1.9rem; }

.site .hd h2            { font-size: clamp(1.55rem, 2.3vw, 2rem); line-height: 1.12; }
.site .hd .more         { font-size: clamp(.82rem, .95vw, .9rem); }

.site .sv-card b        { font-size: clamp(1rem, 1.15vw, 1.08rem); }
.site .sv-card span     { font-size: clamp(.86rem, 1vw, .92rem); line-height: 1.5; }
.site .sv-card          { padding: 1.35rem 1.4rem; }

.site .tm b             { font-size: clamp(.94rem, 1.05vw, 1rem); }
.site .tm span          { font-size: clamp(.82rem, .92vw, .88rem); }

.site .rv blockquote    { font-size: clamp(.95rem, 1.05vw, 1.02rem); line-height: 1.62; }
.site .rv .src          { font-size: .72rem; }
.site .rv .stars        { font-size: .95rem; }

.site .s-trust          { font-size: clamp(.82rem, .95vw, .9rem); padding-top: 1.05rem; padding-bottom: 1.05rem; }
.site .s-trust .st      { font-size: 1em; }

.site .ar span          { font-size: clamp(.8rem, .92vw, .86rem); padding: .42rem .85rem; }

.site .s-prose p        { font-size: clamp(1rem, 1.12vw, 1.06rem); line-height: 1.75; }

.site .s-nav .s-links   { font-size: clamp(.84rem, .95vw, .9rem); gap: 1.6rem; }
.site .s-nav .s-cta     { font-size: .84rem; padding: .55rem 1.1rem; }
.site .s-nav .s-logo b  { font-size: .92rem; line-height: 1.25; }

.site .s-foot           { font-size: clamp(.84rem, .95vw, .9rem); padding-top: 2.6rem; padding-bottom: 2.6rem; }
.site .s-foot .blk b    { font-size: .92rem; }

/* sections need to breathe at this width; 46px was preview spacing */
.site .s-sec            { padding-top: clamp(3.5rem, 6vw, 6rem); padding-bottom: clamp(3.5rem, 6vw, 6rem); }
.site .h-ed             { padding-top: clamp(3.5rem, 6vw, 6rem); padding-bottom: clamp(3.5rem, 6vw, 6rem); }

/* ---------------------------------------------------------------------------
   SCALE, SECOND PASS
   The first correction was still ~15% under. These are the sizes a 1440px
   editorial page actually wants, clamped so mobile stays sane.
--------------------------------------------------------------------------- */
.site .h-ed h1        { font-size: clamp(2.7rem, 5.4vw, 4.3rem); line-height: 1.02; }
.site .h-ed .lede     { font-size: clamp(1.12rem, 1.45vw, 1.32rem); line-height: 1.58; margin-top: 1.6rem; max-width: 42ch; }
.site .h-ed .eyebrow  { font-size: clamp(.76rem, .92vw, .84rem); }

.site .hd h2          { font-size: clamp(1.85rem, 2.9vw, 2.4rem); }
.site .hd .more       { font-size: clamp(.9rem, 1.02vw, .98rem); }

.site .s-prose p      { font-size: clamp(1.06rem, 1.25vw, 1.14rem); line-height: 1.72; }
.site .sv-card b      { font-size: clamp(1.06rem, 1.25vw, 1.14rem); }
.site .sv-card span   { font-size: clamp(.94rem, 1.05vw, .98rem); }
.site .sv-card        { padding: 1.55rem 1.6rem; }

.site .tm b           { font-size: clamp(1rem, 1.15vw, 1.08rem); }
.site .tm span        { font-size: clamp(.88rem, 1vw, .94rem); }

.site .rv blockquote  { font-size: clamp(1.02rem, 1.18vw, 1.1rem); line-height: 1.6; }
.site .rv .src        { font-size: .76rem; }

.site .ar span        { font-size: clamp(.88rem, 1vw, .94rem); padding: .5rem .95rem; }

.site .s-nav .s-links { font-size: clamp(.9rem, 1.02vw, .96rem); }
.site .s-nav .s-cta   { font-size: .9rem; padding: .6rem 1.2rem; }
.site .s-nav .s-logo b{ font-size: .98rem; }
.site .s-foot         { font-size: clamp(.9rem, 1.02vw, .96rem); }

/* ---------------------------------------------------------------------------
   KINETIC MARQUEE
   Replaces the static trust strip. Two identical sets translate -50% for a
   seamless loop; the second is aria-hidden so it is not read twice.
   transform only, pauses on hover, and holds still under reduced motion.
--------------------------------------------------------------------------- */
.site .s-marquee {
  display: flex; align-items: center; gap: .75rem;
  border-top: 1px solid var(--p-line);
  border-bottom: 1px solid var(--p-line);
  background: var(--p-surface);
  padding: 1.15rem var(--p-pad, 5%) 1.15rem 0;
}
/* the fade is on the trailing edge only: a leading fade cut the first item
   ("oogle reviews") on every page load */
.site .mq-view {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  padding-left: var(--p-pad, 5%);   /* inside the clip box: items start inset, then scroll out at the screen edge */
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
          mask-image: linear-gradient(90deg, #000 90%, transparent);
}
.site .mq-track {
  display: flex;
  width: max-content;
  animation: mq 42s linear infinite;
  will-change: transform;
}
.site .s-marquee:hover .mq-track,
.site .s-marquee:focus-within .mq-track { animation-play-state: paused; }
.site .mq-set { display: flex; align-items: center; }
.site .mq-it {
  font-family: var(--p-body);
  font-size: clamp(.92rem, 1.05vw, 1rem);
  font-weight: 500;
  color: var(--p-ink);
  white-space: nowrap;
}
.site .mq-dot { color: var(--p-accent); opacity: .5; padding: 0 1.9rem; }
@keyframes mq { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) {
  .site .mq-track { animation: none; }
  .site .mq-view { -webkit-mask-image: none; mask-image: none; }
}

/* ---------------------------------------------------------------------------
   MOBILE
   The studio nav was drawn for a desktop preview frame and overflowed a 390px
   viewport. It now stacks: logo and Book on the first row, the links as a
   scrollable strip on the second. Nothing is hidden, because the treatment
   pages are the point of the site.
--------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .site .s-nav {
    flex-wrap: wrap;
    row-gap: .65rem;
    padding-top: .8rem;
    padding-bottom: .55rem;
  }
  .site .s-nav .s-logo { flex: 1 1 auto; }
  .site .s-nav .s-cta  { order: 2; flex: none; }
  .site .s-nav .s-links {
    order: 3;
    flex: 1 0 100%;
    gap: 1.25rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .2rem;
  }
  .site .s-nav .s-links::-webkit-scrollbar { display: none; }
  .site .s-nav .s-links a { white-space: nowrap; }

  /* the narrow-column measure is a desktop choice; phones need the full width */
  .site .site-pad { padding-left: 1.25rem; padding-right: 1.25rem; }
  .site .h-ed { grid-template-columns: 1fr; gap: 2rem; }
  .site .h-ed .lede { max-width: none; }
  .site .sv-grid { grid-template-columns: 1fr; }
  .site .tm-row  { grid-template-columns: repeat(2, 1fr); }
  .site .rv-grid { grid-template-columns: 1fr; }
  .site .s-foot  { flex-wrap: wrap; row-gap: 1.6rem; }
  .site .s-foot .blk { flex: 1 1 46%; text-align: left; }
}

/* The poster hero is 16:9 by the studio's own rule; the generic has-img helper
   was written for the 3:4 portrait tiles and was overriding it. Scope it. */
.site .h-po .s-slot.has-img { aspect-ratio: 16 / 9; border-radius: 0; }
.site .h-po .s-slot.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------------------
   POSTER HERO
   The signed-off direction. My earlier type rules targeted the editorial hero
   (.h-ed), so the poster headline fell back to the wrong face, and .h-po
   {padding:0} was cancelling the CTA bar's site-pad.
--------------------------------------------------------------------------- */
.site .h-po .over h1 {
  font-family: var(--p-display);
  font-weight: var(--p-dw);
  font-size: clamp(2.5rem, 5.2vw, 4.2rem);
  line-height: 1.03;
  letter-spacing: -.026em;
  color: #fff;
  font-style: normal;
  margin: .4rem 0 0;
  max-width: 18ch;
  text-wrap: balance;
}
.site .h-po .over .eyebrow {
  font-size: clamp(.74rem, .9vw, .82rem);
  letter-spacing: .16em;
  color: #fff;
  opacity: .82;
}
.site .h-po .over { padding-bottom: clamp(1.6rem, 3.5vw, 2.8rem); }

/* the CTA bar sits under the image and needs its gutters back */
.site .h-po.bar {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
  padding-left: var(--p-pad);
  padding-right: var(--p-pad);
  background: var(--p-ground);
}
.site .h-po.bar .s-cta,
.site .h-po.bar .s-ghost {
  font-size: clamp(.9rem, 1.02vw, .96rem) !important;
  padding: .72rem 1.35rem !important;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .site .h-po.bar { flex-wrap: wrap; }
  .site .h-po.bar .s-cta, .site .h-po.bar .s-ghost { flex: 1 1 auto; text-align: center; }
}

/* The poster slot must never exceed the viewport. The studio's mobile ratio
   rule is scoped to .viewport.mob, a preview-only class that does not exist
   on the real site. */
.site .h-po { overflow: hidden; max-width: 100%; }
.site .h-po .s-slot.has-img { max-width: 100%; }
.site .h-po .s-slot.has-img img { max-width: 100%; }
@media (max-width: 760px) {
  .site .h-po .s-slot.has-img { aspect-ratio: 4 / 5; }
  .site .h-po .over h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); max-width: none; }
}

/* ---------------------------------------------------------------------------
   FOOTER SITE MAP
   All 46 indexable pages one click from home. Flattens crawl depth and means
   the treatment pages are reachable without hunting through the nav.
--------------------------------------------------------------------------- */
.site .s-sitemap {
  background: var(--p-ink);
  color: var(--p-ground);
  padding-top: clamp(3rem, 5vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.site .ft-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2.6rem 1.6rem;
  align-items: start;
}
.site .ft-col h3 {
  font-family: var(--p-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--p-ground);
  opacity: .55;
  margin: 0 0 .95rem;
}
.site .ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .48rem; }
.site .ft-col a {
  font-family: var(--p-body);
  font-size: .92rem;
  line-height: 1.4;
  color: var(--p-ground);
  opacity: .82;
  text-decoration: none;
  transition: opacity .2s cubic-bezier(.16,1,.3,1);
}
.site .ft-col a:hover { opacity: 1; text-decoration: underline; text-underline-offset: .18em; }

/* the contact strip sits under the map, same dark ground */
.site .s-foot { background: var(--p-ink); color: var(--p-ground); border-top: 1px solid rgba(239,237,232,.12); }
.site .s-foot a { color: inherit; text-decoration: none; }
.site .s-foot a:hover { text-decoration: underline; text-underline-offset: .18em; }

/* CTAs now sit over the hero image */
.site .h-po .over .h-row {
  display: flex;
  gap: .8rem;
  margin-top: 1.7rem;
  flex-wrap: wrap;
}
.site .h-po .over .s-cta,
.site .h-po .over .s-ghost {
  font-size: clamp(.9rem, 1.02vw, .96rem) !important;
  padding: .78rem 1.45rem !important;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.site .h-po .over .s-ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.site .h-po .over .s-ghost:hover { border-color: #fff; }
/* the hero CTAs and footer map reveal with everything else */

@media (max-width: 1180px) { .site .ft-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 680px)  { .site .ft-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2rem 1.2rem; } }
/* the page ends on the dark footer, not a strip of ground below it */
body.bk { background: var(--p-ink); }
body.bk .site { background: var(--p-ground); }

/* ---------------------------------------------------------------------------
   REVIEW RAIL
   Fifteen real five-star reviews scrolling instead of three static cards that
   stretched to a common height and left dead space under the shortest.
   Two identical sets translate -50% for a seamless loop; the duplicate is
   aria-hidden. Pauses on hover so a review can actually be read.
--------------------------------------------------------------------------- */
.site .rv-rail {
  overflow: hidden;
  margin-top: 1.6rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.site .rv-track {
  display: flex;
  width: max-content;
  animation: rvscroll 120s linear infinite;
  will-change: transform;
}
.site .rv-rail:hover .rv-track,
.site .rv-rail:focus-within .rv-track { animation-play-state: paused; }
/* flex-start, or every card inflates to the height of the longest quote and
   the short ones carry a hole above the attribution */
.site .rv-set { display: flex; align-items: flex-start; }
.site .rv-rail .rv {
  flex: 0 0 auto;
  width: clamp(270px, 24vw, 340px);
  margin-right: .9rem;
  height: auto;              /* no stretching to a shared height */
  display: flex;
  flex-direction: column;
  background: var(--p-surface);
  border: 1px solid var(--p-line);
  border-radius: var(--p-r);
  padding: 1.35rem 1.4rem;
}
.site .rv-rail .rv blockquote { flex: 0 0 auto; margin: .7rem 0 1rem; }
.site .rv-rail .rv .src { margin-top: 0; }
/* pause/play for the two loops; site.js flips aria-pressed and .is-paused */
.site .mq-track.is-paused, .site .rv-track.is-paused { animation-play-state: paused; }
.site .rv-ctl { display: flex; justify-content: flex-end; margin-top: .8rem; }
.site .loop-btn {
  flex: none; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid color-mix(in srgb, var(--p-ink) 50%, #fff); border-radius: 50%;
  background: var(--p-surface); color: var(--p-ink); cursor: pointer;
}
.site .loop-btn:hover { border-color: var(--p-ink); }
.site .loop-btn svg { width: 14px; height: 14px; fill: currentColor; }
.site .loop-btn .i-play, .site .loop-btn[aria-pressed="true"] .i-pause { display: none; }
.site .loop-btn[aria-pressed="true"] .i-play { display: block; }
@keyframes rvscroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) {
  .site .rv-track { animation: none; overflow-x: auto; }
  .site .loop-btn { display: none; }
  .site .rv-rail { -webkit-mask-image: none; mask-image: none; }
}

/* the rail replaces the grid, so the old grid rules must not fight it */
.site .s-sec.feat .rv-rail .rv { background: var(--p-surface); }

/* tighten the sections that were carrying dead space */
.site .s-sec.feat { padding-bottom: clamp(3rem, 5vw, 5rem); }
.site .ar { margin-top: 1.5rem; gap: .6rem; }

/* ---- service area: copy left, neighbourhood chips right -------------------
   The prose caps at 68ch, which left the right half of this section empty.
   The chips now occupy it instead of stacking underneath.                   */
.site .area-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: stretch;   /* so the divider rule spans the row, not just the chips */
}
.site .area-grid > .area-copy > .hd { margin-bottom: 0; }
/* the column IS the measure here, so the 68ch cap must not shrink it further */
.site .area-grid .s-prose { max-width: none; margin-top: 1.4rem; }
.site .area-chips {
  padding: .5rem 0 0 clamp(2rem, 3.2vw, 3.25rem);
  border-left: 1px solid var(--p-line);
}
.site .area-lbl {
  font-family: var(--p-body);
  font-size: clamp(.72rem, .8vw, .78rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--p-muted);
  margin: 0 0 1.1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--p-line);
}
.site .area-chips .ar { margin-top: 0; }

@media (max-width: 900px) {
  .site .area-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .site .area-grid .s-prose { max-width: 62ch; }
  .site .area-chips { padding: 0; border-left: 0; }
}

/* ---- intro: prose left, a picture of the practice right -------------------
   Same problem the service-area section had: a 68ch column left the right
   half of a full-width section empty.                                       */
.site .intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: stretch;   /* the picture matches the prose height exactly */
}
.site .intro-grid > .intro-copy > .hd { margin-bottom: 0; }
.site .intro-grid .s-prose { max-width: none; }
.site .intro-media {
  margin: 0;
  border-radius: var(--p-r);
  overflow: hidden;
  background: var(--p-surface);
}
.site .intro-media img {
  display: block;
  width: 100%;
  /* height:auto is load-bearing. The width/height ATTRIBUTES are presentational
     hints that set CSS height, so overriding width alone leaves both definite
     and aspect-ratio is ignored -- the image renders at its raw 1067px. */
  height: 100%;
  aspect-ratio: 4 / 5;   /* a floor, so a short copy column cannot squash it */
  object-fit: cover;
  object-position: 50% 38%;
}

@media (max-width: 1100px) {
  .site .intro-grid { grid-template-columns: 1fr; gap: 2rem; }
  .site .intro-media img { height: auto; aspect-ratio: 3 / 2; }
}

/* ==== css/interior.css ==== */
/* Interior-page layer, split out of brandkit.css 17 Sep 2026.
   OWNER: layout agent. Heroes (.ih*), crumbs, .deck, .sec-split, .sec-band,
   .chk, roster, gallery, .cta-band, .s-legal, plus the labelled block at the
   end for furniture shared by all 48 pages and the homepage sections.
   Nothing here redefines a brand token.

   Spatial thesis (build/reports/layout.md): the page is three chapters.
   Opening = hero + crumbs + deck, kept tight. Body = headed sections at one
   generous interval, alternating ground/surface. Close = the CTA tile, then
   the ink footer. Figures are fitted to the copy they sit beside: a floor
   ratio, stretched to the copy, capped at ~4:5 of their own width. */

/* ===========================================================================
   INTERIOR HEROES
   Five treatments: poster, split, portrait, band, editorial. The variant per
   page is settled in pagekit.ROUTES + vary(); this only sizes them.
   ======================================================================== */

.site .ih img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.site .ih-band img, .site .sec-band img { display: block; width: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }

.site .ih h1 {
  /* the studio sheet carries a bare `h1 { color:#fff }` because in its preview
     the h1 only ever sits over a photo. On a tonal ground that is invisible. */
  color: var(--p-ink);
  font-family: var(--p-display); font-weight: var(--p-dw);
  font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.03;
  letter-spacing: -.012em; margin: 0; text-wrap: balance;
}
.site .ih .lede {
  font-family: var(--p-body); color: var(--p-muted);
  font-size: clamp(1.1rem, 1.4vw, 1.28rem); line-height: 1.58;
  margin: 1.35rem 0 0; max-width: 46ch;
}
/* the page's opening paragraph, pulled up beside a tall picture (split, portrait) */
.site .ih-intro { margin: 1.4rem 0 0; max-width: 54ch; }
.site .ih-intro p {
  font-family: var(--p-body); font-size: clamp(1rem, 1.12vw, 1.06rem);
  line-height: 1.7; color: var(--p-muted); margin: 0 0 .85em;
}
.site .ih-intro p:last-child { margin-bottom: 0; }
.site .ih-intro h3 {
  font-family: var(--p-body); font-size: clamp(1.02rem, 1.15vw, 1.1rem);
  font-weight: 600; color: var(--p-ink); margin: 0 0 .55rem;
}
.site .ih .h-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* the studio's .76rem/39px buttons were preview-sized; the homepage hero already
   corrected its own, the interior heroes and the closing band never were */
.site .ih .h-row .s-cta, .site .ih .h-row .s-ghost,
.site .cta-band .h-row .s-cta, .site .cta-band .h-row .s-ghost {
  font-size: clamp(.9rem, 1.02vw, .96rem); font-weight: 600;
  padding: .78rem 1.45rem; min-height: 2.75rem;
  display: inline-flex; align-items: center; text-decoration: none;
}

/* editorial: type only, the page's first picture arrives further down */
.site .ih.ed {
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
.site .ih.ed h1 { max-width: 22ch; }

/* poster: full-bleed photo with the headline over a scrim */
.site .ih.po { position: relative; isolation: isolate; }
.site .ih.po .ih-img { position: absolute; inset: 0; z-index: -2; }
.site .ih.po::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(10,12,14,.86) 0%, rgba(10,12,14,.62) 42%, rgba(10,12,14,.18) 78%);
}
.site .ih.po .ih-over {
  min-height: clamp(24rem, 46vw, 37rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(2.6rem, 5vw, 4rem);
  color: #fff;
}
.site .ih.po h1 { color: #fff; max-width: 17ch; }
.site .ih.po .lede { color: rgba(255,255,255,.84); }
.site .ih.po .s-ghost { color: #fff; border-color: rgba(255,255,255,.5); }

/* split: copy left, picture right. The picture is a stretched grid item: its
   aspect-ratio is a floor, it grows to the copy's height, and the vw cap keeps
   it near 4:5 of its own width so a long intro cannot turn it into a strip. */
.site .ih.sp {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(2.5rem, 5vw, 5rem); align-items: stretch;
  padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
.site .ih.sp.pt { grid-template-columns: minmax(0, 1fr) minmax(0, .58fr); }
.site .ih.sp .ih-copy { align-self: center; min-width: 0; display: grid; align-content: center; }
.site .ih.sp .ih-fig,
.site .sec-media {
  margin: 0; min-width: 0;
  display: grid; grid-template-rows: minmax(0, 1fr); align-items: center;
}
.site .ih.sp .ih-fig > img,
.site .sec-media > img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%);
  border-radius: var(--p-r); background: var(--p-surface);
}
.site .ih.sp .ih-fig > img { aspect-ratio: var(--ar, 4/5); max-height: 48vw; }
/* a group shot keeps its own 3:2 frame instead of stretching to the copy */
.site .ih.sp .ih-fig.wide > img { height: auto; }

/* band: type, then a wide picture beneath it */
.site .ih.bd { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.site .ih-band {
  margin: 0 0 clamp(.75rem, 1.5vw, 1.25rem);
  overflow: hidden; background: var(--p-surface);
}
.site .ih-band img { aspect-ratio: var(--ar, 13/5); height: auto; }

/* dentist heroes reuse the homepage cutout tile rather than a boxed portrait */
.site .ih-fig.cut { background: none; border-radius: 0; overflow: visible; }
.site .ih-fig .s-slot.cut {
  height: 100%; aspect-ratio: 3/4; max-height: 44vw;
  align-items: flex-end; border-radius: var(--p-r);
}
.site .ih-fig .s-slot.cut img {
  position: relative; z-index: 1; width: 100%; height: 96%;
  object-fit: contain; object-position: bottom center; display: block; aspect-ratio: auto;
}
.site .ih-fig .s-slot.cut .wm { align-items: flex-start; padding-top: 26%; opacity: .22; z-index: 0; }
.site .ih-fig .s-slot.cut .wm svg { width: 82%; }

/* breadcrumbs: part of the opening cluster, so they sit close under the hero */
.site .crumbs {
  font-family: var(--p-body); font-size: clamp(.8rem, .92vw, .86rem);
  color: var(--p-muted); padding-top: 1.25rem; padding-bottom: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
}
.site .crumbs a {
  color: var(--p-muted); text-decoration: none;
  /* a 44px target without moving the text */
  display: inline-block; padding: .7rem 0; margin: -.7rem 0;
}
.site .crumbs a:hover { color: var(--p-ink); text-decoration: underline; text-underline-offset: .2em; }
.site .crumbs .sep { opacity: .45; }
.site .crumbs [aria-current] { color: var(--p-ink); }

/* ===========================================================================
   BODY RHYTHM
   The deck (the heading-less opening paragraph) is tight to the crumbs and set
   larger, in ink. Headed sections keep the generous interval and alternate
   ground/surface. The closing band has its own, slightly shorter, interval.
   ======================================================================== */
.site main .s-sec { padding-top: clamp(3.5rem, 6vw, 6rem); padding-bottom: clamp(3.5rem, 6vw, 6rem); }
.site main .s-sec.deck { padding-top: clamp(1.5rem, 2.5vw, 2.25rem); padding-bottom: clamp(2.75rem, 5vw, 4.5rem); }
.site main .s-sec.deck .s-prose { max-width: 58ch; }
.site main .s-sec.deck .s-prose p {
  font-size: clamp(1.12rem, 1.45vw, 1.3rem); line-height: 1.6; color: var(--p-ink);
}
.site main .s-sec.cta { padding-top: clamp(2.5rem, 4.5vw, 4.5rem); padding-bottom: clamp(3rem, 5.5vw, 5.5rem); }

/* body measure: 66ch at the paragraph size (the 68ch in brandkit was computed at
   the wrapper's 16px, which came out at 63ch of the 18px text) */
.site main .s-prose { font-size: clamp(1.06rem, 1.25vw, 1.14rem); max-width: 66ch; }

.site .s-sec .sec-h {
  font-family: var(--p-display); font-weight: var(--p-dw);
  font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.12;
  letter-spacing: -.01em; margin: 0 0 1.1rem; max-width: 22ch; text-wrap: balance;
}
.site .s-sec > .sec-h + .s-prose,
.site .sec-copy > .sec-h + .s-prose,
.site .sec-copy > .s-prose:first-child { margin-top: 0; }
/* sub-heads were 17px under 18px body text; now a visible step, more room above than below */
.site .s-sec h3:not(.sec-h) {
  font-family: var(--p-body); font-size: clamp(1.12rem, 1.4vw, 1.25rem);
  font-weight: 600; line-height: 1.35; color: var(--p-ink); margin: 2rem 0 .55rem;
}
.site .s-sec h3:not(.sec-h):first-child { margin-top: 0; }

/* copy beside a picture. Floor ratio is chosen per section by the builder
   (3:2 / 4:3 / 1:1 by text length); the picture then grows to the copy and
   the cap holds it at ~4:5 of its own width. */
.site .sec-split {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(2.5rem, 5vw, 5rem); align-items: stretch;
}
.site .sec-split.flip .sec-copy { order: 2; }
.site .sec-split.flip .sec-media { order: 1; }
/* `order` swaps the visual side, not the tracks: without this the flipped
   figure took the wide 1.2fr column and the copy ran at ~40ch in the .8fr one */
.site .sec-split.flip { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.site .sec-split .sec-copy { align-self: center; min-width: 0; }
.site .sec-split .s-prose { max-width: 66ch; }
.site .sec-media > img { aspect-ratio: var(--ar, 4/3); max-height: 40vw; }

/* a short section gets its picture wide beneath the prose instead of beside it */
.site .sec-band {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  border-radius: var(--p-r); overflow: hidden; background: var(--p-surface);
}
.site .sec-band img { aspect-ratio: var(--ar, 12/5); height: auto; max-height: 34rem; }

/* lists read as a checklist, not bullets */
.site .s-prose ul.chk { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: .7rem; }
.site .s-prose ul.chk li {
  font-family: var(--p-body); font-size: clamp(1rem, 1.12vw, 1.06rem);
  line-height: 1.6; color: var(--p-muted);
  padding-left: 1.7rem; position: relative;
}
.site .s-prose ul.chk li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: .62rem; height: .62rem; border-radius: 2px;
  border: 1.5px solid var(--p-accent); background: transparent;
}

/* ===========================================================================
   CLOSING CALL TO ACTION
   The brand kit's feature surface (accent -> ink, the Rockies mark behind), the
   same tile the homepage uses for Dental Implants and the dentists. Copy left,
   the two actions right; on a phone it stacks with full-width buttons.
   ======================================================================== */
.site .cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--p-r);
  background: linear-gradient(145deg, var(--p-accent) 0%, var(--p-ink) 100%);
  color: var(--p-ground);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end;
}
.site .cta-band .wm {
  position: absolute; right: -6%; top: 50%; width: 44%;
  transform: translateY(-50%); opacity: .13; pointer-events: none; z-index: -1; display: block;
}
.site .cta-band .wm svg { width: 100%; height: auto; display: block; fill: var(--p-ground); }
.site .cta-band h2 {
  font-family: var(--p-display); font-weight: var(--p-dw);
  font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.08; letter-spacing: -.012em;
  margin: 0; max-width: 16ch; color: var(--p-ground); text-wrap: balance;
}
.site .cta-band p {
  font-family: var(--p-body); font-size: clamp(1.02rem, 1.15vw, 1.1rem);
  line-height: 1.6; margin: 1rem 0 0; max-width: 46ch; color: var(--p-ground); opacity: .82;
}
.site .cta-band p a { color: inherit; }
.site .cta-band .h-row { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: flex-end; margin: 0; }
.site .cta-band .s-cta { background: var(--p-ground); color: var(--p-ink); border-color: var(--p-ground); }
.site .cta-band .s-ghost { color: var(--p-ground); border-color: rgba(255,255,255,.45); }
.site .cta-band .s-ghost:hover { border-color: var(--p-ground); }

/* the legal strip, on all 48 pages: disclaimer left at a readable measure, copyright right */
.site .s-legal {
  border-top: 1px solid var(--p-line);
  padding-top: 1.5rem; padding-bottom: 2rem;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 3rem; align-items: end;
}
.site .s-legal p {
  font-family: var(--p-body); font-size: clamp(.76rem, .88vw, .82rem);
  line-height: 1.6; color: var(--p-muted); margin: 0; max-width: 64ch;
}

/* ===========================================================================
   TEAM ROSTER
   A ledger of names: one rule above each person, none of the painted grid
   that showed grey boxes wherever a row was not full (four hygienists in
   three columns at 1024).
   ======================================================================== */
.site .ros-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 clamp(1.5rem, 3vw, 3rem); margin-top: 1.75rem;
  border-bottom: 1px solid var(--p-line);
}
.site .ros { margin: 0; padding: 1.4rem 0 1.6rem; border-top: 1px solid var(--p-line); background: none; }
.site .ros h3 {
  font-family: var(--p-display); font-weight: var(--p-dw);
  font-size: clamp(1.2rem, 1.4vw, 1.35rem); line-height: 1.2; margin: 0;
}
.site .ros .role {
  font-family: var(--p-body); font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--p-accent);
  margin: .5rem 0 0;
}
.site .ros p:not(.role) {
  font-family: var(--p-body); font-size: clamp(.94rem, 1.05vw, 1rem);
  line-height: 1.6; color: var(--p-muted); margin: .8rem 0 0;
}
.site .s-prose.ros-tail { margin-top: 2rem; }

/* roster with portraits (named by the practice 21 Sep 2026). The ledger rule
   stays; the portrait sits under it on the soft corner every other frame uses.
   A card with no portrait gets the mark on a tile the same size, so every name
   in a row starts on one line. Two across on a phone: one column made eleven
   people 5,000px of scrolling. */
.site .ros-grid.pics { grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); }
.site .ros.has-pic { padding-top: 1.1rem; }
.site .ros-pic {
  margin: 0 0 1rem; border-radius: var(--p-r); overflow: hidden;
  background: var(--p-surface); aspect-ratio: 4/5;
}
.site .ros-pic img {
  display: block; width: 100%; height: 100%; aspect-ratio: var(--ar, 4/5);
  object-fit: cover; object-position: var(--pos, 50% 50%);
}
.site .ros-pic.none {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--p-accent) 0%, var(--p-ink) 100%);
}
.site .ros-ini {
  font-family: var(--p-display); font-weight: var(--p-dw); line-height: 1;
  font-size: clamp(3.5rem, 7vw, 5rem); color: #fff; opacity: .9;
}
@media (max-width: 560px) {
  .site .ros-grid.pics { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .9rem; }
  .site .ros-grid.pics .ros h3 { font-size: 1.08rem; }
  .site .ros-grid.pics .ros .role { font-size: .68rem; letter-spacing: .07em; }
  .site .ros-grid.pics .ros p:not(.role) { font-size: .88rem; }
}

/* clinic gallery: masonry columns, because a grid with mixed ratios leaves a
   hole under every short frame. Two columns all the way down to 390: one
   column was 2,400px of scrolling. */
.site .gal { columns: 3; column-gap: clamp(.7rem, 1.2vw, 1.1rem); margin-top: 1.75rem; }
.site .gal-c {
  break-inside: avoid; margin: 0 0 clamp(.7rem, 1.2vw, 1.1rem);
  border-radius: var(--p-r); overflow: hidden; background: var(--p-surface);
}
.site .gal-c img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 4/3); object-fit: cover; }
.site .gal-c:nth-child(3n+1) img { aspect-ratio: 4/5; }
.site .gal-c:nth-child(5n)   img { aspect-ratio: 3/2; }

/* a bare URL or a long token must not push a phone viewport sideways */
.site .s-prose p, .site .s-prose li, .site .ros p, .site .ih-intro p { overflow-wrap: anywhere; }
.site .s-prose a { color: var(--p-accent); text-decoration: underline; text-underline-offset: .18em; }
.site .s-prose a:hover { text-decoration-thickness: 2px; }

/* ===========================================================================
   NARROW: everything stacks, pictures return to natural height
   ======================================================================== */
@media (max-width: 900px) {
  .site .ih.sp, .site .ih.sp.pt {
    grid-template-columns: 1fr; gap: 1.75rem; align-items: start;
    padding-top: clamp(2rem, 5vw, 3rem); padding-bottom: 1.75rem;
  }
  .site .ih.sp .ih-fig, .site .sec-media { display: block; }
  .site .ih.sp .ih-fig > img { height: auto; aspect-ratio: 4/3; max-height: none; }
  .site .ih.sp.pt .ih-fig { order: -1; }                 /* the face leads on a phone */
  /* buttons stay in the first screen: after the lede, before the pulled-up paragraph */
  .site .ih.sp .ih-copy .ih-intro { order: 5; margin-top: 1.5rem; }
  .site .ih.sp .ih-copy .h-row { margin-top: 1.5rem; }
  .site .ih-fig .s-slot.cut { height: auto; aspect-ratio: 1/1; max-height: none; max-width: 24rem; }
  .site .ih.po .ih-over { min-height: 22rem; }
  .site .ih.po h1 { max-width: none; }
  .site .ih-band img { aspect-ratio: 16/9; }
  .site .sec-split, .site .sec-split.flip { grid-template-columns: 1fr; gap: 1.6rem; }
  .site .sec-split.flip .sec-copy,
  .site .sec-split.flip .sec-media { order: 0; }
  .site .sec-media > img { height: auto; aspect-ratio: 3/2; max-height: none; }
  .site .sec-band img { aspect-ratio: 16/9; }
  .site .gal { columns: 2; }
  .site .cta-band { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
  .site .cta-band .h-row { justify-content: flex-start; }
  .site .cta-band .wm { width: 70%; right: -20%; top: auto; bottom: -18%; transform: none; }
  .site .s-legal { grid-template-columns: 1fr; gap: .5rem; }
}
@media (max-width: 560px) {
  .site .ih .h-row .s-cta, .site .ih .h-row .s-ghost,
  .site .cta-band .h-row .s-cta, .site .cta-band .h-row .s-ghost { flex: 1 1 auto; justify-content: center; }
  .site .ih-fig .s-slot.cut { max-width: none; }
}

/* ===========================================================================
   SHARED FURNITURE + HOMEPAGE OVERRIDES
   interior.css loads on every page after brandkit.css (read-only), so the
   corrections the shared footer and the homepage sections need live here.
   Everything below is scoped to classes brandkit.css owns.
   ======================================================================== */

/* the studio chrome's body{padding-bottom:4.75rem} put a 76px white band under
   every page (48 + the 404). The ground is a literal because the tokens are
   defined on .site, not :root; brandkit's own body.bk{background:var(--p-ink)}
   is invalid at body scope for the same reason, so body.bk is restated here. */
body, body.bk { padding-bottom: 0; background: #EFEDE8; }

/* footer contact strip, all pages: .s-foot .blk{font-size:.68rem} (10.88px)
   outranked the real-viewport scale; and 44px targets on a phone */
.site .s-foot .blk { font-size: clamp(.84rem, .92vw, .88rem); }
.site .s-foot a { display: inline-block; padding: .45rem 0; margin: -.45rem 0; }
@media (max-width: 760px) {
  .site .s-foot a { padding: .7rem 0; margin: -.7rem 0; }
  .site .ft-col ul { gap: 0; }
  .site .ft-col a { display: flex; align-items: center; min-height: 44px; }
  .site .ft-col h3 { margin-bottom: .35rem; }
}

/* homepage: the hero overlay sits on the page gutter like every heading under
   it (it was inset 48px against the sections' 115px at 1440) */
.site .h-po .over { padding-left: var(--p-pad); padding-right: var(--p-pad); }
/* section heads get breathing room above their content (16px -> 24px) and a
   44px "All ... ->" target */
.site .s-sec > .hd { margin-bottom: 1.5rem; }
.site .s-sec > .hd .more { display: inline-block; padding: .6rem 0; margin: -.6rem 0 -.6rem auto; }
/* intro: the heading now sits above both columns (build-home.py), so the
   picture only has the paragraphs to match; a wider copy column for the measure */
@media (min-width: 1101px) { .site .intro-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } }
@media (max-width: 1100px) { .site .intro-grid .s-prose { max-width: 66ch; } }
.site .intro-grid .s-prose { margin-top: 0; }
/* the Dental Implants feature tile: real-size type (was 14px / 10.24px) and a link */
.site .sv-big .txt { padding: clamp(1.1rem, 2vw, 1.6rem); }
.site .sv-big .txt b { font-size: clamp(1.2rem, 1.5vw, 1.4rem); }
.site .sv-big .txt span { font-size: clamp(.94rem, 1.05vw, .98rem); opacity: .85; }
.site a.sv-big { text-decoration: none; color: #fff; }
/* six dentists across is 137px a tile at 1024 and wraps the names under 1000 */
@media (max-width: 1000px) and (min-width: 761px) {
  .site .tm-row { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (max-width: 760px) {
  .site .h-po .over { padding-left: 1.25rem; padding-right: 1.25rem; }
  /* the studio's mobile rule for this grid is scoped to its preview-only
     .viewport.mob class; on the real site the tile was 61px wide at 390 */
  .site .sv-feat { grid-template-columns: 1fr; }
  .site .sv-big { min-height: 11rem; }
  .site .sv-card { padding: 1.1rem 1.2rem; }
}


/* ===========================================================================
   AUDIT FIXES, 17 Sep 2026 (head auditor P1/P2, coordinator PSI items)
   ======================================================================== */

/* P1-3 phones: the copy sits at the bottom of a poster hero, so the scrim is
   vertical there, darkest where the words are (the 105deg desktop scrim left
   the lede's right third over an unscrimmed photograph at 1.9-2.2:1). */
@media (max-width: 900px) {
  .site .ih.po::after {
    background: linear-gradient(180deg, rgba(10,12,14,.30) 0%, rgba(10,12,14,.62) 48%, rgba(10,12,14,.86) 100%);
  }
}

/* P1-1 bare treatment names are links again, as they were on the old site */
.site .s-sec h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--p-line); }
.site .s-sec h3 a:hover, .site .s-sec h3 a:focus-visible { color: var(--p-accent); border-color: currentColor; }

/* P1-2 the FAQ hours list reuses the contact page's definition list */
.site .s-prose .loc-hours { margin: .8rem 0 1.2rem; }

/* P1-5 the six faces on the homepage are links */
.site a.tm { color: inherit; text-decoration: none; }
.site a.tm:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 3px; border-radius: var(--p-r); }

/* P2-6 the studio's mono token is a system face on a visitor's machine */
.site .eyebrow, .site .rv .src { font-family: var(--p-body); }

/* P2-10 long splits: the picture travels with the reader; headed text-only
   sections put the heading in a narrow left track so the 66ch column sits
   off-centre by design rather than by leftover */
@media (min-width: 901px) {
  .site .sec-split .sec-media { align-self: start; position: sticky; top: 6rem; }
  .site .s-sec.txt { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .site .s-sec.txt > .sec-h { margin-bottom: 0; }
  .site .s-sec.txt > .s-prose { margin-top: .35rem; }
}

/* P2-12 drawn icons: the review stars and the marquee separator */
.site .stars svg { width: .95em; height: .95em; fill: currentColor; vertical-align: -.1em; margin-right: .08em; }
.site .mq-star { width: 1em; height: 1em; fill: currentColor; vertical-align: -.14em; }
.site .mq-dot::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; vertical-align: middle; }

/* P3 studio preview transitions a layout property at every breakpoint */
.site .site-pad { transition: none; }

/* P3 homepage hero buttons share the row on a phone */
@media (max-width: 560px) {
  .site .h-po .over .h-row > a { flex: 1 1 auto; justify-content: center; }
}

/* PSI target-size: the footer phone and email links sit too close for a pointer
   at every width (Lighthouse runs the audit on desktop too) */
.site .s-foot .blk span a { display: inline-block; min-height: 44px; padding: .55rem 0; box-sizing: border-box; }

/* design review 28 Sep: hero copy over the bright part of a photo measured as
   low as 1.7:1 (the eyebrow, on a phone). A deeper scrim from the bottom plus a
   left-side wash under the copy column, and the eyebrow at full white. */
.site .h-po .over {
  background:
    linear-gradient(to top, rgba(0,0,0,.74) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 70%);
}
.site .h-po .over .eyebrow { opacity: 1; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.site .h-po .over h1 { text-shadow: 0 1px 12px rgba(0,0,0,.25); }

/* /services/ directory: the menu's three groups as card grids */
.site .sv-group {
  font-family: var(--p-body); font-size: .82rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--p-muted); margin: 2.2rem 0 .9rem;
}
.site .sv-group:first-of-type { margin-top: 1.2rem; }
@media (max-width: 780px) { .site .sv-grid { grid-template-columns: 1fr; } }

/* home: the Implants feature tile carries a photograph under a bottom scrim */
.site .sv-big .sv-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site .sv-big::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--p-ink) 88%, transparent) 0%, color-mix(in srgb, var(--p-ink) 30%, transparent) 55%, transparent 100%);
}

/* ==== css/nav.css ==== */
/* OWNER: navigation agent. Mega-menu, dropdowns, hamburger panel.
   Loads after brandkit.css and interior.css; every selector here is at least
   (0,3,0) so it wins the brandkit mobile strip rules at the same weight.
   Motion is transform/opacity only, plus grid-template-rows for the accordion.
   Entrances use the site's exponential ease-out, exits are shorter and linear-ish. */

/* skip link: off-screen until focused, then the first thing a keyboard user sees */
.site .skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 1000;
  padding: .7rem 1.1rem; border-radius: var(--p-r);
  background: var(--p-ink); color: #fff; font-family: var(--p-body); font-weight: 600;
  text-decoration: none; transition: top .15s ease;
}
.site .skip:focus { top: 1rem; outline: 2px solid var(--p-accent); outline-offset: 2px; }

.site .s-nav {
  --nv-ease: cubic-bezier(.16, 1, .3, 1);
  --nv-in: .24s;                 /* entrance */
  --nv-out: .16s;                /* exit, faster than entrance */
  --nv-muted: #5C5B58;           /* --p-muted is 4.48:1 on the ground colour; this is 5.8:1 */
  --nv-muted: color-mix(in srgb, var(--p-muted) 78%, var(--p-ink));
  --nv-shadow: 0 18px 44px -18px rgba(22, 24, 26, .30), 0 4px 12px -6px rgba(22, 24, 26, .12);
  gap: clamp(.9rem, 1.6vw, 1.5rem);
}

/* ---- resets for the controls the nav owns ------------------------------- */
.site .s-nav .nv-tg,
.site .s-nav .nv-ham,
.site .s-nav .nv-close {
  font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0;
  cursor: pointer; -webkit-appearance: none; appearance: none; text-align: left;
}
.site .s-nav a.s-logo,
.site .s-nav a.nv-brand { color: inherit; text-decoration: none; }
.site .s-nav .nv-list,
.site .s-nav .nv-col ul { list-style: none; margin: 0; padding: 0; }
.site .s-nav .nv-chev,
.site .s-nav .nv-arrow { display: block; flex: none; }
.site .s-nav .s-links a:hover { text-decoration: none; }               /* brandkit underlines every .s-links a */
.site .s-nav .s-links a.on { border-bottom: 0; }                        /* interior.css draws its own underline */

/* focus: visible on every control, keyboard only */
.site .s-nav a:focus-visible,
.site .s-nav button:focus-visible {
  outline: 2px solid var(--p-accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.site .s-nav .s-cta:focus-visible {                 /* a filled button gets the ring, not an offset outline */
  outline: none; border-radius: var(--p-r, 9px);
  box-shadow: 0 0 0 2px var(--p-ground), 0 0 0 4px var(--p-accent);
}

/* the label underline shared by the top-level controls and the phone link */
.site .s-nav .nv-lbl { position: relative; display: inline-block; }
.site .s-nav .nv-lbl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.22em; height: 1.5px;
  background: var(--p-accent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--nv-out) var(--nv-ease);
}
.site .s-nav .on > .nv-lbl::after { transform: scaleX(1); }

/* the hamburger only exists below the desktop breakpoint */
.site .s-nav .nv-ham { display: none; }

/* ==========================================================================
   DESKTOP  (>= 900px): link row, floating panels
   ========================================================================== */
@media (min-width: 900px) {
  .site .s-nav .s-links {
    display: flex; align-items: center; gap: 0; margin-left: auto; position: static;
  }
  .site .s-nav .nv-head,
  .site .s-nav .nv-foot { display: none; }

  .site .s-nav .nv-list { display: flex; align-items: center; gap: clamp(1rem, 1.7vw, 1.7rem); }
  .site .s-nav .nv-item { position: static; }

  .site .s-nav .nv-tg,
  .site .s-nav .nv-top {
    position: relative; display: inline-flex; align-items: center; gap: .32rem;
    padding: .3rem 0; font-weight: 500; line-height: 1.2; white-space: nowrap;
    color: var(--p-ink); text-decoration: none;
  }
  .site .s-nav .nv-tg:hover > .nv-lbl::after,
  .site .s-nav .nv-top:hover > .nv-lbl::after,
  .site .s-nav .nv-item.is-open > .nv-tg > .nv-lbl::after {
    transform: scaleX(1); transition-duration: var(--nv-in);
  }
  .site .s-nav .nv-chev {
    width: 11px; height: 11px; opacity: .55; margin-top: 1px;
    transition: transform var(--nv-in) var(--nv-ease), opacity var(--nv-in) var(--nv-ease);
  }
  .site .s-nav .nv-tg:hover .nv-chev,
  .site .s-nav .nv-item.is-open > .nv-tg .nv-chev { opacity: .9; }
  .site .s-nav .nv-item.is-open > .nv-tg .nv-chev { transform: rotate(180deg); }

  /* the panel: surface material, hairline, brand radius, a real offset shadow */
  .site .s-nav .nv-panel {
    position: absolute; top: calc(100% + 8px); left: auto; right: var(--p-pad, 8%);
    z-index: 5; min-width: 15rem; max-width: calc(100% - 2 * var(--p-pad, 8%));
    background: var(--p-surface); color: var(--p-ink);
    border: 1px solid var(--p-line); border-radius: var(--p-r, 9px);
    box-shadow: var(--nv-shadow);
    padding: 1.4rem 1.6rem 1.3rem;
    visibility: hidden; opacity: 0; transform: translateY(6px);
    transition: opacity var(--nv-out) ease-in, transform var(--nv-out) ease-in,
                visibility 0s linear var(--nv-out);
  }
  /* transparent bridge over the gap and the bar's bottom padding, so a
     diagonal pointer path from the toggle to the panel never leaves the item */
  .site .s-nav .nv-panel::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(8px + .9rem);
  }
  .site .s-nav .nv-item.is-open > .nv-panel {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity var(--nv-in) var(--nv-ease), transform var(--nv-in) var(--nv-ease),
                visibility 0s;
  }
  /* no JS: hover and keyboard focus still open the panels */
  html:not(.nav-js) .site .s-nav .nv-item:hover > .nv-panel,
  html:not(.nav-js) .site .s-nav .nv-item:focus-within > .nv-panel {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity var(--nv-in) var(--nv-ease), transform var(--nv-in) var(--nv-ease),
                visibility 0s;
  }

  .site .s-nav .nv-cols {
    display: grid; grid-auto-flow: column; grid-auto-columns: max-content;
    gap: 1.2rem 2.6rem; align-items: start;
  }
  .site .s-nav .nv-h {
    margin: 0 0 .7rem; padding-bottom: .55rem; border-bottom: 1px solid var(--p-line);
    font-family: var(--p-body); font-size: .7rem; font-weight: 600; line-height: 1.2;
    letter-spacing: .14em; text-transform: uppercase; color: var(--nv-muted);
  }
  .site .s-nav .nv-col a {
    position: relative; display: block; padding: .36rem .55rem; margin: 0 -.55rem;
    border-radius: 6px; font-family: var(--p-body); font-size: .92rem; font-weight: 400;
    line-height: 1.35; color: var(--p-ink); text-decoration: none; white-space: nowrap;
  }
  .site .s-nav .nv-col a::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 6px;
    background: var(--p-ground); opacity: 0;
    transition: opacity var(--nv-out) var(--nv-ease);
  }
  .site .s-nav .nv-col a:hover::before,
  .site .s-nav .nv-col a:focus-visible::before { opacity: 1; transition-duration: var(--nv-in); }
  .site .s-nav .nv-col a:focus-visible { outline-offset: 0; }
  .site .s-nav .nv-col a.on { font-weight: 600; }
  .site .s-nav .nv-col a.on::after {
    content: ""; display: block;         /* motion.css hides .s-links a.on::after; this tick is ours */
    position: absolute; left: 0; top: 50%; width: 3px; height: 1.05em;
    border-radius: 2px; background: var(--p-accent); transform: translateY(-50%);
  }
  .site .s-nav .nv-aside {
    margin: 1rem 0 0; padding: .8rem .9rem; max-width: 15rem; border-radius: 7px;
    background: var(--p-ground); font-family: var(--p-body); font-size: .82rem;
    line-height: 1.45; color: var(--nv-muted);
  }
  .site .s-nav .nv-aside b {
    display: block; margin-bottom: .15rem; font-size: .86rem; font-weight: 600; color: var(--p-ink);
  }
  .site .s-nav .nv-aside a { color: var(--p-accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
  .site .s-nav .nv-aside a:hover { text-decoration: underline; text-underline-offset: .18em; }

  .site .s-nav .nv-all {
    display: flex; align-items: center; gap: .45rem; width: 100%;
    margin-top: 1.1rem; padding-top: .95rem; border-top: 1px solid var(--p-line);
    font-family: var(--p-body); font-size: .86rem; font-weight: 600; line-height: 1.2;
    color: var(--p-accent); text-decoration: none;
  }
  .site .s-nav .nv-arrow { width: 14px; height: 12px; transition: transform var(--nv-in) var(--nv-ease); }
  .site .s-nav .nv-all:hover .nv-arrow { transform: translateX(3px); }
  .site .s-nav .nv-all:hover span { text-decoration: underline; text-underline-offset: .2em; }

  /* phone and Book, after the link row */
  .site .s-nav .nv-tel {
    position: relative; display: inline-flex; align-items: center;
    margin-left: .1rem; padding: .3rem 0 .3rem 1.1rem;
    font-weight: 500; color: var(--p-ink); text-decoration: none; white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .site .s-nav .nv-tel::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 1.1rem;
    background: var(--p-line); transform: translateY(-50%);
  }
  .site .s-nav .nv-tel:hover > .nv-lbl::after { transform: scaleX(1); transition-duration: var(--nv-in); }
}

/* a narrow desktop: the row still has to fit beside the logo and the button */
@media (min-width: 900px) and (max-width: 1099px) {
  .site .s-nav .nv-tel { display: none; }
  .site .s-nav .s-links { font-size: .88rem; }
  .site .s-nav .nv-list { gap: 1.05rem; }
  .site .s-nav .nv-panel { padding: 1.2rem 1.3rem 1.1rem; }
  .site .s-nav .nv-cols { gap: 1rem 1.8rem; }
}

/* ==========================================================================
   MOBILE  (< 900px): hamburger, full-screen sheet, accordions
   ========================================================================== */
@media (max-width: 899px) {
  .site .s-nav {
    flex-wrap: nowrap; row-gap: 0; gap: .75rem;
    padding-top: .8rem; padding-bottom: .8rem;
  }
  .site .s-nav .s-logo { flex: 1 1 auto; order: 0; min-width: 0; }
  .site .s-nav .nv-tel { display: none; }
  .site .s-nav > .s-cta { order: 0; flex: none; font-size: .84rem; padding: .5rem .95rem; }

  .site .s-nav .nv-ham,
  .site .s-nav .nv-close {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; margin: -6px -10px -6px 0; border-radius: 8px;
    color: var(--p-ink);
  }
  .site .s-nav .nv-ham svg,
  .site .s-nav .nv-close svg { width: 22px; height: 22px; display: block; }
  html:not(.nav-js) .site .s-nav .nv-ham { display: none; }

  /* the sheet: the same <nav>, fixed over the whole viewport. The bar's
     backdrop-filter would make the bar the containing block for a fixed child,
     so nav.js lifts the filter (.nv-sheet on the bar) while the sheet is up;
     the sheet covers the bar, so the blur is not missed. */
  .site .s-nav.nv-sheet { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site .s-nav .s-links {
    position: fixed; inset: 0; z-index: 30;
    order: 0; flex: none; margin: 0;
    display: flex; flex-direction: column; gap: 0;
    padding: 0; padding-left: inherit; padding-right: inherit;
    overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; scrollbar-width: none;
    background: var(--p-ground); color: var(--p-ink); font-size: 1rem;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity var(--nv-out) ease-in, transform var(--nv-out) ease-in,
                visibility 0s linear var(--nv-out);
  }
  .site .s-nav .s-links::-webkit-scrollbar { display: none; }
  .site .s-nav .s-links.is-open {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity var(--nv-in) var(--nv-ease), transform var(--nv-in) var(--nv-ease),
                visibility 0s;
  }

  /* header row mirrors the bar underneath, so the sheet reads as the bar unfolding */
  .site .s-nav .nv-head {
    display: flex; align-items: center; justify-content: space-between; flex: none;
    padding: .8rem 0; border-bottom: 1px solid var(--p-line);
  }
  .site .s-nav .nv-brand { display: flex; align-items: center; gap: .5rem; }
  .site .s-nav .nv-brand svg { width: 34px; height: auto; display: block; fill: var(--p-accent); }
  .site .s-nav .nv-brand b {
    font-family: var(--p-display); font-weight: var(--p-dw); font-size: .98rem;
    letter-spacing: -.015em; line-height: 1.25;
  }

  .site .s-nav .nv-list { padding: .35rem 0 0; flex: none; }
  .site .s-nav .nv-item { border-bottom: 1px solid var(--p-line); }
  .site .s-nav .nv-tg,
  .site .s-nav .nv-top {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .95rem 0; font-family: var(--p-display); font-weight: var(--p-dw);
    font-size: clamp(1.55rem, 6.2vw, 1.95rem); line-height: 1.1; letter-spacing: -.012em;
    color: var(--p-ink); text-decoration: none;
  }
  .site .s-nav .nv-lbl::after { display: none; }
  /* you-are-here: a short accent tick in the gutter beside the active row */
  .site .s-nav .nv-tg,
  .site .s-nav .nv-top { position: relative; }
  .site .s-nav .nv-tg.on::before,
  .site .s-nav .nv-top.on::before,
  .site .s-nav .nv-col a.on::before {
    content: ""; position: absolute; left: -.8rem; top: 50%; width: 3px; height: .85em;
    border-radius: 2px; background: var(--p-accent); transform: translateY(-50%);
  }
  .site .s-nav .nv-col a.on { position: relative; }
  .site .s-nav .nv-chev {
    width: 18px; height: 18px; opacity: .6;
    transition: transform var(--nv-in) var(--nv-ease);
  }
  .site .s-nav .nv-item.is-open > .nv-tg .nv-chev { transform: rotate(180deg); }
  .site .s-nav .nv-tg:focus-visible,
  .site .s-nav .nv-top:focus-visible { outline-offset: -2px; }

  /* accordion body: grid rows 0fr -> 1fr, never a height loop */
  .site .s-nav .nv-panel {
    display: grid; grid-template-rows: 0fr; visibility: hidden;
    transition: grid-template-rows var(--nv-out) ease-in, visibility 0s linear var(--nv-out);
  }
  .site .s-nav .nv-item.is-open > .nv-panel {
    grid-template-rows: 1fr; visibility: visible;
    transition: grid-template-rows var(--nv-in) var(--nv-ease), visibility 0s;
  }
  .site .s-nav .nv-panel-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

  .site .s-nav .nv-all {
    order: -1; display: flex; align-items: center; gap: .5rem;
    padding: .2rem 0 .85rem; font-family: var(--p-body); font-size: 1rem; font-weight: 600;
    color: var(--p-accent); text-decoration: none;
  }
  .site .s-nav .nv-arrow { width: 14px; height: 12px; }
  .site .s-nav .nv-cols { display: grid; gap: 1rem; padding-bottom: 1.1rem; }
  .site .s-nav .nv-h {
    margin: 0 0 .25rem; font-family: var(--p-body); font-size: .72rem; font-weight: 600;
    line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: var(--nv-muted);
  }
  .site .s-nav .nv-col a {
    display: block; padding: .5rem 0; font-family: var(--p-body); font-size: 1.05rem;
    line-height: 1.4; color: var(--p-ink); text-decoration: none;
  }
  .site .s-nav .nv-col a.on { font-weight: 600; }
  .site .s-nav .nv-col a:focus-visible { outline-offset: -2px; }
  .site .s-nav .nv-aside {
    margin: .2rem 0 0; padding: .85rem .95rem; border-radius: 7px; background: var(--p-surface);
    font-family: var(--p-body); font-size: .92rem; line-height: 1.45; color: var(--nv-muted);
  }
  .site .s-nav .nv-aside b { display: block; margin-bottom: .1rem; font-weight: 600; color: var(--p-ink); }
  .site .s-nav .nv-aside a { color: var(--p-accent); font-weight: 600; text-decoration: none; white-space: nowrap; }

  .site .s-nav .nv-foot {
    margin-top: auto; padding: 1.6rem 0 2.2rem; display: grid; gap: 1rem; flex: none;
  }
  .site .s-nav .nv-foot-tel {
    justify-self: start; font-family: var(--p-body); font-size: 1.2rem; font-weight: 500;
    color: var(--p-ink); text-decoration: none; font-variant-numeric: tabular-nums;
  }
  .site .s-nav .nv-foot .s-cta {
    display: block; text-align: center; font-size: 1rem; font-weight: 600; padding: .95rem 1.2rem;
    color: var(--p-ground);            /* brandkit's .s-links a { color: inherit } would paint it ink */
  }

  /* rows settle in one after another; a pure transform/opacity stagger */
  .site .s-nav .nv-item,
  .site .s-nav .nv-foot {
    opacity: 0; transform: translateY(8px);
    transition: opacity var(--nv-out) ease-in, transform var(--nv-out) ease-in;
  }
  .site .s-nav .s-links.is-open .nv-item,
  .site .s-nav .s-links.is-open .nv-foot {
    opacity: 1; transform: none;
    transition: opacity .3s var(--nv-ease), transform .3s var(--nv-ease);
  }
  .site .s-nav .s-links.is-open .nv-item:nth-child(2) { transition-delay: 35ms; }
  .site .s-nav .s-links.is-open .nv-item:nth-child(3) { transition-delay: 70ms; }
  .site .s-nav .s-links.is-open .nv-item:nth-child(4) { transition-delay: 105ms; }
  .site .s-nav .s-links.is-open .nv-item:nth-child(5) { transition-delay: 140ms; }
  .site .s-nav .s-links.is-open .nv-foot { transition-delay: 175ms; }
}

@media (max-width: 360px) {
  .site .s-nav { gap: .5rem; }
  .site .s-nav > .s-cta { padding: .5rem .75rem; }
}

/* page scroll is locked while the sheet is open. The lock sits on <html> only:
   overflow:hidden on <body> would make body a scroll container, which breaks the
   bar's position:sticky. The gutter is compensated so nothing shifts on a
   desktop-width window that happens to be in sheet mode. */
html.nav-lock { overflow: hidden; }
html.nav-lock body { padding-right: var(--nv-sbw, 0px); }

/* reduced motion: keep every state change, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .site .s-nav .nv-panel,
  .site .s-nav .s-links,
  .site .s-nav .nv-item,
  .site .s-nav .nv-foot,
  .site .s-nav .nv-chev,
  .site .s-nav .nv-arrow,
  .site .s-nav .nv-lbl::after { transition-duration: 0s !important; transition-delay: 0s !important; }
  .site .s-nav .nv-panel,
  .site .s-nav .s-links,
  .site .s-nav .nv-item,
  .site .s-nav .nv-foot { transform: none !important; }
}

/* ---- audit P2-2 / P2-7: phone targets, and a menu with scripting off ---- */
@media (max-width: 899px) {
  .site .s-nav > .s-cta { min-height: 44px; display: inline-flex; align-items: center; }
  .site .s-nav .nv-col a { min-height: 44px; display: flex; align-items: center; }
  html:not(.nav-js) .site .s-nav { flex-wrap: wrap; }
  html:not(.nav-js) .site .s-nav .s-links { position: static; visibility: visible; opacity: 1; transform: none; flex: 1 0 100%; order: 3; padding: 0; }
  html:not(.nav-js) .site .s-nav .nv-head { display: none; }
  html:not(.nav-js) .site .s-nav .nv-item, html:not(.nav-js) .site .s-nav .nv-foot { opacity: 1; transform: none; }
  html:not(.nav-js) .site .s-nav .nv-panel { visibility: visible; grid-template-rows: 1fr; }
}

/* ==== css/forms.css ==== */
/* OWNER: forms agent. Enquiry forms, states, 404.
   Cascade position: after brandkit/interior/nav, before motion. Everything is
   scoped under .site and uses the brand tokens set inline on .site (--p-ink,
   --p-ground, --p-surface, --p-muted, --p-line, --p-accent, --p-r, --p-display,
   --p-body, --p-dw). The one colour added is the error red: 5.6:1 on the
   ground and 6.6:1 on the surface, so error copy passes at body size.
   brandkit.css carries a bare `textarea {}` rule for the studio page with a
   Stance-green focus ring; the .site .frm selectors below out-rank it. */

.site { --frm-red: #B42318;
  /* control edges: --p-line is a 1.3:1 hairline, fine for rules but under the
     3:1 WCAG 1.4.11 asks of a form control's boundary; 50% ink is 3.4:1 on white */
  --frm-edge: color-mix(in srgb, var(--p-ink) 50%, #fff); }

/* ===== section shells ================================================== */
.site .frm-sec { border-top: 1px solid var(--p-line); }
.site .frm-lay {
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(2.5rem, 5vw, 5rem); align-items: start;
}
.site .frm-intro p {
  font-family: var(--p-body); font-size: clamp(1rem, 1.12vw, 1.06rem); line-height: 1.7;
  color: var(--p-muted); margin: 0 0 .9em; max-width: 38ch;
}
.site .frm-intro p:last-child { margin-bottom: 0; }
.site .frm-intro a { color: var(--p-accent); text-decoration: underline; text-underline-offset: .18em; }
.site .frm-intro .frm-call { color: var(--p-ink); font-weight: 500; margin-top: 1.5rem; }
.site .frm-intro .frm-call a {
  display: block; margin-top: .25rem; text-decoration: none; letter-spacing: -.01em;
  font-family: var(--p-display); font-weight: var(--p-dw); font-size: clamp(1.4rem, 1.9vw, 1.8rem);
  color: var(--p-ink);
}
.site .frm-intro .frm-call a:hover { text-decoration: underline; text-underline-offset: .12em; }

/* ===== Max Assist online booking (request-appointment) ================ */
.site .bk-frame {
  min-width: 0; border-radius: var(--p-r); overflow: hidden;
  background: #fff; border: 1px solid var(--p-line);
}
.site .bk-frame iframe { display: block; width: 100%; height: clamp(640px, 80vh, 900px); border: 0; }

/* ===== the form ======================================================== */
.site .frm { display: block; min-width: 0; position: relative; }
.site .frm-note { font-family: var(--p-body); font-size: .9rem; color: var(--p-muted); margin: 0 0 1.5rem; }
.site .frm .req { color: var(--frm-red); font-weight: 600; }
.site .frm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem 1.4rem; }
.site .frm-grid.one { grid-template-columns: minmax(0, 1fr); }
.site .frm-field {
  display: flex; flex-direction: column; gap: .45rem; min-width: 0;
  margin: 0; padding: 0; border: 0;
}
.site .frm-field.wide { grid-column: 1 / -1; }
.site .frm label,
.site .frm legend {
  font-family: var(--p-body); font-weight: 600; font-size: .95rem; line-height: 1.35;
  color: var(--p-ink); padding: 0;
}
.site .frm .frm-help { margin: 0; font-family: var(--p-body); font-size: .86rem; line-height: 1.5; color: var(--p-muted); }

/* a fieldset will not lay its legend out as a flex child, so radio groups use
   block flow with explicit spacing instead of the gap above */
.site .frm fieldset.frm-field { display: block; }
.site .frm fieldset .opts { margin-top: .6rem; }
.site .frm fieldset .frm-help,
.site .frm fieldset .frm-err { margin-top: .5rem; }

/* text controls: 48px tall, surface fill, hairline border, accent focus ring */
.site .frm input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
.site .frm select,
.site .frm textarea {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; min-height: 3rem; margin: 0; padding: .7rem .95rem;
  font-family: var(--p-body); font-size: 1rem; line-height: 1.4; color: var(--p-ink);
  background: var(--p-surface); border: 1px solid var(--frm-edge); border-radius: var(--p-r);
  box-shadow: none; outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site .frm input:not([type="radio"]):not([type="checkbox"]):hover,
.site .frm select:hover,
.site .frm textarea:hover { border-color: var(--p-ink); }
.site .frm input:focus-visible,
.site .frm select:focus-visible,
.site .frm textarea:focus-visible {
  outline: 2px solid var(--p-accent); outline-offset: 2px; border-color: var(--p-accent);
}
.site .frm textarea { min-height: 9.5rem; resize: vertical; }
.site .frm select {
  padding-right: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23072739' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .95rem center; background-size: 16px 16px;
}
.site .frm ::placeholder { color: var(--p-muted); opacity: 1; }

/* radios: native inputs, drawn with appearance:none so the ring, the dot and
   the chip all come from the tokens; keyboard and reader behaviour is untouched */
.site .frm .opts { display: flex; flex-wrap: wrap; gap: .6rem .7rem; }
.site .frm .opt {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 2.85rem;
  padding: .5rem 1rem .5rem .8rem; border: 1px solid var(--frm-edge); border-radius: var(--p-r);
  background: var(--p-surface); color: var(--p-ink);
  font-family: var(--p-body); font-weight: 500; font-size: .95rem; line-height: 1.3;
  cursor: pointer; user-select: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.site .frm .opt:hover { border-color: var(--p-ink); }
.site .frm .opt:has(input:checked) { border-color: var(--p-accent); box-shadow: inset 0 0 0 1px var(--p-accent); }
.site .frm .opt input[type="radio"] {
  -webkit-appearance: none; appearance: none;
  width: 1.15rem; height: 1.15rem; margin: 0; flex: none; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--p-ink) 45%, transparent); border-radius: 50%;
  background: var(--p-surface); display: grid; place-content: center;
  transition: border-color .15s ease;
}
.site .frm .opt input[type="radio"]::before {
  content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--p-accent);
  transform: scale(0); transition: transform .15s ease;
}
.site .frm .opt input[type="radio"]:checked { border-color: var(--p-accent); }
.site .frm .opt input[type="radio"]:checked::before { transform: scale(1); }
.site .frm .opt input[type="radio"]:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 3px; }
.site .frm .opt input[type="radio"][aria-invalid="true"] { border-color: var(--frm-red); }

/* error state */
.site .frm [aria-invalid="true"]:not([type="radio"]) {
  border-color: var(--frm-red); box-shadow: inset 0 0 0 1px var(--frm-red);
}
.site .frm .frm-err {
  margin: 0; font-family: var(--p-body); font-size: .88rem; line-height: 1.45;
  font-weight: 500; color: var(--frm-red);
}
.site .frm .frm-err[hidden],
.site .frm .frm-fail[hidden] { display: none; }

/* "If other" sits in the service cell; shown only when Other is chosen once JS
   is running, always shown without it */
.site .frm .frm-other { display: flex; flex-direction: column; gap: .45rem; margin-top: .9rem; }
.site .frm.js .frm-other:not(.is-on) { display: none; }

/* honeypot: off-canvas, never display:none, so a bot's DOM walk still finds it */
.site .frm .frm-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* submit row */
.site .frm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; margin-top: 1.9rem; }
.site .frm button.s-cta {
  border: 0; cursor: pointer; min-height: 3rem; padding: .85rem 1.6rem; line-height: 1.2;
  font-family: var(--p-body); font-weight: 600; font-size: .95rem;
  transition: background .2s ease, opacity .2s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
.site .frm button.s-cta:hover { background: color-mix(in srgb, var(--p-accent) 86%, var(--p-ink)); }
.site .frm button.s-cta:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 3px; }
.site .frm button.s-cta:disabled { opacity: .62; cursor: progress; transform: none; }
.site .frm-status { margin: 0; font-family: var(--p-body); font-size: .92rem; color: var(--p-muted); }
.site .frm-status:empty { display: none; }

/* delivery failed: the phone number and a mailto that carries the typed fields */
.site .frm .frm-fail {
  margin: 1.4rem 0 0; padding: 1rem 1.15rem;
  border: 1px solid var(--frm-red); border-left-width: 4px; border-radius: var(--p-r);
  background: var(--p-surface); color: var(--p-ink);
  font-family: var(--p-body); font-size: .95rem; line-height: 1.6;
}
.site .frm .frm-fail p { margin: 0; }
.site .frm .frm-fail a { color: var(--p-accent); font-weight: 600; }

.site .frm-fine { margin: 1.4rem 0 0; font-family: var(--p-body); font-size: .82rem; line-height: 1.55; color: var(--p-muted); max-width: 62ch; }
.site .frm-fine a { color: var(--p-muted); text-decoration: underline; text-underline-offset: .18em; }
.site .frm-fine a:hover { color: var(--p-ink); }

/* ===== address, hours, map (contact page) ============================== */
.site .loc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: start; }
.site .loc-addr {
  font-style: normal; font-family: var(--p-display); font-weight: var(--p-dw);
  font-size: clamp(1.3rem, 1.7vw, 1.6rem); line-height: 1.3; letter-spacing: -.01em;
  margin: 0 0 1rem; color: var(--p-ink);
}
.site .loc-line { margin: 0 0 1.4rem; font-family: var(--p-body); font-size: clamp(1rem, 1.12vw, 1.06rem); line-height: 1.8; }
.site .loc-line a { color: var(--p-ink); text-decoration: none; border-bottom: 1px solid var(--p-line); }
.site .loc-line a:hover { border-bottom-color: var(--p-accent); }
.site .loc-dir { font-family: var(--p-body); font-size: .9rem; font-weight: 600; padding: .65rem 1.15rem; }
.site .loc-dir:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 3px; }
.site .loc-h {
  font-family: var(--p-body); font-size: .8rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--p-muted); margin: 2.2rem 0 .8rem;
}
.site .loc-hours {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .5rem 1.6rem; margin: 0;
  font-family: var(--p-body); font-size: clamp(.95rem, 1.05vw, 1rem); line-height: 1.5;
}
.site .loc-hours dt { font-weight: 600; color: var(--p-ink); }
.site .loc-hours dd { margin: 0; color: var(--p-muted); font-variant-numeric: tabular-nums; }
.site .loc-map {
  border-radius: var(--p-r); overflow: hidden; aspect-ratio: 16 / 9;
  background: var(--p-ground); border: 1px solid var(--p-line);
}
.site .loc-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ===== 404 ============================================================= */
.site .nf { padding-top: clamp(4rem, 9vw, 8rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.site .nf h1 {
  font-family: var(--p-display); font-weight: var(--p-dw); font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.03; letter-spacing: -.012em; margin: 0; color: var(--p-ink); max-width: 16ch;
}
.site .nf p { font-family: var(--p-body); font-size: clamp(1.1rem, 1.4vw, 1.28rem); line-height: 1.58; color: var(--p-muted); margin: 1.35rem 0 0; max-width: 46ch; }
.site .nf .h-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.site .nf .h-row .s-cta,
.site .nf .h-row .s-ghost { font-family: var(--p-body); font-size: .9rem; font-weight: 600; padding: .7rem 1.25rem; }
.site .nf-links {
  list-style: none; margin: 2.6rem 0 0; padding: 1.6rem 0 0; border-top: 1px solid var(--p-line);
  display: flex; flex-wrap: wrap; gap: .7rem;
}
.site .nf-links a {
  display: inline-block; padding: .65rem 1.05rem; border: 1px solid var(--p-line); border-radius: var(--p-r);
  background: var(--p-surface); color: var(--p-ink); text-decoration: none;
  font-family: var(--p-body); font-weight: 500; font-size: .95rem; transition: border-color .2s ease;
}
.site .nf-links a:hover { border-color: var(--p-accent); }
.site .nf-links a:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }

/* ===== breakpoints ===================================================== */
@media (max-width: 900px) {
  .site .frm-lay, .site .loc { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .site .frm-intro p { max-width: 60ch; }
}
@media (max-width: 600px) {
  .site .frm-grid { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .site .frm-actions { flex-direction: column; align-items: stretch; }
  .site .frm button.s-cta { width: 100%; text-align: center; }
  .site .nf h1 { max-width: none; }
}

/* audit P2-11 / P3: intro copy at the page's prose size; a 1px alert border */
.site .frm-intro p { font-size: clamp(1.06rem, 1.25vw, 1.14rem); }
.site .frm .frm-fail { border-left-width: 1px; }

/* the booking tool sits right under the heading: no full section gap first */
.site #book-online, .site .frm-lead { padding-top: clamp(1.25rem, 3vw, 2.5rem); }
.site .bk-intro p { margin: 0 0 1rem; }
/* the new-tab button is the fallback when the frame does not load: a real button */
.site .frm-intro .bk-open { margin: 1.25rem 0 1rem; }
.site .frm-intro .bk-open a.s-cta {
  display: inline-block; color: var(--p-ground); text-decoration: none;
  font-size: .95rem; font-weight: 600; padding: .8rem 1.25rem;
}
.site .frm-intro .bk-alt { font-size: .95rem; }
/* the booking page: a shorter type-only hero, so the widget is in the first screen */
.site main:has(#book-online) .ih.ed,
.site main:has(.frm-lead) .ih.ed {
  padding-top: clamp(2rem, 4vw, 3.25rem); padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

/* ==== css/motion.css ==== */
/* OWNER: motion agent. Hover, press, focal entrance, parallax.

   Contract: nothing in this file transitions `transform`. GSAP (js/site.js) owns
   it. Hover movement uses the individual `translate` and `scale` properties,
   which compose with GSAP's inline transform instead of being overwritten by
   it. Initial states for the entrance live in JS, never here: with JS off,
   every rule below renders the page complete. Loads last, so where it
   restates a transition list from brandkit.css that is deliberate: those lists
   carried `transform`, which would fight the tweens. */

:root { --m-ease: cubic-bezier(.16, 1, .3, 1); }

/* ---------------------------------------------------------------------------
   ENTRANCE CARRIERS
   --m-scrim is animated by JS from .35 to 1. Unset, it is 1, so the scrim is
   simply there. The homepage scrim moves from the .over background onto a
   pseudo-element so it can fade independently of the copy printed over it;
   the gradient is brandkit's own (.h-po .over), restated, not changed.
--------------------------------------------------------------------------- */
.site .h-po .over { background: none; }
.site .h-po .over::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.62), transparent);
  opacity: var(--m-scrim, 1);
}
.site .ih.po::after { opacity: var(--m-scrim, 1); }
/* the settle and the parallax must not spill out under the crumbs */
.site .ih.po .ih-img { overflow: hidden; }
/* will-change only while something is actually moving (toggled by the parallax trigger) */
.site .is-moving { will-change: transform; }

/* ---------------------------------------------------------------------------
   NAV: the .is-stuck change (toggled in site.js) settles over 300ms
--------------------------------------------------------------------------- */
.site .s-nav {
  transition: box-shadow .3s var(--m-ease), border-color .3s var(--m-ease),
              background-color .3s var(--m-ease);
}

/* ---------------------------------------------------------------------------
   BUTTONS
   Press is `scale`, not `transform`, so it still shows on a button GSAP is
   holding by its x/y for the magnetic pull.
--------------------------------------------------------------------------- */
.site .s-cta, .site .s-ghost {
  transition: background-color .2s var(--m-ease), color .2s var(--m-ease),
              border-color .2s var(--m-ease), box-shadow .25s var(--m-ease),
              scale .15s var(--m-ease);
}
.site .s-cta:hover {
  background: color-mix(in srgb, var(--p-accent) 86%, white);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--p-ink) 60%, transparent);
}
.site .s-sec.feat .cta-band .s-cta:hover { background: #fff; }
.site .s-ghost:hover {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
/* GSAP writes translate/rotate/scale:none inline on any element it has moved
   (the entrance and the magnetic pull), and inline beats a plain :active rule,
   so the press was silently lost on every Book button. !important is the one
   way a stylesheet state can outrank that inline reset. */
.site .s-cta:active, .site .s-ghost:active { transform: none; scale: .97 !important; }
.site .s-cta:focus-visible, .site .s-ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--p-ground), 0 0 0 4px var(--p-accent);
}
/* form buttons belong to forms.css for colour; press and focus are motion.
   :where() keeps these at zero specificity so any forms rule wins. */
:where(.site button, .site [type="submit"], .site [type="button"]) { transition: scale .15s var(--m-ease); }
:where(.site button, .site [type="submit"], .site [type="button"]):active { scale: .98; }
:where(.site button, .site [type="submit"], .site [type="button"]):focus-visible {
  outline: 2px solid var(--p-accent); outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   LINKS
--------------------------------------------------------------------------- */
/* every link outside the nav (nav.css owns focus inside .s-nav) */
.site a:not(.s-nav *):focus-visible { outline: 2px solid var(--p-accent); outline-offset: 3px; border-radius: 2px; }
/* on the dark grounds the accent outline would vanish */
.site .s-sitemap a:focus-visible, .site .s-foot a:focus-visible { outline-color: var(--p-ground); }
.site .ih.po a:focus-visible, .site .h-po a:focus-visible { outline-color: #fff; }

.site .crumbs a { transition: color .2s var(--m-ease), border-color .2s var(--m-ease); }
.site .s-prose a { transition: color .2s var(--m-ease), text-decoration-color .2s var(--m-ease); }
.site .s-foot a { transition: opacity .2s var(--m-ease); }

/* the "All … →" links: an underline that draws in from the left and leaves to
   the right. Nothing here touches the nav: nav.css owns every link inside .s-nav,
   including its own top-level draw-in (.nv-lbl::after). */
.site .hd .more { position: relative; transition: color .2s var(--m-ease); }
.site .hd .more:hover, .site a.more:hover { text-decoration: none; }
.site .hd .more::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.14em; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .25s var(--m-ease);
}
.site .hd .more:hover::after, .site .hd .more:focus-visible::after {
  transform: scaleX(1); transform-origin: 0 50%;
}

/* ---------------------------------------------------------------------------
   FIGURES: the picture moves inside its frame, the frame stays put
--------------------------------------------------------------------------- */
/* (P2-4) figures are not links: no hover scale. The rule that was here lives on
   only for the gallery if it ever becomes a lightbox. */

/* ---------------------------------------------------------------------------
   CARDS: a 2px lift on a real shadow, offset and blur, tinted from the ink
--------------------------------------------------------------------------- */
.site a.sv-card, .site .rv, .site .ros {
  transition: translate .3s var(--m-ease), box-shadow .3s var(--m-ease),
              border-color .2s var(--m-ease), background-color .3s ease;
}
.site a.sv-card:hover, .site .rv:hover, .site .ros:hover {
  transform: none; translate: 0 -2px; position: relative; z-index: 1;
  box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--p-ink) 48%, transparent),
              0 2px 6px -3px  color-mix(in srgb, var(--p-ink) 20%, transparent);
}
/* the homepage dentist tiles keep brandkit's 3px lift, moved off `transform` */
.site .tm .s-slot { transition: translate .35s var(--m-ease), border-radius .25s ease, background .3s ease; }
.site .tm:hover .s-slot { transform: none; translate: 0 -3px; }

/* ---------------------------------------------------------------------------
   LOOPS: the marquee and the review rail (CSS in brandkit.css) hold still
   while they are out of the viewport. Class toggled from a ScrollTrigger.
--------------------------------------------------------------------------- */
.site .s-marquee.is-offscreen .mq-track,
.site .rv-rail.is-offscreen .rv-track { animation-play-state: paused; }

/* ---------------------------------------------------------------------------
   REDUCED MOTION: state stays (colour, underline, shadow, focus ring),
   movement goes. brandkit.css already zeroes every transition duration.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .site a.sv-card:hover, .site .rv:hover, .site .ros:hover, .site .tm:hover .s-slot { translate: none; }
  .site .s-cta:active, .site .s-ghost:active { scale: none !important; }
  :where(.site button, .site [type="submit"], .site [type="button"]):active { scale: none; }
  .site a.sv-big:hover { translate: none; }
  .site .hd .more::after { transition: none; }
  .site .is-moving { will-change: auto; }
}

/* P2-3 the feature tile lifts like its sibling cards */
.site a.sv-big { transition: translate .3s var(--m-ease), box-shadow .3s var(--m-ease), border-radius .25s ease, background .3s ease; }
.site a.sv-big:hover { translate: 0 -2px; box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--p-ink) 48%, transparent), 0 2px 6px -3px color-mix(in srgb, var(--p-ink) 20%, transparent); }