/* ==================================================================
   PRATHEEP NURSING HOME - Design System
   Hospital blue + white, gold reserved for doctor recognition.
   ================================================================== */

:root {
  /* ------------------------------------------------------------------
     Palette
     Three families, each with a job, so the mix reads as a system:
       blue  - the brand. Header, primary CTAs, links, tech/surgery.
       green - care and reassurance. Ticks, wellness, paediatric, support.
       sky   - light surfaces, tints and gradient lift.
     Gold stays reserved for the Gold Medalist recognition.
     ------------------------------------------------------------------ */

  /* Hospital blue - primary */
  --c-blue:        #0066B3;
  --c-blue-2:      #0A82D8;
  --c-navy:        #00395F;
  --c-navy-deep:   #002A47;

  /* Medical green - care, wellness, confirmation */
  --c-green:       #0E9F6E;
  --c-green-2:     #14B87F;
  --c-green-deep:  #0A7A54;

  /* Sky - light accent */
  --c-sky:         #38BDF8;
  --c-sky-2:       #0EA5E9;

  /* Surfaces */
  --c-white:       #FFFFFF;
  --c-blue-light:  #E9F4FF;
  --c-blue-faint:  #F4FAFF;
  --c-sky-light:   #E6F6FE;
  --c-mint:        #E7F8F1;
  --c-mint-faint:  #F3FBF8;

  /* Ink */
  --c-text:        #16324A;
  --c-muted:       #5D7A92;
  --c-border:      #DCEAF6;
  --c-border-green:#CCEDE0;

  /* Gold - doctor recognition only */
  --c-gold:        #D4AF37;
  --c-gold-soft:   #F6EBC6;

  /* Gradients */
  --g-brand:  linear-gradient(135deg, var(--c-blue) 0%, var(--c-sky-2) 100%);
  --g-green:  linear-gradient(135deg, var(--c-green-deep) 0%, var(--c-green-2) 100%);
  --g-sky:    linear-gradient(135deg, var(--c-sky-2) 0%, var(--c-sky) 100%);
  --g-navy:   linear-gradient(135deg, var(--c-navy-deep) 0%, var(--c-navy) 50%, #0A5C7A 100%);
  --g-deep:   linear-gradient(135deg, var(--c-navy-deep) 0%, #00477C 55%, #0A6FB8 100%);
  --g-gold:   linear-gradient(135deg, #B8912B 0%, var(--c-gold) 45%, #F0DC92 100%);
  --g-mixed:  linear-gradient(90deg, var(--c-blue), var(--c-sky-2), var(--c-green-2));

  /* Elevation */
  --sh-sm: 0 2px 8px rgba(0, 57, 95, .06);
  --sh-md: 0 8px 24px rgba(0, 57, 95, .09);
  --sh-lg: 0 18px 48px rgba(0, 57, 95, .14);
  --sh-brand: 0 12px 32px rgba(0, 102, 179, .26);
  --sh-green: 0 12px 32px rgba(14, 159, 110, .26);

  /* 8px spacing scale */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 40px; --s-6: 48px; --s-8: 64px; --s-10: 80px; --s-12: 96px;

  --radius:    14px;
  --radius-lg: 22px;
  --ease:      cubic-bezier(.4, 0, .2, 1);

  --ff-head: 'Poppins', system-ui, sans-serif;
  --ff-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font-family: var(--ff-body);
  color: var(--c-text);
  background: var(--c-white);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-head);
  color: var(--c-navy);
  font-weight: 600;
  line-height: 1.25;
}

h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }

p { color: var(--c-text); }
a { color: var(--c-blue); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--c-navy); }
img { max-width: 100%; height: auto; }

::selection { background: var(--c-blue); color: #fff; }

/* Accessibility */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--c-navy); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

a:focus-visible, button:focus-visible,
.form-control:focus-visible, .form-select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--c-blue-2);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Layout helpers ---------- */
.section        { padding: var(--s-12) 0; }
.section--tight { padding: var(--s-8) 0; }
.bg-faint { background: var(--c-blue-faint); }
.bg-light-blue { background: var(--c-blue-light); }
.bg-navy  { background: var(--g-navy); color: #fff; }
.bg-navy h1, .bg-navy h2, .bg-navy h3 { color: #fff; }
.bg-navy p { color: rgba(255, 255, 255, .82); }

.sec-head { max-width: 760px; margin: 0 auto var(--s-6); text-align: center; }
.sec-head.text-start { margin-left: 0; text-align: left; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-head); font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-blue); background: var(--c-blue-light);
  padding: 7px 16px; border-radius: 999px; margin-bottom: var(--s-2);
}
.bg-navy .eyebrow { color: #9FD4FF; background: rgba(255, 255, 255, .1); }

.sec-head p { color: var(--c-muted); font-size: 1.05rem; margin-bottom: 0; }
.bg-navy .sec-head p { color: rgba(255, 255, 255, .78); }

.lead-text { font-size: 1.08rem; color: var(--c-muted); }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--ff-head); font-weight: 600; font-size: .95rem;
  padding: 13px 28px; border-radius: 999px; border: 2px solid transparent;
  transition: all .3s var(--ease); position: relative; overflow: hidden;
}
.btn-brand {
  background: var(--g-brand); color: #fff; box-shadow: var(--sh-brand);
}
.btn-brand:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 102, 179, .38); }

.btn-outline-brand { border-color: var(--c-blue); color: var(--c-blue); background: transparent; }
.btn-outline-brand:hover { background: var(--c-blue); color: #fff; transform: translateY(-3px); }

.btn-white { background: #fff; color: var(--c-navy); }
.btn-white:hover { color: var(--c-blue); transform: translateY(-3px); box-shadow: var(--sh-lg); }

.btn-outline-white { border-color: rgba(255, 255, 255, .6); color: #fff; }
.btn-outline-white:hover { background: #fff; color: var(--c-navy); }

.btn-whatsapp { background: #25D366; color: #fff; }
.btn-whatsapp:hover { background: #1EBE5A; color: #fff; transform: translateY(-3px); }

.btn-gold { background: var(--g-gold); color: #3A2E08; }
.btn-gold:hover { color: #3A2E08; transform: translateY(-3px); box-shadow: 0 14px 32px rgba(212, 175, 55, .4); }

/* Ripple */
.btn-ripple .ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255, 255, 255, .5); animation: ripple .6s linear; pointer-events: none;
}
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--c-navy-deep); color: #fff;
  font-size: .85rem; padding: 9px 0;
}
.topbar__addr { color: #fff; }
.topbar__addr i { color: var(--c-blue-2); margin-right: 6px; }
.topbar__right { display: flex; align-items: center; gap: var(--s-3); }
.topbar__right a { color: #fff; display: inline-flex; align-items: center; gap: 7px; }
.topbar__right a:hover { color: #9FD4FF; }

/* ---------- Header / Nav ---------- */
.site-header {
  background: #fff; position: sticky; top: 0; z-index: 1030;
  box-shadow: 0 1px 0 var(--c-border);
  transition: box-shadow .3s var(--ease), padding .3s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--sh-md); }
.navbar { padding: 14px 0; transition: padding .3s var(--ease); }
.site-header.is-stuck .navbar { padding: 8px 0; }

/* Brand lockup: the PSR mark, with the hospital name set in type beside it
   so it stays sharp at any size and can be read by search engines. */
/* Brand lockup: the PSR mark, with the hospital name set in type beside it
   so it stays sharp at any size and can be read by search engines.

   LAYOUT CONTRACT (read before adding a nav item):
   The header is one nowrap row - brand on the left, nav on the right. Neither
   is allowed to push the other, so both carry min-width:0 and are permitted to
   shrink. The mark is a very wide lockup (5.7:1) and eats horizontal space
   fast, so mark height, brand type and nav padding all step down together.

   Bootstrap's container tops out at 1320px, so the widest case the desktop nav
   ever has to survive is 1320px, not the viewport width. The nav does not fit
   below 1200px at a legible size, which is why the menu collapses to the
   offcanvas at xl rather than lg.

   MEASURED BUDGET (Chrome, this stylesheet):
     container 1320  =  brand 356 + nav 916   ->  48px spare
     container 1140  =  brand 246 + nav 858   ->  36px spare
   Adding a top-level item costs roughly 110-160px and WILL overflow. If one is
   needed, drop another, or shorten a label - do not just add it. */
.navbar > .container { flex-wrap: nowrap; }

.navbar-brand {
  display: flex; align-items: center; gap: 12px; padding: 0;
  margin-right: var(--s-2);
  /* flex-shrink 0 on purpose. The brand text is nowrap, so if the box is
     allowed to shrink the text simply spills out of it and lands under the
     menu - which looks like an overlap and, worse, measures as "fits".
     Refusing to shrink makes any real shortage show up honestly as the nav
     overflowing to the right, where it is obvious and gets fixed. */
  flex: 0 0 auto;
}
.brand__mark {
  height: 40px; width: auto; object-fit: contain; flex: 0 0 auto;
  transition: height .3s var(--ease);
}
.site-header.is-stuck .brand__mark { height: 33px; }

.brand__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand__name {
  font-family: var(--ff-head); font-weight: 700;
  font-size: 1rem; color: var(--c-navy); letter-spacing: -.2px; white-space: nowrap;
}
.brand__sub {
  font-family: var(--ff-head); font-weight: 500;
  font-size: .55rem; line-height: 1.5; letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-blue); margin-top: 2px; white-space: nowrap;
}

/* The nav side of the row: never wrap, never let a button break in half. */
.navbar-collapse { flex: 0 1 auto; min-width: 0; }
/* Right-aligned with an auto margin, NOT justify-content:end. With
   justify-content:end a flex row that overflows spills past its START edge -
   which is what put the menu on top of the logo. An auto margin cannot do
   that: any overflow goes right, where it is visible and obvious. */
.navbar-nav { flex-wrap: nowrap; margin-left: auto; padding-left: 16px; }
.navbar-nav .nav-item { flex: 0 0 auto; }
.navbar-nav .nav-link { white-space: nowrap; }
.navbar-nav .btn-brand { white-space: nowrap; }

/* ---- Desktop step-downs ----
   xxl and up (container 1320): the full lockup, sub-line and all. */
@media (min-width: 1400px) {
  .brand__mark { height: 36px; }
  .brand__name { font-size: .97rem; }
  .brand__sub  { font-size: .5rem; letter-spacing: .03em; }
  .navbar-nav .nav-link { padding: 10px 9px; font-size: .85rem; }
  .navbar-nav .nav-link::after { left: 9px; right: 9px; }
  .navbar-nav .btn-brand { padding: 10px 18px; font-size: .85rem; }
  .navbar-nav .ms-xl-3 { margin-left: 12px !important; }
}

/* xl only (container 1140): the sub-line is the first thing to go. It is
   decorative - the hospital name beside it carries the meaning. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* The typeset hospital name steps out here and the mark carries the brand
     on its own - it already reads "PSR MINIMAL ACCESS SURGERY" and still links
     home. Squeezing the name in at this width left it touching the first menu
     item, and a cramped header reads as a broken one. The name returns at
     1400px. */
  .navbar-brand { margin-right: 18px; }
  .brand__mark { height: 30px; }
  .brand__text { display: none; }
  .navbar-nav .nav-link { padding: 10px 8px; font-size: .8rem; }
  .navbar-nav .nav-link::after { left: 8px; right: 8px; }
  .navbar-nav .btn-brand { padding: 9px 15px; font-size: .79rem; }
  .navbar-nav .ms-xl-3 { margin-left: 8px !important; }
}

/* Below xl the navbar is only brand + toggler. Bootstrap lets that row wrap,
   so an over-wide brand drops the toggler onto a second line - hence nowrap
   above, plus min-width:0 so the brand is actually allowed to shrink. */
@media (max-width: 1199.98px) {
  .navbar-brand { flex: 1 1 auto; }
  .navbar-toggler { flex: 0 0 auto; }
}

/* Phones and tablets: keep the real lockup - mark on the left, hospital name
   and the PSR sub-line beside it - rather than stacking them. It is the same
   arrangement the hospital uses on its signage and letterhead, so it is what
   a patient recognises.

   Sized fluidly with clamp() instead of a ladder of breakpoints, because the
   three pieces have to stay in proportion to each other AND to the toggler at
   every width between 320px and 767px. Measured intrinsic widths (Chrome):
       "Pratheep Nursing Home"            = 12.25 x font-size
       "SUPERSPECIALITY SURGICAL CENTRE"  = 19.06 x font-size (uppercase, .05em)
       the mark                           = 5.69 x its height
   The toggler is a fixed 54px. Those four numbers are the whole budget. */
@media (max-width: 767.98px) {
  .navbar-brand {
    flex-direction: row; align-items: center;
    gap: clamp(7px, 2.2vw, 12px);
    margin-right: 8px; min-width: 0;
  }
  .brand__mark {
    height: clamp(18px, 5.5vw, 32px);
    width: auto;
  }
  .brand__text { display: flex; min-width: 0; }
  .brand__name {
    font-size: clamp(.7rem, 3.4vw, 1rem);
    white-space: nowrap; line-height: 1.15;
  }
  .brand__name > span { display: inline; }
  .brand__sub {
    display: block;
    font-size: clamp(.38rem, 1.75vw, .52rem);
    line-height: 1.45; margin-top: 1px;
  }

  /* Stated explicitly rather than left to the cascade. The desktop shrink-on-
     scroll rule is `.site-header.is-stuck .brand__mark`, which carries three
     classes and therefore outranks the single-class clamp above. If it ever
     won here it would snap the mark to 33px - about 188px wide - the moment a
     phone user scrolled, and the header would break again. This keeps the
     shrink effect but inside the phone budget. */
  .site-header.is-stuck .brand__mark { height: clamp(16px, 4.9vw, 28px); }
}

/* Under ~360px the sub-line would have to drop below 6px to fit, which is not
   reading, it is decoration. The hospital name keeps the space instead. */
@media (max-width: 359.98px) {
  .brand__sub { display: none; }
  .brand__name { font-size: clamp(.68rem, 3.6vw, .8rem); }
}


.navbar-nav .nav-link {
  font-family: var(--ff-head); font-weight: 500; font-size: .93rem;
  color: var(--c-text); padding: 10px 14px; position: relative;
}
.navbar-nav .nav-link::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; background: var(--g-brand); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--c-blue); }
.navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after { transform: scaleX(1); }
.navbar-nav .dropdown-toggle::after { display: none; }

.dropdown-menu {
  border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: var(--sh-lg); padding: 10px; margin-top: 10px; min-width: 250px;
}
.dropdown-item {
  border-radius: 9px; padding: 10px 14px; font-size: .92rem;
  font-family: var(--ff-head); font-weight: 500; color: var(--c-text);
}
.dropdown-item:hover, .dropdown-item.active {
  background: var(--c-blue-light); color: var(--c-blue);
}

.navbar-toggler { border: 1px solid var(--c-border); padding: 8px 11px; }
.navbar-toggler:focus { box-shadow: none; }

/* ---------- Mobile offcanvas ---------- */
.mobile-nav { width: min(340px, 88vw); }
.mobile-nav .offcanvas-header { border-bottom: 1px solid var(--c-border); }
.mobile-nav__list { list-style: none; margin: 0; padding: 0; }
.mobile-nav__list > li { border-bottom: 1px solid var(--c-border); }
.mobile-nav__list a, .mobile-nav__toggle {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 14px 4px; font-family: var(--ff-head); font-weight: 500;
  color: var(--c-text); background: none; border: 0; font-size: .96rem; text-align: left;
}
.mobile-nav__list a.active, .mobile-nav__toggle:not(.collapsed) { color: var(--c-blue); }
.mobile-nav__toggle i { transition: transform .3s var(--ease); font-size: .8rem; }
.mobile-nav__toggle:not(.collapsed) i { transform: rotate(180deg); }
.mobile-nav__sub { list-style: none; padding: 0 0 8px 14px; }
.mobile-nav__sub a { padding: 10px 4px; font-size: .9rem; color: var(--c-muted); font-weight: 400; }
.mobile-nav__contact {
  margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--c-border);
  display: flex; flex-direction: column; gap: 10px;
}
.mobile-nav__contact a { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--c-navy); font-weight: 500; }

