/* styles.css — main stylesheet for the homepage */

/* ── Design tokens now live in tokens.css (loaded before this file) ── */

/* ── Fonts ──
   Font strategy (2026-07-05): 2 Persian families actually referenced anywhere
   in the codebase — YekanBakh (site-wide FA default, all pages) and Morabba
   (kept narrowly for .footer-tagline-sub + .hero-mobile-name). IRANSans and
   IRANYekan removed as dead/near-dead weight (see AUDIT-ISSUES.md H6);
   IRANSans' one real use (.split-col-center h2 FA) migrated to YekanBakh. */
/* Morabba */
@font-face {
  font-family: 'Morabba';
  src: url('../assets/fonts/Morabba-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Morabba';
  src: url('../assets/fonts/Morabba-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* YekanBakh */
@font-face {
  font-family: 'YekanBakh';
  src: url('../assets/fonts/YekanBakh-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'YekanBakh';
  src: url('../assets/fonts/YekanBakh-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'YekanBakh';
  src: url('../assets/fonts/YekanBakh-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Keep the dark site surface visible while the asynchronous background canvas initializes. */
html { scroll-behavior: auto; overflow-x: hidden; background: var(--dark); }
@media (min-width: 1024px) {
  html { font-size: clamp(13px, calc(100vw / 1920 * 16), 32px); }
}
body {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 1rem;
  background: transparent;
  color: var(--text-dark);
  overflow-x: hidden;
  cursor: none;
  /* iOS: lock to vertical scroll, kill rubber-band chaining, smooth momentum */
  touch-action: pan-y;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
@media (hover: none) and (pointer: coarse) {
  body { cursor: auto; }
}

/* ── Global background canvas ── */
#bg-canvas-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
#bg-canvas-wrap canvas { display: block; }
img { display: block; max-width: 100%; height: auto; }
a  { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font: inherit; }

/* ── Custom cursor ── */
.cursor {
  position: fixed;
  width: 12px; height: 12px;
  background: var(--lime);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width 0.2s, height 0.2s, background 0.35s ease;
}
.cursor-follower {
  position: fixed;
  width: 36px; height: 36px;
  border: 1px solid rgba(198,241,53,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%,-50%);
  transition: transform 0.15s, width 0.25s, height 0.25s, border-color 0.35s ease;
}
body:has(a:hover) .cursor,
body:has(button:hover) .cursor { width: 20px; height: 20px; }


/* --- Loader --- */
#loader {
  position: absolute; inset: 0;
  background: var(--lime);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
  overflow: hidden;
}
#loader-triangles {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.loader-monogram {
  position: relative;
  display: flex; gap: 8px;
  font-family: 'Cormorant', serif;
  font-size: clamp(60px, 30vw, 124px);
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -4px;
}
.loader-monogram span { display: inline-block; }

/* --- Nav overlay --- */
/* --- Menu bar — config (edit values here) ---
   --mb-x:          horizontal offset from center (positive = right, negative = left)
   --mb-y:          vertical offset from center (positive = down, negative = up)
   --mb-font:       text size
   --mb-pad-v:      top/bottom padding inside each item
   --mb-pad-h:      left/right padding inside each item
   --mb-icon:       icon size
   --mb-gap:        gap between items
   --mb-radius:     item corner radius
   --mb-hide-dur:   fade-out duration when leaving the hero (seconds)
   --mb-hide-slide: offset distance while fading out (px) */
:root {
  /* ── Desktop position ── */
  --mb-x:          0px;
  --mb-y:          0px;

  /* ── Desktop size ── */
  --mb-font:       14px;
  --mb-pad-v:      8px;
  --mb-pad-h:      16px;
  --mb-icon:       18px;
  --mb-gap:        4px;
  --mb-radius:     14px;

  /* ── Hide/show timing ── */
  --mb-hide-dur:   0.5s;
  --mb-hide-slide: 5px;
}

/* ── Mobile override ── */
@media (max-width: 1023px) {
  :root {
    /* ── Mobile position ── */
    --mb-x:        60px;
    --mb-y:        0px;

    /* ── Mobile size ── */
    --mb-font:     12px;
    --mb-pad-v:    6px;
    --mb-pad-h:    11px;
    --mb-icon:     15px;
    --mb-gap:      2px;
    --mb-radius:   11px;
  }
}

/* --- Menu bar --- */
.menu-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  padding: 6px;
  border-radius: 20px;
  background: linear-gradient(to bottom,
    rgba(20,20,20,0.82),
    rgba(10,10,10,0.68));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35),
              inset 0 1px 0 rgba(255,255,255,0.05);
  isolation: isolate;
  opacity: 1;
  pointer-events: all;
  transform: translate(calc(-50% + var(--mb-x)), calc(-50% + var(--mb-y)));
  transition: opacity var(--mb-hide-dur) cubic-bezier(0.4,0,0.2,1),
              transform var(--mb-hide-dur) cubic-bezier(0.4,0,0.2,1);
}
.menu-bar.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(-50% + var(--mb-x)), calc(-50% + var(--mb-y) - var(--mb-hide-slide)));
}

/* nav-level radial glow */
.menu-bar-nav-glow {
  position: absolute;
  inset: -8px;
  background: radial-gradient(ellipse at center,
    transparent 0%,
    rgba(99,102,241,0.18) 30%,
    rgba(168,85,247,0.14) 60%,
    rgba(249,115,22,0.10) 90%,
    transparent 100%);
  opacity: 0;
  pointer-events: none;
  border-radius: 28px;
  transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1);
}
.menu-bar:hover .menu-bar-nav-glow { opacity: 1; }

.menu-bar-list {
  display: flex;
  align-items: center;
  gap: var(--mb-gap);
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
  z-index: 1;
}

.menu-bar-item { position: relative; }

.menu-bar-link {
  display: block;
  position: relative;
  border-radius: var(--mb-radius);
  text-decoration: none;
  perspective: 600px;
  overflow: hidden; /* clip glow to item bounds */
}

/* per-item gradient glow — stays within the item box */
.menu-bar-glow {
  position: absolute;
  inset: 0;
  background: var(--item-glow, transparent);
  border-radius: var(--mb-radius);
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1),
              transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.menu-bar-link:hover .menu-bar-glow {
  opacity: 1;
  transform: scale(1);
}

/* shared face styles */
.menu-bar-face {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--mb-pad-v) var(--mb-pad-h);
  border-radius: var(--mb-radius);
  font-size: var(--mb-font);
  font-weight: 500;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.5);
  transform-style: preserve-3d;
  transition: color 0.3s;
}
.menu-bar-link:hover .menu-bar-face { color: #fff; }

/* front face */
.menu-bar-face--front {
  transform-origin: center bottom;
  transform: rotateX(0deg);
  opacity: 1;
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
              opacity  0.5s cubic-bezier(0.4,0,0.2,1),
              color    0.3s;
}
.menu-bar-link:hover .menu-bar-face--front {
  transform: rotateX(-90deg);
  opacity: 0;
}

/* back face */
.menu-bar-face--back {
  position: absolute;
  inset: 0;
  padding: var(--mb-pad-v) var(--mb-pad-h);
  transform-origin: center top;
  transform: rotateX(90deg);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
              opacity  0.5s cubic-bezier(0.4,0,0.2,1),
              color    0.3s;
}
.menu-bar-link:hover .menu-bar-face--back {
  transform: rotateX(0deg);
  opacity: 1;
}

/* icon */
.menu-bar-face .mb-icon {
  width: var(--mb-icon);
  height: var(--mb-icon);
  flex-shrink: 0;
  transition: color 0.3s;
}
.menu-bar-link:hover .mb-icon {
  color: var(--icon-color, currentColor);
}

/* hamburger — completely removed */
.btn-menu { display: none !important; }

/* ── Instagram dropdown ── */
.mb-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 190px;
  background: linear-gradient(to bottom, rgba(22,22,22,0.96), rgba(14,14,14,0.92));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.4,0,0.2,1),
              transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
  z-index: 200;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}
.mb-dropdown::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 9px;
  height: 9px;
  background: rgba(22,22,22,0.96);
  border-left: 1px solid rgba(255,255,255,0.1);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.menu-bar-item--has-dropdown:hover .mb-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0px);
}
.mb-dropdown-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 12px;
  border-radius: 11px;
  text-decoration: none;
  color: rgba(255,255,255,0.65);
  transition: background 0.18s, color 0.18s;
}
.mb-dropdown-item:hover {
  background: rgba(230,104,60,0.12);
  color: #fff;
}
.mb-dd-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: rgba(230,104,60,0.7);
  transition: color 0.18s;
}
.mb-dropdown-item:hover .mb-dd-icon { color: #e6683c; }
.mb-dd-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mb-dd-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
}
.mb-dd-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  line-height: 1;
  font-family: 'Morabba', sans-serif;
}

/* --- Header --- */
#main-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 48px);
  z-index: 700;
  mix-blend-mode: normal;
  transition: background 0.4s;
}
#main-header.is-dark {
  /* handled by JS adding class */
}
.logo-wrap { display: flex; align-items: flex-start; }
.logo-text {
  display: flex; flex-direction: row; gap: 0.35em;
  font-family: 'Cormorant', serif;
  font-size: clamp(22px, 1.8vw, 30px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dark);
  transition: color 0.4s;
  margin-top: 5px;
}
[lang="fa"] .logo-text {
  font-family: 'YekanBakh' !important;
  font-weight: 700;
}
.header-dark .logo-text { color: white; }
.header-monogram {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 0.06em;
  color: var(--text-dark);
  transition: color 0.4s;
}
.header-dark .header-monogram { color: white; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.btn-work {
  display: flex; align-items: center; gap: 8px;
  background: var(--lime);
  color: var(--dark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 4px;
  transition: var(--transition);
}
.btn-work:hover { background: var(--lime-dark); transform: scale(0.97); }
.lang-toggle { display: flex; align-items: center; }
.lang-checkbox { display: none; }
.lang-checkbox + .lang-estado {
  display: block;
  width: 100px;
  height: 38px;
  background-color: var(--lime);
  border-radius: 19px;
  box-shadow: 0 0 20px -3px rgba(0,0,0,0.15);
  transition: background-color 300ms cubic-bezier(0.79,-0.01,0.36,1);
  cursor: pointer;
  position: relative;
}
.lang-checkbox + .lang-estado span {
  position: absolute;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  pointer-events: none;
}
.lang-checkbox + .lang-estado .lang-label-active {
  top: 50%;
  transform: translateY(-50%);
  left: 14px;
  color: var(--dark);
}
.lang-checkbox + .lang-estado .lang-label-inactive {
  top: 50%;
  transform: translateY(-50%);
  right: 12px;
  display: none;
  color: white;
}
.lang-checkbox + .lang-estado::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: white;
  box-shadow: 0 0 15px -3px rgba(0,0,0,0.2);
  top: 50%;
  transform: translateY(-50%);
  left: 66px;
  transition: left 300ms cubic-bezier(0.79,-0.01,0.36,1);
}
.lang-checkbox:checked + .lang-estado { background-color: var(--dark); }
.lang-checkbox:checked + .lang-estado .lang-label-active { display: none; }
.lang-checkbox:checked + .lang-estado .lang-label-inactive { display: block; }
.lang-checkbox:checked + .lang-estado::before { left: 4px; }
.btn-menu {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.2);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  transition: var(--transition);
}
.btn-menu span {
  display: block;
  width: 14px; height: 1.5px;
  background: var(--text-dark);
  transition: var(--transition);
}
.header-dark .btn-menu { border-color: rgba(255,255,255,0.3); }
.header-dark .btn-menu span { background: white; }
.btn-menu.is-open span:first-child { transform: rotate(45deg) translate(2px, 3px); }
.btn-menu.is-open span:last-child  { transform: rotate(-45deg) translate(2px, -3px); }

/* --- Hero sticky track --- */
.hero-sticky-track {
  position: relative;
}
.hero-sticky-item {
  position: relative;
  overflow: visible;
}

/* --- Hero --- */
#hero {
  position: relative;
  height: 100svh; min-height: 600px;
  background: transparent;
  overflow: visible;
}
@supports not (height: 100svh) {
  #hero { height: 100vh; }
}

/* WebGL background container — z-index auto, first in DOM → behind all siblings */
.gl-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gl-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Hero Info Card (reference "Next Race" card) ── */
.hero-info-card {
  position: absolute;
  left: clamp(20px, 4vw, 48px);
  bottom: clamp(24px, 4vh, 48px);
  z-index: 8;
  width: 8.25rem;
  height: 17.25rem;
  color: rgba(0,0,0,0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.15rem 0.8rem 1rem;
}

.hero-info-card-border {
  position: absolute;
  inset: 0;
  z-index: -1;
  color: rgba(0,0,0,0.8);
  transition: color 0.5s ease;
}
.hero-info-card-border svg { width: 100%; height: 100%; display: block; }

.hero-info-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.68);
  align-self: flex-start;
  margin-top: 0.8rem;
  margin-bottom: auto;
  transition: color 0.5s ease;
}

