/* ============================================================
   DevCo · Section 01 — Hero  (v3 — video background)
   ------------------------------------------------------------
   Round-3 rebuild (2026-05-21): the client supplied an aerial
   time-lapse of Perth land becoming a residential development.
   The video is now the hero's BACKGROUND, set natively on the
   Elementor container so the client can swap it in the editor.

   This file art-directs ON TOP of that:
     · a charcoal gradient scrim (deeper where text sits) so the
       bone-white type reads cleanly without hiding the video —
       "Apple translucent done correctly": contrast, not a panel.
     · a single confident copy column composed over the video.
     · the editorial meta rail pinned to the foot of the frame.
   Hard edges, generous space, everything on-palette.

   Keyed to `.hero--v3` so it cleanly supersedes the v2 layout
   and the shared elementor-compat.css (this file loads after).
   Scroll-linked playbackRate + parallax live in hero.js.
   ============================================================ */

/* ── Section shell ─────────────────────────────────────────────
   The full stack (eyebrow + headline + sub + brand + CTA) plus the
   meta rail must fit inside one viewport so the CTA stays above the
   fold. padding-top is trimmed to lift the copy up close under the
   nav; padding-bottom keeps the meta rail off the very edge. ── */
.devco-site #hero.hero--v3{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;        /* copy sits up near the nav */
  padding-top:clamp(84px,9vh,108px);
  padding-bottom:clamp(18px,2.6vh,28px);
  overflow:hidden;
  background-color:var(--ink);       /* graceful ground before video paints */
  isolation:isolate;
}

/* NOTE: do NOT `display:none` the ::before here — for Elementor
   containers the native Background Overlay control renders THROUGH
   the wrapper's ::before pseudo-element (the `--background-overlay`
   hack). Killing it would kill the client-editable base scrim. The
   v2 ghost word is already disabled by elementor-compat.css not
   being keyed to .hero--v3, so there is nothing to hide here. */

/* ── The native Elementor video background ─────────────────────
   Elementor renders the bg video into .elementor-background-video-
   container. We make it a true cover layer and let hero.js apply a
   transform for the parallax hand-off into §02. The native charcoal
   overlay renders as #hero::before / .video-container::before — it
   is the base, client-editable scrim. The ::after below is the
   finer art-direction layer stacked on top of it. */
.devco-site #hero.hero--v3 .elementor-background-video-container{
  z-index:0;
  overflow:hidden;
  /* parallax target — hero.js eases --hero-shift; transform only */
  transform:translate3d(0,calc(var(--hero-shift,0) * 1px),0) scale(1.06);
  will-change:transform;
}
.devco-site #hero.hero--v3 .elementor-background-video-container video,
.devco-site #hero.hero--v3 .elementor-background-video-embed,
.devco-site #hero.hero--v3 .elementor-background-video-hosted{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 46%;
  display:block;
}
/* native charcoal overlay — the base scrim the client edits in
   Elementor. For containers Elementor paints it via ::before on
   both the wrapper and the video container. Pin it as a full
   cover layer between the video (z0) and the art-scrim (z1). */
.devco-site #hero.hero--v3::before,
.devco-site #hero.hero--v3 > .elementor-background-video-container::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

/* ── Art-direction scrim — finer control on top of the native one.
   A vertical charcoal gradient: near-opaque at the foot where the
   headline + meta rail sit, clearing toward the top so the video's
   sky and treeline stay visible. opacity eased by hero.js on exit
   via --hero-scrim so the video hands off smoothly into §02. ── */
.devco-site #hero.hero--v3::after{
  content:"";
  position:absolute;inset:0;
  z-index:2;
  pointer-events:none;
  background:
    /* foot-weighted darkening for the copy + rail */
    linear-gradient(
      to top,
      rgba(20,18,14,.94) 0%,
      rgba(20,18,14,.80) 22%,
      rgba(20,18,14,.52) 50%,
      rgba(20,18,14,.30) 74%,
      rgba(20,18,14,.42) 100%),
    /* a soft left-bias so the copy column edge keeps contrast */
    linear-gradient(
      105deg,
      rgba(20,18,14,.46) 0%,
      rgba(20,18,14,.12) 46%,
      rgba(20,18,14,0) 70%);
  opacity:var(--hero-scrim,1);
  transition:opacity .12s linear;
}

