/* =========================================================
   E-HEV HYBRID SPECIALISTS — DESIGN TOKENS
   Palette pulled directly from the workshop vehicle wrap:
   deep black body, circuit-green node pattern, navy wordmark.
   ========================================================= */
:root{
  /* ---- Color ---- */
  --black:        #0a0d0b;   /* base body black (from wrap) */
  --surface:       #10150f;   /* raised dark panels */
  --surface-2:     #161d15;   /* deeper card on dark */
  --navy:          #182544;   /* logo wordmark navy */
  --navy-deep:     #0f1930;
  --green:         #6fcf57;   /* signature circuit green */
  --green-bright:  #9ae86a;   /* hover / glow */
  --green-deep:    #2f6b3c;   /* leaf shadow green */
  --paper:         #f4f7f2;   /* light section background */
  --paper-dim:     #e9ede6;
  --ink:           #0f1310;   /* body text on light */
  --steel:         #93a39c;   /* muted secondary text on dark */
  --steel-dim:     #5c6a63;
  --white:         #ffffff;
  --danger:        #e2694b;

  /* ---- Type ---- */
  --font-display: 'Rajdhani', 'Arial Narrow', sans-serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ---- Layout ---- */
  --container: 1240px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --nav-h: 76px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.16,.84,.44,1);
  --dur-fast: .25s;
  --dur-med: .6s;
  --dur-slow: 1.2s;
}

/* ---------------- Reset ---------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol{ margin:0; }
ul[class], ol[class]{ padding:0; list-style:none; }
img, picture, video, canvas, svg{ display:block; max-width:100%; height:auto; }
button, input, select, textarea{ font: inherit; color: inherit; }
a{ color: inherit; text-decoration:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection{ background: var(--green); color: var(--black); }

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

/* ---------------- Type scale ---------------- */
h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.08;
  text-transform: uppercase;
}
h1{ font-size: clamp(2.6rem, 6vw, 5.2rem); }
h2{ font-size: clamp(2rem, 4.2vw, 3.4rem); }
h3{ font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
h4{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); letter-spacing: .04em; }

p{ color: inherit; }
.lede{
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.65;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
}
.eyebrow::before{
  content:'';
  width:8px; height:8px;
  border-radius:50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(111,207,87,.2), 0 0 10px rgba(111,207,87,.7);
  flex:none;
}

.mono{ font-family: var(--font-mono); }

/* ---------------- Layout utilities ---------------- */
.wrap{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
section{ position: relative; }
.section-pad{ padding-block: clamp(4rem, 9vw, 7.5rem); }
.section-pad-sm{ padding-block: clamp(2.75rem, 6vw, 4.5rem); }

.on-dark{ background: var(--black); color: var(--white); }
.on-surface{ background: var(--surface); color: var(--white); }
.on-paper{ background: var(--paper); color: var(--ink); }
.on-navy{ background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%); color: var(--white); }

.grid{ display:grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
.g-2{ grid-template-columns: repeat(2, 1fr); }
.g-3{ grid-template-columns: repeat(3, 1fr); }
.g-4{ grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px){
  .g-3{ grid-template-columns: repeat(2, 1fr); }
  .g-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .g-2, .g-3, .g-4{ grid-template-columns: 1fr; }
}

.center-col{ text-align:center; max-width: 760px; margin-inline:auto; }

.text-steel{ color: var(--steel); }
.mt-sm{ margin-top: 1rem; } .mt-md{ margin-top: 2rem; } .mt-lg{ margin-top: 3.5rem; }