/* Homepage composition for Review · Dark · Desktop, frame 269:2289. */
:root { --text-h2: 3.75rem; }

.cc-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.bhero { min-height: 0; padding: 0; }
.bhero_wrap { min-height: 0; gap: 48px; padding: 0; }
.bhero_top { padding: 484px var(--gutter) 0; gap: 0; }
.bhero_line { font-size: 24px; font-weight: 400; }
.bhero_bottom { position: relative; gap: 32px; }
.bhero_meta { min-height: 18px; }
.bhero_marquee { height: 520px; }
.bhero_motion-controls { position: absolute; bottom: 14px; right: 0; z-index: 2; min-height: 0; }
.cc-motion-toggle { color: var(--text); background: rgb(11 11 16 / .88); font-size: 11px; }
.cc-motion-toggle[hidden] { display: none; }
.bhero_marquee-mask {
  background: linear-gradient(90deg, var(--ink), transparent 8%, transparent 92%, var(--ink));
}

.b-section--about { padding: 80px 0 120px; }
.b-about_wrap { max-width: none; gap: 80px; }
.b-about_statement { max-width: 650px; margin-inline: auto; font-weight: 400; }
.b-about_partners { width: 100%; }
.b-about_partners .marquee_item img { filter: brightness(0) invert(1); max-height: 52px; }
.b-about_partners .marquee_group { gap: 100px; padding-right: 100px; }

.cc-review-reel { width: 100%; margin-bottom: 72px; }
.cc-review-showreel { height: auto; aspect-ratio: 16 / 9; border-radius: 0; }
.cc-review-showreel video { width: 100%; height: 100%; object-fit: cover; }
.cc-review-showreel_caption {
  position: absolute; left: var(--gutter); bottom: 72px;
  color: #fff; text-shadow: 0 2px 12px #000;
  pointer-events: none;
}
.cc-review-showreel_caption .mono { font-size: 12px; }
.cc-review-showreel_caption h2 { font-size: 32px; font-weight: 400; margin: 18px 0 0; }

.b-section--projects { padding-block: 32px 120px; }
.b-projects_title { max-width: none; }
.b-projects_wrap { gap: 56px; }
.b-top > .mono { font-size: 12px; }
.b-projects_grid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 24px; }
.b-project_media { height: auto; aspect-ratio: 16 / 9; border-radius: 20px; }
.b-project_info { align-items: flex-start; padding: 18px 12px 0; gap: 12px; font-size: 18px; }
.b-project_name { flex: 1; }
.b-project_date { flex-direction: column; align-items: flex-end; gap: 8px; font-size: 11px; color: var(--accent); text-align: right; }
.b-project_date .b-service_logo { margin: 0; min-height: 0; height: 20px; }
.b-project_date .b-service_logo img { height: 20px; max-width: 72px; width: auto; object-position: right; filter: brightness(0) invert(1); }
.b-project_date .b-service_logo--fortnite-uefn img { max-width: 44px; }
.b-project:focus-visible .b-project_media img { transform: scale(1.03); }

