/* ═══════════════════════════════════════════════════════════
   REHOBOTH DENTAL CLINIC · DUBAI
   Luxury editorial aesthetic | EN / FR / AR (RTL) / HI
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Best Smile Clinic · Best Smile — refined luxury palette ── */
  --page:      #ffffff;              /* clean white — cards & photography */
  --tint:      #F2F7FC;              /* cool porcelain — primary alt surface */
  --tint-2:    #E9F1F9;              /* deeper cool wash for layering */
  --paper:     #FAF7F1;              /* warm ivory — editorial alt (sparing) */

  --ink:       #0C1826;              /* deep navy-black body ink */
  --ink-soft:  #43536A;              /* muted slate — supporting copy */
  --heading:   #142F4C;              /* deep navy — display headings */

  --blue:      #2C74C4;              /* refined azure — primary action */
  --blue-deep: #1F4E7B;              /* deep navy-blue — links & accents */
  --blue-soft: #AED2EE;

  --green:        #2C74C4;
  --green-bright: #2C74C4;
  --green-deep:   #1F4E7B;

  --navy:      #16324E;              /* deep luxury navy — dark bands */
  --navy-deep: #0E2339;              /* richer navy — footer & depth */

  /* Champagne accent — used sparingly: kickers, rules, ornaments */
  --gold:      #2C74C4;
  --gold-ink:  #1F4E7B;              /* AA-legible gold for text on light */
  --gold-soft: #9FD0F2;              /* light champagne for text on dark */

  --line:      #E6EDF4;
  --line-soft: rgba(20,45,85,.07);

  --font-display: 'Marcellus', 'Tajawal', 'Noto Sans Devanagari', Georgia, serif;
  --font-body:    'Poppins', 'Tajawal', 'Noto Sans Devanagari', system-ui, sans-serif;

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-pill: 999px;

  --sh-card:  0 1px 2px rgba(15,35,58,.04), 0 8px 20px -12px rgba(15,35,58,.12), 0 24px 48px -30px rgba(15,35,58,.17);
  --sh-hover: 0 2px 6px rgba(15,35,58,.05), 0 16px 34px -14px rgba(15,35,58,.16), 0 46px 82px -38px rgba(15,35,58,.34);

  --pad: clamp(1.25rem, 4vw, 3rem);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--page);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Language-specific type tuning */
html[lang="ar"] body { font-family: 'Tajawal', sans-serif; letter-spacing: 0 !important; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] .brand-name, html[lang="ar"] blockquote { font-family: 'Tajawal', sans-serif; font-weight: 700; letter-spacing: 0 !important; }
html[lang="hi"] body { font-family: 'Noto Sans Devanagari', sans-serif; }
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3,
html[lang="hi"] blockquote { font-family: 'Noto Sans Devanagari', sans-serif; font-weight: 600; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); color: var(--heading); }
h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--heading); }
.light-text h2, .light-text h3, .process h2, .process h3, .inside h2 { color: inherit; }

.kicker {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 1.1rem;
}
.kicker.light { color: var(--gold-soft); }
/* Editorial rule-lines flanking centred kickers — fade to the label,
   inherit the kicker colour so light/dark bands adapt automatically */
.center .kicker,
.center.kicker { display: inline-flex; align-items: center; justify-content: center; gap: 0.85em; }
.center .kicker::before, .center .kicker::after,
.center.kicker::before, .center.kicker::after {
  content: ""; flex: none; block-size: 1px; inline-size: clamp(20px, 4vw, 46px);
  opacity: .6;
}
.center .kicker::before, .center.kicker::before { background: linear-gradient(to left, currentColor, transparent); }
.center .kicker::after,  .center.kicker::after  { background: linear-gradient(to right, currentColor, transparent); }

.lead {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--ink-soft);
  margin-top: 1.2rem;
}

.container { max-width: 1200px; margin-inline: auto; padding-inline: var(--pad); }
.container.narrow { max-width: 780px; }
.center { text-align: center; }
.light-text { color: #F4F9FD; }
.light-text .lead { color: #DEEDF9; }

.section { padding-block: clamp(4rem, 9vw, 7.5rem); background-color: var(--page); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1rem 2.4rem;
  border: 1px solid var(--ink);
  transition: all 0.35s ease;
  cursor: pointer;
  margin-top: 2rem;
}
html[lang="ar"] .btn { letter-spacing: 0; font-size: 0.92rem; }

.btn-solid { background: var(--ink); color: var(--page); }
.btn-solid:hover { background: var(--blue-deep); border-color: var(--blue-deep); }

.btn-outline-light { border-color: rgba(255,255,255,0.7); color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--ink); }

.btn-small { padding: 0.6rem 1.4rem; margin-top: 0; font-size: 0.68rem; }
.btn-wide { width: 100%; }

/* ── Header ──────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}

.header-inner {
  max-width: 1360px;
  margin-inline: auto;
  padding: 0.9rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.brand-sub {
  font-size: 0.56rem;
  letter-spacing: 0.34em;
  color: var(--green);
  white-space: nowrap;
  font-weight: 500;
}
.site-header:not(.scrolled) .brand-name,
.site-header:not(.scrolled) .main-nav a { color: #fff; }
.site-header:not(.scrolled) .brand-sub { color: #BEE2B3; }

.main-nav { display: flex; gap: 1.8rem; }
.main-nav a {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
  padding-block: 0.3rem;
}
html[lang="ar"] .main-nav a { letter-spacing: 0; font-size: 0.95rem; }
.main-nav a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.main-nav a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 1rem; }

.lang-switch { display: flex; border: 1px solid var(--line); border-radius: 2rem; overflow: hidden; background: rgba(255,255,255,0.5); }
.lang-switch button {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.45rem 0.75rem;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.25s ease;
}
.lang-switch button:hover { color: var(--blue-deep); }
.lang-switch button.active { background: var(--ink); color: var(--page); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span { width: 24px; height: 1.5px; background: currentColor; color: var(--ink); transition: 0.3s; }
.site-header:not(.scrolled) .nav-toggle span { background: #fff; }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.hero-bg {
  /* Pinned to the viewport: the page slides over it, like the inner pages */
  position: fixed; inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  animation: heroZoom 14s ease-out forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero-overlay {
  position: fixed; inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, rgba(40,92,150,.58), rgba(60,130,92,.40) 55%, rgba(70,140,200,.34)), linear-gradient(180deg, rgba(12,21,34,.28), rgba(12,21,34,.58));
}
.hero-content { position: relative; z-index: 2; padding-inline: var(--pad); max-width: 900px; }
.hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 300;
  max-width: 560px;
  margin: 1.4rem auto 0;
  color: #EAF3FB;
}

.scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}
.scroll-hint i {
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent);
  animation: drip 2s ease-in-out infinite;
}
@keyframes drip { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

/* ── Cards (experience / testimonials) ───────────────────── */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.card-img { overflow: hidden; margin-bottom: 1.5rem; }
.card-img img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.card:hover .card-img img { transform: scale(1.06); }
.card h3 { margin-bottom: 0.7rem; }
.card p { color: var(--ink-soft); font-size: 0.97rem; }

/* ── About band ──────────────────────────────────────────── */
.about-band { position: relative; overflow: hidden; }
.about-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.about-overlay { position: absolute; inset: 0; background: rgba(35, 78, 121, 0.85); }
.about-band .container { position: relative; z-index: 2; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  text-align: center;
  color: #F4F9FD;
}
.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 500;
  color: var(--green);
}
.stat span {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #AED2EE;
}
html[lang="ar"] .stat span { letter-spacing: 0; font-size: 0.88rem; }

/* ── Gallery: before/after sliders ───────────────────────── */
.gallery { background: var(--tint); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.8rem);
  margin-block: clamp(2.5rem, 5vw, 4rem) 1rem;
}
.ba-card { border: 1px solid var(--line); background: var(--tint); padding: 0.6rem; transition: box-shadow 0.4s ease, transform 0.4s ease; }
.ba-card:hover { box-shadow: 0 18px 40px -18px rgba(28, 26, 23, 0.35); transform: translateY(-4px); }
.ba-wrap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  --pos: 50%;
}
.ba-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Before side: identical photo, stain tint over the teeth area only */
.ba-stain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  background: radial-gradient(
    ellipse var(--msx, 15%) var(--msy, 8%) at var(--mx, 50%) var(--my, 58%),
    rgba(139, 101, 24, 0.62),
    rgba(139, 101, 24, 0.34) 55%,
    transparent 78%
  );
  mix-blend-mode: multiply;
}
.ba-after { clip-path: inset(0 0 0 var(--pos)); }
.ba-divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 12px rgba(0,0,0,0.35);
}
.ba-knob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--blue-deep);
  border: 1px solid var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  letter-spacing: -0.05em;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}
