:root{
  --bg:#FDFDFB; --bg2:#F5F4EF; --ink:#1B1D18; --dim:#6B6D65;
  --line:#E7E5DE; --sun:#ED8E09; --sun-ink:#9F5D09; --leaf:#5FA832;
  /* one family for everything. Swap this line to change the whole site. */
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);overflow-x:hidden;
  line-height:1.68;font-weight:500;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:var(--sun);color:#fff}
.mono{font-family:var(--font);font-size:.72rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim)}
.mono .tick{color:var(--sun-ink)}
h2.sec{font-weight:800;font-size:clamp(1.7rem,4.5vw,2.7rem);letter-spacing:-.02em;margin-top:10px}
.char{display:inline-block;will-change:transform,opacity}
a{color:inherit}
img,iframe{max-width:100%;display:block}

#nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(18px,4vw,50px);transition:.4s;border-bottom:1px solid transparent}
#nav.solid{background:rgba(253,253,251,.96);border-color:var(--line)}
#nav .brand{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.92rem;text-decoration:none;color:#fff;transition:color .4s;display:flex;align-items:center;gap:10px}
#nav .brand img{height:36px;width:auto}
#nav.solid .brand{color:var(--ink)}
#nav .brand i{color:var(--sun);font-style:normal}
#nav .menu{display:flex;gap:clamp(12px,2.4vw,30px);align-items:center}
#nav .menu a{text-decoration:none;font-family:var(--font);font-size:0.68rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:rgba(255,255,255,.85);transition:color .3s}
#nav.solid .menu a{color:var(--dim)}
#nav .menu a:hover{color:var(--sun)!important}
#nav .menu a.cta{border:2px solid currentColor;padding:11px 20px;border-radius:999px}
.burger{display:none;background:none;border:0;width:42px;height:42px;cursor:pointer;z-index:70}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:5px auto;transition:.3s}
#nav.solid .burger span{background:var(--ink)}
@media(max-width:960px){
  .burger{display:block}
  #nav .menu{position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;gap:24px;transform:translateY(-100%);visibility:hidden;transition:transform .45s cubic-bezier(.22,1,.36,1),visibility .45s}
  #nav .menu.open{transform:none;visibility:visible}
  #nav .menu a{color:var(--ink)!important;font-size:0.78rem;font-weight:700;letter-spacing:0.12em}
}

