/* ===================================================================
   Emerald Aerial Solutions — Immersive scroll theme
   =================================================================== */
:root{
  --emerald:#1f9d3a; --emerald-d:#0f7a29; --emerald-l:#46d15f;
  --forest:#0c2a18; --forest-2:#123a22;
  --gold:#d7a63f; --gold-l:#eac36a;
  --ink:#0f1c14; --muted:#5a6b60;
  --paper:#ffffff; --paper-2:#f4f8f3; --paper-3:#eef4ee;
  --line:#e2ece4;
  --radius:18px; --radius-lg:26px;
  --shadow:0 18px 50px -20px rgba(12,42,24,.35);
  --shadow-sm:0 8px 24px -12px rgba(12,42,24,.3);
  --head:'Sora',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --maxw:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--body);color:var(--ink);background:#e8f1e6;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}

/* ---------- Fixed crop-field backdrop + flying drone ---------- */
.field-backdrop{position:fixed;inset:-4%;z-index:-2;background-size:cover;
  background-position:center;transform:scale(1.06);filter:saturate(1.08) contrast(1.02)}
/* Green-tinted wash so the real photo flows with the black-green theme while
   keeping the dark hero text readable. */
.field-veil{position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(232,244,233,.72),rgba(212,234,214,.6) 42%,rgba(15,58,32,.30));
  mix-blend-mode:normal}
.sky-drone{position:fixed;left:50%;top:0;z-index:40;pointer-events:none;
  transform:translate(-50%,-50%);will-change:transform}
.sky-shadow{position:absolute;left:50%;top:78px;width:120px;height:24px;
  transform:translateX(-50%) scaleX(1);border-radius:50%;opacity:0;
  background:radial-gradient(ellipse,rgba(12,42,24,.4),transparent 70%)}
.sky-drone::before{content:"";position:absolute;inset:-30% -20%;z-index:-1;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.5),transparent 70%)}
.sky-drone-inner{will-change:transform}
.sky-drone .drone-svg{filter:drop-shadow(0 16px 18px rgba(12,42,24,.4))}

/* ---- Takeoff / landing helipads ---- */
.drone-pad{position:absolute;width:170px;height:170px;z-index:1;pointer-events:none;
  display:grid;place-items:center}
.drone-pad.takeoff{top:44%;right:24%;transform:translateY(-50%)}
/* Landing pad lives in the empty space below the contact copy (left column).
   position:absolute + pointer-events:none => never affects layout. The flying
   drone reads this element's live rect each frame, so it follows on resize. */
.contact-copy{position:relative}
.drone-pad.landing{left:50%;top:100%;right:auto;bottom:auto;transform:translate(-50%,18px)}
.drone-pad .pad-ring{position:absolute;inset:0;border-radius:50%;
  border:2px dashed rgba(15,58,32,.28)}
.drone-pad .pad-ring-2{inset:26px;border-style:solid;border-color:rgba(15,58,32,.16)}
.drone-pad .pad-cross{position:absolute;width:74px;height:2px;background:rgba(15,58,32,.22);border-radius:2px}
.drone-pad .pad-cross.v{width:2px;height:74px}
.drone-pad .pad-label{position:absolute;bottom:-26px;font-family:var(--head);font-weight:700;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(15,58,32,.42)}
.section-forest .drone-pad .pad-ring{border-color:rgba(255,255,255,.34)}
.section-forest .drone-pad .pad-ring-2{border-color:rgba(255,255,255,.2)}
.section-forest .drone-pad .pad-cross{background:rgba(255,255,255,.28)}
.section-forest .drone-pad .pad-label{color:rgba(255,255,255,.5)}
/* Takeoff pad sits over the darkened hero photo — use light markings. */
.hero .drone-pad .pad-ring{border-color:rgba(255,255,255,.4)}
.hero .drone-pad .pad-ring-2{border-color:rgba(255,255,255,.24)}
.hero .drone-pad .pad-cross{background:rgba(255,255,255,.32)}
.hero .drone-pad .pad-label{color:rgba(255,255,255,.62)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--head);line-height:1.1;margin:0 0 .5em;font-weight:700}
.container{width:min(var(--maxw),92vw);margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--emerald);color:#fff;font-family:var(--head);font-weight:600;
  padding:.8em 1.4em;border-radius:999px;border:0;cursor:pointer;font-size:1rem;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  box-shadow:0 10px 26px -12px rgba(31,157,58,.8);
}
.btn:hover{transform:translateY(-2px);background:var(--emerald-d)}
.btn-lg{padding:1em 1.8em;font-size:1.05rem}
.btn-sm{padding:.55em 1.1em;font-size:.92rem}
.btn-ghost{background:rgba(255,255,255,.6);color:var(--forest);
  box-shadow:inset 0 0 0 1.5px var(--emerald)}