.ba-tag {
  position: absolute;
  top: 0.8rem;
  padding: 0.28rem 0.75rem;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(12, 21, 34, 0.65);
  color: #F4F9FD;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
html[lang="ar"] .ba-tag, html[lang="hi"] .ba-tag { letter-spacing: 0; font-size: 0.72rem; }
.ba-tag-before { left: 0.8rem; }
.ba-tag-after { right: 0.8rem; background: rgba(44, 116, 196, 0.92); }
.ba-hint {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
html[lang="ar"] .ba-hint { letter-spacing: 0; font-size: 0.85rem; }

/* ── Services ────────────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.service {
  background: var(--page);
  padding: 2.2rem 1.6rem;
  transition: background 0.35s ease;
}
.service:hover { background: var(--tint); }
.s-icon { color: var(--green); font-size: 0.8rem; margin-bottom: 1rem; }
.service h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.service p { font-size: 0.9rem; color: var(--ink-soft); }

/* ── Process ─────────────────────────────────────────────── */
.process { background: var(--navy); color: #F4F9FD; }
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.step { border-top: 1px solid rgba(174, 210, 238, 0.4); padding-top: 1.6rem; }
.step-num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--green);
  display: block;
  margin-bottom: 0.8rem;
}
.step h3 { margin-bottom: 0.7rem; }
.step p { color: #AED2EE; font-size: 0.95rem; }

/* ── Doctor ──────────────────────────────────────────────── */
.doctor-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.doctor-img img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
.doctor-copy blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-style: italic;
  line-height: 1.5;
  margin-block: 1.4rem;
  color: var(--ink);
}
.doctor-name {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin-bottom: 1.2rem;
}
html[lang="ar"] .doctor-name { letter-spacing: 0; font-size: 0.9rem; }
.doctor-copy > p:last-of-type { color: var(--ink-soft); }

/* ── Testimonials ────────────────────────────────────────── */
.testimonials { background: var(--tint); }
.testimonial {
  border: 1px solid var(--line);
  padding: 2.2rem 1.9rem;
  background: var(--page);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.testimonial blockquote {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.55;
  flex: 1;
}
.testimonial figcaption { font-size: 0.85rem; }
.testimonial figcaption strong { display: block; font-weight: 500; letter-spacing: 0.08em; }
.testimonial figcaption span { color: var(--ink-soft); font-size: 0.78rem; }

/* ── Contact ─────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

.contact-form { display: flex; flex-direction: column; gap: 1.2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.contact-form label { display: flex; flex-direction: column; gap: 0.45rem; }
.contact-form label span {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
html[lang="ar"] .contact-form label span { letter-spacing: 0; font-size: 0.82rem; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  background: var(--tint);
  color: var(--ink);
  outline: none;
  transition: border-color 0.3s ease;
  resize: vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--green); }
.contact-form .btn { margin-top: 0.6rem; }

.form-success {
  color: #2C74C4;
  font-size: 0.95rem;
  border: 1px solid #BEE2B3;
  background: #F2FAEF;
  padding: 0.9rem 1.1rem;
}

.contact-info { display: flex; flex-direction: column; gap: 1.6rem; }
.info-block h3 {
  font-size: 0.72rem;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin-bottom: 0.4rem;
}
html[lang="ar"] .info-block h3 { letter-spacing: 0; font-size: 0.88rem; }
.info-block p { color: var(--ink-soft); font-size: 0.97rem; }
.info-block a:hover { color: var(--blue-deep); }

.map-wrap { border: 1px solid var(--line); }
.map-wrap iframe { width: 100%; height: 240px; border: 0; display: block; filter: grayscale(35%); }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { background: var(--navy); color: #DCE6F2; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr 1fr;
  gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.f-brand .brand-name { color: #fff; font-size: 2rem; }
.f-brand .brand-sub { display: block; margin-bottom: 1rem; }
.f-brand p { font-size: 0.92rem; font-style: italic; font-family: var(--font-display); font-size: 1.1rem; }
.f-col h4 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1rem;
}
html[lang="ar"] .f-col h4 { letter-spacing: 0; font-size: 0.85rem; }
.f-col a { display: block; font-size: 0.9rem; padding-block: 0.22rem; transition: color 0.25s ease; }
.f-col a:hover { color: var(--green); }
.f-col p { font-size: 0.9rem; margin-bottom: 0.4rem; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1.4rem var(--pad);
  text-align: center;
  font-size: 0.78rem;
  color: #B8CCE0;
}

/* ── Reveal animation ────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── RTL refinements ─────────────────────────────────────── */
[dir="rtl"] .main-nav a,
[dir="rtl"] .kicker,
[dir="rtl"] .btn { letter-spacing: 0; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1280px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  /* The header carries backdrop-filter when scrolled (and always on
     page-light), which makes it the containing block for fixed children:
     `inset: 0` then resolves against the 72px header, not the screen, and
     the menu collapsed to a sliver with its links spilling transparently
     over the page. Explicit height is immune to the containing block. */
  .main-nav.open {
    display: flex;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background: #fff;
    z-index: 99;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .main-nav.open a { color: var(--ink) !important; font-size: 1.05rem; }
}

@media (max-width: 860px) {
  .cards-3, .steps { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .doctor-grid, .contact-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .header-actions .btn { display: none; }
}

@media (max-width: 560px) {
  .gallery-grid, .services-grid, .form-row, .footer-grid { grid-template-columns: 1fr; }
  .lang-switch button { padding: 0.4rem 0.55rem; font-size: 0.62rem; }
  .about-bg { background-attachment: scroll; }
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM POLISH | hero video, marquee, video cards, details
   ═══════════════════════════════════════════════════════════ */

/* ── Hero video ──────────────────────────────────────────── */
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ── Marquee ─────────────────────────────────────────────── */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--tint);
  padding-block: 1.1rem;
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 2.8rem;
  width: max-content;
  animation: marquee 30s linear infinite;
}
[dir="rtl"] .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-style: italic;
  color: var(--ink-soft);
  white-space: nowrap;
}
.marquee-track i { color: var(--green); font-size: 0.55rem; font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }
[dir="rtl"] .marquee-track { direction: ltr; }

/* ── Video section ───────────────────────────────────────── */
.inside { background: var(--navy); }
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.video-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #000;
}
.video-card.featured { grid-column: 1 / -1; }
.video-card video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.92;
  transition: opacity 0.4s ease, transform 0.8s ease;
}
.video-card.featured video { aspect-ratio: 21 / 9; }
.video-card:hover video { opacity: 1; transform: scale(1.02); }
.play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.85);
  background: rgba(12, 21, 34, 0.45);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: all 0.35s ease;
}
.play-btn span {
  position: absolute;
  top: 50%; left: 53%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff;
}
.play-btn:hover { background: var(--blue-deep); border-color: var(--blue-deep); transform: translate(-50%, -50%) scale(1.08); }
.video-card.playing .play-btn { opacity: 0; pointer-events: none; }
.video-card:hover.playing .play-btn { opacity: 1; pointer-events: auto; }
.video-card.playing:hover .play-btn span {
  border-width: 0;
  width: 14px; height: 16px;
  border-inline: 4.5px solid #fff;
  left: 50%;
}
.video-card figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.4rem 1.4rem 1.2rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.78));
  color: #F4F9FD;
  font-family: var(--font-display);
  font-size: 1.25rem;
  pointer-events: none;
}

/* ── Experience card polish ──────────────────────────────── */
.cards-3 .card {
  background: var(--tint);
  border: 1px solid var(--line);
  padding: 0 0 1.8rem;
  position: relative;
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}
.cards-3 .card h3, .cards-3 .card p { padding-inline: 1.6rem; }
.cards-3 .card .card-img { margin-bottom: 1.5rem; }
.cards-3 .card::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s ease;
}
.cards-3 .card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -20px rgba(28, 26, 23, 0.3); }
.cards-3 .card:hover::after { transform: scaleX(1); }

/* ── Button sheen ────────────────────────────────────────── */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.btn:hover::before { left: 125%; }

/* ── Staggered reveals in grids ──────────────────────────── */
.cards-3 .reveal:nth-child(2), .gallery-grid .reveal:nth-child(2), .steps .reveal:nth-child(2) { transition-delay: 0.12s; }
.cards-3 .reveal:nth-child(3), .gallery-grid .reveal:nth-child(3), .steps .reveal:nth-child(3) { transition-delay: 0.24s; }
.gallery-grid .reveal:nth-child(4) { transition-delay: 0.1s; }
.gallery-grid .reveal:nth-child(5) { transition-delay: 0.2s; }
.gallery-grid .reveal:nth-child(6) { transition-delay: 0.3s; }

