/* ==========================================================================
   Reem Medical Center — Design System
   --------------------------------------------------------------------------
   1.  Tokens (colors, type, spacing, shadows)
   2.  Base & typography
   3.  Buttons
   4.  Shared components (eyebrow, section heads, icons, links)
   5.  Top bar & header / navigation
   6.  Hero
   7.  Quick info strip
   8.  About
   9.  Services
   10. Why choose us
   11. Doctors
   12. Facilities
   13. Appointment CTA
   14. Contact & map
   15. Footer & floating UI
   16. Reveal animations & utilities
   17. Responsive
   ========================================================================== */

/* 1. TOKENS ------------------------------------------------------------- */
:root {
    --rmc-blue-900: #072f4a;
    --rmc-blue-800: #0a4268;
    --rmc-blue-700: #0b5c8e;
    --rmc-blue-600: #1273b0;
    --rmc-blue-100: #e3f1fa;
    --rmc-blue-50: #f1f8fd;
    --rmc-teal-700: #0f8a89;
    --rmc-teal-600: #14a3a1;
    --rmc-teal-500: #20b8b4;
    --rmc-teal-100: #dff6f4;
    --rmc-ink: #14283a;
    --rmc-text: #4a5d6e;
    --rmc-muted: #7a8a98;
    --rmc-line: #e3ebf1;
    --rmc-bg: #ffffff;
    --rmc-tint: #f5f9fc;
    --rmc-font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --rmc-font-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --rmc-radius-sm: 10px;
    --rmc-radius: 18px;
    --rmc-radius-lg: 28px;
    --rmc-shadow-sm: 0 2px 10px rgba(7, 47, 74, .06);
    --rmc-shadow: 0 12px 34px rgba(7, 47, 74, .10);
    --rmc-shadow-lg: 0 24px 60px rgba(7, 47, 74, .16);
    --rmc-ease: cubic-bezier(.22, .61, .36, 1);
    --rmc-header-h: 82px;
    /* Bootstrap overrides */
    --bs-body-font-family: var(--rmc-font-body);
    --bs-body-color: var(--rmc-text);
    --bs-link-color: var(--rmc-blue-700);
    --bs-link-hover-color: var(--rmc-teal-700);
    --bs-border-radius: var(--rmc-radius-sm);
}

/* 2. BASE & TYPOGRAPHY -------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--rmc-header-h) + 12px); }

body {
  font-family: var(--rmc-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--rmc-text);
  background: var(--rmc-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 { color: var(--rmc-ink); line-height: 1.2; }
h1, h2 { font-family: var(--rmc-font-head); font-weight: 700; letter-spacing: -.01em; }
h3, h4 { font-weight: 700; }

a { text-decoration: none; transition: color .2s var(--rmc-ease); }
img { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--rmc-teal-500);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 3000;
  background: var(--rmc-blue-700); color: #fff; padding: .6rem 1rem; border-radius: 8px;
  transition: top .2s;
}
.skip-link:focus { top: 12px; color: #fff; }

.section { padding: 110px 0; position: relative; }
.section-tint { background: var(--rmc-tint); }

/* 3. BUTTONS ------------------------------------------------------------ */
.btn {
  font-weight: 600;
  border-radius: 999px;
  padding: .7rem 1.5rem;
  letter-spacing: .005em;
  transition: transform .25s var(--rmc-ease), box-shadow .25s var(--rmc-ease), background-color .25s, color .25s, border-color .25s;
}
.btn i { margin-right: .35rem; vertical-align: -1px; }
.btn i.bi-arrow-right { margin: 0 0 0 .35rem; transition: transform .25s var(--rmc-ease); }
.btn:hover i.bi-arrow-right { transform: translateX(4px); }
.btn-lg { padding: .9rem 1.9rem; font-size: 1rem; }

.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  color: #fff;
  background: linear-gradient(135deg, var(--rmc-blue-700), var(--rmc-teal-600));
  border: 0;
  box-shadow: 0 8px 22px rgba(11, 92, 142, .28);
  background-size: 140% 100%;
  background-position: 0 0;
}
.btn-brand:hover, .btn-brand:focus {
  color: #fff;
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(11, 92, 142, .34);
}

