/* ═══════════════════════════════════════════════════════════════
   SmileCare Dental — pages.css
   All page-specific styles extracted from inline <style> blocks.
   .page-hero backgrounds scoped with modifier classes to prevent
   cross-page conflicts.
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   SHARED INNER-PAGE BASE (about / services / doctors / contact)
───────────────────────────────────────────────────────────────── */
.page-hero { position: relative; overflow: hidden; }
.page-hero-inner { position: relative; z-index: 2; }
.breadcrumb {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 22px; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.5);
}
.breadcrumb a { color: rgba(255,255,255,0.5); transition: color 0.15s; }
.breadcrumb a:hover { color: rgba(255,255,255,0.9); }
.breadcrumb-sep { color: rgba(255,255,255,0.3); }
.breadcrumb-current { color: rgba(255,255,255,0.8); }
.page-hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.08); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-pill);
  padding: 6px 16px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); margin-bottom: 20px;
}
.page-hero-title {
  font-family: var(--font-head); font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 700; line-height: 1.1; color: #fff;
  max-width: 700px; letter-spacing: -0.02em;
}
.page-hero-title .teal-word {
  background: linear-gradient(135deg, #2DD4BF, #F97316);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.page-hero-title .dim { color: rgba(255,255,255,0.4); }
.page-hero-sub { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.6); max-width: 500px; margin-top: 18px; }

/* Per-page hero: backgrounds, padding, bottom fade */
.page-hero--about {
  padding: 160px 0 100px;
  background:
    radial-gradient(ellipse 55% 70% at 80% 30%, rgba(13,148,136,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 45% 55% at 15% 75%, rgba(249,115,22,0.22) 0%, transparent 55%),
    #1C1917;
}
.page-hero--about::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 160px;
  background: linear-gradient(to bottom, transparent, #fff); z-index: 1;
}
.page-hero--services {
  padding: 156px 0 96px;
  background:
    radial-gradient(ellipse 60% 80% at 85% 20%, rgba(13,148,136,0.4) 0%, transparent 55%),
    radial-gradient(ellipse 50% 65% at 10% 80%, rgba(249,115,22,0.25) 0%, transparent 55%),
    radial-gradient(ellipse 35% 45% at 60% 100%, rgba(20,184,166,0.2) 0%, transparent 50%),
    #1C1917;
}
.page-hero--services::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 140px;
  background: linear-gradient(to bottom, transparent, var(--surface)); z-index: 1;
}
.page-hero--doctors {
  padding: 156px 0 100px;
  background:
    radial-gradient(ellipse 55% 70% at 75% 25%, rgba(13,148,136,0.38) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 20% 85%, rgba(249,115,22,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 30% 40% at 55% 95%, rgba(20,184,166,0.18) 0%, transparent 50%),
    #1C1917;
}
.page-hero--doctors::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 150px;
  background: linear-gradient(to bottom, transparent, var(--surface)); z-index: 1;
}
.page-hero--contact {
  padding: 156px 0 110px;
  background:
    radial-gradient(ellipse 55% 70% at 80% 20%, rgba(13,148,136,0.4) 0%, transparent 55%),
    radial-gradient(ellipse 45% 55% at 15% 80%, rgba(249,115,22,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 30% 40% at 50% 100%, rgba(20,184,166,0.18) 0%, transparent 50%),
    #1C1917;
}
.page-hero--contact::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 160px;
  background: linear-gradient(to bottom, transparent, var(--surface)); z-index: 1;
}
@media (max-width: 768px) {
  .page-hero--about, .page-hero--services, .page-hero--doctors, .page-hero--contact { padding: 130px 0 80px; }
  .page-hero-title { font-size: clamp(32px, 9vw, 50px); }
}

/* ═══════════════════════════════════════════════════════════════
   HOME PAGE
═══════════════════════════════════════════════════════════════ */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 38% 90% at -2% 50%, rgba(13,148,136,0.52) 0%, transparent 65%),
    radial-gradient(ellipse 38% 90% at 102% 50%, rgba(249,115,22,0.42) 0%, transparent 65%),
    radial-gradient(ellipse 55% 40% at 50% 0%, rgba(13,148,136,0.15) 0%, transparent 55%),
    #111827;
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.065) 1px, transparent 1px);
  background-size: 28px 28px;
}
.hero-bg::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 220px; z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--surface));
}
.hero-ring {
  position: absolute; pointer-events: none; z-index: 0;
  width: 720px; height: 720px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.04);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.hero-ring::before {
  content: ''; position: absolute; inset: 90px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.03);
}
.hero-center { position: relative; z-index: 2; width: 100%; padding: 130px 0 80px; }
.hero-text-wrap { max-width: 800px; margin: 0 auto; text-align: center; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.09); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-pill);
  padding: 7px 18px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.8); margin-bottom: 28px;
}
.hero-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #4ADE80;
  box-shadow: 0 0 0 3px rgba(74,222,128,0.3); animation: pulse-dot 2s ease-in-out infinite;
}
.hero-headline {
  font-family: var(--font-head); font-size: clamp(48px, 6vw, 82px);
  font-weight: 700; line-height: 1.06; color: #fff; letter-spacing: -0.03em;
}
.hero-headline .dim { color: rgba(255,255,255,0.32); }
.hero-headline .teal-grad {
  background: linear-gradient(90deg, #2DD4BF 0%, #F97316 50%, #2DD4BF 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: shimmerGrad 3.5s linear infinite;
}
@keyframes shimmerGrad { to { background-position: 200% center; } }
.hero-sub { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.55); max-width: 460px; margin: 18px auto 0; }
.hero-checks { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
.hero-checks span { font-size: 13px; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 7px; font-weight: 500; }
.hero-check-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(45,212,191,0.15); border: 1.5px solid rgba(45,212,191,0.6);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hero-check-dot::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #2DD4BF; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.btn-glow { animation: btnPulse 3s ease-in-out infinite; }
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(13,148,136,0.35), 0 4px 20px rgba(13,148,136,0.2); }
  50%       { box-shadow: 0 0 52px rgba(13,148,136,0.7),  0 6px 32px rgba(13,148,136,0.4); }
}
.btn-outline-light { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.8); }
.btn-outline-light:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); color: #fff; }
.hero-trust { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; }
.hero-avatars { display: flex; }
.hero-avatars span {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.45);
  background: linear-gradient(135deg, var(--teal), var(--orange));
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff; margin-left: -8px;
}
.hero-avatars span:first-child { margin-left: 0; }
.hero-trust-text { font-size: 12px; color: rgba(255,255,255,0.5); font-weight: 500; }
.hero-trust-text strong { color: rgba(255,255,255,0.85); }
.hero-float-left, .hero-float-right { position: absolute; top: 50%; z-index: 3; }
.hero-float-left  { left: 3%;  transform: translateY(-52%); animation: floatA 4s ease-in-out infinite alternate; }
.hero-float-right { right: 3%; transform: translateY(-48%); animation: floatB 4.5s ease-in-out infinite alternate; }
.hf-card {
  background: rgba(255,255,255,0.09); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
}
.hfl-card { width: 230px; padding: 20px; }
.hfl-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.hfl-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--gradient-btn); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hfl-icon svg { width: 18px; height: 18px; color: #fff; }
.hfl-head-title { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: #fff; }
.hfl-head-sub   { font-size: 10px; color: rgba(255,255,255,0.45); margin-top: 2px; }
.hfl-slots { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.hfl-slot { display: flex; align-items: center; justify-content: space-between; }
.hfl-time { font-family: var(--font-head); font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.8); }
.hfl-badge { font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 6px; }
.hfl-badge.confirmed { background: rgba(13,148,136,0.25); color: #2DD4BF; }
.hfl-badge.available { background: rgba(74,222,128,0.15); color: #4ADE80; }
.hfl-badge.taken     { background: rgba(249,115,22,0.2);  color: #FB923C; }
.hfl-btn { width: 100%; background: var(--gradient-btn); color: #fff; border: none; border-radius: 10px; padding: 10px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font-head); transition: opacity 0.2s, transform 0.2s; }
.hfl-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.hfr-card { width: 210px; padding: 20px; }
.hfr-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255,255,255,0.4); margin-bottom: 6px; }
.hfr-bignum { font-family: var(--font-head); font-size: 38px; font-weight: 800; color: #fff; line-height: 1; margin-bottom: 12px; }
.hfr-avs { display: flex; margin-bottom: 14px; }
.hfr-av { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; margin-left: -8px; }
.hfr-av:first-child { margin-left: 0; }
.hfr-divider { height: 1px; background: rgba(255,255,255,0.1); margin-bottom: 14px; }
.hfr-row { display: flex; align-items: center; justify-content: space-around; }
.hfr-mini { text-align: center; }
.hfr-mini-val { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: #fff; line-height: 1; }
.hfr-mini-key { font-size: 10px; color: rgba(255,255,255,0.42); margin-top: 3px; }
.hfr-sep { width: 1px; height: 30px; background: rgba(255,255,255,0.1); }
.hero-scroll-cue { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 10; pointer-events: none; }
.hsc-line { width: 1px; height: 36px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.3)); animation: scrollLineAnim 2s ease-in-out infinite; }
.hero-scroll-cue span { font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.28); }
@keyframes scrollLineAnim {
  0%, 100% { opacity: 0.3; transform: scaleY(0.7); }
  50% { opacity: 1; transform: scaleY(1); }
}
.quick-access { background: var(--surface); padding-bottom: 0; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: -36px; position: relative; z-index: 10; }
.quick-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px 28px; box-shadow: var(--shadow-card); display: flex; align-items: center; gap: 20px; }
.quick-card.tinted { background: #F0FDFA; border-color: #CCFBF1; }
.quick-card-img { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--teal), var(--teal-light)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.quick-card-img svg { width: 26px; height: 26px; color: #fff; }
.quick-card-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #059669; margin-bottom: 5px; }
.quick-card-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: #059669; }
.quick-card h3 { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--dark); line-height: 1.3; }
.quick-card p { font-size: 13px; color: var(--muted); margin-top: 3px; }
.quick-card-link { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--teal); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.quick-card-link:hover { color: var(--orange); }
.stats-section { background: var(--warm-white); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-box { border-radius: var(--radius-card); padding: 28px 24px; border: 1.5px solid var(--border); background: var(--surface); }
.stat-box.filled { background: var(--gradient-btn); border-color: transparent; }
.stat-box.filled .stat-label { color: rgba(255,255,255,0.75); }
.stat-box.filled .stat-desc  { color: rgba(255,255,255,0.65); }
.stat-num { font-family: var(--font-head); font-size: 42px; font-weight: 800; color: var(--teal); line-height: 1; }
.stat-box.filled .stat-num { color: #fff; }
.stat-label { font-size: 15px; font-weight: 600; color: var(--dark); margin-top: 8px; }
.stat-desc  { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.services-section { background: var(--surface); }
.services-header { text-align: center; margin-bottom: 52px; }
.services-header .section-desc { margin: 14px auto 0; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-card { border-radius: 20px; padding: 36px 30px; position: relative; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 20px 48px rgba(0,0,0,0.12); }
.service-card.card-teal   { background: #0D9488; }
.service-card.card-warm   { background: #FFF7ED; border: 1.5px solid #FED7AA; }
.service-card.card-dark   { background: #1C1917; }
.service-card.card-light  { background: #F0FDFA; border: 1.5px solid #CCFBF1; }
.service-card.card-orange { background: #F97316; }
.service-card.card-soft   { background: #FEF9C3; border: 1.5px solid #FDE68A; }
.service-icon-wrap { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.card-teal .service-icon-wrap, .card-dark .service-icon-wrap, .card-orange .service-icon-wrap { background: rgba(255,255,255,0.15); }
.card-warm .service-icon-wrap { background: #FED7AA; }
.card-light .service-icon-wrap { background: #CCFBF1; }
.card-soft .service-icon-wrap  { background: #FDE68A; }
.service-icon-wrap svg { width: 26px; height: 26px; }
.card-teal .service-icon-wrap svg, .card-dark .service-icon-wrap svg, .card-orange .service-icon-wrap svg { color: #fff; }
.card-warm .service-icon-wrap svg  { color: #EA580C; }
.card-light .service-icon-wrap svg { color: var(--teal); }
.card-soft .service-icon-wrap svg  { color: #B45309; }
.service-name { font-family: var(--font-head); font-size: 20px; font-weight: 700; line-height: 1.3; margin-bottom: 10px; }
.card-teal .service-name, .card-dark .service-name, .card-orange .service-name { color: #fff; }
.card-warm .service-name, .card-light .service-name, .card-soft .service-name { color: var(--dark); }
.service-desc { font-size: 14px; line-height: 1.6; }
.card-teal .service-desc, .card-dark .service-desc, .card-orange .service-desc { color: rgba(255,255,255,0.75); }
.card-warm .service-desc  { color: #92400E; }
.card-light .service-desc { color: #0F766E; }
.card-soft .service-desc  { color: #78716C; }
.service-link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; margin-top: 18px; }
.card-teal .service-link, .card-dark .service-link, .card-orange .service-link { color: rgba(255,255,255,0.9); }
.card-warm .service-link  { color: var(--orange); }
.card-light .service-link { color: var(--teal); }
.card-soft .service-link  { color: #B45309; }
.process-section { background: #0F172A; position: relative; overflow: hidden; }
.process-section::before { content: ''; position: absolute; top: -120px; right: -120px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(13,148,136,0.25), transparent 70%); pointer-events: none; }
.process-section::after  { content: ''; position: absolute; bottom: -80px; left: -80px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(249,115,22,0.15), transparent 70%); pointer-events: none; }
.process-header { text-align: center; margin-bottom: 60px; }
.process-header .section-title { color: #fff; }
.process-header .section-desc  { color: rgba(255,255,255,0.55); margin: 14px auto 0; }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; position: relative; z-index: 1; }
.process-step { padding: 36px 28px; border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-card); background: rgba(255,255,255,0.03); transition: background 0.25s, border-color 0.25s; }
.process-step:hover { background: rgba(255,255,255,0.06); border-color: rgba(13,148,136,0.35); }
.step-num { font-family: var(--font-head); font-size: 48px; font-weight: 800; color: rgba(255,255,255,0.08); line-height: 1; margin-bottom: 18px; }
.step-icon-wrap { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, rgba(13,148,136,0.25), rgba(249,115,22,0.15)); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.step-icon-wrap svg { width: 22px; height: 22px; color: var(--teal-light); }
.step-title { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.step-desc  { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.5); }
.doctors-section { background: var(--warm-white); }
.doctors-header  { margin-bottom: 52px; }
.doctors-grid    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.appointment-section { background: var(--surface); }
.appointment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.appointment-left .section-desc { max-width: 420px; }
.appt-features { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.appt-feature  { display: flex; align-items: flex-start; gap: 12px; }
.appt-feature-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--warm-gray); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.appt-feature-icon svg { width: 18px; height: 18px; color: var(--teal); }
.appt-feature-text strong { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--dark); display: block; }
.appt-feature-text span   { font-size: 13px; color: var(--muted); }
.testimonials-section { background: linear-gradient(135deg, #FFF7ED 0%, #F0FDFA 100%); }
.testimonials-header  { text-align: center; margin-bottom: 52px; }
.testimonials-header .section-desc { margin: 14px auto 0; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testimonial-card { background: var(--surface); border-radius: var(--radius-card); padding: 28px 26px; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 2px 16px rgba(0,0,0,0.06); transition: transform 0.25s; }
.testimonial-card:hover { transform: translateY(-3px); }
.test-quote { font-size: 15px; line-height: 1.7; color: var(--dark-mid); font-style: italic; margin-bottom: 20px; }
.test-quote::before { content: '\201C'; color: var(--teal); font-size: 24px; line-height: 0; vertical-align: -0.4em; margin-right: 3px; }
.test-author { display: flex; align-items: center; gap: 12px; }
.test-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--orange)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; flex-shrink: 0; }
.test-name  { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--dark); }
.test-meta  { font-size: 12px; color: var(--muted); margin-top: 2px; }
.test-stars { color: #FBBF24; font-size: 11px; margin-top: 3px; }
.location-section { background: var(--surface); }
.location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.location-map { border-radius: 20px; overflow: hidden; height: 380px; background: linear-gradient(160deg, #E2E8F0 0%, #CBD5E1 100%); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; }
.map-pin { width: 60px; height: 60px; border-radius: 50%; background: var(--gradient-btn); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(13,148,136,0.4); animation: floatA 2.5s ease-in-out infinite alternate; }
.map-pin svg { width: 28px; height: 28px; color: #fff; }
.map-label { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--dark); }
.map-sub   { font-size: 13px; color: var(--muted); }
.map-directions { margin-top: 12px; background: var(--gradient-btn); color: #fff; border: none; border-radius: 8px; padding: 9px 20px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font-head); }
.info-cards { display: flex; flex-direction: column; gap: 16px; }
.info-card { background: var(--warm-white); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px 22px; display: flex; gap: 16px; }
.info-icon { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, rgba(13,148,136,0.12), rgba(249,115,22,0.08)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-icon svg { width: 20px; height: 20px; color: var(--teal); }
.info-title { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--dark); margin-bottom: 4px; }
.info-text  { font-size: 13px; color: var(--muted); line-height: 1.6; }
@media (max-width: 1200px) {
  .hero-float-left, .hero-float-right { display: none; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stats-grid    { grid-template-columns: repeat(2, 1fr); }
  .doctors-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .hero-center { padding: 110px 0 60px; }
  .hero-headline { font-size: clamp(40px, 11vw, 62px); }
  .hero-scroll-cue { display: none; }
  .quick-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .appointment-grid { grid-template-columns: 1fr; gap: 40px; }
  .location-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .doctors-header { margin-bottom: 32px; }
  .doctors-header .section-desc { margin-left: auto; margin-right: auto; }
  .doctor-avatar-area { height: 180px; }
  .doctor-initials {
    width: 82px;
    height: 82px;
    font-size: 23px;
  }
  .doctor-info { padding: 20px; }
  .doctor-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--warm-white);
  }
  .doctor-stat {
    min-width: 0;
    align-items: center;
    text-align: center;
  }
  .doctor-stat-num { font-size: 16px; }
  .doctor-stat-label {
    font-size: 10px;
    line-height: 1.25;
  }
  .doctor-rating {
    align-items: flex-start;
    gap: 8px;
  }
  .doctor-rating-text {
    line-height: 1.45;
  }
  .doctor-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    line-height: 1.25;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE
═══════════════════════════════════════════════════════════════ */
.page-hero-actions { display: flex; align-items: center; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.hero-stats-row { display: flex; gap: 16px; margin-top: 52px; flex-wrap: wrap; }
.hero-stat-pill { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.08); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 14px 20px; }
.hero-stat-pill-num { font-family: var(--font-head); font-size: 24px; font-weight: 800; color: #fff; }
.hero-stat-pill-label { font-size: 12px; color: rgba(255,255,255,0.55); font-weight: 500; }
.story-section { background: var(--surface); }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.story-left .section-desc { max-width: 480px; }
.story-body { font-size: 16px; line-height: 1.8; color: var(--muted); margin-top: 20px; max-width: 480px; }
.story-body + .story-body { margin-top: 14px; }
.story-body strong { color: var(--dark); font-weight: 600; }
.story-actions { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.story-visual { position: relative; }
.story-visual-main { border-radius: 24px; overflow: hidden; background: linear-gradient(160deg, #0D9488 0%, #14B8A6 40%, #FFF7ED 100%); height: 440px; display: flex; align-items: center; justify-content: center; position: relative; }
.story-visual-year { font-family: var(--font-head); font-size: 100px; font-weight: 900; color: rgba(255,255,255,0.12); line-height: 1; position: absolute; bottom: 20px; right: 24px; user-select: none; }
.story-visual-center { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; z-index: 1; }
.story-visual-logo { font-family: var(--font-head); font-size: 36px; font-weight: 800; color: #fff; letter-spacing: -1px; display: flex; align-items: center; gap: 10px; }
.story-visual-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--orange); }
.story-visual-sub { font-size: 15px; color: rgba(255,255,255,0.7); font-weight: 500; }
.story-float-1 { position: absolute; top: -20px; right: -20px; background: var(--surface); border-radius: 14px; padding: 16px 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.12); border: 1px solid var(--border); animation: floatA 3s ease-in-out infinite alternate; }
.story-float-2 { position: absolute; bottom: -20px; left: -20px; background: var(--surface); border-radius: 14px; padding: 16px 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.12); border: 1px solid var(--border); animation: floatB 3.5s ease-in-out infinite alternate; }
.sf-num { font-family: var(--font-head); font-size: 28px; font-weight: 800; color: var(--teal); line-height: 1; }
.sf-label { font-size: 12px; color: var(--muted); margin-top: 3px; font-weight: 500; }
.sf-rating { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.sf-stars { color: #FBBF24; font-size: 14px; }
.sf-rating-text { font-size: 12px; color: var(--muted); }
.values-section { background: #0F172A; position: relative; overflow: hidden; }
.values-section::before { content: ''; position: absolute; top: -160px; right: -100px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(13,148,136,0.2), transparent 65%); pointer-events: none; }
.values-header { text-align: center; margin-bottom: 56px; position: relative; z-index: 1; }
.values-header .section-title { color: #fff; }
.values-header .section-desc { color: rgba(255,255,255,0.5); margin: 14px auto 0; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; z-index: 1; }
.value-card { border-radius: 20px; padding: 40px 32px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.04); transition: background 0.25s, border-color 0.25s, transform 0.25s; }
.value-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(13,148,136,0.3); transform: translateY(-4px); }
.value-icon-wrap { width: 56px; height: 56px; border-radius: 16px; margin-bottom: 24px; display: flex; align-items: center; justify-content: center; }
.value-icon-wrap.vc-teal   { background: linear-gradient(135deg, rgba(13,148,136,0.3), rgba(20,184,166,0.2)); }
.value-icon-wrap.vc-orange { background: linear-gradient(135deg, rgba(249,115,22,0.3), rgba(251,191,36,0.2)); }
.value-icon-wrap.vc-blue   { background: linear-gradient(135deg, rgba(59,130,246,0.3), rgba(99,102,241,0.2)); }
.value-icon-wrap svg { width: 28px; height: 28px; }
.vc-teal svg   { color: #2DD4BF; }
.vc-orange svg { color: #FDBA74; }
.vc-blue svg   { color: #93C5FD; }
.value-title { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.value-desc { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.5); }
.value-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.value-list-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.55); font-weight: 500; }
.value-list-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.vc-teal .value-list-dot   { background: #2DD4BF; }
.vc-orange .value-list-dot { background: #FDBA74; }
.vc-blue .value-list-dot   { background: #93C5FD; }
.timeline-section { background: var(--warm-white); }
.timeline-header { margin-bottom: 56px; }
.timeline { display: flex; flex-direction: column; gap: 0; max-width: 760px; }
.timeline-item { display: grid; grid-template-columns: 100px 1fr; gap: 32px; align-items: flex-start; position: relative; padding-bottom: 40px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: 49px; top: 44px; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--teal), rgba(13,148,136,0.1)); }
.timeline-item:last-child::before { display: none; }
.timeline-year { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--teal); line-height: 1; text-align: right; padding-top: 12px; }
.timeline-node { position: relative; }
.timeline-node::before { content: ''; position: absolute; left: -44px; top: 12px; width: 14px; height: 14px; border-radius: 50%; background: var(--teal); border: 3px solid var(--warm-white); box-shadow: 0 0 0 3px rgba(13,148,136,0.25); }
.timeline-node-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--dark); margin-bottom: 6px; }
.timeline-node-desc { font-size: 14px; line-height: 1.7; color: var(--muted); }
.timeline-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 5px 12px; border-radius: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.badge-teal   { background: #CCFBF1; color: var(--teal-dark); }
.badge-orange { background: #FED7AA; color: #C2410C; }
.badge-green  { background: #DCFCE7; color: #15803D; }
.about-doctors-section { background: var(--surface); }
.about-doctors-header  { margin-bottom: 56px; }
.about-doctors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.doctor-card-extended { background: var(--surface); border-radius: 20px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-card); transition: transform 0.25s, box-shadow 0.25s; }
.doctor-card-extended:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(13,148,136,0.15); }
.doc-ext-header { height: 200px; position: relative; display: flex; align-items: center; justify-content: center; }
.doc-ext-header.deh-teal   { background: linear-gradient(160deg, #0D9488, #14B8A6 70%); }
.doc-ext-header.deh-dark   { background: linear-gradient(160deg, #1C1917, #292524 70%); }
.doc-ext-header.deh-orange { background: linear-gradient(160deg, #F97316, #FDBA74 70%); }
.doc-ext-avatar { width: 88px; height: 88px; border-radius: 50%; background: rgba(255,255,255,0.2); backdrop-filter: blur(8px); border: 3px solid rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 26px; font-weight: 800; color: #fff; }
.doc-ext-badge { position: absolute; bottom: 16px; left: 16px; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-radius: 8px; padding: 5px 11px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--teal); }
.doc-ext-avail { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; gap: 5px; background: rgba(0,0,0,0.3); backdrop-filter: blur(8px); border-radius: 8px; padding: 5px 10px; font-size: 11px; font-weight: 600; color: #4ADE80; }
.doc-avail-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; }
.doc-ext-body { padding: 24px; }
.doc-ext-name { font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--dark); }
.doc-ext-qual { font-size: 12px; color: var(--muted); margin-top: 3px; font-weight: 500; line-height: 1.5; }
.doc-ext-stats { display: flex; gap: 0; margin-top: 18px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.doc-ext-stat { flex: 1; padding: 12px 8px; text-align: center; border-right: 1px solid var(--border); }
.doc-ext-stat:last-child { border-right: none; }
.doc-ext-stat-num { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--teal); }
.doc-ext-stat-label { font-size: 10px; color: var(--muted); margin-top: 2px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.doc-ext-divider { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.doc-ext-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 10px; }
.doc-ext-expertise { display: flex; flex-wrap: wrap; gap: 6px; }
.doc-expertise-pill { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; background: var(--warm-gray); color: var(--dark); }
.doc-ext-memberships { display: flex; flex-direction: column; gap: 5px; }
.doc-membership-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.doc-membership-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.doc-ext-rating { display: flex; align-items: center; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.doc-ext-stars { color: #FBBF24; font-size: 13px; }
.doc-ext-rating-text { font-size: 12px; color: var(--muted); }
.doc-ext-btn { display: block; width: 100%; margin-top: 16px; text-align: center; background: var(--gradient-btn); color: #fff; border: none; border-radius: 10px; padding: 12px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font-head); transition: opacity 0.2s; }
.doc-ext-btn:hover { opacity: 0.9; }
.tech-section { background: linear-gradient(160deg, #FFF7ED 0%, #F0FDFA 100%); }
.tech-header { text-align: center; margin-bottom: 52px; }
.tech-header .section-desc { margin: 14px auto 0; }
.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tech-card { background: var(--surface); border-radius: var(--radius-card); padding: 28px 24px; border: 1px solid var(--border); transition: transform 0.25s, box-shadow 0.25s; }
.tech-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,0.09); }
.tech-icon { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; }
.tech-icon.ti-teal   { background: linear-gradient(135deg, rgba(13,148,136,0.15), rgba(20,184,166,0.08)); }
.tech-icon.ti-orange { background: linear-gradient(135deg, rgba(249,115,22,0.15), rgba(251,191,36,0.08)); }
.tech-icon.ti-dark   { background: linear-gradient(135deg, rgba(28,25,23,0.1), rgba(28,25,23,0.05)); }
.tech-icon svg { width: 24px; height: 24px; }
.ti-teal svg   { color: var(--teal); }
.ti-orange svg { color: var(--orange); }
.ti-dark svg   { color: var(--dark); }
.tech-name { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.tech-desc { font-size: 13px; line-height: 1.6; color: var(--muted); }
.why-section { background: var(--surface); }
.why-header { margin-bottom: 52px; }
.bento-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 16px; }
.bento-card { border-radius: 20px; padding: 36px 32px; position: relative; overflow: hidden; }
.bento-card.bc-wide { grid-column: span 2; }
.bento-card.bc-tall { grid-row: span 2; }
.bento-card.bc-dark { background: #1C1917; }
.bento-card.bc-teal { background: linear-gradient(135deg, #0D9488, #14B8A6); }
.bento-card.bc-light { background: #F0FDFA; border: 1.5px solid #CCFBF1; }
.bento-card.bc-warm  { background: #FFF7ED; border: 1.5px solid #FED7AA; }
.bento-card.bc-soft  { background: var(--warm-white); border: 1px solid var(--border); }
.bento-card.bc-cta { background: var(--gradient-btn); display: flex; flex-direction: column; justify-content: space-between; }
.bento-icon { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; }
.bc-dark .bento-icon, .bc-teal .bento-icon { background: rgba(255,255,255,0.12); }
.bc-light .bento-icon { background: #CCFBF1; }
.bc-warm .bento-icon  { background: #FED7AA; }
.bc-soft .bento-icon  { background: var(--warm-gray); }
.bc-cta .bento-icon   { background: rgba(255,255,255,0.2); }
.bento-icon svg { width: 24px; height: 24px; }
.bc-dark .bento-icon svg, .bc-teal .bento-icon svg, .bc-cta .bento-icon svg { color: #fff; }
.bc-light .bento-icon svg { color: var(--teal); }
.bc-warm .bento-icon svg  { color: #EA580C; }
.bc-soft .bento-icon svg  { color: var(--teal); }
.bento-title { font-family: var(--font-head); font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.bc-dark .bento-title, .bc-teal .bento-title, .bc-cta .bento-title { color: #fff; }
.bc-light .bento-title, .bc-warm .bento-title, .bc-soft .bento-title { color: var(--dark); }
.bento-desc { font-size: 14px; line-height: 1.7; }
.bc-dark .bento-desc, .bc-teal .bento-desc, .bc-cta .bento-desc { color: rgba(255,255,255,0.65); }
.bc-light .bento-desc { color: #0F766E; }
.bc-warm .bento-desc  { color: #92400E; }
.bc-soft .bento-desc  { color: var(--muted); }
.bento-big-num { font-family: var(--font-head); font-size: 72px; font-weight: 900; color: rgba(255,255,255,0.08); line-height: 1; position: absolute; bottom: 24px; right: 28px; user-select: none; }
.bento-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.2); border: 1.5px solid rgba(255,255,255,0.4); color: #fff; border-radius: var(--radius-pill); padding: 10px 22px; font-family: var(--font-head); font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 20px; transition: background 0.2s; }
.bento-cta-btn:hover { background: rgba(255,255,255,0.3); }
.bento-checks { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.bento-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.7); font-weight: 500; }
.bento-check-icon { width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bento-check-icon svg { width: 12px; height: 12px; color: #4ADE80; }
.community-section { background: #0F172A; position: relative; overflow: hidden; }
.community-section::before { content: ''; position: absolute; top: -120px; left: -80px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(249,115,22,0.15), transparent 65%); pointer-events: none; }
.community-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 1; }
.community-left .section-title { color: #fff; }
.community-left .section-desc  { color: rgba(255,255,255,0.55); }
.community-features { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.comm-feature { display: flex; align-items: flex-start; gap: 14px; }
.comm-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.07); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.comm-icon svg { width: 18px; height: 18px; color: var(--teal-light); }
.comm-text strong { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: #fff; display: block; }
.comm-text span { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.5; }
.community-right-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 36px 32px; }
.cr-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.cr-sub { font-size: 13px; color: rgba(255,255,255,0.45); margin-bottom: 24px; }
.price-table { display: flex; flex-direction: column; gap: 12px; }
.price-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); }
.price-service { font-size: 14px; color: rgba(255,255,255,0.7); font-weight: 500; }
.price-range { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--teal-light); }
.price-note { font-size: 11px; color: rgba(255,255,255,0.3); margin-top: 14px; text-align: center; }
.about-test-section { background: linear-gradient(135deg, #FFF7ED 0%, #F0FDFA 100%); }
.about-test-header  { text-align: center; margin-bottom: 52px; }
.about-test-header .section-desc { margin: 14px auto 0; }
.about-test-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.about-test-card { background: var(--surface); border-radius: var(--radius-card); padding: 30px 28px; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 2px 16px rgba(0,0,0,0.05); transition: transform 0.25s; }
.about-test-card:hover { transform: translateY(-3px); }
.atc-stars  { color: #FBBF24; font-size: 14px; margin-bottom: 14px; }
.atc-quote  { font-size: 15px; line-height: 1.75; color: var(--dark-mid); font-style: italic; margin-bottom: 20px; }
.atc-author { display: flex; align-items: center; gap: 12px; }
.atc-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--orange)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; flex-shrink: 0; }
.atc-name { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--dark); }
.atc-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.atc-service-tag { display: inline-block; margin-top: 5px; padding: 3px 9px; border-radius: 6px; background: #F0FDFA; font-size: 11px; font-weight: 600; color: var(--teal); }
@media (max-width: 1024px) {
  .values-grid { grid-template-columns: 1fr 1fr; }
  .tech-grid   { grid-template-columns: 1fr 1fr; }
  .bento-grid  { grid-template-columns: 1fr 1fr; }
  .bento-card.bc-wide { grid-column: span 2; }
  .about-doctors-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .story-grid    { grid-template-columns: 1fr; }
  .story-visual  { order: -1; }
  .story-float-1, .story-float-2 { display: none; }
  .values-grid   { grid-template-columns: 1fr; }
  .community-grid { grid-template-columns: 1fr; }
  .tech-grid     { grid-template-columns: 1fr; }
  .about-test-grid { grid-template-columns: 1fr; }
  .bento-grid    { grid-template-columns: 1fr; }
  .bento-card.bc-wide, .bento-card.bc-tall { grid-column: span 1; grid-row: span 1; }
  .hero-stats-row { gap: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   SERVICES PAGE
═══════════════════════════════════════════════════════════════ */
.services-nav-bar {
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 62px; z-index: 100;
}
.snav-inner { display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; }
.snav-inner::-webkit-scrollbar { display: none; }
.snav-pill {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 20px; font-size: 13px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: color 0.18s, border-color 0.18s; background: none; border-top: none; border-left: none; border-right: none;
}
.snav-pill:hover { color: var(--dark); }
.snav-pill.active { color: var(--teal); border-bottom-color: var(--teal); }
.snav-pill-icon { font-size: 15px; }
.svc-section { padding: 100px 0; }
.svc-section:first-of-type { padding-top: 80px; }
.svc-section-alt { background: var(--warm-white); }
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.svc-grid.reversed { direction: rtl; }
.svc-grid.reversed > * { direction: ltr; }
.svc-visual { position: relative; }
.svc-visual-main {
  border-radius: 24px; overflow: hidden; height: 480px;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.svc-visual-main.sv-teal   { background: linear-gradient(160deg, #0D9488, #14B8A6 60%, #FFF7ED); }
.svc-visual-main.sv-dark   { background: linear-gradient(160deg, #1C1917, #292524 60%, #0D9488 120%); }
.svc-visual-main.sv-orange { background: linear-gradient(160deg, #F97316, #FDBA74 60%, #F0FDFA); }
.svc-visual-main.sv-blue   { background: linear-gradient(160deg, #0EA5E9, #38BDF8 60%, #E0F2FE); }
.svc-visual-main.sv-green  { background: linear-gradient(160deg, #10B981, #34D399 60%, #ECFDF5); }
.svc-visual-main.sv-pink   { background: linear-gradient(160deg, #EC4899, #F9A8D4 60%, #FDF2F8); }
.svc-visual-icon { font-size: 80px; position: relative; z-index: 1; }
.svc-float {
  position: absolute; background: var(--surface); border-radius: 14px; padding: 14px 18px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12); border: 1px solid var(--border);
}
.svc-float-1 { top: -16px; right: -16px; animation: floatA 3s ease-in-out infinite alternate; }
.svc-float-2 { bottom: -16px; left: -16px; animation: floatB 3.5s ease-in-out infinite alternate; }
.svc-float-num { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--teal); line-height: 1; }
.svc-float-label { font-size: 11px; color: var(--muted); margin-top: 3px; font-weight: 500; }
.svc-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: #F0FDFA; border: 1px solid #CCFBF1; border-radius: var(--radius-pill);
  padding: 6px 14px; font-size: 12px; font-weight: 700;
  color: var(--teal); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px;
}
.svc-title { font-family: var(--font-head); font-size: clamp(28px, 3vw, 38px); font-weight: 700; color: var(--dark); line-height: 1.2; }
.svc-desc { font-size: 16px; line-height: 1.75; color: var(--muted); margin-top: 16px; }
.svc-bullets { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.svc-bullet { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--dark); font-weight: 500; }
.svc-bullet-dot { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, rgba(13,148,136,0.15), rgba(20,184,166,0.08)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.svc-bullet-dot::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.svc-price-row { display: flex; align-items: center; gap: 10px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.svc-price-label { font-size: 13px; color: var(--muted); font-weight: 500; }
.svc-price { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--teal); }
.svc-price-sep { color: var(--border-dark); }
.svc-actions { display: flex; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.pricing-section { background: #0F172A; position: relative; overflow: hidden; }
.pricing-section::before {
  content: ''; position: absolute; top: -100px; right: -80px; width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(13,148,136,0.2), transparent 65%); pointer-events: none;
}
.pricing-header { text-align: center; margin-bottom: 52px; position: relative; z-index: 1; }
.pricing-header .section-title { color: #fff; }
.pricing-header .section-desc  { color: rgba(255,255,255,0.5); margin: 14px auto 0; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; position: relative; z-index: 1; }
.pricing-card {
  border-radius: 20px; padding: 32px 28px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.pricing-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(13,148,136,0.3); transform: translateY(-4px); }
.pricing-card.featured { background: linear-gradient(160deg, rgba(13,148,136,0.25), rgba(20,184,166,0.1)); border-color: rgba(13,148,136,0.4); }
.pricing-card-badge {
  display: inline-block; padding: 4px 12px; border-radius: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(13,148,136,0.3); color: var(--teal-light); margin-bottom: 12px;
}
.pricing-service { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.pricing-price { font-family: var(--font-head); font-size: 26px; font-weight: 800; color: var(--teal-light); line-height: 1; margin-bottom: 4px; }
.pricing-price-sub { font-size: 12px; color: rgba(255,255,255,0.4); }
.pricing-features { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.pricing-feature { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.6); }
.pf-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal-light); flex-shrink: 0; }
.pricing-note { font-size: 12px; color: rgba(255,255,255,0.35); text-align: center; margin-top: 28px; position: relative; z-index: 1; }
.faq-section { background: var(--warm-white); }
.faq-header { margin-bottom: 48px; }
.faq-list { max-width: 720px; display: flex; flex-direction: column; gap: 8px; }
.faq-item { border-radius: 14px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.faq-question { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; cursor: pointer; gap: 16px; }
.faq-question-text { font-family: var(--font-head); font-size: 15px; font-weight: 600; color: var(--dark); }
.faq-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--warm-gray); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s, transform 0.3s; }
.faq-icon svg { width: 14px; height: 14px; color: var(--muted); transition: transform 0.3s; }
.faq-item.open .faq-icon { background: linear-gradient(135deg, rgba(13,148,136,0.15), rgba(20,184,166,0.08)); }
.faq-item.open .faq-icon svg { transform: rotate(45deg); color: var(--teal); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer.open { max-height: 300px; }
.faq-answer-inner { padding: 0 22px 18px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.appt-inline-section { background: var(--surface); }
.appt-inline-section .appt-feature-icon { background: var(--warm-gray); }
@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .svc-grid { grid-template-columns: 1fr; gap: 36px; }
  .svc-grid.reversed { direction: ltr; }
  .svc-visual { order: -1; }
  .svc-float-1, .svc-float-2 { display: none; }
  .pricing-grid { grid-template-columns: 1fr; }
  .services-nav-bar { top: 58px; }
}

/* ═══════════════════════════════════════════════════════════════
   DOCTORS PAGE
═══════════════════════════════════════════════════════════════ */
.team-strip { background: var(--surface); padding: 0; }
.team-tabs { display: flex; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.team-tabs::-webkit-scrollbar { display: none; }
.team-tab {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 18px 24px; cursor: pointer; border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s; background: none; border-top: none; border-left: none; border-right: none;
  font-family: var(--font-head);
}
.team-tab.active { border-bottom-color: var(--teal); }
.team-tab-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #fff; flex-shrink: 0;
}
.tav-teal   { background: linear-gradient(135deg, #0D9488, #14B8A6); }
.tav-dark   { background: linear-gradient(135deg, #1C1917, #3C3A37); }
.tav-orange { background: linear-gradient(135deg, #F97316, #FDBA74); }
.team-tab-info { text-align: left; }
.team-tab-name { font-size: 14px; font-weight: 700; color: var(--dark); white-space: nowrap; }
.team-tab-spec { font-size: 11px; color: var(--muted); }
.team-tab.active .team-tab-name { color: var(--teal); }
.doc-section { padding: 100px 0; }
.doc-bg-warm { background: var(--warm-white); }
.doc-bg-dark { background: #0F172A; }
.doc-grid { display: grid; grid-template-columns: 420px 1fr; gap: 72px; align-items: flex-start; }
.doc-visual-col { position: sticky; top: 90px; }
.doc-card-main {
  border-radius: 24px; overflow: hidden; border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
.doc-card-header {
  height: 220px; display: flex; align-items: center; justify-content: center; position: relative;
}
.dch-teal   { background: linear-gradient(160deg, #0D9488, #14B8A6 70%); }
.dch-dark   { background: linear-gradient(160deg, #1C1917, #292524 70%); }
.dch-orange { background: linear-gradient(160deg, #F97316, #FDBA74 70%); }
.doc-avatar {
  width: 100px; height: 100px; border-radius: 50%;
  background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);
  border: 4px solid rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 32px; font-weight: 800; color: #fff;
  position: relative; z-index: 1;
}
.doc-avail-tag {
  position: absolute; top: 16px; right: 16px;
  display: flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,0.35); backdrop-filter: blur(8px);
  border-radius: 8px; padding: 5px 10px;
  font-size: 11px; font-weight: 600; color: #4ADE80;
}
.doc-avail-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; }
.doc-card-body { background: var(--surface); padding: 24px; }
.doc-name { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--dark); }
.doc-qual { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.doc-stats { display: flex; gap: 0; margin-top: 20px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.doc-stat { flex: 1; padding: 14px 8px; text-align: center; border-right: 1px solid var(--border); }
.doc-stat:last-child { border-right: none; }
.doc-stat-num { font-family: var(--font-head); font-size: 20px; font-weight: 800; color: var(--teal); }
.doc-stat-label { font-size: 10px; color: var(--muted); margin-top: 3px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.doc-actions { display: flex; gap: 8px; margin-top: 16px; }
.doc-action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border-radius: 10px; border: 1.5px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--muted);
  cursor: pointer; background: none; transition: border-color 0.18s, color 0.18s;
}
.doc-action-btn:hover { border-color: var(--teal); color: var(--teal); }
.doc-action-btn svg { width: 14px; height: 14px; }
.doc-rating-row { display: flex; align-items: center; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.doc-stars { color: #FBBF24; font-size: 14px; }
.doc-rating-text { font-size: 13px; color: var(--muted); }
.doc-info-col {}
.doc-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 14px; }
.doc-about { font-size: 16px; line-height: 1.8; color: var(--dark-mid); }
.doc-about + .doc-about { margin-top: 14px; }
.doc-expertise-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.doc-exp-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--dark);
  background: var(--surface);
}
.doc-exp-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.doc-edu-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.doc-edu-item { display: flex; gap: 14px; align-items: flex-start; }
.doc-edu-icon { width: 36px; height: 36px; border-radius: 10px; background: #F0FDFA; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.doc-edu-icon svg { width: 16px; height: 16px; color: var(--teal); }
.doc-edu-title { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--dark); }
.doc-edu-school { font-size: 12px; color: var(--muted); margin-top: 2px; }
.doc-edu-year { font-size: 11px; color: var(--teal); font-weight: 600; margin-top: 3px; }
.doc-schedule { margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.doc-sched-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.doc-sched-row:last-child { border-bottom: none; }
.doc-sched-day { font-size: 13px; font-weight: 600; color: var(--dark); }
.doc-sched-time { font-size: 12px; color: var(--muted); }
.doc-sched-avail { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; }
.doc-sched-avail.avail  { color: #059669; }
.doc-sched-avail.unavail { color: var(--muted); }
.doc-avail-pip { width: 6px; height: 6px; border-radius: 50%; }
.avail .doc-avail-pip  { background: #059669; }
.unavail .doc-avail-pip { background: var(--muted); }
.doc-langs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.doc-lang-pill { padding: 6px 14px; border-radius: 8px; background: var(--warm-gray); font-size: 13px; font-weight: 600; color: var(--dark); }
.doc-values-strip { margin-top: 32px; background: linear-gradient(135deg, #0D9488 0%, #F97316 100%); border-radius: 16px; padding: 24px 28px; }
.doc-values-strip-title { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 16px; }
.doc-values-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.doc-value-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 500; }
.doc-value-icon { width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.doc-value-icon svg { width: 12px; height: 12px; color: #fff; }
.appt-section { background: var(--warm-white); }
.appt-section .appt-feature-icon { background: var(--surface); border: 1px solid var(--border); }

/* Doctors page: corrected styles for current doctors.html markup */
.hero-doc-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.hero-doc-pick {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 210px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
}
.hero-doc-pick:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.24);
}
.hdp-avatar,
.tsc-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.hdp-name {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}
.hdp-title {
  margin-top: 2px;
  font-size: 11px;
  color: rgba(255,255,255,0.56);
}
.team-strip-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 10px 36px rgba(0,0,0,0.07);
}
.team-strip-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 22px 24px;
  transition: background 0.18s;
}
.team-strip-card:hover { background: #F0FDFA; }
.team-strip-card:hover .tsc-name { color: var(--teal); }
.tsc-name {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
}
.tsc-spec {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.tsc-arrow {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--warm-gray);
  color: var(--teal);
}
.tsc-arrow svg,
.dvc-book-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.doc-bg-orange { background: #FFF7ED; }
.doc-bg-dark .doc-role-pill,
.doc-bg-dark .doc-exp-pill,
.doc-bg-dark .doc-tcard {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}
.doc-bg-dark .doc-name-large,
.doc-bg-dark .doc-sub-heading,
.doc-bg-dark .doc-edu-title,
.doc-bg-dark .doc-tcard-name,
.doc-bg-dark .doc-sched-label {
  color: #fff;
}
.doc-bg-dark .doc-qual-line,
.doc-bg-dark .doc-bio,
.doc-bg-dark .doc-rating-count,
.doc-bg-dark .doc-edu-inst,
.doc-bg-dark .doc-tcard-quote,
.doc-bg-dark .doc-tcard-meta {
  color: rgba(255,255,255,0.62);
}
.doc-bg-dark .doc-schedule,
.doc-bg-dark .doc-edu-node,
.doc-bg-dark .doc-membership {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.72);
}
.doc-bg-dark .doc-exp-pill,
.doc-bg-dark .doc-lang-pill {
  color: rgba(255,255,255,0.82);
}
.doc-reversed .doc-visual-col { order: 2; }
.doc-visual-card {
  min-height: 340px;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 54px rgba(0,0,0,0.16);
}
.doc-visual-card::before {
  content: '';
  position: absolute;
  inset: 22px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.18);
}
.dvc-teal { background: linear-gradient(160deg, #0D9488 0%, #14B8A6 60%, #CCFBF1 130%); }
.dvc-dark { background: linear-gradient(160deg, #1C1917 0%, #292524 58%, #0D9488 135%); }
.dvc-orange { background: linear-gradient(160deg, #F97316 0%, #FDBA74 62%, #FFF7ED 130%); }
.dvc-decorative-num {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--font-head);
  font-size: 76px;
  font-weight: 900;
  line-height: 1;
  color: rgba(255,255,255,0.12);
}
.dvc-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px;
}
.dvc-initials {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
}
.dvc-name {
  margin-top: 22px;
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 800;
  color: #fff;
}
.dvc-title {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
}
.dvc-avail {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.86);
  font-size: 12px;
  font-weight: 700;
}
.dvc-avail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 4px rgba(74,222,128,0.18);
}
.dvc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.doc-bg-dark .dvc-stats {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}
.dvc-stat {
  padding: 16px 10px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.doc-bg-dark .dvc-stat { border-right-color: rgba(255,255,255,0.12); }
.dvc-stat:last-child { border-right: none; }
.dvc-stat-num {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  color: var(--teal);
}
.doc-bg-dark .dvc-stat-num { color: var(--teal-light); }
.dvc-stat-label {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.doc-bg-dark .dvc-stat-label { color: rgba(255,255,255,0.48); }
.dvc-book-btn {
  width: 100%;
  margin-top: 14px;
  min-height: 48px;
  border: none;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--gradient-btn);
  color: #fff;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(13,148,136,0.28);
  transition: transform 0.18s, opacity 0.18s;
}
.dvc-book-btn:hover {
  transform: translateY(-1px);
  opacity: 0.94;
}
.doc-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid #CCFBF1;
  background: #F0FDFA;
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.doc-role-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}
.doc-name-large {
  margin-top: 18px;
  font-family: var(--font-head);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.08;
  color: var(--dark);
}
.doc-qual-line {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}
.doc-rating-score {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--dark);
}
.doc-bg-dark .doc-rating-score { color: #fff; }
.doc-rating-count {
  font-size: 13px;
  color: var(--muted);
}
.doc-bio {
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.78;
  color: var(--dark-mid);
}
.doc-sub-heading {
  margin-top: 30px;
  margin-bottom: 13px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dark);
}
.doc-expertise,
.doc-languages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.doc-edu-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.doc-edu-node {
  flex: 1;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.doc-edu-inst {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.doc-memberships {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.doc-membership {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  font-size: 13px;
  line-height: 1.55;
  color: var(--dark-mid);
}
.doc-mem-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #F0FDFA;
  color: var(--teal);
}
.doc-mem-icon svg {
  width: 15px;
  height: 15px;
}
.doc-schedule {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  padding: 0;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.doc-schedule .doc-sched-day {
  min-height: 66px;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--surface);
}
.doc-sched-day.on {
  border-color: #CCFBF1;
  background: #F0FDFA;
}
.doc-sched-day.off {
  background: #F5F5F4;
  color: var(--muted);
}
.doc-bg-dark .doc-sched-day.on {
  border-color: rgba(45,212,191,0.25);
  background: rgba(13,148,136,0.16);
}
.doc-bg-dark .doc-sched-day.off {
  background: rgba(255,255,255,0.04);
}
.doc-sched-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--dark);
}
.doc-sched-check {
  font-size: 16px;
  font-weight: 800;
  color: var(--teal);
}
.doc-sched-day.off .doc-sched-check { color: var(--muted); }
.doc-tcard {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.doc-testimonials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.doc-tcard-stars {
  color: #FBBF24;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.doc-tcard-quote {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}
.doc-tcard-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.doc-tcard-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--teal), var(--teal-light));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.doc-tcard-name {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  color: var(--dark);
}
.doc-tcard-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.values-strip-section { background: var(--surface); }
.values-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.vs-card {
  padding: 28px 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--warm-white);
  text-align: center;
}
.vs-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F0FDFA;
  color: var(--teal);
}
.vs-icon svg {
  width: 26px;
  height: 26px;
}
.vs-title {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 800;
  color: var(--dark);
}
.vs-desc {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted);
}
.appt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 1024px) {
  .doc-grid { grid-template-columns: 1fr; }
  .doc-visual-col { position: static; }
  .doc-reversed .doc-visual-col { order: 0; }
  .team-strip-inner { grid-template-columns: 1fr; }
  .team-strip-card { border-left: none !important; border-top: 1px solid var(--border); }
  .team-strip-card:first-child { border-top: none; }
  .values-strip { grid-template-columns: repeat(2, 1fr); }
  .appt-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  .doc-grid { grid-template-columns: 1fr; gap: 32px; }
  .doc-values-list { grid-template-columns: 1fr; }
  .team-tab { padding: 14px 16px; }
  .team-tab-avatar { width: 30px; height: 30px; font-size: 11px; }
  .hero-doc-pick { width: 100%; }
  .doc-section { padding: 64px 0; }
  .doc-visual-card { min-height: 280px; }
  .doc-schedule { grid-template-columns: repeat(4, 1fr); }
  .doc-testimonials { grid-template-columns: 1fr; }
  .values-strip { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════════════════════════ */
.quick-info-section { background: var(--surface); padding-bottom: 0; }
.quick-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: -36px; }
.qi-card {
  background: var(--surface); border-radius: 18px; padding: 24px 22px;
  border: 1px solid var(--border); box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  display: flex; align-items: flex-start; gap: 16px;
}
.qi-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qi-icon.qi-teal   { background: linear-gradient(135deg, rgba(13,148,136,0.15), rgba(20,184,166,0.08)); }
.qi-icon.qi-orange { background: linear-gradient(135deg, rgba(249,115,22,0.15), rgba(251,191,36,0.08)); }
.qi-icon.qi-dark   { background: linear-gradient(135deg, rgba(28,25,23,0.1), rgba(28,25,23,0.05)); }
.qi-icon svg { width: 20px; height: 20px; }
.qi-teal svg   { color: var(--teal); }
.qi-orange svg { color: var(--orange); }
.qi-dark svg   { color: var(--dark); }
.qi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.qi-value { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--dark); margin-top: 4px; }
.qi-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.qi-status-row { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.qi-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 7px; font-size: 11px; font-weight: 700;
  background: #DCFCE7; color: #15803D;
}
.qi-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; }
.qi-badge-sub { font-size: 11px; color: var(--muted); }
.contact-main { background: var(--surface); }
.contact-main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: flex-start; }
.contact-form-col {}
.contact-form-title { font-family: var(--font-head); font-size: 26px; font-weight: 700; color: var(--dark); margin-bottom: 6px; }
.contact-form-sub { font-size: 14px; color: var(--muted); margin-bottom: 28px; line-height: 1.6; }
.cf-subject-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cf-subject-pill {
  padding: 7px 15px; border-radius: 10px; border: 1.5px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
  background: none; transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.cf-subject-pill:hover { border-color: var(--teal); color: var(--teal); }
.cf-subject-pill.active { border-color: var(--teal); background: #F0FDFA; color: var(--teal); }
.cf-form { display: flex; flex-direction: column; gap: 14px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cf-label { font-size: 12px; font-weight: 600; color: var(--dark); margin-bottom: 6px; display: block; }
.cf-input, .cf-select, .cf-textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--border);
  font-size: 14px; font-family: var(--font-body); color: var(--dark); background: var(--surface);
  outline: none; transition: border-color 0.2s; box-sizing: border-box;
}
.cf-input:focus, .cf-select:focus, .cf-textarea:focus { border-color: var(--teal); }
.cf-textarea { resize: vertical; min-height: 110px; }
.cf-submit {
  width: 100%; padding: 15px; border-radius: 12px; border: none;
  background: var(--gradient-btn); color: #fff;
  font-family: var(--font-head); font-size: 15px; font-weight: 700;
  cursor: pointer; transition: opacity 0.2s;
}
.cf-submit:hover { opacity: 0.88; }
.contact-info-col { display: flex; flex-direction: column; gap: 20px; }
.ci-card { background: var(--warm-white); border-radius: 16px; padding: 24px; border: 1px solid var(--border); }
.ci-card-title { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--dark); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.ci-card-title svg { width: 16px; height: 16px; color: var(--teal); }
.ci-link { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--dark); font-weight: 500; }
.ci-link:last-child { border-bottom: none; padding-bottom: 0; }
.ci-link svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.ci-link a { color: var(--dark); }
.ci-link a:hover { color: var(--teal); }
.map-section { background: var(--warm-white); padding: 80px 0; }
.map-placeholder {
  border-radius: 20px; overflow: hidden; height: 340px;
  background: linear-gradient(135deg, #E2E8F0, #F1F5F9);
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed #CBD5E1; position: relative;
}
.map-ph-inner { text-align: center; }
.map-ph-icon { font-size: 40px; margin-bottom: 12px; }
.map-ph-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: #64748B; }
.map-ph-sub { font-size: 14px; color: #94A3B8; margin-top: 4px; }
.hours-section { background: var(--warm-white); }
.hours-header { margin-bottom: 36px; }
.hours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: flex-start; }
.hours-table { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.hours-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); transition: background 0.15s; }
.hours-row:last-child { border-bottom: none; }
.hours-row.today { background: #F0FDFA; }
.hours-day { font-size: 14px; font-weight: 600; color: var(--dark); display: flex; align-items: center; gap: 8px; }
.today-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: #CCFBF1; font-size: 10px; font-weight: 700; color: var(--teal); }
.today-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
.hours-time { font-size: 13px; color: var(--muted); font-weight: 500; }
.hours-closed { font-size: 13px; color: #DC2626; font-weight: 600; }
.live-status-card { background: var(--surface); border-radius: 20px; padding: 28px; border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.lsc-indicator { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.lsc-indicator.open   { background: linear-gradient(135deg, rgba(5,150,105,0.15), rgba(16,185,129,0.08)); }
.lsc-indicator.closed { background: linear-gradient(135deg, rgba(185,28,28,0.12), rgba(220,38,38,0.06)); }
.lsc-indicator svg { width: 26px; height: 26px; }
.lsc-indicator.open svg   { color: #059669; }
.lsc-indicator.closed svg { color: #B91C1C; }
.lsc-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--dark); }
.lsc-sub  { font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.lsc-next { font-size: 13px; color: var(--muted); margin-top: 12px; line-height: 1.6; }
.directions-section { background: var(--surface); }
.directions-header { margin-bottom: 48px; }
.directions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dir-card { background: var(--warm-white); border-radius: 18px; padding: 28px 24px; border: 1px solid var(--border); }
.dir-icon { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; }
.dir-icon.di-teal   { background: linear-gradient(135deg, rgba(13,148,136,0.15), rgba(20,184,166,0.08)); }
.dir-icon.di-orange { background: linear-gradient(135deg, rgba(249,115,22,0.15), rgba(251,191,36,0.08)); }
.dir-icon.di-dark   { background: linear-gradient(135deg, rgba(28,25,23,0.1), rgba(28,25,23,0.05)); }
.dir-icon svg { width: 22px; height: 22px; }
.di-teal svg   { color: var(--teal); }
.di-orange svg { color: var(--orange); }
.di-dark svg   { color: var(--dark); }
.dir-mode { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--dark); margin-bottom: 4px; }
.dir-time { font-size: 13px; font-weight: 600; color: var(--teal); margin-bottom: 10px; }
.dir-steps { display: flex; flex-direction: column; gap: 6px; }
.dir-step { display: flex; gap: 8px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.dir-step-num { width: 18px; height: 18px; border-radius: 50%; background: var(--warm-gray); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--dark); flex-shrink: 0; margin-top: 1px; }
.emergency-section { background: #0F172A; }
.emergency-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.emergency-left .section-title { color: #fff; }
.emergency-left .section-desc  { color: rgba(255,255,255,0.5); }
.emergency-steps { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.em-step { display: flex; gap: 14px; align-items: flex-start; }
.em-step-num { width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--teal-light); flex-shrink: 0; }
.em-step-text strong { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: #fff; display: block; }
.em-step-text span { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.5; }
.emergency-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 32px 28px; }
.emergency-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 8px; background: rgba(220,38,38,0.2); color: #FCA5A5; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; }
.emergency-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #F87171; }
.emergency-card-title { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.emergency-card-sub { font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 24px; line-height: 1.6; }
.emergency-contacts { display: flex; flex-direction: column; gap: 12px; }
.emergency-contact { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); }
.ec-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ec-icon.ec-call { background: rgba(13,148,136,0.3); }
.ec-icon.ec-wa   { background: rgba(37,211,102,0.2); }
.ec-icon svg { width: 16px; height: 16px; }
.ec-call svg { color: var(--teal-light); }
.ec-wa svg   { color: #4ADE80; }
.ec-label { font-size: 11px; color: rgba(255,255,255,0.4); font-weight: 500; }
.ec-value { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: #fff; }
.social-section { background: var(--warm-white); }
.social-header { text-align: center; margin-bottom: 48px; }
.social-header .section-desc { margin: 14px auto 0; }
.social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.social-card {
  border-radius: 18px; padding: 28px 20px; text-align: center;
  border: 1px solid var(--border); background: var(--surface);
  transition: transform 0.25s, box-shadow 0.25s;
  cursor: pointer;
}
.social-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
.social-icon { font-size: 32px; margin-bottom: 14px; }
.social-name { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--dark); margin-bottom: 4px; }
.social-handle { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.social-follow-btn { display: inline-block; padding: 8px 18px; border-radius: 10px; font-size: 12px; font-weight: 700; cursor: pointer; transition: opacity 0.2s; }
.social-follow-btn:hover { opacity: 0.85; }
.sf-insta { background: linear-gradient(135deg, #833AB4, #E1306C); color: #fff; }
.sf-fb    { background: #1877F2; color: #fff; }
.sf-yt    { background: #FF0000; color: #fff; }
.sf-wa    { background: #25D366; color: #fff; }

/* Contact page: corrected styles for current contact.html markup */
.hero-contact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.hcc {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.84);
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.hcc:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.26);
  color: #fff;
}
.hcc svg,
.addr-icon svg,
.lsc-contact-icon svg,
.emg-call-btn svg,
.emg-wa-btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}
.qi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 38px rgba(13,148,136,0.1);
}
.qi-card {
  transition: transform 0.22s, box-shadow 0.22s;
}
.qi-icon {
  background: #F0FDFA;
  color: var(--teal);
}
.qi-card:nth-child(2) .qi-icon {
  background: #FFF7ED;
  color: var(--orange);
}
.qi-card:nth-child(3) .qi-icon {
  background: var(--warm-gray);
  color: var(--dark);
}
.cf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.cf-field {
  display: flex;
  flex-direction: column;
}
.cf-field.full,
.cf-submit,
.cf-note {
  grid-column: 1 / -1;
}
.cf-note {
  margin-top: 2px;
  text-align: center;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}
.map-card {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 28% 28%, rgba(13,148,136,0.18) 0 90px, transparent 92px),
    radial-gradient(circle at 76% 68%, rgba(249,115,22,0.15) 0 120px, transparent 122px),
    linear-gradient(135deg, #F8FAFC, #F0FDFA);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
  box-shadow: 0 10px 34px rgba(0,0,0,0.07);
}
.map-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15,23,42,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.05) 1px, transparent 1px);
  background-size: 34px 34px;
}
.map-pin-wrap {
  position: relative;
  z-index: 1;
}
.map-pin {
  width: 70px;
  height: 70px;
  margin: 0 auto 14px;
  border-radius: 22px;
  background: var(--gradient-btn);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(13,148,136,0.28);
}
.map-pin svg {
  width: 34px;
  height: 34px;
}
.map-label {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 800;
  color: var(--dark);
}
.map-sub {
  margin-top: 5px;
  font-size: 13px;
  color: var(--muted);
}
.map-btn {
  position: relative;
  z-index: 1;
  margin-top: 22px;
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  background: var(--dark);
  color: #fff;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.18s, transform 0.18s;
}
.map-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.address-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.addr-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.addr-icon,
.lsc-contact-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #F0FDFA;
  color: var(--teal);
}
.addr-label,
.lsc-contact-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.addr-value,
.lsc-contact-value {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dark-mid);
}
.addr-value a,
.lsc-contact-value a {
  color: var(--teal);
  font-weight: 700;
}
.hours-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 84px;
  justify-content: flex-end;
  font-size: 12px;
  font-weight: 800;
}
.status-open { color: #059669; }
.status-closed { color: #B45309; }
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.hours-row.closed { background: #FFF7ED; }
.lsc-header {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lsc-indicator {
  position: relative;
  flex-shrink: 0;
  margin-bottom: 0;
}
.lsc-indicator::before {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: currentColor;
}
.lsc-indicator.open { color: #059669; }
.lsc-indicator.closed { color: #B91C1C; }
.lsc-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 22px 0;
}
.lsc-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.lsc-contact-row:last-of-type { border-bottom: none; }
.lsc-book-btn {
  width: 100%;
  min-height: 48px;
  margin-top: 18px;
  border: none;
  border-radius: 13px;
  background: var(--gradient-btn);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.lsc-book-btn svg {
  width: 16px;
  height: 16px;
}
.dir-card.dc-teal .dir-icon {
  background: #F0FDFA;
  color: var(--teal);
}
.dir-card.dc-warm .dir-icon {
  background: #FFF7ED;
  color: var(--orange);
}
.dir-card.dc-soft .dir-icon {
  background: #FEF9C3;
  color: #B45309;
}
.dir-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #F0FDFA;
  color: var(--teal);
  font-size: 11px;
  font-weight: 800;
}
.dir-time-badge svg {
  width: 12px;
  height: 12px;
}
.emergency-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.emg-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(248,113,113,0.13);
  color: #FCA5A5;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.emg-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #F87171;
}
.emg-title {
  margin-top: 18px;
  font-family: var(--font-head);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.12;
  color: #fff;
}
.emg-sub {
  max-width: 560px;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,0.58);
}
.emg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.emg-call-btn,
.emg-wa-btn {
  min-height: 48px;
  border-radius: 999px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 800;
}
.emg-call-btn {
  background: var(--gradient-btn);
  color: #fff;
}
.emg-wa-btn {
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.86);
}
.emg-right {
  padding: 26px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.06);
}
.emg-right-title {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}
.emg-tips {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}
.emg-tip {
  display: flex;
  gap: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.64);
}
.emg-tip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
  background: var(--teal-light);
}
.social-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.sc-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-icon svg {
  width: 28px;
  height: 28px;
}
.sc-instagram .sc-icon {
  background: linear-gradient(135deg, #833AB4, #E1306C);
  color: #fff;
}
.sc-facebook .sc-icon {
  background: #1877F2;
  color: #fff;
}
.sc-whatsapp .sc-icon {
  background: #25D366;
  color: #fff;
}
.sc-platform {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
}
.sc-handle {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}
.sc-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 800;
  color: var(--teal);
}
.sc-action svg {
  width: 13px;
  height: 13px;
}
@media (max-width: 1024px) {
  .quick-info-grid { grid-template-columns: 1fr 1fr; }
  .directions-grid { grid-template-columns: 1fr 1fr; }
  .social-grid     { grid-template-columns: 1fr 1fr; }
  .social-cards    { grid-template-columns: 1fr; }
  .emergency-inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .quick-info-grid  { grid-template-columns: 1fr; margin-top: 0; }
  .contact-main-grid { grid-template-columns: 1fr; }
  .hours-grid       { grid-template-columns: 1fr; }
  .emergency-grid   { grid-template-columns: 1fr; }
  .directions-grid  { grid-template-columns: 1fr; }
  .social-grid      { grid-template-columns: 1fr 1fr; }
  .cf-row           { grid-template-columns: 1fr; }
  .hero-contact-chips { flex-direction: column; align-items: stretch; }
  .hcc { width: 100%; justify-content: center; }
  .cf-grid { grid-template-columns: 1fr; }
  .hours-row { align-items: flex-start; flex-direction: column; gap: 5px; }
  .hours-status { min-width: 0; justify-content: flex-start; }
  .emg-actions { flex-direction: column; }
  .emg-call-btn, .emg-wa-btn { width: 100%; }
  .social-cards { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   BOOK APPOINTMENT PAGE
═══════════════════════════════════════════════════════════════ */
.book-hero {
  position: relative; padding: 130px 0 72px; overflow: hidden;
  background:
    radial-gradient(ellipse 50% 70% at 85% 30%, rgba(13,148,136,0.4) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 10% 80%, rgba(249,115,22,0.2) 0%, transparent 50%),
    #1C1917;
}
.book-hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 100px;
  background: linear-gradient(to bottom, transparent, #F8F9FA); z-index: 1;
}
.book-hero-inner { position: relative; z-index: 2; }
.book-hero-title {
  font-family: var(--font-head); font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 700; color: #fff; line-height: 1.12;
  letter-spacing: -0.02em; max-width: 640px;
}
.book-hero-title .teal-word {
  background: linear-gradient(135deg, #2DD4BF, #F97316);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.book-hero-sub {
  font-size: 16px; color: rgba(255,255,255,0.6); margin-top: 14px; max-width: 480px; line-height: 1.65;
}
.book-hero-pills { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.bhp {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.08); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-pill);
  padding: 6px 14px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.75);
}
.bhp-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; }
.book-body { background: #F8F9FA; padding: 48px 0 80px; }
.book-layout {
  display: grid; grid-template-columns: 1fr 340px; gap: 28px;
  align-items: flex-start;
}
.form-card {
  background: var(--surface); border-radius: 24px;
  border: 1px solid var(--border); overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.progress-bar-wrap {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 24px 32px 0;
}
.progress-steps {
  display: flex; align-items: flex-start; gap: 0; margin-bottom: 24px;
}
.progress-step {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; position: relative;
}
.progress-step + .progress-step::before {
  content: ''; position: absolute;
  top: 15px; right: 50%; left: -50%; height: 2px;
  background: var(--border);
  transition: background 0.4s;
}
.progress-step.done + .progress-step::before,
.progress-step.active + .progress-step::before { background: var(--teal); }
.ps-circle {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 13px; font-weight: 800;
  border: 2px solid var(--border); background: var(--surface);
  color: var(--muted); z-index: 1; transition: all 0.3s;
}
.progress-step.active .ps-circle {
  border-color: var(--teal); background: var(--teal); color: #fff;
  box-shadow: 0 0 0 4px rgba(13,148,136,0.15);
}
.progress-step.done .ps-circle {
  border-color: var(--teal); background: var(--teal); color: #fff;
}
.ps-label {
  font-size: 11px; font-weight: 600; color: var(--muted);
  margin-top: 7px; text-align: center; white-space: nowrap;
  transition: color 0.3s;
}
.progress-step.active .ps-label { color: var(--teal-dark); }
.progress-step.done  .ps-label  { color: var(--teal); }
.step-panel { display: none; padding: 32px; }
.step-panel.active { display: block; }
.step-heading {
  font-family: var(--font-head); font-size: 20px; font-weight: 700;
  color: var(--dark); margin-bottom: 4px;
}
.step-sub { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.service-select-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.svc-sel-card {
  border-radius: 14px; padding: 20px 16px;
  border: 2px solid var(--border); cursor: pointer;
  transition: all 0.2s; position: relative; background: var(--surface);
}
.svc-sel-card:hover { border-color: rgba(13,148,136,0.4); background: #F0FDFA; }
.svc-sel-card.selected {
  border-color: var(--teal); background: #F0FDFA;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}
.svc-sel-check {
  position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--teal); display: none;
  align-items: center; justify-content: center;
}
.svc-sel-card.selected .svc-sel-check { display: flex; }
.svc-sel-check svg { width: 11px; height: 11px; color: #fff; }
.svc-sel-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.svc-sel-card.selected .svc-sel-icon { background: rgba(13,148,136,0.15); }
.svc-sel-icon svg { width: 22px; height: 22px; }
.svc-sel-name { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--dark); line-height: 1.3; }
.svc-sel-price { font-size: 12px; color: var(--muted); margin-top: 4px; }
.svc-sel-duration { font-size: 11px; color: var(--teal); font-weight: 600; margin-top: 3px; }
.doctor-select-list { display: flex; flex-direction: column; gap: 12px; }
.doc-sel-card {
  border-radius: 14px; padding: 18px 20px;
  border: 2px solid var(--border); cursor: pointer;
  transition: all 0.2s; display: flex; align-items: center; gap: 16px;
  background: var(--surface);
}
.doc-sel-card:hover   { border-color: rgba(13,148,136,0.4); background: #F0FDFA; }
.doc-sel-card.selected {
  border-color: var(--teal); background: #F0FDFA;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}
.doc-sel-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 16px; font-weight: 800;
  color: #fff; flex-shrink: 0;
}
.doc-sel-name  { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--dark); }
.doc-sel-spec  { font-size: 12px; color: var(--muted); margin-top: 2px; }
.doc-sel-avail {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 5px; font-size: 11px; font-weight: 600; color: #059669;
}
.doc-sel-avail-dot { width: 5px; height: 5px; border-radius: 50%; background: #059669; }
.doc-sel-radio {
  margin-left: auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border); flex-shrink: 0;
  transition: all 0.2s; display: flex; align-items: center; justify-content: center;
}
.doc-sel-card.selected .doc-sel-radio { border-color: var(--teal); background: var(--teal); }
.doc-sel-card.selected .doc-sel-radio::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff;
}
.datetime-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cal-wrap { border: 1.5px solid var(--border); border-radius: 16px; overflow: hidden; }
.cal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; background: var(--warm-white); border-bottom: 1px solid var(--border);
}
.cal-month-title { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--dark); }
.cal-nav-btn {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s;
}
.cal-nav-btn:hover { background: var(--warm-gray); }
.cal-nav-btn svg { width: 14px; height: 14px; color: var(--muted); }
.cal-grid { padding: 12px; }
.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  text-align: center; margin-bottom: 6px;
}
.cal-weekday { font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0; text-transform: uppercase; letter-spacing: 0.04em; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-day {
  aspect-ratio: 1; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.15s; color: var(--dark);
}
.cal-day:hover:not(.disabled):not(.empty)  { background: #F0FDFA; color: var(--teal-dark); }
.cal-day.today   { background: var(--warm-gray); font-weight: 800; }
.cal-day.selected { background: var(--teal); color: #fff !important; box-shadow: 0 3px 10px rgba(13,148,136,0.35); }
.cal-day.disabled { color: #D1D5DB; cursor: not-allowed; background: transparent !important; }
.cal-day.empty   { cursor: default; }
.cal-day.has-slots::after {
  content: ''; display: block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--teal); margin: 1px auto 0;
}
.cal-day.selected::after { background: rgba(255,255,255,0.7); }
.time-heading { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--dark); margin-bottom: 12px; }
.time-date-selected { font-size: 13px; color: var(--teal); font-weight: 600; margin-bottom: 14px; }
.time-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.time-slot {
  padding: 11px 8px; border-radius: 10px; text-align: center;
  border: 1.5px solid var(--border); font-size: 13px; font-weight: 600;
  cursor: pointer; color: var(--dark); background: var(--surface);
  transition: all 0.15s; position: relative;
}
.time-slot:hover:not(.booked) { border-color: var(--teal); color: var(--teal-dark); background: #F0FDFA; }
.time-slot.selected { border-color: var(--teal); background: var(--teal); color: #fff; }
.time-slot.booked   { background: var(--warm-white); color: #D1D5DB; cursor: not-allowed; border-color: var(--border); }
.booked-label { font-size: 10px; font-weight: 500; display: block; margin-top: 2px; }
.time-no-date {
  grid-column: 1 / -1; text-align: center; padding: 24px;
  font-size: 13px; color: var(--muted); border: 1.5px dashed var(--border); border-radius: 12px;
}
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.details-grid .full { grid-column: 1 / -1; }
.det-field { display: flex; flex-direction: column; }
.det-label {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); margin-bottom: 6px;
}
.det-input, .det-select, .det-textarea {
  width: 100%; padding: 13px 16px;
  background: var(--warm-white); border: 1.5px solid var(--border);
  border-radius: 10px; font-family: var(--font-body); font-size: 14px;
  color: var(--dark); outline: none; appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.det-input:focus, .det-select:focus, .det-textarea:focus {
  border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
  background: var(--surface);
}
.det-input::placeholder, .det-textarea::placeholder { color: #A8A29E; }
.det-textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.patient-type-row { display: flex; gap: 10px; }
.pt-btn {
  flex: 1; padding: 11px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--surface);
  font-family: var(--font-head); font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: pointer; transition: all 0.15s; text-align: center;
}
.pt-btn.active { border-color: var(--teal); background: #F0FDFA; color: var(--teal-dark); }
.terms-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; background: var(--warm-white); border-radius: 10px;
  border: 1px solid var(--border); margin-top: 4px;
}
.terms-row input[type="checkbox"] {
  width: 16px; height: 16px; border-radius: 4px; accent-color: var(--teal);
  cursor: pointer; flex-shrink: 0; margin-top: 2px;
}
.terms-row label { font-size: 13px; color: var(--muted); line-height: 1.5; cursor: pointer; }
.terms-row label a { color: var(--teal); font-weight: 600; }
.step-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 32px; border-top: 1px solid var(--border);
  background: var(--warm-white);
}
.btn-back {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 22px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--surface);
  font-family: var(--font-head); font-size: 14px; font-weight: 600;
  color: var(--muted); cursor: pointer; transition: all 0.2s;
}
.btn-back:hover { border-color: var(--dark); color: var(--dark); }
.btn-back svg { width: 15px; height: 15px; }
.btn-next {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: 10px;
  background: var(--gradient-btn); color: #fff; border: none;
  font-family: var(--font-head); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(13,148,136,0.3);
}
.btn-next:hover { transform: scale(1.02); box-shadow: 0 6px 24px rgba(13,148,136,0.4); }
.btn-next:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-next svg { width: 15px; height: 15px; }
.confirm-panel { padding: 40px 32px; text-align: center; }
.confirm-icon-wrap {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(13,148,136,0.15), rgba(249,115,22,0.1));
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  animation: floatA 2.5s ease-in-out infinite alternate;
}
.confirm-icon-wrap svg { width: 40px; height: 40px; color: var(--teal); }
.confirm-title { font-family: var(--font-head); font-size: 28px; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.confirm-sub   { font-size: 15px; color: var(--muted); max-width: 440px; margin: 0 auto; line-height: 1.7; }
.confirm-summary {
  background: var(--warm-white); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px; margin: 28px auto 0;
  max-width: 480px; text-align: left;
}
.cs-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.cs-row:last-child { border-bottom: none; padding-bottom: 0; }
.cs-row:first-child { padding-top: 0; }
.cs-icon { width: 32px; height: 32px; border-radius: 9px; background: var(--warm-gray); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cs-icon svg { width: 15px; height: 15px; color: var(--teal); }
.cs-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 3px; }
.cs-value { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--dark); }
.confirm-actions {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin-top: 28px; flex-wrap: wrap;
}
.btn-whatsapp {
  display: inline-flex; align-items: center; gap: 8px;
  background: #25D366; color: #fff; border: none; border-radius: 10px;
  padding: 13px 24px; font-family: var(--font-head);
  font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 16px rgba(37,211,102,0.35);
  transition: opacity 0.2s;
}
.btn-whatsapp:hover { opacity: 0.9; }
.btn-whatsapp svg { width: 18px; height: 18px; }
.btn-home {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1.5px solid var(--border);
  color: var(--dark); border-radius: 10px; padding: 13px 22px;
  font-family: var(--font-head); font-size: 14px; font-weight: 600;
  text-decoration: none; transition: border-color 0.2s;
}
.btn-home:hover { border-color: var(--teal); color: var(--teal-dark); }
.confirm-note { font-size: 12px; color: var(--muted); margin-top: 20px; }
.sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 90px; }
.summary-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.summary-header { background: var(--gradient-btn); padding: 20px 22px; }
.summary-header-title { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.85); margin-bottom: 2px; }
.summary-header-main  { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: #fff; }
.summary-body { padding: 18px 22px; }
.summary-row  {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.summary-row:last-child { border-bottom: none; padding-bottom: 0; }
.summary-row:first-child { padding-top: 0; }
.sum-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--warm-gray); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sum-icon svg { width: 14px; height: 14px; color: var(--teal); }
.sum-label { font-size: 11px; color: var(--muted); font-weight: 500; margin-bottom: 2px; }
.sum-value { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--dark); }
.sum-empty { color: #C4B5A0; font-weight: 400; font-style: italic; }
.trust-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.trust-title { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--dark); margin-bottom: 14px; }
.trust-items { display: flex; flex-direction: column; gap: 11px; }
.trust-item  { display: flex; align-items: center; gap: 10px; }
.trust-icon  { width: 30px; height: 30px; border-radius: 9px; background: #F0FDFA; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trust-icon svg { width: 14px; height: 14px; color: var(--teal); }
.trust-text  { font-size: 12px; color: var(--muted); line-height: 1.5; }
.trust-text strong { color: var(--dark); font-weight: 700; }
.help-card { background: #0F172A; border-radius: 20px; padding: 22px; }
.help-title { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.help-sub   { font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 18px; line-height: 1.55; }
.help-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; background: #25D366; color: #fff; border: none;
  border-radius: 10px; padding: 12px; font-family: var(--font-head);
  font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity 0.2s;
  text-decoration: none; margin-bottom: 9px;
}
.help-btn:hover { opacity: 0.9; }
.help-btn svg { width: 16px; height: 16px; }
.help-call {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 500; text-decoration: none;
}
.help-call svg { width: 14px; height: 14px; color: var(--teal-light); }
.help-call:hover { color: rgba(255,255,255,0.9); }
.below-section { background: var(--warm-white); }
.hiw-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hiw-card  {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 24px 20px;
  text-align: center; position: relative;
}
.hiw-num {
  font-family: var(--font-head); font-size: 36px; font-weight: 900;
  color: rgba(13,148,136,0.1); line-height: 1; margin-bottom: 12px;
}
.hiw-icon { width: 44px; height: 44px; border-radius: 12px; background: #F0FDFA; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.hiw-icon svg { width: 22px; height: 22px; color: var(--teal); }
.hiw-title { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--dark); margin-bottom: 5px; }
.hiw-desc  { font-size: 12px; color: var(--muted); line-height: 1.55; }
.faq-mini { margin-top: 52px; }
.faq-mini-header { margin-bottom: 24px; }
.faq-mini-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.faq-mini-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); overflow: hidden;
}
.faq-mini-q {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; cursor: pointer; gap: 12px;
  font-family: var(--font-head); font-size: 14px; font-weight: 600; color: var(--dark);
}
.faq-mini-q:hover { background: var(--warm-white); }
.faq-mini-chevron { width: 22px; height: 22px; border-radius: 6px; background: var(--warm-gray); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.25s, background 0.2s; }
.faq-mini-chevron svg { width: 12px; height: 12px; color: var(--muted); }
.faq-mini-item.open .faq-mini-chevron { background: var(--teal); transform: rotate(180deg); }
.faq-mini-item.open .faq-mini-chevron svg { color: #fff; }
.faq-mini-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.2s; font-size: 13px; color: var(--muted); line-height: 1.7; }
.faq-mini-a.open { max-height: 200px; padding: 0 18px 16px; }
@media (max-width: 1024px) {
  .book-layout          { grid-template-columns: 1fr; }
  .sidebar              { position: static; }
  .service-select-grid  { grid-template-columns: repeat(2, 1fr); }
  .hiw-strip            { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .book-hero            { padding: 110px 0 56px; }
  .book-hero-title      { font-size: clamp(28px, 8vw, 44px); }
  .service-select-grid  { grid-template-columns: 1fr 1fr; }
  .datetime-grid        { grid-template-columns: 1fr; }
  .details-grid         { grid-template-columns: 1fr; }
  .hiw-strip            { grid-template-columns: 1fr; }
  .faq-mini-grid        { grid-template-columns: 1fr; }
  .step-panel           { padding: 20px; }
  .step-nav             { padding: 16px 20px; }
  .progress-bar-wrap    { padding: 18px 20px 0; }
  .ps-label             { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   SERVICES PAGE — CORRECTED / MISSING CSS
   (The original pages.css had wrong class names; these fix/add them)
═══════════════════════════════════════════════════════════════ */

/* ── Hero service pills ──────────────────────────────────────── */
.hero-service-pills {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px;
}
.hero-service-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.09); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-pill);
  padding: 8px 16px; font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.8); transition: background 0.2s, border-color 0.2s;
}
.hero-service-pill:hover { background: rgba(255,255,255,0.16); color: #fff; }
.hero-service-pill svg { width: 14px; height: 14px; }

/* ── Services nav — fix inner class name (.services-nav-inner) ── */
.services-nav-inner {
  display: flex; align-items: center; overflow-x: auto; scrollbar-width: none;
}
.services-nav-inner::-webkit-scrollbar { display: none; }
.snav-dot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 6px; flex-shrink: 0;
}

/* ── Service section backgrounds ─────────────────────────────── */
.svc-bg-white   { background: var(--surface); }
.svc-bg-dark    { background: #0F172A; }
.svc-bg-dark .section-title  { color: #fff; }
.svc-bg-dark .section-desc   { color: rgba(255,255,255,0.55); }
.svc-bg-dark .eyebrow        { color: var(--teal-light); }
.svc-bg-dark .accent         { color: var(--teal-light); -webkit-text-fill-color: var(--teal-light); background: none; }
.svc-bg-orange-lt { background: #FFF7ED; }
.svc-bg-teal-lt   { background: #F0FDFA; }

/* ── Service benefit list ─────────────────────────────────────── */
.svc-benefits { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.svc-benefit {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; color: var(--dark-mid); line-height: 1.65;
}
.svc-bg-dark .svc-benefit { color: rgba(255,255,255,0.7); }
.svc-benefit-check {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; margin-top: 2px;
  background: rgba(13,148,136,0.12); display: flex; align-items: center; justify-content: center;
}
.svc-benefit-check svg { width: 12px; height: 12px; color: var(--teal); }

/* ── Price badge ─────────────────────────────────────────────── */
.svc-price-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 14px; margin-top: 24px;
}
.pb-teal   { background: rgba(13,148,136,0.1);  border: 1px solid rgba(13,148,136,0.2); }
.pb-dark   { background: rgba(28,25,23,0.07);   border: 1px solid rgba(28,25,23,0.12); }
.pb-orange { background: rgba(249,115,22,0.1);  border: 1px solid rgba(249,115,22,0.2); }
.svc-bg-dark .svc-price-badge { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
.pb-icon { width: 20px; height: 20px; color: var(--teal); flex-shrink: 0; }
.pb-dark .pb-icon   { color: var(--dark); }
.pb-orange .pb-icon { color: var(--orange); }
.svc-bg-dark .pb-icon { color: var(--teal-light); }
.svc-price-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.svc-bg-dark .svc-price-label { color: rgba(255,255,255,0.5); }
.svc-price-badge strong {
  font-family: var(--font-head); font-size: 20px; font-weight: 800; color: var(--teal);
}
.svc-bg-dark .svc-price-badge strong { color: var(--teal-light); }
.pb-orange strong { color: #EA580C; }

/* ── Process steps ───────────────────────────────────────────── */
.svc-process {
  display: flex; align-items: flex-start; gap: 0; margin-top: 28px;
}
.svc-step {
  display: flex; flex-direction: column; align-items: center;
  flex: 1; position: relative; min-width: 60px;
}
.svc-step + .svc-step::before {
  content: ''; position: absolute; top: 14px; right: 50%; left: -50%;
  height: 1.5px; background: var(--border);
}
.svc-bg-dark .svc-step + .svc-step::before { background: rgba(255,255,255,0.15); }
.svc-step-num {
  width: 28px; height: 28px; border-radius: 50%; position: relative; z-index: 1;
  background: var(--gradient-btn); color: #fff; flex-shrink: 0; margin-bottom: 8px;
  font-family: var(--font-head); font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.svc-step-label {
  font-size: 11px; color: var(--muted); font-weight: 600;
  text-align: center; line-height: 1.4;
}
.svc-bg-dark .svc-step-label { color: rgba(255,255,255,0.5); }

/* ── Service visual card ─────────────────────────────────────── */
.svc-visual {
  position: relative; height: 480px; border-radius: 24px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.svc-visual-bg { position: absolute; inset: 0; }
.svbg-teal   { background: linear-gradient(160deg, #0D9488 0%, #14B8A6 45%, #ccfbf1 100%); }
.svbg-dark   { background: linear-gradient(160deg, #1C1917 0%, #2D2A27 50%, #0D9488 130%); }
.svbg-warm   { background: linear-gradient(160deg, #F97316 0%, #FDBA74 55%, #fff7ed 100%); }
.svbg-purple { background: linear-gradient(160deg, #7C3AED 0%, #A78BFA 55%, #ede9fe 100%); }
.svbg-green  { background: linear-gradient(160deg, #10B981 0%, #34D399 55%, #ecfdf5 100%); }
.svbg-blue   { background: linear-gradient(160deg, #0EA5E9 0%, #38BDF8 55%, #e0f2fe 100%); }
.svc-visual-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 32px; width: 100%; text-align: center;
}
.svc-visual-icon {
  width: 88px; height: 88px; border-radius: 24px;
  background: rgba(255,255,255,0.22); backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,0.35);
  display: flex; align-items: center; justify-content: center;
}
.svc-visual-icon svg {
  width: 44px; height: 44px; color: #fff; stroke-width: 1.5;
}
.svc-visual-title {
  font-family: var(--font-head); font-size: 22px; font-weight: 800; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.svc-visual-sub { font-size: 13px; color: rgba(255,255,255,0.75); font-weight: 500; }
.svc-visual-stats {
  display: flex; gap: 0; margin-top: 8px; width: 100%;
  background: rgba(0,0,0,0.22); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; overflow: hidden;
}
.svc-vstat {
  flex: 1; padding: 14px 6px; text-align: center;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.svc-vstat:last-child { border-right: none; }
.svc-vstat-num {
  font-family: var(--font-head); font-size: 15px; font-weight: 800;
  color: #fff; line-height: 1;
}
.svc-vstat-label {
  font-size: 10px; color: rgba(255,255,255,0.6);
  margin-top: 4px; font-weight: 500; line-height: 1.3;
}

/* ── Pricing — actual HTML <table> ───────────────────────────── */
.pricing-table {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; font-size: 14px;
}
.pricing-table thead { background: #0F172A; }
.pricing-table th {
  padding: 14px 20px; text-align: left;
  font-family: var(--font-head); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: rgba(255,255,255,0.65);
}
.pricing-table tbody tr {
  border-bottom: 1px solid var(--border); transition: background 0.15s;
}
.pricing-table tbody tr:last-child { border-bottom: none; }
.pricing-table tbody tr:nth-child(even) { background: var(--warm-white); }
.pricing-table tbody tr:hover { background: #F0FDFA; }
.pricing-table td { padding: 14px 20px; color: var(--dark); vertical-align: top; line-height: 1.55; }
.pricing-table td:last-child {
  font-family: var(--font-head); font-weight: 700;
  color: var(--teal); white-space: nowrap;
}
.free-cell { color: #059669 !important; }
.pt-tag {
  display: inline-block; padding: 2px 8px; border-radius: 5px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.pt-tag-popular { background: #CCFBF1; color: var(--teal-dark); }
.pt-tag-emi     { background: #FED7AA; color: #C2410C; }
.pricing-footer-note {
  margin-top: 18px; font-size: 13px; color: var(--muted);
  line-height: 1.7; text-align: center; max-width: 640px; margin-left: auto; margin-right: auto;
}
.pricing-footer-note a { color: var(--teal); font-weight: 600; }

/* ── FAQ — services page uses faq-grid + faq-chevron ─────────── */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; }
.faq-chevron {
  width: 28px; height: 28px; border-radius: 8px; background: var(--warm-gray);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.2s, transform 0.3s;
}
.faq-chevron svg { width: 14px; height: 14px; color: var(--muted); }
.faq-item.open .faq-chevron { background: rgba(13,148,136,0.12); }
.faq-item.open .faq-chevron svg { transform: rotate(180deg); color: var(--teal); }
.faq-answer {
  max-height: 0; overflow: hidden;
  font-size: 14px; line-height: 1.7; color: var(--muted);
  padding: 0 22px; transition: max-height 0.35s ease, padding 0.25s;
}
.faq-answer.open { max-height: 400px; padding: 0 22px 18px; }

/* ── Appt inline section (services + doctors) ────────────────── */
.appt-inline-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.appt-features { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.appt-feature  { display: flex; align-items: flex-start; gap: 14px; }
.appt-feature-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.appt-feature-icon svg { width: 18px; height: 18px; color: var(--teal); }
.appt-feature-text strong {
  font-family: var(--font-head); font-size: 14px; font-weight: 700;
  color: var(--dark); display: block;
}
.appt-feature-text span {
  font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 2px; display: block;
}

/* ── Responsive fixes ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .faq-grid         { grid-template-columns: 1fr; }
  .appt-inline-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 768px) {
  .svc-visual       { height: 320px; }
  .svc-visual-title { font-size: 18px; }
  .svc-visual-icon  { width: 68px; height: 68px; }
  .svc-visual-icon svg { width: 34px; height: 34px; }
  .pricing-table    { font-size: 12px; display: block; overflow-x: auto; }
  .pricing-table th, .pricing-table td { padding: 10px 12px; }
  .svc-process      { flex-wrap: wrap; gap: 12px; }
  .svc-step         { flex: 0 0 calc(50% - 6px); }
  .svc-step + .svc-step::before { display: none; }
  .hero-service-pills { gap: 8px; }
}