/* ==========================================================================
   Cinematic scroll-controlled hero — clinic
   Works without JS (static poster hero). JS adds .has-js / .is-scrub.
   ========================================================================== */

:root {
  --clinic-page-bg: #fcfcfc;
  --clinic-surface: #ffffff;
  --clinic-secondary-bg: #edf1f4;
  --clinic-primary: #0f766e;
  --clinic-primary-hover: #115e59;
  --clinic-navy: #163344;
  --clinic-light-teal: #c6e0dd;
  --clinic-border: #e2e8f0;
  --clinic-text-muted: #64748b;
  --clinic-success: #15803d;
  --clinic-warning: #b45309;
  --clinic-error: #b91c1c;
  --clinic-ivory: var(--clinic-page-bg);
  --clinic-ivory-soft: var(--clinic-surface);
  --clinic-teal: var(--clinic-primary);
  --clinic-mint: var(--clinic-light-teal);
  --clinic-gold: var(--clinic-warning);
  --clinic-green: var(--clinic-success);
  --clinic-navy-rgb: 22, 51, 68;
  --clinic-teal-rgb: 15, 118, 110;
  --clinic-white-rgb: 255, 255, 255;
  --clinic-teal-wash: rgba(var(--clinic-teal-rgb), 0.1);
  --clinic-radius-sm: 4px;
  --clinic-radius-md: 8px;
  --clinic-radius-lg: 8px;
  --clinic-radius-xl: 12px;
  --clinic-radius-pill: 999px;
  --clinic-radius-circle: 50%;
  --clinic-font:
    "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", Tahoma, system-ui, sans-serif;
  --clinic-display-font: "Noto Kufi Arabic", "IBM Plex Sans Arabic", sans-serif;

  /* Extra scroll distance (on top of one viewport) used to play the film */
  --hero-scroll: 300vh;
}

@media (max-width: 768px) {
  :root {
    --hero-scroll: 220vh;
  }
}

.clinic-hero {
  position: relative;
  height: 100vh;
  height: 100svh; /* static default: one viewport */
  background: var(--clinic-navy);
  color: var(--clinic-ivory-soft);
  font-family: var(--clinic-font);
  direction: rtl;
}

/* Tall scroll track only when scrubbing is active */
.clinic-hero.is-scrub {
  height: calc(100svh + var(--hero-scroll));
}
@supports not (height: 100svh) {
  .clinic-hero.is-scrub {
    height: calc(100vh + var(--hero-scroll));
  }
}

/* Sticky stage — dimensions are fixed before media loads (no layout shift) */
.clinic-hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  --fade: 1; /* 1 → text/scrim visible, 0 → hidden (set by JS) */
  --arrived: 0;
  --progress: 0%;
  --expand: 0; /* mobile only: 0 → film in upper 64%, 1 → full height (set by JS) */
}

.clinic-hero:not(.is-scrub) .clinic-hero__stage {
  position: relative;
}

/* ---- Media ------------------------------------------------------------ */
.clinic-hero__poster,
.clinic-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  display: block;
}
.clinic-hero__video {
  background: transparent;
}
.clinic-hero.is-fallback .clinic-hero__video,
.clinic-hero.is-static .clinic-hero__video {
  display: none;
}

/* ---- Scrim: only where text sits, fades away for the interior reveal ---- */
.clinic-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--fade);
  background:
    linear-gradient(
      270deg,
      rgba(var(--clinic-navy-rgb), 0.74) 0%,
      rgba(var(--clinic-navy-rgb), 0.5) 30%,
      rgba(var(--clinic-navy-rgb), 0) 62%
    ),
    linear-gradient(0deg, rgba(var(--clinic-navy-rgb), 0.28) 0%, rgba(var(--clinic-navy-rgb), 0) 32%);
}
.clinic-hero__scrim--arrived {
  opacity: var(--arrived);
  background:
    linear-gradient(
      270deg,
      rgba(var(--clinic-navy-rgb), 0.92) 0%,
      rgba(var(--clinic-navy-rgb), 0.72) 38%,
      rgba(var(--clinic-navy-rgb), 0.04) 76%
    ),
    linear-gradient(0deg, rgba(var(--clinic-navy-rgb), 0.52) 0%, rgba(var(--clinic-navy-rgb), 0) 44%);
}

/* ---- Content ----------------------------------------------------------- */
.clinic-hero__content {
  position: absolute;
  inset-block: 0;
  inset-inline-start: clamp(24px, 6vw, 104px); /* RTL → right side */
  width: min(620px, 50vw);
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* RTL → aligned right */
  justify-content: center;
  padding-block: 8vh;
  text-align: start;
  opacity: var(--fade);
  transition: visibility 0s linear;
}
.clinic-hero__content[data-hidden] {
  visibility: hidden;
  pointer-events: none;
}

.clinic-hero__title {
  margin: 0;
  font-family: var(--clinic-display-font);
  font-size: clamp(2rem, 4.4vw, 3.625rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--clinic-ivory-soft);
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(var(--clinic-navy-rgb), 0.45);
}
.clinic-hero__ecg {
  display: block;
  width: min(380px, 75%);
  height: 34px;
  margin: 8px 0 4px;
}
.clinic-hero__ecg path {
  fill: none;
  stroke: var(--clinic-mint);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: clinic-ecg 2.2s 0.5s cubic-bezier(0.6, 0.1, 0.2, 1) forwards;
}
@keyframes clinic-ecg {
  to {
    stroke-dashoffset: 0;
  }
}

.clinic-hero__text {
  margin: 0 0 2.25rem;
  max-width: 34ch;
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  line-height: 1.9;
  color: rgba(var(--clinic-white-rgb), 0.9);
  text-wrap: pretty;
  text-shadow: 0 1px 16px rgba(var(--clinic-navy-rgb), 0.5);
}

.clinic-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.75rem;
}

.clinic-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.9rem 2rem;
  border-radius: 4px;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}
.clinic-hero__btn--primary {
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 1.25rem;
  font-size: 0.95rem;
  background: var(--clinic-primary);
  color: var(--clinic-surface);
}
.clinic-hero__btn--primary:hover {
  background: var(--clinic-primary-hover);
  transform: translateY(-1px);
}

.clinic-hero__btn--link {
  padding-inline: 0.25rem;
  color: var(--clinic-ivory-soft);
  border-radius: 1px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 calc(100% - 12px);
}
.clinic-hero__btn--link:hover {
  color: #fff;
}
.clinic-hero__btn svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}
.clinic-hero__btn--primary {
  box-shadow: 0 14px 30px -12px rgba(var(--clinic-navy-rgb), 0.5);
}
.clinic-hero__btn--primary:hover {
  background: var(--clinic-primary-hover);
}
.clinic-hero__btn--link {
  background: none;
}
.clinic-hero__btn--link:hover {
  background: rgba(var(--clinic-white-rgb), 0.1);
}

.clinic-hero__btn:focus-visible {
  outline: 2px solid var(--clinic-light-teal);
  outline-offset: 4px;
}

/* ---- Scroll cue --------------------------------------------------------- */
.clinic-hero__cue {
  position: absolute;
  inset-block-end: 4vh;
  inset-inline-start: 50%;
  translate: 50% 0;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(var(--clinic-white-rgb), 0.85);
  pointer-events: none;
}
.clinic-hero.is-scrub .clinic-hero__cue {
  display: flex;
}
.clinic-hero__cue i {
  display: block;
  width: 1px;
  height: 38px;
  background: linear-gradient(
    rgba(var(--clinic-white-rgb), 0.9),
    rgba(var(--clinic-white-rgb), 0)
  );
}

/* ---- Specialty marquee ------------------------------------------------- */
.clinic-marquee {
  overflow: hidden;
  padding: 20px 0;
  border-bottom: 1px solid rgba(var(--clinic-white-rgb), 0.14);
  background: var(--clinic-navy);
  color: var(--clinic-ivory-soft);
}
.clinic-marquee__track {
  display: flex;
  width: max-content;
  direction: rtl;
  animation: clinic-marquee-scroll 38s linear infinite;
}
.clinic-marquee:hover .clinic-marquee__track {
  animation-play-state: paused;
}
.clinic-marquee__group {
  display: flex;
  flex: none;
  align-items: center;
}
.clinic-marquee__group span {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 28px;
  font-family: var(--clinic-display-font);
  font-size: 1.125rem;
  font-weight: 600;
  white-space: nowrap;
}
.clinic-marquee__group span::before {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--clinic-mint);
  content: "";
  transform: rotate(45deg);
}
@keyframes clinic-marquee-scroll {
  to {
    transform: translateX(50%);
  }
}

/* ---- Arrival state: revealed late in the cinematic scroll -------------- */
.clinic-hero__arrived {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 clamp(24px, 6vw, 104px);
  opacity: var(--arrived);
  transform: translateY(var(--arrival-offset, 0px));
}
.clinic-hero__arrived[data-hidden] {
  visibility: hidden;
  pointer-events: none;
}
.clinic-hero__arrival-inner {
  width: min(620px, 50vw);
}
.clinic-hero__arrived h2 {
  margin: 18px 0 0;
  font-family: var(--clinic-display-font);
  font-size: clamp(1.8rem, 3.8vw, 2.875rem);
  font-weight: 800;
  line-height: 1.4;
  text-wrap: balance;
}
.clinic-hero__arrival-text {
  max-width: 56ch;
  margin: 10px 0 0;
  color: rgba(var(--clinic-white-rgb), 0.86);
  font-size: clamp(0.95rem, 1.35vw, 1.125rem);
  line-height: 1.9;
}
.clinic-hero__arrived .clinic-hero__actions {
  margin-top: 22px;
}
.clinic-hero__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 30px;
  border-top: 1px solid rgba(var(--clinic-white-rgb), 0.25);
}
.clinic-hero__facts > div {
  padding: 14px 12px 0;
}
.clinic-hero__facts > div + div {
  border-inline-start: 1px solid rgba(var(--clinic-white-rgb), 0.18);
}
.clinic-hero__facts b,
.clinic-hero__facts span {
  display: block;
}
.clinic-hero__facts b {
  font-size: 0.88rem;
}
.clinic-hero__facts span {
  margin-top: 2px;
  color: rgba(var(--clinic-white-rgb), 0.72);
  font-size: 0.75rem;
}

.clinic-hero__progress {
  position: absolute;
  z-index: 5;
  inset-inline: 0;
  inset-block-end: 0;
  height: 4px;
  background: rgba(var(--clinic-white-rgb), 0.15);
}
.clinic-hero__progress span {
  display: block;
  width: var(--progress);
  height: 100%;
  background: var(--clinic-primary);
}

/* ---- Entrance animation (runs once; opacity/transform only) ------------- */
.clinic-hero.has-js:not(.is-ready) .anim {
  opacity: 0;
}
.clinic-hero.is-ready .anim {
  animation: clinic-rise 0.9s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}
.clinic-hero.is-ready .anim--title {
  animation-delay: 0.45s;
}
.clinic-hero.is-ready .anim--text {
  animation-name: clinic-fade;
  animation-delay: 0.85s;
}

@keyframes clinic-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes clinic-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Tablet ------------------------------------------------------------- */
@media (max-width: 1024px) {
  .clinic-hero__content {
    width: min(520px, 54vw);
  }
  .clinic-hero__title {
    font-size: clamp(2.1rem, 5.4vw, 3.2rem);
  }
}

