/* ==========================================================================
   site.css — Clear Vision Eye Hospital
   Structural components: top bar, header/nav, hero, section patterns,
   footer, sticky mobile action bar. Loaded after theme.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. UTILITY TOP BAR
   -------------------------------------------------------------------------- */
.topbar{
  background:linear-gradient(100deg,var(--brand-800),var(--brand-700) 60%,var(--brand-600));
  color:#cfe0f2;
  font-size:var(--fs-sm);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); min-height:42px; flex-wrap:wrap;
}
.topbar a{ color:#e8f1fb; }
.topbar a:hover{ color:#fff; }
.topbar__list{ display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap; }
.topbar__item{ display:inline-flex; align-items:center; gap:.45rem; }
.topbar__item svg{ width:15px; height:15px; color:var(--gold-300); flex:none; }
.topbar__lang{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.22rem .7rem; border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r-pill); font-weight:600; font-size:var(--fs-xs);
  transition:background var(--fast),border-color var(--fast);
}
.topbar__lang:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); }
@media (max-width:820px){ .topbar{ display:none; } }

/* --------------------------------------------------------------------------
   2. HEADER + NAV
   -------------------------------------------------------------------------- */
.header{
  position:sticky; top:0; z-index:900;
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--fast),background var(--fast);
}
.header.is-stuck{ box-shadow:0 6px 26px -14px rgba(10,40,80,.4); background:rgba(255,255,255,.98); }
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); min-height:var(--header-h);
}

/* Logo */
.logo{ display:inline-flex; align-items:center; gap:.7rem; flex:none; }
.logo:hover{ color:inherit; }
.logo__mark{
  width:44px; height:44px; flex:none;
  border-radius:13px;
  background:linear-gradient(140deg,var(--brand-500),var(--brand-700));
  display:grid; place-items:center;
  box-shadow:0 8px 18px -8px rgba(26,95,180,.85),inset 0 1px 0 rgba(255,255,255,.3);
}
.logo__mark svg{ width:27px; height:27px; color:#fff; }
.logo__text{ display:flex; flex-direction:column; line-height:1.14; }
.logo__name{ font-size:1.16rem; font-weight:700; letter-spacing:-.03em; color:var(--ink); }
.logo__name b{ color:var(--brand-600); font-weight:700; }
.logo__tag{
  font-size:.62rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gold-500);
}

/* The hospital's own logo image (identical file to clearvisioneyehospital.com), used in
   place of the classes above. It is a single wide raster banner (eye photo + Gujarati
   wordmark) with no transparency, so it is sized by height with width:auto to preserve
   its own aspect ratio — the same technique the live site's header uses (height:50px). */
.logo__img{ height:44px; width:auto; max-width:100%; border-radius:6px; display:block; }
.logo__img--lg{ height:58px; }
.logo__img--sm{ height:36px; }

/* Nav */
.nav{ display:flex; align-items:center; gap:.15rem; }
.nav__link{
  position:relative;
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.62rem .82rem;
  font-size:.95rem; font-weight:600; color:var(--text);
  border-radius:var(--r-sm);
  transition:color var(--fast),background var(--fast);
}
.nav__link:hover,.nav__link[aria-expanded="true"]{ color:var(--brand-600); background:var(--surface-2); }
.nav__link svg{ width:14px; height:14px; transition:transform var(--fast); }
.nav__link[aria-expanded="true"] svg{ transform:rotate(180deg); }
.nav__link.is-active{ color:var(--brand-600); }
.nav__link.is-active::after{
  content:""; position:absolute; left:.82rem; right:.82rem; bottom:.3rem;
  height:2.5px; border-radius:2px;
  background:linear-gradient(90deg,var(--brand-500),var(--gold-500));
}
.header__cta{ display:flex; align-items:center; gap:.6rem; flex:none; }

