.hero-powerhouse {
  position: relative;
  width: 100%;
  /* Framed like the nav header: same 1400px container cap and the same side
     gutter, so the card's left/right edges line up with the logo and the nav
     buttons above it. Below 1400 both fall back to the plain gutter. */
  --hp-gutter: 32px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px var(--hp-gutter);
  background-color: #FFFFFF;
  padding-top:50px;
  padding-bottom:0px;
}

/* The nav condenses its own gutter to 16px between 881 and 1166 — follow it so
   the card keeps lining up with the logo. Below 1075 the section drops its
   gutter entirely (see the ≤1074 block), so this only needs the upper slice. */
@media (min-width: 1075px) and (max-width: 1166px) {
  .hero-powerhouse {
    --hp-gutter: 16px;
  }
}

/* One large rounded card; the background image fills it, a slight dark overlay
   sits on top, and all content is layered over that. */
.hero-powerhouse__card {
  position: relative;
  width: 100%;
  /* A floor, not a fixed height: it only bites at wide widths where the copy is
     short, and the card grows past it whenever the content is taller (which is
     where the stat/video clearances noted in the ≥1075 block were measured, so
     they are unaffected by this number). Started at the 720px design height,
     then 654 once 66px of dead space came out below the CTA row; now 600 to
     take another band of empty height off the top of the page. */
  min-height: 600px;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  /* Fallback shown until / when no background image is set. */
  background-color: #033874;
}

.hero-powerhouse__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-powerhouse__bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-powerhouse__overlay {
  position: absolute;
  inset: 0;
}

/* Optional looping background video. The image (poster) sits behind and shows
   while the video loads; the video fades in on top once it can play. Both cover
   the card; the overlays stay on top (DOM order: image -> video -> overlays). */
.hero-powerhouse__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

.hero-powerhouse__bg-video.is-ready {
  opacity: 1;
}

/* Extra dark wash layered over the video/poster (below the text) so the hero
   copy stays legible. Only rendered when a background video is set. */
.hero-powerhouse__overlay-extra {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Respect reduced motion: keep the still poster, never fade in the video. */
  .hero-powerhouse__bg-video { opacity: 0 !important; }
}

/* ---------------------------------------------------------------------------
   Left content — heading, subheading, actions
   --------------------------------------------------------------------------- */
.hero-powerhouse__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* 745 not 680: the stat/video pair's left edge lands 713px in from the card's
     left edge at the 1400px cap (cards are 579px wide, anchored 76px off the
     section's right edge, inside a 1336px card), so 745 leaves the copy 32px
     clear of it. Everything else in this column is unaffected — the heading
     carries its own authored line breaks and the actions row is flex-start. */
  max-width: 745px;
  padding: 88px 64px 72px 55px;
}

