/* ------------------------------------------------------------
   BADBAN brand fonts (client-supplied)
   فارسی: IRANSans — بولد برای تیترها، مدیوم برای متن
   English: Posterama — display · Mj New — body
------------------------------------------------------------ */
@font-face {
  font-family: 'IRANSans';
  src: url('../assets/fonts/iransans-fa-bold.ttf') format('truetype');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IRANSans';
  src: url('../assets/fonts/iransans-fa-medium.ttf') format('truetype');
  font-weight: 100 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Posterama';
  src: url('../assets/fonts/posterama-bold.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mj New';
  src: url('../assets/fonts/mj-new-bold.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* this file draws ASCII digits as Arabic-Indic shapes (3D -> ٣D); limit it to Arabic script so Latin digits use the normal fallback */
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
/* ------------------------------------------------------------
   2. TOKENS — Design System Variables
------------------------------------------------------------ */
:root {
  /* Brand colors — exact values from Brand Book */
  --color-primary: #026e81;
  --color-secondary: #599297;
  --color-light: #81b3b2;
  --color-accent: #e8a613;

  /* Supporting surface & text colors derived from brand hue */
  --color-ink: #04262d;
  --color-ink-2: #03333d;
  --color-background: #f4f1e9;
  --color-surface: #fbf9f4;
  --color-tint: #ebe6d9;
  --color-text: #0a2a31;
  --color-muted: #5d6f71;
  --color-border: rgba(10, 42, 49, 0.14);
  --color-white: #ffffff;
  --color-paper: #f4f1e9;
  --color-error: #b3402a;

  /* Typography — brand fonts per language
     fa: IRANSans (Bold=display, Medium=body) · en: Posterama (display) + Mj New (body) */
  --font-en: 'Posterama', 'Futura', 'Century Gothic', 'Avenir Next', 'Segoe UI', sans-serif;
  --font-en-body: 'Mj New', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-fa: 'IRANSans', 'Segoe UI', Tahoma, sans-serif;
  --font-body: var(--font-en-body);
  --font-display: var(--font-en);
  /* numerals & section labels follow the active language */
  --font-num: var(--font-en);

  --fs-hero: clamp(2.6rem, 9.2vw, 8.6rem);
  --fs-h1: clamp(2.4rem, 6.4vw, 5.4rem);
  --fs-h2: clamp(1.9rem, 4.4vw, 3.6rem);
  --fs-h3: clamp(1.3rem, 2.4vw, 1.9rem);
  --fs-statement: clamp(1.45rem, 3.1vw, 2.6rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.82rem;
  --fs-tiny: 0.7rem;

  /* Layout */
  --container: 1360px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section: clamp(4.5rem, 10vw, 9.5rem);
  --header-h: 84px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.77, 0, 0.18, 1);
  --dur-fast: 0.28s;
  --dur: 0.6s;
  --dur-slow: 1.1s;
}

/* Language-specific typography routing */
:root[lang='en'] { --font-body: var(--font-en-body); --font-display: var(--font-en); --font-num: var(--font-en); }
:root[lang='fa'] { --font-body: var(--font-fa);  --font-display: var(--font-fa);  --font-num: var(--font-fa);  }
/* nested language fragments take their own script's font too
   (e.g. the فارسی choice on the language gate) */
[lang='fa'] { --font-body: var(--font-fa); --font-display: var(--font-fa); --font-num: var(--font-fa); }
[lang='en'] { --font-body: var(--font-en-body); --font-display: var(--font-en); --font-num: var(--font-en); }
/* ------------------------------------------------------------
   3. RESET & BASE
------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden; /* never let stray content widen the page on phones */
}
body {
  min-height: 100vh;
  line-height: 1.65;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul[class], ol[class] { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; overflow-wrap: break-word; }
p, li { overflow-wrap: break-word; }
::selection { background: var(--color-accent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; }
.skip-link {
  position: fixed; inset-inline-start: 1rem; top: -4rem; z-index: 2000;
  background: var(--color-ink); color: var(--color-white);
  padding: 0.7rem 1.2rem; font-size: var(--fs-small); font-weight: 700;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { top: 1rem; }

/* JS availability — loader & reveals only activate with JS */
.no-js .loader, .no-js [data-reveal] { display: none !important; }
/* ------------------------------------------------------------
   4. LAYOUT UTILITIES
------------------------------------------------------------ */
.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}
.section { padding-block: var(--section); position: relative; }
.section--tint { background: var(--color-tint); }
.section--dark { background: var(--color-ink); color: var(--color-paper); }
.section--dark .eyebrow { color: var(--color-light); }

/* ------------------------------------------------------------
   5. SECTION HEADERS, EYEBROWS, HEADINGS
------------------------------------------------------------ */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.section-head__title { max-width: 14em; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: '';
  width: 2.6rem;
  height: 2px;
  background: var(--color-accent);
  flex: none;
}
.eyebrow__index { opacity: 0.55; }
[dir='rtl'] .eyebrow { letter-spacing: 0; }
.h-lg { font-size: var(--fs-h2); line-height: 1.1; }
.h-md { font-size: var(--fs-h3); line-height: 1.25; }
[dir='rtl'] .h-hero, [dir='rtl'] .h-xl, [dir='rtl'] .h-lg { letter-spacing: 0; line-height: 1.22; }

.statement { font-family: var(--font-display); font-size: var(--fs-statement); font-weight: 700; line-height: 1.3; }

/* ------------------------------------------------------------
   6. BUTTONS & LINKS
------------------------------------------------------------ */
.btn {
  --btn-bg: var(--color-ink);
  --btn-fg: var(--color-paper);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.9rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--btn-bg);
  overflow: hidden;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  isolation: isolate;
}
[dir='rtl'] .btn { letter-spacing: 0; }
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease-inout);
  z-index: -1;
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--color-ink); border-color: var(--color-accent); }
.btn--small { padding: 0.62rem 1.15rem; font-size: var(--fs-tiny); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  position: relative;
  padding-block-end: 0.35rem;
}
[dir='rtl'] .link-arrow { letter-spacing: 0; }
.link-arrow::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0.35);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-inout);
}
[dir='rtl'] .link-arrow::after { transform-origin: right center; }
.link-arrow:hover::after, .link-arrow:focus-visible::after { transform: scaleX(1); }
.link-arrow .arr { transition: transform var(--dur) var(--ease-out); }
[dir='rtl'] .link-arrow .arr { display: inline-block; transform: scaleX(-1); }
.link-arrow:hover .arr { transform: translateX(5px); }
[dir='rtl'] .link-arrow:hover .arr { transform: scaleX(-1) translateX(5px); }

.tag {
  display: inline-block;
  font-size: var(--fs-tiny);
  letter-spacing: 0.08em;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 99px;
  color: var(--color-muted);
  background: var(--color-surface);
}
[dir='rtl'] .tag { letter-spacing: 0; }

/* ------------------------------------------------------------
   7. SCROLL REVEAL SYSTEM (IntersectionObserver adds .is-inview)
------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-inview { opacity: 1; transform: none; }
/* ------------------------------------------------------------
   8. LOADING SCREEN — brand experience
------------------------------------------------------------ */
body.is-loading { overflow: hidden; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2.6rem;
  background: var(--color-ink);
  color: var(--color-paper);
  transition: transform 1s var(--ease-inout), opacity 0.7s var(--ease-out);
}
.loader.is-exiting { transform: translateY(-101%); }
.loader.is-done { display: none; }
/* decorative field */
.loader::before, .loader::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(129, 179, 178, 0.16);
}
.loader::before { width: 44vmin; height: 44vmin; }
.loader::after {
  width: 66vmin; height: 66vmin;
  border-color: rgba(129, 179, 178, 0.09);
}

.loader__track {
  width: min(320px, 62vw);
  height: 2px;
  background: rgba(244, 241, 233, 0.16);
  overflow: hidden;
  position: relative;
}
.loader__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
}
[dir='rtl'] .loader__bar { transform-origin: right center; }

.loader__hud {
  position: absolute;
  inset-inline: clamp(1.4rem, 4vw, 3rem);
  inset-block-end: clamp(1.4rem, 4vw, 2.4rem);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: var(--fs-tiny);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-light);
}
[dir='rtl'] .loader__hud { letter-spacing: 0; }
.loader__percent {
  font-family: var(--font-num);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--color-paper);
  letter-spacing: 0.04em;
}
/* ------------------------------------------------------------
   9. CUSTOM CURSOR (desktop, motion-safe)
------------------------------------------------------------ */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 9500;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--color-accent);
}
.cursor-ring {
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid rgba(2, 110, 129, 0.65);
  transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out),
              margin 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.cursor-ring.is-hot {
  width: 62px; height: 62px;
  margin: -31px 0 0 -31px;
  border-color: var(--color-accent);
}

/* ------------------------------------------------------------
   10. HEADER & NAVIGATION
------------------------------------------------------------ */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--color-paper);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(244, 241, 233, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--color-text);
  box-shadow: 0 1px 0 var(--color-border);
}
/* The primary nav stays pinned at the top on every page — the header is
   never translated away on scroll (only its surface turns to glass). */

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* brand lockup — pure typographic wordmark (no image file) */
.brand { display: inline-flex; align-items: center; }
.wordmark {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: 0.3em;
  color: currentColor;
}

.nav { display: flex; gap: clamp(1.4rem, 2.6vw, 2.6rem); }
.nav__link {
  position: relative;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-block: 0.4rem;
}
[dir='rtl'] .nav__link { letter-spacing: 0; }
.nav__link::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-inout);
}
[dir='rtl'] .nav__link::after { transform-origin: right center; }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 1.1rem; }

.lang-switch {
  display: inline-flex;
  border: 1px solid currentColor;
  border-radius: 99px;
  overflow: hidden;
}
.lang-switch a {
  padding: 0.42rem 0.85rem;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lang-switch a.is-active { background: var(--color-accent); color: var(--color-ink); }
.site-header:not(.is-scrolled) .lang-switch a.is-active { color: var(--color-ink); }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  position: relative;
  border: 1px solid currentColor;
  border-radius: 99px;
}
.burger span {
  position: absolute;
  inset-inline: 11px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease-inout), top var(--dur) var(--ease-inout);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 25px; }
