/* ============================================================
   DH Drones — "Flight Deck" hero (refined / minimal)
   A calm aerial viewfinder over full-bleed footage.
   Loaded only on index.html, after styles.css.
   ============================================================ */

.fd-body{ background:#0a0c0b; }

:root{
  --fd-bg:#0a0c0b;
  --fd-ink:#f5f1e8;
  --fd-dim:rgba(245,241,232,.58);
  --fd-faint:rgba(245,241,232,.30);
  --fd-tan:#cbbb9d;
  --fd-tan-line:rgba(203,187,157,.55);
  --fd-tan-glow:rgba(203,187,157,.20);
  --fd-display:"Saira Condensed","Oswald","Arial Narrow",sans-serif;
  --fd-mono:"Space Mono","Courier New",ui-monospace,monospace;
}

/* --- see-through nav bar, dropped to the bottom of the hero --- */
.fd-body .nav-shell{
  background:transparent;
  border:1px solid transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.fd-body .brand strong{ color:var(--fd-ink); text-shadow:0 2px 12px rgba(0,0,0,.55); }
.fd-body .brand span{ color:var(--fd-tan); letter-spacing:.2em; text-shadow:0 2px 12px rgba(0,0,0,.55); }
.fd-body .tab{ color:rgba(245,241,232,.82); text-shadow:0 2px 12px rgba(0,0,0,.55); }
.fd-body .tab:hover,.fd-body .tab.active{ background:var(--fd-tan); color:#0a0c0b; text-shadow:none; }
.fd-body .contact-btn{ background:var(--fd-tan); color:#0a0c0b; }
.fd-body .contact-btn:hover{ filter:brightness(1.06); }

/* on tablet/desktop the entire bar lives at the bottom of the frame */
@media (min-width:641px){
  .fd-body .topbar{ top:auto; bottom:0; padding:0 0 max(22px,env(safe-area-inset-bottom)); }
}

/* see-through mobile button bar (already a bottom rail) */
.fd-body .mobile-route-nav{
  background:rgba(10,12,11,.28);
  border:1px solid rgba(245,241,232,.14);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 50px rgba(0,0,0,.34);
}
.fd-body .mobile-route-nav a{
  background:transparent;
  border:1px solid transparent;
  color:var(--fd-ink);
}

/* ============================================================
   Stage
   ============================================================ */
.fd-hero{
  position:relative; min-height:100svh; overflow:hidden;
  background:#070807; color:var(--fd-ink);
  font-family:var(--fd-mono);
}
.fd-stage-wrap{ position:absolute; inset:0; z-index:0; }
.fd-hero .hero-stage{ position:absolute; inset:0; background:#070807; }
.fd-hero .hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.04);
  filter:saturate(1.0) contrast(1.03) brightness(.94);
  transition:opacity 2.2s ease;
}
.fd-hero .hero-img.active{
  opacity:1;
  animation:fdKenBurns 24s ease-out forwards;
}
@keyframes fdKenBurns{
  from{ transform:scale(1.04) translateY(.5%); }
  to{ transform:scale(1.0) translateY(0); }
}

/* full-bleed montage video — fades in over the stills once it starts playing,
   so the cross-fading images stay as a fallback while it loads / if it fails */
.fd-hero .hero-video{
  position:absolute; inset:0; z-index:2; overflow:hidden;
  pointer-events:none; opacity:0; transition:opacity 1.4s ease;
  filter:saturate(1.0) contrast(1.03) brightness(.94);
}
.fd-hero .hero-video.ready{ opacity:1; }
.fd-hero .hero-video iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw;            /* 16:9 sized off the width … */
  min-height:100svh; min-width:177.78svh;  /* … or off the height, whichever covers */
  border:0; pointer-events:none;
}

/* darkening for legibility — only at the very bottom, just enough to seat the
   content block. The top is left clear so the footage reads sharp and bright. */
.fd-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,8,7,0) 0%, rgba(7,8,7,0) 58%, rgba(7,8,7,.58) 100%);
}

/* ============================================================
   Content shell — one quiet block, lots of empty space
   ============================================================ */
.fd-shell{
  position:relative; z-index:8;
  width:var(--page); margin:0 auto; min-height:100svh;
  display:flex; align-items:flex-end;
  padding:124px 0 132px;
}