/* Mega menu */
.has-mega{ position:relative; }
.mega{
  position:absolute; top:calc(100% + 12px); left:50%;
  transform:translateX(-50%) translateY(-8px);
  width:min(92vw,880px);
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--e4);
  padding:var(--sp-5);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--fast),transform var(--fast),visibility var(--fast);
  z-index:950;
}
.has-mega:hover .mega,
.has-mega:focus-within .mega,
.mega.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mega__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem var(--sp-4); }
.mega__item{
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.7rem .8rem; border-radius:var(--r-md);
  transition:background var(--fast);
}
.mega__item:hover{ background:var(--surface-2); }
.mega__ico{
  width:38px; height:38px; flex:none; border-radius:11px;
  display:grid; place-items:center;
  background:linear-gradient(140deg,#e9f1fd,#d8e7fa); color:var(--brand-600);
}
.mega__ico svg{ width:20px; height:20px; }
.mega__t{ font-size:.94rem; font-weight:650; color:var(--ink); line-height:1.3; }
.mega__d{ font-size:.79rem; color:var(--text-2); line-height:1.45; margin-top:.12rem; }
.mega__foot{
  margin-top:var(--sp-4); padding-top:var(--sp-4);
  border-top:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;
}

/* Burger */
.burger{
  display:none; width:44px; height:44px;
  border-radius:var(--r-md); border:1px solid var(--line);
  background:#fff; place-items:center; flex:none;
}
.burger svg{ width:22px; height:22px; color:var(--ink); }

@media (max-width:1080px){
  .nav,.header__cta .btn--ghost{ display:none; }
  .burger{ display:grid; }
}

/* Below this width the logo, the "Book appointment" button and the burger no
   longer fit on one line, and the button's nowrap label was being clipped by
   the body's overflow-x:hidden — it read "Book appoin…" on a 360px phone.
   The sticky action bar at the bottom of the screen already carries Call,
   Book and WhatsApp at these widths, so the header button is redundant here
   rather than merely cramped. */
@media (max-width:560px){
  .header__cta .btn--primary{ display:none; }
}
/* Between 560 and 700 it fits, but only just — trim the padding so it never
   crowds the logo. */
@media (min-width:561px) and (max-width:700px){
  .header__cta .btn--primary{ padding-inline:1rem; }
  .logo__tag{ letter-spacing:.1em; }
}

/* Mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:1000;
  visibility:hidden; pointer-events:none;
}
.drawer.is-open{ visibility:visible; pointer-events:auto; }
.drawer__scrim{
  position:absolute; inset:0;
  background:rgba(10,25,45,.5); backdrop-filter:blur(3px);
  opacity:0; transition:opacity var(--slow);
}
.drawer.is-open .drawer__scrim{ opacity:1; }
.drawer__panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(90vw,400px);
  background:#fff;
  box-shadow:var(--e4);
  padding:var(--sp-5) var(--sp-5) var(--sp-7);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform var(--slow);
}
.drawer.is-open .drawer__panel{ transform:none; }
.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--sp-5);
}
.drawer__close{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface-2);
}
.drawer__close svg{ width:20px; height:20px; }
.drawer__link{
  display:block; padding:.85rem .2rem;
  font-size:1.02rem; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--line-soft);
}
.drawer__link:hover{ color:var(--brand-600); }
.drawer__sub{ padding:.1rem 0 .6rem .9rem; }
.drawer__sub a{
  display:block; padding:.46rem 0;
  font-size:.92rem; font-weight:500; color:var(--text-2);
}
.drawer__sub a:hover{ color:var(--brand-600); }
.drawer__group summary{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem .2rem; cursor:pointer; list-style:none;
  font-size:1.02rem; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--line-soft);
}
.drawer__group summary::-webkit-details-marker{ display:none; }
.drawer__group summary svg{ width:16px; height:16px; transition:transform var(--fast); }
.drawer__group[open] summary svg{ transform:rotate(180deg); }

/* --------------------------------------------------------------------------
   3. HERO
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  padding-block:clamp(3rem,2rem + 5vw,5.5rem) clamp(3.5rem,2.4rem + 5vw,6rem);
  background:
    radial-gradient(1000px 620px at 6% -8%,rgba(36,114,214,.34),transparent 62%),
    radial-gradient(820px 560px at 100% 8%,rgba(200,134,10,.20),transparent 58%),
    radial-gradient(700px 500px at 60% 108%,rgba(14,154,171,.20),transparent 60%),
    linear-gradient(158deg,var(--ink) 0%,#102a41 48%,var(--brand-900) 100%);
  color:#dbe8f4;
  overflow:hidden;
  isolation:isolate;
}
/* Soft concentric "iris" motif, drawn in CSS only */
.hero::before{
  content:""; position:absolute; z-index:-1;
  right:-14%; top:-24%;
  width:min(760px,88vw); aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(36,114,214,.30) 0 21%,transparent 22%),
    radial-gradient(circle,transparent 0 33%,rgba(224,173,58,.16) 34% 35%,transparent 36%),
    radial-gradient(circle,transparent 0 47%,rgba(255,255,255,.09) 48% 49%,transparent 50%),
    radial-gradient(circle,transparent 0 63%,rgba(36,114,214,.14) 64% 66%,transparent 67%);
  filter:blur(.4px);
  opacity:.9;
  pointer-events:none;
}
.hero::after{
  content:""; position:absolute; z-index:-1; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.75),transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.75),transparent 72%);
  pointer-events:none;
}
.hero h1{ color:#fff; }
.hero__grid{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:clamp(2rem,1rem + 3.5vw,4rem);
  align-items:center;
}
@media (max-width:980px){ .hero__grid{ grid-template-columns:1fr; } }

.hero__kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.42rem .95rem .42rem .5rem;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:600; color:#e8f1fb;
  backdrop-filter:blur(10px);
  margin-bottom:var(--sp-5);
}
.hero__kicker .badge{ background:var(--gold-400); color:#3a2803; }
.hero__sub{
  font-size:var(--fs-lg); color:#b8cee2; line-height:1.75;
  max-width:56ch; margin-top:var(--sp-4);
}
.hero__actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:var(--sp-6); }
.hero__chips{ display:flex; gap:.55rem; flex-wrap:wrap; margin-top:var(--sp-6); }

