/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CDFC HOSPITAL — DESIGN SYSTEM v2.8
   Reused directly from index.html (the approved design mockup).
   Loads AFTER main.css. Selectors shared with every template
   (nav, buttons, footer, mesh) use !important where main.css
   has legacy duplicate rules, so this file reliably wins the
   cascade without requiring a rewrite of main.css itself.
   Front-page-only section classes (hero, why-grid, journey-
   track, outcomes, doc-grid, stories-grid, articles-grid,
   slider-*, mega-*) are new class names with zero collision
   risk against the old theme, so they need no !important.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ============================================================
   CDFC HOSPITAL — DESIGN SYSTEM v2.7
   Premium glassmorphism · Royal Plum + Golden Amber
   ============================================================ */
:root{
  /* ---- Brand core (exact) ---- */
  --plum:        #6d2e7b;
  --amber:       #f3b224;
  --ink:         #545454;

  /* ---- Derived brand ramp ---- */
  --plum-900:    #33163a;
  --plum-800:    #4a1f54;
  --plum-700:    #5b2668;
  --plum-600:    #6d2e7b;
  --plum-500:    #8a4198;
  --plum-400:    #a95fb6;
  --amber-600:   #d99414;
  --amber-500:   #f3b224;
  --amber-400:   #ffcc5c;
  --amber-300:   #ffe1a0;

  --ink-900:     #201f22;
  --ink-700:     #3f3d42;
  --ink-500:     #545454;
  --ink-300:     #8b8890;
  --ink-100:     #d8d5db;

  --bg:          #f7f4fa;
  --surface:     #ffffff;
  --glass:       rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.78);
  --glass-dark:  rgba(51,22,58,.55);
  --border-glass:rgba(255,255,255,.45);

  /* ---- Gradients ---- */
  --grad-brand: linear-gradient(135deg,var(--plum-600) 0%,var(--plum-800) 55%,var(--plum-900) 100%);
  --grad-accent: linear-gradient(120deg,var(--amber-400) 0%,var(--amber-500) 45%,var(--amber-600) 100%);
  --grad-mesh-1: radial-gradient(circle at 15% 20%, rgba(138,65,152,.32), transparent 55%);
  --grad-mesh-2: radial-gradient(circle at 85% 15%, rgba(109,46,123,.40), transparent 50%);
  --grad-mesh-3: radial-gradient(circle at 60% 90%, rgba(169,95,182,.30), transparent 55%);

  /* ---- Elevation ---- */
  --shadow-sm: 0 2px 8px rgba(51,22,58,.06);
  --shadow-md: 0 8px 24px rgba(51,22,58,.10);
  --shadow-lg: 0 20px 48px rgba(51,22,58,.16);
  --shadow-glow: 0 0 0 1px rgba(255,255,255,.5) inset, 0 20px 48px rgba(51,22,58,.14);

  /* ---- Radius / spacing scale ---- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Roboto', sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  color: var(--ink-500);
  background: var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4,h5{font-family:var(--font-display); color:var(--ink-900); font-weight:800; letter-spacing:-.01em; line-height:1.15;}
.container{max-width:1240px; margin:0 auto; padding:0 var(--sp-5);}
section{position:relative; padding: var(--sp-9) 0;}
.section-white{ background:#fff; z-index:1; box-shadow:0 1px 0 rgba(45,16,53,.04) inset; overflow:hidden; }
.section-white::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(circle at 15% 10%, rgba(169,95,182,.06), transparent 45%),
              radial-gradient(circle at 85% 90%, rgba(109,46,123,.07), transparent 50%);
}
.section-tint{
  background: linear-gradient(180deg, rgba(109,46,123,.06) 0%, rgba(109,46,123,0) 40%), var(--paper, #f9f8fc);
  z-index:1; overflow:hidden;
  box-shadow:0 1px 0 rgba(45,16,53,.04) inset;
}
.nav-scroll-glass{
  position:fixed; top:0; left:0; right:0; height:100px; z-index:90; pointer-events:none;
  backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  -webkit-mask-image:linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
  mask-image:linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
  background:linear-gradient(to bottom, rgba(247,244,250,.75) 0%, rgba(247,244,250,.35) 55%, transparent 100%);
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--amber-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------- Ambient background mesh ---------------- */
.mesh-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: var(--grad-mesh-1), var(--grad-mesh-2), var(--grad-mesh-3), var(--bg);
}
.orb{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.55;
  animation: drift 18s var(--ease) infinite alternate;
}
.orb--1{ width:420px; height:420px; top:-120px; left:-100px; background: var(--plum-400); }
.orb--2{ width:520px; height:520px; top:220px; right:-160px; background: var(--grad-brand); animation-delay:-6s; }
.orb--3{ width:340px; height:340px; bottom:-140px; left:35%; background: var(--plum-400); animation-delay:-12s; }
@keyframes drift{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(30px,-24px) scale(1.08);} }

