/* ===== HERO SECTION ===== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: calc(var(--nav-height) + 40px) 24px 60px;
  /* soft fallback base behind the animated mesh */
  background: linear-gradient(165deg, #FFFFFF 0%, #EEF3FB 55%, #F1F8F0 100%);
  overflow: hidden;
  isolation: isolate;   /* contain blend modes to the hero */
  /* "breathing" entry: the whole hero gently comes into focus */
  animation: heroBreathe 1.8s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}
@keyframes heroBreathe {
  0%   { opacity: 0; filter: blur(16px); }
  60%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0); }
}

/* Bright central bloom sits ABOVE the photos: keeps the headline the focal
   point and the scene airy, while edges stay vivid (≈30–50% photo prominence).
   Plus a soft top highlight + gentle bottom shading for depth. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;                 /* above images (0), below content (2) */
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 52% at 50% 47%,
      rgba(255, 255, 255, 0.86) 0%,
      rgba(255, 255, 255, 0.45) 42%,
      rgba(255, 255, 255, 0) 74%),
    linear-gradient(to bottom,
      rgba(255, 255, 255, 0.30) 0%,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0) 78%,
      rgba(241, 248, 240, 0.55) 100%);
}

/* Permanent bottom hand-off: the mesh dissolves into the next section's
   solid white background so there is never a hard seam between sections.
   Sits above the mesh (z-index 0) but below the content (z-index 2). */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 58%,
    #ffffff 100%);   /* matches .services background (var(--white)) */
}

/* =====================================================================
   PREMIUM ANIMATED MESH GRADIENT BACKGROUND
   - Six saturated brand-tone blobs on `mix-blend-mode: multiply` so
     overlaps deepen into richer color instead of washing toward white.
   - Two pastel highlight blobs on `mix-blend-mode: screen` add a bright
     glow where colors intersect.
   - Layers drift + morph on different (near-prime) durations so the
     combined motion never visibly loops — flowing-water feel.
   - A soft radial spotlight (::after) keeps the hero content readable.
   - Animations are transform/opacity/border-radius only (GPU friendly).
   ===================================================================== */
.hero__mesh {
  position: absolute;
  inset: -60px;               /* oversized so parallax never reveals an edge */
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;         /* contain blend modes to this layer only */
  /* Light, lightly brand-tinted base so multiply blobs read rich, not muddy */
  background:
    linear-gradient(140deg, #e8f1ff 0%, #eaf6ee 48%, #e4f3ff 100%);
  transition: transform 0.25s ease-out;
  will-change: opacity;       /* scroll-driven fade composites on its own layer */
}

/* ---- Saturated color blobs (multiply) ---- */
.hero__mesh-blob {
  position: absolute;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  filter: blur(70px);
  mix-blend-mode: multiply;
  opacity: 0.92;
  will-change: transform, border-radius;
}
.hero__mesh-blob--1 {            /* royal blue #1d4ed8 */
  width: 52vmax; height: 52vmax;
  top: -18%; left: -12%;
  background: radial-gradient(circle at 35% 35%, #1d4ed8, rgba(29, 78, 216, 0) 68%);
  animation: meshDrift1 23s ease-in-out infinite, meshMorph 19s ease-in-out infinite;
}
.hero__mesh-blob--2 {            /* emerald #059669 */
  width: 50vmax; height: 50vmax;
  top: -14%; right: -14%;
  background: radial-gradient(circle at 60% 40%, #059669, rgba(5, 150, 105, 0) 68%);
  animation: meshDrift2 29s ease-in-out infinite, meshMorph 22s ease-in-out infinite reverse;
}
.hero__mesh-blob--3 {            /* bright green #16a34a */
  width: 46vmax; height: 46vmax;
  bottom: -22%; left: 2%;
  background: radial-gradient(circle at 40% 60%, #16a34a, rgba(22, 163, 74, 0) 68%);
  animation: meshDrift3 31s ease-in-out infinite, meshMorph 25s ease-in-out infinite;
}
.hero__mesh-blob--4 {            /* blue #2563eb */
  width: 44vmax; height: 44vmax;
  bottom: -18%; right: -8%;
  background: radial-gradient(circle at 55% 50%, #2563eb, rgba(37, 99, 235, 0) 68%);
  animation: meshDrift4 37s ease-in-out infinite, meshMorph 29s ease-in-out infinite reverse;
}
.hero__mesh-blob--5 {            /* deep royal #1e3a8a — anchors lower-left depth */
  width: 40vmax; height: 40vmax;
  bottom: -10%; left: 30%;
  background: radial-gradient(circle at 50% 50%, #1e3a8a, rgba(30, 58, 138, 0) 66%);
  animation: meshDrift5 41s ease-in-out infinite, meshMorph 33s ease-in-out infinite;
}
.hero__mesh-blob--6 {            /* green #15803d — top-center richness */
  width: 38vmax; height: 38vmax;
  top: -12%; left: 36%;
  background: radial-gradient(circle at 50% 50%, #15803d, rgba(21, 128, 61, 0) 66%);
  animation: meshDrift6 43s ease-in-out infinite, meshMorph 27s ease-in-out infinite reverse;
}

/* ---- Pastel highlight glows (screen) — brighten the intersections ---- */
.hero__mesh-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
  opacity: 0.85;
  will-change: transform;
}
.hero__mesh-glow--1 {            /* sky highlight */
  width: 40vmax; height: 40vmax;
  top: 4%; left: 8%;
  background: radial-gradient(circle at 50% 50%, #7dd3fc, rgba(125, 211, 252, 0) 65%);
  animation: meshDrift3 35s ease-in-out infinite;
}
.hero__mesh-glow--2 {            /* mint highlight */
  width: 36vmax; height: 36vmax;
  bottom: 2%; right: 10%;
  background: radial-gradient(circle at 50% 50%, #86efac, rgba(134, 239, 172, 0) 65%);
  animation: meshDrift2 39s ease-in-out infinite reverse;
}

/* Center spotlight keeps the headline, subheadline and CTAs crisp & readable */
.hero__mesh::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 46%,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.28) 42%,
    rgba(255, 255, 255, 0) 72%);
}

@keyframes meshDrift1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(7%, 6%, 0) scale(1.14); }
}
@keyframes meshDrift2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-8%, 7%, 0) scale(1.11); }
}
@keyframes meshDrift3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(9%, -7%, 0) scale(1.16); }
}
@keyframes meshDrift4 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-7%, -8%, 0) scale(1.10); }
}
@keyframes meshDrift5 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-6%, 4%, 0) scale(1.13); }
}
@keyframes meshDrift6 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(5%, -5%, 0) scale(1.12); }
}
@keyframes meshMorph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  50%      { border-radius: 60% 40% 38% 62% / 55% 58% 42% 45%; }
}

