/* ==========================================================================
   atherium.dev v4
   Layout follows the existing Veritas site: a fixed rail down the left edge
   carrying the mark and the contact icons, and no top header at all, so no
   burger and no overlay menu.

   Palette comes off the black hole itself. Void black, accretion amber, and
   the blue white of lensed starlight.
   ========================================================================== */

@layer reset, tokens, base, layout, components, motion, utils;

/* The page's literal HTML content is Arabic; lang.js rewrites it to English by
   default on load. Deliberately outside every @layer so nothing in the
   cascade can out-rank it: the page stays invisible until that rewrite lands,
   which is what stops a flash of Arabic text before the swap to English. */
html.lang-pending body { visibility: hidden; }

/* ── reset ───────────────────────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; }
  button { cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  :focus-visible { outline: 2px solid var(--disc); outline-offset: 3px; border-radius: 2px; }
  ::selection { background: var(--disc); color: #08060c; }
}

/* ── tokens ──────────────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    --ink:    #05050a;
    --ink-1:  #08080f;
    --ink-2:  #0d0d16;
    --ink-3:  #14141f;

    --fg:       #f2f3f7;
    --fg-mid:   #a8abbd;
    --fg-dim:   #71748a;
    --fg-faint: #3d4054;

    --disc:     #ffc478;
    --disc-hi:  #ffe3bd;
    --disc-dim: #7a5326;
    --star:     #9ab4ff;

    --line:      color-mix(in oklab, var(--fg) 10%, transparent);
    --line-soft: color-mix(in oklab, var(--fg) 5%, transparent);
    --line-hard: color-mix(in oklab, var(--fg) 20%, transparent);

    /* Latin faces. Arabic is set below, because Space Grotesk has no Arabic
       coverage at all and would silently fall back to whatever the system
       happens to have. */
    --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    /* Kufi is geometric and squares up against Space Grotesk, so it carries
       headings. Plex Arabic stays readable down at paragraph size. */
    --font-ar-display: "Noto Kufi Arabic", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
    --font-ar-body: "IBM Plex Sans Arabic", "Noto Kufi Arabic", "Segoe UI", system-ui, sans-serif;

    --step--1: clamp(0.78rem, 0.75rem + 0.14vw, 0.88rem);
    --step-0:  clamp(0.95rem, 0.90rem + 0.22vw, 1.09rem);
    --step-1:  clamp(1.15rem, 1.05rem + 0.44vw, 1.45rem);
    --step-2:  clamp(1.45rem, 1.25rem + 0.90vw, 2.10rem);
    --step-3:  clamp(1.90rem, 1.50rem + 1.75vw, 3.10rem);
    --step-4:  clamp(2.45rem, 1.70rem + 3.25vw, 4.70rem);
    --step-5:  clamp(2.90rem, 1.60rem + 5.60vw, 6.40rem);
    --step-6:  clamp(3.20rem, 1.20rem + 8.60vw, 8.75rem);

    --gut: clamp(1.25rem, 3.5vw, 3.5rem);
    --rail: 104px;                 /* width of the fixed left rail */
    --bar: 0px;                    /* height of the mobile top bar */
    --section: clamp(5rem, 11vw, 11rem);
    --maxw: 1500px;
    --radius: 6px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);

    color-scheme: dark;
  }
  /* below 900px the rail lies down into a top bar, so it claims height
     instead of width */
  @media (max-width: 900px) {
    :root { --rail: 0px; --bar: 64px; }
  }
}

/* ── base ────────────────────────────────────────────────────────────────── */
@layer base {
  body {
    background: var(--ink);
    color: var(--fg);
    font-family: var(--font-display);
    font-size: var(--step-0);
    line-height: 1.55;
    font-weight: 300;
    letter-spacing: -0.004em;
    overflow-x: hidden;
    min-height: 100svh;
    padding-left: var(--rail);
    padding-top: var(--bar);
  }

  h1, h2, h3, h4 {
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }
  h1 { font-size: var(--step-5); }
  h2 { font-size: var(--step-4); }
  h3 { font-size: var(--step-2); line-height: 1.06; }
  h4 { font-size: var(--step-1); line-height: 1.15; }

  p { text-wrap: pretty; }
  strong { font-weight: 600; color: var(--fg); }

  .label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fg-dim);
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
  }
  .label::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--disc);
    box-shadow: 0 0 8px var(--disc);
    animation: node-pulse 3.2s var(--ease-out) infinite;
    flex: none;
  }
  .label--bare::before { display: none; }

  .lede {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--fg-mid);
    letter-spacing: -0.012em;
    max-width: 36ch;
    font-weight: 300;
  }
}

