:root{
    --ink:#12140F;
    --ink-soft:#1D2017;
    --cream:#F5F3E7;
    --cream-soft:#ECE9D8;
    --white:#FBFAF3;
    --leaf:#7FA85C;
    --leaf-deep:#4F6B39;
    --leaf-light:#ACC986;
    --line:rgba(18,20,15,0.12);
    --line-on-ink:rgba(251,250,243,0.16);
    --radius:14px;
    --maxw:1160px;
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Space Grotesk', sans-serif;
    margin:0 0 0.5em 0;
    line-height:1.12;
    letter-spacing:-0.01em;
    color:var(--ink);
  }
  p{margin:0 0 1em 0; max-width:62ch;}
  a{color:inherit;}
  img{max-width:100%; display:block;}
  button{font-family:inherit;}
  ul{margin:0; padding:0;}
  li{list-style:none;}

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

  /* ---------- Skip link / accessibility ---------- */
  .skip-link{
    position:absolute; left:-999px; top:auto;
    background:var(--leaf-deep); color:var(--white);
    padding:12px 18px; border-radius:0 0 8px 0; z-index:200;
  }
  .skip-link:focus{left:0; top:0;}

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

  /* ---------- Nav ---------- */
  header.site-nav{
    position:sticky; top:0; z-index:100;
    background:var(--ink);
    border-bottom:1px solid var(--line-on-ink);
  }
  .nav-row{
    display:flex; align-items:center; justify-content:space-between;
    height:76px;
  }
  .brand{
    display:flex; align-items:center; gap:12px;
    text-decoration:none; color:var(--white);
  }
  .brand svg{width:36px; height:36px; flex:none;}
  .brand-text{display:flex; flex-direction:column; line-height:1.15;}
  .brand-text strong{font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:1.08rem;}
  .brand-text span{font-size:0.72rem; color:var(--leaf-light); letter-spacing:0.02em;}

  nav.primary{display:flex; align-items:center; gap:8px;}
  nav.primary a{
    color:var(--cream-soft); text-decoration:none;
    font-size:0.98rem; padding:10px 16px; border-radius:8px;
    transition:background-color .15s ease, color .15s ease;
  }
  nav.primary a:hover{background:var(--ink-soft); color:var(--white);}
  nav.primary a.active{color:var(--white); background:var(--ink-soft);}

  .nav-cta{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--leaf); color:var(--ink);
    padding:10px 18px; border-radius:8px; font-weight:600;
    text-decoration:none; font-size:0.95rem;
    transition:background-color .15s ease;
    white-space:nowrap;
  }
  .nav-cta:hover{background:var(--leaf-light);}

  .nav-right{display:flex; align-items:center; gap:18px;}

  .menu-toggle{
    display:none; background:none; border:1px solid var(--line-on-ink);
    border-radius:8px; width:44px; height:44px; padding:0;
    cursor:pointer; align-items:center; justify-content:center;
  }
  .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
    content:""; display:block; width:20px; height:2px; background:var(--cream-soft);
    position:relative; transition:transform .2s ease, opacity .2s ease;
  }
  .menu-toggle span::before{position:absolute; top:-6px;}
  .menu-toggle span::after{position:absolute; top:6px;}
  .menu-toggle[aria-expanded="true"] span{background:transparent;}
  .menu-toggle[aria-expanded="true"] span::before{transform:rotate(45deg); top:0;}
  .menu-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg); top:0;}

  @media (max-width:860px){
    nav.primary{
      position:fixed; inset:76px 0 0 0; background:var(--ink);
      flex-direction:column; align-items:stretch; gap:0;
      padding:12px 28px 28px; transform:translateY(-8px);
      opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
    }
    nav.primary.open{opacity:1; pointer-events:auto; transform:translateY(0);}
    nav.primary a{font-size:1.15rem; padding:16px 4px; border-bottom:1px solid var(--line-on-ink); border-radius:0;}
    nav.primary a:hover{background:none;}
    .menu-toggle{display:inline-flex;}
    .nav-cta{display:none;}
  }


  /* ---------- Tron-style strip ---------- */
  :root{ --tron:#6FF3FF; --tron-deep:#1BA9C4; }
  .page{padding:0;}
  .tron-strip{
    position:relative; overflow:hidden; height:88px;
    background:
      linear-gradient(90deg,rgba(111,243,255,.07) 1px,transparent 1px) 0 0/44px 44px,
      linear-gradient(0deg,rgba(111,243,255,.07) 1px,transparent 1px) 0 0/44px 44px,
      linear-gradient(180deg,#04090C 0%,#0A1216 50%,#04090C 100%);
    border-bottom:1px solid rgba(111,243,255,0.35);
    box-shadow:0 1px 18px rgba(111,243,255,0.18);
  }
  .tron-strip::before{ /* top glow line */
    content:""; position:absolute; left:0; right:0; top:0; height:1px;
    background:linear-gradient(90deg,transparent,rgba(111,243,255,.7),transparent);
  }
  .tron-grid{
    position:absolute; inset:0; width:100%; height:100%;
    stroke:var(--tron); stroke-width:1; opacity:.5;
  }
  .tron-grid line{vector-effect:non-scaling-stroke;}
  .tron-horizon{
    position:absolute; left:0; right:0; top:44px; height:1px;
    background:linear-gradient(90deg,transparent,var(--tron) 20%,var(--tron) 80%,transparent);
    box-shadow:0 0 10px var(--tron), 0 0 22px rgba(111,243,255,.5);
  }
  .trail{
    position:absolute; left:0; height:2px; width:240px; border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--tron));
    box-shadow:0 0 8px var(--tron), 0 0 16px rgba(111,243,255,.55);
    transform:translateX(-260px);
  }
  .trail::after{
    content:""; position:absolute; right:0; top:-2px; width:8px; height:6px; border-radius:3px;
    background:#fff; box-shadow:0 0 10px #fff, 0 0 18px var(--tron);
  }
  .trail.t1{top:17px;}
  .trail.t2{top:62px; width:170px; background:linear-gradient(90deg,transparent,var(--leaf-light)); box-shadow:0 0 8px var(--leaf), 0 0 16px rgba(127,168,92,.6);}
  .trail.t2::after{box-shadow:0 0 10px #fff, 0 0 18px var(--leaf-light);}
  .trail.t3{top:77px; width:300px;}
  @media (prefers-reduced-motion:no-preference){
    .trail{animation:cycle 7s linear infinite;}
    .trail.t1{animation-duration:6.5s;}
    .trail.t2{animation-duration:9s; animation-delay:-3s;}
    .trail.t3{animation-duration:5.2s; animation-delay:-1.5s;}
    @keyframes cycle{to{transform:translateX(calc(100vw + 40px));}}
  }
  @media (prefers-reduced-motion:reduce){
    .trail.t1{transform:translateX(12vw);} .trail.t2{transform:translateX(58vw);} .trail.t3{transform:translateX(84vw);}
  }
  @media (max-width:860px){
    .tron-strip{height:64px;}
    .tron-horizon{top:32px;}
    .trail.t1{top:12px;} .trail.t2{top:44px;} .trail.t3{top:55px;}
  }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:13px 22px; border-radius:8px; font-weight:600;
    font-size:0.98rem; text-decoration:none; border:none; cursor:pointer;
    transition:background-color .15s ease, color .15s ease, border-color .15s ease;
  }
  .btn-primary{background:var(--leaf-deep); color:var(--white);}
  .btn-primary:hover{background:var(--leaf); color:var(--ink);}
  .btn-ghost-ink{background:transparent; color:var(--white); border:1px solid var(--line-on-ink);}
  .btn-ghost-ink:hover{border-color:var(--leaf-light); color:var(--leaf-light);}
  .btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
  .btn-ghost:hover{border-color:var(--leaf-deep); color:var(--leaf-deep);}

  /* ---------- Pages ---------- */
  .page{display:none;}
  .page.active{display:block;}

  section{padding:88px 0;}
  @media (max-width:700px){ section{padding:60px 0;} }

  /* ---------- Hero ---------- */
  .hero{
    background:var(--ink); color:var(--white); padding-top:0;
    position:relative; overflow:hidden;
  }
  .hero .wrap{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px;
    align-items:center; padding-top:64px; padding-bottom:76px;
    position:relative; z-index:2;
  }
  .hero-watermark{
    position:absolute; right:-120px; top:-140px; width:640px; height:640px;
    opacity:0.12; z-index:1; pointer-events:none;
  }
  .hero h1{color:var(--white); font-size:clamp(2.3rem, 4.6vw, 3.6rem);}
  .hero p.lede{color:var(--cream-soft); font-size:1.14rem; max-width:52ch;}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px;}
  .hero-figure{
    border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-on-ink);
    background:#000;
  }
  .hero-figure img{width:100%; height:100%; object-fit:cover;}
  .hero-figure-cap{
    display:flex; justify-content:space-between; gap:12px;
    font-size:0.86rem; color:var(--cream-soft); margin-top:12px;
  }
  .hero-figure-cap strong{color:var(--leaf-light); font-weight:600;}

  @media (prefers-reduced-motion:no-preference){
    .hero-anim{opacity:0; transform:translateY(14px); animation:heroIn .7s ease forwards;}
    .hero-anim.d1{animation-delay:.05s;}
    .hero-anim.d2{animation-delay:.16s;}
    .hero-anim.d3{animation-delay:.27s;}
    .hero-anim.d4{animation-delay:.38s;}
    @keyframes heroIn{to{opacity:1; transform:translateY(0);}}
  }

  @media (max-width:900px){
    .hero .wrap{grid-template-columns:1fr; padding-top:44px;}
    .hero-figure{order:-1;}
  }

  /* ---------- Section headers ---------- */
  .section-head{max-width:640px; margin-bottom:48px;}
  .section-head p{color:#3B3D34;}
  .page-head{
    background:var(--cream-soft); padding:64px 0 48px; margin-top:0;
  }
  .page-head .wrap{max-width:760px;}
  .page-head p{color:#3B3D34; font-size:1.08rem;}

  /* ---------- Two-segment grid ---------- */
  .segments{
    display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:stretch;
  }
  @media (max-width:860px){ .segments{grid-template-columns:1fr;} }

  .segment-card{
    border-radius:var(--radius); padding:36px; display:flex; flex-direction:column; gap:16px;
  }
  .segment-card.volt{background:var(--ink); color:var(--white);}
  .segment-card.volt p{color:var(--cream-soft);}
  .segment-card.tech{background:var(--cream-soft); border:1px solid var(--line);}
  .segment-tag{
    font-size:0.86rem; color:var(--leaf-light); font-weight:500;
  }
  .segment-card.tech .segment-tag{color:var(--leaf-deep);}
  .segment-card h3{font-size:1.6rem;}
  .fact-list{display:flex; flex-direction:column; gap:10px; margin:6px 0 8px;}
  .fact-list li{display:flex; gap:10px; align-items:flex-start; font-size:0.96rem;}
  .fact-list svg{flex:none; width:19px; height:19px; margin-top:2px;}
  .segment-card.volt .fact-list{color:var(--cream-soft);}
  .segment-card.tech .fact-list{color:#2C2E26;}

  /* ---------- Vehicle chips ---------- */
  .chip-row{display:flex; gap:10px; flex-wrap:wrap; margin:4px 0 10px;}
  .chip{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--white); border:1px solid var(--line);
    padding:8px 14px; border-radius:100px; font-size:0.88rem; color:var(--ink);
  }
  .chip svg{width:16px; height:16px;}

  /* ---------- VOLTR strip ---------- */
  .voltr-strip{background:var(--cream);}
  .strip-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
  @media (max-width:900px){ .strip-grid{grid-template-columns:1fr;} }
  .fact-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:26px 0 30px;}
  .fact-box{border-top:2px solid var(--leaf-deep); padding-top:12px;}
  .fact-box .num{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.5rem;}
  .fact-box .lbl{font-size:0.9rem; color:#4A4C40;}
  .map-frame{
    border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
    height:340px;
  }
  .map-frame iframe{width:100%; height:100%; border:0;}
  .station-photo{background:#000; height:auto;}

  /* ---------- Values / how-it-works ---------- */
  .values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
  @media (max-width:900px){ .values-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .values-grid{grid-template-columns:1fr;} }
  .value-item svg{width:30px; height:30px; margin-bottom:14px;}
  .value-item h3{font-size:1.08rem; margin-bottom:6px;}
  .value-item p{font-size:0.94rem; color:#3B3D34;}

  .steps{display:flex; flex-direction:column; gap:0; max-width:760px;}
  .step{
    display:grid; grid-template-columns:48px 1fr; gap:20px;
    padding:26px 0; border-top:1px solid var(--line);
  }
  .step:last-child{border-bottom:1px solid var(--line);}
  .step-num{
    font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:1.2rem;
    color:var(--leaf-deep);
  }
  .step h3{font-size:1.08rem; margin-bottom:4px;}
  .step p{font-size:0.96rem; color:#3B3D34; margin:0;}

  /* ---------- Quote / vision ---------- */
  .vision{background:var(--ink); color:var(--white);}
  .vision .wrap{max-width:820px;}
  .vision p.quote{
    font-family:'Space Grotesk', sans-serif; font-weight:500;
    font-size:clamp(1.4rem, 2.8vw, 2rem); line-height:1.4; color:var(--white);
    max-width:none;
  }
  .vision .attribution{color:var(--leaf-light); font-size:0.95rem; margin-top:18px;}

  /* ---------- CTA banner ---------- */
  .cta-banner{background:var(--ink); color:var(--white);}
  .cta-banner .wrap{
    display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap;
  }
  .cta-banner h2{color:var(--white); max-width:480px; font-size:clamp(1.5rem,3vw,2.1rem);}

  /* ---------- Story / about layout ---------- */
  .story-grid{display:grid; grid-template-columns:1.3fr 0.7fr; gap:56px; align-items:start;}
  @media (max-width:900px){ .story-grid{grid-template-columns:1fr;} }
  .story-side{
    background:var(--cream-soft); border-radius:var(--radius); padding:28px;
    border:1px solid var(--line);
  }
  .story-side h3{font-size:1.05rem;}
  .story-side .gst{font-size:0.86rem; color:#4A4C40; margin-top:18px; padding-top:18px; border-top:1px solid var(--line);}

  /* ---------- Contact ---------- */
  .contact-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start;}
  @media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }

  form.contact-form{display:flex; flex-direction:column; gap:18px;}
  .field{display:flex; flex-direction:column; gap:6px;}
  .field label{font-size:0.92rem; font-weight:500;}
  .field input, .field select, .field textarea{
    font-family:'IBM Plex Sans', sans-serif; font-size:1rem;
    padding:13px 14px; border-radius:8px; border:1px solid #CFCBB4;
    background:var(--white); color:var(--ink);
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    border-color:var(--leaf-deep);
  }
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  @media (max-width:560px){ .field-row{grid-template-columns:1fr;} }
  .form-note{font-size:0.86rem; color:#5A5C4E;}
  .form-success{
    display:none; background:var(--cream-soft); border:1px solid var(--leaf);
    border-radius:8px; padding:16px 18px; font-size:0.95rem; color:var(--ink);
  }
  .form-success.show{display:block;}
  .form-error{
    display:none; background:#FBEDE8; border:1px solid #C9694B;
    border-radius:8px; padding:16px 18px; font-size:0.95rem; color:var(--ink);
  }
  .form-error.show{display:block;}
  .form-error a{color:var(--leaf-deep); font-weight:600;}
  .contact-form button[disabled]{opacity:.6; cursor:progress;}

  .info-card{
    background:var(--ink); color:var(--white); border-radius:var(--radius);
    padding:30px; margin-bottom:22px;
  }
  .info-card h3{color:var(--white); font-size:1.15rem;}
  .info-card .addr{color:var(--cream-soft); font-size:0.98rem; margin-bottom:14px;}
  .info-row{display:flex; gap:10px; align-items:flex-start; font-size:0.92rem; color:var(--cream-soft); margin-top:10px;}
  .info-row svg{width:17px; height:17px; flex:none; margin-top:2px; color:var(--leaf-light);}
  .info-card a.dir{color:var(--leaf-light); text-decoration:none; font-weight:600; font-size:0.94rem;}
  .info-card a.dir:hover{text-decoration:underline;}

  .contact-alt{
    border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  }
  .contact-alt h3{font-size:1.02rem;}
  .contact-alt a{color:var(--leaf-deep); text-decoration:none; font-weight:600;}
  .contact-alt a:hover{text-decoration:underline;}

  /* ---------- Footer ---------- */
  footer{background:var(--ink); color:var(--cream-soft); padding:56px 0 30px;}
  .footer-grid{
    display:grid; grid-template-columns:1.4fr 0.8fr 0.8fr; gap:40px;
    padding-bottom:32px; border-bottom:1px solid var(--line-on-ink);
  }
  @media (max-width:760px){ .footer-grid{grid-template-columns:1fr; gap:28px;} }
  .footer-brand{display:flex; gap:12px; align-items:center; margin-bottom:14px;}
  .footer-brand svg{width:32px; height:32px;}
  .footer-brand strong{font-family:'Space Grotesk', sans-serif; color:var(--white); font-size:1.05rem;}
  footer h4{color:var(--white); font-size:0.92rem; margin-bottom:14px; font-weight:600;}
  footer ul li{margin-bottom:10px;}
  footer ul li a{color:var(--cream-soft); text-decoration:none; font-size:0.94rem;}
  footer ul li a:hover{color:var(--leaf-light);}
  .footer-bottom{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    padding-top:22px; font-size:0.84rem; color:#9A9C8C;
  }

  /* ---------- Divider leaf motif ---------- */
  .leaf-divider{display:flex; align-items:center; gap:14px; margin:0 0 20px;}
  .leaf-divider svg{width:22px; height:22px; flex:none;}
  .leaf-divider .line{height:1px; background:var(--line); flex:1;}

  /* ---------- Added for multi-page SEO build ---------- */
  .text-link{color:var(--leaf-deep); font-weight:600; text-decoration:none; font-size:0.95rem;}
  .text-link:hover{text-decoration:underline;}
  .audience-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  @media (max-width:860px){ .audience-grid{grid-template-columns:1fr;} }
  .audience-card{background:var(--cream-soft); border:1px solid var(--line); border-radius:var(--radius); padding:28px;}
  .audience-card h3{font-size:1.12rem;}
  .audience-card p{font-size:0.95rem; color:#3B3D34; margin:0;}
  .faq{max-width:760px;}
  .faq details{border-top:1px solid var(--line); padding:18px 0;}
  .faq details:last-child{border-bottom:1px solid var(--line);}
  .faq summary{cursor:pointer; font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:1.08rem; list-style:none; display:flex; justify-content:space-between; gap:16px;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:"+"; color:var(--leaf-deep); font-size:1.4rem; line-height:1;}
  .faq details[open] summary::after{content:"\2212";}
  .faq details p{margin:12px 0 0; color:#3B3D34; font-size:0.97rem;}