/* ==========================================================================
   ALT Studios — site styles
   Tokens are lifted verbatim from ALT Brand OS V3. The brand describes itself
   as "visible 12-col grids · axis labels · monospace telemetry · single accent
   points · clean negative space", and "restraint is the brand" — which is why
   there is one accent colour and a lot of air.
   ========================================================================== */

:root{
  /* ---- ALT palette ---- */
  --ink-000:#030305; --ink-100:#070709; --ink-200:#0b0b0f; --ink-300:#101015;
  --ink-400:#16161d; --ink-500:#1e1e27; --ink-600:#2a2a36; --ink-700:#3a3a48;
  --bone:#f2f2ef; --bone-2:#d8d8d4;
  --mist:#9c9ca4; --mist-2:#6a6a72; --mist-3:#3f3f47;
  --signal:#ff2e63; --signal-soft:#ff6b95; --signal-deep:#b81c44;
  --line:#22222c;

  /* ---- client palettes — set per page, never global ---- */
  --client:var(--signal);
  --client-ink:#ffffff;

  /* ---- rails, per breakpoint ---- */
  --rail:88px;
  --sec-y:140px;
}

@media (max-width:1439px){ :root{ --rail:64px; --sec-y:120px; } }
@media (max-width:1023px){ :root{ --rail:48px; --sec-y:96px;  } }
@media (max-width:640px) { :root{ --rail:24px; --sec-y:64px;  } }

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink-100);color:var(--bone);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- type ---------- */
.mono{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.29em;text-transform:uppercase;
  color:var(--mist-2);
}
.mono-s{font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--mist-2)}
h1,h2,h3{font-family:'Archivo',system-ui,sans-serif;font-weight:900;letter-spacing:-.028em}
h3{font-weight:700;letter-spacing:-.015em}

/* ==========================================================================
   nav
   ========================================================================== */
nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px var(--rail);
  border-bottom:1px solid transparent;
  transition:background .35s,backdrop-filter .35s,border-color .35s;
}
nav.solid{
  background:rgba(7,7,9,.86);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line);
}
nav .mark{height:26px;width:auto}
.nav-links{display:flex;gap:34px}
.nav-links a{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mist);transition:color .2s}
.nav-links a:hover,.nav-links a.on{color:var(--bone)}
@media (max-width:640px){ .nav-links{display:none} nav{padding:18px var(--rail)} }

/* ==========================================================================
   hero
   ========================================================================== */
header.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:140px var(--rail) 110px;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:64% 50%}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(7,7,9,.94) 0%,rgba(7,7,9,.6) 42%,rgba(7,7,9,.18) 70%,rgba(7,7,9,.5) 100%),
    linear-gradient(0deg,var(--ink-100) 0%,rgba(7,7,9,.25) 32%,rgba(7,7,9,0) 56%);
}
.hero-inner{position:relative;z-index:1;max-width:880px}
.eyebrow{display:flex;align-items:center;gap:11px;margin-bottom:26px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 14px var(--signal);flex:none}
.eyebrow span{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--signal)}
h1{font-size:clamp(38px,6.2vw,84px);line-height:.95;text-wrap:balance}
h1 em{font-style:normal;color:var(--signal);text-shadow:0 0 70px rgba(255,46,99,.4)}
.lede{margin-top:28px;max-width:560px;font-size:clamp(15px,1.5vw,18px);
  line-height:1.66;color:var(--mist)}
.hero-cta{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:17px 32px;border-radius:999px;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:14px;letter-spacing:.06em;
  border:1px solid transparent;cursor:pointer;
  transition:transform .16s,box-shadow .24s,border-color .24s,background .24s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--signal);color:#fff;box-shadow:0 8px 34px rgba(255,46,99,.34)}
.btn-primary:hover{box-shadow:0 12px 48px rgba(255,46,99,.5)}
.btn-ghost{border-color:var(--ink-600);color:var(--bone)}
.btn-ghost:hover{border-color:var(--mist-2);background:rgba(255,255,255,.04)}
.arrow{width:6px;height:6px;border-right:1.6px solid currentColor;
  border-top:1.6px solid currentColor;transform:rotate(45deg)}

/* On narrow screens the art sits directly behind the copy rather than beside
   it, so the scrim has to carry far more of the contrast than it does wide. */
@media (max-width:820px){
  header.hero{align-items:flex-end;padding:120px var(--rail) 72px;min-height:92svh}
  .hero-bg img{object-position:70% 50%}
  .hero-bg::after{
    background:
      linear-gradient(180deg,rgba(7,7,9,.88) 0%,rgba(7,7,9,.6) 24%,rgba(7,7,9,.74) 52%,var(--ink-100) 94%),
      linear-gradient(90deg,rgba(7,7,9,.5),rgba(7,7,9,.18));
  }
  .hero-cta .btn{flex:1 1 100%}
}

/* telemetry strip — brand asks for monospace telemetry */
.telemetry{
  position:absolute;left:var(--rail);right:var(--rail);bottom:34px;z-index:1;
  display:flex;justify-content:space-between;gap:20px;
  border-top:1px solid var(--line);padding-top:18px;
}
.telemetry b{color:var(--mist-3);font-weight:400;margin-left:9px}
@media (max-width:1023px){ .telemetry span:nth-child(n+3){display:none} }
@media (max-width:640px){ .telemetry{display:none} }

/* ==========================================================================
   sections
   ========================================================================== */
section{padding:var(--sec-y) var(--rail)}
.sec-head{display:flex;align-items:center;gap:20px;margin-bottom:28px}
.sec-head .rule{flex:1;height:1px;background:var(--line)}
h2{font-size:clamp(28px,4.2vw,56px);line-height:1.04;margin-bottom:16px}
.sec-lede{max-width:600px;color:var(--mist);line-height:1.62;font-size:16px}

