/* ============================================================
   SHICHIM ONCOCARE — DESIGN TOKENS
   Palette: Aubergine Ink / Royal Lavender / Orchid Mist /
            Champagne Gold / Warm White / Slate Plum
   ============================================================ */
:root{
  --ink:#2A1B3D;          /* aubergine ink — headings, header, footer */
  --ink-soft:#3D2B54;
  --brand:#7B5AA6;        /* royal lavender — primary brand */
  --brand-dark:#5B3F80;
  --brand-light:#9B7BC4;
  --mist:#F1E9FA;         /* orchid mist — section tints */
  --mist-deep:#E4D6F3;
  --gold:#C6A15B;         /* champagne gold — accent / hope */
  --gold-dark:#A9803E;
  --gold-light:#E4CE9A;
  --bg:#FBF9FD;           /* warm white — page background */
  --muted:#6B5C7D;        /* slate plum — secondary text */
  --white:#FFFFFF;
  --line:#E4DCF0;
  --shadow:0 20px 50px -20px rgba(42,27,61,0.25);
  --shadow-sm:0 8px 24px -12px rgba(42,27,61,0.2);
  --radius:18px;
  --radius-sm:10px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
.container{max-width:1440px;margin:0 auto;padding:0 32px;}
section{position:relative;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;color:var(--ink);}
.icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
:focus-visible{outline:2.5px solid var(--gold-dark);outline-offset:3px;}

/* Eyebrow label */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--brand-dark);
  margin-bottom:14px;
}
.eyebrow::before{content:'';width:26px;height:2px;background:var(--gold);border-radius:2px;}
.eyebrow.on-dark{color:var(--gold-light);}

.section-head{max-width:680px;margin-bottom:52px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(28px,3.4vw,42px);letter-spacing:-0.5px;}
.section-head p{color:var(--muted);font-size:17px;margin-top:14px;max-width:560px;}
.section-head.center p{margin-left:auto;margin-right:auto;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border-radius:100px;font-weight:700;font-size:14.5px;
  letter-spacing:0.2px;transition:all .28s ease;white-space:nowrap;
}
.btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--ink);box-shadow:0 12px 28px -10px rgba(198,161,91,0.55);}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(198,161,91,0.65);}
.btn-outline{border:1.5px solid rgba(255,255,255,0.5);color:var(--white);}
.btn-outline:hover{background:rgba(255,255,255,0.12);border-color:#fff;}
.btn-brand{background:var(--brand);color:#fff;box-shadow:0 12px 26px -10px rgba(91,63,128,0.55);}
.btn-brand:hover{background:var(--brand-dark);transform:translateY(-2px);}
.btn-ghost{border:1.5px solid var(--line);color:var(--ink);}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-dark);}
.btn-sm{padding:11px 22px;font-size:13.5px;}

/* ============================================================
   TOP UTILITY BAR
   ============================================================ */
.topbar{
  background:var(--ink);color:rgba(255,255,255,0.82);font-size:13px;
  padding:9px 0;position:relative;z-index:60;
}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.topbar-left{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.topbar-left a{display:flex;align-items:center;gap:7px;transition:color .2s;}
.topbar-left a:hover{color:var(--gold-light);}
.topbar-left .icon{width:14px;height:14px;}
.topbar-badges{display:flex;align-items:center;gap:10px;}
.badge-chip{
  display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.08);
  padding:5px 12px;border-radius:100px;font-size:12px;font-weight:600;
  color:var(--gold-light);border:1px solid rgba(198,161,91,0.3);
}
.topbar-right{display:flex;align-items:center;gap:22px;}
.topbar-right a{color:rgba(255,255,255,0.75);font-weight:600;}
.topbar-right a:hover{color:#fff;}
@media (max-width:980px){.topbar-badges{display:none;}}
@media (max-width:760px){.topbar{padding:7px 0;}.topbar .container{padding:0 20px;}.topbar-left{gap:14px;}.topbar-right{display:none;}}

/* ============================================================
   HEADER — Fortis-style scroll transformation
   The header is position:sticky in normal flow, so it always sits
   on the light page background — never over the dark hero. It is
   therefore light at every scroll position; scrolling only shrinks
   it and adds a shadow.
   ============================================================ */
.site-header{
  position:sticky;top:0;left:0;right:0;z-index:59;
  background:rgba(251,249,253,0.92);
  backdrop-filter:blur(14px) saturate(160%);
  transition:background .4s ease, box-shadow .4s ease, padding .35s ease;
  padding:0;
}
.site-header .header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 32px;max-width:1440px;margin:0 auto;
  transition:padding .35s ease;
}
.site-header.solid{box-shadow:var(--shadow-sm);}
.site-header.solid .header-inner{padding:12px 32px;}
.site-header .nav a{color:var(--ink);}
.site-header .logo-word b, .site-header .logo-word span{color:var(--ink);}

.logo-lockup{display:flex;align-items:center;gap:0;}
.logo-lockup img{height:44px;width:auto;transition:height .3s ease;}
.site-header.solid .logo-lockup img{height:34px;}
.logo-word{display:flex;flex-direction:column;line-height:1.05;}
.logo-word b{font-family:var(--font-display);font-size:19px;letter-spacing:1.5px;transition:color .3s;}
.logo-word span{font-family:var(--font-body);font-size:10px;letter-spacing:3px;font-weight:700;transition:color .3s;}

