*{box-sizing:border-box;}
::selection{background:#56B11F;color:#0E3D29;}
body{margin:0;font-family:'Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
input,select,textarea,button{font-family:inherit;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;}

/* Animations */
@keyframes egPulse{0%,100%{opacity:.5;transform:scale(1);}50%{opacity:1;transform:scale(1.25);}}
@keyframes egDash{to{stroke-dashoffset:-380;}}
@keyframes egFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes fadeIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

/* Hero */
.hero-bg{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;background:#0E2A1E;}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(105deg,rgba(11,32,23,.94) 0%,rgba(14,61,41,.86) 42%,rgba(35,40,42,.62) 100%);}
.hero-grid{position:absolute;inset:0;background-image:repeating-linear-gradient(115deg,rgba(86,177,31,.07) 0 1px,transparent 1px 70px);}

/* Page hero (non-home) */
.page-hero{position:relative;background:#0E2A1E;color:#fff;overflow:hidden;padding:150px 0 78px;}
.page-hero-overlay{position:absolute;inset:0;background:linear-gradient(120deg,#0B201A,#14543A);}

/* Stat badge */
.stat-badge{font-size:34px;font-weight:800;color:#fff;letter-spacing:-.02em;}
.stat-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:4px;}

/* Tag pill */
.tag-pill{font-size:13px;background:#F4F6F3;border:1px solid #E6E9E4;border-radius:8px;padding:8px 13px;color:#374239;display:inline-block;}

/* Cards */
.card-hover{transition:transform .25s, box-shadow .25s;}
.card-hover:hover{transform:translateY(-6px);box-shadow:0 26px 50px -26px rgba(14,61,41,.4);}

/* Progress bar */
.progress-bar{height:7px;background:#EEF1EC;border-radius:5px;overflow:hidden;}
.progress-fill{height:100%;background:linear-gradient(90deg,#14543A,#56B11F);}

/* Form inputs */
.form-input{
  width:100%;padding:13px 15px;border:1px solid #d8ddd6;border-radius:10px;
  font-size:15px;color:#1B2620;outline:none;background:#fff;
  transition:border-color .2s, box-shadow .2s;
  font-family:'Archivo',system-ui,sans-serif;
}
.form-input:focus{border-color:#56B11F;box-shadow:0 0 0 3px rgba(86,177,31,.18);}
.form-label{display:block;font-size:13px;font-weight:600;color:#374239;margin-bottom:7px;}
.form-error{background:#fdecec;border:1px solid #f5c2c2;color:#b3261e;font-size:14px;padding:12px 15px;border-radius:10px;margin-top:16px;}
.form-success{text-align:center;padding:40px 24px;}

/* Pulse dot */
.pulse-dot{width:7px;height:7px;border-radius:50%;background:#56B11F;animation:egPulse 2.4s infinite;display:inline-block;}

/* Section label */
.section-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#56B11F;}
.section-label-light{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#9ce06a;}

/* Timeline dot */
.tl-dot{width:16px;height:16px;border-radius:50%;border:3px solid #fff;margin:0 auto;}

/* Region badge */
.badge-active{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#3a8f1e;background:#eef7e7;padding:5px 10px;border-radius:7px;}
.badge-expanding{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#b07d12;background:#fcf3df;padding:5px 10px;border-radius:7px;}

/* Step card */
.step-card{background:#fff;border:1px solid #E6E9E4;border-radius:14px;padding:22px;}

/* CTA band */
.cta-band{background:#14543A;color:#fff;position:relative;overflow:hidden;}

/* Breadcrumb */
.breadcrumb{font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(255,255,255,.55);}
.breadcrumb a:hover{color:#9ce06a;}

/* Utility */
.text-balance{text-wrap:balance;}

/* ═══════════════════════════════════════════════════════════════════════════
   BRAND-COLOR & OPACITY-VARIANT OVERRIDES
   Tailwind Play CDN does not reliably generate opacity-modifier classes
   (text-white/82, bg-white/8) or arbitrary hover values (hover:bg-[#hex])
   at runtime. Every variant actually used in the codebase is declared here
   explicitly so the correct styles always apply.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Solid text colours ──────────────────────────────────────────────────── */
.text-charcoal { color: #23282A; }
.text-forest   { color: #14543A; }
.text-signal   { color: #56B11F; }
.text-lime     { color: #9ce06a; }
.text-darkgrn  { color: #0E3D29; }
.text-deepgrn  { color: #0E2A1E; }
.text-darkbg   { color: #0B201A; }
.text-muted    { color: #6b716c; }
.text-mid      { color: #1c6645; }
.text-surface  { color: #F4F6F3; }
.text-border   { color: #E6E9E4; }

/* ── White text with opacity ─────────────────────────────────────────────── */
.text-white\/82 { color: rgba(255,255,255,.82); }
.text-white\/80 { color: rgba(255,255,255,.80); }
.text-white\/78 { color: rgba(255,255,255,.78); }
.text-white\/75 { color: rgba(255,255,255,.75); }
.text-white\/72 { color: rgba(255,255,255,.72); }
.text-white\/70 { color: rgba(255,255,255,.70); }
.text-white\/66 { color: rgba(255,255,255,.66); }
.text-white\/65 { color: rgba(255,255,255,.65); }
.text-white\/60 { color: rgba(255,255,255,.60); }
.text-white\/55 { color: rgba(255,255,255,.55); }
.text-white\/45 { color: rgba(255,255,255,.45); }
.text-white\/40 { color: rgba(255,255,255,.40); }
.text-white\/86 { color: rgba(255,255,255,.86); }

/* ── Solid background colours ────────────────────────────────────────────── */
.bg-forest   { background-color: #14543A; }
.bg-signal   { background-color: #56B11F; }
.bg-lime     { background-color: #9ce06a; }
.bg-darkgrn  { background-color: #0E3D29; }
.bg-charcoal { background-color: #23282A; }
.bg-deepgrn  { background-color: #0E2A1E; }
.bg-darkbg   { background-color: #0B201A; }
.bg-mid      { background-color: #1c6645; }
.bg-surface  { background-color: #F4F6F3; }
.bg-border   { background-color: #E6E9E4; }

/* ── White backgrounds with opacity ─────────────────────────────────────── */
.bg-white\/5  { background-color: rgba(255,255,255,.05); }
.bg-white\/8  { background-color: rgba(255,255,255,.08); }
.bg-white\/10 { background-color: rgba(255,255,255,.10); }
.bg-white\/16 { background-color: rgba(255,255,255,.16); }
.bg-white\/20 { background-color: rgba(255,255,255,.20); }
.bg-lime\/10  { background-color: rgba(156,224,106,.10); }

/* ── Borders with opacity ────────────────────────────────────────────────── */
.border-forest   { border-color: #14543A; }
.border-signal   { border-color: #56B11F; }
.border-border   { border-color: #E6E9E4; }
.border-charcoal { border-color: #23282A; }
.border-white\/10 { border-color: rgba(255,255,255,.10); }
.border-white\/14 { border-color: rgba(255,255,255,.14); }
.border-white\/15 { border-color: rgba(255,255,255,.15); }
.border-white\/20 { border-color: rgba(255,255,255,.20); }
.border-white\/22 { border-color: rgba(255,255,255,.22); }

/* ── Hover: background colours ───────────────────────────────────────────── */
.hover\:bg-\[\#62c225\]:hover { background-color: #62c225; }
.hover\:bg-darkgrn:hover      { background-color: #0E3D29; }
.hover\:bg-forest:hover       { background-color: #14543A; }
.hover\:bg-white\/16:hover    { background-color: rgba(255,255,255,.16); }
.hover\:bg-white\/20:hover    { background-color: rgba(255,255,255,.20); }
.hover\:bg-white\/10:hover    { background-color: rgba(255,255,255,.10); }
.hover\:bg-\[#62c225\]:hover  { background-color: #62c225; }

/* ── Hover: text colours ─────────────────────────────────────────────────── */
.hover\:text-lime:hover   { color: #9ce06a; }
.hover\:text-forest:hover { color: #14543A; }

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON COMPONENTS
   Explicit button styles so CTAs render correctly on every page without
   relying on Tailwind generating custom-color utility classes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Primary green CTA (Request a Quote) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #56B11F;
  color: #0E3D29;
  font-weight: 700;
  padding: 16px 26px;
  border-radius: 11px;
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background-color .2s, transform .2s, box-shadow .2s;
  font-family: 'Archivo', system-ui, sans-serif;
}
.btn-primary:hover {
  background-color: #62c225;
  color: #0E3D29;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -14px rgba(86,177,31,.65);
}

/* Ghost button (Explore Products / white outline) */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 600;
  padding: 16px 26px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.22);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s;
  font-family: 'Archivo', system-ui, sans-serif;
}
.btn-ghost:hover {
  background-color: rgba(255,255,255,.16);
  color: #fff;
}

/* Dark forest CTA (used on white/light backgrounds) */
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background-color: #14543A;
  color: #fff;
  font-weight: 700;
  padding: 13px 20px;
  border-radius: 10px;
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background-color .2s, transform .15s;
  font-family: 'Archivo', system-ui, sans-serif;
}
.btn-dark:hover {
  background-color: #0E3D29;
  color: #fff;
  transform: translateY(-1px);
}

@media(max-width:768px){
  .page-hero{padding:120px 0 60px;}
  .hero-bg{min-height:80vh;}
}