.btn-outline-brand {
  color: var(--rmc-blue-700);
  border: 1.5px solid var(--rmc-blue-700);
  background: transparent;
}
.btn-outline-brand:hover, .btn-outline-brand:focus {
  color: #fff;
  background: var(--rmc-blue-700);
  border-color: var(--rmc-blue-700);
  transform: translateY(-2px);
}

/* 4. SHARED COMPONENTS -------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rmc-teal-700);
  background: var(--rmc-teal-100);
  padding: .4rem .9rem; border-radius: 999px;
  margin-bottom: 1.1rem;
}
.eyebrow-light { background: rgba(255, 255, 255, .14); color: #fff; }

.section-title { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: 1rem; }
.section-sub { font-size: 1.08rem; max-width: 620px; margin: 0 auto; }
.section-head { max-width: 760px; margin: 0 auto 3.6rem; }
.lead-text { font-size: 1.12rem; color: var(--rmc-ink); }

.icon-circle {
  flex: 0 0 auto;
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rmc-blue-100); color: var(--rmc-blue-700);
  font-size: 1.2rem;
}
.icon-circle.teal { background: var(--rmc-teal-100); color: var(--rmc-teal-700); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; color: var(--rmc-blue-700);
}
.link-arrow i { transition: transform .25s var(--rmc-ease); }
.link-arrow:hover { color: var(--rmc-teal-700); }
.link-arrow:hover i { transform: translateX(5px); }

.check-list { list-style: none; padding: 0; margin: 1.5rem 0 2rem; }
.check-list li { display: flex; gap: .7rem; align-items: center; padding: .35rem 0; color: var(--rmc-ink); font-weight: 500; }
.check-list i { color: var(--rmc-teal-600); font-size: 1.2rem; }

.tag {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rmc-blue-700); background: var(--rmc-blue-100);
  padding: .28rem .7rem; border-radius: 999px; margin-bottom: .8rem;
}

/* 5. TOP BAR & HEADER --------------------------------------------------- */
.topbar {
  background: var(--rmc-blue-900);
  color: rgba(255, 255, 255, .85);
  font-size: .82rem;
  padding: .55rem 0;
}
.topbar a { color: rgba(255, 255, 255, .9); }
.topbar a:hover { color: var(--rmc-teal-500); }
.topbar i { color: var(--rmc-teal-500); margin-right: .3rem; }

.open-status {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: .75rem; letter-spacing: .04em;
  padding: .15rem .7rem; border-radius: 999px;
  background: rgba(255, 255, 255, .1);
}
.open-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9aa7b2; }
.open-status.is-open { color: #8ef0c5; }
.open-status.is-open::before { background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .25); }
.open-status.is-closed { color: #ffc9c9; }
.open-status.is-closed::before { background: #f87171; }
.open-status.is-dental { color: #ffe6a8; }
.open-status.is-dental::before { background: #fbbf24; }

.site-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s, border-color .3s;
}
.site-header.is-scrolled { box-shadow: var(--rmc-shadow-sm); border-color: var(--rmc-line); }
.site-header .navbar { min-height: var(--rmc-header-h); padding: .4rem 0; }
.navbar-brand img { display: block; }

.brand-text { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--rmc-font-head); font-size: 1.55rem; line-height: 1; color: var(--rmc-ink); }
.brand-text small { display: block; font-family: var(--rmc-font-body); font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--rmc-teal-700); margin-top: .3rem; }
.brand-mark { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; background: linear-gradient(135deg, var(--rmc-blue-700), var(--rmc-teal-600)); }
.brand-text-light { color: #fff; }
.brand-text-light small { color: var(--rmc-teal-500); }
.brand-text.d-none { display: none !important; }
.brand-text.is-visible { display: inline-flex !important; }

.navbar-nav .nav-link {
  font-weight: 600; font-size: .95rem; color: var(--rmc-ink);
  padding: .6rem .9rem !important; position: relative;
}
.navbar-nav .nav-link::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .25rem; height: 2px;
  background: linear-gradient(90deg, var(--rmc-blue-700), var(--rmc-teal-500));
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--rmc-ease);
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--rmc-blue-700); }
.navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after { transform: scaleX(1); }
.navbar-nav .dropdown-toggle::after { border: 0; content: "\F282"; font-family: "bootstrap-icons"; font-size: .7rem; position: static; background: none; transform: none; height: auto; margin-left: .35rem; vertical-align: 0; }