.nav{display:flex;align-items:center;gap:34px;}
.nav > ul{display:flex;align-items:center;gap:34px;}
.nav a{font-weight:600;font-size:14.5px;transition:color .25s;position:relative;display:flex;align-items:center;gap:5px;}
.nav > ul > li{position:relative;}
.nav > ul > li:hover > a{color:var(--gold-dark) !important;}
.nav .chev{width:12px;height:12px;transition:transform .25s;}
.nav > ul > li:hover .chev{transform:rotate(180deg);}

.dropdown{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;border-radius:14px;box-shadow:var(--shadow);
  padding:18px;min-width:260px;display:grid;gap:4px;
  opacity:0;visibility:hidden;transition:all .25s ease;z-index:80;
  border:1px solid var(--line);
}
.nav > ul > li:hover .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.dropdown a{color:var(--ink) !important;font-weight:600;font-size:14px;padding:9px 12px;border-radius:8px;transition:background .2s;}
.dropdown a:hover{background:var(--mist);color:var(--brand-dark) !important;}

.header-actions{display:flex;align-items:center;gap:12px;}
.header-cta.call{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;}
.header-cta.call .icon{width:17px;height:17px;color:var(--gold);}
.mobile-toggle{display:none;background:none;border:none;padding:6px;}
.mobile-toggle .icon{width:26px;height:26px;}
.site-header .mobile-toggle{color:var(--ink);}

@media (max-width:1080px){
  .nav{display:none;}
  .header-cta.call{display:none;}
  .mobile-toggle{display:block;}
}

/* mobile off-canvas */
.mobile-nav{
  position:fixed;inset:0;background:var(--ink);z-index:200;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.65,0,.35,1);
  padding:30px 28px;overflow-y:auto;
}
.mobile-nav.open{transform:translateX(0);}
.mobile-nav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;}
.mobile-nav-top button{color:#fff;}
.mobile-nav-top .icon{width:28px;height:28px;}
.mobile-nav ul{display:grid;gap:2px;}
.mobile-nav a{display:block;color:#fff;font-size:18px;font-weight:600;padding:15px 4px;border-bottom:1px solid rgba(255,255,255,0.1);}
.mobile-nav .sub-list{padding-left:16px;}
.mobile-nav .sub-list a{font-size:15px;font-weight:500;color:rgba(255,255,255,0.7);padding:10px 4px;border-bottom:none;}
.mobile-nav-cta{margin-top:26px;display:flex;flex-direction:column;gap:12px;}

/* ============================================================
   HERO — video / animated "Oncohope" opening scene
   ============================================================ */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  overflow:hidden;background:var(--ink);
  margin-top:-96px; /* pull up under sticky header for full bleed */
}
.hero-media{position:absolute;inset:0;overflow:hidden;}
.hero-media video{
  width:100%;height:100%;object-fit:cover;
  position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;
}
.hero-media video.loaded{opacity:1;}
.hero-fallback{position:absolute;inset:0;background:
  radial-gradient(ellipse at 30% 20%, rgba(198,161,91,0.35), transparent 55%),
  radial-gradient(ellipse at 75% 75%, rgba(123,90,166,0.55), transparent 60%),
  linear-gradient(160deg,#241730 0%, #3D2B54 45%, #6B4E96 100%);
}
.hero-particles{position:absolute;inset:0;}
.hero-particles span{
  position:absolute;bottom:-20px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,247,224,0.9), rgba(198,161,91,0.15) 70%);
  animation:rise linear infinite;filter:blur(0.4px);
}
@keyframes rise{
  0%{transform:translateY(0) translateX(0) scale(1);opacity:0;}
  8%{opacity:1;}
  90%{opacity:0.6;}
  100%{transform:translateY(-115vh) translateX(var(--drift,20px)) scale(1.3);opacity:0;}
}
.hero-signature{position:absolute;left:50%;top:50%;transform:translate(-50%,-58%);width:min(70vw,640px);opacity:0.9;pointer-events:none;}
.hero-signature svg{width:100%;height:auto;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(42,27,61,0.25) 0%, rgba(42,27,61,0.35) 55%, rgba(42,27,61,0.85) 100%);}

.hero-content{position:relative;z-index:5;color:#fff;padding-top:96px;width:100%;}
.hero-content .container{max-width:1440px;}
.hero-tag{
  display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.25);backdrop-filter:blur(6px);
  padding:9px 18px;border-radius:100px;font-size:13px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;margin-bottom:26px;color:var(--gold-light);
}
.hero-content h1{
  font-size:clamp(38px,6vw,68px);color:#fff;letter-spacing:-1px;font-weight:500;
  margin-bottom:22px;
}
.hero-content h1 em{font-style:italic;color:var(--gold-light);font-weight:400;}
.hero-content p.lead{font-size:19px;color:rgba(255,255,255,0.82);max-width:600px;margin-bottom:38px;font-weight:400;}
.hero-cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:58px;}

.hero-stats{
  display:flex;flex-direction:row;gap:0;
  border-top:1px solid rgba(255,255,255,0.18);padding-top:24px;
  width:fit-content;
}
.hero-stat{padding-right:28px;margin-right:8px;border-right:1px solid rgba(255,255,255,0.15);}
.hero-stat:last-child{border-right:none;}
.hero-stat .num{font-family:var(--font-display);font-size:26px;color:var(--gold-light);font-weight:600;display:block;}
.hero-stat .lbl{font-size:12.5px;color:rgba(255,255,255,0.65);font-weight:600;letter-spacing:0.3px;}
@media (max-width:900px){.hero-stats{grid-template-columns:repeat(3,1fr);row-gap:22px;}.hero-stat:nth-child(3){border-right:none;}}
@media (max-width:560px){.hero-stats{grid-template-columns:repeat(2,1fr);}.hero-stat:nth-child(odd){border-right:1px solid rgba(255,255,255,0.15);}.hero-stat:nth-child(even){border-right:none;}}

