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

   Palette is the client's own logo: navy #0C489C, teal #3CB4B4, on a warm cream ground.
   Type is Chillax (rounded geometric, warm without being childish) + Synonym.
*/

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

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

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

/* ---------- header ----------
   One white row. Logo and actions are the fixed bookends; the nav floats between them with real
   space on both sides. The phone carries the live open/closed state instead of a "CALL THE
   OFFICE" label — a patient wants to know whether they can ring right now, not what the number is
   labelled. There is no utility bar: the address, hours and email it held are all on the page. */
.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);
  transition:background .25s,border-color .25s}
/* Over the slider the header is transparent with a reversed logo; it turns solid on scroll.
   .over is set by script only when a slider is present, so inner pages keep the solid header. */
.hdr.over{background:transparent;border-color:transparent}
.hdr.over .brand img{filter:brightness(0) invert(1)}
.hdr.over .nav > li > a{color:#fff}
.hdr.over .nav > li > a:hover{color:#fff}
.hdr.over .nav > li.on > a{color:#fff}
.hdr.over .hdr-tel{color:#fff}
.hdr.over .hdr-tel .num svg{color:#fff}
.hdr.over .hdr-tel .st{color:#BFEDEC}
.hdr.over .hdr-tel .st i{background:#7FDCDA}
.hdr.over .btn-navy{background:#fff;color:var(--navy);border-color:#fff}
.hdr.over .btn-navy:hover{background:var(--cream);color:var(--navy)}
.hdr.over .burger{border-color:rgba(255,255,255,.55);background:transparent}
.hdr.over .burger span,.hdr.over .burger::before,.hdr.over .burger::after{background:#fff}
.hdr.over .tel-ico{border-color:rgba(255,255,255,.55);color:#fff}
.hdr > .wrap{display:flex;align-items:center;height:90px;gap:18px;max-width:1400px}
.brand{flex:none}                       /* the wordmark distorts the moment it can shrink */
.brand img{height:48px;width:auto}
.nav{display:flex;align-items:center;gap:6px;margin:0 auto;list-style:none;padding:0}
.nav > li{position:relative}
.nav > li > a{display:flex;align-items:center;gap:6px;font:500 16.5px/1 var(--text);color:var(--ink);
  padding:14px 4px;position:relative;transition:color .16s;white-space:nowrap}
.nav > li + li{margin-left:16px}
.nav > li > a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .18s}
.nav > li > a:hover{color:var(--navy)}
.nav > li > a:hover::after,.nav > li.on > a::after{transform:scaleX(1)}
.nav > li.on > a{color:var(--navy);font-weight:600}
.nav .cv{width:12px;height:12px;transition:.18s;opacity:.6}
.nav > li:hover .cv{transform:rotate(180deg)}
.sub{position:absolute;top:calc(100% + 4px);left:-16px;min-width:290px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-h);padding:8px;
  list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s}
.nav > li:hover .sub,.nav > li:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub li{margin:0}
.sub a{display:block;padding:10px 14px;border-radius:var(--r-sm);font-size:16px;color:var(--body)}
.sub a:hover{background:var(--cream);color:var(--navy)}
.hdr-end{flex:none;display:flex;align-items:center;gap:16px;margin-left:18px}
.hdr-tel{display:grid;gap:5px;line-height:1;color:var(--ink)}
.hdr-tel .num{display:flex;align-items:center;gap:8px;font:700 18px/1 var(--text);
  font-variant-numeric:tabular-nums}
.hdr-tel .num svg{width:16px;height:16px;color:var(--teal-d)}
.hdr-tel .st{display:flex;align-items:center;gap:7px;font:500 13.5px/1 var(--text);color:var(--teal-d)}
.hdr-tel .st i{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none}
.hdr-tel:hover .num{color:var(--navy)}
.tel-ico{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:var(--r-sm);
  place-items:center;color:var(--navy)}
.tel-ico svg{width:19px;height:19px}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;cursor:pointer;position:relative}
.burger span,.burger::before,.burger::after{content:"";position:absolute;left:13px;width:20px;
  height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.burger span{top:22px}.burger::before{top:16px}.burger::after{top:28px}
.burger[aria-expanded=true] span{opacity:0}
.burger[aria-expanded=true]::before{top:22px;transform:rotate(45deg)}
.burger[aria-expanded=true]::after{top:22px;transform:rotate(-45deg)}
.mnav{display:none;visibility:hidden;background:#fff;border-top:1px solid var(--line);max-height:0;overflow:hidden;
  transition:max-height .3s}
.mnav.open{max-height:82vh;overflow-y:auto;visibility:visible}
.mnav ul{list-style:none;margin:0;padding:0}
.mnav > ul > li > a{display:block;padding:16px 28px;font:600 17px/1.2 var(--text);color:var(--ink);
  border-bottom:1px solid var(--line)}
.msub{background:var(--cream)}
.msub a{display:block;padding:12px 28px 12px 44px;font-size:16px;color:var(--body)}
.mcta{padding:20px 28px 26px;display:grid;gap:10px}


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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* money band — a photograph under the navy instead of a flat colour field */
.pmoney{position:relative;isolation:isolate;overflow:hidden;padding:88px 0}
.pmoney-ph{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.pmoney::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,var(--navy) 0%,rgba(12,72,156,.95) 44%,rgba(6,43,96,.82) 100%)}
.pmoney > .wrap{position:relative;z-index:3}
.pmoney.tex::before{z-index:2;background-image:radial-gradient(rgba(255,255,255,.55) 1.3px,transparent 1.3px);opacity:.10}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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