@media (max-width: 900px) {
  .clinic-hero__content,
  .clinic-hero__arrived {
    align-items: flex-end;
    padding-bottom: 84px;
  }
}
  .cfaq {
    --fq-bg: var(--clinic-secondary-bg);
    --fq-card: var(--clinic-surface);
    --fq-ink: var(--clinic-navy);
    --fq-muted: var(--clinic-text-muted);
    --fq-line: var(--clinic-border);
    --fq-teal: var(--clinic-teal);
    --fq-teal-soft: var(--clinic-teal-wash);
    --fq-font: var(--clinic-font);
    direction: rtl;
    box-sizing: border-box;
    padding: clamp(64px, 10vh, 120px) clamp(20px, 6vw, 104px);
    background: var(--fq-bg);
    color: var(--fq-ink);
    font-family: var(--fq-font);
  }
  .cfaq *,
  .cfaq *::before,
  .cfaq *::after {
    box-sizing: border-box;
  }
  .cfaq__inner {
    display: grid;
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .cfaq__intro {
    position: sticky;
    top: 96px;
  }
  .cfaq__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 1rem;
    font-weight: 600;
    color: var(--fq-teal);
  }
  .cfaq__eyebrow::before {
    content: "";
    width: 2.25rem;
    height: 1px;
    background: currentColor;
  }
  .cfaq__title {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 3.8vw, 3.2rem);
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
  }
  .cfaq__lead {
    max-width: 38ch;
    margin: 0 0 2rem;
    color: var(--fq-muted);
    font-size: 1.06rem;
    line-height: 1.9;
  }
  .cfaq__help {
    max-width: 420px;
    padding: 22px 24px;
    border: 1px solid var(--fq-line);
    border-radius: 10px;
  }
  .cfaq__help h3 {
    margin: 0 0 0.4rem;
    font-size: 1.1rem;
    font-weight: 700;
  }
  .cfaq__help p {
    margin: 0 0 1.1rem;
    color: var(--fq-muted);
    font-size: 0.97rem;
    line-height: 1.8;
  }
  .cfaq__help-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
  }
  .cfaq__btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 8px;
    background: var(--clinic-primary);
    color: var(--clinic-surface);
    font-weight: 600;
    text-decoration: none;
    transition:
      background-color 0.3s ease,
      transform 0.3s ease;
  }
  .cfaq__btn-primary svg {
    width: 15px;
    height: 15px;
    transition: transform 0.35s ease;
  }
  .cfaq__btn-primary:hover {
    background: var(--clinic-primary-hover);
    transform: translateY(-1px);
  }
  .cfaq__btn-primary:hover svg {
    transform: translateX(-3px);
  }
  .cfaq__phone {
    padding-bottom: 2px;
    border-bottom: 1px solid var(--fq-line);
    color: var(--fq-ink);
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.25s ease;
  }
  .cfaq__phone:hover {
    border-color: var(--fq-teal);
  }
  .cfaq__phone bdi {
    direction: ltr;
    unicode-bidi: isolate;
  }
  .cfaq__list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .cfaq__item {
    border: 1px solid var(--fq-line);
    border-radius: 10px;
    background: transparent;
    transition:
      background-color 0.4s ease,
      border-color 0.4s ease;
  }
  .cfaq__item.is-open {
    border-color: var(--clinic-primary);
    background: var(--fq-card);
  }
  .cfaq__item:hover:not(.is-open) {
    border-color: var(--clinic-border);
  }
  .cfaq__q {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
  }
  .cfaq__btn {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 20px);
    width: 100%;
    padding: clamp(18px, 2.6vh, 24px) clamp(18px, 2.2vw, 26px);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
  }
  .cfaq__btn:focus-visible {
    outline: 2px solid var(--fq-teal);
    outline-offset: 3px;
  }
  .cfaq__no {
    flex: none;
    color: var(--clinic-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: color 0.35s ease;
  }
  .cfaq__text {
    flex: 1;
    font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    font-weight: 600;
    line-height: 1.6;
  }
  .cfaq__item.is-open .cfaq__no {
    color: var(--fq-teal);
  }
  .cfaq__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--fq-line);
    border-radius: 50%;
    color: var(--fq-ink);
    transition:
      background-color 0.35s ease,
      color 0.35s ease,
      border-color 0.35s ease,
      transform 0.45s cubic-bezier(0.22, 0.7, 0.2, 1);
  }
  .cfaq__icon svg {
    width: 18px;
    height: 18px;
  }
  .cfaq__btn:hover .cfaq__icon {
    border-color: var(--fq-ink);
  }
  .cfaq__item.is-open .cfaq__icon {
    transform: rotate(135deg);
    border-color: var(--fq-ink);
    background: var(--fq-ink);
    color: #fff;
  }
  .cfaq__panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition:
      grid-template-rows 0.45s cubic-bezier(0.22, 0.7, 0.2, 1),
      visibility 0s linear 0.45s;
  }
  .cfaq__item.is-open .cfaq__panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition-delay: 0s;
  }
  .cfaq__panel-in {
    min-height: 0;
    overflow: hidden;
  }
  .cfaq__a {
    max-width: 62ch;
    margin: 0;
    padding: 0 clamp(18px, 2.2vw, 26px) clamp(20px, 3vh, 28px);
    padding-inline-start: calc(clamp(18px, 2.2vw, 26px) + 2.2rem);
    color: var(--fq-muted);
    font-size: 1.02rem;
    line-height: 1.95;
    opacity: 0;
    transform: translateY(-6px);
    transition:
      opacity 0.4s ease,
      transform 0.4s ease;
  }
  .cfaq__item.is-open .cfaq__a {
    opacity: 1;
    transform: none;
    transition-delay: 0.08s;
  }
  .cfaq__a a {
    color: var(--fq-teal);
    font-weight: 600;
    text-underline-offset: 3px;
  }
  .cfaq__a a:focus-visible {
    outline: 2px solid var(--fq-teal);
    outline-offset: 3px;
    border-radius: 2px;
  }
  .cfaq:not(.has-js) .cfaq__panel {
    grid-template-rows: 1fr;
    visibility: visible;
  }
  .cfaq:not(.has-js) .cfaq__a {
    opacity: 1;
    transform: none;
  }
  .cfaq:not(.has-js) .cfaq__icon {
    display: none;
  }
  .cfaq:not(.has-js) .cfaq__btn {
    cursor: default;
  }
  .cfaq.has-js .reveal:not(.is-in) {
    opacity: 0;
    transform: translateY(22px);
  }
  .cfaq.has-js .reveal {
    transition:
      opacity 0.7s cubic-bezier(0.22, 0.7, 0.2, 1),
      transform 0.7s cubic-bezier(0.22, 0.7, 0.2, 1),
      background-color 0.4s ease,
      border-color 0.4s ease;
    transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s;
  }
  @media (max-width: 900px) {
    .cfaq__inner {
      grid-template-columns: 1fr;
    }
    .cfaq__intro {
      display: contents;
    }
    .cfaq__head {
      order: 1;
    }
    .cfaq__list {
      order: 2;
    }
    .cfaq__help {
      order: 3;
      max-width: none;
    }
    .cfaq__lead {
      margin-bottom: 0;
    }
  }
  @media (max-width: 560px) {
    .cfaq__no {
      display: none;
    }
    .cfaq__a {
      padding-inline-start: clamp(18px, 2.2vw, 26px);
    }
    .cfaq__btn-primary {
      width: 100%;
      justify-content: center;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cfaq.has-js .reveal:not(.is-in) {
      opacity: 1;
      transform: none;
    }
    .cfaq *,
    .cfaq *::before,
    .cfaq *::after {
      transition: none !important;
    }
    .cfaq__a {
      transform: none;
    }
  }
@media (max-width: 900px) {
  .clinic-hero__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 20px;
  }
  .clinic-hero__facts > div:nth-child(3) {
    border-inline-start: 0;
  }
  .clinic-hero__facts > div:nth-child(n + 3) {
    margin-top: 6px;
  }
  .clinic-hero__cue {
    display: none;
  }
}

/* ---- Mobile: film in the upper part, copy on navy below ----------------
   The film grows to full height as the copy fades (see --expand in JS). */
@media (max-width: 768px) {
  .clinic-hero__stage {
    background: var(--clinic-navy);
  }
  .clinic-hero__poster,
  .clinic-hero__video {
    height: calc(64% + 36% * var(--expand));
    object-position: 62% 55%;
  }
  .clinic-hero__scrim {
    background: linear-gradient(
      0deg,
      var(--clinic-navy) 0%,
      var(--clinic-navy) 30%,
      rgba(var(--clinic-navy-rgb), 0.72) 46%,
      rgba(var(--clinic-navy-rgb), 0) 64%
    );
  }
  .clinic-hero__content {
    inset-inline: 0;
    width: auto;
    padding: 0 24px calc(5vh + env(safe-area-inset-bottom, 0px));
    justify-content: flex-end;
  }
  .clinic-hero__arrival-inner {
    width: 100%;
  }
  .clinic-hero__arrived {
    padding: 0 24px calc(5vh + env(safe-area-inset-bottom, 0px));
  }
  .clinic-hero__title {
    font-size: clamp(1.85rem, 8vw, 2.3rem);
    margin-bottom: 0.7rem;
    line-height: 1.3;
  }
  .clinic-hero__text {
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 1.2rem;
    max-width: 32ch;
  }
  .clinic-hero__content .clinic-hero__text {
    display: none;
  }
  .clinic-hero__ecg {
    margin-block: 6px 2px;
  }
  .clinic-hero__arrived h2 {
    margin-top: 12px;
    font-size: clamp(1.65rem, 7vw, 2rem);
  }
  .clinic-hero__arrival-text {
    display: none;
  }
  .clinic-hero__facts > div {
    padding-inline: 8px;
  }
  .clinic-hero__facts b {
    font-size: 0.8rem;
  }
  .clinic-hero__facts span {
    font-size: 0.7rem;
  }
  .clinic-hero__actions {
    width: 100%;
    gap: 0.6rem 1.5rem;
  }
  .clinic-hero__btn {
    min-height: 50px;
  }
  .clinic-hero__btn--primary {
    min-height: 44px;
    flex: 0 0 auto;
  }
  .clinic-hero__btn--link {
    background-position: 0 calc(100% - 10px);
  }
  .clinic-hero__cue {
    display: none !important;
  }
}

/* ---- Reduced motion: static poster hero, no scrubbing ------------------- */
@media (prefers-reduced-motion: reduce) {
  .clinic-hero .anim {
    animation: none !important;
    opacity: 1 !important;
  }
  .clinic-hero__ecg path {
    animation: none;
    stroke-dashoffset: 0;
  }
  .clinic-hero__btn {
    transition: none;
  }
  .clinic-marquee__track {
    animation: none;
  }
}

/* Shared styles for the clinic content sections. */
html,
body {
  margin: 0;
}
body {
  font-family: var(--clinic-font);
  background: var(--clinic-ivory);
  color: var(--clinic-navy);
}

.cdoctors,
.creviews,
.cservices,
.cwhy {
  --section-ivory: var(--clinic-page-bg);
  --section-ivory-soft: var(--clinic-surface);
  --section-navy: var(--clinic-navy);
  --section-teal: var(--clinic-primary);
  --section-teal-light: var(--clinic-light-teal);
  --section-gold: var(--clinic-warning);
  --section-font: var(
    --clinic-font,
    "IBM Plex Sans Arabic",
    "Tajawal",
    "Segoe UI",
    Tahoma,
    system-ui,
    sans-serif
  );
}