/* ── Finishing details ───────────────────────────────────── */
::selection { background: var(--green); color: #fff; }
html { scrollbar-color: var(--blue-deep) var(--page); scrollbar-width: thin; }
body::-webkit-scrollbar { width: 9px; }
body::-webkit-scrollbar-track { background: var(--page); }
body::-webkit-scrollbar-thumb { background: var(--blue-deep); border-radius: 4px; }

@media (max-width: 860px) {
  .video-grid { grid-template-columns: 1fr; }
  .video-card.featured video { aspect-ratio: 16 / 9; }
  .play-btn { width: 60px; height: 60px; }
}

/* ═══════════════════════════════════════════════════════════
   ULTRA-LUXURY PASS | amenities, stars, avatars, parallax
   ═══════════════════════════════════════════════════════════ */

/* Marquee restyled for Brandon Grotesque */
.marquee-track span {
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(0.8rem, 1.4vw, 1rem);
  font-weight: 450;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
html[lang="ar"] .marquee-track span { letter-spacing: 0; font-size: 1.05rem; }

/* Gold gradient stat numbers */
.stat strong {
  background: linear-gradient(120deg, #ffffff 0%, #DEEDF9 60%, #AED2EE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Amenities strip */
.amenities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(174, 210, 238, 0.35);
  position: relative;
  z-index: 2;
}
.amenity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* #DEEDF9 is one of this sheet's pale-on-dark tones (see .cta-band p and
     .light-text .lead). The trust strip in .services sits on the white page,
     so that colour rendered at about 1.2:1 and the words simply were not
     there. --ink-soft is understated but readable (9.3:1 measured). */
  color: var(--ink-soft);
}
/* The luxury strip is the other case: .about-band paints an image plus an
   rgba(35,78,121,.85) overlay behind it, so there the pale tone is correct and
   the dark one would disappear instead. Its sibling blocks in that band use
   .light-text for the same reason; this strip never had the class, which is
   why the colour was hardcoded on .amenity in the first place. */
.about-band .amenity,
.light-text .amenity,
.cta-band .amenity { color: #DEEDF9; }
html[lang="ar"] .amenity, html[lang="hi"] .amenity { letter-spacing: 0; font-size: 0.88rem; }
.a-ico { color: var(--green); font-size: 0.85rem; }

/* Testimonial stars + avatars */
.stars {
  color: var(--green);
  font-size: 0.95rem;
  letter-spacing: 0.35em;
}
.testimonial figcaption {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--green);
  padding: 2px;
  background: var(--tint);
}

/* Parallax */
.hero-content, .hero-video { will-change: transform; }
[data-plx] {
  will-change: transform;
  transform: translateY(var(--plxy, 0px)) scale(1.14);
}
.card-img, .doctor-img { overflow: hidden; }

@media (max-width: 860px) {
  .amenities { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  [data-plx] { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   REHOBOTH BRAND PASS | pill buttons, rounded cards, physio DNA
   ═══════════════════════════════════════════════════════════ */

/* Buttons: pill-shaped, blue primary / green hero CTA */
.btn { border-radius: 999px; letter-spacing: 0.08em; font-weight: 500; }
html[lang="ar"] .btn { letter-spacing: 0; }
.btn-solid { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-solid:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.hero .btn-outline-light {
  background: var(--green-bright);
  border-color: var(--green-bright);
  color: #fff;
}
.hero .btn-outline-light:hover { background: var(--green); border-color: var(--green); color: #fff; }
.lang-switch button.active { background: var(--blue); }
.lang-switch { border-radius: 999px; }

/* Rounded cards + physio shadows */
.cards-3 .card { border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-card); }
.cards-3 .card:hover { box-shadow: var(--sh-hover); }
.ba-card { border-radius: var(--r); box-shadow: var(--sh-card); }
.ba-card:hover { box-shadow: var(--sh-hover); }
.ba-wrap { border-radius: var(--r-sm); }
.testimonial { border-radius: var(--r); background: var(--page); box-shadow: var(--sh-card); }
.video-card { border-radius: var(--r); }
.map-wrap { border-radius: var(--r); overflow: hidden; }
.contact-form input, .contact-form select, .contact-form textarea { border-radius: var(--r-sm); }
.form-success { border-radius: var(--r-sm); }
.card-img img { border-radius: 0; }

/* Services as rounded tiles */
.services-grid { gap: 1.2rem; background: transparent; border: none; }
.service { border: 1px solid var(--line); border-radius: var(--r); background: var(--page); box-shadow: var(--sh-card); }
.service:hover { background: var(--tint); box-shadow: var(--sh-hover); }

/* Brand color details */
.brand-sub { color: var(--green); font-weight: 500; }
.site-header:not(.scrolled) .brand-sub { color: #DEEDF9; }
.f-brand .brand-sub, .f-col h4 { color: var(--blue-soft); }
.stars { color: #F2B01E; }
.s-icon { color: var(--blue); }
.scroll-hint i { background: linear-gradient(to bottom, rgba(255,255,255,0.9), transparent); }
::selection { background: var(--blue); color: #fff; }
html { scrollbar-color: var(--blue) var(--page); }
body::-webkit-scrollbar-track { background: var(--page); }
body::-webkit-scrollbar-thumb { background: var(--blue); }

/* Section tints (physio alternation) */
.intro { background: var(--page); }
.gallery, .testimonials { background: var(--tint); }
.marquee { background: var(--tint); }

/* ── FAQ accordion ───────────────────────────────────────── */
.faq { background: var(--page); }
.faq-list { max-width: 780px; margin-top: clamp(2rem, 4vw, 3rem); }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--page);
  box-shadow: var(--sh-card);
  margin-bottom: 0.9rem;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 3rem 1.1rem 1.4rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
  position: relative;
  transition: color 0.25s ease;
}
[dir="rtl"] .faq-item summary { padding: 1.1rem 1.4rem 1.1rem 3rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  inset-inline-end: 1.3rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--blue);
  transition: transform 0.3s ease;
}
.faq-item[open] summary { color: var(--blue-deep); }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:hover { color: var(--blue); }
.faq-item p {
  padding: 0 1.4rem 1.2rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ── Services nav dropdown ───────────────────────────────── */
.nav-drop { position: relative; display: inline-flex; }
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding-block: 0.3rem;
}
html[lang="ar"] .nav-drop-btn { letter-spacing: 0; font-size: 0.95rem; }
.site-header:not(.scrolled) .nav-drop-btn { color: #fff; }
.main-nav.open .nav-drop-btn { color: var(--ink); font-size: 1.05rem; }
.drop-chev { font-style: normal; font-size: 0.7em; transition: transform 0.25s ease; }
.nav-drop.open .drop-chev { transform: rotate(180deg); }

.nav-drop-menu {
  position: absolute;
  top: calc(100% + 0.9rem);
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 240px;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-hover);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 200;
}
[dir="rtl"] .nav-drop-menu { transform: translateX(50%) translateY(8px); }
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu,
.nav-drop.open .nav-drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
[dir="rtl"] .nav-drop:hover .nav-drop-menu,
[dir="rtl"] .nav-drop:focus-within .nav-drop-menu,
[dir="rtl"] .nav-drop.open .nav-drop-menu { transform: translateX(50%) translateY(0); }

.nav-drop-menu a {
  display: block;
  padding: 0.55rem 0.9rem;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-soft) !important;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-drop-menu a:hover { background: var(--tint); color: var(--blue-deep) !important; }
.nav-drop-menu a::after { display: none; }
.nav-drop-menu .drop-all {
  margin-top: 0.3rem;
  border-top: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  color: var(--blue) !important;
  font-weight: 500;
}

/* Service tiles: anchor offset + arrival highlight */
.service { scroll-margin-top: 110px; }
.service:target {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(46, 128, 214, 0.18), var(--sh-hover);
}

/* Mobile: dropdown becomes inline list inside fullscreen nav */
@media (max-width: 1280px) {
  .main-nav.open .nav-drop { flex-direction: column; align-items: center; }
  .main-nav.open .nav-drop-menu {
    position: static;
    transform: none !important;
    box-shadow: none;
    border: none;
    background: transparent;
    display: none;
    padding: 0.2rem 0 0;
    text-align: center;
  }
  .main-nav.open .nav-drop.open .nav-drop-menu { display: block; opacity: 1; visibility: visible; }
  .main-nav.open .nav-drop-menu a { font-size: 0.95rem !important; padding: 0.45rem; }
}

/* ═══════════════════════════════════════════════════════════
   INNER PAGES | parallax hero, article, CTA, blog, WhatsApp
   ═══════════════════════════════════════════════════════════ */

/* Parallax page hero */
.page-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(40,92,150,.68), rgba(60,130,92,.44) 55%, rgba(70,140,200,.42)), linear-gradient(180deg, rgba(12,21,34,.35), rgba(12,21,34,.6));
}
.page-hero-content { position: relative; z-index: 2; padding: 8rem var(--pad) 4rem; max-width: 860px; }
.page-hero-content h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); }
.page-hero-content .lead { color: #EAF3FB; }
@media (max-width: 860px) { .page-hero { background-attachment: scroll; } }

/* Breadcrumbs */
.breadcrumbs {
  font-size: 0.8rem;
  color: var(--ink-soft);
  padding: 1.1rem var(--pad);
  max-width: 1200px;
  margin-inline: auto;
}
.breadcrumbs a { color: var(--blue); }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs span.sep { margin-inline: 0.45rem; color: var(--muted, #9AA7B7); }

/* Article / prose */
.prose { max-width: 780px; margin-inline: auto; padding-inline: var(--pad); }
.prose h2 { margin: 2.6rem 0 1rem; }
.prose h3 { margin: 2rem 0 0.7rem; }
.prose p { margin-bottom: 1.1rem; color: var(--ink-soft); }
.prose ul, .prose ol { margin: 0 0 1.2rem 1.4rem; color: var(--ink-soft); }
.prose li { margin-bottom: 0.5rem; }
.prose blockquote {
  border-inline-start: 3px solid var(--blue);
  background: var(--tint);
  border-radius: var(--r-sm);
  padding: 1rem 1.3rem;
  margin: 1.5rem 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
}
.prose img { border-radius: var(--r); margin: 1.5rem 0; }

/* Benefit checklist */
.benefit-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 1.6rem;
  list-style: none;
  margin: 1.4rem 0 !important;
  padding: 0;
}
.benefit-list li {
  position: relative;
  padding-inline-start: 1.7rem;
  color: var(--ink-soft);
}
.benefit-list li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  color: var(--green-bright);
  font-weight: 600;
}
@media (max-width: 640px) { .benefit-list { grid-template-columns: 1fr; } }

/* Price table */
.price-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0;
  font-size: 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.price-table th {
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 400;
  text-align: start;
  padding: 0.8rem 1rem;
}
.price-table td { padding: 0.75rem 1rem; border-top: 1px solid var(--line); color: var(--ink-soft); }
.price-table tr:nth-child(even) td { background: var(--tint); }

/* CTA band */
.cta-band {
  background: var(--navy);
  color: #F4F9FD;
  text-align: center;
  padding: clamp(3rem, 6vw, 4.5rem) var(--pad);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.cta-band h2 { color: #fff; margin-bottom: 0.6rem; }
.cta-band p { color: #DEEDF9; max-width: 560px; margin-inline: auto; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }
.cta-actions .btn { margin-top: 0; }
.btn-green { background: var(--green-bright); border-color: var(--green-bright); color: #fff; }
.btn-green:hover { background: var(--green); border-color: var(--green); }

/* Blog grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.4rem, 3vw, 2.2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.post-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--page);
  box-shadow: var(--sh-card);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  display: flex;
  flex-direction: column;
}
.post-card:hover { transform: translateY(-5px); box-shadow: var(--sh-hover); }
.post-card img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.post-card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.post-card h3 { color: var(--ink); font-size: 1.25rem; }
.post-card:hover h3 { color: var(--blue-deep); }
.post-card p { font-size: 0.92rem; color: var(--ink-soft); flex: 1; }
.post-meta { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep); }
.post-more { font-size: 0.85rem; font-weight: 500; color: var(--blue-deep); }
@media (max-width: 780px) { .blog-grid { grid-template-columns: 1fr; } }

/* Article header meta */
.article-meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  justify-content: center;
  font-size: 0.8rem;
  color: #DEEDF9;
  margin-top: 1rem;
}
.article-meta .avatar { width: 40px; height: 40px; }

/* Floating WhatsApp button */
.wa-float {
  position: fixed;
  bottom: 1.6rem;
  inset-inline-end: 1.6rem;
  z-index: 300;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wa-float:hover { transform: scale(1.1); box-shadow: 0 12px 32px rgba(37, 211, 102, 0.55); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }

/* Related services strip */
.related { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--tint); }
.related .services-grid { margin-top: 1.8rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .related .services-grid { grid-template-columns: 1fr; } }
.service h3 a { color: inherit; }
.service h3 a:hover { color: var(--blue-deep); }
.svc-more { display: inline-block; margin-top: 0.7rem; font-size: 0.83rem; font-weight: 500; color: var(--blue-deep); }
.svc-more:hover { color: var(--blue-deep); }

/* ═══════════════════════════════════════════════════════════
   POLISH PASS | motion, progress, ornaments, focus, details
   ═══════════════════════════════════════════════════════════ */

/* Soft page entrance */
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }
body { animation: pageFade 0.45s ease; }

/* Reading progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--blue), var(--green-bright));
  z-index: 500;
  transition: width 0.15s ease-out;
  pointer-events: none;
}

/* Back to top */
.to-top {
  position: fixed;
  bottom: 1.6rem;
  inset-inline-start: 1.6rem;
  z-index: 300;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--navy);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all 0.35s ease;
  box-shadow: 0 8px 22px rgba(20, 45, 85, 0.35);
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--blue); transform: translateY(-3px); }

/* Hero headline readability */
.hero-content h1, .page-hero-content h1 { text-shadow: 0 2px 26px rgba(0, 0, 0, 0.28); }
.hero-sub, .page-hero-content .lead { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3); }

/* Article lede: first paragraph reads bigger */
.prose > p:first-of-type {
  font-size: 1.12rem;
  line-height: 1.75;
  color: var(--ink);
}

/* Button lift */
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Keyboard focus rings */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Image placeholders: no white flash while loading */
.card-img, .post-card img, .ba-wrap, .doctor-img, .video-card video { background-color: var(--tint); }

/* Testimonial quote ornament */
.testimonial { position: relative; }
.testimonial::before {
  content: '\201C';
  position: absolute;
  top: 0.4rem;
  inset-inline-end: 1.2rem;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--blue-soft);
  opacity: 0.55;
  pointer-events: none;
}

