/* Game On Consulting Services — rebuild v2 (Alchemy draft, 2026-07-28) */

:root {
  --black: #040302; /* matches the baked-in background of the supplied logo PNG exactly */
  --ink: #17171a;
  --ink-2: #202024;
  --white: #ffffff;
  --off-white: #f7f6f2;
  --gold: #f5b917;
  --gold-deep: #d99e06;
  --grey: #5f5f66;
  --line: rgba(255, 255, 255, 0.12);
  --line-dark: rgba(0, 0, 0, 0.09);
  --radius: 14px;
  --max: 1120px;
  --font-head: "Montserrat", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is load-bearing: the width/height attributes on <img> are presentational
   hints, so without this the height attribute wins and every image renders stretched. */
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); text-transform: uppercase; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); text-transform: uppercase; }
h3 { font-size: 1.12rem; text-transform: uppercase; letter-spacing: 0.04em; }

.kicker {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 14px;
}

.kicker::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin-right: 12px;
  vertical-align: middle;
}

/* v24: the rule mark now sits both sides of every kicker, centred heads included. */

.on-dark .kicker, .hero .kicker { color: var(--gold); }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--black); /* solid, so the logo's baked-in black disappears into the bar */
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
}

.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 44px; width: auto; }

nav.primary { display: flex; gap: 26px; align-items: center; }

nav.primary a {
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  position: relative;
  padding: 6px 0;
  transition: color 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}

nav.primary a:not(.cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-out);
}

nav.primary a:hover::after,
nav.primary a[aria-current="page"]:not(.cta)::after { transform: scaleX(1); }

/* :not(.cta) matters: without it the Contact button on its own page gets gold text on
   its gold pill and the word vanishes. */
nav.primary a:hover, nav.primary a[aria-current="page"]:not(.cta) { opacity: 1; color: var(--gold); }
nav.primary .cta[aria-current="page"] { color: var(--black); }

nav.primary .cta {
  background: var(--gold);
  color: var(--black);
  padding: 10px 20px;
  border-radius: 999px;
  opacity: 1;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

nav.primary .cta:hover {
  background: var(--gold-deep);
  color: var(--black);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245, 185, 23, 0.35);
}

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: var(--white); margin: 5px 0; border-radius: 2px; transition: transform 0.2s var(--ease-out), opacity 0.2s; }

/* ---------- hero ---------- */

.hero {
  background:
    radial-gradient(ellipse 900px 480px at 85% 110%, rgba(245, 185, 23, 0.16), transparent 60%),
    var(--black);
  color: var(--white);
  position: relative;
  overflow: hidden;
  padding: 100px 0 120px;
}

.hero::before {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -40px;
  width: 460px;
  height: 390px;
  background: url("../assets/controller-white.png") no-repeat center / contain;
  opacity: 0.16;
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 22%, var(--gold) 50%, var(--gold-deep) 78%, transparent);
}

.hero .wrap { position: relative; z-index: 1; max-width: 900px; }

.hero h1 .gold { color: var(--gold); }

.hero .lede {
  margin-top: 22px;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
}

.hero .actions { margin-top: 36px; display: flex; gap: 16px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-gold { background: var(--gold); color: var(--black); }
.btn-gold:hover { background: var(--gold-deep); box-shadow: 0 8px 26px rgba(245, 185, 23, 0.35); }
.btn-ghost { border: 2px solid var(--gold); color: var(--gold); }
.btn-ghost:hover { background: rgba(245, 185, 23, 0.12); }

/* ---------- scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee .track { animation: none !important; flex-wrap: wrap; justify-content: center; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- sections ---------- */

section { padding: 84px 0; }
section.tight { padding: 56px 0; }

.on-dark { background: var(--black); color: var(--white); }
.on-grey { background: var(--off-white); }

/* angled band transitions: dark wedge into a light section, light wedge into a dark one */
.angle-top { position: relative; }
.angle-top::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 46px;
  background: var(--black);
  clip-path: polygon(0 0, 100% 0, 100% 18%, 0 100%);
  z-index: 1;
}

.angle-top-light { position: relative; }
.angle-top-light::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 46px;
  background: var(--white);
  clip-path: polygon(0 0, 100% 0, 100% 18%, 0 100%);
  z-index: 1;
}

/* light-section decorative controller art (uses the artwork's own grey/gold lines) */
.deco-controller { position: relative; overflow: hidden; }
.deco-controller::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -60px;
  width: 430px;
  height: 360px;
  background: url("../assets/controller-dark.png") no-repeat center / contain;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}
.deco-controller .wrap { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .deco-controller::after { display: none; }
}

.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { margin-top: 14px; color: var(--grey); }
.on-dark .section-head p { color: rgba(255, 255, 255, 0.75); }

/* distinction strip */

.distinction {
  border-left: 6px solid var(--gold);
  background: var(--off-white);
  padding: 28px 32px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.1rem;
  max-width: 820px;
}

.distinction strong { font-family: var(--font-head); }

/* cards */

.grid { display: grid; gap: 22px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 28px;
  background: var(--white);
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.09);
}

.on-dark .card { background: var(--ink); border-color: var(--line); }
.on-dark .card:hover { border-color: var(--gold); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); }

.card h3 { margin-bottom: 10px; }
.card p { color: var(--grey); font-size: 0.97rem; }
.on-dark .card p { color: rgba(255, 255, 255, 0.72); }

.card .icon {
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(245, 185, 23, 0.14);
}

.card .icon svg { width: 24px; height: 24px; stroke: var(--gold-deep); }
.on-dark .card .icon svg { stroke: var(--gold); }

.card .tagline {
  display: block;
  color: var(--gold-deep);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.on-dark .card .tagline { color: var(--gold); }

/* stats bar */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat { padding: 26px 14px; position: relative; }

.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--line);
}

.stat .num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.stat .label {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 10px;
  text-wrap: balance;
}

/* partners marquee */

.marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee .track {
  display: flex;
  gap: 30px;
  width: max-content;
  animation: marquee 34s linear infinite;
  padding: 8px 0;
  align-items: center;
}

/* runs continuously: no hover pause, on Liam's instruction */

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--shift, 50%))); }
}

