/* ============================================================
   Galeano Orthodontics — design system
   Brand: blue #008fcd / deep #005696, orange CTA #f15a24
   Type: Montserrat (display) + Figtree (body)
   Radius rule: buttons pill, cards 16px, inputs 10px
   ============================================================ */

:root{
  /* Full-dark theme (locked): deep blue-tinted darks, brand blue + orange accents */
  --blue:        #008fcd;
  --blue-deep:   #005696;
  --navy:        #0c2b44;
  --heading:     #f2f8fd;
  --ink:         #d9e9f6;
  --muted:       #9cbbd3;
  --orange:      #f15a24;
  --orange-dark: #d94a17;
  --paper:       #081c2e;
  --mist:        #0c2740;
  --mist-deep:   #123c5e;
  --card:        #0f2c46;
  --line:        #1e4265;
  --ocean:       linear-gradient(150deg,#083a63 0%,#005696 55%,#0069ae 100%);
  --sky-bright:  #3db6f2;
  --shadow-sm:   0 2px 12px rgba(0,0,0,.28);
  --shadow-md:   0 14px 34px rgba(0,0,0,.38);
  --shadow-lg:   0 26px 64px rgba(0,0,0,.5);
  --r-card:      16px;
  --r-input:    10px;
  --font-display:'Montserrat',Helvetica,Arial,sans-serif;
  --font-body:  'Figtree','Segoe UI',Helvetica,Arial,sans-serif;
  --wrap:        1200px;
  --ease:        cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

html, body{ overflow-x:clip; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--sky-bright); }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--heading); line-height:1.15; margin:0 0 .6em; }
h1{ font-size:clamp(2.1rem,4.6vw,3.4rem); font-weight:800; letter-spacing:-.02em; }
h2{ font-size:clamp(1.7rem,3.2vw,2.4rem); font-weight:800; letter-spacing:-.015em; }
h3{ font-size:1.25rem; font-weight:700; }
p{ margin:0 0 1em; }
.lead{ font-size:1.15rem; color:var(--muted); }

.wrap{ width:min(var(--wrap),calc(100% - 2.5rem)); margin-inline:auto; }
.section{ padding:clamp(4rem,9vw,6.5rem) 0; }

