:root{
  --navy:#1d3f71; --navy-2:#2b5598; --blue:#1d3f71; --blue-2:#2b5598; --ink:#14212e; --muted:#5b6b7b; --line:#e3e9f1;
  --bg:#ffffff; --soft:#f8faff; --teal:#26aac3; --teal-d:#1a8aa1;
  --radius:10px; --max:1500px;
}
html{font-size:clamp(16px,.5vw + 10px,21px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Work Sans","Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;font-size:1.0625rem}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,3vw,56px)}

/* header */
header.site{background:#1d3f71;color:#fff;position:sticky;top:0;z-index:20}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:152px;max-width:none}
header.site img.logo{height:100px;width:auto}
nav.main{display:flex;gap:30px;align-items:center;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
nav.main a{text-decoration:none;opacity:.95}
/* Rolling text: each letter slides up and a copy rolls in from below, staggered left to right. */
nav.main a.roll{display:inline-block;overflow:hidden;height:1.35em;line-height:1.35em;opacity:1}
nav.main a.roll .ch{display:inline-block;white-space:pre;transition:transform .45s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--i) * 22ms);text-shadow:0 1.35em 0 #fff}
nav.main a.roll:hover .ch,nav.main a.roll:focus-visible .ch{transform:translateY(-1.35em)}
@media (prefers-reduced-motion:reduce){nav.main a.roll .ch{transition:none}}
/* Buttons: a cut corner (echoing the triangle shards of the logo), an arrow that
   slides on hover, and a thin line in the logo's colours that sweeps across the base. */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:16px 26px 16px 28px;font-weight:600;font-size:.95rem;letter-spacing:.04em;text-decoration:none;border:0;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);transition:background .25s,color .25s,transform .25s}
.btn::after{content:"\2192";font-size:1.15em;line-height:1;transition:transform .25s}
.btn::before{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,#27b6c9,#7fc241,#f9c41b,#f58220,#e8433c,#a63c96,#4b3a8f);
  transform:scaleX(0);transform-origin:left;transition:transform .45s}
