/* ==========================================================================
   HINDOLO POWER PRIVATE LIMITED — Design System
   Renewable Energy · Solar · Wind · Unmanned Aerial Systems
   ========================================================================== */

/* ---------- Fonts (self-hosted, no external requests) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/inter-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/inter-latin-900-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2')}

/* ---------- Tokens ---------- */
:root{
  --bg:#08090A;
  --bg-1:#0C0E0F;
  --bg-2:#121516;
  --bg-3:#191D1E;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --fg:#F3F5F4;
  --fg-2:#B9C1BE;
  --fg-3:#7C8683;
  --fg-4:#525B58;
  --green:#6DBE45;
  --green-2:#8FD46B;
  --green-deep:#2E7D32;
  --green-dark:#14301A;
  --amber:#C9A227;
  --danger:#E0553D;
  --glow:rgba(109,190,69,.28);

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --max:1440px;
  --gut:clamp(20px,4.2vw,72px);
  --rad:2px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --nav-h:74px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,h5,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--green);color:#04140A}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sec{position:relative;padding-block:clamp(72px,10vw,150px)}
.sec--tight{padding-block:clamp(52px,6vw,92px)}
.sec--flush{padding-block:0}
.rule{height:1px;background:var(--line);border:0;margin:0}

.grid{display:grid;gap:clamp(18px,2.2vw,32px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-12{grid-template-columns:repeat(12,1fr)}

/* ---------- Type ---------- */
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}

.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);
  margin-bottom:24px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--green);flex:none}
.eyebrow--plain::before{display:none}

.display{
  font-size:clamp(2.6rem,7.4vw,6.4rem);
  line-height:.94;font-weight:800;letter-spacing:-.038em;
  text-transform:uppercase;
}
.h1{font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1;font-weight:800;letter-spacing:-.035em;text-transform:uppercase}
.h2{font-size:clamp(1.75rem,3.6vw,3.1rem);line-height:1.04;font-weight:800;letter-spacing:-.03em;text-transform:uppercase}
.h3{font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.2;font-weight:700;letter-spacing:-.022em}
.h4{font-size:1.02rem;line-height:1.3;font-weight:600;letter-spacing:-.015em}

.lead{font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.62;color:var(--fg-2);max-width:62ch}
.body{color:var(--fg-2);line-height:1.68}
.small{font-size:.875rem;line-height:1.6;color:var(--fg-3)}
.dim{color:var(--fg-3)}
.accent{color:var(--green)}
.measure{max-width:66ch}
.measure-sm{max-width:52ch}

/* ---------- Buttons ---------- */
.btn{
  --bh:#0B0D0D;
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:15px 26px;border:1px solid var(--line-2);border-radius:var(--rad);
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg);background:transparent;overflow:hidden;
  transition:color .4s var(--ease),border-color .4s var(--ease);
  cursor:pointer;
}
.btn::after{
  content:"";position:absolute;inset:0;background:var(--green);z-index:0;
  transform:scaleX(0);transform-origin:right;
  transition:transform .55s var(--ease);
}
.btn>*{position:relative;z-index:1}
.btn:hover{color:#04140A;border-color:var(--green)}
.btn:hover::after{transform:scaleX(1);transform-origin:left}
.btn__ar{width:14px;height:9px;flex:none}
.btn--solid{background:var(--green);border-color:var(--green);color:#04140A}
.btn--solid::after{background:var(--fg)}
.btn--solid:hover{color:#08090A;border-color:var(--fg)}
.btn--ghost{border-color:var(--line)}
.btn--sm{padding:11px 18px;font-size:10px}
.btn--full{width:100%;justify-content:center}

.link-ar{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg);padding-bottom:6px;border-bottom:1px solid var(--line-2);
  transition:color .3s var(--ease),border-color .3s var(--ease),gap .3s var(--ease);
}
.link-ar:hover{color:var(--green);border-color:var(--green);gap:16px}

/* ---------- Navigation ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:var(--nav-h);
  display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease),border-color .5s var(--ease),height .4s var(--ease),backdrop-filter .5s var(--ease);
}
.nav.is-stuck{
  background:rgba(8,9,10,.82);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--line);
  height:64px;
}
.nav__in{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);display:flex;align-items:center;justify-content:space-between;gap:24px}
/* Logo lockup: the H mark as artwork, the name as live text so it stays
   legible at 30px where a full raster logo would turn to mush. */
.lockup{display:flex;align-items:center;gap:11px;flex:none;line-height:1}
.lockup__mark{height:34px;width:auto;flex:none;transition:height .4s var(--ease)}
.lockup__word{display:flex;flex-direction:column;gap:2px}
.lockup__word b{
  font-size:15px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--fg);
}
.lockup__word i{
  font-style:normal;font-family:var(--mono);font-size:8.5px;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--green);
}
.nav__logo{flex:none}
.nav.is-stuck .lockup__mark{height:29px}
.footer__logo .lockup__mark{height:52px}
.footer__logo .lockup__word b{font-size:22px}
.footer__logo .lockup__word i{font-size:11px;letter-spacing:.36em}
.loader__in .lockup__mark{height:62px}
.loader__in .lockup__word b{font-size:26px}
.loader__in .lockup__word i{font-size:12px;letter-spacing:.38em}
@media (max-width:560px){
  .lockup__mark{height:28px}
  .lockup__word b{font-size:13px}
  .lockup__word i{font-size:7.5px;letter-spacing:.28em}
}
.nav__menu{display:flex;align-items:center;gap:2px}
.nav__link{
  position:relative;padding:10px 15px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-2);transition:color .3s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:15px;right:15px;bottom:2px;height:1px;background:var(--green);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.nav__link:hover{color:var(--fg)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1);transform-origin:left}