.dropdown-menu {
  border: 1px solid var(--rmc-line); border-radius: var(--rmc-radius-sm);
  box-shadow: var(--rmc-shadow); padding: .6rem; margin-top: .4rem; min-width: 220px;
}
.dropdown-item { border-radius: 8px; padding: .6rem .9rem; font-weight: 600; color: var(--rmc-ink); display: flex; align-items: center; gap: .6rem; }
.dropdown-item i { color: var(--rmc-teal-600); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--rmc-blue-50); color: var(--rmc-blue-700); }
@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu { display: block; }
}

.navbar-toggler { border: 0; font-size: 2rem; color: var(--rmc-ink); padding: .1rem .4rem; line-height: 1; }
.navbar-toggler:focus { box-shadow: none; }

/* Offcanvas (mobile) */
.offcanvas { width: min(88vw, 360px); }
.offcanvas-title { font-family: var(--rmc-font-head); font-size: 1.5rem; color: var(--rmc-ink); }
.mobile-nav > li { border-bottom: 1px solid var(--rmc-line); }
.mobile-nav a { display: flex; justify-content: space-between; align-items: center; padding: .95rem .2rem; font-weight: 600; color: var(--rmc-ink); }
.mobile-nav ul { padding-left: 1rem; }
.mobile-nav ul a { font-weight: 500; color: var(--rmc-text); padding: .6rem .2rem; }
.mobile-contact a { display: block; color: var(--rmc-text); padding: .35rem 0; font-size: .92rem; }
.mobile-contact i { color: var(--rmc-teal-600); margin-right: .4rem; }

