/* ============ FONTS (local Poppins — subsetted woff2 first, ttf fallback) ============ */
@font-face{font-family:'Poppins';src:url('../font/woff2/Poppins-Light.woff2') format('woff2'),url('../font/Poppins-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../font/woff2/Poppins-Regular.woff2') format('woff2'),url('../font/Poppins-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../font/woff2/Poppins-Medium.woff2') format('woff2'),url('../font/Poppins-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../font/woff2/Poppins-SemiBold.woff2') format('woff2'),url('../font/Poppins-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../font/woff2/Poppins-Bold.woff2') format('woff2'),url('../font/Poppins-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../font/woff2/Poppins-ExtraBold.woff2') format('woff2'),url('../font/Poppins-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
/* ============ TOKENS ============ */
:root{
--teal:#26afb9; /* brand teal (matches nav buttons + footer logo) */
--teal-btn:#1a787f; /* button/active bg, same hue: 5.2:1 with white text */
--teal-deep:#1e8d95;
--teal-ink:#156066; /* text-on-white teal, same hue: 7.3:1 */
--charcoal:#2b2b2b; /* site header button + footer background */
--ink:#1f2e36;
--ink-soft:#4c5e68;
--paper:#ffffff;
--tint:#f2f9fa;
--tint-2:#e7f4f6;
--line:#dcebee;
--gold:#f5b942;
--wa:#25d366;
--shadow-s:0 2px 10px rgba(23,64,72,.08);
--shadow-m:0 12px 34px rgba(23,64,72,.12);
--shadow-l:0 24px 60px rgba(23,64,72,.16);
--radius:18px;
--max:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Poppins',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65;font-size:16px;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--teal-deep)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:84px 0;scroll-margin-top:86px}
#top{scroll-margin-top:86px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:760px){section{padding:60px 0}}
/* ============ TYPE ============ */
h1,h2,h3{line-height:1.18;font-weight:700;letter-spacing:-.02em}
.h2{font-size:clamp(28px,4vw,40px);margin-bottom:14px;position:relative;padding-bottom:18px}
/* geometric heading accent — a mitred bar echoing the logo's M strokes */
.h2::after{content:"";position:absolute;left:0;bottom:0;width:52px;height:5px;background:var(--teal);transform:skewX(-24deg)}
.center .h2::after{left:50%;margin-left:-26px}
.lead{color:var(--ink-soft);font-size:clamp(16px,1.9vw,18px);font-weight:300;max-width:640px}
.center{text-align:center}
.center .lead{margin:0 auto}
/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:inherit;font-weight:600;font-size:15.5px;padding:15px 28px;border-radius:999px;border:2px solid transparent;cursor:pointer;text-decoration:none;transition:.25s;white-space:nowrap}
.btn svg{flex:0 0 auto}
.btn-primary{background:var(--teal-btn);color:#fff;box-shadow:0 8px 24px rgba(26,120,127,.32)}
.btn-primary:hover{background:var(--teal-ink);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-ink);transform:translateY(-2px)}
@media(max-width:400px){.btn{white-space:normal;text-align:center}}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#0f1b21;transform:translateY(-2px)}
/* ============ TOP STRIP + HEADER ============ */
.topstrip{background:var(--charcoal);color:#b9c4c8;font-size:12.5px;font-weight:300}
.topstrip .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:7px;padding-bottom:7px}
.ts-item{display:inline-flex;align-items:center;gap:7px}
.ts-item svg{color:var(--teal);flex:0 0 auto}
.topstrip a{color:#e8eef0;text-decoration:none;font-weight:400}
.topstrip a:hover{color:var(--teal)}
@media(max-width:900px){.ts-loc{display:none}}
@media(max-width:560px){.topstrip .wrap{justify-content:center}.ts-hours{display:none}}
header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid transparent;transition:.3s}
header.scrolled{border-bottom-color:var(--line);box-shadow:var(--shadow-s)}
.nav{display:flex;align-items:center;gap:34px;padding:15px 0}
.nav-logo img{height:46px;width:auto}
.nav-links{display:flex;gap:4px;list-style:none;margin:0}
.nav-links a{text-decoration:none;color:#3d4a52;font-size:14.5px;font-weight:500;padding:10px 13px;position:relative;display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:3px;background:var(--teal);transform:skewX(-24deg) scaleX(0);transform-origin:left;transition:transform .25s}
.nav-links a:hover{color:var(--teal-ink)}
.nav-links a:hover::after,.nav-links a.active::after{transform:skewX(-24deg) scaleX(1)}
.nav-links a.active{color:var(--ink);font-weight:600}
.nav-cta{display:flex;align-items:center;gap:18px;margin-left:auto}
.nav-tel{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;white-space:nowrap}
.nav-tel svg{color:var(--teal-ink)}
.nav-tel:hover{color:var(--teal-ink)}
.nav-book{padding:12px 24px;font-size:14px}
/* services dropdown */
.nav-links li{position:relative}
.sub-menu{position:absolute;top:100%;left:13px;transform:translateY(10px);background:#fff;border:1px solid var(--line);border-top:3px solid var(--teal);box-shadow:var(--shadow-m);min-width:250px;padding:8px 0;list-style:none;opacity:0;visibility:hidden;transition:.25s;z-index:120}
.sub-menu::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.has-sub:hover .sub-menu,.has-sub:focus-within .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sub-menu a{display:block;padding:9px 22px;font-size:13.5px;font-weight:400;color:var(--ink-soft)}
.sub-menu a::after{display:none}
.sub-menu a:hover{background:var(--tint);color:var(--teal-ink)}
.sub-menu a[aria-current="page"]{color:var(--teal-ink);font-weight:600}
/* burger + drawer */
.nav-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px;margin-left:auto}
.nav-burger span{display:block;width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:.25s}
.nav-drawer{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow-m);padding:12px 24px 90px;max-height:calc(100vh - 150px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.nav-drawer a{display:block;padding:13px 4px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:500;border-bottom:1px solid var(--tint-2)}
.nav-drawer a:last-child{border-bottom:0}
.nav-drawer.open{display:block}
.drawer-item{display:flex;align-items:center;border-bottom:1px solid var(--tint-2)}
.drawer-item a{flex:1;border-bottom:0}
.drawer-tgl{background:var(--tint-2);border:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:.25s}
.drawer-tgl[aria-expanded="true"]{transform:rotate(180deg);background:var(--teal);color:#fff}
.drawer-sub{border-bottom:1px solid var(--tint-2);padding:4px 0 8px}
.drawer-sub a{padding:10px 4px 10px 20px;font-size:13px;font-weight:400;color:var(--ink-soft);border-bottom:0}
@media(max-width:1150px){.nav-links{display:none}.nav-burger{display:flex}.nav-cta{margin-left:0}}
@media(max-width:700px){.nav-book{display:none}}
@media(max-width:560px){.nav-tel span{display:none}}
/* split phone button (kept for heroes and CTA banners) */
.phone-split{display:inline-flex;align-items:stretch;border-radius:4px;overflow:hidden;text-decoration:none;box-shadow:var(--shadow-s);transition:.25s}
.phone-split:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)}
.phone-split .ps-ic{background:var(--charcoal);color:#fff;display:grid;place-items:center;width:42px}
.phone-split .ps-num{background:var(--teal);color:#fff;font-weight:600;font-size:14px;letter-spacing:.03em;display:flex;align-items:center;padding:12px 18px}
@media(max-width:560px){.phone-split .ps-num{display:none}.phone-split .ps-ic{width:44px;height:44px}}
/* ============ HERO — full-bleed mirrored teal image, site-style ============ */
.hero{position:relative;min-height:min(68vh,580px);display:flex;align-items:center;overflow:hidden;padding:56px 0 96px;background:url('../images/web/hero-teal.webp') 78% 22%/cover no-repeat}
/* background video — fades in over the still once it can play (see js/site.js).
The clip is 16:9 but this box is ~2.5:1, so cover fills the width and crops
vertically — which means object-position's X axis has no travel to work with.
To push the subject clear of the headline the element is made wider than the
hero and pinned left, moving the video's centre right by half the overage
(112% => +6%). right:auto keeps width from being over-constrained; the spill
is clipped by .hero's overflow:hidden. object-position Y is lifted slightly
to protect her hairline from the extra vertical crop the widening causes. */
.hero-video{position:absolute;top:0;bottom:0;left:0;right:auto;width:112%;height:100%;object-fit:cover;object-position:50% 45%;z-index:0;opacity:0;transition:opacity .8s ease;pointer-events:none}
.hero-video.is-playing{opacity:1}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(12,56,60,.88) 0%,rgba(12,56,60,.74) 36%,rgba(12,56,60,.34) 62%,rgba(12,56,60,.05) 82%)}
/* mitred chevron cluster — echo of the logo's M */
.geo{position:absolute;pointer-events:none}
.hero .geo{right:2.5%;top:9%;opacity:.6;z-index:2}
.hero .wrap{width:100%;position:relative;z-index:2}
.hero-inner{position:relative;max-width:640px;text-align:left}
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-s);padding:8px 16px;font-size:13.5px;font-weight:500;color:var(--ink-soft);margin-bottom:24px;clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px)}
.hero-badge .stars{color:var(--gold);letter-spacing:2px;font-size:13px}
.hero h1{font-size:clamp(34px,4.4vw,52px);font-weight:800;margin-bottom:18px;color:#fff}
.hero h1 em{font-style:normal;color:#a2e5ea;position:relative;z-index:0;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:11px;background:rgba(38,175,185,.4);transform:skewX(-24deg);z-index:-1}
.hero-sub{color:#dcf0f3;font-weight:300;font-size:clamp(16px,2vw,17.5px);max-width:520px;margin-bottom:28px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px;align-items:center}
.hero-chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.93);border:1px solid var(--line);padding:8px 15px;font-size:13px;font-weight:500;color:var(--ink-soft);clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px)}
.chip svg{color:var(--teal-ink)}
.chip-break{flex-basis:100%;height:0}
/* angled wedge into the trust bar */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:56px;z-index:2;background:var(--ink);clip-path:polygon(0 100%,100% 0,100% 100%)}
@media(max-width:760px){
.hero{background-image:url('../images/web/hero-teal-m.webp');background-position:72% 20%;padding:48px 0 96px;min-height:0}
.hero::before{background:linear-gradient(180deg,rgba(12,56,60,.82) 0%,rgba(12,56,60,.72) 60%,rgba(12,56,60,.5) 100%)}
.hero .geo{display:none}
/* The video runs on phones too. It is pulled slightly further right here than
on desktop: the mobile hero is much shorter, so cover scales the 16:9 clip
up hard and the subject drifts back toward the headline without it. */
.hero-video{width:118%}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.reveal{opacity:1!important;transform:none!important;transition:none!important}
.marquee-track{animation:none!important}
.hero-video{display:none}
}
/* ============ TRUST BAR ============ */
.trustbar{background:var(--ink);color:#fff;padding:26px 0}
.trustbar .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px}
.trust-item{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:500;color:#e5f2f4}
.trust-item svg{color:var(--teal);flex:0 0 auto}
@media(max-width:760px){.trustbar .wrap{justify-content:center}}
/* ============ CHECK-UP SECTION ============ */
.checkup{background:#fff}
.checkup .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.checkup-img{position:relative;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-l);align-self:stretch;min-height:420px}
.checkup-img img{width:100%;height:100%;object-fit:cover}
.checkup-tag{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-radius:12px;padding:10px 16px;font-size:13px;font-weight:600;color:var(--teal-ink);display:flex;align-items:center;gap:8px}
.steps{display:grid;gap:16px;margin:28px 0 30px}
.step{display:flex;gap:16px;align-items:flex-start}
.step-num{flex:0 0 auto;width:44px;height:44px;background:var(--tint-2);color:var(--teal-ink);font-weight:700;display:grid;place-items:center;font-size:16px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.step strong{display:block;font-size:15.5px;margin-bottom:2px}
.step p{color:var(--ink-soft);font-size:14.5px;font-weight:300}
@media(max-width:980px){.checkup .wrap{grid-template-columns:1fr;gap:40px}}
/* ============ SERVICES ============ */
.services{background:var(--tint)}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:0;position:relative;transition:.3s;display:flex;flex-direction:column;overflow:hidden}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-m);border-color:transparent}
.svc-img{aspect-ratio:16/10;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 160px) 100%,0 100%)}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.svc:hover .svc-img img{transform:scale(1.06)}
.svc-body{padding:20px 24px 24px;display:flex;flex-direction:column;gap:11px;flex:1}
.svc h3{font-size:16.5px;font-weight:600}
.svc p{color:var(--ink-soft);font-size:13.8px;font-weight:300;flex:1}
.svc-tag{position:absolute;top:14px;right:14px;z-index:2;background:var(--teal-btn);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;clip-path:polygon(6px 0,100% 0,100% 100%,0 100%,0 6px)}
.svc-tag.gold{background:var(--gold);color:#5c4406}
.svc a{font-size:13.5px;font-weight:600;text-decoration:none;color:var(--teal-ink);display:inline-flex;align-items:center;gap:6px}
.svc a:hover{gap:9px}
@media(max-width:1080px){.services-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.services-grid{grid-template-columns:1fr}}
/* ============ SMILE GALLERY (before/after) ============ */
.smiles{background:#fff}
.tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:38px 0 34px}
/* Home page only: the eight category filters wrap to four-plus rows on a phone
and push the cases themselves below the fold, so they're dropped there. The
grid still renders the default category, and "View All Our Cases" leads to
our-cases.html, where the filters stay available at every width. */
@media(max-width:760px){.tabs-desktop{display:none}}
.tab{font-family:inherit;font-size:13.5px;font-weight:500;padding:10px 20px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer;transition:.2s}
.tab:hover{border-color:var(--teal)}
.tab.active{background:var(--teal-btn);border-color:var(--teal-btn);color:#fff;font-weight:600}
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ba-card{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-s);border:1px solid var(--line);background:#fff}
.ba{position:relative;aspect-ratio:500/333;overflow:hidden;touch-action:pan-y}
/* Composite images carry a baked-in label strip in the top 12% — crop it out
(height >100% + negative top) and use our own BEFORE/AFTER chips instead. */
.ba img{position:absolute;top:-14.6%;height:114.6%;width:auto;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.ba-tag{position:absolute;top:10px;z-index:2;font-size:10.5px;font-weight:600;letter-spacing:.1em;padding:4px 11px;border-radius:999px;background:rgba(31,46,54,.72);color:#fff;pointer-events:none}
.ba-tag-b{left:10px}
.ba-tag-a{right:10px;background:rgba(26,120,127,.92)}
.ba:has(input:focus-visible){outline:3px solid var(--teal-btn);outline-offset:3px}
.ba .after-img{left:-100%}
.ba .before-clip{position:absolute;inset:0;width:var(--x,50%);overflow:hidden}
.ba .before-clip img{left:0}
.ba-line{position:absolute;top:0;bottom:0;left:var(--x,50%);width:3px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.35);transform:translateX(-50%)}
.ba-handle{position:absolute;top:50%;left:var(--x,50%);transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.3);display:grid;place-items:center;color:var(--teal-ink)}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(31,46,54,.78);color:#fff;font-size:11.5px;font-weight:500;letter-spacing:.06em;padding:5px 14px;border-radius:999px;pointer-events:none;transition:opacity .4s}
.ba.touched .ba-hint{opacity:0}
.ba-cap{padding:13px 18px;font-size:13.5px;font-weight:500;color:var(--ink-soft);display:flex;justify-content:space-between;align-items:center}
.ba-cap b{color:var(--ink);font-weight:600}
.smiles-more{margin-top:30px;text-align:center}
@media(max-width:980px){.ba-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.ba-grid{grid-template-columns:1fr}}
/* ============ REELS ============ */
.reels{background:linear-gradient(175deg,var(--ink) 0%,#132028 100%);color:#fff;clip-path:polygon(0 0,100% 42px,100% 100%,0 100%);padding-top:120px;margin-top:-42px}
.reels .lead{color:#a9c2c9}
.reels .h2::after{background:var(--teal)}
.reels-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:46px}
.reel{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#0d171d;box-shadow:0 14px 34px rgba(0,0,0,.4);transition:.3s}
.reel:hover{transform:translateY(-6px)}
.reel video,.reel iframe,.reel img{width:100%;height:100%;object-fit:cover;border:0;display:block}
.reel .reel-cover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;background:linear-gradient(180deg,rgba(13,23,29,0) 40%,rgba(13,23,29,.85) 100%);text-decoration:none;color:#fff;cursor:pointer}
.reel .play-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.6);display:grid;place-items:center;transition:.25s}
.reel:hover .play-badge{background:var(--teal-btn);border-color:var(--teal-btn)}
.reel.playing .play-badge{opacity:0}
.reel .reel-label{font-size:12.5px;font-weight:500;display:flex;align-items:center;gap:7px;opacity:.92}
.reel .mute-toggle{position:absolute;top:12px;right:12px;width:42px;height:42px;border-radius:50%;background:rgba(13,23,29,.6);border:0;color:#fff;display:none;place-items:center;cursor:pointer;z-index:3;font-size:16px}
button.reel-cover{width:100%;height:100%;background:linear-gradient(180deg,rgba(13,23,29,0) 40%,rgba(13,23,29,.85) 100%);border:0;padding:16px;font-family:inherit;text-align:left}
.reel.playing .mute-toggle{display:grid}
.reels-cta{margin-top:40px;text-align:center}
.reels-cta .btn-ghost{color:#fff;border-color:#33454e}
.reels-cta .btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
@media(max-width:1020px){.reels-grid{grid-template-columns:repeat(3,1fr)}.reel:nth-child(n+4){display:none}}
@media(max-width:640px){.reels-grid{grid-template-columns:repeat(2,1fr);gap:14px}.reel:nth-child(3){display:none}}
/* ============ TEAM ============ */
.team{background:var(--tint)}
.team-hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;background:#fff;border-radius:26px;box-shadow:var(--shadow-s);border:1px solid var(--line);overflow:hidden;margin:46px 0 26px}
.team-hero-img{height:100%;min-height:420px}
.team-hero-img img{width:100%;height:100%;object-fit:cover;object-position:top}
.team-hero-body{padding:44px 48px 44px 0}
.team-hero-body .role{color:var(--teal-ink);font-weight:600;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase}
.team-hero-body h3{font-size:32px;margin:6px 0 0}
.dr-creds{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 6px}
.cred{background:var(--tint-2);color:var(--teal-ink);font-size:12.5px;font-weight:600;padding:7px 14px;clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px)}
.team-hero-body blockquote{position:relative;margin:20px 0 16px;padding:2px 0 2px 44px;color:var(--ink);font-weight:500;font-size:17px;font-style:italic;line-height:1.55}
.team-hero-body blockquote::before{content:"“";position:absolute;left:0;top:-14px;font-size:64px;line-height:1;color:var(--teal);font-family:Georgia,serif;font-style:normal}
.team-hero-body p{color:var(--ink-soft);font-weight:300;font-size:15px}
.dr-cta{margin-top:22px;padding:13px 26px;font-size:14.5px}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tm{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.3s}
.tm:hover{transform:translateY(-6px);box-shadow:var(--shadow-m)}
/* height:auto is load-bearing. The width/height attributes on these ![]()
s are
presentational hints that map to the CSS width/height properties, so the
height attribute would otherwise make the used height definite and
aspect-ratio would be ignored — squaring 320px portraits into the grid's
wider column and shortening the whole section. Leaving height auto lets
aspect-ratio drive it off the 100% width, which is the intended square. */
.tm img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;filter:grayscale(1);transition:.4s}
.tm:hover img{filter:grayscale(0)}
.tm-body{padding:20px 22px 24px}
.tm-body .role{color:var(--teal-deep);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.tm-body h4{font-size:18px;margin:3px 0 8px}
.tm-body p{color:var(--ink-soft);font-size:13.8px;font-weight:300}
@media(max-width:980px){
.team-hero{grid-template-columns:1fr}
.team-hero-body{padding:0 34px 38px}
.team-hero-img{min-height:340px}
.team-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
}
/* ============ PRACTICE GALLERY MARQUEE ============ */
.pgallery{background:#fff}
.marquee{overflow:hidden;margin-top:44px;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;gap:18px;width:max-content;animation:scroll 48s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track img{height:250px;width:auto;border-radius:16px;object-fit:cover}
@keyframes scroll{to{transform:translateX(-50%)}}
@media(max-width:640px){.marquee-track img{height:170px}}
/* ============ CTA BANNER — practice brand wall ============ */
.cta-banner{position:relative;background:url('../images/gallery/p1.webp') center 42%/cover no-repeat;overflow:hidden;padding:104px 0}
.cta-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,34,42,.86) 0%,rgba(10,45,53,.82) 100%)}
.cta-inner{position:relative;max-width:640px;margin:0 auto;text-align:center;color:#fff}
.cta-inner h2{font-size:clamp(30px,4vw,44px);font-weight:800;margin-bottom:14px}
.cta-inner h2 span{position:relative;z-index:0}
.cta-inner h2 span::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:10px;background:rgba(38,175,185,.5);transform:skewX(-24deg);z-index:-1}
.cta-inner p{color:#dff2f5;font-weight:300;font-size:16.5px;margin-bottom:28px}
.cta-inner .hero-ctas{justify-content:center}
.cta-inner .btn-primary{background:#fff;color:var(--teal-ink);box-shadow:none}
.cta-inner .btn-primary:hover{background:var(--tint)}
.cta-banner .geo{left:5%;bottom:12%;opacity:.5}
@media(max-width:760px){
.cta-banner{padding:76px 0}
.cta-banner .geo{display:none}
}
/* ============ REVIEWS ============ */
.reviews{background:#fff}
/* on the home page reviews sits directly under the smile gallery — tint it so the
two white proof sections don't read as one flat band */
.smiles + .reviews{background:var(--tint)}
.rev-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px}
.rev-score{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 28px;box-shadow:var(--shadow-s)}
.rev-score .num{font-size:26px;font-weight:800;line-height:1;color:var(--ink);letter-spacing:.02em}
.rev-score .stars{color:var(--gold);font-size:19px;letter-spacing:3px}
.rev-score small{display:block;color:var(--ink-soft);font-size:13px;margin-top:4px}
.g-badge{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-soft)}
/* The track below is a horizontal scroller, and on a phone its six 88%-wide
cards make ~1880px of scrollable content. That inner overflow was being
totalled up the ancestor chain, leaving the document reporting a 1635px
scrollWidth inside a 390px viewport. body's overflow-x:hidden stopped Chrome
panning, but body-only hidden is unreliable on iOS Safari, so this contains
it at source. clip rather than hidden: hidden would force overflow-y to auto
and clip the cards' shadows vertically. */
.rev-carousel{position:relative;margin-top:44px;overflow-x:clip}
/* scroll-behavior:smooth is deliberately NOT set here — it lives on the two
arrow buttons' scrollBy() calls in js/site.js instead. With it declared on the
element, appending the six review cards made scroll-snap-type:x mandatory
perform its snap adjustment as an *animated* scroll at ~105ms. Chromium's
paint-timing detector reads an animated scroll as a scroll interaction and
permanently stops recording LCP candidates — and because that fired before the
hero painted, the page reported no LCP candidate at all. Lighthouse then failed
with NO_LCP, which nulls the performance score and roughly a dozen dependent
audits ("Unscored" against every PageSpeed insight), and CrUX could not record
a field LCP either. Setting behavior per-call keeps the arrows animating and
leaves the snap adjustment instant. */
.rev-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding:4px 4px 8px}
.rev-track::-webkit-scrollbar{display:none}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:14px;transition:.3s;flex:0 0 calc((100% - 44px)/3);scroll-snap-align:start}
.rev:hover{transform:translateY(-5px);box-shadow:var(--shadow-m)}
.rev-arrows{display:flex;gap:10px;justify-content:center;margin-top:26px}
.rev-arrow{width:46px;height:46px;border:1.5px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:.25s;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.rev-arrow:hover{background:var(--teal-btn);border-color:var(--teal-btn);color:#fff}
@media(max-width:1000px){.rev{flex-basis:calc((100% - 22px)/2)}}
@media(max-width:640px){.rev{flex-basis:88%}}
.rev .stars{color:var(--gold);letter-spacing:3px;font-size:15px}
.rev p{color:var(--ink-soft);font-size:14.3px;font-weight:300;flex:1}
.rev-who{display:flex;align-items:center;gap:12px}
.rev-avatar{width:42px;height:42px;border-radius:50%;background:var(--teal-btn);color:#fff;font-weight:700;display:grid;place-items:center;font-size:16px}
.rev-who b{font-size:14.5px;display:block}
.rev-who small{color:var(--ink-soft);font-size:12.5px}
.rev-cta{margin-top:34px;text-align:center}
/* ============ FAQ ============ */
.faq{background:#fff}
.faq-list{max-width:820px;margin:44px auto 0;display:grid;gap:14px}
.faq-item{border:1px solid var(--line);border-radius:16px;background:#fff;transition:.25s;overflow:hidden}
.faq-item[open]{box-shadow:var(--shadow-s);border-color:var(--teal)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 24px;font-weight:600;font-size:15.5px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .fx{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--tint-2);color:var(--teal-ink);display:grid;place-items:center;font-size:18px;font-weight:500;transition:.25s}
.faq-item[open] summary .fx{transform:rotate(45deg);background:var(--teal);color:#fff}
.faq-item .faq-a{padding:0 24px 22px;color:var(--ink-soft);font-weight:300;font-size:14.8px}
/* ============ EMERGENCY STRIP ============ */
.em-strip{background:var(--teal-btn);padding:0}
.em-strip .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;padding-top:52px;padding-bottom:52px}
.em-strip h3{color:#fff;font-size:clamp(24px,3.2vw,32px);display:flex;align-items:center;gap:14px;margin-bottom:6px}
.em-strip p{color:#e3f7fa;font-size:15.5px;font-weight:300;max-width:560px}
.em-actions{display:flex;gap:14px;flex-wrap:wrap}
.em-strip .btn{padding:15px 30px;font-size:15px}
.em-strip .btn-dark{box-shadow:none}
/* ============ CONTACT — minimal, big map ============ */
.contact{background:#fff}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;margin-top:52px;align-items:start}
.form-card h3{font-size:21px;margin-bottom:6px}
.form-card>p{color:var(--ink-soft);font-size:14px;font-weight:300;margin-bottom:26px}
.fld{margin-bottom:18px}
.fld label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.fld input,.fld textarea{width:100%;font-family:inherit;font-size:14.5px;padding:13px 16px;border:1.5px solid var(--line);background:#fbfdfe;color:var(--ink);transition:.2s;-webkit-appearance:none;appearance:none;border-radius:0;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--teal);background:#fff}
.fld textarea{min-height:110px;resize:vertical}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-note{font-size:12.5px;color:var(--ink-soft);margin-top:14px;font-weight:300}
.form-sent{display:none;margin-top:14px;background:var(--tint-2);border:1px solid var(--teal);color:var(--teal-ink);font-size:14px;font-weight:500;padding:13px 16px}
.contact-info h3{font-size:21px;margin-bottom:22px}
.info-row{display:flex;gap:15px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--tint-2);font-size:14.5px}
.info-row:last-child{border-bottom:0}
.info-row svg{flex:0 0 auto;color:var(--teal-ink);margin-top:2px}
.info-row a{color:var(--ink);text-decoration:none;font-weight:500}
.info-row a:hover{color:var(--teal-ink)}
.info-row .muted{color:var(--ink-soft);font-weight:300;font-size:13.5px}
.map-wide{margin-top:60px;position:relative}
.map-wide iframe{width:100%;height:480px;display:block;border:0;filter:grayscale(.15)}
.map-wide::before{content:"";position:absolute;top:0;left:0;width:120px;height:8px;background:var(--teal);transform:skewX(-24deg);transform-origin:left;z-index:2}
@media(max-width:980px){.contact-grid{grid-template-columns:1fr;gap:44px}.map-wide iframe{height:380px}}
@media(max-width:540px){.fld-row{grid-template-columns:1fr}}
/* ============ FOOTER (mirrors melrosedental.co.za) ============ */
footer{background:var(--charcoal);color:#9a9a9a;padding:70px 0 0;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1.3fr 1fr;gap:44px;padding-bottom:54px}
.foot-logo img{width:200px;height:auto}
footer h4{color:#fff;font-size:16px;font-weight:600;margin-bottom:18px}
footer ul{list-style:none;display:grid;gap:11px}
footer a{color:#9a9a9a;text-decoration:none;transition:.2s;font-weight:300}
footer a:hover{color:var(--teal)}
.foot-contact li{display:flex;gap:12px;align-items:flex-start}
.foot-contact svg{flex:0 0 auto;color:var(--teal);margin-top:3px}
.foot-social{display:flex;gap:12px}
.foot-social a{width:40px;height:40px;background:#3a3a3a;display:grid;place-items:center;color:#fff;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.foot-social a:hover{background:var(--teal);color:#fff}
.foot-bottom{border-top:1px solid #3a3a3a;padding:24px 0;text-align:center;font-size:12.5px;font-weight:300;color:#8a8a8a}
.foot-bottom a{color:#b5b5b5}
.foot-bottom a:hover{color:var(--teal)}
.foot-bottom .credit{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:6px}
.foot-bottom .credit img{height:14px;width:auto;display:inline-block}
@media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr;text-align:center}.foot-contact li{justify-content:center}.foot-social{justify-content:center}}
/* ============ MOBILE STICKY CTA ============ */
.sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:1200;display:none;grid-template-columns:1fr 1fr 1.2fr;gap:1px;background:var(--line);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(23,64,72,.14)}
.sticky-cta a{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 6px;font-size:13.5px;font-weight:600;text-decoration:none;background:#fff;color:var(--ink)}
.sticky-cta a.s-wa{color:#0e7c3d}
.sticky-cta a.s-book{background:var(--teal-btn);color:#fff}
@media(max-width:760px){.sticky-cta{display:grid}}
/* Both bottom bars are fixed and permanently on screen, so the page has to
reserve room for them or they sit on top of whatever ends up at the bottom —
which was covering real CTAs ("Book an Appointment" at 360px, the gallery
filters at 768px). The two heights are measured at runtime by js/site.js and
published here, rather than hardcoded: the old .cbar{bottom:54px} cleared the
53px CTA strip by a single pixel, so any change in font metrics, a wrapped
label or an iOS safe-area inset pushed the bar on top of the WhatsApp button. */
:root{--sticky-h:0px;--cbar-h:0px}
body{padding-bottom:calc(var(--sticky-h) + var(--cbar-h))}
/* ============ FLOATING WHATSAPP ============ */
.float-wa{position:fixed;right:22px;bottom:calc(var(--sticky-h) + var(--cbar-h) + 18px);z-index:1300;width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.28);transition:.25s}
.float-wa:hover{transform:scale(1.08)}
/* below 760 the sticky strip already carries a WhatsApp button, so the floating
one is redundant. Above it the strip is hidden, so the float must stay. */
@media(max-width:760px){.float-wa{display:none}}
/* ============ CONTACT BAR (persistent, sits on the sticky CTA strip) ============ */
/* Visible from first paint — no slide-up, no delay, and no dependency on JS to
reveal it. bottom is the measured height of the CTA strip so the two stack
flush instead of relying on a magic number that only just cleared it. */
.cbar{position:fixed;left:0;right:0;bottom:var(--sticky-h);z-index:1350;background:#fff;box-shadow:0 -10px 34px rgba(23,64,72,.2);border-top:3px solid var(--teal)}
.cbar[hidden]{display:none}
.cbar-inner{display:flex;align-items:center;gap:24px;padding:16px 24px}
.cbar-text{flex:0 0 auto}
.cbar-text b{display:block;font-size:15.5px}
.cbar-text span{color:var(--ink-soft);font-size:12.5px;font-weight:300}
.cbar form{display:flex;gap:10px;flex:1;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.cbar input{font-family:inherit;font-size:14px;padding:12px 15px;border:1.5px solid var(--line);background:#fbfdfe;color:var(--ink);width:210px;-webkit-appearance:none;appearance:none;border-radius:0;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.cbar input:focus{outline:none;border-color:var(--teal);background:#fff}
.cbar .btn{padding:12px 24px;font-size:14px}
.cbar-x{flex:0 0 auto;width:36px;height:36px;border:0;background:var(--tint-2);color:var(--ink);display:grid;place-items:center;cursor:pointer;border-radius:50%;transition:.2s}
.cbar-x:hover{background:var(--teal-btn);color:#fff}
.cbar .form-sent{margin:0;flex:1;text-align:center}
/* stacked bar layout kicks in well before the desktop row runs out of room */
@media(max-width:1150px){
.cbar-inner{flex-wrap:wrap;gap:10px;padding:14px 16px 16px}
.cbar-text{flex:1 1 100%;padding-right:44px}
.cbar form{justify-content:stretch}
.cbar input{flex:1;width:auto;min-width:130px}
.cbar .btn{flex:1 1 100%}
.cbar-x{position:absolute;top:10px;right:12px}
}
@media(max-width:760px){
/* Phone: drop the enquiry form from this bar. The sticky Call / WhatsApp /
Book strip sits directly beneath it and covers the same intent in one tap,
so two name+phone fields over a fixed bar are just cost. Hiding the