.partner-card {
  background: var(--white);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  height: 120px;
  width: 220px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.partner-card img {
  max-height: 84px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.85;
  transition: filter 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}

.partner-card:hover img { filter: none; opacity: 1; }

.partner-card.dark { background: var(--ink-2); border-color: var(--line); }
.partner-card.dark img { filter: none; opacity: 0.95; }

/* white logos sitting directly on the black band */
.partner-flat {
  flex: 0 0 auto;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
}

.partner-flat img {
  max-height: 92px;
  width: auto;
  max-width: 290px;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.partner-flat:hover img { opacity: 1; transform: scale(1.05); }

/* per-logo optical balance: wordmarks read larger than icon marks at equal height */
.partner-flat.wordmark img { max-height: 62px; }
.partner-flat.stacked img { max-height: 118px; }

@media (max-width: 680px) {
  .partner-flat { height: 116px; padding: 0 16px; }
  .partner-flat img { max-height: 66px; max-width: 200px; }
  .partner-flat.wordmark img { max-height: 46px; }
  .partner-flat.stacked img { max-height: 92px; }
}

/* games carousel (About) */
.marquee.games .track { animation-duration: 52s; gap: 18px; }

.marquee.games img {
  height: 190px;
  width: 190px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
  flex: 0 0 auto;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.marquee.games img:hover {
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
}

@media (max-width: 680px) {
  .marquee.games img { height: 140px; width: 140px; }
}

/* testimonials */

.testimonial { max-width: 780px; margin: 0 auto; text-align: center; position: relative; }

.testimonial .quote-mark {
  font-family: var(--font-head);
  font-size: 5rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.5;
  display: block;
  margin-bottom: -18px;
}

.testimonial blockquote {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-style: italic;
  line-height: 1.6;
}

.testimonial cite {
  display: block;
  margin-top: 20px;
  font-style: normal;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}

/* steps */

.steps { counter-reset: step; }
.step { display: flex; gap: 20px; align-items: flex-start; padding: 18px 0; }

.step .n {
  counter-increment: step;
  flex: 0 0 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--black);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step .n::before { content: counter(step); }

/* service detail lists */

.service-block { padding: 30px 0; border-bottom: 1px solid var(--line-dark); }
.service-block:last-child { border-bottom: 0; }
.service-block ul { margin: 12px 0 0 20px; color: var(--grey); }
.service-block li { margin: 6px 0; }
.service-block h3 .n { color: var(--gold-deep); margin-right: 8px; }

/* about */

.profile {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 44px;
  align-items: start;
}

.profile .photo {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid var(--gold);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
  background: var(--black);
}

.profile .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mentions { margin-top: 26px; }
.mentions img { border-radius: 8px; }

/* FAQ */

.faq-item { border-bottom: 1px solid var(--line-dark); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 40px 22px 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  position: relative;
  transition: color 0.2s var(--ease-out);
}
.faq-item summary:hover { color: var(--gold-deep); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-deep);
  font-size: 1.5rem;
  font-weight: 400;
  transition: transform 0.25s var(--ease-out);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item .answer { padding: 0 0 24px; color: var(--grey); max-width: 760px; }

/* contact form */

.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }

form .field { margin-bottom: 18px; }

form label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

form input, form select, form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  font: inherit;
  background: var(--white);
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

form input:focus, form select:focus, form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 185, 23, 0.25);
}

form button { border: 0; }

.form-note { font-size: 0.85rem; color: var(--grey); margin-top: 12px; }

/* CTA band */

.cta-band {
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  left: -60px;
  bottom: -80px;
  width: 380px;
  height: 320px;
  background: url("../assets/controller-white.png") no-repeat center / contain;
  opacity: 0.12;
  pointer-events: none;
}

.cta-band h2 .gold { color: var(--gold); }
.cta-band .btn { margin-top: 26px; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--black);
  color: rgba(255, 255, 255, 0.65);
  padding: 54px 0 40px;
  font-size: 0.85rem;
}

.site-footer .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.site-footer .top img { height: 36px; width: auto; }
.site-footer a { color: var(--gold); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .legal { line-height: 1.8; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3)::before, .stat:nth-child(3) { border-top: 1px solid var(--line); }
  .stat:nth-child(4) { border-top: 1px solid var(--line); }
  .stat:nth-child(3)::before { display: none; }
  .profile { grid-template-columns: 1fr; }
  .profile .photo { max-width: 300px; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
  .stat { padding: 20px 8px; }
  .stat .label { font-size: 0.68rem; letter-spacing: 0.08em; }
  nav.primary {
    display: none;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    background: var(--black);
    flex-direction: column;
    padding: 18px 24px 26px;
    gap: 18px;
    border-bottom: 1px solid var(--line);
  }
  nav.primary.open { display: flex; }
  .nav-toggle { display: block; }
  .hero { padding: 64px 0 84px; }
  .hero::before { width: 300px; height: 250px; opacity: 0.1; }
  .games-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   v5 — feedback pass (2026-07-28)
   ============================================================ */

/* --- hero: copy left, proof panel right --- */

.hero-copy { max-width: 640px; }

.hero-proof {
  position: relative;
  display: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(245,185,23,0.10), rgba(255,255,255,0.02));
  padding: 34px 30px 30px;
  text-align: center;
}

.hero-proof img {
  width: 100%;
  max-width: 250px;
  margin: 0 auto 18px;
  opacity: 0.95;
}

.hero-proof .proof-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--gold);
}

.hero-proof .proof-text {
  margin-top: 8px;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.78);
}

.hero-proof .proof-tag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--black);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

@media (min-width: 940px) {
  .hero.has-proof .wrap {
    max-width: var(--max);
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 60px;
    align-items: center;
  }
  .hero.has-proof::before { display: none; }
  .hero-proof { display: block; }
}

/* --- stats: lifted panel, clearly separate from the partner strip --- */

.stats {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: -54px;
  position: relative;
  z-index: 3;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* --- the bridge diagram --- */

.bridge {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 86px;
  margin-top: 40px;
  background: var(--white);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 44px 46px;
}

.bridge-node { text-align: center; }

.bridge-node .n-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bridge-node .n-sub {
  display: block;
  margin-top: 6px;
  font-size: 0.86rem;
  color: var(--grey);
}

.bridge-mid { text-align: center; position: relative; padding: 0 10px; }

.bridge-mid img {
  width: 132px;
  height: auto;
  margin: 0 auto 8px;
}

.bridge-mid .m-label {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* connectors span the full grid gap so the three nodes visibly link up */
.bridge-mid::before,
.bridge-mid::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1px;
  width: 86px;
  height: 2px;
  background: var(--gold);
  opacity: 0.55;
}

.bridge-mid::before { left: -86px; }
.bridge-mid::after { right: -86px; }

@media (max-width: 900px) {
  .bridge { grid-template-columns: 1fr; gap: 26px; padding: 30px 24px; }
  .bridge-mid::before, .bridge-mid::after { display: none; }
  .bridge-mid img { width: 108px; }
}

/* --- centred statement (replaces the left-bordered callout) --- */

.statement {
  max-width: 780px;
  margin: 0 auto 6px;
  text-align: center;
  padding: 26px 0;
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  font-size: 1.08rem;
}

.statement strong { font-family: var(--font-head); display: block; margin-bottom: 6px; }

/* --- engagement models as boxes, three across --- */

.model-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }

.model-box {
  background: var(--white);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 24px 22px;
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.model-box:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 14px 32px rgba(0,0,0,0.09);
}

.model-box .m-tag {
  display: block;
  color: var(--gold-deep);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.model-box h3 { margin-bottom: 8px; }
.model-box p { color: var(--grey); font-size: 0.93rem; }

.on-dark .model-box { background: var(--ink); border-color: var(--line); }
.on-dark .model-box p { color: rgba(255,255,255,0.72); }
.on-dark .model-box .m-tag { color: var(--gold); }

@media (max-width: 900px) { .model-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .model-grid { grid-template-columns: 1fr; } }

/* --- how it works: connected step cards --- */

.steps.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; }

.steps.flow::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 20px);
  opacity: 0.5;
}

.step-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 26px 24px 24px;
  text-align: center;
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.step-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 14px 32px rgba(0,0,0,0.09);
}

.step-card .s-num {
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--black);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.step-card h3 { margin-bottom: 8px; }
.step-card p { color: var(--grey); font-size: 0.95rem; }

@media (max-width: 760px) {
  .steps.flow { grid-template-columns: 1fr; }
  .steps.flow::before { display: none; }
}

/* --- engagement model buckets --- */

.models { margin-top: 44px; text-align: center; }

.models .models-lead { color: var(--grey); margin-bottom: 18px; }

.model-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 22px;
}

.model-chips li {
  border: 1px solid rgba(0,0,0,0.16);
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--white);
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.model-chips li:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
  transform: translateY(-2px);
}

/* --- about: vinyl crate --- */

.crate {
  display: flex;
  justify-content: center;
  padding: 34px 0 40px;
  margin-top: 6px;
}

.crate .sleeve {
  position: relative;
  flex: 0 0 auto;
  width: 168px;
  margin-left: -66px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: -16px 0 30px rgba(0,0,0,0.6);
  background: var(--ink);
  display: block;
  padding: 0;
  cursor: pointer;
  transition: transform 0.32s var(--ease-out), box-shadow 0.32s var(--ease-out);
}

.crate .sleeve:first-child { margin-left: 0; }

/* contain, not cover: the honourable-mention covers are a mix of aspect ratios and
   cropping them square lops the titles off. Letterboxing on black reads as a sleeve. */
.crate .sleeve img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  background: #0b0b0d;
  display: block;
}

.crate .sleeve:hover,
.crate .sleeve:focus-visible {
  transform: translateY(-26px) rotate(-1.5deg);
  z-index: 6;
  box-shadow: 0 26px 44px rgba(0,0,0,0.7);
  outline: none;
  border-color: var(--gold);
}

/* neighbours slide aside so the hovered sleeve reads as pulled from the crate */
.crate .sleeve:hover ~ .sleeve,
.crate .sleeve:focus-visible ~ .sleeve { transform: translateX(34px); }

.crate-hint {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  margin-top: -18px;
}

@media (max-width: 900px) {
  .crate .sleeve { width: 124px; margin-left: -52px; }
  .crate .sleeve:hover ~ .sleeve, .crate .sleeve:focus-visible ~ .sleeve { transform: translateX(22px); }
}

@media (max-width: 600px) {
  .crate { padding: 26px 0 30px; }
  .crate .sleeve { width: 86px; margin-left: -40px; border-radius: 7px; }
  .crate .sleeve:hover ~ .sleeve, .crate .sleeve:focus-visible ~ .sleeve { transform: translateX(14px); }
}

@media (prefers-reduced-motion: reduce) {
  .crate .sleeve, .crate .sleeve:hover, .crate .sleeve:focus-visible,
  .crate .sleeve:hover ~ .sleeve { transition: none; transform: none; }
}

/* grey-to-dark wedge, for the testimonial now sitting under the grey section */
.angle-top-grey { position: relative; }
.angle-top-grey::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 46px;
  background: var(--off-white);
  clip-path: polygon(0 0, 100% 0, 100% 18%, 0 100%);
  z-index: 1;
}

/* --- v6 feedback: proof badge --- */
.hero-proof .proof-badge {
  display: inline-block;
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  padding: 7px 16px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
}

/* --- v6 feedback: crate now holds all 19 sleeves, so it runs full-bleed --- */
.crate { padding-left: 24px; padding-right: 24px; }
.crate .sleeve { width: 158px; margin-left: -98px; }

@media (max-width: 1100px) {
  .crate .sleeve { width: 134px; margin-left: -86px; }
}
@media (max-width: 900px) {
  .crate .sleeve { width: 108px; margin-left: -70px; }
  .crate .sleeve:hover ~ .sleeve, .crate .sleeve:focus-visible ~ .sleeve { transform: translateX(20px); }
}
@media (max-width: 600px) {
  .crate { padding-left: 12px; padding-right: 12px; }
  .crate .sleeve { width: 72px; margin-left: -48px; border-radius: 6px; }
  .crate .sleeve:hover ~ .sleeve, .crate .sleeve:focus-visible ~ .sleeve { transform: translateX(10px); }
}

/* --- v6 feedback: inner-page hero mark sits further in and larger --- */
.hero::before { right: 2%; bottom: -30px; width: 540px; height: 460px; opacity: 0.18; }

@media (max-width: 900px) {
  .hero::before { width: 360px; height: 300px; opacity: 0.12; right: -40px; }
}

/* --- service blocks on the dark band --- */
.service-block h3 .n { color: var(--gold-deep); margin-right: 10px; font-weight: 800; }
.on-dark .service-block h3 .n { color: var(--gold); }
.on-dark .service-block { border-bottom-color: var(--line); }
.on-dark .service-block ul { color: rgba(255, 255, 255, 0.74); }

/* --- v7: Xbox credential mark in the hero proof card --- */
.hero-proof { position: relative; overflow: hidden; }

/* Game On controller stays as the card watermark so the panel still reads as ours */
.hero-proof::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -50px;
  width: 300px;
  height: 206px;
  background: url("../assets/controller-white.png") no-repeat center / contain;
  opacity: 0.07;
  pointer-events: none;
}

.hero-proof > * { position: relative; z-index: 1; }

