/* ===========================================================================
   Homepage hero: scroll-driven video stage (Step 1 redesign)
   Drives everything off --p (0 = top / inset card, 1 = scrolled / fullscreen),
   set by assets/hero.js. Real text, full-screen stage, no libs.
   =========================================================================== */

.hero-stage{
  --p: 0;            /* scroll progress, set by JS */
  --edge: 40px;      /* side + bottom inset of the video card at p=0 */
  --edge-top: 104px; /* top inset at p=0 (leaves room for nav on white) */
  position: relative;
  /* runway = morph (~100vh) + dwell (hold fullscreen) + 100vh pin baseline.
     280vh → ~80vh of fullscreen dwell before the page continues. */
  height: 280vh;
  background: #fff;
}

.hero-pin{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #fff;
}

/* ---- Video card: inset+rounded → fullscreen ---- */
.hero-media{
  position: absolute;
  top:    calc(var(--edge-top) * (1 - var(--p)));
  left:   calc(var(--edge)     * (1 - var(--p)));
  right:  calc(var(--edge)     * (1 - var(--p)));
  bottom: calc(var(--edge)     * (1 - var(--p)));
  border-radius: calc(23px * (1 - var(--p)));
  overflow: hidden;
  z-index: 1;
}
.hero-vid{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-shade{
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,19,36,0) 42%, rgba(0,19,36,0.58) 100%),
    linear-gradient(90deg, rgba(0,19,36,0.42) 0%, rgba(0,19,36,0) 48%);
}

/* ---- Headline + CTA (inside the card, track its edge) ---- */
.hero-copy{
  position: absolute;
  left:   calc(40px + 55px * (1 - var(--p)));   /* 95px inset @p0 → 40px @p1 */
  right:  calc(40px + 55px * (1 - var(--p)));   /* mirror left so spacing is symmetric */
  bottom: clamp(72px, 13vh, 124px);
  max-width: 820px;
  z-index: 2;
}
.hero-copy h1{
  margin: 0 0 22px;
  font-family: 'DM Sans', var(--font-heading, sans-serif);
  font-weight: 400;
  font-size: clamp(34px, 4.3vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #f1f1f1;
}
.hero-tagline{
  margin: 0 0 14px;
  font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 400;
  color: #fff;
}
/* Track-your-order form (replaces the quote button) */
.hero-track{ display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; }
.hero-track-input{
  width: 353px; max-width: 100%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 5px; padding: 11px 20px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; color: #fff;
}
.hero-track-input::placeholder{ color: rgba(255,255,255,0.55); }
.hero-track-input:focus{ outline: none; border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.18); }
.hero-track-btn{
  background: #fdc500; color: #1e1e1e; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500;
  padding: 11px 18px; border-radius: 5px; white-space: nowrap;
  transition: filter .15s ease;
}
.hero-track-btn:hover{ filter: brightness(0.95); }

/* ---- Top nav ---- */
.hero-nav{
  position: absolute; top: 30px; left: 40px; right: 40px;
  height: 40px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
}
.hero-brand{ position: relative; display: block; width: 130px; height: 40px; }
.hero-logo{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hero-logo-dark{ opacity: calc(1 - var(--p)); }
.hero-logo-light{ opacity: var(--p); }

.hero-links{
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 36px;
}
.hero-links a{
  font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 16px;
  letter-spacing: -0.02em; text-decoration: none; white-space: nowrap;
  color: color-mix(in srgb, #475569, #ffffff calc(var(--p) * 100%));
  transition: opacity .15s ease;
}
.hero-links a:hover{ opacity: .75; }

/* ---- Company dropdown ---- */
.hero-dd{ position: relative; }
.hero-dd-trigger{
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 16px;
  letter-spacing: -0.02em; white-space: nowrap;
  color: color-mix(in srgb, #475569, #ffffff calc(var(--p) * 100%));
}
.hero-dd-caret{ transition: transform .2s ease; }
.hero-dd-menu{
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 180px; padding: 8px;
  background: #fff; border: 1px solid #eef2f6; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16,24,40,0.14);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 5;
}
.hero-dd-menu::before{ /* hover bridge so the menu doesn't close in the gap */
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.hero-dd:hover .hero-dd-menu,
.hero-dd.open .hero-dd-menu{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.hero-dd:hover .hero-dd-caret,
.hero-dd.open .hero-dd-caret{ transform: rotate(180deg); }
.hero-dd-menu a{
  padding: 9px 12px; border-radius: 8px;
  font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 15px;
  color: #1e2a3a; text-decoration: none; white-space: nowrap;
}
.hero-dd-menu a:hover{ background: #f4f7fb; color: #0075e2; }

.hero-auth{ display: flex; align-items: center; gap: 10px; }
.hero-auth a, .hero-auth-sep{
  font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 16px;
  letter-spacing: -0.02em; text-decoration: none;
  color: color-mix(in srgb, #0075e2, #ffffff calc(var(--p) * 100%));
}
.hero-auth a:hover{ opacity: .8; }

/* ---- Hamburger (mobile only) ---- */
.hero-burger{
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px;
}
.hero-burger span{
  display: block; width: 24px; height: 2px; border-radius: 2px;
  background: color-mix(in srgb, #1e1e1e, #ffffff calc(var(--p) * 100%));
  transition: transform .2s ease, opacity .2s ease;
}
.hero-burger.open span{ background: #fff; }
.hero-burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hero-burger.open span:nth-child(2){ opacity: 0; }
.hero-burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile menu overlay ---- */
.hero-menu{
  position: absolute; inset: 0; z-index: 4;
  background: rgba(0,19,36,0.97);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
}
.hero-menu[hidden]{ display: none; }
.hero-menu a{
  color: #fff; font-family: 'DM Sans', sans-serif; font-weight: 500;
  font-size: 22px; text-decoration: none;
}
.hero-menu-label{
  color: rgba(255,255,255,0.5); font-family: 'DM Sans', sans-serif; font-weight: 600;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px;
}
.hero-menu-auth{ opacity: .85; font-size: 18px; }

/* ---- Responsive (replicate the effect on smaller screens) ---- */
@media (max-width: 900px){
  .hero-stage{ --edge: 16px; --edge-top: 72px; height: 240vh; }
  .hero-nav{ top: 22px; left: 16px; right: 16px; }
  .hero-links, .hero-auth{ display: none; }
  .hero-burger{ display: flex; }
  .hero-copy{ left: calc(20px + 18px * (1 - var(--p))); right: calc(20px + 18px * (1 - var(--p))); bottom: clamp(56px, 11vh, 96px); }
}

/* ---- Reduced motion: land on the fullscreen end-state, no morph ---- */
@media (prefers-reduced-motion: reduce){
  .hero-stage{ height: 100vh; }
}