/* ============================================================
   RESPONSIVE
   Kept last in the load order so breakpoints correctly override
   the base navbar/hero rules above.
============================================================ */
/* Was 900px. Between 901-1023px the full desktop row (logo + tagline +
   5 links + "Get a Quote" pill) had nowhere to shrink to — .nav-links
   has no flex-wrap, and its gap only floors at 32px (clamp(32px, 3.6vw,
   52px)), so that whole band was one dropped word away from silently
   clipping the CTA button (body has overflow-x:hidden, so an overrun
   there would never even show as a scrollbar to warn you). Moved the
   cutoff to 1023px to match Projects' own tablet breakpoint instead of
   inventing a new number — the hamburger now covers the entire tablet
   band with no squeeze zone in between. */
@media (max-width: 1023px){
  .nav-links, .nav-cta{ display:none; }
  /* The bare <nav aria-label="Primary"> wrapper around .nav-links isn't
     covered by the rule above (only its child ul is) — left visible, an
     empty grid/flex item still sat between the brand block and the
     toggle. Hiding the wrapper itself means .nav-inner only ever has to
     lay out two real items: brand and toggle. */
  .nav-inner > nav{ display:none; }
  .nav-toggle{ display:block; }
  /* flex, not grid: matches the requested layout exactly (space-between
     + center) and sidesteps any ambiguity about how many columns a grid
     needs once items are conditionally hidden — first flex child
     (brand) pins left, last (toggle) pins right, regardless of what's
     in between. */
  .nav-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .hero-content{ margin-top:max(120px, calc(26vh - 60px)); }

  /* js/hero-video-perf.js never loads or plays this below 1024px (the
     primary video runs object-fit:cover here, so there's no letterbox
     gap left for this blurred layer to fill — it would just be a second
     video continuously decoding AND paying for filter:blur(70px) every
     frame, fully hidden behind the primary video the whole time). This
     is the defensive CSS backstop: hidden here too, so nothing depends
     on JS alone to keep it off the page. */
  .hero-video-ambient{ display:none; }
}

@media (max-width: 640px){
  .navbar{ padding:0 18px; }
  .brand-text .name{ font-size:15px; }
  .brand-text .tagline{ font-size:10.5px; }
  .hero-content{ margin-top:max(100px, calc(24vh - 50px)); margin-bottom:12vh; padding:0 20px; }
  .hero-desc{ font-size:15px; }
  .scroll-indicator{ bottom:24px; }
}

