/* ============================================================================
   NextCharge.pk — Design tokens
   Palette: engineering navy + mineral blue + safety brass
   Type: Space Grotesk (display) / Inter (body) / IBM Plex Mono (data)
   ========================================================================== */

:root{
  /* color */
  --ink-950:#101820;
  --ink-900:#18242F;
  --ink-800:#233341;
  --ink-700:#344858;
  --line-dark:#344653;

  --paper:#F7F6F2;
  --paper-dim:#EEEDE7;
  --line-light:#D8D8D0;

  --text-dark:#17212B;
  --text-light:#EDF1F3;
  --muted-dark:#5E6A72;
  --muted-light:#A7B1B8;

  --current:#2B638F;     /* mineral blue — primary brand color */
  --current-dim:#1F4A6B;
  --signal:#C6923A;      /* safety brass — actions and emphasis */
  --signal-dim:#A97827;
  --charge:#4F7563;      /* muted green — status only */
  --map-solar:#22A861;
  --map-domestic:#E5B52E;
  --map-commercial:#D94A45;

  /* type */
  --f-display:'Space Grotesk', sans-serif;
  --f-body:'Inter', sans-serif;
  --f-mono:'IBM Plex Mono', monospace;

  /* layout */
  --maxw:1320px;
  --radius-s:6px;
  --radius-m:12px;
  --radius-l:22px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--f-body);
  color:var(--text-dark);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img,svg{display:block;max-width:100%;}

/* Keep inline illustrations aligned with the brand palette. */
svg [stroke="#2F82FF"]{stroke:var(--current);}
svg [fill="#2F82FF"]{fill:var(--current);}
svg stop[stop-color="#2F82FF"]{stop-color:var(--current);}
svg [stroke="#FF9B3D"]{stroke:var(--signal);}
svg [fill="#FF9B3D"]{fill:var(--signal);}
svg stop[stop-color="#FF9B3D"]{stop-color:var(--signal);}
svg [stroke="#23C58F"]{stroke:var(--charge);}
svg [fill="#23C58F"]{fill:var(--charge);}
svg stop[stop-color="#23C58F"]{stop-color:var(--charge);}
svg [stroke="#16233E"]{stroke:var(--ink-800);}
svg [fill="#16233E"]{fill:var(--ink-800);}
svg [stroke="#233150"]{stroke:var(--line-dark);}
svg [fill="#081020"]{fill:var(--ink-950);}

a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;line-height:1.08;letter-spacing:-0.01em;}
p{margin:0;}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}

