/* Hero: full screen. The office photo fills the screen under a transparent header,
   shaded to navy from the left; stacked ONE / STOP / SHOP with STOP outlined in aqua. */

.hero { padding: 0 var(--gutter); min-height: 100svh; display: grid; background: var(--ink); color: #fff; }
.hero-stage { position: static; width: 100%; display: flex; flex-direction: column; }
.hero-frame { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; aspect-ratio: auto; }
.hero-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero-title, .hero-plate { position: relative; z-index: 3; }
.hero-title span span { color: #fff; }
.hero-title .ht-line:nth-child(2) span { color: transparent; -webkit-text-stroke: 2px var(--aqua); }
.hero-plate { left: auto; bottom: auto; margin: 0; background: transparent; box-shadow: none; padding: 0; }
.hero-sub { color: #d5e8e9; }
.hero .btn:hover { background: #fff; color: var(--ink); }
/* White logo over the dark full-screen hero (and on the navy mobile header) */
.site-header .brand img { filter: brightness(0) invert(1); }

@media (min-width: 900px) {
  .site-header .nav a, .site-header .header-phone { color: #fff; }
  .site-header .nav a:hover, .site-header .header-phone:hover { color: var(--aqua); }
  .site-header .header-phone img { filter: invert(1); }
  .hero-stage { justify-content: center; max-width: var(--max); margin: 0 auto; padding: 110px 0 8vh; }
  .hero-frame img { object-position: 64% 40%; }
  .hero-frame::after { background: linear-gradient(180deg, rgba(16, 42, 45, .7) 0%, rgba(16, 42, 45, 0) 26%), linear-gradient(90deg, rgba(16, 42, 45, .96) 0%, rgba(16, 42, 45, .86) 30%, rgba(16, 42, 45, .25) 62%, rgba(16, 42, 45, .05) 100%), linear-gradient(0deg, rgba(16, 42, 45, .55) 0%, rgba(16, 42, 45, 0) 35%); }
  .hero-title { display: block; font-size: min(11vw, 20vh, 184px); line-height: .92; width: 60%; }
  .hero-plate { margin-top: 5vh; max-width: 46%; }
  .hero-n { z-index: 2; left: 36%; right: auto; bottom: 10%; height: 74%; }
}
@media (max-width: 899px) {
  .hero-stage { justify-content: flex-end; padding: 110px 0 64px; }
  .hero-title { line-height: .94; }
  .hero-frame img { object-position: 48% 30%; }
  .hero-frame::after { background: linear-gradient(0deg, rgba(16, 42, 45, .97) 0%, rgba(16, 42, 45, .86) 42%, rgba(16, 42, 45, .2) 70%, rgba(16, 42, 45, .55) 100%); }
  .hero-n { top: 104px; right: 6%; height: 34%; z-index: 2; }
  .hero-plate { margin-top: 22px; padding: 0; }
}