/* ============================================================
   THE'Y STUDIO DESIGN — Phase 1
   Design tokens & component system (Blueprint §9)
   Single source of truth: future modules consume these tokens.
   ============================================================ */

/* ---------- 1. Tokens (§9.1–9.6) ---------- */
:root {
  /* Color — Ink is home */
  --ink-950: #0F0F0E;
  --ink-900: #161615;
  --ink-800: #1F1F1D;
  --paper-50: #F4F3F0;
  --paper-100: #EAE8E3;

  --surface: var(--ink-950);
  --surface-raised: var(--ink-900);
  --surface-card: var(--ink-800);
  --text-1: #FFFFFF;
  --text-2: #9A9A96;
  --line: rgba(255, 255, 255, .14);

  /* One accent, <5% of any viewport (§9.1). Change here only. */
  --accent: #E8FF47;
  --accent-ink: #131308;

  /* Semantic (forms only) */
  --ok: #7FA98A;
  --err: #C98B80;

  /* Type (§9.2) */
  --font-sans: "General Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "Sentient", Georgia, serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", monospace;

  --fs-display-xl: clamp(56px, 10.5vw, 160px);
  --fs-display: clamp(40px, 6.4vw, 96px);
  --fs-h1: clamp(34px, 4.4vw, 64px);
  --fs-h2: clamp(28px, 3vw, 40px);
  --fs-h3: clamp(20px, 1.8vw, 24px);
  --fs-body-lg: 20px;
  --fs-body: 17px;
  --fs-body-sm: 16px;   /* supporting copy — never below this for reading text */
  --fs-label: 13px;

  /* Space (§9.4) — 8pt scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px; --sp-11: 160px; --sp-12: 240px;
  --section: clamp(96px, 14vw, 240px);

  /* Radius (§9.6) */
  --r-0: 0; --r-sm: 8px; --r-md: 12px; --r-pill: 999px;

  /* Motion (§9.5) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-move: cubic-bezier(.65, 0, .35, 1);
  --t-micro: 200ms;
  --t-reveal: 700ms;
  --t-page: 700ms;

  /* Layout (§9.3) */
  --margin: clamp(24px, 6.5vw, 96px);
  --max-w: 1440px;

  --shadow-media: 0 24px 64px rgba(17, 17, 16, .08);
}

/* Paper surface — case-study reading (§9.1). Paper is light in both themes,
   so it always carries the light-surface accent remap (see §26):
   on light surfaces the accent role resolves to ink — no lime at all. */
.surface-paper {
  --surface: var(--paper-50);
  --surface-raised: var(--paper-100);
  --surface-card: #FFFFFF;
  --text-1: #111110;
  --text-2: #6B6A66;
  --line: rgba(17, 17, 16, .14);
  --accent: #111110;
  --accent-ink: #FFFFFF;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  background: var(--surface);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 1px solid var(--focus, var(--accent));
  outline-offset: 4px;
  border-radius: 2px;
}

.skip-link {
  position: fixed; top: -60px; left: var(--sp-5); z-index: 300;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 20px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600;
  transition: top var(--t-micro) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); }

/* ---------- 3. Typography ---------- */
.display-xl, .display, .h1, .h2 {
  font-weight: 300;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.display-xl { font-size: var(--fs-display-xl); line-height: .95; }
.display { font-size: var(--fs-display); line-height: 1.0; }
.h1 { font-size: var(--fs-h1); line-height: 1.05; }
.h2 { font-size: var(--fs-h2); line-height: 1.15; }
.h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.body-lg { font-size: var(--fs-body-lg); line-height: 1.6; }
strong, b { font-weight: 700; }

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 400;
}

/* Section headings — editorial hierarchy upgrade. Section titles used to
   be bare 12.5px mono labels; each now pairs a small mono index eyebrow
   with a light display-scale title (same voice as .cap-title /
   .pillar-title). The old label class stays for tags, metadata and
   footer columns. (.section-head, below in §5, is the one flex row on
   the home Selected-work section: heading block + "All work" link.) */
.section-heading { margin-bottom: var(--sp-7); }
.section-heading .label { display: block; margin-bottom: var(--sp-4); }
.section-title {
  font-size: clamp(30px, 3.8vw, 52px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
  color: var(--text-1);
  max-width: 22ch;
}
html[lang="ar"] .section-title { letter-spacing: 0; line-height: 1.25; }
.serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
.muted { color: var(--text-2); }
.measure { max-width: 68ch; }
.measure-narrow { max-width: 44ch; }

/* ---------- 4. Layout ---------- */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--margin);
}
.section { padding-block: var(--section); }
.section-tight { padding-block: clamp(64px, 9vw, 160px); }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); margin-bottom: clamp(40px, 6vw, 96px);
}
.section-head .section-heading { margin-bottom: 0; }
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2.2vw, 32px);
}
.hairline { border: 0; border-top: 1px solid var(--line); }

/* ---------- 5. Buttons & links (§9.8) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 30px;
  border-radius: var(--r-pill);
  font-size: 15px; font-weight: 500; letter-spacing: .01em;
  line-height: 1;
  transition: background var(--t-micro) var(--ease-out),
              color var(--t-micro) var(--ease-out),
              border-color var(--t-micro) var(--ease-out),
              transform var(--t-micro) var(--ease-out);
  will-change: transform;
}
.btn .arrow { transition: transform var(--t-micro) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--text-1); color: var(--surface); }

.btn-outline { border: 1px solid var(--line); color: var(--text-1); }
.btn-outline:hover { background: var(--text-1); color: var(--surface); border-color: var(--text-1); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500;
}
.link-arrow .arrow { transition: transform var(--t-micro) var(--ease-out); }
.link-arrow:hover .arrow { transform: translateX(5px); }

.link-u { position: relative; }
.link-u::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-micro) var(--ease-out);
}
.link-u:hover::after { transform: scaleX(1); }

/* ---------- 6. Header (§1.3) ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  transition: transform 420ms var(--ease-move), background 420ms var(--ease-out);
  transform: translateY(0);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
/* Text tiers (wordmark, nav, language) share one true baseline; controls
   (theme toggle, CTA pill, burger) opt out and center themselves. */