.scroll-cue{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,0.7);
  font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;
}
.scroll-cue .line{width:1px;height:34px;background:linear-gradient(to bottom, rgba(255,255,255,0.9), transparent);animation:scrollcue 1.8s ease-in-out infinite;}
@keyframes scrollcue{0%{transform:scaleY(0.3);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}100%{transform:scaleY(0.3);transform-origin:bottom;}}

/* ============================================================
   TRUST MARQUEE STRIP
   ============================================================ */
.trust-strip{background:var(--white);padding:26px 0;border-bottom:1px solid var(--line);overflow:hidden;}
.marquee-track{display:flex;gap:64px;width:max-content;animation:marquee 32s linear infinite;}
.trust-strip:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.trust-item{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:700;font-size:14px;letter-spacing:0.3px;white-space:nowrap;}
.trust-item .icon{color:var(--gold-dark);width:20px;height:20px;}

/* ============================================================
   ABOUT / VISION
   ============================================================ */
.about-section{padding:110px 0;background:var(--bg);}
.about-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:50px;align-items:center;}
.about-visual{position:relative;}
.about-visual-frame{
  border-radius:24px;overflow:hidden;aspect-ratio:3/2;
  background:linear-gradient(155deg,var(--mist),var(--mist-deep));
  display:flex;align-items:center;justify-content:center;position:relative;
  box-shadow:var(--shadow);
}
.about-visual-frame svg{width:35%;}
.about-badge-float{
  position:absolute;bottom:-26px;left:-26px;background:#fff;padding:20px 24px;
  border-radius:16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:14px;
  border:1px solid var(--line);
}
.about-badge-float .icon-wrap{width:46px;height:46px;border-radius:12px;background:var(--mist);display:flex;align-items:center;justify-content:center;color:var(--brand-dark);flex-shrink:0;}
.about-badge-float b{display:block;font-family:var(--font-display);font-size:20px;}
.about-badge-float span{font-size:12.5px;color:var(--muted);font-weight:600;}

.about-copy p{color:var(--muted);font-size:16.5px;margin-bottom:18px;}
.about-copy p.lead-para{font-size:19px;color:var(--ink);font-weight:500;line-height:1.5;}
.about-stat-row{display:flex;gap:36px;margin-top:38px;padding-top:32px;border-top:1px solid var(--line);}
.about-stat b{font-family:var(--font-display);font-size:30px;color:var(--brand-dark);display:block;}
.about-stat span{font-size:13px;color:var(--muted);font-weight:600;}
@media (max-width:940px){.about-grid{grid-template-columns:1fr;gap:60px;}.about-visual-frame{max-width:400px;margin:0 auto;}}

/* ============================================================
   SUPPORT FUND BAND (MOC-F inspired) — dark, gold accent
   ============================================================ */
.fund-band{
  background:linear-gradient(120deg,var(--ink) 0%,var(--ink-soft) 55%, var(--brand-dark) 130%);
  padding:86px 0;color:#fff;position:relative;overflow:hidden;
}
.fund-band::before{
  content:'';position:absolute;top:-120px;right:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle, rgba(198,161,91,0.25), transparent 70%);
}
.fund-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:60px;align-items:center;position:relative;z-index:2;}
.fund-copy p{color:rgba(255,255,255,0.75);font-size:16.5px;margin:18px 0 30px;max-width:520px;}
.fund-cta-row{display:flex;gap:16px;flex-wrap:wrap;}
.fund-card{
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.15);
  border-radius:20px;padding:36px;backdrop-filter:blur(6px);
}
.fund-card ul{display:grid;gap:18px;}
.fund-card li{display:flex;gap:14px;align-items:flex-start;font-size:15px;color:rgba(255,255,255,0.9);}
.fund-card li .icon-wrap{width:36px;height:36px;border-radius:10px;background:rgba(198,161,91,0.18);color:var(--gold-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
@media (max-width:900px){.fund-grid{grid-template-columns:1fr;}}

/* ============================================================
   GENERIC CARD GRID (treatments, why-us, etc.)
   ============================================================ */
.card-grid{display:grid;gap:26px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-6{grid-template-columns:repeat(6,1fr);}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}.grid-6{grid-template-columns:repeat(3,1fr);}}
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}.grid-6{grid-template-columns:repeat(2,1fr);}}

.treatments-section{padding:110px 0;background:var(--mist);}
.tag-pill{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--brand-dark);background:#fff;padding:5px 12px;border-radius:100px;margin-bottom:16px;}
.tcard{
  background:#fff;border-radius:20px;padding:32px 28px;border:1px solid var(--line);
  transition:transform .3s ease, box-shadow .3s ease;
}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.tcard .icon-wrap{
  width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,var(--mist),var(--mist-deep));
  display:flex;align-items:center;justify-content:center;color:var(--brand-dark);margin-bottom:20px;
}
.tcard .icon-wrap .icon{width:26px;height:26px;}
.tcard h3{font-size:20px;margin-bottom:10px;}
.tcard p{color:var(--muted);font-size:15px;}
.section-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--brand-dark);font-size:14.5px;margin-top:8px;}
.section-link .icon{width:16px;height:16px;transition:transform .25s;}
.section-link:hover .icon{transform:translateX(4px);}
.section-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:52px;}
@media (max-width:700px){.section-head-row{flex-direction:column;align-items:flex-start;}}

/* ============================================================
   SCREENING STEPS
   ============================================================ */
