/* Fonts are self-hosted (latin subset, variable weight files) so pages make no
   requests to Google and send no visitor data to third parties. */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/oswald-latin-aabe123b.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-f11d729b.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   KurlyBrackets - cinematic studio theme
   Shared by every page: tokens, type, buttons, the angled panel system,
   the header and the footer, plus the home page sections. The other pages
   add css/pages.css on top for their own components.
   --------------------------------------------------------------------------
   1.  Tokens & base
   2.  Angled panel system
   3.  Header (all pages)
   4.  Hero
   5.  Services
   6.  Portfolio
   7.  Founder quote
   8.  Clients & footer (all pages)
   9.  Responsive
   10. Platform strip
   11. Floating controls: back to top, sticky CTA, consent (all pages)
   12. Print
   ========================================================================== */

/* ----------------------------------------------------------------
   1. Tokens & base
   ---------------------------------------------------------------- */
:root {
  --ink:       #0a0d12;   /* dark cinematic ground */
  --ink-deep:  #05070b;
  --paper:     #efeeea;   /* light section ground */
  --paper-alt: #e5e4e2;
  --charcoal:  #303130;   /* icons and headings on light */
  --body:      #5a5a58;
  --red:       #e23d2a;   /* accent on light sections: 3.4-3.7:1, large text only */
  --red-ink:   #b8321f;   /* the same red for small text: 4.7-5.2:1 */
  --violet:    #9105fe;   /* primary call to action on dark */
  --violet-lo: #7a04d6;

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --skew: -9deg;
  --gap: 7px;
  --shell: 1400px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* the header is fixed, so in-page jumps land below it */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* short pages still fill the screen, so the footer never floats */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { text-decoration: none; color: inherit; }
button { font: inherit; }

/* Must outrank any component that sets its own display, or the hidden
   attribute silently stops working (sticky CTA, consent banner). */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: .005em;
}

:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }

h1, h2, h3 { text-wrap: balance; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 40px; }

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

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 999;
  padding: 12px 20px; background: var(--violet); color: #fff;
  font-weight: 700; transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* Small uppercase label used throughout the design */
.kicker {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

/* Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 30px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn svg { flex: none; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(5px); }

.btn--violet { background: var(--violet); color: #fff; }
.btn--violet:hover { background: var(--violet-lo); }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .09); }

.btn--outline-dark {
  background: transparent;
  color: var(--charcoal);
  border-color: rgba(48, 49, 48, .45);
}
.btn--outline-dark:hover { border-color: var(--charcoal); background: rgba(48, 49, 48, .06); }

/* ----------------------------------------------------------------
   2. Angled panel system
   The signature of the design: images sheared into parallelograms with
   black gaps between them. The wrapper is overscanned so the shear
   never exposes an edge.
   ---------------------------------------------------------------- */
.panels {
  position: absolute;
  inset: 0;
  display: flex;
  gap: var(--gap);
  overflow: hidden;
  background: var(--ink-deep);
}
.panels::before {
  /* widen the row so the sheared ends fall outside the frame */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.panel {
  position: relative;
  flex: 1 1 0;
  overflow: hidden;
  transform: skewX(var(--skew));
}
.panel:first-child { margin-left: -5%; }
.panel:last-child  { margin-right: -5%; }

.panel__media {
  position: absolute;
  inset: 0 -10%;
  transform: skewX(calc(var(--skew) * -1));
  background-size: cover;
  background-position: center;
}

/* Panel widths follow the mockup: a wide opening panel, two narrow
   middles, a wide closer. */
.panels--hero .panel:nth-child(1) { flex-grow: 34; }
.panels--hero .panel:nth-child(2) { flex-grow: 19; }
.panels--hero .panel:nth-child(3) { flex-grow: 18; }
.panels--hero .panel:nth-child(4) { flex-grow: 29; }
.panel--dim .panel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 11, .35);
}

