/* ============================================================
   PAGES.CSS — shared inner-page styles
   Used by: our_dentist.php, about.php, contact.php
   Depends on: style.css (vars, navbar, footer, buttons)
   ============================================================ */

/* ── Page breadcrumb bar ── */
.page-breadcrumb {
  background: var(--purple-xl);
  padding: calc(var(--nav-h) + .5rem) 0 .75rem;
  position: relative; z-index: 1;
}
.page-breadcrumb .section-wrap {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem; color: var(--text-muted);
}
.page-breadcrumb a { color: var(--purple); font-weight: 600; }
.page-breadcrumb a:hover { text-decoration: underline; }
.page-breadcrumb i { font-size: .6rem; }

/* ── Page hero (shared across dentist / about / contact) ── */
.page-hero {
  background: linear-gradient(145deg, var(--purple-dd) 0%, #3D2870 50%, var(--purple) 100%);
  padding-top: var(--nav-h);
  position: relative; overflow: hidden; min-height: 52vh;
  display: flex; align-items: center;
}
.page-hero .blob-1 { width: 500px; height: 500px; top: -120px; left: -120px; }
.page-hero .blob-2 { width: 400px; height: 400px; bottom: -80px; right: -80px; }
.page-hero-inner {
  max-width: 780px; margin: 0 auto; text-align: center;
  padding: 5rem 40px 7rem; position: relative; z-index: 2;
}
.page-hero-inner .hero-chip { margin-bottom: 1.25rem; }
.page-hero-inner h1 {
  font-family: var(--font-head);
  font-size: clamp(2.8rem, 6vw, 4rem); font-weight: 800;
  color: var(--white); line-height: 1.1; margin-bottom: 1.25rem;
}
.page-hero-inner h1 em { font-style: italic; font-weight: 300; color: var(--purple-l); }
.page-hero-inner p {
  font-size: 1.08rem; color: rgba(255,255,255,.72); line-height: 1.8;
  max-width: 560px; margin: 0 auto;
}
.page-hero .wave-divider svg { height: 100px; }

/* ══════════════════════════════════════════════════════════ */
/*  OUR DENTIST PAGE                                          */
/* ══════════════════════════════════════════════════════════ */

/* Full profile section */
.dentist-profile-section {
  background: var(--purple-xl); padding: 7rem 0;
  position: relative; overflow: hidden;
}
.dprofile-blob {
  position: absolute; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(104,88,160,.1) 0%, transparent 70%);
  top: -100px; right: -150px; border-radius: 50%; pointer-events: none;
}
.dprofile-grid {
  display: grid; grid-template-columns: 420px 1fr;
  gap: 5rem; align-items: start;
}
.dprofile-photo-col { position: relative; }
.dprofile-img {
  width: 100%; height: 560px; object-fit: cover;
  border-radius: 28px; display: block;
  box-shadow: 0 24px 70px rgba(104,88,160,.22);
}
.dprofile-badge-top {
  position: absolute; top: 1.5rem; left: 1.5rem;
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--purple); color: var(--white);
  font-family: var(--font-head); font-size: .72rem; font-weight: 700;
  padding: .45rem 1rem; border-radius: 50px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.dprofile-contact-card {
  margin-top: 1.5rem; background: var(--white);
  border-radius: 20px; padding: 1.5rem;
  box-shadow: 0 6px 30px rgba(104,88,160,.1);
  border: 1.5px solid rgba(104,88,160,.08);
  display: flex; flex-direction: column; gap: 1rem;
}
.dpc-row {
  display: flex; align-items: center; gap: .85rem;
}
.dpc-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: var(--purple-l); color: var(--purple);
  display: flex; align-items: center; justify-content: center; font-size: .9rem;
}
.dpc-row strong { display: block; font-size: .78rem; color: var(--text); font-weight: 700; }
.dpc-row small  { font-size: .75rem; color: var(--text-muted); }