.fd-main{
  display:grid; gap:16px; max-width:min(560px,82vw);
}

/* eyebrow — quiet label that names the site before the headline lands */
.fd-kicker{
  margin:0; font-family:var(--fd-mono);
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--fd-tan);
  text-shadow:0 2px 12px rgba(0,0,0,.55);
  opacity:0; animation:fdRise .8s .15s ease forwards;
}

/* cycling title — fades in and out as the footage rotates */
.fd-title{
  margin:0; font-family:var(--fd-display); font-weight:700;
  font-size:clamp(2.2rem,5vw,4rem); line-height:1; letter-spacing:-.01em;
  text-transform:uppercase; color:var(--fd-ink);
  text-shadow:0 14px 44px rgba(0,0,0,.45);
  opacity:0; transform:translateY(14px);
  transition:opacity .9s ease, transform .9s ease;
}
.fd-title.in{ opacity:1; transform:translateY(0); }

/* lede — the one steady block that explains what the site is and what's next */
.fd-lede{
  margin:2px 0 4px; max-width:46ch;
  font-family:var(--fd-mono); font-size:.86rem; line-height:1.7;
  color:var(--fd-ink); opacity:0;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
  animation:fdRise .85s .35s ease forwards;
}

/* primary / secondary calls to action */
.fd-actions{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:4px;
  opacity:0; animation:fdRise .85s .5s ease forwards;
}
.fd-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 22px; border-radius:999px;
  font-family:var(--fd-mono); font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  color:var(--fd-ink); border:1px solid var(--fd-tan-line);
  background:rgba(10,12,11,.28);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.fd-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.4), 0 0 0 1px var(--fd-tan-glow);
}
.fd-btn.primary{
  background:var(--fd-tan); color:#0a0c0b; border-color:var(--fd-tan);
}
.fd-btn.primary:hover{ filter:brightness(1.06); }

.fd-credit{
  margin:0; color:var(--fd-dim);
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
  opacity:0; animation:fdRise .8s .5s ease forwards;
}
.fd-credit strong{ color:var(--fd-tan); font-weight:700; letter-spacing:.16em; }

@keyframes fdRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:640px){
  .fd-shell{ padding:108px 0 120px; }
}

@media (prefers-reduced-motion:reduce){
  .fd-hero .hero-img.active{ animation:none; transform:scale(1); }
  .fd-title{ opacity:1; transform:none; transition:none; }
  .fd-credit,.fd-kicker,.fd-lede,.fd-actions{ opacity:1; animation:none; }
}


/* ============================================================
   v42 — "land study" survey marks
   Quiet technical annotations + a viewfinder crop frame, so the
   hero reads like a precise aerial survey plate rather than a slideshow.
   Pure overlay (pseudo-elements only) — the footage, title cycling
   and credit are left exactly as they were.
   ============================================================ */
:root{ --fd-gutter:max(28px, calc((100vw - var(--page)) / 2)); }

/* viewfinder crop frame, inset to the content gutter with corner ticks */
.fd-body .fd-shell::before{
  content:""; position:absolute; inset:48px 0; z-index:7;
  border:1px solid var(--fd-tan); opacity:.14; border-radius:3px;
  pointer-events:none;
}
.fd-body .fd-shell::after{
  content:""; position:absolute; z-index:7; pointer-events:none;
  left:0; bottom:62px; width:56px; height:7px;
  border-left:1px solid var(--fd-tan-line);
  border-right:1px solid var(--fd-tan-line);
  border-bottom:1px solid var(--fd-tan-line);
  opacity:.5;
}

/* on phones the nav returns to the top and space is tight — keep it clean */
@media (max-width:640px){
  .fd-body .fd-shell::before,
  .fd-body .fd-shell::after{ display:none; }
}


/* ============================================================
   v43 — "two paths" split stage
   The single full-bleed clip is replaced by a two-pane viewfinder:
   one pane streams the motion reels (random video → random video),
   the other cross-fades the random stills. A hairline survey divider
   seats them as one deliberate frame rather than a seam.
   Everything above this — vignette, title cycling, shell — is untouched.
   ============================================================ */
.fd-split{ position:absolute; inset:0; display:flex; }
.fd-pane{ position:relative; flex:1 1 0; min-width:0; overflow:hidden; }

/* the motion pane sits a touch deeper so its fade reads against the stills */
.fd-pane-video .hero-video{ z-index:1; }