/* 6. HERO --------------------------------------------------------------- */
.hero { position: relative; padding: 90px 0 150px; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(900px 500px at 88% 8%, rgba(32, 184, 180, .20), transparent 60%),
    radial-gradient(800px 520px at 0% 100%, rgba(18, 115, 176, .14), transparent 60%),
    linear-gradient(180deg, #f3f9fd 0%, #ffffff 100%);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(11, 92, 142, .09) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(120deg, transparent 40%, #000 100%);
          mask-image: linear-gradient(120deg, transparent 40%, #000 100%);
}
.hero-title { font-size: clamp(2.5rem, 5.2vw, 4.2rem); margin-bottom: 1.3rem; }
.hero-lead { font-size: 1.15rem; max-width: 540px; margin-bottom: 2rem; }
.hero-points { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: 2rem 0 0; padding: 0; }
.hero-points li { font-weight: 600; color: var(--rmc-ink); font-size: .93rem; }
.hero-points i { color: var(--rmc-teal-600); margin-right: .35rem; }

.hero-visual { position: relative; padding: 0 0 30px 30px; }
.hero-image {
  border-radius: 240px 240px var(--rmc-radius-lg) var(--rmc-radius-lg);
  overflow: hidden; aspect-ratio: 4 / 4.6;
  box-shadow: var(--rmc-shadow-lg);
  background: linear-gradient(135deg, var(--rmc-blue-100), var(--rmc-teal-100));
}
.hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-visual::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: 70%; height: 70%;
  border-radius: var(--rmc-radius-lg);
  background: linear-gradient(135deg, var(--rmc-teal-500), var(--rmc-blue-600));
  opacity: .16; z-index: -1;
}

.float-card {
  position: absolute; display: flex; align-items: center; gap: .8rem;
  background: #fff; padding: .85rem 1.15rem; border-radius: var(--rmc-radius);
  box-shadow: var(--rmc-shadow); animation: floaty 6s ease-in-out infinite;
}
.float-card strong { display: block; color: var(--rmc-ink); font-size: .92rem; line-height: 1.2; }
.float-card small { color: var(--rmc-muted); font-size: .78rem; }
.float-card-a { top: 14%; left: -4px; }
.float-card-b { bottom: 8%; right: -14px; animation-delay: -3s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Image placeholder (used when a photo is unavailable) */
.img-placeholder {
  width: 100%; height: 100%; min-height: 160px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(135deg, var(--rmc-blue-100), var(--rmc-teal-100));
  color: var(--rmc-blue-700); font-weight: 600; font-size: .85rem; text-align: center; padding: 1rem;
}
.img-placeholder i { font-size: 2rem; opacity: .7; }
.img-placeholder.avatar { font-family: var(--rmc-font-head); font-size: 2.2rem; letter-spacing: .04em; }

/* 7. QUICK INFO STRIP --------------------------------------------------- */
.quick-strip { margin-top: -80px; position: relative; z-index: 5; }
.quick-card { background: #fff; border-radius: var(--rmc-radius-lg); box-shadow: var(--rmc-shadow-lg); border: 1px solid var(--rmc-line); }
.quick-item { display: flex; gap: 1rem; padding: 2rem 2rem; align-items: flex-start; }
.quick-item + .quick-item { border-left: 1px solid var(--rmc-line); }
.quick-title { font-family: var(--rmc-font-body); font-size: 1rem; font-weight: 700; margin-bottom: .3rem; }
.quick-item p { margin: 0; font-size: .92rem; line-height: 1.6; }
.quick-item a { color: var(--rmc-blue-700); font-weight: 600; }
.quick-item a:hover { color: var(--rmc-teal-700); }

/* 8. ABOUT -------------------------------------------------------------- */
.about-visuals { position: relative; padding: 0 70px 70px 0; }
.about-img { border-radius: var(--rmc-radius-lg); overflow: hidden; box-shadow: var(--rmc-shadow); background: var(--rmc-blue-100); }
.about-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--rmc-ease); }
.about-img:hover img { transform: scale(1.05); }
.about-img-main { aspect-ratio: 4 / 4.4; }
.about-img-sub { position: absolute; right: 0; bottom: 0; width: 50%; aspect-ratio: 1 / 1; border: 8px solid #fff; border-radius: var(--rmc-radius-lg); }

/* 9. SERVICES ----------------------------------------------------------- */
.service-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--rmc-line); border-radius: var(--rmc-radius);
  padding: 2.1rem 1.8rem; position: relative; overflow: hidden;
  transition: transform .35s var(--rmc-ease), box-shadow .35s var(--rmc-ease), border-color .35s;
}
.service-card::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--rmc-blue-700), var(--rmc-teal-500));
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--rmc-ease);
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--rmc-shadow); border-color: transparent; }
.service-card:hover::before { transform: scaleX(1); }
.service-icon {
  width: 62px; height: 62px; border-radius: 18px; font-size: 1.7rem; margin-bottom: 1.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rmc-blue-100); color: var(--rmc-blue-700);
  transition: background .3s, color .3s, transform .3s var(--rmc-ease);
}
.service-icon.teal { background: var(--rmc-teal-100); color: var(--rmc-teal-700); }
.service-card:hover .service-icon { background: linear-gradient(135deg, var(--rmc-blue-700), var(--rmc-teal-600)); color: #fff; transform: rotate(-6deg) scale(1.06); }
.service-card h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.service-card p { color: var(--rmc-text); flex-grow: 1; }
.service-more { font-weight: 700; color: var(--rmc-blue-700); font-size: .92rem; display: inline-flex; align-items: center; gap: .4rem; }
.service-more i { transition: transform .25s var(--rmc-ease); }
.service-card:hover .service-more i { transform: translateX(5px); }

.pharmacy-banner {
  margin-top: 2rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.2rem;
  background: #fff; border: 1px dashed #b9d3e4; border-radius: var(--rmc-radius); padding: 1.4rem 1.8rem;
}
.pharmacy-banner h3 { font-size: 1.1rem; margin: 0 0 .15rem; }

/* 10. WHY CHOOSE US ----------------------------------------------------- */
.stats { margin-top: 2rem; }
.stat {
  background: linear-gradient(135deg, var(--rmc-blue-800), var(--rmc-blue-700));
  color: #fff; border-radius: var(--rmc-radius); padding: 1.5rem 1.4rem; height: 100%;
  position: relative; overflow: hidden;
}
.stat::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: rgba(32, 184, 180, .25); }
.stat strong { display: block; font-family: var(--rmc-font-head); font-weight: 400; font-size: 2.6rem; line-height: 1; margin-bottom: .5rem; position: relative; }
.stat span { font-size: .88rem; color: rgba(255, 255, 255, .85); position: relative; }