.hero-info-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-info-row--main {
  flex: 1;
  gap: 0.28rem;
  padding: 0.2rem 0;
}
.hero-info-monogram {
  font-family: 'Cormorant', serif;
  font-size: 2.55rem;
  font-weight: 700;
  color: var(--lime);
  line-height: 1;
  letter-spacing: -0.01em;
}
.hero-info-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.04rem;
  font-size: 0.39rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
}

/* ── Hero Info Card MZ Monogram ─────────────────────────────────────────── */
.hero-info-mz {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.02rem;
  flex: 1;
  padding: 0.2rem 0;
}
.mz-letter {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: rgba(0,0,0,0.82);
  transition: color 0.6s ease;
  opacity: 0;
  transform: translateY(14px) scale(0.8);
  animation: mz-letter-in 0.65s cubic-bezier(0.23,1,0.32,1) 1.2s forwards;
}
.mz-z { animation-delay: 1.38s; }
@keyframes mz-letter-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Hero card turns lime on dark background ────────────────────────────── */
.hero-info-card {
  transition: color 0.5s ease;
}
.hero-info-card.card-light {
  color: var(--lime);
}
.hero-info-card.card-light .hero-info-card-border {
  color: var(--lime);
  transition: color 0.5s ease;
}
.hero-info-card.card-light .hero-info-eyebrow {
  color: var(--lime) !important;
}
.hero-info-card.card-light .mz-letter {
  color: var(--lime) !important;
}
.hero-info-card.card-light .mz-z {
  color: var(--lime) !important;
}
.hero-info-card.card-light .hero-info-divider {
  background: var(--lime) !important;
}
.hero-info-card.card-light .hero-info-row--sub,
.hero-info-card.card-light .hero-info-row--sub span {
  color: var(--lime) !important;
}

.hero-info-divider {
  width: 72%;
  height: 0.0625rem;
  background: rgba(255,255,255,0.15);
  margin: 0.45rem 0;
}
.hero-info-row--sub {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.62);
  margin-bottom: 0.15rem;
  transition: color 0.5s ease;
}
/* ── Hero Card 3D wrap ── */
.hero-card-3d-wrap {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  margin: 0.12rem 0;
}
.hero-card-3d-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.hero-photo-wrap {
  position: absolute;
  inset: -30px;
  z-index: 3;
  will-change: transform;

}
.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  position: relative;
  z-index: 1;
}

/* --- Marquee / signature --- */
.marquee-bg {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: center; gap: 0;
  pointer-events: none;
  direction: ltr;
  z-index: 1;
}
.marquee-row {
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
  padding: 8px 0;
  direction: ltr;
}
.mq-inner {
  display: inline-block;
  white-space: nowrap;
  animation: marquee-fwd 18s linear infinite;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 9vw, 140px);
  color: white;
  letter-spacing: 0.02em;
  direction: ltr;
  unicode-bidi: isolate;
}
[lang="fa"] .mq-inner {
  font-family: 'YekanBakh';
  font-weight: 700;   /* bold */
}
.mq-inner.mq-reverse {
  animation: marquee-rev 18s linear infinite;
  color: var(--lime);
}
@keyframes marquee-fwd {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marquee-rev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.white-panel {
  position: absolute; inset: 0;
  background: var(--offwhite);
  display: flex; align-items: center; justify-content: center;
  transform-origin: center center;
  will-change: opacity;
  isolation: auto;
  overflow: hidden;
  z-index: 3;
}
.panel-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* --- HUD visor scan ---
   Desktop settings:
   top      = distance from the top of the card
   width    = width (relative to white-panel)
   height   = height (relative to white-panel) */
.hud-visor-overlay {
  position: absolute;
  top: 2%;              /* DESKTOP — distance from top */
  left: 50%;
  transform: translateX(-50%);
  width: 80%;           /* DESKTOP — width */
  height: 96%;          /* DESKTOP — height */
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.hud-visor-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  display: block;
}

.sig-overlay {
  position: absolute; inset: 0;
  background: rgba(10, 10, 10, 0.55);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}
.hero-tint-overlay {
  position: absolute; inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
}
.sig-draw-wrap {
  pointer-events: none;
  overflow: visible;
}
.signature-svg {
  position: absolute;
  width: 55%;
  height: auto;
  overflow: visible;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sig-label {
  position: absolute;
  top: 20px; left: 20%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}

/* ── Mobile Hero Name Overlay (hidden on desktop) ── */
.hero-mobile-overlay { display: none; }

/* ── Hero Marquee Overlay (ref home-marquee: absolute over hero) ── */
.hero-marquee-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

/* ── Scroll Trackers (ref pattern) ── */
.hero-eyebrow-tracker,
.hero-rive-tracker {
  pointer-events: none;
  position: absolute;
  width: 1px;
  height: 0;
  overflow: hidden;
}

/* ── Nav Theme Anchors ── */
.hero-nav-theme {
  pointer-events: none;
  position: absolute;
  inset: 0 auto auto 0;
}
.hero-nav-theme.is-1 { height: 10vh; }
.hero-nav-theme.is-2 { height: 90vh; top: 10vh; }

/* --- Text reveal --- */
#text-reveal {
  background: transparent;
  padding: clamp(80px, 12vh, 160px) clamp(20px, 5vw, 80px);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.reveal-badge {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.68);
  margin-bottom: clamp(40px, 6vh, 80px);
}
.reveal-text-wrap { overflow: visible; }
.reveal-headline {
  display: flex; flex-direction: column; gap: 0;
  align-items: center;
  font-family: 'YekanBakh', sans-serif;
  font-size: clamp(72px, 14vw, 200px);
  line-height: 0.92;
  letter-spacing: 0.01em;
}
html[lang="fa"] .rv-en-only { display: none; }
html[lang="fa"] .reveal-headline { line-height: 1.15; }
html[lang="fa"] .rv-line { padding-top: 0.08em; }
.rv-line {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 0.3em;
  padding-bottom: 0.05em;
}
.rv-word {
  display: inline-block;
  color: white;
  will-change: clip-path;
}
.rv-word.rv-lime { color: var(--lime); }

/* Wipe bar (CodePen Sicontis-style reveal) */
.tr-wipe-bar {
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%) rotateZ(12deg);
  width: 12px;
  height: 200%;
  z-index: 5;
  pointer-events: none;
}
.tr-wipe-inner {
  width: 100%;
  height: 100px;
  border-radius: 100px;
  background: var(--lime);
  transform-origin: top center;
}




/* --- Split & PG reveal — wrapper must be block so overflow:hidden clips the wipe --- */
.split-reveal,
.pg-reveal {
  display: block;
  overflow: hidden;
}
/* The wipe bars inside split/pg need right/left origin depending on LTR/RTL */
.split-reveal.animation-ltr.animate-in::before,
.pg-reveal.animation-ltr.animate-in::before   { left: 0; right: auto; }
.split-reveal.animation-rtl.animate-in::before { right: 0; left: auto; }

/* --- Split --- */
.split-fs-wrapper {
  position: relative;
}
#split-section {
  background: transparent;
  height: 100svh;
  display: flex; align-items: center;
  position: sticky;
  top: 0;
  z-index: 1;
  overflow: hidden;
}
.split-img-left,
.split-img-right {
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(360px, 44vw, 680px);
  overflow: hidden;
}
.split-img-left  { left: 0; }
.split-img-right { right: 0; }
.split-img-left img,
.split-img-right img,
.split-img-left video,
.split-img-right video {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
/* Desktop browsers play the alpha video (webm + HEVC alpha).
   Mobile gets an animated WebP with TRUE alpha (iOS Safari 14+ plays animated
   WebP natively, including the alpha channel). The whole point of animated
   WebP here is that we avoid HEVC alpha decoding, which iOS does inconsistently. */
.split-anim-mobile { display: none; }
/* The left video renders larger than the right one because its content fills more of the frame — scale it down */
.split-img-left video {
  transform: scale(0.78);
  transform-origin: bottom center;
}
.split-center-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(80px, 22vw, 380px);
  margin: 0 auto;
  padding: 0 clamp(200px, 26vw, 400px);
  width: 100%;
  padding-top: 20vh;
}
.split-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.split-col-center h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(54px, 8vw, 120px);
  line-height: 0.95;
  letter-spacing: 0.08em;
  color: #000000;
  text-align: center;
}
.split-col-center .pe-reveal { display: block; }
.split-col-center .pe-reveal + .pe-reveal {
  margin-top: clamp(20px, 3.5vh, 56px);
}
.split-col-left p,
.split-col-right p {
  font-size: clamp(12px, 1.2vw, 14px);
  color: var(--text-mid);
  line-height: 1.6;
}
.btn-round {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--dark);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.btn-round:hover { background: var(--dark); color: var(--lime); transform: scale(1.1); }

/* --- Fullscreen reveal --- */
#fullscreen-reveal {
  position: relative;
  z-index: 2;
  height: 100svh;
  overflow: hidden;
  background: transparent;
}
.fs-inner {
  position: absolute; inset: 0;
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}
.fs-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  background: linear-gradient(160deg, #1a2210, #2a3220);
}

/* --- Projects grid --- */
#projects-grid {
  background: transparent;
  padding: clamp(80px,12vh,140px) clamp(20px,5vw,80px);
}
.pg-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: clamp(40px, 6vh, 80px);
  text-align: center;
}
.pg-header h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 7vw, 100px);
  color: white;
  line-height: 0.9;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pg-sub { color: var(--lime); }
/* Expandable cards */
.cards {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: clamp(320px, 42vh, 480px);
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: 0 26px 70px rgba(0,0,0,0.55);
}
.card {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  cursor: pointer;
  transition: flex 0.5s ease;
  overflow: hidden;
  position: relative;
  will-change: flex;
}
.card:hover { flex: 3; }
.card a {
  display: block;
  width: 100%; height: 100%;
  text-decoration: none;
  color: inherit;
}
.card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: grayscale(100%);
  will-change: transform, filter;
  background: linear-gradient(90deg, #1a2210 25%, #2a3220 50%, #1a2210 75%);
  background-size: 200% 100%;
  animation: pg-shimmer 1.5s infinite;
}
@keyframes pg-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.card:hover img {
  transform: scale(1.1);
  filter: grayscale(0%);
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  pointer-events: none;
}
.card:hover::after { opacity: 1; }
.card-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.65);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: clamp(12px, 1vw, 13px);
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
  z-index: 2;
}
.card:hover .card-title {
  background: rgba(255,255,255,0.85);
  color: #000;
  transform: translate(-50%, -50%) scale(1.05);
}
.card-desc {
  position: absolute;
  z-index: 3;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  padding: 8px 14px;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  letter-spacing: 0.1em;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}
.card:hover .card-desc { transform: translateY(0); }
.card a:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.card a:focus-visible img { filter: grayscale(0%); }
@media (prefers-reduced-motion: reduce) {
  .card, .card img, .card-title, .card-desc, .card::after { transition: none; }
  .card img { animation: none; }
}

.card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card-title::before {
  content: '';
  width: 0.55rem;
  height: 0.65rem;
  flex: 0 0 auto;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.card-link:active .card-title {
  transform: translate(-50%, -50%) scale(0.97);
}
@media (max-width: 63.9375rem) {
  #projects-grid {
    padding: clamp(5rem, 12vh, 7rem) clamp(1rem, 5vw, 3rem);
  }
  .pg-header { margin-bottom: 2.5rem; }
  .pg-header h2 {
    font-size: clamp(3rem, 11vw, 5.5rem);
    white-space: normal;
  }
  .cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    width: min(100%, 40rem);
    height: auto;
    margin-inline: auto;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
  }
  .card {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-sm);
    will-change: auto;
  }
  .card:hover { flex: 1 1 0; }
  .card:hover img { transform: none; }
  .card::after { opacity: 1; }
  .card-title,
  .card:hover .card-title {
    padding: 0.5rem 0.875rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    transform: translate(-50%, -50%);
  }
  .card-desc,
  .card:hover .card-desc {
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
    transform: none;
  }
}
@media (min-width: 64rem) {
  #projects-grid {
    padding-block: max(5rem, 6.75vw);
    padding-inline: 4.166667vw;
  }
  .pg-header { margin-bottom: max(2.5rem, 3.375vw); }
  .pg-header h2 { font-size: 5.208333vw; }
  .cards {
    height: max(20rem, 23.625vw);
    border-radius: max(0.5rem, 0.416667vw);
  }
  .card-title {
    gap: max(0.375rem, 0.416667vw);
    padding: max(0.375rem, 0.416667vw) max(0.625rem, 0.729167vw);
    border-radius: max(0.25rem, 0.3125vw);
    font-size: max(0.6875rem, 0.677083vw);
  }
  .card-title::before {
    width: max(0.4375rem, 0.458333vw);
    height: max(0.5rem, 0.541667vw);
  }
  .card-desc {
    padding: max(0.375rem, 0.416667vw) max(0.625rem, 0.729167vw);
    font-size: max(0.6875rem, 0.625vw);
  }
}