.hero-powerhouse__heading,
.hero-powerhouse__heading * {
  font-family: 'HelveticaNeueLTStd-BdCn', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* Real <h1> — the page's single top-level heading. `pre-line` renders the line
   breaks authored in the multi-line text field. */
.hero-powerhouse__heading {
  margin: 0;
  font-size: 54px;
  font-weight: bold;
  line-height: 50px;
  text-transform: uppercase;
  color: #FFFFFF;
  white-space: pre-line;
}

/* From 993px up the whole headline sits on one line. At 54px it measures 641px
   against 961px+ of card width, so it simply overflows its own 680px content box
   into the empty top-right of the card — nothing is clipped, and no padding,
   margin or element position changes. `nowrap` also collapses the line break
   authored in the field, so the very same field value still breaks into two
   lines below 993px, where one line would not fit. */
@media (min-width: 993px) {
  .hero-powerhouse__heading {
    white-space: nowrap;
  }
}

.hero-powerhouse__subheading,
.hero-powerhouse__subheading * {
  font-family: 'HelveticaNeueLTStd-Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* Real <h2>; overrides the theme's global h2 (42px, uppercase, blue). */
.hero-powerhouse__subheading {
  margin: 28px 0 0;
  /* Fills the content column exactly: 745 max-width less its 55/64 side
     padding. The column's cap above is the real guard against the stat/video
     pair — this just spends all of it, so the copy sets on fewer lines.
     Below 1341 the pair scales down and sits lower relative to this copy, and
     the two are kept apart vertically rather than horizontally (see the ≥1075
     block); a wider measure only ever removes lines, so that clearance grows. */
  max-width: 626px;
  font-size: 24px;
  font-weight: normal;
  line-height: 1.1;
  text-transform: none;
  color: #FFFFFF;
  white-space: pre-line;
}

.hero-powerhouse__actions {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 44px;
}

.hero-powerhouse__cta {
  font-size: 17px;
  min-width: 150px;
}

/* Azure pill, matching .partner-announcement__cta, instead of the site's orange
   .btn--primary. Qualified with .btn--primary so a marketer who picks the
   Secondary or Ghost style in the CTA field still gets that style; three classes
   so it wins over .btn--primary regardless of stylesheet order. */
.hero-powerhouse .hero-powerhouse__cta.btn--primary {
  background-color: #3092D0;
  border-color: #3092D0;
  color: #FFFFFF;
}

.hero-powerhouse .hero-powerhouse__cta.btn--primary:hover {
  background-color: #0070C0;
  border-color: #0070C0;
}

.hero-powerhouse__ai {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-powerhouse__ai-label {
  font-family: 'HelveticaNeueLTStd-Roman', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 19.8px;
  color: #FFFFFF;
}

.hero-powerhouse__ai-buttons {
  display: flex;
  gap: 10px;
}

.hero-powerhouse__ai-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50px;
  /* Same azure pair as the CTA above. */
  background-color: #3092D0;
  transition: background-color 200ms ease, transform 200ms ease;
  text-decoration: none;
}

.hero-powerhouse__ai-btn:hover {
  background-color: #0070C0;
  transform: scale(1.05);
}

.hero-powerhouse__ai-btn img {
  width: 24px;
  height: 24px;
}

.hero-powerhouse__ai-btn-label {
  font-family: 'HelveticaNeueLTStd-BdCn', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #FFFFFF;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Overlaid cards — stat + video, bottom-right of the hero card
   --------------------------------------------------------------------------- */
.hero-powerhouse__cards {
  position: absolute;
  right: 76px;
  bottom: 76px;
  z-index: 3;
  display: flex;
  gap: 24px;
}

/* Frosted glass: the card sits over the hero's background video, so it is
   translucent and blurs what runs behind it instead of blocking it out.
   Safari before 18 only knows the -webkit- form, so both are declared; Chrome
   never implemented the prefixed alias and greys that one line out in its
   inspector, which is expected — the unprefixed line below it is the one Chrome
   uses. Below 1075 the cards move off the video onto a flat grey band, where
   both the translucency and the blur are reverted — see the ≤1074 block. */
.hero-powerhouse__stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 237px;
  height: 209px;
  padding: 28px 30px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* Without backdrop-filter the card would be plain 84% white over a moving
   video — the copy would swim. Those browsers get the original solid card. */
@supports not ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
  .hero-powerhouse__stat {
    background-color: #FFFFFF;
  }
}


.hero-powerhouse__stat-eyebrow {
  margin: 0;
  font-family: 'HelveticaNeueLTStd-BdCn', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.15;
  text-transform: capitalize;
  color: #0E1A57;
}

.hero-powerhouse__stat-value {
  margin: 0;
  font-family: 'HelveticaNeueLTStd-BdCn', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 45px;
  font-weight: bold;
  line-height: 1;
  text-transform: uppercase;
  color: #0070C0;
}

.hero-powerhouse__video {
  position: relative;
  width: 318px;
  height: 209px;
  border-radius: 20px;
  overflow: hidden;
  background-color: #E8EAE9;
  cursor: pointer;
}

.hero-powerhouse__video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-powerhouse__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0 0 0 3px;
  border: none;
  border-radius: 50%;
  background-color: #FFFFFF;
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease;
}

.hero-powerhouse__play:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

.hero-powerhouse__play:focus-visible {
  outline: 3px solid #0070C0;
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Video lightbox
   --------------------------------------------------------------------------- */
.hero-powerhouse__lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.hero-powerhouse__lightbox[hidden] {
  display: none;
}

.hero-powerhouse__lightbox-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(3, 26, 55, 0.85);
}

.hero-powerhouse__lightbox-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
}

.hero-powerhouse__lightbox-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000000;
  border-radius: 12px;
  overflow: hidden;
}

