/* ============================================================================
   Creators Corp — ported from the Webflow design system.

   Token names and values are taken verbatim from the Webflow variable
   collection so the two stay comparable during the port. Webflow's responsive
   "variable modes" become plain media queries here:

     base                 -> desktop
     mode-ca0b83bf...     -> <= 991px  (Webflow "medium")
     mode-3f74518b...     -> <= 767px  (Webflow "small")

   Content is server-rendered; optional JavaScript enhances controls. The one interactive component (the Platforms
   dropdown) uses a native <details> element, which is keyboard accessible and
   whose contents are in the HTML whether it is open or not — so a crawler
   reads those links either way.
   ========================================================================= */

:root {
  /* ------------------------------------------------------------------------
     BUNGEE PALETTE — taken from bungee-pro.webflow.io's variable collection.

     The whole stylesheet reads through these tokens, so replacing this block
     re-skins every component at once. That is why the pivot did not mean
     starting the CSS again: the Gang-era layout primitives were never given
     literal colours.

     Names are kept from the previous system so nothing downstream breaks.
     NOTE: --ink is the page surface (white); --text is the near-black.
     ------------------------------------------------------------------------ */
  --ink: #ffffff;
  --surface: #eef0f6;          /* colors--light-gray */
  --line: #d0d8e4;             /* colors--border */
  --text: #1e1e1e;             /* colors--black */
  --muted: #5a6271;            /* colors--text */

  --contrast: #1e1e1e;
  --contrast-text: #ffffff;
  --contrast-line: #343434;
  --contrast-muted: #8a919b;   /* colors--gray */

  /* Bungee is monochrome — no brand accent. These stay defined because
     components reference them; they resolve to the neutral scale. */
  --accent: #eef0f6;
  --accent-roblox: #1e1e1e;
  --accent-horizon: #5a6271;
  --accent-portal: #8a919b;

  --wash-hero: #eef0f6;
  --wash-fortnite: #eef0f6;
  --wash-roblox: #eef0f6;
  --wash-horizon: #eef0f6;
  --wash-portal: #eef0f6;
  --wash-alt: #eef0f6;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-8: 96px;
  --space-10: 140px;

  --container-max: 1520px;
  --gutter: 32px;
  /* Bungee leans on large radii - 20px on blog cards, 32px on project and
     testimonial cards, 40px on service cards. One scale, used deliberately. */
  --radius-sm: 8px;
  --radius: 20px;
  --radius-lg: 32px;
  --radius-xl: 40px;

  /* Type. The reference's "Interdisplay" is Inter's display optical size,
     served by Google Fonts through the opsz axis (see functions.php). One
     family, two cuts, picked per font-size by the browser. */
  --font-display: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-body: Inter, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The reference's scale, verbatim. Base is 16px; the previous 18px base was
     inflating every paragraph, button and card by 12%. */
  --text-h1: 4.38rem;
  --text-display: 4.38rem;
  --text-h2: 3.75rem;
  --text-h3: 3rem;
  --text-h4: 2rem;
  --text-h5: 1.5rem;
  --text-h6: 1.25rem;
  --text-p-xl: 1.13rem;
  --text-p-l: 1.1rem;
  --text-body: 1rem;
  --text-p-m: 0.88rem;
  --text-p-s: 0.75rem;
  --text-small: 0.88rem;
  --text-label: 14px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
/* The reference keeps its desktop type down to 767px, then drops h1/h2/h3 only.
   h4 and below never change. Gutters step 32 -> 24 -> 16. */
@media (max-width: 991px) {
  :root { --gutter: 24px; --space-8: 72px; --space-10: 96px; }
}
@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --space-8: 56px;
    --space-10: 72px;
    --text-h1: 3rem;
    --text-display: 3rem;
    --text-h2: 2.5rem;
    --text-h3: 2.4rem;
  }
}

/* --------------------------------------------------------------- base ---- */

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

body {
  margin: 0;
  background-color: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.4;
  font-optical-sizing: auto;
  overflow-x: hidden;
  overflow-x: clip; /* crops without becoming a scroll container, so position: sticky still works */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  position: fixed; left: var(--space-2); top: var(--space-2); z-index: 200;
  padding: 12px 18px; background: var(--contrast); color: var(--contrast-text);
  border-radius: 999px; text-decoration: none;
}

/* Shared layout primitives */
.section_inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section_head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 46em;
  margin-bottom: var(--space-6);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text);
}

.section_title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 0.9;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--text);
}

.section_lede {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-body);
  line-height: 1.55;
}

/* ------------------------------------------------------------- buttons --- */

.btn {
  display: inline-block;
  padding: 14px var(--space-4);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 300ms var(--ease-out), background-color 300ms ease,
              color 300ms ease, border-color 300ms ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary { background-color: var(--contrast); color: var(--contrast-text); }
.btn-ghost   { border-color: var(--line); background-color: transparent; color: var(--text); }
.btn-invert  { border-color: var(--contrast-muted); color: var(--contrast-text); }

/* ----------------------------------------------------------------- nav --- */

.nav_wrap {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  background-color: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
}

.nav_inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-2) var(--gutter);
}

.nav_logo {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  margin-right: auto;
}

.nav_link, .nav_dd-toggle {
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
}@media (max-width: 767px) {
  /* The nav collapses to logo + CTA rather than a JS burger menu. Every link
     stays reachable through the footer, which is fully crawlable. */
  .nav_links { display: none; }
}

.hero_actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.platform_card-rule.rule-fortnite { background-color: var(--contrast); }
.platform_card-rule.rule-roblox   { background-color: var(--accent-roblox); }
.platform_card-rule.rule-horizon  { background-color: var(--accent-horizon); }
.platform_card-rule.rule-portal   { background-color: var(--accent-portal); }
.clients_group { margin-top: var(--space-5); }

.clients_label {
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* 1px gap over a coloured background is how the hairline grid is drawn. */
.clients_grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--line);
  overflow: hidden;
}

.client_cell {
  display: flex; align-items: center; justify-content: center;
  min-height: 92px;
  padding: var(--space-2);
  background-color: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -0.01em;
  text-align: center;
  transition: background-color 300ms ease;
}
.client_cell:hover { background-color: var(--surface); }@media (max-width: 991px) { .clients_grid { grid-template-columns: repeat(3, 1fr); } }@media (max-width: 767px) { .clients_grid { grid-template-columns: repeat(2, 1fr); } }

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

.stat_wrap {
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--contrast);
  background-color: var(--contrast);
}

.stat_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.stat_cell { display: flex; flex-direction: column; gap: var(--space-1); }

.stat_value {
  font-family: var(--font-mono);
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--contrast-text);
  font-variant-numeric: tabular-nums;
}

.stat_label {
  color: var(--contrast-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}@media (max-width: 767px) { .stat_grid { grid-template-columns: repeat(2, 1fr); } }

.case_row {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--ink);
  text-decoration: none;
  transition: transform 450ms var(--ease-out), box-shadow 450ms var(--ease-out),
              border-color 300ms ease;
}
.case_row:hover {
  transform: translateY(-3px);
  border-color: var(--text);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.09);
}

.case_row-media {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 10px;
  background-color: var(--surface);
  overflow: hidden;
}
.case_row-img { width: 100%; height: 100%; object-fit: cover; }

.case_row-body {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-2);
}

.case_row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.case_row-brand {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.case_row-platform {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.case_row-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.1;
  font-weight: 600;
}

.case_row-summary {
  margin: 0;
  max-width: 40em;
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.55;
}

.case_row-outcome {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%;
  margin-top: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

.case_row-metric {
  font-family: var(--font-mono);
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.case_row-metriclabel, .case_row-link {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.case_row-link { margin-top: var(--space-1); color: var(--text); }

.work_empty {
  padding: var(--space-5);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}@media (max-width: 991px) {
  .case_row { grid-template-columns: 1fr; gap: var(--space-3); }
  .case_row-metric { font-size: 40px; }
}

.press_row {
  display: flex; flex-direction: column; gap: var(--space-1);
  width: 100%;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: opacity 250ms ease;
}
.press_row:hover { opacity: 0.62; }

.press_row-top { display: flex; justify-content: space-between; gap: var(--space-2); }

.press_row-pub, .press_row-date {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.press_row-date { color: var(--muted); }

.press_row-excerpt { margin: 0; color: var(--muted); font-size: var(--text-small); line-height: 1.55; }

/* ------------------------------------------------------------------- cta -- */

.cta_wrap { padding-block: var(--space-10); }

.cta_band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius);
  background-color: var(--contrast);
  color: var(--contrast-text);
}

.cta_copy { display: flex; flex-direction: column; gap: var(--space-2); max-width: 34em; }

.cta_title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 0.9;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}

.cta_lede { margin: 0; color: var(--contrast-muted); font-size: var(--text-body); line-height: 1.55; }
.cta_actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }@media (max-width: 767px) { .cta_band { padding: var(--space-6) var(--space-4); } }

/* ------------------------------------------------------------- archives -- */

.archive_head { padding-top: 200px; padding-bottom: var(--space-8); }

.archive_filters {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  margin-bottom: var(--space-5);
}

/* Real links to real URLs, not JS filters — each filtered view is a crawlable
   page rather than a client-side state. */
.filter_chip {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background-color: var(--ink);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.filter_chip:hover { border-color: var(--text); color: var(--text); }
.filter_chip[aria-current="page"] {
  background-color: var(--contrast);
  border-color: var(--contrast);
  color: var(--contrast-text);
}

.pagination { display: flex; gap: var(--space-1); margin-top: var(--space-6); }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding-inline: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--text-small);
  text-decoration: none;
}
.pagination .page-numbers.current {
  background-color: var(--contrast);
  border-color: var(--contrast);
  color: var(--contrast-text);
}

