/*! Gurgaon ENT Clinic — CSS BUNDLE (bundle-home.css)
 *  GENERATED by build-vendor/src/css-bundle.py. DO NOT EDIT BY HAND:
 *  edit the source stylesheet and re-run the script, or your change is
 *  lost on the next build.
 *  Concatenation of the stylesheets the <head> used to link, in the
 *  exact order the browser received them, so the cascade is unchanged.
 *  Sources: css/main.css, css/home-v2.css, css/hero-b.css
 */

/* ======== css/main.css ======== */
/* ============================================================
   Gurgaon ENT Clinic — Design System
   Rebuilt static template set. Palette & font from design.json.
   ============================================================ */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand palette (from design.json color_palette_top_hex) */
  --teal: #01bdb2;
  --teal-dark: #019a91;
  --navy: #142959;
  --navy-2: #0d2354;
  --slate: #3b4964;
  --muted: #6d7a8c;
  --line: #e5e5e5;
  --bg: #ffffff;
  --bg-soft: #f6f9fa;
  --bg-soft-2: #f1f5f6;
  --white: #ffffff;
  --text: #26324a;

  /* Type */
  --font: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Spacing scale */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;

  /* Radius / shadow */
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 4px 14px rgba(20, 41, 89, .06);
  --shadow: 0 12px 34px rgba(20, 41, 89, .10);
  --shadow-lg: 0 24px 60px rgba(20, 41, 89, .14);

  --container: 1180px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-dark); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--navy); }
ul { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font); color: var(--navy); line-height: 1.2; margin: 0 0 .6em; font-weight: 700; }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1rem; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section { padding: var(--space-6) 0; }
.section--soft { background: var(--bg-soft); }
.section--navy { background: var(--navy); color: #dfe6f2; }
.section--navy h2, .section--navy h3 { color: #fff; }
.narrow { max-width: 820px; margin: 0 auto; }
.center { text-align: center; }
.grid { display: grid; gap: var(--space-3); }
.eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .14em;
  font-size: .78rem; font-weight: 600; color: var(--teal-dark); margin-bottom: .6rem;
}
.section--navy .eyebrow { color: var(--teal); }
.lead { font-size: 1.12rem; color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: .98rem;
  cursor: pointer; border: 2px solid transparent; transition: all .18s ease; line-height: 1;
}
.btn--primary { background: var(--teal); color: #fff; }
.btn--primary:hover { background: var(--teal-dark); color: #fff; transform: translateY(-1px); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-2); color: #fff; }
.btn--outline { background: transparent; border-color: var(--teal); color: var(--teal-dark); }
.btn--outline:hover { background: var(--teal); color: #fff; }
.btn--ghost-light { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--navy); }

/* ============================================================
   Header / Navigation
   ============================================================ */
.topbar {
  background: var(--navy); color: #cdd6ea; font-size: .86rem;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: .5rem; padding-bottom: .5rem; flex-wrap: wrap; }
.topbar a { color: #cdd6ea; }
.topbar a:hover { color: #fff; }
.topbar__contact { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.topbar__social { display: flex; gap: .9rem; }

.site-header { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: var(--shadow-sm); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .6rem; padding-bottom: .6rem; }
.brand { display: flex; align-items: center; gap: .6rem; }
.brand img { height: 54px; width: auto; }

.nav { display: flex; align-items: center; gap: .3rem; }
.nav > ul { display: flex; align-items: center; gap: .2rem; list-style: none; }
.nav li { position: relative; }
.nav a.nav__link, .nav > ul > li > .nav__link {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .7rem .85rem; font-weight: 500; color: var(--navy); border-radius: 8px; font-size: .97rem;
}
.nav a.nav__link:hover, .nav li:hover > .nav__link, .nav .nav__link[aria-current="page"] { color: var(--teal-dark); }
.nav .caret { border: solid var(--muted); border-width: 0 2px 2px 0; padding: 3px; transform: rotate(45deg); margin-top: -3px; transition: transform .2s ease; }
.nav li:hover > .nav__link .caret { transform: rotate(-135deg); margin-top: 2px; }

/* Dropdowns */
.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 260px;
  background: #fff; border-radius: 12px; box-shadow: var(--shadow);
  list-style: none; padding: .5rem; opacity: 0; visibility: hidden;
  transform: translateY(8px); transition: all .18s ease; z-index: 60;
}
.nav li:hover > .dropdown, .dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: .6rem .8rem; border-radius: 8px; color: var(--slate); font-size: .93rem; font-weight: 500; }
.dropdown a:hover { background: var(--bg-soft); color: var(--teal-dark); }

.header-cta { display: inline-flex; }

/* Mobile toggle */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px; background: none; border: 0;
  cursor: pointer; padding: 8px;
}
.nav-toggle span { width: 26px; height: 3px; background: var(--navy); border-radius: 2px; transition: .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   Page hero / breadcrumb
   ============================================================ */
.page-hero {
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 60%, #123 100%);
  color: #fff; padding: var(--space-6) 0 var(--space-5);
}
.page-hero h1 { color: #fff; margin-bottom: .5rem; }
.page-hero p { color: #c7d2e8; max-width: 640px; }
.breadcrumb { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; font-size: .88rem; color: #9fb0d0; margin-top: 1rem; }
.breadcrumb a { color: var(--teal); }
.breadcrumb li::after { content: "/"; margin-left: .5rem; color: #55688f; }
.breadcrumb li:last-child::after { content: ""; }

/* ============================================================
   Home hero
   ============================================================ */
.hero {
  background: linear-gradient(120deg, #f2fbfa 0%, #eef4fb 100%);
  overflow: hidden;
}
.hero .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-5); align-items: center; padding-top: var(--space-6); padding-bottom: var(--space-6); }
.hero h1 { color: var(--navy); }
.hero .lead { margin-bottom: 1.6rem; }
.hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero__media { position: relative; }
.hero__media img { border-radius: var(--radius-lg); margin-left: auto; }
.hero__badge {
  position: absolute; bottom: 18px; left: 0; background: #fff; box-shadow: var(--shadow);
  border-radius: var(--radius); padding: 1rem 1.2rem; display: flex; align-items: center; gap: .8rem;
}
.hero__badge strong { display: block; color: var(--navy); font-size: 1.1rem; }
.hero__badge span { font-size: .82rem; color: var(--muted); }

/* ============================================================
   Cards & components
   ============================================================ */
.cards { display: grid; gap: var(--space-3); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-3); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card h3 { font-size: 1.15rem; }
.card p { color: var(--muted); font-size: .96rem; margin-bottom: 1rem; }
.card .card__link { margin-top: auto; font-weight: 600; }

.icon-card { text-align: left; }
.icon-card .icon {
  width: 62px; height: 62px; border-radius: 16px; background: var(--bg-soft-2);
  display: grid; place-items: center; margin-bottom: 1rem;
}
.icon-card .icon img { width: 34px; height: 34px; }

/* Service list card with bullets */
.svc-card ul { list-style: none; margin-top: .4rem; }
.svc-card li { position: relative; padding-left: 1.4rem; color: var(--muted); font-size: .94rem; margin-bottom: .35rem; }
.svc-card li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }

/* Media card (blog / portfolio) */
.media-card { padding: 0; overflow: hidden; }
.media-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft); }
.media-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.media-card:hover .media-card__img img { transform: scale(1.05); }
.media-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.media-card__date { font-size: .8rem; color: var(--teal-dark); font-weight: 600; letter-spacing: .03em; margin-bottom: .4rem; }
.media-card h3 { font-size: 1.08rem; line-height: 1.35; margin-bottom: .5rem; }
.media-card h3 a { color: var(--navy); }
.media-card h3 a:hover { color: var(--teal-dark); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); text-align: center; }
.stat strong { display: block; font-size: 2.5rem; font-weight: 800; color: var(--teal); line-height: 1; }
.stat span { color: #c7d2e8; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; }

/* Split (image + text) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; }
.split img { border-radius: var(--radius-lg); }

/* Testimonials */
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-4); box-shadow: var(--shadow-sm); position: relative;
}
.quote::before { content: "\201C"; font-size: 4rem; color: var(--teal); opacity: .25; position: absolute; top: .2rem; left: 1rem; line-height: 1; }
.quote p { font-style: italic; color: var(--slate); }
.quote__author { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; }
.avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--bg-soft-2); flex: 0 0 auto; display: grid; place-items: center; }
.avatar svg { width: 52px; height: 52px; }
.quote__author strong { color: var(--navy); }
.quote__author span { display: block; font-size: .84rem; color: var(--muted); }

/* Prose (article body) */
.prose { max-width: 780px; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.6rem; color: var(--navy); }
.prose ul { padding-left: 1.2rem; margin: 0 0 1.2rem; }
.prose li { margin-bottom: .4rem; }
.prose img { border-radius: var(--radius); margin: 1.4rem 0; }

/* Sidebar layout */
.with-sidebar { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-5); align-items: start; }
.sidebar .widget { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); margin-bottom: var(--space-3); }
.sidebar .widget h3 { font-size: 1.05rem; padding-bottom: .6rem; border-bottom: 2px solid var(--teal); display: inline-block; }
.sidebar .widget ul { list-style: none; }
.sidebar .widget li { padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.sidebar .widget li:last-child { border-bottom: 0; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tags a { background: var(--bg-soft); border: 1px solid var(--line); padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; color: var(--slate); }
.tags a:hover { background: var(--teal); color: #fff; border-color: var(--teal); }

/* Forms */
.form-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--space-4); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .88rem; font-weight: 600; color: var(--navy); margin-bottom: .35rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--font); font-size: .96rem; color: var(--text); background: #fff;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(1,189,178,.15); }
.field textarea { min-height: 130px; resize: vertical; }

/* Contact info blocks */
.info-list { list-style: none; display: grid; gap: 1.2rem; }
.info-list li { display: flex; gap: .9rem; align-items: flex-start; }
.info-list .info-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--bg-soft-2); display: grid; place-items: center; flex: 0 0 auto; }
.info-list .info-ico img { width: 22px; height: 22px; }
.info-list strong { display: block; color: var(--navy); }
.info-list span { color: var(--muted); font-size: .95rem; }