/* Profile info column */
.dprofile-info-col .dentist-creds { margin-bottom: .75rem; }
.dprofile-info-col .dentist-name  { font-family: var(--font-head); font-size: 2.4rem; font-weight: 800; color: var(--text); line-height: 1.1; margin-bottom: 1rem; }
.dprofile-bio { font-size: .97rem; color: var(--text-muted); line-height: 1.85; margin-bottom: 1.5rem; }
.dprofile-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.dprofile-tags span {
  background: var(--white); color: var(--purple-d);
  border: 1.5px solid var(--purple-l);
  font-size: .78rem; font-weight: 600;
  padding: .35rem .9rem; border-radius: 50px;
}

/* Credentials timeline */
.dcred-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.2rem; }
.dcred-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.1rem 1.25rem; background: var(--white);
  border-radius: 16px; border: 1.5px solid rgba(104,88,160,.08);
  transition: box-shadow var(--t), border-color var(--t), transform var(--t) var(--ease);
}
.dcred-item:hover { box-shadow: 0 8px 28px rgba(104,88,160,.12); border-color: var(--purple-l); transform: translateX(4px); }
.dcred-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: var(--purple-l); color: var(--purple);
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.dcred-text strong { display: block; font-size: .88rem; font-weight: 700; color: var(--text); margin-bottom: .15rem; }
.dcred-text small  { font-size: .8rem; color: var(--text-muted); }

/* Philosophy section */
.dentist-philosophy {
  background: var(--white); padding: 7rem 0;
  position: relative; overflow: hidden;
}
.dphil-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}
.dphil-img {
  width: 100%; height: 420px; object-fit: cover;
  border-radius: 28px; box-shadow: 0 20px 60px rgba(104,88,160,.18);
}
.dphil-text h2 { font-family: var(--font-head); font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 800; color: var(--text); line-height: 1.2; margin-bottom: 1rem; }
.dphil-text p  { font-size: .95rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 1.5rem; }
.dphil-quote {
  background: var(--purple-xl); border-left: 4px solid var(--purple);
  border-radius: 0 16px 16px 0; padding: 1.25rem 1.5rem;
  font-family: var(--font-head); font-style: italic; font-size: .97rem;
  color: var(--text); line-height: 1.7;
}
.dphil-quote i { color: var(--purple-l); margin-right: .4rem; }

/* Specialties */
.dentist-specialties {
  background: var(--purple-xl); padding: 7rem 0;
}
.dspec-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.dspec-card {
  background: var(--white); border-radius: 24px; padding: 2rem;
  border: 1.5px solid rgba(104,88,160,.1);
  transition: transform var(--t) var(--ease), box-shadow var(--t), border-color var(--t);
  position: relative; overflow: hidden;
}
.dspec-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(104,88,160,.15); border-color: var(--purple-m); }
.dspec-card:hover .feat-hover-bar { width: 100%; }
.dspec-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--purple-l); color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: 1.2rem;
  transition: transform var(--t) var(--ease);
}
.dspec-card:hover .dspec-icon { transform: scale(1.1) rotate(-4deg); }
.dspec-card h3 { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .6rem; }
.dspec-card p  { font-size: .87rem; color: var(--text-muted); line-height: 1.7; }

/* ══════════════════════════════════════════════════════════ */
/*  ABOUT PAGE                                                */
/* ══════════════════════════════════════════════════════════ */

.about-story { background: var(--purple-xl); padding: 7rem 0; }
.astory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.astory-imgs { position: relative; }
.astory-img-main {
  width: 100%; height: 480px; object-fit: cover;
  border-radius: 28px; box-shadow: 0 24px 60px rgba(104,88,160,.2);
}
.astory-img-accent {
  position: absolute; bottom: -2rem; right: -2rem;
  width: 200px; height: 150px; object-fit: cover;
  border-radius: 20px; border: 4px solid var(--white);
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
}
.astory-float-badge {
  position: absolute; top: 2rem; left: -1.5rem;
  background: var(--white); padding: 1rem 1.3rem; border-radius: 16px;
  box-shadow: 0 10px 40px rgba(104,88,160,.18);
  display: flex; align-items: center; gap: .75rem;
}
.astory-float-badge i { font-size: 1.4rem; color: var(--purple); }
.astory-float-badge strong { display: block; font-size: .88rem; font-weight: 700; color: var(--text); }
.astory-float-badge small  { font-size: .72rem; color: var(--text-muted); }
.astory-text h2 { font-family: var(--font-head); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; color: var(--text); line-height: 1.15; margin: .75rem 0 1.25rem; }
.astory-text p  { font-size: .97rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 1rem; }
.astory-text .check-list { margin: 1.5rem 0 2rem; }

