/* ═══════════════════════════════════════════════════
   ELIF YAPI GAYRİMENKUL · CINEMATIC STYLES
   Luxury architecture film experience · Istanbul
   ═══════════════════════════════════════════════════ */

:root {
  --bg: #070707;
  --bg-2: #0A0A0A;
  --bg-3: #0F0F0F;
  --surface: #111111;
  --border: #1A1A1A;
  --border-2: #262626;
  --border-gold: rgba(200, 169, 106, 0.18);
  --border-gold-strong: rgba(200, 169, 106, 0.42);
  /* Soft gold used for text that shouldn't carry the full chroma weight of
     the primary gold — keeps luxury warmth without shouting. */
  --gold-text: rgba(200, 169, 106, 0.78);

  --gold: #C8A96A;
  --gold-bright: #E4C98C;
  --gold-soft: #9C824F;
  --gold-dim: #5A4A2A;

  --white: #FFFFFF;
  --text: #ECE9E2;
  --text-2: #C7C3B9;
  --text-dim: #86827B;
  --text-muted: #4A4843;

  /* ─────────────────────────────────────────────────────────
     TYPOGRAPHY SYSTEM  (single source of truth)
     ─────────────────────────────────────────────────────────
     Palette — loaded in index.html
       Display · Cormorant Garamond  400 / 500 / 600 (+ italic 400/500)
       Body    · Inter               300 / 400 / 500 / 600
       Accent  · JetBrains Mono      400 / 500
       Arabic  · Cairo               400 / 500 / 600 / 700

     Scale — minor-third (1.200), optically tuned for a dark
     editorial layout on high-density displays.               */

  --font-display: 'Cormorant Garamond', 'Cairo', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', 'Cairo', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'Cairo', 'Courier New', monospace;
  --font-arabic:  'Cairo', 'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* Font sizes */
  --fs-2xs:   10.5px;
  --fs-xs:    11.5px;
  --fs-sm:    13px;
  --fs-base:  15.5px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    clamp(1.5rem,  2vw + 0.8rem,  1.95rem);  /* ~24→31px   */
  --fs-2xl:   clamp(2.1rem,  3vw + 0.8rem,  3rem);     /* ~34→48px   */
  --fs-3xl:   clamp(3rem,    5vw + 1rem,    5rem);     /* ~48→80px   */
  --fs-4xl:   clamp(4rem,    8vw + 1rem,    7.5rem);   /* ~64→120px  */
  --fs-5xl:   clamp(5rem,    12vw,          10.5rem);  /* ~80→168px  */

  /* Weights */
  --fw-light:         300;
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-display:       400;   /* Cormorant naturally reads heavier   */
  --fw-display-bold:  500;

  /* Line heights */
  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.5;
  --lh-body:     1.65;
  --lh-relaxed:  1.75;

  /* Letter-spacing (semantic) */
  --ls-display:  -0.018em;
  --ls-head:     -0.01em;
  --ls-body:     0.002em;
  --ls-meta:     0.08em;
  --ls-kicker:   0.22em;
  --ls-label:    0.32em;

  --px: clamp(1.5rem, 5vw, 6rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ───── Reset ───── */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}

img, svg { display: block; max-width: 100%; }
button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--bg); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ═══════════════════════════════════════════════════
   AMBIENT LAYERS (global)
   ═══════════════════════════════════════════════════ */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.ambient-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  opacity: 0.04;
  mix-blend-mode: overlay;
}
.ambient-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.65) 100%);
}

/* ═══════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════ */
.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.8rem var(--px);
  transition: all 500ms var(--ease);
  mix-blend-mode: normal;
}
.bar.scrolled {
  padding: 1.1rem var(--px);
  background: rgba(7, 7, 7, 0.75);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border);
}

.bar-logo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--white);
}
.bar-mark {
  position: relative;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-gold-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1.2rem;
  font-weight: var(--fw-display-bold);
  font-style: italic;
}
.bar-mark::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(200, 169, 106, 0.12);
}
.bar-mark-bar {
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 20px;
  height: 1px;
  background: var(--gold);
  transform: translateX(-50%);
}
.bar-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.bar-text-name {
  font-family: var(--font-display);
  font-size: 1.18rem;
  color: var(--white);
  letter-spacing: 0.03em;
  font-weight: var(--fw-display-bold);
  line-height: 1;
}
.bar-text-sub {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-dim);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  font-weight: var(--fw-regular);
  line-height: 1;
}

.bar-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-dim);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--fw-regular);
}
.bar-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
}

.bar-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--border-gold-strong);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  transition: all 400ms var(--ease);
  position: relative;
  overflow: hidden;
}
.bar-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateY(101%);
  transition: transform 500ms var(--ease);
  z-index: 0;
}
.bar-cta > * { position: relative; z-index: 1; }
.bar-cta:hover::before { transform: translateY(0); }
.bar-cta:hover { color: var(--bg); border-color: var(--gold); }

/* ═══════════════════════════════════════════════════
   SCENE RAIL (right-side progress)
   ═══════════════════════════════════════════════════ */
.rail {
  position: fixed;
  top: 50%;
  right: 1.8rem;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.2rem 0.5rem;
}
.rail::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-gold), transparent);
  transform: translateX(-50%);
  z-index: -1;
}

.rail-dot {
  position: relative;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rail-dot span {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all 400ms var(--ease);
}
.rail-dot:hover span,
.rail-dot.active span {
  background: var(--gold);
  transform: scale(1.8);
  box-shadow: 0 0 14px var(--gold);
}

.rail-dot::before {
  content: attr(data-label);
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.35rem 0.7rem;
  background: var(--bg-2);
  border: 1px solid var(--border-gold);
  opacity: 0;
  pointer-events: none;
  transition: all 400ms var(--ease);
}
.rail-dot:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(-14px);
}

@media (max-width: 900px) {
  .rail { display: none; }
}

/* ═══════════════════════════════════════════════════
   SCENE BASE (shared)
   ═══════════════════════════════════════════════════ */
.scene {
  position: relative;
  width: 100%;
  min-height: 100vh;
  /* Use dynamic viewport units where supported (iOS 15.4+, Chrome 108+) so
     the hero and other full-height scenes fill the actual visible area
     instead of the larger fallback viewport that includes the collapsible
     Safari toolbars. `min-height` stacking means the later rule wins on
     supporting browsers and quietly falls back on older ones. */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(6rem, 12vh, 9rem) var(--px) 4rem;
  z-index: 2;
}

.scene-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Spotlights */
.spotlight {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}
.spot-tr {
  width: 800px;
  height: 800px;
  top: -250px;
  right: -250px;
  background: radial-gradient(circle, rgba(200, 169, 106, 0.35), transparent 60%);
}
.spot-bl {
  width: 700px;
  height: 700px;
  bottom: -280px;
  left: -250px;
  background: radial-gradient(circle, rgba(200, 169, 106, 0.12), transparent 60%);
}
.spot-top {
  width: 1100px;
  height: 700px;
  top: -300px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(200, 169, 106, 0.22), transparent 65%);
}
.spot-center {
  width: 900px;
  height: 900px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(200, 169, 106, 0.22), transparent 60%);
  animation: breathe-slow 8s infinite var(--ease);
}
.spot-left-soft {
  width: 900px;
  height: 900px;
  top: 50%;
  left: -300px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(200, 169, 106, 0.18), transparent 60%);
}
.spot-right-soft {
  width: 900px;
  height: 900px;
  top: 50%;
  right: -300px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(200, 169, 106, 0.14), transparent 60%);
}
.spot-bottom {
  width: 1400px;
  height: 800px;
  bottom: -400px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(200, 169, 106, 0.18), transparent 65%);
}
.spot-breathe {
  width: 1100px;
  height: 1100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(200, 169, 106, 0.28), transparent 60%);
  animation: breathe 6s infinite var(--ease);
}
@keyframes breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}
@keyframes breathe-slow {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.75; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.95; }
}

/* Particles */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.particles span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--gold);
  opacity: 0;
  animation: drift 24s infinite linear;
}
@keyframes drift {
  0% { transform: translateY(0) scale(0.3); opacity: 0; }
  10% { opacity: 0.7; }
  50% { opacity: 1; transform: translateY(-40px) scale(1); }
  90% { opacity: 0.5; }
  100% { transform: translateY(-80px) scale(0.3); opacity: 0; }
}

/* Scene markers */
.scene-marker {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  color: var(--text-dim);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  z-index: 5;
}
.scene-marker .line {
  display: block;
  width: 36px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.scene-marker .num { color: var(--gold); }
.scene-marker .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}
.scene-marker.tl {
  top: clamp(5.5rem, 9vh, 7.5rem);
  left: var(--px);
}
.scene-marker.tr {
  top: clamp(5.5rem, 9vh, 7.5rem);
  right: var(--px);
}

/* ═══════════════════════════════════════════════════
   CINEMA TYPOGRAPHY (shared)
   ═══════════════════════════════════════════════════ */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--gold-text);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  margin-bottom: 2.2rem;
  white-space: nowrap;
}
.kicker .ornament {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}

.cinema-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.024em;
  color: var(--white);
}
.cinema-title .line {
  display: block;
  font-size: var(--fs-4xl);
}
.cinema-title .italic em {
  font-style: italic;
  font-weight: var(--fw-display-bold);
  color: var(--gold);
}

.mega {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-5xl);
  line-height: 0.92;
  letter-spacing: -0.036em;
  color: var(--white);
  margin-bottom: 2rem;
}
.mega em {
  font-style: italic;
  font-weight: var(--fw-display-bold);
  color: var(--gold);
}

.big {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--white);
  margin-bottom: 2rem;
}
.big em {
  font-style: italic;
  font-weight: var(--fw-display-bold);
  color: var(--gold);
}

.cinema-sub {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  color: var(--text-2);
  line-height: var(--lh-snug);
  font-style: italic;
  font-weight: var(--fw-display);
  max-width: 36ch;
  letter-spacing: var(--ls-head);
}

.cinema-body {
  font-size: clamp(0.98rem, 1.1vw, 1.095rem);
  color: var(--text-2);
  line-height: var(--lh-relaxed);
  max-width: 42ch;
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-body);
  margin-bottom: 2.5rem;
}

.cinema-quote {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 2.05rem);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--text);
  max-width: 52ch;
  margin: 0 auto 2.5rem;
  text-align: center;
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-head);
}

/* ═══════════════════════════════════════════════════
   01 · HERO
   ═══════════════════════════════════════════════════ */
.scene-hero {
  text-align: center;
}
.hero-content {
  position: relative;
  z-index: 3;
  max-width: 1100px;
}
.hero-content .kicker { margin: 0 auto 2.5rem; justify-content: center; }
.cinema-title {
  margin-bottom: 2.5rem;
}
.hero-sub {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--gold);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-top: 2rem;
}

