/* ===== AIR CRAB — site styles (brandbook-based) ===== */
@font-face{font-family:'Space Grotesk';src:url('../fonts/SpaceGrotesk.ttf') format('truetype');font-weight:300 700;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/Manrope.ttf') format('truetype');font-weight:200 800;font-display:swap}

:root{
  --grass:#125B48; --lime:#AADD66; --cream:#FFFDF8; --dgreen:#013528; --midnight:#041914; --grey:#5D5D5D;
  --line:#e6e6df; --maxw:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Manrope',sans-serif;color:var(--midnight);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,.sg{font-family:'Space Grotesk','Manrope',sans-serif;letter-spacing:-.02em;line-height:1.03}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.eyebrow{font-family:'Space Grotesk','Manrope',sans-serif;font-size:12px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;opacity:.7}
a{color:inherit;text-decoration:none}
section{scroll-margin-top:80px}

.btn{font-family:'Space Grotesk','Manrope',sans-serif;font-weight:600;font-size:14px;padding:13px 24px;display:inline-block;transition:.2s;cursor:pointer;border:1px solid transparent;white-space:nowrap}
.btn-lime{background:var(--lime);color:var(--midnight)}
.btn-lime:hover{background:#bce87f}
.btn-ghost{border-color:currentColor;color:inherit}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-dark{background:var(--grass);color:var(--cream)}
.btn-dark:hover{background:#16694f}

/* ---------- HEADER ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:60;color:var(--cream);transition:.3s}
header.solid{background:var(--grass);box-shadow:0 1px 0 rgba(255,255,255,.08)}
header.dark-page{background:var(--grass)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand-logo{height:26px;width:auto}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;font-size:14px;font-weight:500}
.nav-links a{opacity:.85;transition:.2s}
.nav-links a:hover,.nav-links a.active{opacity:1;color:var(--lime)}
.nav .btn{padding:11px 20px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:var(--cream);transition:.25s}
.mobile-menu{display:none;position:fixed;inset:74px 0 0;background:var(--grass);color:var(--cream);z-index:55;padding:30px 32px;flex-direction:column;gap:6px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-family:'Space Grotesk','Manrope',sans-serif;font-size:22px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.mobile-menu .btn{margin-top:20px;text-align:center}
body.menu-open{overflow:hidden}

/* ---------- HERO ---------- */
.hero{position:relative;background:var(--grass);color:var(--cream);overflow:hidden;padding:150px 0 90px}
.hero .bg{position:absolute;inset:0;background:radial-gradient(120% 90% at 80% 10%,#1a7358 0%,var(--grass) 45%,var(--dgreen) 100%)}
.hero .paths{position:absolute;inset:0;opacity:.5;width:100%;height:100%}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(42px,7vw,96px);font-weight:600;text-transform:uppercase;max-width:15ch}
.hero h1 .g{color:var(--lime)}
.hero .sub{margin-top:26px;max-width:48ch;font-size:19px;opacity:.9}
.hero .cta{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
.stats{margin-top:70px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid rgba(255,255,255,.18);padding-top:30px}
.stat .n{font-family:'Space Grotesk','Manrope',sans-serif;font-size:clamp(28px,4vw,44px);font-weight:600;color:var(--lime);line-height:1}
.stat .l{font-size:13px;opacity:.8;margin-top:8px}

/* ---------- SECTION HEADS ---------- */
.sec{padding:90px 0}
.sec-dark{background:var(--grass);color:var(--cream)}
.sec-mid{background:var(--midnight);color:var(--cream)}
.head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:44px}
.h2{font-size:clamp(30px,4vw,52px);font-weight:600;max-width:20ch}
.lead{color:var(--grey);max-width:64ch;margin-top:14px}
.sec-dark .lead,.sec-mid .lead{color:rgba(255,255,255,.82)}

/* ---------- SERVICES ---------- */
.slist{display:grid;grid-template-columns:repeat(2,1fr);gap:0 60px}
.srow{display:flex;align-items:center;gap:18px;padding:20px 0;border-top:1px solid var(--line);cursor:default}
.srow .idx{font-family:'Space Grotesk','Manrope',sans-serif;font-size:13px;color:var(--grass);width:34px;font-weight:600}
.srow .t{font-family:'Space Grotesk','Manrope',sans-serif;font-size:20px;font-weight:500}
.srow .arw{margin-left:auto;color:var(--grass);font-size:20px;transition:.2s}
.srow:hover .arw{transform:translateX(6px);color:var(--lime)}

/* ---------- CARDS / CATALOG ---------- */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--cream);color:var(--midnight);padding:26px;display:flex;flex-direction:column;min-height:430px;border:1px solid transparent;transition:.2s}
.card:hover{transform:translateY(-4px)}
.sec-dark .card{border-color:transparent}
.card .badge{font-family:'Space Grotesk','Manrope',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grass);font-weight:600}
.card h3{font-size:27px;font-weight:600;margin-top:6px}
.card .role{font-size:14px;color:var(--grey);margin-top:4px}
.card .drone{height:120px;margin:20px 0;display:flex;align-items:center;justify-content:center}
.card .drone img{height:74px;width:auto}
.specs{list-style:none;border-top:1px solid var(--line);margin-top:auto}
.specs li{display:flex;justify-content:space-between;font-size:13.5px;padding:9px 0;border-bottom:1px solid #efefe8}
.specs li span:first-child{color:var(--grey)}
.specs li span:last-child{font-family:'Space Grotesk','Manrope',sans-serif;font-weight:500}
.card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.card .price{font-family:'Space Grotesk','Manrope',sans-serif;font-weight:600;font-size:15px;color:var(--grass)}
.card .more{font-family:'Space Grotesk','Manrope',sans-serif;font-size:13px;font-weight:600;color:var(--midnight);border-bottom:2px solid var(--lime);padding-bottom:2px}

/* ---------- FILTER ---------- */
.filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.chipbtn{font-family:'Space Grotesk','Manrope',sans-serif;font-size:13px;font-weight:500;padding:9px 18px;border:1px solid var(--line);background:transparent;cursor:pointer;transition:.2s;color:var(--midnight)}
.chipbtn:hover{border-color:var(--grass)}
.chipbtn.active{background:var(--grass);color:var(--cream);border-color:var(--grass)}

/* ---------- COMPARE ---------- */
.tablewrap{overflow-x:auto}
table.compare{width:100%;border-collapse:collapse;margin-top:0;font-size:15px;min-width:640px}
table.compare th,table.compare td{text-align:left;padding:18px 16px;border-bottom:1px solid var(--line)}
table.compare thead th{font-family:'Space Grotesk','Manrope',sans-serif;font-weight:600;font-size:14px}
table.compare thead th:not(:first-child){color:var(--grass)}
table.compare tbody td:first-child{color:var(--grey);font-size:14px}
table.compare tbody td:not(:first-child){font-family:'Space Grotesk','Manrope',sans-serif;font-weight:500}
table.compare .hl{background:rgba(170,221,102,.14)}
table.compare td.pick{font-family:'Space Grotesk','Manrope',sans-serif;color:var(--grass);font-weight:600;font-size:13px}

/* ---------- SELECTOR ---------- */
.selbox{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.selcard{background:var(--grass);padding:30px;border:1px solid rgba(255,255,255,.12)}
.field{margin-bottom:18px}
.field label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;font-family:'Space Grotesk','Manrope',sans-serif;color:var(--cream)}
.field input,.field select{margin-top:8px;width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);padding:14px 16px;font-family:'Space Grotesk','Manrope',sans-serif;font-size:16px;color:var(--cream);outline:none}
.field select option{color:#000}
.selcard .btn{width:100%;text-align:center;margin-top:6px}
.result{margin-top:20px;padding:18px;background:rgba(170,221,102,.12);border:1px solid rgba(170,221,102,.35);font-size:14px;color:var(--cream);display:none}
.result.show{display:block}
.result b{color:var(--lime);font-family:'Space Grotesk','Manrope',sans-serif}

/* ---------- WHY / FEATURES ---------- */
.fgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
.feat{border:1px solid var(--line);padding:28px}
.sec-dark .feat{border-color:rgba(255,255,255,.15)}
.feat .fn{font-family:'Space Grotesk','Manrope',sans-serif;font-size:36px;font-weight:600;color:var(--lime)}
.feat h4{font-size:19px;font-weight:600;margin:12px 0 8px}
.feat p{font-size:14.5px;color:var(--grey)}
.sec-dark .feat p{color:rgba(255,255,255,.78)}

/* ---------- BRAND REF ---------- */
.bgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:10px}
.panel{border:1px solid var(--line);padding:26px}
.panel h4{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--grass);margin-bottom:18px}
.sw{display:flex;gap:12px;flex-wrap:wrap}
.swatch{width:calc(50% - 6px)}
.swatch .chip{height:64px;border:1px solid rgba(0,0,0,.06)}
.swatch .meta{display:flex;justify-content:space-between;font-family:'Space Grotesk','Manrope',sans-serif;font-size:12px;margin-top:7px}
.swatch .meta .hex{color:var(--grey)}
.type-spec .big{font-family:'Space Grotesk','Manrope',sans-serif;font-size:44px;font-weight:600;line-height:1}
.type-spec .lab{font-size:12px;color:var(--grey);margin:6px 0 22px}
.type-spec .big2{font-family:'Manrope';font-size:38px;font-weight:700;line-height:1}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.tag{font-family:'Space Grotesk','Manrope',sans-serif;font-size:12px;border:1px solid var(--grass);color:var(--grass);padding:6px 12px}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.contact form{display:grid;gap:16px}
.contact input,.contact textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);padding:15px 16px;font-family:'Manrope';font-size:15px;color:var(--cream);outline:none;width:100%}
.contact textarea{min-height:120px;resize:vertical}
.contact .info h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:10px}
.contact .info .big{font-family:'Space Grotesk','Manrope',sans-serif;font-size:26px;font-weight:600;margin-bottom:24px}