/* Values section (white bg) */
.about-values { background: var(--white); padding: 7rem 0; }
.aval-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.aval-card {
  padding: 2rem 1.5rem; border-radius: 24px;
  background: var(--purple-xl); border: 1.5px solid rgba(104,88,160,.1);
  text-align: center;
  transition: transform var(--t) var(--ease), box-shadow var(--t);
}
.aval-card:hover { transform: translateY(-8px); box-shadow: 0 16px 44px rgba(104,88,160,.15); }
.aval-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1.2rem;
  background: var(--purple-l); color: var(--purple);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  transition: transform var(--t) var(--ease);
}
.aval-card:hover .aval-icon { transform: scale(1.1) rotate(-5deg); }
.aval-card h3 { font-family: var(--font-head); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .6rem; }
.aval-card p  { font-size: .85rem; color: var(--text-muted); line-height: 1.65; }

/* Why choose us (dark bar) */
.about-why { background: linear-gradient(135deg, var(--purple-dd), #3D2870); padding: 7rem 0 6rem; position: relative; overflow: hidden; }
.about-why .stats-blob { opacity: 1; }
.awhy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; z-index: 1; }
.awhy-text h2 { font-family: var(--font-head); font-size: clamp(1.9rem, 3.5vw, 2.6rem); font-weight: 800; color: var(--white); line-height: 1.15; margin: .75rem 0 1.25rem; }
.awhy-text p  { font-size: .97rem; color: rgba(255,255,255,.65); line-height: 1.8; margin-bottom: 2rem; }
.awhy-list { display: flex; flex-direction: column; gap: .85rem; }
.awhy-list li { display: flex; align-items: center; gap: .8rem; font-size: .93rem; color: rgba(255,255,255,.85); }
.awhy-list li .fa-circle-check { color: var(--purple-l); }
.awhy-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.awhy-card {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px; padding: 1.75rem; text-align: center;
  backdrop-filter: blur(8px);
  transition: background var(--t), transform var(--t) var(--ease);
}
.awhy-card:hover { background: rgba(255,255,255,.14); transform: translateY(-4px); }
.awhy-card .mvs-num  { font-family: var(--font-head); font-size: 2.5rem; font-weight: 800; color: var(--white); display: block; line-height: 1; margin-bottom: .4rem; }
.awhy-card .mvs-plus { font-size: 1.5rem; color: var(--purple-l); }
.awhy-card .mvs-lbl  { font-size: .78rem; color: rgba(255,255,255,.5); font-weight: 500; }

/* ══════════════════════════════════════════════════════════ */
/*  CONTACT PAGE                                              */
/* ══════════════════════════════════════════════════════════ */

.contact-main { background: var(--purple-xl); padding: 6rem 0 7rem; }
.contact-grid { display: grid; grid-template-columns: 1fr 420px; gap: 3.5rem; align-items: start; }

/* Form card */
.contact-form-card {
  background: var(--white); border-radius: 28px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(104,88,160,.14);
  border: 1.5px solid rgba(104,88,160,.08);
}
.cfc-header {
  background: linear-gradient(135deg, var(--purple-d), var(--purple-m));
  padding: 2rem 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.cfc-header h2 { font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; color: var(--white); margin-bottom: .2rem; }
.cfc-header p   { font-size: .85rem; color: rgba(255,255,255,.65); }
.cfc-header-icon { font-size: 2.2rem; color: rgba(255,255,255,.3); }
.cfc-body { padding: 2.5rem; }

/* Form fields */
.cf-group { margin-bottom: 1.4rem; }
.cf-group label {
  display: block; font-family: var(--font-head); font-size: .8rem; font-weight: 700;
  color: var(--text); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem;
}
.cf-input-wrap { position: relative; }
.cf-input-wrap i {
  position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: .9rem; pointer-events: none;
}
.cf-input-wrap.textarea-wrap i { top: 1.1rem; transform: none; }
.cf-input, .cf-textarea {
  width: 100%; padding: .9rem 1rem .9rem 2.8rem;
  background: var(--purple-xl); border: 1.5px solid rgba(104,88,160,.15);
  border-radius: 12px; font-family: var(--font-body); font-size: .92rem; color: var(--text);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  outline: none;
}
.cf-input:focus, .cf-textarea:focus {
  border-color: var(--purple); background: var(--white);
  box-shadow: 0 0 0 4px rgba(104,88,160,.12);
}
.cf-textarea { resize: vertical; min-height: 140px; padding-top: 1rem; line-height: 1.6; }
.cf-submit {
  width: 100%; padding: 1.1rem;
  background: linear-gradient(135deg, var(--purple-m), var(--purple-d));
  color: var(--white); border: none; border-radius: 50px;
  font-family: var(--font-head); font-size: 1rem; font-weight: 700;
  box-shadow: 0 6px 24px rgba(104,88,160,.4);
  cursor: pointer; transition: transform var(--t) var(--ease), box-shadow var(--t);
  display: flex; align-items: center; justify-content: center; gap: .65rem;
}
.cf-submit:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(104,88,160,.5); }
.cf-alert {
  border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.25rem;
  font-size: .88rem; display: flex; align-items: flex-start; gap: .65rem;
}
.cf-alert-success { background: #f0fdf4; border: 1.5px solid #86efac; color: #166534; }
.cf-alert-error   { background: #fef2f2; border: 1.5px solid #fca5a5; color: #991b1b; }
.cf-alert ul { margin: 0; padding-left: 1rem; }

/* Info sidebar */
.contact-info-col { display: flex; flex-direction: column; gap: 1.5rem; }
.cinfo-card {
  background: var(--white); border-radius: 20px; padding: 1.75rem;
  box-shadow: 0 8px 30px rgba(104,88,160,.1);
  border: 1.5px solid rgba(104,88,160,.08);
}
.cinfo-card h3 { font-family: var(--font-head); font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: 1.2rem; display: flex; align-items: center; gap: .5rem; }
.cinfo-card h3 i { color: var(--purple); }
.cinfo-row {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .75rem 0; border-bottom: 1px solid rgba(104,88,160,.07);
}
.cinfo-row:last-child { border-bottom: none; padding-bottom: 0; }
.cinfo-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--purple-l); color: var(--purple);
  display: flex; align-items: center; justify-content: center; font-size: .82rem;
}
.cinfo-row strong { display: block; font-size: .78rem; font-weight: 700; color: var(--text); margin-bottom: .15rem; }
.cinfo-row span   { font-size: .84rem; color: var(--text-muted); line-height: 1.55; }

/* Social links */
.cinfo-socials { display: flex; gap: .75rem; flex-wrap: wrap; }
.csocial-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem; border-radius: 50px;
  font-family: var(--font-head); font-size: .82rem; font-weight: 600;
  transition: transform var(--t) var(--ease), box-shadow var(--t);
}
.csocial-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.csocial-fb  { background: #1877F2; color: #fff; }
.csocial-msg { background: #0084FF; color: #fff; }

/* Hours day grid */
.cinfo-hours { display: flex; flex-direction: column; gap: .5rem; }
.cinfo-hour-row { display: flex; justify-content: space-between; font-size: .84rem; }
.cinfo-hour-row .day  { color: var(--text); font-weight: 600; }
.cinfo-hour-row .time { color: var(--text-muted); }
.cinfo-hour-row.closed .time { color: #ef4444; font-weight: 600; }

/* Contact map */
.contact-map-section { padding: 0; }
.contact-map-layout { display: grid; grid-template-columns: 360px 1fr; min-height: 460px; }
.contact-map-layout .map-info-card { padding: 3rem 2.5rem; }
.contact-map-layout #map { width: 100%; height: 100%; min-height: 460px; }

/* ══════════════════════════════════════════════════════════ */
/*  SHARED PAGE CTA (re-used on dentist, about, contact)      */
/* ══════════════════════════════════════════════════════════ */
.page-cta {
  background: linear-gradient(145deg, var(--purple-d), var(--purple), var(--purple-m));
  padding: 6rem 0; text-align: center; position: relative; overflow: hidden;
}
.page-cta-blob-1 { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: rgba(255,255,255,.07); filter: blur(80px); top: -100px; left: -100px; pointer-events: none; }
.page-cta-blob-2 { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: rgba(255,255,255,.05); filter: blur(60px); bottom: -80px; right: -80px; pointer-events: none; }
.page-cta-inner { max-width: 640px; margin: 0 auto; position: relative; z-index: 1; }
.page-cta-inner .cta-icon-ring { margin: 0 auto 1.75rem; }
.page-cta-inner h2 { font-family: var(--font-head); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; color: var(--white); margin-bottom: 1rem; line-height: 1.2; }
.page-cta-inner p  { font-size: 1rem; color: rgba(255,255,255,.72); line-height: 1.75; margin-bottom: 2.5rem; }
.page-cta-btns { display: flex; justify-content: center; gap: 1.25rem; flex-wrap: wrap; }
.page-cta .btn-outline { border-color: rgba(255,255,255,.5); color: var(--white); }
.page-cta .btn-outline:hover { background: rgba(255,255,255,.15); border-color: var(--white); }

/* Two-col form row */
.cf-row-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 600px) { .cf-row-two { grid-template-columns: 1fr; } }

/* Dentist action buttons (index.php dentist section) */
.dentist-action-btns { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .5rem; }

/* Contact map layout */
.contact-map-layout { display: grid; grid-template-columns: 380px 1fr; border-radius: 24px; overflow: hidden; box-shadow: 0 12px 50px rgba(104,88,160,.15); }
.cml-info {
  background: linear-gradient(155deg, var(--purple-dd), var(--purple-d));
  padding: 3rem 2.5rem; color: var(--white);
  display: flex; flex-direction: column; gap: 1.25rem; justify-content: center;
}
.cml-info i.fa-map-location-dot { font-size: 2.5rem; color: rgba(255,255,255,.35); }
.cml-info h3 { font-family: var(--font-head); font-size: 1.65rem; font-weight: 800; color: var(--white); margin: 0; }
.cml-info p  { font-size: .92rem; color: rgba(255,255,255,.72); line-height: 1.7; margin: 0; }
.cml-badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.12); padding: .6rem 1rem; border-radius: 50px; font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.9); margin-top: .5rem; width: fit-content; }
.cml-map { min-height: 420px; }
@media (max-width: 900px) { .contact-map-layout { grid-template-columns: 1fr; } .cml-map { min-height: 320px; } }

