/* lab42-child late overrides.
 *
 * Loaded AFTER components.css so operator-supplied production token values win
 * over the `:root` block at the top of components.css (which carries the
 * styles.css defaults captured at task 001 discovery).
 *
 * Source: operator-pasted production CSS variables in run r-7kccam.
 */

:root {
    --colorPrimary: #3a3e49;
    --colorPrimaryActive: #2a2c34;
    --colorSecondary: #f05439;
    --notificationBackgroundColor: #fff;
    --notificationColor: #f05439;
    --navColorInvertedActive: #f05439;
    --headerGroupNavigationBackgroundColor: #2a2c34;
    --richNavigationColorInverted: #2a2c34;
    --headerInvertedMobileBackgroundColor: #272930;
    --navBorderColor: #00000024;
    --richNavigationItemWidth: max-content;
    --colorButtonLabel: #ffffff;
    /* In inverted contexts (dark sections) the filled secondary button is a
       white pill with dark text; use the new primary colour for that label. */
    --colorButtonLabelInverted: #3a3e49;
}

/* Hero CTA "JOIN THE LAB42 TEAM" is btn--secondary on live; secondary is now
   correctly orange so this targeted override sticks. */
.hero .btn.btn--secondary {
    color: #ffffff;
    background-color: var(--colorSecondary);
    border-color: var(--colorSecondary);
}
.hero .btn.btn--secondary:hover {
    color: #ffffff;
    background-color: var(--colorPrimary);
    border-color: var(--colorPrimary);
}

/* Outline buttons: transparent fill with orange outline + orange text on
   light backgrounds; orange outline + white text on dark / inverted backgrounds. */
.btn--outline.btn--secondary,
.btn--outline.btn--primary {
    color: var(--colorSecondary);
    border-color: var(--colorSecondary);
    background-color: transparent;
}
.btn--outline.btn--secondary:hover,
.btn--outline.btn--primary:hover {
    background-color: var(--colorSecondary);
    color: #ffffff;
}
/* Inverted-context outline buttons keep the orange border but use white text
   so they stay readable against a dark section background. */
.hero--inverted .btn--outline.btn--secondary,
.section--inverted .btn--outline.btn--secondary,
.hero--inverted .btn--outline.btn--primary,
.section--inverted .btn--outline.btn--primary,
.card--inverted .btn--outline.btn--secondary,
.card--inverted .btn--outline.btn--primary {
    color: #ffffff;
    border-color: var(--colorSecondary);
    background-color: transparent;
}
.hero--inverted .btn--outline.btn--secondary:hover,
.section--inverted .btn--outline.btn--secondary:hover,
.hero--inverted .btn--outline.btn--primary:hover,
.section--inverted .btn--outline.btn--primary:hover,
.card--inverted .btn--outline.btn--secondary:hover,
.card--inverted .btn--outline.btn--primary:hover {
    background-color: var(--colorSecondary);
    color: #ffffff;
}

/* Filled btn--primary on light backgrounds: dark grey-blue pill with white
   text (the live brand primary). */
.btn.btn--primary:not(.btn--outline) {
    color: #ffffff;
    background-color: var(--colorPrimary);
    border-color: var(--colorPrimary);
}
.btn.btn--primary:not(.btn--outline):hover {
    background-color: var(--colorSecondary);
    border-color: var(--colorSecondary);
}

/* SVG arrow inside any button: inherit the button's text colour. The base
   components.css uses fill: var(--colorButtonLabel) which is white; that
   wins on filled buttons but breaks on outline buttons where the text is
   coloured. Force the SVG to inherit. */
.btn svg path {
    fill: currentColor;
}

/* Heading colour overrides inside inverted contexts (Divi customizer injects
   inline `h1 { color: rgb(51,51,51) }` that beats parent inheritance, so we
   force colorTextInverted with !important for every nested heading). */
.hero--inverted h1, .hero--inverted h2, .hero--inverted h3, .hero--inverted h4,
.section--inverted h1, .section--inverted h2, .section--inverted h3, .section--inverted h4,
.footer--inverted h1, .footer--inverted h2, .footer--inverted h3, .footer--inverted h4,
.header--inverted h1, .header--inverted h2, .header--inverted h3, .header--inverted h4,
.card--inverted h1, .card--inverted h2, .card--inverted h3, .card--inverted h4 {
    color: var(--colorTextInverted) !important;
}

/* Footer headings on the light footer background: dark grey. */
.footer h2, .footer h3, .footer h4 {
    color: var(--colorTextDefault);
}

/* Non-home header dark-grey background. Matched to live's real per-page
   --headerBackgroundColor (confirmed #3a3e49 on inner pages, e.g. /games) — the
   prior #292929 was an unverified guess from before this value was checked. */
body:not(.home) .header.header--inverted,
.header.header--solid {
    background-color: #3a3e49;
}
body:not(.home) .header.header--inverted .nav__items a,
.header.header--solid .nav__items a {
    color: var(--colorTextInverted);
}

/* Footer accreditation logos: render at native dimensions (matches prod).
   The earlier `max-height: 80px` cap shrank 7 of the 10 badges on staging
   (e.g. 144x144 -> 80x80) and broke the 4+3+3 wrap order. Prod displays
   each badge at its intrinsic PNG size; the components.css default of
   `margin: 3.2rem 3.2rem 3.2rem 0` provides the gap between them. We
   override only the margin to drop the top gap on desktop (so the row
   above doesn't get pushed down) — components.css already does this at
   min-width: 64em, but we're explicit here. */
.footer .image--link img {
    max-height: none;
    width: auto;
    height: auto;
}

/* ====================================================================
   Lab42 home page: native Divi modules styled to mirror BEM look (run
   r-fw49ie). Five of eight homepage sections are now native Divi modules:
   stats blurbs, about-copy text + buttons, dividers, games heading + button,
   team-quote text + button. The CSS below makes Divi's defaults render
   like the original BEM components.
   ==================================================================== */

/* Stats tiles: 4-up grid of white cards with big number + uppercase label.
   Mirrors `.tiles--four-cols .tiles__item` from the imported BEM. */
.lab42-stat-tile {
    background: #ffffff !important;
    padding: 3rem 1.5rem !important;
    margin: 0 0.75rem !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    text-align: center !important;
}
.lab42-stat-tile .et_pb_module_header {
    font-size: var(--fontSizeH1, 7.2rem) !important;
    font-family: var(--fontFamilyHeading) !important;
    font-weight: 700 !important;
    color: var(--colorTextDefault) !important;
    margin: 0 0 1rem 0 !important;
    line-height: 1 !important;
    text-align: center !important;
}
.lab42-stat-tile .et_pb_module_header span,
.lab42-stat-tile .et_pb_module_header a {
    color: var(--colorTextDefault) !important;
    font-size: inherit !important;
}
.lab42-stat-tile .et_pb_blurb_description {
    font-family: var(--fontFamilyHeading) !important;
    font-size: var(--fontSizeBase, 1.8rem) !important;
    text-transform: uppercase !important;
    font-weight: 300 !important;
    letter-spacing: 0.05em !important;
    color: #747474 !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}
.lab42-stat-tile .et_pb_blurb_description p {
    color: #747474 !important;
    margin: 0 !important;
}
/* Tighten the gap between Divi blurb container parts. */
.lab42-stat-tile .et_pb_blurb_content,
.lab42-stat-tile .et_pb_blurb_container {
    max-width: 100% !important;
    text-align: center !important;
}

/* About copy: centred paragraph above the action buttons. */
.lab42-home-about {
    text-align: center !important;
}
.lab42-about-copy {
    max-width: 67.6rem !important;
    margin: 0 auto !important;
    text-align: center !important;
}
.lab42-about-copy .et_pb_text_inner p {
    font-size: var(--fontSizeBase) !important;
    line-height: 1.6 !important;
    color: var(--colorTextDefault) !important;
}

/* Buttons: Divi puts module_class on the <a class="et_pb_button">, so target
   the compound selector. .lab42-btn--secondary = filled orange pill,
   .lab42-btn--outline = orange border on transparent. */
.et_pb_button.lab42-btn {
    display: inline-block !important;
    padding: 1rem 2rem !important;
    border-radius: 7rem !important;
    font-family: var(--fontFamilyHeading) !important;
    font-weight: 700 !important;
    font-size: var(--fontSizeSmall) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border: 0.3rem solid var(--colorSecondary) !important;
    text-decoration: none !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}
.et_pb_button.lab42-btn:after {
    display: none !important;
}
.et_pb_button.lab42-btn--secondary {
    background-color: var(--colorSecondary) !important;
    color: #ffffff !important;
    border-color: var(--colorSecondary) !important;
}
.et_pb_button.lab42-btn--secondary:hover {
    background-color: var(--colorPrimary) !important;
    border-color: var(--colorPrimary) !important;
    color: #ffffff !important;
}
a.et_pb_button.lab42-btn--outline,
.et_pb_button.lab42-btn--outline {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--colorSecondary) !important;
    border-color: var(--colorSecondary) !important;
}
.et_pb_button.lab42-btn--outline:hover {
    background-color: var(--colorSecondary) !important;
    color: #ffffff !important;
    border-color: var(--colorSecondary) !important;
}
/* Inline-row buttons: about-us section keeps both wrappers side-by-side. */
.lab42-home-about .et_pb_button_module_wrapper {
    display: inline-block !important;
    margin: 0 0.5rem 1rem 0.5rem !important;
    text-align: center !important;
}
/* Right-aligned button wrapper for Our Games. */
.lab42-home-games-h .et_pb_button_module_wrapper {
    text-align: right !important;
    padding-top: 1rem !important;
}
/* Centred button wrapper for From the team. */
.lab42-home-team .et_pb_button_module_wrapper {
    text-align: center !important;
    margin-top: 2rem !important;
}