:focus-visible{outline:2px solid var(--current);outline-offset:3px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

/* ---------- eyebrow / mono labels ---------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--current);
  display:flex;align-items:center;gap:9px;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--signal);
}
.eyebrow.on-dark{color:#9DB9CE;}

/* ---------- NAV ---------- */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(16,24,32,0.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dark);
}
.site-nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:78px;
}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:600;font-size:19px;color:var(--text-light);}
.logo .mark{width:34px;height:34px;flex:none;}
.logo b{color:var(--signal);font-weight:600;}
.site-nav .logo{gap:9px;}
.brand-symbol{
  width:38px;height:42px;object-fit:contain;flex:none;
  padding:5px;background:#fff;border:1px solid rgba(255,255,255,.72);
  border-radius:7px;box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.brand-wordmark{display:flex;align-items:baseline;gap:6px;font-size:20px;letter-spacing:-.015em;}
.brand-wordmark span{color:#fff;font-weight:600;}
.site-nav .brand-wordmark b{color:#39B878;font-weight:600;}
.brand-logo{
  display:block;width:142px;height:auto;max-width:none;
  border-radius:5px;background:#fff;
  box-shadow:0 5px 18px rgba(0,0,0,.16);
}
.footer-brand-logo{width:190px;box-shadow:none;}

.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{
  font-size:14.5px;font-weight:500;color:var(--muted-light);
  padding:6px 2px;border-bottom:2px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.nav-links a:hover{color:var(--text-light);}
.nav-links a[aria-current="page"]{color:var(--text-light);border-color:var(--signal);}

.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--signal);color:var(--ink-950);
  font-weight:600;font-size:14px;
  padding:10px 18px;border-radius:999px;
  transition:background .15s ease, transform .15s ease;
}
.nav-cta:hover{background:#D5A653;transform:translateY(-1px);}

.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text-light);margin:5px 0;}

@media (max-width:880px){
  .nav-links{
    position:absolute;top:78px;left:0;right:0;
    background:var(--ink-950);border-bottom:1px solid var(--line-dark);
    flex-direction:column;align-items:flex-start;gap:0;
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .nav-links.open{max-height:320px;}
  .nav-links a{width:100%;padding:16px 28px;border-bottom:1px solid var(--line-dark);border-left:2px solid transparent;}
  .nav-links a[aria-current="page"]{border-left-color:var(--signal);border-bottom:1px solid var(--line-dark);}
  .nav-cta{margin:14px 28px 20px;}
  .nav-toggle{display:block;}
  .nav-desktop-cta{display:none;}
}

/* ---------- VOLTAGE LINE (signature divider) ---------- */
.voltage-line{width:100%;height:34px;display:block;}
.voltage-line path{fill:none;stroke:var(--line-dark);stroke-width:1.5;}
.voltage-line.on-light path{stroke:var(--line-light);}

/* ---------- HERO ---------- */
.hero{
  background:
    radial-gradient(ellipse 980px 560px at 82% -8%, rgba(43,99,143,0.22), transparent 62%),
    var(--ink-950);
  color:var(--text-light);
  padding:76px 0 0;
  position:relative;
  overflow:hidden;
}
.hero-main{
  display:grid;grid-template-columns:minmax(420px,.8fr) minmax(0,1.2fr);
  gap:64px;align-items:center;padding-bottom:42px;
}
.hero h1{font-size:clamp(40px,4.4vw,62px);font-weight:600;color:#fff;letter-spacing:-.025em;}
.hero h1 em{font-style:normal;color:var(--signal);}
.hero .lede{margin-top:22px;font-size:17px;color:var(--muted-light);max-width:48ch;}
.hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:14.5px;
  padding:14px 24px;border-radius:999px;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  border:1px solid transparent;
}
.btn-primary{background:var(--signal);color:var(--ink-950);}
.btn-primary:hover{background:#D5A653;transform:translateY(-1px);}
.btn-outline{border-color:var(--line-dark);color:var(--text-light);}
.btn-outline:hover{border-color:var(--current);background:rgba(43,99,143,0.10);}
.btn-outline.on-light{border-color:var(--line-light);color:var(--text-dark);}
.btn-outline.on-light:hover{border-color:var(--current);}

/* hero illustration */
.hero-art{position:relative;aspect-ratio:1/1;max-width:420px;justify-self:center;}
.hero-art svg{width:100%;height:100%;}
.hero-photo{
  width:100%;max-width:720px;aspect-ratio:1.62/1;
  border:1px solid rgba(157,185,206,.38);border-radius:16px;
  overflow:hidden;background:var(--ink-900);
  box-shadow:0 34px 80px -34px rgba(0,0,0,.85),0 0 0 6px rgba(43,99,143,.08);
}
.hero-photo > img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.06) contrast(1.04);
  transition:transform .45s ease,filter .45s ease;
}
.hero-photo:hover > img{transform:scale(1.025);filter:saturate(1.1) contrast(1.05);}
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(16,24,32,.72));
  pointer-events:none;
}
.hero-photo-caption{
  position:absolute;left:22px;right:22px;bottom:18px;z-index:1;
  display:flex;gap:7px;flex-wrap:wrap;
}
.hero-photo-caption span{
  padding:7px 11px;border:1px solid rgba(255,255,255,.34);border-radius:999px;
  color:#fff;background:rgba(16,24,32,.68);backdrop-filter:blur(6px);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;
}

/* charge chips (stat readouts) */
.hero-stats{display:block;}
.chip-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin-top:0;padding-bottom:54px;position:relative;z-index:1;
}
.chip{
  background:var(--ink-900);border:1px solid var(--line-dark);
  border-radius:var(--radius-m);
  padding:16px 20px;min-width:0;
}
.chip .num{font-family:var(--f-mono);font-size:22px;color:var(--current);font-weight:500;}
.chip .num span{color:var(--charge);}
.chip .label{font-size:12px;color:var(--muted-light);margin-top:4px;letter-spacing:0.02em;}
.chip .bar{height:3px;background:var(--line-dark);border-radius:2px;margin-top:10px;overflow:hidden;}
.chip .bar i{display:block;height:100%;background:var(--current);}

/* ---------- SECTION scaffolding ---------- */
.section{padding:86px 0;}
.section.tight{padding:64px 0;}
.section.dark{background:var(--ink-950);color:var(--text-light);}
.section.dim{background:var(--paper-dim);}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head h2{font-size:clamp(26px,3vw,38px);margin-top:14px;}
.section-head p{margin-top:14px;color:var(--muted-dark);font-size:16px;}
.section.dark .section-head p{color:var(--muted-light);}

