/* ============================================================
   Stunning Dentistry — Australia Landing Page v2
   New-template skin (tokens transcribed from stunningdentistry-ca-main
   src/app/globals.css + brand-tokens.ts). Mobile-first: base = 390px,
   min-width media queries enhance upward.
   ============================================================ */

/* Inter — brand canon, self-hosted variable font (opsz + wght axes).
   Mirrors .claude/skills/stunning-dentistry-design/colors_and_type.css.
   Playfair Display is superseded per the brand book; do not reintroduce. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations');
}

:root {
  --section-surface: #fbf6ea;
  --section-surface-alt: #f3e8d6;

  --brand-blue: #0058C8;
  --brand-blue-hover: #0048A3;
  --brand-blue-light: #2D6DF0;
  --brand-blue-deep: #001B5E;

  --brand-gold: #C9A84C;
  --brand-gold-dark: #8D6E1B;
  --brand-gold-light: #D4BC70;
  --brand-gold-top: #F9E08E;
  --brand-gold-mid: #D4AF37;

  --grad-brand-blue: linear-gradient(135deg, #0058C8 0%, #2D6DF0 100%);
  --grad-deep-navy: linear-gradient(160deg, #001B5E 0%, #0058C8 100%);
  --grad-trust-strip: linear-gradient(136deg, #0058C8 0%, #001B5E 100%);
  --grad-gold-luxury: linear-gradient(180deg, #F9E08E 0%, #D4AF37 48%, #8D6E1B 100%);
  --grad-gold-cta: linear-gradient(180deg, #F2C94C 0%, #D4AF37 45%, #8D6E1B 100%);

  --ink: #10203a;
  --ink-soft: #3d4d68;
  /* Brand canon: Inter only, headings and body alike. --font-heading is kept as a
     token name so existing call sites need no edits; it resolves to the same stack. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: var(--font-sans);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --header-h: 56px;
  --substrip-h: 46px;
  --radius-card: 18px;
  --shadow-card: 0 10px 30px rgba(0, 27, 94, 0.10);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  /* Tonal ramp (founder's flow signal): one fixed vertical gradient over the whole
     document, deepest warm sand at the top (just under the hero) easing to near-white
     at the footer. Cream-family sections are transparent so this shows through; dark
     navy + image banners stay opaque as rhythm punctuation. */
  background: linear-gradient(180deg,
    #EFE0C4 0%,
    #F3E8D6 12%,
    #F7EEDD 34%,
    #FBF5EA 56%,
    #FDFAF3 76%,
    #FFFDF9 100%) no-repeat;
  background-size: 100% 100%;
  background-attachment: scroll;
  line-height: 1.55;
  padding-bottom: 76px; /* room for mobile sticky bar */
  overflow-x: clip; /* .fullBleed uses 100vw, which overshoots by the scrollbar width */
}
html { overflow-x: clip; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- typography ---------- */
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.18; color: var(--brand-blue-deep); }
.sectionHead {
  text-align: center;
  font-size: clamp(1.65rem, 6vw, 2.5rem);
  margin-bottom: 6px;
}
.sectionHead span { display: block; color: var(--brand-gold-dark); font-style: italic; }
.helpingText {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 22px;
}
.section { padding: 16px 18px; } /* R34: density pass 3 — his call, empty space down */
/* Cream-family sections are transparent so the body tonal ramp shows through.
   .alt keeps a faint warm wash to preserve a hint of banding between adjacent
   cream sections without breaking the ramp. */
.section.light { background: transparent; }
.section.alt { background: rgba(226, 205, 158, 0.22); }
.section.white { background: transparent; }
.section.cream { background: transparent; }
.section.dark { background: var(--grad-deep-navy); color: #fff; }
.section.dark .sectionHead { color: #fff; }
.section.dark .sectionHead span { color: var(--brand-gold-light); }
.section.dark .helpingText { color: rgba(255, 255, 255, 0.75); }
.section.cream { background: #FFF9ED; }
.section.cream .clinicTabs button { background: #fff; color: var(--brand-blue-deep); }
.section.cream .clinicTabs button.active { background: var(--grad-gold-cta); }
.section.cream .clinicInfo h3 { color: var(--brand-gold-dark); }
.section.cream .clinicInfo p { color: var(--ink-soft); }
.section.cream .clinicBtns a { background: #fff; color: var(--brand-blue-deep); }
.wrap { max-width: 1120px; margin: 0 auto; }

/* ---------- buttons ---------- */
.btnGold {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--grad-gold-cta);
  color: var(--brand-blue-deep);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid rgba(141, 110, 27, 0.55);
  box-shadow: 0 8px 22px rgba(212, 175, 55, 0.35);
  text-shadow: none;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.btnGold:active { transform: scale(0.97); }
.btnGold img { width: 20px; height: 20px; }
.btnNavy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--grad-deep-navy);
  color: #fff;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.ctaRow { text-align: center; margin-top: 14px; } /* R34: was 26px */
/* Package section: ONE FLAT TONE, top to bottom.
   Two things made the strip under the CTAs read as a different tone from the heading above
   it. A row-by-row profile at PHONE width is what finally showed them; a section-wide
   average hides both, which is how they survived three earlier passes.

   1. .section.alt's wash is TRANSLUCENT (0.22) over the body's document-height tonal ramp,
      so it drifts lighter and cooler as it descends: #EDDDC0 at the heading, #EEDFC3 by the
      buttons. Opaque kills the drift dead. Safe on THIS section only, because neither of its
      neighbours is cream, so a flat cream cannot seam against them: the .uspBar above is dark,
      and below it is now .sbCare, which is WHITE (R27 moved the old white treatVidsSection
      carousel out to become the treatment grid under Our Work). A hard cream/white edge is
      the intended break there. Do NOT do this to .section.alt globally: the other .alt sections sit lower
      on the ramp and would seam against their own neighbours.
   2. the card + button drop-shadows painted grey bands across the cream (#DCCFBC under the
      cards, #DCCEB6 under the buttons, both ~17 levels down). The buttons are saturated
      shapes on cream and read fine with no shadow at all; the cards keep a tight one. */
/* NOTE the selector weights: .section.alt (2 classes) and .packCard.imgCard (2 classes,
   declared later) both beat a bare .packSection rule. Both of these must out-specify them
   or the fix silently does nothing. */
.section.alt.packSection { background: #EDDDC0; }
.packSection .ctaRow { margin-top: 10px; }
.packSection .ctaRow .btnGold,
.packSection .ctaRow .btnWa,
.packSection .ctaRow .btnWa:hover { box-shadow: none; }
/* even a tight card shadow still laid a visible line under the cards (16 levels down at
   the first row), so it goes: these cards are near-black blocks on cream and need no
   shadow to separate. */
.packSection .packCard.imgCard { box-shadow: none; }
/* R33: "10,000+ Aussies Fly to India ..." must fit its line — smaller than the stock head.
   (.packLead, NOT .packHead — a legacy navy card-band component already owns that name.) */
.packLead { font-size: clamp(1.15rem, 3.6vw, 1.7rem); }
/* R33: live pack cards — Gemini navy portrait + HTML text (title white / price gold),
   navy scrim strengthens the generated backdrop's left half for legibility */
.packCard.liveCard {
  position: relative;
  aspect-ratio: 1.9 / 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #0A1F4D;
  /* type below scales in cqw — vw clamps overflowed the fixed-ratio card at tablet widths (R37) */
  container-type: inline-size;
}
.liveCard .pcBg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.liveCard::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(7, 19, 46, 0.82) 0%, rgba(7, 19, 46, 0.45) 45%, rgba(7, 19, 46, 0) 70%);
}
.liveCard .pcText {
  position: absolute; inset: 0;
  z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 6% 7%;
  color: #fff;
}
.liveCard .pcTitle {
  font-weight: 800;
  font-size: clamp(0.95rem, 7.5cqw, 1.6rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.liveCard .pcTitle span { display: block; font-weight: 500; font-size: 0.62em; letter-spacing: 0.04em; margin-top: 4px; color: rgba(255, 255, 255, 0.92); }
.liveCard .pcPrice {
  margin-top: clamp(6px, 4cqw, 18px);
  font-weight: 800;
  font-size: clamp(1.05rem, 8.5cqw, 1.8rem);
  color: var(--brand-gold-top);
}
.liveCard .pcPer { font-size: clamp(0.68rem, 4.2cqw, 0.95rem); color: rgba(255, 255, 255, 0.88); margin-top: 2px; }

/* ---------- USP bar (second header, sits between hero and first section) ---------- */
.uspBar {
  height: 48px; /* R32: taller so the pill chips breathe */
  background-image: var(--grad-trust-strip);
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.marquee { display: flex; overflow: hidden; width: 100%; }
.marqueeTrack {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  animation: marquee-shift var(--marquee-dur, 26s) linear infinite;
  will-change: transform;
}
@keyframes marquee-shift { to { transform: translateX(var(--marquee-shift, -50%)); } }
@media (prefers-reduced-motion: reduce) { .marqueeTrack { animation: none; } }
.uspBar .marqueeTrack span {
  font-size: 0.78rem; /* R25: bumped from 0.72 — trust-strip text was legible but small on navy */
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* R32: each USP reads as an overlay button — a rounded pill behind the label.
     Decorative only (spans, not links), so no pointer affordance. */
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 6px 14px;
}
.uspBar .marqueeTrack { gap: 12px; padding-right: 12px; }
.uspBar .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-gold-top); display: inline-block; }
/* R18: the arrowed clinical sequence is a full-width DIVIDER between the before/after
   section and Safety & Regulatory now, not a rounded pill inside the Safety wrap. It sits
   outside any section in the markup, so it is edge-to-edge for free: the radius and the
   top margin (which made it read as a card) both go. */
.uspBar .arr { color: var(--brand-gold-top); font-style: normal; font-size: 0.9rem; line-height: 1; }

/* ---------- header ---------- */
.siteHeader {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 55;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: linear-gradient(160deg, #0a1f4d 0%, #001B5E 55%, #000a3e 100%);
  transition: box-shadow 0.3s var(--ease-out);
}
.siteHeader.solid { box-shadow: 0 6px 18px rgba(0, 27, 94, 0.35); }
.siteHeader .logo img { height: 34px; width: auto; }
.headerActions { display: flex; align-items: center; gap: 10px; }
.callPill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--grad-gold-cta);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  font-weight: 800;
  font-size: 0.82rem;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.waBtn img { width: 38px; height: 38px; }

/* sub-header CTA strip */
.subStrip {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  z-index: 54;
  height: var(--substrip-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  background: var(--section-surface);
  border-bottom: 1px solid rgba(201, 168, 76, 0.35);
}
.subStrip a,
.subStrip button {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--brand-blue-deep);
  background: #fff;
  border: 1px solid var(--brand-gold);
  border-radius: 999px;
  padding: 7px 12px;
  white-space: nowrap;
}

/* ---------- hero carousel ---------- */
.hero {
  margin-top: calc(var(--header-h) + var(--substrip-h));
  position: relative;
  overflow: hidden;
}
.heroCarousel { position: relative; }
.heroSlide { display: none; position: relative; }
.heroSlide.active { display: block; }
.heroSlide img { width: 100%; object-fit: cover; }

/* Round 16: hero = video carousel — per-slide media (video or still), left
   side blurred, live headline riding the blur zone */
.hero.heroVideoMode { aspect-ratio: 16 / 8; }
.hero.heroVideoMode .heroHeads { position: absolute; inset: 0; }
.hero.heroVideoMode .heroSlide { position: absolute; inset: 0; }
.hero.heroVideoMode .heroSlide.active { animation: heroFadeIn 0.6s ease both; }
.hero.heroVideoMode .heroMedia {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center; /* subjects live on the right of each clip */
}
.hero.heroVideoMode .heroBlur {
  position: absolute;
  inset: 0 52% 0 0;
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  background: linear-gradient(90deg, rgba(13, 31, 61, 0.45), rgba(13, 31, 61, 0.18));
  -webkit-mask-image: linear-gradient(90deg, #000 58%, transparent);
  mask-image: linear-gradient(90deg, #000 58%, transparent);
}
.hero.heroVideoMode .heroCopy {
  position: absolute;
  left: 16px; top: 0; bottom: 0;
  width: 46%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.hero.heroVideoMode .heroSlide.active .heroCopy { animation: heroHeadIn 0.7s ease 0.15s both; }
/* the clip has ended: the headline clears out before the cut (260ms — kept in step
   with HERO_EXIT_MS in main.js) */
.hero.heroVideoMode .heroSlide.leaving .heroCopy { animation: heroHeadOut 0.26s ease both; }
@keyframes heroHeadOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}
.hero.heroVideoMode .heroCopy h2 {
  font-family: var(--font-heading);
  color: #fff;
  font-size: clamp(0.98rem, 3.3vw, 1.9rem);
  line-height: 1.24;
  text-shadow: 0 1px 12px rgba(13, 31, 61, 0.65);
}
.hero.heroVideoMode .heroCopy p {
  color: var(--brand-gold-light, #E2CD9E);
  font-size: clamp(0.62rem, 1.7vw, 0.92rem);
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(13, 31, 61, 0.6);
}
@keyframes heroHeadIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeIn {
  from { opacity: 0.4; }
  to { opacity: 1; }
}
/* ---------- philosophy statement ---------- */
.statement {
  font-family: var(--font-heading);
  font-size: clamp(0.88rem, 2.9vw, 1.4rem);
  line-height: 1.45;
  text-align: center;
  color: var(--brand-blue-deep);
  max-width: 860px;
  margin: 0 auto;
}
.statement strong { color: var(--brand-gold-dark); }

/* ---------- badge marquee (single visit / crm / warranty / flights) ---------- */
.badgeMarquee { overflow: hidden; margin: 26px -18px 0; }
.badgeMarquee .marqueeTrack { gap: 14px; padding-right: 14px; animation-duration: 22s; }
.badgePill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--grad-deep-navy); /* layered blue (founder R10) */
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(201, 168, 76, 0.55);
  white-space: nowrap;
}
.badgePill img { width: 34px; height: 34px; }

/* ---------- full-bleed marquee (escape .wrap side padding) ---------- */
.fullBleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ---------- package cards: static 2x2 grid ---------- */
.packGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 680px;
  margin: 26px auto 0;
}
.packCard {
  width: auto;
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(201, 168, 76, 0.35);
}
.packCard.imgCard { border: 0; box-shadow: var(--shadow-card); line-height: 0; }
.packCard.imgCard img { width: 100%; height: auto; display: block; }
.packCard ul { list-style: none; padding: 14px 16px; }
.packCard li {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  padding: 3px 0 3px 26px;
  position: relative;
}
.packCard li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--brand-gold-dark);
  font-weight: 800;
}
.packCard.implantsBg .packHead {
  background:
    linear-gradient(135deg, rgba(13, 31, 61, 0.82) 0%, rgba(23, 51, 94, 0.68) 100%),
    url("../images/gen/implant-render.jpg") center 38% / cover no-repeat;
}
.packHead {
  background: linear-gradient(135deg, #0d1f3d 0%, #17335e 100%);
  padding: 18px 16px 16px;
  text-align: center;
  border-bottom: 3px solid var(--brand-gold-dark);
}
.packHead .packName {
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}
.packHead .packPrice {
  font-family: var(--font-heading);
  color: var(--brand-gold, #c9a84c);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.2;
  margin-top: 4px;
}
.packHead .packPer {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- baked-text banner (heading/list baked into the image; only the
   CTA is live). The full baked image always shows (no crop, never clips text);
   the CTA sits just below, centered, over the page's tonal ramp. ---------- */
.bakedBanner { position: relative; }
.bakedBanner > img { display: block; width: 100%; height: auto; }
.bakedBanner .labMedia { position: relative; overflow: hidden; }
.bakedBanner .labMedia video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.bakedBanner .labMedia::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(75deg, rgba(13, 31, 61, 0.72) 0%, rgba(13, 31, 61, 0.28) 45%, rgba(13, 31, 61, 0) 70%);
  pointer-events: none;
}
.bakedBanner .labMedia .quadText { z-index: 2; }
.bakedBanner .bbCtaRow { display: flex; justify-content: center; padding: 14px 16px 4px; }
.bakedBanner .bbCtaRow .btnGold { border: 0; }

/* ---------- background-overlay banner (image behind the copy) ---------- */
.bgBanner {
  position: relative;
  background-size: cover;
  background-position: center 30%;
  padding: 44px 0;
  overflow: hidden;
}
.bgBanner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(9, 22, 45, 0.88) 0%,
    rgba(9, 22, 45, 0.72) 46%,
    rgba(9, 22, 45, 0.28) 78%,
    rgba(9, 22, 45, 0.12) 100%);
}
.bgBanner.right::before {
  background: linear-gradient(270deg,
    rgba(9, 22, 45, 0.88) 0%,
    rgba(9, 22, 45, 0.72) 46%,
    rgba(9, 22, 45, 0.28) 78%,
    rgba(9, 22, 45, 0.12) 100%);
}
.bgBanner .bgContent { position: relative; z-index: 1; max-width: 560px; margin: 0; padding: 0 5vw; } /* hug the edge, not the 1120px wrap cap */
.bgBanner .sbSteps span { border-color: rgba(255, 255, 255, 0.4); }
.bgBanner.right .bgContent { margin-left: auto; text-align: left; }
.bgBanner h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 4.6vw, 1.9rem);
  line-height: 1.22;
  color: #fff;
}
.bgBanner h3 span { display: block; color: var(--brand-gold-light); font-size: 0.78em; margin-top: 6px; }
.bgBanner p { margin: 12px 0 0; color: rgba(255, 255, 255, 0.88); font-size: 0.95rem; line-height: 1.55; }
.bgBanner .sbCta { margin-top: 18px; border: 0; }
/* compact variant (Round 6): tighter consult/packages banner */
.bgBanner.compact { padding: 36px 0; }
.bgBanner.compact h3 { font-size: clamp(1.15rem, 3.8vw, 1.5rem); }
.bgBanner.compact p { font-size: 0.88rem; }
.btnGold.small { font-size: 0.88rem; padding: 10px 20px; }
@media (max-width: 767px) {
  .bgBanner { padding: 44px 0; }
  .bgBanner.compact { padding: 40px 0; }
  .bgBanner::before,
  .bgBanner.right::before { background: linear-gradient(180deg, rgba(9, 22, 45, 0.82) 0%, rgba(9, 22, 45, 0.55) 100%); }
}