/* Doctor portrait framing */
.doctor-img img { border-radius: var(--r); box-shadow: var(--sh-hover); }

/* Marquee edge fade */
.marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

/* Footer hairline */
.site-footer { position: relative; }
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--green-bright), var(--blue));
}

/* FAQ open animation */
.faq-item p { animation: pageFade 0.4s ease; }

/* Breadcrumb baseline breathing room under full screen hero */
.breadcrumbs { padding-block: 1.4rem; }

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .btn:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   SERVICE PAGE EDITORIAL LAYOUT | sticky facts card, rhythm
   ═══════════════════════════════════════════════════════════ */

.svc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}
.svc-layout .prose { margin-inline: 0; padding-inline: 0; max-width: 720px; }

.svc-aside { position: sticky; top: 92px; }
.aside-card {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.7rem 1.6rem;
  box-shadow: var(--sh-card);
}
.aside-card h3 { color: var(--ink); font-size: 1.2rem; margin-bottom: 0.9rem; }
.aside-facts { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.aside-facts li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed #d3ddea;
  font-size: 0.87rem;
}
.aside-facts li span { color: var(--ink-soft); }
.aside-facts li strong { font-weight: 500; color: var(--ink); text-align: end; }
.aside-card .btn { margin-top: 0.7rem; text-align: center; }
.aside-note { margin-top: 1.1rem; font-size: 0.8rem; color: var(--ink-soft); text-align: center; line-height: 1.6; }
.aside-note strong { color: var(--blue-deep); }

/* Heading rhythm: gradient tick above each section title */
.prose > h2::before {
  content: '';
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--green-bright));
  margin-bottom: 0.85rem;
}
.prose > h2 { margin-top: 3rem; }
.prose > h2:first-child { margin-top: 0.5rem; }

/* h3 accent marker */
.prose > h3::before {
  content: '\25c6';
  color: var(--green-bright);
  font-size: 0.55em;
  vertical-align: middle;
  margin-inline-end: 0.55rem;
}

/* Benefit checklist as a tinted panel */
.prose .benefit-list {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem 1.7rem;
}

/* Price table depth */
.price-table { box-shadow: var(--sh-card); }

@media (max-width: 1020px) {
  .svc-layout { grid-template-columns: 1fr; }
  .svc-aside { position: static; }
  .svc-layout .prose { max-width: 780px; }
}

/* ── Booking modal ───────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(12, 21, 34, 0.55);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-card {
  position: relative;
  width: min(460px, 100%);
  max-height: 92svh;
  overflow-y: auto;
  background: var(--page);
  border-radius: var(--r-lg);
  padding: 2.1rem 1.9rem 1.9rem;
  box-shadow: 0 30px 80px rgba(12, 21, 34, 0.4);
  transform: translateY(18px) scale(0.98);
  transition: transform 0.35s ease;
}
.modal-overlay.open .modal-card { transform: translateY(0) scale(1); }
.modal-card h3 { color: var(--blue-deep); font-size: 1.5rem; margin-bottom: 0.3rem; }
.modal-sub { color: var(--ink-soft); font-size: 0.88rem; margin-bottom: 1.3rem; }
.modal-card .contact-form { gap: 0.9rem; }
.modal-close {
  position: absolute;
  top: 0.9rem;
  inset-inline-end: 1rem;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--tint);
  color: var(--ink-soft);
  font-size: 1.3rem;
  cursor: pointer;
  transition: all 0.25s ease;
}
.modal-close:hover { background: var(--navy); color: #fff; }


/* ═══════════════════════════════════════════════════════════
   HERO REBUILD | editorial split, directional scrim, trust bar
   ═══════════════════════════════════════════════════════════ */

/* Layout: type sits on the page's 1200px container grid, not dead-centre */
.hero {
  justify-content: center;
  text-align: start;
  padding-block: clamp(8rem, 14vh, 11rem) clamp(6rem, 12vh, 8rem);
}
.hero-content {
  width: min(1200px, 100%);
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--pad);
  text-align: start;
}
.hero-content > * { max-width: 660px; }

/* Media: keep the footage vivid, slower and subtler Ken Burns */
.hero-bg { transform: scale(1.09); animation: heroZoom 26s cubic-bezier(.22,.6,.2,1) forwards; }
.hero-video { filter: saturate(1.35) contrast(1.3) brightness(1.04) hue-rotate(8deg); }
/* RTL puts the type on the right, so mirror the footage to keep the subject clear of it */
html[dir="rtl"] .hero-video { transform: scaleX(-1); }

/* Scrim: deep behind the type, clearing towards the image so the frame
   keeps its colour instead of the old flat blue-green haze */
.hero-overlay {
  background:
    radial-gradient(120% 100% at 12% 46%, rgba(5,14,28,.86) 0%, rgba(5,14,28,.58) 32%, rgba(5,14,28,.14) 62%, rgba(5,14,28,0) 100%),
    linear-gradient(180deg, rgba(5,14,28,.50) 0%, rgba(5,14,28,0) 26%, rgba(5,14,28,.06) 58%, rgba(5,14,28,.66) 100%);
}
html[dir="rtl"] .hero-overlay {
  background:
    radial-gradient(120% 100% at 88% 46%, rgba(5,14,28,.86) 0%, rgba(5,14,28,.58) 32%, rgba(5,14,28,.14) 62%, rgba(5,14,28,0) 100%),
    linear-gradient(180deg, rgba(5,14,28,.50) 0%, rgba(5,14,28,0) 26%, rgba(5,14,28,.06) 58%, rgba(5,14,28,.66) 100%);
}

/* Kicker: hairline rule + brand green spark */
.hero .kicker.light {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 0;
  color: #A8D8F7;
  letter-spacing: .34em;
  font-size: .68rem;
}
.hero .kicker.light::before {
  content: "";
  inline-size: clamp(26px, 4vw, 58px);
  block-size: 1px;
  flex: none;
  background: linear-gradient(to right, var(--green-bright), rgba(168,216,247,.12));
}
html[dir="rtl"] .hero .kicker.light::before { background: linear-gradient(to left, var(--green-bright), rgba(168,216,247,.12)); }
html[lang="ar"] .hero .kicker.light { letter-spacing: 0; font-size: .82rem; }

/* Headline */
.hero-content h1 {
  margin-top: 1.15rem;
  font-size: clamp(2.55rem, 6.4vw, 5.3rem);
  line-height: .99;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.hero-content h1, .page-hero-content h1 { text-shadow: 0 2px 44px rgba(0,0,0,.42); }

.hero-sub {
  margin: 1.45rem 0 0;
  max-width: 47ch;
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.72;
  color: #D5E5F4;
}

/* Actions: solid brand CTA + glass WhatsApp */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem;
  margin-top: 2.3rem;
}
.hero-actions .btn { margin-top: 0; }
.btn-hero-primary {
  background: var(--green-bright);
  border-color: var(--green-bright);
  color: #fff;
  box-shadow: 0 12px 30px -10px rgba(87,190,68,.62);
}
.btn-hero-primary:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 18px 40px -12px rgba(87,190,68,.68);
}
.btn-hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.36);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn-hero-ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn-wa { inline-size: 1.15em; block-size: 1.15em; fill: currentColor; flex: none; }

/* Trust bar: credibility above the fold */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(1.3rem, 3.4vw, 3rem);
  list-style: none;
  margin: 2.7rem 0 0;
  padding: 1.55rem 0 0;
  max-width: 600px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.hero-trust li { display: flex; flex-direction: column; gap: .3rem; }
.hero-trust strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  line-height: 1;
  color: #fff;
}
.hero-trust span {
  font-size: .6rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: rgba(211,230,246,.74);
}
html[lang="ar"] .hero-trust span { letter-spacing: 0; font-size: .74rem; text-transform: none; }

/* Staggered entrance */
.hero-content > * { animation: heroRise .95s cubic-bezier(.16,.84,.28,1) both; }
.hero-content > *:nth-child(1) { animation-delay: .10s; }
.hero-content > *:nth-child(2) { animation-delay: .20s; }
.hero-content > *:nth-child(3) { animation-delay: .32s; }
.hero-content > *:nth-child(4) { animation-delay: .44s; }
.hero-content > *:nth-child(5) { animation-delay: .56s; }
@keyframes heroRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.scroll-hint { color: rgba(255,255,255,.62); }