.burger.is-active span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger.is-active span:nth-child(2) { top: 21px; transform: rotate(-45deg); }
/* ------------------------------------------------------------
   10b. MOBILE MENU OVERLAY
------------------------------------------------------------ */
body.menu-locked { overflow: hidden; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--color-ink);
  color: var(--color-paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 1rem) var(--gutter) 3rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out), visibility 0s linear 0.45s;
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.45s var(--ease-out);
}
.mobile-menu__links { display: grid; gap: 0.4rem; }
.mobile-menu__links a {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  font-weight: 700;
  line-height: 1.15;
  display: inline-flex;
  align-items: baseline;
  gap: 1rem;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.mobile-menu.is-open .mobile-menu__links a { opacity: 1; transform: none; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(1) { transition-delay: 0.08s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(2) { transition-delay: 0.14s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(4) { transition-delay: 0.26s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(5) { transition-delay: 0.32s; }
.mobile-menu__links a span { font-size: var(--fs-tiny); color: var(--color-accent); }
.mobile-menu__foot {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  color: var(--color-light);
  font-size: var(--fs-small);
}
.mobile-menu__foot a:hover { color: var(--color-paper); }

/* ------------------------------------------------------------
   11. HERO — home
------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--color-ink);
  color: var(--color-paper);
  padding-block: calc(var(--header-h) + 2rem) 0;
  overflow: clip;
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__ring {
  position: absolute;
  inset-inline-end: -12vw;
  inset-block-start: 8vh;
  width: 52vw;
  height: 52vw;
  max-width: 760px;
  max-height: 760px;
  border: 1px solid rgba(129, 179, 178, 0.22);
  border-radius: 50%;
}
.hero__ring::after {
  content: '';
  position: absolute;
  inset-block-start: 12%;
  inset-inline-start: 16%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
}
.hero__inner { position: relative; }

.hero__eyebrow {
  font-size: var(--fs-tiny);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-light);
  margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
}
[dir='rtl'] .hero__eyebrow { letter-spacing: 0; }

.line-mask { display: block; overflow: hidden; }
.hero__line, .hero__eyebrow-line {
  display: block;
  transform: translateY(115%);
  transition: transform 1.1s var(--ease-inout);
}
body.is-loaded .hero__line, body.is-loaded .hero__eyebrow-line { transform: translateY(0); }
body.is-loaded .line-mask:nth-of-type(1) .hero__line { transition-delay: 0.05s; }
body.is-loaded .hero__eyebrow-line { transition-delay: 0s; }
.hero__title .line-mask:nth-of-type(1) .hero__line { transition-delay: 0.1s; }
.hero__title .line-mask:nth-of-type(2) .hero__line { transition-delay: 0.22s; }
.hero__title .line-mask:nth-of-type(3) .hero__line { transition-delay: 0.34s; }

.hero__title {
  font-size: var(--fs-hero);
  line-height: 1.0;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
[dir='rtl'] .hero__title { letter-spacing: 0; text-transform: none; line-height: 1.22; }

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(2.2rem, 4vw, 3.6rem) clamp(1.4rem, 2.4vw, 2rem);
  border-top: 1px solid rgba(244, 241, 233, 0.16);
  margin-top: clamp(2rem, 4vw, 3.4rem);
}
.hero__lead { max-width: calc(44 * 0.52em); color: var(--color-light); font-size: var(--fs-lead); opacity: 0; transition: opacity 1s var(--ease-out) 0.7s; }
body.is-loaded .hero__lead { opacity: 1; }
/* ------------------------------------------------------------
   12. MARQUEE STRIP
------------------------------------------------------------ */
.marquee {
  background: var(--color-accent);
  color: var(--color-ink);
  overflow: hidden;
  padding-block: 1.1rem;
  border-block: 1px solid rgba(4, 38, 45, 0.18);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeMove 30s linear infinite;
}
/* An RTL flex track is anchored to the RIGHT edge and overflows to the left,
   so it has to travel in the +X direction to stay covering the bar.
   Flipping the direction instead (animation-direction: reverse) walked the
   strip leftwards and tore a blank gap out of its right edge. The mirrored
   keyframes below keep the whole strip inside the viewport, and the loop
   still lands on a copy boundary because the tiling count stays even. */
[dir='rtl'] .marquee__track { animation-name: marqueeMoveRtl; }
@keyframes marqueeMoveRtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding-inline-end: 2.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
[dir='rtl'] .marquee__group { letter-spacing: 0; }
.marquee__group span::after {
  content: '·';
  margin-inline-start: 2.4rem;
  color: rgba(4, 38, 45, 0.55);
}
@keyframes marqueeMove {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------------
   13. INTRO — editorial statement
------------------------------------------------------------ */
.intro__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.intro__statement { grid-column: 1 / span 8; }
.intro__side { grid-column: 9 / span 4; display: grid; gap: 1.6rem; justify-items: start; }
.intro__side p { color: var(--color-muted); }

.pillars {
  margin-top: clamp(3rem, 6vw, 5.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.pillars li {
  border-top: 2px solid var(--color-ink);
  padding-top: 1.4rem;
  display: grid;
  gap: 0.5rem;
}
.pillars li span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
}
.pillars li p { color: var(--color-muted); font-size: 0.95rem; }

/* ------------------------------------------------------------
   14. SERVICES — interactive hover-reveal list
------------------------------------------------------------ */
.svc-list { border-top: 1px solid var(--color-border); }
.svc-item { border-bottom: 1px solid var(--color-border); position: relative; }
.svc-item__link {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto 3.5rem;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(0.5rem, 1.5vw, 1.5rem);
  position: relative;
  isolation: isolate;
}
.svc-item__link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform var(--dur) var(--ease-inout);
  z-index: -1;
}
.svc-item:hover .svc-item__link::before,
.svc-item__link:focus-visible::before { transform: scaleY(1); }

.svc-item__index {
  font-family: var(--font-num);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--color-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.svc-item__title {
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  font-weight: 700;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out);
}
.svc-item__tags {
  font-size: var(--fs-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
[dir='rtl'] .svc-item__tags { letter-spacing: 0; }
.svc-item__arrow {
  font-size: 1.5rem;
  justify-self: end;
  transition: transform var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
[dir='rtl'] .svc-item__arrow { display: inline-block; transform: scaleX(-1); }

.svc-item:hover .svc-item__title,
.svc-item__link:focus-visible .svc-item__title { color: var(--color-white); transform: translateX(0.4rem); }
[dir='rtl'] .svc-item:hover .svc-item__title { transform: translateX(-0.4rem); }
.svc-item:hover .svc-item__index,
.svc-item:hover .svc-item__tags { color: var(--color-light); }
.svc-item:hover .svc-item__arrow { color: var(--color-accent); transform: translateX(4px); }
[dir='rtl'] .svc-item:hover .svc-item__arrow { transform: scaleX(-1) translateX(4px); }

/* expanding description row */
.svc-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease-inout);
  grid-column: 2 / -1;
}
.svc-item__body > span {
  overflow: hidden;
  color: var(--color-paper);
  max-width: calc(52 * 0.52em);
  font-size: 0.98rem;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.svc-item:hover .svc-item__body, .svc-item__link:focus-visible .svc-item__body { grid-template-rows: 1fr; }
.svc-item:hover .svc-item__body > span, .svc-item__link:focus-visible .svc-item__body > span { opacity: 1; padding-block-end: 0.4rem; }

/* (body expands beneath the row it belongs to — see markup) */
/* ------------------------------------------------------------
   15. WORK — asymmetric editorial grid & abstract brand tiles
   Real photos: /assets/img/work/<slug>.jpg — if present, the
   image covers the tile automatically (img[data-optional-img]).
------------------------------------------------------------ */
/* The grid pairs tiles by the shape of their real photo, so every
   uploaded image fills its tile edge-to-edge with no crop and no
   stretch: portraits sit beside portraits, wide shots beside wide.
   Row 1: retail-takeover (3:4) + mall-activation (3:4)
   Row 2: national-roadshow (wide) + exhibition-stand (4:3)
   Row 3: product-launch (1:1) + street-campaign (4:3)            */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.4rem, 3vw, 2.8rem) clamp(1.2rem, 2.4vw, 2.4rem);
}
.work-tile { display: block; }
.work-tile--a { grid-column: 1 / span 6; }
.work-tile--b { grid-column: 7 / span 6; margin-top: clamp(2.5rem, 6vw, 6rem); }
.work-tile--c { grid-column: 1 / span 7; }
.work-tile--d { grid-column: 8 / span 5; margin-top: clamp(1rem, 2vw, 2.5rem); }
.work-tile--e { grid-column: 1 / span 6; }
.work-tile--f { grid-column: 7 / span 6; margin-top: clamp(2rem, 5vw, 5rem); }
.work-tile--g { grid-column: 1 / -1; margin-top: clamp(2rem, 5vw, 4rem); }

/* aspect ratio of every tile = aspect ratio of its own photo */
.work-tile__visual {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
}
.work-tile--a .work-tile__visual { aspect-ratio: 3 / 4; }
.work-tile--b .work-tile__visual { aspect-ratio: 1104 / 1425; }
.work-tile--c .work-tile__visual { aspect-ratio: 1280 / 670; }
.work-tile--d .work-tile__visual { aspect-ratio: 1582 / 1163; }
.work-tile--e .work-tile__visual { aspect-ratio: 1 / 1; }
.work-tile--f .work-tile__visual { aspect-ratio: 4 / 3; }
.work-tile--g .work-tile__visual { aspect-ratio: 1280 / 720; }

/* abstract brand art — layered gradients (replaced by real photos) */
.work-tile__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--art-bg, var(--color-primary));
  transition: transform var(--dur-slow) var(--ease-out);
}
.work-tile__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 38, 45, 0) 55%, rgba(4, 38, 45, 0.38) 100%),
    var(--art-pattern, none);
  transition: transform var(--dur-slow) var(--ease-out);
}
.work-tile:hover .work-tile__visual::before { transform: scale(1.05); }
.work-tile:hover .work-tile__visual::after { transform: scale(1.05); }

.work-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.work-tile:hover .work-tile__img { transform: scale(1.05); }

.art-1 { --art-bg: linear-gradient(135deg, #026e81 0%, #03333d 100%); --art-pattern: repeating-linear-gradient(90deg, rgba(244,241,233,0.09) 0 2px, transparent 2px 64px); }
.art-2 { --art-bg: linear-gradient(160deg, #599297 0%, #026e81 90%); --art-pattern: repeating-linear-gradient(0deg, rgba(244,241,233,0.10) 0 2px, transparent 2px 52px); }
.art-3 { --art-bg: radial-gradient(120% 120% at 20% 10%, #e8a613 -40%, #026e81 55%); --art-pattern: repeating-linear-gradient(45deg, rgba(244,241,233,0.07) 0 2px, transparent 2px 46px); }
.art-4 { --art-bg: linear-gradient(200deg, #03333d 10%, #026e81 85%); --art-pattern: repeating-linear-gradient(-45deg, rgba(232,166,19,0.16) 0 3px, transparent 3px 58px); }
.art-5 { --art-bg: radial-gradient(140% 120% at 85% 15%, #81b3b2 -25%, #023741 70%); --art-pattern: repeating-linear-gradient(90deg, rgba(232,166,19,0.13) 0 2px, transparent 2px 84px); }
.art-6 { --art-bg: linear-gradient(120deg, #026e81 30%, #599297 100%); --art-pattern: repeating-linear-gradient(0deg, rgba(4,38,45,0.22) 0 3px, transparent 3px 72px); }

.work-tile__num {
  position: absolute;
  inset-block-start: 6%;
  inset-inline-end: 5%;
  font-family: var(--font-num);
  font-size: clamp(4rem, 9vw, 7.5rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(244, 241, 233, 0.4);
  transition: -webkit-text-stroke-color var(--dur) var(--ease-out);
}
[dir='rtl'] .work-tile__num { -webkit-text-stroke-color: rgba(244, 241, 233, 0.4); }
.work-tile:hover .work-tile__num { -webkit-text-stroke-color: var(--color-accent); }

.work-tile__view {
  position: absolute;
  inset-block-end: 8%;
  inset-inline-start: 6%;
  padding: 0.55rem 1.1rem;
  background: var(--color-accent);
  color: var(--color-ink);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: translateY(160%);
  transition: transform var(--dur) var(--ease-out);
}
[dir='rtl'] .work-tile__view { letter-spacing: 0; }
.work-tile:hover .work-tile__view, .work-tile:focus-visible .work-tile__view { transform: translateY(0); }

.work-tile__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.4rem;
  padding-top: 1.1rem;
}
.work-tile__title { font-size: var(--fs-h3); }
.work-tile:hover .work-tile__title { color: var(--color-primary); }
.work-tile__meta {
  font-size: var(--fs-tiny);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
[dir='rtl'] .work-tile__meta { letter-spacing: 0; }
/* ------------------------------------------------------------
   Persian tiles: the brand name leads large, the project type sits
   small underneath it. The LTR layout keeps its original side-by-side
   caption, so the English cards stay exactly as they are.
------------------------------------------------------------ */
[dir='rtl'] .work-tile__caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  align-content: start;
  justify-content: start;
  justify-items: start;
  gap: 0.4rem;
}
[dir='rtl'] .work-tile__title { font-size: clamp(1.6rem, 3vw, 2.6rem); text-transform: uppercase; letter-spacing: 0.02em; }
[dir='rtl'] .work-tile__meta { font-size: var(--fs-small); }
/* ------------------------------------------------------------
   16. APPROACH — philosophy band
------------------------------------------------------------ */
.approach__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
.approach__statement { grid-column: 1 / span 7; }
.approach__side { grid-column: 9 / span 4; color: var(--color-light); display: grid; gap: 1.6rem; align-content: end; justify-items: start; }
.approach__items {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  /* auto-fit keeps the row full whether the page carries three
     principles (fa) or four (en) — no orphan column */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.approach__item { border-top: 1px solid rgba(244, 241, 233, 0.22); padding-top: 1.4rem; display: grid; gap: 0.6rem; }
.approach__item i {
  font-style: normal;
  font-family: var(--font-num);
  font-weight: 700;
  color: var(--color-accent);
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
}
.approach__item h3 { font-size: var(--fs-h3); }
.approach__item p { color: var(--color-light); font-size: 0.95rem; }

/* ------------------------------------------------------------
   18. CLIENTS — logo marquee
------------------------------------------------------------ */
.clients__strip {
  position: relative;
  margin-top: clamp(2.4rem, 5vw, 4rem);
  padding-block: clamp(1.7rem, 3.4vw, 2.8rem);
  overflow: hidden;
  background: var(--color-paper);
  border-block: 1px solid var(--color-hairline);
  /* fade the strip into the page at both ends so logos appear and
     dissolve instead of being cut off by a hard edge */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.clients__strip .marquee__track { animation-duration: var(--strip-dur, 42s); }
.clients__strip:hover .marquee__track { animation-play-state: paused; }
.logo-strip__group {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 1.5rem);
  padding-inline-end: clamp(0.9rem, 1.8vw, 1.5rem);
}
/* Each logo gets a card whose backdrop matches its own tone: pale artwork
   sits on the deep sea panel, dark artwork on paper. Without that, the
   white marks disappear into the page and only reappear on hover. */
.logo-tile {
  /* every card is blue: dark artwork on ice blue, pale artwork on sea blue */
  --tile-bg: linear-gradient(155deg, #eaf5f6 0%, #cbe5ea 100%);
  --tile-border: rgba(2, 110, 129, 0.22);
  --tile-shadow: 0 2px 10px rgba(4, 38, 45, 0.08);
  display: grid;
  place-items: center;
  flex: none;
  height: clamp(78px, 9vw, 108px);
  padding: clamp(0.65rem, 1.3vw, 1.05rem) clamp(0.95rem, 1.9vw, 1.6rem);
  border-radius: 16px;
  background: var(--tile-bg);
  border: 1px solid var(--tile-border);
  box-shadow: var(--tile-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition:
    transform 0.5s var(--ease-out-expo),
    box-shadow 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out);
}
.logo-tile[data-tone='light'] {
  --tile-bg: linear-gradient(155deg, #0c4250 0%, #04262d 100%);
  --tile-border: rgba(129, 179, 178, 0.32);
  --tile-shadow: 0 4px 18px rgba(4, 38, 45, 0.28), inset 0 1px 0 rgba(244, 241, 233, 0.12);
}
.logo-tile:hover {
  transform: translateY(-7px) scale(1.035);
  border-color: var(--color-accent);
  box-shadow:
    0 16px 34px rgba(4, 38, 45, 0.24),
    0 0 0 4px rgba(232, 166, 19, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.logo-tile[data-tone='light']:hover {
  box-shadow:
    0 16px 34px rgba(4, 38, 45, 0.4),
    0 0 0 4px rgba(232, 166, 19, 0.22),
    inset 0 1px 0 rgba(244, 241, 233, 0.16);
}
.logo-strip__item {
  display: block;
  flex: none;
  height: clamp(32px, 4.2vw, 50px);
  width: auto;
  max-width: clamp(112px, 16vw, 210px);
  object-fit: contain;
  transition: transform 0.5s var(--ease-out-expo);
}
.logo-tile:hover .logo-strip__item { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .clients__strip { -webkit-mask-image: none; mask-image: none; }
  .clients__strip .marquee__track { animation: none; }
}

/* --- clients: supporting line + live brand count --- */
.clients__lead {
  margin-top: 1.1rem;
  max-width: calc(46 * 0.52em);
  color: var(--color-muted);
  font-size: var(--fs-lead);
}
.clients__count {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.35rem 0.85rem 1.1rem;
  border: 1px solid var(--color-hairline);
  border-radius: 999px;
  background: var(--color-paper);
  box-shadow: 0 2px 12px rgba(4, 38, 45, 0.06);
}
.clients__count-num {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.clients__count-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--color-muted);
}
@media (max-width: 940px) {
  .clients__count { align-self: flex-start; }
}

/* ------------------------------------------------------------
   19. CLOSING CTA — the last impression
   Live availability dot, oversized headline, two clear actions.
------------------------------------------------------------ */
.cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-light);
}
.cta__pulse {
  position: relative;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(232, 166, 19, 0.16);
}
.cta__pulse::after {
  content: '';
  position: absolute;
  inset: -0.3rem;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  animation: ctaPulse 2.6s var(--ease-out) infinite;
}
@keyframes ctaPulse {
  0%        { transform: scale(0.7); opacity: 0.85; }
  70%, 100% { transform: scale(2.1); opacity: 0; }
}
.cta__title {
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: calc(15 * 0.52em);
  margin-block: 0.4rem 0.2rem;
}
.cta__note {
  color: rgba(255, 255, 255, 0.78);
  max-width: calc(44 * 0.52em);
  font-size: var(--fs-lead);
}
.cta__foot {
  margin-top: 0.6rem;
  font-size: var(--fs-tiny);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(129, 179, 178, 0.7);
}
[dir='rtl'] .cta__eyebrow,
[dir='rtl'] .cta__foot { letter-spacing: 0; }
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.7rem;
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.7rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    box-shadow 0.35s var(--ease-out),
    background 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out),
    color 0.35s var(--ease-out),
    transform 0.35s var(--ease-out-expo);
}
.cta-btn--solid {
  background: var(--color-accent);
  color: var(--color-ink);
  box-shadow: 0 12px 30px rgba(232, 166, 19, 0.3);
}
.cta-btn--solid:hover {
  background: #f3b62b;
  box-shadow: 0 20px 44px rgba(232, 166, 19, 0.42);
}
.cta-btn--line {
  border: 1px solid rgba(244, 241, 233, 0.32);
  color: var(--color-paper);
}
.cta-btn--line:hover {
  border-color: var(--color-paper);
  background: rgba(244, 241, 233, 0.08);
  color: var(--color-white);
}
.cta-btn__arrow { transition: transform var(--dur) var(--ease-out-expo); }
.cta-btn--solid:hover .cta-btn__arrow { transform: translateX(0.3em); }
.cta-btn--line:hover .cta-btn__arrow { transform: translateX(0.3em); }
[dir='rtl'] .cta-btn__arrow { transform: scaleX(-1); }
[dir='rtl'] .btn--solid:hover .btn__arrow,
[dir='rtl'] .cta-btn--line:hover .cta-btn__arrow { transform: scaleX(-1) translateX(0.3em); }
[dir='rtl'] .cta-btn { letter-spacing: 0; }

@media (max-width: 640px) {
  .cta__title { font-size: clamp(2.1rem, 11vw, 3.2rem); }
  .cta__actions { width: 100%; }
  .cta-btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cta__pulse::after { animation: none; }
}

/* ============================================================
   20. DEEP POLISH — clients strip + closing CTA
   Staggered tile entrance, cursor light, hover sheen, aurora
   backdrop, gold accent word, contact channels.
============================================================ */

/* --- clients strip: per-tile entrance light + pointer glow --- */
.clients__strip { --mx: 50%; --my: 50%; }
.clients__strip::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(340px circle at var(--mx) var(--my), rgba(2, 110, 129, 0.1), transparent 65%);
  transition: opacity 0.6s var(--ease-out);
}
.clients__strip.is-lit::before { opacity: 1; }

.logo-tile { position: relative; overflow: hidden; }
.logo-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, 0.32) 50%, transparent 66%);
  transform: translateX(-120%);
}
.logo-tile:hover::after {
  opacity: 1;
  animation: tileSheen 0.9s var(--ease-out);
}
@keyframes tileSheen {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}
.logo-tile .logo-strip__item { position: relative; z-index: 1; }

/* tiles rise in sequence the first time the strip is seen */
.clients__strip.is-inview .logo-tile {
  animation: logoTileIn 0.7s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 42ms);
}
@keyframes logoTileIn {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 940px) {
  .clients__strip.is-inview .logo-tile { animation: none; }
}

/* --- closing CTA: aurora backdrop + accent word + channels --- */
.cta { isolation: isolate; contain: paint; } /* keeps the drifting aurora from widening the page on phones */
.cta::before,
.cta .cta__aurora {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.cta::before {
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(129, 179, 178, 0.05) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(129, 179, 178, 0.05) 0 1px, transparent 1px 120px);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 75%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 75%);
}
.cta .cta__aurora {
  inset-block-start: -25%;
  inset-inline-start: -15%;
  width: 75vw;
  height: 75vw;
  max-width: 1100px;
  max-height: 1100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(89, 146, 151, 0.4) 0%, rgba(2, 110, 129, 0.18) 42%, transparent 68%);
  filter: blur(6px);
  animation: ctaDrift 22s ease-in-out infinite alternate;
}
.cta .cta__aurora--b {
  inset-block-start: auto;
  inset-block-end: -35%;
  inset-inline-start: auto;
  inset-inline-end: -20%;
  width: 62vw;
  height: 62vw;
  max-width: 860px;
  max-height: 860px;
  background: radial-gradient(circle, rgba(232, 166, 19, 0.15) 0%, rgba(232, 166, 19, 0.05) 45%, transparent 68%);
  animation-duration: 28s;
  animation-direction: alternate-reverse;
}
@keyframes ctaDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6%, 4%, 0) scale(1.08); }
}

.cta__accent,
/* splitText() wraps each word in its own transformed span, so the gold
   gradient has to live on those spans too — a gradient painted on the
   parent would stay put while the words animate out of it */
.cta__accent .split-word {
  background: linear-gradient(100deg, #f3b62b 0%, var(--color-accent) 42%, #f7cf6a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.cta__inner { z-index: 1; }

.cta__channels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(244, 241, 233, 0.14);
  list-style: none;
}
.cta__channels a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 241, 233, 0.62);
  transition: color var(--dur-fast) var(--ease-out), transform 0.4s var(--ease-out-expo);
}
.cta__channels svg { width: 1.05rem; height: 1.05rem; flex: none; }
.cta__channels a:hover { color: var(--color-accent); transform: translateY(-2px); }
[dir='rtl'] .cta__channels { letter-spacing: 0; }

@media (max-width: 640px) {
  .cta__channels { gap: 0.7rem 1.2rem; }
  .cta .cta__aurora { inset-inline-start: -35%; }
}
@media (prefers-reduced-motion: reduce) {
  .cta .cta__aurora { animation: none; }
  .logo-tile:hover::after { animation: none; }
}
19. CTA — final call
------------------------------------------------------------ */
.cta { background: var(--color-primary); color: var(--color-white); padding-block: clamp(4.5rem, 9vw, 8.5rem); position: relative; overflow: clip; }
.cta::after {
  content: '';
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -8%;
  width: 46vw;
  height: 46vw;
  max-width: 640px;
  max-height: 640px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  pointer-events: none;
}
.cta__inner { position: relative; display: grid; gap: 1.8rem; justify-items: start; }
.cta__eyebrow { color: var(--color-light); font-size: var(--fs-tiny); letter-spacing: 0.2em; text-transform: uppercase; }
[dir='rtl'] .cta__eyebrow { letter-spacing: 0; }
.cta__link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 5rem);
  line-height: 1.06;
  max-width: calc(18 * 0.52em);
  display: inline-flex;
  align-items: baseline;
  gap: 1.2rem;
  transition: color var(--dur-fast) var(--ease-out);
}
[dir='rtl'] .cta__link { line-height: 1.3; }
.cta__link .cta__arrow {
  font-size: 0.6em;
  color: var(--color-accent);
  transition: transform var(--dur) var(--ease-out);
  display: inline-block;
}
[dir='rtl'] .cta__link .cta__arrow { transform: scaleX(-1); }
.cta__link:hover { color: var(--color-accent); }
.cta__link:hover .cta__arrow { transform: translateX(0.4em); }
[dir='rtl'] .cta__link:hover .cta__arrow { transform: scaleX(-1) translateX(0.4em); }
.cta__note { color: rgba(255, 255, 255, 0.75); max-width: calc(52 * 0.52em); }
/* ------------------------------------------------------------
   20. FOOTER
------------------------------------------------------------ */
.site-footer {
  background: var(--color-ink);
  color: var(--color-paper);
  padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1.2fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(244, 241, 233, 0.14);
}
.footer__tag { color: var(--color-light); max-width: calc(30 * 0.52em); margin-top: 1.4rem; }
.footer__title {
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 1.2rem;
}
[dir='rtl'] .footer__title { letter-spacing: 0; }
.footer__col ul { display: grid; gap: 0.7rem; }
.footer__col a { color: var(--color-paper); opacity: 0.85; transition: opacity var(--dur-fast), color var(--dur-fast); }
.footer__col a:hover { opacity: 1; color: var(--color-accent); }
.footer__address { color: var(--color-light); font-style: normal; margin-top: 0.9rem; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.8rem;
  color: var(--color-light);
  font-size: var(--fs-tiny);
  letter-spacing: 0.08em;
}
.to-top { display: inline-flex; gap: 0.5rem; transition: color var(--dur-fast); }
.to-top:hover { color: var(--color-accent); }

