/* ENT Care — brand tweaks layered on top of the template's style.css.
   Loaded last so these rules win. */

/* ---- Body line-spacing scale ----
   Three roles, all unitless. Unitless matters: `line-height: 26px` inherits as
   an ABSOLUTE 26px, so any element that changes font-size without restating
   line-height silently keeps 26px. That one mechanic produced every odd ratio
   on the site — 13px disclaimer at 2.00, 14px blog meta at 1.86, 18px
   testimonial at 1.44. Nobody chose those numbers; they are 26 ÷ font-size.
   A unitless value inherits the RATIO and self-heals all of them.

   1.625 is not a new opinion — it is 26/16, exactly what every ordinary 16px
   paragraph already renders, so the dominant case does not move a pixel. */
:root {
  --ent-lh-tight: 1.45;  /* dense UI text: card meta, captions, chips, sidebar links */
  --ent-lh-body: 1.625;  /* default paragraph: card copy, excerpts, disclaimers */
  --ent-lh-prose: 1.7;   /* long-form and lead paragraphs: page intros, leads, pull-quotes */

  /* ---- Type + button scale ----
     Same discipline as the line-height tokens: same-ROLE elements must compute
     the same size on every page. Measured before this existed: eyebrows ran
     12/13/14px, card descriptions 14/14.5/15/15.5, the two secondary pills had
     different padding, and one CTA shipped as a 12px-radius rectangle on a site
     whose primary button is a fully-rounded pill. Sizes that differ BY TIER
     (feature title vs card title vs tile title) are hierarchy, not drift, and
     keep their own tokens. */
  --ent-fs-eyebrow: 13px;        /* red uppercase kickers + structural group labels */
  --ent-fs-section-title: 40px;  /* THE main section heading — one size for every
                                    section intro across the site. Before this it
                                    was 32 (my customs) / 36 (template left) /
                                    48 (template centered) all at once. */
  --ent-fs-panel-title: 28px;    /* feature/panel headings (editorial rows, form card) */
  --ent-fs-card-title: 20px;     /* standard card headings */
  --ent-fs-card-desc: 14.5px;    /* card body copy / excerpts */
  --ent-fs-lead: 15.5px;         /* card summaries and value blurbs */
  --ent-fs-cta: 15px;            /* secondary pill labels */
}
/* The section-title token scales down with the viewport (it is one number used
   everywhere, so its responsiveness lives here rather than on each heading). */
@media (max-width: 991px) {
  :root { --ent-fs-section-title: 32px; }
}
@media (max-width: 575px) {
  :root { --ent-fs-section-title: 26px; }
}

/* ---- One size for every main section heading ----
   The template shipped three: `.title-wrapper-left .title` at 36, centered
   `.title.text-center` at 48 (from base --h2), and my custom sections at 32.
   Force all of them onto the single token above. brand.css loads last, so this
   wins the vendor's responsive rules; the line-height is unitless so it tracks
   whatever size the token resolves to. */
.title-wrapper-left .title,
.title-wrapper-center .title,
.title-area-center .title,
.section-title .title,
h2.title.text-center,
.title.text-center {
  font-size: var(--ent-fs-section-title);
  line-height: 1.2;
}

/* Scroll-reveal: hide .wow elements from first paint (no flash); WowInit reveals
   them as they scroll into view. Reduced-motion / no-JS users see them immediately. */
.wow {
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .wow {
    visibility: visible !important;
  }
}