@media (max-height: 700px){
  .hero-content{ margin-top:max(90px, calc(22vh - 50px)); margin-bottom:8vh; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ============================================================
   HERO — TABLET (768-1023px)
   ----------------------------------------------------------
   Deliberately its own tuned mid-point, not the desktop hero
   simply riding its clamp() curve down and not the mobile
   stacked composition below either. Keeps the same overlay
   composition as desktop (video full-bleed, copy centered over
   it) since there's enough width here for that to breathe, but
   every size is an explicit, hand-picked value for this band
   instead of inheriting whatever the desktop clamp() happens to
   resolve to at this width.
============================================================ */
@media (min-width:768px) and (max-width:1023px){
  /* contain (tried in the previous pass, to guarantee the unit is
     never cropped) reintroduced the exact gray letterbox-gap problem
     this project has already fought and fixed multiple times: on a
     tall/narrow frame a landscape clip shrinks hard to fit by width,
     leaving a real empty band above/below it, and even with the
     ambient blur layer sized correctly to fill that band, real-world
     video-load timing on first paint isn't reliable enough to
     guarantee it's never visible as a flat gap for a moment — which is
     exactly the "remove the area above the video" bug just reported.
     cover removes the possibility of that gap entirely, unconditionally,
     which is the more important guarantee here: no empty band, ever,
     at any width. object-position keeps the unit + its airflow as
     fully in-frame as the crop allows. */
  .hero-video{
    object-fit:cover;
    object-position:center 32%;
  }

  /* Tablet inherited desktop's full calc(100vh - navH) height by
     default (no override existed here before) — a full-screen hero on
     a tablet is the single biggest unnecessary-viewport-height offender
     on the page. Trimmed to a shorter, content-sized band instead. */
  .hero{
    height:calc(76vh - var(--nav-h));
    min-height:480px;
  }

  .hero-content{
    max-width:600px;
    padding:0 32px;
    margin-top:max(88px, calc(19vh - 34px));
    margin-bottom:7vh;
  }
  .hero-heading{
    font-size:clamp(42px, 6.4vw, 52px);
  }
  .hero-desc{
    margin-top:22px;
    max-width:440px;
    font-size:16px;
  }
}

/* ============================================================
   HERO + NAVBAR — MOBILE (<768px)
   ----------------------------------------------------------
   Same design language as desktop, intelligently adapted — NOT a
   different section. Composition: navbar sticky/in-flow and solid,
   Hero starts right below it (no overlap, no transparent phase) —
   video full-bleed within Hero's own box, heading/description/CTA
   stacked and pushed into the lower third over the video, same as
   before, just no longer sharing space with a floating bar.
============================================================ */
@media (max-width:767px){

  /* 72px, not 46px: raised back up so the 44px hamburger hit box sits
     inside real breathing room (14px top/bottom) instead of nearly
     edge-to-edge, matching the 64-80px band premium mobile navs
     (Apple/LG/Samsung/Voltas) actually use, and matching desktop's own
     --nav-h (tokens.css) exactly so the value is consistent sitewide. */
  :root{ --nav-h:72px; }

  /* -- Navbar: solid, in-flow, logo + hamburger only --
     Switched from a fixed transparent-over-hero overlay to sticky
     in-flow (the same technique desktop/tablet already use) at the
     user's explicit request: the hero must start BELOW the header,
     never behind/under it. Sticky reserves its own real space at the
     top of the page automatically — no floating bar, no transparent
     phase, no manual offset math on Hero needed, and it stays pinned
     to the top of the viewport the instant you scroll, which reads
     identically to position:fixed for a header that's already the
     first element on the page. Background is solid immediately
     (inherits navbar.css's base gradient — no override needed here),
     matching this section's own stated philosophy elsewhere: "solid
     premium ivory/beige bar — NOT glass".
     Both children (.nav-brand, .nav-toggle) are grid/flex items of
     .nav-inner (align-items:center), so both stay vertically centered
     purely from that — no manual top/transform positioning on either
     one. z-index bumped well above every other layer on the page so
     the bar (and the tap target inside it) is always reachable,
     never covered by section content. */
  .navbar{
    position:sticky;
    top:0;
    z-index:9999;
    height:calc(var(--nav-h) + env(safe-area-inset-top, 0px));
    padding-top:env(safe-area-inset-top, 0px);
    padding-left:max(16px, env(safe-area-inset-left, 0px));
    /* Was max(8px, ...) — under the 16-20px band this needs to sit in.
       Matched to padding-left's 16px so the hamburger's tap-target box
       (not just its glyph) sits a true, symmetric 16px off the right
       edge, same distance the brand mark sits off the left. */
    padding-right:max(16px, env(safe-area-inset-right, 0px));
  }
  /* Mark and wordmark both trimmed slightly to match the compact
     mobile bar; no longer need a light-on-video color variant or a
     text-shadow for contrast now that the bar is solid from the very
     first frame, so both use the same dark ink as desktop/.scrolled. */
  .brand-mark{ height:24px; }
  .brand-text .name{ font-size:14px; }
  .nav-toggle span{ background:var(--color-nav-text); }

  /* Compact brand block: drop the tagline, keep mark + wordmark. */
  .brand-text .tagline{ display:none; }
  .brand-text{ border-left:none; padding-left:0; }
  .nav-brand{ gap:9px; }

  /* Navbar is sticky/in-flow now (see above), so it already reserves
     its own space above Hero — subtracting it here keeps the combined
     "navbar + hero" footprint the same compact size the density pass
     tuned (64svh total) instead of Hero silently growing by var(--nav-h)
     on top of the space the navbar now separately claims. Deliberately
     shorter than a full 100svh - var(--nav-h) though — a full-screen
     Hero on mobile means the entire first scroll is spent on one
     section with nothing hinting at what's next; trimming it lets the
     very top of Services peek in at the bottom edge, encouraging the
     scroll instead of feeling like a dead end. Still comfortably above
     the 44px+ content it holds — this is close to the floor before the
     cinematic full-bleed video composition itself starts to suffer. */
  .hero{
    height:calc(64svh - var(--nav-h) - env(safe-area-inset-top, 0px));
    min-height:280px;
  }

  /* Reverted back to cover: contain (tried in the previous pass) left
     a real gray band above the video on tall/narrow phones — reported
     directly ("remove top area above video") and visible in a live
     screenshot, not just a theoretical risk. cover is the only setting
     that unconditionally guarantees zero empty space at any width,
     which matters more here than the crop; object-position keeps the
     wall-mounted unit and its airflow as fully framed as the crop
     allows. */
  .hero-video{
    object-fit:cover;
    object-position:center 34%;
  }

  /* Desktop's overlay is a light multi-directional vignette tuned
     for a wide frame with room to breathe. Cropped to a narrow
     phone aspect ratio the text sits closer to the busiest part of
     the image, so it needs a stronger, more direct gradient behind
     it — capped in the ~45-60% range the spec calls for — to stay
     readable rather than fighting the footage for contrast. */
  .hero-overlay{
    background:linear-gradient(180deg,
      rgba(6,6,6,0.3) 0%,
      rgba(6,6,6,0.08) 28%,
      rgba(6,6,6,0.12) 50%,
      rgba(6,6,6,0.48) 76%,
      rgba(6,6,6,0.6) 100%);
  }

  /* Content stays exactly where the desktop composition puts it —
     inside .hero, aligned to the bottom via align-items:flex-end —
     just with mobile-appropriate padding/margins instead of
     desktop's. margin-top still does the real work of pushing the
     block up off the very bottom edge into the lower third; vh-based
     clamps keep that proportional on both short and tall phones
     instead of jumping between hard breakpoint values. */
  .hero-content{
    padding-left:20px;
    padding-right:20px;
    padding-bottom:max(0px, env(safe-area-inset-bottom, 0px));
    /* Another ~25% tighter than the previous pass on both ends, then a
       further ~20% this pass — density, not just a shorter section. */
    margin-top:clamp(40px, 13vh, 88px);
    margin-bottom:clamp(18px, 4.4vh, 36px);
  }

  .hero-heading{
    /* Sized so "ENGINEERED CLIMATE" / "FOR MODERN SPACES" each still
       read as one line (same 2-line hierarchy as desktop, just
       smaller) down to a 320px-wide phone — not desktop's clamp
       ridden down to whatever 5.2vw happens to resolve to here.
       Shrunk again this pass (29px cap -> 25px) per explicit request
       to read as a compact overlay label over the video, closer to
       how desktop's heading sits inside its own frame, rather than a
       large block competing with the footage. */
    font-size:clamp(18px, 5.6vw, 25px);
    line-height:1.0;
  }

  .hero-desc{
    margin-top:clamp(8px, 1.4vh, 12px);
    max-width:min(400px, 86vw);
    font-size:13px;
    line-height:1.45;
  }

  .scroll-indicator{
    display:none;
  }
}