/* ================= NAV ================= */
/* .nav-wrap and .mega-panel share these two variables so the floating
   pill and the mega dropdown are *structurally* guaranteed to be the
   same width — not just two separately-maintained rules that happen to
   match today. --nav-maxw is the content width both cap at; --nav-gutter
   is the side gutter both wrappers apply below --nav-bp (above it, the
   gutter is zero and --nav-maxw + margin:auto centering alone reproduces
   .container's exact math). */
:root{
  --nav-maxw:1240px;
  --nav-gutter:0px;
}
@media (max-width:1300px){
  :root{ --nav-gutter:var(--sp-5); }
}
.nav-wrap{ position:sticky !important; top:16px !important; z-index:100 !important; padding:0 var(--nav-gutter) !important; }
.nav{ width:97% !important; max-width:var(--nav-maxw) !important; margin:0 auto !important; display:flex !important; align-items:center !important; justify-content:space-between !important; padding: 10px 10px 10px 22px !important; background: var(--glass-strong) !important; backdrop-filter: blur(18px) saturate(160%) !important; -webkit-backdrop-filter: blur(18px) saturate(160%) !important; border: 1px solid var(--border-glass) !important; border-radius: var(--r-pill) !important; box-shadow: var(--shadow-md) !important; transition: box-shadow .3s var(--ease) !important; }
.brand{ display:flex !important; align-items:center !important; gap:10px !important; font-family:var(--font-display) !important; font-weight:800 !important; font-size:1.05rem !important; color:var(--plum-800) !important; }
.brand-mark{ width:34px !important; height:34px !important; border-radius:10px !important; background: var(--grad-brand) !important; display:flex !important; align-items:center !important; justify-content:center !important; color:#fff !important; font-size:.85rem !important; font-weight:900 !important; box-shadow: var(--shadow-sm) !important; }

/* Custom logo (Customizer-uploaded) — WordPress outputs this with only raw
   width/height HTML attributes and no CSS backing them, so without this it
   renders at whatever size those attributes calculate to, unconstrained by
   the nav's actual height and prone to non-uniform scaling/distortion if
   the registered custom-logo aspect ratio doesn't match the real image. */
.custom-logo-link{ display:flex !important; align-items:center !important; }
.custom-logo{
  height:44px !important; width:auto !important; max-width:200px !important;
  object-fit:contain !important; image-rendering:-webkit-optimize-contrast;
}
@media (max-width:640px){ .custom-logo{ height:36px !important; max-width:150px !important; } }
.nav-links{ display:flex; gap:var(--sp-5); align-items:center; }
.nav-links a{ font-size:.9rem !important; font-weight:600 !important; color:var(--ink-700) !important; padding:8px 4px !important; position:relative !important; }
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:var(--grad-accent); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
.nav-links a:hover::after{ transform:scaleX(1); }

/* ---- Mega menu ---- */
.nav-item{ position:relative; }
.nav-item.has-mega > .mega-trigger{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; background:none; border:none; font:inherit; }
.nav-item.has-mega > .mega-trigger svg{ width:13px; height:13px; transition:transform .25s var(--ease); }
.nav-item.has-mega:hover > .mega-trigger svg,
.nav-item.has-mega:focus-within > .mega-trigger svg{ transform:rotate(180deg); }
.mega-panel{
  position:fixed; top:90px; left:0; right:0; width:100%; padding:0 var(--nav-gutter) !important;
  box-sizing:border-box;
  transform:translateY(8px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index:150;
}
.mega-panel-inner{
  max-width:var(--nav-maxw) !important; width:97%; margin:0 auto !important; box-sizing:border-box;
  padding:var(--sp-6) var(--sp-5);
  background:rgba(255,255,255,.98); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--border-glass); border-radius:var(--r-lg);
  box-shadow:0 24px 60px -12px rgba(51,22,58,.35);
  display:none; grid-template-columns:1fr 1fr 1.1fr; gap:var(--sp-6);
}
/* Only the panel matching the hovered/focused trigger is shown. */
.nav-wrap[data-active-mega="specialties"] .mega-panel-inner[data-mega-panel="specialties"],
.nav-wrap[data-active-mega="treatments"] .mega-panel-inner[data-mega-panel="treatments"]{
  display:grid;
}
.mega-panel-treatments ul{ max-height:280px; overflow-y:auto; padding-right:4px; }
.mega-panel-treatments ul::-webkit-scrollbar{ width:5px; }
.mega-panel-treatments ul::-webkit-scrollbar-thumb{ background:var(--ink-100); border-radius:3px; }
.nav-wrap.mega-open .mega-panel{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}

/* ---- Search overlay (was missing base styles entirely — rendered as
   an unstyled inline box instead of a full-screen modal) ---- */
.search-overlay{
  position:fixed; inset:0; z-index:210;
  background:rgba(32,15,38,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:12vh 24px 0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), visibility .3s;
}
.search-overlay.open{ opacity:1; visibility:visible; pointer-events:auto; }
.search-overlay-inner{
  width:100%; max-width:640px; position:relative;
}
.search-overlay-inner form{
  display:flex; align-items:center; gap:12px;
  background:var(--glass-strong); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--border-glass); border-radius:var(--r-lg);
  box-shadow:0 24px 60px -12px rgba(51,22,58,.4);
  padding:8px 8px 8px 22px;
}
.search-overlay-inner input[type="search"]{
  flex:1; border:none; background:none; outline:none;
  font-family:var(--font-body); font-size:1.05rem; color:var(--ink-900);
  padding:12px 0;
}
.search-overlay-inner input[type="search"]::placeholder{ color:var(--ink-300); }
.search-overlay-inner button[type="submit"]{
  width:44px; height:44px; border-radius:50%; border:none; flex:none;
  background:var(--grad-brand); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease);
}
.search-overlay-inner button[type="submit"]:hover{ transform:scale(1.06); }
.search-overlay-inner button[type="submit"] svg{ width:18px; height:18px; }
.search-close{
  position:absolute; top:-56px; right:0;
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.12); backdrop-filter:blur(10px); color:#fff;
  cursor:pointer; font-size:1rem; line-height:1;
}
@media (max-width:640px){
  .search-overlay{ padding-top:18vh; }
  .search-overlay-inner input[type="search"]{ font-size:1rem; }
}
.mega-panel h5{ font-family:var(--font-display); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-300); margin-bottom:12px; }
.mega-panel ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.mega-panel ul a{ display:flex; align-items:center; gap:8px; font-size:.86rem; font-weight:500; color:var(--ink-700); padding:0; }
.mega-panel ul a::after{ display:none; }
.mega-panel ul a:hover{ color:var(--plum-700); }
.mega-panel .dot{ width:5px; height:5px; border-radius:50%; background:var(--plum-500); flex:none; }
.mega-promo{ background:var(--grad-brand); border-radius:var(--r-md); padding:var(--sp-4); display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.mega-promo::before{ content:''; position:absolute; inset:0; background:var(--grad-mesh-1); }
.mega-promo > *{ position:relative; z-index:1; }
.mega-promo h5{ color:#fff; opacity:1; font-size:.92rem; text-transform:none; letter-spacing:0; margin-bottom:6px; }
.mega-promo p{ color:rgba(255,255,255,.78); font-size:.8rem; margin-bottom:14px; }
.mega-promo a{ font-size:.8rem; font-weight:700; color:var(--amber-400); display:inline-flex; align-items:center; gap:6px; }
.nav-cta{ padding:11px 22px !important; border-radius:var(--r-pill) !important; border:none !important; cursor:pointer !important; font-family:var(--font-display) !important; font-weight:700 !important; font-size:.86rem !important; color:#fff !important; background: var(--grad-brand) !important; box-shadow: var(--shadow-sm) !important; transition: transform .2s var(--ease), box-shadow .2s var(--ease) !important; }
.nav-cta:hover{ transform:translateY(-2px) !important; box-shadow: var(--shadow-md) !important; }
.nav-burger{ display:none; }

/* ================= HERO ================= */
.hero{ padding-top: 44px; padding-bottom:40px; position:relative; overflow:hidden; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(32,15,38,.90) 40%, rgba(74,31,84,.62) 100%); }
.hero .container{ position:relative; z-index:2; }
.hero-mute{
  position:absolute; z-index:3; bottom:24px; right:24px;
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.12); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:#fff; font-size:1rem; cursor:pointer; transition:background .2s var(--ease), transform .2s var(--ease);
}
.hero-mute:hover{ background:rgba(255,255,255,.22); transform:translateY(-2px); }
.hero .eyebrow{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); color:#fff; margin-bottom:16px; }
.hero h1{ color:#fff; }
.hero h1 em{ font-style:normal; color:var(--amber-400); background:none; -webkit-background-clip:unset; background-clip:unset; }
.hero p.lead{ color:rgba(255,255,255,.82); }
.hero-grid{ display:flex; justify-content:center; }
.hero-copy{ max-width:680px; text-align:center; }
.hero-copy .lead{ margin-left:auto; margin-right:auto; }
.hero-ctas{ justify-content:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:var(--r-pill);
  background:var(--glass); backdrop-filter:blur(10px);
  border:1px solid var(--border-glass);
  font-size:.78rem; font-weight:700; color:var(--plum-700); letter-spacing:.02em;
  box-shadow:var(--shadow-sm);
  margin-bottom:var(--sp-5);
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--amber-500); box-shadow:0 0 0 4px rgba(243,178,36,.25);}
.hero h1{ font-size: clamp(2.1rem, 4vw, 3.1rem); margin-bottom:14px; line-height:1.18; }
.hero h1 em{ font-style:normal; color:var(--amber-400); background:none; -webkit-background-clip:unset; background-clip:unset; }
.hero p.lead{ font-size:1.02rem; max-width:520px; margin-bottom:22px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:4px; }

.btn{ font-family:var(--font-display) !important; font-weight:700 !important; font-size:.92rem !important; padding:15px 28px !important; border-radius:var(--r-md) !important; border:none !important; cursor:pointer !important; display:inline-flex !important; align-items:center !important; gap:8px !important; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease) !important; }
.btn-primary{ color:#fff !important; background:var(--grad-brand) !important; box-shadow:0 10px 24px rgba(74,31,84,.35) !important; }
.btn-primary:hover{ transform:translateY(-3px) !important; box-shadow:0 16px 32px rgba(74,31,84,.42) !important; }
.btn-glass{ color:var(--plum-800) !important; background:var(--glass-strong) !important; backdrop-filter:blur(10px) !important; border:1px solid var(--border-glass) !important; box-shadow:var(--shadow-sm) !important; }
.btn-glass:hover{ transform:translateY(-3px) !important; box-shadow:var(--shadow-md) !important; background:#fff !important; }
.btn-accent{ color:#fff !important; background:linear-gradient(135deg, var(--plum-500) 0%, var(--plum-700) 100%) !important; box-shadow:0 10px 22px rgba(109,46,123,.35) !important; }
.btn-accent:hover{ transform:translateY(-3px) !important; box-shadow:0 16px 30px rgba(109,46,123,.45) !important; }

.glass-card{
  background:var(--glass-strong); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--border-glass); border-radius:var(--r-lg); box-shadow:var(--shadow-glow);
}

/* ================= SECTION HEADS ================= */
.section-head{ text-align:center; max-width:640px; margin:0 auto var(--sp-7); }
.section-head .eyebrow{ margin-bottom:var(--sp-3); }
.section-head h2{ font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:var(--sp-3); }
.section-head p{ color:var(--ink-500); font-size:1rem; }

/* ================= STATS BENTO ================= */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); }
.stat-card{ padding:var(--sp-6) var(--sp-5); text-align:center; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.stat-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.stat-card .num{ font-family:var(--font-display); font-weight:900; font-size:2.2rem; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-card .lbl{ font-size:.85rem; color:var(--ink-500); margin-top:4px; font-weight:500;}

/* ================= SERVICE / FEATURE CARDS ================= */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.feat-card{ padding:var(--sp-6); position:relative; overflow:hidden; box-shadow:0 14px 32px -16px rgba(45,16,53,.22); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.feat-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.feat-card::before{ content:''; position:absolute; top:-40%; right:-40%; width:70%; height:70%; background:var(--grad-mesh-1); filter:blur(30px); opacity:.6; pointer-events:none;}
.feat-ic{ width:52px; height:52px; border-radius:var(--r-md); background:var(--grad-brand); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem; margin-bottom:var(--sp-4); box-shadow:var(--shadow-sm);}
.feat-card h3{ font-size:1.08rem; margin-bottom:8px;}
.feat-card p{ font-size:.88rem; color:var(--ink-500); margin-bottom:var(--sp-4);}
.feat-link{ font-size:.82rem; font-weight:700; color:var(--plum-700); display:inline-flex; align-items:center; gap:6px;}
.feat-card .badge{ position:absolute; top:20px; right:20px; font-size:.68rem; font-weight:700; padding:5px 10px; border-radius:var(--r-pill); background:var(--grad-brand); color:#fff;}

/* ---- Slider (Specialties) ---- */
.slider-head{ display:flex; justify-content:space-between; align-items:flex-end; text-align:left; margin-bottom:var(--sp-6); }
.slider-head .section-head{ margin:0; max-width:600px; }
.slider-controls{ display:flex; gap:10px; flex:none; }
.slider-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--border-glass);
  background:var(--glass-strong); backdrop-filter:blur(10px); color:var(--plum-700);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  box-shadow:var(--shadow-sm);
}
.slider-btn:hover{ background:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md); }
.slider-btn svg{ width:18px; height:18px; }
.slider-viewport{ overflow:hidden; }
.slider-track{ display:flex; gap:var(--sp-5); transition:transform .45s var(--ease); }
.slider-track .slide{ flex:0 0 calc((100% - 2*var(--sp-5))/3); }
.slider-dots{ display:flex; justify-content:center; gap:8px; margin-top:var(--sp-6); }
.slider-dots span{ width:8px; height:8px; border-radius:50%; background:var(--ink-100); cursor:pointer; transition:background .2s, width .2s; }
.slider-dots span.active{ background:var(--grad-brand); width:22px; border-radius:4px; }

/* ================= DOCTORS ================= */
.doc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.doc-card{ overflow:hidden; text-align:center; padding-bottom:var(--sp-6); position:relative; transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
.doc-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg);}
.doc-photo{ background:var(--grad-brand); position:relative; overflow:hidden; }
.doc-photo img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:0; transition:transform .5s var(--ease); }
.doc-card:hover .doc-photo img{ transform:scale(1.06); }
.doc-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(51,22,58,.55) 100%); z-index:1; pointer-events:none;}
.doc-photo-ph{ width:100%; min-height:220px; display:flex; align-items:center; justify-content:center; }
.doc-photo-ph svg{ width:64px; height:64px; color:rgba(255,255,255,.5); }
.doc-photo-badge{
  position:absolute; left:14px; bottom:14px; z-index:2;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.3);
  color:#fff; font-size:.7rem; font-weight:700; padding:5px 12px; border-radius:50px;
}
.doc-card h4{ margin-top:var(--sp-4); font-size:1rem;}
.doc-card .spec{ font-size:.8rem; color:var(--amber-600); font-weight:700; margin:4px 0 10px;}
.doc-card .meta{ font-size:.78rem; color:var(--ink-300);}
.doc-card-cta{
  display:inline-flex; align-items:center; gap:6px; margin-top:12px;
  font-size:.82rem; font-weight:700; color:var(--accent);
  opacity:0; transform:translateY(4px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.doc-card-cta svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.doc-card:hover .doc-card-cta{ opacity:1; transform:translateY(0); }
.doc-card:hover .doc-card-cta svg{ transform:translateX(3px); }
.doc-grid-empty{
  grid-column:1/-1; text-align:center; padding:56px 24px; border-radius:var(--r-lg);
  border:1.5px dashed var(--ink-100); display:flex; flex-direction:column; align-items:center; gap:10px;
}
.doc-grid-empty svg{ width:36px; height:36px; color:var(--ink-300); }
.doc-grid-empty p{ font-weight:700; color:var(--ink-700); margin:0; }
.doc-grid-empty span{ font-size:.84rem; color:var(--ink-300); }

/* ================= FORM ================= */
.form-section{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--sp-7); align-items:center;}
.form-side h2{ font-size:clamp(1.7rem,3vw,2.2rem); margin-bottom:var(--sp-4);}
.form-side p{ color:var(--ink-500); margin-bottom:var(--sp-5); max-width:420px;}
.form-perk{ display:flex; align-items:center; gap:12px; margin-bottom:var(--sp-4);}
.form-perk .ic{ width:38px; height:38px; border-radius:var(--r-sm); background:var(--glass-strong); border:1px solid var(--border-glass); display:flex; align-items:center; justify-content:center; color:var(--plum-700); font-weight:800; box-shadow:var(--shadow-sm);}
.form-perk span{ font-size:.88rem; color:var(--ink-700); font-weight:500;}

.form-card{ padding:var(--sp-7); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); margin-bottom:var(--sp-4);}
.field{ display:flex; flex-direction:column; gap:6px;}
.field.full{ grid-column:1/-1; }
.field label{ font-size:.78rem; font-weight:700; color:var(--ink-700);}
.field input, .field select, .field textarea{
  padding:13px 16px; border-radius:var(--r-sm); border:1px solid var(--ink-100);
  background:rgba(255,255,255,.7); font-family:var(--font-body); font-size:.9rem; color:var(--ink-900);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--plum-500); background:#fff;
  box-shadow:0 0 0 4px rgba(109,46,123,.12);
}
.field textarea{ resize:vertical; min-height:90px; }
.form-card .btn-primary{ width:100%; justify-content:center; margin-top:var(--sp-2); padding:16px;}
.form-note{ text-align:center; font-size:.75rem; color:var(--ink-300); margin-top:var(--sp-3);}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); margin-bottom:var(--sp-4); }
/* Patient Type row: 2 columns normally, 3 once Patient ID appears (Existing Patient) */
#homePatientTypeRow.has-patient-id{ grid-template-columns:1fr 1fr 1fr; }
@media (max-width:640px){ #homePatientTypeRow.has-patient-id{ grid-template-columns:1fr; } }
.form-card > form > .field{ margin-bottom:var(--sp-4); }
@media (max-width:640px){ .field-row{ grid-template-columns:1fr; } }

/* ================= CTA BAND ================= */
.cta-band{ padding:var(--sp-8) var(--sp-7); text-align:center; background:var(--grad-brand); position:relative; overflow:hidden; border-radius:var(--r-lg); }
.cta-band::before{ content:''; position:absolute; inset:0; background:var(--grad-mesh-1), var(--grad-mesh-3); opacity:.7;}
.cta-band > *{ position:relative; z-index:1;}

/* ---- Get a Second Opinion (home page) ---- */
.so-split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:center; }
.so-text p{ color:var(--ink-500); line-height:1.75; margin:var(--sp-4) 0; }
.so-reasons{ list-style:none; margin:var(--sp-5) 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.so-reasons li{ display:flex; align-items:center; gap:14px; font-weight:700; color:var(--ink-900); }
.so-num{
  flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:900;
}
.so-video .about-video-embed{
  position:relative; width:100%; padding-top:56.25%; border-radius:var(--r-lg);
  overflow:hidden; background:var(--shuttle-deep); box-shadow:0 12px 32px -10px rgba(109,46,123,.35);
}
.so-video .about-video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:900px){ .so-split{ grid-template-columns:1fr; gap:var(--sp-6); } .so-video{ order:-1; } }
.cta-band h2{ color:#fff; font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:var(--sp-3);}
.cta-band p{ color:rgba(255,255,255,.82); max-width:480px; margin:0 auto var(--sp-6);}
.cta-band .btn-accent{ padding:16px 34px; font-size:.95rem;}

/* ================= FOOTER ================= */
footer{ background:var(--plum-900) !important; padding:var(--sp-8) 0 var(--sp-5) !important; color:rgba(255,255,255,.7) !important; margin-top:var(--sp-6) !important; }
.footer-grid{ display:grid !important; grid-template-columns:1.4fr 1fr 1fr 1fr !important; gap:var(--sp-6) !important; padding-bottom:var(--sp-6) !important; border-bottom:1px solid rgba(255,255,255,.1) !important; }
.footer-brand .brand{ color:#fff; margin-bottom:28px; }
.footer-logo-wrap .custom-logo{ display:block; }
.footer-brand p{ font-size:.85rem !important; max-width:280px !important; margin-bottom:var(--sp-4) !important; }
.social-row{ display:flex; gap:10px;}
.social-row a{ width:36px !important; height:36px !important; border-radius:50% !important; background:rgba(255,255,255,.08) !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:.8rem !important; font-weight:700 !important; transition:background .2s var(--ease), transform .2s var(--ease) !important; }
.social-row a:hover{ background:var(--grad-brand) !important; color:#fff !important; transform:translateY(-3px) !important; }
.footer-col h5{ color:#fff !important; font-size:.82rem !important; text-transform:uppercase !important; letter-spacing:.06em !important; margin-bottom:var(--sp-4) !important; }
.footer-col a{ display:block !important; font-size:.86rem !important; margin-bottom:10px !important; color:rgba(255,255,255,.65) !important; transition:color .2s !important; }
.footer-col a:hover{ color:var(--amber-400) !important; }
.footer-bottom{ display:flex !important; justify-content:space-between !important; padding-top:var(--sp-5) !important; font-size:.78rem !important; flex-wrap:wrap !important; gap:10px !important; }

/* ================= WHY CHOOSE CDFC ================= */
.why-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--sp-8); align-items:center; }
.why-media{ position:relative; border-radius:var(--r-lg); overflow:hidden; height:420px; background:var(--grad-brand); }
.why-media-placeholder{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  text-align:center; padding:32px; color:rgba(255,255,255,.9);
}
.why-media-placeholder svg{ width:40px; height:40px; opacity:.7; }
.why-media-placeholder p{ font-size:1rem; font-weight:700; color:#fff; margin:0; }
.why-media-placeholder span{ font-size:.78rem; color:rgba(255,255,255,.65); max-width:220px; }
.why-media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; z-index:0; }
.why-media::after{ content:''; position:absolute; inset:0; background:var(--grad-mesh-1), var(--grad-mesh-3), linear-gradient(180deg, transparent 45%, rgba(51,22,58,.65) 100%); z-index:1; }
.why-media .badge-float{
  position:absolute; left:24px; bottom:24px; right:24px; padding:var(--sp-5);
  display:flex; align-items:center; gap:16px; z-index:2;
}
.why-media .badge-float .num{ font-family:var(--font-display); font-weight:900; font-size:2rem; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.why-media .badge-float .lbl{ font-size:.82rem; color:var(--ink-500); font-weight:500; }
.why-list{ display:flex; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-6); }
.why-item{
  display:flex; gap:16px; align-items:flex-start; padding:var(--sp-4) !important;
  border-radius:var(--r-md);
  border-left:3px solid transparent !important;
  transition:background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease) !important;
  will-change:transform;
}
.why-item:hover{
  background:var(--glass) !important;
  transform:translateX(4px) !important;
  border-left-color:var(--accent) !important;
  padding:var(--sp-4) !important;
}
.why-item .ic{ width:44px; height:44px; flex:none; border-radius:var(--r-sm); background:var(--grad-brand); display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; box-shadow:var(--shadow-sm); }
.why-item h4{ font-size:.98rem; margin-bottom:4px; }
.why-item p{ font-size:.85rem; color:var(--ink-500); }

/* ================= HOW IT WORKS (journey) ================= */
.journey-track{ position:relative; padding-top:var(--sp-5); }
.journey-spine{ position:absolute; top:44px; left:6%; right:6%; height:3px; background:var(--ink-100); border-radius:3px; }
.journey-spine-fill{ position:absolute; top:0; left:0; height:100%; width:78%; background:var(--grad-brand); border-radius:3px; }
.journey-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-4); position:relative; }
.jstep{ text-align:center; padding:var(--sp-5) var(--sp-3); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.jstep:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.jstep .badge{ width:44px; height:44px; margin:0 auto var(--sp-3); border-radius:50%; background:var(--grad-brand); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:.9rem; box-shadow:var(--shadow-sm); }
.jstep h4{ font-size:.92rem; margin-bottom:6px; }
.jstep p{ font-size:.78rem; color:var(--ink-500); }

/* ================= VERIFIED CLINICAL OUTCOMES ================= */
.outcomes-pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:var(--r-pill); background:rgba(52,168,83,.12); color:#1e8e3e; font-size:.78rem; font-weight:700; margin-bottom:var(--sp-3); }
.outcomes-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); margin:var(--sp-6) 0 var(--sp-7); }
.outcomes-stats .item{ text-align:center; padding:var(--sp-4); }
.outcomes-stats .num{ font-family:var(--font-display); font-weight:900; font-size:1.6rem; color:var(--plum-700); }
.outcomes-stats .lbl{ font-size:.78rem; color:var(--ink-500); margin-top:4px; }

