/* ============================================================
   SABR Medical Center — Healing With Heart
   Purple-led corporate identity · bilingual (EN / AR)
   ============================================================ */

:root {
  --ink: #241338;
  --ink-soft: #564570;
  --ink-faint: #7C6E92;
  --brand: #532E8C;
  --brand-deep: #3B1F66;
  --brand-bright: #7C4FD0;
  --brand-glow: #A78BDD;
  --lilac: #EDE7F8;
  --lilac-soft: #F8F5FC;
  --surface: #FFFFFF;
  --line: #E4DCF1;
  --rose: #D8506F;
  /* WhatsApp's brand green, used with white labels to match WhatsApp's own
     buttons. Note this is 1.98:1 against white — below WCAG AA. Deepening --wa
     to #12874A would reach 4.57:1 if compliance is needed later. */
  --wa: #25D366;
  --wa-dark: #20C55E;

  --font-display: "Bricolage Grotesque", "Manrope", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;

  --container: 1160px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-soft: 0 10px 30px -12px rgba(59, 31, 102, 0.18);
  --shadow-lift: 0 18px 44px -16px rgba(59, 31, 102, 0.28);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* ---------- Page transitions ----------
   Cross-document view transitions: the browser cross-fades between pages on
   navigation. Chrome/Edge/Safari honour this; Firefox ignores the at-rule and
   simply navigates as normal, so it is purely additive. */

@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: page-out 0.22s cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: page-in 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes page-out {
  to { opacity: 0; transform: translateY(-8px); }
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(12px); }
}

/* Browsers without view transitions still get a soft fade-in on load. */
@supports not (view-transition-name: root) {
  body { animation: page-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--brand-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  background: var(--brand-deep);
  color: #fff;
  font-weight: 600;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus { top: 0; }

.ar {
  font-family: var(--font-ar);
  direction: rtl;
}

/* ---------- Type scale ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--brand);
}

.section-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--brand-bright);
  border-radius: 2px;
}

/* Emphasis inside body copy sits at semibold. Poppins' 700 is heavy enough to
   spot-light words out of a paragraph; 600 reads as emphasis without shouting.
   Scoped to <p> so UI labels (.visit-list, .hero-badge) keep their own weight. */
p strong, p b { font-weight: 600; }

.section-title {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  margin-top: 0.85rem;
  color: var(--ink);
}

.section-lede {
  margin-top: 1rem;
  max-width: 56ch;
  color: var(--ink-soft);
  font-size: 1.06rem;
}

section { padding-block: clamp(4rem, 8vw, 6.5rem); }

/* ---------- Utility bar ---------- */

.utilbar {
  background: var(--brand-deep);
  color: #E9E1F7;
  font-size: 0.85rem;
}

.utilbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
}

.utilbar .ico { width: 16px; height: 16px; flex: none; }

.utilbar-loc {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.utilbar-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

.utilbar-phone:hover { color: #C9B8EC; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -18px rgba(59, 31, 102, 0.4);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.8rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.brand-mark { width: 44px; height: 44px; flex: none; }

.brand-logo {
  display: block;
  height: 42px;
  width: auto;
  flex: none;
}

@media (max-width: 640px) {
  .brand-logo { height: 34px; }
}

.brand-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: 0.02em;
  color: var(--brand-deep);
  line-height: 1.15;
}

.brand-name em {
  font-style: normal;
  font-weight: 500;
  color: var(--brand);
}

.brand-tag {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.brand-tag .brand-ar {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-ar);
}

.site-nav {
  display: flex;
  gap: clamp(1rem, 2.2vw, 1.9rem);
}

.site-nav a {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.site-nav a:hover { color: var(--brand); border-bottom-color: var(--brand-bright); }

.site-nav a.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 600;
}

.header-cta { display: inline-flex; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
  cursor: pointer;
  color: var(--brand-deep);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn .ico { width: 18px; height: 18px; }

.btn:hover { transform: translateY(-2px); }

.btn:active { transform: translateY(0); }

.btn-wa {
  background: var(--wa);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(37, 211, 102, 0.6);
}

.btn-wa:hover { background: var(--wa-dark); color: #fff; }

.btn-brand {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(83, 46, 140, 0.55);
}

.btn-brand:hover { background: var(--brand-deep); }

.btn-ghost {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand-glow);
}

.btn-ghost:hover { background: var(--lilac-soft); border-color: var(--brand); }

/* For CTAs sitting on the dark purple cards, where btn-brand would vanish. */
.btn-light {
  background: #fff;
  color: var(--brand-deep);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.45);
}

.btn-light:hover { background: var(--lilac); color: var(--brand-deep); }

.btn-sm { padding: 0.55rem 1.15rem; font-size: 0.88rem; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 480px at 85% -10%, var(--lilac) 0%, transparent 65%),
    linear-gradient(180deg, var(--lilac-soft) 0%, #fff 78%);
  padding-block: clamp(4rem, 8vw, 6.5rem) 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--brand);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  box-shadow: var(--shadow-soft);
}

.hero-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rose);
}