.cdoctors {
  --dr-bg: var(--clinic-secondary-bg);
  --dr-ink: var(--section-navy);
  --dr-muted: var(--clinic-text-muted);
  --dr-photo-a: var(--clinic-light-teal);
  --dr-photo-b: var(--clinic-page-bg);
  --dr-verified: var(--section-teal);
  --dr-font: var(--section-font);
  direction: rtl;
  box-sizing: border-box;
  padding: clamp(64px, 10vh, 120px) clamp(20px, 6vw, 104px);
  background: var(--dr-bg);
  color: var(--dr-ink);
  font-family: var(--dr-font);
}
.cdoctors *,
.cdoctors *::before,
.cdoctors *::after {
  box-sizing: border-box;
}
.cdoctors__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 48px;
  margin: 0 0 clamp(32px, 6vh, 60px);
}
.cdoctors__head > div {
  max-width: 640px;
}
.cdoctors__head.reveal,
.cservices__head.reveal,
.cwhy__intro.reveal {
  --i: 0;
}
.cdoctors__eyebrow {
  margin: 0 0 0.8rem;
  font-weight: 600;
  color: var(--dr-muted);
}
.cdoctors__title {
  margin: 0 0 0.8rem;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}
.cdoctors__lead {
  margin: 0;
  line-height: 1.9;
  font-size: 1.06rem;
  color: var(--dr-muted);
  max-width: 52ch;
}
.csection__all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--section-teal);
  border-radius: 8px;
  background: var(--clinic-primary);
  color: var(--clinic-surface);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}
.csection__all svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}
.csection__all:hover {
  background: var(--clinic-primary-hover);
  transform: translateY(-2px);
}
.csection__all:hover svg {
  transform: translateX(-3px);
}
.csection__all:focus-visible {
  outline: 2px solid var(--section-teal);
  outline-offset: 3px;
}
.cdoctors__grid {
  display: grid;
  gap: clamp(20px, 2.4vw, 34px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.cdoctors__grid > li:nth-child(1) {
  --i: 0;
}
.cdoctors__grid > li:nth-child(2) {
  --i: 1;
}
.cdoctors__grid > li:nth-child(3) {
  --i: 2;
}
.cdoctors__grid > li:nth-child(4) {
  --i: 3;
}
.cdoctors.has-js .reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
}
.cdoctors.has-js .reveal {
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.7, 0.2, 1),
    transform 0.8s cubic-bezier(0.22, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 100ms);
}

.dcard {
  --pad: 10px;
  --info-h: 176px;
  container-type: inline-size;
  position: relative;
  height: 100%;
  aspect-ratio: 1 / 1.62;
  background: var(--section-teal);
  border-radius: 16px;
  box-shadow: none;
  transition:
    transform 0.6s cubic-bezier(0.22, 0.7, 0.2, 1),
    box-shadow 0.6s ease;
}

.dcard:hover,
.dcard:focus-within {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 6px var(--section-teal),
    0 40px 60px -32px rgba(var(--clinic-navy-rgb), 0.45);
}
.dcard__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(170deg, var(--dr-photo-a), var(--dr-photo-b));
  transition: bottom 0.7s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.dcard:hover .dcard__photo,
.dcard:focus-within .dcard__photo {
  bottom: var(--info-h);
}
.dcard__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}
.dcard__photo::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
  background: linear-gradient(
    to top,
    rgba(var(--clinic-navy-rgb), 0.66) 0%,
    rgba(var(--clinic-navy-rgb), 0.38) 34%,
    rgba(var(--clinic-navy-rgb), 0) 66%
  );
}
.dcard:hover .dcard__photo::after {
  opacity: 0;
}
.dcard__sil {
  position: absolute;
  inset-inline: 0;
  margin-inline: auto;
  width: 62%;
  fill: rgba(var(--clinic-white-rgb), 0.78);
  bottom: calc(var(--info-h) - 14px);
  transition: bottom 0.7s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.dcard:hover .dcard__sil,
.dcard:focus-within .dcard__sil {
  bottom: -2%;
}
.dcard__body {
  position: absolute;
  z-index: 1;
  inset-inline: var(--pad);
  bottom: var(--pad);
  height: var(--info-h);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 12px 14px;
  min-width: 0;
  color: var(--section-ivory);
}
.dcard:hover .dcard__body,
.dcard:focus-within .dcard__body {
  color: var(--section-ivory);
}
.dcard__name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 1.28rem;
  font-weight: 600;
}
.dcard__verified {
  width: 22px;
  height: 22px;
  flex: none;
}
.dcard__desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(var(--clinic-white-rgb), 0.82);
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dcard:hover .dcard__desc,
.dcard:focus-within .dcard__desc {
  color: var(--section-ivory);
}
.dcard__foot {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dcard__stats {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
  font-size: 0.9rem;
}
.dcard__stats li {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.dcard__stats svg {
  width: 16px;
  height: 16px;
  color: var(--section-ivory);
}
.dcard__stats li:first-child svg {
  color: var(--section-gold);
}
.dcard:hover .dcard__stats svg,
.dcard:focus-within .dcard__stats svg {
  color: var(--section-ivory);
}
.dcard__btn {
  margin-inline-start: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  color: var(--dr-ink);
  text-decoration: none;
  background: var(--section-ivory);
  box-shadow:
    0 1px 0 rgba(var(--clinic-white-rgb), 0.75) inset,
    0 5px 12px -10px rgba(var(--clinic-navy-rgb), 0.3);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease;
}
.dcard__btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.35s ease;
}
.dcard__btn:hover {
  background: var(--clinic-surface);
  box-shadow: 0 8px 14px -12px rgba(var(--clinic-navy-rgb), 0.45);
}
.dcard__btn:hover svg {
  transform: rotate(90deg);
}
.dcard__btn:active {
  transform: scale(0.96);
}
.dcard__btn:focus-visible {
  outline: 2px solid var(--dr-ink);
  outline-offset: 3px;
}
@container (max-width: 290px) {
  .dcard__stats .u {
    display: none;
  }
}
@media (max-width: 1180px) {
  .cdoctors__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .cdoctors__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 380px;
    margin-inline: auto;
  }
  .dcard {
    --info-h: 148px;
    aspect-ratio: 1 / 1.5;
  }
  .dcard__name {
    gap: 5px;
    font-size: 1rem;
  }
  .dcard__verified {
    width: 18px;
    height: 18px;
  }
  .dcard__desc {
    font-size: 0.78rem;
    line-height: 1.5;
  }
  .dcard__foot {
    gap: 5px;
  }
  .dcard__stats {
    gap: 5px;
    font-size: 0.72rem;
  }
  .dcard__stats li {
    gap: 4px;
  }
  .dcard__stats svg {
    width: 13px;
    height: 13px;
  }
  .dcard__btn {
    gap: 4px;
    min-height: 36px;
    padding-inline: 8px;
    font-size: 0.75rem;
  }
  .dcard__btn svg {
    width: 13px;
    height: 13px;
  }
  .cdoctors__head {
    text-align: start;
  }
}
@media (hover: none) {
  .dcard:hover,
  .dcard:focus-within {
    transform: none;
  }
  .dcard:hover .dcard__photo,
  .dcard:focus-within .dcard__photo {
    bottom: 0;
  }
  .dcard:hover .dcard__photo::after {
    opacity: 1;
  }
  .dcard:hover .dcard__sil,
  .dcard:focus-within .dcard__sil {
    bottom: calc(var(--info-h) - 14px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cdoctors.has-js .reveal:not(.is-in) {
    opacity: 1;
    transform: none;
  }
  .cdoctors .reveal,
  .dcard,
  .dcard__photo,
  .dcard__sil,
  .dcard__photo::after,
  .dcard__btn,
  .dcard__btn svg {
    transition: none !important;
  }
}

.creviews {
  --rv-ivory: var(--clinic-page-bg);
  --rv-teal: var(--section-teal);
  --rv-navy: var(--section-navy);
  --rv-star: var(--section-gold);
  --rv-font: var(--section-font);
  --rv-card-w: 340px;
  --rv-gap: 20px;
  --rv-speed-top: 60s;
  --rv-speed-bottom: 70s;
  direction: rtl;
  box-sizing: border-box;
  overflow: hidden;
  padding: clamp(64px, 10vh, 120px) 0;
  background: var(--rv-ivory);
  color: var(--rv-navy);
  font-family: var(--rv-font);
}
.creviews *,
.creviews *::before,
.creviews *::after {
  box-sizing: border-box;
}
.creviews__head {
  max-width: 640px;
  margin: 0 0 clamp(32px, 5vh, 56px);
  padding-inline: clamp(20px, 6vw, 104px);
}
.creviews__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 0.9rem;
  font-weight: 600;
  color: var(--rv-teal);
}
.creviews__eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
}
.creviews__title {
  margin: 0 0 0.9rem;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.3;
  font-weight: 700;
  text-wrap: balance;
}
.creviews__lead {
  margin: 0;
  line-height: 1.9;
  font-size: 1.08rem;
  color: var(--clinic-text-muted);
  max-width: 52ch;
}
.creviews__rows {
  display: grid;
  gap: 0;
}
.creviews__row {
  padding-block: 12px;
  direction: ltr;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}