/* ----- Clinic photos blended into the mesh (scattered cross-fading collage) ----- */
.hero__images {
  position: absolute;
  inset: -60px;
  z-index: 0;                 /* same depth band as the mesh */
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: transform 0.25s ease-out;
}
/* Each photo is a free-form composition, data-driven via inline vars */
.hero__img {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--w, 26vmax);
  height: var(--h, 20vmax);
  background-size: cover;
  background-position: center;
  /* organic, non-circular silhouette */
  border-radius: 47% 53% 60% 40% / 55% 45% 58% 42%;
  /* recognizable in colour, lightly softened, with a soft shadow for depth */
  filter: saturate(1.05) contrast(1.02) blur(1px)
          drop-shadow(0 16px 34px rgba(30, 58, 138, 0.16));
  opacity: 0;
  will-change: transform, opacity;
  /* feathered organic edge so each photo melts into the gradient */
  -webkit-mask-image: radial-gradient(ellipse 66% 66% at 50% 50%, #000 46%, transparent 78%);
          mask-image: radial-gradient(ellipse 66% 66% at 50% 50%, #000 46%, transparent 78%);
  /* slow, calming surfacing + ambient float */
  animation: imgCycle 32s ease-in-out infinite, imgDrift 36s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -2.25s), calc(var(--i, 0) * -2.55s);
}
/* gentle cross-fade so a few photos stay clearly visible at any moment */
@keyframes imgCycle {
  0%, 100% { opacity: 0; }
  10%, 30% { opacity: 0.82; }
  46%      { opacity: 0; }
}
@keyframes imgDrift {
  0%, 100% { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1.02); }
  50%      { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1.10); }
}


/* ----- Entrance animations for hero content ----- */
.hero-enter {
  opacity: 0;
  animation: heroEnter 0.9s cubic-bezier(0.22, 0.7, 0.2, 1) both;
  animation-delay: var(--enter-delay, 0s);
}
@keyframes heroEnter {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----- CTA buttons: colours, icons, micro-interactions ----- */
.hero__ctas .btn {
  gap: 10px;
  transition: transform 0.25s cubic-bezier(0.22, 0.7, 0.2, 1), background 0.25s ease, box-shadow 0.25s ease;
}
.hero__ctas .btn__icon {
  width: 19px;
  height: 19px;
  fill: currentColor;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.hero__ctas .btn:hover .btn__icon { transform: scale(1.1); }

/* Exact reference colours (override landing-redesign's flat blue) */
.hero__ctas .btn--primary {            /* Inquire — deep professional blue */
  background: #1E3A8A !important;
  box-shadow: 0 8px 22px rgba(30, 58, 138, 0.32) !important;
}
.hero__ctas .btn--primary:hover { background: #15306E !important; }

.hero__ctas .btn--secondary {          /* Book now — green accent */
  background: #1F8A4D !important;
  box-shadow: 0 8px 22px rgba(31, 138, 77, 0.32) !important;
}
.hero__ctas .btn--secondary:hover { background: #176E3D !important; }

.hero__ctas .btn--accent {             /* Community — deep professional blue */
  background: #16357A !important;
  box-shadow: 0 8px 22px rgba(22, 53, 122, 0.32) !important;
}
.hero__ctas .btn--accent:hover { background: #0F2658 !important; }

.hero__ctas .btn:hover {
  transform: translateY(-3px);
}
.hero__ctas .btn:active {
  transform: translateY(-1px);
}

/* Soft sheen sweep across the button on hover (clipped by .btn overflow:hidden).
   Uses ::after so it composes with common.css's ::before fill. */
.hero__ctas .btn::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-220%) skewX(-18deg);
  pointer-events: none;
}
.hero__ctas .btn:hover::after {
  transform: translateX(420%) skewX(-18deg);
  transition: transform 0.75s ease;   /* only on hover-in; snaps back off-screen */
}

/* Tablet / mobile: smaller blur radius for performance, mesh stays vibrant */
@media (max-width: 768px) {
  .hero__mesh-blob { filter: blur(52px); opacity: 0.9; }
  .hero__mesh-glow { filter: blur(58px); opacity: 0.8; }
  .hero__mesh::after {
    background: radial-gradient(ellipse 86% 64% at 50% 48%,
      rgba(255, 255, 255, 0.66) 0%,
      rgba(255, 255, 255, 0.30) 46%,
      rgba(255, 255, 255, 0) 76%);
  }
  .hero__mem-layer:nth-child(1) .hero__mem-photo { opacity: 0.09; filter: blur(12px) saturate(0.8); }
  .hero__mem-layer:nth-child(2) .hero__mem-photo { opacity: 0.15; filter: blur(6px) saturate(0.9); }
  .hero__mem-layer:nth-child(3) .hero__mem-photo { opacity: 0.20; filter: blur(2px); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero,
  .hero__mesh,
  .hero__mesh-blob,
  .hero__mesh-glow,
  .hero__mem-photo,
  .hero__memory-bg,
  .hero__mem-layer,
  .hero__atmo-orb {
    animation: none !important;
    transition: none !important;
  }
  .hero { opacity: 1 !important; filter: none !important; }
  .hero-enter { opacity: 1 !important; animation: none !important; transform: none !important; }
  .hero__atmosphere { display: none; }
}

.hero__illustration {
  position: absolute;
  left: -2%;
  bottom: -5%;
  width: 55%;
  max-width: 600px;
  height: auto;
  object-fit: contain;
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
  /* animation: floatIllustration 8s ease-in-out infinite; */
}

@keyframes floatIllustration {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 780px;
  /* children animate in individually via .hero-enter (staggered) */
}

/* Trust Badges */
.trust-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  opacity: 0;
  animation: badgeFadeIn 0.6s ease-out forwards;
}

.trust-badge:nth-child(1) { animation-delay: 0.2s; }
.trust-badge:nth-child(2) { animation-delay: 0.4s; }
.trust-badge:nth-child(3) { animation-delay: 0.6s; }

@keyframes badgeFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.trust-badge__icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust-badge__icon svg {
  width: 100%;
  height: 100%;
}

/* ----- Eyebrow tagline above the clinic name ----- */
.hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 12px;
}
.hero__eyebrow-rule {
  width: 52px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(11, 110, 59, 0.55));
  /* lines draw outward from the heart */
  transform: scaleX(0);
  transform-origin: right center;
  animation: ruleDraw 0.7s cubic-bezier(0.22, 0.7, 0.2, 1) 0.5s forwards;
}
.hero__eyebrow-rule:last-child {
  background: linear-gradient(90deg, rgba(11, 110, 59, 0.55), transparent);
  transform-origin: left center;
}
@keyframes ruleDraw {
  to { transform: scaleX(1); }
}
.hero__eyebrow-icon {
  width: 22px;
  height: 22px;
  fill: var(--theme-secondary, #0B6E3B);
  filter: drop-shadow(0 2px 4px rgba(11, 110, 59, 0.25));
  transform-origin: center;
  /* subtle, resting double-thump heartbeat */
  animation: heartBeat 3.4s ease-in-out 1.2s infinite;
}
@keyframes heartBeat {
  0%, 70%, 100% { transform: scale(1); }
  8%            { transform: scale(1.22); }
  16%           { transform: scale(1.0); }
  24%           { transform: scale(1.13); }
  32%           { transform: scale(1.0); }
}
.hero__tagline {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-weight: 600;
  font-size: 13px;
  color: var(--theme-secondary, #0B6E3B);
  margin-bottom: 18px;
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 8vw, 88px);
  line-height: 1.05;
  color: var(--theme-primary, #1E3A8A);
  margin-bottom: 28px;
  letter-spacing: -1px;
}
/* Each headline line rises in sequence (see .hero-enter staggered delays) */
.hero__headline-line { display: block; }

.hero__description {
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.7;
  color: var(--text-body);
  max-width: 620px;
  margin: 0 auto 44px;
}

.hero__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ===== SCROLL INDICATOR ===== */
.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;   /* revealed last in the entrance sequence */
  animation: cueIn 0.8s ease-out 1s forwards, bounce 2s ease-in-out 1.8s infinite;
}
@keyframes cueIn {
  from { opacity: 0;   transform: translateX(-50%) translateY(16px); }
  to   { opacity: 0.6; transform: translateX(-50%) translateY(0); }
}

.scroll-indicator__mouse {
  width: 24px;
  height: 38px;
  border: 2px solid var(--text-body);
  border-radius: 12px;
  position: relative;
}

.scroll-indicator__mouse::after {
  content: '';
  width: 4px;
  height: 8px;
  background: var(--text-body);
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 2s infinite;
}

@keyframes scrollWheel {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  50% { opacity: 0; transform: translateX(-50%) translateY(10px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ===== SERVICES SECTION ===== */
.services {
  padding: 100px 24px;
  background: var(--white);
  position: relative;
}

.services::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(184,240,200,0.15), transparent);
  pointer-events: none;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.service-card {
  padding: 36px 28px;
  background: #f7fdf9;
  border: 1px solid rgba(30,58,138,0.12);
  border-radius: 20px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.service-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-primary), #6dd5a0);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(30,58,138,0.1);
  border-color: rgba(30,58,138,0.25);
}

.service-card:hover::after {
  transform: scaleX(1);
}

.service-card__icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, rgba(30,58,138,0.12), rgba(30,58,138,0.04));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: background 0.3s ease;
}

.service-card:hover .service-card__icon {
  background: linear-gradient(135deg, rgba(30,58,138,0.2), rgba(30,58,138,0.08));
}

.service-card__icon svg {
  width: 26px;
  height: 26px;
  fill: var(--green-primary);
}

.service-card__title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 10px;
  color: var(--text-dark);
}