/* Inner-page banner + breadcrumb (about, services, blog, contact, …). */
.ent-page-banner {
  background: linear-gradient(180deg, #fdeaea 0%, #f7f7ff 100%);
  padding: 60px 0;
  margin-bottom: 10px;
}
.ent-page-banner .title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  color: var(--color-heading-1, #111032);
  margin: 0 0 12px;
  font-size: 44px;
}
@media (max-width: 767px) {
  .ent-page-banner {
    padding: 40px 0;
  }
  .ent-page-banner .title {
    font-size: 30px;
  }
}
.ent-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}
.ent-breadcrumb li {
  color: var(--color-body, #6b6b6b);
  font-size: 15px;
}
.ent-breadcrumb li + li::before {
  content: '›';
  margin-right: 8px;
  color: #ed0101;
}
.ent-breadcrumb a {
  color: var(--color-body, #6b6b6b);
}
.ent-breadcrumb a:hover {
  color: #ed0101;
}
.ent-breadcrumb li[aria-current='page'] span {
  color: #ed0101;
  font-weight: 600;
}

/* Generic inner-page section rhythm + card helpers used across internal pages. */
.ent-section {
  padding: 70px 0;
}
.ent-prose h2 {
  font-family: 'Syne', sans-serif;
  color: var(--color-heading-1, #111032);
  margin: 28px 0 14px;
  font-size: 26px;
}
.ent-prose h3 {
  font-family: 'Syne', sans-serif;
  color: var(--color-heading-1, #111032);
  margin: 22px 0 12px;
  font-size: 20px;
}
.ent-prose p {
  margin-bottom: 14px;
}
.ent-prose ul {
  margin: 0 0 18px 20px;
}
.ent-prose ul li {
  list-style: disc;
  margin-bottom: 8px;
}
.ent-card {
  background: #fff;
  border: 1px solid var(--color-border, #ddd8f9);
  border-radius: 14px;
  padding: 30px;
  height: 100%;
  transition: 0.3s;
}
/* Condition-detail cards are stacked content blocks, not equal-height grid
   items — height:100% inside the flex-stretched column made them fill the whole
   column and overflow onto the footer. Keep them at their natural height. */
.ent-condition-detail .ent-card {
  height: auto;
}
.ent-card:hover {
  box-shadow: 0 20px 40px rgba(237, 1, 1, 0.08);
  transform: translateY(-4px);
}

/* Nudge the hero "Ear" pill to the right (client request). Exclude the
   mobile patient-pill so it isn't pinned to 22% (it anchors right instead). */
.banner-area-one .person-image .single-tag:not(.two):not(.three):not(.patient-pill) {
  left: 22%;
}

/* Continuous floating animation for the hero Ear / Nose / Throat tags
   (the elements the client circled). Each tag bobs on its own rhythm. */
@keyframes entTagFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-16px);
  }
}

.person-image .single-tag {
  animation: entTagFloat 3s ease-in-out infinite;
  will-change: transform;
}
.person-image .single-tag.two {
  animation-duration: 3.8s;
  animation-delay: 0.5s;
}
.person-image .single-tag.three {
  animation-duration: 4.4s;
  animation-delay: 1s;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .person-image .single-tag {
    animation: none;
  }
}

/* Hero doctor cutout: nudged right, height-capped so it fits the banner (not oversized). */
.banner-area-one .person-image {
  right: 7%;
}
/* `> img` targets ONLY the doctor cutout, not the tag/pill icons inside .single-tag. */
.banner-area-one .person-image > img {
  object-fit: contain;
  object-position: bottom center;
  height: 700px;
  width: auto;
  max-width: none;
}
@media (max-width: 991px) {
  /* Text content above the doctor image on mobile (the template default is
     column-reverse, which put the image on top). */
  .banner-area-one {
    flex-direction: column;
    /* Drop the section's bottom padding so the doctor cutout sits flush at the
       banner's bottom edge (was leaving a ~90px empty band with the margin below). */
    padding-bottom: 0;
  }
  .banner-area-one .person-image {
    right: 0%;
    margin-bottom: 0;
  }
  /* Keep the doctor cutout inside the banner — at natural width it was ~670px
     and spilled out of the ~345px mobile banner on both sides. */
  .banner-area-one .person-image > img {
    height: auto;
    width: auto;
    max-width: 100%;
  }
}

/* Rounded banner corners (clip the doctor cutout + background to the radius). */
.banner-area-one {
  border-radius: 24px;
  overflow: hidden;
}
@media (max-width: 991px) {
  .banner-area-one {
    border-radius: 18px;
  }
}

/* Hero CTA row: Book Appointment button + patients-treated counter side by side. */
.banner-content-area .hero-cta-wrapper {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.hero-stat .hero-stat-number {
  /* Rubik has clean, rounded numerals — Syne's condensed glyphs looked squeezed. */
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  font-size: 42px;
  letter-spacing: 0.5px;
  color: #ed0101;
}
.hero-stat .hero-stat-label {
  font-size: 15px;
  color: var(--color-heading-1, #111032);
  max-width: 160px;
}
@media (max-width: 767px) {
  .hero-stat .hero-stat-number {
    font-size: 30px;
  }
}

/* Brand logos (SVGs have viewBox but no intrinsic width/height — size them explicitly). */
.header-wrapper-1 .logo img {
  height: 50px;
  width: auto;
  max-width: none;
}
.rts-footer-area .subscribe-area-start .logo img {
  height: 56px;
  width: auto;
  max-width: 100%;
}
@media (max-width: 767px) {
  .header-wrapper-1 .logo img {
    height: 40px;
  }
}
/* The logo is a rigid block: `max-width: none` above cancels Bootstrap's
   `img { max-width: 100% }`, and `.logo-area-start` is a flex item at the
   default `min-width: auto`, so it will not shrink below its content. At 40px
   tall the wordmark measures 178px, and on a 320px screen the header only has
   280px between the gutters — leaving 102px for a header-right cluster that
   needs 107. Measured: the logo ended at 198 and .header-right began at exactly
   198 (zero gap, the call button flush against "DR. ABHINAV'S"), with the
   cluster overhanging the container by 5px.
   The wordmark is 4.45:1, so trimming the height is what buys the width back:
   32px -> ~142px, leaving a real gap. min-width:0 is belt-and-braces so the
   area can shrink rather than push, if the logo ever changes. */
@media (max-width: 575px) {
  .header-wrapper-1 .logo img {
    height: 32px;
  }
  .logo-area-start {
    min-width: 0;
  }
}

/* About signature: doctor avatar + name (replaces the template's fake handwriting). */
.about-content-wrapper-right .signature {
  display: flex;
  align-items: center;
  gap: 12px;
}
.about-content-wrapper-right .signature .one {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border, #ddd8f9);
}
.about-content-wrapper-right .signature .sign-name {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--color-heading-1, #111032);
}

/* Google review badge in the testimonial author area. */
.single-testimonials-style .author-area .img img {
  object-fit: contain;
  padding: 7px;
  background: #fff;
}

/* Sticky header, de-janked.
   The vendor rule toggles position static->fixed with `transition: 0.3s` on
   ALL properties — which tries to animate `top: auto -> 0` (un-animatable, so
   it snaps) while the content lurches up by the header's height. The spacer in
   Header.tsx removes the lurch; this makes the header itself SLIDE in cleanly
   instead of snapping. */
.header-one.header--sticky {
  transition: none; /* cancel the vendor `all 0.3s` that fought the snap */
  will-change: transform;
}
.header-one.header--sticky.sticky {
  animation: entHeaderDown 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes entHeaderDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .header-one.header--sticky.sticky {
    animation: none;
  }
}

/* ---- Transparent nav over the homepage hero ----
   The header background is already transparent; this lifts it OUT OF FLOW so the
   full-viewport hero sits behind it, and flips the wordmark (swapped to the
   white-text logo in Header.tsx), links, dropdown carets and hamburger to white
   for contrast on the dark hero. Applies ONLY at the top of the homepage — the
   moment it goes sticky on scroll, `.sticky` (solid white, dark text) wins. */
.header-one.header--over-hero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: transparent;
}
/* A soft top-down scrim behind the nav so the white text keeps contrast even on
   the brighter hero slides. Sits above the hero, below the nav content; fades to
   nothing so it never reads as a solid bar. */
.header-one.header--over-hero::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 220px;
  background: linear-gradient(to bottom, rgba(13, 12, 40, 0.5) 0%, rgba(13, 12, 40, 0) 100%);
  pointer-events: none;
  z-index: -1;
}
/* Only the TOP-LEVEL nav links go white — the `> ul > li >` combinators stop
   this reaching the links inside the mega-menu / submenu panels, which sit on
   their own white background and must stay dark. (The broad `.nav-area ul li a`
   turned those white too, hiding them on the panel.) */
.header-one.header--over-hero .nav-area > ul > li > a,
.header-one.header--over-hero .has-dropdown::after {
  color: #fff;
}
.header-one.header--over-hero .nav-area > ul > li > a:hover,
.header-one.header--over-hero .has-dropdown:hover::after {
  color: #ffd4d4;
}
.header-one.header--over-hero .menu-btn i {
  color: #fff;
}
/* A hairline under the nav so the white text keeps a defined edge against a
   bright patch of hero, without reading as a solid bar. */
.header-one.header--over-hero .header-wrapper-1 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

/* Header top bar. The clinic's hours live HERE, in the red utility strip
   (owner's call) — and the strip has to stay on one line.

   Measured at 1440px: the four items want 1582px of the 1395px available, and
   the full postal address is 705px of that on its own. So the address is the
   only item allowed to shrink. It is a link to the map, so a clipped tail
   costs a reader nothing they cannot recover in one click — whereas the hours,
   the emergency number and the socials are short, complete facts that must
   never wrap or disappear. Above ~1620px nothing clips at all. */
.header-top .left,
.header-top .right {
  gap: 30px;
  min-width: 0;
}
.header-top .map-area,
.header-top .social-area-tranaparent {
  flex: 0 0 auto;
  min-width: 0;
}
.header-top .left .map-area:first-child {
  flex: 0 1 auto; /* the address — the one item that gives */
}
.header-top .map-area > i {
  flex: 0 0 auto;
}
.header-top .map-area a,
.header-top .map-area .ht-hours {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The hours are a fact, not a link — but they must read as the same class of
   text as the anchors beside them (they inherit 16px/grey otherwise). */
.header-top .map-area .ht-hours {
  font-size: 14px;
  color: #fff;
}

/* Jelly hover for the floating Ear / Nose / Throat pills.
   On hover, the continuous float is replaced by a springy squash-and-stretch wobble. */
@keyframes entJelly {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  20% {
    transform: translateY(-9px) scale(1.16, 0.84);
  }
  40% {
    transform: translateY(-3px) scale(0.88, 1.12);
  }
  60% {
    transform: translateY(-6px) scale(1.06, 0.96);
  }
  80% {
    transform: translateY(-4px) scale(0.98, 1.02);
  }
  100% {
    transform: translateY(-4px) scale(1, 1);
  }
}
.person-image .single-tag {
  cursor: pointer;
}
.person-image .single-tag:hover {
  animation: entJelly 0.7s ease both;
  box-shadow: 0 14px 30px rgba(237, 1, 1, 0.18);
}
@media (prefers-reduced-motion: reduce) {
  .person-image .single-tag:hover {
    animation: none;
  }
}

/* "Our Treatments" mega-menu — use the template's own promo graphic
   (menu/01.webp, a near-square card image) at its natural proportions so the
   card matches the original design exactly. (The old feature/01.webp was a tall
   876×1328 portrait that ballooned the dropdown height and cropped awkwardly.) */
.header-one .rts-mega-menu.with-add .menu-right-add > img {
  width: 100%;
  height: auto;
}

/* Mobile-only floating "patients treated" pill on the hero doctor image.
   Hidden on desktop (the inline .hero-stat counter serves there); on mobile it
   floats like the Ear / Nose / Throat tags and the inline counter is hidden. */
.person-image .single-tag.patient-pill {
  display: none;
}
@media (max-width: 991px) {
  .banner-content-area .hero-cta-wrapper .hero-stat {
    display: none;
  }
  .person-image .single-tag.patient-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    top: 6%;
    left: auto;
    right: 0;
    bottom: auto;
    padding: 8px 16px;
  }
  .person-image .single-tag.patient-pill .patient-pill-number {
    font-family: "Rubik", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    color: #ed0101;
  }
  .person-image .single-tag.patient-pill .patient-pill-label {
    font-size: 12px;
    line-height: 1.15;
    color: #111032;
    max-width: 92px;
  }
}

/* Contact page form (React) — fill the gaps the template's static markup got
   from global rules: full-width fields, a styled native <select>, textarea and
   a compact consent row. Colours inherit the .contact-page primary outline. */
.ent-contact-form form input,
.ent-contact-form form select,
.ent-contact-form form textarea {
  width: 100%;
  padding: 12px 22px;
  background: transparent;
  font-size: 14px;
}
.ent-contact-form form .half-input-wrapper input {
  flex: 1;
  width: auto;
  min-width: 0;
}
/* The native <select> must look like the other fields. The vendor rule that
   borders inputs (`input[type=text]…, textarea`) does NOT include `select`, so
   it used to fall through to a red pill — the odd-one-out in the owner's
   screenshot. Match the inputs exactly: same grey border, same 10px radius,
   same body-text colour, same height; only the custom arrow stays. */
.ent-contact-form form select {
  height: 54px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  border: var(--border-width) solid var(--color-border);
  color: var(--color-body, #6b6b6b);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b6b6b' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
}
.ent-contact-form form select:focus {
  border-color: var(--color-primary);
  outline: none;
}
.ent-contact-form form textarea {
  border-radius: 16px;
  min-height: 140px;
  padding: 16px 22px;
}
.ent-contact-form form .contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  /* Body colour, not red. Red on "I agree to be contacted" reads as an error or
     a required-field warning; this is just a consent line. */
  color: var(--color-body, #5f5f7a);
}
.ent-contact-form form .contact-consent input {
  width: auto;
  padding: 0;
  margin-top: 4px;
  accent-color: var(--color-primary);
}
/* Scoped to the component, NOT to a page wrapper. These used to hang off
   `.ent-contact-form`, which the contact-page redesign removed
   — so the validation error ("Please enter a valid email address.") silently
   lost its red and rendered as ordinary grey body text, on the one page the
   component is used. Presentation for a component belongs with the component. */
.contact-form-error {
  margin-bottom: 16px;
  color: #ed0101;
  font-weight: 500;
}
.contact-form-success .title {
  color: var(--color-primary);
  margin-bottom: 10px;
}

/* Contact page: map + form side by side, map fills its column height. */
.contact-form-area-start .contact-map-side {
  height: 100%;
  min-height: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.contact-form-area-start .contact-map-side iframe {
  width: 100%;
  height: 100%;
  min-height: 460px;
  display: block;
  border: 0;
}
@media (max-width: 991px) {
  .contact-form-area-start .contact-map-side iframe {
    min-height: 340px;
  }
}

/* Testimonials: equal-height cards across the row regardless of review length. */
.rts-testimonials-area .swiper-slide {
  height: auto;
}
.rts-testimonials-area .single-testimonials-style {
  height: 100%;
}

/* Service & procedure pages: the template ships these large in-page images with
   square corners, which reads oddly next to the rounded cards, gallery tiles and
   sidebar used everywhere else. Radius on both wrapper and img so the corners
   hold whichever element paints the edge. */
.thumbnail-large-service,
.service-details-mid-wrapper {
  border-radius: 16px;
  overflow: hidden;
}
.thumbnail-large-service img,
.service-details-mid-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* Blog details: mid-article image (template class has no base rule of its own). */
.blog-details-main-wrapper .thumbnail-mid {
  margin: 30px 0;
  border-radius: 10px;
  overflow: hidden;
}
.blog-details-main-wrapper .thumbnail-mid img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

/* ============================================================================
   Anatomy page — embedded Sketchfab 3D model cards.
   ============================================================================ */
.anatomy-model-grid {
  margin-top: 10px;
}
.anatomy-model-card {
  background: #fff;
  border: 1px solid var(--color-border, #e6e5ff);
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.anatomy-model-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px rgba(17, 16, 50, 0.1);
}
.anatomy-model-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #0d0d16;
}
.anatomy-model-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.anatomy-model-body {
  padding: 24px 26px 28px;
}
.anatomy-model-body .title {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  color: var(--color-heading-1, #111032);
  margin: 0 0 8px;
}
.anatomy-model-body p {
  font-size: 15px;
  line-height: var(--ent-lh-body);
  color: var(--color-body, #6b6b80);
  margin: 0 0 14px;
}
.anatomy-model-body a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: #ed0101;
}
.anatomy-model-body a i {
  font-size: 12px;
}
.anatomy-disclaimer {
  margin-top: 44px;
  text-align: center;
  font-size: 13px;
  color: #8a8a9c;
}

/* Subtle attribution credit for embedded 3D models (kept small for a clean look
   while preserving the licence-required creator attribution). */
.anatomy-model-body .anatomy-credit {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #9a9aad;
}
.anatomy-model-body .anatomy-credit a {
  color: #9a9aad;
  text-decoration: underline;
  font-weight: 500;
}
.anatomy-model-body .anatomy-credit a:hover {
  color: #ed0101;
}

/* ============================================================================
   Premium FULLSCREEN hero carousel (.ent-hero-*) — namespaced so it never
   collides with the template banner or inner-page banners.
   ============================================================================ */
.ent-hero {
  --ent-header-h: 90px;
  position: relative;
  /* Full viewport: the transparent header floats OVER the top of the hero
     rather than sitting above it, so the hero must fill the whole height, not
     `100svh − header`. Content is vertically centred, well clear of the header. */
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background: #0d0c28;
}
.ent-hero-swiper,
.ent-hero-swiper .swiper-slide {
  height: 100%;
}
.ent-hero-slide {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  /* The transparent header floats over the top of the hero, so the vertically
     centred content must be centred in the area BELOW it — otherwise it is
     jammed under the header (measured 13px above / 147px below). This pad
     reserves the header's height so the content sits balanced (~80/80). The
     doctor image is position:absolute bottom:0, so it is unaffected. */
  padding-top: var(--ent-header-h);
}
/* Branded gradient hero backgrounds — the template's stock photos were off-theme
   (maternity / generic OR scenes), so each slide uses a clean navy base with a
   per-topic accent glow and faint concentric "sound-wave" rings instead. */
.ent-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(120deg, #09081d 0%, #100e30 52%, #191650 100%);
}
.ent-hero-bg::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: repeating-radial-gradient(circle at 80% 34%, transparent 0 42px, rgba(255, 255, 255, 0.035) 42px 44px);
  transform-origin: 80% 34%;
  animation: entHeroRings 22s ease-in-out infinite alternate;
}
.ent-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(78% 92% at 80% 26%, var(--ent-hero-accent, rgba(237, 1, 1, 0.42)) 0%, transparent 58%),
    radial-gradient(46% 62% at 10% 98%, var(--ent-hero-accent-2, rgba(237, 1, 1, 0.14)) 0%, transparent 72%);
}
.ent-hero-bg--ent { --ent-hero-accent: rgba(237, 1, 1, 0.44); --ent-hero-accent-2: rgba(237, 1, 1, 0.16); }
.ent-hero-bg--vng { --ent-hero-accent: rgba(20, 184, 166, 0.42); --ent-hero-accent-2: rgba(20, 184, 166, 0.14); }
.ent-hero-bg--sinus { --ent-hero-accent: rgba(47, 127, 240, 0.44); --ent-hero-accent-2: rgba(47, 127, 240, 0.14); }
.ent-hero-bg--pediatric { --ent-hero-accent: rgba(255, 128, 92, 0.42); --ent-hero-accent-2: rgba(255, 128, 92, 0.14); }
.ent-hero-bg--book { --ent-hero-accent: rgba(237, 1, 1, 0.44); --ent-hero-accent-2: rgba(237, 1, 1, 0.16); }
@keyframes entHeroRings {
  from { transform: scale(1); opacity: 0.75; }
  to { transform: scale(1.16); opacity: 1; }
}
.ent-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(101deg, rgba(7, 6, 22, 0.86) 0%, rgba(7, 6, 22, 0.6) 40%, rgba(7, 6, 22, 0.14) 74%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  .ent-hero-bg::before { animation: none; }
}
/* Topical looping video backgrounds (throat / nasal-sinus slides). The gradient
   under .ent-hero-bg shows while the video loads; the scrim keeps text legible. */
.ent-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
}
.ent-hero-bg--video::before,
.ent-hero-bg--video::after { display: none; }
.ent-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.ent-hero-content {
  /* 700, not 620, so the pediatric slide's "in careful hands." (676px at the
     hero size) stays intact on one line. Safe for the other slides: they use
     fixed line breaks, so a wider cap only removes wrapping, never adds it. */
  max-width: 700px;
  color: #fff;
  flex: 1 1 auto;
}
.ent-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-left: 3px solid #ed0101;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ent-hero-title {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  color: #fff;
  /* Dialled down from 68px max — the headline was overpowering the hero. */
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.06;
  margin: 20px 0 18px;
}
.ent-hero-title-line {
  display: block;
}
.ent-hero-sub {
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
  max-width: 560px;
  margin: 0 0 34px;
}
.ent-hero-cta-row {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.ent-hero-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}
.ent-hero-call i { color: #ed0101; }
.ent-hero-call:hover { color: #ffd7d7; }
@keyframes entHeroRise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes entHeroFadeR {
  from { opacity: 0; transform: translateX(34px) scale(0.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
.ent-hero-swiper .swiper-slide-active .ent-hero-eyebrow { animation: entHeroRise 0.7s 0.05s both; }
.ent-hero-swiper .swiper-slide-active .ent-hero-title-line { animation: entHeroRise 0.7s both; }
.ent-hero-swiper .swiper-slide-active .ent-hero-title-line:nth-child(2) { animation-delay: 0.14s; }
.ent-hero-swiper .swiper-slide-active .ent-hero-sub { animation: entHeroRise 0.7s 0.3s both; }
.ent-hero-swiper .swiper-slide-active .ent-hero-cta-row { animation: entHeroRise 0.7s 0.42s both; }
.ent-hero-swiper .swiper-slide-active .ent-hero-feature-col { animation: entHeroFadeR 0.85s 0.2s both; }
.ent-hero-feature-col {
  flex: 0 0 auto;
  width: 360px;
  max-width: 40%;
}
.ent-hero-glass {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 22px;
  padding: 30px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #fff;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28);
}
.ent-hero-glass-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #fff;
  margin-bottom: 18px;
}
.ent-hero-glass-icon img { width: 32px; height: 32px; }
.ent-hero-glass-title {
  font-family: "Syne", sans-serif;
  font-size: 22px;
  color: #fff;
  margin: 0 0 16px;
}
.ent-hero-glass-list { margin: 0; padding: 0; list-style: none; }
.ent-hero-glass-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ent-hero-glass-list li:first-child { border-top: 0; }
.ent-hero-glass-list li i { color: #ed0101; margin-top: 4px; }
.ent-hero-glass--image { padding: 14px; }
.ent-hero-glass-img { border-radius: 14px; overflow: hidden; }
.ent-hero-glass-img img { width: 100%; height: 240px; object-fit: cover; display: block; }
.ent-hero-glass-caption { text-align: center; margin: 14px 0 6px; font-weight: 600; }
/* Slide 1: large doctor cut-out, bottom-anchored on the right (like the old hero). */
.ent-hero-doctor {
  position: absolute;
  right: 5%;
  bottom: 0;
  height: 94%;
  /* Cap must be viewport-relative, not a fixed 760px: the hero scales with the
     viewport, so a px ceiling made the doctor stop growing while the background
     kept going — he visibly shrank when zoomed out. vh keeps him proportional
     while still preventing anything absurd on very tall screens. */
  max-height: 90vh;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.ent-hero-doctor-img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.5));
}
.ent-hero-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #111032;
  border-radius: 30px;
  padding: 9px 18px;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
  animation: entTagFloat 3.4s ease-in-out infinite;
}
.ent-hero-pill img { width: 22px; height: 22px; }
.ent-hero-pill.one { top: 24%; left: -26px; }
.ent-hero-pill.two { top: 46%; right: -22px; animation-duration: 4s; }
.ent-hero-pill.three { bottom: 26%; left: -18px; animation-duration: 3.7s; }
.ent-hero-chip {
  position: absolute;
  bottom: 9%;
  left: -46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #111032;
  border-radius: 30px;
  padding: 9px 16px;
  font-size: 13px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}
.ent-hero-chip img { width: 20px; height: 20px; }
.ent-hero-visit-thumb { border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.ent-hero-visit-thumb img { width: 100%; height: 150px; object-fit: cover; display: block; }
.ent-hero-visit-stats { display: flex; justify-content: space-between; text-align: center; gap: 8px; }
.ent-hero-visit-stats strong { display: block; font-family: "Syne", sans-serif; font-size: 26px; color: #fff; }
.ent-hero-visit-stats span { font-size: 12px; color: rgba(255, 255, 255, 0.75); }
.ent-hero-visit-hours { text-align: center; margin: 18px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.8); }
.ent-hero .ent-hero-index {
  position: absolute !important;
  right: 42px !important;
  left: auto !important;
  top: 50% !important;
  bottom: auto !important;
  width: auto !important;
  transform: translateY(-50%) !important;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ent-hero-index-item {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.5);
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 6px 4px;
  cursor: pointer;
  position: relative;
  transition: 0.3s;
}
.ent-hero-index-item::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 0;
  background: #ed0101;
  transition: height 0.3s;
}
.ent-hero-index-item.swiper-pagination-bullet-active { color: #fff; font-size: 20px; }
.ent-hero-index-item.swiper-pagination-bullet-active::after { height: 22px; }
.ent-hero-arrows {
  position: absolute;
  /* Moved off the bottom-left, where they sat awkwardly under the headline, to
     the bottom-right — clear of the text, balanced against the centre scroll
     cue. On the one slide with the doctor they rest as glass buttons over the
     lower art. */
  right: 42px;
  left: auto;
  bottom: 42px;
  z-index: 6;
  display: flex;
  gap: 12px;
}
.ent-hero-arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: 0.3s;
}
.ent-hero-arrow:hover { background: #ed0101; border-color: #ed0101; }
.ent-hero-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 6;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.14);
}
.ent-hero-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: #ed0101;
  transition: width 0.12s linear;
}
@media (prefers-reduced-motion: reduce) {
  .ent-hero-bg,
  .ent-hero-swiper .swiper-slide-active * { animation: none !important; }
}
@media (max-width: 1199px) {
  .ent-hero-feature-col { width: 300px; }
  .ent-hero-index { right: 20px; }
}
@media (max-width: 991px) {
  /* Full-screen hero on mobile: the base calc() height fills the viewport and,
     being a definite height, makes every fade slide's video/gradient fill it.
     Content is centred; the doctor cut-out is hidden (kept on desktop). */
  /* Reserve room at the bottom for the scroll indicator so the (centred) content
     never crowds it, even on the tallest slide. */
  /* Reserve room at the bottom for the scroll indicator so the (centred) content
     never crowds it, even on the tallest slide. */
  .ent-hero-inner { flex-direction: column; text-align: center; gap: 20px; padding-bottom: 56px; }
  .ent-hero-content { max-width: 100%; }
  .ent-hero-sub { margin-left: auto; margin-right: auto; }
  .ent-hero-cta-row { justify-content: center; }
  /* The doctor cut-out stays desktop-only: the copy is centred on mobile, and
     the headline + sub + CTA + phone already fill the viewport, so any figure
     large enough to read either lands on the text or shrinks to a sliver. */
  .ent-hero-doctor { display: none; }
  .ent-hero-arrows { display: none; }
}

/* Scroll / swipe-down indicator (animated mouse) at the bottom of the hero. */
.ent-hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 6;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* style.css has a global `input, button, select, textarea { width: 100% }`.
     This is an absolutely-positioned button, so that stretched it to the full
     viewport width — an invisible 1425px-wide hit target lying across the
     bottom of the hero, directly over both carousel arrows. Clicking "next"
     hit THIS instead, and its handler scrolls the page: the reported
     "arrows don't change the slide, the page just scrolls down". */
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: color 0.25s;
}
.ent-hero-scroll:hover { color: #fff; }
.ent-hero-scroll-mouse {
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  padding-top: 7px;
}
.ent-hero-scroll-wheel {
  width: 4px;
  height: 8px;
  border-radius: 3px;
  background: #fff;
  animation: entScrollWheel 1.6s ease-in-out infinite;
}
.ent-hero-scroll-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
@keyframes entScrollWheel {
  0% { opacity: 0; transform: translateY(0); }
  25% { opacity: 1; }
  75% { opacity: 1; transform: translateY(12px); }
  100% { opacity: 0; transform: translateY(14px); }
}
@media (prefers-reduced-motion: reduce) {
  .ent-hero-scroll-wheel { animation: none; }
}

/* ============================================================================
   Appointment popup (.ent-modal-*) — dependency-free portal dialog.
   ============================================================================ */
@keyframes entModalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes entModalPop {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ent-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 6vh, 56px) 16px;
  background: rgba(11, 10, 34, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow-y: auto;
  animation: entModalFade 0.25s ease;
}
.ent-modal {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: auto;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4);
  animation: entModalPop 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ent-modal-head {
  position: relative;
  padding: 34px 36px 6px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, rgba(237, 1, 1, 0.06), rgba(255, 255, 255, 0));
}
.ent-modal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ed0101;
}
.ent-modal-title {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: #111032;
  margin: 10px 0 8px;
  line-height: 1.1;
}
.ent-modal-sub {
  font-size: 15px;
  line-height: var(--ent-lh-body);
  color: #5b5b6b;
  margin: 0;
}
.ent-modal-sub a { color: #ed0101; font-weight: 600; }
.ent-modal-body { padding: 20px 36px 34px; }
.ent-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #f2f2f6;
  color: #111032;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.ent-modal-close:hover { background: #ed0101; color: #fff; transform: rotate(90deg); }
@media (max-width: 575px) {
  .ent-modal-head { padding: 28px 22px 4px; }
  .ent-modal-body { padding: 18px 22px 26px; }
  .ent-modal-title { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .ent-modal-overlay, .ent-modal { animation: none; }
}

/* Appointment form re-hosted on the modal's light background. The template's
   field styling is scoped to the dark `.appoinment-area-main` section, so the
   modal needs its own self-contained, light-on-white field rules. */
.ent-modal-body form input {
  width: 100%;
  height: 50px;
  padding: 0 18px;
  margin-bottom: 14px;
  border: 1px solid #dcdce4;
  border-radius: 30px;
  background: #fff;
  color: #111032;
  font-size: 15px;
}
.ent-modal-body form input::placeholder { color: #8a8a99; }
.ent-modal-body form input:focus { border-color: #ed0101; outline: none; }
.ent-modal-body form input[type="date"] { color: #5b5b6b; }

.ent-modal-body .half-input-wrapper,
.ent-modal-body .input-half-wrapper {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ent-modal-body .half-input-wrapper > * ,
.ent-modal-body .input-half-wrapper > * { flex: 1 1 0; min-width: 0; }

/* Robust native date field. On some Android builds the browser-drawn calendar
   indicator sits half-outside the pill ("arrow falling out") and its dark chrome
   hides the dd-mm-yyyy format text ("no placeholder"). Fix: draw OUR OWN calendar
   icon inside the padding, colour the format text explicitly so it is always
   visible, and stretch the native indicator invisibly across the whole field so
   a tap anywhere opens the picker with no rogue arrow of its own. */
.ent-modal-body input[type='date'] {
  position: relative;
  padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  color: #5b5b6b;
}
.ent-modal-body input[type='date']::-webkit-datetime-edit {
  color: #5b5b6b;
}
.ent-modal-body input[type='date']::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

/* NiceSelect: unfloat, full-width, pill, light border — matches the inputs. */
.ent-modal-body .search-input { width: 100%; }
.ent-modal-body .nice-select {
  float: none;
  display: block;
  width: 100%;
  height: 50px;
  line-height: 48px;
  margin-bottom: 14px;
  padding-left: 18px;
  padding-right: 34px;
  border: 1px solid #dcdce4;
  border-radius: 30px;
  background: #fff;
  color: #111032;
  font-size: 15px;
}
.ent-modal-body .nice-select.open { border-color: #ed0101; }
/* Dropdown caret: the template colours it white (built for a dark section), which
   is invisible on the modal's white background — make it a visible grey. */
.ent-modal-body .nice-select::after {
  border-right-color: #6b6b6b !important;
  border-bottom-color: #6b6b6b !important;
  right: 20px;
}
/* The selected-value text must NEVER run under the caret. It was inline with
   overflow:visible, so a long label like "Morning (10:00 AM – 12:30 PM)" spilled
   straight over the arrow. Block + ellipsis clips it inside the padding box,
   before the caret — a structural guard independent of label length. */
.ent-modal-body .nice-select .current {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111032;
}
/* Date is short ("dd-mm-yyyy"); the time label is long. Split the row unevenly
   so the time select is wide enough to show its full label without truncating,
   instead of the 50/50 that squeezed it.

   MUST be min-width-scoped: below 576px the wrapper is flex-direction:column, so
   a flex-BASIS of 155px becomes 155px of HEIGHT — which ballooned the date box.
   The unequal split only makes sense while the two fields share a horizontal
   row; stacked, they each take the normal full width and 50px height. */
@media (min-width: 576px) {
  .ent-modal-body .datepicker-wrapper > input[type='date'] {
    flex: 0 0 155px;
  }
  .ent-modal-body .datepicker-wrapper > .search-input {
    flex: 1 1 auto;
    min-width: 0;
  }
}
.ent-modal-body .nice-select .list {
  width: 100%;
  margin-top: 6px;
  border-radius: 14px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 5;
}

.ent-modal-body form button[type="submit"] {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}

@media (max-width: 575px) {
  .ent-modal-body .half-input-wrapper,
  .ent-modal-body .input-half-wrapper { flex-direction: column; gap: 0; }
  /* Stacked: don't let flex-basis:0 collapse the inputs — keep their 50px height. */
  .ent-modal-body .half-input-wrapper > *,
  .ent-modal-body .input-half-wrapper > * { flex: 0 0 auto; width: 100%; }
}

/* ── Gender field (segmented radios) ─────────────────────────────────────────
   The clinic's HealthPlix booking form collects patient gender; this mirrors it
   in our form's pill-input language. It renders in three places: the booking
   modal (white), the homepage appointment panel (dark photo bg) and the
   /appointment page (light) — base styling below is light, with a dark override
   for the homepage panel. Each radio is laid invisibly over its pill so a tap
   anywhere selects it, and `input:checked + span` (universally supported — no
   :has() needed) paints the active state. The `input[type="radio"]` reset is
   specific enough to beat the broad `form input` rules in every context. */
.ent-gender-field {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
  min-width: 0;
}
.ent-gender-label {
  padding: 0;
  margin: 0 0 8px 4px;
  font-size: 13px;
  font-weight: 600;
  color: #6b6b7a;
}
.ent-gender-options { display: flex; gap: 10px; }
.ent-gender-opt {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}
.ent-gender-options input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.ent-gender-opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 8px;
  border: 1px solid #dcdce4;
  border-radius: 30px;
  background: #fff;
  color: #111032;
  font-size: 15px;
  text-align: center;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.ent-gender-opt:hover span { border-color: #ed0101; }
.ent-gender-options input[type="radio"]:checked + span {
  background: #ed0101;
  border-color: #ed0101;
  color: #fff;
}
.ent-gender-options input[type="radio"]:focus-visible + span {
  outline: 2px solid #ed0101;
  outline-offset: 2px;
}

/* Homepage appointment panel sits on a dark photo — invert to white outlines to
   match that section's transparent, white-bordered inputs. */
.appoinment-area-main .ent-gender-label { color: #fff; }
.appoinment-area-main .ent-gender-opt span {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.appoinment-area-main .ent-gender-options input[type="radio"]:checked + span {
  background: #fff;
  border-color: #fff;
  color: var(--color-primary);
}

/* Age is a number field — hide the spinner arrows so it matches the plain pills. */
.ent-no-spin { -moz-appearance: textfield; appearance: textfield; }
.ent-no-spin::-webkit-outer-spin-button,
.ent-no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Homepage FAQ section (replaces the old inline booking form). */
.ent-home-faq .container-wrapper-faq { margin: 0; max-width: none; }
.ent-home-faq .container-wrapper-faq .accordion { margin-top: 0; }
.ent-home-faq-intro .disc { margin-bottom: 28px; }
.ent-home-faq-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.ent-home-faq-book {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #111032;
  transition: color 0.25s;
}
.ent-home-faq-book i { color: #ed0101; }
.ent-home-faq-book:hover { color: #ed0101; }
@media (max-width: 991px) {
  .ent-home-faq-intro { margin-bottom: 26px; }
}

/* Mobile-drawer appointment button (overrides `header .rts-btn { display:none }`). */
/* The vendor's `.side-bar button` rule (style.css:12465) is written for the
   drawer's CLOSE button, but it matches EVERY <button> in the drawer — so it
   also grabbed this CTA and gave it `position: absolute` (tearing it out of the
   menu's flow) and `max-width: max-content`, which silently capped the
   `width: calc(100% - 40px)` below at 190px instead of 270px. Both have to be
   undone explicitly; neither is overridden by declaring width alone. */
#side-bar .ent-drawer-book {
  display: inline-flex !important;
  position: static;
  max-width: none;
  align-items: center;
  justify-content: center;
  width: calc(100% - 40px);
  margin: 30px 20px 0;
}
/* Secondary "request a callback" link under the primary HealthPlix button in the
   mobile drawer. A quiet text link, not a second competing button. */
#side-bar .ent-drawer-callback {
  display: block;
  width: calc(100% - 40px);
  margin: 12px 20px 0;
  padding: 6px 0;
  background: none;
  border: 0;
  color: #6b6b7a;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
#side-bar .ent-drawer-callback:hover { color: #ed0101; }

/* "Why choose us" card: ENT-anatomy video background (replaces the stock doctor).
   An orange scrim keeps the card on-brand and the white text legible. */
.right-whychoose-us-style-one { border-radius: 24px; overflow: hidden; }
.whychoose-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.whychoose-video-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(120deg, rgba(190, 42, 8, 0.92) 0%, rgba(190, 42, 8, 0.6) 46%, rgba(190, 42, 8, 0.34) 100%),
    linear-gradient(0deg, rgba(190, 42, 8, 0.5) 0%, rgba(190, 42, 8, 0) 42%);
}
.right-whychoose-us-style-one .inner-content .top,
.right-whychoose-us-style-one .inner-content .call-us { z-index: 3; }

/* Footer brand tagline under the logo. */
.footer-logo-brand {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
}
.footer-tagline {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  letter-spacing: 0.3px;
}

/* Surgeries & Procedures page cards. */
.ent-anchor { scroll-margin-top: 120px; }
.ent-procedure-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.ent-procedure-icon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(237, 1, 1, 0.08);
}
.ent-procedure-icon img { width: 28px; height: 28px; }
.ent-procedure-icon i { font-size: 24px; line-height: 1; color: #ed0101; }

/* Bigger tap target for the service-card "Learn More" links on mobile
   (bare text links were ~19px tall — below the 24px WCAG target-size minimum). */
@media (max-width: 767px) {
  .single-service-area .btn-transparent {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* Font Awesome icons inside the mega menus (all menus — About / Surgeries /
   Conditions / Treatments — now use solid FA glyphs). Sized to match the old SVGs. */
.rts-mega-menu.with-add .mega-menu-item li a i {
  width: 30px;
  min-width: 30px;
  margin-right: 5px;
  font-size: 20px;
  text-align: center;
  color: #ed0101;
  transition: 0.3s;
}

.ent-stat-value {
  display: block;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  color: #ed0101;
}
.ent-stat-label {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  color: #5f5f7a;
}
@media (max-width: 767px) {
  .ent-stat-value {
    font-size: 34px;
  }
}

/* Homepage blog section cards. */
.ent-home-blog .ent-blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ent-blog-thumb {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 20px;
}
.ent-blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.ent-blog-card:hover .ent-blog-thumb img {
  transform: scale(1.05);
}
.ent-blog-cat {
  color: #ed0101;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ent-blog-title {
  margin: 10px 0 12px;
  font-size: 20px;
  line-height: 1.35;
}
.ent-blog-title a {
  color: #111032;
  transition: color 0.3s ease;
}
.ent-blog-card:hover .ent-blog-title a {
  color: #ed0101;
}
.ent-blog-excerpt {
  margin-bottom: 16px;
  color: #5f5f7a;
  flex-grow: 1;
}
.ent-blog-meta {
  font-size: 14px;
  color: #6a6a80;
  margin-bottom: 0;
}
.ent-procedure-card .title { font-size: var(--ent-fs-card-title); margin: 0 0 8px; }
.ent-procedure-card p { margin: 0; }

/* The template sets `word-break: break-word` on every heading, which guillotines
   long medical terms mid-word in narrow cards ("Tympanoplast / y /"). Prefer a
   proper hyphenated break (the page is lang="en", so the browser can hyphenate),
   and only break inside a word as a last resort. */
.ent-procedure-card .title,
.ent-vng-point .title,
.ent-exam-area-card .title,
.ent-symptom-card p,
.ent-feature-title,
.ent-gallery-cat-title {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Service sidebar spacing.
   The template separates these cards by a 40px margin-top on each card's *first
   child*, relying on that margin collapsing out of the padding-less card. Any
   card whose first child doesn't happen to carry that margin sits flush against
   its neighbour — which is what happened twice: first the doctor card, then
   Clinic Timings once it became a component. Space the CARDS directly instead of
   depending on which child a card happens to start with. */
.single-rightsidebar-single + .single-rightsidebar-single {
  margin-top: 40px;
}
/* On phones the sidebar stacks under the main content with a 0px gap, so
   "Our Treatments" collided with the closing booking box above it. Bootstrap's
   lg breakpoint is 991.98px, so this is where col-lg-3 drops below col-lg-9. */
@media (max-width: 991px) {
  .service-details .col-lg-9 + .col-lg-3 {
    margin-top: 48px;
  }
}
.ent-sidebar-doctor-card .title {
  margin-bottom: 24px;
}

/* ---- Symptom cards with photos ----
   The icon variant is not a fallback for "we ran out of images" - it is the
   deliberate treatment for a symptom that is a clinical finding (e.g. the
   appearance of the tonsils), which is never illustrated with a generated
   photo. It keeps the same card shape so the grid stays even. */
.ent-symptom-card-media {
  display: flex;
  flex-direction: column;
  /* the base card centres its children, which collapsed the media panel to the
     icon's own width — stretch so it always spans the card */
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  height: 100%;
}
.ent-symptom-media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f4f4fb;
}
.ent-symptom-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.ent-symptom-card-media:hover .ent-symptom-media img {
  transform: scale(1.05);
}
.ent-symptom-media.is-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(237, 1, 1, 0.06);
}
.ent-symptom-media.is-icon i {
  font-size: 40px;
  color: #ed0101;
}
.ent-symptom-card-media p {
  margin: 0;
  /* The padding is the reason this rule exists — `.ent-symptom-card p` (which
     wins the line-height/font below, same specificity but later) does not set
     it. The line-height that used to sit here never applied; it is dropped
     rather than left to look meaningful. */
  padding: 15px 17px 17px;
  font-weight: 500;
}

/* Footer link columns: keep each link on one line. "About the Doctor" needs
   ~128px against a ~119px column, so it wrapped; the grid gutter absorbs the
   difference once the links are allowed to sit on a single line. */
.footer-area .nav-bottom a,
.nav-bottom a {
  white-space: nowrap;
}

/* Sidebar link lists (Related treatments / Related conditions) */
.ent-sidelinks li + li {
  margin-top: 10px;
}
.ent-sidelinks a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  color: #111032;
  font-weight: 500;
  line-height: var(--ent-lh-tight);
  transition: background 0.25s ease, color 0.25s ease;
}
.ent-sidelinks a:hover {
  background: rgba(237, 1, 1, 0.05);
  color: #ed0101;
}
.ent-sidelink-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(237, 1, 1, 0.08);
  transition: background 0.25s ease;
}
.ent-sidelink-icon i {
  font-size: 15px;
  color: #ed0101;
}
.ent-sidelinks a:hover .ent-sidelink-icon {
  background: rgba(237, 1, 1, 0.14);
}

/* ---- Clinic timings card (see ClinicTimings.tsx) ----
   Day label on its own line with the sessions stacked beneath it. The old
   two-column layout wrapped both the day and the hours in a narrow sidebar. */
.ent-timings {
  border: 1px solid #ece9fb;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.ent-timings-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  background: #f7f6fd;
  border-bottom: 1px solid #ece9fb;
}
.ent-timings-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ed0101;
}
.ent-timings-icon i {
  font-size: 14px;
  color: #fff;
}
.ent-timings .ent-timings-title {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  color: #111032;
}
.ent-timings-list {
  margin: 0;
  padding: 4px 18px 12px;
  list-style: none;
}
.ent-timings-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 0;
}
.ent-timings-row + .ent-timings-row {
  border-top: 1px solid #f2f1f9;
}
.ent-timings-day {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111032;
}
.ent-timings-sessions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ent-timings-session {
  color: #5f5f7a;
  font-size: 15px;
  line-height: var(--ent-lh-body);
}

/* ---- The one booking CTA, used site-wide (see BookingCta.tsx) ----
   Two shapes, one look. `strip` for full-width sections, `card` for sidebars.
   Everything else was deleted: booking should look the same on every page. */
.ent-book {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(160deg, #1b1a4a 0%, #111032 60%);
  box-shadow: 0 18px 40px rgba(17, 16, 50, 0.16);
}
.ent-book::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 1, 1, 0.4) 0%, rgba(237, 1, 1, 0) 70%);
  pointer-events: none;
}
.ent-book > * {
  position: relative;
}
.ent-book-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ed0101;
  box-shadow: 0 8px 20px rgba(237, 1, 1, 0.4);
}
.ent-book-icon i {
  font-size: 23px;
  color: #fff;
}
/* Text colours are scoped under .ent-book rather than set on the bare class.
   This component is dropped into the header's mega menu too, where the
   template's `.nav-area ul li a { color: #111032 }` (specificity 0,1,3) beat a
   plain `.ent-book-call` (0,1,0) and painted the phone number navy-on-navy —
   invisible. Two classes (0,2,0) win wherever the component is used. */
.ent-book .ent-book-title {
  margin: 0 0 6px;
  color: #fff;
  font-size: 24px;
  line-height: 1.3;
}
.ent-book .ent-book-sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--ent-fs-lead);
  line-height: var(--ent-lh-body);
}
.ent-book .rts-btn {
  max-width: none; /* template caps .rts-btn at max-content */
}
/* The template hovers primary buttons to navy (#111032) — which on this navy
   card turns the button invisible. Darker red keeps it readable and reads as a
   press state rather than a disappearance. */
.ent-book .rts-btn.btn-primary:hover {
  background: #b80101;
  color: #fff;
}

/* In the mega menu the card IS the panel: it fills the column edge-to-edge and
   lets the menu's own `border-radius: 0 0 10px 10px` + `overflow: hidden` shape
   the corners. Keeping our own 18px radius here left white gaps against the
   menu's square top and 10px bottom. */
.rts-mega-menu .ent-book {
  border-radius: 0;
  height: 100%;
}
.ent-book .ent-book-call {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  transition: color 0.25s ease;
}
.ent-book .ent-book-call i {
  font-size: 14px;
  color: #ed0101;
}
.ent-book .ent-book-call:hover {
  color: #ff5a5a;
}

/* strip: full-width sections. Deliberately restrained in height — this is a
   prompt, not a billboard. */
.ent-book--strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px;
}
.ent-book--strip .ent-book-main {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 420px;
}
.ent-book--strip .ent-book-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

/* card: sidebars */
.ent-book--card {
  text-align: center;
  padding: 30px 24px 28px;
}
.ent-book--card .ent-book-main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ent-book--card .ent-book-icon {
  margin-bottom: 16px;
}
.ent-book--card .ent-book-title {
  font-size: 22px;
}
.ent-book--card .ent-book-sub {
  margin-bottom: 22px;
}
.ent-book--card .ent-book-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.ent-book--card .rts-btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 767px) {
  .ent-book--strip {
    padding: 24px 20px;
    align-items: flex-start;
  }
  .ent-book--strip .ent-book-main {
    align-items: flex-start;
  }
}

