/*
 * Skin: Ozark (Locksmith Springdale, 2026-11-09).
 * Northwest Arkansas: deep Ozark forest green, limestone paper, worn-copper calls to action, and a sturdy
 * grotesk like stamped key blanks. The hero carries faint contour lines of the plateau, the only decoration.
 * Loaded after style.css when business.json → brand.skin = "ozark". Colors still come from the brand tokens.
 */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("fonts/archivo-latin-var.woff2") format("woff2"); }

:root {
	--sf-font-h: "Archivo", "Arial Narrow", system-ui, sans-serif;
	--sf-radius: 4px;
	--sf-card: #fdfcf8;
	--sf-line: #dcd8cb;
	--sf-soft: #e6ece4;
	--sf-muted: #4f5a53;
	--oz-forest: color-mix(in srgb, var(--sf-primary) 78%, #000);
	--oz-forest-2: var(--sf-primary);
	--oz-copper-text: color-mix(in srgb, var(--sf-accent) 82%, #000);
	--oz-contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='360' viewBox='0 0 640 360'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M-20 300c90-40 150-10 230-50s120-120 220-110 150 70 230 40'/%3E%3Cpath d='M-20 260c80-30 140-6 210-44s110-108 210-100 160 64 240 32'/%3E%3Cpath d='M-20 220c70-24 130-4 190-38s100-96 200-90 170 58 250 26'/%3E%3Cpath d='M-20 180c60-18 120-2 170-32s90-84 190-80 180 52 260 20'/%3E%3Cpath d='M-20 340c100-46 160-14 250-56s130-132 230-120 140 76 220 46'/%3E%3C/g%3E%3C/svg%3E");
	--sf-shadow: 0 1px 2px rgba(16, 36, 29, .07), 0 12px 26px -14px rgba(16, 36, 29, .3);
}

body { caret-color: var(--sf-accent); }
::selection { background: var(--sf-accent); color: #fff; }
:focus-visible { outline-color: var(--sf-accent); }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.02em; font-stretch: 100%; }
h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1.03; }
h2 { font-size: clamp(27px, 3.2vw, 38px); line-height: 1.1; }
h3 { font-weight: 700; letter-spacing: -.005em; }
a { color: var(--oz-copper-text); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--sf-ink); }

