/*! Gurgaon ENT Clinic — CSS BUNDLE (bundle-page.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/pages-v2.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/pages-v2.css ======== */
/* ============================================================
   Gurgaon ENT Clinic — INNER PAGES v2 (ADDITIVE stylesheet)
   Loaded AFTER main.css on the *-v2 inner pages.
   Consumes main.css tokens (navy #142959 / teal #01bdb2, Outfit)
   and mirrors the home-v2 language (airy --space-7 rhythm,
   --radius-xl / --radius-2xl, pill CTAs, bordered cards).
   Introduces v2-only supporting tokens shared with home-v2
   ONLY if home-v2.css is NOT also loaded on the page (these
   pages load main.css + pages-v2.css, not home-v2.css).
   Does NOT redefine main.css tokens. No raw brand hex in
   components — everything references a token.
   ============================================================ */

:root {
  /* Supporting tints (mirror home-v2.css values so inner pages
     match the homepage exactly; home-v2.css is not loaded here). */
  --teal-050: #e6f7f5;
  --teal-100: #ccf0ed;
  --navy-050: #eef2fa;
  --navy-tint: #1b356e;
  --sand: #fbfaf7;

  --radius-xl: 30px;
  --radius-2xl: 40px;
  --space-7: 6rem;
}

/* overflow guard (same rationale as home-v2: reveal transforms /
   off-canvas nav can push scrollWidth past the viewport). */
html, body { overflow-x: clip; }

/* ============================================================
   PAGE HERO BAND — compact navy / soft gradient
   ============================================================ */