/* a whisper of brand colour in the scrim — sage low-left, rust
   low-right — so the dark wash still reads as DevCo, not generic.
   Very low opacity: it tints, it never competes with the video. */
.devco-site #hero.hero--v3 .hero__tint{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(46% 38% at 8% 100%, rgba(111,126,99,.20), transparent 70%),
    radial-gradient(42% 36% at 96% 100%, rgba(168,90,58,.16), transparent 72%);
  mix-blend-mode:screen;
}

/* ── Foreground content sits above scrim + tint ──────────────── */
.devco-site #hero.hero--v3 .hero__grid.e-con,
.devco-site #hero.hero--v3 .hero__meta.e-con{
  position:relative;
  z-index:3;
}

/* ── Copy grid — single column, anchored hard LEFT, sitting in
     the upper-to-middle of the frame. flex:1 lets it take the
     space above the meta rail; the copy itself centres within
     that space so it lifts toward the nav without floating. ── */
.devco-site #hero.hero--v3 .hero__grid.e-con{
  display:flex;
  flex-direction:column;
  align-items:flex-start;            /* hard left */
  flex:1 1 auto;
  justify-content:center;
}
/* narrower column — keeps copy hard-left and lets more of the
   background video breathe on the right of the frame. */
.devco-site #hero.hero--v3 .hero__copy.e-con{
  display:flex;flex-direction:column;
  align-items:flex-start;
  width:100%;
  max-width:680px;
  padding:0;
}

/* ── Eyebrow — sage tick gives the secondary brand colour a role ─ */
.devco-site #hero.hero--v3 .dc-eyebrow.e-con{
  margin-bottom:clamp(14px,1.9vh,22px);
  gap:14px;
}
.devco-site #hero.hero--v3 .hero__eyebrow-tick-wrap{flex:none;display:flex;align-items:center;}
.devco-site #hero.hero--v3 .hero__eyebrow-tick-wrap span{display:inline;}
.devco-site #hero.hero--v3 .hero__eyebrow-tick{
  display:inline-block;width:9px;height:9px;
  background:var(--sage);
}

/* ── Headline — confident but contained. Cap pulled down from
     7.3rem so the full stack (headline + sub + brand + CTA + meta
     rail) fits inside one viewport and the CTA stays above the
     fold. The scrim guarantees it reads; a soft text-shadow adds
     belt-and-braces legibility against bright video frames. ── */
.devco-site #hero.hero--v3 .hero__headline{
  margin:0;
  max-width:100%;
  font-size:clamp(2.35rem,.9rem + 2.55vw,3.85rem);
  letter-spacing:-.02em;
  line-height:1.06;
  color:var(--bone);
  text-shadow:0 1px 36px rgba(20,18,14,.55),0 1px 3px rgba(20,18,14,.4);
}
.devco-site #hero.hero--v3 .hero__headline em{font-style:italic;}
.devco-site #hero.hero--v3 .hero__headline .elementor-heading-title{
  font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;margin:0;
}

/* ── Lead + brand line — vertical rhythm tightened so the stack
     stays compact while still breathing. ── */
.devco-site #hero.hero--v3 .hero__sub{
  max-width:62ch;
  margin:clamp(12px,1.6vh,18px) 0 0;
}
.devco-site #hero.hero--v3 .hero__sub p{
  font-size:var(--fs-lead);line-height:1.55;margin:0;
  color:var(--bone-soft);
  text-shadow:0 1px 20px rgba(20,18,14,.55);
}
.devco-site #hero.hero--v3 .hero__brand{
  margin:clamp(12px,1.6vh,18px) 0 clamp(16px,2.2vh,24px);
  padding-left:18px;
  position:relative;
}
/* a short sage rule marks the spoken brand promise */
.devco-site #hero.hero--v3 .hero__brand::before{
  content:"";position:absolute;left:0;top:.16em;bottom:.16em;
  width:2px;background:var(--sage);
}
.devco-site #hero.hero--v3 .hero__brand p{
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.1rem,1.4vw,1.32rem);line-height:1.42;
  margin:0;color:var(--bone);
  text-shadow:0 1px 18px rgba(20,18,14,.6);
}

