.custom-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.custom-lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-image {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 40px;
  cursor: pointer;
}
.careers-desc {
  will-change: height, opacity; /* tells browser to prepare for animation */
  transform: translateZ(0); /* promotes to GPU layer — prevents repaint flash */
}
/* .manual-slider {
  position: relative;
  overflow: hidden;
}

.slider-wrapper_carousel {
  position: relative;
  height: 350px;
}

.slider-wrapper_carousel > * {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
} */
/* @media (max-width: 767px) {
  .selected-tab-menu {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    cursor: grab;
  }

  .selected-tab-menu .w-tab-link {
    flex-shrink: 0;
    white-space: nowrap;
  }
} */
/* Remove bottom gray line from active tab */
/* Remove all possible underline indicators */
/* .w-tab-link.w--current {
  border-bottom: 0 !important;
  border: none !important;
  background-image: none !important;
  text-decoration: none !important;
  box-shadow: inset 0 -2px 0 transparent !important;
}

/* If it's a separate element (like an underline div) */
/* .w-tab-menu .w-tab-link .tab-underline,
.w-tab-menu .underline,
.w-tab-menu .w--current + .tab-underline {
  display: none !important;
  opacity: 0 !important;
} */
.iti {
  width: 100%;
}

/* ============================================================
   BRH HERO — Polka dot field + soft breath  ·  Built by Concreate
   ============================================================ */