.steps-section{padding:110px 0;background:var(--bg);}
.steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;counter-reset:step;position:relative;}
.steps-row::before{content:'';position:absolute;top:34px;left:12%;right:12%;height:1px;background:repeating-linear-gradient(to right, var(--line) 0 8px, transparent 8px 16px);}
.step-item{position:relative;z-index:1;}
.step-num{
  width:68px;height:68px;border-radius:50%;background:var(--white);border:1.5px solid var(--brand);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-size:24px;color:var(--brand-dark);font-weight:600;margin-bottom:24px;box-shadow:var(--shadow-sm);
}
.step-item h4{font-size:19px;margin-bottom:10px;}
.step-item p{color:var(--muted);font-size:15px;}
@media (max-width:800px){.steps-row{grid-template-columns:1fr;}.steps-row::before{display:none;}}

/* ============================================================
   CANCER TYPES
   ============================================================ */
.types-section{padding:110px 0;background:var(--white);}
.types-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:38px;}
.type-tab{
  padding:9px 20px;border-radius:100px;font-size:13.5px;font-weight:700;
  border:1.5px solid var(--line);color:var(--muted);transition:all .2s;
}
.type-tab.active, .type-tab:hover{background:var(--brand);color:#fff;border-color:var(--brand);}
.type-card{
  background:var(--mist);border-radius:18px;padding:26px 22px;text-align:left;
  transition:all .3s ease;border:1px solid transparent;
}
.type-card:hover{background:#fff;border-color:var(--brand-light);transform:translateY(-4px);box-shadow:var(--shadow-sm);}
.type-card .icon-wrap{width:44px;height:44px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--brand-dark);margin-bottom:16px;}
.type-card h4{font-size:16.5px;margin-bottom:4px;}
.type-card span{font-size:13px;color:var(--muted);}

/* ============================================================
   JOURNEY / ROADMAP
   ============================================================ */
.journey-section{padding:110px 0;background:var(--ink);color:#fff;position:relative;overflow:hidden;}
.journey-section::after{content:'';position:absolute;bottom:-160px;left:-100px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle, rgba(123,90,166,0.35), transparent 70%);}
.journey-section .section-head p{color:rgba(255,255,255,0.65);}
.journey-row{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;position:relative;z-index:2;}
.jcard{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);border-radius:18px;padding:26px 20px;position:relative;}
.jcard .jnum{position:absolute;top:-14px;left:20px;background:var(--gold);color:var(--ink);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;}
.jcard .icon-wrap{width:44px;height:44px;border-radius:12px;background:rgba(198,161,91,0.15);color:var(--gold-light);display:flex;align-items:center;justify-content:center;margin-bottom:18px;margin-top:6px;}
.jcard h4{color:#fff;font-size:16.5px;margin-bottom:8px;}
.jcard p{color:rgba(255,255,255,0.6);font-size:13.5px;}
@media (max-width:1000px){.journey-row{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.journey-row{grid-template-columns:1fr;}}

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
.why-section{padding:110px 0;background:var(--bg);}
.why-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px 28px;transition:all .3s;}
.why-card:hover{border-color:var(--brand-light);box-shadow:var(--shadow-sm);transform:translateY(-4px);}
.why-card .icon-wrap{width:52px;height:52px;border-radius:14px;background:var(--mist);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.why-card h4{font-size:18.5px;margin-bottom:10px;}
.why-card p{color:var(--muted);font-size:14.5px;}

/* ============================================================
   CENTRES
   ============================================================ */
.centres-section{padding:110px 0;background:var(--mist);}
.centre-card{background:#fff;border-radius:22px;overflow:hidden;border:1px solid var(--line);transition:all .3s;}
.centre-card:hover{box-shadow:var(--shadow);transform:translateY(-5px);}
.centre-media{height:190px;background:linear-gradient(135deg,var(--brand-light),var(--brand-dark));position:relative;display:flex;align-items:center;justify-content:center;}
.centre-media .icon{width:52px;height:52px;color:rgba(255,255,255,0.85);}
.centre-status{position:absolute;top:16px;left:16px;padding:6px 14px;border-radius:100px;font-size:12px;font-weight:800;letter-spacing:0.3px;}
.centre-status.open{background:#fff;color:#1c8a4b;}
.centre-status.soon{background:rgba(255,255,255,0.9);color:var(--gold-dark);}
.centre-body{padding:26px 24px;}
.centre-body h3{font-size:20px;margin-bottom:10px;}
.centre-body p{color:var(--muted);font-size:14.5px;margin-bottom:18px;}
.centre-tags{display:flex;gap:8px;flex-wrap:wrap;}
.centre-tags span{font-size:12px;font-weight:700;background:var(--mist);color:var(--brand-dark);padding:5px 12px;border-radius:100px;}

/* ============================================================
   OUR TEAM — blank placeholder cards (no names / no photos)
   ============================================================ */
.team-section{padding:110px 0;background:var(--white);}
.team-note{
  display:flex;align-items:center;gap:12px;background:var(--mist);border:1px dashed var(--brand-light);
  border-radius:14px;padding:16px 22px;margin-bottom:44px;color:var(--brand-dark);font-size:14px;font-weight:600;
}
.team-note .icon{width:20px;height:20px;flex-shrink:0;}
.team-card{
  background:var(--mist);border-radius:20px;padding:30px 26px;text-align:center;
  border:1px solid var(--line);position:relative;overflow:hidden;
}
.team-avatar{
  width:96px;height:96px;border-radius:50%;margin:0 auto 22px;background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--brand-light);
  border:1.5px dashed var(--brand-light);position:relative;
}
.team-avatar .icon{width:42px;height:42px;}
.placeholder-line{height:13px;border-radius:6px;background:linear-gradient(90deg,var(--mist-deep) 25%, #fff 50%, var(--mist-deep) 75%);background-size:200% 100%;animation:shimmer 2.6s ease-in-out infinite;margin:0 auto;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.pl-name{width:64%;height:16px;margin-bottom:12px;}
.pl-title{width:80%;margin-bottom:8px;}
.pl-cred{width:55%;margin-bottom:18px;}
.pl-tags{display:flex;gap:8px;justify-content:center;}
.pl-tags .placeholder-line{width:60px;height:22px;border-radius:100px;}
.team-badge{position:absolute;top:16px;right:16px;font-size:11px;font-weight:800;color:var(--brand-light);letter-spacing:0.5px;text-transform:uppercase;opacity:0.7;}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-section{padding:110px 0;background:var(--ink);color:#fff;}
.testi-section .section-head p{color:rgba(255,255,255,0.6);}
.testi-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);border-radius:22px;padding:34px 30px;}
.testi-stars{color:var(--gold);display:flex;gap:3px;margin-bottom:18px;}
.testi-stars .icon{width:16px;height:16px;fill:var(--gold);stroke:none;}
.testi-quote-mark{color:var(--brand-light);width:30px;height:30px;margin-bottom:10px;opacity:0.6;}
.testi-card p.quote{font-size:15.5px;color:rgba(255,255,255,0.85);margin-bottom:26px;min-height:130px;}
.testi-person{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.12);}
.testi-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--gold-light),var(--gold));display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--ink);font-size:14px;flex-shrink:0;}
.testi-person b{display:block;font-size:14.5px;}
.testi-person span{font-size:12.5px;color:rgba(255,255,255,0.55);}
.testi-tag{margin-top:14px;display:inline-block;font-size:12px;font-weight:700;color:var(--gold-light);background:rgba(198,161,91,0.15);padding:5px 12px;border-radius:100px;}