.cc-capabilities { padding-block: 32px 120px; }
.cc-capabilities .b-top { margin-bottom: 56px; }
.cc-capabilities_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.cc-capability {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  min-height: 200px; padding: 32px 20px 24px; border-radius: 20px;
  background: var(--surface); color: var(--text); text-decoration: none;
  font-size: 22px; text-align: center;
}
a.cc-capability { transition: background-color 180ms ease; }
a.cc-capability:hover { background: #25252e; }
/* The hover transition above replaced the reveal's, so linked tiles popped in while the rest faded (Vitor, 29 Oct). */
a.cc-capability.cc-reveal {
  transition: opacity 700ms ease, transform 900ms var(--ease-out), background-color 180ms ease;
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms;
}
.cc-capability_mark { display: flex; align-items: center; justify-content: center; height: 84px; width: 100%; }
.cc-capability_mark > img { max-width: 100%; max-height: 84px; object-fit: contain; }
.cc-capability_mark--monochrome > img { filter: brightness(0) invert(1); }
.cc-capability .b-service_logo { margin: 0; min-height: 0; height: 84px; justify-content: center; }
.cc-capability .b-service_logo img { height: 64px; width: auto; max-width: 230px; object-position: center; filter: brightness(0) invert(1); }
.cc-capability .b-service_logo--roblox img { height: 64px; }
.cc-capability .b-service_logo--meta-horizon img { height: 60px; }

.b-section--faq { padding: 32px var(--gutter) 120px; }
.b-section--blog { padding-bottom: 96px; }
.b-blog_grid > :nth-child(3) { display: block; }

@media (min-width: 1441px) {
  .bhero_top { padding-top: min(38vw, 580px); }
}
@media (max-width: 991px) {
  .bhero_top { padding-top: 310px; }
  .bhero_wrap { gap: 40px; }
  .bhero_bottom { gap: 24px; }
  .bhero_marquee { height: 420px; }
  .b-section--about { padding-block: 72px 96px; }
  .b-about_wrap { gap: 56px; }
  .b-projects_grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 20px; }
  .cc-capabilities_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .cc-capability { font-size: 18px; }
  .cc-capability .b-service_logo img { max-width: 160px; }
  .b-blog_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .b-blog_wrap .b-blogcard_media { height: auto; aspect-ratio: 0.9; }
}
@media (max-width: 600px) {
  :root { --text-h2: 2.5rem; }
  .bhero_top { padding-top: 230px; }
  .bhero_line { max-width: 25ch; font-size: 20px; }
  .bhero_marquee { height: 340px; }
  .bhero_tile { width: 136px; border-radius: 60px 0 60px 0; }
  .bhero_tile:nth-child(even) { border-radius: 0 60px 0 60px; }
  .b-about_statement { font-size: 30px; }
  .b-about_partners .marquee_group { gap: 56px; padding-right: 56px; }
  .b-about_partners .marquee_item img { max-height: 32px; }
  .b-section--projects, .cc-capabilities, .b-section--faq { padding-bottom: 72px; }
  .b-projects_wrap, .b-blog_wrap { gap: 32px; }
  .b-projects_grid--home { grid-template-columns: 1fr; gap: 36px; }
  .b-project_info { padding-inline: 4px; font-size: 17px; }
  .cc-capabilities_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cc-capabilities .b-top { margin-bottom: 32px; }
  .cc-capability { min-height: 156px; padding: 20px 12px; gap: 16px; font-size: 16px; }
  .cc-capability_mark { height: 60px; }
  .cc-capability .b-service_logo img { height: 48px; max-width: 120px; }
  .b-faq_grid { grid-template-columns: 1fr; gap: 32px; }
  .b-faq_list { max-width: none; }
  .b-section--faq { padding-inline: 0; }
  .b-blog_grid { grid-template-columns: 1fr; gap: 24px; }
  .b-blog_wrap .b-blogcard_media { aspect-ratio: 1; }
  .cc-review-reel { margin-bottom: 40px; }
  /* Henry, 29 Oct: on phones the caption sat on top of the reel's own titles; kept for screen readers only. */
  .cc-review-showreel_caption { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .b-project_media img, .cc-capability { transition: none; }
}

/* Logo splash hero over the Explore · Dark 2 tile strip. */
.bhero { position:relative; overflow:hidden; }
.bhero_wrap { position:relative; gap:24px; padding:0 0 32px; }
/* The splash slot is the square mark's box (398x308 in the 1920x1080 video). The video is
   positioned so its last frame lands exactly on the still; the opening shapes overflow the
   slot, run behind the tile strip and are clipped by the hero. */
.cc-splash { position:relative; width:clamp(180px,21vw,300px); aspect-ratio:398/308; margin:0; }
.cc-splash_end { display:block; width:100%; height:auto; }
.cc-splash--pending .cc-splash_end, .cc-splash.is-playing .cc-splash_end { visibility:hidden; }
.cc-splash_video { position:absolute; top:0; left:-191.46%; width:482.41%; max-width:none; height:auto; margin-top:-96.98%; pointer-events:none; opacity:0; }
.cc-splash.is-playing .cc-splash_video { opacity:1; }
.bhero_line, .bhero_bottom { position:relative; z-index:1; }
/* The tagline waits for the rolling C to land (.5s; the giant opening C was cut 29 Oct), then fades in.
   It is hidden from the first paint (not when the script arrives, which made it flicker),
   but the wait runs in CSS alone: if the script never comes it still appears at 3s. It stays
   in the HTML and every animation ends at full opacity, so crawlers get the text; with no
   JS or reduced motion it is never hidden. */
@keyframes cc-line-wait { from { opacity:0; } to { opacity:1; } }
@keyframes cc-line-in { from { opacity:0; } to { opacity:1; } }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .bhero_top .bhero_line { animation:cc-line-wait .5s ease 3s both; }
}
.bhero_top.cc-splash-run .bhero_line { animation:cc-line-in .5s ease .5s both; }
.bhero_top.cc-splash-still .bhero_line { animation:none; }
.bhero_top { padding:156px var(--gutter) 0; display:flex; flex-direction:column; align-items:center; gap:32px; }
.bhero_line { max-width:800px; margin:0; font-size:24px; font-weight:500; line-height:32px; text-align:center; }
.bhero_bottom { gap:34px; }
.bhero_meta { justify-content:flex-end; }
.bhero_marquee { height:520px; }
.bhero_marquee-mask { background:linear-gradient(90deg,var(--ink),transparent 12.5%,transparent 87.5%,var(--ink)); }
/* Frosted band behind the tile strip, like the top bar (Henry, 27 Oct): the splash's opening
   shapes blur and dim where they show between and above the tiles. Same colour as the page,
   so it is invisible once the splash has settled. */