.hero h1 {
  margin-top: 1.4rem;
  font-size: clamp(2.5rem, 5.4vw, 4rem);
  font-weight: 700;
  color: var(--brand-deep);
}

.hero h1 .heart-word {
  color: var(--brand-bright);
  position: relative;
  white-space: nowrap;
}

.hero-lede {
  margin-top: 1.35rem;
  max-width: 54ch;
  font-size: 1.1rem;
  color: var(--ink-soft);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.hero-note {
  margin-top: 1.1rem;
  font-size: 0.88rem;
  color: var(--ink-faint);
}

/* Hero figure — doctor portrait in a hexagon portal */

.hero-figure {
  position: relative;
  max-width: 440px;
  margin-inline: auto;
  width: 100%;
}

.hero-deco {
  position: absolute;
  inset: -8% -12%;
  width: 124%;
  height: 116%;
  pointer-events: none;
}

.hero-hex {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hero-hex img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-badge {
  position: absolute;
  left: -1.25rem;
  bottom: 2.2rem;
  z-index: 2;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.hero-badge-ico {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--lilac);
  display: grid;
  place-items: center;
  color: var(--brand);
}

.hero-badge-ico svg { width: 20px; height: 20px; }

.hero-badge strong {
  display: block;
  font-size: 0.88rem;
  line-height: 1.25;
}

.hero-badge span span {
  display: block;
  font-size: 0.76rem;
  color: var(--ink-faint);
}

/* ---------- Stat strip ---------- */

.stats { padding-block: 2.75rem 0; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.stat {
  padding: 1.5rem 1.75rem;
  border-inline-start: 1px solid var(--line);
  text-align: center;
}

.stat:first-child { border-inline-start: none; }

.stat-value {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--brand-deep);
  line-height: 1.1;
}

.stat-label {
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* ---------- Page hero (subpages) ---------- */

.page-hero {
  background:
    radial-gradient(800px 400px at 88% -20%, var(--lilac) 0%, transparent 65%),
    linear-gradient(180deg, var(--lilac-soft) 0%, #fff 90%);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(3.25rem, 6.5vw, 5rem);
}

.page-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  font-weight: 700;
  color: var(--brand-deep);
  margin-top: 0.85rem;
}

.page-hero .section-lede { font-size: 1.08rem; }

/* ---------- CTA band ---------- */

.cta-band { padding-top: 0; }

.cta-band-card {
  background: var(--brand-deep);
  border-radius: var(--radius-lg);
  padding: clamp(1.9rem, 4vw, 2.9rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  color: #EDE6FA;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.cta-band-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(520px 300px at 108% 120%, rgba(124, 79, 208, 0.45), transparent 70%);
  pointer-events: none;
}

.cta-band-card > * { position: relative; }

.cta-band-card h2 {
  color: #fff;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.cta-band-card p { margin-top: 0.5rem; color: #C9B8EC; max-width: 52ch; }

/* ---------- Section footer CTA ---------- */

.section-footer-cta {
  margin-top: 2.75rem;
  text-align: center;
}

/* ---------- Org structure ---------- */

.org-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
  margin-top: 2.75rem;
  align-items: start;
}

.org-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.9rem;
}

.org-card h3 { font-size: 1.12rem; }

.org-note {
  margin-top: 0.35rem;
  font-size: 0.86rem;
  color: var(--ink-faint);
}

/* Departments: icon tiles rather than bullets */

.org-tiles {
  list-style: none;
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.7rem;
}

.org-tiles li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--lilac-soft);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
}

.tile-ico {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--lilac);
  color: var(--brand);
}

