/* ═══════════════════════════════════════════════════════════════════════════
   VARIANTS — Per-slug design differentiation (M2: 15 per dimension)
   body class = "hero-v{1-15} type-v{1-15} cards-v{1-15} accent-v{1-15}"
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ TYPOGRAPHY (15) ═══ */
body.type-v1 { font-family: 'Inter', system-ui, sans-serif; }
body.type-v1 h1, body.type-v1 h2, body.type-v1 h3, body.type-v1 .logo-text { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; letter-spacing: -0.02em; }

body.type-v2 { font-family: 'IBM Plex Sans', system-ui, sans-serif; }
body.type-v2 h1, body.type-v2 h2, body.type-v2 h3, body.type-v2 .logo-text { font-family: 'Fraunces', 'Times New Roman', serif; font-weight: 700; letter-spacing: -0.015em; font-variation-settings: 'opsz' 144; }

body.type-v3 { font-family: 'DM Sans', system-ui, sans-serif; }
body.type-v3 h1, body.type-v3 h2, body.type-v3 h3, body.type-v3 .logo-text { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; letter-spacing: -0.02em; }

body.type-v4 { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.005em; }
body.type-v4 h1, body.type-v4 h2, body.type-v4 h3, body.type-v4 .logo-text { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.035em; }

body.type-v5 { font-family: 'Rubik', system-ui, sans-serif; }
body.type-v5 h1, body.type-v5 h2, body.type-v5 h3, body.type-v5 .logo-text { font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; }
body.type-v5 h1 { letter-spacing: 0.01em; font-size: clamp(2.4rem, 5vw, 4.2rem); }

body.type-v6 { font-family: 'Lato', system-ui, sans-serif; }
body.type-v6 h1, body.type-v6 h2, body.type-v6 h3, body.type-v6 .logo-text { font-family: 'Alfa Slab One', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }

body.type-v7 { font-family: 'Roboto', system-ui, sans-serif; }
body.type-v7 h1, body.type-v7 h2, body.type-v7 h3, body.type-v7 .logo-text { font-family: 'Big Shoulders Display', Impact, sans-serif; font-weight: 800; letter-spacing: 0.005em; text-transform: uppercase; }
body.type-v7 h1 { font-size: clamp(2.6rem, 5.5vw, 4.6rem); }

body.type-v8 { font-family: 'Work Sans', system-ui, sans-serif; }
body.type-v8 h1, body.type-v8 h2, body.type-v8 h3, body.type-v8 .logo-text { font-family: 'Rozha One', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }

body.type-v9 { font-family: 'Karla', system-ui, sans-serif; }
body.type-v9 h1, body.type-v9 h2, body.type-v9 h3, body.type-v9 .logo-text { font-family: 'Abril Fatface', Georgia, serif; font-weight: 400; letter-spacing: 0; }

body.type-v10 { font-family: 'Nunito Sans', system-ui, sans-serif; }
body.type-v10 h1, body.type-v10 h2, body.type-v10 h3, body.type-v10 .logo-text { font-family: 'Prata', Georgia, serif; font-weight: 400; letter-spacing: -0.005em; }

body.type-v11 { font-family: 'Manrope', system-ui, sans-serif; }
body.type-v11 h1, body.type-v11 h2, body.type-v11 h3, body.type-v11 .logo-text { font-family: 'Archivo Black', Impact, sans-serif; letter-spacing: -0.02em; }

body.type-v12 { font-family: 'Open Sans', system-ui, sans-serif; }
body.type-v12 h1, body.type-v12 h2, body.type-v12 h3, body.type-v12 .logo-text { font-family: 'Anton', Impact, sans-serif; font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; }

body.type-v13 { font-family: 'Montserrat', system-ui, sans-serif; }
body.type-v13 h1, body.type-v13 h2, body.type-v13 h3, body.type-v13 .logo-text { font-family: 'Libre Baskerville', Georgia, serif; font-weight: 700; letter-spacing: -0.01em; }

