/*
 * Skin: Airflow (HVAC Dallas, 2026-11-09).
 * Heating and cooling under the North Texas sun: clear sky blue for cool air, a burnt heat-orange for calls to
 * action, icy light-blue paper, and a wide engineered grotesk like the data plate on a condenser. The hero carries
 * faint streamlines of moving air, the only decoration.
 * Loaded after style.css when business.json → brand.skin = "airflow". Colors still come from the brand tokens.
 */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600 800; font-stretch: 62% 125%; font-display: swap; src: url("fonts/archivo-latin-var.woff2") format("woff2"); }

:root {
	--sf-font-h: "Archivo", "Arial", system-ui, sans-serif;
	--sf-radius: 10px;
	--sf-card: #ffffff;
	--sf-line: #cfe1ee;
	--sf-soft: #e2f0fa;
	--sf-muted: #46596a;
	--af-deep: color-mix(in srgb, var(--sf-primary) 72%, #000);
	--af-cool: var(--sf-primary);
	--af-heat-text: color-mix(in srgb, var(--sf-accent) 85%, #000);
	--af-flow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='360' viewBox='0 0 720 360'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M0 90c120 0 160-40 280-40s160 60 280 60 120-30 160-30'/%3E%3Cpath d='M0 140c120 0 170-36 290-36s150 56 270 56 120-26 160-26'/%3E%3Cpath d='M0 190c120 0 180-32 300-32s140 52 260 52 120-22 160-22'/%3E%3Cpath d='M0 240c120 0 190-28 310-28s130 48 250 48 120-18 160-18'/%3E%3Cpath d='M0 290c120 0 200-24 320-24s120 44 240 44 120-14 160-14'/%3E%3C/g%3E%3C/svg%3E");
	--sf-shadow: 0 1px 2px rgba(10, 40, 46, .06), 0 14px 30px -16px rgba(10, 40, 46, .32);
}

body { caret-color: var(--sf-accent); }
::selection { background: var(--af-cool); color: #fff; }
:focus-visible { outline-color: var(--sf-accent); }
h1, h2, h3, h4 { font-weight: 800; font-stretch: 112%; letter-spacing: -.015em; }
h1 { font-size: clamp(34px, 4.8vw, 56px); line-height: 1.04; }
h2 { font-size: clamp(26px, 3.1vw, 37px); line-height: 1.12; }
h3 { font-weight: 700; font-stretch: 106%; letter-spacing: 0; }
a { color: var(--af-cool); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--af-heat-text); }

/* Kicker above headings: wide caps with a short heat bar, like a gauge mark */
.sf-eyebrow { font-family: var(--sf-font-h); font-weight: 700; font-stretch: 118%; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: var(--af-heat-text); }
.sf-eyebrow::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 8px; vertical-align: middle; border-radius: 2px; background: var(--sf-accent); }
.sf-hero .sf-eyebrow, .sf-pagehead .sf-eyebrow { color: color-mix(in srgb, var(--sf-accent) 40%, #fff); }

/* Buttons: rounded, heavy, heat-orange */
.sf-btn, .wp-block-button__link { border-radius: var(--sf-radius); font-family: var(--sf-font-h); font-weight: 700; font-stretch: 108%; 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 6px 16px -8px color-mix(in srgb, var(--sf-accent) 80%, #000); }
.sf-btn--accent:hover, .wp-block-button__link:hover { background: color-mix(in srgb, var(--sf-accent) 86%, #000); color: #fff; }
.sf-btn--primary { background: var(--af-cool); color: #fff; }

/* Top bar and header */
.sf-topbar { background: var(--af-deep); color: #dcebf7; }
.sf-topbar .sf-i { color: color-mix(in srgb, var(--sf-accent) 50%, #fff); }
.sf-header { background: var(--sf-card); border-bottom: 1px solid var(--sf-line); }
.sf-nav a { font-weight: 600; border-radius: 8px; }
.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: cool teal with streamlines and a warm glow in the corner */
.sf-hero, .sf-pagehead {
	background:
		var(--af-flow) right center / 820px auto no-repeat,
		radial-gradient(60% 80% at 100% 100%, color-mix(in srgb, var(--sf-accent) 22%, transparent), transparent 70%),
		linear-gradient(160deg, var(--af-cool), var(--af-deep));
	color: #eaf3fb;
}
.sf-hero { padding-block: 56px 72px; }
.sf-hero h1, .sf-pagehead h1 { color: #fff; }
.sf-lead { color: #d4e6f5; opacity: 1; font-size: 19px; line-height: 1.55; }
.sf-checks li { color: #eaf3fb; }
.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(234, 244, 245, .5); }
.sf-hero .sf-btn--ghost:hover { background: rgba(255, 255, 255, .08); }

/* Form: a white card with a heat-orange 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, .5), 0 2px 6px rgba(0, 0, 0, .1); }
.sf-form__title { font-weight: 800; font-stretch: 110%; font-size: 23px; }
.sf-form input, .sf-form select, .sf-form textarea { border-radius: 8px; border-color: var(--sf-line); background: #fff; }
.sf-form input:focus, .sf-form select:focus, .sf-form textarea:focus { border-color: var(--af-cool); box-shadow: 0 0 0 3px color-mix(in srgb, var(--af-cool) 20%, transparent); }
.sf-form__call a { color: var(--af-heat-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(--af-cool); }

/* Sections: a two-tone rule (cool then heat) under each section heading */
.sf-section--white { background: #f6fafd; border-color: var(--sf-line); }
.sf-section > h2::after, .sf-section .sf-wrap > h2::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 12px; border-radius: 2px; background: linear-gradient(90deg, var(--af-cool) 50%, var(--sf-accent) 50%); }
.sf-section h2 + p { color: var(--sf-muted); }
.sf-callstrip { background: var(--sf-soft); color: var(--sf-ink); }

/* Cards, features, steps */
.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(--af-cool); box-shadow: var(--sf-shadow); }
.sf-card__icon { border-radius: 50%; background: var(--sf-soft); color: var(--af-cool); }
.sf-card__body strong, .sf-post__body strong { font-family: var(--sf-font-h); font-weight: 700; font-stretch: 106%; font-size: 18.5px; }
.sf-card__go { color: var(--af-heat-text); }
.sf-features h3 { font-size: 20px; }
ol.sf-steps li::before { border-radius: 50%; background: var(--af-cool); 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: 999px; }
.sf-pill:hover, .sf-jump a:hover { border-color: var(--af-cool); color: var(--sf-ink); }
.sf-pill .sf-i { color: var(--af-cool); }
.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 teal and streamlines */
.sf-cta {
	background: var(--af-flow) left center / 700px auto no-repeat, linear-gradient(160deg, var(--af-cool), var(--af-deep));
	color: #eaf3fb; border-radius: var(--sf-radius);
}
.sf-cta p { color: #d4e6f5; opacity: 1; }
.sf-cta .sf-btn--light { background: var(--sf-accent); color: #fff; }
.sf-cta .sf-btn--ghost { color: #fff; border-color: rgba(234, 244, 245, .5); }

/* Footer */
.sf-footer { background: var(--af-deep); color: #c8dcee; border-top: 4px solid var(--sf-accent); }
.sf-footer a:hover { color: color-mix(in srgb, var(--sf-accent) 45%, #fff); }
.sf-footer__title, .sf-footer__brand { font-family: var(--sf-font-h); font-stretch: 110%; }
.sf-pagination .current { background: var(--sf-accent); }

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