/* =====================================================================
   SITE-WIDE SHARED CSS
   Extracted from index.html / index-en.html / about-doctor.html /
   about-doctor-en.html. Contains ONLY rules that were byte-identical
   (ignoring whitespace/formatting) across the pages that use them.
   Anything that differed even slightly between bn/en or between the
   home page and the about-doctor page was intentionally LEFT INLINE
   in each HTML file to avoid any visual/behavioral change.
   ===================================================================== */

/* ===================== GLOBAL PRIMITIVES (all 4 pages) ===================== */
:root{
  --white:#FFFFFF;
  --gray:#343434;
  --red:#EC0606;
  --red-deep:#a80404;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* overflow-x lives on html, not body — overflow set on body breaks
   position:fixed on iOS Safari (fixed elements start scrolling with
   the page instead of staying pinned to the viewport).
   overscroll-behavior-x:none stops the horizontal rubber-band/bounce
   iOS Safari does when any element is even a sub-pixel wider than the
   viewport (near-impossible to fully avoid in a responsive layout) —
   this is what was making the whole page sway left/right on scroll. */
html{scroll-behavior:smooth; overflow-x:hidden; overscroll-behavior-x:none;}
body{
  background:var(--white);
  color:var(--gray);
  font-family:'Inter','Noto Sans Bengali',sans-serif;
  overscroll-behavior-x:none;
}
.bn{font-family:'Noto Sans Bengali','Inter',sans-serif;}

.lang-switch{
  position:fixed;top:16px;right:16px;z-index:60;
  background:rgba(255,255,255,0.85);backdrop-filter:blur(8px);
  border:1px solid rgba(236,6,6,0.2);border-radius:100px;
  padding:6px;display:flex;gap:4px;
}
.lang-switch a{
  padding:6px 14px;border-radius:100px;font-size:0.78rem;font-weight:700;text-decoration:none;color:var(--gray);
}
.lang-switch a.active{background:var(--red);color:#fff;}

/* ===================== SITE-WIDE SCROLL-REVEAL ANIMATION ===================== */
[data-reveal]{
  opacity:0;
  transition:opacity 0.65s cubic-bezier(.16,.84,.44,1), transform 0.65s cubic-bezier(.16,.84,.44,1);
  will-change:opacity, transform;
}
[data-reveal="up"]{transform:translateY(36px);}
[data-reveal="left"]{transform:translateX(-48px);}
[data-reveal="right"]{transform:translateX(48px);}
[data-reveal].in-view{opacity:1; transform:translate(0,0);}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{transition:none; opacity:1; transform:none;}
}

/* Blog article text + blog listing cards: enhanced "blur-to-focus"
   reveal (client-approved variation 1) layered on top of the base
   [data-reveal] rule above — same reversible fade+rise, plus a blur
   that resolves into focus. Scoped to blog content only, so the rest
   of the site's [data-reveal] elements (hero, cards, sections
   elsewhere) keep their existing plain fade+rise, unchanged. */
.article-wrap [data-reveal],
.story [data-reveal]{
  filter:blur(6px);
  transition:opacity 0.7s cubic-bezier(.16,.84,.44,1), transform 0.7s cubic-bezier(.16,.84,.44,1), filter 0.7s ease;
}
/* .blog-grid a.blog-card already declares its own transition (for its
   hover lift/shadow) in blog/index.html's inline <style> — since that
   rule has equal specificity to the base [data-reveal] rule and comes
   later in the cascade, it would otherwise silently win and strip out
   the opacity/filter transitions. This selector is deliberately more
   specific (class + attribute) so it wins instead, and folds the
   card's own box-shadow transition in alongside the reveal ones so
   hover behavior isn't degraded. */
.blog-grid [data-reveal]{
  filter:blur(6px);
  transition:opacity 0.7s cubic-bezier(.16,.84,.44,1), transform 0.7s cubic-bezier(.16,.84,.44,1), filter 0.7s ease, box-shadow 0.25s ease;
}
.article-wrap [data-reveal].in-view,
.story [data-reveal].in-view,
.blog-grid [data-reveal].in-view{ filter:blur(0); }
@media (prefers-reduced-motion: reduce){
  .article-wrap [data-reveal],
  .story [data-reveal],
  .blog-grid [data-reveal]{ filter:none; }
}

.eyebrow-sm{color:var(--red);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;font-size:0.72rem;margin-bottom:10px;}

.why-list{display:grid;gap:18px;}
.why-item{
  background:#fff;border:1px solid #f0d8d8;border-radius:16px;padding:20px 24px;
  display:flex;gap:16px;align-items:flex-start;
}
.why-item .dot{
  flex-shrink:0;width:10px;height:10px;border-radius:50%;background:var(--red);margin-top:8px;
}
.why-item p{color:#4a4a4a;line-height:1.6;font-size:0.95rem;}
.why-item strong{color:var(--gray);}

.btnrow{
  margin-top:22px;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.cta{
  padding:14px 26px;
  border-radius:100px;
  font-weight:700;
  font-size:0.92rem;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.cta.primary{
  background:var(--red);
  color:#fff;
  box-shadow:0 8px 24px rgba(236,6,6,0.45);
}
.cta.secondary{
  background:rgba(255,255,255,0.95);
  color:var(--red-deep);
  border:1px solid rgba(236,6,6,0.25);
}
/* Glassmorphism CTA — used on the Contact page's map cards, sitting on
   top of a photo/light background where a frosted, semi-transparent
   pill reads better than a flat-color button. */
.cta.glass{
  background:rgba(255,255,255,0.35);
  color:var(--red-deep);
  border:1px solid rgba(255,255,255,0.55);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 8px 26px rgba(52,52,52,0.12);
}
.cta.glass:hover{ background:rgba(255,255,255,0.5); }

.mobile-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  display:none;
  background:#fff;border-top:1px solid #eee;box-shadow:0 -4px 20px rgba(0,0,0,0.08);
  padding:10px 14px;gap:10px;
}
.mobile-bar a{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px;border-radius:100px;font-weight:700;font-size:0.85rem;text-decoration:none;
}
.mobile-bar a.call{background:var(--red);color:#fff;}
.mobile-bar a.wa{background:#f5f5f5;color:var(--gray);}
@media(max-width:760px){
  .mobile-bar{display:flex;}
  body{padding-bottom:70px;}
}

/* ===================== MOBILE NAV DRAWER ===================== */
.mobile-nav-toggle{
  display:none;
  position:fixed;top:16px;left:16px;z-index:65;
  width:42px;height:42px;border-radius:50%;
  background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.2);color:#fff;
  align-items:center;justify-content:center;cursor:pointer;
}
.mobile-nav-close{
  display:none;
  background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.25);
  color:#fff;width:36px;height:36px;border-radius:50%;
  align-items:center;justify-content:center;cursor:pointer;
}
body.mobile-nav-lock{ overflow:hidden; }
@media(max-width:899px){
  .mobile-nav-toggle{display:flex;}
  .mobile-nav-close{display:flex;}
  .side-nav{
    display:flex;flex-direction:column;justify-content:space-between;
    position:fixed;inset:0;width:100%;height:100vh;height:100svh;
    padding:22px 20px;z-index:70;overflow-y:auto;
    background:rgba(6,6,6,0.98);
    transform:translateX(-100%);
    transition:transform 0.4s cubic-bezier(.16,.84,.44,1);
  }
  .side-nav.mobile-open{ transform:translateX(0); }
  .nav-brand{ display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
  .nav-brand-tile{
    background:var(--red);color:#fff;font-weight:800;font-size:0.85rem;
    padding:8px 12px;border-radius:8px;letter-spacing:0.02em;
  }
  .nav-brand-icons{ display:none; }
  .nav-blurb{ font-size:0.82rem;color:rgba(255,255,255,0.75);line-height:1.55;margin-bottom:18px; }
  .nav-stats{
    display:flex;gap:14px;padding:16px 0;margin-bottom:18px;
    border-top:1px solid rgba(255,255,255,0.15);border-bottom:1px solid rgba(255,255,255,0.15);
  }
  .nav-stats div{ flex:1; }
  .nav-stats b{ display:block;font-size:1.15rem;color:#fff;font-weight:800; }
  .nav-stats span{ font-size:0.7rem;color:rgba(255,255,255,0.6); }
  .nav-links{ display:flex;flex-direction:column;gap:6px;flex:1; }
  .nav-link{
    display:flex;align-items:center;gap:10px;
    padding:12px 14px;border-radius:12px;font-size:0.9rem;font-weight:700;
    color:rgba(255,255,255,0.85);text-decoration:none;background:rgba(255,255,255,0.06);
  }
  .nav-link .dot{ width:7px;height:7px;border-radius:50%;background:var(--red);flex-shrink:0; }
  .nav-link-group > .nav-link::after{ content:'⌄'; }
  .nav-submenu{
    position:static;display:none;flex-direction:column;gap:6px;
    background:transparent;border:none;padding:4px 0 4px 22px;
    opacity:1;pointer-events:auto;transform:none;box-shadow:none;
  }
  .nav-submenu.open{ display:flex; }
  .nav-submenu a{
    display:block;padding:10px 12px;border-radius:9px;font-size:0.82rem;font-weight:700;
    color:rgba(255,255,255,0.75);text-decoration:none;background:rgba(255,255,255,0.05);
  }
  .side-nav-bottom{ padding-top:16px; }
  .nav-contact{
    display:block;text-align:center;font-size:0.8rem;color:rgba(255,255,255,0.7);
    text-decoration:none;margin-bottom:10px;
  }
  .nav-book-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:var(--red);color:#fff;font-weight:700;font-size:0.85rem;
    padding:12px;border-radius:100px;text-decoration:none;margin-bottom:8px;
  }
  .nav-book-btn.wa{ background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.25); }
}

/* =====================================================================
   INDEX PAGE ONLY (shared between index.html and index-en.html)
   These selector names are not used anywhere on the about-doctor pages,
   so there is no collision risk extracting them wholesale.
   ===================================================================== */

/* ===================== HERO: full-screen looping video, one sticky
   scroll-staged sequence on top =====================
   Single sticky stage, video never stops — landing content shows first
   (no scroll needed), then each scroll step swaps in the next
   pain-point line centered over the same video, ending on a CTA. Same
   discrete-step technique used everywhere else on the site: JS buckets
   scroll progress into a whole stage number, CSS transitions animate
   between them. */
.hero-video-section{
  position:relative;
  height:calc(var(--hero-scroll-vh) * 1vh); /* set by JS */
  /* svh (small viewport height) ignores the mobile address bar's
     show/hide animation — plain vh jumps as the bar animates, which
     was making the pinned hero's total scroll distance (and therefore
     which stage is "active") shift mid-scroll on mobile. Browsers
     without svh support just keep using the vh line above. */
  height:calc(var(--hero-scroll-vh) * 1svh);
}
.hero-video-sticky{
  position:sticky;
  top:0;
  /* Plain 100vh resizes when the mobile browser's address bar collapses
     on first scroll, making the sticky box visibly jump. 100svh always
     measures against the smallest viewport, so it stays constant. */
  height:100vh;
  height:100svh;
  width:100%;
  overflow:hidden;
  background:#0a0a0a;
}
.hero-video-el{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;
  z-index:0;
}
.hero-video-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.78) 100%);
  z-index:1;
}
.hero-video-content{
  position:relative; z-index:2;
  height:100%;
}

