/* =====================================================================
   BTB Restoration: main stylesheet
   Palette: brand-derived from Red #ED1C24, Black #000000, Blue #0054A6, each
   muted/darkened for a calm, non-alarming, non-"insurance blue" feel, set
   on a warm-neutral background so it still reads local and rooted rather
   than corporate-generic.
   Approach: mobile-first, vanilla CSS, custom properties, no framework.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Fonts (self-hosted, latin subset, variable weight)
   Inter: SIL OFL 1.1, see assets/fonts/licenses/inter-OFL.txt
   Sora:  SIL OFL 1.1, see assets/fonts/licenses/sora-OFL.txt
   --------------------------------------------------------------------- */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-variable.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Sora";
	src: url("../fonts/sora-variable.woff2") format("woff2");
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------- */
:root {
	/* Color */
	--bg:          #f8f6f2;  /* warm off-white page */
	--surface:     #ffffff;
	--surface-2:   #eeece6;  /* warm neutral gray, alternating sections */
	--ink:         #17191b;  /* near-black (brand black, softened for screen) */
	--ink-soft:    #454b51;
	--ink-mute:    #676f76;
	--accent:      #c1352e;  /* muted brand red (#ED1C24, darkened/desaturated) */
	--accent-dark: #9c2b26;
	--accent-soft: #f3dedb;
	--steel:       #2c5578;  /* muted brand blue (#0054A6), grounded secondary */
	--steel-dark:  #1b3346;
	--steel-soft:  #e6ebef;
	--line:        #e4e1da;
	--line-strong: #d3cfc5;
	--focus:       #0054a6; /* full brand blue reserved for focus rings */

	/* Type: Sora for confident, modern headlines; Inter for body/UI. Both
	   self-hosted variable fonts (see @font-face above), system stack falls
	   back gracefully if the font file hasn't loaded yet. */
	--font-head: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Rhythm */
	--wrap:        1140px;
	--wrap-narrow: 720px;
	--wrap-wide:   1440px;
	--gutter:      clamp(1rem, 4vw, 2rem);
	--section-y:   clamp(4rem, 9vw, 7.5rem);
	--radius:      14px;
	--radius-sm:   9px;
	--shadow:      0 1px 2px rgba(31, 42, 48, .06), 0 10px 30px -12px rgba(31, 42, 48, .18);
	--shadow-sm:   0 1px 2px rgba(31, 42, 48, .06), 0 4px 14px -8px rgba(31, 42, 48, .16);
	--shadow-lift: 0 2px 4px rgba(31, 42, 48, .07), 0 16px 32px -14px rgba(31, 42, 48, .22);
}

/* ---------------------------------------------------------------------
   1. Reset / base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: inline-block; vertical-align: middle; }

h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.15;
	color: var(--ink);
	margin: 0 0 .5em;
	letter-spacing: -.015em;
}
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.2rem; font-weight: 600; }
p  { margin: 0 0 1rem; }

a { color: var(--accent-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ---------------------------------------------------------------------
   2. Layout helpers
   --------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--wide { max-width: var(--wrap-wide); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--ink); color: #fff; padding: .75rem 1rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

.section-head { max-width: 46rem; margin-bottom: clamp(1.75rem, 4.5vw, 3rem); }
.section-head__title { margin: 0 0 .4em; }
.section-head__title--center { text-align: center; margin-inline: auto; }
.section-head__intro { color: var(--ink-soft); font-size: 1.125rem; margin: 0; }

/* ---------------------------------------------------------------------
   2b. Icon chips
   A consistent round badge for Lucide icons (differentiator pillars,
   credentials, process steps, contact details). Default is a quiet
   steel-neutral tint; --accent is reserved for higher-emphasis spots
   (the trust-signal stats row) so color stays intentional, not blanket.
   --------------------------------------------------------------------- */
.icon-chip {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
	background: var(--steel-soft); color: var(--steel);
}
.icon-chip--accent { background: var(--accent-soft); color: var(--accent-dark); }
.icon-chip--sm { width: 30px; height: 30px; border-radius: 9px; }

