/* ==========================================================================
   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;

/* ── 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);

    --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;

    --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;
  }
}

/* ── 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); }
}