/* Our Games heading: large display H2, left-aligned, brand colour. */
.lab42-games-heading h2 {
    font-family: var(--fontFamilyHeading) !important;
    font-size: var(--fontSizeH1, 7.2rem) !important;
    font-weight: 700 !important;
    color: var(--colorTextDefault) !important;
    margin: 0 !important;
    text-transform: uppercase !important;
}
.lab42-team-heading h2 {
    font-family: var(--fontFamilyHeading) !important;
    font-size: var(--fontSizeH1, 7.2rem) !important;
    font-weight: 700 !important;
    color: var(--colorTextDefault) !important;
    margin: 0 0 4rem 0 !important;
    text-transform: uppercase !important;
}

/* Team quotes: each Divi text module wraps a `<figure class="styled-quote">`
   that already inherits styling from components.css. Just centre the
   container so flex alignment matches the original design. */
.lab42-team-quote {
    text-align: center !important;
}
.lab42-team-quote .styled-quote {
    margin: 0 auto !important;
    max-width: 50rem !important;
}

/* Hero (run r-7y6hka F42): hero HTML is now inside an [et_pb_text] block
   instead of [et_pb_code], so the Divi Builder treats it as a Text module
   the editor can crack open. The Text module wraps content in
   `<div class="et_pb_text_inner">` which we want fully transparent so the
   inner <section class="hero"> takes over. */
.lab42-home-hero-html,
.lab42-home-hero-html .et_pb_text_inner {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
}

/* Games tile grid (run r-7y6hka F40): each of the 4 tiles is a Divi column
   with `background_image` set + an [et_pb_text] inside for the bottom-left
   title overlay. Mirrors the BEM `.hero--horizontal-left.hero--vertical-bottom`
   look. Two row variants: dark overlay (--dark) for tiles where the cover art
   is dark or busy, light overlay (--light) for FM Touch 2018 (light bg). */
.lab42-home-games > .et_pb_row {
    margin: 0 !important;
}
.lab42-home-games .et_pb_column.lab42-game-tile {
    /* Width 50% lets two tiles fill the 100% row with no right-edge gap.
       Divi's default 1/2 column is 47.25% + 5.5% margin-right; zeroing the
       margin without setting width left a 5.5% white bar on the right. */
    width: 50% !important;
    min-height: 480px !important;
    margin: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    align-items: flex-end !important;
    position: relative !important;
}
.lab42-home-games .et_pb_column.lab42-game-tile .lab42-game-tile__body {
    width: auto !important;
    max-width: 80% !important;
    margin: 0 !important;
}
/* Title pill: inline-block with semi-transparent bg, white-or-dark text. */
.lab42-home-games .lab42-game-tile__body h2 {
    display: inline-block !important;
    padding: 0 0.5rem !important;
    margin: 0 0 1rem 0 !important;
    font-family: var(--fontFamilyHeading) !important;
    font-size: var(--fontSizeH2) !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}
.lab42-home-games .lab42-game-tile__body p {
    display: inline-block !important;
    padding: 0 0.5rem !important;
    margin: 0 !important;
    font-family: var(--fontFamilyHeading) !important;
    font-size: var(--fontSizeBase) !important;
    line-height: 1.4 !important;
}
/* Dark overlay: black-tinted bg behind text, white text. */
.lab42-game-tile--dark .lab42-game-tile__body h2,
.lab42-game-tile--dark .lab42-game-tile__body p {
    background-color: #00000060 !important;
    color: #ffffff !important;
}
/* Light overlay: white-tinted bg behind text, dark text (FM Touch 2018). */
.lab42-game-tile--light .lab42-game-tile__body h2,
.lab42-game-tile--light .lab42-game-tile__body p {
    background-color: #ffffff60 !important;
    color: var(--colorTextDefault) !important;
}

/* Divi auto-loads FitVids.js, which wraps every <iframe> in a
   `.fluid-width-video-wrapper` element with its own `padding-top: 56.25%`.
   The BEM hero already applies the same 16:9 padding-bottom on
   `.embed--ratio-16-9 .embed__source`, so the two stack and the hero
   renders at 2x height. Zero the BEM side when FitVids has wrapped the
   iframe; FitVids' wrapper provides the responsive padding, the iframe is
   absolutely positioned inside it. */
.hero__media .embed--ratio-16-9 .embed__source:has(.fluid-width-video-wrapper) {
    padding-bottom: 0 !important;
}

/* Divi shells on the homepage (run r-zwn97r). Each major BEM section is now
   wrapped in [et_pb_section][et_pb_row][et_pb_column][et_pb_code]; the inner
   BEM markup paints the section, so we need Divi's default chrome (padding,
   row/column max-width, code-module margins) to be transparent and edge-to-
   edge. Target only `.lab42-home-*` so we don't bleed into any other Divi
   pages on the site that DO want the default Divi chrome. */
/* Code-block sections (Hero, Games grid, Careers footer, Divider): the inner
   BEM markup paints edge-to-edge, so the row must span 100% with zero chrome. */
.lab42-home-hero > .et_pb_row,
.lab42-home-games > .et_pb_row,
.lab42-home-careers > .et_pb_row,
.lab42-home-divider > .et_pb_row {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Native-module sections: keep Divi's default centred row (max-width 114rem,
   2rem horizontal gutter) so the content sits in the same constrained
   column the BEM `.constrain.constrain--default` wrapper used to provide. */
.lab42-home-stats > .et_pb_row,
.lab42-home-about > .et_pb_row,
.lab42-home-games-h > .et_pb_row,
.lab42-home-team > .et_pb_row {
    max-width: 114rem !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 2rem !important;
}
/* Native-module columns must respect their fractional widths (1_4 = 25%,
   1_2 = 50%, 4_4 = 100%). Only zero margin/padding; let Divi compute width.
   The earlier rule forced 100% on all columns which broke 4-column grids
   for the stats section and 2-column rows for the games header / team. */
.lab42-home-hero .et_pb_column,
.lab42-home-stats .et_pb_column,
.lab42-home-about .et_pb_column,
.lab42-home-divider .et_pb_column,
.lab42-home-games-h .et_pb_column,
.lab42-home-games .et_pb_column,
.lab42-home-team .et_pb_column,
.lab42-home-careers .et_pb_column {
    margin: 0 !important;
    padding: 0 !important;
}
/* Code-only sections: their single 4_4 column needs full width to host the
   raw HTML inside [et_pb_code]. */
.lab42-home-hero .et_pb_column_4_4,
.lab42-home-games .et_pb_column_4_4,
.lab42-home-careers .et_pb_column_4_4,
.lab42-home-divider .et_pb_column_4_4 {
    width: 100% !important;
}
.lab42-home-hero .et_pb_code,
.lab42-home-stats .et_pb_code,
.lab42-home-about .et_pb_code,
.lab42-home-divider .et_pb_code,
.lab42-home-games-h .et_pb_code,
.lab42-home-games .et_pb_code,
.lab42-home-team .et_pb_code,
.lab42-home-careers .et_pb_code {
    margin: 0 !important;
    padding: 0 !important;
}

/* Contact form (run r-749uei): mirror prod's borderless grey-fill input look.
   The contact-form-7 plugin's default styles render inputs with a thin grey
   border + white background; prod uses `--colorGreyLight` background with no
   border (the border-color is the same as the background, making it
   invisible). Apply the prod look to every text-style control inside the
   wpcf7-form wrapper. */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    background: var(--colorGreyLight);
    border: 0.2rem solid var(--colorGreyLight);
    border-radius: var(--formBorderRadius);
    padding: 1.2rem 2.4rem;
    color: var(--colorBlack);
    font-family: var(--fontFamilyHeading);
    font-size: var(--fontSizeLarge);
    width: 100%;
    box-shadow: none;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
    border-color: var(--colorTextDefault);
    outline: none;
}
.wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}
.wpcf7-form label {
    padding: 0;
}
/* Submit button: shrink-to-fit pill (prod doesn't full-width the submit). */
.wpcf7-form .lab42-form-actions .btn,
.wpcf7-form input[type="submit"].btn {
    display: inline-block;
    width: auto;
}
/* CF7 inserts a response-output paragraph after the form; tidy any stray margin. */
.wpcf7-form .wpcf7-response-output {
    margin: 1rem 0 0;
}