body.is-video-open {
  overscroll-behavior: none;
  touch-action: none;
}
.vm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3.5rem, 8vh, 5rem) clamp(1rem, 4vw, 2.5rem) clamp(1rem, 3vh, 2rem);
  box-sizing: border-box;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 160ms;
}
.vm-overlay.is-open {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transition-duration: 220ms, 0s;
  transition-delay: 0s;
}
.vm-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--black) 90%, transparent);
  backdrop-filter: blur(0.75rem);
  -webkit-backdrop-filter: blur(0.75rem);
}
.vm-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: min(100%, clamp(24rem, 25vw, 60rem), calc(78svh * 0.5625));
  max-height: calc(100svh - 5rem);
  transform: translateY(1rem) scale(0.96);
  transform-origin: center;
  opacity: 0;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), opacity 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.vm-overlay.is-open .vm-inner {
  transform: translateY(0) scale(1);
  opacity: 1;
  transition-duration: 240ms;
}
.vm-close {
  position: absolute;
  inset-block-start: -3rem;
  inset-inline-end: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--white) 26%, transparent);
  background: color-mix(in srgb, var(--white) 9%, transparent);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 2;
}
.vm-close:active {
  transform: scale(0.97);
}
.vm-close:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 0.1875rem;
}
.vm-close svg { width: 1.125rem; height: 1.125rem; }
.vm-video-wrap {
  width: 100%;
  aspect-ratio: 9 / 16;
  justify-self: center;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--black);
  box-shadow: 0 2rem 5rem color-mix(in srgb, var(--black) 72%, transparent);
}
.vm-video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: var(--black);
}
.vm-caption {
  margin-top: 1rem;
  text-align: center;
}
.vm-title {
  font-family: 'Cormorant', serif;
  font-size: clamp(1.125rem, 2.5vw, 1.625rem);
  font-weight: 400;
  font-style: italic;
  color: color-mix(in srgb, var(--white) 90%, transparent);
  margin-bottom: 0.25rem;
}
.vm-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--white) 46%, transparent);
}
html[lang="fa"] .vm-title { font-family: 'YekanBakh', sans-serif; font-style: normal; letter-spacing: 0; }
html[lang="fa"] .vm-sub   { font-family: 'YekanBakh', sans-serif; letter-spacing: 0; text-transform: none; }
.vm-overlay.is-instant,
.vm-overlay.is-instant .vm-inner {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}
@media (hover: hover) and (pointer: fine) {
  .vm-close:hover {
    background: color-mix(in srgb, var(--white) 18%, transparent);
    transform: scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .vm-inner,
  .vm-overlay.is-open .vm-inner { transform: none; }
}
.pg-cta {
  margin-top: clamp(40px, 6vh, 60px);
  text-align: center;
}
.btn-view {
  display: inline-block;
  padding: 14px 36px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-sm);
  color: white;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: var(--transition);
}
.btn-view:hover { background: var(--lime); color: var(--dark); border-color: var(--lime); }

/* --- Featured --- */
#featured {
  background: transparent;
  padding: clamp(5rem,12vh,8.75rem) clamp(5rem,12vw,12.5rem);
  position: relative;
  overflow: visible;
}
.feat-canvas-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}
#featured-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.feat-inner {
  position: relative;
  z-index: 1;
}
.feat-top-label {
  display: flex; align-items: center; gap: 0.625rem;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  margin-top: clamp(1.25rem, 3vh, 2.5rem);
  margin-bottom: clamp(2.5rem, 6vh, 3.75rem);
}
.feat-icon { font-size: 1.125rem; }
.feat-layout {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6.25rem);
}
.feat-text { flex: 1; min-width: 15rem; }
.feat-tag {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 1rem;
}
.feat-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4.5rem, 8.5vw, 10rem);
  line-height: 1.3;
  letter-spacing: 0em;
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
  color: #000000;
}
.feat-text p {
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
  margin-bottom: clamp(1.5rem, 3.5vh, 2.5rem);
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.625rem;
  background: var(--dark);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: var(--transition);
}
.btn-primary:hover { background: var(--lime); color: var(--dark); }
.feat-img {
  flex: 1.4;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius-md);
  position: relative;
}
.feat-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  background: linear-gradient(135deg, #e0d8c8, #c8c0b0);
  transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.feat-img:hover img { transform: scale(1.04); }
.feat-detail-row { display: none; }

/* --- Partners --- */
#partners {
  background: transparent;
  padding: clamp(80px,12vh,140px) 0;
  overflow: hidden;
}
.partners-inner { position: relative; }
.partners-text {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(30px, 5vw, 80px);
  padding: 0 clamp(80px,12vw,200px);
  margin-bottom: clamp(40px, 6vh, 60px);
}
.partners-text h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(84px, 12vw, 160px);
  line-height: 0.9;
  letter-spacing: 0.18em;
  text-align: center;
  width: 100%;
}
.pt-sub { color: var(--text-mid); }
.feat-sig-outer {
  position: absolute;
  bottom: clamp(-150px, -18vh, -80px);
  right: clamp(20px, 4vw, 60px);
  left: auto;
  pointer-events: none;
  z-index: 4;
  direction: ltr;
  overflow: visible;
}
.feat-sig-svg {
  width: 58vw;
  height: auto;
  display: block;
  overflow: visible;
}

.partners-text p {
  font-size: clamp(13px, 1.2vw, 15px);
  color: var(--text-mid);
  line-height: 1.7;
  max-width: 380px;
  padding-top: 12px;
}
.partners-logos-outer { overflow: hidden; direction: ltr; }
.partners-logos-inner {
  display: flex;
  align-items: center;
  width: max-content;
  direction: ltr;
  white-space: nowrap;
  animation: logos-scroll 22s linear infinite;
  padding: 20px 0;
}
.pt-logo {
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mid);
  font-weight: 500;
  flex-shrink: 0;
  padding: 0 22px;
  margin: 0 clamp(15px, 2.5vw, 30px);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 4px;
  height: 38px;
  display: inline-flex; align-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease, border-color 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease;
}
.pt-logo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
  z-index: -1;
}
.pt-logo:hover::before { transform: scaleX(1); }
.pt-logo:hover {
  color: var(--white);
  border-color: var(--dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.13);
}
@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

/* --- Social --- */
#social-section {
  background: transparent;
  padding: clamp(80px,12vh,140px) clamp(20px,5vw,10px);
  text-align: center;
  overflow: visible;
}
.social-camera {
  color: var(--text-mid);
  margin-bottom: 20px;
  display: flex; justify-content: center;
}
.social-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(56px, 9vw, 120px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  margin-bottom: clamp(40px, 7vh, 80px);
}
.wrapper {
  --card-trans-duration: 3800ms;
  --card-trans-easing: linear(0, 0.01 0.8%, 0.038 1.6%, 0.154 3.4%, 0.781 9.7%, 1.01 12.5%, 1.089 13.8%, 1.153 15.2%, 1.195 16.6%, 1.219 18%, 1.224 19.7%, 1.208 21.6%, 1.172 23.6%, 1.057 28.6%, 1.007 31.2%, 0.969 34.1%, 0.951 37.1%, 0.953 40.9%, 0.998 50.4%, 1.011 56%, 0.998 74.7%, 1);
  --card-border-radius: 10px;
  --card-width: 25vmin;
  --radius: 70vmin;
  --cards: 5;
  --arc-size: 0;
  --arc-center: 0.75;
  --arc-start: calc(var(--arc-center) - var(--arc-size) / 2);
  --arc-shift: 0;
  --arc-shift-delta: 0.005;

  position: relative;
  width: var(--card-width);
  aspect-ratio: 4/6;
  margin: 480px auto clamp(240px, 40vmin, 360px);
}
.wrapper.fan-open { --arc-size: 0.38; }
.wrapper > div {
  --card-i: 1;
  --arc-step: calc(var(--arc-size) / (var(--cards) - 1));

  position: absolute;
  width: var(--card-width);
  aspect-ratio: 4/6;
  background: white;
  border-radius: var(--card-border-radius);
  overflow: hidden;

  offset-path: circle(var(--radius) at 50% 100%);
  offset-distance: calc(
    (var(--arc-start) + (var(--card-i) - 1) * var(--arc-step) + var(--arc-shift)) * 100%
  );
  offset-rotate: auto;
  offset-anchor: 50% 0%;
  transition: all var(--card-trans-duration) var(--card-trans-easing);
}
.wrapper.is-animating > div { transition: none; }
.wrapper > div:nth-child(1) { --card-i: 1; z-index: 1; }
.wrapper > div:nth-child(2) { --card-i: 2; z-index: 3; }
.wrapper > div:nth-child(3) { --card-i: 3; z-index: 4; }
.wrapper > div:nth-child(4) { --card-i: 4; z-index: 3; }
.wrapper > div:nth-child(5) { --card-i: 5; z-index: 1; }
.wrapper > div:hover {
  offset-anchor: 50% 10%;
}
.wrapper > div:hover + div             { --arc-shift: calc(var(--arc-shift-delta) * 2); }
.wrapper > div:hover + div + div       { --arc-shift: calc(var(--arc-shift-delta) * 1); }
.wrapper > div:has(+ *:hover)          { --arc-shift: calc(var(--arc-shift-delta) * -2); }
.wrapper > div:has(+ * + *:hover)      { --arc-shift: calc(var(--arc-shift-delta) * -1); }
.wrapper > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.social-follow-text {
  font-size: clamp(13px, 1.3vw, 16px);
  color: var(--text-mid);
  margin-bottom: 20px;
}
.social-links {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3vw, 48px);
}
.social-links a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dark);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}
.social-links a:hover { border-color: var(--dark); }

/* --- Footer --- */
#footer {
  background: transparent;
  color: white;
  position: relative;
  overflow: hidden;
}
.footer-wrap { padding: 0; }
.footer-tagline-block {
  position: relative;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(60px,8vh,100px) clamp(20px,5vw,80px);
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 100%, rgba(198,241,53,0.18) 0%, transparent 65%);
}
.footer-hero-img {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: clamp(220px, 30vw, 420px);
  object-fit: cover;
  object-position: top;
  opacity: 0.25;
  pointer-events: none;
}
.footer-logo-mark {
  position: absolute;
  top: clamp(30px, 4vh, 50px); left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.footer-mz {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.62);
}
.footer-sig-svg { width: 50px; opacity: 0.4; }
.footer-tagline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 1;
  letter-spacing: 0.02em;
  position: relative; z-index: 1;
  text-align: center;
  width: 100%;
}
.footer-tagline-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(14px, 1.5vw, 20px);
  color: rgba(255,255,255,0.55);
  text-align: center;
  /* --- Position control ---
     margin-top    → distance from the line above
     margin-bottom → distance below */
  margin-top: 34px;
  margin-bottom: 0;
  letter-spacing: 0.04em;
  width: 100%;
}
html[lang="fa"] .footer-tagline-sub {
  font-family: 'Morabba', sans-serif;
  direction: rtl;
}
.footer-ticker-outer {
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 10px 0;
  background: rgba(0,0,0,0.3);
}
.footer-ticker-inner {
  display: flex; align-items: center; gap: 40px;
  white-space: nowrap;
  animation: logos-scroll 22s linear infinite;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.footer-ticker-inner span { flex-shrink: 0; }
.footer-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  padding: clamp(80px,14vh,160px) clamp(20px,5vw,80px);
  min-height: 60vh;
}
.footer-nav-col {
  display: flex; flex-direction: column; gap: 10px;
}
.footer-nav-right { align-items: flex-end; text-align: right; }
.fn-label {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 8px;
  display: block;
}
.footer-nav-col a {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(24px, 3.5vw, 52px);
  letter-spacing: 0.02em;
  color: white;
  transition: color 0.2s;
  line-height: 1;
}
.footer-nav-col a:hover { color: var(--lime); }
.footer-hero-center {
  width: clamp(120px, 16vw, 220px);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 2/3;
}
.footer-center-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  filter: grayscale(0.3);
}
.btn-enquiry {
  display: block;
  margin: 0 auto clamp(30px, 4vh, 50px);
  width: fit-content;
  background: var(--lime);
  color: var(--dark);
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: var(--transition);
}
.btn-enquiry:hover { background: white; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px clamp(20px,5vw,80px);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  color: rgba(255,255,255,0.62);
  letter-spacing: 0.06em;
}
.footer-bottom div { display: flex; gap: 24px; }
.footer-bottom a { color: rgba(255,255,255,0.72); transition: color 0.2s; }
.footer-bottom a:hover { color: white; }
.footer-legal-placeholder { opacity: 0.4; cursor: default; }