/* ── layout ──────────────────────────────────────────────────────────────── */
@layer layout {
  .shell {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gut);
  }

  .section { padding-block: var(--section); position: relative; }
  .section--tight { padding-block: calc(var(--section) * 0.55); }

  .section-head {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    grid-template-columns: 1fr;
    align-items: end;
    margin-bottom: clamp(3rem, 7vw, 6rem);
  }
  @media (min-width: 900px) {
    .section-head { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  }
  .section-head__title { margin-top: 1.1rem; }

  /* the starfield runs behind the whole document */
  .cosmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
  .cosmos canvas { width: 100%; height: 100%; }

  main, .footer, .rail, .noise { position: relative; z-index: 2; }
}

/* ── components ──────────────────────────────────────────────────────────── */
@layer components {

  /* ---- the fixed left rail, in place of a header ---------------------- */
  .side {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--rail);
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-block: clamp(1rem, 2.4vh, 1.75rem);
    background: color-mix(in oklab, var(--ink) 82%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-right: 1px solid var(--line);
  }

  .side__brand {
    display: contents;      /* rail spaces mark and word independently */
  }

  /* The mark is deliberately large. It is the only brand element on the page
     and it does not rotate, so it has to hold the top of the rail on its own. */
  .side__mark {
    width: clamp(46px, 5.2vw, 76px);
    height: auto;
    flex: none;
    filter: drop-shadow(0 0 16px rgba(255, 196, 120, 0.34));
    transition: filter 0.5s var(--ease-out);
  }
  .side__brand:hover .side__mark { filter: drop-shadow(0 0 26px rgba(255, 196, 120, 0.6)); }

  /* the wordmark, set vertically down the rail */
  .side__word {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: clamp(0.95rem, 1.2vw, 1.2rem);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--fg);
    white-space: nowrap;
  }
  .side__word i { font-style: normal; color: var(--fg-dim); }

  .side__links { display: grid; gap: 0.35rem; justify-items: center; }
  .side__links a {
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--fg-dim);
    font-size: 0.9rem;
    transition: color 0.3s, background-color 0.3s;
  }
  .side__links a:hover { color: var(--disc); background: var(--line-soft); }
  .side__links svg { width: 16px; height: 16px; }

  /* ---- the rail becomes a top bar on narrow screens -------------------
     A vertical wordmark needs height that a phone does not have, so below
     900px the rail lies down: mark and name together on the left, contact
     icons on the right. Still no burger and no overlay. */
  @media (max-width: 900px) {
    .side {
      inset: 0 0 auto 0;
      width: 100%;
      height: var(--bar);
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding-inline: var(--gut);
      padding-block: 0;
      border-right: 0;
      border-bottom: 1px solid var(--line);
    }
    .side__brand {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      min-width: 0;
    }
    .side__mark { width: clamp(38px, 11vw, 52px); }
    .side__word {
      writing-mode: horizontal-tb;
      transform: none;
      font-size: clamp(0.95rem, 4.4vw, 1.25rem);
      letter-spacing: 0.2em;
    }
    .side__links { grid-auto-flow: column; gap: 0.1rem; }
    .side__links a { width: 32px; height: 32px; }
    .side__links svg { width: 15px; height: 15px; }
  }

  /* ---- preloader ---- */
  .preloader {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--ink);
    display: grid;
    place-items: center;
    isolation: isolate;
    transition: opacity 0.7s var(--ease-out), visibility 0.7s;
  }
  .preloader__stars {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
  }

  /* mark above the name, centred as one lockup */
  .preloader__lockup {
    display: grid;
    justify-items: center;
    gap: clamp(1.1rem, 3vw, 1.9rem);
  }
  /* big, still, no rotation */
  .preloader__mark {
    width: clamp(190px, 42vw, 300px);
    height: auto;
    filter: drop-shadow(0 0 44px rgba(255, 196, 120, 0.38));
  }
  .preloader__name {
    font-size: clamp(1.5rem, 6vw, 2.4rem);
    font-weight: 400;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    /* letter-spacing pads the right edge, so pull it back to stay centred */
    text-indent: 0.34em;
    color: var(--fg);
  }
  .preloader__bar {
    position: absolute;
    left: var(--gut); right: var(--gut);
    bottom: clamp(2rem, 6vh, 4rem);
    height: 1px;
    background: var(--line);
    overflow: hidden;
  }
  .preloader__bar i {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--disc-dim), var(--disc));
    transform: scaleX(var(--p, 0));
    transform-origin: left;
    box-shadow: 0 0 12px var(--disc);
  }
  .preloader__count {
    position: absolute;
    right: var(--gut);
    bottom: calc(clamp(2rem, 6vh, 4rem) + 1rem);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--fg-dim);
    font-variant-numeric: tabular-nums;
  }
  .preloader.is-done { opacity: 0; visibility: hidden; }

  /* ---- buttons ---- */
  .btn {
    --btn-fg: #08060c;
    --btn-bg: var(--fg);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    padding: 0.95em 1.6em;
    border-radius: 999px;
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--btn-fg);
    background: var(--btn-bg);
    overflow: hidden;
    isolation: isolate;
    white-space: nowrap;
    transition: color 0.4s var(--ease-out);
  }
  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, var(--disc), #ff9d4d);
    transform: translateY(101%);
    transition: transform 0.55s var(--ease-out);
  }
  .btn:hover::before { transform: translateY(0); }
  .btn__ico { width: 1em; height: 1em; transition: transform 0.45s var(--ease-out); }
  .btn:hover .btn__ico { transform: translate(0.22em, -0.22em); }

  .btn--ghost {
    --btn-fg: var(--fg);
    --btn-bg: transparent;
    box-shadow: inset 0 0 0 1px var(--line-hard);
  }
  .btn--ghost:hover { color: #08060c; }

  /* ---- hero ---- */
  .hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    align-content: center;
    padding-block: clamp(6rem, 13vh, 9rem) clamp(3.5rem, 8vh, 6rem);
    isolation: isolate;
    overflow: hidden;
  }
  .hero__hole {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 2s var(--ease-out) 0.2s;
  }
  .hero__hole.is-live { opacity: 1; }

  /* Wide screens put the hole to the right of the copy, so a soft wedge of ink
     sits under the type and fades out before it reaches the disc. */
  .hero::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background:
      linear-gradient(100deg,
        var(--ink) 0%,
        color-mix(in oklab, var(--ink) 92%, transparent) 32%,
        color-mix(in oklab, var(--ink) 55%, transparent) 50%,
        transparent 68%),
      linear-gradient(to bottom, var(--ink) 0%, transparent 16%, transparent 82%, var(--ink) 100%);
    pointer-events: none;
  }
  /* Narrow screens stack, so the hole sits behind the copy. It stays far more
     present than a background usually would, and the type earns its contrast
     from a tighter scrim directly behind the words instead. */
  @media (max-width: 999px) {
    /* The hole sits low on narrow screens, so the scrim is weighted to the
       top where the copy lives and clears away over the disc below it. */
    .hero::after {
      background:
        linear-gradient(to bottom,
          var(--ink) 0%,
          color-mix(in oklab, var(--ink) 88%, transparent) 34%,
          color-mix(in oklab, var(--ink) 30%, transparent) 52%,
          transparent 64%),
        linear-gradient(to bottom, transparent 88%, var(--ink) 100%);
    }
    /* give the hole room underneath the copy */
    .hero { padding-bottom: clamp(9rem, 34vh, 17rem); }
  }

  .hero__title {
    font-size: var(--step-6);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.035em;
    /* no eyebrow above it now, so it opens the hero on its own */
    margin-block: 0 clamp(1.5rem, 3.5vh, 2.5rem);
    max-width: 16ch;
  }
  .hero__title em {
    font-style: normal;
    font-weight: 600;
    color: var(--disc-hi);
    text-shadow: 0 0 clamp(10px, 1.6vw, 22px) color-mix(in oklab, var(--disc) 40%, transparent);
  }
  .hero__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
  }

  .domains {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.6rem;
    margin-top: clamp(2rem, 5vh, 3.25rem);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-faint);
  }
  .domains span { transition: color 0.4s var(--ease-out), text-shadow 0.4s; }
  .domains span.is-lit {
    color: var(--disc);
    text-shadow: 0 0 12px color-mix(in oklab, var(--disc) 60%, transparent);
  }

  .hero__scroll {
    position: absolute;
    left: var(--gut);
    bottom: clamp(1.5rem, 4vh, 2.75rem);
    display: none;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-faint);
  }
  @media (min-width: 900px) { .hero__scroll { display: flex; } }
  .hero__scroll i {
    display: block;
    width: 46px; height: 1px;
    background: var(--line-hard);
    position: relative;
    overflow: hidden;
  }
  .hero__scroll i::after {
    content: "";
    position: absolute; inset: 0;
    background: var(--disc);
    transform-origin: left;
    animation: wire-run 2.6s var(--ease-in-out) infinite;
  }

  /* ---- marquee ---- */
  .marquee {
    overflow: hidden;
    user-select: none;
    border-block: 1px solid var(--line);
    padding-block: clamp(0.85rem, 2vw, 1.35rem);
    background: color-mix(in oklab, var(--ink-1) 80%, transparent);
    backdrop-filter: blur(3px);
  }
  .marquee__inner { display: flex; width: max-content; will-change: transform; }
  .marquee__track {
    display: flex;
    flex: none;
    gap: clamp(1.5rem, 3vw, 3rem);
    padding-right: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
  }
  .marquee__item {
    display: inline-flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    font-size: var(--step-2);
    font-weight: 400;
    letter-spacing: -0.025em;
    white-space: nowrap;
    color: var(--fg-mid);
  }
  .marquee__item::after {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--disc);
    flex: none;
    opacity: 0.75;
  }

  /* ---- story ---- */
  .story { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
  @media (min-width: 900px) {
    .story { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .story__block { display: grid; gap: 0.9rem; align-content: start; }
  .story__n {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    color: var(--disc);
  }
  .story__block h3 { font-size: var(--step-2); font-weight: 400; }
  .story__block p { color: var(--fg-dim); max-width: 40ch; }

  .pull {
    font-size: var(--step-3);
    font-weight: 400;
    line-height: 1.24;
    letter-spacing: -0.03em;
    max-width: 26ch;
  }

  /* ---- capability blocks ----------------------------------------------
     A wide figure beside an explanation. Alternating sides so the eye
     zig zags down the page rather than running in one column. */
  .cap {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
    border-top: 1px solid var(--line);
  }
  @media (min-width: 900px) {
    .cap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .cap:nth-of-type(even) .cap__figure { order: -1; }
  }

  .cap__body { display: grid; gap: 1rem; align-content: start; }
  .cap__tag {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--disc);
  }
  .cap__name {
    font-size: clamp(1.7rem, 3.6vw, 2.7rem);
    font-weight: 400;
    letter-spacing: -0.034em;
    line-height: 1.03;
  }
  .cap__body p { color: var(--fg-mid); max-width: 48ch; }
  .cap__points { display: grid; gap: 0.5rem; margin-top: 0.3rem; max-width: 48ch; }
  .cap__points li {
    display: grid;
    grid-template-columns: 1.15rem 1fr;
    gap: 0.5rem;
    font-size: var(--step--1);
    color: var(--fg-dim);
    line-height: 1.55;
  }
  .cap__points li::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--disc);
    opacity: 0.7;
    margin-top: 0.55em;
    justify-self: center;
  }
  .cap__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
  .cap__chips span {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--fg-dim);
    padding: 0.4em 0.75em;
    border: 1px solid var(--line);
    border-radius: 999px;
  }

  .cap__figure {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
      radial-gradient(120% 100% at 50% 0%, color-mix(in oklab, var(--disc) 5%, transparent), transparent 60%),
      color-mix(in oklab, var(--ink-1) 86%, transparent);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    transition: border-color 0.5s var(--ease-out);
  }
  .cap:hover .cap__figure { border-color: var(--line-hard); }
  .cap__figure canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .cap__figure figcaption {
    position: absolute;
    left: 0.9rem; bottom: 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-faint);
    z-index: 2;
  }
  .cap__corner {
    position: absolute;
    width: 9px; height: 9px;
    border: 1px solid var(--line-hard);
    z-index: 2;
  }
  .cap__corner:nth-of-type(1) { top: 9px; left: 9px; border-right: 0; border-bottom: 0; }
  .cap__corner:nth-of-type(2) { top: 9px; right: 9px; border-left: 0; border-bottom: 0; }
  .cap__corner:nth-of-type(3) { bottom: 9px; left: 9px; border-right: 0; border-top: 0; }
  .cap__corner:nth-of-type(4) { bottom: 9px; right: 9px; border-left: 0; border-top: 0; }

  /* a strip of shipped work tucked under a capability, so the services and
     the evidence sit together rather than in two separate halves */
  .cap__proof {
    grid-column: 1 / -1;
    display: grid;
    gap: clamp(0.75rem, 1.6vw, 1.15rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: clamp(1.25rem, 3vw, 2rem);
    padding-top: clamp(1.25rem, 3vw, 2rem);
    border-top: 1px dashed var(--line);
  }
  @media (min-width: 700px) { .cap__proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .cap__proof-note {
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-faint);
    margin-bottom: 0.25rem;
  }

  /* ---- numbers band ---- */
  .band {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border-block: 1px solid var(--line);
  }
  @media (min-width: 860px) { .band { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .band__cell {
    background: var(--ink);
    padding: clamp(1.5rem, 3.4vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
    display: grid;
    gap: 0.5rem;
    align-content: start;
  }
  .band__n {
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--disc-hi);
    font-variant-numeric: tabular-nums;
  }
  .band__k {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-dim);
  }
  .band__cell p { font-size: var(--step--1); color: var(--fg-faint); }

  /* ---- work grid, following the old site ------------------------------
     Image first, then a category and a technique. No blurb, no claim about
     what the project was worth or how long it took. */
  .work {
    display: grid;
    gap: clamp(1rem, 2.2vw, 1.75rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (min-width: 780px)  { .work { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1180px) { .work { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  .shot {
    position: relative;
    display: grid;
    gap: 0.9rem;
    align-content: start;
  }
  .shot__frame {
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 2.4vw, 2rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
      radial-gradient(120% 100% at 50% 0%, color-mix(in oklab, var(--disc) 6%, transparent), transparent 62%),
      color-mix(in oklab, var(--ink-1) 84%, transparent);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    transition: border-color 0.45s var(--ease-out), background-color 0.45s;
  }
  .shot:hover .shot__frame { border-color: var(--line-hard); }
  .shot__frame::before {
    content: "";
    position: absolute;
    left: -10%; right: -10%;
    top: 64%;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--disc) 42%, transparent), transparent);
  }
  .shot__frame img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.65));
    transition: transform 0.7s var(--ease-out);
  }
  .shot:hover .shot__frame img { transform: translateY(-6px) scale(1.02); }

  .shot__meta { display: grid; gap: 0.3rem; }
  .shot__cat {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--disc);
  }
  .shot__what {
    font-size: var(--step-0);
    color: var(--fg-mid);
    letter-spacing: -0.01em;
  }

  /* ---- stack grid ---- */
  .stack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }
  @media (min-width: 620px)  { .stack { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (min-width: 900px)  { .stack { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
  /* 36 cells, so every column count here divides evenly and the grid always
     ends on a straight edge. Keep that in mind before adding a stack item:
     3, 4, 6 and 9 all need the total to stay a multiple of 12. */
  @media (min-width: 1240px) { .stack { grid-template-columns: repeat(9, minmax(0, 1fr)); } }

  .stack__cell {
    background: var(--ink);
    display: grid;
    gap: 0.7rem;
    justify-items: center;
    align-content: center;
    padding: clamp(1rem, 2.2vw, 1.6rem) 0.5rem;
    transition: background-color 0.4s var(--ease-out);
  }
  .stack__cell:hover { background: var(--ink-2); }
  .stack__cell img {
    width: clamp(26px, 3vw, 36px);
    height: clamp(26px, 3vw, 36px);
    object-fit: contain;
    filter: grayscale(1) opacity(0.62);
    transition: filter 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  }
  /* icons drawn from a font rather than a file, same optical size */
  .stack__cell .fab {
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1;
    color: var(--fg-dim);
    transition: color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  }
  .stack__cell:hover img { filter: grayscale(0) opacity(1); transform: translateY(-3px); }
  .stack__cell:hover .fab { color: var(--fg); transform: translateY(-3px); }
  .stack__cell span {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-faint);
    transition: color 0.4s;
  }
  .stack__cell:hover span { color: var(--fg-dim); }

  /* ---- clients ---- */
  .clients {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }
  @media (min-width: 700px)  { .clients { grid-template-columns: repeat(4, 1fr); } }
  @media (min-width: 1100px) { .clients { grid-template-columns: repeat(8, 1fr); } }
  .clients__cell {
    background: var(--ink);
    display: grid;
    place-items: center;
    padding: clamp(1.25rem, 2.6vw, 2rem) 1rem;
    transition: background-color 0.45s var(--ease-out);
  }
  .clients__cell:hover { background: var(--ink-2); }
  .clients__cell img {
    width: clamp(70px, 8vw, 104px);
    height: auto;
    filter: grayscale(1) brightness(0) invert(0.78);
    opacity: 0.85;
    transition: filter 0.45s, opacity 0.45s, transform 0.45s var(--ease-out);
  }
  .clients__cell:hover img {
    filter: grayscale(1) brightness(0) invert(1);
    opacity: 1;
    transform: scale(1.05);
  }

  /* ---- services ---- */
  .svc { border-top: 1px solid var(--line); }
  .svc__item { border-bottom: 1px solid var(--line); }
  .svc__head {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    padding-block: clamp(1.3rem, 2.8vw, 2rem);
    transition: color 0.3s;
  }
  .svc__n {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: var(--fg-faint);
    flex: none;
    transition: color 0.35s;
  }
  .svc__item.is-open .svc__n { color: var(--disc); }
  .svc__title {
    font-size: clamp(1.4rem, 3vw, 2.35rem);
    font-weight: 400;
    letter-spacing: -0.032em;
    line-height: 1.04;
    color: var(--fg-dim);
    flex: 1;
    transition: color 0.35s var(--ease-out), transform 0.45s var(--ease-out);
  }
  .svc__item.is-open .svc__title,
  .svc__head:hover .svc__title { color: var(--fg); }
  .svc__item.is-open .svc__title { transform: translateX(0.3rem); }
  .svc__sign { flex: none; width: 12px; height: 12px; position: relative; align-self: center; color: var(--fg-dim); }
  .svc__sign::before, .svc__sign::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1px;
    background: currentColor;
    transition: transform 0.45s var(--ease-out);
  }
  .svc__sign::after { transform: rotate(90deg); }
  .svc__item.is-open .svc__sign::after { transform: rotate(0deg); }
  .svc__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.55s var(--ease-out);
  }
  .svc__item.is-open .svc__body { grid-template-rows: 1fr; }
  .svc__body > div { overflow: hidden; }
  .svc__body p {
    color: var(--fg-dim);
    max-width: 60ch;
    padding-left: calc(0.7rem + 1.25rem);
    padding-bottom: clamp(1.2rem, 2.6vw, 1.8rem);
  }

  /* ---- contact form ---- */
  .contact {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  @media (min-width: 900px) {
    .contact { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
  }
  .form { display: grid; gap: 1.1rem; }
  .field { display: grid; gap: 0.45rem; }
  .field label {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-dim);
  }
  .field input,
  .field textarea,
  .field select {
    width: 100%;
    padding: 0.85em 1em;
    border-radius: var(--radius);
    background: color-mix(in oklab, var(--ink-1) 88%, transparent);
    border: 1px solid var(--line);
    color: var(--fg);
    font-size: var(--step-0);
    transition: border-color 0.3s, background-color 0.3s;
  }
  .field textarea { resize: vertical; min-height: 8.5rem; line-height: 1.55; }
  .field input:focus,
  .field textarea:focus,
  .field select:focus {
    outline: none;
    border-color: var(--disc);
    background: var(--ink-2);
  }
  .field input::placeholder, .field textarea::placeholder { color: var(--fg-faint); }
  .field select option { background: var(--ink-2); color: var(--fg); }
  .form__row { display: grid; gap: 1.1rem; }
  @media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }
  .form__note { font-size: var(--step--1); color: var(--fg-faint); max-width: 46ch; }
  .form__status {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--disc);
    min-height: 1.2em;
  }

  .contact__side { display: grid; gap: 1.6rem; align-content: start; }
  .contact__line { display: grid; gap: 0.3rem; }
  .contact__k {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-faint);
  }
  .contact__v { font-size: var(--step-1); color: var(--fg); letter-spacing: -0.015em; }
  .contact__v a:hover { color: var(--disc); }

  /* ---- footer ---- */
  .footer {
    border-top: 1px solid var(--line);
    padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.75rem, 3vw, 2.5rem);
    background: color-mix(in oklab, var(--ink) 86%, transparent);
  }
  .footer__grid {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    grid-template-columns: 1fr;
  }
  @media (min-width: 800px) { .footer__grid { grid-template-columns: 1.6fr repeat(2, 1fr); } }
  .footer h4 {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-faint);
    margin-bottom: 1.1rem;
  }
  .footer ul { display: grid; gap: 0.6rem; }
  .footer li a, .footer li span { color: var(--fg-mid); font-size: var(--step--1); transition: color 0.3s; }
  .footer li a:hover { color: var(--disc); }
  .footer__bottom {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-faint);
  }
  .footer__brand p { color: var(--fg-dim); font-size: var(--step--1); max-width: 34ch; margin-top: 1rem; }

  /* ---- rail progress ---- */
  /* sits under the bar on mobile, beside the rail on desktop */
  .rail {
    position: fixed;
    top: var(--bar); left: var(--rail); right: 0;
    height: 2px;
    z-index: 80;
    pointer-events: none;
  }
  .rail i {
    display: block;
    height: 100%;
    width: 100%;
    transform: scaleX(var(--p, 0));
    transform-origin: left;
    background: linear-gradient(90deg, var(--disc-dim), var(--disc), var(--star));
  }

  .noise {
    position: fixed;
    inset: -50%;
    z-index: 70;
    pointer-events: none;
    opacity: 0.025;
    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='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain 0.7s steps(4) infinite;
  }

  .cursor, .cursor-dot {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 900;
    border-radius: 50%;
    mix-blend-mode: difference;
    will-change: transform;
  }
  .cursor {
    width: 32px; height: 32px;
    border: 1px solid #fff;
    margin: -16px 0 0 -16px;
    transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out),
                margin 0.35s var(--ease-out), background-color 0.35s, opacity 0.3s;
  }
  .cursor-dot { width: 4px; height: 4px; background: #fff; margin: -2px 0 0 -2px; }
  .cursor.is-hot { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(255,255,255,0.9); }
  .cursor.is-hidden, .cursor-dot.is-hidden { opacity: 0; }
  @media (hover: none), (pointer: coarse) { .cursor, .cursor-dot { display: none; } }
}