/* ---------- SERVICE / VALUE CARDS ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px;}

.card{
  background:#fff;border:1px solid var(--line-light);border-radius:var(--radius-l);
  padding:30px 26px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 32px -24px rgba(16,24,32,0.38);border-color:var(--current);}
.card .icon{width:46px;height:46px;margin-bottom:18px;}
.card h3{font-size:18px;margin-bottom:10px;}
.card p{color:var(--muted-dark);font-size:14.5px;}
.card .spec{
  margin-top:16px;display:inline-block;
  font-family:var(--f-mono);font-size:12px;color:var(--current-dim);
  background:#E8EEF2;border-radius:999px;padding:5px 12px;
}

.card.on-dark{background:var(--ink-900);border-color:var(--line-dark);}
.card.on-dark h3{color:#fff;}
.card.on-dark p{color:var(--muted-light);}

/* ---------- CHARGER CATEGORY CARDS ---------- */
.charger-grid{grid-template-columns:repeat(2,1fr);}
.charger-card{padding:0;overflow:hidden;border-radius:var(--radius-m);}
.charger-card:hover{transform:translateY(-3px);}
.charger-card > img{
  width:100%;height:260px;object-fit:cover;
  border-bottom:1px solid var(--line-light);
}
.charger-card-body{padding:26px;}
.charger-card .charger-type{
  color:var(--current);font-family:var(--f-mono);font-size:11px;
  font-weight:500;letter-spacing:.12em;margin-bottom:9px;
}
.charger-card h3{font-size:20px;}
.charger-card-body > p:not(.charger-type){margin-top:10px;}
.charger-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}
.charger-meta span{
  background:var(--paper-dim);border:1px solid var(--line-light);
  border-radius:999px;padding:5px 10px;color:var(--text-dark);
  font-family:var(--f-mono);font-size:11px;
}
.text-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:20px;
  color:var(--current-dim);font-size:13.5px;font-weight:600;
}
.text-link:hover{color:var(--current);}
.text-link span{transition:transform .15s ease;}
.text-link:hover span{transform:translateX(3px);}

/* ---------- FEATURE ROW (services detail, alternating) ---------- */
.feature-row{
  display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:center;
  padding:56px 0;border-top:1px solid var(--line-light);
  scroll-margin-top:94px;
}
.feature-row:first-of-type{border-top:none;}
.feature-row.rev .art{order:2;}
.feature-row .art{background:var(--ink-950);border-radius:var(--radius-l);aspect-ratio:4/3;padding:32px;display:flex;align-items:center;justify-content:center;}
.feature-row .art svg{width:80%;height:80%;}
.feature-row .photo-art{padding:0;overflow:hidden;background:var(--ink-900);}
.feature-row .photo-art img{width:100%;height:100%;object-fit:cover;}
.feature-row .eyebrow{margin-bottom:14px;}
.feature-row h3{font-size:25px;margin-bottom:14px;}
.feature-row p.desc{color:var(--muted-dark);font-size:15.5px;margin-bottom:20px;}
.feature-list{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.feature-list li{display:flex;gap:10px;font-size:14.5px;align-items:flex-start;}
.feature-list li svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--charge);}
.spec-row{display:flex;gap:10px;flex-wrap:wrap;}
.spec-row span{font-family:var(--f-mono);font-size:12px;background:var(--paper-dim);border:1px solid var(--line-light);border-radius:999px;padding:5px 12px;color:var(--text-dark);}

/* ---------- CHARGER COMPARISON ---------- */
.comparison-wrap{overflow-x:auto;border:1px solid var(--line-light);background:#fff;border-radius:var(--radius-m);}
.charger-comparison{width:100%;border-collapse:collapse;min-width:760px;text-align:left;}
.charger-comparison th{
  padding:14px 20px;background:var(--ink-900);color:var(--text-light);
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
}
.charger-comparison td{padding:18px 20px;border-bottom:1px solid var(--line-light);font-size:14px;vertical-align:top;}
.charger-comparison tbody tr:last-child td{border-bottom:0;}
.charger-comparison tbody tr:hover{background:#F3F3EE;}
.charger-comparison td strong{display:block;font-family:var(--f-display);font-size:15px;}
.charger-comparison td span{display:block;color:var(--muted-dark);font-size:12px;margin-top:2px;}
.comparison-note{margin-top:12px;color:var(--muted-dark);font-size:12.5px;}

/* ---------- PROCESS STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
.step{padding:0 22px 0 0;position:relative;}
.step .n{font-family:var(--f-mono);font-size:13px;color:var(--signal);letter-spacing:.08em;}
.step h4{font-size:17px;margin:10px 0 8px;}
.step p{font-size:14px;color:var(--muted-light);}
.step::after{
  content:"";position:absolute;top:9px;right:0;left:34px;height:1px;
  background:repeating-linear-gradient(90deg,var(--line-dark) 0 6px, transparent 6px 12px);
}
.step:last-child::after{display:none;}

/* ---------- CTA BANNER ---------- */
.cta-banner{
  background:linear-gradient(120deg, var(--ink-950) 0%, var(--ink-800) 100%);
  border-radius:var(--radius-l);
  padding:56px 48px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  color:#fff;position:relative;overflow:hidden;
}
.cta-banner::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 90% 20%, rgba(198,146,58,0.12), transparent 55%);
}
.cta-banner h3{font-size:clamp(22px,2.6vw,30px);max-width:520px;position:relative;}
.cta-banner .actions{display:flex;gap:14px;position:relative;flex-wrap:wrap;}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--ink-950);color:var(--muted-light);padding:56px 0 28px;}

