/* ==========================================================================
   HOME PAGE — hero, stats, services, why-us, process, team, testimonials,
   case studies, blog, accreditations, faq, cta banner, contact preview
   ========================================================================== */

/* ==========================================================================
   HERO
   Signature element: a goniometer-style gauge (physiotherapy's own range-of-
   motion instrument) replaces the generic "stat card stack" hero visual.
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--white) 0%, var(--mist) 100%);
  padding-block: clamp(2.5rem, 3vw, 4rem) clamp(2.5rem, 3vw, 4rem);
}

.hero__bg-ring {
  position: absolute;
  top: 50%; right: -20%;
  width: min(1140px, 92vw);
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 1px dashed var(--border-strong);
  opacity: 0.6;
  pointer-events: none;
}
.hero__bg-ring::before {
  content: '';
  position: absolute; inset: 13%;
  border-radius: 50%;
  border: 1px dashed var(--border-soft);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: start;
  gap: clamp(2rem, 4vw, 4rem);
  position: relative;
  z-index: 1;
}

.hero__title {
  margin-top: 1rem;
  font-size: var(--fs-4xl);
  line-height: 0.98;
}
.hero__title-line { display: block; overflow: hidden; }
.hero__title-inner { display: block; will-change: transform; }

.hero__lede {
  margin-top: var(--space-md);
  max-width: 48ch;
  font-size: var(--fs-md);
  color: var(--gray-500);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: var(--space-xl); }
.hero__cta .btn { width: 348px; justify-content: center; height: 58px; }
.hero__cta--compact .btn { width: 246px; height: 50px; }
@media (max-width: 400px) {
  .hero__cta .btn, .hero__cta--compact .btn { width: 100%; }
}

.hero__trust {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem;
  margin-top: var(--space-xl);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.hero__trust strong { color: var(--ink-navy); font-weight: 700; }
.hero__trust-divider { width: 1px; height: 16px; background: var(--border-strong); }

.hero__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 460px; }

/* ---- Hero photo gallery ---------------------------------------------------
   4 real clinic-style photos auto-crossfade behind the grain overlay so the
   duotone/brand treatment still reads as "us", not stock. Pure CSS — no JS —
   using staggered animation-delay per slide so they hand off to one another
   in a continuous loop. Swap the image URLs for real in-house photography
   whenever it's ready (see README). --------------------------------------*/
.hero__visual-dotgrid {
  position: absolute;
  top: -4%; left: 2%;
  width: 84px; height: 84px;
  background-image: radial-gradient(var(--gold) 1.6px, transparent 1.6px);
  background-size: 14px 14px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

.hero__gallery {
  position: relative;
  width: min(440px, 84vw);
  aspect-ratio: 0.86;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(160deg, var(--brand-navy-2) 0%, var(--ink-navy) 100%);
  z-index: 1;
}

.hero__gallery-slide {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: heroGallerySlide 16s ease-in-out infinite;
}
.hero__gallery::after {
  /* brand duotone wash so the photos share the site's navy/gold palette */
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(circle at 20% 15%, rgba(228, 200, 120, 0.32), transparent 42%),
    radial-gradient(circle at 85% 82%, rgba(44, 108, 176, 0.5), transparent 48%),
    linear-gradient(160deg, rgba(11,38,71,0.55) 0%, rgba(11,38,71,0.72) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

@keyframes heroGallerySlide {
  0%   { opacity: 0; transform: scale(1.06); }
  4%   { opacity: 1; }
  21%  { opacity: 1; transform: scale(1); }
  25%  { opacity: 0; transform: scale(0.99); }
  100% { opacity: 0; }
}

.hero__photo-grain {
  position: absolute; inset: 0; z-index: 2;
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__gallery-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: baseline; gap: 0.6em;
  padding: 1.4rem 1.6rem 1.6rem;
  background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, transparent 100%);
}
.hero__photo-caption-value {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--white);
  line-height: 1;
}
.hero__photo-caption-label {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.8);
  line-height: 1.3;
  max-width: 14ch;
}

.hero__gallery-dots {
  position: absolute; top: 1.1rem; right: 1.2rem; z-index: 3;
  display: flex; gap: 6px;
}
.hero__gallery-dots span {
  width: 5px; height: 5px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.35);
  animation: heroGalleryDot 16s ease-in-out infinite;
}
@keyframes heroGalleryDot {
  0%   { background: rgba(255,255,255,0.35); width: 5px; }
  4%   { background: var(--gold); width: 14px; }
  21%  { background: var(--gold); width: 14px; }
  25%  { background: rgba(255,255,255,0.35); width: 5px; }
  100% { background: rgba(255,255,255,0.35); width: 5px; }
}

.hero__gallery:hover .hero__gallery-slide,
.hero__gallery:hover .hero__gallery-dots span { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hero__gallery-slide, .hero__gallery-dots span { animation: none; opacity: 0; }
  .hero__gallery-slide:first-of-type { opacity: 1; }
  .hero__gallery-dots span:first-child { background: var(--gold); width: 14px; }
}

.hero__chip { position: absolute; width: 240px; z-index: 3; }
.hero__chip .glass-chip__label,
.hero__chip .glass-chip__value { white-space: nowrap; }
.hero__chip--1 { top: 3%; left: -8%; }
.hero__chip--2 { bottom: 20%; left: -14%; }
.hero__chip--3 { bottom: -3%; right: -6%; }


@media (max-width: 1180px) {
  .hero__chip--1 { left: -2%; }
  .hero__chip--2 { left: -4%; }
  .hero__chip--3 { right: -2%; }
}

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__lede { margin-inline: auto; }
  .hero__cta, .hero__trust { justify-content: center; }
  .hero__visual { margin-top: var(--space-2xl); min-height: 420px; }
  .hero__bg-ring { right: -40%; opacity: 0.4; }
}

@media (max-width: 560px) {
  .hero__chip { position: static; width: 100%; max-width: 320px; }
  .hero__visual { flex-direction: column; gap: var(--space-md); }
  .hero__visual-dotgrid { display: none; }
}

/* ==========================================================================
   HERO SCROLL CUE
   ========================================================================== */