.tile-ico svg { width: 17px; height: 17px; }

/* ---------- About ---------- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.about-body p + p { margin-top: 1rem; }

.about-body { color: var(--ink-soft); }

.about-body strong { color: var(--ink); }

.mv-stack { display: grid; gap: 1.25rem; }

.mv-card {
  position: relative;
  background: var(--lilac-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.9rem;
}

.mv-card.mv-mission {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: #EDE6FA;
}

.mv-kicker {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--brand-bright);
}

.mv-card.mv-mission .mv-kicker { color: var(--brand-glow); }

.mv-card blockquote {
  margin-top: 0.7rem;
  font-family: var(--font-display);
  font-size: 1.13rem;
  font-weight: 500;
  line-height: 1.45;
}

.mv-card.mv-mission blockquote { color: #fff; }

/* ---------- Departments ---------- */

.departments { background: var(--lilac-soft); }

.dept-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 2.75rem;
}

.dept-card {
  --dept-pad: 1.6rem;
  --dept-gap: 0.7rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--dept-pad);
  display: flex;
  flex-direction: column;
  gap: var(--dept-gap);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.dept-media {
  margin: calc(-1 * var(--dept-pad)) calc(-1 * var(--dept-pad)) 0;
  overflow: hidden;
}

.dept-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.dept-card:hover .dept-media img { transform: scale(1.05); }

.dept-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
  border-color: var(--brand-glow);
}

.dept-icon {
  /* a regular hexagon is only √3/2 as tall as it is wide */
  --hex-w: 52px;
  --hex-h: 45px;
  width: var(--hex-w);
  height: var(--hex-h);
  display: grid;
  place-items: center;
  color: var(--brand);
  background: var(--lilac);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  position: relative;
  z-index: 1;
  /* half the hexagon, minus the card's row gap which lands above it */
  margin-top: calc(var(--hex-h) / -2 - var(--dept-gap));
}

.dept-icon svg { width: 26px; height: 26px; }

.dept-card h3 { font-size: 1.22rem; }

.dept-card p { color: var(--ink-soft); font-size: 0.95rem; flex: 1; }

/* ---------- Dental spotlight ---------- */

.dental {
  background-color: var(--brand-deep);
  background-image: url("../images/departments/dental.jpg");
  background-size: cover;
  background-position: center right;
  color: #E9E1F7;
  position: relative;
  overflow: hidden;
}

/* Scrim over the photo: near-opaque on the left where the copy sits, easing off
   to the right so the treatment room stays legible behind the treatment list. */
.dental::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 420px at 90% 110%, rgba(124, 79, 208, 0.35), transparent 70%),
    radial-gradient(500px 300px at 5% -10%, rgba(124, 79, 208, 0.25), transparent 70%),
    linear-gradient(100deg,
      rgba(59, 31, 102, 0.97) 0%,
      rgba(59, 31, 102, 0.94) 38%,
      rgba(59, 31, 102, 0.88) 70%,
      rgba(59, 31, 102, 0.82) 100%);
  pointer-events: none;
}

.dental .container { position: relative; }

.dental .section-eyebrow { color: var(--brand-glow); }
.dental .section-eyebrow::before { background: var(--brand-glow); }
.dental .section-title { color: #fff; }
.dental .section-lede { color: #C9B8EC; }

.dental-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.treatment-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}

.treatment-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  /* opaque enough to stay readable over the photo behind the scrim */
  background: rgba(59, 31, 102, 0.55);
  border: 1px solid rgba(167, 139, 221, 0.4);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #F0EAFB;
}