.scene-scroll {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-dim);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  z-index: 5;
  transition: color 400ms var(--ease);
}
.scene-scroll:hover { color: var(--gold); }
.scene-scroll .scroll-line {
  position: relative;
  width: 80px;
  height: 1px;
  background: var(--border-2);
  overflow: hidden;
}
.scene-scroll .scroll-dot {
  position: absolute;
  top: -1px;
  left: 0;
  width: 16px;
  height: 3px;
  background: var(--gold);
  animation: scroll-dot 3s infinite var(--ease);
}
@keyframes scroll-dot {
  0% { left: -16px; }
  100% { left: 100%; }
}

/* ═══════════════════════════════════════════════════
   02 · THE CITY
   ═══════════════════════════════════════════════════ */
.scene-city {
  text-align: center;
}
.city-skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 45vh;
  opacity: 0.9;
}
.city-content {
  position: relative;
  z-index: 3;
  max-width: 1200px;
}
.city-content .kicker { margin: 0 auto 2rem; }
.city-content .cinema-sub { margin: 0 auto 4rem; }

.city-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-top: 3rem;
  margin-top: 2rem;
  border-top: 1px solid var(--border-gold);
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.stat strong {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--gold);
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: var(--ls-display);
}
.stat span {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-dim);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--fw-regular);
}
.stat-div {
  width: 1px;
  height: 50px;
  background: var(--border-gold);
}

/* ═══════════════════════════════════════════════════
   03 · THE OPPORTUNITY
   ═══════════════════════════════════════════════════ */
.scene-opportunity { align-items: center; }
.opportunity-content {
  position: relative;
  z-index: 3;
  max-width: 1400px;
  width: 100%;
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
}

.opp-visual {
  display: flex;
  justify-content: center;
}
.visual-frame {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg) 100%);
  border: 1px solid var(--border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.frame-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1px solid var(--gold);
}
.frame-corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.frame-corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.frame-corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.frame-corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.visual-art {
  width: 100%;
  height: auto;
  max-height: 500px;
}
.frame-stamp {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--gold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.opp-text .big { margin-bottom: 1.8rem; }

.opp-stats {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.opp-stat {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.5rem;
  align-items: baseline;
}
.opp-stat-num strong {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  color: var(--gold);
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: -0.024em;
}
.opp-stat-num strong em {
  font-size: 0.6em;
  color: var(--gold-bright);
  font-style: normal;
  margin-left: 0.1em;
  font-weight: var(--fw-display-bold);
}
.opp-stat-num strong .unit {
  font-size: 0.42em;
  color: var(--gold-bright);
  letter-spacing: 0.04em;
}
.opp-stat-lbl {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--text-dim);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
}
.line-s {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   04 · THE COMPANY
   ═══════════════════════════════════════════════════ */
.scene-company { text-align: center; }
.company-content {
  position: relative;
  z-index: 3;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.company-content .kicker { margin-bottom: 2.5rem; }

.seal {
  width: 180px;
  height: 180px;
  margin-bottom: 2.5rem;
  animation: seal-rotate 50s linear infinite;
}
@keyframes seal-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.sig {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.sig-line {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════
   05 · THE SERVICES
   ═══════════════════════════════════════════════════ */
.scene-services { align-items: center; }
.services-content {
  position: relative;
  z-index: 3;
  max-width: 1200px;
  width: 100%;
}
.services-head {
  margin-bottom: 4rem;
  text-align: left;
}
.services-head .big { max-width: 10ch; }

.services-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.srv-row {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr 50px;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--white);
  transition: all 500ms var(--ease);
  overflow: hidden;
}
.srv-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(200, 169, 106, 0.08), transparent 70%);
  transform: translateX(-100%);
  transition: transform 600ms var(--ease);
  pointer-events: none;
}
.srv-row:hover::before { transform: translateX(0); }
.srv-row:hover {
  padding-left: 1.5rem;
  border-bottom-color: var(--gold);
}

.srv-num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--gold);
  letter-spacing: var(--ls-kicker);
  position: relative;
  z-index: 1;
}
.srv-body {
  position: relative;
  z-index: 1;
}
.srv-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.6rem);
  font-weight: var(--fw-display-bold);
  color: var(--white);
  line-height: 1.08;
  letter-spacing: var(--ls-head);
  margin-bottom: 0.45rem;
  transition: color 400ms var(--ease);
}
.srv-row:hover .srv-body h3 { color: var(--gold); font-style: italic; }
.srv-body p {
  font-size: 0.925rem;
  color: var(--text-dim);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  max-width: 60ch;
  letter-spacing: var(--ls-body);
}
.srv-arrow {
  color: var(--text-muted);
  transition: all 500ms var(--ease);
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
}
.srv-row:hover .srv-arrow {
  color: var(--gold);
  transform: translate(4px, -4px);
}

/* ═══════════════════════════════════════════════════
   06 · THE PROCESS (horizontal pinned scroll)
   ═══════════════════════════════════════════════════ */
.scene-process {
  /* CRITICAL: override .scene flex + overflow so sticky works */
  display: block;
  overflow: visible;
  min-height: 100vh;
  height: 520vh;
  padding: 0;
}

.process-pin {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  /* Match the dynamic-viewport behaviour of .scene so the pinned horizontal
     track doesn't leave a sliver under iOS Safari's collapsible UI chrome. */
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.process-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 3;
}

.process-track {
  display: flex;
  gap: clamp(2rem, 4vw, 4rem);
  padding: 0 10vw;
  will-change: transform;
  transition: transform 100ms linear;
}

.process-panel {
  flex-shrink: 0;
  width: clamp(320px, 55vw, 680px);
  min-height: 60vh;
  padding: 3rem clamp(2rem, 4vw, 4rem);
  background: var(--bg-2);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  transition: border-color 500ms var(--ease), transform 500ms var(--ease);
}
.process-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 700ms var(--ease);
  z-index: 4; /* above photo background */
}
.process-panel:hover {
  border-color: var(--border-gold-strong);
}
.process-panel:hover::before { transform: scaleX(1); }

.process-intro {
  background: transparent;
  border: none;
  justify-content: center;
  min-width: 520px;
}
.process-intro::before { display: none; }
.process-intro .kicker { margin-bottom: 1.5rem; }
.process-intro .big { margin-bottom: 1.5rem; }

.process-hint {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--gold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  margin-top: 2rem;
}
.process-hint .line-h {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--gold);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}
.panel-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 3.2vw, 3.6rem);
  color: var(--gold);
  font-weight: var(--fw-display);
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.028em;
}
.panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-2);
}

.process-panel h3 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3vw, 2.65rem);
  font-weight: var(--fw-display-bold);
  color: var(--white);
  margin-bottom: 1.15rem;
  letter-spacing: var(--ls-head);
  line-height: 1.08;
}
.process-panel p {
  color: var(--text-2);
  font-size: 0.985rem;
  line-height: var(--lh-body);
  max-width: 42ch;
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-body);
  flex: 1;
}

.panel-icon {
  width: 56px;
  height: 56px;
  color: var(--gold);
  margin-top: 2.5rem;
  opacity: 0.8;
}

/* ═══════════════════════════════════════════════════
   PROCESS PANEL PHOTO BACKGROUNDS
   ═══════════════════════════════════════════════════ */

/* Photo wrapper — sits behind all panel content */
.panel-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.panel-photo-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  /* Very dark + desaturated for luxury feel; gold tint via mix-blend */
  filter: brightness(0.18) saturate(0.5) contrast(1.15) sepia(0.15);
  transition: transform 9s ease-out, filter 600ms var(--ease);
  will-change: transform;
}
.process-panel:hover .panel-photo-bg img {
  transform: scale(1.06);
  filter: brightness(0.22) saturate(0.6) contrast(1.15) sepia(0.1);
}

/* Gradient fade: dark at top/bottom, slightly open in middle */
.panel-photo-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      170deg,
      rgba(7, 7, 7, 0.78) 0%,
      rgba(7, 7, 7, 0.22) 45%,
      rgba(7, 7, 7, 0.82) 100%
    );
}

/* Content wrapper — floats above photo background */
.panel-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

/* Panels with photos: near-transparent bg so photo edge shows */
.process-panel.has-photo {
  background: rgba(7, 7, 7, 0.12);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .panel-photo-bg img {
    filter: brightness(0.14) saturate(0.4) contrast(1.1) sepia(0.15);
  }
}

.process-end {
  background: linear-gradient(135deg, var(--bg-3) 0%, var(--bg) 100%);
  border-color: var(--border-gold);
  text-align: center;
  align-items: center;
}
.end-mark {
  font-size: 3rem;
  color: var(--gold);
  margin-bottom: 1.5rem;
  line-height: 1;
}
.process-end h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  margin-bottom: 2rem;
}
.process-end h3 em {
  font-style: italic;
  color: var(--gold);
  font-weight: var(--fw-display-bold);
}
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 0;
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  border-bottom: 1px solid var(--gold);
  transition: all 400ms var(--ease);
}
.btn-line:hover { gap: 1.1rem; color: var(--gold-bright); }

.process-bar {
  position: absolute;
  bottom: 4rem;
  left: 10vw;
  right: 10vw;
  height: 1px;
  background: var(--border);
  z-index: 4;
}
.process-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transition: width 100ms linear;
}

/* ═══════════════════════════════════════════════════
   07 · FINAL / BEGIN
   ═══════════════════════════════════════════════════ */
.scene-final { text-align: center; }
.final-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(200, 169, 106, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 169, 106, 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(circle at center, black 15%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at center, black 15%, transparent 70%);
}

.final-content {
  position: relative;
  z-index: 3;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.final-content .kicker { margin-bottom: 2.2rem; }

.cinema-final {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(3rem, 9vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.028em;
  color: var(--white);
  margin-bottom: 2rem;
}
.cinema-final em {
  font-style: italic;
  font-weight: var(--fw-display-bold);
  color: var(--gold);
}
.final-content .cinema-sub {
  margin: 0 auto 3.5rem;
}

/* Monument button */
.btn-monument {
  position: relative;
  display: inline-flex;
  padding: 0;
  margin-bottom: 3.5rem;
}
.btn-halo {
  position: absolute;
  inset: -8px;
  border: 1px solid var(--border-gold-strong);
  z-index: 0;
  animation: halo-rotate 8s infinite linear;
}
.btn-halo::before,
.btn-halo::after {
  content: '';
  position: absolute;
  background: var(--gold);
}
.btn-halo::before {
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 1px;
}
.btn-halo::after {
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 1px;
}
@keyframes halo-rotate {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.btn-face {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.5rem 2.8rem;
  background: var(--gold);
  color: var(--bg);
  transition: all 500ms var(--ease);
  box-shadow:
    0 0 0 0 rgba(200, 169, 106, 0.4),
    0 25px 60px -10px rgba(200, 169, 106, 0.4);
  animation: btn-glow 4s infinite var(--ease);
}
.btn-monument:hover .btn-face {
  transform: translateY(-2px);
  background: var(--gold-bright);
  box-shadow:
    0 0 0 0 rgba(200, 169, 106, 0.4),
    0 30px 70px -10px rgba(200, 169, 106, 0.6);
}
@keyframes btn-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 169, 106, 0.4), 0 25px 60px -10px rgba(200, 169, 106, 0.4); }
  50% { box-shadow: 0 0 40px 8px rgba(200, 169, 106, 0.2), 0 30px 70px -10px rgba(200, 169, 106, 0.55); }
}