/* ---------- BAND ---------- */
.band{padding:70px 0;background:var(--grass);color:var(--cream);text-align:center}
.band h2{font-size:clamp(28px,4vw,52px);font-weight:600;text-transform:uppercase}
.band .btn{margin-top:26px}

/* ---------- FOOTER ---------- */
footer{background:var(--midnight);color:var(--cream);padding:60px 0 40px}
.fgrid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;align-items:flex-start}
.fgrid .col .flogo{height:30px;margin-bottom:14px}
.fgrid .col p{opacity:.6;font-size:14px;max-width:34ch}
.fnav{display:flex;gap:60px;flex-wrap:wrap}
.fnav h5{font-family:'Space Grotesk','Manrope',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.5;margin-bottom:14px}
.fnav ul{list-style:none;font-size:14px;line-height:2;opacity:.85}
.fnav ul a:hover{color:var(--lime)}
.fbot{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;opacity:.55}

/* ---------- PRODUCT PAGE ---------- */
.phero{padding:120px 0 40px;background:var(--grass);color:var(--cream)}
.crumbs{font-size:13px;opacity:.7;font-family:'Space Grotesk','Manrope',sans-serif;margin-bottom:22px}
.crumbs a:hover{color:var(--lime)}
.pgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.pvisual{background:var(--dgreen);border:1px solid rgba(255,255,255,.1);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.pvisual img{height:150px}
.pvisual .ppaths{position:absolute;inset:0;opacity:.4}
.pinfo .badge{font-family:'Space Grotesk','Manrope',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);font-weight:600}
.pinfo h1{font-size:clamp(38px,5vw,62px);font-weight:600;margin:8px 0}
.pinfo .ptag{font-size:17px;opacity:.85;max-width:42ch}
.pinfo .pprice{font-family:'Space Grotesk','Manrope',sans-serif;font-size:22px;font-weight:600;margin:26px 0 18px}
.pinfo .pcta{display:flex;gap:14px;flex-wrap:wrap}
.pspecs{padding:90px 0}
.specgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 60px}
.specgrid .row{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line)}
.specgrid .row .k{color:var(--grey);font-size:15px}
.specgrid .row .v{font-family:'Space Grotesk','Manrope',sans-serif;font-weight:500}
.keyfeat{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}