/* ==================================================================
   HERO SLIDER
   ================================================================== */
.hero { position: relative; background: var(--g-navy); overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(10, 130, 216, .38), transparent 55%),
    radial-gradient(circle at 8% 92%, rgba(0, 102, 179, .3), transparent 50%);
  pointer-events: none;
}
.hero__grid {
  position: absolute; inset: 0; opacity: .07; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 56px 56px;
}
/* soft floating orbs */
.hero__orb { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .3; pointer-events: none; }
.hero__orb--1 { width: 340px; height: 340px; background: #0A82D8; top: -90px; right: 8%; animation: float 14s ease-in-out infinite; }
.hero__orb--2 { width: 260px; height: 260px; background: #1BA5E8; bottom: -70px; left: 4%; animation: float 18s ease-in-out infinite reverse; }
@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(22px, -26px); }
}

.hero .swiper { position: relative; z-index: 2; }
.hero__slide { padding: var(--s-12) 0 var(--s-10); }
.hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  color: #CDE9FF; padding: 8px 18px; border-radius: 999px;
  font-size: .82rem; font-family: var(--ff-head); font-weight: 500; margin-bottom: var(--s-3);
  backdrop-filter: blur(8px);
}
.hero__badge .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #4ADE80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .7); animation: pulse-dot 2.2s infinite;
}
@keyframes pulse-dot {
  70%  { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.hero h1,
.hero .hero__h1 { color: #fff; margin-bottom: var(--s-2); letter-spacing: -.5px; }
/* Only the first hero slide carries the page's real <h1>; the others repeat
   the visual treatment on an <h2> so the page keeps one top-level heading. */
.hero .hero__h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 700; }
.hero h1 .accent,
.hero .hero__h1 .accent {
  background: linear-gradient(90deg, #7FD0FF, #CDE9FF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub {
  font-family: var(--ff-head); font-weight: 500; font-size: clamp(1rem, 1.6vw, 1.18rem);
  color: #9FD4FF; margin-bottom: var(--s-2);
}
.hero__text { color: rgba(255, 255, 255, .8); font-size: 1.05rem; max-width: 570px; margin-bottom: var(--s-4); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--s-5); }

.hero__stats { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.hero__stat .num {
  font-family: var(--ff-head); font-weight: 700; font-size: 1.9rem; color: #fff; line-height: 1;
}
.hero__stat .lbl { font-size: .82rem; color: rgba(255, 255, 255, .65); margin-top: 4px; }

/* Hero visual card */
.hero__visual { position: relative; }
.hero__visual img {
  border-radius: var(--radius-lg); box-shadow: var(--sh-lg);
  width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover;
}
.hero__visual-frame {
  position: absolute; inset: -14px -14px auto auto; width: 62%; height: 78%;
  border: 2px solid rgba(255, 255, 255, .18); border-radius: var(--radius-lg); z-index: -1;
}
.hero__float-card {
  position: absolute; bottom: 22px; left: -18px;
  background: #fff; border-radius: var(--radius); padding: 14px 20px;
  box-shadow: var(--sh-lg); display: flex; align-items: center; gap: 13px;
  animation: floatCard 5s ease-in-out infinite; max-width: 250px;
}
@keyframes floatCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
.hero__float-card .ico {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px;
  background: var(--c-blue-light); color: var(--c-blue);
  display: grid; place-items: center; font-size: 1.25rem;
}
.hero__float-card .t { font-family: var(--ff-head); font-weight: 600; font-size: .9rem; color: var(--c-navy); line-height: 1.3; }
.hero__float-card .s { font-size: .75rem; color: var(--c-muted); }

/* Swiper controls */
.hero .swiper-pagination { position: static; margin-top: var(--s-4); text-align: left; }
.hero .swiper-pagination-bullet { background: rgba(255, 255, 255, .4); opacity: 1; width: 26px; height: 4px; border-radius: 3px; transition: all .3s; }
.hero .swiper-pagination-bullet-active { background: #fff; width: 42px; }

/* Quick action strip under hero */
.quick-strip { margin-top: -46px; position: relative; z-index: 10; }
.quick-strip__inner {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--sh-lg);
  padding: var(--s-2); display: grid; gap: var(--s-1);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.quick-card {
  display: flex; align-items: center; gap: 14px; padding: 18px;
  border-radius: var(--radius); transition: all .3s var(--ease);
}
.quick-card:hover { background: var(--c-blue-faint); transform: translateY(-3px); }
.quick-card .ico {
  width: 50px; height: 50px; flex: 0 0 50px; border-radius: 14px;
  background: var(--g-brand); color: #fff; display: grid; place-items: center; font-size: 1.3rem;
  box-shadow: var(--sh-brand);
}
.quick-card h3 { font-size: .98rem; margin: 0 0 2px; }
.quick-card p { font-size: .82rem; color: var(--c-muted); margin: 0; }

/* ==================================================================
   PAGE TITLE (inner pages)
   ================================================================== */
.page-title {
  position: relative; background: var(--g-navy); padding: var(--s-10) 0 var(--s-8);
  overflow: hidden; text-align: center;
}
.page-title::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 75% 25%, rgba(10, 130, 216, .35), transparent 55%);
}
.page-title__inner { position: relative; z-index: 2; }
.page-title h1 { color: #fff; margin-bottom: var(--s-1); }
.page-title p { color: rgba(255, 255, 255, .8); max-width: 680px; margin: 0 auto; }

.breadcrumbs { margin-top: var(--s-2); font-size: .86rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 0; }
.breadcrumbs li { color: rgba(255, 255, 255, .6); display: flex; align-items: center; gap: 8px; }
.breadcrumbs li:not(:last-child)::after { content: '/'; color: rgba(255, 255, 255, .35); }
.breadcrumbs a { color: rgba(255, 255, 255, .85); }
.breadcrumbs a:hover { color: #fff; }

/* ==================================================================
   CARDS
   ================================================================== */
.card-soft {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  padding: var(--s-4); height: 100%; transition: all .35s var(--ease); position: relative; overflow: hidden;
}
.card-soft::before {
  content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--g-brand); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.card-soft:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); border-color: transparent; }
.card-soft:hover::before { transform: scaleX(1); }

.card-soft .ico {
  width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center;
  background: var(--c-blue-light); color: var(--c-blue); font-size: 1.5rem;
  margin-bottom: var(--s-2); transition: all .35s var(--ease);
}
.card-soft:hover .ico { background: var(--g-brand); color: #fff; transform: rotate(-6deg) scale(1.06); }
.card-soft h3 { font-size: 1.12rem; margin-bottom: 10px; }
.card-soft p { color: var(--c-muted); font-size: .93rem; margin-bottom: var(--s-2); }
.card-soft .more { font-family: var(--ff-head); font-weight: 600; font-size: .87rem; display: inline-flex; align-items: center; gap: 7px; }
.card-soft .more i { transition: transform .3s var(--ease); }
.card-soft:hover .more i { transform: translateX(5px); }

/* Facility chip card */
.facility {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: var(--s-3); height: 100%; display: flex; gap: 14px; transition: all .3s var(--ease);
}
.facility:hover { border-color: var(--c-blue-2); box-shadow: var(--sh-md); transform: translateY(-4px); }
.facility .ico {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px;
  background: var(--c-blue-light); color: var(--c-blue); display: grid; place-items: center; font-size: 1.2rem;
}
.facility h3 { font-size: .98rem; margin: 0 0 5px; }
.facility p { font-size: .85rem; color: var(--c-muted); margin: 0; }

/* Treatment list item */
.treat-item {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 18px 20px; height: 100%; transition: all .3s var(--ease);
  display: flex; gap: 13px; align-items: flex-start;
}
.treat-item:hover { border-color: var(--c-blue-2); box-shadow: var(--sh-md); transform: translateX(5px); }
.treat-item i { color: var(--c-blue); font-size: 1.05rem; margin-top: 4px; flex: 0 0 auto; }
.treat-item h3 { font-size: .96rem; margin: 0 0 4px; }
.treat-item p { font-size: .84rem; color: var(--c-muted); margin: 0; }

/* ==================================================================
   GOLD MEDALIST BADGE + DOCTOR
   ================================================================== */
.gold-badge {
  position: relative; overflow: hidden; background: #fff;
  border: 2px solid var(--c-gold); border-radius: var(--radius-lg);
  padding: var(--s-3) var(--s-4); display: inline-flex; align-items: center; gap: 18px;
  box-shadow: 0 10px 30px rgba(212, 175, 55, .16);
}
.gold-badge__medal {
  width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%;
  background: var(--g-gold); display: grid; place-items: center;
  color: #4A3A08; font-size: 1.6rem; box-shadow: 0 6px 16px rgba(212, 175, 55, .38);
}
.gold-badge__t {
  font-family: var(--ff-head); font-weight: 700; font-size: 1.02rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-navy); line-height: 1.2;
}
.gold-badge__s { font-size: .85rem; color: var(--c-muted); margin-top: 3px; }
/* single light sweep, fired once when it enters the viewport */
.gold-badge__sheen {
  position: absolute; top: 0; left: -70%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.gold-badge.is-lit .gold-badge__sheen { animation: sheen 1.5s var(--ease) 1 forwards; }
@keyframes sheen { to { left: 125%; } }

.doctor-card {
  background: #fff; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--sh-md); border: 1px solid var(--c-border);
}
.doctor-card__head { background: var(--g-navy); padding: var(--s-4); color: #fff; position: relative; overflow: hidden; }
.doctor-card__head::after {
  content: ''; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px;
  border-radius: 50%; background: rgba(255, 255, 255, .06);
}
.doctor-card__name { font-size: 1.5rem; color: #fff; margin-bottom: 6px; }
.doctor-card__quals { font-size: .87rem; color: #9FD4FF; line-height: 1.6; margin: 0; position: relative; z-index: 2; }
.doctor-card__body { padding: var(--s-4); }

.qual-pill {
  display: inline-block; background: var(--c-blue-light); color: var(--c-blue);
  font-family: var(--ff-head); font-weight: 600; font-size: .8rem;
  padding: 7px 15px; border-radius: 999px; margin: 0 7px 8px 0;
}

/* ==================================================================
   PATIENT JOURNEY (animated route line)
   ================================================================== */
.journey { position: relative; }
.journey__line {
  position: absolute; left: 27px; top: 34px; bottom: 34px; width: 2px;
  background: linear-gradient(180deg, var(--c-blue-2), var(--c-blue-light));
}
.journey__line::after {
  content: ''; position: absolute; left: -3px; top: 0; width: 8px; height: 8px;
  border-radius: 50%; background: var(--c-blue-2); box-shadow: 0 0 12px var(--c-blue-2);
  animation: travel 6s linear infinite;
}
@keyframes travel { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

.journey__step { display: flex; gap: 20px; padding-bottom: var(--s-4); position: relative; }
.journey__step:last-child { padding-bottom: 0; }
.journey__num {
  width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%;
  background: #fff; border: 2px solid var(--c-blue-light); color: var(--c-blue);
  display: grid; place-items: center; font-family: var(--ff-head); font-weight: 700;
  font-size: .95rem; position: relative; z-index: 2; transition: all .35s var(--ease);
}
.journey__step:hover .journey__num { background: var(--g-brand); color: #fff; border-color: transparent; transform: scale(1.08); }
.journey__step h3 { font-size: 1.05rem; margin-bottom: 5px; }
.journey__step p { font-size: .92rem; color: var(--c-muted); margin: 0; }

/* ==================================================================
   INTERNATIONAL / COUNTRY CARDS
   ================================================================== */
.country-card {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  padding: var(--s-5); color: #fff; height: 100%;
  transition: all .35s var(--ease);
  /* Three layers, top to bottom: a navy wash that keeps the white text
     legible, the country photograph, and the gradient as the backstop for a
     card that was given no photograph. The photo must never be set as a plain
     inline background-image - that would replace this whole stack. */
  background:
    linear-gradient(135deg, rgba(0, 26, 51, .90) 0%, rgba(0, 57, 95, .84) 55%, rgba(10, 92, 122, .88) 100%),
    var(--card-photo, none) center / cover no-repeat,
    var(--g-navy);
}
.country-card::after {
  content: ''; position: absolute; right: -50px; top: -50px; width: 190px; height: 190px;
  border-radius: 50%; background: rgba(255, 255, 255, .06); transition: transform .5s var(--ease);
}
.country-card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); }
.country-card:hover::after { transform: scale(1.25); }
.country-card__flag { font-size: 2.4rem; line-height: 1; margin-bottom: var(--s-2); }
.country-card h3 { color: #fff; font-size: 1.35rem; margin-bottom: 10px; position: relative; z-index: 2; }
.country-card p { color: rgba(255, 255, 255, .8); font-size: .94rem; position: relative; z-index: 2; }
.country-card ul { list-style: none; padding: 0; margin: var(--s-2) 0 var(--s-3); position: relative; z-index: 2; }
.country-card ul li { font-size: .9rem; color: rgba(255, 255, 255, .82); padding: 5px 0 5px 26px; position: relative; }
.country-card ul li::before {
  content: '\F26E'; font-family: 'bootstrap-icons'; position: absolute; left: 0; color: #7FD0FF;
}

/* ==================================================================
   IMAGE EFFECTS
   ================================================================== */
.img-zoom { overflow: hidden; border-radius: var(--radius-lg); }
.img-zoom img { transition: transform .7s var(--ease); display: block; width: 100%; }
.img-zoom:hover img { transform: scale(1.07); }

.img-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--sh-md); }
.img-frame::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 59, 111, .35));
  opacity: 0; transition: opacity .4s var(--ease);
}
.img-frame:hover::after { opacity: 1; }

/* Gallery */
.gallery-item {
  position: relative; display: block; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--sh-sm); background: var(--c-blue-light);
}
.gallery-item img { width: 100%; display: block; transition: transform .6s var(--ease); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; padding: var(--s-2);
  background: linear-gradient(180deg, transparent 45%, rgba(0, 42, 81, .88));
  opacity: 0; transition: opacity .4s var(--ease);
}
.gallery-item:hover .gallery-item__overlay { opacity: 1; }
.gallery-item__overlay span { color: #fff; font-family: var(--ff-head); font-weight: 500; font-size: .88rem; }
.gallery-item__zoom {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--c-navy); display: grid; place-items: center;
  transform: scale(0); transition: transform .35s var(--ease);
}
.gallery-item:hover .gallery-item__zoom { transform: scale(1); }

.gallery-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: var(--s-5); }
.gallery-filter button {
  border: 1px solid var(--c-border); background: #fff; color: var(--c-text);
  font-family: var(--ff-head); font-weight: 500; font-size: .87rem;
  padding: 9px 20px; border-radius: 999px; transition: all .3s var(--ease);
}
.gallery-filter button:hover { border-color: var(--c-blue); color: var(--c-blue); }
.gallery-filter button.active { background: var(--g-brand); color: #fff; border-color: transparent; box-shadow: var(--sh-brand); }

/* ==================================================================
   FORMS
   ================================================================== */
.form-card {
  background: #fff; border-radius: var(--radius-lg); padding: var(--s-5);
  box-shadow: var(--sh-lg); border: 1px solid var(--c-border);
}
.form-label { font-family: var(--ff-head); font-weight: 500; font-size: .86rem; color: var(--c-navy); margin-bottom: 6px; }
.form-label .req { color: #D93025; }
.form-control, .form-select {
  border: 1px solid var(--c-border); border-radius: 10px; padding: 12px 15px;
  font-size: .94rem; background: var(--c-blue-faint); transition: all .25s var(--ease);
}
.form-control:focus, .form-select:focus {
  border-color: var(--c-blue-2); background: #fff;
  box-shadow: 0 0 0 4px rgba(10, 130, 216, .12);
}
.form-control::placeholder { color: #9DB3C4; }
textarea.form-control { min-height: 128px; resize: vertical; }
.form-note { font-size: .8rem; color: var(--c-muted); }

.alert-soft {
  border-radius: var(--radius); border: 1px solid; padding: 16px 20px; font-size: .93rem;
}
.alert-soft.ok  { background: #E9F8EF; border-color: #A8E0BF; color: #1B6E3C; }
.alert-soft.err { background: #FDECEA; border-color: #F5B7B1; color: #A93226; }

/* ==================================================================
   ACCORDION / FAQ
   ================================================================== */
.accordion-item { border: 1px solid var(--c-border); border-radius: var(--radius) !important; margin-bottom: 12px; overflow: hidden; }
.accordion-button {
  font-family: var(--ff-head); font-weight: 500; font-size: 1rem; color: var(--c-navy);
  background: #fff; padding: 20px 22px;
}
.accordion-button:not(.collapsed) { background: var(--c-blue-light); color: var(--c-blue); box-shadow: none; }
.accordion-button:focus { box-shadow: none; border-color: var(--c-blue-2); }
.accordion-button::after {
  background-image: none; content: '\F64D'; font-family: 'bootstrap-icons';
  font-size: .85rem; width: auto; height: auto; transition: transform .3s var(--ease);
}
.accordion-body { padding: 4px 22px 22px; color: var(--c-muted); font-size: .94rem; }

/* ==================================================================
   CTA BANDS
   ================================================================== */
.cta-band { position: relative; background: var(--g-navy); overflow: hidden; padding: var(--s-10) 0; }
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(10, 130, 216, .4), transparent 55%);
}
.cta-band__inner { position: relative; z-index: 2; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .82); max-width: 700px; margin: 0 auto var(--s-4); }
.cta-band__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.cta-glow { position: relative; }
.cta-glow::after {
  content: ''; position: absolute; inset: -3px; border-radius: 999px;
  background: var(--g-brand); filter: blur(14px); opacity: .5; z-index: -1;
  animation: glow 3.2s ease-in-out infinite;
}
@keyframes glow { 0%, 100% { opacity: .35; } 50% { opacity: .65; } }

/* Stat counters */
.stat-box { text-align: center; padding: var(--s-3); }
.stat-box .num {
  font-family: var(--ff-head); font-weight: 700; font-size: clamp(2rem, 3.6vw, 2.8rem);
  background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}
.bg-navy .stat-box .num { background: linear-gradient(90deg, #fff, #9FD4FF); -webkit-background-clip: text; background-clip: text; }
.stat-box .lbl { font-size: .88rem; color: var(--c-muted); margin-top: 8px; }
.bg-navy .stat-box .lbl { color: rgba(255, 255, 255, .7); }

/* ==================================================================
   FOOTER
   ================================================================== */
.site-footer { background: var(--c-navy-deep); color: rgba(255, 255, 255, .68); padding-top: var(--s-10); position: relative; overflow: hidden; }
.site-footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--g-brand);
}
.site-footer h3 {
  color: #fff; font-size: 1rem; margin-bottom: var(--s-3); position: relative; padding-bottom: 12px;
}
.site-footer h3::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 38px; height: 2px; background: var(--c-blue-2);
}
/* Footer brand: the mark on a white chip so the black badge stays legible
   against the navy, with the name set in type beside it. */
.footer-brand { display: flex; align-items: center; gap: 13px; margin-bottom: var(--s-3); }
.footer-brand__mark {
  height: 46px; width: auto; flex: 0 0 auto;
  background: #fff; border-radius: 10px; padding: 6px 9px;
}
.footer-brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.footer-brand__name {
  font-family: var(--ff-head); font-weight: 700; font-size: 1.05rem; color: #fff;
}
.footer-brand__sub {
  font-family: var(--ff-head); font-weight: 500; font-size: .58rem;
  letter-spacing: .07em; text-transform: uppercase;
  color: #9FD4FF; margin-top: 3px; max-width: 290px;
}
.site-footer p { color: rgba(255, 255, 255, .68); font-size: .9rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 11px; }
.footer-links a { color: rgba(255, 255, 255, .68); font-size: .9rem; display: inline-flex; align-items: center; gap: 9px; }
.footer-links a::before { content: '\F285'; font-family: 'bootstrap-icons'; font-size: .7rem; color: var(--c-blue-2); transition: transform .3s var(--ease); }
.footer-links a:hover { color: #fff; }
.footer-links a:hover::before { transform: translateX(4px); }

.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; gap: 13px; margin-bottom: 15px; font-size: .9rem; }
.footer-contact i { color: var(--c-blue-2); font-size: 1rem; margin-top: 3px; }
.footer-contact a { color: rgba(255, 255, 255, .68); }
.footer-contact a:hover { color: #fff; }

.footer-social { display: flex; gap: 10px; margin-top: var(--s-2); }
.footer-social a {
  width: 40px; height: 40px; border-radius: 11px; background: rgba(255, 255, 255, .08);
  color: #fff; display: grid; place-items: center; transition: all .3s var(--ease);
}
.footer-social a:hover { background: var(--g-brand); transform: translateY(-4px); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1); margin-top: var(--s-6);
  padding: var(--s-3) 0; font-size: .85rem;
}
.footer-bottom a { color: #9FD4FF; }
.footer-bottom a:hover { color: #fff; }

.footer-disclaimer {
  background: rgba(0, 0, 0, .2); padding: var(--s-2) 0; font-size: .78rem;
  color: rgba(255, 255, 255, .5); line-height: 1.6;
}

/* ==================================================================
   FLOATING CONTACT + MOBILE STICKY BAR
   ================================================================== */
.float-wa {
  position: fixed; right: 20px; bottom: 96px; z-index: 1040;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff;
  display: grid; place-items: center; font-size: 1.6rem; box-shadow: 0 8px 24px rgba(37, 211, 102, .45);
  transition: transform .3s var(--ease);
}
.float-wa:hover { color: #fff; transform: scale(1.1); }
.float-wa::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366;
  animation: ring 2.2s ease-out infinite;
}
@keyframes ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }

.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 1040;
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: var(--g-brand); color: #fff; box-shadow: var(--sh-brand);
  opacity: 0; visibility: hidden; transition: all .35s var(--ease);
}
.to-top.show { opacity: 1; visibility: visible; }
.to-top:hover { transform: translateY(-4px); }

.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1045;
  background: #fff; box-shadow: 0 -4px 20px rgba(0, 59, 111, .14);
  display: none; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--c-border);
}
.mobile-bar a {
  padding: 10px 4px; text-align: center; font-family: var(--ff-head);
  font-size: .72rem; font-weight: 500; color: var(--c-navy);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.mobile-bar a i { font-size: 1.2rem; color: var(--c-blue); }
.mobile-bar a.is-wa i { color: #25D366; }

/* ==================================================================
   MISC
   ================================================================== */
.notice-box {
  background: var(--c-blue-light); border-left: 4px solid var(--c-blue);
  border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s-3);
}
.notice-box p { font-size: .9rem; color: var(--c-text); margin: 0; }
.notice-box strong { color: var(--c-navy); }

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding: 7px 0 7px 32px; font-size: .95rem; color: var(--c-text); }
.check-list li::before {
  content: '\F26E'; font-family: 'bootstrap-icons'; position: absolute; left: 0; top: 7px;
  color: var(--c-blue); font-weight: 700;
}