/* ---------- treatment deconstruction videos ---------- */
.treatVids {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 26px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
/* side-by-side at every width (Round 6) */
.treatVids.two { grid-template-columns: repeat(2, 1fr); }
.treatVid {
  margin: 0;
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(201, 168, 76, 0.35);
}
.treatVid video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #0d1f3d;
}
.treatVid figcaption {
  padding: 12px 16px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  border-top: 3px solid var(--brand-gold-dark);
}
@media (min-width: 768px) {
  .treatVids { grid-template-columns: repeat(3, 1fr); }
  .treatVids.two { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
}

/* ---------- interstitial banner ---------- */
.bannerCard { display: block; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); max-width: 860px; margin: 0 auto; }

/* ---------- cost comparison (coded) ---------- */
.costCompare {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 760px;
  margin: 18px auto 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(201, 168, 76, 0.5);
  box-shadow: var(--shadow-card);
}
.costCol {
  padding: 26px 14px 22px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* monument photo backgrounds (Gemini renders, moved into the card 2026-07-02) */
.costCol::before {
  content: "";
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.6;
}
.costCol.india::before { background-image: url("../images/gen/mon-india-gate.jpg"); }
.costCol.aus::before { background-image: url("../images/gen/mon-opera-col.jpg"); opacity: 0.75; }
/* R16: monument micro-loops sit above the ::before still (which stays as the load fallback) */
.costCol .monVid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.6;
  z-index: 1;
}
.costCol.aus .monVid { opacity: 0.75; }
.costCol::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 27, 94, 0.42), rgba(0, 10, 62, 0.66));
}
.costCol > * { position: relative; z-index: 2; }
/* Australia sits left, India right (DOM order). Each column hugs the outer edge. */
.costCol.aus { background: #12294d; text-align: left; padding-left: 18px; }
.costCol.india { background: var(--grad-deep-navy); text-align: right; padding-right: 18px; }
.costCol .flag { font-size: 1.8rem; line-height: 1; }
.costCol .country { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8rem; margin-top: 8px; color: rgba(255, 255, 255, 0.82); }
.costCol .price { font-family: var(--font-heading); font-size: clamp(1.7rem, 7.6vw, 2.6rem); font-weight: 600; margin-top: 4px; color: rgba(255, 255, 255, 0.94); }
.costCol.india .price { color: var(--brand-gold-top); }
.costCol .per { font-size: 0.8rem; font-weight: 400; color: rgba(255, 255, 255, 0.72); }
.saveBadge {
  position: absolute;
  top: 24%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: linear-gradient(180deg, #1FA355 0%, #12813F 100%);
  color: #fff;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 10px 13px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 10px 26px rgba(0, 27, 94, 0.35);
  white-space: nowrap;
}
.costLabel { text-align: center; margin-top: 18px; }
.costLabel span {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--brand-gold);
  color: var(--brand-blue-deep);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 20px;
}

/* ---------- services strip (auto marquee on white) ---------- */
.section.white { background: #fff; }
.servicesSection { padding-left: 0; padding-right: 0; }
/* Round 6: edge fade so the infinite strip reads as "more, scrolling" not clipped */
.servicesSection .marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.serviceCard {
  background: #fff;
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: 14px;
  padding: 20px 18px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand-blue-deep);
  flex: 0 0 auto;
  min-width: 150px;
  box-shadow: 0 6px 18px rgba(0, 27, 94, 0.08);
}
.serviceCard img { width: 64px; height: 64px; margin: 0 auto 10px; }
.servicesSection .marqueeTrack { gap: 10px; padding: 6px 10px 6px 0; }
/* R32: two counter-revolving rows. The reverse hook is generic now (was scoped to
   .brandMarquee) — any marquee can carry data-marquee-reverse. */
[data-marquee-reverse] .marqueeTrack { animation-direction: reverse; }
.servicesSection .marquee + .marquee { margin-top: 4px; }

/* ---------- generic swipe carousel (before/after, work, clinics) ---------- */
/* ---------- card marquees (all carousels drift like Award-Winning Care) ---------- */
.cardMarquee .marqueeTrack { gap: 14px; padding: 8px 14px 8px 0; }
.cardMarquee:hover .marqueeTrack,
.cardMarquee.paused .marqueeTrack { animation-play-state: paused; }
.cardMarquee .marqueeTrack > * {
  flex: 0 0 auto;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.baMarquee .baCard,
.workMarquee .workCard { width: min(78vw, 340px); }
/* R18: one before/after case used to fill the whole phone screen. Two complete cases now
   fit side by side. Declared AFTER the shared rule above so it wins on source order, and
   scoped to .baMarquee so the work cards (which he did not ask about) do not move. */
.baMarquee .baCard { width: min(46vw, 200px); }
/* R19: same treatment for the Our Work cases — one case used to eat the whole phone screen.
   Scoped to .workMarquee for the same reason .baCard is scoped: the two share the rule above. */
.workMarquee .workCard { width: min(46vw, 200px); }
.clinicMarquee img { width: min(70vw, 340px); height: 176px; object-fit: cover; }

/* ---------- our work ---------- */
.workGrid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 26px; }
.workCard { background: #fff; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.workCard h3 {
  font-family: var(--font-sans);
  font-size: 0.82rem; /* R32: his call — smaller treatment labels on the work cards */
  padding: 10px 14px;
  color: var(--brand-blue-deep);
  border-bottom: 1px solid rgba(201, 168, 76, 0.3);
}

/* ---------- awards / certs ---------- */
.offerWrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 560px; margin: 0 auto; }
.offerBlock { text-align: center; background: #fff; border-radius: var(--radius-card); padding: 18px 10px; box-shadow: var(--shadow-card); }
.offerBlock img { max-height: 84px; margin: 0 auto 8px; width: auto; }
.offerBlock p { font-weight: 700; color: var(--brand-blue-deep); font-size: 0.9rem; }
.awardsRow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 22px; align-items: center; }