/* ══════════════════════════════════════════════════════════ */
/*  RESPONSIVE                                                */
/* ══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .dprofile-grid { grid-template-columns: 360px 1fr; gap: 3.5rem; }
  .contact-grid  { grid-template-columns: 1fr 380px; }
}
@media (max-width: 1024px) {
  .aval-grid  { grid-template-columns: 1fr 1fr; }
  .dspec-grid { grid-template-columns: 1fr 1fr; }
  .contact-map-layout { grid-template-columns: 320px 1fr; }
}
@media (max-width: 900px) {
  .dprofile-grid    { grid-template-columns: 1fr; }
  .dprofile-img     { height: 400px; }
  .dphil-grid       { grid-template-columns: 1fr; }
  .astory-grid      { grid-template-columns: 1fr; }
  .astory-img-accent { display: none; }
  .astory-float-badge { left: 1rem; }
  .awhy-grid        { grid-template-columns: 1fr; }
  .awhy-cards       { grid-template-columns: repeat(4,1fr); }
  .contact-grid     { grid-template-columns: 1fr; }
  .contact-map-layout { grid-template-columns: 1fr; }
  .contact-map-layout .map-info-card { padding: 2.5rem 2rem; }
  .contact-map-layout #map { min-height: 380px; }
}
@media (max-width: 768px) {
  .dspec-grid { grid-template-columns: 1fr; }
  .aval-grid  { grid-template-columns: 1fr; }
  .awhy-cards { grid-template-columns: 1fr 1fr; }
  .page-cta-btns { flex-direction: column; align-items: center; }
  .page-cta-btns .btn-cta-white,
  .page-cta-btns .btn-outline { width: 100%; justify-content: center; }
  .page-hero-inner { padding: 4rem 24px 6rem; }
}

/* ══════════════════════════════════════════════════════════ */
/*  OUR MISSION PAGE — merged from mission.css               */
/* ══════════════════════════════════════════════════════════ *//* ── Section-chip light variant (for dark sections) ── */
.section-chip-light {
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.2);
}