/* Mobile: recentre, soften the scrim to a straight vertical fade */
@media (max-width: 860px) {
  .hero { text-align: center; padding-block: 7.5rem 5.5rem; }
  .hero-content, .hero-content > * { text-align: center; }
  .hero-content > * { max-width: 100%; }
  .hero-sub { margin-inline: auto; }
  .hero .kicker.light, .hero-actions, .hero-trust { justify-content: center; }
  .hero-trust { margin-inline: auto; }
  .hero-overlay, html[dir="rtl"] .hero-overlay {
    background: linear-gradient(180deg, rgba(5,14,28,.74) 0%, rgba(5,14,28,.50) 38%, rgba(5,14,28,.86) 100%);
  }
}
@media (max-width: 860px) {
  /* scroll cue is redundant on touch and was colliding with the trust bar */
  .scroll-hint { display: none; }
  .hero { padding-block: 7rem 4.5rem; }
  /* kicker fits one line without the rule */
  .hero .kicker.light { gap: 0; letter-spacing: .2em; font-size: .6rem; }
  .hero .kicker.light::before { display: none; }
  /* lock the three proof points to one row */
  .hero-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .55rem;
    max-width: 430px;
    padding-top: 1.3rem;
    margin-top: 2.2rem;
  }
  .hero-trust li { align-items: center; text-align: center; }
  .hero-trust strong { font-size: 1.4rem; }
  .hero-trust span { font-size: .5rem; letter-spacing: .1em; }
  html[lang="ar"] .hero-trust span { font-size: .64rem; }
}

@media (max-width: 420px) {
  .hero-actions .btn { width: 100%; justify-content: center; text-align: center; }
  .hero-trust { gap: .4rem; }
  .hero-trust strong { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-content > * { animation: none; }
  .hero-bg { animation: none; transform: none; }
}


/* ═══════════════════════════════════════════════════════════
   HEADER FIT | nowrap labels, single baseline, tighter rhythm
   ═══════════════════════════════════════════════════════════ */

.header-inner { gap: clamp(1rem, 2vw, 2rem); }

/* Labels must never break mid-phrase ("Galerie de / Sourires", "À / Propos") */
.main-nav { align-items: center; gap: clamp(0.95rem, 1.45vw, 1.4rem); }
.main-nav > a,
.nav-drop-btn { white-space: nowrap; line-height: 1; }
.main-nav > a,
.nav-drop-btn { font-size: 0.74rem; letter-spacing: 0.09em; }
html[lang="ar"] .main-nav > a,
html[lang="ar"] .nav-drop-btn { letter-spacing: 0; font-size: 0.92rem; }
html[lang="hi"] .main-nav > a,
html[lang="hi"] .nav-drop-btn { letter-spacing: 0.02em; font-size: 0.8rem; }
.nav-drop-btn { padding-block: 0.3rem; }

/* CTA: one line, always */
.header-actions { gap: 0.7rem; }
.header-actions .btn {
  white-space: nowrap;
  letter-spacing: 0.1em;
  padding: 0.62rem 1.3rem;
  line-height: 1.15;
}
html[lang="ar"] .header-actions .btn { letter-spacing: 0; }

/* Language switch: equal cells so four different scripts share one baseline */
.lang-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.55rem;
  padding: 0.44rem 0.5rem;
  line-height: 1;
  letter-spacing: 0.04em;
}
.lang-switch button[data-lang="ar"] { font-size: 0.75rem; }
.lang-switch button[data-lang="hi"] { font-size: 0.72rem; }

/* rounded pill inside a rounded track, instead of a hard square block */
.lang-switch { padding: 3px; gap: 2px; }
.lang-switch button { border-radius: 999px; }

@media (max-width: 560px) {
  .lang-switch button { min-width: 2.1rem; padding: 0.4rem 0.4rem; font-size: 0.62rem; }
  .lang-switch button[data-lang="ar"] { font-size: 0.68rem; }
  .lang-switch button[data-lang="hi"] { font-size: 0.66rem; }
}


/* ═══════════════════════════════════════════════════════════
   AGENCY POLISH LAYER
   Tokens → page-hero component → motion → micro-interactions
   Loaded last: intentionally authoritative over earlier passes.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* motion */
  --ease-out:  cubic-bezier(.16, .84, .28, 1);
  --ease-soft: cubic-bezier(.32, .72, 0, 1);
  --t-fast: .18s;
  --t-med:  .34s;
  --t-slow: .8s;
  /* elevation */
  --sh-1: 0 1px 2px rgba(16,38,72,.05), 0 2px 8px -4px rgba(16,38,72,.10);
  --sh-2: 0 2px 6px rgba(16,38,72,.06), 0 14px 32px -18px rgba(16,38,72,.24);
  --sh-3: 0 8px 20px rgba(16,38,72,.08), 0 36px 64px -28px rgba(16,38,72,.34);
}

/* ── Typography discipline ───────────────────────────────── */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.lead, .prose p { max-width: 68ch; }
.section > .container > p:not([class]) { max-width: 68ch; }
h2 { letter-spacing: -.018em; }
h3 { letter-spacing: -.008em; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing: 0; }

/* ── Focus: one visible, branded ring everywhere ─────────── */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}
.hero a:focus-visible, .page-hero a:focus-visible,
.site-header:not(.scrolled) a:focus-visible,
.site-header:not(.scrolled) button:focus-visible { outline-color: #fff; }

/* Skip link (keyboard users land on content, not the nav) */
.skip-link {
  position: absolute; inset-inline-start: 1rem; top: -100px;
  z-index: 200; background: var(--ink); color: #fff;
  padding: .7rem 1.2rem; border-radius: 999px;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus-visible { top: 1rem; }

/* ── PAGE HERO — rebuilt to match the homepage treatment ─── */
.page-hero {
  position: relative;
  min-height: 78svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: start;
  color: #fff;
  overflow: hidden;
  background: none;
  padding-block: clamp(8rem, 15vh, 11rem) clamp(4.5rem, 9vh, 7rem);
}
.page-hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.22) contrast(1.12) brightness(1.02);
  transform: scale(1.07);
  animation: heroZoom 24s var(--ease-soft) forwards;
}
.page-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 105% at 12% 48%, rgba(5,14,28,.88) 0%, rgba(5,14,28,.62) 33%, rgba(5,14,28,.18) 64%, rgba(5,14,28,0) 100%),
    linear-gradient(180deg, rgba(5,14,28,.56) 0%, rgba(5,14,28,.02) 26%, rgba(5,14,28,.10) 60%, rgba(5,14,28,.74) 100%);
}
html[dir="rtl"] .page-hero-overlay {
  background:
    radial-gradient(120% 105% at 88% 48%, rgba(5,14,28,.88) 0%, rgba(5,14,28,.62) 33%, rgba(5,14,28,.18) 64%, rgba(5,14,28,0) 100%),
    linear-gradient(180deg, rgba(5,14,28,.56) 0%, rgba(5,14,28,.02) 26%, rgba(5,14,28,.10) 60%, rgba(5,14,28,.74) 100%);
}
.page-hero-content {
  position: relative; z-index: 2;
  width: min(1200px, 100%);
  max-width: none;
  margin-inline: auto;
  padding: 0 var(--pad);
  text-align: start;
}
.page-hero-content > * { max-width: 680px; }
.page-hero-content h1 {
  font-size: clamp(2.3rem, 5.2vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin-top: 1.05rem;
}
.page-hero-content .lead {
  color: #D5E5F4;
  margin-top: 1.3rem;
  max-width: 52ch;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.7;
}
.page-hero .kicker.light {
  display: inline-flex; align-items: center; gap: .9rem;
  margin-bottom: 0; color: #A8D8F7;
  letter-spacing: .32em; font-size: .66rem;
}
.page-hero .kicker.light::before {
  content: ""; inline-size: clamp(24px, 3.5vw, 52px); block-size: 1px; flex: none;
  background: linear-gradient(to right, var(--green-bright), rgba(168,216,247,.12));
}
html[dir="rtl"] .page-hero .kicker.light::before { background: linear-gradient(to left, var(--green-bright), rgba(168,216,247,.12)); }
html[lang="ar"] .page-hero .kicker.light { letter-spacing: 0; font-size: .8rem; }
.page-hero .hero-actions { margin-top: 2rem; }
.page-hero-content > * { animation: heroRise .9s var(--ease-out) both; }
.page-hero-content > *:nth-child(1) { animation-delay: .06s; }
.page-hero-content > *:nth-child(2) { animation-delay: .14s; }
.page-hero-content > *:nth-child(3) { animation-delay: .24s; }
.page-hero-content > *:nth-child(4) { animation-delay: .34s; }
.page-hero-content > *:nth-child(5) { animation-delay: .44s; }

/* breadcrumbs sit inside the hero now */
.page-hero .breadcrumbs {
  background: none; border: none; padding: 0; margin: 0 0 1.1rem;
  font-size: .7rem; letter-spacing: .08em; color: rgba(214,232,247,.72);
}
.page-hero .breadcrumbs a { color: rgba(214,232,247,.9); }
.page-hero .breadcrumbs a:hover { color: #fff; }

@media (max-width: 860px) {
  .page-hero { text-align: center; min-height: 62svh; padding-block: 7rem 3.5rem; }
  .page-hero-content, .page-hero-content > * { text-align: center; max-width: 100%; }
  .page-hero-content .lead { margin-inline: auto; }
  .page-hero .kicker.light, .page-hero .hero-actions, .page-hero .breadcrumbs { justify-content: center; }
  .page-hero .kicker.light { gap: 0; letter-spacing: .18em; font-size: .58rem; }
  .page-hero .kicker.light::before { display: none; }
  .page-hero-overlay, html[dir="rtl"] .page-hero-overlay {
    background: linear-gradient(180deg, rgba(5,14,28,.72) 0%, rgba(5,14,28,.48) 40%, rgba(5,14,28,.84) 100%);
  }
}

/* ── Micro-interactions ──────────────────────────────────── */
.main-nav > a::after { transform-origin: left center; }
html[dir="rtl"] .main-nav > a::after { transform-origin: right center; }
.main-nav > a { transition: color var(--t-fast) var(--ease-out); }

.btn { transition: background var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.btn:active { transform: translateY(0) scale(.985); }

.service, .cards-3 .card, .post-card, .testimonial, .ba-card, .video-card {
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), background var(--t-med) var(--ease-out);
}
.service:hover, .post-card:hover { transform: translateY(-4px); }
.card-img img, .post-card img { transition: transform 1.1s var(--ease-soft); }
.cards-3 .card:hover .card-img img, .post-card:hover img { transform: scale(1.045); }

/* prose links read as links */
.prose a:not(.btn) {
  color: var(--blue-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: rgba(46,128,214,.4);
  transition: text-decoration-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.prose a:not(.btn):hover { color: var(--blue); text-decoration-color: currentColor; }

/* ── Reveal choreography ─────────────────────────────────── */
.reveal { transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .page-hero-bg { animation: none; transform: none; }
  .page-hero-content > * { animation: none; }
  .cards-3 .card:hover .card-img img, .post-card:hover img { transform: none; }
  .service:hover, .post-card:hover { transform: none; }
}


/* ═══════════════════════════════════════════════════════════
   BOOKING WIDGET
   ═══════════════════════════════════════════════════════════ */

.book-hero {
  padding: clamp(8rem, 15vh, 10.5rem) 0 clamp(2rem, 4vw, 3rem);
  background: linear-gradient(180deg, var(--tint), var(--page));
  border-bottom: 1px solid var(--line);
}
.book-hero h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-top: .6rem; color: var(--blue-deep); }
.book-hero .lead { max-width: 56ch; }
.book-trust {
  list-style: none; padding: 0; margin: 1.8rem 0 0;
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  font-size: .78rem; color: var(--ink-soft);
}
.book-trust li { display: flex; align-items: center; gap: .5rem; }
.book-trust li::before {
  content: ""; inline-size: 1.05em; block-size: 1.05em; flex: none; border-radius: 50%;
  background: var(--green-bright) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/72% no-repeat;
}
.book-section { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3.5rem, 7vw, 6rem); }
.book-help { margin-top: 2rem; text-align: center; font-size: .88rem; color: var(--ink-soft); }
.book-help a { color: var(--blue-deep); font-weight: 500; margin-inline-start: .4rem; }

/* ── Shell ───────────────────────────────────────────────── */
.bk {
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.bk-loading, .bk-empty {
  padding: 3rem var(--pad); text-align: center; color: var(--ink-soft);
}
.bk-loading::before {
  content: ""; display: block; inline-size: 26px; block-size: 26px; margin: 0 auto 1rem;
  border: 2px solid var(--blue-soft); border-top-color: var(--blue);
  border-radius: 50%; animation: bkSpin .8s linear infinite;
}
@keyframes bkSpin { to { transform: rotate(360deg); } }

/* ── Progress ────────────────────────────────────────────── */
.bk-steps {
  display: flex; gap: .4rem; list-style: none; margin: 0; padding: 1.1rem clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line); background: var(--tint); overflow-x: auto;
}
.bk-steps li {
  display: flex; align-items: center; gap: .55rem; flex: 1; min-width: max-content;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
}
html[lang="ar"] .bk-steps li { letter-spacing: 0; text-transform: none; font-size: .84rem; }
.bk-step-dot {
  inline-size: 1.7rem; block-size: 1.7rem; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--page); border: 1px solid var(--line);
  font-size: .74rem; font-weight: 500;
  transition: all var(--t-med) var(--ease-out);
}
.bk-steps li.current { color: var(--blue-deep); font-weight: 500; }
.bk-steps li.current .bk-step-dot { background: var(--blue); border-color: var(--blue); color: #fff; }
.bk-steps li.done .bk-step-dot { background: var(--green-bright); border-color: var(--green-bright); color: #fff; }
@media (max-width: 700px) { .bk-step-label { display: none; } .bk-steps li { flex: 0; } }

/* ── Body ────────────────────────────────────────────────── */
.bk-body { display: grid; grid-template-columns: 1fr 280px; }
.bk-main { padding: clamp(1.4rem, 3.4vw, 2.4rem); }
.bk-h { font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--blue-deep); margin-bottom: 1.3rem; }
.bk-sub {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); margin: 1.6rem 0 .8rem;
}
html[lang="ar"] .bk-sub { letter-spacing: 0; text-transform: none; font-size: .88rem; }

/* treatment cards */
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .7rem; }
.bk-card {
  display: flex; flex-direction: column; gap: .3rem; text-align: start;
  padding: 1rem 1.1rem; background: var(--page);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; font-family: var(--font-body);
  transition: all var(--t-med) var(--ease-out);
}
.bk-card:hover { border-color: var(--blue); background: var(--tint); transform: translateY(-2px); box-shadow: var(--sh-1); }
.bk-card-name { font-weight: 500; color: var(--ink); font-size: .95rem; line-height: 1.35; }
.bk-card-meta { font-size: .76rem; color: var(--ink-soft); }