.btn:hover::before{transform:scaleX(1)}
.btn:hover::after{transform:translateX(6px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--navy-2)}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-d)}
.btn-ghost{background:#fff;color:var(--blue);box-shadow:none;outline:0;background-image:linear-gradient(#eaf1fc,#eaf1fc)}
.btn-ghost:hover{background:var(--blue);background-image:none;color:#fff}
header.site .btn{background:rgba(255,255,255,.14);color:#fff;padding:12px 20px 12px 22px;font-size:.8rem;text-transform:uppercase;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
header.site .btn:hover{background:#fff;color:var(--blue)}

/* hero */
.hero{background:linear-gradient(180deg,#f7f9fe,#ffffff 70%);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(380px,1fr) minmax(0,min(58%,1020px));gap:0;align-items:stretch;min-height:clamp(640px,40vw,920px);max-width:none}
.hero .wrap{padding-right:0}
.hero .copy{padding:72px 0;align-self:center;max-width:620px;margin-left:auto;padding-right:0;position:relative;z-index:2}
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d);font-weight:700;margin:0 0 14px}
h1{text-wrap:balance;font-weight:300;font-size:clamp(34px,5vw,54px);line-height:1.1;color:var(--navy);margin:0 0 20px}
.hero p.lead{font-size:19px;color:#2c3e50;max-width:520px;margin:0 0 28px}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px}
.hero figure{margin:0 0 0 calc(-1 * min(15vw,300px));position:relative;min-height:360px}
.hero figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%);mask-image:linear-gradient(90deg,transparent 0,#000 14%)}
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;font-size:14px;color:var(--muted)}
/* Memberships row under the two credentials. Multiply drops the white box behind the JPEG logos. */
.affil{display:flex;flex-wrap:nowrap;align-items:center;gap:28px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.affil img{height:48px;width:auto;min-width:0;flex:0 1 auto;object-fit:contain;mix-blend-mode:multiply}
.affil img.sq{height:68px}
/* Big versions of every membership and location logo, above the footer */
.affil-band{background:#fff;padding:64px 0 56px;border-top:1px solid var(--line)}
.affil-band .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 40px}
.affil-band img{height:clamp(72px,6vw,110px);width:auto;mix-blend-mode:multiply}
.affil-band img.sq{height:clamp(96px,8vw,140px)}
.affil-band .lbl{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d);font-weight:700;margin:0 0 22px;text-align:center}
.affil-band .locs-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px 64px;margin-top:44px;padding-top:34px;border-top:1px solid var(--line)}
.affil-band figure{margin:0;text-align:center}
.affil-band figcaption{font-size:14px;color:var(--muted);margin-top:10px}
.trust span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal);margin-right:8px}

/* referral band */
.refer{background:#1d3f71;color:#fff;padding:44px 0}
.refer .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.refer h2{font-weight:300;font-size:30px;margin:0 0 10px}
.refer p{margin:0;opacity:.9}
.refer ul{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;font-size:15px}
.refer li::before{content:"";display:inline-block;width:7px;height:7px;background:var(--teal);margin-right:9px;border-radius:50%}

/* sections */
section{padding:72px 0}
section.soft{background:var(--soft)}
h2.title{font-weight:300;font-size:clamp(28px,3.6vw,38px);color:var(--navy);margin:0 0 12px}
p.sub{color:var(--muted);max-width:680px;margin:0 0 36px}

/* implants feature */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.feature img{border-radius:var(--radius);width:100%;height:100%;max-height:480px;object-fit:cover}
.feature ul{padding-left:20px;margin:16px 0 24px}
.feature li{margin:6px 0}

/* procedures */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;text-decoration:none}
.card:hover{border-color:var(--teal);box-shadow:0 6px 20px rgba(17,46,72,.08)}
.card .ph{aspect-ratio:4/3;background:var(--soft);display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .ph.icon{background:linear-gradient(135deg,#e8eef6,#f6f9fc)}
.card .ph.icon span{font-weight:300;font-size:40px;color:var(--navy-2);opacity:.55}
.card .body{padding:16px 18px 20px}
.card h3{margin:0 0 6px;font-size:17px;color:var(--navy)}
.card p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5}

/* about */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.about img{border-radius:var(--radius);width:100%}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0 26px}
.fact{border-left:3px solid var(--teal);padding:4px 0 4px 14px;font-size:15px}
.fact b{display:block;color:var(--navy)}

/* locations */
.locs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.loc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.loc h3{margin:0 0 6px;color:var(--navy);font-size:18px}
.loc p{margin:0;font-size:15px;color:var(--muted)}
.loc .tag{display:inline-block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-d);font-weight:700;margin-bottom:6px}

/* faq */
details{border-bottom:1px solid var(--line);padding:18px 0}
summary{cursor:pointer;font-weight:600;color:var(--navy);font-size:18px;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--teal-d);font-size:22px;line-height:1}
details[open] summary::after{content:"\2212"}
details p{margin:12px 0 0;color:#2c3e50;max-width:760px}

/* cta + footer */
.cta{background:linear-gradient(135deg,#1d3f71,#2b5598);color:#fff;text-align:center}
.cta h2{font-weight:300;font-size:clamp(28px,3.6vw,38px);margin:0 0 12px}
.cta p{margin:0 auto 26px;max-width:560px;opacity:.9}
.cta .actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.cta .btn-ghost{background:rgba(255,255,255,.16);background-image:none;color:#fff}
.cta .btn-ghost:hover{background:#fff;color:var(--blue)}
footer{background:#1d3f71;color:#c9d6e3;padding:44px 0;font-size:14px}
footer .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px}
footer img{height:108px;width:auto;max-width:100%;margin-bottom:14px}
footer h4{color:#fff;margin:0 0 10px;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
footer a{display:block;text-decoration:none;margin:4px 0}
footer a:hover{text-decoration:underline}
.legal{border-top:1px solid rgba(255,255,255,.15);margin-top:30px;padding-top:18px;font-size:12.5px;opacity:.8}

@media (max-width:980px){
  nav.main a.hide-m{display:none}
  .hero .wrap,.refer .wrap,.feature,.about{grid-template-columns:1fr}
  .hero .wrap{min-height:0}
  .hero .copy{padding:40px 0 10px;margin:0;max-width:none}
  .hero figure{min-height:380px;margin-left:0}
  .hero figure img{-webkit-mask-image:none;mask-image:none;object-position:32% 20%}
  .grid{grid-template-columns:repeat(2,1fr)}
  .locs{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  header.site .wrap{height:84px}
  header.site img.logo{height:66px}
  nav.main .btn{padding:9px 12px;font-size:12px}
  nav.main a:not(.btn){display:none}
  .grid{grid-template-columns:1fr}
  .refer ul,.facts{grid-template-columns:1fr}
  section{padding:52px 0}
}

/* Shards: the canvas sits exactly over an image tagged data-shards and fades out when the real image takes over */
.shards-canvas{position:absolute;pointer-events:none;transition:opacity .35s}
img[data-shards]{transition:opacity .25s}

/* Hero credentials: solid white badges over the bottom of the portrait (cut corner like the buttons) */
.hero-badges{position:absolute;z-index:2;left:24%;bottom:clamp(14px,3%,32px);margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;max-width:min(270px,60%)}
.hero-badges li{position:relative;background:#fff;color:var(--ink);padding:7px 14px 7px 12px;border-left:2px solid var(--teal);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);box-shadow:0 4px 14px rgba(20,33,46,.08);
  display:flex;flex-direction:column;gap:0;animation:hb-in .7s cubic-bezier(.2,.7,.2,1) both}
.hero-badges li:nth-child(1){animation-delay:.9s}
.hero-badges li:nth-child(2){animation-delay:1.1s}
.hero-badges .hb-k{display:none}
.hero-badges strong{font-size:.82rem;font-weight:500;color:var(--navy);line-height:1.3}
.hero-badges .hb-s{font-size:.74rem;color:var(--muted)}
@keyframes hb-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero-badges li{animation:none}}
@media (max-width:980px){
  .hero-badges{left:16px;right:16px;bottom:16px;max-width:none;flex-direction:row;flex-wrap:wrap;gap:8px}
  .hero-badges li{flex:1 1 160px;padding:6px 12px 6px 12px}
  .hero-badges strong{font-size:.8rem}
}
@media (max-width:560px){
  .hero-badges{left:10px;right:10px;bottom:10px;gap:6px}
  .hero-badges li{flex:1 1 100%;padding:5px 10px 5px 10px;border-left-width:2px}
  .hero-badges .hb-k{display:none}
  .hero-badges strong{font-size:.8rem}
  .hero-badges .hb-s{font-size:.72rem}
}

/* Desktop: no boxes at all. Just two quiet lines of small text on the wall at the bottom-left of the photo. */
@media (min-width:981px){
  .hero-badges{left:-4%;bottom:clamp(14px,2.6%,26px);gap:3px;max-width:none}
  .hero-badges li{background:none;box-shadow:none;clip-path:none;border-left:0;padding:0;flex-direction:row;align-items:baseline;gap:6px;white-space:nowrap}
  .hero-badges strong{font-size:.74rem;font-weight:500;color:#5b6b7b}
  .hero-badges .hb-s{font-size:.74rem;color:#7b8998}
  .hero-badges .hb-s::before{content:"\00b7";margin-right:6px}
}

/* Head pop: the hero portrait is a cut-out. On desktop it is anchored to the bottom of the hero and sized so
   the top of his head rises about 6% of the hero height above it, into the header. The header clips and
   draws that part (headpop.js), above its blue background but below the logo and menu. */
header.site{overflow:hidden}
header.site .wrap{position:relative;z-index:1}
.head-pop{position:absolute;z-index:0;max-width:none;pointer-events:none;user-select:none;display:none}
@media (min-width:981px){
  .hero .wrap{min-height:clamp(560px,28.7vw,740px)}
  .hero figure img{inset:auto;right:0;bottom:0;left:auto;top:auto;width:auto;height:118.5%;max-width:none;object-fit:fill;
    -webkit-mask-image:none;mask-image:none}
}

/* Soften the flat cut at the bottom of the torso, and keep him clear of the text on laptop-width screens */
@media (min-width:981px){
  .hero figure img{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 100%);mask-image:linear-gradient(180deg,#000 0,#000 100%)}
}
@media (min-width:981px) and (max-width:1700px){
  .hero figure img{height:106%}
  .hero p.lead{max-width:430px}
  .hero-badges{left:-17%}
}

/* ===== Concept B: no head-over-header; a hero with depth (parallax.js) =====
   The portrait sits fully inside the hero. Far layers (ghost of the logo head, soft shards) sit behind him,
   near layers (small solid shards) in front, and they all move at different speeds as the page scrolls. */
.hero{position:relative}
.hero .wrap{position:relative;z-index:1}
.hd{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hd-back{z-index:0}
.hd-front{z-index:2}
.hd-ghost{position:absolute;right:3%;top:4%;width:clamp(360px,32vw,740px);height:auto;opacity:.12;will-change:transform}
.hd-sh{position:absolute;display:block;will-change:transform;height:auto}
.hd-sh.l{width:clamp(56px,4.6vw,124px)}
.hd-sh.m{width:clamp(36px,2.8vw,76px)}
.hd-sh.s{width:clamp(14px,1.2vw,32px)}
.hero figure{will-change:transform}
@media (min-width:981px){
  .hero .wrap{min-height:clamp(600px,33vw,800px)}
  .hero figure img{height:104%}
}
@media (min-width:981px) and (max-width:1700px){
  .hero figure img{height:100%}
}
@media (max-width:980px){.hd{display:none}}
/* shards that sit in the empty left margin only show on wide screens (on laptops that margin is the text column) */
@media (max-width:1700px){.hd-sh.wo{display:none}}

/* Quieter hero: credentials move to the bottom-right, under his arm on the white chair */
@media (min-width:981px){
  .hero-badges{left:auto;right:3.5%;bottom:clamp(14px,2.6%,26px);align-items:flex-end;text-align:right}
  .hero-badges li{justify-content:flex-end}
}
@media (min-width:981px) and (max-width:1700px){
  .hero-badges{left:auto;right:3.5%}
}
@media (min-width:981px){
  /* narrow stacked lines so they stay on the clear chair area to the right of his wrist */
  .hero-badges{gap:7px;right:1.8%}
  .hero-badges li{flex-direction:column;align-items:flex-end;gap:0;white-space:normal}
  .hero-badges .hb-s::before{content:none;margin:0}
}

/* Tighter: text block sits closer to the doctor; credentials get a touch more room from his arm */
@media (min-width:981px){
  .hero .copy{left:clamp(24px,2.2vw,56px)}
  .hero-badges{right:1.2%;bottom:clamp(8px,1.4%,16px)}
}

/* No fade at the bottom of the portrait; and keep the divider line short enough to stay clear of his jacket */
@media (min-width:981px){
  .hero figure img{-webkit-mask-image:none;mask-image:none}
  .hero .affil{max-width:520px}
}

/* More breathing room between the credentials and the edge of the screen */
@media (min-width:981px){
  .hero-badges{right:clamp(28px,2.4vw,52px)}
}
@media (min-width:981px){
  /* let "Maxillofacial training committee" wrap so the block stays narrow and clear of his cuff */
  .hero-badges strong{max-width:11.5em;text-align:right}
}

/* Hero background matched to his current site (sampled from the live hero: pale cool blue at the top, slightly greyer at the bottom) */
.hero{background:linear-gradient(180deg,#f1f5fd 0%,#f1f5fb 55%,#efeef4 100%)}

/* On every screen the credentials sit under the logos in the text column (his sleeve reaches the bottom-right
   corner of the cropped portrait, so the on-photo badges would run across it, ultrawide included). */
.hero-creds-alt{display:none;list-style:none;margin:16px 0 0;padding:0}
.hero-creds-alt li{font-size:.78rem;line-height:1.5;color:#7b8998}
.hero-creds-alt strong{font-weight:500;color:#5b6b7b}
.hero-creds-alt span::before{content:"\00b7";margin:0 6px}
.hero-badges{display:none}
.hero-creds-alt{display:block}

/* Header shadow, after Protekt Auto's nav: a soft curved shadow under the bar, deepest in the middle and
   fading toward the edges, plus a faint rim line. Navy-tinted and lighter than Protekt's (that site is dark). */
header.site{overflow:visible}
header.site::after{content:"";position:absolute;left:0;right:0;top:100%;height:58px;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse 80% 100% at 50% 0%,rgba(14,32,62,.34) 0%,rgba(14,32,62,.16) 42%,transparent 72%)}
header.site::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.10) 25%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.10) 75%,transparent 95%)}

/* A little more room above the hero content, between the header and his head / the headline */
@media (min-width:981px){
  .hero{padding-top:clamp(28px,3.2vw,72px) !important}
}
@media (max-width:980px){
  .hero{padding-top:20px !important}
}

/* Lenis smooth scroll: hand control to it (native smooth scrolling would fight it) */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto !important}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:clip}

/* Header shadow: lighter and tighter than before */
header.site::after{height:34px;background:radial-gradient(ellipse 80% 100% at 50% 0%,rgba(14,32,62,.20) 0%,rgba(14,32,62,.09) 42%,transparent 72%)}

/* Molten-chrome shimmer on the buttons: the technique from Bayside Solicitors' gold logo (a diagonal metallic
   gradient with a bright band sliding across), done in Dr Tuckett's navy and teal. */
@keyframes chrome-slide{0%{background-position:0% 0%}100%{background-position:200% 200%}}
.btn-primary{background:linear-gradient(135deg,#1d3f71 0%,#2b5aa0 14%,#6d97d3 30%,#2b5aa0 44%,#1d3f71 56%,#14305c 70%,#1d3f71 84%,#2b5aa0 100%);background-size:200% 200%;animation:chrome-slide 8s linear infinite;text-shadow:0 1px 1px rgba(8,20,45,.35)}
.btn-primary:hover{background:linear-gradient(135deg,#1d3f71 0%,#2b5aa0 14%,#6d97d3 30%,#2b5aa0 44%,#1d3f71 56%,#14305c 70%,#1d3f71 84%,#2b5aa0 100%);background-size:200% 200%;animation-duration:3.5s}
.btn-teal{background:linear-gradient(135deg,#26aac3 0%,#3cbcd2 14%,#62cfe3 30%,#3cbcd2 44%,#26aac3 56%,#1a8aa1 70%,#26aac3 84%,#3cbcd2 100%);background-size:200% 200%;animation:chrome-slide 8s linear infinite;text-shadow:0 1px 1px rgba(8,50,62,.32)}
.btn-teal:hover{background:linear-gradient(135deg,#26aac3 0%,#3cbcd2 14%,#62cfe3 30%,#3cbcd2 44%,#26aac3 56%,#1a8aa1 70%,#26aac3 84%,#3cbcd2 100%);background-size:200% 200%;animation-duration:3.5s}
header.site .btn{background:linear-gradient(135deg,#2f5a95 0%,#3b6aa8 14%,#7ea6dc 30%,#3b6aa8 44%,#2f5a95 56%,#254b82 70%,#2f5a95 84%,#3b6aa8 100%);background-size:200% 200%;animation:chrome-slide 8s linear infinite;text-shadow:0 1px 1px rgba(8,20,45,.3)}
header.site .btn:hover{color:#14305c;background:linear-gradient(135deg,#dbe8fa,#ffffff 50%,#dbe8fa);background-size:100% 100%;animation:none;text-shadow:none}
@media (prefers-reduced-motion:reduce){.btn-primary,.btn-teal,header.site .btn{animation:none}}

/* Shimmer buttons are static: keep the metallic texture, stop the sliding highlight */
.btn-primary,.btn-teal,header.site .btn,
.btn-primary:hover,.btn-teal:hover{animation:none !important;background-position:22% 30%}
header.site .btn:hover{background-position:0 0}

/* ===== Buttons: the Bayside Solicitors logo plate =====
   Their logo is a glossy brushed-metal blue plate: deep blue at the left, a bright band through the middle,
   duller steel at the right, fine horizontal brushing, a soft top gloss and a curved reflection. Rebuilt in CSS
   (static) in Dr Tuckett's blue and teal. */
.btn-primary,.btn-teal,header.site .btn,
.btn-primary:hover,.btn-teal:hover{
  animation:none !important;background-size:auto !important;background-position:0 0 !important;background-repeat:no-repeat,repeat,no-repeat,no-repeat !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 3px rgba(0,0,0,.18);
}
.btn-primary,.btn-primary:hover{
  background-image:
    linear-gradient(110deg,transparent 0 56%,rgba(255,255,255,.17) 56% 71%,transparent 71%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,rgba(0,0,0,.05) 1px 2px),
    linear-gradient(180deg,rgba(255,255,255,.22) 0,rgba(255,255,255,0) 48%),
    linear-gradient(90deg,#0b3470 0%,#14559f 34%,#1d63b5 52%,#1a4f93 76%,#2b4c84 100%) !important;
  background-color:#14559f;text-shadow:0 1px 1px rgba(5,18,45,.45);
}
.btn-primary:hover{filter:brightness(1.08)}
.btn-teal,.btn-teal:hover{
  background-image:
    linear-gradient(110deg,transparent 0 56%,rgba(255,255,255,.2) 56% 71%,transparent 71%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,rgba(0,0,0,.05) 1px 2px),
    linear-gradient(180deg,rgba(255,255,255,.24) 0,rgba(255,255,255,0) 48%),
    linear-gradient(90deg,#14829a 0%,#22a4bd 34%,#33bcd3 52%,#1f97ae 76%,#3a8195 100%) !important;
  background-color:#22a4bd;text-shadow:0 1px 1px rgba(4,45,56,.4);
}
.btn-teal:hover{filter:brightness(1.08)}
header.site .btn,header.site .btn:hover{
  background-image:
    linear-gradient(110deg,transparent 0 56%,rgba(255,255,255,.16) 56% 71%,transparent 71%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,rgba(0,0,0,.05) 1px 2px),
    linear-gradient(180deg,rgba(255,255,255,.22) 0,rgba(255,255,255,0) 48%),
    linear-gradient(90deg,#1b4f94 0%,#2a6bbd 34%,#3a7ccc 52%,#2d62a8 76%,#3b5f99 100%) !important;
  background-color:#2a6bbd;color:#fff;text-shadow:0 1px 1px rgba(5,18,45,.4);
}
header.site .btn:hover{filter:brightness(1.1)}

/* Closer match to the logo plate: sampled colours (#02265f deep left, #0e5bb3 / #1563b9 bright centre,
   #164685 then #2b4c84 duller steel at the right), barely-there brushing, a soft curved reflection. */
.btn-primary,.btn-primary:hover{
  background-image:
    linear-gradient(104deg,transparent 50%,rgba(255,255,255,.07) 58%,rgba(255,255,255,.17) 65%,rgba(255,255,255,.05) 74%,transparent 82%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,rgba(0,0,0,.028) 1px 2px),
    linear-gradient(180deg,rgba(255,255,255,.16) 0,rgba(255,255,255,0) 42%),
    linear-gradient(90deg,#02265f 0%,#0a4590 24%,#0e5bb3 44%,#1563b9 55%,#164685 80%,#2b4c84 100%) !important;
  background-color:#0e5bb3;
}
.btn-teal,.btn-teal:hover{
  background-image:
    linear-gradient(104deg,transparent 50%,rgba(255,255,255,.08) 58%,rgba(255,255,255,.2) 65%,rgba(255,255,255,.06) 74%,transparent 82%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,rgba(0,0,0,.028) 1px 2px),
    linear-gradient(180deg,rgba(255,255,255,.18) 0,rgba(255,255,255,0) 42%),
    linear-gradient(90deg,#0b6478 0%,#168ba3 24%,#22a9c2 44%,#2cb6cd 55%,#1b7f94 80%,#2f6f84 100%) !important;
  background-color:#22a9c2;
}
header.site .btn,header.site .btn:hover{
  background-image:
    linear-gradient(104deg,transparent 50%,rgba(255,255,255,.07) 58%,rgba(255,255,255,.16) 65%,rgba(255,255,255,.05) 74%,transparent 82%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,rgba(0,0,0,.028) 1px 2px),
    linear-gradient(180deg,rgba(255,255,255,.16) 0,rgba(255,255,255,0) 42%),
    linear-gradient(90deg,#0a3a7c 0%,#13589f 24%,#1a6fc4 44%,#2279d0 55%,#1f5a9e 80%,#34609a 100%) !important;
  background-color:#1a6fc4;
}
.btn-primary,.btn-teal,header.site .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 4px rgba(0,0,0,.2),0 1px 2px rgba(5,20,50,.25)}

/* Scroll-driven shine: the reflection layer (first background layer) is wider than the button and its
   position follows --shx, which scroll-shine.js sets from the scroll position. Nothing moves unless the page does. */
.btn-primary,.btn-teal,header.site .btn,
.btn-primary:hover,.btn-teal:hover,header.site .btn:hover{
  background-size:260% 100%,auto,auto,auto !important;
  background-position:var(--shx,40%) 0,0 0,0 0,0 0 !important;
}

/* Hover: the reflection also sweeps across the button once when you hover or focus it */
.btn-primary,.btn-teal,header.site .btn{transition:background-position .7s cubic-bezier(.2,.7,.2,1),filter .25s,color .25s,transform .25s}
.btn-primary:hover,.btn-teal:hover,header.site .btn:hover,
.btn-primary:focus-visible,.btn-teal:focus-visible,header.site .btn:focus-visible{
  background-position:calc(var(--shx,40%) + 55%) 0,0 0,0 0,0 0 !important;
}
@media (prefers-reduced-motion:reduce){.btn-primary,.btn-teal,header.site .btn{transition:none}}

/* Graphic behind the doctor: the logo head filled with the Bayside plate texture (deep blue, bright centre,
   steel edge, faint brushing, soft reflection that follows the scroll like the buttons). The icon's shapes
   are used as a mask, so the artwork stays the logo's own geometry. */
.hd-ghost{
  aspect-ratio:290/336;height:auto;opacity:.36;
  -webkit-mask:url(img/icon.png) center/contain no-repeat;mask:url(img/icon.png) center/contain no-repeat;
  background-image:
    linear-gradient(104deg,transparent 50%,rgba(255,255,255,.10) 58%,rgba(255,255,255,.24) 65%,rgba(255,255,255,.07) 74%,transparent 82%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,.05) 1px 3px),
    linear-gradient(180deg,rgba(255,255,255,.18) 0,rgba(255,255,255,0) 40%),
    linear-gradient(90deg,#02265f 0%,#0a4590 24%,#0e5bb3 44%,#1563b9 55%,#164685 80%,#2b4c84 100%);
  background-size:260% 100%,auto,auto,auto;
  background-position:var(--shx,40%) 0,0 0,0 0,0 0;
  background-repeat:no-repeat,repeat,no-repeat,no-repeat;
}

/* Third pass, compared against the logo at high zoom: more vivid, brighter centre; a thin bright highlight along the top
   edge; clearer fine brushing; a defined curved reflection (it is the layer the scroll/hover shine moves). */
.btn-primary,.btn-primary:hover{
  background-image:
    radial-gradient(ellipse 20% 175% at 80% -8%,rgba(255,255,255,.2) 0 56%,rgba(255,255,255,.05) 57% 66%,transparent 67%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.075) 0 1px,rgba(0,0,0,.07) 1px 2px),
    linear-gradient(180deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.1) 9%,rgba(255,255,255,0) 40%),
    linear-gradient(90deg,#021f52 0%,#0a4aa0 20%,#1269c7 40%,#1b7bdc 50%,#1560b6 64%,#2a5698 82%,#2d4f86 100%) !important;
  background-color:#1269c7;
}
.btn-teal,.btn-teal:hover{
  background-image:
    radial-gradient(ellipse 20% 175% at 80% -8%,rgba(255,255,255,.24) 0 56%,rgba(255,255,255,.06) 57% 66%,transparent 67%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,rgba(0,0,0,.07) 1px 2px),
    linear-gradient(180deg,rgba(255,255,255,.36) 0,rgba(255,255,255,.1) 9%,rgba(255,255,255,0) 40%),
    linear-gradient(90deg,#065366 0%,#0f8199 20%,#1da6c0 40%,#2dbcd6 50%,#1b93ab 64%,#2d7186 82%,#2f6478 100%) !important;
  background-color:#1da6c0;
}
header.site .btn,header.site .btn:hover{
  background-image:
    radial-gradient(ellipse 20% 175% at 80% -8%,rgba(255,255,255,.2) 0 56%,rgba(255,255,255,.05) 57% 66%,transparent 67%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.075) 0 1px,rgba(0,0,0,.07) 1px 2px),
    linear-gradient(180deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.1) 9%,rgba(255,255,255,0) 40%),
    linear-gradient(90deg,#08408c 0%,#135cb4 20%,#1f78d6 40%,#2f8aea 50%,#1f68c0 64%,#33609f 82%,#35578f 100%) !important;
  background-color:#1f78d6;
}
.btn-primary,.btn-teal,header.site .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 2px rgba(0,0,0,.14),0 1px 2px rgba(5,20,50,.25)}

/* Square buttons, all caps, no arrows */
.btn,header.site .btn{clip-path:none !important;border-radius:0;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;gap:0}
.btn::after,header.site .btn::after{content:none !important;display:none !important}
header.site .btn{font-size:.74rem;letter-spacing:.1em}

/* Calmer button animation: a small, gentle hover drift (was a full sweep) */
.btn-primary,.btn-teal,header.site .btn{transition:background-position .5s ease-out,filter .25s,color .25s}
.btn-primary:hover,.btn-teal:hover,header.site .btn:hover,
.btn-primary:focus-visible,.btn-teal:focus-visible,header.site .btn:focus-visible{
  background-position:calc(var(--shx,50%) + 14%) 0,0 0,0 0,0 0 !important;
}

/* Buttons are fully static: the plate texture and the curved reflection stay, nothing moves on scroll or hover */
.btn-primary,.btn-teal,header.site .btn,
.btn-primary:hover,.btn-teal:hover,header.site .btn:hover,
.btn-primary:focus-visible,.btn-teal:focus-visible,header.site .btn:focus-visible{
  animation:none !important;transition:none !important;
  background-size:260% 100%,auto,auto,auto !important;
  background-position:50% 0,0 0,0 0,0 0 !important;
}
.btn,.btn:hover,.btn:focus-visible{transition:none !important;animation:none !important}

/* Branded underline is back: on hover or focus, a thin line in the logo's colours draws across the bottom of the button */
.btn::before{display:block !important;position:absolute;left:0;right:0;bottom:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg,#27b6c9,#7fc241,#f9c41b,#f58220,#e8433c,#a63c96,#4b3a8f);
  transform:scaleX(0);transform-origin:left;transition:transform .45s ease-out !important}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.btn::before{transition:none !important}}

/* Flat buttons: the plate texture, gloss, brushing and reflection are removed. Solid brand colours only. */
.btn-primary,.btn-primary:hover,.btn-primary:focus-visible{background:#1d3f71 !important;background-image:none !important;box-shadow:none !important;text-shadow:none !important;filter:none !important}
.btn-teal,.btn-teal:hover,.btn-teal:focus-visible{background:#26aac3 !important;background-image:none !important;box-shadow:none !important;text-shadow:none !important;filter:none !important}
header.site .btn,header.site .btn:hover,header.site .btn:focus-visible{background:#2b5598 !important;background-image:none !important;box-shadow:none !important;text-shadow:none !important;filter:none !important}
.btn-ghost,.btn-ghost:hover{box-shadow:none !important;text-shadow:none !important}

/* Hover: the Bayside logo plate texture (deep left, bright centre, steel right, fine brushing, top gloss, soft reflection)
   appears on the solid button, together with the branded underline. Static: it just replaces the flat colour while hovered. */
.btn-primary:hover,.btn-primary:focus-visible{
  background-color:#1269c7 !important;
  background-image:
    radial-gradient(ellipse 20% 175% at 80% -8%,rgba(255,255,255,.2) 0 56%,rgba(255,255,255,.05) 57% 66%,transparent 67%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.075) 0 1px,rgba(0,0,0,.07) 1px 2px),
    linear-gradient(180deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.1) 9%,rgba(255,255,255,0) 40%),
    linear-gradient(90deg,#021f52 0%,#0a4aa0 20%,#1269c7 40%,#1b7bdc 50%,#1560b6 64%,#2a5698 82%,#2d4f86 100%) !important;
  background-size:100% 100%,auto,auto,auto !important;background-position:0 0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 2px rgba(0,0,0,.14),0 1px 2px rgba(5,20,50,.25) !important;
  text-shadow:0 1px 1px rgba(5,18,45,.45) !important;
}
.btn-teal:hover,.btn-teal:focus-visible{
  background-color:#1da6c0 !important;
  background-image:
    radial-gradient(ellipse 20% 175% at 80% -8%,rgba(255,255,255,.24) 0 56%,rgba(255,255,255,.06) 57% 66%,transparent 67%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,rgba(0,0,0,.07) 1px 2px),
    linear-gradient(180deg,rgba(255,255,255,.36) 0,rgba(255,255,255,.1) 9%,rgba(255,255,255,0) 40%),
    linear-gradient(90deg,#065366 0%,#0f8199 20%,#1da6c0 40%,#2dbcd6 50%,#1b93ab 64%,#2d7186 82%,#2f6478 100%) !important;
  background-size:100% 100%,auto,auto,auto !important;background-position:0 0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 2px rgba(0,0,0,.14),0 1px 2px rgba(5,20,50,.25) !important;
  text-shadow:0 1px 1px rgba(4,45,56,.4) !important;
}
header.site .btn:hover,header.site .btn:focus-visible{
  background-color:#1f78d6 !important;
  background-image:
    radial-gradient(ellipse 20% 175% at 80% -8%,rgba(255,255,255,.2) 0 56%,rgba(255,255,255,.05) 57% 66%,transparent 67%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.075) 0 1px,rgba(0,0,0,.07) 1px 2px),
    linear-gradient(180deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.1) 9%,rgba(255,255,255,0) 40%),
    linear-gradient(90deg,#08408c 0%,#135cb4 20%,#1f78d6 40%,#2f8aea 50%,#1f68c0 64%,#33609f 82%,#35578f 100%) !important;
  background-size:100% 100%,auto,auto,auto !important;background-position:0 0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 2px rgba(0,0,0,.14) !important;
  text-shadow:0 1px 1px rgba(5,18,45,.4) !important;
}

/* Smooth hover: the plate texture is its own layer (::after) that fades in over the flat colour, instead of
   swapping the background (CSS can't blend between gradients). Same artwork as before; the button itself stays flat. */
.btn-primary,.btn-teal,header.site .btn{position:relative;isolation:isolate}
.btn-primary:hover,.btn-primary:focus-visible{background:#1d3f71 !important;background-image:none !important;box-shadow:none !important;text-shadow:none !important}
.btn-teal:hover,.btn-teal:focus-visible{background:#26aac3 !important;background-image:none !important;box-shadow:none !important;text-shadow:none !important}
header.site .btn:hover,header.site .btn:focus-visible{background:#2b5598 !important;background-image:none !important;box-shadow:none !important;text-shadow:none !important}
.btn-primary::after,.btn-teal::after,header.site .btn::after{
  content:"" !important;display:block !important;position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity .7s cubic-bezier(.4,0,.2,1) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 2px rgba(0,0,0,.14);
}
.btn-primary::after{background-color:#1269c7;background-image:
  radial-gradient(ellipse 20% 175% at 80% -8%,rgba(255,255,255,.2) 0 56%,rgba(255,255,255,.05) 57% 66%,transparent 67%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.075) 0 1px,rgba(0,0,0,.07) 1px 2px),
  linear-gradient(180deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.1) 9%,rgba(255,255,255,0) 40%),
  linear-gradient(90deg,#021f52 0%,#0a4aa0 20%,#1269c7 40%,#1b7bdc 50%,#1560b6 64%,#2a5698 82%,#2d4f86 100%)}
.btn-teal::after{background-color:#1da6c0;background-image:
  radial-gradient(ellipse 20% 175% at 80% -8%,rgba(255,255,255,.24) 0 56%,rgba(255,255,255,.06) 57% 66%,transparent 67%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,rgba(0,0,0,.07) 1px 2px),
  linear-gradient(180deg,rgba(255,255,255,.36) 0,rgba(255,255,255,.1) 9%,rgba(255,255,255,0) 40%),
  linear-gradient(90deg,#065366 0%,#0f8199 20%,#1da6c0 40%,#2dbcd6 50%,#1b93ab 64%,#2d7186 82%,#2f6478 100%)}
header.site .btn::after{background-color:#1f78d6;background-image:
  radial-gradient(ellipse 20% 175% at 80% -8%,rgba(255,255,255,.2) 0 56%,rgba(255,255,255,.05) 57% 66%,transparent 67%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.075) 0 1px,rgba(0,0,0,.07) 1px 2px),
  linear-gradient(180deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.1) 9%,rgba(255,255,255,0) 40%),
  linear-gradient(90deg,#08408c 0%,#135cb4 20%,#1f78d6 40%,#2f8aea 50%,#1f68c0 64%,#33609f 82%,#35578f 100%)}
.btn-primary:hover::after,.btn-primary:focus-visible::after,
.btn-teal:hover::after,.btn-teal:focus-visible::after,
header.site .btn:hover::after,header.site .btn:focus-visible::after{opacity:1}
@media (prefers-reduced-motion:reduce){.btn-primary::after,.btn-teal::after,header.site .btn::after{transition:none !important}}
.btn-primary:hover::after,.btn-primary:focus-visible::after,.btn-teal:hover::after,.btn-teal:focus-visible::after,
header.site .btn:hover::after,header.site .btn:focus-visible::after{transform:none !important}

/* Bigger header: taller bar, larger logo, larger menu and button text */
header.site img.logo{height:124px}
nav.main{font-size:1rem;gap:36px}
header.site .btn{font-size:.86rem;padding:16px 26px}
@media (max-width:560px){
  header.site .wrap{height:100px}
  header.site img.logo{height:78px}
  nav.main .btn{font-size:.75rem;padding:11px 14px}
}

/* Procedures dropdown in the main nav */
nav.main .nav-dd{position:relative;display:inline-flex;align-items:center;align-self:center}
nav.main .nav-dd .dd-menu{position:absolute;top:100%;left:-18px;min-width:250px;padding:14px 0 8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:30}
nav.main .nav-dd .dd-menu::before{content:"";position:absolute;inset:14px 0 0 0;background:#fff;box-shadow:0 14px 30px rgba(10,30,60,.22);z-index:-1}
nav.main .nav-dd:hover .dd-menu,nav.main .nav-dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:none}
nav.main .nav-dd .dd-menu a{display:block;padding:10px 22px;color:#1d3f71;font-size:.9rem;font-weight:500;text-transform:none;letter-spacing:0;white-space:nowrap;opacity:1}
nav.main .nav-dd .dd-menu a:hover,nav.main .nav-dd .dd-menu a:focus-visible{background:#eef3fa;color:#26aac3}
nav.main .nav-dd .dd-menu a.dd-all{margin-top:6px;border-top:1px solid #dde4ec;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
@media (max-width:980px){nav.main .nav-dd.hide-m{display:none}}
@media (prefers-reduced-motion:reduce){nav.main .nav-dd .dd-menu{transition:none}}

/* Locations: Google map + room list */
.locs{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:start;margin-top:26px}
.locs-map{border-radius:10px;overflow:hidden;border:1px solid #dde4ec;background:#e8eef6;position:sticky;top:176px}
.locs-frame{display:block;width:100%;height:520px;border:0}
.locs-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.locs-item{background:#fff;border:1px solid #dde4ec;border-radius:8px;overflow:hidden;position:relative}
.locs-item.on{border-color:#26aac3;box-shadow:0 6px 18px rgba(29,63,113,.12)}
.locs-item.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(#26aac3,#1d3f71)}
.locs-h{margin:0;font-size:1rem}
.locs-toggle{all:unset;box-sizing:border-box;display:block;width:100%;padding:16px 20px;cursor:pointer}
.locs-toggle:focus-visible{outline:2px solid #26aac3;outline-offset:-2px}
.locs-tag{display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#26829a;margin-bottom:4px}
.locs-title{display:block;font-size:1.1rem;font-weight:500;color:#1d3f71}
.locs-panel{display:none;padding:0 20px 18px}
.locs-item.on .locs-panel{display:block}
.locs-panel address{font-style:normal;color:#14212e;line-height:1.6;margin-bottom:12px}
.locs-panel .locs-note{color:#3d4b59;font-size:.92rem;line-height:1.55;margin:-4px 0 12px}
.locs-actions{display:flex;flex-wrap:wrap;gap:10px 22px}
.locs-actions a{color:#1d3f71;font-weight:600;text-decoration:none;border-bottom:2px solid #26aac3;white-space:nowrap}
.locs-actions a:hover{color:#26aac3}
.locs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:980px){.locs{grid-template-columns:1fr}.locs-map{position:static}.locs-frame{height:340px}}

/* Graphic behind the doctor fades in slowly on load (opacity only, so the scroll parallax transform is untouched). */
@keyframes hd-ghost-in{from{opacity:0}to{opacity:.09}}
@keyframes hd-far-in{from{opacity:0}to{opacity:.3}}
.hd-ghost{animation:hd-ghost-in 3.2s ease-out .3s both}
.hd-sh.l{animation:hd-far-in 3.2s ease-out .8s both}
@media (prefers-reduced-motion:reduce){.hd-ghost,.hd-sh.l{animation:none}}

/* Procedure card headings in capitals (CSS only, the text itself is unchanged). */
.card h3{text-transform:uppercase;letter-spacing:.04em}

/* Header fit: with Patient information added, keep the labels and logo from being squeezed. */
nav.main{gap:24px;flex-shrink:0}
nav.main a.roll,nav.main .nav-dd{flex-shrink:0;white-space:nowrap}
header.site img.logo{flex-shrink:0}
@media (max-width:1300px){nav.main{gap:16px;font-size:.78rem;letter-spacing:.04em}header.site img.logo{height:84px;min-width:0;width:auto;max-width:none}header.site .btn{padding:10px 14px}}

/* Practice band: Brisbane Face and Jaw Surgery up front (his form: "prominently, on the homepage") */
.practice-band{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0}
.practice-band .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.practice-band img{height:56px;width:auto;max-width:100%}
.practice-band p{margin:0;flex:1 1 320px;color:var(--ink)}
.practice-band strong{color:var(--navy)}
.also-treated{margin:28px 0 0;color:var(--muted)}
.also-treated a{color:var(--navy-2)}
.pubs{margin:0 0 26px}
.pubs ol{margin:14px 0 0;padding-left:20px;color:#2c3e50;font-size:15px;line-height:1.55}
.pubs li{margin:0 0 10px}

/* Hero backdrop: a soft studio-wall gradient (light behind Dr Tuckett, cooling to a grey-lavender toward the text) and a shadow cast onto the wall beside him. */
.hero{background:radial-gradient(ellipse 52% 95% at 78% 52%,#ffffff 0,rgba(255,255,255,.85) 28%,rgba(255,255,255,0) 72%),linear-gradient(90deg,#f7f8fd 0,#eceff7 100%)}
/* The shadow falls down and slightly right, so none of it reaches left of the picture's own box: the smooth-hover mask cuts off anything outside that box, and the old left-falling shadow was sliced flat into a visible vertical seam beside his arm. */
.hero figure img{filter:drop-shadow(12px 24px 14px rgba(24,36,64,.24))}
@media (max-width:900px){
  .hero{background:linear-gradient(180deg,#f7f8fd 0,#e8ebf4 100%)}
  .hero figure img{filter:drop-shadow(0 10px 22px rgba(24,36,64,.22))}
}

/* Eyebrow labels: larger and heavier, with a short accent bar, so they read as a real heading tier. */
.eyebrow{font-size:clamp(15px,1.25vw,18px);letter-spacing:.12em;font-weight:700;color:#14778c;display:flex;align-items:center;gap:12px;margin:0 0 16px}
.eyebrow::before{content:"";flex:0 0 28px;height:3px;background:var(--teal)}
.hero .eyebrow{font-size:clamp(15px,1.15vw,17px);letter-spacing:.1em}
@media (max-width:560px){.eyebrow{font-size:14px;letter-spacing:.1em}.hero .eyebrow{font-size:15px}}

/* Procedure cards on the homepage: title above the image, no description. */
#procedures .card .body{padding:16px 18px 14px;order:0}
#procedures .card h3{margin:0}
#procedures .card .ph{order:1}

/* Homepage procedure tiles: compact, six across on wide screens. */
#procedures{padding:44px 0 52px}
#procedures .grid{grid-template-columns:repeat(6,1fr);gap:14px}
#procedures .card .body{padding:12px 14px 10px}
#procedures .card h3{font-size:13.5px;line-height:1.3;letter-spacing:.03em}
#procedures .card .ph{aspect-ratio:3/2}
@media (max-width:1200px){#procedures .grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:760px){#procedures .grid{grid-template-columns:repeat(2,1fr);gap:10px}#procedures .card h3{font-size:12.5px}}

/* About photo: shown in full (no crop), pinned beside the long text on wide screens only. */
/* The photo is a cut-out of him standing in front of a pale panel: his head and arms run past the panel's top and sides, so he looks like he is
   stepping out of the frame. The panel's bottom edge cuts him off flush (clip-path leaves the other three sides open). Sizes are percentages of
   the panel's width, so it scales as one piece. */
.about .about-frame{position:sticky;top:164px;align-self:start;box-sizing:content-box;padding-top:18%;aspect-ratio:100/116;clip-path:inset(-60% -12% 0 -12%)}
/* The element's own top padding is the room his head needs above the panel, so when the frame sticks under the header (152px tall) his head
   is not cut off by it. The panel itself is drawn by ::before, flush with the bottom. */
.about .about-frame::before{content:"";position:absolute;left:0;right:0;bottom:0;aspect-ratio:100/116;border-radius:var(--radius);background:linear-gradient(160deg,#dde7f5,#f2f6fb)}
.about .about-frame img.about-photo{position:absolute;left:-7%;bottom:0;width:114%;max-width:none;height:auto;aspect-ratio:auto;object-fit:fill;border-radius:0;transform:none;display:block}
@media (max-width:900px){.about .about-frame{position:relative;top:auto;max-width:520px;margin:0 auto}}

/* Very wide screens: keep the header and hero composition centred instead of stretching to the edges. */
@media (min-width:1700px){
  header.site .wrap,.hero .wrap{max-width:calc(var(--max) + 140px);margin-left:auto;margin-right:auto}
}

/* Homepage tiles: every image box the same size and every title row the same height, so the images line up. */
#procedures .card{background:#fff}
#procedures .card .body{min-height:62px;display:flex;align-items:center}
#procedures .card .ph{flex:1 1 auto;aspect-ratio:3/2;background:#fff}
#procedures .card .ph img{width:100%;height:100%;object-fit:cover;display:block}
#procedures .card[href="orthognathic-surgery.html"] .ph img{filter:brightness(1.07)}
#procedures .card[href="all-on-x.html"] .ph{background:#eaf0f8}
#procedures .card[href="all-on-x.html"] .ph img{object-fit:contain} /* the whole All-on-4 / All-on-X comparison shows, not a cropped middle */

/* About band: full-width "About Dr Joel Tuckett" block before the footer on every inner page. */
.about-band{background:#f3f3f9;padding:clamp(48px,6vw,84px) 0}
.about-band .ab-grid{display:grid;grid-template-columns:minmax(260px,.62fr) 1.38fr;gap:clamp(28px,4vw,64px);align-items:center;max-width:1180px}
.about-band img{width:100%;height:auto;aspect-ratio:4/4.9;object-fit:cover;object-position:50% 34%;display:block;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,#000 86%,transparent 100%)}
.ab-title{margin:0;font-weight:300;text-transform:uppercase;letter-spacing:.34em;font-size:clamp(19px,2vw,28px);color:var(--navy);line-height:1.3}
.ab-title::after{content:"";display:block;width:120px;height:1px;background:var(--navy);margin:26px 0 30px}
.about-band p{margin:0 0 18px;color:#6f7280;font-size:16px;line-height:1.75;max-width:760px}
.about-band p.ab-lead{color:#232842;font-weight:700}
.about-band .btn{margin-top:12px}
@media (max-width:860px){.about-band .ab-grid{grid-template-columns:1fr}.about-band img{max-width:380px;margin:0 auto}.ab-title{letter-spacing:.24em}}

/* Nav hover: a faint tint wipes in from the left behind the link, its leading edge cut at a slight angle (a nod to the logo shards),
   with a hairline underline drawn at the same pace. Text colour does not change. */
nav.main a.roll{position:relative;isolation:isolate;overflow:visible;height:auto;line-height:1.35em;padding:6px 2px}
nav.main a.roll::before{content:"";position:absolute;inset:-3px -12px;z-index:-1;background:rgba(255,255,255,.09);clip-path:polygon(-12% 0,-12% 0,-20% 100%,-12% 100%);transition:clip-path .7s cubic-bezier(.22,.61,.36,1)}
nav.main a.roll::after{content:"";position:absolute;left:2px;right:2px;bottom:1px;height:1px;background:rgba(255,255,255,.5);transform:scaleX(0);transform-origin:left center;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
nav.main a.roll:hover::before,nav.main a.roll:focus-visible::before{clip-path:polygon(0 0,108% 0,100% 100%,0 100%)}
nav.main a.roll:hover::after,nav.main a.roll:focus-visible::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){nav.main a.roll::before,nav.main a.roll::after{transition:none}}

/* Ultrawide monitors: the content width steps up with the screen instead of staying at 1500px, on every page. */
@media (min-width:1800px){:root{--max:1760px}}
@media (min-width:2400px){:root{--max:2200px}}
@media (min-width:3000px){:root{--max:2640px}}
@media (min-width:1800px){
  .about-band .ab-grid{max-width:calc(var(--max) - 320px)}
  .jaw .wrap{max-width:max(1800px,calc(var(--max) + 300px))}
}

/* Ultrawide hero: a taller hero and a bigger portrait so the composition fills the extra width. */
@media (min-width:2400px){
  .hero .wrap{min-height:clamp(1000px,31vw,1400px);grid-template-columns:minmax(380px,1fr) minmax(0,min(58%,1560px))}
  .hero .copy{max-width:860px}
  .hero h1{font-size:clamp(64px,2.5vw,92px)}
  .hero p.lead{font-size:clamp(22px,.85vw,28px);max-width:700px}
  .hero .eyebrow{font-size:20px}
}

/* Dropdown items: the pale highlight wipes in from the left, calmly. */
nav.main .nav-dd .dd-menu a{background:linear-gradient(#eef3fa,#eef3fa) no-repeat left center/0% 100%;transition:background-size .5s cubic-bezier(.22,.61,.36,1),color .3s ease}
nav.main .nav-dd .dd-menu a:hover,nav.main .nav-dd .dd-menu a:focus-visible{background:linear-gradient(#eef3fa,#eef3fa) no-repeat left center/100% 100%;color:#1d3f71}
@media (prefers-reduced-motion:reduce){nav.main .nav-dd .dd-menu a{transition:none}}

/* Mobile menu (built by site.js). Hamburger and panel only exist below 980px. */
.nav-toggle,.m-menu{display:none}
@media (max-width:980px){
  header.site .wrap{gap:12px}
  nav.main{margin-left:auto}
  nav.main > a.roll,nav.main > .nav-dd{display:none !important}
  .nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;width:46px;height:46px;padding:0 11px;margin:0;background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:4px;cursor:pointer;flex:0 0 auto}
  .nav-toggle span{display:block;height:2px;background:#fff;transition:transform .3s ease,opacity .2s ease}
  .nav-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .m-menu{display:block;position:absolute;left:0;right:0;top:100%;z-index:60;background:#1d3f71;border-top:1px solid rgba(255,255,255,.14);box-shadow:0 18px 30px rgba(10,30,60,.28);max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);overflow-y:auto;padding:6px clamp(20px,3vw,56px) 26px}
  .m-menu[hidden]{display:none}
  .m-link,.m-dd > summary{display:block;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;list-style:none}
  .m-dd > summary::-webkit-details-marker{display:none}
  .m-dd > summary{display:flex;justify-content:space-between;align-items:center}
  .m-dd > summary::after{content:"";width:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translateY(-2px);transition:transform .25s ease}
  .m-dd[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
  .m-sub{padding:4px 0 10px 14px;border-bottom:1px solid rgba(255,255,255,.12)}
  .m-sub a{display:block;padding:11px 0;color:rgba(255,255,255,.88);text-decoration:none;font-size:.95rem}
  .m-foot{display:flex;flex-direction:column;gap:16px;align-items:flex-start;padding-top:22px}
  .m-tel{color:#fff;text-decoration:underline;text-underline-offset:3px;font-size:1rem}
  html.m-menu-open{overflow:hidden}
}
@media (max-width:560px){nav.main .btn{padding:9px 12px;font-size:12px}}
@media (max-width:980px){
  /* the FAQ accordion rules (borders, plus sign) must not leak into the menu */
  .m-menu .m-dd{border:0;padding:0}
  .m-menu .m-dd > summary{font-weight:500;color:#fff}
  .m-menu .m-link{font-weight:500}
  .m-menu .m-dd > summary::after,.m-menu .m-dd[open] > summary::after{content:"";float:none;font-size:0;color:transparent}
  .m-menu .m-sub{border-bottom:1px solid rgba(255,255,255,.12)}
}

/* Buttons: no underline line on hover or focus (the logo-colour sweep is off). */
.btn::before,.btn:hover::before,.btn:focus-visible::before{display:none !important;content:none !important;transform:none !important}

/* Phone layout, closer to his current site: logo and hamburger only in the header, portrait first with the headline over it,
   full-width stacked buttons, then single-column procedure tiles each with a Find out more button. */
.card-more{display:none}
@media (max-width:980px){
  nav.main{display:none}
  .nav-toggle{margin-left:auto;border:0;background:transparent;width:50px;height:50px}
  .nav-toggle span{height:2px;background:#fff}
}
@media (max-width:700px){
  .hero .wrap{display:grid;grid-template-columns:1fr;min-height:0;padding:0}
  .hero .copy{display:contents}
  .hero h1{grid-row:1;grid-column:1;z-index:3;align-self:start;margin:0;padding:34px 20px 0;max-width:62%;font-size:clamp(32px,9vw,42px)}
  .hero figure{grid-row:1;grid-column:1;min-height:460px;margin:0 0 0 18%}
  .hero .eyebrow{grid-row:2;padding:22px 20px 0;margin:0}
  .hero p.lead{grid-row:3;padding:0 20px;margin:0 0 22px;max-width:none}
  .hero .actions{grid-row:4;flex-direction:column;padding:0 20px;gap:10px}
  .hero .actions .btn{width:100%;box-sizing:border-box;justify-content:center;text-align:center}
  .hero .affil{grid-row:5;padding:26px 20px 0}
  .hero .hero-creds-alt{grid-row:6;padding:0 20px}
  .hero-badges{display:none}
  .practice-band{text-align:center}
  .practice-band .wrap{flex-direction:column}
  #procedures{background:#f4f4fa;padding:40px 0 50px}
  #procedures .grid{grid-template-columns:1fr;gap:36px}
  #procedures .card{background:transparent;border:0;text-align:center;overflow:visible;box-shadow:none}
  #procedures .card .body{justify-content:center;padding:0 0 14px;min-height:0}
  #procedures .card h3{font-size:21px;letter-spacing:.04em}
  #procedures .card .ph{flex:none;aspect-ratio:16/10;background:transparent}
  .card-more{display:block;margin:18px auto 0;width:min(100%,340px);box-sizing:border-box;padding:13px 0;border:1px solid #1d3f71;color:#1d3f71;font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
}
@media (max-width:700px){
  .hero h1{max-width:46%;font-size:clamp(28px,7.6vw,38px);padding-top:32px}
  .hero figure{margin-left:30%}
  .hero .eyebrow{margin-bottom:10px}
  .practice-band p{flex:none}
  #procedures .card .ph{order:1}
  #procedures .card .card-more{order:2}
}


/* Laptop widths: a smaller portrait and a narrower text column so his face doesn't sit under the text. */
@media (min-width:981px) and (max-width:1480px){
  .hero .wrap{min-height:560px}
  .hero figure img{height:84%}
  .hero .copy{max-width:470px}
  .hero h1{font-size:clamp(32px,3.8vw,46px)}
  .hero p.lead{font-size:16.5px;max-width:440px}
}
@media (min-width:981px) and (max-width:1120px){
  .hero figure img{height:68%}
  .hero .copy{max-width:400px}
  .hero p.lead{font-size:15.5px;max-width:380px}
}

/* Buttons: no fine horizontal lines in the hover overlay. The gloss and colour stay; the brushed texture and the thin inset edge lines go. */
.btn-primary::after{background-image:
  radial-gradient(ellipse 20% 175% at 80% -8%,rgba(255,255,255,.2) 0 56%,rgba(255,255,255,.05) 57% 66%,transparent 67%),
  linear-gradient(180deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.1) 9%,rgba(255,255,255,0) 40%),
  linear-gradient(90deg,#021f52 0%,#0a4aa0 20%,#1269c7 40%,#1b7bdc 50%,#1560b6 64%,#2a5698 82%,#2d4f86 100%) !important}
.btn-teal::after{background-image:
  radial-gradient(ellipse 20% 175% at 80% -8%,rgba(255,255,255,.24) 0 56%,rgba(255,255,255,.06) 57% 66%,transparent 67%),
  linear-gradient(180deg,rgba(255,255,255,.36) 0,rgba(255,255,255,.1) 9%,rgba(255,255,255,0) 40%),
  linear-gradient(90deg,#065366 0%,#0f8199 20%,#1da6c0 40%,#2dbcd6 50%,#1b93ab 64%,#2d7186 82%,#2f6478 100%) !important}
header.site .btn::after{background-image:
  radial-gradient(ellipse 20% 175% at 80% -8%,rgba(255,255,255,.2) 0 56%,rgba(255,255,255,.05) 57% 66%,transparent 67%),
  linear-gradient(180deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.1) 9%,rgba(255,255,255,0) 40%),
  linear-gradient(90deg,#08408c 0%,#135cb4 20%,#1f78d6 40%,#2f8aea 50%,#1f68c0 64%,#33609f 82%,#35578f 100%) !important}
.btn-primary::after,.btn-teal::after,header.site .btn::after{box-shadow:none !important}

/* Ghost buttons (About Dr Joel Tuckett, About dental implants and the like): the same smooth gloss sweep as the navy buttons on hover.
   The enquiry button on the dark contact band keeps its own white hover. */
.btn-ghost{position:relative;isolation:isolate;transition:color .45s ease .1s}
.btn-ghost::after{content:"" !important;display:block !important;position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  transition:opacity .7s cubic-bezier(.4,0,.2,1) !important;
  background-color:#1269c7;background-image:
    radial-gradient(ellipse 20% 175% at 80% -8%,rgba(255,255,255,.2) 0 56%,rgba(255,255,255,.05) 57% 66%,transparent 67%),
    linear-gradient(180deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.1) 9%,rgba(255,255,255,0) 40%),
    linear-gradient(90deg,#021f52 0%,#0a4aa0 20%,#1269c7 40%,#1b7bdc 50%,#1560b6 64%,#2a5698 82%,#2d4f86 100%)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:#1d3f71 !important;background-image:none !important;color:#fff !important}
.btn-ghost:hover::after,.btn-ghost:focus-visible::after{opacity:1}
.btn-ghost:hover::after,.btn-ghost:focus-visible::after{transform:none !important} /* the old arrow-slide rule (.btn:hover::after) was sliding the gloss 6px to the right of the button */
.cta .btn-ghost::after{display:none !important}
.cta .btn-ghost:hover,.cta .btn-ghost:focus-visible{background:#fff !important;color:var(--blue) !important}
@media (prefers-reduced-motion:reduce){.btn-ghost,.btn-ghost::after{transition:none !important}}

/* Procedure tiles: 10 tiles, so two even rows of five on desktop, five rows of two on tablets, one column on phones. */
#procedures .grid{grid-template-columns:repeat(5,1fr)}
@media (max-width:900px){#procedures .grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){#procedures .grid{grid-template-columns:1fr}}

/* Ghost buttons: a lighter version of the gloss sweep (pale blue, navy text) instead of the dark navy. */
.btn-ghost::after{background-color:#d9e7fb;background-image:
    radial-gradient(ellipse 20% 175% at 80% -8%,rgba(255,255,255,.55) 0 56%,rgba(255,255,255,.18) 57% 66%,transparent 67%),
    linear-gradient(180deg,rgba(255,255,255,.6) 0,rgba(255,255,255,.2) 9%,rgba(255,255,255,0) 40%),
    linear-gradient(90deg,#c0d5f4 0%,#d0e1f8 22%,#e3edfc 42%,#eff5fe 52%,#dae7fa 68%,#c6daf5 86%,#bcd2f2 100%) !important}
.btn-ghost:hover,.btn-ghost:focus-visible{background:#dbe8fa !important;background-image:none !important;color:#1d3f71 !important}
.cta .btn-ghost:hover,.cta .btn-ghost:focus-visible{background:#fff !important;color:var(--blue) !important}

/* Nine tiles: a 3 by 3 grid on desktop; on tablets two across with the last tile spanning the row; one column on phones. */
#procedures .grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){#procedures .grid{grid-template-columns:repeat(2,1fr)}#procedures .grid .card:last-child:nth-child(odd){grid-column:1/-1}}
@media (max-width:700px){#procedures .grid{grid-template-columns:1fr}}
@media (min-width:701px) and (max-width:900px){#procedures .grid .card:last-child:nth-child(odd) .ph{aspect-ratio:21/8}}

/* About page photo: the empty wall above his head is cropped off. */
.about img.about-photo.crop-top{aspect-ratio:854/1060;object-fit:cover;object-position:50% 100%;height:auto}

/* ===== Hero glitch (hero-reveal.js) =====
   The scrubs portrait in .hero-alt is only a source image (never shown). The script clones it into .hero-gl slivers that
   flash over the suited portrait for a frame or two: each is a stationary clipped window onto a sideways-shifted copy.
   Desktop with a mouse only; everyone else keeps the plain hero. */
.hero-alt,.hero-gl,.hero-wp{display:none}
@media (min-width:981px) and (hover:hover) and (pointer:fine){
  .hero-gl{position:absolute;inset:0;z-index:1;pointer-events:none}
  /* Diagonal wipe: the two portraits blend with each other inside this group, never with the page behind it. */
  .hero-wp{position:absolute;inset:0;z-index:1;pointer-events:none;isolation:isolate}
  .hero-wp .hero-gl:last-child{mix-blend-mode:plus-lighter}
  .hero-gl.hot{filter:brightness(1.18) saturate(1.3)}
  .hero figure .hero-gl img{max-width:none;object-fit:fill}
}

/* Hero mode selector (preview control) and the smooth hover circle (hero-reveal.js). */
.hero-mode{display:none}
.hero-sm{display:none}
/* The circle's mask and position only exist in the desktop block below, but hero-reveal.js switches the layer on with an inline display:block on every device.
   Off desktop that left the whole scrubs portrait sitting unmasked over the suit, so both showed at once. Keep it off there. */
@media not all and (min-width:981px) and (hover:hover) and (pointer:fine){.hero-sm{display:none !important}}
@media (min-width:981px) and (hover:hover) and (pointer:fine){
  .hero-mode{display:flex;align-items:center;gap:4px;position:fixed;left:16px;bottom:16px;z-index:60;padding:5px 6px 5px 12px;background:#fff;border:1px solid #c9d3df;border-radius:999px;box-shadow:0 4px 18px rgba(20,33,46,.16);font:12px/1 Arial,Helvetica,sans-serif}
  .hero-mode .hm-k{color:#5b6b7b;margin-right:4px;letter-spacing:.04em;text-transform:uppercase;font-size:10.5px}
  .hero-mode button{border:0;background:transparent;color:#1d3f71;font:inherit;padding:8px 12px;border-radius:999px;cursor:pointer}
  .hero-mode button:hover{background:#e9eff9}
  .hero-mode button[aria-pressed="true"]{background:#1d3f71;color:#fff}
  .hero-mode button:focus-visible{outline:2px solid #2aa6c4;outline-offset:2px}
  .hero figure{--smx:0px;--smy:0px;--smbx:0px;--smby:0px;--smr:0.01px;--sx1:0px;--sy1:0px;--sbx1:0px;--sby1:0px;--sr1:0.01px;--sx2:0px;--sy2:0px;--sbx2:0px;--sby2:0px;--sr2:0.01px}
  .hero-sm{position:absolute;inset:0;z-index:1;pointer-events:none;
    -webkit-mask-image:radial-gradient(ellipse var(--smr) calc(var(--smr) * .7) at var(--smx) var(--smy),#000 0,#000 max(0px,calc(var(--smr) - 1px)),transparent var(--smr)),radial-gradient(ellipse var(--sr1) calc(var(--sr1) * .7) at var(--sx1) var(--sy1),#000 0,#000 max(0px,calc(var(--sr1) - 1px)),transparent var(--sr1)),radial-gradient(ellipse var(--sr2) calc(var(--sr2) * .7) at var(--sx2) var(--sy2),#000 0,#000 max(0px,calc(var(--sr2) - 1px)),transparent var(--sr2));
    mask-image:radial-gradient(ellipse var(--smr) calc(var(--smr) * .7) at var(--smx) var(--smy),#000 0,#000 max(0px,calc(var(--smr) - 1px)),transparent var(--smr)),radial-gradient(ellipse var(--sr1) calc(var(--sr1) * .7) at var(--sx1) var(--sy1),#000 0,#000 max(0px,calc(var(--sr1) - 1px)),transparent var(--sr1)),radial-gradient(ellipse var(--sr2) calc(var(--sr2) * .7) at var(--sx2) var(--sy2),#000 0,#000 max(0px,calc(var(--sr2) - 1px)),transparent var(--sr2))}
  .hero figure .hero-sm img{max-width:none;object-fit:fill}
  .hero.mode-smooth figure > img:first-child{
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 100%),radial-gradient(ellipse var(--smr) calc(var(--smr) * .7) at var(--smbx) var(--smby),transparent 0,transparent max(0px,calc(var(--smr) - 1px)),#000 var(--smr)),radial-gradient(ellipse var(--sr1) calc(var(--sr1) * .7) at var(--sbx1) var(--sby1),transparent 0,transparent max(0px,calc(var(--sr1) - 1px)),#000 var(--sr1)),radial-gradient(ellipse var(--sr2) calc(var(--sr2) * .7) at var(--sbx2) var(--sby2),transparent 0,transparent max(0px,calc(var(--sr2) - 1px)),#000 var(--sr2));
    mask-image:linear-gradient(180deg,#000 0,#000 100%),radial-gradient(ellipse var(--smr) calc(var(--smr) * .7) at var(--smbx) var(--smby),transparent 0,transparent max(0px,calc(var(--smr) - 1px)),#000 var(--smr)),radial-gradient(ellipse var(--sr1) calc(var(--sr1) * .7) at var(--sbx1) var(--sby1),transparent 0,transparent max(0px,calc(var(--sr1) - 1px)),#000 var(--sr1)),radial-gradient(ellipse var(--sr2) calc(var(--sr2) * .7) at var(--sbx2) var(--sby2),transparent 0,transparent max(0px,calc(var(--sr2) - 1px)),#000 var(--sr2));
    -webkit-mask-composite:source-in;mask-composite:intersect}
}

/* Intensity dial in the hero mode selector. */
@media (min-width:981px) and (hover:hover) and (pointer:fine){
  .hero-mode .hm-d{display:flex;align-items:center;gap:6px;margin-left:6px;padding-left:10px;border-left:1px solid #dde4ec;color:#5b6b7b;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase}
  .hero-mode .hm-d em{font-style:normal}
  .hero-mode.is-smooth .hm-d{display:none}
  .hero-mode input[type=range]{-webkit-appearance:none;appearance:none;width:110px;height:4px;border-radius:2px;margin:0 2px;background:linear-gradient(90deg,#1d3f71 var(--fill,100%),#c9d3df var(--fill,100%));cursor:pointer}
  .hero-mode input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #1d3f71}
  .hero-mode input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #1d3f71}
  .hero-mode input[type=range]:focus-visible{outline:2px solid #2aa6c4;outline-offset:4px}
}

/* Transition modes (hero-reveal.js): teleport sparkle, phone box, smoke. */
.hero-glow,.hero-flash,.hero-smoke,.hero-box{display:none}
@media (min-width:981px) and (hover:hover) and (pointer:fine){
  .hero-mode{flex-wrap:wrap;max-width:min(820px,calc(100vw - 32px));border-radius:20px;row-gap:2px}
  .hero-mode button{padding:7px 10px}
  .hero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:source-in;mask-composite:intersect}
  .hero-glow-in{position:absolute;inset:0;filter:url(#hero-sparkle) drop-shadow(0 0 7px rgba(255,170,40,.95))}
  .hero-box{position:absolute;left:0;top:0;z-index:1;pointer-events:none;will-change:transform;filter:drop-shadow(0 18px 24px rgba(20,30,50,.35))}
  .hero-box svg{display:block;width:100%;height:100%}
  .hero-box .pane{fill:#cfe6f5;fill-opacity:calc(.32 + .68 * var(--g, 0))}
  .hero-flash{position:absolute;z-index:1;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,1),rgba(255,244,190,.85) 40%,rgba(255,235,150,0) 100%)}
  .hero-smoke{position:absolute;inset:0;z-index:1;pointer-events:none;filter:url(#hero-smoke) drop-shadow(0 8px 18px rgba(30,40,60,.28))}
  .hero-smoke i{position:absolute;left:0;top:0;border-radius:50%;background:radial-gradient(closest-side,rgba(250,251,253,.98) 0,rgba(229,232,239,.93) 48%,rgba(206,211,223,.55) 74%,rgba(206,211,223,0) 100%);will-change:transform,opacity}
}

/* Tooth fairy mode (hero-reveal.js): wings and stars behind him, wand in front. */
.hero-fairy{display:none}
@media (min-width:981px) and (hover:hover) and (pointer:fine){
  .hero-fairy{position:absolute;inset:0;pointer-events:none}
  .hero-fairy-back{z-index:-1}
  .hero-fairy-front{z-index:1}
  .hero-fairy svg{display:block;overflow:visible;animation:fy-in .9s ease-out both}
  .fy-tw{transform-box:fill-box;transform-origin:center;animation:fy-twinkle 2.4s ease-in-out infinite}
  .fy-flap{animation:fy-flap 2.6s ease-in-out infinite alternate}
  .fy-wandstar{animation:fy-pulse 1.9s ease-in-out infinite}
}
@keyframes fy-in{from{opacity:0}to{opacity:1}}
@keyframes fy-twinkle{0%,100%{opacity:.35;transform:scale(.72)}50%{opacity:1;transform:scale(1.18)}}
@keyframes fy-flap{from{transform:rotate(-5deg) scaleX(.97)}to{transform:rotate(6deg) scaleX(1.03)}}
@keyframes fy-pulse{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.13) rotate(9deg)}}

/* Shatter canvas, TV fuzz, and the foldable hero effect menu. */
.hero-shat{display:none}
@media (min-width:981px) and (hover:hover) and (pointer:fine){
  .hero-shat{position:absolute;left:0;top:0;z-index:1;pointer-events:none}
  .hero-mode .hm-k{display:flex;align-items:center;gap:6px;padding:7px 6px 7px 0;margin-right:4px;color:#5b6b7b;letter-spacing:.04em;text-transform:uppercase;font-size:10.5px;border-radius:999px}
  .hero-mode .hm-k:hover{background:transparent;color:#1d3f71}
  .hero-mode .hm-c{display:inline-block;font-size:12px;transition:transform .2s}
  .hero-mode.is-folded .hm-c{transform:rotate(-90deg)}
  .hero-mode.is-folded{padding:2px 8px 2px 12px;border-radius:999px;gap:0}
  .hero-mode.is-folded button[data-m],.hero-mode.is-folded .hm-d{display:none}
  .hero-mode.is-folded .hm-k{margin:0;padding:8px 0}
}

/* Fairy wand mode (hero-reveal.js): the flying tooth fairy and her star dust. */
.hero-fb,.hero-dust{display:none}
@media (min-width:981px) and (hover:hover) and (pointer:fine){
  .hero-dust{position:absolute;left:0;top:0;z-index:1;pointer-events:none}
  .hero-fb{position:absolute;left:0;top:0;z-index:1;pointer-events:none;transform-origin:0 0;filter:drop-shadow(0 8px 14px rgba(40,50,90,.25))}
  .hero-fb svg{display:block;overflow:visible}
  .hero-fb .fb-arm{transform:rotate(var(--wave,0deg))}
  .hero-fb .fb-wingL{transform-origin:50px 62px;animation:fb-flapL .16s ease-in-out infinite alternate}
  .hero-fb .fb-wingR{transform-origin:90px 62px;animation:fb-flapR .16s ease-in-out infinite alternate}
}
@keyframes fb-flapL{from{transform:rotate(-16deg)}to{transform:rotate(12deg)}}
@keyframes fb-flapR{from{transform:rotate(16deg)}to{transform:rotate(-12deg)}}

/* Click a triangle (hero-reveal.js), live in every hero mode: the top blue triangle floating over the hero is a button that plays the tooth fairy. */
@media (min-width:981px) and (hover:hover) and (pointer:fine){
  .hero .hd-sh[data-click] polygon{pointer-events:auto;cursor:pointer;transition:filter .15s}
  .hero .hd-sh[data-click] polygon:hover{filter:brightness(1.4) drop-shadow(0 0 8px rgba(70,150,255,.95))}
  .hero .hd-sh.s[data-click] polygon:first-child{animation:hd-glint 2.2s ease-in-out infinite}
}
@keyframes hd-glint{0%,100%{filter:none}50%{filter:drop-shadow(0 0 6px rgba(70,150,255,.9))}}


/* Seasonal versions (hero-reveal.js): Christmas. */
.hero-th,.hero-theme{display:none}
@media (min-width:981px) and (hover:hover) and (pointer:fine){
  .hero-th{position:absolute;inset:0;pointer-events:none}
  .hero-th-back{z-index:-1}
  .hero-th-front{z-index:1}
  .hero-th svg{display:block}
  .hero-theme{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
  .hero-theme .th-deco{position:absolute;inset:0}
  .hero-theme .th-cv{position:absolute;left:0;top:0}
  .th-bulb{animation:th-tw 1.6s ease-in-out infinite alternate;filter:drop-shadow(0 0 6px currentColor)}
}
@keyframes th-tw{from{opacity:.5}to{opacity:1}}


/* ---- Logo motion (logo-motion.js adds the nodes) ----
   The animated logo's idea on the rest of the site: colour arrives in small triangles that settle into place, and things assemble
   rather than break apart. Concept page: logo-concepts-demo.html. Hover effects only on devices with a mouse; reduced motion keeps
   every state change and drops the movement. */
:root{
  --lm-ease-out:cubic-bezier(0.23,1,0.32,1);
  --lm-ease-io:cubic-bezier(0.77,0,0.175,1);
  --lm-spec:#27b6c9,#7fc241,#f9c41b,#f58220,#e8433c,#a63c96,#4b3a8f; /* the logo's colours, as in .btn::before */
}

/* Buttons: four triangles settle into the top-right corner on hover or keyboard focus. The button keeps its square shape. */
.btn{--lm-s:24px;--lm-c1:#8db6ec;--lm-c2:#3f72c4;--lm-c3:#8db6ec;--lm-c4:#3f72c4}
.btn-teal{--lm-c1:#9cc2f2;--lm-c2:#1d3f71;--lm-c3:#9cc2f2;--lm-c4:#1d3f71}
header.site .btn{--lm-s:18px;--lm-c1:#a9c8f2;--lm-c2:#1d3f71;--lm-c3:#a9c8f2;--lm-c4:#1d3f71}
.cta .btn-ghost{--lm-c1:#6a9be0;--lm-c2:#1d3f71;--lm-c3:#6a9be0;--lm-c4:#1d3f71}
.btn .lm-c{--lm-h:calc(var(--lm-s) / 2);position:absolute;top:-.5px;right:-.5px;width:calc(var(--lm-s) + .5px);height:calc(var(--lm-s) + .5px);pointer-events:none;isolation:isolate}
.btn .lm-c i{position:absolute;display:block;z-index:1;opacity:0;transform:translate(14px,-14px) rotate(50deg) scale(.4);transition:opacity .14s linear,transform .22s var(--lm-ease-out)}
/* The shapes reach half a pixel past the button's top and right edges and overlap their neighbours by half a pixel, so no hairline
   of the button's own edge shows around or between them. The fourth is a full square tucked under the second. */
.btn .lm-c i:nth-child(1){left:0;top:0;width:calc(var(--lm-h) + .5px);height:calc(var(--lm-h) + 1px);background:var(--lm-c1);clip-path:polygon(0 0,100% 0,100% 100%,0 .5px)}
.btn .lm-c i:nth-child(2){left:calc(var(--lm-h) - .5px);top:0;width:calc(var(--lm-h) + 1px);height:calc(var(--lm-h) + 1px);background:var(--lm-c2);clip-path:polygon(0 0,100% 0,100% 100%);transition-delay:35ms}
.btn .lm-c i:nth-child(3){left:var(--lm-h);top:calc(var(--lm-h) + .5px);width:calc(var(--lm-h) + .5px);height:calc(var(--lm-h) + .5px);background:var(--lm-c3);clip-path:polygon(0 0,100% 0,100% 100%);transition-delay:70ms}
.btn .lm-c i:nth-child(4){left:var(--lm-h);top:0;width:calc(var(--lm-h) + .5px);height:calc(var(--lm-h) + 1px);background:var(--lm-c4);z-index:0;transition-delay:105ms}
.btn:focus-visible .lm-c i{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){
  .btn:hover .lm-c i{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .btn .lm-c i{transform:none;transition:none}
}

/* Form fields: a line in the logo's colours draws itself along the field you click into. The enquiry form's boxed fields get an
   outline traced round the box (an SVG rect); the referral form's underline-only fields get a line along the underline. The site's own
   focus styles stay as they are. */
.lm-f{position:relative}
.lm-ol{position:absolute;pointer-events:none;overflow:visible}
.lm-ol rect{fill:none;stroke:url(#lmGrad);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .18s var(--lm-ease-out)}
.lm-f:focus-within > .lm-ol rect{stroke-dashoffset:0;transition:stroke-dashoffset .32s var(--lm-ease-io)}
.lm-ul{position:absolute;display:block;height:2px;pointer-events:none;background:linear-gradient(90deg,var(--lm-spec));transform:scaleX(0);transform-origin:left;transition:transform .18s var(--lm-ease-out)}
.lm-f:focus-within > .lm-ul{transform:scaleX(1);transition:transform .32s var(--lm-ease-io)}
@media (prefers-reduced-motion:reduce){
  .lm-ol rect,.lm-f:focus-within > .lm-ol rect,.lm-ul,.lm-f:focus-within > .lm-ul{transition:none}
}

/* FAQs (inside #faq only): the plus sign becomes a triangle that turns when the answer opens, and the answer opens with a line in
   the logo's colours riding its leading edge. logo-motion.js adds .lm-ready, .lm-ans, .lm-open and .lm-scan. Without it the FAQs
   keep their plain plus and minus.
   The triangle's float box is the same size as the plus sign's (13.3px by 22px, no side margin), so a long question wraps exactly
   where it did before; the triangle itself is drawn inside that box. */
#faq summary::after,#faq details[open] summary::after{content:"";float:right;width:13.3px;height:22px;margin:3px 0 0;color:transparent;background:var(--teal-d);clip-path:polygon(0 4px,100% 11px,0 18px);transition:transform .22s var(--lm-ease-out)}
#faq details[open] summary::after{transform:rotate(90deg);background:linear-gradient(135deg,var(--lm-spec))}
#faq.lm-ready details[open] summary::after{transform:none;background:var(--teal-d)}
#faq.lm-ready details.lm-open summary::after{transform:rotate(90deg);background:linear-gradient(135deg,var(--lm-spec))}
#faq summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* The answer wrapper carries the gap that the paragraph's own top margin used to make (12px), as padding, so the wrapper measures the
   same whether or not it is being animated. It is a plain block, not flow-root: a block formatting context would be pushed
   beside the summary's floated triangle instead of running under it. */
.lm-ans{position:relative;padding-top:12px}
.lm-ans > :first-child{margin-top:0}
.lm-ans::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--lm-spec));opacity:0;transition:opacity .25s linear}
#faq details.lm-scan .lm-ans::after{opacity:1;transition:none}
@media (prefers-reduced-motion:reduce){
  #faq summary::after,#faq details[open] summary::after{transition:none}
}

/* Homepage tiles: bigger titles (they were 13.5px). Phones keep their own 21px rule above. The title row is tall enough for two lines,
   so when a long title such as Temporomandibular Joint (TMJ) wraps on a narrower screen, every image in the row still lines up. */
#procedures{--tile-t:clamp(16px,.55vw + 11.2px,22px)}
@media (min-width:701px){
  #procedures .card h3{font-size:var(--tile-t);line-height:1.25;letter-spacing:.04em}
  #procedures .card .body{padding:14px 16px 12px;min-height:calc(var(--tile-t) * 2.5 + 26px)}
}

/* Faint holographic shimmer on the pale graphic behind the doctor: the ghost head and the two large pale triangles in .hd-back.
   The small solid navy triangles in .hd-front are left alone. Iridescent bands (cyan, blue, violet, pink, gold, mint) drift slowly
   across each shape and are clipped to its outline: the head by its own mask, the triangles by a clipPath. Transform only, so it
   stays on the graphics card, and it sits inside the shapes' existing fade-in, so it arrives with them. */
@keyframes holo-drift{from{transform:translate3d(-14%,0,0)}to{transform:translate3d(14%,0,0)}}
@keyframes holo-slide{from{transform:translateX(-52px)}to{transform:translateX(52px)}}
.hd-ghost::after{content:"";position:absolute;top:0;bottom:0;left:-100%;width:300%;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(110deg,#00d4ff 0,#4d7cff 90px,#a65cff 180px,#ff4fb8 270px,#ffc46b 360px,#4dffc3 450px,#00d4ff 540px);
  animation:holo-drift 18s ease-in-out infinite alternate}
.holo-rect{opacity:.4;animation:holo-slide 16s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.hd-ghost::after,.holo-rect{animation:none}}

/* ===== Page intro (homepage; intro.js) =====
   While html.intro-on is set, a blue sheet covers the screen with a big copy of the logo drawing itself. A soft curved edge then peels the
   sheet away from the bottom-right corner, uncovering the page (which has not moved), while the logo glides into the bar and the menu fades in.
   If intro.js never runs, the head script in index.html takes the class off again and the page is simply the page. */
.intro-sheet,.intro-logo{display:none}
html.intro-on{background:#1d3f71}
html.intro-on .intro-sheet{display:block;position:fixed;left:0;top:0;width:100%;height:calc(100% + 400px);background:#1d3f71;z-index:19;pointer-events:none}
/* The big logo is as large as it can be without being magnified: its head art is only 305 pixels wide of 953, so the logo's width in
   CSS pixels is capped at 953 divided by the screen's pixel ratio (953 on a normal screen, 476 on a retina screen, and so on). */
html.intro-on{--intro-max:953px}
@media (min-resolution:1.5dppx),(-webkit-min-device-pixel-ratio:1.5){html.intro-on{--intro-max:635px}}
@media (min-resolution:2dppx),(-webkit-min-device-pixel-ratio:2){html.intro-on{--intro-max:476px}}
@media (min-resolution:3dppx),(-webkit-min-device-pixel-ratio:3){html.intro-on{--intro-max:318px}}
html.intro-on .intro-logo{display:block;position:fixed;left:50%;top:50%;width:min(94vw,var(--intro-max),170vh);transform:translate(-50%,-50%);transform-origin:0 0;z-index:21;pointer-events:none}
.intro-logo img{display:block;width:100%;height:auto}
.intro-glint{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0;
  -webkit-mask-image:url(img/logo-reverse-hi.png);mask-image:url(img/logo-reverse-hi.png);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:linear-gradient(105deg,transparent 36%,rgba(0,212,255,.95) 43%,rgba(166,92,255,.95) 48%,rgba(255,79,184,.95) 53%,rgba(255,196,107,.95) 58%,transparent 65%) 100% 0/300% 100% no-repeat}
html.intro-on header.site img.logo{visibility:hidden}
html.intro-on header.site::before,html.intro-on header.site::after{opacity:0}
html.intro-on nav.main,html.intro-on header.site .nav-toggle{transform:translate3d(100vw,0,0)}
html.intro-on .hero-mode{opacity:0;pointer-events:none}
html.intro-on:not(.intro-rise) .hd-ghost,html.intro-on:not(.intro-rise) .hd-sh.l{animation-play-state:paused}
@keyframes intro-fade{from{opacity:0}to{opacity:1}}
html.intro-done header.site::before,html.intro-done header.site::after,html.intro-done .hero-mode{animation:intro-fade .9s ease .1s both}

/* Pumpkin and witch (hero-reveal.js): hover the pumpkin and he turns into a witch; leave it and he is back in the suit. */
.hero-dr-back,.hero-dr-front,.hero-dr-pk{display:none}
@media (min-width:981px) and (hover:hover) and (pointer:fine){
  .hero-dr-back,.hero-dr-front,.hero-dr-pk{display:block;position:absolute;inset:0;pointer-events:none}
  .hero-dr-back{z-index:-1;opacity:0;transition:opacity .35s ease}
  .hero-dr-front{z-index:1;opacity:0;transition:opacity .35s ease}
  .hero-dr-pk{z-index:2}
  .hero-dr-pk .dr-pk-hit{pointer-events:auto;cursor:pointer;transition:filter .25s}
  .hero.dr-on .hero-dr-back,.hero.dr-on .hero-dr-front{opacity:1}
  .hero.dr-on .hero-dr-pk .dr-pk-hit{filter:drop-shadow(0 0 14px rgba(255,150,30,.85))}
  .hero.dr-on figure > img{filter:sepia(.3) hue-rotate(52deg) saturate(1.15) brightness(1.03) drop-shadow(-30px 22px 26px rgba(24,36,64,.22))}
  .dr-eyes{animation:dr-pulse 2.4s ease-in-out infinite alternate}
}
@keyframes dr-pulse{from{opacity:.65}to{opacity:1}}

/* All-on-X page: the full-arch illustration under the two parts */
.aox-fig{margin:34px 0 0;max-width:880px}
.aox-fig img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 14px 34px rgba(20,33,46,.12)}
.aox-fig figcaption{margin-top:10px;font-size:.86rem;color:var(--muted)}

/* Homepage service tiles: a soft brand gradient over every picture so the mixed clinical images read as one set (white backgrounds
   take the tint, x-rays stay readable). Multiply keeps the detail. Hovering a tile slowly lets the picture's own colours back. */
#procedures .card .ph{position:relative;isolation:isolate}
#procedures .card .ph::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(155deg,#aec6ea 0%,#9fc9dc 55%,#8fb3e0 100%);opacity:.9;transition:opacity 1.2s ease}
#procedures .card:hover .ph::after,#procedures .card:focus-visible .ph::after{opacity:0}

/* Photos of the Queen Street rooms (the roomshots band), and the homepage quick downloads tile. */
.roomshots{padding:44px 0}
.roomshots .title{margin-bottom:18px}
.rs-row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;justify-content:flex-start}
.rs-row figure{margin:0;flex:0 1 auto}
.rs-row img,.rs-row video{display:block;height:400px;width:auto;max-width:100%;border-radius:10px;background:#e9eef5;box-shadow:0 6px 22px rgba(24,36,64,.12)}
.rs-row figcaption{font-size:.86rem;color:var(--muted,#5b6b7b);margin-top:8px}
@media (max-width:700px){.rs-row figure{flex:1 1 100%}.rs-row img,.rs-row video{height:auto;width:100%}.rs-row video{aspect-ratio:9/16}}
.quickdl{padding:30px 0 6px}
.quickdl .qd-tile{display:flex;gap:16px;align-items:center;max-width:520px;padding:14px 16px;border:1px solid var(--line,#d5dde8);border-radius:12px;background:#fff;text-decoration:none;color:inherit}
.quickdl .qd-tile:hover{border-color:#1d3f71;box-shadow:0 6px 18px rgba(24,36,64,.12)}
.quickdl .qd-tile img{display:block;width:78px;height:auto;border-radius:4px;box-shadow:0 2px 8px rgba(24,36,64,.2)}
.quickdl .qd-tile b{display:block;color:#1d3f71;font-size:1.02rem}
.quickdl .qd-tile span{display:block;font-size:.9rem;color:#5b6b7b;margin:2px 0 8px}
.quickdl .qd-tile em{font-style:normal;font-weight:700;font-size:.85rem;color:#1d3f71;text-decoration:underline}

/* Christmas picked in the hero effect menu (hero-reveal.js): no Halloween strip, bats, pumpkin or witch. */
html.xmas-picked .halloween-strip,html.xmas-picked .halloween-bats,html.xmas-picked .hero-dr-back,html.xmas-picked .hero-dr-front,html.xmas-picked .hero-dr-pk{display:none !important}

/* Phones: the hidden corner triangles on a full-width button sit just past the page edge until hover, which made the page scroll sideways at 320px (TMJ page). Clip, not hidden, so sticky headers keep working. */
html,body{overflow-x:clip}

/* Phones and tablets: the hero portrait is cropped inside its box, which left a hard vertical edge through his jacket and a hard bottom edge. Fade both. */
@media (max-width:980px){.hero figure img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%),linear-gradient(180deg,#000 0,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18%),linear-gradient(180deg,#000 0,#000 100%);-webkit-mask-composite:source-in;mask-composite:intersect}}

/* Desktop hero, Dr Tuckett 31 Oct: the whole hero about 12% smaller (height, portrait, heading, text) and the text column wider. */
@media (min-width:981px){
  .hero .wrap{min-height:clamp(528px,29vw,704px)}
  .hero .copy{padding:63px 0;max-width:720px}
  .hero h1{font-size:clamp(30px,4.4vw,47.5px)}
  .hero p.lead{font-size:16.7px;max-width:620px}
}
@media (min-width:981px) and (max-width:1700px){.hero p.lead{max-width:500px}}

/* Phone hero (Dr Tuckett 31 Oct, concept 5): navy panel with the heading in white and him standing off the right edge; eyebrow, text and buttons on white below. No big intro on phones (index.html skips it at 700px and under). */
@media (max-width:700px){
  .hero{padding-top:0 !important}
  .hero figure{margin:0;min-height:340px;overflow:hidden;background:linear-gradient(160deg,#274c82,#1d3f71 60%,#162f57)}
  .hero figure > img{inset:auto;right:-34px;bottom:-4px;left:auto;top:auto;width:300px;height:auto;max-width:none;object-fit:fill;-webkit-mask-image:none;mask-image:none;filter:none}
  .hero h1{color:#fff;max-width:56%;font-size:clamp(27px,7.6vw,31px);padding-top:26px}
  .hero .eyebrow{padding-top:20px}
}

/* Dr Tuckett 1 Nov: portrait a bit more central (the whole figure, so every overlay moves with him). */
@media (min-width:981px){.hero figure{margin-right:clamp(30px,5vw,110px)}}

/* Header logo hover: the head cycles through the colour wheel (logo-motion.js adds .lm-head over the real logo, cut to the head). */
a.lm-logo{position:relative;display:inline-block}
a.lm-logo .lm-head{position:absolute;pointer-events:none;opacity:0;clip-path:inset(0 67.5% 0 0);transition:opacity .3s}
a.lm-logo:hover .lm-head,a.lm-logo:focus-visible .lm-head,a.lm-logo.lm-act .lm-head{opacity:1;animation:lm-hue 2.4s linear infinite;animation-play-state:paused}
a.lm-logo:hover .lm-head,a.lm-logo:focus-visible .lm-head,a.lm-logo.lm-scrolling .lm-head{animation-play-state:running}
@keyframes lm-hue{to{filter:hue-rotate(360deg)}}
@media (prefers-reduced-motion:reduce){a.lm-logo:hover .lm-head,a.lm-logo:focus-visible .lm-head,a.lm-logo.lm-act .lm-head{animation:none;opacity:0}}

/* Dr Tuckett 2 Nov: the jaw-model photo is a cut-out on a pale panel, zoomed out; his suit bleeds off the panel's left, top and bottom
   and the hand holding the model runs out past its right edge. Box = 100 units wide; panel from 11 to 81; figure 86.7 wide from 8. */
.torch-pop{position:relative;aspect-ratio:1631/1000;clip-path:inset(0 0 0 11% round var(--radius) 0 0 var(--radius))}
.torch-pop::before{content:"";position:absolute;top:0;bottom:0;left:11%;right:19%;border-radius:var(--radius);background:linear-gradient(160deg,#dde7f5,#f2f6fb)}
.torch-pop img{position:absolute;left:8%;bottom:0;width:86.7%;max-width:none;height:auto;aspect-ratio:auto;object-fit:fill;border-radius:0;display:block}

/* Shard lift: the one or two hero shards nearest the pointer rise while the reveal circle is open (shard-lift.js). */
@media (min-width:981px){
  .hd-sh{transition:translate .4s cubic-bezier(.2,.7,.2,1),scale .4s cubic-bezier(.2,.7,.2,1),filter .4s}
  .hd-sh.hd-lift{translate:0 -14px;scale:1.3;filter:drop-shadow(0 12px 9px rgba(18,40,90,.4))}
}
@media (prefers-reduced-motion:reduce){.hd-sh{transition:none}}

/* Dr Tuckett 2 Nov: procedure tiles sit in a narrower column with more margin at the sides, with smaller titles (the images shrink with the tiles). */
@media (min-width:701px){
  #procedures .wrap{max-width:1340px;padding-left:clamp(40px,5vw,84px);padding-right:clamp(40px,5vw,84px)}
  #procedures .card h3{font-size:clamp(14px,1.15vw,17px)}
}
/* Jaw-model photo: a wider column and a wider panel (from the figure's left edge to 88% of the box; the hand still runs out past it). */
@media (min-width:981px){
  .feature:has(.torch-pop){grid-template-columns:1fr 1.2fr}
  .torch-pop{clip-path:inset(0 0 0 8% round var(--radius) 0 0 var(--radius))}
  .torch-pop::before{left:8%;right:12%}
}

/* Jaw-model photo, 2 Nov: the full uncropped photo (3:2), so the container is the photo itself: rounded corners, no panel behind it. */
.torch-pop.torch-wide{aspect-ratio:1280/854;clip-path:none;border-radius:var(--radius);overflow:hidden}
.torch-pop.torch-wide::before{display:none}
.torch-pop.torch-wide img{position:static;left:auto;bottom:auto;width:100%;height:100%;object-fit:cover;border-radius:0}

/* The About photo's frame reaches up over the section above (his head pops out of the panel), so it was swallowing clicks on the buttons there. It has nothing clickable in it. */
.about .about-frame{pointer-events:none}

/* Phone: the two buttons under the implants copy stack full width with a gap, instead of two different-width blocks touching */
@media (max-width:700px){
  .feature .btn{display:flex;width:100%;box-sizing:border-box;justify-content:center;text-align:center}
  .feature .btn + .btn{margin-top:12px}
}


/* East shade (hero-reveal.js toggles .is-on while the pointer is on him): at rest the right side of the wall is a little darker; hovering him lifts the shade, so the wall lights up. Desktop only. */
.hero-lit{display:none}
@media (min-width:981px) and (hover:hover) and (pointer:fine){
  .hero-lit{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;opacity:1;transition:opacity .8s ease;
    background:linear-gradient(90deg,rgba(60,80,125,0) 38%,rgba(60,80,125,.10) 62%,rgba(60,80,125,.26) 100%)}
  .hero-lit.is-on{opacity:0}
}
@media (prefers-reduced-motion:reduce){.hero-lit,.hero-lit.is-on{transition:none}}

/* Header hover: the whole header gets the same sliding chrome shine the buttons have, at the buttons' hover speed. */
@media (hover:hover) and (pointer:fine){
  header.site:hover{background:linear-gradient(135deg,#1d3f71 0%,#234a82 14%,#3563a0 30%,#234a82 44%,#1d3f71 56%,#183968 70%,#1d3f71 84%,#1d3f71 100%);background-size:200% 200%;animation:chrome-slide 14s linear infinite}
  header.site:hover nav.main a{text-shadow:0 1px 1px rgba(8,20,45,.35)}
}
@media (prefers-reduced-motion:reduce){header.site:hover{animation:none}}

/* live build: the hero effect menu is for the preview only */
.hero-mode{display:none !important}