/* ═══════════════════════════════════════════════════════════ */
/*  MISSION HERO                                               */
/* ═══════════════════════════════════════════════════════════ */
.miss-hero {
  min-height: 100vh;
  background: linear-gradient(145deg, var(--purple-dd) 0%, #3D2870 45%, var(--purple) 100%);
  display: flex; align-items: center;
  padding-top: var(--nav-h);
  position: relative; overflow: hidden;
}
.miss-hero-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: center;
  padding: 5rem 40px 8rem;
  position: relative; z-index: 2;
}
.miss-hero-text h1 {
  font-family: var(--font-head);
  font-size: clamp(2.8rem, 5.5vw, 4.2rem);
  font-weight: 800; color: var(--white); line-height: 1.1; margin-bottom: 1.4rem;
}
.miss-hero-text h1 em { font-style: italic; font-weight: 300; color: var(--purple-l); }
.miss-hero-text p {
  font-size: 1.08rem; color: rgba(255,255,255,.72); line-height: 1.8;
  max-width: 480px; margin-bottom: 2.2rem;
}
.miss-hero-btns { display: flex; gap: 1.25rem; flex-wrap: wrap; }

.miss-hero-visual { display: flex; justify-content: center; }
.miss-hero-img-wrap {
  position: relative; width: min(440px,100%);
}
.miss-hero-img-wrap img {
  width: 100%; height: 520px; object-fit: cover;
  border-radius: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  border: 5px solid rgba(255,255,255,.12);
}
.miss-hero-badge {
  position: absolute; bottom: 2rem; left: -1.5rem;
  display: flex; align-items: center; gap: .75rem;
  background: rgba(255,255,255,.95); backdrop-filter: blur(12px);
  padding: 1rem 1.4rem; border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  font-family: var(--font-head);
}
.miss-hero-badge i { font-size: 1.4rem; color: var(--purple); }
.miss-hero-badge span { font-size: .82rem; color: var(--text-muted); }
.miss-hero-badge strong { display: block; font-size: 1.1rem; color: var(--text); }

