/* Keep the photographic hero's paper button colors and display sizes local.
 * The explicit light scope keeps this photographic hero consistent in all themes. */
.home_hero {
  --c-paper: #f4f1e9;
  --c-paper-hover: #e8e3d7;
  --c-title-large: 5.5rem;
  --c-title-largest: 6.5rem;
  height: calc(100vh - var(--c-viewport-offset, var(--wp-admin--admin-bar--height, 0px)));
  height: calc(100dvh - var(--c-viewport-offset, var(--wp-admin--admin-bar--height, 0px)));
  position: relative;
  isolation: isolate;
  container-type: size;
  background: var(--bg-inverse);
  color: var(--ink-inverse);
}
.home_hero-image,
.home_hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--c-media-position, center top);
}
/* Reveal the photo only once its matching backdrop is ready.
 * Without JS the photo stays visible with the semantic backdrop fallback. */
.home_hero[data-media-pending='true'] .home_hero-image {
  opacity: 0;
}
.home_hero-video {
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.home_hero-video[data-playing='true'] {
  opacity: 1;
}
.home_hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--c-backdrop-color, var(--bg-inverse));
  opacity: 0;
}
.home_hero[data-backdrop='true']::after {
  opacity: var(--c-backdrop-opacity, 0.7);
}
.home_hero-inner {
  position: relative;
  z-index: calc(var(--z-sink) + 2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  max-width: 90rem;
  margin-inline: auto;
  padding: calc(var(--c-navigation-height, 4.5625rem) + var(--space-6)) var(--space-6) var(--space-8);
}
.home_hero-copy {
  margin-block: auto;
  padding-block: var(--space-4) var(--space-8);
}
.home_hero-title {
  max-width: 56rem;
  margin-bottom: var(--space-6);
  font: var(--weight-regular) var(--text-5xl)/1.06 var(--font-heading);
  letter-spacing: -0.04em;
}
.home_hero-title em {
  color: var(--ink-accent-inverse);
  font-weight: var(--weight-regular);
}
.home_hero-text {
  max-width: 32rem;
  margin-bottom: var(--space-8);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
}
.home_hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6) var(--space-8);
}
.home_hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  min-height: 3.5rem;
  padding: var(--space-4) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  color: var(--ink-inverse);
  background: var(--action-secondary-hover);
  font-weight: var(--weight-medium);
  text-align: center;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}
.home_hero-button:hover {
  background: var(--action-secondary);
  transform: translateY(-2px);
}
.home_hero-button[data-variant='light'] {
  background: var(--c-paper);
  color: var(--ink-accent);
}
.home_hero-button[data-variant='light']:hover {
  background: var(--c-paper-hover);
}
.home_hero-button span {
  font-size: var(--text-xl);
}
.home_hero-note {
  margin-top: var(--space-5);
  color: var(--ink-on-inverse);
  font-size: var(--text-sm);
}
@container (min-width: 40rem) and (min-height: 46rem) {
  .home_hero-title { font-size: var(--text-7xl); }
}
@media (min-width: 48rem) {
  .home_hero-inner { padding-inline: var(--space-12); }
}
@media (min-width: 64rem) {
  .home_hero-inner { padding-inline: var(--space-20); }
}
@container (min-width: 48rem) and (min-height: 48rem) {
  .home_hero-title { font-size: var(--c-title-large); }
}
@container (min-width: 48rem) and (min-height: 56rem) {
  .home_hero-inner { padding-top: calc(var(--c-navigation-height, 4.5625rem) + var(--space-8)); }
  .home_hero-copy { padding-block: var(--space-8) var(--space-12); }
}
@container (min-width: 64rem) and (min-height: 56rem) {
  .home_hero-title { font-size: var(--c-title-largest); }
}
@media (prefers-reduced-motion: reduce) {
  .home_hero-button:hover { transform: none; }
  .home_hero-video { transition: none; }
}

.home_hero-copy { max-width: 56rem; }
.home_hero[data-text-position='center'] .home_hero-copy {
  align-self: center;
  text-align: center;
}
.home_hero[data-text-position='center'] .home_hero-text { margin-inline: auto; }
.home_hero[data-text-position='center'] .home_hero-actions { justify-content: center; }
.home_hero[data-text-position='right'] .home_hero-copy {
  align-self: flex-end;
  text-align: right;
}
.home_hero[data-text-position='right'] .home_hero-text { margin-left: auto; }
.home_hero[data-text-position='right'] .home_hero-actions { justify-content: flex-end; }
@media (prefers-reduced-motion: reduce) {
  .home_hero-video[data-playing='true'] { opacity: 0; }
}

.home_hero-members {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.home_hero-member {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: var(--radius-full);
}
.home_hero[data-text-position='center'] .home_hero-members { justify-content: center; }
.home_hero[data-text-position='right'] .home_hero-members { justify-content: flex-end; }
.home_hero-playback {
  position: absolute;
  top: calc(var(--c-navigation-height, 4.5625rem) + 1.5rem);
  right: 1.5rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-inverse);
  border-radius: var(--radius-full);
  background: var(--bg-inverse);
  color: var(--ink-inverse);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .home_hero-playback { display: none; }
}