/* ---------------------------------------------------------------------
   2c. Scroll reveal (vanilla JS adds .reveal + toggles .is-visible; if JS
   never runs, no class is added and content is visible by default, so
   this never risks hiding content). See assets/js/main.js.
   --------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------------
   3. Buttons
   --------------------------------------------------------------------- */
.btn {
	--btn-bg: var(--accent);
	--btn-fg: #fff;
	display: inline-flex; align-items: center; gap: .55rem;
	font: inherit; font-weight: 600;
	padding: .8rem 1.4rem;
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--btn-bg); color: var(--btn-fg);
	text-decoration: none; cursor: pointer;
	transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease;
	line-height: 1.1;
}
.btn:hover { color: var(--btn-fg); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { --btn-bg: var(--accent); box-shadow: var(--shadow-sm); }
.btn--primary:hover { --btn-bg: var(--accent-dark); }
.btn--lg { padding: 1rem 1.7rem; font-size: 1.075rem; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--surface); --btn-fg: var(--ink); border-color: var(--ink); }

/* Phone button: prominent, site-wide */
.btn--phone {
	--btn-bg: var(--ink);
	--btn-fg: #fff;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}
.btn--phone:hover { --btn-bg: #10181c; }
.btn--phone__icon { display: inline-flex; color: var(--accent-soft); }
.btn--phone--onDark { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--phone--onDark:hover { --btn-bg: #f1ede6; --btn-fg: var(--ink); }
.btn--phone--onDark .btn--phone__icon { color: var(--accent); }
.btn--phone--block { display: flex; justify-content: center; width: 100%; }
.btn--phone--footer { margin-top: .5rem; }

/* Secondary CTA treatment for the phone button in the hero, distinct from
   the solid primary "Get an inspection" button so the hero reads as one
   clear primary action plus one clear secondary action, not two black
   buttons stacked. */
.btn--phone--hero {
	--btn-bg: transparent; --btn-fg: var(--ink);
	border-color: var(--line-strong);
}
.btn--phone--hero:hover { --btn-bg: var(--surface); border-color: var(--ink); }
.btn--phone--hero .btn--phone__icon { color: var(--accent-dark); }

.link-arrow {
	display: inline-flex; align-items: center; gap: .35rem;
	font-weight: 600; text-decoration: none; color: var(--accent-dark);
}
.link-arrow svg { transition: transform .15s ease; }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------------
   4. Header + nav
   --------------------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	backdrop-filter: saturate(1.2) blur(8px);
	border-bottom: 1px solid var(--line);
}
.site-header__inner {
	display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
	min-height: 74px;
}
.site-header__brand { margin-right: auto; }
.custom-logo { max-height: 52px; width: auto; }
.site-title { text-decoration: none; display: inline-flex; flex-direction: column; line-height: 1.05; }
.site-title__name { font-family: var(--font-head); font-weight: 600; font-size: 1.35rem; color: var(--ink); }
.site-title__tag { font-size: .72rem; color: var(--ink-mute); letter-spacing: .01em; }

.site-nav__menu {
	list-style: none; display: flex; gap: .35rem; margin: 0; padding: 0;
}
.site-nav__menu a {
	display: inline-block; padding: .55rem .8rem; border-radius: 8px;
	color: var(--ink); text-decoration: none; font-weight: 600; font-size: .98rem;
}
.site-nav__menu a:hover,
.site-nav__menu .current-menu-item > a { background: var(--surface-2); color: var(--ink); }

.nav-toggle { display: none; }

@media (max-width: 900px) {
	.site-header__cta .btn--phone__num { display: none; } /* icon-only phone on small header */
	.site-header__cta .btn--phone { padding: .7rem .8rem; }
}
@media (max-width: 820px) {
	.nav-toggle {
		display: inline-flex; align-items: center; justify-content: center;
		order: 3; width: 46px; height: 46px; padding: 0;
		background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer;
	}
	.nav-toggle__bars { position: relative; width: 22px; height: 16px; }
	.nav-toggle__bars span {
		position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink);
		border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
	}
	.nav-toggle__bars span:nth-child(1) { top: 0; }
	.nav-toggle__bars span:nth-child(2) { top: 7px; }
	.nav-toggle__bars span:nth-child(3) { top: 14px; }
	.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
	.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.site-nav {
		order: 10; flex-basis: 100%;
		display: grid; grid-template-rows: 0fr;
		transition: grid-template-rows .25s ease;
	}
	.site-nav.is-open { grid-template-rows: 1fr; }
	.site-nav__menu { flex-direction: column; gap: 0; overflow: hidden; padding-bottom: .5rem; }
	.site-nav__menu a { display: block; padding: .85rem .6rem; border-bottom: 1px solid var(--line); border-radius: 0; }
}

/* ---------------------------------------------------------------------
   5. Hero
   --------------------------------------------------------------------- */
.hero {
	position: relative;
	background:
		radial-gradient(120% 90% at 85% -10%, var(--accent-soft) 0%, transparent 55%),
		linear-gradient(180deg, var(--bg) 0%, var(--surface-2) 100%);
	overflow: hidden;
}
/* .hero__bg (the photo) and .hero__overlay (an optional color tint) are
   real elements, not a ::before, specifically so each can carry its own
   inline opacity independently, set per-instance from the block's
   editor controls. A single ::before can't do that: giving it CSS
   opacity would fade a tint layered on top of it exactly as much as the
   photo, instead of letting the two be adjusted separately. */
.hero__bg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
}
.hero__overlay { position: absolute; inset: 0; }
.hero__inner { position: relative; padding-block: clamp(3.5rem, 9vw, 7.5rem); max-width: 44rem; }
.hero__box { box-sizing: border-box; } /* padding/background/border/radius set inline per-instance when the box is on */
.hero__eyebrow {
	text-transform: uppercase; letter-spacing: .09em; font-size: .78rem; font-weight: 700;
	color: var(--accent-dark); margin: 0 0 1rem;
}
.hero__headline { font-size: clamp(2.4rem, 6vw, 4rem); margin: 0 0 1rem; }
.hero__subhead { font-size: clamp(1.1rem, 2.2vw, 1.3rem); color: var(--ink-soft); margin: 0 0 2rem; max-width: 40rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* ---------------------------------------------------------------------
   6. Differentiator band (the star)
   --------------------------------------------------------------------- */
.diff { background: var(--surface); padding-block: var(--section-y); border-bottom: 1px solid var(--line); }
.diff__head { max-width: 48rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.diff__heading { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.diff__intro { color: var(--ink-soft); font-size: 1.125rem; }
.diff__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 1.1rem;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.diff__item {
	background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 1.5rem 1.4rem 1.6rem; position: relative;
	transition: box-shadow .15s ease, border-color .15s ease;
}
.diff__item:hover { box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
.diff__item .icon-chip { margin-bottom: .8rem; }
.diff__item-title { font-size: 1.15rem; margin: 0 0 .35rem; }
.diff__item-text { color: var(--ink-soft); margin: 0; font-size: .98rem; }

/* ---------------------------------------------------------------------
   7. Trust-signal / stats row
   Light counter row directly under the hero (Horizon Fix style): icon
   chip, bold number, label. Kept on the clean neutral background rather
   than a dark inverted band so it reads as confident, not heavy.
   --------------------------------------------------------------------- */
.stats {
	background: var(--surface);
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
	border-block: 1px solid var(--line);
}
.stats__grid {
	display: grid; gap: 2rem 1.5rem;
	grid-template-columns: repeat(2, 1fr);
	text-align: center;
}
.stats__item { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.stats__num {
	font-family: var(--font-head); font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 700;
	color: var(--ink); letter-spacing: -.01em;
}
.stats__label { font-size: .92rem; color: var(--ink-mute); font-weight: 500; }
@media (min-width: 720px) {
	.stats__grid {
		grid-template-columns: repeat(4, 1fr);
		position: relative;
	}
	.stats__item:not(:first-child) { border-left: 1px solid var(--line); padding-left: 1.5rem; }
}

/* ---------------------------------------------------------------------
   8. Services grid
   --------------------------------------------------------------------- */
.services { padding-block: var(--section-y); }
.services__grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.service-card {
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 1.75rem; box-shadow: var(--shadow-sm);
	display: flex; flex-direction: column; gap: .5rem;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
	border-color: var(--line-strong);
}
.service-card__icon {
	color: var(--accent-dark); background: var(--accent-soft);
	width: 60px; height: 60px; border-radius: 14px;
	display: inline-flex; align-items: center; justify-content: center; margin-bottom: .5rem;
	transition: background-color .18s ease, color .18s ease;
}
.service-card:hover .service-card__icon { background: var(--accent); color: #fff; }
.service-card__title { margin: 0; }
.service-card__text { color: var(--ink-soft); margin: 0 0 .4rem; flex-grow: 1; }

/* ---------------------------------------------------------------------
   9. Process
   --------------------------------------------------------------------- */
.process { background: var(--surface-2); padding-block: var(--section-y); }
.process__steps {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.process__step { position: relative; padding-top: .5rem; }
.process__num {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--surface); color: var(--steel); border: 1px solid var(--line);
	margin-bottom: .9rem;
}
.process__num-badge {
	position: absolute; top: -6px; right: -6px;
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--accent); color: #fff;
	font-family: var(--font-head); font-weight: 700; font-size: .75rem;
	border: 2px solid var(--surface-2);
}
.process__step-title { margin: 0 0 .3rem; }
.process__step-text { color: var(--ink-soft); margin: 0; }

/* ---------------------------------------------------------------------
   10. Testimonials
   --------------------------------------------------------------------- */
.quotes { padding-block: var(--section-y); }

/* The pull-quote: our strongest social proof (the agency quote), given a
   distinct, larger treatment instead of sitting in the card grid. */
.pull-quote {
	max-width: 46rem; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); text-align: center;
	position: relative; padding-top: 5rem;
}
.pull-quote__mark {
	color: var(--accent); display: inline-flex; align-items: center; justify-content: center;
	position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft);
}
.pull-quote__text {
	font-family: var(--font-head); font-weight: 700; letter-spacing: -.01em;
	font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.4; color: var(--ink); margin: 0 0 1.25rem;
}
.pull-quote__text p { margin: 0; }
.pull-quote__cite { display: flex; flex-direction: column; gap: .15rem; }
.pull-quote__who { font-weight: 700; }
.pull-quote__role { color: var(--ink-mute); font-size: .95rem; }

.quotes__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.quote-card {
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 1.75rem; margin: 0; position: relative; box-shadow: var(--shadow-sm);
}
.quote-card__mark { color: var(--accent-soft); position: absolute; top: 1rem; right: 1.1rem; }
.quote-card__text { font-size: 1.05rem; line-height: 1.5; color: var(--ink); margin: 0 0 1rem; }
.quote-card__text p { margin: 0; }
.quote-card__cite { display: flex; flex-direction: column; }
.quote-card__who { font-weight: 700; }
.quote-card__role { color: var(--ink-mute); font-size: .9rem; }

/* ---------------------------------------------------------------------
   11. Service-area preview + page
   --------------------------------------------------------------------- */
.area-preview { background: var(--steel); color: #fff; padding-block: var(--section-y); }
.area-preview__inner { display: grid; gap: 2rem; align-items: center; }
.area-preview__icon { color: #fff; opacity: .85; }
.area-preview .section-head__title { color: #fff; }
.area-preview__body p { color: #dbe4e7; font-size: 1.075rem; }
.area-preview__body .link-arrow { color: #fff; }
.area-preview__list {
	list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem;
	grid-template-columns: repeat(2, 1fr);
}
.area-preview__list li {
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
	border-radius: 10px; padding: .7rem .9rem; font-weight: 600;
}
@media (min-width: 820px) { .area-preview__inner { grid-template-columns: 1.4fr 1fr; } }

.area-cols { padding-block: var(--section-y); }
.area-cols__inner { display: grid; gap: 2.5rem; }
.area-cols__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.area-cols__list li { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.area-cols__list li svg { color: var(--accent); }
.area-cols__list--plain li { font-weight: 400; color: var(--ink-soft); }
.area-cols__note { margin-top: 1rem; color: var(--ink-soft); }
@media (min-width: 720px) { .area-cols__inner { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------------
   12. Tips (preview, archive, single)
   --------------------------------------------------------------------- */
.tips-preview { padding-block: var(--section-y); background: var(--surface-2); }
.tips-preview__grid, .tips-archive__grid {
	list-style: none; margin: 0 0 2rem; padding: 0;
	display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tips-preview__more { text-align: center; margin: 0; }
.tip-card {
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	overflow: hidden; display: flex; flex-direction: column;
}
.tip-card__thumb { display: block; aspect-ratio: 16/9; overflow: hidden; }
.tip-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tip-card__title { font-size: 1.2rem; margin: 1rem 1.1rem .3rem; }
.tip-card__title a { color: var(--ink); text-decoration: none; }
.tip-card__title a:hover { color: var(--accent-dark); }
.tip-card__meta { color: var(--ink-mute); font-size: .85rem; margin: 0 1.1rem; }
.tip-card__excerpt { color: var(--ink-soft); margin: .5rem 1.1rem 1rem; flex-grow: 1; }
.tip-card .link-arrow { margin: 0 1.1rem 1.1rem; }

.tips-archive { padding-block: var(--section-y); }

.tip-single__head { background: var(--surface-2); padding-block: clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--line); }
.tip-single__eyebrow { margin: 0 0 .5rem; font-weight: 600; }
.tip-single__eyebrow a { text-decoration: none; }
.tip-single__title { font-size: clamp(2rem, 4.6vw, 3rem); margin: 0 0 .6rem; }
.tip-single__meta { color: var(--ink-mute); font-size: .92rem; margin: 0; }
.tip-single__topics { display: inline-flex; align-items: center; gap: .3rem; }
.tip-single__topics svg { color: var(--steel); }
.tip-single__img { margin-top: 1.5rem; }
.tip-single__img img { width: 100%; border-radius: var(--radius); }
.tip-single__body { padding-top: 2rem; }
.tip-single__footer { padding-block: 1.5rem 3rem; }

/* ---------------------------------------------------------------------
   13. Pages, entry content, service single
   --------------------------------------------------------------------- */
.page-head { padding-block: clamp(2rem, 5vw, 3.25rem) 0; }
.page-head--archive { background: var(--surface-2); padding-block: clamp(2.25rem, 5vw, 3.5rem); border-bottom: 1px solid var(--line); }
.page-head__title { margin: 0 0 .4rem; }
.page-head__intro { color: var(--ink-soft); font-size: 1.15rem; max-width: 44rem; margin: 0; }
.page-body { padding-block: clamp(1.5rem, 4vw, 2.5rem) var(--section-y); }
.page-hero-img { margin-block: 1.5rem; }
.page-hero-img img { width: 100%; border-radius: var(--radius); }

.entry-content { padding-block: 1.5rem; }
.entry-content > * { margin-block: 0 1.1rem; }
.entry-content h2 { margin-top: 2rem; }
.entry-content h3 { margin-top: 1.5rem; }
.entry-content ul, .entry-content ol { padding-left: 1.3rem; }
.entry-content li { margin-bottom: .4rem; }
.entry-content img { border-radius: var(--radius); }
.entry-content blockquote {
	margin: 1.5rem 0; padding: .5rem 1.25rem; border-left: 4px solid var(--accent);
	background: var(--surface-2); border-radius: 0 8px 8px 0; font-family: var(--font-head); font-size: 1.2rem;
}
.entry-content a { color: var(--accent-dark); }

/* Service single */
.service-hero {
	background:
		radial-gradient(110% 120% at 90% -20%, var(--accent-soft) 0%, transparent 55%),
		linear-gradient(180deg, var(--surface-2), var(--bg));
	padding-block: clamp(2.5rem, 6vw, 4rem); border-bottom: 1px solid var(--line);
}
.service-hero__inner { max-width: 46rem; }
.service-hero__icon {
	color: var(--accent); background: #fff; box-shadow: var(--shadow-sm);
	width: 70px; height: 70px; border-radius: 16px;
	display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.service-hero__title { margin: 0 0 .5rem; }
.service-hero__promise { font-size: 1.2rem; color: var(--ink-soft); margin: 0 0 1.5rem; }

.service-body { padding-block: var(--section-y); max-width: var(--wrap-narrow); }
.service-body__intro { padding-top: 0; }
.service-block { margin-bottom: 2.25rem; }
.service-block__title {
	font-size: 1.5rem; padding-bottom: .4rem; margin-bottom: .8rem;
	border-bottom: 2px solid var(--line);
}
.service-block--insurance {
	background: var(--surface-2); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 1.5rem 1.6rem; margin-top: 2.5rem;
}
.service-block--insurance .service-block__title { border-color: var(--accent); }

/* ---------------------------------------------------------------------
   14. Contact
   --------------------------------------------------------------------- */
.contact { display: grid; gap: 2.5rem; padding-block: var(--section-y); }
@media (min-width: 860px) { .contact { grid-template-columns: 1.4fr .9fr; align-items: start; } }

.lead-form {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow-sm);
}
.lead-form__step { font-size: .88rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin: 0 0 1.25rem; }
.lead-form__row { display: grid; gap: 1rem; }
@media (min-width: 520px) { .lead-form__row { grid-template-columns: 1fr 1fr; } }
.lead-form__field { display: block; margin-bottom: 1rem; }
.lead-form__label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.req { color: var(--accent); }
.lead-form input:not([type="submit"]):not([type="reset"]), .lead-form select, .lead-form textarea {
	width: 100%; font: inherit; color: var(--ink);
	padding: .7rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
	background: var(--bg);
}
.lead-form input:not([type="submit"]):not([type="reset"]):focus, .lead-form select:focus, .lead-form textarea:focus { border-color: var(--focus); background: #fff; }
.lead-form textarea { resize: vertical; min-height: 6rem; font-family: inherit; }
.lead-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form__fineprint { font-size: .88rem; color: var(--ink-mute); margin: .9rem 0 0; }
.lead-form .btn { margin-top: .5rem; }

/* Custom select chevron so the dropdown matches the rest of the inputs
   instead of the browser default. */
.lead-form select {
	appearance: none; -webkit-appearance: none;
	padding-right: 2.4rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23454b51' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .8rem center;
	background-size: 18px;
}

.lead-form__hint { font-size: .85rem; color: var(--ink-mute); margin: .4rem 0 0; }
.lead-form__error { font-size: .85rem; color: var(--accent-dark); margin: .4rem 0 0; }

/* Captcha */
.lead-form__captcha { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.lead-form__captcha-img { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.lead-form__captcha-reload {
	background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
	color: var(--accent-dark); cursor: pointer; text-decoration: underline;
	text-underline-offset: 2px;
}
.lead-form__captcha-reload:hover { color: var(--accent); }

/* Submit / clear */
.lead-form__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }
.lead-form__reset {
	background: none; border: 0; padding: .5rem 0; font: inherit; font-size: .92rem;
	color: var(--ink-mute); cursor: pointer; text-decoration: underline;
	text-underline-offset: 2px;
}
.lead-form__reset:hover { color: var(--ink); }

/* Success "splash" toast Zoho's script shows/hides (#wf_splash), restyled to
   match the site's notice look instead of Zoho's default green box. */
.zoho-splash {
	position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1000;
	display: flex; align-items: center; gap: .6rem;
	background: #eaf5ec; border: 1px solid #b9e0c1; color: #1c5a2c;
	border-radius: var(--radius-sm); padding: .75rem 1.1rem;
	box-shadow: var(--shadow); max-width: 90vw; font-weight: 600;
}
.zoho-splash__icon {
	flex: none; width: 20px; height: 20px; border-radius: 50%;
	background: #12aa67; position: relative;
}
.zoho-splash__icon::after {
	content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px;
	border-bottom: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);
}

.contact__aside .entry-content { padding-top: 0; }
.contact__aside-title { margin-top: 0; }
.contact__card {
	background: var(--surface-2); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 1.5rem; margin-top: 1.25rem;
}
.contact__card p { margin: .75rem 0 0; }
.contact__detail { display: flex; align-items: center; gap: .6rem; }
.contact__hours, .contact__area { color: var(--ink-soft); font-size: .95rem; }
.contact__zoho :is(iframe, form) { max-width: 100%; }

/* ---------------------------------------------------------------------
   15. About creds
   --------------------------------------------------------------------- */
.creds { background: var(--surface-2); padding-block: var(--section-y); }
.creds__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.creds__item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.creds__item .icon-chip { margin-bottom: .3rem; }
.creds__item h3 { margin: .8rem 0 .3rem; font-size: 1.1rem; }
.creds__item p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* ---------------------------------------------------------------------
   16. CTA band
   --------------------------------------------------------------------- */
.cta-band {
	background:
		radial-gradient(120% 140% at 10% 0%, rgba(193,53,46,.45) 0%, transparent 45%),
		var(--steel-dark);
	color: #fff; padding-block: clamp(2.5rem, 6vw, 4rem);
}
.cta-band__inner { display: grid; gap: 1.5rem; align-items: center; }
.cta-band__heading { color: #fff; margin: 0 0 .4rem; font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
.cta-band__text { color: #d9e1e4; margin: 0; font-size: 1.1rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
@media (min-width: 820px) { .cta-band__inner { grid-template-columns: 1.5fr 1fr; } .cta-band__actions { justify-content: flex-end; } }

/* ---------------------------------------------------------------------
   17. Footer
   --------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #cfd6da; }
.site-footer a { color: #fff; }
.site-footer__grid { display: grid; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; } }
.site-footer__name { font-family: var(--font-head); font-size: 1.4rem; color: #fff; margin: 0 0 .25rem; }
.site-footer__tag { color: #9fb0b6; margin: 0 0 .75rem; }
.site-footer__area { color: #9fb0b6; font-size: .95rem; }
.site-footer__heading { font-size: 1rem; color: #fff; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 1rem; }
.site-footer__menu, .site-footer__area-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer__menu a { text-decoration: none; color: #cfd6da; }
.site-footer__menu a:hover { color: #fff; }
.site-footer__note { color: #9fb0b6; font-size: .9rem; margin-top: .6rem; }
.site-footer__hours { color: #9fb0b6; font-size: .95rem; }
.site-footer__bar { border-top: 1px solid rgba(255,255,255,.1); }
.site-footer__bar-inner { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; padding-block: 1.25rem; font-size: .85rem; color: #9fb0b6; }
.site-footer__bar-inner p { margin: 0; }
.site-footer__legal { margin: 0; }

/* The "Serving the Shoals & beyond" footer column reuses the existing
   btb/area-column block (same shape: heading + city list + note) instead
   of a new one, so these bring its normally light-page styling in line
   with the footer's own dark theme and type scale. */
.site-footer .area-cols__block .section-head__title {
	font-size: 1rem; color: #fff; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 1rem;
}
.site-footer .area-cols__list { color: #cfd6da; }
.site-footer .area-cols__list li svg { color: var(--accent); }
.site-footer .area-cols__list--plain li { font-weight: 400; color: #9fb0b6; }
.site-footer .area-cols__note { color: #9fb0b6; font-size: .9rem; margin-top: .6rem; }

/* ---------------------------------------------------------------------
   18. Notices, pagination, misc
   --------------------------------------------------------------------- */
.notice { border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0 0 1.25rem; border: 1px solid var(--line); background: var(--surface-2); }
.notice--success { background: #eaf5ec; border-color: #b9e0c1; color: #1c5a2c; }
.notice--error   { background: #fbe9e5; border-color: #f0bcb0; color: #8a2f1c; }
.notice--editor  { background: var(--accent-soft); border-color: #e6c3b1; color: #7a3417; }
.notice--draft   { background: transparent; border: 1px dashed var(--line-strong); color: var(--ink-mute); }

.pagination { padding-block: 1rem 0; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.pagination .page-numbers {
	display: inline-flex; min-width: 42px; height: 42px; align-items: center; justify-content: center;
	padding: 0 .6rem; border: 1px solid var(--line-strong); border-radius: 10px; text-decoration: none; color: var(--ink);
}
.pagination .page-numbers.current { background: var(--accent); color: #fff; border-color: var(--accent); }

.error-404__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-block: 1.5rem; }

.thank-you__steps { padding-left: 1.3rem; }
.thank-you__steps li { margin-bottom: .6rem; color: var(--ink-soft); }
.thank-you__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }

/* Search form (core html5) */
.search-form { display: flex; gap: .5rem; margin-top: 1rem; }
.search-form .search-field { flex: 1; padding: .7rem .8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; }
.search-form .search-submit { border: 0; }