.feature-card {
  height: 100%; padding: 1.7rem; background: #fff; border: 1px solid var(--rmc-line); border-radius: var(--rmc-radius);
  transition: transform .35s var(--rmc-ease), box-shadow .35s var(--rmc-ease);
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--rmc-shadow); }
.feature-icon {
  width: 52px; height: 52px; border-radius: 14px; font-size: 1.4rem; margin-bottom: 1rem; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rmc-blue-100); color: var(--rmc-blue-700);
}
.feature-icon.teal { background: var(--rmc-teal-100); color: var(--rmc-teal-700); }
.feature-card h3 { font-size: 1.05rem; margin-bottom: .45rem; }
.feature-card p { margin: 0; font-size: .93rem; }

.insurance { margin-top: 4.5rem; padding-top: 2.5rem; border-top: 1px solid var(--rmc-line); text-align: center; }
.insurance-title { font-weight: 700; color: var(--rmc-muted); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; margin-bottom: 1.4rem; }
.insurance-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin: 0; padding: 0; }
.insurance-list li {
  font-weight: 700; color: var(--rmc-blue-800); background: var(--rmc-tint);
  border: 1px solid var(--rmc-line); padding: .7rem 1.7rem; border-radius: 999px; letter-spacing: .03em;
  transition: all .25s var(--rmc-ease);
}
.insurance-list li:hover { background: var(--rmc-blue-100); border-color: var(--rmc-blue-100); transform: translateY(-3px); }

/* 11. DOCTORS ----------------------------------------------------------- */
.doctor-card {
  display: block; text-align: center; background: #fff; border: 1px solid var(--rmc-line);
  border-radius: var(--rmc-radius); padding: 1.1rem 1.1rem 1.5rem; height: 100%;
  transition: transform .35s var(--rmc-ease), box-shadow .35s var(--rmc-ease), border-color .35s;
}
.doctor-card:hover { transform: translateY(-8px); box-shadow: var(--rmc-shadow); border-color: transparent; }
.doctor-photo {
  aspect-ratio: 1 / 1.1; border-radius: calc(var(--rmc-radius) - 4px); overflow: hidden;
  margin-bottom: 1.1rem; background: linear-gradient(135deg, var(--rmc-blue-100), var(--rmc-teal-100));
}
.doctor-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .7s var(--rmc-ease); }
.doctor-card:hover .doctor-photo img { transform: scale(1.06); }
.doctor-card h3 { font-size: 1rem; margin-bottom: .3rem; }
.doctor-card p { margin: 0; font-size: .85rem; color: var(--rmc-teal-700); font-weight: 600; line-height: 1.5; }
.doctor-card p span { color: var(--rmc-muted); font-weight: 500; }

/* 12. FACILITIES -------------------------------------------------------- */
.facility-card {
  display: flex; flex-direction: column; height: 100%; background: #fff;
  border: 1px solid var(--rmc-line); border-radius: var(--rmc-radius-lg); overflow: hidden;
  transition: transform .35s var(--rmc-ease), box-shadow .35s var(--rmc-ease);
}
.facility-card:hover { transform: translateY(-6px); box-shadow: var(--rmc-shadow); }
.facility-media { aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--rmc-blue-100), var(--rmc-teal-100)); }
.facility-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--rmc-ease); }
.facility-card:hover .facility-media img { transform: scale(1.06); }
.facility-body { padding: 1.8rem 2rem 2rem; }
.facility-body h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.facility-body p { margin-bottom: 1.1rem; }