/* Hours table */
.hours { list-style: none; }
.hours li { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .95rem; }
.hours li span:first-child { color: #c7d2e8; }
.hours li span:last-child { font-weight: 600; color: #fff; }

/* Map */
.map-embed { border: 0; width: 100%; height: 380px; border-radius: var(--radius); display: block; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--navy-2); color: #b9c4dc; padding: var(--space-6) 0 var(--space-3); font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-4); }
.site-footer h4 { color: #fff; font-size: 1.05rem; margin-bottom: 1.1rem; }
.site-footer a { color: #b9c4dc; }
.site-footer a:hover { color: var(--teal); }
.site-footer .brand img { height: 48px; filter: brightness(0) invert(1); }
.footer-links { list-style: none; display: grid; gap: .6rem; }
.footer-contact { list-style: none; display: grid; gap: .8rem; }
.footer-contact li { display: flex; gap: .6rem; }
.footer-social { display: flex; gap: .7rem; margin-top: 1rem; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: grid; place-items: center; color: #fff;
}
.footer-social a:hover { background: var(--teal); }
.footer-bottom { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,.1); text-align: center; color: #8ea0c0; font-size: .88rem; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}
@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero__media img { margin: 0 auto; }
  .split, .with-sidebar { grid-template-columns: 1fr; }
  .cards--3 { grid-template-columns: repeat(2, 1fr); }
  .header-cta { display: none; }

  /* Mobile nav */
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw); background: #fff;
    flex-direction: column; align-items: stretch; padding: 5rem 1.2rem 2rem;
    box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .25s ease;
    overflow-y: auto; z-index: 55;
  }
  .nav.is-open { transform: translateX(0); }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav > ul > li { border-bottom: 1px solid var(--line); }
  .nav a.nav__link { padding: .9rem .4rem; justify-content: space-between; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    min-width: 0; padding: 0 0 .5rem .8rem; display: none;
  }
  .dropdown.is-open { display: block; }
  .nav li:hover > .dropdown { opacity: 1; } /* no hover-open on mobile */
  .nav-backdrop { position: fixed; inset: 0; background: rgba(13,35,84,.4); opacity: 0; visibility: hidden; transition: .2s; z-index: 49; }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .cards--3, .cards--2 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .topbar__contact { gap: .8rem; }
  .section { padding: var(--space-5) 0; }
}

/* ============================================================
   Legacy content layer — makes original WordPress markup
   (container/row/col classes, images, headings, tables,
   iframes, lists, blockquotes, buttons) look native to the
   new design when rendered inside .legacy-content.
   ============================================================ */
.legacy-content { color: var(--text); line-height: 1.75; }
.legacy-content > *:first-child { margin-top: 0; }
.legacy-content p { margin: 0 0 1.15rem; }
.legacy-content h1,
.legacy-content h2,
.legacy-content h3,
.legacy-content h4,
.legacy-content h5,
.legacy-content h6 { color: var(--navy); line-height: 1.25; margin: 2rem 0 .7rem; }
.legacy-content h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.legacy-content h3 { font-size: 1.3rem; }
.legacy-content h4 { font-size: 1.1rem; }
.legacy-content a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 2px; }
.legacy-content a:hover { color: var(--navy); }

/* Images made responsive + native rounding */
.legacy-content img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1.4rem 0; }
.legacy-content figure { margin: 1.6rem 0; }
.legacy-content figure img { margin: 0; }
.legacy-content figcaption { font-size: .86rem; color: var(--muted); text-align: center; margin-top: .5rem; }
.legacy-content .alignright { float: right; margin: .4rem 0 1rem 1.6rem; max-width: 50%; }
.legacy-content .alignleft { float: left; margin: .4rem 1.6rem 1rem 0; max-width: 50%; }
.legacy-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* WordPress / page-builder container + grid classes */
.legacy-content .container,
.legacy-content .row,
.legacy-content .elementor-row,
.legacy-content .wp-container { display: block; width: 100%; max-width: 100%; padding: 0; margin: 0; }
.legacy-content .row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.legacy-content [class*="col-"],
.legacy-content .column,
.legacy-content .col { flex: 1 1 260px; min-width: 0; }

/* Lists */
.legacy-content ul, .legacy-content ol { padding-left: 1.4rem; margin: 0 0 1.2rem; }
.legacy-content li { margin-bottom: .45rem; }
.legacy-content ul { list-style: disc; }
.legacy-content ul li::marker { color: var(--teal); }

/* Blockquotes */
.legacy-content blockquote {
  margin: 1.6rem 0; padding: 1rem 1.4rem; border-left: 4px solid var(--teal);
  background: var(--bg-soft); border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--slate); font-style: italic;
}
.legacy-content blockquote p:last-child { margin-bottom: 0; }

/* Tables */
.legacy-content table {
  width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: .95rem;
  display: block; overflow-x: auto;
}
.legacy-content th, .legacy-content td { border: 1px solid var(--line); padding: .7rem .9rem; text-align: left; }
.legacy-content thead th { background: var(--bg-soft); color: var(--navy); }
.legacy-content tbody tr:nth-child(even),
.legacy-content tbody tr:nth-child(even) { background: var(--bg-soft-2); }

