/* V05: round 5 feedback. Loaded after theme.css. */

/* ---------- Ambient light per page, under the contour map (each page has its own map and its own light) ---------- */
.terrain::before{content:"";position:absolute;inset:0;pointer-events:none}
html[data-page="index"] .terrain::before,html[data-page="about"] .terrain::before,html[data-page="products"] .terrain::before,html[data-page="support"] .terrain::before,html[data-page="contact"] .terrain::before{background:radial-gradient(60% 45% at 8% 12%,rgba(147,225,2,.07),transparent 70%),radial-gradient(50% 40% at 95% 85%,rgba(147,225,2,.04),transparent 70%)}
html[data-page="demeter"] .terrain::before{background:radial-gradient(55% 45% at 92% 8%,rgba(255,214,140,.10),transparent 70%),radial-gradient(60% 50% at 5% 95%,rgba(22,137,67,.08),transparent 70%)}
html[data-page="diesel-boss"] .terrain::before{background:radial-gradient(50% 45% at 85% 90%,rgba(147,225,2,.10),transparent 70%),radial-gradient(40% 35% at 10% 10%,rgba(255,255,255,.03),transparent 70%)}
html[data-page="scout"] .terrain::before{background:radial-gradient(70% 45% at 50% 0%,rgba(202,205,210,.08),transparent 70%),radial-gradient(45% 40% at 0% 70%,rgba(122,215,4,.06),transparent 70%)}
html[data-page="demeter"] .terrain .lit{filter:sepia(.25)}