.btn-ghost:hover{background:#fff}
.section-forest .btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.section-forest .btn-ghost:hover{background:rgba(255,255,255,.12)}

/* ---------- Eyebrow / heads ---------- */
.eyebrow{display:inline-block;font-family:var(--head);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;font-size:.74rem;color:var(--emerald-d);margin-bottom:.9em}
.eyebrow-light{color:var(--gold-l)}
.hero .eyebrow{color:var(--emerald-l);text-shadow:0 1px 10px rgba(0,0,0,.4)}
.section{padding:clamp(4rem,9vw,7.5rem) 0;position:relative;
  background:rgba(255,255,255,.66);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.section-head{max-width:640px;margin-bottom:3rem}
.section-head h2,.why h2,.contact h2{font-size:clamp(1.9rem,4.2vw,3rem)}
.section-sub{color:var(--muted);font-size:1.1rem}
.section-sub.light{color:rgba(255,255,255,.8)}
.section-soft{background:rgba(244,248,243,.72)}
.section-forest{background:linear-gradient(160deg,var(--forest),var(--forest-2));color:#fff;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.section-forest h2{color:#fff}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);transition:background .3s,box-shadow .3s}
.site-header.scrolled{box-shadow:var(--shadow-sm)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--head)}
.brand-mark{object-fit:contain}
.brand-text{font-weight:800;font-size:1.02rem;line-height:1;display:flex;flex-direction:column}
.brand-sub{font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--emerald-d)}
.nav-links{display:flex;align-items:center;gap:1.6rem}
.nav-links a{font-family:var(--head);font-weight:600;font-size:.95rem;color:var(--ink);opacity:.85}
.nav-links a:hover{opacity:1;color:var(--emerald-d)}
.nav-links a.btn{color:#fff;opacity:1}
.nav-links a.btn-ghost{color:var(--forest)}
.nav-links a.btn-ghost:hover{color:var(--emerald-d)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:0;border:0;cursor:pointer;padding:6px}
.nav-toggle span{width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:.3s}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  color:#fff;overflow:hidden;background:transparent}
.hero-bg{position:absolute;inset:0;z-index:0}
/* Dark scrim over the crop photo so the copy stays legible — anchored left,
   where the text sits, fading toward the field/drone on the right. */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(7,24,14,.86) 0%,rgba(7,24,14,.66) 38%,rgba(7,24,14,.28) 66%,rgba(7,24,14,.08) 100%),
    linear-gradient(180deg,rgba(7,24,14,.28),rgba(7,24,14,0) 30%,rgba(7,24,14,.35) 100%)}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35}
.orb-1{width:420px;height:420px;background:var(--emerald-l);top:-120px;right:-40px}
.orb-2{width:360px;height:360px;background:var(--emerald);bottom:-140px;left:-100px;opacity:.25}
.hero-inner{position:relative;z-index:2;display:block;padding:6rem 0 5rem}
.hero-copy{max-width:640px}
.hero-title{font-size:clamp(2.6rem,6.5vw,4.8rem);font-weight:800;letter-spacing:-.02em;color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.35)}
.grad{background:linear-gradient(100deg,var(--emerald-l),#8ef0a6);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{font-size:1.18rem;color:rgba(255,255,255,.92);margin:1.2rem 0 2rem;
  text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hero-lead strong{color:#fff}
.soon-pill{display:inline-block;margin-left:.4rem;padding:.15em .7em;border-radius:999px;
  font-size:.8rem;font-weight:600;font-family:var(--head);
  background:rgba(70,209,95,.22);color:#bff5cc;border:1px solid rgba(70,209,95,.55)}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap}
.hero-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin:2.2rem 0 0;padding:0}
.hero-chips li{font-size:.85rem;font-weight:600;padding:.4em .9em;border-radius:999px;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(4px)}

/* Drone */
.hero-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:320px}
.drone{position:relative;animation:hover 4s ease-in-out infinite}
.drone-shadow{position:absolute;left:50%;bottom:-46px;width:180px;height:26px;
  transform:translateX(-50%);background:radial-gradient(ellipse,rgba(0,0,0,.35),transparent 70%);
  animation:shadowPulse 4s ease-in-out infinite}
.drone-svg{filter:drop-shadow(0 20px 24px rgba(0,0,0,.35))}
.rotor{transform-box:fill-box;transform-origin:center;animation:spin .11s linear infinite}
.spray .drop{opacity:0}
.drop{animation:drop 1.1s linear infinite}
.d1{animation-delay:0s}.d2{animation-delay:.22s}.d3{animation-delay:.44s}
.d4{animation-delay:.66s}.d5{animation-delay:.88s}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes shadowPulse{0%,100%{opacity:.35;width:180px}50%{opacity:.2;width:150px}}
@keyframes drop{0%{opacity:0;transform:translateY(0) scale(1)}
  15%{opacity:.9}100%{opacity:0;transform:translateY(46px) scale(.5)}}

/* Scroll cue */
.scroll-cue{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--emerald-d);
  font-family:var(--head);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.mouse{width:24px;height:38px;border:2px solid var(--emerald);border-radius:14px;position:relative}
.mouse span{position:absolute;top:7px;left:50%;width:4px;height:8px;background:var(--emerald);border-radius:2px;
  transform:translateX(-50%);animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;top:7px}40%{opacity:1}100%{opacity:0;top:20px}}

/* ---------- How it works ---------- */
.how-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;
  counter-reset:step}