/* section backgrounds: gradients + radial glows, never flat */
.section--glow{
  background:
    radial-gradient(800px 420px at 88% 8%, rgba(0,143,205,.14), transparent 62%),
    linear-gradient(170deg,#081c2e 0%,#0a2136 100%);
}
.section--glow-alt{
  background:
    radial-gradient(760px 400px at 8% 92%, rgba(61,182,242,.1), transparent 60%),
    linear-gradient(190deg,#0a2136 0%,#081c2e 100%);
}
.section--mist{
  background:
    radial-gradient(900px 480px at 12% 10%, rgba(0,143,205,.16), transparent 60%),
    radial-gradient(700px 420px at 92% 88%, rgba(0,86,150,.32), transparent 62%),
    linear-gradient(160deg,#0a2338 0%,#0e2c48 55%,#113755 100%);
}
.section--navy{
  background:
    radial-gradient(760px 400px at 82% 18%, rgba(255,255,255,.14), transparent 58%),
    linear-gradient(135deg,#009fe0 0%,#0069ae 55%,#005696 100%);
}
.section--navy h2{ color:#fff; }
.section--navy p{ color:#dcf1fc; }
.section--ocean{
  background:
    radial-gradient(820px 440px at 85% 12%, rgba(61,182,242,.28), transparent 60%),
    var(--ocean);
}
.section--ocean h2{ color:#fff; }
.section--ocean .sec-head p{ color:#c6e5f8; }

/* ---- reveal (Divi up config: 1000ms ease-in-out, 6%, opacity 0) ---- */
.js .sect-up{ opacity:0; transform:translateY(6%); }
.js .sect-up.is-in{ opacity:1; transform:none; transition:opacity 1000ms ease-in-out,transform 1000ms ease-in-out; }
@media (prefers-reduced-motion:reduce){
  .js .sect-up{ opacity:1; transform:none; transition:none; }
}

/* ---- buttons: pill system ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  padding:.85rem 1.9rem; border-radius:999px; border:2px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s,border-color .25s;
}
.btn:active{ transform:translateY(1px) scale(.98); }
/* AA 1.4.3: button orange is a step deeper than the brand accent so white label text clears 4.5:1
   (#d1440e = 4.62:1, hover #b83c0c = 5.69:1). The brand --orange stays for accents/asterisks. */
.btn--orange{ background:#d1440e; color:#fff; box-shadow:0 8px 22px rgba(241,90,36,.32); }
.btn--orange:hover{ background:#b83c0c; transform:translateY(-2px); box-shadow:0 12px 28px rgba(241,90,36,.4); }
.btn--blue{ background:var(--blue); color:#fff; box-shadow:0 8px 22px rgba(0,143,205,.28); }
.btn--blue:hover{ background:var(--blue-deep); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:#cfe9fa; border-color:var(--sky-bright); }
.btn--ghost:hover{ background:var(--blue); border-color:var(--blue); color:#fff; transform:translateY(-2px); }
.btn--ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.btn--ghost-light:hover{ background:#fff; color:var(--blue-deep); }

/* ============================================================
   HEADER
   ============================================================ */
.topbar{
  background:linear-gradient(90deg,#030d18 0%,#0a2438 100%); color:#cfe3f2; font-size:.85rem;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:38px; }
.topbar__phones{ display:flex; gap:1.4rem; }
.topbar a{ color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; }
.topbar a:hover{ color:#bfe3f7; }
.topbar__right{ display:flex; align-items:center; gap:1.1rem; }
.lang-switch{ display:inline-flex; align-items:center; gap:6px; font-weight:700; letter-spacing:.04em; line-height:1; padding:4px 9px; border-radius:8px; border:1px solid rgba(255,255,255,.28); transition:background .2s var(--ease), border-color .2s var(--ease); }
.lang-switch:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); color:#fff; }
.lang-switch .ls-flag{ width:22px; height:15px; border-radius:2px; display:block; flex:0 0 auto; box-shadow:0 0 0 1px rgba(0,0,0,.18); }
/* phones: no room for two numbers — keep email + language, numbers live in the footer / contact */
@media (max-width:700px){
  .topbar__phones{ display:none; }
  .topbar__right{ flex:1; justify-content:space-between; }
}

/* JS wraps .topbar + .header in .site-head so both stick; scrolling down
   tucks the topbar away, scrolling up brings it back.
   IMPORTANT: we slide the whole head with transform (NOT a negative margin).
   A margin/height change on a sticky element at the top of the document makes
   the browser's scroll-anchoring nudge scrollTop to compensate, which fires a
   scroll event that flips the state back -> infinite flicker loop. transform is
   composited, changes no layout, so it can't trigger that loop. */
.site-head{ position:sticky; top:0; z-index:40; display:flex; flex-direction:column;
  transition:transform .35s var(--ease); will-change:transform; }
.site-head.is-collapsed{ transform:translateY(calc(-1 * var(--topbar-h, 38px))); }
.site-head .header{ position:relative; top:auto; }

.header{
  position:sticky; top:0; z-index:40;
  background:#fff;   /* no backdrop-filter: it would make the header the containing block of the fixed mobile nav */
  border-bottom:1px solid #e3edf4;
  transition:box-shadow .3s;
}
.header.is-stuck{ box-shadow:0 6px 24px rgba(12,43,68,.10); }
.header .wrap{ width:min(1300px,calc(100% - 2rem)); display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:72px; }
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand img{ height:44px; width:auto; }

/* ---- Header nav: desktop shows the horizontal menu (.nav) AND a hamburger;
   the hamburger opens a floating card drawer (.nav-drawer, cloned from .nav by
   JS, Kapital-style) at every width. On mobile the horizontal .nav + CTA hide
   and the drawer is the menu. ---- */
.header .wrap{ position:relative; }              /* anchors the absolute drawer */

/* ---------- horizontal menu (.nav) — desktop ---------- */
.nav{ display:flex; align-items:center; gap:.2rem; list-style:none; margin:0; padding:0; }
.nav > li{ position:relative; }
.nav > li > a, .nav > li > button{
  display:flex; align-items:center; gap:.3rem; white-space:nowrap;
  font-family:var(--font-display); font-weight:600; font-size:.8rem; letter-spacing:.01em;
  color:#0c2b44; text-decoration:none; background:none; border:0; cursor:pointer;
  padding:.9rem .52rem; border-radius:8px; transition:color .2s;
}
.nav > li > a:hover, .nav > li > button:hover, .nav > li.is-open > button{ color:#005696; } /* AA 1.4.3: 4.5:1 on white */
.nav > li > a.nav-pay{ color:#c2410c; font-weight:700; }
.nav > li > a.nav-pay:hover{ color:#9a3209; }
.nav > li > button .caret{ width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-1px); transition:transform .25s; opacity:.75; }
.nav > li.is-open > button .caret{ transform:rotate(-135deg) translateY(-2px); }
.nav > li > .sub{
  position:absolute; top:100%; left:0; min-width:240px;
  background:#fff; border:1px solid #e3edf4; border-radius:12px;
  box-shadow:0 18px 44px rgba(12,43,68,.16); padding:.5rem;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  list-style:none; margin:0; z-index:50;
}
.nav > li.is-open > .sub, .nav > li:hover > .sub, .nav > li:focus-within > .sub{ opacity:1; visibility:visible; transform:translateY(0); }
.nav .sub a{
  display:block; padding:.55rem .8rem; border-radius:8px;
  font-size:.88rem; font-weight:500; color:#2b4660; text-decoration:none;
  transition:background .18s,color .18s;
}
.nav .sub a:hover{ background:#eaf3f9; color:#005696; }

/* ---------- hamburger toggle (all widths) ---------- */
.nav-toggle{
  display:flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer;
  padding:.6rem; position:relative; z-index:60; flex-shrink:0;
}
.nav-toggle span{ width:24px; height:2.5px; background:#0c2b44; border-radius:2px; transition:transform .3s,opacity .3s; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

.header__cta{ box-shadow:0 8px 22px rgba(0,0,0,.25); flex-shrink:0; padding:.7rem 1.35rem; font-size:.85rem; }

/* ---------- floating card drawer (.nav-drawer, cloned by JS) ---------- */
.nav-drawer{
  position:absolute; top:calc(100% + 10px); right:0;
  width:min(360px, calc(100vw - 2rem));
  list-style:none; margin:0; padding:.5rem .9rem 1rem;
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  background:#fff; border:1px solid #e3edf4; border-radius:16px;
  box-shadow:0 24px 50px -22px rgba(12,43,68,.45);
  max-height:calc(100dvh - 6.5rem); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  opacity:0; transform:translateY(-8px); visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s linear .28s;
  z-index:55;
}
.nav-drawer.is-open{ opacity:1; transform:translateY(0); visibility:visible; pointer-events:auto; transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s; }
.nav-drawer > li{ border-bottom:1px solid #eef4f8; }
.nav-drawer > li:last-child{ border-bottom:0; }
.nav-drawer > li > a, .nav-drawer > li > button{
  display:flex; align-items:center; justify-content:space-between; gap:.3rem; width:100%;
  font-family:var(--font-display); font-weight:600; font-size:1rem; letter-spacing:.01em;
  color:#0c2b44; text-decoration:none; background:none; border:0; cursor:pointer;
  padding:.95rem .35rem; border-radius:8px; transition:color .2s;
}
.nav-drawer > li > a:hover, .nav-drawer > li > button:hover, .nav-drawer > li.is-open > button{ color:#005696; }
.nav-drawer > li > a.nav-pay{ color:#c2410c; font-weight:700; }
.nav-drawer .caret{ width:7px; height:7px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-1px); transition:transform .25s; opacity:.75; flex-shrink:0; }
.nav-drawer li.is-open > button .caret{ transform:rotate(-135deg) translateY(-2px); }
/* accordion submenus inside the drawer — opened/closed gently by JS (inline
   height + opacity animation, so the cascade can't fight it). This is the
   collapsed resting state; visibility:hidden also drops the links from tab order. */
.nav-drawer .sub{
  list-style:none; margin:0; padding:0 0 0 .6rem;
  height:0; overflow:hidden; opacity:0; visibility:hidden;
}
.nav-drawer .sub a{
  display:block; padding:.55rem .7rem; border-radius:8px;
  font-size:.9rem; font-weight:500; color:#2b4660; text-decoration:none;
  transition:background .18s,color .18s;
}
.nav-drawer .sub a:hover{ background:#eaf3f9; color:#005696; }

/* ---------- responsive: below 1080px the horizontal nav gives way to the
   hamburger drawer, but the Book Appointment CTA stays visible (it just gets
   more compact on small screens so logo + CTA + burger fit) ---------- */
@media (max-width:1080px){
  .nav{ display:none; }
  .header__cta{ margin-left:auto; }   /* nav hidden: push the CTA to the right so it sits next to the toggle */
  .header .wrap{ gap:.6rem; }         /* keep CTA snug against the hamburger */
}
@media (max-width:560px){
  .header .wrap{ gap:.45rem; }
  .brand img{ height:32px; }
  .header__cta{ padding:.5rem .8rem; font-size:.74rem; box-shadow:0 6px 16px rgba(0,0,0,.22); }
  .nav-toggle{ padding:.45rem; }
}
@media (max-width:360px){
  .brand img{ height:28px; }
  .header__cta{ padding:.45rem .65rem; font-size:.7rem; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 500px at 85% 20%, rgba(0,143,205,.3), transparent 60%),
    radial-gradient(620px 340px at 8% 88%, rgba(241,90,36,.12), transparent 62%),
    linear-gradient(155deg,#07293f 0%,#0a3d63 55%,#005696 100%);
}
.hero h1{ color:#fff; }
.hero h1 .accent{ color:var(--sky-bright); }
.hero .wrap{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center; padding-top:clamp(3rem,6vw,5rem); padding-bottom:clamp(3.5rem,7vw,6rem);
}
.hero__eyebrow{
  display:inline-block; font-family:var(--font-display); font-weight:700; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sky-bright);
  margin-bottom:1.1rem;
}
.hero__lead{ font-size:1.18rem; color:#b9d9ee; max-width:34rem; margin-bottom:1.8rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; }

.hero__media{ position:relative; }
.hero__media img{
  width:100%; aspect-ratio:5/4.6; object-fit:cover;
  border-radius:32px 120px 32px 32px;
  box-shadow:var(--shadow-lg);
}
.hero__badge{
  position:absolute; left:-1.2rem; bottom:2rem;
  background:#fff; border-radius:var(--r-card); box-shadow:var(--shadow-md);
  padding:.9rem 1.2rem; display:flex; align-items:center; gap:.8rem; max-width:270px;
}
.hero__badge-icon{
  width:44px; height:44px; flex-shrink:0; border-radius:50%;
  background:var(--orange); color:#fff; display:grid; place-items:center;
  font-size:1.3rem; font-weight:700;
}
.hero__badge strong{ display:block; font-family:var(--font-display); font-size:.92rem; color:var(--navy); line-height:1.3; }
.hero__badge span{ font-size:.8rem; color:#5b7288; }

@media (max-width:900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero__media{ order:-1; }
  .hero__media img{ aspect-ratio:16/10; border-radius:24px; }
  .hero__badge{ left:1rem; bottom:-1.2rem; }
  .hero{ padding-bottom:1.5rem; }
}

/* ---- trust strip ---- */
/* ============================================================
   HERO (home) — fixed video background, rotating text captions
   ============================================================ */
.hero-slider{ position:relative; overflow:hidden; min-height:clamp(520px,82vh,760px); display:flex; align-items:center; background:#07293f; }
.hero-slider__media{ position:absolute; inset:0; z-index:0; }
.hero-slider__media video{ width:100%; height:100%; object-fit:cover; }
.hero-slider::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(5,20,34,.9) 0%, rgba(7,41,63,.72) 45%, rgba(0,86,150,.34) 100%);
}
.hero-slider .wrap{ position:relative; z-index:2; }
.hero-captions{ display:grid; }
.hero-caption{
  grid-area:1/1; align-self:center; max-width:40rem;
  opacity:0; visibility:hidden; transition:opacity .7s var(--ease), visibility .7s;
}
.hero-caption.is-active{ opacity:1; visibility:visible; }
.hero-slide__eyebrow{
  display:inline-block; font-family:var(--font-display); font-weight:700; font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sky-bright); margin-bottom:1.1rem;
}
.hero-slide__title{
  font-family:var(--font-display); font-weight:800; color:#fff; letter-spacing:-.02em;
  font-size:clamp(2.3rem,5.2vw,4rem); line-height:1.08; margin:0 0 1.1rem;
}
.hero-slide__title .accent{ color:var(--sky-bright); }
.hero-slide__sub{ font-size:1.18rem; color:#cfe6f6; max-width:34rem; margin:0 0 1.9rem; }
.hero-slide__actions{ display:flex; flex-wrap:wrap; gap:.9rem; }
.js .hero-caption > *{ opacity:0; transform:translateY(24px); }
.js .hero-caption.is-active > *{ animation:heroIn .8s var(--ease) forwards; }
.hero-caption.is-active .hero-slide__eyebrow{ animation-delay:.15s; }
.hero-caption.is-active .hero-slide__title{ animation-delay:.3s; }
.hero-caption.is-active .hero-slide__sub{ animation-delay:.45s; }
.hero-caption.is-active .hero-slide__actions{ animation-delay:.6s; }
@keyframes heroIn{ to{ opacity:1; transform:none; } }
.hero-slider__dots{ position:absolute; z-index:5; left:0; right:0; bottom:1.6rem; display:flex; justify-content:center; gap:.6rem; }
.hero-slider__dots button{ position:relative; overflow:hidden; width:32px; height:4px; border-radius:2px; border:0; cursor:pointer; padding:0; background:rgba(255,255,255,.35); transition:width .3s; }
/* each bar fills like a progress meter: done = full, active = filling over the autoplay time */
.hero-slider__dots button::after{ content:""; position:absolute; inset:0; background:var(--sky-bright); transform:scaleX(0); transform-origin:left center; }
.hero-slider__dots button.is-done::after{ transform:scaleX(1); }
.hero-slider__dots button.is-active{ width:46px; }
.hero-slider__dots button.is-active::after{ transform:scaleX(1); }
.js .hero-slider__dots button.is-active::after{ animation:heroDotFill var(--auto,6s) linear forwards; }
.js .hero-slider__dots button.is-active.is-paused::after{ animation-play-state:paused; }
@keyframes heroDotFill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.hero-slider__arrow{
  position:absolute; z-index:5; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:rgba(7,24,39,.4); backdrop-filter:blur(6px); color:#fff; cursor:pointer;
  display:grid; place-items:center; transition:background .25s, border-color .25s;
}
.hero-slider__arrow:hover{ background:var(--blue); border-color:var(--blue); }
.hero-slider__arrow svg{ width:22px; height:22px; }
.hero-slider__arrow--prev{ left:1.2rem; }
.hero-slider__arrow--next{ right:1.2rem; }
@media (max-width:700px){
  /* phone video is 420x746: size the hero to its ratio so it shows uncropped
     whenever the screen allows; cap at the viewport so it never overflows */
  .hero-slider{ min-height:0; aspect-ratio:420/746; max-height:100vh; max-height:100svh; }
  .hero-slider::before{ background:linear-gradient(160deg, rgba(5,20,34,.92) 0%, rgba(7,41,63,.82) 55%, rgba(0,86,150,.55) 100%); }
  .hero-slider__arrow{ display:none; }
  .hero-slide__sub{ font-size:1.06rem; }
}
@media (prefers-reduced-motion:reduce){
  .js .hero-caption > *{ opacity:1; transform:none; animation:none; }
  .js .hero-slider__dots button.is-active::after{ animation:none; transform:scaleX(1); }
}

.trust{ background:linear-gradient(180deg,#04101d 0%,#071b2d 100%); border-bottom:1px solid var(--line); }
.trust .wrap{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(2rem,6vw,5rem); padding:1.6rem 0;
}
.trust img{ height:44px; width:auto; opacity:.7; filter:brightness(0) invert(1); transition:opacity .25s; }
.trust img:hover{ opacity:1; }

/* ============================================================
   WELCOME (split)
   ============================================================ */
.welcome .wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; }
.welcome__media{ position:relative; }
.welcome__media img{
  border-radius:var(--r-card); box-shadow:var(--shadow-md); width:100%;
}
.welcome__tag{
  position:absolute; right:-.9rem; bottom:1.6rem;
  background:var(--blue); color:#fff; border-radius:12px;
  padding:.7rem 1.1rem; font-family:var(--font-display); font-weight:700; font-size:.9rem;
  box-shadow:var(--shadow-md);
}
.welcome__highlight{
  margin-top:1.4rem; padding:1rem 1.3rem; border-left:4px solid var(--orange);
  background:linear-gradient(90deg,#16395f 0%,#0e2a45 100%); border-radius:0 12px 12px 0;
  font-weight:600; color:var(--heading);
}
@media (max-width:900px){
  .welcome .wrap{ grid-template-columns:1fr; }
}

/* ============================================================
   TREATMENTS (bento)
   ============================================================ */
.treat__grid{
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(3,1fr); grid-auto-rows:230px;
}
.treat-card{
  position:relative; border-radius:var(--r-card); overflow:hidden;
  text-decoration:none; box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.treat-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.treat-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.treat-card:hover img{ transform:scale(1.05); }
.treat-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(4,42,70,.85) 0%,rgba(4,42,70,.25) 55%,transparent 100%);
}
.treat-card__label{
  position:absolute; left:1.2rem; right:1.2rem; bottom:1.05rem; z-index:1;
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
}
.treat-card__label small{ display:block; font-family:var(--font-body); font-weight:400; font-size:.82rem; color:#cfe6f6; margin-top:.15rem; }
.treat-card__arrow{ flex-shrink:0; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; transition:background .25s; }
.treat-card:hover .treat-card__arrow{ background:var(--orange); }
.treat-card--tall{ grid-row:span 2; }
.treat-card--wide{ grid-column:span 2; }
@media (max-width:900px){
  .treat__grid{ grid-template-columns:1fr 1fr; grid-auto-rows:200px; }
  .treat-card--wide{ grid-column:span 2; }
}
@media (max-width:600px){
  .treat__grid{ grid-template-columns:1fr; grid-auto-rows:190px; }
  .treat-card--tall{ grid-row:span 1; }
  .treat-card--wide{ grid-column:span 1; }
}

/* ============================================================
   AUDIENCES (children / teens / adults)
   ============================================================ */
.aud{ counter-reset:aud; }
.aud__rows{ display:grid; gap:1rem; margin-top:2.2rem; }
.aud-row{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:1.4rem;
  background:linear-gradient(160deg,#123150 0%,#0d2740 100%); border:1px solid var(--line); border-radius:var(--r-card);
  padding:1.4rem 1.7rem; text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.aud-row:hover{ transform:translateX(6px); box-shadow:var(--shadow-md); border-color:var(--sky-bright); }
.aud-row h3{ margin:0 0 .25rem; }
.aud-row p{ margin:0; color:var(--muted); font-size:.95rem; max-width:52rem; }
.aud-row__go{ font-family:var(--font-display); font-weight:700; font-size:.85rem; color:var(--sky-bright); white-space:nowrap; }
@media (max-width:640px){
  .aud-row{ grid-template-columns:1fr; }
  .aud-row__go{ display:none; }
}

/* ============================================================
   BEFORE & AFTER
   ============================================================ */
.cases__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:2.2rem; }
.case-card{
  background:linear-gradient(165deg,#123150 0%,#0d2740 100%); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.case-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.case-card img{ width:100%; aspect-ratio:480/331; object-fit:cover; }
.case-card__body{ padding:1.4rem 1.5rem 1.6rem; }
.case-card h3{ font-size:1.02rem; letter-spacing:.02em; margin-bottom:.5rem; }
.case-card p{ margin:0; font-size:.93rem; color:var(--muted); }
@media (max-width:900px){ .cases__grid{ grid-template-columns:1fr; } }

/* ============================================================
   TESTIMONIALS (draggable carousel — house standard)
   ============================================================ */
.reviews{ overflow:hidden; position:relative; }
/* halftone star field behind the cards, fading in from the left (reviews = stars).
   .star-field makes it reusable on any section (e.g. an FAQ block). */
.reviews::before, .star-field::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 58 58'%3E%3Cg fill='rgb(180,205,226)'%3E%3Cpath transform='translate(7.7,7.7) scale(0.6)' d='M12 2l2.35 7.16h7.53l-6.09 4.42 2.35 7.16L12 16.32 5.86 20.74l2.35-7.16L2.12 9.16h7.53z'/%3E%3Cpath transform='translate(36.7,36.7) scale(0.6)' d='M12 2l2.35 7.16h7.53l-6.09 4.42 2.35 7.16L12 16.32 5.86 20.74l2.35-7.16L2.12 9.16h7.53z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:58px 58px; opacity:.13;
  -webkit-mask-image:linear-gradient(78deg, transparent 4%, rgba(0,0,0,.35) 32%, #000 72%);
  mask-image:linear-gradient(78deg, transparent 4%, rgba(0,0,0,.35) 32%, #000 72%);
}
.star-field{ position:relative; overflow:hidden; }
.reviews > *, .star-field > *{ position:relative; z-index:1; }
.reviews__stage{ position:relative; }
.reviews__viewport{
  overflow:hidden; margin-top:2.4rem; padding:.4rem 0 1rem;
  cursor:grab; touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.reviews__viewport.is-grabbing{ cursor:grabbing; }
.reviews__track{ display:flex; width:max-content; will-change:transform; }
.review{
  flex:0 0 min(400px,86vw); margin-right:1.4rem; user-select:none;
  background:linear-gradient(170deg,#123150 0%,#0d2740 100%); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-sm);
  padding:1.8rem 1.8rem 1.6rem; display:flex; flex-direction:column; gap:1.1rem;
  white-space:normal;
}
.review img{ pointer-events:none; }
/* prev/next arrows */
.reviews__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:rgba(9,32,54,.82); backdrop-filter:blur(5px); color:#fff; cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--shadow-sm);
  transition:background .2s, border-color .2s, opacity .2s;
}
.reviews__nav:hover{ background:var(--blue); border-color:var(--blue); }
.reviews__nav:active{ transform:translateY(-50%) scale(.94); }
.reviews__nav svg{ width:20px; height:20px; }
.reviews__nav--prev{ left:.5rem; }
.reviews__nav--next{ right:.5rem; }
@media (max-width:600px){
  .reviews__nav{ width:40px; height:40px; }
  .reviews__nav svg{ width:18px; height:18px; }
}
.review__stars{ color:#f6a821; letter-spacing:.15em; font-size:.95rem; }
.review__text{ margin:0; color:var(--ink); font-size:.97rem; flex-grow:1; }
.review__who{ display:flex; align-items:center; gap:.85rem; }
.review__who img{ width:46px; height:46px; border-radius:50%; object-fit:cover; }
.review__mono{ width:46px; height:46px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:#fff; }
.review__who strong{ display:block; font-family:var(--font-display); font-size:.92rem; color:var(--heading); }
.review__who span{ font-size:.8rem; color:var(--muted); }
.reviews__foot{ margin-top:1.4rem; display:flex; justify-content:center; }

/* ============================================================
   OFFICES
   ============================================================ */
.offices__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; margin-top:2.4rem; }
.office{
  background:linear-gradient(165deg,#123150 0%,#0d2740 100%); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
}
.office img{ width:100%; aspect-ratio:16/8; object-fit:cover; }
.office__body{ padding:1.7rem 1.8rem 1.9rem; display:grid; gap:.9rem; }
.office__body h3{ margin:0; font-size:1.25rem; }
.office__meta{ display:grid; gap:.45rem; font-size:.96rem; color:var(--muted); margin:0; padding:0; list-style:none; }
.office__meta a{ color:var(--sky-bright); font-weight:600; text-decoration:none; }
.office__meta a:hover{ text-decoration:underline; }
.office__hours{ background:linear-gradient(160deg,#16395f 0%,#0f2c48 100%); border-radius:10px; padding:.8rem 1rem; font-size:.9rem; color:var(--ink); }
.office__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.3rem; }
.office__actions .btn{ padding:.6rem 1.3rem; font-size:.85rem; }
@media (max-width:820px){ .offices__grid{ grid-template-columns:1fr; } }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{ text-align:center; }
.cta-band h2{ max-width:36rem; margin-inline:auto; }
.cta-band p{ max-width:32rem; margin:0 auto 1.8rem; }
.cta-band .btn{ font-size:1.02rem; padding:1rem 2.4rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background-color:#02070d;
  background-image:
    linear-gradient(90deg, rgba(4,14,26,.92) 0%, rgba(4,14,26,.6) 40%, rgba(4,14,26,.32) 100%),
    linear-gradient(180deg, rgba(4,14,26,.35), rgba(2,7,13,.7)),
    url('/assets/img/footer-bg.jpg?v=18');
  background-repeat:no-repeat;
  background-position:center, center, center right;
  background-size:cover, cover, cover;
  border-top:1px solid var(--line); color:#b9cfe0; font-size:.92rem;
}
.footer a{ color:#b9cfe0; text-decoration:none; transition:color .2s; }
.footer a:hover{ color:#fff; }
.footer__main{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:2.5rem;
  padding:3.5rem 0 2.5rem;
}
.footer__brand img{ height:56px; width:auto; margin-bottom:1rem; }
.footer h2, .footer .footer__h{ color:#fff; font-size:.9rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1rem; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
/* tooth icon slides in on hover of footer menu items */
.footer ul li a{ display:inline-flex; align-items:center; }
.footer ul li a::before{
  content:""; width:0; height:15px; flex:0 0 auto; opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%233db6f2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5.5c-1.5-1.5-3-2-4.5-2C5 3.5 3 5.5 3 8c0 1.5.5 3 1 4.5.5 1.5 1 4 1.5 5.5.3.9.6 1.5 1.5 1.5 1 0 1.2-1 1.5-2 .4-1.3.6-2.5 1-2.5s.6 1.2 1 2.5c.3 1 .5 2 1.5 2 .9 0 1.2-.6 1.5-1.5.5-1.5 1-4 1.5-5.5.5-1.5 1-3 1-4.5 0-2.5-2-4.5-4.5-4.5-1.5 0-3 .5-4.5 2z'/%3E%3C/svg%3E") left center/15px 15px no-repeat;
  transition:width .25s var(--ease), margin-right .25s var(--ease), opacity .25s;
}
.footer ul li a:hover::before{ width:15px; margin-right:7px; opacity:1; }
@media (prefers-reduced-motion:reduce){ .footer ul li a::before{ transition:opacity .2s; } }
.footer__social{ display:flex; gap:.8rem; margin-top:1.1rem; }
.footer__social a{
  position:relative; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.1);
  display:inline-block; transition:background .25s;
}
.footer__social a img{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.footer__social a:hover{ background:var(--blue); color:#fff; }
.footer__note{
  border-top:1px solid rgba(255,255,255,.12);
  padding:1.6rem 0 1.5rem; margin:0; max-width:860px;
  font-size:.9rem; line-height:1.7; color:#a9c2d6;
}
.footer__note a{ color:#fff; font-weight:600; white-space:nowrap; }
.footer__note a:hover{ color:var(--sky-bright); }
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding:1.3rem 0; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem;
  align-items:center; justify-content:space-between; font-size:.83rem;
}
.footer__credit{ opacity:.8; }
.footer__credit a{ font-weight:600; }
.footer__credit a:hover{ color:#fff; }
@media (max-width:900px){ .footer__main{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__main{ grid-template-columns:1fr; } }
/* phone footer: portrait tooth image (centered) at the top, fading into dark */
@media (max-width:700px){
  .footer{
    background-image:
      linear-gradient(180deg, rgba(4,14,26,.5) 0%, rgba(4,14,26,.72) 40%, rgba(2,7,13,.94) 78%),
      url('/assets/img/footer-bg-phone.jpg?v=19');
    background-position:center, top center;
    background-size:cover, 100% auto;
  }
}

/* ---- back to top (house standard) ---- */
.to-top{
  position:fixed; right:1.4rem; bottom:3.5rem; z-index:60;
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:var(--blue-deep); color:#fff; box-shadow:var(--shadow-md);
  display:grid; place-items:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s,transform .3s,visibility .3s,background .25s;
}
.to-top.is-visible{ opacity:.75; visibility:visible; transform:none; }
.to-top.is-visible:hover{ opacity:1; }
.to-top:hover{ background:var(--blue); }

/* ---- letter-by-letter heading reveal (Kapital-style) ---- */
.js h2 .word{ display:inline-block; white-space:nowrap; }
.js h2 .char{ display:inline-block; opacity:0; transform:translateY(.5em); will-change:transform,opacity; }
.js h2.is-lit .char{
  animation:charIn .55s cubic-bezier(.2,.65,.25,1) both;
  animation-delay:calc(var(--i) * 24ms);
}
@keyframes charIn{
  from{ opacity:0; transform:translateY(.5em); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .js h2 .char{ opacity:1; transform:none; animation:none !important; }
}

/* ---- section headers ---- */
.sec-head{ max-width:44rem; }
.sec-head--center{ text-align:center; margin-inline:auto; }
.sec-head p{ color:var(--muted); }

/* ============================================================
   INTERIOR PAGES
   ============================================================ */
.page-hero{
  background:
    radial-gradient(760px 380px at 82% 30%, rgba(0,143,205,.3), transparent 60%),
    radial-gradient(520px 300px at 6% 90%, rgba(241,90,36,.1), transparent 62%),
    linear-gradient(155deg,#07293f 0%,#0a3d63 60%,#005696 100%);
  padding:clamp(2.8rem,6vw,4.5rem) 0;
}
/* hero with a background photo (About pages) */
.page-hero--photo{
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  min-height:clamp(280px,40vw,440px);
  background:
    linear-gradient(112deg, rgba(6,22,38,.94) 0%, rgba(8,45,72,.8) 46%, rgba(0,86,150,.5) 100%),
    var(--hero-img) center/cover no-repeat;
}
.page-hero--photo .breadcrumb{ color:#bcd8ec; }
/* full section on a photo (e.g. payment gate): same navy veil, centered darker so the card reads */
.section--photo{
  background:
    linear-gradient(180deg, rgba(6,22,38,.92) 0%, rgba(8,45,72,.86) 50%, rgba(6,22,38,.94) 100%),
    var(--hero-img) center/cover no-repeat;
}
@media (max-width:700px){
  .page-hero--photo{
    min-height:auto;
    background:
      linear-gradient(158deg, rgba(6,22,38,.95) 0%, rgba(8,45,72,.9) 55%, rgba(0,86,150,.72) 100%),
      var(--hero-img) center/cover no-repeat;
  }
}
.breadcrumb{
  display:flex; flex-wrap:wrap; gap:.45rem; align-items:center;
  font-size:.82rem; color:#9cc4de; margin-bottom:.9rem;
}
.breadcrumb a{ color:#cde9f9; text-decoration:none; }
.breadcrumb a:hover{ color:#fff; text-decoration:underline; }
.breadcrumb .sep{ opacity:.55; }
.page-hero h1{ color:#fff; margin:0; font-size:clamp(1.9rem,4vw,2.9rem); }
.page-hero .lead{ color:#b9d9ee; margin:.9rem 0 0; max-width:46rem; }

.prose{ max-width:46rem; }
.prose h2{ margin-top:2.2rem; font-size:clamp(1.35rem,2.4vw,1.7rem); }
.prose h2:first-child{ margin-top:0; }
.prose h3{ margin-top:1.6rem; color:var(--sky-bright); }
.prose ul{ padding-left:1.2rem; display:grid; gap:.45rem; color:var(--ink); }
.prose li::marker{ color:var(--sky-bright); }
.prose a{ color:var(--sky-bright); }
.prose strong{ color:var(--heading); }

/* split: text + image */
.split{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.split--flip > .split__media{ order:-1; }
.split__media img{
  width:100%; border-radius:var(--r-card); box-shadow:var(--shadow-md);
  border:1px solid var(--line);
}
.split__media figcaption{ font-size:.85rem; color:var(--muted); margin-top:.6rem; }
.split__media{ position:sticky; top:96px; }
@media (max-width:860px){
  .split{ grid-template-columns:1fr; }
  .split__media{ position:static; order:-1; }
}

/* info card grid (appliances, issues, team, etc.) */
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.cards-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.info-card{
  background:linear-gradient(165deg,#123150 0%,#0d2740 100%);
  border:1px solid var(--line); border-radius:var(--r-card);
  overflow:hidden; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
}
.info-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.info-card__body{ padding:1.3rem 1.4rem 1.5rem; }
.info-card__body h3{ font-size:1.05rem; margin-bottom:.45rem; }
.info-card__body p{ margin:0; font-size:.93rem; color:var(--muted); }
@media (max-width:900px){ .cards-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .cards-3,.cards-2{ grid-template-columns:1fr; } }

/* FAQ accordion */
.faq{ display:grid; gap:.9rem; max-width:50rem; }
.faq details{
  background:linear-gradient(165deg,#123150 0%,#0d2740 100%);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.05rem 1.3rem; font-family:var(--font-display); font-weight:700; color:var(--heading);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary{ transition:color .2s; }
.faq summary:hover{ color:var(--sky-bright); }
.faq summary::after{ content:"+"; font-size:1.35rem; line-height:1; color:var(--sky-bright); transition:transform .35s var(--ease); flex-shrink:0; }
.faq details[open] summary::after{ transform:rotate(135deg); }
.faq details[open]{ border-color:var(--sky-bright); }
.faq .faq__a{ padding:0 1.3rem 1.2rem; color:var(--ink); overflow:hidden; }
.faq .faq__a p{ margin:0 0 .7em; }
/* JS-driven smooth open/close (details toggle is instant otherwise) */
.js .faq .faq__a.is-collapsing,
.js .faq .faq__a.is-expanding{ transition:height .34s var(--ease); }
@media (prefers-reduced-motion:reduce){
  .js .faq .faq__a.is-collapsing,
  .js .faq .faq__a.is-expanding{ transition:none; }
}

/* notice / highlight box (reuse of welcome highlight look) */
.note{
  padding:1rem 1.3rem; border-left:4px solid var(--orange);
  background:linear-gradient(90deg,#16395f 0%,#0e2a45 100%); border-radius:0 12px 12px 0;
  font-weight:600; color:var(--heading); max-width:46rem;
}

/* payment gate (reCAPTCHA interstitial) */
.pay-gate{
  max-width:34rem; margin-inline:auto; text-align:center;
  background:linear-gradient(165deg,#123150 0%,#0d2740 100%);
  border:1px solid var(--line); border-radius:var(--r-card);
  padding:clamp(2rem,5vw,3rem) clamp(1.4rem,4vw,2.4rem); box-shadow:var(--shadow-md);
}
.pay-gate__icon{
  width:66px; height:66px; border-radius:50%; margin:0 auto 1.3rem;
  background:var(--mist-deep); display:grid; place-items:center; color:var(--sky-bright);
}
.pay-gate h1{ font-size:clamp(1.5rem,3vw,1.9rem); margin-bottom:.6rem; }
.pay-gate p{ color:var(--muted); max-width:26rem; margin-inline:auto; }
.pay-gate form{ display:flex; flex-direction:column; align-items:center; gap:1.3rem; margin-top:1.8rem; }
.pay-gate .g-recaptcha{ display:inline-block; }
.pay-gate .btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.pay-gate__err{
  margin-top:1.2rem; padding:.7rem 1rem; border-radius:10px;
  background:rgba(241,90,36,.14); border:1px solid rgba(241,90,36,.4);
  color:#ffb59a; font-size:.9rem;
}
.pay-gate__secure{ margin-top:1.4rem; font-size:.82rem; color:var(--muted); }

/* ---- forms: floating labels + field icons ---- */
.form{ display:grid; gap:1.15rem; max-width:44rem; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
@media (max-width:620px){ .form__row{ grid-template-columns:1fr; } }

.field{ position:relative; }
.field__icon{
  position:absolute; left:.95rem; top:1.12rem; width:20px; height:20px;
  color:var(--muted); pointer-events:none; transition:color .2s; z-index:1;
}
.field textarea ~ .field__icon,
.field.field--top .field__icon{ top:1.12rem; }

.field input, .field select, .field textarea{
  width:100%; padding:1.5rem .95rem .55rem 2.9rem;
  border-radius:var(--r-input); background:#0a2136; border:1px solid #4a72a0; /* AA 1.4.11: field border clears 3:1 */
  color:var(--ink); font-family:var(--font-body); font-size:1rem; line-height:1.25;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s;
  appearance:none; -webkit-appearance:none;
}
.field textarea{ min-height:130px; resize:vertical; padding-top:2.6rem; } /* room for a 2-line floated label above the typed text */
.field select{ cursor:pointer; }
/* native date/time picker icon is black by default — invert it so it reads on the dark field */
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator{ filter:invert(1) brightness(1.7); opacity:.8; cursor:pointer; }
html.a11y-lightbg .field input[type="date"]::-webkit-calendar-picker-indicator,
html.a11y-lightbg .field input[type="time"]::-webkit-calendar-picker-indicator{ filter:none; }
.field--select::after{
  content:""; position:absolute; right:1.1rem; top:1.35rem; width:9px; height:9px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg); pointer-events:none; transition:border-color .2s;
}
.field:focus-within.field--select::after{ border-color:var(--sky-bright); }

.field label{
  position:absolute; left:2.9rem; top:1.05rem; z-index:1;
  max-width:calc(100% - 3.85rem);   /* stay inside the field (left offset + right padding) so long labels wrap instead of overflowing */
  color:var(--muted); font-size:1rem; font-weight:500; line-height:1.25; pointer-events:none;
  transform-origin:left top; white-space:normal;
  transition:transform .2s var(--ease), color .2s;
}
/* floated (focused/filled): the label keeps wrapping and shows the full text,
   just smaller (see the scale transform below) — never truncated. It stays
   capped to the field width via the .field label max-width above. */
.field label span[aria-hidden]{ color:var(--orange); }

/* floated: focused, filled, or a select (always) */
.field:focus-within label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:not(:placeholder-shown) ~ label,
.field--select label{
  transform:translateY(-.75rem) scale(.72);
}
.field:focus-within label{ color:var(--sky-bright); }

/* active field: icon + border glow */
.field:focus-within .field__icon{ color:var(--sky-bright); }
.field:focus-within input,
.field:focus-within select,
.field:focus-within textarea{
  border-color:var(--sky-bright); background:#0b263e;
  box-shadow:0 0 0 3px rgba(61,182,242,.16); outline:none;
}

.form__help{ font-size:.82rem; color:var(--muted); margin:.4rem 0 0 .2rem; }
.field__count{ font-size:.76rem; color:var(--muted); text-align:right; margin:.3rem .2rem 0 0; font-variant-numeric:tabular-nums; }
.field__count.is-near{ color:var(--orange); }

/* grouped controls (ratings, checkboxes) keep a normal top label */
.form fieldset{ border:0; margin:0; padding:0; }
.form fieldset > legend{ font-family:var(--font-display); font-weight:700; color:var(--heading); font-size:.98rem; margin-bottom:.7rem; padding:0; }
.choice-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.choice{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  padding:.6rem 1rem; border-radius:999px; border:1px solid var(--line);
  background:#0a2136; color:var(--ink); font-size:.92rem; transition:border-color .2s, background .2s, color .2s;
}
.choice:hover{ border-color:var(--sky-bright); }
.choice input{ accent-color:var(--sky-bright); margin:0; }
.choice:has(input:checked){ border-color:var(--sky-bright); background:#12324f; color:#fff; }

/* ============================================================
   CHANGELOG (internal, noindex)
   ============================================================ */
.changelog .log{ padding:1.6rem 0 1.2rem; border-top:1px solid var(--line); }
.changelog .log:first-child{ border-top:0; padding-top:0; }
.changelog .log h2{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .8rem; font-size:1.25rem; margin-bottom:.6rem; }
.changelog .log__v{ font-family:var(--font-display); font-size:.78rem; letter-spacing:.06em; color:#fff; background:var(--blue); border-radius:999px; padding:.22rem .7rem; }
.changelog .log time{ font-family:var(--font-body); font-weight:500; font-size:.82rem; color:var(--muted); margin-left:auto; }
.changelog .log__note{ color:var(--muted); font-size:.95rem; margin:0 0 .6rem; }
.changelog code{ font-size:.85em; background:rgba(255,255,255,.08); padding:.1em .4em; border-radius:4px; }
.changelog .log__foot{ margin-top:1.8rem; color:var(--muted); font-size:.9rem; }

/* ============================================================
   INVISALIGN: ages cards + comparison table
   ============================================================ */
.ages{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.4rem; }
.age-card{
  display:flex; flex-direction:column; gap:.55rem; text-decoration:none;
  background:linear-gradient(165deg,#123150 0%,#0d2740 100%); border:1px solid var(--line); border-radius:var(--r-card);
  padding:1.7rem 1.7rem 1.6rem; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.age-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--sky-bright); }
.age-card__tag{ font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sky-bright); }
.age-card h3{ margin:0; font-size:1.3rem; }
.age-card p{ margin:0; color:var(--muted); font-size:.95rem; flex:1; }
.age-card__go{ margin-top:.5rem; font-family:var(--font-display); font-weight:700; font-size:.85rem; color:#fff; }
.age-card:hover .age-card__go{ color:var(--sky-bright); }
@media (max-width:900px){ .ages{ grid-template-columns:1fr; } }

.compare-wrap{ margin-top:2.4rem; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.compare{
  width:100%; min-width:640px; border-collapse:separate; border-spacing:0;
  background:linear-gradient(170deg,#123150 0%,#0d2740 100%); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden;
  box-shadow:var(--shadow-sm); font-size:.97rem;
}
.compare th, .compare td{ padding:1rem 1.2rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td{ border-bottom:0; }
.compare thead th{ font-family:var(--font-display); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--mist-deep); }
.compare tbody th{ font-family:var(--font-display); font-weight:700; color:var(--heading); width:24%; }
.compare td{ color:var(--ink); }
.compare td.compare__yes{ background:rgba(0,143,205,.12); color:#fff; font-weight:600; }
.compare td.compare__yes::before{ content:"\2713"; display:inline-block; margin-right:.55rem; color:var(--sky-bright); font-weight:800; }
.compare--pick thead th:nth-child(2){ background:var(--blue); }
.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; }

/* buttons inside prose keep their own label colour (the .prose a rule was tinting them) */
.prose a.btn--blue, .prose a.btn--orange, .prose a.btn--blue:hover, .prose a.btn--orange:hover{ color:#fff; }

/* list with tooth bullets (Early Orthodontic Treatment checklist) */
.tooth-list{ list-style:none; padding-left:0; }
.tooth-list li{ position:relative; padding-left:1.75rem; }
.tooth-list li::before{
  content:""; position:absolute; left:0; top:.3em; width:17px; height:17px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%233db6f2' stroke='%233db6f2' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M12 5.5c-1.5-1.5-3-2-4.5-2C5 3.5 3 5.5 3 8c0 1.5.5 3 1 4.5.5 1.5 1 4 1.5 5.5.3.9.6 1.5 1.5 1.5 1 0 1.2-1 1.5-2 .4-1.3.6-2.5 1-2.5s.6 1.2 1 2.5c.3 1 .5 2 1.5 2 .9 0 1.2-.6 1.5-1.5.5-1.5 1-4 1.5-5.5.5-1.5 1-3 1-4.5 0-2.5-2-4.5-4.5-4.5-1.5 0-3 .5-4.5 2z'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* tablet: keep hero captions clear of the prev/next arrows (arrows sit at 1.2rem; 46px wide) */
@media (min-width:701px) and (max-width:1024px){
  .hero-slider .wrap{ width:calc(100% - 9rem); }
}

/* footer social: image icons (Healthgrades) sized like the text glyph */
.footer__social img{ width:18px; height:18px; object-fit:contain; display:block; opacity:.92; }
.footer__social a:hover img{ opacity:1; }

/* form privacy note (HIPAA: discourage PHI over the contact form) */
.form__privacy{ font-size:.82rem; color:var(--muted); line-height:1.55; max-width:44rem; margin:0 0 1.1rem; }
.form__privacy a{ color:var(--sky-bright); font-weight:600; }

/* ============================================================
   ACCESSIBILITY TOOLBAR (Elite-style, Galeano brand)
   ============================================================ */
.a11y{ position:fixed; left:0; bottom:2.5rem; z-index:95; }
.a11y__tab{
  display:grid; place-items:center; width:50px; height:50px; padding:0; border:0;
  border-radius:0 10px 10px 0; background:var(--blue-deep); color:#fff; cursor:pointer;
  box-shadow:2px 2px 16px -4px rgba(0,0,0,.55); transition:background .3s var(--ease);
}
.a11y__tab:hover{ background:var(--blue); }
.a11y__tab span{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.a11y__panel{
  position:absolute; left:0; bottom:0; width:266px;
  max-height:88vh; overflow-y:auto; padding:1.1rem 1rem 1.25rem; background:#fff;
  border:1px solid #dbe6ef; border-left:0; border-radius:0 14px 14px 0;
  box-shadow:8px 8px 44px -12px rgba(12,43,68,.4);
  transform-origin:left bottom;
}
.a11y__panel[hidden]{ display:none; }
/* nice pop-in when the panel opens (grows up from the button) */
@keyframes a11yPop{
  from{ opacity:0; transform:translateY(14px) scale(.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.a11y__panel:not([hidden]){ animation:a11yPop .3s var(--ease) both; }
@media (prefers-reduced-motion:reduce){
  .a11y__panel:not([hidden]){ animation:none; }
}
.a11y__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.85rem; }
.a11y__head strong{ color:#0c2b44; font-family:var(--font-display); font-size:1.12rem; font-weight:700; }
.a11y__close{ display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:999px; background:transparent; color:#5a6b7b; cursor:pointer; }
.a11y__close:hover{ background:#eef4f8; color:#0c2b44; }
.a11y__list{ margin:0; padding:0; list-style:none; display:grid; gap:2px; }
.a11y__list button{
  display:flex; align-items:center; gap:.7rem; width:100%; padding:.6rem .7rem;
  border:0; border-radius:10px; background:transparent; color:#1f2933;
  font-family:var(--font-body); font-size:.92rem; text-align:left; cursor:pointer;
  transition:background .18s var(--ease);
}
.a11y__list button svg{ color:#005696; flex:0 0 auto; }
.a11y__list button:hover{ background:#eef4f8; }
.a11y__list button[aria-pressed="true"]{ background:var(--blue); color:#fff; }
.a11y__list button[aria-pressed="true"] svg{ color:#fff; }

/* simple modes */
html.a11y-underline a{ text-decoration:underline !important; }
html.a11y-readable, html.a11y-readable *{ font-family:Verdana,"Segoe UI",Tahoma,Arial,sans-serif !important; letter-spacing:.012em; }
html.a11y-grayscale{ filter:grayscale(1); }
html.a11y-negative{ filter:invert(1) hue-rotate(180deg); }
html.a11y-grayscale.a11y-negative{ filter:grayscale(1) invert(1) hue-rotate(180deg); }
html.a11y-negative .a11y{ filter:invert(1) hue-rotate(180deg); }

/* HIGH CONTRAST: black surfaces, yellow accents, white text */
html.a11y-contrast{ --blue:#ff0; --blue-deep:#ff0; --sky-bright:#ff0; --orange:#ff0; --orange-dark:#ff0;
  --ink:#fff; --heading:#fff; --muted:#f0f0f0; --line:rgba(255,255,255,.5); }
html.a11y-contrast body{ background:#000; color:#fff; }
html.a11y-contrast .topbar, html.a11y-contrast .header, html.a11y-contrast .nav,
html.a11y-contrast .sub, html.a11y-contrast .footer,
html.a11y-contrast .section--glow, html.a11y-contrast .section--glow-alt,
html.a11y-contrast .section--mist, html.a11y-contrast .section--navy,
html.a11y-contrast .section--ocean, html.a11y-contrast .page-hero,
html.a11y-contrast .hero-slider, html.a11y-contrast .hero-slider::before,
html.a11y-contrast .review, html.a11y-contrast .office, html.a11y-contrast .case-card,
html.a11y-contrast .aud-row, html.a11y-contrast .age-card, html.a11y-contrast .info-card,
html.a11y-contrast .compare, html.a11y-contrast .faq details, html.a11y-contrast .field input,
html.a11y-contrast .field select, html.a11y-contrast .field textarea{
  background:#000 !important; color:#fff !important; border-color:#ff0 !important;
}
html.a11y-contrast .nav > li > a, html.a11y-contrast .nav > li > button,
html.a11y-contrast a, html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3,
html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast span, html.a11y-contrast strong{ color:#fff !important; }
html.a11y-contrast a:not(.btn){ color:#ff0 !important; }
html.a11y-contrast .btn--orange, html.a11y-contrast .btn--blue{ background:#ff0 !important; color:#000 !important; border-color:#ff0 !important; }
html.a11y-contrast .btn--ghost{ border-color:#ff0 !important; color:#ff0 !important; background:transparent !important; }
html.a11y-contrast .hero-slider__media{ opacity:.15; }
html.a11y-contrast .a11y__tab{ background:#000; color:#ff0; border:1px solid #ff0; }
html.a11y-contrast .a11y__panel{ background:#000; border-color:#ff0; }
html.a11y-contrast .a11y__list button[aria-pressed="true"]{ background:#ff0; color:#000; }
html.a11y-contrast .a11y__list button[aria-pressed="true"] svg{ color:#000; }

/* LIGHT BACKGROUND: white surfaces, dark text */
html.a11y-lightbg{ --ink:#111; --heading:#0c2b44; --muted:#3d5a72; --line:#d5e0ea; }
html.a11y-lightbg body{ background:#fff; }
html.a11y-lightbg .topbar, html.a11y-lightbg .footer,
html.a11y-lightbg .section--glow, html.a11y-lightbg .section--glow-alt,
html.a11y-lightbg .section--mist, html.a11y-lightbg .section--navy,
html.a11y-lightbg .section--ocean, html.a11y-lightbg .page-hero,
html.a11y-lightbg .hero-slider, html.a11y-lightbg .review, html.a11y-lightbg .office,
html.a11y-lightbg .case-card, html.a11y-lightbg .aud-row, html.a11y-lightbg .age-card,
html.a11y-lightbg .info-card, html.a11y-lightbg .compare, html.a11y-lightbg .faq details{
  background:#fff !important; color:#111 !important; border-color:#d5e0ea !important;
}
html.a11y-lightbg .topbar *, html.a11y-lightbg .footer *, html.a11y-lightbg .section--navy *,
html.a11y-lightbg .section--ocean *, html.a11y-lightbg h1, html.a11y-lightbg h2,
html.a11y-lightbg h3, html.a11y-lightbg p, html.a11y-lightbg li{ color:#111 !important; }
html.a11y-lightbg a:not(.btn){ color:#005696 !important; }
html.a11y-lightbg .field input, html.a11y-lightbg .field select, html.a11y-lightbg .field textarea{ background:#f4f8fb !important; color:#111 !important; border-color:#9db6cc !important; }
html.a11y-lightbg .hero-slider__media{ opacity:.28; }
html.a11y-lightbg .footer__note, html.a11y-lightbg .form__privacy{ color:#3d5a72 !important; }

/* big cursor */
html.a11y-cursor, html.a11y-cursor *{ cursor:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNCAyLjUgNCAyMSA5IDE2LjIgMTIuNiAyMyAxNS42IDIxLjUgMTIgMTQuOCAxOC43IDE0LjhaIiBmaWxsPSIjZmZmZmZmIiBzdHJva2U9IiMxMTExMTEiIHN0cm9rZS13aWR0aD0iMS40IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") 8 5, auto !important; }

/* stop animations */
html.a11y-noanim *, html.a11y-noanim *::before, html.a11y-noanim *::after{
  animation-duration:.001s !important; animation-delay:0s !important; animation-iteration-count:1 !important;
  transition-duration:.001s !important; transition-delay:0s !important; scroll-behavior:auto !important;
}

/* reading mask */
.a11y-readmask{ position:fixed; inset:0; z-index:94; pointer-events:none; display:none; }
.a11y-readmask__band{ position:fixed; left:0; right:0; background:rgba(4,12,22,.72); }
.a11y-readmask__band:first-child{ top:0; height:0; }
.a11y-readmask__bottom{ bottom:0; }

/* highlight titles */
html.a11y-titles h1, html.a11y-titles h2, html.a11y-titles h3,
html.a11y-titles h4, html.a11y-titles h5, html.a11y-titles h6{
  outline:3px solid var(--sky-bright) !important; outline-offset:5px; border-radius:4px;
  background:rgba(61,182,242,.14);
}

/* skip link (WCAG 2.4.1) */
.skip-link{
  position:fixed; top:0; left:0; z-index:9999; transform:translateY(-120%);
  background:var(--blue-deep); color:#fff; padding:.75rem 1.15rem; border-radius:0 0 10px 0;
  font-family:var(--font-body); font-size:.9rem; font-weight:600; text-decoration:none;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.6); transition:transform .2s var(--ease);
}
.skip-link:focus{ transform:translateY(0); outline:2px solid var(--sky-bright); outline-offset:2px; }