/* Home page only: the scroll-driven drive. Shared tokens, nav and footer live in site.css. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body.home { background: var(--mist); }

/* ---------- Hero ---------- */
.hero-standalone {
  position: fixed; inset: 0; z-index: 5;
  height: 100vh; height: 100svh;
  background: var(--navy-deep);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + 32px) var(--gutter) 56px;
  overflow: hidden; isolation: isolate;
}
/* Live footage behind the hero; light wash on the text side keeps the original light look */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-standalone::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--mist) 0%, var(--mist) 34%, rgba(242, 246, 249, .9) 46%, rgba(242, 246, 249, .25) 70%, rgba(242, 246, 249, 0) 100%);
}
.hero-grid { flex: 1; }
.hero-grid { width: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 3vw; }
.hero-copy { display: flex; flex-direction: column; gap: clamp(.9rem, 2.2vh, 1.4rem); min-width: 0; }
.hero-copy .section-label { color: var(--orange-ink); }
.hero-heading { font-size: clamp(3.5rem, min(8.5vw, 15vh), 10rem); line-height: .88; display: flex; flex-direction: column; color: var(--navy); }
.hero-heading .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-heading .word { display: inline-block; }
.hero-heading .word-accent { color: var(--orange); }
.hero-tagline { max-width: 32rem; margin: 0; font-size: clamp(1rem, 1.1vw, 1.15rem); color: var(--text-dim); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.hero-hours { font-family: var(--font-utility); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); line-height: 1.5; }
.hero-emblem { justify-self: center; width: min(32vw, 58vh, 520px); }
.hero-emblem img { width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .45)); }

/* ---------- Canvas + overlays ---------- */
.canvas-wrap { position: fixed; inset: 0; z-index: 1; clip-path: circle(0% at 50% 50%); background: var(--navy-deep); }
/* Drive media: two stills (crossfade between stops) and the clip that plays during a move */
.drive-still, .drive-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.drive-still { opacity: 0; }
.drive-clip { z-index: 2; opacity: 0; }
.drive-clip.is-on { opacity: 1; }
.canvas-wrap .grade { z-index: 3; }
.grade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--shade), .45) 0%, rgba(var(--shade), 0) 24%, rgba(var(--shade), 0) 70%, rgba(var(--shade), .55) 100%); }
#dark-overlay { position: fixed; inset: 0; z-index: 2; background: var(--navy); opacity: 0; pointer-events: none; }
#scrim { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#scrim::before, #scrim::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
#scrim::before { background: linear-gradient(90deg, rgba(var(--shade), .86) 0%, rgba(var(--shade), .68) 38%, rgba(var(--shade), 0) 62%); }
#scrim::after { background: linear-gradient(270deg, rgba(var(--shade), .86) 0%, rgba(var(--shade), .68) 38%, rgba(var(--shade), 0) 62%); }
#scrim[data-side="left"]::before, #scrim[data-side="right"]::after { opacity: 1; }

/* ---------- Scroll container + sections ---------- */
#scroll-container { position: relative; z-index: 4; height: 1300vh; }
.scroll-section { position: absolute; left: 0; right: 0; transform: translateY(-50%); color: var(--on-dark); }
.align-left { padding-left: var(--gutter); padding-right: 55vw; }
.align-right { padding-left: 55vw; padding-right: var(--gutter); }
.align-left .section-inner, .align-right .section-inner { max-width: 40vw; display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.section-heading { font-size: clamp(3rem, min(5.4vw, 11vh), 6.5rem); line-height: .88; color: var(--on-dark); text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.section-body { margin: 0; max-width: 34rem; font-size: 1.15rem; color: var(--on-dark); }
.section-note {
  margin: 0; max-width: 34rem; padding-top: 1rem; border-top: 1px solid rgba(246, 150, 27, .55);
  font-family: var(--font-utility); font-size: .85rem; letter-spacing: .06em; color: var(--on-dark-dim);
}
.section-note a { color: var(--orange-hot); text-decoration: none; }
.section-link {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-utility); font-weight: 600; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-dark); text-decoration: none; padding-bottom: .3rem; border-bottom: 2px solid var(--orange);
}
.section-link::after { content: "→"; color: var(--orange); transition: transform .2s; }
.section-link:hover::after { transform: translateX(4px); }
.service-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; max-width: 34rem; }
.service-list li { display: grid; gap: .1rem; padding-left: 1.1rem; border-left: 3px solid var(--orange); color: var(--on-dark-dim); }
.service-list b { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .02em; color: var(--on-dark); line-height: 1.1; }
.quote { margin: 0; max-width: 34rem; }
.quote p { margin: 0 0 .4rem; font-size: 1.2rem; line-height: 1.5; color: var(--on-dark); }
.quote cite { font-style: normal; font-family: var(--font-utility); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-hot); }
.quote cite::before { content: "★★★★★  "; letter-spacing: .1em; }
.cta-phone { font-size: clamp(3.5rem, min(6.5vw, 13vh), 7.5rem); color: var(--on-dark); font-variant-numeric: tabular-nums; }
.cta-button { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Stats: the one centered moment, on the navy overlay */
.section-stats { padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 3rem; text-align: center; }
.stats-grid { width: 100%; max-width: 1200px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
.stat { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.stat-figure { display: flex; align-items: baseline; gap: .15em; font-family: var(--font-display); font-weight: 900; line-height: .9; }
.stat-number { font-size: clamp(5rem, min(10vw, 22vh), 11rem); font-variant-numeric: tabular-nums; color: var(--on-dark); }
.stat-suffix { font-size: clamp(2.5rem, 4vw, 4.5rem); color: var(--orange); }
.stat-label { font-family: var(--font-utility); font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-dim); }

/* ---------- After the drive ---------- */
.after { position: relative; z-index: 6; background: var(--mist); box-shadow: 0 -24px 60px rgba(0, 0, 0, .35); }  /* sheet rising over the video */
body.home .cta-band, body.home .site-footer { position: relative; z-index: 6; }

@media (max-width: 767px) {
  .hero-standalone { padding-top: calc(var(--header-h) + 16px); }
  .hero-standalone::before { background: linear-gradient(0deg, var(--mist) 0%, var(--mist) 55%, rgba(242, 246, 249, .6) 80%, rgba(242, 246, 249, .2) 100%); }
  .hero-grid { align-content: end; }
  .hero-standalone { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .hero-emblem { display: none; }   /* the hanging nav badge is the logo on phones */
  .hero-heading { font-size: clamp(3.25rem, 16vw, 5.5rem); }

  #scroll-container { height: 800vh; }
  .align-left, .align-right { padding-left: 16px; padding-right: 16px; }
  .align-left .section-inner, .align-right .section-inner { max-width: 100%; gap: .9rem; padding: 1.25rem; background: rgba(var(--shade), .84); }
  /* Keep each stop within one phone screen: service names only, detail lives on the service pages */
  .service-list { gap: .5rem; }
  .service-list li { font-size: 0; }
  .service-list b { font-size: 1.25rem; }
  .quote p { font-size: 1.05rem; }
  .section-heading { font-size: clamp(2.4rem, 11.5vw, 3.75rem); }
  .section-body { font-size: 1.05rem; }
  .cta-phone { font-size: clamp(3rem, 15vw, 4.5rem); }
  #scrim { display: none; }
  .section-stats { gap: 1.5rem; }
  .stats-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .stat-number { font-size: clamp(3.75rem, 19vw, 5.5rem); }
  .stat-suffix { font-size: 2rem; }
}