/* ---------- flags + collage ---------- */
.flagsImg { margin-bottom: 20px; }

/* ---------- videos ---------- */
.videoGrid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
.videoGrid .videoBox { position: relative; padding-top: 56.25%; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.videoGrid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ratingWrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; align-items: center; }
.ratingBlock { background: #fff; border-radius: 14px; padding: 12px; }
.ratingBlock img { display: block; width: 100%; height: auto; }

/* ---------- doctors ---------- */
.docCard { background: #fff; text-align: center; }
.docCard p { font-weight: 700; color: var(--brand-blue-deep); padding: 12px 8px; font-size: 0.95rem; }


/* ---------- brands ---------- */
.brandsRow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: center; margin-top: 20px; }
/* implant deconstruction: 20% logo carousel (up→down) / 60% video / 20% (down→up) */
.implantTrio { display: flex; align-items: center; gap: 6px; margin-top: 18px; padding: 0 10px; }
.implantVideo { flex: 0 0 58%; min-width: 0; position: relative; }
.implantVideo video { display: block; width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--radius-card); }
/* R32: soft cream veil over the clip so it sits IN the section's tone, not on top of it */
.implantVideo::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius-card);
  background: rgba(232, 224, 214, 0.28);
  pointer-events: none;
}
.vMarquee { flex: 1 1 0; min-width: 0; height: 340px; position: relative; overflow: hidden; }
.vMarquee::before, .vMarquee::after { content: ""; position: absolute; left: 0; right: 0; height: 34px; z-index: 2; pointer-events: none; }
.vMarquee::before { top: 0; background: linear-gradient(to bottom, rgba(232,224,214,0.9), transparent); }
.vMarquee::after { bottom: 0; background: linear-gradient(to top, rgba(232,224,214,0.9), transparent); }
.vTrack { display: flex; flex-direction: column; align-items: center; gap: 26px; will-change: transform; }
.vTrack img { width: 88%; max-width: 72px; height: auto; flex: 0 0 auto; }
.vMarquee.up .vTrack { animation: vscroll-up 16s linear infinite; }
.vMarquee.down .vTrack { animation: vscroll-down 16s linear infinite; }
/* R88: the canon page's left marquee carries all 8 brands (16-img doubled
   track, .allBrands) — double the distance needs double the time to keep the
   same speed. Keyed on the class, NOT on .down, so the rollback page's 8-img
   track keeps its 16s. */
.vMarquee.allBrands .vTrack { animation-duration: 32s; }
@keyframes vscroll-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes vscroll-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .vTrack { animation: none !important; } }

/* R88: the right marquee's slot becomes the how-we-choose checklist (canon
   page only — the rollback page keeps its second marquee and never has this
   class). Same flex share the marquee had; on phones the ~76px column cannot
   carry text, so the list wraps to a full-width row under the video. */
.implantChecks {
  flex: 1 1 0;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.implantChecks li {
  position: relative;
  padding-left: 22px;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--brand-blue-deep);
}
.implantChecks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: #B8832F;   /* the line-work gold — the R77 split's dark half */
}
/* R90, his dictation: "this one needs to be in the same row" — on phones the
   checklist no longer wraps under the video. The three stay side by side; the
   side columns give up their padding and the middle video takes what is left
   (58% -> 44%), which is what "make the padding of the left and right section
   a little less and the middle video according to that" resolves to. */
@media (max-width: 860px) {
  .implantTrio { flex-wrap: nowrap; gap: 4px; padding: 0 4px; }
  .implantVideo { flex: 0 0 44%; }
  .implantVideo video { max-height: 260px; }
  .vMarquee { flex: 0 0 17%; height: 240px; }
  .vTrack { gap: 16px; }
  .vTrack img { width: 100%; max-width: 46px; }
  .implantChecks {
    flex: 1 1 0;
    margin-top: 0;
    padding: 0 2px;
    gap: 9px;
  }
  .implantChecks li { font-size: 0.6rem; padding-left: 13px; line-height: 1.3; }
}

/* ---------- Safety & Regulatory (recoded R10) ---------- */
.safetyGrid { display: grid; gap: 14px; margin-top: 18px; }
.safetyCard { background: #fff; border: 1px solid rgba(201,168,76,0.4); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.safetyCardHead { background: var(--grad-deep-navy); color: #fff; font-weight: 700; font-size: 0.95rem; padding: 12px 16px; letter-spacing: 0.01em; }
.safetyChips { list-style: none; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.safetyChips li { background: var(--brand-cream); border: 1px solid rgba(201,168,76,0.35); border-radius: 12px; padding: 10px 12px; }
.safetyChips strong { display: block; color: var(--brand-blue-deep); font-size: 0.9rem; }
.safetyChips span { display: block; color: var(--ink-soft); font-size: 0.72rem; margin-top: 2px; }
.safetyFlow { list-style: none; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.safetyFlow li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.safetyFlow .sfNum { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--grad-gold-cta); color: #111827; font-weight: 800; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; }

.brandsSingle { max-width: 520px; margin: 20px auto 0; }

/* ---------- stat cubes ---------- */
/* R16: one micro-video strip between the heading and the stat cubes */
/* R86: .chooseStrip is retired as a layout — the video moved INTO .chooseWrap
   as its first cell (see the R86 note in index.html). The rules are kept
   because index-v3.html, the frozen rollback page, still has the strip. */
.chooseStrip {
  margin-top: 20px;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(201, 168, 76, 0.4);
}
.chooseStrip video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* R86, his dictation: 3 columns at EVERY width, video first. The 768px
   4-column override below is deleted, not overridden — two rules disagreeing
   about the column count is how a later round ends up debugging the wrong one. */
/* grid-auto-rows:1fr is load-bearing, not polish. Without it each ROW sizes to
   its own tallest label, so the nine cells came out 130px to 164px and the 3x3
   read as three loose bands rather than one block (measured, first R86 run).
   Equal rows are what makes it a grid of nine rather than three rows of three. */
.chooseWrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 12px;
  margin-top: 26px;
}
.cube {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.45);
  border-radius: 16px;
  padding: 20px 12px;
  text-align: center;
}
.cube.wide { grid-column: span 2; }   /* no markup uses this; kept for the rollback page */
.cube .num { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--brand-gold-top); }
.cube .lbl { font-size: 0.82rem; opacity: 0.9; margin-top: 4px; }
/* R86: the video cell. It is a .cube for the border/radius/ground, but it holds
   a film rather than a number, so it drops the padding and centred text and
   lets the video fill the box edge to edge. */
.cube.chooseFilm { padding: 0; overflow: hidden; }
.cube.chooseFilm video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* R86: at 3-up on a phone a cell is ~113px wide, ~89px of it text. The cube
   type was sized for a 2-up cell nearly twice that, so "International
   Sterilization Standards" and "Dedicated Client Relationship Manager" ran long
   enough to set the height of the whole grid. Stepped down here rather than
   globally — above 600px the cells are wide again and the original sizes hold. */
@media (max-width: 600px) {
  .cube { padding: 12px 7px; }
  .cube .num { font-size: 1.3rem; }
  .cube .lbl { font-size: 0.62rem; line-height: 1.25; margin-top: 2px; }
  .chooseWrap { gap: 8px; }
}

/* ---------- award + banner strip ---------- */
.awardTop { text-align: center; }
.awardTop h3 { font-family: var(--font-sans); font-weight: 600; color: var(--ink-soft); font-size: 1rem; }
.awardTop h2 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
.awardCallout {
  display: flex;
  gap: 14px;
  align-items: center;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px;
  max-width: 640px;
  margin: 22px auto;
}
.awardCallout img { width: 92px; flex-shrink: 0; }
.awardCallout h3 { font-family: var(--font-heading); font-size: 1.05rem; }
.awardCallout p { font-size: 0.85rem; color: var(--ink-soft); }
.bannerStrip { display: grid; gap: 14px; margin-top: 10px; }
.bannerStrip img { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }

