/* Continuous scenes and solution sections. Native scrolling stays intact. */
html { scroll-padding-top: 0; }
.main-nav { gap: 25px; margin-right: 3vw; }
.scene-scroll { position: relative; height: 310svh; background: #172923; }
.scene-scroll .scene-stage { position: sticky; top: 0; height: 100svh; min-height: 640px; max-height: none; }
.sequence-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.sequence-canvas.is-ready { opacity: 1; }
.hero-film .sequence-canvas { z-index: 0; }
.hero-film .hero-shade { z-index: 1; }
.scene-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; margin: 0; appearance: none; -webkit-appearance: none; border: 0; z-index: 6; background: #e2efd628; color: #d5e9bd; }
.scene-progress::-webkit-progress-bar { background: #e2efd628; }
.scene-progress::-webkit-progress-value { background: #d5e9bd; }
.scene-progress::-moz-progress-bar { background: #d5e9bd; }
.hero.is-scroll-revealed .hero-copy, .hero.is-scroll-revealed .hero-product, .hero.is-scroll-revealed .hero-topline { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.hero.is-scroll-revealed .film-caption { opacity: 1; visibility: visible; transform: none; }
.hero.is-scroll-revealed .hero-shade { opacity: .3; }
.hero-scroll .hero-film video { filter: none; opacity: 1; }
.hero-scroll .hero-object { animation: none; }
.hero-scroll .hero-bottom { bottom: 30px; }
.contact-scroll { height: 245svh; }
.contact-scroll .contact-section { display: flex; align-items: flex-end; isolation: isolate; background: #26382e; }
.contact-scroll .contact-section > video { opacity: 1; filter: none; }
.contact-section > .sequence-canvas { z-index: -2; }
.contact-scroll .contact-shade { z-index: -1; background: linear-gradient(90deg, rgba(17,24,23,.58), rgba(17,24,23,.28) 43%, transparent 82%), linear-gradient(0deg, rgba(13,22,20,.55), transparent 55%); }
.contact-scroll .contact-content { width: 100%; text-align: left; padding: 70px 7.2% 110px; }
.contact-scroll .contact-content h2 { font-size: clamp(44px, 5.8vw, 87px); line-height: 1.05; max-width: 1120px; font-weight: 400; text-shadow: 0 3px 30px #071b1450; }
.contact-scroll .contact-content h2 em { color: #e1efce; }
.contact-scroll .contact-content > p { color: #f4f7eb; }
.contact-scene-controls { position: absolute; bottom: 30px; left: 7.2%; right: 7.2%; display: flex; align-items: center; justify-content: space-between; color: #f8faef; gap: 24px; }
.contact-scene-controls > span { font-size: 9px; letter-spacing: .14em; text-shadow: 0 2px 14px #112419; }
.contact-scene-controls button { display: flex; align-items: center; gap: 8px; padding: 10px 0; font-size: 11px; }
.contact-scene-controls button svg { width: 14px; height: 14px; }
.solutions-section { background: #f3f5ef; color: #254535; color-scheme: light; padding: 45px 4.5% 65px; }
.solutions-count { font-size: 8px; letter-spacing: .12em; color: #526b56; }
.solutions-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin: 52px 3% 42px; }
.solutions-heading h2 { font-size: clamp(44px,5vw,72px); font-weight: 400; }
.solutions-heading em { color: #6b8669; }
.solutions-heading p { font-size: 14px; line-height: 1.7; color: #526d59; max-width: 360px; }
@media (max-width: 760px) {
  .scene-scroll { height: 255svh; }
  .scene-scroll .scene-stage { min-height: 660px; }
  .hero-scroll .hero-copy { top: 142px; }
  .hero-scroll .hero-copy p { font-size: 13px; margin-top: 16px; }
  .hero-scroll .hero-copy .button { margin-top: 18px; }
  .hero-scroll .hero-product { top: auto; bottom: 132px; height: clamp(180px,27svh,260px); }
  .hero-scroll .hero .product-invite { bottom: -40px; }
  .hero-scroll .hero-bottom { bottom: 18px; }
  .hero-scroll .film-caption { bottom: 20%; }
  .contact-scroll { height: 220svh; }
  .contact-scroll .contact-content { padding: 60px 7% 105px; }
  .contact-scroll .contact-content h2 { font-size: clamp(37px,9.5vw,64px); margin-top: 25px; }
  .contact-scroll .contact-content .button { margin-top: 30px; }
  .contact-scene-controls { left: 7%; right: 7%; bottom: 24px; gap: 12px; }
  .contact-scene-controls > span { font-size: 7px; letter-spacing: .06em; max-width: 145px; line-height: 1.5; }
  .contact-scene-controls button { font-size: 10px; white-space: nowrap; }
  .solutions-section { padding: 32px 6% 45px; }
  .solutions-heading { display: block; margin: 37px 0 30px; }
  .solutions-heading h2 { font-size: 42px; }
  .solutions-heading p { font-size: 13px; margin-top: 22px; }
  .solutions-count { max-width: 140px; text-align: right; font-size: 7px; line-height: 1.6; }
}
@media (max-width: 760px) and (max-height: 720px) {
  .hero-scroll .hero-copy { top: 128px; }
  .hero-scroll .hero h1 { font-size: 42px; }
  .hero-scroll .hero-copy p { line-height: 1.45; }
  .hero-scroll .hero-product { height: 165px; bottom: 130px; }
  .hero-scroll .hero .product-invite { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-scroll { height: auto; }
  .scene-scroll .scene-stage { position: relative; }
}
@media (max-height: 659px) {
  .scene-scroll { height: auto; }
  .scene-scroll .scene-stage { position: relative; }
}