@media(max-width:960px){
  .selbox,.contact-grid,.pgrid{grid-template-columns:1fr}
  .cgrid,.fgrid3,.keyfeat{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .nav-links,.nav .btn.desk{display:none}
  .burger{display:flex}
  .slist,.bgrid,.cgrid,.fgrid3,.keyfeat,.specgrid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:26px}
  .hero{padding:120px 0 70px}
  .sec{padding:64px 0}
  .wrap{padding:0 20px}
}

/* Hero decoration fix — keep flight-path lines off the text (clean left scrim) */
.hero .paths{opacity:.38}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, var(--grass) 0%, var(--grass) 44%, rgba(18,91,72,0) 74%)}
.hero .wrap{z-index:2}
@media(max-width:760px){
  .hero::after{background:linear-gradient(90deg, var(--grass) 0%, var(--grass) 62%, rgba(18,91,72,0) 100%)}
}

/* --- Refinement: calmer/premium type + cleaner hero --- */
.eyebrow{letter-spacing:.16em;font-size:11px;font-weight:500;opacity:.72}
.hero h1{font-weight:500;letter-spacing:-.035em}
.h2{font-weight:500;letter-spacing:-.025em}
.card h3,.pinfo h1,.band h2{font-weight:500}
.stat .n,.feat .fn{font-weight:500}
.srow .t{font-weight:500}