/* Iframes / embeds (maps, video) */
.legacy-content iframe {
  width: 100%; max-width: 100%; min-height: 340px; border: 0;
  border-radius: var(--radius); margin: 1.6rem 0; display: block;
}

/* Buttons that came from the CMS */
.legacy-content .btn,
.legacy-content .wp-block-button__link,
.legacy-content .elementor-button {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.5rem; border-radius: 999px; font-weight: 600;
  background: var(--teal); color: #fff !important; text-decoration: none;
}
.legacy-content .btn:hover,
.legacy-content .wp-block-button__link:hover,
.legacy-content .elementor-button:hover { background: var(--teal-dark); }

.legacy-content hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* ============================================================
   Mobile / touch pass
   ------------------------------------------------------------
   Everything below is additive and lives inside a max-width
   query, so the approved desktop rendering is untouched. It
   fixes what a device audit at 320/375/390/414/768 found:
   unreachable drawer close control, a scroll lock that did not
   lock, sub-44px tap targets, a two-column footer that never
   stacked, and form fields under 16px (which makes iOS zoom the
   page on focus).
   ============================================================ */

/* Drawer close control — hidden entirely on desktop, where the
   off-canvas drawer does not exist. */
.nav-close { display: none; }

@media (max-width: 900px) {
  /* --- Drawer --- */
  /* The drawer itself must not be the scroll container. In landscape its
     content overflows, and a scrolling drawer carries the absolutely
     positioned close button off the top of the screen (`position: fixed`
     is no escape either — .nav is transformed, so it is the containing
     block for fixed descendants). Give the list the scrolling instead. */
  .nav { overflow: hidden; }
  .nav > ul { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; flex: 1 1 auto; }
  .nav-close {
    display: grid; place-items: center;
    position: absolute; top: .6rem; right: .6rem; z-index: 1;
    width: 44px; height: 44px; padding: 0;
    background: none; border: 0; cursor: pointer;
    font-size: 1.9rem; line-height: 1; color: var(--navy);
  }
  .nav-close:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 8px; }
  /* The FAB is z-index 80 and would otherwise float on top of the
     open drawer. */
  html.nav-open .hv2-fab { display: none; }
  .nav-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
}

/* Touch sizing for every viewport the audit covers, up to and
   including tablet landscape. 1024 is the existing breakpoint below
   which this design is already reflowing, so nothing here can reach
   the approved >=1025px desktop rendering. */
@media (max-width: 1024px) {
  /* --- Tap targets --- */
  .topbar .container { padding-top: .15rem; padding-bottom: .15rem; }
  .topbar__contact { gap: .5rem 1.2rem; }
  .topbar__social { gap: .5rem; }
  .topbar__contact a,
  .topbar__social a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .topbar__social a { min-width: 44px; justify-content: center; }
  .topbar__contact span { display: inline-flex; align-items: center; min-height: 32px; }
  .footer-social a { width: 44px; height: 44px; }
  .footer-links a,
  .footer-contact a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .card__link {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 44px;
  }

  /* --- Forms --- */
  /* Anything under 16px makes iOS zoom the viewport on focus and
     leaves the user zoomed in with a horizontally scrolling page. */
  .field input, .field textarea, .field select { font-size: 16px; }
  .field label { font-size: .95rem; }

  /* --- Headings --- */
  /* Stops hero H1s dropping a single-word orphan onto the last line. */
  h1 { text-wrap: balance; }

  /* --- Footer --- */
  .site-footer { font-size: 1rem; }
}

@media (max-width: 620px) {
  /* Footer stayed at two columns all the way down to 320px, which
     squeezed the brand column to ~145px / ~14 characters a line. */
  .footer-grid { grid-template-columns: 1fr; }
}


/* ======== css/home-v2.css ======== */
/* ============================================================
   Gurgaon ENT Clinic — Homepage v2 (ADDITIVE stylesheet)
   Loaded AFTER main.css on index-v2.html ONLY.
   Adapts the composition/spacing/rhythm of entcenter.webflow.io
   to OUR brand: navy #142959 / teal #01bdb2, Outfit font.
   Reuses main.css tokens & components (btn, container, form-card,
   quote, footer, header). Adds v2-only tokens + sections.
   Does NOT redefine existing tokens; only introduces new ones.
   ============================================================ */

:root {
  /* Derived supporting tints (new, additive) */
  --teal-050: #e6f7f5;
  --teal-100: #ccf0ed;
  --navy-050: #eef2fa;
  --navy-tint: #1b356e;          /* lighter navy for gradients */
  --sand: #fbfaf7;               /* warm neutral for editorial rhythm */

  /* Larger radii to echo the reference's very-rounded language */
  --radius-xl: 30px;
  --radius-2xl: 40px;

  /* Airier vertical rhythm for v2 sections */
  --space-7: 6rem;
}

/* ---------- overflow guard: reveal-on-scroll transforms, off-canvas nav,
   and inactive carousel slides push scrollWidth past the viewport on
   mobile/tablet. `body`-only clip doesn't shrink document.scrollWidth
   in Chrome, so clip both html and body; .site-header's sticky
   positioning is unaffected (verified via scroll test). ---------- */
html, body { overflow-x: clip; }

/* ---------- v2 section scaffolding ---------- */
.hv2 { padding: var(--space-7) 0; }
.hv2--tight { padding: var(--space-6) 0; }
.hv2--sand { background: var(--sand); }
.hv2__head { max-width: 720px; margin: 0 auto var(--space-5); text-align: center; }
.hv2__head--left { margin-left: 0; text-align: left; }
.hv2__head h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 800; letter-spacing: -.015em; }
.hv2__head .lead { margin-top: .4rem; }

/* ============================================================
   HERO — editorial, copy-left / media-right
   ============================================================ */
