/* Page-specific only. Everything else is inherited from the live site's own
   stylesheets, so this is a true preview rather than a lookalike.
   All selectors are scoped to dr-* classes so nothing can leak into the
   shared components. */

.dr-narrow { max-width: 62rem; }

/* A link that reads as a link inside body copy without shouting. */
.dr-link {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: color .2s ease;
}
.dr-link:hover { color: var(--gold); }

/* --- two-column services ------------------------------------------------- */
.dr-two {
  display: grid; gap: clamp(1.6rem, 4vw, 3.2rem);
  grid-template-columns: 1fr; margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}
@media (min-width: 820px) { .dr-two { grid-template-columns: 1fr 1fr; } }
.dr-col h3 {
  margin: 0 0 .8rem; font-size: clamp(1.15rem, 2.2vw, 1.45rem); letter-spacing: -.01em;
}
.dr-col p { margin: 0 0 .9rem; color: var(--warm-1); line-height: 1.65; max-width: 54ch; }

.dr-chips {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem;
  margin: clamp(1.6rem, 3.5vw, 2.4rem) 0 0; padding: 0;
}
.dr-chips li {
  padding: .42rem .8rem; border: 1px solid rgba(255,255,255,.16); border-radius: 2px;
  font-size: .78rem; letter-spacing: .04em; color: var(--warm-1);
}

/* --- showreel ------------------------------------------------------------ */
.dr-reel {
  position: relative; margin-top: clamp(1.4rem, 3vw, 2rem);
  aspect-ratio: 16 / 9; background: #000; border-radius: 3px; overflow: hidden;
}
.dr-reel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- the fleet ----------------------------------------------------------- */
.dr-fleet {
  display: grid; gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: 1fr; margin-top: clamp(1.8rem, 4vw, 2.8rem);
}
@media (min-width: 820px) { .dr-fleet { grid-template-columns: repeat(3, 1fr); } }

.dr-card {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 4px;
}
.dr-card__flag {
  position: absolute; top: 0; right: clamp(1.2rem, 2.4vw, 1.8rem);
  transform: translateY(-50%);
  padding: .3rem .6rem; border-radius: 2px;
  background: var(--gold); color: #23190a;
  font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
/* All three are now transparent PNGs, so no blend mode is needed. The earlier
   mix-blend-mode: screen was there to hide the Matrice's white JPG background
   and it lit the whole card; the background is keyed out at build time now. */
/* White plate behind each aircraft, the way The Drone Group present them on
   their own site. These are dark airframes on transparent backgrounds, so on
   a dark card they half disappear - on white every arm and rotor reads. */
.dr-card__shot {
  display: grid; place-items: center; height: 168px; margin-bottom: 1.2rem;
  background: #fff; border-radius: 3px;
}
.dr-card__shot img { max-width: 84%; max-height: 140px; object-fit: contain; }

.dr-card__model {
  margin: 0; font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.dr-card__name {
  margin: .25rem 0 .6rem; font-size: clamp(1.5rem, 3vw, 1.95rem);
  letter-spacing: -.02em; line-height: 1;
}
.dr-card__blurb { margin: 0; color: var(--warm-1); font-size: .95rem; line-height: 1.55; }

.dr-spec { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.dr-spec li {
  padding: .42rem 0; border-top: 1px solid rgba(255,255,255,.08);
  font-size: .85rem; color: var(--warm-1);
}
.dr-spec li:first-child { border-top: 0; }

.dr-card__best { margin: 1.1rem 0 0; font-size: .85rem; color: var(--warm-2); line-height: 1.5; }
.dr-card__best span {
  display: block; font-size: .64rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--warm-2); margin-bottom: .25rem;
}

/* --- FAQs ---------------------------------------------------------------- */
/* <details>/<summary> so it works with JavaScript off and is keyboard
   operable without any script of our own. */
.dr-faqs { margin-top: clamp(1.6rem, 4vw, 2.4rem); }
.dr-faq { border-top: 1px solid rgba(255,255,255,.1); }
.dr-faq:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
.dr-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: clamp(.95rem, 2vw, 1.25rem) 0; cursor: pointer; list-style: none;
  font-size: clamp(1rem, 1.9vw, 1.15rem); font-weight: 600; color: var(--white);
  transition: color .18s ease;
}
.dr-faq summary::-webkit-details-marker { display: none; }
.dr-faq summary:hover { color: var(--gold); }
.dr-faq summary::after {
  content: ""; flex: 0 0 auto; width: 11px; height: 11px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .22s cubic-bezier(.2,.9,.3,1.2);
}
.dr-faq[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.dr-faq p {
  margin: 0 0 clamp(1rem, 2.2vw, 1.4rem);
  max-width: 68ch; color: var(--warm-1); line-height: 1.65;
}

/* --- credits ------------------------------------------------------------- */
.dr-logos {
  list-style: none; display: flex; flex-wrap: wrap;
  align-items: center; gap: clamp(1.4rem, 4vw, 3rem);
  margin: clamp(1.6rem, 4vw, 2.4rem) 0 0; padding: 0;
}
/* Bounded on BOTH axes, not by height alone. After trimming, these range from
   3.66:1 (Netflix) to 0.74:1 (Multi Story Media) - a single height makes the
   wide ones enormous and the stacked ones tiny. */
.dr-logos li { display: grid; place-items: center; min-height: 34px; }
.dr-logos img {
  max-height: 32px; max-width: 108px; width: auto; height: auto;
  opacity: .62; transition: opacity .2s ease;
}
.dr-logos li:hover img { opacity: 1; }
.dr-note { margin-top: clamp(1.4rem, 3vw, 2rem); font-size: .78rem; color: var(--warm-2); opacity: .8; }


/* --- closing band -------------------------------------------------------- */
/* The page opens on the two of us on the ground and closes on what the drone
   actually brings back. The scrim is heavy because the type sits centred over
   the brightest part of the frame. */
.dr-cta { position: relative; isolation: isolate; overflow: hidden; }
.dr-cta .scene__bg { position: absolute; inset: 0; z-index: -2; }
.dr-cta .scene__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.dr-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,12,.72) 0%, rgba(10,10,12,.55) 45%, rgba(10,10,12,.88) 100%);
}
.dr-cta .scene__inner { padding-block: clamp(4rem, 11vw, 8rem); }