/* Hero appointment card */
.appt-card{
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--r-xl);
  padding:clamp(1.4rem,1rem + 1.4vw,2rem);
  box-shadow:var(--e4);
  color:var(--text);
}
.appt-card__head{ margin-bottom:var(--sp-4); }
.appt-card__head h2{ font-size:1.4rem; letter-spacing:-.025em; }
.appt-card__head p{ font-size:var(--fs-sm); color:var(--text-2); margin-top:.28rem; }
.appt-card form{ display:grid; gap:.85rem; }
.appt-card__row{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
@media (max-width:420px){ .appt-card__row{ grid-template-columns:1fr; } }
.appt-card__trust{
  display:flex; align-items:center; gap:.45rem; justify-content:center;
  margin-top:.3rem; font-size:var(--fs-xs); color:var(--text-3);
}
.appt-card__trust svg{ width:14px; height:14px; color:var(--success); flex:none; }

/* --------------------------------------------------------------------------
   4. STATS BAR
   -------------------------------------------------------------------------- */
.stats{
  position:relative; z-index:5;
  margin-top:calc(var(--section-y) * -.5);
}
.stats__inner{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--e3);
  padding:clamp(1.5rem,1rem + 1.6vw,2.4rem);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--sp-4);
}
@media (max-width:900px){ .stats__inner{ grid-template-columns:repeat(2,1fr); gap:var(--sp-5); } }
@media (max-width:420px){ .stats__inner{ grid-template-columns:1fr; } }
.stat{ text-align:center; position:relative; padding-inline:.5rem; }
.stat + .stat::before{
  content:""; position:absolute; left:0; top:14%; bottom:14%;
  width:1px; background:var(--line);
}
@media (max-width:900px){ .stat + .stat::before{ display:none; } }
.stat__num{
  font-size:clamp(1.75rem,1.4rem + 1.5vw,2.5rem);
  font-weight:700; letter-spacing:-.035em;
  line-height:1.05;
  background:linear-gradient(135deg,var(--brand-600),var(--brand-800));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.stat__num.is-gold{ background:linear-gradient(135deg,var(--gold-400),var(--gold-600)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat__label{ font-size:var(--fs-sm); color:var(--text-2); margin-top:.3rem; font-weight:500; }

/* --------------------------------------------------------------------------
   5. SERVICE / TREATMENT CARDS
   -------------------------------------------------------------------------- */
.svc{
  display:flex; flex-direction:column; gap:var(--sp-3);
  position:relative; overflow:hidden;
}
.svc::after{
  content:""; position:absolute; inset:auto -40% -55% auto;
  width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(26,95,180,.07),transparent 68%);
  transition:transform var(--slow);
}
.svc:hover::after{ transform:scale(1.35); }
.svc h3{ font-size:1.12rem; }
.svc p{ font-size:.93rem; color:var(--text-2); line-height:1.65; }
.svc__list{ display:flex; flex-direction:column; gap:.4rem; margin-top:.15rem; }
.svc__list li{
  display:flex; align-items:flex-start; gap:.5rem;
  font-size:.87rem; color:var(--text-2);
}
.svc__list svg{ width:15px; height:15px; color:var(--success); flex:none; margin-top:.24rem; }
.svc__foot{ margin-top:auto; padding-top:var(--sp-3); }
.svc__price{
  font-size:var(--fs-sm); font-weight:600; color:var(--gold-600);
}

/* --------------------------------------------------------------------------
   6. FEATURE / WHY BLOCKS
   -------------------------------------------------------------------------- */
.feature{ display:flex; gap:var(--sp-4); align-items:flex-start; }
.feature h3{ font-size:1.06rem; margin-bottom:.35rem; }
.feature p{ font-size:.92rem; color:var(--text-2); line-height:1.66; }
.section--ink .feature p{ color:#a9c1d8; }

/* Split media/text row */
.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:center;
}
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
.split--flip .split__media{ order:2; }
@media (max-width:900px){ .split--flip .split__media{ order:0; } }

.media-frame{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--e3); background:var(--surface-3);
  aspect-ratio:4/3;
}
.media-frame img{ width:100%; height:100%; object-fit:cover; }
.media-frame--tall{ aspect-ratio:3/4; }
.media-badge{
  position:absolute; left:var(--sp-4); bottom:var(--sp-4);
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
  border-radius:var(--r-lg);
  padding:.75rem 1.1rem;
  box-shadow:var(--e2);
  display:flex; align-items:center; gap:.7rem;
}
.media-badge svg{ width:24px; height:24px; color:var(--brand-600); flex:none; }
.media-badge__n{ font-size:1.15rem; font-weight:700; color:var(--ink); line-height:1.1; }
.media-badge__l{ font-size:var(--fs-xs); color:var(--text-2); }

/* Checklist */
.checks{ display:flex; flex-direction:column; gap:.75rem; }
.checks li{ display:flex; align-items:flex-start; gap:.7rem; font-size:.96rem; }
.checks svg{
  width:21px; height:21px; flex:none; margin-top:.16rem;
  color:var(--brand-600);
}
.section--ink .checks svg{ color:var(--gold-300); }
.checks b{ color:var(--ink); font-weight:650; }
.section--ink .checks b{ color:#fff; }

/* --------------------------------------------------------------------------
   7. STEPS / JOURNEY
   -------------------------------------------------------------------------- */
.steps{ counter-reset:step; display:grid; gap:var(--sp-5); grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.step{ position:relative; padding-top:var(--sp-5); }
.step::before{
  counter-increment:step; content:counter(step);
  position:absolute; top:0; left:0;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  font-size:.95rem; font-weight:700; color:#fff;
  background:linear-gradient(140deg,var(--brand-500),var(--brand-700));
  box-shadow:0 8px 16px -8px rgba(26,95,180,.8);
}
.step{ padding-top:52px; }
.step h3{ font-size:1.02rem; margin-bottom:.3rem; }
.step p{ font-size:.9rem; color:var(--text-2); line-height:1.62; }

/* --------------------------------------------------------------------------
   8. BRANCH CARDS
   -------------------------------------------------------------------------- */
.branch{
  display:flex; flex-direction:column; gap:.55rem;
  padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:#fff; box-shadow:var(--e1);
  transition:transform var(--slow),box-shadow var(--slow),border-color var(--slow);
}
.branch:hover{ transform:translateY(-4px); box-shadow:var(--e3); border-color:var(--brand-300); }
.branch__top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.branch__name{ font-size:1.02rem; font-weight:700; color:var(--ink); }
.branch__city{ font-size:var(--fs-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.branch__addr{ font-size:.86rem; color:var(--text-2); line-height:1.55; }
.branch__actions{ display:flex; gap:.5rem; margin-top:auto; padding-top:.5rem; flex-wrap:wrap; }
.branch__actions .btn{ flex:1 1 auto; }

/* --------------------------------------------------------------------------
   9. TESTIMONIALS
   -------------------------------------------------------------------------- */
.quote{
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding:var(--sp-5);
  border-radius:var(--r-lg);
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--e1);
}
.quote__stars{ display:flex; gap:2px; color:var(--gold-400); }
.quote__stars svg{ width:17px; height:17px; }
.quote__text{ font-size:.97rem; line-height:1.72; color:var(--text); }
.quote__who{ display:flex; align-items:center; gap:.7rem; margin-top:auto; padding-top:var(--sp-2); }
.quote__avatar{
  width:40px; height:40px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:linear-gradient(140deg,var(--brand-400),var(--brand-700));
  color:#fff; font-weight:700; font-size:.92rem;
}
.quote__name{ font-size:.92rem; font-weight:650; color:var(--ink); line-height:1.25; }
.quote__meta{ font-size:var(--fs-xs); color:var(--text-3); }

/* --------------------------------------------------------------------------
   10. INSURANCE / LOGO STRIP
   -------------------------------------------------------------------------- */
.logos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:.75rem;
}
.logos li{
  display:grid; place-items:center; text-align:center;
  padding:.95rem .8rem;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md);
  font-size:.86rem; font-weight:600; color:var(--text-2);
  min-height:62px; line-height:1.35;
  transition:border-color var(--fast),color var(--fast),box-shadow var(--fast);
}
.logos li:hover{ border-color:var(--brand-300); color:var(--brand-700); box-shadow:var(--e1); }

/* --------------------------------------------------------------------------
   11. FAQ (accordion)
   -------------------------------------------------------------------------- */
.faq{ display:flex; flex-direction:column; gap:.75rem; }
.faq details{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:border-color var(--fast),box-shadow var(--fast);
}
.faq details[open]{ border-color:var(--brand-300); box-shadow:var(--e2); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:1.05rem 1.3rem;
  font-size:1rem; font-weight:650; color:var(--ink);
  cursor:pointer; list-style:none;
  transition:color var(--fast);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--brand-600); }
.faq summary::after{
  content:""; flex:none; width:20px; height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a5fb4' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--slow);
}
.faq details[open] summary::after{ transform:rotate(135deg); }
.faq__body{
  padding:0 1.3rem 1.2rem;
  font-size:.95rem; color:var(--text-2); line-height:1.75;
}
.faq__body p + p{ margin-top:.7rem; }
.faq__body ul{ margin-top:.6rem; display:flex; flex-direction:column; gap:.35rem; }
.faq__body li{ padding-left:1.1rem; position:relative; }
.faq__body li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--gold-400);
}

