/* ==========================================================================
   Leona Aesthetic Clinic — site stylesheet
   One sheet serves English (LTR) and Arabic (RTL): layout uses CSS logical
   properties, and [lang="ar"] swaps the type stack and drops Latin-only
   typographic devices (letter-spacing, uppercase, italics).
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --ink:            #17100b;
  --ink-deep:       #120c08;
  --ink-black:      #0f0a07;
  --ink-card:       #2a1c14;
  --cream:          #f1e4cc;
  --ivory:          #f4ece0;
  --espresso:       #2a1a10;
  --sienna:         #7a3d14;
  --sienna-bright:  #8a4519;
  --sienna-hover:   #9c4f1c;
  --gold:           #e6c58c;
  --tan:            #c9915f;
  --olive-glass:    rgba(84, 75, 46, 0.42);

  --on-dark:        var(--cream);
  --on-dark-soft:   rgba(241, 228, 204, 0.74);
  --on-dark-faint:  rgba(241, 228, 204, 0.5);
  --rule-dark:      rgba(241, 228, 204, 0.14);
  --on-light:       var(--espresso);
  --on-light-soft:  rgba(42, 26, 16, 0.74);
  --rule-light:     rgba(122, 61, 20, 0.28);

  --font-display: 'Cormorant Garamond', Cormorant, Georgia, 'Times New Roman', serif;
  --font-body:    'Jost', Futura, 'Century Gothic', 'Trebuchet MS', system-ui, sans-serif;
  --font-latin:   'Jost', Futura, 'Century Gothic', 'Trebuchet MS', system-ui, sans-serif;

  --display-weight: 500;
  --display-leading: 0.98;
  --body-leading: 1.68;
  --em-style: italic;

  --gutter: clamp(20px, 5vw, 72px);
  --section-y: clamp(72px, 9vw, 136px);
  --maxw: 1440px;
  --radius: 4px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --header-h: 88px;
}

html[lang="ar"] {
  --font-display: 'Amiri', 'Traditional Arabic', 'Times New Roman', serif;
  --font-body:    'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  --display-weight: 400;
  --display-leading: 1.26;
  --body-leading: 1.95;
  --em-style: normal;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
html[lang="ar"] body { font-weight: 400; }
html[dir="rtl"] body { text-align: right; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--display-weight); }
p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--gutter);
  z-index: 200;
  padding: 12px 20px;
  background: var(--cream);
  color: var(--espresso);
  font-size: 14px;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: inset-block-start 0.2s;
}
.skip-link:focus { inset-block-start: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- shared type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: var(--display-leading);
  letter-spacing: -0.005em;
}
html[lang="ar"] .display { letter-spacing: 0; }
.display em { font-style: var(--em-style); font-weight: inherit; color: var(--gold); }
.section--light .display em { color: var(--sienna); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--tan);
  line-height: 1.4;
}
html[lang="ar"] .eyebrow {
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
}
html[lang="ar"] .eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  flex: none;
}
.section--light .eyebrow { color: var(--sienna); }

.latin {
  font-family: var(--font-latin);
  direction: ltr;
  unicode-bidi: isolate;
}
.num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  direction: ltr;
  unicode-bidi: isolate;
  line-height: 1;
  color: var(--sienna);
}

.lede { font-size: clamp(16px, 1.15vw, 19px); color: var(--on-dark-soft); }
.section--light .lede { color: var(--on-light-soft); }

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--light { background: var(--ivory); color: var(--on-light); }
.section--deep { background: var(--ink-deep); }
.section--black { background: var(--ink-black); }

.section-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  align-items: end;
}
.section-head__title { grid-column: span 7; }
.section-head__note { grid-column: 9 / span 4; margin-block-end: 10px; }
.section-head h2 { margin-block-start: 24px; font-size: clamp(38px, 5vw, 72px); }
@media (max-width: 900px) {
  .section-head { display: block; }
  .section-head__note { margin-block-start: 22px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding-inline: 34px;
  border-radius: 999px;
  background: var(--sienna-bright);
  color: #f7e9cf;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  transition: background 0.25s var(--ease);
}
.btn:hover { background: var(--sienna-hover); color: #fff4dd; }
.btn--ghost {
  min-height: 46px;
  padding-inline: 24px;
  background: none;
  border: 1px solid rgba(241, 228, 204, 0.32);
  color: var(--cream);
  font-size: 11px;
}
.btn--ghost:hover { background: none; border-color: rgba(241, 228, 204, 0.7); color: var(--cream); }
html[lang="ar"] .btn { font-size: 15px; letter-spacing: 0; text-transform: none; }
html[lang="ar"] .btn--ghost { font-size: 14px; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  transition: color 0.2s;
}
.textlink:hover { color: var(--cream); }
.section--light .textlink { color: var(--sienna); }
.section--light .textlink:hover { color: var(--espresso); }
html[lang="ar"] .textlink { font-size: 14.5px; letter-spacing: 0; text-transform: none; }
html[dir="rtl"] .textlink .icon-arrow { transform: scaleX(-1); }

/* ---------- header ---------- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  transition: background 0.3s var(--ease), backdrop-filter 0.3s, border-color 0.3s;
  border-block-end: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(18, 12, 8, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-end-color: rgba(241, 228, 204, 0.1);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
}
.brand { display: flex; align-items: center; flex: none; }
.brand img { width: auto; height: 24px; }
html[lang="ar"] .brand img { height: 44px; }

.nav { display: flex; align-items: center; gap: clamp(16px, 1.9vw, 34px); }
.nav a {
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  transition: color 0.2s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--cream); }
.nav > a { white-space: nowrap; }
.nav > .btn { display: none; }
html[lang="ar"] .nav a { font-size: 15.5px; letter-spacing: 0; text-transform: none; }

.header-actions { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 28px); flex: none; }
.lang-switch {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.lang-switch:hover { color: var(--cream); }
html[lang="en"] .lang-switch { font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif; font-size: 15px; letter-spacing: 0; text-transform: none; direction: rtl; }

/* Both icons occupy the same grid cell, so the button keeps one fixed size and
   the two states cross-fade instead of the menu bar reflowing mid-tap. */