.how-step{position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.8rem 1.5rem;transition:transform .25s,box-shadow .25s}
.how-step:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.how-step .step-num{display:inline-block;font-family:var(--head);font-weight:800;font-size:1.6rem;
  color:var(--emerald-d);margin-bottom:.6rem}
.how-step h3{font-size:1.15rem;margin:.1rem 0 .3rem}
.how-step p{margin:0;color:var(--muted);font-size:.97rem}

/* ---------- Grid / cards ---------- */
.grid{display:grid;gap:1.4rem}
.cards{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.card-ico{width:52px;height:52px;display:grid;place-items:center;font-size:1.5rem;border-radius:14px;
  background:linear-gradient(135deg,var(--paper-3),#fff);border:1px solid var(--line);margin-bottom:1rem}
.card h3{font-size:1.15rem}
.card p{margin:0;color:var(--muted);font-size:.97rem}

/* ---------- Why ---------- */
.why-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.feature-list{display:grid;gap:1.1rem;margin-top:2rem}
.feature{display:flex;gap:1rem}
.feat-ico{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--emerald);color:#fff;font-weight:700;font-size:.9rem}
.feature h4{margin:.1rem 0 .2rem;font-size:1.05rem;color:#fff}
.feature p{margin:0;color:rgba(255,255,255,.75);font-size:.95rem}
.why-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);
  background:#eef4ee}
.media-tag,.footer-note{font-size:.72rem}
.media-tag{position:absolute;left:12px;bottom:12px;background:rgba(12,42,24,.7);color:#fff;
  padding:.3em .7em;border-radius:999px;font-family:var(--head)}

/* ---------- Area ---------- */
.area-grid{grid-template-columns:repeat(2,1fr)}
.area-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  transition:transform .25s,box-shadow .25s}
.area-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.area-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#dcecdd}
.area-media img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:12px;left:12px;font-family:var(--head);font-weight:700;font-size:.75rem;
  padding:.35em .8em;border-radius:999px;color:#fff}
.badge-now{background:var(--emerald)}
.badge-soon{background:var(--gold);color:var(--forest)}
.area-body{padding:1.4rem 1.6rem 1.7rem}
.area-body h3{font-size:1.3rem}
.area-body p{margin:0;color:var(--muted)}

/* ---------- Team ---------- */
.team-grid{grid-template-columns:repeat(3,1fr)}
.member{text-align:center;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:2rem 1.4rem;transition:transform .25s,box-shadow .25s}
.member:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.avatar{width:76px;height:76px;margin:0 auto 1rem;border-radius:50%;display:grid;place-items:center;
  font-family:var(--head);font-weight:800;font-size:1.5rem;color:#fff;
  background:linear-gradient(135deg,var(--emerald),var(--forest))}
.member h3{margin:0 0 .1rem;font-size:1.2rem}
.role{color:var(--emerald-d);font-weight:600;font-family:var(--head);font-size:.9rem;margin:0 0 .6rem}
.member p:last-child{margin:0;color:var(--muted);font-size:.95rem}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.contact-list{list-style:none;padding:0;margin:1.6rem 0;display:grid;gap:.7rem}
.contact-list li{display:flex;align-items:center;gap:.7rem;color:rgba(255,255,255,.9)}

/* Instant-quote callout in the contact section */
.quote-callout{display:flex;align-items:center;gap:1rem;margin:1.6rem 0 .4rem;padding:1.1rem 1.3rem;
  border-radius:16px;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,var(--emerald),#0b5f20);
  border:1px solid rgba(255,255,255,.18);box-shadow:0 14px 34px rgba(0,0,0,.28);
  transition:transform .18s ease,box-shadow .18s ease}
.quote-callout:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(0,0,0,.36)}
.quote-callout-icon{font-size:1.9rem;line-height:1;flex:none}
.quote-callout-text{display:flex;flex-direction:column;gap:.15rem}
.quote-callout-text strong{font-size:1.08rem}
.quote-callout-text span{font-size:.9rem;color:rgba(255,255,255,.86)}
.quote-callout-arrow{margin-left:auto;font-size:1.4rem;flex:none;transition:transform .18s ease}
.quote-callout:hover .quote-callout-arrow{transform:translateX(4px)}
.quote-or{display:flex;align-items:center;text-align:center;gap:.8rem;
  margin:1rem 0 .2rem;color:rgba(255,255,255,.6);font-size:.82rem;
  text-transform:uppercase;letter-spacing:.14em}
.quote-or::before,.quote-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.18)}
.socials{display:flex;gap:.7rem;margin-top:1.4rem}
.social{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);transition:.25s}
.social:hover{background:var(--emerald);transform:translateY(-3px)}
.quote-form{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);padding:1.8rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field-full{grid-column:1/-1}
.quote-form label{font-family:var(--head);font-weight:600;font-size:.85rem;color:rgba(255,255,255,.85)}
.quote-form input,.quote-form select,.quote-form textarea{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:12px;
  padding:.7em .9em;color:#fff;font-family:var(--body);font-size:.98rem;width:100%}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{
  outline:none;border-color:var(--emerald-l);background:rgba(255,255,255,.12)}
