/* v3 bold skin override - loads AFTER each ported page's inline style */
:root {
  --grot: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --butter: #e04a38; --butter-dk: #b52619;
  --field: #0e7c4a; --field-deep: #0a5c3c; --cream: #faf5ea;
}
body { font-family: "Inter", system-ui, sans-serif; background: var(--cream); }
h1, h2, h3, h4, .wordmark, .wordmark-f { font-family: var(--grot); }
h1, h2 { font-weight: 700; letter-spacing: -0.02em; }

/* grounds: butter heroes with ink grid; ink bands with white grid */
.dark, .svc-hero {
  background-color: #0e0e0e !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.075) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.075) 0 1px, transparent 1px 56px) !important;
}
.dark h1, .svc-hero h1, .dark h2, .svc-hero h2 { color: #ffffff !important; }
.dark .sub, .svc-hero .sub, .dark p, .svc-hero .kicker, .dark .kicker { color: rgba(255,241,235,0.82) !important; }
.dark .sub strong, .svc-hero .sub strong { color: #ffffff !important; }
.dark .hl, .svc-hero .hl { color: #e04a38 !important; background: none; padding: 0 0.18em; border-radius: 8px; }
.band-outer, .band, .final-band {
  background-color: #121212 !important; border-top: 2px solid #121212; border-bottom: 2px solid #121212;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.09) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.09) 0 1px, transparent 1px 56px);
}
.band h2, .final-band h2 { color: #f2efe9 !important; }
.band p, .final-band p { color: rgba(242,239,233,0.66) !important; }
.final-band { border: 2px solid #121212; box-shadow: 8px 8px 0 rgba(18,18,18,0.35); }

/* buttons - inversion rule: ink on light grounds, butter on ink grounds */
.btn {
  background: #ce2d1f !important; color: #ffffff !important;
  border: 2px solid #131311 !important; border-radius: 14px !important; font-weight: 700 !important;
  box-shadow: 4px 4px 0 #131311;
  transition: transform 0.18s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.18s ease, background 0.18s ease !important;
}
.btn:hover { background: #b02418 !important; transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #131311; }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #131311; }
.btn.ghost { background: #ffffff !important; color: #131311 !important; }

/* nav pill + panels go bold */
.pillnav { border: 2px solid #131311 !important; box-shadow: 4px 4px 0 rgba(19,19,17,0.9); background: rgba(250,245,234,0.85) !important; }
.navwrap .menu-btn, .navwrap .wordmark { color: #131311 !important; }
.panel { border: 2px solid #131311 !important; box-shadow: 6px 6px 0 rgba(19,19,17,0.9) !important; border-radius: 20px !important; }
.panel .cta-card { border: 2px solid #131311; border-radius: 16px; background: #d9f4e6 !important; }

/* card-ish blocks get the bold edge */
.claim, .step, .qa, .fact, .cta-card, .stat, .check, .price, .pillar, .engine, .notecard, .fitcol, .honest {
  border: 2px solid #131311 !important; border-radius: 18px;
  box-shadow: 5px 5px 0 rgba(19,19,17,0.9); background-clip: padding-box;
}
.eyebrow { color: var(--field) !important; font-weight: 700 !important; }
.statement em::before, .big em::before { background: var(--butter) !important; }

.band .btn, .final-band .btn { background: #e04a38 !important; color: #ffffff !important; }
.band .btn:hover, .final-band .btn:hover { background: #ce2d1f !important; }
body { background: #f2efe9; }
.eyebrow { color: #121212 !important; font-family: ui-monospace, Menlo, monospace !important; font-size: 11px !important; letter-spacing: 0.12em !important; }
.cm1 { color: rgba(18,18,18,1) !important; } .cm2 { color: #ce2d1f !important; }
.cm3 { color: rgba(18,18,18,0.55) !important; } .cm4 { color: rgba(18,18,18,0.34) !important; }
.wordmark-f .cm1 { color: rgba(242,239,233,1) !important; } .wordmark-f .cm2 { color: #f0604a !important; }
.wordmark-f .cm3 { color: rgba(242,239,233,0.55) !important; } .wordmark-f .cm4 { color: rgba(242,239,233,0.34) !important; }

.dark .btn, .svc-hero .btn { background: #ce2d1f !important; color: #ffffff !important; }
.dark .btn:hover, .svc-hero .btn:hover { background: #e04a38 !important; }

.ca { color: #ce2d1f !important; }
.wordmark-f .ca { color: #f0604a !important; }