/* Kicker above headings: small caps in copper, like a stamp on a key bow */
.sf-eyebrow { font-family: var(--sf-font-h); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px; color: var(--oz-copper-text); }
.sf-hero .sf-eyebrow, .sf-pagehead .sf-eyebrow { color: color-mix(in srgb, var(--sf-accent) 45%, #fff); }

/* Buttons: squared, heavy, copper */
.sf-btn, .wp-block-button__link { border-radius: var(--sf-radius); font-family: var(--sf-font-h); font-weight: 700; letter-spacing: .01em; transition: transform .2s cubic-bezier(.16, 1, .3, 1), background-color .2s, box-shadow .2s; }
.sf-btn:active, .wp-block-button__link:active { transform: translateY(1px); }
.sf-btn--accent, .wp-block-button__link { background: var(--sf-accent); color: #fff; box-shadow: 0 2px 0 color-mix(in srgb, var(--sf-accent) 60%, #000); }
.sf-btn--accent:hover, .wp-block-button__link:hover { background: color-mix(in srgb, var(--sf-accent) 88%, #000); color: #fff; }
.sf-btn--primary { background: var(--oz-forest); color: #fff; }

/* Top bar and header */
.sf-topbar { background: var(--oz-forest); color: #dfe8e1; }
.sf-topbar .sf-i { color: color-mix(in srgb, var(--sf-accent) 55%, #fff); }
.sf-header { background: var(--sf-card); border-bottom: 1px solid var(--sf-line); }
.sf-nav a { font-weight: 600; border-radius: var(--sf-radius); }
.sf-nav a:hover, .sf-nav .is-current > a { background: var(--sf-soft); color: var(--sf-ink); }
.sf-nav .sf-sub, .sf-mnav__panel { background: var(--sf-card); }

/* Hero: forest green with the plateau's contour lines */
.sf-hero, .sf-pagehead {
	background:
		var(--oz-contour) right bottom / 760px auto no-repeat,
		radial-gradient(70% 90% at 100% 0%, rgba(255, 255, 255, .06), transparent 70%),
		linear-gradient(170deg, var(--oz-forest-2), var(--oz-forest));
	color: #eef3ee;
}
.sf-hero { padding-block: 56px 72px; }
.sf-hero h1, .sf-pagehead h1 { color: #fff; }
.sf-lead { color: #d9e4dc; opacity: 1; font-size: 19px; line-height: 1.55; }
.sf-checks li { color: #eef3ee; }
.sf-checks li::before { background-color: var(--sf-accent); }
.sf-section .sf-checks li { color: inherit; }
.sf-hero .sf-btn--ghost, .sf-pagehead .sf-btn--ghost { color: #fff; border-color: rgba(238, 243, 238, .5); }
.sf-hero .sf-btn--ghost:hover { background: rgba(255, 255, 255, .08); }

/* Form: a solid card with a copper top edge */
.sf-form { background: var(--sf-card); border-top: 4px solid var(--sf-accent); border-radius: var(--sf-radius); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .1); }
.sf-form__title { font-weight: 800; font-size: 23px; }
.sf-form input, .sf-form select, .sf-form textarea { border-radius: var(--sf-radius); border-color: var(--sf-line); background: #fff; }
.sf-form input:focus, .sf-form select:focus, .sf-form textarea:focus { border-color: var(--sf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-accent) 20%, transparent); }
.sf-form__call a { color: var(--oz-copper-text); }

/* Trust strip */
.sf-trust { background: var(--sf-card); border-color: var(--sf-line); border-radius: var(--sf-radius); box-shadow: var(--sf-shadow); }
.sf-trust__item .sf-i { color: var(--sf-accent); }

/* Sections: a short copper rule under each section heading */
.sf-section--white { background: #fbfaf5; border-color: var(--sf-line); }
.sf-section > h2::after, .sf-section .sf-wrap > h2::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 12px; background: var(--sf-accent); }
.sf-section h2 + p { color: var(--sf-muted); }
.sf-callstrip { background: var(--sf-soft); color: var(--sf-ink); }

/* Cards, features, steps: one border, copper on hover */
.sf-card, .sf-features > .wp-block-group, .sf-feature, ol.sf-steps li, .sf-post, .sf-review, .sf-toc, .wp-block-details.sf-faq, details.sf-faq { background: var(--sf-card); border-color: var(--sf-line); border-radius: var(--sf-radius); }
.sf-card:hover, .sf-post:hover { border-color: var(--sf-accent); box-shadow: var(--sf-shadow); }
.sf-card__icon { border-radius: var(--sf-radius); background: var(--sf-soft); color: var(--oz-forest-2); }
.sf-card__body strong, .sf-post__body strong { font-family: var(--sf-font-h); font-weight: 700; font-size: 18.5px; }
.sf-card__go { color: var(--oz-copper-text); }
.sf-features h3 { font-size: 20px; }
ol.sf-steps li::before { border-radius: var(--sf-radius); background: var(--oz-forest-2); color: #fff; font-family: var(--sf-font-h); font-weight: 800; }
.sf-faq summary { font-weight: 600; font-size: 18.5px; }
.sf-faq summary::after { color: var(--sf-accent); }
.sf-pill, .sf-jump a { background: var(--sf-card); border-color: var(--sf-line); border-radius: var(--sf-radius); }
.sf-pill:hover, .sf-jump a:hover { border-color: var(--sf-accent); color: var(--sf-ink); }
.sf-pill .sf-i { color: var(--sf-accent); }
.sf-table table, .sf-article table { background: var(--sf-card); }
.sf-table th { background: var(--sf-soft); font-family: var(--sf-font-h); }
.sf-photo img, .wp-block-image.sf-photo img { border-radius: var(--sf-radius); }

/* Closing call to action: the same forest and contours */
.sf-cta {
	background: var(--oz-contour) left bottom / 640px auto no-repeat, linear-gradient(170deg, var(--oz-forest-2), var(--oz-forest));
	color: #eef3ee; border-radius: var(--sf-radius);
}
.sf-cta p { color: #d9e4dc; opacity: 1; }
.sf-cta .sf-btn--light { background: var(--sf-accent); color: #fff; }
.sf-cta .sf-btn--ghost { color: #fff; border-color: rgba(238, 243, 238, .5); }

/* Footer */
.sf-footer { background: var(--oz-forest); color: #cfdbd2; border-top: 4px solid var(--sf-accent); }
.sf-footer a:hover { color: color-mix(in srgb, var(--sf-accent) 50%, #fff); }
.sf-footer__title, .sf-footer__brand { font-family: var(--sf-font-h); letter-spacing: .01em; }
.sf-pagination .current { background: var(--sf-accent); }

@media (max-width: 640px) {
	.sf-hero { padding-block: 34px 52px; }
	.sf-hero, .sf-pagehead { background-size: 520px auto, auto, auto; }
	h1 { font-size: clamp(32px, 8.8vw, 42px); }
	.sf-callbar { background: var(--sf-card); border-top-color: var(--sf-line); }
}