/* === CSS variables consumed by HTML via var() arbitrary-value classes ===
 * --container-site / --container-inner: site-wide layout container widths.
 * --spec-bg is set inline on city-individual specialities cards via style=
 * "--spec-bg: #..." and needs no default.
 */
:root {
  --container-site: 1440px;
  --container-inner: 1380px;
}
/* FAQ answer: ensure overflow is hidden and provide a smooth height fallback */
.faq-answer {
  overflow: hidden;
  transition: height 360ms cubic-bezier(.22,.8,.3,1);
}
.lg\:leading-\[45px\]{line-height: 43px!important;}
/**
 * CFS Homepage - Custom CSS overrides
 * Minimal overrides on top of Tailwind utility classes.
 * Add component-specific styles here only when Tailwind utilities are insufficient.
 */

/* Utility-bar dropdown caret — filled downward triangle 10w x 7h (#434343).
 * CSS border triangle rasterizes closer to Figma's vector export than a
 * sub-10px SVG path at the per-node SSIM gate. */
.util-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #434343;
}

/* Utility-bar dropdown: flip the caret while its submenu is open. */
[data-dropdown-toggle][aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Centres section — card image shadow */
.centre-card__image {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Centres section — backdrop blur on card images */
.centre-card__image {
  backdrop-filter: blur(2px);
}

/* Specialities — inactive triggers 75px, active 92px (desktop only).
 * !important + flex-shrink:0 override Tailwind's `lg:w-auto` + flex-shrink
 * defaults. Without these, flex squeezes inactive triggers to ~54px and the
 * vertical labels overflow visibly. 8 inactive (75) + 1 active (92) +
 * 700px open panel = 1392px (just over 1380 container, accepted overflow). */
/* BOUND MOVED 2026-08-25 with the accordion's breakpoint: 1280 -> 1024. Without
   it the triggers below 1280 sized to their rotated text (about 54px in canvas
   space) instead of the designed 78px. */
@media (min-width: 1024px) {
  .spec-trigger {
    width: 78px !important;
    flex-shrink: 0 !important;
  }
}


/* Doctor cards: hover state per Figma component variant `Doctor Card - Mahipal`
 * (node 71:1591), Default → Variant2 delta. Restored 2026-05-27 after the
 * variant audit found Figma DOES specify hover (just no prototype reactions). */
.doctor-card,
.featured-doctor {
  border: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.doctor-card:hover,
.featured-doctor:hover {
  border-color: #2b286f;
}
.doctor-card:hover .doctor-card__loc-bar {
  background-color: #ffcb05 !important;
}
.doctor-card:hover .doctor-card__city {
  color: #2b286f !important;
}
.doctor-card:hover .doctor-card__spec-pill {
  opacity: 1 !important;
}
.doctor-card:hover .doctor-card__book {
  font-weight: 500 !important;
}
/* Hover effects for doctor-list scroll cards — IR-verified against the Figma
 * "Dr. Lalit Verma" component (Property 1=Default → Variant2):
 *   • image scales up
 *   • location pill #d9d9d9 → #ffcb05 + pin grows (handled inline via group-hover)
 *   • experience bar BACKGROUND STAYS #2b286f — only its text grows (16→~19/23px)
 *   • "Book An Appointment" 13→15px, weight 400→500, gains underline
 * Desktop only (mobile has no hover). */
@media (min-width: 1024px) {
  .doctor-card .doctor-card__image img {
    transition: transform 0.3s ease;
    transform-origin: bottom center;
  }
  .doctor-card:hover .doctor-card__image img {
    transform: scale(1.13);
  }
  /* Experience text grows; the bar background is intentionally NOT recoloured
   * (Figma keeps Rectangle 89 = #2b286f in both states). */
  .doctor-card .doctor-card__exp {
    transition: font-size 0.3s ease;
    /* Figma exp text uses textCase=TITLE; our desktop span is lowercase chars. */
    text-transform: capitalize;
  }
  .doctor-card:hover .doctor-card__exp {
    font-size: 19px;
  }
}
/* CMS-friendly book CTA wrapper hover — weight 400→500 at all sizes; on desktop
 * also 13→15px + underline (Figma Default→Variant2). <p> is CMS-bare, so the
 * styling lives on the wrapper `> p` selector. */
.doctor-card:hover .cms-doctor-card-book > p,
.doctor-card:hover .cms-doctor-card-book-responsive > p,
.featured-doctor:hover .cms-doctor-card-book > p,
.featured-doctor:hover .cms-doctor-card-book-responsive > p {
  font-weight: 600;
  font-size: 18px !important;
}
@media (min-width: 1024px) {
  /* Book CTA hover: underline only (weight 400→500 comes from the rule above).
   * The Figma variants also grow the font ~2px (13→15 scroll, 17→19 featured),
   * but that delta is intentionally omitted — it's visually negligible next to
   * the underline. Rest sizes (scroll 13px, featured 17px) stay unchanged. */
  .doctor-card:hover .cms-doctor-card-book-responsive > p,
  .featured-doctor:hover .cms-doctor-card-book-responsive > p {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  
}
/* Specialisation pill (Figma Component 173 — Group 775 Default → 776 Selected).
 * Pattern reused on multiple sibling pill components in the same family. */
.spec-pill[aria-pressed="true"],
.spec-pill.is-selected {
  background-color: #ffcb05;
  font-weight: 500;
}
/* Same pattern for state filter pills (Component 201) */
.state-pill[aria-pressed="true"],
.state-pill.is-selected {
  background-color: #ffcb05;
  font-weight: 500;
}

/* Callback Submit button hover (Figma Component 203, Default → Hover):
 * 1px inset white ring + text Medium 500. Targets `.cta-submit` inside
 * the callback form. */
.callback-form .cta-submit:hover,
.callback-form__card .cta-submit:hover,
form[data-hero-form] .cta-submit:hover,
form[data-hero-form-mobile] .cta-submit:hover {
  box-shadow: inset 0 0 0 1px #ffffff;
  font-weight: 500;
}

/* Footer address item hover (Figma Component 204/205/206): icon circle
 * fills yellow. Target `.footer-address__icon`. */
.footer-address-item:hover .footer-address__icon {
  background-color: #ffcb05;
  border-color: #ffcb05;
}

/* Why Us: background highlight grid — 10x6 ellipse cells per Figma (60 total).
 * Each cell renders as an ellipse via border-radius:50%. JS sets per-cell opacity
 * based on distance from mouse pointer to create a spotlight effect. */
.whyus-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(6, 1fr);
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.whyus-tile {
  opacity: 0;
  border: 1px solid #2b286f;
  background: transparent;
  transition: opacity 0.2s ease-out;
}

/* Phone bar: text and icon turn navy on hover (yellow bg) */
.phone-bar__item:hover span {
  color: #2b286f;
  transition: color 0.3s;
}
.phone-bar__item:hover svg path {
  fill: #2b286f;
  transition: fill 0.3s;
}

/* === CMS paragraph wrappers — literal CSS (do not use @apply; Play CDN strips it) ===
 * Bare <p> tags inside these wrappers inherit/get all styling. Used so paragraph
 * content can be CMS-edited without classes on <p>. Mirrors css/input.css lines
 * 162-197 (the @apply versions, kept until output.css is deleted in Phase 4).
 */

.cms-card-excerpt > p {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.375;
  color: #1a1a1a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .cms-card-excerpt > p {
    font-size: 14px;
  }
}

.cms-card-excerpt-3 > p {
  -webkit-line-clamp: 3;
}

/* Blog listing card excerpt — same wrapper as .cms-card-excerpt but desktop scales up to
   Poppins 20/33 (Figma 'Desktop blog' instance). Mobile inherits the 13px base. */
.cms-blog-card-excerpt > p {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.375;
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .cms-blog-card-excerpt > p {
    font-size: 20px;
    line-height: 33px;
    letter-spacing: -0.8px;
  }
}

.cms-doctor-card-book {
  margin-top: auto;
}
.cms-doctor-card-book > p {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #000;
  text-align: center;
}

.cms-doctor-card-book-responsive {
  margin-top: auto;
}
.cms-doctor-card-book-responsive > p {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.375;
  color: #000;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding-top: 1rem;
}
@media (min-width: 1024px) {
  .cms-doctor-card-book-responsive > p {
    font-size: 13px;
    text-decoration: none;
    padding-top: 0;
  }
  /* Featured (Mahipal) CTA rest size is larger than the scroll-card CTA
   * (Figma: 17px vs 13px). Scoped to .featured-doctor so scroll cards keep 13px. */
  .featured-doctor .cms-doctor-card-book-responsive > p {
    font-size: 17px;
  }
}

.cms-sidebar-list-title > p {
  font-family: 'Poppins', sans-serif;
  /* mobile (vertical card): Poppins Medium 15, 2-line clamp (Figma "Latest Blogs") */
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  color: #2b286f;
  margin-bottom: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .cms-sidebar-list-title > p {
    /* desktop (horizontal list): Poppins Light 17, 3-line clamp */
    font-weight: 300;
    font-size: 17px;
    line-height: 25.5px;
    letter-spacing: -0.68px;
    -webkit-line-clamp: 3;
  }
}

.cms-doctor-meta > p {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 1024px) {
  .cms-doctor-meta > p {
    gap: 0.75rem;
  }
}


/* === Cataract-page-only rules (selectors prefixed with [data-tabs="..."]
 *     or .cataract-* / .cat-*; inert on non-cataract pages) ===
 */
/**
 * CFS Cataract Page - Custom CSS overrides
 * Tab+panel connected shapes on mobile for cataract-specific sections.
 */

/* Cataract — tab+panel connected gray shape on mobile */
@media (max-width: 1023px) {
  /* All connected tab sections: base tab style */
  [data-tabs="understanding"] .cat-tab,
  [data-tabs="riskfactors"] .cat-tab,
  [data-tabs="surgery-group1"] .cat-tab,
  [data-tabs="surgery-group2"] .cat-tab,
  [data-tabs="iol-group1"] .cat-tab,
  [data-tabs="iol-group2"] .cat-tab {
    background: transparent !important;
    color: #2b286f !important;
    border-radius: 0 !important;
    border: none !important;
    position: relative;
  }

  /* Neutralize the desktop-pill overlay <span> (bg-[#ffcb05]/bg-[#2b286f])
     inside each tab on mobile — Figma mobile tabs are plain navy text, no
     filled blocks. The button bg above only covers the button layer; these
     -z-10 spans otherwise leak navy/yellow behind the labels on mobile. */
  [data-tabs="understanding"] .cat-tab > span[aria-hidden="true"],
  [data-tabs="riskfactors"] .cat-tab > span[aria-hidden="true"],
  [data-tabs="surgery-group1"] .cat-tab > span[aria-hidden="true"],
  [data-tabs="surgery-group2"] .cat-tab > span[aria-hidden="true"],
  [data-tabs="iol-group1"] .cat-tab > span[aria-hidden="true"],
  [data-tabs="iol-group2"] .cat-tab > span[aria-hidden="true"] {
    background: transparent !important;
  }

  /* Active tab: gray bg + rounded top + underline */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"],
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"],
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"],
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"],
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"],
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"] {
    background: #f4f4f8 !important;
    border-radius: 13px 13px 0 0 !important;
    border-bottom: none !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-color: #2b286f !important;
    text-decoration-thickness: 2px !important;
  }

  /* Inverse rounded corners: pseudo-elements */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 13px;
    height: 13px;
    background: transparent;
  }

  /* Left scoop */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]::before {
    left: -13px;
    border-bottom-right-radius: 13px;
    box-shadow: 5px 5px 0 5px #f4f4f8;
  }

  /* Right scoop */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]::after {
    right: -13px;
    border-bottom-left-radius: 13px;
    box-shadow: -5px 5px 0 5px #f4f4f8;
  }

  /* First tab: hide left scoop */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]:first-child::before {
    display: none;
  }

  /* Last tab: hide right scoop */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]:last-child::after {
    display: none;
  }

/* Slick slider minimal overrides for featured blog */
.blogs-hero .slick-slider {
  display: block;
}
.blogs-hero .slick-slide {
  display: block;
  outline: none;
}
.blogs-hero .slick-slide > * {
  height: 100%;
}
.blogs-hero .slick-list, .blogs-hero .slick-track {
  height: 100%;
}
/* Keep existing decorative arrows visible and clickable */
[data-slider-prev], [data-slider-next] {
  cursor: pointer;
  z-index: 20;
}

/* Theme tweaks for slick dots (if enabled later) */
.slick-dots li button:before {
  color: #2b286f;
  opacity: 0.6;
}
.slick-dots li.slick-active button:before {
  opacity: 1;
}
/* Featured slide content layout to match design */

.featured-slide-content {
  width: min(100%, 720px);
  max-width: 720px;
  padding-left: 24px;
  padding-right: 24px;
  margin-left: 0;
  margin-right: auto;
}
@media (min-width: 768px) {
  .featured-slide-content {
    padding-left: 48px;
    padding-right: 0;
  }
}
@media (min-width: 1024px) {
  .featured-slide-content {
    padding-left: 96px;
    max-width: 820px;
  }
  .featured-slide-content h2 {
    font-size: 50px;
    line-height: 1.1;
  }
  .featured-slide-content p {
    font-size: 30px;
    line-height: 1.4;
    max-width: 560px;
  }
}

/* Buttons in featured slides — mobile: compact so both fit side-by-side (Figma);
   desktop: wide book button (min 260) per the desktop design. */