/* ============================================================
   INSURANCE STRIP
   ============================================================ */
.insure-band{background:var(--bg);padding:70px 0;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.insure-band h3{font-size:22px;margin-bottom:30px;}
.insure-logos{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}
.insure-logos span{background:#fff;border:1px solid var(--line);padding:12px 24px;border-radius:100px;font-weight:700;color:var(--muted);font-size:14px;display:flex;align-items:center;gap:8px;}
.insure-logos .icon{width:16px;height:16px;color:var(--brand);}

/* ============================================================
   AWARENESS / ARTICLES
   ============================================================ */
.articles-section{padding:110px 0;background:var(--white);}
.acard{border-radius:20px;overflow:hidden;border:1px solid var(--line);transition:all .3s;}
.acard:hover{box-shadow:var(--shadow);transform:translateY(-5px);}
.acard-media{height:170px;background:linear-gradient(140deg,var(--mist),var(--mist-deep));display:flex;align-items:center;justify-content:center;color:var(--brand);}
.acard-media .icon{width:40px;height:40px;}
.acard-body{padding:24px 22px;}
.acard-tag{font-size:11.5px;font-weight:800;color:var(--gold-dark);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:10px;display:block;}
.acard-body h4{font-size:17px;margin-bottom:12px;line-height:1.35;}
.acard-meta{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}

/* ============================================================
   FINAL CTA BAND
   ============================================================ */
.cta-band{
  background:linear-gradient(120deg,var(--brand-dark), var(--brand) 60%, var(--gold-dark));
  padding:90px 0;color:#fff;text-align:center;position:relative;overflow:hidden;
}
.cta-band h2{color:#fff;font-size:clamp(28px,3.6vw,44px);max-width:700px;margin:0 auto 20px;}
.cta-band p{color:rgba(255,255,255,0.85);font-size:17px;max-width:560px;margin:0 auto 36px;}
.cta-row{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}
.cta-band .btn-outline{border-color:rgba(255,255,255,0.6);}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--ink);color:rgba(255,255,255,0.65);padding-top:90px;}
.footer-top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:40px;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,0.1);}
.footer-brand .logo-lockup img{height:40px;}
.footer-brand p{margin-top:18px;font-size:14.5px;max-width:280px;color:rgba(255,255,255,0.55);}
.footer-social{display:flex;gap:10px;margin-top:22px;}
.footer-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;transition:background .2s;}
.footer-social a:hover{background:var(--brand);}
.footer-col h5{color:#fff;font-size:14px;letter-spacing:1px;text-transform:uppercase;margin-bottom:22px;font-weight:700;}
.footer-col ul{display:grid;gap:13px;}
.footer-col a{font-size:14.5px;transition:color .2s;}
.footer-col a:hover{color:var(--gold-light);}
.footer-col.contact li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;}
.footer-col.contact .icon{width:17px;height:17px;color:var(--gold);flex-shrink:0;margin-top:2px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:26px 0;font-size:13px;flex-wrap:wrap;gap:12px;}
.footer-bottom-links{display:flex;gap:22px;flex-wrap:wrap;}
.footer-bottom-links a:hover{color:#fff;}
@media (max-width:980px){.footer-top{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr;}}

/* ============================================================
   FLOATING MOBILE CTA
   ============================================================ */
.float-cta{
  position:fixed;bottom:0;left:0;right:0;z-index:150;display:none;
  background:#fff;box-shadow:0 -10px 30px -10px rgba(42,27,61,0.3);
  padding:14px 18px;gap:12px;
}
.float-cta a{flex:1;text-align:center;}
@media (max-width:760px){.float-cta{display:flex;}}

/* ============================================================
   MODAL — appointment booking
   ============================================================ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(42,27,61,0.55);backdrop-filter:blur(4px);
  z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;visibility:hidden;transition:all .3s ease;
}
.modal-overlay.open{opacity:1;visibility:visible;}
.modal-box{
  background:#fff;border-radius:24px;max-width:520px;width:100%;max-height:88vh;overflow-y:auto;
  padding:40px;position:relative;transform:translateY(20px);transition:transform .35s ease;
}
.modal-overlay.open .modal-box{transform:translateY(0);}
.modal-close{position:absolute;top:20px;right:20px;width:38px;height:38px;border-radius:50%;background:var(--mist);display:flex;align-items:center;justify-content:center;color:var(--ink);}
.modal-box h3{font-size:26px;margin-bottom:8px;}
.modal-box .sub{color:var(--muted);font-size:14.5px;margin-bottom:28px;}
.form-row{display:grid;gap:8px;margin-bottom:18px;}
.form-row label{font-size:13px;font-weight:700;color:var(--ink);}
.form-row input, .form-row select, .form-row textarea{
  padding:13px 16px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:14.5px;
  background:var(--bg);transition:border-color .2s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{border-color:var(--brand);outline:none;}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.modal-box .btn{width:100%;margin-top:6px;}
.form-note{text-align:center;font-size:12.5px;color:var(--muted);margin-top:16px;}
.modal-success{text-align:center;padding:20px 0;}
.modal-success .icon-wrap{width:70px;height:70px;border-radius:50%;background:var(--mist);color:var(--brand-dark);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
.modal-success .icon-wrap .icon{width:32px;height:32px;}
.hidden{display:none !important;}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* utility */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
@media (max-width:760px){.grid-2{grid-template-columns:1fr;}}


/* ============================================================
   SUBPAGE COMPONENTS — leadership.html / treatments.html
   ============================================================ */
.page-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--ink) 0%,var(--ink-soft) 52%,var(--brand-dark) 100%);
  color:#fff;padding:112px 0 92px;
}
.page-hero::after{
  content:'';position:absolute;top:-30%;right:-8%;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(198,161,91,0.18) 0%,transparent 68%);pointer-events:none;
}
.page-hero .container{position:relative;z-index:1;}
.page-hero h1{color:#fff;font-size:clamp(32px,4.4vw,56px);letter-spacing:-0.5px;max-width:15ch;}
.page-hero h1 em{font-style:italic;color:var(--gold-light);}
.page-hero p{color:rgba(255,255,255,0.78);font-size:17.5px;margin-top:18px;max-width:60ch;}
.page-hero .cta-row{margin-top:32px;}

.breadcrumb{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:13px;font-weight:600;letter-spacing:.4px;
  color:rgba(255,255,255,0.62);margin-bottom:20px;
}
.breadcrumb a{color:rgba(255,255,255,0.82);}
.breadcrumb a:hover{color:var(--gold-light);}
.breadcrumb svg{width:13px;height:13px;opacity:.6;}
.breadcrumb .current{color:var(--gold-light);}

/* --- Treatment detail blocks --- */
.treat-block{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  padding:76px 0;border-bottom:1px solid var(--line);scroll-margin-top:110px;
}
.treat-block:last-child{border-bottom:none;}
.treat-block:nth-child(even) .treat-visual{order:-1;}
.treat-block h3{font-size:clamp(24px,2.6vw,34px);margin-bottom:16px;}
.treat-block > div > p{color:var(--muted);font-size:16.5px;margin-bottom:22px;}
.treat-facts{display:flex;flex-direction:column;gap:13px;margin-bottom:26px;}
.treat-facts li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;}
.treat-facts svg{width:19px;height:19px;color:var(--brand);flex-shrink:0;margin-top:3px;}
.treat-meta{display:flex;gap:12px;flex-wrap:wrap;}
.treat-visual{
  position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(150deg,var(--mist) 0%,var(--mist-deep) 100%);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
}
.treat-visual svg{width:96px;height:96px;color:var(--brand);stroke-width:1.1;opacity:.55;}
.treat-visual::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,0.7),transparent 60%);
}