.nav-toggle {
  display: none;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 9px;
  margin-inline-end: -9px;
  color: var(--cream);
  touch-action: manipulation;
}
.nav-toggle svg {
  grid-area: 1 / 1;
  width: 26px;
  height: 26px;
  transition: opacity 0.2s var(--ease), transform 0.3s var(--ease);
}
/* The hamburger's short bar belongs on the inline-start side, so it flips in
   Arabic; the cross is symmetrical and needs no flip. */
.nav-toggle__open { --flip: 1; transform: scaleX(var(--flip)); }
html[dir="rtl"] .nav-toggle__open { --flip: -1; }
.nav-toggle__close { opacity: 0; transform: rotate(-90deg) scale(0.7); }
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  opacity: 0;
  transform: scaleX(var(--flip)) rotate(90deg) scale(0.7);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__close { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  :root { --header-h: 74px; }
  .nav-toggle { display: grid; }

  /* The panel is fixed, so within the header's stacking context it paints over
     its static siblings — which buried the toggle and left no way out of the
     menu on a touch device. Lifting the header's own controls above the panel
     keeps the close button, and the brand, reachable the whole time. */
  .brand,
  .header-actions { position: relative; z-index: 2; }

  /* The panel starts below the bar rather than under it. Padding alone would
     not do: the links would scroll up behind a transparent header and collide
     with the wordmark, and the header's own background cannot hide them
     because it paints beneath every positioned child it contains. */
  .nav {
    position: fixed;
    inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 0 0;
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding:
      8px
      calc(var(--gutter) + env(safe-area-inset-right, 0px))
      calc(32px + env(safe-area-inset-bottom, 0px))
      calc(var(--gutter) + env(safe-area-inset-left, 0px));
    background: var(--ink-deep);
    transform: translateX(100%);
    transition: transform 0.4s var(--ease), visibility 0.4s;
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Auto margins centre the block when it fits and collapse to zero when it
     does not. `justify-content: center` cannot do that: anything overflowing
     past the top edge becomes unscrollable, which stranded the first link off
     screen in landscape and at large text sizes. */
  .nav > * { flex: none; }
  .nav > :first-child { margin-block-start: auto; }
  .nav > :last-child { margin-block-end: auto; }

  html[dir="rtl"] .nav { transform: translateX(-100%); }
  /* The open state has to be spelled out for RTL too. `html[dir="rtl"] .nav`
     out-weighs a bare `.nav.is-open`, so the Arabic panel stayed parked off
     screen while the page behind it was already locked — the menu looked
     frozen because the only thing that opened was the scroll lock. */
  .nav.is-open,
  html[dir="rtl"] .nav.is-open { transform: none; visibility: visible; }
  .nav a { font-size: 22px; letter-spacing: 0.08em; padding-block: 14px; }
  /* Full-width rows: the tap target is the line, not just the word. */
  .nav > a:not(.btn) { align-self: stretch; }
  html[lang="ar"] .nav a { font-size: 26px; }
  .nav > .btn { display: inline-flex; margin-block-start: 24px; font-size: 12px; }
  .header-actions .btn--ghost { display: none; }

  /* Opaque and in the panel's own colour, so the bar and the panel read as one
     surface and the menu scrolls cleanly out of sight beneath it.
     Dropping the blur is load-bearing, not cosmetic: a live backdrop-filter
     makes the header the containing block for its fixed children, which would
     re-anchor the panel to the 74px bar instead of the viewport. */
  html.nav-open .site-header {
    background: var(--ink-deep);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-block-end-color: transparent;
  }

  /* Hold the page still behind the panel, and keep the overlays that outrank
     the header (the progress hairline) from drawing across it. */
  html.nav-open,
  html.nav-open body { overflow: hidden; }
  html.nav-open body { position: fixed; inset-inline: 0; width: 100%; }
  html.nav-open .progress,
  html.nav-open .call-fab { opacity: 0; visibility: hidden; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(940px, 100svh);
  padding-block: 140px 84px;
  overflow: hidden;
  background: var(--ink);
}
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(880px 620px at 20% 44%, rgba(122, 61, 20, 0.3), rgba(23, 16, 11, 0) 70%),
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 45%, #2a1b12 100%);
}
html[dir="rtl"] .hero__bg {
  background:
    radial-gradient(880px 620px at 80% 44%, rgba(122, 61, 20, 0.3), rgba(23, 16, 11, 0) 70%),
    linear-gradient(270deg, var(--ink) 0%, var(--ink) 45%, #2a1b12 100%);
}
.hero__watermark {
  position: absolute;
  inset-inline-start: -24px;
  inset-block-end: -12%;
  display: flex;
  align-items: center;
  font-family: var(--font-latin);
  font-weight: 300;
  font-size: min(560px, 39vw);
  line-height: 1;
  letter-spacing: 0.05em;
  color: rgba(241, 228, 204, 0.04);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  direction: ltr;
}
.hero__watermark svg { width: 0.66em; height: 0.66em; margin-inline: 0.04em; color: rgba(241, 228, 204, 0.05); }

.hero__photo {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 50%;
  max-width: 780px;
  height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.85) 20%, #000 34%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.85) 20%, #000 34%);
}
html[dir="rtl"] .hero__photo {
  -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.85) 20%, #000 34%);
  mask-image: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.85) 20%, #000 34%);
}
.hero__photo picture { height: 100%; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 12%; }
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 16, 11, 0.5) 0%, rgba(23, 16, 11, 0) 26%, rgba(23, 16, 11, 0) 58%, var(--ink) 100%);
}
.hero__inner { position: relative; z-index: 3; width: 100%; }
.hero__copy { max-width: 760px; }
.hero h1 {
  margin-block: 28px 32px;
  font-size: clamp(46px, 8vw, 116px);
}
.hero__copy p { max-width: 540px; font-size: clamp(16px, 1.3vw, 18.5px); color: var(--on-dark-soft); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 2.5vw, 32px); margin-block-start: 40px; }