.pv2-hero {
  background:
    radial-gradient(900px 460px at 90% -30%, rgba(1,189,178,.16) 0%, rgba(1,189,178,0) 60%),
    linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-tint) 100%);
  color: #fff;
  padding: var(--space-6) 0 var(--space-5);
  position: relative;
}
.pv2-hero .eyebrow { color: var(--teal); }
.pv2-hero h1 {
  color: #fff; margin: 0 0 .4rem;
  font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 800; letter-spacing: -.015em;
}
.pv2-hero__lead { color: #c3cee6; max-width: 640px; font-size: 1.08rem; margin: .3rem 0 0; }
.pv2-breadcrumb {
  list-style: none; display: flex; flex-wrap: wrap; gap: .35rem;
  font-size: .85rem; color: #9fb0d0; margin: 1.1rem 0 0; padding: 0;
}
.pv2-breadcrumb a { color: var(--teal); }
.pv2-breadcrumb a:hover { color: #fff; }
.pv2-breadcrumb li { display: inline-flex; align-items: center; }
.pv2-breadcrumb li::after { content: "/"; margin-left: .55rem; color: #55688f; }
.pv2-breadcrumb li:last-child { color: #cdd8ef; }
.pv2-breadcrumb li:last-child::after { content: ""; }

/* Post/article meta line under the hero title */
.pv2-hero__meta {
  display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center;
  margin-top: 1rem; font-size: .9rem; color: #c3cee6;
}
.pv2-hero__meta .m { display: inline-flex; align-items: center; gap: .45rem; }
.pv2-hero__meta .chip {
  background: rgba(1,189,178,.18); color: var(--teal);
  border-radius: 999px; padding: .25rem .8rem; font-weight: 600; font-size: .8rem;
}

/* ============================================================
   SECTION SCAFFOLD (reused across inner pages)
   ============================================================ */
.pv2 { padding: var(--space-7) 0; }
.pv2--tight { padding: var(--space-6) 0; }
.pv2--soft { background: var(--bg-soft); }
.pv2--sand { background: var(--sand); }
.pv2__head { max-width: 720px; margin: 0 auto var(--space-5); text-align: center; }
.pv2__head h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 800; letter-spacing: -.015em; }

/* ============================================================
   ARTICLE / CONTENT LAYOUT (main + sidebar)
   ============================================================ */
.pv2-layout {
  display: grid; grid-template-columns: minmax(0,1fr) 340px;
  gap: var(--space-5); align-items: start;
}
.pv2-layout--wide { grid-template-columns: minmax(0,1fr) 320px; }

/* ============================================================
   PROSE — styles legacy WordPress body HTML into v2 language
   ============================================================ */
.pv2-prose { color: var(--text); font-size: 1.05rem; }
.pv2-prose > *:first-child { margin-top: 0; }
.pv2-prose p { margin: 0 0 1.15rem; }
.pv2-prose h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: -.01em;
  margin: 2.3rem 0 .9rem; color: var(--navy);
}
.pv2-prose h3 {
  font-size: 1.28rem; font-weight: 700; margin: 1.9rem 0 .7rem; color: var(--navy);
}
.pv2-prose h3 b, .pv2-prose h2 b { font-weight: inherit; }
.pv2-prose h4 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 .6rem; color: var(--navy); }
.pv2-prose h2 + p, .pv2-prose h3 + p, .pv2-prose h4 + p { margin-top: 0; }
.pv2-prose a { color: var(--teal-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pv2-prose a:hover { color: var(--navy); }
.pv2-prose ul, .pv2-prose ol { margin: 0 0 1.3rem; padding-left: 0; }
.pv2-prose ul { list-style: none; display: grid; gap: .6rem; }
.pv2-prose ul li { position: relative; padding-left: 1.7rem; color: var(--slate); }
.pv2-prose ul li::before {
  content: ""; position: absolute; left: .1rem; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
}
.pv2-prose ol { list-style: decimal; padding-left: 1.4rem; display: grid; gap: .5rem; }
.pv2-prose ol li { color: var(--slate); padding-left: .3rem; }
.pv2-prose ol li::marker { color: var(--teal-dark); font-weight: 700; }
/* Legacy WordPress body images vary wildly (500x500 up to 2000px+). NEVER
   force width:100% — that upscaled a 500px image to ~1100px and shipped a
   visibly pixellated page. Scale down to fit, never up; cap the height so a
   single photo can't dominate the column; centre anything narrower. */
.pv2-prose img {
  border-radius: var(--radius-lg); margin: 1.6rem auto;
  box-shadow: var(--shadow-sm);
  display: block;
  width: auto; height: auto;
  max-width: 100%; max-height: 420px;
  object-fit: contain;
}
.pv2-prose picture { display: block; text-align: center; }

/* ============================================================
   ICON FEATURE BLOCKS
   Imported pages express feature lists as a repeating triplet:
   <figure><img 512x512 icon></figure><h4>Label</h4><p>Copy</p>.
   Under the generic image rule those 512px icons rendered ~420px
   tall, so each item filled a screen. Cap the icon and let the
   triplets sit side by side.
   ============================================================ */
.pv2-prose figure:has(img[width="512"][height="512"]) {
  margin: 0 auto .6rem; text-align: center;
}
.pv2-prose figure:has(img[width="512"][height="512"]) img,
.pv2-prose img[width="512"][height="512"] {
  max-height: 68px; width: auto; margin: 0 auto;
  box-shadow: none; border-radius: 0;
}
/* Deliberately NOT multi-column: the triplets are flat siblings, and a
   column-count on the prose container scattered the whole article. Normal
   vertical flow with a small icon is compact enough and cannot break. */
.pv2-prose figure:has(img[width="512"][height="512"]) + h4 {
  text-align: center; margin: .2rem 0 .4rem; font-size: 1.05rem; color: var(--navy);
}
.pv2-prose figure:has(img[width="512"][height="512"]) + h4 + p {
  text-align: center; color: var(--muted); font-size: .95rem; margin-bottom: 1.6rem;
}
/* ------------------------------------------------------------
   ICON LIST ITEMS
   The other shape the import uses for a feature list is
   <ul><li><img icon><p>Label</p></li>… (sometimes with the pair
   wrapped in an <a>). Under the generic list + image rules that
   painted a bullet at the top of the row, floated the icon in the
   middle of the column and pushed the label hundreds of pixels
   below it. Render each item as a compact card instead: icon left,
   label beside it, no bullet, 2-3 across on desktop.
   :has() is required (Chrome 105+, Safari 15.4+, Firefox 121+);
   without it these items simply keep the old bullet-list look.

   Scope is deliberately tight: the image must be a direct child of
   the <li> (or of a direct-child <a>), and the item must carry no
   heading. Imported category pages list whole posts as
   <li><figure><a><img thumb></a></figure><h3>Title</h3><p>…</p>,
   and squeezing those article cards into a 56px icon row was a
   regression — the figure/heading shape is excluded here.
   ------------------------------------------------------------ */
.pv2-prose ul:has(> li > picture, > li > img, > li > a > picture, > li > a > img) {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .7rem;
}
.pv2-prose ul > li:has(> picture, > img, > a > picture, > a > img) {
  display: flex; align-items: center; gap: .8rem;
  margin: 0; padding: .7rem .85rem;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--navy); font-weight: 600; font-size: .98rem; line-height: 1.3;
}
.pv2-prose ul > li:has(> picture, > img, > a > picture, > a > img)::before { content: none; }
.pv2-prose ul > li:has(> picture, > img, > a > picture, > a > img) > a {
  display: flex; align-items: center; gap: .8rem;
  width: 100%; color: inherit; font-weight: inherit; text-decoration: none;
}
.pv2-prose ul > li:has(> picture, > img, > a > picture, > a > img) > a:hover { color: var(--teal-dark); }
.pv2-prose ul > li:has(> picture, > img, > a > picture, > a > img) picture {
  display: block; flex: 0 0 auto; line-height: 0;
}
/* The second selector only exists to outrank the 512x512 icon rule above,
   which is more specific than a plain descendant selector. */
.pv2-prose ul > li:has(> picture, > img, > a > picture, > a > img) img,
.pv2-prose ul > li:has(> picture, > img, > a > picture, > a > img) img[width][height] {
  width: 56px; height: 56px; max-width: 56px; max-height: 56px;
  margin: 0; object-fit: contain; border-radius: 0; box-shadow: none;
}
.pv2-prose ul > li:has(> picture, > img, > a > picture, > a > img) p { margin: 0; color: inherit; }
.pv2-prose ul > li:has(> picture, > img, > a > picture, > a > img) br { display: none; }
/* An item that also carries a heading is an article card, not an icon row. */
.pv2-prose ul > li:has(h1, h2, h3, h4, h5, h6) {
  display: list-item; padding: 0 0 0 1.7rem; background: none; border: 0;
}
@media (max-width: 560px) {
  .pv2-prose ul:has(> li > picture, > li > img, > li > a > picture, > li > a > img) {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .pv2-prose ul > li:has(> picture, > img, > a > picture, > a > img) {
    gap: .6rem; padding: .6rem .7rem; font-size: .9rem;
  }
  .pv2-prose ul > li:has(> picture, > img, > a > picture, > a > img) img,
  .pv2-prose ul > li:has(> picture, > img, > a > picture, > a > img) img[width][height] {
    width: 44px; height: 44px; max-width: 44px; max-height: 44px;
  }
}

.pv2-prose figure { margin: 1.6rem 0; text-align: center; }
.pv2-prose figure img { margin: 0 auto; }
.pv2-prose figcaption { font-size: .88rem; color: var(--muted); margin-top: .6rem; text-align: center; }
.pv2-prose blockquote {
  margin: 1.8rem 0; padding: 1.2rem 1.5rem;
  border-left: 4px solid var(--teal); background: var(--teal-050);
  border-radius: 0 var(--radius) var(--radius) 0; color: var(--slate); font-style: italic;
}
.pv2-prose blockquote p:last-child { margin: 0; }
.pv2-prose table {
  width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: .95rem;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.pv2-prose th, .pv2-prose td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.pv2-prose thead th { background: var(--navy); color: #fff; font-weight: 600; }
.pv2-prose tbody tr:nth-child(even) { background: var(--bg-soft); }
.pv2-prose tbody tr:last-child td { border-bottom: 0; }
.pv2-prose iframe {
  width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0;
  border-radius: var(--radius-lg); margin: 1.6rem 0; display: block; background: var(--bg-soft);
}
.pv2-prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.pv2-prose .pv2-lead {
  font-size: 1.18rem; color: var(--slate); font-weight: 500; margin-bottom: 1.4rem;
}

/* ============================================================
   SIDEBAR CARDS
   ============================================================ */
.pv2-sidebar { display: grid; gap: var(--space-3); position: sticky; top: 88px; }
.pv2-widget {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: 1.5rem 1.6rem; box-shadow: var(--shadow-sm);
}
.pv2-widget__title {
  font-size: 1.05rem; font-weight: 700; color: var(--navy);
  margin: 0 0 1rem; padding-bottom: .7rem; position: relative;
}
.pv2-widget__title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px;
  border-radius: 999px; background: var(--teal);
}
.pv2-proclist { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.pv2-proclist li { border-bottom: 1px solid var(--line); }
.pv2-proclist li:last-child { border-bottom: 0; }
.pv2-proclist a {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .7rem .2rem; font-size: .95rem; font-weight: 500; color: var(--slate);
}
.pv2-proclist a::after { content: "→"; color: var(--teal); opacity: 0; transform: translateX(-4px); transition: .18s ease; }
.pv2-proclist a:hover { color: var(--teal-dark); }
.pv2-proclist a:hover::after { opacity: 1; transform: none; }
.pv2-proclist a[aria-current="page"] { color: var(--teal-dark); font-weight: 700; }

/* Recent posts widget */
.pv2-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.pv2-recent li { display: flex; gap: .8rem; align-items: flex-start; }
.pv2-recent__thumb {
  width: 64px; height: 64px; border-radius: 14px; overflow: hidden;
  flex: 0 0 auto; background: var(--bg-soft);
}
.pv2-recent__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pv2-recent h4 { font-size: .9rem; line-height: 1.35; margin: 0 0 .2rem; font-weight: 600; }
.pv2-recent h4 a { color: var(--navy); }
.pv2-recent h4 a:hover { color: var(--teal-dark); }
.pv2-recent time { font-size: .78rem; color: var(--muted); }

/* Contact CTA card (navy) */
.pv2-cta-card {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-tint) 100%);
  color: #dbe3f3; border-radius: var(--radius-xl); padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow);
}
.pv2-cta-card h3 { color: #fff; font-size: 1.2rem; margin: 0 0 .5rem; }
.pv2-cta-card p { color: #c3cee6; font-size: .95rem; margin: 0 0 1.2rem; }
.pv2-cta-card .btn { width: 100%; justify-content: center; }
.pv2-cta-card__phone {
  display: block; margin-top: .9rem; text-align: center; color: var(--teal);
  font-weight: 700; font-size: 1.05rem;
}
.pv2-cta-card__phone:hover { color: #fff; }

/* Tag cloud */
.pv2-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.pv2-tags a {
  background: var(--bg-soft); border: 1px solid var(--line);
  padding: .35rem .75rem; border-radius: 999px; font-size: .8rem; color: var(--slate);
}
.pv2-tags a:hover { background: var(--teal); color: #fff; border-color: var(--teal); }

/* ============================================================
   LISTING GRID (blog / category) — reuses .media-card look
   ============================================================ */
.pv2-listing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.pv2-listing .media-card { border-radius: var(--radius-xl); overflow: hidden; }
.pv2-listing .media-card p { color: var(--muted); font-size: .92rem; margin: 0 0 1rem; }
.pv2-listing .media-card .card__link { margin-top: auto; font-weight: 600; color: var(--teal-dark); }
.pv2-listing .media-card__meta {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--muted); margin-bottom: .5rem;
}
.pv2-listing .media-card__meta .chip {
  background: var(--teal-050); color: var(--teal-dark);
  border-radius: 999px; padding: .18rem .6rem; font-weight: 600;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pv2-pagination {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .45rem; margin-top: var(--space-5); list-style: none; padding: 0;
}
.pv2-pagination a, .pv2-pagination span {
  min-width: 44px; height: 44px; padding: 0 .8rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .95rem; border: 1px solid var(--line);
  background: #fff; color: var(--navy); transition: all .18s ease;
}
.pv2-pagination a:hover { border-color: var(--teal); color: var(--teal-dark); }
.pv2-pagination .is-current { background: var(--teal); border-color: var(--teal); color: #fff; }
.pv2-pagination .is-disabled { opacity: .45; pointer-events: none; }
.pv2-pagination .pv2-pagination__nav { padding: 0 1.2rem; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.pv2-contact-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.pv2-info-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: 1.8rem 1.6rem; box-shadow: var(--shadow-sm); text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pv2-info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--teal-100); }
.pv2-info-card__ico {
  width: 62px; height: 62px; border-radius: 18px; background: var(--teal-050);
  display: grid; place-items: center; margin: 0 auto 1.1rem;
}
.pv2-info-card__ico img { width: 30px; height: 30px; }
.pv2-info-card h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
.pv2-info-card p, .pv2-info-card a { color: var(--muted); font-size: .96rem; margin: 0; }
.pv2-info-card a { color: var(--teal-dark); font-weight: 600; }
.pv2-info-card a:hover { color: var(--navy); }

.pv2-contact-main {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start;
}
.pv2-contact-aside { display: grid; gap: var(--space-3); }

.pv2-map { margin-top: var(--space-5); }
.pv2-map iframe {
  width: 100%; height: 420px; border: 0; border-radius: var(--radius-xl);
  display: block; box-shadow: var(--shadow-sm); background: var(--bg-soft);
}

/* ------------------------------------------------------------
   OPENING HOURS — CLEANER redesign (client feedback)
   One card, one row per day. Day name left, time(s) right.
   Each shift is one line, tabular-aligned. Two Mon–Fri shifts
   are clearly separated. Today's row highlighted (.is-today,
   added by JS). Readable at 375px.
   ------------------------------------------------------------ */
.pv2-hours {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.pv2-hours__head {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.2rem 1.5rem; background: var(--navy); color: #fff;
}
.pv2-hours__head .ico {
  width: 40px; height: 40px; border-radius: 11px; background: rgba(1,189,178,.2);
  display: grid; place-items: center; flex: 0 0 auto;
}
.pv2-hours__head .ico img { width: 22px; height: 22px; }
.pv2-hours__head h3 { color: #fff; margin: 0; font-size: 1.15rem; }
.pv2-hours__head small { display: block; color: #a9b6d6; font-size: .8rem; font-weight: 400; }

.pv2-hours__list { list-style: none; margin: 0; padding: .4rem .5rem; }
.pv2-hours__row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 1rem; padding: .85rem 1rem; border-radius: var(--radius);
  line-height: 1.55; border-bottom: 1px solid var(--line);
}
.pv2-hours__row:last-child { border-bottom: 0; }
.pv2-hours__day { font-weight: 600; color: var(--navy); font-size: 1rem; }
.pv2-hours__day .tag {
  display: inline-block; margin-left: .5rem; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--teal-dark);
  background: var(--teal-050); border-radius: 999px; padding: .1rem .5rem; vertical-align: middle;
}
.pv2-hours__times {
  display: flex; flex-direction: column; align-items: flex-end; gap: .15rem;
  text-align: right;
}
.pv2-hours__shift {
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--slate);
  white-space: nowrap; font-size: .98rem;
}
.pv2-hours__shift + .pv2-hours__shift { color: var(--muted); font-weight: 500; }
.pv2-hours__row--closed .pv2-hours__shift { color: var(--muted); font-style: italic; font-weight: 500; }

/* Weekend rows visually distinct */
.pv2-hours__row--weekend { background: var(--bg-soft); }
.pv2-hours__row--weekend .pv2-hours__day { color: var(--slate); }

/* Today's row highlight (JS adds .is-today) */
.pv2-hours__row.is-today {
  background: var(--teal-050);
  box-shadow: inset 3px 0 0 var(--teal);
}
.pv2-hours__row.is-today .pv2-hours__day { color: var(--teal-dark); }
.pv2-hours__row.is-today .pv2-hours__shift { color: var(--navy); }

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

/* ============================================================
   SERVICE / ABOUT — intro + feature strip
   ============================================================ */
/* Featured image. Sources are a mix of square cutouts, portraits and 16:9
   photos, so do NOT force an aspect ratio + cover — that cropped the doctor's
   head off a 500x500 portrait. Size to the image, capped, centred, never
   upscaled. */
.pv2-figure {
  border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow);
  margin: 0 auto 1.8rem; background: var(--bg-soft);
  display: flex; justify-content: center; align-items: center;
  width: fit-content; max-width: 100%;
}
.pv2-figure img {
  width: auto; height: auto;
  max-width: 100%; max-height: 420px;
  object-fit: contain; margin: 0;
}

.pv2-highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.8rem 0; }
.pv2-highlight {
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
}
.pv2-highlight .ico {
  width: 44px; height: 44px; border-radius: 12px; background: var(--teal-050);
  display: grid; place-items: center; flex: 0 0 auto; color: var(--teal-dark);
  font-weight: 800; font-size: 1.2rem;
}
.pv2-highlight h4 { margin: 0 0 .2rem; font-size: 1rem; }
.pv2-highlight p { margin: 0; font-size: .9rem; color: var(--muted); }

/* About: team / stat strip reuse quote + info blocks from main.css */
.pv2-about-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
  margin-top: var(--space-4);
}
.pv2-about-stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: 1.6rem 1rem; text-align: center; box-shadow: var(--shadow-sm);
}
.pv2-about-stat strong {
  display: block; font-size: 2.4rem; font-weight: 800; color: var(--navy); line-height: 1;
}
.pv2-about-stat strong .u { color: var(--teal); font-size: .62em; }
.pv2-about-stat span { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin-top: .5rem; display: block; }

/* ============================================================
   FAQ (reuse home-v2 look; class prefixed pv2)
   ============================================================ */
.pv2-faq { max-width: 820px; margin: 0 auto; display: grid; gap: .9rem; }
.pv2-faq-item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.pv2-faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 1.15rem 1.4rem; font-family: var(--font); font-size: 1.03rem; font-weight: 600;
  color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.pv2-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;
}
.pv2-faq-q[aria-expanded="true"] .mk { transform: rotate(45deg); background: var(--teal); color: #fff; }
.pv2-faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.pv2-faq-a__inner { padding: 0 1.4rem 1.25rem; color: var(--muted); }

/* ============================================================
   CTA BAND (navy) — shared bottom-of-page conversion strip
   ============================================================ */
.pv2-ctaband {
  background: linear-gradient(115deg, var(--navy-2) 0%, var(--navy) 55%, var(--navy-tint) 100%);
  color: #dbe3f3; border-radius: var(--radius-2xl); padding: var(--space-5) var(--space-4);
  text-align: center;
}
.pv2-ctaband .eyebrow { color: var(--teal); }
.pv2-ctaband h2 { color: #fff; margin-bottom: .6rem; }
.pv2-ctaband p { color: #c3cee6; max-width: 560px; margin: 0 auto 1.6rem; }
.pv2-ctaband__actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   404
   ============================================================ */
.pv2-404 { text-align: center; padding: var(--space-7) 0; }
.pv2-404__code {
  font-size: clamp(5rem, 18vw, 10rem); font-weight: 800; line-height: 1;
  letter-spacing: -.03em; color: var(--navy-050);
  background: linear-gradient(120deg, var(--navy) 0%, var(--teal) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pv2-404 h1 { margin: 1rem 0 .6rem; }
.pv2-404 p { color: var(--muted); max-width: 520px; margin: 0 auto 1.8rem; }

/* ============================================================
   REVEAL animations (progressive enhancement, mirrors home-v2)
   Hidden start-state only applies under <html class="js-anim">,
   added by pages-v2.js. No JS => full content visible.
   ============================================================ */
.js-anim .reveal {
  opacity: 0; transform: translateY(26px);
  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; }
.js-anim .reveal--left { transform: translateX(-30px); }
.js-anim .reveal--right { transform: translateX(30px); }
.js-anim .reveal--left.is-in, .js-anim .reveal--right.is-in { transform: none; }
.js-anim .stagger > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 85ms);
}
.js-anim .stagger.is-in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal, .js-anim .reveal--left, .js-anim .reveal--right, .js-anim .stagger > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .pv2-layout, .pv2-layout--wide { grid-template-columns: 1fr; }
  .pv2-sidebar { position: static; grid-template-columns: repeat(2, 1fr); }
  .pv2-listing { grid-template-columns: repeat(2, 1fr); }
  .pv2-contact-grid { grid-template-columns: 1fr; }
  .pv2-contact-main { grid-template-columns: 1fr; }
  .pv2-about-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pv2 { padding: var(--space-5) 0; }
  .pv2-sidebar { grid-template-columns: 1fr; }
  .pv2-listing { grid-template-columns: 1fr; }
  .pv2-highlights { grid-template-columns: 1fr; }
  .pv2-about-stats { grid-template-columns: 1fr 1fr; }
  .pv2-hours__head { padding: 1rem 1.2rem; }
  .pv2-hours__row { padding: .8rem .75rem; gap: .6rem; }
  .pv2-hours__day { font-size: .95rem; }
  .pv2-hours__shift { font-size: .9rem; }
  .pv2-ctaband { padding: var(--space-4) 1.3rem; }
}

/* ============================================================
   DESIGNED STATIC PAGES (v3)
   about-us · about-us/procedures · *-specialist-in-gurgaon
   Mirrors the approved home-v2 card language (.hv2-svc-card,
   .hv2-stats--v3) under a pv2- prefix, because home-v2.css is
   NOT loaded on inner pages. Tokens only, no new brand hex.
   ============================================================ */

/* ---- Intro split: media + copy ---- */
.pv2-split {
  display: grid; grid-template-columns: 420px minmax(0, 1fr);
  gap: var(--space-5); align-items: center;
}
.pv2-split__media {
  border-radius: var(--radius-2xl); overflow: hidden; background: var(--bg-soft);
  box-shadow: var(--shadow); display: flex; justify-content: center; align-items: center;
}
.pv2-split__media img, .pv2-split__media picture { display: block; width: 100%; height: auto; }
.pv2-split__body h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.015em; margin-bottom: .9rem; }
.pv2-split__body p { color: var(--slate); font-size: 1.03rem; line-height: 1.75; margin: 0 0 1.1rem; }
.pv2-split__body p:last-of-type { margin-bottom: 0; }

/* ---- Credential chips ---- */
.pv2-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.7rem; list-style: none; padding: 0; }
.pv2-chips li {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px;
  padding: .55rem 1.1rem; border-radius: 999px;
  background: var(--teal-050); border: 1px solid var(--teal-100);
  color: var(--navy); font-weight: 600; font-size: .94rem; line-height: 1.3;
}
.pv2-chips li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal); flex: 0 0 auto;
}