/* --------------------------------------------------------------- motion -- */

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

/* ----------------------------------------------------- single + fallback -- */

/* Detail pages. The full Webflow case-study template is still to be ported;
   this dresses the page in the real design system meanwhile, so the links from
   the homepage and /work do not land somewhere unstyled. */

.detail_head { padding-top: 200px; padding-bottom: var(--space-6); background-color: var(--surface); }
.detail_wrap { padding-block: var(--space-8); }

.detail_title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 0.9;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-transform: uppercase;
}

.detail_lede { margin: 0; max-width: 40em; color: var(--muted); font-size: 19px; line-height: 1.5; }

.detail_media {
  aspect-ratio: 16/9;
  margin-bottom: var(--space-6);
  border-radius: var(--radius);
  background-color: var(--surface);
  overflow: hidden;
}
.detail_media img { width: 100%; height: 100%; object-fit: cover; }

.detail_outcome {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.detail_metric {
  font-family: var(--font-mono);
  font-size: clamp(40px, 8vw, 72px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.detail_metriclabel {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.prose { max-width: 68ch; }
.prose h2 { margin: var(--space-6) 0 var(--space-2); font-family: var(--font-display);
            font-size: var(--text-h3); line-height: 1.1; font-weight: 600; }
.prose h3 { margin: var(--space-5) 0 var(--space-2); font-family: var(--font-display);
            font-size: 22px; font-weight: 600; }
.prose p, .prose li { color: var(--muted); line-height: 1.7; }
.prose a { color: var(--text); text-underline-offset: 3px; }
.prose img { margin-block: var(--space-4); border-radius: var(--radius); }

/* Generic index fallback, used until the Insights and Press archives are built. */
.card-grid {
  display: grid; gap: var(--space-3); padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}
.card { border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--ink); overflow: hidden; }
.card > a { display: block; text-decoration: none; }
.card .card-body { padding: var(--space-3); }
.card h3 { margin: 0 0 var(--space-1); font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.card p { margin: 0; color: var(--muted); font-size: var(--text-small); }

.cs_mediawrap { padding-block: var(--space-5); background-color: var(--surface); }

.cs_media {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  background-color: var(--line);
  overflow: hidden;
}
.cs_img { width: 100%; height: 100%; object-fit: cover; }
.cap-index    { background-color: var(--surface); }
.cap-roblox   { background-color: var(--wash-roblox); }

.ins_card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--ink);
  text-decoration: none;
  transition: transform 450ms var(--ease-out), box-shadow 450ms var(--ease-out);
}
.ins_card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.09);
}

.ins_card-media {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 10px;
  background-color: var(--line);
  overflow: hidden;
}
.ins_card-img { width: 100%; height: 100%; object-fit: cover; }

.ins_card-body { display: flex; flex-direction: column; gap: var(--space-1); flex-grow: 1; }
.ins_card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.ins_card-cat {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.ins_card-date {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
}

.ins_card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.15;
  font-weight: 600;
}

.ins_card-summary {
  flex-grow: 1;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.55;
}

.ins_card-author {
  margin-top: var(--space-1);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* The press row already carries a headline on the archive; give the outbound
   cue a little more presence than on the homepage's compact list. */
.press_row-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 600;
}

.press_row-out {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* ==========================================================================
   MOTION SPIKE — matching thegang.io's hero float, logo marquee and pill nav.

   thegang.io does all of this with JavaScript: GSAP (loaded twice), Lenis,
   SplitType, jQuery, an infinite-marquee script and six Finsweet libraries —
   ~717KB of JS, and exactly ONE @keyframes rule in its 248KB stylesheet.

   None of it needs JavaScript. Everything below is CSS keyframes and native
   HTML video, so the effects land while the page still ships 0 bytes of JS.

   Every animation here is decorative and is switched off wholesale by the
   prefers-reduced-motion block at the end of this file.
   ========================================================================== */

/* ---------------------------------------------------- pill top bar ------- */

/* The Gang's nav renders each link as a bordered pill with a filled active
   state. Ours were plain text links. */
.nav_link,
.nav_dd-toggle {
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease;
}

.nav_link:hover,
.nav_dd-toggle:hover,
.nav_dd[open] > .nav_dd-toggle {
  border-color: var(--line);
  background-color: var(--ink);
}

/* aria-current is already set by the templates, so the active pill needs no
   extra markup and stays correct with the page, not with a script. */
.nav_link[aria-current="page"] {
  background-color: var(--contrast);
  border-color: var(--contrast);
  color: var(--contrast-text);
}

/* ------------------------------------------------- floating hero tiles --- */

/* ----------------------------------------------------- logo marquee ------ */

/* Infinite scroll with no JS: one track rendered twice, translated by exactly
   -50% so the seam lands where the copy begins. The duplicate is aria-hidden,
   so assistive tech and crawlers read the list once. */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-4);
  border-block: 1px solid var(--line);
  /* Fade the edges rather than hard-cutting logos mid-glyph. */
  -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;
  width: max-content;
  animation: cc-marquee var(--marquee-duration, 42s) linear infinite;
}

/* Pausing on hover lets someone actually read a name they spotted. */
.marquee:hover .marquee_track,
.marquee:focus-within .marquee_track { animation-play-state: paused; }

@keyframes cc-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.marquee_group {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-right: var(--space-8);
}

.marquee_item {
  flex: none;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--text);
}

.marquee_item img { max-height: 2.5rem; width: auto; }

/* Second row travels the other way, which is what stops a two-row logo wall
   reading as one sliding block. */
.marquee.is-reverse .marquee_track { animation-direction: reverse; }

.marquee_label {
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* The card itself already carries the border, radius and background from
   .case_row; the stack only needs it opaque so cards below are hidden. */
.cardstack_item .case_row {
  margin-bottom: 0;
  background-color: var(--ink);
  box-shadow: 0 -1px 0 var(--line), 0 24px 48px rgba(0, 0, 0, 0.06);
}

.cardstack_item .case_row:hover { transform: none; }@supports (animation-timeline: view()) {@media (prefers-reduced-motion: no-preference) {
    @keyframes cc-stack-recede {
      to { transform: scale(0.94); opacity: 0.55; }
    }

    /* Runs over `exit`, i.e. while the card is being covered by the next one. */
    .cardstack_item .case_row {
      animation: cc-stack-recede linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}

/* Stacking depends on there being scroll room per card. On narrow screens the
   rows are tall enough that the pile stops being legible, so fall back to a
   plain list. */
@media (max-width: 767px) {
  .cardstack_item { position: static; }
  .cardstack_item .case_row { box-shadow: none; }
}

.field_error {
  display: block;
  margin: -12px 0 var(--space-3);
  color: var(--accent-roblox);
  font-size: var(--text-small);
}

/* Error summary. Focused on load after a failed submit so a screen reader
   reaches it immediately instead of hunting through the form. */
.form_summary {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--accent-roblox);
  border-radius: var(--radius);
  background-color: var(--wash-roblox);
}
.form_summary h2 { margin: 0 0 var(--space-1); font-family: var(--font-display); font-size: 18px; }
.form_summary ul { margin: 0; padding-left: 1.1rem; }
.form_summary a { color: var(--text); }

.form_success {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--wash-hero);
}
.form_success h2 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.15;
  font-weight: 600;
}
.form_success p { margin: 0; color: var(--muted); }

/* Honeypot. Moved out of view rather than display:none — some bots skip
   display:none fields, and a genuine screen reader is kept out by aria-hidden
   plus tabindex="-1" rather than by hiding. */