.hero__facts {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin-block-start: clamp(48px, 7vw, 96px);
  padding-block-start: 26px;
  border-block-start: 1px solid var(--rule-dark);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(241, 228, 204, 0.56);
}
html[lang="ar"] .hero__facts { font-size: 14px; letter-spacing: 0; text-transform: none; }
.hero__facts li { display: flex; align-items: center; gap: 40px; }
.hero__facts li::after { content: ""; width: 1px; height: 14px; background: var(--rule-dark); }
.hero__facts li:last-child::after { display: none; }

@media (max-width: 900px) {
  .hero { display: block; min-height: 0; padding-block: 86px 40px; }
  .hero h1 { margin-block: 18px 20px; }
  .hero__copy p { font-size: 15.5px; }
  .hero__photo {
    position: relative;
    inset: auto;
    width: auto;
    height: min(42vh, 340px);
    margin-inline: calc(var(--gutter) * -1);
    margin-block-end: 26px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 98%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 98%);
  }
  html[dir="rtl"] .hero__photo {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 98%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 98%);
  }
  .hero__photo img { object-position: 62% 28%; }
  .hero__watermark { font-size: 46vw; inset-block-end: 8%; }
  .hero .eyebrow { font-size: 10.5px; letter-spacing: 0.18em; }
  html[lang="ar"] .hero .eyebrow { font-size: 12.5px; letter-spacing: 0; }
  .hero__actions .btn { width: 100%; }
  .hero__facts { gap: 10px 24px; }
}

