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

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


.hc-hero {
  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;
}

.hc-vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 500px;
  max-width: 60vw;
  pointer-events: none;
  z-index: 0;
}

.hc-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}


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

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

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

.hc-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  margin-bottom: 32px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 9999px;
  border: 1px solid rgba(58, 46, 123, 0.2);
  background: transparent;
  color: #3a2e7b;
  font-family: 'brandon-grotesque', sans-serif;
}


.hc-heading {
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #111827;
  margin: 0 0 24px;
}

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

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

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

.hc-subtext {
  font-size: 1.125rem;
  color: #6b7280;
  max-width: 460px;
  margin: 0 0 40px;
  line-height: 1.65;
  font-family: 'brandon-grotesque', sans-serif;
}

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


.hc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 9999px;
  border: none;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  letter-spacing: -0.01em;
  line-height: 1;
  box-sizing: border-box;
  font-family: 'brandon-grotesque', sans-serif;
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

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

.hc-btn--primary:hover,
.hc-btn--primary:focus {
  opacity: 0.9;
  transform: scale(1.05);
}

.hc-btn--secondary {
  background: transparent;
  border: 1.5px solid;
}

.hc-btn--secondary:hover,
.hc-btn--secondary:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
}

.hc-btn--video {
  font-family: inherit;
  cursor: pointer;
}

/* Video buttons are <button> elements, so the theme's button:hover / :focus /
   :active rules (1px border, 6px corners) used to reach them: on hover the pill
   turned into a rectangle and grew by 2px, nudging the text above it.
   Keep the pill and its size in every state (19 Oct 2026, Matt). */
.hc-btn.hc-btn--video:hover,
.hc-btn.hc-btn--video:focus,
.hc-btn.hc-btn--video:active {
  border-radius: 9999px;
}

.hc-btn--primary.hc-btn--video:hover,
.hc-btn--primary.hc-btn--video:focus,
.hc-btn--primary.hc-btn--video:active {
  border: none;
}

.hc-btn--secondary.hc-btn--video:hover,
.hc-btn--secondary.hc-btn--video:focus,
.hc-btn--secondary.hc-btn--video:active {
  border-width: 1.5px;
  border-style: solid;
}

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

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


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

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

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

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

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

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

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

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

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

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

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

.hc-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;
}

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

.hc-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;
}

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

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

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


@media (max-width: 767px) {
  .hc-hero__inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* 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. */
  .hc-content { text-align: center; }
  .hc-heading {
    font-size: clamp(30px, 8.2vw, 34px) !important;
    text-align: center !important;
  }
  .hc-heading__line1,
  .hc-heading__accent {
    font-size: clamp(30px, 8.2vw, 34px) !important;
  }
  .hc-subtext { max-width: 100%; margin-left: auto; margin-right: auto; }
  .hc-btns { width: 100%; justify-content: center; }
  .hc-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. */
  .hc-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. */
  .hc-video-modal__close {
    top: -38px;
    width: 32px;
    height: 32px;
  }

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

/* Subtext typed with its own paragraph styling (a <div> then, see module.html). */
.hc-subtext > p { margin: 0; }
.hc-subtext > p + p { margin-top: 0.75em; }
.hc-subtext > p:empty { display: none; }

/* Phones (20 Oct 2026, Matt "plan A"): the subtext and button font settings are for computers and
   tablets; phones keep the Style tab sizes and the subtext stays Brandon Regular. */
@media (max-width: 767px) {
  .hc-subtext {
    font-size: var(--hc-sub-size-m, 18px) !important;
    font-family: 'brandon-grotesque', sans-serif !important;
    font-weight: 400 !important;
  }
  .hc-btn--primary { font-size: var(--hc-btn-p-size-m, 15px) !important; }
  .hc-btn--secondary { font-size: var(--hc-btn-s-size-m, 15px) !important; }
}

/* Award line under the buttons (21 Oct 2026, "Award line" field). Text #4b5563 on the #f7f7f7 hero = 7:1. */
.hc-award {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 560px;
  margin: 28px 0 0;
  font-family: 'brandon-grotesque', sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: #4b5563;
  text-wrap: pretty; /* no lone "2026" on a second line */
}
.hc-award__icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: #3a2e7b;
}
.hc-award__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(58, 46, 123, 0.35);
  text-underline-offset: 3px;
}
.hc-award__link:hover {
  color: #3a2e7b;
  text-decoration-color: currentColor;
}
.hc-award__link:focus-visible {
  outline: 2px solid #3a2e7b;
  outline-offset: 2px;
  border-radius: 2px;
}
.hc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 767px) {
  /* Phones: trophy and text centred together like the rest of the hero. */
  .hc-award {
    justify-content: center;
    max-width: none;
    margin: 24px auto 0;
    font-size: 14px;
    text-align: left;
  }
}

/* Second award line (event name and year) on its own line. */
.hc-award__l1,
.hc-award__l2 {
  display: block;
}

/* Two-line award (22 Oct 2026, Matt): the trophy runs from the top of the first line to the bottom of
   the second (2 lines x 1.45 line height), with a thinner stroke so it doesn't look heavy at that size. */
.hc-award--two {
  align-items: center;
  gap: 10px;
}
.hc-award--two .hc-award__icon {
  width: 2.9em;
  height: 2.9em;
  margin-top: 0;
  stroke-width: 1.3;
}

/* Invisible keyboard stops of the video pop-up (module.js, 26 Oct 2026) */
.hc-video-modal__stop { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }