/* ============================================================
   Dental Collective — same template as the Dental Boutique build,
   reskinned to their brand.

   Tokens taken from dentalcollective.com.au:
     navy / ink    rgb(43,61,74)    #16232e
     slate         rgb(52,71,83)    #24384a
     cream         rgb(240,239,233) #f0efe9
     pale blue     rgb(181,209,214) #9ec7cf
     peach         rgb(232,181,150) #c9743f
     type          TT Commons, uppercase nav @13px
   Structure (container 1216 / sheet 1376, r=12 buttons, rounded
   slab over a dark shell) is carried over from the template.
   ============================================================ */

:root{
  --ink:#16232e;
  --ink-80:rgba(22,35,46,.8);
  --slate:#24384a;
  --body:#54646f;
  --muted:#87949e;
  --cream:#f0efe9;
  --cream-dk:#e4e1d6;
  --blue:#9ec7cf;
  --blue-dk:#6fa4ae;
  --peach:#c9743f;
  --line:#dbd7cb;
  --line-dark:rgba(240,239,233,.16);
  --paper:#faf9f5;
  --shell:#16232e;

  --container:1216px;
  --gutter:32px;
  --r:12px;
  --r-lg:32px;
  --r-xl:48px;

  --display:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--shell);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}
em{font-style:normal}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* ── typography ───────────────────────────────────────────── */
/* Headings run in sentence case. The template set every heading in caps, which
   works for a two-word clinic name and shouts at you across a nine-word
   sentence. Uppercase is kept for small labels only, where it reads as a label
   rather than as emphasis. Sizes come down slightly and weight comes up, so
   they still hold the page without the caps doing the work. */
h1{
  font-family:var(--display);
  font-size:clamp(34px,4.4vw,60px);line-height:1.08;
  font-weight:400;letter-spacing:-.018em;
}
h2{
  font-family:var(--display);
  font-size:clamp(24px,2.6vw,36px);line-height:1.18;
  font-weight:500;letter-spacing:-.014em;
}
h3{font-family:var(--display);font-size:clamp(18px,1.5vw,22px);line-height:1.25;font-weight:600;letter-spacing:-.008em}
h4{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}

.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}

/* ── buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 20px;border-radius:var(--r);border:1px solid transparent;
  font-family:var(--sans);font-size:13px;line-height:1.1;
  letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--lg{padding:17px 28px;font-size:13px}
.btn--block{width:100%}
.btn__icon{width:17px;height:17px;flex:none}

.btn--primary{background:var(--ink);color:var(--cream)}
.btn--primary:hover{background:var(--slate)}

.btn--ghost{background:transparent;color:currentColor;border-color:currentColor;opacity:.85}
.btn--ghost:hover{opacity:1;background:rgba(255,255,255,.1)}

.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--outline-light:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}

.btn--dark{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--dark:hover{background:var(--ink);color:var(--cream)}

.link-arrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  padding-bottom:5px;border-bottom:1px solid var(--line);
  transition:border-color .3s var(--ease);
}
.link-arrow span{transition:transform .3s var(--ease)}
.link-arrow:hover{border-color:var(--ink)}
.link-arrow:hover span{transform:translateX(4px)}
.link-arrow--light{color:var(--cream);border-color:rgba(240,239,233,.35)}
.link-arrow--light:hover{border-color:var(--cream)}

.icon-btn{width:40px;height:40px;display:grid;place-items:center;background:none;border:0;color:inherit;cursor:pointer}
.icon-btn svg{width:19px;height:19px}

/* ── announcement bar ─────────────────────────────────────── */
.announce{background:var(--blue);color:var(--ink);font-size:13px;letter-spacing:.01em}
.announce__inner{display:flex;align-items:center;justify-content:center;gap:14px;min-height:44px;padding:7px 20px;text-align:center}
.announce__btn{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border:1px solid rgba(43,61,74,.35);border-radius:8px;font-weight:500;
  transition:background .3s var(--ease);
}
.announce__btn:hover{background:rgba(43,61,74,.1)}

/* ── header ───────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:60;background:transparent;color:var(--cream);
  transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease);
}
.site-header__inner{
  width:100%;max-width:1376px;margin-inline:auto;
  display:flex;align-items:center;gap:26px;padding:18px var(--gutter);
  border-bottom:1px solid rgba(240,239,233,.18);
  transition:border-color .35s var(--ease);
}
.site-header.is-solid{background:var(--cream);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.site-header.is-solid .site-header__inner{border-bottom-color:transparent}
.site-header.is-solid .brand__logo--light{display:none}
.site-header.is-solid .brand__logo--dark{display:block}

/* the wordmark is a 544x27 image — size it by width so it can shrink,
   otherwise a fixed height renders it ~302px wide and busts small screens */
.brand{display:block;flex:0 1 auto;min-width:0}
.brand__logo{width:302px;height:auto;max-width:100%}
.brand__logo--dark{display:none}

.nav{display:flex;align-items:center;gap:26px;margin-right:auto;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.nav a{position:relative;padding:4px 0;opacity:.9;transition:opacity .25s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .3s var(--ease)}
.nav a:hover{opacity:1}
.nav a:hover::after{right:0}
.nav a.is-active{opacity:1}
.nav a.is-active::after{right:0}

.header-actions{display:flex;align-items:center;gap:10px}
.burger{display:none;width:40px;height:40px;background:none;border:0;cursor:pointer;padding:0;color:inherit}
.burger span{display:block;height:1.5px;background:currentColor;margin:5px auto;width:22px}

/* ── sticky side tab ──────────────────────────────────────── */
.side-tab{
  position:fixed;left:0;top:50%;z-index:55;transform:translateY(-50%);
  writing-mode:vertical-rl;background:var(--ink);color:var(--cream);
  padding:22px 12px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  border-radius:0 var(--r) var(--r) 0;
  transition:padding-left .3s var(--ease);
}
.side-tab:hover{padding-left:17px;background:var(--slate)}

/* ── hero ─────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:780px;
  margin-top:-77px;padding-top:77px;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;background:var(--ink);
}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__vignette{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(43,61,74,.68) 0%,rgba(43,61,74,.12) 30%,rgba(43,61,74,.45) 66%,rgba(43,61,74,.9) 100%),
    linear-gradient(90deg,rgba(43,61,74,.6) 0%,rgba(43,61,74,0) 62%);
}

.hero__content{position:relative;z-index:2;padding-bottom:150px;color:var(--cream)}
.rating-pill{
  display:inline-flex;align-items:center;gap:11px;padding:9px 16px;margin-bottom:28px;
  border:1px solid rgba(240,239,233,.32);border-radius:999px;
  background:rgba(240,239,233,.1);backdrop-filter:blur(6px);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,239,233,.95);
}
.stars{color:var(--peach);letter-spacing:2px;font-size:12px}

.hero h1{max-width:19ch;color:var(--cream)}
.hero__sub{margin-top:24px;max-width:46ch;font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:rgba(240,239,233,.82)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero__cta .btn--primary{background:var(--cream);color:var(--ink)}
.hero__cta .btn--primary:hover{background:var(--blue)}

/* ── light sheet over the dark shell ──────────────────────── */
.sheet{
  position:relative;z-index:3;
  margin:-72px var(--gutter) 0;
  background:var(--cream);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.sheet > section{background:transparent;position:relative}
.sheet > .banner{background:var(--ink);border-radius:var(--r-lg);margin-inline:var(--gutter)}
.sheet > .newsletter{background:var(--blue);border-radius:var(--r-lg);margin-inline:var(--gutter)}
.stats{padding-top:80px}

/* ── stat band ────────────────────────────────────────────── */
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.stat{padding:34px 0 44px;display:flex;flex-direction:column;gap:10px}
.stat + .stat{padding-left:44px;border-left:1px solid var(--line)}
.stat__label{font-size:13px;letter-spacing:.01em;color:var(--muted)}
.stat__num{font-family:var(--display);font-size:clamp(38px,4.4vw,60px);font-weight:300;letter-spacing:-.01em;line-height:1}

/* ── capability strip ─────────────────────────────────────── */
.logostrip{border-bottom:1px solid var(--line)}
.logostrip__inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  min-height:67px;padding-block:22px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}

/* ── story ────────────────────────────────────────────────── */
.story{padding-block:96px}
.story__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.story__copy p{margin-top:22px;color:var(--body);font-size:17px;line-height:1.68;max-width:52ch}
.story__cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:36px}
.story__media img{aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg);width:100%}

/* ── banner ───────────────────────────────────────────────── */
.banner{color:var(--cream)}
.banner__inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-block:40px}
.banner h3{color:var(--cream)}