/* ── motion ──────────────────────────────────────────────────────────────── */
@layer motion {
  @keyframes node-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
  }
  @keyframes wire-run {
    0%   { transform: scaleX(0); transform-origin: left; }
    45%  { transform: scaleX(1); transform-origin: left; }
    55%  { transform: scaleX(1); transform-origin: right; }
    100% { transform: scaleX(0); transform-origin: right; }
  }
  @keyframes grain {
    0%,100% { transform: translate(0,0); }
    20% { transform: translate(-3%, 4%); }
    40% { transform: translate(2%, -5%); }
    60% { transform: translate(-4%, -2%); }
    80% { transform: translate(5%, 3%); }
  }

  [data-reveal] {
    opacity: 0;
    transform: translateY(clamp(14px, 2.4vw, 28px));
    transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
    transition-delay: calc(var(--d, 0) * 1ms);
  }
  [data-reveal].is-in { opacity: 1; transform: none; }

  .split-line { display: block; overflow: hidden; }
  .split-char {
    display: inline-block;
    transform: translateY(110%) rotate(3deg);
    opacity: 0;
    transition: transform 0.95s var(--ease-out), opacity 0.6s linear;
    transition-delay: calc(var(--c, 0) * 18ms + var(--l, 0) * 60ms);
  }
  .is-in .split-char, .split-ready.is-in .split-char { transform: none; opacity: 1; }
}