/* ---- Conditions listing ----
   Was four plain white boxes with a title and one line. The conditions already
   carry symptom photography and an anatomy icon, so the cards use those rather
   than inventing new assets. Same card language as the blog listing. */
.ent-conditions-intro {
  max-width: 760px;
  margin: 0 0 34px;
}
.ent-conditions-intro h2 {
  margin: 0 0 12px;
}
.ent-conditions-intro p {
  margin: 0;
  font-size: 17px;
  line-height: var(--ent-lh-prose);
  color: #5f5f7a;
}

/* ---- Blog listing: equal-height article cards with a Read Now CTA ---- */
/* ---- Blog search + category filter (see BlogBrowser.tsx) ---- */
.ent-blog-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 34px;
}
.ent-blog-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 340px;
}
.ent-blog-search > i {
  position: absolute;
  left: 16px;
  font-size: 14px;
  color: #8d8d9a;
  pointer-events: none;
}
.ent-blog-search input {
  width: 100%;
  height: 46px;
  padding: 0 38px 0 40px;
  border: 1px solid #e6e4f4;
  border-radius: 40px;
  background: #fff;
  color: #111032;
  font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ent-blog-search input::placeholder {
  color: #9a99ad;
}
.ent-blog-search input:focus {
  outline: none;
  border-color: #ed0101;
  box-shadow: 0 0 0 3px rgba(237, 1, 1, 0.1);
}
/* search inputs get a native clear affordance in some browsers; ours is
   consistent across all of them */
.ent-blog-search input::-webkit-search-cancel-button {
  display: none;
}
.ent-blog-search-clear {
  position: absolute;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f0eefb;
  color: #5f5f7a;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.ent-blog-search-clear:hover {
  background: #ed0101;
  color: #fff;
}
.ent-blog-search-clear i {
  font-size: 11px;
}
.ent-blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ent-blog-filter {
  /* style.css has a global `input, button, select, textarea { width: 100% }`,
     which made every pill fill the row and wrap onto its own line. */
  width: auto;
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 1px solid #e6e4f4;
  border-radius: 40px;
  background: #fff;
  color: #5f5f7a;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ent-blog-filter:hover {
  border-color: #ed0101;
  color: #ed0101;
}
.ent-blog-filter.is-active {
  background: #ed0101;
  border-color: #ed0101;
  color: #fff;
}
.ent-blog-empty {
  margin: 40px 0;
  color: #5f5f7a;
  font-size: 16px;
  line-height: var(--ent-lh-body);
}
.ent-blog-empty-reset {
  width: auto; /* see the global button width:100% noted above */
  padding: 0;
  border: 0;
  background: none;
  color: #ed0101;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.ent-blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid #ece9fb;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(17, 16, 50, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ent-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(17, 16, 50, 0.1);
  border-color: #e2ddf7;
}
.ent-blog-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f4f4fb;
}
.ent-blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.ent-blog-card:hover .ent-blog-card-media img {
  transform: scale(1.06);
}
.ent-blog-card-cat {
  position: absolute;
  left: 14px;
  top: 14px;
  background: #ed0101;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
/* flex:1 + margin-top:auto on the CTA is what keeps every card's button on the
   same baseline regardless of title/excerpt length. */
.ent-blog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 22px 24px;
}
/* Title and excerpt each RESERVE a fixed number of lines (min-height), not just
   cap them. Clamping alone still lets a 1-line title or 2-line excerpt sit
   short, which pushed the meta rule to a different height on every card even
   though the CTA stayed pinned by margin-top:auto. */