.bk-prac { display: flex; flex-wrap: wrap; gap: .5rem; }
.bk-chip, .bk-slot {
  padding: .6rem 1rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--page); cursor: pointer; font-family: var(--font-body);
  font-size: .85rem; color: var(--ink);
  transition: all var(--t-fast) var(--ease-out);
}
.bk-chip:hover, .bk-slot:hover { border-color: var(--blue); color: var(--blue-deep); background: var(--tint); }
.bk-chip.sel, .bk-slot.sel { background: var(--blue); border-color: var(--blue); color: #fff; }

/* calendar */
.bk-cal { max-width: 400px; }
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.bk-cal-head strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; color: var(--blue-deep); }
.bk-nav {
  inline-size: 2.2rem; block-size: 2.2rem; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: var(--page);
  cursor: pointer; font-size: 1.2rem; line-height: 1; color: var(--ink);
  transition: all var(--t-fast) var(--ease-out);
}
.bk-nav:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); color: #fff; }
.bk-nav:disabled { opacity: .3; cursor: not-allowed; }
.bk-dows, .bk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-dow { text-align: center; font-size: .68rem; color: var(--ink-soft); padding-bottom: .4rem; text-transform: uppercase; }
.bk-day {
  position: relative; aspect-ratio: 1; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--tint); cursor: pointer;
  font-family: var(--font-body); font-size: .88rem; color: var(--ink);
  transition: all var(--t-fast) var(--ease-out);
}
.bk-day:hover:not(.off) { background: var(--blue-soft); border-color: var(--blue); }
.bk-day.sel { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 500; }
.bk-day.off { background: transparent; color: var(--blue-soft); cursor: not-allowed; }
.bk-day.empty { background: none; }
.bk-day.today { border-color: var(--green-bright); }
.bk-dot {
  position: absolute; bottom: 5px; inline-size: 4px; block-size: 4px;
  border-radius: 50%; background: var(--green-bright);
}
.bk-day.sel .bk-dot { background: #fff; }

/* slots */
.bk-daylabel { color: var(--ink-soft); margin-bottom: .4rem; font-size: .92rem; }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: .5rem; }
.bk-slot { text-align: center; padding: .65rem .5rem; }
.bk-slot-group + .bk-slot-group { margin-top: .4rem; }

/* form */
.bk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.bk-field { display: flex; flex-direction: column; gap: .35rem; }
.bk-field.bk-wide { grid-column: 1 / -1; }
.bk-field > span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
html[lang="ar"] .bk-field > span { letter-spacing: 0; text-transform: none; font-size: .86rem; }
.bk-field input, .bk-field textarea {
  padding: .8rem .95rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--tint); font-family: var(--font-body); font-size: .95rem; color: var(--ink);
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.bk-field input:focus, .bk-field textarea:focus { background: var(--page); border-color: var(--blue); outline: none; }
.bk-field small { font-size: .72rem; color: var(--ink-soft); }
.bk-error {
  grid-column: 1 / -1; margin: 0; padding: .8rem 1rem; border-radius: var(--r-sm);
  background: #FDECEC; border: 1px solid #F5C6C6; color: #A32222; font-size: .88rem;
}
.bk-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.bk-submit { margin-top: 0; }
.bk-back {
  background: none; border: none; cursor: pointer; padding: .5rem 0;
  font-family: var(--font-body); font-size: .82rem; color: var(--ink-soft);
  transition: color var(--t-fast) var(--ease-out);
}
.bk-back:hover { color: var(--blue-deep); }
.bk-main > .bk-back { margin-top: 1.6rem; }
html[dir="rtl"] .bk-back { transform: scaleX(-1); display: inline-block; }
html[dir="rtl"] .bk-back { direction: rtl; transform: none; }

/* summary rail */
.bk-summary {
  border-inline-start: 1px solid var(--line); background: var(--tint);
  padding: clamp(1.4rem, 3vw, 2rem) 1.4rem;
}
.bk-summary h3 {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 1rem;
}
html[lang="ar"] .bk-summary h3 { letter-spacing: 0; text-transform: none; font-size: .88rem; }
.bk-sum-row { display: flex; flex-direction: column; gap: .15rem; padding-block: .6rem; border-bottom: 1px solid var(--line); }
.bk-sum-row:last-child { border-bottom: none; }
.bk-sum-row span { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
html[lang="ar"] .bk-sum-row span { letter-spacing: 0; text-transform: none; font-size: .82rem; }
.bk-sum-row strong { font-weight: 500; color: var(--ink); font-size: .92rem; }

@media (max-width: 860px) {
  .bk-body { grid-template-columns: 1fr; }
  .bk-summary { border-inline-start: none; border-top: 1px solid var(--line); }
  .bk-form { grid-template-columns: 1fr; }
}

/* ── Confirmation ────────────────────────────────────────── */
.bk-done { padding: clamp(2.5rem, 6vw, 4rem) var(--pad); text-align: center; }
.bk-tick { inline-size: 76px; block-size: 76px; margin: 0 auto 1.5rem; }
.bk-tick svg { width: 100%; height: 100%; fill: none; stroke: var(--green-bright); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bk-tick circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: bkDraw .6s var(--ease-out) forwards; }
.bk-tick path { stroke-dasharray: 36; stroke-dashoffset: 36; animation: bkDraw .4s var(--ease-out) .5s forwards; }
@keyframes bkDraw { to { stroke-dashoffset: 0; } }
.bk-done h2 { color: var(--blue-deep); font-size: clamp(1.4rem, 3vw, 2rem); }
.bk-done-when { font-size: 1.1rem; color: var(--ink); margin-top: .8rem; font-weight: 500; }
.bk-done-what { color: var(--ink-soft); margin-top: .2rem; }
.bk-ref {
  display: inline-flex; flex-direction: column; gap: .2rem; align-items: center;
  margin-top: 1.6rem; padding: .9rem 1.8rem;
  background: var(--tint); border: 1px dashed var(--blue-soft); border-radius: var(--r-sm);
}
.bk-ref span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.bk-ref strong { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .06em; color: var(--blue-deep); }
.bk-done-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.8rem; }
.bk-done-actions .btn { margin-top: 0; }
.btn-outline { border-color: var(--line); color: var(--ink); }
.btn-outline:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.bk-manage { margin-top: 1.4rem; font-size: .86rem; }
.bk-manage a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: .2em; }

