/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
/* Hallmark · genre: editorial · tone: cinematic · macrostructure: photographic clearing · scope: hero-only · anchor hue: leaf green · contrast: pass (40–41) · slop: pass (42–49) · mobile: hero pass (49–57) */

:root {
  --hero-color-overlay: oklch(27% 0.035 250);
  --hero-color-overlay-08: oklch(27% 0.035 250 / 0.08);
  --hero-color-overlay-96: oklch(27% 0.035 250 / 0.96);
  --hero-color-overlay-98: oklch(27% 0.035 250 / 0.98);
  --hero-color-overlay-clear: oklch(27% 0.035 250 / 0);
  --hero-color-ink: oklch(97% 0.008 95);
  --hero-color-accent: oklch(72% 0.12 132);
  --hero-color-accent-hover: oklch(67% 0.13 132);
  --hero-color-accent-ink: oklch(27% 0.035 250);
  --hero-color-focus: oklch(91% 0.13 126);
  --hero-font-display: 'Playfair Display', Georgia, serif;
  --hero-font-body: 'Lato', Arial, sans-serif;
  --hero-space-xs: 0.5rem;
  --hero-space-sm: 0.75rem;
  --hero-space-md: 1rem;
  --hero-space-lg: 1.5rem;
  --hero-space-xl: 2.5rem;
  --hero-space-2xl: 4rem;
  --hero-space-3xl: 6rem;
  --hero-text-display: clamp(2.25rem, 9.5vw, 3.25rem);
  --hero-text-body: clamp(1rem, 1.4vw, 1.25rem);
  --hero-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hero-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --hero-duration-micro: 120ms;
  --hero-duration-short: 220ms;
  --hero-duration-media: 420ms;
  --hero-z-poster: 1;
  --hero-z-video: 2;
  --hero-z-overlay: 3;
  --hero-z-content: 4;
}

.hero.hero--cinematic {
  position: relative;
  display: grid;
  align-items: end;
  justify-content: stretch;
  width: 100%;
  height: calc(100svh - var(--header-height));
  min-height: 36rem;
  max-height: 54rem;
  padding: var(--hero-space-xl) clamp(var(--hero-space-lg), 6.5vw, 7.5rem) var(--hero-space-2xl);
  overflow: clip;
  isolation: isolate;
  background: var(--hero-color-overlay);
  color: var(--hero-color-ink);
}

.hero--cinematic .hero-background,
.hero--cinematic .hero-cinematic__poster,
.hero--cinematic .hero-snapshot,
.hero--cinematic .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero--cinematic .hero-background {
  z-index: auto;
  background: var(--hero-color-overlay);
}

.hero--cinematic .hero-background::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--hero-z-overlay);
  background: linear-gradient(
    180deg,
    var(--hero-color-overlay-08) 0%,
    var(--hero-color-overlay-96) 92%
  );
  pointer-events: none;
}

.hero--cinematic .hero-cinematic__poster {
  z-index: var(--hero-z-poster);
  display: block;
  margin: 0;
}

.hero--cinematic .hero-snapshot,
.hero--cinematic .hero-video {
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center center;
  transform: none;
}

.hero--cinematic .hero-snapshot {
  z-index: var(--hero-z-poster);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--hero-duration-media) var(--hero-ease-in);
}

.hero--cinematic .hero-snapshot.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--hero-duration-media) var(--hero-ease-in),
              visibility 0s linear var(--hero-duration-media);
}

.hero--cinematic .hero-video {
  z-index: var(--hero-z-video);
  opacity: 0;
  transition: opacity var(--hero-duration-media) var(--hero-ease-out);
}

.hero--cinematic .hero-video.is-loaded {
  opacity: 1;
}

.hero--cinematic .hero-content {
  position: relative;
  z-index: var(--hero-z-content);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  width: min(100%, 58rem);
  max-width: 58rem;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
  color: var(--hero-color-ink);
  text-align: left;
}