.nav__link.is-active{color:var(--fg)}
.nav__cta{display:flex;align-items:center;gap:14px;flex:none}
.nav__burger{display:none;width:44px;height:44px;position:relative;flex:none;margin-right:-10px}
.nav__burger span{position:absolute;left:11px;width:22px;height:1.5px;background:var(--fg);transition:transform .45s var(--ease),opacity .3s var(--ease)}
.nav__burger span:nth-child(1){top:18px}
.nav__burger span:nth-child(2){top:25px}
body.menu-open .nav__burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.menu-open .nav__burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:890;background:var(--bg);
  padding:calc(var(--nav-h) + 28px) var(--gut) 40px;
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease);
  pointer-events:none;
}
body.menu-open .drawer{clip-path:inset(0 0 0 0);pointer-events:auto}
.drawer__nav{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.drawer__link{
  display:flex;align-items:baseline;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--line);
  font-size:clamp(1.5rem,7vw,2.2rem);font-weight:800;letter-spacing:-.03em;text-transform:uppercase;
  opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s var(--ease);
}
.drawer__link:hover{color:var(--green)}
.drawer__link i{font-family:var(--mono);font-size:10px;font-style:normal;color:var(--fg-4);letter-spacing:.1em}
body.menu-open .drawer__link{opacity:1;transform:none}
body.menu-open .drawer__link:nth-child(1){transition-delay:.16s}
body.menu-open .drawer__link:nth-child(2){transition-delay:.22s}
body.menu-open .drawer__link:nth-child(3){transition-delay:.28s}
body.menu-open .drawer__link:nth-child(4){transition-delay:.34s}
body.menu-open .drawer__link:nth-child(5){transition-delay:.40s}
body.menu-open .drawer__link:nth-child(6){transition-delay:.46s}
.drawer__foot{display:flex;flex-direction:column;gap:10px;padding-top:22px}
.drawer__foot a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--fg-3)}
.drawer__foot a:hover{color:var(--green)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media canvas,.hero__media video{width:100%;height:100%;object-fit:cover;display:block}
.hero__video{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease)}
.hero__video.is-ready{opacity:.55}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 80% at 70% 15%,transparent 0%,rgba(8,9,10,.35) 55%,rgba(8,9,10,.9) 100%),
    linear-gradient(180deg,rgba(8,9,10,.86) 0%,rgba(8,9,10,.18) 34%,rgba(8,9,10,.72) 78%,var(--bg) 100%);
}
.hero__in{width:100%;max-width:var(--max);margin-inline:auto;padding:0 var(--gut) clamp(40px,6vw,76px)}
.hero__title{margin-bottom:26px}
.hero__title span{display:block;overflow:hidden}
.hero__title span>i{display:block;font-style:normal;transform:translateY(105%)}
.hero__meta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px;padding-top:30px;border-top:1px solid var(--line)}
.hero__stats{display:flex;flex-wrap:wrap;gap:clamp(26px,4vw,58px)}
.hero__stat b{display:block;font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:800;letter-spacing:-.03em;line-height:1;margin-bottom:7px}
.hero__stat>span{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-3)}
.hero__scroll{
  position:absolute;left:var(--gut);bottom:24px;z-index:3;
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-4);
}
.hero__scroll::after{content:"";width:1px;height:26px;background:linear-gradient(180deg,var(--green),transparent);animation:scrollpulse 2.2s var(--ease-io) infinite}
@keyframes scrollpulse{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Page hero (interior) */
.phero{position:relative;padding-top:calc(var(--nav-h) + clamp(52px,9vw,110px));padding-bottom:clamp(44px,6vw,86px);overflow:hidden;isolation:isolate}
.phero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(90% 120% at 78% 0%,rgba(109,190,69,.10),transparent 62%);
}
.phero__grid{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(28px,4vw,64px);align-items:end}
.phero .display,.phero .h1{margin-bottom:22px}