.header-inner {
  max-width: var(--max-w); margin-inline: auto;
  padding: 18px var(--margin);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-5);
}
.theme-toggle, .header-cta, .menu-toggle { align-self: center; }
.wordmark {
  font-size: 49px; font-weight: 300; letter-spacing: .32em; line-height: 1;
  white-space: nowrap;
}
.wordmark b { font-weight: 800; letter-spacing: 0; }
.main-nav { display: flex; align-items: center; gap: clamp(24px, 3vw, 44px); }
.main-nav a {
  font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2); position: relative;
  transition: color var(--t-micro) var(--ease-out);
  padding-block: 8px 4px;
}
.main-nav a:hover { color: var(--text-1); }
.main-nav a[aria-current="page"] { color: var(--text-1); }
.main-nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: 50%; bottom: -4px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); transform: translateX(-50%);
}
/* Header CTA: always the accent-filled primary (both themes) — never outlined. */
.header-cta { padding: 12px 22px; font-size: 13.5px; font-weight: 500; }

.menu-toggle {
  display: none; width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: center; gap: 7px;
}
.menu-toggle span {
  display: block; width: 24px; height: 1.5px; background: var(--text-1);
  transition: transform var(--t-micro) var(--ease-move), opacity var(--t-micro);
}
.menu-open .menu-toggle span:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-open .menu-toggle span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

/* Mobile overlay — a brand moment (§1.3) */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--surface); color: var(--text-1);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-9) var(--margin) var(--sp-7);
  opacity: 0; visibility: hidden;
  transition: opacity 480ms var(--ease-out), visibility 0s linear 480ms;
}
.menu-open .mobile-menu { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu nav a {
  font-size: clamp(40px, 10vw, 72px);
  font-weight: 300; letter-spacing: -0.02em; line-height: 1.15;
  transform: translateY(28px); opacity: 0;
  transition: transform 600ms var(--ease-out), opacity 600ms var(--ease-out);
}
.mobile-menu nav a[aria-current="page"] { color: var(--accent); }
.menu-open .mobile-menu nav a { transform: translateY(0); opacity: 1; }
.menu-open .mobile-menu nav a:nth-child(1) { transition-delay: 80ms; }
.menu-open .mobile-menu nav a:nth-child(2) { transition-delay: 150ms; }
.menu-open .mobile-menu nav a:nth-child(3) { transition-delay: 220ms; }
.menu-open .mobile-menu nav a:nth-child(4) { transition-delay: 290ms; }
.menu-open .mobile-menu nav a:nth-child(5) { transition-delay: 360ms; }
.mobile-menu-foot {
  margin-top: var(--sp-8); display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transition: opacity 600ms var(--ease-out) 420ms;
}
.menu-open .mobile-menu-foot { opacity: 1; }

@media (max-width: 900px) {
  .main-nav, .header-cta { display: none; }
  .menu-toggle { display: flex; }
}
.menu-open { overflow: hidden; }

/* ---------- 7. Footer (§1.4) ---------- */
.site-footer { position: relative; overflow: clip; border-top: 1px solid var(--line); }
.footer-cta { padding-block: var(--section); text-align: left; }
.footer-cta .display { max-width: 12ch; }
.footer-cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-7); }
.footer-cols {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-8);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-7);
}
.footer-cols h4 { margin-bottom: var(--sp-4); }
.footer-cols ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-cols a { color: var(--text-2); transition: color var(--t-micro); font-size: var(--fs-body-sm); }
.footer-cols a:hover { color: var(--text-1); }
.footer-cols p { color: var(--text-2); font-size: var(--fs-body-sm); }
.copy-email {
  color: var(--text-1); font-size: var(--fs-body-sm); text-align: left; padding: 0;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--t-micro);
}
.copy-email:hover { border-color: var(--text-1); }
.copy-email.copied { color: var(--accent); border-color: var(--accent); }
.footer-baseline {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-5);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  font-size: 14px; color: var(--text-2);
  position: relative; z-index: 2;
}
.footer-baseline .legal { display: flex; gap: var(--sp-4); }
.footer-baseline a:hover { color: var(--text-1); }
.lang-switch span[aria-disabled="true"] { opacity: .45; cursor: default; }

.footer-watermark {
  pointer-events: none; user-select: none;
  font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(120px, 24vw, 380px);
  line-height: .72;
  text-align: center;
  color: var(--text-1);
  opacity: .05;
  margin-bottom: -0.12em;
  transform: translateY(30%);
  transition: transform 1s var(--ease-out);
}
.footer-watermark.in { transform: translateY(12%); }
@media (max-width: 700px) { .footer-cols { grid-template-columns: 1fr; } }

/* ---------- 8. Reveal system (§9.5) ---------- */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.in { opacity: 1; transform: none; }

/* Above-the-fold entrance: pure CSS, starts at first paint (no JS wait) */
.reveal-load {
  animation: reveal-rise var(--t-reveal) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
/* transform-only: painted from the first frame → no LCP penalty */
@keyframes reveal-rise {
  from { transform: translateY(26px); }
  to   { transform: none; }
}

/* The mask bleeds .2em vertically (negative margins cancel it in layout) so
   ascenders, descenders and Arabic diacritics never clip — one shared rule
   for every script. The hidden word starts deeper to stay behind the mask. */
.reveal-line { display: block; overflow: hidden; padding-block: .2em; margin-block: -.2em; }
.reveal-word {
  display: inline-block;
  transform: translateY(150%);
  transition: transform 900ms var(--ease-out);
}
.words-in .reveal-word { transform: translateY(0); }

.reveal-media { position: relative; overflow: hidden; }
.reveal-media::after {
  content: ""; position: absolute; inset: 0; background: var(--surface);
  transform: scaleY(1); transform-origin: bottom;
  transition: transform 900ms var(--ease-out);
}
.reveal-media.in::after { transform: scaleY(0); }

.draw-line { transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-out); }
.draw-line.in { transform: scaleX(1); }

/* Ink reveal — manifesto scroll moment */
.ink-reveal .w { color: var(--text-1); opacity: .18; transition: opacity 300ms linear; }
.ink-reveal .w.lit { opacity: 1; }

/* ---------- 9. Home — Hero (§3.1) ---------- */
.hero {
  min-height: 92svh;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
  padding-top: 120px;
  padding-bottom: 120px;
  overflow: clip; /* the ambient glow drifts ±3% — never let it create scroll overflow (RTL) */
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 68% 52% at 50% 38%, var(--hero-glow, rgba(255,255,255,.05)), transparent 70%);
  animation: light-drift 22s var(--ease-move) infinite alternate;
}
@keyframes light-drift {
  from { transform: translate3d(-3%, -2%, 0); }
  to   { transform: translate3d(3%, 2%, 0); }
}
.hero-statement { max-width: 12ch; }
.hero-sub { margin-top: var(--sp-6); max-width: 60ch; color: var(--text-2); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); margin-top: var(--sp-7); }
.scroll-cue {
  position: absolute; bottom: var(--sp-6); left: var(--margin);
  display: flex; align-items: center; gap: 12px;
  color: var(--text-2);
}
@media (max-height: 700px) { .scroll-cue { display: none; } }
.scroll-cue::before {
  content: ""; width: 40px; height: 1px; background: var(--line);
}