.featured-slide-content .inline-flex:first-of-type {
  border-width: 1px;
  padding-left: 4px;
  padding-right: 4px;
}
.featured-slide-content .inline-flex:last-of-type {
  padding-left: 4px;
  padding-right: 4px;
}
@media (min-width: 1024px) {
  .featured-slide-content .inline-flex:first-of-type {
    padding-left: 22px;
    padding-right: 22px;
  }
  .featured-slide-content .inline-flex:last-of-type {
    min-width: 260px;
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* Prevent slide heading/paragraph break issues */
.featured-slide-content h2,
.featured-slide-content p {
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}
.featured-slide-content h2 {
  max-width: 100%;
}
.featured-slide-content p {
  max-width: 100%;
}

  /* Risks mobile: navy bg variant */
  [data-tabs="risks-mobile"] .cat-tab {
    background: transparent !important;
    color: #2b286f !important;
    border-radius: 0 !important;
    border: none !important;
    position: relative;
  }

  /* Risks tab active: navy */
  [data-tabs="risks-mobile"] .cat-tab[data-tab="risks-tab"][aria-selected="true"] {
    background: #2b286f !important;
    color: white !important;
    border-radius: 13px 13px 0 0 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-color: white !important;
    text-decoration-thickness: 2px !important;
  }

  /* Prevention tab active: gray */
  [data-tabs="risks-mobile"] .cat-tab[data-tab="prevention-tab"][aria-selected="true"] {
    background: #f4f4f8 !important;
    color: #2b286f !important;
    border-radius: 13px 13px 0 0 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-color: #2b286f !important;
    text-decoration-thickness: 2px !important;
  }

  [data-tabs="risks-mobile"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="risks-mobile"] .cat-tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 13px;
    height: 13px;
    background: transparent;
  }

  /* Risks tab scoops: navy */
  [data-tabs="risks-mobile"] .cat-tab[data-tab="risks-tab"][aria-selected="true"]::before {
    left: -13px;
    border-bottom-right-radius: 13px;
    box-shadow: 5px 5px 0 5px #2b286f;
  }

  [data-tabs="risks-mobile"] .cat-tab[data-tab="risks-tab"][aria-selected="true"]::after {
    right: -13px;
    border-bottom-left-radius: 13px;
    box-shadow: -5px 5px 0 5px #2b286f;
  }

  /* Prevention tab scoops: gray */
  [data-tabs="risks-mobile"] .cat-tab[data-tab="prevention-tab"][aria-selected="true"]::before {
    left: -13px;
    border-bottom-right-radius: 13px;
    box-shadow: 5px 5px 0 5px #f4f4f8;
  }

  [data-tabs="risks-mobile"] .cat-tab[data-tab="prevention-tab"][aria-selected="true"]::after {
    right: -13px;
    border-bottom-left-radius: 13px;
    box-shadow: -5px 5px 0 5px #f4f4f8;
  }

  [data-tabs="risks-mobile"] .cat-tab[aria-selected="true"]:first-child::before {
    display: none;
  }

  [data-tabs="risks-mobile"] .cat-tab[aria-selected="true"]:last-child::after {
    display: none;
  }

  /* Content panel overflow visible for scoops */
  [data-tabs="understanding"] .cat-panel:not(.hidden),
  [data-tabs="riskfactors"] .cat-panel:not(.hidden),
  [data-tabs="surgery-group1"] .cat-panel:not(.hidden),
  [data-tabs="surgery-group2"] .cat-panel:not(.hidden),
  [data-tabs="iol-group1"] .cat-panel:not(.hidden),
  [data-tabs="iol-group2"] .cat-panel:not(.hidden),
  [data-tabs="risks-mobile"] .cat-panel:not(.hidden) {
    position: relative;
    overflow: visible;
  }
}

/* === Hotfix 2026-05-27: regressed rules from input.css ===
 * These rules lived in css/input.css (lines 16-101, 132-154) but were not
 * @apply-based, so they were missed during the v4→v3 CDN migration when
 * cms-* @apply rules got expanded into custom.css. Restoring them here
 * un-breaks: yellow button hover scale, testimonials photo collage transitions,
 * specialities accordion expand/collapse + vertical desktop trigger text,
 * journey eye dot active scale, callback form gradient borders.
 */

/* Yellow button scale-up on hover — kept ONLY for the hero submit + main nav
 * Book An Appointment. Strict-parity strip removed .cta-btn from this rule
 * (Section 10 CTAs should stay static on hover per Figma). */
.cta-button:hover,
.cta-submit:hover {
  transform: scale(1.05);
}
.cta-button,
.cta-submit {
  transition: transform 0.2s ease, filter 0.3s, box-shadow 0.3s, font-weight 0.4s ease;
}

/* Doctor-individual booking sidebar submit: Figma hover variant is weight
 * Light→Medium ONLY (no scale) — overrides the global .cta-submit scale. */
.booking-sidebar .cta-submit:hover {
  transform: none;
  font-weight: 500;
}

/* Testimonials photo collage — smooth slide between positions */
.testimonial-photo {
  transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}
.testimonial-photo[data-photo-slot="left"] {
  left: 16px; top: 193px; width: 197px; height: 218px; z-index: 0; opacity: 0.6;
}
.testimonial-photo[data-photo-slot="middle"] {
  left: 236px; top: 193px; width: 197px; height: 218px; z-index: 1; opacity: 1;
}
.testimonial-photo[data-photo-slot="main"] {
  left: 456px; top: 130px; width: 258px; height: 286px; z-index: 2; opacity: 1;
}

/* Specialities accordion panel — responsive animation */
.spec-panel {
  overflow: hidden;
  opacity: 0;
  transition: all 0.35s ease;
}