/* ================================================================
   REFINEMENT v2
   1. Type: Space Grotesk has NO Cyrillic glyphs -> pair it with
      Manrope, so Latin/numerals use Space Grotesk and Cyrillic
      uses Manrope (both fonts are from the brandbook).
   2. Brand graphic elements as quiet decoration in empty zones.
   3. Drone cursor follower.
   ================================================================ */

h1,h2,h3,h4,h5,.sg,.eyebrow,.btn,.nav-links,.mobile-menu a,
.card .badge,.card h3,.card .price,.card .more,.specs li span:last-child,
table.compare thead th,table.compare tbody td:not(:first-child),table.compare td.pick,
.field label,.field input,.field select,.result b,.stat .n,.feat .fn,
.srow .idx,.srow .t,.panel h4,.tag,.crumbs,.chipbtn,.note-strip,
.pinfo .badge,.pinfo h1,.pinfo .pprice,.specgrid .row .v,.fnav h5,
.band h2,.h2{font-family:'Space Grotesk','Manrope',sans-serif}

.hero h1{font-weight:600;letter-spacing:-.035em}
.h2,.band h2{font-weight:600;letter-spacing:-.03em}
.card h3,.pinfo h1{font-weight:600;letter-spacing:-.02em}
.btn,.stat .n,.feat .fn,.srow .t{font-weight:600}
.eyebrow{font-weight:600}

/* ================================================================
   DECOR v3 — two brandbook elements only
   light bg -> coordinate grid that draws itself on enter
   dark  bg -> flight-path lines that flow and shimmer on scroll
   ================================================================ */
.deco{position:absolute;pointer-events:none;z-index:0;width:400px;height:320px}
.deco svg{width:100%;height:100%;display:block;overflow:visible}
.deco[data-deco="grid"]{width:300px;height:300px}
.deco[data-pos="tr"]{right:-40px;top:-30px}
.deco[data-pos="br"]{right:-40px;bottom:-40px}
.deco[data-pos="bl"]{left:-40px;bottom:-40px;transform:scaleX(-1)}
.deco[data-pos="r"]{right:-20px;top:50%;transform:translateY(-50%)}

