@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/archivo-100_900-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/archivo-100_900-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Barlow';
  font-style:italic;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/barlow-600-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow';
  font-style:italic;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/barlow-600-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/barlow-400-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/barlow-400-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/barlow-600-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/barlow-600-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/barlow-700-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/barlow-700-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/barlow-cond-600-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/barlow-cond-600-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --red:#E01B22; --red-600:#B0141A; --red-700:#8E1015;
  --purple:#5C2D91; --purple-700:#43206B;
  --ink:#14141A; --bg:#FFFFFF; --surface:#F3F2F2;
  --divider:rgba(20,20,26,.32); --hairline:rgba(20,20,26,.18);
  --dim:rgba(20,20,26,.72); --dimmer:rgba(20,20,26,.68);
  --pad:clamp(20px,4.5vw,44px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:99}
.skip-link:focus{left:0}

/* type utilities */
.kicker{margin:0 0 16px;font:600 12px/1 Archivo,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer);display:flex;align-items:center;gap:12px}
.kicker .line{width:28px;height:3px;display:block;background:var(--red)}
.kicker.on-dark{color:rgba(255,255,255,.6)}
h2.display{margin:0 0 36px;font-size:clamp(28px,4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.02}

/* buttons */
.btn{display:inline-block;text-decoration:none;font:800 15px/1 Archivo,sans-serif;letter-spacing:-.01em;padding:15px 22px;border:2px solid transparent;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;white-space:nowrap}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-600);color:#fff}
.btn-purple{background:var(--purple);color:#fff}
.btn-purple:hover{background:var(--purple-700);color:#fff}
.btn-ghost-dark{color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost-dark:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-ghost{color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--ink);color:#fff}

/* photos run in full colour */
.photo{position:relative;overflow:hidden;background:var(--surface)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo .fallback{position:absolute;inset:0;display:none;flex-direction:column;justify-content:flex-end;gap:10px;padding:20px;background:repeating-linear-gradient(-45deg,var(--surface) 0 14px,#ECEAEA 14px 28px)}
.photo .fallback::before{content:"";width:34px;height:34px;border:9px solid var(--red);border-radius:50%}
.photo .fallback span{font:600 11px/1.5 Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer)}
.photo.img-missing img{display:none}
.photo.img-missing .fallback{display:flex}

/* header */
.site-header{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding:16px var(--pad);border-bottom:2px solid var(--divider);background:#fff;position:relative;z-index:5}
.logo-svg{height:38px;width:auto;flex:none}
.nav{display:flex;flex-wrap:wrap;gap:12px 24px;margin-left:auto;align-items:center;font-size:14px;font-weight:600;white-space:nowrap}
.nav a{text-decoration:none;display:flex;align-items:center;gap:8px}
.nav a:hover{color:var(--red-600)}
.nav a .dot{width:9px;height:9px;display:block}
.nav a.is-purple:hover{color:var(--purple)}
.header-cta{display:flex;align-items:center;gap:14px;flex:none}
.header-cta .phone{text-decoration:none;font-weight:800;font-size:15px;letter-spacing:-.01em}
.header-cta .phone:hover{color:var(--red-600)}

/* hero: text left, photo right */
.hero{background:var(--ink);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:620px}
.hero .photo{min-height:100%}
.hero-inner{display:flex;flex-direction:column;justify-content:center;padding:72px var(--pad);min-width:0}
.hero-inner .kicker{color:rgba(255,255,255,.72)}
@media (max-width:880px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero .photo{order:2;height:340px}
  .hero-inner{padding:52px var(--pad) 44px}
}
.hero h1{margin:0 0 22px;font-size:clamp(40px,7vw,84px);font-weight:800;line-height:.98;letter-spacing:-.035em;color:#fff;max-width:17ch}
.hero h1 .accent{color:var(--red)}
.hero .lede{margin:0 0 30px;font-size:clamp(17px,1.9vw,22px);line-height:1.5;color:rgba(255,255,255,.82);max-width:46ch}
.hero .btn-row{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn{font-size:16px;padding:17px 26px}

/* emergency strip */
.emergency{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;padding:18px var(--pad);background:var(--ink);color:#fff}
.emergency .flag{flex:none;background:var(--red);color:#fff;font:600 11px/1 Archivo,sans-serif;letter-spacing:.2em;text-transform:uppercase;padding:8px 12px}
.emergency p{margin:0;font-size:16px;color:rgba(255,255,255,.85)}
.emergency p b{color:#fff}
.emergency a{margin-left:auto;flex:none;font-size:14px;padding:12px 18px}
@media (max-width:720px){.emergency a{margin-left:0}}

/* chooser */
.chooser{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));background:var(--divider);gap:2px}
.chooser-card{background:#fff;padding:40px var(--pad);display:flex;flex-direction:column}
.chooser-card:hover{background:var(--surface)}
.chooser-card.is-red{border-top:8px solid var(--red)}
.chooser-card.is-purple{border-top:8px solid var(--purple)}
.chooser-card .tag{align-self:flex-start;color:#fff;font:600 11px/1 Archivo,sans-serif;letter-spacing:.2em;text-transform:uppercase;padding:8px 12px}
.chooser-card.is-red .tag{background:var(--red)}
.chooser-card.is-purple .tag{background:var(--purple)}
.chooser-card h2{margin:22px 0 12px;font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.02}
.chooser-card>p{margin:0 0 22px;font-size:17px;color:var(--dim);max-width:38ch}
.chooser-card .photo{height:220px;margin-bottom:24px}
.chooser-card ul{list-style:none;padding:0;margin:0 0 26px}
.chooser-card li{padding:12px 0;border-top:1px solid var(--hairline);font-size:16px}
.chooser-card li:last-child{border-bottom:1px solid var(--hairline)}
.chooser-card .btn{margin-top:auto;align-self:flex-start}

/* facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));background:var(--ink);color:#fff}
.facts>div{padding:30px 34px}
.facts>div+div{border-left:1px solid rgba(255,255,255,.24)}
.facts b{display:block;font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1}
.facts span{display:block;margin-top:8px;font:600 11px/1.4 Archivo,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
@media (max-width:520px){.facts>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.24)}}

/* service tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--divider);margin-top:2.5rem}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.tiles{grid-template-columns:1fr}}
.tile{background:#fff;display:flex;flex-direction:column}
.tile .bar{height:8px}
.tile .photo{height:230px}
.tile-body{padding:22px 24px 28px}
.tile-body h3{margin:0 0 8px;font-size:21px;font-weight:800;letter-spacing:-.02em}
.tile-body p{margin:0;font-size:15.5px;color:rgba(20,20,26,.68);line-height:1.55}

/* part headers */
.part{background:#fff;padding:34px var(--pad);display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px}
.part.is-red{border-top:8px solid var(--red)}
.part.is-purple{border-top:8px solid var(--purple)}
.part .num{font:600 11px/1 Archivo,sans-serif;letter-spacing:.24em;text-transform:uppercase}
.part.is-red .num{color:var(--red-700)}
.part.is-purple .num{color:var(--purple-700)}
.part h2{margin:0;font-size:clamp(30px,4.6vw,56px);font-weight:800;letter-spacing:-.04em;line-height:1}
.part .aud{font-size:17px;color:rgba(20,20,26,.6)}

/* generic section */
.section{padding:52px var(--pad) 64px;background:#fff}
.section.tint{background:var(--surface);border-top:2px solid var(--divider)}
.section.tight{padding-top:0}

/* club day: photo + compact steps */
.clubday{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2px;background:var(--divider)}
.clubday .photo{min-height:100%;background:#fff}
.clubday-steps{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--divider)}
.clubday-steps>div{background:#fff;padding:22px 22px 26px}
.clubday-steps .bar{height:3px;margin-bottom:18px}
.clubday-steps .stop{font:600 11px/1 Archivo,sans-serif;letter-spacing:.18em}
.clubday-steps h3{margin:12px 0 8px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.clubday-steps p{margin:0;font-size:15.5px;color:rgba(20,20,26,.68);line-height:1.5}
@media (max-width:880px){.clubday{grid-template-columns:1fr}.clubday .photo{height:300px}}
@media (max-width:560px){.clubday-steps{grid-template-columns:1fr}}

/* steps grid */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px;background:var(--divider)}
.steps>div{background:#fff;padding:22px 22px 26px}
.steps .bar{height:3px;margin-bottom:18px}
.steps .stop{font:600 11px/1 Archivo,sans-serif;letter-spacing:.18em}
.steps h3{margin:12px 0 8px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.steps p{margin:0;font-size:15.5px;color:rgba(20,20,26,.68);line-height:1.5}
.footnote{margin:26px 0 0;font-size:15.5px;color:rgba(20,20,26,.6);max-width:78ch}

/* table */
.sports-table{width:100%;border-collapse:collapse;font-size:16px}
.sports-table th{text-align:left;font:600 11px/1 Archivo,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer);padding:0 16px 14px 0;border-bottom:2px solid var(--ink)}
.sports-table td{padding:16px 16px 16px 0;border-bottom:1px solid var(--hairline);vertical-align:top}
.sports-table td.code{font-weight:800;font-size:17px;width:34%}
.sports-table td.who{color:var(--dim)}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2px;background:var(--divider)}
.price-grid .cell{background:#fff;padding:38px 32px;display:flex;flex-direction:column}
.price-grid .cell.feature{background:var(--red);color:#fff}
.price-label{margin:0 0 14px;font:600 11px/1 Archivo,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--red-700)}
.cell.feature .price-label{color:rgba(255,255,255,.8)}
.price-big{margin:0;font-size:clamp(64px,9vw,108px);font-weight:800;letter-spacing:-.05em;line-height:.9}
.price-big sup{font-size:.4em;vertical-align:super}
.price-mid{margin:0;font-size:clamp(40px,5.4vw,64px);font-weight:800;letter-spacing:-.045em;line-height:1}
.cell p.body{margin:18px 0 0;font-size:17.5px;line-height:1.5;color:var(--dim);max-width:34ch}
.cell.feature p.body{color:rgba(255,255,255,.9);max-width:32ch}
.cell .note{margin:16px 0 0;font:600 11px/1.5 Archivo,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer)}
.price-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;background:var(--divider);margin-top:2px}
.price-detail>div{background:#fff;padding:26px 24px}
.price-detail .bar{height:3px;background:var(--red);margin-bottom:16px}
.price-detail p.h{margin:0 0 14px;font:600 11px/1 Archivo,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--red-700)}
.price-detail ul{list-style:none;padding:0;margin:0}
.price-detail li{padding:9px 0;border-top:1px solid var(--hairline);font-size:15.5px}
.price-fine{margin:22px 0 0;font-size:14.5px;color:rgba(20,20,26,.58);max-width:76ch}

/* denture pricing cells */
.dprice{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;background:var(--divider)}
.dprice>div{background:#fff;padding:30px 28px}
.dprice .bar{height:3px;background:var(--purple);margin-bottom:16px}
.dprice p.h{margin:0 0 10px;font:600 11px/1 Archivo,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--purple-700)}
.dprice p.v{margin:0 0 12px;font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1}
.dprice p.b{margin:0;font-size:16px;color:var(--dim);line-height:1.5}

/* dentures split */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:44px;align-items:start}
.split .lede-p{margin:0 0 14px;font-size:18px;color:var(--dim);line-height:1.62}
.split h2{margin:0 0 20px;font-size:clamp(28px,4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.02;max-width:24ch}
.split .photo{height:280px;margin-bottom:26px}
.split .btn-row{display:flex;gap:12px;flex-wrap:wrap}
.svc-list{list-style:none;padding:0;margin:0}
.svc-list li{border-top:2px solid var(--purple);padding:20px 0;display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:baseline}
.svc-list li:last-child{border-bottom:2px solid var(--purple)}
.svc-list b{font-size:21px;font-weight:800;letter-spacing:-.02em}
.svc-list em{font-style:normal;font:600 11px/1 Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--purple)}
.svc-list span{grid-column:1/-1;font-size:16.5px;color:var(--dim)}
.dent-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;background:var(--divider);margin-top:44px}
.dent-photos figure{margin:0;background:#fff}
.dent-photos .photo{height:300px}
.dent-photos figcaption{padding:14px 18px;font:600 11px/1.5 Archivo,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer);border-top:3px solid var(--purple)}

/* proof */
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;background:var(--divider)}
.proof-grid>div{background:#fff;padding:28px}
.proof-grid .bar{height:4px;margin:-28px -28px 22px}
.proof-grid p.h{margin:0 0 10px;font:600 10.5px/1 Archivo,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer)}
.proof-grid p.big{margin:0 0 10px;font-size:26px;font-weight:800;letter-spacing:-.025em;line-height:1.2}
.proof-grid p.b{margin:0;font-size:15.5px;color:var(--dim);line-height:1.55}
.proof-grid a{font-weight:800}

/* find us */
.find .detail{list-style:none;padding:0;margin:26px 0 30px}
.find .detail li{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--hairline);align-items:baseline}
.find .detail li:last-child{border-bottom:1px solid var(--hairline)}
.find .detail .k{font:600 11px/1 Archivo,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer)}
.find .detail .v{font-size:17px}
.find .detail .v a{text-decoration:none;border-bottom:2px solid var(--red)}
.find .photo{height:360px}

/* booking */
.booking{background:var(--ink);color:#fff;padding:64px var(--pad)}
.booking-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:44px}
.booking h2{margin:0 0 20px;font-size:clamp(28px,4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.02;color:#fff;max-width:20ch}
.booking .lede-p{margin:0 0 30px;font-size:18px;color:rgba(255,255,255,.74);line-height:1.6;max-width:44ch}
.booking dl{margin:0}
.booking dl>div{border-top:1px solid rgba(255,255,255,.24);padding:16px 0;display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:baseline}
.booking dl>div:last-child{border-bottom:1px solid rgba(255,255,255,.24)}
.booking dt{font:600 11px/1 Archivo,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.booking dd{margin:0;font-size:17px;min-width:0;overflow-wrap:anywhere}
.booking dd a{color:#fff;text-decoration:none;border-bottom:2px solid var(--red)}
.tabs{display:flex;margin-bottom:24px;border:2px solid rgba(255,255,255,.34)}
.tabs button{flex:1;padding:14px 16px;border:0;cursor:pointer;font:800 14px/1 Archivo,sans-serif;background:transparent;color:rgba(255,255,255,.7)}
.tabs button[aria-selected="true"].tab-mg{background:var(--red);color:#fff}
.tabs button[aria-selected="true"].tab-dent{background:var(--purple);color:#fff}
.form-grid{display:grid;gap:16px}
.form-2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.field label{display:block;margin-bottom:7px;color:rgba(255,255,255,.6);font:600 11px/1 Archivo,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.field input,.field textarea{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.28);color:#fff;min-height:50px;font:400 16px/1.4 Archivo,sans-serif;padding:12px 14px}
.field textarea{min-height:110px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.38)}
.form-note{margin:0;font-size:13px;color:rgba(255,255,255,.5)}
.booking .btn{justify-self:start;font-size:16px;padding:16px 24px;border:0}
.form-status{padding:14px 16px;font-size:15.5px;line-height:1.5;font-weight:600}
.form-status.ok{background:#123D1E;color:#CBEBD3;border-left:4px solid #4FA96A}
.form-status.err{background:#4A1114;color:#F5CBCD;border-left:4px solid var(--red)}

/* footer */
.site-footer{background:var(--ink);color:#fff;padding:0 var(--pad) 92px;border-top:1px solid rgba(255,255,255,.16)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:36px;padding:48px 0}
.site-footer address{font-style:normal;font-size:16px;color:rgba(255,255,255,.72);line-height:1.7}
.site-footer address a{color:#fff;text-decoration:none}
.site-footer h4{margin:0 0 16px;font:600 11px/1 Archivo,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:9px}
.site-footer h4 .dot{width:9px;height:9px;display:block}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:11px;font-size:16px;color:rgba(255,255,255,.82)}
.site-footer ul a{text-decoration:none}
.site-footer ul a:hover{color:var(--red)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.16);padding-top:22px;display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between;font:600 11px/1.5 Archivo,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.44)}

/* sticky mobile call bar */
.call-bar{display:none}
@media (max-width:720px){
  .call-bar{position:fixed;bottom:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--divider);border-top:2px solid var(--ink)}
  .call-bar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 10px;text-decoration:none;font:800 15px/1 Archivo,sans-serif}
  .call-bar .call{background:var(--red);color:#fff}
  .call-bar .book{background:var(--ink);color:#fff}
  .site-footer{padding-bottom:120px}
}
@media (max-width:720px){
  .hero{min-height:560px}
  .booking dl>div,.find .detail li{grid-template-columns:1fr;gap:4px}
  /* keep the header to one clean row: brand links only, call bar handles the phone */
  .nav a:not(.keep){display:none}
  .header-cta .phone{display:none}
  .site-header{gap:10px 16px}
}

/* multi-page additions */
.part h1{margin:0;font-size:clamp(30px,4.6vw,56px);font-weight:800;letter-spacing:-.04em;line-height:1}
.nav a[aria-current="page"]{color:var(--red);font-weight:800}
.nav a.is-purple[aria-current="page"]{color:var(--purple)}
.page-intro{max-width:70ch;margin:0 0 8px;font-size:18px;line-height:1.62;color:var(--dim)}

/* FAQ — native details/summary, no JS, keyboard accessible by default */
.faq-list{border-top:2px solid var(--ink);max-width:80ch}
.faq{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font-size:18px;font-weight:800;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;border-right:3px solid var(--red);border-bottom:3px solid var(--red);transform:translateY(-70%) rotate(45deg);transition:transform .15s ease}
.faq[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--red-600)}
.faq p{margin:0 0 22px;font-size:16.5px;line-height:1.6;color:var(--dim);max-width:70ch}

/* ============================================================
   CLIENT ROUND 1 — softer shapes, yellow CTAs, calmer hero
   ============================================================ */
:root{
  --yellow:#FFC62B; --yellow-600:#EDB100; --yellow-700:#C89400;
  --r-sm:8px; --r:14px; --r-lg:22px;
}

/* 1. logo up, hero type down, so the mark leads rather than the headline */
.logo-svg{height:clamp(46px,5.4vw,60px)}
.hero h1{font-size:clamp(29px,4vw,52px);line-height:1.04;letter-spacing:-.025em;max-width:20ch;margin-bottom:20px}
.hero .lede{font-size:clamp(16px,1.5vw,19px);max-width:50ch}
h2.display{font-size:clamp(26px,3.4vw,40px)}
.part h1{font-size:clamp(28px,4vw,46px)}

/* 2. every call to action is yellow; red and purple stay as the
      mouthguard / denture wayfinding colours only */
.btn{border-radius:999px;padding:15px 26px}
.btn-red,.btn-purple,.btn-white{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.btn-red:hover,.btn-purple:hover,.btn-white:hover{background:var(--yellow-600);color:var(--ink);border-color:var(--yellow-600)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-ghost-dark{border-color:rgba(255,255,255,.6);color:#fff}
.btn-ghost-dark:hover{background:#fff;color:var(--ink)}
.call-bar .call{background:var(--yellow);color:var(--ink)}
.call-bar a{border-radius:0}
.booking .btn{border-radius:999px}
:focus-visible{outline:3px solid var(--yellow-700);outline-offset:3px}

/* 3. round everything off */
.photo{border-radius:var(--r)}
.chooser{gap:14px;background:transparent;padding:0 var(--pad) 14px}
/* The colour band used to be an 8px border-top against 1px sides. On a 22px
   radius the two weights mitre into a visible diagonal wedge at each corner.
   It is now a clipped band inside the card, so it follows the curve cleanly. */
.chooser-card{border-radius:var(--r-lg);border:1px solid var(--hairline);
  position:relative;overflow:hidden;background:#fff;
  transition:box-shadow .24s ease, transform .24s ease, border-color .24s ease}
.chooser-card.is-red,.chooser-card.is-purple{border-top-width:1px;border-top-color:var(--hairline)}
.chooser-card::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;z-index:1}
.chooser-card.is-red::before{background:var(--red)}
.chooser-card.is-purple::before{background:var(--purple)}
.chooser-card:hover{background:#fff;border-color:rgba(20,20,26,.16);
  box-shadow:0 16px 38px rgba(20,20,26,.14), 0 3px 10px rgba(20,20,26,.06);
  transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.chooser-card:hover{transform:none}}

/* The two cards carry paragraphs of different length, so the photo and the list
   inside Dentures sat 28px higher than the ones in Mouthguards. Subgrid hands
   both cards the same six rows, each sized to the taller card, so the internals
   line up regardless of how the copy changes later. */
@supports (grid-template-rows: subgrid){
  @media (min-width:760px){
    .chooser{grid-template-columns:1fr 1fr;grid-template-rows:repeat(6,auto);
      column-gap:14px;row-gap:0}
    .chooser-card{display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:0}
    .chooser-card>*{align-self:start}
    .chooser-card .btn{align-self:end;justify-self:start;margin-top:0}
  }
}
/* the numbers band now sits inside a titled dark section */
.facts-band{background:var(--ink);color:#fff;padding:clamp(36px,5vw,56px) var(--pad) clamp(32px,4.5vw,48px)}
.facts-title{margin:0 0 26px;font-size:clamp(21px,2.7vw,31px);font-weight:800;
  letter-spacing:-.03em;line-height:1.08;color:#fff;max-width:24ch}
.facts{background:transparent;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.facts>div{padding:24px 26px;border:1px solid rgba(255,255,255,.22);border-radius:var(--r)}
.facts>div+div{border-left:1px solid rgba(255,255,255,.22)}
@media (max-width:520px){.facts>div+div{border-top:1px solid rgba(255,255,255,.22)}}
.tiles{gap:14px;background:transparent}
.tile{border-radius:var(--r-lg);border:1px solid var(--hairline);overflow:hidden}
.emergency{border-radius:0}
.emergency .flag{border-radius:999px}
.price-grid,.price-detail,.dprice,.proof-grid,.clubday,.clubday-steps,.steps{gap:14px;background:transparent}
.price-grid .cell,.price-detail>div,.dprice>div,.proof-grid>div,.clubday-steps>div,.steps>div{border-radius:var(--r);border:1px solid var(--hairline)}
.price-grid .cell.feature{border-color:var(--red)}
.proof-grid .bar{border-radius:var(--r) var(--r) 0 0}
.field input,.field textarea{border-radius:var(--r-sm)}
.form-status{border-radius:var(--r-sm)}
.faq-list{border-radius:var(--r);border:1px solid var(--hairline);border-top:2px solid var(--ink);padding:0 20px;background:#fff}
.faq:last-child{border-bottom:0}
.sports-table td.code{border-radius:0}
.dent-photos{gap:14px;background:transparent}
.dent-photos figure{border-radius:var(--r);overflow:hidden;border:1px solid var(--hairline)}
.tabs{border-radius:999px;overflow:hidden}
.site-footer,.booking{border-radius:0}
@media (max-width:520px){
  .facts>div{border-radius:var(--r)!important}
}

/* 4. service tiles: 3D tilt, product parallax, description accordion
   ------------------------------------------------------------------
   Transform on the card and on the product is written by the rAF loop in
   site.js, so neither carries a CSS transform transition — the two would
   fight. Only filter and box-shadow transition here. */
.tile-media{position:relative;height:206px;display:grid;place-items:center;overflow:hidden;background:var(--surface)}
.tile-media picture{display:block;line-height:0}
.tile-ico{width:78px;height:78px;color:var(--ink)}
.tile.is-red .tile-ico{color:var(--red)}
.tile.is-purple .tile-ico{color:var(--purple)}

/* the supplied 3D renders carry their own detail, so they run larger */
img.tile-ico{width:clamp(112px,13vw,142px);height:auto;aspect-ratio:1;object-fit:contain;
  will-change:transform;
  filter:drop-shadow(0 2px 3px rgba(17,17,20,.15));
  transition:filter .3s cubic-bezier(.22,1,.36,1)}

.tile{cursor:default;will-change:transform;transform-style:preserve-3d;
  transition:box-shadow .4s cubic-bezier(.22,1,.36,1)}
.tile:focus-visible{outline:3px solid var(--yellow-700);outline-offset:3px}

/* hover / focus / tapped all resolve to the same visual state */
.tile:hover,.tile:focus-visible,.tile.is-active{
  box-shadow:0 24px 48px -18px rgba(17,17,20,.28)}
.tile:hover img.tile-ico,
.tile:focus-visible img.tile-ico,
.tile.is-active img.tile-ico{filter:drop-shadow(0 16px 14px rgba(17,17,20,.22))}

/* description accordion, under the title rather than over the product */
.tile-reveal{position:static;transform:none;background:transparent;color:inherit;
  display:block;padding:0;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .45s cubic-bezier(.22,1,.36,1),
             opacity .45s cubic-bezier(.22,1,.36,1)}
.tile:hover .tile-reveal,
.tile:focus-visible .tile-reveal,
.tile.is-active .tile-reveal{max-height:14rem;opacity:1}
.tile-reveal p{margin:10px 0 0;font-size:15.5px;line-height:1.55;color:var(--dim)}

@media (prefers-reduced-motion:reduce){
  /* no tilt, no parallax, no float — the shadow and the copy appear at once */
  .tile,img.tile-ico,.tile-reveal{transition:none!important}
  .tile{will-change:auto;transform:none!important}
  img.tile-ico{transform:none!important}
}

/* footer headings moved h4 -> h3 for heading order; restore their look */
.site-footer h3{margin:0 0 16px;font:600 11px/1 Archivo,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:9px}
.site-footer h3 .dot{width:9px;height:9px;display:block;border-radius:2px}

/* hero photo inset so the rounded corner actually reads */
.hero{padding:14px;gap:14px}
.hero .photo{border-radius:var(--r-lg)}
.hero-inner{padding:clamp(44px,5vw,68px) clamp(18px,2.6vw,40px)}
@media (max-width:880px){
  .hero{padding:12px;gap:12px}
  .hero-inner{padding:34px 14px 30px}
}

/* ============================================================
   HERO: meme poster left, brand copy right
   ============================================================ */
:root{
  --ink-2:#1C1C24;
  --paper2:#FFFDF7;
  --muted:#9A9AA6;
  /* Brand red on ink measures about 2.8:1, under AA even for large text.
     This lifted tint is used only for text on dark; #E01B22 still does all
     the solid decorative work. */
  --red-on-dark:#FF4147;
}
.hero2{background:var(--ink);color:var(--paper2);position:relative;overflow:hidden;
  padding:clamp(38px,5vw,74px) var(--pad) clamp(34px,4.5vw,64px);
  font-family:Barlow,system-ui,sans-serif}
.hero2::before{content:"";position:absolute;inset:auto;left:-6%;top:-14%;
  width:min(760px,70vw);height:min(760px,70vw);pointer-events:none;
  background:radial-gradient(circle,rgba(92,45,145,.55) 0%,rgba(92,45,145,.22) 42%,transparent 68%)}
.hero2-grid{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,4vw,64px);align-items:center;max-width:1180px;margin-inline:auto}

/* poster */
.poster{margin:0;transform:rotate(-.8deg);border-radius:10px;overflow:hidden;
  box-shadow:0 32px 64px -20px rgba(0,0,0,.72), 0 8px 22px rgba(0,0,0,.4);
  outline:1px solid rgba(255,253,247,.16);outline-offset:-1px;background:var(--ink-2)}
.poster picture,.poster img{display:block;width:100%;height:auto}
.poster-cap{background:var(--purple);color:var(--paper2);text-align:center;
  padding:clamp(14px,1.7vw,22px) clamp(14px,2vw,26px);display:grid;gap:6px}
.cap-1{font-family:Archivo,system-ui,sans-serif;font-weight:900;text-transform:uppercase;
  font-size:clamp(15px,1.5vw,20px);letter-spacing:-.01em;line-height:1.1}
.cap-2{font-family:Barlow,system-ui,sans-serif;font-weight:400;
  font-size:clamp(13.5px,1.15vw,16px);line-height:1.4;color:rgba(255,253,247,.9)}
.cap-2 em{font-style:italic;font-weight:600;color:var(--yellow)}

/* right column */
.hero2-copy{min-width:0}
.hero2-eyebrow{font-family:'Barlow Condensed',Barlow,system-ui,sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.3em;font-size:13px;color:var(--muted);
  margin:0 0 18px;display:flex;align-items:center;gap:12px}
.hero2-eyebrow::before{content:"";width:26px;height:2px;background:var(--red);flex:none}
.hero2-h1{font-family:Archivo,system-ui,sans-serif;font-weight:900;text-transform:uppercase;
  line-height:.94;letter-spacing:-.034em;margin:0 0 20px;
  font-size:clamp(34px,5.4vw,68px)}
.hero2-h1 .h1-a,.hero2-h1 .h1-b{display:block}
.hero2-h1 .h1-a{color:var(--paper2)}
.hero2-h1 .h1-b{color:var(--red-on-dark)}
.hero2-p{font-family:Barlow,system-ui,sans-serif;font-size:clamp(16px,1.35vw,18.5px);
  line-height:1.62;color:rgba(255,253,247,.82);max-width:52ch;margin:0 0 28px}
.hero2-p strong{font-weight:700;color:var(--paper2)}
.hero2-cta{display:flex;flex-wrap:wrap;gap:12px}
.btn2{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  font-family:Barlow,system-ui,sans-serif;font-weight:700;font-size:16px;
  padding:15px 26px;border-radius:999px;border:2px solid transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn2-solid{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.btn2-solid:hover{background:var(--yellow-600);border-color:var(--yellow-600);color:var(--ink)}
.btn2-ghost{color:var(--paper2);border-color:rgba(255,253,247,.5)}
.btn2-ghost:hover{background:var(--paper2);color:var(--ink);border-color:var(--paper2)}
.hero2 a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* proof strip: three cards, no leading dots */
/* full-bleed band, content held to the same 1180px measure as the hero */
.proof-strip{list-style:none;margin:0;background:var(--ink-2);display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  padding-block:clamp(20px,2.6vw,30px);
  padding-inline:max(var(--pad),calc((100% - 1180px) / 2))}
.proof-strip li{display:flex;align-items:center;justify-content:center;text-align:center;
  padding:18px 22px;border:1px solid rgba(255,253,247,.18);border-radius:var(--r);
  background:rgba(255,253,247,.035);
  font-family:'Barlow Condensed',Barlow,system-ui,sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;font-size:13.5px;color:#D8D8DE}

/* motion: poster rises, then the copy staggers in behind it */
@keyframes posterRise{from{opacity:0;transform:translateY(24px) rotate(-.8deg)}
                      to{opacity:1;transform:translateY(0) rotate(-.8deg)}}
@keyframes copyRise{from{opacity:0;transform:translateY(24px)}
                    to{opacity:1;transform:none}}
.hero2 [data-rise]{opacity:0;animation-duration:.9s;animation-fill-mode:forwards;
  animation-timing-function:cubic-bezier(.16,1,.3,1)}
.poster[data-rise]{animation-name:posterRise}
.hero2-copy [data-rise]{animation-name:copyRise;animation-duration:.62s}
.hero2-copy [data-rise="1"]{animation-delay:.90s}
.hero2-copy [data-rise="2"]{animation-delay:1.02s}
.hero2-copy [data-rise="3"]{animation-delay:1.14s}
.hero2-copy [data-rise="4"]{animation-delay:1.26s}

@media (max-width:900px){
  .hero2-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
  .hero2-copy{max-width:640px}
  .hero2-eyebrow{justify-content:center}
  .hero2-p{margin-inline:auto}
  .hero2-cta{justify-content:center}
  .poster{max-width:520px}
}
@media (max-width:360px){
  .hero2{padding-inline:16px}
  .btn2{width:100%}
  .hero2-h1{font-size:clamp(28px,8.5vw,34px)}
}
/* Several auto-fit grids declare a min track wider than a 320px viewport, which
   forced the page to scroll sideways on the smallest phones. min() lets the
   track shrink to the container instead of overflowing it. */
.chooser{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.price-grid{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.split{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.booking-grid{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.price-detail,.dprice,.proof-grid,.dent-photos{
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}

/* Navigation collapses to a compact row below 1080 and the header phone number
   drops, leaving the logo, the links and the booking button. Hiding the links
   outright would leave 720-1080px with no navigation at all, since the sticky
   call bar only appears at 720. */
@media (max-width:1080px){
  .site-header{gap:10px 18px}
  .nav{gap:8px 16px;font-size:13px}
  .nav a .dot{width:7px;height:7px}
  .header-cta .phone{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero2 [data-rise]{opacity:1;animation:none}
  .poster{transform:rotate(-.8deg)}
}

/* ============================================================
   HERO, LIGHT CLINICAL PASS
   Colour is now under five percent of the visible surface. Everything else
   is white, near white and ink.
   ============================================================ */
:root{
  --body:#53535F;
  /* Spec token was #8A8A95, which measures 3.41:1 on --wash at the 13px the
     eyebrow uses, under AA. Darkened to the lightest grey that clears 4.5:1. */
  --muted:#6E6E7A;
  --line:#E4E4E9;
  --white:#FFFFFF;
  --wash:#F7F7F8;
}
body{background:var(--white)}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px}

/* navigation */
.site-header{background:var(--white);border-bottom:1px solid var(--line)}
.nav a{font-family:Barlow,system-ui,sans-serif;font-weight:500;font-size:15.5px;color:var(--body)}
.nav a:hover,.nav a[aria-current="page"],
.nav a.is-purple:hover,.nav a.is-purple[aria-current="page"]{color:var(--ink)}
.header-cta .phone{font-family:Archivo,system-ui,sans-serif;font-weight:700;
  font-size:15.5px;color:var(--ink)}
.header-cta .btn{font-family:Archivo,system-ui,sans-serif;font-weight:700;
  font-size:15px;border-radius:6px}

/* hero surface */
/* The top padding was the same weight as the bottom, which under a white
   sticky header read as a dead band before the content started. */
.hero2{background:linear-gradient(180deg,var(--white) 0%,var(--wash) 100%);
  color:var(--ink);border:0;
  padding:clamp(24px,3.1vw,44px) clamp(20px,5vw,72px) clamp(40px,5vw,72px)}
.hero2::before{display:none}
.hero2-grid{gap:clamp(30px,5vw,76px)}

/* poster becomes a white card, square to the grid */
.poster{transform:none;background:var(--white);border:1px solid var(--line);
  border-radius:12px;outline:0;
  box-shadow:0 2px 4px rgba(20,20,26,.03), 0 12px 28px rgba(20,20,26,.06)}
.poster-cap{background:var(--white);border-top:1px solid var(--line);color:var(--ink);
  padding:clamp(16px,1.9vw,24px) clamp(16px,2vw,26px);gap:8px}
.poster-cap::before{content:"";display:block;width:34px;height:2px;
  background:var(--red);margin:0 auto 4px}
.cap-1{font-family:Archivo,system-ui,sans-serif;font-weight:700;text-transform:none;
  color:var(--ink);font-size:clamp(17px,1.7vw,22px);line-height:1.25;letter-spacing:-.01em}
.cap-2{color:var(--body);font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.5}
.cap-2 em{font-style:normal;font-weight:600;color:var(--red)}

/* right column */
.hero2-eyebrow{font-family:'Barlow Condensed',Barlow,system-ui,sans-serif;font-weight:600;
  font-size:clamp(11.5px,1.15vw,13px);letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted)}
.hero2-eyebrow::before{background:var(--red)}
.hero2-h1{font-family:Archivo,system-ui,sans-serif;font-weight:700;text-transform:none;
  font-size:clamp(2.15rem,4.1vw,3.5rem);line-height:1.06;letter-spacing:-.028em}
.hero2-h1 .h1-a{color:var(--ink)}
.hero2-h1 .h1-b{color:var(--red)}
.hero2-p{color:var(--body);font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.68;max-width:50ch}
.hero2-p strong{color:var(--ink);font-weight:700}

/* buttons: 6px radius, matched 1px borders so both sit the same height */
.btn2{font-family:Archivo,system-ui,sans-serif;font-weight:700;font-size:16.5px;
  border-radius:6px;border:1px solid transparent;padding:16px 26px}
.btn2-solid{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.btn2-solid:hover{background:#F2B916;border-color:#F2B916;color:var(--ink)}
.btn2-ghost{background:var(--white);color:var(--ink);border-color:var(--line)}
.btn2-ghost:hover{background:var(--white);color:var(--ink);border-color:#B9B9C2}
.hero2 a:focus-visible{outline:3px solid var(--purple);outline-offset:3px}

/* The three claims now sit inside the hero, under the buttons. As bubbles in
   their own band they read as a second section break, so they are plain text
   separated by hairlines and sized to the column. */
.proof-strip{display:grid;gap:7px;list-style:none;margin:24px 0 0;padding:18px 0 0;
  background:none;border:0;border-top:1px solid var(--line);max-width:44ch;
  font-family:'Barlow Condensed',Barlow,system-ui,sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;font-size:clamp(11px,1.05vw,12.5px);
  line-height:1.25;color:var(--body)}
.proof-strip li{display:block;background:none;border:0;padding:0;border-radius:0;
  color:inherit;text-align:left}
@media (max-width:900px){
  .proof-strip{justify-content:center;margin-inline:auto;text-align:center}
  .proof-strip li{text-align:center}
}

/* ============================================================
   HEADER: seamless at the top, frosted once the page moves
   ============================================================ */
.site-header{position:sticky;top:0;z-index:100;background:var(--white);
  padding-block:20px;
  /* transparent rather than absent, so the hairline can fade in without the
     header changing height and shifting the page */
  border-bottom:1px solid transparent;box-shadow:0 0 0 0 rgba(17,17,20,0);
  transition:background .3s ease, border-color .3s ease,
             box-shadow .3s ease, padding .3s ease}
.site-header.is-scrolled{background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom-color:#E5E5EA;
  box-shadow:0 6px 20px -10px rgba(17,17,20,.16);
  padding-block:14px}
/* the sticky header would otherwise sit over anything reached by an anchor */
main [id]{scroll-margin-top:clamp(76px,9vw,104px)}
@media (prefers-reduced-motion:reduce){.site-header{transition:none}}
@media (max-width:767px){
  /* blurring a scrolling backdrop is costly on mid-range Android; 96% white
     reads the same and keeps the scroll smooth */
  .site-header.is-scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;
    background:rgba(255,255,255,.96)}
}

/* service area groups */
.area-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
.area-grid > *{align-content:start}
.area-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.area-card h3{margin:0 0 8px;font-family:Archivo,system-ui,sans-serif;font-weight:700;
  font-size:17px;letter-spacing:-.01em;color:var(--ink)}
.area-card p{margin:0;font-size:15.5px;line-height:1.6;color:var(--body)}

/* roundel, top right of the hero, half again the size of the header mark.
   The circle sits dead centre of the viewBox, so a 50% origin turns it on its
   own axis. It rotates once every 24s, slow enough to read as drift. */
.hero2-mark{position:absolute;top:clamp(18px,2.4vw,34px);right:clamp(20px,5vw,72px);
  height:clamp(69px,8.1vw,90px);width:auto;pointer-events:none;z-index:1;
  transform-origin:50% 50%;will-change:transform;
  animation:markSpin 24s linear infinite}
@keyframes markSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* The eyebrow and headline sit at the mark's height. Below 1200 the copy
   column is narrow enough that they run underneath it, and the tightened hero
   padding leaves no vertical room to lift it clear, so the mark only shows
   where there is genuinely space. The eyebrow is also held short of its
   footprint at those widths. */
@media (min-width:1200px){
  .hero2-eyebrow{max-width:calc(100% - clamp(150px,12vw,200px))}
}
@media (prefers-reduced-motion:reduce){.hero2-mark{animation:none;will-change:auto}}
@media (max-width:1199px){.hero2-mark{display:none}}

/* motion: one 12px rise and fade, 700ms, 100ms apart, no scale or overshoot */
@keyframes riseLight{from{opacity:0;transform:translateY(12px)}
                     to{opacity:1;transform:none}}
.hero2 [data-rise]{animation-name:riseLight;animation-duration:.7s;
  animation-timing-function:cubic-bezier(0,0,.2,1)}
.poster[data-rise]{animation-name:riseLight;animation-delay:0s}
.hero2-copy [data-rise]{animation-name:riseLight;animation-duration:.7s}
.hero2-copy [data-rise="1"]{animation-delay:.10s}
.hero2-copy [data-rise="2"]{animation-delay:.20s}
.hero2-copy [data-rise="3"]{animation-delay:.30s}
.hero2-copy [data-rise="4"]{animation-delay:.40s}
.hero2-copy [data-rise="5"]{animation-delay:.50s}
@media (prefers-reduced-motion:reduce){
  .hero2 [data-rise]{opacity:1;animation:none;transform:none}
  .poster{transform:none}
}

/* ============================================================
   CHOOSER: flat and flush at rest, lifts into a card on hover
   ============================================================ */
.chooser{padding:0;gap:0;column-gap:0;row-gap:0;
  /* one duration and one curve for everything that moves in this section, so
     the card, the colour band and the pill arrive together */
  --chooser-dur:.34s;
  --chooser-ease:cubic-bezier(.33,.72,.24,1)}
.chooser-card{border:0;border-radius:0;background:var(--white);position:relative;z-index:0;
  /* the shorthand replaces the earlier one wholesale, so every property that
     changes on hover has to be named here or it snaps instead of easing */
  transition:transform var(--chooser-dur) var(--chooser-ease),
             box-shadow var(--chooser-dur) var(--chooser-ease),
             border-radius var(--chooser-dur) var(--chooser-ease),
             border-color var(--chooser-dur) var(--chooser-ease),
             background-color var(--chooser-dur) var(--chooser-ease)}
/* the 220px band was cropping both photos to a letterbox. 4:3 is a frame the
   landscape partial and the portrait mouthguard pile can both live in. */
.chooser-card .photo{height:auto;aspect-ratio:4/3}
.chooser-card .photo img{display:block}
/* .chooser-card.is-red / .is-purple set a 1px top border earlier and outrank a
   plain .chooser-card rule, so it has to be cleared at the same specificity */
.chooser-card.is-red,.chooser-card.is-purple{border:0}
/* a single hairline between the two, not an outline around each */
.chooser-card + .chooser-card{border-left:1px solid var(--line)}
/* the colour bands run edge to edge, so together they span the page */
/* An 8px band cannot round a 22px corner: the arc drops 22px but the band is
   only 8px deep, so its end is a near-horizontal sliver and the antialiasing on
   that shallow slope reads as a staircase. Thickening the band on hover puts
   most of the arc inside it, which draws as a proper curve. */
.chooser-card::before{height:8px;border-radius:0;
  transition:border-radius var(--chooser-dur) var(--chooser-ease),
             height var(--chooser-dur) var(--chooser-ease)}
/* the 01/02 pills are square while the section is flush and round with it */
.chooser-card .tag{border-radius:0;
  transition:border-radius var(--chooser-dur) var(--chooser-ease)}
.chooser-card:hover{background:var(--white);z-index:2;border-radius:var(--r-lg);
  transform:translateY(-8px);
  box-shadow:0 22px 48px -14px rgba(20,20,26,.22), 0 4px 14px rgba(20,20,26,.07)}
/* the band is a child sitting on the card's corner, so it has to round in step
   or it squares off the very corner the card just rounded */
.chooser-card:hover::before{height:14px;border-radius:var(--r-lg) var(--r-lg) 0 0}
/* 999px is the idiomatic way to write a pill, but it animates wrong. A corner
   radius is clamped so two radii fit the box, so on a 27px tall strip the drawn
   radius can never exceed 13.5px. Transitioning 0 -> 999px therefore reaches the
   final shape about 2ms in and then sits still for the remaining 338ms: it snaps
   while the card eases, which is the discrepancy. 14px is a hair over the cap,
   so it draws the same fully round strip but spends 96% of the transition
   actually moving. Keep this at half the strip height if the type ever changes. */
.chooser-card:hover .tag{border-radius:14px}
.chooser-card:hover,.chooser-card:hover + .chooser-card{border-left-color:transparent}
@media (prefers-reduced-motion:reduce){.chooser-card:hover{transform:none}}
@supports (grid-template-rows: subgrid){
  @media (min-width:760px){
    .chooser{grid-template-columns:1fr 1fr;column-gap:0;row-gap:0}
  }
}

/* the team group shot, sized down to a third of the width it started at, with
   the note alongside so the photo is not stranded beside an empty half page */
.team-row{display:grid;grid-template-columns:370px minmax(0,1fr);gap:34px;align-items:start}
.team-row .footnote{margin:0}
@media (max-width:760px){.team-row{grid-template-columns:1fr;gap:22px}}
.team-shot{max-width:370px}
.team-shot .photo{aspect-ratio:16/9;border-radius:var(--r-lg)}
.team-shot .photo img{display:block}

/* kept for the four studio portraits, which the group shot replaced */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.team-grid figure{margin:0}
.team-grid .photo{height:clamp(220px,26vw,330px);border-radius:var(--r)}
.team-grid figcaption{padding:14px 4px 0;font:600 12px/1.4 Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer)}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.team-grid{grid-template-columns:1fr}}