/* ═══════════════════════════════════════════════════════════ */
/*  CORE MISSION                                               */
/* ═══════════════════════════════════════════════════════════ */
.miss-core {
  background: var(--purple-xl);
  padding: 7rem 0;
}
.miss-core-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start;
}
.miss-core-text { padding-top: .5rem; }
.miss-core-text .section-chip { margin-bottom: .75rem; }
.miss-core-text h2 {
  font-family: var(--font-head); font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800; color: var(--text); line-height: 1.15; margin-bottom: 1.25rem;
}
.miss-core-text p {
  font-size: .97rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 1rem;
}
.miss-divider {
  width: 60px; height: 3px;
  background: linear-gradient(to right, var(--purple-m), var(--purple-d));
  border-radius: 2px; margin: 1.8rem 0;
}
.miss-blockquote {
  border-left: 3px solid var(--purple-l);
  padding: 1rem 1.5rem;
  background: var(--white);
  border-radius: 0 14px 14px 0;
  font-family: var(--font-head); font-size: .97rem; font-style: italic;
  color: var(--text); line-height: 1.7;
  box-shadow: 0 4px 20px rgba(104,88,160,.1);
}
.miss-blockquote .fa-quote-left {
  color: var(--purple-l); margin-right: .5rem; font-size: 1rem;
}