.service-card__text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-body);
}

/* =====================================================================
   MISSION, VISION & HISTORY — premium storytelling redesign
   ===================================================================== */
.mission-vision {
  padding: 100px 24px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F8FE 55%, #F1F8F2 100%);
  position: relative;
  overflow: hidden;
}
.mission-vision .container {
  text-align: center;
  margin-bottom: 56px;
  position: relative;
  z-index: 1;
}
/* faint leaf illustrations in the upper corners */
.mv-leaves { position: absolute; inset: 0; pointer-events: none; z-index: 0; color: rgba(31, 138, 77, 0.10); }
.mv-leaves__l, .mv-leaves__r { position: absolute; top: 70px; width: 140px; height: 140px; }
.mv-leaves__l { left: 24px; }
.mv-leaves__r { right: 24px; transform: scaleX(-1); }

.mv-accent--vision  { color: var(--theme-primary, #1E3A8A); }
.mv-accent--mission { color: var(--theme-secondary, #0B6E3B); }

/* ----- shared wide wrapper for rows + history ----- */
.mv-rows {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
  position: relative;
  z-index: 1;
}

/* alternating content + image rows */
.mv-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  align-items: stretch;
}
.mv-row--reverse .mv-card   { order: 2; }
.mv-row--reverse .mv-figure { order: 1; }

/* text card — override landing-redesign’s flat card defaults */
.mission-vision .mv-card {
  background: rgba(255, 255, 255, 0.9) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(30, 58, 138, 0.10) !important;
  border-radius: 24px !important;
  box-shadow: 0 14px 40px rgba(30, 58, 138, 0.07) !important;
  padding: 48px 44px !important;
  display: flex; flex-direction: column;
  text-align: left;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(.22,.7,.2,1), box-shadow 0.4s ease !important;
}
.mission-vision .mv-card::before { display: none !important; }
.mission-vision .mv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 56px rgba(30, 58, 138, 0.12) !important;
}

/* tinted containers: Vision = blue, Mission = green */
.mission-vision .mv-card--vision {
  background: linear-gradient(160deg, #F4F8FE 0%, #E8F0FC 100%) !important;
  border-color: rgba(30, 58, 138, 0.18) !important;
}
.mission-vision .mv-card--vision:hover {
  box-shadow: 0 26px 56px rgba(30, 58, 138, 0.16) !important;
}
.mission-vision .mv-card--mission {
  background: linear-gradient(160deg, #F1F8F3 0%, #E4F3EA 100%) !important;
  border-color: rgba(11, 110, 59, 0.20) !important;
}
.mission-vision .mv-card--mission:hover {
  box-shadow: 0 26px 56px rgba(11, 110, 59, 0.16) !important;
}

.mission-vision .mv-card__badge {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  padding: 6px 16px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 18px !important;
}
.mv-card__badge svg { width: 15px; height: 15px; }
.mv-card__badge--vision  { background: rgba(30, 58, 138, 0.10) !important; color: var(--theme-primary, #1E3A8A) !important; }
.mv-card__badge--vision svg  { fill: var(--theme-primary, #1E3A8A) !important; }
.mv-card__badge--mission { background: rgba(11, 110, 59, 0.10) !important; color: var(--theme-secondary, #0B6E3B) !important; }
.mv-card__badge--mission svg { fill: var(--theme-secondary, #0B6E3B) !important; }

.mission-vision .mv-card__title {
  font-family: var(--font-display);
  font-weight: 800; font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.5px; margin-bottom: 0 !important;
  color: var(--theme-primary, #1E3A8A) !important;
}
.mission-vision .mv-card__title--mission { color: var(--theme-secondary, #0B6E3B) !important; }

.mv-card__rule { display: block; width: 48px; height: 3px; border-radius: 3px; margin: 14px 0 18px; }
.mv-card__rule--vision  { background: var(--theme-primary, #1E3A8A); }
.mv-card__rule--mission { background: var(--theme-secondary, #0B6E3B); }

.mission-vision .mv-card__text {
  font-size: 15px; line-height: 1.8; color: var(--theme-ink-body, #475467) !important; margin-bottom: 26px;
}

/* vision value pillars */
.mv-pillars {
  margin-top: auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding-top: 22px; border-top: 1px solid rgba(30, 58, 138, 0.08);
}
.mv-pillar { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.mv-pillar__icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30, 58, 138, 0.08);
  transition: transform 0.3s ease, background 0.3s ease;
}
.mv-pillar__icon svg { width: 22px; height: 22px; fill: var(--theme-primary, #1E3A8A); }
.mv-pillar:nth-child(4) .mv-pillar__icon svg { fill: var(--theme-secondary, #0B6E3B); }
.mv-card:hover .mv-pillar__icon { transform: translateY(-3px); background: rgba(30, 58, 138, 0.14); }
.mv-pillar__label { font-size: 12px; font-weight: 600; color: var(--theme-ink, #1B2230); line-height: 1.3; }

/* mission goals — green checks */
.mission-vision .mv-card__goals { list-style: none; padding: 0; margin: 0; text-align: left; }
.mission-vision .mv-card__goals li {
  position: relative; padding: 9px 0 9px 32px;
  font-size: 14px; line-height: 1.55; color: var(--theme-ink-body, #475467);
  border-bottom: 1px solid rgba(11, 110, 59, 0.08);
}
.mission-vision .mv-card__goals li:last-child { border-bottom: none; }
.mission-vision .mv-card__goals li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--theme-secondary, #0B6E3B);
}
.mission-vision .mv-card__goals li::after {
  content: '✓'; position: absolute; left: 5px; top: 10px;
  font-size: 11px; color: #fff; font-weight: 700; line-height: 20px;
}

/* ----- image figures ----- */
.mv-figure {
  margin: 0; position: relative; overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(16, 28, 56, 0.16);
  min-height: 280px;
}
.mv-figure::after {            /* subtle brand overlay */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(30,58,138,0.10), transparent 50%, rgba(11,110,59,0.10));
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.mv-figure img {
  width: 100%; height: 100%; min-height: 280px;
  object-fit: cover; display: block;
  transition: transform 0.7s cubic-bezier(.22,.7,.2,1);
}
.mv-figure:hover img { transform: scale(1.05); }
.mv-figure:hover::after { opacity: 1; }

/* =====================================================================
   HISTORY — intro + visual timeline
   ===================================================================== */
.mv-history {
  max-width: 1300px;
  margin: 48px auto 0 !important;
  padding: 48px 44px !important;
  background: linear-gradient(150deg, #EEF6EF 0%, #EAF1FB 100%) !important;
  border: 1px solid rgba(11, 110, 59, 0.12) !important;
  border-radius: 28px !important;
  overflow: visible !important;
  display: grid; grid-template-columns: 0.85fr 2.15fr; gap: 40px; align-items: start;
  position: relative; z-index: 1;
}
.mv-history::before { display: none !important; }

.mv-history__intro { text-align: left; }
.mv-history__badge {
  display: inline-flex !important; align-items: center; gap: 7px;
  background: #fff !important; color: var(--theme-secondary, #0B6E3B) !important;
  box-shadow: 0 4px 14px rgba(16,28,56,0.06);
}
.mv-history__badge svg { width: 15px; height: 15px; fill: var(--theme-secondary, #0B6E3B); }
.mission-vision .mv-history__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15;
  color: var(--theme-primary, #1E3A8A); margin: 16px 0 0;
}
.mission-vision .mv-history__text {
  font-size: 14.5px; line-height: 1.75; color: var(--theme-ink-body, #475467); max-width: none; margin-bottom: 24px;
}

/* timeline */
.mv-timeline {
  position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 22px;
}
.mv-timeline__track { display: none; }
.mv-milestone { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.mv-milestone__media {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden;
  box-shadow: 0 12px 30px rgba(16, 28, 56, 0.14);
  background: var(--theme-primary-wash, #EEF1FA);
}
.mv-milestone__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(.22,.7,.2,1);
}
.mv-milestone:hover .mv-milestone__media img { transform: scale(1.06); }
.mv-milestone__node {
  position: relative; z-index: 2; margin: -22px 0 14px;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; box-shadow: 0 6px 16px rgba(16, 28, 56, 0.16);
  border: 2px solid rgba(11, 110, 59, 0.25);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.mv-milestone__node svg { width: 20px; height: 20px; fill: var(--theme-primary, #1E3A8A); }
.mv-milestone:hover .mv-milestone__node { transform: translateY(-3px) scale(1.06); border-color: var(--theme-secondary, #0B6E3B); }
.mv-milestone__year {
  display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 18px;
  color: var(--theme-primary, #1E3A8A);
}
.mv-milestone__title { font-size: 15px; font-weight: 700; color: var(--theme-ink, #1B2230); margin: 4px 0 6px; }
.mv-milestone__text { font-size: 12.5px; line-height: 1.55; color: var(--theme-ink-body, #475467); }

/* =====================================================================
   CONTACT STRIP
   ===================================================================== */
.mv-contact-strip {
  max-width: 1300px; margin: 24px auto 0;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 22px 32px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(30, 58, 138, 0.10);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(16, 28, 56, 0.05);
  position: relative; z-index: 1;
}
.mv-contact-strip__art {
  width: 54px; height: 54px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(167,227,153,0.5), rgba(115,158,201,0.4));
}
.mv-contact-strip__art svg { width: 28px; height: 28px; fill: var(--theme-primary, #1E3A8A); }
.mv-contact { display: flex; gap: 30px; flex-wrap: wrap; flex: 1; }
.mv-contact__item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--theme-ink-body, #475467); }
.mv-contact__item svg { width: 18px; height: 18px; flex-shrink: 0; fill: var(--theme-primary, #1E3A8A); }

/* ----- responsive ----- */
@media (max-width: 980px) {
  .mv-row { grid-template-columns: 1fr; }
  .mv-row--reverse .mv-card   { order: 2; }
  .mv-row--reverse .mv-figure { order: 1; }
  .mv-figure { min-height: 260px; }
  .mv-history { grid-template-columns: 1fr; }
  .mv-timeline { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .mission-vision .mv-card { padding: 34px 24px !important; }
  .mv-pillars { gap: 6px; }
  .mv-timeline { grid-template-columns: 1fr; }
  .mv-contact { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .mv-figure img, .mv-milestone__media img,
  .mv-card, .mv-pillar__icon, .mv-milestone__node { transition: none !important; }
  .mv-figure:hover img, .mv-milestone:hover .mv-milestone__media img { transform: none; }
}

/* ===== CTA SECTION ===== */
.cta-section {
  padding: 100px 24px;
  background: linear-gradient(135deg, #1a3a2a 0%, #0d2818 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(30,58,138,0.15), transparent 70%);
  top: -200px;
  right: -100px;
  pointer-events: none;
}

.cta-section::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(30,58,138,0.1), transparent 70%);
  bottom: -150px;
  left: -100px;
  pointer-events: none;
}

.cta-section .section-heading {
  color: var(--white);
  max-width: 600px;
  margin: 0 auto 16px;
}

.cta-section .section-subheading {
  color: rgba(255,255,255,0.7);
  margin: 0 auto 44px;
}

.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  .hero {
    padding-top: calc(var(--nav-height) + 60px);
    padding-bottom: 80px;
  }
  .hero__illustration {
    width: 80%;
    left: -10%;
    opacity: 0.35;
  }
  .trust-badges {
    gap: 16px;
  }
  .trust-badge {
    font-size: 11px;
  }
  .hero__ctas {
    flex-direction: column;
    gap: 12px;
  }
  .mission-vision {
    padding: 60px 16px;
  }
}

/* ===== Recolor fix: hero text on white background ===== */
.hero__headline { color: rgb(30, 58, 138); }
.hero__description { color: var(--text-body); }
.hero__content .scroll-indicator,
.hero__content .scroll-indicator * { color: var(--text-body); border-color: rgba(0,0,0,0.3); }


/* =====================================================================
   CORE SERVICES — premium redesign + slide-over drawer
   ===================================================================== */

/* ----- Section shell, soft decorative blobs ----- */
.services {
  padding: 110px 24px 96px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F8FE 45%, #F1F8F2 100%) !important;
  overflow: hidden;
}
.services .container { position: relative; z-index: 1; text-align: center; }
.services__decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.services__blob {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5;
}
.services__blob--a { width: 38vmax; height: 38vmax; top: -14%; left: -10%;
  background: radial-gradient(circle, rgba(167,227,153,0.55), transparent 70%); }
.services__blob--b { width: 34vmax; height: 34vmax; bottom: -16%; right: -10%;
  background: radial-gradient(circle, rgba(115,158,201,0.45), transparent 70%); }

/* ----- Section header ----- */
.section-label--leaf {
  display: inline-flex !important; align-items: center; gap: 8px;
}
.section-label__leaf { width: 15px; height: 15px; fill: var(--theme-secondary, #0B6E3B); opacity: 0.85; }
.section-label__leaf--flip { transform: scaleX(-1); }
.section-heading__accent {
  color: var(--theme-primary, #1E3A8A) !important;
  background: linear-gradient(120deg, #1E3A8A, #3E63C8);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.services .section-subheading { max-width: 640px; margin: 14px auto 0; }

/* ----- Grid ----- */
.services .services__grid {
  margin-top: 56px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 26px;
}
.services__grid .service-card.reveal { transition-delay: var(--rd, 0s); }

/* ----- Cards (override landing-redesign’s flat styling) ----- */
.services .service-card {
  --accent: #1E3A8A; --accent-soft: rgba(30,58,138,0.10); --accent-wash: #EAF0FB;
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 44px 26px 30px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(30, 58, 138, 0.10) !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 30px rgba(30, 58, 138, 0.06) !important;
  cursor: pointer;
  overflow: visible !important;
  transition: transform 0.4s cubic-bezier(0.22,0.7,0.2,1), box-shadow 0.4s ease, border-color 0.3s ease !important;
}
.services .service-card[data-accent="blue"]   { --accent:#1E3A8A; --accent-soft:rgba(30,58,138,0.10); --accent-wash:#EAF0FB; }
.services .service-card[data-accent="green"]  { --accent:#1F8A4D; --accent-soft:rgba(31,138,77,0.12); --accent-wash:#E7F5EC; }
.services .service-card[data-accent="violet"] { --accent:#6D5BD0; --accent-soft:rgba(109,91,208,0.12); --accent-wash:#EEEBFA; }

/* neutralise the old single-line ::after accent (replaced by __accent span) */
.services .service-card::after { display: none !important; }

/* top accent bar */
.service-card__accent {
  position: absolute; top: 0; left: 22px; right: 22px; height: 4px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff));
  transform: scaleX(0.5); opacity: 0.5;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.services .service-card:hover .service-card__accent,
.services .service-card.is-active .service-card__accent { transform: scaleX(1); opacity: 1; }

/* icon */
.services .service-card__icon {
  width: 66px; height: 66px; margin: 0 auto 20px !important;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50% !important;
  background: var(--accent-wash) !important;
  box-shadow: 0 6px 16px var(--accent-soft);
  transition: transform 0.4s cubic-bezier(0.22,0.7,0.2,1), background 0.35s ease, box-shadow 0.35s ease;
}
.services .service-card__icon svg { width: 30px; height: 30px; fill: var(--accent) !important; transition: fill 0.35s ease; }
.services .service-card:hover .service-card__icon,
.services .service-card.is-active .service-card__icon {
  background: var(--accent) !important;
  transform: translateY(-4px) scale(1.06) rotate(-3deg);
  box-shadow: 0 14px 28px var(--accent-soft);
}
.services .service-card:hover .service-card__icon svg,
.services .service-card.is-active .service-card__icon svg { fill: #fff !important; }

.services .service-card__title { font-size: 19px; margin-bottom: 12px !important; color: var(--theme-ink, #1B2230) !important; }
.services .service-card__text { font-size: 14px; line-height: 1.7; color: var(--theme-ink-body, #525E72) !important; margin-bottom: 20px; }

/* learn more */
.service-card__more {
  margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 14px; color: var(--accent);
}
.service-card__more svg { width: 16px; height: 16px; stroke: var(--accent); transition: transform 0.3s ease; }
.services .service-card:hover .service-card__more svg { transform: translateX(4px); }

/* hover lift + accent glow + active state */
.services .service-card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 26px 50px var(--accent-soft), 0 10px 24px rgba(30,58,138,0.08) !important;
  border-color: color-mix(in srgb, var(--accent) 40%, transparent) !important;
}
.services .service-card.is-active {
  border-color: var(--accent) !important;
  box-shadow: 0 18px 40px var(--accent-soft), 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent) !important;
}

/* ----- Section footer (divider + supportive line + CTA) ----- */
.services__footer { margin-top: 60px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.services__divider { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 320px; }
.services__divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(30,58,138,0.22), transparent); }
.services__divider-icon { width: 22px; height: 22px; fill: var(--theme-secondary, #0B6E3B); opacity: 0.85; }
.services__footer-text {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: clamp(20px, 3vw, 26px); font-style: italic; color: var(--theme-ink, #1B2230);
}
.services__cta { gap: 10px; }
.services__cta .btn__icon { width: 19px; height: 19px; fill: currentColor; }
.services__cta .btn__arrow { width: 18px; height: 18px; stroke: currentColor; transition: transform 0.3s ease; }
.services__cta:hover .btn__arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .services .service-card,
  .services .service-card__icon,
  .service-card__accent,
  .service-card__more svg { transition: none !important; }
}

/* =====================================================================
   SERVICE DRAWER (slide-over)
   ===================================================================== */
.svc-drawer {
  position: fixed; inset: 0; z-index: 4000;
  visibility: hidden; pointer-events: none;
}
.svc-drawer.is-open { visibility: visible; pointer-events: auto; }

.svc-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(16, 28, 56, 0.42);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.4s ease;
}
.svc-drawer.is-open .svc-drawer__backdrop { opacity: 1; }

.svc-drawer__panel {
  --accent: #1E3A8A; --accent-wash: #EAF0FB;
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(480px, 100%);
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-radius: 26px 0 0 26px;
  box-shadow: -24px 0 70px rgba(16, 28, 56, 0.22);
  transform: translateX(100%);
  transition: transform 0.46s cubic-bezier(0.22, 0.7, 0.2, 1);
  will-change: transform;
}
.svc-drawer.is-open .svc-drawer__panel { transform: translateX(0); }
.svc-drawer__panel[data-accent="blue"]   { --accent:#1E3A8A; --accent-wash:#EAF0FB; }
.svc-drawer__panel[data-accent="green"]  { --accent:#1F8A4D; --accent-wash:#E7F5EC; }
.svc-drawer__panel[data-accent="violet"] { --accent:#6D5BD0; --accent-wash:#EEEBFA; }

.svc-drawer__close {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  width: 38px; height: 38px; border: none; border-radius: 50%;
  background: rgba(16, 28, 56, 0.06); color: var(--theme-ink, #1B2230);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.svc-drawer__close:hover { background: rgba(16, 28, 56, 0.12); transform: rotate(90deg); }

.svc-drawer__scroll { flex: 1; overflow-y: auto; padding: 40px 38px 24px; -webkit-overflow-scrolling: touch; }

.svc-drawer__icon {
  width: 60px; height: 60px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-wash); margin-bottom: 18px;
}
.svc-drawer__icon svg { width: 30px; height: 30px; fill: var(--accent); }
.svc-drawer__title { font-family: var(--font-display, serif); font-size: 26px; color: var(--theme-ink, #1B2230); margin-bottom: 10px; }
.svc-drawer__lead { font-size: 15px; line-height: 1.65; color: var(--theme-ink-body, #525E72); }

.svc-block { margin-top: 26px; }
.svc-block__title {
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.svc-block__text { font-size: 14.5px; line-height: 1.7; color: var(--theme-ink-body, #525E72); }

.svc-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.svc-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--theme-ink, #1B2230); }
.svc-checklist svg { width: 19px; height: 19px; flex-shrink: 0; fill: var(--accent); margin-top: 1px; }

.svc-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.svc-tag {
  font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 999px;
  background: var(--accent-wash); color: color-mix(in srgb, var(--accent) 80%, #000 8%);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.svc-faqs { display: flex; flex-direction: column; gap: 10px; }
.svc-faq { border: 1px solid rgba(16, 28, 56, 0.10); border-radius: 14px; overflow: hidden; background: #fff; }
.svc-faq__q {
  width: 100%; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 16px; text-align: left; font-size: 14.5px; font-weight: 600;
  color: var(--theme-ink, #1B2230); font-family: inherit;
}
.svc-faq__chevron { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); transition: transform 0.3s ease; }
.svc-faq.is-open .svc-faq__chevron { transform: rotate(180deg); }
.svc-faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}
.svc-faq.is-open .svc-faq__a { grid-template-rows: 1fr; }
.svc-faq__a > p {
  overflow: hidden; margin: 0;
  padding: 0 16px; font-size: 14px; line-height: 1.65; color: var(--theme-ink-body, #525E72);
  transition: padding 0.32s ease;
}
.svc-faq.is-open .svc-faq__a > p { padding: 0 16px 15px; }

.svc-drawer__actions {
  flex-shrink: 0; padding: 18px 28px calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid rgba(16, 28, 56, 0.08);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.svc-drawer__actions .btn { width: 100%; gap: 10px; }
.svc-drawer__book { background: var(--accent) !important; box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 30%, transparent) !important; }
.svc-drawer__book:hover { filter: brightness(0.94); transform: translateY(-2px); }
.svc-drawer__book .btn__icon { width: 19px; height: 19px; fill: currentColor; }
.svc-drawer__book .btn__arrow { width: 18px; height: 18px; stroke: currentColor; transition: transform 0.3s ease; }
.svc-drawer__book:hover .btn__arrow { transform: translateX(4px); }
.svc-drawer__inquire {
  background: #fff !important; color: var(--theme-secondary, #0B6E3B) !important;
  border: 1.5px solid color-mix(in srgb, var(--theme-secondary, #0B6E3B) 45%, transparent) !important;
  box-shadow: none !important;
}
.svc-drawer__inquire:hover { background: rgba(11, 110, 59, 0.06) !important; transform: translateY(-2px); }
.svc-drawer__inquire .btn__icon { width: 19px; height: 19px; fill: currentColor; }

/* Mobile: drawer becomes a bottom sheet */
@media (max-width: 640px) {
  .svc-drawer__panel {
    top: auto; right: 0; left: 0; bottom: 0;
    width: 100%; height: 90vh;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -20px 60px rgba(16, 28, 56, 0.24);
    transform: translateY(100%);
  }
  .svc-drawer.is-open .svc-drawer__panel { transform: translateY(0); }
  .svc-drawer__scroll { padding: 38px 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-drawer__panel,
  .svc-drawer__backdrop,
  .svc-faq__a,
  .svc-faq__a > p { transition: none !important; }
}

/* =====================================================================
   HERO — FLOATING PHOTO WALL REDESIGN
   ===================================================================== */

/* Hide the old cycling blob-masked image layer */
.hero__images { display: none !important; }

/* ============================================================
   HERO LAYOUT — centered single-column
   ============================================================ */
.hero__layout {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: left;
}

.hero__layout .hero__content {
  text-align: left;
  max-width: 640px;
  margin: 0;
}
.hero__layout .hero__eyebrow     { justify-content: flex-start; }
.hero__layout .hero__description { margin-left: 0; margin-right: 0; }
.hero__layout .hero__ctas        { justify-content: flex-start; }

/* Desktop: shift the hero text to the left half so it sits beside (not over)
   the figure on the right. Mobile/tablet (figure hidden) stays centred. */
@media (min-width: 1200px) {
  .hero__layout {
    max-width: 1320px;
    margin: 0 auto;
    padding-left: clamp(48px, 6vw, 120px);
    padding-right: 24px;
    text-align: center;
  }
  .hero__layout .hero__content { text-align: center; max-width: 640px; margin: 0; }
  .hero__layout .hero__headline { font-size: clamp(48px, 5vw, 72px); }
  .hero__layout .hero__eyebrow     { justify-content: center; }
  .hero__layout .hero__description { justify-content: center; }
  .hero__layout .hero__ctas        { justify-content: center; }
}

/* ============================================================
   LIVING MEMORY BACKGROUND
   Free-form composition of clinic photos embedded in the
   mesh gradient — three depth layers with organic drift.
   ============================================================ */

/* Oversize container fills the section and carries the canvas drift —
   a slow translate + scale that moves the whole composition as one system */
.hero__memory-bg {
  position: absolute;
  inset: -60px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
  animation: bgBreathe 46s ease-in-out infinite;
}

/* Grouping layer — each layer carries its own slow opacity breath
   so the three depths feel like they're surfacing and receding */
.hero__mem-layer {
  position: absolute;
  inset: 0;
}

/* Deep layer: photos gently surface and recede — like memories coming into focus */
.hero__mem-layer:nth-child(1) {
  animation: deepSurface 38s ease-in-out infinite;
}

/* Near layer: subtle presence variation — one plane breathes on a different rhythm */
.hero__mem-layer:nth-child(3) {
  animation: nearPresence 29s ease-in-out infinite -7s;
}

/* Individual photo composition unit */
.hero__mem-photo {
  position: absolute;
  left: var(--mp-x, 10%);
  top: var(--mp-y, 10%);
  width: var(--mp-w, 22vmax);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* organic, non-circular silhouette */
  border-radius: 46% 54% 57% 43% / 52% 46% 54% 48%;
  /* feathered edge so photos melt into the gradient */
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 36%, transparent 68%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 36%, transparent 68%);
  /* static tilt: CSS rotate composes independently from the ambient transform */
  rotate: var(--mp-r, 0deg);
  /* ambient motion — each photo gets a unique path via CSS custom properties */
  animation: var(--mp-an, ambientA) var(--mp-dur, 60s) ease-in-out infinite;
  animation-delay: var(--mp-del, 0s);
}

.hero__mem-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* slight overscale prevents edge gaps during ambient motion */
  transform: scale(1.06);
}

/* ---- Depth layer treatments ---- */

/* Layer 1: Deep — large forms, very low opacity, heavy blur */
.hero__mem-layer:nth-child(1) .hero__mem-photo {
  filter: blur(10px) saturate(0.82);
  opacity: 0.14;
}

/* Layer 2: Mid — present but supportive */
.hero__mem-layer:nth-child(2) .hero__mem-photo {
  filter: blur(4px) saturate(0.92);
  opacity: 0.24;
}

/* Layer 3: Near — clearest, highest emotional weight */
.hero__mem-layer:nth-child(3) .hero__mem-photo {
  filter: blur(0.8px) saturate(1.0);
  opacity: 0.34;
}

/* ====================================================================
   AMBIENT MOTION KEYFRAMES
   6 organic paths — each follows a gentle, non-linear arc through
   4–5 positions with a subtle breathing scale.  All use translate3d
   (GPU only) and are slow enough to feel like water-surface reflections.
   ==================================================================== */

/* Canvas drift — the whole composition slowly wanders like light through water.
   Combines translate with a breathing scale so motion has depth not just sway. */
@keyframes bgBreathe {
  0%   { transform: translate3d(0,    0,    0) scale(1.000); }
  18%  { transform: translate3d(6px, -5px,  0) scale(1.008); }
  36%  { transform: translate3d(10px,  4px, 0) scale(1.016); }
  54%  { transform: translate3d(4px,  10px, 0) scale(1.013); }
  72%  { transform: translate3d(-5px,  6px, 0) scale(1.007); }
  88%  { transform: translate3d(-3px, -2px, 0) scale(1.003); }
  100% { transform: translate3d(0,    0,    0) scale(1.000); }
}

/* Path A — gentle north-east arc, settles back */
@keyframes ambientA {
  0%   { transform: translate3d(0,    0,    0) scale(1.000); }
  18%  { transform: translate3d(8px,  -7px, 0) scale(1.010); }
  38%  { transform: translate3d(13px,  3px, 0) scale(1.018); }
  58%  { transform: translate3d(5px,  11px, 0) scale(1.013); }
  78%  { transform: translate3d(-4px,  5px, 0) scale(1.006); }
  100% { transform: translate3d(0,    0,    0) scale(1.000); }
}

/* Path B — south-west then east loop */
@keyframes ambientB {
  0%   { transform: translate3d(0,     0,    0) scale(1.000); }
  22%  { transform: translate3d(-9px,  8px,  0) scale(1.012); }
  45%  { transform: translate3d(-5px, 15px,  0) scale(1.020); }
  68%  { transform: translate3d(5px,   9px,  0) scale(1.011); }
  88%  { transform: translate3d(4px,  -3px,  0) scale(1.004); }
  100% { transform: translate3d(0,     0,    0) scale(1.000); }
}

/* Path C — northward float then soft drift south */
@keyframes ambientC {
  0%   { transform: translate3d(0,     0,    0) scale(1.000); }
  28%  { transform: translate3d(5px,  -13px, 0) scale(1.014); }
  52%  { transform: translate3d(-3px, -10px, 0) scale(1.020); }
  74%  { transform: translate3d(-9px,  4px,  0) scale(1.009); }
  90%  { transform: translate3d(-3px,  7px,  0) scale(1.003); }
  100% { transform: translate3d(0,     0,    0) scale(1.000); }
}

/* Path D — west then south, slow breathing */
@keyframes ambientD {
  0%   { transform: translate3d(0,     0,    0) scale(1.000); }
  30%  { transform: translate3d(-11px, -4px, 0) scale(1.015); }
  56%  { transform: translate3d(-7px,  12px, 0) scale(1.022); }
  78%  { transform: translate3d(4px,   10px, 0) scale(1.011); }
  92%  { transform: translate3d(3px,  -2px,  0) scale(1.003); }
  100% { transform: translate3d(0,     0,    0) scale(1.000); }
}

/* Path E — south then east, inhale-exhale feel */
@keyframes ambientE {
  0%   { transform: translate3d(0,    0,    0) scale(1.000); }
  25%  { transform: translate3d(4px,  11px, 0) scale(1.011); }
  50%  { transform: translate3d(11px,  7px, 0) scale(1.019); }
  70%  { transform: translate3d(8px,  -5px, 0) scale(1.013); }
  88%  { transform: translate3d(1px,  -9px, 0) scale(1.004); }
  100% { transform: translate3d(0,    0,    0) scale(1.000); }
}

/* Path F — north-west wander, ripple-like */
@keyframes ambientF {
  0%   { transform: translate3d(0,     0,    0) scale(1.000); }
  20%  { transform: translate3d(-5px, -11px, 0) scale(1.010); }
  44%  { transform: translate3d(-13px, -4px, 0) scale(1.018); }
  64%  { transform: translate3d(-8px,   9px, 0) scale(1.016); }
  84%  { transform: translate3d(2px,    6px, 0) scale(1.006); }
  100% { transform: translate3d(0,     0,    0) scale(1.000); }
}

/* Depth layer opacity breath — photos surface and recede at different rhythms */
@keyframes deepSurface {
  0%,  100% { opacity: 1; }
  50%        { opacity: 0.68; }
}
@keyframes nearPresence {
  0%,  100% { opacity: 1; }
  50%        { opacity: 0.78; }
}

/* ====================================================================
   ATMOSPHERIC LIGHT LAYER
   Three drifting radial glows create "light through leaves" and
   water-reflection warmth.  Only transform is animated — GPU-only.
   ==================================================================== */
.hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;          /* above photos (DOM order), below .hero::before veil */
  pointer-events: none;
  overflow: hidden;
}

.hero__atmo-orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

/* Orb 1 — large warm sunlight, drifts east then south */
.hero__atmo-orb--1 {
  width: 72vmax;
  height: 72vmax;
  top: -28%;
  left: -18%;
  background: radial-gradient(circle at center,
    rgba(255, 251, 236, 0.058) 0%,
    rgba(255, 245, 200, 0.020) 45%,
    transparent 68%);
  animation: atmoOrb1 48s ease-in-out infinite;
}

/* Orb 2 — medium mint glow, brand warmth, south-east drift */
.hero__atmo-orb--2 {
  width: 58vmax;
  height: 58vmax;
  top: 8%;
  right: -18%;
  background: radial-gradient(circle at center,
    rgba(167, 227, 153, 0.044) 0%,
    rgba(100, 200, 120, 0.016) 45%,
    transparent 68%);
  animation: atmoOrb2 60s ease-in-out infinite -14s;
}

/* Orb 3 — smaller cool blue, depth accent, northward drift */
.hero__atmo-orb--3 {
  width: 46vmax;
  height: 46vmax;
  bottom: -8%;
  left: 22%;
  background: radial-gradient(circle at center,
    rgba(115, 158, 201, 0.040) 0%,
    rgba(80,  120, 180, 0.013) 45%,
    transparent 68%);
  animation: atmoOrb3 42s ease-in-out infinite -28s;
}

@keyframes atmoOrb1 {
  0%,  100% { transform: translate3d(0,    0,   0) scale(1.00); }
  28%        { transform: translate3d(7%,   5%,  0) scale(1.11); }
  60%        { transform: translate3d(-4%,  10%, 0) scale(0.93); }
  82%        { transform: translate3d(3%,   4%,  0) scale(1.04); }
}

@keyframes atmoOrb2 {
  0%,  100% { transform: translate3d(0,     0,   0) scale(1.00); }
  32%        { transform: translate3d(-9%,   7%,  0) scale(1.14); }
  68%        { transform: translate3d(5%,   -4%,  0) scale(0.89); }
  88%        { transform: translate3d(-2%,   2%,  0) scale(1.03); }
}

@keyframes atmoOrb3 {
  0%,  100% { transform: translate3d(0,     0,    0) scale(1.00); }
  38%        { transform: translate3d(4%,  -9%,   0) scale(1.09); }
  72%        { transform: translate3d(-7%,   4%,   0) scale(0.94); }
  90%        { transform: translate3d(-1%,  -1%,   0) scale(1.02); }
}

/* Mobile: hide atmo orbs (paint cost not worth it at small size) */
@media (max-width: 768px) {
  .hero__atmosphere { display: none; }
  .hero__mem-layer:nth-child(1),
  .hero__mem-layer:nth-child(3) { animation: none; }
}

/* =====================================================================
   HERO SIGNATURE FX — breathing ripples, luminous halo, rising particles.
   All sit at z-index 1: above the mesh (0), below the content (2), so the
   headline/subheadline/CTAs always stay the focal point. Motion is
   transform/opacity only; everything is disabled under reduced-motion.
   ===================================================================== */

/* Ambient layer = halo + ripples, centered on the hero (pointer-parallax target) */
.hero__ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}

/* Soft luminous halo that gently breathes in/out behind the headline */
.hero__halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(74vmin, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(210, 232, 255, 0.30) 34%,
    rgba(167, 227, 200, 0.14) 56%,
    transparent 72%);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) scale(1);
  animation: haloBreathe 9s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes haloBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.6; }
  50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

/* Concentric rings expanding + fading outward from center, staggered so one
   is always radiating — calm ripples of care. */
.hero__ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(37, 99, 235, 0.28);
  box-shadow: inset 0 0 28px rgba(22, 163, 74, 0.08);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  animation: rippleOut 12s ease-out infinite;
  will-change: transform, opacity;
}
.hero__ripple:nth-child(2) { animation-delay: 0s;  border-color: rgba(37, 99, 235, 0.30); }
.hero__ripple:nth-child(3) { animation-delay: 3s;  border-color: rgba(22, 163, 74, 0.26); }
.hero__ripple:nth-child(4) { animation-delay: 6s;  border-color: rgba(30, 58, 138, 0.24); }
.hero__ripple:nth-child(5) { animation-delay: 9s;  border-color: rgba(5, 150, 105, 0.24); }
@keyframes rippleOut {
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  8%   { opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
}

/* Faint particles drifting slowly upward */
.hero__particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero__particle {
  position: absolute;
  bottom: -6%;
  left: var(--px, 50%);
  width: var(--ps, 6px);
  height: var(--ps, 6px);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%,
    rgba(255, 255, 255, 0.95), rgba(167, 227, 200, 0.4) 60%, transparent 72%);
  opacity: 0;
  animation: particleRise var(--pd, 20s) linear infinite;
  animation-delay: var(--pdl, 0s);
  will-change: transform, opacity;
}
@keyframes particleRise {
  0%   { transform: translate3d(0, 0, 0);                          opacity: 0; }
  10%  {                                                            opacity: var(--po, 0.5); }
  50%  { transform: translate3d(var(--pdx, 10px), -46vh, 0); }
  90%  {                                                            opacity: var(--po, 0.5); }
  100% { transform: translate3d(0, -94vh, 0);                      opacity: 0; }
}

/* Mobile: trim particle count and ambient cost */
@media (max-width: 768px) {
  .hero__particle:nth-child(n + 7) { display: none; }
  .hero__halo { width: min(86vmin, 520px); }
}

/* Reduced motion: freeze the signature FX and show content statically */
@media (prefers-reduced-motion: reduce) {
  .hero__ambient,
  .hero__particles { display: none; }
  .hero__eyebrow-rule { transform: scaleX(1); animation: none !important; }
  .hero__eyebrow-icon { animation: none !important; }
  .scroll-indicator   { opacity: 0.6; animation: none !important; transform: translateX(-50%); }
  .hero__ctas .btn::after { display: none; }
}

/* =====================================================================
   HERO PATRON FIGURES — clear upper half-body images flanking BOTH sides
   so the hero is balanced and the side space is filled.
   • z-index 1: above the mesh/ambient (0–1) but BELOW the content (2),
     so the centred headline, subheadline and CTAs always read on top.
   • Height-capped to the viewport so heads are never clipped.
   • A two-axis mask fades the LOWER body into the mesh (only the upper /
     half body is seen) and softens the INNER edge toward the text.
   ===================================================================== */
.hero__figure {
  position: absolute;
  z-index: 1;
  bottom: 0;
  height: min(100vh, 900px);         /* large half-body */
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  filter: drop-shadow(0 20px 48px rgba(30, 58, 138, 0.16));
  animation: heroFigureRise 1.2s cubic-bezier(0.22, 0.7, 0.2, 1) 0.55s both,
             heroFigureFloat 9s ease-in-out 1.8s infinite;
  will-change: transform;
}
/* gentle luminous aura — soft so the figures stay calm background accents */
.hero__figure::before {
  content: '';
  position: absolute;
  inset: -6% 0 22% 0;
  z-index: -1;
  background: radial-gradient(ellipse 56% 50% at 50% 38%,
    rgba(255, 255, 255, 0.30), rgba(210, 232, 255, 0.12) 48%, transparent 74%);
  filter: blur(16px);
}
.hero__figure img {
  display: block;
  height: 100%;
  width: auto;
  opacity: 0.72;                 /* reduced visual dominance — text stays the focus */
  filter: saturate(0.98);        /* clear, but calmer so it blends with the mesh */
}

/* RIGHT figure: anchored right; shows head→waist, inner (left) edge fades to text */
.hero__figure--right {
  right: clamp(8px, 3vw, 64px);
  justify-content: flex-end;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0%, #000 56%, rgba(0,0,0,0) 82%),
    linear-gradient(to right, rgba(0,0,0,0) 0%, #000 38%);
          mask-image:
    linear-gradient(to bottom, #000 0%, #000 56%, rgba(0,0,0,0) 82%),
    linear-gradient(to right, rgba(0,0,0,0) 0%, #000 38%);
}

/* LEFT figure: exact twin — same size/fade, mirrored to face inward; inner
   (right) edge fades toward the text */
.hero__figure--left {
  left: clamp(8px, 3vw, 64px);
  justify-content: flex-start;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0%, #000 56%, rgba(0,0,0,0) 82%),
    linear-gradient(to right, #000 0%, #000 62%, rgba(0,0,0,0) 100%);
          mask-image:
    linear-gradient(to bottom, #000 0%, #000 56%, rgba(0,0,0,0) 82%),
    linear-gradient(to right, #000 0%, #000 62%, rgba(0,0,0,0) 100%);
}
.hero__figure--left img { transform: scaleX(-1); }   /* face toward the centre */

@keyframes heroFigureRise {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFigureFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Only show the figures where there is real room beside the centred text
   (their width is bounded by the height cap, so they stay in the margins). */
@media (max-width: 1199px) {
  .hero__figure { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__figure { animation: none !important; }
}