.hp_field {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   HERO DRIFT + CLIENT STRIP + REAL WORDMARK
   ========================================================================== */

/* ------------------------------------------------------------- wordmark --- */

.nav_logo {
  display: flex;
  align-items: center;
  color: var(--text);          /* the SVG inherits this via currentColor */
  margin-right: auto;
}
.nav_logo svg { width: auto; height: 22px; display: block; }@media (max-width: 767px) { .nav_logo svg { height: 18px; } }

/* The strip sits on its own band, so it does not need the marquee's own rules. */
.logostrip_wrap .marquee { padding-block: 0; border: 0; }

.logostrip_wrap .marquee_group { gap: var(--space-8); padding-right: var(--space-8); }

/**
 * Client logos: white artwork on a light background.
 *
 * Every mark taken from creatorscorp.gg is a WHITE cutout — that site is
 * dark-themed, so its whole logo set is built for a black background. Measured:
 * average luminance 247-255 across the set. Dropped onto this build's white
 * band they were perfectly invisible, which is exactly what it looked like.
 *
 * brightness(0) forces every opaque pixel to black while leaving alpha intact,
 * so white cutouts become solid black marks. It also flattens any coloured logo
 * to the same weight, which is what keeps a row of borrowed marks reading as one
 * row rather than a ransom note.
 *
 * NOTE: this is a deliberate one-way normalisation. If the studio later supplies
 * full-colour or dark artwork, drop the filter rather than fighting it — and
 * hover should not restore colour here, because "colour" for these files is
 * white on white.
 */
.logostrip_wrap .marquee_item img,
.client_cell img {
  width: auto;
  filter: brightness(0);
  opacity: 0.72;
  transition: opacity 300ms ease;
}
.logostrip_wrap .marquee_item:hover img,
.client_cell:hover img { opacity: 1; }

.logostrip_wrap .marquee_item img { max-height: 2.25rem; }
.client_cell img { max-height: 2.5rem; }

/* ------------------------------------------------------------- showreel --- */

.reel_wrap {
  padding-block: var(--space-10);
  border-bottom: 1px solid var(--contrast);
  background-color: var(--contrast);
}
.reel_wrap .section_title,
.reel_wrap .eyebrow { color: var(--contrast-text); }

.reel_frame {
  border-radius: var(--radius);
  overflow: hidden;
  background-color: #000;
  aspect-ratio: 16 / 9;
}
.reel_video { width: 100%; height: 100%; display: block; object-fit: cover; }
.logostrip_wrap .marquee_item img { max-height: 3.25rem; opacity: 0.78; }
.logostrip_wrap .marquee_group { gap: var(--space-10); padding-right: var(--space-10); }

/* ==========================================================================
   FIRST-LOAD PASS — matching the reference's opening screen.
   ========================================================================== */

/* ------------------------------------------------------------- top bar ---- */

/* The reference's bar has no chrome of its own: it floats on the hero wash,
   with each link as a white pill and the CTA as the only black element. The
   white tint and hairline we had made it a separate strip sitting on top. */
.nav_wrap {
  background-color: transparent;
  border-bottom: 0;
  /* Kept so the bar stays readable once white content scrolls under it —
     the reference switches this with script, which is not on the table. */
  backdrop-filter: blur(10px);
}

/* Three tracks, so the links are centred against the bar rather than against
   whatever is left over after the logo. */
.nav_inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.nav_logo { margin-right: 0; justify-self: start; }

.nav_link,
.nav_dd-toggle {
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background-color: var(--ink);
  white-space: nowrap;
}

.nav_link:hover,
.nav_dd-toggle:hover,
.nav_dd[open] > .nav_dd-toggle {
  border-color: var(--text);
  background-color: var(--ink);
}

/* Current page: the border does the work, not a fill — a black pill here would
   compete with the CTA, which should be the only filled element in the bar. */
.nav_link[aria-current="page"] {
  background-color: var(--ink);
  border-color: var(--text);
  color: var(--text);
}@media (max-width: 991px) {
  .nav_inner { grid-template-columns: 1fr auto; }
}

/* -------------------------------------------------- full-bleed showreel --- */

.reel_wrap {
  padding: 0;
  border: 0;
  background-color: #000;
}

.reel_frame {
  border-radius: 0;
  aspect-ratio: auto;
  height: min(86vh, 940px);
}@media (max-width: 767px) { .reel_frame { height: 60vh; } }

/* Top bar, measured pass.
   The bar was inheriting the 1200px content container, which pulled the logo
   and the CTA in towards the middle — measured 7.1% / 92.9% against the
   reference's 12.5% / 87.7%. The bar is chrome, not content: it should run
   wider than the column the page reads in.
   Pills were 46px tall against their ~38px, from a 1.55 body line-height
   inherited into a control. */
/* Solving for the reference's 12.5% logo inset at a ~1990px window:
   left = (vw - span)/2 + gutter  ->  249 = (1990 - span)/2 + 32  ->  span 1556. */
.nav_inner { max-width: 1560px; }

.nav_link,
.nav_dd-toggle {
  padding: 9px 20px;
  font-size: 15px;
  line-height: 1.2;
  border-color: rgba(0, 0, 0, 0.09);
}

/* The reference pairs both CTAs with an arrow. Pseudo-element rather than
   markup: it is decoration, and it should not land in the accessible name. */
.nav_cta::after { content: "\2192"; }

/* The wordmark is a two-line lockup — name over the location strap — so 22px
   left the strap unreadable. */
.nav_logo svg { height: 28px; }@media (max-width: 767px) { .nav_logo svg { height: 22px; } }

.games_wrap .section_head { margin-bottom: var(--space-5); }
.games_wrap .section_title,
.games_wrap .eyebrow { color: var(--contrast-text); }
.games_wrap .section_lede { color: var(--contrast-muted); }

.gamerow { overflow: hidden; }
.gamerow + .gamerow { margin-top: var(--space-2); }

.gamerow_track {
  display: flex;
  width: max-content;
  animation: cc-marquee var(--marquee-duration, 64s) linear infinite;
}
.gamerow.is-reverse .gamerow_track { animation-direction: reverse; }

/* Stop the row you are pointing at. The other row keeps going, which is what
   makes the pause feel deliberate rather than like the page stalled. */
.gamerow:hover .gamerow_track,
.gamerow:focus-within .gamerow_track { animation-play-state: paused; }

.gamerow_group { display: flex; }

.gamecard {
  position: relative;
  flex: none;
  width: clamp(240px, 25rem, 25rem);
  aspect-ratio: 16 / 9;
  margin-right: var(--space-2);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transform: translateZ(0);
  transition: transform 200ms ease, filter 250ms ease;
}

.gamecard_art { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Gradient so a white title stays readable over any artwork. */
.gamecard_scrim {
  position: absolute; inset: 0;
  background-image: linear-gradient(transparent 45%, rgba(0, 0, 0, 0.85));
}

.gamecard_title {
  position: absolute;
  left: var(--space-3); right: var(--space-3); bottom: var(--space-3);
  color: var(--contrast-text);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.15;
}

/* The blackout: hovering anywhere in the row dims every card... */
.gamerow:hover .gamecard { filter: brightness(0.38); }
/* ...and the one under the cursor is exempt and lifts. */
.gamerow .gamecard:hover {
  filter: none;
  transform: scale(1.05);
  z-index: 2;
}

/* Keyboard parity: the same isolation on focus, so tabbing through the row
   behaves like pointing at it. */
.gamerow:focus-within .gamecard { filter: brightness(0.38); }
.gamerow .gamecard:focus-visible { filter: none; transform: scale(1.05); z-index: 2; }@media (max-width: 767px) {
  .gamecard { width: 17rem; }
  .gamerow:hover .gamecard { filter: none; }
}

/* ==========================================================================
   BUNGEE — nav and hero.

   Phase one of the pivot. The token block above already re-skinned every
   existing component (colours, type scale, fonts); these are the two areas
   whose STRUCTURE differs from the previous reference, not just its palette.
   ========================================================================== */

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------------------------------------------------------- Bungee nav ---- */

.nav_wrap { backdrop-filter: none; }

.nav_inner {
  max-width: none;
  padding-inline: var(--gutter);
  padding-block: var(--space-3);
}

.nav_logo svg { height: 20px; }

/* Numbered links with a rule that draws in on hover, replacing the pill. */
.nav_link,
.nav_dd-toggle {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* The rule is a scaled pseudo-line rather than a border, so it animates from
   the left instead of appearing all at once. */
.nav_link-rule {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-out);
}

.nav_link:hover, .nav_dd-toggle:hover { background: none; border-color: transparent; }@media (max-width: 991px) { .nav_links { display: none; } }

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

.bhero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding-top: 140px;
  background-color: var(--ink);
  overflow: hidden;
}

/* The wordmark runs the full measure — the template's hero is essentially the
   logo used as the headline. cqi would be neater but the parent is not a
   container, so vw with a gutter subtraction does the same job. */
.bhero_line {
  max-width: 22ch;
  margin: var(--space-5) 0 0;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
}



.bhero_place { display: flex; gap: var(--space-3); }
.bhero_social { display: flex; gap: var(--space-3); }

.bhero_social-link {
  color: var(--muted);
  text-decoration: none;
  transition: color 200ms ease;
}
.bhero_social-link:hover { color: var(--text); }

/* Full-bleed media strip along the foot of the hero. Same two-copy marquee as
   everywhere else in this theme. */
.bhero_marquee { width: 100%; overflow: hidden; }

@media (max-width: 767px) {
  .bhero { min-height: auto; padding-top: 110px; }
  .bhero_line { max-width: none; }
  .bhero_meta { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* ==========================================================================
   BUNGEE SECTIONS — measured against the reference, not eyeballed.

   Every number here was read off bungee-pro.webflow.io rendered at 1440x1030
   in the same iframe harness as our page (tools/ref.mjs). Where a value looks
   arbitrary — 826px, 12px 24px, 250px — it is theirs.
   ========================================================================== */

.b-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Their sections are top-light and bottom-heavy: 32px above the heading,
   120px below the content. The symmetrical 140px we had before put 108px of
   dead air above every title. Per-section exceptions carry a modifier. */
.b-section { padding-block: 32px 120px; }
.b-section--about    { padding-block: 120px; }
.b-section--projects { padding-block: 32px 128px; }
.b-section--faq      { padding: 32px 32px 96px; }
.b-section--blog     { padding-block: 32px 48px; }

/* --- type scale, verbatim from their variable collection --- */

.b-h1, .b-h2, .b-h3, .b-h4, .b-h5, .b-h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text);
}
.b-h1 { font-size: var(--text-h1); line-height: 1;   letter-spacing: -0.03em; }
.b-h2 { font-size: var(--text-h2); line-height: 1.1; letter-spacing: -0.02em; }
.b-h3 { font-size: var(--text-h3); line-height: 1.1; letter-spacing: -0.02px; }
.b-h4 { font-size: var(--text-h4); line-height: 1.1; letter-spacing: -0.01em; }
.b-h5 { font-size: var(--text-h5); line-height: 1.2; letter-spacing: -0.01em; }
.b-h6 { font-size: var(--text-h6); line-height: 1.3; letter-spacing: -0.01em; }

.b-p-l { font-size: var(--text-p-l); line-height: 1.5; }
.b-p-m { font-size: var(--text-p-m); line-height: 1.4; }
.b-p-s { font-size: var(--text-p-s); line-height: 1.3; }
.b-medium { font-weight: 500; }
.b-muted { color: var(--muted); }

/* --- section heading rows --- */

/* Title left, action right, bottom-aligned. Their gap to the content below
   varies per section (56 projects, 48 services, 40 blog), so it is set where
   the row is used rather than here. */
.b-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

/* --- buttons --- */

/* Their primary button is text, a 16px plus, and a 1px rule that wipes away on
   hover. 18px/500, 16px gap, 4px above the rule. The plus is drawn rather than
   shipped as an SVG so it inherits colour. */
.b-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 4px;
  font-family: var(--font-display);
  font-size: var(--text-p-l);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.b-btn::before {
  content: "";
  flex: none;
  order: 1;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform 320ms var(--ease-out);
}
.b-btn:hover::before { transform: rotate(90deg); }
.b-btn::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background-color: currentColor;
  transform-origin: left;
  transition: transform 320ms var(--ease-out);
}
.b-btn:hover::after { transform: scaleX(0); transform-origin: right; }

/* The filled variant: black, white text, 12px radius. Used by the newsletter
   submit and the contact form. */
.b-btn-fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 15px 15px;
  border: 0;
  border-radius: 12px;
  background-color: var(--contrast);
  color: var(--contrast-text);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}

/* ---------------------------------------------------------------- about --- */

/* One 650px column, centred: the statement at h3, then an 80px partner-logo
   row that scrolls. The logo row is INSIDE the column, not full-bleed — that
   is what keeps it reading as a caption to the statement rather than a
   separate section. */
.b-about_wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 650px;
  margin-inline: auto;
  text-align: center;
}
.b-about_statement { margin: 0; }

.b-about_partners { position: relative; height: 80px; overflow: hidden; }
.b-about_partners .marquee { height: 100%; }
.b-about_partners .marquee_track { height: 100%; align-items: center; }
.b-about_partners .marquee_group { gap: 80px; padding-right: 80px; align-items: center; }
.b-about_partners .marquee_item { display: flex; align-items: center; }
.b-about_partners .marquee_item img { max-height: 40px; width: auto; filter: brightness(0); }
/* Their fade: white to clear at 12.5% each side. */
.b-about_partners::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(90deg, var(--ink), transparent 12.5%, transparent 87.5%, var(--ink));
}

/* ------------------------------------------------------------- projects --- */

.b-projects_wrap { display: flex; flex-direction: column; gap: 56px; }
.b-projects_title { max-width: 350px; }

/* Two columns, and the row gap (12px) is deliberately half the column gap
   (24px) — the cards stack tighter than they sit apart. */
.b-projects_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
}

.b-project { display: block; color: var(--text); text-decoration: none; }

.b-project_media {
  position: relative;
  height: 750px;
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  overflow: hidden;
}
.b-project_media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-out);
}
.b-project:hover .b-project_media img { transform: scale(1.03); }

/* 12px/500 name left, "_ 07.25" muted right. Their info row is 40px tall. */
.b-project_info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 12px 0 12px 12px;
  font-size: var(--text-p-s);
  font-weight: 500;
  line-height: 1.3;
}
.b-project_name { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.b-project_date { display: flex; gap: 2px; color: var(--muted); }

/* ------------------------------------------------------------- services --- */

.b-services_wrap { display: flex; flex-direction: column; gap: 48px; overflow: hidden; }
.b-services_slider { position: relative; min-width: 0; }
.b-services_arrow {
  position: absolute; top: calc(50% - 25px); z-index: 1;
  display: grid; place-items: center; width: 50px; height: 50px;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--ink); color: var(--text); font-size: var(--text-h5); cursor: pointer;
}
.b-services_arrow--prev { left: 0; }
.b-services_arrow--next { right: 0; }
.b-services_arrow[hidden], .b-services_arrow:disabled { display: none; }
.cc-menu-open { overflow: hidden; }

/* Their services are a slider: 450x500 cards, 12px apart, with a white fade at
   the right edge and arrows driven by script. Ours is the same row with native
   scrolling and scroll-snap — the cards, sizes and fade are identical, the
   arrows are the browser's. The row bleeds to the container's right edge, so
   the fade lands where theirs does. */