/* ── services ─────────────────────────────────────────────── */
.treatments{padding-block:96px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:48px}
.section-head h2{max-width:18ch}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{display:flex;flex-direction:column;gap:16px}
.card__media{overflow:hidden;border-radius:var(--r-lg)}
.card__media img{aspect-ratio:4/5;object-fit:cover;width:100%;transition:transform .7s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card p{color:var(--body);font-size:15px;line-height:1.6;flex:1}
.card .link-arrow{align-self:flex-start}

/* ── enquiry ──────────────────────────────────────────────── */
.enquire{padding-block:96px;border-top:1px solid var(--line)}
.enquire__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start}
/* grid items default to min-width:auto, which lets long email addresses
   set a min-content floor the column can't shrink below */
.enquire__grid > *,.split > *,.bio > *,.clinic-panel > *,.footer__col{min-width:0}
.enquire__intro p{margin-top:22px;color:var(--body);font-size:17px;line-height:1.68;max-width:40ch}
.clinic-mini{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.clinic-mini h4{margin-bottom:12px;color:var(--ink)}
.clinic-mini a{display:block;font-size:14px;color:var(--body);margin-bottom:6px;transition:color .25s var(--ease);overflow-wrap:anywhere}
.clinic-mini a:hover{color:var(--ink)}

.form{display:flex;flex-direction:column;gap:18px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:9px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field em{color:var(--peach)}
.field input,.field select{
  font-family:var(--sans);font-size:16px;letter-spacing:normal;text-transform:none;color:var(--ink);
  padding:14px 15px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field input:focus,.field select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(181,209,214,.5)}
.form__fine{font-size:12px;letter-spacing:.04em;color:var(--muted);text-transform:none}

/* ── technology strip ─────────────────────────────────────── */
.awards{padding-block:56px;border-top:1px solid var(--line)}
.awards__title{font-family:var(--display);font-size:clamp(18px,2vw,26px);text-transform:none;letter-spacing:.04em;text-align:center;color:var(--ink)}
.awards__title em{color:var(--blue-dk)}
.awards__title--light{color:var(--cream)}
.awards__title--light em{color:var(--blue)}
.awards__row{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:28px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.awards__row--light{color:rgba(240,239,233,.55)}

/* ── pricing capture ──────────────────────────────────────── */
.newsletter{padding-block:44px}
.newsletter__inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.newsletter p{font-size:17px;max-width:48ch;color:var(--ink)}
.newsletter__form{display:flex;gap:10px}
.newsletter__form input{
  font-family:var(--sans);font-size:16px;padding:14px 16px;min-width:250px;
  border:1px solid rgba(43,61,74,.25);border-radius:var(--r);background:var(--cream);color:var(--ink);
}
.newsletter__form input:focus{outline:none;border-color:var(--ink)}

/* ── why ──────────────────────────────────────────────────── */
.why{padding-block:96px;border-top:1px solid var(--line)}
.why__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}
.why__intro{position:sticky;top:110px}
.why__intro p{margin-top:22px;color:var(--body);font-size:17px;line-height:1.68;max-width:38ch}
.why__intro .btn{margin-top:32px}

.acc__item{border-top:1px solid var(--line)}
.acc__item:last-child{border-bottom:1px solid var(--line)}
.acc__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:28px 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-size:clamp(16px,1.5vw,21px);font-weight:400;
  letter-spacing:.05em;text-transform:uppercase;
}
.acc__item summary::-webkit-details-marker{display:none}
.acc__item summary i{position:relative;width:18px;height:18px;flex:none}
.acc__item summary i::before,.acc__item summary i::after{content:"";position:absolute;background:var(--ink);transition:transform .35s var(--ease),opacity .35s var(--ease)}
.acc__item summary i::before{left:0;top:8.5px;width:18px;height:1.5px}
.acc__item summary i::after{left:8.5px;top:0;width:1.5px;height:18px}
.acc__item[open] summary i::after{transform:rotate(90deg);opacity:0}
.acc__body{padding-bottom:32px;max-width:62ch;color:var(--body);font-size:16px;line-height:1.7}
.acc__body p + p,.acc__body ul{margin-top:16px}
.acc__body ul{padding-left:20px;display:flex;flex-direction:column;gap:10px}
.acc__body strong{color:var(--ink);font-weight:500}
.acc__body .fine{font-size:13px;color:var(--muted);line-height:1.6}
.acc__body .link-arrow{margin-top:20px}

/* ── team ─────────────────────────────────────────────────── */
.cases{padding-block:96px;border-top:1px solid var(--line)}
.cases__title{text-transform:none;margin-bottom:48px}
.cases__title em{color:var(--blue-dk)}
.cases__row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.vcard{margin:0}
.vcard__img{overflow:hidden;border-radius:var(--r-lg)}
.vcard__img img{aspect-ratio:4/5;object-fit:cover;width:100%;transition:transform .7s var(--ease)}
.vcard:hover .vcard__img img{transform:scale(1.05)}
.vcard figcaption{display:flex;flex-direction:column;gap:5px;margin-top:16px}
.vcard figcaption strong{font-size:16px;font-weight:500;letter-spacing:.02em}
.vcard figcaption span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.vcard figcaption .quals{letter-spacing:.06em;text-transform:none;font-size:12px;color:var(--muted)}

.disclaimer{margin-top:36px;font-size:13px;line-height:1.7;color:var(--muted);max-width:88ch}

/* ── clinic gallery ───────────────────────────────────────── */
.gallery{padding-block:96px;border-top:1px solid var(--line)}
.gallery h2 em{color:var(--blue-dk)}
.ba-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(330px,1fr);gap:24px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:14px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  scrollbar-width:thin;
}
.ba{scroll-snap-align:start;margin:0}
.ba__img{overflow:hidden;border-radius:var(--r-lg)}
.ba__img img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .7s var(--ease)}
.ba:hover .ba__img img{transform:scale(1.04)}
.ba figcaption{display:flex;flex-direction:column;gap:5px;margin-top:16px}
.ba figcaption strong{font-size:15px;font-weight:500;letter-spacing:.02em}
.ba figcaption span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ── clinics ──────────────────────────────────────────────── */
.comfort{padding-block:96px;border-top:1px solid var(--line)}
.comfort__grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.comfort__media img{aspect-ratio:5/6;object-fit:cover;border-radius:var(--r-lg);width:100%}
.comfort__copy > h2{margin-bottom:40px}
.clinic h3{margin-bottom:10px}
.clinic__addr{font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:16px!important}
.comfort__copy p{margin-top:0;color:var(--body);font-size:16px;line-height:1.68;max-width:48ch}
.clinic .link-arrow{margin-top:20px}
.comfort__sub{margin-top:44px;padding-top:38px;border-top:1px solid var(--line)}

