/* hero.css — owned by Task 2 */
.hero { height: 100svh; min-height: 100svh; background: var(--navy); color: var(--paper); overflow: hidden; display: flex; }
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 2rem;
  padding-block: clamp(1.5rem, 4vh, 3rem); width: min(100% - 2 * var(--gutter), 1440px);
  height: 100%; min-height: 0;
}
.hero__eyebrow { color: var(--paper); }
html.js .hero__title, html.js .hero__cta { opacity: 0; }
/* Height-driven, not vh-driven: the mark's row is the flexible (1fr) track, so its
   available space is whatever the eyebrow/title/CTA rows + gaps + padding leave inside
   100svh. height:100% resolves against that row's own computed size, so the mark always
   yields to the fixed-size rows around it instead of forcing the section past the fold. */
.hero__mark { height: clamp(140px, 100%, 380px); width: auto; aspect-ratio: 1; color: var(--paper); align-self: center; }
.hero__mark svg { width: 100%; height: 100%; }
.hero__title { font-size: clamp(4.5rem, 10.5vw, 11.5rem); line-height: 0.85; white-space: nowrap; }
.hero__line { display: block; overflow: hidden; }
.hero__line--2 { padding-left: 6vw; }
.hero__cta { color: var(--paper); align-self: end; justify-self: start; }
.hero__scroll { position: absolute; right: var(--gutter); bottom: 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); }
.hero__scroll i { display: block; width: 1px; height: 48px; background: var(--paper); transform-origin: top; animation: hero-pulse 2.4s ease-in-out infinite; }
@keyframes hero-pulse { 0%, 100% { transform: scaleY(0.2); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }
@media (max-width: 767px) {
  .hero__mark { height: min(100%, 34vh); }
  .hero__title { font-size: clamp(3.2rem, 16vw, 7rem); white-space: normal; margin-right: calc(-1 * var(--gutter)); }
  .hero__line--2 { padding-left: 4vw; }
  .hero__eyebrow { white-space: nowrap; font-size: clamp(0.625rem, 3vw, 0.75rem); }
  .hero__scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll i { animation: none; transform: none; opacity: 1; }
}