/* ----------------------------------------------------------------
   3. Header (all pages)
   Fixed over every page's dark hero: transparent with white text at the
   top, then a white bar with the logo in its original colours once the
   page scrolls or the phone menu opens (main.js adds .is-stuck and
   .is-open). Without JavaScript it is simply the white bar.
   ---------------------------------------------------------------- */
.masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.masthead.is-stuck,
.masthead.is-open,
html:not(.js) .masthead {
  background: #fff;
  box-shadow: 0 1px 0 rgba(48, 49, 48, .12), 0 8px 24px rgba(5, 7, 11, .08);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-block: 24px;
  transition: padding .3s var(--ease);
}
.masthead.is-stuck .masthead__inner { padding-block: 12px; }

/* Logo: the violet "{ }" mark with the KurlyBrackets name */
.brand { display: inline-flex; align-items: center; gap: 14px; flex: none; color: #fff; }
.brand__mark {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  background: var(--violet);
  flex: none;
}
.brand__mark span {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: .005em;
  text-transform: none;
  color: #fff;
  transition: color .3s var(--ease);
}
/* The KurlyBrackets logo, from E:/Logo/final logo file n pngs/l/yeelow.png.
   Two versions: the original with its white sticker outline for dark
   backgrounds, and logo-on-light.png (navy outline, dark letter holes; made
   by _src/og/make_logo_light.py) for the white bar and the footer. Only one
   is shown at a time, so the link always has exactly one name. */
.brand__logo {
  display: block;
  width: auto;
  height: 66px;
  transition: height .3s var(--ease);
}
.masthead.is-stuck .brand__logo { height: 46px; }
.brand__logo--on-light { display: none; }
.masthead.is-stuck .brand__logo--on-dark,
.masthead.is-open .brand__logo--on-dark,
html:not(.js) .masthead .brand__logo--on-dark { display: none; }
.masthead.is-stuck .brand__logo--on-light,
.masthead.is-open .brand__logo--on-light,
html:not(.js) .masthead .brand__logo--on-light { display: block; }

/* on the white bar the name turns dark; the violet mark stays as it is */
.masthead.is-stuck .brand__name,
.masthead.is-open .brand__name,
html:not(.js) .masthead .brand__name { color: var(--ink); }

.mainnav { display: flex; align-items: center; gap: 34px; }
.mainnav a:not(.btn) {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.mainnav a:not(.btn):hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .5); }
.mainnav a.is-active { color: #fff; border-bottom-color: var(--violet); }
.masthead.is-stuck .mainnav a:not(.btn),
.masthead.is-open .mainnav a:not(.btn),
html:not(.js) .masthead .mainnav a:not(.btn) { color: var(--charcoal); }
.masthead.is-stuck .mainnav a:not(.btn):hover,
.masthead.is-open .mainnav a:not(.btn):hover { color: var(--violet-lo); border-bottom-color: rgba(122, 4, 214, .4); }
.masthead.is-stuck .mainnav a.is-active,
.masthead.is-open .mainnav a.is-active { border-bottom-color: var(--violet); }
/* the copy of the call to action inside the menu is for the phone menu */
.mainnav__cta { display: none; }
.masthead__cta { flex: none; padding: 14px 24px; }

.navtoggle {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .4);
  cursor: pointer;
  place-items: center;
  align-content: center;
}
.navtoggle span {
  display: block;
  width: 20px; height: 2px;
  margin: 3px auto;
  background: #fff;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.masthead.is-stuck .navtoggle,
.masthead.is-open .navtoggle { border-color: rgba(48, 49, 48, .35); }
.masthead.is-stuck .navtoggle span,
.masthead.is-open .navtoggle span { background: var(--charcoal); }
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ----------------------------------------------------------------
   4. Hero
   ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 760px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink-deep);
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 5;
  /* The left panel stays readable behind the headline rather than going
     solid black, which is how the mockup reads. */
  background:
    linear-gradient(100deg, rgba(5, 7, 11, .88) 0%, rgba(5, 7, 11, .74) 26%, rgba(5, 7, 11, .60) 42%, rgba(5, 7, 11, .14) 64%, rgba(5, 7, 11, .52) 100%),
    linear-gradient(180deg, rgba(5, 7, 11, .72) 0%, transparent 26%, transparent 58%, rgba(5, 7, 11, .80) 100%);
}
.hero__body {
  position: relative;
  z-index: 10;
  width: 100%;
  padding-block: 0 84px;
}
.hero__copy { max-width: 640px; }
.hero .kicker { display: block; margin-bottom: 22px; color: #fff; text-shadow: 0 0 10px rgba(5, 7, 11, .9), 0 1px 2px rgba(5, 7, 11, .8); }

.hero h1 {
  font-size: clamp(2.9rem, 5.3vw, 4.9rem);
  font-weight: 600;
  margin-bottom: 22px;
  letter-spacing: .002em;
}
.hero h1 .dot { color: var(--violet); }

.hero__lede {
  margin: 0 0 34px;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
  max-width: 520px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ----------------------------------------------------------------
   5. Services
   ---------------------------------------------------------------- */
.section { padding-block: 104px; }
.section--light { background: var(--paper); color: var(--body); }
.section--paper { background: var(--paper-alt); color: var(--body); }

.section__head { max-width: 760px; margin-bottom: 68px; }
.section--light .kicker,
.section--paper .kicker { color: var(--red-ink); }
.section__head h2 {
  margin-block: 16px 18px;
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  color: var(--charcoal);
}
.section__head p { margin: 0; font-size: 17px; color: var(--body); }

.section__more { margin: 56px 0 0; text-align: center; }

.servicegrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px 56px;
}
.service { text-align: center; }
.service__icon {
  height: 96px;
  margin-bottom: 26px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.service__icon svg { width: 84px; height: 84px; color: var(--charcoal); }
.service h3 {
  font-size: 25px;
  font-weight: 600;
  color: var(--red);
  margin-bottom: 14px;
  letter-spacing: .01em;
}
.service p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--body); }