.hero__scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: clamp(2.25rem, 3.5vw, 3.25rem) auto 0;
  color: var(--gray-500);
  position: relative;
  z-index: 1;
  transition: opacity var(--dur-base) var(--ease-out);
}
.hero__scroll-cue-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.hero__scroll-cue-mouse {
  width: 25px; height: 38px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-strong);
  display: flex;
  justify-content: center;
  padding-top: 7px;
}
.hero__scroll-cue-dot {
  width: 4px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--gold);
  animation: scrollCueDrop 1.8s var(--ease-in-out) infinite;
}
@keyframes scrollCueDrop {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(11px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-cue-dot { animation: none; }
}
@media (max-width: 640px) {
  .hero__scroll-cue { margin-top: 1.75rem; }
}

/* ==========================================================================
   STATS BAND
   A bento-style "clinical dashboard" moment: one spotlight metric (the stat
   A tight row of small ring dials (reusing the .dial component + the
   generic sweep/counter engine in js/animations.js) over a faint
   goniometer-arc + dot-grid backdrop that echoes the brand's
   range-of-motion motif. Deliberately compact — this band is a supporting
   beat between the hero and the services section, not a destination.
   ========================================================================== */
.stats-band {
  background: var(--gradient-navy);
  padding-block: clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
  position: relative;
  overflow: hidden;
}

/* ---- Decorative backdrop ------------------------------------------------*/
.stats-band__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.stats-band__bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 30%, black 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 90% 75% at 50% 30%, black 15%, transparent 72%);
}
.stats-band__glow { position: absolute; border-radius: 50%; filter: blur(90px); }
.stats-band__glow--a { width: 480px; height: 480px; background: var(--gold); opacity: 0.28; top: -230px; right: -130px; }
.stats-band__glow--b { width: 420px; height: 420px; background: var(--signal-blue); opacity: 0.22; bottom: -240px; left: -110px; }
.stats-band__arc { position: absolute; right: -6%; bottom: -14%; width: min(42vw, 560px); height: auto; color: var(--gold); opacity: 0.09; }
.stats-band__arc-needle { transform-box: fill-box; transform-origin: bottom center; animation: gonioSweep 9s var(--ease-in-out) infinite; }
@keyframes gonioSweep {
  0%, 100% { transform: rotate(-14deg); }
  50%      { transform: rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) { .stats-band__arc-needle { animation: none; } }
@media (max-width: 900px) { .stats-band__arc { display: none; } }

/* ---- Head (compact — tag only, no heading, to keep this band short) ------*/
.stats-band__head {
  position: relative; z-index: 1;
  max-width: 620px;
  margin: 0 auto clamp(2.5rem, 2rem + 2vw, 3.5rem);
  text-align: center;
}
.stats-band__head--compact { margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.stats-band__tag {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.55em 1.15em;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin-bottom: var(--space-md);
}
.stats-band__heading {
  font-size: var(--fs-xl);
  color: var(--white);
}

/* ---- Stat dials -----------------------------------------------------------
   One tight, single-line row of small ring dials — the same visual language
   as the .dial component elsewhere on the site, just scaled way down so the
   whole band stays shallow. The center stat (Patient Satisfaction) gets a
   half-step-larger ring and a gold label to read as the headline figure
   without pulling the section's height up. Wraps to two rows below ~760px,
   never scrolls. Ring fill + counters are driven entirely by the existing
   initDials()/ScrollTrigger engine in js/animations.js — no new JS. -------*/
.stats-dials {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  column-gap: clamp(1.75rem, 4vw, 3.5rem);
  row-gap: clamp(1.5rem, 3vw, 2rem);
  max-width: 900px;
  margin-inline: auto;
}

.stat-dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: 128px;
  text-align: center;
}

.stat-dial__label {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.62);
  line-height: 1.3;
}
.stat-dial--feature .stat-dial__label { color: var(--gold-light); font-weight: 500; }

/* Compact ring sizes layered on top of the base .dial component */
.dial--sm { width: 92px; height: 92px; }
.dial--sm circle { stroke-width: 5.5; }
.dial--sm .dial__value { font-size: var(--fs-md); font-weight: 700; }

.dial--md { width: 116px; height: 116px; }
.dial--md circle { stroke-width: 6; }
.dial--md .dial__value { font-size: var(--fs-lg); font-weight: 700; }

@media (max-width: 640px) {
  .stats-dials { column-gap: clamp(1.1rem, 6vw, 1.75rem); row-gap: 1.75rem; }
  .stat-dial { width: 100px; }
  /* every ring the same size on phones — the feature dial (98%) no longer
     gets a bigger .dial--md ring here, so all 5 circles match exactly */
  .dial--sm,
  .dial--md {
    width: 74px;
    height: 74px;
  }
  .dial--sm circle,
  .dial--md circle { stroke-width: 5.5; }
  .dial--sm .dial__value,
  .dial--md .dial__value { font-size: var(--fs-sm); font-weight: 700; }
  .stat-dial__label { font-size: 0.72rem; }
}


/* ==========================================================================
   SERVICES — "What We Treat"
   A sticky brand-panel beside an expandable program index, rather than a
   generic icon-card grid. Reuses the site's existing .accordion-item engine
   (js/ui.js) so no extra JS is needed — only the visual skin is new.
   ========================================================================== */
.programs__grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: clamp(2.5rem, 4vw, 5rem);
  align-items: start;
}
@media (max-width: 960px) {
  .programs__grid { grid-template-columns: 1fr; }
}

/* ---- Aside brand card --------------------------------------------------*/
.programs__aside { position: sticky; top: 120px; }
@media (max-width: 960px) { .programs__aside { position: static; } }

.programs__aside-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--gradient-navy);
  padding: clamp(2rem, 3vw, 2.75rem);
  box-shadow: var(--shadow-lg);
}
.programs__aside-card::after {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(circle at 18% 0%, rgba(255,255,255,0.12), transparent 60%);
}
.programs__aside-card > * { position: relative; z-index: 1; }

.programs__aside-arc {
  position: absolute;
  right: -55px; bottom: -55px;
  width: 280px; height: 280px;
  color: rgba(255,255,255,0.12);
  z-index: 0;
  pointer-events: none;
}

.programs__aside-card h2 {
  color: var(--white);
  font-size: var(--fs-xl);
  margin-top: 0.7em;
}
.programs__aside-lede {
  margin-top: var(--space-sm);
  color: rgba(255,255,255,0.66);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

.programs__aside-facts {
  display: flex;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,0.14);
}
.programs__aside-facts div { display: flex; flex-direction: column; gap: 0.3em; }
.programs__aside-facts span {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--gold-light);
}
.programs__aside-facts div {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.58);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.programs__aside-card .btn { margin-top: var(--space-xl); width: 100%; }

