/* self-hosted fonts, latin subset (from Google Fonts, SIL Open Font License) */
@font-face {
  font-family: "Changa One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/changa-one-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/inter-tight-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --gutter: clamp(16px, 4vw, 56px);
  /* display face for big headings; it has a single (heavy) weight */
  --display: "Changa One", "Inter Tight", system-ui, sans-serif;
  /* blue theme (default) */
  --bg: #003cb5;
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.7);
  --line: rgba(255, 255, 255, 0.2);
  --bg-image:
    radial-gradient(ellipse 90% 70% at 50% 38%, #1a5ae0 0%, rgba(0, 60, 181, 0) 60%),
    linear-gradient(180deg, #0040bf 0%, #003cb5 45%, #00175a 100%);
  --overlay: rgb(0 26 102 / 0.4);
  --vignette: rgba(0, 20, 80, 0.45);
  --text-shadow: 0 6px 40px rgba(0, 16, 70, 0.55);
  --card: rgba(0, 34, 122, 0.45);
  --card-hover-muted: rgba(0, 60, 181, 0.75);
  --card-hover-line: rgba(0, 60, 181, 0.2);
}

/* light theme: <html data-theme="light"> — white room, black type, white balls */
:root[data-theme="light"] {
  --bg: #efefed;
  --ink: #111111;
  --muted: rgba(17, 17, 17, 0.62);
  --line: rgba(17, 17, 17, 0.16);
  --bg-image: radial-gradient(ellipse 90% 70% at 50% 38%, #fafaf8 0%, #efefed 60%, #e2e2df 100%);
  --overlay: rgb(255 255 255 / 0.08);
  --vignette: rgba(0, 0, 0, 0.07);
  --text-shadow: none;
  --card: rgba(255, 255, 255, 0.55);
  --card-hover-muted: rgba(239, 239, 237, 0.7);
  --card-hover-line: rgba(239, 239, 237, 0.2);
}

/* dark theme: <html data-theme="dark"> — near-black room, white type, glinting flakes */
:root[data-theme="dark"] {
  --bg: #050505;
  --ink: #f2f2f2;
  --muted: rgba(242, 242, 242, 0.62);
  --line: rgba(242, 242, 242, 0.16);
  --bg-image: radial-gradient(ellipse 90% 70% at 50% 38%, #1a1a1a 0%, #050505 60%, #000000 100%);
  --overlay: rgb(0 0 0 / 0.35);
  --vignette: rgba(0, 0, 0, 0.5);
  --text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6);
  --card: rgba(20, 20, 20, 0.55);
  --card-hover-muted: rgba(5, 5, 5, 0.75);
  --card-hover-line: rgba(5, 5, 5, 0.2);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--bg);
  /* lit centre falling off to the edges: shows only if WebGL is unavailable */
  background-image: var(--bg-image);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

#gl {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  display: block;
}

/* frosted tint layer over the 3D canvas */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* 0.4 lives in the colour, not `opacity`, so the blur stays at full strength */
  background: var(--overlay);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}
/* reading veil: fades in once the page scrolls past the hero (html.is-scrolled, set in main.js) */
.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 0.1);
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.is-scrolled .overlay::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .overlay::after { transition-duration: 0.2s; } }