.creviews__track {
  display: flex;
  width: max-content;
  will-change: transform;
  --shift: 0px;
}
.creviews:not(.is-live) .creviews__row {
  overflow-x: auto;
  -webkit-mask-image: none;
  mask-image: none;
}
.creviews.is-live .creviews__row--top .creviews__track {
  animation: rv-right var(--rv-speed-top) linear infinite;
}
.creviews.is-live .creviews__row--bottom .creviews__track {
  animation: rv-left var(--rv-speed-bottom) linear infinite;
}
.creviews.is-offscreen .creviews__track,
.creviews.is-live .creviews__row:hover .creviews__track,
.creviews.is-live .creviews__row:focus-within .creviews__track {
  animation-play-state: paused;
}
@keyframes rv-right {
  from {
    transform: translateX(calc(-1 * var(--shift)));
  }
  to {
    transform: translateX(0);
  }
}
@keyframes rv-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--shift)));
  }
}
.rcard {
  direction: rtl;
  flex: none;
  width: var(--rv-card-w);
  margin-right: var(--rv-gap);
  display: flex;
  flex-direction: column;
  padding: 26px 26px 22px;
  background: var(--clinic-surface);
  border-radius: 8px;
  box-shadow:
    0 1px 0 rgba(var(--clinic-navy-rgb), 0.04),
    0 14px 30px -22px rgba(var(--clinic-navy-rgb), 0.3);
  transition:
    transform 0.4s cubic-bezier(0.22, 0.7, 0.2, 1),
    box-shadow 0.4s ease;
}
.rcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 44px -26px rgba(var(--clinic-navy-rgb), 0.45);
}
.rcard__stars {
  display: flex;
  gap: 3px;
  margin: 0 0 14px;
  color: var(--rv-star);
}
.rcard__stars svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.rcard__quote {
  margin: 0 0 20px;
  flex: 1;
  line-height: 1.9;
  font-size: 1.02rem;
  color: var(--clinic-navy);
}
.rcard__who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--clinic-border);
}
.rcard__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-weight: 700;
  color: var(--clinic-surface);
  background: var(--clinic-primary);
}
.rcard__name {
  margin: 0;
  font-weight: 700;
}
.rcard__meta {
  margin: 2px 0 0;
  font-size: 0.88rem;
  color: var(--rv-teal);
  font-weight: 500;
}
@media (max-width: 600px) {
  .creviews {
    --rv-card-w: 280px;
    --rv-gap: 14px;
    --rv-speed-top: 48s;
    --rv-speed-bottom: 56s;
  }
  .rcard {
    padding: 22px 20px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .creviews.is-live .creviews__track {
    animation: none !important;
  }
  .creviews.is-live .creviews__row {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .rcard {
    transition: none;
  }
}

.cservices {
  --sv-bg: var(--section-ivory);
  --sv-card: var(--clinic-surface);
  --sv-ink: var(--section-navy);
  --sv-muted: var(--clinic-text-muted);
  --sv-line: var(--clinic-border);
  --sv-teal: var(--section-teal);
  --sv-teal-soft: var(--clinic-teal-wash);
  --sv-font: var(--section-font);
  direction: rtl;
  box-sizing: border-box;
  padding: clamp(64px, 10vh, 120px) clamp(20px, 6vw, 104px);
  background: var(--sv-bg);
  color: var(--sv-ink);
  font-family: var(--sv-font);
}
.cservices *,
.cservices *::before,
.cservices *::after {
  box-sizing: border-box;
}
.cservices__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 48px;
  margin: 0 0 clamp(32px, 5vh, 56px);
}
.cservices__head > div {
  max-width: 54ch;
}
.cservices__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 0.9rem;
  font-weight: 600;
  color: var(--sv-teal);
}
.cservices__eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
}
.cservices__title {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}
.cservices__lead {
  margin: 14px 0 0;
  max-width: 40ch;
  line-height: 1.9;
  font-size: 1.06rem;
  color: var(--sv-muted);
}
.cservices__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(230px, auto);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cservices__grid > li {
  display: flex;
  min-width: 0;
}
.cservices__grid > li.is-feature {
  grid-column: span 2;
  grid-row: span 2;
}
.cservices__grid > li.is-wide {
  grid-column: span 4;
}
.cservices__grid > li:nth-child(1) {
  --i: 0;
}
.cservices__grid > li:nth-child(2) {
  --i: 1;
}
.cservices__grid > li:nth-child(3) {
  --i: 2;
}
.cservices__grid > li:nth-child(4) {
  --i: 3;
}
.cservices__grid > li:nth-child(5) {
  --i: 4;
}
.cservices__grid > li:nth-child(6) {
  --i: 5;
}
.cservices.has-js .reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(24px);
}
.cservices.has-js .reveal {
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.7, 0.2, 1),
    transform 0.8s cubic-bezier(0.22, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.scard {
  --mx: 50%;
  --my: 50%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(16px, 1.5vw, 24px);
  background: var(--sv-card);
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--sv-line);
  border-radius: 12px;
  transition:
    border-color 0.4s ease,
    background-color 0.4s ease,
    transform 0.5s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.scard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    360px circle at var(--mx) var(--my),
    var(--sv-teal-soft),
    transparent 70%
  );
  transition: opacity 0.4s ease;
}
.scard:hover,
.scard:focus-visible {
  border-color: rgba(var(--clinic-teal-rgb), 0.55);
  transform: translateY(-3px);
}
.scard:hover::before,
.scard:focus-visible::before {
  opacity: 1;
}
.scard:focus-visible {
  outline: 2px solid var(--sv-teal);
  outline-offset: 3px;
}
.scard__top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 0;
  padding-bottom: 10px;
}
.scard__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background: var(--sv-teal-soft);
  color: var(--sv-teal);
  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    transform 0.5s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.scard__icon svg {
  width: 26px;
  height: 26px;
}
.scard:hover .scard__icon {
  background: var(--sv-ink);
  color: var(--clinic-surface);
  transform: rotate(-6deg);
}
.scard__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
}
.scard__text {
  margin: 0 0 0.5rem;
  line-height: 1.85;
  color: var(--sv-muted);
  max-width: 38ch;
}
.scard__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--sv-teal);
  text-decoration: none;
}
.scard__more:focus-visible,
.scard__pill:focus-visible {
  outline: 2px solid var(--sv-teal);
  outline-offset: 3px;
}
.scard__arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--sv-line);
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}
.scard__arrow svg {
  width: 16px;
  height: 16px;
  transition: transform 0.35s ease;
}
.scard:hover .scard__arrow {
  background: var(--sv-ink);
  color: var(--clinic-surface);
  border-color: var(--sv-ink);
}
.scard:hover .scard__arrow svg {
  transform: translateX(-3px);
}
.scard--feature {
  background: var(--sv-ink);
  background-image:
    linear-gradient(
      rgba(var(--clinic-navy-rgb), 0.58),
      rgba(var(--clinic-navy-rgb), 0.72)
    ),
    var(--scard-feature-image, url("images/Best Home Healthcare Chennai.jpeg"));
  background-size: cover;
  background-position: center;
  color: var(--section-ivory-soft);
  border-color: var(--sv-ink);
}
.scard--feature::before {
  background: radial-gradient(
    420px circle at var(--mx) var(--my),
    rgba(var(--clinic-teal-rgb), 0.16),
    transparent 70%
  );
}
.scard--feature:hover {
  border-color: var(--clinic-light-teal);
}
.scard--feature .scard__text {
  color: rgba(var(--clinic-white-rgb), 0.78);
  max-width: 42ch;
}
.scard--feature .scard__title {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
}
.scard--feature .scard__icon {
  background: rgba(var(--clinic-white-rgb), 0.1);
  color: var(--clinic-light-teal);
  width: 64px;
  height: 64px;
  border-radius: 9px;
}
.scard--feature .scard__icon svg {
  width: 30px;
  height: 30px;
}
.scard--feature:hover .scard__icon {
  background: var(--section-ivory-soft);
  color: var(--sv-ink);
}
.scard--feature .scard__no {
  color: rgba(var(--clinic-white-rgb), 0.55);
}
.scard--feature .scard__arrow {
  border-color: rgba(var(--clinic-white-rgb), 0.3);
}
.scard--feature:hover .scard__arrow {
  background: var(--section-ivory-soft);
  color: var(--sv-ink);
  border-color: var(--section-ivory-soft);
}
.scard--feature::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-end: -140px;
  top: -140px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle at center,
    transparent 0 69px,
    rgba(var(--clinic-white-rgb), 0.09) 69px 70px
  );
}
.scard__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
}
.scard__chips li {
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  font-size: 0.88rem;
  border: 1px solid rgba(var(--clinic-white-rgb), 0.22);
  color: rgba(var(--clinic-white-rgb), 0.9);
}
.scard--wide {
  flex-direction: row;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  background: var(--clinic-light-teal);
  border-color: rgba(var(--clinic-teal-rgb), 0.25);
}
.scard--wide .scard__main {
  flex: 1;
  min-width: 0;
}
.scard--wide .scard__title {
  font-size: 1.6rem;
}
.scard--wide .scard__icon {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  background: var(--clinic-surface);
}
.scard--wide .scard__icon svg {
  width: 32px;
  height: 32px;
}
.scard--wide .scard__text {
  margin-bottom: 0;
  max-width: 60ch;
}
.scard__pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 8px;
  font-weight: 600;
  background: var(--clinic-primary);
  color: var(--clinic-surface);
  text-decoration: none;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}
.scard__pill svg {
  width: 16px;
  height: 16px;
  transition: transform 0.35s ease;
}
.scard--wide:hover .scard__pill svg {
  transform: translateX(-4px);
}
@media (max-width: 1000px) {
  .cservices__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cservices__grid > li.is-feature {
    grid-column: span 2;
    grid-row: auto;
  }
  .cservices__grid > li.is-wide {
    grid-column: span 2;
  }
}
@media (max-width: 620px) {
  .cservices__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
  .cservices__grid > li.is-feature,
  .cservices__grid > li.is-wide {
    grid-column: span 2;
  }
  .scard {
    min-height: 220px;
    padding: 16px;
  }
  .scard__top {
    padding-bottom: 10px;
  }
  .scard__icon,
  .scard--feature .scard__icon,
  .scard--wide .scard__icon {
    width: 44px;
    height: 44px;
  }
  .scard__icon svg,
  .scard--feature .scard__icon svg,
  .scard--wide .scard__icon svg {
    width: 22px;
    height: 22px;
  }
  .scard__title {
    font-size: 1.05rem;
  }
  .scard--feature .scard__title {
    font-size: 1.2rem;
  }
  .scard__text {
    /* margin-bottom: 0.50rem; */
    font-size: 0.78rem;
    line-height: 1.6;
  }
  .scard__chips {
    gap: 5px;
  }
  .scard__chips li {
    padding: 0.25rem 0.5rem;
    font-size: 0.68rem;
  }
  .scard__more {
    font-size: 0.85rem;
  }
  .scard__arrow {
    width: 32px;
    height: 32px;
  }
  .scard--wide {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 14px;
  }
  .scard__pill {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }
}
@media (hover: none) {
  .scard:hover {
    transform: none;
  }
  .scard::before {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cservices.has-js .reveal:not(.is-in) {
    opacity: 1;
    transform: none;
  }
  .cservices .reveal,
  .scard,
  .scard::before,
  .scard__icon,
  .scard__arrow,
  .scard__arrow svg,
  .scard__pill svg {
    transition: none !important;
  }
}

.cwhy {
  --wy-bg: var(--section-navy);
  --wy-ivory: var(--section-ivory);
  --wy-teal: var(--clinic-light-teal);
  --wy-teal-deep: var(--section-teal);
  --wy-line: rgba(var(--clinic-white-rgb), 0.14);
  --wy-muted: rgba(var(--clinic-white-rgb), 0.76);
  --wy-font: var(--section-font);
  --wy-media-h: clamp(380px, 60svh, 540px);
  --wy-header: 76px;
  position: relative;
  overflow: clip;
  isolation: isolate;
  direction: rtl;
  box-sizing: border-box;
  padding: clamp(72px, 11vh, 140px) clamp(20px, 6vw, 104px);
  background: var(--wy-bg);
  color: var(--wy-ivory);
  font-family: var(--wy-font);
}
.cwhy *,
.cwhy *::before,
.cwhy *::after {
  box-sizing: border-box;
}
.cwhy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-start: -220px;
  bottom: -260px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle at center,
    transparent 0 79px,
    rgba(var(--clinic-white-rgb), 0.06) 79px 80px
  );
}
.cwhy__inner {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.cwhy__content,
.cwhy__mediacol {
  min-width: 0;
}
.cwhy__intro {
  margin-bottom: clamp(40px, 8vh, 80px);
}
.cwhy__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 1rem;
  font-weight: 600;
  color: var(--wy-teal);
}
.cwhy__eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
}
.cwhy__title {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}
.cwhy__lead {
  margin: 0 0 2rem;
  max-width: 40ch;
  line-height: 1.9;
  font-size: 1.06rem;
  color: var(--wy-muted);
}
.cwhy__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 8px;
  background: var(--clinic-primary);
  color: var(--clinic-surface);
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}
.cwhy__cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.35s ease;
}
.cwhy__cta:hover {
  background: var(--clinic-primary-hover);
  transform: translateY(-2px);
}
.cwhy__cta:hover svg {
  transform: translateX(-4px);
}
.cwhy__cta:focus-visible {
  outline: 2px solid var(--wy-ivory);
  outline-offset: 4px;
}
.cwhy__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(36px, 6vh, 56px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--wy-line);
}
.cwhy__stats li {
  padding: 22px 0 0;
}
.cwhy__stats li + li {
  padding-inline-start: 18px;
  border-inline-start: 1px solid var(--wy-line);
}
.cwhy__num {
  display: block;
  white-space: nowrap;
  font-size: clamp(1.5rem, 2.1vw, 2.1rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: start;
}
.cwhy__label {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.95rem;
  color: var(--wy-muted);
}
.cwhy__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--wy-line);
}
.cwhy__item {
  border-bottom: 1px solid var(--wy-line);
}
.cwhy__list > li:nth-child(1) {
  --i: 1;
}
.cwhy__list > li:nth-child(2) {
  --i: 2;
}
.cwhy__list > li:nth-child(3) {
  --i: 3;
}
.cwhy__list > li:nth-child(4) {
  --i: 4;
}
.cwhy__list > li:nth-child(5) {
  --i: 5;
}
.wrow {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0 clamp(16px, 2.4vw, 32px);
  padding: clamp(28px, 6vh, 52px) clamp(4px, 1vw, 14px);
  transition:
    background-color 0.4s ease,
    padding 0.4s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.wrow::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--wy-teal);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.wrow:hover,