.hero-proof img.proof-mark {
  width: auto;
  height: 92px;
  max-width: 100%;
  margin: 4px auto 20px;
  opacity: 0.95;
}

/* --- v7 corrections --- */

/* the tag sits above the card edge, so the card must not clip */
.hero-proof { overflow: visible; }
.hero-proof::after { display: none; }

.hero-proof .proof-badge strong {
  color: var(--gold);
  font-weight: 800;
  letter-spacing: 0.16em;
  margin-right: 8px;
}

/* breathing room between the bridge diagram and the three cards below it */
.bridge { margin-bottom: 54px; }

/* partner strip: fixed pitch so every logo is evenly spaced regardless of its width,
   and full opacity so they all read as the same white */
.partner-flat { width: 240px; padding: 0; }
.partner-flat img { opacity: 1; }
.marquee .track { gap: 0; }

@media (max-width: 680px) {
  .partner-flat { width: 168px; }
}

/* cap the logo inside its fixed slot so every gap is the same, whatever the mark's width */
.partner-flat img { max-width: 175px; }
.partner-flat.wordmark img { max-height: 58px; }
.partner-flat.stacked img { max-height: 104px; }
@media (max-width: 680px) {
  .partner-flat img { max-width: 122px; }
  .partner-flat.wordmark img { max-height: 42px; }
  .partner-flat.stacked img { max-height: 78px; }
}

/* --- v8: Xbox credential mark --- */
.hero-proof img.proof-mark {
  width: auto;
  height: 88px;
  margin: 2px auto 18px;
  opacity: 0.96;
}

/* ============================================================
   v9 — breathing room pass. The page had grown three card grids
   deep; this opens up the vertical rhythm rather than cutting content.
   ============================================================ */

section { padding: 116px 0; }
section.tight { padding: 68px 0; }

.hero { padding: 116px 0 132px; }

.section-head { margin-bottom: 58px; }
.section-head p { margin-top: 16px; }

.grid { gap: 30px; }
.card { padding: 34px 30px; }

.stat { padding: 34px 16px; }

.statement { margin: 12px auto 0; padding: 32px 0; }

.bridge { margin-top: 58px; margin-bottom: 66px; padding: 52px 46px; }

.steps.flow { gap: 30px; }
.step-card { padding: 32px 26px 30px; }

.model-grid { gap: 28px; margin-top: 0; }
.model-box { padding: 28px 24px; }

/* partner strip needs air above and below the logos */
.marquee .track { padding: 26px 0; }

@media (max-width: 900px) {
  section { padding: 84px 0; }
  section.tight { padding: 56px 0; }
  .hero { padding: 76px 0 92px; }
  .section-head { margin-bottom: 42px; }
  .bridge { margin-top: 40px; margin-bottom: 48px; }
}

/* square marks sit smaller than wordmarks so optical weight matches across the strip */
.partner-flat.mark img { max-height: 72px; max-width: 72px; }
@media (max-width: 680px) { .partner-flat.mark img { max-height: 54px; max-width: 54px; } }


/* ============================================================
   v11 — brand pattern. The GCS face buttons from the controller,
   tiled as a quiet field. Same idea as the guilloche on the
   Sikorska build, but drawn from this brand's own mark.
   ============================================================ */

:root {
  --glyphfield: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='190'%20height='190'%20viewBox='0%200%20190%20190'>%20<g%20fill='none'%20stroke='%23d99e06'%20stroke-width='1.1'>%20<circle%20cx='95'%20cy='40'%20r='19'/><circle%20cx='50'%20cy='95'%20r='19'/>%20<circle%20cx='140'%20cy='95'%20r='19'/><circle%20cx='95'%20cy='150'%20r='19'/>%20<circle%20cx='95'%20cy='95'%20r='62'%20stroke-width='.7'%20opacity='.55'/>%20</g>%20<g%20fill='%23d99e06'%20font-family='Montserrat,sans-serif'%20font-weight='800'%20font-size='17'%20text-anchor='middle'>%20<text%20x='50'%20y='101'>G</text><text%20x='140'%20y='101'>C</text><text%20x='95'%20y='156'>S</text>%20</g>%20</svg>");
}

.deco-glyphs { position: relative; isolation: isolate; }

.deco-glyphs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--glyphfield);
  background-size: 230px 230px;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 88% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 90% at 88% 0%, #000 0%, transparent 72%);
  pointer-events: none;
}

/* mirrored, so consecutive light sections do not repeat the same corner */
.deco-glyphs.deco-left::before {
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 10% 100%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 90% at 10% 100%, #000 0%, transparent 72%);
}

.on-dark.deco-glyphs::before { opacity: 0.5; }

/* ---------- v11: engagement models on black, boxes stay white ---------- */

.models .model-box {
  background: var(--white);
  border-color: rgba(0, 0, 0, 0.09);
  color: var(--ink);
}
.models .model-box h3 { color: var(--ink); }
.models .model-box p { color: var(--grey); }
.models .model-box .m-tag { color: var(--gold-deep); }
.models .model-box:hover {
  border-color: var(--gold);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
}

/* ---------- v11: CTA band is light across the whole site ---------- */

.cta-band {
  background: var(--white);
  color: var(--ink);
}

.cta-band h2 { color: var(--ink); }
.cta-band h2 .gold { color: var(--gold-deep); }

.cta-band::before {
  background-image: url("../assets/controller-dark.png");
  opacity: 0.16;
  filter: none;
}

.site-footer { border-top: 1px solid rgba(0, 0, 0, 0.08); }

/* ============================================================
   v11 fix — an element has only ONE ::before. The angled wedge
   already owns it, so decorative art must use ::after or the two
   silently overwrite each other (this was also killing the wedge
   on the CTA band).
   ============================================================ */

.deco-glyphs::before { content: none; }

.deco-glyphs::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--glyphfield);
  background-size: 230px 230px;
  opacity: 0.45;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 88% 4%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 90% at 88% 4%, #000 0%, transparent 72%);
  pointer-events: none;
}

.deco-glyphs.deco-left::after {
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 10% 96%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 90% at 10% 96%, #000 0%, transparent 72%);
}

.deco-glyphs > .wrap { position: relative; z-index: 1; }

/* CTA art moves to ::after too, handing ::before back to the wedge */
.cta-band::before { content: none; }

.cta-band::after {
  content: "";
  position: absolute;
  left: -60px;
  bottom: -80px;
  width: 380px;
  height: 262px;
  background: url("../assets/controller-dark.png") no-repeat center / contain;
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
}

.cta-band > .wrap { position: relative; z-index: 1; }