.b-services_row {
  display: flex;
  gap: 12px;
  margin-right: calc(-1 * var(--gutter));
  padding-right: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(92deg, #000, #000 87.5%, transparent);
          mask-image: linear-gradient(92deg, #000, #000 87.5%, transparent);
}
.b-services_row::-webkit-scrollbar { display: none; }

.b-service {
  flex: none;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 450px;
  height: 500px;
  padding: 40px;
  border-radius: var(--radius-xl);
  color: var(--text);
  text-decoration: none;
}
/* Four cards, four pastels — theirs, in their order. */
.b-service:nth-child(4n+1) { background-color: #e5daf6; }
.b-service:nth-child(4n+2) { background-color: #cfffb2; }
.b-service:nth-child(4n+3) { background-color: #ffc9c9; }
.b-service:nth-child(4n+4) { background-color: #fedca6; }

.b-service_info { display: flex; flex-direction: column; gap: 10px; max-width: 250px; }
.b-service_logo { display: flex; align-items: center; min-height: 120px; margin-block: 20px; }
.b-service_logo img { display: block; width: 100%; max-width: 240px; height: 120px; object-fit: contain; object-position: left center; }
.b-service_logo--roblox img { max-width: 100px; }
.b-service_logo--meta-horizon img { max-width: 150px; }
.b-service_logo--battlefield-portal img { filter: brightness(0); }
.b-service_name {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0;
  text-transform: uppercase;
}
.b-service_desc { margin: 0; font-size: var(--text-p-m); line-height: 1.4; }

/* -------------------------------------------------------------- metrics --- */

.b-metrics_wrap { display: flex; flex-direction: column; gap: 40px; }
.b-metrics_statement { max-width: 800px; }
.b-metrics_content { display: flex; flex-direction: column; gap: 32px; }

/* Their 880px showreel block: a poster with a play button, 40px radius. Ours
   is a real <video controls> on the same poster — native controls, no script. */
.b-metrics_video {
  position: relative;
  height: 880px;
  border-radius: var(--radius-xl);
  background-color: var(--surface);
  overflow: hidden;
}
.b-metrics_video video { width: 100%; height: 100%; object-fit: cover; display: block; }

.b-metrics_row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.b-metric { display: flex; flex-direction: column; gap: 16px; width: 200px; }

/* 40px value with the unit sitting on its baseline at the same size. */
.b-metric_value {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.b-metric_label { color: var(--muted); font-size: var(--text-p-l); line-height: 1.5; }

/* ---------------------------------------------------------- testimonials -- */

.b-testimonials_wrap { display: flex; flex-direction: column; gap: 32px; }

.b-testimonials_top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 600px;
  margin-inline: auto;
  padding-bottom: 24px;
  text-align: center;
}

.b-testimonials_list { display: flex; flex-direction: column; gap: 32px; }

/* One card per row, image left and copy right, 826px tall on the light-gray
   surface with 32px corners. The image only rounds its outer corners. */
.b-testimonial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  overflow: hidden;
}
.b-testimonial_media { height: 826px; border-radius: var(--radius-lg) 0 0 var(--radius-lg); background-color: var(--line); overflow: hidden; }
.b-testimonial_media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.b-testimonial_body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 56px;
  padding: 56px;
}
.b-testimonial_quote { margin: 0; }
.b-testimonial_author { display: flex; flex-direction: column; gap: 8px; }
.b-testimonial_name { font-weight: 500; }
.b-testimonial_role { color: var(--muted); font-size: var(--text-p-l); line-height: 1.5; }
.b-testimonial_sample { align-self: flex-start; padding: 8px 12px; border: 1px solid var(--line); border-radius: 100px; font-size: 11px; }
.b-testimonial_media--sample { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 48px; background: #e5daf6; isolation: isolate; }
.b-testimonial:nth-child(2) .b-testimonial_media--sample { background: #cfffb2; }
.b-testimonial:nth-child(3) .b-testimonial_media--sample { background: #ffc9c9; }
.b-testimonial_media--sample::before { content: ''; position: absolute; width: 115%; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; left: 20%; top: 18%; opacity: .18; z-index: -1; box-shadow: 0 0 0 50px #ffffff26, 0 0 0 100px #ffffff26; }
.b-testimonial_mark { position: absolute; top: 30px; left: 48px; font-size: 240px; line-height: 1; letter-spacing: -.1em; }
.b-testimonial_initials { font-size: clamp(100px, 15vw, 230px); font-weight: 500; line-height: .9; letter-spacing: -.08em; }
.b-testimonial_demo { margin-top: 32px; }

/* ------------------------------------------------------------------ faq --- */

/* Heading in the left column, questions in the right, capped at 500px. */
.b-faq_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.b-faq_list { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 500px; }

/* <details> rather than a scripted accordion: it opens by click and by keyboard
   with no JS, and every answer is in the HTML whether open or shut, so a
   crawler and an answer engine both read the full text. */
.b-faq_item { width: 100%; }

.b-faq_q, .wp-block-details.b-faq_item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-body);
  line-height: 1.4;
}
.b-faq_q::-webkit-details-marker, .wp-block-details.b-faq_item > summary::-webkit-details-marker { display: none; }

/* Their chevron is a 20px icon. Drawn, so it takes the text colour. */
.b-faq_q::after, .wp-block-details.b-faq_item > summary::after {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  background:
    linear-gradient(currentColor, currentColor) 6px 9px / 8px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 9.25px 6px / 1.5px 8px no-repeat;
  transition: transform 260ms var(--ease-out);
}
.b-faq_item[open] > .b-faq_q::after, .wp-block-details.b-faq_item[open] > summary::after { transform: rotate(45deg); }

.b-faq_a { padding: 16px 0; color: var(--muted); }
.b-faq_a p { margin: 0; }

/* ----------------------------------------------------------------- blog --- */

.b-blog_wrap { display: flex; flex-direction: column; gap: 40px; }
.b-blog_title { max-width: 300px; }

.b-blog_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.b-blogcard {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
}

.b-blogcard_media { height: 500px; border-radius: var(--radius); background-color: var(--surface); overflow: hidden; }
.b-blogcard_media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out); }
.b-blogcard:hover .b-blogcard_media img { transform: scale(1.03); }

.b-blogcard_info { display: flex; flex-direction: column; gap: 8px; padding: 20px 16px; }
.b-blogcard_title {
  max-width: 350px;
  margin: 0;
  font-size: var(--text-h6);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

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

/* On the light-gray surface, 32px all round. A 250px gap separates the upper
   block from the link row — that is the reference's number, and it is what
   gives the footer its air. */
.b-footer { padding: 32px; background-color: var(--surface); }
.b-footer_wrap { display: flex; flex-direction: column; gap: 250px; max-width: calc(var(--container-max) - 2 * var(--gutter)); margin-inline: auto; }

.b-footer_top { display: flex; flex-direction: column; gap: 96px; }

.b-footer_bar { display: flex; align-items: center; justify-content: space-between; }
.b-footer_mark { display: block; color: var(--text); }
.b-footer_mark svg { height: 32px; width: auto; display: block; }

.b-footer_content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.b-footer_text { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 100%; max-width: 450px; }
.b-footer_say { margin: 0; }

/* The address at h4 with a 2px rule under it. */
.b-footer_mail {
  display: block;
  padding: 8px 0 16px;
  border-bottom: 2px solid var(--text);
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}

.b-footer_news { display: flex; flex-direction: column; gap: 23px; width: 100%; max-width: 450px; }
.b-footer_news-top { display: flex; flex-direction: column; gap: 10px; max-width: 350px; }
.b-footer_news-top p { margin: 0; color: var(--muted); }

.b-news_form { display: flex; flex-direction: column; gap: 23px; margin: 0; }
.b-news_field {
  width: 100%;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background-color: transparent;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--text);
}
.b-news_field::placeholder { color: var(--muted); }
.b-news_field:focus { outline: none; border-bottom-color: var(--text); }
.b-news_submit { width: 100%; }

.b-footer_bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.b-footer_links { display: flex; align-items: center; gap: 32px; }
.b-footer_links a {
  color: var(--text);
  font-weight: 500;
  text-decoration: underline transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 350ms ease-in-out;
}
.b-footer_links a:hover { text-decoration-color: var(--text); }
.b-footer_fine { color: var(--muted); }

/* --------------------------------------------------- sections, tablet ---- */

@media (max-width: 991px) {
  .b-section          { padding-block: 32px 80px; }
  .b-section--about   { padding: 96px 0; }
  .b-section--metrics { padding-block: 32px 24px; }
  .b-section--faq     { padding: 32px 24px 96px; }
  .b-section--blog    { padding-block: 32px 48px; }

  .b-projects_wrap, .b-testimonials_wrap { gap: 24px; }
  .b-services_wrap { gap: 32px; }
  /* One column, still 750px tall: their tablet cards are full-width. */
  .b-projects_grid { grid-template-columns: 1fr; }
  .b-metrics_video { height: 600px; }
  /* Metrics stack from here, each row ruled off, 24px inside. */
  .b-metrics_row { flex-direction: column; align-items: stretch; }
  .b-metric { gap: 24px; width: 100%; padding: 24px; border-bottom: 1px solid var(--line); }
  .b-metric:last-child { border-bottom: 0; }
  .b-metric_label { max-width: 200px; }
  .b-testimonial { grid-template-columns: 1fr; }
  .b-testimonial_media { height: 700px; }
  .b-testimonial_body { gap: 40px; max-width: 500px; padding: 48px 56px 80px 24px; }
  .b-testimonials_list { gap: 24px; }
  /* Two blog cards in two columns; the third is not shown at this width. */
  .b-blog_grid { grid-template-columns: 1fr 1fr; }
  .b-blog_grid > :nth-child(3) { display: none; }
  /* 400px is the archive's tablet card; the homepage row keeps 500. */
  .b-blogcard_media { height: 400px; }
  .b-blog_wrap .b-blogcard_media { height: 500px; }
  .b-footer { padding: 24px; }
}

/* ==========================================================================
   BUNGEE INNER PAGES — measured against the reference (tools/ref.mjs).
   ========================================================================== */

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

/* Projects and Blog open the same way: 128px down, a 340px centred stack of
   h1 + one muted 16px line, then 40px to the content. */
.b-pagehero { padding-top: 128px; padding-bottom: 32px; }
.b-pagehero_inner { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.b-pagehero_stack { display: flex; flex-direction: column; align-items: center; gap: 15px; width: 100%; max-width: 340px; }
.b-pagehero_desc { max-width: 340px; margin: 0; font-size: var(--text-body); line-height: 1.4; color: var(--muted); }

/* ------------------------------------------------------------- filters ---- */

/* Ours, not theirs — the reference has no filtering. Rules, not pills. */
.archive_filters { gap: var(--space-4); margin-bottom: var(--space-5); }

.filter_chip {
  padding: 0 0 6px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  background: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--muted);
}
.filter_chip:hover { color: var(--text); border-bottom-color: var(--line); }
.filter_chip[aria-current="page"] { background: none; color: var(--text); border-bottom-color: var(--text); }

/* The archive grid is 24px both ways; only the homepage tightens the rows. */
.b-projects_grid { gap: 24px; }
.b-projects_grid--home { gap: 12px 24px; }

/* Featured blog row: two across, 16px apart, 625px images with square corners
   (the card's own 20px radius still rounds the outside). Titles stay at h6. */
.b-blog_featured { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 16px; }
.b-blog_featured .b-blogcard_media { height: 625px; border-radius: 0; }

/* ------------------------------------------------------- service grid ----- */

/* The platform pages lay the same service card out as a grid rather than a
   row. Ours: the reference has no platform pages. */
.b-services_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.b-services_grid .b-service { width: auto; height: auto; min-height: 500px; }

/* ---------------------------------------------------------------- about --- */

/* A 90vh rounded panel with the statement in white over a looping clip, 80px
   from the top; the partner row 32px under it. */
.b-abouthero { padding-top: 80px; margin-bottom: 32px; }
.b-abouthero_panel {
  position: relative;
  height: 90vh;
  min-height: 600px;
  margin-bottom: 32px;
  border-radius: var(--radius-lg);
  background-color: var(--contrast);
  overflow: hidden;
}
.b-abouthero_panel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-abouthero_content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.b-abouthero_text { width: 100%; max-width: 900px; margin: 0; text-align: center; color: var(--contrast-text); }

/* The studio block: light-gray, 32px corners, 72px padding, and a 286px gap
   between the statement and the four metrics beneath it. */
.b-about_panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 286px;
  padding: 72px;
  border-radius: var(--radius-lg);
  background-color: var(--surface);
}
.b-about_top { display: flex; flex-direction: column; align-items: center; gap: 34px; width: 100%; max-width: 600px; text-align: center; }
.b-about_top svg { height: 58px; width: auto; }
.b-about_top .wp-block-image { margin: 0; }
.b-about_top .wp-block-image img { height: 58px; width: auto; }
.b-abouthero_panel > .wp-block-video { width: 100%; height: 100%; margin: 0; }
.b-about_top h2 { margin: 0; }
.b-about_metrics { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }

/* Centred kicker + h4, the idiom their team and awards blocks use. */
.b-kicker_block { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; max-width: 600px; margin-inline: auto; text-align: center; }
.b-kicker_block h2, .b-kicker_block p { margin: 0; }

/* Team: sticky title on the left, cards stacked on the right. */
.b-section--team { padding-block: 56px 120px; }
.b-team_wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.b-team_title { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 24px; max-width: 400px; }
.b-team_title h2 { margin: 0; }
.b-team_list { display: flex; flex-direction: column; gap: 24px; }
.b-team_card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.b-team_photo { height: 560px; background-color: var(--surface); }
.b-team_photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-team_photo.is-empty { display: flex; align-items: center; justify-content: center; border-bottom: 1px dashed var(--line); }
.b-team_monogram { color: var(--muted); }
.b-team_info { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.b-team_name { font-size: var(--text-p-xl); font-weight: 500; line-height: 1.4; }
.b-team_role { font-size: var(--text-p-m); line-height: 1.4; }

/* Awards / press rows: h5 name left, two small facts right, ruled. */
.b-section--awards { padding-block: 0 32px; }
.b-awards_wrap { display: flex; flex-direction: column; align-items: center; gap: 64px; }
.b-award_list { display: flex; flex-direction: column; width: 100%; }
.b-award {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: 20px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}
.b-award:last-child { border-bottom: 0; }
.b-award_name { font-family: var(--font-display); font-size: var(--text-h5); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.b-award_meta { display: flex; align-items: center; gap: 40px; font-size: var(--text-p-m); line-height: 1.4; }
.b-award_for { color: var(--muted); }

/* -------------------------------------------------------------- contact --- */

/* Their contact page is one bordered block: hero row (kicker + h1 left,
   socials right) ruled off, then the address on the left and the form on the
   right, ruled off again. */
.b-contactpage { padding-top: 104px; }
.b-contact_wrap {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-bottom: 12px;
  padding: 32px 0 64px;
  border-bottom: 1px solid var(--line);
}
.b-contact_hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.b-contact_hero-left { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 576px; }
.b-contact_hero-left h1 { margin: 0; }

.b-contact_content { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.b-contact_left { display: flex; flex-direction: column; gap: 32px; max-width: 450px; }
.b-contact_left p { margin: 0; color: var(--muted); }
.b-contact_mail {
  display: inline-block;
  align-self: flex-start;
  padding: 8px 0 16px;
  border-bottom: 2px solid var(--text);
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}

.b-contact_form-wrap { display: flex; flex-direction: column; gap: 32px; width: 100%; max-width: 500px; }
.b-contact_form-wrap h2 { margin: 0; }

.b-form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.b-form > div { display: flex; flex-direction: column; gap: 8px; }
.b-form label { font-size: var(--text-p-s); line-height: 1.3; color: var(--muted); }

/* 48px fields, 10px corners, 1px border, 16px text. */
.b-form input[type="text"],
.b-form input[type="email"],
.b-form select,
.b-form textarea {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background-color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--text);
}
.b-form input::placeholder, .b-form textarea::placeholder { color: var(--muted); }
.b-form textarea { height: 116px; padding-top: 16px; resize: vertical; }
.b-form input:focus, .b-form select:focus, .b-form textarea:focus { outline: none; border-color: var(--text); }
.b-form [aria-invalid="true"] { border-color: #c0392b; }

/* SEND: full width, 52px, black, 12px corners, uppercase. */
.b-form_submit {
  width: 100%;
  height: 52px;
  padding: 0 15px;
  border: 0;
  border-radius: 12px;
  background-color: var(--contrast);
  color: var(--contrast-text);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 350ms ease-in-out;
}
.b-form_submit:hover { background-color: rgba(30, 30, 30, 0.85); }

.form_summary { padding: 16px; border: 1px solid #c0392b; border-radius: 10px; }
.form_summary ul { margin: 8px 0 0; padding-left: 20px; }
.form_summary a { color: var(--text); }
.form_success { padding: 24px; border-radius: var(--radius); background-color: var(--surface); }
.form_success p { margin: 8px 0 0; color: var(--muted); }
.field_error { font-size: var(--text-p-s); color: #c0392b; }
.hp_field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------- case study ------- */

/* Sticky facts column on the left (452px, 120px down), content on the right,
   72px between. */
.b-work { padding-bottom: 64px; }
.b-work_wrap { display: flex; align-items: flex-start; gap: 72px; }

.b-work_info {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 452px;
  padding-top: 120px;
}
.b-work_title { margin: 0; text-transform: uppercase; }
.b-work_details { display: flex; flex-direction: column; gap: 40px; }
.b-work_summary { max-width: 410px; margin: 0; font-size: var(--text-p-l); line-height: 1.5; color: var(--muted); }

.b-work_facts { display: flex; flex-direction: column; gap: 12px; }
.b-fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.b-fact_k { font-size: var(--text-p-s); line-height: 1.3; }
.b-fact_v { font-size: var(--text-p-m); line-height: 1.4; }
.b-fact_v a { position: relative; display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.b-fact_v a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background-color: currentColor; }

.b-work_content { width: 100%; padding: 120px 0 32px; }
.b-work_media { height: 995px; border-radius: 12px; background-color: var(--surface); overflow: hidden; }
.b-work_media img, .b-work_media video { width: 100%; height: 100%; object-fit: cover; display: block; }

.b-work_body { display: flex; flex-direction: column; gap: 24px; padding: 56px 0; }
.b-work_lead { margin: 0; }
.b-work_rich { max-width: 550px; color: var(--muted); font-size: var(--text-p-l); line-height: 1.5; }
.b-work_rich > *:first-child { margin-top: 0; }
.b-work_rich p { margin: 0 0 1em; }
.b-work_rich h2, .b-work_rich h3 { margin: 1.5em 0 0.5em; font-family: var(--font-display); font-size: var(--text-h5); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--text); }
.b-work_rich a { color: var(--text); text-underline-offset: 3px; }
.b-work_rich img { display: block; width: 100%; height: auto; margin-block: 24px; border-radius: 12px; }
/* Style the first paragraph in place: keep IDs, links and document structure intact. */
.b-work_rich--lead { max-width: none; }
.b-work_rich--lead > * { max-width: 550px; }
.b-work_rich--lead > p:first-child {
  max-width: none;
  margin: 0 0 24px;
  color: var(--text);
  font-size: var(--text-h5);
  font-weight: 500;
  line-height: 1.2;
}

.b-work_gallery { display: flex; flex-direction: column; gap: 24px; }

/* More projects: h2 then two cards at 550px with 12px corners, 16px apart. */
.b-projects_grid--more { gap: 16px; }
.b-projects_grid--more .b-project_media { height: 550px; border-radius: 12px; }
.b-section--more { padding-block: 64px 0; }
.b-more_wrap { display: flex; flex-direction: column; gap: 48px; }
.b-more_wrap h2 { margin: 0; }

/* Have a project in mind? — centred, 400px, black filled button. */
.b-cta { padding-block: 96px; }
.b-cta_wrap { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; max-width: 400px; margin-inline: auto; text-align: center; }
.b-cta_title { display: flex; flex-direction: column; gap: 14px; }
.b-cta_title h2, .b-cta_title p { margin: 0; }
.b-cta_desc { color: var(--contrast-muted); }
.b-btn-fill--cta { padding: 16px; font-size: var(--text-p-l); line-height: 1.3; letter-spacing: -0.02em; }
.b-btn-fill--cta::after {
  content: "";
  width: 16px; height: 16px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
}

/* ------------------------------------------------------------ article ----- */

/* Date and title centred at 900px, a 725px image, the body at 800px. */
.b-post { padding-top: 120px; }
.b-post_wrap { display: flex; flex-direction: column; gap: 24px; }
.b-post_top { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 900px; margin-inline: auto; padding: 16px 0 32px; text-align: center; }
.b-post_top h1 { margin: 0; }
.b-post_meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
.b-post_meta a { color: inherit; }
.b-post_media { height: 725px; border-radius: var(--radius-lg); background-color: var(--surface); overflow: hidden; }
.b-post_media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.b-post_body { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 800px; margin-inline: auto; padding: 56px 0 24px; }
.b-post_rich { color: var(--text); }
.b-post_rich > *:first-child { margin-top: 0; }
.b-post_rich p { margin: 0 0 1.4em; }
.b-post_rich h2 { margin: 2em 0 0.6em; font-family: var(--font-display); font-size: var(--text-h4); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; }
.b-post_rich h3 { margin: 1.6em 0 0.5em; font-family: var(--font-display); font-size: var(--text-h5); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.b-post_rich a { color: var(--text); text-underline-offset: 3px; }
.b-post_rich img, .b-post_rich figure { display: block; width: 100%; max-width: 100%; height: auto; margin: 40px 0; }
.b-post_rich figure img { margin: 0; }
.b-post_rich blockquote { margin: 40px 0; padding-left: 24px; border-left: 2px solid var(--text); font-family: var(--font-display); font-size: var(--text-h5); line-height: 1.3; }
.b-post_rich ul, .b-post_rich ol { margin: 0 0 1.4em; padding-left: 1.4em; }

/* Previous / Next: two bordered white buttons, centred. */
.b-prevnext { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; padding: 20px 0; }
.b-prevnext a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background-color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-p-l);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: background-color 200ms ease;
}
.b-prevnext a:hover { background-color: var(--surface); }
.b-prevnext a::before, .b-prevnext a::after { width: 20px; height: 20px; flex: none; }
.b-prevnext_prev::before { content: ""; background:
  linear-gradient(currentColor, currentColor) 6px 9.25px / 9px 1.5px no-repeat,
  linear-gradient(currentColor, currentColor) 6px 6.5px / 1.5px 6.5px no-repeat,
  linear-gradient(currentColor, currentColor) 6px 6.5px / 6.5px 1.5px no-repeat;
  transform: rotate(-45deg); }
.b-prevnext_next::after { content: ""; background:
  linear-gradient(currentColor, currentColor) 5px 9.25px / 9px 1.5px no-repeat,
  linear-gradient(currentColor, currentColor) 12.5px 6.5px / 1.5px 6.5px no-repeat,
  linear-gradient(currentColor, currentColor) 7.5px 6.5px / 6.5px 1.5px no-repeat;
  transform: rotate(45deg); }

/* ------------------------------------------------------------ pagination -- */

.pagination { display: flex; gap: var(--space-2); margin-top: var(--space-8); }
.pagination .page-numbers {
  min-width: auto; height: auto; padding: 0 0 4px;
  border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  font-family: var(--font-display); font-size: 1rem; font-weight: 500;
  color: var(--muted);
}
.pagination .page-numbers:hover { color: var(--text); border-bottom-color: var(--line); }
.pagination .page-numbers.current { background: none; color: var(--text); border-bottom-color: var(--text); }

/* ------------------------------------------------- inner pages, tablet ---- */

@media (max-width: 991px) {
  .b-services_grid { grid-template-columns: repeat(2, 1fr); }
  .b-abouthero_panel { height: 700px; min-height: 0; margin-bottom: 40px; }
  .b-about_panel { gap: 24px; padding: 56px 0 16px; }
  .b-about_metrics { grid-template-columns: 1fr; }
  .b-about_metrics .b-metric { gap: 24px; width: 100%; padding: 24px; border-bottom: 1px solid var(--line); }
  .b-about_metrics .b-metric:last-child { border-bottom: 0; }
  .b-section--awards { padding: 0 0 40px; }
  .b-team_wrap { grid-template-columns: 1fr; gap: 24px; }
  .b-team_title { position: static; }
  .b-team_photo { height: 460px; }
  .b-awards_wrap { gap: 40px; }
  .b-contact_wrap { padding: 24px 0 40px; gap: 24px; }
  .b-contact_hero { flex-direction: column; align-items: flex-start; }
  .b-contact_content { flex-direction: column; gap: 40px; }
  .b-contact_form-wrap { max-width: 100%; }
  .b-work_wrap { flex-direction: column; gap: 24px; }
  .b-work_info { position: relative; max-width: 100%; }
  .b-work_content { padding-top: 0; }
  .b-work_media { height: 420px; }
  .b-work_summary { max-width: 100%; }
  .b-post_media { height: 486px; }
  .b-post_body { padding-top: 0; }
  .b-blog_featured { grid-template-columns: 1fr; }
  .b-blog_featured .b-blogcard_media { height: 400px; }
}

@media (max-width: 767px) {
  .b-services_grid { grid-template-columns: 1fr; }
  .b-abouthero { padding-top: 84px; }
  .b-abouthero_panel { height: 600px; margin-bottom: 32px; }
  .b-about_panel { padding: 40px 24px 24px; }
  .b-about_metrics .b-metric { padding: 16px; }
  .b-projects_grid--more .b-project_media { height: 350px; }
  .b-award { flex-direction: column; align-items: flex-start; gap: 16px; }
  .b-award_meta { justify-content: space-between; width: 100%; }
  .b-work { padding-bottom: 0; }
  .b-work_body { gap: 16px; padding: 40px 16px; }
  .b-work_facts { gap: 16px; }
  .b-post { padding-top: 100px; }
  .b-post_top { padding-bottom: 0; }
  .b-post_media { height: 350px; }
  .b-prevnext { flex-direction: row; }
  .b-blog_featured .b-blogcard_media { height: 320px; }
  .b-team_photo { height: 360px; }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

/* ---------------------------------------------------- overflow guards ----- */

/* Grid and flex children default to min-width:auto, which means they refuse to
   shrink below their content's intrinsic minimum. Measured: the footer's
   newsletter row forced its grid column to 389px inside a 335px grid, pushing
   every page 34px wider than the viewport. An <input>'s intrinsic minimum is
   its default character size, which no amount of `width:100%` overrides.
   Explicit min-width:0 is the fix, and it belongs on every track we create. */
.b-projects_grid > *,
.b-services_grid > *,
.b-services_row > *,
.b-blog_grid > *,
.b-blog_featured > *,
.b-testimonial > *,
.b-faq_grid > *,
.b-about_metrics > *,
.b-team_wrap > *,
.b-work_wrap > *,
.b-contact_content > *,
.b-footer_content > *,
.b-pagehero_inner > *,
.b-metrics_row > *,
.b-award > * { min-width: 0; }

/* Belt and braces: nothing should be able to widen the page horizontally. */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }

/* ------------------------------------------------------- mobile menu ------ */

/* Hidden above the breakpoint, where the desktop bar is shown instead. Only
   one of the two is ever displayed, so only one is in the accessibility tree. */
.nav_m { display: none; }

.nav_m-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}
.nav_m-toggle::-webkit-details-marker { display: none; }

/* Two bars that become a cross when the sheet is open. */
.nav_m-bars {
  position: relative;
  width: 22px; height: 12px;
  flex: none;
}
.nav_m-bars::before,
.nav_m-bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background-color: currentColor;
  transition: transform 260ms var(--ease-out), top 260ms var(--ease-out);
}
.nav_m-bars::before { top: 0; }
.nav_m-bars::after  { top: 10px; }

/* The sheet covers the page under the bar. position:fixed rather than a tall
   absolute block so the page behind cannot be scrolled into a confusing state
   while it is open. */
.nav_m-sheet {
  position: fixed;
  inset: 76px 0 0 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-5) var(--gutter) var(--space-8);
  background-color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav_m-links { display: flex; flex-direction: column; }

.nav_m-link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}
.nav_m-link .mono { color: var(--muted); }
.nav_m-link[aria-current="page"] .mono { color: var(--text); }

.nav_m-foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.nav_m-foot .mono { color: var(--muted); text-decoration: none; }

@media (max-width: 991px) {
  .nav_m { display: block; }
  /* The bar's own CTA would duplicate the one inside the sheet. */
  .nav_wrap .nav_inner > .nav_cta { display: none; }
  .nav_inner { grid-template-columns: 1fr auto; }
}

/* ------------------------------------------------------- hero on mobile --- */







/* ---------------------------------------------------- sections on mobile -- */

@media (max-width: 767px) {
  .b-section, .b-section--projects, .b-section--blog { padding-block: 32px; }
  .b-blog_grid > :nth-child(3) { display: block; }
  .b-faq_grid { grid-template-columns: 1fr; gap: 24px; }
  .b-faq_list { max-width: 100%; }
  .b-footer_wrap { gap: 134px; }
  .b-footer_content { flex-direction: column; gap: 72px; }
  .b-footer_bottom { flex-direction: column; align-items: flex-start; }
  .b-footer_links { flex-wrap: wrap; gap: 24px 32px; }
  .b-section--about   { padding: 32px 0; }
  .b-h2 { line-height: 40px; }
  /* Their dispatch title is set with a fixed 4.38rem, not the h1 token, so it
     does not shrink with the rest. */
  .b-blog_title h2 { font-size: 4.38rem; line-height: 1; }
  .b-section--metrics { padding-block: 48px 16px; }
  .b-section--testimonials { padding-block: 32px 40px; }
  .b-section--faq     { padding: 32px 0; }
  .b-section--team    { padding: 0; }
  .b-section--awards  { padding: 0 0 32px; }
  .b-section--more    { padding: 64px 0 0; }
  .b-pagehero { padding: 100px 0 40px; }
  .b-pagehero_inner { gap: 24px; }
  .archive_filters { margin-bottom: 24px; }

  .b-top { align-items: flex-start; flex-direction: column; }

  /* Their phone values, not a vw guess. */
  .b-project_media { height: 350px; }
  .b-projects_grid { grid-template-columns: 1fr; }
  .b-blog_grid { grid-template-columns: 1fr; }
  .b-blogcard_media { height: 320px; }

  /* One card fills the container; the next peeks in from the right. */
  .b-service { width: 100%; }
  .b-metrics_video { height: 494px; }

  .b-metric { gap: 16px; padding: 16px; }

  .b-team_grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); }

  .b-testimonial { padding-bottom: 24px; }
  .b-testimonial_media { height: 400px; }
  .b-testimonial_body { max-width: 100%; padding: 32px 16px 40px; }
  .b-testimonials_top { padding: 20px 16px; gap: 16px; }
  .b-about_wrap { gap: 16px; padding: 20px 16px; }

  /* Filters scroll rather than wrapping to three ragged lines. */
  .archive_filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-3);
    padding-bottom: var(--space-1);
    scrollbar-width: none;
  }
  .archive_filters::-webkit-scrollbar { display: none; }
  .filter_chip { flex: none; }

  .b-prevnext { flex-direction: column; gap: var(--space-3); }
  .b-prevnext_next { text-align: left; margin-left: 0; }

  .b-footer { padding: 24px 16px 16px; }
}

/* --------------------------------------------------------- tap targets --- */

/* Small mono links sit well below the 44px comfortable minimum otherwise. */
@media (pointer: coarse) {
  .bhero_social-link,
  .b-footer_links a,
  .nav_m-foot .mono { padding-block: 6px; }
}

/* Measured at 375px: the sheet's CTA came out 38px tall and the mail link 34px,
   both under the 44px comfortable minimum for a thumb. */
.nav_m-foot .nav_cta,
.nav_m-foot .mono {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/**
 * The sheet hangs off the bar rather than off a constant.
 *
 * Measured: the bar is 89px, and every hard-coded offset I tried (76px, then
 * 68px) left the sheet overlapping it. Positioning the sheet absolutely against
 * .nav_wrap and starting it at top:100% means it begins exactly at the bar's
 * bottom edge whatever that height turns out to be — including after a font or
 * padding change nobody remembers to mirror here.
 *
 * The percentage in the max-height calc resolves against the same containing
 * block, so the sheet is always "the rest of the screen".
 */
.nav_m-sheet {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  inset-block-end: auto;
  max-height: calc(100dvh - 100%);
}

/* ==========================================================================
   NAV + HERO, second pass — measured against the reference rather than
   eyeballed. Numbers below are theirs.
   ========================================================================== */

/* ------------------------------------------------------------------ nav --- */

/* Their bar: 80px tall, fixed, translucent white with a blur, nothing in it but
   a 24px mark and a plus. */
/**
 * The bar's blur lives on a pseudo-element, not on the bar itself.
 *
 * backdrop-filter creates a containing block for fixed-position descendants.
 * With it on .nav_wrap, the full-screen menu panel inside was being trapped
 * inside the 80px bar — `inset: 0` resolved to the bar's box, not the
 * viewport, so the overlay never covered the page. Moving the effect to
 * ::before keeps the look and leaves the panel free to escape.
 */
.nav_wrap {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 80px;
  padding-block: 16px;
  background-color: transparent;
  border-bottom: 0;
}

.nav_wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
}