/* --- Wipe reveal animation --- */
.has-animation {
  position: relative;
  display: block;
  overflow: hidden;
}
.has-animation > h2,
.has-animation > .feat-title {
  opacity: 0;
}
.has-animation.animate-in > h2,
.has-animation.animate-in > .feat-title {
  animation: wipeTextReveal 0.1s 1.1s forwards;
}
.has-animation.animate-in::before,
.has-animation.animate-in::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}
.has-animation.animate-in::before { background-color: var(--lime); }
.has-animation.animate-in::after  { background-color: var(--dark); animation-delay: 0.5s; }
.has-animation.animation-ltr.animate-in::before { animation: wipeRevealLTR 1.8s ease; }
.has-animation.animation-ltr.animate-in::after  { animation: wipeRevealLTR 1s 0.6s ease; }
.has-animation.animation-rtl.animate-in::before { animation: wipeRevealRTL 1.8s ease; }
.has-animation.animation-rtl.animate-in::after  { animation: wipeRevealRTL 1s 0.6s ease; }

@keyframes wipeRevealRTL {
  0%   { width: 0;    right: 0; }
  65%  { width: 100%; right: 0; }
  100% { width: 0;    right: 100%; }
}
@keyframes wipeRevealLTR {
  0%   { width: 0;    left: 0; }
  65%  { width: 100%; left: 0; }
  100% { width: 0;    left: 100%; }
}
@keyframes wipeTextReveal {
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .has-animation > h2,
  .has-animation > .feat-title { opacity: 1; }
  .has-animation.animate-in::before,
  .has-animation.animate-in::after { display: none; }
}

/* --- Persian (RTL) --- */
html[lang="fa"] {
  direction: rtl;
}
html[lang="fa"] body {
  font-family: 'YekanBakh', -apple-system, sans-serif;
}
html[lang="fa"] .logo-text,
html[lang="fa"] .nav-big-link,
html[lang="fa"] .reveal-headline,
html[lang="fa"] .feat-title,
html[lang="fa"] .footer-tagline,
html[lang="fa"] .social-heading,
html[lang="fa"] .pg-header h2,
html[lang="fa"] .partners-text h2,
html[lang="fa"] .split-col-left h2,
html[lang="fa"] .split-col-right h2,
html[lang="fa"] .split-col-center h2 {
  font-family: 'YekanBakh', sans-serif;
}
html[lang="fa"] .split-col-center h2 {
  font-weight: 700;
}
html[lang="fa"] .gallery-quote-wrap { text-align: left; margin-left: 0; margin-right: auto; }
html[lang="fa"] .split-col-right { text-align: left; align-items: flex-start; }
html[lang="fa"] .footer-nav-right { align-items: flex-start; text-align: left; }

/* ── My Works / My Life — more spacing + white text in Persian ── */
html[lang="fa"] .split-col-left,
html[lang="fa"] .split-col-right {
  gap: clamp(32px, 6vh, 56px);
}
html[lang="fa"] .split-col-left h2,
html[lang="fa"] .split-col-right h2 {
  line-height: 1.05;
  color: #000000;
}
/* Center column text lines in Persian — needs a fitting line-height since the shared top spacing applies here too */
html[lang="fa"] .split-col-center h2 {
  line-height: 1.6;
  color: #000000;
}
/* Prevent Persian letter ascenders from being clipped by overflow:hidden in pe-reveal */
html[lang="fa"] .split-col-center .pe-reveal {
  line-height: 1.6;
  padding-top: 0.15em;
}
/* per-line scaling for Persian — equal visual width per column */
html[lang="fa"] .split-col-left  .pe-reveal-line-1 { font-size: 1em;    }   /* "reality" */
html[lang="fa"] .split-col-left  .pe-reveal-line-2 { font-size: 1em;    }   /* "augmented" */
html[lang="fa"] .split-col-right .pe-reveal-line-1 { font-size: 1em;    }   /* "automation" */
html[lang="fa"] .split-col-right .pe-reveal-line-2 { font-size: 1.55em; }   /* "system" */
html[lang="fa"] .split-col-left p,
html[lang="fa"] .split-col-right p {
  color: rgba(255,255,255,0.75);
}

/* ── Featured title — consistent sizing, prevent top clipping ── */
html[lang="fa"] .feat-title {
  font-size: clamp(2.7rem, 5.1vw, 6rem);
  line-height: 1;
  color: #000000;
}
html[lang="fa"] .feat-title span {
  display: block;
  white-space: nowrap;
}
html[lang="fa"] #featured .has-animation {
  padding-top: 44px;
}


/* ── Partners / Clients heading — prevent top clipping ── */
html[lang="fa"] #partners .has-animation {
  padding-top: 36px;
}
html[lang="fa"] .partners-text h2 {
  letter-spacing: 0;
  word-break: keep-all;
  white-space: nowrap;
  font-size: clamp(48px, 8vw, 160px);
}
html[lang="fa"] .pt-logo {
  letter-spacing: 0;
  white-space: nowrap;
}


/* ── Social heading — prevent top clipping ── */
html[lang="fa"] #social-section .has-animation {
  padding-top: 48px;
}

/* ── Footer tagline — smaller size for single-line Persian + fix top clipping ── */
html[lang="fa"] .footer-tagline {
  font-size: clamp(36px, 6vw, 90px);
}
html[lang="fa"] #footer .has-animation {
  padding-top: 32px;
}
html[lang="fa"] .footer-tagline-block {
  overflow: visible;
  padding-top: clamp(80px, 14vh, 140px);
}

/* ─── Mobile Image Accordion — hidden on desktop ─── */
.feat-accordion-mobile { display: none; }

/* --- Featured — mobile settings (both languages: Persian and English) ---
   Site-design sample box:
   --mob-box-w      box width           e.g.: 42% | 170px | 45vw
   --mob-box-ar     aspect ratio        e.g.: 3/4 | 4/5 | 1/1
   --mob-box-top    distance from top   e.g.: 30px  ← larger = further down
   --mob-box-right  distance from right e.g.: 0px | auto
   --mob-box-left   distance from left  e.g.: auto | 0px
   --mob-box-order  display order       1 = left | 2 = right

   Heading ("world-class web design"):
   --mob-ttl-fs     English font size  e.g.: clamp(32px, 11vw, 50px)
   --mob-ttl-fs-fa  Persian font size  e.g.: clamp(28px, 8vw, 44px)
   --mob-ttl-top    distance from top  e.g.: 0px
   --mob-ttl-order  display order      1 = left | 2 = right

   Note: to put multiple words on one line, write multiple words inside a
   single <span> in the HTML — text is no longer limited to one word. */

/* --- Medium screens (MacBook 13-16") --- */
/* Covers 769–1700px — includes MacBook Air M2 "More Space" (1512px) which
   was previously outside the old 1440px cap and rendered with base CSS.
   Rule: padding-vw > image-vw so text always starts OUTSIDE image containers. */
@media (min-width: 1024px) and (max-width: 1700px) {
  /* Smaller containers — 26vw keeps robots from filling too much at 1280–1512px */
  .split-img-left,
  .split-img-right {
    width: clamp(200px, 26vw, 440px);
  }
  /* Font scales fluidly — 7vw gives ~90px at 1280px, ~106px at 1512px */
  .split-col-center h2 {
    font-size: clamp(46px, 7vw, 116px);
  }
  html[lang="fa"] .split-col-center h2 {
    font-size: clamp(32px, 5vw, 90px);
  }
  /* Padding at 30vw (> image 26vw) guarantees text starts beyond image right edge */
  .split-center-content {
    gap: clamp(16px, 3vw, 60px);
    padding-left:  clamp(180px, 30vw, 490px);
    padding-right: clamp(180px, 30vw, 490px);
  }
}