/* ---- Stats band (navy) — mirrors .hv2-stats--v3 ---- */
.pv2-stats { background: linear-gradient(120deg, var(--navy) 0%, var(--navy-tint) 100%); color: #dfe6f2; }
.pv2-stats .container { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.pv2-stats__head { max-width: 680px; margin: 0 auto var(--space-4); text-align: center; }
.pv2-stats__head .eyebrow { color: var(--teal); }
.pv2-stats__head h2 { color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 800; letter-spacing: -.015em; }
.pv2-stats__head p { color: #c3cee6; margin: 0; font-size: 1.08rem; }
.pv2-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.pv2-stat {
  text-align: center; padding: 2rem 1.2rem; border-radius: var(--radius-xl);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.pv2-stat:hover { transform: translateY(-4px); background: rgba(255,255,255,.08); border-color: rgba(1,189,178,.4); }
.pv2-stat strong {
  display: inline-flex; align-items: baseline; white-space: nowrap;
  font-size: clamp(2.5rem, 4.8vw, 3.9rem); font-weight: 800; color: #fff;
  line-height: 1; letter-spacing: -.02em;
}
.pv2-stat strong .u { font-size: .6em; color: var(--teal); font-weight: 800; line-height: 1; margin-left: .04em; }
.pv2-stat span {
  color: #cdd8ef; font-size: .88rem; text-transform: uppercase;
  letter-spacing: .1em; margin-top: .8rem; display: block; font-weight: 600;
}
.pv2-stat--flagship { background: rgba(1,189,178,.10); border-color: rgba(1,189,178,.5); }

/* ---- Procedure / service card grid ---- */
.pv2-cardgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.pv2-pcard {
  position: relative; display: flex; flex-direction: column; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pv2-pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--teal-100); }
.pv2-pcard:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-050), var(--shadow); }
.pv2-pcard__img { aspect-ratio: 16 / 10; background: var(--bg-soft); overflow: hidden; }
.pv2-pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.pv2-pcard:hover .pv2-pcard__img img { transform: scale(1.05); }
.pv2-pcard__body { padding: 1.3rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.pv2-pcard h3 { font-size: 1.08rem; line-height: 1.35; margin: 0 0 .5rem; }
.pv2-pcard p { color: var(--slate); font-size: .92rem; line-height: 1.6; margin: 0 0 1.1rem; }
.pv2-pcard__link {
  margin-top: auto; font-weight: 600; color: var(--teal-dark);
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px;
}
/* Whole card is the hit area; the link keeps the accessible name + focus ring. */
.pv2-pcard__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pv2-pcard:hover .pv2-pcard__link { color: var(--navy); }
.pv2-pcard__link:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

/* ---- Feature card (icon + title + copy) — mirrors .hv2-svc-card ---- */
.pv2-featuregrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.pv2-featuregrid--2 { grid-template-columns: repeat(2, 1fr); }
.pv2-featuregrid--3 { grid-template-columns: repeat(3, 1fr); }
.pv2-fcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl);
  padding: 1.8rem 1.5rem; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pv2-fcard:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--teal-100); }