/* ============================================================
   v12 — services: one alternating band per service area,
   copy one side, visual the other.
   ============================================================ */

.service-row { padding: 96px 0; }
.service-row.angle-top, .service-row.angle-top-light { padding-top: 118px; }

.service-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

.service-row.flip .service-copy { order: 2; }
.service-row.flip .service-visual { order: 1; }

.service-copy .s-index {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.24em;
  color: var(--gold-deep);
  margin-bottom: 12px;
}

.on-dark .service-copy .s-index { color: var(--gold); }

.service-copy h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  margin-bottom: 22px;
  text-transform: none;
  letter-spacing: 0;
}

.service-copy ul { list-style: none; margin: 0; }

.service-copy li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 14px;
  color: var(--grey);
}

.on-dark .service-copy li { color: rgba(255, 255, 255, 0.76); }

.service-copy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 14px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

/* designed placeholder until real artwork lands */
.service-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--line-dark);
  background:
    radial-gradient(ellipse 70% 70% at 70% 20%, rgba(245,185,23,0.16), transparent 62%),
    var(--off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
}

.on-dark .service-visual {
  border-color: var(--line);
  background:
    radial-gradient(ellipse 70% 70% at 70% 20%, rgba(245,185,23,0.20), transparent 62%),
    var(--ink);
}

.service-visual svg { width: 96px; height: 96px; stroke: var(--gold-deep); opacity: 0.9; }
.on-dark .service-visual svg { stroke: var(--gold); }

.service-visual .v-num {
  position: absolute;
  right: 22px;
  bottom: 6px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 6rem;
  line-height: 1;
  color: var(--ink);
  opacity: 0.06;
}