body.type-v14 { font-family: 'Outfit', system-ui, sans-serif; letter-spacing: -0.005em; }
body.type-v14 h1, body.type-v14 h2, body.type-v14 h3, body.type-v14 .logo-text { font-family: 'Outfit', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.035em; }

body.type-v15 { font-family: 'Poppins', system-ui, sans-serif; }
body.type-v15 h1, body.type-v15 h2, body.type-v15 h3, body.type-v15 .logo-text { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; letter-spacing: -0.015em; }


/* ═══ HERO LAYOUTS (15) ═══ */

/* v1 — split-right (classic) */
body.hero-v1 .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 56px; }

/* v2 — split-left (mirrored) */
body.hero-v2 .hero-grid { grid-template-columns: 0.9fr 1.1fr; gap: 56px; direction: rtl; }
body.hero-v2 .hero-grid > * { direction: ltr; }

/* v3 — centered-overlay */
body.hero-v3 .hero { padding: 120px 0 100px; text-align: center; }
body.hero-v3 .hero-grid { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; }
body.hero-v3 .hero-badges { justify-content: center; }
body.hero-v3 .hero-text h1 { font-size: clamp(2.8rem, 6vw, 5.2rem); }
body.hero-v3 .lead-form-card { max-width: 560px; margin: 40px auto 0; }