/* Each stage (the landing block, and the pain-point block) is a full-size
   absolutely-positioned layer, centered, cross-fading via opacity — only
   one is ever interactive/visible at a time. */
.hero-stage{
  position:absolute; inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:6vh 8vw;
  color:#fff;
  opacity:0;
  pointer-events:none;
  transform:translateY(16px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.hero-stage.active{ opacity:1; pointer-events:auto; transform:translateY(0); }

.hero-video-eyebrow{
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:700;
  color:#ffd9d9;
  margin-bottom:14px;
}
/* Shared big headline style — used for both the landing h1 and every
   pain-point question, so the pain-point text is exactly as large and
   prominent as the landing headline, per spec. */
.hero-headline{
  font-size:clamp(1.8rem,5vw,3.4rem);
  font-weight:800;
  line-height:1.25;
  max-width:900px;
  margin-bottom:16px;
}
.hero-video-sub{
  font-size:clamp(0.95rem,1.8vw,1.15rem);
  line-height:1.6;
  color:rgba(255,255,255,0.88);
  max-width:640px;
  margin-bottom:26px;
}
.hero-video-trust{
  margin-top:24px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 28px;
}
.hero-video-trust span{
  font-size:0.82rem;
  color:rgba(255,255,255,0.85);
  display:flex;
  align-items:center;
  gap:6px;
}
.hero-video-trust b{ color:#fff; font-weight:800; }

.cta svg{ vertical-align:-3px; }

/* Pain-point stage's CTA row stays collapsed until the final (solution)
   step, exactly like the old mobile behaviour. */
.hero-pain-cta{
  max-height:0; overflow:hidden; opacity:0; margin-top:0;
  transition:max-height 0.5s ease, opacity 0.4s ease, margin-top 0.5s ease;
}
.hero-pain-cta.show{ max-height:220px; opacity:1; margin-top:8px; }

.stage-dots{
  position:absolute;
  bottom:14px; left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  gap:7px;
}
.stage-dots i{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,0.35);
  transition:background 0.3s ease, transform 0.3s ease;
}
.stage-dots i.active{background:#fff; transform:scale(1.3);}

@media (min-width:900px){
  .hero-headline{ font-size:clamp(2.4rem,4.4vw,4.2rem); }
}

@media (prefers-reduced-motion: reduce){
  .hero-stage{transition:none;}
}

/* ===================== SHARED SECTION STYLES (index only) ===================== */
section.block{padding:12vh 6vw;max-width:1180px;margin:0 auto;}
/* Full-bleed color sections: the outer <section> spans the whole
   viewport width edge-to-edge so its background color (black/red/
   white) isn't trapped inside a centered 1180px box — only the
   content inside gets the max-width constraint. */
.block-inner{padding:12vh 6vw;max-width:1180px;margin:0 auto;}
.section-head{text-align:center;max-width:680px;margin:0 auto 50px;}
.section-head h2{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:800;color:var(--gray);}
.section-head p{margin-top:12px;color:#5a5a5a;line-height:1.6;}

.cta-link{color:var(--red);font-weight:700;text-decoration:none;display:inline-block;margin-top:18px;}
.cta-link:hover{text-decoration:underline;}

/* Symptom-reason strip — horizontal drag-scroll ribbon of glass
   cards. Native scroll-snap handles touch swipe on mobile; a
   pointer-events drag-to-scroll layer (see JS) makes it draggable
   with a mouse on desktop too. Simple, no scroll-hijacking. */
.signs-deck-wrap{ padding:6vh 0 2vh; }
.signs-track{
  display:flex; gap:18px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 6vw 26px;
  cursor:grab; user-select:none;
  scrollbar-width:none;
}
.signs-track::-webkit-scrollbar{ display:none; }
.signs-track.dragging{ cursor:grabbing; scroll-snap-type:none; }
.signs-card{
  flex:0 0 min(560px,86vw); scroll-snap-align:center;
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,0.8);
  border-radius:100px;
  padding:22px 34px;
  box-shadow:0 16px 40px rgba(236,6,6,0.08);
  display:flex; align-items:center; gap:22px;
  min-height:96px;
}
.signs-card .num{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  background:var(--red); color:#fff; font-weight:800; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(236,6,6,0.4);
}
.signs-card .txt h3{ font-size:1.05rem; color:var(--gray); margin-bottom:4px; line-height:1.4; font-weight:800; }
.signs-card .txt p{ font-size:0.85rem; color:#666; line-height:1.6; }
.signs-dots{ display:flex; gap:8px; justify-content:center; margin-top:6px; }
.signs-dots i{ width:8px; height:8px; border-radius:50%; background:rgba(236,6,6,0.18); transition:all 0.3s ease; }
.signs-dots i.active{ background:var(--red); width:22px; border-radius:6px; }
.signs-deck-hint{ text-align:center; color:#a88; font-size:0.8rem; margin-top:14px; }
@media (max-width:640px){
  .signs-card{ flex-direction:column; align-items:flex-start; border-radius:28px; padding:26px; gap:14px; }
}
.nudge{text-align:center;margin-top:36px;font-weight:600;color:var(--gray);max-width:680px;margin-inline:auto;font-size:clamp(1.15rem,2.4vw,1.4rem);line-height:1.6;}

/* Patient Reviews strip on the homepage — reuses the .signs-track drag-scroll
   ribbon (same idiom as the symptom-reason strip and the /testimonials page)
   so it's draggable/swipeable for free via the existing generic JS handler. */
.signs-card.rev-card{ flex-direction:column; align-items:flex-start; text-align:left; border-radius:28px; padding:26px 30px; gap:10px; }
.signs-card.rev-card .num{ font-size:0.95rem; }
.signs-card.rev-card .stars{ color:var(--red); font-size:0.8rem; margin-bottom:6px; }
/* The header (in .block-inner, padding:12vh 6vw) and the deck-wrap
   (padding:6vh 0 2vh) each add their own vertical padding — stacked
   together on this section it left an oversized gap between the
   heading and the first card; trim both down here. */
#patientReviews .block-inner{ padding-bottom:0; }
#patientReviews .signs-deck-wrap{ padding-top:1vh; }

/* Meet the doctor — raw black section, white text, red accents */
.doctor-wrap{display:flex;flex-wrap:wrap;gap:44px;align-items:center;}
.doctor-photo{
  flex:1 1 280px;height:340px;border-radius:22px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.12); box-shadow:0 16px 40px rgba(0,0,0,0.4);
}
.doctor-photo img{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block;}
.doctor-text{flex:1 1 340px;}
/* Desktop: the photo container was growing very wide but staying short,
   forcing object-fit:cover to crop into the doctor's face. Cap the width
   and grow the height instead so the full face stays clearly visible. */
@media (min-width:900px){
  .doctor-photo{ flex:0 1 380px; height:460px; }
}
.doctor-text h2{font-size:clamp(1.5rem,3.6vw,2rem);font-weight:800;color:#fff;margin-bottom:16px;}
.doctor-text p{color:rgba(255,255,255,0.75);line-height:1.7;}
.credentials-strip{margin-top:20px;font-size:0.85rem;color:var(--red);font-weight:600;}
.doctor-text .cta-link{color:var(--red);}

/* Thin red stat band directly under the doctor section — full-bleed,
   not boxed in, so it reads as its own full-width color block. */
.stat-band{
  background:var(--red); color:#fff; text-align:center;
  padding:22px 6vw; font-weight:700; font-size:0.92rem;
}
.stat-band span{ margin:0 10px; }

/* ============ CONDITIONS ============
   Desktop: an "orbit" of condition thumbnails circling a center stage
   image that swaps on hover; clicking a node opens a slide-in side
   panel with the full image + description.
   Mobile: a tappable list of conditions; tapping one launches a
   full-screen Instagram-Stories-style overlay (progress bar, tap
   left/right edges to move between conditions). */
.cond-orbit-wrap{ display:none; }
@media (min-width:900px){
  .cond-orbit-wrap{ display:block; position:relative; width:min(520px,80vw); height:min(520px,80vw); margin:20px auto 10px; }
  .cond-stage{
    position:absolute; inset:14%; border-radius:50%; overflow:hidden;
    border:2px solid rgba(236,6,6,0.4); box-shadow:0 0 60px rgba(236,6,6,0.15);
  }
  .cond-stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 0.5s ease; z-index:1; }
  .cond-stage img.active{ opacity:1; }
  .cond-stage .center-txt{
    position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:20px; background:rgba(0,0,0,0.6);
  }
  .cond-stage h3{ font-size:1.1rem; color:#fff; font-weight:800; text-shadow:0 2px 6px rgba(0,0,0,0.8); }
  .cond-node{
    position:absolute; width:60px; height:60px; border-radius:50%; overflow:hidden; cursor:pointer;
    border:2px solid rgba(255,255,255,0.2); transition:border-color 0.3s ease, transform 0.3s ease;
  }
  .cond-node img{ width:100%; height:100%; object-fit:cover; filter:brightness(0.6); }
  .cond-node:hover, .cond-node.active{ border-color:var(--red); transform:scale(1.15); }
  .cond-node:hover img, .cond-node.active img{ filter:brightness(1); }
}
.cond-orbit-hint{ display:none; }
@media (min-width:900px){ .cond-orbit-hint{ display:block; text-align:center; color:rgba(255,255,255,0.4); font-size:0.8rem; margin-top:12px; } }

/* Mobile tappable list (hidden on desktop) */
.cond-list{ display:flex; flex-direction:column; gap:12px; max-width:560px; margin:0 auto; }
@media (min-width:900px){ .cond-list{ display:none; } }
.cond-list .row{
  display:flex; align-items:center; gap:14px; padding:14px; border-radius:16px; cursor:pointer;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
}
.cond-list .thumb{ width:56px; height:56px; border-radius:12px; overflow:hidden; flex-shrink:0; }
.cond-list .thumb img{ width:100%; height:100%; object-fit:cover; }
.cond-list .txt{ flex:1; }
.cond-list h3{ font-size:0.92rem; font-weight:700; color:#fff; }
.cond-list .chev{ color:rgba(255,255,255,0.35); font-size:1.2rem; }

/* Desktop side panel */
.cond-panel-bg{ position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:205; display:none; }
.cond-panel-bg.show{ display:block; }
.cond-side-panel{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,88vw); background:#111; z-index:210;
  transform:translateX(100%); transition:transform 0.4s cubic-bezier(.16,.84,.44,1);
  display:flex; flex-direction:column; box-shadow:-20px 0 60px rgba(0,0,0,0.5);
}
.cond-side-panel.show{ transform:translateX(0); }
.cond-side-panel .panel-img{ height:280px; }
.cond-side-panel .panel-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.cond-side-panel .panel-body{ padding:30px; flex:1; }
.cond-side-panel h3{ font-size:1.3rem; margin-bottom:14px; color:#fff; font-weight:800; }
.cond-side-panel p{ color:rgba(255,255,255,0.75); line-height:1.7; }
.cond-panel-close{
  position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.3); color:#fff; cursor:pointer; z-index:2;
}

/* Mobile full-screen story overlay */
.cond-story-overlay{ position:fixed; inset:0; background:#000; z-index:220; display:none; flex-direction:column; }
.cond-story-overlay.show{ display:flex; }
.cond-story-progress{ position:absolute; top:14px; left:14px; right:14px; display:flex; gap:5px; z-index:5; }
.cond-story-progress i{ flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,0.25); overflow:hidden; }
.cond-story-progress i b{ display:block; height:100%; width:0; background:#fff; }
.cond-story-progress i.done b{ width:100%; }
.cond-story-close{
  position:absolute; top:30px; right:16px; z-index:6; width:34px; height:34px; border-radius:50%;
  background:rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.3); color:#fff; font-size:1rem; cursor:pointer;
}
.cond-story{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity 0.25s ease; }
.cond-story.active{ opacity:1; pointer-events:auto; }
.cond-story img{ width:100%; height:100%; object-fit:cover; }
.cond-story .shade{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,0.5) 0%, transparent 45%, transparent 55%, rgba(0,0,0,0.5) 100%); }
/* Text sits in its own solid panel near the vertical middle — not
   pinned to the bottom edge — so it stays legible regardless of how
   bright/light the underlying condition image is, and never gets
   clipped by a phone's bottom browser chrome. */
.cond-story .info{
  position:absolute; left:22px; right:22px; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.65); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:18px; padding:22px 20px; border:1px solid rgba(255,255,255,0.12);
}
.cond-story h3{ font-size:1.3rem; margin-bottom:0; color:#fff; font-weight:800; }
.cond-story p{ color:rgba(255,255,255,0.85); line-height:1.6; font-size:0.9rem; }
.cond-tap-zone{ position:absolute; top:0; bottom:0; width:34%; z-index:4; }
.cond-tap-zone.left{ left:0; }
.cond-tap-zone.right{ right:0; }

/* Chambers */
.chamber-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;}
.chamber-card{
  background:#fff;border:1px solid #f0d8d8;border-radius:20px;
  padding:30px 26px;
}
.chamber-card h3{color:var(--red-deep);font-size:1.1rem;margin-bottom:14px;}
.chamber-card .line{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #f0d0d0;font-size:0.9rem;color:#4a4a4a;}
.chamber-card .line b{color:var(--gray);}

/* On-call chambers: plain-text list, no card treatment — used on the
   homepage Chambers section and the Contact page. Ships with a static
   fallback (see index.html/index-en.html) so it's never empty even
   before/without a successful live-sync fetch. */
.on-call-block{ margin-top:32px; text-align:center; }
.on-call-label{ font-size:0.8rem; font-weight:700; color:#b5493a; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:12px; }
.on-call-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.on-call-item{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.15); color:rgba(255,255,255,0.85);
  padding:9px 18px; border-radius:100px; font-size:0.86rem; font-weight:600;
}
section:not(.on-dark) .on-call-item{ background:#fdf1ec; border-color:#f0d8d8; color:#5a4a44; }

/* How it works */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;counter-reset:step;}
.step{text-align:center;}
.step .stepnum{
  width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.step h3{font-size:1rem;color:var(--gray);margin-bottom:8px;}
.step p{font-size:0.88rem;color:#5a5a5a;line-height:1.55;}

/* FAQ accordion */
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.faq-item{border:1px solid #f0d8d8;border-radius:16px;overflow:hidden;background:#fff;}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;cursor:pointer;font-weight:700;color:var(--gray);font-size:0.98rem;
}
.faq-q .plus{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#fff0f0;color:var(--red);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800;
  transition:transform 0.3s ease;
}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.35s ease;}
.faq-a p{padding:0 24px 20px;color:#5a5a5a;line-height:1.7;font-size:0.92rem;}

/* Reassurance quote — red accent bar draws down, headline types out
   character by character (blinking cursor), then each line of the
   quote fades up in sequence. Triggered once when scrolled into view. */
.quote-block{
  background:#000;color:#fff;border-radius:26px;padding:56px 40px;text-align:left;
  position:relative; padding-left:64px; max-width:760px; margin:0 auto;
}
.quote-block .accent-bar{
  position:absolute; left:40px; top:56px; bottom:56px; width:3px; background:var(--red);
  transform:scaleY(0); transform-origin:top; transition:transform 0.7s cubic-bezier(.16,.84,.44,1);
}
.quote-block .accent-bar.show{ transform:scaleY(1); }
.quote-block h2{
  font-size:clamp(1.3rem,3.2vw,1.8rem); margin-bottom:20px; font-weight:800;
  border-right:2px solid var(--red); display:inline-block; min-height:1.3em;
}
.quote-block h2.done{ border-right:none; }
.quote-block blockquote{
  font-size:clamp(1rem,2.4vw,1.2rem);font-weight:600;line-height:1.7;
  font-style:normal;
}
.quote-block blockquote .line{
  display:block; opacity:0; transform:translateY(10px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.quote-block blockquote .line.show{ opacity:1; transform:translateY(0); }
@media (max-width:640px){ .quote-block{ padding-left:46px; } .quote-block .accent-bar{ left:22px; } }

footer{
  background:#000;padding:8vh 6vw 4vh;text-align:center;color:rgba(255,255,255,0.55);font-size:0.82rem;line-height:1.7;
}
footer .fname{color:#fff;font-weight:700;margin-bottom:10px;}

/* Utility for sections given a black background: overrides the shared
   .section-head heading/paragraph colors, which otherwise default to
   dark gray and would vanish against black. */
.on-dark .section-head h2{ color:#fff; }
.on-dark .section-head p{ color:rgba(255,255,255,0.7); }
.on-dark .nudge{ color:#fff; }

/* ===================== DESKTOP LEFT SIDEBAR NAV =====================
   Display is fully decided by the two media queries below (mobile
   drawer vs desktop rail) — no unconditional base rule here. There
   used to be one (`display:none`), but since it carried no media
   condition, it always won the cascade against the mobile drawer's
   `display:flex` (equal specificity, later in source order), which
   silently broke the mobile hamburger menu. */
body{ transition:padding-left 0.5s cubic-bezier(.16,.84,.44,1); }

@media (min-width:900px){
  /* Dark-tinted frosted glass — NOT a light/white tint. A light glass
     lets whatever color is scrolling behind it (white sections, etc.)
     wash out the white nav text to the point of being unreadable.
     Mixing in a fixed black tint under the blur guarantees the white
     text always has contrast, no matter what's behind the sidebar. */
  .side-nav{
    display:flex; flex-direction:column; justify-content:space-between;
    position:fixed; top:0; left:0; height:100vh; width:250px;
    padding:26px 20px; z-index:50; overflow-y:auto;
    background:rgba(0,0,0,0.55); backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    border-right:1px solid rgba(255,255,255,0.12);
    opacity:0; transform:translateY(-28px);
    pointer-events:none;
    transition:opacity 0.5s ease, transform 0.6s cubic-bezier(.16,.84,.44,1);
  }
  .side-nav.nav-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }

  body.nav-open{ padding-left:250px; }
  body.nav-open .hero-wrap{ margin-left:-250px; width:calc(100% + 250px); }

  .nav-brand{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .nav-brand-tile{
    background:var(--red); color:#fff; font-weight:800; font-size:0.85rem;
    padding:8px 12px; border-radius:8px; letter-spacing:0.02em;
  }
  .nav-brand-icons{ display:flex; gap:8px; }
  .nav-brand-icons a{
    width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.1);color:#fff;
    border:1px solid rgba(255,255,255,0.25);
    display:flex;align-items:center;justify-content:center;
  }
  .nav-blurb{ font-size:0.82rem; color:rgba(255,255,255,0.75); line-height:1.55; margin-bottom:18px; }

  .nav-stats{
    display:flex; gap:14px; padding:16px 0; margin-bottom:18px;
    border-top:1px solid rgba(255,255,255,0.15); border-bottom:1px solid rgba(255,255,255,0.15);
  }
  .nav-stats div{ flex:1; }
  .nav-stats b{ display:block; font-size:1.15rem; color:#fff; font-weight:800; }
  .nav-stats span{ font-size:0.7rem; color:rgba(255,255,255,0.6); }

  .nav-links{ display:flex; flex-direction:column; gap:6px; flex:1; }
  .nav-link{
    display:flex; align-items:center; gap:10px;
    padding:10px 14px; border-radius:12px; font-size:0.85rem; font-weight:700;
    color:rgba(255,255,255,0.85); text-decoration:none; background:rgba(255,255,255,0.06);
    transition:background 0.25s ease, color 0.25s ease;
  }
  .nav-link .dot{ width:7px;height:7px;border-radius:50%;background:var(--red); flex-shrink:0; }
  .nav-link.active{ background:var(--red); color:#fff; }
  .nav-link.active .dot{ background:#fff; }
  .nav-link:hover{ background:rgba(255,255,255,0.14); }
  .nav-link.active:hover{ background:var(--red); }

  .nav-link-group{ position:relative; }
  .nav-link-group > .nav-link::after{
    content:'›'; margin-left:auto; padding-left:8px; opacity:0.6; font-weight:800;
  }
  /* Positioned via JS (position:fixed, top/left computed from the
     trigger's own bounding box) — it lives in <body>, not nested
     inside .side-nav, because .side-nav's own overflow-y:auto
     (needed for its scrollbar) silently clips any horizontal
     overflow too, which was hiding this menu completely. */
  .nav-submenu{
    position:fixed; top:0; left:0;
    display:flex; flex-direction:row; gap:8px;
    background:rgba(10,10,10,0.92); backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    border:1px solid rgba(255,255,255,0.14); border-radius:14px;
    padding:10px; white-space:nowrap; z-index:80;
    opacity:0; pointer-events:none; transform:translateX(-8px);
    transition:opacity 0.22s ease, transform 0.22s ease;
  }
  .nav-submenu.open{ opacity:1; pointer-events:auto; transform:translateX(0); }
  .nav-submenu a{
    display:block; padding:10px 14px; border-radius:9px; font-size:0.82rem; font-weight:700;
    color:rgba(255,255,255,0.85); text-decoration:none; background:rgba(255,255,255,0.06);
    transition:background 0.2s ease, color 0.2s ease;
  }
  .nav-submenu a:hover{ background:var(--red); color:#fff; }

  .side-nav-bottom{ padding-top:16px; }
  .nav-contact{
    display:block; text-align:center; font-size:0.8rem; color:rgba(255,255,255,0.7);
    text-decoration:none; margin-bottom:10px;
  }
  .nav-book-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:var(--red); color:#fff; font-weight:700; font-size:0.85rem;
    padding:12px; border-radius:100px; text-decoration:none;
    box-shadow:0 8px 20px rgba(236,6,6,0.35);
  }
  .nav-book-btn.wa{
    background:rgba(255,255,255,0.1); box-shadow:none; margin-top:8px;
    border:1px solid rgba(255,255,255,0.25);
  }
}

/* NOTE: the .why-list/.steps/.pub-grid nth-child stagger-delay rules are
   NOT extracted here — index.html and about-doctor.html each use
   different delay values on the same ".why-list [data-reveal]" selector,
   so putting both in one shared file would make the last one in the
   file win on EVERY page. Each page keeps its own stagger rules inline. */

/* =====================================================================
   ABOUT-DOCTOR PAGE ONLY (shared between about-doctor.html and
   about-doctor-en.html). NOTE: these deliberately do NOT reuse the
   index page's .section-head / .doctor-wrap / .final-cta / footer
   rules above, because the about-doctor page uses the same class
   names with different values (light-background variant vs the
   index page's dark/red variant). Those conflicting rules are kept
   inline in each page instead, so the cascade (site.css loaded first,
   page's own <style> after it) resolves to the correct, original look.
   ===================================================================== */
.back-link{
  position:fixed;top:16px;left:16px;z-index:60;
  background:rgba(255,255,255,0.85);backdrop-filter:blur(8px);
  border:1px solid rgba(236,6,6,0.2);border-radius:100px;
  padding:9px 18px;font-size:0.78rem;font-weight:700;text-decoration:none;color:var(--gray);
}

.page-hero{
  padding:16vh 6vw 8vh; max-width:1180px; margin:0 auto;
}
.page-hero .eyebrow-sm{text-align:center;}
.page-hero h1{
  font-size:clamp(2rem,5.4vw,3.4rem); font-weight:800; line-height:1.15;
  color:var(--gray); text-align:center; max-width:820px; margin:0 auto 18px;
}
.page-hero .sub{
  text-align:center; color:#5a5a5a; font-size:clamp(1rem,2vw,1.15rem);
  max-width:640px; margin:0 auto 50px; line-height:1.6;
}

/* Story paragraphs */
.story p{color:#4a4a4a;line-height:1.85;font-size:1rem;margin-bottom:22px;}
.story p:last-child{margin-bottom:0;}

/* Publications */
.pub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
.pub-card{background:#fff;border:1px solid #f0d8d8;border-radius:18px;padding:26px 22px;box-shadow:0 6px 20px rgba(0,0,0,0.04);}
.pub-card .num{
  width:34px;height:34px;border-radius:10px;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:14px;
}
.pub-card h3{font-size:0.98rem;margin-bottom:8px;color:var(--gray);line-height:1.4;}
.pub-card p{font-size:0.85rem;color:#5a5a5a;line-height:1.5;}
/* Cards that link out to the actual journal page — plain divs (no
   link_url yet) stay exactly as before. */
a.pub-card{
  display:block; text-decoration:none; cursor:pointer;
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
a.pub-card:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(236,6,6,0.1); border-color:rgba(236,6,6,0.25); }
a.pub-card h3{ display:flex; align-items:flex-start; gap:8px; }
a.pub-card h3 .ext-icon{ flex-shrink:0; margin-top:3px; color:var(--red); opacity:0.7; }
.pub-grid [data-reveal]:nth-child(1){transition-delay:0s;}
.pub-grid [data-reveal]:nth-child(2){transition-delay:0.08s;}
.pub-grid [data-reveal]:nth-child(3){transition-delay:0.16s;}
.pub-grid [data-reveal]:nth-child(4){transition-delay:0.24s;}
.pub-grid [data-reveal]:nth-child(5){transition-delay:0.32s;}
.callout{
  margin-top:30px; background:#fff9f9; border:1px solid #f0d8d8; border-radius:18px;
  padding:26px 28px; color:var(--gray); font-weight:600; line-height:1.7; font-size:0.95rem;
}

/* ===================== CONDITIONS: "Learn More" category reveal =====================
   Sits directly below the existing orbit/list widget, untouched. A single
   toggle button reveals 3 category cards with a staggered fade+scale-in
   (client-approved variation 2 from demos/learn-more-reveal-variation-2.html).
   Desktop: 3-column card grid. Mobile: reuses the same row visual language
   as .cond-list .row so it feels native to the existing mobile design,
   not a new pattern. */
.learn-more-wrap{ text-align:center; margin-top:40px; }
.learn-more-btn{
  background:transparent; border:1px solid rgba(255,255,255,0.3); color:#fff;
  padding:12px 28px; border-radius:100px; font-weight:700; font-size:0.9rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; transition:background 0.25s ease, border-color 0.25s ease;
  font-family:inherit;
}
.learn-more-btn:hover{ background:rgba(255,255,255,0.08); border-color:var(--red); }
.learn-more-btn .chev{ display:inline-block; transition:transform 0.35s cubic-bezier(.16,.84,.44,1); }
.learn-more-btn.open .chev{ transform:rotate(180deg); }

.cat-reveal{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height 0.6s cubic-bezier(.16,.84,.44,1), opacity 0.4s ease, margin-top 0.6s ease;
  display:grid; gap:16px; margin-top:0; text-align:left;
}
.cat-reveal.open{ max-height:1000px; opacity:1; margin-top:26px; }
@media (min-width:700px){
  .cat-reveal{ grid-template-columns:repeat(3,1fr); }
}

.cat-card{
  display:block; text-decoration:none;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); border-radius:18px;
  padding:22px 22px 46px; position:relative;
  opacity:0; transform:scale(0.9);
  transition:opacity 0.5s ease, transform 0.5s cubic-bezier(.16,.84,.44,1), border-color 0.25s ease, background 0.25s ease;
}
.cat-card.show{ opacity:1; transform:scale(1); }
.cat-card:hover{ border-color:var(--red); background:rgba(236,6,6,0.08); }
.cat-card h3{ color:#fff; font-size:1.05rem; font-weight:800; margin-bottom:8px; line-height:1.4; }
.cat-card p{ color:rgba(255,255,255,0.7); font-size:0.85rem; line-height:1.6; }
.cat-card .cat-arrow{ position:absolute; bottom:18px; right:20px; color:var(--red); font-size:1.2rem; transition:transform 0.25s ease; }
.cat-card:hover .cat-arrow{ transform:translateX(4px); }

/* Mobile: match the existing .cond-list .row visual language exactly —
   a flat tappable row, not a card — so this feels like part of the
   existing mobile design rather than a new pattern being introduced. */
@media (max-width:699px){
  .cat-reveal{ display:flex; flex-direction:column; gap:12px; }
  .cat-card{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:16px; border-radius:16px;
  }
  .cat-card p{ display:none; }
  .cat-card .cat-arrow{ position:static; flex-shrink:0; }
}

/* =====================================================================
   CATEGORY PAGES ONLY (vascular-surgery / endovascular-surgery /
   general-laparoscopic-surgery, bn + en — all 6 built from the
   client-approved demos/category-page-variation-1.html structure).
   Identical across all 6 pages, so kept here rather than inline.
   ===================================================================== */

/* Hero: real condition photo full-bleed background + dark gradient
   overlay (same overlay recipe as the approved demo), headline on top.
   Background image URL is set per-page via an inline style="" on the
   section (data differs per category), everything else is shared. */
.cat-hero{
  position:relative; min-height:60vh; display:flex; flex-direction:column; justify-content:flex-end;
  background-size:cover; background-position:center; padding:18vh 6vw 9vh;
}
.cat-hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.92) 100%);
}
.cat-hero-inner{ position:relative; z-index:1; max-width:760px; }
.cat-hero .eyebrow{ color:#ffb0b0; font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:700; margin-bottom:14px; }
.cat-hero h1{ color:#fff; font-size:clamp(1.9rem,4.8vw,3.1rem); font-weight:800; line-height:1.25; }
.cat-hero .sub{ margin-top:14px; color:rgba(255,255,255,0.85); font-size:1rem; max-width:560px; line-height:1.65; }
.cat-hero .btnrow{ justify-content:flex-start; margin-top:26px; }
@media (max-width:640px){
  .cat-hero{ min-height:52vh; padding:16vh 6vw 7vh; }
  .cat-hero .btnrow{ justify-content:center; }
}

/* Symptom self-checker chips (merged with CTA), on a black section.
   NOTE: .chips/.chip below are still used by the homepage's separate
   symptom ROUTER section (initSymptomRouter) — kept as-is. The 3
   category pages use the newer .pilllist/.pill "progress stepper"
   design further down instead (client-approved variation 3). */
.checker-intro{ font-size:0.95rem; color:rgba(255,255,255,0.85); margin-bottom:4px; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0; }
.chip{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); color:#fff;
  border-radius:100px; padding:10px 18px; font-size:0.85rem; cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease; font-family:inherit;
}
.chip:hover{ border-color:rgba(255,255,255,0.4); }
.chip.on{ background:var(--red); border-color:var(--red); }
.result{
  margin-top:18px; background:rgba(236,6,6,0.12); border:1px solid rgba(236,6,6,0.4);
  border-radius:16px; padding:18px 22px; font-size:1.02rem; font-weight:600; line-height:1.75; color:#fff;
}
.result b{ color:#ffb0b0; }
.reassure{ margin-top:12px; color:rgba(255,255,255,0.6); font-size:0.82rem; font-style:italic; }

/* ============ CATEGORY PAGES: symptom checker "progress stepper" ============
   Client-approved design (demos/symptom-checker-mobile-variation-3.html
   and demos/symptom-checker-pc-variation-3.html). Mobile: single-column
   compact pill list with a live progress bar + counter above it, result
   card below. Desktop (900px+): two-column layout — pills on the left,
   a sticky summary card (progress + result + disclaimer + CTAs) on the
   right, so the result never scrolls out of view while picking symptoms. */
.checker-intro-lg{ color:#fff; font-weight:800; font-size:1.3rem; margin-bottom:6px; line-height:1.4; }
.checker-subintro{ color:rgba(255,255,255,0.5); font-size:0.88rem; margin-bottom:18px; }

.checker-progress-wrap{ margin-bottom:16px; }
.progress-track{ height:5px; background:rgba(255,255,255,0.1); border-radius:100px; overflow:hidden; margin-bottom:8px; }
.progress-fill{ height:100%; width:0%; background:var(--red); border-radius:100px; transition:width 0.3s ease; }
.progress-count{ color:rgba(255,255,255,0.55); font-size:0.78rem; font-weight:700; }
.progress-count b{ color:var(--red); }

.pilllist{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.pill{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
  border-radius:10px; padding:12px 15px; cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.pill span{ color:rgba(255,255,255,0.85); font-size:0.86rem; font-weight:600; line-height:1.4; }
.pill .check{
  flex-shrink:0; width:19px; height:19px; border-radius:5px;
  border:1.5px solid rgba(255,255,255,0.3); position:relative;
}
.pill .check::after{
  content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:0.72rem; font-weight:800; opacity:0;
}
.pill.on{ background:rgba(236,6,6,0.12); border-color:rgba(236,6,6,0.4); }
.pill.on .check{ background:var(--red); border-color:var(--red); }
.pill.on .check::after{ opacity:1; }

.result-stepper{
  background:rgba(236,6,6,0.1); border:1px solid rgba(236,6,6,0.3); border-radius:14px;
  padding:16px; color:#fff; font-size:0.9rem; font-weight:700; line-height:1.6; margin-bottom:14px; display:none;
}
.result-stepper.show{ display:block; }
.result-stepper b{ color:#ffb0b0; }

/* Mobile matches the approved mobile demo exactly: one Call CTA, no
   secondary WhatsApp button and no reassure line in this block (both
   are already available via the sticky mobile-bar at the bottom of
   the screen). Desktop's summary card restores both, matching the
   approved desktop demo. */
.checker-summary .cta.secondary{ display:none; }
.checker-summary .reassure{ display:none; }

@media (min-width:900px){
  .checker-layout{ display:grid; grid-template-columns:1.3fr 1fr; gap:60px; align-items:start; }
  .checker-intro-lg{ font-size:1.6rem; }
  .checker-subintro{ font-size:0.95rem; margin-bottom:26px; }
  .pilllist{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .pill{ padding:14px 16px; }
  .pill span{ font-size:0.92rem; }
  .pill:hover{ background:rgba(255,255,255,0.09); }
  .checker-summary{ position:sticky; top:30px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:20px; padding:28px; }
  .checker-summary .progress-count{ font-size:0.85rem; margin-bottom:22px; }
  .checker-summary .progress-count b{ font-size:1.1rem; }
  .checker-summary .result-stepper{ font-size:0.95rem; padding:18px; }
  .checker-summary .cta{ width:100%; margin-bottom:10px; }
  .checker-summary .cta.secondary{ display:inline-flex; }
  .checker-summary .reassure{ display:block; text-align:center; margin-top:16px; }
}

/* Prominent safety disclaimer, sits directly under .result on the 3
   category pages AND the homepage symptom router — must read as a
   clear caution, not fine print, per client's explicit liability
   concern. Soft red/amber tint (not alarming red-on-red), bold weight,
   colored left border, legible at mobile + desktop widths. */
.checker-disclaimer{
  margin-top:14px; background:rgba(236,6,6,0.08); border:1px solid rgba(236,6,6,0.25);
  border-left:4px solid var(--red); border-radius:10px; padding:16px 20px;
  font-size:0.98rem; font-weight:700; line-height:1.7; color:#fff;
}
@media (max-width:640px){
  .checker-disclaimer{ font-size:0.88rem; padding:13px 16px; }
}

/* Condition detail sections — full paragraph + image, alternating sides */
.cond-detail-list{ display:flex; flex-direction:column; gap:60px; }
.cond-detail{ display:flex; flex-wrap:wrap; gap:40px; align-items:center; }
.cond-detail:nth-child(even){ flex-direction:row-reverse; }
.cond-detail-img{ flex:1 1 320px; border-radius:22px; overflow:hidden; height:280px; box-shadow:0 16px 40px rgba(0,0,0,0.4); }
.cond-detail-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.cond-detail-text{ flex:1 1 340px; }
.cond-detail-text h3{ font-size:1.3rem; font-weight:800; color:#fff; margin-bottom:14px; }
.cond-detail-text p{ color:rgba(255,255,255,0.75); line-height:1.75; font-size:0.95rem; }
@media (max-width:700px){
  .cond-detail, .cond-detail:nth-child(even){ flex-direction:column; }
  .cond-detail-img{ width:100%; height:220px; }
}

/* Final CTA — identical red band used on index.html; shared here since
   all 6 category pages need the exact same treatment. */
.final-cta{ background:var(--red); color:#fff; border-radius:28px; padding:60px 40px; text-align:center; }
.final-cta h2{ font-size:clamp(1.6rem,3.8vw,2.2rem); margin-bottom:14px; }
.final-cta p{ max-width:600px; margin:0 auto; opacity:0.95; line-height:1.6; }
.final-cta .btnrow{ margin-top:30px; }
.final-cta .cta.secondary{ background:rgba(255,255,255,0.18); color:#fff; border:1px solid rgba(255,255,255,0.4); }
.final-cta .cta.primary{ background:#fff; color:var(--red-deep); box-shadow:none; }

/* ===================== GALLERY: continuous auto-scrolling strip =====================
   Plain horizontal strip, not a 3D ring. The track holds the image set
   duplicated twice back-to-back (built in JS) so the loop is seamless;
   a rAF loop nudges scrollLeft forward continuously, wrapping back by
   exactly one set's width once it scrolls past the first copy. Grabbing
   the strip (pointer events) drags it manually via scrollLeft and pauses
   the auto-scroll while held, resuming a moment after release. */
.gallery-marquee{ margin-top:20px; }
.gallery-orbit-wrap{
  overflow-x:auto; overflow-y:hidden; cursor:grab; touch-action:pan-y;
  scrollbar-width:none; -ms-overflow-style:none;
}
.gallery-orbit-wrap::-webkit-scrollbar{ display:none; }
.gallery-orbit-wrap.dragging{ cursor:grabbing; }
.gallery-marquee-track{ display:flex; gap:20px; width:max-content; }
.gallery-item{ position:relative; flex:0 0 auto; width:260px; height:340px; border-radius:16px; overflow:hidden; box-shadow:0 24px 46px -16px rgba(0,0,0,0.5); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.gallery-item span{ position:absolute; left:0; right:0; bottom:0; padding:16px 16px 12px; font-size:0.92rem; font-weight:700; color:#fff; background:linear-gradient(0deg,rgba(0,0,0,0.8),transparent 70%); }
.gallery-orbit-hint{ text-align:center; font-size:0.75rem; color:#8a8a8a; margin-top:14px; }
@media (max-width:640px){
  .gallery-item{ width:190px; height:250px; }
  .gallery-item span{ padding:12px 12px 10px; font-size:0.82rem; }
}

/* ===================== CAREER ROADMAP: zigzag center-spine =====================
   Alternating right/left milestone cards branching off a central vertical
   line, with a scroll-driven progress fill and a glassmorphism treatment
   for milestones the admin panel marks as "highlighted". Cards slide in
   from their own side on scroll (IntersectionObserver adds .in-view). */
.roadmap{ position:relative; max-width:920px; margin:36px auto 0; }
.roadmap-spine{ position:absolute; left:50%; top:0; bottom:0; width:3px; margin-left:-1.5px; background:#eae4de; border-radius:3px; }
.roadmap-spine-fill{ position:absolute; left:0; top:0; width:100%; height:0%; background:linear-gradient(180deg,var(--red),var(--red-deep)); border-radius:3px; transition:height 0.15s linear; }

.roadmap-node{ position:relative; display:grid; grid-template-columns:1fr 44px 1fr; align-items:start; margin-bottom:44px; }
.roadmap-node:last-child{ margin-bottom:0; }

.roadmap-dot{
  grid-column:2; justify-self:center; margin-top:2px; width:24px; height:24px; border-radius:50%;
  background:#fff; border:3px solid #eae4de; display:flex; align-items:center; justify-content:center; z-index:2;
  transition:border-color 0.4s ease, transform 0.4s ease;
}
.roadmap-dot i{ width:7px; height:7px; border-radius:50%; background:#eae4de; transition:background 0.4s ease; }
.roadmap-node.in-view .roadmap-dot{ border-color:var(--red); transform:scale(1.08); }
.roadmap-node.in-view .roadmap-dot i{ background:var(--red); }

.roadmap-slot{ position:relative; opacity:0; transition:opacity 0.6s ease, transform 0.6s ease; }
.roadmap-node.in-view .roadmap-slot{ opacity:1; transform:translateX(0) !important; }

.roadmap-node.right .roadmap-slot{ grid-column:3; transform:translateX(30px); padding-left:24px; text-align:left; }
.roadmap-node.right .roadmap-slot::before{ content:''; position:absolute; left:0; top:14px; width:24px; height:2px; background:#eae4de; }
.roadmap-node.right.in-view .roadmap-slot::before{ background:var(--red); }

.roadmap-node.left .roadmap-slot{ grid-column:1; transform:translateX(-30px); padding-right:24px; text-align:right; }
.roadmap-node.left .roadmap-slot::before{ content:''; position:absolute; right:0; top:14px; width:24px; height:2px; background:#eae4de; }
.roadmap-node.left.in-view .roadmap-slot::before{ background:var(--red); }

.roadmap-period{ font-size:0.75rem; font-weight:800; color:var(--red); letter-spacing:0.03em; margin-bottom:5px; }
.roadmap-card{ background:#fff; border:1px solid #eae4de; border-radius:16px; padding:15px 17px; display:inline-block; width:100%; }
.roadmap-card h3{ margin:0 0 4px; font-size:0.96rem; font-weight:800; line-height:1.35; color:var(--gray); }
.roadmap-card p{ margin:0; color:#6b6560; font-size:0.84rem; line-height:1.55; }

.roadmap-node.highlight .roadmap-card{
  background:linear-gradient(155deg, rgba(255,255,255,0.75), rgba(255,241,240,0.6));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(236,6,6,0.25);
  box-shadow:0 18px 40px -18px rgba(236,6,6,0.32), inset 0 1px 0 rgba(255,255,255,0.6);
  padding:20px 20px; position:relative; overflow:hidden;
}
.roadmap-node.highlight .roadmap-card::after{
  content:''; position:absolute; inset:0; background:radial-gradient(120% 140% at 0% 0%, rgba(236,6,6,0.08), transparent 55%);
  pointer-events:none;
}
.roadmap-node.highlight .roadmap-card h3{ color:var(--red-deep); font-size:1.02rem; }
.roadmap-badge{
  display:inline-block; font-size:0.62rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
  color:#fff; background:var(--red); padding:3px 10px; border-radius:100px; margin-bottom:7px;
}
.roadmap-node.highlight .roadmap-dot{ width:28px; height:28px; }

@media (max-width:720px){
  .roadmap-spine{ left:18px; margin-left:0; }
  .roadmap-node{ grid-template-columns:36px 1fr; margin-bottom:30px; }
  .roadmap-dot{ grid-column:1; }
  .roadmap-node.right .roadmap-slot, .roadmap-node.left .roadmap-slot{
    grid-column:2; transform:translateX(22px); padding-left:18px; padding-right:0; text-align:left;
  }
  .roadmap-node.right .roadmap-slot::before, .roadmap-node.left .roadmap-slot::before{
    left:0; right:auto; width:18px;
  }
}

/* ===================== DOCTOR PHOTO: cinematic full-bleed banner =====================
   Replaces the old "Why This Journey Matters" text section. Hidden by
   default (only shown once a live doctor photo actually loads — see
   loadDoctorBanner() in site.js) so an empty/未-configured state never
   shows a broken image or empty dark box. */
.doctor-banner-section{ display:none; }
.doctor-banner-section.has-photo{ display:block; padding:0; }
.doctor-banner{ position:relative; width:100%; overflow:hidden; line-height:0; }
.doctor-banner img{ width:100%; height:auto; display:block; transform-origin:center center; will-change:transform; }
.doctor-banner-overlay{ position:absolute; left:0; right:0; bottom:0; height:45%; background:linear-gradient(0deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 45%, transparent 100%); }
.doctor-banner-quote{
  position:absolute; left:0; right:0; bottom:0; margin:0; padding:0 6vw 48px;
  color:#fff; font-size:clamp(1.05rem,2.6vw,1.5rem); font-weight:700; line-height:1.5;
  max-width:820px; text-shadow:0 2px 14px rgba(0,0,0,0.4);
}
.doctor-banner-quote:empty{ display:none; }

/* Desktop/laptop only: quote sits centered mid-frame over the still-scrolling
   image, and fades/slides in as the section reaches the middle of the
   viewport, fading out again on scroll-away — mobile keeps the simple
   bottom-anchored, always-visible quote above. */
@media (min-width:901px){
  .doctor-banner-overlay{
    left:0; right:0; top:0; bottom:0; height:auto;
    background:
      linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 20%, rgba(0,0,0,0.15) 38%, transparent 55%),
      radial-gradient(ellipse 70% 60% at center, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 45%, rgba(0,0,0,0.05) 70%, transparent 85%);
  }
  .doctor-banner-quote{
    top:50%; bottom:auto; left:50%; right:auto; margin:0;
    transform:translate(-50%,-50%) translateY(28px);
    text-align:center; max-width:70%; padding:0;
    font-size:clamp(2rem,4.4vw,3.6rem); line-height:1.3;
    text-shadow:0 4px 24px rgba(0,0,0,0.55);
    opacity:0; transition:opacity 0.7s ease, transform 0.7s ease;
  }
  .doctor-banner-quote.in-view{
    opacity:1; transform:translate(-50%,-50%) translateY(0);
  }
}

/* ===================== DOCTOR PHOTOS: portrait split panel ===================== */
.doctor-portrait-section{ display:none; }
.doctor-portrait-section.has-photo{ display:block; }
.doctor-portrait-section.block, .doctor-team-section.block{ max-width:1500px; }
.doctor-portrait-grid{ display:flex; flex-wrap:wrap; gap:24px; justify-content:center; max-width:1180px; margin:0 auto; }
.doctor-portrait-card{ flex:1 1 400px; max-width:560px; }
.doctor-portrait-photo{ border-radius:20px; overflow:hidden; box-shadow:0 16px 40px rgba(52,52,52,0.1); }
.doctor-portrait-photo img{ width:100%; height:460px; object-fit:cover; display:block; }
@media (min-width:901px){
  .doctor-portrait-grid{ max-width:1400px; gap:32px; }
  .doctor-portrait-card{ flex:1 1 500px; max-width:660px; }
  .doctor-portrait-photo img{ height:600px; }
}

/* ===================== DOCTOR PHOTOS: team mini gallery ===================== */
.doctor-team-section{ display:none; }
.doctor-team-section.has-photo{ display:block; }
.doctor-team-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:24px; max-width:1180px; margin:0 auto; }
.doctor-team-card{ border-radius:20px; overflow:hidden; background:#fff; border:1px solid #f0d8d8; box-shadow:0 14px 30px -18px rgba(52,52,52,0.18); }
.doctor-team-card img{ width:100%; height:320px; object-fit:cover; display:block; }
@media (min-width:901px){
  .doctor-team-grid{ max-width:1400px; gap:32px; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); }
  .doctor-team-card img{ height:480px; }
}

/* ===================== DOCTOR PHOTOS: academic scroll strip ===================== */
.doctor-academic-section{ display:none; }
.doctor-academic-section.has-photo{ display:block; }
.doctor-academic-track{
  display:flex; gap:22px; overflow-x:auto; padding:6px 6px 18px; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.doctor-academic-track::-webkit-scrollbar{ height:6px; }
.doctor-academic-track::-webkit-scrollbar-thumb{ background:#e5c4c4; border-radius:10px; }
.doctor-academic-card{
  flex:0 0 auto; width:300px; scroll-snap-align:start; border-radius:18px; overflow:hidden;
  background:#fff; border:1px solid #f0d8d8; box-shadow:0 14px 30px -18px rgba(52,52,52,0.18);
}
.doctor-academic-card img{ width:100%; height:200px; object-fit:cover; display:block; }
.doctor-academic-body{ padding:14px 16px 18px; }
.doctor-academic-year{ display:inline-block; background:#fdeaea; color:var(--red); font-weight:800; font-size:0.75rem; padding:3px 10px; border-radius:100px; margin-bottom:8px; }
.doctor-academic-body p{ color:#5a5a5a; font-size:0.87rem; line-height:1.5; }
@media (max-width:640px){
  .doctor-academic-card{ width:250px; }
}

/* ===================== CONTACT PAGE ===================== */
.contact-hero{ background:#000; color:#fff; text-align:center; padding:14vh 6vw 8vh; }
.contact-hero h1{ font-size:clamp(1.6rem,4vw,2.4rem); font-weight:800; }
.contact-hero p{ margin-top:12px; color:rgba(255,255,255,0.75); max-width:560px; margin-inline:auto; line-height:1.6; }

.map-card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:30px; max-width:1180px; margin:0 auto; padding:8vh 6vw; }
.map-card{
  background:#fff; border:1px solid #f0d8d8; border-radius:24px; overflow:hidden;
  box-shadow:0 20px 46px -22px rgba(52,52,52,0.22);
}
.map-card-frame{ position:relative; width:100%; height:280px; }
.map-card-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.map-card-body{ padding:24px 26px 28px; }
.map-card-body h3{ color:var(--red-deep); font-size:1.15rem; margin-bottom:14px; }
.map-card-body .line{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed #f0d0d0; font-size:0.9rem; color:#4a4a4a; }
.map-card-body .line b{ color:var(--gray); }
.map-card-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.map-card-cta .cta{ flex:1; justify-content:center; padding:12px 18px; font-size:0.85rem; }

.contact-number-band{
  text-align:center; padding:6vh 6vw; background:var(--red); color:#fff;
}
.contact-number-band .label{ font-size:0.82rem; opacity:0.85; margin-bottom:8px; text-transform:uppercase; letter-spacing:0.04em; }
.contact-number-band .number{ font-size:clamp(1.6rem,4vw,2.2rem); font-weight:800; }
.contact-number-band a{ color:inherit; text-decoration:none; }

@media (max-width:640px){
  .map-card-frame{ height:220px; }
}