/* ---------- Divisions (home) ---------- */
.divisions{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.division{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(400px,52vw,560px);
  padding:clamp(24px,2.6vw,38px);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;isolation:isolate;cursor:pointer;
  background:var(--bg-1);
  transition:background .6s var(--ease);
  text-align:left;width:100%;
}
.division:hover{background:var(--bg-2)}
.division__art{position:absolute;inset:0;z-index:-2;opacity:.88;transition:opacity .8s var(--ease),transform 1.1s var(--ease)}
.division:hover .division__art{opacity:1;transform:scale(1.05)}
.division__art canvas{width:100%;height:100%}
.division::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,9,10,0) 0%,rgba(8,9,10,.12) 38%,rgba(8,9,10,.72) 68%,rgba(8,9,10,.96) 100%);
}
.division__idx{
  position:absolute;top:clamp(20px,2.4vw,32px);left:clamp(24px,2.6vw,38px);
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--fg-4);
}
.division__tag{
  position:absolute;top:clamp(20px,2.4vw,32px);right:clamp(24px,2.6vw,38px);
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);border:1px solid rgba(109,190,69,.4);padding:5px 9px;border-radius:99px;
  background:rgba(109,190,69,.07);
}
.division__title{font-size:clamp(1.5rem,2.5vw,2.15rem);font-weight:800;letter-spacing:-.032em;line-height:1.02;text-transform:uppercase;margin-bottom:12px}
.division__desc{color:var(--fg-2);font-size:.93rem;line-height:1.6;max-width:40ch;margin-bottom:20px}
.division__list{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}
.division__list li{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);border:1px solid var(--line);padding:5px 9px;border-radius:2px}
.division__acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.division__enq{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);padding:11px 15px;border:1px solid rgba(109,190,69,.35);border-radius:2px;
  background:rgba(109,190,69,.06);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.division__enq:hover{background:var(--green);color:#04140A;border-color:var(--green)}
.division__hint{
  position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.division:hover .division__hint{transform:scaleX(1)}

/* ---------- Sticky scroll scene ---------- */
.scene{position:relative}
.scene__pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.scene__canvas{position:absolute;inset:0}
.scene__canvas canvas{width:100%!important;height:100%!important;display:block}
.scene__vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(75% 65% at 50% 50%,transparent 30%,rgba(8,9,10,.55) 78%,rgba(8,9,10,.92) 100%)}
.scene__hud{position:absolute;inset:0;pointer-events:none}
.scene__hud .wrap{height:100%;display:flex;flex-direction:column;justify-content:space-between;padding-block:clamp(80px,11vh,130px)}
.scene__spacer{height:340vh}
.scene__spacer--short{height:240vh}

.step{
  position:absolute;left:var(--gut);bottom:clamp(80px,11vh,120px);
  max-width:min(430px,42vw);
  opacity:0;transform:translateY(24px);
  pointer-events:none;
}
.step__n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--green);margin-bottom:12px;display:block}
.step__t{font-size:clamp(1.25rem,2.1vw,1.8rem);font-weight:800;letter-spacing:-.028em;text-transform:uppercase;line-height:1.05;margin-bottom:12px}
.step__d{font-size:.92rem;line-height:1.62;color:var(--fg-2)}

.readout{
  position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:1px;min-width:216px;
  border:1px solid var(--line);background:rgba(8,9,10,.55);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.readout__row{display:flex;justify-content:space-between;gap:20px;padding:11px 15px;border-bottom:1px solid var(--line)}
.readout__row:last-child{border-bottom:0}
.readout__row dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-4)}
.readout__row dd{margin:0;font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--fg);letter-spacing:.04em}
.readout__row dd b{color:var(--green);font-weight:500}

/* ---------- Cards / products ---------- */
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.card{
  position:relative;background:var(--bg);padding:clamp(22px,2.4vw,34px);
  display:flex;flex-direction:column;gap:14px;min-height:220px;
  transition:background .5s var(--ease);
  overflow:hidden;
}
.card:hover{background:var(--bg-2)}
.card__n{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--fg-4)}
.card__t{font-size:1.06rem;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.card__d{font-size:.9rem;line-height:1.62;color:var(--fg-3);flex:1}
.card__ico{width:34px;height:34px;color:var(--green);margin-bottom:4px}
.card__ico svg{width:100%;height:100%}

/* Product card with image + specs */
.pcard{
  position:relative;background:var(--bg-1);border:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .5s var(--ease),transform .6s var(--ease),background .5s var(--ease);
}
.pcard:hover{border-color:var(--line-2);background:var(--bg-2)}
.pcard__media{
  position:relative;aspect-ratio:16/11;overflow:hidden;background:
    radial-gradient(70% 70% at 50% 42%,rgba(109,190,69,.09),transparent 68%),var(--bg-2);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.pcard__media img{width:100%;height:100%;object-fit:contain;padding:9%;transition:transform 1s var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.07) rotate(-1.2deg)}
.pcard__media svg{width:78%;height:78%}
.pcard__badge{
  position:absolute;top:12px;left:12px;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 9px;border:1px solid var(--line-2);background:rgba(8,9,10,.7);color:var(--fg-2);border-radius:2px;
}
.pcard__body{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:12px;flex:1}
.pcard__t{font-size:1.12rem;font-weight:700;letter-spacing:-.022em}
.pcard__d{font-size:.875rem;line-height:1.6;color:var(--fg-3);flex:1}
.pcard__specs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2px}
.pcard__spec{background:var(--bg-1);padding:9px 11px}
.pcard:hover .pcard__spec{background:var(--bg-2)}
.pcard__spec dt{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-4);margin-bottom:3px}
.pcard__spec dd{margin:0;font-size:.82rem;font-weight:600;color:var(--fg);letter-spacing:-.01em}
.pcard__foot{display:flex;gap:10px;align-items:center;padding-top:4px;margin-top:auto}