/* --- Mobile --- */
@media (max-width: 1023px) {
  :root {
    /* - Site-design sample box - */
    --mob-box-w:     90%;          /* box width */
    --mob-box-ar:    4/3;          /* aspect ratio */
    --mob-box-top:   30px;         /* distance from top */
    --mob-box-right: auto;         /* distance from right */
    --mob-box-left:  auto;         /* distance from left */
    --mob-box-order: 2;            /* 1=left | 2=right */

    /* - Heading ("world-class") - */
    --mob-ttl-fs:    clamp(32px, 11vw, 50px); /* EN font size */
    --mob-ttl-fs-fa: clamp(28px, 8vw, 44px);  /* FA font size */
    --mob-ttl-top:   0px;          /* distance from top */
    --mob-ttl-order: 1;            /* 1=left | 2=right */

    /* - Mobile heading font - */
    /* choose from: 'YekanBakh' | 'Morabba' | 'IRANSans' | 'IRANYekan' | 'Bebas Neue' | 'DM Sans' */
    --mob-ttl-font-fa: 'moraba', sans-serif;  /* FA font */
    --mob-ttl-font-en: 'Bebas Neue', sans-serif; /* EN font */
  }

  /* Canvas runs on mobile — sections are transparent, background comes from canvas */
  body { background: transparent; }

  body { cursor: auto; }
  .cursor, .cursor-follower { display: none; }
  button { cursor: pointer; }

  .logo-wrap { display: none; }
  .header-monogram { display: none; }
  .btn-work span:last-child { display: none; }
  /* Keep hamburger at right edge */
  .header-actions { margin-left: auto; }
  /* Move lang toggle to left side (where logo was) */
  .lang-toggle { position: absolute; left: clamp(20px, 4vw, 48px); top: 50%; transform: translateY(-50%); }

  #hero { height: 100svh; }
  .hero-photo-wrap { inset: 0; width: 100%; height: 100%; }
  .hero-info-card { display: none; }
  #sig-label { display: none; }

  /* Mobile hero name overlay */
  .hero-mobile-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 16%;
    left: 0; right: 0;
    z-index: 7;
    text-align: center;
    pointer-events: none;
  }
  .hero-mobile-monogram {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 30px;
    color: rgba(26, 34, 16, 0.8);
    letter-spacing: 0.1em;
    line-height: 1;
    margin-bottom: 4px;
  }
  .hero-mobile-name {
    font-family: 'Morabba', sans-serif;
    font-size: clamp(40px, 12vw, 64px);
    color: rgba(26, 34, 16, 0.92);
    letter-spacing: 0em;
    line-height: 1;
  }
  .hero-mobile-subtitle {
    margin-top: 4px;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    letter-spacing: 0em;
    text-transform: uppercase;
    color: rgba(26, 34, 16, 0.5);
  }

  /* White panel: use same absolute positioning as desktop so GSAP scale behaves identically */
  .white-panel { position: absolute; inset: 0; }
  /* Image: anchor face area so clip reveals center square around the face */
  /* Center face in the scaled-down card */
  .panel-photo { object-position: center 30%; }
  /* --- HUD visor — mobile settings --- */
  .hud-visor-overlay {
    top: 30%;           /* MOBILE — distance from top */
    left: 50%;          /* MOBILE — horizontal position (50% = centered) */
    width: 260%;         /* MOBILE — width */
    height: 72%;        /* MOBILE — height */
  }
  /* Signature scales with panel — reduce base size */
  .signature-svg { width: 200%; max-width: 600px; top: 62%; }
  /* Show marquee text rows at bottom of screen (revealed as panel shrinks) */
  .marquee-bg { display: flex; justify-content: flex-end; padding-bottom: 4svh; }
  #transition-section { height: auto; min-height: 100svh; }

  /* --- Split: MY WORK/MY LIFE text distance from top — change the number to adjust --- */
  /* Reduce height so the white space below is removed — mobile */
  #split-section {
    position: sticky; top: 0;
    height: 70svh;       /* ← split height on mobile (was 100svh by default) */
    min-height: unset;
    flex-direction: row; padding: 0; align-items: flex-start;
    padding-top: 60px;
    overflow: hidden;
  }

  /* --- Fullscreen: mobile height via svh --- */
  #fullscreen-reveal {
    height: 100svh;
  }

  /* --- Split: left image position settings --- */
  .split-img-left {
    display: block;
    width: 66vw;
    --split-left-top:    clamp(150px, 22svh, 220px); /* distance from top */
    --split-left-bottom: auto;                        /* distance from bottom */
    --split-left-left:   0px;                         /* distance from left */
    --split-left-right:  auto;                        /* distance from right */
    top:    var(--split-left-top);
    bottom: var(--split-left-bottom);
    left:   var(--split-left-left);
    right:  var(--split-left-right);
  }

  /* --- Split: right image position settings --- */
  .split-img-right {
    display: block;
    width: 66vw;
    --split-right-top:    clamp(150px, 22svh, 220px); /* distance from top */
    --split-right-bottom: auto;                        /* distance from bottom */
    --split-right-left:   auto;                        /* distance from left */
    --split-right-right:  0px;                         /* distance from right */
    top:    var(--split-right-top);
    bottom: var(--split-right-bottom);
    left:   var(--split-right-left);
    right:  var(--split-right-right);
  }
  /* If the container has a video, use a narrower width — mobile */
  .split-img-right:has(video) { width: 48vw; }
  .split-img-left:has(video)  { width: 48vw; }
  .split-img-left img, .split-img-right img,
  .split-img-left video, .split-img-right video { object-position: top center; }
  /* Swap: animated WebP plays on mobile (true alpha), desktop alpha-video hides */
  .split-img-left .split-video-desktop,
  .split-img-right .split-video-desktop { display: none; }
  .split-img-left .split-anim-mobile,
  .split-img-right .split-anim-mobile {
    display: block;
    /* Container has bottom:auto on mobile → height is content-driven. The
       inherited "height: 100%" of replaced elements resolves to 0 in iOS
       Safari when parent height is undefined, so the img would collapse and
       look like an empty white box. Let intrinsic dimensions drive height. */
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
  }
  .split-center-content { padding: 0 20px; flex-direction: row; gap: 0; justify-content: center; align-items: center; position: relative; z-index: 2; }
  .split-col-left { max-width: 48%; align-items: flex-start; text-align: left; }
  .split-col-right { max-width: 48%; align-items: flex-end; text-align: right; }
  .split-col-center h2 { font-size: clamp(28px, 7vw, 56px); }
  html[lang="fa"] .split-col-left h2, html[lang="fa"] .split-col-right h2,
  html[lang="fa"] .split-col-center h2 { font-size: clamp(22px, 7vw, 36px); }

  /* --- Featured section — mobile (English) ---
     Each line is an independent element — change only that line. */

  /* --- Main section container --- */
  #featured {
    padding-top:    clamp(20px, 10vh, 50px); /* distance from top of section */
    padding-bottom: clamp(60px, 10vh, 100px); /* distance from bottom of section */
    padding-left:   clamp(16px, 4vw, 32px);  /* distance from left of section */
    padding-right:  clamp(16px, 4vw, 32px);  /* distance from right of section */
  }

  /* --- Layout — mobile: heading on top (full width), accordion below --- */
  .feat-layout {
    flex-direction: column;   /* column = stacked */
    align-items:    flex-start;
    gap:            10px;
  }

  /* --- Heading container — full width, first row, centered --- */
  .feat-text {
    flex:         0 0 auto;
    width:        100%;
    min-width:    0;
    order:        -1;
    margin-top:   0px;
    margin-bottom: 8px;
    text-align:   center;     /* center the whole container */
    display:      flex;
    justify-content: center;
  }

  /* --- Main heading — single line, centered --- */
  .feat-title {
    font-size:      clamp(18px, 4.8vw, 28px);
    font-family:    var(--mob-ttl-font-en);    /* ← from --mob-ttl-font-en */
    line-height:    1.2;
    letter-spacing: 0em;
    word-spacing:   -0.05em;                   /* tighter spacing between words */
    margin-bottom:  0;
    margin-top:     0px;
    white-space:    nowrap;
    text-align:     center;                    /* centered */
    width:          100%;
  }
  .feat-title span {
    display:     inline;
    white-space: nowrap;
  }
  /* Small gap between spans (in place of <br>) */
  .feat-title span::after { content: '\2009'; } /* thin space */
  .feat-title span:last-child::after { content: ''; }
  .feat-title br { display: none; }

  /* --- VIEW THE WORK button (next to heading) — hidden on mobile --- */
  .feat-text > .btn-primary {
    display: none; /* none=hidden | inline-flex=shown */
  }

  /* --- Paragraph below heading (next to heading) — hidden on mobile --- */
  .feat-text p {
    display: none; /* none=hidden | block=shown */
  }

  /* --- Main image (right column) — hidden on mobile, accordion takes its place --- */
  .feat-img {
    display: none;
  }

  /* --- Mobile image accordion --- */
  .feat-accordion-mobile {
    display:        flex;
    flex-direction: row;
    gap:            3px;
    height:         260px;
    overflow:       hidden;
    border-radius:  12px;
    flex:           0 0 auto;
    width:          100%;     /* full width since it's below the heading */
    margin-top:     0px;
    margin-right:   0;
    margin-left:    0;
    margin-bottom:  0px;
    order:          1;
  }
  .fam-item {
    position:        relative;
    flex:            0 0 13px;
    height:          100%;
    border-radius:   8px;
    overflow:        hidden;
    cursor:          pointer;
    background-size: cover;
    background-position: center;
    transition:      flex 0.55s cubic-bezier(0.25,0.46,0.45,0.94);
  }
  .fam-item.fam-active {
    flex: 1;
  }
  .fam-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%);
    pointer-events: none;
  }
  .fam-item:not(.fam-active) .fam-overlay {
    background: rgba(0,0,0,0.35);
  }
  .fam-caption {
    position:   absolute;
    bottom:     10px;
    left:       50%;
    transform:  translateX(-50%);
    color:      white;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    opacity:    0;
    transition: opacity 0.35s ease 0.2s;
    pointer-events: none;
  }
  .fam-item.fam-active .fam-caption {
    opacity: 1;
  }

  /* --- Bottom detail row (description + small images) --- */
  .feat-detail-row {
    display:     flex;        /* flex=shown | none=hidden */
    flex-direction: row;      /* row=side by side | column=stacked */
    gap:         16px;        /* gap between description column and images */
    align-items: flex-start;
    margin-top:  28px;        /* distance from top of row */
  }

  /* --- Description text container (in bottom row) --- */
  .feat-detail-text {
    flex:      1;             /* relative width */
    min-width: 0;
  }

  /* --- Description paragraph (in bottom row) --- */
  .feat-detail-text p {
    font-size:     13px;      /* font size */
    line-height:   1.65;      /* line spacing */
    color:         var(--text-mid);
    margin-bottom: 18px;      /* space below paragraph */
    margin-top:    0px;       /* space above paragraph */
  }

  /* --- VIEW THE WORK button (in bottom row) --- */
  .feat-detail-btn {
    font-size:   11px;        /* button font size */
    padding:     10px 18px;   /* button inner padding */
    margin-top:  0px;         /* distance from top of button */
  }

  /* --- Small images container (in bottom row) --- */
  .feat-detail-images {
    flex:           0 0 42%;  /* image column width */
    display:        flex;
    flex-direction: column;
    gap:            8px;      /* gap between the two small images */
  }

  /* --- Small images (in bottom row) --- */
  .feat-detail-images img {
    width:        100%;       /* width of each image */
    aspect-ratio: 4/3;        /* height-to-width ratio */
    object-fit:   cover;
    border-radius: 8px;       /* rounded corners */
  }

  /* --- Second small image — hidden --- */
  .feat-detail-images img:nth-child(2) {
    display: none; /* none=hidden | block=shown */
  }

  /* --- Featured section — Persian mobile (RTL) ---
     This block only applies in Persian mode. */

  /* --- Animation wrapper — opens overflow so letters aren't cut off --- */
  html[lang="fa"] #featured .has-animation {
    overflow: visible;
  }

  /* --- Main container — Persian mobile --- */
  html[lang="fa"] #featured {
    padding-top:    clamp(60px, 10vh, 100px);
    padding-bottom: clamp(60px, 10vh, 100px);
    padding-right:  clamp(16px, 4vw, 32px);  /* right (=start in RTL) */
    padding-left:   clamp(16px, 4vw, 32px);  /* left */
  }

  /* --- Layout — Persian mobile: heading on top, accordion below --- */
  html[lang="fa"] .feat-layout {
    flex-direction: column;
    gap:            10px;
  }

  /* --- Heading — Persian mobile: single line, centered --- */
  html[lang="fa"] .feat-title {
    font-size:      clamp(18px, 4.8vw, 28px);
    font-family:    var(--mob-ttl-font-fa);   /* ← from --mob-ttl-font-fa */
    line-height:    1.2;
    letter-spacing: 0em;
    word-spacing:   -0.05em;                  /* tighter spacing between words */
    padding-bottom: 0;
    overflow:       visible;
    margin-bottom:  0;
    margin-top:     0px;
    text-align:     center;                   /* centered */
    white-space:    nowrap;
  }
  html[lang="fa"] .feat-title span {
    display:     inline;
    white-space: nowrap;
  }

  /* --- Accordion — Persian mobile: full width --- */
  html[lang="fa"] .feat-accordion-mobile {
    width:  100%;
    order:  1;
  }

  /* --- Detail row — Persian mobile --- */
  html[lang="fa"] .feat-detail-row {
    display:        flex;
    flex-direction: row-reverse; /* Persian: reversed order */
    gap:            16px;
    margin-top:     28px;
  }

  /* --- Description paragraph — Persian mobile --- */
  html[lang="fa"] .feat-detail-text p {
    font-size:     13px;
    line-height:   1.75;      /* Persian needs more line-height */
    text-align:    right;
    margin-bottom: 18px;
  }

  .partners-text { flex-wrap: wrap; }
  .feat-sig-svg { width: clamp(300px, 88vw, 560px); }
  .feat-sig-outer { bottom: clamp(20px, 4vh, 60px); }

  .footer-nav { grid-template-columns: 1fr; }
  .footer-hero-center { display: none; }
  .footer-nav-right { align-items: flex-start; text-align: left; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  #text-reveal { min-height: auto; padding-bottom: 40px; }

  .wrapper {
    --card-width: 30vmin;
    --radius: 75vmin;
    margin-top: calc(var(--radius) - var(--card-width) * 1.5 - clamp(30px, 4vh, 50px));
    margin-bottom: clamp(40px, 8vmin, 80px);
  }
  .wrapper.fan-open { --arc-size: 0.46; }
  .social-follow-text { display: none; }
  .social-links { display: none; }
}

@media (max-width: 480px) {
  .reveal-headline { font-size: 38px; }
  .social-heading { font-size: 52px; }
  .footer-tagline { font-size: 28px; }
  html[lang="fa"] .footer-tagline { font-size: 26px; }
  .pg-header { text-align: center; }
  .pg-header h2 { font-size: 28px; white-space: nowrap; }
  html[lang="fa"] .pg-header h2 { font-size: 26px; }
}

/* --- Wave path --- */
.wave-path-wrap {
  position: relative;
  width: 70vw;
  height: 1px;
  margin: 24px 0 0;
  align-self: center;
  color: rgba(255,255,255,0.35);
}
.wave-path-hover {
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 10;
  cursor: ns-resize;
  transition: top 0.15s ease, height 0.15s ease;
}
.wave-path-wrap:hover .wave-path-hover {
  top: -150px;
  height: 300px;
}
.wave-path-svg {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 300px;
  overflow: visible;
}

/* --- Util --- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* --- Hero wave — main settings (edit here) --- */
:root {
  /* - Fonts - */
  --hw-font-en:        'DM Sans', sans-serif;   /* English font */
  --hw-font-fa:        'YekanBakh', sans-serif; /* Persian font */

  /* - English title - */
  --hw-title-en-size:  clamp(1.375rem, 5vw, 2.5rem); /* size */
  --hw-title-en-weight:600;                     /* weight */
  --hw-title-en-color: #ffffff;                 /* color */

  /* - Persian title - */
  --hw-title-fa-size:  clamp(1.375rem, 4.5vw, 2.625rem);
  --hw-title-fa-weight:700;
  --hw-title-fa-color: #ffffff;

  /* - English subtitle - */
  --hw-sub-en-size:    clamp(0.8125rem, 1.4vw, 1rem);
  --hw-sub-en-weight:  400;
  --hw-sub-en-color:   rgba(255,255,255,0.6);

  /* - Persian subtitle - */
  --hw-sub-fa-size:    clamp(0.75rem, 1.3vw, 0.9375rem);
  --hw-sub-fa-weight:  400;
  --hw-sub-fa-color:   rgba(255,255,255,0.6);

  /* - Textarea - */
  --hw-input-size-en:  0.875rem;
  --hw-input-size-fa:  0.875rem;
  --hw-input-color:    #ffffff;
}

/* --- Hero wave overlay --- */
.hero-wave-section { min-height: 60vh; }

.hero-wave-title {
  color:        var(--hw-title-en-color);
  font-size:    var(--hw-title-en-size);
  font-weight:  var(--hw-title-en-weight);
  font-family:  var(--hw-font-en);
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  text-shadow: 0 1px 1.5rem rgba(31,61,188,0.3);
}

.hero-wave-subtitle {
  color:       var(--hw-sub-en-color);
  font-size:   var(--hw-sub-en-size);
  font-weight: var(--hw-sub-en-weight);
  font-family: var(--hw-font-en);
  margin: 0 0 2rem;
}

.hero-wave-form { display: flex; justify-content: center; }

.hero-wave-input-wrap {
  position: relative;
  width: 100%;
  max-width: 45rem;
}

.hero-wave-input-border {
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04), rgba(0,0,0,0.2));
}