/* soft paper falloff at the edges */
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(130% 120% at 50% 45%, transparent 55%, var(--vignette));
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--gutter);
}
.logo { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.logo-mark { width: 15px; height: 25px; fill: currentColor; }
.logo-word { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; }
.nav nav { display: flex; gap: clamp(14px, 3vw, 36px); align-items: center; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.nav nav a { opacity: 0.75; transition: opacity 0.2s; }
.nav nav a:hover { opacity: 1; }
.pill { background: var(--ink); color: var(--bg); border-radius: 999px; padding: 9px 20px; opacity: 1 !important; transition: transform 0.2s; }
.pill:hover { transform: scale(1.04); }

/* mobile menu (≤860px): the nav becomes a full-screen panel behind the logo and the toggle,
   opened by html.menu-open (set in main.js) */
.nav-toggle { display: none; align-items: center; gap: 12px; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
.nav-toggle-icon { position: relative; width: 22px; height: 10px; }
.nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform 0.35s cubic-bezier(.76, 0, .24, 1); }
.nav-toggle-icon::before { top: 0; }
.nav-toggle-icon::after { bottom: 0; }
.menu-open .nav-toggle-icon::before { transform: translateY(4px) rotate(45deg); }
.menu-open .nav-toggle-icon::after { transform: translateY(-4px) rotate(-45deg); }
.nav-toggle:focus-visible, .nav nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.menu-open, .menu-open body { overflow: hidden; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    padding: 96px var(--gutter) 48px;
    background-color: var(--bg);
    background-image: var(--bg-image);
    font-family: var(--display);
    font-size: clamp(44px, 13vw, 84px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }
  .menu-open .nav nav { visibility: visible; opacity: 1; transition: opacity 0.35s ease; }
  .nav nav a { opacity: 1; transform: translateY(24px); transition: transform 0.6s cubic-bezier(.2,.7,.2,1), opacity 0.2s; }
  .menu-open .nav nav a { transform: none; }
  .menu-open .nav nav a:nth-child(2) { transition-delay: 0.04s; }
  .menu-open .nav nav a:nth-child(3) { transition-delay: 0.08s; }
  .menu-open .nav nav a:nth-child(4) { transition-delay: 0.12s; }
  .menu-open .nav nav a:nth-child(5) { transition-delay: 0.16s; }
  .menu-open .nav nav a:nth-child(6) { transition-delay: 0.2s; }
  .menu-open .nav nav a:nth-child(7) { transition-delay: 0.24s; }
  .menu-open .nav nav a:nth-child(8) { transition-delay: 0.28s; }
  .nav nav a[aria-current="page"]:not(.pill) { text-decoration-thickness: 3px; text-underline-offset: 8px; }
  .nav nav .pill { margin-top: 28px; padding: 14px 28px; font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; }
  .nav nav .pill[aria-current="page"] { text-decoration: none; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .nav nav, .menu-open .nav nav, .nav nav a, .nav-toggle-icon::before, .nav-toggle-icon::after { transition: none; }
  .nav nav a { transform: none; }
}

/* ---------- sections ---------- */
/* no z-index here: an isolated stacking context would stop text blending with the canvas */
main { position: relative; }
section {
  min-height: 100vh;
  padding: 120px var(--gutter) 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1680px;
  margin: 0 auto;
}

.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 18px; }

/* hero: centred over the infinity shape, like a poster */
.hero { position: relative; align-items: center; text-align: center; }
h1 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(40px, 7.6vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-shadow: var(--text-shadow);
}
.hero-foot {
  position: absolute;
  left: var(--gutter); right: var(--gutter); bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  text-align: start;
}
.lede { max-width: 400px; font-size: 13px; font-weight: 500; line-height: 1.45; text-transform: uppercase; }

.hero-links { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
.hero-links a { border-bottom: 1px solid var(--ink); padding-bottom: 3px; transition: opacity 0.2s; }
.hero-links a:hover { opacity: 0.55; }

.scroll-cue { position: absolute; top: 50%; right: var(--gutter); writing-mode: vertical-rl; display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.scroll-cue span { width: 1px; height: 40px; background: var(--line); position: relative; overflow: hidden; }
.scroll-cue span::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--ink); animation: cue 2s infinite cubic-bezier(.6,0,.4,1); }
@keyframes cue { to { top: 100%; } }

.section-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 48px; }
.index { font-size: 12px; font-weight: 500; color: var(--muted); }
h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(36px, 6vw, 88px); letter-spacing: -0.005em; line-height: 0.95; }

/* work list */
.projects { list-style: none; }
.projects li {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  transition: padding 0.3s;
  cursor: default;
}
.projects li:last-child { border-bottom: 1px solid var(--line); }
.projects li:hover { padding-left: 14px; }
.year { font-size: 12px; color: var(--muted); }
.name { font-size: clamp(20px, 2.4vw, 34px); font-weight: 500; letter-spacing: -0.02em; }
.kind { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }

/* project thumbnail that follows the cursor over the work list (positioned from main.js);
   z-index 0 and placed before <main> in the DOM: above the 3D layers, behind the text */
.thumb { position: fixed; left: 0; top: 0; z-index: 0; width: clamp(240px, 22vw, 380px); pointer-events: none; will-change: transform; }
.thumb img { display: block; width: 100%; height: auto; translate: -50% -55%; opacity: 0; scale: 0.8; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.18)); transition: opacity 0.3s, scale 0.45s cubic-bezier(.2,.7,.2,1); }
.thumb.is-on img { opacity: 1; scale: 1; }
@media (prefers-reduced-motion: reduce) { .thumb img { transition: opacity 0.2s; scale: 1; } }

/* studio */
.big { font-size: clamp(22px, 3.2vw, 56px); line-height: 1.18; font-weight: 400; letter-spacing: -0.02em; max-width: 1280px; }
.big em { font-style: normal; background: var(--ink); color: var(--bg); padding: 0 0.2em; }
.body { max-width: 720px; margin-top: 32px; color: var(--muted); line-height: 1.7; }

/* why */
.why h2, .services h2, .convert h2, .games h2 { max-width: 14ch; }
.why .big, .convert .big, .games .big { margin-bottom: 44px; }
.possibilities { margin-bottom: 40px; }
/* content runs the full section width: as many columns as fit */
.benefits { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(max(260px, 22%), 1fr)); gap: 0 48px; }
.benefits li { padding: 20px 0; border-top: 1px solid var(--line); }
.benefits h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 6px; }
.benefits p { color: var(--muted); font-size: 14px; line-height: 1.6; }