/* ── marquee ──────────────────────────────────────────────── */
.marquee{background:var(--shell);color:var(--cream);overflow:hidden;padding-block:28px}
.marquee__track{display:flex;gap:56px;width:max-content;animation:slide 34s linear infinite}
.marquee__track span{
  font-family:var(--display);font-size:clamp(24px,3.2vw,42px);
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:rgba(240,239,233,.9);
}
.marquee__track span:nth-child(even){color:transparent;-webkit-text-stroke:1px rgba(240,239,233,.45)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── closing CTA ──────────────────────────────────────────── */
.finance{background:var(--shell);color:var(--cream);padding-block:68px}
.finance__inner{display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}
.finance h2{color:var(--cream);max-width:20ch}
.finance p{margin-top:20px;max-width:56ch;color:rgba(240,239,233,.68);font-size:17px;line-height:1.68}
.finance .btn--primary{background:var(--cream);color:var(--ink)}
.finance .btn--primary:hover{background:var(--blue)}

/* ── footer ───────────────────────────────────────────────── */
.footer{background:var(--shell);color:var(--cream);padding-top:8px}
.footer__awards{padding-block:48px;border-bottom:1px solid var(--line-dark)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr .8fr;gap:48px;padding-block:64px}
.footer__logo{width:282px;height:auto;max-width:100%}
.footer__brand p{margin-top:22px;max-width:32ch;color:rgba(240,239,233,.6);font-size:15px;line-height:1.65}
.footer__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.footer__cta .btn--primary{background:var(--cream);color:var(--ink)}
.footer__cta .btn--primary:hover{background:var(--blue)}

.footer__col{display:flex;flex-direction:column;gap:9px}
.footer__col h4{margin-bottom:10px;color:var(--blue)}
.footer__col a{font-size:14px;color:rgba(240,239,233,.82);transition:color .25s var(--ease);overflow-wrap:anywhere}
.footer__col a:hover{color:var(--cream)}
.footer__addr{margin-top:10px;font-size:14px;line-height:1.6;color:rgba(240,239,233,.6)}
.hours{margin:16px 0 0;display:flex;flex-direction:column;gap:5px}
.hours div{display:flex;justify-content:space-between;gap:16px;font-size:12px;letter-spacing:.06em;color:rgba(240,239,233,.55)}
.hours dt{text-transform:uppercase}
.hours dd{margin:0}

.footer__base{
  display:flex;align-items:baseline;justify-content:space-between;gap:32px;flex-wrap:wrap;
  padding-block:28px 48px;border-top:1px solid var(--line-dark);
  font-size:12px;letter-spacing:.06em;color:rgba(240,239,233,.45);
}
.footer__fine{max-width:64ch;line-height:1.65}

/* ── reveal on scroll ─────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* ── responsive ───────────────────────────────────────────── */
@media (max-width:1180px){
  .cards,.cases__row{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr 1fr}
  .footer__brand{grid-column:1 / -1}
}
@media (max-width:980px){
  .nav{display:none}
  .burger{display:block}
  /* the burger + the announcement bar both cover booking on small screens */
  .header-actions{display:none}
  .site-header__inner{gap:14px;justify-content:space-between}
  .brand{margin-right:auto}
  .brand__logo{width:250px}
  .story__grid,.enquire__grid,.why__grid,.comfort__grid{grid-template-columns:1fr;gap:44px}
  .why__intro{position:static}
  .story__media,.comfort__media{order:-1}
  .side-tab{display:none}
  .hero{min-height:640px}
  .hero__content{padding-bottom:120px}
}
@media (max-width:680px){
  :root{--gutter:20px;--r-lg:22px;--r-xl:28px}
  .announce__inner{flex-direction:column;gap:8px}
  .cards,.cases__row,.form__row,.stats__grid,.clinic-mini{grid-template-columns:1fr}
  .stat + .stat{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .stat{padding-block:26px}
  .brand__logo{width:210px}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1 / -1}
  .newsletter__form{width:100%}
  .newsletter__form input{min-width:0;flex:1}
  .story,.treatments,.enquire,.why,.cases,.gallery,.comfort{padding-block:64px}
  .sheet{margin-inline:12px}
  .sheet > .banner,.sheet > .newsletter{margin-inline:12px}
  .ba-track{grid-auto-columns:minmax(78vw,1fr)}
}

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

/* ============================================================
   INTERNAL PAGES
   Shared components for about / team / services / clinics /
   pricing / contact. Same tokens and rhythm as the home page.
   ============================================================ */

/* ── compact page hero ────────────────────────────────────── */
.page-hero{
  position:relative;
  min-height:440px;
  margin-top:-77px;padding-top:77px;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;background:var(--ink);
}
.page-hero--tall{min-height:560px}
.page-hero__media{position:absolute;inset:0}
.page-hero__media img{width:100%;height:100%;object-fit:cover}
.page-hero__vignette{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(43,61,74,.72) 0%,rgba(43,61,74,.2) 34%,rgba(43,61,74,.55) 70%,rgba(43,61,74,.92) 100%),
    linear-gradient(90deg,rgba(43,61,74,.62) 0%,rgba(43,61,74,0) 66%);
}
.page-hero__content{position:relative;z-index:2;padding-bottom:120px;color:var(--cream)}
.page-hero h1{max-width:22ch;color:var(--cream);font-size:clamp(30px,3.6vw,50px)}
.page-hero__sub{margin-top:20px;max-width:52ch;font-size:clamp(15px,1.3vw,18px);line-height:1.65;color:rgba(240,239,233,.82)}

.breadcrumb{
  display:flex;align-items:center;gap:10px;margin-bottom:22px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,239,233,.6);
}
.breadcrumb a{transition:color .25s var(--ease)}
.breadcrumb a:hover{color:var(--cream)}
.breadcrumb span{opacity:.5}

/* ── generic inner section ────────────────────────────────── */
.section{padding-block:88px}
.section + .section{border-top:1px solid var(--line)}
.section--tight{padding-block:64px}

.lede{font-size:clamp(18px,1.9vw,23px);line-height:1.55;color:var(--ink);max-width:32ch}

/* ── long-form prose ──────────────────────────────────────── */
.prose{max-width:66ch;color:var(--body);font-size:16px;line-height:1.75}
.prose > * + *{margin-top:18px}
.prose h3{color:var(--ink);margin-top:38px}
.prose h4{color:var(--ink);margin-top:30px;letter-spacing:.14em}
.prose strong{color:var(--ink);font-weight:500}
.prose ul{padding-left:20px;display:flex;flex-direction:column;gap:11px}
.prose li::marker{color:var(--blue-dk)}
.prose .fine{font-size:13px;color:var(--muted);line-height:1.65}
.prose a:not(.btn):not(.link-arrow){border-bottom:1px solid var(--line);transition:border-color .25s var(--ease)}
.prose a:not(.btn):not(.link-arrow):hover{border-color:var(--ink)}

/* two-column: sticky rail + content */
.split{display:grid;grid-template-columns:.62fr 1.38fr;gap:72px;align-items:start}
.split__rail{position:sticky;top:110px}
.split__rail h2{margin-bottom:22px}
.split__rail p{color:var(--body);font-size:16px;line-height:1.7;max-width:34ch}
.split__rail .btn,.split__rail .link-arrow{margin-top:26px}

/* jump nav */
.jump{display:flex;flex-direction:column;gap:2px;margin-top:30px;border-top:1px solid var(--line)}
.jump a{
  padding:13px 0;border-bottom:1px solid var(--line);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--body);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  transition:color .25s var(--ease),padding-left .25s var(--ease);
}
.jump a::after{content:"→";opacity:0;transition:opacity .25s var(--ease)}
.jump a:hover{color:var(--ink);padding-left:6px}
.jump a:hover::after{opacity:1}

/* ── feature blocks (services detail) ─────────────────────── */
.feature{scroll-margin-top:110px}
.feature + .feature{margin-top:72px;padding-top:72px;border-top:1px solid var(--line)}
.feature__head{display:flex;align-items:baseline;gap:18px;margin-bottom:24px;flex-wrap:wrap}
.feature__num{
  font-family:var(--display);font-size:13px;letter-spacing:.14em;
  color:var(--blue-dk);padding-top:4px;
}
.feature__media{margin:32px 0;overflow:hidden;border-radius:var(--r-lg)}
.feature__media img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* pill list for capability chips */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.chips span{
  padding:8px 15px;border:1px solid var(--line);border-radius:999px;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--body);
  background:var(--paper);
}

/* ── team bios ────────────────────────────────────────────── */
.bio{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start;scroll-margin-top:110px}
.bio + .bio{margin-top:80px;padding-top:80px;border-top:1px solid var(--line)}
.bio:nth-child(even) .bio__media{order:2}
.bio__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-lg)}
.bio__role{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-dk);margin-bottom:12px}
.bio__quals{font-size:13px;color:var(--muted);margin-top:10px;letter-spacing:.03em}
.bio__body{margin-top:26px;color:var(--body);font-size:16px;line-height:1.75}
.bio__body p + p{margin-top:16px}
.bio__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.bio__meta span{
  padding:7px 13px;border:1px solid var(--line);border-radius:999px;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--body);
}
.bio__cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ── clinic panels ────────────────────────────────────────── */
.clinic-panel{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;scroll-margin-top:110px}
.clinic-panel + .clinic-panel{margin-top:88px;padding-top:88px;border-top:1px solid var(--line)}
.clinic-panel:nth-of-type(even) .clinic-panel__media{order:2}
.clinic-panel__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg)}
.clinic-panel__body p{margin-top:20px;color:var(--body);font-size:16px;line-height:1.7;max-width:48ch}
.clinic-panel .clinic__addr{margin-top:14px!important}

.detail-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;
  margin-top:34px;padding-top:30px;border-top:1px solid var(--line);
}
.detail h4{color:var(--muted);margin-bottom:10px}
.detail a,.detail p{font-size:15px;color:var(--ink);line-height:1.6;overflow-wrap:anywhere}
.detail a{display:block;transition:opacity .25s var(--ease)}
.detail a:hover{opacity:.65}

.hours--light{margin:0;display:flex;flex-direction:column;gap:7px}
.hours--light div{display:flex;justify-content:space-between;gap:20px;font-size:13px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.hours--light div:last-child{border-bottom:0}
.hours--light dt{text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--muted);padding-top:2px}
.hours--light dd{margin:0;color:var(--ink)}