.on-dark .service-visual .v-num { color: #fff; opacity: 0.10; }

/* real artwork drops straight into the same slot */
.service-visual img { width: 100%; height: 100%; object-fit: cover; }
.service-visual:has(img) { background: none; }
.service-visual:has(img) svg, .service-visual:has(img) .v-num { display: none; }

@media (max-width: 900px) {
  .service-row { padding: 68px 0; }
  .service-row.angle-top, .service-row.angle-top-light { padding-top: 88px; }
  .service-grid { grid-template-columns: 1fr; gap: 34px; }
  .service-row.flip .service-copy { order: 1; }
  .service-row.flip .service-visual { order: 2; }
  .service-visual { aspect-ratio: 16 / 9; }
  .service-visual svg { width: 72px; height: 72px; }
}

/* ============================================================
   v12 — background treatment, take two.
   The tiled button field read as busy rather than premium.
   This is a single oversized outlined letterform, cropped hard
   by the section edge: editorial, quiet, no repetition.
   ============================================================ */

.deco-letter { position: relative; overflow: hidden; isolation: isolate; }

.deco-letter::after {
  content: attr(data-letter);
  position: absolute;
  right: -3%;
  bottom: -26%;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(18rem, 34vw, 34rem);
  line-height: 0.78;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(217, 158, 6, 0.17);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.deco-letter.deco-left::after {
  right: auto;
  left: -4%;
  bottom: auto;
  top: -22%;
}

.on-dark.deco-letter::after { -webkit-text-stroke-color: rgba(245, 185, 23, 0.16); }

.deco-letter > .wrap { position: relative; z-index: 1; }

@media (max-width: 760px) {
  .deco-letter::after { font-size: 20rem; opacity: 0.7; }
}

/* letterform sat too far off the edge to read; anchor it so most of the glyph shows */
.deco-letter::after {
  right: -3.5%;
  bottom: -9%;
  font-size: clamp(15rem, 26vw, 27rem);
}
.deco-letter.deco-left::after { left: -4.5%; right: auto; top: -9%; bottom: auto; }


/* ============================================================
   v13 — technical schematic. Blueprint furniture (dimension
   lines, registration marks, leader callouts, fine grid) laid
   over the controller so the mark reads as an engineering
   drawing rather than a decorative pattern.
   ============================================================ */

:root { --schematic: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='900'%20height='640'%20viewBox='0%200%20900%20640'>%20<defs>%20<pattern%20id='g'%20width='45'%20height='45'%20patternUnits='userSpaceOnUse'>%20<path%20d='M45%200H0V45'%20fill='none'%20stroke='%23d99e06'%20stroke-width='.5'%20opacity='.16'/>%20</pattern>%20</defs>%20<rect%20width='900'%20height='640'%20fill='url(%23g)'/>%20<g%20fill='none'%20stroke='%23d99e06'%20stroke-width='1'%20opacity='.5'>%20<path%20d='M120%2070h660M120%2062v16M780%2062v16'/>%20<path%20d='M132%2070l-12%200M768%2070l12%200'/>%20<path%20d='M70%20160v320M62%20160h16M62%20480h16'/>%20<path%20d='M40%2040h44M62%2018v44'/>%20<path%20d='M816%20600h44M838%20578v44'/>%20<circle%20cx='318'%20cy='372'%20r='7'/><path%20d='M318%20365V232h96'/>%20<circle%20cx='566'%20cy='372'%20r='7'/><path%20d='M566%20379v118h-104'/>%20<circle%20cx='508'%20cy='268'%20r='5'/><path%20d='M513%20268h122'/>%20</g>%20<g%20fill='none'%20stroke='%23d99e06'%20stroke-width='.7'%20opacity='.34'>%20<path%20d='M0%20320h120M780%20320h120'/>%20<path%20d='M450%200v70M450%20570v70'/>%20</g>%20</svg>"); }

.deco-schematic { position: relative; overflow: hidden; isolation: isolate; }

.deco-schematic::after {
  content: "";
  position: absolute;
  right: -6%;
  bottom: -14%;
  width: min(760px, 62%);
  aspect-ratio: 900 / 640;
  background-image: var(--schematic), url("../assets/controller-dark.png");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: contain, 62% auto;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

.on-dark.deco-schematic::after {
  background-image: var(--schematic), url("../assets/controller-white.png");
  opacity: 0.42;
}

.deco-schematic.deco-left::after {
  right: auto;
  bottom: auto;
  left: -8%;
  top: -12%;
}

.deco-schematic > .wrap { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .deco-schematic::after { width: 105%; opacity: 0.3; right: -30%; }
  .deco-schematic.deco-left::after { left: -30%; }
}

/* photography needs no frame: the shot's own black falls into the band */
.service-visual:has(img) { border: 0; }

/* ============================================================
   v15 — exploded schematic. Six sliced layers that pull apart
   as the section scrolls through the viewport.
   ============================================================ */

.exploder-band { padding: 118px 0 104px; }

.exploder-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;
}

.exploder {
  position: relative;
  width: 100%;
  aspect-ratio: 1760 / 1328;
}

.exploder .layer {
  position: absolute;
  left: 0;
  width: 100%;
  will-change: transform;
  transition: transform 0.12s linear;
}

.exploder .layer img { width: 100%; height: auto; }

@media (max-width: 900px) {
  .exploder-grid { grid-template-columns: 1fr; gap: 34px; }
  .exploder-band { padding: 84px 0 76px; }
}

/* no scroll choreography when motion is reduced: show it fully apart */
@media (prefers-reduced-motion: reduce) {
  .exploder .layer { transition: none; transform: none !important; }
}

/* rAF writes the transform every frame, so a CSS transition on top of it only
   smears the motion. Drive it directly. */
.exploder .layer { transition: none; }

/* ============================================================
   v16 — pinned service sequence. A tall track holds a sticky
   viewport; scrolling through it steps the copy 01..08 while the
   schematic separates one component at a time.
   ============================================================ */

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

.seq { padding: 0; }
.seq-track { position: relative; height: calc(8 * 78vh); }

.seq-sticky {
  position: sticky;
  top: 74px;                       /* clears the fixed header */
  height: calc(100vh - 74px);
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.seq-grid {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 56px;
  align-items: center;
  width: 100%;
}

/* steps are stacked in one cell; only the active one is shown */
.seq-copy { position: relative; min-height: 340px; }

.seq-step {
  position: absolute;
  inset: 0;
  top: 44px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  pointer-events: none;
}

.seq-step[data-active] { opacity: 1; transform: none; pointer-events: auto; }

.seq-step .s-index {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 14px;
}

.seq-step h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 20px;
}

.seq-step ul { list-style: none; margin: 0; }

.seq-step li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.76);
}

.seq-step li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 14px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

.seq .exploder { max-height: calc(100vh - 190px); margin: 0 auto; }
.seq .exploder .layer img { width: 100%; }

/* progress rail */
.seq-dots {
  position: absolute;
  right: max(24px, calc((100vw - var(--max)) / 2 - 34px));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.seq-dot {
  width: 9px; height: 9px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.seq-dot[data-active] { background: var(--gold); border-color: var(--gold); transform: scale(1.35); }

@media (max-width: 900px) {
  .seq-grid { grid-template-columns: 1fr; gap: 22px; }
  .seq-sticky { top: 74px; height: calc(100vh - 74px); min-height: 620px; }
  .seq-copy { min-height: 300px; }
  .seq .exploder { max-height: 34vh; }
  .seq-dots { display: none; }
  .seq-track { height: calc(8 * 74vh); }
}

/* Without JS, or with motion reduced, the pin is dropped and every step is
   simply listed. Nothing is hidden behind an interaction that will not run. */
.seq:not([data-ready]) .seq-track,
.seq:not([data-ready]) .seq-sticky { height: auto; position: static; overflow: visible; }
.seq:not([data-ready]) .seq-copy { min-height: 0; }
.seq:not([data-ready]) .seq-step { position: static; opacity: 1; transform: none; margin-bottom: 48px; pointer-events: auto; }
.seq:not([data-ready]) .seq-dots { display: none; }
.seq:not([data-ready]) { padding: 96px 0; }

@media (prefers-reduced-motion: reduce) {
  .seq .seq-track, .seq .seq-sticky { height: auto; position: static; overflow: visible; }
  .seq .seq-copy { min-height: 0; }
  .seq .seq-step { position: static; opacity: 1; transform: none; margin-bottom: 48px; }
  .seq .seq-dots { display: none; }
  .seq { padding: 96px 0; }
}

/* In the unpinned fallback the drawing should head the list, not float beside it.
   (A previous version of this rule used `:where(:not([data-ready]) *)`, which
   matches EVERYTHING because body itself has no data-ready. It silently forced
   the pinned layout to one column, stacking the drawing below the copy.) */
.seq:not([data-ready]) .seq-grid { grid-template-columns: 1fr; gap: 40px; }
.seq:not([data-ready]) .exploder { order: -1; max-width: 420px; margin: 0 auto 12px; }

@media (prefers-reduced-motion: reduce) {
  .seq .seq-grid { grid-template-columns: 1fr; gap: 40px; }
  .seq .exploder { order: -1; max-width: 420px; margin: 0 auto 12px; }
}

/* ============================================================
   v17 — sequence rebalance. The copy column was vertically
   centred against a shrinking drawing, so the whole thing read
   lopsided and the text jumped as steps changed length. Now:
   copy holds a fixed-height box, title and bullets always start
   at the same top-left point; the drawing is anchored to the
   right column's centre and only its layers move.
   ============================================================ */

.seq-grid {
  grid-template-columns: minmax(0, 30rem) 1fr;
  gap: 84px;
  align-items: center;
}

.seq-copy {
  height: clamp(420px, 58vh, 560px);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.seq-copy > .kicker { flex: 0 0 auto; }

/* steps fill the box below the kicker; they never centre, never wander */
.seq-step {
  top: 52px;
  bottom: auto;
  height: calc(100% - 52px);
  overflow: hidden;
}

.seq .exploder {
  width: min(100%, 560px);
  max-height: calc(100vh - 230px);
  margin: 0 0 0 auto;      /* hard right, balancing the hard-left copy */
}

@media (max-width: 900px) {
  .seq-grid { grid-template-columns: 1fr; gap: 18px; }
  .seq-copy { height: auto; min-height: 320px; }
  .seq-step { position: absolute; height: auto; }
  .seq .exploder { margin: 0 auto; max-height: 32vh; }
}

/* Height must come from the aspect ratio alone. A max-height cap squashes the
   container while the % -positioned layers keep their image heights, which
   misaligns every slice. Cap through width instead: 1760/1328 = 1.3253. */
.seq .exploder {
  max-height: none;
  width: min(100%, 560px, calc((100vh - 230px) * 1.3253));
}

@media (max-width: 900px) {
  .seq .exploder { max-height: none; width: min(100%, calc(32vh * 1.3253)); }
}

/* v17's fixed-height step box is for the pinned state only; the fallback must
   undo it or every step collapses to a clipped sliver. */
.seq:not([data-ready]) .seq-step,
.seq:not([data-ready]) .seq-copy { height: auto; overflow: visible; }
.seq:not([data-ready]) .seq-step { top: auto; }

@media (prefers-reduced-motion: reduce) {
  .seq .seq-step, .seq .seq-copy { height: auto; overflow: visible; }
  .seq .seq-step { top: auto; }
}

/* Inactive steps are fully hidden, not just transparent: visibility flips after
   the fade out, immediately on fade in. Keeps mid-scroll frames clean and stops
   assistive tech landing on seven invisible articles. */
.seq-step {
  visibility: hidden;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), visibility 0s 0.4s;
}
.seq-step[data-active] { visibility: visible; transition-delay: 0s; }

.seq:not([data-ready]) .seq-step { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .seq .seq-step { visibility: visible; } }

/* ============================================================
   v19 — bigger drawing, no dots rail, single-direction peel.
   ============================================================ */

.seq-grid { grid-template-columns: minmax(0, 27rem) 1fr; gap: 64px; }

.seq .exploder {
  width: min(100%, 720px, calc((100vh - 170px) * 1.3253));
  margin: 0 0 0 auto;
}

.seq-dots { display: none; }

/* upper components render above the stack they rise out of */
.exploder .layer:nth-child(1) { z-index: 6; }
.exploder .layer:nth-child(2) { z-index: 5; }
.exploder .layer:nth-child(3) { z-index: 4; }
.exploder .layer:nth-child(4) { z-index: 3; }
.exploder .layer:nth-child(5) { z-index: 2; }
.exploder .layer:nth-child(6) { z-index: 1; }

/* ============================================================
   v20 — scale pass. The 1120px container reads small on modern
   desktops at 100% zoom: widen the frame, lift the base size on
   big screens, and let the schematic own the right side.
   ============================================================ */

:root { --max: 1240px; }

@media (min-width: 1600px) {
  :root { --max: 1340px; }
  body { font-size: 18px; }
  .hero h1 { font-size: clamp(2.4rem, 4.4vw, 4rem); }
}

/* the schematic takes the whole right side of the pinned viewport */
.seq-grid { grid-template-columns: minmax(0, 26rem) 1fr; gap: 56px; }

.seq .exploder {
  width: min(100%, 900px, calc((100vh - 150px) * 1.3253));
  margin: 0 0 0 auto;
}

.seq-copy { height: clamp(440px, 62vh, 620px); }

/* The scroll-scrubbed video variant was trialled here and dropped in favour of the
   sliced-PNG peel: one baked take, 1.3MB, and poor seeking on iOS Safari. If it is
   ever revisited, the two things that made it work were `currentTime = p * duration`
   guarded on a 0.03s delta, and `mix-blend-mode: screen` to kill the clip's black. */


/* ============================================================
   v22 — CTA gets a controller on both sides; inner-page heroes
   swap the faint controller watermark for macro photography.
   ============================================================ */

/* Two background layers rather than a second pseudo-element: ::before is already
   the angled wedge on the homepage CTA and ::after was the single left controller. */
.cta-band::after { content: none; }

.cta-band {
  background-color: var(--white);
  background-image: url("../assets/controller-dark.png"), url("../assets/controller-dark-flip.png");
  background-repeat: no-repeat, no-repeat;
  background-position: left -70px bottom -80px, right -70px bottom -80px;
  background-size: 380px auto, 380px auto;
}

@media (max-width: 900px) {
  .cta-band {
    background-image: url("../assets/controller-dark.png");
    background-position: left -90px bottom -70px;
    background-size: 300px auto;
  }
}

/* --- inner-page hero: macro shot bled in from the right --- */

.hero.has-shot::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 64%;
  height: auto;
  background-image: var(--hero-shot);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
  opacity: 0.62;
  /* fades to nothing before it reaches the copy, so the headline stays clean */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 52%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 52%);
  pointer-events: none;
}

@media (max-width: 900px) {
  .hero.has-shot::before { width: 100%; opacity: 0.3; }
}

/* --- About: "Why Game On exists" gets an image alongside the copy --- */

.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
}