/* Value cards grid */
.miss-core-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}
.miss-val-card {
  padding: 1.75rem; border-radius: 20px;
  border: 1.5px solid transparent;
  transition: transform var(--t) var(--ease), box-shadow var(--t);
}
.miss-val-card:hover { transform: translateY(-6px); box-shadow: 0 16px 44px rgba(104,88,160,.16); }
.mvc-purple { background: var(--purple-l); border-color: rgba(104,88,160,.15); }
.mvc-blue   { background: #dbeafe;        border-color: rgba(37,99,235,.1); }
.mvc-indigo { background: #e0e7ff;        border-color: rgba(67,56,202,.1); }
.mvc-violet { background: #f3e8ff;        border-color: rgba(124,58,237,.1); }

.mvc-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(255,255,255,.65); display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; margin-bottom: 1rem;
}
.mvc-purple .mvc-icon { color: var(--purple); }
.mvc-blue   .mvc-icon { color: #2563eb; }
.mvc-indigo .mvc-icon { color: #4338ca; }
.mvc-violet .mvc-icon { color: #7c3aed; }

.miss-val-card h4 {
  font-family: var(--font-head); font-size: .95rem; font-weight: 700;
  color: var(--text); margin-bottom: .5rem;
}
.miss-val-card p { font-size: .83rem; color: var(--text-muted); line-height: 1.65; }

/* ═══════════════════════════════════════════════════════════ */
/*  VISION BAR (dark)                                          */
/* ═══════════════════════════════════════════════════════════ */
.miss-vision-bar {
  background: linear-gradient(135deg, var(--purple-dd) 0%, #3D2870 100%);
  padding: 7rem 0 6rem; position: relative; overflow: hidden;
}
.miss-vision-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
  position: relative; z-index: 1;
}
.miss-vision-text .section-chip-light { margin-bottom: .75rem; }
.miss-vision-text h2 {
  font-family: var(--font-head); font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  font-weight: 800; color: var(--white); line-height: 1.15; margin-bottom: 1.25rem;
}
.miss-vision-text p {
  font-size: .97rem; color: rgba(255,255,255,.65); line-height: 1.8; margin-bottom: 2rem;
}
.miss-vision-list { display: flex; flex-direction: column; gap: .85rem; }
.miss-vision-list li {
  display: flex; align-items: center; gap: .8rem;
  font-size: .92rem; color: rgba(255,255,255,.82);
}
.miss-vision-list li .fa-circle-check { color: var(--purple-l); font-size: .9rem; }

/* Stats 2x2 grid */
.miss-vision-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
}
.mvs-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px; padding: 2rem 1.5rem;
  text-align: center;
  backdrop-filter: blur(8px);
  transition: background var(--t), transform var(--t) var(--ease);
}
.mvs-card:hover { background: rgba(255,255,255,.14); transform: translateY(-4px); }
.mvs-num {
  display: block;
  font-family: var(--font-head); font-size: 2.8rem; font-weight: 800;
  color: var(--white); line-height: 1; margin-bottom: .5rem;
}
.mvs-plus { font-size: 1.8rem; color: var(--purple-l); }
.mvs-lbl  { font-size: .8rem; color: rgba(255,255,255,.5); font-weight: 500; letter-spacing: .04em; }

/* ═══════════════════════════════════════════════════════════ */
/*  PILLARS                                                    */
/* ═══════════════════════════════════════════════════════════ */
.miss-pillars {
  background: var(--white);
  padding: 7rem 0;
}
.miss-pillars-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem;
  margin-top: .5rem;
}
.miss-pillar {
  padding: 2.2rem; border-radius: 24px;
  background: var(--purple-xl);
  border: 1.5px solid rgba(104,88,160,.1);
  position: relative; overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t), border-color var(--t);
}
.miss-pillar:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(104,88,160,.15); border-color: var(--purple-m); }
.mpillar-num {
  position: absolute; top: 1.2rem; right: 1.5rem;
  font-family: var(--font-head); font-size: 3.5rem; font-weight: 900;
  color: rgba(104,88,160,.06); line-height: 1; user-select: none;
}
.mpillar-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--purple-l); color: var(--purple);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: 1.3rem;
  transition: transform var(--t) var(--ease);
}
.miss-pillar:hover .mpillar-icon { transform: scale(1.1) rotate(-4deg); }
.miss-pillar h3 {
  font-family: var(--font-head); font-size: 1rem; font-weight: 700;
  color: var(--text); margin-bottom: .65rem;
}
.miss-pillar p { font-size: .87rem; color: var(--text-muted); line-height: 1.7; }