/* ── pricing ──────────────────────────────────────────────── */
.price-list{margin-top:8px;border-top:1px solid var(--line)}
.price-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:22px 0;border-bottom:1px solid var(--line);
}
.price-row__name{font-size:16px;color:var(--ink);letter-spacing:.01em}
.price-row__name small{display:block;margin-top:6px;font-size:13px;color:var(--muted);letter-spacing:normal}
.price-row__val{
  font-family:var(--display);font-size:20px;color:var(--ink);
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}
.price-row__val--free{color:var(--blue-dk)}

.callout{
  margin-top:44px;padding:32px 34px;border-radius:var(--r-lg);
  background:var(--blue);color:var(--ink);
}
.callout h3{margin-bottom:14px}
.callout p{font-size:16px;line-height:1.7;max-width:56ch}
.callout .btn{margin-top:24px}
.callout--quiet{background:var(--paper);border:1px solid var(--line)}

/* ── contact ──────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.contact-card{
  padding:38px 34px;border-radius:var(--r-lg);
  background:var(--paper);border:1px solid var(--line);
  display:flex;flex-direction:column;
}
.contact-card h3{margin-bottom:8px}
.contact-card .clinic__addr{margin-bottom:24px!important}
.contact-card .hours--light{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.contact-card .btn{margin-top:28px;align-self:flex-start}

.map{margin-top:26px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.map img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* ── related pages ────────────────────────────────────────── */
.next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.next-card{
  display:flex;flex-direction:column;gap:12px;
  padding:30px 28px;border-radius:var(--r-lg);
  background:var(--paper);border:1px solid var(--line);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.next-card:hover{border-color:var(--ink);transform:translateY(-3px)}
.next-card p{font-size:14px;line-height:1.6;color:var(--body);flex:1}
.next-card .link-arrow{align-self:flex-start;border-color:transparent;padding-bottom:0}

/* ── inner-page responsive ────────────────────────────────── */
@media (max-width:1180px){
  .next-grid{grid-template-columns:1fr}
}
@media (max-width:980px){
  .split,.bio,.clinic-panel,.contact-grid{grid-template-columns:1fr;gap:40px}
  .split__rail{position:static}
  .bio:nth-child(even) .bio__media,.clinic-panel:nth-of-type(even) .clinic-panel__media{order:-1}
  .page-hero{min-height:380px}
  .page-hero__content{padding-bottom:90px}
}
@media (max-width:680px){
  .section{padding-block:60px}
  .detail-grid{grid-template-columns:1fr}
  .bio + .bio,.clinic-panel + .clinic-panel{margin-top:52px;padding-top:52px}
  .feature + .feature{margin-top:52px;padding-top:52px}
  .callout{padding:26px 24px}
  .contact-card{padding:30px 24px}
}

/* ══════════════════════════════════════════════════════════════
   Practice Fitouts — additions on top of the base template
   ══════════════════════════════════════════════════════════════ */

/* Wordmark. There is no logo file for this brand yet, so the mark is
   type — which also means it recolours cleanly when the header goes solid. */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand__mark{
  display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:var(--blue);color:var(--ink);
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.04em;
  flex:0 0 auto;
}
.brand__name{
  font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;
  color:#fff;white-space:nowrap;transition:color .25s var(--ease);
}
.site-header.is-solid .brand__name{color:var(--ink)}
@media (max-width:400px){.brand__name{font-size:15px}}

/* Cost bands. The whole point of this page is that a number appears
   above the fold, so it gets weight the surrounding prose does not. */
.bands{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
.band{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px 26px;display:flex;flex-direction:column;
}
.band h3{font-size:19px;margin-bottom:6px}
.band__range{
  font-family:var(--display);font-weight:700;font-size:31px;letter-spacing:-.02em;
  color:var(--ink);margin:12px 0 2px;line-height:1.1;
}
.band__unit{font-size:13px;color:var(--muted);letter-spacing:.02em}
.band p{font-size:14.5px;margin-top:16px;flex:1}
.band__note{font-size:12.5px;color:var(--muted);margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
@media (max-width:900px){.bands{grid-template-columns:1fr}}

/* Assumption list — what the number does and does not include.
   Stating this is the difference between a useful figure and a misleading one. */
.assumes{
  display:grid;grid-template-columns:1fr 1fr;gap:0 46px;
  background:var(--cream);border-radius:var(--r-lg);padding:34px 38px;margin-top:34px;
}
.assumes h4{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.assumes ul{list-style:none;margin:0 0 4px}
.assumes li{position:relative;padding-left:24px;font-size:15px;color:var(--body);margin-bottom:9px;line-height:1.5}
.assumes li::before{position:absolute;left:0;top:0;font-weight:700}
.assumes--in li::before{content:"+";color:#3f7d63}
.assumes--out li::before{content:"\2013";color:#a8543c}
@media (max-width:760px){.assumes{grid-template-columns:1fr;gap:26px;padding:28px 24px}}

/* Standards table — the compliance vocabulary, laid out so it can be scanned. */
.standards{margin-top:34px;border-top:1px solid var(--line)}
.standard{display:grid;grid-template-columns:220px 1fr;gap:28px;padding:24px 0;border-bottom:1px solid var(--line)}
.standard dt{font-family:var(--display);font-weight:600;font-size:16.5px;color:var(--ink)}
.standard dd{margin:0;font-size:15.5px;color:var(--body);line-height:1.62}
@media (max-width:760px){.standard{grid-template-columns:1fr;gap:7px;padding:20px 0}}

/* FAQ list reuses the accordion, minus the two-column shell. */
.faq{max-width:860px;margin-top:30px}
.faq .acc__item summary{font-size:17px}

/* Sector cross-links at the foot of every page. */
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
@media (max-width:900px){.sectors{grid-template-columns:1fr}}

/* Geo proof strip — suburb and council coverage, the thing that makes a
   location page read local rather than templated. */
.coverage{background:var(--cream);border-radius:var(--r-lg);padding:32px 36px;margin-top:34px}
.coverage h4{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.coverage p{font-size:15.5px;color:var(--body);margin:0}
@media (max-width:760px){.coverage{padding:26px 24px}}

/* A card with no image — used where the point is the copy, not a photo we
   do not have yet. Same shell as .card so the grid stays consistent. */
.card--flat{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px}
.card--flat h3{font-size:19px;margin-bottom:10px}
.card--flat p{margin-top:0}
.cards--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.cards--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.cards--3{grid-template-columns:1fr}}

/* Footer and inline links sit at 17–21px, which is a fine reading target and
   a poor thumb one. Lift them on small screens only, so the desktop footer
   keeps its density. */
@media (max-width:680px){
  .footer__col a,
  .clinic-mini a{padding-block:7px}
  .band__note a,
  .link-arrow{padding-block:7px}
}

/* ══════════════════════════════════════════════════════════════
   Tools — built to read like a cost plan, not a web widget.
   Ruled rows, tabular figures, a double rule above the total. The
   reference is a quantity surveyor's worksheet, which is what the
   thing actually is.
   ══════════════════════════════════════════════════════════════ */

.tool{display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:start;margin-top:44px}
@media (max-width:1080px){.tool{grid-template-columns:1fr;gap:36px}}

/* The worksheet. No card, no shadow — it sits on the page like a form. */
.sheetform{border-top:2px solid var(--ink)}

.tgroup{display:grid;grid-template-columns:34px 1fr;gap:0 18px;
  padding:26px 0;border-bottom:1px solid var(--line)}
.tgroup__n{
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.06em;
  color:var(--muted);padding-top:4px;font-variant-numeric:tabular-nums;
}
.tgroup__head h3{font-size:17px;letter-spacing:-.01em;margin:0}
.tgroup__hint{font-size:13.5px;color:var(--muted);margin:5px 0 0;line-height:1.55;max-width:52ch}
.tgroup__body{grid-column:2;margin-top:16px}
@media (max-width:560px){
  .tgroup{grid-template-columns:1fr;gap:0}
  .tgroup__n{padding:0 0 6px}
  .tgroup__body{grid-column:1}
}

/* Segmented control. Square, hairline-divided, closer to a spec sheet
   than to a row of pills. */
.opts{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts label{
  flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:10px 16px;background:#fff;border-left:1px solid var(--line);
  font-size:14px;color:var(--slate);cursor:pointer;text-align:center;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.opts label:first-of-type,
.opts input:first-child + label{border-left:0}
.opts label:hover{background:var(--cream)}
.opts input:checked + label{background:var(--ink);color:var(--cream)}
.opts input:focus-visible + label{outline:2px solid var(--blue-dk);outline-offset:-2px}
@media (max-width:680px){.opts label{flex:1 1 44%;border-left:1px solid var(--line)}}

/* Room schedule: label left, quantity right, ruled between. */
.counts{border-top:1px solid var(--line)}
.count{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line)}
.count__label{font-size:15px;color:var(--slate)}
.count__label small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.stepper{display:inline-flex;align-items:center;gap:2px}
.stepper button{
  width:34px;height:34px;border:1px solid var(--line);background:#fff;cursor:pointer;
  font-size:16px;line-height:1;color:var(--slate);border-radius:3px;
}
.stepper button:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.stepper output{
  min-width:40px;text-align:center;font-family:var(--display);font-weight:600;font-size:16px;
  color:var(--ink);font-variant-numeric:tabular-nums;
}

/* Area input: the figure is typographic, the slider is a hairline. */
.slider{display:grid;gap:14px}
.slider__val{
  font-family:var(--display);font-weight:700;font-size:38px;letter-spacing:-.03em;
  color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;
}
.slider__val small{font-size:15px;font-weight:500;color:var(--muted);margin-left:4px;letter-spacing:0}
.slider input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;
}
.slider input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--ink);opacity:.35}
.slider input[type=range]::-moz-range-track{height:1px;background:var(--ink);opacity:.35}
.slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;margin-top:-8px;border-radius:0;
  background:var(--ink);border:0;transform:rotate(45deg);
}
.slider input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:0;background:var(--ink);border:0;
}
.slider input[type=range]:focus-visible{outline:2px solid var(--blue-dk);outline-offset:4px}
.slider__scale{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);
  letter-spacing:.05em;margin-top:-4px}

/* Inclusions as ruled rows rather than a stack of checkbox cards. */
.incs{border-top:1px solid var(--line)}
.inc{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.inc input{width:17px;height:17px;margin-top:3px;accent-color:var(--ink)}
.inc strong{display:block;font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink)}
.inc span{display:block;font-size:13px;color:var(--muted);margin-top:2px;line-height:1.5}

/* ── the cost plan ──────────────────────────────────────────────
   Cream stock, hairline rules, a double rule above the total. */
.plan{background:var(--cream);border:1px solid var(--line-2,var(--line));padding:0}
@media (min-width:1081px){.plan{position:sticky;top:96px}}

.plan__head{padding:22px 26px 18px;border-bottom:1px solid var(--ink)}
.plan__kicker{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:12px;
}
.plan__figure{
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(27px,3.1vw,36px);color:var(--ink);margin:0;font-variant-numeric:tabular-nums;
}
.plan__rate{font-size:13px;color:var(--body);margin:9px 0 0;line-height:1.5}

.plan__rows{padding:6px 26px 4px}
.plan__row{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:9px 0;border-bottom:1px dotted var(--line);font-size:13.5px;color:var(--body);
}
.plan__row:last-child{border-bottom:0}
.plan__row b{font-weight:600;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}

/* Invoice rule: a heavy line with a hairline under it. */
.plan__total{
  margin:0 26px;padding:14px 0 0;border-top:2px solid var(--ink);
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
}
.plan__total span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.plan__total b{font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink);
  font-variant-numeric:tabular-nums}

