/* Hallmark · component: hero caption · tone: warm illustrated · anchor hue: forest */
.hero-parking { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--color-ink); pointer-events: none; }
.hero-parking-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.hero-parking-art picture, .hero-parking-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; overflow: hidden; }
.hero-parking-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.hero-parking[data-hero-motion='video']:not([data-hero-gesture='required']) .hero-parking-art picture { visibility: hidden; }
.hero-parking[data-hero-gesture='required'] .hero-parking-video { visibility: hidden; }
/* The caption keeps one place in the hero copy as it becomes the replay action. */
.hero-parking-caption { display: grid; place-items: center; width: min(360px, 100%); min-height: 64px; margin: var(--space-md) auto 0; color: var(--color-cream); }
.hero-parking-storyline { display: grid; justify-items: center; gap: var(--space-sm); }
[data-hero-status] { font-size: .84rem; line-height: 1.4; text-wrap: balance; text-shadow: 0 1px 8px var(--color-dialog-shade); }
.hero-parking-progress { display: block; width: 64px; height: 2px; overflow: hidden; background: color-mix(in oklch, var(--color-cream) 30%, transparent); }
.hero-parking-progress::after { content: ''; display: block; height: 100%; background: var(--color-cream); transform: scaleX(var(--hero-progress, 0)); transform-origin: left; }
.hero-parking-caption button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 44px; min-width: 44px; padding: var(--space-sm) var(--space-md); border: 1px solid color-mix(in oklch, var(--color-cream) 55%, transparent); border-radius: var(--radius-pill); background: var(--color-dialog-shade); color: var(--color-cream); font-size: .84rem; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.hero-parking-caption button .icon { width: 16px; height: 16px; }
.hero-parking-caption button > span { font-size: 1.2rem; line-height: 1; }
.hero-parking-caption button:focus-visible { outline: 2px solid var(--color-yellow); outline-offset: 4px; }
.hero-parking-caption button:active { transform: scale(.97); }
/* An enlarged phone makes the action readable while the trekker uses its 3D counterpart. */
.hero-payment { position: absolute; right: clamp(24px, 7vw, 120px); bottom: 118px; width: 218px; transform-origin: center bottom; color: var(--color-ink); }
.hero-phone { position: relative; padding: 20px 16px 12px; border: 5px solid var(--color-deep); border-radius: 28px; background: var(--color-cream); box-shadow: 0 18px 48px var(--color-dialog-shade), inset 0 0 0 1px var(--color-line); }
.hero-phone::before { content: ''; position: absolute; top: 6px; left: 50%; width: 42px; height: 4px; border-radius: var(--radius-pill); background: var(--color-deep); transform: translateX(-50%); }
.hero-phone-brand { display: flex; align-items: center; gap: 5px; margin-bottom: 20px; font-size: 12px; font-weight: 700; }
.hero-phone-brand img { width: 27px; height: 15px; }
.hero-phone-signal { margin-left: auto; letter-spacing: 1px; font-size: 10px; }
.hero-phone-eyebrow { display: block; margin-bottom: 6px; color: var(--color-muted); font-size: 12px; font-weight: 600; line-height: 1.4; }
.hero-phone-title { display: block; min-height: 38px; font-size: 18px; font-weight: 600; line-height: 1.1; letter-spacing: -.025em; }
.hero-phone-plate { display: flex; align-items: center; gap: 8px; height: 40px; margin: 12px 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: 6px; background: var(--color-white); font-family: var(--font-mono); font-size: 19px; font-weight: 700; letter-spacing: -.06em; }
.hero-phone-country { display: grid; place-items: center; align-self: stretch; width: 24px; background: var(--color-focus); color: var(--color-white); font-family: var(--font-body); font-size: 9px; letter-spacing: 0; }
.hero-phone-caret { width: 1px; height: 20px; background: var(--color-ink); margin-left: -6px; }
.hero-phone-action { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border-radius: 8px; background: var(--color-yellow); font-size: 12px; font-weight: 600; }
.hero-phone-check { display: none; }
.hero-phone-note { display: block; min-height: 24px; margin-top: 10px; color: var(--color-muted); font-size: 10px; line-height: 1.3; text-align: center; }
.hero-phone-home { display: block; width: 50px; height: 3px; margin: 3px auto 0; background: var(--color-ink); border-radius: var(--radius-pill); }
.hero-payment:not([data-state='payment-plate']) .hero-phone-caret { visibility: hidden; }
.hero-payment[data-state='payment-online'] .hero-phone-action { transform: scale(.97); box-shadow: inset 0 0 0 2px var(--color-forest); }
.hero-payment[data-state='payment-confirmed'] .hero-phone-action { color: var(--color-white); background: var(--color-forest); }
.hero-payment[data-state='payment-confirmed'] .hero-phone-check { display: inline; }
@media (min-width: 900px) {
  .hero-shade { background: linear-gradient(180deg, var(--color-hero-shade-top) 8%, var(--color-hero-shade-copy) 40%, var(--color-overlay-clear) 66%, var(--color-overlay-clear) 78%, var(--color-dialog-shade) 100%); }
}
@media (hover: hover) and (pointer: fine) {
  .hero-parking-caption button:hover { background: var(--color-deep); }
}
@media (max-width: 599px) {
  .hero-parking-art img, .hero-parking-video { object-position: center 55%; }
  [data-hero-status], .hero-parking-caption button { font-size: .78rem; }
}
@media (max-width: 1399px) {
  .hero-payment { right: 24px; bottom: 24px; width: min(360px, calc(100% - 48px)); }
  .hero-phone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; padding: 18px 14px 10px; border-width: 4px; border-radius: 24px; }
  .hero-phone-brand, .hero-phone-eyebrow, .hero-phone-title, .hero-phone-note, .hero-phone-home { grid-column: 1 / -1; margin: 0; }
  .hero-phone-title { font-size: 16px; min-height: 0; }
  .hero-phone-plate { font-size: 17px; margin: 0; height: 38px; gap: 5px; }
  .hero-phone-country { width: 20px; flex-shrink: 0; }
  .hero-phone-note { min-height: 0; }
  .hero-phone-home { margin: 2px auto 0; }
  .hero:has(.hero-payment:not([hidden])) .hero-sectors { visibility: hidden; }
}
@media (max-width: 599px) {
  .hero-payment { right: 14px; left: 14px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-parking-caption, .hero-payment { display: none !important; }
}