.area-pill {
  display: inline-block; background: #fff; border: 1px solid var(--c-border);
  color: var(--c-navy); font-family: var(--ff-head); font-weight: 500; font-size: .87rem;
  padding: 9px 20px; border-radius: 999px; margin: 0 8px 10px 0; transition: all .3s var(--ease);
}
.area-pill:hover { border-color: var(--c-blue); background: var(--c-blue-light); transform: translateY(-3px); }

.insurer-pill {
  background: #fff; border: 1px solid var(--c-border); border-radius: 10px;
  padding: 12px 16px; font-size: .85rem; font-weight: 500; color: var(--c-navy);
  text-align: center; height: 100%; display: flex; align-items: center; justify-content: center;
  transition: all .3s var(--ease);
}
.insurer-pill:hover { border-color: var(--c-blue-2); box-shadow: var(--sh-sm); transform: translateY(-3px); }

/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 991.98px) {
  .section { padding: var(--s-8) 0; }
  .hero__slide { padding: var(--s-8) 0 var(--s-6); }
  .hero__visual { margin-top: var(--s-5); }
  .hero__float-card { left: 10px; bottom: 12px; }
  .quick-strip { margin-top: var(--s-5); }
  .page-title { padding: var(--s-8) 0 var(--s-6); }
  /* Bottom-right stack, measured up from the viewport edge:
       mobile bar   0 - 62px
       to-top      74 - 120px
       WhatsApp   132 - 182px
     The two buttons previously sat at 74px and 78px, so they overlapped. */
  .to-top   { bottom: 74px;  right: 16px; }
  .float-wa { bottom: 132px; right: 16px; width: 50px; height: 50px; font-size: 1.4rem; }

  /* Keep the last footer line clear of the button stack when scrolled
     all the way down, so "Designed by WebGlits" stays clickable. */
  .footer-bottom { padding-bottom: 84px; }
  .footer-bottom .d-flex { justify-content: flex-start !important; }
}