/* ------------------------------------------------------------
   21. PAGE HERO — sub-pages
------------------------------------------------------------ */
.page-hero {
  background: var(--color-ink);
  color: var(--color-paper);
  padding-block: calc(var(--header-h) + clamp(3rem, 8vw, 7rem)) clamp(3.5rem, 7vw, 6.5rem);
  position: relative;
  overflow: clip;
}
.page-hero__eyebrow { color: var(--color-light); font-size: var(--fs-tiny); letter-spacing: 0.22em; text-transform: uppercase; display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.6rem; }
.page-hero__eyebrow::before { content: ''; width: 2.6rem; height: 2px; background: var(--color-accent); }
[dir='rtl'] .page-hero__eyebrow { letter-spacing: 0; }
.page-hero__title { font-size: var(--fs-h1); letter-spacing: -0.01em; max-width: 12em; }
[dir='rtl'] .page-hero__title { letter-spacing: 0; }
.page-hero__lead { color: var(--color-light); max-width: calc(54 * 0.52em); margin-top: 1.8rem; font-size: var(--fs-lead); }
.page-hero__crumb { position: absolute; inset-block-end: 1.6rem; inset-inline-start: 0; color: rgba(129,179,178,0.6); font-size: var(--fs-tiny); letter-spacing: 0.14em; text-transform: uppercase; }
[dir='rtl'] .page-hero__crumb { letter-spacing: 0; }

/* ------------------------------------------------------------
   22. ABOUT PAGE
------------------------------------------------------------ */
.manifesto { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.manifesto__text { grid-column: 2 / span 9; display: grid; gap: 1.6rem; }
.manifesto__text p { color: var(--color-muted); font-size: var(--fs-lead); }
.manifesto__text p strong { color: var(--color-text); }

.about-band { background: var(--color-primary); color: var(--color-white); padding-block: clamp(3.5rem, 8vw, 7rem); position: relative; overflow: clip; }
.about-band__inner { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; align-items: center; }
.about-band__num {
  grid-column: 1 / span 5;
  font-family: var(--font-en);
  font-size: clamp(6rem, 16vw, 14rem);
  font-weight: 700;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.5);
}
.about-band__text { grid-column: 7 / span 6; display: grid; gap: 1.4rem; }
.about-band__text h2 { font-size: var(--fs-h2); }
.about-band__text p { color: rgba(255, 255, 255, 0.82); }

.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.principle { border-top: 2px solid var(--color-ink); padding-top: 1.6rem; display: grid; gap: 0.9rem; }
.principle i { font-style: normal; font-family: var(--font-num); font-weight: 700; color: var(--color-primary); font-size: var(--fs-small); letter-spacing: 0.14em; }
.principle h3 { font-size: var(--fs-h3); }
.principle p { color: var(--color-muted); }

/* ------------------------------------------------------------
   23. SERVICES PAGE — detailed blocks
------------------------------------------------------------ */
.svc-block {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--color-border);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.svc-block__index {
  grid-column: 1 / span 2;
  font-family: var(--font-num);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-primary);
  line-height: 1;
}
.svc-block__main { grid-column: 3 / span 7; display: grid; gap: 1.3rem; align-content: start; }
.svc-block__main p { color: var(--color-muted); max-width: calc(58 * 0.52em); }
.svc-block__kicker { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; color: var(--color-primary); }
.svc-list { display: grid; gap: 0.7rem; margin-top: 0.4rem; }
.svc-list__title { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text); }
[dir='rtl'] .svc-list__title { letter-spacing: 0; }
.svc-list ul { display: grid; gap: 0.5rem; }
.svc-list li { position: relative; padding-inline-start: 1.15rem; color: var(--color-muted); }
.svc-list li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 0.62em; width: 6px; height: 6px; background: var(--color-primary); }
.svc-block__main .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.svc-block__visual { grid-column: 10 / span 3; min-height: 220px; position: relative; }
.svc-block__visual .tile-art { position: absolute; inset: 0; }
.tile-art { position: relative; overflow: hidden; }
.tile-art::before { content: ''; position: absolute; inset: 0; background: var(--art-bg, var(--color-primary)); }
.tile-art::after { content: ''; position: absolute; inset: 0; background: var(--art-pattern, none); }
/* ------------------------------------------------------------
   24. CASE STUDY — project.html
------------------------------------------------------------ */
.case-hero { padding-block: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)) clamp(2.5rem, 5vw, 4.5rem); }
.case-hero__cat { color: var(--color-accent); font-size: var(--fs-tiny); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.2rem; }
[dir='rtl'] .case-hero__cat { letter-spacing: 0; }
.case-hero__title { font-size: var(--fs-h1); max-width: 12em; }
[dir='rtl'] .case-hero__title { line-height: 1.2; }
.case-hero__intro { color: var(--color-light); max-width: calc(58 * 0.52em); margin-top: 1.6rem; font-size: var(--fs-lead); }
      /* the hero band takes the shape of the real photo — js/loading
         sets --case-ar from its natural size, so nothing is cropped */
      .case-hero__visual { aspect-ratio: var(--case-ar, 16 / 10); }
      /* portrait photos get a centred column instead of a full-width band */
      .case-hero__visual[data-fit='portrait'] {
        width: min(100%, 640px);
        margin-inline: auto;
      }

.case-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding-block: 2.2rem;
  border-block: 1px solid var(--color-border);
  margin-block: clamp(2.5rem, 5vw, 4rem);
}
.case-meta dt {
  font-size: var(--fs-tiny);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}
[dir='rtl'] .case-meta dt { letter-spacing: 0; }
.case-meta dd { font-weight: 700; }
.case-meta dd ul { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.case-section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--color-border);
  /* container behavior (inner wrapper is display:contents) */
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}
.case-section__head { grid-column: 1 / span 3; display: grid; gap: 0.8rem; align-content: start; }
.case-section__head i { font-style: normal; font-family: var(--font-num); font-weight: 700; color: var(--color-primary); letter-spacing: 0.14em; font-size: var(--fs-small); }
.case-section__head h2 { font-size: var(--fs-h2); }
.case-section__body { grid-column: 4 / span 8; max-width: calc(62 * 0.52em); font-size: var(--fs-lead); color: var(--color-muted); }

.case-steps { display: grid; gap: 2rem; }
.case-step { border-top: 1px solid var(--color-border); padding-top: 1.3rem; display: grid; gap: 0.6rem; }
.case-step p { color: var(--color-muted); max-width: calc(62 * 0.52em); }

.case-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  margin-block: clamp(2rem, 4vw, 3.5rem);
}
.case-gallery .tile-art { aspect-ratio: 4 / 3; }
.case-gallery .tile-art:nth-child(1) { grid-column: 1 / span 8; aspect-ratio: 16 / 9; }
.case-gallery .tile-art:nth-child(2) { grid-column: 9 / span 4; }
.case-gallery .tile-art:nth-child(3) { grid-column: 1 / span 4; }
.case-gallery .tile-art:nth-child(4) { grid-column: 5 / span 8; aspect-ratio: 16 / 9; }
.case-outcome { background: var(--color-ink); color: var(--color-paper); padding-block: clamp(3rem, 6vw, 5.5rem); }
.case-outcome .eyebrow { color: var(--color-light); }
.case-outcome__text { max-width: calc(60 * 0.52em); font-size: var(--fs-lead); color: var(--color-light); margin-bottom: 2.6rem; }
.case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.stat { border-top: 2px solid var(--color-accent); padding-top: 1.2rem; display: grid; gap: 0.4rem; }
.stat__value { font-family: var(--font-num); font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 700; line-height: 1; }
.stat__label { color: var(--color-light); font-size: var(--fs-small); }

.case-next { padding-block: clamp(3.5rem, 7vw, 6rem); }
.case-next__link { display: block; }
.case-next__label { font-size: var(--fs-tiny); letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-muted); display: block; margin-bottom: 1rem; }
[dir='rtl'] .case-next__label { letter-spacing: 0; }
.case-next__title { font-size: var(--fs-h1); transition: color var(--dur-fast); }
.case-next__link:hover .case-next__title { color: var(--color-primary); }
.case-next__cat { color: var(--color-muted); margin-top: 0.8rem; display: block; }

/* ------------------------------------------------------------
   25. CONTACT PAGE & FORM
------------------------------------------------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.form-status, .form-success, .form-fallback { padding: 1.1rem 1.3rem; font-size: 0.95rem; margin-bottom: 1.5rem; }
.form-success { background: rgba(2, 110, 129, 0.1); border: 1px solid var(--color-primary); color: var(--color-primary); }
.form-fallback { background: rgba(179, 64, 42, 0.08); border: 1px solid var(--color-error); color: var(--color-error); }
.form-fallback a { font-weight: 700; text-decoration: underline; }

.field { display: grid; gap: 0.45rem; position: relative; }
.field label { font-size: var(--fs-tiny); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
[dir='rtl'] .field label { letter-spacing: 0; }
.field input, .field textarea, .field select {
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--color-border);
  padding: 0.8rem 0.1rem;
  transition: border-color var(--dur-fast) var(--ease-out);
  width: 100%;
  border-radius: 0;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-bottom-color: var(--color-primary);
}
.field.has-error input, .field.has-error textarea { border-bottom-color: var(--color-error); }
.field__error { font-size: var(--fs-tiny); color: var(--color-error); min-height: 1.1em; }
.form-rows { display: grid; gap: 1.6rem; }
.form-rows--2 { grid-template-columns: 1fr 1fr; }
.hp-field { position: absolute; inset-inline-start: -9999px; opacity: 0; height: 0; overflow: hidden; }

.contact-aside { display: grid; gap: 2rem; align-content: start; }
.contact-aside__block { border-top: 2px solid var(--color-ink); padding-top: 1.3rem; display: grid; gap: 0.5rem; }
.contact-aside__block h2 { font-size: var(--fs-tiny); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-muted); }
[dir='rtl'] .contact-aside__block h2 { letter-spacing: 0; }
.contact-aside__block a { font-size: var(--fs-h3); font-family: var(--font-display); font-weight: 700; color: var(--color-primary); }
.contact-aside__block a:hover { color: var(--color-accent); }
.contact-aside__block p { color: var(--color-muted); }
.contact-aside__social { display: flex; gap: 1.4rem; font-size: var(--fs-small); font-weight: 700; }
.contact-aside__social a { font-family: var(--font-body); color: var(--color-text); }
.contact-aside__social a:hover { color: var(--color-primary); }
/* ------------------------------------------------------------
   26. LANGUAGE GATE — root index.html
------------------------------------------------------------ */
.gate {
  min-height: 100svh;
  background: var(--color-ink);
  color: var(--color-paper);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
}
.gate__brand { display: grid; place-items: center; gap: 1.2rem; padding-block: 2rem; }
.gate__brand .wordmark { display: block; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: 0.4em; text-indent: 0.4em; }

.gate__tag { color: var(--color-light); font-size: var(--fs-small); letter-spacing: 0.2em; text-transform: uppercase; text-align: center; }

