.hh4-hero {
  --hh4-heading-font: 'akzidenz-grotesk', 'akzidenz-fallback', 'Akzidenz-Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --hh4-body-font:    'brandon-grotesque', 'brandon-fallback', 'Brandon Grotesque', 'Helvetica Neue', Arial, sans-serif;

  --hh4-bg:            #f7f7f7;
  --hh4-max-w:         1280px;
  --hh4-pt:            48px;
  --hh4-pr:            24px;
  --hh4-pb:            64px;
  --hh4-pl:            24px;
  --hh4-mt:            0;
  --hh4-mb:            0;
  --hh4-badge-color:   #3a2e7b;
  --hh4-badge-bg:      rgba(58, 46, 123, 0.05);
  --hh4-badge-border:  rgba(58, 46, 123, 0.2);
  --hh4-badge-radius:  100px;
  --hh4-badge-gap:     32px;
  --hh4-badge-size:    12px;
  --hh4-h-color:       #111827;
  --hh4-h-accent:      #4a3fc4;
  --hh4-h-grad:        linear-gradient(to bottom right, #1f2238 0%, #4a3fc4 50%, #4f4fce 100%);
  --hh4-h-gap:         24px;
  --hh4-h-size:        56px;
  --hh4-h-size-m:      34px;
  --hh4-sub-size-m:    17px;
  --hh4-sub-color:     #5f6672;
  --hh4-sub-link:      #3a2e7b;
  --hh4-sub-max:       460px;
  --hh4-sub-gap:       40px;
  --hh4-sub-size:      18px;
  --hh4-stat-value:    #111827;
  --hh4-stat-label:    #5f6672;
  --hh4-stat-divider:  #c9ccd2;
  --hh4-stat-max:      560px;
  --hh4-stat-align:    center;
  --hh4-stat-gap:      48px;
  --hh4-stat-v-size:   34px;
  --hh4-stat-l-size:   16px;
  --hh4-btn-p-bg:      #3a2e7b;
  --hh4-btn-p-color:   #ffffff;
  --hh4-btn-p-bg-hover:    #2d2360;
  --hh4-btn-p-color-hover: #ffffff;
  --hh4-btn-p-radius:  100px;
  --hh4-btn-p-py:      14px;
  --hh4-btn-p-px:      28px;
  --hh4-btn-p-size:    15px;
  --hh4-btn-s-color:   #374151;
  --hh4-btn-s-border:  #6b7280;
  --hh4-btn-s-border-hover: #3a2e7b;
  --hh4-btn-s-color-hover:  #1f2238;
  --hh4-btn-s-radius:  100px;
  --hh4-btn-s-py:      14px;
  --hh4-btn-s-px:      28px;
  --hh4-btn-s-size:    15px;
  --hh4-mosaic-radius: 16px;
  --hh4-mosaic-h:      600px;
}


.hh4-hero {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-top: calc(var(--hh4-mt) - var(--orbiss-header-h, 64px));
  margin-bottom: var(--hh4-mb);
  padding-top: var(--orbiss-header-h, 64px);
  overflow: hidden;
  box-sizing: border-box;
  background-color: var(--hh4-bg);
  font-family: var(--hh4-body-font);
}

.hh4-hero,
.hh4-hero *,
.hh4-hero *::before,
.hh4-hero *::after {
  box-sizing: border-box;
}

.hh4-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 500px;
  max-width: 60vw;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 0% 0%,
    color-mix(in srgb, var(--hh4-h-accent) 12%, transparent) 0%,
    transparent 70%);
}


@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .hh4-vignette {
    background: radial-gradient(ellipse at 0% 0%, rgba(74, 63, 196, 0.10) 0%, transparent 70%);
  }
}

.hh4-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(var(--hh4-max-w), 100%);
  margin: 0 auto;
  padding: var(--hh4-pt) var(--hh4-pr) var(--hh4-pb) var(--hh4-pl);
}


@media (min-width: 1024px) {
  .hh4-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}