/* ----------------------------------------------------------------
   6. Portfolio
   ---------------------------------------------------------------- */
.project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 64px;
  align-items: center;
  padding-block: 56px;
  border-bottom: 1px solid rgba(48, 49, 48, .16);
}
.project:last-of-type { border-bottom: 0; }
.project--flip .project__art { order: -1; }

/* the mockup's game cards are rounded; done here rather than baked into
   each image, so every piece of art matches whatever its source */
.project__art { overflow: hidden; border-radius: 16px; isolation: isolate; }
.project__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.project:hover .project__art img { transform: scale(1.04); }

.project h3 {
  font-size: clamp(1.8rem, 2.9vw, 2.45rem);
  color: var(--red);
  margin-bottom: 16px;
}
.project__lede { margin: 0 0 18px; font-size: 16px; color: var(--body); max-width: 46ch; }
.project__tags {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--charcoal);
}
.project__meta { margin: 0 0 26px; font-size: 15px; color: var(--body); }
.project__meta span { display: block; }

/* ----------------------------------------------------------------
   7. Founder quote
   A banner, not a tall block: the portrait is one of the sheared
   panels and bleeds the full height, as in the mockup.
   ---------------------------------------------------------------- */
.quote {
  position: relative;
  /* the mockup band is 2.56:1; this runs it about 23% shorter (3.33:1),
     with the type scaled to match so the layout keeps its proportions */
  min-height: clamp(360px, 30vw, 590px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink-deep);
}

/* Panel widths set so the portrait panel matches the source image's own
   aspect ratio. Cover then shows the whole frame instead of zooming in. */
.quote__panels .quote__portrait-panel  { flex-grow: 316; }  /* 31.6% */
.quote__panels .panel:nth-child(2)     { flex-grow: 254; }  /* 25.4% */
.quote__panels .panel:nth-child(3)     { flex-grow: 236; }  /* 23.6% */
.quote__panels .panel:nth-child(4)     { flex-grow: 194; }  /* 19.4% */