.hero--cinematic .hero-content h1 {
  min-width: 0;
  margin: 0;
  color: var(--hero-color-ink);
  font-family: var(--hero-font-display);
  font-size: var(--hero-text-display);
  font-style: normal;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.hero--cinematic .hero-content h1 span {
  display: block;
}

.hero--cinematic .hero-content p {
  width: min(100%, 39rem);
  margin: var(--hero-space-lg) 0 0;
  color: var(--hero-color-ink);
  font-family: var(--hero-font-body);
  font-size: var(--hero-text-body);
  font-weight: 400;
  line-height: 1.55;
}

.hero--cinematic .hero-content .cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17.5rem;
  min-height: 3.5rem;
  margin-top: var(--hero-space-xl);
  padding: var(--hero-space-sm) var(--hero-space-xl);
  border: 1px solid transparent;
  border-radius: 0.125rem;
  background: var(--hero-color-accent);
  color: var(--hero-color-accent-ink);
  font-family: var(--hero-font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--hero-duration-short) var(--hero-ease-out),
              color var(--hero-duration-short) var(--hero-ease-out),
              transform var(--hero-duration-micro) var(--hero-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .hero--cinematic .hero-content .cta-button:hover {
    background: var(--hero-color-accent-hover);
    color: var(--hero-color-ink);
    transform: translateY(-1px);
  }
}

.hero--cinematic .hero-content .cta-button:active {
  transform: translateY(1px);
  transition-timing-function: var(--hero-ease-in);
}

.hero--cinematic .hero-content .cta-button:focus-visible {
  outline: 3px solid var(--hero-color-focus);
  outline-offset: 4px;
}

.hero--cinematic .hero-content .cta-button[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 39.999rem) {
  .hero--cinematic .hero-background::after {
    background: linear-gradient(
      180deg,
      var(--hero-color-overlay-08) 26%,
      var(--hero-color-overlay-96) 88%
    );
  }

  .hero--cinematic .hero-snapshot,
  .hero--cinematic .hero-video {
    object-position: 58% center;
  }

  .hero--cinematic .hero-content {
    width: min(100%, 25rem);
  }

  .hero--cinematic .hero-content::before {
    content: '';
    display: block;
    width: 3.5rem;
    height: 0.125rem;
    margin-bottom: var(--hero-space-lg);
    background: var(--hero-color-accent);
  }

  .hero--cinematic .hero-content h1 {
    font-size: clamp(2.4rem, 10vw, 2.8rem);
    line-height: 1.01;
    overflow-wrap: normal;
    text-wrap: balance;
  }

  .hero--cinematic .hero-content h1 span:first-child {
    margin-bottom: var(--hero-space-xs);
    font-size: 0.76em;
    line-height: 1.08;
    letter-spacing: -0.015em;
  }

  .hero--cinematic .hero-content p {
    width: min(100%, 32ch);
    margin-top: var(--hero-space-lg);
  }

  .hero--cinematic .hero-content .cta-button {
    width: 100%;
    min-width: 0;
    min-height: 3.75rem;
  }
}

@media (min-width: 40rem) {
  .hero.hero--cinematic {
    align-items: center;
    min-height: 38rem;
    padding-block: 3rem var(--hero-space-2xl);
  }

  .hero--cinematic .hero-background::after {
    background: linear-gradient(
      90deg,
      var(--hero-color-overlay-98) 0%,
      var(--hero-color-overlay-clear) 68%
    );
  }

  .hero--cinematic .hero-content {
    justify-content: center;
  }

  .hero--cinematic .hero-content h1 {
    font-size: clamp(2.65rem, 5.5vw, 3rem);
  }
}

@media (min-width: 60rem) {
  .hero--cinematic .hero-content h1 {
    font-size: clamp(3.2rem, 3.6vw, 4.4rem);
  }
}

@media (min-width: 68rem) {
  .hero--cinematic .hero-content h1 span:last-child {
    white-space: nowrap;
  }
}

@media (min-width: 90rem) {
  .hero--cinematic .hero-content h1 {
    font-size: clamp(4rem, 3.7vw, 5rem);
  }
}

@media (max-height: 44rem) and (min-width: 40rem) {
  .hero.hero--cinematic {
    min-height: 32rem;
    padding-block: 1.75rem var(--hero-space-xl);
  }

  .hero--cinematic .hero-content h1 {
    font-size: clamp(2.75rem, 5vw, 3.75rem);
  }

  .hero--cinematic .hero-content p {
    margin-top: var(--hero-space-md);
  }

  .hero--cinematic .hero-content .cta-button {
    margin-top: var(--hero-space-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--cinematic .hero-video {
    display: none;
  }

  .hero--cinematic .hero-snapshot,
  .hero--cinematic .hero-snapshot.is-hidden {
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .hero--cinematic .hero-content .cta-button {
    transition-duration: 0ms;
  }

  .hero--cinematic .hero-content .cta-button:hover,
  .hero--cinematic .hero-content .cta-button:active {
    transform: none;
  }
}