/* =============================================================
   PIXELBATTLE STUDIOS: the shared design system.

   Lifted from the locked mockups (pbcss.txt and the six page mockups),
   de-scoped from the .pb wrapper so it applies to the whole site. One
   file, no build step, no framework. Page builders: reuse these classes
   before inventing new ones, and put anything page-specific in a small
   <style> block on that page, not here.

   Dark only, on purpose. This is a game studio, not a document.
   Never used by play/: the game has its own style.css.

   Contents
     1. Tokens
     2. Base, skip link, focus
     3. Header and nav (and the mobile menu)
     4. Type and layout helpers
     5. Buttons, chips
     6. Motion: fade-up, reveal, hover lifts
     7. Shared blocks: page head, join band, stats, cards, tiles, rows
     8. Prose (legal pages)
     9. Ad boxes
    10. Footer
    11. Phone and tablet
    12. Reduced motion
   ============================================================= */

/* ---- 1. Tokens --------------------------------------------- */

:root {
  --bg: #07070C;
  --text: #fff;
  --mut: #B9B6C8;
  --mut-dim: #8F8AA3;      /* small labels; still AA on --bg */
  --line: #1E1D2A;
  --line-strong: #3A3850;

  --r: #FF3B4E;            /* red */
  --b: #3BA7FF;            /* blue */
  --y: #FFB627;            /* yellow */
  --g: #3BE36B;            /* green */
  --v: #A855F7;            /* purple: danger, the dungeon */

  --ink: #07070C;          /* text on a bright colour */

  --font-text: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;

  --max: 1280px;
  --gut: clamp(20px, 4vw, 48px);
  --pad: max(var(--gut), calc((100vw - var(--max)) / 2));
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* ---- 2. Base, skip link, focus ----------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
}

main { flex: 1 0 auto; display: block; }

a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }

h1, h2, h3, h4 { margin: 0; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  background: #fff;
  color: var(--ink);
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
}
.skip-link:focus { top: 12px; }

/* One visible focus ring everywhere. Light on dark, offset so it never
   hides inside a rounded edge. */
:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible, .site-nav a:focus-visible, .menu-toggle:focus-visible { border-radius: 999px; }

[id] { scroll-margin-top: 90px; }

/* ---- 3. Header and nav ------------------------------------- */

.site-header {
  position: relative;
  z-index: 50;
}

/* On the home page the header floats over the hero art. */
.site-header--overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
}

.site-header .bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px var(--pad);
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.logo i {
  width: 16px; height: 16px;
  background: #fff;
  box-shadow: 0 0 18px #fff;
  flex: none;
  animation: px-pulse 2.6s ease-in-out infinite;
}
@keyframes px-pulse { 50% { box-shadow: 0 0 4px #fff; } }

.site-nav ul {
  display: flex;
  gap: 10px;
  margin: 0; padding: 0;
  list-style: none;
}
.site-nav a {
  display: inline-block;
  border: 1.5px solid rgba(255, 255, 255, .75);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.4;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .2s, color .2s;
}
.site-nav a[aria-current="page"],
.site-nav a:hover {
  background: #fff;
  color: var(--ink);
}

/* The menu button only exists when JS is running (site.js adds .js).
   With JS off the links just stay visible and wrap. */
.menu-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .75);
  border-radius: 999px;
  padding: 9px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-toggle .menu-icon {
  position: relative;
  width: 16px; height: 2px;
  background: currentColor;
  transition: background .2s;
}
.menu-toggle .menu-icon::before, .menu-toggle .menu-icon::after {
  content: "";
  position: absolute; left: 0;
  width: 16px; height: 2px;
  background: currentColor;
  transition: transform .25s var(--ease);
}
.menu-toggle .menu-icon::before { top: -5px; }
.menu-toggle .menu-icon::after { top: 5px; }
.menu-toggle[aria-expanded="true"] .bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .bars::before { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars::after { transform: translateY(-5px) rotate(-45deg); }

/* ---- 4. Type and layout helpers ---------------------------- */

.d {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  line-height: .9;
  letter-spacing: .01em;
}

.k {
  display: block;
  font-size: 12.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mut);
}

.serif { font-family: var(--font-serif); }

.sec { padding: clamp(56px, 8vw, 84px) var(--pad); }
.sec--flush-top { padding-top: 0; }

.h2 { font-size: clamp(42px, 7vw, 64px); margin: 10px 0 24px; }
.h1 { font-size: clamp(64px, 14vw, 176px); margin: 10px 0 0; }

.sec p, .text p {
  color: var(--mut);
  font-size: 18px;
  line-height: 1.55;
  margin: 0 0 14px;
  max-width: 46ch;
}
.sec p.wide, .text p.wide { max-width: 64ch; }

/* a heading row: title left, small label right */
.head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 20px;
  flex-wrap: wrap;
  padding: 0 var(--pad) 22px;
}
.head h2 { font-size: clamp(36px, 6vw, 54px); }
.head span {
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mut-dim);
  font-weight: 600;
}

