/* ==========================================================================
   Enovadi Systems — HYBRID THEME
   Loads AFTER style.css and overrides it. Dark hero + dark CTA band + dark
   footer, warm cream everywhere else.
   Delete this file and its <link> tag to return to the all-dark site.
   ========================================================================== */

:root {
  --page-bg:        #FBF8F2;  /* warm cream page background */
  --surface:        #FFFFFF;  /* cards */
  --surface-alt:    #F3EDE1;  /* alternating band */
  --ink:            #17150F;  /* headings */
  --body-ink:       #423C32;  /* body text */
  --muted-ink:      #6B6355;  /* labels, captions */
  --gold-ink:       #856620;  /* brighter gold, still 4.6:1+ on every light bg */
  --gold-ink-hover: #6B4F16;
  --gold-bright:    #9E7B26;  /* for large display type only (01 / 02 / 03) */
  --hairline:       rgba(133, 102, 32, 0.16);
  --hairline-gold:  rgba(133, 102, 32, 0.36);
  --lift:           0 1px 2px rgba(23,21,15,0.04), 0 8px 24px -12px rgba(23,21,15,0.10);
  --lift-hover:     0 2px 4px rgba(23,21,15,0.05), 0 20px 42px -18px rgba(23,21,15,0.20);
}

/* --- Page canvas -------------------------------------------------------- */
body {
  background: var(--page-bg);
  color: var(--body-ink);
}