.hv2-hero {
  background:
    radial-gradient(1200px 600px at 88% -10%, var(--teal-050) 0%, rgba(230,247,245,0) 55%),
    linear-gradient(120deg, #f4fbfa 0%, #eef3fb 100%);
  overflow: hidden;
}
/* (v1 static-hero layout rules removed — the hero is now a slider;
   slide layout lives under `.hv2-slide .container`.) */

/* USP trust row under the slider — headline stat pills, not a footnote
   (client feedback: 22+ years / 18k+ surgeries are big assets, must be prominent) */
.hv2-hero__trust { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: stretch; }
.hv2-hero__trust .t {
  display: flex; flex-direction: column; align-items: flex-start;
  background: #fff; border-radius: var(--radius-xl);
  box-shadow: 0 12px 32px rgba(20,41,89,.10);
  padding: 1.1rem 1.6rem; flex: 1 1 auto; min-width: 150px;
}
.hv2-hero__trust strong {
  display: inline-flex; align-items: baseline; white-space: nowrap;
  color: var(--navy); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800;
  line-height: 1; letter-spacing: -.02em;
}
.hv2-hero__trust strong .u { color: var(--teal); font-size: .6em; font-weight: 800; line-height: 1; margin-left: .04em; }
.hv2-hero__trust span {
  color: var(--muted); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; margin-top: .5rem;
}

.hv2-hero__media { position: relative; }
.hv2-hero__frame {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
}
.hv2-hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hv2-hero__badge {
  position: absolute; left: -14px; bottom: 26px;
  background: #fff; box-shadow: var(--shadow);
  border-radius: var(--radius); padding: .95rem 1.2rem;
  display: flex; align-items: center; gap: .8rem; max-width: 260px;
}
.hv2-hero__badge .ico {
  width: 46px; height: 46px; border-radius: 12px; background: var(--teal-050);
  display: grid; place-items: center; flex: 0 0 auto;
}
.hv2-hero__badge .ico img { width: 26px; height: 26px; }
.hv2-hero__badge strong { display: block; color: var(--navy); font-size: 1rem; line-height: 1.1; }
.hv2-hero__badge span { font-size: .8rem; color: var(--muted); }
.hv2-hero__pill {
  position: absolute; right: -6px; top: 24px;
  background: var(--navy); color: #fff; border-radius: 999px;
  padding: .55rem 1.1rem; font-size: .85rem; font-weight: 600; box-shadow: var(--shadow);
}
.hv2-hero__pill b { color: var(--teal); }

/* ============================================================
   CONSULT / ABOUT DOCTOR — media-left / copy-right split
   ============================================================ */
.hv2-consult .split { gap: var(--space-6); }
.hv2-consult__media { position: relative; }
.hv2-consult__media img { border-radius: var(--radius-2xl); box-shadow: var(--shadow); }

/* Portrait variant: Dr. Gera's photo is 902x1602 (tall). Fill the frame edge to
   edge and anchor to the TOP so his head is always fully in shot and only the
   lower coat is trimmed — never a crop through the face. */
.hv2-consult__media--portrait picture,
.hv2-consult__media--portrait > img {
  display: block;
  width: 100%;
  aspect-ratio: 902 / 1602;
  border-radius: var(--radius-2xl);
  background: var(--bg-soft);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hv2-consult__media--portrait picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: inherit;
  box-shadow: none;
}
.hv2-consult__exp {
  position: absolute; right: 18px; bottom: -18px;
  background: var(--teal); color: #fff; border-radius: var(--radius);
  padding: 1rem 1.3rem; box-shadow: var(--shadow); text-align: center;
}
.hv2-consult__exp strong { display: block; font-size: 2rem; font-weight: 800; line-height: 1; }
.hv2-consult__exp span { font-size: .82rem; letter-spacing: .04em; }
.hv2-checklist { list-style: none; display: grid; gap: .7rem; margin: 1.3rem 0 1.8rem; }
.hv2-checklist li { position: relative; padding-left: 2rem; color: var(--slate); }
.hv2-checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--teal-050);
  color: var(--teal-dark); font-size: .8rem; font-weight: 700;
  display: grid; place-items: center;
}

/* ============================================================
   STATS COUNTER BAND (navy)
   ============================================================ */