.hh4-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 1024px) {
  .hh4-grid {
    grid-template-columns: 1fr 1fr;
    gap: 88px;
  }
}

.hh4-content {
  min-width: 0;
}


.hh4-rt > * {
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.hh4-rt > * + *::before {
  content: ' ';
}


.hh4-rt-block > * {
  margin: 0 0 0.7em;
  font: inherit;
  color: inherit;
}

.hh4-rt-block > *:last-child {
  margin-bottom: 0;
}

.hh4-sr-only {
  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;
}


.hh4-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  margin: 0 0 var(--hh4-badge-gap);
  font-family: var(--hh4-body-font);
  font-size: var(--hh4-badge-size);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  border-radius: var(--hh4-badge-radius);
  border: 1px solid var(--hh4-badge-border);
  background-color: var(--hh4-badge-bg);
  color: var(--hh4-badge-color);
}


.hh4-heading {
  font-family: var(--hh4-heading-font);

  font-weight: 700;
  font-size: var(--hh4-h-size);
  color: var(--hh4-h-color);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--hh4-h-gap);
  padding: 0;
  text-wrap: balance;
}

.hh4-heading__line1,
.hh4-heading__accent {
  display: inline;
}


.hh4-heading__accent {
  color: var(--hh4-h-accent);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hh4-heading__accent {
    background-image: var(--hh4-h-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@media (forced-colors: active) {
  .hh4-heading__accent {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}

.hh4-subtext {
  font-family: var(--hh4-body-font);
  font-size: var(--hh4-sub-size);
  font-weight: 400;
  color: var(--hh4-sub-color);
  max-width: var(--hh4-sub-max);
  margin: 0 0 var(--hh4-sub-gap);
  line-height: 1.65;
}

/* Main heading (20 Oct 2026): holds the slogan (.hh4-heading) and the line under it (.hh4-subtext), see
   module.html. It takes no space or styling of its own, so the theme's h1 margin, size, font and colour don't
   reach the two parts, which look exactly as before. */
.hh4-title {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
}

.hh4-title > .hh4-heading,
.hh4-title > .hh4-subtext {
  display: block;
}

.hh4-subtext a,
.hh4-subtext a:hover,
.hh4-subtext a:focus,
.hh4-subtext a:active,
.hh4-subtext a:visited {

  font: inherit;
  color: var(--hh4-sub-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}


.hh4-btns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}


.hh4-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  font-family: var(--hh4-body-font);
  font-weight: 500;
  cursor: pointer;
  letter-spacing: -0.01em;
  line-height: 1.4;


  min-height: 44px;
  min-width: 44px;
  white-space: normal;
  text-align: center;
  transition: transform 0.2s ease, background-color 0.2s ease,
              border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.hh4-btn,
.hh4-btn:hover,
.hh4-btn:focus,
.hh4-btn:active,
.hh4-btn:visited {
  text-decoration: none !important;
}

.hh4-btn--primary {
  padding: var(--hh4-btn-p-py) var(--hh4-btn-p-px);
  border-radius: var(--hh4-btn-p-radius);
  font-size: var(--hh4-btn-p-size);
  background-color: var(--hh4-btn-p-bg);
  color: var(--hh4-btn-p-color);
}


.hh4-btn:hover,
.hh4-btn:focus,
.hh4-btn:focus-visible,
.hh4-btn:active,
.hh4-btn:visited {
  font-family: var(--hh4-body-font);
  font-weight: 500;
  letter-spacing: -0.01em;
}


.hh4-btn--primary:hover,
.hh4-btn--primary:focus,
.hh4-btn--primary:focus-visible,
.hh4-btn--primary:active,
.hh4-btn--primary:visited {
  font-size: var(--hh4-btn-p-size);
  background-color: var(--hh4-btn-p-bg);
  color: var(--hh4-btn-p-color);
  border-radius: var(--hh4-btn-p-radius);
}


.hh4-btn--secondary:hover,
.hh4-btn--secondary:focus,
.hh4-btn--secondary:focus-visible,
.hh4-btn--secondary:active,
.hh4-btn--secondary:visited {
  font-size: var(--hh4-btn-s-size);
  background-color: transparent;
  color: var(--hh4-btn-s-color);
  border-color: var(--hh4-btn-s-border);
  border-radius: var(--hh4-btn-s-radius);
}

.hh4-btn--primary:hover,
.hh4-btn--primary:focus-visible {
  background-color: var(--hh4-btn-p-bg-hover);
  color: var(--hh4-btn-p-color-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
}

.hh4-btn--secondary {
  padding: var(--hh4-btn-s-py) var(--hh4-btn-s-px);
  border-radius: var(--hh4-btn-s-radius);
  font-size: var(--hh4-btn-s-size);
  background-color: transparent;
  border: 1.5px solid var(--hh4-btn-s-border);
  color: var(--hh4-btn-s-color);
}

.hh4-btn--secondary:hover:not([disabled]),
.hh4-btn--secondary:focus-visible {
  border-color: var(--hh4-btn-s-border-hover);
  color: var(--hh4-btn-s-color-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
}


.hh4-btn[disabled] {
  cursor: not-allowed;
  border-style: dashed;
}


/* Equal-width columns that each grow to fit their number: a long value ("$2+ billion") takes the room it
   needs instead of wrapping, the others share what is left, and the row wraps only if it truly can't fit. */
.hh4-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  max-width: min(var(--hh4-stat-max), 100%);
  margin: var(--hh4-stat-gap) 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--hh4-stat-divider);
}

.hh4-stat {
  flex: 1 1 0;
  text-align: var(--hh4-stat-align, center);
}

.hh4-stat__value {
  margin: 0;
  white-space: nowrap;
  font-family: var(--hh4-body-font);
  font-size: var(--hh4-stat-v-size);
  font-weight: 700;
  line-height: 1.2;
  color: var(--hh4-stat-value);
}

.hh4-stat__label {
  margin: 4px 0 0;
  font-family: var(--hh4-body-font);
  font-size: var(--hh4-stat-l-size);
  font-weight: 400;
  line-height: 1.45;
  color: var(--hh4-stat-label);
}


.hh4-hero :where(a, button, video, [tabindex]):focus-visible,
.hh4-video-modal :where(a, button, video, [tabindex]):focus-visible {
  outline: 3px solid var(--hh4-h-accent, #4a3fc4);
  outline-offset: 3px;
  border-radius: 4px;
}

.hh4-hero a,
.hh4-hero button {
  scroll-margin-top: 96px;
}

.hh4-mosaic {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 16px;
  height: min(var(--hh4-mosaic-h), 78vh);
}

@media (min-width: 768px) {
  .hh4-mosaic {
    display: grid;
    height: min(calc(var(--hh4-mosaic-h) * 0.87), 70vh);
  }
}

@media (min-width: 1024px) {
  .hh4-mosaic {
    height: min(var(--hh4-mosaic-h), 82vh);
  }
}

.hh4-mosaic__img {
  position: relative;
  overflow: hidden;
  border-radius: var(--hh4-mosaic-radius);
  background-color: #d8dae0;
}


.hh4-mosaic__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  will-change: opacity;
}

.hh4-mosaic__frame.is-active {
  opacity: 1;
  z-index: 1;
}

.hh4-mosaic__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hh4-mosaic__img--1 { grid-column: 1; grid-row: 1 / span 7;  }
.hh4-mosaic__img--2 { grid-column: 2; grid-row: 1 / span 5;  }
.hh4-mosaic__img--3 { grid-column: 3; grid-row: 3 / span 8;  }
.hh4-mosaic__img--4 { grid-column: 2; grid-row: 6 / span 5;  }

@keyframes hh4-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hh4-animate-up {
  animation: hh4-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hh4-animate-up--d1 { animation-delay: 0.12s; }
.hh4-animate-up--d2 { animation-delay: 0.2s; }
.hh4-animate-up--d3 { animation-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .hh4-animate-up { animation: none; }
  .hh4-mosaic__frame,
  .hh4-btn { transition: none; }
}

.hh4-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.hh4-video-modal[hidden] { display: none; }

html.hh4-scroll-lock,
html.hh4-scroll-lock body {
  overflow: hidden;
}

.hh4-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hh4-video-modal--open .hh4-video-modal__backdrop { opacity: 1; }

.hh4-video-modal__container {
  position: relative;
  width: 100%;
  /* Bounded by height as well as width so the 16:9 box always fits the
     window - including room above it for the close button - instead of
     growing until it fills the screen. */
  max-width: min(900px, calc((100vh - 140px) * 16 / 9));
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.hh4-video-modal--open .hh4-video-modal__container {
  opacity: 1;
  transform: scale(1);
}

.hh4-video-modal__close {
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  position: absolute;
  top: -48px;
  right: 0;

  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
}

.hh4-video-modal__close:hover,
.hh4-video-modal__close:focus,
.hh4-video-modal__close:focus-visible,
.hh4-video-modal__close:active {
  background-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
  border-radius: 50%;
}

.hh4-video-modal__close:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
}

.hh4-video-modal__video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background-color: #000000;
}

.hh4-video-modal__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background-color: #000000;
}

@media (prefers-reduced-motion: reduce) {
  .hh4-video-modal__backdrop,
  .hh4-video-modal__container { transition: none; }
}


@media (max-width: 767px) {
  .hh4-hero__inner {
    padding-left: max(var(--hh4-pl), 20px);
    padding-right: max(var(--hh4-pr), 20px);
  }

  .hh4-heading {
    font-size: var(--hh4-h-size-m);
    letter-spacing: -0.015em;
  }

  .hh4-subtext,
  .hh4-stats {
    max-width: 100%;
  }

  .hh4-btns {
    width: 100%;
  }

  .hh4-btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 767px) {
  /* The badge is inline-level so it hugs its text; making it a fitted block
     lets the auto margins centre the pill alone, leaving the heading and copy
     beside it left-aligned. */
  .hh4-badge {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }

  /* Video overlay only: the dialog is close to full width here, so the close
     control is scaled down to give the frame more of the screen. Kept above
     the WCAG 2.2 AA 24px target minimum. */
  .hh4-video-modal__close {
    top: -40px;
    width: 32px;
    height: 32px;
  }

  .hh4-video-modal__close svg {
    width: 16px;
    height: 16px;
  }
}


/* Phones (17 Oct 2026): the hero fills the screen with its content centred, the
   heading and subtext are larger (--hh4-h-size-m / --hh4-sub-size-m, module.html),
   and the stats row with its line is hidden unless "Show on mobile" is on in the
   Stats Row style group. The gaps grow with the screen height within the editor's
   spacing values; svh keeps the hero to the visible area while the browser bars show. */
@media (max-width: 767px) {
  .hh4-hero {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
  }

  .hh4-hero__inner {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hh4-content {
    text-align: center;
  }

  /* Plain line breaks instead of balanced ones: at the larger phone size the
     balanced FR heading broke inside "États-Unis". "pretty" (newer browsers)
     still avoids a lone last word; older browsers keep "wrap". */
  .hh4-heading {
    text-wrap: wrap;
    text-wrap: pretty;
  }

  .hh4-badge {
    margin-bottom: clamp(calc(var(--hh4-badge-gap) * 0.875), 5.5vh, calc(var(--hh4-badge-gap) * 1.625));
  }

  .hh4-heading {
    margin-bottom: clamp(calc(var(--hh4-h-gap) * 0.83), 3.4vh, calc(var(--hh4-h-gap) * 1.33));
  }

  .hh4-subtext {
    font-size: var(--hh4-sub-size-m);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(calc(var(--hh4-sub-gap) * 0.8), 6.5vh, calc(var(--hh4-sub-gap) * 1.5));
  }

  .hh4-btns {
    justify-content: center;
  }

  .hh4-stats--mobile-off {
    display: none;
  }
}