/* --- hero background video ----------------------------------------------- */
/* The still sits underneath as the base layer so there is never a black frame
   while the video loads or if it never plays at all (reduced motion, a phone
   refusing autoplay, a slow connection). The video fades in over the top. */
.shero .scene__bg .dr-herovid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--focus-r, 58% 50%);
  z-index: 1; opacity: 0; transition: opacity .9s ease;
}
.shero .scene__bg .dr-herovid.playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .shero .scene__bg .dr-herovid { display: none; } }


/* --- hero legibility ------------------------------------------------------ */
/* The still this replaced was an overcast sky behind the headline. The film is
   bright hillside and sunlit stone, and white type stopped reading over it.
   Two changes, both only on this page:
     - the film itself is knocked back, so it reads as a backdrop not a slide
     - a left-weighted scrim sits over it, heaviest exactly where the type is
   The scrim lives inside .scene__bg above the video, so the headline (which is
   in .scene__inner) still sits on top of both. */
.shero .scene__bg .dr-herovid { filter: saturate(.82) brightness(.72) contrast(1.02); }
.dr-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(8,8,10,.92) 0%, rgba(8,8,10,.78) 30%,
                            rgba(8,8,10,.42) 58%, rgba(8,8,10,.18) 100%),
    linear-gradient(180deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,.10) 34%,
                            rgba(8,8,10,.20) 70%, rgba(8,8,10,.72) 100%);
}
@media (max-width: 759px) {
  /* On a phone the type spans the full width, so the left weighting is no help. */
  .dr-scrim { background: linear-gradient(180deg, rgba(8,8,10,.62) 0%, rgba(8,8,10,.34) 40%, rgba(8,8,10,.82) 100%); }
}


/* --- 'what we cover' band ------------------------------------------------- */
/* .scene__bg::after already applies the site's veil via --veil, and the
   stylesheet is explicit that it wants to be the only one. My first attempt
   added a second full scrim on top and the two compounded to near-black - the
   photograph measured 4/255 in open areas.
   The value has to be set ON THE PSEUDO-ELEMENT, because .scene.lit
   .scene__bg::after sets --veil: 1 there once the section scrolls in, which
   beats anything set on the section itself. */
.dr-cover .scene__bg::after,
.dr-cover.lit .scene__bg::after { --veil: .84; }
.dr-cover .scene__bg img { object-position: 62% 42%; filter: saturate(.85); }
@media (max-width: 819px) {
  /* One column on a phone, so the copy crosses the whole frame. */
  .dr-cover .scene__bg::after,
  .dr-cover.lit .scene__bg::after { --veil: .93; }
}