/* --------------------------------------------------------------------------
   11b. USP BAND — the "only hospital with 20+ branches" callout
   -------------------------------------------------------------------------- */
.usp-band{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:var(--sp-5);
  border-radius:var(--r-xl);
  padding:clamp(1.6rem,1.1rem + 2vw,2.6rem);
  background:
    radial-gradient(600px 300px at 100% 0%,rgba(200,134,10,.14),transparent 60%),
    linear-gradient(100deg,#fffaf0,#fff 55%);
  border:1.5px solid #f2e0b4;
  box-shadow:var(--e2);
}
.usp-band__icon{
  flex:none; width:68px; height:68px; border-radius:20px;
  display:grid; place-items:center;
  background:linear-gradient(140deg,var(--gold-400),var(--gold-600));
  box-shadow:0 12px 26px -10px rgba(200,134,10,.65),inset 0 1px 0 rgba(255,255,255,.4);
}
.usp-band__icon svg{ width:34px; height:34px; color:#fff; }
.usp-band__body{ flex:1; min-width:0; }
.usp-band__eyebrow{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold-600); margin-bottom:.3rem;
}
.usp-band__title{
  font-size:clamp(1.15rem,1.02rem + .6vw,1.5rem);
  font-weight:700; letter-spacing:-.02em; color:var(--ink); line-height:1.3;
}
.usp-band__title b{ color:var(--gold-600); }
.usp-band__sub{ font-size:.94rem; color:var(--text-2); margin-top:.35rem; line-height:1.6; }
.usp-band__cta{ flex:none; }
@media (max-width:720px){
  .usp-band{ flex-direction:column; text-align:center; }
  .usp-band__cta{ width:100%; }
  .usp-band__cta .btn{ width:100%; }
}

/* Small pill hung off a stat card to reinforce the same claim numerically */
.stat__badge{
  display:inline-block; margin-top:.4rem;
  padding:.18rem .6rem; border-radius:var(--r-pill);
  font-size:.68rem; font-weight:700; letter-spacing:.04em;
  background:#fdf1d6; color:var(--gold-600);
}

/* --------------------------------------------------------------------------
   11c. GALLERY & GUIDES — patient information sheets, click to enlarge
   -------------------------------------------------------------------------- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:var(--sp-5);
}
.gallery-item{
  display:block; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:#fff; box-shadow:var(--e1); cursor:zoom-in;
  transition:transform var(--slow),box-shadow var(--slow);
}
.gallery-item:hover,.gallery-item:focus-visible{ transform:translateY(-5px); box-shadow:var(--e3); }
.gallery-item img{ width:100%; height:100%; aspect-ratio:3/4.1; object-fit:cover; display:block; }

.lightbox{
  position:fixed; inset:0; z-index:1100;
  display:none; align-items:center; justify-content:center;
  padding:var(--sp-5);
  background:rgba(10,20,35,.86); backdrop-filter:blur(4px);
}
.lightbox.is-open{ display:flex; }
.lightbox__img{
  max-width:min(760px,92vw); max-height:88vh;
  border-radius:var(--r-md); box-shadow:var(--e4);
  background:#fff;
}
.lightbox__close{
  position:absolute; top:18px; right:18px;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3);
  color:#fff; transition:background var(--fast);
}
.lightbox__close:hover{ background:rgba(255,255,255,.24); }
.lightbox__close svg{ width:22px; height:22px; }
.lightbox__hint{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  color:#cfe0f2; font-size:var(--fs-sm);
}

/* --------------------------------------------------------------------------
   12. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band{
  border-radius:var(--r-xl);
  padding:clamp(2rem,1.4rem + 2.6vw,3.5rem);
  background:
    radial-gradient(700px 400px at 8% 0%,rgba(36,114,214,.42),transparent 60%),
    radial-gradient(600px 400px at 96% 100%,rgba(200,134,10,.30),transparent 58%),
    linear-gradient(140deg,var(--brand-800),var(--ink));
  color:#dbe8f4;
  box-shadow:var(--e3);
  display:grid; grid-template-columns:1.4fr auto;
  gap:var(--sp-5); align-items:center;
}
@media (max-width:820px){ .cta-band{ grid-template-columns:1fr; text-align:center; } }
.cta-band h2{ color:#fff; font-size:var(--fs-2xl); }
.cta-band p{ color:#b8cee2; margin-top:.6rem; }
.cta-band__actions{ display:flex; gap:.7rem; flex-wrap:wrap; }
@media (max-width:820px){ .cta-band__actions{ justify-content:center; } }

/* --------------------------------------------------------------------------
   13. PAGE HERO (inner pages)
   -------------------------------------------------------------------------- */
.pagehero{
  position:relative;
  padding-block:clamp(2.6rem,2rem + 3vw,4.2rem);
  background:
    radial-gradient(760px 420px at 4% 0%,rgba(36,114,214,.30),transparent 62%),
    radial-gradient(620px 380px at 100% 100%,rgba(200,134,10,.18),transparent 58%),
    linear-gradient(150deg,var(--ink),var(--brand-900));
  color:#c9dcee;
  overflow:hidden;
}
.pagehero h1{ color:#fff; font-size:var(--fs-3xl); margin-top:.35rem; }
.pagehero p{ color:#a9c1d8; max-width:64ch; margin-top:var(--sp-3); font-size:var(--fs-lg); }
.pagehero__actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:var(--sp-5); }

/* Breadcrumb */
.crumbs{ display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; font-size:var(--fs-sm); }
.crumbs a{ color:#9fbcd8; }
.crumbs a:hover{ color:#fff; }
.crumbs span{ color:#6f8ba6; }
.crumbs [aria-current]{ color:#e6eef7; font-weight:500; }

/* Prose (article body) */
.prose{ max-width:74ch; }
.prose h2{ font-size:var(--fs-2xl); margin-top:var(--sp-7); margin-bottom:var(--sp-3); }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:var(--fs-xl); margin-top:var(--sp-6); margin-bottom:var(--sp-2); }
.prose p{ margin-bottom:var(--sp-4); color:var(--text-2); line-height:1.8; }
.prose ul{ margin-bottom:var(--sp-4); display:flex; flex-direction:column; gap:.5rem; }
.prose ul li{ position:relative; padding-left:1.5rem; color:var(--text-2); line-height:1.72; }
.prose ul li::before{
  content:""; position:absolute; left:.25rem; top:.66em;
  width:7px; height:7px; border-radius:50%;
  background:linear-gradient(140deg,var(--gold-400),var(--gold-500));
}
.prose strong{ color:var(--ink); font-weight:650; }

/* Answer box — the concise, quotable answer for AI/answer engines */
.answer-box{
  border-left:4px solid var(--gold-400);
  background:linear-gradient(100deg,#fdf8ed,#fbfcfe);
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:var(--sp-4) var(--sp-5);
  margin-bottom:var(--sp-5);
}
.answer-box__label{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--gold-600); margin-bottom:.4rem;
}
.answer-box p{ margin:0; color:var(--text); font-size:1.02rem; line-height:1.72; }

/* Key-facts table */
.facts{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--e1); }
.facts table{ font-size:.93rem; }
.facts th,.facts td{ padding:.8rem 1.1rem; text-align:left; border-bottom:1px solid var(--line-soft); }
.facts th{ background:var(--surface-2); font-weight:650; color:var(--ink); width:42%; }
.facts td{ color:var(--text-2); }
.facts tr:last-child th,.facts tr:last-child td{ border-bottom:0; }

/* Sticky sidebar */
.layout-side{
  display:grid; grid-template-columns:minmax(0,1fr) 340px;
  gap:clamp(2rem,1rem + 3vw,3.5rem); align-items:start;
}
/* minmax(0,1fr), not a bare 1fr: a bare 1fr track has an automatic
   min-content floor, so a long placeholder or a wide <select> option inside a
   card stretched this column past the viewport on narrow phones. */
@media (max-width:1000px){ .layout-side{ grid-template-columns:minmax(0,1fr); } }
.sidebar{ position:sticky; top:calc(var(--header-h) + 20px); display:flex; flex-direction:column; gap:var(--sp-4); }
@media (max-width:1000px){ .sidebar{ position:static; } }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.footer{
  background:linear-gradient(165deg,var(--ink) 0%,#0d2135 60%,var(--brand-900) 100%);
  color:#9db4c9;
  padding-top:var(--section-y);
  font-size:.92rem;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:var(--sp-6) var(--sp-5);
  padding-bottom:var(--sp-6);
}
@media (max-width:940px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr; } }
.footer h3{
  font-size:.83rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; margin-bottom:var(--sp-4);
}
.footer a{ color:#9db4c9; }
.footer a:hover{ color:#fff; }
.footer__links{ display:flex; flex-direction:column; gap:.6rem; }
.footer__links a{ transition:color var(--fast),padding-left var(--fast); }
.footer__links a:hover{ padding-left:4px; }
.footer .logo__name{ color:#fff; }
.footer .logo__name b{ color:var(--brand-300); }
.footer__about{ line-height:1.75; margin-top:var(--sp-4); max-width:44ch; }
.footer__contact{ display:flex; flex-direction:column; gap:.8rem; margin-top:var(--sp-4); }
.footer__contact li{ display:flex; align-items:flex-start; gap:.65rem; line-height:1.6; }
.footer__contact svg{ width:17px; height:17px; color:var(--gold-400); flex:none; margin-top:.22rem; }
.footer__contact a{ color:#cfe0f2; font-weight:500; }

.social{ display:flex; gap:.55rem; margin-top:var(--sp-5); }
.social a{
  width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  transition:background var(--fast),transform var(--fast),border-color var(--fast);
}
.social a:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); transform:translateY(-2px); }
.social svg{ width:18px; height:18px; color:#cfe0f2; }

/* Footer tag cloud of local-SEO links */
.footer__tags{
  padding-block:var(--sp-5);
  border-top:1px solid rgba(255,255,255,.09);
  display:flex; flex-wrap:wrap; gap:.4rem .5rem;
}
.footer__tags a{
  font-size:var(--fs-xs); color:#8ba5bd;
  padding:.24rem .6rem; border-radius:var(--r-pill);
  background:rgba(255,255,255,.05);
  transition:background var(--fast),color var(--fast);
}
.footer__tags a:hover{ background:rgba(255,255,255,.13); color:#fff; }

.footer__bottom{
  border-top:1px solid rgba(255,255,255,.09);
  padding-block:var(--sp-4) var(--sp-5);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap;
  font-size:var(--fs-xs); color:#7d94aa;
}
.footer__bottom nav{ display:flex; gap:var(--sp-4); flex-wrap:wrap; }
.footer__credit{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.footer__credit .dot{ opacity:.5; }
.footer__madeby a{
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--brand-300); font-weight:600;
  transition:color var(--fast);
}
.footer__madeby a:hover{ color:#fff; }
.footer__madeby svg{ width:13px; height:13px; flex:none; }
.footer__disclaimer{
  padding-bottom:var(--sp-5);
  font-size:var(--fs-xs); color:#6b8298; line-height:1.7; max-width:100ch;
}

/* --------------------------------------------------------------------------
   15. STICKY MOBILE ACTION BAR
   -------------------------------------------------------------------------- */
.actionbar{
  position:fixed; left:0; right:0; bottom:0; z-index:880;
  display:none;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 24px -12px rgba(10,40,80,.4);
  padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom,0px));
  gap:.5rem;
}
@media (max-width:820px){
  .actionbar{ display:grid; grid-template-columns:repeat(3,1fr); }
  /* Must reserve as much space as .actionbar actually renders, including its
     own env(safe-area-inset-bottom) padding for the iPhone home-indicator —
     otherwise on notched phones the bar is taller than this gap and the last
     lines of the footer end up tucked behind it. */
  body{ padding-bottom:calc(74px + env(safe-area-inset-bottom,0px)); }
}
.actionbar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.18rem;
  padding:.5rem .3rem; border-radius:var(--r-md);
  font-size:.72rem; font-weight:600; color:var(--text-2);
}
.actionbar a svg{ width:20px; height:20px; }
.actionbar a.is-primary{
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
  color:#fff;
}
.actionbar a.is-wa{ color:#128c4a; }

/* Desktop floating WhatsApp */
/* left, not right: the Tawk.to chat widget (same one used on
   clearvisioneyehospital.com) docks bottom-right by default, so this sits on
   the opposite corner rather than stacking on top of it. */
.wa-float{
  position:fixed; left:20px; bottom:22px; z-index:870;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:#25d366;
  box-shadow:0 12px 28px -10px rgba(37,211,102,.85);
  transition:transform var(--fast);
}
.wa-float:hover{ transform:scale(1.08) translateY(-2px); }
.wa-float svg{ width:29px; height:29px; color:#fff; }
@media (max-width:820px){ .wa-float{ display:none; } }

/* --------------------------------------------------------------------------
   16. MISC
   -------------------------------------------------------------------------- */
.notice{
  display:flex; gap:.8rem; align-items:flex-start;
  padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r-lg);
  background:var(--success-bg); border:1px solid #c6e6d4;
  font-size:.93rem; color:#17603b; line-height:1.66;
}
.notice svg{ width:20px; height:20px; flex:none; margin-top:.15rem; }
.notice--info{ background:#eaf2fd; border-color:#cfe0f8; color:var(--brand-800); }

.tabs{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:var(--sp-5); }
.tab{
  padding:.55rem 1.1rem; border-radius:var(--r-pill);
  border:1px solid var(--line); background:#fff;
  font-size:.9rem; font-weight:600; color:var(--text-2);
  transition:all var(--fast);
}
.tab:hover{ border-color:var(--brand-300); color:var(--brand-700); }
.tab.is-active{
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
  border-color:transparent; color:#fff;
  box-shadow:0 8px 18px -10px rgba(26,95,180,.9);
}
[data-panel][hidden]{ display:none; }