/* ═══════════════════════════════════════════════════════════ */
/*  PATIENT PROMISE CTA                                        */
/* ═══════════════════════════════════════════════════════════ */
.miss-promise {
  background: linear-gradient(145deg, var(--purple-d), var(--purple), var(--purple-m));
  padding: 8rem 0; position: relative; overflow: hidden; text-align: center;
}
.miss-promise-blob-1 {
  position: absolute; width: 500px; height: 500px; border-radius: 50%;
  background: rgba(255,255,255,.08); filter: blur(80px);
  top: -120px; left: -120px; pointer-events: none;
}
.miss-promise-blob-2 {
  position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: rgba(255,255,255,.06); filter: blur(60px);
  bottom: -80px; right: -80px; pointer-events: none;
}
.miss-promise-inner {
  max-width: 700px; margin: 0 auto; position: relative; z-index: 1;
}
.miss-promise-icon-ring {
  width: 88px; height: 88px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--white); margin: 0 auto 1.75rem;
  backdrop-filter: blur(8px);
}
.miss-promise-inner .section-chip-light { margin-bottom: .75rem; }
.miss-promise-inner h2 {
  font-family: var(--font-head); font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800; color: var(--white); line-height: 1.15; margin-bottom: 1.2rem;
}
.miss-promise-inner p {
  font-size: 1.02rem; color: rgba(255,255,255,.72); line-height: 1.75; margin-bottom: 2.5rem;
}
.miss-promise-btns { display: flex; justify-content: center; gap: 1.25rem; flex-wrap: wrap; }
.miss-promise .btn-outline { border-color: rgba(255,255,255,.5); color: var(--white); }
.miss-promise .btn-outline:hover { background: rgba(255,255,255,.15); border-color: var(--white); }

/* ═══════════════════════════════════════════════════════════ */
/*  RESPONSIVE                                                 */
/* ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .miss-pillars-grid { grid-template-columns: repeat(2,1fr); }
  .miss-core-grid, .miss-vision-inner { gap: 3rem; }
}
@media (max-width: 900px) {
  .miss-hero-inner    { grid-template-columns: 1fr; text-align: center; gap: 3rem; padding: 4rem 24px 7rem; }
  .miss-hero-text p   { max-width: 100%; }
  .miss-hero-btns     { justify-content: center; }
  .miss-core-grid     { grid-template-columns: 1fr; }
  .miss-core-cards    { grid-template-columns: 1fr 1fr; }
  .miss-vision-inner  { grid-template-columns: 1fr; }
  .miss-vision-stats  { grid-template-columns: repeat(4,1fr); }
  .miss-hero-img-wrap img { height: 380px; }
}
@media (max-width: 768px) {
  .miss-pillars-grid  { grid-template-columns: 1fr; }
  .miss-core-cards    { grid-template-columns: 1fr; }
  .miss-vision-stats  { grid-template-columns: 1fr 1fr; }
  .miss-promise-btns  { flex-direction: column; align-items: center; }
  .miss-promise-btns .btn-cta-white,
  .miss-promise-btns .btn-outline { width: 100%; justify-content: center; }
}