/* Spec table */
.spectbl{border:1px solid var(--line);background:var(--bg-1)}
.spectbl caption{
  text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--fg-3);
}
.spectbl th,.spectbl td{padding:12px 20px;text-align:left;font-size:.875rem;border-bottom:1px solid var(--line);vertical-align:top}
.spectbl tr:last-child th,.spectbl tr:last-child td{border-bottom:0}
.spectbl th{width:44%;font-weight:500;color:var(--fg-3);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.spectbl td{color:var(--fg);font-weight:500}
.spectbl tr{transition:background .3s var(--ease)}
.spectbl tbody tr:hover{background:var(--bg-2)}

/* Feature chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 11px;border:1px solid var(--line);border-radius:2px;color:var(--fg-3);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.chip:hover{border-color:var(--green);color:var(--green)}
.chip--on{color:var(--green);border-color:rgba(109,190,69,.4);background:rgba(109,190,69,.06)}

/* Stat band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
.stat{background:var(--bg);padding:clamp(24px,3vw,42px) clamp(18px,2vw,30px)}
.stat b{display:block;font-size:clamp(2rem,3.6vw,3.2rem);font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:10px}
.stat>span{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-3)}

/* Split feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,84px);align-items:center}
.split--wide{grid-template-columns:1.1fr .9fr}
.split__media{position:relative;aspect-ratio:4/3;border:1px solid var(--line);background:var(--bg-1);overflow:hidden}
.split__media canvas,.split__media img{width:100%;height:100%;object-fit:cover}

/* Timeline / process */
.steps{border-top:1px solid var(--line)}
.stepline{display:grid;grid-template-columns:96px 1fr 1.2fr;gap:clamp(16px,3vw,44px);padding:clamp(22px,3vw,38px) 0;border-bottom:1px solid var(--line);align-items:start;transition:background .4s var(--ease)}
.stepline:hover{background:var(--bg-1)}
.stepline__n{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--green);padding-top:5px}
.stepline__t{font-size:clamp(1.05rem,1.7vw,1.4rem);font-weight:700;letter-spacing:-.024em}
.stepline__d{color:var(--fg-3);font-size:.92rem;line-height:1.65}

/* Marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:20px;background:var(--bg-1)}
.marquee__track{display:flex;gap:56px;width:max-content;will-change:transform}
.marquee__item{
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap;
}
.marquee__item::before{content:"";width:5px;height:5px;background:var(--green);border-radius:50%;flex:none}

/* CTA band */
.cta{position:relative;overflow:hidden;isolation:isolate;border-top:1px solid var(--line)}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 130% at 50% 100%,rgba(109,190,69,.14),transparent 66%)}
.cta__in{padding-block:clamp(64px,9vw,128px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);background:var(--bg-1)}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(26px,3vw,52px);padding-block:clamp(46px,6vw,80px)}
.footer__logo{margin-bottom:20px}
.footer h5{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-4);margin-bottom:18px;font-weight:500}
.footer__list li{margin-bottom:11px}
.footer__list a{font-size:.9rem;color:var(--fg-2);transition:color .3s var(--ease)}
.footer__list a:hover{color:var(--green)}
.footer__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;
  padding-block:22px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--fg-4);text-transform:uppercase;
}
.socials{display:flex;gap:9px}
.social{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:2px;color:var(--fg-3);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.social:hover{color:#04140A;background:var(--green);border-color:var(--green)}
.social svg{width:16px;height:16px}

/* ---------- Enquiry modal ---------- */
.modal{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  padding:20px;visibility:hidden;opacity:0;
  transition:opacity .5s var(--ease),visibility .5s var(--ease);
}
.modal.is-open{visibility:visible;opacity:1}
.modal__bd{position:absolute;inset:0;background:rgba(4,5,6,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.modal__panel{
  position:relative;width:min(600px,100%);max-height:min(88svh,760px);overflow-y:auto;
  background:var(--bg-1);border:1px solid var(--line-2);
  padding:clamp(26px,3.4vw,44px);
  transform:translateY(28px) scale(.985);
  transition:transform .6s var(--ease);
}
.modal.is-open .modal__panel{transform:none}
.modal__close{
  position:absolute;top:14px;right:14px;width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--fg-3);border-radius:2px;
  transition:color .3s,border-color .3s,transform .4s var(--ease);
}
.modal__close:hover{color:var(--fg);border-color:var(--line-2);transform:rotate(90deg)}
.modal__title{font-size:clamp(1.3rem,2.4vw,1.85rem);font-weight:800;letter-spacing:-.03em;text-transform:uppercase;line-height:1.05;margin-bottom:10px}
.modal__sub{color:var(--fg-3);font-size:.9rem;margin-bottom:24px;line-height:1.6}

/* ---------- Forms ---------- */
.form{display:grid;gap:16px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-3)}
.field label span{color:var(--green)}
.field input,.field textarea,.field select{
  width:100%;padding:13px 15px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--rad);color:var(--fg);
  font-size:.92rem;transition:border-color .3s var(--ease),background .3s var(--ease);
  appearance:none;-webkit-appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237C8683' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:11px;padding-right:40px;
}
.field textarea{resize:vertical;min-height:118px;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--green);background:var(--bg-3)}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-4)}
.form__note{font-size:.78rem;color:var(--fg-4);line-height:1.55}
.form__note a{color:var(--fg-3);border-bottom:1px solid var(--line-2)}
.form__note a:hover{color:var(--green);border-color:var(--green)}
.form__msg{
  display:none;padding:13px 16px;border:1px solid var(--line);border-radius:2px;
  font-size:.86rem;line-height:1.55;
}
.form__msg.is-ok{display:block;border-color:rgba(109,190,69,.4);background:rgba(109,190,69,.08);color:var(--green-2)}
.form__msg.is-err{display:block;border-color:rgba(224,85,61,.4);background:rgba(224,85,61,.08);color:#F2A493}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- Contact blocks ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:start}
.cblock{border:1px solid var(--line);padding:clamp(20px,2.4vw,30px);background:var(--bg-1);transition:border-color .4s var(--ease)}
.cblock:hover{border-color:var(--line-2)}
.cblock h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-4);margin-bottom:12px;font-weight:500}
.cblock a{font-size:1rem;font-weight:600;letter-spacing:-.015em;color:var(--fg);transition:color .3s}
.cblock a:hover{color:var(--green)}
.cblock p{color:var(--fg-2);font-size:.92rem;line-height:1.6}