/* --- Leadership bio cards --- */
.bio-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;text-align:center;transition:transform .35s ease, box-shadow .35s ease;
}
.bio-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.bio-card .team-avatar{margin:0 auto 18px;}
.bio-role{
  font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--brand-dark);margin-bottom:14px;
}
.bio-card p{color:var(--muted);font-size:14.5px;line-height:1.65;}

/* --- Values / governance strip --- */
.value-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;
}
.value-card .icon-wrap{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--mist);color:var(--brand-dark);margin-bottom:18px;
}
.value-card h4{font-size:19px;margin-bottom:10px;}
.value-card p{color:var(--muted);font-size:15px;}

/* --- FAQ --- */
.faq-item{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);
  margin-bottom:12px;overflow:hidden;
}
.faq-item summary{
  cursor:pointer;list-style:none;padding:20px 24px;
  font-family:var(--font-display);font-weight:600;font-size:17px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-size:22px;color:var(--brand);font-family:var(--font-body);line-height:1;}
.faq-item[open] summary::after{content:'\2212';}
.faq-item p{padding:0 24px 22px;color:var(--muted);font-size:15.5px;}

@media (max-width:900px){
  .page-hero{padding:88px 0 68px;}
  .treat-block{grid-template-columns:1fr;gap:32px;padding:52px 0;}
  .treat-block:nth-child(even) .treat-visual{order:0;}
}