.btn-wa { flex-shrink: 0; }
.btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  text-align: left;
}
.btn-line-1 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  line-height: 1;
}
.btn-line-2 {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-meta);
  opacity: 0.75;
  line-height: 1;
}
.btn-arrow {
  font-size: 1.2rem;
  transition: transform 400ms var(--ease);
}
.btn-monument:hover .btn-arrow { transform: translateX(4px); }

.final-contact {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  letter-spacing: var(--ls-meta);
  font-weight: var(--fw-regular);
  margin-bottom: 1.5rem;
}
.final-contact a { transition: color 300ms var(--ease); }
.final-contact a:hover { color: var(--gold); }
.final-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.5;
}

.final-langs {
  display: flex;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--gold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}
.final-langs span:nth-child(even) {
  opacity: 0.4;
}

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */
.foot {
  position: relative;
  z-index: 2;
  padding: 2rem var(--px);
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.foot-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-dim);
  letter-spacing: var(--ls-meta);
  font-weight: var(--fw-regular);
}
.foot-tag { color: var(--gold-dim); }
.foot-top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-dim);
  transition: color 300ms var(--ease);
}
.foot-top:hover { color: var(--gold); }

/* ═══════════════════════════════════════════════════
   STICKY WHATSAPP
   ═══════════════════════════════════════════════════ */
.wa-float {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2.5rem);
  bottom: clamp(1rem, 2.5vw, 2.5rem);
  z-index: 95;
  width: 62px;
  height: 62px;
}
.wa-icon {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 40px -8px rgba(37, 211, 102, 0.5);
  transition: transform 400ms var(--ease);
}
.wa-float:hover .wa-icon { transform: scale(1.08); }
.wa-ring {
  position: absolute;
  inset: -4px;
  border: 1px solid #25D366;
  border-radius: 50%;
  animation: wa-ring 2.5s infinite var(--ease-out);
  pointer-events: none;
}
.wa-ring-2 {
  animation-delay: 1.25s;
}
@keyframes wa-ring {
  0% { transform: scale(0.85); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ═══════════════════════════════════════════════════
   REVEAL
   ═══════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 1100ms var(--ease) var(--d, 0ms),
    transform 1100ms var(--ease) var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .opportunity-content {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .opp-visual { max-width: 340px; margin: 0 auto; }
}

@media (max-width: 768px) {
  body { font-size: 14px; }

  .bar {
    padding: 1.3rem var(--px);
  }
  .bar-meta { display: none; }
  .bar-text-sub { display: none; }
  .bar-cta {
    padding: 0.55rem 0.85rem;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }
  .bar-cta span:first-child { display: none; }

  .scene { padding-top: 6rem; padding-bottom: 3rem; }

  .scene-marker.tl { top: 5rem; left: 1.2rem; font-size: 0.55rem; }
  .scene-marker.tr { top: 5rem; right: 1.2rem; font-size: 0.55rem; }
  .scene-marker .line { width: 20px; }

  .kicker { font-size: 0.6rem; letter-spacing: 0.18em; }
  .kicker .ornament { width: 20px; }

  .cinema-title .line { font-size: clamp(2.8rem, 14vw, 5rem); }
  .hero-sub { font-size: 0.62rem; letter-spacing: 0.2em; }

  .mega { font-size: clamp(4.5rem, 22vw, 8rem); }
  .big { font-size: clamp(2.6rem, 8vw, 4.5rem); }

  .cinema-sub { font-size: 1rem; }
  .cinema-body { font-size: 0.92rem; }
  .cinema-quote { font-size: 1.1rem; }

  .scene-scroll { bottom: 1.5rem; }
  .scene-scroll .scroll-line { width: 50px; }

  .city-stats {
    gap: 1.5rem;
    padding-top: 2rem;
  }
  .stat strong { font-size: 2.2rem; }
  .stat span { font-size: 0.55rem; }
  .stat-div { height: 36px; }

  .opp-stat {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
  }
  .opp-stat:last-child { border-bottom: none; }

  .srv-row {
    grid-template-columns: 50px 1fr 30px;
    padding: 1.5rem 0;
  }
  .srv-row:hover { padding-left: 0.5rem; }

  .scene-process { height: 420vh; }
  .process-panel { min-height: 55vh; padding: 2rem 1.8rem; }
  .process-intro { min-width: 280px; }
  .panel-num { font-size: 2.6rem; }
  .process-track { padding: 0 5vw; gap: 1.5rem; }
  .process-bar { left: 5vw; right: 5vw; bottom: 2rem; }

  .cinema-final { font-size: clamp(2.8rem, 12vw, 5rem); }
  .btn-face {
    padding: 1.2rem 1.8rem;
    gap: 0.8rem;
  }
  .btn-line-1 { font-size: 0.72rem; }
  .btn-line-2 { font-size: 0.55rem; }

  .final-contact { font-size: 0.65rem; gap: 0.8rem; }
  .final-contact a:nth-of-type(2) { display: none; }
  .final-sep:nth-of-type(2) { display: none; }

  .foot-inner { justify-content: center; text-align: center; }
  .foot-tag { display: none; }

  .wa-float { width: 54px; height: 54px; }
}

@media (max-width: 480px) {
  .scene-marker.tr { display: none; }
  .final-contact { flex-direction: column; gap: 0.6rem; }
  .final-sep { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .scene-process { height: auto; }
  .process-pin { position: static; height: auto; }
  .process-track { flex-wrap: wrap; transform: none !important; }
}

/* ═══════════════════════════════════════════════════
   MOBILE HAMBURGER + OVERLAY MENU
   ═══════════════════════════════════════════════════ */
.bar-menu {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-gold);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: border-color 300ms var(--ease);
  flex-shrink: 0;
}
.bar-menu:hover { border-color: var(--gold); }
.bar-menu span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--gold);
  transition: all 350ms var(--ease);
  transform-origin: center;
}
.bar-menu.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bar-menu.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.bar-menu.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .bar-menu { display: flex; }
}

/* Overlay */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem var(--px) 3rem;
  transform: translateX(100%);
  transition: transform 600ms var(--ease);
  pointer-events: none;
  /* Short-viewport safety: allow vertical scroll inside the menu if links +
     language row + WhatsApp block exceed the screen height (e.g. landscape
     phone or small tablet). Without this, the last items would be clipped. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav.open {
  transform: translateX(0);
  pointer-events: all;
}
/* Noise overlay on menu */
.mobile-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  opacity: 0.04;
  pointer-events: none;
}
/* Gold edge line */
.mobile-nav::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity: 0.5;
}

.mn-close {
  position: absolute;
  top: 2rem;
  right: var(--px);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.2rem;
  border: 1px solid var(--border-gold);
  cursor: pointer;
  transition: all 300ms var(--ease);
}
.mn-close:hover {
  background: var(--gold);
  color: var(--bg);
}

.mn-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  justify-content: center;
}
.mn-link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: var(--fw-display);
  color: var(--text-2);
  letter-spacing: var(--ls-head);
  line-height: 1.1;
  transition: all 400ms var(--ease);
}
.mn-link:hover {
  color: var(--white);
  padding-left: 1rem;
  border-bottom-color: var(--gold);
  font-style: italic;
}
.mn-num {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--gold);
  letter-spacing: var(--ls-kicker);
  font-style: normal;
  font-weight: var(--fw-medium);
}

.mn-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid var(--border-gold);
}
.mn-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: #25D366;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  transition: opacity 300ms var(--ease);
}
.mn-wa:hover { opacity: 0.8; }
.mn-langs {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--gold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════
   TESTIMONIALS (inside company scene)
   ═══════════════════════════════════════════════════ */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 4rem;
  width: 100%;
  max-width: 1100px;
}

.t-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all 500ms var(--ease);
  position: relative;
  overflow: hidden;
  text-align: left;
}
.t-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease);
}
.t-card:hover {
  border-color: var(--border-gold-strong);
  transform: translateY(-3px);
}
.t-card:hover::before { transform: scaleX(1); }

.t-q {
  color: var(--gold);
  opacity: 0.25;
  flex-shrink: 0;
}

.t-card p {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-style: italic;
  font-weight: var(--fw-display);
  color: var(--text);
  line-height: 1.55;
  letter-spacing: var(--ls-head);
  flex: 1;
}

.t-by {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.t-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: var(--fw-display-bold);
  flex-shrink: 0;
}
.t-by span:last-child {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  font-weight: var(--fw-regular);
  line-height: 1.35;
}
.t-by strong {
  display: block;
  color: var(--text);
  font-weight: var(--fw-medium);
  font-size: 0.84rem;
  font-family: var(--font-body);
  letter-spacing: var(--ls-body);
  line-height: 1.3;
}

@media (max-width: 900px) {
  .testimonials { grid-template-columns: 1fr; }
  .t-card:nth-child(3) { display: none; }
}
@media (max-width: 640px) {
  .testimonials { margin-top: 2.5rem; }
  .t-card:nth-child(2) { display: none; }
}

/* ═══════════════════════════════════════════════════
   CONTACT FORM (inside final scene)
   ═══════════════════════════════════════════════════ */
.cform-wrap {
  width: 100%;
  max-width: 560px;
  margin: 1rem 0 2.5rem;
}
.cform-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.cform-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--gold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cform-line {
  flex: 1;
  height: 1px;
  background: var(--border-2);
}

.cform {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border-2);
  background: var(--bg-2);
}
.cform-row {
  border-bottom: 1px solid var(--border);
}
.cform-row:last-of-type {
  border-bottom: none;
}
.cform input,
.cform textarea {
  width: 100%;
  background: transparent;
  border: none;
  padding: 1rem 1.2rem;
  color: var(--text);
  font-size: 0.88rem;
  font-family: var(--font-body);
  font-weight: 300;
  resize: none;
  transition: background 300ms var(--ease);
}
.cform input:focus,
.cform textarea:focus {
  background: rgba(200, 169, 106, 0.04);
  outline: none;
}
.cform input::placeholder,
.cform textarea::placeholder {
  color: var(--text-muted);
}

.cform-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  padding: 1.1rem;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-gold);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 400ms var(--ease);
  position: relative;
  overflow: hidden;
}
.cform-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateY(100%);
  transition: transform 500ms var(--ease);
}
.cform-btn:hover::before { transform: translateY(0); }
.cform-btn:hover { color: var(--bg); }
.cform-btn > * { position: relative; z-index: 1; }
.cform-btn svg { transition: transform 400ms var(--ease); }
.cform-btn:hover svg { transform: translateX(4px); }

