/* Homepage hero: millings stockpile -> finished road (see js/hero-millings.js).
   Layout: one full-viewport hero under the fixed 80px nav; the pile/road sits in the band
   between the nav and the copy, copy anchored at the bottom. All selectors scoped to .mh. */
.hero.mh {
  display: flex; flex-direction: column; align-items: stretch;
  height: 100vh; height: 100svh; min-height: 620px; max-height: 1080px;
  padding: 80px 0 0; overflow: hidden; isolation: isolate; container-type: size;
  background: linear-gradient(180deg, #f6f5f3 0%, #fbfbfa 55%, #ffffff 100%);
  touch-action: pan-y;
}
.mh-stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mh-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .5s ease; }
.mh-fallback { position: absolute; display: block; max-width: none; user-select: none; transition: opacity .5s ease; }
/* Where js/hero-millings.js will put the pile, so the first paint (before the script runs)
   doesn't show the 3000px image at full size. The script then sets exact inline values. */
.mh-fallback { left: 3%; top: 88px; width: 94%; height: auto; }
/* Hidden until a script has placed it (inline style), then it fades in via the transition above. */
.mh-fallback:not([style]) { opacity: 0; }
@media (max-width: 1023px) { .mh-fallback { left: -3%; width: 106%; } }
@media (max-width: 639px) { .mh-fallback { left: -1%; width: 102%; } }
.mh[data-gl="on"] .mh-stage canvas { opacity: 1; }
.mh[data-gl="on"] .mh-fallback { opacity: 0; }
.mh[data-gl="on"][data-phase="hold"] .mh-fallback { opacity: 1; z-index: 1; transition: none; }
.mh-shadow { position: absolute; height: 34px; border-radius: 50%; background: radial-gradient(closest-side, rgba(29,29,27,.30), rgba(29,29,27,0));
  filter: blur(5px); transition: left 3.8s cubic-bezier(.3,.6,.2,1), width 3.8s cubic-bezier(.3,.6,.2,1); }

.mh-backdrop { position: absolute; left: 50%; z-index: 0; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; user-select: none;
  font-weight: 800; letter-spacing: -.04em; line-height: .8; color: rgba(29,29,27,.04); text-transform: uppercase; }

.mh-hint { position: absolute; z-index: 1; transform: translate(-50%, 0); display: flex; align-items: center; gap: 10px; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gray); pointer-events: none; transition: opacity .8s ease; }
.mh-hint::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: mh-pulse 2.4s ease-in-out infinite; }
.mh[data-touched="1"] .mh-hint { opacity: 0; }
@keyframes mh-pulse { 0%, 100% { transform: scale(.6); opacity: .45 } 50% { transform: scale(1); opacity: 1 } }

.mh-replay { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; transform: translate(-50%, 0); height: 34px; padding: 0 16px;
  border: 1px solid rgba(29,29,27,.18); border-radius: 999px; background: rgba(255,255,255,.7); backdrop-filter: blur(6px);
  color: var(--gray); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; pointer-events: none; transition: opacity .6s ease, color .2s, border-color .2s; }
.mh[data-phase="done"] .mh-replay { opacity: 1; pointer-events: auto; }
.mh-replay:hover { color: var(--black); border-color: var(--black); }
.mh-replay:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.mh-spacer { flex: 1 1 auto; min-height: 0; }
.mh-content { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: end;
  gap: clamp(24px, 4cqw, 72px); padding: 0 48px max(clamp(32px, 4cqh, 56px), 104px); max-width: 1400px; width: 100%; margin: 0 auto; }
.mh-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(14px, 1.8cqh, 22px);
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.mh-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--red); }
.mh h1 { font-size: clamp(2.6rem, min(6cqw, 10.5cqh), 5.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
.mh h1 em { font-style: normal; color: var(--red); }
.mh-aside { justify-self: end; max-width: 440px; min-width: 0; padding-bottom: .4em; }
.mh-aside p { font-size: 1rem; line-height: 1.7; color: var(--gray); margin: 0 0 28px; text-wrap: pretty; }
.mh-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.mh-label { position: absolute; z-index: 2; right: 48px; top: 96px; font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(29,29,27,.35); }

@container (max-width: 1023px) {
  .mh-content { grid-template-columns: 1fr; gap: 22px; padding: 0 32px 36px; }
  .mh-aside { justify-self: start; max-width: 560px; padding-bottom: 0; }
  .mh h1 { font-size: clamp(2.4rem, min(8.4cqw, 8cqh), 4.4rem); }
  .mh-label { right: 32px; }
}
@container (max-width: 639px) {
  .mh-content { padding: 0 20px 28px; gap: 18px; }
  .mh h1 { font-size: clamp(2.1rem, min(10.5cqw, 6.6cqh), 3rem); }
  .mh-aside p { font-size: .95rem; margin-bottom: 22px; }
  .mh-ctas .btn-arrow { padding: 13px 22px; }
  .mh-label { right: 20px; top: 92px; }
}
/* phones: let the hero grow past the fold so the pile gets a real stage and the copy clears the action bar */
@media (max-width: 639px) {
  .hero.mh { height: auto; min-height: 0; max-height: none; container-type: inline-size; }
  .mh-spacer { flex: none; height: calc(40vw + 76px); }
  .mh-eyebrow { margin-top: 14px; }
  .mh-content { padding-bottom: 132px; }
  .mh h1 { font-size: clamp(2.1rem, 10.5vw, 3rem); }
}
@media (prefers-reduced-motion: reduce) {
  .mh-hint::before { animation: none; }
  .mh-stage canvas, .mh-fallback, .mh-shadow { transition: none; }
}