/* Base Hero Section */
.parallax-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Content Container */
.parallax-hero-inner {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.parallax-hero-content {
  position: relative;
  z-index: 11;
}

/* Text Alignment */
.parallax-hero-text-left .parallax-hero-content {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

.parallax-hero-text-center .parallax-hero-content {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.parallax-hero-text-right .parallax-hero-content {
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}

/* Typography */
.parallax-hero-heading h1,
.parallax-hero-heading h2 {
  margin: 0 0 0.5em;
  line-height: 1.1;
}

.parallax-hero-subheading p {
  margin: 0;
  max-width: 40rem;
}

.parallax-hero-text-center .parallax-hero-subheading p {
  margin-left: auto;
  margin-right: auto;
}

/* Image Background */
.parallax-hero-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

/* Video Background */
.parallax-hero-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.parallax-hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
}

/* Gradient Overlay */
.parallax-hero-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Parallax Background Container */
.parallax-hero-bg {
  position: absolute;
  inset: 0;
  overflow: visible; /* Allow scaled layers to extend beyond edges */
  pointer-events: none;
  z-index: 0;
  width: 100%;
  height: 100%;
}

/* Parallax Layers Base */
.parallax-hero-layer {
  position: absolute;
  will-change: transform;
  pointer-events: none;
  /* Force GPU acceleration for smoother scrolling */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Optimize for performance */
  contain: layout style paint;
  isolation: isolate;
}

/* Image Layers. The opacity set per layer in the editor arrives as --layer-opacity
   (module.html), so the loading state below can hide a layer without fighting an
   inline style. */
.parallax-hero-layer-image {
  background-position: center center;
  background-repeat: no-repeat;
  opacity: var(--layer-opacity, 1);
  transition: opacity 0.6s ease;
}

/* Until its own image has arrived, a layer stays hidden; module.js adds .is-loaded
   to each one as it loads, so they fade in one at a time. The animation is only a
   fallback: if the script never runs, the layers still appear after 4s. */
.parallax-hero--loading .parallax-hero-layer-image:not(.is-loaded),
.parallax-hero--loading .parallax-hero-bg-image:not(.is-loaded) {
  /* Mark (20 Oct 2026): 6s (was 4s) so the script's reveal-all-together at 5s wins. */
  animation: parallax-hero-layer-in 0.6s ease 6s forwards;
  opacity: 0;
}

.parallax-hero-bg-image {
  transition: opacity 0.6s ease;
}

@keyframes parallax-hero-layer-in {
  to {
    opacity: var(--layer-opacity, 1);
  }
}

/* Image layers without explicit dimensions should fill the container */
.parallax-hero-layer-full {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Rich Text Content Layers */
.parallax-hero-layer-content {
  pointer-events: auto; /* Allow interaction with content */
  /* Ensure content layers are visible - they'll size to content */
  min-width: fit-content;
  min-height: fit-content;
}

.parallax-hero-content-inner {
  position: relative;
  /* Size to content, not 100% of parent */
  width: auto;
  height: auto;
  /* Ensure rich text content displays properly */
  display: block;
}

/* Above 1920px the hero scales with the screen, so a 2560px screen shows the 1920px
   layout made larger rather than the same 104px headline in a 1920px column (Riyaadh,
   7 Oct). The column loses its cap and keeps its 80px-at-1920 side padding in
   proportion; the text block (headline and award badges) is zoomed by screen width /
   1920. tan(atan2(100vw, 1920px)) is that ratio as a plain number, which zoom needs.
   The zoom sits inside the layer that module.js moves on scroll, so the parallax
   movement is not multiplied. */
@media (min-width: 1921px) {
  .parallax-hero .parallax-hero-container-wrapper {
    max-width: none;
    padding-left: calc(100vw * 80 / 1920);
    padding-right: calc(100vw * 80 / 1920);
  }

  .parallax-hero .parallax-hero-content-inner {
    zoom: tan(atan2(100vw, 1920px));
  }
}

/* Layer Images Container */
.parallax-hero-layer-images {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1.5rem;
}

.parallax-hero-layer-images img {
  height: auto;
  object-fit: contain;
}

/* Responsive */
@media (max-width: 768px) {
  .parallax-hero-layer-images {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .parallax-hero-inner {
    padding: 0 1rem;
  }

  .parallax-hero-text-left .parallax-hero-content,
  .parallax-hero-text-right .parallax-hero-content {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .parallax-hero-subheading p {
    max-width: 100%;
  }
}

/* Loading backdrop. It used to sit on top (z-index 100) and hide the whole hero,
   headline included, until every layer had loaded or 3s had passed, which made the
   headline the slowest thing on the page. It now sits behind the layers: the
   headline shows straight away on dark, the layers fade in over it, and once they
   are all in the backdrop fades out, leaving the hero as it always looked. */
.parallax-hero-preloader {
  background-color: #0F1524;
  inset: 0;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.6s ease;
  z-index: 0;
}

.parallax-hero--loaded .parallax-hero-preloader {
  opacity: 0;
}

/* Mark (20 Oct 2026): the optional "Loading preview" image is a tiny picture of the
   whole scene. Stretched to fill the hero and blurred, it reads as a soft version
   of the real thing until the layers fade in over it. Scaled up slightly so the
   blur does not show soft edges. */
.parallax-hero-preloader[style*="background-image"] {
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(18px);
  transform: scale(1.08);
}

/* Scroll Arrow */
.parallax-hero-scroll-arrow {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
}

/* Scales with the screen above 1920px, like the text block above. */
@media (min-width: 1921px) {
  .parallax-hero .parallax-hero-scroll-arrow {
    zoom: tan(atan2(100vw, 1920px));
  }
}

.parallax-hero-scroll-arrow svg {
  display: block;
  width: 18px;
  height: 31px;
}


/* ── Mobile hero layout (matches the mobile mockup) ──
   Added by Mark (20 Oct 2026). Everything below this comment is Mark's addition.
   Backup of the module before this change: "Parallax Hero - BACKUP 20 Oct 2026".
   - Headline layer centred across the screen.
   - Award badges side by side instead of stacked, and a little smaller.
   - Optional two-size headline: wrap words in <span class="hero-line-lg"> and
     <span class="hero-line-sm"> in the layer's rich text. On desktop the spans
     do nothing; on mobile the first becomes a big line, the rest smaller. */
@media (max-width: 768px) {
  .parallax-hero .parallax-hero-layer-content {
    left: 0 !important;
    right: 0 !important;
    text-align: center;
  }
  .parallax-hero .parallax-hero-layer-content .parallax-hero-content-inner {
    margin-left: auto;
    margin-right: auto;
  }
  .parallax-hero .parallax-hero-layer-images {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* Mark (23 Oct 2026): gap and badge size grow with the screen (were
       8px and 150px). Badges: 18vw + 98px is about 165px on a 375px phone
       and reaches 196px (their desktop size) at about 545px. 50vw - 24px
       keeps both side by side with room to spare on the narrowest
       phones; 130px is the smallest they go. */
    gap: clamp(8px, 2vw, 16px) !important;
    margin-top: 24px;
  }
  .parallax-hero .parallax-hero-layer-images img {
    width: clamp(130px, min(calc(18vw + 98px), calc(50vw - 24px)), 196px);
    height: auto;
  }
  /* Mark (23 Oct 2026): the headline grows with the screen (was a fixed
     52px big line and 40px small lines). --hero-lg is the big line's size,
     and the small lines are 80% of it. It is the smallest of:
     - 7.12vw + 25.3px: grows from about 52px on a 375px phone to 80px
       (the desktop size) at 768px;
     - (100vw - 30px) / 6.65: "Award-winning" is 6.62em wide, so this
       keeps it on one line with 15px either side on narrow phones;
     - 18.2svh - 87px (but never below the old 52px): on short screens
       the text stops growing so it doesn't reach the header.
     clamp() then keeps it between 40px and 80px. */
  .parallax-hero .parallax-hero-layer-content h1:has(.hero-line-lg) {
    --hero-lg: clamp(40px, min(calc(7.12vw + 25.3px), calc((100vw - 30px) / 6.65), max(52px, calc(18.2svh - 87px))), 80px);
  }
  .parallax-hero .parallax-hero-layer-content h1:has(.hero-line-lg),
  .parallax-hero .parallax-hero-layer-content h1:has(.hero-line-lg) span {
    font-size: calc(var(--hero-lg) * 0.8) !important;
    line-height: 1.1 !important;
  }
  .parallax-hero .parallax-hero-layer-content h1:has(.hero-line-lg) .hero-line-lg {
    display: block;
    font-size: var(--hero-lg) !important;
    line-height: 1.05 !important;
  }
  .parallax-hero .parallax-hero-layer-content h1 .hero-line-sm {
    display: block;
    max-width: 8em;
    margin: 0 auto;
  }
}


/* ── Phones/tablets: parallax driven by the browser, not the script ──
   Added by Mark (20 Oct 2026). Backup before this: "Parallax Hero - BACKUP 3 before iPhone fix".
   module.js adds .parallax-hero--css-scroll on touch screens whose browser
   supports scroll-driven animations (Safari on iOS 26+, Chrome, Edge). The browser
   then moves each layer in step with the scroll itself, so layers cannot fall
   behind and jump like they did on iPhone. Same maths as the desktop script:
   each layer moves down by (scroll distance x its Parallax Speed) while the
   hero scrolls past. "translate" is used (not "transform") so it adds on top of
   the position/scale the script and the mobile offsets already set.
   Touch browsers without support get .parallax-hero--static: no movement. */
@supports (animation-timeline: scroll()) {
  .parallax-hero--css-scroll [data-parallax-layer] {
    animation-name: parallax-hero-scroll;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root block);
    animation-range: var(--ph-start, 0px) var(--ph-end, 100vh);
    will-change: translate;
  }
}
@keyframes parallax-hero-scroll {
  from { translate: 0 0; }
  to   { translate: 0 calc(var(--ph-height, 100vh) * var(--ph-speed, 0)); }
}


/* Mark (20 Oct 2026): the 6s CSS reveal above is only a backup for when the script
   does not run. When it does (.parallax-hero--js), the script reveals all layers
   together once every image has arrived (or after 15s on a very slow connection),
   so the backup must not reveal them one by one in the meantime. */
.parallax-hero--js.parallax-hero--loading .parallax-hero-layer-image:not(.is-loaded),
.parallax-hero--js.parallax-hero--loading .parallax-hero-bg-image:not(.is-loaded) {
  animation: none;
}


/* Mark (23 Oct 2026): the team (layer 5, Entelect-team.webp) on every
   screen. Backups: "Parallax Hero - BACKUP 5 before mobile centring" and
   "... BACKUP 6 before tablet team and heading". If the team image is
   replaced with one framed differently, the numbers below need recalculating.

   About the image: 2496 x 1696 (1.4717 times wider than tall). The trio's
   centre is 72% of the way across and its right edge (the helmet) 84.5%.

   "cqw" and "cqh" are 1% of a container's width and height. Making the
   background box (.parallax-hero-bg) a size container lets the layer's
   position and size be worked out from the hero's own size. */
.parallax-hero .parallax-hero-bg {
  container-type: size;
}

/* Mobile (768px and below): centred. The page's mobile setting (82%
   across, image 115% tall) is a fixed percentage, so the trio drifted
   right on wider phones. 50% puts the image's middle in the middle of the
   screen, then we pull it left by 22% of the drawn width. Drawn width =
   1.4717 x 115% of the height, so 22% of it = 37.3% of the height. */
@media (max-width: 768px) {
  .parallax-hero .parallax-hero-bg .parallax-layer--5 {
    background-position: calc(50% - 37.3cqh) 100% !important;
  }
}

/* Above 768px. The page draws the image to cover the hero, centred. In
   windows that are about square or taller (portrait tablets, narrow
   desktop windows) that made it much wider than the screen, so the
   third character was cut off at the right.
   - --ph-team-w is the drawn width: the screen width at least, and as
     cover would draw it (147.17cqh = 1.4717 x the height) but never more
     than 1.65 x the screen width, so in tall windows the trio is a bit
     smaller and stands below the award badges instead of over them.
   - Position: --ph-team-c is where the trio's centre goes (its centre is
     72% across the image, its edges 12.5% of the image width either side).
     Read from the inside out:
     1. (100cqw + 448px) / 2: halfway between the right edge of the award
        badges (40px gutter + two 196px badges + 16px gap = 448px) and the
        right edge of the screen (Mark asked for this, 23 Oct 2026);
     2. ... but never so far right that the helmet is less than 12px in;
     3. max() with "helmet 40px in": in wider portrait windows halfway
        would sit further left than that, so it stops there instead;
     4. min() with 50cqw + 0.22 x width, the old centred position: where
        the whole trio already fits (most landscape screens) nothing moves.
     Before 23 Oct (evening) the position was simply
     min(calc((100cqw - var(--ph-team-w)) / 2), calc(100cqw - 40px - 0.845 * var(--ph-team-w))). */
@media (min-width: 769px) {
  .parallax-hero .parallax-hero-bg .parallax-layer--5 {
    --ph-team-w: max(100cqw, min(147.17cqh, 165cqw));
    --ph-team-c: min(calc(50cqw + 0.22 * var(--ph-team-w)), max(calc(100cqw - 40px - 0.125 * var(--ph-team-w)), min(calc((100cqw + 448px) / 2), calc(100cqw - 12px - 0.125 * var(--ph-team-w)))));
    background-size: var(--ph-team-w) auto !important;
    background-position: calc(var(--ph-team-c) - 0.72 * var(--ph-team-w)) 100% !important;
  }
}

/* Mark (23 Oct 2026): the headline always on three lines above 768px
   ("Award-winning / culture that's out / of this world"). Its column grows
   with the screen, so on some widths (around 1366 to 1440, and 1760 and
   up) it fitted on two. em is the heading's own font size, so this holds
   at every size: "culture that's out" is 7.14em wide and fits, while
   "Award-winning culture" (9.79em) and "culture that's out of" (8.2em)
   don't. Only headings using the hero-line-lg span (see the mobile block
   above) are affected. */
@media (min-width: 769px) {
  .parallax-hero .parallax-hero-layer-content h1:has(.hero-line-lg) {
    max-width: 7.6em;
  }
}


/* Mark (23 Oct 2026): mobile vertical centring. Tested on Mark's iPhone 17
   with a ?herotest switch first, then made live the same evening.
   Backup before this: "Parallax Hero - BACKUP 8 before mobile vertical centring".

   Goal: the headline, badges and characters as one group, centred between
   the bottom of the 64px header and the bottom of the visible screen, on
   every phone. It works out how far to move the group (--ph-shift) from
   the device's own measurements:
   - 100svh: the visible screen height with the browser's bars showing,
     reported by the phone itself;
   - 100cqh: the hero's height (the background box is a size container);
   - --ph-text-h: the height of the headline and badges, built from the
     same sizes the headline and badges use above (--ph-lg and --ph-bw must
     match those formulas). The headline is 2.81 x the big line's size
     (one line at 1.05 line height plus two at 80% size and 1.1), then
     24px above the badges, and the badges are 0.3265 x their width tall.
   Where things sit before moving: the text block's bottom is at half the
   hero height minus 70px (the page's mobile setting for layer 4), and the
   characters' feet are 80.45% of the way down the hero. So the group's
   top + bottom = 130.45% of the hero height - 70px - text height. The
   shift is half the difference between that and (64px + 100svh). It never
   moves the group up (max(0px, ...)). Text and characters move by the same
   amount, so the gap between the badges and the heads stays the same.
   The scroll arrow is lifted by the height of the browser's bars
   (100vh - 100svh) so it isn't hidden behind them. */
@media (max-width: 768px) {
  .parallax-hero {
    --ph-lg: clamp(40px, min(calc(7.12vw + 25.3px), calc((100vw - 30px) / 6.65), max(52px, calc(18.2svh - 87px))), 80px);
    --ph-bw: clamp(130px, min(calc(18vw + 98px), calc(50vw - 24px)), 196px);
    --ph-text-h: calc(2.81 * var(--ph-lg) + 24px + 0.3265 * var(--ph-bw));
    --ph-shift: max(0px, calc((134px + 100svh - 130.45cqh + var(--ph-text-h)) / 2));
  }

  .parallax-hero .parallax-hero-bg .parallax-layer--4 {
    transform: translateY(-50%) translateY(calc(var(--ph-shift) - 70px)) !important;
  }

  .parallax-hero .parallax-hero-bg .parallax-layer--5 {
    background-position: calc(50% - 37.3cqh) calc(100% + var(--ph-shift)) !important;
  }

  .parallax-hero .parallax-hero-scroll-arrow {
    bottom: calc(1rem + max(0px, 100vh - 100svh));
  }
}


/* ── Phones on their side (landscape, under 500px tall) ──
   Added by Mark (27 Oct 2026). Before this, the module was unchanged since 23 Oct (see revision history).
   Tested on Mark's iPhone with a ?herotest switch first, then made live
   the same morning (27 Oct 2026). To undo: delete this block.

   Why: our breakpoints are by width. A phone turned sideways is wide
   (about 670 to 930px) but very short (about 320 to 430px), so it got
   either the portrait phone layout (768px and below) or the desktop
   layout, and neither fits that shape: the headline ran under the
   header and the characters were pushed off the bottom. No tablet or
   desktop screen is under 500px tall in landscape, so this band only
   ever catches phones (and very short desktop windows, which benefit).

   Layout (Mark chose "text left, trio right"): headline on three lines
   and the badges in a left column, lined up with the logo and centred
   between the header and the bottom of the visible screen; the trio on
   the right, as large as the height allows, feet 20px above the bottom.

   Sizes (all from the screen, so every phone gets its own fit):
   --phl-g   side gutter, same as the logo: 16px up to 768px wide, 40px above
   --phl-hdr header height: 64px up to 768px wide, 80px above
   --phl-fs  headline size: 13% of the visible height or 6% of the width,
             whichever is smaller, between 28px and 56px
   --phl-bw  badge width: 45% of the visible height, 110px to 170px
   --phl-col text column: wide enough for "culture that's out" (7.6em) or
             both badges, whichever is wider
   --phl-th  height the image is drawn at. The trio is 26.3% of the image's
             height (heads 56.7% down, feet 83%) and 36.8% of its height
             wide, so this is the smaller of "trio fills the height between
             header and bottom, less 48px" and "trio fits beside the text". */
@media (orientation: landscape) and (max-height: 500px) {
  .parallax-hero {
    --phl-g: 16px;
    --phl-hdr: 64px;
    --phl-fs: clamp(28px, min(13svh, 6vw), 56px);
    --phl-bw: clamp(110px, 45svh, 170px);
    --phl-col: max(calc(7.6 * var(--phl-fs)), calc(2 * var(--phl-bw) + 12px));
    --phl-th: min(calc((100svh - var(--phl-hdr) - 48px) / 0.263), calc((100vw - var(--phl-col) - 3 * var(--phl-g)) / 0.368));
  }

  /* Text column: left, under the logo, centred in the visible space. */
  .parallax-hero .parallax-hero-bg .parallax-layer--4 {
    top: calc(var(--phl-hdr) + (100svh - var(--phl-hdr)) / 2) !important;
    bottom: auto !important;
    left: var(--phl-g) !important;
    right: auto !important;
    width: var(--phl-col) !important;
    transform: translateY(-50%) !important;
    text-align: left;
  }
  .parallax-hero .parallax-hero-layer-content .parallax-hero-content-inner {
    max-width: none !important;
    margin: 0 !important;
  }
  .parallax-hero .parallax-hero-layer-content h1,
  .parallax-hero .parallax-hero-layer-content h1:has(.hero-line-lg),
  .parallax-hero .parallax-hero-layer-content h1:has(.hero-line-lg) span,
  .parallax-hero .parallax-hero-layer-content h1:has(.hero-line-lg) .hero-line-lg {
    font-size: var(--phl-fs) !important;
    line-height: 1.05 !important;
  }
  .parallax-hero .parallax-hero-layer-content h1 {
    max-width: 7.6em;
    margin: 0 !important;
  }
  .parallax-hero .parallax-hero-layer-content h1:has(.hero-line-lg) .hero-line-lg,
  .parallax-hero .parallax-hero-layer-content h1:has(.hero-line-lg) .hero-line-sm {
    display: inline;
    max-width: none;
    margin: 0;
  }
  .parallax-hero .parallax-hero-layer-images {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px !important;
    margin-top: 16px;
  }
  .parallax-hero .parallax-hero-layer-images img {
    width: var(--phl-bw);
    height: auto;
  }

  /* Trio: centred in the space right of the text (never closer than the
     gutter to the edge), feet 20px above the bottom of the visible screen.
     Its centre is 72% across the image and its feet 83% down. */
  .parallax-hero .parallax-hero-bg .parallax-layer--5 {
    --phl-c: min(calc((var(--phl-g) + var(--phl-col) + 100vw) / 2), calc(100vw - var(--phl-g) - 0.184 * var(--phl-th)));
    background-size: auto var(--phl-th) !important;
    background-position: calc(var(--phl-c) - 0.72 * 1.4717 * var(--phl-th)) calc(100svh - 20px - 0.83 * var(--phl-th)) !important;
  }

  /* Scroll arrow above the browser's bar. */
  .parallax-hero .parallax-hero-scroll-arrow {
    bottom: calc(0.5rem + max(0px, 100vh - 100svh));
  }
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 769px) {
  .parallax-hero {
    --phl-g: 40px;
    --phl-hdr: 80px;
  }
}