/* services */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(300px, 22%), 1fr)); gap: 16px; }
.cards article {
  padding: 30px 26px;
  border: 1px solid var(--line);
  background: var(--card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background 0.3s, color 0.3s;
}
.cards article:hover { background: var(--ink); color: var(--bg); }
.cards article:hover p, .cards article:hover li::before { color: var(--card-hover-muted); }
.cards article:hover ol li { border-color: var(--card-hover-line); }
.cards h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.cards p { color: var(--muted); font-size: 14px; line-height: 1.6; transition: color 0.3s; }
.cards ol { margin-top: 16px; list-style: none; counter-reset: s; font-size: 13px; font-weight: 500; }
.cards ol li { counter-increment: s; padding: 8px 0; border-top: 1px solid var(--line); }
.cards ol li::before { content: counter(s, decimal-leading-zero); color: var(--muted); margin-right: 12px; font-size: 11px; }

/* contact */
.contact { align-items: flex-start; }
.mega {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(48px, 9vw, 150px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  transition: opacity 0.3s;
}
.mega:hover { opacity: 0.6; }
.contact .hero-links { margin-top: 36px; }
.social { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.social a { display: inline-block; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.social a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
footer { margin-top: 64px; font-size: 12px; color: var(--muted); }

/* ---------- page transitions: Barba swaps <main> (see main.js) ----------
   A white panel grows up from the bottom, holds 0.1s while the next page mounts and the
   balls start morphing, then shrinks from the bottom up. It sits under the header, which
   stays put. Animated with transforms only, so it stays smooth while the page works. */
.wipe {
  position: fixed;
  inset: 0;
  z-index: 9;
  background: var(--bg);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}
.wipe.is-on { pointer-events: auto; }

/* "explore more" link under a section */
.more-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; padding: 12px 22px; border: 1px solid var(--ink); border-radius: 999px; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; align-self: flex-start; transition: background 0.2s, color 0.2s; }
.more-link:hover { background: var(--ink); color: var(--bg); }
.nav nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }

/* FAQ: native <details> accordion */
.faq h2 { max-width: 14ch; }
.faq-list { max-width: none; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; font-size: clamp(18px, 2vw, 24px); font-weight: 500; letter-spacing: -0.01em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; font-size: 26px; font-weight: 300; line-height: 1; transition: transform 0.3s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { max-width: 900px; padding: 0 0 24px; color: var(--muted); line-height: 1.7; }

/* inner pages: service detail sections */
.service h2 { max-width: 14ch; }
.service .big { margin-bottom: 40px; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.tags li { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 500; }

/* ---------- case study pages (e.g. rumble.html) ---------- */
/* hero: centred like the home hero, the client's mark forms in particles behind the title */
.case-hero h1 { font-size: clamp(56px, 10vw, 168px); }
.crumbs ol { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: 0.5; }
.crumbs a:hover { color: var(--ink); }
.meta { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; margin-bottom: 48px; }
.meta div { padding-top: 12px; border-top: 1px solid var(--line); }
.meta dt { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 4px; }
.meta dd { font-size: 14px; font-weight: 500; }

.case h2 { max-width: none; }
.prose { columns: 2 300px; column-gap: 40px; margin-top: -8px; }
.prose p { break-inside: avoid; }
.prose p { color: var(--muted); line-height: 1.7; }
.prose p + p { margin-top: 14px; }
.prose a, .faq-list a { border-bottom: 1px solid currentColor; }

/* screenshots sit in their laptop mockups (transparent PNG → WebP), no frame needed */
.shot { margin-top: 48px; }
.shot img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.12)); }
.shot figcaption { margin-top: 12px; font-size: 13px; color: var(--muted); }
.shot figcaption strong { color: var(--ink); font-weight: 500; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.gallery .shot { margin-top: 0; }

/* review → coin → play → win */
.flow { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: step; }
.flow li { counter-increment: step; position: relative; padding: 26px 22px; border: 1px solid var(--line); background: var(--card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background 0.3s, color 0.3s; }
.flow li::before { content: counter(step, decimal-leading-zero); position: absolute; top: 22px; right: 22px; font-size: 11px; font-weight: 500; color: var(--muted); }
.flow li:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -11px; z-index: 1; transform: translateY(-50%); font-size: 14px; color: var(--muted); }
.flow li:hover { background: var(--ink); color: var(--bg); }
.flow li:hover p, .flow li:hover::before { color: var(--card-hover-muted); }
.flow svg, .stack svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.flow h3 { margin: 22px 0 6px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.flow p { font-size: 14px; line-height: 1.55; color: var(--muted); transition: color 0.3s; }

.sub { margin: 56px 0 8px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.challenges { list-style: none; }
.challenges li { display: grid; grid-template-columns: 70px 1fr auto; align-items: baseline; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); transition: padding 0.3s; }
.challenges li:last-child { border-bottom: 1px solid var(--line); }
.challenges li:hover { padding-left: 14px; }

/* tech stack: icon tiles */
.stack { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 40px; }
.stack li { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--line); background: var(--card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 14px; font-weight: 500; transition: transform 0.3s; }
.stack li:hover { transform: translateY(-4px); }

/* client logos (About): grey PNG/WebP marks on the same frosted cards as .stack */
.clients { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.clients li { display: flex; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid var(--line); background: var(--card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform 0.3s; }
.clients li:hover { transform: translateY(-4px); }

/* client quotes (home #reviews): sit on the .benefits grid */
.quotes { grid-template-columns: repeat(auto-fit, minmax(max(260px, 40%), 1fr)); }
.quotes li { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 28px 0; }
.quotes blockquote p { color: var(--ink); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; letter-spacing: -0.01em; }
.quotes .who { font-size: 13px; line-height: 1.5; }
.quotes .who strong { color: var(--ink); font-weight: 500; }
.quotes .who span { display: block; margin-top: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.clients img { display: block; width: 100%; max-width: 200px; height: auto; }
@media (max-width: 600px) { .clients { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .clients li { padding: 4px; } }

@media (max-width: 860px) {
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .meta div { margin-bottom: 12px; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow li::after { display: none; }
  .gallery { grid-template-columns: 1fr; gap: 32px; }
  .challenges li { grid-template-columns: 60px 1fr; }
  .challenges .kind { display: none; }
}
@media (max-width: 560px) {
  .flow, .meta { grid-template-columns: 1fr; }
}

/* ---------- ?tune size picker (dev only) ---------- */
.tune { position: fixed; left: 16px; bottom: 16px; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; }
.tune span { width: 100%; color: var(--muted); }
.tune button { font: inherit; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
.tune button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- loading screen ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background: var(--bg);
  color: var(--ink);
  transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), visibility 0.8s;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
/* full reloads later in the session: a plain white cover under the header that shrinks
   upward like the page wipe (.wipe) */
.loader.is-quick { z-index: 9; transform-origin: top; transition: transform 0.7s cubic-bezier(.76, 0, .24, 1), visibility 0.7s; }
.loader.is-quick.is-done { opacity: 1; transform: scaleY(0); }
.loader.is-quick > * { display: none; }
.loader-mark { width: 34px; height: 57px; fill: currentColor; animation: loader-pulse 1.4s ease-in-out infinite; }
.loader-bar { width: min(220px, 50vw); height: 2px; background: var(--line); overflow: hidden; }
.loader-bar span { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.loader-pct { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; color: var(--muted); font-variant-numeric: tabular-nums; }
@keyframes loader-pulse { 50% { opacity: 0.35; } }

/* hero intro: transform only (no opacity), so the headline counts as painted from the start */
.hero > * { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
html:not(.is-ready) .hero > * { transform: translateY(36px); }
.hero > :nth-child(2) { transition-delay: 0.08s; }
.hero > :nth-child(3) { transition-delay: 0.16s; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr; }
  .projects li { grid-template-columns: 50px 1fr; }
  .kind { display: none; }
  .benefits { grid-template-columns: 1fr; }
  .hero-foot { flex-direction: column; align-items: flex-start; }
  .scroll-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero > *, html:not(.is-ready) .hero > * { transform: none; transition: none; }
  .loader-mark { animation: none; }
  .scroll-cue span::after { animation: none; }
}

/* ---------- Arabic (/ar/): right-to-left layout and Arabic type ----------
   Changa (display) and IBM Plex Sans Arabic (text) come from Google Fonts, linked in the
   Arabic pages only. Arabic has no capitals and tracking breaks letter joins, so both go. */
:root[lang="ar"] { --display: "Changa", "Changa One", "IBM Plex Sans Arabic", system-ui, sans-serif; }
[lang="ar"] body { font-family: "IBM Plex Sans Arabic", "Inter Tight", "Helvetica Neue", Arial, sans-serif; }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] .mega, [lang="ar"] .nav nav { font-weight: 800; }
[lang="ar"] h1 { line-height: 1.15; }
[lang="ar"] h2, [lang="ar"] .mega { line-height: 1.2; }
[lang="ar"] .big { line-height: 1.45; letter-spacing: 0; }
[lang="ar"] * { letter-spacing: 0 !important; text-transform: none !important; }
[lang="ar"] .lede { line-height: 1.7; }
.nav nav .lang { font-family: "IBM Plex Sans Arabic", "Inter Tight", sans-serif; }
[lang="ar"] .nav nav .lang { font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif; }
[lang="ar"] .nav nav .pill { font-family: "IBM Plex Sans Arabic", sans-serif; }
[lang="ar"] [lang="en"] { font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif; }   /* English quotes and the language link */

[dir="rtl"] .scroll-cue { right: auto; left: var(--gutter); }
[dir="rtl"] .projects li:hover, [dir="rtl"] .challenges li:hover { padding-left: 0; padding-right: 14px; }
[dir="rtl"] .cards ol li::before { margin-right: 0; margin-left: 12px; }
[dir="rtl"] .crumbs li + li::before { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .flow li::before { right: auto; left: 22px; }
[dir="rtl"] .flow li:not(:last-child)::after { content: "←"; right: auto; left: -11px; }
[dir="rtl"] .loader-bar span { transform-origin: right; }
[dir="rtl"] .quotes blockquote { text-align: right; }
@media (max-width: 860px) {
  [dir="rtl"] .nav nav { align-items: flex-start; }
  [dir="rtl"] .flow li:not(:last-child)::after { content: none; }
}