/* News-archive card media: constrain to a uniform 350x200 aspect ratio so all
   tiles have the same height regardless of the source image's intrinsic
   dimensions. Prod uses Orchard Core's image API to pre-crop to 350x200; we
   achieve parity in the browser via aspect-ratio + object-fit:cover. */
.card--news .card__media-image {
    aspect-ratio: 350 / 200;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

/* Scope the `.flow` neutralisation to the games archive (and any other
   `section--no-flow-gutter` block). The components.css default applies
   `margin: 0 auto; max-width: 67.6rem` to every `.flow`, which is correct
   for editorial body copy on single-post pages, single project pages, and
   editor-typed page content. The /games/ archive uses an edge-to-edge
   width--50 grid that needs the parent section to control width directly,
   so neutralise the rule only inside the marker class.

   Operator brief r-x8mdoj first surfaced this for the games grid; run
   r-qoclag surfaced the regression on news single-post body content (which
   was rendering edge-to-edge with no left margin). Scoping the override
   fixes both cases simultaneously. */
.section--no-flow-gutter > .flow,
.section--no-flow-gutter > .flow > .flow__content {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    width: auto;
}

/* ====================================================================
   About page (run r-td2ha8): native Divi modules per
   memory/inbox/2026-05-06-divi-editability-playbook.md.
   ==================================================================== */

/* Hero text wrapper neutralised so the inner <section class="hero"> paints
   the section edge-to-edge (mirrors lab42-home-hero-html). */
.lab42-about-hero,
.lab42-about-hero > .et_pb_row,
.lab42-about-hero .et_pb_column {
    padding: 0 !important;
    margin: 0 !important;
}
.lab42-about-hero > .et_pb_row {
    max-width: none !important;
    width: 100% !important;
}
.lab42-about-hero-html,
.lab42-about-hero-html .et_pb_text_inner {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
}

/* Inverted-context sections (Culture, Values): white headings + paragraphs
   on the grey-pattern background. Mirrors the BEM .section--inverted
   colourway without dragging the BEM markup along. */
.lab42-about-section--inverted h2,
.lab42-about-section--inverted h3,
.lab42-about-section--inverted h4,
.lab42-about-section--inverted p {
    color: var(--colorTextInverted, #ffffff) !important;
}
.lab42-about-section--inverted p a {
    color: var(--colorTextInverted, #ffffff);
    text-decoration: underline;
}

/* Copy sections (intro, culture, values, sumo studio, leamington): keep the
   row a constrain--default width (114rem) and the inner text at
   constrain--extra-thin (67.6rem) so paragraphs sit in a comfortable column. */
.lab42-about-intro > .et_pb_row,
.lab42-about-culture > .et_pb_row,
.lab42-about-sumo > .et_pb_row,
.lab42-about-values > .et_pb_row,
.lab42-about-leamington > .et_pb_row {
    max-width: 114rem !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 2rem !important;
}
.lab42-about-intro-copy,
.lab42-about-culture-copy,
.lab42-about-sumo-copy,
.lab42-about-values-copy,
.lab42-about-leamington-copy {
    max-width: 67.6rem !important;
    margin: 0 auto !important;
}
.lab42-about-intro-copy .et_pb_text_inner,
.lab42-about-culture-copy .et_pb_text_inner,
.lab42-about-sumo-copy .et_pb_text_inner,
.lab42-about-values-copy .et_pb_text_inner,
.lab42-about-leamington-copy .et_pb_text_inner {
    text-align: left;
}
.lab42-about-intro-copy .et_pb_text_inner h2,
.lab42-about-culture-copy .et_pb_text_inner h2,
.lab42-about-sumo-copy .et_pb_text_inner h2,
.lab42-about-values-copy .et_pb_text_inner h2,
.lab42-about-leamington-copy .et_pb_text_inner h2 {
    font-family: var(--fontFamilyHeading) !important;
    font-size: var(--fontSizeH1, 7.2rem) !important;
    font-weight: 700 !important;
    margin: 0 0 2rem 0 !important;
    text-transform: uppercase !important;
    text-align: left !important;
}
.lab42-about-intro-copy .et_pb_text_inner p,
.lab42-about-culture-copy .et_pb_text_inner p,
.lab42-about-sumo-copy .et_pb_text_inner p,
.lab42-about-values-copy .et_pb_text_inner p,
.lab42-about-leamington-copy .et_pb_text_inner p {
    font-size: var(--fontSizeBase) !important;
    line-height: 1.6 !important;
    margin: 0 0 1.5rem 0 !important;
}

/* Intro section: View jobs button centred under the copy, awards image
   centred and capped so the logo strip doesn't blow out on wide viewports. */
.lab42-about-intro .et_pb_button_module_wrapper {
    text-align: left !important;
    margin: 2rem 0 3rem 0 !important;
}
.lab42-about-awards-img {
    text-align: left !important;
    margin: 0 !important;
}
.lab42-about-awards-img .et_pb_image_wrap {
    display: inline-block !important;
}
.lab42-about-awards-img img {
    max-width: 60rem !important;
    height: auto !important;
    width: 100% !important;
}

/* Image-pair sections (BDO + Culture lunch, GirlTechWM + Special Effect):
   edge-to-edge two-up with no gap. Same fix as lab42-home-games game tiles:
   margin: 0 zeroes Divi's 5.5% sibling gap, but width: 50% is required
   otherwise the row only fills 94.5%. */
.lab42-about-imagepair > .et_pb_row {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.lab42-about-imagepair .et_pb_column {
    width: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.lab42-about-pair-img {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 0 !important;
}
.lab42-about-pair-img .et_pb_image_wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}
.lab42-about-pair-img .et_pb_image_wrap img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block !important;
}

/* Sumo Studio section: photo below the copy, centred + max-width capped. */
.lab42-about-sdc-img {
    text-align: center !important;
    margin: 3rem auto 0 auto !important;
}
.lab42-about-sdc-img .et_pb_image_wrap {
    display: inline-block !important;
}
.lab42-about-sdc-img img {
    max-width: 100rem !important;
    width: 100% !important;
    height: auto !important;
}

/* Vimeo embed section: row + column edge-to-edge, BEM .hero markup paints
   the 16:9 frame inside the [et_pb_code]. */
.lab42-about-vimeo,
.lab42-about-vimeo > .et_pb_row,
.lab42-about-vimeo .et_pb_column,
.lab42-about-vimeo .et_pb_code {
    padding: 0 !important;
    margin: 0 !important;
}
.lab42-about-vimeo > .et_pb_row {
    max-width: none !important;
    width: 100% !important;
}

/* ====================================================================
   /development-services/ page (run r-og2r6c): native Divi modules per
   memory/inbox/2026-05-06-divi-editability-playbook.md.
   ==================================================================== */

/* Hero text wrapper (mirrors lab42-about-hero-html). */
.lab42-services-hero,
.lab42-services-hero > .et_pb_row,
.lab42-services-hero .et_pb_column {
    padding: 0 !important;
    margin: 0 !important;
}
.lab42-services-hero > .et_pb_row {
    max-width: none !important;
    width: 100% !important;
}
.lab42-services-hero-html,
.lab42-services-hero-html .et_pb_text_inner {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
}

/* Intro section: live left-aligns this copy in the same 67.6rem column
   (run r-90auel). Button stays centred - operator dictated the text only. */
.lab42-services-intro > .et_pb_row {
    max-width: 67.6rem !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 2rem !important;
}
.lab42-services-intro-copy .et_pb_text_inner {
    text-align: left;
}
.lab42-services-intro-copy .et_pb_text_inner p {
    font-size: var(--fontSizeBase) !important;
    line-height: 1.6 !important;
    margin: 0 0 1.5rem 0 !important;
}
.lab42-services-intro .et_pb_button_module_wrapper {
    text-align: center !important;
    margin: 2rem 0 !important;
}

/* Leadership section: dark inverted bg + 7 leader cards. */
.lab42-services-leadership > .et_pb_row {
    max-width: 114rem !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 2rem !important;
}
.lab42-services-vision-h h2 {
    font-family: var(--fontFamilyHeading) !important;
    font-size: var(--fontSizeH2) !important;
    font-weight: 700 !important;
    margin: 0 0 2rem 0 !important;
    text-transform: uppercase !important;
}
.lab42-services-vision-copy .et_pb_text_inner p {
    font-size: var(--fontSizeBase) !important;
    line-height: 1.6 !important;
}
/* Leader photos: live renders these at the source PNGs' own natural size
   (162x172, confirmed identical on both sites' uploads), not stretched to
   fill the 1/3 column. Forcing width:100% is what made them ~2x live's
   size; dropping the forced width/aspect-ratio/object-fit matches live. */
.lab42-services-leader-img {
    margin: 0 0 1rem 0 !important;
    text-align: left !important;
}
.lab42-services-leader-img .et_pb_image_wrap {
    display: block !important;
    width: auto !important;
}
.lab42-services-leader-img img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}
.lab42-services-leader-bio {
    margin: 0 0 3rem 0 !important;
}
.lab42-services-leader-bio .et_pb_text_inner h3 {
    font-family: var(--fontFamilyHeading) !important;
    font-size: var(--fontSizeH3, 2.4rem) !important;
    font-weight: 700 !important;
    margin: 0 0 0.5rem 0 !important;
}
.lab42-services-leader-bio .et_pb_text_inner p {
    font-size: var(--fontSizeBase) !important;
    line-height: 1.5 !important;
    margin: 0 0 1rem 0 !important;
}
.lab42-services-leader-bio .et_pb_text_inner p:first-of-type b {
    font-weight: 700;
}

/* Games Development Services: heading + 5 service cards + Contact button.
   Container is live's own `constrain--thin` (92rem, was pinned to 90rem);
   heading is live's H2 token, left-aligned (measured "start", not centred -
   found while measuring the dictated size change). */
.lab42-services-gds > .et_pb_row {
    max-width: 92rem !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 2rem !important;
}
.lab42-services-gds-h h2 {
    font-family: var(--fontFamilyHeading) !important;
    font-size: var(--fontSizeH2) !important;
    font-weight: 700 !important;
    margin: 0 0 3rem 0 !important;
    text-transform: uppercase !important;
    text-align: left !important;
}
.lab42-services-service-card {
    padding: 0 2rem !important;
    margin: 0 0 3rem 0 !important;
}
.lab42-services-service-card .et_pb_text_inner h3 {
    font-family: var(--fontFamilyHeading) !important;
    font-size: var(--fontSizeH3, 2.4rem) !important;
    font-weight: 700 !important;
    margin: 0 0 1rem 0 !important;
    text-transform: uppercase !important;
}
.lab42-services-service-card .et_pb_text_inner p {
    font-size: var(--fontSizeBase) !important;
    line-height: 1.5 !important;
}
/* Contact us button: live places it directly under the Porting card's
   "arrange a quote..." line, left-aligned - moved into that column in the
   post content (was a separate centred column alongside it). */
.lab42-services-gds .et_pb_button_module_wrapper {
    text-align: left !important;
    padding-top: 1.5rem !important;
}

/* Quote section: dark inverted bg, centred quote. */
.lab42-services-quote {
    background-color: #3a3e49 !important;
}
.lab42-services-quote > .et_pb_row {
    max-width: 90rem !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 2rem !important;
}
.lab42-services-quote-text .styled-quote {
    text-align: left !important;
    color: #ffffff !important;
}
.lab42-services-quote-text .styled-quote__copy p {
    font-size: var(--fontSizeH4, 2.4rem) !important;
    line-height: 1.4 !important;
    color: #ffffff !important;
    margin: 0 0 2rem 0 !important;
}
.lab42-services-quote-text .styled-quote__source {
    font-size: var(--fontSizeBase) !important;
    color: #ffffff !important;
}

/* Trusted Partner section: copy left, 4 partner logos right. */
.lab42-services-trusted > .et_pb_row {
    max-width: 114rem !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 2rem !important;
}
.lab42-services-trusted-copy .et_pb_text_inner h2 {
    font-family: var(--fontFamilyHeading) !important;
    font-size: var(--fontSizeH2) !important;
    font-weight: 700 !important;
    margin: 0 0 2rem 0 !important;
    text-transform: uppercase !important;
}
.lab42-services-trusted-copy .et_pb_text_inner p {
    font-size: var(--fontSizeBase) !important;
    line-height: 1.6 !important;
    margin: 0 0 1.5rem 0 !important;
}
/* Partner logos: live's own `.tiles.tiles--two-cols` component is a 2x2
   grid of EQUAL SQUARES (each tile's height is pinned to its own width via
   a padding-top:100% skeleton) - the clone had 4 rectangular cards instead.
   Reproduced with a CSS grid: aspect-ratio 1/1 keeps each box square at any
   column width, so it doesn't need the BEM skeleton-div trick. */
.lab42-services-partner-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
}
.lab42-services-partner-logo {
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: #ffffff !important;
    padding: 2rem !important;
    margin: 0 !important;
    border-radius: 0.5rem !important;
}
.lab42-services-partner-logo .et_pb_image_wrap {
    display: inline-block !important;
}
.lab42-services-partner-logo img {
    max-width: 18rem !important;
    height: auto !important;
}

/* ====================================================================
   /contact/ page (run r-og2r6c).
   ==================================================================== */

/* Live's hero has a dark background (#2e323c + the grey icon pattern, same
   asset as the Services/About inverted bands) filling this section edge to
   edge from the header down - the section shortcode carried no
   background_color/background_image at all, which is both why the heading
   rendered dark-grey (no inverted colourway to trigger) and why there was a
   visible blank-white gap under the nav (run r-90auel). Heading is left-
   aligned in the same 67.6rem column as the form, not centred. */
.lab42-contact-hero > .et_pb_row {
    max-width: 67.6rem !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 2rem !important;
}
.lab42-contact-hero-h .et_pb_text_inner {
    text-align: left !important;
}
.lab42-contact-hero-h h1 {
    font-family: var(--fontFamilyHeading) !important;
    font-size: var(--fontSizeH1, 7.2rem) !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    text-align: left !important;
    color: var(--colorTextInverted, #ffffff) !important;
}

.lab42-contact-form-section > .et_pb_row {
    max-width: 67.6rem !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 2rem !important;
}
.lab42-contact-form .wpcf7-form {
    margin: 0 !important;
}
.lab42-contact-divider {
    margin: 3rem 0 !important;
}
.lab42-contact-address {
    text-align: left !important;
}
.lab42-contact-address .et_pb_text_inner p {
    font-size: var(--fontSizeBase) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.lab42-contact-map,
.lab42-contact-map > .et_pb_row,
.lab42-contact-map .et_pb_column,
.lab42-contact-map .et_pb_code {
    padding: 0 !important;
    margin: 0 !important;
}
.lab42-contact-map > .et_pb_row {
    max-width: none !important;
    width: 100% !important;
}
.lab42-contact-map iframe {
    display: block !important;
    width: 100% !important;
    height: 60rem !important;
    border: 0 !important;
}

/* ---------------------------------------------------------------------------
   r-wf4c4x (2026-05-29): hero heading legibility over the light-opening reel.
   The native hero video and its poster open near-white, washing out the white
   hero heading. A text-shadow keeps the heading readable over light frames
   without altering layout or overlaying the media. Scoped to the homepage
   hero only. Reversible: delete this block. (An earlier scrim attempt that set
   position:relative on .hero__body was reverted because it broke the hero's
   absolute overlay; text-shadow is layout-safe.)
--------------------------------------------------------------------------- */
.lab42-home-hero .hero__body .heading,
.lab42-home-hero .hero__body h1 {
  text-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.6), 0 0.2rem 1.6rem rgba(0,0,0,0.5);
}

/* ====================================================================
   /Development_Services/ "A Trusted Partner" partner logos (run r-jv4prp).

   Was built as two Divi ROWS nested inside a column. Divi 4 does not support
   a row inside a column, so it rendered the logos and then printed the outer
   "[/et_pb_column][/et_pb_row]" as literal text at the foot of the page. The
   four logos are now plain image modules in one column and this rule does the
   2x2. Scoped to >=981px so it cannot beat Divi's own stacking breakpoint.
   ==================================================================== */

@media (min-width: 981px) {
    .lab42-services-partner-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        align-content: flex-start !important;
    }
    .lab42-services-partner-grid > .et_pb_module {
        flex: 0 0 calc(50% - 1.5rem) !important;
        max-width: calc(50% - 1.5rem) !important;
    }
}

/* ====================================================================
   Vertical-rhythm parity with live (run r-jv4prp).

   Divi's base stylesheet adds:
       p                      { padding-bottom: 1em }
       h1,h2,h3,h4,h5,h6      { padding-bottom: 10px }
   Live (Orchard Core) has neither. Both sites already agree on font-size,
   line-height and margin-bottom, so this padding was pure extra height: every
   paragraph ran 1em taller than live and the error compounded down the page
   (/terms-of-use was 1048px longer, /privacy-policy 735px, and even a bare
   game page 79px through the footer alone).

   Specificity, not !important: Divi's rules are bare element selectors
   (0,0,1), so "html body p" (0,0,3) wins outright and stays overridable by
   any class-based rule the next agency writes. Divi's own
   p:not(.has-background):last-of-type already sets 0, so nothing conflicts.
   ==================================================================== */

html body p,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
    padding-bottom: 0;
}