/* ---- Program list (skins the shared .accordion-item engine) ------------*/
.programs__list { border-top: 1px solid var(--border-soft); }
.programs__list .accordion-item {
  position: relative;
  border-bottom: 1px solid var(--border-soft);
  padding-inline: var(--space-md);
  margin-inline: calc(var(--space-md) * -1);
  border-radius: var(--radius-sm);
  transition: background var(--dur-base) var(--ease-out);
}
.programs__list .accordion-item:hover,
.programs__list .accordion-item.is-open { background: var(--mist); }

.programs__list .accordion-item__trigger { padding-block: 1.6rem; gap: var(--space-md); }

.program-item__main {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  text-align: left;
  min-width: 0;
  flex: 1;
}

.program-item__index {
  flex-shrink: 0;
  width: 30px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--gold-deep);
  opacity: 0.55;
  transition: opacity var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.programs__list .accordion-item:hover .program-item__index,
.programs__list .accordion-item.is-open .program-item__index { opacity: 1; }

.program-item__icon-box {
  flex-shrink: 0;
  width: 54px; height: 54px;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.program-item__icon-box svg, .program-item__icon-box i {
  width: 24px; height: 24px;
  color: var(--brand-navy);
  transition: color var(--dur-base) var(--ease-out);
}
.programs__list .accordion-item:hover .program-item__icon-box,
.programs__list .accordion-item.is-open .program-item__icon-box {
  background: var(--gradient-gold); border-color: transparent;
}
.programs__list .accordion-item:hover .program-item__icon-box svg,
.programs__list .accordion-item.is-open .program-item__icon-box svg { color: var(--ink-navy); }

.program-item__title-block { display: flex; flex-direction: column; gap: 0.3em; min-width: 0; }
.program-item__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--ink-navy);
  transition: color var(--dur-base) var(--ease-out);
}
.programs__list .accordion-item.is-open .program-item__title { color: var(--gold-deep); }
.program-item__tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--gray-500);
}

.programs__list .accordion-item__panel-inner {
  padding-left: calc(30px + 54px + 1.5rem + 1.5rem);
  padding-bottom: 2.25rem;
  max-width: 620px;
}
.program-item__points { margin: 1rem 0 1.3rem; display: flex; flex-direction: column; gap: 0.6rem; }
.program-item__points li {
  display: flex; align-items: flex-start; gap: 0.65em;
  font-size: var(--fs-sm); color: var(--ink-soft);
}
.program-item__points li::before {
  content: '';
  width: 5px; height: 5px; margin-top: 0.5em;
  border-radius: 50%; background: var(--gold);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .program-item__tagline { display: none; }
  .program-item__icon-box { width: 44px; height: 44px; }
  .program-item__icon-box svg, .program-item__icon-box i { width: 20px; height: 20px; }
  .programs__list .accordion-item__panel-inner { padding-left: 0; }
}
@media (max-width: 420px) {
  .program-item__index { display: none; }
}

/* ==========================================================================
   WHY CHOOSE US
   ========================================================================== */
.why-us__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
}

/* ---- Video panel --------------------------------------------------------*/
.why-us__visual { position: relative; }
.why-us__video-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-lg);
  background: var(--gradient-navy);
}
.why-us__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.01);
}
.why-us__video-frame::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(circle at 18% 12%, rgba(228, 200, 120, 0.25), transparent 45%),
    linear-gradient(195deg, rgba(11,38,71,0.1) 0%, rgba(11,38,71,0.6) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.why-us__play {
  position: absolute; inset: 0; margin: auto; z-index: 2;
  width: 78px; height: 78px;
  border: 0; cursor: pointer;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-base) var(--ease-out);
}
.why-us__play-ring {
  position: absolute; inset: -1px; z-index: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.6);
  animation: whyUsPlayPulse 2.6s ease-out infinite;
}
@keyframes whyUsPlayPulse {
  0%   { transform: scale(1); opacity: 0.85; }
  100% { transform: scale(1.6); opacity: 0; }
}
.why-us__visual:hover .why-us__play,
.why-us__play:focus-visible { transform: scale(1.08); }
.why-us__play svg { position: relative; z-index: 1; width: 22px; height: 22px; color: var(--brand-navy); margin-left: 3px; }

.why-us__video-caption {
  position: absolute; left: 1.5rem; bottom: 1.5rem; z-index: 2;
  display: flex; align-items: center; gap: 0.6em;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em;
  color: var(--white);
  text-transform: uppercase;
}

.why-us__chip {
  position: absolute; z-index: 3;
  bottom: -1.3rem; right: -1.1rem;
  width: 206px;
}

/* ---- Content column ------------------------------------------------------*/
.why-us__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg) var(--space-md);
  margin-top: var(--space-xl);
}
.why-us__item { display: flex; gap: var(--space-sm); }
.why-us__item-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.why-us__item:hover .why-us__item-icon { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.why-us__item-icon svg { width: 20px; height: 20px; color: var(--gold-deep); }
.why-us__item h3 { font-size: var(--fs-base); margin-bottom: 0.3em; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em; }
.why-us__item p { font-size: var(--fs-xs); color: var(--gray-500); line-height: 1.5; }

.why-us__tag {
  font-family: var(--font-body);
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--gold-deep);
  background: rgba(198, 154, 70, 0.14);
  border-radius: var(--radius-full);
  padding: 0.22em 0.6em;
  line-height: 1;
}

/* ---- Home-service banner --------------------------------------------------*/
.why-us__home-banner {
  display: flex; gap: var(--space-sm); align-items: flex-start;
  margin-top: var(--space-xl);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--white);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}
.why-us__home-banner-icon {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--gradient-gold);
  display: flex; align-items: center; justify-content: center;
}
.why-us__home-banner-icon i { width: 21px; height: 21px; color: var(--ink-navy); }
.why-us__home-banner strong { font-family: var(--font-display); font-size: var(--fs-base); color: var(--ink-navy); }
.why-us__home-banner p { font-size: var(--fs-xs); color: var(--gray-500); margin-top: 0.25em; line-height: 1.55; max-width: 48ch; }

@media (max-width: 900px) {
  .why-us__inner { grid-template-columns: 1fr; }
  .why-us__visual { max-width: 420px; margin-inline: auto; }
  .why-us__list { grid-template-columns: 1fr; }
  .why-us__chip { position: static; width: 100%; max-width: 300px; margin: 1.3rem auto 0; }
}

@media (prefers-reduced-motion: reduce) {
  .why-us__play-ring { animation: none; opacity: 0.6; }
}

/* ==========================================================================
   PROCESS
   Editorial two-column layout: a numbered step list with a scroll-filled
   connecting line on the left, a real session photo carrying two floating
   glass-chip readouts on the right. Mirrors the hero's content/visual
   rhythm so the section reads as native to the site, not bolted on.
   ========================================================================== */