/* ---------- Accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:22px 0;text-align:left;
  font-size:clamp(1rem,1.55vw,1.28rem);font-weight:700;letter-spacing:-.022em;
  transition:color .3s var(--ease);
}
.acc__btn:hover{color:var(--green)}
.acc__ico{width:16px;height:16px;flex:none;position:relative}
.acc__ico::before,.acc__ico::after{content:"";position:absolute;background:currentColor;transition:transform .45s var(--ease),opacity .3s}
.acc__ico::before{left:0;top:7.5px;width:16px;height:1.5px}
.acc__ico::after{left:7.25px;top:0;width:1.5px;height:16px}
.acc__item.is-open .acc__ico::after{transform:scaleY(0)}
.acc__item.is-open .acc__btn{color:var(--green)}
.acc__panel{overflow:hidden;height:0;transition:height .55s var(--ease)}
.acc__inner{padding-bottom:26px;color:var(--fg-2);line-height:1.7;max-width:78ch;font-size:.94rem}
.acc__inner ul{display:grid;gap:9px;margin-top:12px}
.acc__inner li{padding-left:20px;position:relative;color:var(--fg-3);font-size:.9rem}
.acc__inner li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;background:var(--green)}

/* ---------- Reveal animation base ---------- */
[data-rv]{opacity:0;transform:translateY(28px);will-change:transform,opacity}
[data-rv="fade"]{transform:none}
[data-rv="left"]{transform:translateX(-32px)}
[data-rv="scale"]{transform:scale(.965)}
.no-js [data-rv]{opacity:1;transform:none}

.split-line{display:block;overflow:hidden}
.split-line>i{display:block;font-style:normal;transform:translateY(102%);will-change:transform}

/* ---------- Progress bar ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--green);z-index:950;pointer-events:none}

/* Loader */
.loader{position:fixed;inset:0;z-index:1200;background:var(--bg);display:grid;place-items:center;transition:opacity .8s var(--ease),visibility .8s}
.loader.is-done{opacity:0;visibility:hidden}
.loader__in{display:flex;flex-direction:column;align-items:center;gap:20px}

.loader__bar{width:180px;height:1px;background:var(--line);overflow:hidden}
.loader__bar i{display:block;height:100%;width:100%;background:var(--green);transform:scaleX(0);transform-origin:left;animation:load 1.1s var(--ease) forwards}
@keyframes load{to{transform:scaleX(1)}}