/* ====================================================================
   Legal-page measure (run r-jv4prp).

   page-legal.php wrapped the body in `constrain--thin` (92rem = 920px). Live
   sets those pages in a 67.6rem (676px) column, so every legal page wrapped
   to fewer lines than live and ran hundreds of pixels short of it. The
   template now uses `constrain--extra-thin`.

   /wst-snooker-privacy-policy is the exception: live really does set THAT one
   at the wider 920px measure, so it keeps the old width by page id.
   ==================================================================== */

body.page-id-14 .section__content.constrain--extra-thin,
body.page-id-14 .section__content.constrain--extra-thin .flow {
    max-width: 92rem;
}

/* Legal measure, part 2 (run r-jv4prp).
   `constrain--extra-thin` caps the CONTAINER at 67.6rem and the container also
   carries 2rem of horizontal padding, so the text column came out at 636px -
   40px narrower than live's 676px, which made every paragraph wrap to more
   lines. Widen the container by exactly that padding so the COLUMN is 67.6rem.
   Scoped to .lab42-legal-body (added in page-legal.php) so the thank-you page,
   the only other user of constrain--extra-thin, is untouched. */

.section__content.lab42-legal-body {
    max-width: 71.6rem;
}
body.page-id-14 .section__content.lab42-legal-body {
    max-width: 96rem;
}
body.page-id-14 .section__content.lab42-legal-body .flow {
    max-width: 92rem;
}