/* the portrait is a person, never dimmed */
.quote__portrait-panel .panel__media {
  background-color: var(--ink-deep);
  background-size: cover;
}

/* The scenery is the backdrop the mockup actually shows: the sunset, the
   portal and the castle all stay legible. Only the strip behind the copy
   is pushed down. */
.quote__panels .panel--dim .panel__media::after {
  background: linear-gradient(180deg,
    rgba(5,7,11,0)   0%,
    rgba(5,7,11,.07) 15%,
    rgba(5,7,11,.60) 31%,
    rgba(5,7,11,.66) 70%,
    rgba(5,7,11,.24) 86%,
    rgba(5,7,11,.08) 100%);
}

.quote__scrim {
  position: absolute;
  inset: 0;
  z-index: 5;
  /* a light safety wash so the copy keeps its contrast ratio wherever a
     panel happens to be bright; the panels carry the real darkening */
  background: linear-gradient(180deg,
    rgba(5,7,11,0)   22%,
    rgba(5,7,11,.16) 34%,
    rgba(5,7,11,.16) 74%,
    rgba(5,7,11,0)   88%);
}

.quote__inner {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  /* the sheet sets the copy a little below centre, which leaves the peaks
     and the portal room to read above it */
  padding-block: 92px 44px;
}

/* the copy clears the portrait panel on the left */
.quote__slides { flex: 1 1 auto; min-width: 0; padding-left: 34%; }

.quote__slide { margin: 0; }
.quote__slides { display: grid; }
.quote__slide { grid-area: 1 / 1; align-self: center; }
.quote__slide[hidden] { display: block !important; visibility: hidden; }
.quote__slide blockquote { margin: 0; }
.quote__slide blockquote p {
  margin: 0 0 .62em;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.37vw, 2.35rem);
  font-weight: 500;
  line-height: 1.14;
  text-transform: uppercase;
  color: #fff;
  max-width: 16.4em;
  text-shadow: 0 0 22px rgba(5, 7, 11, .78), 0 1px 3px rgba(5, 7, 11, .65);
}
.quote__slide figcaption {
  font-family: var(--font-display);
  font-size: clamp(.78rem, 1.05vw, 1rem);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 0 14px rgba(5, 7, 11, .8);
}

.quote__nav {
  position: absolute;
  z-index: 12;
  top: 6%;
  right: 3.2%;
  display: flex;
  gap: 18px;
}
.quote__arrow {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.quote__arrow svg { width: 26px; height: 26px; }
.quote__arrow:hover { background: rgba(255, 255, 255, .16); }
.quote__arrow:active { transform: scale(.92); }
.quote__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ----------------------------------------------------------------
   7b. Free audit (dark band) and FAQ
   Both carried over from the original home page so the links other
   pages make to index.html#audit and #faq keep landing somewhere.
   ---------------------------------------------------------------- */
.audit { background: var(--ink); color: rgba(255, 255, 255, .78); padding-block: 96px; }
.audit__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 72px;
  align-items: center;
}
.audit__copy h2 {
  margin-block: 16px 20px;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  color: #fff;
}
.section__head .kicker,
.audit__copy > .kicker { margin: 0; font-size: 13px; }
.audit__copy > p:not(.kicker) { margin: 0 0 28px; font-size: 17px; line-height: 1.65; max-width: 56ch; }
.audit__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.audit__points li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; color: #fff; }
.audit__points svg { flex: none; margin-top: 2px; color: var(--violet); }