.plan__foot{padding:20px 26px 24px}
.plan__note{font-size:12px;line-height:1.62;color:var(--muted);margin:0}
.plan__foot .btn{margin-top:18px;width:100%}

/* ── lease checklist ──────────────────────────────────────────── */
.checklist{margin-top:34px;border-top:2px solid var(--ink)}
.check{display:grid;grid-template-columns:30px 1fr;gap:0 16px;padding:20px 0;
  border-bottom:1px solid var(--line);align-items:start;cursor:pointer}
.check__n{font-family:var(--display);font-weight:700;font-size:12px;color:var(--muted);
  padding-top:3px;font-variant-numeric:tabular-nums}
.check__body{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start}
.check input{width:19px;height:19px;margin-top:3px;accent-color:var(--ink)}
.check__body strong{display:block;font-family:var(--display);font-size:16.5px;color:var(--ink);margin-bottom:5px;line-height:1.35}
.check__body p{margin:0;font-size:14.5px;color:var(--body);line-height:1.6}
.check.is-done .check__n{color:var(--blue-dk)}
.check.is-done .check__body strong,
.check.is-done .check__body p{opacity:.42}
.check.is-done .check__body strong{text-decoration:line-through;text-decoration-thickness:1px}
@media (max-width:560px){
  .check{grid-template-columns:1fr}
  .check__n{padding:0 0 6px}
}

.tool__progress{
  font-size:13px;letter-spacing:.02em;color:var(--muted);margin-top:18px;
  padding-top:16px;border-top:2px solid var(--ink);
}

/* ══════════════════════════════════════════════════════════════
   Blog
   ══════════════════════════════════════════════════════════════ */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:36px}
@media (max-width:980px){.posts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.posts{grid-template-columns:1fr}}

.post-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px 26px;position:relative;text-decoration:none;
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.post-card:hover{border-color:var(--blue-dk);transform:translateY(-2px)}
.post-card__tag{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.post-card h3{font-size:19px;margin:12px 0 10px;line-height:1.3}
.post-card h3 a{color:inherit;text-decoration:none}
.post-card h3 a::after{content:"";position:absolute;inset:0}
.post-card p{font-size:14.5px;margin:0;flex:1}
.post-card__meta{font-size:12.5px;color:var(--muted);margin-top:18px}

/* Article body. Narrower measure than .prose — these are read start to finish. */
.article{max-width:68ch}
.article h2{font-size:clamp(23px,2.3vw,30px);margin-top:44px}
.article h3{font-size:19px;margin-top:30px}
.article p{margin-top:16px;font-size:16.5px;line-height:1.72}
.article ul,.article ol{margin-top:16px;padding-left:22px}
.article li{font-size:16.5px;line-height:1.7;margin-bottom:9px;color:var(--body)}
.article strong{color:var(--ink);font-weight:600}
.article a:not(.btn):not(.link-arrow){color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--blue-dk)}
.article a:not(.btn):not(.link-arrow):hover{text-decoration-color:var(--ink)}

.keytake{background:var(--cream);border-radius:var(--r-lg);padding:28px 30px;margin-top:34px}
.keytake h4{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.keytake ul{margin:0;padding-left:20px}
.keytake li{font-size:15.5px;line-height:1.62;margin-bottom:8px;color:var(--slate)}

.article__meta{display:flex;flex-wrap:wrap;gap:16px;font-size:13.5px;color:var(--muted);margin-bottom:4px}

/* Inline figure quoting the published rate inside an article. */
.figurebox{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  border-left:3px solid var(--blue-dk);padding:4px 0 4px 22px;margin-top:30px;
}
.figurebox strong{font-family:var(--display);font-weight:700;font-size:29px;letter-spacing:-.02em;color:var(--ink)}
.figurebox span{font-size:14px;color:var(--muted)}

/* ══════════════════════════════════════════════════════════════
   Mega menu
   A full-width panel under the header: the destinations set large on
   the left, a photograph on the right. Opens on hover and on keyboard
   focus; on a phone the whole thing expands inline as a plain list,
   because a hover menu on a phone opens for nobody.
   ══════════════════════════════════════════════════════════════ */
.site-header__inner{position:relative}
.navdrop{position:static}
.navdrop__btn{
  display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:0;
  font:inherit;color:inherit;cursor:pointer;
}
.navdrop__top{position:relative;font-size:14px;letter-spacing:.01em;color:inherit;text-decoration:none}
.navdrop__btn i{
  width:6px;height:6px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translate(-1px,-2px);opacity:.55;transition:transform .22s var(--ease);
}
.navdrop[data-open="true"] .navdrop__btn i{transform:rotate(-135deg) translate(-2px,-1px)}
.navdrop__top::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);
}
.navdrop:hover .navdrop__top::after,
.navdrop[data-open="true"] .navdrop__top::after,
.navdrop__top.is-active::after{transform:scaleX(1)}