/* ═══════════════════════════════════════════════════
   SCENE PHOTOS — shared base
   ═══════════════════════════════════════════════════ */
.scene-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: brightness(0.45) saturate(0.65) contrast(1.05);
  z-index: 0;
  will-change: transform;
}

/* ── Hero: most vivid — the money shot ── */
.scene-hero .scene-photo {
  filter: brightness(0.52) saturate(0.7) contrast(1.08);
  object-position: center 50%;
  animation: ken-burns 22s ease-out forwards;
}
@keyframes ken-burns {
  0%   { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ── City: golden hour, slightly brighter ── */
.scene-photo-city {
  filter: brightness(0.42) saturate(0.7) contrast(1.06);
  object-position: center 55%;
}

/* ── Opportunity bg: very dim, just texture ── */
.scene-photo-opp {
  filter: brightness(0.18) saturate(0.5);
}

/* ── Company: ultra dim, just a whisper ── */
.scene-photo-company {
  filter: brightness(0.15) saturate(0.4) contrast(1.1);
  object-position: center 30%;
}

/* ── Services: dark — rows must stay readable ── */
.scene-photo-services {
  filter: brightness(0.12) saturate(0.3);
}

/* ── Process: dark base ── */
.scene-photo-process {
  filter: brightness(0.15) saturate(0.4);
  object-position: center 40%;
}

/* ── Final: most dramatic night shot ── */
.scene-photo-final {
  filter: brightness(0.38) saturate(0.6) contrast(1.1);
  object-position: center 45%;
}

/* ── Overlay variants ── */
.scene-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(7,7,7,0.55) 0%,
    rgba(7,7,7,0.25) 45%,
    rgba(7,7,7,0.65) 100%
  );
  pointer-events: none;
}
.scene-overlay-city {
  background: linear-gradient(
    180deg,
    rgba(7,7,7,0.45) 0%,
    rgba(7,7,7,0.1) 40%,
    rgba(7,7,7,0.7) 100%
  );
}
.scene-overlay-heavy {
  background: rgba(7,7,7,0.80);
}
.scene-overlay-xheavy {
  background: rgba(7,7,7,0.88);
}
.scene-overlay-final {
  background: linear-gradient(
    180deg,
    rgba(7,7,7,0.6) 0%,
    rgba(7,7,7,0.3) 45%,
    rgba(7,7,7,0.72) 100%
  );
}

/* ── Ensure spotlights float above photo + overlay ── */
.spotlight { z-index: 2; }
.particles { z-index: 3; }

/* ═══════════════════════════════════════════════════
   VISUAL FRAME PHOTO (Opportunity scene)
   ═══════════════════════════════════════════════════ */
.visual-frame { overflow: hidden; }

.frame-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: brightness(0.72) saturate(0.75) contrast(1.05);
  transition: transform 8s ease-out;
  z-index: 0;
}
.visual-frame:hover .frame-photo {
  transform: scale(1.04);
}

.frame-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(7,7,7,0.05) 0%,
    rgba(7,7,7,0.12) 55%,
    rgba(7,7,7,0.72) 100%
  );
  pointer-events: none;
}

/* Growth chart SVG floats above photo */
.frame-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Frame corners and stamp above everything */
.visual-frame .frame-corner { z-index: 4; }
.visual-frame .frame-stamp  { z-index: 4; }

/* ═══════════════════════════════════════════════════
   CINEMATIC PHOTO STRIP DIVIDERS
   ═══════════════════════════════════════════════════ */
.photo-strip {
  position: relative;
  height: clamp(200px, 28vw, 380px);
  overflow: hidden;
  z-index: 2;
  display: block;
}
.photo-strip-tall {
  height: clamp(240px, 34vw, 440px);
}

.photo-strip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  filter: brightness(0.45) saturate(0.65) contrast(1.05);
  transform: scale(1.03);
  transition: transform 12s ease-out;
  will-change: transform;
}
.photo-strip:hover img {
  transform: scale(1.06);
}

.photo-strip-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(7,7,7,0.65) 0%,
    rgba(7,7,7,0.18) 35%,
    rgba(7,7,7,0.18) 65%,
    rgba(7,7,7,0.72) 100%
  );
}
.photo-strip-overlay-deep {
  background: linear-gradient(
    180deg,
    rgba(7,7,7,0.75) 0%,
    rgba(7,7,7,0.3) 35%,
    rgba(7,7,7,0.3) 65%,
    rgba(7,7,7,0.80) 100%
  );
}

.photo-strip-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  font-family: var(--font-mono);
  font-size: clamp(0.58rem, 1vw, 0.72rem);
  color: rgba(200, 169, 106, 0.75);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  pointer-events: none;
}
.ps-line {
  display: block;
  width: clamp(40px, 6vw, 90px);
  height: 1px;
  background: var(--gold);
  opacity: 0.45;
}

@media (max-width: 768px) {
  .photo-strip { height: clamp(160px, 40vw, 260px); }
  .photo-strip-tall { height: clamp(180px, 45vw, 300px); }
  .photo-strip-label { font-size: 0.5rem; letter-spacing: 0.2em; gap: 0.8rem; }
  .ps-line { width: 30px; }
}

/* ═══════════════════════════════════════════════════
   LANGUAGE SWITCHER — bar & mobile overlay
   ═══════════════════════════════════════════════════ */
.bar-langs {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0.4rem;
}
.bar-lang-btn {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  color: rgba(232, 220, 195, 0.4);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-meta);
  padding: 4px 7px;
  cursor: pointer;
  transition: color 250ms var(--ease), border-color 250ms var(--ease);
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}
.bar-lang-btn.active { font-weight: var(--fw-medium); }
.bar-lang-btn:hover {
  color: var(--gold);
}
.bar-lang-btn.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* Hide bar lang switcher on mobile — mobile nav has its own */
@media (max-width: 900px) {
  .bar-langs { display: none; }
}

/* Mobile nav language buttons */
.mn-lang-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mn-lang-btn {
  background: none;
  border: 1px solid var(--border-gold);
  color: rgba(200, 169, 106, 0.5);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-meta);
  padding: 6px 10px;
  cursor: pointer;
  transition: all 250ms var(--ease);
  text-transform: uppercase;
  line-height: 1;
}
.mn-lang-btn.active { font-weight: var(--fw-medium); }
.mn-lang-btn:hover {
  color: var(--gold);
  border-color: var(--gold);
}
.mn-lang-btn.active {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}

/* ═══════════════════════════════════════════════════
   RTL / ARABIC LAYOUT  ([dir="rtl"])
   (font-family overrides live in the PREMIUM FINAL PASS
    section further down — this block handles layout only)
   ═══════════════════════════════════════════════════ */

/* Top bar — do NOT set flex-direction: row-reverse here.
   A flex container already respects `dir="rtl"` on the main axis, so
   applying row-reverse double-flips and pushes the logo back to the
   LEFT in Arabic.  We just need the bar-text column to end-align so
   the "Istanbul · Since 2018" meta reads flush with the logo on the
   right edge in RTL. */
[dir="rtl"] .bar-text {
  align-items: flex-end;
}

/* Flip rail to left side */
[dir="rtl"] .rail {
  right: auto;
  left: 1.8rem;
}
[dir="rtl"] .rail-dot::before {
  right: auto;
  left: 100%;
  transform: translateY(-50%) translateX(8px);
}
[dir="rtl"] .rail-dot:hover::before {
  transform: translateY(-50%) translateX(14px);
}

/* Scene markers */
[dir="rtl"] .scene-marker.tl {
  left: auto;
  right: var(--px);
  align-items: flex-end;
}
[dir="rtl"] .scene-marker.tr {
  right: auto;
  left: var(--px);
  align-items: flex-start;
}

/* Hero */
[dir="rtl"] .hero-content {
  /* Hero is a centered composition in every language — keep it centered
     for Arabic too.  text-align: right would shove the eyebrow, title,
     tagline and CTAs to the right edge and break the designed balance. */
  text-align: center;
  align-items: center;
}
[dir="rtl"] .kicker {
  flex-direction: row-reverse;
}
[dir="rtl"] .scene-scroll {
  left: auto;
  right: 50%;
  transform: translateX(50%);
}

/* City */
[dir="rtl"] .city-content {
  /* City intro is designed centered ("Where continents meet") — match LTR. */
  text-align: center;
  align-items: center;
}

/* Opportunity */
[dir="rtl"] .opp-text {
  text-align: right;
  align-items: flex-end;
}
[dir="rtl"] .opp-stat-lbl {
  flex-direction: row-reverse;
}
[dir="rtl"] .opportunity-content {
  direction: rtl;
}

/* Company */
[dir="rtl"] .company-content {
  /* Keep the centered column layout of the LTR design — the seal, kicker,
     title, quote and signature are all visually centered.  Text inside
     child elements that need right-reading (e.g. the quote) gets its own
     text-align: right via this cascade, without forcing the whole column
     to flex-end (which in RTL column-flex pushes children to the LEFT). */
  text-align: center;
  align-items: center;
}
[dir="rtl"] .sig {
  flex-direction: row-reverse;
}
[dir="rtl"] .t-card {
  text-align: right;
}
[dir="rtl"] .t-by {
  flex-direction: row-reverse;
}
[dir="rtl"] .t-card::before {
  transform-origin: right;
}

/* Services */
[dir="rtl"] .services-content {
  text-align: right;
}
[dir="rtl"] .services-head {
  text-align: right;
}
[dir="rtl"] .srv-row {
  direction: rtl;
}
[dir="rtl"] .srv-row:hover {
  padding-left: 0;
  padding-right: 1.5rem;
}

/* Process */
[dir="rtl"] .process-intro,
[dir="rtl"] .process-panel {
  text-align: right;
  align-items: flex-end;
}
[dir="rtl"] .panel-content {
  text-align: right;
  align-items: flex-end;
}
[dir="rtl"] .process-hint {
  flex-direction: row-reverse;
}
[dir="rtl"] .panel-head {
  flex-direction: row-reverse;
}
[dir="rtl"] .process-end {
  text-align: right;
  align-items: flex-end;
}
[dir="rtl"] .btn-line {
  flex-direction: row-reverse;
}

/* Final scene */
[dir="rtl"] .final-content {
  /* Final CTA is centered in LTR — preserve the monument-style composition. */
  text-align: center;
  align-items: center;
}
[dir="rtl"] .btn-face {
  flex-direction: row-reverse;
}
[dir="rtl"] .btn-arrow {
  transform: scaleX(-1);
}
[dir="rtl"] .btn-text {
  text-align: right;
}
[dir="rtl"] .cform-head {
  flex-direction: row-reverse;
}
[dir="rtl"] .final-contact {
  flex-direction: row-reverse;
}
[dir="rtl"] .final-langs {
  direction: rtl;
}