.hero{position:relative;height:100svh;min-height:560px;display:flex;align-items:flex-end;overflow:hidden;background:#10120E}
.heroimg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.heroimg img{width:100%;height:100%;object-fit:cover;transform:scale(1)}
@media(prefers-reduced-motion:no-preference){.heroimg img{animation:heroZoom 20s linear 2.5s forwards;will-change:transform}}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero .shade{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.62),rgba(0,0,0,.34) 45%,rgba(0,0,0,.18))}
.hero .inner{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,54px) 9vh;color:#fff}
.hero .mono{color:rgba(255,255,255,.75);margin-bottom:16px}
.hero h1{font-weight:800;font-size:clamp(2.4rem,7.2vw,5.2rem);line-height:1;letter-spacing:-.025em;max-width:15ch}
.hero h1 .accent{color:var(--sun)}
.hero p.tail{margin-top:18px;max-width:52ch;color:rgba(255,255,255,.82);font-size:1.02rem}
.hero .ctas{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 30px;text-decoration:none;font-family:var(--font);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:.3s;border:2px solid transparent;border-radius:999px;cursor:pointer;white-space:nowrap}
.btn.sun{background:var(--sun);color:#fff}
.btn.sun:hover{background:#d47f06}
.btn.ghost{border-color:rgba(255,255,255,.85);color:#fff}
.btn.ghost:hover{border-color:var(--sun);color:var(--sun)}
.btn.dark{background:var(--sun);color:#fff}
.btn.dark:hover{background:#d47f06}

section.block{padding:13vh clamp(20px,6vw,64px)}
section.block>.inner{max-width:1180px;margin:0 auto}
section.tint{background:var(--bg2)}
.grid{display:grid;gap:14px;margin-top:42px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
@media(max-width:980px){.g5{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.g3{grid-template-columns:1fr}.g4,.g5{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.g4{grid-template-columns:1fr}}

/* Repair-centre lead image. Full width of the column, same rounded frame as
   the cards under it, so the section reads as one block. */
.servicshot{margin:32px 0 0;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.servicshot img{display:block;width:100%;height:auto}
.servicshot figcaption{font-family:var(--font);font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  padding:12px 16px;background:var(--bg)}
.cell{background:var(--bg);position:relative;transition:background .3s;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cell:hover{background:#FFFDF6}
.cell .ph{aspect-ratio:2/1;overflow:hidden;background:var(--bg2)}
.cell .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.cell:hover .ph img{transform:scale(1.05)}
.cell .tx{padding:22px 24px 26px}
.cell h3{font-weight:600;font-size:1.08rem;letter-spacing:-.01em;margin:10px 0 8px}
.cell p{color:var(--dim);font-size:.92rem;line-height:1.6}
.cell .mono{font-size:.58rem}

.drones{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
@media(max-width:920px){.drones{grid-template-columns:1fr}}
.dcard{border:1px solid var(--line);background:var(--bg);display:flex;flex-direction:column;border-radius:16px;overflow:hidden}
.dcard .media{aspect-ratio:16/9;background:#F0EFE9;overflow:hidden}
.dcard .media img{width:100%;height:100%;object-fit:cover}
.dcard .media iframe{width:100%;height:100%;border:0}
.dcard .body{padding:24px;display:flex;flex-direction:column;flex:1}
.dcard h3{font-weight:700;font-size:1.2rem;letter-spacing:-.015em}
.dcard .price{font-family:var(--font);font-size:0.78rem;font-weight:700;letter-spacing:0.12em;color:var(--sun);margin-top:4px}
.dcard ul{list-style:none;margin:14px 0 18px;display:grid;gap:7px}
.dcard li{font-size:.9rem;color:var(--dim);padding-left:15px;position:relative}
.dcard li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--sun)}
.dcard .btn{margin-top:auto;align-self:flex-start}
.pricenote{margin-top:20px;font-size:.82rem;color:var(--dim)}

.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,64px);align-items:center;margin-top:48px}
@media(max-width:820px){.feature{grid-template-columns:1fr}}
.feature .media{aspect-ratio:16/9;background:#10120E;border:1px solid var(--line);overflow:hidden;border-radius:16px}
.feature .media iframe{width:100%;height:100%;border:0}
.feature .media img{width:100%;height:100%;object-fit:cover}
.feature h3{font-weight:700;font-size:clamp(1.35rem,3vw,1.9rem);letter-spacing:-.015em}
.feature p{color:var(--dim);margin-top:12px}
.feature .mono{display:block;margin-bottom:10px}
.feature ul{list-style:none;margin-top:16px;display:grid;gap:8px}
.feature li{font-size:.95rem;color:var(--dim);padding-left:16px;position:relative}
.feature li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--leaf)}

.reports{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
@media(max-width:880px){.reports{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.reports{grid-template-columns:1fr}}
.rep{border:1px solid var(--line);padding:22px;text-decoration:none;transition:.3s;background:var(--bg);border-radius:16px}
.rep:hover{border-color:var(--sun)}
.rep .mono{font-size:.56rem}
.rep h4{font-weight:600;font-size:.98rem;margin-top:8px;letter-spacing:-.01em}
.rep span.dl{display:inline-block;margin-top:12px;font-family:var(--font);font-size:0.66rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--sun)}

.rto{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;background:var(--ink);color:#fff;padding:44px clamp(24px,4vw,52px);border-radius:16px}
.rto h3{font-weight:700;font-size:clamp(1.4rem,3.2vw,2.1rem);letter-spacing:-.015em}
.rto h3 i{color:var(--sun);font-style:normal}
.rto p{color:rgba(255,255,255,.72);margin-top:6px;max-width:52ch}

.cgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);margin-top:42px}
@media(max-width:820px){.cgrid{grid-template-columns:1fr}}
form.q{display:grid;gap:13px}
form.q input,form.q select,form.q textarea{padding:14px 20px;min-height:48px;border:1px solid var(--line);border-radius:999px;background:var(--bg);font-family:var(--font);font-size:.98rem;width:100%;transition:border-color .3s}
form.q textarea{border-radius:20px}
form.q input:focus,form.q select:focus,form.q textarea:focus{outline:none;border-color:var(--sun)}
form.q textarea{min-height:120px;resize:vertical}
.form-note{font-size:.8rem;color:var(--dim)}
.ok-msg{display:none;background:var(--leaf);color:#fff;padding:16px 18px;font-weight:600}
.details{border:1px solid var(--line);padding:30px 28px;height:max-content;border-radius:16px}
.details table{width:100%;border-collapse:collapse;font-size:.94rem}
.details td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.details td:first-child{font-family:var(--font);font-size:0.66rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--dim);width:38%;padding-top:14px}
.details a{text-decoration:none}
.details a:hover{color:var(--sun)}
.news{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.news input{flex:1;min-width:0;min-height:48px;padding:13px 20px;border:1px solid var(--line);border-radius:999px;font-family:var(--font);font-size:.94rem}
.news button{border:2px solid transparent}

footer{border-top:1px solid var(--line);padding:44px clamp(20px,6vw,64px) 30px}
@media(max-width:960px){footer{padding-bottom:120px}}
footer .inner{max-width:1180px;margin:0 auto}
.frow{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.socials{display:flex;gap:18px;flex-wrap:wrap}
.socials a{font-family:var(--font);font-size:0.68rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--dim);text-decoration:none;transition:color .3s}
.socials a:hover{color:var(--sun)}
.legal{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.legal,.legal a{font-family:var(--font);font-size:0.64rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--dim);text-decoration:none}
/* keep each legal link whole so a narrow phone never splits a name across lines */
.legal a{white-space:nowrap}
.legal a:hover{color:var(--sun)}

.wa-btn{position:fixed;right:18px;bottom:18px;z-index:80;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.wa-btn svg{width:30px;height:30px;fill:#fff}
.flag{background:#FFF6E6;border:1px dashed var(--sun);padding:10px 14px;font-size:.8rem;color:#6b5324;margin-top:16px}

/* after-sales value block */
.value{background:var(--ink);color:#fff;padding:13vh clamp(20px,6vw,64px)}
.value .inner{max-width:1180px;margin:0 auto}
.value .slogan{font-weight:800;font-size:clamp(1.8rem,4.8vw,3.2rem);letter-spacing:-.02em;line-height:1.18;max-width:24ch;margin-top:10px}
.value .slogan i{color:var(--sun);font-style:normal}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chip{border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:9px 18px;font-family:var(--font);font-size:0.66rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.vcols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:48px}
@media(max-width:760px){.vcols{grid-template-columns:1fr}}
.vcols h3{font-weight:700;font-size:1.15rem;margin-top:8px}
.vcols p{color:rgba(255,255,255,.75);margin-top:10px;font-size:.95rem}
.vcols .mono{color:var(--sun)}
.dcard .media.tbd{display:flex;align-items:center;justify-content:center;background:var(--bg2);color:var(--dim);font-family:var(--font);font-size:0.66rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;text-align:center;padding:20px}
.details .flag{margin-top:14px}



/* story: One drone, four jobs. Card gallery (swipe carousel on mobile) */
#story{background:#10120E;padding:64px clamp(20px,6vw,64px) 72px}
#story .inner{max-width:1180px;margin:0 auto}
#story .mono{color:rgba(255,255,255,.7)}
.jobs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.job{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4;margin:0;background:#1b1e18}
.job img{width:100%;height:100%;object-fit:cover}
.job::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 45%)}
.job figcaption{position:absolute;left:16px;bottom:12px;z-index:1;color:#fff;font-weight:700;font-size:clamp(1.25rem,2vw,1.8rem);text-transform:uppercase;letter-spacing:-.01em}
.job figcaption i{color:var(--sun);font-style:normal;margin-right:8px}

/* mobile: horizontal snap carousels */
.swipehint{display:none}
@media(max-width:760px){
  section.block{padding:64px 20px}
  .value{padding:72px 20px}
  .flag{font-size:.72rem;padding:8px 12px}
  .swipehint{display:block;margin-top:10px;font-size:.56rem}
  .jobs{display:flex;align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
  .jobs::-webkit-scrollbar{display:none}
  .job{flex:0 0 72%;min-width:0;scroll-snap-align:center;aspect-ratio:4/5}
  .g5{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
  .g5::-webkit-scrollbar{display:none}
  .g5 .cell{flex:0 0 74%;min-width:0;scroll-snap-align:center}
  .reports{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
  .reports::-webkit-scrollbar{display:none}
  .rep{flex:0 0 70%;min-width:0;scroll-snap-align:center}
}
@media(max-width:920px){
  .drones{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
  .drones::-webkit-scrollbar{display:none}
  .dcard{flex:0 0 84%;min-width:0;scroll-snap-align:center}
}

/* youtube facade */
.yt{position:relative;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:#000;display:block}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.88}
.ytp{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:var(--sun);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.ytp::after{content:"";border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;margin-left:5px}
.yt:hover .ytp{background:#d47f06}

/* mobile typography + full-width CTAs */
@media(max-width:760px){
  .mono{letter-spacing:.15em}
  .cell .mono,.rep .mono{letter-spacing:.12em}
  .btn{letter-spacing:.12em}
  .socials a,.legal,.legal a{letter-spacing:.08em}
  .details td:first-child{letter-spacing:.1em}
  .hero .ctas .btn,section.block .btn,.rto .btn,form.q .btn{width:100%}
  .hero .ctas{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ==========================================================================
   MOBILE-FIRST REBUILD (Aug 2026), multi-page structure
   Added components: full-screen burger overlay, bottom action dock,
   fleet picture tiles, drone page furniture, prev/next model nav.
   ========================================================================== */

/* ---- shared top bar: burger on every width, full-screen overlay menu ---- */
#nav .menu{display:none}                      /* legacy inline menu retired */
.burger{display:block}
.navpanel{position:fixed;inset:0;z-index:65;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;
  padding:96px clamp(22px,7vw,64px) 40px;overflow-y:auto;
  transform:translateY(-100%);visibility:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),visibility .45s}
.navpanel.open{transform:none;visibility:visible}
.navpanel a{display:block;text-decoration:none;color:var(--ink);
  font-weight:800;font-size:clamp(1.35rem,6vw,2rem);letter-spacing:-.02em;
  padding:11px 0;border-bottom:1px solid var(--line)}
.navpanel a:hover,.navpanel a[aria-current="page"]{color:var(--sun)}
.navpanel .legalblock{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px 20px}
.navpanel .legalblock a{border:0;padding:2px 0;font-weight:400;
  font-family:var(--font);font-size:0.68rem;font-weight:700;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--dim)}
.navclose{position:fixed;top:14px;right:clamp(16px,4vw,48px);z-index:70;
  background:none;border:0;width:44px;height:44px;cursor:pointer;
  font-size:1.9rem;line-height:1;color:var(--ink);display:none}
.navpanel.open~.navclose,body.menu-open .navclose{display:block}
body.menu-open{overflow:hidden}

/* ---- hero: video with graceful poster fallback, no layout shift ---- */
.hero video.herovid{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0}
.hero .heroimg{z-index:0}
.hero .heroimg img{width:100%;height:100%;object-fit:cover}
.hero.hasvideo .heroimg{opacity:0;transition:opacity .6s}

/* ---- FLEET TILES (home screen 2) ---- */
.fleet{padding:clamp(46px,9vw,88px) clamp(16px,5vw,64px) 0}
.fleet>.inner{max-width:1180px;margin:0 auto}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.tile{position:relative;display:block;text-decoration:none;overflow:hidden;
  border-radius:18px;background:#10120E;aspect-ratio:1/1;isolation:isolate}
.tile.wide{grid-column:1 / -1;aspect-ratio:16/10}
.tile img,.tile video{width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,1,.36,1)}
.tile:hover img,.tile:hover video{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(0,0,0,.74),rgba(0,0,0,.12) 55%,transparent)}
.tile .cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;color:#fff}
.tile .cap .mono{color:rgba(255,255,255,.72);font-size:.56rem;display:block;
  margin-bottom:5px}
.tile .cap h3{font-weight:800;letter-spacing:-.015em;line-height:1.1;
  font-size:clamp(1.05rem,4.4vw,1.7rem)}
.tile.wide .cap h3{font-size:clamp(1.3rem,5.6vw,2.2rem)}
.tile .cap .go{display:inline-block;margin-top:7px;font-family:var(--font);
  font-size:0.64rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--sun)}
/* placeholder tiles: no photography yet */
.tile.tbd{background:var(--bg2);border:1px dashed var(--sun)}
.tile.tbd::after{background:linear-gradient(0deg,rgba(0,0,0,.06),transparent)}
.tile.tbd .cap{color:var(--ink)}
.tile.tbd .cap .mono{color:var(--dim)}
/* the note centres in the space ABOVE the caption, never behind it */
.tile.tbd .tbdnote{position:absolute;inset:0;z-index:1;display:flex;
  align-items:center;justify-content:center;text-align:center;
  padding:18px 14px 94px;
  font-family:var(--font);font-size:0.62rem;font-weight:700;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--dim)}
.tile.wide.tbd .tbdnote{padding-bottom:104px}
/* two small link cards under the fleet */
.subcards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media(max-width:420px){.subcards{grid-template-columns:1fr}}
.subcard{display:block;text-decoration:none;border:1px solid var(--line);
  border-radius:18px;padding:0 0 20px;background:var(--bg);transition:.3s;overflow:hidden}
.subcard:hover{border-color:var(--sun)}
/* These two sit under a row of picture tiles, so they carry a picture too.
   Without one they read as an empty panel at the bottom of the page. */
.subcard .subshot{display:block;aspect-ratio:2/1;overflow:hidden;background:var(--bg2)}
.subcard .subshot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.subcard:hover .subshot img{transform:scale(1.03)}
.subcard .mono,.subcard h3,.subcard p,.subcard .go{margin-left:18px;margin-right:18px}
.subcard .mono{display:block;margin-top:18px}
.subcard h3{font-weight:700;font-size:1rem;letter-spacing:-.01em;margin-top:8px}
.subcard p{color:var(--dim);font-size:.86rem;margin-top:5px;line-height:1.55}
.subcard .go{display:inline-block;margin-top:10px;font-family:var(--font);
  font-size:0.62rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--sun)}
@media(min-width:761px){
  .tiles{gap:16px}
  .tile{aspect-ratio:4/3}
  .tile.wide{aspect-ratio:21/9}
}

/* ---- BOTTOM DOCK (every page) ---- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:flex;align-items:center;gap:7px;
  padding:9px clamp(10px,3vw,18px);
  padding-bottom:calc(9px + env(safe-area-inset-bottom,0px));
  background:rgba(253,253,251,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--line)}
.dock .dbtn{flex:1 1 0;min-width:0;display:flex;align-items:center;
  justify-content:center;text-align:center;text-decoration:none;
  min-height:46px;padding:7px 8px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:0.62rem;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;line-height:1.25;transition:.25s}
.dock .dbtn.primary{background:var(--sun);border-color:var(--sun);color:#fff}
.dock .dbtn:hover{border-color:var(--sun);color:var(--sun)}
.dock .dbtn.primary:hover{background:#d47f06;color:#fff}
.dock .wa{flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center}
.dock .wa svg{width:26px;height:26px;fill:#fff}
@media(min-width:761px){
  .dock{gap:10px;padding:11px 20px;justify-content:center}
  .dock .dbtn{flex:0 1 auto;min-width:170px;font-size:0.68rem;font-weight:700;letter-spacing:0.13em;
    padding:10px 22px}
}
/* the dock overlays the page bottom, so every page reserves room for it */
body{padding-bottom:96px}
footer{padding-bottom:34px}
@media(max-width:960px){footer{padding-bottom:34px}}
.wa-btn{display:none}       /* superseded by the dock's WhatsApp circle */

/* ---- DRONE PAGE furniture ---- */
.backbtn{position:fixed;top:64px;left:clamp(14px,4vw,42px);z-index:55;
  display:inline-flex;align-items:center;min-height:40px;padding:8px 18px;
  border-radius:999px;text-decoration:none;
  background:rgba(253,253,251,.92);border:1px solid var(--line);
  font-family:var(--font);font-size:0.64rem;font-weight:700;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--ink);backdrop-filter:blur(8px)}
.backbtn:hover{border-color:var(--sun);color:var(--sun)}
.dhero{position:relative;height:58svh;min-height:320px;max-height:560px;
  overflow:hidden;background:#10120E}
.dhero img,.dhero video{width:100%;height:100%;object-fit:cover}
.dhero.tbd{display:flex;align-items:center;justify-content:center;
  background:var(--bg2);color:var(--dim);text-align:center;padding:24px;
  font-family:var(--font);font-size:0.68rem;font-weight:700;letter-spacing:0.13em;
  text-transform:uppercase}
.dintro{padding:clamp(26px,6vw,44px) clamp(20px,6vw,64px) 0}
.dintro>.inner{max-width:1180px;margin:0 auto}
.dintro h1{font-weight:800;font-size:clamp(1.9rem,7vw,3.2rem);letter-spacing:-.025em;
  line-height:1.05;margin-top:8px}
.dintro .lead{color:var(--dim);margin-top:14px;max-width:62ch;font-size:1.02rem}
.benefits{display:grid;grid-template-columns:1fr;gap:12px;margin-top:34px}
@media(min-width:641px){.benefits{grid-template-columns:1fr 1fr}}
.benefit{border:1px solid var(--line);border-radius:16px;padding:20px 22px;
  background:var(--bg)}
.benefit h3{font-weight:700;font-size:1.05rem;letter-spacing:-.01em;margin-top:8px}
.benefit p{color:var(--dim);font-size:.92rem;margin-top:7px;line-height:1.6}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.gallery figure{margin:0;border-radius:16px;overflow:hidden;background:var(--bg2);
  aspect-ratio:4/3}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery .tbd{display:flex;align-items:center;justify-content:center;
  text-align:center;padding:16px;font-family:var(--font);
  font-size:0.6rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--dim);
  border:1px dashed var(--sun)}
.ctastack{display:grid;gap:11px;margin-top:30px}
@media(min-width:641px){.ctastack{grid-template-columns:auto auto;justify-content:start}}
.btn.wa{background:#25D366;color:#fff;border-color:#25D366}
.btn.wa:hover{background:#1eb855}
.valueline{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.valueline h3{font-weight:700;font-size:clamp(1.15rem,3.6vw,1.6rem);
  letter-spacing:-.015em;max-width:26ch}
.valueline h3 i{color:var(--sun-ink);font-style:normal}
.valueline .chips{margin-top:18px}
.valueline .chip{border-color:var(--line);color:var(--dim)}
/* prev / next model navigation */
.pnav{position:static;z-index:auto;border-bottom:0;display:flex;justify-content:space-between;gap:12px;margin-top:44px;
  padding-top:22px;border-top:1px solid var(--line)}
.pnav a{flex:1 1 0;min-width:0;text-decoration:none;padding:14px 16px;
  border:1px solid var(--line);border-radius:16px;transition:.3s}
.pnav a:hover{border-color:var(--sun)}
.pnav .dir{display:block;font-family:var(--font);font-size:.54rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.pnav .name{display:block;font-weight:700;font-size:.98rem;margin-top:4px;
  letter-spacing:-.01em}
.pnav a.next{text-align:right}

/* ---- page intro used by the interior content pages ---- */
.pagehead{padding:96px clamp(20px,6vw,64px) 0}
.pagehead>.inner{max-width:1180px;margin:0 auto}
.pagehead h1{font-weight:800;font-size:clamp(2rem,7vw,3.2rem);letter-spacing:-.025em;
  line-height:1.05;margin-top:8px}
.pagehead .lead{color:var(--dim);margin-top:14px;max-width:64ch;font-size:1.02rem}
/* interior pages carry a solid bar from the first paint */
#nav.always-solid{background:rgba(253,253,251,.96);border-color:var(--line)}
#nav.always-solid .brand{color:var(--ink)}
#nav.always-solid .burger span{background:var(--ink)}

/* ---- quiet scroll reveals (transform + opacity only).
       The hidden state is only ever applied once JS has confirmed it can
       reveal again, so with JS off or broken every section stays visible. ---- */
body.js-reveal .io{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
body.js-reveal .io.seen{opacity:1;transform:none}

/* ---- contact form: demo mode until the client's form key is supplied ---- */
.ok-msg{border-radius:14px}


/* ---- contrast: small orange text needs a darker orange on light surfaces.
       The brand orange is untouched wherever it sits on a dark background
       or is used as a fill. ---- */
.subcard .go,.rep span.dl,.socials a:hover,.legal a:hover,
.details a:hover,#nav .menu a:hover{color:var(--sun-ink)}
.hero .tick,.value .tick,#story .tick,.tile .tick,.rto .tick,
.value .mono,.tile .cap .go{color:var(--sun)}

/* ==========================================================================
   DJI-STYLE PRODUCT PAGES (Aug 2026)
   Full-bleed hero, headline spec strip, feature columns, alternating bands.
   Calm and airy: the layout language of ag.dji.com and the client's brochures.
   ========================================================================== */

/* ---- full-bleed product hero ---- */
.phero{position:relative;background:var(--bg2);overflow:hidden;
  padding:104px clamp(20px,6vw,64px) 0;text-align:center}
.phero .shot{max-width:1100px;margin:0 auto}
.phero .shot img{width:100%;height:auto;display:block}
/* the top bar and back button are fixed, so a full-bleed photo hero has to
   start below them or its top gets covered on a phone */
.phero.photo{padding:112px 0 0;text-align:left}
/* a wide crop would otherwise collapse to a thin band on a phone, so the
   photo hero is given a real height and cover-cropped */
.phero.photo .shot img{width:100%;height:clamp(230px,44svh,540px);
  object-fit:cover;object-position:center 55%}
.phero .cap{max-width:1180px;margin:0 auto;
  padding:clamp(22px,5vw,40px) 0 clamp(30px,6vw,56px)}
.phero.photo .cap{padding-left:clamp(20px,6vw,64px);padding-right:clamp(20px,6vw,64px)}
.phero h1{font-weight:800;font-size:clamp(2.1rem,8vw,4rem);letter-spacing:-.03em;
  line-height:1}
.phero .tagline{margin-top:10px;font-size:clamp(1.05rem,3.4vw,1.5rem);
  color:var(--dim);font-weight:600;letter-spacing:-.01em}
.phero .mono{display:block;margin-bottom:12px}
.phero.tbd{display:block;background:var(--bg2)}
.phero .tbdshot{max-width:1100px;margin:0 auto;aspect-ratio:16/8;
  border:1px dashed var(--sun);border-radius:18px;display:flex;
  align-items:center;justify-content:center;text-align:center;padding:22px;
  font-family:var(--font);font-size:0.66rem;font-weight:700;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--dim)}

/* ---- headline spec strip: scrolls sideways on a phone, never wraps badly ---- */
/* The spec row scrolls sideways on a phone. Without a cue the last number
   just looks chopped off, so fade the right edge while there is more to see. */
.specstrip{background:var(--ink);color:#fff;position:relative}
.specstrip::after{content:"";position:absolute;top:0;right:0;bottom:0;width:44px;
  pointer-events:none;background:linear-gradient(90deg,rgba(20,20,18,0),var(--ink))}
@media(min-width:961px){.specstrip::after{display:none}}
.specstrip .row{max-width:1180px;margin:0 auto;display:flex;
  gap:clamp(20px,4vw,44px);padding:clamp(22px,4vw,34px) clamp(20px,6vw,64px);
  overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.specstrip .row::-webkit-scrollbar{display:none}
.specstrip .spec{flex:0 0 auto;min-width:104px;scroll-snap-align:start}
.specstrip .n{display:block;font-weight:800;letter-spacing:-.03em;line-height:1;
  font-size:clamp(1.5rem,5vw,2.3rem)}
.specstrip .n i{font-style:normal;font-size:.5em;font-weight:600;
  letter-spacing:0;margin-left:2px;color:rgba(255,255,255,.75)}
.specstrip .c{display:block;margin-top:7px;font-family:var(--font);
  font-size:0.62rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;
  color:rgba(255,255,255,.66);max-width:15ch;line-height:1.5}
@media(min-width:961px){.specstrip .row{justify-content:space-between}}

/* ---- content bands, alternating light backgrounds ---- */
.band{padding:clamp(50px,9vw,92px) clamp(20px,6vw,64px)}
.band>.inner{max-width:1180px;margin:0 auto}
.band.alt{background:var(--bg2)}
.band h2{font-weight:800;font-size:clamp(1.5rem,5vw,2.3rem);letter-spacing:-.025em;
  margin-top:8px}
.band .intro{color:var(--dim);margin-top:12px;max-width:62ch;font-size:1.02rem}

/* ---- feature columns: three across on desktop, stacked on a phone ---- */
.fcols{display:grid;grid-template-columns:1fr;gap:clamp(16px,3vw,26px);margin-top:34px}
@media(min-width:721px){.fcols{grid-template-columns:repeat(3,1fr)}}
.fcol h3{font-weight:700;font-size:1.08rem;letter-spacing:-.015em;margin-top:10px}
.fcol ul{list-style:none;margin-top:12px;display:grid;gap:8px}
.fcol li{font-size:.93rem;color:var(--dim);padding-left:16px;position:relative;
  line-height:1.6}
.fcol li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;
  background:var(--leaf);border-radius:1px}

/* ---- large product image between sections ---- */
.bandshot{margin:0;padding:0}
.bandshot img{width:100%;height:auto;display:block}
.bandshot figcaption{max-width:1180px;margin:14px auto 0;
  padding:0 clamp(20px,6vw,64px);font-family:var(--font);
  font-size:0.62rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--dim)}

/* ---- brochure download ---- */
.btn.pdf{background:var(--bg);border-color:var(--line);color:var(--ink)}
.btn.pdf:hover{border-color:var(--sun-ink);color:var(--sun-ink)}

/* ---- video slot ---- */
.videowrap{margin-top:26px;border-radius:18px;overflow:hidden;background:#10120E;
  aspect-ratio:16/9}
.videowrap iframe{width:100%;height:100%;border:0}
.videowrap .yt{width:100%;height:100%}

/* ---- contrast: dark ink on the brand orange reads 6.9:1 instead of 2.5:1.
       The orange itself is unchanged. ---- */
.btn.sun,.btn.dark,.dock .dbtn.primary,.btn.wa{color:var(--ink)}
.btn.sun:hover,.btn.dark:hover,.dock .dbtn.primary:hover,.btn.wa:hover{color:var(--ink)}

/* ---- product gallery ---- */
.pgallery{display:grid;grid-template-columns:1fr;gap:14px;margin-top:28px}
@media(min-width:641px){.pgallery{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1001px){.pgallery{grid-template-columns:repeat(3,1fr)}}
.pgallery figure{margin:0}
.pgallery img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:16px;background:var(--bg2);display:block}
.pgallery figcaption{margin-top:9px;font-family:var(--font);
  font-size:0.62rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--dim)}

/* ---- hero sector list: the markets Precision AG serves ---- */
.hero .sectors{list-style:none;display:flex;flex-wrap:wrap;gap:8px 0;margin-top:22px;
  padding:0;max-width:44ch}
.hero .sectors li{position:relative;color:rgba(255,255,255,.92);
  font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:0 14px 0 0;margin-right:2px;white-space:nowrap}
.hero .sectors li::after{content:"";position:absolute;right:5px;top:50%;
  width:4px;height:4px;border-radius:50%;background:var(--sun);transform:translateY(-50%)}
.hero .sectors li:last-child{padding-right:0;margin-right:0}
.hero .sectors li:last-child::after{display:none}
@media(min-width:761px){.hero .sectors{max-width:none}.hero .sectors li{font-size:.8rem}}
/* The row fits on one line down to about 820px. Below that it wraps, and the
   trailing dot on the last item of each line dangles with nothing after it.
   Drop the dots there and let the gap do the separating instead. */
@media(max-width:860px){
  .hero .sectors{gap:9px 18px}
  .hero .sectors li{padding-right:0;margin-right:0}
  .hero .sectors li::after{display:none}
}

/* ---- fleet tile video: fades in over the still on hover, desktop only ---- */
.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s ease;z-index:0}
.tile.playing video{opacity:1}
.tile.playing img{opacity:0;transition:opacity .45s ease}

/* ---- product motion band: full-bleed clip of the machine working ---- */
.motionband{position:relative;margin:0;overflow:hidden;background:#10120E;
  height:clamp(240px,52svh,560px)}
.motionband img,.motionband video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
.motionband video{opacity:0;transition:opacity .6s ease;z-index:1}
.motionband.playing video{opacity:1}
.motionband::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(0deg,rgba(16,18,14,.55),rgba(16,18,14,.05) 55%,transparent)}
.motionband figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;
  max-width:1180px;margin:0 auto;padding:0 clamp(20px,6vw,64px) 22px;
  color:rgba(255,255,255,.95);font-size:0.72rem;font-weight:700;
  letter-spacing:0.13em;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){.motionband video{display:none}}

/* ---- FAQ blocks on the model pages -------------------------------------
   Plain headings and paragraphs rather than an accordion: the answers are
   real page content that a crawler reads without opening anything, and on a
   phone a four-item list is quicker to scan than four things to tap. */
.faq .faqlist{display:grid;gap:14px;margin-top:34px}
.faq .faqitem{border:1px solid var(--line);border-radius:16px;padding:24px 26px;background:var(--bg)}
.faq .faqitem h3{font-weight:700;font-size:1.02rem;letter-spacing:-.01em;margin-bottom:8px}
.faq .faqitem p{color:var(--dim);font-size:.95rem;line-height:1.65}
@media(min-width:900px){.faq .faqlist{grid-template-columns:1fr 1fr;gap:16px}}
@media(max-width:760px){.faq .faqitem{padding:20px}}

/* ---- enquiry form handoff ----------------------------------------------
   Until the client's Web3Forms key lands, a submitted enquiry is handed to
   WhatsApp with the details prefilled rather than posted into nothing. */
.ok-msg{padding:20px 22px}
.ok-msg .okline{font-weight:400;margin-top:8px;font-size:.92rem;opacity:.95}
.ok-msg .okwa{margin-top:16px;background:#fff;color:var(--ink);border-color:#fff}
.ok-msg .okwa:hover{background:#f1efe9;color:var(--ink)}

/* Netlify Forms honeypot: present in the DOM for bots, never shown to people. */
.q .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}