/* ── utils ───────────────────────────────────────────────────────────────── */
@layer utils {
  .u-max-40 { max-width: 40ch; }
  .u-max-54 { max-width: 54ch; }
  .u-dim { color: var(--fg-dim); }
  .u-mid { color: var(--fg-mid); }
  .u-mono { font-family: var(--font-mono); }
  .u-mt-l { margin-top: clamp(2rem, 5vw, 3.5rem); }
  .u-mt-m { margin-top: clamp(1.25rem, 3vw, 2rem); }
  .u-rel { position: relative; z-index: 2; }
  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ── Arabic and right to left ─────────────────────────────────────────────
   Arabic is the default, so this layer carries real weight rather than being
   a translation afterthought. Two things drive it:

     html[dir="rtl"]  flips layout
     html.is-ar       swaps the typeface

   They are separate because the mono labels stay Latin in both languages,
   since terms like DEVOPS and JETBRAINS read worse transliterated.
   ────────────────────────────────────────────────────────────────────────── */
@layer components {

  /* ---- typography ---- */
  html.is-ar body {
    font-family: var(--font-ar-body);
    /* Arabic sits on a larger optical body at the same point size, and the
       script needs more leading than Latin to stay comfortable */
    line-height: 1.85;
    letter-spacing: 0;
  }
  html.is-ar h1, html.is-ar h2, html.is-ar h3, html.is-ar h4,
  html.is-ar .hero__title, html.is-ar .cap__name, html.is-ar .story__block h3,
  html.is-ar .lost__title, html.is-ar .section-head__title, html.is-ar .pull {
    font-family: var(--font-ar-display);
    /* negative tracking pulls Arabic letterforms apart rather than tightening
       them, so it is removed instead of tuned */
    letter-spacing: 0;
    line-height: 1.35;
  }
  html.is-ar .hero__title { line-height: 1.3; }
  html.is-ar .lede { line-height: 1.85; letter-spacing: 0; }
  html.is-ar .preloader__name {
    font-family: var(--font-ar-display);
    letter-spacing: 0.06em;
    text-indent: 0;
  }
  html.is-ar .side__word {
    font-family: var(--font-ar-display);
    letter-spacing: 0.1em;
  }
  html.is-ar .btn, html.is-ar .field label, html.is-ar .contact__k,
  html.is-ar .band__k, html.is-ar .cap__tag, html.is-ar .shot__cat {
    letter-spacing: 0.04em;
  }
  /* numerals, phone numbers and code stay Latin and stay left to right */
  html.is-ar .u-mono, html.is-ar .band__n, html.is-ar .contact__v a[href^="tel"],
  html.is-ar .footer__bottom, html.is-ar .stack__cell span,
  html.is-ar .cap__chips span, html.is-ar .story__n, html.is-ar .svc__n {
    font-family: var(--font-mono);
    direction: ltr;
    unicode-bidi: isolate;
  }
  html.is-ar .label { letter-spacing: 0.1em; }
  /* Figure captions and the mono eyebrows are set in Arabic here, so the wide
     tracking that suits Latin small caps has to come off. Arabic letters join,
     and tracking pulls those joins apart. */
  html.is-ar .cap__figure figcaption,
  html.is-ar .cap__proof-note,
  html.is-ar .shot__cat,
  html.is-ar .contact__k,
  html.is-ar .field label,
  html.is-ar .band__k,
  html.is-ar .cap__tag,
  html.is-ar .footer h4 {
    font-family: var(--font-ar-body);
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.78rem;
  }
  html.is-ar .label { text-transform: none; font-family: var(--font-ar-body); font-size: 0.8rem; }

  /* ---- layout flips ---- */
  html[dir="rtl"] body { padding-left: 0; padding-right: var(--rail); }
  html[dir="rtl"] .side { inset: 0 0 0 auto; border-right: 0; border-left: 1px solid var(--line); }
  html[dir="rtl"] .rail { left: 0; right: var(--rail); }
  html[dir="rtl"] .rail i { transform-origin: right; }
  html[dir="rtl"] .side__word { transform: rotate(0deg); }

  html[dir="rtl"] .hero__scroll { left: auto; right: var(--gut); }
  html[dir="rtl"] .preloader__count { right: auto; left: var(--gut); }
  html[dir="rtl"] .preloader__bar i { transform-origin: right; }

  /* the hero wedge of ink has to come from the other side */
  html[dir="rtl"] .hero::after {
    background:
      linear-gradient(260deg,
        var(--ink) 0%,
        color-mix(in oklab, var(--ink) 92%, transparent) 32%,
        color-mix(in oklab, var(--ink) 55%, transparent) 50%,
        transparent 68%),
      linear-gradient(to bottom, var(--ink) 0%, transparent 16%, transparent 82%, var(--ink) 100%);
  }
  html[dir="rtl"] .cap::before,
  html[dir="rtl"] .svc__item::before {
    background: linear-gradient(270deg, color-mix(in oklab, var(--disc) 8%, transparent), transparent 65%);
  }
  html[dir="rtl"] .cap.is-active .cap__title,
  html[dir="rtl"] .svc__item.is-open .svc__title { transform: translateX(-0.3rem); }
  html[dir="rtl"] .cap__points li::before,
  html[dir="rtl"] .shot__cat { text-align: right; }
  html[dir="rtl"] .cap__body p, html[dir="rtl"] .cap__points { margin-inline: 0; }
  html[dir="rtl"] .svc__body p { padding-left: 0; padding-right: calc(0.7rem + 1.25rem); }
  html[dir="rtl"] .btn:hover .btn__ico { transform: translate(-0.22em, -0.22em); }
  html[dir="rtl"] .link-x span::after { left: auto; right: 0; }

  /* the mono readouts inside figures keep their own direction */
  html[dir="rtl"] canvas { direction: ltr; }

  @media (max-width: 900px) {
    html[dir="rtl"] body { padding-right: 0; }
    html[dir="rtl"] .side { inset: 0 0 auto 0; border-left: 0; border-bottom: 1px solid var(--line); }
    html[dir="rtl"] .rail { right: 0; }
  }

  /* ---- the language switch ------------------------------------------------
     Fixed to the corner so it is reachable at any scroll depth, with no bar
     and nothing to open first. One click swaps the language.

     Hidden for now: Arabic copy needs another pass before it ships. Delete
     this one declaration to bring the switcher back once it does. */
  .lang {
    display: none;
    position: fixed;
    top: clamp(0.85rem, 2vh, 1.5rem);
    left: clamp(0.85rem, 2vw, 1.6rem);
    z-index: 120;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.85rem 0.4rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--line-hard);
    background: color-mix(in oklab, var(--ink) 72%, transparent);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    color: var(--fg);
    transition: border-color 0.35s var(--ease-out), background-color 0.35s,
                transform 0.35s var(--ease-out);
  }
  /* on the left rail layout the rail already owns the far edge, so the switch
     sits just inside it */
  @media (min-width: 901px) {
    .lang { left: calc(var(--rail) + clamp(0.85rem, 1.6vw, 1.6rem)); }
    html[dir="rtl"] .lang { left: auto; right: calc(var(--rail) + clamp(0.85rem, 1.6vw, 1.6rem)); }
  }
  @media (max-width: 900px) {
    /* the bar owns the top, so the switch drops just beneath it */
    .lang { top: calc(var(--bar) + 0.6rem); left: clamp(0.75rem, 3vw, 1.25rem); }
    html[dir="rtl"] .lang { left: auto; right: clamp(0.75rem, 3vw, 1.25rem); }
  }
  .lang:hover { border-color: var(--disc); background: color-mix(in oklab, var(--ink-2) 82%, transparent); }
  .lang:active { transform: scale(0.97); }

  .lang__flag {
    width: 26px; height: 18px;
    border-radius: 2px;
    display: block;
    flex: none;
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--fg) 18%, transparent);
    overflow: hidden;
  }
  .lang__label {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-mid);
    white-space: nowrap;
  }
  /* the Arabic label is set in Arabic, so it drops the mono face */
  .lang.is-ar .lang__label {
    font-family: var(--font-ar-display);
    font-size: 0.8rem;
    letter-spacing: 0;
    text-transform: none;
  }
  .lang:hover .lang__label { color: var(--fg); }

  /* The switch advertises where it takes you, not where you are. Reading
     Arabic it shows the UK flag and the word English. Reading English it
     shows the UAE flag and العربية. */
  .lang__flag svg { display: block; width: 100%; height: 100%; }
  .lang .lang__uk { display: none; }
  .lang .lang__ae { display: block; }
  .lang.is-ar .lang__uk { display: block; }
  .lang.is-ar .lang__ae { display: none; }
}

/* ── reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .split-char { opacity: 1 !important; transform: none !important; }
  .noise, .cursor, .cursor-dot { display: none; }
  .hero__hole { opacity: 1; }
  .domains span { color: var(--fg-mid); }
}