/* Mobile nav RTL */
[dir="rtl"] .mobile-nav {
  transform: translateX(-100%);
}
[dir="rtl"] .mobile-nav.open {
  transform: translateX(0);
}
[dir="rtl"] .mobile-nav::after {
  left: auto;
  right: 0;
}
[dir="rtl"] .mn-close {
  right: auto;
  left: var(--px);
}
[dir="rtl"] .mn-link {
  flex-direction: row-reverse;
}
[dir="rtl"] .mn-link:hover {
  padding-left: 0;
  padding-right: 1rem;
}
[dir="rtl"] .mn-foot {
  flex-direction: row-reverse;
}
[dir="rtl"] .mn-lang-btns {
  flex-direction: row-reverse;
}

/* Footer */
[dir="rtl"] .foot-inner {
  flex-direction: row-reverse;
}

/* Form placeholder RTL */
[dir="rtl"] .cform input::placeholder,
[dir="rtl"] .cform textarea::placeholder {
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ▓▓▓  PREMIUM FINAL PASS  ▓▓▓
   - Premium lead form (Scene 08)
   - Visit Our Office map (Scene 09)
   - Typography refinements (readability & hierarchy)
   - Responsive polish
   - RTL / Arabic process-section direction fixes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   TYPOGRAPHY REFINEMENTS
   (body rules defined in root — this layer applies
    semantic tokens to sections & components)
   ─────────────────────────────────────────────── */

/* Paragraph defaults — readable measure, editorial rhythm */
p {
  max-width: 62ch;
  line-height: var(--lh-body);
}
.cinema-body {
  max-width: 58ch;
  line-height: var(--lh-relaxed);
}

/* Headings inherit display font unless overridden */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

/* Links inside body copy get a subtle gold treatment */
a.inline-link,
.cinema-body a {
  color: var(--gold);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--ease);
}
a.inline-link:hover,
.cinema-body a:hover {
  border-bottom-color: var(--gold);
}

/* Arabic · Cairo has smaller x-height than Inter at the same em, so we
   lift size + weight slightly to match optical density.  We also switch
   font-family stack to Cairo-first to avoid Inter's poor Arabic fallback. */
[dir="rtl"] body {
  font-family: var(--font-arabic);
  font-size: calc(var(--fs-base) + 1.2px);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: 0;
}
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
  font-family: var(--font-arabic);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  line-height: var(--lh-snug);
}
[dir="rtl"] .cinema-body,
[dir="rtl"] .lead-sub,
[dir="rtl"] .mi-val,
[dir="rtl"] p {
  font-weight: var(--fw-regular);
  letter-spacing: 0;
}
[dir="rtl"] .kicker,
[dir="rtl"] .scene-marker,
[dir="rtl"] .bar-nav a,
[dir="rtl"] .mn-nav a {
  letter-spacing: 0.08em;
  font-weight: var(--fw-medium);
}

/* ── Arabic · display + hero headings ──
   Cormorant italic has no Arabic glyphs — gracefully swap to Cairo.
   Cairo at 600 reads as comparable weight to Cormorant 400 italic. */
[dir="rtl"] .cinema-title,
[dir="rtl"] .mega,
[dir="rtl"] .big,
[dir="rtl"] .cinema-final,
[dir="rtl"] .cinema-sub,
[dir="rtl"] .cinema-quote,
[dir="rtl"] .process-panel h3,
[dir="rtl"] .process-end h3,
[dir="rtl"] .srv-body h3,
[dir="rtl"] .panel-num,
[dir="rtl"] .opp-stat-num strong,
[dir="rtl"] .stat strong,
[dir="rtl"] .lead-head .big,
[dir="rtl"] .map-head .big,
[dir="rtl"] .t-card p {
  font-family: var(--font-arabic);
  font-style: normal;
  letter-spacing: 0;
}

/* Emphasized italic spans (em) get weight-bump instead of italic in Arabic */
[dir="rtl"] .cinema-title .italic em,
[dir="rtl"] .mega em,
[dir="rtl"] .big em,
[dir="rtl"] .cinema-final em,
[dir="rtl"] .process-panel h3 em,
[dir="rtl"] .process-end h3 em,
[dir="rtl"] .lead-head .big em,
[dir="rtl"] .map-head .big em,
[dir="rtl"] .opp-stat-num strong em {
  font-style: normal;
  font-weight: var(--fw-semibold);
}

/* Scale-down for Arabic headings — Cairo is visually bolder per pixel
   than Cormorant, so headings need a ~0.92× size to read balanced. */
[dir="rtl"] .cinema-title .line { font-size: calc(var(--fs-4xl) * 0.92); }
[dir="rtl"] .mega               { font-size: calc(var(--fs-5xl) * 0.92); line-height: 0.95; }
[dir="rtl"] .big                { font-size: calc(var(--fs-3xl) * 0.94); line-height: 1.08; }
[dir="rtl"] .cinema-final       { font-size: clamp(2.6rem, 8vw, 7.5rem); line-height: 1; }
[dir="rtl"] .lead-head .big,
[dir="rtl"] .map-head .big      { font-size: clamp(2.25rem, 4.8vw, 3.9rem); line-height: 1.1; }
[dir="rtl"] .process-panel h3   { font-size: clamp(1.55rem, 2.8vw, 2.35rem); line-height: 1.2; }
[dir="rtl"] .srv-body h3        { font-size: clamp(1.35rem, 2.7vw, 2.3rem); line-height: 1.18; }

/* Arabic body copy — lift line-height a hair; Cairo descenders eat space */
[dir="rtl"] .process-panel p,
[dir="rtl"] .srv-body p,
[dir="rtl"] .cinema-body,
[dir="rtl"] .lead-sub {
  line-height: var(--lh-relaxed);
}

/* Arabic nav / meta chips — lift tracking slightly (Cairo needs air) */
[dir="rtl"] .bar-meta,
[dir="rtl"] .scene-marker,
[dir="rtl"] .stat span,
[dir="rtl"] .opp-stat-lbl,
[dir="rtl"] .final-contact,
[dir="rtl"] .final-langs,
[dir="rtl"] .foot-inner,
[dir="rtl"] .lf-label,
[dir="rtl"] .mi-lbl,
[dir="rtl"] .mi-btn,
[dir="rtl"] .btn-line,
[dir="rtl"] .process-hint,
[dir="rtl"] .map-frame-stamp,
[dir="rtl"] .hero-sub,
[dir="rtl"] .scene-scroll {
  letter-spacing: 0.05em;
  font-weight: var(--fw-medium);
}

/* Arabic form inputs — match body typography */
[dir="rtl"] .lf-input,
[dir="rtl"] .lf-select,
[dir="rtl"] .lf-textarea {
  font-family: var(--font-arabic);
  font-weight: var(--fw-regular);
  font-size: 1rem;
  letter-spacing: 0;
  text-align: right;
}
[dir="rtl"] .lf-input::placeholder,
[dir="rtl"] .lf-textarea::placeholder {
  font-weight: var(--fw-regular);
  letter-spacing: 0;
}

/* ───────────────────────────────────────────────
   SCENE 08 · PREMIUM LEAD FORM
   ─────────────────────────────────────────────── */

.scene-lead {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) var(--px) clamp(4rem, 7vw, 6.5rem);
  background: linear-gradient(180deg,
    #060606 0%,
    #0a0a0a 50%,
    #070707 100%);
  border-top: 1px solid var(--border);
  overflow: hidden;
}
.scene-lead::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60rem 40rem at 20% 0%, rgba(200,169,106,0.06), transparent 70%),
    radial-gradient(45rem 30rem at 80% 100%, rgba(200,169,106,0.04), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.lead-ambient {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(200,169,106,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,169,106,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

.lead-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
}

.lead-head {
  text-align: center;
  margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lead-head .kicker {
  justify-content: center;
}
.lead-head .big {
  margin-top: 0.8rem;
  font-size: clamp(2.55rem, 5.2vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
}
.lead-head .big em {
  color: var(--gold);
  font-style: italic;
  font-weight: var(--fw-display-bold);
}
.lead-sub {
  margin-top: 1.2rem;
  color: var(--text-2);
  font-size: clamp(0.985rem, 1.15vw, 1.085rem);
  line-height: var(--lh-body);
  max-width: 54ch;
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-body);
}

/* Form container */
.lead-form {
  position: relative;
  background:
    linear-gradient(180deg, rgba(15,15,15,0.95), rgba(10,10,10,0.95));
  border: 1px solid var(--border-gold);
  padding: clamp(1.8rem, 3.5vw, 3rem);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lead-form::before,
.lead-form::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--gold);
  opacity: 0.55;
  pointer-events: none;
}
.lead-form::before {
  top: -1px; left: -1px;
  border-top: 1px solid;
  border-left: 1px solid;
}
.lead-form::after {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid;
  border-right: 1px solid;
}

.lf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1.6rem;
}
.lf-field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  position: relative;
}
.lf-field-full {
  grid-column: 1 / -1;
}

.lf-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--gold);
  font-weight: var(--fw-medium);
}

.lf-input,
.lf-select,
.lf-textarea {
  width: 100%;
  padding: 0.95rem 1.05rem;
  background: rgba(7,7,7,0.6);
  border: 1px solid var(--border-2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
  transition: border-color 300ms var(--ease),
              background 300ms var(--ease),
              box-shadow 300ms var(--ease);
}
.lf-input::placeholder,
.lf-textarea::placeholder {
  color: var(--text-muted);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-body);
}
.lf-input:hover,
.lf-select:hover,
.lf-textarea:hover {
  border-color: var(--border-gold);
}
.lf-input:focus,
.lf-select:focus,
.lf-textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(200,169,106,0.04);
  box-shadow: 0 0 0 1px rgba(200,169,106,0.25);
}
.lf-textarea {
  resize: vertical;
  min-height: 120px;
  max-height: 320px;
  line-height: 1.65;
}

/* Invalid state */
.lf-input.lf-invalid,
.lf-select.lf-invalid,
.lf-textarea.lf-invalid {
  border-color: rgba(220, 80, 80, 0.55);
  box-shadow: 0 0 0 1px rgba(220, 80, 80, 0.2);
}

/* Custom select */
.lf-select-wrap {
  position: relative;
}
.lf-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
  color: var(--text);
}
.lf-select option {
  background: #0a0a0a;
  color: var(--text);
}
.lf-select option[disabled] {
  color: var(--text-muted);
}
.lf-select:invalid,
.lf-select option[value=""]:checked ~ * {
  color: var(--text-muted);
}
.lf-select-arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  pointer-events: none;
  transition: transform 300ms var(--ease);
}
.lf-select-wrap:focus-within .lf-select-arrow {
  transform: translateY(-50%) rotate(180deg);
}