/* It sits on .bhero_bottom, not inside the strip (which clips), and its top edge fades in
   over 96px, so there is no hard line where the band begins. */
.bhero_bottom::before { content:""; position:absolute; inset:0; z-index:-1; background:rgb(11 11 16 / .6); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); -webkit-mask-image:linear-gradient(transparent,#000 96px); mask-image:linear-gradient(transparent,#000 96px); pointer-events:none; }
.bhero_tile { width:181px; height:100%; }
/* No per-tile "breathe" any more: 21+ separate scale animations under the moving strip were what made it
   stutter in Chrome, Edge and Brave. The strip now moves as one composited layer. */
.cc-hero-image { width:100%; height:100%; overflow:hidden; }
.bhero_tile img { object-position:var(--crop-x) var(--crop-y); transform:scale(var(--crop-scale)); transform-origin:var(--crop-x) var(--crop-y); }
/* Each tile fades in as its image arrives instead of popping in. The script marks it loaded;
   without the script every tile still appears at 3s. */
@keyframes cc-tile-wait { from { opacity:0; } to { opacity:1; } }
@keyframes cc-tile-in { from { opacity:0; } to { opacity:1; } }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .bhero_tile img { animation:cc-tile-wait .4s ease 3s both; }
  .bhero_tile img.is-loaded { animation:cc-tile-in .4s ease both; }
}
.b-section--about { padding:48px 0 32px; }
.b-about_wrap { gap:0; }
.b-about_statement { max-width:1000px; font-size:48px; line-height:1.1; font-weight:500; }
.b-about_partners { padding-block:88px; height:auto; } /* main.css fixes the row at 80px; with this padding that left the logos 0px */
.b-about_partners .marquee { height:80px; border:0; padding-block:0; } /* no rules above/below the logos */
.b-about_partners .marquee_item img { height:56px; max-height:56px; max-width:none; }
.b-about_partners .marquee_group { gap:96px; padding-right:96px; }
.cc-capabilities_grid { row-gap:32px; }
.cc-capability { min-height:0; padding:24px; font-size:24px; line-height:1.2; font-weight:500; }
.cc-capability_mark { height:100px; }
.cc-capability_mark > img { width:auto; max-height:100px; max-width:100%; }
.cc-capability--meta-horizon img { width:84px; }
.cc-capability--roblox img,.cc-capability--unreal-engine img,.cc-capability--source img,.cc-capability--three-js img { width:76px; }
.cc-capability--minecraft img { width:210px; }
.cc-capability--gta img { width:99px; }
/* Keep wide wordmarks balanced with the symbol-only platform marks. */
.cc-capability--battlefield-portal .cc-capability_mark > img,
.cc-capability--fortnite-uefn .cc-capability_mark > img { width:160px; max-width:80%; }
.cc-capability--unity .cc-capability_mark > img,
.cc-capability--godot .cc-capability_mark > img { width:76px; max-width:80%; }
.cc-recognition { padding:32px 0 120px; }
.cc-recognition .b-top { margin-bottom:56px; }
.cc-recognition_grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.cc-award { min-width:0; border-radius:20px; background:var(--surface); padding:32px; }
.cc-award_media { position:relative; width:100%; height:300px; }
.cc-award_media video { width:100%; height:100%; object-fit:contain; }
.cc-award_logo { position:absolute; left:4px; top:4px; width:104px; height:49px; object-fit:contain; object-position:left top; }
.cc-award h3 { font-size:24px; line-height:1.2; font-weight:500; margin:32px 0; }
.cc-award p { font-size:14px; line-height:24px; margin:0; }
.cc-recognition_controls { display:flex; justify-content:flex-end; margin-top:16px; }
.b-project_media { transition:transform 240ms ease-out; }
.b-project:hover .b-project_media,.b-project:focus-visible .b-project_media { transform:translateY(-6px) scale(1.025); }
.b-project:hover .b-project_media img,.b-project:focus-visible .b-project_media img { transform:none; }
@media(max-width:991px) {
 .bhero_top { padding-top:136px; }
 .bhero_marquee { height:420px; }
 .b-about_statement { font-size:40px; }
 .cc-capability { font-size:20px; padding:20px; }
 .cc-award { padding:20px; }
 .cc-award_media { height:220px; }
 .cc-award h3 { font-size:20px; }
 .cc-award p { font-size:12px; }
}
@media(max-width:600px) {
 .bhero_top { padding-top:128px; gap:24px; }
 .bhero_line { font-size:18px; line-height:26px; }
 .bhero_wrap { gap:32px; }
 .bhero_bottom { gap:24px; }
 .bhero_marquee { height:340px; }
 .bhero_tile { width:136px; }
 .b-about_statement { font-size:30px; }
 .b-about_partners { padding-block:48px; }
 .b-about_partners .marquee { height:56px; }
 .b-about_partners .marquee_item img { max-height:36px; }
 .b-about_partners .marquee_group { gap:56px; padding-right:56px; }
 .cc-capability { font-size:16px; padding:20px 12px; }
 .cc-capability_mark { height:72px; }
 .cc-capability_mark > img { max-height:72px; }
 .cc-recognition { padding-bottom:72px; }
 .cc-recognition .b-top { margin-bottom:32px; }
 .cc-recognition_grid { grid-template-columns:1fr; }
 .cc-award { padding:24px; }
 .cc-award_media { height:280px; }
 .cc-award h3 { font-size:24px; margin-block:24px; }
 .cc-award p { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) {
 .b-project_media { transition:none; }
 .b-project:hover .b-project_media,.b-project:focus-visible .b-project_media { transform:none; }
}

.b-h2 { font-weight:500; }
/* "Trusted by the biggest brands / and names in gaming": the forced break left "brands" alone on a
   phone. Balanced wrapping instead of the <br> below desktop widths. */
.b-about_statement { text-wrap: balance; }
@media (max-width: 991px) { .b-about_statement br { display: none; } }

/* "Let's build together": the closing enquiry block (template-parts/home/build.php). */
.cc-build { padding: 120px 0 160px; }
.cc-build_wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 64px; align-items: end; padding: 64px; border-radius: var(--radius); background: var(--surface); }
.cc-build_head .mono { font-size: 14px; color: var(--accent); }
.cc-build_title { margin: 24px 0 0; font-size: clamp(56px, 8vw, 112px); font-weight: 900; line-height: .95; letter-spacing: -2px; }
.cc-build_line { margin: 24px 0 0; max-width: 440px; font-size: 20px; line-height: 1.4; color: var(--muted); }
.b-form > .cc-build_row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cc-build_row > div { display: flex; flex-direction: column; }
.cc-build_form input[type="text"], .cc-build_form input[type="email"], .cc-build_form textarea { background-color: var(--ink); }
.cc-build_form input:focus, .cc-build_form textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 3px; }
.cc-build_form textarea { height: 140px; }
.b-form > .cc-build_foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
.cc-build_foot p { margin: 0; font-size: 12px; line-height: 1.5; }
.cc-build_submit { width: auto; min-width: 180px; background: var(--accent); color: var(--ink); }
.cc-build_submit:hover { background: #ff70ce; color: var(--ink); }
@media (max-width: 991px) {
 .cc-build_wrap { grid-template-columns: 1fr; gap: 40px; padding: 40px; align-items: start; }
}
@media (max-width: 600px) {
 .cc-build { padding: 72px 0 96px; }
 .cc-build_wrap { padding: 24px; gap: 32px; }
 .cc-build_title { letter-spacing: -1px; }
 .cc-build_line { font-size: 16px; }
 .b-form > .cc-build_row { grid-template-columns: 1fr; }
 .b-form > .cc-build_foot { flex-direction: column-reverse; align-items: stretch; }
 .cc-build_submit { width: 100%; }
}

/* Margot, 28 Oct: the tagline, the brands statement and the section titles in Inter Light.
   Inter is vendored at 300-700 (assets/fonts) so 300 is a real cut, not the 400 fallback. */
.bhero_line,
.b-about_statement,
.b-section .b-h2,
.cc-recognition .b-h2,
.b-blog_title .b-h1 { font-weight:300; }