/* ---------- clinics ---------- */
.clinicTabs { display: flex; gap: 10px; justify-content: center; margin: 14px 0 12px; }
.clinicTabs button {
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid var(--brand-gold);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.clinicTabs button.active { background: var(--grad-gold-cta); color: var(--brand-blue-deep); }
.clinicPane { display: none; }
.clinicPane.active { display: block; }
.clinicInfo { margin-top: 12px; text-align: center; }
.clinicInfo h3 { font-family: var(--font-sans); color: var(--brand-gold-light); font-size: 1.1rem; }
.clinicInfo p { font-size: 0.9rem; opacity: 0.9; margin-top: 6px; }
.clinicBtns { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.clinicBtns a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  font-weight: 700; font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.5);
}
.contactList { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.contactList a {
  font-size: 0.85rem; font-weight: 600;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ---------- footer form ---------- */
.footerWrap { background: var(--grad-deep-navy); color: #fff; padding: 28px 18px 24px; } /* R34: was 50/40 */
.footerWrap .sectionHead { color: #fff; }
.footerWrap .sectionHead span { color: var(--brand-gold-light); }
.glassCard {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 24px 18px;
  max-width: 520px;
  margin: 22px auto 0;
}
.glassCard p { text-align: center; font-weight: 600; margin-bottom: 16px; }
.glassCard input {
  width: 100%;
  padding: 13px 16px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
}
.glassCard .btnGold { width: 100%; justify-content: center; border: none; font-size: 1.05rem; }
.recaptchaBox { margin-bottom: 14px; display: flex; justify-content: center; }

/* ---------- footer caption ---------- */
.caption { background: var(--brand-blue-deep); color: #fff; text-align: center; padding: 28px 18px; }
.caption h3 { font-family: var(--font-heading); color: #fff; letter-spacing: 0.08em; }
.caption h3 span { color: var(--brand-gold-light); }
.caption p { font-size: 0.82rem; opacity: 0.8; margin-top: 8px; }
.caption p span { display: block; margin-top: 4px; font-size: 0.75rem; }

/* ---------- bottom toolbar (CA 3-button pattern) ---------- */
.bottomBar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  transition: opacity 0.25s var(--ease-out);
}
.bottomBtns { display: flex; height: 56px; align-items: stretch; padding-bottom: env(safe-area-inset-bottom); }
.bottomBtns a,
.bottomBtns button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  border: none;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.bbWa { background: #25D366; }
.bbCall { background: #1B2A4A; }
.bbGold { background: var(--grad-gold-cta); color: #111827 !important; }
body.modal-open .bottomBar,
body.modal-open .sideRail { pointer-events: none; opacity: 0.3; }

/* ---------- gold hairline ---------- */
.goldHairline {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(242, 217, 122, 0.7) 20%, #F2D97A 50%, rgba(242, 217, 122, 0.7) 80%, transparent 100%);
  pointer-events: none;
}
.siteHeader .goldHairline { position: absolute; left: 0; right: 0; bottom: -3px; }

/* ---------- side-sticky gold pill rail ---------- */
.sideRail {
  position: fixed;
  right: 0;
  top: 72%;
  transform: translateY(-50%);
  z-index: 65;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  transition: opacity 0.25s var(--ease-out);
}
.sidePill {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 172px;
  padding: 8px 14px 8px 8px;
  border: none;
  border-radius: 20px 0 0 20px;
  background: linear-gradient(180deg, #EAC24C 0%, #C49A38 100%);
  box-shadow: -2px 2px 16px rgba(141, 110, 27, 0.28);
  text-align: left;
  transform: translateX(calc(100% - 50px));
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sideRail.in .sidePill { transform: translateX(0); }
.sideRail.in .sidePill:nth-child(2) { transition-delay: 60ms; }
.pillIcon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  color: #B8860B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.pillText { display: flex; flex-direction: column; line-height: 1.25; }
.pillText em {
  font-style: normal;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(17, 24, 39, 0.75);
}
.pillText strong { font-size: 0.72rem; font-weight: 800; color: #111827; }

/* ---------- modal ---------- */
.modalOverlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 90;
  background: rgba(0, 27, 94, 0.55);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.modalOverlay.open { display: flex; }
.modalCard {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 24px 20px;
  width: 100%;
  max-width: 420px;
  position: relative;
}
.modalCard h2 { font-size: 1.4rem; margin-bottom: 16px; text-align: center; }
.modalCard .close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none;
  font-size: 1.6rem; color: var(--ink-soft);
}
.modalCard input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 27, 94, 0.25);
  font-size: 1rem;
  font-family: inherit;
}
.modalCard .btnGold { width: 100%; justify-content: center; border: none; }

/* ---------- desktop enhancements ---------- */
.webOnly { display: none; }
@media (min-width: 768px) {
  .webOnly { display: block; }
  .mobOnly { display: none; }
  .section { padding: 22px 32px; } /* R34: density pass 3 — was 32px */
  .subStrip a { font-size: 0.9rem; padding: 9px 22px; }
  .baMarquee .baCard,
  .workMarquee .workCard { width: 360px; }
  .baMarquee .baCard { width: 240px; } /* R18: see the mobile rule */
  .workMarquee .workCard { width: 240px; } /* R19: see the mobile rule */
  .servicesGrid { grid-template-columns: repeat(3, 1fr); }
  .workGrid { grid-template-columns: repeat(2, 1fr); }
  .videoGrid { grid-template-columns: repeat(2, 1fr); }
  .ratingWrap { grid-template-columns: repeat(4, 1fr); }
  /* R86: the 4-column desktop override is GONE — his "3 by 3 on all devices"
     means this grid has exactly one column count. */
  .cube.wide { grid-column: span 2; }
  .bannerStrip { grid-template-columns: repeat(2, 1fr); }
  .costCompare { gap: 20px; }
}
@media (min-width: 1024px) {
  .workGrid { grid-template-columns: repeat(4, 1fr); }
  .clinicsDesktop { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
}

/* ============================================================
   Improve-pass additions (2026-07-02 walkthrough)
   ============================================================ */

/* tighter section (cost comparison) */
.section.tight { padding-top: 18px; padding-bottom: 18px; } /* R34: was 30px */

/* "Why Pay 70%" sized to land in 3 lines on mobile */
.whyPay { font-size: clamp(0.82rem, 2.5vw, 1.1rem); line-height: 1.45; margin-top: 18px; max-width: 540px; }

/* gold CTA polish (CA treatment) */
.btnGold { color: #111827; }
.btnGold:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(212, 175, 55, 0.45); filter: brightness(1.05); }

/* blue submit (CA form button) */
.btnBlue {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 10px;
  background: var(--grad-brand-blue);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 8px 20px rgba(0, 87, 184, 0.28);
  transition: filter 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.btnBlue:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* credential trust bar (in-page CA TrustStrip chips) */
.credBar {
  background: var(--grad-trust-strip);
  padding: 14px 0;
  overflow: hidden;
}
.credBar .marqueeTrack { gap: 12px; padding-right: 12px; }
.credChip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.credChip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-gold-mid); }

/* award photo cards marquee (CA AwardWinningCareSection) */
.awardMarquee { overflow: hidden; margin: 10px -18px 0; }
.awardMarquee .marqueeTrack { gap: 16px; padding: 8px 16px 8px 0; }
.awardCard {
  position: relative;
  width: 170px;
  flex: 0 0 auto;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.12);
}
.awardCard img { width: 100%; height: 100%; object-fit: cover; }
.awardMeta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px 10px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 65%);
}
.awardMeta .yr { color: #F7B844; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; }

/* testimonial video marquee (click-to-play facades) */
.videoMarquee { margin-top: 22px; }
.videoMarquee .videoBox {
  width: min(80vw, 380px);
  aspect-ratio: 16 / 9;
  position: relative;
  background: #000;
  cursor: pointer;
}
.videoMarquee .videoBox > img { width: 100%; height: 100%; object-fit: cover; }
.videoMarquee iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.videoBox .playBtn {
  position: absolute;
  top: 50%; left: 50%;
  width: 54px; height: 54px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(16, 24, 40, 0.65);
  border: 2px solid var(--brand-gold);
}
.videoBox .playBtn::after {
  content: "";
  position: absolute;
  top: 50%; left: 55%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
}

/* doctors: bare circle + name below (Round 16 killed the card box) */
.docCarousel .docCard {
  /* R18: the visible gap between specialists was driven by the CARD being 156px wide
     around a 96px circle, not by the track gap. Narrowing the card is what actually
     closes it (circle-to-circle went from ~68px to ~40px). */
  width: min(34vw, 140px);
  box-shadow: none;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 6px 2px 0;
}
/* R18: the 14px comes from the SHARED .cardMarquee .marqueeTrack rule, which every card
   carousel on the page uses. Scope the tightening to the specialists only. */
.docCarousel .marqueeTrack { gap: 4px; }
.docCarousel .docCard img {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  margin: 0 auto;
  border: 3px solid rgba(201, 168, 76, 0.55);
}
/* R18: the narrower card broke "Dr. Khyati Chadda" onto three lines (one word each).
   Scaling the name down keeps every specialist to two tidy lines. */
.docCarousel .docCard p { font-size: clamp(0.72rem, 2.6vw, 0.85rem); line-height: 1.3; }

/* implant brands dual marquee */
/* Round 6: section ground matches the implant video's cream so it blends edge-to-edge */
.brandsSection { padding-left: 0; padding-right: 0; background: #E8E0D6; }
.brandsSection .brandsSingle video { box-shadow: none; border-radius: 0; }
.brandMarquee { overflow: hidden; margin-top: 18px; }
.brandMarquee .marqueeTrack { gap: 40px; padding-right: 40px; align-items: center; }
.brandMarquee img { height: 54px; width: auto; flex: 0 0 auto; }
.brandMarquee[data-marquee-reverse] .marqueeTrack { animation-direction: reverse; }
.brandsSection .brandsSingle { max-width: 420px; margin: 22px auto 4px; }
.brandsSingle video { display: block; width: 100%; border-radius: var(--radius-card); }

/* stat cubes with real-photo backgrounds */
.cube.photo {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(201, 168, 76, 0.55);
  min-height: 128px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cube.photo::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--cube-img);
  background-size: cover;
  background-position: center;
}
.cube.photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 13, 58, 0.72), rgba(0, 10, 42, 0.86));
}
.cube.photo .num, .cube.photo .lbl { position: relative; z-index: 2; }
.cube.photo .lbl { opacity: 1; color: rgba(255, 255, 255, 0.92); }

/* modal eyebrow (CA LeadGateModal) */
.modalEyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-blue);
  text-align: center;
  margin-bottom: 4px;
}
.modalCard h2 { font-size: 1.25rem; }
.modalCard select {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 27, 94, 0.25);
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}
.modalCard input:focus, .modalCard select:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px #BFDBFE;
}

/* desktop tweaks for new components */
@media (min-width: 768px) {
  .awardCard { width: 210px; }
  .videoMarquee .videoBox { width: 420px; }
  .docCarousel .docCard { width: 200px; }
  .brandMarquee img { height: 68px; }
}

/* Cube photo assignments (relative to this stylesheet).
   R24 — these were `.chooseWrap .cube:nth-child(n)`. R23 replaced .chooseWrap with the
   .cubeCarousel/.cubeSlide structure, so ALL EIGHT rules silently stopped matching and the
   photos vanished — a dead selector looks exactly like a design choice. Keyed to the cube's
   own data-cube name now, so the mapping survives any future re-nesting or reordering. */
.cube[data-cube="clinics"]::before  { background-image: url("../images/stats/cube-clinics.jpg"); }
.cube[data-cube="years"]::before    { background-image: url("../images/stats/cube-years.jpg"); }
.cube[data-cube="team"]::before     { background-image: url("../images/stats/cube-team.jpg"); }
.cube[data-cube="tech"]::before     { background-image: url("../images/stats/cube-tech.jpg"); }
.cube[data-cube="sterile"]::before  { background-image: url("../images/stats/cube-sterile.jpg"); }
.cube[data-cube="patients"]::before { background-image: url("../images/stats/cube-patients.jpg"); }
.cube[data-cube="crm"]::before      { background-image: url("../images/stats/cube-crm.jpg"); }
.cube[data-cube="digital"]::before  { background-image: url("../images/stats/cube-digital.jpg"); }

/* ============================================================
   Round-2: CA homepage components 1:1 (2026-07-02)
   ============================================================ */