/* Actions */
.lf-actions {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.lf-btn {
  position: relative;
  display: inline-flex;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  --btn-pad-x: 2.4rem;
  --btn-pad-y: 1rem;
}
.lf-btn-face {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  background: var(--gold);
  color: #060606;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  transition: background 350ms var(--ease),
              color 350ms var(--ease),
              transform 350ms var(--ease),
              box-shadow 350ms var(--ease);
  box-shadow: 0 6px 30px -10px rgba(200,169,106,0.45);
}
.lf-btn:hover .lf-btn-face {
  background: var(--gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 10px 40px -10px rgba(200,169,106,0.6);
}
.lf-btn:active .lf-btn-face {
  transform: translateY(0);
}
.lf-btn-arrow {
  transition: transform 350ms var(--ease);
}
.lf-btn:hover .lf-btn-arrow {
  transform: translateX(4px);
}
.lf-note {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  max-width: 38ch;
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
}

/* ───────────────────────────────────────────────
   SCENE 09 · VISIT OUR OFFICE · MAP
   ─────────────────────────────────────────────── */

.scene-map {
  position: relative;
  padding: clamp(4.5rem, 9vw, 7.5rem) var(--px) clamp(4.5rem, 8vw, 7rem);
  background: #060606;
  border-top: 1px solid var(--border);
  overflow: hidden;
}
.scene-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50rem 40rem at 80% 20%, rgba(200,169,106,0.05), transparent 70%),
    radial-gradient(40rem 30rem at 20% 90%, rgba(200,169,106,0.03), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.map-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}
.map-head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.map-head .kicker {
  justify-content: center;
}
.map-head .big {
  margin-top: 0.8rem;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
}
.map-head .big em {
  color: var(--gold);
  font-style: italic;
  font-weight: var(--fw-display-bold);
}

.map-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  align-items: stretch;
}

/* Map frame */
.map-frame {
  position: relative;
  aspect-ratio: 16 / 11;
  background: #0a0a0a;
  border: 1px solid var(--border-gold);
  overflow: hidden;
}
.map-frame-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--gold);
  z-index: 2;
  pointer-events: none;
}
.map-frame-corner.tl { top: 8px;    left: 8px;    border-top: 1px solid;    border-left: 1px solid; }
.map-frame-corner.tr { top: 8px;    right: 8px;   border-top: 1px solid;    border-right: 1px solid; }
.map-frame-corner.bl { bottom: 8px; left: 8px;    border-bottom: 1px solid; border-left: 1px solid; }
.map-frame-corner.br { bottom: 8px; right: 8px;   border-bottom: 1px solid; border-right: 1px solid; }

.map-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(40%) contrast(105%) brightness(0.85);
  transition: filter 500ms var(--ease);
}
.map-frame:hover .map-iframe {
  filter: grayscale(10%) contrast(108%) brightness(0.95);
}
.map-frame-stamp {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.8rem;
  background: rgba(7,7,7,0.82);
  border: 1px solid var(--border-gold);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold);
  font-weight: var(--fw-medium);
  pointer-events: none;
}
.mfs-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,169,106,0.25);
  animation: mfs-pulse 2s ease-in-out infinite;
}
@keyframes mfs-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(200,169,106,0.25); }
  50%      { box-shadow: 0 0 0 6px rgba(200,169,106,0.0); }
}

/* Office info panel */
.map-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: linear-gradient(180deg, rgba(15,15,15,0.95), rgba(10,10,10,0.95));
  border: 1px solid var(--border-gold);
  gap: 1.5rem;
}
.mi-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
}
.mi-row:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
.mi-lbl {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--gold);
  font-weight: var(--fw-medium);
}
.mi-val {
  font-size: 1.015rem;
  color: var(--text);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
}
.mi-actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.5rem;
}
.mi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.95rem 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  border: 1px solid;
  transition: all 350ms var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.mi-btn-primary {
  background: var(--gold);
  color: #060606;
  border-color: var(--gold);
}
.mi-btn-primary:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px -10px rgba(200,169,106,0.5);
}
.mi-btn-wa {
  background: transparent;
  color: var(--gold);
  border-color: var(--border-gold-strong);
}
.mi-btn-wa:hover {
  background: rgba(200,169,106,0.08);
  border-color: var(--gold);
  transform: translateY(-2px);
}

/* ───────────────────────────────────────────────
   RESPONSIVE · form & map
   ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  .map-grid {
    grid-template-columns: 1fr;
  }
  .map-frame {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 768px) {
  .lead-form {
    padding: 1.5rem 1.25rem;
  }
  .lf-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .lf-field-full {
    grid-column: 1;
  }
  .lf-input,
  .lf-select,
  .lf-textarea {
    font-size: 16px; /* prevents iOS zoom */
    padding: 0.85rem 0.95rem;
  }
  .lf-label { font-size: 0.62rem; }

  .lf-btn-face {
    --btn-pad-x: 1.8rem;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
  }
  .lf-note { font-size: 0.56rem; }

  .lead-head .big,
  .map-head .big {
    font-size: clamp(2.2rem, 8vw, 3rem);
  }
  .lead-sub { font-size: 0.95rem; }

  .mi-actions {
    flex-direction: column;
  }
  .mi-btn {
    width: 100%;
  }
  .map-frame {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 480px) {
  .scene-lead,
  .scene-map {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
  .map-frame-corner {
    width: 14px;
    height: 14px;
  }
  .map-frame-stamp {
    font-size: 0.52rem;
    padding: 0.35rem 0.6rem;
  }
}

/* ───────────────────────────────────────────────
   RTL · form, map, process section
   ─────────────────────────────────────────────── */

/* Form labels and inputs align right */
[dir="rtl"] .lf-label,
[dir="rtl"] .mi-lbl {
  text-align: right;
}
[dir="rtl"] .lf-input,
[dir="rtl"] .lf-select,
[dir="rtl"] .lf-textarea {
  text-align: right;
  font-family: 'Cairo', -apple-system, sans-serif;
}
[dir="rtl"] .lf-input::placeholder,
[dir="rtl"] .lf-textarea::placeholder {
  text-align: right;
}
[dir="rtl"] .lf-select {
  padding-right: 1.05rem;
  padding-left: 2.5rem;
  background-position: left 1rem center;
}
[dir="rtl"] .lf-select-arrow {
  right: auto;
  left: 1rem;
}
[dir="rtl"] .lf-btn-face {
  flex-direction: row-reverse;
}
[dir="rtl"] .lf-btn-arrow {
  transform: scaleX(-1);
}
[dir="rtl"] .lf-btn:hover .lf-btn-arrow {
  transform: scaleX(-1) translateX(4px);
}
[dir="rtl"] .lead-head,
[dir="rtl"] .map-head {
  align-items: center;
  text-align: center;
}
[dir="rtl"] .mi-row {
  text-align: right;
}
[dir="rtl"] .mi-val {
  font-family: 'Cairo', -apple-system, sans-serif;
}
[dir="rtl"] .map-frame-stamp {
  left: auto;
  right: 16px;
  flex-direction: row-reverse;
}
[dir="rtl"] .mi-btn {
  flex-direction: row-reverse;
}

/* RTL · process section · CRITICAL FIX (v4 — track uses LTR coordinates)
   ────────────────────────────────────────────────────────────────────────
   HISTORY / ROOT CAUSE (two distinct bugs found via live browser tests):

   BUG #1 — `flex-direction: row-reverse`:
     Produced left-overflow into negative x, and `Element.scrollWidth` does
     NOT measure left overflow on row-reverse flex containers.  So in
     Arabic mode `scrollWidth == clientWidth` (= 521), maxTranslate = 0,
     and the track never translated.

   BUG #2 — `direction: rtl` inherited onto the flex track:
     Even with `flex-direction: row` (no reverse), RTL inline direction
     flips flex-item layout order: first DOM child (intro) lands at the
     RIGHT edge of the track, and subsequent items stack LEFTWARD into
     negative x.  scrollWidth measures correctly (unlike with row-reverse)
     BUT translating leftward pushes intro off-screen and reveals only
     empty space.

   FIX STRATEGY:
   1. Force `direction: ltr` on the 4 scroll-critical structural containers
      so flex layout uses a stable LTR coordinate system in both languages:
      items lay out x: 0 → trackWidth, intro at left edge, end at right.
   2. Do NOT apply `flex-direction: row-reverse` (that caused Bug #1).
   3. Inside text-bearing descendants (.process-intro, .process-panel,
      .process-end, .panel-content), restore `direction: rtl` so Arabic
      copy reads right-to-left within each panel.
   4. The JS translateX formula is now identical for both languages:
        tx = −progress · maxTranslate
   5. The scroll-hint arrow (→ / ←) is swapped in JS as a reading-direction
      cue; this is cosmetic only and does not affect track geometry.   */

.scene-process,
.process-pin,
.process-viewport,
.process-track {
  direction: ltr;
}

[dir="rtl"] .process-intro,
[dir="rtl"] .process-panel,
[dir="rtl"] .process-end {
  direction: rtl;
  text-align: right;
  align-items: flex-end;
}
[dir="rtl"] .panel-content,
[dir="rtl"] .process-intro-content {
  direction: rtl;
  text-align: right;
}

/* Panel head number + dot flow right-to-left */
[dir="rtl"] .panel-num {
  text-align: right;
}

/* Flip the gold top-line accent origin so hover animation sweeps right→left */
[dir="rtl"] .process-panel::before {
  transform-origin: right;
  background: linear-gradient(270deg, var(--gold), transparent);
}

/* Progress bar fill grows left → right in both languages, mirroring the
   physical scroll motion (track slides leftward as progress → 1).      */

/* Process CTA button line arrow flip (already handled by existing .btn-line
   rule, but we make sure the inline SVG arrow mirrors). */
[dir="rtl"] .btn-line svg {
  transform: scaleX(-1);
}

/* Scene-lead kicker ornament alignment */
[dir="rtl"] .lead-head .kicker,
[dir="rtl"] .map-head .kicker {
  flex-direction: row-reverse;
}

/* ───────────────────────────────────────────────
   RESPONSIVE POLISH · general sweep
   ─────────────────────────────────────────────── */

/* Ensure minimum 14px body on the tiniest screens */
@media (max-width: 380px) {
  body { font-size: 14.5px; }
  .bar { padding: 1rem var(--px); }
  .bar-lang-btn { font-size: 0.6rem; padding: 0.3rem 0.5rem; }
}

/* Laptop sweet spot: slight size reduction for the huge .mega headline so
   it doesn't overwhelm 13" screens */
@media (min-width: 900px) and (max-width: 1280px) {
  .mega { font-size: clamp(4.5rem, 15vw, 13rem); }
  .big { font-size: clamp(2.8rem, 6vw, 5.5rem); }
}

/* Prevent overflow on the new sections at narrow widths */
.scene-lead,
.scene-map {
  max-width: 100vw;
  overflow-x: clip;
}

/* Smooth the process section for reduced-motion: render the new sections
   without transforms. */
@media (prefers-reduced-motion: reduce) {
  .lead-ambient { display: none; }
  .mfs-dot { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ▓▓▓  HERO · CINEMATIC V2  ▓▓▓
   ─────────────────────────────────────────────────────────────────────────
   A premium, modern entrance for the ELIF YAPI GAYRİMENKUL brand.
   Features:
     · Istanbul skyline video background (with photo fallback)
     · Black + gold cinematic grading and vignette
     · Staggered fade-in entrance on page load:
         Background → Kicker → Title → Rule → Subtitle → Tagline → Buttons → Scroll
     · Premium CTA buttons with soft gold hover glow
     · Subtle scroll-driven parallax on the hero content
   Compatible with RTL (Arabic reverses button row + content alignment)
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Background video ─────────────────────────────────────────────── */
.scene-hero.hero-v2 {
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Deep Istanbul-night gradient — looks intentional even if video/photo fails to load.
     Dark midnight blue → charcoal with a faint warm gold horizon glow. */
  background:
    radial-gradient(ellipse 80% 50% at 50% 75%, rgba(200, 169, 106, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 120% 70% at 50% 100%, rgba(130, 92, 40, 0.18) 0%, transparent 55%),
    linear-gradient(180deg,
      #050812 0%,
      #0a1020 28%,
      #111622 62%,
      #1a1410 92%,
      #0a0806 100%);
  background-color: #070b14;
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%) scale(1.04);
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  filter:
    brightness(0.42)
    contrast(1.08)
    saturate(0.85)
    sepia(0.08);
  transition: opacity 2200ms var(--ease);
  will-change: opacity, transform;
  /* Slow ken-burns style drift for cinematic feel */
  animation: hero-bg-drift 42s ease-in-out infinite alternate;
}
.hero-v2 .hero-video[data-ready="1"] {
  opacity: 1;
}

/* Photo fallback — visible immediately on load, dimmed beneath the video */
.hero-v2 .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter:
    brightness(0.5)
    contrast(1.08)
    saturate(0.85)
    sepia(0.08);
  transform: scale(1.04);
  animation: hero-bg-drift 42s ease-in-out infinite alternate;
}

@keyframes hero-bg-drift {
  0%   { transform: translate(-50%, -50%) scale(1.04); }
  100% { transform: translate(-50%, -50%) scale(1.12) translateY(-1.2%); }
}

/* Photo fallback uses a simpler drift since it isn't centered-absolute */
.hero-v2 .hero-photo {
  animation: hero-photo-drift 42s ease-in-out infinite alternate;
  transform-origin: center 55%;
}
@keyframes hero-photo-drift {
  0%   { transform: scale(1.04) translateY(0); }
  100% { transform: scale(1.10) translateY(-1.2%); }
}

/* ── Cinematic grading (gold wash + vignette) ────────────────────── */
.hero-grade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(200, 169, 106, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(100, 80, 50, 0.18) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(7, 7, 7, 0.35) 0%,
      rgba(7, 7, 7, 0.18) 35%,
      rgba(7, 7, 7, 0.55) 78%,
      rgba(7, 7, 7, 0.92) 100%);
  mix-blend-mode: normal;
  opacity: 0;
  animation: hero-grade-in 2400ms var(--ease) 100ms forwards;
}

.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center,
      transparent 40%,
      rgba(0, 0, 0, 0.35) 72%,
      rgba(0, 0, 0, 0.75) 100%);
  opacity: 0;
  animation: hero-grade-in 2600ms var(--ease) 200ms forwards;
}