@media (prefers-reduced-motion: reduce) {
  .bk-tick circle, .bk-tick path { animation: none; stroke-dashoffset: 0; }
  .bk-loading::before { animation-duration: 2s; }
  .bk-card:hover { transform: none; }
}


/* Pages with a light hero: the transparent header would render white-on-white. */
body.page-light .site-header {
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
body.page-light .site-header:not(.scrolled) .brand-name,
body.page-light .site-header:not(.scrolled) .main-nav > a,
body.page-light .site-header:not(.scrolled) .nav-drop-btn { color: var(--ink); }
body.page-light .site-header:not(.scrolled) .brand-sub { color: var(--blue); }
body.page-light .site-header:not(.scrolled) .nav-toggle span { background: var(--ink); }


/* Insurance capture (UAE clinics bill insurers directly) */
.bk-pay { gap: .5rem; }
.bk-pay-opts { display: flex; gap: .5rem; flex-wrap: wrap; }
.bk-field select {
  padding: .8rem .95rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--tint); font-family: var(--font-body); font-size: .95rem; color: var(--ink);
}
.bk-field select:focus { background: var(--page); border-color: var(--blue); outline: none; }
.bk-insnote {
  grid-column: 1 / -1; margin: 0; padding: .75rem .95rem;
  background: var(--tint); border-inline-start: 3px solid var(--blue-soft);
  border-radius: var(--r-sm); font-size: .8rem; color: var(--ink-soft);
}


/* width/height attributes (added to reserve space and stop layout shift) land as
   presentational hints width:800px;height:600px. Where CSS sizes an image with
   aspect-ratio + width:100%, that literal height wins and the ratio is ignored,
   rendering cards ~1.5x too tall. Author CSS outranks the hint, so hand height
   back to the ratio. .avatar and .ba-img already set an explicit height, so they
   are unaffected and must stay untouched. */
.card-img img,
.post-card img,
.doctor-img img { height: auto; }

/* ═══════════════════════════════════════════════════════════
   SERVICES EXPANSION | medical + dental groups, chips, accred
   ═══════════════════════════════════════════════════════════ */
.trust-strip { margin-top: 2.4rem; }

.svc-group { margin-top: 3rem; }
.svc-group .svc-group-title { color: var(--blue-deep); }

.svc-sub {
  margin-top: 2.4rem;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.svc-sub::before, .svc-sub::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.svc-sub h4 {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--green-deep);
  white-space: nowrap;
}
html[lang="ar"] .svc-sub h4, html[lang="hi"] .svc-sub h4 { letter-spacing: 0.06em; }

.medical { background: var(--tint); scroll-margin-top: 90px; }
.medical .s-icon { color: var(--green); font-size: 1.05rem; }
.medical .center { margin-top: 2rem; }

.svc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1.4rem;
}
.chip {
  display: inline-block;
  padding: 0.42rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--page);
  font-size: 0.82rem;
  color: var(--ink-soft);
  box-shadow: var(--sh-card);
}
html[lang="ar"] .chip, html[lang="hi"] .chip { letter-spacing: 0; }

.accred {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2.4rem;
}
.accred-badge {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--blue-deep);
  border: 1.5px solid var(--blue-soft);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
}
.accred p { font-size: 0.85rem; color: var(--ink-soft); margin: 0; max-width: 40rem; }

.clinic-block .clinic-name {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 0.35rem;
}
html[lang="ar"] .clinic-block .clinic-name, html[lang="hi"] .clinic-block .clinic-name { letter-spacing: 0.04em; }