/* coordinate grid (light sections) */
.gl{stroke:var(--grass);stroke-width:.6;opacity:.24;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.2s cubic-bezier(.22,.61,.36,1)}
.gl.maj{stroke-width:1;opacity:.4}
.tick{stroke:var(--grass);stroke-width:1.1;opacity:.55;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .55s ease}
.deco.in .gl,.deco.in .tick{stroke-dashoffset:0}

/* flight paths (dark sections) */
.deco[data-deco="path"]{opacity:calc(.10 + var(--glow,0) * .15);transition:opacity .25s linear}
.fp{stroke:var(--lime);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:15 7 2 7}
.f1{stroke-dashoffset:calc(var(--flow,0) * -1px)}
.f2{stroke-dashoffset:calc(var(--flow,0) * -.72px);opacity:.75}
.f3{stroke-dashoffset:calc(var(--flow,0) * -1.32px);opacity:.6}
.fpd{fill:var(--lime);opacity:.85}

@media(max-width:1100px){.deco{display:none}}
@media(prefers-reduced-motion:reduce){
  .fp{stroke-dashoffset:0}
  .gl,.tick{stroke-dashoffset:0;transition:none}
}

/* --- drone hovering beside the cursor --- */
.drone-cursor{position:fixed;inset:0;pointer-events:none;z-index:9999;
  color:var(--grass);opacity:0;transition:opacity .4s ease}
.drone-cursor.visible{opacity:1}
.drone-cursor.on-dark{color:var(--lime)}
.dc-body{position:absolute;left:0;top:0;width:40px;height:15px;background:currentColor;
  -webkit-mask:url('../img/drone-mask.svg') no-repeat center/contain;
          mask:url('../img/drone-mask.svg') no-repeat center/contain;
  will-change:transform}
.dc-dot{position:absolute;left:0;top:0;width:3px;height:3px;border-radius:50%;
  background:currentColor;will-change:transform}
@media(hover:none),(max-width:900px){.drone-cursor{display:none}}
@media(prefers-reduced-motion:reduce){.drone-cursor{display:none}}

/* decor containers (must stay after DECOR v3) */
.sec,.band,.phero,.pspecs{position:relative;overflow:hidden}
.sec > .wrap,.band > .wrap,.phero > .wrap,.pspecs > .wrap{position:relative;z-index:2}

/* ================= FLEET — site-wide drones on a geometric route =========
   Fixed layer above section backgrounds, below content (.wrap z-index:2),
   so drones cross the whole site and are never clipped by a section.      */
.fleet{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.fl{position:absolute;left:0;top:0;will-change:transform;
  color:var(--grass);opacity:.20;transition:color .35s ease,opacity .35s ease}
.fl.on-dark{color:var(--lime);opacity:.30}
.fl-b{display:block;width:30px;height:11px;background:currentColor;
  -webkit-mask:url('../img/drone-mask.svg') no-repeat center/contain;
          mask:url('../img/drone-mask.svg') no-repeat center/contain;
  transition:transform .45s cubic-bezier(.4,0,.2,1)}
footer .wrap{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.fleet{display:none}}

/* fleet presence tuning */
.fl{opacity:.38}
.fl.on-dark{opacity:.52}
.fl-b{width:34px;height:13px}

/* fleet on mobile: fewer, smaller, calmer */
@media(max-width:900px){
  .fl-b{width:26px;height:10px}
  .fl{opacity:.34}
  .fl.on-dark{opacity:.46}
}

/* ================= MEDIA (temporary stock, Pexels licence) ================= */
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero .bg{background:linear-gradient(115deg,
  rgba(1,53,40,.94) 0%, rgba(18,91,72,.80) 42%, rgba(4,25,20,.90) 100%)}

/* product card photo */
.card .drone{height:170px;margin:18px 0;overflow:hidden;background:#0e3f32}
.card .drone img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .drone img{transform:scale(1.04)}

/* product page visual */
.pvisual{aspect-ratio:4/3}
.pvisual .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;height:auto}
.pvisual .shade{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(1,53,40,.15) 0%, rgba(1,53,40,.55) 100%)}