/* The quick-contact bar is tied to the TOPBAR, not to the phone breakpoint.
   The topbar carries the phone numbers and hides below xl, so the bar has to
   appear at exactly that point - otherwise a tablet or small laptop between
   992px and 1199px has neither, and the one thing this site must never do is
   leave a parent with no visible way to call. */
@media (max-width: 1199.98px) {
  body { padding-bottom: 62px; }
  .mobile-bar { display: grid; }
  .footer-bottom { padding-bottom: 84px; }

  /* The floating bubble is hidden wherever the bar is shown: the bar already
     has a WhatsApp button, so the bubble was a second identical target in the
     same corner, sitting on top of the page content. It stays on desktop,
     where there is no bar. */
  .float-wa { display: none; }
  .to-top { bottom: 74px; right: 16px; }
}

@media (max-width: 575.98px) {
  /* NOTE: the brand mark is sized by the clamp() on .brand__mark above.
     A `.navbar-brand img { height: 42px }` rule used to live here and, being
     more specific than a single class, silently overrode that clamp - which
     pinned the mark at 239px wide on a 360px phone and squeezed the hospital
     name down to 27px. Do not reintroduce an `img` selector here. */
  .hero__stats { gap: var(--s-3); }
  .hero__cta .btn { width: 100%; }
  .form-card { padding: var(--s-3); }
  .gold-badge { padding: var(--s-2) var(--s-3); gap: 13px; }
  .gold-badge__medal { width: 46px; height: 46px; flex: 0 0 46px; font-size: 1.3rem; }
  .cta-band__btns .btn { width: 100%; }
}

/* ==================================================================
   REDUCED MOTION
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .wow { visibility: visible !important; }
}

/* ==================================================================
   IMAGE STRIP  (speciality pages)
   ================================================================== */
.img-strip { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

.shot {
  position: relative; display: block; border-radius: var(--radius); overflow: hidden;
  background: var(--c-blue-light); box-shadow: var(--sh-sm); border: 1px solid var(--c-border);
}
.shot img {
  width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .6s var(--ease);
}
.shot:hover img { transform: scale(1.07); }
.shot__cap {
  position: absolute; inset: auto 0 0 0; padding: 26px 14px 12px;
  background: linear-gradient(180deg, transparent, rgba(0, 42, 81, .9));
  color: #fff; font-family: var(--ff-head); font-weight: 500; font-size: .84rem; line-height: 1.35;
}
.shot__zoom {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--c-navy); display: grid; place-items: center;
  font-size: .82rem; transform: scale(0); transition: transform .3s var(--ease);
}
.shot:hover .shot__zoom { transform: scale(1); }

/* Small tag marking what kind of image it is */
.shot__tag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(0, 42, 81, .82); color: #CDE9FF; backdrop-filter: blur(4px);
  font-family: var(--ff-head); font-weight: 500; font-size: .66rem; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
}

/* ==================================================================
   TREATMENT IMAGE CARDS
   ================================================================== */
.tcard {
  display: block; border-radius: var(--radius-lg); overflow: hidden; height: 100%;
  background: #fff; border: 1px solid var(--c-border); box-shadow: var(--sh-sm);
  transition: all .35s var(--ease);
}
.tcard:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); border-color: transparent; }
.tcard__media { position: relative; overflow: hidden; }
.tcard__media img {
  width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform .6s var(--ease);
}
.tcard:hover .tcard__media img { transform: scale(1.07); }
.tcard__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 59, 111, .3));
  opacity: 0; transition: opacity .4s var(--ease);
}
.tcard:hover .tcard__media::after { opacity: 1; }
.tcard__body { padding: 20px; }
.tcard__body h3 { font-size: 1.05rem; margin-bottom: 6px; }
.tcard__body p { font-size: .87rem; color: var(--c-muted); margin: 0 0 12px; }
.tcard__more { font-family: var(--ff-head); font-weight: 600; font-size: .85rem; color: var(--c-blue); display: inline-flex; align-items: center; gap: 7px; }
.tcard__more i { transition: transform .3s var(--ease); }
.tcard:hover .tcard__more i { transform: translateX(5px); }


/* ==================================================================
   SPECIALITY CARD WITH IMAGE + FLOATING ICON
   ================================================================== */
.scard {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--sh-sm); transition: all .35s var(--ease);
}
.scard:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); border-color: transparent; }

.scard__media { position: relative; overflow: hidden; }
.scard__media img {
  width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform .65s var(--ease);
}
.scard:hover .scard__media img { transform: scale(1.07); }
.scard__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 42, 81, .05) 40%, rgba(0, 42, 81, .45));
}

/* Icon badge straddling the image edge.
   Anchored to .scard__body so it stays inside the card's clipping box -
   positioning it in .scard__media meant the zoom overflow cut it in half. */
.scard__body { position: relative; }
.scard__ico {
  position: absolute; left: 22px; top: -28px; z-index: 3;
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--g-brand); color: #fff;
  display: grid; place-items: center; font-size: 1.4rem;
  box-shadow: var(--sh-brand); border: 3px solid #fff;
  transition: transform .35s var(--ease);
}
.scard:hover .scard__ico { transform: rotate(-6deg) scale(1.06); }

.scard__body { padding: 44px 22px 24px; display: flex; flex-direction: column; flex-grow: 1; }
.scard__body h3 { font-size: 1.1rem; margin-bottom: 10px; }
.scard__body p { font-size: .92rem; color: var(--c-muted); margin: 0 0 16px; }
.scard__more {
  margin-top: auto; font-family: var(--ff-head); font-weight: 600; font-size: .87rem;
  color: var(--c-blue); display: inline-flex; align-items: center; gap: 7px;
}
.scard__more i { transition: transform .3s var(--ease); }
.scard:hover .scard__more i { transform: translateX(5px); }

@media (max-width: 575.98px) {
  .scard__ico { width: 48px; height: 48px; font-size: 1.2rem; bottom: -22px; left: 18px; }
  .scard__body { padding: 38px 18px 20px; }
}

/* ==================================================================
   DOCTOR PORTRAIT
   ================================================================== */