/* ---------- platform strip ---------- */
.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 30px;
  padding-block: 30px;
  border-block: 1px solid rgba(241, 228, 204, 0.08);
  font-family: var(--font-latin);
  direction: ltr;
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--on-dark-faint);
}
.strip .ring { width: 10px; height: 10px; color: #a5602b; flex: none; }

/* ---------- intro ---------- */
.intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: start; }
.intro__title { grid-column: span 6; }
.intro__title h2 { font-size: clamp(36px, 5vw, 72px); margin-block-start: 24px; }
.intro__body { grid-column: 8 / span 5; padding-block-start: 12px; }
.intro__body p + p { margin-block-start: 24px; }
.intro__body p { font-size: clamp(16px, 1.3vw, 19px); color: var(--on-dark-soft); }
.intro__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-block-start: 44px;
  padding-block-start: 22px;
  border-block-start: 1px solid rgba(216, 192, 121, 0.35);
  font-size: 14px;
  color: var(--on-dark-faint);
}
@media (max-width: 900px) {
  .intro { display: block; }
  .intro__body { margin-block-start: 28px; }
}

/* ---------- service columns ---------- */
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px); margin-block-start: clamp(48px, 6vw, 96px); }
@media (max-width: 900px) { .cols3 { grid-template-columns: 1fr; } }

.svc { border-block-start: 1px solid var(--rule-light); padding-block-start: 28px; }
.svc__num { font-size: clamp(40px, 4vw, 56px); }
.svc h3 { margin-block: 18px 20px; font-size: clamp(28px, 2.6vw, 38px); font-family: var(--font-display); }
html[lang="ar"] .svc h3 { font-weight: 700; }
.svc h3 a { transition: color 0.2s; }
.svc h3 a:hover { color: var(--sienna); }
.svc__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 13px;
  border-block-end: 1px solid rgba(122, 61, 20, 0.14);
  font-size: 16px;
  color: rgba(42, 26, 16, 0.86);
}
.svc__list li > span:first-child { flex: 1 1 auto; min-width: 0; }
.svc__list .tag {
  flex: none;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(122, 61, 20, 0.72);
}
html[lang="ar"] .svc__list .tag { font-size: 13px; letter-spacing: 0; text-transform: none; }
.svc__more { margin-block-start: 24px; }

/* ---------- doctors ---------- */
.doctors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-block-start: clamp(48px, 6vw, 88px); }
@media (max-width: 900px) {
  .doctors {
    display: flex;
    gap: 14px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .doctors::-webkit-scrollbar { display: none; }
  .doctor { flex: 0 0 min(78vw, 330px); scroll-snap-align: start; }
}
.doctor figure { margin: 0; }
.doctor__frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); background: var(--ink-card); }
.doctor__frame picture { height: 100%; }
.doctor__frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.doctor__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 16, 11, 0) 60%, rgba(23, 16, 11, 0.55) 100%);
}
.doctor figcaption { padding-block-start: 26px; }
.doctor__name { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.doctor__name h3 { font-family: var(--font-display); font-size: clamp(26px, 2.3vw, 34px); }
html[lang="ar"] .doctor__name h3 { font-weight: 700; }
.doctor__alt { font-size: 13px; letter-spacing: 0.1em; color: rgba(241, 228, 204, 0.45); }
.doctor__role { margin-block-start: 12px; font-weight: 500; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tan); }
html[lang="ar"] .doctor__role { font-size: 14.5px; letter-spacing: 0; text-transform: none; }
.doctor__bio { margin-block-start: 10px; font-size: 15px; color: rgba(241, 228, 204, 0.64); }

/* ---------- devices ---------- */
.devices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-block-start: clamp(48px, 6vw, 88px); }
@media (max-width: 1080px) {
  .devices {
    display: flex;
    gap: 14px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .devices::-webkit-scrollbar { display: none; }
  .device { flex: 0 0 min(72vw, 300px); min-height: 0; aspect-ratio: 300 / 620; scroll-snap-align: start; }
}
.device {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(340px, 44vw, 640px);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-card);
}
.device > picture { position: absolute; inset: 0; }
.device > picture img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.device::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 12, 8, 0.15) 0%, rgba(18, 12, 8, 0) 30%, rgba(18, 12, 8, 0) 48%, rgba(18, 12, 8, 0.94) 100%);
}
.device__text { position: relative; z-index: 2; padding: 26px; }
.device__kicker { font-weight: 500; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tan); }
html[lang="ar"] .device__kicker { font-size: 13px; letter-spacing: 0; text-transform: none; }
.device h3 { margin-block: 10px; font-family: var(--font-display); font-size: clamp(22px, 2vw, 31px); }
html[lang="ar"] .device h3 { font-family: var(--font-latin); font-weight: 400; font-size: clamp(19px, 1.6vw, 24px); unicode-bidi: isolate; }
.device p { font-size: 14px; color: rgba(241, 228, 204, 0.68); line-height: 1.6; }
html[lang="ar"] .device p { line-height: 1.8; }