/* ---------- 9b. Home — Hero v2 (full redesign, all locales) ----------
   Everything below is scoped under .hero-v2 (a modifier class added only
   to the homepage hero). One shared component serves /, /fr/ and /ar/;
   only the translated text differs. */
.hero.hero-v2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 92svh;
  padding-top: clamp(112px, 13vh, 160px);
  padding-bottom: var(--sp-6);
}

/* ---- Premium ambient background (hero v2, all locales) ----
   Four stacked layers, all beneath the content (z-index 0 vs 1):
     1. radial glow      — existing .hero::before (kept, very subtle)
     2. gradient orb     — softness baked into the radial falloff
                           (no filter:blur — cheap to paint, then the
                           26s float is transform-only on its own layer)
     3. animated grain   — tiny inline-SVG turbulence tile, oversized
                           element repositioned by stepped translate3d
     4. vignette         — static radial gradient, no animation
   GPU budget: only transform animates; orb + grain are promoted via
   will-change. No JS, no libraries, ~1.5KB of CSS. Reduced-motion
   users get the static composition (global kill switch + explicit). */
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; }
.hero-v2 > :not(.hero-bg) { position: relative; z-index: 1; }
.hero-v2::before { z-index: 0; }
.hero-v2::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--hero-vignette);
}
.hero-bg-orb {
  position: absolute; top: -18%; inset-inline-end: -10%;
  width: clamp(520px, 58vw, 960px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--hero-orb) 0%, var(--hero-orb-soft) 40%, transparent 70%);
  will-change: transform;
  animation: orb-float 26s ease-in-out infinite;
}
@keyframes orb-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-9%, 12%, 0) scale(1.12); }
}
.hero-bg-grain {
  position: absolute; top: -60%; left: -60%; width: 220%; height: 220%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23g)' opacity='.55'/></svg>");
  background-size: 160px 160px;
  opacity: var(--hero-grain);
  will-change: transform;
  animation: grain-shift 1.6s steps(2, jump-none) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-3%, 2%, 0); }
  40%  { transform: translate3d(2%, -3%, 0); }
  60%  { transform: translate3d(-1%, -2%, 0); }
  80%  { transform: translate3d(3%, 1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ---- Light mode: elevated hero ambience (§9b-light) ----
   On the warm-white surface the ink orb + grain read as nearly blank, so
   Light Mode composes two extra layers on the empty inline-end half of the
   hero (the side opposite the statement — flips automatically for RTL):
     a. warm aurora   — three soft pools in warm neutrals drawn from the
                        surface family (no color, no lime — see §26),
                        breathing slowly, transform-only on its own layer
     b. drafting grid — 1px ink hairlines masked toward the empty side,
                        drifting diagonally (seamless 96px tile)
   Both are pseudo-elements of the existing .hero-bg, so /, /fr/ and /ar/
   inherit them with zero markup changes. Dark mode is untouched: every
   rule is scoped under html[data-theme="light"]. RTL mirrors the layers
   with the independent `scale` property, which composes with the
   `transform` keyframes instead of being overwritten by them. */
html[data-theme="light"] .hero-bg::before {
  content: ""; position: absolute; inset: -14%;
  background:
    radial-gradient(ellipse 34% 44% at 76% 26%, rgba(211, 202, 180, .72), transparent 70%),
    radial-gradient(ellipse 30% 40% at 90% 66%, rgba(196, 190, 171, .55), transparent 70%),
    radial-gradient(ellipse 26% 34% at 64% 58%, rgba(229, 225, 212, .9), transparent 70%);
  will-change: transform;
  animation: aurora-breathe 19s ease-in-out infinite alternate;
}
@keyframes aurora-breathe {
  from { transform: translate3d(-1.5%, -2%, 0) scale(1); }
  to   { transform: translate3d(1.5%, 2.5%, 0) scale(1.07); }
}
html[data-theme="light"] .hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(17, 17, 16, .085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 17, 16, .085) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(ellipse 62% 78% at 82% 42%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 62% 78% at 82% 42%, #000 0%, transparent 72%);
  animation: grid-drift 46s linear infinite;
}
@keyframes grid-drift {
  from { background-position: 0 0; }
  to   { background-position: 96px 96px; }
}
[dir="rtl"] .hero-bg::before,
[dir="rtl"] .hero-bg::after { scale: -1 1; }

.hero-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
}
.hero-status {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
}
.hero-status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none;
  animation: hero-pulse 2.4s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) { .hero-status-dot { animation: none; } }
@keyframes hero-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

.hero-rule { display: block; height: 1px; width: 100%; background: var(--line); margin-block: var(--sp-5); }

.hero-main { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; padding-block: var(--sp-3); }
/* One shared scale for EN / FR / AR. Line breaks are authored in the markup
   (<br>) so every language composes the same two balanced lines; the size is
   tuned so the longest localized line still fits at every breakpoint. */
.hero-v2 .hero-statement {
  max-width: none;
  font-size: clamp(52px, 8.6vw, 138px);
  letter-spacing: -0.03em;
}
/* Punchline lands in the one accent color in the hero — same lime as the CTA (§9.1).
   Dark mode only: on light surfaces the hero speaks in pure ink (see §26). */
.hero-v2 .hero-statement .reveal-line:last-of-type .reveal-word { color: var(--accent); }

.hero-body {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: clamp(var(--sp-6), 4vw, var(--sp-9));
  margin-top: clamp(var(--sp-6), 3.5vw, var(--sp-8));
}
.hero-v2 .hero-sub { margin-top: 0; max-width: 46ch; }
.hero-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
.hero-cta-note { display: block; margin-top: var(--sp-3); }

.hero-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4) var(--sp-7);
}
.hero-v2 .scroll-cue { position: static; bottom: auto; left: auto; }
.hero-proof { display: flex; flex-wrap: wrap; gap: var(--sp-6); color: var(--text-2); font-size: 15px; }
.hero-proof .num { font-family: var(--font-serif); color: var(--text-1); font-weight: 400; }
.hero-clock { white-space: nowrap; }
@media (max-width: 700px) { .hero-clock { display: none; } }