.section-home-hero {
  position: relative;
  /* No text/image selection while dragging the collage */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Keep headline above the dots, cards above the dots */
.section-home-hero .padding-global {
  position: relative;
  z-index: 2;
}
.section-home-hero .marquee-wrapper-2 {
  z-index: 1;
}
/* Bottom fade is decorative — let clicks/drags pass through to images */
.section-home-hero .div-block-71 {
  pointer-events: none;
}

/* Sharp edges on the hero collage images (override Webflow radius) */
.section-home-hero .card-wrapper-new,
.section-home-hero .card-wrapper-new .parallax-img {
  border-radius: 0 !important;
}

/* Start hidden so the JS intro can shuffle positions + stagger them in
   without a flash of the un-animated Webflow layout. home.js reveals
   them (and the reduced-motion path shows them immediately). */
.section-home-hero .card-wrapper-new {
  opacity: 0;
}

/* ============================================================
   BRH HERO COPY + NAVBAR — start hidden for the JS stagger intro.
   A delayed fallback animation reveals them if the script never runs,
   so the navbar/copy can't get stuck invisible.  ·  Built by Concreate
   ============================================================ */
/* Hero copy (homepage only — .section-home-hero exists only there) and
   the navbar (ALL pages — global.js staggers it in everywhere) start
   hidden. The 2.4s fallback reveal means a script failure can never
   leave the navbar/copy stuck invisible. */
.section-home-hero .hero-title,
.section-home-hero .description-txt,
.section-home-hero .cs-link,
.section-home-hero .hero-bh-logo,
.navbar .bh-logo_link,
.navbar .nav-links,
.navbar .language-wrapper,
.navbar .explore-link {
  opacity: 0;
  animation: brhIntroFallback 0.01s linear 2.4s forwards;
}
/* each logo shape scales around its OWN centre during the intro */
.section-home-hero .hero-bh-logo svg path {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
@keyframes brhIntroFallback {
  to {
    opacity: 1;
  }
}
.brh-word {
  display: inline-block;
}

/* ============================================================
   BRH PAGE TRANSITIONS — soft enter + exit  ·  Built by Concreate
   Enter + exit are OPACITY-ONLY (no transform). The navbar is now
   position:fixed (smart hide-on-scroll below), and ANY transform on an
   ancestor like .page-wrapper turns "fixed" into "absolute" — so we
   only ever FADE the page wrapper, never translate it.
   ============================================================ */
.page-wrapper {
  animation: brhPageEnter 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes brhPageEnter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.page-wrapper.brh-leaving {
  opacity: 0;
  transition: opacity 0.32s ease;
}
@media (prefers-reduced-motion: reduce) {
  .page-wrapper {
    animation: none;
  }
  .page-wrapper.brh-leaving {
    transition: none;
    opacity: 1;
  }
}

/* ============================================================
   BRH SMART NAVBAR — reveal on scroll up, hide on scroll down
   ·  Built by Concreate
   The navbar is fixed so it can float down from the top at ANY scroll
   position (slight scroll up = it slides in). global.js toggles
   .brh-nav-hidden based on scroll direction. .section-navbar reserves
   the bar's height so content doesn't jump under it. The navbar keeps
   its own SOLID, per-page background (never transparent). z-index stays
   1000 (from .w-nav); the homepage intro overlay still sits above it.
   ============================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.navbar.brh-nav-hidden {
  transform: translateY(-100%);
}
/* reserve the fixed navbar's footprint so the page doesn't jump up
   (global.js keeps this exact to the live navbar height) */
.section-navbar {
  min-height: 64px;
}

/* Smoothness: keep cards on their own GPU layer, kill subpixel flicker */
.section-home-hero .card-wrapper-new {
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: box-shadow 0.45s ease;
  cursor: grab;
}
.section-home-hero .card-wrapper-new:active {
  cursor: grabbing;
}
.section-home-hero .card-wrapper-new .parallax-img {
  pointer-events: none; /* hover is tracked on the cursor, not the img */
  -webkit-user-drag: none; /* no native image drag ghost */
  user-select: none;
}

/* The image nearest the cursor gets a soft shadow so it reads as
   raised. No z-index — stacking never changes, so nothing snaps. */
.section-home-hero .card-wrapper-new.brh-front {
  box-shadow: 0 22px 44px -16px rgba(20, 20, 19, 0.28);
}

.brh-dot-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Vellum-toned dots */
  background-image: radial-gradient(
    rgba(31, 30, 29, 0.18) 1.4px,
    transparent 1.6px
  );
  background-size: 26px 26px;
  background-position: 0 0;
  /* Soft vignette so dots fade toward the edges */
  -webkit-mask-image: radial-gradient(
    ellipse 80% 75% at 50% 45%,
    #000 55%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 80% 75% at 50% 45%,
    #000 55%,
    transparent 100%
  );
  opacity: 0.55;
  will-change: opacity;
  animation: brhDotBreath 6s ease-in-out infinite;
}

/* The dots are split into 25 interleaved layers (5x5) so home.js can
   fade them in in a shuffled order — the field "develops in" as a random
   scatter of dots instead of appearing all at once. Each layer carries
   1/25 of the grid (background-size = 5 x 26px), offset per layer; the 25
   together reconstruct the full 26px dot grid. home.js nulls the field's
   own background once the layers exist.  ·  Built by Concreate */
.brh-dot-layer {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(31, 30, 29, 0.18) 1.4px,
    transparent 1.6px
  );
  background-size: 130px 130px;
  will-change: opacity;
}

@keyframes brhDotBreath {
  0%,
  100% {
    opacity: 0.42;
  }
  50% {
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brh-dot-field {
    animation: none;
    opacity: 0.55;
  }
}

/* ============================================================
   BRH HW — two-up spotlight carousel falloff  ·  Built by Concreate
   Fades the right ("next") image into the section bg (rgb(9,9,9)).
   ============================================================ */
.hw-falloff {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(9, 9, 9, 0) 50%,
    rgba(9, 9, 9, 1) 95%
  );
}

/* ============================================================
   BRH PRICING — equal-height cards + "Most Recommended" band above
   ·  Built by Concreate
   Cards stretch to equal height (features section fills the slack so
   there's no hollow bottom). The band (.div-block-72) is lifted OUT
   of the card body by pricing.js (class .brh-band-above) and floated
   as a bar above the recommended card, so all bodies stay top-aligned
   AND equal height.
   ============================================================ */
.pricing-details-grid {
  align-items: stretch;
}
.pricing-details-grid > * {
  display: flex;
  flex-direction: column;
  position: relative;
}
/* ============================================================
   BRH PRICING — MOBILE (<=991px): clean single-column stack, no overlap.
   Webflow makes .sticky-1/2/3 position:sticky at <=991 (a card-deck
   "stacking" effect) and the lifted "Most Popular" band is absolute
   ABOVE the recommended card — together they rode over the card above
   in the one-column mobile layout. On mobile we (1) drop the sticky
   stack so cards flow one under another, (2) put the band back IN FLOW
   at the TOP of its card (flex order), and (3) add a clear gap between
   cards. Desktop is unchanged. Built by Concreate.
   ============================================================ */
@media (max-width: 991px) {
  /* Mobile card-deck: each CARD pins just below the navbar and the next card
     scrolls up to stack over it (z-index rises per card). Webflow's native
     stack lived on the inner .sticky-N wrapper, which is trapped inside each
     fixed-height card so it never travelled — moving sticky to the card itself
     makes the deck actually work. The "Most Popular" band rides IN FLOW at the
     top of the recommended card so it can never slip behind a neighbour.
     Built by Concreate. */
  .pricing-details-grid {
    row-gap: 20px;
  }
  .pricing-details-grid > .pricing-item {
    position: sticky;
    top: 84px;
  }
  .pricing-details-grid > .pricing-item:nth-child(1) { z-index: 1; }
  .pricing-details-grid > .pricing-item:nth-child(2) { z-index: 2; }
  .pricing-details-grid > .pricing-item:nth-child(3) { z-index: 3; }
  .pricing-details-grid > .pricing-item:nth-child(4) { z-index: 4; }
  .pricing-details-grid > .pricing-item:nth-child(5) { z-index: 5; }
  /* the card's own inner sticky wrapper must NOT also stick */
  .pricing-item .sticky-1,
  .pricing-item .sticky-2,
  .pricing-item .sticky-3 {
    position: relative !important;
    top: auto !important;
  }
  /* band back in normal flow at the top of the recommended card (not floated),
     so it stacks with the card and never falls behind the card above */
  .div-block-72.brh-band-above {
    position: static !important;
    order: -1;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    border-radius: 12px 12px 0 0;
  }
}
.pricing-details-grid > * > .pricing-content-wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
/* features section grows to fill the extra height (its bg = page bg) */
.pricing-details-grid .features-container {
  flex: 1 1 auto;
}
/* the lifted band sits flush above the card body, as an off-white bar
   (its native bg = page colour, which would blend once lifted out) */
.div-block-72.brh-band-above {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  border-radius: 12px 12px 0 0;
  /* warm tan fill (distinct from the off-white body) + a small border
     all around — the bottom edge is the single 1px divider */
  background: rgb(243, 237, 227);
  border: 1px solid rgb(200, 191, 182);
}
/* body: square the top + drop ITS top border, so the only divider is
   the band's 1px bottom edge (no doubled/bulky seam). .brh-rec-card is
   added to the card by pricing.js */
/* NOTE: the body sits under an intermediate .sticky-2 wrapper
   (.brh-rec-card > .sticky-2 > .pricing-content-wrapper), so a direct-child
   chain never matched. A descendant match squares the body top + drops its
   top border, leaving the band's single 1px bottom edge as the only divider. */
.brh-rec-card .pricing-content-wrapper {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 0;
}

/* Injected price subnote: hide when the CMS Price Note field is empty so it
   adds no gap on cards without a note. Built by Concreate. */
.price-note-txt:empty {
  display: none;
}

/* Align the Get Started CTAs across all 3 cards. The description is the only
   multi-line header element; with the site's fluid clamp() fonts its 2-line
   box rounds to a fractional height that differs 1-2px per card, nudging the
   button row out of line. Pin it to a uniform em height so every header ends
   at the same point and the CTAs align.  ·  Built by Concreate */
.price-desc {
  min-height: 3.1em;
}
/* The three visible cards render different conditional variants (sticky-1/2/3)
   whose header spacing differs by a few px, so the Get Started buttons fell
   ~1-6px out of line. Pin the whole header block to a uniform height on the
   3-up desktop layout so every button starts at the same Y. The features list
   below still grows (flex:1) to keep card heights equal.  Built by Concreate */
@media (min-width: 992px) {
  .pricing-details-grid .pricing-header {
    min-height: 250px;
  }
}

/* Pricing free-audit banner + per-section notes (static). Built by Concreate. */
.brh-audit-banner {
  max-width: 1200px;
  margin: 32px auto 0;
  padding: 18px 24px;
  text-align: center;
  background: rgb(233, 226, 212);
  border: 1px solid rgb(233, 226, 212);
  border-radius: 9.6px;
  font-size: 14px;
  line-height: 1.5;
  color: rgb(20, 20, 19);
}
.brh-audit-banner strong { color: #c34920; }
.brh-section-note {
  margin-top: 22px;
  padding: 12px 16px;
  background: rgb(243, 237, 227);
  border: 1px solid rgb(200, 191, 182);
  border-radius: 9.6px;
  font-size: 13px;
  line-height: 1.5;
  color: rgb(61, 61, 58);
}
.brh-section-note strong { color: rgb(20, 20, 19); }

/* ============================================================
   BRH PRICING TABS — sliding black highlight  ·  Built by Concreate
   A single pill slides behind the active tab (pricing.js positions it)
   instead of the black background jumping between tabs.
   ============================================================ */
.pricing-tabs .brh-tab-pill {
  position: absolute;
  top: 0;
  left: 0;
  background: #090909;
  border-radius: 9999px;
  z-index: 0;
  pointer-events: none;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.38s cubic-bezier(0.4, 0, 0.2, 1), height 0.38s ease;
}
.pricing-tabs .w-tab-link {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}
/* kill the per-tab black bg — the sliding pill is the highlight now */
.pricing-tabs .w-tab-link.w--current {
  background-color: transparent !important;
}

/* ============================================================
   BRH CASE STUDY GALLERY — smaller control icons + hover nudge
   ·  Built by Concreate
   ============================================================ */
.left-arrow svg,
.right-arrow svg,
.full-screen-link svg {
  transition: transform 0.25s ease;
}
/* centre the smaller icon inside its (fixed-size) embed wrapper */
.left-arrow .arrow-svg,
.right-arrow .arrow-svg,
.full-screen-link .full-screen-icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
}
.left-arrow svg,
.right-arrow svg {
  width: 15px !important;
  height: 15px !important;
}
.full-screen-link svg {
  width: 22px !important;
  height: 22px !important;
}
.left-arrow:hover svg {
  transform: translateX(-3px);
}
.right-arrow:hover svg {
  transform: translateX(3px);
}
.full-screen-link:hover svg {
  transform: scale(1.12);
}

/* "Up Next" arrow — nudge right on hover */
.cs-next-arrow svg {
  transition: transform 0.25s ease;
}
.cs-next-arrow:hover svg {
  transform: translate(3px, -3px);
}

/* ============================================================
   BRH CORE SERVICES — kill the gap below the section  ·  Built by Concreate
   The section + its bg layer were set to height:400vh (4x the
   viewport), so ~400px of empty space sat below the content and it
   shifted per device (vh scales with screen height). Make the height
   follow the content instead. CSS-only — Webflow's interactions are
   left untouched.
   ============================================================ */
.section-core-services {
  height: auto !important;
}
.section-core-services .div-block-68 {
  height: 100% !important;
}

/* ============================================================
   BRH MARQUEE — responsive logo gaps  ·  Built by Concreate
   The desktop logo gap (~44px) is far too wide on a phone, where the
   logos shrink — you only see two logos with a big hole between them.
   Tighten the gap on mobile. !important so it wins over the inline gap
   global.js sets (and works even if that script is cached/stale). We
   set BOTH the in-set gap (.w-dyn-items) AND the between-set gap (the
   track) to the SAME value so the infinite loop stays seamless.
   ============================================================ */
@media (max-width: 767px) {
  .marquee-wrapper,
  .marquee-wrapper .w-dyn-items,
  .brand-logo-wrapper,
  .brand-logo-wrapper .w-dyn-items {
    column-gap: 24px !important;
  }
}
@media (max-width: 479px) {
  .marquee-wrapper,
  .marquee-wrapper .w-dyn-items,
  .brand-logo-wrapper,
  .brand-logo-wrapper .w-dyn-items {
    column-gap: 14px !important;
  }
}

/* ============================================================
   BRH CASE STUDIES — swipeable category tabs on mobile
   ·  Built by Concreate
   The 5 category tabs sit in a nowrap flex (~1432px of content) that's
   right-aligned (justify-content:flex-end) with overflow:visible — so on
   a phone the last categories spill off-screen with no way to reach them.
   On mobile we left-align the strip and make it horizontally swipeable
   (native touch scroll, momentum on iOS, hidden scrollbar). Tabs keep
   their full width (flex:0 0 auto) so they stay easy tap targets.
   Scoped to .cs-page so no other tab menus are affected.
   ============================================================ */
@media (max-width: 767px) {
  .cs-page .tabs-menu.w-tab-menu {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* old Edge */
  }
  .cs-page .tabs-menu.w-tab-menu::-webkit-scrollbar {
    display: none; /* WebKit */
  }
  .cs-page .tabs-menu.w-tab-menu > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Contact page: centre the social icons on mobile. They sit in a left-aligned
   flex row that Webflow narrows to 60% width, so they drifted left of the
   centred heading/subtext. Full width + centre on phones. Built by Concreate */
@media (max-width: 767px) {
  .social-media-wrapper {
    width: 100% !important;
    justify-content: center;
  }
}

/* Careers team columns: the container is display:flex but carries
   grid-template-columns (which only applies to display:grid, so it's ignored),
   leaving each member column sized to its content — hence the uneven widths.
   Force equal-width columns on the row (desktop/tablet) layout; on mobile the
   container stacks to a column, so leave those alone. Built by Concreate */
@media (min-width: 768px) {
  .team-memebers .team-wrapper {
    flex: 1 1 0;
    min-width: 0;
  }
}