/* Utilities */
.u-center{text-align:center}
.u-mb-0{margin-bottom:0}
.u-mt-l{margin-top:clamp(30px,4vw,54px)}
.u-mt-m{margin-top:clamp(20px,2.6vw,34px)}
.u-mt-s{margin-top:16px}
.flexbtns{display:flex;flex-wrap:wrap;gap:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.head-2col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(34px,4.4vw,60px)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .divisions{grid-template-columns:1fr}
  .division{min-height:440px}
  /* Stacked cards are shorter, so the copy sits over the scene. Show the
     motion in the top third and darken hard behind the words. */
  .division::before{
    background:linear-gradient(180deg,rgba(8,9,10,0) 0%,rgba(8,9,10,.22) 24%,
      rgba(8,9,10,.86) 48%,rgba(8,9,10,.97) 100%);
  }
  .cards--4{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr 1fr}
  .phero__grid{grid-template-columns:1fr;gap:24px;align-items:start}
  .readout{display:none}
}
@media (max-width:900px){
  :root{--nav-h:64px}
  .nav__menu{display:none}
  .nav__cta .btn{display:none}
  .nav__burger{display:block}
  /* Product grids are handled by the view switcher block further down.
     Plain feature cards sit two to a row on a phone instead of one, which
     halves the length of the pages they appear on. */
  .cards--3:not(.pgrid),.cards--2:not(.pgrid){grid-template-columns:repeat(2,1fr)}
  .cards:not(.pgrid) .card{padding:16px 14px 18px;gap:8px}
  .cards:not(.pgrid) .card__t{font-size:.92rem;line-height:1.2}
  .cards:not(.pgrid) .card__d{font-size:.8rem;line-height:1.5}
  .cards:not(.pgrid) .card__ico{width:26px;height:26px}
  .cards:not(.pgrid) .card .btn{padding:9px 12px;font-size:9px;letter-spacing:.1em}
  .g-3,.g-4,.g-2{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .split,.split--wide,.contact-grid,.head-2col{grid-template-columns:1fr;gap:28px}
  .stepline{grid-template-columns:1fr;gap:10px}
  .stepline__n{padding-top:0}
  .step{max-width:none;right:var(--gut);bottom:clamp(56px,9vh,90px)}
  .scene__spacer{height:280vh}
  .scene__spacer--short{height:200vh}
  .hero__meta{flex-direction:column;align-items:flex-start;gap:22px}
  .form__row{grid-template-columns:1fr}
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .pcard__specs{grid-template-columns:1fr}
  .hero__stats{gap:22px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1!important;transform:none!important}
  .split-line>i,.hero__title span>i{transform:none!important}
}

/* Print */
@media print{
  .nav,.drawer,.progress,.loader,.modal,.hero__media,.scene__canvas{display:none!important}
  body{background:#fff;color:#000}
}

/* ---------- Photo gallery strip ---------- */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.gfig{
  position:relative;margin:0;background:var(--bg-1);
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  overflow:hidden;transition:background .5s var(--ease);
}
.gfig::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(64% 64% at 50% 46%,rgba(109,190,69,.10),transparent 70%);
  opacity:0;transition:opacity .6s var(--ease);
}
.gfig:hover{background:var(--bg-2)}
.gfig:hover::before{opacity:1}
.gfig img{width:100%;height:100%;object-fit:contain;padding:12%;transition:transform 1s var(--ease)}
.gfig:hover img{transform:scale(1.09)}
.gfig figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:10px 12px;
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-3);background:linear-gradient(180deg,transparent,rgba(8,9,10,.9));
  opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.gfig:hover figcaption{opacity:1;transform:none}
@media (max-width:900px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* ==========================================================================
   Blurred cinematic backdrops
   A moving scene sits behind the words, blurred and dimmed so it reads as
   atmosphere. The copy stays the sharpest thing on screen.
   ========================================================================== */
.hasbg{position:relative;isolation:isolate;overflow:hidden}
.bgscene{
  position:absolute;inset:-8%;z-index:-2;pointer-events:none;
  filter:blur(12px) saturate(1.12);
  opacity:.62;
  transform:scale(1.06);
}
.bgscene canvas,.bgscene video{width:100%;height:100%;object-fit:cover;display:block}
.bgscene video{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease)}
.bgscene video.is-ready{opacity:1}
.bgscene--soft{opacity:.44;filter:blur(16px) saturate(1.08)}
.hasbg::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(78% 66% at 24% 46%,rgba(8,9,10,.93) 0%,rgba(8,9,10,.62) 52%,rgba(8,9,10,.2) 100%),
    linear-gradient(180deg,var(--bg) 0%,rgba(8,9,10,.34) 18%,rgba(8,9,10,.34) 82%,var(--bg) 100%);
}
@media (max-width:900px){
  .bgscene{opacity:.4;filter:blur(14px)}
  .hasbg::before{background:linear-gradient(180deg,var(--bg) 0%,rgba(8,9,10,.78) 20%,rgba(8,9,10,.78) 80%,var(--bg) 100%)}
}
@media (prefers-reduced-motion:reduce){.bgscene{display:none}}

/* ==========================================================================
   Defence gateway — one block, no published specifications
   ========================================================================== */
.defgate{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,66px);
  border:1px solid var(--line-2);background:var(--bg-1);
  padding:clamp(26px,3.6vw,58px);position:relative;overflow:hidden;
}
.defgate::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--green),transparent 70%);
}
.defgate__head .eyebrow{margin-bottom:18px}
.defgate__head .h2{margin-bottom:20px}
.defgate__head .lead{margin-bottom:16px;max-width:46ch}
.defgate__head .small{max-width:46ch}
.defgate__grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);align-self:start;border:1px solid var(--line)}
.defgate__item{background:var(--bg-1);padding:16px 18px;transition:background .4s var(--ease)}
.defgate__item:hover{background:var(--bg-2)}
.defgate__item h4{font-size:.92rem;font-weight:700;letter-spacing:-.018em;margin-bottom:5px}
.defgate__item p{font-size:.78rem;line-height:1.5;color:var(--fg-4)}
@media (max-width:1000px){.defgate{grid-template-columns:1fr}}
@media (max-width:560px){.defgate__grid{grid-template-columns:1fr}}