/* position:relative is enough to sit above the blur layer, and unlike a filter
   it does not create a containing block for the fixed panel. */
.nav_inner { position: relative; z-index: 1; }

.nav_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: none;
  height: 100%;
  padding-inline: var(--gutter);
  padding-block: 0;
}

.nav_logo { z-index: 5; display: block; margin: 0; }
.nav_logo svg { height: 18px; width: auto; display: block; }

/* --- the plus toggle --- */

.nav_menu { position: static; }

.nav_toggle {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  cursor: pointer;
  list-style: none;
  color: var(--text);
}
.nav_toggle::-webkit-details-marker { display: none; }

/* Two strokes crossing; the vertical one rotates away to make a minus, then the
   pair reads as a cross when open. */
.nav_toggle-plus { position: relative; width: 22px; height: 22px; }
.nav_toggle-plus::before,
.nav_toggle-plus::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background-color: currentColor;
  transition: transform 320ms var(--ease-out);
}
.nav_toggle-plus::after { transform: rotate(90deg); }
.nav_menu[open] .nav_toggle-plus::before { transform: rotate(45deg); }
.nav_menu[open] .nav_toggle-plus::after  { transform: rotate(-45deg); }

/* --- the full-screen panel --- */

.nav_panel {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  padding: 160px var(--gutter) 48px;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav_panel-links { display: flex; flex-direction: column; gap: 10px; }

/* Their menu links are set at h2 — the menu is the page while it is open. */
.nav_panel-link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  width: fit-content;
  padding-bottom: 6px;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}