.process { position: relative; overflow: hidden; }

.process__dotgrid {
  position: absolute;
  top: 6%; right: 3%;
  width: 96px; height: 96px;
  background-image: radial-gradient(var(--gold) 1.6px, transparent 1.6px);
  background-size: 15px 15px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

.process__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 0.86fr;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5.5rem);
}
/* Grid/flex items default to min-width:auto, which lets a long balanced
   heading or a fixed-width photo force the track wider than its container
   on narrow screens. Pin every level back down to its track/flexbasis. */
.process__grid > * { min-width: 0; }

.process__lede {
  margin-top: var(--space-md);
  max-width: 46ch;
  font-size: var(--fs-md);
  color: var(--gray-500);
}

/* ---- Step list ------------------------------------------------------------*/
.process__list {
  position: relative;
  margin-top: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.process__step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  min-width: 0;
}
.process__step > * { min-width: 0; }
.process__num {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--border-strong);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--brand-navy);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.process__step:hover .process__num {
  border-color: var(--gold);
  background: var(--gradient-gold);
  color: var(--ink-navy);
  box-shadow: var(--shadow-gold);
}
.process__step-body { padding-top: 0.55em; }
.process__step-body h3 { font-size: var(--fs-md); margin-bottom: 0.35em; }
.process__step-body p { font-size: var(--fs-sm); color: var(--gray-500); line-height: 1.55; max-width: 38ch; }

/* Connecting timeline: a static dashed guide with a gold gradient fill that
   grows via scroll-scrub (see js/pages/home.js initProcessTimeline) — a
   quiet nod to the "recovery journey" theme rather than a literal progress bar. */
.process__line {
  position: absolute;
  top: 23px; bottom: 23px; left: 23px;
  width: 1.5px;
  background: var(--border-strong);
  z-index: 0;
  transform: translateX(-0.75px);
}
.process__line-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0%;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  transform-origin: top;
}

/* ---- Visual: photo + floating readouts ------------------------------------*/
.process__visual { position: relative; display: flex; align-items: center; justify-content: center; }

/* Solid brand-gradient backdrop shape (rounded square, one corner cut) that
   sits behind the photo and peeks out bottom-right — the section's answer
   to a plain drop-shadow, without borrowing anyone else's exact motif. */
.process__shape {
  position: absolute;
  top: -9%; right: -13%;
  width: 84%; aspect-ratio: 1;
  transform: rotate(-4deg);
  opacity: 0.9;
  filter: drop-shadow(0 20px 40px rgba(150, 112, 43, 0.22));
  pointer-events: none;
  z-index: 0;
}
.process__ringmark {
  position: absolute;
  bottom: -10%; left: -10%;
  width: 40%; aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed var(--border-strong);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

.process__photo {
  position: relative;
  z-index: 1;
  width: min(400px, 78vw);
  aspect-ratio: 0.82;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
  background: linear-gradient(160deg, var(--brand-navy-2) 0%, var(--ink-navy) 100%);
}
.process__photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(11,38,71,0.12) 0%, transparent 40%, rgba(11,38,71,0.28) 100%);
  pointer-events: none;
}
.process__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.process__card {
  position: absolute;
  z-index: 3;
  width: 226px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.95em 1.1em;
}
.process__card--session { top: 4%; left: -15%; }
.process__card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4em 0.6em; flex-wrap: wrap; }
.process__card-top strong { font-size: var(--fs-xs); color: var(--ink-navy); line-height: 1.3; white-space: nowrap; }
.process__card-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: #2E9E5B; flex-shrink: 0;
}
.process__card-meta {
  display: flex; align-items: center; gap: 0.9em;
  margin-top: 0.6em;
  font-size: 0.7rem; color: var(--gray-500);
}
.process__card-meta span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.process__card-meta svg { color: var(--gold-deep); flex-shrink: 0; }

.process__card--progress {
  width: 200px;
  top: 6%; right: -12%;
  padding: 0.75em 1.05em;
}
.dial--xs { width: 52px; height: 52px; flex-shrink: 0; }
.dial--xs circle { stroke-width: 6; }
.dial--xs .dial__value { font-size: 0.72rem; font-weight: 700; }
.dial--on-light .dial__track { stroke: var(--mist-deep); }
.dial--on-light .dial__value { color: var(--ink-navy); }

/* ---- Mini sparkline chart card ---------------------------------------------*/
.process__card--chart { bottom: -7%; left: -12%; width: 210px; padding: 1em 1.1em 0.85em; }
.process__chart-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6em;
  margin-bottom: 0.7em;
}
.process__chart-title { font-size: 0.72rem; font-weight: 600; color: var(--ink-navy); }
.process__chart-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.62rem; font-weight: 600; color: #2E9E5B;
  white-space: nowrap;
}
.process__chart-svg { width: 100%; height: 44px; display: block; overflow: visible; }
.process__chart-line { fill: none; stroke: var(--gold-deep); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.process__chart-dot { fill: var(--gold); stroke: var(--white); stroke-width: 1.5; }

@media (max-width: 1180px) {
  .process__card--session { left: -6%; }
  .process__card--progress { right: -4%; }
  .process__card--chart { left: -4%; }
}

@media (max-width: 980px) {
  .process__grid { grid-template-columns: 1fr; }
  .process__content { text-align: center; }
  .process__lede { margin-inline: auto; }
  .process__list { margin-top: var(--space-xl); text-align: left; max-width: 480px; margin-inline: auto; }
  .process__visual { margin-top: var(--space-2xl); }
  .process__dotgrid { display: none; }
  .process__card--session { left: -2%; }
  .process__card--progress { right: -2%; }
  .process__card--chart { left: -2%; }
}

@media (max-width: 560px) {
  .process__visual { flex-direction: column; gap: var(--space-md); }
  .process__card { position: static; width: 100%; max-width: 300px; margin: 0; }
  .process__photo { width: min(340px, 84vw); }
  .process__shape, .process__ringmark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .process__card.anim-float, .process__card.anim-float-sm { animation: none; }
}

/* ==========================================================================
   TEAM PREVIEW — specialist cards
   ========================================================================== */

/* ---- Credential strip under the section intro --------------------------*/
.team-preview__meta {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 0.85em;
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.team-preview__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

/* ---- Card shell ----------------------------------------------------------*/
.specialist-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
}
.specialist-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }

/* ---- Photo band / monogram --------------------------------------------- */
.specialist-card__photo {
  position: relative;
  aspect-ratio: 4 / 3.6;
  background: var(--gradient-navy);
  overflow: hidden;
  isolation: isolate;
}
.specialist-card__photo::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(circle at 26% 16%, rgba(255,255,255,0.18), transparent 62%);
}
.specialist-card:nth-child(even) .specialist-card__photo {
  background: linear-gradient(160deg, var(--signal-blue) 0%, var(--brand-navy) 55%, var(--ink-navy) 100%);
}

/* the goniometer / range-of-motion arc — recurring brand motif */
.specialist-card__arc {
  position: absolute; right: -14px; bottom: -14px;
  width: 56%; height: 56%;
  opacity: 0.14;
  z-index: 1;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.specialist-card:hover .specialist-card__arc { opacity: 0.22; transform: rotate(4deg) scale(1.04); }

.specialist-card__initials {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.6rem + 1vw, 2.4rem);
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.01em;
  transition: transform var(--dur-slow) var(--ease-out);
}
.specialist-card:hover .specialist-card__initials { transform: scale(1.05); }

.specialist-card__tag {
  position: absolute; left: var(--space-sm); bottom: var(--space-sm); z-index: 3;
  display: inline-flex; align-items: center;
  padding: 0.5em 1em;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.7);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-deep);
  box-shadow: var(--shadow-md);
}

.specialist-card__rating {
  position: absolute; top: var(--space-sm); right: var(--space-sm); z-index: 3;
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.4em 0.7em;
  border-radius: var(--radius-full);
  background: rgba(11,38,71,0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--white);
}
.specialist-card__rating svg { color: var(--gold-light); flex-shrink: 0; }

/* ---- Body -----------------------------------------------------------------*/
.specialist-card__body {
  position: relative;
  padding: var(--space-md) var(--space-md) var(--space-lg);
  text-align: left;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.specialist-card__heading {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-xs);
}
.specialist-card__body h3 { font-size: var(--fs-md); margin: 0; }
.specialist-card__index {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--gray-300);
  flex-shrink: 0;
}
.specialist-card__body .role {
  display: block; margin: 0.15em 0 0.75em;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.03em;
  color: var(--gold-deep);
}
.specialist-card__creds {
  display: flex; flex-wrap: wrap; gap: 0.4em;
  margin-bottom: 0.85em;
}
.specialist-card__creds span {
  padding: 0.3em 0.65em;
  border-radius: var(--radius-full);
  background: var(--mist);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.specialist-card__body .bio { font-size: var(--fs-sm); color: var(--gray-500); line-height: 1.6; margin-bottom: var(--space-sm); }

.specialist-card__quote {
  display: flex; align-items: flex-start; gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-soft);
  padding: var(--space-sm);
  margin: 0 0 var(--space-md);
  background: var(--mist);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  flex: 1;
}
.specialist-card__quote svg { flex-shrink: 0; margin-top: 0.15em; color: var(--gold); }

.specialist-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-soft);
}
.specialist-card__link {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--brand-navy);
}
.specialist-card__link svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-out); }
.specialist-card__link:hover { color: var(--gold-deep); }
.specialist-card__link:hover svg { transform: translateX(4px); }

.specialist-card__socials { display: flex; gap: 0.4rem; }
.specialist-card__socials a {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--mist);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.specialist-card__socials svg { width: 12px; height: 12px; color: var(--ink-soft); transition: color var(--dur-fast) var(--ease-out); }
.specialist-card__socials a:hover { background: var(--gradient-gold); transform: translateY(-2px); }
.specialist-card__socials a:hover svg { color: var(--ink-navy); }

@media (max-width: 640px) {
  .specialist-card__photo { aspect-ratio: 16 / 11; }
}

/* ==========================================================================
   TESTIMONIALS — auto-scrolling marquee of quote chips
   ========================================================================== */
.marquee {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 46s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  gap: var(--space-md);
  padding: 0.5rem var(--space-md) 0.5rem 0;
  flex-shrink: 0;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ---- Quote chip card ------------------------------------------------------*/
.t-chip {
  flex: 0 0 clamp(280px, 30vw, 360px);
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2vw, 1.85rem);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.t-chip:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }

.t-chip__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
.t-chip__quote-icon { color: var(--gold-light); }

.t-chip__quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-navy);
  margin-bottom: var(--space-md);
  flex: 1;
}

.t-chip__author { display: flex; align-items: center; gap: 0.75rem; padding-top: var(--space-sm); border-top: 1px solid var(--border-soft); }
.t-chip__name { font-weight: 700; color: var(--ink-navy); font-size: var(--fs-sm); }
.t-chip__meta { font-size: var(--fs-xs); color: var(--gray-500); margin-top: 0.1rem; }

/* ==========================================================================
   CASE STUDIES PREVIEW
   ========================================================================== */
/* ---- Case study cards ------------------------------------------------------
   Real photography (Pexels, brand-washed to match the site's duotone —
   same treatment as the hero gallery) instead of icon-on-gradient
   placeholders. A glass tag sits top-left on the image; the headline
   outcome (duration/approach) reads like a caption baked into the bottom
   of the frame, mono numerals in gold. Photo scales gently on hover. ------*/
.case-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.case-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }

.case-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  isolation: isolate;
}
.case-card__photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.case-card:hover .case-card__photo { transform: scale(1.07); }

/* brand duotone wash so the photos read as "us", not stock — varies per
   category to keep the original navy/blue/gold color-coding */
.case-card__tint { position: absolute; inset: 0; z-index: 1; mix-blend-mode: multiply; pointer-events: none; }
.case-card--a .case-card__tint { background: linear-gradient(165deg, rgba(29,84,148,0.32) 0%, rgba(11,38,71,0.5) 100%); }
.case-card--b .case-card__tint { background: linear-gradient(165deg, rgba(44,108,176,0.34) 0%, rgba(21,67,121,0.48) 100%); }
.case-card--c .case-card__tint { background: linear-gradient(165deg, rgba(198,154,70,0.34) 0%, rgba(11,38,71,0.56) 100%); }