.hv2-stats { background: linear-gradient(120deg, var(--navy) 0%, var(--navy-tint) 100%); color: #dfe6f2; }
.hv2-stats .container { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.hv2-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.hv2-stat { text-align: center; padding: 0 .5rem; position: relative; }
.hv2-stat + .hv2-stat::before {
  content: ""; position: absolute; left: 0; top: 10%; height: 80%;
  width: 1px; background: rgba(255,255,255,.14);
}
.hv2-stat strong {
  display: block; font-size: clamp(2.2rem, 4vw, 3.1rem); font-weight: 800;
  color: #fff; line-height: 1;
}
.hv2-stat strong .u { color: var(--teal); }
.hv2-stat span { color: #b8c4de; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-top: .5rem; display: block; }

/* ============================================================
   TREATMENTS — big rounded category tiles
   ============================================================ */
.hv2-treat__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.hv2-tile {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: 2rem 1.6rem; box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  display: flex; flex-direction: column;
}
.hv2-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--teal-100); }
.hv2-tile__ico {
  width: 72px; height: 72px; border-radius: 20px; background: var(--teal-050);
  display: grid; place-items: center; margin-bottom: 1.2rem;
}
.hv2-tile__ico img { width: 38px; height: 38px; }
.hv2-tile h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.hv2-tile p { color: var(--muted); font-size: .93rem; margin-bottom: 1.1rem; }
.hv2-tile ul { list-style: none; margin-bottom: 1.2rem; }
.hv2-tile li { position: relative; padding-left: 1.1rem; font-size: .88rem; color: var(--slate); margin-bottom: .3rem; }
.hv2-tile li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.hv2-tile .card__link { margin-top: auto; font-weight: 600; color: var(--teal-dark); }

/* ============================================================
   WHEN TO SEE AN ENT — symptom columns
   ============================================================ */
.hv2-symp__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.hv2-symp-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: 1.8rem; box-shadow: var(--shadow-sm);
}
.hv2-symp-card__top { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.hv2-symp-card__top .ico {
  width: 54px; height: 54px; border-radius: 14px; background: var(--navy-050);
  display: grid; place-items: center; flex: 0 0 auto;
}
.hv2-symp-card__top .ico img { width: 30px; height: 30px; }
.hv2-symp-card h3 { font-size: 1.15rem; margin: 0; }
.hv2-symp-card ul { list-style: none; display: grid; gap: .55rem; }
.hv2-symp-card li { position: relative; padding-left: 1.5rem; color: var(--slate); font-size: .95rem; }
.hv2-symp-card li::before {
  content: "+"; position: absolute; left: 0; top: -1px; color: var(--teal-dark); font-weight: 800;
}

/* ============================================================
   WHY CHOOSE US — navy feature band
   ============================================================ */
.hv2-choose {
  background: linear-gradient(115deg, var(--navy-2) 0%, var(--navy) 55%, var(--navy-tint) 100%);
  color: #dbe3f3;
}
.hv2-choose .container { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--space-6); align-items: center; }
.hv2-choose h2 { color: #fff; }
.hv2-choose .eyebrow { color: var(--teal); }
.hv2-choose__lead { color: #c3cee6; }
.hv2-choose__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.hv2-feature {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius); padding: 1.4rem;
}
.hv2-feature .ico {
  width: 50px; height: 50px; border-radius: 12px; background: rgba(1,189,178,.16);
  display: grid; place-items: center; margin-bottom: .9rem;
}
.hv2-feature .ico img { width: 26px; height: 26px; }
.hv2-feature h4 { color: #fff; font-size: 1.05rem; margin: 0 0 .4rem; }
.hv2-feature p { color: #b6c2de; font-size: .9rem; margin: 0; }

/* ============================================================
   FAQ — accordion
   ============================================================ */
.hv2-faq__list { max-width: 820px; margin: 0 auto; display: grid; gap: .9rem; }
.hv2-faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.hv2-faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 1.2rem 1.4rem; font-family: var(--font); font-size: 1.05rem; font-weight: 600;
  color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.hv2-faq-q .mk {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--teal-050);
  color: var(--teal-dark); display: grid; place-items: center; font-size: 1.2rem; line-height: 1;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.hv2-faq-q[aria-expanded="true"] .mk { transform: rotate(45deg); background: var(--teal); color: #fff; }
.hv2-faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.hv2-faq-a__inner { padding: 0 1.4rem 1.3rem; color: var(--muted); }

/* ============================================================
   APPOINTMENT CTA — reuses .form-card / .split from main.css
   ============================================================ */
.hv2-cta .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; }
.hv2-cta__info a { color: var(--teal); }
.hv2-cta__contact { display: grid; gap: 1rem; margin-top: 1.4rem; }
.hv2-cta__contact li { display: flex; gap: .8rem; align-items: flex-start; list-style: none; }
.hv2-cta__contact .ico {
  width: 42px; height: 42px; border-radius: 10px; background: rgba(255,255,255,.08);
  display: grid; place-items: center; flex: 0 0 auto;
}
.hv2-cta__contact .ico img { width: 20px; height: 20px; }
.hv2-cta__contact strong { color: #fff; display: block; font-size: .92rem; }
.hv2-cta__contact span, .hv2-cta__contact a { color: #c7d2e8; font-size: .95rem; }

/* ============================================================
   HERO SLIDER (surgery-first)
   No-JS: track has no transform; viewport overflow hides slides
   2 & 3, so slide 1 is shown fully. Controls appear only when JS
   marks the slider .is-ready.
   ============================================================ */
.hv2-slider { position: relative; }
.hv2-slider__viewport { overflow: hidden; }
.hv2-slider__track { display: flex; }
.js-anim .hv2-slider__track { transition: transform .6s cubic-bezier(.22,.61,.36,1); }

.hv2-slide { flex: 0 0 100%; min-width: 100%; }
.hv2-slide .container {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-5);
  align-items: center; padding-top: var(--space-6); padding-bottom: 2.5rem;
}
.hv2-slide__title {
  font-size: clamp(2.2rem, 4.8vw, 3.6rem); line-height: 1.07;
  letter-spacing: -.02em; font-weight: 800; color: var(--navy); margin-bottom: 1rem;
}
.hv2-slide__title em { color: var(--teal-dark); font-style: normal; }
.hv2-slide__copy .lead { max-width: 46ch; margin-bottom: 0; }
.hv2-slide__actions { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hv2-slide__media { position: relative; }
.hv2-slide__frame {
  border-radius: var(--radius-2xl); overflow: hidden;
  box-shadow: var(--shadow-lg); background: #fff; aspect-ratio: 16 / 11;
}
.hv2-slide__frame img { width: 100%; height: 100%; object-fit: cover; }

/* Controls */
.hv2-slider__controls {
  display: none; align-items: center; justify-content: center; gap: 1rem;
  padding-top: .3rem; padding-bottom: 1.3rem;
}
.hv2-slider.is-ready .hv2-slider__controls { display: flex; }
.hv2-slider__arrow {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--navy); font-size: 1.6rem; line-height: 1;
  cursor: pointer; box-shadow: var(--shadow-sm); transition: all .18s ease;
  display: grid; place-items: center;
}
.hv2-slider__arrow:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.hv2-slider__arrow:focus-visible { outline: 3px solid rgba(1,189,178,.4); outline-offset: 2px; }
.hv2-slider__dots { display: flex; gap: .55rem; }
.hv2-slider__dot {
  width: 11px; height: 11px; border-radius: 999px; border: 0; padding: 0;
  background: var(--navy-050); cursor: pointer; transition: all .2s ease;
}
.hv2-slider__dot:hover { background: var(--teal-100); }
.hv2-slider__dot.is-active { width: 30px; background: var(--teal); }
.hv2-slider__dot:focus-visible { outline: 3px solid rgba(1,189,178,.4); outline-offset: 2px; }

.hv2-slider .hv2-hero__trust { padding-bottom: var(--space-6); }

/* ============================================================
   TREATMENT TILE — service links (all procedures visible)
   ============================================================ */
.hv2-tile__svc { list-style: none; margin-bottom: 0; margin-top: auto; }
.hv2-tile__svc li { position: relative; padding-left: 1.1rem; font-size: .92rem; margin-bottom: .45rem; }
.hv2-tile__svc li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.hv2-tile__svc a { color: var(--slate); font-weight: 500; }
.hv2-tile__svc a:hover { color: var(--teal-dark); }

/* ============================================================
   BLOG — media cards get body copy
   ============================================================ */
.hv2-blog .media-card p { color: var(--muted); font-size: .92rem; margin: 0 0 1rem; }
.hv2-blog .media-card .card__link { margin-top: auto; font-weight: 600; color: var(--teal-dark); }

/* ============================================================
   FLOATING CONTACT BUTTON (FAB)
   ============================================================ */
.hv2-fab {
  position: fixed; right: 20px; bottom: 24px; z-index: 80;
  display: flex; flex-direction: column; align-items: flex-end; gap: .7rem;
}
.hv2-fab__menu { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
/* When JS is present it removes [hidden] and animates via .is-open */
.hv2-fab__menu:not([hidden]) {
  opacity: 0; visibility: hidden; transform: translateY(12px);
  pointer-events: none; transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.hv2-fab.is-open .hv2-fab__menu:not([hidden]) {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
.hv2-fab__action {
  display: inline-flex; align-items: center; gap: .6rem;
  background: #fff; color: var(--navy); font-weight: 600; font-size: .92rem;
  padding: .7rem 1.1rem; border-radius: 999px; box-shadow: var(--shadow);
  white-space: nowrap; border: 1px solid var(--line);
}
.hv2-fab__action:hover { color: var(--teal-dark); transform: translateX(-2px); }
.hv2-fab__action--book { background: var(--navy); color: #fff; border-color: var(--navy); }
.hv2-fab__action--book:hover { background: var(--navy-2); color: #fff; }
.hv2-fab__ico { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; }
.hv2-fab__ico img { width: 18px; height: 18px; }
.hv2-fab__action--book .hv2-fab__ico img { filter: brightness(0) invert(1); }

.hv2-fab__toggle {
  width: 60px; height: 60px; border-radius: 50%; background: var(--teal);
  border: 0; cursor: pointer; box-shadow: var(--shadow-lg);
  display: grid; place-items: center; position: relative; transition: background .18s ease;
}
.hv2-fab__toggle:hover { background: var(--teal-dark); }
.hv2-fab__toggle:focus-visible { outline: 3px solid rgba(1,189,178,.5); outline-offset: 3px; }
.hv2-fab__toggle-ico img { width: 26px; height: 26px; filter: brightness(0) invert(1); }
.hv2-fab__close {
  position: absolute; inset: 0; display: none; place-items: center;
  color: #fff; font-size: 2rem; line-height: 1;
}
.hv2-fab.is-open .hv2-fab__toggle-ico { display: none; }
.hv2-fab.is-open .hv2-fab__close { display: grid; }
/* gentle pulse (JS present only; disabled under reduced-motion below) */
.js-anim .hv2-fab__toggle::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(1,189,178,.55); animation: hv2FabPulse 2.4s ease-out infinite;
}
.js-anim .hv2-fab.is-open .hv2-fab__toggle::after { animation: none; }
@keyframes hv2FabPulse {
  0%   { box-shadow: 0 0 0 0 rgba(1,189,178,.5); }
  70%  { box-shadow: 0 0 0 16px rgba(1,189,178,0); }
  100% { box-shadow: 0 0 0 0 rgba(1,189,178,0); }
}

/* ============================================================
   STATS BAND v3 — stronger trust centrepiece
   ============================================================ */
.hv2-stats--v3 .container { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.hv2-stats--v3 .hv2-stats__grid { gap: var(--space-3); }
.hv2-stats--v3 .hv2-stat {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-xl);
  padding: 2rem 1.2rem;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.hv2-stats--v3 .hv2-stat:hover { transform: translateY(-4px); background: rgba(255,255,255,.08); border-color: rgba(1,189,178,.4); }
.hv2-stats--v3 .hv2-stat + .hv2-stat::before { display: none; }  /* cards, no dividers */
.hv2-stats--v3 .hv2-stat strong {
  font-size: clamp(2.8rem, 5.2vw, 4.2rem);
  font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em;
}
.hv2-stats--v3 .hv2-stat span {
  color: #cdd8ef; font-size: .9rem; text-transform: uppercase;
  letter-spacing: .1em; margin-top: .8rem; display: block; font-weight: 600;
}
.hv2-stats--v3 .hv2-stat strong { display:inline-flex; align-items:baseline; white-space:nowrap; }
.hv2-stats--v3 .hv2-stat strong .u { font-size:.6em; color:var(--teal); font-weight:800; line-height:1; margin-left:.04em; }
.hv2-stats--v3 .hv2-stat--flagship { background:rgba(1,189,178,.10); border-color:rgba(1,189,178,.5); transform:scale(1.04); }
.hv2-stats--v3 .hv2-stat--flagship:hover { transform:scale(1.04) translateY(-4px); }
.hv2-stats--v3 .hv2-stat--flagship strong { color:#fff; }
@media (max-width:600px){ .hv2-stats--v3 .hv2-stat--flagship{transform:none;} .hv2-stats--v3 .hv2-stat--flagship:hover{transform:translateY(-4px);} }

/* ------------------------------------------------------------
   STATS MERGED INTO THE CONSULT SECTION
   The stats used to be their own full-width navy band stacked between the
   hero and the consult block. They now sit inside the consult container as a
   navy panel, so the doctor split and the trust figures read as one unit.
   Same .hv2-stats / .hv2-stat--v3 card styling — only the wrapper changes.
   ------------------------------------------------------------ */
.hv2-consult__stats {
  /* space-6 above, section padding (space-7) below: the panel groups with the
     split it belongs to, and clears the overhanging "23+ years" badge. */
  margin-top: var(--space-6);
  padding: var(--space-4);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow);
}
.hv2-consult__stats-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  align-items: end;
  margin-bottom: var(--space-4);
}
.hv2-consult__stats-head .eyebrow { display: block; color: var(--teal); }
.hv2-consult__stats-head h2 {
  color: #fff; margin: 0;
  font-size: clamp(1.8rem, 2.7vw, 2.5rem);
}
.hv2-consult__stats-head .lead { color: #cdd8ef; margin: 0; }
@media (max-width: 900px) {
  .hv2-consult__stats { padding: var(--space-3); margin-top: var(--space-4); }
  .hv2-consult__stats-head { grid-template-columns: 1fr; align-items: start; }
}
/* ============================================================
   SERVICES — flat grid, one card per service (8 cards, 4/2/1 cols)
   Each card = exact heading + verbatim condition bullet list.
   ============================================================ */
.hv2-svc__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.hv2-svc-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: 1.7rem 1.5rem; box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  display: flex; flex-direction: column;
}
.hv2-svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--teal-100); }
.hv2-svc-card__ico {
  width: 62px; height: 62px; border-radius: 16px; background: var(--teal-050);
  display: grid; place-items: center; margin-bottom: 1.1rem;
}
.hv2-svc-card__ico img { width: 34px; height: 34px; }
.hv2-svc-card h3 { font-size: 1.12rem; margin-bottom: .8rem; }
.hv2-svc-card ul { list-style: none; margin: 0 0 1.2rem; display: grid; gap: .45rem; }
.hv2-svc-card li { position: relative; padding-left: 1.25rem; font-size: .9rem; color: var(--slate); line-height: 1.4; }
.hv2-svc-card li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.hv2-svc-card .card__link { margin-top: auto; font-weight: 600; color: var(--teal-dark); }

/* ============================================================
   OPENING HOURS — per-day list (in navy appointment section)
   ============================================================ */
.hv2-hours-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); padding: 1.3rem 1.5rem; margin-top: 1.6rem; max-width: 420px;
}
.hv2-hours-card__title {
  display: flex; align-items: center; gap: .6rem; color: #fff !important;
  font-size: 1.1rem; margin: 0 0 .8rem;
}
.hv2-hours-card__title .ico {
  width: 34px; height: 34px; border-radius: 9px; background: rgba(1,189,178,.16);
  display: grid; place-items: center; flex: 0 0 auto;
}
.hv2-hours-card__title .ico img { width: 18px; height: 18px; }
.hv2-hours-list { list-style: none; }
.hv2-hours-list li {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
  padding: .65rem .3rem; border-radius: var(--radius); border-bottom: 1px solid rgba(255,255,255,.1);
  font-size: .94rem;
}
.hv2-hours-list li:last-child { border-bottom: 0; }
.hv2-hours-list .d { color: #c7d2e8; font-weight: 600; }
.hv2-hours-list .d .tag {
  display: inline-block; margin-left: .5rem; font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--teal);
  background: rgba(1,189,178,.18); border-radius: 999px; padding: .1rem .5rem; vertical-align: middle;
}
.hv2-hours-list .t {
  color: #fff; font-weight: 600; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: .15rem;
  font-variant-numeric: tabular-nums;
}
.hv2-hours-list .t .r { white-space: nowrap; font-size: .92rem; }
.hv2-hours-list .t .r + .r { color: #c7d2e8; font-weight: 500; font-size: .88rem; }

/* Weekend rows visually distinct */
.hv2-hours-list li.is-weekend { background: rgba(255,255,255,.03); }
.hv2-hours-list li.is-weekend .d { color: #a9b6d6; }

/* Today's row highlight (JS adds .is-today) */
.hv2-hours-list li.is-today { background: rgba(1,189,178,.14); box-shadow: inset 3px 0 0 var(--teal); }
.hv2-hours-list li.is-today .d { color: var(--teal); }
.hv2-hours-list li.is-today .t .r { color: #fff; }

/* On wider cards, put the two shifts on ONE line with a dot separator */
@media (min-width: 480px) {
  .hv2-hours-list .t { flex-direction: row; align-items: center; gap: .5rem; }
  .hv2-hours-list .t .r + .r::before { content: "\00b7"; color: var(--teal); font-weight: 700; margin-right: .5rem; }
}

/* ============================================================
   GOLD MEDALIST badge (moved from stats band to consult section)
   ============================================================ */
.hv2-consult__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; }
.hv2-medal-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .55rem .9rem; border-radius: var(--radius);
  background: var(--teal-050); border: 1px solid var(--teal-100);
}
.hv2-medal-badge__star { color: var(--teal-dark); font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.hv2-medal-badge__txt { display: flex; flex-direction: column; font-size: .78rem; color: var(--slate); line-height: 1.3; }
.hv2-medal-badge__txt strong { color: var(--navy); font-size: .95rem; }

/* ============================================================
   SCROLL / LOAD ANIMATIONS  (progressive enhancement)
   The hidden start-state is applied ONLY when <html> has the
   .js-anim class, which home-v2.js adds on load. So no-JS users
   and users who never reach a section still see all content.
   ============================================================ */

/* base reveal: fade + slide up, animate once */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js-anim .reveal.is-in { opacity: 1; transform: none; }

/* directional variants */
.js-anim .reveal--left  { transform: translateX(-32px); }
.js-anim .reveal--right { transform: translateX(32px); }
.js-anim .reveal--left.is-in,
.js-anim .reveal--right.is-in { transform: none; }

/* staggered children: JS sets --i on each child */
.js-anim .stagger > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js-anim .stagger.is-in > * { opacity: 1; transform: none; }

/* hero elements animate in on load (sequential) */
.js-anim .hv2-hero .reveal-load {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.js-anim.is-loaded .hv2-hero .reveal-load { opacity: 1; transform: none; }
.js-anim .hv2-hero__media.reveal-load { transform: translateY(22px) scale(.97); }
.js-anim.is-loaded .hv2-hero__media.reveal-load { transform: none; }

/* Reduced motion: show everything instantly, no movement */
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal,
  .js-anim .reveal--left,
  .js-anim .reveal--right,
  .js-anim .stagger > *,
  .js-anim .hv2-hero .reveal-load,
  .js-anim .hv2-hero__media.reveal-load {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js-anim .hv2-slider__track { transition: none !important; }
  .js-anim .hv2-fab__toggle::after { animation: none !important; }
  .hv2-fab__menu:not([hidden]) { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .hv2-treat__grid { grid-template-columns: repeat(2, 1fr); }
  .hv2-svc__grid { grid-template-columns: repeat(2, 1fr); }
  .hv2-choose .container { grid-template-columns: 1fr; gap: var(--space-4); }
}
@media (max-width: 900px) {
  .hv2-slide .container { grid-template-columns: 1fr; gap: var(--space-4); padding-top: var(--space-5); padding-bottom: 1.5rem; }
  .hv2-slide__copy { order: 2; }
  .hv2-slide__media { order: 1; max-width: 520px; margin: 0 auto; width: 100%; }
  .hv2-consult .split { gap: var(--space-5); }
  .hv2-symp__grid { grid-template-columns: 1fr; }
  .hv2-cta .container { grid-template-columns: 1fr; }
  .hv2-stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-3); }
  .hv2-stat:nth-child(3)::before, .hv2-stat:nth-child(1)::before { display: none; }
}
@media (max-width: 600px) {
  .hv2 { padding: var(--space-5) 0; }
  .hv2-treat__grid { grid-template-columns: 1fr; }
  .hv2-svc__grid { grid-template-columns: 1fr; }
  .hv2-stats__grid { grid-template-columns: 1fr; }
  .hv2-choose__grid { grid-template-columns: 1fr; }
  .hv2-slide__title { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .hv2-slide__frame { aspect-ratio: 16 / 12; }
  .hv2-hero__trust { gap: .8rem; }
  .hv2-hero__trust .t { min-width: 0; padding: 1rem 1.1rem; }
  .hv2-hero__pill { right: 8px; font-size: .78rem; }
  .hv2-stat + .hv2-stat::before { display: none; }
  /* FAB: keep clear of the right edge and content on small screens */
  .hv2-fab { right: 14px; bottom: 16px; }
  .hv2-fab__toggle { width: 54px; height: 54px; }
  .hv2-fab__action { font-size: .86rem; padding: .6rem .95rem; }
}

/* ============================================================
   MOBILE / TOUCH PASS (device audit at 320-1024)
   Additive, all inside max-width queries — the approved desktop
   rendering above 1024px is untouched.
   ============================================================ */
/* The FAB is a flex column whose box also spans the (closed, invisible)
   action menu above the button — 197x165 CSS px on a phone. With default
   pointer-events that whole box swallows taps, leaving a dead zone over
   the bottom-right of the viewport where blog-card titles and "Read more"
   links sit. Let the box pass taps through and re-arm only the controls.
   Paint is unchanged; the open menu keeps its own pointer-events: auto
   rule above. */
.hv2-fab { pointer-events: none; }
.hv2-fab__toggle { pointer-events: auto; }

@media (max-width: 1024px) {
  /* "Today" pill rendered at 9.9px — under the 12px legibility floor. */
  .hv2-hours-list .d .tag { font-size: .78rem; }
}
@media (max-width: 1024px) {
  /* Card body copy under 16px on a phone/tablet is below the
     comfortable reading floor. */
  .hv2-blog .media-card p { font-size: 1rem; }
  .hv2-svc-card li { font-size: 1rem; }
  .hv2-tile__svc li { font-size: 1rem; }
  .hv2-feature p { font-size: 1rem; }
  .hv2-hours-list li { font-size: 1rem; }
}


/* ======== css/hero-b.css ======== */
/* ============================================================
   Gurgaon ENT Clinic — HERO OPTION B: "Split Stage + Service Rail"
   ADDITIVE stylesheet. Loaded AFTER main.css + home-v2.css on
   html/hero-b.html ONLY. Styles the hero section and nothing else.

   Consumes existing tokens only (main.css :root + home-v2.css :root).
   No new brand hex values are declared anywhere in this file — the two
   local variables below are timing/layout, and every colour is either a
   token or a color-mix() of a token.
   ============================================================ */

.hb-hero {
  /* local, non-brand variables (timing + layout only) */
  --hb-dwell: 6000ms;     /* auto-rotation dwell per service */
  --hb-mask-out: 260ms;   /* line wipe-down before swap        */
  --hb-mask-in: 520ms;    /* line wipe-up after swap           */
  --hb-step: 80ms;        /* per-line stagger                  */
  --hb-rail-w: 196px;

  position: relative;
  padding-top: var(--space-6);
}

/* ---------- layout ---------- */
.hb-hero__grid {
  display: grid;
  grid-template-columns: var(--hb-rail-w) minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-areas: "rail copy media";
  gap: var(--space-4) var(--space-4);
  align-items: center;
  padding-bottom: var(--space-5);
}
.hb-hero__copy  { grid-area: copy; }
.hb-hero__media { grid-area: media; position: relative; }
.hb-rail        { grid-area: rail; align-self: center; }

/* ---------- stable H1 (never rotates) ---------- */
.hb-hero__h1 {
  font-size: clamp(1.45rem, 2.1vw, 1.8rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 0 0 1.25rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--navy) 12%, transparent);
  max-width: 22ch;
}

/* ============================================================
   STAGE — the rotating service block. Mask-up reveal only:
   each line sits inside an overflow-hidden mask and wipes
   vertically. Nothing slides horizontally between services — the only
   translateX in this file is a 3px hover nudge on the link arrow glyph.
   ============================================================ */
/* The stage reserves the height of the tallest service so the CTAs
   below never move when the copy swaps. Slack collects at the bottom
   of the block, not as a gap between lines. */
.hb-stage { margin: 0 0 1.7rem; min-height: 244px; }

.hb-mask {
  overflow: hidden;
  margin: 0 0 .55rem;
  /* the mask box itself never moves — only its child does */
}
.hb-mask__i {
  display: block;
  will-change: transform;
}

.hb-stage__eyebrow .hb-mask__i { margin-bottom: 0; }
.hb-stage__eyebrow { margin-bottom: .35rem; }

/* padding gives the focus ring room inside the clipping (padding) box */
.hb-stage__more { padding: 5px; margin-left: -5px; }

.hb-stage__name {
  font-family: var(--font);
  font-size: clamp(2rem, 3.5vw, 2.9rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--navy);
}

.hb-stage__benefit {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 42ch;
  margin-bottom: .9rem;
}

/* Inline (not flex) so the label wraps as normal text on narrow screens */
.hb-more {
  font-weight: 600;
  color: var(--teal-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, var(--teal) 40%, transparent);
  transition: color .18s ease, text-decoration-color .18s ease;
}
.hb-more:hover { color: var(--navy); text-decoration-color: var(--navy); }
.hb-more:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--teal) 45%, transparent);
  outline-offset: 3px;
  border-radius: 4px;
}
.hb-more__arw { display: inline-block; transition: transform .18s ease; }
.hb-more:hover .hb-more__arw { transform: translateX(3px); }

.hb-hero__actions {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* ---- mask animation states (JS toggles .is-swapping on .hb-stage) ---- */
.js-anim .hb-stage .hb-mask__i {
  transform: translateY(0);
  transition: transform var(--hb-mask-in) cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--i, 0) * var(--hb-step));
}
.js-anim .hb-stage.is-swapping .hb-mask__i {
  transform: translateY(105%);
  transition-duration: var(--hb-mask-out);
  transition-delay: 0ms;
}
/* first paint: lines start hidden, JS releases them */
.js-anim .hb-stage.is-preload .hb-mask__i {
  transform: translateY(105%);
  transition: none;
}

/* ============================================================
   MEDIA — stacked images, cross-dissolve only (no sliding)
   ============================================================ */
.hb-hero__frame {
  position: relative;
  aspect-ratio: 4 / 3;              /* reserves space -> no CLS */
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--bg-soft-2);
  box-shadow: var(--shadow-lg);
}
.hb-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .55s ease;
}
.hb-shot.is-active { opacity: 1; }
/* No-JS / pre-JS: the first image must be visible even though the
   .is-active class is also what JS toggles — it is already in the HTML. */