.nav_panel-num { font-size: var(--text-label); color: var(--muted); }

.nav_panel-rule {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-out);
}
.nav_panel-link:hover .nav_panel-rule,
.nav_panel-link:focus-visible .nav_panel-rule,
.nav_panel-link[aria-current="page"] .nav_panel-rule { transform: scaleX(1); }

.nav_panel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.nav_panel-mail {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}
.nav_panel-social { display: flex; gap: var(--space-3); }
.nav_panel-social a { color: var(--muted); text-decoration: none; }
.nav_panel-social a:hover { color: var(--text); }

@media (max-width: 767px) {
  .nav_panel { padding-top: 120px; gap: var(--space-6); }
  .nav_panel-link { font-size: 2.25rem; gap: var(--space-2); }
  .nav_panel-mail { font-size: 1.35rem; }
}

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

/* Theirs: a full viewport, content pushed to the top and bottom edges. */
.bhero {
  display: flex;
  height: auto;
  min-height: 100svh;
  padding-top: 105px;
  padding-bottom: 32px;
  background-color: var(--ink);
  overflow: hidden;
}

.bhero_wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: auto;
  min-height: calc(100svh - 137px);
  flex: 1;
  gap: 24px;
}

/* --- top: centred wordmark and one line --- */

.bhero_top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 48px var(--gutter) 0;
  text-align: center;
}

/* Match Bungee's 704px logo area while preserving the studio SVG's aspect ratio. */
.bhero_mark {
  margin: 0;
  width: 100%;
  max-width: 704px;
  aspect-ratio: 284 / 76;
  display: flex;
  align-items: center;
}
.bhero_mark img { display: block; width: 100%; height: auto; }


/* Theirs is set at h5 — 1.5rem — not body size. Measured at 24px against our
   18px, which is a large part of why the two heroes read differently.
   The measure is wide enough to keep our line unwrapped: theirs is 31
   characters and sits on one line, ours is 51, and at 34ch it was wrapping to
   two — which pushed everything below it down by another 29px. */
.bhero_line {
  max-width: 52ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* --- bottom: rotated place tag, socials right, media strip --- */

.bhero_bottom { display: flex; flex-direction: column; gap: 34px; }

.bhero_meta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline: var(--gutter);
}

/* Rotated onto the left margin. Their offset is -45px from the top of this
   row with a -90deg turn. */
.bhero_place {
  position: absolute;
  top: -45px;
  left: 0;
  transform: rotate(-90deg);
  transform-origin: center;
  white-space: nowrap;
  color: var(--text);
}

.bhero_social { display: flex; align-items: center; gap: 12px; }
.bhero_sep { color: var(--muted); }
.bhero_social-link { color: var(--text); text-decoration: none; }
.bhero_social-link:hover { color: var(--muted); }
.bhero_meta .mono { line-height: 1.22; }

/* --- media strip --- */

.bhero_marquee { position: relative; height: 520px; overflow: hidden; }

.bhero_marquee-track {
  display: flex;
  width: max-content;
  height: 100%;
  /* Duration is set per-page from the tile count so the strip always travels
     at the same speed no matter how many tiles are in the reel. */
  animation: cc-hero-marquee var(--marquee-dur, 30s) linear infinite;
}
/* Travel exactly one group, independently of the number of coverage copies. */
@keyframes cc-hero-marquee {
  to { transform: translate3d(calc(-1 * var(--reel-width)), 0, 0); }
}
/* Keep each moving strip on its own GPU layer while it runs, and keep its repaints inside it. */
.bhero_marquee-track.cc-motion-active,
.marquee_track.cc-motion-active,
.gamerow_track.cc-motion-active { will-change: transform; backface-visibility: hidden; }
.bhero_marquee, .marquee, .gamerow { contain: paint; }
.bhero_marquee:hover .bhero_marquee-track { animation-play-state: paused; }

/* Still on first paint and without JS; only visible tracks opt in after load. */
.bhero_marquee-track:not(.cc-motion-active),
.marquee_track:not(.cc-motion-active),
.gamerow_track:not(.cc-motion-active) { animation-play-state: paused; }
.bhero_motion-controls { display: flex; justify-content: flex-end; min-height: 38px; padding-inline: var(--gutter); }
.cc-motion-toggle { border: 1px solid currentColor; border-radius: 999px; padding: 8px 16px; background: transparent; cursor: pointer; }
.cc-motion-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.bhero_marquee-group { display: flex; gap: 10px; padding-right: 10px; }

/* The distinctive shape: rounded on one diagonal only, 80px, so the tiles read
   as leaves rather than as cards. */
/**
 * The tiles alternate their rounded diagonal.
 *
 * Their markup carries two variants — .hero-item-single at 80px 0px and
 * .hero-item-single.v2 at 0px 80px — so consecutive tiles mirror each other.
 * That alternation is what makes the strip read as a row of arches; every tile
 * leaning the same way, as ours did, reads as a slant instead.
 *
 * Setting only two corners also left the other two inheriting the theme's 20px
 * --radius, which rounded them slightly and blunted the shape. All four corners
 * are now stated explicitly.
 */
.bhero_tile {
  flex: none;
  width: 181px;
  height: 100%;
  border-radius: 80px 0 80px 0;
  background-color: var(--surface);
  overflow: hidden;
}
.bhero_tile:nth-child(even) { border-radius: 0 80px 0 80px; }
.bhero_tile img,
.bhero_tile video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fades the strip into the page at both edges instead of letting the viewport
   slice a tile in half. */
.bhero_marquee-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg,
    var(--ink), var(--ink) 2.5%, transparent 12.5%,
    transparent 87.5%, var(--ink) 97.5%, var(--ink));
}

@media (max-width: 991px) {
  /* Height auto and 24px of padding, under the 80px fixed bar. Their bar
     overlaps the hero at this width too; the 48px of top-block padding is what
     clears it. */
  .bhero { height: auto; min-height: 0; padding: 24px 0; }
  .bhero_wrap { min-height: 0; gap: 224px; padding-top: 48px; }
  .bhero_bottom { gap: 48px; }
  .bhero_meta { flex-direction: row; justify-content: flex-end; align-items: center; gap: 0; }
  /* Rotated up from the row's bottom-left corner, 8px in from the gutter. */
  /* Rotating about the bottom-left corner swings the box one line-height to the left, so that is added back: theirs sits 9px in from the gutter. */
  .bhero_place { top: -45px; bottom: 45px; left: -8px; }
}

@media (max-width: 767px) {
  .bhero { padding: 16px 0; }
  .bhero_wrap { gap: 168px; padding-top: 64px; }
  .bhero_bottom { gap: 50px; }
  /* The tagline stays at h5, the place tag stays rotated, the strip stays
     520px with 181px tiles: measured, that is what they ship on a phone. */
}


/* ==========================================================================
   INNER PAGE HERO — ported from the reference's projects hero.
   Theirs: padding-top 128px, a centred stack, 20px between the stack and the
   action, 15px between title and description.
   ========================================================================== */

/**
 * Fit-to-width, per title.
 *
 * The reference can use one fixed size because every heading it has is short.
 * Ours run from "Press." to "Branded Roblox experience development", so a
 * fixed size either shrinks the short ones to nothing or wraps the long ones
 * into a paragraph.
 *
 * Dividing the available measure by the character count gives each title the
 * largest size it can take on one line. 1.85 is the reciprocal of the average
 * advance width for Inter 500 at this tracking, measured rather than guessed;
 * the 4.38rem ceiling is the reference's own h1 size, so a short title lands
 * exactly where theirs does instead of ballooning past it.
 */
.b-pagehero_title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-display);
  /* clamp, not min: the formula sizes a title to fit on ONE line, but the
     element is allowed to wrap, so without a floor a long heading shrinks
     instead of wrapping. Measured: "Branded worlds and games on Roblox" came
     out at 18px on a phone — smaller than the body text under it. The floor
     lets long titles wrap at a readable size; the ceiling is the reference's
     own h1, so short ones land exactly where theirs do. */
  font-size: clamp( 2.25rem, calc((100vw - 4rem) / var(--chars, 12) * 1.85), 4.38rem );
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
}


@media (max-width: 767px) {
  /* The fit-to-width sizing is a desktop concern. On the phone the reference
     sets every h1 at a flat 3rem in a 340px column and lets it wrap, and a
     four-line title at 48px reads better than a one-line one at 24. */
  .b-pagehero_title { max-width: 340px; font-size: var(--text-h1); }
}

/* An in-page anchor must clear the fixed 80px bar, or the jump lands with the
   target hidden underneath it. */
[id="enquiry"] { scroll-margin-top: 100px; }

/* The hero action measured 33px tall — fine for a mouse, under the comfortable
   minimum for a thumb. */
@media (pointer: coarse) {
  .b-btn { min-height: 44px; align-items: center; }
}
/* Native editor blocks retain the existing presentation classes. */
.wp-block-group p.mono, .wp-block-group p.b-metric_value, .wp-block-group p.b-metric_label,
.wp-block-group p.b-team_name, .wp-block-group p.b-team_role { margin: 0; }
.cc-no-top-padding { padding-top: 0; }
.cc-about-panel-spacing { padding-block: 0 32px; }
.cc-about-kicker-spacing { padding-block: 56px 32px; }
.wp-block-post-title.b-abouthero_text { margin: 0; }