/* Mobile: give the workwear photography its own unobscured visual band.
   Scoped to the homepage so catalogue/detail headers are unchanged. */
@media (max-width: 768px) {
  body.home .hero {
    --hero-photo-height: clamp(200px, 58vw, 320px);
    --hero-header-height: 72px;
    display: block;
    min-height: 0;
    padding: calc(var(--hero-header-height) + var(--hero-photo-height) + 20px) 0 28px;
    background: #0d2735;
  }
  body.home .hero .hero__scene {
    top: var(--hero-header-height);
    bottom: auto;
    height: var(--hero-photo-height);
    background-position: 68% center;
    animation: none;
    filter: none;
    will-change: opacity;
  }
  body.home .hero::after {
    top: var(--hero-header-height);
    bottom: auto;
    height: var(--hero-photo-height);
    background: linear-gradient(180deg, transparent 70%, #0d2735 100%);
    animation: none;
  }
  body.home .hero .cf-container {
    position: static;
    display: block;
    min-height: 0;
    padding-inline: 20px;
  }
  body.home .hero .hero-eyebrow {
    position: relative;
    z-index: 2;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: .02em;
    padding: 6px 10px;
    margin: 0 0 14px;
    max-width: 100%;
  }
  body.home .hero .hero-title {
    font-size: clamp(27px, 7.2vw, 40px);
    line-height: 1.15;
    min-height: 3.45em;
    margin: 0 0 12px;
    letter-spacing: -.025em;
    overflow-wrap: normal;
  }
  body.home .hero .hero-subtitle {
    font-size: 14px;
    line-height: 1.6;
    min-height: 8em;
    margin: 0 0 18px;
    color: #cbd7de;
  }
  body.home .hero .hero-ctas {
    display: grid;
    grid-template-columns: 1fr;
    max-width: none;
    gap: 10px;
    margin: 0 0 24px;
  }
  body.home .hero .hero-ctas .cf-btn {
    min-height: 46px;
    padding: 12px 16px;
    font-size: 14px;
    justify-content: center;
  }
  body.home .hero .hero-scene-control {
    position: absolute;
    z-index: 3;
    top: calc(var(--hero-header-height) + var(--hero-photo-height) - 44px);
    left: 20px;
    margin: 0;
    padding: 0 10px;
    min-height: 44px;
    background: rgba(9, 28, 39, .78);
    border-radius: 10px;
  }
  body.home .hero .hero-scene-control__tab {
    min-height: 44px;
    min-width: 44px;
    background: transparent;
    border-radius: 0;
  }
  body.home .hero .hero-scene-control__tab::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 20px;
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .35);
  }
  body.home .hero .hero-scene-control__tab::after {
    top: 20px;
    bottom: auto;
    height: 4px;
    border-radius: 99px;
  }
  body.home .hero .hero-stats { margin: 0; padding-top: 20px; gap: 10px; }
  body.home .hero .hero-stat { min-height: 108px; padding: 12px; }
  body.home .hero .hero-stat-num { font-size: 16px; line-height: 1.3; }
  body.home .hero .hero-stat-label { font-size: 12px; line-height: 1.5; }
  /* The first screen must not depend on IntersectionObserver or animations. */
  html.js-enabled body.home .vasture-static-page .hero .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}