/*
  Hero (heroBlock, MB-5; contract umbraco/blocks/heroBlock.md; generalised from Boyd's hero.css). Mobile first.
  Layouts: .hero--full-screen, .hero--page-banner, .hero--band. Over a photo or video (.hero--on-media) the view uses the
  Darkest section colour and this file lays a dark layer (--hero-overlay) between the picture and the text, so text and
  button contrast hold on any photo. A site restyles it through these variables in its own tokens:
    --hero-overlay        the layer over the picture (default: the Darkest colour at 55 %, darker at the bottom of a banner)
    --hero-highlight      the colour of the highlighted words (default: the section's eyebrow colour)
    --hero-highlight-weight  their weight (default: as the heading; e.g. 700 for a bold last word)
    --hero-label-highlight   the colour of highlighted words in the Page banner's small label (default: the other of
                             the label's two colours: highlight colour on an h1 label, heading colour on a <p> label)
    --hero-banner-height  the Page banner's height on wide screens (default: the screen, at most 56rem)
    --hero-band-height    the Band's height on wide screens (default 34rem)
    --hero-video-fade     how long the Background video takes to fade in over the photo once it plays (default 0.6s;
                          0s shows it at once, as the FuelChief original: MB-122 round 2, the lead's answer 1)
*/
.hero {
  --hero-overlay: color-mix(in srgb, var(--theme-deep-bg, #000) 55%, transparent);
  --hero-highlight: var(--color-eyebrow);
  --hero-banner-height: min(100svh, 56rem);
  --hero-band-height: 34rem;
  position: relative;
  isolation: isolate;
  display: flex;
  overflow: hidden;
  /* Edge to edge, whatever width the page's main column has. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
/* 100vw includes a desktop scrollbar: clip the few pixels instead of adding a sideways scroll (clip keeps sticky headers). */
body:has(.hero) { overflow-x: clip; }

/* The picture: photo, then the video over it once it plays, then the dark layer. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero__media picture,
.hero__media img,
.hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__video {
  opacity: 0;
  transition: opacity var(--hero-video-fade, 0.6s) var(--motion-ease, ease);
}
.hero__video.is-playing { opacity: 1; }
.hero--on-media .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
}

.hero__inner {
  width: 100%;
  max-width: calc(var(--container-max, 70rem) + 2 * var(--page-gutter, 16px));
  margin: 0 auto;
  padding: var(--section-space, 48px) var(--page-gutter, 16px);
  display: flex;
}
.hero__text { width: 100%; min-width: 0; }
.hero__copy > * { margin-top: 0; }

.hero__heading {
  margin: 0 0 var(--space-6, 24px);
  max-width: 50rem;
  color: var(--color-heading);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-display, 2.5rem);
  font-weight: var(--fw-bold, 700);
  line-height: var(--lh-display, 1.1);
  overflow-wrap: break-word;
}
.hero__highlight { color: var(--hero-highlight); font-weight: var(--hero-highlight-weight, inherit); }
/* MB-31: highlighted words in the Page banner's small label take the other colour of the two the label can have: an h1
   label is in the heading colour (themes.css), so they take the highlight colour; a <p> label is in the eyebrow colour, so
   they take the heading colour. --hero-label-highlight sets one colour for both. */
h1.hero__title .hero__highlight { color: var(--hero-label-highlight, var(--hero-highlight)); }
p.hero__title .hero__highlight { color: var(--hero-label-highlight, var(--color-heading)); }
.hero__intro {
  margin: 0 0 var(--space-6, 24px);
  max-width: var(--container-text, 40rem);
  font-size: var(--fs-body-lg, 1.25rem);
  line-height: var(--lh-body, 1.5);
}
.hero__intro:last-child { margin-bottom: 0; }
.hero__action { margin-top: var(--space-2, 8px); }
/* MB-90: Button and Second button on one row (stacked, full width, below 768 px); they wrap, never overflow.
   Site hook: --hero-actions-justify (e.g. center for a centred Full screen Hero). */
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  margin-top: var(--space-2, 8px);
}
@media (min-width: 768px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; justify-content: var(--hero-actions-justify, flex-start); }
}
.hero__title { margin: 0 0 var(--space-6, 24px); }
.hero__rule {
  margin: 0 0 var(--space-8, 32px);
  border: 0;
  border-top: var(--border-width, 1px) solid currentColor;
  opacity: 0.35;
}

/* Full screen: at least the screen's height, text from the top third on phones, centred from 769 px. */
.hero--full-screen { min-height: 100vh; min-height: 100svh; }
.hero--full-screen .hero__inner { align-items: center; }

/* Page banner: text at the bottom; heading and intro side by side from 1024 px. */
.hero--page-banner.hero--on-media { min-height: 75svh; }
.hero--page-banner .hero__inner { align-items: flex-end; }
.hero--page-banner.hero--on-media .hero__media::after {
  background: linear-gradient(to bottom, transparent 20%, var(--hero-overlay) 60%), var(--hero-overlay);
}
.hero--page-banner .hero__heading { font-size: var(--fs-h1, 2rem); margin-bottom: var(--space-4, 16px); }

/* Band: label and heading, centred vertically. */
.hero--band .hero__inner { align-items: center; padding-block: var(--space-16, 64px); }
.hero--band .hero__heading { font-size: var(--fs-h2, 1.75rem); margin-bottom: 0; }
.hero--band .hero__aside:not(:empty) { margin-top: var(--space-4, 16px); }

/* Pause button: first in the section's tab order, bottom right over the picture. */
.hero__pause {
  position: absolute;
  right: var(--page-gutter, 16px);
  bottom: var(--space-4, 16px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  min-width: var(--tap-min, 44px);
  min-height: var(--tap-min, 44px);
  padding: 0 var(--space-3, 12px);
  border: var(--border-width-heavy, 2px) solid var(--color-text);
  border-radius: var(--radius-pill, 999px);
  background: color-mix(in srgb, var(--theme-deep-bg, #000) 70%, transparent);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-body-sm, 0.875rem);
  cursor: pointer;
}
.hero__pause[hidden] { display: none; }
.hero__pause:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.hero__pause-icon {
  width: 0.75rem;
  height: 0.875rem;
  border-inline: 0.25rem solid currentColor;
}
.hero__pause[data-state="paused"] .hero__pause-icon {
  border: 0;
  border-left: 0.75rem solid currentColor;
  border-block: 0.4375rem solid transparent;
  height: 0;
}
/* The button keeps its words at every width (on phones it shows only when "Play video on phones" is on, MB-13). */
.hero__pause-text { white-space: nowrap; }

/* ---- MB-23 (decision #127): Photo width and the Slides layout. Nothing here applies to a Hero without them. ---- */
/* Photo width "Inside the page margins": the section sits inside the page gutter, at most --hero-contained-max wide,
   with rounded corners (Boyd heroPhoto "contained"). */
.hero--contained {
  --hero-contained-max: 90rem;
  width: min(calc(100vw - 2 * var(--page-gutter, 16px)), var(--hero-contained-max));
  margin-inline: calc(50% - min(calc(50vw - var(--page-gutter, 16px)), calc(var(--hero-contained-max) / 2)));
  margin-top: var(--space-6, 24px);
  border-radius: var(--radius-card, 12px);
}

/* Slides: the fixed heading and intro, then the carousel (motion.css lays out the track, controls and dots). */
.hero--slides { flex-direction: column; }
.hero__slides-head { padding-bottom: var(--space-8, 32px); }
.carousel.hero__carousel {
  --carousel-gap: 0px;
  margin: 0;
  /* the carousel controls take the band's colours (motion.css reads these) */
  --starter-text: var(--color-text);
  --starter-focus: var(--color-focus);
  --starter-background: transparent;
  --starter-muted: var(--color-text);
}
.hero__slide {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(80svh, 44rem);
  overflow: hidden;
}
.hero__slide-body {
  width: 100%;
  max-width: calc(var(--container-max, 70rem) + 2 * var(--page-gutter, 16px));
  margin: 0 auto;
  padding: var(--space-16, 64px) var(--page-gutter, 16px) var(--space-12, 48px);
}
.hero__slide.hero--on-media .hero__media::after {
  background: linear-gradient(to bottom, transparent 15%, var(--hero-overlay) 55%), var(--hero-overlay);
}
.hero__keyline { display: block; width: var(--space-16, 64px); height: var(--space-1, 4px); margin-bottom: var(--space-4, 16px); padding: 0; border-radius: var(--radius-pill, 999px); }
.hero__slide-title {
  margin: 0 0 var(--space-4, 16px);
  max-width: 40rem;
  color: var(--color-heading);
  font-family: var(--font-display, inherit);
  font-size: var(--fs-h1, 2rem);
  font-weight: var(--fw-bold, 700);
  line-height: var(--lh-heading, 1.2);
  overflow-wrap: break-word;
}
.hero__slide .hero__eyebrow { margin: 0 0 var(--space-2, 8px); }
.hero__slide-text { margin: 0 0 var(--space-6, 24px); max-width: var(--container-text, 40rem); font-size: var(--fs-body-lg, 1.125rem); line-height: var(--lh-body, 1.5); }
.hero__slide-text:last-child { margin-bottom: 0; }
/* The carousel's controls (Pause, arrows, dots; carousel.js puts them before the slides) sit on the band inside the page margins. */
.carousel.hero__carousel .carousel__controls { max-width: calc(var(--container-max, 70rem) + 2 * var(--page-gutter, 16px)); margin: 0 auto; padding: 0 var(--page-gutter, 16px) var(--space-4, 16px); }

/* ---- MB-108: Slides options. Nothing here applies to Slides without them. ----
   Progress tabs (data-carousel-tabs): the bar and the passed line take --hero-tabs-accent (default the highlight colour).
   Text "Each slide its own heading, text and button" (.hero--slides-own): no heading above the slides; each slide fills
   the first screen (100svh less --hero-first-screen-top, the header above it, from js/blocks/hero-slides.js), its words
   centred on the photo under a flat dark layer; the controls lie over the slides at the bottom: a row at most
   --hero-tabs-max wide (60rem), centred, --hero-tabs-bottom up (3.125rem; 6.25rem from 1400 px), on
   --hero-tabs-background (none), the Pause button at its right end above it. Progress tabs hide below 576 px (the slides
   still change; Pause stays); a site shows them there with --hero-tabs-on-phones: flex. */
.carousel.hero__carousel.has-tabs {
  --carousel-tab-bar: var(--hero-tabs-accent, var(--hero-highlight));
  --carousel-tab-line: color-mix(in srgb, var(--color-text) 20%, transparent);
}
.hero--slides-own { --hero-tabs-max: 60rem; --hero-tabs-bottom: 3.125rem; --hero-tabs-background: transparent; }
.hero--slides-own .hero__slide { min-height: calc(100svh - var(--hero-first-screen-top, 0px)); align-items: center; justify-content: center; text-align: center; }
.hero--slides-own .hero__slide.hero--on-media .hero__media::after { background: var(--hero-overlay); }
.hero--slides-own .hero__slide-body { max-width: var(--hero-slide-text-max, 60rem); padding: var(--space-16, 64px) var(--page-gutter, 16px); }
.hero--slides-own .hero__keyline { display: none; }
.hero--slides-own .hero__slide-title { max-width: none; font-size: var(--fs-display, 2.5rem); }
.hero--slides-own .hero__slide-text { margin-inline: auto; }
.hero--slides-own .hero__slide .hero__action { display: flex; justify-content: center; }
.hero--slides-own .carousel.hero__carousel .carousel__controls {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: var(--hero-tabs-bottom);
  transform: translateX(-50%);
  width: var(--hero-tabs-max);
  max-width: 100%;
  margin: 0;
  padding: 0 var(--page-gutter, 16px);
  justify-content: center;
  background: var(--hero-tabs-background);
}
.hero--slides-own .carousel.hero__carousel.has-tabs .carousel__controls { flex-direction: column; align-items: stretch; gap: var(--space-2, 8px); padding: 0; }
.hero--slides-own .carousel.hero__carousel.has-tabs .carousel__pause { align-self: flex-end; margin: 0 var(--page-gutter, 16px) 0 0; }
@media (max-width: 575.98px) {
  .hero--slides-own .carousel.hero__carousel.has-tabs .carousel__dots { display: var(--hero-tabs-on-phones, none); }
}
@media (min-width: 1400px) {
  .hero--slides-own { --hero-tabs-bottom: 6.25rem; }
}

@media (min-width: 769px) {
  .hero--page-banner.hero--on-media { min-height: var(--hero-banner-height); }
  .hero--band { min-height: var(--hero-band-height); }
}

@media (min-width: 1024px) {
  .hero--page-banner .hero__copy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap, 32px) var(--space-12, 48px);
    align-items: start;
  }
  .hero--page-banner .hero__heading { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video { transition: none; }
}

/* MB-94 (#182): the note under the buttons (its highlighted start in the highlight colour) and the side quotes of a Hero
   without a Photo collage (the collage draws its own, css/blocks/hero-collage.css). Quote cards: stacked under the text
   (and its buttons) below 1200 px; from 1200 px the left card, the text and the right card side by side. The cards keep the
   page's own colours on any section colour, photo or video. Both only when typed. */
.hero__note { margin: var(--space-4, 16px) 0 0; font-size: var(--fs-body, 1rem); }
.hero__note-highlight { font-weight: var(--fw-semibold, 600); color: var(--hero-collage-accent, var(--hero-highlight)); }
.hero--with-quotes .hero__inner { flex-wrap: wrap; gap: var(--space-4, 16px); }
.hero__quote-card {
  --color-heading: var(--theme-plain-heading);
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  padding: var(--space-5, 20px) var(--space-6, 24px);
  background: var(--color-page);
  color: var(--theme-plain-text);
  border: var(--border-width, 1px) solid var(--hero-collage-border, var(--c-grey-200));
  border-radius: var(--radius-sm, 3px);
}
.hero__quote-label { display: inline-flex; align-items: center; gap: var(--space-2, 8px); margin: 0; font-size: var(--fs-body-sm, 0.875rem); font-weight: var(--fw-semibold, 600); color: var(--hero-collage-label, var(--c-brand)); }
.hero__quote-label::before { content: ""; width: 10px; height: 10px; background: currentColor; }
.hero__quote-card--right .hero__quote-label { color: var(--hero-collage-accent, var(--hero-highlight)); }
.hero__quote { margin: 0; font-size: var(--fs-h3, 1.375rem); font-weight: var(--fw-medium, 500); color: var(--color-heading); }
@media (min-width: 1200px) {
  .hero--with-quotes .hero__inner { flex-wrap: nowrap; gap: var(--space-10, 40px); }
  .hero--with-quotes .hero__text { flex: 1 1 auto; }
  .hero__quote-card { flex: 0 0 280px; }
  .hero__quote-card--left { order: -1; }
}

/* ---- MB-122 (#135; from the FuelChief import): Text position Centred, Full screen text at the bottom, and the 16:9 video
   shape. Classes only; a Hero without them is unchanged. Site hooks:
     --hero-centred-max           the centred text column's width (default 45rem)
     --hero-shape-inset           16:9 of the width less this on each side (default 0; the import sets its page gutter,
                                  as the original's video box is 16:9 of the width inside its side padding)
     --hero-shape-text-top        how far down the words start in the 16:9 shape (default as the original: 3.125rem on
                                  phones, 6.25rem from 768 px, 9.375rem from 992 px, half the section from 1400 px)
     --hero-shape-intro-on-phones the Intro below 768 px in the 16:9 shape (default none, as the original; block shows it) */
.hero--centred { --hero-actions-justify: center; text-align: center; }
.hero--centred .hero__inner { justify-content: center; }
.hero--centred .hero__text { max-width: var(--hero-centred-max, 45rem); }
.hero--centred .hero__heading,
.hero--centred .hero__intro { margin-inline: auto; }
@media (min-width: 1024px) {
  /* Page banner centred: one column (label, line, heading, intro, buttons), as the original's centred banners. */
  .hero--page-banner.hero--centred .hero__copy { display: block; }
  .hero--page-banner.hero--centred .hero__heading { margin-bottom: var(--space-4, 16px); }
}

/* Full screen, Text placement At the bottom: the words sit at the bottom of the first screen. The section is the window
   less the header above it (--hero-first-screen-top, js/blocks/hero-slides.js, as MB-108's slides), so the buttons end
   inside the first screen on phones too (round 2, UX U1); a header over the photo or a Hero lower down: the window. */
.hero--full-screen.hero--text-bottom { min-height: calc(100svh - var(--hero-first-screen-top, 0px)); }
.hero--full-screen.hero--text-bottom .hero__inner { align-items: flex-end; }

/* Page banner, Text placement Middle (round 2, the lead's answer 2): the words halfway down, as the original's centred
   banners; the default keeps them at the bottom. */
.hero--page-banner.hero--text-middle .hero__inner { align-items: center; }

/* Video shape 16:9 of the width (Full screen with a video): the section is as tall as a wide video (it grows only if the
   words need more room); the video covers it from its bottom right corner, so a taller frame loses its top; the words
   start --hero-shape-text-top down (At the bottom puts them at the bottom instead). */
.hero--shape-wide {
  --hero-shape-height: calc((100vw - 2 * var(--hero-shape-inset, 0px)) * 9 / 16);
  --hero-shape-text-top: 3.125rem;
}
.hero--full-screen.hero--shape-wide { min-height: var(--hero-shape-height); }
.hero--shape-wide .hero__video { object-position: right bottom; }
.hero--shape-wide:not(.hero--text-bottom) .hero__inner {
  align-items: flex-start;
  padding-top: var(--hero-shape-text-top);
  padding-bottom: var(--space-6, 24px);
}
/* 16:9 of the width, fixed (round 2, the lead's answer 3): exactly 16:9, as the original's box; words that don't fit are
   cut off (.hero hides overflow). */
.hero--full-screen.hero--shape-fixed { height: var(--hero-shape-height); }
@media (max-width: 767.98px) {
  .hero--shape-wide .hero__intro { display: var(--hero-shape-intro-on-phones, none); }
}
@media (min-width: 768px) { .hero--shape-wide { --hero-shape-text-top: 6.25rem; } }
@media (min-width: 992px) { .hero--shape-wide { --hero-shape-text-top: 9.375rem; } }
@media (min-width: 1400px) { .hero--shape-wide { --hero-shape-text-top: calc(var(--hero-shape-height) / 2); } }

/* MB-144: Band artwork (FuelChief's "Design Out Risk" shield band, measured from the original's CSS bundle): the picture
   centred behind the words, as big as fits between 150 px top and bottom from 992 px (full strength), 60 px below 992 px
   at half strength; shown on phones too. No motion. A site restyles it through:
     --hero-art-inset           the space above and below the picture (default 60px, 150px from 992 px)
     --hero-art-opacity         its strength (default 0.5, 1 from 992 px) */
.hero--band-art { --hero-art-inset: 60px; --hero-art-opacity: 0.5; }
.hero__art {
  position: absolute;
  inset: var(--hero-art-inset) 0;
  z-index: -1;
  opacity: var(--hero-art-opacity);
  pointer-events: none;
}
.hero__art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
@media (min-width: 992px) {
  .hero--band-art { --hero-art-inset: 150px; --hero-art-opacity: 1; }
}

/* ---- MB-148 (#135; from the FuelChief import, MC-17): Page banner › Banner style. The three banners of the original,
   measured from its saved CSS bundle (capture raw/bundle.css; qa/blocks/build/MB-148.md, "Source numbers"):
     Basic    .section-header.banner-basic: 600 px high (550 px below 1200 px), an even layer, the words centred at the
              bottom 100 px up (50 px below 768 px) in a 645 px column, 50 px apart (30 px below 768 px); label 22/19/18 px,
              heading 50/45/32 px on a 1.0 line, text 20/19/18 px.
     Landing  .panel-banner-with-text.main-banner: 630 px high, fading into the colour below from halfway down, the words
              centred 50 px up in a 720 px column, 50 px apart (25 px below 992 px); label in capitals, heading 65/60/46 px
              on 1.15.
     Industry .panel-banner-with-text.industries-banner.v-align-bottom: the window's height, fading from 13 % down, the
              words centred 50 px + 2rem up; label in capitals 50 px above the heading (30 px below 768 px), heading
              65/60/46 px on 1.15, text at most 960 px wide; 50 px (30 px) under the heading, the text and the buttons.
   No pill and no line under the label in any style; the style sets where the words sit (Text placement is not used).
   Classes only; Standard (the default) adds none, so a banner without a style is unchanged. Colours stay the section's
   (a site sets its own). Site hooks: --hero-basic-overlay, --hero-landing-overlay, --hero-industry-overlay (the layer over
   the photo; defaults from the Darkest colour). No motion (the original's banners are still). ---- */
.hero--page-banner:is(.hero--style-basic, .hero--style-landing, .hero--style-industry) { min-height: 0; }
.hero--page-banner.hero--style-basic { height: 600px; }
.hero--page-banner.hero--style-landing { height: 630px; }
.hero--page-banner.hero--style-industry { height: 100vh; }
.hero--page-banner.hero--style-basic.hero--on-media .hero__media::after {
  background: var(--hero-basic-overlay, color-mix(in srgb, var(--theme-deep-bg, #000) 50%, transparent));
}
.hero--page-banner.hero--style-landing.hero--on-media .hero__media::after {
  background: var(--hero-landing-overlay, linear-gradient(180deg, transparent 50%, var(--theme-deep-bg, #000) 100%));
}
.hero--page-banner.hero--style-industry.hero--on-media .hero__media::after {
  background: var(--hero-industry-overlay, linear-gradient(180deg, transparent 13%, var(--theme-deep-bg, #000) 100%));
}
.hero--page-banner:is(.hero--style-basic, .hero--style-landing, .hero--style-industry) .hero__inner {
  max-width: none;
  padding: 0 var(--page-gutter, 16px) 100px;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  --hero-actions-justify: center;
}
.hero--page-banner:is(.hero--style-landing) .hero__inner { padding-bottom: 50px; }
.hero--page-banner:is(.hero--style-industry) .hero__inner { padding-bottom: calc(50px + 2rem); }
.hero--page-banner:is(.hero--style-basic, .hero--style-landing, .hero--style-industry) .hero__text {
  --hero-style-gap: 50px;
  width: min(645px, 100%);
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: var(--hero-style-gap);
}
.hero--page-banner.hero--style-landing .hero__text { width: min(720px, 100%); }
.hero--page-banner.hero--style-industry .hero__text { width: 100%; gap: 0; }
.hero--page-banner:is(.hero--style-basic, .hero--style-landing, .hero--style-industry) :is(.hero__copy, .hero__aside) {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* not the wide Page banner's grid "start", which pushed short headings left (UX-MB-148 U1) */
  gap: var(--hero-style-gap);
}
.hero--page-banner:is(.hero--style-basic, .hero--style-landing, .hero--style-industry) .hero__aside:not(:has(*)),
.hero--page-banner:is(.hero--style-basic, .hero--style-landing, .hero--style-industry) .hero__rule { display: none; }
.hero--page-banner:is(.hero--style-basic, .hero--style-landing, .hero--style-industry) :is(.hero__title, .hero__title.eyebrow--pill) {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  display: block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.03em;
  text-transform: none;
}
.hero--page-banner:is(.hero--style-landing, .hero--style-industry) :is(.hero__title, .hero__title.eyebrow--pill) { text-transform: uppercase; }
.hero--page-banner:is(.hero--style-basic, .hero--style-landing, .hero--style-industry) .hero__heading {
  margin: 0;
  max-width: none;
  font-size: 50px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero--page-banner:is(.hero--style-landing, .hero--style-industry) .hero__heading { font-size: 65px; line-height: 1.15; }
.hero--page-banner:is(.hero--style-basic, .hero--style-landing, .hero--style-industry) .hero__intro {
  margin: 0;
  max-width: none;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.hero--page-banner:is(.hero--style-basic, .hero--style-landing, .hero--style-industry) :is(.hero__action, .hero__actions) { margin-top: 0; }
.hero--page-banner:is(.hero--style-basic, .hero--style-landing, .hero--style-industry) .hero__action { align-self: center; }
/* Industry: no gap; each part keeps its own space under it, as the original. */
.hero--page-banner.hero--style-industry :is(.hero__copy, .hero__aside) { gap: 0; }
.hero--page-banner.hero--style-industry :is(.hero__title.eyebrow--pill, .hero__title, .hero__heading, .hero__intro, .hero__action, .hero__actions) { margin-bottom: 50px; }
.hero--page-banner.hero--style-industry .hero__intro { width: 960px; max-width: 100%; margin-inline: auto; }
.hero--page-banner.hero--style-industry .hero__aside > :last-child { margin-bottom: 0; }
@media (max-width: 1199.98px) {
  .hero--page-banner.hero--style-basic { height: 550px; }
  .hero--page-banner:is(.hero--style-basic, .hero--style-landing, .hero--style-industry) .hero__intro { font-size: 19px; }
}
@media (max-width: 991.98px) {
  .hero--page-banner:is(.hero--style-basic, .hero--style-landing, .hero--style-industry) :is(.hero__title, .hero__title.eyebrow--pill) { font-size: 19px; }
  .hero--page-banner.hero--style-basic .hero__heading { font-size: 45px; }
  .hero--page-banner:is(.hero--style-landing, .hero--style-industry) .hero__heading { font-size: 60px; }
  .hero--page-banner:is(.hero--style-basic, .hero--style-landing, .hero--style-industry) .hero__intro { font-size: 18px; }
  .hero--page-banner.hero--style-landing .hero__text { --hero-style-gap: 25px; }
}
@media (max-width: 767.98px) {
  .hero--page-banner.hero--style-basic .hero__inner { padding-bottom: 50px; }
  .hero--page-banner.hero--style-basic .hero__text { --hero-style-gap: 30px; }
  .hero--page-banner.hero--style-industry :is(.hero__title.eyebrow--pill, .hero__title, .hero__heading, .hero__intro, .hero__action, .hero__actions) { margin-bottom: 30px; }
}
@media (max-width: 575.98px) {
  .hero--page-banner:is(.hero--style-basic, .hero--style-landing, .hero--style-industry) :is(.hero__title, .hero__title.eyebrow--pill) { font-size: 18px; }
  .hero--page-banner.hero--style-basic .hero__heading { font-size: 32px; }
  .hero--page-banner:is(.hero--style-landing, .hero--style-industry) .hero__heading { font-size: 46px; }
}
/* MB-149: the page's name as a hidden main heading (Page banner, label hidden, "keep the page's name as a hidden main heading"). */
.hero__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- FC-MFIX10 (M-CHANGES-1): "Shade behind the words" (Light, Medium, Strong; Off = no class, nothing below applies).
   A layer of the Darkest colour (--theme-deep-bg) behind the words only, over the photo and its own layer: the box of the
   words (.hero__text; each slide's words on Slides) widened by --hero-shade-reach and blurred by --hero-shade-soft, so it
   is at full strength under every line and fades out around them. The photo, its crop and the layout do not change.
   Site hooks: --text-shade-light / --text-shade-medium / --text-shade-strong (how much of the Darkest colour: 35 %, 55 %,
   75 %), --hero-shade-reach (3rem), --hero-shade-soft (1.5rem). machine/tools/port/checks/shade-check.mjs measures each
   level on the rendered photo. */
.hero--shade-light { --hero-shade: color-mix(in srgb, var(--theme-deep-bg, #000) var(--text-shade-light, 35%), transparent); }
.hero--shade-medium { --hero-shade: color-mix(in srgb, var(--theme-deep-bg, #000) var(--text-shade-medium, 55%), transparent); }
.hero--shade-strong { --hero-shade: color-mix(in srgb, var(--theme-deep-bg, #000) var(--text-shade-strong, 75%), transparent); }
:is(.hero--shade-light, .hero--shade-medium, .hero--shade-strong) :is(.hero__text, .hero__slide-body) { position: relative; }
:is(.hero--shade-light, .hero--shade-medium, .hero--shade-strong) :is(.hero__text, .hero__slide-body)::before {
  content: "";
  position: absolute;
  z-index: -1; /* in the section's (or slide's) own layer stack: over the photo and its layer, under the words */
  inset: calc(-1 * var(--hero-shade-reach, 3rem));
  background: var(--hero-shade);
  filter: blur(var(--hero-shade-soft, 1.5rem));
  pointer-events: none;
}
/* A slide's words sit inside its padding: the shade follows the words, not the padding. */
:is(.hero--shade-light, .hero--shade-medium, .hero--shade-strong) .hero__slide-body::before {
  inset: calc(var(--space-16, 64px) - var(--hero-shade-reach, 3rem)) calc(var(--page-gutter, 16px) - var(--hero-shade-reach, 3rem)) calc(var(--space-12, 48px) - var(--hero-shade-reach, 3rem));
}
:is(.hero--shade-light, .hero--shade-medium, .hero--shade-strong).hero--slides-own .hero__slide-body::before {
  inset: calc(var(--space-16, 64px) - var(--hero-shade-reach, 3rem)) calc(var(--page-gutter, 16px) - var(--hero-shade-reach, 3rem));
}