.ent-blog-card-title {
  font-size: var(--ent-fs-card-title);
  line-height: 1.34;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.68em; /* 2 lines x 1.34 */
}
.ent-blog-card-title a {
  color: #111032;
  transition: color 0.25s ease;
}
.ent-blog-card:hover .ent-blog-card-title a {
  color: #ed0101;
}
.ent-blog-card-excerpt {
  margin: 0 0 18px;
  color: #5f5f7a;
  font-size: var(--ent-fs-card-desc);
  line-height: var(--ent-lh-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.8em; /* 3 lines x 1.6 */
}
.ent-blog-card-meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13.5px;
  color: #6a6a80;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid #f0eefb;
}
.ent-blog-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ent-blog-card-meta i {
  color: #ed0101;
  font-size: 13px;
  flex: 0 0 auto;
}
.ent-blog-card-cta {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  border-radius: 40px;
  border: 1px solid rgba(237, 1, 1, 0.28);
  background: rgba(237, 1, 1, 0.05);
  color: #ed0101;
  font-weight: 600;
  font-size: 15px;
  transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}
.ent-blog-card-cta i {
  font-size: 13px;
  transition: transform 0.28s ease;
}
.ent-blog-card-cta:hover {
  background: #ed0101;
  border-color: #ed0101;
  color: #fff;
}
.ent-blog-card-cta:hover i {
  transform: translateX(4px);
}
@media (max-width: 575px) {
  .ent-blog-tools { gap: 14px; margin-bottom: 26px; }
  .ent-blog-search { flex: 1 1 100%; }
  .ent-blog-card-body { padding: 18px 18px 20px; }
  .ent-blog-card-title { font-size: 18px; }
}