/* --- full-bleed strip ----------------------------------------------------- */
/* The source is 1440x425, a genuine 3.39:1, so it is used as a band rather
   than a background - cropping it into a tall section would throw away the
   whole point of the composition. */
.dr-strip { margin: 0; position: relative; }
.dr-strip img {
  display: block; width: 100%; height: clamp(240px, 34vw, 460px);
  object-fit: cover; object-position: 50% 42%;
}
/* On a phone the box is roughly 1.6:1 against a 3.39:1 source, so only about
   48% of the frame is visible and a centred crop cut Adrian off at the right
   edge entirely. Shifted so the window lands on him and still keeps the
   aircraft. Desktop shows ~92% of the frame, so it needs no adjustment. */
@media (max-width: 640px) {
  .dr-strip img { object-position: 68% 42%; }
}

/* --- recurring CTA -------------------------------------------------------- */
.dr-cta-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(.8rem, 2vw, 1.4rem); margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
.dr-cta-note { font-size: .85rem; color: var(--warm-2); }

/* --- enquiry modal -------------------------------------------------------- */
.dr-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.dr-modal[hidden] { display: none; }
.dr-modal__scrim {
  position: absolute; inset: 0; background: rgba(6,6,8,.78);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .28s ease;
}
.dr-modal.open .dr-modal__scrim { opacity: 1; }

.dr-modal__panel {
  position: relative; z-index: 1;
  width: min(100%, 46rem); max-height: 92svh; overflow-y: auto;
  margin: clamp(.8rem, 3vw, 2rem);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  background: #131317; border: 1px solid rgba(255,255,255,.10); border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .3s ease, transform .34s cubic-bezier(.2,.9,.3,1.1);
}
.dr-modal.open .dr-modal__panel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .dr-modal__scrim, .dr-modal__panel { transition: none; }
}

.dr-modal__x {
  position: absolute; top: clamp(.7rem, 2vw, 1.1rem); right: clamp(.7rem, 2vw, 1.1rem);
  width: 38px; height: 38px; display: grid; place-items: center;
  padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 50%;
  background: transparent; color: var(--warm-1); cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.dr-modal__x svg { width: 16px; height: 16px; }
.dr-modal__x:hover { color: var(--gold); border-color: var(--gold); }
.dr-modal__x:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.dr-modal h2 { margin: .2rem 0 .6rem; font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: -.02em; }
.dr-modal__lead { margin: 0 0 clamp(1.2rem, 3vw, 1.8rem); color: var(--warm-1); line-height: 1.6; max-width: 46ch; }

/* Two-up rows collapse on a phone. */
.dr-form__two { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 620px) { .dr-form__two { grid-template-columns: 1fr 1fr; gap: 0 1rem; } }

/* The select is the only control the shared stylesheet does not cover, so it
   arrives as a light system dropdown. Matched to .f input rather than restyled
   dark - dwm-v6.css is explicit that the white fields are deliberate: near-black
   boxes "disappeared into the section background" and the form read as empty
   space. */
.dr-form select {
  font: inherit; width: 100%; min-height: 52px; padding: .8rem 1rem;
  background: #f4f2ef; color: #111;
  border: 1px solid transparent; border-radius: 0;
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #111 50%),
                    linear-gradient(135deg, #111 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.dr-form select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }

html.dr-locked, html.dr-locked body { overflow: hidden; }

/* --- full-height hero ----------------------------------------------------- */
/* The shared .shero is 72svh, going full height only past a 17:10 aspect and
   capped at 80svh on phones. This page leads on the film, so it takes the
   whole screen at every size. */
/* vh first as the fallback, svh second so it wins where supported. svh is the
   right unit on a phone - it is the viewport WITHOUT the browser chrome, so the
   hero does not get taller than the screen when the address bar retracts. But
   any engine that cannot resolve svh drops the whole declaration, and the hero
   collapses to its content height, which is what was happening here. */
/* dwm-showcase.css carries this, for the Projects index which has no hero photo:
     .shero:not(:has(.scene__bg img)):not(:has(.scene__bg picture)) { min-height: 0 }
   Removing the poster still from .scene__bg left this hero with only a <video>
   inside it, so it started matching that rule and collapsed to content height.
   Matching their selector shape and adding .dr-hero puts this one ahead of it.

   vh first as the fallback, svh second so it wins where supported - svh is the
   viewport without browser chrome, which is what a phone wants. */
.shero.dr-hero:not(:has(.scene__bg img)):not(:has(.scene__bg picture)),
.shero.dr-hero {
  min-height: 100vh;
  min-height: 100svh;
}