/* ---------- 10. Home — Selected Work (§3.2) ---------- */
.work-entry { display: block; margin-bottom: clamp(80px, 10vw, 120px); }
.work-entry:last-of-type { margin-bottom: 0; }
.work-media {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-0);
  overflow: hidden;
  position: relative;
  background: var(--surface-raised);
}
.work-media .media-fill {
  position: absolute; inset: 0;
  transition: transform 1.1s var(--ease-out);
  will-change: transform;
  display: flex; align-items: center; justify-content: center;
}
.work-entry:hover .media-fill { transform: scale(1.05); }
.work-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-top: var(--sp-5);
}
.work-meta .h2 { font-weight: 300; }
.work-outcome { color: var(--text-2); font-size: var(--fs-body-lg); margin-top: 6px; }
.work-tags { display: flex; gap: var(--sp-4); }
.work-pair {
  display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.work-pair .work-media.tall { aspect-ratio: 4 / 5; }
@media (max-width: 800px) { .work-pair { grid-template-columns: 1fr; } }

/* Abstract media placeholders — replaced by real project media */
.media-fill.ph { font-weight: 300; letter-spacing: -0.02em; }
.ph-mark { font-size: clamp(48px, 8vw, 130px); opacity: .92; line-height: 1; }
.ph-a { background: linear-gradient(135deg, #23231F, #0F0F0E 60%); color: #E8E6DF; }
.ph-b { background: linear-gradient(160deg, #2A2118, #14100C 65%); color: #E9DCC8; }
.ph-c { background: linear-gradient(150deg, #1B2320, #0E1311 60%); color: #D7E4DB; }
.ph-d { background: linear-gradient(140deg, #232027, #121016 60%); color: #DFD9E8; }
.ph-e { background: linear-gradient(155deg, #262420, #100F0D 60%); color: #EDEAE2; }
.ph-f { background: linear-gradient(150deg, #1C1B18, #0A0A09 60%); color: #C8A57B; }

/* Real project media */
.media-fill img, .cs-figure .frame img, .cs-hero .cs-visual img, .ba-pane img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---------- 11. Home — Capabilities (§3.3) ---------- */
.cap-list { list-style: none; }
.cap-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(16px, 4vw, 64px);
  padding-block: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--line);
  transition: opacity var(--t-micro) var(--ease-out);
}
.cap-list:hover .cap-row { opacity: .35; }
.cap-list .cap-row:hover { opacity: 1; }
.cap-row:last-child { border-bottom: 1px solid var(--line); }
.cap-num { font-family: var(--font-mono); font-size: 14px; color: var(--text-2); }
.cap-title { font-size: clamp(28px, 4.4vw, 56px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; }
.cap-desc { color: var(--text-2); max-width: 34ch; text-align: end; font-size: var(--fs-body-sm); }
.cap-row .go {
  opacity: 0; transform: translateX(-8px);
  transition: opacity var(--t-micro) var(--ease-out), transform var(--t-micro) var(--ease-out);
  white-space: nowrap; font-size: 15px; color: var(--text-1);
}
.cap-row:hover .go { opacity: 1; transform: none; }
@media (max-width: 700px) {
  .cap-row { grid-template-columns: auto 1fr; }
  .cap-desc { grid-column: 2; text-align: left; }
  .cap-row .go { display: none; }
}

/* ---------- 12. Home — Ethos (§3.4) ---------- */
.ethos { text-align: center; }
.ethos .manifesto {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(30px, 4.6vw, 64px);
  line-height: 1.25; letter-spacing: -0.01em;
  max-width: 22ch; margin-inline: auto;
}
.ethos-body { max-width: 52ch; margin: var(--sp-7) auto 0; color: var(--text-2); }

/* ---------- 13. Home — Process (§3.5) ---------- */
.process-track { position: relative; }
.process-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6); list-style: none;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.process-steps h3 { display: flex; align-items: baseline; gap: 12px; }
.process-steps .n { font-family: var(--font-mono); font-size: 13px; color: var(--text-2); }
.process-steps p { color: var(--text-2); font-size: var(--fs-body-sm); margin-top: var(--sp-3); max-width: 26ch; }
@media (max-width: 800px) {
  .process-steps { grid-template-columns: 1fr; gap: var(--sp-6); }
}

/* ---------- 14. Home — Proof (§3.6) ---------- */
.proof-numbers {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  padding-bottom: clamp(48px, 7vw, 96px);
  margin-bottom: clamp(48px, 7vw, 96px);
  border-bottom: 1px solid var(--line);
}
.metric .num {
  font-size: clamp(48px, 6vw, 88px); font-weight: 300; letter-spacing: -0.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.metric .metric-label { margin-top: var(--sp-3); display: block; }
@media (max-width: 700px) { .proof-numbers { grid-template-columns: 1fr; } }

.quote-block blockquote {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(24px, 3vw, 40px); line-height: 1.35;
  max-width: 26ch;
}
.quote-block blockquote::before { content: "“"; color: var(--accent); }
.quote-block figcaption { margin-top: var(--sp-5); color: var(--text-2); font-size: var(--fs-body-sm); }
.quote-nav { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }
.quote-nav button {
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%;
  display: grid; place-items: center;
  transition: background var(--t-micro), color var(--t-micro), border-color var(--t-micro);
}
.quote-nav button:hover { background: var(--text-1); color: var(--surface); border-color: var(--text-1); }
.quote-slide { display: none; }
.quote-slide.active { display: block; animation: quote-in 600ms var(--ease-out); }
@keyframes quote-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- 15. Page hero (inner pages) ---------- */
.page-hero { padding-top: clamp(140px, 22vh, 240px); padding-bottom: clamp(48px, 7vw, 96px); }
.page-hero .h1 { max-width: 16ch; margin-top: var(--sp-5); }
.page-hero .intro { margin-top: var(--sp-6); color: var(--text-2); max-width: 58ch; }

/* ---------- 16. Work index (§4.1) ---------- */
.filter-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-block: 1px solid var(--line);
  margin-bottom: clamp(48px, 7vw, 96px);
}
.filter-btn {
  font-size: 15px; letter-spacing: .04em; color: var(--text-2);
  padding: 8px 18px; border: 1px solid transparent; border-radius: var(--r-pill);
  transition: color var(--t-micro), border-color var(--t-micro), background var(--t-micro);
}
.filter-btn:hover { color: var(--text-1); }
.filter-btn[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); }
.work-list .work-entry { transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-move); }
.work-entry.filtered-out { display: none; }

/* ---------- 17. Case study (§4.2) ---------- */
.cs-hero { min-height: 78svh; display: flex; flex-direction: column; justify-content: flex-end; position: relative; padding-top: 140px; color: #fff; }
.cs-hero .label { color: rgba(255,255,255,.65); }
.cs-hero .cs-summary { color: rgba(255,255,255,.86); }
.cs-hero .cs-visual {
  position: absolute; inset: 0; z-index: -1;
  display: flex; align-items: center; justify-content: center;
}
.cs-hero .cs-visual::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,15,14,.86), rgba(15,15,14,.3) 55%, rgba(15,15,14,.05));
}
.cs-hero-inner { width: 100%; padding-bottom: clamp(48px, 8vw, 96px); }
.cs-summary { margin-top: var(--sp-5); max-width: 46ch; font-size: var(--fs-body-lg); }

.cs-meta-bar {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-block: 1px solid var(--line);
}
.cs-meta-inner {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-7);
  padding-block: var(--sp-4);
  font-size: 14px;
}
.cs-meta-inner dt { color: var(--text-2); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.cs-meta-inner dd { margin-top: 2px; }
.cs-progress {
  position: absolute; left: 0; bottom: -1px; height: 1px;
  background: var(--accent); width: 0;
}

.cs-section { padding-block: clamp(72px, 10vw, 160px); }
.cs-section .label { display: block; margin-bottom: var(--sp-6); }
.cs-brief {
  font-size: clamp(24px, 3vw, 40px); font-weight: 300; line-height: 1.3;
  letter-spacing: -0.01em; max-width: 28ch; margin-top: var(--sp-7);
}
.cs-body p + p { margin-top: var(--sp-5); }
.cs-body { color: var(--text-2); max-width: 68ch; font-size: var(--fs-body-lg); }
.surface-paper .cs-body { color: #3E3D3A; }

.cs-figure { margin-block: var(--sp-6); }
.cs-figure .frame {
  aspect-ratio: 16/10; overflow: hidden; position: relative;
  background: var(--surface-raised); box-shadow: var(--shadow-media);
  display: flex; align-items: center; justify-content: center;
}
.cs-figure.tall .frame { aspect-ratio: 4/5; }
.cs-figure figcaption { font-family: var(--font-mono); font-size: 13px; color: var(--text-2); margin-top: var(--sp-3); }
.cs-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 48px); }
@media (max-width: 700px) { .cs-split { grid-template-columns: 1fr; } }

.cs-results-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-5); margin-bottom: clamp(48px, 6vw, 80px);
}
.result-card {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-6);
}
.result-card .num { font-size: clamp(36px, 4vw, 56px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.05; }
.result-card .metric-label { margin-top: var(--sp-3); display: block; }

/* Before / After slider (§4.2.8) */
.ba-slider {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  touch-action: none; cursor: ew-resize;
  background: var(--surface-raised);
}
.ba-pane { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ba-after { clip-path: inset(0 0 0 50%); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: var(--accent); pointer-events: none;
}
.ba-handle::after {
  content: "↔"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-size: 16px;
}
.ba-tag { position: absolute; bottom: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.ba-tag.a { left: 16px; } .ba-tag.b { right: 16px; }

/* Brand assets plate (§4.2.9) */
.assets-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-4); }
.asset-tile {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: var(--sp-5); min-height: 180px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--surface-card);
}
.asset-tile .label { margin: 0; }
.swatch-row { display: flex; gap: var(--sp-2); }
.swatch { width: 40px; height: 40px; border-radius: 4px; border: 1px solid var(--line); }
.type-specimen { font-size: clamp(28px, 3vw, 44px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; }

/* Inline CTA inside case study */
.cs-inline-cta {
  border-block: 1px solid var(--line);
  padding-block: var(--sp-7);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5);
}

/* Next project (§4.2.10) */
.next-project { display: block; position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.next-project .np-inner {
  padding-block: clamp(80px, 12vw, 160px);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.next-project .display { transition: transform 600ms var(--ease-out); }
.next-project:hover .display { transform: translateX(12px); }

/* ---------- 18. Services (§5) ---------- */
.pillar-card {
  background: var(--surface-card); border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(32px, 5vw, 72px);
  margin-bottom: var(--sp-5);
  transition: transform var(--t-micro) var(--ease-out), border-color var(--t-micro);
}
.pillar-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.28); }
.pillar-head { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.pillar-num {
  font-family: var(--font-mono); font-size: 15px;
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%;
  display: inline-grid; place-items: center; flex: none;
  transition: background var(--t-micro), color var(--t-micro), border-color var(--t-micro);
}
.pillar-card:hover .pillar-num { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pillar-title { font-size: clamp(30px, 3.6vw, 52px); font-weight: 300; letter-spacing: -0.02em; }
.pillar-promise { font-family: var(--font-serif); font-style: italic; font-size: clamp(19px, 1.8vw, 24px); color: var(--text-2); margin-top: var(--sp-4); }
.pillar-list {
  list-style: none; margin-top: var(--sp-6);
  columns: 2; column-gap: var(--sp-7);
}
.pillar-list li { padding-block: 10px; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: var(--fs-body-sm); break-inside: avoid; }
.pillar-ideal { margin-top: var(--sp-6); color: var(--text-2); font-size: var(--fs-body-sm); }
.pillar-foot {
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4) var(--sp-5); flex-wrap: wrap;
}
.pillar-tag {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(17px, 1.5vw, 20px); color: var(--text-2);
}
.pillar-cta { flex: none; }
@media (max-width: 700px) {
  .pillar-list { columns: 1; }
  .pillar-foot { flex-direction: column; align-items: stretch; }
  .pillar-cta { justify-content: center; }
}

.engagement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.engagement-card {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-6);
  transition: transform var(--t-micro) var(--ease-out), border-color var(--t-micro) var(--ease-out);
}
.engagement-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.28); }
.surface-paper .engagement-card:hover,
html[data-theme="light"] .engagement-card:hover { border-color: rgba(17,17,16,.34); }
.engagement-card h3 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.engagement-card .dur { font-family: var(--font-mono); font-size: 13px; color: var(--text-2); white-space: nowrap; }
.engagement-card p { color: var(--text-2); font-size: var(--fs-body-sm); margin-top: var(--sp-4); }
@media (max-width: 800px) { .engagement-grid { grid-template-columns: 1fr; } }

/* ---------- 18b. Packs — fixed-price offer cards (§5.2b) ----------
   Pricing is the hero of these cards: a small mono "From" eyebrow, a
   display-scale numeral (same light cut as .metric .num), and the
   currency as a quiet suffix. The anchor pack is elevated with the
   accent border + a "Most popular" tag — one featured card per row. */
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); align-items: stretch; }
.pack-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: clamp(28px, 3vw, 40px);
  transition: transform var(--t-micro) var(--ease-out), border-color var(--t-micro) var(--ease-out);
}
.pack-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.3); }
.surface-paper .pack-card:hover,
html[data-theme="light"] .pack-card:hover { border-color: rgba(17,17,16,.4); }
.pack-card.featured { border-color: var(--accent); }
.pack-card.featured:hover { border-color: var(--accent); }
.pack-tag {
  position: absolute; top: 0; inset-inline-end: clamp(28px, 3vw, 40px);
  transform: translateY(-50%);
  background: var(--accent); color: var(--accent-ink);
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  padding: 6px 14px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.pack-name { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.01em; }
.pack-price {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: var(--sp-5); padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.pack-price .from {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-2);
}
html[lang="ar"] .pack-price .from { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; }
.pack-price .amount {
  font-size: clamp(40px, 4.2vw, 56px);
  font-weight: 300; letter-spacing: -0.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}
.pack-price .cur { font-size: clamp(18px, 1.8vw, 22px); font-weight: 400; color: var(--text-2); }
.pack-desc { color: var(--text-2); font-size: var(--fs-body-sm); margin-top: var(--sp-5); flex: 1; }
.pack-cta { margin-top: var(--sp-6); justify-content: center; }
[dir="rtl"] .pack-price .amount { direction: ltr; unicode-bidi: isolate; }
@media (max-width: 900px) { .pack-grid { grid-template-columns: 1fr; } }

.pricing-block {
  border-inline-start: 1px solid var(--accent);
  padding-inline-start: clamp(24px, 4vw, 64px);
  max-width: 62ch;
  font-size: var(--fs-body-lg);
}
.pricing-block .price-em {
  font-weight: 500; font-style: normal; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--accent);
}