/* Blog: sub-headed sections for longer articles. */
.ent-post-section {
  margin-top: 34px;
}
/* The template pins `.blog-details-main-wrapper .inner-content .title` to a
   fixed line-height: 44px, which is far too airy for a 24px sub-heading that
   wraps to two lines. Match its specificity to override without !important. */
.blog-details-main-wrapper .inner-content .ent-post-section .title,
.ent-post-section .title {
  font-size: 24px;
  margin: 0 0 14px;
  color: #111032;
  line-height: 1.34;
}
@media (max-width: 575px) {
  .ent-post-section { margin-top: 26px; }
  .ent-post-section .title { font-size: 21px; }
}

/* ---- Procedure "what this involves": a definition list, not a card grid ----
   These entries are clinical terms plus a one-line explanation. In a 3-column
   card grid each got ~180px of text width, which broke long terms mid-word and
   stretched every description into a thin 6-line column. Rows give the term its
   own space and let the eye scan term -> meaning. */
.ent-aspect-list {
  margin: 24px 0 0;
  border-top: 1px solid #ece9fb;
}
.ent-aspect-row {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 6px 16px;
  align-items: start;
  padding: 18px 6px;
  border-bottom: 1px solid #ece9fb;
  transition: background 0.25s ease;
}
.ent-aspect-row:hover {
  background: rgba(237, 1, 1, 0.025);
}
.ent-aspect-icon {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(237, 1, 1, 0.08);
}
.ent-aspect-icon i {
  font-size: 19px;
  color: #ed0101;
}
.ent-aspect-term {
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #111032;
}
.ent-aspect-desc {
  margin: 0;
  color: #5f5f7a;
  font-size: var(--ent-fs-lead);
  line-height: var(--ent-lh-body);
}
/* Wide screens: term and explanation side by side, so the list reads as a
   proper glossary and the descriptions stop stacking under the terms. */
@media (min-width: 992px) {
  .ent-aspect-row {
    grid-template-columns: 46px minmax(190px, 240px) 1fr;
    align-items: baseline;
    gap: 0 20px;
    padding: 20px 6px;
  }
  .ent-aspect-icon {
    grid-row: auto;
    align-self: center;
  }
}

/* Diagnostic examination — the three ENT areas (ear / nose / throat), each
   shown as a centred card: red circular icon, small red area label, exam name. */
.ent-exam-area-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ent-exam-area-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(237, 1, 1, 0.08);
  margin-bottom: 14px;
}
.ent-exam-area-icon i { font-size: 28px; line-height: 1; color: #ed0101; }
.ent-exam-area-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ed0101;
}
.ent-exam-area-card .title { font-size: var(--ent-fs-card-title); margin: 4px 0 10px; color: #111032; }
.ent-exam-area-card p { margin: 0; }

/* Clickable procedure cards on the /surgeries listing (link, not blue text). */
/* ---- Homepage "Surgeries & Procedures" carousel ---- */
.ent-surgeries-area {
  background: linear-gradient(180deg, #fafafe 0%, #f3f2fb 100%);
}
.ent-surgeries-head-btn {
  display: flex;
  justify-content: flex-end;
}
.ent-surgeries-head-btn .rts-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ent-surgeries-swiper {
  padding-bottom: 6px;
}
.ent-surgeries-swiper .swiper-slide {
  height: auto;
}
.ent-surgery-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid #ece9fb;
  border-radius: 16px;
  padding: 32px 28px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ent-surgery-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 44px rgba(17, 16, 50, 0.1);
  border-color: rgba(237, 1, 1, 0.25);
}
.ent-surgery-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(237, 1, 1, 0.08);
  margin-bottom: 22px;
}
.ent-surgery-icon img {
  width: 30px;
  height: 30px;
}
.ent-surgery-card .title {
  font-size: 20px;
  line-height: 1.35;
  margin: 0 0 12px;
  color: #111032;
}
.ent-surgery-card .disc {
  color: #5f5f7a;
  font-size: 15px;
  line-height: var(--ent-lh-body);
  margin: 0 0 20px;
  flex-grow: 1;
}
.ent-surgery-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ed0101;
  font-weight: 600;
  font-size: 15px;
  margin-top: auto;
}
.ent-surgery-link i {
  transition: transform 0.3s ease;
}
.ent-surgery-card:hover .ent-surgery-link i {
  transform: translateX(4px);
}
.ent-surgeries-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 42px;
}
.ent-surgeries-arrow {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #d9d5f2;
  background: #fff;
  color: #111032;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}
.ent-surgeries-arrow:hover {
  background: #ed0101;
  border-color: #ed0101;
  color: #fff;
}
.ent-surgeries-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
}
.ent-surgeries-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 !important;
  background: #c9c4e6;
  opacity: 1;
  transition: all 0.3s ease;
}
.ent-surgeries-pagination .swiper-pagination-bullet-active {
  width: 26px;
  border-radius: 6px;
  background: #ed0101;
}
/* Visible keyboard focus for carousel cards, controls and bullets. */
.ent-surgery-card:focus-visible,
.ent-surgeries-arrow:focus-visible,
.ent-surgeries-pagination .swiper-pagination-bullet:focus-visible {
  outline: 2px solid #ed0101;
  outline-offset: 3px;
}
/* On mobile the header columns stack; align the CTA with the left-aligned title. */
@media (max-width: 767px) {
  .ent-surgeries-head-btn {
    justify-content: flex-start;
    margin-top: 24px;
  }
}

/* Why Choose Us: white panel instead of the template's lavender bg-light. */
.why-choose-us-area .why-choose-area-wrapper.bg-light {
  background-color: #fff !important;
}

/* Appointment form policy note (first-come-first-served + conduct). */
.ent-form-note {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(237, 1, 1, 0.05);
  border: 1px solid rgba(237, 1, 1, 0.14);
  font-size: 13.5px;
  line-height: var(--ent-lh-body);
  color: #5f5f7a;
}
.ent-form-note strong {
  color: #2b2b3d;
  font-weight: 600;
}

/* ================= Vertigo / VNG (equiCOG) page ================= */
/* Rendered inside the shared service-details two-column layout. Give the prose
   paragraphs real spacing (the template default is margin:0, which turns this
   content-heavy page into a wall of text) and left-align the small note. The
   `> p` combinator keeps this off the card paragraphs nested deeper inside. */
.ent-vng-details .content-wrapper-service-details > p {
  margin-bottom: 16px;
}
.ent-vng-details .content-wrapper-service-details > p:last-child {
  margin-bottom: 0;
}
.ent-vng-details .anatomy-disclaimer {
  text-align: left;
}
/* Consistent body-text colour across every section (the template checklist
   defaulted to dark navy, the cards to two different greys). */
.ent-vng-details .content-wrapper-service-details > p,
.ent-vng-details .ent-procedure-card p,
.ent-vng-details .ent-vng-point p,
.ent-vng-details .ent-vng-step-body p,
.ent-vng-details .content-wrapper-service-details .check-area-wrapper .left-wrapper .single p {
  color: #5f5f7a;
}
/* Comfier line-height for card titles that wrap to 2-3 lines (were ~1.2). */
.ent-vng-details .ent-procedure-card .title,
.ent-vng-details .ent-vng-point .title,
.ent-vng-details .ent-vng-step-body .title {
  line-height: 1.32;
}
/* FAQ: adopt the homepage's rounded-card / plus-minus accordion look, but let
   it fill the content column instead of the template's 850px centred width. */
.ent-vng-details .container-wrapper-faq {
  max-width: none;
  margin: 0;
}
.ent-vng-details .container-wrapper-faq .accordion {
  margin-top: 20px;
}

/* "equiCOG at a glance" spec tiles */
.ent-vng-spec {
  height: 100%;
  background: #fff;
  border: 1px solid #ece9fb;
  border-left: 3px solid #ed0101;
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.ent-vng-spec:hover {
  box-shadow: 0 16px 34px rgba(17, 16, 50, 0.08);
  transform: translateY(-3px);
}
.ent-vng-spec-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ed0101;
}
.ent-vng-spec-value {
  color: #3a3a52;
  font-size: var(--ent-fs-lead);
  line-height: var(--ent-lh-body);
}

/* Why-it-matters point cards (vertical) */
.ent-vng-point {
  display: flex;
  flex-direction: column;
}
.ent-vng-point .ent-procedure-icon {
  margin-bottom: 18px;
}
.ent-vng-point .title {
  font-size: var(--ent-fs-card-title);
  margin: 0 0 10px;
  color: #111032;
}
.ent-vng-point p {
  margin: 0;
  color: #5f5f7a;
}

/* "What to expect" numbered steps */
.ent-vng-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ent-vng-step {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #ece9fb;
  border-radius: 16px;
  padding: 24px 26px;
  transition: box-shadow 0.3s ease;
}
.ent-vng-step:hover {
  box-shadow: 0 16px 34px rgba(17, 16, 50, 0.07);
}
.ent-vng-step-num {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ed0101;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ent-vng-step-body .title {
  font-size: 20px;
  margin: 0 0 8px;
  color: #111032;
}
.ent-vng-step-body p {
  margin: 0;
  color: #5f5f7a;
}

@media (max-width: 767px) {
  .ent-vng-step {
    padding: 20px;
    gap: 16px;
  }
  .ent-vng-step-num {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }
}

/* ---- "Our Values" section (homepage + About) ---- */
.ent-values-area {
  background: linear-gradient(180deg, #fafaff 0%, #f4f4fb 100%);
}
.ent-value-card {
  height: 100%;
  background: #fff;
  border: 1px solid #ece9fb;
  border-radius: 18px;
  padding: 34px 30px;
  box-shadow: 0 16px 40px rgba(17, 16, 50, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ent-value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px rgba(17, 16, 50, 0.1);
}
.ent-value-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 16px;
}
.ent-value-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(237, 1, 1, 0.1);
  color: #ed0101;
  font-size: 22px;
}
.ent-value-title {
  margin: 0;
  font-size: 24px;
  color: #111032;
}
.ent-value-desc {
  margin: 0;
  text-align: center;
  color: #5f5f7a;
  line-height: var(--ent-lh-body);
  font-size: var(--ent-fs-lead);
}
@media (max-width: 575px) {
  .ent-value-card {
    padding: 28px 24px;
  }
  .ent-value-title {
    font-size: 21px;
  }
}

/* ---- Solid Font Awesome icons replacing the old line-art SVG <img> icons ---- */
/* Homepage + /services service cards */
.single-service-area .icon i {
  display: inline-block;
  font-size: 44px;
  line-height: 1;
  color: #ed0101;
}
/* "Why Choose Us" feature list */
.why-choose-us-main-wrapper .single-choose-us .icon i {
  display: inline-block;
  font-size: 38px;
  line-height: 1;
  color: #ed0101;
}
/* Phone icon on the Why-Choose video panel (over dark video) */
.right-whychoose-us-style-one .inner-content .call-us i {
  font-size: 20px;
  line-height: 1;
  color: #fff;
}
/* Short-service quick links (Call / Book / Meet / Get Diagnosed) */
.single-short-service .icon i {
  display: inline-block;
  font-size: 42px;
  line-height: 1;
  color: #ed0101;
}
/* Surgeries carousel cards (icon sits inside a 60px tinted rounded box) */
.ent-surgery-icon i {
  font-size: 28px;
  line-height: 1;
  color: #ed0101;
}
/* Service-detail sidebar "Our Treatments" list */
.single-department-service-wrapper .left-side .icon i {
  width: 30px;
  text-align: center;
  font-size: 22px;
  line-height: 1;
  color: #ed0101;
}
/* Check-list bullets on service / surgery / vertigo detail pages */
.content-wrapper-service-details .check-area-wrapper .left-wrapper .single i {
  font-size: 18px;
  line-height: 1;
  color: #ed0101;
}
/* Contact-page info cards (Location / Phone / Working hours) */
.single-contact-information-card .icon i {
  font-size: 40px;
  line-height: 1;
  color: #ed0101;
}
/* Mobile menu hamburger toggle (replaces the old inline <svg> bars) */
.menu-btn i {
  font-size: 22px;
  line-height: 1;
  color: #111032;
}

/* ---- Gallery page (/gallery) ---- */
.ent-gallery-intro {
  max-width: 760px;
  margin: 0 0 42px;
  font-size: 18px;
  line-height: var(--ent-lh-prose);
  color: #5f5f7a;
}
.ent-gallery-grid {
  display: grid;
  /* auto-fit fills each row regardless of photo count (2 photos -> half-width
     each, 3 -> thirds) so a short category never leaves an empty column. */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
  align-items: start;
}
@media (max-width: 575px) {
  .ent-gallery-grid { grid-template-columns: 1fr; }
}
.ent-gallery-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  background: #f4f4fb;
  box-shadow: 0 14px 34px rgba(17, 16, 50, 0.06);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}
.ent-gallery-item:focus-visible {
  outline: 3px solid #ed0101;
  outline-offset: 3px;
}
.ent-gallery-item img {
  display: block;
  width: 100%;
  /* Uniform tiles so a row of mixed portrait/landscape photos aligns cleanly;
     the lightbox shows the full, uncropped photo on click. */
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}
.ent-gallery-item:hover img {
  transform: scale(1.05);
}
.ent-gallery-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 18px 16px;
  color: #fff;
  font-size: 15px;
  line-height: var(--ent-lh-tight);
  background: linear-gradient(to top, rgba(17, 16, 50, 0.82), rgba(17, 16, 50, 0));
}
.ent-gallery-empty {
  font-size: 18px;
  color: #5f5f7a;
}

/* Gallery lightbox / photo viewer */
.ent-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 10, 26, 0.93);
  animation: entLightboxIn 0.2s ease;
}
@keyframes entLightboxIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ent-lightbox-stage {
  position: relative;
  margin: 0;
  max-width: min(1100px, 94vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ent-lightbox-stage img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.ent-lightbox-cap {
  margin-top: 16px;
  max-width: 720px;
  color: #fff;
  font-size: 15px;
  line-height: var(--ent-lh-tight);
  text-align: center;
}
.ent-lightbox-count {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 11px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.ent-lightbox-close,
.ent-lightbox-nav {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.2s ease, transform 0.2s ease;
}
.ent-lightbox-close:hover,
.ent-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.28);
}
.ent-lightbox-close:focus-visible,
.ent-lightbox-nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.ent-lightbox-close {
  top: 18px;
  right: 20px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 20px;
}
.ent-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-size: 22px;
}
.ent-lightbox-nav:hover {
  transform: translateY(-50%) scale(1.06);
}
.ent-lightbox-prev { left: 20px; }
.ent-lightbox-next { right: 20px; }
@media (max-width: 575px) {
  .ent-lightbox { padding: 12px; }
  .ent-lightbox-nav { width: 44px; height: 44px; font-size: 18px; }
  .ent-lightbox-prev { left: 8px; }
  .ent-lightbox-next { right: 8px; }
  .ent-lightbox-close { top: 12px; right: 12px; }
}