/* ---------- results / before-after ---------- */
.case {
  display: grid;
  grid-template-columns: 336px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  padding-block: 44px;
  border-block-end: 1px solid rgba(122, 61, 20, 0.2);
  align-items: start;
}
.cases { margin-block-start: clamp(48px, 6vw, 88px); border-block-start: 1px solid var(--rule-light); }
@media (max-width: 900px) { .case { grid-template-columns: 1fr; gap: 24px; padding-block: 32px; } }
.case__meta h3 { margin-block: 14px 8px; font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 34px); }
html[lang="ar"] .case__meta h3 { font-weight: 700; }
.case__doctor { font-size: 15.5px; color: rgba(42, 26, 16, 0.75); }
.case__detail { margin-block-start: 6px; font-size: 14.5px; color: rgba(42, 26, 16, 0.58); }

/* before/after comparison slider */
.ba {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: #e6dccd;
  touch-action: pan-y;
  user-select: none;
}
.ba img { width: 100%; height: auto; display: block; }
.ba__after { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba__after picture { height: 100%; }
.ba__after img { width: 100%; height: 100%; object-fit: cover; }
.ba__label {
  position: absolute;
  inset-block-start: 12px;
  z-index: 4;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(23, 16, 11, 0.62);
  color: var(--cream);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
html[lang="ar"] .ba__label { font-size: 13px; letter-spacing: 0; text-transform: none; }
.ba__label--before { inset-inline-start: 12px; }
.ba__label--after { inset-inline-end: 12px; }
.ba__handle {
  position: absolute;
  inset-block: 0;
  z-index: 5;
  width: 2px;
  margin-left: -1px;
  background: rgba(241, 228, 204, 0.9);
  cursor: ew-resize;
}
.ba__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--cream) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%237a3d14' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l-5 6 5 6M15 6l5 6-5 6'/></svg>") center / 22px no-repeat;
  box-shadow: 0 2px 14px rgba(23, 16, 11, 0.35);
}
.ba input[type="range"] {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  direction: ltr;
}
.case__hint { margin-block-start: 12px; font-size: 13px; color: rgba(42, 26, 16, 0.5); }
.cases__foot { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; margin-block-start: 32px; }
.cases__note { font-size: 13.5px; color: rgba(42, 26, 16, 0.55); }

/* ---------- FAQ ---------- */
.faq { margin-block-start: clamp(40px, 5vw, 72px); max-width: 900px; }
.faq details {
  border-block-end: 1px solid var(--rule-dark);
}
.section--light .faq details { border-block-end-color: rgba(122, 61, 20, 0.2); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 24px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: var(--display-weight);
  line-height: 1.35;
}
html[lang="ar"] .faq summary { font-weight: 700; line-height: 1.5; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 15px; height: 15px;
  border-inline-end: 1.5px solid var(--tan);
  border-block-end: 1.5px solid var(--tan);
  transform: rotate(45deg);
  margin-block-start: -6px;
  transition: transform 0.3s var(--ease), margin-block-start 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-block-start: 4px; }
/* A closing panel keeps `open` set until its height animation lands, so the
   chevron is turned back by hand here to fall in step with the collapse. */
.faq details.is-closing summary::after { transform: rotate(45deg); margin-block-start: -6px; }
.faq p { padding-block-end: 26px; max-width: 70ch; font-size: 16px; color: var(--on-dark-soft); }
.section--light .faq p { color: var(--on-light-soft); }