/* ── CTA row — the button must stay visible above the fold. The
     plain-language note wraps under the button on the narrow
     column; a tight row-gap keeps the pair compact. ── */
.devco-site #hero.hero--v3 .hero__cta.e-con{
  align-items:center;
  gap:10px clamp(18px,2.2vw,32px);
}
.devco-site #hero.hero--v3 .hero__cta-note{align-self:center;}
.devco-site #hero.hero--v3 .hero__cta-note span{display:inline;}

/* ── Meta rail — editorial footer pinned to the foot of the frame ─ */
.devco-site #hero.hero--v3 .hero__meta.e-con{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;gap:24px;
  width:100%;
  margin-top:clamp(14px,2vh,24px);
  padding-top:16px;
  border-top:var(--hair) solid var(--bone-hair);
}
.devco-site #hero.hero--v3 .hero__meta>*:nth-child(3){text-align:right;}
.devco-site #hero.hero--v3 .hero__meta .dc-mono span{display:inline;}
.devco-site #hero.hero--v3 .hero__meta .dot{color:var(--accent);}
.devco-site #hero.hero--v3 .hero__meta .dot--sage{color:var(--sage);}

/* scroll cue — a quietly pulsing bar over the word "Scroll" */
.devco-site #hero.hero--v3 .hero__scroll{
  display:inline-flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:var(--fs-mono-sm);
  letter-spacing:var(--tracking-mono);text-transform:uppercase;
  color:var(--bone-faint);
}
.devco-site #hero.hero--v3 .hero__scroll .bar{
  width:var(--hair);height:26px;background:var(--bone-soft);
  transform-origin:top;animation:heroPulse 2.4s var(--ease-inout) infinite;
}
@keyframes heroPulse{
  0%,100%{transform:scaleY(.35);opacity:.4;}
  50%{transform:scaleY(1);opacity:1;}
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:960px){
  .devco-site #hero.hero--v3{
    justify-content:center;
    padding-top:clamp(88px,10vh,116px);
  }
  /* let the column widen again on tablet so lines do not get
     cramped now the desktop cap is narrow. */
  .devco-site #hero.hero--v3 .hero__copy.e-con{max-width:560px;}
  .devco-site #hero.hero--v3 .hero__headline{max-width:none;}
  .devco-site #hero.hero--v3 .hero__sub{max-width:none;}
}

@media (max-width:640px){
  .devco-site #hero.hero--v3{
    padding-top:clamp(80px,9vh,100px);
    padding-bottom:20px;
  }
  .devco-site #hero.hero--v3 .hero__copy.e-con{max-width:none;}
  /* deepen the scrim a touch on small screens — type is denser */
  .devco-site #hero.hero--v3::after{
    background:
      linear-gradient(
        to top,
        rgba(20,18,14,.95) 0%,
        rgba(20,18,14,.84) 30%,
        rgba(20,18,14,.58) 60%,
        rgba(20,18,14,.40) 100%);
  }
  .devco-site #hero.hero--v3 .hero__cta.e-con{
    flex-direction:column;align-items:flex-start;gap:16px;
  }
  .devco-site #hero.hero--v3 .hero__cta .dc-btn{width:100%;}
  .devco-site #hero.hero--v3 .hero__meta.e-con{
    grid-template-columns:1fr;gap:10px;text-align:center;
  }
  .devco-site #hero.hero--v3 .hero__meta>*:nth-child(3){text-align:center;}
  /* the scroll cue is redundant noise on a short mobile viewport */
  .devco-site #hero.hero--v3 .hero__scroll-cell{display:none;}
}

/* ── Reduced motion — video shows static, no parallax, no pulse,
     scrim fixed at full strength, all text fully visible ──────── */
@media (prefers-reduced-motion:reduce){
  .devco-site #hero.hero--v3 .elementor-background-video-container{
    transform:scale(1.06);
  }
  .devco-site #hero.hero--v3::after{opacity:1;transition:none;}
  .devco-site #hero.hero--v3 .hero__scroll .bar{animation:none;}
}