/* --- About badge: named medical director (replaces the stat badge) --- */
.about-badge-float b{font-size:18px;white-space:nowrap;letter-spacing:-0.2px;}
.about-badge-float .badge-role{
  display:block;margin-top:3px;font-style:italic;font-weight:500;
  font-family:var(--font-display);font-size:13.5px;color:var(--brand-dark);
}
@media (max-width:900px){
  .about-badge-float{left:0;bottom:-18px;padding:16px 20px;}
  .about-badge-float b{font-size:16.5px;}
}

/* ============================================================
   CANCER TYPES CAROUSEL
   --per = cards visible per slide; JS reads it to page correctly.
   Card width is derived from --per so the two never disagree.
   ============================================================ */
section[id]{scroll-margin-top:96px;}

.carousel{overflow:hidden;}
.carousel-track{
  --per:4;
  --gap:26px;
  display:flex;gap:var(--gap);
  transition:transform .6s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.carousel-track > .type-card{
  flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
}

/* bigger banners than the old static grid */
.carousel-track > .type-card{
  padding:34px 28px;min-height:208px;border-radius:20px;
  display:flex;flex-direction:column;
}
.carousel-track > .type-card .icon-wrap{width:56px;height:56px;border-radius:15px;margin-bottom:20px;}
.carousel-track > .type-card .icon-wrap .icon{width:26px;height:26px;}
.carousel-track > .type-card h4{font-size:21px;margin-bottom:6px;}
.carousel-track > .type-card span{font-size:14px;color:var(--muted);font-weight:600;}

/* nav buttons */
.carousel-nav{display:flex;gap:10px;align-items:center;flex-shrink:0;}
.car-btn{
  width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--white);color:var(--brand-dark);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s, border-color .2s, color .2s, transform .2s;
}
.car-btn:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-2px);}
.car-btn .icon{width:20px;height:20px;}
.car-btn .icon.flip{transform:rotate(180deg);}
.car-play .ico-play{display:none;}
.car-play.paused .ico-pause{display:none;}
.car-play.paused .ico-play{display:block;}

/* dots */
.carousel-dots{display:flex;justify-content:center;gap:10px;margin-top:38px;}
.carousel-dots button{
  width:9px;height:9px;border-radius:50%;padding:0;
  background:var(--mist-deep);transition:width .3s ease, background .3s ease;
}
.carousel-dots button[aria-selected="true"]{width:30px;border-radius:6px;background:var(--brand);}

@media (max-width:1200px){ .carousel-track{--per:3;} }
@media (max-width:900px){  .carousel-track{--per:2;} .carousel-nav{align-self:flex-start;} }
@media (max-width:600px){  .carousel-track{--per:1;--gap:18px;} }

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

/* Article cards that link out need to stay block-level as <a> elements. */
.acard{display:block;}

/* ============================================================
   PHOTOGRAPHY
   Cards that previously showed a line icon now carry a photo.
   ============================================================ */
.acard-media img,
.centre-media img,
.tcard-media img,
.type-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,0,.2,1);
}
.acard:hover .acard-media img,
.centre-card:hover .centre-media img,
.tcard:hover .tcard-media img{transform:scale(1.06);}

/* article + centre media are already fixed-height boxes */
.acard-media{padding:0;}
.centre-media{overflow:hidden;}
/* keep the status pill above the photo */
.centre-status{z-index:2;}
.centre-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(42,27,61,0.34) 0%,transparent 45%);
  pointer-events:none;
}

/* treatment teaser: full-bleed photo band above the padded body */
.tcard{overflow:hidden;}
.tcard-media{
  height:180px;margin:-32px -28px 22px;overflow:hidden;position:relative;
}

/* carousel cards: photo band + brand duotone so 12 stock shots read as one set */
.carousel-track > .type-card{overflow:hidden;}
.type-media{
  height:148px;margin:-34px -28px 18px;overflow:hidden;position:relative;
}
.type-media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(123,90,166,0.55) 0%,rgba(42,27,61,0.62) 100%);
  mix-blend-mode:multiply;
}
.carousel-track > .type-card:hover .type-media::after{opacity:0.82;}
.type-media::after{transition:opacity .35s ease;}

@media (max-width:900px){
  .tcard-media{height:160px;}
  .type-media{height:132px;}
}
@media (max-width:600px){
  .type-media{margin:-34px -28px 18px;}
}

/* treatments.html — detail blocks now carry photographs, not icons */
.treat-visual{padding:0;}
.treat-visual::before{content:none;}
.treat-visual img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,0,.2,1);
}
.treat-block:hover .treat-visual img{transform:scale(1.04);}

/* --- Appointment form: honeypot + error state --- */
/* Off-screen rather than display:none — some bots skip hidden inputs. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.form-error{
  background:#FDECEC;border:1px solid #F3C6C6;color:#8E2A2A;
  border-radius:var(--radius-sm);padding:12px 14px;font-size:14px;
  margin-bottom:14px;font-weight:600;
}
#apptSubmit:disabled{opacity:.62;cursor:not-allowed;}

/* ============================================================
   RESPONSIVE PASS — appended last so these rules win.
   Earlier breakpoints were added piecemeal (560/600/620/700/760/
   800/900/940/980/1000/1080/1200). This section fixes the real
   breakages rather than renumbering all of them.
   ============================================================ */

/* --- Overflow guards -------------------------------------------------
   A grid/flex item defaults to min-width:auto, so a wide child (the
   "Not Sure - Need Consultation" <select>) refuses to shrink and pushes
   its track past 1fr. That is the modal's horizontal scrollbar. */