/* ---------- visit ---------- */
.visit { position: relative; overflow: hidden; }
.visit__bg { position: absolute; inset: 0; }
.visit__bg picture { height: 100%; }
.visit__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.18; filter: saturate(0.9); }
.visit__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(23, 16, 11, 0.72) 50%, rgba(23, 16, 11, 0.55) 100%);
}
html[dir="rtl"] .visit__bg::after { background: linear-gradient(270deg, var(--ink) 0%, rgba(23, 16, 11, 0.72) 50%, rgba(23, 16, 11, 0.55) 100%); }
.visit__grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: start; }
.visit__intro { grid-column: span 6; }
.visit__intro h2 { margin-block-start: 24px; font-size: clamp(36px, 5vw, 72px); }
.visit__address { margin-block-start: 30px; font-size: clamp(16px, 1.3vw, 19px); color: rgba(241, 228, 204, 0.78); font-style: normal; }
.visit__card {
  grid-column: 8 / span 5;
  padding: 8px 44px;
  border: 1px solid rgba(241, 228, 204, 0.12);
  border-radius: 6px;
  background: var(--olive-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@media (max-width: 900px) {
  .visit__grid { display: block; }
  .visit__card { margin-block-start: 40px; padding-inline: 22px; }
}
.factrow {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 20px;
  padding-block: 22px;
  border-block-end: 1px solid rgba(241, 228, 204, 0.12);
}
.factrow:last-child { border-block-end: 0; }
@media (max-width: 480px) { .factrow { grid-template-columns: 1fr; gap: 6px; } }
.factrow dt { font-weight: 500; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tan); padding-block-start: 5px; }
html[lang="ar"] .factrow dt { font-size: 13px; letter-spacing: 0; text-transform: none; }
.factrow dd { margin: 0; font-size: 16.5px; color: rgba(241, 228, 204, 0.9); }
.factrow dd a:hover { color: var(--gold); }
.factrow .muted { color: var(--on-dark-faint); }

/* ---------- final CTA ---------- */
.cta { position: relative; text-align: center; overflow: hidden; }
.cta__ring {
  position: absolute;
  /* Physical, not logical: the centring transform below is physical and does
     not flip in RTL, so a logical inset would push the ring off-centre. */
  top: 50%;
  left: 50%;
  width: min(760px, 130vw);
  height: min(760px, 130vw);
  transform: translate(-50%, -50%);
  color: rgba(241, 228, 204, 0.05);
  pointer-events: none;
}
.cta__inner { position: relative; z-index: 2; }
.cta h2 { margin: 26px auto 0; max-width: 16ch; font-size: clamp(40px, 6.4vw, 88px); }
html[lang="ar"] .cta h2 { max-width: 20ch; }
.cta p { margin: 28px auto 0; max-width: 46ch; font-size: clamp(16px, 1.3vw, 18px); color: var(--on-dark-soft); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: center; margin-block-start: 42px; }
.cta__call { font-size: 15px; color: rgba(241, 228, 204, 0.62); }

/* ---------- footer ---------- */
.site-footer { padding-block: 60px 40px; background: var(--ink-black); border-block-start: 1px solid rgba(241, 228, 204, 0.08); }
.site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px; }
.site-footer__brand img { width: auto; height: 74px; opacity: 0.92; }
.site-footer__tagline { margin-block-start: 16px; font-size: 15px; color: var(--on-dark-faint); }
.site-footer__cols { display: flex; flex-wrap: wrap; gap: clamp(32px, 6vw, 90px); }
.site-footer h2 { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tan); margin-block-end: 18px; font-family: var(--font-body); font-weight: 500; }
html[lang="ar"] .site-footer h2 { font-size: 13px; letter-spacing: 0; text-transform: none; }
.site-footer li + li { margin-block-start: 13px; }
.site-footer__cols a, .site-footer address {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(241, 228, 204, 0.62);
  font-style: normal;
  transition: color 0.2s;
}
html[lang="ar"] .site-footer__cols a, html[lang="ar"] .site-footer address { font-size: 14.5px; letter-spacing: 0; text-transform: none; }
.site-footer__cols a:hover { color: var(--cream); }
.site-footer address { display: grid; gap: 12px; max-width: 300px; line-height: 1.7; text-transform: none; letter-spacing: 0; font-size: 14.5px; }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
  align-items: center;
  margin-block-start: 52px;
  padding-block-start: 22px;
  border-block-start: 1px solid rgba(241, 228, 204, 0.08);
  font-size: 12.5px;
  color: rgba(241, 228, 204, 0.42);
}

/* ---------- inner-page shell (service pages) ---------- */
.page-hero {
  position: relative;
  padding-block: clamp(140px, 16vw, 220px) clamp(56px, 7vw, 96px);
  background: var(--ink);
  overflow: hidden;
}
.page-hero__bg { position: absolute; inset: 0; background: radial-gradient(760px 520px at 22% 30%, rgba(122, 61, 20, 0.32), rgba(23, 16, 11, 0) 72%); }
html[dir="rtl"] .page-hero__bg { background: radial-gradient(760px 520px at 78% 30%, rgba(122, 61, 20, 0.32), rgba(23, 16, 11, 0) 72%); }
.page-hero__inner { position: relative; z-index: 2; }
.page-hero h1 { margin-block: 24px 26px; font-size: clamp(40px, 6.5vw, 88px); max-width: 18ch; }
.page-hero p { max-width: 62ch; font-size: clamp(16px, 1.3vw, 19px); color: var(--on-dark-soft); }
.page-hero .btn { margin-block-start: 36px; }