.hb-hero__pill { right: -6px; top: 22px; }

/* ============================================================
   RAIL — all six procedures, permanently visible, real links
   ============================================================ */
.hb-rail__label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  margin: 0 0 .8rem;
  padding-left: 14px;
}
.hb-rail__list {
  list-style: none;
  display: grid;
  gap: 2px;
  border-left: 1px solid color-mix(in srgb, var(--navy) 14%, transparent);
}
.hb-rail__item { position: relative; }

.hb-rail__link {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: .55rem;
  padding: .6rem .7rem .6rem 14px;
  border-radius: 0 10px 10px 0;
  color: var(--slate);
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.25;
  transition: background .18s ease, color .18s ease;
}
.hb-rail__num {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--muted) 75%, transparent);
}
.hb-rail__link:hover { background: var(--teal-050); color: var(--navy); }
.hb-rail__link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--teal) 45%, transparent);
  outline-offset: 1px;
  border-radius: 10px;
}
.hb-rail__item.is-active .hb-rail__link {
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.hb-rail__item.is-active .hb-rail__num { color: var(--teal-dark); }

/* progress indicator: a bar that fills along the active item */
.hb-rail__prog {
  position: absolute;
  left: -2px; top: 0; bottom: 0;
  width: 4px;
  border-radius: 4px;
  overflow: hidden;
  background: color-mix(in srgb, var(--teal) 18%, transparent);
  opacity: 0;
  transition: opacity .2s ease;
}
.hb-rail__item.is-active .hb-rail__prog { opacity: 1; }
.hb-rail__prog i {
  display: block;
  width: 100%; height: 100%;
  background: var(--teal);
  transform: scaleY(0);
  transform-origin: 50% 0;
}
.hb-rail__item.is-active .hb-rail__prog i {
  animation: hb-prog-y var(--hb-dwell) linear forwards;
}
.hb-hero.is-paused .hb-rail__item.is-active .hb-rail__prog i,
.hb-hero.is-static .hb-rail__item.is-active .hb-rail__prog i {
  animation-play-state: paused;
}
/* When rotation is off entirely, still mark the active item clearly. */
.hb-hero.is-static .hb-rail__item.is-active .hb-rail__prog i { transform: scaleY(1); }

@keyframes hb-prog-y {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes hb-prog-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- tablet: rail becomes a full-width chip row under the split --- */
@media (max-width: 1060px) {
  .hb-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    grid-template-areas:
      "copy media"
      "rail rail";
    gap: var(--space-4) var(--space-4);
  }
  .hb-stage { min-height: 190px; }
  .hb-rail { align-self: start; }
  .hb-rail__label { padding-left: 0; }
  .hb-rail__list {
    display: flex;
    flex-wrap: wrap;          /* wraps, never scrolls sideways */
    gap: .5rem;
    border-left: 0;
  }
  .hb-rail__item { flex: 1 1 auto; }
  .hb-rail__link {
    padding: .6rem .95rem .7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--white) 70%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--navy) 10%, transparent);
    overflow: hidden;
  }
  .hb-rail__item.is-active .hb-rail__link {
    box-shadow: var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb, var(--teal) 45%, transparent);
  }
  .hb-rail__prog {
    left: 0; right: 0; top: auto; bottom: 0;
    width: auto; height: 3px;
  }
  .hb-rail__prog i {
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
  .hb-rail__item.is-active .hb-rail__prog i { animation-name: hb-prog-x; }
  .hb-hero.is-static .hb-rail__item.is-active .hb-rail__prog i { transform: scaleX(1); }
}

