/* Apex Dental Hospital — generated by tools/build_tms.py from web/src/styles. */

/* ===== fonts.css ===== */
/* ===== src/styles/fonts.css =====
 *
 * Self-hosted Plus Jakarta Sans. Replaces the Google Fonts <link> that used to
 * sit in Layout.astro, so no request ever leaves the site's own origin:
 *   - nothing to preconnect to, and no third-party render-blocking stylesheet
 *     on the critical path (Google's CSS had to download and parse before the
 *     font request could even begin)
 *   - no visitor IPs sent to Google, which is the part GDPR complaints turn on
 *   - the CSP no longer needs to allow fonts.googleapis.com / fonts.gstatic.com
 *
 * ONE VARIABLE FONT, not five static weights. Plus Jakarta Sans ships a wght
 * axis spanning 200-800, so a single file covers every weight the site uses
 * (400 body, 600/700/800 headings and buttons) — 27 KB for latin, versus four
 * separate static files. `font-weight: 200 800` is what tells the browser this
 * face can synthesise any weight in that range, so nothing falls back to a
 * faux-bold approximation.
 *
 * Split latin / latin-ext with the same unicode-range values Google serves:
 * latin-ext (accented characters) is only downloaded if a page actually uses a
 * codepoint from it, so English pages fetch just the 27 KB latin file.
 * Deliberately dropped: cyrillic, cyrillic-ext, greek and vietnamese — nothing
 * on this site renders those scripts, and they were never being downloaded from
 * Google either for the same reason.
 *
 * `font-display: swap` matches the old `&display=swap` — text paints
 * immediately in the fallback and is repainted when the font lands, rather than
 * leaving headings invisible.
 *
 * Files live in public/fonts/ and are licensed under the SIL Open Font License
 * 1.1; the required notice ships alongside them in public/fonts/OFL.txt.
 * To update: refetch from Google with a modern-browser User-Agent (an old UA
 * gets you TTF instead of WOFF2) and keep the unicode-range values in sync.
 */

/* latin — covers all English content, so this is the only file most visitors get. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext — fetched on demand, only when an accented codepoint appears. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ===== style.css ===== */
/* =========================================================
   Apex Dental Hospital — Modern Redesign
   Clean clinical theme (teal / white)
   ========================================================= */

:root {
  --teal-900: #0c465f;
  --teal-700: #176f95;
  --teal-600: #1f93bd;
  --teal-500: #2fa9d1;
  --teal-400: #5cc1e4;
  --teal-50:  #e9f6fb;
  --mint:     #cfeaf6;
  --ink:      #112c3a;
  --slate: #000;
  /* Darkened from #6b8693 (3.85:1 on white — failed WCAG AA) to 5.3:1.
     Used only for small text on light backgrounds, incl. the hero3 `small`
     Lighthouse flagged. */
  --muted:    #52707e;
  /* Sticky header height: logo (83px) + 16px padding top and bottom. */
  --header-h: 115px;
  --line:     #e4ede c;
  --line:     #e2efed;
  --bg:       #ffffff;
  --bg-soft:  #f4faf9;
  --white:    #ffffff;
  --gold:     #f5b942;
  --shadow-sm: 0 2px 10px rgba(23,111,149,.06);
  --shadow:    0 14px 40px rgba(12,70,95,.10);
  --shadow-lg: 0 30px 70px rgba(12,70,95,.16);
  --radius:    18px;
  --radius-lg: 28px;
  --maxw:      1400px;
  --font:      'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* overflow-x: clip, NOT hidden. `hidden` makes html/body a scroll container,
   which silently disables `position: sticky` on every descendant — that is why
   the service-page sidebar never stuck despite having the right CSS. `clip`
   prevents the same horizontal overflow without creating a scroll container. */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
/* <picture> is only a wrapper for the webp <source>; take it out of the box tree
   so existing rules like ".blob-img img { height:100% }" still resolve against
   the real container. */
picture { display: contents; }
a { text-decoration: none; color: inherit; }

h1, h2, h3, h4 { line-height: 1.18; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.3rem; }
p { color: var(--slate); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.section { padding: 92px 0; }
.section--soft { background: var(--bg-soft); }

/* ---- Eyebrow / section heads ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal-600);
  background: var(--mint); padding: 7px 16px; border-radius: 100px;
  margin-bottom: 18px;
}
.section-head { max-width: 640px; margin-bottom: 54px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { margin-top: 14px; font-size: 1.05rem; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: .98rem; cursor: pointer;
  padding: 15px 30px; border-radius: 100px; border: 2px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--teal-600); color: #fff; box-shadow: 0 12px 26px rgba(31,147,189,.32); }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(31,147,189,.42); }
.btn--ghost { background: #fff; color: var(--teal-700); border-color: var(--mint); }
.btn--ghost:hover { background: var(--teal-50); transform: translateY(-3px); }
.btn--light { background: #fff; color: var(--teal-700); }
.btn--light:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); }

/* =========================================================
   TOP BAR
   ========================================================= */
.topbar {
  background: var(--teal-900); color: #cdeae6;
  font-size: .85rem;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 44px; flex-wrap: wrap; }
.topbar a { color: #cdeae6; transition: color .2s; }
.topbar a:hover { color: #fff; }
.topbar .tb-group { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar .tb-item { display: inline-flex; align-items: center; gap: 7px; }
.topbar .tb-item svg { width: 15px; height: 15px; opacity: .8; }
.topbar .socials { display: flex; gap: 12px; }
.topbar .socials a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.08); }
.topbar .socials a:hover { background: var(--teal-500); }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
/* Breathing room above/below the enlarged logo. --header-h must stay in sync
   with this box (logo 83px + 2x16px padding) — the sticky sidebar offset is
   derived from it. */
.site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); padding-block: 16px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand .mark {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
  display: grid; place-items: center; color: #fff; box-shadow: var(--shadow-sm);
}
.brand .mark svg { width: 26px; height: 26px; }
.brand .name { font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; line-height: 1.1; }
.brand .name span { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-600); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  font-weight: 600; font-size: .96rem; color: var(--ink);
  padding: 10px 16px; border-radius: 100px; transition: all .2s; position: relative;
}
.nav a:hover, .nav a.active { color: var(--teal-700); background: var(--teal-50); }
.nav .has-drop { position: relative; }
.nav .dropdown {
  position: absolute; top: 120%; left: 0; min-width: 270px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 10px; opacity: 0; visibility: hidden;
  transform: translateY(8px); transition: all .22s ease;
}
.nav .has-drop:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav .dropdown a { display: block; padding: 11px 14px; border-radius: 10px; font-size: .92rem; }
.nav .dropdown a:hover { background: var(--teal-50); }

.header-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--ink); }
.nav-toggle svg { display: block; width: 28px; height: 28px; }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; background: linear-gradient(160deg, var(--teal-50) 0%, #fff 60%); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; top: -180px; right: -160px; width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(92,193,228,.22), transparent 65%); border-radius: 50%;
}
.hero .container { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding-top: 70px; padding-bottom: 80px; }
.hero h1 { font-size: clamp(2.4rem, 5vw, 3.7rem); font-weight: 800; }
.hero h1 .accent { color: var(--teal-600); }
.hero p.lead { font-size: 1.12rem; margin: 22px 0 32px; max-width: 540px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 36px; margin-top: 46px; flex-wrap: wrap; }
.hero-stats .stat strong { display: block; font-size: 1.9rem; font-weight: 800; color: var(--teal-700); }
.hero-stats .stat span { font-size: .9rem; color: var(--muted); }