/* newsletter strip */
.footer-newsletter{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:40px;margin-bottom:40px;border-bottom:1px solid var(--line-dark);
}
.footer-newsletter h4{color:#fff;font-size:19px;margin-bottom:6px;}
.footer-newsletter p{font-size:14px;color:var(--muted-light);}
.newsletter-form{display:flex;gap:10px;flex:none;}
.newsletter-form input{
  background:var(--ink-900);border:1px solid var(--line-dark);color:var(--text-light);
  border-radius:999px;padding:12px 18px;font-size:14px;min-width:240px;
}
.newsletter-form input::placeholder{color:var(--muted-light);}
.newsletter-form input:focus{outline:none;border-color:var(--current);}
.newsletter-form button{
  background:var(--signal);color:var(--ink-950);border:0;border-radius:999px;
  padding:12px 22px;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;
  transition:background .15s ease;
}
.newsletter-form button:hover{background:#D5A653;}

.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line-dark);}
.footer-grid h5{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-light);margin-bottom:16px;}
.footer-grid p{font-size:14px;max-width:32ch;}
.footer-grid li{margin-bottom:10px;font-size:14px;}
.footer-grid a:hover{color:#fff;}

.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:13px;flex-wrap:wrap;gap:16px;}
.foot-legal{display:flex;gap:20px;flex-wrap:wrap;}
.foot-legal a:hover{color:#fff;}
.foot-social{display:flex;gap:14px;}
.foot-social a{width:34px;height:34px;border:1px solid var(--line-dark);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;}
.foot-social a:hover{border-color:var(--current);color:var(--current);}

@media (max-width:640px){
  .footer-newsletter{flex-direction:column;align-items:flex-start;}
  .newsletter-form{width:100%;}
  .newsletter-form input{flex:1;min-width:0;}
  .foot-bottom{flex-direction:column;align-items:flex-start;}
}

/* ---------- PAGE HEADER (About/Services/Contact) ---------- */
.page-header{
  background:var(--ink-950);color:var(--text-light);
  padding:64px 0 60px;position:relative;overflow:hidden;
}
.page-header::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 700px 400px at 12% 0%, rgba(43,99,143,0.14), transparent 60%);
}
.page-header .wrap{position:relative;}
.page-header h1{font-size:clamp(30px,4vw,46px);color:#fff;margin-top:16px;max-width:20ch;}
.page-header p{margin-top:16px;color:var(--muted-light);max-width:56ch;font-size:16px;}

/* ---------- ABOUT specifics ---------- */
.story{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.story .art{background:var(--paper-dim);border-radius:var(--radius-l);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:30px;}
.story .art svg{width:100%;height:100%;}
.story .story-photo{padding:0;aspect-ratio:4/3;overflow:hidden;position:relative;display:block;}
.story-photo > img{width:100%;height:100%;object-fit:cover;}
.story-photo::after{
  content:"";position:absolute;inset:42% 0 0;
  background:linear-gradient(180deg,transparent,rgba(16,24,32,.84));
}
.photo-label{position:absolute;left:22px;right:22px;bottom:18px;z-index:1;color:#fff;}
.photo-label strong{display:block;font-family:var(--f-display);font-size:17px;}
.photo-label span{display:block;margin-top:3px;color:var(--muted-light);font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;}
.story h2{font-size:clamp(24px,3vw,32px);margin-bottom:16px;}
.story p{color:var(--muted-dark);font-size:15.5px;margin-bottom:14px;}

.trust-strip{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:26px;padding:34px 0;}
.trust-item{display:flex;align-items:center;gap:12px;color:var(--muted-dark);font-family:var(--f-mono);font-size:13px;}
.trust-item svg{width:22px;height:22px;color:var(--current);flex:none;}

/* ---------- CONTACT specifics ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:start;}
.form-card{background:#fff;border:1px solid var(--line-light);border-radius:var(--radius-l);padding:36px;}
.contact-side{display:flex;flex-direction:column;gap:20px;}
.contact-photo{
  position:relative;min-height:390px;border-radius:var(--radius-l);
  overflow:hidden;background:var(--ink-900);border:1px solid var(--line-dark);
}
.contact-photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.contact-photo::after{
  content:"";position:absolute;inset:34% 0 0;
  background:linear-gradient(180deg,transparent,rgba(16,24,32,.92));
}
.contact-photo-copy{position:absolute;left:28px;right:28px;bottom:24px;z-index:1;color:#fff;}
.contact-photo-copy .eyebrow{margin-bottom:10px;}
.contact-photo-copy h3{font-size:21px;margin-bottom:8px;}
.contact-photo-copy > p:last-child{color:var(--muted-light);font-size:13.5px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field.full{grid-column:1/-1;}
.field label{font-size:13px;font-weight:600;color:var(--text-dark);}
.field input,.field select,.field textarea{
  border:1px solid var(--line-light);border-radius:var(--radius-s);
  padding:12px 14px;font-size:14.5px;background:var(--paper);
  transition:border-color .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--current);outline:none;}
.field textarea{resize:vertical;min-height:110px;}
.submit-btn{
  width:100%;background:var(--ink-950);color:#fff;font-weight:600;
  padding:15px;border-radius:999px;border:0;cursor:pointer;
  transition:background .15s ease;
  font-size:15px;
}
.submit-btn:hover{background:var(--current-dim);}

.info-card{background:var(--ink-950);color:var(--text-light);border-radius:var(--radius-l);padding:34px;margin-bottom:20px;}
.info-row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line-dark);}
.info-row:last-child{border-bottom:none;}
.info-row svg{width:20px;height:20px;color:var(--current);flex:none;margin-top:2px;}
.info-row .lbl{font-family:var(--f-mono);font-size:11px;color:var(--muted-light);letter-spacing:.08em;text-transform:uppercase;}
.info-row .val{font-size:14.5px;margin-top:3px;}

.map-box{
  border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--line-light);
  aspect-ratio:16/10;position:relative;
  background:
    linear-gradient(180deg, rgba(16,24,32,0.05), rgba(16,24,32,0.05)),
    repeating-linear-gradient(0deg, var(--paper-dim) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, var(--paper-dim) 0 1px, transparent 1px 34px),
    var(--paper);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;
}
.map-box .pin{width:38px;height:38px;color:var(--signal);}
.map-box span{font-family:var(--f-mono);font-size:12px;color:var(--muted-dark);}

.faq{border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--line-light);background:#fff;}
.faq details{border-bottom:1px solid var(--line-light);}
.faq details:last-child{border-bottom:none;}
.faq summary{
  padding:20px 26px;cursor:pointer;font-weight:600;font-size:15px;
  display:flex;justify-content:space-between;align-items:center;
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--f-mono);font-size:20px;color:var(--current);}
.faq details[open] summary::after{content:"–";}
.faq .a{padding:0 26px 22px;color:var(--muted-dark);font-size:14.5px;max-width:70ch;}

/* ---------- VALUES / TEAM (about) ---------- */
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.value-card{padding:26px 4px;border-top:2px solid var(--current);}
.value-card h4{font-size:16.5px;margin-bottom:8px;}
.value-card p{font-size:14px;color:var(--muted-dark);}

/* ---------- FIND A CHARGER / SHARED APP TAXONOMY ---------- */
.charger-finder{background:#06100D;color:var(--text-light);position:relative;overflow:hidden;}
.charger-finder::before{content:"";position:absolute;width:760px;height:760px;right:-180px;top:-300px;background:radial-gradient(circle,rgba(0,196,118,.17),transparent 66%);pointer-events:none;}
.charger-finder .section-head h2{color:#fff;}.charger-finder .section-head>p:last-child{color:#92AAA0;}
.finder-heading,.gallery-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:38px;}
.finder-heading .section-head,.gallery-heading .section-head{margin-bottom:0;}
.map-legend{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.legend-filter{border:1px solid #213C33;background:#0B1915;color:#A8B9B1;border-radius:999px;padding:9px 13px;cursor:pointer;font-size:12.5px;display:flex;align-items:center;gap:7px;}
.legend-filter:hover,.legend-filter.active{background:#00A866;border-color:#00C477;color:#fff;}
.legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;}
.solar{--marker:var(--map-solar);}.domestic{--marker:var(--map-domestic);}.commercial{--marker:var(--map-commercial);}
.legend-dot.solar,.story-tag.solar{background:var(--map-solar);}.legend-dot.domestic,.story-tag.domestic{background:var(--map-domestic);}.legend-dot.commercial,.story-tag.commercial{background:var(--map-commercial);}
.finder-shell{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(330px,.4fr);border:1px solid #1A332A;border-radius:28px;overflow:hidden;min-height:620px;background:#081511;box-shadow:0 34px 90px -50px rgba(0,255,156,.35);}
.demo-map{position:relative;overflow:hidden;min-height:620px;background:#0C211A;isolation:isolate;}
.demo-map::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 62% 42%,rgba(0,196,118,.14),transparent 45%),linear-gradient(180deg,transparent 60%,rgba(3,11,8,.48));z-index:0;pointer-events:none;}
.map-grid{position:absolute;inset:0;background:linear-gradient(rgba(98,158,132,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(98,158,132,.075) 1px,transparent 1px);background-size:42px 42px;}
.demo-map::before{content:"";position:absolute;width:52%;height:84%;left:28%;top:7%;background:#17382B;clip-path:polygon(52% 0,72% 9%,88% 27%,78% 45%,94% 62%,68% 71%,55% 100%,33% 87%,28% 65%,4% 48%,18% 27%,34% 13%);border:1px solid rgba(65,135,105,.35);z-index:-1;filter:drop-shadow(0 0 28px rgba(0,196,118,.12));}
.road{position:absolute;height:3px;background:#3D6B58;border:1px solid rgba(110,173,146,.22);transform-origin:left center;border-radius:4px;z-index:0;}
.road-a{width:48%;left:33%;top:43%;transform:rotate(-12deg);}.road-b{width:55%;left:37%;top:73%;transform:rotate(-56deg);}.road-c{width:35%;left:47%;top:30%;transform:rotate(46deg);}
.map-city{position:absolute;font-family:var(--f-mono);font-size:10px;color:#7FA393;letter-spacing:.05em;z-index:1;}.city-isb{left:65%;top:18%;}.city-lhr{left:72%;top:51%;}.city-khi{left:42%;top:87%;}
.map-pin{position:absolute;width:34px;height:34px;border:0;background:transparent;transform:translate(-50%,-50%);cursor:pointer;z-index:3;transition:opacity .2s ease,transform .2s ease;}
.map-pin span{display:block;width:24px;height:24px;margin:0 auto;background:var(--marker);border:3px solid #fff;border-radius:50% 50% 50% 5px;transform:rotate(-45deg);box-shadow:0 5px 14px rgba(16,24,32,.28);}
.map-pin:hover,.map-pin.active{transform:translate(-50%,-50%) scale(1.18);}.map-pin.active span{box-shadow:0 0 0 6px color-mix(in srgb,var(--marker) 22%,transparent),0 5px 14px rgba(16,24,32,.3);}
.map-pin.hidden{opacity:0;pointer-events:none;}
.map-card{position:absolute;left:24px;bottom:102px;width:min(340px,calc(100% - 48px));background:rgba(7,20,15,.9);color:#fff;backdrop-filter:blur(14px);border:1px solid #28513F;border-radius:16px;padding:20px;box-shadow:0 20px 50px -25px rgba(0,0,0,.8);z-index:4;}
.map-card-type{display:inline-block;background:var(--marker);color:#fff;border-radius:999px;padding:4px 9px;font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;}
.map-card h3{font-size:18px;margin-top:10px;}.map-card>p{font-size:13px;color:#8FA99D;margin-top:3px;}.map-card>div{display:flex;gap:8px;margin:14px 0;}.map-card>div span{padding:5px 8px;border-radius:5px;background:#10271E;color:#C3D3CC;font-family:var(--f-mono);font-size:10px;}.map-card a{font-size:12px;font-weight:600;color:#25D98A;}
.demo-badge{position:absolute;right:18px;top:18px;padding:6px 9px;background:rgba(4,14,10,.78);border:1px solid #28513F;color:#87B9A3;border-radius:5px;font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;z-index:4;}
.finder-copy{background:linear-gradient(160deg,#0C1E17,#06100D);color:var(--text-light);padding:48px 38px;border-left:1px solid #19372B;}.finder-copy h3{font-size:28px;margin:15px 0;}.finder-copy>p{font-size:14px;color:#92AAA0;}.finder-points{display:flex;flex-direction:column;gap:19px;margin:30px 0;}.finder-points li{display:flex;gap:12px;align-items:flex-start;}.finder-points .legend-dot{width:13px;height:13px;margin-top:4px;}.finder-points strong{display:block;color:#fff;font-family:var(--f-display);font-size:14px;}.finder-points span{color:#92AAA0;font-size:12.5px;}.finder-copy .data-note{border-top:1px solid #1D3A2F;padding-top:20px;font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;}
.app-concept-label{display:inline-block;color:#21D987;border:1px solid #1D6448;background:#0B281D;border-radius:999px;padding:6px 10px;font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;margin-bottom:18px;}
.app-map-toolbar{position:absolute;left:22px;right:140px;top:20px;z-index:5;display:flex;gap:8px;}.app-search,.journey-button{height:44px;border-radius:12px;border:1px solid #28513F;background:rgba(5,18,13,.86);backdrop-filter:blur(12px);color:#B7CAC1;display:flex;align-items:center;gap:9px;padding:0 14px;cursor:pointer;font-size:12px;}.app-search{flex:1;}.journey-button{color:#22DA87;}.app-search svg,.journey-button svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;}
.network-status{position:absolute;left:24px;top:80px;z-index:4;display:flex;align-items:center;gap:8px;padding:7px 10px;background:rgba(5,18,13,.76);border:1px solid #214638;border-radius:999px;color:#86A598;font-size:10px;}.network-status i{width:7px;height:7px;background:#20DB86;border-radius:50%;box-shadow:0 0 0 4px rgba(32,219,134,.12);}.network-status strong{color:#D4E0DB;}
.app-dock{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:5;width:min(520px,calc(100% - 42px));display:grid;grid-template-columns:repeat(4,1fr);padding:8px;background:rgba(5,17,13,.9);border:1px solid #28513F;border-radius:18px;backdrop-filter:blur(14px);box-shadow:0 15px 35px rgba(0,0,0,.35);}.app-dock button{border:0;background:none;color:#708D80;display:flex;flex-direction:column;align-items:center;gap:3px;font-family:var(--f-mono);font-size:8px;cursor:pointer;}.app-dock button.active{color:#1FDC86;}.app-dock svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.6;}
.app-feature-rail{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;margin-top:22px;background:#19372B;border:1px solid #19372B;border-radius:18px;overflow:hidden;}.app-feature-rail article{position:relative;background:#091712;padding:24px 19px;min-height:178px;transition:background .2s ease;}.app-feature-rail article:hover{background:#0D2119;}.app-feature-rail svg{width:25px;height:25px;stroke:#20D985;stroke-width:1.6;margin:17px 0 14px;}.app-feature-rail h3{font-size:14px;color:#fff;}.app-feature-rail p{font-size:11.5px;color:#7F9B8E;margin-top:7px;line-height:1.5;}.feature-number{font-family:var(--f-mono);font-size:9px;color:#426B59;letter-spacing:.08em;}

/* ---------- DEMO CUSTOMER FEEDBACK GALLERY ---------- */
.demo-content-label{max-width:280px;color:var(--muted-dark);border:1px solid var(--line-light);border-radius:6px;padding:9px 11px;font-family:var(--f-mono);font-size:9px;line-height:1.45;letter-spacing:.06em;text-align:right;}
.story-gallery-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:18px;}
.story-media-card{position:relative;display:block;border:0;padding:0;min-height:380px;overflow:hidden;border-radius:var(--radius-m);cursor:pointer;background:var(--ink-900);text-align:left;}
.story-media-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease,filter .35s ease;}.story-media-card::after{content:"";position:absolute;inset:32% 0 0;background:linear-gradient(180deg,transparent,rgba(16,24,32,.9));}.story-media-card:hover img{transform:scale(1.035);filter:saturate(1.08);}
.story-tag{position:absolute;left:16px;top:16px;z-index:2;padding:5px 9px;border-radius:999px;color:#fff;font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;}.story-tag.domestic{color:var(--ink-950);}
.story-card-copy{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;color:#fff;}.story-card-copy strong{display:block;font-family:var(--f-display);font-size:17px;}.story-card-copy small{display:block;color:var(--muted-light);font-family:var(--f-mono);font-size:10px;margin-top:4px;text-transform:uppercase;letter-spacing:.06em;}
.play-button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.25);}.play-button svg{width:26px;height:26px;fill:var(--ink-950);}
.media-modal{width:min(900px,calc(100% - 32px));border:0;border-radius:var(--radius-l);padding:0;background:var(--ink-950);color:#fff;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.5);}.media-modal::backdrop{background:rgba(8,16,24,.82);backdrop-filter:blur(5px);}.modal-media{aspect-ratio:16/9;background:var(--ink-900);}.modal-media img{width:100%;height:100%;object-fit:cover;}.modal-copy{padding:24px 28px 28px;}.modal-copy h3{font-size:24px;margin:8px 0;}.modal-copy p{color:var(--muted-light);font-size:14px;}.modal-kind{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;color:#9DB9CE;}.modal-close{position:absolute;right:14px;top:14px;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(16,24,32,.75);color:#fff;font-size:25px;line-height:1;cursor:pointer;}

/* ---------- ACCESSIBILITY & UX UTILITIES ---------- */

/* skip link — keyboard users can jump straight to content */
.skip-link{
  position:absolute;left:12px;top:-60px;
  background:var(--signal);color:var(--ink-950);
  padding:10px 18px;border-radius:8px;font-weight:600;font-size:14px;
  z-index:200;transition:top .2s ease;
}
.skip-link:focus{top:12px;}

/* breadcrumb — orientation / "where am I" */
.breadcrumb{background:var(--ink-900);border-bottom:1px solid var(--line-dark);padding:13px 0;}
.breadcrumb .wrap{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12.5px;color:var(--muted-light);}
.breadcrumb a{color:var(--muted-light);}
.breadcrumb a:hover{color:#fff;}
.breadcrumb .sep{color:var(--line-dark);}
.breadcrumb .current{color:var(--current);}

/* back to top — reduces scroll effort on long pages */
.back-to-top{
  position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;
  background:var(--ink-950);color:#fff;border:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, background .15s ease;
  z-index:60;
}
.back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
.back-to-top:hover{background:var(--current-dim);}
.back-to-top svg{width:18px;height:18px;}

/* required-field marker + inline hint */
.field label .req{color:#E8514B;margin-left:3px;}
.field .hint{font-size:12px;color:var(--muted-dark);}
.field input:invalid:not(:placeholder-shown){border-color:#E8514B;}

/* success feedback banner — visible system status after submit */
.form-success{
  display:none;align-items:center;gap:10px;
  background:rgba(79,117,99,0.10);border:1px solid var(--charge);
  color:#355847;padding:14px 18px;border-radius:var(--radius-s);
  font-size:14px;margin-bottom:18px;
}
.form-success.visible{display:flex;}
.form-success svg{width:18px;height:18px;flex:none;color:var(--charge);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr) ;}
  .values-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:32px;}
  .step::after{display:none;}
  .finder-shell{grid-template-columns:1fr;}
  .finder-copy{padding:34px 30px;}
  .finder-copy{border-left:0;border-top:1px solid #19372B;}
  .app-feature-rail{grid-template-columns:repeat(3,1fr);}
  .story-gallery-grid{grid-template-columns:1fr 1fr;}
  .story-media-card:first-child{grid-column:1/-1;}
}
@media (max-width:880px){
  .hero-main{grid-template-columns:1fr;gap:34px;padding-bottom:36px;}
  .hero-art{order:-1;max-width:280px;margin-top:20px;}
  .hero-photo{max-width:620px;aspect-ratio:1.55/1;}
  .chip-row{grid-template-columns:repeat(2,1fr);padding-bottom:42px;}
  .story{grid-template-columns:1fr;}
  .story .art{order:-1;max-width:320px;margin:0 auto;}
  .feature-row{grid-template-columns:1fr;gap:26px;}
  .feature-row.rev .art{order:0;}
  .feature-row .art{max-width:340px;margin:0 auto;padding:22px;}
  .contact-grid{grid-template-columns:1fr;}
  .contact-photo{min-height:420px;}
  .finder-heading,.gallery-heading{align-items:flex-start;flex-direction:column;}
  .map-legend{justify-content:flex-start;}
  .demo-content-label{text-align:left;}
  .app-map-toolbar{right:20px;}
}
@media (max-width:640px){
  .wrap{padding:0 20px;}
  .grid-4,.grid-3,.grid-2,.values-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .cta-banner{padding:38px 26px;flex-direction:column;align-items:flex-start;}
  .section{padding:60px 0;}
  .trust-strip{justify-content:flex-start;}
  .charger-card > img{height:210px;}
  .hero-photo{aspect-ratio:4/3;}
  .hero-photo-caption{left:12px;right:12px;bottom:10px;}
  .hero h1{font-size:clamp(36px,11vw,48px);}
  .chip{padding:14px 15px;}
  .form-card{padding:26px 20px;}
  .contact-photo{min-height:360px;}
  .contact-photo-copy{left:20px;right:20px;bottom:20px;}
  .brand-logo{width:126px;}
  .footer-brand-logo{width:176px;}
  .demo-map{min-height:500px;}
  .finder-shell{min-height:0;}
  .map-card{left:14px;bottom:94px;width:calc(100% - 28px);padding:16px;}
  .finder-copy{padding:30px 22px;}
  .app-map-toolbar{left:12px;right:12px;top:12px;flex-direction:column;}
  .app-search,.journey-button{height:40px;}
  .network-status{left:12px;top:104px;}
  .demo-badge{display:none;}
  .app-dock{bottom:12px;width:calc(100% - 24px);}
  .app-feature-rail{grid-template-columns:repeat(2,1fr);}
  .app-feature-rail article{min-height:160px;padding:20px 16px;}
  .story-gallery-grid{grid-template-columns:1fr;}
  .story-media-card:first-child{grid-column:auto;}
  .story-media-card{min-height:330px;}
}