.gate__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 900px);
  margin-inline: auto;
  border: 1px solid rgba(129, 179, 178, 0.3);
}
.gate__choice {
  padding: clamp(2.2rem, 6vw, 4.5rem) 1rem;
  display: grid;
  gap: 0.8rem;
  justify-items: center;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.gate__choice strong { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 700; }
.gate__choice small { color: var(--color-light); font-size: var(--fs-tiny); letter-spacing: 0.18em; text-transform: uppercase; }
.gate__choice:hover, .gate__choice:focus-visible { background: var(--color-primary); color: var(--color-white); }
.gate__choice:hover small { color: rgba(255, 255, 255, 0.75); }

.gate__note { text-align: center; color: rgba(129, 179, 178, 0.7); font-size: var(--fs-tiny); letter-spacing: 0.12em; min-height: 1.2em; }
body.is-loaded .gate__choices, body.is-loaded .gate__note { animation: gateUp 0.9s var(--ease-out) 0.15s both; }
@keyframes gateUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   27. RTL / LTR DIRECTION ADJUSTMENTS
------------------------------------------------------------ */
[dir='rtl'] body { line-height: 1.8; }
[dir='rtl'] .lead, [dir='rtl'] .hero__lead { line-height: 1.9; }
[dir='rtl'] .svc-item__link { grid-template-columns: 3.5rem 1fr auto 4.5rem; }
[dir='rtl'] .manifesto__text { grid-column: 2 / span 9; }

/* ------------------------------------------------------------
   28. REDUCED MOTION
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .loader { transition: none; }
  .loader.is-exiting { transform: none; opacity: 0; }
  .marquee__track { animation: none; }
  .hero__line, .hero__eyebrow-line { transform: none; transition: none; }
  .hero__lead { opacity: 1; transition: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .cursor-dot, .cursor-ring { display: none; }
}
/* ------------------------------------------------------------
   29. RESPONSIVE — tablet & below
------------------------------------------------------------ */
@media (max-width: 1100px) {
  .intro__statement { grid-column: 1 / span 12; }
  .intro__side { grid-column: 1 / span 8; }
  .approach__statement { grid-column: 1 / span 12; }
  .approach__side { grid-column: 1 / span 8; }
  .svc-block__main { grid-column: 3 / span 10; }
  .svc-block__visual { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 940px) {
  :root { --header-h: 72px; }
  .nav, .header__cta { display: none; }
  .burger { display: block; }

  .work-grid { gap: 2rem 1.2rem; }
  .work-tile--a, .work-tile--b, .work-tile--c,
  .work-tile--d, .work-tile--e, .work-tile--f,
  .work-tile--g {
    grid-column: 1 / -1;
    margin-top: 0;
  }
  /* stacked: each tile keeps the shape of its own photo */
  .work-tile--a .work-tile__visual { aspect-ratio: 3 / 4; }
  .work-tile--b .work-tile__visual { aspect-ratio: 1104 / 1425; }
  .work-tile--c .work-tile__visual { aspect-ratio: 1280 / 670; }
  .work-tile--d .work-tile__visual { aspect-ratio: 4 / 3; }
  .work-tile--e .work-tile__visual { aspect-ratio: 1 / 1; }
  .work-tile--f .work-tile__visual { aspect-ratio: 4 / 3; }
  .work-tile--g .work-tile__visual { aspect-ratio: 1280 / 720; }

  .pillars, .approach__items { grid-template-columns: 1fr; gap: 1.6rem; }
  .principles { grid-template-columns: 1fr; }
  .case-meta { grid-template-columns: repeat(2, 1fr); }
  .case-section__head { grid-column: 1 / -1; }
  .case-section__body { grid-column: 1 / -1; }
  .about-band__num { grid-column: 1 / -1; font-size: clamp(5rem, 20vw, 9rem); }
  .about-band__text { grid-column: 1 / -1; }
  .manifesto__text { grid-column: 1 / -1; }
  .contact-grid { grid-template-columns: 1fr; }
  .case-stats { grid-template-columns: 1fr; gap: 1.6rem; }

  .svc-item__link { grid-template-columns: 3rem 1fr 2.6rem; }
  .svc-item__tags { display: none; }
  .svc-block__index { grid-column: 1 / span 12; }
  .svc-block__main { grid-column: 1 / -1; }
}
/* ------------------------------------------------------------
   30. RESPONSIVE — mobile
------------------------------------------------------------ */
@media (max-width: 640px) {
  .hero__foot { flex-direction: column; align-items: flex-start; }
  .marquee__group { gap: 1.4rem; padding-inline-end: 1.4rem; }
  .marquee__group span::after { margin-inline-start: 1.4rem; }
  .form-rows--2 { grid-template-columns: 1fr; }
  .case-meta { grid-template-columns: 1fr; gap: 1.2rem; }
  .case-gallery .tile-art:nth-child(n) { grid-column: 1 / -1; }
  .footer__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .lang-switch a { padding: 0.5rem 0.75rem; }
  .gate__choices { grid-template-columns: 1fr; }
  .brand .wordmark { font-size: 1.12rem; letter-spacing: 0.18em; }
  .section-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 430px) {
  :root { --header-h: 66px; }
  .brand .wordmark { font-size: 1.02rem; letter-spacing: 0.16em; }
  .btn { padding: 0.85rem 1.4rem; }
}

/* ------------------------------------------------------------
   31. PRINT — minimal courtesy styles
------------------------------------------------------------ */
@media print {
  .loader, .site-header, .mobile-menu, .cursor-dot, .cursor-ring,
  .marquee, .cta, .to-top { display: none !important; }
  body { background: #fff; color: #000; }
  [data-reveal] { opacity: 1; transform: none; }
}





:root {
  --color-sea-tint: #e6efee;                    /* light wash of #81b3b2 */
  --wave-light: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2020'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2010%20Q15%200%2030%2010%20T60%2010%20T90%2010%20T120%2010%20V20%20H0%20Z'%20fill='%2381b3b2'/%3E%3C/svg%3E");
  --wave-secondary: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2020'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2010%20Q15%200%2030%2010%20T60%2010%20T90%2010%20T120%2010%20V20%20H0%20Z'%20fill='%23599297'/%3E%3C/svg%3E");
  --wave-gold: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2020'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2010%20Q15%200%2030%2010%20T60%2010%20T90%2010%20T120%2010%20V20%20H0%20Z'%20fill='%23e8a613'/%3E%3C/svg%3E");
}

.section--tint { background: var(--color-sea-tint); }

/* ------------------------------------------------------------
   V2.2 — LOADING SCREEN: the BADBAN boat
   A sailing boat moves forward on the waves while loading;
   its position mirrors the real progress percentage.
------------------------------------------------------------ */
.loader__sea {
  position: relative;
  width: min(460px, 74vw);
  height: 96px;
  overflow: hidden;
}
.loader__waves {
  position: absolute;
  inset-inline: -120px;
  bottom: 8px;
  height: 20px;
  background-image: var(--wave-light);
  background-size: 120px 20px;
  background-repeat: repeat-x;
  animation: waveShift 4.5s linear infinite;
}
.loader__waves--back {
  bottom: 6px;
  height: 26px;
  background-image: var(--wave-secondary);
  background-size: 120px 26px;
  opacity: 0.4;
  animation-duration: 7s;
  z-index: 0;
}
.loader__waves--front { z-index: 2; }
@keyframes waveShift {
  from { transform: translateX(0); }
  to   { transform: translateX(-120px); }
}
[dir='rtl'] .loader__waves { animation-name: waveShiftRtl; }
@keyframes waveShiftRtl {
  from { transform: translateX(0); }
  to   { transform: translateX(120px); }
}
.loader__boat {
  position: absolute;
  bottom: 22px;
  inset-inline-start: 12%;
  z-index: 1;
  transform: translateX(-50%);
  transition: inset-inline-start 0.25s linear;
  will-change: inset-inline-start;
}
[dir='rtl'] .loader__boat { transform: translateX(50%); }
.loader__boat svg {
  display: block;
  width: 86px;
  height: auto;
  transform-origin: 50% 92%;
  animation: boatRock 2.6s ease-in-out infinite;
}
@keyframes boatRock {
  0%, 100% { transform: rotate(-2.5deg) translateY(0); }
  50%      { transform: rotate(2.5deg) translateY(-3px); }
}

/* progress line reads as the sea rope under the scene */
.loader__track { background: rgba(89, 146, 151, 0.28); }

/* ------------------------------------------------------------
   V2.3 — BRAND LOCKUP v2
   The brand is a pure typographic wordmark — no image file, no
   chip, no fallback logic; it renders identically everywhere.
------------------------------------------------------------ */
.brand { display: inline-flex; align-items: center; }
.brand .wordmark {
  display: block;
  font-size: 1.28rem;
  letter-spacing: 0.26em;
}
.brand--footer .wordmark { font-size: 1.12rem; }

.gate__brand { gap: 0.9rem; }
.gate__brand .wordmark { display: block; font-size: clamp(1.5rem, 3.4vw, 2rem); }
/* ------------------------------------------------------------
   V2.4 — HERO: dashed route ring + gold wave into the marquee
------------------------------------------------------------ */
.hero__ring--small {
  inset-inline-end: 18vw;
  inset-block-start: 30vh;
  width: 26vw;
  height: 26vw;
  max-width: 380px;
  max-height: 380px;
  border: 1px dashed rgba(89, 146, 151, 0.5);
  background: none;
}
.hero__ring--small::after {
  content: '';
  position: absolute;
  inset-block-end: 8%;
  inset-inline-start: 6%;
  width: 9px;
  height: 9px;
  background: var(--color-light);
}

/* gold wave crest where the hero meets the gold marquee */
.marquee { position: relative; }
.marquee::before {
  content: '';
  position: absolute;
  inset-inline: -120px;
  top: -19px;
  height: 20px;
  background-image: var(--wave-gold);
  background-size: 120px 20px;
  background-repeat: repeat-x;
  animation: waveShift 9s linear infinite;
  pointer-events: none;
}
[dir='rtl'] .marquee::before { animation-name: waveShiftRtl; }

/* ------------------------------------------------------------
   V2.5 — MORE BRAND COLOR ACROSS COMPONENTS
------------------------------------------------------------ */
.btn::before { background: linear-gradient(120deg, var(--color-primary), var(--color-secondary)); }

.svc-item__link::before {
  background: linear-gradient(100deg, var(--color-primary) 0%, var(--color-secondary) 78%, #6da3a8 100%);
}

.about-band { background: linear-gradient(115deg, var(--color-primary) 0%, var(--color-secondary) 100%); }
.about-band__num { -webkit-text-stroke-color: rgba(244, 241, 233, 0.55); }

.cta { background: linear-gradient(120deg, var(--color-primary) 0%, #02556a 55%, var(--color-ink-2) 100%); }
.cta::after { border-color: rgba(129, 179, 178, 0.4); }

.pillars li { border-top-color: var(--color-secondary); }

.stat { border-image: linear-gradient(90deg, var(--color-accent), var(--color-secondary)) 1; border-image-slice: 1; }

.case-outcome { background: radial-gradient(90% 120% at 85% 0%, rgba(2, 110, 129, 0.55) 0%, var(--color-ink) 60%); }

.approach { overflow: clip; }
.approach::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(89, 146, 151, 0.09) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(0deg, rgba(89, 146, 151, 0.09) 0 1px, transparent 1px 140px);
}
.approach::after {
  content: '';
  position: absolute;
  inset-inline-end: -130px;
  inset-block-start: -90px;
  width: 380px;
  height: 380px;
  border: 1px dashed rgba(129, 179, 178, 0.3);
  border-radius: 50%;
  animation: spinSlow 70s linear infinite;
  pointer-events: none;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
/* ------------------------------------------------------------
   V2.7 — SEA BAND (1080×172 strip at the very bottom)
   Drop the file at:  assets/img/bottom-strip.png
------------------------------------------------------------ */
.seaband {
  position: relative;
  background: var(--color-ink-2);
  border-block-start: 1px solid rgba(129, 179, 178, 0.16);
  overflow: clip;
}

/* responsive tune for the new pieces */
@media (max-width: 940px) {
  .hero__ring--small { display: none; }
  .approach::after { display: none; }
}
@media (max-width: 640px) {
  .loader__sea { height: 84px; }
  .loader__boat svg { width: 68px; }
  .brand .wordmark { font-size: 1.05rem; letter-spacing: 0.18em; }

}

/* reduced motion: boat floats still on calm water */
@media (prefers-reduced-motion: reduce) {
  .loader__waves, .loader__boat svg, .marquee::before, .approach::after { animation: none; }
  .loader__boat { inset-inline-start: 50% !important; inset-inline-end: auto !important; }
}

/* ============================================================
   V3 — CINEMATIC SEA (loading) + DESIGN POWER-UP
   ============================================================ */

/* ------------------------------------------------------------
   V3.1 — LOADING: layered rolling sea, sun, birds, sailing boat
   The scene is built by js/loading.js inside .loader__sea;
   every wave layer slides + swells independently (parallax).
------------------------------------------------------------ */
.loader { gap: 2rem; }
.loader__sea {
  position: relative;
  width: min(580px, 88vw);
  height: 158px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(4, 38, 45, 0) 0%, rgba(2, 110, 129, 0.20) 55%, rgba(2, 110, 129, 0.42) 100%);
  border-radius: 4px;
}
.loader__sun {
  position: absolute;
  inset-inline-end: 13%;
  inset-block-start: 10px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #f9d878, var(--color-accent) 72%);
  box-shadow: 0 0 34px rgba(232, 166, 19, 0.55), 0 0 90px rgba(232, 166, 19, 0.25);
  animation: sunPulse 5s ease-in-out infinite;
}
@keyframes sunPulse {
  0%, 100% { box-shadow: 0 0 34px rgba(232, 166, 19, 0.55), 0 0 90px rgba(232, 166, 19, 0.25); }
  50%      { box-shadow: 0 0 44px rgba(232, 166, 19, 0.75), 0 0 120px rgba(232, 166, 19, 0.35); }
}
.loader__birds { position: absolute; inset: 0; pointer-events: none; }
.loader__bird {
  position: absolute;
  inset-inline-start: -8%;
  width: 20px;
  height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 8'%3E%3Cpath d='M1 6 Q6 1 10 5 Q14 1 19 6' fill='none' stroke='%2381b3b2' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.75;
  animation: birdFly linear infinite;
}
@keyframes birdFly {
  from { transform: translateX(0)        translateY(0); }
  50%  { transform: translateX(48vw)     translateY(-8px); }
  to   { transform: translateX(105vw)    translateY(2px); }
}
[dir='rtl'] .loader__bird { inset-inline-start: auto; inset-inline-end: -8%; animation-name: birdFlyRtl; }
@keyframes birdFlyRtl {
  from { transform: translateX(0)    translateY(0); }
  50%  { transform: translateX(-48vw) translateY(-8px); }
  to   { transform: translateX(-105vw) translateY(2px); }
}
@keyframes waveSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}
@keyframes waveBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

.loader__boat {
  position: absolute;
  bottom: 30px;
  inset-inline-start: 12%;
  z-index: 3;
  transform: translateX(-50%);
  transition: inset-inline-start 0.3s linear;
  will-change: inset-inline-start;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35));
}
[dir='rtl'] .loader__boat { transform: translateX(50%); }
.loader__boat svg {
  display: block;
  width: 122px;
  height: auto;
  transform-origin: 50% 88%;
  animation: boatRide 3.2s ease-in-out infinite;
}
@keyframes boatRide {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(3deg) translateY(-6px); }
}
.loader__track { background: rgba(89, 146, 151, 0.28); }

@media (max-width: 640px) {
  .loader__sea { height: 122px; }
  .loader__boat svg { width: 92px; }
  .loader__sun { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .loader__wave svg, .loader__sun, .loader__bird, .loader__boat svg { animation: none !important; }
  .loader__bird { display: none; }
  .loader__boat { inset-inline-start: 50% !important; inset-inline-end: auto !important; }
}
/* ------------------------------------------------------------
   V3.2 — GLOBAL POWER-UP
------------------------------------------------------------ */
/* calm sea-glass texture behind the whole site */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 42% at 85% 0%, rgba(129, 179, 178, 0.10) 0%, transparent 62%),
    repeating-linear-gradient(90deg, rgba(2, 110, 129, 0.018) 0 1px, transparent 1px 130px);
}

/* brand scrollbar */
html { scrollbar-color: var(--color-secondary) var(--color-background); }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--color-background); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
  border-radius: 8px;
  border: 2px solid var(--color-background);
}

/* reading progress — the voyage line */
.scroll-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1300;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-light) 55%, var(--color-accent));
  pointer-events: none;
}

/* hero title: the long slogan line needs the display end of the
   scale, not the clamp V3.2 picked before the scale existed */
.hero__title { font-size: clamp(2.34rem, 6.66vw, 6.48rem); }
.hero__line--grad {
  background: linear-gradient(100deg, var(--color-accent) 10%, #f0c96a 38%, var(--color-light) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__line--grad::selection { background: rgba(232, 166, 19, 0.8); color: var(--color-ink); }
/* small gold wave under the headline */
.hero__title::after {
  content: '';
  display: block;
  width: 128px;
  height: 12px;
  margin-top: 1.4rem;
  background-image: var(--wave-gold);
  background-size: 64px 12px;
  background-repeat: repeat-x;
  opacity: 0.9;
}
@media (max-width: 940px) { }

/* header: deeper presence when scrolled */
.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--color-border), 0 10px 30px rgba(4, 38, 45, 0.10);
}

/* work tiles: tactile hover */
.work-tile__visual { transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out); }
.work-tile:hover .work-tile__visual { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(4, 38, 45, 0.22); }

/* CTA: second rotating dashed ring */
.cta::before {
  content: '';
  position: absolute;
  inset-block-start: -22%;
  inset-inline-start: -6%;
  width: 38vw;
  height: 38vw;
  max-width: 520px;
  max-height: 520px;
  border: 1px dashed rgba(129, 179, 178, 0.35);
  border-radius: 50%;
  animation: spinSlow 80s linear infinite;
  pointer-events: none;
}

/* services rows: ghost numbers grow on hover */
.svc-item__index { transition: color var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out); }
.svc-item:hover .svc-item__index { transform: scale(1.35); transform-origin: left center; }
[dir='rtl'] .svc-item:hover .svc-item__index { transform-origin: right center; }
@media (prefers-reduced-motion: reduce) {
}

/* ============================================================
   V4 — THE VOYAGE LOADER + TREASURE MAP + SELF-DRAWN ART
   ============================================================ */

/* ------------------------------------------------------------
   V4.1 — LOADING: the progress bar IS the sea voyage.
   A framed stage: sky, sun, birds — and the blue bar itself is
   the ocean. The ship sails the bar toward a treasure island;
   on arrival the chest bursts and the site opens.
------------------------------------------------------------ */
.loader { gap: 1.7rem; }
.loader__sea {
  position: relative;
  width: min(640px, 92vw);
  height: 208px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(129, 179, 178, 0.18);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(2, 110, 129, 0.30) 0%, transparent 62%),
    linear-gradient(180deg, rgba(4, 38, 45, 0) 40%, rgba(2, 110, 129, 0.18) 100%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.35);
}
.loader__sun {
  inset-block-start: 14px;
  inset-inline-end: 11%;
  width: 42px;
  height: 42px;
}
/* the ship on the waterline, sailing the bar */
.voyage__ship {
  position: absolute;
  inset-block-end: 42px;
  inset-inline-start: 6%;
  z-index: 3;
  transform: translateX(-50%);
  transition: inset-inline-start 0.3s linear;
  will-change: inset-inline-start;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.4));
}
[dir='rtl'] .voyage__ship { transform: translateX(50%); }
.voyage__ship-flip { display: block; }
[dir='rtl'] .voyage__ship-flip { transform: scaleX(-1); }
.voyage__ship svg {
  display: block;
  width: 116px;
  height: auto;
  transform-origin: 50% 88%;
  animation: boatRide 3s ease-in-out infinite;
}