.audit__form {
  padding: 40px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
}
.audit__field { margin-bottom: 20px; }
.audit__field label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.audit__field input {
  width: 100%;
  padding: 15px 16px;
  font: inherit;
  font-size: 16px;               /* 16px stops iOS zooming on focus */
  color: #fff;
  background: rgba(5, 7, 11, .6);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 0;
  transition: border-color .2s var(--ease);
}
.audit__field input::placeholder { color: rgba(255, 255, 255, .38); }
.audit__field input:focus { outline: none; border-color: var(--violet); }
.audit__field input[aria-invalid="true"] { border-color: var(--red); }
.audit__error { min-height: 1em; margin: 6px 0 0; font-size: 13px; color: #ff8a7a; }
.audit__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.audit__submit { width: 100%; margin-top: 4px; }
.audit__submit:disabled { opacity: .6; cursor: progress; }
.audit__note { margin: 16px 0 0; font-size: 13px; color: rgba(255, 255, 255, .55); }
.audit__status { margin: 12px 0 0; min-height: 1.4em; font-size: 15px; }
.audit__status.is-ok  { color: #8ff0b0; }
.audit__status.is-err,
.audit__status.is-error { color: #ff8a7a; }

.faq .section__head { margin-bottom: 44px; }
.faq__list { max-width: 980px; border-top: 1px solid rgba(48, 49, 48, .18); }
.faq__item { border-bottom: 1px solid rgba(48, 49, 48, .18); }
.faq__item summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1.5vw, 1.32rem);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--charcoal);
  list-style: none;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--red-ink); }
.faq__toggle { position: relative; flex: none; width: 18px; height: 18px; }
.faq__toggle::before,
.faq__toggle::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
  transition: transform .25s var(--ease);
}
.faq__toggle::after { transform: rotate(90deg); }
.faq__item[open] .faq__toggle::after { transform: rotate(0deg); }
.faq__item[open] summary { color: var(--red-ink); }
.faq__a p { margin: 0; padding: 0 56px 28px 0; font-size: 16px; line-height: 1.7; color: var(--body); max-width: 78ch; }

/* ----------------------------------------------------------------
   8. Clients & footer
   ---------------------------------------------------------------- */
.clients {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink-deep);
}
.clients__scrim {
  position: absolute; inset: 0; z-index: 5;
  background: linear-gradient(180deg, rgba(5, 7, 11, .74), rgba(5, 7, 11, .66));
}
.clients__row {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  padding-block: 56px;
}
.clients__label {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #fff;
  flex: none;
}
.clients__label::after {
  content: "";
  display: block;
  width: 46px; height: 1px;
  margin-top: 14px;
  background: rgba(255, 255, 255, .6);
}
.clients__logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px 54px;
  flex: 1 1 auto;
  flex-wrap: wrap;
}
.clients__logos li { display: flex; align-items: center; }

/* The two-line marks carry a sub-label, so their cap height is only about
   half the image. Single-line marks are set shorter so every logo reads at
   the same optical size rather than the same box height. */
.clients__logos img {
  height: 38px;
  width: auto;
  opacity: .92;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.clients__logos .is-single img { height: 19px; }
.clients__logos li:hover img { opacity: 1; transform: translateY(-2px); }

.sitefoot { background: var(--paper); color: var(--body); }
.sitefoot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 48px;
  padding-block: 64px 52px;
}
.sitefoot__brand { display: inline-block; margin-bottom: 18px; }
.sitefoot__brand img { display: block; width: auto; height: 60px; }
.sitefoot__about p { margin: 0 0 24px; max-width: 38ch; font-size: 15px; line-height: 1.65; }
.sitefoot__cta { padding: 13px 22px; font-size: 13px; }
.sitefoot__heading {
  margin: 4px 0 20px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.sitefoot__col ul { display: grid; gap: 12px; }
.sitefoot__col a { color: var(--body); font-size: 15px; transition: color .2s var(--ease); }
.sitefoot__col a:hover { color: var(--red-ink); }
.sitefoot__contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; }
.sitefoot__contact svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--violet-lo); }
.sitefoot__contact a { overflow-wrap: anywhere; }
.sitefoot__bar { border-top: 1px solid rgba(48, 49, 48, .14); }
.sitefoot__bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 18px;
  font-size: 13px;
  color: #62625e;
}
.sitefoot__bar p { margin: 0; }
/* the margin keeps the links clear of the back-to-top button (on the links,
   not the bar: the .shell padding rules would override it on the bar) */
