/* ============================================================
   HOME HERO 5
   Two-column split hero: copy on the left (no stats row — see
   Home Hero 2 for that variant), a 3x6 asymmetric 4-image
   mosaic on the right (two images span both left columns).
   Same button/badge/gradient/video-modal conventions and
   refinements as Home Hero 2.
   ============================================================ */

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

/* ── Header: transparent + no shadow when at top of hero (matches home-hero.module) ── */
.orbiss-header:not(.orbiss-header--scrolled) {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ── Section: full-width breakout + slides up under the fixed header
   (matches hero-banner.module) so the section's own background/vignette
   paints all the way to the top and shows through the transparent
   header, instead of the header just revealing flat body color while
   the hero's gradient starts only below it. padding-top re-reserves
   the same height so content isn't visually covered by the header. ── */
.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;
}

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

/* ── Inner content wrapper (receives section_spacing padding via inline <style>) ── */
.hc-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── Vertical centering on wide/standard screens only.
   Gated to the same 1024px breakpoint the two-column grid uses — below
   that, content is already stacked single-column and reads fine
   top-anchored; forcing min-height:100vh there (portrait phones/
   tablets) would just leave odd empty space above/below the stack. ── */
@media (min-width: 1024px) {
  .hc-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}

/* ── Two-column grid ── */
.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;
  }
}

/* ── Left column ── */
.hc-content {
  min-width: 0;
}

/* ── Badge ── */
.hc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  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-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Heading ── */
.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;
}

/* The accent line keeps the solid colour set inline as its computed `color`;
   only the paint is replaced here. See the Accent note in module.html. */
@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;
  }
}

/* ── Subtext ── */
.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;
}

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

/* border/box-sizing intentionally live ONLY on the plain .hc-btn rule
   (not the :hover/:focus/:active/:visited list below) — a pseudo-class
   selector outranks a single-class selector like .hc-btn--secondary
   regardless of source order, so a "border: none" reasserted here would
   silently win over --secondary's border on hover, shrinking the button
   by 3px and (via .hc-grid's align-items:center) nudging every sibling
   in the column. Only text-decoration genuinely needs reasserting across
   all those states (browsers underline :visited links by default). */
.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;
}

/* ── Image mosaic (right column) ── */
.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;
}

/* Rotation frames stack on top of each other; only .is-active is
   visible. Crossfade is a plain opacity transition — no layout
   properties involved, so it stays smooth regardless of how many
   images a position has. */
.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; } /* Top Wide */
.hc-mosaic__img--2 { grid-column: 3; grid-row: 1 / span 2; } /* Right Top */
.hc-mosaic__img--3 { grid-column: 3; grid-row: 3 / span 4; } /* Right Bottom */
.hc-mosaic__img--4 { grid-column: 1 / span 2; grid-row: 5 / span 2; } /* Bottom Wide */

/* ── Entrance animations ── */
@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; }
}

/* ── Video modal ── */
.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;
}

/* ── Mobile ──
   Heading line/accent spans carry a field-driven inline font-size
   (desktop px value) — only an !important rule in the stylesheet
   can beat that inline value, so the clamp targets the spans
   directly rather than the (non-rendering-size) .hc-heading tag. */
@media (max-width: 767px) {
  .hc-hero__inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .hc-heading__line1,
  .hc-heading__accent {
    font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important;
  }
  .hc-subtext { max-width: 100%; }
  .hc-btns { width: 100%; }
  .hc-btn { flex: 1 1 auto; justify-content: center; }
}