.treatment-list .ico {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--brand-glow);
}

.dental-cta { margin-top: 1.75rem; }

/* ---------- Doctors ---------- */

.doc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.75rem;
}

/* soft tint so the section reads as its own band, fading back out at both edges.
   Kept translucent so the page's ambient wash still shows through. */
.doctors-preview {
  background: var(--lilac-soft);
}

/* Section header with the CTA pulled up beside the copy */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.section-head-cta { flex: none; margin-bottom: 0.4rem; }


.doc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.4rem;
  text-align: center;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.doc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }

.doc-avatar {
  width: 76px;
  /* A regular hexagon with points left and right is √3/2 as tall as it is wide.
     Drawing it in a square box stretched it vertically. */
  aspect-ratio: 1 / 0.866;
  margin-inline: auto;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-bright), var(--brand-deep));
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.doc-photo {
  aspect-ratio: 1 / 1.08;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, #F1EBFA, #D8C9F0);
}

.doc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}

.doc-card:hover .doc-photo img { transform: scale(1.04); }

.doc-card h3 { font-size: 1.02rem; margin-top: 1.1rem; line-height: 1.3; }

.doc-role {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.doc-dept {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--lilac);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
}

/* ---------- Leadership ---------- */

.leadership { background: var(--lilac-soft); }

.lead-feature {
  margin-top: 2.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.9rem, 4vw, 3rem);
  box-shadow: var(--shadow-soft);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.lead-feature .quote-mark {
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 0.8;
  color: var(--brand-glow);
}

.lead-feature blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}

.lead-attrib {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.lead-attrib .doc-avatar { width: 48px; height: auto; font-size: 1rem; margin: 0; }

.lead-attrib-name { font-weight: 600; font-size: 0.95rem; }

.lead-attrib-role { font-size: 0.85rem; color: var(--ink-faint); }

.lead-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin-top: 1.4rem;
}

.lead-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.9rem;
}

.lead-card p { color: var(--ink-soft); font-size: 0.96rem; }

.lead-card .lead-attrib { margin-top: 1.1rem; }

/* ---------- Insurance ---------- */

.insurance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 2.75rem;
}

.ins-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.1rem 1.9rem;
  text-align: center;
  background: linear-gradient(180deg, #fff, var(--lilac-soft));
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.ins-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
  border-color: var(--brand-glow);
}


.ins-ico {
  width: 46px;
  height: 46px;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--brand);
  background: var(--lilac);
}

.ins-ico svg { width: 24px; height: 24px; }

.ins-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--brand-deep);
}

.ins-sub {
  margin-top: 0.4rem;
  font-size: 0.88rem;
  color: var(--ink-faint);
}

.ins-tag {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--lilac);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}

.insurance-note {
  margin-top: 1.75rem;
  text-align: center;
  font-size: 0.92rem;
  color: var(--ink-faint);
}

/* ---------- Visit / contact ---------- */

.visit { background: var(--lilac-soft); }

.visit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  /* the booking form makes the right column much taller than the left —
     centring would strand the copy in the middle of a tall empty column */
  align-items: start;
}

.visit-list {
  list-style: none;
  margin-top: 1.9rem;
  display: grid;
  gap: 1.1rem;
}

.visit-list li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.visit-list .ico-wrap {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--brand);
  background: var(--lilac);
  border-radius: 12px;
}

.visit-list .ico-wrap svg { width: 20px; height: 20px; }

.visit-list strong { display: block; font-size: 0.98rem; }

.visit-list span { font-size: 0.9rem; color: var(--ink-soft); }

.visit-hours { display: grid; gap: 0.15rem; }

.visit-hours em {
  font-style: normal;
  font-weight: 600;
  color: var(--ink-soft);
  margin-right: 0.4rem;
}

.visit-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