.sitefoot__legal { display: flex; gap: 22px; margin-right: 56px !important; }
.sitefoot__legal a { color: #62625e; transition: color .2s var(--ease); }
.sitefoot__legal a:hover { color: var(--red-ink); }

@media (max-width: 1100px) {
  .sitefoot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
  .sitefoot__about { grid-column: 1 / -1; }
  .sitefoot__about p { max-width: 60ch; }
}
@media (max-width: 640px) {
  .sitefoot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; padding-block: 48px 40px; }
  .sitefoot__col--contact { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  /* stacked: room underneath, so the back-to-top button never covers the text */
  .sitefoot__bar-inner { flex-direction: column; text-align: center; padding-bottom: 72px; }
  .sitefoot__legal { margin-right: 0 !important; }
  .audit { padding-block: 64px; }
  .audit__inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .audit__form { padding: 26px 22px; }
  .faq__a p { padding-right: 0; }
}

/* ----------------------------------------------------------------
   9. Responsive
   ---------------------------------------------------------------- */
@media (max-width: 1100px) {
  .shell { padding-inline: 28px; }
  .servicegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 54px 40px; }
  .quote__grid { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
  .quote__portrait { width: 220px; }
  .clients__row { flex-direction: column; align-items: flex-start; gap: 28px; }
  .clients__logos { flex-wrap: wrap; gap: 26px 44px; justify-content: flex-start; }
  .clients__logos img { height: 33px; }
  .clients__logos .is-single img { height: 17px; }
}

/* the full nav plus the CTA stop fitting below 1024px, so collapse there */
@media (max-width: 1023px) {
  .masthead__inner { padding-block: 16px; }
  .brand__logo { height: 48px; }
  .masthead.is-stuck .brand__logo { height: 42px; }
  .mainnav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - 78px);
    overflow-y: auto;
    padding: 8px 28px 24px;
    background: #fff;
    border-top: 1px solid rgba(48, 49, 48, .12);
    box-shadow: 0 22px 40px rgba(5, 7, 11, .18);
  }
  .mainnav.is-open { display: flex; }
  .mainnav a:not(.btn) { padding-block: 15px; border-bottom: 1px solid rgba(48, 49, 48, .1); }
  .masthead .mainnav a.is-active,
  .masthead.is-open .mainnav a.is-active { border-bottom-color: rgba(48, 49, 48, .1); box-shadow: inset 3px 0 0 var(--violet); padding-left: 14px; }
  .mainnav .mainnav__cta { display: flex; margin-top: 20px; }
  .masthead__cta { display: none; }
  .navtoggle { display: grid; }
}

@media (max-width: 860px) {
  .hero { min-height: 640px; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(5, 7, 11, .88) 0%, rgba(5, 7, 11, .55) 38%, rgba(5, 7, 11, .94) 86%);
  }
  .hero__body { padding-bottom: 58px; }
  .hero__actions .btn { flex: 1 1 200px; }

  .section { padding-block: 72px; }
  .section__head { margin-bottom: 48px; }

  .project {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-block: 42px;
  }
  .project--flip .project__art { order: 0; }

  .quote { min-height: 0; }
  .quote__slides { padding-left: 0; }
  .quote__scrim {
    background: linear-gradient(180deg, rgba(5,7,11,.42) 0%, rgba(5,7,11,.80) 40%, rgba(5,7,11,.86) 100%);
  }
  /* on a phone the sheared portrait panel would be a sliver, so show the
     landscapes only and let the copy own the band */
  .quote__panels .quote__portrait-panel { flex-grow: 14; }
  /* the arrows stay pinned top right, so the copy is indented past them */
  .quote__inner { flex-direction: column; align-items: flex-start; gap: 24px; padding-block: 92px 48px; }
  .quote__nav { top: 20px; right: 20px; gap: 8px; }
  .quote__arrow { width: 40px; height: 40px; }
  .quote__slide blockquote p { font-size: clamp(1.3rem, 3.08vw, 3.05rem); }
  .quote__slide figcaption { font-size: .82rem; }
  .quote__arrow svg { width: 22px; height: 22px; }
}