/* ---- Mobile navigation drawer ---- */
/* Clinic logo at the top of the drawer */
.mobile-drawer-logo {
  display: block;
  margin-bottom: 6px;
}
.mobile-drawer-logo img {
  width: 140px;
  height: auto;
}

/* Minimal red chevron for dropdown indicators — drawer (replaces the chunky
   white-on-red box) and desktop nav (was dark). */
.mobile-menu-main nav ul li.has-droupdown::after {
  color: var(--color-primary) !important;
  background: transparent !important;
  padding: 4px !important;
  top: 4px;
  right: 2px;
  font-size: 14px;
  font-weight: 600;
}
.has-dropdown::after,
.has-dropdown.mega-menu > a::after {
  color: var(--color-primary);
  font-weight: 600;
}

/* Drawer social icons (now sit above the Book Appointment button) */
.mobile-menu-main .rts-social-style-one.ent-drawer-social ul li a {
  color: #111032;
  font-size: 17px;
  transition: color 0.3s ease;
}
.mobile-menu-main .rts-social-style-one.ent-drawer-social ul li a:hover {
  color: var(--color-primary);
}
.ent-drawer-book {
  margin-top: 22px;
}

/* ---- Footer: tidy, even columns on mobile (was 2 / 1 / 1 uneven wrap) ---- */
@media (max-width: 767px) {
  .footer-wrapper-style-between {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px 20px;
  }
  .footer-wrapper-style-between .single-wized {
    flex-basis: auto;
  }
}
@media (max-width: 575px) {
  .footer-wrapper-style-between {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* ---- Condition detail: interactive symptom / cause cards ---- */
.ent-condition-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
}
.ent-condition-anatomy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: rgba(237, 1, 1, 0.08);
  color: #ed0101;
  font-size: 32px;
}
.ent-condition-head h2 {
  margin: 0;
}
.ent-condition-lead {
  margin: 6px 0 0;
  font-size: 18px;
  line-height: var(--ent-lh-prose);
  color: #5f5f7a;
}
.ent-condition-subhead {
  font-family: 'Syne', sans-serif;
  margin: 34px 0 0;
}
.ent-symptom-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 18px;
}
@media (max-width: 575px) {
  .ent-symptom-grid {
    grid-template-columns: 1fr;
  }
}
.ent-symptom-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #ece9fb;
  box-shadow: 0 8px 22px rgba(17, 16, 50, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ent-symptom-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(17, 16, 50, 0.09);
  border-color: rgba(237, 1, 1, 0.25);
}
.ent-symptom-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 21px;
}
.ent-symptom-icon img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}
.ent-symptom-grid.symptoms .ent-symptom-icon {
  background: rgba(237, 1, 1, 0.1);
  color: #ed0101;
}
.ent-symptom-grid.causes .ent-symptom-icon {
  background: rgba(17, 16, 50, 0.07);
  color: #111032;
}
.ent-symptom-card p {
  margin: 0;
  color: #111032;
  font-weight: 500;
  font-size: 15.5px;
  line-height: var(--ent-lh-tight);
}
@media (max-width: 575px) {
  .ent-condition-anatomy {
    width: 60px;
    height: 60px;
    font-size: 26px;
  }
  .ent-condition-lead {
    font-size: 16px;
  }
}

/* ---- Gallery sections (Facilities → Operation Theatre, etc.) ---- */
/* ---- Gallery: flat, consistent category cards (collapsible) ---- */
.ent-gallery-cats {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 6px;
}
.ent-gallery-cat {
  border: 1px solid #ece9fb;
  border-radius: 18px;
  background: #fff;
  padding: 0 26px;
  box-shadow: 0 10px 30px rgba(17, 16, 50, 0.04);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.ent-gallery-cat[open] {
  box-shadow: 0 16px 40px rgba(17, 16, 50, 0.07);
  border-color: #e2ddf7;
}
/* summary = clickable collapsible header */
.ent-gallery-cat-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.ent-gallery-cat-head::-webkit-details-marker {
  display: none;
}
.ent-gallery-cat-head:focus-visible {
  outline: 2px solid rgba(237, 1, 1, 0.5);
  outline-offset: 4px;
  border-radius: 8px;
}
.ent-gallery-cat-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(237, 1, 1, 0.08);
  color: #ed0101;
  font-size: 22px;
}
.ent-gallery-cat-titles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ent-gallery-cat-title {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #111032;
  line-height: 1.25;
}
.ent-gallery-cat-desc {
  color: #5f5f7a;
  font-size: 15px;
  line-height: var(--ent-lh-tight);
}
.ent-gallery-cat-meta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.ent-gallery-count {
  font-size: 13px;
  font-weight: 600;
  color: #ed0101;
  background: rgba(237, 1, 1, 0.09);
  padding: 5px 13px;
  border-radius: 20px;
  white-space: nowrap;
}
.ent-gallery-chevron {
  color: #ed0101;
  font-size: 15px;
  transition: transform 0.3s ease;
}
.ent-gallery-cat[open] .ent-gallery-chevron {
  transform: rotate(180deg);
}
.ent-gallery-cat-body {
  padding: 6px 0 22px;
  border-top: 1px solid #f0eefb;
}
.ent-gallery-cat[open] .ent-gallery-cat-body {
  animation: entGalleryReveal 0.35s ease;
}
@keyframes entGalleryReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 575px) {
  .ent-gallery-cat {
    padding: 0 16px;
    border-radius: 14px;
  }
  .ent-gallery-cat-head {
    gap: 13px;
    padding: 16px 0;
  }
  .ent-gallery-cat-icon { width: 46px; height: 46px; font-size: 19px; border-radius: 12px; }
  .ent-gallery-cat-title { font-size: 19px; }
  .ent-gallery-cat-desc { font-size: 14px; }
  /* Keep the count badge from crowding the title on the narrowest screens. */
  .ent-gallery-cat-meta .ent-gallery-count { display: none; }
}

/* ---- FAQ page: category tabs ---- */
.ent-faq-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
}
.ent-home-faq .ent-faq-tablist {
  margin-top: 0;
}
.ent-faq-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 10px 16px;
  border-radius: 40px;
  border: 1px solid #e6e3f5;
  background: #fff;
  color: #111032;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.ent-faq-tab i {
  font-size: 15px;
  color: #ed0101;
}
.ent-faq-tab:hover {
  border-color: rgba(237, 1, 1, 0.4);
  transform: translateY(-2px);
}
.ent-faq-tab.is-active {
  background: #ed0101;
  border-color: #ed0101;
  color: #fff;
}
.ent-faq-tab.is-active i {
  color: #fff;
}
.ent-faq-tab-count {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(17, 16, 50, 0.08);
  color: #5f5f7a;
}
.ent-faq-tab.is-active .ent-faq-tab-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.ent-faq-tab:focus-visible {
  outline: 2px solid rgba(237, 1, 1, 0.5);
  outline-offset: 2px;
}
.ent-faq-tabpanel .accordion {
  margin-top: 8px !important;
  animation: entGalleryReveal 0.3s ease;
}
@media (max-width: 575px) {
  .ent-faq-tab { padding: 9px 15px; font-size: 14px; }
}

/* ==========================================================================
   About-the-doctor DESIGN PREVIEW (/about-doctor-preview)
   Localhost-only route; see the page component for the production guard.
   ========================================================================== */
.ent-preview-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 18px;
  background: #fff8e1;
  border-bottom: 1px solid #f5e3a3;
  color: #6b5a12;
  font-size: 14px;
  text-align: center;
}
.ent-preview-flag i {
  color: #b8912a;
}

.ent-know-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: #ed0101;
  font-size: var(--ent-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ent-know .ent-know-name {
  margin: 0 0 6px;
  font-size: 42px;
  line-height: 1.15;
  color: #111032;
}
.ent-know-role {
  margin: 0 0 22px;
  color: #ed0101;
  font-size: 17px;
  font-weight: 600;
}
.ent-know-bio {
  margin: 0 0 28px;
  max-width: 60ch;
  color: #5f5f7a;
  font-size: 16.5px;
  line-height: var(--ent-lh-prose);
}
.ent-know-creds {
  margin: 0 0 28px;
  padding: 0;
}
.ent-know-cred {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid #f0eff8;
}
.ent-know-cred dt {
  color: #111032;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ent-know-cred dd {
  margin: 0;
  color: #5f5f7a;
  font-size: 15.5px;
  line-height: var(--ent-lh-body);
}
.ent-know-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ed0101;
  font-weight: 700;
  font-size: 16px;
}
.ent-know-more i {
  transition: transform 0.28s ease;
}
.ent-know-more:hover i {
  transform: translateX(5px);
}
.ent-know-portrait {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #f4f4fb;
}
.ent-know-portrait img {
  width: 100%;
  height: auto;
  display: block;
}
.ent-know-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(17, 16, 50, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ent-know-badge strong {
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
}
.ent-know-badge span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

.ent-expertise {
  background: #f7f7fc;
}
.ent-expertise-head {
  margin-bottom: 28px;
}
.ent-expertise-head h2 {
  margin: 0;
  font-size: var(--ent-fs-section-title);
  line-height: 1.25;
  color: #111032;
}
.ent-expertise-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 20px;
  border: 1px solid #ece9fb;
  border-radius: 14px;
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ent-expertise-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(237, 1, 1, 0.3);
  box-shadow: 0 16px 32px rgba(17, 16, 50, 0.09);
}
.ent-expertise-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(237, 1, 1, 0.07);
}
.ent-expertise-icon i {
  font-size: 20px;
  color: #ed0101;
}
.ent-expertise-label {
  flex: 1 1 auto;
  color: #111032;
  font-size: 16px;
  font-weight: 600;
  line-height: var(--ent-lh-tight);
}
.ent-expertise-arrow {
  flex: 0 0 auto;
  font-size: 13px;
  color: #c9c7dd;
  transition: color 0.25s ease, transform 0.25s ease;
}
.ent-expertise-tile:hover .ent-expertise-arrow {
  color: #ed0101;
  transform: translateX(4px);
}

.ent-statband {
  padding: 0 0 90px;
}
.ent-statband-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, #1b1a4a 0%, #111032 60%);
}
.ent-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 34px 18px;
  text-align: center;
}
.ent-stat + .ent-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}
.ent-stat-value {
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
}
.ent-stat-label {
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: var(--ent-lh-body);
}

@media (max-width: 991px) {
  .ent-know .ent-know-name { font-size: 32px; }
  .ent-statband-inner { grid-template-columns: repeat(2, 1fr); }
  .ent-stat:nth-child(3) { border-left: 0; }
  .ent-stat:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.09); }
}
@media (max-width: 575px) {
  .ent-know-cred { grid-template-columns: 1fr; gap: 3px; }
  .ent-statband-inner { grid-template-columns: 1fr; }
  .ent-stat + .ent-stat { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.09); }
}

/* The template's preloader only stops covering the page when its CSS transition
   completes (`.loaded .loader-wrapper { visibility:hidden; transition: all .3s 1s }`).
   Until then it is a full-viewport z-index:1000 overlay that hit-tests above
   everything — which is what made the hero carousel arrows unclickable.
   Clicks should pass through the moment loading is done, regardless of whether
   the fade animation ever runs. Preloader.tsx also unmounts it as a backstop. */
.loaded .loader-wrapper,
.loaded .loader-wrapper .loader-section,
.loaded .loader {
  pointer-events: none;
}

/* ---- /surgeries: alternating procedure features ----
   Replaces the "procedure rail" (five slim 151px rows), which read like search
   results. Five items get five editorial features: photo on one side, content
   on the other, alternating down the page, numbered 01-05. The photos are now
   the clinic's own renders of Dr. Abhinav — at 192px thumbs they were wasted;
   here they carry the page. Numbering and the zigzag run across both groups
   (see page.tsx). */
.ent-feature-list .ent-feature-group {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 34px;
  font-size: var(--ent-fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a8a9c;
}
.ent-feature-list .ent-feature-group::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #ece9fb;
}
.ent-feature-list div + div > .ent-feature-group {
  margin-top: 84px;
}

.ent-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.ent-feature + .ent-feature {
  margin-top: 72px;
}
.ent-feature--flip .ent-feature-media {
  order: 2;
}
/* Mirror the column bias when the media flips sides, or right-hand photos
   render 48px narrower than left-hand ones (the media would land in the 1fr
   track while the body took the 1.08fr). */
.ent-feature--flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
}

.ent-feature-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  background: #f4f4fb;
  box-shadow: 0 24px 48px rgba(17, 16, 50, 0.1);
}
.ent-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.ent-feature:hover .ent-feature-media img {
  transform: scale(1.04);
}
.ent-feature-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #111032 0%, #1b1a4a 100%);
}
.ent-feature-fallback i {
  font-size: 44px;
  color: rgba(255, 255, 255, 0.92);
}
/* Fully INSIDE the photo. The straddling badge on the condition/service cards
   sits at bottom:-18px inside an overflow:hidden box, which clips its lower
   half — a known defect this page deliberately does not inherit. */
.ent-feature-icon {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 20px rgba(17, 16, 50, 0.18);
}
.ent-feature-icon i {
  font-size: 21px;
  color: #ed0101;
}

.ent-feature-body {
  position: relative;
}
/* Oversized index behind the content — an editorial device, not information.
   aria-hidden in the markup; light enough (5% navy) never to fight the text. */