/* size the streamed clip to cover its half-width pane (cover, never letterbox) */
.fd-pane-video .hero-video iframe{
  width:50vw; height:28.125vw;             /* 16:9 off the pane width … */
  min-height:100svh; min-width:177.78svh;  /* … or off the full height, whichever covers */
}

/* hairline divider with a faint survey glow, fading at the ends */
.fd-split-line{
  position:absolute; z-index:3; pointer-events:none;
  top:0; bottom:0; left:50%; width:1px; transform:translateX(-.5px);
  background:linear-gradient(180deg, transparent, var(--fd-tan-line) 14%, var(--fd-tan-line) 86%, transparent);
  opacity:.55; box-shadow:0 0 22px var(--fd-tan-glow);
}

/* tiny technical labels naming each path */
.fd-pane-tag{
  position:absolute; z-index:4; top:62px; left:var(--fd-gutter, 28px);
  font-family:var(--fd-mono); font-size:.52rem; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase; color:var(--fd-tan);
  opacity:.62; text-shadow:0 2px 12px rgba(0,0,0,.6); pointer-events:none;
}
.fd-pane-tag::before{ content:"▟ "; opacity:.7; }
.fd-pane-stills .fd-pane-tag{ left:auto; right:var(--fd-gutter, 28px); }

/* phones: drop the background video entirely and lean on the full-bleed photo
   crossfade — mobile Safari blocks background iframe autoplay, so this keeps the
   hero from ever showing a blank/black frame */
@media (max-width:640px){
  .fd-hero .hero-video{ display:none; }
  .fd-split-line{ display:none; }
  .fd-pane-tag{ display:none; }
}

/* ---- clever spacing for the spec line in the lede ---- */
.fd-spec{ white-space:nowrap; }
.fd-spec > span{
  color:var(--fd-tan); font-weight:700; letter-spacing:.12em;
}
.fd-spec > i{
  font-style:normal; color:var(--fd-tan-line);
  margin:0 .55em; vertical-align:.04em;
}

/* v44 — iPhone-first hero repair
   Mobile Safari can leave YouTube background iframes white while autoplay
   negotiates. Phones now use the native photo crossfade as the primary hero,
   so the opening frame is always visible and the stills keep moving smoothly. */
.fd-hero{
  isolation:isolate;
  background:#070807;
}
.fd-pane-stills .hero-stage{
  background:#070807;
}
.fd-hero .hero-img{
  will-change:opacity, transform;
  backface-visibility:hidden;
}
.fd-hero .hero-img.active{
  opacity:1;
}
@media (max-width:640px){
  .fd-hero{
    min-height:100svh;
  }
  .fd-shell{
    width:calc(100vw - 28px);
    min-height:100svh;
    align-items:flex-end;
    padding:calc(90px + env(safe-area-inset-top)) 0 calc(112px + env(safe-area-inset-bottom));
  }
  .fd-main{
    max-width:100%;
    gap:13px;
  }
  .fd-title{
    font-size:clamp(2.15rem,14vw,3.5rem);
    line-height:.95;
  }
  .fd-lede{
    max-width:34ch;
    font-size:.78rem;
    line-height:1.68;
  }
  .fd-actions{
    display:grid;
    grid-template-columns:1fr;
    width:min(100%, 310px);
    gap:9px;
  }
  .fd-btn{
    min-height:46px;
    border-radius:16px;
    padding:13px 16px;
  }
  .fd-vignette{
    background:
      linear-gradient(180deg, rgba(7,8,7,.08) 0%, rgba(7,8,7,.18) 34%, rgba(7,8,7,.72) 100%),
      linear-gradient(90deg, rgba(7,8,7,.34), rgba(7,8,7,.04) 58%);
  }
  .fd-hero .hero-img{
    transform:scale(1.02);
    filter:saturate(1.08) contrast(1.04) brightness(.92);
    transition:opacity 1.45s ease;
  }
  .fd-hero .hero-img.active{
    animation:fdMobileDrift 18s ease-out forwards;
  }
  .fd-spec{
    white-space:normal;
  }
}
@keyframes fdMobileDrift{
  from{ transform:scale(1.055) translate3d(0,1.2%,0); }
  to{ transform:scale(1.015) translate3d(0,0,0); }
}