/* ── Brand logo lockup ───────────────────────────────────── */
.brand { flex-direction: row; align-items: center; gap: 0.62rem; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-logo { width: 48px; height: 48px; flex: none; border-radius: 50%; }
.site-header.scrolled .brand-logo { box-shadow: 0 0 0 1px var(--line); }
.f-brand .brand-logo { width: 64px; height: 64px; margin-bottom: 0.7rem; }
@media (max-width: 560px) { .brand-logo { width: 42px; height: 42px; } }

/* ── Dual-brand wordmark (Best Smile Clinic + Best Smile Clinic) ── */
.brand-name { font-size: 1.12rem; font-weight: 600; color: var(--blue-deep); line-height: 1.14; white-space: nowrap; }
.brand-sub { font-size: 0.6rem; letter-spacing: 0.08em; font-weight: 600; color: var(--green); white-space: nowrap; }
.site-header:not(.scrolled) .brand-name { color: #fff; }
.site-header:not(.scrolled) .brand-sub { color: #CFEAC7; }
.f-brand .brand-name { color: #fff; font-size: 1.45rem; }
.f-brand .brand-sub { color: var(--green-bright); }
html[lang="ar"] .brand-sub, html[lang="hi"] .brand-sub { letter-spacing: 0; }
@media (max-width: 400px) { .brand-name { font-size: 1rem; } .brand-sub { font-size: 0.54rem; } }

/* ── Hero: real clinic photography, cinematic grade ───────── */
.hero-bg {
  background-image: url('/img/hero-desktop.jpg?v=1');
  background-size: cover;
  background-position: 50% 42%;
  background-repeat: no-repeat;
  filter: saturate(1.06) contrast(1.05) brightness(0.99);
}
@media (max-width: 860px) {
  .hero-bg {
    background-image: url('/img/hero-mobile.jpg?v=1');
    background-position: 50% 30%;
  }
}
/* Cinematic vignette layered over the directional scrim */
.hero-overlay::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(125% 92% at 50% 42%, rgba(4,10,22,0) 52%, rgba(4,10,22,0.30) 82%, rgba(4,10,22,0.62) 100%);
}


/* ── Service tile photos (clinic's own images) ───────────── */
.service .s-img {
  margin: -2.2rem -1.6rem 1.2rem;
  border-radius: var(--r) var(--r) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.service .s-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.9s var(--ease-soft, ease);
}
.service:hover .s-img img { transform: scale(1.04); }


/* Brand lockup */
.brand-name, .brand-sub { text-transform: uppercase; }

/* ═══════════════════════════════════════════════════════════
   PHONE HEADER
   ═══════════════════════════════════════════════════════════
   Measured on a 390px viewport: .header-inner was 497px wide. The brand alone
   took 265px and the four-language switcher another ~150, which pushed the
   hamburger's right edge to 497 - 107px past the screen. The menu and its
   Services dropdown were both working perfectly; there was simply no way to
   reach the button that opens them, which is why the site looked like it had
   no navigation at all on a phone. Arabic and Hindi were off-screen too, on a
   Dubai clinic site where they matter.

   So on a phone the top row carries only what it must - brand and hamburger -
   and the language chooser moves into the menu overlay, where four different
   scripts get a thumb-sized target each. */
@media (max-width: 760px) {
  .header-inner { gap: 0.6rem; padding-inline: 1rem; }

  /* The brand yields space to the control that has to be reachable. It stays
     legible: 1.05rem is still the largest text in the bar. */
  .brand { min-width: 0; flex: 0 1 auto; }
  .brand-logo { width: 38px; height: 38px; }
  .brand-name { font-size: 1.05rem; letter-spacing: 0.01em; }
  .brand-sub { font-size: 0.44rem; letter-spacing: 0.12em; }

  /* Out of the cramped top row... */
  .header-actions { flex: 0 0 auto; gap: 0.5rem; }
  .header-actions .lang-switch { display: none; }

  /* ...and into the menu while it is open. `.main-nav` sits before
     `.header-actions` in the markup, so the general sibling combinator lets
     the menu's own open state place it - no duplicated markup on fourteen
     pages, and no JavaScript to keep in step. */
  .main-nav.open ~ .header-actions .lang-switch {
    display: flex;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    /* The header's backdrop-filter makes it the containing block for this
       fixed bar, so `bottom` would resolve against the 72px header and park
       the pills on top of the brand. Anchoring by `top` in viewport units is
       immune: 100dvh is the screen no matter who contains us. */
    top: calc(100vh - 6.5rem);
    top: calc(100dvh - env(safe-area-inset-bottom, 0px) - 6.5rem);
    bottom: auto;
    z-index: 100;            /* the .main-nav.open overlay sits at 99 */
    background: #fff;
    box-shadow: var(--sh-card);
  }
  .main-nav.open ~ .header-actions .lang-switch button {
    min-width: 2.9rem;
    padding: 0.6rem 0.65rem;
    font-size: 0.72rem;
  }

  /* 44px is the smallest target a thumb hits reliably. The bars themselves
     stay 24px wide; the button grows around them. */
  .nav-toggle {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  /* Nothing in the header may widen the page again. */
  .site-header, .header-inner { max-width: 100vw; }
}

/* Very narrow phones (360px and below) drop the second brand line rather than
   let it wrap into the logo. */
@media (max-width: 360px) {
  .brand-sub { display: none; }
  .brand-name { font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════════
   LUXURY REFINEMENT LAYER  ·  loaded last — authoritative
   Deep-navy ink · champagne detailing · softer layered elevation
   · editorial rhythm. Sits over every earlier pass.
   ═══════════════════════════════════════════════════════════ */

/* ── Typographic rhythm ──────────────────────────────────── */
h1 { line-height: 1.05; letter-spacing: -0.02em; }
h2 { line-height: 1.1; }
h3 { line-height: 1.2; }
.lead { font-weight: 300; line-height: 1.78; }
html[lang="ar"] .lead, html[lang="hi"] .lead { font-weight: 400; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing: 0; }

/* Hero + page-hero kickers: champagne to match the section labels */
.hero .kicker.light, .page-hero .kicker.light { color: var(--gold-soft); }
.hero .kicker.light::before, .page-hero .kicker.light::before {
  background: linear-gradient(to right, var(--gold), rgba(217,190,139,.06));
}
html[dir="rtl"] .hero .kicker.light::before,
html[dir="rtl"] .page-hero .kicker.light::before {
  background: linear-gradient(to left, var(--gold), rgba(217,190,139,.06));
}

/* ── Header: hairline + tighter, cleaner glass ───────────── */
.site-header.scrolled {
  background: rgba(252,253,255,0.82);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 -1px 0 var(--line), 0 14px 36px -28px rgba(15,35,58,.42);
}
.brand-name { letter-spacing: 0.015em; }
.main-nav a::after { height: 1.5px; background: var(--gold); }

/* ── Button system ───────────────────────────────────────── */
.btn { letter-spacing: 0.14em; font-size: 0.72rem; padding: 0.95rem 2.15rem; }
html[lang="ar"] .btn, html[lang="hi"] .btn { letter-spacing: 0; }
.btn-small { padding: 0.62rem 1.35rem; font-size: 0.64rem; }
.btn-solid { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 8px 22px -13px rgba(31,78,123,.5); }
.btn-solid:hover { background: var(--blue-deep); border-color: var(--blue-deep); box-shadow: 0 14px 30px -13px rgba(31,78,123,.55); }
.btn-hero-primary {
  background: linear-gradient(180deg, var(--green-bright), var(--green));
  border-color: var(--green);
  box-shadow: 0 12px 30px -12px rgba(55,116,43,.5), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-hero-primary:hover {
  background: linear-gradient(180deg, var(--green), var(--green-deep));
  border-color: var(--green-deep);
  box-shadow: 0 18px 42px -14px rgba(55,116,43,.55), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-hero-ghost { border-color: rgba(255,255,255,0.42); }
.btn-green { background: linear-gradient(180deg, var(--green-bright), var(--green)); border-color: var(--green); }
.btn-green:hover { background: linear-gradient(180deg, var(--green), var(--green-deep)); border-color: var(--green-deep); }

/* ── Experience cards: warmer resting state, champagne accent ── */
.cards-3 .card { background: var(--page); }
.cards-3 .card::after { background: var(--gold); height: 2px; }
.cards-3 .card h3 { letter-spacing: -0.01em; }

/* ── Services tiles ──────────────────────────────────────── */
.service h3 { letter-spacing: -0.008em; }

/* ── Before/after gallery ────────────────────────────────── */
.ba-card { background: var(--page); }

/* ── Marquee: champagne diamond separators, inkier words ─── */
.marquee { border-block-color: var(--line); }
.marquee-track span { color: var(--heading); }
.marquee-track i { color: var(--gold); }

/* ── Process band: champagne numerals + hairlines ────────── */
.step { border-top-color: rgba(217,190,139,0.32); }
.step-num { color: var(--gold-soft); }
.step p { color: #C4D6EA; }

/* ── About band: deeper, more cinematic overlay ──────────── */
.about-overlay { background: linear-gradient(118deg, rgba(11,30,50,0.92), rgba(20,47,76,0.78)); }
.stat span { color: #BFD4E9; }
/* Champagne stat numerals on the deep-navy band */
.stat strong { background: linear-gradient(118deg, #F4E9D0 0%, var(--gold-soft) 46%, var(--gold) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.amenities { border-top-color: rgba(217,190,139,0.28); }
.about-band .a-ico, .light-text .a-ico, .cta-band .a-ico { color: var(--gold-soft); }

/* ── Testimonials: gold stars, champagne quote, refined type ── */
.testimonials { background: var(--tint); }
.testimonial { background: var(--page); padding: 2.4rem 2rem; }
.testimonial blockquote { font-size: 1.18rem; line-height: 1.6; color: var(--ink); }
.testimonial::before { color: var(--gold); opacity: 0.22; font-size: 5.5rem; top: 0.6rem; }
.stars { color: var(--gold); letter-spacing: 0.3em; }
.avatar { border-color: var(--gold-soft); background: var(--page); }
.testimonial figcaption strong { color: var(--heading); letter-spacing: 0.04em; }

/* ── Doctor blockquote ornament ──────────────────────────── */
.doctor-copy blockquote { position: relative; }

/* ── FAQ: champagne marker, heading-navy open state ──────── */
.faq-item summary::after { color: var(--gold-ink); }
.faq-item summary { font-size: 1.14rem; }
.faq-item summary:hover { color: var(--blue-deep); }
.faq-item[open] summary { color: var(--heading); }
.faq-item[open] { border-color: rgba(198,161,91,0.35); }

/* ── Prose blockquote (articles) ─────────────────────────── */
.prose blockquote { border-inline-start-color: var(--gold); }

/* ── CTA band: subtle luminous depth ─────────────────────── */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 140% at 50% -20%, rgba(217,190,139,0.14), transparent 60%);
}
.cta-band > * { position: relative; z-index: 1; }

/* ── Footer: richer navy, champagne columns, hairlines ───── */
.site-footer { background: linear-gradient(180deg, var(--navy), var(--navy-deep)); }
.site-footer::before { background: linear-gradient(90deg, transparent, rgba(217,190,139,0.45), transparent); }
.f-col h4 { color: var(--gold-soft); letter-spacing: 0.18em; }
.f-brand .brand-sub { color: var(--gold-soft); }
.f-col a { color: #C7D5E6; }
.f-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); }

/* ── Floating controls ───────────────────────────────────── */
.to-top { background: var(--navy); box-shadow: 0 10px 26px -12px rgba(15,35,58,.5); }
.to-top:hover { background: var(--blue); }
.wa-float { box-shadow: 0 10px 28px -8px rgba(37,211,102,0.5); }
.scroll-progress { background: linear-gradient(90deg, var(--blue), var(--green-bright)); }

/* ── Micro-details ───────────────────────────────────────── */
::selection { background: #EBDAB2; color: var(--ink); }
.light-text ::selection, .process ::selection, .inside ::selection,
.site-footer ::selection, .cta-band ::selection { background: rgba(217,190,139,0.32); color: #fff; }
html { scrollbar-color: var(--navy) var(--tint); }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: var(--tint); }
body::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 6px; border: 2px solid var(--tint); }
body::-webkit-scrollbar-thumb:hover { background: var(--blue-deep); }

/* ── Booking flow polish ─────────────────────────────────── */
.book-hero h1 { color: var(--heading); }
.bk { box-shadow: var(--sh-hover); }
.bk-h, .bk-cal-head strong, .bk-done h2, .bk-done .bk-ref strong { color: var(--heading); }
.bk-summary { background: var(--tint); }
.bk-summary h3 { color: var(--gold-ink); }
.bk-card { border-radius: var(--r-sm); }
.bk-card.sel { border-color: var(--blue); background: var(--tint); box-shadow: inset 0 0 0 1px var(--blue); }
.bk-steps li.done .bk-step-dot { background: var(--green); border-color: var(--green); }

/* ── Mobile polish (≤ 480px) ─────────────────────────────── */
@media (max-width: 480px) {
  .section { padding-block: clamp(3rem, 11vw, 4.25rem); }
  .hero-content h1 { font-size: clamp(2.35rem, 10.5vw, 3.1rem); }
  .hero-trust { gap: 1.25rem 1.6rem; margin-top: 2rem; padding-top: 1.25rem; }
  .hero-actions .btn { flex: 1 1 auto; text-align: center; }
  .testimonial { padding: 1.9rem 1.5rem; }
  .cards-3 .card h3, .cards-3 .card p { padding-inline: 1.4rem; }
}

/* ── Mobile menu: staggered link entrance + refined targets ── */
@media (max-width: 1280px) {
  .main-nav.open { background: linear-gradient(180deg, #ffffff, var(--tint)); gap: 1.6rem; }
  .main-nav.open > a, .main-nav.open .nav-drop {
    letter-spacing: 0.04em;
    animation: navRise 0.5s var(--ease-out) both;
  }
  .main-nav.open > a:nth-child(1) { animation-delay: 0.06s; }
  .main-nav.open > a:nth-child(2) { animation-delay: 0.12s; }
  .main-nav.open .nav-drop        { animation-delay: 0.18s; }
  .main-nav.open > a:nth-child(4) { animation-delay: 0.24s; }
  .main-nav.open > a:nth-child(5) { animation-delay: 0.30s; }
  .main-nav.open > a:nth-child(6) { animation-delay: 0.36s; }
}
@keyframes navRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .main-nav.open > a, .main-nav.open .nav-drop { animation: none; }
}

/* Editorial prose markers → champagne, matching the section kickers */
.prose > h2::before { background: linear-gradient(90deg, var(--gold), rgba(217,190,139,0.25)); }
.prose > h3::before { color: var(--gold); }
.aside-card h3 { color: var(--heading); }
.aside-note strong { color: var(--heading); }

/* ── Clean-clinical pass: one blue accent + airy hero ── */
.hero-overlay, .hero-overlay::after { background: linear-gradient(105deg, rgba(10,20,38,.82) 0%, rgba(10,20,38,.55) 42%, rgba(10,20,38,.12) 72%, rgba(10,20,38,0) 100%) !important; }
html[dir="rtl"] .hero-overlay, html[dir="rtl"] .hero-overlay::after { background: linear-gradient(255deg, rgba(10,20,38,.82) 0%, rgba(10,20,38,.55) 42%, rgba(10,20,38,.12) 72%, rgba(10,20,38,0) 100%) !important; }
.stat strong { background: none !important; -webkit-text-fill-color: #CFE4F7 !important; color: #CFE4F7 !important; }