.visit-card {
  background: var(--brand-deep);
  border-radius: var(--radius-lg);
  color: #EDE6FA;
  padding: clamp(2rem, 4vw, 2.9rem);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.visit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(480px 300px at 110% 115%, rgba(124, 79, 208, 0.45), transparent 70%);
  pointer-events: none;
}

.visit-card > * { position: relative; }

.visit-card .brand-mark { width: 56px; height: 56px; }

.visit-card h3 {
  color: #fff;
  font-size: 1.55rem;
  margin-top: 1.4rem;
}

.visit-card p { margin-top: 0.7rem; color: #C9B8EC; font-size: 0.98rem; }

.visit-card .btn { margin-top: 1.6rem; }

.visit-phone {
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

.visit-card-actions { margin-top: 1.6rem; display: grid; gap: 0.9rem; justify-items: start; }

.visit-card .form-note { margin-top: 0; font-size: 0.85rem; color: #A78BDD; }

.visit-card .form-note a { color: #fff; }

/* ---------- Back to top ---------- */

.to-top {
  position: fixed;
  left: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 70;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  /* hidden until scrolled, without leaving a click target behind */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.to-top svg { width: 20px; height: 20px; }

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

/* Staggered entrance for the full-screen mobile menu items. */
@keyframes nav-item-in {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav { transition: opacity 0.01s linear, visibility 0.01s linear; transform: none; }
  .site-nav.is-open a { animation-duration: 0.01s; animation-delay: 0s; }
}

/* ---------- Booking chat widget ---------- */

.bk {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  /* left bound as well, so the panel can never be wider than the gap between
     the two insets — this is what keeps it on-screen rather than 100vw, which
     ignores the scrollbar and overflows by its width on desktop */
  left: clamp(1rem, 3vw, 1.75rem);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.85rem;
  pointer-events: none;
}

.bk > * { pointer-events: auto; }

.bk-launcher {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.35rem;
  border: none;
  border-radius: 999px;
  background: var(--wa);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 14px 30px -12px rgba(37, 211, 102, 0.7);
  transition: transform 0.18s ease, background 0.18s ease;
}

.bk-launcher:hover { background: var(--wa-dark); transform: translateY(-2px); }

.bk-launcher svg { width: 22px; height: 22px; flex: none; }

.bk-panel {
  width: 370px;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 26px 60px -20px rgba(36, 19, 56, 0.4);
  overflow: hidden;
  display: none;
  flex-direction: column;
  max-height: min(560px, calc(100vh - 8rem));
}

.bk.is-open .bk-panel { display: flex; }

.bk.is-open .bk-launcher-text { display: none; }

.bk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--brand-deep);
  color: #fff;
}

.bk-head-text { display: grid; gap: 0.1rem; }
.bk-head-text strong { font-size: 0.95rem; }
.bk-head-text span { font-size: 0.76rem; color: #C9B8EC; }

.bk-close {
  background: none;
  border: none;
  color: #C9B8EC;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 0;
}

.bk-close:hover { color: #fff; }
.bk-close svg { width: 18px; height: 18px; }

.bk-log {
  flex: 1;
  overflow-y: auto;
  padding: 1.15rem;
  display: grid;
  gap: 0.65rem;
  align-content: start;
  background: var(--lilac-soft);
}

.bk-msg { display: flex; }
.bk-msg-bot { justify-content: flex-start; }
.bk-msg-user { justify-content: flex-end; }

.bk-bubble {
  max-width: 85%;
  padding: 0.65rem 0.9rem;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.bk-msg-bot .bk-bubble {
  background: #fff;
  border: 1px solid var(--line);
  border-top-left-radius: 4px;
  color: var(--ink);
}

.bk-msg-user .bk-bubble {
  background: var(--brand);
  border-top-right-radius: 4px;
  color: #fff;
}

.bk-form {
  padding: 0.9rem 1.15rem 1.15rem;
  border-top: 1px solid var(--line);
  background: #fff;
  display: grid;
  gap: 0.6rem;
  /* grid items default to min-width:auto and would otherwise refuse to shrink
     below the input's intrinsic width, pushing the send button out of frame */
  grid-template-columns: minmax(0, 1fr);
}

.bk-input-row { display: flex; gap: 0.5rem; min-width: 0; }

.bk-input {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: #fff;
}

.bk-input:focus { outline: none; border-color: var(--brand-bright); }

.bk-send {
  flex: none;
  width: 42px;
  border: none;
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.bk-send:hover { background: var(--brand-deep); }
.bk-send svg { width: 18px; height: 18px; }

.bk-choices { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.bk-chip {
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 500;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--brand-glow);
  background: #fff;
  color: var(--brand);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.bk-chip:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

.bk-skip {
  justify-self: start;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--ink-faint);
  text-decoration: underline;
  cursor: pointer;
}

.bk-skip:hover { color: var(--brand); }

.bk-error { font-size: 0.82rem; color: #B3244A; }

.bk-summary {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  display: grid;
  gap: 0.4rem;
  font-size: 0.86rem;
}

.bk-summary-row { display: flex; gap: 0.75rem; justify-content: space-between; }
.bk-summary-key { color: var(--ink-faint); flex: none; }
.bk-summary-val { color: var(--ink); font-weight: 500; text-align: right; }

.bk-confirm { width: 100%; }

@media (max-width: 560px) {
  .bk-launcher-text { display: none; }
  .bk-launcher { padding: 0.9rem; }
  .bk-panel { max-height: calc(100vh - 6rem); }
}

@media (prefers-reduced-motion: reduce) {
  .bk-launcher { transition: none; }
  .bk-launcher:hover { transform: none; }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: #B9ACCE;
  font-size: 0.9rem;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding-block: 3.5rem 2.5rem;
}

.footer-brand .brand-name { color: #fff; }

.footer-brand .brand-name em { color: var(--brand-glow); }

.footer-logo {
  display: block;
  height: 56px;
  width: auto;
  max-width: 100%;
}

.footer-brand p { margin-top: 1rem; max-width: 34ch; }

.footer-col h4 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
}

.footer-col ul { list-style: none; display: grid; gap: 0.55rem; }

.footer-col a { color: #B9ACCE; text-decoration: none; }

.footer-col a:hover { color: #fff; }

.footer-licence {
  padding-bottom: 1.4rem;
  font-size: 0.8rem;
  color: #8E80A6;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.83rem;
}

.footer-motto { font-family: var(--font-ar); }

/* ---------- Scroll reveal ---------- */

/* --ease-out-expo: settles quickly then eases, which reads smoother than the
   symmetrical `ease` default for elements arriving into view. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible { opacity: 1; transform: none; }

/* Siblings inside a grid cascade rather than all landing at once. */
.dept-grid > .reveal:nth-child(2),
.insurance-grid > .reveal:nth-child(2),
.doc-grid > .reveal:nth-child(2) { transition-delay: 0.08s; }

.dept-grid > .reveal:nth-child(3),
.insurance-grid > .reveal:nth-child(3),
.doc-grid > .reveal:nth-child(3) { transition-delay: 0.16s; }

.dept-grid > .reveal:nth-child(4),
.doc-grid > .reveal:nth-child(4) { transition-delay: 0.24s; }

.dept-grid > .reveal:nth-child(5),
.doc-grid > .reveal:nth-child(5) { transition-delay: 0.32s; }

.dept-grid > .reveal:nth-child(6) { transition-delay: 0.4s; }

/* Cards carry both the reveal transition and a hover lift. .reveal's shorthand
   would otherwise win on source order and drop box-shadow/border-color, making
   those snap on hover — so declare the full list here, after .reveal. */
.dept-card, .doc-card, .ins-card {
  transition:
    opacity 0.5s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .dept-card, .doc-card, .ins-card, .dept-media img, .doc-photo img { transition: none; }
  .dept-card:hover .dept-media img { transform: none; }
  .doc-card:hover .doc-photo img { transform: none; }
  .reveal, .dept-grid > .reveal, .doc-grid > .reveal,
  .insurance-grid > .reveal, .org-grid > .reveal { transition-delay: 0s; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1020px) {
  .dept-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { border-top: 1px solid var(--line); }
  .stat:nth-child(-n+2) { border-top: none; }
  .stat:nth-child(odd) { border-inline-start: none; }
  .stat:nth-child(even) { border-inline-start: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .hero-grid, .about-grid, .dental-grid, .visit-grid { grid-template-columns: 1fr; }
  .hero-figure { max-width: 360px; order: -1; }
  .hero-badge { left: 0; bottom: 1.2rem; }
  .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }

  /* ---- Full-screen menu ----
     The header carries backdrop-filter, which makes it the containing block for
     any fixed-position child — the overlay would size to the header bar instead
     of the viewport. Dropping the blur here (the header is opaque at this width
     anyway) hands the overlay back to the viewport. */
  .site-header {
    backdrop-filter: none;
    background: #fff;
  }

  /* The header is a stacking context, so the overlay paints over the header bar
     while the brand and the close button are lifted back above it. */
  .brand, .nav-toggle { position: relative; z-index: 60; }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 40;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: clamp(5rem, 16vh, 7.5rem) 1.75rem 2.5rem;
    background: linear-gradient(168deg, #fff 0%, var(--lilac-soft) 52%, var(--lilac) 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.28s ease, transform 0.36s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0.28s;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .site-nav a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 7.5vw, 2.35rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    padding-block: 0.45rem;
    border-bottom: 0;
    opacity: 0;
    transform: translateY(16px);
  }

  /* Links rise in one after another once the panel itself has landed. */
  .site-nav.is-open a { animation: nav-item-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  .site-nav.is-open a:nth-child(1) { animation-delay: 0.08s; }
  .site-nav.is-open a:nth-child(2) { animation-delay: 0.13s; }
  .site-nav.is-open a:nth-child(3) { animation-delay: 0.18s; }
  .site-nav.is-open a:nth-child(4) { animation-delay: 0.23s; }
  .site-nav.is-open a:nth-child(5) { animation-delay: 0.28s; }
  .site-nav.is-open a:nth-child(6) { animation-delay: 0.33s; }

  .site-nav a::before {
    content: "";
    width: 0;
    height: 3px;
    border-radius: 3px;
    background: var(--brand-bright);
    transition: width 0.25s ease;
  }

  .site-nav a.is-active {
    color: var(--brand);
    border-bottom-color: transparent;
  }

  .site-nav a.is-active::before { width: 30px; }

  /* Hamburger becomes a close cross without swapping the icon markout. */
  .nav-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .nav-toggle[aria-expanded="true"] { border-color: var(--brand-glow); }
  .nav-toggle[aria-expanded="true"] svg { display: none; }

  .nav-toggle[aria-expanded="true"]::before,
  .nav-toggle[aria-expanded="true"]::after {
    content: "";
    position: absolute;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-deep);
  }

  .nav-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"]::after { transform: rotate(-45deg); }

  /* Hold the page still and clear the floating buttons out of the way. */
  body.nav-open { overflow: hidden; }

  body.nav-open .bk,
  body.nav-open .to-top {
    opacity: 0;
    pointer-events: none;
  }

  .lead-grid { grid-template-columns: 1fr; }
  .insurance-grid { grid-template-columns: 1fr; }
  .org-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .utilbar-loc { display: none; }
  .utilbar-inner { justify-content: center; }
}

@media (max-width: 640px) {
  .doc-grid { grid-template-columns: repeat(2, 1fr); }
  .dept-grid { grid-template-columns: 1fr; }
  .treatment-list { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat { padding: 1.1rem 1.2rem; }
  .stat-value { font-size: 1.35rem; }
  .lead-feature { grid-template-columns: 1fr; }
  .lead-feature .quote-mark { font-size: 3rem; }
}

@media (max-width: 440px) {
  .doc-grid { grid-template-columns: 1fr; }
}