/* Below the accordion's desktop width: vertical expand (max-height) */
@media (max-width: 1023px) {
  .spec-panel {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .spec-panel.open {
    max-height: 600px;
    opacity: 1;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

/* Desktop: horizontal expand (max-width) */
@media (min-width: 1024px) {
  .spec-panel {
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 48px;
    padding-bottom: 32px;
  }
  .spec-panel.open {
    /* Fill the remaining track via flex:1 — do NOT hardcode a px width here.
       A fixed cap (was 700px) only fills when the tab count happens to add up
       to the container width (9 tabs on the homepage). With fewer tabs (e.g.
       city-individual's 5) the cap leaves a gray #F1F1F1 gap on the right.
       Tab count is CMS-dynamic, so cap at the container width and let flex
       grow into whatever space the triggers leave. */
    max-width: 100%;
    opacity: 1;
    padding-left: 40px;
    padding-right: 31px;
  }
  /* Figma interaction: the active tab's description panel sits IMMEDIATELY to
     the right of that tab. Each trigger+panel pair is interleaved in DOM order
     (spec-item is lg:contents), so leaving them in source order makes the open
     panel render right after its own trigger — earlier tabs to its left, later
     tabs to its right. (Do NOT force panels to order:1 — that pins every panel
     to the far-right end, detaching the description from a clicked middle tab.) */
}

/* Desktop: trigger text rotated vertically */
@media (min-width: 1024px) {
  .spec-trigger span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
}

/* Mobile: spec bars are full-bleed flat bands. JS toggles rounded-r-[20px] onto
   the active trigger (needed for the desktop vertical accordion), but on mobile
   that produces an inconsistent rounded notch on whichever bar is active, so
   flatten the right corners below lg. */
@media (max-width: 1023px) {
  .specialities-accordion .spec-trigger {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}

/* Journey eye dots */
.journey-dot {
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
}
.journey-dot.active {
  transform: translate(-50%, -50%) scale(1.5);
  box-shadow: 0 0 0 3px rgba(255, 203, 5, 0.4);
}

/* Callback form gradient border with border-radius */
.callback-gradient-border {
  position: relative;
}
.callback-gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 11px;
  padding: 1px;
  background: linear-gradient(180deg, #2B286F 0%, #FFFFFF 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .callback-gradient-border::before {
    display: none;
  }
  .callback-form__card {
    background: white !important;
    backdrop-filter: none !important;
  }
}

/* Callback input gradient border */
.callback-input-border {
  position: relative;
}
.callback-input-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  padding: 1px;
  background: linear-gradient(180deg, #2B286F 0%, #FFFFFF 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .callback-input-border {
    background: white !important;
    backdrop-filter: none !important;
  }
}


/* Section 13 — Blogs (Vision Care Insights) — CMS-friendly blog card excerpt */
.cms-blog-excerpt > p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Blog card hover (Figma "Desktop blog" Default→hover variant): a 2px #2b286f
 * outside border appears + the cover image zooms ~1.13x. Desktop only (mobile
 * card already carries a static border; no hover on touch). box-shadow ring is
 * used so there's no layout shift and it sits outside the rounded corners. */
@media (min-width: 1024px) {
  .blog-card {
    transition: box-shadow 0.3s ease;
  }
  .blog-card:hover {
    box-shadow: 0 0 0 2px #2b286f;
  }
  .blog-card__image img {
    transition: transform 0.3s ease;
    transform-origin: center;
  }
  .blog-card:hover .blog-card__image img {
    transform: scale(1.13);
  }

  .centre-loc-card {
    transition: box-shadow 0.3s ease;
  }
  .centre-loc-card:hover {
    box-shadow: 0 0 0 2px #2b286f;
  }
  .centre-loc-card__image img {
    transition: transform 0.3s ease;
    transform-origin: center;
  }
  .centre-loc-card:hover .centre-loc-card__image img {
    transform: scale(1.13);
  }
}

/* Section 14 — callback form input focus border (gradient-border wrapper) */
.callback-input-border:focus-within::before {
  background: linear-gradient(180deg, #2B286F 0%, #2B286F 100%);
}

/* Cataract — symptom card hover (image zoom + indigo border), house style */
@media (min-width: 1024px) {
  .symptom-card {
    transition: box-shadow 0.3s ease;
  }
  .symptom-card:hover {
    box-shadow: 0 0 0 1px #2b286f;
  }
  .symptom-card .symptom-img {
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
  }
  .symptom-card:hover .symptom-img {
    transform: scale(1.09);
  }
}

/* shamnas style updates */

.d-flex{
  display: flex;
  flex-wrap: wrap;
}
.tablist button{
  min-width: 200px;
}
.white-bg-tab{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.white-bg-tab button{
  padding: 20px;
}
.white-bg-tab button[data-active="true"]{
  background-color: #2b286f;
  color: #fff;
}
.white-bg-tab button[data-active="false"]{
  background-color: #fff;
  color: #2b286f;
}
.white-bg-tab button[data-active="true"]:first-child{
  border-radius: 0px 0px 15px 0px;
}
.white-bg-tab button[data-active="true"]:last-child{
  border-radius: 15px 0px 0px 0px;
}
.white-bg-tab button[data-active="false"]:first-child{
  border-radius: 0px 0px 15px 0px;
}
.white-bg-tab button[data-active="false"]:last-child{
  border-radius: 0px 0px 0px 15px;
}
.blog-card-content-wrapper{
  padding: 15px;
}
.justify-content-between{
  justify-content: space-between;
}
.font-size-blog-box{
  font-size: 24px !important;
  line-height: 120% !important;
}
a.phone-icon{
  border-radius: 50%;
  border: 1px solid #2b286f;
  background-color: transparent;
}
.yellow-border{
  border-left: 5px solid #FFCB05;
}
.table-overflow{
  overflow-x: auto;
}
.award-slider{
  max-width: 1285px;
  margin: 0 auto;
}
.group:hover a.phone-icon{
  background-color: #2b286f;
}
/* city-individual: centre-card phone circle is navy-FILLED at rest on MOBILE
 * (Figma 3121:21144 Ellipse 44 fill #2b286f); desktop stays outlined-at-rest. */
@media (max-width: 1023px){
  .city-centres a.phone-icon{
    background-color: #fff;
  }
}
.blog-hover-card ul li a:hover, ul.blog-hover-card li a:hover{
  border: 2px solid #2b286f !important;
}
.blog-hover-card ul li a:hover .cms-sidebar-list-title p, ul.blog-hover-card li a:hover h3{
  font-weight: 500 !important;
}
/* Blog card: date / read-time row also bolds on hover (Figma 300 -> 500) */
.blog-hover-card ul li a:hover .blog-card-content-wrapper > div:last-child,
ul.blog-hover-card li a:hover .blog-card-content-wrapper > div:last-child{
  font-weight: 500 !important;
}
.blog-hover-card ul li a, ul.blog-hover-card li a{
  border: 2px solid transparent !important;
}
/* Sidebar widgets (Reader's Favourite / Hindi Blogs): one #f1f1f1 panel; items
   sit seamless in rest, a hovered item lifts to white + indigo border (Figma 29453/29460). */
.blogs-sidebar-widget{
  background: #f1f1f1;
  border-radius: 15px;
  padding: 25px 20px;
}
.blogs-sidebar-widget a[data-sidebar-list-item]{ transition: background-color .3s ease, border-color .3s ease; }
/* date (first meta span) bolds 300 -> 600 on hover; read-time stays 300 */
.blogs-sidebar-widget a[data-sidebar-list-item]:hover .mt-2 span:first-child{ font-weight: 600 !important; }
/* Mobile: items are white vertical cards with a persistent indigo border (Figma
   "Latest Blogs"). Desktop keeps the rest=transparent -> hover=indigo behaviour. */
@media (max-width: 1023px){
  .blogs-sidebar-widget a[data-sidebar-list-item]{ border-color: #2b286f !important; }
}
/* Centre location cards: desktop 1px border (rest transparent -> hover #2b286f).
 * Mobile (Figma city-individual): navy border at rest (no shadow). */
article.centre-loc-card{
  border: 1px solid transparent !important;
}
article.centre-loc-card:hover{
  border: 1px solid #2b286f !important;
}
@media (max-width: 1023px){
  article.centre-loc-card{ border: 1px solid #2b286f !important; }
}
@media (min-width: 1024px){
  .pb-130.pt-70{
    padding-top: 70px;
    padding-bottom: 130px;
  }
  .blogs-search{
    margin-top: -100px;
  }
}
@media (max-width: 1430px){
  .lg\:px-0{
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}
@media (min-width: 1024px) {
    .lg\:w-\[621px\] {
        width: auto !important;
    }
}
@media (max-width: 997px){
  .table-overflowing{
    width: 720px;   /* 6 cols × 120px → 3 columns visible per Figma mobile */
  }
}

/* Prevent why-cfs feature cards from stretching to match the tallest
 * item in the same grid row when one card reveals extra content on hover.
 * Keeps other cards visually stable. */
.blogs-why-cfs .grid {
  align-items: start;
}
.blogs-why-cfs .blogs-why-card {
  align-self: start;
}

/* Why-CFS hover: reduce padding and heading size without expanding other cards */
.blogs-why-cfs .blogs-why-card {
  transition: padding 0.18s ease, background-color 0.2s ease;
}
.blogs-why-cfs .blogs-why-card:hover {
  padding-top: 0.5rem; /* smaller vertical padding on hover */
  padding-bottom: 0.5rem;
}
.blogs-why-cfs .blogs-why-card h3 {
  transition: font-size 0.18s ease, color 0.18s ease;
}
@media (min-width: 1024px) {
  .blogs-why-cfs .blogs-why-card:hover h3 {
    font-size: 29px; /* slightly reduced from 31px */
  }
}
@media (max-width: 1023px) {
  .blogs-why-cfs .blogs-why-card:hover h3 {
    font-size: 18px; /* slightly reduced on mobile */
  }
}

/* Override hover color/background behaviors applied via Tailwind classes
 * so cards keep their original colors; only scale the heading on hover. */
.blogs-why-cfs .blogs-why-card:hover {
  background-color: transparent !important;
}
.blogs-why-cfs .blogs-why-card h3 {
  color: #000 !important;
  transform-origin: left top;
  transition: transform 0.18s ease, color 0.18s ease;
}
.blogs-why-cfs .blogs-why-card:hover h3 {
  transform: scale(0.95);
  color: #000 !important;
}
.blogs-why-cfs .blogs-why-card span[aria-hidden="true"] {
  background-color: #000 !important;
}
.blogs-why-cfs .blogs-why-card:hover span[aria-hidden="true"] {
  background-color: #000 !important;
}

/* Keep the hover paragraph color same as the heading (black) */
.blogs-why-cfs .blogs-why-card p {
  color: #000 !important;
  transition: color 0.18s ease;
}
.blogs-why-cfs .blogs-why-card:hover p {
  color: #000 !important;
}
html, body{
  scroll-behavior: smooth;
}
/* InnovEyes "See Beyond 6/6" body: highlighted phrase is Poppins SemiBold 600
   (Figma), not the browser-default bold 700 for <strong>. */
.see-beyond strong { font-weight: 600; }

/* InnovEyes "What Is..." lead: the trailing surgery-types phrase is Poppins
   Medium 500 (Figma), not the browser-default bold 700 for <strong>. */
.innov-what-is__lead strong { font-weight: 500; }

/* InnovEyes step-by-step procedure stepper: inactive circle grey, active yellow
   (Figma). JS toggles .is-active on click. */
.proc-step { background-color: #d9d9d9; color: #ffffff; cursor: pointer; }
.proc-step.is-active { background-color: #ffcb05; color: #2b286f; }

/* Procedure stepper: fade the active panel in when it becomes visible. */
@keyframes procPanelFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.proc-panel:not(.hidden) { animation: procPanelFade 0.35s ease; }

/* Core Technology tabs: fade the active panel in when it becomes visible. */
@keyframes techPanelFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.innov-tech-panels [data-tab-panel]:not(.hidden) { animation: techPanelFade 0.35s ease; }

/* InnovEyes benefit cards: the phrase before the colon is Poppins SemiBold 600
   (Figma), the rest stays Light 300 (the wrapper default). */
.innov-benefit-cards strong { font-weight: 600; }

/* InnovEyes mobile Core Technology — folder tabs (node 3121:23328).
   Active tab merges with the grey #f1f1f1 card; inactive tab is a white "notch"
   with rounded outer corners and a CONCAVE (inverted-radius) inner-bottom corner
   where the grey content curves up into it. Works for whichever tab is active. */
.mtab { position: relative; }
/* active tab = grey folder tab (rounded top); inactive = transparent (white card shows) */
.mtab[data-active="true"] { background: #f1f1f1; z-index: 1; border-radius: 15px 15px 0 0; }
/* concave flare bridging the active tab's inner-bottom corner into the grey content bar */
.mtab[data-active="true"]::after {
  content: ""; position: absolute; bottom: 0; width: 16px; height: 16px; background: #f1f1f1;
}
.mtab[data-active="true"]:first-child::after {
  right: -16px;
  -webkit-mask: radial-gradient(circle 16px at top right, transparent 0 16px, #000 16px);
          mask: radial-gradient(circle 16px at top right, transparent 0 16px, #000 16px);
}
.mtab[data-active="true"]:last-child::after {
  left: -16px;
  -webkit-mask: radial-gradient(circle 16px at top left, transparent 0 16px, #000 16px);
          mask: radial-gradient(circle 16px at top left, transparent 0 16px, #000 16px);
}
/* grey content bar — round the top corner on the NOTCH (inactive) side only */
[data-mtab-card][data-notch="right"] [data-mtab-body] { border-top-right-radius: 15px; }
[data-mtab-card][data-notch="left"]  [data-mtab-body] { border-top-left-radius: 15px; }

/* ── News & Media cards (news-media.html) ────────────────────────────────────
   Card hover = full colour-invert: bg→navy #2b286f, border off, all text→white.
   Matches Figma grid-card hover variant 3121:16909 (Component 232 → hover). */
.nm-card { transition: background-color 200ms ease, border-color 200ms ease; }
.nm-card:hover {
  background-color: #2b286f;
  border-color: #2b286f;
}
.nm-card:hover .nm-card__meta,
.nm-card:hover .nm-card__title,
.nm-card:hover .nm-card__title > h2,
.nm-card:hover .nm-card__title > h3,
.nm-card:hover .nm-card__excerpt,
.nm-card:hover .nm-card__excerpt > p { color: #ffffff; }
.nm-card:hover .nm-card__meta svg { color: #ffffff; }

/* city-individual hero: form column constrained to Figma 621px width at desktop */
@media (min-width:1024px){
  .city-hero .hero-callback{ width:621px; align-self:flex-start; }
}

/* doctor-individual Qualification/Experience card hover (Figma "Qualification DESKTOP"
   ON_HOVER → variant 3121:14923, SMART_ANIMATE 0.4s): header bar navy→yellow,
   title text white→navy. Body unchanged. */
.qual-card__header { transition: background-color 400ms cubic-bezier(0.4,0,1,1), color 400ms cubic-bezier(0.4,0,1,1); }
.qual-card:hover .qual-card__header { background-color: #ffcb05; color: #2b286f; }

/* doctor-individual Qualification/Experience bulleted list — custom round markers
   (Figma renders a plain text block; per Arjun the content is shown as a bulleted list).
   Dot sized + positioned here; bullets align with the card content padding, text hangs. */
.qual-card__body,
.research-list { list-style: none; }
.qual-card__body > li { position: relative; padding-left: 22px; }
.research-list > li { position: relative; padding-left: 22px; }
.qual-card__body > li::before,
.research-list > li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: #2b286f;
}

/* doctor-individual Awards card grey body with a top-center notch (badge pocket).
   Shape exported from Figma (Rectangle 1036) used as an alpha mask so the notch
   scales with the card and the page background shows through the cutout. */
.award-card__body {
  background-color: #f1f1f1;
  -webkit-mask: url("../assets/images/doctor-individual/award-card-notch.svg") no-repeat center / 100% 100%;
          mask: url("../assets/images/doctor-individual/award-card-notch.svg") no-repeat center / 100% 100%;
}

/* Awards badge medal — masked so it recolors on card hover (Figma ON_HOVER variant:
   medal #2b286f -> #ffcb05, SMART_ANIMATE 0.3s). Star is a cutout in the svg, so the
   notch background shows through it in both states. */
.award-card__badge {
  background-color: #2b286f;
  -webkit-mask: url("../assets/images/doctor-individual/award-badge-medal.svg") no-repeat center / contain;
          mask: url("../assets/images/doctor-individual/award-badge-medal.svg") no-repeat center / contain;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: center;
  transition: background-color 300ms cubic-bezier(0.4, 0, 1, 1), transform 300ms cubic-bezier(0.4, 0, 1, 1);
}
/* hover: medal recolors navy->yellow AND rotates ~22.3deg (Figma hover variant) */
.award-card:hover .award-card__badge { background-color: #ffcb05; transform: translateX(-50%) rotate(-22.345deg); }

/* Awards slider arrows — disabled at the track ends shows at 50% opacity (Figma
   left arrow is opacity 0.5 when no previous). Not clickable while disabled. */
.awards [data-slider-prev]:disabled,
.awards [data-slider-next]:disabled { opacity: 0.5; pointer-events: none; }

/* ============================================================
   blog-individual — Side Effects "folder tab" (Figma Component 158)
   Navy notched vector (vectorPaths): M0,0 491,0 491,90.73 954,90.73 954,442 0,442
   — corners r15 INCLUDING the CONCAVE inner corner r15 at the active-tab→panel step.
   Reproduced (no screenshots; from IR path + corners only):
   (a) active tab is rounded-t-[15px] (Tailwind) + a scoop pseudo carves the concave
       inner corner where it meets the panel (box-shadow fill + inverse radius —
       same technique as the cataract connected tabs);
   (b) the panel top corner ADJACENT to the active tab is SQUARED so the tab's straight
       edge connects flush (no white gap); the far corner stays r15. Side flips via
       :has() on whichever tab is active.
   ============================================================ */
/* All state changes share the Figma SMART_ANIMATE timing: 300ms ease-in
   (cubic-bezier(0.4,0,1,1)) — so tab colour, scoop, and panel corner morph together
   instead of some snapping while others fade. */
#side-effects [role="tablist"] .se-tab { position: relative; }
/* scoops are ALWAYS rendered (so they can fade); opacity toggles with active state */
#side-effects [role="tablist"] .se-tab::before,
#side-effects [role="tablist"] .se-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 15px;
  height: 15px;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.4, 0, 1, 1);
}
/* inner concave scoop toward the panel centre — a navy quarter with the corner
   facing the white bitten out (radial-gradient fills the box deterministically; a
   box-shadow scoop leaves the pseudo's own box partly uncovered = white notch) */
#side-effects [role="tablist"] .se-tab::before {
  left: -15px;
  background: radial-gradient(circle at top left, transparent 14.5px, #2b286f 15px);
}
#side-effects [role="tablist"] .se-tab::after {
  right: -15px;
  background: radial-gradient(circle at top right, transparent 14.5px, #2b286f 15px);
}
#side-effects [role="tablist"] .se-tab[data-active="true"]::before,
#side-effects [role="tablist"] .se-tab[data-active="true"]::after {
  opacity: 1;
}
/* the OUTER scoop (away from the panel centre) never shows */
#side-effects [role="tablist"] .se-tab:first-child::before,
#side-effects [role="tablist"] .se-tab:last-child::after {
  display: none;
}
/* panel corner morphs at the same 300ms; square the corner that meets the active
   tab (flush, no gap), round the far one — flipped via :has() on the active tab */
#side-effects .blog-tab-panels {
  transition: border-radius 300ms cubic-bezier(0.4, 0, 1, 1);
}
#side-effects:has(.se-tab[data-target="common"][data-active="true"]) .blog-tab-panels {
  border-radius: 0 15px 15px 15px;
}
#side-effects:has(.se-tab[data-target="rare"][data-active="true"]) .blog-tab-panels {
  border-radius: 15px 0 15px 15px;
}

/* blog-individual — Table of Content numbered list (Figma: ordered list 1..N, numbers
   right-aligned, navy Light, same size as items; not in IR text runs = Figma list numbering). */
.blog-toc .toc-list { counter-reset: toc; }
.blog-toc .toc-list > li { counter-increment: toc; display: flex; align-items: baseline; }
.blog-toc .toc-list > li::before {
  content: counter(toc) ".";
  flex: 0 0 auto;
  min-width: 21px;
  text-align: right;
  margin-left: -18px;   /* hang the number into the card's left padding so link text lands at Figma x29 */
  margin-right: 6px;
  color: #2b286f;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 23px;
}
@media (min-width: 1024px) {
  .blog-toc .toc-list > li::before { font-size: 20px; line-height: 30px; min-width: 24px; }
}

/* ============================================================
   Reusable 2-tab folder-tab (.ftab) — navy active block notched into a navy panel,
   navy-text inactive tab. Used by the MOBILE Types/Uses tab groups (Figma Components
   165/166): each toggles 2 tabs. Same notched-vector technique as #side-effects.
   ============================================================ */
.ftab [role="tablist"] .ftab-btn { position: relative; }
.ftab [role="tablist"] .ftab-btn::before,
.ftab [role="tablist"] .ftab-btn::after {
  content: ''; position: absolute; bottom: 0; width: 15px; height: 15px;
  background: transparent; pointer-events: none; opacity: 0;
  transition: opacity 300ms cubic-bezier(0.4, 0, 1, 1);
}
.ftab [role="tablist"] .ftab-btn::before { left: -15px;  background: radial-gradient(circle at top left,  transparent 14.5px, #2b286f 15px); }
.ftab [role="tablist"] .ftab-btn::after  { right: -15px; background: radial-gradient(circle at top right, transparent 14.5px, #2b286f 15px); }
.ftab [role="tablist"] .ftab-btn[data-active="true"]::before,
.ftab [role="tablist"] .ftab-btn[data-active="true"]::after { opacity: 1; }
.ftab [role="tablist"] .ftab-btn:first-child::before,
.ftab [role="tablist"] .ftab-btn:last-child::after { display: none; }
.ftab .ftab-panel { transition: border-radius 300ms cubic-bezier(0.4, 0, 1, 1); }
.ftab:has(.ftab-btn:first-child[data-active="true"]) .ftab-panel { border-radius: 0 15px 15px 15px; }
.ftab:has(.ftab-btn:last-child[data-active="true"])  .ftab-panel { border-radius: 15px 0 15px 15px; }

/* ============================================================
   Bordered grey 3-tab folder-tab (.ftabb) — MOBILE Uses (Figma Component 163):
   grey #f1f1f1 panel + 1px navy border, r15, notched; active = grey raised block
   (navy Medium text) with the notch concave carrying the navy border arc; inactive
   = navy text. Image + body sit INSIDE the grey panel.
   ============================================================ */
.ftabb [role="tablist"] .ftabb-btn { position: relative; }
.ftabb [role="tablist"] .ftabb-btn::before,
.ftabb [role="tablist"] .ftabb-btn::after {
  content: ''; position: absolute; bottom: 0; width: 15px; height: 15px;
  pointer-events: none; opacity: 0;
  transition: opacity 300ms cubic-bezier(0.4, 0, 1, 1);
}
.ftabb [role="tablist"] .ftabb-btn::before { left: -15px;  background: radial-gradient(circle at top left,  transparent 14px, #2b286f 14px, #2b286f 15px, #f1f1f1 15px); }
.ftabb [role="tablist"] .ftabb-btn::after  { right: -15px; background: radial-gradient(circle at top right, transparent 14px, #2b286f 14px, #2b286f 15px, #f1f1f1 15px); }
.ftabb [role="tablist"] .ftabb-btn[data-active="true"]::before,
.ftabb [role="tablist"] .ftabb-btn[data-active="true"]::after { opacity: 1; }
.ftabb [role="tablist"] .ftabb-btn:first-child::before,
.ftabb [role="tablist"] .ftabb-btn:last-child::after { display: none; }
.ftabb .ftabb-panel { transition: border-radius 300ms cubic-bezier(0.4, 0, 1, 1); }
.ftabb:has(.ftabb-btn:first-child[data-active="true"]) .ftabb-panel { border-top-left-radius: 0; }
.ftabb:has(.ftabb-btn:last-child[data-active="true"])  .ftabb-panel { border-top-right-radius: 0; }

#qualification,#specializations,#research,#awards {
  scroll-margin-top: 100px; /* Change 100px to the height of your top menu */
}

/* ===========================================================================
   RESPONSIVE — 1024px to 1439px band
   The desktop layout was designed at one width (1398px content / 1440px frame).
   These rules cover the laptop widths between the mobile and desktop designs.
   The Why Us and Journey markup lives in CMS content, so their fixed widths
   can only be corrected from here.
   =========================================================================== */

/* Hero — a fixed 1398x393 canvas. The stats sit at left:56px, the photo at
   left:360px and the callback form at right:39px, so once the card is narrower
   than ~1392px the photo runs under the form. The action cards above have the
   same problem against the H1.
   The mobile composition is not a usable fallback here: it hides the stats and
   the callback form entirely. */

/* Scale the whole hero block as one unit — heading, action cards and navy card
   together — so every designed relationship survives: cards top-right, H1 left,
   and the photo bleeding up (top:-116px) into the white gap between them.

   Scaling only the navy card was half a fix. The card shrank but the action
   cards stayed stacked directly above it, and the photo's upward bleed then
   landed on top of them.

   The block is held at its design size (1440x675 measured at desktop) and
   centred before scaling: 720px is half of 1440, so left:calc(50% - 720px) puts
   its centre on the parent's centre and scaling about that centre keeps it
   there. The negative margin reclaims what transform leaves behind, since
   transform paints without changing layout size.

   ponytail: the scale is stepped per band, not derived from the viewport. CSS
   cannot divide one length by another to make a unitless number — a
   calc((100vw - 48px)/1440) yields a LENGTH, scale() rejects it, and the
   transform is silently dropped with no error. Each step is
   (band minimum - 24) / 1440, so the block always fits its narrowest width. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .hero-banner > div {
    width: 1440px !important;
    max-width: none !important;
    position: relative;
    left: calc(50% - 720px);
    transform-origin: top center;
  }
}
@media (min-width: 1024px) and (max-width: 1119px) {
  .hero-banner > div { transform: scale(0.69); margin-bottom: -209px; }
}
@media (min-width: 1120px) and (max-width: 1199px) {
  .hero-banner > div { transform: scale(0.76); margin-bottom: -162px; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  .hero-banner > div { transform: scale(0.81); margin-bottom: -128px; }
}
@media (min-width: 1280px) and (max-width: 1359px) {
  .hero-banner > div { transform: scale(0.87); margin-bottom: -88px; }
}
@media (min-width: 1360px) and (max-width: 1439px) {
  .hero-banner > div { transform: scale(0.92); margin-bottom: -54px; }
}

/* Why Us — the desktop panel is a fixed 1398px canvas with its cards pinned at
   hard coordinates (left:972px and so on), so shrinking the panel clips the
   right-hand column.

   CHANGED 2026-08-25. This used to fall back to the stacked phone composition
   for everything below 1440. That worked, but it left a 2545px single column on
   a 1439px laptop against the 1530px designed panel at 1440 — the largest jump
   on the page, and the one Arjun reads as "the layout shifts". Arjun called it
   on 2026-08-25: hold the desktop composition as low as it will go.

   So the canvas is now SCALED between 1024 and 1439, exactly as the hero already
   is, and the stacked fallback is kept only below 1024 where the phone layout is
   the design. Same mechanics as the hero: hold the block at its design width,
   centre it with left:calc(50% - halfWidth), scale about the top centre, and
   reclaim the leftover space with a negative margin-bottom, because transform
   paints without changing layout size.

   Design size measured at 1440: 1398 x 667. Each step is (band minimum - 24) /
   1398, so the canvas always fits its narrowest width, and the margin is
   667 * (scale - 1). The scale must be a unitless number — calc() on two lengths
   is silently dropped. */
@media (max-width: 1023px) {
  .why-us .lg\:w-\[1398px\] {
    display: flex !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  .why-us .lg\:w-\[1398px\] > * {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
  }
  /* The tile grid and the pinned desktop arrow only make sense on the desktop
     canvas. The arrow is matched by .absolute so the MOBILE arrow — a different
     element, relative, carrying the "Learn More About Us" link to /about-us —
     survives. Hiding both, as an earlier version did, dropped that link
     entirely between 1024 and 1439. */
  .why-us .whyus-grid,
  .why-us .group\/arrow.absolute {
    display: none !important;
  }
  .why-us .group\/arrow:not(.absolute) {
    display: block !important;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .why-us .lg\:w-\[1398px\] {
    width: 1398px !important;
    max-width: none !important;
    position: relative;
    left: calc(50% - 699px);
    transform-origin: top center;
  }
  /* The mobile arrow duplicates the pinned one once the desktop canvas is back. */
  .why-us .group\/arrow:not(.absolute) {
    display: none !important;
  }
}
@media (min-width: 1024px) and (max-width: 1119px) {
  .why-us .lg\:w-\[1398px\] { transform: scale(0.71); margin-bottom: -193px; }
}
@media (min-width: 1120px) and (max-width: 1199px) {
  .why-us .lg\:w-\[1398px\] { transform: scale(0.78); margin-bottom: -147px; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  .why-us .lg\:w-\[1398px\] { transform: scale(0.84); margin-bottom: -107px; }
}
@media (min-width: 1280px) and (max-width: 1359px) {
  .why-us .lg\:w-\[1398px\] { transform: scale(0.89); margin-bottom: -73px; }
}
@media (min-width: 1360px) and (max-width: 1439px) {
  .why-us .lg\:w-\[1398px\] { transform: scale(0.95); margin-bottom: -33px; }
}

/* The Why-Us intro keeps a 270px cap meant for a phone column, which reads as a
   narrow ragged strip once the stacked panel is full width.

   SCOPE CORRECTED 2026-08-12: this rule was written inside the
   `max-width: 1439px` block above, so it also fired below 1024 — where the
   section is a NARROW column and the other four section headers cap their intro
   at 240px. It blew the Why-Us intro to 615-720px, which in turn pushed its arrow
   button from x271 out to x646, because the intro and the arrow are flex siblings.
   One rule, two symptoms, and it made Why-Us the odd one out in the pattern.
   Now bounded to 1024+, where the panel really is full width. */
/* WITHDRAWN 2026-08-25: this widened the intro for the STACKED panel. The
   1024-1439 band now renders the designed canvas at scale, where the 270px cap
   is the design. Kept as a comment so the reasoning is not rediscovered.
@media (min-width: 1024px) and (max-width: 1439px) {
  .why-us [class*="max-w-[270px]"] { max-width: 720px !important; }
} */

/* Why Us photos — a pinned pixel height against a fluid width, so the photo slot
   letterboxes and object-fit:cover discards most of the picture. The two photo
   cards carry `h-[203px]` (phone column) and `lg:h-[386px]` (pinned desktop
   portrait). Below 1440 the block above releases the 1398px canvas to a stacked
   full-width panel, so the width grows while both heights stay put. Measured
   slot ratios and the resulting crop of a 1.50 photo:

     375   345x203   1.70   12%   <- the phone design, accepted
     768   738x203   3.64   59%   <- squeezed strip
     1024  994x386   2.58   42%
     1280  1250x386  3.24   54%   <- worse than 768; degrades further to 1439

   Hold a ratio per band instead of the pixel height, so the crop stops changing
   with the viewport. Below 1024 use the phone slot's own 1.70. From 1024 use
   2.58, the ratio 1024 already renders and which was reviewed as acceptable, so
   the crop no longer worsens as the panel widens.

   This does NOT clear the height — clearing it collapses these cards, which is
   why the block above leaves it alone. `!important` is required because the
   Tailwind CDN loads after this file and would otherwise win with the height
   class. 1440+ keeps the original 327x386 portrait, untouched. */
/* BAND CORRECTED 2026-08-12: this was first bounded at `min-width: 640px` on the
   assumption that the problem was the "tablet tier". It is not tier-shaped — the
   phone tier is fluid too, so between 376 and 639 the ratio still drifted (450x203
   = 2.22 at 480, against 1.70 at 375). Bounded only at the top now. At 375 the
   result is 345x203, identical to the phone design, so nothing changes there. */
@media (max-width: 1023px) {
  .why-us [class*="h-[203px]"] {
    height: auto !important;
    aspect-ratio: 1.7;
  }
}
/* WITHDRAWN 2026-08-25: the 2.58 ratio corrected the photo slot in the STACKED
   panel, which no longer runs above 1023. On the scaled canvas the photos keep
   their designed 327x386 slot.
@media (min-width: 1024px) and (max-width: 1439px) {
  .why-us [class*="h-[203px]"] { height: auto !important; aspect-ratio: 2.58; }
} */

/* Journey — the desktop radial timeline places 9 children at hard pixel
   coordinates inside a 1383x680 box, so it cannot shrink without scattering
   them. Show it only where it fits; below that use the vertical timeline the
   section already ships for mobile. */
/* CHANGED 2026-08-25 with the Why-Us canvas above: scale the radial timeline
   between 1024 and 1439 instead of dropping to the vertical mobile one. Below
   1024 the vertical timeline is still the design. Design size 1383 x 680, so the
   steps are (band minimum - 24) / 1383 and the margin is 680 * (scale - 1). */
@media (max-width: 1023px) {
  .journey .hidden.lg\:block:has(.journey__timeline) {
    display: none !important;
  }
  .journey .hidden.lg\:block:has(.journey__timeline) + .lg\:hidden {
    display: block !important;
  }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .journey .hidden.lg\:block:has(.journey__timeline) {
    width: 1383px !important;
    max-width: none !important;
    position: relative;
    left: calc(50% - 691.5px);
    transform-origin: top center;
  }
}
@media (min-width: 1024px) and (max-width: 1119px) {
  .journey .hidden.lg\:block:has(.journey__timeline) { transform: scale(0.72); margin-bottom: -190px; }
}
@media (min-width: 1120px) and (max-width: 1199px) {
  .journey .hidden.lg\:block:has(.journey__timeline) { transform: scale(0.79); margin-bottom: -143px; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  .journey .hidden.lg\:block:has(.journey__timeline) { transform: scale(0.85); margin-bottom: -102px; }
}
@media (min-width: 1280px) and (max-width: 1359px) {
  .journey .hidden.lg\:block:has(.journey__timeline) { transform: scale(0.90); margin-bottom: -68px; }
}
@media (min-width: 1360px) and (max-width: 1439px) {
  .journey .hidden.lg\:block:has(.journey__timeline) { transform: scale(0.96); margin-bottom: -27px; }
}

/* Centres slider — the -mx-4 full-bleed bleeds 2px past the viewport.
   Clip at the parent; overflow-x:clip does not create a scroll container, so
   the sticky header keeps working. */
@media (max-width: 1023px) {
  :has(> .centres-grid) {
    overflow-x: clip;
  }
}

/* Testimonials — a 1392x599 canvas: photo collage pinned at left:-118px, quote
   text at left:654px running to 1354px. Below 1440 the box is narrower than
   that, so the text was clipped by 438px at 1024.

   CHANGED 2026-08-25 with Why-Us: this used to swap in the phone card for
   1024-1439, which left a single portrait floating in 370px of empty grey on
   either side. Scale the canvas instead, same as the hero and Why-Us. Steps are
   (band minimum - 24) / 1392, margin is 599 * (scale - 1). */
@media (min-width: 1024px) and (max-width: 1439px) {
  .testimonials__wrapper {
    width: 1392px !important;
    max-width: none !important;
    position: relative;
    left: calc(50% - 696px);
    transform-origin: top center;
  }
}
@media (min-width: 1024px) and (max-width: 1119px) {
  .testimonials__wrapper { transform: scale(0.71); margin-bottom: -174px; }
}
@media (min-width: 1120px) and (max-width: 1199px) {
  .testimonials__wrapper { transform: scale(0.78); margin-bottom: -132px; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  .testimonials__wrapper { transform: scale(0.84); margin-bottom: -96px; }
}
@media (min-width: 1280px) and (max-width: 1359px) {
  .testimonials__wrapper { transform: scale(0.89); margin-bottom: -66px; }
}
@media (min-width: 1360px) and (max-width: 1439px) {
  .testimonials__wrapper { transform: scale(0.95); margin-bottom: -30px; }
}

/* All Centres heading wraps at 1024-1143 — the title card is one cell of a
   three-column grid, so it is 300px wide at 1024 against 416px at 1440, while the
   H2 stays at 69px. "All Centres" needs about 336px at that size, so it breaks to
   two lines and the section header grows by 90px. Every other section header on
   the page is one line here.
   Step the size down for the band only; 1144 and up already fit at 69px.
   Added 2026-08-25. `!important` because the Tailwind CDN loads after this file. */
@media (min-width: 1024px) and (max-width: 1143px) {
  .centres-title-card h2 {
    font-size: 56px !important;
    line-height: 60px !important;
  }
}

/* Horizontal accordion from 1024, not 1280 — 2026-08-25.

   The component's breakpoint was pushed from 1024 to 1280 on 2026-08-11 for one
   reason: below 1280 the panel was squeezed to 277px and the copy was cut. The
   fluid scale added today removes that reason — the canvas is held at its 1380px
   design width and scaled to fit, so the panel keeps its designed geometry all
   the way down. Arjun's standing instruction is to hold the desktop composition
   as low as it goes, and the client reported the accordion flipping to vertical
   too early.

   The switch lives in five places (see 6ee0535, which moved them up together):
   the shell's flex-direction, its height, the spec-item `contents` display, the
   trigger geometry, and four media queries. The four media queries are re-pointed
   to 1024 above. The other four are `xl:` classes in the twig, replicated here
   for the 1024-1279 band rather than edited in shared markup — the same twig
   renders the city and centre pages.

   Move all five together or you get the hybrid layout with staggered bars that
   6ee0535 warns about. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .specialities-accordion {
    flex-direction: row !important;
    height: 636px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #F1F1F1;
  }
  .specialities-accordion .spec-item {
    display: contents !important;
  }
  /* Trigger geometry is the fifth place the switch lives. Below `xl:` the
     trigger is `w-full h-[82px]`, so in a row layout nine of them ate 1309px of
     the 1380px track and left the open panel 48px. These mirror
     `xl:items-start xl:w-auto xl:h-[636px] xl:shrink-0 xl:pt-10`. */
  .specialities-accordion .spec-trigger {
    align-items: flex-start !important;
    height: 636px !important;
    flex-shrink: 0 !important;
    padding-top: 2.5rem !important;
  }
}

/* Specialities panel at 1280-1439 — the horizontal accordion runs from 1280, but
   the panel is a fixed 636px row and its width shrinks with the viewport, so the
   same CMS copy takes more lines. Measured internal overflow of `.spec-panel.open`:
   25px at 1440 (accepted 2026-08-11) but 112px at 1280, which puts the Read More
   button below the panel fold. The content is reachable by scrolling inside the
   panel, but a primary CTA that needs an inner scroll to find is a functional loss.

   Same fix as the hero, Why-Us and testimonials: hold the accordion at its design
   width of 1380 and scale it. The panel then always has the 1440 geometry, so the
   overflow stays at the accepted 25px across the whole band.
   Steps are (band minimum - 24) / 1380, margin is 636 * (scale - 1).
   Added 2026-08-25. The vertical accordion below 1280 is untouched — that layout
   is class-driven at `xl:`, so a scaled canvas would not restore it. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .specialities-accordion {
    width: 1380px !important;
    max-width: none !important;
    position: relative;
    left: calc(50% - 690px);
    transform-origin: top center;
  }
}
@media (min-width: 1280px) and (max-width: 1359px) {
  .specialities-accordion { transform: scale(0.91); margin-bottom: -57px; }
}
@media (min-width: 1360px) and (max-width: 1439px) {
  .specialities-accordion { transform: scale(0.96); margin-bottom: -25px; }
}

/* Specialities — a horizontal accordion sized for ~1392px: nine 78px vertical
   triggers plus a 700px panel. Below 1280 the panel is squeezed to 277px, the
   description rewraps to 1360px tall and 724px of it is cut off by the panel's
   fixed 636px height.
   Handled at source rather than from here: the component's own breakpoint moved
   from 1024 to 1280, in its twig classes and in the four media queries above.
   Overriding it from this block produced a hybrid — nine columns with staggered
   bars — because the shell stayed lg:flex-row and the labels stayed rotated.

   ponytail: an earlier attempt also swapped the trigger's fixed height for a
   min-height, to guard against CMS copy longer than the design's sample. That
   blew the triggers up to 2618px each, because a vertical-writing-mode element
   with height:auto resolves against its rotated text. Desktop truncation of very
   long copy is a real but pre-existing risk; fix it by scrolling the panel,
   never by freeing that height. */

/* ===========================================================================
   TABLET TIER — 640px to 1023px
   The client supplied a mobile design and a desktop design, nothing between.
   Below 1024 every card is w-[calc(100vw-2rem)], so a doctor card rendered
   991px wide at a 1023px viewport against 314px on desktop.
   Two across in this band. Card width solves for the container's 1rem side
   padding plus the 1rem track gap: (100vw - 2rem - 1rem) / 2.
   =========================================================================== */
@media (min-width: 640px) and (max-width: 1023px) {
  .doctor-card,
  .centre-card {
    width: calc((100vw - 3rem) / 2) !important;
  }
  /* !important is required: the Play CDN injects Tailwind's `.flex` after this
     stylesheet, so a plain `display:grid` loses and the columns silently do
     nothing (grid-template-columns still computes, which makes it look applied) */
  .blogs__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}

/* ===========================================================================
   COMPRESSED DESKTOP TIER — 992px to 1023px
   Arjun, 2026-08-25: "some cards get vertically stacked easily, stick to the
   desktop layout as long as we can."

   The header already leaves hamburger mode at 992 (commit 5106418). These two
   containers follow it, so 992 is one consistent line for "desktop starts here":

   - blogs: 2-up cards are 422-472px wide between 900 and 1023, against 287px
     when the 3-up grid arrives at 1024. Three across at 992 gives 304px, which
     is WIDER than the 1024 desktop card, so nothing is squeezed.
   - International Patients: the panel stacks photo-over-text below 1024. The
     copy block is a fixed 615px, so at 992 the row still leaves 332px for the
     photo.

   The doctor and centre CARDS are deliberately NOT included. Their mobile and
   desktop variants differ in more than column count — badge colour, the
   underline on the booking link, type sizes — so moving only the width would
   give a desktop column count with phone styling. Moving those needs the same
   full compressed tier the header got.
   =========================================================================== */
@media (min-width: 992px) and (max-width: 1023px) {
  .blogs__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
  }
  :has(> .international__content) {
    flex-direction: row !important;
    gap: 13px;
  }
  /* The copy block is 615px in the design; hold it and give the photo the rest.
     The photo carries `w-full lg:flex-1 lg:min-w-0`, so below 1024 it is a
     100%-wide block that a row layout shrinks to zero — it needs the flex
     treatment its own `lg:` classes would have given it. */
  .international__content {
    flex: 0 0 615px !important;
  }
  .international__image {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    align-self: stretch;
    /* The wrapper carries a phone-sized `h-[391px]` that `lg:h-auto` clears only
       from 1024. In a row it leaves a grey band under the photo. */
    height: auto !important;
  }
  .international__image img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover;
  }
}

/* Centres + featured doctor — two fixed-desktop leftovers that collide on
   smaller screens.

   The featured doctor photo is 596px tall inside a 400px frame with
   overflow-visible: on desktop that is a deliberate bleed above the card, but
   below 1024 the card sits directly under the section heading, so the photo
   lands on top of it. Clip it there. object-position stays top, so the face is
   kept and the crop comes off the bottom. */
@media (max-width: 1023px) {
  .featured-doctor__image {
    overflow: hidden !important;
  }
  /* The source renders 723x598 inside a 400px-tall frame, so clipping alone cut
     198px off the body. height:100% does not help — the img's direct parent has
     auto height, so the percentage never resolves against the 400px frame.
     Pin the height in px and contain it, so the whole figure fits: nothing
     cropped, and nothing bleeding up into the section heading either. */
  .featured-doctor__image img {
    height: 400px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: bottom !important;
  }
}

/* Centres — the arrow is pinned at left:262px inside the title card. That fits
   the 416px card at desktop, but the grid cell narrows to 295px at 1024, so a
   104px arrow at 262 runs 71px past the edge and onto the first centre card.
   Anchor it to the card's right edge until the cell is wide enough to hold the
   designed position (262 + 104 = 366px, reached around 1162px). */
@media (min-width: 1024px) and (max-width: 1161px) {
  .centres-title-card .arrow-link {
    left: auto !important;
    right: 0 !important;
  }
}

/* About — the stats row is CMS content: a 716px shrink-0 photo beside the stat
   list. At 1024 the container is 949px, so the list is left 190px when its
   pills need 404, and it pushes 184px off-screen. Let the photo shrink and cap
   it at half the row until the design width is available. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .about-stats .lg\:w-\[716px\] {
    width: auto !important;
    max-width: 50% !important;
    flex-shrink: 1 !important;
  }
}

/* Cataract / treatment pages — the Understanding and Patient Journey sections
   are CMS content holding six fixed containers (5 x 1398px, 1 x 1382px), so
   they ran 389px past a 1009px viewport. Let them fill the container instead.
   These sections use the idiom at several widths (1398, 1382, 1254, 1246,
   1024), and the treatment pages are generated per term — cataract, LASIK and
   the rest all share it. Match any fixed lg:w-[...] inside them rather than
   listing widths that will keep appearing.
   Scoped to these sections deliberately: the homepage's 1398px canvases have
   absolutely-positioned children and must stay fixed, so a blanket rule would
   break them.

   width:auto, not width:100%. Several of these are flex items (`flex-1
   lg:w-[861px]`), and forcing 100% on a flex item makes it claim the full row
   next to its siblings — that pushed cataract at 1280 from 10px over to 178px.
   auto simply releases the fixed width and lets the parent decide. */
@media (max-width: 1439px) {
  /* Applied to every fixed lg:w-[...] in main, not a list of sections. The
     idiom recurs across all ten treatment terms and turned up again on glaucoma
     in a section the scoped version did not cover. Capping is safe generally;
     it never clears a declared width. The hero is excluded by construction —
     it uses lg:w-full/lg:max-w-, not lg:w-[, and is scaled as a whole block. */
  main [class*="lg:w-["] {
    /* Cap, do not clear. An earlier version used width:auto, which also stripped
       the 385px from a `shrink-0` sidebar; that sidebar then grew to max-content
       and starved its `flex-1` sibling to width:0, so the sibling's paragraphs
       spilled 147px right and gave the page a phantom horizontal scroll —
       nothing visible outside the viewport, but the page scrolled.
       max-width leaves each declared width intact and only stops it exceeding
       the space available. */
    max-width: 100% !important;
    /* a flex item defaults to min-width:auto and will not shrink below its
       content */
    min-width: 0 !important;
  }
}

/* Contact — the "get directions" link is pinned at lg:left-[1066px] inside the
   hero, which is off-screen once the viewport is under ~1250. Its parent is a
   flex column below lg, so returning it to flow restores the mobile stacking. */
@media (max-width: 1439px) {
  .contact-hero [class*="lg:left-["] {
    position: static !important;
  }
}

/* Any arbitrary-column grid — children default to min-width:auto and refuse to
   shrink below their content. That pushed the blog listing 62px off-screen at
   1024, and the blog post 17px: at a 1024 device the media query fires (media
   queries count the scrollbar) while usable width is only 1009, so a layout
   sized for exactly 1024 overflows by the scrollbar width. */
@media (max-width: 1439px) {
  main [class*="grid-cols-["] > * {
    min-width: 0;
  }
}

/* Eye specialists — the results grid reuses .doctor-card at its fixed 314px.
   Three of those plus gaps exceed the 949px container at 1024, so let the card
   fill its grid cell in that band. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .specialist-grid .doctor-card {
    width: 100% !important;
  }
}

/* Specialities panel in the stacked band (and on mobile) — two values sized for
   a narrow phone panel that do not hold once the panel is full width.

   max-height:600px is the accordion's open cap. At 1137 the Cataract content is
   629px, so 29px was cut and the Read More button lost its bottom edge. The cap
   has to stay for the transition to animate, so raise it well clear of any
   plausible CMS description rather than removing it.

   max-width:560px on the text block left 540px of empty panel to its right.
   Full width matches what the mobile layout already does. */
@media (max-width: 1279px) {
  .spec-panel.open {
    max-height: 1400px !important;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .spec-panel .lg\:max-w-\[560px\] {
    max-width: none !important;
  }
}

/* Specialities panel at desktop — the row is a fixed 636px, but the Cataract
   copy plus the Read More button need 748px at 1280, so 112px was cut and the
   button lost entirely. Text length is CMS-controlled, so no fixed height is
   ever safe here.
   Scroll the panel rather than freeing its height: releasing the height is what
   blew the vertical-writing-mode triggers to 2618px earlier. overflow-x stays
   hidden so the open/close width animation is unaffected. */
@media (min-width: 1280px) {
  .spec-panel.open {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* CTA buttons in the tablet band — the group is a 2-col grid capped at 336px,
   sized for a phone. At 890px that leaves a small huddle of buttons marooned in
   the middle of the viewport. Go three across, matching the desktop row, and
   let the group use a sensible share of the width.
   The third button carries col-span-2 for the phone layout, so it needs
   resetting to a single column here. */
@media (min-width: 640px) and (max-width: 1023px) {
  .cta-buttons__grid {
    grid-template-columns: repeat(3, 1fr) !important;
    /* fill the container, as the desktop row does. A 720px cap left the row
       visibly inset while every other section spanned the full width. */
    max-width: none !important;
  }
  .cta-buttons__grid > * {
    grid-column: span 1 / span 1 !important;
  }
}

/* Accreditations below 1024 — each cell is one pre-composed PNG with its logo
   and caption baked in, and the seven assets have different aspect ratios
   (384x261 through 659x178). Top-aligned in a 2-col grid they render at
   different heights and nothing lines up.
   Cap them to a common height and centre them, so rows are even.
   This is alignment only. The assets themselves are inconsistent — desktop
   avoids the problem by using a single pre-composed strip — so a proper fix is
   re-cutting the badges to one ratio, which is a design call. */
@media (max-width: 1023px) {
  /* Equal WIDTH, not equal height. Each PNG bakes its own caption, so matching
     heights makes the type sizes diverge — a 659x178 badge scaled to the same
     height as a 384x261 one renders its caption far larger. Matching widths
     keeps the baked type at a comparable scale; rows are centred so the
     differing heights at least align. */
  .accreditations [class*="grid-cols-2"] {
    align-items: center;
  }
  .accreditations [class*="grid-cols-2"] > * {
    justify-content: center;
    align-items: center;
  }
  /* Never upscale. Forcing width:100% pushed three of the seven past native
     size — 113%, 105% and 135% — so they rendered soft on top of being
     inconsistent. width:auto lets each sit at its native size and only shrink
     when the column is narrower. */
  .accreditations [class*="grid-cols-2"] img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: none;
  }
}

/* Footer in the tablet band — both blocks keep their phone stacking until 1024.
   At 920 that leaves three left-aligned links in an 873px row with the right
   half empty, and three 290px phone buttons huddled in the middle.
   Desktop lays both out as rows; do the same from 768, where there is width for
   it. Items share the row (flex:1 with min-width:0) so the labels do not have
   to wrap, and the phone buttons drop their fixed 290px so they stretch evenly.
   Below 768 the stacked layout is genuinely right and is left alone. */
/* The three action links need ~900px to sit in a row: at 768 they get 219px
   each and two clip, at 835 one still clips. Something inside them carries a
   fixed width that white-space:normal does not release, so the row starts where
   it measurably fits rather than where it looked plausible. Below that they
   stay stacked, but centred, so they are not stranded against an empty half. */
@media (min-width: 640px) and (max-width: 899px) {
  .footer__actions {
    align-items: center !important;
  }
}
@media (min-width: 900px) and (max-width: 1023px) {
  .footer__actions {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.5rem !important;
  }
  .footer__actions > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .footer__phones {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 1rem !important;
  }
  .footer__phones > * {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
}

/* Vision types — the illustration is 2764x1790 (aspect 1.54) but sits in a
   fixed 895px-tall box with object-fit:cover. At 1440 the box happens to match
   that aspect, so it looks right; below 1440 the box gets relatively taller and
   cover crops the sides off, taking the "Far vision" and "Intermediate" labels
   with them. Those labels are baked into the image, so cropping loses content.
   Let the height follow the image and stop cropping. */
@media (max-width: 1439px) {
  .vision-types [class*="h-["] {
    height: auto !important;
  }
  .vision-types img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* Doctor profile awards carousel — the prev arrow is painted on top of the first
   card's text at every width: 11px of overlap at 375 and 768, 43x30 from 1024.
   The arrows are absolutely positioned inside the same `relative` wrapper as the
   scroll track, and the track starts at the wrapper's own left edge.
   Inset the track by the arrow's width plus a gap. It is a scroll container, so
   the padding moves the cards without hiding any of them. Applies to every
   doctor profile. Found 2026-08-25 on /doctor/dr-jb-singh. */
#awards .overflow-x-auto {
  /* MARGIN, not padding. Padding is inside the scroll container, so the arrows
     still sit over whatever the track shows there — and with `snap-x
     snap-mandatory` the browser scrolls the padding away anyway. A margin
     narrows the track itself, so the arrows sit beside the cards instead of on
     top of them. */
  margin-left: 58px;
  margin-right: 58px;
}
@media (max-width: 1023px) {
  #awards .overflow-x-auto {
    margin-left: 34px;
    margin-right: 34px;
  }
}

/* ===========================================================================
   FLUID SCALE FOR THE PINNED CANVASES — 1024 to 1439
   Reported by Arjun 2026-08-25 with a capture at 1280: "no margin left or right
   available in this screen size."

   Measured gutters at 1280 before this block:

     specialities accordion   12px      cta buttons        24px
     hero inner               14px      International      24px
     doctors row              15px      accreditations     24px
     why-us canvas            18px      blogs grid         24px
     journey                  18px      callback           24px
     testimonials             21px

   Every scaled canvas sat closer to the window edge than the page's own 24px
   container, and each one by a different amount. The cause is the stepped
   scale: each step is fixed across an 80-96px band, so the canvas is tight
   against the edge at the bottom of the band and floats far inside it at the top
   (testimonials is 21px in at 1280 and 60px in at 1359).

   The fix is a FLUID scale. CSS cannot divide one length by another, which is
   why the steps existed — but `tan(atan2(a, b))` returns a/b as a plain number,
   and Chrome, Safari and Firefox all support trigonometric functions in calc.
   So the scale becomes (100vw - 48px) / designWidth, and every canvas lands on
   exactly the same 24px gutter as the rest of the page, at every width.

   The stepped rules above are kept as the fallback: if a browser cannot parse
   the trig functions, this whole block is skipped and the steps still apply.
   `margin-bottom` reclaims the space the transform leaves behind, and it has to
   scale with the same number — designHeight * (s - 1).
   =========================================================================== */
@supports (scale: tan(atan2(1px, 1px))) {
  @media (min-width: 1024px) and (max-width: 1439px) {
    .hero-banner > div {
      --s: tan(atan2(calc(100vw - 96px), 1440px));
      transform: scale(var(--s));
      margin-bottom: calc(675px * (var(--s) - 1));
    }
    .why-us .lg\:w-\[1398px\] {
      --s: tan(atan2(calc(100vw - 96px), 1398px));
      transform: scale(var(--s));
      margin-bottom: calc(667px * (var(--s) - 1));
    }
    .journey .hidden.lg\:block:has(.journey__timeline) {
      --s: tan(atan2(calc(100vw - 96px), 1383px));
      transform: scale(var(--s));
      margin-bottom: calc(680px * (var(--s) - 1));
    }
    .testimonials__wrapper {
      --s: tan(atan2(calc(100vw - 96px), 1392px));
      transform: scale(var(--s));
      margin-bottom: calc(599px * (var(--s) - 1));
    }
  }
  @media (min-width: 1024px) and (max-width: 1439px) {
    .specialities-accordion {
      --s: tan(atan2(calc(100vw - 96px), 1380px));
      transform: scale(var(--s));
      margin-bottom: calc(636px * (var(--s) - 1));
    }
  }
}

/* Site gutter widened to 48px for 1024-1439 — Arjun, 2026-08-25, after the
   client asked for more of the spacing work.

   The page container carried 24px here (and 15px on several sections, which is
   where the inconsistency came from). On a 1280 laptop that reads as content
   pinned to the window edge. 48px is the laptop-tier gutter now; 1440+ keeps the
   design's own frame, and below 1024 the phone padding is unchanged.

   Applied to the outer `--container-site` wrappers inside `main` only. The
   `--container-inner` wrappers nest inside them and carry no padding of their
   own, so they follow. The header is deliberately excluded: its logo panel, nav
   bar and CTA are one composition with their own tier at 992-1279, and padding
   here would break that. The scaled canvases use the matching (100vw - 96px)
   above, so every block on the page lands on the same 48px. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .dialog-off-canvas-main-canvas [class*="max-w-[var(--container-site)]"]:not(header *):not(footer *) {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  /* A few sections nest one container wrapper inside another — `.innov-hero` on
     the treatment pages is one — and both would take the 48px, insetting that
     block to 96px against 48 everywhere else. Only the outermost one pays. */
  .dialog-off-canvas-main-canvas [class*="max-w-[var(--container-site)]"] [class*="max-w-[var(--container-site)]"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* The why-CFS row on the treatment pages is a fixed 1254px, so it sat 13px off
     each edge at 1280 while its neighbours sat at 48. Let it fill the container
     and share the width between its four cards instead. Scaling it was tried
     first and over-shrank the row. */
  .why-cfs [class*="lg:w-[1254px]"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* `.why-cfs` is a bare <section>, so the container rule above does not reach
     it and width:100% on its children would run to the window edge. Give the
     section the gutter itself. */
  .why-cfs {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
  .why-cfs [class*="lg:gap-[43px]"] > a {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
  }
}

/* Why-Us canvas hangs off to the right at 1440 and above. The canvas is 1398px
   inside a 1380px inner container, and a `margin-right: -18px` puts the whole
   18px of overhang on one side: measured 30px of gutter on the left against 12px
   on the right at 1440, and 110 against 92 at 1600. Split the overhang so the
   canvas is centred like every other block. Pre-existing, not introduced by the
   scaling work; found while checking the gutters. */
@media (min-width: 1440px) {
  .why-us .lg\:w-\[1398px\] {
    margin-left: -9px !important;
    margin-right: -9px !important;
  }
}

/* Two leftovers that fought the new 48px gutter.

   1. `@media (max-width: 1430px) { .lg\:px-0 { padding: 0 15px !important } }`
      further up this file. With the outer container now at 48px, that 15px lands
      on the INNER wrapper and pushes the centres grid to 63px while its
      neighbours sit at 48. It is also the original source of the 15px-vs-24px
      mismatch between sections. Zeroed inside the band; below 1024 it still
      applies, where it is a 1px difference against `px-4`.

   2. The specialities accordion carries `-mx-4` so the vertical version can
      bleed to the edge on a phone. Between 1024 and 1279 that pulled it to 32px
      against everything else at 48. */
@media (min-width: 1024px) and (max-width: 1439px) {
  /* `:not()` matters: the outer container wrapper carries BOTH
     `max-w-[var(--container-site)]` and `lg:px-0`, so zeroing the class outright
     also zeroed the 48px gutter this block is meant to protect. */
  .dialog-off-canvas-main-canvas .lg\:px-0:not([class*="max-w-[var(--container-site)]"]):not(header *):not(footer *):not(section) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .specialities-accordion {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Centre profile contact strip — the email runs outside its card. The address
   strip is a three-column grid, so each card is 311px at 1024, and
   "infoagra@centreforsight.net" is a 282px unbreakable token that, with the icon
   and the 24px padding, ends 35px past the card. Overflow is visible, so it does
   not clip — it paints over the page behind the card and reads as cut off.
   Let those tokens break. Applies to every centre profile.
   Found 2026-08-25 on /eye-hospitals-in-india/agra/bhagwan-talkies. */
.centre-address-strip p,
.centre-address-strip a,
.centre-address-strip span {
  overflow-wrap: anywhere;
}

/* Treatment card titles clip at 640-699. The grid goes three across at 640, which
   makes each card 192px, and the title is a flex row (icon + text) at 20px that
   cannot shrink — "Retinoblastoma" needs 168px inside a 152px box, so 16px of it
   is cut by the card's overflow-hidden. "Neuro Ophthalmology" loses 14px.
   Clean again by 700, where the card is 212px.
   Step the title down and let the flex item shrink for that band only.
   Found 2026-08-25 on /eye-treatment/specialities. */
@media (min-width: 640px) and (max-width: 699px) {
  .treatment-card span[class*="items-center"] {
    font-size: 17px !important;
    min-width: 0;
  }
}

/* Why-CFS cards on the treatment pages clip their third title at 1024-1279.
   The card is a fixed `lg:h-[151px]`; "Seamless Patient Journey" needs three
   lines there and runs 24px past the box, so the word "Journey" and the rule
   under the title are cut. The other three cards fit in two lines.
   Release the height to `auto` with the design value as a MINIMUM. The row is a
   flex row with the default stretch alignment, so all four cards take the tallest
   height and stay level. 1280+ is untouched — the title fits in two lines there.
   Found 2026-08-25 on the cataract, LASIK and pharmacy treatment pages. */
@media (min-width: 1024px) and (max-width: 1279px) {
  a.group[class*="lg:h-[151px]"] {
    height: auto !important;
    min-height: 151px;
  }
}

/* Why-card titles clip at the narrow end of the desktop grid. The card is 241px
   wide at 1280 (inner 195px after the 22px insets) but 277px at 1104, because the
   grid column count changes — narrower is not always the smaller viewport. The
   title is a flat 31px, and the single word "Comprehensive" needs about 206px at
   that size, so it runs 11px past the card and the browser clips it.
   "Patient-Centered Care" also takes three lines at 1024 and 1280 against two
   everywhere else.
   Step the title down for the band where the column is narrowest; 1360+ has
   215px of inner width and keeps the designed 31px.
   Found 2026-08-25 on /eye-hospitals-in-india and /eye-treatment/specialities. */
@media (min-width: 1024px) and (max-width: 1359px) {
  .specialities-why-card h3 {
    font-size: 28px !important;
    line-height: 34px !important;
  }
}

/* CMS tables below 1024 — `white-space: nowrap` on the cells, and a page that
   scrolls sideways because of it.

   Found 2026-08-25 by the all-pages sweep: /blog/<post> scrolled 280px at 375,
   267px at 640 and 241px at 768. The offender is a `<span>` 531px wide inside a
   115px `<td>`.

   Two rules in mycustom.css fight each other and the page loses. An
   unconditional `.city-content table { display: table !important }` beats the
   same file's `@media (max-width: 768px) { .city-content table { display: block;
   overflow-x: auto; white-space: nowrap } }`, so the table never becomes a
   scroll container — but the `nowrap` from that same block still applies. Cells
   that cannot wrap inside a table that cannot scroll push the document sideways.

   Both rules belong to the other team's file, so they are corrected from here
   rather than edited there. Let the cells wrap; `table-layout: fixed` plus
   `width: 100%` from their rule then does the right thing on its own. The
   `main table` scroll below stays as the fallback for a table that is still too
   wide once wrapped. */
@media (max-width: 1023px) {
  .city-content table,
  .city-content table td,
  .city-content table th,
  .city-content table span,
  .city-content table strong,
  .city-content table b {
    white-space: normal !important;
  }
}

/* Article tables — blog posts carry real <table> markup authored in the CMS at
   desktop width. One is 505px wide, which drags a 360px viewport 160px sideways
   and makes its own cells overlap. Give the table its own horizontal scroll.
   display:block is what makes overflow-x apply to a table; the rows still
   render as a table via an anonymous table box. Content stays fully reachable,
   which matters because these hold real information (sport / risk / protection). */
main table {
  /* !important per the CDN trap: the Play CDN injects its base styles after this
     stylesheet, so a plain display declaration here loses and the table stays
     display:table with overflow-x having no effect. */
  display: block !important;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Doctor profile specialisation cards — a long single label runs outside its
   card. "Neuro-Ophthalmology" overflows by 68px at 1200 and 28px at 1280 and is
   clean from 1360. Overflow is visible, so it paints over what is beside it
   rather than clipping. Let the label break.
   Pre-existing at 1280-1359, found 2026-08-25 while widening the two-column
   band; the same rule covers the new 1200-1279 range. */
section.specializations [class*="grid"] > *,
section.qual-row > * {
  overflow-wrap: anywhere;
}

/* Doctor profile — the booking sidebar is a fixed 467px, so the main column was
   left with 472px. Its inner two-column grids then handed each card 207px when
   the content needs 229, clipping the specialisation labels and the
   "Qualification" heading, so those grids were dropped to one column for the
   whole 1024-1279 band.
   Scoped through the 1fr_467px shell so other pages' lg:grid-cols-2 are safe.

   BAND NARROWED 2026-08-25 to 1024-1103. Re-measured after the gutter work: the
   main column is now 676px at 1279 against 677px at 1280, and 1280 renders two
   309px columns perfectly well — so the fallback was firing across 176px of
   width where the desktop layout fits. It is still right at the low end: the
   column is 421px at 1024, which would give 181px cards against the 229px the
   content needs. Two columns fit from 1104, where the column reaches 501px.
   Same reasoning as the specialities accordion: hold the desktop composition
   until it genuinely stops fitting, not one breakpoint earlier. */
@media (min-width: 1024px) and (max-width: 1199px) {
  [class*="lg:grid-cols-[1fr_467px]"] [class*="lg:grid-cols-2"] {
    grid-template-columns: 1fr !important;
  }
}

/* Contact hero — the grey panel is a fixed h-[302px] but holds 363px of content
   (address plus two phone rows), so 61px spills out below it. Overflow is
   visible, so nothing is clipped — the panel that follows simply paints over
   the "Rest Of India" number, hiding a phone number entirely.
   Let the panel grow, keeping 302px as a floor so the desktop proportion holds. */
[class*="contact-hero"] [class*="bg-[#f4f4f8]"] {
  height: auto !important;
  min-height: 302px;
}

/* The 1px horizontal scrollbar seen on every page carrying the specialities
   accordion: it uses -mx-4 (16px) for a full-bleed edge, but the container's
   padding is 15px, so the accordion ends up 2px wider than the viewport at
   left:-1. One pixel is enough for Chrome to paint a horizontal scrollbar across
   the whole page.
   Clip at the parent rather than removing the negative margin — the full-bleed
   is intentional on mobile. overflow-x:clip creates no scroll container, so
   sticky positioning is unaffected. */
:has(> .specialities-accordion) {
  overflow-x: clip;
}

/* Same -mx-4 vs 15px-padding mismatch on the centres section's mobile grey
   background wrapper, which left 1px hanging at left:-1 and kept a horizontal
   scrollbar on the homepage and the treatment pages. Clip at the section: the
   full-bleed still reaches the section edges, which are the viewport edges. */
.centres-listing {
  overflow-x: clip;
}

/* Card footer rows use `justify-between`, which guarantees no minimum gap: at
   1024 the 3-up centre cards are narrow enough that the city label ends 3px
   from the "Book an Appointment" button, reading as one run of text. The row
   already carries `flex-wrap`, so a gap both enforces spacing and lets the
   button wrap to its own line when it truly cannot fit beside the label. */
main .flex.items-center.justify-between.flex-wrap {
  gap: 6px 12px;
}

/* One FAQ answer was pasted into the CMS from Google Docs and carries its
   residue as inline styles: a `<span>` forcing Times New Roman, its own
   font-size and #000000, plus `text-align:justify` on the `<p>`. It rendered
   visibly larger, darker and justified beside its neighbours. Neutralise only
   the properties that break the design — font-weight and font-style are left
   alone so real author emphasis survives. Inline styles need `!important`.
   ponytail: scoped to .faq-answer, where the defect is proven. The same paste
   residue can land in any rich-text field; widen only when one is found. */
.faq-answer [style] {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  background-color: transparent !important;
}
/* text-align is set explicitly, not inherited: `inherit` resolved to justify
   through the pasted wrapper. The FAQ block sits OUTSIDE <main>, so a `main`
   prefix here matches nothing — that cost one wasted round trip. */
.faq-answer [style], .faq-answer p[style] { text-align: left !important; }

/* Blog hero: the carousel arrows are absolutely positioned at `left-3`/`right-3`
   (occupying 12-48px) but the slide content only insets `px-6` (24px), so below
   1024 the prev arrow sits on top of the heading's first character — measured at
   375 and 768. At 1024+ the content already clears them via `lg:pl-[100px]`.
   Inset the content to clear the controls instead of moving them, so the arrows
   stay where the design puts them. */
@media (max-width: 1023px) {
  /* Inset the HEADING only. The arrows sit at `top-44%`, which is the heading
     band; the button row below them is clear. Insetting the whole content block
     squeezed that row until "Book An Appointment" was clipped by the hero's
     `overflow-hidden` at 375. */
  .blogs-hero article > div > h2 {
    padding-left: 32px;
    padding-right: 32px;
  }
  /* The two CTAs do not fit side by side at 375; let them wrap instead of
     being cut off by the hero clip. */
  .blogs-hero article > div .flex:has(> a) {
    flex-wrap: wrap;
  }
}

/* NOT FIXED HERE, deliberately: the treatment tab panels show a photo narrower
   than its grey `#d9d9d9` box at 1440, leaving a grey strip. An `object-fit`
   rule was written and reverted — the diagnosis had measured the WRONG img
   (block 0's `understanding-doctor.jpg`, which is `fill`, not the risk-factors
   one, which already carries `w-full h-full object-cover` in its own markup).
   The strip is present in pre-change captures, so it is the untouched 1440
   design plus the asset's aspect ratio, and changing 1440 needs sign-off.
   Raise it as an asset/design question instead. */

/* Doctor/centre listing grids go 4-up from 1024 (`lg:grid-cols-4`), but the
   container is only ~857px there, so each card gets 195px — NARROWER than the
   336px it has at 768, which cramps the experience bar against both card edges.
   4-up is right at 1440 (312px per card). Use 3 columns in between: 268px per
   card, in line with the 257px the same grid already produces at 1280.
   `!important` because the Tailwind CDN loads after this file. */
@media (min-width: 1024px) and (max-width: 1279px) {
  [class*="lg:grid-cols-4"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Cards in a listing row have unequal heights whenever one has longer
   qualification text, so the navy experience bar staggers across the row (512px
   vs 498px at 1024). The grid stretches the `li`, but the `article` inside keeps
   its content height. Make the card fill its grid cell so every bar in a row
   lands on the same line. `height: 100%` resolves here because the grid item
   stretches to the row height. */
[class*="grid-cols-"] > li > .doctor-card,
[class*="grid-cols-"] > li > .centre-card {
  height: 100%;
}

/* about-chairman: the portrait column is a hard `lg:w-[583px] shrink-0` from
   1024, but the row is only 949px there, so the copy gets 949-583-34 = 332px —
   four to seven words per line, and the panel runs 1192px tall against 532px at
   1440. The 583px is right at 1440 (43% of the row) and wrong at 1024 (61%).
   Make the column proportional in between so the copy keeps the majority; the
   design's own 583px is untouched from 1280 up. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .about-chairman [class*="lg:w-[583px]"] {
    width: 40% !important;
    flex-shrink: 1 !important;
  }
}

/* Doctor cards: the qualification line above the name is CMS text of any length.
   One line renders 19px, two render 39px, so within a row the doctor NAME lands
   at 265px in some cards and 285px in others — the names visibly stagger even
   though the cards are equal height and the experience bars align. Give the
   qualification a two-line floor so the name starts at the same offset in every
   card. It is the first `<a>` in the card body and carries no class of its own
   (CMS markup), so it is targeted structurally. */
.doctor-card > div > a:first-child {
  display: block;
  min-height: 2.4em;
}
/* Between 1024 and 1279 the cards are narrow enough that a long qualification
   wraps to THREE lines (58px vs 38px on the centre profile), so a two-line floor
   is not enough and the names stagger again. Raise the floor to three lines in
   that band only — 1440 stays untouched, where the cards are wide and two lines
   already suffice. Nothing is truncated; the cost is some white space in cards
   whose qualification is short. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .doctor-card > div > a:first-child {
    min-height: 3.6em;
  }
}

/* "Why Choose Centre For Sight" cards: the markup already describes a hover
   swap — the body carries `opacity-0 lg:group-hover:opacity-100` and the title
   `lg:group-hover:top-[12px] lg:group-hover:text-[19px]`. NONE of it is live:
   a stylesheet scan found NO rule setting opacity on that element, so the
   Tailwind CDN never generated these utilities (the section is injected after
   its JIT scan). The result is the title and the body BOTH rendered at
   top-[45px]/top-[46px] — a 73px text-on-text collision at every desktop width.
   Reproduce the intended interaction here so it does not depend on the CDN. */
/* Threshold is 1000px, NOT 1024. At a 1024 window CSS evaluates media queries
   against 1009 (the classic scrollbar takes 15px) even though `matchMedia`
   reports 1024, so `min-width: 1024px` silently failed there while Tailwind's
   own `lg:` utilities still applied — proof the CDN's `lg` breakpoint sits below
   1024. Verified by serving the file and diffing behaviour at 1024 vs 1280. */
@media (min-width: 1000px) {
  /* `!important`: the Play CDN loads after this file, so its utilities win a
     plain declaration. This is the same trap already recorded for `display`. */
  .specialities-why-card > div {
    opacity: 0 !important;
    transition: opacity 1000ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .specialities-why-card:hover > div {
    opacity: 1 !important;
  }
  .specialities-why-card > h3 {
    transition: all 1000ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .specialities-why-card:hover > h3 {
    top: 12px;
    font-size: 19px;
    line-height: 23px;
    white-space: nowrap;
  }
}

/* The why-cards are a fixed `lg:h-[151px]`. Between 1000 and 1439 the cards are
   narrow enough that a longer title wraps to three lines (45px offset + 3 x 37px
   = 156px) and the last line is clipped by the card's `overflow-hidden` —
   "Patient-Centered Care" loses "Care" at 1024. Let the card grow instead, with
   151px as the floor so the common two-line case is unchanged. 1440+ keeps the
   fixed height: the cards are wide enough there for two lines. */
@media (min-width: 1000px) and (max-width: 1439px) {
  /* NOT `height: auto` — both the title and the body are absolutely positioned,
     so they never expand the parent and the card collapsed to 2px when that was
     tried. The card needs an explicit taller box: 45px top offset + 3 lines at
     37px = 156px, plus breathing room. */
  .specialities-why-card {
    height: 170px !important;
  }
}

/* Sidebar list rows (blog listing + blog post "Reader's Favourite"): the
   thumbnail is a fixed `lg:w-[158px]` with `shrink-0` inside a flex row. The
   sidebar column is only ~250px at 1024, so the title gets 48px and wraps to
   ELEVEN lines (133px/5 lines at 1280, 187px/3 lines at 1440 — the design's own
   proportion). Shrink the thumbnail where the row is narrow so the title keeps a
   usable share. 1440+ untouched. */
@media (min-width: 1000px) and (max-width: 1279px) {
  [class*="lg:w-[158px]"] {
    width: 110px !important;
    height: 88px !important;
  }
}

/* Listing grids are `grid-cols-1 lg:grid-cols-4` — they have NO `sm:grid-cols-2`,
   so between 640 and 1023 they stay a single full-width column. The tablet tier
   sizes `.doctor-card`/`.centre-card` to half the viewport, so each card sits
   alone in a 736px row with ~376px of empty space beside it. Give the grid the
   second column it is missing so the cards actually pair up. */
@media (min-width: 640px) and (max-width: 999px) {
  [class*="lg:grid-cols-4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* mycustom.css carries a site-wide `section { padding: 20px 0px 20px 0px
   !important }`. The intent was vertical rhythm, but it also zeroes HORIZONTAL
   padding on every <section>, overriding each one's own `px-*`. Mostly harmless
   because most sections wrap their content in an inner padded container — but on
   contact-us four sections rely on their own `px-6`, so at 375 and 768 the state
   filter chips and the form sit flush against the viewport edge with no gutter,
   against the ~16-24px everywhere else.
   Restore the padding only for sections that actually declare `px-6`, and only
   below 1000 — at 1024+ the chip row is centred so the gap is not visible, and
   this avoids changing the desktop design. Fixing the blanket rule itself would
   alter 1440 sitewide, which needs sign-off. */
@media (max-width: 999px) {
  section[class*="px-6"] {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* ── Section CTA arrow buttons — one size, sitewide ──────────────────────────
   The round arrow button that closes each section (Centres, Specialities,
   Eye Care Experts, Why Us, Blogs) is one component, but the mobile frames in
   Figma drew it five different ways, and the build reproduced each faithfully.
   Measured on the homepage at 375:

     centres-listing        107x107   icon 36x32   ratio 0.34
     specialities           106x106   icon 30x24   ratio 0.28
     doctor-cards-featured   80x80    icon 30x24   ratio 0.375
     why-us                 107x106   icon 40x32   ratio 0.37
     blogs                  109x106   icon 30x24   ratio 0.28

   Desktop is already uniform at 104x104 with a 46x37 icon (ratio 0.44), so only
   the mobile tier is inconsistent. Two of those boxes are also not square, so
   `rounded-full` renders a slight ellipse rather than a circle.

   Canonical mobile values agreed with Arjun 2026-08-12: circle 107x107 (the
   most-used size) and icon 40x32, which puts the icon/circle ratio at 0.37 —
   near the desktop 0.44, so the button reads the same at both tiers. This is a
   DELIBERATE deviation from the Figma mobile frames. `!important` is required
   because the Tailwind CDN loads after this file. */
@media (max-width: 1023px) {
  .group\/arrow > a,
  a.arrow-link {
    width: 107px !important;
    height: 107px !important;
  }
  .group\/arrow > a > svg,
  a.arrow-link > svg {
    width: 40px !important;
    height: 32px !important;
  }
}

/* Why Us arrow between 1024 and 1439 — the stacking override further up shows
   this section's MOBILE arrow in that band (the desktop one is pinned to the
   1398px canvas and hidden with it). The mobile arrow carries no `lg:` colour or
   size variant, so it rendered yellow 107x106 while the other four section
   arrows on the same screen were navy 104x104. Match its siblings. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .why-us .group\/arrow:not(.absolute) > a {
    width: 104px !important;
    height: 104px !important;
    background-color: #2b286f !important;
  }
  .why-us .group\/arrow:not(.absolute) > a:hover {
    background-color: #ffcb05 !important;
  }
  .why-us .group\/arrow:not(.absolute) > a > svg {
    width: 46px !important;
    height: 37px !important;
  }
}

/* Accreditations heading — guard against an overlap on CMS-lengthened text.
   The heading carries `leading-[62px]` with no desktop override, so at 1024+ the
   font is 69px against a 62px line step. It is one line at every width today, so
   nothing is visibly wrong, but the text is CMS-managed: injecting a longer
   heading wraps it and the two lines OVERLAP BY 7PX (measured, line step 62 vs
   font size 69). The same test on a canonical section heading — leading 72 —
   wraps cleanly at seven lines with no overlap.

   Raise it to the 72px the other section headings use. This is the only heading
   change to desktop in this pass: the block grows 62px -> 72px. Agreed with Arjun
   2026-08-12 along with the blogs weight fix; the rest of the line-height spread
   between sections is Figma's and was deliberately LEFT ALONE.

   The class lives in CMS content, not in the theme, so it cannot be fixed in a
   template. `.accreditations h2` is specificity 0,1,1 and so beats the CDN's
   `.leading-\[62px\]` utility at 0,1,0 without needing a doubled selector. */
@media (min-width: 1024px) {
  .accreditations h2 {
    line-height: 72px !important;
  }
}

/* ── One section-header pattern below 1024 ───────────────────────────────────
   Five sections repeat the same header: heading, a short intro, and the round
   arrow CTA beside it. Measured at 768 they were five different layouts:

     section                h2 lh   gap    intro    intro w   arrow x   case
     centres-listing        46.25    4px   14px       240       647     none
     specialities           46.25   16px   21px       240       271     none
     doctor-cards-featured  55.5     6px   21px       208       271     none
     why-us                 55.5    50px   21px       615       646     CAPITALIZE
     blogs                  48      12px   21px       230       262     none

   Origin checked per value against cfs/html/index.html rather than assumed:
   the 14px intro (`text-[14px] lg:text-[21px]`) and the Title Case
   (`capitalize lg:normal-case`) are BOTH in the Figma-verified build, so the
   design itself is inconsistent. The 615px intro width was ours — see the
   scope correction above.

   Canonical below 1024: intro 21px/27px, capped at 240px, sentence case, with
   the arrow as its flex sibling 16px to its right. Agreed with Arjun
   2026-08-12; overrides the design the same way the arrow sizes did. 1024+ and
   the 1440 design are untouched. */
@media (max-width: 1023px) {
  /* The intro wrapper is the element carrying the phone cap. Targeting that cap
     hits exactly the five intros and nothing else — the bare <p> inside carries
     no classes (CMS convention), so typography has to land on the wrapper. */
  .centres-listing [class*="max-w-[240px]"],
  .specialities [class*="max-w-[240px]"],
  .doctor-cards-featured [class*="max-w-[240px]"],
  .why-us [class*="max-w-[240px]"],
  .blogs [class*="max-w-[230px]"] {
    font-size: 21px !important;
    line-height: 27px !important;
    text-transform: none !important;
    max-width: 240px !important;
  }

  /* centres-listing is the only one whose header row uses `justify-between`,
     which pushes the arrow to the far right edge instead of seating it beside
     the intro. The other four use `gap-4` with default justification. Note the
     gap is set explicitly: justify-start alone would let the arrow touch the
     text, the same trap the city-page card footer hit. */
  .centres-listing .centres-title-card {
    justify-content: flex-start !important;
    align-items: flex-end !important;
    gap: 16px !important;
  }
}

/* Same pattern, the vertical half: the gap under the heading measured 4 / 16 / 6 /
   7 / 12px across the five sections, and the arrow's vertical alignment beside the
   intro was `items-start` on two, `items-end` on two. Normalise both to one value.

   The gap is moved on the ROW that holds the intro AND the arrow, so the two keep
   their relationship, rather than on the intro alone. centres-listing has no such
   row — its intro sits in the title card block — so it is targeted directly.
   `:has(> …)` selects each row by the intro cap it contains. */
@media (max-width: 1023px) {
  .centres-listing h2,
  .specialities h2,
  .doctor-cards-featured h2,
  .why-us h2,
  .blogs h2 {
    margin-bottom: 0 !important;
  }

  .centres-listing [class*="max-w-[240px]"],
  .specialities div:has(> [class*="max-w-[240px]"]),
  .doctor-cards-featured div:has(> [class*="max-w-[240px]"]),
  .why-us div:has(> [class*="max-w-[240px]"]),
  .blogs div:has(> [class*="max-w-[230px]"]) {
    margin-top: 12px !important;
  }

  .specialities div:has(> [class*="max-w-[240px]"]),
  .doctor-cards-featured div:has(> [class*="max-w-[240px]"]),
  .why-us div:has(> [class*="max-w-[240px]"]),
  .blogs div:has(> [class*="max-w-[230px]"]) {
    align-items: center !important;
  }
}

/* Section header intro — let it GROW, do not pin it at the phone width.
   The unification above capped all five intros at 240px, which is the value the
   phone design uses. At 375 that is right (the row only has 222px spare once the
   arrow and its gap are taken). From about 480 up it is far too narrow: at 768 the
   row has 615px of usable width, so a 240px column wrapped the copy to five short
   lines and left roughly 375px of empty space beside the arrow.

   Make the intro a flex item that takes the space left by the arrow, capped at
   60ch so a wide tablet cannot run the line beyond a readable measure. `ch` rather
   than px so the cap tracks the 21px Poppins body. `min-width: 0` so the item can
   still shrink below its content width on the narrowest screens.

   Resulting intro width: ~222px at 375 (unchanged), ~327px at 480, ~615px at 768.
   centres-listing needs its heading+intro BLOCK to flex, since its intro is not a
   direct child of the row that holds the arrow. */
@media (max-width: 1023px) {
  .centres-listing [class*="max-w-[240px]"],
  .specialities [class*="max-w-[240px]"],
  .doctor-cards-featured [class*="max-w-[240px]"],
  .why-us [class*="max-w-[240px]"],
  .blogs [class*="max-w-[230px]"] {
    max-width: 60ch !important;
    flex: 1 1 auto;
    min-width: 0;
  }
  .centres-listing .centres-title-card > *:has([class*="max-w-[240px]"]) {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Why-Us arrow overlapped the intro between 1024 and 1439.
   The intro row is `flex items-end gap-4 ... lg:block`, so at 1024 it becomes a
   BLOCK and the arrow drops underneath the copy. Two consequences: `gap-4` is inert
   in block flow, and the arrow's own `-mt-[10px]` — harmless as a flex item — pulls
   it UP over the text. Measured overlap: -10px at 1024, 1200 and 1439.

   Restore the flex row in that band so the arrow sits beside the intro, which is
   what the other four section headers do at these widths, and zero the negative
   margin that only made sense in the flex context. The intro is 720px here and the
   arrow 104px, so 720 + 16 + 104 = 840 fits the 994px container at 1024.

   1440+ is untouched: there the arrow is a different, absolutely positioned element
   pinned to the fixed canvas. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .why-us div:has(> [class*="max-w-[240px]"]) {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
  }
  .why-us .group\/arrow:not(.absolute) {
    margin-top: 0 !important;
  }
}

/* Centres arrow sat ON TOP of the heading between 1024 and 1439.
   At `lg:` this arrow becomes `lg:absolute lg:top-[141px] lg:left-[262px]`, a pair
   of coordinates taken from the 1440 canvas where the title card is ~440px wide and
   "All Centres" fits on ONE line. At 1024 the card is a 300px grid column, so the
   heading wraps to two lines and the pinned arrow lands across "Centres" and the
   intro beneath it. Confirmed at glyph level, not just by box overlap: 51px of the
   heading and 52px/42px of two intro lines were covered.

   Return the arrow to the flow in that band so it sits below the copy and cannot
   collide however the heading wraps. Making the card a flex row instead was
   rejected: at 1024 the column is 300px, and a 104px arrow plus its gap would leave
   under 180px for the text.

   1440+ keeps the pinned coordinates, where they work and where the design is
   authoritative — verified there: no glyph collision, only a harmless box overlap
   beside the short final lines. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .centres-listing .centres-title-card > a.arrow-link {
    position: static !important;
    margin-top: 16px;
  }
}

/* ── Homepage header: show desktop nav from 992px, not 1280px ────────────────
   Client-reported issue: competitor sites (agilusdiagnostics.com switches at
   1024, dragarwal.com at 992) keep their desktop nav bar down to a narrower
   width than us — our header only leaves hamburger mode at the Tailwind `xl`
   breakpoint (1280px), so it reads as "breaking into tab view" far earlier
   than the competition. The header markup (page--front.html.twig) and its
   `xl:`-gated classes are shared shell markup, not something to duplicate;
   this band supplies a compressed desktop-nav tier for 992–1279 by overriding
   the same elements. 1280+ is untouched — the original `xl:` desktop sizing
   still applies there. Scoped to .path-frontpage only (homepage), per request
   to hold off on other pages for now. */
@media (min-width: 992px) and (max-width: 1279px) {
  body nav[data-figma-node-id="3121:26513"] {
    height: 82px;
  }
  body [data-figma-node-id="3121:26516"] {
    flex: 1 1 0%;
  }
  body .logo-area {
    justify-content: flex-start;
    background: #f1f1f1;
    width: 180px;
    padding: 0 0 0 20px;
    flex-shrink: 0;
  }
  body .logo-area img {
    width: 100px;
    height: 59px;
  }
  body #main-nav-area {
    display: flex !important;
    position: static !important;
    inset: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 1 1 0% !important;
    padding: 0 20px !important;
    gap: 16px !important;
    overflow: visible !important;
    background: #2b286f !important;
    height: 82px !important;
  }
  body .nav-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    margin-bottom: 0 !important;
    gap: 16px !important;
  }
  body .nav-menu > li {
    border: 0 !important;
  }
  body .nav-menu a {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 300 !important;
    font-size: 13px !important;
    letter-spacing: -0.5px !important;
    color: #fff !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }
  body .nav-menu a svg {
    display: none !important;
  }
  /* Mobile-only extra links block (News & Media / Get In touch / Careers) is
     already gated `lg:hidden` (1024px) — below that, at 992-1023, it has no
     hidden default and would otherwise show alongside the compressed nav. */
  body #block-mytheme-mobiletopmenu ul {
    display: none !important;
  }
  body .cta-area {
    display: flex !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }
  body .cta-area .cta-button {
    width: 150px !important;
    height: 44px !important;
    font-size: 13px !important;
  }
  body header .flex.flex-1.items-center.justify-end {
    display: none !important;
  }
}

/* The cataract video block is a fixed 953px centred on the page. At 1024 that
   leaves 36px each side against the 48px gutter everywhere else. Cap it to the
   content width only when the viewport forces it; from 1050 up it keeps the
   designed 953px. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .cataract-video [class*="lg:w-[953px]"] {
    max-width: min(953px, calc(100vw - 96px)) !important;
    width: auto !important;
  }
}

/* Bare sections that missed the 48px gutter. Found by scanning every section on
   all 28 pages at 1280 for content sitting inside 48px.

   These are plain <section> elements with no container wrapper, holding a fixed
   inner canvas (`lg:w-[1398px]`, `max-w-[1272px]`) that the viewport simply caps.
   Measured left inset before this rule: understanding-* 0, city-centres 0,
   blogs-search 16, patient-journey 17, faq-section 18, specialities-story 21,
   newsmedia-* 29 — against 48 everywhere else on the same page. The five
   `understanding-*` blocks on the treatment pages were the worst: tab rows and
   panels running edge to edge.

   The section takes the gutter and its fixed inner canvas fills the padded box.

   Scoped WITHOUT `main`: several page templates (news-and-media, the city pages,
   the FAQ blocks) render their sections as direct children of
   `.dialog-off-canvas-main-canvas`, outside `<main>` entirely, so a `main`-scoped
   rule silently missed them. This block also sits at the END of the file on
   purpose — the `.lg:px-0` reset above zeroes the same elements and would
   otherwise win on cascade order. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .understanding-cataract,
  .patient-journey,
  .diagnosis-story,
  .vision-types,
  .surgery-cost,
  .faq-section,
  .city-centres,
  .blogs-search,
  .specialities-story,
  .newsmedia-hero,
  .newsmedia-tabs,
  .newsmedia-featured,
  .callback-form {
	padding-left: 48px !important;
	padding-right: 48px !important;
	padding-top: 20px !important;
	padding-bottom: 20px !important;
	margin-top: 0px !important;
	margin-bottom: 0px !important;
  }
  /* the callback section already pads its own inner container; zero it or the
     content lands at 72px */
  .callback-form [class*="max-w-[var(--container-site)]"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .understanding-cataract > *,
  .patient-journey > *,
  .diagnosis-story > *,
  .vision-types > *,
  .surgery-cost > *,
  .faq-section > *,
  .city-centres > *,
  .specialities-story > * {
    width: 100% !important;
    max-width: 100% !important;
  }
}