/* destination: the treasure island */
.voyage__goal {
  position: absolute;
  inset-block-end: 40px;
  inset-inline-end: 4px;
  width: 104px;
  z-index: 2;
}
.voyage__goal svg { display: block; width: 100%; height: auto; }
.voyage__goal::before {
  content: '';
  position: absolute;
  inset: -34%;
  background: radial-gradient(circle, rgba(232, 166, 19, 0.4) 0%, transparent 62%);
  opacity: 0.5;
  transition: opacity 0.5s var(--ease-out);
}
/* arrival moment — the treasure burst */
.loader.is-arrived .voyage__goal::before {
  animation: treasureBurst 0.9s ease-out forwards;
}
.loader.is-arrived .voyage__goal { filter: drop-shadow(0 0 16px rgba(232, 166, 19, 0.85)); }
@keyframes treasureBurst {
  0%   { transform: scale(0.4); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* the golden sweep that opens the site */
.loader__flash {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(232, 166, 19, 0.22) 45%, rgba(232, 166, 19, 0.32) 55%, transparent 100%);
  transform: translateY(102%);
}
.loader.is-exiting .loader__flash { animation: goldSweep 0.95s var(--ease-inout) forwards; }
@keyframes goldSweep {
  from { transform: translateY(102%); }
  to   { transform: translateY(-102%); }
}
@media (prefers-reduced-motion: reduce) {
  .loader__flash { display: none; }
}

@media (max-width: 640px) {
  .loader__sea { height: 176px; }
  .voyage__ship svg { width: 88px; }
  .voyage__goal { width: 78px; }
  .voyage__ship { inset-block-end: 38px; }
}
/* ------------------------------------------------------------
   V4.2 — PROCESS: THE TREASURE MAP
   Five islands on a night chart; the fifth is the treasure.
------------------------------------------------------------ */
.tmap {
  position: relative;
  background:
    radial-gradient(70% 90% at 88% 8%, rgba(2, 110, 129, 0.38) 0%, transparent 58%),
    radial-gradient(50% 60% at 8% 95%, rgba(89, 146, 151, 0.14) 0%, transparent 60%),
    var(--color-ink);
  border: 1px solid rgba(129, 179, 178, 0.22);
  border-radius: 22px;
  /* every child of the map is absolutely positioned, so without an explicit
     ratio the box collapsed to its padding (~220px) and the labels hanging
     under Strategy / Concept / Execution were cut off by overflow:hidden.
     The ratio matches the route SVG viewBox (1000x420) so the dashed trail
     and the five islands sit exactly where they were drawn. */
  aspect-ratio: 1000 / 420;
  padding: clamp(3.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem) clamp(8rem, 11vw, 9rem);
  overflow: hidden;
  color: var(--color-paper);
  box-shadow: 0 30px 70px rgba(4, 38, 45, 0.35);
}
.tmap::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(129, 179, 178, 0.07) 0 1px, transparent 1px 110px),
    repeating-linear-gradient(0deg, rgba(129, 179, 178, 0.07) 0 1px, transparent 1px 110px);
}
.tmap__compass {
  position: absolute;
  inset-block-start: 1.5rem;
  inset-inline-end: 1.7rem;
  width: 70px;
  height: 70px;
  pointer-events: none;
  background:
    linear-gradient(rgba(129, 179, 178, 0.3), rgba(129, 179, 178, 0.3)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(rgba(129, 179, 178, 0.3), rgba(129, 179, 178, 0.3)) 0 50% / 100% 1px no-repeat;
}
.tmap__compass::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(129, 179, 178, 0.45);
  border-radius: 50%;
  animation: spinSlow 42s linear infinite;
}
.tmap__compass::after {
  content: 'N';
  position: absolute;
  inset-block-start: -8px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 0.68rem;
  color: var(--color-accent);
  background: var(--color-ink);
  padding-inline: 4px;
}
.tmap__hint {
  position: absolute;
  inset-block-start: 1.8rem;
  inset-inline-start: 2rem;
  font-size: var(--fs-tiny);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(129, 179, 178, 0.8);
}
[dir='rtl'] .tmap__hint { letter-spacing: 0; }
.tmap__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
[dir='rtl'] .tmap__route { transform: scaleX(-1); }
.tmap__trail {
  fill: none;
  stroke: rgba(232, 166, 19, 0.8);
  stroke-width: 2.5;
  stroke-dasharray: 3 13;
  stroke-linecap: round;
  animation: routeDash 20s linear infinite;
}
@keyframes routeDash { to { stroke-dashoffset: -320; } }
.tmap__node {
  --nx: -50%;
  position: absolute;
  transform: translate(var(--nx), -46px);
  width: clamp(150px, 15vw, 210px);
  text-align: center;
  z-index: 2;
}
[dir='rtl'] .tmap__node { --nx: 50%; }
.tmap__node--1 { inset-inline-start: 8%;  inset-block-start: 58%; }
.tmap__node--2 { inset-inline-start: 28%; inset-block-start: 22%; }
.tmap__node--3 { inset-inline-start: 48%; inset-block-start: 56%; }
.tmap__node--4 { inset-inline-start: 68%; inset-block-start: 18%; }
.tmap__node--5 { inset-inline-start: 89%; inset-block-start: 42%; }
.tmap.is-inview .tmap__node { animation: nodeSurface 0.8s var(--ease-out) both; }
.tmap.is-inview .tmap__node--2 { animation-delay: 0.15s; }
.tmap.is-inview .tmap__node--3 { animation-delay: 0.3s; }
.tmap.is-inview .tmap__node--4 { animation-delay: 0.45s; }
.tmap.is-inview .tmap__node--5 { animation-delay: 0.6s; }
@keyframes nodeSurface {
  from { opacity: 0; transform: translate(var(--nx), -16px); }
  to   { opacity: 1; transform: translate(var(--nx), -46px); }
}
.tmap__isle {
  display: grid;
  place-items: center;
  width: 76px;
  height: 70px;
  margin-inline: auto;
  background: radial-gradient(circle at 50% 26%, var(--color-secondary) 0%, var(--color-primary) 62%, #024a58 100%);
  border: 2px solid rgba(129, 179, 178, 0.55);
  border-radius: 52% 48% 46% 54% / 62% 58% 42% 38%;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4), inset 0 -8px 14px rgba(2, 39, 48, 0.55);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-paper);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.tmap__node:hover .tmap__isle {
  transform: translateY(-6px) rotate(-2deg);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(129, 179, 178, 0.12);
}
.tmap__isle i { font-style: normal; letter-spacing: 0.08em; }
.tmap__title { margin-top: 1rem; font-size: 1.12rem; }
.tmap__desc { margin-top: 0.35rem; color: var(--color-light); font-size: 0.86rem; line-height: 1.7; }
.tmap__isle--treasure {
  width: 96px;
  height: 88px;
  background: radial-gradient(circle at 50% 28%, #f7d06e 0%, var(--color-accent) 55%, #a87408 100%);
  border-color: rgba(244, 241, 233, 0.7);
  animation: treasurePulse 3.2s ease-in-out infinite;
}
.tmap__isle--treasure svg { width: 38px; height: auto; }
@keyframes treasurePulse {
  0%, 100% { box-shadow: 0 0 0 9px rgba(232, 166, 19, 0.14), 0 0 46px rgba(232, 166, 19, 0.5), 0 16px 30px rgba(0, 0, 0, 0.4); }
  50%      { box-shadow: 0 0 0 14px rgba(232, 166, 19, 0.2), 0 0 70px rgba(232, 166, 19, 0.65), 0 16px 30px rgba(0, 0, 0, 0.4); }
}
.tmap__x {
  display: block;
  margin-top: 0.3rem;
  color: var(--color-accent);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
[dir='rtl'] .tmap__x { letter-spacing: 0; }
@media (max-width: 940px) {
  .tmap { padding-block-end: 3rem; aspect-ratio: auto; }
  .tmap__route, .tmap__compass, .tmap__hint { display: none; }
  .tmap__node {
    --nx: 0%;
    position: relative;
    inset: auto;
    transform: none;
    width: auto;
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 1.15rem;
    align-items: start;
    text-align: start;
    margin: 0 0 1.9rem;
    padding-inline-start: 1.4rem;
    border-inline-start: 2px dashed rgba(232, 166, 19, 0.4);
  }
  .tmap__node--5 { margin-block-end: 0; }
  .tmap__isle { margin: 0; }
  .tmap__title { margin-top: 0.15rem; }
  .tmap.is-inview .tmap__node { animation: none; opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   V4.4 — SEA BAND v2 (pure CSS horizon, no image files)
------------------------------------------------------------ */
.seaband {
  position: relative;
  height: clamp(96px, 13vw, 150px);
  background: linear-gradient(180deg, var(--color-ink) 0%, #03333d 100%);
  border-block-start: 1px solid rgba(129, 179, 178, 0.16);
  overflow: clip;
}
.seaband__boat {
  position: absolute;
  inset-block-end: 32%;
  inset-inline-start: -8%;
  width: 58px;
  height: 34px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2034'%3E%3Cpath%20d='M31%203%20L44%206%20L31%209%20Z'%20fill='%23e8a613'/%3E%3Crect%20x='29.5'%20y='3'%20width='1.8'%20height='19'%20fill='%23f4f1e9'/%3E%3Cpath%20d='M32%206%20L46%2021%20L32%2021%20Z'%20fill='%23e8a613'/%3E%3Cpath%20d='M28%208%20L17%2021%20L28%2021%20Z'%20fill='%2381b3b2'/%3E%3Cpath%20d='M8%2022%20L52%2022%20L46%2031%20L14%2031%20Z'%20fill='%23f4f1e9'/%3E%3Cpath%20d='M8%2022%20L52%2022%20L50.5%2025.5%20L10%2025.5%20Z'%20fill='%23599297'/%3E%3C/svg%3E") no-repeat center / contain;
  animation: seabandDrift 36s linear infinite, boatRide 4.5s ease-in-out infinite;
  opacity: 0.95;
}
[dir='rtl'] .seaband__boat { animation-name: seabandDrift, boatRide; }
@keyframes seabandDrift {
  from { inset-inline-start: -9%; }
  to   { inset-inline-start: 104%; }
}
@media (prefers-reduced-motion: reduce) {
  .seaband__boat { animation: none; inset-inline-start: 12%; }
}

/* ------------------------------------------------------------
   V4.5 — TYPE REFINEMENTS
------------------------------------------------------------ */
.intro__statement, .cta__link, .section-head__title { text-wrap: balance; }
.tmap__desc { text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) {
  .voyage__ship svg, .voyage__goal::before { animation: none !important; }
  .voyage__ship { inset-inline-start: 88% !important; inset-inline-end: auto !important; }
  .loader__flash { display: none; }
  .tmap__compass::before, .tmap__trail, .tmap__isle--treasure, .seaband__boat { animation: none !important; }
}

/* ------------------------------------------------------------
   V5 — THE REAL BOAT (assets/img/boat.png, transparent bg)
   Used by the loader voyage, the hero scene and the sea band.
   NOTE: boat.png canvas is square with the drawing centered —
   visible craft ≈ 50% of the element box (hence the sizes).
------------------------------------------------------------ */
.voyage__ship svg { display: none; }
.voyage__ship-img {
  display: block;
  width: 196px;
  height: auto;
  margin-block-end: -33%;              /* hull sinks to the waterline */
  transform-origin: 50% 88%;
  animation: boatRide 3s ease-in-out infinite;
}

/* sea band: the real boat drifting on the horizon */
.seaband__boat {
  width: 128px;
  height: 84px;
  inset-block-end: 24%;
  background: url("../assets/img/boat.png") no-repeat center / contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}
@media (max-width: 640px) {
  .voyage__ship-img { width: 150px; }
  .seaband__boat { width: 96px; height: 66px; }
}

/* ------------------------------------------------------------
   V5.1 — BOAT DIRECTION & WATERLINE CALIBRATION
   boat.png natively faces LEFT (jib left of mast, flat transom
   right). LTR travel runs left→right, so the craft is mirrored
   there; in RTL it keeps its native left-facing direction.
   Hull bottom sits a few px INTO the wave crests everywhere.
------------------------------------------------------------ */
.voyage__ship { inset-block-end: 44px; }
.voyage__ship-flip { transform: scaleX(-1); }
[dir='rtl'] .voyage__ship-flip { transform: none; }

.seaband__boat {
  inset-block-end: 4px;
  animation: seabandDrift 36s linear infinite, boatRideFlip 5s ease-in-out infinite;
}
[dir='rtl'] .seaband__boat { animation-name: seabandDrift, boatRide; }
/* boat.png natively faces LEFT. In LTR the craft travels left→right, so the
   ride is mirrored; in RTL it keeps its native left-facing direction. */
@keyframes boatRideFlip {
  0%, 100% { transform: scaleX(-1) rotate(-3deg) translateY(0); }
  50%      { transform: scaleX(-1) rotate(3deg) translateY(-6px); }
}
@media (max-width: 640px) {
  .voyage__ship { inset-block-end: 40px; }
}
@media (prefers-reduced-motion: reduce) {
}

/* ============================================================
   V6 — CINEMATIC EDITION
   «با بادبانِ درست، همیشه در مسیر»
   ============================================================ */

/* ------------------------------------------------------------
   V6.1 — LOADING: night-voyage diorama
   Sky (stars · moon · clouds) over a 4-layer gradient sea with
   foam crests and moon glare; the ship sails the waterline
   toward the treasure island; arrival = rays + sparkles burst.
------------------------------------------------------------ */
.loader {
  gap: 1.3rem;
  background: radial-gradient(120% 90% at 50% 0%, #053842 0%, #04262d 48%, #02141a 100%);
}
.loader__sea {
  position: relative;
  width: min(780px, 94vw);
  height: 300px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(129, 179, 178, 0.16);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.5), 0 34px 90px rgba(0, 0, 0, 0.4);
  background: linear-gradient(180deg, #02141a 0%, #04262d 42%, #02556a 74%, #026e81 100%);
  transition: transform 1s var(--ease-inout), opacity 0.8s var(--ease-out);
}
.loader.is-exiting .loader__sea { transform: scale(1.07) translateY(-18px); opacity: 0; }

/* sky */
.scene__stars { position: absolute; inset: 0 0 52% 0; pointer-events: none; }
.scene__star {
  position: absolute;
  border-radius: 50%;
  background: #e9f4f2;
  box-shadow: 0 0 6px rgba(233, 244, 242, 0.8);
  animation: starTwinkle ease-in-out infinite;
}
@keyframes starTwinkle {
  0%, 100% { opacity: 0.22; transform: scale(0.8); }
  50%      { opacity: 1; transform: scale(1.18); }
}
.scene__moon {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-end: 11%;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fbe3a0, #e8a613 68%, #c9890d);
  box-shadow: 0 0 50px 14px rgba(232, 166, 19, 0.4), 0 0 130px 40px rgba(232, 166, 19, 0.16);
  animation: moonFloat 9s ease-in-out infinite;
}
@keyframes moonFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.scene__clouds { position: absolute; inset: 0; pointer-events: none; }
.scene__cloud {
  position: absolute;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(129, 179, 178, 0.16), rgba(129, 179, 178, 0.05));
  filter: blur(7px);
  animation: cloudDrift linear infinite;
}
@keyframes cloudDrift { from { transform: translateX(24vw); } to { transform: translateX(-24vw); } }
[dir='rtl'] .scene__cloud { animation-name: cloudDriftRtl; }
@keyframes cloudDriftRtl { from { transform: translateX(-24vw); } to { transform: translateX(24vw); } }

/* sea */
.scene__sea {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 140px;
  overflow: hidden;
}
.scene__wave {
  position: absolute;
  inset-inline: 0;
  pointer-events: none;
  animation: waveBob ease-in-out infinite;
}
.scene__wave svg { display: block; width: 200%; height: 100%; animation: waveSlide linear infinite; }
.scene__wave--l1 { height: 64px; inset-block-end: 58px; }
.scene__wave--l1 svg { animation-duration: 17s; }
.scene__wave--l2 { height: 58px; inset-block-end: 38px; }
.scene__wave--l2 svg { animation-duration: 12s; animation-direction: reverse; }
.scene__wave--l3 { height: 52px; inset-block-end: 18px; }
.scene__wave--l3 svg { animation-duration: 8.5s; }
.scene__wave--l4 { height: 48px; inset-block-end: -2px; }
.scene__wave--l4 svg { animation-duration: 6.5s; }
.scene__glare {
  position: absolute;
  inset-block-start: -20px;
  inset-block-end: 0;
  inset-inline-end: calc(11% - 22px);
  width: 84px;
  background: linear-gradient(180deg, rgba(232, 166, 19, 0.42), rgba(232, 166, 19, 0.08) 70%, transparent);
  filter: blur(7px);
  animation: glareShimmer 4.5s ease-in-out infinite;
}
@keyframes glareShimmer { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.65; } }

/* route + traveled gold trail on the waterline */
.scene__route {
  position: absolute;
  inset-inline: 24px;
  inset-block-end: 128px;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(232, 166, 19, 0.5) 0 10px, transparent 10px 22px);
  opacity: 0.6;
}
.scene__trail {
  position: absolute;
  inset-inline-start: 24px;
  inset-block-end: 128px;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, rgba(232, 166, 19, 0.25), var(--color-accent));
  transform: scaleX(0);
  transform-origin: 0% 50%;
  box-shadow: 0 0 12px rgba(232, 166, 19, 0.55);
}
[dir='rtl'] .scene__trail { transform-origin: 100% 50%; }
/* ship */
.scene__ship {
  position: absolute;
  inset-block-end: 126px;
  inset-inline-start: 7%;
  z-index: 3;
  transform: translateX(-50%);
  transition: inset-inline-start 0.3s linear;
  will-change: inset-inline-start;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.5));
}
[dir='rtl'] .scene__ship { transform: translateX(50%); }
.voyage__ship-img {
  display: block;
  width: 176px;
  height: auto;
  margin-block-end: -33%;
  transform-origin: 50% 88%;
  animation: boatRide 3s ease-in-out infinite;
}
.scene__wake {
  position: absolute;
  inset-block-end: 2px;
  inset-inline-start: -34px;
  width: 52px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(244, 241, 233, 0.55), transparent 70%);
  animation: wakeFade 1.8s ease-out infinite;
}
[dir='rtl'] .scene__wake { inset-inline-start: auto; inset-inline-end: -34px; }
@keyframes wakeFade {
  0%   { transform: scale(0.5); opacity: 0; }
  30%  { opacity: 0.75; }
  100% { transform: scale(1.5) translateX(-16px); opacity: 0; }
}