.hero-wave-textarea {
  width: 100%;
  height: 140px;
  resize: none;
  border-radius: 14px;
  background: rgba(15,15,20,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  padding: 16px 60px 16px 16px;
  outline: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.hero-wave-textarea::placeholder { color: rgba(255,255,255,0.35); }

.hero-wave-textarea:focus {
  border-color: rgba(31,61,188,0.5);
  box-shadow: 0 0 0 2px rgba(31,61,188,0.2);
}

.hero-wave-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f0f2ff;
  color: #111;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.hero-wave-btn:hover { background: #fff; }

.hero-wave-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

/* --- Hero wave — text settings (English and Persian) ---

   Main title (English)
   File: styles.css → .hero-wave-title
     font-size  : clamp(32px, 5vw, 56px)   ← size (min, preferred, max)
     font-weight: 600
     color      : #fff

   Subtitle (English)
   File: styles.css → .hero-wave-subtitle
     font-size  : clamp(13px, 1.4vw, 16px)
     color      : rgba(255,255,255,0.6) */

/* Persian — title */
html[lang="fa"] .hero-wave-title {
  font-size:   var(--hw-title-fa-size);
  font-weight: var(--hw-title-fa-weight);
  color:       var(--hw-title-fa-color);
  font-family: var(--hw-font-fa);
  letter-spacing: 0;
}

/* Persian — subtitle */
html[lang="fa"] .hero-wave-subtitle {
  font-size:   var(--hw-sub-fa-size);
  font-weight: var(--hw-sub-fa-weight);
  color:       var(--hw-sub-fa-color);
  font-family: var(--hw-font-fa);
}

/* Persian — textarea */
html[lang="fa"] .hero-wave-textarea {
  font-family: var(--hw-font-fa);
  font-size:   var(--hw-input-size-fa);
  direction: rtl;
  text-align: right;
}

/* --- About --- */
#about-section {
  padding: clamp(5rem, 12vw, 10rem) clamp(1.5rem, 6vw, 7.5rem);
  overflow: hidden;
}
.about-inner {
  max-width: 80rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.about-left { display: flex; flex-direction: column; gap: 2rem; }
.about-eyebrow {
  display: none;
}
.about-eyebrow-line { width: 2rem; height: 1px; background: var(--lime); }
.about-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 8vw, 6.875rem);
  line-height: 1;
  color: var(--text-dark);
  margin: 0;
  padding-bottom: 0.1em;
}
.about-heading span { color: var(--lime); }
.about-bio {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  line-height: 1.8;
  color: var(--text-mid);
  max-width: 30rem;
  margin: 0;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.about-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  color: var(--lime-dark);
  line-height: 1;
  margin: 0 0 0.25rem;
}
.about-stat-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
}
.about-right { position: relative; }
.about-img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
}
.about-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.about-img-badge {
  position: absolute;
  bottom: 1.5rem; left: 1.5rem;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(0.75rem);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius-md);
  padding: 0.875rem 1.25rem;
  display: flex; flex-direction: column; gap: 0.125rem;
}
.about-img-badge-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.125rem; color: var(--text-dark); letter-spacing: 0.05em;
}
.about-img-badge-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem; color: var(--text-light);
  letter-spacing: 0.1em; text-transform: uppercase;
}
#about-section .ab-fade {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
#about-section.ab-visible .ab-fade { opacity: 1; transform: translateY(0); }
#about-section.ab-visible .ab-fade:nth-child(2) { transition-delay: 0.1s; }
#about-section.ab-visible .ab-fade:nth-child(3) { transition-delay: 0.2s; }
#about-section.ab-visible .ab-fade:nth-child(4) { transition-delay: 0.3s; }
#about-section.ab-visible .about-right         { transition-delay: 0.15s; }
html[lang="fa"] .about-bio { font-family: 'YekanBakh', sans-serif; direction: rtl; text-align: right; color: var(--text-dark); }
html[lang="fa"] .about-eyebrow { flex-direction: row-reverse; font-family: 'YekanBakh', sans-serif; color: #000; }
html[lang="fa"] .about-stat-label { font-family: 'YekanBakh', sans-serif; letter-spacing: 0; color: #000; }
html[lang="fa"] .about-stat-num { font-family: 'YekanBakh', sans-serif; color: #000; }
/* --- About stats number position control ---
   Only the number shifts, the label text below stays fixed.
   padding-left = shifts right | padding-right = shifts left */
/* EN */
html:not([lang="fa"]) .about-stats > div:nth-child(1) .about-stat-num { padding-left: 1rem; }       /* EN +5   */
html:not([lang="fa"]) .about-stats > div:nth-child(2) .about-stat-num { padding-right: 0.875rem; }  /* EN +200 */
html:not([lang="fa"]) .about-stats > div:nth-child(3) .about-stat-num { padding-left: 1.125rem; }   /* EN 7    */
/* FA */
html[lang="fa"] .about-stats > div:nth-child(1) .about-stat-num { padding-right: 0px; }  /* FA 5+   */
html[lang="fa"] .about-stats > div:nth-child(2) .about-stat-num { padding-right: 0px; }  /* FA 200+ */
html[lang="fa"] .about-stats > div:nth-child(3) .about-stat-num { padding-right: 0px; }  /* FA 7    */
html[lang="fa"] .about-heading {
  color: #000;
  font-family: 'Morabba', sans-serif;
  font-size: clamp(2.75rem, 5.5vw, 4.75rem);
  line-height: 1.2;
}
html[lang="fa"] .about-left .has-animation {
  overflow: visible;
  padding-top: 0.15em;
}
/* All text in the About Me section — white color */
.about-bio { color: #ffffff !important; }
.about-eyebrow { color: rgba(255,255,255,0.6) !important; }
.about-stat-label { color: rgba(255,255,255,0.55) !important; }
.about-stat-num { color: var(--lime) !important; }
.about-heading { color: #ffffff !important; }
.about-heading span { color: var(--lime) !important; }
@media (max-width: 1023px) {
  .about-inner { grid-template-columns: 1fr; }
  .about-right { order: -1; }
  .about-img-wrap { aspect-ratio: 4/3; }
  .about-heading { font-size: clamp(3.25rem, 14vw, 5rem); }
}

/* --- Services --- */
#services-section {
  padding: clamp(5rem, 12vw, 10rem) clamp(1.5rem, 6vw, 7.5rem);
  overflow: hidden;
}
.sv-inner { max-width: 80rem; margin: 0 auto; }
.sv-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  gap: 1.5rem; flex-wrap: wrap;
}
.sv-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3.5rem, 7vw, 6rem);
  line-height: 0.9; color: #fff; margin: 0;
}
.sv-heading span { color: var(--lime-dark); }
.sv-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.8125rem, 1.2vw, 0.9375rem);
  color: #fff;
  max-width: none; line-height: 1.6; text-align: right; white-space: nowrap;
}
.sv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  gap: 0.125rem;
}
.sv-card {
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(198,241,53,0.35);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; gap: 1rem;
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
#services-section.sv-visible .sv-card { opacity: 1; transform: translateY(0); }
#services-section.sv-visible .sv-card:nth-child(1) { transition-delay: 0.00s; }
#services-section.sv-visible .sv-card:nth-child(2) { transition-delay: 0.08s; }
#services-section.sv-visible .sv-card:nth-child(3) { transition-delay: 0.16s; }
#services-section.sv-visible .sv-card:nth-child(4) { transition-delay: 0.24s; }
#services-section.sv-visible .sv-card:nth-child(5) { transition-delay: 0.32s; }
#services-section.sv-visible .sv-card:nth-child(6) { transition-delay: 0.40s; }
#services-section.sv-visible .sv-card:nth-child(7) { transition-delay: 0.48s; }
.sv-card-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 0.8125rem; color: #fff; letter-spacing: 0.15em;
}
.sv-card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  color: #fff; margin: 0; letter-spacing: 0.02em;
}
.sv-card-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem; line-height: 1.7;
  color: rgba(255,255,255,0.75); margin: 0;
  flex: 1;
}
.sv-card-tag {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lime-dark); background: rgba(168,209,24,0.12);
  border-radius: 0.25rem; padding: 0.1875rem 0.5rem; align-self: flex-start;
}
html[lang="fa"] .sv-card-title,
html[lang="fa"] .sv-card-desc { font-family: 'YekanBakh', sans-serif; direction: rtl; text-align: right; color: #fff; }
html[lang="fa"] .sv-sub { font-family: 'YekanBakh', sans-serif; direction: rtl; text-align: right; color: #fff; max-width: none; white-space: nowrap; }
html[lang="fa"] .sv-heading { font-family: 'YekanBakh', sans-serif; color: #fff; font-size: clamp(2.25rem, 4.5vw, 4rem); line-height: 1; padding-bottom: 0.15em; overflow: visible; }
html[lang="fa"] .sv-heading br { display: none; }
/* In Persian mode, the second line (English "I DO") is hidden because
   the whole phrase ("what I do") fits on the first line — one animation box */
html[lang="fa"] .sv-heading-en-only { display: none !important; }
html[lang="fa"] .sv-card-num { font-family: 'YekanBakh', sans-serif; color: #fff; }
@media (max-width: 1023px) {
  .sv-header { flex-direction: column; align-items: flex-start; }
  .sv-sub { text-align: left; max-width: 100%; white-space: normal; }
  /* The Persian rule above carries `nowrap` at a higher specificity than the
     reset on the line before, so the sentence ran off the side of the phone.
     The wrap has to be re-stated at matching specificity; the measure keeps it
     to three lines at phone widths. */
  html[lang="fa"] .sv-sub {
    white-space: normal;
    max-width: 100%;
    font-size: clamp(0.8125rem, 3.4vw, 0.9375rem);
    line-height: 1.85;
    text-wrap: pretty;
  }
  .sv-grid { grid-template-columns: 1fr; gap: 1px; }
  .sv-heading { font-size: clamp(36px, 10vw, 56px); }
  .sv-card { padding: 18px 16px; gap: 10px; }
  .sv-card-title { font-size: clamp(16px, 4.5vw, 22px); }
  .sv-card-desc { font-size: 12px; line-height: 1.6; }
  .sv-card-num { font-size: 11px; }
  .sv-card-tag { font-size: 9px; padding: 2px 6px; }
}

/* --- Pseudo-element text reveal (CodePen "Simple text reveal" pattern) ---
   Applied to inline-level span "lines" inside a headline. Two pseudo
   layers slide out left-to-right, revealing the text underneath.
   Each .pe-reveal element exposes --pe-bg (section bg) for the back
   layer and --pe-accent (default white) for the front layer.
   Animation starts only when .is-revealed is added (via IO in JS). */
.pe-reveal {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1.2;
  --pe-bg: var(--dark);
  --pe-accent: #ffffff;
  --pe-duration: 1.6s;
  --pe-delay: 0s;
  --pe-ease: cubic-bezier(.77,0,.18,1);
}
/* Block-level container — when a heading wraps multiple .pe-reveal spans */
h1.pe-reveal, h2.pe-reveal, h3.pe-reveal { display: block; }
/* Preserve original flex layout for #text-reveal lines */
#text-reveal .rv-line.pe-reveal { display: flex; }
/* English-only line must be fully hidden in Persian (overrides .pe-reveal display:flex) */
html[lang="fa"] #text-reveal .rv-line.rv-en-only.pe-reveal { display: none !important; }

.pe-reveal::before,
.pe-reveal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.pe-reveal::before {
  background: var(--pe-bg);
  transform: translateX(0);
}
.pe-reveal::after {
  background: var(--pe-accent);
  transform: translateX(-101%);
}
.pe-reveal.is-revealed::before {
  animation: pe-ltr-before var(--pe-duration) var(--pe-ease) forwards;
  animation-delay: var(--pe-delay);
}
.pe-reveal.is-revealed::after {
  animation: pe-ltr-after var(--pe-duration) var(--pe-ease) forwards;
  animation-delay: var(--pe-delay);
}
@keyframes pe-ltr-before {
  0%   { transform: translateX(0); }
  100% { transform: translateX(200%); }
}
@keyframes pe-ltr-after {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(101%); }
}

/* Split section: each line is its own block so wipe runs per-line */
.split-h { display: block; }
.split-h .pe-reveal { display: block; }
html[lang="fa"] .split-h .split-h-fa-hide { display: none; }

/* Per-section back-layer colors so the wipe matches each section bg */
#text-reveal       .pe-reveal { --pe-bg: var(--dark);     --pe-accent: var(--lime); }
#split-section     .pe-reveal { --pe-bg: var(--offwhite); --pe-accent: var(--lime); }
#projects-grid     .pe-reveal { --pe-bg: var(--offwhite); --pe-accent: var(--lime); }
#featured          .pe-reveal { --pe-bg: var(--offwhite); --pe-accent: var(--lime); }
#partners          .pe-reveal { --pe-bg: var(--offwhite); --pe-accent: var(--lime); }
#services-section  .pe-reveal { --pe-bg: var(--dark);     --pe-accent: var(--lime); }
#footer            .pe-reveal { --pe-bg: var(--dark);     --pe-accent: var(--lime); }

#split-section [data-en="you imagine"],
#split-section [data-en="i build"],
#featured [data-en="WORLD"],
#featured [data-en="CLASS"],
#featured [data-en="AUTOMATION"],
#partners [data-en="CLIENTS"],
#featured .feat-detail-text > p {
  color: var(--white);
}

/* Stagger lines within a heading: each subsequent span gets +0.18s delay */
.pe-reveal-line-1 { --pe-delay: 0.10s; }
.pe-reveal-line-2 { --pe-delay: 0.28s; }
.pe-reveal-line-3 { --pe-delay: 0.46s; }
.pe-reveal-line-4 { --pe-delay: 0.64s; }

/* Neutralize the older clip-path / wipe-bar reveal for headings we now
   drive via .pe-reveal — keeps lines visible at rest, lets pseudo do the work */
#text-reveal .rv-line { clip-path: none !important; }
.tr-wipe-bar { display: none; }
/* Disable the old .has-animation wipe + opacity gate when a pe-reveal
   host is inside, so pe-reveal runs cleanly without overlay rectangles. */
.has-animation:has(.pe-reveal-host) { overflow: visible !important; }
.has-animation:has(.pe-reveal-host) > h2,
.has-animation:has(.pe-reveal-host) > .feat-title { opacity: 1 !important; animation: none !important; }
.has-animation:has(.pe-reveal-host).animate-in::before,
.has-animation:has(.pe-reveal-host).animate-in::after { content: none !important; display: none !important; animation: none !important; }

/* --- Gallery-v2 caption — match marquee font (Bebas Neue) for English --- */
.gv2-cap-sub {
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 0.18em !important;
  font-size: clamp(13px, 1.1vw, 16px) !important;
}
.gv2-cap-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-style: normal !important;
  letter-spacing: 0.04em !important;
}
html[lang="fa"] .gv2-cap-title,
html[lang="fa"] .gv2-cap-sub { font-family: 'YekanBakh', sans-serif !important; letter-spacing: 0 !important; }

/* --- Split images — initial state and animation, both controlled by GSAP
   (CSS only handles will-change for performance) --- */
.split-img-left,
.split-img-right {
  will-change: transform;
}

/* --- Mobile tweaks — requested fixes --- */
@media (max-width: 1023px) {
  /* --- Remove the pe-reveal animation only in the FEATURED (WORLD CLASS WEB DESIGN) section --- */
  #featured .pe-reveal::before,
  #featured .pe-reveal::after {
    display: none !important;
    animation: none !important;
    content: none !important;
  }

  /* CLIENTS English headline gets cropped — scale down for mobile */
  .partners-text h2 { font-size: clamp(56px, 16vw, 96px); letter-spacing: 0.12em; white-space: nowrap; }
  html[lang="fa"] .partners-text h2 { font-size: clamp(48px, 14vw, 80px); white-space: normal; }

  /* WHAT I DO cards — smaller on mobile */
  #services-section .sv-card { padding: 14px 12px; gap: 6px; min-height: auto; }
  #services-section .sv-card-title { font-size: clamp(14px, 3.8vw, 18px); }
  #services-section .sv-card-desc  { font-size: 12px; line-height: 1.55; }
  #services-section .sv-card-num   { font-size: 12px; }
  #services-section .sv-card-tag   { font-size: 12px; padding: 2px 5px; }

  /* Testimonials — shrink the cards (image + text block) */
  #testimonials-section { padding: 48px 16px; }
  #testimonials-section .ct-wrap { max-width: 36rem; }
  #testimonials-section .ct-grid { gap: 1.5rem; }
  #testimonials-section .ct-images { max-width: 240px; margin: 0 auto; }
  #testimonials-section .ct-img { border-radius: 1rem; }
  #testimonials-section .ct-name  { font-size: 18px; }
  #testimonials-section .ct-desig { font-size: 12px; }
  #testimonials-section .ct-quote { font-size: 13px; line-height: 1.6; }
  #testimonials-section .ct-voice { padding: 8px 12px; margin-top: 1rem; border-radius: 14px; }
  #testimonials-section .ct-voice-btn { width: 34px; height: 34px; }
  #testimonials-section .ct-voice-btn svg { width: 13px; height: 13px; }
  #testimonials-section .ct-arrow { width: 2.2rem; height: 2.2rem; }
}