@media (max-width: 560px) {
  .shell { padding-inline: 20px; }
  .servicegrid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .brand__mark { width: 38px; height: 38px; }
  .brand__mark span { font-size: 19px; }
  .brand__name { font-size: 21px; }
  .clients__logos { gap: 24px 30px; }
  .clients__logos img { height: 28px; }
  .clients__logos .is-single img { height: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   10. Platform strip
   Sits between the hero and the services grid: one centred statement of
   reach, then the platform marks.
   ========================================================================== */
.platforms {
  /* lighter than the games section below it, so the two do not read as
     one continuous grey slab now that games sits directly beneath */
  background: var(--paper);
  padding-block: 64px 58px;
  text-align: center;
}
.platforms__line {
  max-width: 1120px;
  margin: 0 auto 38px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.05vw, 1.72rem);
  font-weight: 600;
  line-height: 1.22;
  text-transform: uppercase;
  color: #28323e;
}
.platforms__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px 46px;
}
.platforms__row li { display: flex; }
.platforms__row svg {
  width: 44px;
  height: 44px;
  color: #28323e;
  opacity: .92;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.platforms__row li:hover svg { opacity: 1; transform: translateY(-3px); }

@media (max-width: 860px) {
  .platforms { padding-block: 48px 44px; }
  .platforms__row { gap: 22px 32px; }
  .platforms__row svg { width: 38px; height: 38px; }
}
@media (max-width: 560px) {
  .platforms__row { gap: 20px 26px; }
  .platforms__row svg { width: 33px; height: 33px; }
}

/* ==========================================================================
   11. Floating controls (all pages)
   ========================================================================== */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .24);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s var(--ease), visibility .2s var(--ease), transform .2s var(--ease), background-color .2s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--violet); border-color: var(--violet); }
.to-top:focus-visible { outline-color: #fff; }

/* Sticky call to action on phones and tablets */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(5, 7, 11, .96);
  border-top: 1px solid rgba(255, 255, 255, .1);
  transform: translateY(110%);
  transition: transform .3s var(--ease);
}
.mobile-cta.is-visible { transform: none; }
.mobile-cta__main { flex: 1 1 auto; padding: 14px 18px; }
.mobile-cta__alt {
  display: grid;
  place-items: center;
  width: 50px;
  flex: none;
  background: #1c8a49;
  color: #fff;
}
.mobile-cta__alt:hover { background: #16733c; }
body.has-mobile-cta .to-top { bottom: 92px; }
body.has-mobile-cta .sitefoot { padding-bottom: 76px; }
@media (min-width: 1025px) {
  .mobile-cta { display: none !important; }
  body.has-mobile-cta .to-top { bottom: 20px; }
  body.has-mobile-cta .sitefoot { padding-bottom: 0; }
}

/* Cookie banner: only ever shown if analytics is switched on */
.consent {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 150;
  max-width: 420px;
  padding: 22px 24px;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
}
.consent p { margin: 0 0 16px; }
.consent a { color: #fff; text-decoration: underline; }
.consent__actions { display: flex; gap: 10px; }
.consent__actions .btn { flex: 1 1 auto; padding: 12px 18px; }
@media (max-width: 780px) {
  .consent { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* ==========================================================================
   12. Print
   ========================================================================== */
@media print {
  *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .masthead, .anchor-nav { position: static !important; }
  .to-top, .mobile-cta, .consent, .skip-link, .navtoggle { display: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
}