.facility-mini {
  display: flex; gap: 1.2rem; align-items: center; height: 100%;
  background: var(--rmc-tint); border: 1px solid var(--rmc-line); border-radius: var(--rmc-radius); padding: 1.6rem 1.8rem;
  transition: transform .3s var(--rmc-ease), background .3s;
}
.facility-mini:hover { transform: translateY(-4px); background: #fff; box-shadow: var(--rmc-shadow-sm); }
.facility-mini .feature-icon { margin: 0; }
.facility-mini h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.facility-mini p { margin: 0; font-size: .93rem; }

/* 13. APPOINTMENT CTA --------------------------------------------------- */
.cta { padding: 0 0 110px; }
.cta-card {
  position: relative; overflow: hidden; border-radius: var(--rmc-radius-lg); padding: 4rem;
  background: linear-gradient(135deg, var(--rmc-blue-900) 0%, var(--rmc-blue-700) 62%, var(--rmc-teal-700) 130%);
  box-shadow: var(--rmc-shadow-lg); color: rgba(255, 255, 255, .85);
}
.cta-card::before, .cta-card::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.cta-card::before { width: 420px; height: 420px; right: -120px; top: -160px; background: rgba(32, 184, 180, .22); }
.cta-card::after { width: 260px; height: 260px; left: -90px; bottom: -120px; background: rgba(255, 255, 255, .07); }
.cta-card > .row { position: relative; z-index: 1; }
.cta-title { color: #fff; font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-bottom: 1rem; }
.cta-text { font-size: 1.05rem; margin-bottom: 1.6rem; }
.cta-contact { margin: 0; }
.cta-contact li { padding: .3rem 0; font-weight: 600; }
.cta-contact i { color: var(--rmc-teal-500); margin-right: .6rem; font-size: 1.1rem; }
.cta-contact a { color: #fff; }
.cta-contact a:hover { color: var(--rmc-teal-500); }

.appointment-form { background: #fff; border-radius: var(--rmc-radius); padding: 2rem; box-shadow: var(--rmc-shadow-lg); }
.appointment-form .form-label { font-weight: 600; font-size: .85rem; color: var(--rmc-ink); margin-bottom: .35rem; }
.appointment-form .optional { color: var(--rmc-muted); font-weight: 500; }
.appointment-form .form-control, .appointment-form .form-select {
  border: 1.5px solid var(--rmc-line); border-radius: 12px; padding: .75rem 1rem; color: var(--rmc-ink); background-color: var(--rmc-tint);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.appointment-form .form-control:focus, .appointment-form .form-select:focus {
  background-color: #fff; border-color: var(--rmc-teal-500); box-shadow: 0 0 0 4px rgba(32, 184, 180, .15);
}
.appointment-form .btn-submit {
  color: #fff; background: linear-gradient(135deg, var(--rmc-blue-700), var(--rmc-teal-600)); border: 0;
  box-shadow: 0 8px 22px rgba(11, 92, 142, .28);
}
.appointment-form .btn-submit:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(11, 92, 142, .34); }
.form-note { margin: .8rem 0 0; text-align: center; font-size: .82rem; color: var(--rmc-muted); }

/* 14. CONTACT & MAP ----------------------------------------------------- */
.contact-card { height: 100%; background: #fff; border: 1px solid var(--rmc-line); border-radius: var(--rmc-radius-lg); padding: 2.2rem; box-shadow: var(--rmc-shadow-sm); }
.contact-row { display: flex; gap: 1.1rem; }
.contact-row + .contact-row { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--rmc-line); }
.contact-row h3 { font-size: 1rem; margin-bottom: .3rem; }
.contact-row p { margin: 0; font-size: .95rem; }
.contact-row a { color: var(--rmc-blue-700); font-weight: 600; }
.contact-row a:hover { color: var(--rmc-teal-700); }

.map-wrap { position: relative; height: 100%; min-height: 420px; border-radius: var(--rmc-radius-lg); overflow: hidden; border: 1px solid var(--rmc-line); box-shadow: var(--rmc-shadow); background: var(--rmc-blue-100); }
.map-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-btn { position: absolute; left: 1.2rem; bottom: 1.2rem; }

/* 15. FOOTER & FLOATING UI --------------------------------------------- */
.site-footer { background: var(--rmc-blue-900); color: rgba(255, 255, 255, .72); padding: 80px 0 0; font-size: .95rem; }
.site-footer h4 { color: #fff; font-family: var(--rmc-font-body); font-size: 1rem; letter-spacing: .04em; margin-bottom: 1.4rem; }
.site-footer a { color: rgba(255, 255, 255, .78); }
.site-footer a:hover { color: var(--rmc-teal-500); }
.footer-logo { display: block; margin-bottom: 1.2rem; }
.footer-about { max-width: 380px; margin: 1.1rem 0 1.5rem; }
.footer-links li { padding: .3rem 0; }
.footer-links a { display: inline-block; transition: transform .2s var(--rmc-ease), color .2s; }
.footer-links a:hover { transform: translateX(4px); }
.footer-contact li { display: flex; gap: .7rem; padding: .45rem 0; }
.footer-contact i { color: var(--rmc-teal-500); margin-top: .2rem; }

.social { display: flex; gap: .6rem; flex-wrap: wrap; }
.social a {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08); color: #fff; transition: all .3s var(--rmc-ease);
}
.social a:hover { background: var(--rmc-teal-600); color: #fff; transform: translateY(-3px); }

.footer-bottom {
  margin-top: 60px; padding: 1.6rem 0; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem; font-size: .88rem;
}

.whatsapp-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 1040;
  width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; font-size: 1.8rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .45); transition: transform .25s var(--rmc-ease);
}
.whatsapp-fab:hover { color: #fff; transform: scale(1.08); }
.whatsapp-fab::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

.back-to-top {
  position: fixed; right: 30px; bottom: 96px; z-index: 1040; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--rmc-blue-700); color: #fff; box-shadow: var(--rmc-shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .3s var(--rmc-ease);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--rmc-teal-600); }

/* 16. REVEAL ANIMATIONS ------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--rmc-ease), transform .8s var(--rmc-ease); transition-delay: var(--reveal-delay, 0ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* 17. RESPONSIVE -------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .section { padding: 90px 0; }
}

@media (max-width: 991.98px) {
  :root { --rmc-header-h: 72px; }
  .hero { padding: 60px 0 130px; }
  .hero-visual { max-width: 520px; margin: 0 auto; }
  .quick-item + .quick-item { border-left: 0; border-top: 1px solid var(--rmc-line); }
  .quick-item { padding: 1.5rem 1.6rem; }
  .cta-card { padding: 2.6rem 2rem; }
  .about-visuals { max-width: 520px; margin: 0 auto; }
  .navbar-brand img { height: 42px; }
}

@media (max-width: 575.98px) {
  .section { padding: 70px 0; }
  .cta { padding-bottom: 70px; }
  .hero { padding: 40px 0 120px; }
  .hero-visual { padding: 0 0 20px 14px; }
  .float-card { padding: .65rem .85rem; }
  .float-card-a { left: -6px; }
  .float-card-b { right: -6px; }
  .section-head { margin-bottom: 2.4rem; }
  .stat strong { font-size: 2.1rem; }
  .cta-card { padding: 2rem 1.2rem; }
  .appointment-form { padding: 1.4rem; }
  .about-visuals { padding: 0 40px 40px 0; }
  .map-wrap { min-height: 340px; }
  .whatsapp-fab { right: 16px; bottom: 16px; width: 52px; height: 52px; font-size: 1.6rem; }
  .back-to-top { right: 22px; bottom: 80px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}