.hero-powerhouse__lightbox-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hero-powerhouse__lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
  color: #FFFFFF;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* Tablet + desktop — the player box sits exactly on top of the hero card,
   covering it completely: same width, same height, same position.
   module.js measures .hero-powerhouse__card and publishes its live viewport
   rect as --hp-lb-w / --hp-lb-h / --hp-lb-top / --hp-lb-left, re-measured
   whenever the card resizes. Because the backdrop is position:fixed, those
   viewport coordinates line up 1:1 with an absolutely positioned box inside it.
   This tracks the card through every breakpoint, including the ranges where the
   card height is content-driven rather than the fixed 654px.
   Below 768px the original centred, full-width 16/9 player is kept as-is. */
@media (min-width: 768px) {
  .hero-powerhouse__lightbox {
    /* No padding and no flex centring — the box is placed by coordinates. */
    padding: 0;
  }

  .hero-powerhouse__lightbox-inner {
    position: absolute;
    top: var(--hp-lb-top, 0px);
    left: var(--hp-lb-left, 0px);
    width: var(--hp-lb-w, 100%);
    max-width: none;      /* drops the 960px cap */
  }

  .hero-powerhouse__lightbox-frame {
    aspect-ratio: auto;   /* height comes from the card, not from 16/9 */
    height: var(--hp-lb-h, 56.25vw);
    border-radius: 20px;  /* same corner radius as the hero card */
  }

  /* The box now covers the card edge to edge, so there is no longer any space
     above it — the close button moves inside the top-right corner, on a dark
     disc so it stays legible over any video frame. */
  .hero-powerhouse__lightbox-close {
    top: 14px;
    right: 14px;
    z-index: 2;
    border-radius: 50%;
    background-color: rgba(3, 26, 55, 0.55);
    transition: background-color 200ms ease;
  }

  .hero-powerhouse__lightbox-close:hover {
    background-color: rgba(3, 26, 55, 0.85);
  }
}

/* ---------------------------------------------------------------------------
   Intro animation (progressive enhancement — added by JS)
   --------------------------------------------------------------------------- */
.hero-powerhouse--animate .hero-powerhouse__heading,
.hero-powerhouse--animate .hero-powerhouse__subheading,
.hero-powerhouse--animate .hero-powerhouse__actions {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.2, 0, 0.2, 1),
              transform 700ms cubic-bezier(0.2, 0, 0.2, 1);
}

.hero-powerhouse--animate.is-visible .hero-powerhouse__subheading { transition-delay: 120ms; }
.hero-powerhouse--animate.is-visible .hero-powerhouse__actions { transition-delay: 240ms; }