.portrait {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--sh-lg); background: var(--c-blue-light);
}
.portrait img {
  width: 100%; display: block; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: center top;
  transition: transform .7s var(--ease);
}
.portrait:hover img { transform: scale(1.04); }
.portrait__caption {
  position: absolute; inset: auto 0 0 0; padding: 46px 22px 20px;
  background: linear-gradient(180deg, transparent, rgba(0, 42, 81, .92));
  color: #fff;
}
.portrait__caption h3 { color: #fff; font-size: 1.25rem; margin-bottom: 4px; }
.portrait__caption p { color: #9FD4FF; font-size: .82rem; margin: 0; line-height: 1.5; }

/* gold medal photo beside the badge */
.medal-shot {
  border-radius: var(--radius); overflow: hidden; border: 2px solid var(--c-gold);
  box-shadow: 0 10px 26px rgba(212, 175, 55, .22); flex: 0 0 132px; width: 132px;
}
.medal-shot img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; }

.gold-row { display: flex; gap: 20px; align-items: stretch; flex-wrap: wrap; }
.gold-row .gold-badge { flex: 1 1 260px; }

@media (max-width: 575.98px) {
  .medal-shot { flex-basis: 96px; width: 96px; }
}

/* ==================================================================
   MOTION LAYER
   Medical-flavoured, restrained: transform/opacity only so it stays
   cheap to composite. Everything is disabled under reduced-motion.
   ================================================================== */

/* ---- Scroll progress bar ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 1060;
  background: var(--g-brand); transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform; pointer-events: none;
}

/* ---- ECG / heartbeat divider ---- */
.ecg {
  display: block; width: 100%; height: 54px; overflow: hidden;
  color: var(--c-blue-2); opacity: .55;
}
.ecg svg { width: 100%; height: 100%; display: block; }
.ecg path {
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
}
.ecg.is-live path { animation: ecgDraw 3.4s var(--ease) forwards; }
@keyframes ecgDraw { to { stroke-dashoffset: 0; } }

/* the travelling blip that follows the trace */
.ecg__dot { fill: currentColor; opacity: 0; }
.ecg.is-live .ecg__dot { animation: ecgBlip 3.4s var(--ease) forwards; }
@keyframes ecgBlip {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; }
}
.bg-navy .ecg, .cta-band .ecg { color: #7FD0FF; opacity: .45; }

/* ---- Scroll reveal (used instead of a second animation library) ---- */
.js [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="left"]  { transform: translateX(-32px); }
.js [data-reveal="right"] { transform: translateX(32px); }
.js [data-reveal="zoom"]  { transform: scale(.94); }
.js [data-reveal].is-in[data-reveal] { transform: none; }

/* ---- 3D tilt ---- */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt__inner { transform: translateZ(28px); }

/* ---- Heading underline draw ---- */
.sec-head h2 { position: relative; display: inline-block; }
.sec-head h2::after {
  content: ''; position: absolute; left: 0; bottom: -10px; height: 3px; width: 100%;
  background: var(--g-brand); border-radius: 3px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease) .15s;
}
.sec-head.is-in h2::after { transform: scaleX(1); }
.bg-navy .sec-head h2::after { background: linear-gradient(90deg, #7FD0FF, transparent); }
.sec-head.text-start { }
.sec-head:not(.text-start) h2::after { left: 50%; transform: translateX(-50%) scaleX(0); transform-origin: center; }
.sec-head:not(.text-start).is-in h2::after { transform: translateX(-50%) scaleX(1); }

/* ---- Pulse ring (medical vitals feel) ---- */
.pulse-ring { position: relative; }
.pulse-ring::before,
.pulse-ring::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--c-blue-2); opacity: 0; pointer-events: none;
}
.pulse-ring::before { animation: pulseOut 2.8s ease-out infinite; }
.pulse-ring::after  { animation: pulseOut 2.8s ease-out infinite 1.4s; }
@keyframes pulseOut {
  0%   { transform: scale(1);    opacity: .55; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* ---- Floating medical icons in the hero ---- */
.hero__icons { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hero__icon {
  position: absolute; color: rgba(255, 255, 255, .13); font-size: 2rem;
  animation: drift 16s ease-in-out infinite;
}
.hero__icon:nth-child(1) { top: 16%; left: 6%;  font-size: 2.4rem; animation-delay: 0s; }
.hero__icon:nth-child(2) { top: 62%; left: 14%; animation-delay: -3s; }
.hero__icon:nth-child(3) { top: 24%; right: 9%; font-size: 2.8rem; animation-delay: -6s; }
.hero__icon:nth-child(4) { top: 74%; right: 18%; animation-delay: -9s; }
.hero__icon:nth-child(5) { top: 45%; left: 46%; font-size: 1.6rem; animation-delay: -12s; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%      { transform: translate(14px, -20px) rotate(6deg); }
  66%      { transform: translate(-10px, 14px) rotate(-5deg); }
}

/* ---- Speciality marquee ---- */
.marquee {
  overflow: hidden; padding: 18px 0; background: var(--c-navy-deep);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: scrollX 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 10px; padding: 0 30px;
  font-family: var(--ff-head); font-weight: 500; font-size: .95rem;
  color: rgba(255, 255, 255, .8); white-space: nowrap;
}
.marquee__item i { color: var(--c-blue-2); font-size: 1.05rem; }
@keyframes scrollX { to { transform: translateX(-50%); } }

/* ---- Card hover lift already exists; add a soft glow sweep ---- */
.scard__media::before, .tcard__media::before {
  content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; z-index: 2;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-20deg); transition: left .8s var(--ease); pointer-events: none;
}
.scard:hover .scard__media::before, .tcard:hover .tcard__media::before { left: 130%; }

/* ---- Stat counters get a subtle vitals tick ---- */
.stat-box .num { transition: transform .3s var(--ease); }
.stat-box:hover .num { transform: scale(1.06); }

/* ==================================================================
   REDUCED MOTION - must stay last so it overrides everything above
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .sec-head h2::after { transform: scaleX(1) !important; }
  .sec-head:not(.text-start) h2::after { transform: translateX(-50%) scaleX(1) !important; }
  .ecg path { stroke-dashoffset: 0 !important; }
  .hero__icons, .scroll-progress { display: none !important; }
  .marquee__track { animation: none !important; }
}

/* Shorter crop where the portrait sits above a full info card */
.portrait--wide img { aspect-ratio: 4 / 3.1; }

/* Gold badge + medal photo: match heights and keep the medal readable */
.gold-row { align-items: stretch; }
.gold-row .gold-badge { margin-bottom: 0; }
.medal-shot { display: block; }
.medal-shot img { height: 100%; aspect-ratio: auto; object-position: center 22%; }

/* ---- Home doctor section balance ----
   Portrait fills more of the column now that the card below it only
   carries the professional areas. */
.portrait--wide img { aspect-ratio: 4 / 3.4; }

/* Medal photo: show the medal and the face, not a tight head crop */
.medal-shot { flex: 0 0 150px; width: 150px; }
.medal-shot img { height: 100%; width: 100%; object-fit: cover; object-position: 38% 40%; }

@media (max-width: 575.98px) {
  .gold-row { flex-wrap: nowrap; }
  .medal-shot { flex: 0 0 104px; width: 104px; }
}

/* ==================================================================
   PALETTE APPLICATION
   Green carries "care and confirmation", sky carries light surfaces,
   blue stays the brand. Assigning each a job keeps the mix coherent.
   ================================================================== */

/* ---- Section surfaces ---- */
.bg-mint  { background: var(--c-mint-faint); }
.bg-sky   { background: var(--c-sky-light); }
.bg-deep  { background: var(--g-deep); color: #fff; }
.bg-deep h1, .bg-deep h2, .bg-deep h3 { color: #fff; }
.bg-deep p { color: rgba(255, 255, 255, .92); }
.bg-deep .eyebrow { color: #A8DBFF; background: rgba(255, 255, 255, .14); }
.bg-deep .sec-head p { color: rgba(255, 255, 255, .88); }
.bg-deep .sec-head h2::after { background: linear-gradient(90deg, #7FD0FF, transparent); }

/* ---- Confirmation marks read green everywhere ---- */
.check-list li::before { color: var(--c-green); }
.treat-item i { color: var(--c-green); }
.country-card ul li::before { color: #6EE7B7; }

/* ---- Facilities: care-side, so mint + green ---- */
.facility .ico { background: var(--c-mint); color: var(--c-green-deep); }
.facility:hover { border-color: var(--c-green-2); box-shadow: var(--sh-green); }
.treat-item:hover { border-color: var(--c-green-2); }

/* ---- Eyebrow variants ---- */
.eyebrow--green { color: var(--c-green-deep); background: var(--c-mint); }
.eyebrow--sky   { color: #0369A1;            background: var(--c-sky-light); }

/* ---- Buttons ---- */
.btn-green { background: var(--g-green); color: #fff; box-shadow: var(--sh-green); }
.btn-green:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 18px 40px rgba(14, 159, 110, .36); }
.btn-outline-green { border-color: var(--c-green); color: var(--c-green-deep); background: transparent; }
.btn-outline-green:hover { background: var(--c-green); color: #fff; transform: translateY(-3px); }

/* ---- Stats span the full palette ---- */
.stat-box .num {
  background: var(--g-mixed);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Journey: steps confirm green as you pass them ---- */
.journey__line { background: linear-gradient(180deg, var(--c-sky-2), var(--c-green-2)); }
.journey__line::after { background: var(--c-green-2); box-shadow: 0 0 12px var(--c-green-2); }
.journey__step:hover .journey__num { background: var(--g-green); box-shadow: var(--sh-green); }
.journey__num { border-color: var(--c-border-green); color: var(--c-green-deep); }

/* ---- Accordion open state leans mint ---- */
.accordion-button:not(.collapsed) { background: var(--c-mint); color: var(--c-green-deep); }

/* ---- Pills ---- */
.insurer-pill:hover { border-color: var(--c-green-2); }
.area-pill:hover { border-color: var(--c-green-2); background: var(--c-mint); }

/* ---- Notice box: informational blue, plus a green "reassurance" variant ---- */
.notice-box--green {
  background: var(--c-mint); border-left-color: var(--c-green);
}

/* ---- Speciality card icons alternate so the grid is not one flat blue ---- */
.scard:nth-child(3n - 1) .scard__ico { background: var(--g-green); box-shadow: var(--sh-green); }
.scard:nth-child(3n) .scard__ico     { background: var(--g-sky); }
.row > div:nth-child(3n - 1) .scard__ico { background: var(--g-green); box-shadow: var(--sh-green); }
.row > div:nth-child(3n) .scard__ico     { background: var(--g-sky); }

/* ---- Quick strip icons alternate too ---- */
.quick-strip__inner .quick-card:nth-child(2) .ico { background: var(--g-green); box-shadow: var(--sh-green); }
.quick-strip__inner .quick-card:nth-child(3) .ico { background: var(--g-sky); box-shadow: none; }
.quick-card:hover { background: var(--c-mint-faint); }

/* ---- Hero: one blue orb, one teal, so the gradient field is not flat ---- */
.hero__orb--2 { background: #0E9F6E; opacity: .26; }
.hero__badge .dot { background: #6EE7B7; box-shadow: 0 0 0 0 rgba(110, 231, 183, .7); }

/* ---- Footer top rule shows the whole palette ---- */
.site-footer::before { background: var(--g-mixed); }
.footer-social a:hover { background: var(--g-green); }

/* ---- ECG trace reads as a vitals monitor: green ---- */
.ecg { color: var(--c-green-2); }
.bg-navy .ecg, .bg-deep .ecg, .cta-band .ecg { color: #7FD0FF; }

/* ---- Scroll progress spans the palette ---- */
.scroll-progress { background: var(--g-mixed); }

/* ---- Marquee icons alternate ---- */
.marquee__item:nth-child(even) i { color: var(--c-green-2); }

/* ---- Gold badge unchanged: recognition stays gold ---- */

/* ==================================================================
   LIGHT CARDS INSIDE DARK BANDS
   .bg-deep / .bg-navy force white headings and copy for text sitting
   directly on the gradient. A white card inside one must win that back,
   or its own text disappears.
   ================================================================== */
.bg-deep .facility, .bg-navy .facility,
.bg-deep .card-soft, .bg-navy .card-soft { background: #fff; border-color: transparent; }

.bg-deep .facility h3, .bg-navy .facility h3,
.bg-deep .card-soft h3, .bg-navy .card-soft h3 { color: var(--c-blue); }

.bg-deep .facility p, .bg-navy .facility p,
.bg-deep .card-soft p, .bg-navy .card-soft p { color: var(--c-muted); }

/* Inside a blue band the card icons follow the band, not the green accent */
.bg-deep .facility .ico, .bg-navy .facility .ico {
  background: var(--c-blue-light); color: var(--c-blue);
}
.bg-deep .facility:hover, .bg-navy .facility:hover {
  border-color: transparent; box-shadow: 0 14px 34px rgba(0, 0, 0, .22); transform: translateY(-4px);
}

/* ==================================================================
   FACILITY CARD - blue surface, white ink
   The icon chip stays mint/green so the palette's second colour still
   reads, and it lifts well off the blue.
   ================================================================== */
.facility {
  background: linear-gradient(135deg, #00437A 0%, #0A6FB8 100%);
  border-color: transparent;
}
.facility h3 { color: #fff; }
.facility p  { color: rgba(255, 255, 255, .90); }
.facility .ico { background: var(--c-mint); color: var(--c-green-deep); }
.facility:hover {
  border-color: transparent;
  box-shadow: 0 16px 36px rgba(0, 67, 122, .34);
  transform: translateY(-4px);
}
.facility:hover .ico { background: #fff; }

/* Links built on the card keep the white ink too */
a.facility h3, a.facility:hover h3 { color: #fff; }

/* Inside a dark band the card is already white, so its icon chip must not
   turn white on hover as well - keep the blue chip there. */
.bg-deep .facility:hover .ico, .bg-navy .facility:hover .ico { background: var(--c-blue-light); }

/* ==================================================================
   COUNTRY CARD
   Background photo behind a dark wash, so the copy stays readable.
   ================================================================== */
.country-card {
  background-size: cover; background-position: center;
  isolation: isolate;
}
.country-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, rgba(0, 42, 71, .93) 0%, rgba(0, 67, 122, .88) 55%, rgba(10, 111, 184, .82) 100%);
}
.country-card > * { position: relative; z-index: 2; }


/* ==================================================================
   FACILITY CARD ALIGNMENT
   The component appears in two shapes: icon + heading + description,
   and icon + heading only. Top-aligning both left the heading-only
   variant stranded at the top of a tall card, so centre that one.
   ================================================================== */
.facility { align-items: flex-start; }
.facility:not(:has(p)) { align-items: center; }
.facility:not(:has(p)) h3 { margin-bottom: 0; }

/* The heading-only card has nothing below the text, so it does not need
   the taller padding the description variant does. */
.facility:not(:has(p)) { padding: 18px var(--s-3); }

/* ==================================================================
   TREAT-ITEM ON A DARK BAND
   The white card reads as a hole punched in a dark section, so inside
   .bg-deep / .bg-navy it becomes a translucent tile with white ink.
   ================================================================== */
/* White tile on the dark band, with the ink flipped back to blue - the same
   inversion the .facility card uses inside .bg-deep. */
.bg-deep .treat-item, .bg-navy .treat-item {
  background: #fff;
  border-color: transparent;
}
.bg-deep .treat-item h3, .bg-navy .treat-item h3 { color: var(--c-blue); }
.bg-deep .treat-item p,  .bg-navy .treat-item p  { color: var(--c-muted); }
.bg-deep .treat-item i,  .bg-navy .treat-item i  { color: var(--c-blue); }

.bg-deep .treat-item:hover, .bg-navy .treat-item:hover {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .24);
  transform: translateX(5px);
}

/* ==================================================================
   TREAT-ITEM ALIGNMENT
   Two shapes again: icon + heading + description, and icon + heading.
   The description variant wants the icon pinned to the first line; the
   heading-only variant wants icon and text sitting on one line together.
   ================================================================== */
.treat-item:not(:has(p)) { align-items: center; }
.treat-item:not(:has(p)) i  { margin-top: 0; }
.treat-item:not(:has(p)) h3 { margin-bottom: 0; }

/* An outline button drawn in brand blue disappears on a blue band, so
   inside .bg-deep / .bg-navy it switches to the white outline treatment. */
.bg-deep .btn-outline-brand, .bg-navy .btn-outline-brand {
  border-color: rgba(255, 255, 255, .6); color: #fff; background: transparent;
}
.bg-deep .btn-outline-brand:hover, .bg-navy .btn-outline-brand:hover {
  background: #fff; color: var(--c-navy); border-color: #fff;
}

/* ==================================================================
   QUALIFICATION CARD  (doctor page, dark band)
   ================================================================== */
.qual-card {
  background: #fff; border-radius: var(--radius); padding: 20px 22px; height: 100%;
  border-left: 4px solid var(--c-blue); transition: all .3s var(--ease);
}
.qual-card h3 { font-size: 1.1rem; color: var(--c-blue); margin-bottom: 4px; }
.qual-card p  { font-size: .88rem; color: var(--c-muted); margin: 0; }
.qual-card:hover { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(0, 0, 0, .24); }

/* ==================================================================
   SECONDARY PERSON CARD  (Dr. Asitha Pratheep)
   Icon beside the name rather than stacked above it, so the block reads
   as one unit and the qualification sits with the name, not as body copy.
   ================================================================== */
.person-mini { display: flex; gap: 16px; align-items: flex-start; }
.person-mini .ico { margin-bottom: 0; flex: 0 0 52px; width: 52px; height: 52px; font-size: 1.3rem; }
.person-mini__body { display: flex; flex-direction: column; min-width: 0; }
.person-mini__body h3 { font-size: 1.05rem; margin: 0 0 2px; }
.person-mini__quals {
  font-family: var(--ff-head); font-weight: 600; font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--c-blue); margin-bottom: 8px;
}
.person-mini__body p { font-size: .88rem; color: var(--c-muted); margin: 0; }

/* ==================================================================
   INFO TILE  (doctor profile: timings, phone, address)
   ================================================================== */
.info-tile {
  display: flex; gap: 14px; align-items: flex-start; height: 100%;
  background: var(--c-blue-faint); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 16px 18px;
  transition: all .3s var(--ease);
}
.info-tile:hover { border-color: var(--c-blue-2); box-shadow: var(--sh-sm); }
.info-tile .ico {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px;
  background: var(--c-blue-light); color: var(--c-blue);
  display: grid; place-items: center; font-size: 1.1rem;
}
.info-tile h3 { font-size: .92rem; margin: 0 0 4px; }
.info-tile p  { font-size: .88rem; color: var(--c-muted); margin: 0; line-height: 1.6; }
.info-tile a  { color: var(--c-navy); font-weight: 600; }

/* .card-soft is height:100% so cards line up across a grid row. When two are
   stacked inside one column that makes each one fill the whole column, which
   leaves a large gap under the content. Opt out for stacked cards. */
.card-soft--auto { height: auto; }

/* ==================================================================
   TREAT-ITEM - blue surface, white ink
   Matches the .facility card so the two list components read as one
   family. The dark-band override further down still flips it back to
   a white tile wherever it sits on .bg-deep / .bg-navy.
   ================================================================== */
.treat-item {
  background: linear-gradient(135deg, #00437A 0%, #0A6FB8 100%);
  border-color: transparent;
}
.treat-item h3 { color: #fff; }
.treat-item p  { color: rgba(255, 255, 255, .90); }
.treat-item i  { color: #6EE7B7; }
.treat-item:hover {
  border-color: transparent;
  box-shadow: 0 16px 36px rgba(0, 67, 122, .34);
  transform: translateY(-4px);
}

/* ==================================================================
   MAP EMBED
   ================================================================== */
.map-frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--sh-lg); border: 1px solid var(--c-border);
  background: var(--c-blue-light);
  aspect-ratio: 16 / 7;
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 767.98px) {
  .map-frame { aspect-ratio: 4 / 3; }
}

/* ==================================================================
   GOOGLE REVIEWS
   ================================================================== */
.stars { display: inline-flex; gap: 3px; color: #F5A623; font-size: 1.05rem; }
.stars--sm { font-size: .88rem; }

.review-summary {
  display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center;
  background: var(--c-blue-faint); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); padding: var(--s-5);
}
.review-summary__score { text-align: center; flex: 0 0 190px; }
.review-summary__score .num {
  display: block; font-family: var(--ff-head); font-weight: 700;
  font-size: 3.4rem; line-height: 1; color: var(--c-navy);
}
.review-summary__score .stars { margin: 10px 0 6px; }
.review-summary__score .lbl { display: block; font-size: .85rem; color: var(--c-muted); }
.review-summary__text { flex: 1 1 320px; }
.review-summary__text h2 { font-size: 1.5rem; margin-bottom: 8px; }
.review-summary__text p { font-size: .95rem; color: var(--c-muted); margin: 0; }

.review-card {
  position: relative; height: 100%;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  padding: var(--s-4); transition: all .35s var(--ease);
}
.review-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: transparent; }
.review-card__mark {
  position: absolute; top: 20px; right: 20px;
  font-size: 1.15rem; color: #4285F4; opacity: .75;
}
.review-card__text {
  font-size: .94rem; color: var(--c-text); margin: 14px 0 20px; line-height: 1.7;
}
.review-card__who { display: flex; align-items: center; gap: 12px; }
.review-card__who img { border-radius: 50%; object-fit: cover; }
.review-card__initial {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  background: var(--g-brand); color: #fff; display: grid; place-items: center;
  font-family: var(--ff-head); font-weight: 600;
}
.review-card__who strong { display: block; font-size: .92rem; color: var(--c-navy); }
.review-card__who small  { font-size: .8rem; color: var(--c-muted); }

@media (max-width: 575.98px) {
  .review-summary { padding: var(--s-3); gap: var(--s-3); }
  .review-summary__score { flex-basis: 100%; }
}

.review-card__for {
  display: inline-block; margin-left: 10px;
  background: var(--c-mint); color: var(--c-green-deep);
  font-family: var(--ff-head); font-weight: 600; font-size: .68rem;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; vertical-align: middle;
}

/* ==================================================================
   PAEDIATRIC FOCUS COMPONENTS
   Added for the condition pages, the parents' guide, the location pages
   and the reworked homepage. Everything below reuses the existing tokens -
   no new colours, no new fonts.
   ================================================================== */

/* ---- Hero: the surgeon, named on every slide ---- */
.hero__doc {
  display: inline-flex; align-items: center; gap: 14px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px; padding: 8px 20px 8px 8px; margin-bottom: var(--s-3);
  max-width: 100%; transition: all .3s var(--ease);
}
.hero__doc:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.hero__doc img {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: top center;
  border: 2px solid rgba(255, 255, 255, .55); flex: 0 0 52px;
}
.hero__doc-name {
  display: block; font-family: var(--ff-head); font-weight: 600;
  font-size: .98rem; color: #fff; line-height: 1.25;
}
.hero__doc-quals {
  display: block; font-size: .72rem; color: rgba(255, 255, 255, .78);
  line-height: 1.4; margin-top: 2px;
}
.hero__doc > i { color: rgba(255, 255, 255, .7); flex: 0 0 auto; }

@media (max-width: 575.98px) {
  .hero__doc { padding: 8px 14px 8px 8px; gap: 10px; }
  .hero__doc img { width: 44px; height: 44px; flex-basis: 44px; }
  .hero__doc-quals { font-size: .66rem; }
  .hero__doc > i { display: none; }
}

/* ---- Doctor role line ---- */
.doc-role {
  font-family: var(--ff-head); font-weight: 600; font-size: 1.02rem;
  color: var(--c-blue); margin: -8px 0 var(--s-2);
}

/* ---- Gold qualification pill ---- */
.qual-pill--gold {
  background: var(--c-gold-soft); border-color: #E4CE86; color: #7A5F12;
}

/* ---- Condition cards ---- */
.cond-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  transition: all .32s var(--ease);
}
.cond-card:hover {
  transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--c-blue-2);
}

/* The picture: the article's own diagram where it has one, otherwise its
   photograph. The category badge sits on the corner of the picture rather
   than above the heading, which buys back the vertical space the picture
   costs. */
.cond-card__media {
  position: relative; display: block; aspect-ratio: 16 / 6;
  background: var(--c-sky-light); overflow: hidden;
  border-bottom: 1px solid var(--c-border);
}
.cond-card__media img,
.cond-card__svg {
  width: 100%; height: 100%; display: block;
  transition: transform .5s var(--ease);
}
/* Photographs fill the band and crop. Diagrams must not crop - a schematic
   with its top and bottom sliced off stops being a schematic - so they scale
   down whole inside it instead. */
.cond-card__media img { object-fit: cover; }
.cond-card__svg {
  object-fit: contain; border: 0; border-radius: 0;
  background: transparent; padding: 5px 0;
}
/* A supplied medical illustration is a diagram too, whatever its file format,
   so it follows the same rule as the SVGs above: fit whole, never crop. The
   16:6 band would otherwise leave a horizontal slice through the middle of a
   kidney and nothing else. */
.cond-card__media img.is-art { object-fit: contain; padding: 4px 0; }
.img-zoom--art { background: #fff; }
.img-zoom--art img { object-fit: contain !important; }
.cond-card:hover .cond-card__media img,
.cond-card:hover .cond-card__svg { transform: scale(1.05); }

.cond-card__ico {
  position: absolute; left: 10px; bottom: 10px;
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--c-blue); font-size: .92rem;
  box-shadow: var(--sh-sm); transition: all .32s var(--ease);
}
.cond-card:hover .cond-card__ico { background: var(--g-brand); color: #fff; }

.cond-card__body {
  display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--s-3);
}
.cond-card h3 { font-size: 1.02rem; margin: 0 0 8px; color: var(--c-navy); }
.cond-card p { font-size: .87rem; color: var(--c-muted); margin: 0 0 14px; flex: 1 1 auto; }
.cond-card__langs {
  display: block; font-size: .72rem; color: var(--c-muted);
  letter-spacing: .02em; margin-bottom: 10px;
}
.cond-card__more {
  font-family: var(--ff-head); font-weight: 600; font-size: .84rem;
  color: var(--c-blue); display: inline-flex; align-items: center; gap: 6px;
}
.cond-card__more i { transition: transform .3s var(--ease); }
.cond-card:hover .cond-card__more i { transform: translateX(5px); }

/* ---- "Does your child have..." ---- */
.concern {
  position: relative; display: flex; align-items: center; gap: 14px; height: 100%;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 16px 44px 16px 16px; transition: all .3s var(--ease);
}
.concern:hover {
  border-color: var(--c-blue-2); box-shadow: var(--sh-md); transform: translateX(4px);
}
.concern__ico {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--c-mint); color: var(--c-green-deep); font-size: 1.05rem;
}
.concern__q {
  font-family: var(--ff-head); font-weight: 500; font-size: .93rem;
  color: var(--c-navy); line-height: 1.45;
}
.concern__arrow {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--c-blue); opacity: .5; transition: all .3s var(--ease);
}
.concern:hover .concern__arrow { opacity: 1; transform: translateY(-50%) translateX(3px); }
.concern--urgent { border-color: #F5C2C7; background: #FFF7F7; }
.concern--urgent .concern__ico { background: #FDE2E4; color: #B02A37; }
.concern--urgent:hover { border-color: #E4606D; }
.concern__flag {
  position: absolute; top: -9px; right: 14px;
  background: #B02A37; color: #fff; font-family: var(--ff-head); font-weight: 600;
  font-size: .64rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
}

/* ---- Red-flag cards (on the dark band) ---- */
.redflag {
  display: flex; gap: 16px; height: 100%;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius); padding: var(--s-3); transition: all .3s var(--ease);
}
.redflag:hover { background: rgba(255, 255, 255, .13); transform: translateY(-4px); }
.redflag__ico {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.2rem;
  background: rgba(255, 120, 120, .22); color: #FFD3D3;
}
.redflag h3 { font-size: 1rem; margin: 0 0 6px; color: #fff; }
.redflag p { font-size: .87rem; margin: 0; color: rgba(255, 255, 255, .82); line-height: 1.6; }

/* ---- Symptom list ---- */
.sym-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sym-list li {
  position: relative; background: #fff; border: 1px solid var(--c-border);
  border-radius: 12px; padding: 13px 16px 13px 44px;
  font-size: .93rem; color: var(--c-text); line-height: 1.6;
  transition: all .28s var(--ease);
}
.sym-list li::before {
  content: '\F26B'; font-family: 'bootstrap-icons';
  position: absolute; left: 15px; top: 12px; color: var(--c-blue); font-size: .95rem;
}
.sym-list li:hover { border-color: var(--c-blue-2); transform: translateX(4px); }

/* ---- "When surgery is needed" numbered items (dark band) ---- */
.when-item {
  display: flex; gap: 16px; height: 100%;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius); padding: var(--s-3);
}
.when-item__n {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .18); color: #fff;
  font-family: var(--ff-head); font-weight: 600; font-size: .9rem;
}
.when-item p { margin: 0; font-size: .92rem; color: rgba(255, 255, 255, .92); line-height: 1.65; }

/* ---- What to expect ---- */
.expect-grid { display: grid; gap: var(--s-2); }
.expect-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: var(--s-3); transition: all .3s var(--ease);
}
.expect-card:hover { border-color: var(--c-green-2); box-shadow: var(--sh-sm); }
.expect-card .ico {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--c-mint); color: var(--c-green-deep); font-size: 1.05rem; margin-bottom: 12px;
}
.expect-card h3 { font-size: 1rem; margin: 0 0 6px; }
.expect-card p { font-size: .89rem; color: var(--c-muted); margin: 0; line-height: 1.65; }

/* ---- Language card on condition pages ---- */
.lang-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  padding: var(--s-3); box-shadow: var(--sh-sm);
}
.lang-card__title {
  font-size: .95rem; color: var(--c-navy); margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px;
}
.lang-card__title i { color: var(--c-blue); }
.lang-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.lang-tab {
  border: 1px solid var(--c-border); background: #fff; color: var(--c-navy);
  font-family: var(--ff-head); font-weight: 500; font-size: .85rem;
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  transition: all .25s var(--ease);
}
.lang-tab:hover { border-color: var(--c-blue-2); background: var(--c-blue-faint); }
.lang-tab.is-active { background: var(--g-brand); color: #fff; border-color: transparent; }
.lang-pane { display: none; }
.lang-pane.is-active { display: block; }
.lang-pane h4 { font-size: 1.02rem; color: var(--c-navy); margin: 0 0 10px; }
.lang-pane p { font-size: .92rem; color: var(--c-text); line-height: 1.85; margin: 0 0 10px; }
.lang-card__wa {
  display: flex; align-items: center; gap: 9px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--c-border);
  font-family: var(--ff-head); font-weight: 500; font-size: .87rem; color: #1EBE5A;
}
.lang-card__wa i { font-size: 1.1rem; }
.lang-card__wa:hover { color: #128C3E; }

/* Without JS every pane is visible rather than hidden - the content is the
   point, and a parent must never lose the Tamil summary to a script error. */
html:not(.js) .lang-pane { display: block; border-top: 1px solid var(--c-border); padding-top: 12px; }
html:not(.js) .lang-tabs { display: none; }

.lang-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.lang-badge {
  background: #fff; border: 1px solid var(--c-border-green); color: var(--c-navy);
  font-family: var(--ff-head); font-weight: 500; font-size: .92rem;
  padding: 9px 22px; border-radius: 999px;
}

/* ---- Doctor strip ---- */
.doc-strip {
  display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--c-border-green);
  border-radius: var(--radius-lg); padding: var(--s-4); box-shadow: var(--sh-sm);
}
.doc-strip__photo { flex: 0 0 190px; border-radius: var(--radius); overflow: hidden; }
.doc-strip__photo img {
  width: 100%; height: auto; display: block; aspect-ratio: 1/1.1;
  object-fit: cover; object-position: top center;
  transition: transform .5s var(--ease);
}
.doc-strip__photo:hover img { transform: scale(1.05); }
.doc-strip__body { flex: 1 1 340px; }
.doc-strip__body h2 { font-size: 1.6rem; margin: 10px 0 4px; }
.doc-strip__role {
  font-family: var(--ff-head); font-weight: 600; font-size: .95rem;
  color: var(--c-blue); margin-bottom: 14px;
}
.doc-strip__quals { margin-bottom: 14px; }
.doc-strip__body p { font-size: .93rem; color: var(--c-muted); margin-bottom: var(--s-2); }

@media (max-width: 575.98px) {
  .doc-strip { padding: var(--s-3); gap: var(--s-3); }
  .doc-strip__photo { flex-basis: 130px; }
}

/* ---- Why-choose items (dark band) ---- */
.why-item {
  display: flex; align-items: center; gap: 13px; height: 100%;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px; padding: 15px 18px;
  font-size: .93rem; color: #fff; transition: all .3s var(--ease);
}
.why-item:hover { background: rgba(255, 255, 255, .14); transform: translateY(-3px); }
.why-item i { color: #7FE3BC; font-size: 1.1rem; flex: 0 0 auto; }

.stat-box--dark { background: rgba(255, 255, 255, .08); border-radius: var(--radius); }
.stat-box--dark .num {
  background: linear-gradient(90deg, #fff, #9FD4FF);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-box--dark .lbl { color: rgba(255, 255, 255, .75); }

/* ---- Scope items ---- */
.scope-item {
  display: flex; align-items: center; gap: 12px; height: 100%;
  background: #fff; border: 1px solid var(--c-border); border-radius: 12px;
  padding: 12px 14px; transition: all .28s var(--ease);
}
.scope-item:hover { border-color: var(--c-blue-2); box-shadow: var(--sh-sm); }
.scope-item i { color: var(--c-blue); font-size: 1.15rem; flex: 0 0 auto; }
.scope-item strong {
  display: block; font-family: var(--ff-head); font-weight: 600;
  font-size: .9rem; color: var(--c-navy);
}
.scope-item small { font-size: .78rem; color: var(--c-muted); }

/* ---- Location cards ---- */
.loc-card {
  display: flex; align-items: center; gap: 14px; height: 100%;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: var(--s-3); transition: all .3s var(--ease);
}
.loc-card:hover { border-color: var(--c-blue-2); box-shadow: var(--sh-md); transform: translateY(-4px); }
.loc-card__ico {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--c-blue-light); color: var(--c-blue); font-size: 1.15rem;
}
.loc-card h3 { font-size: 1rem; margin: 0 0 4px; }
.loc-card p { font-size: .84rem; color: var(--c-muted); margin: 0; }
.loc-card > i { margin-left: auto; color: var(--c-blue); opacity: .55; transition: all .3s var(--ease); }
.loc-card:hover > i { opacity: 1; transform: translateX(4px); }

/* ---- Fact tiles on location pages ---- */
.fact-tile {
  background: var(--c-blue-faint); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: var(--s-3); height: 100%;
}
.fact-tile .ico {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: #fff; color: var(--c-blue); font-size: 1.05rem; margin-bottom: 10px;
}
.fact-tile h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); margin: 0 0 4px; }
.fact-tile p { font-family: var(--ff-head); font-weight: 600; font-size: 1rem; color: var(--c-navy); margin: 0; }

/* ---- International steps ---- */
.intl-step {
  display: flex; gap: 14px; height: 100%;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: var(--s-3); transition: all .3s var(--ease);
}
.intl-step:hover { border-color: var(--c-blue-2); box-shadow: var(--sh-sm); }
.intl-step__n {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--g-brand); color: #fff;
  font-family: var(--ff-head); font-weight: 600; font-size: .9rem;
}
.intl-step h3 { font-size: .97rem; margin: 0 0 5px; }
.intl-step p { font-size: .85rem; color: var(--c-muted); margin: 0; }

.intl-lang {
  display: flex; gap: var(--s-3); align-items: flex-start;
  background: #fff; border: 1px solid var(--c-border-green);
  border-radius: var(--radius-lg); padding: var(--s-4);
}
.intl-lang > i { font-size: 1.9rem; color: var(--c-green); flex: 0 0 auto; }
.intl-lang h3 { font-size: 1.15rem; margin: 0 0 8px; }
.intl-lang p { font-size: .93rem; color: var(--c-muted); margin: 0 0 var(--s-2); line-height: 1.75; }

/* ---- Video cards ---- */
.vid-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  overflow: hidden; transition: all .32s var(--ease);
}
.vid-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: var(--c-blue-2); }
.vid-card__media { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; }
.vid-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.vid-card:hover .vid-card__media img { transform: scale(1.06); }
.vid-card__play {
  position: absolute; inset: 0; margin: auto; width: 54px; height: 54px;
  border-radius: 50%; background: rgba(0, 57, 95, .82); color: #fff;
  display: grid; place-items: center; font-size: 1.6rem;
  transition: all .3s var(--ease);
}
.vid-card:hover .vid-card__play { background: var(--c-blue); transform: scale(1.08); }
.vid-card__len {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(0, 0, 0, .72); color: #fff; font-size: .72rem;
  padding: 3px 9px; border-radius: 6px;
}
.vid-card__media--soon {
  display: grid; place-items: center; gap: 8px; align-content: center;
  background: var(--c-blue-faint); border-bottom: 1px solid var(--c-border);
}
.vid-card__soonico { font-size: 1.9rem; color: var(--c-blue); opacity: .55; }
.vid-card__soon {
  font-family: var(--ff-head); font-weight: 500; font-size: .8rem;
  color: var(--c-muted); letter-spacing: .03em;
}
.vid-card__body { padding: var(--s-3); display: flex; flex-direction: column; flex: 1 1 auto; }
.vid-card__body h3 { font-size: 1.02rem; margin: 0 0 8px; }
.vid-card__body p { font-size: .87rem; color: var(--c-muted); margin: 0 0 14px; flex: 1 1 auto; }
.vid-card__link {
  font-family: var(--ff-head); font-weight: 600; font-size: .85rem;
  color: var(--c-blue); display: inline-flex; align-items: center; gap: 6px;
}
.vid-card__link i { transition: transform .3s var(--ease); }
.vid-card:hover .vid-card__link i { transform: translateX(4px); }
.vid-card__wa {
  margin-top: 10px; font-size: .82rem; color: #1EBE5A;
  display: inline-flex; align-items: center; gap: 6px;
}
.vid-card__wa:hover { color: #128C3E; }

/* ---- The consult CTA that closes every condition page ---- */
.consult-cta { background: var(--g-navy); color: #fff; padding: var(--s-10) 0; }
.consult-cta__inner {
  display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap;
  justify-content: space-between;
}
.consult-cta__text { flex: 1 1 420px; }
.consult-cta h2 { color: #fff; font-size: 2rem; margin: 12px 0; }
.consult-cta p { color: rgba(255, 255, 255, .9); font-size: .98rem; margin: 0 0 12px; line-height: 1.75; }
.consult-cta__hours {
  font-size: .88rem !important; color: rgba(255, 255, 255, .75) !important;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.consult-cta__btns { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 12px; }
.consult-cta .eyebrow--light { color: #A8DBFF; background: rgba(255, 255, 255, .14); }
.consult-cta__note {
  margin: var(--s-4) 0 0; padding: var(--s-3);
  background: rgba(255, 120, 120, .14); border-left: 4px solid #FF9E9E;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .88rem; color: rgba(255, 255, 255, .92); line-height: 1.7;
}
.consult-cta__note strong { color: #FFD3D3; }

@media (max-width: 767.98px) {
  .consult-cta { padding: var(--s-8) 0; }
  .consult-cta h2 { font-size: 1.6rem; }
  .consult-cta__btns { width: 100%; }
  .consult-cta__btns .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---- Footer additions ---- */
.footer-links--inline { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.footer-links--inline li { margin: 0; }
.footer-util {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: var(--s-5); padding-top: var(--s-3);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.footer-util a { font-size: .85rem; color: rgba(255, 255, 255, .68); }
.footer-util a:hover { color: #fff; }

/* ---- Mobile bar: four actions ---- */
.mobile-bar { grid-template-columns: repeat(4, 1fr); }
.mobile-bar a { font-size: .68rem; }

@media (max-width: 359.98px) {
  .mobile-bar a { font-size: .62rem; }
  .mobile-bar a i { font-size: 1.1rem; }
}

/* ==================================================================
   HEALTH LIBRARY
   The article outline, the review metadata, and the library index.
   ================================================================== */

/* ---- Jump-link contents box ---- */
.toc {
  background: var(--c-blue-faint); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); padding: var(--s-3) var(--s-4);
}
.toc__head {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-muted); margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px;
}
.toc__head i { color: var(--c-blue); }
.toc__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 8px 26px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  counter-reset: toc;
}
.toc__list li { counter-increment: toc; }
.toc__list a {
  display: flex; align-items: baseline; gap: 9px;
  font-family: var(--ff-head); font-weight: 500; font-size: .93rem;
  color: var(--c-navy); padding: 4px 0;
}
.toc__list a::before {
  content: counter(toc); flex: 0 0 auto;
  font-size: .72rem; font-weight: 600; color: var(--c-blue);
  min-width: 15px;
}
.toc__list a:hover { color: var(--c-blue); text-decoration: underline; }

/* Anchor targets must clear the sticky header, or a jump link lands with the
   heading hidden underneath it. */
[id="overview"], [id="symptoms"], [id="diagnosis"], [id="treatment"],
[id="surgery"], [id="outlook"], [id="prevention"], [id="living-with"],
[id="questions"] { scroll-margin-top: 96px; }

/* ---- Article review metadata ---- */
.artmeta {
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); padding: var(--s-4);
}
.artmeta__review { display: flex; gap: 16px; align-items: flex-start; }
.artmeta__ico {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.25rem;
  background: var(--c-mint); color: var(--c-green-deep);
}
.artmeta__by { margin: 0 0 3px; font-size: .96rem; color: var(--c-text); }
.artmeta__by strong { color: var(--c-navy); }
.artmeta__date { margin: 0; font-size: .85rem; color: var(--c-muted); }

.artmeta__sources {
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
}
.artmeta__sources h2 { color: var(--c-navy); margin-bottom: 8px; }
.artmeta__sources p { font-size: .89rem; color: var(--c-muted); margin-bottom: 10px; }
.artmeta__sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.artmeta__sources a {
  font-size: .89rem; color: var(--c-blue);
  display: inline-flex; align-items: center; gap: 6px;
}
.artmeta__sources a i { font-size: .72rem; opacity: .7; }
.artmeta__sources a:hover { text-decoration: underline; }

.artmeta__note {
  margin: var(--s-3) 0 0; padding: var(--s-3);
  background: var(--c-blue-faint); border-left: 4px solid var(--c-blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .9rem; line-height: 1.75; color: var(--c-text);
}
.artmeta__note strong { color: var(--c-navy); }

@media (max-width: 575.98px) {
  .artmeta { padding: var(--s-3); }
  .toc { padding: var(--s-3); }
}

/* ---- Library index: search + facets ---- */
.lib-search { position: relative; max-width: 640px; margin: 0 auto var(--s-4); }
.lib-search input {
  width: 100%; border: 1px solid var(--c-border); border-radius: 999px;
  padding: 15px 52px 15px 22px; font-size: 1rem; font-family: var(--ff-body);
  color: var(--c-text); background: #fff; transition: all .25s var(--ease);
}
.lib-search input:focus {
  outline: none; border-color: var(--c-blue-2);
  box-shadow: 0 0 0 4px rgba(10, 130, 216, .13);
}
.lib-search__ico {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  color: var(--c-muted); font-size: 1.1rem; pointer-events: none;
}

.lib-facets { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-bottom: var(--s-3); }
.lib-facet {
  border: 1px solid var(--c-border); background: #fff; color: var(--c-navy);
  font-family: var(--ff-head); font-weight: 500; font-size: .87rem;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .25s var(--ease);
}
.lib-facet:hover { border-color: var(--c-blue-2); background: var(--c-blue-faint); }
.lib-facet.is-on { background: var(--g-brand); color: #fff; border-color: transparent; }
.lib-facet__n {
  font-size: .74rem; background: var(--c-blue-light); color: var(--c-blue);
  padding: 1px 8px; border-radius: 999px; font-weight: 600;
}
.lib-facet.is-on .lib-facet__n { background: rgba(255,255,255,.25); color: #fff; }

.lib-alpha {
  display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
  margin-bottom: var(--s-4);
}
.lib-alpha button {
  min-width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--c-border); background: #fff;
  font-family: var(--ff-head); font-weight: 600; font-size: .82rem;
  color: var(--c-navy); cursor: pointer; transition: all .2s var(--ease);
}
.lib-alpha button:hover:not(:disabled) { border-color: var(--c-blue-2); background: var(--c-blue-faint); }
.lib-alpha button.is-on { background: var(--c-blue); color: #fff; border-color: transparent; }
.lib-alpha button:disabled { opacity: .3; cursor: default; }

.lib-count {
  text-align: center; font-size: .9rem; color: var(--c-muted);
  margin-bottom: var(--s-3);
}
.lib-empty {
  text-align: center; padding: var(--s-8) var(--s-3); color: var(--c-muted);
}
.lib-empty i { font-size: 2.2rem; color: var(--c-border); display: block; margin-bottom: 12px; }

/* Library entry rows */
.lib-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.lib-item {
  display: flex; align-items: flex-start; gap: 13px; height: 100%;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 15px 17px; transition: all .28s var(--ease);
}
.lib-item:hover { border-color: var(--c-blue-2); box-shadow: var(--sh-sm); transform: translateX(3px); }
.lib-item__ico {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px;
  display: grid; place-items: center; font-size: .98rem;
  background: var(--c-blue-light); color: var(--c-blue);
}
.lib-item__b { min-width: 0; }
.lib-item h3 { font-size: .97rem; margin: 0 0 3px; color: var(--c-navy); }
.lib-item p { font-size: .83rem; color: var(--c-muted); margin: 0; }
.lib-item__type {
  display: inline-block; margin-top: 6px;
  font-family: var(--ff-head); font-weight: 600; font-size: .66rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  background: var(--c-mint); color: var(--c-green-deep);
}
.lib-item__type--condition { background: var(--c-blue-light); color: var(--c-blue); }
.lib-item__type--procedure { background: var(--c-mint);       color: var(--c-green-deep); }
.lib-item__type--test      { background: var(--c-sky-light);  color: #0369A1; }

/* Category cards at the top of the library */
.libcat {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: var(--s-3); transition: all .3s var(--ease);
}
.libcat:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--c-blue-2); }
.libcat__ico {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--c-blue-light); color: var(--c-blue); font-size: 1.3rem; margin-bottom: 13px;
}
.libcat h3 { font-size: 1.03rem; margin: 0 0 6px; }
.libcat p { font-size: .87rem; color: var(--c-muted); margin: 0 0 12px; flex: 1 1 auto; }
.libcat__n { font-family: var(--ff-head); font-weight: 600; font-size: .84rem; color: var(--c-blue); }

/* ---- Hand-drawn diagrams ---- */
.svg-fig { margin: 0; }
.svg-art {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  background: var(--c-sky-light);
}
.svg-fig figcaption {
  margin-top: 12px; font-size: .9rem; color: var(--c-muted); line-height: 1.6;
}
.svg-key {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: .78rem; color: var(--c-muted);
}
.svg-key li { display: inline-flex; align-items: center; gap: 6px; }
.svg-key__d { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.svg-key__d--blue { background: #0066B3; }
.svg-key__d--bad  { background: #C0504A; }
.svg-key__d--good { background: #0E9F6E; }
.svg-key__d--amber{ background: #D9A441; }

/* ---- Home icon in the nav ---- */
.nav-home {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  color: var(--c-text); font-size: 1.02rem;
  transition: all .25s var(--ease);
}
.nav-home:hover { background: var(--c-blue-light); color: var(--c-blue); }
.nav-home.active { background: var(--g-brand); color: #fff; }
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .nav-home { width: 32px; height: 32px; font-size: .95rem; }
}

/* A labelled illustration must not be cropped or zoomed - the labels sit
   close to the edges, and .img-zoom's hover scale pushes them out of frame. */
.img-zoom--art:hover img { transform: none; }
.cond-card:hover .cond-card__media img.is-art { transform: none; }