/* ============================================================
   HERO
============================================================ */
/* Height subtracts the navbar again — the navbar is back to being an
   in-flow bar (position:sticky, not a fixed overlay; see navbar.css),
   so Hero must start immediately below it rather than running full
   100vh behind it. This — and only this — is the one deliberate,
   explicitly-requested exception to leaving Hero's CSS untouched. */
.hero{
  position:relative;
  width:100%;
  height:calc(100vh - var(--nav-h));
  min-height:520px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  /* Loading-state safety net only — a warm neutral close to the video's
     own palette, so a slow connection or a device that takes an extra
     moment to paint the first frame shows a calm placeholder instead
     of a flash of body's near-black background. Invisible the instant
     either video paints over it. */
  background:#5b5347;
}

.hero-media{
  position:absolute;
  inset:0;
  overflow:hidden;
}

/* Ambient backdrop — same footage, blurred and gently scaled so it fills
   the hero edge-to-edge with no visible bars. Purely atmospheric. */
.hero-video-ambient{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.2);
  filter:blur(70px) saturate(1.08) brightness(0.82);
  z-index:0;
}

/* Primary composition — always sized to CONTAIN, so the AC, full airflow,
   bench, curtain and plants are guaranteed visible on first load, on any
   screen. This is the frame that matters; it is never cropped or zoomed. */
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  z-index:1;
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(180deg, rgba(6,6,6,0.35) 0%, rgba(6,6,6,0.05) 22%, rgba(6,6,6,0.02) 45%, rgba(6,6,6,0.28) 78%, rgba(6,6,6,0.5) 100%),
    linear-gradient(90deg, rgba(6,6,6,0.32) 0%, rgba(6,6,6,0.08) 30%, rgba(6,6,6,0.02) 50%, rgba(6,6,6,0.0) 70%);
  pointer-events:none;
}

/* Blends the bottom edge of the Hero video toward Services' beige tone
   (#F6F1EA, matching --room-bg-1) instead of cutting hard from dark
   video to light section. Capped at 0.5 alpha — a hint of warmth, not a
   full wash — so the scroll indicator sitting just above it stays fully
   legible against the video's own dark vignette. */
.hero-fade{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:16vh;
  z-index:2;
  background:linear-gradient(180deg,
    rgba(246,241,234,0) 0%,
    rgba(246,241,234,0) 55%,
    rgba(246,241,234,0.5) 100%);
  pointer-events:none;
}

.hero-content{
  position:relative;
  z-index:3;
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  /* positioned in the empty space beneath the unit, moved ~60px higher */
  margin-top: max(140px, calc(30vh - 60px));
  margin-bottom: 14vh;
}

/* Soft radial glow behind the copy only — keeps the video as the primary
   visual while lifting text legibility without a heavy overlay */
.hero-content::before{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:min(900px, 140%);
  height:120%;
  transform:translate(-50%, -50%);
  background:radial-gradient(ellipse at center, rgba(4,4,4,0.42) 0%, rgba(4,4,4,0.18) 45%, rgba(4,4,4,0) 72%);
  z-index:-1;
  pointer-events:none;
}

.hero-heading{
  /* .hero-content is a centered flex column, so without an explicit
     width a block child sizes to fit its own content (shrink-to-fit)
     rather than filling the column — harmless at typical desktop
     widths where "ENGINEERED CLIMATE"/"FOR MODERN SPACES" comfortably
     clear the viewport either way, but at tablet widths and below the
     unbroken phrase can get wider than the column itself and silently
     overflow past .line's overflow:hidden mask. width:100% forces it
     to the column's actual width so long phrases wrap inside .line
     (which has no fixed height, so a wrapped second row just grows
     the box) instead of clipping. */
  width:100%;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(36px, 5.2vw, 70px);
  line-height:0.9;
  letter-spacing:-0.015em;
  color:var(--color-white);
  text-shadow:0 2px 20px rgba(0,0,0,0.22);
  /* Last-resort safety net: on any viewport narrow enough that even a
     single word wouldn't otherwise fit, let that one word break rather
     than silently overflow past .line's mask. No effect at any normal
     phone/tablet/desktop width, where words wrap at spaces long before
     this would ever trigger. */
  overflow-wrap:break-word;
}
.hero-heading .line{
  display:block;
  overflow:hidden;
}
.hero-heading .line span{
  display:inline-block;
  /* inline-block's default sizing is shrink-to-fit: on its own it
     grows to whatever width its text content needs and ignores its
     parent .line's actual (narrower, on small screens) box — which
     is how "ENGINEERED"/"CLIMATE" were spilling past .line's own
     overflow:hidden mask undetected. max-width:100% pins it to
     .line's real width so overflow-wrap (above) has a boundary to
     wrap against instead of nothing to push against at all. */
  max-width:100%;
  white-space:normal;
  will-change:transform;
}

.hero-desc{
  margin-top:36px;
  max-width:520px;
  font-size:clamp(16px, 1.15vw, 20px);
  line-height:1.7;
  font-weight:400;
  letter-spacing:0.005em;
  color:var(--color-soft-white);
}

/* -- Scroll indicator: minimal Apple-style arrow + label -- */
.scroll-indicator{
  position:absolute;
  left:50%;
  bottom:40px;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.scroll-indicator .chevron{
  width:14px;
  height:8px;
  opacity:0.7;
  animation:chevronDrift 2.4s ease-in-out infinite;
}
.scroll-indicator .chevron path{
  stroke:var(--color-white);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}
.scroll-indicator .label{
  font-size:10px;
  font-weight:500;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--color-white);
  opacity:0.55;
}
@keyframes chevronDrift{
  0%, 100%{ transform:translateY(0); opacity:0.4; }
  50%{ transform:translateY(5px); opacity:0.85; }
}