/* ===== v2 additions ===== */

/* --- hero map: properly sized, centred, fits viewport --- */
.hero .wrap{grid-template-columns:1.1fr .9fr}
.hero-map{display:flex;justify-content:center;align-items:center;perspective:1400px;min-height:0}
.hero-map .tilt{position:relative;width:min(100%,520px,calc((100vh - 240px) * .778));aspect-ratio:681/875}
.hero-map img{position:absolute;inset:0;width:100%!important;height:100%;max-width:100%!important;margin:0!important;object-fit:contain}
.hero-map .shadow{position:absolute;left:12%;right:12%;bottom:-6%;height:8%;background:radial-gradient(ellipse,rgba(0,0,0,.7),transparent 70%);filter:blur(8px);transform:translateZ(-40px)}
.pin{transform:translateZ(60px)}
.pin.accra{left:31%;top:45%}
.pin.zambia{left:62%;top:69%}
.pin.zambia span{left:auto;right:18px}
.pin span{font-size:10px}
.orbit{position:absolute;z-index:3;padding:8px 14px;background:rgba(13,13,12,.85);border:1px solid rgba(245,184,0,.45);color:var(--gold-2);backdrop-filter:blur(6px);font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity 1s var(--ease)}
.ready .orbit{opacity:1;animation:bob 5s ease-in-out infinite}
.orbit.o1{top:6%;left:-8%;transition-delay:.9s}
.orbit.o2{top:22%;right:-10%;animation-delay:-1.2s!important;transition-delay:1s}
.orbit.o3{bottom:24%;left:-14%;animation-delay:-2.5s!important;transition-delay:1.1s}
.orbit.o4{bottom:4%;right:-6%;animation-delay:-3.6s!important;transition-delay:1.2s}
@keyframes bob{50%{transform:translateY(-10px)}}
.hero h1{font-size:clamp(60px,8.6vw,150px)}