h1, h2, h3, h4 { color: var(--ink); }
.lead { color: var(--body-ink); }
a { color: var(--gold-ink); }
a:hover { color: var(--gold-ink-hover); }
::selection { background: var(--gold-ink); color: #fff; }

/* --- Section backgrounds ------------------------------------------------ */
.section--raised { background: var(--surface-alt); }
.section--hairline { border-top-color: var(--hairline); }

/* --- Eyebrow ------------------------------------------------------------ */
.eyebrow { color: var(--gold-ink); }
.eyebrow::before { background: linear-gradient(90deg, transparent, var(--gold-ink)); }
.center .eyebrow::after { background: linear-gradient(90deg, var(--gold-ink), transparent); }

/* --- Buttons on light --------------------------------------------------- */
.btn--gold { box-shadow: 0 8px 22px -12px rgba(133, 102, 32, 0.55); }
.btn--gold:hover { box-shadow: 0 14px 32px -12px rgba(133, 102, 32, 0.7); }

.btn--ghost {
  border-color: rgba(23, 21, 15, 0.22);
  color: var(--ink);
}
.btn--ghost:hover {
  border-color: var(--gold-ink);
  color: var(--gold-ink);
  background: rgba(133, 102, 32, 0.06);
}

.arrow-link { color: var(--gold-ink); }

/* --- Header ------------------------------------------------------------- */
/* Transparent over the dark hero, cream once you scroll into the body. */
.site-header.is-stuck {
  background: rgba(251, 248, 242, 0.92);
  border-bottom-color: var(--hairline);
  box-shadow: 0 1px 20px -8px rgba(23, 21, 15, 0.18);
}
.site-header.is-stuck .nav-links a { color: var(--body-ink); }
.site-header.is-stuck .nav-links a:hover,
.site-header.is-stuck .nav-links a[aria-current="page"] { color: var(--gold-ink); }
.site-header.is-stuck .nav-links a::after { background: var(--gold-ink); }
.site-header.is-stuck .nav-toggle { border-color: rgba(23, 21, 15, 0.2); }
.site-header.is-stuck .nav-toggle span { background: var(--gold-ink); }

/* --- Cards -------------------------------------------------------------- */
.card {
  background: var(--surface);
  border-color: var(--hairline);
  box-shadow: var(--lift);
}
.card:hover {
  background: var(--surface);
  border-color: var(--hairline-gold);
  box-shadow: var(--lift-hover);
}
.card p { color: var(--body-ink); }
.card__num { color: var(--gold-bright); opacity: 0.9; }
.card:hover .card__num { opacity: 1; }
.step::before { opacity: 0.9; }

.icon {
  border-color: var(--hairline-gold);
  background: rgba(133, 102, 32, 0.07);
  color: var(--gold-ink);
}
.card:hover .icon { background: var(--gold-ink); color: #fff; }

/* --- Value list --------------------------------------------------------- */
.value-list li,
.value-list li:first-child { border-color: var(--hairline); }
.value-list .mark { border-color: var(--hairline-gold); color: var(--gold-ink); }
.value-list strong { color: var(--ink); }
.value-list p { color: var(--body-ink); }

/* --- Service blocks ----------------------------------------------------- */
.service,
.service:last-of-type { border-color: var(--hairline); }
.service__tag { color: var(--gold-ink); }
.check-list li { color: var(--body-ink); }
/* Same tick, drawn in the darker gold that passes contrast on cream.
   Hard-coded #856620 because custom properties don't work inside a data URI —
   keep it in step with --gold-ink above. */
.check-list li::before {
  border-color: var(--gold-ink);
  background-color: rgba(133, 102, 32, 0.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 4.9 8.6 9.4 3.9' fill='none' stroke='%23856620' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- About: founder + steps --------------------------------------------- */
.founder__seal {
  background: radial-gradient(circle at 35% 30%, #FFFFFF, var(--surface-alt));
  border-color: var(--hairline-gold);
  box-shadow: 0 0 0 10px rgba(133, 102, 32, 0.05), inset 0 0 50px rgba(133, 102, 32, 0.06);
}
.founder__seal::after { border-color: var(--hairline-gold); }
.founder__initials {
  background: linear-gradient(135deg, #C0982F, var(--gold-ink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.step, .step:first-child { border-color: var(--hairline); }
.step::before { color: var(--gold-ink); opacity: 0.75; }
.step h4 { color: var(--ink); }
.step p { color: var(--body-ink); }

/* --- Contact form ------------------------------------------------------- */
.form-card {
  background: var(--surface);
  border-color: var(--hairline);
  box-shadow: var(--lift);
}
.field label { color: var(--gold-ink); }
.field label .opt { color: var(--muted-ink); }

.field input,
.field textarea,
.field select {
  color: var(--ink);
  background: #FDFCF9;
  border-color: rgba(23, 21, 15, 0.16);
}
.field input::placeholder,
.field textarea::placeholder { color: #7A7263; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--gold-ink);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(133, 102, 32, 0.14);
}

.field .error { color: #B03A2B; }
.field.is-invalid input,
.field.is-invalid textarea { border-color: #B03A2B; }
.field input:user-invalid,
.field textarea:user-invalid { border-color: #B03A2B; }

.form-note { color: var(--muted-ink); }

/* Contact form result banners — light-theme colours */
.form-alert--ok {
  background: rgba(133, 102, 32, 0.08);
  border: 1px solid var(--hairline-gold);
  color: var(--gold-ink-hover);
}
.form-alert--err {
  background: rgba(176, 58, 43, 0.07);
  border: 1px solid rgba(176, 58, 43, 0.3);
  color: #B03A2B;
}

/* --- Contact details ---------------------------------------------------- */
.detail-list li { border-color: var(--hairline); }
.detail-list .k { color: var(--muted-ink); }
.detail-list .v { color: var(--ink); }
.detail-list a.v { color: var(--gold-ink); }
.detail-list a.v:hover { color: var(--gold-ink-hover); }

/* --- Legal / prose ------------------------------------------------------ */
.prose h2 { border-top-color: var(--hairline); }
.prose li::marker { color: var(--gold-ink); }
.legal-meta { color: var(--gold-ink); border-color: var(--hairline-gold); }
.callout {
  background: var(--surface-alt);
  border-left-color: var(--gold-ink);
  color: var(--body-ink);
}

/* ==========================================================================
   DARK ZONES — hero, CTA band, footer keep the original black treatment
   ========================================================================== */

.hero {
  background: #1A1A1A;
  border-bottom: 1px solid rgba(201, 162, 77, 0.22);
}
/* the scroll indicator masks itself with the hero colour — keep them in sync */
.scroll-cue::after { background: #1A1A1A; }
/* lift the ambient glows slightly so they still read on the lighter charcoal */
.hero-bg::before { background: radial-gradient(circle, rgba(201,162,77,0.20), transparent 68%); }
.hero-bg::after  { background: radial-gradient(circle, rgba(201,162,77,0.12), transparent 70%); }
.hero h1 { color: var(--cream); }
.hero .lead { color: var(--cream-dim); }
.hero .eyebrow { color: var(--gold); }
.hero .eyebrow::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.hero .btn--ghost { border-color: var(--line); color: var(--cream); }
.hero .btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold-light);
  background: var(--gold-glow);
}
.hero .legal-meta { color: var(--gold); border-color: var(--line); }

.cta-band {
  background: #1E1E1E;
  border-color: rgba(201, 162, 77, 0.22);
}
.cta-band h2 { color: var(--cream); }
.cta-band .lead, .cta-band p { color: var(--cream-dim); }
.cta-band .eyebrow { color: var(--gold); }
.cta-band .eyebrow::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.cta-band .eyebrow::after { background: linear-gradient(90deg, var(--gold), transparent); }
.cta-band .btn--ghost { border-color: var(--line); color: var(--cream); }
.cta-band .btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold-light);
  background: var(--gold-glow);
}

.site-footer { background: #141414; border-top-color: rgba(201, 162, 77, 0.2); }
.site-footer h4 { color: var(--gold); }
.site-footer a { color: var(--cream-dim); }
.site-footer a:hover { color: var(--gold-light); }
.footer-tagline { color: var(--muted); }
.footer-bottom { color: var(--muted); border-top-color: var(--line-soft); }
.footer-bottom a { color: var(--muted); }
.footer-bottom a:hover { color: var(--gold); }

/* --- Mobile menu overlay stays dark for legibility over the hero -------- */
@media (max-width: 860px) {
  .nav-links,
  .site-header.is-stuck .nav-links {
    background: rgba(10, 10, 10, 0.98);
    border-bottom-color: var(--line);
  }
  .nav-links a,
  .site-header.is-stuck .nav-links a { color: var(--cream-dim); }
  .nav-links a:hover,
  .nav-links a[aria-current="page"],
  .site-header.is-stuck .nav-links a:hover,
  .site-header.is-stuck .nav-links a[aria-current="page"] { color: var(--gold-light); }
  .nav-links li { border-bottom-color: var(--line-soft); }
  .nav-links .btn--gold,
  .nav-links .btn--gold:hover { color: var(--black); }
}