/* fleet: fade out over the hero screen */
.fleet{transition:opacity .5s ease}
.fleet.is-hidden{opacity:0}

/* ============ HERO: brighter footage, contrastier transition ============ */
.hero-media{filter:brightness(1.16) saturate(1.06) contrast(1.04)}
.hero::after{background:linear-gradient(95deg,
  rgba(1,53,40,.92) 0%, rgba(1,53,40,.74) 26%, rgba(1,53,40,.28) 52%, rgba(1,53,40,0) 68%)}
.hero .bg{background:linear-gradient(180deg,
  rgba(4,25,20,.34) 0%, rgba(4,25,20,.06) 42%, rgba(4,25,20,.50) 100%)}

/* 4-step process grid */
.fgrid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:10px}
.step{border-top:2px solid var(--lime);padding:20px 0 0}
.step .sn{font-family:'Space Grotesk','Manrope',sans-serif;font-size:13px;font-weight:600;
  color:var(--grass);letter-spacing:.14em}
.step h4{font-size:19px;font-weight:600;margin:10px 0 8px}
.step p{font-size:14.5px;color:var(--grey)}
.sec-dark .step p,.sec-mid .step p{color:rgba(255,255,255,.78)}
.sec-dark .step .sn,.sec-mid .step .sn{color:var(--lime)}
.tnote{color:var(--grey);font-size:13.5px;margin-top:16px}
.sec-dark .tnote{color:rgba(255,255,255,.7)}
.soon{display:inline-block;font-family:'Space Grotesk','Manrope',sans-serif;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;border:1px solid currentColor;
  padding:5px 10px;opacity:.75}
@media(max-width:960px){.fgrid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.fgrid4{grid-template-columns:1fr}}

/* ---------- news video block ---------- */
.newsvid{margin-top:30px;max-width:900px;background:#041914;
  border:1px solid rgba(255,255,255,.14);position:relative;z-index:2}
.newsvid video{width:100%;height:auto;display:block}
.newsmeta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;
  max-width:900px;font-size:14px;color:rgba(255,255,255,.75);position:relative;z-index:2}
.ntag{font-family:'Space Grotesk','Manrope',sans-serif;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lime);border:1px solid var(--lime);padding:5px 10px}

/* ============ FAQ, advantages, experience band, contact channels ============ */
.faq{max-width:900px;margin-top:36px;position:relative;z-index:2}
.faq details{border-top:1px solid var(--line);padding:0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-family:'Space Grotesk','Manrope',sans-serif;font-size:18px;font-weight:600;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:19px;font-size:24px;
  color:var(--grass);transition:transform .25s ease;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 40px 24px 0;color:var(--grey);font-size:15.5px;max-width:72ch}
.sec-dark .faq details{border-color:rgba(255,255,255,.16)}
.sec-dark .faq summary::after{color:var(--lime)}
.sec-dark .faq p{color:rgba(255,255,255,.78)}

.advgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:12px}
.adv{border:1px solid var(--line);padding:26px;position:relative}
.sec-dark .adv{border-color:rgba(255,255,255,.16)}
.adv .av{font-family:'Space Grotesk','Manrope',sans-serif;font-size:30px;font-weight:600;
  color:var(--grass);line-height:1}
.sec-dark .adv .av{color:var(--lime)}
.adv h4{font-size:18px;font-weight:600;margin:12px 0 8px}
.adv p{font-size:14.5px;color:var(--grey)}
.sec-dark .adv p{color:rgba(255,255,255,.78)}