/* --- mobile: single column, rail sits directly under the copy --- */
@media (max-width: 780px) {
  .hb-hero { padding-top: var(--space-5); }
  .hb-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "rail"
      "media";
    gap: var(--space-3);
    padding-bottom: var(--space-4);
  }
  .hb-hero__h1 { max-width: none; }
  .hb-hero__media { max-width: 520px; margin: 0 auto; width: 100%; }
  .hb-stage { min-height: 187px; margin-bottom: .4rem; }  /* still reserved, just shorter */
  .hb-hero__actions { margin-top: 1.1rem; }
}

@media (max-width: 600px) {
  .hb-hero__h1 { font-size: 1.3rem; margin-bottom: 1rem; padding-bottom: .9rem; }
  .hb-stage { min-height: 238px; margin-bottom: .3rem; }
  .hb-stage__name { font-size: clamp(1.8rem, 8vw, 2.3rem); }
  .hb-stage__benefit { font-size: 1rem; }
  .hb-hero__frame { aspect-ratio: 16 / 12; }
  .hb-hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .hb-rail__list { gap: .4rem; }
  .hb-rail__item { flex: 1 1 46%; }     /* two per row at 375px, no h-scroll */
  .hb-rail__link {
    font-size: .8rem;
    padding: .55rem .7rem .65rem;
    grid-template-columns: 1fr;
    gap: .15rem;
    text-align: left;
  }
  .hb-rail__num { display: none; }
  .hb-hero__pill { right: 8px; font-size: .78rem; }
}

