/*
 * Browser-specific corrections.
 *
 * Kept separate from the Webflow-generated stylesheets so a future re-export
 * cannot overwrite it. Must be linked AFTER twobrains.webflow.css — the
 * selectors below have the same specificity as the originals and win only by
 * source order.
 */



/* ---------------------------------------------------------------------------
 * Circular hero gradient on expertise / how-we-deliver / about — the gradient
 * was painted as a rectangle over the circle instead of being clipped by it.
 *
 * The circle comes from border-radius + overflow:hidden on .exp-hero_mask. That
 * combination is unreliable once a descendant lives on its own GPU layer, and
 * here two triggers meet: .exp-hero_gradient-canvas carries a transform, and it
 * contains a WebGL canvas. Whether the rounded clip is applied then depends on
 * the graphics driver — which is why the bug appears on some machines and not
 * on others, in the same Firefox version.
 *
 * clip-path is applied during compositing and therefore clips composited layers
 * reliably. inset(0 round …) reproduces the existing border-radius exactly, so
 * the shape is unchanged. Applied to all browsers rather than gated behind
 * @supports, because the underlying weakness is not Firefox-specific and the
 * rendered result in Chrome is identical.
 * --------------------------------------------------------------------------- */
.exp-hero_mask {
  clip-path: inset(0 round var(--border-radius-big));
}

/* expertise only. There IX3 animates the canvas container's horizontal position
 * (x: 0% → -50% → -100% on .exp-hero_gradient-canvas.is-exp). Firefox runs
 * animated transforms on the compositor, rendering that element independently —
 * an ancestor's clip is then not applied to it, so clip-path alone leaves the
 * gradient unclipped. Promoting the container with translateZ(0) does not help
 * either, because the child owns its own animated layer.
 *
 * A mask is applied as a separate step over the composited result and therefore
 * also catches compositor-animated children.
 *
 * Deliberately NOT applied site-wide: masks are re-rasterised whenever the
 * element's size changes. On about, where the circle shrinks while scrolling,
 * that made the mask lag a frame behind and briefly exposed the unmasked square.
 * Those pages have a static canvas container, so clip-path is sufficient there.
 * .section-exp_hero exists only on expertise; .section-hwd_hero covers the
 * other two. */
.section-exp_hero .exp-hero_mask {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 99.9%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 50%, #000 99.9%, transparent 100%);
}