.ent-feature-num {
  position: absolute;
  top: -44px;
  left: -4px;
  font-family: 'Syne', sans-serif;
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
  color: rgba(17, 16, 50, 0.05);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.ent-feature-tag {
  display: inline-block;
  margin-bottom: 12px;
  color: #ed0101;
  font-size: var(--ent-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ent-feature .ent-feature-title {
  margin: 0 0 14px;
  font-size: var(--ent-fs-panel-title);
  line-height: 1.25;
}
.ent-feature-title a {
  color: #111032;
  transition: color 0.25s ease;
}
.ent-feature-title a:hover {
  color: #ed0101;
}
.ent-feature-desc {
  margin: 0 0 18px;
  color: #5f5f7a;
  font-size: 16px;
  line-height: var(--ent-lh-body);
}
.ent-feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.ent-feature-chips li {
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(237, 1, 1, 0.05);
  border: 1px solid rgba(237, 1, 1, 0.16);
  color: #111032;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.ent-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: 40px;
  border: 1px solid rgba(237, 1, 1, 0.28);
  background: rgba(237, 1, 1, 0.05);
  color: #ed0101;
  font-weight: 600;
  font-size: var(--ent-fs-cta);
  transition: background 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}
.ent-feature-cta i {
  font-size: 13px;
  transition: transform 0.28s ease;
}
.ent-feature-cta:hover {
  background: #ed0101;
  border-color: #ed0101;
  color: #fff;
}
.ent-feature-cta:hover i {
  transform: translateX(3px);
}

@media (max-width: 991px) {
  .ent-feature {
    gap: 34px;
  }
  .ent-feature .ent-feature-title {
    font-size: 23px;
  }
  .ent-feature-num {
    font-size: 72px;
    top: -30px;
  }
}
@media (max-width: 767px) {
  .ent-feature {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* the photo always leads when stacked — the zigzag is a two-column idea */
  .ent-feature--flip .ent-feature-media {
    order: 0;
  }
  .ent-feature + .ent-feature {
    margin-top: 52px;
  }
  .ent-feature-media {
    aspect-ratio: 16 / 9;
    border-radius: 16px;
  }
  .ent-feature-num {
    font-size: 60px;
    top: -18px;
    left: -2px;
  }
  .ent-feature-list div + div > .ent-feature-group {
    margin-top: 60px;
  }
}


/* ---- Homepage About: stat counters ----
   Edited from the CMS (Homepage global → Stats); same array the Treatments page
   renders, so the two can't drift apart. Sits in the gap between the paragraph
   and the CTA row. */
.ent-about-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}
.ent-about-stats li {
  flex: 1 1 180px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 1px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid #ece9fb;
  border-left: 3px solid #ed0101;
  border-radius: 12px;
  background: #fbfbfe;
}
/* Icon spans both text rows on the left; value and label stack on the right. */
.ent-about-stat-icon {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(237, 1, 1, 0.08);
  color: #ed0101;
  font-size: 19px;
}
.ent-about-stat-value {
  align-self: end;
  font-family: 'Syne', sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: #111032;
  font-variant-numeric: tabular-nums;
}
.ent-about-stat-label {
  align-self: start;
  font-size: 14.5px;
  line-height: var(--ent-lh-tight);
  color: #5f5f7a;
}
@media (max-width: 575px) {
  .ent-about-stats { gap: 12px; margin: 22px 0; }
  .ent-about-stats li { padding: 14px 16px; }
  .ent-about-stat-value { font-size: 26px; }
}

/* ---- Mobile gutters ----
   style.css's `.ptb--40 { padding: 40px 0 }` is a SHORTHAND, so it silently
   zeroes the horizontal padding Bootstrap's .container supplies. The Breadcrumb
   uses `container ptb--40`, so its title had no side gutter at all — invisible
   on desktop (the container is centred inside a max-width) but on mobile the
   container is full-bleed and the title sat flush against both screen edges.
   Two classes here (0,2,0) beat .ptb--40 (0,1,0). */
.ent-breadcrumb-inner {
  /* Replaces the template's `.ptb--40` (padding: 40px 0 !important) on the
     breadcrumb: same vertical rhythm, but the !important's horizontal 0 made
     the side gutter unrestorable by any normal rule. */
  padding-top: 40px;
  padding-bottom: 40px;
}

@media (max-width: 767px) {
  /* Bootstrap's default gutter computes to 7.5px a side here, which reads as
     text stuck to the edge on a phone. The row/col negative-margin maths still
     works out: container 20px − row −7.5px + col 7.5px = text at 20px. */
  .container,
  .container-fluid,
  .container-full-header {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Long service titles ("Vertigo & Balance Evaluation (VNG)") filled the whole
     screen at the template's 34px. The banner was taking 334px of an 844px
     phone — 40% of the viewport before any content — so the trail and the
     vertical padding come down with it. */
  .breadcrumb-area-wrapper h1.title {
    font-size: 28px;
  }
  .nav-bread-crumb a,
  .nav-bread-crumb .current {
    font-size: 13.5px;
  }
  .nav-bread-crumb i {
    font-size: 10px;
  }
  .ent-breadcrumb-inner {
    padding-top: 26px;
    padding-bottom: 26px;
  }
  .rts-breadcrumb-area.rts-section-gap {
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media (max-width: 575px) {
  .breadcrumb-area-wrapper h1.title {
    font-size: 23px;
  }
}
@media (max-width: 479px) {
  .breadcrumb-area-wrapper h1.title {
    font-size: 21px;
  }
  .nav-bread-crumb a,
  .nav-bread-crumb .current {
    font-size: 12.5px;
  }
}

/* ---- Recent Posts sidebar (blog detail) ----
   Was: an 85x48 thumbnail with the date above a title that wrapped to 2-3
   lines, so rows ran 84-108px and the list looked ragged. Now the title leads
   (it is what a reader scans for), the meta sits under it, and the title is
   clamped to two lines so every row is identical height. */
.ent-recent {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ent-recent li + li {
  border-top: 1px solid #f2f1f9;
}
.ent-recent-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  color: inherit;
}
.ent-recent-thumb {
  width: 96px;
  /* 3:2 off the 16:9 sources trims ~8% a side — faces sit well inside that.
     A square crop would cut 44% and behead the two-person shots. */
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  overflow: hidden;
  background: #f4f4fb;
}
.ent-recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.ent-recent-item:hover .ent-recent-thumb img {
  transform: scale(1.06);
}
.ent-recent-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ent-recent-title {
  color: #111032;
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.25s ease;
}
.ent-recent-item:hover .ent-recent-title {
  color: #ed0101;
}
.ent-recent-meta {
  color: #74748a;
  font-size: 12.5px;
  line-height: var(--ent-lh-tight);
}

/* ---- Contact page ----
   Was three identical grey info cards then a map + form. Now the call is the
   hero action (it is the fastest route to an appointment), address and timings
   support it, the form gets the wider column, and the map drops to the bottom
   as orientation rather than the headline. */
.ent-contact-rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ent-contact-call {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 16px;
  background: linear-gradient(160deg, #1b1a4a 0%, #111032 60%);
  box-shadow: 0 18px 40px rgba(17, 16, 50, 0.16);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ent-contact-call:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(17, 16, 50, 0.22);
}
.ent-contact-call-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ed0101;
  box-shadow: 0 8px 20px rgba(237, 1, 1, 0.4);
}
.ent-contact-call-icon i {
  font-size: 19px;
  color: #fff;
}
.ent-contact-call-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ent-contact-call .ent-contact-label {
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ent-contact-call .ent-contact-number {
  color: #fff;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.ent-contact-call .ent-contact-note {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
  line-height: var(--ent-lh-tight);
}

.ent-contact-card {
  padding: 22px 24px;
  border: 1px solid #ece9fb;
  border-radius: 14px;
  background: #fff;
}
.ent-contact-card-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}
.ent-contact-card-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(237, 1, 1, 0.08);
}
.ent-contact-card-icon i {
  font-size: 14px;
  color: #ed0101;
}
.ent-contact-card .ent-contact-card-title {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  color: #111032;
}
.ent-contact-address {
  margin: 0 0 14px;
  color: #5f5f7a;
  font-size: 15.5px;
  font-style: normal;
  line-height: var(--ent-lh-body);
}
.ent-contact-maplink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #ed0101;
  font-size: 15px;
  font-weight: 700;
}
.ent-contact-maplink i {
  font-size: 13px;
  transition: transform 0.28s ease;
}
.ent-contact-maplink:hover i {
  transform: translateX(4px);
}

.ent-contact-form {
  padding: 30px 30px 34px;
  border: 1px solid #ece9fb;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(17, 16, 50, 0.05);
}
.ent-contact-form .ent-contact-form-title {
  margin: 0 0 6px;
  font-size: var(--ent-fs-panel-title);
  line-height: 1.25;
  color: #111032;
}
.ent-contact-form-sub {
  margin: 0 0 22px;
  color: #5f5f7a;
  font-size: 15.5px;
  line-height: var(--ent-lh-body);
}

.ent-contact-map-section {
  padding: 0 0 90px;
}
.ent-contact-map {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #ece9fb;
  line-height: 0;
}
.ent-contact-map iframe {
  width: 100%;
  height: 380px;
  display: block;
}

@media (max-width: 767px) {
  .ent-contact-call { padding: 18px; gap: 13px; }
  .ent-contact-call .ent-contact-number { font-size: 20px; }
  .ent-contact-form { padding: 22px 18px 26px; }
  .ent-contact-form .ent-contact-form-title { font-size: 22px; }
  .ent-contact-map iframe { height: 280px; }
  .ent-contact-map-section { padding-bottom: 60px; }
}

/* ---- Check grid (Common Symptoms, How We Help, Conditions treated) ----
   Replaces the two-fixed-column `.check-area-wrapper`, which rendered items
   ~231px wide inside a 924px block — a third of the width wasted — and split an
   odd count unevenly (5 items became a lopsided 3 + 2). auto-fit lets the
   column count follow the space, so rows always fill and items stay uniform. */
.ent-checkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ent-checkgrid li {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid #ece9fb;
  border-radius: 10px;
  background: #fbfbfe;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.ent-checkgrid li:hover {
  border-color: rgba(237, 1, 1, 0.25);
  background: #fff;
}
.ent-checkgrid i {
  flex: 0 0 auto;
  font-size: 15px;
  color: #ed0101;
}
.ent-checkgrid span {
  min-width: 0;
  color: #111032;
  font-size: 15px;
  font-weight: 500;
  line-height: var(--ent-lh-tight);
}
@media (max-width: 575px) {
  .ent-checkgrid { grid-template-columns: 1fr; gap: 10px; }
  .ent-checkgrid li { padding: 11px 13px; }
  .ent-checkgrid span { font-size: 14.5px; }
}

/* Still-image hero slides (vertigo, pediatric, book) — the ent/sinus slides use
   video. Same treatment as .ent-hero-video: fill the slide, sit under the scrim,
   and take no pointer events so the arrows stay clickable. */
.ent-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  pointer-events: none;
}
/* The decorative rings/gradients are for the plain themed slides; with a photo
   behind the text they just muddy it. */
.ent-hero-bg--image::before,
.ent-hero-bg--image::after {
  display: none;
}
/* Per-slide focal point. The 'book' slide photo (ent-examination.jpg, 1600x1067)
   sits in a much wider hero, so `object-position: center` crops 92px off the
   top — exactly where Dr. Abhinav's head is, cutting his face. Bias the crop
   upward so his face stays whole; the doctor is on the right, so pull right too
   (the text/scrim covers the left the crop sacrifices). */
.ent-hero-bg--book .ent-hero-img {
  object-position: 72% 8%;
}

/* ---- /services photo mosaic ----
   Every tile IS its photograph: image fills the card, a navy gradient carries
   the text. Six-column grid; spans come from the page (2 large + 3 medium +
   2 large for seven tiles), so no row ever strands an orphan. */
.ent-svc-mosaic {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}
.ent-svc-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: #111032;
  box-shadow: 0 14px 34px rgba(17, 16, 50, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ent-svc-tile--s3 {
  grid-column: span 3;
  aspect-ratio: 16 / 9;
}
.ent-svc-tile--s2 {
  grid-column: span 2;
  aspect-ratio: 4 / 3.2;
}
.ent-svc-tile--s6 {
  grid-column: span 6;
  aspect-ratio: 21 / 9;
}
.ent-svc-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 52px rgba(17, 16, 50, 0.16);
}
.ent-svc-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.ent-svc-tile:hover img {
  transform: scale(1.05);
}
/* The gradient is the text's contrast layer — deep navy at the base where the
   title sits, clear above so the photo reads. */
.ent-svc-tile-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 16, 50, 0.05) 30%, rgba(17, 16, 50, 0.62) 68%, rgba(17, 16, 50, 0.92) 100%);
  transition: background 0.3s ease;
}
.ent-svc-tile-content {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 24px;
}
.ent-svc-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 20px rgba(17, 16, 50, 0.18);
}
.ent-svc-tile-icon i {
  font-size: 17px;
  color: #ed0101;
}
.ent-svc-tile .ent-svc-tile-title {
  margin: 0 0 6px;
  font-size: 23px;
  line-height: 1.25;
  color: #fff;
}
.ent-svc-tile--s2 .ent-svc-tile-title {
  font-size: 19px;
}
.ent-svc-tile-desc {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--ent-fs-card-desc);
  line-height: var(--ent-lh-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ent-svc-tile-go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.ent-svc-tile-go i {
  font-size: 12px;
  transition: transform 0.28s ease;
}
.ent-svc-tile:hover .ent-svc-tile-go i {
  transform: translateX(4px);
}

@media (max-width: 991px) {
  /* two-up: every tile spans half the grid; the full-width closer stays full */
  .ent-svc-tile--s3,
  .ent-svc-tile--s2 {
    grid-column: span 3;
    aspect-ratio: 16 / 10;
  }
}

/* Stat band — same numbers as the homepage About section (CMS: Homepage → Stats). */
.ent-svc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  margin: 60px 0 0;
  padding: 0;
  list-style: none;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, #1b1a4a 0%, #111032 60%);
}
.ent-svc-stats li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 32px 18px;
  text-align: center;
}
.ent-svc-stats li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}
.ent-svc-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: rgba(237, 1, 1, 0.16);
  color: #ff5a5a;
  font-size: 22px;
}
.ent-svc-stat-value {
  font-family: 'Syne', sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  /* fixed width so the counting digits don't shift the layout each frame */
  font-variant-numeric: tabular-nums;
}
.ent-svc-stat-label {
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: var(--ent-lh-tight);
}

@media (max-width: 575px) {
  .ent-svc-mosaic { gap: 14px; }
  .ent-svc-tile--s3, .ent-svc-tile--s2, .ent-svc-tile--s6 { grid-column: span 6; aspect-ratio: 16 / 10; }
  .ent-svc-stats { grid-template-columns: 1fr; }
  .ent-svc-stats li + li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.09); }
  .ent-svc-stats li { padding: 24px 18px; }
}