/* FAQ */
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-5);
  padding-block: var(--sp-5);
  font-size: var(--fs-h3); font-weight: 400;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover .ind { color: var(--accent); }
.faq-item summary .ind { font-weight: 300; font-size: 24px; transition: transform var(--t-micro) var(--ease-out); flex: none; }
.faq-item[open] summary .ind { transform: rotate(45deg); }
.faq-item .faq-body { padding-bottom: var(--sp-6); color: var(--text-2); max-width: 62ch; }

/* ---------- 19. Studio (§6) ---------- */
.values-list { list-style: none; }
.value-row {
  display: grid; grid-template-columns: minmax(180px, 4fr) 8fr; gap: var(--sp-6);
  padding-block: var(--sp-6); border-top: 1px solid var(--line);
}
.value-row:last-child { border-bottom: 1px solid var(--line); }
.value-row h3 { font-weight: 500; }
.value-row p { color: var(--text-2); max-width: 52ch; }
@media (max-width: 700px) { .value-row { grid-template-columns: 1fr; gap: var(--sp-3); } }

.compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.compare-col { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-6); }
.compare-col.they { border-color: var(--accent); }
.compare-col ul { list-style: none; margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); color: var(--text-2); font-size: var(--fs-body-sm); }
.compare-col.they ul { color: var(--text-1); }
@media (max-width: 800px) { .compare-grid { grid-template-columns: 1fr; } }

