/* Homepage navigation island. The outer shell owns expanded-mode stickiness so
 * the nested Phase 3 header is not constrained by a header-height-only parent.
 */
.site-v2.site-home-navigation-shell .site-header {
  position: static;
}

@media (min-width: 80rem) {
  .site-v2.site-home-navigation-shell {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--site-z-sticky);
  }
}

/* Hero island only. Flex bases determine when copy/media fit side by side.
 * Original media is contained in a reserved 4:3 frame, not cropped or resized on disk.
 * Native scrolling remains available without JavaScript. No animated state changes.
 */
.site-v2.site-home-hero {
  padding-block: var(--site-section-space);
  background: var(--site-background);
  color: var(--site-text);
}
.site-v2.site-home-hero .site-hero__container {
  inline-size: 100%;
  max-inline-size: var(--site-container-wide);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
  min-inline-size: 0;
}
.site-v2.site-home-hero .site-hero__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  align-items: stretch;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: auto;
  scroll-behavior: auto;
  /* Proximity snapping permits long text/zoom; no forced scroll-jacking. */
  scroll-snap-type: x proximity;
}
.site-v2.site-home-hero .site-hero__slide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  min-inline-size: 0;
  padding: var(--site-space-2);
  scroll-snap-align: start;
}
.site-v2.site-home-hero .site-hero__copy {
  flex: 1 1 24rem;
  min-inline-size: 0;
  max-inline-size: 100%;
  display: grid;
  gap: var(--site-space-6);
  align-content: center;
}
/* Explicit families defeat incoming legacy element font rules, without global resets. */
.site-v2.site-home-hero .site-hero__highlight,
.site-v2.site-home-hero .site-hero__title,
.site-v2.site-home-hero .site-hero__description,
.site-v2.site-home-hero .site-hero__button,
.site-v2.site-home-hero .site-hero__position,
.site-v2.site-home-hero .site-hero__instructions,
.site-v2.site-home-hero .site-hero__button span {
  margin: 0;
  font-family: var(--site-font-family);
  overflow-wrap: anywhere;
}
.site-v2.site-home-hero .site-hero__highlight {
  color: var(--site-lime-ink);
  font-size: var(--site-text-label);
  line-height: var(--site-leading-label);
  font-weight: var(--site-weight-semibold);
}
.site-v2.site-home-hero .site-hero__title {
  color: var(--site-text);
  font-size: var(--site-text-h1);
  line-height: var(--site-leading-h1);
  font-weight: var(--site-weight-bold);
  letter-spacing: -0.02em;
}
.site-v2.site-home-hero .site-hero__description {
  max-inline-size: var(--site-reading);
  color: var(--site-text-secondary);
  font-size: var(--site-text-body-large);
  line-height: var(--site-leading-body-large);
  white-space: pre-line;
}
.site-v2.site-home-hero .site-hero__media {
  position: relative;
  display: block;
  flex: 1 1 24rem;
  min-inline-size: 0;
  max-inline-size: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-surface);
  background: linear-gradient(145deg, var(--site-surface) 0%, var(--site-surface-subtle) 100%);
  box-shadow: var(--site-shadow-small);
  isolation: isolate;
}
.site-v2.site-home-hero .site-hero__image {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  object-fit: contain;
  padding: var(--site-space-4);
}
@media (min-width: 48rem) {
  .site-v2.site-home-hero .site-hero__media {
    box-shadow: var(--site-shadow-surface);
  }
  .site-v2.site-home-hero .site-hero__media::before {
    content: "";
    position: absolute;
    inset: -0.75rem 0.75rem 0.75rem -0.75rem;
    z-index: -1;
    border: 1px solid rgb(0 172 172 / 12%);
    border-radius: inherit;
    background: linear-gradient(135deg, rgb(0 172 172 / 10%), rgb(139 198 71 / 12%));
    pointer-events: none;
  }
}
.site-v2.site-home-hero .site-hero__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--site-space-3);
  padding-block-start: var(--site-space-6);
}
/* Retain control-band geometry before enhancement; hidden controls stay inaccessible. */
.site-v2.site-home-hero .site-hero__controls[hidden] { visibility: hidden; }
.site-v2.site-home-hero .site-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--site-control-height);
  min-inline-size: var(--site-control-height);
  max-inline-size: 100%;
  padding: var(--site-space-3) var(--site-space-4);
  border: 1px solid var(--site-action);
  border-radius: var(--site-radius-control);
  background: var(--site-surface);
  color: var(--site-action);
  font-size: var(--site-text-body);
  font-weight: var(--site-weight-semibold);
  line-height: var(--site-leading-label);
  cursor: pointer;
}
.site-v2.site-home-hero .site-hero__button:hover {
  background: var(--site-surface-subtle);
  color: var(--site-action-hover);
}
.site-v2.site-home-hero .site-hero__button[aria-disabled="true"] { color: var(--site-text-muted); border-color: var(--site-border); cursor: default; }
.site-v2.site-home-hero .site-hero__position { font-size: var(--site-text-small); color: var(--site-text-secondary); }
.site-v2.site-home-hero .site-hero__instructions { padding-block-start: var(--site-space-3); text-align: center; font-size: var(--site-text-small); color: var(--site-text-muted); }
.site-v2.site-home-hero :focus-visible { outline: 3px solid var(--site-focus); outline-offset: 3px; }