.pv2-fcard__ico {
  width: 56px; height: 56px; border-radius: 16px; background: var(--teal-050);
  display: grid; place-items: center; margin-bottom: 1.1rem; flex: 0 0 auto;
}
.pv2-fcard__ico img { width: 30px; height: 30px; display: block; }
.pv2-fcard h3 { font-size: 1.1rem; line-height: 1.35; margin: 0 0 .5rem; }
.pv2-fcard h3 a { color: inherit; text-decoration: none; }
.pv2-fcard h3 a:hover { color: var(--teal-dark); }
.pv2-fcard h3 a:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
.pv2-fcard p { color: var(--slate); font-size: .94rem; line-height: 1.62; margin: 0; }
/* Credential list inside a feature card (/dr-ravinder-gera/ CV cards). */
.pv2-fcard__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.pv2-fcard__list li {
  position: relative; padding-left: 1.5rem;
  color: var(--slate); font-size: .94rem; line-height: 1.62;
}
.pv2-fcard__list li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
}

/* ---- Linked condition chips ("conditions we treat") ---- */
.pv2-linkgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; list-style: none; margin: 0; padding: 0; }
.pv2-linkgrid li { margin: 0; padding: 0; }
.pv2-linkgrid li::before { content: none; }
.pv2-linkcard {
  display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 56px;
  padding: .9rem 1.15rem; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); cursor: pointer;
  color: var(--navy); font-weight: 600; font-size: .98rem; text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.pv2-linkcard::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal); flex: 0 0 auto;
}
.pv2-linkcard::after {
  content: "\2192"; margin-left: auto; color: var(--teal);
  opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease;
}
.pv2-linkcard:hover { transform: translateY(-2px); border-color: var(--teal); color: var(--teal-dark); box-shadow: var(--shadow); }
.pv2-linkcard:hover::after { opacity: 1; transform: none; }
.pv2-linkcard:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