/* scrim so the tag/metric stay legible over any photo */
.case-card__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgba(6,20,38,0.9) 0%, rgba(6,20,38,0.22) 45%, transparent 68%),
              linear-gradient(180deg, rgba(6,20,38,0.45) 0%, transparent 30%);
}
.case-card__grain {
  position: absolute; inset: 0; z-index: 3; opacity: 0.25; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.case-card__tag {
  position: absolute; top: 1.1rem; left: 1.1rem; z-index: 4;
  display: inline-flex; align-items: center;
  padding: 0.45em 1.05em;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.case-card__metric {
  position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.15rem; z-index: 4;
  display: flex; flex-direction: column;
}
.case-card__metric-value {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1;
  color: var(--gold-light);
}
.case-card__metric-label {
  margin-top: 0.35rem;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.85);
}

.case-card__body { padding: var(--space-lg) var(--space-md) var(--space-md); display: flex; flex-direction: column; flex: 1; }
.case-card__body h3 { font-size: var(--fs-md); margin-bottom: 0.6rem; line-height: 1.3; }
.case-card__body h3 a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.case-card__body h3 a:hover { color: var(--brand-navy); }
.case-card__body p { font-size: var(--fs-sm); color: var(--gray-500); margin-bottom: 1rem; line-height: 1.55; }
.case-card__body .card-link { margin-top: auto; }

/* ==========================================================================
   BLOG PREVIEW — featured article + compact list, real photography with
   the same brand duotone wash used on the case-study cards, instead of
   three identical icon-on-gradient cards.
   ========================================================================== */
.blog-preview__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 3vw, 3.5rem);
}
.blog-preview__head > div { max-width: 620px; }
.blog-preview__head p:last-child { margin-top: var(--space-sm); color: var(--gray-500); font-size: var(--fs-md); line-height: var(--lh-normal); }
.blog-preview__head .btn { flex-shrink: 0; }

.blog-preview__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  align-items: stretch;
}
@media (max-width: 900px) { .blog-preview__grid { grid-template-columns: 1fr; } }

/* ---- Featured article --------------------------------------------------*/
.blog-feature {
  display: flex; flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.blog-feature:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }

.blog-feature__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate; }
.blog-feature__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.blog-feature:hover .blog-feature__photo { transform: scale(1.06); }

.blog-feature__tint { position: absolute; inset: 0; z-index: 1; mix-blend-mode: multiply; pointer-events: none; background: linear-gradient(165deg, rgba(29,84,148,0.30) 0%, rgba(11,38,71,0.5) 100%); }
.blog-feature__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgba(6,20,38,0.55) 0%, transparent 42%); }
.blog-feature__grain {
  position: absolute; inset: 0; z-index: 3; opacity: 0.2; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.blog-feature__tag {
  position: absolute; top: 1.1rem; left: 1.1rem; z-index: 4;
  display: inline-flex; align-items: center;
  padding: 0.45em 1.05em;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.blog-feature__body { padding: clamp(1.5rem, 2.5vw, 2.25rem); display: flex; flex-direction: column; flex: 1; }
.blog-feature__date { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--fs-xs); color: var(--gray-500); margin-bottom: 0.9rem; }
.blog-feature__date svg { width: 13px; height: 13px; }
.blog-feature__body h3 { font-size: var(--fs-xl); line-height: 1.2; margin-bottom: 0.7rem; }
.blog-feature__body h3 a { color: inherit; transition: color var(--dur-fast) var(--ease-out); }
.blog-feature__body h3 a:hover { color: var(--brand-navy); }
.blog-feature__body p { color: var(--gray-500); font-size: var(--fs-base); line-height: var(--lh-normal); margin-bottom: 1.25rem; max-width: 46ch; }
.blog-feature__body .card-link { margin-top: auto; }

/* ---- Compact article list ------------------------------------------------*/
.blog-list { display: flex; flex-direction: column; }
.blog-row { display: flex; gap: 1.25rem; padding-block: 1.6rem; border-bottom: 1px solid var(--border-soft); }
.blog-list .blog-row:first-child { padding-top: 0; }
.blog-list .blog-row:last-child { border-bottom: none; }

.blog-row__media { position: relative; flex-shrink: 0; width: 128px; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; isolation: isolate; display: block; }
.blog-row__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.blog-row:hover .blog-row__photo { transform: scale(1.08); }
.blog-row__tint { position: absolute; inset: 0; z-index: 1; mix-blend-mode: multiply; pointer-events: none; background: linear-gradient(165deg, rgba(44,108,176,0.28) 0%, rgba(11,38,71,0.42) 100%); }

.blog-row__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.blog-row__meta { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.55rem; flex-wrap: wrap; }
.blog-row__date { font-size: var(--fs-xs); color: var(--gray-500); display: flex; align-items: center; gap: 0.35em; }
.blog-row__date svg { width: 12px; height: 12px; }
.blog-row__body h3 { font-size: var(--fs-base); line-height: 1.35; margin-bottom: 0.6rem; }
.blog-row__body h3 a { color: var(--ink-navy); transition: color var(--dur-fast) var(--ease-out); }
.blog-row__body h3 a:hover { color: var(--brand-navy); }
.blog-row__body .card-link { font-size: var(--fs-xs); margin-top: auto; }

@media (max-width: 480px) {
  .blog-row__media { width: 84px; }
  .blog-row__body h3 { font-size: var(--fs-sm); }
}

/* ==========================================================================
   ACCREDITATIONS STRIP
   ========================================================================== */
.accreditations { padding-block: var(--space-2xl); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.accreditations__inner { text-align: center; }
.accreditations__inner .eyebrow { margin-bottom: var(--space-lg); }

.accreditations__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 1.15rem;
}

.cred {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding-inline: clamp(1rem, 2vw, 1.6rem);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-navy);
  border-right: 1px solid var(--border-strong);
  line-height: 1.3;
}
.cred:first-child { padding-left: 0; }
.cred:last-child { padding-right: 0; border-right: none; }

.cred__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(198, 154, 70, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.cred__icon svg, .cred__icon i { width: 14px; height: 14px; color: var(--gold-deep); }
.cred:hover .cred__icon { background: var(--gradient-gold); border-color: transparent; transform: scale(1.08); }
.cred:hover .cred__icon svg, .cred:hover .cred__icon i { color: var(--ink-navy); }

@media (max-width: 880px) {
  .cred { border-right: none; padding-inline: 0; }
  .accreditations__row { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .accreditations__inner { text-align: left; }
  .accreditations__inner .eyebrow { justify-content: flex-start; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq__inner { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2.5rem, 5vw, 5.5rem); align-items: start; }
.faq__aside { position: relative; margin-bottom: 0; position: sticky; top: 120px; padding-top: 0.25rem; }
.faq__aside > * { position: relative; z-index: 1; }
.faq__mark { position: absolute; top: -34px; right: -10px; width: 190px; height: 190px; z-index: 0; pointer-events: none; }

.faq__list { display: flex; flex-direction: column; }

.faq__group-label {
  display: flex; align-items: center; gap: 0.85em;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
}
.faq__group-label::after { content: ''; flex: 1; height: 1px; background: var(--border-strong); }
.faq__group-label--spaced { margin-top: 2.5rem; }

.faq-item {
  border: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--white);
  margin-bottom: 0.85rem;
  padding-inline: clamp(1.1rem, 2vw, 1.75rem);
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.faq-item::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--gradient-gold); transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur-base) var(--ease-out);
}
.faq-item:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
.faq-item.is-open { background: var(--mist); border-color: transparent; box-shadow: var(--shadow-md); }
.faq-item.is-open::before { transform: scaleY(1); }