.hero-media { position: relative; }
.hero-media .photo {
  border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-lg);
  aspect-ratio: 4/4.4; background: var(--mint);
}
.hero-media .photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-card {
  position: absolute; background: #fff; border-radius: 18px; box-shadow: var(--shadow);
  padding: 16px 18px; display: flex; align-items: center; gap: 12px;
}
.hero-card.c1 { bottom: 28px; left: -26px; }
.hero-card.c2 { top: 30px; right: -20px; }
.hero-card .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--teal-50); color: var(--teal-600); display: grid; place-items: center; flex: none; }
.hero-card .ic svg { width: 24px; height: 24px; }
.hero-card strong { display: block; font-size: 1.05rem; }
.hero-card span { font-size: .8rem; color: var(--muted); }

/* =========================================================
   FEATURE STRIP (trust badges)
   ========================================================= */
.trust { background: var(--teal-900); }
.trust .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; padding: 36px 24px; }
.trust .item { display: flex; align-items: center; gap: 14px; color: #eafaf7; }
.trust .item svg { width: 34px; height: 34px; color: var(--teal-400); flex: none; }
.trust .item strong { display: block; font-size: 1.02rem; color: #fff; }
.trust .item span { font-size: .84rem; color: #a9d6cf; }

/* =========================================================
   ABOUT
   ========================================================= */
.about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }
.about-media { position: relative; }
.about-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; object-fit: cover; }
.about-media .badge {
  position: absolute; right: -18px; bottom: -18px; background: var(--teal-600); color: #fff;
  border-radius: 20px; padding: 22px 26px; box-shadow: var(--shadow); text-align: center;
}
.about-media .badge strong { font-size: 2rem; display: block; font-weight: 800; }
.about-media .badge span { font-size: .82rem; opacity: .9; }
.about-list { list-style: none; margin: 26px 0 30px; display: grid; gap: 14px; }
.about-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--slate); }
.about-list svg { width: 22px; height: 22px; color: var(--teal-500); flex: none; margin-top: 3px; }