@keyframes hero-grade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Lift the scene-overlay above the grading so other filters still compose */
.hero-v2 .scene-overlay {
  z-index: 4;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(7, 7, 7, 0.15) 60%,
    rgba(7, 7, 7, 0.6) 100%);
}

/* Spotlights / particles already exist — nudge layering */
.hero-v2 .spotlight { z-index: 5; opacity: 0; animation: hero-grade-in 3000ms var(--ease) 600ms forwards; }
.hero-v2 .particles { z-index: 6; opacity: 0; animation: hero-grade-in 3500ms var(--ease) 1400ms forwards; }

/* ── Staggered entrance fade-in for hero content ─────────────────── */
.hero-fade {
  opacity: 0;
  transform: translateY(28px);
  animation: hero-fade-in 1600ms var(--ease) var(--hero-delay, 0ms) forwards;
  will-change: opacity, transform;
}

@keyframes hero-fade-in {
  0%   { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  60%  { opacity: 0.85; filter: blur(0.5px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ── Hero content wrapper ────────────────────────────────────────── */
.hero-v2 .hero-content {
  position: relative;
  z-index: 7;
  max-width: 1180px;
  padding: 0 var(--px);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  will-change: transform;
}

/* ── Kicker (Welcome) ────────────────────────────────────────────── */
.hero-v2 .hero-kicker {
  margin: 0 0 1.6rem;
  color: var(--gold);
  opacity: 0.92;
}

/* ── Main title · value-proposition headline ────────────────────── */
.hero-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(2.2rem, 5.6vw, 5.4rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--white);
  margin: 0;
  max-width: 22ch;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.55);
  background: linear-gradient(180deg,
    #ffffff 0%,
    #f5ecd5 45%,
    #e4c98c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Keep a safe solid-color fallback for browsers that ignore bg-clip:text */
  color: transparent;
}
.hero-title em {
  font-style: italic;
  font-weight: var(--fw-display-bold);
}
.hero-title::after {
  /* Invisible aria-safe fallback — if bg-clip unsupported, show white title */
  content: none;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-title {
    -webkit-text-fill-color: initial;
    color: #f5ecd5;
    background: none;
  }
}

/* ── Divider rule · thin line + diamond ─────────────────────────── */
.hero-rule {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.6rem 0 1.3rem;
  opacity: 0.9;
}
.hero-rule-line {
  display: block;
  width: clamp(42px, 6vw, 90px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hero-rule-diamond {
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(200, 169, 106, 0.55);
}

/* ── Subtitle · Premium Real Estate Investment ... ──────────────── */
.hero-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-display);
  font-size: clamp(1.15rem, 1.9vw, 1.75rem);
  line-height: 1.35;
  color: var(--text);
  letter-spacing: var(--ls-head);
  max-width: 32ch;
  margin: 0 0 1.4rem;
}
.hero-subtitle em {
  font-style: italic;
  color: var(--gold);
  font-weight: var(--fw-display-bold);
}

/* ── Tagline · one-line description ─────────────────────────────── */
.hero-tagline {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: clamp(0.95rem, 1.05vw, 1.08rem);
  line-height: 1.55;
  color: var(--text-2);
  letter-spacing: var(--ls-body);
  max-width: 46ch;
  margin: 0 0 2.4rem;
  opacity: 0.95;
}

/* ── CTA button row ─────────────────────────────────────────────── */
.hero-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin-top: 0.6rem;
}

.hero-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1rem 1.9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  transition:
    color      500ms var(--ease),
    background 500ms var(--ease),
    border     500ms var(--ease),
    transform  500ms var(--ease),
    box-shadow 600ms var(--ease);
  isolation: isolate;
  white-space: nowrap;
}

.hero-btn-text {
  position: relative;
  z-index: 2;
}
.hero-btn-icon,
.hero-btn-arrow {
  width: 18px;
  height: 18px;
  position: relative;
  z-index: 2;
  transition: transform 500ms var(--ease);
}

/* Soft gold glow — sits behind the button, grows on hover */
.hero-btn-glow {
  position: absolute;
  inset: -40%;
  z-index: 0;
  background: radial-gradient(circle at center,
    rgba(200, 169, 106, 0.5) 0%,
    rgba(200, 169, 106, 0.2) 30%,
    transparent 70%);
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 700ms var(--ease),
    transform 900ms var(--ease);
  pointer-events: none;
  filter: blur(14px);
}
.hero-btn:hover .hero-btn-glow {
  opacity: 1;
  transform: scale(1);
}

/* Primary — WhatsApp (filled gold) */
.hero-btn-primary {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  color: #0a0a0a;
  border: 1px solid var(--gold);
  box-shadow:
    0 0 0 0   rgba(200, 169, 106, 0.0),
    0 12px 30px -10px rgba(200, 169, 106, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.hero-btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%);
  transform: skewX(-18deg);
  z-index: 1;
  transition: left 900ms var(--ease);
  pointer-events: none;
}
.hero-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 30px 2px rgba(200, 169, 106, 0.45),
    0 18px 45px -10px rgba(200, 169, 106, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.hero-btn-primary:hover::before { left: 130%; }
.hero-btn-primary:active {
  transform: translateY(0);
}

/* Secondary — outlined */
.hero-btn-secondary {
  background: rgba(7, 7, 7, 0.28);
  color: var(--text);
  border: 1px solid var(--border-gold-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-btn-secondary:hover {
  color: var(--gold-bright);
  border-color: var(--gold);
  background: rgba(200, 169, 106, 0.06);
  transform: translateY(-2px);
  box-shadow:
    0 10px 32px -12px rgba(200, 169, 106, 0.45),
    inset 0 0 0 1px rgba(200, 169, 106, 0.15);
}
.hero-btn-secondary:hover .hero-btn-arrow {
  transform: translateX(4px);
}

/* ── Scroll indicator at the bottom ─────────────────────────────── */
.hero-v2 .scene-scroll {
  z-index: 7;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-title {
    font-size: clamp(1.9rem, 6.6vw, 3rem);
    letter-spacing: -0.005em;
    max-width: 22ch;
    line-height: 1.12;
  }
  .hero-tagline {
    font-size: 0.95rem;
    max-width: 38ch;
  }
  .hero-actions {
    flex-direction: column;
    width: 100%;
    max-width: 360px;
    gap: 0.8rem;
  }
  .hero-btn {
    width: 100%;
    padding: 1rem 1.4rem;
    font-size: 0.72rem;
  }
  .hero-rule { margin: 1.2rem 0 1rem; }
  .hero-rule-line { width: 40px; }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(1.7rem, 7.4vw, 2.3rem);
    line-height: 1.14;
    letter-spacing: -0.005em;
    max-width: 20ch;
  }
  .hero-tagline  { font-size: 0.9rem; }
}

/* ── RTL mirror ────────────────────────────────────────────────── */
[dir="rtl"] .hero-actions {
  flex-direction: row-reverse;
}
@media (max-width: 900px) {
  [dir="rtl"] .hero-actions { flex-direction: column; }
}
[dir="rtl"] .hero-btn-primary,
[dir="rtl"] .hero-btn-secondary {
  flex-direction: row-reverse;
}
[dir="rtl"] .hero-btn-arrow { transform: scaleX(-1); }
[dir="rtl"] .hero-btn-secondary:hover .hero-btn-arrow {
  transform: scaleX(-1) translateX(4px);
}
[dir="rtl"] .hero-title {
  letter-spacing: 0;
  font-family: var(--font-arabic);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
}
[dir="rtl"] .hero-title em {
  font-style: normal;
  font-weight: var(--fw-semibold);
}
[dir="rtl"] .hero-tagline {
  font-family: var(--font-arabic);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
}
[dir="rtl"] .hero-btn { letter-spacing: 0.06em; font-family: var(--font-arabic); }

/* ── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-video,
  .hero-v2 .hero-photo {
    animation: none;
    transform: translate(-50%, -50%) scale(1.04);
  }
  .hero-v2 .hero-photo {
    transform: scale(1.02);
  }
  .hero-fade {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .hero-grade,
  .hero-vignette,
  .hero-v2 .spotlight,
  .hero-v2 .particles {
    opacity: 1;
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════
   HERO BRAND LINE  (secondary branding above H1)
   Small letter-spaced mark that sits between the
   "Welcome" kicker and the value-prop headline.
   ═══════════════════════════════════════════════════ */
.hero-v2 .hero-brand {
  margin: 0 0 1.1rem;
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 1vw, 0.86rem);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  opacity: 0.82;
  padding-left: 0.42em; /* visually re-center due to trailing letter-spacing */
}
[dir="rtl"] .hero-v2 .hero-brand {
  /* Brand wordmark stays Latin in every language for identity
     consistency.  Render it in Inter so Turkish diacritics
     (İ, ğ) hold crisply at this small size. */
  font-family: 'Inter', -apple-system, sans-serif;
  letter-spacing: 0.42em;
  padding-left: 0.42em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .hero-v2 .hero-brand {
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    margin-bottom: 0.85rem;
  }
}

/* ═══════════════════════════════════════════════════
   TRUST STRIP  (credibility signals after hero)
   5 stats / trust items in a quiet row between the
   hero and Scene 02.  Uses thin gold hairlines, mono
   labels, and display-serif values — matching the
   existing stat treatment so it reads as part of the
   same design language.
   ═══════════════════════════════════════════════════ */
.trust-strip {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) var(--px);
  background: linear-gradient(180deg,
    rgba(10, 10, 10, 0.98) 0%,
    rgba(7, 7, 7, 1) 100%);
  border-top: 1px solid var(--border-gold);
  border-bottom: 1px solid var(--border-gold);
  overflow: hidden;
}

.trust-strip::before {
  /* Soft center glow — restrained, not dominating */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(200, 169, 106, 0.045) 0%,
    transparent 60%);
  pointer-events: none;
}