.split-figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ink);
}

.split-figure img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split-figure { aspect-ratio: 16 / 9; }
}

/* First pass was so faint it read as a gradient rather than a photograph.
   More opacity, a later mask fade, and the subject pulled into frame. */
.hero.has-shot::before {
  width: 58%;
  opacity: 0.9;
  background-position: center center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 62%);
}

@media (max-width: 900px) {
  .hero.has-shot::before { width: 100%; opacity: 0.34; }
}

/* ============================================================
   v23 — inner-page heroes get a real image panel.
   The bleed-in-from-the-right version failed: these macros are a
   dark subject on black, so against a black hero there is no
   tonal separation and the photograph simply disappears. Given a
   defined frame it has presence, and it matches the proof card
   on the homepage hero.
   ============================================================ */

.hero.has-figure::before { content: none; }

@media (min-width: 940px) {
  .hero.has-figure .wrap {
    max-width: var(--max);
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 60px;
    align-items: center;
  }
}

.hero-figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  background: var(--ink);
  display: none;
}

.hero-figure img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 940px) { .hero-figure { display: block; } }


/* ============================================================
   v24 — Mike's first written feedback pass (2026-08-03).
   ============================================================ */

/* --- gold rule under the header, held as the page scrolls ---------------
   The header is already sticky, so a border on it travels with the bar and
   reads against every section colour underneath. */

.site-header { border-bottom: 2px solid var(--gold); }

/* --- less dead air above the fold --------------------------------------
   Mike: the top gap "creates more scroll". 100px was tuned when the hero was
   copy-only; with a figure alongside it the hero is taller anyway. */

.hero { padding: 56px 0 96px; }

@media (max-width: 680px) { .hero { padding: 40px 0 68px; } }

/* --- kicker rule on both sides ----------------------------------------- */

.kicker::after {
  content: "";
  display: inline-block;
  width: 26px;
  height: 3px;
  background: var(--gold);
  border-radius: 2px;
  margin-left: 12px;
  vertical-align: middle;
}

/* --- CTA band: one controller, full bleed, behind the words -------------
   The mirrored pair read wrong to Mike because the flipped copy is a mirror,
   not a second controller. One centred image cropped by the band avoids the
   question entirely. Opacity needs a layer of its own, so the art moves off
   background-image and back onto ::after (::before is still the wedge). */

.cta-band {
  background-color: var(--white);
  background-image: none;
}

.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  /* width/height must be reset explicitly: the v11 rule sets them to 380x262px, and an
     explicit size beats the sizing implied by inset:0, so the art stays small top-left. */
  width: auto;
  height: auto;
  /* v28, matched to Mike's sketch. Two changes from `cover`:
     - sized by HEIGHT (160% of the band), because `cover` scaled the art to the band's
       width and on a 1240px band that meant a huge crop of the middle;
     - anchored to the TOP, not the centre. In his sketch the gold bumper line sits near
       the top edge and the grips run off the bottom, so roughly the top 62% shows. */
  background: url("../assets/controller-dark.png") no-repeat center top / auto 160%;
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .cta-band { background-image: none; }
  .cta-band::after { background-size: auto 130%; }
}