.quote-form option{color:#111}
.form-note{margin:.8rem 0 0;font-size:.9rem;color:var(--gold-l)}

/* ---------- Footer ---------- */
.site-footer{background:var(--forest);color:rgba(255,255,255,.85);padding:3rem 0 1.6rem}
.footer-inner{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;justify-content:space-between;
  padding-bottom:1.6rem;border-bottom:1px solid rgba(255,255,255,.12)}
.site-footer .brand-text,.site-footer .brand-sub{color:#fff}
.footer-tag{margin:0;color:rgba(255,255,255,.7);font-size:.95rem}
.footer-links{display:flex;gap:1.4rem}
.footer-links a{font-family:var(--head);font-weight:600;font-size:.92rem;color:rgba(255,255,255,.8)}
.footer-links a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:1.4rem;font-size:.82rem;color:rgba(255,255,255,.6)}

/* ---------- Reveal animations ---------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
.js .reveal:nth-child(2){transition-delay:.06s}
.js .reveal:nth-child(3){transition-delay:.12s}
.js .reveal:nth-child(4){transition-delay:.18s}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav-links{position:fixed;inset:72px 0 auto 0;flex-direction:column;background:#fff;
    padding:1.4rem 6vw 2rem;gap:1.1rem;box-shadow:var(--shadow);
    transform:translateY(-140%);transition:transform .35s ease;align-items:flex-start}
  .nav-links.open{transform:none}
  .nav-toggle{display:flex}
  .nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .hero-inner{text-align:center}
  .hero-copy{margin-inline:auto}
  .hero-cta,.hero-chips{justify-content:center}
  .cards,.team-grid,.how-grid{grid-template-columns:1fr 1fr}
  .why-grid,.contact-grid{grid-template-columns:1fr}
  .area-grid{grid-template-columns:1fr}
  /* Keep the flying drone on small screens, but hide the decorative pads so
     they never overlap the centered hero headline or other copy. With the
     pads hidden the flight logic falls back to a right-edge cruise lane, so
     the drone simply flies down the right margin. */
  .drone-pad{display:none}
  /* Fly a smaller drone down the right margin on phones (the lane math
     already assumes a ~96px drone here). */
  .sky-drone .drone-svg{width:88px;height:auto}
  .contact{padding-bottom:clamp(4rem,9vw,7.5rem)}
}
@media (max-width:560px){
  .cards,.team-grid,.how-grid{grid-template-columns:1fr}
  .quote-form{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;align-items:flex-start}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  /* Keep the drone reading as a drone — rotors/spray stay live */
  .rotor{animation:spin .11s linear infinite!important}
  .drop{animation:drop 1.1s linear infinite!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
}