.wrow:focus-within {
  background: rgba(var(--clinic-white-rgb), 0.04);
  padding-inline-start: clamp(14px, 2vw, 26px);
}
.wrow:hover::before,
.wrow:focus-within::before {
  transform: scaleY(1);
}
.cwhy__item.is-current .wrow {
  background: rgba(var(--clinic-white-rgb), 0.04);
  padding-inline-start: clamp(14px, 2vw, 26px);
}
.cwhy__item.is-current .wrow::before {
  transform: scaleY(1);
}
.cwhy__item.is-current .wrow__no {
  color: var(--wy-teal);
}
.cwhy__item.is-current .wrow__icon {
  border-color: var(--wy-teal);
}
.wrow__no {
  padding-top: 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(var(--clinic-white-rgb), 0.62);
  font-variant-numeric: tabular-nums;
  transition: color 0.35s ease;
}
.wrow:hover .wrow__no {
  color: var(--wy-teal);
}
.wrow__title {
  margin: 0 0 0.45rem;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 700;
}
.wrow__text {
  margin: 0;
  max-width: 52ch;
  line-height: 1.85;
  color: var(--wy-muted);
}
.wrow__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--wy-line);
  color: var(--wy-teal);
  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease,
    transform 0.5s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.wrow__icon svg {
  width: 24px;
  height: 24px;
}
.wrow:hover .wrow__icon {
  background: var(--wy-ivory);
  color: var(--wy-bg);
  border-color: var(--wy-ivory);
  transform: rotate(-8deg);
}
.cwhy__media {
  position: sticky;
  top: max(
    calc(var(--wy-header) + 24px),
    calc((100svh - var(--wy-media-h)) / 2)
  );
  height: var(--wy-media-h);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--wy-line);
  border-radius: 12px;
  background: var(--clinic-navy);
}
.cwhy__poster,
.cwhy__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.cwhy.is-static .cwhy__video,
.cwhy.is-fallback .cwhy__video {
  display: none;
}
.cwhy__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(var(--clinic-navy-rgb), 0.62) 0%,
      rgba(var(--clinic-navy-rgb), 0) 42%
    ),
    rgba(var(--clinic-navy-rgb), 0.1);
}
.cwhy__segs {
  position: absolute;
  z-index: 1;
  inset-inline: 20px;
  bottom: 18px;
  display: none;
  gap: 6px;
}
.cwhy.is-scrub .cwhy__segs {
  display: flex;
}
.cwhy__seg {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(var(--clinic-white-rgb), 0.28);
  transition: background-color 0.4s ease;
}
.cwhy__seg.is-on {
  background: var(--wy-ivory);
}
.cwhy.has-js .reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(24px);
}
.cwhy.has-js .reveal {
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.7, 0.2, 1),
    transform 0.8s cubic-bezier(0.22, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
@media (max-width: 980px) {
  .cwhy {
    --wy-header: 66px;
    --wy-media-h: clamp(180px, 26svh, 240px);
    padding: 0 0 clamp(72px, 11vh, 140px);
  }
  .cwhy__inner {
    grid-template-columns: 1fr;
  }
  .cwhy__mediacol {
    order: -1;
  }
  .cwhy__content {
    padding-inline: clamp(20px, 6vw, 104px);
  }
  .cwhy__media {
    position: static;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    border-radius: 0 0 12px 12px;
  }
  .cwhy.is-scrub .cwhy__mediacol {
    grid-area: 1 / 1;
    order: 0;
    z-index: 2;
    pointer-events: none;
  }
  .cwhy.is-scrub .cwhy__content {
    grid-area: 1 / 1;
    padding-block: calc(var(--wy-media-h) + 28px);
  }
  .cwhy.is-scrub .cwhy__media {
    position: sticky;
    top: 0;
    pointer-events: auto;
  }
}
@media (min-width: 981px) and (max-width: 1180px), (max-width: 640px) {
  .cwhy__stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .cwhy__stats li + li {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
  .cwhy__stats li:nth-child(even) {
    padding-inline-start: 24px;
    border-inline-start: 1px solid var(--wy-line);
  }
  .cwhy__stats li:nth-child(odd) {
    padding-inline-end: 20px;
  }
  .cwhy__stats li:nth-child(n + 3) {
    margin-top: 16px;
    border-top: 1px solid var(--wy-line);
    padding-top: 24px;
  }
}
@media (max-width: 640px) {
  .cwhy__num {
    font-size: clamp(1.9rem, 8vw, 2.4rem);
  }
}
@media (max-width: 560px) {
  .wrow {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .wrow__icon {
    display: none;
  }
  .cwhy__cta {
    width: 100%;
    justify-content: center;
  }
}
@media (hover: none) {
  .wrow:hover {
    background: none;
    padding-inline-start: clamp(4px, 1vw, 14px);
  }
  .wrow:hover::before {
    transform: scaleY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cwhy.has-js .reveal:not(.is-in) {
    opacity: 1;
    transform: none;
  }
  .cwhy .reveal,
  .wrow,
  .wrow::before,
  .wrow__icon,
  .cwhy__cta,
  .cwhy__cta svg,
  .cwhy__media,
  .cwhy__seg {
    transition: none !important;
  }
}

.clinic-booking {
  min-height: 50vh;
  padding: 12vh 6vw;
  background: var(--clinic-ivory-soft);
}
.clinic-booking h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
}
.clinic-booking p {
  max-width: 52ch;
  line-height: 1.9;
}
.booking-page {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  padding: 96px clamp(16px, 4vw, 64px) 24px;
  background: var(--clinic-ivory);
}
.booking-page__content,
.booking-page .bk {
  width: 100%;
  max-width: none;
}
.booking-page .bk {
  margin: 0;
}
.clinic-booking__unavailable {
  margin: 0 auto;
  text-align: center;
}
@media (max-width: 900px) {
  .booking-page {
    padding: 78px 12px 16px;
  }
}
.rcard__stars .is-empty {
  opacity: 0.22;
}

html {
  scroll-behavior: smooth;
}
html.menu-open {
  overflow: hidden;
}
#home,
#services,
#doctors,
#why,
#reviews,
#faq,
#contact,
#booking {
  scroll-margin-top: 0;
}
#services,
#doctors,
#why,
#reviews,
#faq {
  scroll-margin-top: 64px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.chead {
  --h: 76px;
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--h);
  direction: rtl;
  font-family: var(--clinic-font);
  color: var(--clinic-ivory-soft);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease;
}
.chead::before {
  content: "";
  position: absolute;
  inset: 0 0 -28px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(var(--clinic-navy-rgb), 0.55),
    rgba(var(--clinic-navy-rgb), 0)
  );
  transition: opacity 0.4s ease;
}
.chead.is-solid {
  background: var(--clinic-surface);
  color: var(--clinic-navy);
  border-bottom-color: var(--clinic-border);
  box-shadow: 0 4px 14px -8px rgba(var(--clinic-navy-rgb), 0.28);
}
.chead.is-solid::before {
  opacity: 0;
}
.chead__bar {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 100%;
  padding-inline: clamp(20px, 6vw, 104px);
}
.chead__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.3rem;
}
.chead__logo svg {
  width: 36px;
  height: 36px;
  color: var(--clinic-teal);
  transition: color 0.4s ease;
}
.chead:not(.is-solid) .chead__logo svg,
.chead.is-open .chead__logo svg {
  color: var(--clinic-light-teal);
}
.chead__nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  margin-inline: auto;
}
.chead__link {
  position: relative;
  padding: 8px 2px;
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.98rem;
  opacity: 0.82;
  transition:
    color 0.25s ease,
    opacity 0.25s ease;
}
.chead__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.chead__link:hover,
.chead__link.is-active {
  opacity: 1;
}
.chead__link:hover::after,
.chead__link.is-active::after {
  transform: scaleX(1);
}
.chead.is-solid:not(.is-open) .chead__link:hover,
.chead.is-solid:not(.is-open) .chead__link.is-active {
  color: var(--clinic-primary);
}
.chead:not(.is-solid) .chead__link:hover,
.chead:not(.is-solid) .chead__link.is-active,
.chead.is-open .chead__link:hover,
.chead.is-open .chead__link.is-active,
.chead__panel .chead__plink[aria-current="page"] {
  color: var(--clinic-light-teal);
}
.chead__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.96rem;
  text-decoration: none;
  background: var(--clinic-primary);
  color: var(--clinic-surface);
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}
.chead.is-solid .chead__cta {
  background: var(--clinic-primary);
  color: var(--clinic-surface);
}
.chead__cta svg {
  width: 15px;
  height: 15px;
  transition: transform 0.35s ease;
}
.chead__cta:hover {
  transform: translateY(-1px);
}
.chead__cta:hover svg {
  transform: translateX(-3px);
}
.chead a:focus-visible,
.chead button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}
.chead__burger {
  display: none;
  margin-inline-start: auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.chead__burger span {
  display: block;
  width: 24px;
  height: 1.8px;
  margin: 6px auto;
  background: currentColor;
  border-radius: 1px;
  transition:
    transform 0.35s ease,
    opacity 0.25s ease;
}
.chead.is-open .chead__burger span:nth-child(1) {
  transform: translateY(7.8px) rotate(45deg);
}
.chead.is-open .chead__burger span:nth-child(2) {
  opacity: 0;
}
.chead.is-open .chead__burger span:nth-child(3) {
  transform: translateY(-7.8px) rotate(-45deg);
}
.chead__panel {
  position: fixed;
  inset: var(--h) 0 0;
  z-index: 99;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 24px clamp(20px, 6vw, 48px) 32px;
  background: var(--clinic-navy);
  color: var(--clinic-ivory-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    visibility 0s linear 0.35s;
}
.chead__panel a.chead__plink {
  padding: 16px 0;
  border-bottom: 1px solid rgba(var(--clinic-white-rgb), 0.16);
  color: inherit;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 600;
}
.chead__panel .chead__cta {
  margin-top: 24px;
  justify-content: center;
  min-height: 54px;
  background: var(--clinic-primary);
  color: var(--clinic-surface);
}
@media (max-width: 900px) {
  .chead {
    --h: 66px;
  }
  .chead__nav,
  .chead > .chead__bar > .chead__cta {
    display: none;
  }
  .chead__burger {
    display: block;
  }
  .chead__panel {
    display: flex;
  }
  .chead.is-open {
    background: var(--clinic-navy);
    color: var(--clinic-ivory-soft);
    border-bottom-color: rgba(var(--clinic-white-rgb), 0.16);
  }
  .chead.is-open::before {
    opacity: 0;
  }
  .chead.is-open .chead__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chead,
  .chead *,
  .chead__panel {
    transition: none !important;
  }
}

.cfoot {
  --ft-bg: var(--clinic-navy);
  --ft-ink: var(--clinic-surface);
  --ft-muted: rgba(var(--clinic-white-rgb), 0.76);
  --ft-line: rgba(var(--clinic-white-rgb), 0.16);
  --ft-teal: var(--clinic-light-teal);
  direction: rtl;
  box-sizing: border-box;
  padding: 0 clamp(20px, 6vw, 104px);
  background: var(--ft-bg);
  color: var(--ft-ink);
  font-family: var(--clinic-font);
}
.cfoot *,
.cfoot *::before,
.cfoot *::after {
  box-sizing: border-box;
}
.cfoot__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding: clamp(48px, 8vh, 88px) 0;
  border-bottom: 1px solid var(--ft-line);
}
.cfoot__cta h2 {
  max-width: 20ch;
  margin: 0 0 0.6rem;
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}
.cfoot__cta p {
  max-width: 44ch;
  margin: 0;
  color: var(--ft-muted);
  line-height: 1.9;
}
.cfoot__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 56px;
  padding: 0 32px;
  border-radius: 8px;
  background: var(--clinic-primary);
  color: var(--clinic-surface);
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}
.cfoot__btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.35s ease;
}
.cfoot__btn:hover {
  background: var(--clinic-primary-hover);
  transform: translateY(-2px);
}
.cfoot__btn:hover svg {
  transform: translateX(-4px);
}
.cfoot__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1.25fr 1.3fr;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(40px, 7vh, 72px) 0;
}
.cfoot__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1rem;
  color: inherit;
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 700;
}
.cfoot__brand svg {
  width: 38px;
  height: 38px;
  color: var(--ft-teal);
}
.cfoot__about {
  max-width: 34ch;
  margin: 0 0 1.4rem;
  color: var(--ft-muted);
  line-height: 1.9;
}
.cfoot__social {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cfoot__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ft-line);
  border-radius: 50%;
  color: var(--ft-ink);
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}
.cfoot__social a:hover {
  background: var(--ft-ink);
  color: var(--ft-bg);
  border-color: var(--ft-ink);
}
.cfoot__social svg {
  width: 20px;
  height: 20px;
}
.cfoot__title {
  margin: 0 0 1.2rem;
  color: var(--ft-teal);
  font-size: 1rem;
  font-weight: 700;
}
.cfoot__list {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cfoot__list a {
  color: var(--ft-muted);
  text-decoration: none;
  transition: color 0.25s ease;
}
.cfoot__list a:hover,
.cfoot__row a:hover,
.cfoot__bottom a:hover {
  color: var(--ft-ink);
}
.cfoot__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ft-muted);
  line-height: 1.7;
}
.cfoot__row svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--ft-teal);
}
.cfoot__row a {
  color: inherit;
  text-decoration: none;
}
.cfoot__row bdi {
  direction: ltr;
  unicode-bidi: isolate;
}
.cfoot__hours {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ft-muted);
}
.cfoot__hours li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--ft-line);
}
.cfoot__hours li:last-child {
  border-bottom: 0;
}
.cfoot__hours b {
  color: var(--ft-ink);
  font-weight: 600;
  white-space: nowrap;
}
.cfoot__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  padding: 24px 0 28px;
  border-top: 1px solid var(--ft-line);
  color: var(--ft-muted);
  font-size: 0.9rem;
}
.cfoot__bottom ul {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cfoot__bottom a {
  color: inherit;
  text-decoration: none;
}
.cfoot a:focus-visible {
  outline: 2px solid var(--ft-ink);
  outline-offset: 4px;
  border-radius: 2px;
}
@media (max-width: 980px) {
  .cfoot__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .cfoot__grid {
    grid-template-columns: 1fr;
  }
  .cfoot__btn {
    width: 100%;
    justify-content: center;
  }
  .cfoot__bottom {
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cfoot a,
  .cfoot__btn svg {
    transition: none !important;
  }
}

/* ==========================================================================
   صفحة الأطباء
   ========================================================================== */
.dpage {
  --dp-bg: #eef4f2;
  --dp-card: var(--clinic-surface);
  --dp-ink: var(--clinic-navy);
  --dp-muted: var(--clinic-text-muted);
  --dp-line: #d6e2df;
  --dp-teal: var(--clinic-teal);
  --dp-teal-soft: var(--clinic-teal-wash);
  --dp-green: var(--clinic-success);
  --dp-warning: var(--clinic-warning);
  --dp-error: var(--clinic-error);
  direction: rtl;
  font-family: var(--clinic-font);
  background: var(--dp-bg);
  color: var(--dp-ink);
}
.dpage,
.dpage *,
.dpage *::before,
.dpage *::after {
  box-sizing: border-box;
}
.dpage .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.dhero {
  position: relative;
  overflow: hidden;
  padding: calc(76px + clamp(36px, 7vh, 72px)) clamp(20px, 6vw, 104px)
    clamp(40px, 6vh, 68px);
  background-color: var(--clinic-navy);
  background-image:
    linear-gradient(120deg, rgba(var(--clinic-teal-rgb), 0.5), transparent 62%),
    repeating-linear-gradient(
      135deg,
      transparent 0 26px,
      rgba(var(--clinic-white-rgb), 0.035) 26px 27px
    );
  color: var(--clinic-surface);
}
.dhero__crumbs {
  display: flex;
  gap: 0.6rem;
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
  color: rgba(var(--clinic-white-rgb), 0.7);
  font-size: 0.92rem;
}
.dhero__crumbs li + li::before {
  content: "/";
  margin-inline-end: 0.6rem;
  opacity: 0.5;
}
.dhero__crumbs a {
  color: inherit;
  text-decoration: none;
}
.dhero__crumbs a:hover {
  color: var(--clinic-surface);
}
.dhero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 48px;
}
.dhero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 0.9rem;
  color: var(--clinic-light-teal);
  font-weight: 600;
}
.dhero__eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
}
.dhero__title {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}
.dhero__lead {
  max-width: 44ch;
  margin: 0;
  padding-inline-start: 20px;
  border-inline-start: 2px solid var(--clinic-warning);
  color: rgba(var(--clinic-white-rgb), 0.82);
  font-size: 1.06rem;
  line-height: 1.9;
}
.dtool {
  display: grid;
  grid-template-columns: minmax(220px, 420px) 1fr;
  grid-template-areas: "search side" "chips chips";
  align-items: center;
  gap: 14px 24px;
  padding: 18px clamp(20px, 6vw, 104px);
  border-block: 1px solid var(--dp-line);
  background: var(--clinic-surface);
  box-shadow: 0 12px 28px -24px rgba(var(--clinic-navy-rgb), 0.48);
}
.dtool__search {
  position: relative;
  grid-area: search;
}
.dtool__search svg {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  color: var(--dp-muted);
  pointer-events: none;
  translate: 0 -50%;
}
.dtool__input {
  width: 100%;
  height: 46px;
  padding-inline: 44px 14px;
  border: 1px solid var(--dp-line);
  border-radius: var(--clinic-radius-pill);
  background: var(--dp-card);
  color: var(--dp-ink);
  font: inherit;
  font-size: 0.98rem;
  transition: border-color 0.25s ease;
}
.dtool__input::placeholder {
  color: var(--clinic-text-muted);
}
.dtool__input:hover {
  border-color: rgba(var(--clinic-navy-rgb), 0.3);
}
.dtool__input:focus-visible {
  outline: 2px solid var(--dp-teal);
  outline-offset: 2px;
  border-color: transparent;
}
.dtool__chips {
  display: flex;
  flex-wrap: wrap;
  grid-area: chips;
  gap: 8px;
}
.dtool__chips::-webkit-scrollbar {
  display: none;
}
.dtool__chip {
  flex: none;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--dp-line);
  border-radius: var(--clinic-radius-pill);
  background: transparent;
  color: var(--dp-ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 500;
  white-space: nowrap;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}