/* ============================================================
   REDUCED MOTION — no rotation, no wipes, first service shown
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js-anim .hb-stage .hb-mask__i,
  .js-anim .hb-stage.is-swapping .hb-mask__i,
  .js-anim .hb-stage.is-preload .hb-mask__i {
    transform: none !important;
    transition: none !important;
  }
  .hb-shot { transition: none !important; }
  .hb-more__arw { transition: none !important; }
  .hb-rail__item.is-active .hb-rail__prog i {
    animation: none !important;
    transform: scaleY(1);
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1060px) {
  .hb-rail__item.is-active .hb-rail__prog i { transform: scaleX(1); }
}

/* ============================================================
   PORT FIX (defect b) — Laravel port only, appended below the
   byte-identical copy of the approved mockup stylesheet.

   Problem: the fixed floating call button (.hv2-fab, home-v2.css:
   right:14px / bottom:16px, 54px toggle at <=560px) sits over the
   bottom-right corner of the viewport, i.e. x 307-361 on a 375px
   screen. The rail's right-hand chips run to x=355, so at top-scroll
   on taller 375px devices (measured: 375x812 and 375x896) the FAB
   covers a rail chip. Because the FAB is viewport-anchored and the
   chips are document-anchored, no vertical padding/margin can clear
   it at every viewport height and scroll offset — only horizontal
   clearance can. So the chip row reserves the FAB's width on the
   right at <=480px. Deviation from the mockup is noted in the report.
   ============================================================ */
@media (max-width: 480px) {
  .hb-rail__list {
    padding-right: 62px;   /* FAB: 14px offset + 54px toggle, minus the 20px container gutter, + breathing room */
    padding-bottom: 4px;
  }
}

/* ============================================================
   MOBILE / TOUCH PASS (device audit at 320-1024)
   Two rail labels rendered under the 12px legibility floor
   (.hb-rail__label 11.5px, .hb-rail__num 10.9px). Bumped inside a
   max-width query so the approved desktop rail is untouched.
   ============================================================ */
@media (max-width: 1024px) {
  .hb-rail__label { font-size: .8rem; }
  .hb-rail__num { font-size: .78rem; }
}