.faq-item__trigger {
  padding-block: 1.5rem;
  gap: clamp(0.85rem, 2vw, 1.5rem);
}
.faq-item__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--gray-300);
  letter-spacing: 0.02em;
  padding-top: 0.2em;
  flex-shrink: 0;
  transition: color var(--dur-base) var(--ease-out);
}
.faq-item.is-open .faq-item__num,
.faq-item:hover .faq-item__num { color: var(--gold-deep); }
.faq-item__q { flex: 1; }
.faq-item .accordion-item__panel-inner { padding-left: calc(1.6em + clamp(0.85rem, 2vw, 1.5rem)); padding-right: 1.5rem; max-width: 54ch; }

@media (max-width: 860px) {
  .faq__inner { grid-template-columns: 1fr; }
  .faq__aside { position: static; }
  .faq__mark { display: none; }
}
@media (max-width: 560px) {
  .faq-item .accordion-item__panel-inner { padding-left: 0; max-width: none; }
}

/* ==========================================================================
   CTA SPLIT — booking mockup + headline
   ========================================================================== */
.cta-split {
  position: relative;
  overflow: hidden;
  background: var(--gradient-navy);
  padding-block: clamp(4.5rem, 7vw, 7.5rem);
}
.cta-split__decor {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(560px circle at 88% 12%, rgba(198,154,70,0.16), transparent 60%),
    radial-gradient(620px circle at 8% 92%, rgba(44,108,176,0.28), transparent 60%);
}
.cta-split__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .cta-split__inner { grid-template-columns: 1fr; }
  .cta-split__visual { order: 2; }
  .cta-split__content { order: 1; text-align: center; }
}

/* ---- Copy side -----------------------------------------------------------*/
.cta-split__content h2 { color: var(--white); font-size: var(--fs-2xl); margin-top: 0.6rem; }
.cta-split__content > p { margin-top: var(--space-sm); color: rgba(255,255,255,0.72); font-size: var(--fs-md); max-width: 46ch; }
@media (max-width: 900px) { .cta-split__content > p { margin-inline: auto; } }

.cta-split__points { list-style: none; margin: var(--space-lg) 0 0; display: flex; flex-direction: column; gap: 0.7rem; }
@media (max-width: 900px) { .cta-split__points { align-items: center; } }
.cta-split__points li { display: flex; align-items: center; gap: 0.65em; color: rgba(255,255,255,0.85); font-size: var(--fs-sm); }
.cta-split__points li svg { flex-shrink: 0; width: 15px; height: 15px; padding: 3px; box-sizing: content-box; border-radius: 50%; background: rgba(198,154,70,0.18); color: var(--gold-light); }

.cta-split__actions { margin-top: var(--space-xl); display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
@media (max-width: 900px) { .cta-split__actions { justify-content: center; } }
.cta-split__phone { display: flex; align-items: center; gap: 0.6em; color: var(--white); font-weight: 600; font-size: var(--fs-sm); }
.cta-split__phone svg { width: 18px; height: 18px; color: var(--gold-light); }

/* ---- Booking mockup --------------------------------------------------------*/
.cta-split__visual { display: flex; justify-content: center; }
.booking-mock { position: relative; width: min(340px, 100%); padding: 2.5rem 1.5rem; }

.booking-mock__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 18.3;
  margin-inline: auto;
  background: linear-gradient(160deg, #0d1c2f 0%, #142238 100%);
  border-radius: 34px;
  padding: 0.55rem;
  box-shadow: 0 30px 70px rgba(6, 18, 36, 0.55), 0 0 0 1px rgba(255,255,255,0.06);
  transform: rotate(-4deg);
}
.booking-mock__notch {
  position: absolute; top: 0.55rem; left: 50%; transform: translateX(-50%);
  width: 70px; height: 18px; border-radius: 0 0 12px 12px;
  background: #0d1c2f; z-index: 2;
}
.booking-mock__screen {
  position: relative;
  height: 100%;
  background: var(--mist);
  border-radius: 26px;
  padding: 1.9rem 1.05rem 1.15rem;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.booking-mock__brand { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
.booking-mock__title { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--ink-navy); margin: 0.2rem 0 1rem; }
.booking-mock__row-label { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 0.5rem; }

.booking-mock__dates, .booking-mock__times { display: flex; gap: 0.35rem; margin-bottom: 1rem; flex-wrap: wrap; }
.booking-mock__dates span, .booking-mock__times span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  background: var(--white); border: 1px solid var(--border-soft); border-radius: 10px;
  color: var(--ink-soft); font-size: 0.64rem; font-weight: 600;
}
.booking-mock__dates span { width: 40px; height: 44px; }
.booking-mock__dates span em { font-style: normal; font-size: 0.52rem; font-weight: 500; color: var(--gray-500); }
.booking-mock__times span { flex: 1 1 calc(50% - 0.2rem); padding: 0.45rem 0.3rem; text-align: center; }
.booking-mock__dates span.is-active, .booking-mock__times span.is-active {
  background: var(--gradient-navy); border-color: transparent; color: var(--white);
}

.booking-mock__btn {
  margin-top: auto;
  display: block; text-align: center;
  padding: 0.7rem; border-radius: 12px;
  background: var(--gradient-gold);
  color: var(--ink-navy);
  font-size: 0.72rem; font-weight: 700;
  box-shadow: var(--shadow-gold);
}

/* ---- Floating info cards ---------------------------------------------------*/
.booking-mock__card {
  position: absolute;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.85rem 1rem;
  width: 210px;
  animation: float-card 5s ease-in-out infinite;
}
.booking-mock__card--session { top: 0.5rem; right: -0.5rem; animation-delay: 0s; }
.booking-mock__card--therapist { bottom: 1.5rem; left: -1.25rem; animation-delay: 1.4s; }

.booking-mock__card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  font-size: 0.68rem; font-weight: 700; color: var(--ink-navy);
  margin-bottom: 0.4rem;
}
.booking-mock__card--therapist .booking-mock__card-head { font-size: 0.64rem; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.6rem; }
.booking-mock__status {
  font-size: 0.6rem; font-weight: 700; padding: 0.2em 0.6em; border-radius: var(--radius-full);
  background: rgba(46,158,110,0.12); color: #1f8a5a;
}
.booking-mock__card--session p {
  display: flex; align-items: center; gap: 0.4em;
  font-size: 0.68rem; color: var(--ink-soft); margin-top: 0.3rem;
}
.booking-mock__card--session p svg { color: var(--gold-deep); flex-shrink: 0; }