/* ====================================================================
   Button + quote parity with live (run r-jv4prp). All measured, not guessed:
   getComputedStyle on both sites, see artifacts/parity2/_tools/homecheck.mjs.

                   live                                clone (before)
   More about us   229x56 bg #fff   text #f05439       142x53 bg #f05439 text #fff
   View all games  235x56 transparent, #3a3e49 border  147x53 transparent, #f05439
   Find your role  229x56 transparent, #f05439         143x53 same but 16px text
   quotes          text-align: start                   text-align: center

   Three separate faults: the shared button font-size was --fontSizeSmall
   (15.98px) against live's 18px, two buttons had the wrong colour role, and
   every button was missing live's chevron. Live distinguishes the roles with
   btn--primary (slate) vs btn--secondary (orange) plus btn--outline; the Divi
   port collapsed both onto the orange lab42-btn--secondary/--outline pair, so
   the colours are re-separated here by SECTION rather than by renaming the
   module classes (the Services CTAs legitimately want the filled orange).
   ==================================================================== */

.et_pb_button.lab42-btn {
    font-size: 1.8rem !important;
    padding: 1rem 2.4rem !important;
}

/* live's chevron. Masked inline SVG, not an icon font, so it takes
   currentColor and cannot render as tofu if the font fails to load. */
.et_pb_button.lab42-btn:after {
    display: inline-block !important;
    content: "" !important;
    width: 0.9rem !important;
    height: 1.4rem !important;
    margin-left: 1rem !important;
    vertical-align: -0.1rem !important;
    background-color: currentColor !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='14' viewBox='0 0 9 14'%3E%3Cpath d='M2.121.625l6.364 6.364L6.364 9.11 0 2.746z'/%3E%3Cpath d='M8.507 7.01l-6.364 6.365L.02 11.254 6.385 4.89z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='14' viewBox='0 0 9 14'%3E%3Cpath d='M2.121.625l6.364 6.364L6.364 9.11 0 2.746z'/%3E%3Cpath d='M8.507 7.01l-6.364 6.365L.02 11.254 6.385 4.89z'/%3E%3C/svg%3E") !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    transform: none !important;
    opacity: 1 !important;
    position: static !important;
    line-height: 1 !important;
}