/* destination: island + rays + sparkles */
.scene__goal {
  position: absolute;
  inset-block-end: 106px;
  inset-inline-end: 12px;
  width: 120px;
  z-index: 2;
}
.scene__goal > svg { display: block; width: 100%; height: auto; }
.scene__goal::before {
  content: '';
  position: absolute;
  inset: -28%;
  background: radial-gradient(circle, rgba(232, 166, 19, 0.35), transparent 62%);
  opacity: 0.5;
}
.scene__rays {
  position: absolute;
  inset: -90% -55%;
  background: repeating-conic-gradient(from 0deg, rgba(232, 166, 19, 0.16) 0deg 8deg, transparent 8deg 17deg);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.3);
  pointer-events: none;
  mix-blend-mode: screen;
}
.loader.is-arrived .scene__rays { animation: raysOut 1.25s ease-out forwards; }
@keyframes raysOut {
  0%   { opacity: 0; transform: scale(0.3) rotate(0deg); }
  25%  { opacity: 0.95; }
  100% { opacity: 0; transform: scale(1.6) rotate(22deg); }
}
.scene__sparkles { position: absolute; inset: 0; pointer-events: none; }
.scene__spark {
  position: absolute;
  left: 50%;
  bottom: 46%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe9ad, #e8a613 70%);
  box-shadow: 0 0 10px rgba(232, 166, 19, 0.9);
  opacity: 0;
  animation: sparkFly 1.15s ease-out forwards;
}
@keyframes sparkFly {
  0%   { transform: translate(0, 0) scale(0.3); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, -80px)) scale(0); opacity: 0; }
}

/* brand slogan reveal */
.loader__slogan {
  --ls-end: 0.14em;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  letter-spacing: var(--ls-end);
  color: var(--color-light);
  text-align: center;
  opacity: 0;
  animation: sloganIn 1.5s var(--ease-out) 1.1s forwards;
}
[dir='rtl'] .loader__slogan { --ls-end: 0em; }
@keyframes sloganIn {
  from { opacity: 0; transform: translateY(12px); letter-spacing: calc(var(--ls-end) + 0.18em); }
  to   { opacity: 1; transform: none; letter-spacing: var(--ls-end); }
}

/* hud polish */
.loader__track { display: none; }
.loader__hud { inset-block-end: clamp(1.2rem, 3vw, 2rem); }
.loader__percent {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  text-shadow: 0 0 26px rgba(232, 166, 19, 0.4);
}

@media (max-width: 640px) {
  .loader__sea { height: 240px; }
  .scene__sea { height: 110px; }
  .scene__route, .scene__trail { inset-block-end: 98px; }
  .scene__ship { inset-block-end: 96px; }
  .voyage__ship-img { width: 128px; }
  .scene__goal { inset-block-end: 84px; width: 94px; }
  .scene__moon { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene__star, .scene__moon, .scene__cloud, .scene__wave svg, .scene__glare,
  .scene__wake, .loader__slogan { animation: none !important; }
  .loader__slogan { opacity: 1; }
  .scene__ship { inset-inline-start: 84% !important; }
}
/* ------------------------------------------------------------
   V6.2 — HERO: starfield
   Stars twinkle in the hero sky and the gold marquee below reads
   as the next horizon. The water itself moved into the hero
   corner in V9.
------------------------------------------------------------ */
.hero__stars {
  position: absolute;
  inset: 0 0 34% 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 8% 22%, rgba(244, 241, 233, 0.9) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 22% 64%, rgba(244, 241, 233, 0.7) 50%, transparent 51%),
    radial-gradient(2px 2px at 37% 38%, rgba(129, 179, 178, 0.9) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 55% 16%, rgba(244, 241, 233, 0.8) 50%, transparent 51%),
    radial-gradient(2px 2px at 68% 48%, rgba(129, 179, 178, 0.8) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 81% 26%, rgba(244, 241, 233, 0.75) 50%, transparent 51%),
    radial-gradient(2px 2px at 92% 58%, rgba(129, 179, 178, 0.85) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 46% 74%, rgba(244, 241, 233, 0.6) 50%, transparent 51%);
  animation: starTwinkle 6s ease-in-out infinite;
}
@media (max-width: 940px) {
  .hero__stars { inset-block-end: 42%; }
}

/* ------------------------------------------------------------
   V6.3 — CINEMATIC FILM GRAIN (whole site)
------------------------------------------------------------ */
body::after {
  content: '';
  position: fixed;
  inset: -60%;
  z-index: 9600;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
  animation: grainShift 1.2s steps(6) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-5%, 4%); }
  40%  { transform: translate(4%, -6%); }
  60%  { transform: translate(-4%, -4%); }
  80%  { transform: translate(5%, 5%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

/* ------------------------------------------------------------
   V6.4 — MAGNETIC INTERACTIVE ELEMENTS
------------------------------------------------------------ */
.btn, .to-top {
  transition: transform 0.35s var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .btn, .to-top { transition: none; }
}
/* ------------------------------------------------------------
   V7 — WAVES & BOAT FINAL CALIBRATION
   · the boat shows COMPLETE (bigger boxes — the png canvas is
     square with ~50% transparent padding)
   · richer, taller waves on the loader sea and the sea band
------------------------------------------------------------ */


/* loader — full, prominent boat */
.voyage__ship-img { width: 240px; }
.scene__ship { inset-block-end: 124px; }

/* sea band — richer water + full boat */
.seaband {
  background: linear-gradient(180deg, var(--color-ink) 0%, #03333d 55%, #023741 100%);
}
.seaband__boat {
  width: 170px;
  height: 120px;
  inset-block-end: -10px;              /* hull into the wave rows */
  background: url("../assets/img/boat.png") no-repeat center / contain;
  z-index: 2;
}

@media (max-width: 640px) {
  .voyage__ship-img { width: 170px; }
  .scene__ship { inset-block-end: 100px; }
  .seaband__boat { width: 120px; height: 84px; inset-block-end: -8px; }
}
/* ------------------------------------------------------------
   V8 — WATERLINE CALIBRATION (final)
   The real water surface = the crest of wave layer l2.
   Everything (ship hull · island base · gold route) now sits
   exactly ON that line — no more floating.
   Loader waterline: 90px · Sea band: hull dips into the wave
   rows · Hero corner: hull rests on the near wave row.
------------------------------------------------------------ */
.scene__sea { height: 170px; }
.scene__wave--l1 { height: 70px; inset-block-end: 76px; }
.scene__wave--l2 { height: 64px; inset-block-end: 48px; }
.scene__wave--l3 { height: 56px; inset-block-end: 24px; }
.scene__wave--l4 { height: 52px; inset-block-end: -6px; }
.scene__route, .scene__trail { inset-block-end: 90px; }
.scene__ship { inset-block-end: 84px; }
.scene__goal { inset-block-end: 70px; }

.seaband__boat { inset-block-end: 2px; }

@media (max-width: 640px) {
  .scene__sea { height: 136px; }
  .scene__wave--l1 { height: 64px; inset-block-end: 72px; }
  .scene__wave--l2 { height: 60px; inset-block-end: 44px; }
  .scene__wave--l3 { height: 52px; inset-block-end: 20px; }
  .scene__wave--l4 { height: 48px; inset-block-end: -6px; }
  .scene__route, .scene__trail { inset-block-end: 80px; }
  .scene__ship { inset-block-end: 78px; }
  .scene__goal { inset-block-end: 60px; }
  .seaband__boat { inset-block-end: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene__ship { inset-block-end: 84px !important; }
}

/* ============================================================
   V9 — HERO CORNER LAGOON
   A compact sea patch in the bottom corner of the hero. The
   water itself is drawn by js/animations.js (heroLagoon): three
   wave layers rebuilt every frame from a summed-sine surface,
   with the boat's height and heel read off that same surface —
   so the hull always meets the water. This file only sizes the
   stage and anchors the hull; --isle-hull is the empty padding
   under the hull in boat.png (the hull sits 66.8% down a square
   canvas whose drawing fills 49.8% of it).
------------------------------------------------------------ */
.hero__isle {
  --isle-boat: clamp(130px, 12vw, 180px);
  --isle-hull: calc(var(--isle-boat) * 0.332);   /* empty canvas under the hull */
  --isle-depth: clamp(78px, 8vw, 116px);         /* water measured down from the hull */
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: clamp(300px, 34vw, 540px);
  height: clamp(170px, 19vw, 240px);
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.4s var(--ease-out) 0.95s, transform 1.4s var(--ease-out) 0.95s;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%), linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%), linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}
body.is-loaded .hero__isle { opacity: 1; transform: none; }

/* open water above the horizon, melting into the hero's night sky */
.hero__isle-glow {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: calc(var(--isle-depth) * 2.6);
  background: linear-gradient(180deg, rgba(2, 110, 129, 0) 0%, rgba(2, 110, 129, 0.2) 44%, rgba(3, 51, 61, 0.66) 100%);
}

/* Both SVG sea planes share the same box. --isle-surface is published
   by heroLagoon as ride.base * seaH/VH, measured from the top of this
   stage, so the waterline sits (--isle-depth - --isle-surface) above
   the isle's bottom edge. Both the hull and its reflection hang off
   that same number. */
.hero__isle-sea {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: var(--isle-depth);
}
.hero__isle-sea--back { z-index: 1; }

/* mirror of the craft, below the waterline — flipped about the hull
   point (66.8% down a square canvas), same anchor as the boat */
.hero__isle-reflect {
  position: absolute;
  z-index: 2;
  inset-block-end: calc(var(--isle-depth) - var(--isle-surface, 0px) - var(--isle-hull));
  inset-inline-start: 6%;
  width: var(--isle-boat);
  pointer-events: none;
  filter: blur(0.6px) saturate(0.7) brightness(0.72);
  opacity: 0.5;
  will-change: transform;
}
.hero__isle-reflect-img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 66.8%;
  will-change: transform;
}

.hero__isle-boat {
  position: absolute;
  z-index: 3;
  inset-block-end: calc(var(--isle-depth) - var(--isle-surface, 0px) - var(--isle-hull));
  inset-inline-start: 6%;
  width: var(--isle-boat);

  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.45));
  will-change: transform;
}
.hero__isle-boat-img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 78%;
  will-change: transform;
}

/* the near water is drawn OVER the hull on purpose — those crests
   are what slice the boat at the waterline */
.hero__isle-sea--front { z-index: 4; }