/* ─── Accessibility: honor reduced-motion preference ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  video[autoplay] { display: none; }
}

/* --- Services modal --- */

/* Service cards: indicate they are clickable */
.sv-card {
  cursor: pointer;
}
.sv-card:hover {
  border-color: rgba(198,241,53,0.7);
  background: rgba(198,241,53,0.04);
}

/* Modal shell — motion-engineer will add GSAP animation */
.services-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
}
.services-modal.is-open {
  pointer-events: all;
  visibility: visible;
}

.services-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0; /* animated in by motion-engineer */
  will-change: opacity;
}

.services-modal-glass {
  position: relative;
  width: min(32.5rem, 90vw);
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 1.5rem;
  background: rgba(26,34,16,0.72);
  backdrop-filter: blur(1.25rem) saturate(200%);
  -webkit-backdrop-filter: blur(1.25rem) saturate(200%);
  border: 1px solid rgba(198,241,53,0.22);
  padding: 2.5rem;
  box-shadow: 0 0.5rem 3rem rgba(0,0,0,0.4),
              inset 0 1px 0 rgba(198,241,53,0.08);
  opacity: 0;          /* animated in by motion-engineer */
  transform: scale(0.92); /* animated in by motion-engineer */
  will-change: transform, opacity, border-radius, backdrop-filter;
}

/* Reduced-motion: skip will-change so the browser doesn't allocate a layer */
@media (prefers-reduced-motion: reduce) {
  .services-modal-glass,
  .services-modal-backdrop {
    will-change: auto;
  }
}

.services-modal-close {
  position: absolute;
  top: 1rem;
  inset-inline-end: 1.2rem;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: rgba(255,255,255,0.55);
  line-height: 1;
  transition: color 0.2s;
}
.services-modal-close:hover { color: var(--lime); }

.services-modal-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: 0.03em;
  color: #fff;
  margin: 0 0 0.6rem;
}

.services-modal-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(0.88rem, 1.8vw, 0.98rem);
  color: rgba(255,255,255,0.68);
  margin: 0 0 1.6rem;
  line-height: 1.7;
}

.services-modal-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.services-modal-form input,
.services-modal-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(198,241,53,0.2);
  background: rgba(255,255,255,0.07);
  color: #fff;
  font-size: 0.95rem;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color 0.2s;
}
.services-modal-form input:focus,
.services-modal-form textarea:focus {
  border-color: rgba(198,241,53,0.55);
}
.services-modal-form input::placeholder,
.services-modal-form textarea::placeholder {
  color: rgba(255,255,255,0.62);
}
.services-modal-form textarea {
  resize: vertical;
}