.breadcrumb { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-faint); }
html[lang="ar"] .breadcrumb { font-size: 14px; letter-spacing: 0; text-transform: none; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 10px; }
.breadcrumb li::after { content: "/"; margin-inline-start: 10px; opacity: 0.5; }
.breadcrumb li:last-child::after { display: none; }
.breadcrumb a:hover { color: var(--cream); }

.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(28px, 3.4vw, 46px); margin-block-start: clamp(40px, 5vw, 64px); }
.prose h3 { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); margin-block-start: 36px; }
html[lang="ar"] .prose h3 { font-weight: 700; }
.prose p { margin-block-start: 20px; font-size: 17px; color: var(--on-light-soft); }
.prose ul.ticks { margin-block-start: 22px; display: grid; gap: 12px; }
.prose ul.ticks li { position: relative; padding-inline-start: 28px; font-size: 16.5px; color: var(--on-light-soft); }
.prose ul.ticks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  width: 12px; height: 6px;
  border-inline-start: 1.5px solid var(--sienna);
  border-block-end: 1.5px solid var(--sienna);
  transform: rotate(-45deg);
}
html[dir="rtl"] .prose ul.ticks li::before { transform: rotate(-45deg) scaleX(1); }

.pricing-note {
  margin-block-start: 40px;
  padding: 24px 28px;
  border-inline-start: 2px solid var(--sienna);
  background: rgba(122, 61, 20, 0.06);
  font-size: 16px;
  color: var(--on-light-soft);
}

.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-block-start: clamp(40px, 5vw, 64px); }
@media (max-width: 780px) { .related { grid-template-columns: 1fr; } }
.related a {
  display: block;
  padding: 28px;
  border: 1px solid rgba(241, 228, 204, 0.12);
  border-radius: var(--radius);
  transition: border-color 0.25s, background 0.25s;
}
.related a:hover { border-color: rgba(241, 228, 204, 0.32); background: rgba(241, 228, 204, 0.03); }
.related h3 { font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); margin-block: 14px 10px; }
.related p { font-size: 14.5px; color: var(--on-dark-soft); }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- grain ---------- */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- floating call button (mobile) ---------- */
.call-fab {
  position: fixed;
  inset-block-end: 18px;
  inset-inline-end: 18px;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--sienna-bright);
  color: #f7e9cf;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.42);
}
html[lang="ar"] .call-fab { font-size: 15px; letter-spacing: 0; text-transform: none; }
.call-fab svg { width: 17px; height: 17px; }
@media (max-width: 900px) { .call-fab { display: inline-flex; padding: 12px 18px; font-size: 12px; letter-spacing: 0.1em; } }
/* Default is visible, so the button survives a JS failure; the script tucks it
   away only while the hero's own call-to-action is on screen. */
.call-fab.is-tucked { opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; }
.call-fab { transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s; }

/* ---------- print ---------- */
@media print {
  .site-header, .call-fab, .hero__photo, .grain, .cta__ring { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   Motion & craft layer
   Every effect below degrades to a static, fully legible page when JS is
   absent or the visitor prefers reduced motion.
   ========================================================================== */

/* scroll progress hairline */
.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 120;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--sienna-bright), var(--gold));
  pointer-events: none;
}
html[dir="rtl"] .progress { transform-origin: right center; }

/* pointer-tracked warmth in the hero */
.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  background: radial-gradient(420px 420px at var(--mx, 50%) var(--my, 50%), rgba(230, 197, 140, 0.09), transparent 70%);
}
.hero:hover .hero__glow { opacity: 1; }

/* headline: line-by-line mask reveal */
.reveal-lines .line { display: block; overflow: hidden; }
.reveal-lines .line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease);
}
.reveal-lines.is-in .line > span { transform: none; }
.reveal-lines.is-in .line:nth-child(2) > span { transition-delay: 0.1s; }
.reveal-lines.is-in .line:nth-child(3) > span { transition-delay: 0.2s; }

/* staged entrance for hero furniture */
.stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.stagger.is-in > * { opacity: 1; transform: none; }
.stagger.is-in > *:nth-child(2) { transition-delay: 0.12s; }
.stagger.is-in > *:nth-child(3) { transition-delay: 0.22s; }
.stagger.is-in > *:nth-child(4) { transition-delay: 0.32s; }