@media (max-width: 1100px) {
  .hero__isle { width: clamp(260px, 42vw, 400px); height: clamp(150px, 17vw, 190px); }
}
@media (max-width: 940px) {
  .hero__isle { --isle-boat: clamp(96px, 11vw, 130px); --isle-depth: clamp(62px, 7vw, 88px); }
}
@media (max-width: 640px) {
  .hero__isle { width: 78vw; height: 128px; --isle-boat: 96px; --isle-depth: 62px; }
}
@media (max-width: 430px) {
  .hero__isle { width: 88vw; height: 104px; --isle-boat: 78px; --isle-depth: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__isle-boat, .hero__isle-reflect { transform: translate3d(0, 0, 0) !important; }
}

/* ============================================================
   END — BADBAN style.css  ·  v6 cinematic edition
   «با بادبانِ درست، همیشه در مسیر»
   ============================================================ */


/* ============================================================
   V10 — DESIGN SYSTEM UPGRADE
   ------------------------------------------------------------
   A single, opinionated layer on top of everything above:
     10.00  tokens          fluid type scale · spacing · depth
     10.01  typography      rhythm, measure, optical display type
     10.02  surfaces        glass, hairlines, elevation
     10.03  controls        buttons, links, chips, fields
     10.04  hero            cinematic depth, kicker, scroll cue
     10.05  section heads   index rail, stacked hierarchy
     10.06  work grid       clip reveal, spotlight, meta chips
     10.07  services        two-tone rows, arrow dial
     10.08  process map     lit route, glowing isle
     10.09  content blocks  pillars, stats, principles, clients
     10.10  forms           floating labels, focus glow
     10.11  footer          watermark lockup, dial back-to-top
     10.12  cursor          label mode, ring states
     10.13  motion          word masks, clip reveals, reveals v2
     10.14  responsive      tablet / mobile / small
     10.15  a11y            reduced motion, print, contrast
   ============================================================ */

/* ------------------------------------------------------------
   10.00 — TOKENS
------------------------------------------------------------ */
:root {
  /* fluid modular scale — 1.25 (major third) between steps,
     optically corrected at the display end */
  --step--2: clamp(0.71rem, 0.69rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.97rem + 0.18vw, 1.125rem);
  --step-1:  clamp(1.19rem, 1.12rem + 0.36vw, 1.44rem);
  --step-2:  clamp(1.44rem, 1.31rem + 0.64vw, 1.94rem);
  --step-3:  clamp(1.75rem, 1.51rem + 1.18vw, 2.62rem);
  --step-4:  clamp(2.08rem, 1.68rem + 2.02vw, 3.52rem);
  --step-5:  clamp(2.44rem, 1.79rem + 3.26vw, 4.82rem);
  --step-6:  clamp(2.85rem, 1.80rem + 5.25vw, 6.60rem);
  --step-7:  clamp(3.20rem, 1.70rem + 7.50vw, 9.20rem);

  /* 4pt spacing rhythm */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* elevation — every shadow is tinted with the brand ink */
  --shadow-1: 0 1px 2px rgba(4, 38, 45, 0.05), 0 2px 6px rgba(4, 38, 45, 0.035);
  --shadow-2: 0 4px 12px rgba(4, 38, 45, 0.07), 0 12px 28px rgba(4, 38, 45, 0.06);
  --shadow-3: 0 12px 28px rgba(4, 38, 45, 0.10), 0 32px 64px rgba(4, 38, 45, 0.11);
  --shadow-4: 0 24px 60px rgba(4, 38, 45, 0.16), 0 64px 130px rgba(4, 38, 45, 0.15);
  --shadow-glow: 0 18px 60px rgba(2, 110, 129, 0.30);
  --ring: 0 0 0 1px rgba(10, 42, 49, 0.08);
  --ring-strong: 0 0 0 1px rgba(2, 110, 129, 0.24);

  /* glass */
  --glass: rgba(246, 244, 238, 0.78);
  --glass-ink: rgba(4, 38, 45, 0.66);

  /* text colours with a real contrast ladder */
  --color-text-2: #16414a;
  --color-muted: #4d6a6c;
  --color-hairline: rgba(10, 42, 49, 0.10);
  --color-hairline-soft: rgba(10, 42, 49, 0.06);
  --color-hairline-ink: rgba(244, 241, 233, 0.12);

  /* motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-slower: 1.4s;
}

/* ------------------------------------------------------------
   10.01 — TYPOGRAPHY
------------------------------------------------------------ */
body {
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--color-text-2);
  letter-spacing: 0.002em;
}
[dir='rtl'] body { line-height: 1.95; }

/* Headings must take the colour of the surface they sit on. Pinning a
   colour on the bare element forces dark ink onto every dark section,
   so the ink travels as a custom property that dark surfaces override.
   (This is what made the hero headline invisible.) */
h1, h2, h3, h4 {
  color: var(--heading-ink, var(--color-text));
  text-wrap: balance;
  font-optical-sizing: auto;
}
[dir='rtl'] h1, [dir='rtl'] h2, [dir='rtl'] h3, [dir='rtl'] h4 { letter-spacing: 0; }

/* every surface that paints itself dark re-points the heading ink */
.hero,
.page-hero,
.section--dark,
.about-band,
.case-outcome,
.tmap,
.cta,
.site-footer,
.mobile-menu,
.loader,
.gate,
.skip-link,
.seaband { --heading-ink: var(--color-paper); }

/* every light surface does the inverse, so nesting can never leave a
   dark heading stranded on paper (or a pale one stranded on ink) */
.section--tint { --heading-ink: var(--color-text); }

p, li, dd, label, .lead, .statement { text-wrap: pretty; }
.h-lg   { font-size: var(--step-5); line-height: 1.06; }
.h-md   { font-size: var(--step-2); line-height: 1.3; }
[dir='rtl'] .h-lg { line-height: 1.32; }

/* display type gets a tighter, optically corrected rhythm */
.hero__title, .page-hero__title, .cta__link, .case-next__title, .case-hero__title {
  letter-spacing: -0.035em;
}
[dir='rtl'] .hero__title,
[dir='rtl'] .page-hero__title,
[dir='rtl'] .cta__link,
[dir='rtl'] .case-next__title,
[dir='rtl'] .case-hero__title {
  letter-spacing: 0;
  line-height: 1.22;
}

.statement { font-size: var(--step-4); line-height: 1.34; }
[dir='rtl'] .statement { line-height: 1.65; }

/* the gold accent never sits alone — it carries a soft halo */
.accent, .hero__line--grad { text-shadow: 0 0 42px rgba(232, 166, 19, 0.28); }

/* ------------------------------------------------------------
   10.02 — SURFACES · GLASS · HAIRLINES
------------------------------------------------------------ */
.section { padding-block: var(--section); }
.section--tint { background: linear-gradient(180deg, #e9f0ef 0%, #e3ecea 100%); }

/* a whisper of texture over every light surface */
.section--tint::before,
.section--surface::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: multiply;
}

/* glass header */
.site-header.is-scrolled {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 var(--color-hairline), 0 14px 40px rgba(4, 38, 45, 0.09);
}
.site-header::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(2, 110, 129, 0.28), transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.site-header.is-scrolled::after { opacity: 1; }

/* ------------------------------------------------------------
   10.03 — CONTROLS
------------------------------------------------------------ */
.btn {
  border-radius: 0;
  padding: 1.05rem 2rem;
  letter-spacing: 0.16em;
  box-shadow: var(--shadow-2);
  will-change: transform;
}
.btn::before { transform: translateY(101%); transition: transform 0.62s var(--ease-inout); }
.btn:hover, .btn:focus-visible {
  box-shadow: 0 16px 40px rgba(2, 110, 129, 0.28);
}
.btn--small { padding: 0.68rem 1.25rem; letter-spacing: 0.14em; }
.btn:active { transform: scale(0.985); }

/* the gold sweep is a highlight, not a fill — keeps text legible */
.btn::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -60%;
  width: 45%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  transition: inset-inline-start 0.7s var(--ease-out-expo), opacity 0.2s linear;
}
.btn:hover::after, .btn:focus-visible::after { inset-inline-start: 120%; opacity: 1; }

.link-arrow {
  padding-block-end: 0.45rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.link-arrow::after { height: 2px; background: currentColor; }
.link-arrow:hover { color: var(--color-accent); }

.tag {
  border-radius: 99px;
  padding: 0.4rem 0.9rem;
  background: transparent;
  border-color: var(--color-hairline);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.tag:hover { border-color: var(--color-primary); color: var(--color-primary); background: rgba(2, 110, 129, 0.06); }

/* ------------------------------------------------------------
   10.04 — HERO
------------------------------------------------------------ */
.hero {
  background:
    radial-gradient(120% 88% at 82% 6%, rgba(2, 110, 129, 0.42) 0%, transparent 58%),
    radial-gradient(80% 60% at 10% 92%, rgba(89, 146, 151, 0.20) 0%, transparent 60%),
    linear-gradient(180deg, #04262d 0%, #02171d 100%);
  isolation: isolate;
  /* the scroll cue lives in the bottom corner — reserve its lane so
     the hero foot never collides with it while the row wraps */
  padding-block-end: clamp(3.4rem, 7vw, 5.6rem);
}
.hero::after {
  content: '';
  position: absolute;
  inset-block-start: -18%;
  inset-inline-end: -6%;
  width: 44vw;
  height: 44vw;
  max-width: 620px;
  max-height: 620px;
  pointer-events: none;
  background: conic-gradient(from 180deg, rgba(232, 166, 19, 0.16), transparent 32%, rgba(129, 179, 178, 0.12) 58%, transparent 78%);
  filter: blur(48px);
  opacity: 0.75;
  animation: spinSlow 120s linear infinite;
  z-index: -1;
}
.hero__eyebrow {
  color: var(--color-light);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}
.hero__eyebrow::before {
  content: '';
  width: 2.4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent));
}
.hero__line--grad {
  background: linear-gradient(100deg, #f0c96a 4%, var(--color-accent) 30%, #9fd6cf 82%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: gradShift 9s ease-in-out infinite;
}
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.hero__foot { border-top-color: var(--color-hairline-ink); }
/* ------------------------------------------------------------
   10.05 — SECTION HEADS
------------------------------------------------------------ */
.eyebrow {
  gap: 0.75rem;
  margin-bottom: 1.6rem;
  color: var(--color-primary);
}
.eyebrow::before { width: 3.2rem; height: 2px; background: linear-gradient(90deg, var(--color-accent), rgba(232, 166, 19, 0)); }
.eyebrow__index {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  opacity: 0.5;
}

.section-head {
  position: relative;
  padding-block-end: clamp(1.6rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--color-hairline);
  align-items: flex-end;
}
.section-head__title { max-width: 17em; }

/* ------------------------------------------------------------
   10.06 — WORK GRID
------------------------------------------------------------ */
.work-tile { position: relative; }
.work-tile__visual {
  border-radius: 2px;
  box-shadow: var(--shadow-2);
  transition: transform 0.6s var(--ease-out-expo), box-shadow 0.6s var(--ease-out-expo);
}
.work-tile:hover .work-tile__visual { box-shadow: var(--shadow-4); }

/* cursor spotlight — the tile brightens where the pointer is */
.work-tile__visual::before {
  background: var(--art-bg, var(--color-primary));
}
.work-tile__visual::after {
  background:
    radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(232, 166, 19, 0.20), transparent 62%),
    linear-gradient(180deg, rgba(4, 38, 45, 0) 48%, rgba(4, 38, 45, 0.62) 100%),
    var(--art-pattern, none);
}
.work-tile__spot {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.22), transparent 60%);
  mix-blend-mode: soft-light;
}
.work-tile:hover .work-tile__spot { opacity: 1; }

.work-tile__num {
  z-index: 3;
  inset-block-start: 4%;
  inset-inline-end: 4%;
  font-variant-numeric: tabular-nums;
  transition: -webkit-text-stroke-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out-expo);
}
.work-tile:hover .work-tile__num { transform: translateY(-4px); }

.work-tile__view {
  z-index: 3;
  border-radius: 99px;
  padding: 0.7rem 1.3rem;
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  transform: translateY(180%) rotate(-4deg);
  transition: transform 0.5s var(--ease-spring), background var(--dur-fast) var(--ease-out);
}
.work-tile:hover .work-tile__view,
.work-tile:focus-visible .work-tile__view { transform: translateY(0) rotate(0deg); }
.work-tile:hover .work-tile__view { background: var(--color-accent); }

.work-tile__caption {
  position: relative;
  padding-block-start: 1.25rem;
  border-top: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out);
}
.work-tile:hover .work-tile__caption { border-top-color: var(--color-hairline); }
.work-tile__title {
  font-size: var(--step-2);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out-expo);
}
.work-tile:hover .work-tile__title { transform: translateY(-3px); }
.work-tile__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.work-tile__meta::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--color-accent);
  transform: rotate(45deg);
  flex: none;
}

/* ------------------------------------------------------------
   10.07 — SERVICES ROWS
------------------------------------------------------------ */
.svc-list { border-top: 0; }
.svc-item {
  border-bottom: 1px solid var(--color-hairline);
  transition: border-color var(--dur) var(--ease-out);
}
.svc-item:hover { border-bottom-color: rgba(2, 110, 129, 0.4); }
.svc-item__link::before {
  background: linear-gradient(100deg, var(--color-primary) 0%, #03798e 46%, var(--color-secondary) 82%, #6da3a8 100%);
}
.svc-item__link {
  padding: clamp(1.9rem, 3.4vw, 2.9rem) clamp(0.6rem, 1.5vw, 1.5rem);
  grid-template-columns: 5.5rem 1fr auto 3.5rem;
}
.svc-item__index {
  font-family: var(--font-num);
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.svc-item__title { font-size: var(--step-3); letter-spacing: -0.02em; }
[dir='rtl'] .svc-item__title { letter-spacing: 0; }
.svc-item__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-hairline);
  border-radius: 50%;
  font-size: 1.1rem;
  transition: transform var(--dur) var(--ease-spring),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.svc-item:hover .svc-item__arrow {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink);
  transform: scale(1.12) rotate(-45deg);
}
[dir='rtl'] .svc-item:hover .svc-item__arrow { transform: scale(1.12) rotate(45deg); }
.svc-item__body > span {
  font-size: var(--step-0);
  max-width: calc(56 * 0.52em);
  border-inline-start: 2px solid rgba(232, 166, 19, 0.55);
  padding-inline-start: 1.2rem;
}

/* ------------------------------------------------------------
   10.08 — PROCESS MAP
------------------------------------------------------------ */
.tmap {
  border-radius: 28px;
  border-color: rgba(129, 179, 178, 0.24);
  box-shadow: var(--shadow-4), inset 0 1px 0 rgba(244, 241, 233, 0.06);
}
.tmap__isle {
  transition: transform 0.5s var(--ease-spring), box-shadow 0.5s var(--ease-out);
}
.tmap__node:hover .tmap__isle { transform: translateY(-8px) scale(1.06); }
.tmap__title { font-size: var(--step-1); }
.tmap__desc { font-size: var(--step--1); }
.tmap__x {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(232, 166, 19, 0.4);
  border-radius: 99px;
}
/* the route lights up as it is drawn */
.tmap__progress {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 8px rgba(232, 166, 19, 0.7));
  transition: stroke-dashoffset 0.2s linear;
}

/* ------------------------------------------------------------
   10.09b — NUMBERS RAIL · CHAPTER MARK
   Wide proof band and oversized chapter numeral — two devices
   that break the vertical rhythm so a long page never reads as
   one long column.
------------------------------------------------------------ */
.rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2.6rem, 5vw, 4.2rem);
  border-block: 1px solid var(--color-hairline);
  position: relative;
}
.rail__cell {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding-inline-start: clamp(1rem, 2vw, 1.8rem);
  border-inline-start: 1px solid var(--color-hairline);
}
.rail__cell:first-child { border-inline-start: 0; padding-inline-start: 0; }
.rail__value {
  font-family: var(--font-num);
  font-size: var(--step-5);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-secondary) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  transition: transform var(--dur) var(--ease-out-expo);
}
.rail__cell:hover .rail__value { transform: translateY(-3px); }
.rail__label {
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}
[dir='rtl'] .rail__label { letter-spacing: 0; }
.rail__note { color: var(--color-muted); font-size: 0.92rem; }
.section--dark .rail { border-block-color: var(--color-hairline-ink); }
.section--dark .rail__cell { border-inline-start-color: var(--color-hairline-ink); }
.section--dark .rail__value {
  background: linear-gradient(120deg, var(--color-paper) 10%, var(--color-accent) 110%);
  -webkit-background-clip: text;
  background-clip: text;
}
.section--dark .rail__label, .section--dark .rail__note { color: var(--color-light); }

.chapter-mark {
  position: absolute;
  inset-block-start: clamp(1.6rem, 4vw, 3.2rem);
  inset-inline-end: 0;
  font-family: var(--font-num);
  font-size: clamp(5rem, 12vw, 11rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-hairline);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}
.page-hero { position: relative; }
.page-hero > .container { position: relative; z-index: 1; }
.page-hero .chapter-mark { -webkit-text-stroke-color: rgba(129, 179, 178, 0.22); }

/* ------------------------------------------------------------
   10.09 — CONTENT BLOCKS
------------------------------------------------------------ */
.pillars li {
  position: relative;
  padding-top: 1.7rem;
  border-top-width: 1px;
  border-top-color: var(--color-hairline);
  transition: border-color var(--dur) var(--ease-out);
}
.pillars li::before {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: 42px;
  height: 2px;
  background: var(--color-accent);
  transition: width 0.6s var(--ease-out-expo);
}
.pillars li:hover { border-top-color: transparent; }
.pillars li:hover::before { width: 100%; }
.pillars li span { font-size: var(--step-1); }
.pillars li p { font-size: var(--step-0); }

.approach__item {
  padding-top: 1.6rem;
  border-top-color: var(--color-hairline-ink);
  transition: border-color var(--dur) var(--ease-out);
}
.approach__item:hover { border-top-color: var(--color-accent); }

.stat {
  position: relative;
  padding-top: 1.4rem;
  transition: transform var(--dur) var(--ease-out-expo);
}
.stat:hover { transform: translateY(-4px); }
.stat__value {
  font-size: var(--step-5);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, var(--color-paper) 20%, var(--color-accent) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.principle {
  border-top-width: 1px;
  border-top-color: var(--color-hairline);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out-expo);
}
.principle:hover { border-top-color: var(--color-accent); transform: translateY(-4px); }
.principle h3 { font-size: var(--step-2); }


.about-band { box-shadow: var(--shadow-3); }
.about-band__num { letter-spacing: -0.04em; }

.cta { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.cta__link { max-width: 16em; }
.cta__arrow {
  transition: transform var(--dur) var(--ease-out-expo), color var(--dur-fast) var(--ease-out);
}
.cta__link:hover .cta__arrow { transform: translateX(0.5em); color: var(--color-paper); }
[dir='rtl'] .cta__link:hover .cta__arrow { transform: scaleX(-1) translateX(0.5em); }

.seaband { box-shadow: 0 -24px 60px rgba(4, 38, 45, 0.35); }

/* ------------------------------------------------------------
   10.10 — FORMS
------------------------------------------------------------ */
.field label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.field label::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--color-border);
  transform: rotate(45deg);
  transition: background var(--dur-fast) var(--ease-out);
}
.field:focus-within label { color: var(--color-primary); }
.field:focus-within label::before { background: var(--color-accent); }
.field input, .field textarea, .field select {
  padding-block: 0.95rem;
  font-size: var(--step-0);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.field input:hover, .field textarea:hover { border-bottom-color: rgba(2, 110, 129, 0.4); }
/* only for text fields — a shorthand here would wipe the select's arrow */
.field input:focus, .field textarea:focus {
  background: linear-gradient(180deg, transparent 62%, rgba(2, 110, 129, 0.06) 100%);
}
.field select:focus { border-bottom-color: var(--color-primary); }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-primary) 50%),
                    linear-gradient(135deg, var(--color-primary) 50%, transparent 50%);
  background-position: left 6px top 55%, left 12px top 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
[dir='rtl'] .field select { background-position: right 6px top 55%, right 12px top 55%; }
.contact-aside__block {
  border-top-width: 1px;
  border-top-color: var(--color-hairline);
  transition: border-color var(--dur) var(--ease-out);
}
.contact-aside__block:hover { border-top-color: var(--color-accent); }
.contact-aside__block a { transition: color var(--dur-fast) var(--ease-out); }

/* ------------------------------------------------------------
   10.11 — FOOTER
------------------------------------------------------------ */
.site-footer {
  position: relative;
  overflow: clip;
  border-top: 1px solid var(--color-hairline-ink);
}
.footer__grid { position: relative; z-index: 1; }
.footer__bottom { position: relative; z-index: 1; }
.footer__col ul { gap: 0.85rem; }
.footer__col a {
  display: inline-block;
  position: relative;
  color: rgba(244, 241, 233, 0.78);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out-expo);
}
.footer__col a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: -2px;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out-expo);
}
[dir='rtl'] .footer__col a::after { transform-origin: right center; }
.footer__col a:hover { color: var(--color-accent); transform: translateX(3px); }
[dir='rtl'] .footer__col a:hover { transform: translateX(-3px); }
.footer__col a:hover::after { transform: scaleX(1); }
.footer__tag { max-width: calc(34 * 0.52em); line-height: 1.8; }
[dir='rtl'] .footer__bottom, [dir='rtl'] .to-top { letter-spacing: 0; }

/* back-to-top becomes a progress dial */
.to-top {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--color-hairline-ink);
  border-radius: 99px;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.to-top:hover { border-color: var(--color-accent); background: rgba(232, 166, 19, 0.08); }
.to-top__ring { width: 22px; height: 22px; flex: none; transform: rotate(-90deg); }
.to-top__ring circle { fill: none; stroke-width: 2; }
.to-top__ring .bg { stroke: rgba(129, 179, 178, 0.28); }
.to-top__ring .fg { stroke: var(--color-accent); stroke-linecap: round; }