/* --- homepage proof card ------------------------------------------------ */

/* Mike: the top line runs longer than the bottom. balance evens the ragged
   edge instead of filling each line greedily. */
.hero-proof .proof-text { text-wrap: balance; }

/* --- stats panel -------------------------------------------------------- */

/* The hero's gold rule passed 22px above the panel's centre line. The lift has
   to equal half the panel plus half the rule: panel is 143px and the rule 8px,
   so -76px puts the gold through the middle. Re-measure if the labels ever
   wrap to a different number of lines. */
.stats { margin-top: -76px; }

@media (max-width: 900px) {
  /* two rows instead of four columns, so the panel is roughly twice as tall */
  .stats { margin-top: -148px; }
}

@media (max-width: 680px) {
  /* overlapping a tall panel onto a short hero looks broken on a phone */
  .stats { margin-top: -30px; }
}

/* same hover behaviour as the cards further down the page */
.stats {
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.stats:hover {
  border-color: var(--gold);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
}

/* --- testimonial: a white card on the black band ------------------------ */

.testimonial {
  max-width: 860px;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 44px 46px 38px;
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.45);
}

.testimonial blockquote { color: var(--ink); }
.testimonial cite { color: var(--gold-deep); }
.testimonial .quote-mark { color: var(--gold); opacity: 1; }

@media (max-width: 680px) {
  .testimonial { padding: 32px 24px 28px; }
}

/* Ready for the two testimonials Mike has coming: drop more .testimonial
   blocks inside .testimonial-row and they sit side by side. */
.testimonial-row {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}

.testimonial-row .testimonial { max-width: none; }

/* --- About: director photo as a full-height rounded panel ---------------- */

.profile { align-items: stretch; }

.profile .photo {
  aspect-ratio: auto;
  border-radius: var(--radius);
  border: 4px solid var(--gold);
  height: 100%;
}

@media (max-width: 900px) {
  /* stacked, so there is no text column to stretch against */
  .profile .photo { aspect-ratio: 700 / 1120; height: auto; max-width: 280px; }
}

/* --- About: crate stacks the other way ----------------------------------
   Paint order was DOM order, so each sleeve covered the one before it and the
   leftmost game was the one you could never see whole. JS now sets a
   descending z-index (count-agnostic), and the shadow flips to match. */

.crate .sleeve { box-shadow: 16px 0 30px rgba(0, 0, 0, 0.6); }

.crate .sleeve:hover,
.crate .sleeve:focus-visible {
  z-index: 999;
  box-shadow: 0 26px 44px rgba(0, 0, 0, 0.7);
}

/* --- About: profile links ----------------------------------------------- */

.profile-links {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
}

.profile-links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--gold-deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.profile-links a:hover { border-bottom-color: var(--gold-deep); }

.profile-links svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: currentColor;
}


/* ============================================================
   v25 — the sequence assembles onto its bottom shell.
   ============================================================
   The bottom shell is the foundation and never moves, so the entire fan of six
   components has to live ABOVE where the finished controller ends up. Two knock-ons:

   1. The drawing is capped against the PINNED VIEWPORT height, not just the column
      width. Six stacked components need roughly 1.7x the assembled height above the
      resting place, and .seq-sticky is `overflow: hidden`, so anything that does not
      fit is simply cut off.
   2. It is shifted up by 30.9% of its own height. The assembled controller spans
      64.95% to 96.76% of the artwork (see SEAT in site.js), so its centre sits at
      80.86%, which is 30.9% below the drawing's own middle. The shift cancels that
      and lands the finished controller dead centre of the pinned viewport.

   0.86 comes from the same sum, measured against the INK rather than the box. With
   height h in viewport S the centred top edge lands at (S - h)/2 - 0.309h, but the
   artwork carries 4.518% dead space above its first slice, so what must stay on
   screen is (S - h)/2 - 0.309h + 0.045h >= 0, giving h <= 0.654S. Times the 1.3253
   aspect ratio that is 0.867S, so 0.86 leaves a little safety. Measuring against the
   box instead capped it at 0.78 and gave away 10% of the drawing for nothing.

   Both numbers are derived from SEAT, so if SEAT changes, recompute them. */

.seq .exploder {
  width: min(100%, 1000px, calc((100vh - 74px) * 0.86));
  transform: translateY(-30.9%);
}

/* The copy column was 26rem with a 56px gap, which left the drawing boxed in on wide
   screens where the column, not the viewport, is the binding constraint. Trimming both
   hands the difference to the schematic. */
.seq-grid { grid-template-columns: minmax(0, 23rem) 1fr; gap: 44px; }

/* contact form outcome message */
.form-status {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
  border-left: 3px solid transparent;
}

.form-status.is-ok {
  background: rgba(245, 185, 23, 0.10);
  border-left-color: var(--gold-deep);
  color: var(--ink);
}

.form-status.is-error {
  background: rgba(190, 40, 40, 0.08);
  border-left-color: #be2828;
  color: #7d1f1f;
}

/* Tessera's official lockup is a tall stacked mark with a small wordmark under it, so at
   the old 104px cap it read lighter than the wordmarks beside it. The slot is 150px. */
.partner-flat.stacked img { max-height: 126px; }

@media (max-width: 680px) {
  .partner-flat.stacked img { max-height: 92px; }
}

/* PRE-EXISTING BUG, fixed here: every desktop .seq-grid override since v19 has been
   written below the mobile media queries at the same specificity, so it won the cascade
   at ALL widths and the pinned section stayed two-column on a phone. Measured at 504px
   the columns were 368px and 29px, which is a 29px-wide schematic. The single-column
   rule has to be restated after any new .seq-grid rule, not just once further up. */
@media (max-width: 900px) {
  .seq-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* Both of the above exist ONLY for the pinned state, so both must be undone for no-JS
   and reduced motion, where the section is a plain list and the drawing sits inline.
   Leaving the shift in place drags it up into the copy above it. This is the third
   time an override added for the pin has had to be reversed here; assume every new
   .seq rule needs the same two resets. */
.seq:not([data-ready]) .exploder,
.seq:not([data-ready]) .seq .exploder {
  width: min(100%, 420px);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .seq .exploder { width: min(100%, 420px); transform: none; }
}