.dtool__chip:hover {
  border-color: rgba(var(--clinic-navy-rgb), 0.35);
}
.dtool__chip[aria-pressed="true"] {
  border-color: var(--clinic-primary);
  background: var(--clinic-primary);
  color: var(--clinic-surface);
}
.dtool__chip:focus-visible,
.dtool__switch:focus-within,
.dtool__select:focus-visible {
  outline: 2px solid var(--dp-teal);
  outline-offset: 2px;
}
.dtool__side {
  display: flex;
  grid-area: side;
  align-items: center;
  justify-self: end;
  gap: 16px;
}
.dtool__switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--clinic-radius-pill);
  cursor: pointer;
  font-size: 0.94rem;
  font-weight: 500;
  white-space: nowrap;
}
.dtool__switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.dtool__track {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: var(--clinic-radius-pill);
  background: rgba(var(--clinic-navy-rgb), 0.18);
  transition: background-color 0.25s ease;
}
.dtool__track::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--clinic-radius-circle);
  background: var(--clinic-surface);
  transition: transform 0.3s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.dtool__switch input:checked + .dtool__track {
  background: var(--dp-green);
}
.dtool__switch input:checked + .dtool__track::after {
  transform: translateX(-16px);
}
.dtool__select {
  height: 46px;
  padding-inline: 16px 10px;
  border: 1px solid var(--dp-line);
  border-radius: var(--clinic-radius-pill);
  background: var(--dp-card);
  color: var(--dp-ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.94rem;
}
.dpage:not(.has-js) .dtool {
  display: none;
}
.spage__count {
  margin: 0;
  color: var(--dp-muted);
  font-size: 0.98rem;
}
.spage__services {
  margin-top: clamp(24px, 4vh, 40px);
  padding: 0 clamp(20px, 6vw, 104px) clamp(64px, 10vh, 120px);
  border-top: 1px solid var(--dp-line);
  background: var(--clinic-secondary-bg);
}
.spage__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.spage__item {
  display: flex;
  min-width: 0;
}
.spage__item[hidden] {
  display: none;
}
.spage__card {
  min-height: 300px;
  border-color: var(--dp-line);
  border-block-start: 4px solid var(--service-accent, var(--clinic-primary));
  border-radius: 10px;
  box-shadow: 0 14px 34px -28px rgba(var(--clinic-navy-rgb), 0.55);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}
.spage__item[data-category="family"] {
  --service-accent: #16786f;
  --service-soft: #e1f2ed;
}
.spage__item[data-category="dental"] {
  --service-accent: #35688e;
  --service-soft: #e2edf4;
}
.spage__item[data-category="derma"] {
  --service-accent: #a44f68;
  --service-soft: #f4e6eb;
}
.spage__item[data-category="peds"] {
  --service-accent: #a66b19;
  --service-soft: #f4ecd9;
}
.spage__item[data-category="women"] {
  --service-accent: #9d4967;
  --service-soft: #f4e5eb;
}
.spage__item[data-category="diagnostics"] {
  --service-accent: #52658c;
  --service-soft: #e8edf5;
}
.spage__card:hover,
.spage__card:focus-visible {
  border-color: var(--service-accent, var(--clinic-primary));
  box-shadow: 0 22px 42px -28px rgba(var(--clinic-navy-rgb), 0.62);
  transform: translateY(-4px);
}
.spage__card .scard__icon {
  background: var(--service-soft, #dceee8);
  color: var(--service-accent, var(--clinic-primary));
}
.spage__card:hover .scard__icon,
.spage__card:focus-visible .scard__icon {
  background: var(--service-accent, var(--clinic-primary));
  color: var(--clinic-surface);
}
.spage__card .scard__more {
  color: var(--service-accent, var(--clinic-primary));
}
.spage__card .scard__arrow {
  border-color: var(--service-accent, var(--clinic-primary));
  color: var(--service-accent, var(--clinic-primary));
}
.spage__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 20px;
  padding: 0;
  list-style: none;
}
.spage__tags li {
  padding: 6px 10px;
  border: 1px solid var(--service-soft, var(--sv-line));
  border-radius: 8px;
  background: var(--service-soft, var(--sv-teal-soft));
  color: var(--service-accent, var(--sv-ink));
  font-size: 0.82rem;
}
@media (prefers-reduced-motion: reduce) {
  .spage__card,
  .spage__card .scard__icon {
    transition: none !important;
  }
  .spage__card:hover,
  .spage__card:focus-visible {
    transform: none;
  }
}
.spage__card--feature .spage__tags li {
  border-color: rgba(var(--clinic-white-rgb), 0.25);
  background: rgba(var(--clinic-white-rgb), 0.1);
  color: var(--section-ivory-soft);
}
.spage__empty {
  padding: 56px 24px;
  border: 1px dashed var(--dp-line);
  border-radius: var(--clinic-radius-lg);
  text-align: center;
}
.spage__empty[hidden] {
  display: none;
}
.spage__empty h2 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
}
.spage__empty p {
  margin: 0 0 1.2rem;
  color: var(--dp-muted);
}
.ccontact__channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 0 clamp(20px, 6vw, 104px);
  margin-bottom: clamp(40px, 7vh, 76px);
  padding-top: 28px;
  background: var(--clinic-secondary-bg);
}
.ccontact__channel {
  --channel-accent: var(--clinic-primary);
  --channel-soft: #e1f2ed;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 92px;
  padding: 20px;
  border: 1px solid var(--dp-line);
  border-block-start: 3px solid var(--channel-accent);
  border-radius: 10px;
  background: var(--dp-card);
  color: var(--dp-ink);
  text-decoration: none;
  box-shadow: 0 14px 32px -28px rgba(var(--clinic-navy-rgb), 0.6);
  transition:
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.ccontact__channels > a:nth-child(2) {
  --channel-accent: #35688e;
  --channel-soft: #e2edf4;
}
.ccontact__channels > a:nth-child(3) {
  --channel-accent: #25804b;
  --channel-soft: #e5f2e8;
}
.ccontact__channel:hover {
  border-color: var(--channel-accent);
  box-shadow: 0 20px 34px -26px rgba(var(--clinic-navy-rgb), 0.62);
  transform: translateY(-2px);
}
.ccontact__icon,
.ccontact__small-icon {
  display: grid;
  flex: none;
  place-items: center;
  background: var(--dp-teal-soft);
  color: var(--dp-teal);
}
.ccontact__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--clinic-radius-md);
}
.ccontact__channels .ccontact__icon {
  background: var(--channel-soft);
  color: var(--channel-accent);
}
.ccontact__icon svg {
  width: 22px;
  height: 22px;
}
.ccontact__channel-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.ccontact__channel-copy span {
  color: var(--dp-muted);
  font-size: 0.9rem;
}
.ccontact__channel-copy bdi {
  overflow-wrap: anywhere;
  font-weight: 600;
}
.ccontact__arrow {
  flex: none;
  width: 18px;
  height: 18px;
  margin-inline-start: auto;
  color: var(--clinic-primary);
}
.ccontact__channels .ccontact__arrow {
  color: var(--channel-accent);
}
.ccontact__channel:focus-visible,
.ccontact__text-link:focus-visible,
.ccontact__submit:focus-visible,
.ccontact__emergency:focus-visible {
  outline: 2px solid var(--dp-teal);
  outline-offset: 3px;
}
.ccontact__main {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.9fr);
  align-items: stretch;
  gap: clamp(20px, 3vw, 36px);
  padding: 0 clamp(20px, 6vw, 104px) clamp(64px, 10vh, 120px);
}
.ccontact__form-panel,
.ccontact__info-block {
  border: 1px solid var(--dp-line);
  border-radius: var(--clinic-radius-xl);
  background: var(--dp-card);
}
.ccontact__form-panel {
  padding: clamp(22px, 3vw, 38px);
  border-block-start: 4px solid var(--clinic-primary);
  border-radius: 10px;
  box-shadow: 0 18px 42px -34px rgba(var(--clinic-navy-rgb), 0.62);
}
.ccontact__form {
  scroll-margin-top: clamp(168px, 20vh, 190px);
}
.ccontact__section-head {
  max-width: 62ch;
  margin-bottom: 28px;
}
.ccontact__eyebrow {
  margin: 0 0 10px;
  color: var(--dp-teal);
  font-size: 0.92rem;
  font-weight: 600;
}
.ccontact__section-head h2 {
  margin: 0 0 10px;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  line-height: 1.4;
}
.ccontact__section-head > p:last-child {
  margin: 0;
  color: var(--dp-muted);
  line-height: 1.85;
}
.ccontact__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.ccontact__field {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: var(--dp-ink);
  font-size: 0.95rem;
  font-weight: 600;
}
.ccontact__field--wide {
  grid-column: 1 / -1;
}
.ccontact__field input,
.ccontact__field select,
.ccontact__field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--dp-line);
  border-radius: var(--clinic-radius-md);
  background: var(--dp-bg);
  color: var(--dp-ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.ccontact__field input,
.ccontact__field select {
  height: 48px;
  padding: 0 14px;
}
.ccontact__field textarea {
  min-height: 132px;
  padding: 12px 14px;
  resize: vertical;
}
.ccontact__field input::placeholder,
.ccontact__field textarea::placeholder {
  color: var(--clinic-text-muted);
}
.ccontact__field input:focus-visible,
.ccontact__field select:focus-visible,
.ccontact__field textarea:focus-visible {
  outline: none;
  border-color: var(--dp-teal);
  box-shadow: 0 0 0 3px var(--dp-teal-soft);
}
.ccontact__field input:user-invalid,
.ccontact__field select:user-invalid,
.ccontact__field textarea:user-invalid {
  border-color: var(--clinic-error);
}
.ccontact__submit-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 22px;
}
.ccontact__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--clinic-radius-md);
  background: var(--clinic-primary);
  color: var(--clinic-surface);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}