.booking-mock__therapist { display: flex; align-items: center; gap: 0.6rem; }
.booking-mock__therapist .avatar--sm { width: 34px; height: 34px; font-size: 0.68rem; flex-shrink: 0; }
.booking-mock__therapist-info { flex: 1; min-width: 0; }
.booking-mock__therapist-info p { font-size: 0.72rem; font-weight: 700; color: var(--ink-navy); }
.booking-mock__therapist-info span { font-size: 0.6rem; color: var(--gray-500); }
.booking-mock__rating {
  display: inline-flex; align-items: center; gap: 0.25em; flex-shrink: 0;
  font-size: 0.66rem; font-weight: 700; color: var(--gold-deep);
  background: var(--mist); padding: 0.25em 0.5em; border-radius: var(--radius-full);
}
.booking-mock__rating svg { color: var(--gold); }

@keyframes float-card {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) { .booking-mock__card { animation: none; } }

@media (max-width: 640px) {
  .booking-mock { padding: 2.5rem 0.5rem; width: min(300px, 100%); }
  .booking-mock__card { width: 180px; padding: 0.7rem 0.85rem; }
  .booking-mock__card--session { right: -0.75rem; }
  .booking-mock__card--therapist { left: -0.75rem; }
}
@media (max-width: 420px) {
  .booking-mock__card--session, .booking-mock__card--therapist { position: static; width: 100%; margin-top: 0.75rem; animation: none; }
  .booking-mock { display: flex; flex-direction: column; align-items: center; }
}

/* ==========================================================================
   CONTACT PREVIEW
   A quiet, editorial close to the page: quick-dial actions, one consolidated
   info card (rather than a repeated icon-row list), an explicit home-visit
   callout, and a map treated as a branded card — not a raw embed — with a
   live "open now" readout and a direct "Get Directions" action.
   ========================================================================== */
.contact-preview { overflow: hidden; }

/* ---- Decorative backdrop (very quiet — this is a light section) ---------*/
.contact-preview__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.contact-preview__glow { position: absolute; border-radius: 50%; filter: blur(110px); }
.contact-preview__glow--a { width: 460px; height: 460px; background: var(--gold); opacity: 0.09; top: -180px; right: -120px; }
.contact-preview__glow--b { width: 420px; height: 420px; background: var(--signal-blue); opacity: 0.07; bottom: -200px; left: -140px; }

.contact-preview__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.contact-preview__lede { margin-top: 0.75rem; color: var(--gray-500); font-size: var(--fs-md); line-height: var(--lh-normal); max-width: 46ch; }

/* ---- Quick-dial actions ---------------------------------------------------*/
.contact-quick { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: var(--space-lg); }
.contact-quick__btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); color: var(--ink-navy);
  background: var(--white); border: 1.5px solid var(--border-soft);
  padding: 0.8em 1.35em; border-radius: var(--radius-full);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.contact-quick__btn svg { color: var(--brand-navy); flex-shrink: 0; }
.contact-quick__btn:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.contact-quick__btn--whatsapp svg { color: #2AAE55; }

/* ---- Consolidated info card ------------------------------------------------*/
.contact-card {
  margin-top: var(--space-xl);
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  box-shadow: var(--shadow-sm);
}
.contact-card__row { display: flex; gap: var(--space-md); }
.contact-card__icon {
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  background: var(--mist); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-card__icon svg { color: var(--brand-navy); }
.contact-card h4 { font-size: var(--fs-base); margin-bottom: 0.4em; }
.contact-card address { font-size: var(--fs-sm); color: var(--gray-500); font-style: normal; line-height: 1.6; }
.contact-card__tag {
  margin-top: 0.65rem; display: inline-flex; align-items: center; gap: 0.4em;
  font-size: var(--fs-xs); font-weight: 600; color: var(--gold-deep);
  background: rgba(198, 154, 70, 0.1); padding: 0.4em 0.8em; border-radius: var(--radius-full);
}
.contact-card__tag svg { flex-shrink: 0; }
.contact-card__divider { height: 1px; background: var(--border-soft); margin: 1.4rem 0; }

.hours-table { font-size: var(--fs-sm); color: var(--gray-500); display: flex; flex-direction: column; gap: 0.3rem; max-width: 280px; }
.hours-table div { display: grid; grid-template-columns: auto 1fr; column-gap: 1.25rem; align-items: baseline; padding-block: 0.2rem; }
.hours-table span:first-child { white-space: nowrap; }
.hours-table span:last-child { color: var(--ink-navy); font-weight: 600; white-space: nowrap; text-align: right; justify-self: end; }

/* ---- Map card --------------------------------------------------------------*/
.contact-preview__map {
  border-radius: var(--radius-lg); overflow: hidden; min-height: 460px;
  box-shadow: var(--shadow-md); border: 1px solid var(--border-soft);
  position: relative; background: var(--mist-deep); isolation: isolate;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.contact-preview__map:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.contact-preview__map iframe { width: 100%; height: 100%; min-height: 460px; border: 0; filter: grayscale(0.25) contrast(1.05); }

.map-card__topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 1.15rem 1.25rem;
  background: linear-gradient(180deg, rgba(11,38,71,0.6) 0%, rgba(11,38,71,0) 100%);
  pointer-events: none;
}
.map-card__topbar > * { pointer-events: auto; }
.map-card__status {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-size: var(--fs-xs); font-weight: 600; color: var(--white);
  background: rgba(255,255,255,0.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.28);
  padding: 0.55em 0.95em; border-radius: var(--radius-full); white-space: nowrap;
}
.map-card__directions {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-navy);
  background: var(--white); padding: 0.6em 1.1em; border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm); white-space: nowrap;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.map-card__directions svg { color: var(--gold-deep); }
.map-card__directions:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.map-card__chip { position: absolute; left: 1.5rem; bottom: 1.5rem; z-index: 2; width: auto; max-width: 220px; }

@media (max-width: 900px) {
  .contact-preview__inner { grid-template-columns: 1fr; }
  .contact-preview__map, .contact-preview__map iframe { min-height: 340px; }
}
@media (max-width: 480px) {
  .map-card__topbar { flex-direction: column; align-items: flex-start; }
  .map-card__chip { left: 1rem; bottom: 1rem; max-width: 190px; }
}