/* ============================================================
   KUDZU INDUSTRIAL — SITE-WIDE STYLE UPGRADE (v17)
   Restyles the EXISTING shared components (.hero, .card, .btn,
   .section, etc.) to match the redesigned homepage — without
   changing any page's HTML or breaking the cart/calculator/forms.
   Loaded AFTER styles.css so these win.
   ============================================================ */
:root{
  --kx-green:#33D17A; --kx-green-d:#1FA85D; --kx-green-ink:#127a45;
  --kx-ink:#0F231A; --kx-ink-2:#16301F; --kx-ink-3:#1d3b2a;
  --kx-cream:#F3EFE3; --kx-cream-2:#EBE4D2; --kx-rust:#C56B3E;
  --kx-paper:#FBFCFA; --kx-line:rgba(15,35,26,.12);
  --kx-serif:"Source Serif 4",Georgia,serif;
  --kx-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --kx-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}

/* ---------- page hero (inner pages) ---------- */
.hero.hero-page,.hero-page{
  background:var(--kx-ink)!important;color:var(--kx-cream)!important;
  position:relative;overflow:hidden;isolation:isolate;
}
.hero.hero-page::before,.hero-page::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(51,209,122,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(51,209,122,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 90% at 75% 12%,#000 20%,transparent 75%);
          mask-image:radial-gradient(120% 90% at 75% 12%,#000 20%,transparent 75%);
}
.hero-page .hero-inner,.hero-page .container{position:relative;z-index:2}
.hero-page h1{font-family:var(--kx-serif);color:var(--kx-cream)!important;letter-spacing:-.015em;line-height:1.05}
.hero-page .lead{color:rgba(243,239,227,.82)!important}
.hero-page .eyebrow{color:var(--kx-green)!important}

/* ---------- eyebrow (all pages) ---------- */
.eyebrow{
  font-family:var(--kx-mono)!important;font-size:12px!important;letter-spacing:.2em!important;
  text-transform:uppercase;color:var(--kx-green-ink)!important;font-weight:600!important;
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--kx-green);display:inline-block}

/* ---------- headings ---------- */
.section h2,.section-head h2,h2.section-title{
  font-family:var(--kx-serif)!important;letter-spacing:-.015em;color:var(--kx-ink);
}

/* ---------- section rhythm & alt bg ---------- */
.section{padding:72px 0}
.section-alt{
  background:linear-gradient(180deg,var(--kx-cream),var(--kx-paper))!important;
  border-top:1px solid var(--kx-line);border-bottom:1px solid var(--kx-line);
}

/* ---------- cards ---------- */
.card{
  border:1px solid var(--kx-line)!important;border-radius:16px!important;
  background:#fff;box-shadow:0 2px 10px rgba(15,35,26,.04);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{box-shadow:0 16px 36px rgba(15,35,26,.1)}
.two-col{gap:22px}

/* ---------- feature grid / tiles ---------- */
.feature-grid{gap:18px}
.feature{
  border:1px solid var(--kx-line);border-radius:14px;padding:24px;background:#fff;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(15,35,26,.1);border-color:rgba(51,209,122,.4)}
.feature-title{font-family:var(--kx-serif)!important;font-weight:700;font-size:19px;color:var(--kx-ink)}

/* ---------- buttons (match homepage) ---------- */
.btn{
  border-radius:11px!important;font-family:var(--kx-sans)!important;font-weight:700!important;
  letter-spacing:.005em;transition:transform .12s ease, box-shadow .18s ease, background .18s ease!important;
  border:1.5px solid transparent;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary,.btn-primary{
  background:var(--kx-green)!important;color:#07230f!important;border-color:transparent!important;
  box-shadow:0 8px 22px rgba(51,209,122,.32);
}
.btn.primary:hover,.btn-primary:hover{background:#3fdb85!important}
.btn.secondary,.btn-secondary{
  background:var(--kx-ink)!important;color:var(--kx-cream)!important;border-color:var(--kx-ink)!important;
}
.btn.secondary:hover,.btn-secondary:hover{background:var(--kx-ink-3)!important}
/* ghost buttons that sit on the dark hero */
.hero-page .btn.secondary{
  background:transparent!important;color:var(--kx-cream)!important;border-color:rgba(243,239,227,.3)!important;
}
.hero-page .btn.secondary:hover{border-color:var(--kx-cream)!important;background:rgba(243,239,227,.06)!important}

/* ---------- notice / callout ---------- */
.notice{
  background:rgba(51,209,122,.08)!important;border:1px solid rgba(51,209,122,.28)!important;
  border-radius:12px;color:var(--kx-ink);
}

/* ---------- cta banner ---------- */
.cta-banner{padding-bottom:70px}
.cta-banner-inner{
  background:linear-gradient(135deg,var(--kx-ink),var(--kx-ink-3))!important;color:var(--kx-cream)!important;
  border-radius:20px!important;padding:46px 42px!important;position:relative;overflow:hidden;
}
.cta-banner-inner::after{content:"";position:absolute;right:-8%;top:-40%;width:44%;height:180%;
  background:radial-gradient(circle,rgba(51,209,122,.16),transparent 66%);pointer-events:none}
.cta-banner-inner h2{color:var(--kx-cream)!important;font-family:var(--kx-serif)!important;position:relative}
.cta-banner-inner .small,.cta-banner-inner p{color:rgba(243,239,227,.82)!important;position:relative}
.cta-banner-inner .eyebrow{color:var(--kx-green)!important;position:relative}
.cta-banner-actions{position:relative}

/* ---------- split section media ---------- */
.split-media{
  background:linear-gradient(150deg,var(--kx-ink),var(--kx-ink-3))!important;border-radius:16px;
  position:relative;overflow:hidden;min-height:280px;
}
.split-media::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(51,209,122,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(51,209,122,.06) 1px,transparent 1px);
  background-size:34px 34px;opacity:.6}

/* ---------- forms ---------- */
.form-grid input,.form-grid select,.form-grid textarea,
.field input,.field select,.field textarea{
  border-radius:9px!important;border:1px solid #c8d0c6;transition:border-color .15s ease, box-shadow .15s ease;
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--kx-green)!important;box-shadow:0 0 0 4px rgba(51,209,122,.16)!important;
}
.fieldset-title{font-family:var(--kx-mono)!important;letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:var(--kx-green-ink)}

@media (prefers-reduced-motion:reduce){
  .card,.feature,.btn{transition:none}
  .feature:hover,.btn:hover{transform:none}
}

/* ---------- catch other hero variants (products, etc.) ---------- */
.hero.hero-product,.hero-product{
  background:var(--kx-ink)!important;color:var(--kx-cream)!important;
  position:relative;overflow:hidden;isolation:isolate;
}
.hero-product::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(51,209,122,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(51,209,122,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 90% at 75% 12%,#000 20%,transparent 75%);
          mask-image:radial-gradient(120% 90% at 75% 12%,#000 20%,transparent 75%);
}
.hero-product .hero-inner,.hero-product .container{position:relative;z-index:2}
.hero-product h1{font-family:var(--kx-serif);color:var(--kx-cream)!important;letter-spacing:-.015em}
.hero-product .lead{color:rgba(243,239,227,.82)!important}
.hero-product .eyebrow{color:var(--kx-green)!important}
.hero-product .btn.secondary{background:transparent!important;color:var(--kx-cream)!important;border-color:rgba(243,239,227,.3)!important}

/* ---------- pages with a plain section-h1 (contact, specs, installation, legal) ----------
   Give the FIRST section a subtle branded page-header band. */
main > .container > .section:first-child,
main > .section:first-child{
  position:relative;
}
main > .container > .section:first-child h1,
main > .section:first-child > h1{
  font-family:var(--kx-serif);letter-spacing:-.015em;font-size:clamp(30px,4vw,46px);line-height:1.08;
  color:var(--kx-ink);margin-bottom:.35em;
}
main > .container > .section:first-child > h1::after,
main > .section:first-child > h1::after{
  content:"";display:block;width:56px;height:3px;border-radius:2px;
  background:var(--kx-green);margin-top:18px;
}