/* ---- footer tools pills (bottom bar removed Round 15; footerTools still uses these) ---- */
.toolPill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #EAECF0;
  background: #fff;
  font-size: 11.5px;
  font-weight: 600;
  color: #344054;
  white-space: nowrap;
}
.toolPill i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.toolPill:active { background: #F2F4F7; }

/* ---- CA section heading style ---- */
.caHead {
  font-family: var(--font-heading);
  text-align: center;
  font-size: clamp(1.5rem, 5.4vw, 2.1rem);
  font-weight: 700;
  color: var(--brand-blue-deep);
  line-height: 1.2;
}
.caHead span { color: var(--brand-gold-dark); }
.caSub { text-align: center; color: #4B5563; font-size: 0.85rem; margin: 8px auto 0; max-width: 640px; }
.caLead { text-align: center; font-size: 0.92rem; font-weight: 600; color: #111827; margin: 12px auto 0; max-width: 680px; }
.caLead .goldTxt, .goldTxt { color: #F7B844; }
.caNote { text-align: center; font-size: 0.8rem; font-style: italic; color: #6B7280; margin-top: 8px; }
.caMicro { font-size: 0.78rem; font-weight: 500; color: #6B7280; margin: 22px 0 0; }

/* ---- International Recognition ---- */
.recogSection { background: #F9FAFB; padding: 20px 16px; } /* R34 */
.recogCard {
  margin-top: 20px;
  border-radius: 16px;
  border: 1px solid #E6ECF8;
  background: #fff;
  padding: 20px 16px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}
.recogCard h3 { font-family: var(--font-sans); text-align: center; font-size: 1rem; font-weight: 700; color: #111827; margin-bottom: 14px; }
.logoMarquee { overflow: hidden; position: relative; }
.logoMarquee .marqueeTrack { gap: 20px; padding-right: 20px; align-items: center; }
.logoMarquee img { height: 44px; width: auto; max-width: 90px; object-fit: contain; flex: 0 0 auto; }
.logoMarquee.press img { height: 34px; filter: grayscale(1); opacity: 0.85; }

/* ---- Award-Winning Care (real photos) ---- */
.awardSection { background: var(--section-surface); padding: 20px 0; } /* R34 */
.awardSection .wrap { padding: 0 16px; }
.awardSection .awardMarquee { margin: 18px 0 0; }
.awardCard { width: 160px; height: 220px; }
.awardCard img { height: 100%; }
/* Round 16: brand-book "small squares" (ScreenAudience port) — compact
   face-crop cards, rounded-12, replacing the tall 160x220 posters */
.awardCard.sq { width: 120px; height: 152px; border-radius: 12px; }
.awardCard.sq .awardMeta { padding: 18px 8px 8px; }
.awardCard.sq .awardMeta .yr { font-size: 0.64rem; }
.awardCard.sq .awardMeta .nm { font-size: 0.6rem; line-height: 1.25; }
@media (min-width: 640px) { .awardCard.sq { width: 136px; height: 172px; } }
.awardMeta { padding: 30px 12px 12px; }
.awardMeta .yr { display: block; color: #F7B844; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.awardMeta .nm { display: block; color: #fff; font-size: 0.76rem; font-weight: 700; line-height: 1.25; margin-top: 2px; }

/* ---- Technology Selected for Precision and Safety ---- */
.precisionSection { background: #FFF9ED; padding: 20px 16px; } /* R34 */
.bentoBox {
  margin-top: 12px;
  border-radius: 20px;
  border: 1px solid #E6ECF8;
  background: #fff;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}
.bentoGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { position: relative; overflow: hidden; border-radius: 14px; min-height: 104px; }
.tile.big { grid-row: span 2; min-height: 220px; }
.tile.wide { grid-column: span 2; }
.tile img,
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile .cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 10px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.tile .capRight { left: auto; border-top-left-radius: 10px; background: rgba(0, 0, 0, 0.6); padding: 6px 12px; }
.techBrandMarquee { overflow: hidden; margin-top: 22px; }
.techBrandMarquee .marqueeTrack { gap: 16px; padding-right: 16px; }
.tbCard {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px; height: 60px;
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid #E6ECF8;
  background: #fff;
  padding: 6px;
}
.tbCard img { max-width: 88px; max-height: 44px; object-fit: contain; }

/* ---- CA popup (HeroCtaPopup) ---- */
.modalOverlay { background: rgba(0, 0, 0, 0.45); backdrop-filter: none; padding: 12px; align-items: center; }
.caPopup {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  border-radius: 24px;
  border: 1px solid #EAECF0;
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.30);
}
.caPopupHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background: var(--section-surface);
  border-bottom: 1px solid #F5F5F5;
}
.caPopupHead h3 { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: #101828; }
.caClose {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: #F2F4F7;
  color: #344054;
  font-size: 18px;
  line-height: 1;
}
.caClose:hover { background: #DC2626; color: #fff; }
.caWa {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #16A34A 0%, #25D366 100%);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.2);
}
.caWa img { width: 18px; height: 18px; }
.caPopupBody { background: var(--section-surface); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.caInnerCard { border-radius: 10px; border: 1px solid #EAECF0; background: #fff; padding: 10px 12px; }
.ciTitle { font-size: 12px; font-weight: 600; color: #101828; }
.ciHint { font-size: 11px; color: #667085; margin-top: 3px; }
.concernPills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.concernPills button {
  border-radius: 8px;
  border: 1px solid #D0D5DD;
  background: #fff;
  color: #344054;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
}
.concernPills button.sel { border-color: var(--brand-blue); background: rgba(0, 88, 200, 0.1); color: var(--brand-blue); }
.caInnerCard form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.caInnerCard input[type="text"], .caInnerCard input[type="tel"], .caInnerCard input[type="email"] {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #D0D5DD;
  padding: 7px 12px;
  font-size: 13px;
  color: #101828;
  font-family: inherit;
  margin: 0;
}
.caInnerCard input:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 1px var(--brand-blue); }
.orRow { display: flex; align-items: center; gap: 8px; }
.orRow span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #98A2B3; flex: 0 0 auto; }
.orRow input { min-width: 0; flex: 1; }
.privacyRow { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #344054; }
.privacyRow input { width: 14px; height: 14px; accent-color: #101828; }
.caSubmit {
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  background: var(--grad-gold-cta);
  box-shadow: 0 8px 18px rgba(141, 110, 27, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.caSubmit:hover { box-shadow: 0 10px 24px rgba(141, 110, 27, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.40); }
.caPopupBody .recaptchaBox { margin: 4px 0 0; transform: scale(0.82); transform-origin: 0 0; height: 66px; }

@media (min-width: 768px) {
  .recogSection, .awardSection, .precisionSection { padding-top: 32px; padding-bottom: 32px; }
  .awardCard { width: 200px; height: 260px; }
  .tile { min-height: 144px; }
  .tile.big { min-height: 300px; }
}
/* ============================================================
   Round-3 final polish (2026-07-02)
   ============================================================ */

/* philosophy: tighter section, <=3 lines mobile */
.section.slim { padding-top: 26px; padding-bottom: 26px; }
.section.slim .statement { font-size: clamp(0.72rem, 2.1vw, 1.15rem); line-height: 1.42; max-width: 760px; }

/* dual CTA: WhatsApp + gold form button side by side (ca-main pattern) */
.ctaDuo { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: nowrap; }
@media (max-width: 480px) {
  .ctaDuo { gap: 8px; }
  .ctaDuo .btnWa, .ctaDuo .btnGold { padding: 12px 13px; font-size: 0.8rem; gap: 6px; white-space: nowrap; }
  .ctaDuo .btnWa img, .ctaDuo .btnGold img { width: 16px; height: 16px; }
}
.btnWa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #16a34a 0%, #25d366 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 22px rgba(22, 163, 74, 0.3);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.btnWa:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(22, 163, 74, 0.4); filter: brightness(1.05); }
.btnWa:active { transform: scale(0.97); }
.btnWa img { width: 20px; height: 20px; }

/* cost comparison reorder */
.costLabel.top { margin: 0 0 14px; }
.monumentRow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 760px; margin: 0 auto 12px; }
.monument {
  position: relative;
  height: 110px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 10px 12px;
  background: linear-gradient(160deg, #0a1f4d 0%, #12294d 60%, #C9A84C 160%);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(201, 168, 76, 0.4);
}
.monument[data-monument="india"] { background-image: url("../images/gen/mon-india-gate.jpg"); }
.monument[data-monument="aus"] { background-image: url("../images/gen/mon-opera-house.jpg"); }
.monument span {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.monument::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 13, 58, 0.55), transparent 60%); }

/* service image tiles — R32: reskinned to the brand book's "Travelling from abroad"
   card: white ground, #EAECF0 border with a 3px gold left accent, media band with the
   gold gradient scrim, dark label in the white bar below. Decorative buttons (marquee
   tiles, not clickable). */
.serviceCard.tileCard {
  position: relative;
  width: 118px; /* R33: smaller/denser, his call */
  min-width: 0;
  height: auto;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  background: #fff;
  border: 1px solid #EAECF0;
  border-left: 3px solid var(--brand-gold);
  border-radius: 12px;
}
.tileCard .svcBg {
  position: relative;
  width: 100%;
  height: 66px; /* R33: denser */
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg, #0a1f4d 0%, #0058C8 70%, #C9A84C 165%);
  background-size: cover;
  background-position: center;
}
/* brand-book gold scrim over the media band */
.tileCard .svcBg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(141, 110, 27, 0.25), rgba(212, 175, 55, 0.14) 50%, rgba(212, 175, 55, 0.05));
  pointer-events: none;
}
.tileCard .svcBg img { width: 74px; height: 74px; opacity: 0.95; }
.tileCard .svcLbl { color: #111827; font-size: 0.68rem; font-weight: 600; padding: 6px 8px; text-align: left; line-height: 1.25; }
/* real photos — brand-book concierge stills (svc3-*, Round 6) + Gemini svc2/svc set */
.svcBg[data-svc="visa"] { background-image: url("../images/gen/svc3-visa.jpg"); }
.svcBg[data-svc="flight"] { background-image: url("../images/gen/svc3-flight-plane.jpg"); }
.svcBg[data-svc="airport"] { background-image: url("../images/gen/svc3-flight.jpg"); }
.svcBg[data-svc="hotel"] { background-image: url("../images/gen/svc3-hotel.jpg"); }
.svcBg[data-svc="concierge"] { background-image: url("../images/gen/svc3-driver.jpg"); }
.svcBg[data-svc="explore"] { background-image: url("../images/gen/svc3-explore.jpg"); }
.svcBg[data-svc="dining"] { background-image: url("../images/gen/svc3-dining.jpg"); }
.svcBg[data-svc="crm"] { background-image: url("../images/gen/svc3-crm.jpg"); }
.svcBg[data-svc="care"] { background-image: url("../images/gen/svc-care.jpg"); }
.svcBg[data-svc="pay"] { background-image: url("../images/gen/svc-pay.jpg"); }
/* R32: the three brand-book additions */
.svcBg[data-svc="move"] { background-image: url("../images/gen/svc4-move.webp"); }
.svcBg[data-svc="smile"] { background-image: url("../images/gen/svc4-smile.jpg"); }
.svcBg[data-svc="about"] { background-image: url("../images/gen/svc4-about.jpg"); }
.svcBg[data-svc] img { display: none; }

/* brands logo under heading */
.brandsLogo { max-width: 210px; margin: 6px auto 0; }

/* tech thumbs are photos now */

/* footer CTA tools carousel */
.footerTools { margin: 22px auto 0; max-width: 560px; overflow: hidden; }
.footerTools .marqueeTrack { gap: 8px; padding-right: 8px; }

/* popup header spacer (keeps title centered after removing the WA circle) */
.caHeadSpacer { width: 32px; height: 32px; flex: 0 0 auto; }

/* ============================================================
   Round-4: design-critique fixes (2026-07-02)
   ============================================================ */

/* visually-hidden labels (form a11y) */
.srOnly {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* before/after caption bar */
.baCard { background: #fff; margin: 0; }
.baCard figcaption {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: center;
  padding: 8px 10px;
  border-top: 1px solid rgba(201, 168, 76, 0.3);
}

/* USP bar tagline. R6 set this to 0.66rem; R25 bumped to 0.78rem — the trust-strip text was
   legible but too small on the navy gradient (this rule is the one that wins, not line 200). */
.uspBar .marqueeTrack span { font-size: 0.78rem; }

/* headings clear the sticky stack on anchor/scroll jumps */
section { scroll-margin-top: 114px; }

/* --- chrome collapse: CTA row hides on scroll-down (header stays) --- */
.subStrip { transition: transform 0.3s var(--ease-out); }
.siteHeader { transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
body.chrome-min .subStrip { transform: translateY(calc(-1 * var(--header-h) - 100%)); }

/* --- side rail: icon-only mini state deep in the page, hidden at the form --- */
.sidePill { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), min-width 0.3s var(--ease-out), padding 0.3s var(--ease-out); }
.sideRail.mini .sidePill {
  min-width: 0;
  width: 44px; height: 44px;
  padding: 8px;
  border-radius: 22px 0 0 22px;
  transform: translateX(0);
  justify-content: center;
}
.sideRail.mini .pillText { display: none; }
.sideRail.railHidden { opacity: 0; pointer-events: none; }

/* R24: the side rail is DESKTOP-ONLY now. It is position:fixed over the lower-right of the
   viewport (measured at 390: the band y=560-656, x=218-390), so on a phone it floats above
   the content and INTERCEPTS TAPS on whatever scrolls under it — including "Book Free Video
   Consult", the first CTA on the page. It is also redundant there: the phone already has the
   sticky bottom bar carrying Call Now / WhatsApp / Book a Bundle. Moving the rail would only
   relocate the collision onto whatever sits at the new position, so it goes away entirely.
   `display:none` (not opacity) so it cannot receive a pointer event at all. */
@media (max-width: 600px) {
  .sideRail { display: none; }
}


/* stat cube labels: cleaner wrap */
.cube .lbl { line-height: 1.3; }

/* --- split banners (recoded from the baked-text JPGs new/2-6) --- */
.splitBanner {
  display: grid;
  gap: 22px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 16px; /* R18: tighter (was 26px 20px) */
  border-radius: var(--radius-card);
  /* R21: his call — the box is CREAM and the section behind it is white. That is an exact
     inversion of R18 (white box on the body's cream ramp). The gold border and the card
     shadow are what separate the two, so neither may be dropped. */
  background: #FFF9ED;
  border: 1px solid rgba(201, 168, 76, 0.35);
  box-shadow: var(--shadow-card);
}
/* R18: the four split-banner sections read tighter. Scoped to .sbSection, NOT to .tight,
   which the cost-comparison section also carries. */
/* R21: white section behind the cream box. Applies to all FOUR split banners (Transparent
   Care, CRM, Dental Tourism, Free Video Consult) — he named two, but they are one component
   and a half-applied treatment would read as a bug. */
.section.sbSection { padding-top: 10px; padding-bottom: 10px; background: #fff; }
/* R32, his call: the video covers the banner — the cream card shrinks to a thin ring.
   Applies to all four solo banners (one component, one treatment). The gold border stays
   as the frame; only the padding collapses so the video reaches the section ground. */
.splitBanner.solo { padding: 5px; gap: 0; }
/* R18: on mobile the banner stacks, so this grid gap IS the vertical space between the
   video and the CTA row beneath it. At >=768px it becomes the horizontal column gap and
   must stay generous, hence the media query. */
@media (max-width: 767px) {
  .splitBanner { gap: 10px; }
}
.sbText h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 4.6vw, 1.9rem);
  line-height: 1.22;
  color: var(--brand-blue-deep);
}
.sbText h3 span { display: block; color: var(--brand-gold-dark); font-size: 0.78em; margin-top: 6px; }
.sbText p { margin: 12px 0 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }
.sbCta { margin-top: 8px; border: 0; cursor: pointer; } /* R18: was 16px */
.splitBanner .ctaDuo { justify-content: flex-start; flex-wrap: nowrap; }
.splitBanner .ctaDuo > * { flex: 0 0 auto; }
.splitBanner .ctaDuo .btnWa, .splitBanner .ctaDuo .btnGold { white-space: nowrap; padding: 12px 16px; font-size: 0.84rem; }
@media (max-width: 480px) {
  .splitBanner .ctaDuo .btnWa, .splitBanner .ctaDuo .btnGold { padding: 10px 11px; font-size: 0.72rem; }
  .splitBanner .ctaDuo .btnWa img, .splitBanner .ctaDuo .btnGold img { width: 14px; height: 14px; }
}
.sbMedia { position: relative; }
.sbMedia img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); box-shadow: var(--shadow-card); display: block; }
/* Round 16: banner stills become looping videos — same frame as the img */
.sbMedia video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); box-shadow: var(--shadow-card); display: block; }
/* overlay line rides in from the bottom-left once the banner is in view */
.splitBanner.inview .sbSlideIn { animation: sbLineIn 0.8s ease 0.25s both; }
@keyframes sbLineIn {
  from { opacity: 0; transform: translateX(-18px) translateY(8px); }
  to { opacity: 1; transform: translateX(0) translateY(0); }
}

/* Round 15: the banner heading sits ON the picture */
.sbMedia::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 68%;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: linear-gradient(to top, rgba(8, 25, 45, 0.88) 0%, rgba(8, 25, 45, 0.55) 45%, rgba(8, 25, 45, 0) 100%);
  pointer-events: none;
}
.sbOverlayTitle {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 3.6vw, 1.7rem);
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.sbOverlayTitle span { display: block; color: var(--brand-gold-light); font-size: 0.8em; margin-top: 4px; }
/* on phone the titled image leads the card, so the heading still comes first */
@media (max-width: 767px) {
  .splitBanner .sbMedia { order: -1; margin-bottom: 0; } /* R18: was 4px */
}
.sbChecklist { list-style: none; padding: 0; margin-top: 14px; }
.sbChecklist li {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  padding: 4px 0 4px 28px;
  position: relative;
}
.sbChecklist li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--brand-gold-dark);
  font-weight: 800;
}
.sbChecklist.onDark li { color: rgba(255, 255, 255, 0.92); }
.sbChecklist.onDark li::before { color: var(--brand-gold-light); }
/* Round 6: numbered horizontal patient-flow stepper (1→2→3→4) */
.flowSteps {
  list-style: none;
  display: flex;
  align-items: flex-start;
  padding: 0;
  margin: 18px 0 0;
  max-width: 520px;
}
.flowSteps li {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
}
.flowSteps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
  height: 2px;
  background: linear-gradient(90deg, var(--brand-gold-light), rgba(255, 255, 255, 0.35));
}
.flowSteps .num {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--grad-gold-cta);
  color: var(--brand-blue-deep);
  font-weight: 800;
  font-size: 0.82rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.flowSteps .stepLbl {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  max-width: 96px;
}
.sbSteps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sbSteps span {
  font-size: 0.74rem; font-weight: 700;
  color: var(--brand-blue-deep);
  background: #fff;
  border: 1px solid rgba(201, 168, 76, 0.45);
  border-radius: 999px;
  padding: 6px 12px;
}
@media (min-width: 768px) {
  .splitBanner { grid-template-columns: 1.1fr 1fr; padding: 34px 32px; }
  .splitBanner.flip .sbText { order: 2; }
  .splitBanner.flip .sbMedia { order: 1; }
}

/* --- hero: headline + sub-line are now BAKED INTO the 16:8 image (one unit,
   never reflows). The image IS the composition; only the CTA button stays as
   live HTML, positioned in the lower-left clear zone of the baked art. --- */
.heroSlide img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  object-position: center;
}
/* The baked image IS the hero (headline + sub-line live in the art, one unit that
   never reflows). The CTA sits just beneath it — collision-proof for any headline
   length, on every viewport — left-aligned to line up under the baked copy column. */
.heroCopy {
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 12px 16px 2px;
}
.heroCta { border: 0; padding: 11px 24px; font-size: 0.86rem; }
@media (min-width: 768px) {
  .heroCopy { justify-content: flex-start; padding: 14px 0 4px 7%; }
  .heroCta { padding: 13px 30px; font-size: 0.95rem; }
}

/* --- motion polish: gentle rise + fade on scroll-in --- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.inview {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

/* ---------- CA-style form fields (2026-07-03 form pass; R22: placeholder IS the label) ---------- */
.glassCard input::placeholder, .caInnerCard input::placeholder {
  color: #667085;
  opacity: 1;
}
.glassCard input[type="text"], .glassCard input[type="email"], .glassCard input[type="tel"] {
  border-radius: 8px;
  border: 1px solid #D1D5DB;
  background: #fff;
  padding: 10px 12px;
  font-size: 0.95rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.glassCard input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 2px #BFDBFE;
}
.caInnerCard input[type="text"], .caInnerCard input[type="tel"], .caInnerCard input[type="email"] {
  border-radius: 8px;
  border: 1px solid #D1D5DB;
  padding: 9px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.caInnerCard input:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 2px #BFDBFE; }

/* ============================================================
   R24 — THE TONAL CADENCE (supersedes the 2026-07-03 tonal-ramp block)
   ============================================================
   His brief: "I wanted the dark cream, light cream, blue and white sections to be
   used in a way that they SHOW THE FLOW of the page."

   The old block forced every warm section transparent so the body's top→bottom
   gradient (#EFE0C4 → #FFFDF9) showed through as "one continuous flow". That fade
   WAS the flowlessness: it drifts one way and bleaches the lower half, which is why
   five mid-page sections (Safety, Free Consult, CRM, Awards, Tourism) all rendered
   plain white with no rhythm between them. A repeating cadence and a monotonic
   wash-to-white are two systems fighting for one surface, and the fade was winning.

   So the tones are EXPLICIT and OPAQUE now. Nothing is left transparent to be
   bleached, and the body gradient survives only as a faint under-layer nothing
   relies on. The page reads as four chapters, each descending through the creams
   and landing on NAVY as a full stop:

     CH.1 offer        dark cream → white → light cream → NAVY (Reviews)
     CH.2 proof        dark cream → white → dark cream   → NAVY (1M+ Smiles)
     CH.3 credentials  light cream → white → light cream → NAVY (Services strip)
     CH.4 close        dark cream → light cream → white  → NAVY (Choose India / Footer)

   THE TRAP, for whoever edits this next (it has now cost four rounds):
   `white` in this file does NOT mean "be white". It means "opt out of the cream
   wash". Any section that must actually PAINT a tone has to assert it HERE, past
   this block, with TWO classes — a single-class rule silently loses. Verify the
   computed background after every change; never trust the class name.

   Tokens (do not invent new ones):
     DARK CREAM  #EDDDC0   LIGHT CREAM #FFF9ED
     WHITE       #fff      NAVY        var(--grad-deep-navy)
   ============================================================ */

/* --- CH.1 — the offer --------------------------------------------------- */
/* R27: the piece-by-piece video carousel that used to sit here (treatVidsSection)
   was replaced by the Brand Book treatment grid and moved down under Our Work
   (see .treatGridSection). packSection (dark cream) now runs into sbCare (white)
   directly below it. */
/* R23, his call: Transparent & Patient-Centred Care goes WHITE (was light cream). */
.section.sbSection.sbCare { background: #fff; }
/* R23, his call: Compare Your Cost goes NAVY (was white). The old note warned this
   would swallow the .costCol.india card — it is navy itself. So the card now earns a
   hard gold edge and a lifted shadow to sit ON the section, and the heading flips
   white (it was --brand-blue-deep, invisible here). See .costSection block below. */
.section.alt.costSection { background: var(--grad-deep-navy); }
/* R25: Reviews retoned navy -> cream (his ruling) to break the mid-page navy run
   (Compare Your Cost navy -> Reviews -> flow bar navy). `.section.cream` (line 112) is
   opaque #FFF9ED, so it asserts past the tonal ramp with two classes; heading falls back
   to --brand-blue-deep, rating cards are white, video thumbs are dark — all read on cream. */
.section.cream.reviewsSection { background: #FFF9ED; }

/* --- CH.2 — the proof --------------------------------------------------- */
/* R23, his call: Safety takes the SAME tone as Aussies Real Smile (white). */
.section.safetySection { background: #fff; }
.section.light.baSection { background: #fff; }           /* Before / After */
.section.sbSection.sbConsult { background: #EDDDC0; }    /* his call: dark cream */
/* 1M+ Smiles lands CH.2 on navy. Safe: it is a heading + three images, no body
   copy, and `.section.dark .sectionHead` (line 91) already flips headings white. */
.section.dark.smilesSection { background: var(--grad-deep-navy); }

/* --- CH.3 — the credentials --------------------------------------------- */
/* Descends dark cream → white → light cream → white → light cream → NAVY.
   Recognition takes the dark cream so CH.3 opens with weight (and so it does not
   sit light-cream-on-light-cream against the CRM banner below it). */
/* R24, his call: International Recognition takes the tone of the section BELOW it
   (Award-Winning Care, white). Was dark cream. */
.recogSection { background: #fff; }
.awardSection { background: #fff; }
.section.sbSection.sbCrm { background: #FFF9ED; }        /* his call: light cream */
/* R23, his call: Meet Our Specialists goes NAVY (was white). Heading + helping text
   flip white below; the .docCard portraits are white cards and read fine on navy. */
.section.light.specialistsSection { background: var(--grad-deep-navy); }
/* R23, his call: All-Inclusive Dental Tourism Packages goes WHITE (was light cream). */
.section.sbSection.sbTourism { background: #fff; }
/* R24, his call: the services carousel takes the tone of the section ABOVE it (the Free
   Video Consult banner, dark cream). Was white in R23. It still cannot be navy — 1M+ Smiles
   sits right below it and would merge. */
.section.white.servicesSection { background: #EDDDC0; }

/* --- CH.4 — the close --------------------------------------------------- */
/* R26/R27: light cream, not dark cream. R26 chose it to break three dark creams in a row;
   R27 dropped the white treatment grid in right below Our Work, so the immediate neighbours
   are now the Free Video Consult banner (dark cream) above and the treatment grid (white)
   below. Light cream still earns its keep: it keeps the white workCards visible (pure white
   ground would swallow them) and reads distinct from the dark cream above. */
.section.alt.workSection { background: #FFF9ED; }
/* R27: the Brand Book treatment grid — white, seated between Our Work (light cream) and the
   services strip (dark cream), so white separates the two creams. Two-class override so the
   body tonal ramp can never bleed through (never trust a bare .section.white). */
.section.white.treatGridSection { background: #fff; }
/* bakedBanner (On-Site Lab) is a full-bleed image band — exempt. */
.precisionSection { background: #FFF9ED; }
/* R32, his call: the implant-brands section goes back to the video's own cream canvas
   (#E8E0D6 — the clip's backdrop was flattened to exactly this in R19) so the video melts
   into the section instead of floating as a lighter rectangle on white. The .vMarquee
   fade gradients are rgba(232,224,214,.9) = this same cream, so they seam again too. */
.section.brandsSection { background: #E8E0D6; }
/* Choose India's No.1 (.section.dark) + the footer are already navy — CH.4 lands. */
.section.cream { background: #FFF9ED; }                  /* Treatment Centers */

/* Round 15: treatment-centres section reads tighter */
.section.cream:has(.clinicTabs) { padding-top: 18px; padding-bottom: 18px; }
.section.cream:has(.clinicTabs) .helpingText { margin-bottom: 0; }
/* R19: the duplicate .brandsSection rule that stood here is gone. Its comment claimed the wall
   "matches the implant video's own canvas" — it never did. The clip's backdrop is a GRADIENT
   (228,218,206 at the top to 244,240,230 at the bottom) against a flat wall, so the video always
   read as a lighter rectangle. Fixed in the asset: the backdrop is now flattened to this wall
   colour. The wall itself is unchanged, and .brandsSection at line ~1118 is the single source of
   truth. .vMarquee::before/::after are rgba(232,224,214,.9) = this same #E8E0D6 — if the wall ever
   moves, those two literals must move with it. */

/* ---------- Brand Book "Choose your treatment" grid (R27) ----------
   Exact transplant of the brand book's categorized treatment screen
   (ScreenTreatmentGrid): four category groups, three cards each. His
   rule: three by three by three, i.e. 3-up at EVERY width, so the grid
   stays repeat(3,1fr) on phones too. Below 640px each card stacks
   (video over text) to keep three columns legible; at >=640px it is the
   brand book's 30/70 media+text horizontal split. Replaced the dead
   Round-8 grid block (same class names, unused in HTML since). */
.tgGroups { max-width: 960px; margin: 20px auto 0; display: flex; flex-direction: column; gap: 24px; }
.tgCat { margin: 0; }
.tgCatHead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tgCatHead h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8D6E1B;
  white-space: nowrap;
}
.tgRule { flex: 1; height: 1px; background: #EBE3CF; }
.tgGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tgCard {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid #EAECF0;
  border-radius: 12px;
  padding: 8px;
}
.tgMedia {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: #FAF6EC;
  aspect-ratio: 4 / 3;
}
.tgMedia video { display: block; width: 100%; height: 100%; object-fit: cover; }
.tgText { display: flex; flex-direction: column; gap: 2px; padding: 0 2px 2px; min-width: 0; }
.tgName { font-weight: 600; font-size: 12px; line-height: 1.25; color: #111827; }
.tgTag { font-size: 10.5px; line-height: 1.35; color: #667085; }
@media (min-width: 640px) {
  .tgCard { flex-direction: row; align-items: stretch; gap: 12px; padding: 10px; min-height: 96px; }
  .tgMedia { width: 30%; flex: 0 0 30%; aspect-ratio: auto; }
  .tgText { flex: 1; justify-content: center; padding: 4px 0; }
  .tgName { font-size: 13px; }
  .tgTag { font-size: 11px; }
}

/* R23: the philosophy band (.philoScrub / .philoVideo / .philoCopy — the scroll-scrubbed,
   later looping, jaw video) is DELETED. Its statement was its only copy, and that sentence
   moved UP to become the lead line of .treatVidsSection, so the band had nothing left to say.
   The full-mouth-rehab poster + mp4 are still in use by the Full-Mouth Rehab tiles inside the
   treatment carousel — only the -loop.mp4 boomerang is now orphaned. */

/* Round 16: lower-left-quadrant text law — text lives in the bottom-left
   quarter of a 16:9 media frame, type as small as it can stay readable */
.quadText {
  position: absolute;
  z-index: 2;
  left: 0; bottom: 0;
  width: 58%;
  max-height: 68%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  padding: 8px 10px;
  color: #fff;
  font-size: 0.62rem;
  line-height: 1.25;
  text-shadow: 0 1px 8px rgba(13, 31, 61, 0.6);
}
@media (min-width: 768px) {
  .quadText { gap: 5px; padding: 12px 16px; max-height: 55%; }
  .quadText .quadTitle { font-size: 1.05rem; }
  .quadText p { font-size: 0.7rem; }
  .quadSteps span { font-size: 0.6rem; padding: 3px 9px; }
}

.quadText .quadTitle {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  line-height: 1.15;
  color: #fff;
}
.quadText .quadTitle span { display: block; color: var(--brand-gold-light); font-size: 0.85em; margin-top: 1px; }
.quadText p { margin: 0; font-size: 0.58rem; line-height: 1.25; }
.quadSteps { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 3px; margin-top: 4px; }
.quadSteps span {
  font-size: 0.45rem;
  white-space: nowrap;
  padding: 2px 5px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.splitBanner.inview .quadSteps span { opacity: 1; transform: none; }
/* R33: 0.4→1.9s stagger read as "steps missing" mid-scroll — tightened to under a second */
.splitBanner.inview .quadSteps span:nth-child(1) { transition-delay: 0.15s; }
.splitBanner.inview .quadSteps span:nth-child(2) { transition-delay: 0.3s; }
.splitBanner.inview .quadSteps span:nth-child(3) { transition-delay: 0.45s; }
.splitBanner.inview .quadSteps span:nth-child(4) { transition-delay: 0.6s; }

/* R27: the "Explore Treatments" revolving video carousel (.tvMarquee / .tvTile) was removed.
   Its 12 treatment micro-clips now live in the static Brand Book treatment grid under Our Work
   (.treatGridSection / .tgGrid above). */

/* ---------- Ratings marquee (Round 9: static ratingWrap → auto-moving strip) ---------- */
.ratingMarquee { margin-top: 20px; }
.ratingMarquee .marqueeTrack { gap: 12px; padding: 6px 12px 6px 0; align-items: center; }
.ratingMarquee .ratingBlock { flex: 0 0 auto; }
/* Round 16: half height — "save as much space as I could" */
.ratingMarquee .ratingBlock img { display: block; height: 46px; width: auto; border-radius: 12px; }
@media (max-width: 600px) { .ratingMarquee .ratingBlock img { height: 36px; } }

/* ---------- Safety section: R30 tablet-in-office (replaces the pill marquee) ---------- */

/* ============================================================
   Round-11: UX-pass fixes (2026-07-10)
   ============================================================ */

/* former marquees rendered as calm wrapped rows */
.staticStrip { overflow: visible; }
.staticStrip .marqueeTrack {
  animation: none;
  flex-wrap: wrap;
  justify-content: center;
  flex-shrink: 1;
  padding-right: 0;
  will-change: auto;
}
/* swipeable pill rows (footer tools) */
.scrollRow { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.scrollRow::-webkit-scrollbar { display: none; }
.scrollRow .marqueeTrack { animation: none; will-change: auto; }

/* quiet heading variant: signature italic-gold reserved for anchor sections */
.sectionHead.quiet { font-size: clamp(1.35rem, 4.6vw, 1.9rem); }
.sectionHead.quiet span { display: inline; font-style: normal; color: inherit; }
.section.dark .sectionHead.quiet span { color: inherit; }

/* unify the CA heading system onto sectionHead metrics */
.caHead { font-size: clamp(1.35rem, 4.6vw, 1.9rem); margin-bottom: 6px; }

/* safety steps: one ordered sequence on its own row */
.safetySteps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 14px 0 0;
  padding: 0;
}

/* landmarks */
.srOnly {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* modal locks the page behind it */
body.modal-open { overflow: hidden; }

/* sticky CTA bar: never occlude the end of the page; always visible */
body { padding-bottom: 64px; }

/* off-screen marquees stand still */
.marquee.offscreen .marqueeTrack { animation-play-state: paused; }

/* clinical evidence framing for case photos */
.workCard img, .baCard img { border: 1px solid #E5E0D4; border-radius: 10px; }

/* compositor hint only while the reveal can still run */
.reveal { will-change: transform, opacity; }
.reveal.inview { will-change: auto; }

/* form validation + submit states */
.fieldError {
  display: none;
  font-size: 0.78rem;
  font-weight: 600;
  color: #C0392B;
  margin: -6px 0 8px;
}
.glassCard .fieldError { color: #FFB4A2; }
.field-invalid { border-color: #C0392B !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15) !important; }
.field-invalid + .fieldError, .fieldError.show { display: block; }
form[data-lead-form] button[type="submit"].pending { opacity: 0.7; pointer-events: none; }
form[data-lead-form] button[type="submit"].pending::after {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-left: 10px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: leadSpin 0.7s linear infinite;
}
@keyframes leadSpin { to { transform: rotate(360deg); } }
.leadResult { display: none; text-align: center; padding: 18px 6px; }
.leadResult.show { display: block; }
.leadResult h4 { font-family: var(--font-heading); font-size: 1.25rem; margin-bottom: 8px; color: var(--brand-gold-dark); }
.leadResult p { font-size: 0.92rem; line-height: 1.5; }
.glassCard .leadResult h4 { color: var(--brand-gold-light); }
.glassCard .leadResult p { color: rgba(255, 255, 255, 0.85); }
.leadResult .waFallback {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 10px 20px;
  border-radius: 999px; background: #25D366; color: #fff; font-weight: 700; font-size: 0.9rem;
}
form[data-lead-form].done { display: none; }
.privacyRow.field-invalid { color: #C0392B; border: none !important; box-shadow: none !important; }
.footerTools.scrollRow {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* ============================================================
   R23 — his section-by-section dictation
   Backgrounds are asserted in the R24 cadence block above (two-class rule).
   This block carries everything that block cannot: the consequences.
   ============================================================ */

/* --- 3. Transparent & Patient-Centred Care: its CTA duo centres -------------- */
.sbCare .ctaDuo { justify-content: center; }

/* --- 4. Compare Your Cost, now on NAVY --------------------------------------- */
/* The heading was --brand-blue-deep: invisible on navy. Flip it, and keep it on ONE
   line (.sectionHead span is display:block by default, which broke "Cost" onto its own row). */
.costSection .sectionHead { color: #fff; }
.costSection .sectionHead span { display: inline; color: var(--brand-gold-light); }
/* The .costCol.india card is navy too. On a navy section it needs a hard edge and a
   lifted shadow, or it dissolves into the background. */
.costSection .costCompare {
  border: 2px solid var(--brand-gold);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}
/* "Why Pay 70%": he asked for BLACK, and for the same font as the See-Your-Treatment
   lead (.caLead — body font, 600, #111827). Black on navy is unreadable, so the line
   sits in a white panel and IS that black body text. */
.costSection .whyPay {
  font-family: var(--font-sans);
  font-weight: 600;
  color: #111827;
  font-size: clamp(0.74rem, 2.2vw, 0.98rem);   /* R24: one step down from clamp(0.82, 2.5vw, 1.1) */
  background: #fff;
  border-radius: var(--radius-card);
  padding: 16px 20px;
  margin: 20px auto 0;
  max-width: 620px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
}
.costSection .whyPay strong { color: var(--brand-gold-dark); }

/* --- 6. The clinical-sequence flow bar travels RIGHT, not left ---------------- */
/* Reverses the travel; the ➞ arrows keep pointing forward, which is the band's point. */

/* --- 9. Meet Our Specialists, now on NAVY ------------------------------------- */
.specialistsSection .sectionHead { color: #fff; }
.specialistsSection .sectionHead span { color: var(--brand-gold-light); }
.specialistsSection .helpingText { color: rgba(255, 255, 255, 0.78); }
/* The .docCarousel cards are TRANSPARENT (R18 stripped their white background to close the
   circle-to-circle gap), so the doctors' names sit directly on the section — they were
   --brand-blue-deep, i.e. dark blue on navy. Caught on the render, not in the markup. */
.specialistsSection .docCard p { color: #fff; }

/* --- 10. The services strip moved up and went white --------------------------- */
/* It used to sit on navy, where the tiles read as objects for free. On white they need
   their own edge back. */
.servicesSection .serviceCard.tileCard {
  border: 1px solid rgba(201, 168, 76, 0.55);
  box-shadow: 0 6px 18px rgba(0, 27, 94, 0.08);
}

/* --- 13. Choose India: the 8 stat cubes ride a 2x2 scroll-snap carousel -------- */
.cubeCarousel { margin-top: 26px; }
.cubeTrack {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cubeTrack::-webkit-scrollbar { display: none; }
.cubeTrack:focus-visible { outline: 2px solid var(--brand-gold-light); outline-offset: 4px; border-radius: 12px; }
.cubeSlide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2 columns x 2 rows = 4 boxes per slide */
  gap: 12px;
}
.cubeDots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.cubeDots button {
  width: 8px; height: 8px; padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.cubeDots button[aria-current="true"] { background: var(--brand-gold-top); border-color: var(--brand-gold-top); transform: scale(1.25); }

/* --- 12. The CTA band between Technology and Implant Brands -------------------- */
/* R24, his call: NAVY, and tighter top/bottom. (Was dark cream in R23.) */
.section.ctaBand { background: var(--grad-deep-navy); padding-top: 14px; padding-bottom: 14px; }
.section.ctaBand .ctaRow { margin-top: 0; }

/* ============================================================
   R24 — his second pass: spacing, sizing, and the cube fix
   ============================================================ */

/* R27: the treatment carousel that used to precede the care banner is gone; packSection now
   runs into sbCare directly. sbCare is a full-bleed split banner, so it keeps a flush top. */
.section.sbSection.sbCare { padding-top: 0; }

/* --- 2. Two type sizes come down one step (the .whyPay step is set in its own rule above) */
.caLead { font-size: 0.85rem; }   /* R24: was 0.92rem */

/* --- 3. Less air above Aussies Real Smile Transformations --------------------- */
.section.light.baSection { padding-top: 10px; }

/* --- 9. The stat cubes auto-advance. Motion is JS-driven (js/main.js); this only kills it
   for anyone who asked the OS not to animate. */
@media (prefers-reduced-motion: reduce) {
  .cubeTrack { scroll-behavior: auto; }
}

/* ============================================================================
   R28 — Brand Book transplants: Why Stunning infographic + before/after dial.
   Tokens are the brand book's own (WhyStunningDetail.tsx / BeforeAfterDial.tsx):
   card border #EAECF0, ink #111827, body #344054/#535862, tagline #667085,
   gold text #8D6E1B, gold well #FBF6EA, chip blue #EEF4FF.
   ========================================================================== */

/* --- Why Stunning (R32 redesign — brand-book journey rail @ 19d567b). Frame: sits on
   brand-book paper #FDFBF5 between the white treatment grid above and cream centers below. */
.section.cream.whySection { background: #FDFBF5; }
.whyWrap { max-width: 820px; }
.wsEyebrow {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #667085; margin-bottom: 6px;
}
.wsEyebrowDot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-gold); }

/* laurel badges */
.wsLaurels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.wsLaurel {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(201, 168, 76, 0.25); background: #fff; border-radius: 12px; padding: 6px;
}
.wsLaurel img { height: 72px; width: 100%; object-fit: contain; }

/* stat band */
.wsStats {
  margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(201, 168, 76, 0.25); background: #fff; border-radius: 12px; padding: 14px 0;
}
.wsStat { text-align: center; padding: 0 8px; }
.wsStat + .wsStat { border-left: 1px solid #EBE3CF; }
.wsStatNum { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--brand-blue); }
.wsStatNum em { font-style: normal; color: #856915; }
.wsStatCap { margin-top: 2px; font-size: 0.68rem; line-height: 1.3; color: #667085; }

/* photographed theme band */
.wsTheme { margin-top: 18px; }
.wsBand { position: relative; height: 92px; border-radius: 12px; overflow: hidden; }
.wsBand img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wsBand::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(16, 27, 51, 0.85), rgba(16, 27, 51, 0.55) 50%, rgba(16, 27, 51, 0.25));
}
.wsBand::before { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: rgba(201, 168, 76, 0.6); z-index: 2; }
.wsBandText { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 16px; }
.wsBandBlurb { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-gold); }
.wsBandLabel { font-size: 1.05rem; font-weight: 700; color: #fff; margin-top: 2px; }

/* journey rail: numbered badges threaded by a gold line, blue gradient cards */
.wsRow { list-style: none; position: relative; display: grid; gap: 8px; padding: 16px 0 0; margin: 0; }
.wsRow.cols3 { grid-template-columns: repeat(3, 1fr); --ws-n: 3; }
.wsRow.cols4 { grid-template-columns: repeat(4, 1fr); --ws-n: 4; }
.wsRow::before {
  content: ""; position: absolute; top: 16px; height: 2px;
  left: calc(50% / var(--ws-n)); right: calc(50% / var(--ws-n));
  background: linear-gradient(to right, var(--brand-gold), #D4AF37);
}
.wsItem { position: relative; display: flex; flex-direction: column; text-align: center; }
.wsBadge {
  position: relative; z-index: 1; margin-top: -16px; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(145deg, #2E7CD6 0%, #0057B8 55%, #00438E 100%);
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.6), 0 4px 10px rgba(0, 87, 184, 0.3);
  overflow: hidden;
}
.wsBadge::before { content: ""; position: absolute; inset: 0 0 55% 0; background: rgba(255, 255, 255, 0.18); border-radius: 50% 50% 0 0; }
.wsBadge i { position: relative; font-style: normal; font-size: 0.72rem; font-weight: 700; color: #fff; }
.wsCard {
  position: relative; margin-top: 8px; min-height: 96px; flex: 1; overflow: hidden;
  border-radius: 12px; padding: 10px;
  background: linear-gradient(145deg, #1E6FD9 0%, #0058C8 55%, #00408F 100%);
  box-shadow: 0 6px 14px rgba(0, 64, 143, 0.25);
}
.wsCard::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, 0.14), transparent 55%); }
.wsCardLabel { position: relative; font-size: 0.78rem; font-weight: 600; line-height: 1.3; color: #fff; }
.wsCardDetail { position: relative; margin-top: 4px; font-size: 0.68rem; line-height: 1.4; color: rgba(255, 255, 255, 0.8); }

/* payoff */
.wsPayoff { margin-top: 20px; border-radius: 12px; background: #101B33; padding: 16px; overflow: hidden; }
.wsPayoffTick { display: block; width: 40px; height: 1px; background: var(--brand-gold); }
.wsPayoff p { margin-top: 12px; font-weight: 700; font-size: clamp(0.95rem, 2.6vw, 1.1rem); line-height: 1.45; color: #fff; }

/* phone: 4-item rows wrap 2x2 — the rail only reads on a single line, so it hides there */
@media (max-width: 640px) {
  .wsRow.cols4 { grid-template-columns: repeat(2, 1fr); }
  .wsRow.cols4::before { display: none; }
  .wsRow.cols4 .wsBadge { margin-top: 0; }
  .wsLaurel img { height: 56px; }
}

/* --- Before/after drag dial (baSection). --pos is the reveal percent, set by JS. */
.baDialWrap { max-width: 560px; margin: 0 auto 20px; }
.baDial {
  --pos: 50%;
  position: relative; overflow: hidden; user-select: none; -webkit-user-select: none;
  touch-action: none; border: 1px solid #EAECF0; background: #FAF6EC; border-radius: 12px;
}
.baDial > img, .baDialAfter img { display: block; width: 100%; height: auto; }
.baDialAfter { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.baDialHandle { position: absolute; top: 0; bottom: 0; left: var(--pos); transform: translateX(-50%); }
.baDialLine { display: block; margin: 0 auto; height: 100%; width: 2px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.35); }
.baDialKnob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid #EAECF0; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
/* invisible range input along the bottom: keyboard + screen-reader access */
.baDial input[type="range"] { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 32px; opacity: 0; cursor: ew-resize; margin: 0; }
.baDialChip {
  position: absolute; top: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.9);
  padding: 2px 10px; font-size: 0.7rem; font-weight: 600; color: #111827;
}
.baDialChipL { left: 8px; }
.baDialChipR { right: 8px; }
.baDialHint { text-align: center; margin-top: 8px; font-size: 0.78rem; color: var(--ink-soft); }

/* ============================================================================
   R29 — one CTA per split banner, CTA rides the video, cost hierarchy flip.
   ========================================================================== */

/* Banners whose text column is gone (the CTA moved onto the media): the media
   carries the whole card at every width. */
@media (min-width: 768px) {
  .splitBanner.solo { grid-template-columns: 1fr; }
}

/* The overlay column: title + CTA flow together in one bottom-anchored box, so
   the button can never collide with the title at any width (was two independent
   absolutes with fixed bottom offsets — collapsed at ~700-900px). .quadText
   (care) still just flows its CTA after the steps. */
.sbMedia .sbOverlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 0 18px 16px;
}
.sbOverlay .sbOverlayCta { display: flex; }
.sbOverlayCta .btnGold { white-space: nowrap; padding: 12px 18px; font-size: 0.86rem; }
.quadText .sbOverlayCta { padding: 0; margin-top: 8px; }
.quadText .sbOverlayCta .btnGold { padding: 9px 14px; font-size: 0.72rem; }
@media (max-width: 480px) {
  .sbOverlayCta .btnGold { padding: 9px 12px; font-size: 0.7rem; }
  .sbOverlayCta .btnGold img { width: 14px; height: 14px; }
  .quadText .sbOverlayCta .btnGold { padding: 7px 10px; font-size: 0.6rem; }
}

/* Cost columns: the COUNTRY is now the big element, the amount smaller below it
   (his R29 call — the destination leads, the number supports). Colors keep their
   roles: India's amount stays the gold pop. */
.costCol .country {
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 5.6vw, 2.1rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.94);
}
.costCol .price { font-size: clamp(1.02rem, 3.4vw, 1.35rem); margin-top: 2px; color: rgba(255, 255, 255, 0.85); }
.costCol.india .price { color: var(--brand-gold-top); }

/* ---------- R31: Safety & Regulatory Compliance — generated tablet-in-office scene ---------- */
.section.safetySection.safetyOffice { background: #fff; }
.safetyWrap { display: flex; justify-content: center; }
.safetyScene {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
/* R32, his call: 16:9 landscape at EVERY width — the 4/5 phone crop is gone. */

/* R30: tourism CTA — full-size, centred anchor on the video */
.sbTourism .sbOverlayCta { justify-content: flex-start; }
.sbTourism .sbOverlayCta .btnGold { padding: 14px 28px; font-size: 1rem; }
.sbTourism .sbOverlayCta .btnGold img { width: 20px; height: 20px; }
.sbTourism .sbOverlayTitle { text-align: left; }
@media (max-width: 480px) {
  .sbTourism .sbOverlayCta .btnGold { padding: 11px 18px; font-size: 0.82rem; }
  .sbTourism .sbOverlayCta .btnGold img { width: 16px; height: 16px; }
}

/* R91, his dictation: each checklist step breaks into TWO lines — the action,
   then what it is. The tick and the column share stay exactly as R88/R90 set
   them; only the <li> gains an internal stack. */
.implantChecks2 li { display: flex; flex-direction: column; }
.implantChecks2 .icDet {
  font-weight: 500;
  opacity: 0.78;
}

/* R91: the specialist cards no longer share a height — three of them gained a
   role line. Centring them (the shared .marqueeTrack default) pushed the
   name baselines out of line card to card, so this carousel tops-aligns. */
.docCarousel .marqueeTrack { align-items: flex-start; }