/* "More about us": live inverts this one - white pill, orange label. */
.lab42-home-about .et_pb_button.lab42-btn--secondary {
    background-color: #ffffff !important;
    color: var(--colorSecondary) !important;
    border-color: #ffffff !important;
}
.lab42-home-about .et_pb_button.lab42-btn--secondary:hover {
    background-color: var(--colorSecondary) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* "View all games": live uses the PRIMARY (slate) outline, not the orange. */
.lab42-home-games-h .et_pb_button.lab42-btn--outline {
    color: #3a3e49 !important;
    border-color: #3a3e49 !important;
}
.lab42-home-games-h .et_pb_button.lab42-btn--outline:hover {
    background-color: #3a3e49 !important;
    border-color: #3a3e49 !important;
    color: #ffffff !important;
}

/* Team quotes are left-aligned on live, not centred. */
.lab42-team-quote {
    text-align: left !important;
}
.lab42-team-quote .styled-quote {
    margin: 0 !important;
}

/* Button metrics, corrected against live's computed style (run r-jv4prp).
   live : padding 14px 54px 14px 30px · letter-spacing normal · D-DIN Expanded
   clone: padding 10px 24px          · letter-spacing 0.9px   · D-DIN Condensed
   The asymmetric right padding is the well it reserves for the chevron, which
   live positions absolutely - so the chevron is taken out of flow here too,
   otherwise the pill grows by the icon's width and stops matching. */

.et_pb_button.lab42-btn {
    position: relative !important;
    font-family: var(--fontFamilyDefault) !important;
    letter-spacing: normal !important;
    padding: 1.4rem 5.4rem 1.4rem 3rem !important;
}
.et_pb_button.lab42-btn:after {
    position: absolute !important;
    right: 3rem !important;
    top: 50% !important;
    margin-left: 0 !important;
    transform: translateY(-50%) !important;
    vertical-align: baseline !important;
}

/* live button box is 56px tall (14+14 padding + 3+3 border + 22px line);
   the clone inherited a 31px line height and stood 9px proud. */
.et_pb_button.lab42-btn { line-height: 2.2rem !important; }

/* ====================================================================
   Operator amendment pass, run r-c61q9l (2026-08-10).

   Every value below is live's own COMPUTED value at a 1440px viewport,
   read off www.lab42.games with getComputedStyle - not a design guess.
   Measurements: artifacts/amend1/live-home.json, live-about.json and the
   clone's matching pair.

   Live tokens this block leans on:
     --fontSizeBase       1.8rem  (18px)
     --fontSizeH2         5.4rem  (base x 3)
     --fontSizeH4         2.7rem  (base x 1.5)
     --heroBodyPadding    4.7rem
     constrain--default  114rem   constrain--extra-thin 67.6rem
   ==================================================================== */

/* --------------------------------------------------------------------
   1. Every patterned band tiles its pattern, it does not stretch it.
   Live: background-size auto / background-repeat repeat, so the
   1280x830 flask-and-circles PNG repeats at natural size. Divi's
   `et_pb_with_background` default is cover/no-repeat, which scaled a
   single copy of the tile up to the section box and made the flasks
   roughly 40% too large on every band.
   -------------------------------------------------------------------- */
.lab42-home-stats,
.lab42-home-about,
.lab42-home-divider,
.lab42-home-games-h,
.lab42-home-careers,
.lab42-about-culture,
.lab42-about-values,
.lab42-about-endband,
.lab42-services-leadership,
.lab42-services-gds,
.lab42-services-trusted,
.lab42-contact-hero {
    background-size: auto !important;
    background-repeat: repeat !important;
    background-position: 0 0 !important;
}

/* Live runs the About pattern bands as parallax (background-attachment:
   fixed); the home bands scroll. Match each side. */
.lab42-about-culture,
.lab42-about-values,
.lab42-about-endband {
    background-attachment: fixed !important;
}

/* --------------------------------------------------------------------
   2. HOME - stats tiles (2015 / 70+ / 50+ / 2020).
   Live renders `.tiles--four-cols`: four SQUARE tiles spanning the full
   114rem container, square corners, no shadow, and a white-noise JPG
   tiled behind each one. The clone had short rounded white cards that
   stopped 208px short of the container's right edge.

   Live geometry @1440: section 484px tall (90px padding each side);
   `.tiles` 1155 wide at x143 (a 7.5px bleed each side); each item
   288.75 wide with a 7px transparent border, so the painted tile is
   275x275 with a 14px gutter. Reproduced here with a 14px row bleed and
   7px column padding.
   -------------------------------------------------------------------- */
.lab42-home-stats {
    padding: 9rem 0 !important;
}
.lab42-home-stats > .et_pb_row {
    max-width: calc(114rem + 14px) !important;
    width: 100% !important;
    margin: 0 auto 1.5rem !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
}
.lab42-home-stats .et_pb_column {
    width: 25% !important;
    flex: 0 0 25% !important;
    margin: 0 !important;
    padding: 0 7px !important;
}
.lab42-stat-tile {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 1.5rem !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-image: url(/wp-content/uploads/2026/05/noise-pattern-white.jpg) !important;
    background-repeat: repeat !important;
    background-size: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.lab42-stat-tile .et_pb_blurb_content {
    width: 100% !important;
}
/* live: 72px/72px, margin-bottom 15px */
.lab42-stat-tile .et_pb_module_header {
    line-height: 1 !important;
    margin: 0 0 1.5rem 0 !important;
}
/* live: 27px/27px, weight 700, letter-spacing normal, margin-bottom 15px.
   The clone had 18px/22px weight 300 with 0.9px tracking. */
.lab42-stat-tile .et_pb_blurb_description {
    font-size: var(--fontSizeH4, 2.7rem) !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    margin: 0 0 1.5rem 0 !important;
}

/* --------------------------------------------------------------------
   3. HOME - the rule between the About band and OUR GAMES.
   Live puts a 3px #c4c4c4 rule 1140px wide at the band boundary, and the
   rule that sits UNDER the OUR GAMES heading is transparent (it is a
   40px spacer, not a divider). The clone had it the other way round:
   an edge-to-edge 1px line floating in a 131px empty band, plus a
   visible line under the heading.
   -------------------------------------------------------------------- */
.lab42-home-divider {
    padding: 0 !important;
}
.lab42-home-divider .et_pb_divider {
    height: 3px !important;
    margin: 0 !important;
}
.lab42-home-divider .et_pb_divider:before {
    width: 114rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-top-width: 3px !important;
    border-top-color: #c4c4c4 !important;
}
/* No underline beneath OUR GAMES - live's is transparent. */
.lab42-home-games-h .et_pb_divider:before {
    border-top-color: transparent !important;
}

/* --------------------------------------------------------------------
   4. HOME - OUR GAMES heading + View all games button.
   Live: h2 at 5.4rem/1 (the clone ran 7.2rem), text-transform none
   because the copy is already upper-case, left edge flush with the
   114rem container at x150. Zeroing the row padding puts both the
   heading's left edge and the button's right edge on the container.
   -------------------------------------------------------------------- */
.lab42-home-games-h > .et_pb_row {
    padding: 0 !important;
}
.lab42-games-heading h2 {
    font-size: var(--fontSizeH2, 5.4rem) !important;
    line-height: 1 !important;
    margin: 0 0 1.5rem 0 !important;
    text-transform: none !important;
}

/* --------------------------------------------------------------------
   5. HOME - game tiles (Crusader Kings / CoD / Snooker 19 / FM Touch).
   Two faults. (a) The caption sat hard against the tile's bottom-left
   corner; live insets it by --heroBodyPadding (47px) on every side.
   (b) The title and strapline are both inline-block, so a short title
   like "Snooker 19" left room for the strapline to ride up onto the same
   line. Live forces the break with an empty <div> between them; here the
   text wrapper becomes a flex column, which keeps each one shrink-to-fit
   (so the tinted background still hugs the text) while guaranteeing the
   strapline starts a new line.
   -------------------------------------------------------------------- */
.lab42-home-games .et_pb_column.lab42-game-tile {
    box-sizing: border-box !important;
    padding: var(--heroBodyPadding, 4.7rem) !important;
}
.lab42-home-games .et_pb_column.lab42-game-tile .lab42-game-tile__body {
    max-width: 100% !important;
    width: 100% !important;
}
.lab42-home-games .lab42-game-tile__body .et_pb_text_inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}
.lab42-home-games .lab42-game-tile__body h2 {
    line-height: 1 !important;
}
.lab42-home-games .lab42-game-tile__body p {
    font-family: var(--fontFamilyDefault) !important;
    font-weight: 400 !important;
    margin: 0 0 1rem 0 !important;
}

/* --------------------------------------------------------------------
   6. ABOUT - intro block: button and accolades share the copy's column.
   Live keeps the whole block inside constrain--extra-thin (67.6rem, x382
   at 1440). The clone's copy was constrained but the View-jobs button and
   the awards strip were not, so both started 212px to the LEFT of the
   paragraph they belong to.
   Live also runs paragraph -> button -> awards with no gaps between them.
   -------------------------------------------------------------------- */
.lab42-about-intro .et_pb_button_module_wrapper,
.lab42-about-awards-img {
    max-width: 67.6rem !important;
    margin: 0 auto !important;
}
.lab42-about-awards-img img {
    max-width: 100% !important;
}

/* --------------------------------------------------------------------
   7. ABOUT - Culture and Values run the FULL container.
   Live sets those two sections to constrain--default (114rem) while
   intro / Sumo studio / Leamington stay at constrain--extra-thin. The
   clone had all five at extra-thin, so Culture and Values read as a
   narrow centred column against live's full-width band.
   -------------------------------------------------------------------- */
.lab42-about-culture-copy,
.lab42-about-values-copy {
    max-width: none !important;
}
/* Zero row padding so the copy's left edge lands on the container at
   x150 (live) rather than x170. The extra-thin blocks are centred, so
   this does not move them. */
.lab42-about-intro > .et_pb_row,
.lab42-about-culture > .et_pb_row,
.lab42-about-sumo > .et_pb_row,
.lab42-about-values > .et_pb_row,
.lab42-about-leamington > .et_pb_row {
    padding: 0 !important;
}

/* Section headings on About are 5.4rem on live and NOT upper-cased -
   live renders "A Sumo Digital Studio" and "Values" in their stored
   case. The clone forced 7.2rem + uppercase, which a text-diff cannot
   see because text-transform never touches textContent. */
.lab42-about-intro-copy .et_pb_text_inner h2,
.lab42-about-culture-copy .et_pb_text_inner h2,
.lab42-about-sumo-copy .et_pb_text_inner h2,
.lab42-about-values-copy .et_pb_text_inner h2,
.lab42-about-leamington-copy .et_pb_text_inner h2 {
    font-size: var(--fontSizeH2, 5.4rem) !important;
    line-height: 1 !important;
    margin: 0 0 1.5rem 0 !important;
    text-transform: none !important;
}

/* --------------------------------------------------------------------
   8. ABOUT - the Sumo Developer Conference photo sits inside the copy.
   Live: 676x380 at x382, i.e. exactly the width of the paragraph above
   it. The clone ran it to 1000px wide at x220, overhanging the text on
   both sides.
   -------------------------------------------------------------------- */
.lab42-about-sdc-img {
    max-width: 67.6rem !important;
    margin: 0 auto !important;
    text-align: left !important;
}
.lab42-about-sdc-img img {
    max-width: 100% !important;
}

/* --------------------------------------------------------------------
   9. ABOUT - the pattern band below the video, which the clone was
   missing entirely. Live closes the page with an empty
   `section--with-background-fixed section--inverted` band: 180px tall
   (90px padding top and bottom, no content), the grey flask pattern
   tiled behind it, parallax-fixed. Added as a Divi section in this run;
   the chrome below strips Divi's row/column padding so the band is
   exactly its own padding, as live's is.
   -------------------------------------------------------------------- */
.lab42-about-endband > .et_pb_row {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.lab42-about-endband .et_pb_column {
    padding: 0 !important;
    margin: 0 !important;
}
.lab42-about-endband .et_pb_divider {
    height: 0 !important;
    margin: 0 !important;
}
.lab42-about-endband .et_pb_divider:before {
    border-top-color: transparent !important;
}

/* Mobile: live's `.tiles--four-cols .tiles__item` is flex-basis 50% at
   every width below 64em and only becomes 25% above it, so the grid is
   the single thing that needs restating here. */
@media (max-width: 63.99em) {
    .lab42-home-stats .et_pb_column {
        width: 50% !important;
        flex: 0 0 50% !important;
    }
}

/* ====================================================================
   Amendment pass, round 2 (run r-c61q9l). Six corrections found by
   re-measuring the clone against live after the first block landed.
   ==================================================================== */

/* 2a. Stats tiles: live's `.tiles__item` carries a 7px TRANSPARENT border
   on all four sides, not just left/right, and `.tiles` adds a 15px bottom
   margin. Round 1 only put the gutter on the sides, so the band came out
   455px against live's 484px and the tiles sat 7px high. */
.lab42-home-stats .et_pb_column {
    padding: 7px !important;
}

/* 2b. "View all games" was landing 62px short of the container's right
   edge. `.lab42-home-games-h .et_pb_column { margin: 0 }` had zeroed
   Divi's 5.5% sibling gap without widening the columns, so the pair only
   spanned 94.5% of the row and the right-aligned button stopped with it.
   Live puts the button's right edge on the container at x1290. */
.lab42-home-games-h .et_pb_column {
    width: 50% !important;
}
/* Live aligns the button's top edge with the heading's; the clone had a
   10px nudge that pushed it below. */
.lab42-home-games-h .et_pb_button_module_wrapper {
    padding-top: 0 !important;
}

/* 2c. Divi DROPS a section's `custom_padding` from its generated CSS when
   that section also carries a `background_image`. Verified on this page:
   sections 1 and 4 (no background image) emit
   `padding-top:80px;padding-bottom:80px`, while sections 2, 5 and 9 - the
   three pattern bands - emit only their background rules and silently
   fall back to Divi's 54px default, despite asking for 80px in the
   shortcode. That is why Culture and Values sat at 54px between
   neighbours at 80px and nobody had spotted it. Live runs all three at
   90px, so pin them here.
   NOTE FOR THE INCOMING AGENCY: changing the padding of these three
   sections in the Divi builder will have no visible effect until this
   rule is removed. */
.lab42-about-culture,
.lab42-about-values,
.lab42-about-endband {
    padding: 9rem 0 !important;
}

/* 2d. The end band is empty on live: 90px padding, no content, 180px tall.
   Divi's empty row still reserved 23px, so collapse it. */
.lab42-about-endband > .et_pb_row,
.lab42-about-endband .et_pb_column,
.lab42-about-endband .et_pb_module {
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* 2e. Body copy on About ran at line-height 1.6 (28.8px) against live's
   1.4 (25.2px), which is what made every copy block on the page taller
   than live's by a margin that grew with the word count. */
.lab42-about-intro-copy .et_pb_text_inner p,
.lab42-about-culture-copy .et_pb_text_inner p,
.lab42-about-sumo-copy .et_pb_text_inner p,
.lab42-about-values-copy .et_pb_text_inner p,
.lab42-about-leamington-copy .et_pb_text_inner p {
    line-height: 1.4 !important;
}

/* 2f. Live's `.tiles` also carries `margin-bottom: 15px` below the row of
   tiles. Divi pins `.et_pb_row_1.et_pb_row { margin-bottom: 0 !important }`
   in its own generated CSS, which loads after this file and wins the tie,
   so the 15px goes on the column instead. The band then measures live's
   484px exactly. */
.lab42-home-stats .et_pb_column {
    padding-bottom: 22px !important;
}

/* ====================================================================
   Round 3 (run r-c61q9l). Two corrections from the live-vs-clone
   verification pass.
   ==================================================================== */

/* 3a. `width: 50%` in round 2 was written against `.et_pb_column`, which
   also caught the full-width 4_4 column carrying the spacer row beneath
   the heading. Scope it to the two half columns. */
.lab42-home-games-h .et_pb_column_1_2 {
    width: 50% !important;
}
.lab42-home-games-h .et_pb_column_4_4 {
    width: 100% !important;
}

/* 3b. Live's #games band is `padding: 90px 0 0` and closes with the
   invisible 3px rule plus its 40px bottom margin, giving a 202px band and
   putting OUR GAMES 93px below the divider above it. The clone's 54px
   symmetric padding sat the heading 28px too high. */
.lab42-home-games-h {
    padding: 9rem 0 0 !important;
}
.lab42-home-games-h .et_pb_divider {
    height: 3px !important;
    margin: 0 0 40px !important;
}

/* ====================================================================
   Round 4 (run r-c61q9l). Mobile sweep at 390px.
   ==================================================================== */

/* 4a. The 114rem divider rule added in round 1 is a FIXED width on an
   absolutely-positioned pseudo-element, so below 1140px it hung 375px off
   each side of a 390px viewport and gave the homepage horizontal scroll.
   Live's rule is the container width, which is itself capped by the
   viewport minus a 20px gutter each side (350px at 390). Cap it the same
   way. Caught by measuring documentElement.scrollWidth against
   clientWidth, which no desktop screenshot would ever show. */
.lab42-home-divider .et_pb_divider:before {
    width: min(114rem, calc(100% - 40px)) !important;
}

/* 4b. Game tiles stack full width on live below the tablet breakpoint
   (live's `.hero__body` measures the full 390 at that viewport). The
   clone held them at 50%, which was survivable until round 1 added
   live's 47px caption inset - a 195px column minus 94px of padding left
   101px for a 54px headline, so every title overflowed its tile. */
@media (max-width: 980px) {
    .lab42-home-games .et_pb_column.lab42-game-tile {
        width: 100% !important;
    }
}

/* ====================================================================
   Round 5 (run r-c61q9l). Mobile typography.

   Live is mobile-FIRST: its base h1/h2/h4 rules use the *Mobile tokens
   and only step up at `min-width: 48em`. Pinning a desktop size with
   `!important` (rounds 1-3) therefore froze the mobile step-down as
   well, so at 390px the stat numbers stayed at 72px in a 181px tile and
   "FULL-TIME STAFF" wrapped onto two lines where live keeps it on one.
   Restate the same properties below 48em using live's own mobile tokens
   so the pins scale the way live does.
   Live @390: number 40.5px · label 20.25px · headings 36px.
   ==================================================================== */
@media (max-width: 47.99em) {
    .lab42-stat-tile .et_pb_module_header {
        font-size: var(--fontSizeH1Mobile, 4.05rem) !important;
    }
    .lab42-stat-tile .et_pb_blurb_description {
        font-size: var(--fontSizeH4Mobile, 2.025rem) !important;
    }
    .lab42-games-heading h2,
    .lab42-home-games .lab42-game-tile__body h2,
    .lab42-about-intro-copy .et_pb_text_inner h2,
    .lab42-about-culture-copy .et_pb_text_inner h2,
    .lab42-about-sumo-copy .et_pb_text_inner h2,
    .lab42-about-values-copy .et_pb_text_inner h2,
    .lab42-about-leamington-copy .et_pb_text_inner h2,
    .lab42-services-vision-h h2,
    .lab42-services-gds-h h2,
    .lab42-services-trusted-copy .et_pb_text_inner h2 {
        font-size: var(--fontSizeH2Mobile, 3.6rem) !important;
    }
    /* Services page (run r-90auel): H1->H2 pins above need the same mobile
       restatement as the About headings, or they'd freeze the step-down.
       (Partner grid stays 2x2 at every width - live's own tiles component
       never stacks to one column, so no mobile override needed there.) */
    /* OUR GAMES and its button stack full width below the breakpoint;
       the 50% pin from round 3 left the heading in a 195px column. */
    .lab42-home-games-h .et_pb_column_1_2 {
        width: 100% !important;
    }
    /* Live's #services band drops to 54px padding at mobile. */
    .lab42-home-stats {
        padding: 5.4rem 0 !important;
    }
}

/* 5b. Zeroing the row padding (rounds 1 and 2) put the desktop content on
   live's 114rem container edge correctly, but also removed the gutter
   live keeps at mobile: below 48em live's `.section__content` runs
   `padding: 0 20px`, so OUR GAMES sits at x20 on a 390px screen, not x0.
   Restore that gutter below the breakpoint only. */
@media (max-width: 47.99em) {
    .lab42-home-stats > .et_pb_row,
    .lab42-home-games-h > .et_pb_row,
    .lab42-about-intro > .et_pb_row,
    .lab42-about-culture > .et_pb_row,
    .lab42-about-sumo > .et_pb_row,
    .lab42-about-values > .et_pb_row,
    .lab42-about-leamington > .et_pb_row {
        padding: 0 2rem !important;
    }
}

/* ====================================================================
   Operator amendment pass 3, run r-v26jfj (2026-08-10).

   Two asks: (a) the gap under the nav and above the footer on /contact/,
   (b) align the MOBILE rendering with live across the whole clone.

   (a) was NOT a CSS problem and is not fixed here. Pages 7 and 8 had
   lost their `_et_pb_use_builder` post meta when their content was
   rewritten in r-90auel, so Divi never wrapped them in
   `.et_builder_inner_content` and never stripped wpautop's `<p>` from
   around the sections. `<p><div>` is illegal, so the browser split it
   into two EMPTY paragraphs, one either side of the sections, each
   self-collapsing to a 15px margin that escaped <main> - 15px under the
   nav and 15px above the footer. Fixed by restoring the meta.

   Everything below is (b). Every target is live's own computed value
   read with getComputedStyle at 390px and 1440px, measured not guessed.
   Probes: artifacts/amend3/*.mjs, data in artifacts/amend3/snap/.

   Live tokens used here (root font-size is 10px, so 1rem = 10px):
     --fontSizeBase 1.8rem (18px)   mobile step-down: 16px / 22px
     --fontSizeH1 7.2rem            --fontSizeH1Mobile 4.05rem (40.5px)
     --fontSizeH2 5.4rem            --fontSizeH2Mobile 3.6rem  (36px)
     --fontSizeH3 2.916rem          --fontSizeH3Mobile 2.7rem  (27px)
   ==================================================================== */

/* --------------------------------------------------------------------
   1. Divi's base stylesheet sets `body { font-weight: 500 }`. Live leaves
   it at 400, so every paragraph on the clone has been rendering half a
   weight heavier than live, site-wide, at every viewport. Same family as
   the `body { font-size: 14px }` trap fixed in r-jv4prp: Divi's is a bare
   element selector, so `html body` (0,0,2) beats it with no !important.
   Invisible to a text diff AND to a height check - weight moves no
   pixels - which is why five prior passes did not see it.
   -------------------------------------------------------------------- */
html body {
    font-weight: 400;
}

/* --------------------------------------------------------------------
   2. Divi also ships `h1, h2, h3, h4, h5, h6 { color: #333 }`. Live has
   no such rule, so its headings inherit `body { color: var(--colorText
   Default) }` = #0b0b0b. Three element selectors (0,0,3) beat Divi's one
   and stay BELOW every class-scoped inverted rule (`.hero--inverted h1`,
   `.lab42-about-section--inverted h2` etc, 0,1,1), so white-on-dark
   headings are untouched.
   -------------------------------------------------------------------- */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
    color: var(--colorTextDefault);
}

/* --------------------------------------------------------------------
   3. Home, "FROM THE TEAM..." - the one heading round 1 of r-c61q9l
   missed. Live is 54px desktop / 36px mobile (the H2 tokens); the clone
   had it on the H1 token at 72px, which at 390px wrapped to two lines
   and stood 144px tall against live's 36px. Live also stores the copy
   already capitalised and applies no text-transform.
   -------------------------------------------------------------------- */
.lab42-team-heading h2 {
    font-size: var(--fontSizeH2, 5.4rem) !important;
    text-transform: none !important;
}

/* --------------------------------------------------------------------
   4. Home game tiles: live gives them NO min-height. Each tile is
   exactly its cover art's aspect ratio - 425x270 for Crusader Kings and
   Call of Duty, 425x239 for Snooker 19 and FM Touch 2018 - so live
   renders 457px and 405px at 1440px, 248px and 219px at 390px. The clone
   pinned `min-height: 480px` at every width, overshooting desktop by
   23-75px and mobile by 232-261px. Those four tiles alone accounted for
   986px of the homepage's +1192px mobile height delta, and this also
   closes the "480 vs 457" desktop item left open after r-c61q9l.
   The column ids are Divi's own and are stable per module.
   -------------------------------------------------------------------- */
.lab42-home-games .et_pb_column.lab42-game-tile {
    min-height: 0 !important;
}
.lab42-home-games .et_pb_column_10.lab42-game-tile,
.lab42-home-games .et_pb_column_11.lab42-game-tile {
    aspect-ratio: 425 / 270;
}
.lab42-home-games .et_pb_column_12.lab42-game-tile,
.lab42-home-games .et_pb_column_13.lab42-game-tile {
    aspect-ratio: 425 / 239;
}

/* --------------------------------------------------------------------
   5. Services pull-quote. Live is 23.4px/1.5 on desktop and steps down
   to 18px/1.5 at mobile; the clone pinned --fontSizeH4 (27px) at every
   width, so at 390px the quote stood 302px tall against live's 135px.
   -------------------------------------------------------------------- */
.lab42-services-quote-text .styled-quote__copy p {
    font-size: 2.34rem !important;
    line-height: 1.5 !important;
}

/* --------------------------------------------------------------------
   6. Services partner logos. The 2x2 grid's tracks were being sized by
   the logo's own 18rem max-width plus 2rem of padding either side, so
   each track had a 220px min-content floor: 2 x 220 + gap = 455px of
   content inside a 350px column, i.e. 85px of horizontal scroll on every
   phone. `minmax(0, 1fr)` lets the tracks shrink; capping the logo at
   the smaller of 18rem and 75% of the tile reproduces live at both ends
   (live: 138px logo in a 183px tile at 390px, 180px in 245px at 1440px)
   with no second breakpoint. The >=981px flex rule above is unaffected.
   -------------------------------------------------------------------- */
.lab42-services-partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.lab42-services-partner-logo img {
    max-width: min(18rem, 75%) !important;
}

/* --------------------------------------------------------------------
   7. THE MOBILE STEP-DOWN, one level below the round-5 heading block.

   Live's stylesheet is mobile-first: `p` only picks up
   `font-size: var(--fontSizeBase)` and `line-height: var(--lineHeight
   Paragraph)` inside `@media (min-width: 64em)`, so below that it sits
   at the body's 16px/22px. Every paragraph pin added in r-c61q9l and
   r-90auel restated --fontSizeBase with `!important` and NO mobile
   counterpart, which froze the step-down: 18px/25.2px on a 390px screen
   where live serves 16px/22px. Same for the H1 and H3 pins.

   This is the trap already documented at round 5 for the stat numbers -
   it just was not carried through to body copy the following two runs.
   -------------------------------------------------------------------- */
@media (max-width: 47.99em) {
    .lab42-team-heading h2 {
        font-size: var(--fontSizeH2Mobile, 3.6rem) !important;
    }

    .lab42-contact-hero-h h1 {
        font-size: var(--fontSizeH1Mobile, 4.05rem) !important;
    }

    .lab42-services-leader-bio .et_pb_text_inner h3,
    .lab42-services-service-card .et_pb_text_inner h3 {
        font-size: var(--fontSizeH3Mobile, 2.7rem) !important;
    }

    .lab42-about-copy .et_pb_text_inner p,
    .lab42-about-intro-copy .et_pb_text_inner p,
    .lab42-about-culture-copy .et_pb_text_inner p,
    .lab42-about-sumo-copy .et_pb_text_inner p,
    .lab42-about-values-copy .et_pb_text_inner p,
    .lab42-about-leamington-copy .et_pb_text_inner p,
    .lab42-services-intro-copy .et_pb_text_inner p,
    .lab42-services-vision-copy .et_pb_text_inner p,
    .lab42-services-leader-bio .et_pb_text_inner p,
    .lab42-services-service-card .et_pb_text_inner p,
    .lab42-services-trusted-copy .et_pb_text_inner p,
    .lab42-services-quote-text .styled-quote__copy p,
    .lab42-services-quote-text .styled-quote__source,
    .lab42-contact-address .et_pb_text_inner p {
        font-size: 1.6rem !important;
        line-height: 1.375 !important;
    }
}

/* --------------------------------------------------------------------
   8. About image pairs (BDO + Culture lunch, GirlTechWM + Special
   Effect). Live's `.width--50` only becomes 50% at min-width 64em -
   measured on live at 390/600/767/768/900px it is full width, and it
   first halves to 512px at 1024px. The clone pinned
   `.lab42-about-imagepair .et_pb_column` to 50% at EVERY width with no
   restatement, so on a phone the pairs stayed side by side at 195px and
   each photo rendered 195x110 where live shows 390x219 stacked. Exactly
   the omission the game tiles already carry a max-width:980px rule for.
   -------------------------------------------------------------------- */
@media (max-width: 63.99em) {
    .lab42-about-imagepair .et_pb_column {
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------
   9. About section padding below 80em.

   Live's `section--padding-*-default` is 90px only from 1280px (80em)
   up; below that it is 60px, flat, all the way down to 390px (measured
   on live at 390/600/767/768/900/1023/1024/1200 = 60px, 1280+ = 90px).
   The clone's About sections carry their desktop value at every width,
   so on a phone every band was 20-30px over-padded top AND bottom.

   The pairs below mirror live's own distribution, which is not
   symmetrical: live hangs the gap under an image-pair band rather than
   over the heading band that follows it, so `.lab42-about-imagepair`
   (the first one, section_3) takes a 60px bottom and `.lab42-about-sumo`
   takes none on top. Section_6's image pair genuinely has 0/0 on live,
   which the clone already matches.

   NOTE for the handover, not fixed here: at >=1280px live runs 90px on
   ALL of these bands, and the clone runs 80px on .lab42-about-intro,
   .lab42-about-sumo and .lab42-about-leamington. That is a desktop
   difference of 60px over the whole page, pre-dating this run.
   -------------------------------------------------------------------- */
@media (max-width: 79.99em) {
    .lab42-about-intro,
    .lab42-about-culture,
    .lab42-about-values,
    .lab42-about-leamington,
    .lab42-about-endband {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .lab42-about-imagepair.et_pb_section_3 {
        padding-top: 0 !important;
        padding-bottom: 60px !important;
    }

    .lab42-about-sumo {
        padding-top: 0 !important;
        padding-bottom: 60px !important;
    }
}