/* =========================================================
   SERVICES
   ========================================================= */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.service-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s; display: flex; flex-direction: column;
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: transparent; }
.service-card .img { aspect-ratio: 16/11; overflow: hidden; }
.service-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.service-card:hover .img img { transform: scale(1.07); }
.service-card .body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.service-card .ic {
  width: 50px; height: 50px; border-radius: 14px; margin-top: -52px; position: relative;
  background: var(--teal-600); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
.service-card .ic svg { width: 26px; height: 26px; }
.service-card h3 { margin-bottom: 10px; }
.service-card p { font-size: .95rem; flex: 1; }
.service-card .more { margin-top: 16px; font-weight: 600; color: var(--teal-700); display: inline-flex; align-items: center; gap: 7px; }
.service-card .more svg { width: 17px; height: 17px; transition: transform .2s; }
.service-card:hover .more svg { transform: translateX(4px); }

/* =========================================================
   CTA BANNER
   ========================================================= */
.cta-banner { background: linear-gradient(120deg, var(--teal-700), var(--teal-900)); border-radius: var(--radius-lg); padding: 56px; position: relative; overflow: hidden; }
.cta-banner::after { content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px; background: radial-gradient(circle, rgba(92,193,228,.3), transparent 65%); border-radius:50%; }
.cta-banner .inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cta-banner h2 { color: #fff; }
.cta-banner p { color: #c9ece7; margin-top: 10px; max-width: 540px; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 50px; align-items: start; }
.faq-list { display: grid; gap: 14px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: box-shadow .2s; }
.faq-item[open] { box-shadow: var(--shadow-sm); border-color: var(--mint); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 20px 24px; font-weight: 600; font-size: 1.04rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus { width: 28px; height: 28px; border-radius: 50%; background: var(--teal-50); color: var(--teal-600); display: grid; place-items: center; flex: none; transition: transform .25s, background .25s; }
.faq-item[open] summary .plus { transform: rotate(45deg); background: var(--teal-600); color: #fff; }
.faq-item .ans { padding: 0 24px 22px; color: var(--slate); font-size: .98rem; }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.tst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tst-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; display: flex; flex-direction: column; }
.tst-card .stars { color: var(--gold); display: flex; gap: 3px; margin-bottom: 14px; }
.tst-card .stars svg { width: 18px; height: 18px; }
.tst-card .quote { color: var(--slate); font-size: .96rem; flex: 1; }
.tst-card .who { display: flex; align-items: center; gap: 13px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.tst-card .av { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg,var(--teal-400),var(--teal-700)); color:#fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.tst-card .who strong { display: block; font-size: .98rem; }
.tst-card .who span { font-size: .82rem; color: var(--muted); }

/* =========================================================
   APPOINTMENT
   ========================================================= */
.appt-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center; }
.appt-info h2 { color: #fff; }
.appt-info p { color: #c9ece7; margin-top: 14px; }
.appt-info .phone { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; color: #fff; }
.appt-info .phone .ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.14); display: grid; place-items: center; }
.appt-info .phone .ic svg { width: 26px; height: 26px; }
.appt-info .phone span { font-size: .82rem; color: #a9d6cf; display: block; }
.appt-info .phone strong { font-size: 1.4rem; }
.appt-form { background: #fff; border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow-lg); }
.appt-form h3 { margin-bottom: 6px; }
.appt-form .sub { font-size: .9rem; color: var(--muted); margin-bottom: 20px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border: 1.6px solid var(--line); border-radius: 12px;
  font-family: inherit; font-size: .95rem; color: var(--ink); background: var(--bg-soft); transition: border .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal-500); background: #fff; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.appt-form .btn { width: 100%; justify-content: center; margin-top: 8px; }

/* =========================================================
   GALLERY
   ========================================================= */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gallery-grid .g-item { border-radius: 16px; overflow: hidden; aspect-ratio: 1; position: relative; cursor: pointer; }
.gallery-grid .g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-grid .g-item::after { content:""; position:absolute; inset:0; background: linear-gradient(transparent 55%, rgba(12,70,95,.45)); opacity:0; transition: opacity .3s; }
.gallery-grid .g-item:hover img { transform: scale(1.08); }
.gallery-grid .g-item:hover::after { opacity: 1; }
.gallery-grid .g-item.tall { grid-row: span 2; aspect-ratio: auto; }
.gallery-grid .g-item.wide { grid-column: span 2; aspect-ratio: 2; }

/* =========================================================
   PAGE HEADER (interior pages)
   ========================================================= */
.page-hero { background: linear-gradient(160deg, var(--teal-900), var(--teal-700)); color: #fff; position: relative; overflow: hidden; }
.page-hero::after { content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; background: radial-gradient(circle, rgba(92,193,228,.28), transparent 65%); border-radius:50%; }
.page-hero .container { position: relative; padding: 64px 24px; text-align: center; }
.page-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3rem); font-weight: 800; }
.page-hero .crumbs { margin-top: 14px; font-size: .9rem; color: #b9e0da; display: flex; gap: 10px; justify-content: center; align-items: center; }
.page-hero .crumbs a:hover { color: #fff; }
.page-hero .crumbs span { opacity: .6; }

/* ---- content / prose ---- */
.prose { max-width: 760px; }
.prose p { margin-bottom: 18px; font-size: 1.04rem; }
/* Inline links inside body copy must not rely on colour alone (WCAG 1.4.1). */
.prose p a:not(.btn), .prose li a:not(.btn) { color: var(--teal-700); text-decoration: underline; text-underline-offset: 2px; }
.prose p a:not(.btn):hover, .prose li a:not(.btn):hover { text-decoration-thickness: 2px; }
.prose h2 { margin: 36px 0 16px; }
.prose h3 { margin: 28px 0 12px; }
.prose ul { margin: 0 0 20px 0; padding-left: 4px; list-style: none; display: grid; gap: 12px; }
.prose ul li { display: flex; gap: 12px; align-items: flex-start; color: var(--slate); }
.prose ul li::before { content:""; width: 22px; height: 22px; flex: none; margin-top: 3px; border-radius: 50%; background: var(--teal-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231f93bd' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat; }

/* split layout for service pages */
.split { display: grid; grid-template-columns: 1.3fr .7fr; gap: 50px; align-items: start; }
/* The sidebar column must stretch to the article's full height, otherwise the
   <aside> is exactly as tall as the card, the sticky element has zero room to
   travel, and `position: sticky` does nothing. Stretching only to the article's
   height is also what stops the card before the footer. */
.split > aside { align-self: stretch; }
.split .media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; }
/* Sticks below the sticky header (+16px gap) while the article scrolls.
   `.split` uses align-items:start so the column doesn't stretch past the
   article, which keeps the card from ever floating over the footer. */
.sidecard { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; position: sticky; top: calc(var(--header-h) + 16px); }
.sidecard h3 { margin-bottom: 14px; font-size: 1.15rem; }
.side-links { list-style: none; display: grid; gap: 8px; }
.side-links a { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: .93rem; transition: all .2s; }
.side-links a:hover, .side-links a.active { background: var(--teal-600); color: #fff; border-color: transparent; }
.side-links a svg { width: 16px; height: 16px; }
.side-cta { margin-top: 22px; background: var(--teal-700); color: #fff; border-radius: 18px; padding: 24px; text-align: center; }
.side-cta strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.side-cta a.phone { display: block; font-size: 1.3rem; font-weight: 800; margin: 8px 0 14px; }

/* contact */
/* Clinics first — both cards side by side across the full width — then the
   appointment form underneath. Two maps stacked in a narrow column made the
   second clinic easy to miss. */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 46px; align-items: start; }
.clinic-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; align-items: start; }
.clinic-row .clinic-card { margin-bottom: 0; }
.contact-grid .appt-form { width: 100%; }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; margin-bottom: 18px; display: flex; gap: 16px; }
.info-card .ic { width: 50px; height: 50px; border-radius: 14px; background: var(--teal-50); color: var(--teal-600); display: grid; place-items: center; flex: none; }
.info-card .ic svg { width: 24px; height: 24px; }
.info-card h4 { font-size: 1.05rem; margin-bottom: 5px; }
.info-card p, .info-card a { font-size: .94rem; color: var(--slate); }
.info-card a:hover { color: var(--teal-700); }
.map-wrap { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.map-wrap iframe { width: 100%; height: 380px; border: 0; display: block; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--teal-900); color: #bfe2dd; padding-top: 70px; }
/* Wider gutters, and the slack taken out of the short Services links column and
   given to the two clinic columns on the right, which were wrapping addresses
   while leaving empty space beside them. */
.footer-grid { display: grid; grid-template-columns: 1.3fr 0.85fr 1.2fr 1.2fr; column-gap: 64px; row-gap: 40px; padding-bottom: 50px; }
.site-footer h4 { color: #fff; font-size: 1.05rem; margin-bottom: 20px; }
.site-footer .brand .name, .site-footer .brand .name span { color: #fff; }
.site-footer p { color: #a9d6cf; font-size: .92rem; margin-top: 16px; }
.foot-links { list-style: none; display: grid; gap: 11px; }
.foot-links a { color: #bfe2dd; font-size: .92rem; transition: color .2s, padding .2s; }
.foot-links a:hover { color: #fff; padding-left: 5px; }
.foot-contact { display: grid; gap: 14px; }
.foot-contact .row { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: #bfe2dd; }
.foot-contact .row svg { width: 18px; height: 18px; color: var(--teal-400); flex: none; margin-top: 2px; }
.foot-branch { display: grid; gap: 9px; }
.foot-branch-name { display: block; font-size: .86rem; font-weight: 700; color: #fff; letter-spacing: .01em; }
.foot-phones { display: flex; flex-wrap: wrap; gap: 4px; }
.foot-hours { display: grid; gap: 7px; }
.foot-hours .h { display: flex; justify-content: space-between; font-size: .86rem; color: #a9d6cf; }
.foot-hours .h span:last-child { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .85rem; color: #8fc4bc; }
.footer-bottom a { color: var(--teal-400); }
.socials-foot { display: flex; gap: 10px; }
.socials-foot a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; transition: background .2s; }
.socials-foot a:hover { background: var(--teal-500); }
.socials-foot svg { width: 18px; height: 18px; }

/* =========================================================
   UTIL / ANIMATION
   ========================================================= */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.text-center { text-align: center; }
.mt-40 { margin-top: 40px; }
.floating-call { position: fixed; bottom: 22px; right: 22px; z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: var(--teal-600); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px rgba(31,147,189,.45); animation: pulse 2s infinite; }
.floating-call svg { width: 26px; height: 26px; }
@keyframes pulse { 0%,100%{ box-shadow: 0 14px 30px rgba(31,147,189,.45); } 50%{ box-shadow: 0 14px 30px rgba(31,147,189,.45), 0 0 0 14px rgba(31,147,189,0); } }

/* =========================================================
   MODERN SECTIONS (v2 redesign)
   ========================================================= */
.blob { position: absolute; z-index: 0; pointer-events: none; filter: blur(2px); opacity: .5; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal-600); margin-bottom: 16px; }
.kicker::before { content: ""; width: 30px; height: 2px; background: var(--teal-500); display: inline-block; }
.display { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }

/* SOLUTIONS — numbered feature list (home-12 style) */
.solutions { position: relative; overflow: hidden; }
.solutions .grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 64px; align-items: start; }
.solutions .visual { position: sticky; top: 100px; }
.solutions .visual .imgwrap { position: relative; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 3/4.1; }
.solutions .visual .imgwrap img { width: 100%; height: 100%; object-fit: cover; }
.solutions .visual .floaty { position: absolute; left: 22px; bottom: 22px; right: 22px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-radius: 18px; padding: 18px 20px; display: flex; gap: 16px; align-items: center; }
.solutions .visual .floaty .n { font-size: 1.9rem; font-weight: 800; color: var(--teal-600); }
.solutions .visual .floaty span { font-size: .86rem; color: var(--slate); }
.sol-list { display: grid; gap: 0; }
.sol-item { display: grid; grid-template-columns: 86px 1fr; gap: 26px; padding: 34px 0; border-top: 1px solid var(--line); transition: padding .3s; }
.sol-item:first-child { border-top: 0; padding-top: 0; }
.sol-item .num { font-size: 2.6rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--teal-400); letter-spacing: -.04em; }
.sol-item h3 { font-size: 1.45rem; margin-bottom: 10px; }
.sol-item p { font-size: .98rem; }
.sol-feats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 14px; }
.sol-feats li { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--ink); }
.sol-feats li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--teal-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231f93bd' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; }
.sol-item .lnk { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; color: var(--teal-700); }
.sol-item .lnk svg { width: 16px; height: 16px; transition: transform .2s; }
.sol-item .lnk:hover svg { transform: translateX(5px); }

/* FEATURE BAND — full-width flex (home-04 style) */
.band { background: linear-gradient(160deg, #0e4f68 0%, var(--teal-900) 100%); color: #fff; position: relative; overflow: hidden; }
.band::before { content:""; position:absolute; left:-140px; bottom:-160px; width:480px; height:480px; background: radial-gradient(circle, rgba(92,193,228,.22), transparent 65%); border-radius:50%; }
.band::after { content:""; position:absolute; right:-120px; top:-120px; width:360px; height:360px; background: radial-gradient(circle, rgba(92,193,228,.16), transparent 65%); border-radius:50%; }
.band .container { position: relative; }
.band .band-top { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: end; margin-bottom: 56px; }
.band .kicker { color: var(--teal-400); }
.band .display { color: #fff; }
.band .band-top p { color: #bfe6e0; font-size: 1.04rem; }
.band-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.band-feat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; padding: 30px 26px; transition: background .25s, transform .25s; }
.band-feat:hover { background: rgba(255,255,255,.1); transform: translateY(-6px); }
.band-feat .ic { width: 58px; height: 58px; border-radius: 16px; background: linear-gradient(135deg, var(--teal-500), var(--teal-400)); display: grid; place-items: center; margin-bottom: 20px; color: #07332f; }
.band-feat .ic svg { width: 30px; height: 30px; }
.band-feat h3, .band-feat h4 { color: #fff; font-size: 1.12rem; margin-bottom: 8px; }
.band-feat p { color: #aedcd5; font-size: .92rem; }

/* SERVICES — editorial (de-boxed) */
.svc-edit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px 30px; }
.svc-x { position: relative; display: block; }
.svc-x .ph { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 16/12; margin-bottom: 20px; }
.svc-x .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.svc-x:hover .ph img { transform: scale(1.07); }
.svc-x .ph .tag { position: absolute; top: 16px; left: 16px; width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); display: grid; place-items: center; color: var(--teal-700); font-weight: 800; }
.svc-x .ph .go { position: absolute; right: 16px; bottom: 16px; width: 46px; height: 46px; border-radius: 50%; background: var(--teal-600); color: #fff; display: grid; place-items: center; transform: translateY(8px); opacity: 0; transition: all .3s; }
.svc-x .ph .go svg { width: 20px; height: 20px; }
.svc-x:hover .ph .go { transform: translateY(0); opacity: 1; }
.svc-x h3 { font-size: 1.28rem; margin-bottom: 8px; transition: color .2s; }
.svc-x:hover h3 { color: var(--teal-700); }
.svc-x p { font-size: .95rem; }

/* DE-BOX overrides */
.faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.faq-item[open] { box-shadow: none; }
.faq-item summary { padding: 22px 0; }
.faq-item .ans { padding: 0 0 22px; }
.tst-card { border: 0; background: var(--bg-soft); border-radius: 24px; position: relative; padding: 34px 30px; }
.tst-card::before { content: "\201C"; position: absolute; top: 6px; right: 24px; font-size: 5rem; line-height: 1; color: var(--mint); font-family: Georgia, serif; }
.tst-card .who { border-top: 1px solid var(--line); }
.about-feature { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; }
.about-feature .af { padding: 0; }
.about-feature .af .ic { width: 56px; height: 56px; border-radius: 16px; background: var(--teal-50); color: var(--teal-600); display: grid; place-items: center; margin-bottom: 18px; }
.about-feature .af .ic svg { width: 28px; height: 28px; }
.about-feature .af h3 { font-size: 1.18rem; margin-bottom: 8px; }
.about-feature .af p { font-size: .95rem; }
.statline { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; }
.statline .s strong { display: block; font-size: clamp(2rem,4vw,2.8rem); font-weight: 800; color: var(--teal-700); letter-spacing: -.02em; }
.statline .s span { font-size: .9rem; color: var(--muted); font-weight: 600; }

/* =========================================================
   SERVICES — split cards (home-04 style: image + colour panel)
   ========================================================= */
.svc-split-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.svc-split { display: grid; grid-template-columns: 1.02fr 1fr; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); min-height: 340px; }
.svc-split .pic { position: relative; overflow: hidden; min-height: 220px; }
.svc-split .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.svc-split:hover .pic img { transform: scale(1.06); }
.svc-split .panel { padding: 40px 34px; display: flex; flex-direction: column; justify-content: center; color: #fff; position: relative; }
.svc-split .panel .av { width: 62px; height: 62px; border-radius: 50%; background: #fff; display: grid; place-items: center; margin-bottom: 22px; box-shadow: 0 10px 22px rgba(0,0,0,.16); }
.svc-split .panel .av svg { width: 30px; height: 30px; color: var(--teal-700); }
.svc-split .panel h3 { color: #fff; font-size: 1.55rem; margin-bottom: 12px; letter-spacing: -.02em; }
.svc-split .panel p { color: rgba(255,255,255,.86); font-size: .96rem; margin-bottom: 20px; }
.svc-split .panel .lnk { color: #fff; font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; align-self: flex-start; }
.svc-split .panel .lnk svg { width: 16px; height: 16px; transition: transform .2s; }
.svc-split:hover .panel .lnk svg { transform: translateX(5px); }
.svc-split:nth-child(odd) .panel { background: var(--teal-600); }
.svc-split:nth-child(even) .panel { background: var(--teal-900); }

/* =========================================================
   BLEND THEME (Hident + Dentcure) — v3
   ========================================================= */
:root{ --mint-bg:#e7f7f1; --mint-btn:#86d4ee; }

/* big rounded display headings */
.xl-display { font-size: clamp(2.6rem, 6.4vw, 5.2rem); font-weight: 800; line-height: .98; letter-spacing: -.045em; color: var(--ink); }
.label-sm { display:inline-block; font-size:.8rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--teal-600); margin-bottom:14px; }

/* dotted decoration */
.dots { background-image: radial-gradient(var(--teal-400) 1.7px, transparent 1.7px); background-size: 18px 18px; }

/* mint band */
.mint-band { background: var(--mint-bg); }

/* buttons */
.btn--mint { background: var(--mint-btn); color: var(--ink); box-shadow: 0 12px 26px rgba(92,193,228,.30); }
.btn--mint:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(92,193,228,.40); }
.btn--xl { padding: 19px 38px; font-size: 1.02rem; }
.play { display:inline-flex; align-items:center; gap:14px; font-weight:700; color:var(--ink); background:none; border:0; cursor:pointer; }
.play .pp { width:54px; height:54px; border-radius:50%; background:#fff; border:1px solid var(--line); display:grid; place-items:center; color:var(--teal-700); box-shadow:var(--shadow-sm); transition:transform .2s; }
.play:hover .pp { transform:scale(1.08); }
.play .pp svg { width:20px; height:20px; }
.play small { display:block; font-size:.78rem; color:var(--muted); font-weight:600; }

/* HERO v3 */
.hero3 { position:relative; overflow:hidden; background:#fff; }
.hero3 .container { display:grid; grid-template-columns:1.04fr .96fr; gap:50px; align-items:center; padding:56px 24px 86px; position:relative; }
.hero3 .badge-line { display:inline-flex; align-items:center; gap:10px; font-weight:700; color:var(--teal-700); margin-bottom:22px; }
.hero3 .badge-line .dot { width:24px;height:24px;border-radius:50%; background:var(--teal-500); color:#fff; display:grid; place-items:center; }
.hero3 .badge-line .dot svg { width:14px;height:14px; }
.hero3 .h-actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:34px; }
.hero3 .media { position:relative; }
.blob-img { border-radius:46% 54% 48% 52% / 58% 56% 44% 42%; overflow:hidden; aspect-ratio:1/1.04; background:var(--mint); box-shadow:var(--shadow-lg); }
.blob-img img { width:100%; height:100%; object-fit:cover; }
.exp-badge { position:absolute; left:-14px; bottom:34px; background:var(--teal-700); color:#fff; border-radius:18px; padding:16px 22px; transform:rotate(-6deg); box-shadow:var(--shadow); z-index:3; }
.exp-badge strong { display:block; font-size:1.8rem; font-weight:800; line-height:1; }
.exp-badge span { font-size:.78rem; opacity:.9; }
.hero3 .dots-acc { position:absolute; width:120px; height:120px; right:30px; top:0; z-index:0; opacity:.5; }

/* rotating certified badge */
.cert-badge { position:absolute; top:-22px; right:-10px; width:128px; height:128px; z-index:4; }
.cert-badge::before { content:""; position:absolute; inset:0; border-radius:50%; background:#fff; box-shadow:var(--shadow); }
.cert-badge svg.ring { position:absolute; inset:0; width:100%; height:100%; animation:spin 16s linear infinite; }
.cert-badge svg.ring text { font-size:8.4px; font-weight:800; letter-spacing:1.2px; fill:var(--ink); text-transform:uppercase; }
.cert-badge .core { position:absolute; inset:0; margin:auto; width:56px; height:56px; border-radius:50%; background:var(--teal-600); color:#fff; display:grid; place-items:center; }
.cert-badge .core svg { width:30px; height:30px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ICON TILES (Dentcure) */
.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.tile { background:#fff; border:1px solid var(--line); border-radius:22px; padding:28px 26px; box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s; }
.tile:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.tile .ic { width:60px; height:60px; border-radius:18px; background:var(--teal-50); color:var(--teal-600); display:grid; place-items:center; margin-bottom:18px; transition:background .25s, color .25s; }
.tile:hover .ic { background:var(--teal-600); color:#fff; }
.tile .ic svg { width:30px; height:30px; }
.tile h2, .tile h3 { font-size:1.18rem; margin-bottom:8px; }
.tile p { font-size:.92rem; }

/* SERVICE LIST ROWS (Hident editorial) */
.svc-head { display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; align-items:end; margin-bottom:30px; }
.svc-head .left p { margin-bottom:18px; }
.svc-rows { display:grid; }
.svc-row { display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center; padding:26px 6px; border-top:1px solid var(--line); transition:background .2s, padding-left .25s; border-radius:14px; }
.svc-row:last-child { border-bottom:1px solid var(--line); }
.svc-row:hover { background:var(--bg-soft); padding-left:18px; }
.svc-row .thumb { width:70px; height:70px; border-radius:50%; overflow:hidden; flex:none; }
.svc-row .thumb img { width:100%; height:100%; object-fit:cover; }
.svc-row .meta h3 { font-size:1.4rem; margin-bottom:4px; transition:color .2s; }
.svc-row:hover .meta h3 { color:var(--teal-700); }
.svc-row .meta p { font-size:.94rem; }
.svc-row .go { width:56px; height:56px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--teal-700); transition:all .25s; flex:none; }
.svc-row .go svg { width:20px; height:20px; }
.svc-row:hover .go { background:var(--teal-600); color:#fff; border-color:transparent; }

/* CHECK LIST */
.check-list { list-style:none; display:grid; gap:13px; margin:22px 0 28px; }
.check-list li { display:flex; gap:13px; align-items:flex-start; font-weight:600; color:var(--ink); }
.check-list li .c { width:24px; height:24px; border-radius:50%; background:var(--teal-500); color:#fff; display:grid; place-items:center; flex:none; margin-top:2px; }
.check-list li .c svg { width:14px; height:14px; }

/* split-photo about (Dentcure) */
.about2 { display:grid; grid-template-columns:1fr 1.06fr; gap:56px; align-items:center; }
.about2 .imgs { position:relative; }
.about2 .imgs .big { border-radius:30px 30px 30px 110px; overflow:hidden; aspect-ratio:1/1.05; box-shadow:var(--shadow); }
.about2 .imgs .big img { width:100%; height:100%; object-fit:cover; }

/* big image cards row (Hident mint section) */
.imgcards { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.imgcard { border-radius:24px; overflow:hidden; position:relative; aspect-ratio:3/3.4; box-shadow:var(--shadow); }
.imgcard img { width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.imgcard:hover img { transform:scale(1.06); }
.imgcard .cap { position:absolute; left:0; right:0; bottom:0; padding:50px 24px 24px; background:linear-gradient(transparent, rgba(12,70,95,.85)); color:#fff; }
.imgcard .cap h3 { color:#fff; font-size:1.2rem; }

/* =========================================================
   SERVICE ACCORDION (Dentcure home-3) — hover swaps image
   ========================================================= */
.svc-acc { display:grid; grid-template-columns:1fr 1.12fr; gap:36px; align-items:stretch; }
.acc-list { display:flex; flex-direction:column; gap:16px; }
.acc-item { display:flex; gap:18px; align-items:flex-start; padding:22px 24px; border-radius:20px; background:#fff; border:1px solid var(--line); transition:background .3s, border-color .3s, box-shadow .3s, transform .3s; cursor:pointer; }
.acc-item .ic { width:54px; height:54px; border-radius:15px; background:var(--teal-50); color:var(--teal-600); display:grid; place-items:center; flex:none; transition:background .3s, color .3s; }
.acc-item .ic svg { width:28px; height:28px; }
.acc-item h3 { font-size:1.2rem; margin-bottom:4px; transition:color .3s; }
.acc-item p { font-size:.92rem; }
.acc-item.active { background:var(--teal-600); border-color:transparent; box-shadow:var(--shadow); transform:translateY(-2px); }
.acc-item.active .ic { background:#fff; color:var(--teal-700); }
.acc-item.active h3 { color:#fff; }
.acc-item.active p { color:rgba(255,255,255,.85); }
.acc-media { position:relative; border-radius:26px; overflow:hidden; min-height:460px; box-shadow:var(--shadow); }
.acc-imgs { position:absolute; inset:0; }
.acc-imgs img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.08); transition:opacity .7s ease, transform 1.4s ease; }
.acc-imgs img.active { opacity:1; transform:scale(1); }
.acc-appt { position:absolute; left:24px; right:24px; bottom:24px; background:var(--teal-900); color:#fff; border-radius:16px; padding:18px; display:flex; align-items:center; justify-content:center; gap:12px; font-weight:700; z-index:2; transition:background .2s; }
.acc-appt svg { width:18px; height:18px; }
.acc-appt:hover { background:var(--ink); }

/* =========================================================
   TESTIMONIAL BAND — horizontal marquee (left-to-right)
   ========================================================= */
.tband { background:linear-gradient(160deg,#0e4f68,var(--teal-900)); color:#fff; overflow:hidden; }
.tband .top { display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:center; margin-bottom:48px; }
.tband .kicker { color:var(--teal-400); }
.tband .stat-big { font-size:clamp(3rem,6vw,4.6rem); font-weight:800; color:#fff; line-height:1; letter-spacing:-.03em; }
.tband .stat-sub { color:#bfe6e0; max-width:340px; margin-top:12px; }
.tband .rate { display:flex; align-items:center; gap:16px; margin-top:24px; }
.tband .avs { display:flex; }
.tband .avs span { width:44px; height:44px; border-radius:50%; border:2px solid #0e4f68; margin-left:-12px; background:var(--teal-500); display:grid; place-items:center; color:#fff; font-weight:700; font-size:.82rem; }
.tband .avs span:first-child { margin-left:0; }
.tband .rate .rt strong { color:#fff; font-size:1.3rem; display:block; }
.tband .rate .rt small { color:#bfe6e0; }
.marquee { position:relative; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.marquee-track { display:flex; gap:24px; width:max-content; animation:scrollx 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.t-card { width:380px; flex:none; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:28px; }
.t-card .stars { color:var(--gold); display:flex; gap:3px; margin-bottom:12px; }
.t-card .stars svg { width:16px; height:16px; }
.t-card .q { color:#eafaf7; font-size:.96rem; line-height:1.6; }
.t-card .who { display:flex; align-items:center; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.12); }
.t-card .who .av { width:46px; height:46px; border-radius:50%; background:var(--teal-500); display:grid; place-items:center; color:#fff; font-weight:700; flex:none; }
.t-card .who strong { color:#fff; display:block; font-size:.96rem; }
.t-card .who span { color:#a9d6cf; font-size:.84rem; }
@keyframes scrollx { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* =========================================================
   IMPROVED FAQ / GALLERY / FOOTER  (v4)
   ========================================================= */

/* ---- FAQ: carded, numbered accordion ---- */
.faq-list { counter-reset: faq; }
.faq-item { background:#fff; border:1px solid var(--line); border-radius:16px; margin-bottom:14px; padding:0 10px; transition:box-shadow .25s, border-color .25s, transform .25s; }
.faq-item[open] { box-shadow:var(--shadow); border-color:var(--teal-400); }
.faq-item:hover { border-color:var(--teal-400); }
.faq-item summary { padding:20px 14px; gap:16px; counter-increment:faq; font-size:1.05rem; align-items:center; }
.faq-item summary::before { content:counter(faq,decimal-leading-zero); font-weight:800; color:var(--teal-600); font-size:.95rem; background:var(--teal-50); width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:none; transition:background .25s, color .25s; }
.faq-item[open] summary::before { background:var(--teal-600); color:#fff; }
.faq-item summary .plus { margin-left:auto; }
.faq-item .ans { padding:0 14px 22px 70px; }

/* ---- GALLERY: clean 3-col with hover zoom icon ---- */
.gallery-grid { grid-template-columns:repeat(3,1fr); gap:18px; }
.gallery-grid .g-item { aspect-ratio:4/3; border-radius:20px; }
.gallery-grid .g-item:first-child { grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
.gallery-grid .g-item::before {
  content:""; position:absolute; z-index:2; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.5); width:56px; height:56px; border-radius:50%;
  background:var(--teal-600) 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='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center/24px no-repeat;
  opacity:0; transition:all .35s ease; box-shadow:var(--shadow);
}
.gallery-grid .g-item:hover::before { opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ---- FOOTER: icons, newsletter, polish ---- */
.site-footer { position:relative; }
.foot-news { background:linear-gradient(120deg,var(--teal-700),var(--teal-900)); border-radius:24px; padding:34px 40px; margin-bottom:56px; display:grid; grid-template-columns:1.1fr 1fr; gap:30px; align-items:center; box-shadow:var(--shadow); }
.foot-news h3 { color:#fff; font-size:1.5rem; margin-bottom:6px; }
.foot-news p { color:#cfeaf6; font-size:.95rem; }
.foot-news form { display:flex; gap:12px; }
.foot-news input { flex:1; padding:15px 18px; border-radius:100px; border:0; font-family:inherit; font-size:.95rem; background:rgba(255,255,255,.95); }
.foot-news input:focus { outline:2px solid var(--teal-400); }
.foot-news button { border:0; cursor:pointer; white-space:nowrap; }

.site-footer h4 { display:flex; align-items:center; gap:9px; }
.site-footer h4::before { content:""; width:18px; height:2px; background:var(--teal-400); display:inline-block; border-radius:2px; }
.foot-links a { display:inline-flex; align-items:center; gap:9px; }
.foot-links a::before {
  content:""; width:16px; height:16px; flex:none; opacity:.8; transition:transform .2s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235cc1e4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.foot-links a:hover::before { transform:translateX(3px); }
.foot-badges { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.foot-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:100px; padding:8px 14px; font-size:.82rem; color:#cfeaf6; }
.foot-badge svg { width:16px; height:16px; color:var(--teal-400); }

/* =========================================================
   LOGO + HERO APPOINTMENT FORM  (v5)
   ========================================================= */
/* Requested size: 127x83. The logo file is 175x130 (ratio 1.35) but 127x83 is
   ratio 1.53, so object-fit:contain letterboxes it instead of stretching it.
   Supplying a 127x83-ratio logo file would fill the box edge to edge. */
.brand-logo { height:83px; width:127px; object-fit:contain; display:block; }
.site-header .brand { gap:0; }
.site-footer .brand-logo { height:64px; background:#fff; padding:10px 16px; border-radius:12px; }

.hero3 .container { align-items:center; }
.hero-copy .lead { max-width:520px; }
.hero-trust { display:flex; align-items:center; gap:28px; margin-top:30px; flex-wrap:wrap; }
.hero-call { display:inline-flex; align-items:center; gap:14px; }
.hero-call .ic { width:54px; height:54px; border-radius:50%; background:var(--teal-50); color:var(--teal-700); display:grid; place-items:center; flex:none; }
.hero-call .ic svg { width:24px; height:24px; }
.hero-call small { display:block; font-size:.8rem; color:var(--muted); }
.hero-call strong { font-size:1.18rem; color:var(--ink); }
.hero-mini { display:flex; gap:24px; }
.hero-mini .m strong { display:block; font-size:1.5rem; font-weight:800; color:var(--teal-700); line-height:1; }
.hero-mini .m span { font-size:.82rem; color:var(--muted); }
.appt-form.in-hero { box-shadow:var(--shadow-lg); }
.appt-form .form-badge { display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-600); background:var(--teal-50); padding:6px 14px; border-radius:100px; margin-bottom:14px; }
.appt-form .form-badge svg { width:14px; height:14px; }

/* =========================================================
   RESPONSIVE + GALLERY FIX + COUNTER  (v6)
   ========================================================= */

/* ---- Gallery: uniform crisp tiles (no upscaling blur) ---- */
.gallery-grid { grid-template-columns:repeat(3,1fr); gap:18px; }
.gallery-grid .g-item,
.gallery-grid .g-item:first-child { grid-column:auto; grid-row:auto; aspect-ratio:4/3; border-radius:20px; }
.gallery-grid .g-item img { image-rendering:auto; }

/* ---- mobile nav backdrop ---- */
.nav-backdrop { position:fixed; inset:0; background:rgba(12,70,95,.45); opacity:0; visibility:hidden; transition:opacity .3s; z-index:99; }
.nav-backdrop.show { opacity:1; visibility:visible; }

/* ---- general responsive polish ---- */

/* ---- counter: avoid layout shift while animating ---- */
.statline .s strong, .hero-mini .m strong, .tband .stat-big { font-variant-numeric: tabular-nums; }

/* =========================================================
   CONTACT PAGE (redesign)
   ========================================================= */
.contact-quick { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:30px; }
.cq { background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px 26px; text-align:center; transition:transform .25s, box-shadow .25s; }
.cq:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.cq .ic { width:62px; height:62px; border-radius:18px; background:var(--teal-50); color:var(--teal-600); display:grid; place-items:center; margin:0 auto 16px; transition:background .25s, color .25s; }
.cq:hover .ic { background:var(--teal-600); color:#fff; }
.cq .ic svg { width:30px; height:30px; }
.cq h2, .cq h4 { font-size:1.1rem; margin-bottom:6px; }
.cq p, .cq a { font-size:.95rem; color:var(--slate); display:block; }
.cq a:hover { color:var(--teal-700); }

.clinic-card { background:#fff; border:1px solid var(--line); border-radius:22px; padding:26px; margin-bottom:18px; transition:border-color .2s, box-shadow .2s; }
.clinic-card:hover { border-color:var(--teal-400); box-shadow:var(--shadow); }
.clinic-card .top { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.clinic-card .top .ic { width:48px; height:48px; border-radius:13px; background:var(--teal-50); color:var(--teal-600); display:grid; place-items:center; flex:none; }
.clinic-card .top .ic svg { width:24px; height:24px; }
.clinic-card .top h3, .clinic-card .top h4 { font-size:1.12rem; }
.clinic-card .top span { font-size:.82rem; color:var(--muted); }
.clinic-card .rows { display:grid; gap:9px; }
.clinic-card .rows .r { display:flex; gap:11px; align-items:flex-start; font-size:.93rem; color:var(--slate); }
.clinic-card .rows .r svg { width:17px; height:17px; color:var(--teal-500); flex:none; margin-top:3px; }
.clinic-map { margin-top:16px; border-radius:14px; overflow:hidden; border:1px solid var(--line); }
.clinic-map iframe { width:100%; height:220px; border:0; display:block; }
.clinic-card .dir { display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-weight:700; font-size:.88rem; color:var(--teal-700); }
.clinic-card .dir svg { width:15px; height:15px; }

/* =========================================================
   HERO PHOTO + MOBILE MENU FIX  (v7)
   ========================================================= */
.hero3 .container { align-items:start; }
.hero-copy { display:flex; flex-direction:column; }
.hero-photo { position:relative; margin-top:32px; border-radius:24px; overflow:hidden; height:240px; box-shadow:var(--shadow); }
.hero-photo img { width:100%; height:100%; object-fit:cover; }
.hero-photo .hp-badge { position:absolute; left:18px; bottom:18px; display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.94); backdrop-filter:blur(6px); border-radius:100px; padding:10px 18px; font-weight:700; font-size:.86rem; color:var(--teal-700); box-shadow:var(--shadow-sm); }
.hero-photo .hp-badge svg { width:18px; height:18px; }
.appt-form.in-hero { position:sticky; top:96px; }

/* ---- mobile menu: kill horizontal scroll, wrap long links ---- */

/* roll back hero alignment to centered for image banner */
.hero3 .container { align-items: center; }

/* =========================================================
   MOBILE MENU v8 — compact, collapsible submenu, no scrollbar
   ========================================================= */

/* =========================================================
   MOBILE MENU v9 — full menu visible in one tap, compact, no scroll
   ========================================================= */

/* =========================================================
   STAT SECTION — icon cards with hover (v10)
   ========================================================= */
.statline { gap: 26px; }
.statline .s {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: 22px; padding: 34px 22px 28px; text-align: center;
  overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.statline .s::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--teal-500), var(--teal-400));
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.statline .s:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: transparent; }
.statline .s:hover::before { transform: scaleX(1); }
.statline .si {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center; background: var(--teal-50); color: var(--teal-600);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.statline .si svg { width: 32px; height: 32px; }
.statline .s:hover .si { background: var(--teal-600); color: #fff; transform: rotate(-6deg) scale(1.08); }
.statline .s strong { display: block; font-size: clamp(2rem,4vw,2.8rem); font-weight: 800; color: var(--teal-700); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.statline .s span { font-size: .92rem; color: var(--muted); font-weight: 600; }

/* =========================================================
   SPACING + HEADING FIXES (v11)
   ========================================================= */
/* Service section heading — thoda chhota */
#services .section-head .xl-display { font-size: clamp(1.5rem, 3vw, 2.7rem) !important; }

/* Home "Apex Dental Hospital" text column — heading/para/button gaps */
.about2 h2 { margin-bottom: 16px; }
.about2 p { margin-top: 0 !important; margin-bottom: 16px; }
.about2 .btn { margin-top: 10px; }

/* About page text columns — gaps */
.about-grid h2 { margin-bottom: 16px; }
.about-grid > div > p { margin-bottom: 14px; }
.about-grid .btn { margin-top: 12px; }

/* Appointment info column — gaps */
.appt-info h2 { margin-bottom: 14px; }
.appt-info p { margin-bottom: 8px; }

/* Service detail pages — button para se chipke nahi */
.prose .btn { margin-top: 26px; }

/* =========================================================
   GALLERY LIGHTBOX (popup)
   ========================================================= */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.9); display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox .lb-img { max-width: 90vw; max-height: 84vh; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.55); animation: lbpop .3s ease; }
@keyframes lbpop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lightbox button { position: absolute; background: rgba(255,255,255,.14); color: #fff; border: 0; cursor: pointer; width: 52px; height: 52px; border-radius: 50%; font-size: 1.5rem; line-height: 1; display: grid; place-items: center; transition: background .2s, transform .2s; }
.lightbox button:hover { background: var(--teal-600); transform: scale(1.06); }
.lightbox .lb-close { top: 22px; right: 22px; }
.lightbox .lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 22px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-prev:hover, .lightbox .lb-next:hover { transform: translateY(-50%) scale(1.06); }
.lightbox .lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #fff; font-size: .9rem; background: rgba(255,255,255,.12); padding: 6px 16px; border-radius: 100px; }

/* =========================================================
   GALLERY HEADING fix — smaller, no width clamp, comfy line-height
   ========================================================= */
#gallery .section-head { max-width: 860px; }
#gallery .section-head h2 { font-size: clamp(1.5rem, 3vw, 2.7rem) !important; line-height: 1.2; }

/* =========================================================
   ALL SECTION HEADINGS — uniform size (hero chhod ke)
   ========================================================= */
.section .xl-display,
.section .display { font-size: clamp(1.5rem, 3vw, 2.7rem) !important; line-height: 1.2; }

/* =========================================================
   GOOGLE REVIEWS BADGE (testimonials)
   ========================================================= */
.g-reviews { display: inline-flex; align-items: center; gap: 14px; background: #fff; color: var(--ink); padding: 13px 22px; border-radius: 16px; box-shadow: 0 14px 34px rgba(0,0,0,.22); text-decoration: none; margin-top: 20px; transition: transform .2s, box-shadow .2s; }
.g-reviews:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(0,0,0,.3); }
.g-logo svg { width: 34px; height: 34px; display: block; }
.g-meta { display: flex; flex-direction: column; gap: 3px; }
.g-top { display: flex; align-items: center; gap: 9px; }
.g-top strong { font-size: 1.55rem; font-weight: 700; color: #202124; line-height: 1; }
.g-stars { position: relative; display: inline-block; font-size: 1.05rem; line-height: 1; }
.g-stars-bg { color: #dadce0; letter-spacing: 2px; }
.g-stars-fg { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: #fbbc05; letter-spacing: 2px; }
.g-sub { font-size: .82rem; color: #5f6368; }

/* =========================================================
   SCROLL-TO-TOP BUTTON
   ========================================================= */
.scroll-top { position: fixed; bottom: 90px; right: 22px; z-index: 90; width: 50px; height: 50px; border-radius: 50%; background: var(--teal-700); color: #fff; border: 0; cursor: pointer; display: grid; place-items: center; box-shadow: 0 12px 28px rgba(12,70,95,.4); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s, transform .3s, visibility .3s, background .2s; }
.scroll-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background: var(--teal-900); }
.scroll-top svg { width: 22px; height: 22px; }

/* hCaptcha spacing in forms */
.h-captcha { margin: 6px 0 18px; }

/* reCAPTCHA spacing in forms; in the footer newsletter bar the checkbox sits on its own row */
.g-recaptcha { margin: 6px 0 18px; }
.foot-news form { flex-wrap: wrap; }
.foot-news .g-recaptcha { flex: 0 0 100%; margin: 4px 0 0; order: 3; }

/* ===== responsive.css ===== */
/* RESPONSIVE STYLES — @media rules. Load AFTER style.css */

@media (max-width: 980px) {
  .nav {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    height: 100vh; height: 100dvh; width: min(320px, 84vw);
    background: #fff; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 92px 22px 40px; box-shadow: var(--shadow-lg);
    transform: translateX(105%); transition: transform .3s ease; overflow-y: auto;
  }
  .nav.open { transform: translateX(0); }
  .nav a { padding: 13px 16px; }
  .nav .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; padding: 4px 0 4px 14px; min-width: 0;
    border-left: 2px solid var(--mint); margin: 2px 0 6px 14px;
  }
  .nav-toggle { display: block; z-index: 110; }
  .header-cta .btn { display: none; }
}

@media (max-width: 880px) {
  .hero .container { grid-template-columns: 1fr; gap: 40px; }
  .hero-media { max-width: 460px; margin: 0 auto; }
  .hero-card.c1 { left: 8px; }
  .hero-card.c2 { right: 8px; }
}

@media (max-width: 760px) { .trust .container { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 44px; } .about-media { max-width: 480px; } }

@media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }

@media (max-width: 640px){ .cta-banner { padding: 38px 28px; } }

@media (max-width: 820px){ .faq-grid { grid-template-columns: 1fr; gap: 36px; } }

@media (max-width: 900px){ .tst-grid { grid-template-columns: 1fr; } }

@media (max-width: 860px){ .appt-grid { grid-template-columns: 1fr; gap: 36px; } .field-row { grid-template-columns: 1fr; } }

@media (max-width: 760px){ .gallery-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid .g-item.wide { grid-column: span 2; } }

@media (max-width: 860px){ .split { grid-template-columns: 1fr; } .sidecard { position: static; } }

@media (max-width: 860px){ .contact-grid { grid-template-columns: 1fr; } .clinic-row { grid-template-columns: 1fr; gap: 18px; } }

/* Two clinic addresses need real width — four columns start squeezing headings
   and phone numbers onto two lines well before the old 860px breakpoint. */
@media (max-width: 1080px){ .footer-grid { grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 34px; } }

@media (max-width: 520px){ .footer-grid { grid-template-columns: 1fr; } }

@media (max-width: 900px){ .solutions .grid { grid-template-columns: 1fr; gap: 40px; } .solutions .visual { position: static; max-width: 460px; } }

@media (max-width: 520px){ .sol-item { grid-template-columns: 1fr; gap: 8px; } .sol-item .num { font-size: 2rem; } }

@media (max-width: 860px){ .band .band-top { grid-template-columns: 1fr; gap: 18px; } .band-feats { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 480px){ .band-feats { grid-template-columns: 1fr; } }

@media (max-width: 880px){ .svc-edit { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 560px){ .svc-edit { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

@media (max-width: 800px){ .about-feature { grid-template-columns: 1fr; gap: 26px; max-width:460px; } }

@media (max-width: 600px){ .statline { grid-template-columns: repeat(2,1fr); gap: 30px 20px; } }

@media (max-width: 980px){ .svc-split-grid { grid-template-columns: 1fr; } }

@media (max-width: 560px){ .svc-split { grid-template-columns: 1fr; } .svc-split .pic { min-height: 210px; } .svc-split .panel { padding: 32px 26px; } }

@media (max-width: 880px){
  .hero3 .container { grid-template-columns:1fr; gap:40px; }
  .hero3 .media { max-width:440px; margin:0 auto; }
}

@media (max-width:900px){ .tiles { grid-template-columns:repeat(2,1fr); } }

@media (max-width:520px){ .tiles { grid-template-columns:1fr; } }

@media (max-width:760px){ .svc-head { grid-template-columns:1fr; gap:14px; } .svc-row { grid-template-columns:auto 1fr auto; gap:16px; } .svc-row .meta h3 { font-size:1.15rem; } }

@media (max-width:480px){ .svc-row .thumb { width:54px; height:54px; } }

@media (max-width:860px){ .about2 { grid-template-columns:1fr; gap:40px; } .about2 .imgs { max-width:440px; } }

@media (max-width:820px){ .imgcards { grid-template-columns:1fr; max-width:440px; margin:0 auto; } }

@media (max-width:860px){ .svc-acc { grid-template-columns:1fr; } .acc-media { min-height:340px; } }

@media (max-width:760px){ .tband .top { grid-template-columns:1fr; gap:22px; } .t-card { width:300px; } }

@media (max-width:520px){ .faq-item .ans { padding-left:14px; } }

@media (max-width:760px){ .gallery-grid { grid-template-columns:repeat(2,1fr); } .gallery-grid .g-item:first-child { grid-column:span 2; grid-row:auto; aspect-ratio:16/9; } }

@media (max-width:740px){ .foot-news { grid-template-columns:1fr; padding:28px; } }

/* Width follows the height on small screens — a fixed 127px would distort. */
@media (max-width:520px){ .brand-logo { height:56px; width:auto; } }

@media (max-width:880px){ .appt-form.in-hero { max-width:520px; margin:0 auto; } }

@media (max-width: 980px){
  .nav { z-index:110; }
  .nav-toggle { display:block; z-index:120; }
  .header-cta .btn { display:none; }
  .nav .mob-cta { display:flex !important; justify-content:center; margin-top:14px; }
}

@media (max-width: 860px){
  .section { padding: 64px 0; }
}

@media (max-width: 760px){
  .topbar { font-size:.8rem; }
  .topbar .tb-group:first-child { display:none; }
  .topbar .container { justify-content:center; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .hero3 .container { padding-top:36px; padding-bottom:50px; }
  .brand-logo { height:64px; width:auto; }
  /* Header shrinks with the logo, so the sticky offset must too. */
  :root { --header-h: 92px; }
}

@media (max-width: 560px){
  .section { padding: 50px 0; }
  .field-row { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .hero-trust { gap:20px; }
  .hero-mini { gap:18px; }
  .appt-form.in-hero, .appt-form { padding:24px; }
  .cta-banner { text-align:center; }
  .cta-banner .inner { justify-content:center; }
  .foot-news form { flex-direction:column; }
  .foot-news .btn { justify-content:center; }
  .svc-row { gap:14px; }
}

@media (max-width: 400px){
  .gallery-grid { grid-template-columns:1fr; }
}

@media (max-width:780px){ .contact-quick { grid-template-columns:1fr; } }

@media (max-width: 880px){
  .hero3 .container { align-items:stretch; }
  .appt-form.in-hero { position:static; }
  .hero-photo { height:220px; }
}

@media (max-width: 560px){ .hero-photo { height:190px; margin-top:24px; } }

@media (max-width: 980px){
  .nav { overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; }
  .nav a { white-space:normal; word-break:break-word; line-height:1.3; }
  .nav .dropdown { margin: 2px 0 6px 10px; padding: 4px 0 4px 12px; max-width:100%; }
  .nav .dropdown a { font-size:.9rem; }
}

@media (max-width: 980px){
  .nav { padding: 78px 20px 28px; gap: 2px; scrollbar-width: none; -ms-overflow-style: none; }
  .nav::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .nav a { padding: 12px 14px; }
  .nav .has-drop > a { display: flex; align-items: center; justify-content: space-between; }
  .nav .has-drop > a::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s; margin-left: 8px; }
  .nav .has-drop.open > a::after { transform: rotate(-135deg); }
  .nav .dropdown { display: none; border-left: 2px solid var(--mint); margin: 0 0 4px 14px; padding: 2px 0 2px 12px; }
  .nav .has-drop.open .dropdown { display: grid; }
  .nav .dropdown a { padding: 10px 12px; }
}

@media (max-width: 980px){
  .nav { padding: 70px 18px 24px; gap: 0; scrollbar-width: none; -ms-overflow-style: none; justify-content: flex-start; }
  .nav::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .nav a { padding: 11px 14px; }
  /* Submenus collapsed by default; tapping the main menu expands them */
  .nav .has-drop > a .caret { display: none; }
  .nav .has-drop > a::after { display: inline-block; }
  .nav .dropdown { display: none; border-left: 2px solid var(--mint); margin: 0 0 4px 14px; padding: 2px 0 2px 12px; }
  .nav .has-drop.open .dropdown { display: grid; }
  .nav .dropdown a { padding: 9px 12px; font-size: .88rem; }
}

@media (max-width: 600px){ .statline { grid-template-columns: repeat(2,1fr); gap: 16px; } .statline .s { padding: 26px 14px 22px; } }

@media (max-width: 560px){
  .lightbox button { width: 42px; height: 42px; font-size: 1.2rem; }
  .lightbox .lb-close { top: 12px; right: 12px; }
  .lightbox .lb-prev { left: 10px; }
  .lightbox .lb-next { right: 10px; }
}