/* ---- Long-form article measure (designed pages with no sidebar) ---- */
.pv2-prose--narrow { max-width: 800px; margin-inline: auto; }

/* ---- Centred prose block ---- */
.pv2-proseblock { max-width: 820px; margin: 0 auto; text-align: center; }
.pv2-proseblock p { color: var(--slate); font-size: 1.03rem; line-height: 1.8; margin: 0 0 1.1rem; }
.pv2-proseblock p:last-child { margin-bottom: 0; }

/* ---- Responsive ---- */
@media (max-width: 1200px) {
  .pv2-cardgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1000px) {
  .pv2-split { grid-template-columns: 1fr; gap: var(--space-4); }
  .pv2-split__media { max-width: 420px; }
  .pv2-featuregrid { grid-template-columns: repeat(2, 1fr); }
  /* A 3-card row stays 3-up here: dropping to 2 leaves a visible empty slot. */
  .pv2-featuregrid--3 { grid-template-columns: repeat(3, 1fr); }
  .pv2-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .pv2-linkgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .pv2-cardgrid { grid-template-columns: repeat(2, 1fr); }
  .pv2-featuregrid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pv2-cardgrid, .pv2-featuregrid, .pv2-featuregrid--2, .pv2-featuregrid--3,
  .pv2-stats__grid, .pv2-linkgrid { grid-template-columns: 1fr; }
  .pv2-stat { padding: 1.5rem 1rem; }
  .pv2-split__media { max-width: 100%; }
  /* Long centred paragraphs are hard to read on a narrow column. */
  .pv2-proseblock { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .pv2-pcard, .pv2-fcard, .pv2-stat, .pv2-linkcard,
  .pv2-pcard__img img, .pv2-linkcard::after { transition: none !important; }
  .pv2-pcard:hover, .pv2-fcard:hover, .pv2-stat:hover, .pv2-linkcard:hover { transform: none; }
  .pv2-pcard:hover .pv2-pcard__img img { transform: none; }
}

/* ============================================================
   MOBILE / TOUCH PASS (device audit at 320-1024)
   Additive, all inside max-width queries — the approved desktop
   rendering above 1024px is untouched.
   ============================================================ */
@media (max-width: 1024px) {
  /* "Today" pill rendered at 10.9px — under the 12px legibility floor. */
  .pv2-hours__day .tag { font-size: .78rem; }
}
@media (max-width: 1024px) {
  /* Sidebar CTA phone number was a 28px-tall tap target. */
  .pv2-cta-card__phone { display: flex; align-items: center; justify-content: center; min-height: 44px; }

  /* Card body copy under 16px on a phone/tablet is below the
     comfortable reading floor. */
  .pv2-cta-card p { font-size: 1rem; }
  .pv2-listing .media-card p { font-size: 1rem; }
  .pv2-pcard p { font-size: 1rem; }
  .pv2-fcard p { font-size: 1rem; }
  .pv2-fcard__list li { font-size: 1rem; }
  .pv2-info-card p, .pv2-info-card a { font-size: 1rem; }
  .pv2-chips li { font-size: 1rem; }

  /* Feature-card titles are the only link into the card and rendered as a
     single 23px-tall line, well under a fingertip. */
  .pv2-fcard h3 a { display: inline-flex; align-items: center; min-height: 44px; }
}