/* Homepage only. Preserve the desktop composition and one-screen mobile CTAs. */
.hero--editorial .hero-mobile-tag,
.hero--editorial .hero-mobile-benefits {
  display: none;
}

@media (max-width: 820px) {
  .home-page {
    --home-header-height: 64px;
    --home-viewport: 100vh;
  }
  @supports (height: 100svh) {
    .home-page { --home-viewport: 100svh; }
  }
  .home-page .header-inner {
    height: var(--home-header-height);
    width: calc(100% - 40px);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
  }
  .home-page .brand { width: 156px; max-width: 100%; }
  .home-page .header-actions { display: none; }
  .home-page .nav {
    top: calc(var(--home-header-height) + 1px);
    height: calc(100vh - var(--home-header-height) - 1px);
    height: calc(100dvh - var(--home-header-height) - 1px);
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  }
  .home-page .nav-toggle {
    width: 44px;
    height: 44px;
    cursor: pointer;
    background: linear-gradient(var(--navy), var(--navy)) center / 24px 2px no-repeat;
  }
  .home-page .nav-toggle::before,
  .home-page .nav-toggle::after { left: 10px; right: 10px; }
  .home-page .nav-toggle::before { top: 14px; }
  .home-page .nav-toggle::after { bottom: 14px; }
  .home-page .nav-toggle[aria-expanded="true"] { background-size: 0 0; }
  .home-page .nav-toggle[aria-expanded="true"]::before { top: 21px; transform: rotate(45deg); }
  .home-page .nav-toggle[aria-expanded="true"]::after { bottom: 21px; transform: rotate(-45deg); }
  .home-page .nav-toggle:focus-visible,
  .hero--editorial .btn:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 4px;
  }

  .hero.hero--editorial {
    --hero-inset: clamp(20px, 5vw, 36px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* The photo can shrink first; text and controls never get clipped. */
    grid-template-rows: minmax(96px, calc(100vw * 868 / 1704)) minmax(max-content, 1fr);
    height: calc(var(--home-viewport) - var(--home-header-height) - 1px);
    min-height: min-content;
    overflow: visible;
    background: #fff;
    isolation: isolate;
  }
  .hero--editorial .hero-media {
    order: -1;
    width: 100%;
    height: 100%;
    min-height: 0;
    background: #fff;
  }
  .hero--editorial .hero-media img {
    width: 100%;
    height: 100%;
    /* Show the entire existing photograph, not a zoomed-in slice of the cab. */
    object-fit: contain;
    object-position: center center;
    clip-path: none;
  }
  .hero--editorial .hero-media::before,
  .hero--editorial .hero-media::after,
  .hero--editorial .hero-note,
  .hero--editorial .hero-mobile-tag,
  .hero--editorial .hero-mobile-benefits { display: none; }

  .hero--editorial .hero-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: clamp(16px, 2.5vh, 24px) var(--hero-inset) max(16px, env(safe-area-inset-bottom, 0px));
    background: #fff;
  }
  /* No decorative wave obscuring the truck or consuming mobile screen height. */
  .hero--editorial .hero-copy::before { content: none; }
  .hero--editorial .hero-copy .eyebrow {
    margin: auto 0 8px;
    font-size: 10px;
    letter-spacing: .17em;
    line-height: 1.5;
  }
  .hero.hero--editorial h1 {
    max-width: none;
    margin: 0 0 12px;
    font-size: clamp(32px, 9vw, 50px);
    line-height: 1.04;
    letter-spacing: -.045em;
    overflow-wrap: normal;
  }
  .hero--editorial .rule { display: none; }
  .hero--editorial .hero-copy .lede {
    max-width: 58ch;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
  }
  .hero--editorial .btn-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    margin-top: auto;
    padding-top: 18px;
  }
  .hero--editorial .btn {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .12em;
    gap: 18px;
  }
  .hero--editorial .btn-outline { border-color: #bcc9d7; }
  .home-page .home-solutions h2 { white-space: normal; }
}

@media (min-width: 561px) and (max-width: 820px) {
  .hero--editorial .hero-copy .lede { font-size: 16px; }
  .hero--editorial .btn-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Short phone screens keep readable copy and full-size tap targets. */
@media (max-width: 820px) and (max-height: 620px) {
  .hero--editorial .hero-copy { padding-top: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .hero--editorial .hero-copy .eyebrow { margin-bottom: 6px; }
  .hero.hero--editorial h1 { margin-bottom: 8px; }
  .hero--editorial .hero-copy .lede { line-height: 1.4; }
  .hero--editorial .btn-row { padding-top: 12px; }
}

/* Landscape and enlarged-text layouts may scroll rather than hide content. */
@media (max-width: 820px) and (max-height: 480px) and (orientation: landscape) {
  .hero.hero--editorial { height: auto; min-height: calc(var(--home-viewport) - var(--home-header-height) - 1px); grid-template-rows: auto auto; }
  .hero--editorial .hero-media { height: clamp(120px, 40vh, 180px); }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .hero--editorial .btn { transition: none; }
  .hero--editorial .btn:hover { transform: none; }
}