/* Banner Styles */
.banner-desktop {
  display: flex;
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-height));
  height: calc(100svh - var(--header-height));
  box-sizing: border-box;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  /* opacity: 0; */
}

@media (max-width: 768px) {
    .banner-desktop {
        display: none;
    }
}

/* Hero photo (Customizer > Site Identity > Banner Image):
   beexat_homepage_hero-scaled.jpg (2560x1158; car = 27.9% of the photo
   width, centred at 54.5% across / 58% down). Placed per the Figma
   "widescreen" frame (1920px, W = screen width): car (39.5%-67.5% of the
   photo, measured on the live page) 0.33W wide starting at 0.417W - a clear
   gap after the title, as in Figma - so the photo is 1.183W wide starting
   0.05W left of the screen. The car's middle is level
   with the text (middle of the hero), but the photo never starts below the
   menu. The text and header use the wider --page-max-wide frame. */
.banner-desktop {
  background: #001E5A;
  --bx-max: var(--page-max-wide, var(--page-max, 1440px));
  --bx-g: min(100vw - 2 * var(--page-gutter, 4rem), var(--bx-max) - 2 * var(--page-gutter, 4rem));
  --bx-l: calc((100vw - var(--bx-g)) / 2);
}

.site-banner {
  position: absolute;
  z-index: 0;
  left: calc(100vw * -0.050);
  top: min(0px, calc(50% - 100vw * 0.310));
  width: calc(100vw * 1.183);
  height: auto;
  max-width: none;
  display: block;
  box-sizing: border-box;
  -webkit-mask-image:
    linear-gradient(to right, transparent 5%, #000 33%, #000 92%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 85%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 5%, #000 33%, #000 92%, transparent 100%),
    linear-gradient(to bottom, #000 0%, #000 85%, transparent 100%);
  mask-composite: intersect;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Light tint only - the photo's edges already fade out (mask above);
     keeps the text on the left readable without darkening the car. */
  background: linear-gradient(to right, #001E5A 0%, #001E5A 22%, rgba(0, 30, 90, 0.45) 42%, rgba(0, 30, 90, 0.15) 62%, rgba(0, 30, 90, 0.10) 100%);
  /* pointer-events: none; */
  z-index: 0;
}

.banner-content {
  position: absolute;
  top: 0;
  /* left: 0; */
  /* Text + arrow are centred on the car: the car's middle is at
     min(half the hero, 0.31W) from the top (see .site-banner), so this box
     is twice that tall - on tall screens text, car and arrow stay together
     near the top instead of the text sliding down below the car. */
  height: min(100%, calc(100vw * 0.620));
  width: 100%;
  /* max-width: var(--container-width); */
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  /* Hero text starts on the same line as the header logo (shared page
     grid): the page gutter, plus half of whatever is left once the screen
     is wider than the 1440px page width. */
  padding: 0 max(var(--page-gutter), calc((100% - var(--bx-max, var(--page-max))) / 2 + var(--page-gutter)));
  gap: 4rem;
  z-index: 1;
}

.banner-content-left {
  flex: 0 0 50%;
  max-width: 37.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Text column starts on the page grid's left line (the header logo). The
   old margin-left:auto on it would now push it to the right. */
.banner-content-left.margin-left-auto {
  margin-left: 0;
}

/* Arrow sits right of the car, its right edge on the page grid's right line
   (under the "Get in touch" button) - was centred with padding-right: 40%. */
.banner-content-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  /* Figma: the arrow covers only the car's nose and is level with the car -
     tied to the grid width like the photo, so arrow and car stay together
     on every screen size. */
  align-self: center;
  margin-top: calc(100vw * 0.026); /* Figma: arrow centre a touch below the car's middle */
  margin-right: max(0px, calc(100vw * 0.102 - var(--bx-l))); /* arrow ends at 0.898W, over the car's nose */
}

/* A grid stack: both .banner-icon svgs (the base one and, on iOS, the
   overlay) are placed in the same 1x1 grid cell via grid-area below, so they
   render exactly on top of each other sized off the same track - unlike
   position: absolute against an auto-sized wrapper, this doesn't depend on a
   shrink-to-fit calculation that excludes the absolutely-positioned child,
   which is where iOS Safari and Windows browsers were disagreeing. */
.banner-icon-wrap {
  display: grid;
}

.banner-icon-wrap .banner-icon {
  grid-area: 1 / 1;
}

/* iPadOS's ScrollTrigger refresh (address-bar show/hide, webfont-triggered
   header resize) makes the arrow's normal scrub-linked opacity tween in
   banner-transition.js jump straight to its end value instead of easing
   there - the arrow disappearing "instantly" with no scroll. Rather than
   untangle that from the pin/clip-zoom timeline's refresh handling, a second
   identical arrow sits in front of it on iOS, faded out by its own separate,
   simpler scroll-linked tween. Hidden everywhere else. */
.banner-icon-ios-overlay {
  display: none;
}

html.is-ios .banner-icon-ios-overlay {
  display: block;
  pointer-events: none;
  z-index: 2;
}

.banner-subtitle {
  color: #8AA2CC;
  font-family: Swiza, sans-serif;
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2.25rem;
  margin: 0;
}

.banner-title {
  margin: 0;
  line-height: 3.5rem;
  white-space: nowrap;
}

.banner-title-orange {
  color: #FF7D00;
  font-family: Swiza, sans-serif;
  font-size: 3.75rem; /* Figma: Swiza SemiBold 60px / 56px line height */
  font-style: normal;
  font-weight: 600;
  line-height: 3.5rem;
}

.banner-title-white {
  color: #FFF;
  font-family: Swiza, sans-serif;
  font-size: 3.75rem; /* Figma: Swiza SemiBold 60px / 56px line height */
  font-style: normal;
  font-weight: 600;
  line-height: 3.5rem;
}

.banner-description {
  color: #FFF;
  font-family: Swiza, sans-serif;
  font-size: 1.1875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem;
  margin: 0;
}

.banner-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.banner-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-family: Swiza, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  transition: background-color 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease;
  display: inline-block;
  text-align: center;
}

.banner-btn-primary {
  background: #FF7D00;
  color: #FFF;
  border: 2px solid #FF7D00;
}

.banner-btn-primary:hover {
  background: #FFA233;
  border-color: #FFA233;
  color: #FFF;
}

.banner-btn-secondary {
  background: transparent;
  color: #FFF;
  border: 2px solid #FFF;
}

/* .banner-btn:hover {
  opacity: 0.9;
} */

.banner-btn-secondary:hover {
  background: transparent;
    border-color: #FF7D00;
    color: #FF7D00;
}

.banner-icon {
  width: 100%;
  width: calc(100vw * 0.155); /* Figma widescreen: arrow 0.155W wide */
  max-width: none;
  height: auto;
  /* opacity: 0; */
}

.why-beexact-reveal {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    /* Spans the full section - .why-beexact-clip inside it now holds both
       the video area and .banner-scrub-text, so the single arrow-shaped
       clip-path mask reveals the text together with the video as it scales
       up, instead of the text fading in separately afterwards. */
    height: 100%;

    z-index: 2;
    pointer-events: none;
}

/* Scroll-synced text + progress dots shown under the scrub video, one of
   6 versions matching the video's 6 scenes / the Solutions sub-pages. Sits
   inside .why-beexact-clip (after .why-beexact-video-area), fully opaque at
   all times - visibility comes entirely from .why-beexact-clip's own
   arrow-shaped clip-path mask, the same as the video next to it, rather
   than a separate opacity fade of its own. banner-transition.js still
   fades its single .banner-scrub-text__item between the 6 word/body
   versions as the user scrolls through the video-scrub phase - that's
   unrelated and unaffected. */
.banner-scrub-text {
    flex: 0 0 35%;
    min-height: 0;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 2rem;

    padding: 0 2rem;
    box-sizing: border-box;
    text-align: center;
    pointer-events: none;
}

.banner-scrub-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.banner-scrub-progress__segment {
    width: 2.5rem;
    height: 0.25rem;
    border-radius: var(--radius-pill, 999px);
    background: #D7DCE3;
    transition: background-color 0.3s ease;
}

.banner-scrub-progress__segment.is-active {
    background: var(--brand-primary-bright, #FF7D00);
}

.banner-scrub-text__track {
    position: relative;
    width: 100%;
    max-width: 40rem;
    /* Fixed rather than auto so the height doesn't jump as scenes with
       different body-text lengths swap in. */
    height: 9rem;
}

/* Only one .banner-scrub-text__item ever exists in the DOM - its word/body
   text is replaced directly (banner-transition.js) rather than 6 separate
   items crossfading, so two scenes' text can never occupy the same space
   at once, however fast the user scrolls back and forth. */
.banner-scrub-text__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.banner-scrub-text__title {
    margin: 0;
    color: var(--brand-primary-dark, #001E5A);
    font-family: Swiza, sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
}

/* Review 21 Sept: "be exact" lower-case and blue (same blue as the rest of
   the phrase), no longer orange. */
.banner-scrub-text__accent {
    color: var(--brand-primary-dark, #001E5A);
}

.banner-scrub-text__body {
    margin: 0;
    max-width: 34rem;
    color: var(--brand-primary-dark, #001E5A);
    font-family: Swiza, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.5rem;
}

.why-beexact-clip {
  background: white;
    /* Column stack of .why-beexact-video-area (video, ~65%) then
       .banner-scrub-text (~35%) - both children of the single clip-path
       mask below, so they're revealed together. */
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;

    clip-path: url("#bannerArrowClip");
    -webkit-clip-path: url("#bannerArrowClip");

    /* The arrow-shaped clip-path above is applied unconditionally, from the
       very first paint, in the exact size/position of .banner-icon - so
       without this, the video's first frame (as soon as it's decoded) shows
       straight through that window on top of the arrow icon (z-index 2 vs.
       1) with no scroll needed, which is what actually looked like the
       arrow icon "instantly fading" on Safari/iPadOS (video decode/paint is
       just slower there, so it was more visible mid-load than on Chrome).
       banner-transition.js fades this in for real once the reveal begins;
       the .clip-arrow path's own autoAlpha tween doesn't do this, since
       opacity on a path used only inside a <clipPath> has no visual effect. */
    opacity: 0;
}

/* Was .why-beexact-clip's own centering (display:flex;justify-content:
   center;align-items:center;) before .banner-scrub-text moved inside it -
   pulled into its own flex-basis so the video keeps the same footprint
   while .banner-scrub-text takes the remaining space below it. No
   overflow: hidden here (deliberately) - .why-beexact-clip's arrow-shaped
   clip-path is meant to be the only thing gating visibility, now that it
   spans the full height; a hard overflow boundary here at the old 65% line
   would re-cut the reveal there, capping the growing arrow mask at the
   video's edge and never letting it reach .banner-scrub-text below. */
.why-beexact-video-area {
    flex: 0 0 65%;
    /* Flex items default to min-height:auto (= the video's full intrinsic
       height), which let the video area grow past its 65% share and push
       the scene text out of the pinned viewport on shorter laptop screens. */
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-scrub {
    display: block;
    margin: auto;
    /* Fit inside its 65% area instead of rendering at the file's intrinsic
       1500x566 - on a 1280/1536px laptop viewport that overflowed sideways
       and pushed the scene text below the fold. */
    width: auto;
    height: auto;
    /* F12: "smaller, more subtle size ... more breathing room around it".
       Capped at 1000px wide at the 1920px design size (scales with the
       layout) - also keeps the 1500px source from being upscaled/blurry. */
    max-width: min(100%, 62.5rem);
    max-height: 100%;
    object-fit: contain;
}

.banner-transition {
    position: relative;
    width: 100%;
    /* Pinned directly under the sticky header, so it must be viewport minus
       header - a full 100vh pushed the bottom (scene text) off-screen. */
    height: calc(100vh - var(--header-height));
    height: calc(100svh - var(--header-height));
    overflow: hidden;
}

.clip-arrow {
    visibility: hidden;
}

.banner-changing-word {
    display: inline-block;
    position: relative;
    white-space: nowrap;
}

.margin-left-auto {
  margin-left: auto;
}