/* ================= PATIENT STORIES ================= */
.stories-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.story-card{ padding:var(--sp-6); display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.story-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.story-card .stars{ color:var(--amber-500); font-size:.85rem; margin-bottom:var(--sp-4); letter-spacing:2px; }
.story-card .quote{ font-size:.92rem; color:var(--ink-700); font-style:normal; margin-bottom:var(--sp-5); flex:1; }
.story-card .who{ display:flex; align-items:center; gap:12px; }
.story-card .avatar{ width:42px; height:42px; border-radius:50%; background:var(--grad-brand); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:.8rem; }
.story-card .name{ font-size:.86rem; font-weight:700; color:var(--ink-900); }
.story-card .role{ font-size:.75rem; color:var(--ink-300); }

/* ================= PATIENT RESOURCES (articles) ================= */
.articles-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.article-card{ overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.article-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.article-thumb{ height:150px; position:relative; background:var(--grad-brand); overflow:hidden; }
.article-thumb img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; z-index:0; }
.article-thumb::after{ content:''; position:absolute; inset:0; background:var(--grad-mesh-1), linear-gradient(180deg, rgba(51,22,58,.15) 0%, rgba(51,22,58,.05) 100%); z-index:1; }
.article-thumb .cat{ position:absolute; top:14px; left:14px; font-size:.68rem; font-weight:700; padding:5px 11px; border-radius:var(--r-pill); background:var(--grad-brand); color:#fff; z-index:2; }
.article-card .body{ padding:var(--sp-5); }
.article-card h4{ font-size:.98rem; margin-bottom:8px; line-height:1.35;}
.article-card p{ font-size:.84rem; color:var(--ink-500); margin-bottom:var(--sp-4);}
.article-meta{ display:flex; justify-content:space-between; align-items:center; font-size:.75rem; color:var(--ink-300);}

/* ================= RESPONSIVE ================= */
@media (max-width:980px){
  .form-section, .why-grid{ grid-template-columns:1fr; }
  .why-media{ height:280px; }
  .stats-grid, .card-grid, .doc-grid, .stories-grid, .articles-grid{ grid-template-columns:repeat(2,1fr); }
  .journey-steps, .outcomes-stats{ grid-template-columns:repeat(2,1fr); row-gap:var(--sp-5); }
  .journey-spine, .journey-spine-fill{ display:none; }
  .footer-grid{ grid-template-columns:1fr 1fr !important; }
  .nav-links{ display:none; }
  /* CTA moves into the mobile drawer (which already has its own full-width
     "Book an Appointment" button) instead of competing for space in the
     pill alongside the logo, search icon and burger menu. */
  .nav > .nav-cta{ display:none !important; }
  .slider-track .slide{ flex:0 0 calc((100% - var(--sp-5))/2); }
  .slider-head{ flex-direction:column; align-items:flex-start; gap:var(--sp-4); }
}
@media (max-width:640px){
  section{ padding:var(--sp-8) 0;}
  .stats-grid, .card-grid, .doc-grid, .stories-grid, .articles-grid, .journey-steps, .outcomes-stats{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr;}
  .footer-grid{ grid-template-columns:1fr !important; }
  .footer-col{ margin-bottom:var(--sp-5) !important; }
  .footer-col:last-child{ margin-bottom:0 !important; }
  .footer-col a{ margin-bottom:6px !important; font-size:.84rem !important; }
  .footer-col h5{ margin-bottom:var(--sp-3) !important; }
  .nav{ padding:8px 8px 8px 16px;}
  .brand-full{ display:none; }
  .hero-ctas{ flex-direction:column;}
  .btn{ width:100%; justify-content:center;}
  .slider-track .slide{ flex:0 0 100%; }
}
/* ============================================================
   MOBILE NAVIGATION (WordPress theme addition)
   index.html simply hides .nav-links below 980px with no
   alternative — a production site needs a working mobile menu,
   so this adds a burger + slide-in drawer consistent with the
   glass design system, wired up in assets/js/main.js.
   ============================================================ */
.nav-burger{
  display:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--border-glass);
  background:var(--glass-strong); backdrop-filter:blur(10px); cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.nav-burger span{ display:block; width:18px; height:2px; background:var(--plum-700); border-radius:2px; transition:transform .25s var(--ease), opacity .25s var(--ease); }
.nav-burger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mobile-scrim{
  position:fixed; inset:0; background:rgba(32,15,38,.55); backdrop-filter:blur(4px);
  z-index:190; opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.mobile-scrim.show{ opacity:1; visibility:visible; }

.mobile-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(320px, 86vw);
  background:var(--glass-strong); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-left:1px solid var(--border-glass); box-shadow:-20px 0 48px rgba(51,22,58,.25);
  z-index:200; padding:var(--sp-6) var(--sp-5);
  transform:translateX(100%); transition:transform .35s var(--ease);
  overflow-y:auto;
}
.mobile-drawer.open{ transform:translateX(0); }
.mobile-drawer-close{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--border-glass);
  background:var(--glass); display:flex; align-items:center; justify-content:center;
  cursor:pointer; margin-bottom:var(--sp-6);
}
.mobile-drawer nav{ display:flex; flex-direction:column; gap:12px; padding-bottom:1rem; }
.mobile-drawer nav a{ font-size:1rem; font-weight:600; color:var(--ink-700); padding:14px 4px; }
.mobile-drawer .mobile-sub{ display:flex; flex-direction:column; gap:2px; padding-left:var(--sp-3); }
.mobile-drawer .mobile-sub a{ font-size:.88rem; font-weight:500; color:var(--ink-500); border-bottom:none; padding:8px 4px; }
.mobile-drawer .nav-cta{ width:100%; justify-content:center; margin-top:var(--sp-5); }

@media (max-width:980px){
  .nav-burger{ display:flex; width:44px; height:44px; }
  .nav-search-btn{ width:44px; height:44px; }
}
.nav.shrink{ box-shadow: var(--shadow-lg) !important; }
.nav.scrolled{ box-shadow: var(--shadow-lg) !important; }
.nav-search-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border-glass);
  background:var(--glass); display:flex; align-items:center; justify-content:center;
  cursor:pointer; margin-right:8px; flex:none; transition:background .2s var(--ease);
}
.nav-search-btn:hover{ background:#fff; }
.nav-search-btn svg{ width:16px; height:16px; color:var(--plum-700); }

/* ============================================================
   SITE-WIDE CARD TREATMENT (v2.8)
   Applies the same glass-card language from index.html to every
   card class used across the other 30+ templates (doctor/treatment
   archives & singles, appointment/about/contact/procedures pages,
   blog, sidebars). Non-destructive: only touches background/blur/
   border, leaving each template's own layout, spacing and content
   logic untouched. .as-cta-card is deliberately excluded — it's a
   dark plum promo card with white text; forcing light glass there
   would break contrast.
   ============================================================ */
.card, .doc-card, .treat-card, .treat-cards, .treat-cards-cpt,
.td-tech-card, .td-test-card, .td-rel-card, .td-so-card, .treat-so-card,
.sidebar-card, .form-card, .spec-card, .jstep, .article-card, .post-card, .featured-post-card,
.qc-card, .wf-card, .leader-card, .profile-photo-card, .pn-card, .rp-card, .cond-card,
.mini-doc-card, .centre-detail-card, .as-related-card, .author-bio-card, .toc-card, .toc-box,
.op-form-card, .proc-card-full,
.v27-glass-card{
  background: var(--v27-glass, rgba(255,255,255,.66)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--border-glass, rgba(255,255,255,.45)) !important;
}

/* ---- Shared page-hero banner (about / appointment / contact / procedures) ---- */
.page-hero{
  background: var(--grad-brand) !important;
  position: relative; overflow: hidden;
}
.page-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: var(--grad-mesh-1), var(--grad-mesh-3);
  opacity:.7;
}
.page-hero > *{ position:relative; z-index:1; }
.page-hero h1, .page-hero h2{ color:#fff !important; }
.page-hero p{ color:rgba(255,255,255,.85) !important; }
.page-hero .hero-meta, .page-hero .hero-meta *{ color:rgba(255,255,255,.85) !important; }
.page-hero .eyebrow{ background:rgba(255,255,255,.12) !important; border-color:rgba(255,255,255,.28) !important; color:#fff !important; }