/* ---------- work ---------- */
#work{background:var(--ink-200);border-top:1px solid var(--line)}
/* Explicit columns rather than auto-fit: auto-fill left empty tracks at 1440,
   and any minmax wide enough to fix that collapsed to 1-up at 834. Two-up holds
   from desktop down to tablet, single column only on phones. */
.clients{margin-top:52px;display:grid;gap:24px;grid-template-columns:repeat(2,1fr)}
@media (max-width:700px){ .clients{grid-template-columns:1fr} }
.client{position:relative;display:block;border:1px solid var(--ink-600);
  border-radius:20px;background:var(--ink-300);overflow:hidden;
  transition:border-color .25s,transform .25s,box-shadow .25s}
.client:hover{border-color:rgba(255,46,99,.55);transform:translateY(-3px);
  box-shadow:0 20px 54px rgba(0,0,0,.6)}
.client-shot{aspect-ratio:16/10;background:var(--ink-400);overflow:hidden}
.client-shot img{width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.client:hover .client-shot img{transform:scale(1.05)}
.client-body{padding:28px 30px 30px}
.client-body h3{font-size:26px;margin-bottom:10px}
.client-body p{color:var(--mist);font-size:15px;line-height:1.6}
.client-foot{margin-top:20px;display:flex;align-items:center;justify-content:space-between}
.go{display:inline-flex;align-items:center;gap:9px;color:var(--signal);
  font-family:'Archivo',sans-serif;font-weight:600;font-size:13px;letter-spacing:.05em}

.client.soon{pointer-events:none;border-color:var(--ink-500)}
.client.soon .client-shot{display:grid;place-items:center;background:var(--ink-400)}
.client.soon .client-body h3{color:var(--mist-2)}

/* ---------- capability ---------- */
.caps{margin-top:48px;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  grid-template-columns:repeat(4,1fr)}
@media (max-width:1023px){ .caps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px) { .caps{grid-template-columns:1fr} }
.cap{background:var(--ink-100);padding:36px 30px 40px}
.cap .n{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.26em;color:var(--signal);display:block;margin-bottom:14px}
.cap h3{font-size:19px;margin-bottom:10px}
.cap p{color:var(--mist);font-size:14px;line-height:1.64}

/* ---------- contact ---------- */
#contact{background:var(--ink-200);border-top:1px solid var(--line);text-align:center}
#contact .sec-head{justify-content:center}
#contact .sec-lede{margin:0 auto 34px}
.mailto{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.025em;
  font-size:clamp(22px,3.6vw,42px);color:var(--signal);word-break:break-word;
  text-shadow:0 0 60px rgba(255,46,99,.3)}

footer{border-top:1px solid var(--line);padding:32px var(--rail);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
footer img{height:18px;opacity:.7}

/* ==========================================================================
   client page — chrome stays ALT, the banner and cards take the client palette
   ========================================================================== */
.client-banner{
  background:var(--client);color:var(--client-ink);
  padding:calc(var(--rail) + 40px) var(--rail) 72px;
  margin-top:74px;
}
.crumb{display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--client-ink);opacity:.75;margin-bottom:22px;
  transition:opacity .2s}
.crumb:hover{opacity:1}
.client-banner h1{font-size:clamp(46px,8vw,96px);line-height:.95;color:var(--client-ink)}
.client-banner .lede{color:var(--client-ink);opacity:.92;max-width:680px;margin-top:24px}

.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  margin-top:34px;padding-top:28px;border-top:1px solid rgba(255,255,255,.3)}
@media (max-width:1023px){ .spec{grid-template-columns:repeat(2,1fr);gap:22px} }
@media (max-width:560px) { .spec{grid-template-columns:1fr;gap:18px} }
.spec .k{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;opacity:.66;display:block;margin-bottom:7px}
.spec .v{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;letter-spacing:.01em}

/* client palette readout — ALT's telemetry language, client's colours */
.palette{display:flex;flex-wrap:wrap;gap:26px;margin-top:26px}
.sw{display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;opacity:.75}
.sw i{width:14px;height:14px;border-radius:3px;display:block;
  border:1px solid rgba(255,255,255,.5)}

/* ---------- game grid ---------- */
#suite{background:var(--ink-200);border-top:1px solid var(--line)}
.games{margin-top:44px;display:grid;gap:24px;
  grid-template-columns:repeat(3,1fr)}
@media (max-width:1023px){ .games{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px) { .games{grid-template-columns:1fr} }

.game{display:block;border:1px solid #3a2a22;border-radius:20px;
  background:var(--ink-300);overflow:hidden;
  transition:border-color .25s,transform .25s,box-shadow .25s}
.game:hover{border-color:var(--client);transform:translateY(-3px);
  box-shadow:0 20px 54px rgba(0,0,0,.6)}
.game-shot{aspect-ratio:4/5;background:var(--ink-400);overflow:hidden}
.game-shot img{width:100%;height:100%;object-fit:cover;object-position:top;
  transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.game:hover .game-shot img{transform:scale(1.04)}
.game-body{padding:26px 28px 28px}
.game-body .n{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.26em;color:var(--client);display:block;margin-bottom:10px}
.game-body h3{font-size:24px;margin-bottom:10px}
.game-body p{color:var(--mist);font-size:14px;line-height:1.64}
.game-foot{margin-top:22px;display:flex;align-items:center;justify-content:space-between}
.play{font-family:'Archivo',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.05em;color:var(--client);display:inline-flex;align-items:center;gap:9px}

.game.soon{pointer-events:none;border-color:var(--ink-500)}
.game.soon .game-shot{display:grid;place-items:center}
.game.soon .game-body h3{color:var(--mist-2)}
.game.soon .game-body .n{color:var(--mist-3)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}