.founder-card { display: grid; grid-template-columns: minmax(220px, 5fr) 7fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.founder-portrait {
  aspect-ratio: 4/5; background: var(--surface-raised);
  display: flex; align-items: flex-end; padding: var(--sp-5);
  border: 1px solid var(--line);
}
@media (max-width: 700px) { .founder-card { grid-template-columns: 1fr; } }

.clients-row { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); align-items: center; }
.clients-row span { font-size: 18px; font-weight: 500; letter-spacing: .06em; color: var(--text-2); text-transform: uppercase; }

/* ---------- 20. Contact (§7) ---------- */
.contact-split {
  display: grid; grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 6vw, 120px);
  align-items: start;
  padding-top: clamp(140px, 20vh, 220px);
  padding-bottom: var(--section);
}
.contact-left { position: sticky; top: 140px; display: flex; flex-direction: column; gap: var(--sp-6); }
.contact-left .h1 { max-width: 13ch; }
.contact-facts { display: flex; flex-direction: column; gap: var(--sp-3); color: var(--text-2); font-size: var(--fs-body-sm); }
@media (max-width: 900px) {
  .contact-split { grid-template-columns: 1fr; }
  .contact-left { position: static; }
}

.inquiry-form { display: block; }
.form-progress { margin-bottom: var(--sp-6); }
.form-step { display: none; }
.form-step.active { display: block; animation: quote-in 500ms var(--ease-out); }
.form-q { font-size: clamp(24px, 2.6vw, 34px); font-weight: 300; letter-spacing: -0.01em; margin-bottom: var(--sp-6); }

/* Pack fast-track note (§7.2) — confirms the fixed-price pack chosen on
   /services/ when steps 1–2 are skipped. */
.form-pack-note {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin-bottom: var(--sp-6); padding: 16px 20px;
  border: 1px solid var(--accent); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  font-size: var(--fs-body-sm); color: var(--text-2);
}
.form-pack-note[hidden] { display: none; }
.form-pack-note .note-label {
  font-family: var(--font-mono); font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .1em;
}
html[lang="ar"] .form-pack-note .note-label { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; }
.form-pack-note strong { color: var(--text-1); font-weight: 500; }
.form-pack-note .note-hint { flex-basis: 100%; }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.chip {
  padding: 12px 22px; border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: 15px; color: var(--text-2);
  transition: all var(--t-micro) var(--ease-out);
}
.chip:hover { color: var(--text-1); border-color: rgba(255,255,255,.35); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.field { margin-top: var(--sp-7); position: relative; }
.field label { display: block; font-family: var(--font-mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); margin-bottom: var(--sp-2); }
.field input, .field textarea {
  width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line);
  color: var(--text-1); font-family: var(--font-sans);
  font-size: clamp(20px, 2vw, 24px); font-weight: 300;
  padding-block: 10px;
  transition: border-color var(--t-micro);
  border-radius: 0;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field .err-msg { display: none; font-size: 14px; color: var(--err); margin-top: var(--sp-2); }
.field.invalid .err-msg { display: block; }
.field.invalid input { border-color: var(--err); }

.form-nav { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-8); gap: var(--sp-4); }
.form-back { color: var(--text-2); font-size: 15px; }
.form-back:hover { color: var(--text-1); }

.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-success { display: none; text-align: left; padding-block: var(--sp-8); }
.form-success.active { display: block; animation: quote-in 600ms var(--ease-out); }