/* --- quality & timely --- */
.qt{background:var(--ink-2);border-top:1px solid var(--line)}
.qt-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative}
.qt-card{padding:56px 52px 52px;position:relative;overflow:hidden;min-height:540px;display:flex;flex-direction:column}
.qt-card.q{background:var(--bone);color:var(--ink)}
.qt-card.t{background:var(--gold);color:var(--ink)}
.qt-card .k{opacity:.6;margin-bottom:auto}
.qt-card h3{font-size:clamp(52px,5.4vw,92px);margin:40px 0 24px}
.qt-card p.lead{font-size:18px;max-width:440px;margin-bottom:30px;color:#2c2b27}
.qt-card ul{list-style:none;border-top:1.5px solid rgba(13,13,12,.18)}
.qt-card li{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1.5px solid rgba(13,13,12,.18);font-weight:600;font-size:16px}
.qt-card li::after{content:"";width:9px;height:9px;background:var(--ink);transform:rotate(45deg);flex:none;transition:transform .4s var(--ease)}
.qt-card li:hover::after{transform:rotate(225deg) scale(1.3)}
.qt-card .bigtxt{position:absolute;right:-20px;top:20px;font-family:var(--f-display);font-weight:900;font-size:240px;line-height:.8;opacity:.09;pointer-events:none}
.clock{position:absolute;right:44px;top:44px;width:110px;height:110px;border-radius:50%;border:3px solid var(--ink)}
.clock::before,.clock::after{content:"";position:absolute;left:50%;bottom:50%;width:3px;background:var(--ink);transform-origin:bottom center;border-radius:2px}
.clock::before{height:38%;margin-left:-1.5px;animation:spin 6s linear infinite}
.clock::after{height:28%;margin-left:-1.5px;animation:spin 72s linear infinite}
.clock i{position:absolute;inset:44%;background:var(--ink);border-radius:50%}
.stamps{display:flex;justify-content:center;gap:34px;margin-top:-70px;position:relative;z-index:3}
.stamp{width:140px;height:140px;border-radius:50%;background:var(--ink);border:2px solid var(--gold);display:grid;place-items:center;position:relative;box-shadow:0 20px 40px rgba(0,0,0,.4)}
.stamp svg{position:absolute;inset:6px;animation:spin 16s linear infinite}
.stamp:nth-child(2) svg{animation-direction:reverse}
.stamp strong{font-family:var(--f-display);font-weight:900;font-size:30px;color:var(--gold);line-height:.9;text-align:center;text-transform:uppercase}

/* --- farm --- */
.farm{background:var(--bone);color:var(--ink);overflow:hidden}
.farm .tag{color:var(--gold-deep)}.farm .tag b{border-color:var(--gold-deep)}
.farm .sec-head p{color:#45433d}
.farm-cats{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.farm-cats span{padding:10px 18px;border:1.5px solid var(--ink);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.05em}
.rail{display:flex;gap:18px;overflow-x:auto;padding:0 4vw 30px;scrollbar-width:none;cursor:grab;user-select:none}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing}
.fcard{flex:none;width:clamp(280px,30vw,440px);position:relative}
.fcard .ph{aspect-ratio:4/5;overflow:hidden;background:#ddd8cc}
.fcard.wide .ph{aspect-ratio:auto;height:100%}
.fcard.wide{width:clamp(360px,46vw,700px);display:flex;flex-direction:column}
.fcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);pointer-events:none}
.fcard:hover img{transform:scale(1.07)}
.fcard .cap2{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;border-top:2px solid var(--ink);margin-top:14px}
.fcard h3{font-size:34px}
.fcard .mono{color:#6c685e}
.rail-hint{display:flex;align-items:center;gap:14px;margin-top:10px;color:#6c685e}
.rail-bar{flex:1;height:2px;background:rgba(13,13,12,.12);position:relative}
.rail-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--gold-deep);width:20%}

/* --- EV showroom --- */
.ev{overflow:hidden;background:radial-gradient(ellipse at 60% 70%,#1d1c18,var(--ink) 70%)}
.ev-word{position:absolute;left:0;top:90px;white-space:nowrap;font-family:var(--f-display);font-weight:900;font-size:clamp(140px,22vw,380px);line-height:.8;-webkit-text-stroke:1.5px rgba(245,184,0,.16);color:transparent;pointer-events:none;will-change:transform}
.ev .wrap{position:relative}
.ev-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center}
.ev h2{font-size:clamp(56px,6.4vw,110px)}
.ev h2 .bolt{color:var(--gold)}
.ev .copy p{color:#c4c0b6;margin:26px 0 30px;max-width:460px}
.ev-feats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:34px}
.ev-feats div{background:var(--ink);padding:18px 18px}
.ev-feats b{display:block;font-family:var(--f-display);font-size:24px;text-transform:uppercase;color:var(--gold)}
.ev-feats span{font-size:14px;color:var(--mute)}
.ev-stage{position:relative;aspect-ratio:16/10}
.ev-stage .floor{position:absolute;left:5%;right:5%;bottom:8%;height:18%;background:radial-gradient(ellipse,rgba(245,184,0,.28),transparent 65%);filter:blur(6px)}
.ev-stage .grid-floor{position:absolute;left:-10%;right:-10%;bottom:0;height:40%;background-image:linear-gradient(rgba(245,184,0,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(245,184,0,.18) 1px,transparent 1px);background-size:60px 30px;transform:perspective(400px) rotateX(62deg);transform-origin:bottom;mask-image:linear-gradient(transparent,#000 60%,transparent)}
.ev-car{position:absolute;left:6%;right:6%;bottom:12%;height:70%;display:flex;align-items:flex-end;justify-content:center;opacity:0;transform:translateX(18%);transition:opacity .6s,transform 1s var(--ease);pointer-events:none}
.ev-car.on{opacity:1;transform:none}
.ev-car.leave{opacity:0;transform:translateX(-18%)}
.ev-car img{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 30px 30px rgba(0,0,0,.6))}
.ev-hud{position:absolute;top:4%;right:2%;width:220px;border:1px solid var(--line);background:rgba(13,13,12,.7);backdrop-filter:blur(8px);padding:16px}
.ev-hud .row{display:flex;justify-content:space-between;color:var(--mute)}
.ev-hud .pct{font-family:var(--f-display);font-weight:900;font-size:54px;color:var(--gold);line-height:1;margin:6px 0 10px}
.ev-batt{height:10px;border:1px solid rgba(245,184,0,.5);padding:2px;position:relative}
.ev-batt::after{content:"";position:absolute;right:-5px;top:2px;width:3px;height:4px;background:rgba(245,184,0,.5)}
.ev-batt i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 10px);width:0;transition:width 1.6s var(--ease)}
.ev-tabs{display:flex;gap:10px;margin-top:22px;justify-content:center;flex-wrap:wrap}
.ev-tab{padding:10px 18px;border:1px solid var(--line);font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);transition:.3s}
.ev-tab.active,.ev-tab:hover{border-color:var(--gold);color:var(--gold)}
.ev-tab.active{background:rgba(245,184,0,.1)}

/* --- training & parts --- */
.tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tp{border:1px solid var(--line);background:var(--ink-2);overflow:hidden;display:flex;flex-direction:column}
.tp .img{height:300px;overflow:hidden;position:relative}
.tp .img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.tp:hover .img img{transform:scale(1.06)}
.tp .img::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,var(--ink-2))}
.tp .img .lbl{position:absolute;left:36px;top:30px;z-index:2;background:var(--gold);color:var(--ink);padding:6px 12px}
.tp .in{padding:10px 40px 44px}
.tp h3{font-size:clamp(44px,4.4vw,72px);margin-bottom:16px}
.tp p{color:#bdb9ae;margin-bottom:26px;max-width:520px}
.tp ol{list-style:none;counter-reset:c}
.tp ol li{counter-increment:c;display:grid;grid-template-columns:52px 1fr;padding:16px 0;border-top:1px solid var(--line)}
.tp ol li::before{content:counter(c,decimal-leading-zero);font-family:var(--f-mono);color:var(--gold);font-size:13px;padding-top:3px}
.tp ol b{display:block;font-weight:700}
.tp ol span{color:var(--mute);font-size:15px}
.pbrands{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.pbrands span{padding:8px 14px;border:1px solid rgba(245,184,0,.35);color:var(--gold-2);font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;transition:.3s}
.pbrands span:hover{background:var(--gold);color:var(--ink)}
.attach{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.attach figure{position:relative;overflow:hidden;border:1px solid var(--line)}
.attach img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1.2s var(--ease)}
.attach figure:hover img{transform:scale(1.05)}
.attach figcaption{position:absolute;left:0;bottom:0;background:var(--ink);padding:12px 18px;color:var(--gold)}

/* --- about why --- */
.why{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:90px;border-top:2px solid var(--ink)}
.why div{padding:28px 22px 0 0}
.why div+div{padding-left:22px;border-left:1px solid rgba(13,13,12,.15)}
.why b{font-family:var(--f-display);font-size:44px;color:var(--gold-deep);font-weight:900;line-height:1}
.why h4{font-family:var(--f-display);font-size:26px;text-transform:uppercase;margin:12px 0 8px;line-height:1}
.why p{font-size:14px!important;color:#55524a!important;margin:0!important}
.values{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.values span{background:var(--ink);color:var(--gold);padding:8px 14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* --- contact branches --- */
.branch{color:var(--gold);font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:30px 0 6px}

@media (max-width:1000px){
  .hero-map .tilt{width:min(78vw,420px)}
  .orbit.o1,.orbit.o3{left:-2%}.orbit.o2,.orbit.o4{right:-2%}
  .qt-grid,.ev-grid,.tp-grid,.attach{grid-template-columns:1fr}
  .stamps{margin-top:30px;gap:14px}.stamp{width:110px;height:110px}.stamp strong{font-size:22px}
  .why{grid-template-columns:1fr 1fr}
  .why div+div{border-left:0;padding-left:0}
  .ev-hud{width:170px}.ev-hud .pct{font-size:38px}
  .qt-card{padding:40px 28px;min-height:0}
  .clock{width:70px;height:70px;right:24px;top:24px}
}