.navdrop__panel{
  position:absolute;top:calc(100% + 1px);left:0;right:0;z-index:70;
  background:var(--paper);border-top:1px solid var(--line);
  box-shadow:0 26px 54px rgba(22,35,46,.14);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.navdrop:hover .navdrop__panel,
.navdrop:focus-within .navdrop__panel,
.navdrop[data-open="true"] .navdrop__panel{opacity:1;visibility:visible;transform:translateY(0)}

.navdrop__inner{
  display:grid;grid-template-columns:1fr 420px;gap:60px;align-items:center;
  padding:46px 0 44px;
}
.navdrop__list{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.navdrop__list > a{
  font-family:var(--display);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(22px,2.2vw,32px);line-height:1.32;color:var(--ink);text-decoration:none;
  transition:opacity .18s var(--ease);
}
.navdrop__list > a:hover{opacity:.5}
.navdrop__list > a.is-here{opacity:.5}
.navdrop__all{
  margin-top:26px;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--slate);
  border-bottom:1px solid var(--line);padding-bottom:3px;
}
.navdrop__all:hover{color:var(--ink);border-color:var(--ink);opacity:1}

/* The soft corner in the reference: rounded on two opposite corners. */
.navdrop__media{overflow:hidden;border-radius:110px 4px 110px 4px;aspect-ratio:4/3}
.navdrop__media img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:1180px){
  .navdrop__inner{grid-template-columns:1fr 320px;gap:40px}
}
@media (max-width:980px){
  .navdrop{width:100%}
  .navdrop__btn{width:100%;justify-content:space-between;padding:12px 0;
    border-bottom:1px solid var(--line)}
  .navdrop__panel{
    position:static;opacity:1;visibility:visible;transform:none;display:none;
    background:none;border:0;box-shadow:none;
  }
  .navdrop[data-open="true"] .navdrop__panel{display:block}
  .navdrop:hover .navdrop__panel{display:none}
  .navdrop[data-open="true"]:hover .navdrop__panel{display:block}
  .navdrop__inner{grid-template-columns:1fr;gap:0;padding:10px 0 16px;width:100%;max-width:none}
  .navdrop__list > a{font-size:17px;line-height:1.55;padding:5px 0 5px 14px;
    border-left:1px solid var(--line);width:100%}
  .navdrop__all{margin-top:12px;margin-left:14px;font-size:14px}
  .navdrop__media{display:none}
}

/* ── shell examples in the estimator ────────────────────────────
   The single most misunderstood input on the page, so it explains
   itself as you change it rather than in a paragraph underneath. */