.chan{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.chan a{font-family:'Space Grotesk','Manrope',sans-serif;font-size:13px;font-weight:600;
  border:1px solid currentColor;padding:8px 14px;opacity:.85;transition:.2s}
.chan a:hover{opacity:1;color:var(--lime)}
@media(max-width:960px){.advgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.advgrid{grid-template-columns:1fr}}

/* --- experience / trust band --- */
.expband{padding:64px 0;background:var(--grass);color:var(--cream);position:relative;overflow:hidden}
.expband > .wrap{position:relative;z-index:2}
.expband .eyebrow{opacity:.7;margin-bottom:26px}
.expgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.exp .n{font-family:'Space Grotesk','Manrope',sans-serif;font-size:clamp(34px,4.6vw,58px);
  font-weight:600;line-height:1;letter-spacing:-.035em;color:var(--lime)}
.exp .l{font-size:14px;line-height:1.5;margin-top:12px;opacity:.9;max-width:24ch}
@media(max-width:860px){.expgrid{grid-template-columns:repeat(2,1fr);gap:32px}}

/* --- contact channels --- */
.contact .info .cbox{border:1px solid rgba(255,255,255,.16);padding:22px 24px;margin-bottom:14px}
.contact .info .cbox h4{font-size:12px;opacity:.55;margin-bottom:12px}
.contact .info .cbox .big{margin-bottom:14px}
.contact .info .cbox .big a{border-bottom:1px solid rgba(170,221,102,.4);padding-bottom:2px}
.contact .info .cbox .big a:hover{color:var(--lime)}
.contact .info > h4{margin-top:26px}
.cnote{font-size:13.5px;color:rgba(255,255,255,.62);margin-top:18px;line-height:1.6;max-width:44ch}

/* --- veterans / social responsibility panel --- */
.vetbox{border-left:3px solid var(--lime);background:rgba(18,91,72,.055);
  padding:30px 34px;margin-top:38px;position:relative;z-index:2}
.vetbox h3{font-size:clamp(20px,2.4vw,26px);font-weight:600;letter-spacing:-.02em;margin:12px 0 14px}
.vetbox p{color:var(--grey);font-size:15.5px;max-width:82ch}
.vetbox p + p{margin-top:14px}
.sec-dark .vetbox,.sec-mid .vetbox{background:rgba(255,255,255,.06)}
.sec-dark .vetbox p,.sec-mid .vetbox p{color:rgba(255,255,255,.8)}
@media(max-width:700px){.vetbox{padding:24px 22px}}

/* --- full-width section photo --- */
.secphoto{position:relative;z-index:2;margin-top:40px;overflow:hidden}
.secphoto img{width:100%;height:clamp(220px,32vw,380px);object-fit:cover;display:block}
.sec-dark .secphoto,.pspecs .secphoto{margin-top:44px}

/* --- footer contacts under the logo --- */
.fcont{list-style:none;margin-top:18px;font-size:14px;line-height:2;opacity:.85}
.fcont a:hover{color:var(--lime)}

/* ================= CTA block on the homepage ================= */
#cta .lead{max-width:62ch}

/* ================= back to top ================= */
.totop{position:fixed;right:26px;bottom:26px;z-index:60;width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  border:1px solid var(--grass);background:var(--cream);color:var(--grass);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .28s ease,transform .28s ease,background .2s ease,color .2s ease}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--grass);color:var(--cream)}
.totop svg{display:block}
@media(max-width:700px){.totop{right:14px;bottom:14px;width:44px;height:44px}}
@media print{.totop{display:none}}

/* ================= page transition ================= */
body{animation:pageIn .38s cubic-bezier(.22,.61,.36,1) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
html.pt-out body{opacity:0;transition:opacity .2s ease}
@media(prefers-reduced-motion:reduce){
  body{animation:none}
  html.pt-out body{opacity:1;transition:none}
}

/* --- smaller full stops in the hero headline --- */
.hero h1 .fs{font-size:.8em}

/* --- anchor targets clear the fixed header --- */
section[id]{scroll-margin-top:88px}