.trust-inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.trust-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--gold-text);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin: 0 0 clamp(1.8rem, 3vw, 2.6rem);
}
.trust-kicker-line {
  display: inline-block;
  width: clamp(24px, 3vw, 44px);
  height: 1px;
  background: var(--border-gold-strong);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1.5rem, 2.4vw, 2.8rem);
  align-items: stretch;
  justify-items: center;
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.4rem;
  position: relative;
  text-align: center;
  min-width: 0;
  width: 100%;
}

/* Subtle divider between items — only between (not trailing) */
.trust-item + .trust-item::before {
  content: '';
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: calc(-0.5 * clamp(1.5rem, 2.4vw, 2.8rem));
  width: 1px;
  background: linear-gradient(180deg,
    transparent,
    var(--border-gold) 30%,
    var(--border-gold) 70%,
    transparent);
}

.trust-value {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  line-height: 1.08;
  color: var(--text);
  letter-spacing: -0.005em;
}
/* The AR·TR·EN·RU row uses mono for a crisp chip-style read */
.trust-value-mono {
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 1.1vw, 0.98rem);
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  color: var(--gold-text);
  padding: 0.42rem 0.62rem;
  border: 1px solid var(--border-gold);
  border-radius: 2px;
  white-space: nowrap;
}

.trust-label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  color: var(--text-dim);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.3;
  max-width: 18ch;
}

/* RTL font family swap for trust block */
[dir="rtl"] .trust-kicker,
[dir="rtl"] .trust-label,
[dir="rtl"] .trust-value-mono {
  font-family: var(--font-arabic);
  letter-spacing: 0;
}
[dir="rtl"] .trust-value {
  font-family: var(--font-arabic);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
}
[dir="rtl"] .trust-item + .trust-item::before {
  left: auto;
  right: calc(-0.5 * clamp(1.5rem, 2.4vw, 2.8rem));
}

/* Tablet: 3 + 2 grid, divider logic resets */
@media (max-width: 1040px) {
  .trust-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1.5rem;
  }
  .trust-item + .trust-item::before { display: none; }
  .trust-value-mono { font-size: 0.82rem; }
}

/* Mobile: stacked 2-col (fits 5 items in 3 rows) */
@media (max-width: 640px) {
  .trust-strip {
    padding: 2.4rem var(--px);
  }
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem 1.2rem;
  }
  .trust-item:last-child {
    grid-column: 1 / -1;
  }
  .trust-value { font-size: 1.25rem; }
  .trust-value-mono { font-size: 0.72rem; padding: 0.35rem 0.55rem; }
  .trust-label { font-size: 9.5px; letter-spacing: 0.22em; }
  .trust-kicker { font-size: 9.5px; letter-spacing: 0.32em; }
}

/* ═══════════════════════════════════════════════════
   GOLD PALETTE REBALANCE  (soften secondary gold uses)
   Small, targeted reductions — not a redesign. Primary
   gold (hero H1 gradient, stat numbers, CTA glow) is
   preserved; body-level gold is toned down ~18%.
   ═══════════════════════════════════════════════════ */

/* Chapter kickers already use var(--gold-text) via .kicker;
   also relax the hero kicker opacity so "Welcome" reads quietly. */
.hero-v2 .hero-kicker { opacity: 0.78; }

/* Subtle divider gradients: trim peak gold alpha so hairlines
   sit behind the content instead of competing with it. */
.hero-rule-line {
  background: linear-gradient(90deg,
    transparent,
    rgba(200, 169, 106, 0.6),
    transparent);
}

/* Stat numbers — keep the gold identity but move down to the
   brighter/warmer tone so they read as highlight, not glare. */
.opp-stat-num strong { color: var(--gold-bright); }

/* Testimonial/quote framing gold — softer border accents */
/* (uses --border-gold which is already reduced at :root) */

/* ═══════════════════════════════════════════════════
   ARABIC PARITY PASS  ·  typography + optical polish
   Cairo renders ~6% denser than Cormorant/Inter at
   matched em sizes, and its descenders eat more
   vertical room.  This block tunes line-heights,
   letter-spacing and weights so Arabic feels
   designed — not merely flipped.
   ═══════════════════════════════════════════════════ */

/* 1 — Display headings · relax line-height so Cairo descenders
       don't kiss the next line; ascent/descent on Arabic is deeper. */
[dir="rtl"] .cinema-final { line-height: 1.08; letter-spacing: 0; }
[dir="rtl"] .mega         { line-height: 1.06; letter-spacing: 0; }
[dir="rtl"] .big          { line-height: 1.12; letter-spacing: 0; }
[dir="rtl"] .hero-title   { line-height: 1.3;  letter-spacing: 0; }

/* 2 — Body / quote copy · Cairo needs a hair more leading for
       comfortable reading at display sizes. */
[dir="rtl"] .cinema-quote       { line-height: 1.65; font-weight: var(--fw-regular); }
[dir="rtl"] .cinema-body        { line-height: 1.7; }
[dir="rtl"] .lead-sub           { line-height: 1.7; }
[dir="rtl"] .hero-tagline       { line-height: 1.7; }
[dir="rtl"] .t-card p           { line-height: 1.7; font-weight: var(--fw-regular); }
[dir="rtl"] .srv-body p         { line-height: 1.7; }
[dir="rtl"] .process-panel p    { line-height: 1.7; }

/* 3 — Eyebrows / mono tracking · Cairo has no italic + no true
       small-caps; replace wide tracking with measured gaps and
       ditch uppercase (Cairo has no letter-case distinction). */
[dir="rtl"] .kicker,
[dir="rtl"] .bar-meta,
[dir="rtl"] .scene-marker,
[dir="rtl"] .scene-scroll,
[dir="rtl"] .bar-nav a,
[dir="rtl"] .mn-nav a,
[dir="rtl"] .hero-sub,
[dir="rtl"] .trust-kicker,
[dir="rtl"] .process-hint {
  text-transform: none;
  letter-spacing: 0.06em;
}

/* 4 — Trust strip values · monospaced run-in "AR · TR · EN · RU"
       stays Latin; numbers (2018, 30–50) render cleanly in Cairo. */
[dir="rtl"] .trust-value { letter-spacing: 0; }
[dir="rtl"] .trust-label { text-transform: none; letter-spacing: 0.08em; }

/* 5 — Panel numerals & stat numbers · keep these LTR so "+12.4%",
       "1.8B", "2027", "01"/"02" render with the + sign / decimal /
       year digits in correct visual order. */
[dir="rtl"] .opp-stat-num,
[dir="rtl"] .opp-stat-num strong,
[dir="rtl"] .panel-num,
[dir="rtl"] .stat strong,
[dir="rtl"] .trust-value-mono {
  direction: ltr;
  unicode-bidi: isolate;
}

/* 6 — Hero brand eyebrow · "ELIF YAPI GAYRİMENKUL" is a Latin
       proper noun; render it in Inter so the Turkish diacritics
       (İ, ğ, ç) read correctly and don't fall back to Cairo's
       Latin substitution which is weaker at tiny sizes. */
[dir="rtl"] .hero-brand {
  font-family: 'Inter', -apple-system, sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding-left: 0.28em;
  padding-right: 0;
}

/* 7 — Buttons · Arabic text + Latin glyphs (arrows) mix cleanly
       when we drop the wide tracking and lift weight by one step. */
[dir="rtl"] .hero-btn,
[dir="rtl"] .btn-face,
[dir="rtl"] .btn-line,
[dir="rtl"] .lf-btn,
[dir="rtl"] .mi-btn {
  letter-spacing: 0.02em;
  font-weight: var(--fw-medium);
}

/* 8 — Footer · keep the Latin wordmark + year dir:ltr so the
       dash in "2018 · Istanbul" reads in source order. */
[dir="rtl"] .foot-tag,
[dir="rtl"] .foot-copy {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* 9 — Form field optical alignment · Arabic placeholders sit
       a few px lower than Latin; lift them with padding, not
       line-height (line-height shifts the caret position too). */
[dir="rtl"] .lf-input,
[dir="rtl"] .lf-textarea,
[dir="rtl"] .lf-select {
  padding-top: calc(var(--lf-pad-y, 0.9rem) - 1px);
  padding-bottom: calc(var(--lf-pad-y, 0.9rem) + 1px);
}

/* 10 — Seal SVG rotation · Arabic text on a curved path shaped
        with joined glyphs reads better with a slower rotation
        so readers can catch it as it passes. */
[dir="rtl"] .seal { animation-duration: 70s; }