.next-steps { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-6); }
.next-steps li { display: flex; gap: var(--sp-4); align-items: baseline; color: var(--text-2); font-size: var(--fs-body-sm); }
.next-steps .n { font-family: var(--font-mono); font-size: 12px; color: var(--text-1); }

.booking-block { border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(24px, 4vw, 48px); margin-top: var(--sp-9); }

/* ---------- 21. Legal & 404 ---------- */
.legal-body { max-width: 68ch; color: var(--text-2); padding-bottom: var(--section); }
.legal-body h2 { color: var(--text-1); font-size: var(--fs-h3); font-weight: 500; margin: var(--sp-8) 0 var(--sp-4); }
.legal-body p + p { margin-top: var(--sp-4); }
.legal-body ul { margin: var(--sp-4) 0 0 1.2em; }

.page-404 {
  min-height: 88svh; display: flex; flex-direction: column;
  justify-content: center; gap: var(--sp-6);
}
.page-404 .display-xl { color: var(--text-1); }

/* ---------- 22. Cursor chip (§9.8) ---------- */
.cursor-chip {
  position: fixed; z-index: 200; top: 0; left: 0;
  pointer-events: none;
  background: var(--accent); color: var(--accent-ink);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  padding: 10px 18px; border-radius: var(--r-pill);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 300ms var(--ease-out);
  will-change: transform;
  white-space: nowrap;
}
.cursor-chip.on { transform: translate(-50%, -50%) scale(1); }
@media (hover: none), (pointer: coarse) { .cursor-chip { display: none; } }

/* ---------- 23. Reduced motion (§9.5 — non-negotiable) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .reveal, .reveal-word, .footer-watermark { opacity: 1 !important; transform: none !important; }
  .reveal-media::after { display: none; }
  .ink-reveal .w { opacity: 1; }
  .hero::before, .hero-bg-orb, .hero-bg-grain,
  .hero-bg::before, .hero-bg::after { animation: none; }
}

/* ---------- 24. i18n — language switcher ---------- */
.lang-nav { display: flex; align-items: center; gap: 2px; }
.lang-nav a {
  font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .08em;
  color: var(--text-2);
  padding: 6px 7px;
  border-bottom: 1px solid transparent;
  transition: color var(--t-micro) var(--ease-out);
}
.lang-nav a:hover { color: var(--text-1); }
.lang-nav a[aria-current="true"] { color: var(--text-1); border-bottom-color: var(--accent); }
/* Header instance: speaks the exact same voice as the primary nav — same
   face, size, tracking, case and padding — so both rows share one baseline
   and one rhythm. Active language gets the same accent dot as the active page. */
.site-header .lang-nav {
  align-items: baseline;
  gap: clamp(16px, 2vw, 28px);
  margin-inline-start: clamp(0px, 8vw - 72px, 40px);
}
.site-header .lang-nav a {
  font-family: var(--font-sans);
  font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2);
  padding: 8px 0 4px; border-bottom: 0; position: relative;
  transition: color var(--t-micro) var(--ease-out);
}
.site-header .lang-nav a:hover { color: var(--text-1); }
.site-header .lang-nav a[aria-current="true"] { color: var(--text-1); }
.site-header .lang-nav a[aria-current="true"]::before {
  content: ""; position: absolute; left: 50%; bottom: -4px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); transform: translateX(-50%);
}
@media (max-width: 900px) { .site-header .lang-nav { display: none; } }
.mobile-menu .lang-nav, .footer-baseline .lang-nav { display: flex; }

/* ---------- 25. i18n — RTL & Arabic (deliberate, not mirrored blindly) ---------- */
/* Arabic type stack: no italics, no negative tracking, taller leading */
html[lang="ar"] {
  --font-sans: "IBM Plex Sans Arabic", "General Sans", sans-serif;
  --font-serif: "Amiri", serif;
}
html[lang="ar"] body { letter-spacing: 0; }
/* Same font-size scale as EN/FR; only the leading opens up so connected
   script, ascenders and diacritics render cleanly (line-height .95 clips). */
html[lang="ar"] .display-xl { letter-spacing: 0; line-height: 1.28; }
html[lang="ar"] .display { letter-spacing: 0; line-height: 1.18; }
html[lang="ar"] .h1, html[lang="ar"] .h2, html[lang="ar"] .h3 { letter-spacing: 0; line-height: 1.3; }
html[lang="ar"] .serif-accent, html[lang="ar"] .ethos .manifesto,
html[lang="ar"] .pillar-promise, html[lang="ar"] .pillar-tag,
html[lang="ar"] .quote-block blockquote { font-style: normal; line-height: 1.6; }
html[lang="ar"] .label, html[lang="ar"] .cs-meta-inner dt, html[lang="ar"] .field label,
html[lang="ar"] .hero-status {
  font-family: var(--font-sans); letter-spacing: 0; text-transform: none; font-size: 13px;
}
html[lang="ar"] .main-nav a, html[lang="ar"] .mobile-menu nav a { letter-spacing: 0; text-transform: none; }
html[lang="ar"] .cap-title, html[lang="ar"] .pillar-title { letter-spacing: 0; line-height: 1.25; }

/* LTR islands: brand wordmark, clock, email, numbers stay left-to-right */
[dir="rtl"] .wordmark, [dir="rtl"] [data-local-time], [dir="rtl"] .copy-email,
[dir="rtl"] .metric .num, [dir="rtl"] .result-card .num, [dir="rtl"] .footer-watermark {
  direction: ltr; unicode-bidi: isolate;
}

/* Directional geometry that must flip */
[dir="rtl"] .scroll-cue { left: auto; right: var(--margin); }
[dir="rtl"] .btn:hover .arrow, [dir="rtl"] .link-arrow:hover .arrow { transform: translateX(-4px); }
[dir="rtl"] .link-u::after { transform-origin: right; }
[dir="rtl"] .draw-line { transform-origin: right; }
[dir="rtl"] .cap-row .go { transform: translateX(8px); }
[dir="rtl"] .cap-row:hover .go { transform: none; }
[dir="rtl"] .next-project:hover .display { transform: translateX(-12px); }
[dir="rtl"] .hero::before { transform: scaleX(-1); }

/* Deliberately NOT flipped: before/after slider (media is neutral),
   charts/numerals, media placeholders, the cropped wordmark. */