/* ---- Persistent call access on small screens ----
   UX audit finding #1 (highest expected harm). Below 1200px the top bar with
   the phone number is hidden; below 575px `header .rts-btn { display:none
   !important }` hides the Appointment button too — leaving a logo and a
   hamburger. Measured on /conditions/tinnitus at 390px: the first VISIBLE tel:
   link was 2940px down, 67% of the page. Calling is this clinic's fastest
   route in; it gets a permanent button exactly where the others vanish. */
.ent-header-call {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ed0101;
  color: #fff;
  flex: 0 0 auto;
  transition: background 0.25s ease, transform 0.25s ease;
}
.ent-header-call i {
  font-size: 16px;
  color: #fff;
}
.ent-header-call:hover {
  background: #b80101;
  transform: translateY(-2px);
}
@media (max-width: 1200px) {
  .ent-header-call {
    display: inline-flex;
  }
}

/* ---- Mobile drawer: call + hours ---- */
.ent-drawer-contact {
  margin: 28px 20px 0;
}
/* Sized against the tightest real case. The drawer is a fixed 310px with 30px
   of its own padding, and this block keeps the same 20px margin the nav links
   and Book button use — so the row is 210px, and after the icon + gap + padding
   the number gets 125px. "+91 63021 34527" at 18px needs 153px, so it was
   clipped by 28px. The chrome shrinks rather than the alignment breaking. */
.ent-drawer-call {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 10px;
  border-radius: 14px;
  background: linear-gradient(160deg, #1b1a4a 0%, #111032 60%);
}
.ent-drawer-call-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ed0101;
}
.ent-drawer-call-icon i {
  font-size: 13px;
  color: #fff;
}
.ent-drawer-call-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ent-drawer-call .ent-drawer-call-label {
  color: rgba(255, 255, 255, 0.66);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.ent-drawer-call .ent-drawer-call-number {
  color: #fff;
  /* 16px: a phone number must not wrap mid-digits, so it has to fit the row
     outright rather than rely on ellipsis. */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.ent-drawer-hours {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 2px 0;
  color: #5f5f7a;
  font-size: 12.5px;
  line-height: var(--ent-lh-tight);
}
.ent-drawer-hours i {
  margin-top: 2px;
  font-size: 11px;
  color: #ed0101;
}

/* ---- Stop Bootstrap row margins escaping their section ----
   Bootstrap's `.row` carries `margin-top: calc(var(--bs-gutter-y) * -1)` to
   cancel the columns' gutter padding. That negative margin COLLAPSES OUT
   through any ancestor with no padding-top and no border-top — and
   `rts-section-gapBottom` gives a section padding-bottom only. Measured on the
   homepage at 360px: `.row.g-5` (margin-top: -30px) inside `.service-area` >
   `.container`, both with padding-top: 0, pulled the whole Treatments section
   30px UP into the About section above it. Every other section pair on the page
   sat at exactly 0; this one read -30 by both getBoundingClientRect AND
   offsetTop, so it was layout, not an animation artifact.
   flow-root establishes a block formatting context, which stops the collapse at
   the section boundary without changing the section's own box. */
.rts-about-area,
.service-area,
.rts-blog-area,
.rts-testimonials-area,
.ent-surgeries-area,
.ent-values-area,
.rts-faq-area,
.why-choose-us-area,
.short-service-area {
  display: flow-root;
}

/* `.about-image-left-wrapper { margin-right: -30px }` (style.css:15084) is a
   desktop device: it lets the photo bleed toward the adjacent text column. Once
   the columns stack, there is no adjacent column to bleed into — the wrapper
   just overhangs the screen, taking the `right: 0` review badge with it.
   Measured at 360px: wrapper right edge 370 (10px past the viewport), 23px past
   its own column, so "4.4 star Rating | 86 patient ratings" was clipped. */
@media (max-width: 991px) {
  .about-image-left-wrapper {
    margin-right: 0;
  }
}

/* ---- Blog author card avatar ----
   style.css:16843-16848 puts `min-width: max-content` on both the thumbnail and
   its img. Per CSS 2.1 §10.4 the used width is clamped by max-width FIRST and
   then by min-width, so this defeats the sheet's own `img { max-width: 100% }`
   no matter the specificity or source order — the avatar renders at its full
   400x402 intrinsic size. Measured on /blog/[slug] at 360px: the image ran
   36->436, i.e. 76px past the viewport and 112px past its own 288px column, on
   every post. This is an author bio card; the avatar was never meant to be
   400px. */
.blog-author-area-main .thumbnail,
.blog-author-area-main .thumbnail img {
  min-width: 0;
}
.blog-author-area-main .thumbnail {
  flex: 0 0 auto;
}
.blog-author-area-main .thumbnail img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ---- Section titles: don't fuse the words when the <br> is hidden ----
   style.css:15151 hides `.title-wrapper-left .title br` below 768px so a long
   heading reflows to the screen instead of keeping its desktop line breaks.
   That is fine for the template's own markup, which has whitespace around the
   <br>. Ours renders the heading as an array of lines — <span>line<br/></span>
   — with no whitespace between the spans, so once the <br> goes the words fuse.
   Measured on the homepage at 360px:
     "Expert ENT Care byDr. G AbhinavKumar Reddy"
     "we provide a widerange of ENTtreatments"
   Put back the separator the <br> was supplying. A normal space (not nbsp) so
   the heading can still wrap at that point. */
@media (max-width: 767px) {
  .title-wrapper-left .title span + span::before {
    content: ' ';
    white-space: pre;
  }
}

/* ---- Overlay stacking ----
   The back-to-top ring ships at z-index:10000 (style.css:14270) with
   position:fixed, which puts it above every overlay on the site: the drawer
   (1900), the appointment modal (1500) and the gallery lightbox (9999). On a
   phone it sits in the bottom-right corner where a near-full-width modal also
   lives, so it floats over the dialog the patient is trying to use. It belongs
   above page content and below anything modal. */
.progress-wrap {
  z-index: 900;
}

/* The drawer's close button is positioned by two negative margins
   (style.css:12465/12473) that land it 3px left of the panel's padding box.
   Normally that would just overhang, but `.side-bar` ends up with
   `overflow-x: auto` — the `overflow: visible` shorthand at style.css:12421
   plus `overflow-y: auto` on `.side-bar.show` resolves per the CSS Overflow
   spec to overflow-x:auto — so the strip is clipped instead. Nudge it inside
   its own box rather than relocating the control. */
/* Minimal drawer close button. The vendor rule `.side-bar button i` painted a
   50x50 solid-red box with a white X and a -53px margin hack, and positioned
   the button OUTSIDE the drawer (it rendered at x:57 while the panel starts at
   x:80 — the awkward placement in the owner's screenshot). This resets it to a
   clean X pinned to the drawer's own top-right corner.

   Sizing is via PADDING, not width/height: the button is absolutely positioned
   with vendor offsets that constrain `width` (an explicit 44px still computed to
   15px), whereas padding always expands the box. */
#side-bar .close-icon-menu {
  position: absolute;
  top: 14px;
  right: 16px;
  left: auto;
  bottom: auto;
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 13px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  line-height: 1;
  transition: background 0.2s ease;
}
#side-bar .close-icon-menu:hover {
  background: rgba(17, 16, 50, 0.06);
}
#side-bar .close-icon-menu i {
  width: auto;
  height: auto;
  margin: 0;
  background: transparent;
  border-radius: 0;
  color: #111032;
  font-size: 24px;
  line-height: 1;
  transition: color 0.2s ease;
}
#side-bar .close-icon-menu:hover i {
  color: #ed0101;
}

/* ---- OPD examination call-out (homepage) — see HomeExamination.tsx ----
   Otoscopy / nasal endoscopy / laryngoscopy: the clinic's differentiator, which
   was rendering on exactly one page buried under a "Surgeries" menu. Reads from
   procedures.ts so it can never drift from the full page. */
.ent-exam-callout {
  background: #f7f7fc;
}
.ent-exam-callout-head {
  max-width: 760px;
  margin: 0 0 34px;
}
.ent-exam-callout-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: #ed0101;
  font-size: var(--ent-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ent-exam-callout .ent-exam-callout-title {
  margin: 0 0 12px;
  font-size: var(--ent-fs-section-title);
  line-height: 1.25;
  color: #111032;
}
.ent-exam-callout-intro {
  margin: 0;
  color: #5f5f7a;
  font-size: 16.5px;
  line-height: var(--ent-lh-prose);
}
.ent-exam-callout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ent-exam-callout-grid li {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ece9fb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(17, 16, 50, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ent-exam-callout-grid li:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(17, 16, 50, 0.09);
}
.ent-exam-callout-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f4f4fb;
}
.ent-exam-callout-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.ent-exam-callout-grid li:hover .ent-exam-callout-media img {
  transform: scale(1.05);
}
/* On the photo, fully inside it — same rule as /surgeries: never the straddling
   badge that clips itself against overflow:hidden. */
.ent-exam-callout-icon {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 20px rgba(17, 16, 50, 0.18);
}
.ent-exam-callout-icon i {
  font-size: 19px;
  color: #ed0101;
}
/* Fallback when an exam has no photograph: the old inline icon tile. */
.ent-exam-callout-icon--solo {
  position: static;
  margin: 26px 0 0 22px;
  background: rgba(237, 1, 1, 0.07);
  box-shadow: none;
}
.ent-exam-callout-body {
  display: flex;
  flex-direction: column;
  padding: 20px 22px 24px;
}
.ent-exam-callout-area {
  color: #74748a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ent-exam-callout .ent-exam-callout-name {
  margin: 4px 0 10px;
  font-size: 20px;
  line-height: 1.3;
  color: #111032;
}
.ent-exam-callout-desc {
  margin: 0;
  color: #5f5f7a;
  font-size: var(--ent-fs-card-desc);
  line-height: var(--ent-lh-body);
}
/* Note + CTA share one row: the disclaimer stretches, the button sits beside
   it as the next step. Stacks on phones. */
.ent-exam-callout-foot {
  display: flex;
  /* center, not stretch: the button keeps its natural pill height beside a
     note that may wrap taller. Stretching it to 79px is what made it a rogue
     variant no other button on the site matches. */
  align-items: center;
  gap: 16px;
  margin-top: 26px;
}
.ent-exam-callout-note {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 15px 20px;
  border-radius: 12px;
  border: 1px solid #ece9fb;
  background: #fff;
  color: #5f5f7a;
  font-size: 14.5px;
  line-height: var(--ent-lh-body);
}
.ent-exam-callout-note i {
  flex: 0 0 auto;
  font-size: 14px;
  color: #ed0101;
}
/* The site's primary button IS the fully-rounded pill (.rts-btn.btn-primary:
   radius 100px, 16px label). This matches it exactly rather than inventing a
   fourth button style. */
.ent-exam-callout-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 100px;
  background: #ed0101;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.25s ease, transform 0.25s ease;
}
.ent-exam-callout-cta:hover {
  background: #b80101;
  color: #fff;
  transform: translateY(-2px);
}
.ent-exam-callout-cta i {
  font-size: 13px;
  transition: transform 0.28s ease;
}
.ent-exam-callout-cta:hover i {
  transform: translateX(4px);
}
@media (max-width: 767px) {
  /* font-size removed — the section-title token now owns every section heading's
     responsive sizing, so hard-coding 25px here just reintroduced the drift. */
  .ent-exam-callout-grid { grid-template-columns: 1fr; gap: 16px; }
  .ent-exam-callout-media { aspect-ratio: 16 / 9; }
  .ent-exam-callout-body { padding: 18px 18px 22px; }
  .ent-exam-callout-foot { flex-direction: column; }
  .ent-exam-callout-cta { justify-content: center; white-space: normal; text-align: center; }
}

/* ---- Breathing room above "Our Treatments" (homepage) ----
   `.service-area` is `rts-section-gapBottom` — 120px bottom, ZERO top — so its
   content ("Our Treatments") sat flush against its own top edge and relied
   entirely on whatever section came before it to supply the gap. That is fine
   until the preceding section has its own background: the colour change then
   lands exactly on the heading. Give the section its own top padding so it does
   not depend on its neighbour.
   Note the maths: Bootstrap's `.row.g-5` inside carries `margin-top: -30px` and
   its columns add 30px back, so the visible content lands at exactly this
   padding value. Only HomeServices.tsx renders this class — /services was
   rewritten and no longer uses it. */
.service-area {
  padding-top: 70px;
}


/* ============================================================================
   DESIGN QA POLISH (conservative pass) — a11y + cross-browser only.
   All rules below are keyboard/reduced-motion/disabled-state scoped, so the
   default mouse/desktop render is unchanged.
   ============================================================================ */

/* Global keyboard-focus ring. The vendor stylesheet strips `outline` from every
   <a> and button/input focus; brand's :focus-visible rings above only cover
   bespoke ent-* components, leaving ordinary links, nav links, breadcrumbs, the
   red-pill CTA (an anchor) and form submit buttons with NO visible keyboard
   focus (WCAG 2.4.7). Reuse the surgery-card ring so no new variant appears.
   :focus-visible fires only on keyboard focus, so mouse/touch/default is
   untouched; the outline is drawn outside the box (no reflow) and follows each
   element's border-radius. Bespoke .ent-*:focus-visible rings above have higher
   specificity and continue to win. */
a:focus-visible,
button:focus-visible,
[type="button"]:focus-visible,
[type="submit"]:focus-visible,
[type="reset"]:focus-visible,
.nice-select:focus-visible {
  outline: 2px solid #ed0101;
  outline-offset: 3px;
}

/* Disabled primary button (forms during submit). The vendor only sets
   cursor:default, so a submitting button keeps its full-red fill and still
   flips to navy on hover — no inert cue. :disabled matches only actual disabled
   controls (the three submit buttons mid-submit), so the enabled/resting design
   is unchanged. */
.rts-btn.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.rts-btn.btn-primary:disabled:hover {
  background: var(--color-primary);
}

/* Reduced-motion guards for the two animations that lacked one (the rest of the
   file's animations are already guarded). No effect for default-motion users. */
@media (prefers-reduced-motion: reduce) {
  .ent-gallery-cat[open] .ent-gallery-cat-body,
  .ent-faq-tabpanel .accordion,
  .ent-lightbox {
    animation: none;
  }
}