/* ---------- PTx: one green loader, the light runs inside the track and never crosses the words ---------- */
.ptx .was{grid-template-columns:auto minmax(80px,1fr) auto}
.ptx .loader{display:flex;align-items:center;gap:6px;min-width:80px}
.ptx .loader .track{position:relative;flex:1;height:4px;border-radius:4px;overflow:hidden;background:rgba(147,213,0,.28)}
.ptx .loader .track i{position:absolute;top:0;bottom:0;left:0;width:45%;border-radius:4px;background:linear-gradient(90deg,rgba(147,225,2,0),#93E102 70%,#E9FFB8);box-shadow:0 0 8px #93E102,0 0 18px rgba(147,225,2,.8);animation:ld-run 2.2s cubic-bezier(.45,0,.25,1) infinite}
.ptx .loader .head{width:12px;height:20px;flex:none;stroke:#93D500;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.55;animation:ld-head 2.2s cubic-bezier(.45,0,.25,1) infinite}
.ptx .loader{filter:drop-shadow(0 0 0 rgba(147,225,2,0))}
@keyframes ld-run{0%{transform:translateX(-110%)}100%{transform:translateX(230%)}}
@keyframes ld-head{0%,62%{opacity:.55;filter:none}78%{opacity:1;filter:drop-shadow(0 0 6px #93E102) drop-shadow(0 0 12px rgba(147,225,2,.7))}100%{opacity:.55;filter:none}}
html[data-mode="light"]:not([data-theme="sub"]) .ptx .loader .track{background:rgba(110,170,0,.30)}
html[data-mode="light"]:not([data-theme="sub"]) .ptx .loader .head{stroke:#6FA800}
@media (prefers-reduced-motion:reduce){.ptx .loader .track i,.ptx .loader .head{animation:none}.ptx .loader .track i{width:100%;transform:none}}
@media (max-width:640px){.ptx .was{grid-template-columns:1fr}.ptx .loader{width:140px}}

/* ---------- Built in-house: three chapters, three grounds ---------- */
.inhouse .sec-head{max-width:52rem}
.chapter{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;min-height:clamp(520px,44vw,640px);border-radius:28px;margin-top:22px;isolation:isolate;overflow:hidden}
.chapter .ch-copy{position:relative;z-index:2;padding:clamp(28px,4.5vw,72px);display:grid;gap:18px;align-content:center;max-width:36rem}
.chapter h3{font-family:var(--body);font-weight:600;font-size:clamp(1.6rem,2.6vw,2.35rem);line-height:1.08;letter-spacing:-.03em;text-transform:none;text-wrap:balance}
.chapter p{font-size:1.02rem;line-height:1.6;max-width:32em}
.chapter .ch-logo{height:42px;width:auto}
.chapter .ch-art{margin:0;position:relative;z-index:1;height:100%}
.chapter .ch-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}

/* Demeter: daylight. Pale sky to dry land, crop rows running to the horizon, the machine standing on the ground line. */
.ch-demeter{background:linear-gradient(180deg,#EEF3F0 0%,#E7EDE7 54%,#DCD6C4 54.2%,#E9E3D1 100%);color:#16201A}
.ch-demeter .ch-ground{position:absolute;inset:0;z-index:0;overflow:hidden}
.ch-demeter .ch-ground .rows{position:absolute;left:-20%;right:-20%;top:54%;bottom:-40%;background:repeating-linear-gradient(90deg,rgba(22,137,67,.11) 0 1.5px,transparent 1.5px 38px);transform:perspective(260px) rotateX(64deg);transform-origin:50% 0}
.ch-demeter .ch-ground::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 80% 20%,rgba(255,255,255,.7),transparent 70%)}
.ch-demeter p{color:#3A463F}
.ch-demeter .ch-figs{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:clamp(18px,3vw,40px);margin:4px 0 6px;padding-top:16px;border-top:1px solid rgba(22,32,26,.14)}
.ch-demeter .ch-figs dt{font-weight:700;font-size:clamp(1.5rem,2.3vw,2rem);letter-spacing:-.03em;line-height:1;color:#168943}
.ch-demeter .ch-figs dd{margin:6px 0 0;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#5E6A63;font-weight:600}
.ch-demeter .ch-btn{justify-self:start;background:#168943;color:#fff;border-color:#168943;border-radius:0}
.ch-demeter .ch-btn:hover{background:#0F6E35;transform:translateY(-2px)}
.ch-demeter .ch-art{display:flex;align-items:flex-end;justify-content:center}
.ch-demeter .ch-art img{width:100%;max-width:none;height:auto;margin:0 3% 5% -4%;filter:drop-shadow(0 26px 22px rgba(40,34,18,.28))}
.ch-demeter .ch-art::after{content:"";position:absolute;left:4%;right:0;bottom:4%;height:7%;background:radial-gradient(closest-side,rgba(40,34,18,.35),transparent);z-index:-1}

/* Diesel Boss: night. Obsidian, one lime glow behind the unit, an LCD that counts the fill. */
.ch-db{background:#0C0D0D;color:#E8ECE9;grid-template-columns:minmax(0,.95fr) minmax(0,1fr)}
.ch-db .ch-ground{position:absolute;inset:0;z-index:0;background:radial-gradient(42% 60% at 27% 52%,rgba(147,225,2,.16),transparent 70%),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(0deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px}
.ch-db .ch-ground::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 90% at 30% 50%,transparent 40%,#0C0D0D 85%)}
.ch-db .ch-art{display:grid;place-items:center;padding:clamp(18px,3vw,40px) 0}
.ch-db .ch-art picture,.ch-db .ch-art img{display:block;height:min(100%,600px);width:auto;max-width:100%;object-fit:contain}
.ch-db .ch-art img{-webkit-mask-image:radial-gradient(50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(50% 50% at 50% 50%,#000 62%,transparent 100%);background:transparent!important}
.ch-db .ch-copy{padding-left:0}
.ch-db p{color:#AEB5B0}
.ch-db .ch-logo{height:54px}
.ch-lcd{display:inline-grid;grid-template-columns:1fr auto;align-items:end;column-gap:10px;justify-self:start;min-width:250px;padding:12px 16px;border-radius:6px;background:linear-gradient(180deg,#0D2F7A,#0A2563);border:2px solid #93E102;box-shadow:0 0 0 4px #121414,0 0 24px rgba(147,225,2,.18),inset 0 0 18px rgba(0,0,0,.45);font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;color:#CFE3FF;text-shadow:0 0 6px rgba(160,200,255,.6)}
.ch-lcd span{grid-column:1/-1;font-size:.72rem;letter-spacing:.08em;opacity:.8}
.ch-lcd b{font-size:2.3rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.ch-lcd small{font-size:.8rem;padding-bottom:4px}
.ch-lcd.done small{color:#B9FF5E;text-shadow:0 0 8px rgba(147,225,2,.8)}
.ch-db .chip{color:#B9FF5E}

/* Scout: steel. The cap photo bleeds in from the left, graphite and silver, the needle turns on hover. */
.ch-scout{background:radial-gradient(60% 80% at 100% 0%,rgba(202,205,210,.07),transparent 70%),#232829;color:#E8ECE9;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.ch-scout .ch-art picture,.ch-scout .ch-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ch-scout .ch-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 45%,#232829 98%),linear-gradient(0deg,rgba(26,29,29,.55),transparent 35%)}
.ch-scout .ch-copy{padding-left:clamp(16px,2vw,32px)}
.ch-scout p{color:#B4BABC}
.ch-scout .ch-mark{width:84px;height:84px;margin-bottom:-4px;cursor:pointer}
.ch-scout .ch-mark .mark{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 14px rgba(147,225,2,.25))}
.ch-scout .ch-logo{height:38px}
.ch-tiers{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.ch-tiers li{font:600 .72rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#CACDD2;padding:9px 12px;border:1px solid rgba(202,205,210,.28);border-radius:999px}
.ch-scout .chip{color:#B9FF5E}
.chapter .btn-go{background:#93E102;color:#0B1A05;border-color:#93E102;border-radius:var(--btn-radius,999px)}
html[data-mode="light"]:not([data-theme="sub"]) .chapter .btn-go{background:#93E102;color:#0B1A05;border-color:#93E102;border-radius:0}

@media (max-width:900px){
  .chapter,.ch-db,.ch-scout{grid-template-columns:1fr;min-height:0}
  .ch-demeter .ch-art{order:2;margin-top:-10px;padding:0 12px}.ch-demeter .ch-art img{width:100%;margin:0 0 6%}
  .ch-db .ch-art{max-height:420px}.ch-db .ch-copy{padding-left:clamp(24px,5vw,40px);padding-top:0}
  .ch-scout .ch-art{aspect-ratio:16/10}.ch-scout .ch-art::after{background:linear-gradient(0deg,#232829 2%,transparent 45%)}
  .ch-demeter{background:linear-gradient(180deg,#EEF3F0 0%,#E7EDE7 70%,#DCD6C4 70.2%,#E9E3D1 100%)}.ch-demeter .ch-ground .rows{top:70%}
}

/* ---------- Scout mark: hover turns the needle, and it keeps turning while the pointer stays ---------- */
.smark .needle{transform-box:view-box;transform-origin:440.43px 370px}
.smark .needle.spin{animation:needle-turn 1.25s cubic-bezier(.45,.05,.55,.95) infinite!important}
.smark .needle.spin.last{animation-iteration-count:1!important}
@keyframes needle-turn{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.scout-hero .mark{cursor:pointer}

/* ---------- Instagram: smaller tiles, rounded corners ---------- */
.insta{max-width:860px;margin-inline:auto}
.insta img,.insta video{border-radius:14px}
.insta a[href*="instagram.com/p/"],.insta a[href*="instagram.com/reel/"],.insta [class*="posts-item"],.insta [class*="PostItem"],.insta [class*="Grid"] > div > div{border-radius:14px;overflow:hidden}

/* ---------- One number, two ways to use it ---------- */
.dial{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dial > span{display:grid;gap:4px;margin-right:8px}
.dial small{font:600 .66rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
.dial b{font-size:1.25rem;font-weight:600;color:var(--fg);letter-spacing:-.01em}
.cta-line .dial{justify-content:center;margin-top:22px}
.contact-item.dual .acts{display:flex;gap:8px}
.contact-item.dual .acts a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);color:var(--accent);text-decoration:none}
.contact-item.dual .acts a:hover{border-color:var(--accent)}
.contact-item.dual .acts svg{width:18px;height:18px}
.contact-item.dual .acts.txt a{width:auto;height:auto;padding:9px 14px;border-radius:999px;font:600 .8rem/1 var(--body)}
.contact .acts{display:flex;gap:8px;flex:none}
.contact .acts a.copy-btn{color:var(--ink);text-decoration:none;font-weight:700}
.foot-wa{display:block;font-size:.78rem;color:var(--quiet);margin-top:2px}
.foot-wa a{color:var(--quiet);text-decoration:underline;text-underline-offset:2px}

/* ---------- Map: no pin, only the glowing ring over the address ---------- */
.map .pin{width:16px;height:16px;margin:-8px 0 0 -8px;background:transparent;box-shadow:0 0 0 2px #93E102,0 0 16px #93E102,0 0 36px rgba(147,225,2,.55)}
.map .pin::before{inset:-12px;border:2px solid #93E102;opacity:.75}
.map .pin i{position:absolute;inset:-12px;border-radius:50%;border:1.5px solid #93E102;animation:pin-ring 2.2s ease-out 1.1s infinite}

/* ---------- First visit: the other mode offered once, then tucked into the toggle ---------- */
.mode-hint{position:fixed;z-index:90;top:86px;right:clamp(16px,3vw,40px);display:flex;align-items:center;gap:12px;padding:10px 10px 10px 14px;border-radius:999px;background:rgba(13,17,15,.94);color:#fff;border:1px solid rgba(147,225,2,.45);box-shadow:0 18px 40px -18px rgba(0,0,0,.6),0 0 22px rgba(147,225,2,.18);font:500 .9rem/1.2 var(--body);opacity:0;transform:translateY(-10px) scale(.96);transform-origin:center;transition:opacity .4s,transform .45s cubic-bezier(.2,.7,.2,1)}
.mode-hint.on{opacity:1;transform:none;animation:hint-flash 1.4s ease-out .2s 2}
.mode-hint .ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(147,225,2,.14);color:#93E102}
.mode-hint .ic svg{width:16px;height:16px}
.mode-hint .ic .sun{display:none}
html[data-mode="dark"] .mode-hint .ic .sun{display:block}html[data-mode="dark"] .mode-hint .ic .moon{display:none}
.mode-hint button{font:600 .82rem/1 var(--body);color:#0B1A05;background:#93E102;border:0;border-radius:999px;padding:10px 14px;cursor:pointer}
.mode-hint.tuck{transition:transform .65s cubic-bezier(.6,0,.2,1),opacity .65s ease-in;opacity:0;animation:none}
@keyframes hint-flash{0%{box-shadow:0 18px 40px -18px rgba(0,0,0,.6),0 0 0 0 rgba(147,225,2,.6)}100%{box-shadow:0 18px 40px -18px rgba(0,0,0,.6),0 0 0 14px rgba(147,225,2,0)}}
.mode.ping{animation:mode-ping 1.6s ease-out}
@keyframes mode-ping{0%{box-shadow:0 0 0 0 rgba(147,225,2,.8);border-color:#93E102}60%{box-shadow:0 0 0 12px rgba(147,225,2,0);border-color:#93E102}100%{box-shadow:none}}
@media (max-width:560px){.mode-hint{left:16px;right:16px;top:auto;bottom:16px;border-radius:16px}.mode-hint .t{flex:1}}
.chooser{display:none!important}

/* ---------- Footer: black in both modes, lime technical lines moving behind it ---------- */
.footer{position:relative;overflow:hidden;background:#070908!important;color:rgba(255,255,255,.75);--line:rgba(255,255,255,.12);--quiet:rgba(255,255,255,.55);--mute:rgba(255,255,255,.75);--fg:#fff;border-top:1px solid rgba(147,225,2,.25)}
.footer .tag{color:#fff}
.footer .wrap{position:relative;z-index:1}
.footer .foot-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,#000 55%,#000 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,#000 55%,#000 100%)}

/* ---------- Demeter: one row of three, no repeated side views ---------- */
.gallery.g3sq{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery.g3sq .photo{aspect-ratio:1/1}
@media (max-width:700px){.gallery.g3sq{grid-template-columns:1fr}.gallery.g3sq .photo{aspect-ratio:4/3}}
#enquire .cta .dial{justify-content:flex-start}
#enquire .cta p a{color:inherit}

/* ---------- Diesel Boss page: the render sits on its own black ---------- */
.db-render{background:#0D0D0D!important}
.db-render img{object-fit:contain!important;background:#0D0D0D!important}
.ch-db h3,.ch-scout h3{color:#fff}
.ch-demeter h3{color:#16201A}
.inhouse .sec-head{max-width:68rem}
.inhouse .sec-head h2{text-wrap:balance}
.cta-line .btn-go,.cta-line .btn-go:hover{color:var(--accent-ink,#0B1A05)}
.cta-line .btn-ghost{color:var(--fg)}
.ptx .loader{align-self:center}
.ptx .loader .head{display:block;align-self:center;margin-left:2px}
.ptx .loader .track{align-self:center}
.ptx .loader{position:relative;display:block;height:20px;padding-right:20px}
.ptx .loader .track{position:absolute;left:0;right:20px;top:8px}
.ptx .loader .head{position:absolute;right:0;top:0;margin:0}

/* Demeter "Every part of it": dots placed on the machine, labels in the side columns, leaders measured in JS */
.machine .callouts{position:absolute;top:0;bottom:0;left:clamp(150px,17vw,250px);right:clamp(150px,17vw,250px);margin:0;padding:0;list-style:none}
.machine .callouts li::before{width:var(--len,56px)}
.machine .callouts li[style*="--side:left"] b,.machine .callouts li[style*="--side:left"] span{right:calc(100% + var(--len,56px) + 8px)}
.machine .callouts li[style*="--side:right"] b,.machine .callouts li[style*="--side:right"] span{left:calc(100% + var(--len,56px) + 8px)}
@media (max-width:900px){.machine .callouts{display:none}}

/* Scout chapter, round 2: immersive. The photo fills the card, steel light comes in from the left, copy sits on it. */
.ch-scout{display:block;min-height:clamp(560px,46vw,680px)}
.ch-scout .ch-art{position:absolute;inset:0;height:auto}
.ch-scout .ch-art picture,.ch-scout .ch-art img{object-position:72% 30%}
.ch-scout .ch-art::after{background:linear-gradient(90deg,#1C2021 0%,rgba(28,32,33,.94) 34%,rgba(28,32,33,.55) 52%,rgba(28,32,33,0) 72%),linear-gradient(0deg,rgba(20,23,23,.6),transparent 30%)}
.ch-scout .ch-copy{position:relative;min-height:inherit;padding:clamp(28px,4.5vw,72px)}
.ch-scout .ch-mark{width:96px;height:96px}
@media (max-width:900px){.ch-scout .ch-art{position:relative;aspect-ratio:4/3}.ch-scout .ch-art picture,.ch-scout .ch-art img{object-position:50% 25%}.ch-scout .ch-art::after{background:linear-gradient(0deg,#1C2021 3%,transparent 50%)}.ch-scout .ch-copy{min-height:0;padding-top:8px}}
/* Diesel Boss chapter: the unit stands larger and centred in its own light */
.ch-db{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ch-db .ch-art picture,.ch-db .ch-art img{height:min(100%,640px)}

.machine .callouts li[data-side]::before{width:var(--len)}
.machine .callouts li[data-side="l"]::before{right:100%;left:auto}
.machine .callouts li[data-side="r"]::before{left:100%;right:auto}
.machine .callouts li[data-side="l"] b,.machine .callouts li[data-side="l"] span{left:auto;right:calc(100% + var(--len) + 8px);text-align:right}
.machine .callouts li[data-side="r"] b,.machine .callouts li[data-side="r"] span{right:auto;left:calc(100% + var(--len) + 8px);text-align:left}