.ccontact__submit:hover {
  background: var(--clinic-primary-hover);
  transform: translateY(-1px);
}
.ccontact__submit svg {
  width: 18px;
  height: 18px;
}
.ccontact__form-note,
.ccontact__aside-note {
  margin: 0;
  color: var(--dp-muted);
  font-size: 0.88rem;
  line-height: 1.7;
}
.ccontact__aside {
  display: grid;
  gap: 16px;
}
.ccontact__info-block {
  padding: 18px 0;
  border: 0;
  border-top: 1px solid var(--dp-line);
  border-radius: 0;
  background: transparent;
}
.ccontact__info-block:first-child {
  padding-top: 0;
  border-top: 0;
}
.ccontact__info-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.ccontact__small-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--clinic-radius-md);
}
.ccontact__small-icon svg {
  width: 20px;
  height: 20px;
}
.ccontact__info-title h2 {
  margin: 0;
  font-size: 1.15rem;
}
.ccontact__hours {
  display: grid;
  gap: 0;
  margin: 0;
}
.ccontact__hours > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--dp-line);
  font-size: 0.92rem;
}
.ccontact__hours dt {
  color: var(--dp-muted);
}
.ccontact__hours dd {
  margin: 0;
  font-weight: 600;
  text-align: end;
}
.ccontact__address {
  margin: 0 0 8px;
  font-weight: 600;
}
.ccontact__text-link {
  display: inline-flex;
  margin-top: 16px;
  color: var(--dp-teal);
  font-weight: 600;
  text-decoration: none;
}
.ccontact__text-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ccontact__emergency {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-inline-start: 4px solid var(--clinic-warning);
  border-radius: 8px;
  background: var(--dp-ink);
  color: var(--clinic-ivory-soft);
  text-decoration: none;
}
.ccontact__emergency-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--clinic-radius-circle);
  background: var(--clinic-gold);
  color: var(--clinic-surface);
  font-weight: 700;
}
.ccontact__emergency > span:nth-child(2) {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.ccontact__emergency small {
  color: rgba(var(--clinic-white-rgb), 0.76);
  font-size: 0.85rem;
}
.ccontact__emergency > svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-inline-start: auto;
}
.dres {
  padding: clamp(24px, 4vh, 40px) clamp(20px, 6vw, 104px)
    clamp(64px, 10vh, 120px);
  background:
    linear-gradient(180deg, rgba(var(--clinic-white-rgb), 0.46), transparent 280px),
    var(--dp-bg);
}
.dres__count {
  margin: 0 0 20px;
  color: var(--dp-muted);
  font-size: 0.98rem;
}
.dres__count b {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--clinic-radius-pill);
  background: var(--clinic-navy);
  color: var(--clinic-surface);
}
.dres__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.drc-wrap[hidden] {
  display: none;
}
.dres__empty {
  padding: 56px 24px;
  border: 1px dashed var(--dp-line);
  border-radius: var(--clinic-radius-lg);
  text-align: center;
}
.dres__empty h3 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
}
.dres__empty p {
  margin: 0 0 1.2rem;
  color: var(--dp-muted);
}
.dres__reset {
  height: 46px;
  padding: 0 24px;
  border: 1px solid var(--dp-ink);
  border-radius: var(--clinic-radius-pill);
  background: transparent;
  color: var(--dp-ink);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}
.dres__reset:hover {
  background: var(--dp-ink);
  color: var(--clinic-ivory-soft);
}
.drc {
  --dr-accent: var(--clinic-primary);
  --dr-photo-bg: #dceee8;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--dp-line);
  border-radius: 12px;
  background: var(--dp-card);
  box-shadow: 0 14px 34px -28px rgba(var(--clinic-navy-rgb), 0.52);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}
.drc:hover,
.drc:focus-within {
  border-color: var(--clinic-primary);
  box-shadow: 0 22px 42px -28px rgba(var(--clinic-navy-rgb), 0.58);
  transform: translateY(-3px);
}
.drc[data-spec="dental"] {
  --dr-accent: #35688e;
  --dr-photo-bg: #e2edf4;
}
.drc[data-spec="derma"] {
  --dr-accent: #a44f68;
  --dr-photo-bg: #f4e6eb;
}
.drc[data-spec="peds"] {
  --dr-accent: #a66b19;
  --dr-photo-bg: #f4ecd9;
}
.drc[data-spec="women"] {
  --dr-accent: #9d4967;
  --dr-photo-bg: #f4e5eb;
}
.drc::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--dr-accent);
  content: "";
}
.drc__top {
  display: flex;
  gap: clamp(14px, 2vw, 22px);
}
.drc__photo {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(112px, 12vw, 148px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--clinic-radius-lg);
  background: var(--dr-photo-bg);
}
.drc__initial {
  display: grid;
  place-items: center;
  width: 76px;
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--dr-accent);
  font-family: var(--clinic-display-font);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
}
.drc__avail {
  position: absolute;
  z-index: 1;
  inset-inline: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 8px;
  border-radius: var(--clinic-radius-pill);
  background: rgba(var(--clinic-white-rgb), 0.96);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}