.hero-powerhouse--animate.is-visible .hero-powerhouse__heading,
.hero-powerhouse--animate.is-visible .hero-powerhouse__subheading,
.hero-powerhouse--animate.is-visible .hero-powerhouse__actions {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-powerhouse--animate .hero-powerhouse__heading,
  .hero-powerhouse--animate .hero-powerhouse__subheading,
  .hero-powerhouse--animate .hero-powerhouse__actions {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Desktop + laptop (≥993) — the stat/video boxes sit inside the card, bottom-
   aligned with the Get-in-touch + AI row.

   The band below that row is 88px — deliberately the same as the 88px above the
   heading (from .hero-powerhouse__content's top padding), so the card reads
   evenly weighted top and bottom. It was 154px, which made the card look
   bottom-heavy; the 66px came off the card's min-height at the same time, so
   the copy, CTA row and both boxes kept their original positions.

   This used to start at 1341 — below that the pair dropped out of the card into
   a grey band, which cost every common laptop width (1280, 1366) the intended
   layout. They now stay inside down to 1075 by scaling down instead of moving:
   see --hp-u below. Nothing here changes at ≥1341.
   --------------------------------------------------------------------------- */
@media (min-width: 1075px) {
  .hero-powerhouse__content {
    flex: 1;                 /* fill the card height */
    padding-bottom: 88px;    /* empty space below the actions — matches the top */
  }

  .hero-powerhouse__actions {
    margin-top: auto;        /* push the buttons row to 88px above the bottom */
  }

  .hero-powerhouse__cards {
    bottom: 85px;           /* 88px above the card bottom (+20px section pad) */
    right: 88px;             /* 56px inside the card's right edge (+32px section pad) */

    /* One fluid unit — the video card's width — that the whole pair is derived
       from. It ramps linearly to the full 318px at 1341px, then holds, and
       bottoms out at 252px (79%) at this block's 1075px floor. Every dimension
       below is a fixed ratio of it, so the pair shrinks as an exact miniature:
       same proportions, same line breaks inside the stat card, nothing
       re-laid-out or re-positioned. At ≥1341 every calc() resolves to its
       original design number, so wide desktop is byte-for-byte the layout it was.

       Worst-case clearances across the ramp, measured against the real font
       metrics: 77px from the AI-buttons row (at 1075) and 29px below the
       subheading's 7th line (at ~1200). */
    --hp-u: clamp(252px, calc(24.71vw - 13.4px), 318px);
    gap: calc(var(--hp-u) * 24 / 318);
  }

  .hero-powerhouse__stat {
    width: calc(var(--hp-u) * 237 / 318);
    height: calc(var(--hp-u) * 209 / 318);
    padding: calc(var(--hp-u) * 28 / 318) calc(var(--hp-u) * 30 / 318);
    border-radius: calc(var(--hp-u) * 20 / 318);
  }

  .hero-powerhouse__stat-eyebrow {
    font-size: calc(var(--hp-u) * 18 / 318);
  }

  .hero-powerhouse__stat-value {
    font-size: calc(var(--hp-u) * 45 / 318);
  }

  .hero-powerhouse__video {
    width: var(--hp-u);
    height: calc(var(--hp-u) * 209 / 318);
    border-radius: calc(var(--hp-u) * 20 / 318);
  }

  .hero-powerhouse__play {
    width: calc(var(--hp-u) * 56 / 318);
    height: calc(var(--hp-u) * 56 / 318);
  }

  /* The play glyph is a fixed 20x22 SVG — scale it with the button so the
     triangle keeps its proportion inside the circle. */
  .hero-powerhouse__play svg {
    width: calc(var(--hp-u) * 20 / 318);
    height: calc(var(--hp-u) * 22 / 318);
  }
}

/* ---------------------------------------------------------------------------
   Small laptop / tablet / mobile (≤1074) — hero card stays; the two boxes move
   to a grey band below it, back at their full design size.
   --------------------------------------------------------------------------- */
@media (max-width: 1074px) {
  .hero-powerhouse {
    max-width: 100%;
    padding: 0;
  }

  .hero-powerhouse__card {
    margin: 20px;
    min-height: 0;
  }

  .hero-powerhouse__content {
    max-width: 100%;
    padding: 64px 48px;
  }

  /* Off the video and onto a flat #F2F2F2 band: there is nothing behind the
     card left to blur, so the glass treatment is reverted. Kept translucent it
     would only tint the card towards the band it is meant to stand out from,
     and the blur would still cost a compositor layer on mobile GPUs for no
     visible effect. */
  .hero-powerhouse__stat {
    background-color: #FFFFFF;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Boxes now flow below the card, on their own grey background. */
  .hero-powerhouse__cards {
    position: static;
    background-color: #F2F2F2;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 24px;
    padding: 48px 40px;
  }
}

@media (max-width: 767px) {
  .hero-powerhouse__card {
    /* let the 20px margins create equal L/R gutters (width:100% + margin was
       overflowing); content-driven height (was a forced 460px). */
    width: auto;
    margin: 20px;
    min-height: 0;
  }

  .hero-powerhouse__content {
    padding: 72px 24px 56px;   /* roomier top like the design (~92px to heading) */
  }

  /* Mobile type scale — fixed values, no clamp()/vw scaling. */
  .hero-powerhouse__heading {
    font-size: 50px;
    line-height: 48px;
  }

  .hero-powerhouse__subheading {
    margin-top: 16px;
    font-size: 20px;
    line-height: 1.1;
  }

  .hero-powerhouse__actions {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 32px;
    gap: 20px;
  }

  /* Centred play button, sized to the mobile design (~44px). */
  .hero-powerhouse__play {
    width: 44px;
    height: 44px;
  }

  .hero-powerhouse__cards {
    flex-direction: column;
    gap: 20px;
    padding: 28px 24px 40px;
  }

  .hero-powerhouse__stat,
  .hero-powerhouse__video {
    width: 100%;
  }

  .hero-powerhouse__stat {
    height: auto;
    min-height: 180px;
  }

  .hero-powerhouse__video {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}