.form-grid-2, .form-row{min-width:0;}
.form-row input, .form-row select, .form-row textarea{
  width:100%; max-width:100%; min-width:0;
}
.form-row textarea{resize:vertical;}
/* width/height attributes on <img> keep aspect ratio only if height is auto */
img{height:auto;}

@media (max-width:760px){
  .container{padding:0 20px;}
  .header-inner{padding:16px 20px !important;}

  /* iOS zooms the page when a focused input is under 16px. */
  .form-row input, .form-row select, .form-row textarea{font-size:16px;}
}

@media (max-width:620px){
  /* Two columns of inputs is too tight to type in on a phone. */
  .form-grid-2{grid-template-columns:1fr;gap:0;}
  .modal-overlay{padding:14px;}
  .modal-box{padding:26px 22px;border-radius:18px;max-height:92vh;}
  .modal-box h3{font-size:22px;}
}

@media (max-width:560px){
  .container{padding:0 16px;}

  /* Logo lockup: shrink the mark, drop the smallest strapline. */
  .logo-lockup img{height:34px !important;}
  .logo-lockup > div > span:last-child{display:none;}

  /* Full-width CTAs read better than two cramped pills. */
  .hero-cta-row, .cta-row{flex-direction:column;align-items:stretch;}
  .hero-cta-row .btn, .cta-row .btn, .page-hero .cta-row .btn{width:100%;}
  .btn{white-space:normal;}

  /* Carousel controls sit under the heading once it stacks. */
  .carousel-nav{margin-top:18px;}

  .section-head h2{font-size:clamp(24px,7vw,32px);}
  .footer-bottom{flex-direction:column;text-align:center;}
  .insure-logos{gap:10px;font-size:13px;}
}

@media (max-width:400px){
  .logo-lockup img{height:30px !important;}
  .modal-box{padding:22px 16px;}
  .float-cta .btn{padding:11px 14px;font-size:12.5px;}
}

/* --- Mobile fixes found by rendering at a real 390px viewport ---------- */

/* .hero-stats is display:flex, but the 900px/560px breakpoints set
   grid-template-columns on it — a no-op on a flex container. So the four
   stats stayed in one row and "NABH / Accredited" fell off the screen.
   Switch it to a real grid at those widths. */
@media (max-width:900px){
  .hero-stats{display:grid;width:100%;gap:0 0;}
  .hero-stat{padding-right:18px;margin-right:0;}
  .hero-stat:nth-child(3){border-right:none;}
}
@media (max-width:560px){
  .hero-stats{row-gap:22px;}
  .hero-stat:nth-child(3){border-right:1px solid rgba(255,255,255,0.15);}
}

/* The header tried to fit logo + "Book Appointment" + hamburger into 390px,
   so the button sat on top of the logo. The floating bottom bar already
   carries Book Appointment on mobile, so drop the duplicate from the header. */
@media (max-width:760px){
  .header-actions .btn-gold{display:none;}
  .header-actions{gap:0;}
  .mobile-toggle{padding:6px 0 6px 10px;}
}

/* --- Carousel touch swipe -------------------------------------------------
   pan-y: the browser owns vertical scrolling, we own horizontal gestures.
   Without this, Chrome treats a horizontal drag as a page scroll attempt and
   the swipe handler never sees a clean gesture.
   The images inside are draggable by default, which hijacks the gesture. */
.carousel{touch-action:pan-y;}
.carousel img{-webkit-user-drag:none;user-select:none;pointer-events:none;}

/* --- Logo on dark backgrounds (mobile menu, footer) -----------------------
   These used filter:brightness(0) invert(1), which is a trick for a
   single-colour SVG. logo.jpg is a full-colour photo, so that filter crushed
   it to black then inverted it to a solid white rectangle. Present it on a
   white chip instead, the same way the header does. */
.logo-chip{
  height:52px;width:auto;display:block;
  background:#fff;border-radius:10px;padding:6px 8px;
  box-shadow:0 2px 12px -4px rgba(0,0,0,0.35);
}
.logo-chip-sm{height:44px;}

/* The square badge is illegible below ~56px, so give it room. */
.logo-chip{height:56px;}
.logo-chip-sm{height:60px;}

/* `.mobile-nav a` (display:block, padding:15px 4px, border-bottom) also matched
   the "Call" pill inside .mobile-nav-cta and out-specified `.btn`, flattening it
   into a left-aligned block with a stray underline. Restore the button. */
.mobile-nav .mobile-nav-cta a.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border-bottom:none;
}

/* Leadership cards: bold name over an italic role, matching the
   "Dr. Amit Upadhyay / General Medical Director" badge on the home page. */
.bio-card .bio-name{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:19px;letter-spacing:-0.2px;color:var(--ink);
}
.bio-card .bio-role{
  display:block;margin-top:4px;margin-bottom:0;
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:14px;letter-spacing:0;text-transform:none;color:var(--brand-dark);
}

/* --- Language toggle (EN / हिं) ------------------------------------------- */
.lang-toggle{
  display:inline-flex;border:1.5px solid var(--line);border-radius:100px;
  overflow:hidden;background:var(--white);flex-shrink:0;
}
.lang-toggle button{
  padding:7px 13px;font-size:13px;font-weight:700;color:var(--muted);
  background:transparent;line-height:1;transition:background .2s,color .2s;
}
.lang-toggle button.active{background:var(--brand);color:#fff;}
.lang-toggle button:not(.active):hover{color:var(--brand-dark);}
@media (max-width:560px){
  .lang-toggle button{padding:6px 10px;font-size:12px;}
}