/* hero photo settles out of a slow push-in */
.hero__photo img { animation: heroSettle 3.2s var(--ease) both; transform-origin: 62% 38%; }
@keyframes heroSettle { from { transform: scale(1.07); } to { transform: scale(1); } }

/* platform marquee */
.strip { overflow: hidden; padding-inline: 0; gap: 0; flex-wrap: nowrap; justify-content: flex-start; }
.marquee { display: flex; flex: none; align-items: center; gap: 30px; padding-inline-end: 30px; will-change: transform; }
.marquee--run { animation: marquee 38s linear infinite; }
.strip:hover .marquee--run { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
html[dir="rtl"] .marquee--run { animation-name: marqueeRtl; }
@keyframes marqueeRtl { from { transform: translateX(0); } to { transform: translateX(100%); } }
.marquee span { flex: none; }

/* nav underline sweep */
.nav a { position: relative; }
.nav a::after {
  content: "";
  position: absolute;
  inset-block-end: -6px;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform 0.45s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: inline-start; }
@media (max-width: 1080px) { .nav a::after { display: none; } }

/* button sheen */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 244, 221, 0.22) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease);
}
.btn:hover::before { transform: translateX(120%); }

/* arrow slide on text links */
.textlink .icon-arrow { transition: transform 0.4s var(--ease); }
.textlink:hover .icon-arrow { transform: translate(3px, -3px); }
html[dir="rtl"] .textlink:hover .icon-arrow { transform: scaleX(-1) translate(3px, -3px); }

/* device + doctor image life */
.device > picture img, .doctor__frame img { transition: transform 1.1s var(--ease); }
.device:hover > picture img, .doctor:hover .doctor__frame img { transform: scale(1.045); }
.device__text { transition: transform 0.6s var(--ease); }
.device:hover .device__text { transform: translateY(-6px); }

/* service column: rule draws in */
.svc { position: relative; }
.svc::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: var(--sienna);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 1.1s var(--ease);
}
.svc.is-in::before { transform: scaleX(1); }

/* slow turn on the CTA ring */
.cta__ring svg { animation: turn 90s linear infinite; transform-origin: 50% 50%; }
@keyframes turn { to { transform: rotate(360deg); } }

/* reduced motion: hold everything still */
@media (prefers-reduced-motion: reduce) {
  .reveal-lines .line > span,
  .stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__photo img,
  .cta__ring svg,
  .marquee--run { animation: none !important; }
  .strip { justify-content: center; flex-wrap: wrap; padding-inline: var(--gutter); }
  .marquee { flex-wrap: wrap; justify-content: center; }
  .marquee[aria-hidden="true"] { display: none; }
  .hero__glow { display: none; }
}

/* no-JS: nothing may stay hidden */
html.no-js .reveal,
html.no-js .stagger > *,
html.no-js .reveal-lines .line > span { opacity: 1; transform: none; }
html.no-js .svc::before { transform: scaleX(1); }

/* ==========================================================================
   Above-the-fold exception
   Hero content animates on load instead of waiting for the scroll observer:
   the headline paints immediately (better LCP) and stays visible if the
   JavaScript never runs.
   ========================================================================== */
@keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }

.hero .reveal { animation: riseIn 1s var(--ease) 0.15s both; }
.hero .reveal-lines .line > span { transition: none; animation: lineUp 1.05s var(--ease) 0.3s both; }
.hero .reveal-lines .line:nth-child(2) > span { animation-delay: 0.42s; }
.hero .stagger > * { transition: none; animation: riseIn 0.95s var(--ease) 0.62s both; }
.hero .stagger > *:nth-child(2) { animation-delay: 0.76s; }
.hero .hero__facts.reveal { animation-delay: 0.95s; }

@media (prefers-reduced-motion: reduce) {
  .hero .reveal,
  .hero .reveal-lines .line > span,
  .hero .stagger > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- tablet corrections (cascade-safe: placed last) ---------- */
@media (min-width: 901px) and (max-width: 1200px) {
  .hero .hero__copy { max-width: 56%; }
  .hero .hero__inner h1 { font-size: clamp(42px, 6.4vw, 82px); }
  .hero .hero__copy p { font-size: 16px; }
}
@media (min-width: 560px) and (max-width: 900px) {
  .hero .hero__photo { height: min(56vh, 480px); }
}
@media (max-width: 1200px) {
  .hero__facts li { gap: 0; }
  .hero__facts li::after { display: none; }
}