/* ==========================================================================
   Made-in-India components programme
   ========================================================================== */
.mii{
  position:relative;margin-top:clamp(30px,4vw,54px);
  border:1px solid rgba(109,190,69,.3);background:
    radial-gradient(80% 130% at 8% 0%,rgba(109,190,69,.10),transparent 62%),var(--bg-1);
  padding:clamp(24px,3.2vw,48px);overflow:hidden;
}
.mii__body{max-width:64ch}
.mii__flag{display:inline-flex;gap:3px;margin-bottom:16px}
.mii__flag i{display:block;width:16px;height:4px;border-radius:1px}
.mii__t{font-size:clamp(1.3rem,2.4vw,1.95rem);font-weight:800;letter-spacing:-.03em;text-transform:uppercase;line-height:1.05;margin-bottom:14px}
.mii__d{color:var(--fg-2);line-height:1.65;font-size:.98rem}

/* ==========================================================================
   Leadership — names and designations only
   ========================================================================== */
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.person{
  background:var(--bg);padding:clamp(18px,2vw,26px);
  display:flex;align-items:center;gap:18px;transition:background .45s var(--ease);
}
.person:hover{background:var(--bg-2)}
.person__i{
  flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-2);
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--green);
  background:rgba(109,190,69,.06);
}
.person__n{font-size:1.02rem;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.person__r{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-top:5px}
@media (max-width:760px){.people{grid-template-columns:1fr}}

/* ==========================================================================
   Motion blur while scrolling (phones and tablets)
   --------------------------------------------------------------------------
   A fixed, click-through sheet that blurs whatever is painted behind it.
   It sits BELOW the menu bar, so the menu stays sharp. The blur amount is
   driven from assets/js/site.js by how fast the page is moving, and drops
   to nothing the moment scrolling stops, so nothing is slowed down at rest.
   To switch this off entirely: open assets/js/site.js and set
   MOTION_BLUR_ON_MOBILE to false.
   ========================================================================== */
.mblur{
  position:fixed;inset:-2px;z-index:880;pointer-events:none;
  opacity:0;transition:opacity .18s linear;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  will-change:backdrop-filter,opacity;
}
.mblur.is-on{opacity:1}

/* ==========================================================================
   Drone cursor (mouse and trackpad only — never on touch screens)
   --------------------------------------------------------------------------
   A small top-view drone that flies after the pointer, rotors spinning,
   smearing into a motion blur as it accelerates. A precise dot stays exactly
   under the pointer so clicking is never off-target.
   To switch this off entirely: open assets/js/site.js and set
   DRONE_CURSOR to false.
   ========================================================================== */
.dcur{
  position:fixed;top:0;left:0;z-index:1500;pointer-events:none;
  width:46px;height:46px;margin:-23px 0 0 -23px;
  opacity:0;transition:opacity .35s var(--ease);
  will-change:transform;
}
.dcur.is-live{opacity:1}
.dcur__blur{width:100%;height:100%;will-change:filter}
.dcur__spin{
  width:100%;height:100%;
  animation:dcur-yaw 9s linear infinite;
  transition:transform .3s var(--ease);
}
.dcur svg{display:block;width:100%;height:100%;overflow:visible}
.dcur__rotor{transform-box:fill-box;transform-origin:50% 50%;animation:dcur-rotor .22s linear infinite}
.dcur__rotor--b{animation-duration:.19s;animation-direction:reverse}

@keyframes dcur-yaw{to{transform:rotate(360deg)}}
@keyframes dcur-rotor{to{transform:rotate(360deg)}}

.dcur-dot{
  position:fixed;top:0;left:0;z-index:1501;pointer-events:none;
  width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:var(--green);box-shadow:0 0 10px rgba(109,190,69,.75);
  opacity:0;transition:opacity .35s var(--ease),width .25s var(--ease),
                       height .25s var(--ease),margin .25s var(--ease);
  will-change:transform;
}
.dcur-dot.is-live{opacity:1}
/* over a link or button the drone opens out and the dot becomes a ring */
.dcur.is-hot .dcur__spin{transform:scale(1.34)}
.dcur-dot.is-hot{
  width:16px;height:16px;margin:-8px 0 0 -8px;
  background:transparent;border:1.5px solid var(--green);
  box-shadow:0 0 14px rgba(109,190,69,.45);
}

/* hide the arrow only while the drone is actually flying */
html.has-dcur,html.has-dcur *{cursor:none}
/* text fields keep a real caret so typing stays easy */
html.has-dcur input,html.has-dcur textarea,html.has-dcur select,
html.has-dcur [contenteditable]{cursor:auto}

@media (prefers-reduced-motion:reduce){
  .mblur{display:none}
  .dcur,.dcur-dot{display:none}
  html.has-dcur,html.has-dcur *{cursor:auto}
}
@media (hover:none),(pointer:coarse){.dcur,.dcur-dot{display:none}}

/* ==========================================================================
   MOBILE PRODUCT BROWSING — grid / list switcher
   --------------------------------------------------------------------------
   On a phone the full product cards were nearly a screen each, which made the
   drones page enormously long. On phones and tablets the same cards collapse
   to a compact tile showing the picture, the name and one headline figure.
   Tapping a tile opens it in place with the full description, the complete
   specification table and the Enquire button — nothing is lost, it is just
   folded away until asked for.

   The switcher above each set of products offers Grid and List. Nothing here
   affects the desktop layout, which is unchanged.

   To change how many products sit in a row on a phone, edit --pcols below.
   ========================================================================== */
.pview{display:none}
.pcard__key{display:none}

@media (max-width:900px){

  /* ---- the switcher itself ---- */
  .pview{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;margin:0 0 12px;
  }
  .pview__n{
    font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--fg-4);
  }
  .pview__set{display:flex;border:1px solid var(--line);background:var(--bg-1)}
  .pview__b{
    display:flex;align-items:center;gap:6px;padding:8px 12px;
    font-family:var(--mono);font-size:9.5px;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);
    transition:color .3s var(--ease),background .3s var(--ease);
  }
  .pview__b+.pview__b{border-left:1px solid var(--line)}
  .pview__b svg{width:12px;height:12px;flex:none}
  .pview__b[aria-pressed="true"]{background:var(--green);color:#04140A}

  /* ---- how many products sit in a row ---- */
  .pgrid{--pcols:3}
  .pgrid.is-grid{grid-template-columns:repeat(var(--pcols),1fr)}
  .pgrid.is-list{grid-template-columns:1fr}

  /* ---- compact tile, shared by both modes ---- */
  .pgrid .pcard{cursor:pointer}
  .pgrid .pcard__d,
  .pgrid .pcard__specs,
  .pgrid .pcard__chips,
  .pgrid .pcard__body > .chips,
  .pgrid .pcard__foot{display:none}
  .pgrid .pcard__key{
    display:block;font-family:var(--mono);font-size:9px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--green);line-height:1.35;
  }

  /* ---- GRID mode ---- */
  .pgrid.is-grid .pcard__media{aspect-ratio:4/3}
  .pgrid.is-grid .pcard__media svg{width:88%;height:88%}
  .pgrid.is-grid .pcard__media img{padding:7%}
  .pgrid.is-grid .pcard__badge{
    top:5px;left:5px;font-size:7px;padding:2px 4px;letter-spacing:.06em;border-radius:1px;
  }
  .pgrid.is-grid .pcard__body{padding:8px 8px 10px;gap:4px}
  .pgrid.is-grid .pcard__t{font-size:.8rem;line-height:1.15}

  /* ---- LIST mode ---- */
  .pgrid.is-list .pcard{flex-direction:row;align-items:stretch}
  .pgrid.is-list .pcard__media{
    flex:none;width:96px;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line);
  }
    .pgrid.is-list .pcard__badge{display:none}
  .pgrid.is-list .pcard__media svg{width:76%;height:76%}
  .pgrid.is-list .pcard__body{padding:13px 15px;gap:5px;justify-content:center}
  .pgrid.is-list .pcard__t{font-size:.98rem}
  .pgrid.is-list .pcard__key{font-size:9.5px}

  /* ---- a tap opens the product in place, full width ---- */
  .pgrid .pcard.is-open{grid-column:1/-1;flex-direction:column;background:var(--bg-2);border-color:var(--line-2)}
  .pgrid .pcard.is-open .pcard__media{
    width:auto;aspect-ratio:16/11;border-right:0;border-bottom:1px solid var(--line);
  }
  .pgrid .pcard.is-open .pcard__media svg{width:66%;height:66%}
  .pgrid .pcard.is-open .pcard__badge{display:block;top:12px;left:12px;font-size:9px;padding:5px 9px;letter-spacing:.14em}
  .pgrid .pcard.is-open .pcard__body{padding:18px;gap:11px}
  .pgrid .pcard.is-open .pcard__t{font-size:1.12rem}
  .pgrid .pcard.is-open .pcard__key{display:none}
  .pgrid .pcard.is-open .pcard__d{display:block;font-size:.86rem}
  .pgrid .pcard.is-open .pcard__body > .chips{display:flex}
  .pgrid .pcard.is-open .pcard__specs{display:grid;grid-template-columns:repeat(2,1fr)}
  .pgrid .pcard.is-open .pcard__foot{display:flex}

  /* ---- the little marker that says "there is more inside" ---- */
  .pgrid .pcard:not(.is-open) .pcard__body::after{
    content:"";position:absolute;right:7px;bottom:7px;
    width:9px;height:9px;opacity:.5;
    background:
      linear-gradient(var(--green),var(--green)) center/9px 1.3px no-repeat,
      linear-gradient(var(--green),var(--green)) center/1.3px 9px no-repeat;
  }
  .pgrid .pcard__body{position:relative}
}

/* Very small phones: two in a row stays readable where three would not. */
@media (max-width:400px){
  .pgrid{--pcols:2}
}