/* ============================================================
   Evergreen Media Design - shared styles for the standalone
   landing pages (/liquor-store-systems/, /broken-website-audit/).

   The homepage keeps its own inline <style> block because it
   carries the Three.js particle scene and the 300vh hero. These
   pages are deliberately light: no WebGL, no three.min.js, so
   they load fast as search landing pages.

   Tokens are copied verbatim from the :root block in index.html,
   which is the brand source of truth. If they change there,
   change them here.
   ============================================================ */

:root {
  --void:      #050f0a;
  --forest:    #0B2B1C;
  --forest-2:  #0e2117;
  --forest-3:  #16301f;
  --moss:      #2C5F3A;
  --sage:      #4D8B60;
  --mint:      #7EC49A;
  --mint-soft: rgba(126,196,154,0.10);
  --cream:     #F5F0E8;
  --text:      #F2EDE4;
  --text-dim:  #B7C6B2;
  --text-muted:#7C8E78;
  --gold:      #C8A84B;
  --gold-lt:   #E5C96A;
  --line:      rgba(125,180,140,0.14);
  --line-2:    rgba(125,180,140,0.26);

  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);

  --edge: clamp(1.25rem, 5vw, 3.25rem);
  --maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--forest);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* the 3% film grain that sits over every surface on the main site */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.95rem, 4.6vw, 3.25rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
h1 em, h2 em, h3 em { font-style: italic; color: var(--mint); }

p { margin: 0 0 1.1rem; }
a { color: var(--mint); text-decoration: none; }
a:hover { color: var(--gold-lt); }

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

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--mint);
  margin-bottom: 1rem;
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--text-dim); line-height: 1.75; max-width: 56ch;
}

/* ── header ─────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,43,28,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0.85rem var(--edge);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.7rem; color: var(--text); }
.brand:hover { color: var(--text); }
.brand-name { display: block; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -0.01em; }
.brand-sub { display: block; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.header-nav { display: flex; align-items: center; gap: 1.4rem; }
.header-nav a { font-size: 0.8rem; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.header-nav a:hover { color: var(--mint); }
.header-nav .nav-cta {
  padding: 0.5rem 1rem; border-radius: 7px;
  background: var(--sage); color: var(--forest); font-weight: 700;
}
.header-nav .nav-cta:hover { background: var(--mint); color: var(--forest); }
@media (max-width: 760px) { .header-nav a:not(.nav-cta) { display: none; } }

/* ── breadcrumb ─────────────────────────────────────────── */
.crumb { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding: 1.4rem 0 0; }
.crumb a { color: var(--text-muted); }
.crumb a:hover { color: var(--mint); }

/* ── sections ───────────────────────────────────────────── */
section { padding: clamp(3.2rem, 8vw, 6rem) 0; }
.rule-top { border-top: 1px solid var(--line); }
.section-head { margin-bottom: 2.6rem; }

.page-hero { padding-top: clamp(2.4rem, 5vw, 4rem); }
.page-hero .lede { margin-top: 1.4rem; }

/* ── buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--font-body); font-weight: 600; font-size: 0.92rem;
  padding: 0.92rem 1.7rem; border-radius: 8px; border: 1px solid transparent;
  transition: transform 0.25s var(--ease-std), background 0.25s, border-color 0.25s, color 0.25s;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--sage); color: var(--forest); }
.btn-primary:hover { background: var(--mint); color: var(--forest); }
.btn-outline { border-color: var(--line-2); color: var(--text); }
.btn-outline:hover { border-color: var(--mint); color: var(--mint); }
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

/* ── cards ──────────────────────────────────────────────── */
.grid { display: grid; gap: 1.25rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

.card {
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(8,20,14,0.28); backdrop-filter: blur(6px);
  padding: 1.6rem 1.5rem;
}
.card h3 { margin-bottom: 0.7rem; }
.card p { color: var(--text-dim); font-size: 0.93rem; line-height: 1.7; margin-bottom: 0; }
.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.card-index { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint); }
.card-no { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--text-muted); }

/* ── checklist ──────────────────────────────────────────── */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
/* NB: the <strong> label and the text after it are separate nodes. With
   grid they become separate grid items and the label gets squeezed into
   its own column, wrapping one word per line. Keep this as a block with
   an absolutely positioned tick so the content flows as one paragraph. */
.checklist li {
  display: block; position: relative;
  padding: 0.9rem 1.1rem 0.9rem 2.7rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(7,18,12,0.4); color: var(--text-dim); font-size: 0.93rem; line-height: 1.65;
}
.checklist li::before {
  content: '\2713'; position: absolute; left: 1.1rem; top: 0.9rem;
  color: var(--gold); font-weight: 700; line-height: 1.65;
}
.checklist strong { color: var(--text); font-weight: 600; }

/* ── stats / price ──────────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; background: rgba(8,20,14,0.18);
  margin-top: 2.2rem;
}
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; } }
.stat { padding: 1.5rem 1.4rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-num { font-family: var(--font-display); font-size: 1.9rem; color: var(--gold); line-height: 1; }
.stat-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin: 0.6rem 0 0.5rem; }
.stat-desc { font-size: 0.86rem; color: var(--text-dim); line-height: 1.6; }

/* ── faq ────────────────────────────────────────────────── */
.faq { display: grid; gap: 0.9rem; }
.faq details { border: 1px solid var(--line); border-radius: 10px; background: rgba(7,18,12,0.4); padding: 1.05rem 1.2rem; }
.faq summary { cursor: pointer; font-family: var(--font-display); font-size: 1.08rem; color: var(--text); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--mint); font-family: var(--font-mono); }
.faq details[open] summary::after { content: '\2212'; }
.faq p { color: var(--text-dim); font-size: 0.93rem; margin: 0.9rem 0 0; }

/* ── contact rows ───────────────────────────────────────── */
.contact-rows { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.8rem; max-width: 520px; }
.contact-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1.1rem; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(7,18,12,0.5); flex-wrap: wrap;
}
a.contact-row { transition: border-color 0.2s, background 0.2s; }
a.contact-row:hover { border-color: var(--line-2); background: rgba(18,40,27,0.56); }
.contact-row .k { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.contact-row .v { font-family: var(--font-mono); font-size: 0.78rem; color: var(--mint); overflow-wrap: anywhere; }

/* ── footer ─────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); padding: 2.2rem 0; margin-top: 2rem; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--edge); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.footer-inner .copy { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-muted); letter-spacing: 0.06em; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-links a { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.footer-links a:hover { color: var(--mint); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}