.link-arrow {
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 14px;
  border-bottom: 2px solid #fff;
  padding-bottom: 3px;
  display: inline-block;
}

/* ---- 5. Buttons, chips ------------------------------------- */

.btn {
  display: inline-block;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
  border: 1.5px solid #fff;
  transition: transform .25s var(--ease-out), background .2s, color .2s;
}
.btn-solid { background: #fff; color: var(--ink); }
.btn-ghost { background: transparent; color: #fff; padding: 12.5px 26px; }
.btn-solid:hover, .btn-ghost:hover { transform: translateY(-3px); }
.btn-ghost:hover { background: #fff; color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.chips > * {
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---- 6. Motion --------------------------------------------- */

/* Fade up on load. Safe with JS off: it is a plain CSS animation. */
.up { animation: fade-up .9s var(--ease) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(28px); } }

/* Four colour bars that draw in under a hero title. */
.bars { display: flex; gap: 8px; margin-top: 18px; }
.bars i {
  height: 8px; width: clamp(48px, 9vw, 86px);
  border-radius: 2px;
  transform-origin: left;
  animation: bar-in 1s var(--ease-out) both;
}
@keyframes bar-in { from { transform: scaleX(0); } }

/* Scroll reveal. Hidden only when JS is on and has promised to reveal it
   (site.js adds .js to <html>); with JS off, everything is simply there. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: .08s; }
.js .reveal[data-delay="2"] { transition-delay: .16s; }
.js .reveal[data-delay="3"] { transition-delay: .24s; }

/* Slow drift on hero art and video. */
.drift { animation: drift 16s ease-in-out infinite alternate; }
@keyframes drift { to { transform: scale(1.07); } }

/* Hover lift for cards and tiles. */
.lift { transition: transform .25s var(--ease-out); }
.lift:hover { transform: translateY(-8px) rotate(-1deg); }

/* Image zoom inside a clipped frame. */
.zoom { overflow: hidden; }
.zoom img, .zoom .im { transition: transform .7s var(--ease-out); }
.zoom:hover img, .zoom:hover .im { transform: scale(1.06); }

/* ---- 7. Shared blocks -------------------------------------- */

/* Full-bleed hero with art or a looping teaser behind it. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  min-height: min(820px, 92vh);
  min-height: min(820px, 92svh);
  display: flex;
  align-items: flex-end;
}
.hero > video, .hero > picture, .hero > img, .hero > .hero-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.hero > video, .hero > img, .hero picture img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,7,12,.7) 0, transparent 22%, transparent 48%, rgba(7,7,12,.92) 88%, var(--bg) 100%);
  pointer-events: none;
}
.hero-body {
  position: relative; z-index: 3;
  width: 100%;
  padding: 120px var(--pad) 46px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  flex-wrap: wrap;
}
.hero-body h1 { font-size: clamp(64px, 15vw, 168px); line-height: .82; }
.hero-body small {
  display: block;
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  color: #D9D4E8;
  margin-bottom: 6px;
}

/* Inner page head: kicker + big title, optional aside on the right. */
.page-head {
  padding: 50px var(--pad) 40px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: end;
}

/* Gradient call-to-action band. */
.join {
  margin: 0 var(--pad) 80px;
  border-radius: 18px;
  padding: clamp(28px, 5vw, 56px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  background: linear-gradient(90deg, var(--r), var(--y) 34%, var(--g) 67%, var(--b));
  color: var(--ink);
}
.join .d { font-size: clamp(40px, 7vw, 72px); }
.join .btn-solid { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Stat strip. */
.stat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.stat > div { padding: 20px; border-right: 1px solid var(--line); }
.stat > div:last-child { border: 0; }
.stat b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 60px);
  line-height: .9;
  display: block;
}
.stat span {
  color: var(--mut);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Cast cards: a colour-banded image card. Set --c on the element. */
.cast {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 0 var(--pad) clamp(56px, 8vw, 90px);
}
.cast-card {
  height: 440px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
}
.cast-card .im {
  position: absolute; inset: 0;
  background-size: auto 215%;
  background-repeat: no-repeat;
}
.cast-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(7,7,12,.95));
  border-bottom: 6px solid var(--c, #fff);
}
.cast-card > *:not(.im) { position: relative; z-index: 2; }
.cast-card b {
  font-family: var(--font-display);
  font-size: 40px;
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1;
  color: var(--c, #fff);
}
.cast-card span { font-size: 14px; color: #C9C6D6; letter-spacing: .06em; }

/* Image gallery: one large, two small. */
.gal {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  padding: 0 var(--pad) clamp(56px, 8vw, 90px);
  height: 560px;
  box-sizing: content-box;
}
.gal > * { border-radius: 14px; overflow: hidden; position: relative; min-height: 0; }
.gal img { width: 100%; height: 100%; object-fit: cover; }
.gal em {
  position: absolute; left: 14px; bottom: 12px;
  font-style: normal; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  background: rgba(7,7,12,.7); padding: 5px 9px; border-radius: 4px;
}

/* Game row: full-width image beside text (alternates on request). */
.row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  border-top: 1px solid var(--line);
  min-height: 380px;
}
.row .v { background-size: cover; background-position: center; min-height: 240px; position: relative; overflow: hidden; }
.row .v img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.row .t {
  padding: clamp(32px, 5vw, 56px) var(--pad) clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
  display: flex; flex-direction: column; gap: 14px; justify-content: center;
}
.row.flip { grid-template-columns: 1fr 1.2fr; }
.row.flip .v { order: 2; }
.row h3 { font-size: clamp(44px, 6vw, 64px); line-height: .9; }
.row p { margin: 0; color: #C9C6D6; font-size: 18px; max-width: 40ch; }

/* Colour tiles (arcade games, small cards). Set background inline or --c. */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 0 var(--pad);
}
.tile {
  background: var(--c, var(--r));
  border-radius: 16px;
  padding: 26px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--ink);
}
.tile .n { font-family: var(--font-display); font-weight: 800; font-size: 22px; opacity: .7; }
.tile b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 58px);
  text-transform: uppercase;
  line-height: .88;
  display: block;
}
.tile p { color: var(--ink); opacity: .85; font-size: 16.5px; margin: 10px 0 16px; }
.tile .play-pill {
  background: var(--ink); color: #fff;
  border-radius: 999px;
  padding: 11px 22px;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 13px;
  width: max-content;
  display: inline-block;
}