/* v4 — stacked-magazine (bold gradient band + offset form) */
body.hero-v4 .hero { padding: 0; }
body.hero-v4 .hero-grid { grid-template-columns: 1fr; gap: 0; }
body.hero-v4 .hero-text { padding: 100px 8vw; background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); color: #fff; }
body.hero-v4 .hero-text h1 { font-size: clamp(3rem, 7vw, 6rem); line-height: 0.95; }
body.hero-v4 .hero-text .hero-subtitle { max-width: 620px; font-size: 1.15rem; opacity: 0.92; }
body.hero-v4 .lead-form-card { padding: 40px; background: #fff; margin: -60px auto 40px; max-width: 760px; position: relative; z-index: 2; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.25); }

/* v5 — postcard-framed (offset shadow, bordered card) */
body.hero-v5 .hero { padding: 48px 0; background: transparent; }
body.hero-v5 .hero .container { border: 2px solid var(--primary); border-radius: 24px; padding: 56px; background: #fff; box-shadow: 12px 12px 0 0 var(--primary); }
body.hero-v5 .hero-grid { grid-template-columns: 1.2fr 1fr; gap: 48px; }
body.hero-v5 .hero-text h1 { color: var(--primary-dark); }

/* v6 — billboard (massive headline, minimal form underneath) */
body.hero-v6 .hero { padding: 140px 0 60px; background: linear-gradient(180deg, var(--gradient-start) 60%, transparent 60%); text-align: center; }
body.hero-v6 .hero-grid { grid-template-columns: 1fr; max-width: 1100px; margin: 0 auto; color: #fff; }
body.hero-v6 .hero-text h1 { font-size: clamp(3.5rem, 9vw, 7rem); line-height: 0.9; color: #fff; }
body.hero-v6 .hero-badges { justify-content: center; }
body.hero-v6 .hero-badges .hero-badge { color: #fff; }
body.hero-v6 .lead-form-card { max-width: 640px; margin: 50px auto 0; background: #fff; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.4); }

/* v7 — asymmetric-grid (offset image, angled divider) */
body.hero-v7 .hero { position: relative; overflow: hidden; padding: 80px 0; }
body.hero-v7 .hero::before { content: ''; position: absolute; top: 0; bottom: 0; left: 55%; right: 0; background: linear-gradient(135deg, var(--primary-light), var(--accent)); transform: skewX(-8deg); transform-origin: top left; z-index: 0; }
body.hero-v7 .hero .container { position: relative; z-index: 1; }
body.hero-v7 .hero-grid { grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }

/* v8 — ticket-strip (horizontal bold band headline, form below full-width) */
body.hero-v8 .hero { padding: 0; }
body.hero-v8 .hero-grid { grid-template-columns: 1fr; gap: 0; }
body.hero-v8 .hero-text { background: var(--gray-900, #111); color: #fff; padding: 70px 8vw; border-bottom: 8px solid var(--accent); }
body.hero-v8 .hero-text h1 { font-size: clamp(2.6rem, 6vw, 5rem); color: #fff; }
body.hero-v8 .hero-badges .hero-badge { color: #fff; opacity: 0.85; }
body.hero-v8 .lead-form-card { max-width: 1040px; margin: -40px auto 40px; padding: 32px 40px; box-shadow: 0 24px 60px -18px rgba(0,0,0,0.25); }

/* v9 — storyteller (narrow-left column, sticky form right rail) */
body.hero-v9 .hero { padding: 60px 0; }
body.hero-v9 .hero-grid { grid-template-columns: 1fr 0.8fr; gap: 80px; align-items: start; }
body.hero-v9 .hero-text { max-width: 520px; }
body.hero-v9 .hero-text h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.05; }
body.hero-v9 .lead-form-card { position: sticky; top: 100px; }

/* v10 — minimalist (tiny brand up top, huge single-word feel, form minimal below) */
body.hero-v10 .hero { padding: 160px 0 80px; text-align: left; background: #fafafa; }
body.hero-v10 .hero-grid { grid-template-columns: 1fr; max-width: 980px; margin: 0 auto; }
body.hero-v10 .hero-text h1 { font-size: clamp(3.5rem, 8vw, 6.5rem); line-height: 0.95; margin-bottom: 24px; }
body.hero-v10 .hero-text .hero-subtitle { font-size: 1.15rem; max-width: 580px; }
body.hero-v10 .lead-form-card { max-width: 760px; margin: 56px 0 0; background: #fff; border: 1px solid #e5e5e5; box-shadow: none; }

/* v11 — three-column (text, image slot, form) */
body.hero-v11 .hero { padding: 80px 0; }
body.hero-v11 .hero-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; align-items: center; }

/* v12 — diagonal-split (clip-path wedge, colored right) */
body.hero-v12 .hero { position: relative; overflow: hidden; padding: 100px 0; }
body.hero-v12 .hero::after { content: ''; position: absolute; inset: 0 0 0 40%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%); z-index: 0; }
body.hero-v12 .hero .container { position: relative; z-index: 1; }
body.hero-v12 .hero-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
body.hero-v12 .lead-form-card { color: inherit; }

/* v13 — retro (thick borders, warm palette) */
body.hero-v13 .hero { padding: 48px 0; }
body.hero-v13 .hero .container { border: 6px solid var(--accent); padding: 48px; background: #fef9f0; border-radius: 0; }
body.hero-v13 .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 48px; }
body.hero-v13 .hero-text h1 { color: var(--primary-dark); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.15em; text-decoration-thickness: 4px; }
body.hero-v13 .lead-form-card { border: 2px solid var(--primary-dark); box-shadow: 8px 8px 0 var(--primary-dark); background: #fff; }

/* v14 — stack-centered-dark (dark backdrop, centered) */
body.hero-v14 .hero { background: var(--gray-900, #111); color: #fff; padding: 100px 0; text-align: center; }
body.hero-v14 .hero-grid { grid-template-columns: 1fr; max-width: 780px; margin: 0 auto; }
body.hero-v14 .hero-text h1 { color: #fff; font-size: clamp(2.8rem, 6vw, 5rem); }
body.hero-v14 .hero-text .hero-subtitle { color: rgba(255,255,255,0.75); }
body.hero-v14 .hero-badges { justify-content: center; }
body.hero-v14 .hero-badges .hero-badge { color: #fff; }
body.hero-v14 .lead-form-card { margin: 40px auto 0; max-width: 560px; background: #fff; color: #111; }

/* v15 — brochure-fold (3-panel layout with form in center panel) */
body.hero-v15 .hero { padding: 80px 0; background: linear-gradient(180deg, transparent 0, #fafafa 100%); }
body.hero-v15 .hero-grid { grid-template-columns: 1fr 1.1fr 1fr; gap: 24px; align-items: stretch; }
body.hero-v15 .hero-text { background: var(--primary); color: #fff; padding: 40px; border-radius: 16px 0 0 16px; display: flex; flex-direction: column; justify-content: center; }
body.hero-v15 .hero-text h1 { color: #fff; font-size: clamp(2.2rem, 3.6vw, 3.2rem); }
body.hero-v15 .lead-form-card { border-radius: 0; border-left: 1px solid rgba(0,0,0,0.08); border-right: 1px solid rgba(0,0,0,0.08); }


/* ═══ CARD STYLES (15) ═══
   Targets cards across sections: .step, .charity-card, .vehicle-card, .benefit-card,
   .testimonial-card, .story-card, .seasonal-card, .resource-card, .faq-item, .nearby-link */

/* shared selector list mostly via a common rule; variants override */
.step, .charity-card, .vehicle-card, .benefit-card, .testimonial-card, .story-card, .seasonal-card, .resource-card { transition: transform .25s, box-shadow .25s; }

/* v1 — soft-shadow */
body.cards-v1 .step, body.cards-v1 .charity-card, body.cards-v1 .vehicle-card,
body.cards-v1 .benefit-card, body.cards-v1 .testimonial-card, body.cards-v1 .story-card,
body.cards-v1 .seasonal-card, body.cards-v1 .resource-card {
  background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
body.cards-v1 .step:hover, body.cards-v1 .charity-card:hover, body.cards-v1 .vehicle-card:hover,
body.cards-v1 .benefit-card:hover, body.cards-v1 .testimonial-card:hover, body.cards-v1 .story-card:hover,
body.cards-v1 .seasonal-card:hover, body.cards-v1 .resource-card:hover {
  transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.14);
}

/* v2 — hard-border (brutal, offset shadow on hover) */
body.cards-v2 .step, body.cards-v2 .charity-card, body.cards-v2 .vehicle-card,
body.cards-v2 .benefit-card, body.cards-v2 .testimonial-card, body.cards-v2 .story-card,
body.cards-v2 .seasonal-card, body.cards-v2 .resource-card {
  background: #fff; border: 2px solid #111; border-radius: 4px; box-shadow: none;
}
body.cards-v2 .step:hover, body.cards-v2 .charity-card:hover, body.cards-v2 .vehicle-card:hover,
body.cards-v2 .benefit-card:hover, body.cards-v2 .testimonial-card:hover, body.cards-v2 .story-card:hover,
body.cards-v2 .seasonal-card:hover, body.cards-v2 .resource-card:hover {
  transform: translate(-3px, -3px); box-shadow: 6px 6px 0 0 #111;
}

/* v3 — split-fill (colored top band, white body) */
body.cards-v3 .step, body.cards-v3 .charity-card, body.cards-v3 .vehicle-card,
body.cards-v3 .benefit-card, body.cards-v3 .testimonial-card, body.cards-v3 .story-card,
body.cards-v3 .seasonal-card, body.cards-v3 .resource-card {
  background: linear-gradient(to bottom, var(--primary) 0, var(--primary) 28%, #fff 28%, #fff 100%);
  border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px -8px rgba(0,0,0,0.12);
}

/* v4 — ticket-notch (dashed, cutouts on sides) */
body.cards-v4 .step, body.cards-v4 .charity-card, body.cards-v4 .vehicle-card,
body.cards-v4 .benefit-card, body.cards-v4 .testimonial-card, body.cards-v4 .story-card,
body.cards-v4 .seasonal-card, body.cards-v4 .resource-card {
  background: #fff; border: 1.5px dashed var(--primary); padding: 32px 28px;
  -webkit-mask:
    radial-gradient(14px at 14px 50%, #0000 98%, #000) -14px,
    radial-gradient(14px at calc(100% - 14px) 50%, #0000 98%, #000) 100%;
  -webkit-mask-composite: intersect; mask-composite: intersect;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.1);
}

/* v5 — glass-blur (LIGHT text on dark gradient bg; FIXED readability) */
body.cards-v5 { background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%) fixed; color: #f5f5f5; }
body.cards-v5 section { background: transparent; color: inherit; }
body.cards-v5 .site-header, body.cards-v5 .site-footer { background: rgba(0,0,0,0.35); backdrop-filter: blur(10px); }
body.cards-v5 .logo-text, body.cards-v5 .header-phone a { color: #fff; }
body.cards-v5 h1, body.cards-v5 h2, body.cards-v5 h3 { color: #fff; }
body.cards-v5 p, body.cards-v5 .section-subtitle, body.cards-v5 .tax-guide-text, body.cards-v5 .local-content, body.cards-v5 .env-content { color: rgba(255,255,255,0.9) !important; }
body.cards-v5 .step, body.cards-v5 .charity-card, body.cards-v5 .vehicle-card,
body.cards-v5 .benefit-card, body.cards-v5 .testimonial-card, body.cards-v5 .story-card,
body.cards-v5 .seasonal-card, body.cards-v5 .resource-card, body.cards-v5 .stats-card, body.cards-v5 .tax-checklist {
  background: rgba(255,255,255,0.12); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.25); border-radius: 20px; color: #fff; box-shadow: 0 20px 60px -15px rgba(0,0,0,0.25);
}
body.cards-v5 .step h3, body.cards-v5 .charity-card h3, body.cards-v5 .vehicle-card h3,
body.cards-v5 .benefit-card h3, body.cards-v5 .testimonial-card h3, body.cards-v5 .story-card h3,
body.cards-v5 .seasonal-card h3, body.cards-v5 .resource-card h3 { color: #fff; }
body.cards-v5 .step p, body.cards-v5 .charity-card p, body.cards-v5 .vehicle-card p,
body.cards-v5 .benefit-card p, body.cards-v5 .testimonial-card p, body.cards-v5 .story-card p { color: rgba(255,255,255,0.92) !important; }

/* v6 — flat-color (solid accent fill, no border/shadow) */
body.cards-v6 .step, body.cards-v6 .charity-card, body.cards-v6 .vehicle-card,
body.cards-v6 .benefit-card, body.cards-v6 .testimonial-card, body.cards-v6 .story-card,
body.cards-v6 .seasonal-card, body.cards-v6 .resource-card {
  background: #f4f1ec; border: 0; border-radius: 18px; box-shadow: none; padding: 32px 28px;
}
body.cards-v6 .step:hover, body.cards-v6 .charity-card:hover, body.cards-v6 .vehicle-card:hover,
body.cards-v6 .benefit-card:hover, body.cards-v6 .testimonial-card:hover, body.cards-v6 .story-card:hover,
body.cards-v6 .seasonal-card:hover, body.cards-v6 .resource-card:hover { background: #ece7de; }

/* v7 — pill (highly rounded) */
body.cards-v7 .step, body.cards-v7 .charity-card, body.cards-v7 .vehicle-card,
body.cards-v7 .benefit-card, body.cards-v7 .testimonial-card, body.cards-v7 .story-card,
body.cards-v7 .seasonal-card, body.cards-v7 .resource-card {
  background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 28px; box-shadow: 0 8px 24px -10px rgba(0,0,0,0.1); padding: 36px 32px;
}

/* v8 — sharp-corners (zero radius, crisp) */
body.cards-v8 .step, body.cards-v8 .charity-card, body.cards-v8 .vehicle-card,
body.cards-v8 .benefit-card, body.cards-v8 .testimonial-card, body.cards-v8 .story-card,
body.cards-v8 .seasonal-card, body.cards-v8 .resource-card {
  background: #fff; border: 1px solid rgba(0,0,0,0.1); border-radius: 0; box-shadow: 0 4px 12px -4px rgba(0,0,0,0.08);
}
body.cards-v8 .step:hover, body.cards-v8 .charity-card:hover, body.cards-v8 .vehicle-card:hover,
body.cards-v8 .benefit-card:hover, body.cards-v8 .testimonial-card:hover, body.cards-v8 .story-card:hover,
body.cards-v8 .seasonal-card:hover, body.cards-v8 .resource-card:hover { border-color: var(--primary); }

/* v9 — gradient-fill (subtle gradient bg) */
body.cards-v9 .step, body.cards-v9 .charity-card, body.cards-v9 .vehicle-card,
body.cards-v9 .benefit-card, body.cards-v9 .testimonial-card, body.cards-v9 .story-card,
body.cards-v9 .seasonal-card, body.cards-v9 .resource-card {
  background: linear-gradient(160deg, #fff, #f6f6f9); border: 1px solid rgba(0,0,0,0.05); border-radius: 14px;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.1);
}

/* v10 — outlined-accent (thin border + accent top stripe) */
body.cards-v10 .step, body.cards-v10 .charity-card, body.cards-v10 .vehicle-card,
body.cards-v10 .benefit-card, body.cards-v10 .testimonial-card, body.cards-v10 .story-card,
body.cards-v10 .seasonal-card, body.cards-v10 .resource-card {
  background: #fff; border: 1px solid rgba(0,0,0,0.1); border-top: 4px solid var(--accent); border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* v11 — floating (huge lifted shadow) */
body.cards-v11 .step, body.cards-v11 .charity-card, body.cards-v11 .vehicle-card,
body.cards-v11 .benefit-card, body.cards-v11 .testimonial-card, body.cards-v11 .story-card,
body.cards-v11 .seasonal-card, body.cards-v11 .resource-card {
  background: #fff; border: 0; border-radius: 20px; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.18), 0 10px 20px -10px rgba(0,0,0,0.06);
  transform: translateY(0);
}
body.cards-v11 .step:hover, body.cards-v11 .charity-card:hover, body.cards-v11 .vehicle-card:hover,
body.cards-v11 .benefit-card:hover, body.cards-v11 .testimonial-card:hover, body.cards-v11 .story-card:hover,
body.cards-v11 .seasonal-card:hover, body.cards-v11 .resource-card:hover {
  transform: translateY(-8px); box-shadow: 0 50px 80px -30px rgba(0,0,0,0.25);
}

/* v12 — inset (inner stroke, bordered feel) */
body.cards-v12 .step, body.cards-v12 .charity-card, body.cards-v12 .vehicle-card,
body.cards-v12 .benefit-card, body.cards-v12 .testimonial-card, body.cards-v12 .story-card,
body.cards-v12 .seasonal-card, body.cards-v12 .resource-card {
  background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 7px rgba(0,0,0,0.05);
  padding: 34px 30px;
}

/* v13 — paper (off-white, soft texture via gradient) */
body.cards-v13 .step, body.cards-v13 .charity-card, body.cards-v13 .vehicle-card,
body.cards-v13 .benefit-card, body.cards-v13 .testimonial-card, body.cards-v13 .story-card,
body.cards-v13 .seasonal-card, body.cards-v13 .resource-card {
  background:
    radial-gradient(circle at 20% 10%, rgba(0,0,0,0.02) 0, transparent 50%),
    radial-gradient(circle at 80% 90%, rgba(0,0,0,0.03) 0, transparent 60%),
    #fdfbf6;
  border: 1px solid rgba(0,0,0,0.08); border-radius: 2px; box-shadow: 0 8px 24px -12px rgba(0,0,0,0.15);
}

/* v14 — double-border (retro outline) */
body.cards-v14 .step, body.cards-v14 .charity-card, body.cards-v14 .vehicle-card,
body.cards-v14 .benefit-card, body.cards-v14 .testimonial-card, body.cards-v14 .story-card,
body.cards-v14 .seasonal-card, body.cards-v14 .resource-card {
  background: #fff; border: 1px solid var(--primary); border-radius: 0; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px var(--primary);
  padding: 36px 32px;
}

/* v15 — tab-top (rounded top, square bottom) */
body.cards-v15 .step, body.cards-v15 .charity-card, body.cards-v15 .vehicle-card,
body.cards-v15 .benefit-card, body.cards-v15 .testimonial-card, body.cards-v15 .story-card,
body.cards-v15 .seasonal-card, body.cards-v15 .resource-card {
  background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 16px 16px 2px 2px; border-bottom: 3px solid var(--primary);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.1);
}


/* ═══ ACCENT TREATMENTS (15) ═══ */

/* v1 — gradient stroke under section titles */
body.accent-v1 .section-title::after, body.accent-v1 h2.section-title::after {
  content: ''; display: block; width: 64px; height: 4px; margin-top: 16px;
  background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 2px;
}

/* v2 — solid color divider block between sections */
body.accent-v2 section:not(.hero)::before {
  content: ''; display: block; height: 6px; width: 80px; margin: -50px auto 30px;
  background: var(--accent);
}

/* v3 — dotted pattern on alt sections */
body.accent-v3 .local-content, body.accent-v3 .why-donate, body.accent-v3 .environment, body.accent-v3 .testimonials-section, body.accent-v3 .seasonal-section {
  background-image: radial-gradient(rgba(0,0,0,0.08) 1px, transparent 1px); background-size: 24px 24px;
}

/* v4 — diagonal stripes on CTAs + left bar on titles */
body.accent-v4 .cta-banner { background-image: repeating-linear-gradient(45deg, transparent 0 20px, rgba(255,255,255,0.08) 20px 22px); }
body.accent-v4 .section-title { position: relative; padding-left: 20px; }
body.accent-v4 .section-title::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); border-radius: 2px; }

/* v5 — drop caps on local content */
body.accent-v5 .local-content p:first-of-type::first-letter { font-size: 4.2em; float: left; line-height: 0.85; padding: 6px 14px 0 0; color: var(--primary); font-weight: 800; }
body.accent-v5 blockquote, body.accent-v5 .testimonial { border-left: 4px solid var(--accent); padding-left: 24px; font-style: italic; }

/* v6 — underline stroke on keywords (uses :first-line heuristic for H2) */
body.accent-v6 h2.section-title { background-image: linear-gradient(transparent 72%, var(--accent) 72%, var(--accent) 86%, transparent 86%); background-repeat: no-repeat; background-size: 100% 100%; display: inline; padding: 0 4px; }

/* v7 — section tags as offset chips */
body.accent-v7 .section-tag { background: var(--primary); color: #fff; padding: 6px 16px; border-radius: 999px; font-weight: 700; letter-spacing: 0.05em; display: inline-block; box-shadow: 4px 4px 0 var(--accent); }

/* v8 — bracket frames around pull quotes */
body.accent-v8 blockquote, body.accent-v8 .testimonial { position: relative; padding: 24px 40px; }
body.accent-v8 blockquote::before, body.accent-v8 .testimonial::before { content: '"'; position: absolute; left: 0; top: -10px; font-size: 4rem; color: var(--accent); line-height: 1; font-family: Georgia, serif; }
body.accent-v8 blockquote::after, body.accent-v8 .testimonial::after { content: '"'; position: absolute; right: 10px; bottom: -30px; font-size: 4rem; color: var(--accent); line-height: 1; font-family: Georgia, serif; }

/* v9 — asterisk corner marks on section headings */
body.accent-v9 .section-title::before { content: '✦'; color: var(--accent); margin-right: 10px; }

/* v10 — highlighter behind key intro paragraphs */
body.accent-v10 .section-subtitle { background-image: linear-gradient(180deg, transparent 62%, color-mix(in oklab, var(--accent) 60%, transparent) 62%); display: inline; }

/* v11 — rotated badges on hero-badge */
body.accent-v11 .hero-badges .hero-badge { transform: rotate(-2deg); background: var(--accent); color: #fff; padding: 8px 18px; border-radius: 4px; }
body.accent-v11 .hero-badges .hero-badge:nth-child(2) { transform: rotate(1.5deg); background: var(--primary); }
body.accent-v11 .hero-badges .hero-badge:nth-child(3) { transform: rotate(-1deg); }

/* v12 — checkerboard corner accents */
body.accent-v12 .cta-banner { position: relative; }
body.accent-v12 .cta-banner::before, body.accent-v12 .cta-banner::after {
  content: ''; position: absolute; width: 48px; height: 48px;
  background-image: linear-gradient(45deg, var(--accent) 25%, transparent 25%, transparent 75%, var(--accent) 75%), linear-gradient(45deg, var(--accent) 25%, transparent 25%, transparent 75%, var(--accent) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px;
}
body.accent-v12 .cta-banner::before { top: 0; left: 0; }
body.accent-v12 .cta-banner::after { bottom: 0; right: 0; }

/* v13 — sparkle decorations on hero h1 */
body.accent-v13 .hero-text h1::after { content: ' ✦'; color: var(--accent); }
body.accent-v13 .section-title::after { content: '  ✦'; color: var(--accent); opacity: 0.6; }

/* v14 — big decorative numbers on steps */
body.accent-v14 .step .step-number { font-size: 4.5rem; line-height: 1; color: var(--accent); background: transparent; border: 0; padding: 0; font-weight: 900; }

/* v15 — hand-drawn style underline on hero keyword */
body.accent-v15 .hero-text h1 .city-name { position: relative; display: inline-block; }
body.accent-v15 .hero-text h1 .city-name::after { content: ''; position: absolute; left: -4%; right: -4%; bottom: -6px; height: 12px; background: var(--accent); opacity: 0.55; border-radius: 40% 60% 40% 60% / 40% 60% 50% 50%; z-index: -1; }


/* ═══ HERO TEXT COLOR FIX ═══
   .hero has dark gradient bg + color:#fff in style.css, but h1 inherits
   color:var(--gray-900) from global h1 rule → dark on dark.
   Force hero H1 + subtitle + badges to inherit the hero's white,
   except on variants with LIGHT hero backgrounds (v5 postcard, v10 minimalist, v13 retro). */
.hero h1, .hero .hero-text h1, .hero .hero-subtitle, .hero .hero-badge { color: inherit; }
.hero .city-name { color: var(--accent-light); }

body.hero-v5 .hero-text h1, body.hero-v10 .hero-text h1, body.hero-v13 .hero-text h1 { color: var(--primary-dark); }
body.hero-v5 .hero-subtitle, body.hero-v10 .hero-subtitle, body.hero-v13 .hero-subtitle { color: var(--gray-700, #4a5568); }
body.hero-v5 .hero-badge, body.hero-v10 .hero-badge, body.hero-v13 .hero-badge { color: var(--gray-800, #2d3748); }
body.hero-v5 .city-name, body.hero-v10 .city-name, body.hero-v13 .city-name { color: var(--primary); }

/* v15 brochure-fold: .hero-text has primary bg, form has white bg — keep H1 white on the left panel only */
body.hero-v15 .hero-text h1 { color: #fff; }

/* ═══ LOGO (baseline; replaces hard-coded national-brand markup) ═══ */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; }
.logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-size: 1rem; font-weight: 800; letter-spacing: 0; }
.logo-text { color: inherit; }
.footer-brand { font-size: 1.3rem; font-weight: 800; color: #fff; margin-bottom: 10px; letter-spacing: -0.015em; }