body {
  background-color: #f7f7f7 !important;
}

.orbiss-header:not(.orbiss-header--scrolled) {
  background-color: transparent !important;
  box-shadow: none !important;
}


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

  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-top: calc(-1 * var(--orbiss-header-h, 64px));
  padding-top: var(--orbiss-header-h, 64px);
  box-sizing: border-box;
  overflow: hidden;
  background-color: var(--hh6-bg, #f7f7f7);
}

.hh6-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%, var(--hh6-vignette, rgba(111, 111, 232, 0.1)) 0%, transparent 70%);
}

.hh6-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--hh6-max-w, 1280px);
  margin: var(--hh6-mt, 0) auto var(--hh6-mb, 0);
  padding: var(--hh6-pt, 48px) var(--hh6-pr, 24px) var(--hh6-pb, 44px) var(--hh6-pl, 24px);
  box-sizing: border-box;
}


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

.hh6-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) {
  .hh6-grid {
    grid-template-columns: 1fr 1fr;
    gap: 88px;
  }
}

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

.hh6-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  margin-bottom: var(--hh6-badge-mb, 32px);
  font-size: var(--hh6-badge-size, 11px);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 9999px;
  border: 1px solid var(--hh6-badge-border, rgba(58, 46, 123, 0.2));
  background-color: var(--hh6-badge-bg, rgba(58, 46, 123, 0.05));
  color: var(--hh6-badge-color, #3a2e7b);
  font-family: var(--hh6-body-font);
}


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

  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--hh6-h-color, #111827);
  margin: 0 0 var(--hh6-h-mb, 24px);
}

.hh6-heading__line1,
.hh6-heading__accent {
  display: inline;
  font-family: var(--hh6-heading-font);
}

.hh6-heading__line1 { font-size: var(--hh6-h-size, 56px); }
.hh6-heading__accent { font-size: var(--hh6-h-accent-size, 56px); }


.hh6-heading__accent {
  color: var(--hh6-accent-solid, #4a3fc4);
}

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

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

.hh6-subtext {
  font-size: var(--hh6-sub-size, 18px);
  color: var(--hh6-sub-color, #6b7280);
  max-width: var(--hh6-sub-maxw, 460px);
  margin: 0 0 var(--hh6-sub-mb, 40px);
  line-height: 1.65;
  font-family: var(--hh6-body-font);
}

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


.hh6-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  letter-spacing: -0.01em;
  line-height: 1;
  box-sizing: border-box;
  font-family: var(--hh6-body-font);
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease,
              border-color 0.2s ease, color 0.2s ease;
}

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

.hh6-btn--primary {
  background-color: var(--hh6-btn-p-bg, #3a2e7b);
  color: var(--hh6-btn-p-color, #ffffff);
  font-size: var(--hh6-btn-p-size, 15px);
  border-radius: var(--hh6-btn-p-radius, 100px);
  padding: var(--hh6-btn-p-py, 14px) var(--hh6-btn-p-px, 28px);
}

.hh6-btn--primary:hover,
.hh6-btn--primary:focus {
  background-color: var(--hh6-btn-p-hover-bg, #2e2463);
  color: var(--hh6-btn-p-hover-color, #ffffff);
  transform: scale(1.05);
}

.hh6-btn--secondary {
  background: transparent;
  border: 1.5px solid var(--hh6-btn-s-border, #d1d5db);
  color: var(--hh6-btn-s-color, #374151);
  font-size: var(--hh6-btn-s-size, 15px);
  border-radius: var(--hh6-btn-s-radius, 100px);
  padding: var(--hh6-btn-s-py, 14px) var(--hh6-btn-s-px, 28px);
}

.hh6-btn--secondary:hover,
.hh6-btn--secondary:focus {
  border-color: var(--hh6-btn-s-hover-border, #3a2e7b);
  color: var(--hh6-btn-s-hover-color, #3a2e7b);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
}

.hh6-btn--video {

  font-family: var(--hh6-body-font);
  cursor: pointer;
}

.hh6-mosaic {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 16px;
  height: 520px;
}
@media (min-width: 768px) {
  .hh6-mosaic {
    display: grid;
  }
}
@media (min-width: 1024px) {
  .hh6-mosaic {
    height: 600px;
  }
}

.hh6-mosaic__img {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #e5e7eb;
}


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

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

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

.hh6-mosaic__img--1 { grid-column: 1; grid-row: 1 / span 4; }
.hh6-mosaic__img--2 { grid-column: 2; grid-row: 1 / span 2; }
.hh6-mosaic__img--3 { grid-column: 1; grid-row: 5 / span 2; }
.hh6-mosaic__img--4 { grid-column: 2; grid-row: 3 / span 4; }

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

.hh6-animate-up {
  opacity: 0;
  animation: hh6-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hh6-animate-up--d1 { animation-delay: 0.12s; }
.hh6-animate-up--d2 { animation-delay: 0.2s; }
.hh6-animate-up--d3 { animation-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .hh6-animate-up { animation: none; opacity: 1; }
}

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

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

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

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

.hh6-video-modal__container {
  position: relative;
  width: 100%;
  max-width: 900px;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

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

.hh6-video-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  box-sizing: border-box;
}

.hh6-video-modal__close:hover { background: rgba(255, 255, 255, 0.25); }

.hh6-video-modal__video-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.hh6-video-modal__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
  outline: none;
}


@media (max-width: 767px) {
  .hh6-hero__inner {
    padding-left: 24px;
    padding-right: 24px;
  }
  /* Phones (17 Oct 2026): heading and copy centred, heading 30-34px like the
     home hero. The heading gets the same size as its two parts so its own
     (larger) line height no longer leaves a wide gap between the lines. */
  .hh6-content { text-align: center; }
  .hh6-heading {
    font-size: clamp(30px, 8.2vw, 34px);
    text-align: center !important;
  }
  .hh6-heading__line1,
  .hh6-heading__accent {
    font-size: clamp(30px, 8.2vw, 34px);
  }
  .hh6-subtext { max-width: 100%; margin-left: auto; margin-right: auto; }
  .hh6-btns { width: 100%; justify-content: center; }
  .hh6-btn { flex: 1 1 auto; justify-content: center; }
}

@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. */
  .hh6-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. */
  .hh6-video-modal__close {
    top: -38px;
    width: 32px;
    height: 32px;
  }

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

/* Subtext typed with its own paragraph styling (a <div> then, see module.html). */
/* The paragraph takes the subtext's own size (the theme gives plain paragraphs 1rem). */
.hh6-subtext > p { margin: 0; font-size: inherit; }
.hh6-subtext > p + p { margin-top: 0.75em; }
.hh6-subtext > p:empty { display: none; }

/* 20 Oct 2026 (Matt): subtext and primary button weights come from the Style tab on tablets and computers;
   phones keep Regular subtext and Medium buttons. On phones the subtext stays at most 18px and the primary
   button at most 15px, as before their sizes moved from text typed in the editor into the Style tab. */
@media (min-width: 768px) {
  .hh6-subtext { font-weight: var(--hh6-sub-weight, 400); }
  .hh6-btn--primary { font-weight: var(--hh6-btn-p-weight, 500); }
}

@media (max-width: 767px) {
  .hh6-subtext { font-size: min(var(--hh6-sub-size), 18px); }
  .hh6-btn--primary { font-size: min(var(--hh6-btn-p-size), 15px); }
}