/* Three-step "how it works". */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.how i {
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 64px;
  line-height: .9;
  display: block;
  margin-bottom: 8px;
}
.how b { font-size: 22px; display: block; margin-bottom: 6px; }

/* Plain bordered card (news posts, team members, press items). */
.card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  background: rgba(255,255,255,.02);
}
.card h3 { font-size: 34px; margin-bottom: 10px; }
.card p { color: var(--mut); margin: 0 0 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* Tasteful initial tile where a photo is missing. Set --c. */
.initial {
  aspect-ratio: 1;
  border-radius: 14px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c, #fff) 18%, var(--bg));
  border: 1.5px solid var(--c, #fff);
  color: var(--c, #fff);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(80px, 12vw, 140px);
  line-height: 1;
}

/* The mantra. */
.mantra {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.5;
  color: #E9E6F3;
  max-width: 34em;
}

/* ---- 8. Prose (privacy, terms) ----------------------------- */

.prose {
  max-width: calc(760px + var(--pad) * 2);
  padding: 40px var(--pad);
  width: 100%;
}
.prose h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  font-size: clamp(54px, 10vw, 96px);
  line-height: .9;
  margin: 0 0 14px;
}
.prose .lede { color: var(--mut); font-size: 20px; margin: 0 0 40px; }
.prose h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 800;
  font-size: clamp(26px, 4vw, 32px);
  line-height: 1;
  letter-spacing: .02em;
  margin: 44px 0 10px;
}
.prose p { margin: 0 0 14px; color: var(--mut); max-width: 62ch; }
.prose a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.prose .updated { color: var(--mut-dim); font-size: 15px; margin-top: 44px; }
.backhome { display: inline-block; margin-bottom: 34px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }

/* ---- 9. Ad boxes ------------------------------------------- */

/* Markup, from the old home page, unchanged:
     <section class="ad-wrap"><div class="ad-box">
       <p class="eyebrow">Advertisement</p>
       <div class="ad-slot"><ins class="adsbygoogle" ...></ins><script>...</script></div>
     </div></section>
   Only the Arcade and News pages carry ad slots. Never the game, never
   the home page, never the studio pages. */

.ad-wrap { padding: 0 var(--pad) 26px; }

.ad-box {
  border: 1.5px dashed transparent;
  border-radius: 10px;
  background: none;
  padding: 0;
}
.ad-box .eyebrow {
  display: none;
  margin: 0 0 14px;
  color: var(--mut-dim);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  max-width: none;
}

/* An advert stays inside its dashed box, always. Google's full-width option
   is off on every slot (data-full-width-responsive="false": it stretches a
   phone ad to the screen edges, straight through the border), and anything
   Google still makes too wide is clipped here rather than spilling out. */
.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ad-slot .adsbygoogle { width: 100%; max-width: 100%; }

/* The slot must stay laid out and measurable, because Google sizes an advert
   from the width of its container and gives up on a hidden one. So nothing
   is display:none while the advert is deciding. The box keeps its size and
   loses its chrome, and only shows the dashed frame and label once Google
   has stamped the advert as filled. */
.ad-box:has(ins[data-ad-status="filled"]) {
  border-color: var(--line-strong);
  padding: 18px 24px 24px;
}
.ad-box:has(ins[data-ad-status="filled"]) .eyebrow { display: block; }

/* An advert Google has decided not to fill takes no room. Blockers and
   offline browsing never set the attribute at all, so the empty box simply
   stays invisible and flat. */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* And the section around an unfilled box adds no vertical space. */
.ad-wrap:has(.ad-box):not(:has(ins[data-ad-status="filled"])) { padding-bottom: 0; }

/* ---- 10. Footer -------------------------------------------- */

.site-footer {
  margin-top: 40px;
  border-top: 1px solid var(--line);
  padding: 56px var(--pad) 40px;
  color: var(--mut);
  font-size: 15px;
}
.site-footer .cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.site-footer h2 {
  font-size: 12.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mut-dim);
  margin: 0 0 14px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: #fff; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer .company { margin: 14px 0 0; max-width: 40ch; }
.site-footer .company a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer .legal {
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px 30px;
  flex-wrap: wrap;
  color: var(--mut-dim);
  font-size: 13.5px;
}
.site-footer .legal p { margin: 0; max-width: 70ch; }
.site-footer .legal nav { display: flex; gap: 20px; }

/* ---- 11. Phone and tablet ---------------------------------- */

@media (max-width: 960px) {
  .page-head { grid-template-columns: 1fr; gap: 24px; }
  .tiles, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .cast { grid-template-columns: repeat(2, 1fr); }
  .cast-card { height: 360px; }
  .how { grid-template-columns: 1fr; gap: 28px; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
  .site-footer .cols > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  /* Mobile menu: only collapses when JS is there to open it again. */
  .js .menu-toggle { display: inline-flex; }
  .js .site-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: rgba(7, 7, 12, .97);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 16px var(--gut) 24px;
  }
  .js .site-nav.open { display: block; }
  .js .site-nav ul { flex-direction: column; gap: 10px; }
  .js .site-nav a { display: block; text-align: center; padding: 14px 18px; font-size: 14px; }

  /* With JS off the pills just wrap under the logo. */
  .site-header .bar { flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; }
  .site-nav ul { flex-wrap: wrap; }

  .row, .row.flip { grid-template-columns: 1fr; }
  .row.flip .v { order: 0; }
  .row .v { min-height: 260px; }
  .row .t { padding: 32px var(--gut); }
  .gal { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; height: auto; }
  .gal > :first-child { grid-column: 1 / -1; grid-row: auto !important; aspect-ratio: 16 / 9; }
  .gal > :not(:first-child) { aspect-ratio: 1; }
  .grid-2 { grid-template-columns: 1fr; }
  .hero { min-height: 640px; }
}

@media (max-width: 600px) {
  body { font-size: 17px; }
  .tiles, .grid-3 { grid-template-columns: 1fr; }
  .tile { min-height: 240px; }
  .cast { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cast-card { height: 280px; padding: 16px; }
  .cast-card b { font-size: 32px; }
  .stat { grid-template-columns: 1fr; }
  .stat > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat > div:last-child { border-bottom: 0; }
  .logo { letter-spacing: .14em; font-size: 13px; gap: 10px; }
  .hero-body { padding-top: 100px; }
  .join { margin-bottom: 56px; }
  .site-footer .cols { grid-template-columns: 1fr; gap: 28px; }
  .site-footer .legal nav { flex-wrap: wrap; }
  .btn { padding: 13px 22px; white-space: normal; text-align: center; }
  .btn-row { width: 100%; }
}

@media (max-width: 380px) {
  .logo { letter-spacing: .08em; font-size: 12px; }
  .menu-toggle { padding: 8px 12px; }
}

/* ---- 12. Reduced motion ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .lift:hover, .btn-solid:hover, .btn-ghost:hover { transform: none; }
  .zoom:hover img, .zoom:hover .im { transform: none; }
}