/* ------------------------------------------------------------
   10.12 — CURSOR
------------------------------------------------------------ */
.cursor-ring {
  display: grid;
  place-items: center;
  border-width: 1.5px;
  mix-blend-mode: normal;
}
.cursor-ring.is-hot {
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  background: rgba(232, 166, 19, 0.08);
  border-color: var(--color-accent);
  backdrop-filter: blur(2px);
}

/* ------------------------------------------------------------
   10.13 — MOTION · WORD MASKS · CLIP REVEALS
------------------------------------------------------------ */
[data-split] { display: block; }
.split-word {
  display: inline-block;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  transform: translateY(115%);
  transition: transform 1.05s var(--ease-out-expo);
  transition-delay: calc(var(--word-i, 0) * 55ms);
}
[data-split].is-inview .split-word { transform: translateY(0); }
[dir='rtl'] .split-word { transform: translateY(115%); }

/* clip-path wipe for media */
[data-reveal-media] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s var(--ease-out-expo);
  will-change: clip-path;
}
[data-reveal-media].is-inview { clip-path: inset(0 0 0 0); }

/* v2 reveals: a soft blur + lift reads richer than fade alone */
[data-reveal='v2'] { transform: translateY(26px); filter: blur(6px); transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo), filter 0.9s var(--ease-out-expo); }
[data-reveal='v2'].is-inview { filter: blur(0); }

/* scroll progress gains a glow head */
.scroll-progress {
  height: 3px;
  box-shadow: 0 0 14px rgba(232, 166, 19, 0.5);
}

/* the gold crest above the marquee is painted by .marquee::before and must
   keep both ends, so the edge fade lives on the track only */
.marquee__track { will-change: transform; }
.marquee__group { will-change: transform; }

/* ------------------------------------------------------------
   10.14 — RESPONSIVE
------------------------------------------------------------ */
@media (max-width: 1100px) {
  .svc-item__link { grid-template-columns: 4rem 1fr auto 3rem; }
  .svc-item__arrow { width: 38px; height: 38px; }
  .rail { grid-template-columns: repeat(2, 1fr); row-gap: clamp(1.8rem, 4vw, 2.6rem); }
  .rail__cell:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
}

@media (max-width: 940px) {
  .section-head { align-items: flex-start; flex-direction: column; gap: 1.2rem; }
  .rail { grid-template-columns: repeat(2, 1fr); row-gap: clamp(1.8rem, 4vw, 2.6rem); }
  .svc-item__title { font-size: var(--step-2); }
  .work-tile__caption { padding-block-start: 1rem; }
  .chapter-mark { display: none; }
}

@media (max-width: 640px) {
  .btn { padding: 0.95rem 1.5rem; }
  .svc-item__link { grid-template-columns: 3rem 1fr 2.6rem; padding-block: 1.6rem; }
  .svc-item__arrow { width: 34px; height: 34px; font-size: 0.95rem; }
  .svc-item__body > span { padding-inline-start: 0.9rem; }
  .pillars li::before { width: 28px; }
  .to-top { align-self: stretch; justify-content: center; }
  .rail { grid-template-columns: 1fr; row-gap: 1.6rem; }
  .rail__cell { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--color-hairline); padding-top: 1.2rem; }
  .rail__cell:first-child { border-top: 0; padding-top: 0; }
}

/* ------------------------------------------------------------
   10.15 — A11Y
------------------------------------------------------------ */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
::selection { background: var(--color-accent); color: var(--color-ink); }

@media (prefers-reduced-motion: reduce) {
  .hero__line--grad, .hero::after { animation: none !important; }
  .split-word, [data-reveal], [data-reveal='v2'], [data-reveal='mask'] { transform: none !important; filter: none !important; opacity: 1 !important; clip-path: none !important; transition: none !important; }
  [data-reveal-media] { clip-path: none !important; }
  .tmap__progress { transition: none !important; }
  .work-tile__spot { display: none; }
  .cursor-dot, .cursor-ring { display: none; }
  .btn::after { display: none; }
}

@media print {
  .to-top__ring, .scroll-progress { display: none !important; }
  .site-footer { background: #fff; color: #000; }
}

/* ------------------------------------------------------------
   10.17 — MOBILE MASTER PASS
   The last refinement layer: everything a visitor on a phone
   touches, sized and spaced for a thumb.
------------------------------------------------------------ */

/* older iOS: svh needs a vh fallback line to exist */
.gate, .hero { min-height: 100vh; }
.gate, .hero { min-height: 100svh; }

/* the fixed header must clear the notch */
.site-header { padding-top: env(safe-area-inset-top); }

/* — the language gate: two big thumb cards, a chevron
      that says "this is a door" — */
@media (max-width: 640px) {
  .gate {
    padding: calc(1.5rem + env(safe-area-inset-top)) 1.25rem
             calc(1.5rem + env(safe-area-inset-bottom));
  }
  .gate__brand { padding-block: 1.1rem; }
  .gate__brand .wordmark { font-size: clamp(1.7rem, 8.5vw, 2.4rem); letter-spacing: 0.28em; text-indent: 0.28em; }
  .gate__tag { font-size: 0.72rem; }
  .gate__choices { grid-template-columns: 1fr; width: 100%; border: 0; gap: 0.9rem; }
  .gate__choice {
    position: relative;
    min-height: 22svh;
    justify-content: center;
    border: 1px solid rgba(129, 179, 178, 0.3);
    border-radius: 6px;
    padding: 1.5rem 1.25rem;
  }
  .gate__choice strong { font-size: clamp(1.9rem, 8vw, 2.8rem); }
  .gate__choice small { font-size: 0.7rem; }
  .gate__choice::after {
    content: '';
    position: absolute;
    inset-block-end: 1.2rem;
    inset-inline-end: 1.2rem;
    width: 11px;
    height: 11px;
    border-top: 2px solid var(--color-accent);
    border-inline-end: 2px solid var(--color-accent);
    transform: rotate(45deg);
    transition: transform var(--dur) var(--ease-out);
  }
  [dir='rtl'] .gate__choice::after { transform: rotate(225deg); }
  .gate__choice:hover::after,
  .gate__choice:focus-visible::after { transform: rotate(45deg) translate(3px, 0); }
  [dir='rtl'] .gate__choice:hover::after,
  [dir='rtl'] .gate__choice:focus-visible::after { transform: rotate(225deg) translate(3px, 0); }
  .gate__note { margin-top: 0.3rem; }
}

/* — mobile menu: scannable rows with hairlines,
      generous targets, full-width foot actions — */
@media (max-width: 640px) {
  .mobile-menu__links { gap: 0; width: 100%; }
  .mobile-menu__links a {
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding-inline: 0.25rem;
    border-bottom: 1px solid rgba(244, 241, 233, 0.10);
  }
  .mobile-menu__links a:last-child { border-bottom: 0; }
  .mobile-menu__links a span { min-width: 2.2em; }
  .mobile-menu__foot {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
  }
  .mobile-menu__foot > a:first-child {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-small);
    letter-spacing: 0.06em;
  }
  .mobile-menu__foot .lang-switch { align-self: flex-start; }
  .mobile-menu__foot .lang-switch a { min-height: 44px; min-width: 52px; }
}

/* — forms: fat fingers never miss — */
@media (max-width: 640px) {
  .form-rows { gap: 1.3rem; }
  .field input, .field textarea, .field select { padding-block: 1rem; }
  .field select { background-position: left 10px top 55%, left 16px top 55%; }
  [dir='rtl'] .field select { background-position: right 10px top 55%, right 16px top 55%; }
  form .btn { width: 100%; justify-content: center; min-height: 52px; }
  .form-status, .form-success, .form-fallback { font-size: var(--step-0); }
  .contact-aside__block a { font-size: var(--step-2); }
  .contact-aside__social { gap: 1.8rem; }
  .contact-aside__social a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* — work tiles: bigger thumbs on small phones — */
@media (max-width: 430px) {
  .work-tile--a .work-tile__visual { aspect-ratio: 3 / 4; }
  .work-tile--b .work-tile__visual { aspect-ratio: 1104 / 1425; }
  .work-tile--c .work-tile__visual { aspect-ratio: 1280 / 670; }
  .work-tile--d .work-tile__visual,
  .work-tile--f .work-tile__visual { aspect-ratio: 4 / 3; }
  .work-tile__caption { padding-block-start: 0.9rem; }
  .work-tile__meta { flex-wrap: wrap; }
  .marquee__group { font-size: 0.85rem; letter-spacing: 0.1em; }
}

/* — process map: compact rows on phones — */
@media (max-width: 940px) {
  .tmap__node { grid-template-columns: 64px 1fr; gap: 1rem; align-items: center; }
  .tmap__isle { width: 64px; height: 58px; font-size: 1rem; }
  .tmap__isle--treasure { width: 78px; height: 70px; }
  .tmap__isle--treasure svg { width: 30px; }
  .tmap__title { margin-top: 0; font-size: var(--step-1); }
  .tmap__desc { font-size: 0.9rem; }
}

/* — footer: thumb-sized links — */
@media (max-width: 640px) {
  .footer__col a { min-height: 44px; display: inline-flex; align-items: center; }
  .footer__col ul { gap: 0.4rem; }
  .footer__bottom a { min-height: 48px; display: inline-flex; align-items: center; }
  .footer__tag { max-width: 100%; }
}

/* — inner page heroes: breathe — */
@media (max-width: 640px) {
  .page-hero { padding-block: calc(var(--header-h) + 1.6rem) clamp(2.6rem, 7vw, 4rem); }
  .page-hero__title { font-size: var(--step-4); }
  .page-hero__lead { font-size: var(--step-1); }
  .case-hero { padding-block: calc(var(--header-h) + 1.4rem) 2rem; }
  .case-hero__title { font-size: var(--step-4); }
  .case-hero__intro { font-size: var(--step-1); }
  .case-hero__visual { aspect-ratio: var(--case-ar, 16 / 10); }
  .case-meta { gap: 1.4rem; }
  .case-section__head h2 { font-size: var(--step-3); }
  .case-section__body { font-size: var(--step-1); }
  .case-step p { font-size: var(--step-0); }
}

/* universal: no purple tap flash, no double-tap zoom delay */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

   

/* ============================================================
   CLIENTS SHOWCASE v3
   One deep-sea stage, two counter-moving rails, and a single
   card style for every brand: warm white card + the logo's own
   colours. Artwork that was white now ships pre-tinted in
   assets/img/worked_logo/clean/, so nothing disappears and no
   card has a different background from its neighbours.
============================================================ */
.clients--stage {
  --stage-ink: #04262d;
  isolation: isolate;
  overflow: clip;
  color: var(--color-paper);
  background:
    radial-gradient(1200px 520px at 12% 0%, rgba(2, 110, 129, 0.55), transparent 62%),
    radial-gradient(900px 480px at 100% 100%, rgba(232, 166, 19, 0.16), transparent 60%),
    linear-gradient(180deg, #04262d 0%, #03333d 52%, #04262d 100%);
  --heading-ink: var(--color-paper);
}
.clients--stage::before {            /* gold hairline on the top edge */
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(232, 166, 19, 0.85), transparent);
}
.clients__grid {                      /* faint dotted chart-paper texture */
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(129, 179, 178, 0.22) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 55%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 65% at 50% 55%, #000 20%, transparent 78%);
}
.clients__glow {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
.clients__glow--a {
  width: 38vw; height: 38vw; max-width: 560px; max-height: 560px;
  inset-block-start: -14%; inset-inline-start: -8%;
  background: rgba(2, 110, 129, 0.55);
  animation: clientsGlowA 16s ease-in-out infinite alternate;
}
.clients__glow--b {
  width: 30vw; height: 30vw; max-width: 460px; max-height: 460px;
  inset-block-end: -16%; inset-inline-end: -6%;
  background: rgba(232, 166, 19, 0.22);
  animation: clientsGlowB 19s ease-in-out infinite alternate;
}
@keyframes clientsGlowA { to { transform: translate3d(8vw, 6vw, 0) scale(1.15); } }
@keyframes clientsGlowB { to { transform: translate3d(-7vw, -5vw, 0) scale(1.2); } }

/* heading + copy on the dark stage */
.clients--stage .section-head__title { color: var(--color-paper); }
.clients--stage .eyebrow { color: var(--color-light); }
.clients--stage .clients__lead { color: rgba(244, 241, 233, 0.74); }
.clients--stage .clients__count {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.clients--stage .clients__count-num {
  background: linear-gradient(180deg, #fff3c9 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.clients--stage .clients__count-num i { font-style: normal; }
.clients--stage .clients__count-label { color: var(--color-light); }

/* rails */
.showcase {
  display: grid;
  gap: clamp(0.95rem, 1.7vw, 1.45rem);
  margin-top: clamp(2.6rem, 5vw, 4.4rem);
}
.clients--stage .showcase__row {
  background: transparent;
  border: 0;
  padding-block: 14px 26px;           /* room for the hover lift + shadow */
  margin-block: -14px -26px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.clients--stage .showcase__row::before {
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(232, 166, 19, 0.2), transparent 65%);
}
.clients--stage .showcase__row .marquee__track { position: relative; z-index: 1; }
.showcase__row--b .marquee__track { animation-direction: reverse; }
.clients--stage .logo-strip__group { gap: clamp(0.95rem, 1.7vw, 1.45rem); padding-inline-end: clamp(0.95rem, 1.7vw, 1.45rem); }

/* the one card every brand shares */
.brand-card {
  position: relative;
  flex: none;
  width: clamp(168px, 17vw, 250px);
  height: clamp(92px, 9.4vw, 128px);
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(160deg, #ffffff 0%, #f7f3e9 100%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 18px 34px -16px rgba(0, 0, 0, 0.7),
    0 2px 6px rgba(0, 0, 0, 0.18),
    inset 0 -3px 0 rgba(4, 38, 45, 0.06);
  transition:
    transform 0.55s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow 0.5s var(--ease-out),
    border-color 0.4s var(--ease-out);
}
.brand-card .brand-card__img {
  position: absolute;
  inset: clamp(0.8rem, 1.5vw, 1.15rem) clamp(1rem, 2vw, 1.6rem);
  width: calc(100% - 2 * clamp(1rem, 2vw, 1.6rem));
  height: calc(100% - 2 * clamp(0.8rem, 1.5vw, 1.15rem));
  max-width: none;
  object-fit: contain;
  z-index: 1;
  transition: transform 0.6s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.brand-card::before {                 /* gold underline that grows on hover */
  content: '';
  position: absolute;
  inset: auto 18% 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  transform: scaleX(0);
  transition: transform 0.5s var(--ease-out);
  z-index: 2;
}
.brand-card::after {                  /* light sweep */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 36%, rgba(232, 166, 19, 0.22) 50%, transparent 64%);
  transform: translateX(-120%);
}
.brand-card:hover {
  transform: translateY(-9px) scale(1.045);
  border-color: var(--color-accent);
  box-shadow:
    0 30px 50px -18px rgba(0, 0, 0, 0.75),
    0 0 0 4px rgba(232, 166, 19, 0.28),
    0 0 44px -6px rgba(232, 166, 19, 0.4);
}
.brand-card:hover::before { transform: scaleX(1); }
.brand-card:hover::after { opacity: 1; animation: tileSheen 0.9s var(--ease-out); }
.brand-card:hover .brand-card__img { transform: scale(1.07); }

/* cards rise in sequence the first time a rail scrolls into view */
.showcase__row.is-inview .brand-card {
  animation: brandCardIn 0.75s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes brandCardIn {
  from { opacity: 0; transform: translateY(22px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 940px) {
  .showcase__row.is-inview .brand-card { animation: none; }
  .clients__glow { filter: blur(50px); }
}
@media (max-width: 640px) {
  .brand-card { border-radius: 16px; }
  .clients--stage .showcase__row { padding-block: 8px 16px; margin-block: -8px -16px; }
}
@media (prefers-reduced-motion: reduce) {
  .clients__glow, .showcase__row.is-inview .brand-card { animation: none; }
  .brand-card:hover::after { animation: none; }
}

/* clients header: the text column used to shrink-wrap to ~180px (the lead
   wrapped word by word). Let it take the free width; the count pill keeps its own size. */
.clients--stage .clients__head > div { flex: 1 1 520px; min-width: 0; }
.clients--stage .clients__head .clients__count { flex: none; }
.clients--stage .clients__head { border-bottom-color: rgba(255, 255, 255, 0.12); }
.clients--stage .clients__lead { max-width: 40rem; }  /* not ch: the body font reports a ~4px "0", which squeezed the lead to 208px */

/* Persian page: row A uses the RTL keyframes (travels right); row B is an LTR track
   so it travels left. Opposite directions without tearing a gap in either strip. */
html[dir='rtl'] .showcase__row--a .marquee__track { animation-direction: normal; }
html[dir='rtl'] .showcase__row--b .marquee__track { animation-name: marqueeMove; animation-direction: normal; }
html[dir='rtl'] .clients--stage .clients__lead { max-width: 40rem; }