/* ---------- 26. Theme system — Dark (default) / Light ---------- */
:root {
  color-scheme: dark;
  --focus: var(--accent);
  --hero-glow: rgba(255, 255, 255, .05);
  /* Premium hero ambience (§9b): orb tint, grain strength, vignette */
  --hero-orb: rgba(232, 255, 71, .09);
  --hero-orb-soft: rgba(232, 255, 71, .035);
  --hero-grain: .05;
  --hero-vignette: radial-gradient(ellipse 130% 110% at 50% 42%, transparent 58%, rgba(0, 0, 0, .34) 100%);
}
html[data-theme="light"] {
  color-scheme: light;
  --surface: #F8F8F6;          /* warm white — never pure white */
  --surface-raised: #F0EFEB;
  --surface-card: #FFFFFF;     /* cards: white + soft hairline borders */
  --text-1: #111111;
  --text-2: #66655F;           /* AA on #F8F8F6 */
  --line: rgba(17, 17, 16, .14);
  /* Light Mode carries NO lime at all: the accent role resolves to ink,
     so every accent consumer (CTA fill, chips, filters, dots, borders,
     progress bars) reads black on the warm white. Maximum contrast (17.9:1).
     Dark Mode keeps the signature lime untouched. */
  --accent: #111111;
  --accent-ink: #F8F8F6;       /* warm white text on the black accent fill */
  --focus: #111111;
  --hero-glow: rgba(17, 17, 16, .045);
  /* Light surfaces: ink + warm-neutral ambience — no lime (see accent rule
     above). Values raised from the original near-invisible pass so the
     composition actually reads on the warm white; the aurora + drafting
     grid layers (§9b-light) carry the rest. */
  --hero-orb: rgba(17, 17, 16, .065);
  --hero-orb-soft: rgba(17, 17, 16, .028);
  --hero-grain: .05;
  --hero-vignette: radial-gradient(ellipse 130% 110% at 50% 42%, transparent 60%, rgba(17, 17, 16, .075) 100%);
}
/* Light mode, hero typography: pure ink, no accent word — the accent retreats
   to interaction (CTA, active-language dot, availability dot, hovers, small UI).
   A slightly heavier cut keeps the editorial impact on the light surface.
   Dark mode composition is untouched. */
html[data-theme="light"] .hero-v2 .hero-statement {
  color: #111111;
  font-weight: 400;
}
html[data-theme="light"] .hero-v2 .hero-statement .reveal-line:last-of-type .reveal-word {
  color: #111111;
  font-weight: 700;
}
/* On light surfaces the accent equals the ink, so the old primary-button
   hover (fill with --text-1) would produce zero feedback — hover lifts to
   charcoal instead. Typography that used to be accent-colored gets weight,
   not color: the active mobile-menu item goes bold. */
html[data-theme="light"] .btn-primary:hover,
.surface-paper .btn-primary:hover {
  background: #3A3A37;
  color: #F8F8F6;
}
html[data-theme="light"] .mobile-menu nav a[aria-current="page"],
.surface-paper .mobile-menu nav a[aria-current="page"] { font-weight: 700; }
/* Case studies keep their art-directed Paper surface in both themes
   (.surface-paper re-declares tokens on <body>, closer than <html>). */

/* Over the case-study hero (dark media + scrim), the not-yet-scrolled header
   reads in light ink; once .is-scrolled adds the Paper backdrop, tokens revert. */
.surface-paper .site-header:not(.is-scrolled) {
  --text-1: #FFFFFF;
  --text-2: rgba(255, 255, 255, .68);
  --line: rgba(255, 255, 255, .16);
  /* Over the dark hero media the ink accent would vanish — the accent
     role inverts to white here, so the CTA stays a filled primary. */
  --accent: #FFFFFF;
  --accent-ink: #0F0F0E;
  color: var(--text-1);
}
/* White-filled CTA over the hero: hover dims the fill for feedback. */
.surface-paper .site-header:not(.is-scrolled) .header-cta:hover {
  background: rgba(255, 255, 255, .84);
  color: #0F0F0E;
}

/* Theme toggle — small icon disclosure beside the language selector */
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  color: var(--text-2);
  border-radius: 50%;
  transition: color var(--t-micro) var(--ease-out);
}
.theme-toggle:hover { color: var(--text-1); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .i-moon { display: none; }
html[data-theme="light"] .theme-toggle .i-sun { display: none; }
html[data-theme="light"] .theme-toggle .i-moon { display: block; }

/* Smooth cross-fade only while switching (class added for ~380ms by JS) */
@media (prefers-reduced-motion: no-preference) {
  html.theming, html.theming *, html.theming *::before, html.theming *::after {
    transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out),
                border-color 300ms var(--ease-out), fill 300ms var(--ease-out),
                stroke 300ms var(--ease-out), box-shadow 300ms var(--ease-out) !important;
  }
}

/* ---------- 27. Premium interactions (§9.5) ----------
   Page transitions, auto section reveals, hover polish.
   Transform/opacity only — fully compositor-driven, reduced-motion safe. */

/* Page transitions — MPA cross-fade. Every position:fixed element (header,
   mobile menu, skip link, cursor chip) lives OUTSIDE <main>, so animating
   <main> is safe: no containing-block surprises. */
@media (prefers-reduced-motion: no-preference) {
  main { animation: page-enter 560ms var(--ease-out) both; }
  html.page-leave main {
    opacity: 0; transform: translateY(10px);
    transition: opacity 230ms var(--ease-out), transform 230ms var(--ease-out);
  }
}
@keyframes page-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Auto section reveal — soft fade/slide as sections enter the viewport.
   The class pair is applied only by JS to below-the-fold sections, so
   no-JS visitors and reduced-motion users never see hidden content. */
.sec-pre { opacity: 0; transform: translateY(14px); }
.sec-pre.sec-in {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-move);
}

/* Hover polish — quiet lift on buttons, eased press feedback on pills */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.filter-btn, .chip {
  transition: color var(--t-micro) var(--ease-out),
              border-color var(--t-micro) var(--ease-out),
              background var(--t-micro) var(--ease-out),
              transform var(--t-micro) var(--ease-out);
}
.filter-btn:active, .chip:active { transform: scale(.96); }

/* Project cards — soft depth wash on hover (opacity-only, composited),
   layered under the existing 1.1s media zoom */
.work-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .22));
  opacity: 0; transition: opacity 600ms var(--ease-out);
}
.work-entry:hover .work-media::after { opacity: 1; }

/* Underlines wipe through: enter from the start edge, exit through the
   end edge instead of retracting — logical properties keep RTL correct. */
.link-u::after { transform-origin: 100% 50%; }
.link-u:hover::after { transform-origin: 0 50%; }
[dir="rtl"] .link-u::after { transform-origin: 0 50%; }
[dir="rtl"] .link-u:hover::after { transform-origin: 100% 50%; }