.drc__avail:empty,
.drc__avail:not(.is-set) {
  display: none;
}
.drc__avail i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--clinic-radius-circle);
  background: rgba(var(--clinic-navy-rgb), 0.3);
}
.drc__avail.is-today {
  color: var(--dp-green);
}
.drc__avail.is-today i {
  background: var(--dp-green);
}
.drc__avail:not(.is-today) {
  color: var(--clinic-text-muted);
}
.drc__avail:not(.is-today) i {
  background: var(--clinic-text-muted);
}
.drc__main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
}
.drc__row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.drc__chip {
  padding: 4px 12px;
  border-radius: var(--clinic-radius-pill);
  background: var(--dr-photo-bg);
  color: var(--dr-accent);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}
.drc__rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.95rem;
  white-space: nowrap;
}
.drc__star {
  display: inline-flex;
  color: var(--clinic-gold);
}
.drc__star svg {
  width: 16px;
  height: 16px;
}
.drc__rating small {
  color: var(--dp-muted);
  font-size: 0.84rem;
}
.drc__name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.35;
}
.drc__verified {
  flex: none;
  width: 22px;
  height: 22px;
}
.drc__verified path:first-child {
  fill: var(--clinic-success);
}
.drc__title {
  margin: 0 0 12px;
  color: var(--dr-accent);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.6;
}
.drc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  color: var(--dp-muted);
  font-size: 0.92rem;
}
.drc__meta li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.drc__meta svg {
  flex: none;
  width: 18px;
  height: 18px;
}
.drc__info {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 16px 18px;
  border-inline-start: 3px solid var(--dr-accent);
  border-radius: 4px;
  background: #f2f7f6;
  font-size: 0.94rem;
  line-height: 1.75;
  list-style: none;
}
.drc__info li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.drc__info svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--dr-accent);
}
.drc__sched {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--dp-line);
  color: var(--dp-muted);
  font-size: 0.92rem;
}
.drc__clinic,
.drc__hours {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.drc__clinic svg,
.drc__hours svg {
  flex: none;
  width: 18px;
  height: 18px;
}
.drc__days {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.drc__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.drc__pills li {
  padding: 4px 9px;
  border: 1px solid var(--dp-line);
  border-radius: var(--clinic-radius-md);
  color: var(--clinic-text-muted);
  font-size: 0.78rem;
  font-weight: 500;
}
.drc__pills li.is-on {
  border-color: transparent;
  background: rgba(var(--clinic-navy-rgb), 0.06);
  color: var(--dp-ink);
  font-weight: 600;
}
.drc__pills li.is-today {
  border-color: var(--dp-green);
}
.drc__pills li.is-on.is-today {
  border-color: var(--dp-green);
  background: var(--clinic-success);
  color: var(--clinic-surface);
}
.drc__hours {
  color: var(--dp-ink);
  font-weight: 600;
}
.drc__next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 14px 16px;
  border-radius: 6px;
  background: #e7f3ef;
  color: var(--dp-muted);
  font-size: 0.92rem;
}
.drc__next b {
  color: var(--dp-ink);
}
.drc__fee b {
  color: var(--clinic-primary);
  font-size: 1.05rem;
}
.drc__nextslot b {
  color: var(--dp-green);
}
.drc__nextslot:not(.is-set) {
  display: none;
}
.drc__fee {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-inline-start: auto;
}
.drc__fee svg {
  width: 18px;
  height: 18px;
}
.drc__actions {
  display: flex;
  gap: 10px;
}
.drc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--clinic-radius-md);
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.25s ease;
}
.drc__btn svg {
  flex: none;
  width: 19px;
  height: 19px;
}
.drc__btn--primary {
  flex: 1;
  background: var(--clinic-primary);
  color: var(--clinic-surface);
}
.drc__btn--primary:hover {
  background: var(--clinic-primary-hover);
}
.drc__btn--ghost {
  background: var(--dp-teal-soft);
  color: var(--dp-ink);
}
.drc__btn--ghost:hover {
  border-color: var(--dp-teal);
}
.drc__btn--ghost svg {
  transition: transform 0.4s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.drc__btn--ghost[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.drc__btn:active {
  transform: scale(0.98);
}
.drc__btn:focus-visible {
  outline: 2px solid var(--dp-teal);
  outline-offset: 3px;
}
.drc__more {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  margin-top: -18px;
  transition:
    grid-template-rows 0.45s cubic-bezier(0.22, 0.7, 0.2, 1),
    margin 0.45s ease,
    visibility 0s linear 0.45s;
}
.drc__more.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  margin-top: 0;
  transition-delay: 0s;
}
.drc__more-in {
  min-height: 0;
  overflow: hidden;
}
.drc__more-in > * {
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
.drc__more.is-open .drc__more-in > * {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}
.drc__bio {
  margin: 0 0 16px;
  padding-top: 4px;
  color: var(--dp-muted);
  line-height: 1.95;
}
.drc__more-title {
  margin: 0 0 10px;
  font-size: 0.98rem;
  font-weight: 700;
}
.drc__services {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.drc__services li {
  padding: 6px 14px;
  border: 1px solid var(--dp-line);
  border-radius: var(--clinic-radius-pill);
  font-size: 0.88rem;
}
.dpage:not(.has-js) .drc__more {
  grid-template-rows: 1fr;
  visibility: visible;
  margin-top: 0;
}
.dpage:not(.has-js) .drc__more-in > * {
  opacity: 1;
  transform: none;
}
.dpage:not(.has-js) .drc__btn--ghost {
  display: none;
}
.dpage.has-js .reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(24px);
}
.dpage.has-js .reveal {
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.7, 0.2, 1),
    transform 0.7s cubic-bezier(0.22, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
@media (max-width: 1180px) {
  .dres__list {
    grid-template-columns: 1fr;
  }
  .spage__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .dtool {
    grid-template-columns: 1fr;
    grid-template-areas: "search" "side" "chips";
    gap: 12px;
  }
  .dtool__side {
    justify-self: stretch;
    justify-content: space-between;
  }
  .dtool__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * clamp(20px, 6vw, 104px));
    padding-inline: clamp(20px, 6vw, 104px);
  }
  .dtool__chips::-webkit-scrollbar {
    display: none;
  }
  .dhero {
    padding-top: calc(66px + 32px);
  }
  .ccontact__channels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ccontact__main {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .ccontact__channels {
    grid-template-columns: 1fr;
  }
  .ccontact__fields {
    grid-template-columns: 1fr;
  }
  .ccontact__field--wide {
    grid-column: auto;
  }
  .ccontact__form-panel {
    padding: 20px;
  }
  .ccontact__submit-row,
  .ccontact__submit {
    width: 100%;
  }
  .spage__grid {
    grid-template-columns: 1fr;
  }
  .spage__card {
    min-height: 240px;
  }
  .drc__top {
    flex-direction: column;
  }
  .drc__photo {
    width: 100%;
    aspect-ratio: 16 / 11;
  }
  .drc__initial {
    width: 68px;
  }
  .drc__avail {
    inset-inline: auto;
    inset-inline-end: 10px;
    bottom: 10px;
    padding-inline: 12px;
  }
  .drc__actions {
    flex-direction: column;
  }
  .drc__next {
    flex-direction: column;
    align-items: flex-start;
  }
  .drc__fee {
    margin-inline-start: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dpage.has-js .reveal:not(.is-in) {
    opacity: 1;
    transform: none;
  }
  .drc:hover,
  .drc:focus-within {
    transform: none;
  }
  .dpage *,
  .dpage *::before,
  .dpage *::after {
    transition: none !important;
  }
  .ccontact__channel:hover,
  .ccontact__submit:hover {
    transform: none;
  }
}
/* Homepage-only visual rhythm; hero and why sections keep their own design. */
#services .cservices__grid > li:nth-child(2) {
  --home-service-accent: #35688e;
  --home-service-soft: #e2edf4;
}
#services .cservices__grid > li:nth-child(3) {
  --home-service-accent: #a44f68;
  --home-service-soft: #f4e6eb;
}
#services .cservices__grid > li:nth-child(4) {
  --home-service-accent: #a66b19;
  --home-service-soft: #f4ecd9;
}
#services .cservices__grid > li:nth-child(5) {
  --home-service-accent: #16786f;
  --home-service-soft: #e1f2ed;
}
#services .cservices__grid > li:not(.is-feature):not(.is-wide) .scard {
  border-block-start: 3px solid var(--home-service-accent, var(--clinic-primary));
  box-shadow: 0 14px 34px -28px rgba(var(--clinic-navy-rgb), 0.52);
}
#services .cservices__grid > li:not(.is-feature):not(.is-wide) .scard__icon {
  background: var(--home-service-soft, var(--clinic-teal-wash));
  color: var(--home-service-accent, var(--clinic-primary));
}
#services .cservices__grid > li:not(.is-feature):not(.is-wide) .scard:hover .scard__icon {
  background: var(--home-service-accent, var(--clinic-primary));
  color: var(--clinic-surface);
}
#services .cservices__grid > li:not(.is-feature):not(.is-wide) .scard__more {
  color: var(--home-service-accent, var(--clinic-primary));
}
#services .cservices__grid > li:not(.is-feature):not(.is-wide) .scard__arrow {
  border-color: var(--home-service-accent, var(--clinic-primary));
  color: var(--home-service-accent, var(--clinic-primary));
}

#doctors .cdoctors__grid > li:nth-child(1) {
  --home-doctor-accent: #16786f;
}
#doctors .cdoctors__grid > li:nth-child(2) {
  --home-doctor-accent: #35688e;
}
#doctors .cdoctors__grid > li:nth-child(3) {
  --home-doctor-accent: #9d4967;
}
#doctors .cdoctors__grid > li:nth-child(4) {
  --home-doctor-accent: #8a641f;
}
#doctors .dcard {
  background: var(--home-doctor-accent, var(--clinic-primary));
  border-radius: 12px;
}
#doctors .dcard:hover,
#doctors .dcard:focus-within {
  box-shadow:
    0 0 0 4px var(--home-doctor-accent, var(--clinic-primary)),
    0 34px 54px -32px rgba(var(--clinic-navy-rgb), 0.48);
}
#doctors .dcard__btn {
  color: var(--home-doctor-accent, var(--clinic-primary));
}

#reviews.creviews {
  --rv-ivory: var(--clinic-page-bg);
  --rv-teal: var(--clinic-primary);
  --rv-navy: var(--clinic-navy);
}
#reviews .creviews__lead {
  color: var(--clinic-text-muted);
}

#faq.cfaq {
  --fq-bg: #e8f0ef;
  --fq-line: #cbd9d6;
}
#faq .cfaq__help {
  border-inline-start: 3px solid var(--clinic-warning);
  background: var(--clinic-surface);
}
#faq .cfaq__item {
  background: var(--clinic-surface);
}
#faq .cfaq__item.is-open {
  box-shadow: inset -3px 0 var(--clinic-primary);
}