.services-modal-submit {
  padding: 0.8rem 1.75rem;
  border-radius: var(--radius-sm, 8px);
  border: none;
  background: var(--lime, #C6F135);
  color: var(--dark, #1A2210);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  align-self: flex-start;
  transition: opacity 0.2s, background 0.2s;
}
.services-modal-submit:hover {
  background: var(--lime-dark, #a8d118);
}
.services-modal-submit:disabled {
  cursor: wait;
  opacity: 0.58;
}

.services-modal-status {
  min-height: 1.4em;
  color: rgba(255,255,255,0.78);
  font-size: 0.875rem;
  line-height: 1.5;
}
.services-modal-status[data-state="success"] { color: var(--lime); }
.services-modal-status[data-state="error"] { color: #ffb4ab; }

.sm-honeypot {
  position: absolute;
  inset-inline-start: -100vw;
  width: 1px !important;
  height: 1px !important;
  pointer-events: none;
}

/* Persian / RTL overrides */
html[lang="fa"] .services-modal-title,
html[lang="fa"] .services-modal-desc,
html[lang="fa"] .services-modal-form input,
html[lang="fa"] .services-modal-form textarea {
  font-family: 'YekanBakh', sans-serif;
  direction: rtl;
  text-align: right;
}
html[lang="fa"] .services-modal-submit {
  font-family: 'YekanBakh', sans-serif;
  align-self: flex-end;
}
html[lang="fa"] .services-modal-status {
  font-family: 'YekanBakh', sans-serif;
  direction: rtl;
  text-align: right;
}

@media (max-width: 480px) {
  .services-modal-glass {
    padding: 1.75rem 1.25rem;
    border-radius: var(--radius-md, 16px);
  }
  .services-modal-submit { align-self: stretch; text-align: center; }
  html[lang="fa"] .services-modal-submit { align-self: stretch; }
}

/* ── Contact method selector ───────────────────────────────────────── */
.sm-contact-group {
  display: flex;
  flex-direction: column;
}

.sm-contact-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(198,241,53,0.2);
  background: rgba(255,255,255,0.07);
  color: #fff;
  font-size: 0.95rem;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.45)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.5rem;
}
.sm-contact-select:focus { border-color: rgba(198,241,53,0.55); }
.sm-contact-select option { background: #1A2210; color: #fff; }

/* Collapsible contact value input */
.sm-contact-value-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.sm-contact-value-wrap.is-open {
  grid-template-rows: 1fr;
}
.sm-contact-value-wrap > * {
  overflow: hidden;
}
.sm-contact-value-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(198,241,53,0.2);
  background: rgba(255,255,255,0.07);
  color: #fff;
  font-size: 0.95rem;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color 0.2s;
  margin-top: 0.85rem;
}
.sm-contact-value-input:focus { border-color: rgba(198,241,53,0.55); }
.sm-contact-value-input::placeholder { color: rgba(255,255,255,0.62); }

/* RTL overrides for new elements */
html[lang="fa"] .sm-contact-select {
  font-family: 'YekanBakh', sans-serif;
  direction: rtl;
  text-align: right;
  background-position: left 0.9rem center;
  padding-right: 1rem;
  padding-left: 2.5rem;
}
html[lang="fa"] .sm-contact-value-input {
  font-family: 'YekanBakh', sans-serif;
  direction: rtl;
  text-align: right;
}


/* --- Folded inline styles (was index.html <style> blocks, M6) ---
   Order preserved — these are patch layers appended last so
   they keep winning the cascade exactly as they did inline. */

/* --- Screen-reader-only utility (was index.html head, tiny critical style) --- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

    /* ── Hero Vertical Navigation ── */
    #hero-vertical-nav {
      --hvn-shift: -100px; /* ← negative = higher | positive = lower | e.g.: -40px */
      position: fixed;
      left: 28px;
      right: auto;
      top: 50%;
      transform: translateY(calc(-50% + var(--hvn-shift)));
      z-index: 90;
      will-change: transform, opacity;
    }
    .hvn-list {
      list-style: none;
      margin: 0; padding: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 2px;
    }
    .hvn-item { position: relative; }
    .hvn-link, .hvn-btn {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 5px;
      padding: 13px 16px;
      width: 100%;
      box-sizing: border-box;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      color: rgba(0,0,0,0.75);
      background: none;
      border: none;
      cursor: pointer;
      border-radius: 999px;
      position: relative;
      white-space: nowrap;
      transition: color 0.2s ease;
      text-shadow: none;
    }
    .hvn-link:hover, .hvn-btn:hover { color: #000; }
    .hvn-link--ext { color: #3a5a10; }
    .hvn-link--ext:hover { color: #1a2e06; }
    .hvn-link--ext .hvn-pill { background: rgba(198,241,53,0.18); }
    .hvn-link--ext:hover .hvn-pill { background: rgba(198,241,53,0.35); opacity: 1; }
    .hvn-pill {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: rgba(0,0,0,0.07);
      opacity: 0;
      transition: opacity 0.2s ease;
      pointer-events: none;
    }
    .hvn-link:hover .hvn-pill,
    .hvn-btn:hover .hvn-pill,
    .hvn-item--open .hvn-btn .hvn-pill { opacity: 1; }
    .hvn-chevron { stroke: rgba(0,0,0,0.75); }
    .hvn-chevron {
      width: 13px; height: 13px;
      flex-shrink: 0;
      transition: transform 0.3s ease;
    }
    .hvn-item--open .hvn-chevron { transform: rotate(180deg); }

    /* Dropdown */
    .hvn-dropdown {
      position: absolute;
      left: calc(100% + 10px);
      right: auto;
      top: 0;
      background: rgba(12,12,12,0.93);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px;
      padding: 18px;
      display: flex;
      gap: 28px;
      opacity: 0;
      pointer-events: none;
      transform: translateX(8px);
      transition: opacity 0.22s ease, transform 0.22s ease;
      z-index: 1;
    }
    .hvn-item--open .hvn-dropdown {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(0);
    }
    .hvn-col { min-width: 130px; }
    .hvn-col-title {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.36);
      margin: 0 0 14px;
    }
    .hvn-sub-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
    .hvn-sub-link {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      text-decoration: none;
      padding: 5px 0;
    }
    .hvn-sub-icon {
      width: 34px; height: 34px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.1);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background 0.2s ease, border-color 0.2s ease;
    }
    .hvn-sub-icon svg { width: 15px; height: 15px; }
    .hvn-sub-link:hover .hvn-sub-icon {
      background: rgba(198,240,20,0.12);
      border-color: rgba(198,240,20,0.3);
    }
    .hvn-sub-link:hover .hvn-sub-icon svg { stroke: #C6F014 !important; }
    .hvn-sub-text { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
    .hvn-sub-text-name {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.8rem; font-weight: 500;
      color: rgba(255,255,255,0.88);
      margin: 0; white-space: nowrap;
    }
    .hvn-sub-text-desc {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.75rem;
      color: rgba(255,255,255,0.36);
      margin: 0; white-space: nowrap;
      transition: color 0.2s ease;
    }
    .hvn-sub-link:hover .hvn-sub-text-desc { color: rgba(255,255,255,0.6); }

    /* FA: right side of page + YekanBakh */
    html[lang="fa"] #hero-vertical-nav {
      left: auto;
      right: 28px;
      font-family: 'YekanBakh', sans-serif;
    }
    html[lang="fa"] .hvn-link,
    html[lang="fa"] .hvn-btn {
      font-family: 'YekanBakh', sans-serif;
      letter-spacing: 0;
      text-transform: none;
    }
    html[lang="fa"] .hvn-col-title,
    html[lang="fa"] .hvn-sub-text-name,
    html[lang="fa"] .hvn-sub-text-desc {
      font-family: 'YekanBakh', sans-serif;
      letter-spacing: 0;
    }
    html[lang="fa"] .hvn-dropdown {
      left: auto;
      right: calc(100% + 10px);
    }

    @media (max-width: 1023px) {
      #hero-vertical-nav { left: 10px; right: auto; }
      .hvn-link, .hvn-btn { font-size: 0.75rem; padding: 12px 12px; }
      .hvn-dropdown {
        left: 0;
        right: auto;
        top: calc(100% + 6px);
        flex-direction: column;
        gap: 14px;
        padding: 14px;
        min-width: 210px;
      }
      .hvn-col { min-width: auto; }
      .hvn-sub-text-desc { display: none; }
      html[lang="fa"] #hero-vertical-nav { right: 10px; left: auto; }
    }

    /* ── Circular Testimonials – structural styles only ── */
    #testimonials-section { width: 100%; padding: 80px 20px; }
    .ct-wrap  { width: 100%; max-width: 56rem; margin: 0 auto; }
    .ct-grid  { display: grid; gap: 3rem; }
    @media (min-width: 1024px) { .ct-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
    .ct-images {
      position: relative;
      width: 100%;
      perspective: 1000px;
      /* height is set by JS CONFIG */
    }
    .ct-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 1.5rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.35);
      transition: all 0.8s cubic-bezier(.4,2,.3,1);
    }
    .ct-content { display: flex; flex-direction: column; }
    .ct-name  { margin: 0 0 0.25rem; }
    .ct-desig { margin: 0 0 1.25rem; }
    .ct-quote { line-height: 1.75; margin: 0; }

    /* ── Voice Player (Telegram Style) ─────────────────────────── */
    .ct-voice {
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 20px;
      padding: 12px 16px;
      margin-top: 1.5rem;
      user-select: none;
      position: relative;
      overflow: hidden;
    }
    .ct-voice::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(198,241,53,0);
      transition: background 0.3s;
      pointer-events: none;
    }
    .ct-voice.is-playing::before { background: rgba(198,241,53,0.03); }
    .ct-voice-btn {
      width: 42px; height: 42px;
      border-radius: 50%;
      background: var(--lime);
      border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      color: #111;
      transition: transform 0.15s, background 0.2s;
    }
    .ct-voice-btn:hover { transform: scale(1.08); background: var(--lime-dark); }
    .ct-voice-btn svg { width: 16px; height: 16px; }
    .ct-voice-play  { display: block; }
    .ct-voice-pause { display: none; }
    .ct-voice.is-playing .ct-voice-play  { display: none; }
    .ct-voice.is-playing .ct-voice-pause { display: block; }
    .ct-voice-waveform {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 3px;
      height: 28px;
      cursor: pointer;
    }
    .ct-vw-bar {
      flex: 1;
      border-radius: 2px;
      background: rgba(255,255,255,0.2);
      transition: background 0.1s, height 0.08s;
      min-width: 3px;
    }
    .ct-vw-bar.played { background: var(--lime); }
    @keyframes ct-bar-pulse {
      0%, 100% { transform: scaleY(1); }
      50%       { transform: scaleY(1.6); }
    }
    .ct-voice.is-playing .ct-vw-bar.playing-now {
      animation: ct-bar-pulse 0.5s ease-in-out infinite;
    }
    .ct-voice-info {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
      flex-shrink: 0;
    }
    .ct-voice-time {
      font-size: 0.75rem;
      color: rgba(255,255,255,0.45);
      font-variant-numeric: tabular-nums;
      min-width: 32px;
      text-align: right;
      font-family: monospace;
    }
    .ct-voice-label {
      font-size: 0.75rem;
      color: rgba(198,241,53,0.5);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      text-align: right;
    }
    .ct-voice-no-src { opacity: 0.35; pointer-events: none; }

    .ct-arrows {
      display: flex;
      gap: 1.5rem;
      /* marginTop & alignSelf are set by JS CONFIG */
    }
    .ct-arrow {
      width: 2.7rem;
      height: 2.7rem;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s;
      flex-shrink: 0;
    }
    @keyframes ct-word-in {
      from { filter: blur(10px); opacity: 0; transform: translateY(5px); }
      to   { filter: blur(0);    opacity: 1; transform: translateY(0);   }
    }
    @keyframes ct-fade-up {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0);    }
    }

    /* --- Interactive selector (feat-img replacement) ---
       Component font — only change these two lines:
       --is-font-en  :  English font
       --is-font-fa  :  Persian font */
    :root {
      --is-font-en: 'DM Sans', sans-serif;
      --is-font-fa: 'yekanbakh', sans-serif;
    }
    .is-wrap {
      position: absolute; inset: 0;
      background: #222;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      font-family: var(--is-font-en); color: white;
      padding: 20px 12px 12px; box-sizing: border-box;
    }
    html[lang="fa"] .is-wrap { font-family: var(--is-font-fa); }
    .is-header { width: 100%; text-align: center; margin-bottom: 6px; }
    .is-title {
      font-size: clamp(14px, 2.2vw, 28px);
      font-weight: 800; color: white;
      margin: 0 0 5px; letter-spacing: -0.5px;
    }
    .is-subtitle {
      font-size: clamp(12px, 1vw, 13px);
      color: rgba(255,255,255,0.65); margin: 0;
    }
    .is-options {
      display: flex; width: 100%; flex: 1;
      min-height: 0; overflow: hidden; position: relative;
    }
    .is-option {
      flex: 1; position: relative;
      display: flex; flex-direction: column; justify-content: flex-end;
      overflow: hidden; cursor: pointer;
      background-size: auto 120%; background-position: center;
      border: 2px solid #292929;
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
      transition: flex .7s ease-in-out, border-color .3s, box-shadow .7s ease-in-out, background-size .7s ease-in-out;
      opacity: 0; transform: translateX(-60px);
      min-width: 0; will-change: flex;
    }
    .is-option.is-anim {
      opacity: 1; transform: translateX(0);
      transition: flex .7s ease-in-out, border-color .3s, box-shadow .7s ease-in-out, background-size .7s ease-in-out, opacity .5s ease, transform .5s ease;
    }
    .is-option.is-active {
      flex: 7; border-color: #fff;
      background-size: auto 100%;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    }
    .is-shadow {
      position: absolute; left: 0; right: 0; height: 120px;
      pointer-events: none;
      transition: bottom .7s ease-in-out, box-shadow .7s ease-in-out;
    }
    .is-option.is-active .is-shadow {
      bottom: 0;
      box-shadow: inset 0 -120px 120px -120px #000, inset 0 -120px 120px -80px #000;
    }
    .is-option:not(.is-active) .is-shadow {
      bottom: -40px;
      box-shadow: inset 0 -120px 0px -120px #000, inset 0 -120px 0px -80px #000;
    }
    .is-label {
      position: absolute; left: 0; right: 0; bottom: 10px;
      display: flex; align-items: center;
      padding: 0 8px; gap: 7px; z-index: 2; pointer-events: none;
    }
    .is-icon {
      min-width: 36px; max-width: 36px; height: 36px; border-radius: 50%;
      background: rgba(32,32,32,0.85); backdrop-filter: blur(10px);
      border: 2px solid #444;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .is-icon svg { width: 15px; height: 15px; }
    .is-info { overflow: hidden; }
    .is-info-main {
      font-weight: 700; font-size: 13px; white-space: nowrap;
      transition: opacity .7s ease, transform .7s ease;
    }
    .is-info-sub {
      font-size: 12px; color: rgba(200,200,200,0.85); white-space: nowrap;
      transition: opacity .7s ease, transform .7s ease;
    }
    .is-option.is-active .is-info-main,
    .is-option.is-active .is-info-sub  { opacity: 1; transform: translateX(0); }
    .is-option:not(.is-active) .is-info-main,
    .is-option:not(.is-active) .is-info-sub { opacity: 0; transform: translateX(25px); }
    @keyframes is-fade-top {
      from { opacity: 0; transform: translateY(-18px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .is-title-anim    { opacity: 0; animation: is-fade-top .8s ease forwards .3s; }
    .is-subtitle-anim { opacity: 0; animation: is-fade-top .8s ease forwards .6s; }

/* --- Reduced motion (audit L6) ---
   Neutralize CSS-driven animations + transitions. JS motion has a
   matching guard in js/main.js that snaps hidden content to its final
   visible state. Rules below cover the CSS animations that hide content
   in their base state (`.mz-letter`, `.pe-reveal::before/::after`,
   `.is-title-anim`, `.is-subtitle-anim`, `.has-animation > h2`) so
   nothing stays parked at opacity 0 when the animation is disabled. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  /* Snap-to-end for elements whose CSS base state is intentionally hidden
     and only becomes visible via animation. */
  .mz-letter { opacity: 1 !important; transform: none !important; }
  .is-title-anim,
  .is-subtitle-anim,
  .is-option { opacity: 1 !important; transform: none !important; }
  .has-animation > h2,
  .has-animation > .feat-title { opacity: 1 !important; }
  /* pe-reveal keeps text hidden behind a solid ::before cover until the
     wipe animation runs. Hide the covers so text is immediately readable. */
  .pe-reveal::before,
  .pe-reveal::after { display: none !important; }
}

/* --- Minimum touch targets ---
   These controls are deliberately small: shrinking the nav or the icon
   buttons is part of the layout. Resizing them would reflow the hero nav, so
   each instead gets a centred, invisible ::after that grows the hit area to
   44x44 without touching flow, paint, or the element's own box.
   .vm-close and .hero-wave-btn are already positioned; the rest need a
   containing block, and .hvn-link/.hvn-btn already set position:relative for
   their .hvn-pill, so this only formalises what they rely on. */
.hvn-btn, .hvn-link, .hvn-sub-link, .mb-dropdown-item,
.ct-voice-btn, .ct-arrow { position: relative; }

.hvn-btn::after, .hvn-link::after, .hvn-sub-link::after,
.mb-dropdown-item::after, .ct-voice-btn::after, .ct-arrow::after,
.vm-close::after, .hero-wave-btn::after, .menu-bar-link::after,
.logo-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
  pointer-events: auto;
}

@media (max-width: 1023px) {
  /* The social bar's labels were 6px — unreadable, and at any legible size
     three labelled chips overflow a 375px viewport. On phones the icons carry
     the meaning and the label stays in the accessibility tree only. */
  .menu-bar-face span {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .menu-bar-face {
    gap: 0;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
  }
}

/* --- Hero call to action ---
   The hero had no labelled conversion path: the only controls in the first
   screen were the social chips and the vertical nav, so the one thing a
   visitor is meant to do had no button. Lime on dark makes it the highest
   contrast element in the frame. */
.hero-cta {
  position: absolute;
  bottom: clamp(24px, 4vh, 48px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.875rem 1.625rem;
  min-height: 44px;
  box-sizing: border-box;
  background: var(--lime);
  color: var(--dark);
  border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.hero-cta svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.hero-cta:hover {
  background: #d4f95a;
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
}
.hero-cta:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }

@media (max-width: 1023px) {
  /* Sits lower and reads lighter than on desktop — the info card is hidden at
     this width, so the bottom of the frame is the CTA's alone. The pill keeps
     its 44px height whatever the type does: that is the touch target, not a
     look. Only the width and the weight of the label come down. */
  .hero-cta {
    bottom: 14px;
    gap: 8px;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    padding: 0.625rem 1.125rem;
  }
  .hero-cta svg { width: 0.875rem; height: 0.875rem; }
}

/* The three display lines were carrying their tuning as inline style, which
   outranks every narrow-width rule below and left the heading spilling off a
   phone. Same values, desktop only, so the narrow layout's own ramp applies. */
@media (min-width: 1024px) {
  .feat-title .pe-reveal-line-1 {
    font-size: 7.625rem;
    letter-spacing: 5.625rem;
    translate: 0rem 2.1875rem;
  }
  .feat-title .pe-reveal-line-2 {
    letter-spacing: 5rem;
    translate: 0rem 3.375rem;
  }
  .feat-title .pe-reveal-line-3 {
    font-size: 9.375rem;
    letter-spacing: 0.28125rem;
    translate: 0rem 3.875rem;
  }
}