.shellex{margin-top:18px;border:1px solid var(--line);background:#fff;border-radius:3px}
.shellex__head{
  padding:13px 18px;border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.shellex__cols{display:grid;grid-template-columns:1fr 1fr;gap:0}
.shellex__col{padding:16px 18px 18px}
.shellex__col + .shellex__col{border-left:1px solid var(--line)}
.shellex__col h4{
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px;
}
.shellex__col--in h4{color:#3f7d63}
.shellex__col--out h4{color:#a8543c}
.shellex__col ul{list-style:none;margin:0;padding:0}
.shellex__col li{
  position:relative;padding-left:18px;font-size:13.5px;line-height:1.5;
  color:var(--body);margin-bottom:7px;
}
.shellex__col li::before{position:absolute;left:0;top:0;font-weight:700;font-size:13px}
.shellex__col--in li::before{content:"+";color:#3f7d63}
.shellex__col--out li::before{content:"\2212";color:#a8543c}
.shellex__foot{
  padding:13px 18px;border-top:1px solid var(--line);background:var(--cream);
  font-size:13px;line-height:1.55;color:var(--slate);
}
.shellex__foot b{font-weight:600;color:var(--ink)}
@media (max-width:640px){
  .shellex__cols{grid-template-columns:1fr}
  .shellex__col + .shellex__col{border-left:0;border-top:1px solid var(--line)}
}

/* ── sources ────────────────────────────────────────────────────
   Named, linked, and dated. The category's habit is to gesture at
   "compliance" without naming a document; this is the opposite. */
.sources{margin-top:46px;padding-top:26px;border-top:2px solid var(--ink)}
.sources h2{font-size:13px !important;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px !important}
.sources > p{font-size:13.5px;color:var(--muted);margin:0 0 4px;max-width:62ch}
.source{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line)}
.source:first-of-type{border-top:1px solid var(--line);margin-top:16px}
.source__who{font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--ink)}
.source__what{grid-column:1;font-size:14px;color:var(--body);line-height:1.55;margin:0}
.source__go{
  grid-row:1;grid-column:2;font-size:13px;color:var(--slate);white-space:nowrap;
  text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;
}
.source__go:hover{color:var(--ink);border-color:var(--ink)}
@media (max-width:560px){
  .source{grid-template-columns:1fr}
  .source__go{grid-row:auto;grid-column:1;justify-self:start;margin-top:4px}
}

/* Mobile menu links need a thumb-sized target, not a reading-sized one. */
@media (max-width:980px){
  .navdrop__list > a{padding:9px 0 9px 14px}
  .nav > a{padding:12px 0;border-bottom:1px solid var(--line);width:100%}
}

/* ── brand lockup ───────────────────────────────────────────────
   Two files rather than one recoloured by CSS: the wordmark is
   two-tone, so a filter would flatten the tan against the navy. */
/* Two files rather than one recoloured by CSS, because the wordmark is
   two-tone and a filter would flatten the tan into the navy. The inherited
   rules set the swap at a specificity this has to beat, so both states are
   declared here rather than half-inherited. */
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand picture{display:block}
.brand__logo{height:34px;width:auto;max-width:none}
.site-header .brand__logo--light{display:block}
.site-header .brand__logo--dark{display:none}
.site-header.is-solid .brand__logo--light{display:none}
.site-header.is-solid .brand__logo--dark{display:block}
@media (max-width:1100px){.brand__logo{height:30px}}
@media (max-width:420px){.brand__logo{height:26px}}

.footer__logo{display:inline-block;max-width:290px}
.footer__logo img{width:100%;height:auto;display:block}

/* ── trust block ────────────────────────────────────────────────
   Who wrote it, when it was last checked, and what it is not. The
   category is full of unattributed, undated compliance claims. */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--line);margin-top:40px}
.trust__cell{padding:18px 24px 20px;border-left:1px solid var(--line)}
.trust__cell:first-child{border-left:0;padding-left:0}
.trust__k{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.trust__v{font-size:14px;line-height:1.55;color:var(--slate);margin:0}
.trust__v b{font-weight:600;color:var(--ink)}
@media (max-width:760px){
  .trust{grid-template-columns:1fr}
  .trust__cell{border-left:0;border-top:1px solid var(--line);padding:16px 0}
  .trust__cell:first-child{border-top:0}
}

/* Room schedule table on the sub-pages. */
.rooms{width:100%;border-collapse:collapse;margin-top:26px;font-size:15px}
.rooms caption{text-align:left;font-size:13px;color:var(--muted);padding-bottom:12px}
.rooms th{text-align:left;font-family:var(--display);font-weight:600;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  padding:0 18px 10px 0;border-bottom:2px solid var(--ink)}
.rooms td{padding:13px 18px 13px 0;border-bottom:1px solid var(--line);
  color:var(--body);line-height:1.55;vertical-align:top}
.rooms td:first-child{font-family:var(--display);font-weight:600;color:var(--ink);white-space:nowrap}
.rooms td:nth-child(2){font-variant-numeric:tabular-nums;white-space:nowrap}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:640px){.rooms{font-size:14px;min-width:520px}}

/* Web3Forms honeypot. Off-screen rather than display:none, because some bots
   skip anything that is not rendered. Never focusable. */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.form__status{margin-top:14px;font-size:14.5px;line-height:1.55}
.form__status--ok{color:#3f7d63}
.form__status--err{color:#a8543c}

/* Between the 980px burger breakpoint and about 1150px the wordmark, six nav
   items and two buttons do not fit, and the header pushed the page 125px wide.
   Drop the secondary button first, then go to the burger earlier. */
@media (min-width:981px) and (max-width:1249px){
  .header-actions .btn--ghost{display:none}
}
@media (min-width:981px) and (max-width:1120px){
  .nav{gap:18px}
  .navdrop__top,.nav > a{font-size:13px}
  .brand__logo{height:28px}
}
/* ── mobile navigation ──────────────────────────────────────────
   Previously the menu expanded the sticky header itself. Open one
   dropdown at 375px and the header grew to 974px inside an 812px
   viewport, pushing four nav items off-screen with no way to scroll
   to them. It is now a fixed panel that scrolls on its own. */
@media (min-width:981px) and (max-width:1249px){
  .header-actions .btn--ghost{display:none}
}
@media (max-width:1120px){
  .burger{display:block}

  .nav{
    display:none;
    position:fixed;
    left:0; right:0;
    top:var(--nav-top,77px);
    bottom:0;
    z-index:80;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
    padding:6px var(--gutter) calc(40px + env(safe-area-inset-bottom,0px));
    background:var(--paper);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    text-transform:none;
    letter-spacing:0;
    font-size:16px;
  }
  .nav.is-open{display:flex}

  .nav > a{
    padding:15px 0;
    border-bottom:1px solid var(--line);
    width:100%;
    font-size:16px;
    letter-spacing:0;
    text-transform:none;
    color:var(--ink);
    opacity:1;
  }
  .nav > a::after{display:none}

  .navdrop{width:100%}
  .navdrop__btn{
    width:100%;
    justify-content:space-between;
    padding:15px 0;
    border-bottom:1px solid var(--line);
    color:var(--ink);
  }
  .navdrop__top{font-size:16px;letter-spacing:0;text-transform:none}
  .navdrop__top::after{display:none}
  .navdrop__btn i{width:8px;height:8px;opacity:.5}

  .navdrop__panel{
    position:static;opacity:1;visibility:visible;transform:none;display:none;
    background:none;border:0;box-shadow:none;
  }
  .navdrop[data-open="true"] .navdrop__panel{display:block}
  .navdrop:hover .navdrop__panel{display:none}
  .navdrop[data-open="true"]:hover .navdrop__panel{display:block}
  .navdrop__inner{grid-template-columns:1fr;gap:0;padding:4px 0 12px;width:100%;max-width:none}
  .navdrop__list > a{
    font-size:15.5px;line-height:1.5;padding:11px 0 11px 16px;
    border-left:2px solid var(--line);width:100%;font-family:var(--sans);font-weight:400;
  }
  .navdrop__list > a:hover{opacity:1;border-left-color:var(--blue-dk)}
  .navdrop__all{margin:10px 0 4px 16px;font-size:14px}
  .navdrop__media{display:none}

  /* The two header buttons repeat at the foot of the panel, because at the
     top of a scrolling menu they are behind the thing you just opened. */
  .nav__cta{display:flex;flex-direction:column;gap:10px;margin-top:26px}
  .nav__cta .btn{width:100%;justify-content:center}
}
@media (min-width:1121px){
  .nav__cta{display:none}
}

/* Burger becomes a cross while the panel is open. */
.burger span{transition:transform .25s var(--ease),opacity .2s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}

/* Page behind the panel must not scroll. */
body.is-nav-open{overflow:hidden}

/* ── shell examples in the estimator ────────────────────────────
   The single most misunderstood input on the page, so it explains
   itself as you change it rather than in a paragraph underneath. */
.shellex{margin-top:18px;border:1px solid var(--line);background:#fff;border-radius:3px}
.shellex__head{
  padding:13px 18px;border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.shellex__cols{display:grid;grid-template-columns:1fr 1fr;gap:0}
.shellex__col{padding:16px 18px 18px}
.shellex__col + .shellex__col{border-left:1px solid var(--line)}
.shellex__col h4{
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px;
}
.shellex__col--in h4{color:#3f7d63}
.shellex__col--out h4{color:#a8543c}
.shellex__col ul{list-style:none;margin:0;padding:0}
.shellex__col li{
  position:relative;padding-left:18px;font-size:13.5px;line-height:1.5;
  color:var(--body);margin-bottom:7px;
}
.shellex__col li::before{position:absolute;left:0;top:0;font-weight:700;font-size:13px}
.shellex__col--in li::before{content:"+";color:#3f7d63}
.shellex__col--out li::before{content:"\2212";color:#a8543c}
.shellex__foot{
  padding:13px 18px;border-top:1px solid var(--line);background:var(--cream);
  font-size:13px;line-height:1.55;color:var(--slate);
}
.shellex__foot b{font-weight:600;color:var(--ink)}
@media (max-width:640px){
  .shellex__cols{grid-template-columns:1fr}
  .shellex__col + .shellex__col{border-left:0;border-top:1px solid var(--line)}
}

/* ── sources ────────────────────────────────────────────────────
   Named, linked, and dated. The category's habit is to gesture at
   "compliance" without naming a document; this is the opposite. */
.sources{margin-top:46px;padding-top:26px;border-top:2px solid var(--ink)}
.sources h2{font-size:13px !important;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px !important}
.sources > p{font-size:13.5px;color:var(--muted);margin:0 0 4px;max-width:62ch}
.source{display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line)}
.source:first-of-type{border-top:1px solid var(--line);margin-top:16px}
.source__who{font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--ink)}
.source__what{grid-column:1;font-size:14px;color:var(--body);line-height:1.55;margin:0}
.source__go{
  grid-row:1;grid-column:2;font-size:13px;color:var(--slate);white-space:nowrap;
  text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;
}
.source__go:hover{color:var(--ink);border-color:var(--ink)}
@media (max-width:560px){
  .source{grid-template-columns:1fr}
  .source__go{grid-row:auto;grid-column:1;justify-self:start;margin-top:4px}
}

/* Mobile menu links need a thumb-sized target, not a reading-sized one. */
@media (max-width:980px){
  .navdrop__list > a{padding:9px 0 9px 14px}
  .nav > a{padding:12px 0;border-bottom:1px solid var(--line);width:100%}
}

/* ── brand lockup ───────────────────────────────────────────────
   Two files rather than one recoloured by CSS: the wordmark is
   two-tone, so a filter would flatten the tan against the navy. */
/* Two files rather than one recoloured by CSS, because the wordmark is
   two-tone and a filter would flatten the tan into the navy. The inherited
   rules set the swap at a specificity this has to beat, so both states are
   declared here rather than half-inherited. */
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand picture{display:block}
.brand__logo{height:34px;width:auto;max-width:none}
.site-header .brand__logo--light{display:block}
.site-header .brand__logo--dark{display:none}
.site-header.is-solid .brand__logo--light{display:none}
.site-header.is-solid .brand__logo--dark{display:block}
@media (max-width:1100px){.brand__logo{height:30px}}
@media (max-width:420px){.brand__logo{height:26px}}

.footer__logo{display:inline-block;max-width:290px}
.footer__logo img{width:100%;height:auto;display:block}

/* ── trust block ────────────────────────────────────────────────
   Who wrote it, when it was last checked, and what it is not. The
   category is full of unattributed, undated compliance claims. */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--line);margin-top:40px}
.trust__cell{padding:18px 24px 20px;border-left:1px solid var(--line)}
.trust__cell:first-child{border-left:0;padding-left:0}
.trust__k{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.trust__v{font-size:14px;line-height:1.55;color:var(--slate);margin:0}
.trust__v b{font-weight:600;color:var(--ink)}
@media (max-width:760px){
  .trust{grid-template-columns:1fr}
  .trust__cell{border-left:0;border-top:1px solid var(--line);padding:16px 0}
  .trust__cell:first-child{border-top:0}
}

/* Room schedule table on the sub-pages. */
.rooms{width:100%;border-collapse:collapse;margin-top:26px;font-size:15px}
.rooms caption{text-align:left;font-size:13px;color:var(--muted);padding-bottom:12px}
.rooms th{text-align:left;font-family:var(--display);font-weight:600;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  padding:0 18px 10px 0;border-bottom:2px solid var(--ink)}
.rooms td{padding:13px 18px 13px 0;border-bottom:1px solid var(--line);
  color:var(--body);line-height:1.55;vertical-align:top}
.rooms td:first-child{font-family:var(--display);font-weight:600;color:var(--ink);white-space:nowrap}
.rooms td:nth-child(2){font-variant-numeric:tabular-nums;white-space:nowrap}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:640px){.rooms{font-size:14px;min-width:520px}}

/* Web3Forms honeypot. Off-screen rather than display:none, because some bots
   skip anything that is not rendered. Never focusable. */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.form__status{margin-top:14px;font-size:14.5px;line-height:1.55}
.form__status--ok{color:#3f7d63}
.form__status--err{color:#a8543c}

/* Between the 980px burger breakpoint and about 1150px the wordmark, six nav
   items and two buttons do not fit, and the header pushed the page 125px wide.
   Drop the secondary button first, then go to the burger earlier. */
@media (min-width:981px) and (max-width:1249px){
  .header-actions .btn--ghost{display:none}
}
@media (min-width:981px) and (max-width:1120px){
  .nav{gap:18px}
  .navdrop__top,.nav > a{font-size:13px}
  .brand__logo{height:28px}
}
@media (max-width:1120px){
  .nav{display:none}
  .burger{display:block}
  .navdrop{width:100%}
  .navdrop__btn{width:100%;justify-content:space-between;padding:12px 0;
    border-bottom:1px solid var(--line)}
  .navdrop__panel{position:static;opacity:1;visibility:visible;transform:none;display:none;
    background:none;border:0;box-shadow:none}
  .navdrop[data-open="true"] .navdrop__panel{display:block}
  .navdrop:hover .navdrop__panel{display:none}
  .navdrop[data-open="true"]:hover .navdrop__panel{display:block}
  .navdrop__inner{grid-template-columns:1fr;gap:0;padding:10px 0 16px;width:100%;max-width:none}
  .navdrop__list > a{font-size:17px;line-height:1.55;padding:9px 0 9px 14px;
    border-left:1px solid var(--line);width:100%}
  .navdrop__all{margin-top:12px;margin-left:14px;font-size:14px}
  .navdrop__media{display:none}
  .nav > a{padding:12px 0;border-bottom:1px solid var(--line);width:100%}
}

/* ══════════════════════════════════════════════════════════════
   Article layout: body plus a rail carrying contents and a CTA
   ══════════════════════════════════════════════════════════════ */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 302px;gap:64px;align-items:start}
@media (max-width:1080px){
  .article-layout{grid-template-columns:1fr;gap:0}
  .article-rail{order:-1;margin-bottom:34px}
}

.article-rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
@media (max-width:1080px){.article-rail{position:static;top:auto}}

/* ── contents ─────────────────────────────────────────────── */
.toc{border:1px solid var(--line);border-radius:6px;background:#fff;overflow:hidden}
.toc__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;background:none;border:0;border-bottom:1px solid var(--line);
  font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink);
  cursor:pointer;text-align:left;
}
.toc__head i{
  width:9px;height:9px;flex:0 0 auto;
  border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(135deg) translate(-1px,-1px);opacity:.55;
  transition:transform .22s var(--ease);
}
.toc__head[aria-expanded="false"] i{transform:rotate(-45deg) translate(-2px,-2px)}
.toc__head[aria-expanded="false"] + .toc__list{display:none}

.toc__list{
  list-style:none;margin:0;padding:14px 20px 18px;max-height:min(56vh,520px);
  overflow-y:auto;overscroll-behavior:contain;counter-reset:none;
}
.toc__list li{margin:0}
.toc__list a{
  display:block;padding:7px 0;font-size:14.5px;line-height:1.45;
  color:var(--body);text-decoration:none;transition:color .16s var(--ease);
}
.toc__list a:hover{color:var(--ink)}
.toc__list a.is-current{color:var(--ink);font-weight:600}
.toc__sub a{padding-left:16px;font-size:14px;color:var(--muted)}

/* ── CTA under the contents ───────────────────────────────── */
.toc-cta{border:1px solid var(--line);border-radius:6px;background:var(--cream);padding:22px 20px}
.toc-cta__k{
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;
}
.toc-cta p{font-size:14.5px;line-height:1.6;color:var(--body);margin:0}
.toc-cta .btn{margin-top:16px}
.toc-cta .link-arrow{margin-top:12px;font-size:13.5px}

/* ── the short answer ─────────────────────────────────────── */
.shortans{
  border:1px solid var(--line);border-left:4px solid var(--ink);border-radius:6px;
  background:#fff;padding:26px 28px 24px;margin:26px 0 34px;
}
.shortans__k{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-dk);font-weight:600;margin:0 0 12px;
}
.shortans__p{font-size:17px;line-height:1.65;color:var(--slate);margin:0}
.shortans__jump{list-style:none;margin:20px 0 0;padding:0;counter-reset:jump}
.shortans__jump li{counter-increment:jump;display:flex;align-items:baseline;gap:14px;margin-top:11px}
.shortans__jump li::before{
  content:counter(jump);flex:0 0 auto;
  width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--cream);
  font-size:11.5px;font-weight:600;display:grid;place-items:center;
  font-family:var(--display);transform:translateY(2px);
}
.shortans__jump a{
  font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--ink);
  text-decoration:none;border-bottom:1px solid transparent;
}
.shortans__jump a:hover{border-bottom-color:var(--ink)}
@media (max-width:680px){.shortans{padding:22px 20px}.shortans__p{font-size:16px}}

/* Anchor targets must clear the sticky header. */
.article h2[id],.article h3[id]{scroll-margin-top:104px}

/* ══════════════════════════════════════════════════════════════
   Guides index: filter bar and grouped sections
   ══════════════════════════════════════════════════════════════ */
.chips-bar{
  display:flex;flex-wrap:wrap;gap:8px;
  padding-bottom:22px;border-bottom:2px solid var(--ink);
}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  min-height:40px;padding:9px 16px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  font-family:var(--sans);font-size:14px;color:var(--slate);cursor:pointer;
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.chip span{
  font-size:11.5px;font-weight:600;color:var(--muted);
  background:var(--cream);border-radius:999px;padding:2px 7px;min-width:22px;text-align:center;
  font-variant-numeric:tabular-nums;
}
.chip:hover{border-color:var(--blue-dk)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.chip.is-on span{background:rgba(240,239,233,.16);color:var(--cream)}
.chip:focus-visible{outline:2px solid var(--blue-dk);outline-offset:2px}

.chips-bar__count{font-size:13.5px;color:var(--muted);margin:14px 0 0}

.guide-group{margin-top:46px}
.guide-group[hidden]{display:none}
.guide-group__head{margin-bottom:24px}
.guide-group__head h2{font-size:clamp(21px,2.1vw,27px);margin:0}
.guide-group__head p{font-size:15.5px;color:var(--muted);margin:7px 0 0;max-width:62ch}

/* When a filter is on, the group headings go and it reads as one list. */
.guides-filtered .guide-group__head{display:none}
.guides-filtered .guide-group{margin-top:0}
.guides-filtered .guide-group + .guide-group .posts{margin-top:26px}

@media (max-width:680px){
  /* Seven chips wrapped to five rows at 375px and pushed the guides off the
     screen. One swipeable row instead, bled to the gutters so it reads as
     scrollable rather than cut off. */
  .chips-bar{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    gap:7px;padding-bottom:16px;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    scrollbar-width:none;
  }
  .chips-bar::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;scroll-snap-align:start;font-size:13.5px;padding:8px 13px}
}

/* Hero buttons are nowrap, and "What a clinical fitout involves" ran 329px wide
   inside a 320px viewport. Below 400px they stack full width instead. */
@media (max-width:400px){
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%;justify-content:center;white-space:normal;text-align:center}
}
.clinic-mini h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}

/* "Key points" is an H2 for document outline reasons; it should still read as a
   label rather than as a section heading. */
.keytake__h{
  font-family:var(--display);font-size:12.5px !important;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px !important;font-weight:600;
}
.coverage h3{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}

/* ── volume ─────────────────────────────────────────────────────
   The template set almost everything in caps. That suits a two-word
   clinic name and shouts across a sentence. Caps are kept for short
   labels, tags and eyebrows, where they read as a label. Anything
   carrying a sentence is now sentence case. */
.btn{text-transform:none;letter-spacing:.005em;font-size:14px}
.btn--lg{font-size:15px}
.acc__item summary{text-transform:none;letter-spacing:-.008em}
.acc__item summary span{text-transform:none}
.awards__title,.awards__title em{text-transform:none;letter-spacing:-.01em}
.cases__title,.cases__title em{text-transform:none}
.rating-pill span{text-transform:none;letter-spacing:.04em;font-size:12px}
.marquee__track span{font-size:clamp(20px,2.4vw,32px);letter-spacing:.02em;text-transform:none}
.side-tab{letter-spacing:.1em}
.field span{text-transform:none;letter-spacing:.01em;font-size:12.5px;color:var(--body)}

/* ── in-short callouts ──────────────────────────────────────────
   A summary of the section you have just started reading, sitting
   after its opening paragraph. Quiet enough to skip, distinct
   enough to skim. */
.inshort{
  margin:26px 0 30px;padding:18px 22px 18px 20px;
  background:var(--cream);border-left:3px solid var(--blue-dk);border-radius:0 5px 5px 0;
}
.inshort__k{
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  color:var(--blue-dk);margin:0 0 7px;
}
.inshort p:not(.inshort__k){
  margin:0;font-size:15.5px;line-height:1.6;color:var(--slate);
}
@media (max-width:680px){
  .inshort{padding:16px 18px;margin:22px 0 26px}
  .inshort p:not(.inshort__k){font-size:15px}
}

/* The rates table is the machine-readable version of the band cards. Figures
   right-aligned and tabular so the columns line up and a screen reader or a
   parser gets clean rows. */
.rates td:nth-child(2),.rates td:nth-child(3){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rates th[scope="row"]{font-weight:600;color:var(--ink);white-space:normal}
.rates td:last-child{color:var(--muted);font-size:14px}

/* ── glossary ───────────────────────────────────────────────── */
.gterms{border-top:2px solid var(--ink);margin:22px 0 46px}
.gterm{padding:22px 0;border-bottom:1px solid var(--line)}
.gterm h3{font-size:19px;margin:0 0 8px}
.gterm p{margin:0 0 10px;font-size:16px;line-height:1.65;color:var(--body);max-width:74ch}
.gterm .link-arrow{font-size:13.5px}
.gterm:target{background:var(--cream);padding-left:18px;border-left:3px solid var(--blue-dk)}