/* 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 per operator brief. */
body:not(.home) .header.header--inverted,
.header.header--solid {
    background-color: #292929;
}
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: center;
}
.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: center !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: center !important;
    margin: 2rem 0 3rem 0 !important;
}
.lab42-about-awards-img {
    text-align: center !important;
    margin: 0 auto !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: centred copy + button. */
.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: center;
}
.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(--fontSizeH1, 7.2rem) !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;
}
.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: 100% !important;
}
.lab42-services-leader-img img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    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. */
.lab42-services-gds > .et_pb_row {
    max-width: 90rem !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 2rem !important;
}
.lab42-services-gds-h h2 {
    font-family: var(--fontFamilyHeading) !important;
    font-size: var(--fontSizeH1, 7.2rem) !important;
    font-weight: 700 !important;
    margin: 0 0 3rem 0 !important;
    text-transform: uppercase !important;
    text-align: center !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;
}
.lab42-services-gds .et_pb_button_module_wrapper {
    text-align: center !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: center !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: var(--colorSecondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !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(--fontSizeH1, 7.2rem) !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;
}
.lab42-services-partner-logo {
    text-align: center !important;
    background: #ffffff !important;
    padding: 2rem !important;
    margin: 0 0.75rem 1.5rem 0.75rem !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).
   ==================================================================== */

.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: center !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: center !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: center !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);
}