/*
Theme Name: Service Framework
Description: Reusable local service site framework built on GeneratePress. Layout, global styles and section patterns live here, so a new city or industry site starts from code instead of a copy.
Template: generatepress
Version: 0.3.0
Text Domain: service-framework
*/

/* ==========================================================================
   1. Fonts. Self hosted so there is no request to Google and no layout shift.
   ========================================================================== */

@font-face {
	font-family: 'Libre Franklin';
	src: url('fonts/libre-franklin-latin.woff2') format('woff2-variations');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Source Serif 4';
	src: url('fonts/source-serif-4-latin.woff2') format('woff2-variations');
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   2. Tokens. A new city or industry site changes the brand block and nothing
      else. Never hard code a colour or a spacing value below this section.
   ========================================================================== */

:root {
	--sf-navy: #0F2340;
	--sf-navy-deep: #081234;
	--sf-ink: #16233A;
	--sf-muted: #5A6679;
	--sf-line: #E3E7ED;
	--sf-tint: #F6F7F9;
	--sf-white: #FFFFFF;
	--sf-accent: #1F7A4D;
	--sf-accent-dark: #17603C;
	--sf-accent-tint: #EAF3EE;
	--sf-star: #E9A825;
	--sf-on-dark-muted: #B9C4D4;

	--sf-1: 4px;  --sf-2: 8px;  --sf-3: 12px; --sf-4: 16px; --sf-5: 24px;
	--sf-6: 32px; --sf-7: 48px; --sf-8: 64px; --sf-9: 80px; --sf-10: 96px;

	/* Eight steps and nothing between them. Every component uses one of these,
	   never a loose pixel value, or the page drifts back to fifteen sizes. */
	/* Small caps labels. The design runs them at 11 with wide tracking; the
	   tracking is what varies by role, not the size. */
	--sf-eyebrow: 11px;
	--sf-track-wide: 0.2em;    /* section eyebrows */
	--sf-track-mid: 0.18em;    /* column heads, group meta */
	--sf-track-tight: 0.14em;  /* plate and specimen labels */
	--sf-warm: #8A6A48;        /* the label brown used on plates and charts */
	--sf-small: 14px;
	--sf-body-sm: 15.5px;
	--sf-body: 17px;
	--sf-lead-size: clamp(16.5px, 1.25vw, 19px);
	--sf-label-lg: 19px;
	--sf-h3: 22px;
	--sf-h2: clamp(30px, 3.3vw, 46px);
	--sf-h1: clamp(38px, 4.8vw, 68px);
	--sf-h1-inner: clamp(38px, 4.4vw, 62px);
	--sf-h1-narrow: clamp(37px, 4.2vw, 58px);
	--sf-display: clamp(38px, 4.4vw, 58px);

	/* Three radii: cards, controls, pills. */
	--sf-radius: 3px;
	--sf-radius-sm: 3px;
	--sf-radius-pill: 999px;

	/* Icons sit at a fixed ratio to the text beside them. */
	--sf-icon: 24px;
	--sf-icon-lg: 30px;

	--sf-section-y: 88px;
	--sf-section-y-sm: 56px;

	/* The header phone is the one element sized per breakpoint. */
	--sf-phone: 32px;

	--sf-container: 1200px;
	--sf-gutter: 24px;
	--sf-header-h: 80px;
}

/* ==========================================================================
   3. Base
   ========================================================================== */

/* Every band in this theme is full bleed and .sf-inner owns the width, so the
   boxed container GeneratePress wraps the site in is never wanted. Pages get
   max-width 100% here from their full width meta; a 404 has no post and so no
   meta, and was being boxed to 1100px with the dark closing band stopping 90px
   short of each edge. */
.site.grid-container { max-width: 100%; }

/* GeneratePress leaves the default content-box in place, so every min-height
   in the design came out padding taller than drawn: the FAQ rows measured
   102px against 70, the hero buttons 78 against 62. One rule, not a
   subtraction in each component. */
*, *::before, *::after { box-sizing: border-box; }

body {
	font-family: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: var(--sf-body);
	line-height: 1.6;
	color: var(--sf-ink);
	background: var(--sf-white);
	/* The design balances its line breaks; without this a heading keeps one
	   word on the last line and the two do not match even at the same width. */
	text-wrap: pretty;
}

h1, h2, h3, h4 {
	font-family: 'Source Serif 4', Georgia, serif;
	font-weight: 600;
	color: var(--sf-navy);
}

h1 { font-size: var(--sf-h1-inner); line-height: 1; letter-spacing: -0.03em; }
.home h1 { font-size: var(--sf-h1); line-height: 0.99; letter-spacing: -0.032em; }
.sf-hero--contact h1, .sf-hero__inner--single h1 { font-size: var(--sf-h1-narrow); }
h2 { font-size: var(--sf-h2); line-height: 1.04; letter-spacing: -0.026em; }
h3 { font-size: var(--sf-h3); line-height: 1.25; letter-spacing: -0.015em; }

a { color: var(--sf-accent); }

/* ==========================================================================
   4. Layout. GenerateBlocks containers render one element with no wrapper, so
      .sf-inner owns the width and the gutter on its own.
   ========================================================================== */

.sf-band { width: 100%; }
.sf-band--tint { background: var(--sf-tint); }
.sf-band--navy { background: var(--sf-navy); color: var(--sf-white); }

/* 1200 including the gutters, so the text column is 1152 as drawn. */
.sf-inner {
	max-width: var(--sf-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sf-gutter);
	padding-right: var(--sf-gutter);
}

.sf-eyebrow {
	font-size: var(--sf-eyebrow);
	font-weight: 600;
	letter-spacing: var(--sf-track-wide);
	text-transform: uppercase;
	color: var(--sf-muted);
	margin: 0 0 14px;
}

/* A sticky header covers whatever an anchor jumps to, so anchored sections
   need room to clear it. */
[id="services"], [id="why"], [id="process"],
[id="area"], [id="reviews"], [id="faq"], [id="inspection"] {
	scroll-margin-top: var(--sf-header-h);
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.sf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sf-2);
	padding: 14px 22px;
	border-radius: var(--sf-radius);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
}

.sf-btn--primary { background: var(--sf-accent); color: var(--sf-white); }
.sf-btn--primary:hover, .sf-btn--primary:focus { background: var(--sf-accent-dark); color: var(--sf-white); }
.sf-btn--outline { background: var(--sf-white); color: var(--sf-navy); border-color: var(--sf-navy); }
.sf-btn--outline:hover, .sf-btn--outline:focus { background: var(--sf-tint); color: var(--sf-navy); }

/* The outline button is a label, not a sentence: small caps, wide tracking. */
.sf-btn--outline {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Hero call button stacks a small label over the number set in the serif. */
.sf-btn--call {
	flex-direction: column;
	gap: 2px;
	min-height: 62px;
	padding: 8px 30px;
}

.sf-btn--call .sf-btn__kicker {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.1;
	color: var(--sf-accent-tint);
}

.sf-btn--call .sf-btn__number {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.sf-hero__actions .sf-btn--outline { min-height: 62px; padding: 8px 28px; }

/* ==========================================================================
   6. Header. Sticky, because calls are the point and the page is long.
   ========================================================================== */

.sf-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--sf-white);
	border-bottom: 1px solid var(--sf-line);
}

.admin-bar .sf-header { top: 32px; }

.sf-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sf-5);
	padding-top: 14px;
	padding-bottom: 14px;
}

.sf-brand { display: flex; align-items: center; gap: 11px; color: var(--sf-navy); text-decoration: none; flex: 0 0 auto; }
/* Scoped to .sf-brand on both, or the generic img rule outranks them and the
   header shows the horizontal lockup and the mark at the same time. */
/* 44 is the largest the lockup goes without the header growing: the phone
   beside it already holds a 44px line, so this height is free. Below it the
   PEST CONTROL line falls under 4px and stops being readable. */
.sf-brand img, .sf-brand .custom-logo { width: auto; height: 44px; }
.sf-brand .sf-brand__full { display: block; }
.sf-brand .sf-brand__mark { display: none; }

.sf-nav { margin-left: var(--sf-3); }
.sf-nav__list, .sf-mobile-nav__list { list-style: none; margin: 0; padding: 0; }
.sf-nav__list { display: flex; align-items: center; gap: var(--sf-5); }
.sf-nav__list li { margin: 0; }
.sf-nav a {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--sf-ink);
	text-decoration: none;
}
.sf-nav a:hover { color: var(--sf-accent); }

.sf-header__end { margin-left: auto; display: flex; align-items: center; gap: var(--sf-4); }

.sf-header__phone {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: var(--sf-phone);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--sf-navy);
	text-decoration: none;
	white-space: nowrap;
}

.sf-header__phone:hover { text-decoration: underline; }

/* GeneratePress styles <button> with white text and shrinks any svg inside it,
   which made this icon invisible and then two pixels tall. Pin both. */
.sf-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	color: var(--sf-navy);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-sm);
	background: var(--sf-white);
	cursor: pointer;
}

.sf-burger svg { width: 22px; height: 22px; flex: 0 0 auto; }

.sf-mobile-nav { display: none; border-top: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-mobile-nav.is-open { display: block; }
.sf-mobile-nav a {
	display: block;
	padding: 14px var(--sf-gutter);
	border-bottom: 1px solid var(--sf-line);
	font-size: var(--sf-body);
	color: var(--sf-ink);
	text-decoration: none;
}

/* ==========================================================================
   7. Emergency strip. The number stays, as a secondary link: the header
      already carries the loud one 65px above it.
   ========================================================================== */

.sf-strip { background: var(--sf-accent); color: var(--sf-white); }

.sf-strip__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sf-5);
	padding-top: 12px;
	padding-bottom: 12px;
	flex-wrap: wrap;
}

.sf-strip__lead { font-size: var(--sf-body); font-weight: 600; color: var(--sf-white); text-decoration: none; }
.sf-strip__meta { font-size: 14.5px; color: var(--sf-accent-tint); }

/* An outlined button, not an underlined link: this is the one action in the
   strip and it has to look like one on a green ground. */
.sf-strip__phone {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: var(--sf-radius);
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--sf-white);
	text-decoration: none;
	white-space: nowrap;
}

.sf-strip__phone:hover { background: rgba(255, 255, 255, 0.12); color: var(--sf-white); }

/* ==========================================================================
   8. Hero
   ========================================================================== */

.sf-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sf-8);
	align-items: center;
	padding-top: var(--sf-section-y);
	padding-bottom: var(--sf-section-y);
}

.sf-hero h1 { margin: 0 0 var(--sf-5); letter-spacing: -0.03em; }
.sf-hero__lead { font-size: var(--sf-lead-size); color: var(--sf-muted); margin: 0 0 var(--sf-6); }
.sf-hero__actions { display: flex; gap: var(--sf-3); flex-wrap: wrap; margin-bottom: var(--sf-5); }
.sf-hero__price { font-size: 15.5px; line-height: 1.6; color: var(--sf-ink); margin: 0 0 var(--sf-5); }
.sf-hero__price strong { font-weight: 600; }

.sf-rating { display: flex; align-items: center; gap: var(--sf-3); flex-wrap: wrap; font-size: var(--sf-body-sm); color: var(--sf-muted); }
.sf-rating__stars { color: var(--sf-star); letter-spacing: 2px; white-space: nowrap; font-size: 19px; }
.sf-rating__text { display: flex; align-items: baseline; gap: var(--sf-2); }
.sf-rating__score {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--sf-navy);
}

.sf-figure { border-radius: var(--sf-radius); overflow: hidden; }
.sf-figure img { display: block; width: 100%; height: auto; }


/* The illustrations are warm sepia on cream. Left raw they would sit as a
   yellow rectangle in a cool navy layout, so the card behind them carries the
   same cream and the join disappears. */
.sf-figure--hero, .sf-figure--map { background: #F6F1E7; }

.sf-card__art { display: block; width: 88px; height: 88px; margin-bottom: var(--sf-3); }

/* ==========================================================================
   9. Trust badges
   ========================================================================== */

/* Column flow rather than a fixed count, so the six-badge inner-page row and
   the five-badge homepage row share one rule. */
.sf-badges__inner {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	padding-top: var(--sf-5);
	padding-bottom: var(--sf-5);
}

.sf-badge {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 0 var(--sf-4);
	border-right: 1px solid rgba(15, 35, 64, 0.13);
}

.sf-badge:first-child { padding-left: 0; }
.sf-badge:last-child { border-right: 0; }

.sf-badge__label {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: var(--sf-label-lg);
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--sf-navy);
}

.sf-badge__fact { font-size: 12.5px; letter-spacing: 0.02em; color: #6B6049; }

/* ==========================================================================
   10. Sections
   ========================================================================== */

.sf-section .sf-inner { padding-top: var(--sf-section-y); padding-bottom: var(--sf-section-y); }
.sf-section h2 { margin: 0 0 var(--sf-5); max-width: 18em; }
.sf-lead { font-size: var(--sf-lead-size); color: var(--sf-muted); max-width: 46em; margin: 0 0 var(--sf-7); }

/* Descriptive body copy under a heading: same size as body, quieter. */
.sf-muted { color: var(--sf-muted); }

.sf-grid { display: grid; gap: var(--sf-5); }
.sf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sf-grid--points { grid-template-columns: repeat(2, 1fr); max-width: 980px; column-gap: 56px; row-gap: 34px; }

/* A hairline rather than a fill. The illustrations already carry the colour,
   and a tinted card behind them makes the page look striped. */
.sf-card, .sf-review, .sf-step {
	padding: 30px 28px;
	border: 1px solid rgba(15, 35, 64, 0.13);
	border-radius: var(--sf-radius);
	background: var(--sf-white);
}

.sf-card h3, .sf-step h3 { font-size: 20px; margin: 0 0 var(--sf-2); }
.sf-card p, .sf-step p, .sf-point p { font-size: var(--sf-body-sm); color: var(--sf-muted); margin: 0; }

.sf-point { display: grid; grid-template-columns: var(--sf-icon-lg) 1fr; column-gap: var(--sf-4); row-gap: 7px; }
.sf-point svg { color: var(--sf-navy); grid-row: 1 / span 2; margin-top: 2px; }
.sf-point h3 { font-family: 'Libre Franklin', sans-serif; font-size: var(--sf-body); font-weight: 600; margin: 0; }
.sf-point p { font-size: 15px; line-height: 1.55; }

.sf-step__n {
	display: block;
	margin-bottom: var(--sf-4);
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 52px;
	font-weight: 600;
	line-height: 0.85;
	letter-spacing: -0.04em;
	color: var(--sf-accent);
}

.sf-split { gap: var(--sf-8); align-items: center; }

.sf-chips { display: flex; flex-wrap: wrap; gap: var(--sf-2); margin-bottom: var(--sf-5); }
.sf-chip {
	padding: 8px 16px;
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius-pill);
	background: var(--sf-white);
	font-size: var(--sf-small);
	color: var(--sf-ink);
}
.sf-chip.is-home { border-color: var(--sf-accent); background: var(--sf-accent-tint); color: var(--sf-accent-dark); font-weight: 600; }
.sf-area__note { margin: 0; display: flex; align-items: center; gap: var(--sf-3); flex-wrap: wrap; }

/* The quote is the loudest thing in the card, so it is set in the serif, at
   reading size, in the ink colour rather than the muted grey. */
.sf-review { display: flex; flex-direction: column; }
.sf-review__stars { color: var(--sf-star); letter-spacing: 3px; display: block; margin-bottom: var(--sf-4); }
.sf-review__quote {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 19.5px;
	line-height: 1.5;
	color: var(--sf-navy);
	margin: 0 0 var(--sf-4);
}
.sf-review__by { margin-top: auto; border-top: 1px solid var(--sf-line); padding-top: 14px; font-size: var(--sf-small); font-weight: 600; color: var(--sf-navy); margin-bottom: 0; }
.sf-review__by span { display: block; font-size: 13.5px; font-weight: 400; color: var(--sf-muted); }

/* One bordered sheet with hairlines between the questions, rather than a stack
   of separate pills. Ten pills in a column read as ten unrelated objects. */
.sf-faq {
	max-width: 860px;
	border: 1px solid rgba(15, 35, 64, 0.13);
	border-radius: var(--sf-radius);
	background: var(--sf-white);
	overflow: hidden;
}
.sf-faq__item { border-bottom: 1px solid rgba(15, 35, 64, 0.13); }
.sf-faq__item:last-child { border-bottom: 0; }
.sf-faq__item summary {
	cursor: pointer;
	min-height: 62px;
	padding: 20px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sf-5);
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -0.015em;
	color: var(--sf-navy);
	list-style: none;
}
.sf-faq__item summary:hover { background: var(--sf-tint); }
.sf-faq__item summary::-webkit-details-marker { display: none; }
.sf-faq__item summary::after { content: '+'; flex: 0 0 auto; font-family: 'Libre Franklin', sans-serif; font-weight: 400; font-size: var(--sf-h3); line-height: 1; color: var(--sf-muted); }
.sf-faq__item[open] summary::after { content: '\2212'; }
.sf-faq__item p { padding: 0 22px 22px; font-size: var(--sf-body-sm); color: var(--sf-muted); margin: 0; }

/* The one dark band in the middle of the page. Without it the whole scroll is
   white, light grey, white, light grey. */

.sf-why h2 { max-width: 15em; margin-bottom: clamp(28px, 3.5vw, 44px); }



/* ==========================================================================
   11. Closing call to action and the inspection form
   ========================================================================== */

.sf-cta .sf-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sf-8);
	align-items: center;
}

.sf-cta h2 { margin-bottom: 0; max-width: 14em; }
.sf-cta p { max-width: 34em; }

/* The contact page opens with the form, so its closing band is the phone only
   and does not need two columns to hold it. */
.sf-cta--phoneonly .sf-inner { grid-template-columns: 1fr; }

.sf-form__sub { font-size: var(--sf-small); color: var(--sf-muted); margin: calc(var(--sf-2) * -1) 0 var(--sf-4); }

.sf-cta__phone a {
	display: inline-flex;
	align-items: center;
	margin-top: var(--sf-4);
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: var(--sf-display);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--sf-white);
	text-decoration: none;
}

.sf-cta__phone a:hover { color: var(--sf-white); text-decoration: underline; }
.sf-cta__hours { font-size: var(--sf-body-sm); margin-top: var(--sf-4); }

.sf-form {
	padding: var(--sf-6);
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius);
	background: var(--sf-white);
}

/* Inside the navy band the border would fight the card edge. */
.sf-cta .sf-form { border-color: transparent; }

.sf-form__title {
	font-family: 'Libre Franklin', sans-serif;
	font-size: var(--sf-body);
	font-weight: 600;
	margin: 0 0 var(--sf-4);
}

/* The band paints every <p> in on-dark colours and this card is white, so
   anything inside it has to say so at the same specificity or louder.
   Otherwise it renders perfectly and nobody can read it. */
.sf-cta .sf-form__title { color: var(--sf-navy); }
.sf-cta .sf-form__note { font-size: var(--sf-small); color: var(--sf-muted); margin: var(--sf-3) 0 0; }
.sf-form__note--unused { color: var(--sf-muted); font-size: var(--sf-small); margin: var(--sf-3) 0 0; }

/* WPForms 1.8 styles itself from CSS custom properties on the form container.
   Setting those is the supported way in, and it beats fighting its selectors. */
.sf-form .wpforms-container {
	--wpforms-button-background-color: var(--sf-accent);
	--wpforms-button-border-color: var(--sf-accent);
	--wpforms-button-text-color: var(--sf-white);
	--wpforms-button-border-radius: var(--sf-radius);
	--wpforms-button-size-height: 52px;
	--wpforms-button-size-font-size: var(--sf-body);
	--wpforms-field-border-color: var(--sf-line);
	--wpforms-field-border-radius: var(--sf-radius-sm);
	--wpforms-field-text-color: var(--sf-ink);
	--wpforms-label-color: var(--sf-ink);
	--wpforms-field-size-font-size: var(--sf-body-sm);
}

.sf-form .wpforms-container .wpforms-submit { width: 100%; font-weight: 600; }
.sf-form .wpforms-container .wpforms-submit:hover { background: var(--sf-accent-dark); border-color: var(--sf-accent-dark); }
.sf-form .wpforms-container .wpforms-field { padding: 0 0 var(--sf-4); }
.sf-form .wpforms-container .wpforms-field-label,
.sf-form .wpforms-container .wpforms-required-label { font-size: var(--sf-small); font-weight: 600; color: var(--sf-ink); }

/* WPForms gives its own container a 3px radius, the only odd corner left. */
.sf-form .wpforms-container { --wpforms-container-border-radius: var(--sf-radius); }

/* WPForms sizes a large textarea as --wpforms-field-size-input-height x 5.1,
   which is 219px, from a selector at (0,3,2). Mirroring their own selector
   under .sf-form is the only way past it without !important. Two rows, like
   the mockup. Checked with CSS.getMatchedStylesForNode, not guessed. */
.sf-form div.wpforms-container-full .wpforms-form textarea.wpforms-field-large { height: 96px; }

/* ==========================================================================
   12. Footer
   ========================================================================== */

.sf-footer { background: var(--sf-white); border-top: 1px solid var(--sf-line); }
.sf-footer__inner { padding-top: var(--sf-section-y); padding-bottom: var(--sf-7); }
.sf-footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sf-6); }

.sf-footer h2 {
	font-family: 'Libre Franklin', sans-serif;
	font-size: var(--sf-eyebrow);
	font-weight: 600;
	letter-spacing: var(--sf-track-mid);
	text-transform: uppercase;
	color: var(--sf-navy);
	margin-bottom: var(--sf-4);
}

.sf-footer p, .sf-footer li { font-size: var(--sf-body-sm); color: var(--sf-muted); }
.sf-footer ul { list-style: none; margin: 0; padding: 0; }
.sf-footer li { margin-bottom: var(--sf-3); }

.sf-footer__brand {
	display: flex;
	align-items: center;
	gap: var(--sf-3);
	margin-bottom: var(--sf-4);
	text-decoration: none;
}
.sf-footer__brand img { width: 30px; height: 30px; flex: 0 0 auto; }
.sf-footer__brand span {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: var(--sf-body);
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--sf-navy);
}
.sf-footer .sf-btn { margin-top: var(--sf-4); padding: 12px 18px; }

/* Two columns of towns rather than one run-on line: ten names separated by
   middots read as a sentence nobody finishes. */
.sf-footer__areas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.sf-footer__areas li { font-size: var(--sf-small); line-height: 1.4; color: var(--sf-muted); margin: 0; }
.sf-footer__areas li.is-home { color: var(--sf-navy); font-weight: 600; }

.sf-footer__legal-links { display: flex; gap: var(--sf-4); flex-wrap: wrap; }
.sf-footer__legal-links a { font-size: 13px; }

.sf-footer__legal {
	display: flex;
	justify-content: space-between;
	gap: var(--sf-4);
	flex-wrap: wrap;
	margin-top: var(--sf-8);
	padding-top: var(--sf-5);
	border-top: 1px solid var(--sf-line);
	font-size: var(--sf-small);
	color: var(--sf-muted);
}

/* ==========================================================================
   13. Mobile call bar. Fixed, always reachable, phone only.
   ========================================================================== */

.sf-callbar { display: none; }

/* ==========================================================================
   14. Breakpoints
   ========================================================================== */

@media (max-width: 1023px) {
	.sf-nav { display: none; }
	.sf-burger { display: flex; }
	:root { --sf-phone: 26px; }

	/* Core sets flex-wrap: nowrap !important above 782px on its own column
	   blocks; these grids are ours, so a plain override is enough. */
	.sf-hero__inner { grid-template-columns: 1fr; gap: var(--sf-6); padding-top: var(--sf-section-y-sm); padding-bottom: var(--sf-section-y-sm); }
	.sf-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sf-grid--points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sf-grid--2, .sf-split { grid-template-columns: 1fr; }

	.sf-cta .sf-inner { grid-template-columns: 1fr; }

	.sf-badges__inner { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: var(--sf-5) var(--sf-3); }
	.sf-badge { padding: 0; border-right: 0; }
	.sf-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
	.admin-bar .sf-header { top: 46px; }
}

@media (max-width: 767px) {
	:root { --sf-gutter: 20px; --sf-header-h: 90px; --sf-callbar-h: 78px; }

	body { padding-bottom: 78px; }

	/* The horizontal lockup is 400 by 84, so at 412px it would crowd the phone
	   and the menu button. The square mark carries it instead. */
	.sf-brand .sf-brand__full { display: none; }
	.sf-brand .sf-brand__mark { display: block; height: 36px; }
	:root { --sf-phone: 23px; }
	.sf-header__phone svg { display: none; }
	.sf-header__inner { gap: var(--sf-3); }

	/* The fixed call bar already shows this number for the whole session, so a
	   strip button here would be a third copy on one screen. The message stays
	   clickable, nobody has to hunt. */
	.sf-strip__inner { justify-content: flex-start; }
	.sf-strip__meta, .sf-strip__phone { display: none; }
	.sf-strip__lead { text-decoration: underline; text-underline-offset: 3px; }

	.sf-hero__actions .sf-btn { flex: 1 1 100%; }

	.sf-section .sf-inner { padding-top: var(--sf-section-y-sm); padding-bottom: var(--sf-section-y-sm); }
	.sf-grid--4, .sf-grid--3, .sf-grid--points { grid-template-columns: 1fr; }
	.sf-badges__inner { grid-template-columns: repeat(2, 1fr); gap: var(--sf-5) var(--sf-4); }

	.sf-footer__grid { grid-template-columns: 1fr; gap: var(--sf-6); }
	.sf-footer__inner { padding-top: var(--sf-section-y-sm); }

	/* Anything that docks bottom right later (chat, scheduler) must clear this.
	   Give it bottom: calc(var(--sf-callbar-h) + 12px). */
	.sf-callbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 90;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--sf-2);
		padding: 18px 16px;
		background: var(--sf-accent);
		color: var(--sf-white);
		font-size: var(--sf-body);
		font-weight: 600;
		text-decoration: none;
	}
}

/* ==========================================================================
   15. Service pages
   ========================================================================== */

/* No frame. The illustration is a cutout, and a cool grey box under a warm
   sepia drawing reads as a swatch rather than a picture. */
.sf-figure--pest {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	padding: 0;
}

.sf-figure--pest img { width: 340px; height: 340px; }

.sf-hero--service .sf-hero__inner { padding-top: var(--sf-8); padding-bottom: var(--sf-8); }

@media (max-width: 767px) {
	.sf-figure--pest img { width: 220px; height: 220px; }
}

/* A card that leads somewhere should say so. Cards without a page yet stay
   inert rather than linking to a 404. */
.sf-card--link { display: block; text-decoration: none; transition: background 0.15s, transform 0.15s; }
.sf-card--link:hover { background: var(--sf-accent-tint); transform: translateY(-2px); }
.sf-card--link h3 { color: var(--sf-navy); }
.sf-card--link p { color: var(--sf-muted); }

/* A hero with no illustration is one column, not one column plus a hole. */
.sf-hero__inner--single { grid-template-columns: 1fr; }
.sf-hero__inner--single .sf-hero__lead { max-width: 46em; }

/* ==========================================================================
   16. Contact page
   ========================================================================== */

/* Address, hours and coverage side by side. Stacked rows made the page scroll
   past three lines of text for no reason. */
/* Three columns when there is an address to show, two when there is not.
   auto-fit rather than a fixed count, so the row fills the width either way
   instead of leaving an empty third where the address used to be. */
.sf-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sf-8); }

.sf-contact h3 {
	font-family: 'Libre Franklin', sans-serif;
	font-size: var(--sf-eyebrow);
	font-weight: 600;
	letter-spacing: var(--sf-track-mid);
	text-transform: uppercase;
	color: var(--sf-muted);
	margin: 0 0 var(--sf-4);
}

.sf-contact p { margin: var(--sf-4) 0 0; font-size: var(--sf-small); color: var(--sf-muted); }
.sf-contact__addr {
	margin-top: 0;
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: var(--sf-h3);
	font-weight: 600;
	line-height: 1.3;
	color: var(--sf-navy);
}
.sf-contact .sf-chips { margin-bottom: 0; }

.sf-hours { margin: 0; }
.sf-hours > div {
	display: flex;
	justify-content: space-between;
	gap: var(--sf-4);
	padding: var(--sf-3) 0;
	border-bottom: 1px solid var(--sf-line);
}
.sf-hours dt { font-weight: 600; color: var(--sf-navy); }
.sf-hours dd { margin: 0; color: var(--sf-muted); text-align: right; }

@media (max-width: 1023px) {
	.sf-contact { grid-template-columns: 1fr; gap: var(--sf-6); }
}

/* About: the dated story, the visit strip, the route table. */
.sf-tl__wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--sf-8); align-items: start; }
/* Wide enough for a year and for a two word label, because the column holds
   a company history on an operator site and a plain statement of what the
   site is on a referral one. */
.sf-tl__row { display: grid; grid-template-columns: 120px 1fr; gap: var(--sf-5); padding: var(--sf-5) 0; border-bottom: 1px solid var(--sf-line); }
.sf-tl__row:first-child { padding-top: 0; }
.sf-tl__row:last-child { border-bottom: 0; }
.sf-tl__y { font-family: 'Source Serif 4', Georgia, serif; font-size: var(--sf-h3); font-weight: 600; color: #6B4E32; margin: 0; }
.sf-tl__body h3 { font-size: var(--sf-body); font-family: 'Libre Franklin', sans-serif; margin: 0 0 var(--sf-2); }
.sf-tl__body p { font-size: var(--sf-body-sm); color: var(--sf-muted); margin: 0; }

.sf-sectionhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sf-5);
	flex-wrap: wrap;
	margin-bottom: var(--sf-6);
}
.sf-sectionhead h2 { margin: 0; }
.sf-sectionhead__meta { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #8A6A48; }
.sf-sectionhead { align-items: flex-end; }

.sf-visit {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	border: 1px solid rgba(15, 35, 64, 0.13);
	border-radius: var(--sf-radius);
	background: var(--sf-white);
}
.sf-visit__step { padding: var(--sf-5); border-left: 1px solid rgba(15, 35, 64, 0.13); }
.sf-visit__step:first-child { border-left: 0; }
.sf-visit__n { font-size: var(--sf-eyebrow); font-weight: 600; letter-spacing: var(--sf-track-tight); color: var(--sf-warm); margin: 0 0 var(--sf-3); }
.sf-visit__step h3 { font-family: 'Libre Franklin', sans-serif; font-size: var(--sf-body-sm); margin: 0 0 var(--sf-2); }
.sf-visit__step p { font-size: var(--sf-small); color: var(--sf-muted); margin: 0; }

.sf-routes { margin: var(--sf-6) 0; }
.sf-routes > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--sf-4);
	padding: var(--sf-3) 0;
	border-bottom: 1px solid var(--sf-line);
}
.sf-routes dt { font-weight: 600; color: var(--sf-navy); }
.sf-routes dd { margin: 0; font-size: var(--sf-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-muted); text-align: right; }
.sf-routes > div:first-child dd { color: var(--sf-accent); font-weight: 600; }

/* Google's embed has no intrinsic ratio, so the wrapper sets one. */
.sf-mapembed {
	border: 1px solid var(--sf-line);
	border-radius: var(--sf-radius);
	overflow: hidden;
	line-height: 0;
}
.sf-mapembed iframe { display: block; width: 100%; aspect-ratio: 21 / 9; height: auto; }

@media (max-width: 767px) {
	.sf-mapembed iframe { aspect-ratio: 4 / 3; }
}

/* The map is drawn tall. Run it as a wide plate and crop, or it becomes a
   screen and a half of scrolling on its own. */
.sf-figure--wide { border-radius: var(--sf-radius); overflow: hidden; }
.sf-figure--wide img {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	height: auto;
	object-fit: cover;
	object-position: center;
}

/* The FAQ jump chips are links, so they get the hover a plain chip does not. */
.sf-chips--jump { margin-top: var(--sf-5); margin-bottom: 0; }
.sf-chips--jump .sf-chip { text-decoration: none; }
.sf-chips--jump .sf-chip:hover { border-color: var(--sf-accent); color: var(--sf-accent-dark); }

@media (max-width: 1023px) {
	.sf-tl__wrap { grid-template-columns: 1fr; gap: var(--sf-6); }
	.sf-visit { grid-template-columns: repeat(2, 1fr); }
	.sf-visit__step { border-top: 1px solid rgba(15, 35, 64, 0.13); }
	.sf-visit__step:nth-child(odd) { border-left: 0; }
	.sf-visit__step:nth-child(-n+2) { border-top: 0; }
}

@media (max-width: 600px) {
	.sf-visit { grid-template-columns: 1fr; }
	.sf-visit__step { border-left: 0; border-top: 1px solid rgba(15, 35, 64, 0.13); }
	.sf-visit__step:first-child { border-top: 0; }
	.sf-tl__row { grid-template-columns: 1fr; gap: var(--sf-2); }
}

/* ==========================================================================
   17. Service page: breadcrumb, specimen plate, season calendar
   ========================================================================== */

.sf-crumbs { display: flex; gap: var(--sf-2); font-size: var(--sf-small); color: var(--sf-muted); margin-bottom: var(--sf-4); }
.sf-crumbs a { color: var(--sf-accent); text-decoration: none; }
.sf-crumbs a:hover { text-decoration: underline; }

/* The plate fills the hero column with something specific to this pest, which
   is what the floating illustration on its own never did. */
.sf-plate {
	margin: 0;
	padding: var(--sf-5);
	background: #F6F1E7;
	border: 1px solid #E0D3BE;
	border-radius: var(--sf-radius);
}

.sf-plate__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--sf-3);
	padding-bottom: var(--sf-3);
	border-bottom: 1px solid #E0D3BE;
}

.sf-plate__no { font-family: 'Source Serif 4', Georgia, serif; font-size: var(--sf-body-sm); font-weight: 600; color: var(--sf-navy); }
.sf-plate__label { font-size: var(--sf-eyebrow); font-weight: 600; letter-spacing: var(--sf-track-tight); text-transform: uppercase; color: var(--sf-warm); text-align: right; }

.sf-plate__art { display: flex; align-items: center; justify-content: center; padding: var(--sf-6) 0; }
.sf-plate__art img { width: 240px; height: 240px; }

/* A supplied illustration fills the plate rather than sitting centred in it. */
.sf-plate__art--wide { display: block; padding: var(--sf-4) 0; }
.sf-plate__art--wide img { width: 100%; height: auto; }
.sf-plate__title { font-family: 'Source Serif 4', Georgia, serif; font-size: var(--sf-body); font-weight: 600; color: var(--sf-navy); margin: 0 0 var(--sf-2); }

.sf-plate__body { padding-top: var(--sf-3); border-top: 1px solid #E0D3BE; }
.sf-plate__latin { font-family: 'Source Serif 4', Georgia, serif; font-style: italic; font-size: var(--sf-body); color: var(--sf-navy); margin: 0 0 var(--sf-2); }
.sf-plate__body p { font-size: var(--sf-body-sm); line-height: 1.6; color: #6B5B44; margin: 0; }

/* Twelve column calendar. No image, no script, so every pest gets one free.
   One grid holds the whole thing: band labels on row 1, bars on row 2, the
   axis on row 3, month names on row 4. */
.sf-season { margin: 0 0 var(--sf-7); }

.sf-season__label {
	display: block;
	margin-bottom: 18px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #8A6A48;
}

.sf-season__chart {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto 104px auto auto;
}

.sf-season__cap {
	grid-row: 1;
	padding: 0 4px 8px;
	text-align: center;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.sf-season__cap--1 { color: var(--sf-accent); }
.sf-season__cap--2 { color: #3F8F65; }
.sf-season__cap--3 { color: #6B6049; }

/* Three strengths of the one green, so the bars read as one measure rather
   than three unrelated categories. */
.sf-season__bar { grid-row: 2; align-self: end; }
.sf-season__bar--1 { background: var(--sf-accent); }
.sf-season__bar--2 { background: rgba(31, 122, 77, 0.5); }
.sf-season__bar--3 { background: rgba(31, 122, 77, 0.24); }

.sf-season__axis { grid-column: 1 / 13; grid-row: 3; height: 1px; background: var(--sf-navy); }

.sf-season__month {
	grid-row: 4;
	padding-top: 10px;
	text-align: center;
	font-size: clamp(9.5px, 0.85vw, 11.5px);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--sf-ink);
}

.sf-season__caption {
	margin: var(--sf-4) 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(15, 35, 64, 0.13);
	font-size: 13px;
	line-height: 1.6;
	color: #6B6049;
}

/* The chart sits on white inside the cream band, framed in the warm line. */
.sf-seasonwrap {
	background: var(--sf-white);
	border: 1px solid #E0D3BE;
	border-radius: var(--sf-radius);
	padding: clamp(22px, 2.6vw, 34px);
}

.sf-seasonwrap .sf-season { margin-bottom: 0; }

/* Signs get an order label so three identical cards read as a sequence. */
.sf-card__no { font-size: var(--sf-eyebrow); font-weight: 600; letter-spacing: var(--sf-track-tight); text-transform: uppercase; color: var(--sf-warm); margin: 0 0 var(--sf-2); }

@media (max-width: 767px) {
	.sf-plate__art img { width: 180px; height: 180px; }
	.sf-season__month { font-size: 9px; letter-spacing: 0; }
}

/* Sign vignettes. They sit inside the card, above the label, and the card loses
   its padding at the top so the art meets the edges. */
.sf-card--sign { padding-top: 0; overflow: hidden; }
/* Each illustration was trimmed to its own bounding box, so the three had
   different heights and the labels below them sat at three different levels.
   One aspect ratio, cover, and the row lines up. */
.sf-card__art--sign {
	display: block;
	width: calc(100% + 56px);
	max-width: none;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	object-position: center;
	margin: 0 -28px var(--sf-4);
}

/* Season notes: a serif line naming the point, then the paragraph. */
.sf-note__h {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: var(--sf-label-lg);
	font-weight: 600;
	color: var(--sf-navy);
	margin: 0 0 var(--sf-2);
}
.sf-note__b { font-size: var(--sf-body-sm); line-height: 1.65; color: #4A5049; margin: 0; }
.sf-notes { margin-top: clamp(28px, 3.2vw, 42px); column-gap: clamp(24px, 3vw, 44px); }

/* Treatment steps. A numbered list separated by rules, not three boxes: the
   order matters here in a way it does not in the three homepage steps. */
.sf-treat .sf-steps { max-width: 760px; }

/* Steps beside the diagram when there is one. */
.sf-treat__wrap { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(32px, 4vw, 60px); align-items: start; }
.sf-treat__wrap .sf-steps { max-width: none; }

@media (max-width: 1023px) {
	.sf-treat__wrap { grid-template-columns: 1fr; gap: var(--sf-6); }
}
.sf-steprow { display: flex; gap: var(--sf-5); padding: 30px 0; border-bottom: 1px solid rgba(15, 35, 64, 0.13); }
.sf-steprow:first-child { padding-top: 0; }
.sf-steprow__n {
	flex: 0 0 auto;
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 56px;
	font-weight: 600;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: #6B4E32;
	margin: 0;
}
.sf-steprow__body h3 { font-family: 'Source Serif 4', Georgia, serif; font-size: 23px; letter-spacing: -0.012em; margin: 0 0 9px; }
.sf-steprow__body p { font-size: var(--sf-body-sm); line-height: 1.65; color: var(--sf-muted); margin: 0; }
.sf-treat .sf-area__note { margin-top: var(--sf-6); }

/* Service page FAQ: the heading and its note stay beside the questions. */
.sf-faqsplit { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sf-8); align-items: start; }
.sf-faqsplit .sf-faq { max-width: none; }
.sf-faqside h2 { margin-bottom: var(--sf-4); }
.sf-faqside .sf-lead { margin-bottom: 0; }

@media (max-width: 1023px) {
	.sf-faqsplit { grid-template-columns: 1fr; gap: var(--sf-6); }
}

@media (max-width: 600px) {
	.sf-steprow { gap: var(--sf-4); }
	.sf-steprow__n { font-size: 40px; }
}

/* ==========================================================================
   18. Contact, About and FAQ components
   ========================================================================== */

.sf-band--cream { background: #F6F1E7; }

/* The call card is the primary action on the contact page, so it is the
   loudest thing on it. */
.sf-callcard {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 26px;
	border: 2px solid var(--sf-accent);
	border-radius: var(--sf-radius);
	text-decoration: none;
	background: var(--sf-white);
}

.sf-callcard:hover { background: var(--sf-accent-tint); }
.sf-callcard svg { color: var(--sf-accent); flex: 0 0 auto; }
.sf-callcard__body { display: flex; flex-direction: column; gap: 4px; }
.sf-callcard__number {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: clamp(38px, 4.4vw, 60px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--sf-navy);
	/* A phone number split across two lines stops being a phone number. */
	white-space: nowrap;
}
.sf-callcard__status { font-size: 13.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-accent); }

/* Sidebar width. The number has to fit a 300px column, so it drops to a size
   that cannot wrap and the card becomes the button rather than containing one. */
.sf-callcard--compact {
	gap: var(--sf-3);
	min-height: 60px;
	padding: 12px 14px;
	border: 0;
	background: var(--sf-accent);
}
.sf-callcard--compact:hover { background: var(--sf-accent-dark); }
.sf-callcard--compact svg { color: var(--sf-white); }
.sf-callcard--compact .sf-callcard__body { gap: 2px; }
.sf-callcard--compact .sf-callcard__number { font-size: 26px; letter-spacing: -0.02em; color: var(--sf-white); }
.sf-callcard--compact .sf-callcard__status { font-size: 12.5px; letter-spacing: 0.06em; color: var(--sf-accent-tint); }

.sf-altcontact { margin-top: var(--sf-5); }
.sf-altcontact p { font-size: var(--sf-small); color: var(--sf-muted); margin: var(--sf-2) 0 var(--sf-5); }

/* Stats. Empty values never reach this, so the row is always full. */
.sf-stats__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--sf-5);
	padding-top: var(--sf-7);
	padding-bottom: var(--sf-7);
}

.sf-stat { padding-left: var(--sf-5); border-left: 1px solid #E0D3BE; }
.sf-stat:first-child { padding-left: 0; border-left: 0; }
.sf-stat__n {
	display: block;
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: clamp(34px, 3.4vw, 46px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--sf-navy);
}
.sf-stat__l { display: block; margin-top: 7px; font-size: var(--sf-small); line-height: 1.5; color: #4A3722; }

/* FAQ groups */
.sf-faqgroup { margin-bottom: var(--sf-7); }
.sf-faqgroup__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sf-4);
	padding-bottom: var(--sf-3);
	margin-bottom: var(--sf-4);
	border-bottom: 2px solid var(--sf-navy);
}
.sf-faqgroup__head h2 { font-size: clamp(22px, 2vw, 27px); margin: 0; max-width: none; }
.sf-faqgroup__meta { font-size: var(--sf-eyebrow); font-weight: 600; letter-spacing: var(--sf-track-mid); text-transform: uppercase; color: var(--sf-muted); white-space: nowrap; }

/* nowrap on the meta plus a heading beside it cannot fit 412px, and a flex row
   will not shrink past its content, so the head stacks on small screens. */
@media (max-width: 600px) {
	.sf-faqgroup__head { display: block; }
	.sf-faqgroup__meta { display: block; white-space: normal; margin-top: var(--sf-1); }
}

/* The whole sidebar sticks, not each card, so the three stay in order. */
.sf-asks {
	position: sticky;
	top: calc(var(--sf-header-h) + var(--sf-4));
	display: flex;
	flex-direction: column;
	gap: var(--sf-4);
}

.sf-ask {
	padding: 26px 24px;
	border: 2px solid var(--sf-accent);
	border-radius: var(--sf-radius);
	background: var(--sf-white);
}

.sf-ask--soft { border: 1px solid var(--sf-line); background: var(--sf-tint); }
.sf-ask--note { border: 1px solid #E0D3BE; background: #F6F1E7; }

.sf-ask h3 { font-size: var(--sf-h3); margin: 0 0 var(--sf-3); }
.sf-ask--soft h3, .sf-ask--note h3 { font-size: 20px; }
.sf-ask__copy { font-size: var(--sf-body-sm); color: var(--sf-muted); margin: 0 0 var(--sf-4); }
.sf-ask--note .sf-ask__copy { margin: var(--sf-2) 0 0; font-size: var(--sf-small); color: #4A3722; }
.sf-ask .sf-btn { width: 100%; }

/* A sentence-case label on this one; it points at a section, it is not a CTA. */
.sf-btn--plain { font-size: var(--sf-body-sm); letter-spacing: normal; text-transform: none; }

.sf-ask__hours {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: var(--sf-4) 0 0;
	padding-top: var(--sf-3);
	border-top: 1px solid var(--sf-line);
	font-size: 13.5px;
}

/* Two column body: content left, a card that follows you on the right. */
.sf-withaside { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sf-8); align-items: start; }

@media (max-width: 1023px) {
	.sf-withaside { grid-template-columns: 1fr; }
	.sf-asks { position: static; }
	.sf-stat { padding-left: 0; border-left: 0; }
}

/* ==========================================================================
   19. Dark band inversion.

   Last on purpose. These carry the same specificity as the component rules
   they override (.sf-point p, .sf-card p), so they have to come after them in
   source order. Raising the selectors instead would start a specificity war
   that every future component joins.
   ========================================================================== */

.sf-band--navy h1, .sf-band--navy h2, .sf-band--navy h3 { color: var(--sf-white); }
.sf-band--navy p { color: var(--sf-on-dark-muted); }
.sf-band--navy .sf-eyebrow { color: #8FA3BE; }
.sf-band--navy .sf-point svg { color: var(--sf-white); }

/* The form card is a white island inside the dark band, so it opts back out. */
.sf-band--navy .sf-form { color: var(--sf-ink); }
.sf-band--navy .sf-form p, .sf-band--navy .sf-form label { color: var(--sf-muted); }
.sf-band--navy .sf-form .sf-form__title { color: var(--sf-navy); }

/* ==========================================================================
   20. Legal page. Long-form prose beside a sticky contents list.
   ========================================================================== */

/* The dated line closes the hero, so a rule under it and less air below:
   this page is a document, not a landing page with room to breathe. */
.sf-hero--legal { border-bottom: 1px solid var(--sf-line); }
.sf-hero--legal .sf-hero__inner { padding-bottom: var(--sf-6); }
.sf-legal-body .sf-inner { padding-top: var(--sf-9); }

.sf-legal { display: grid; grid-template-columns: 280px 1fr; gap: var(--sf-8); align-items: start; }

.sf-legal__aside {
	position: sticky;
	top: calc(var(--sf-header-h) + var(--sf-4));
	display: flex;
	flex-direction: column;
	gap: var(--sf-5);
}

.sf-legal__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sf-3) var(--sf-5);
	margin: var(--sf-5) 0 0;
	padding-top: var(--sf-4);
	border-top: 1px solid var(--sf-line);
	font-size: var(--sf-small);
	color: var(--sf-muted);
}

.sf-toc__head {
	font-size: var(--sf-eyebrow);
	font-weight: 600;
	letter-spacing: var(--sf-track-mid);
	text-transform: uppercase;
	color: var(--sf-navy);
	margin: 0 0 var(--sf-3);
}

.sf-toc ul { list-style: none; margin: 0 0 var(--sf-5); padding: 0; }
.sf-toc li { margin: 0 0 var(--sf-2); }
.sf-toc a { font-size: var(--sf-body-sm); color: var(--sf-ink); text-decoration: none; }
.sf-toc a:hover { color: var(--sf-accent); }
.sf-toc ul:last-child { margin-bottom: 0; }

/* A section is a document, so it gets a rule above it rather than a card. */
.sf-legal__section { padding-top: var(--sf-8); }
.sf-legal__section + .sf-legal__section { margin-top: var(--sf-8); border-top: 1px solid var(--sf-line); }
.sf-legal__section:first-child { padding-top: 0; }

.sf-prose { max-width: 68ch; }
.sf-prose h2 { margin: 0 0 var(--sf-5); }
.sf-prose h3 { margin: var(--sf-7) 0 var(--sf-3); }
.sf-prose p { margin: 0 0 var(--sf-4); }
.sf-prose__list { margin: 0 0 var(--sf-4); padding-left: var(--sf-5); }
.sf-prose__list li { margin-bottom: var(--sf-3); }
.sf-prose__list li:last-child { margin-bottom: 0; }

/* An anchored heading must clear the sticky header when it is jumped to. */
.sf-prose h2[id], .sf-prose h3[id] { scroll-margin-top: calc(var(--sf-header-h) + var(--sf-5)); }

@media (max-width: 1023px) {
	.sf-legal { grid-template-columns: 1fr; gap: var(--sf-6); }
	.sf-legal__aside { position: static; }
}

/* ==========================================================================
   21. Service links. The wayfinding version of the service cards.
   ========================================================================== */

.sf-servicelink {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 19px 20px;
	border: 1px solid rgba(15, 35, 64, 0.13);
	border-radius: var(--sf-radius);
	text-decoration: none;
}

.sf-servicelink svg { color: var(--sf-navy); flex: 0 0 auto; }
.sf-servicelink h3 { font-size: 20px; margin: 0; }
a.sf-servicelink:hover { border-color: var(--sf-navy); }
a.sf-servicelink:hover h3 { color: var(--sf-accent-dark); }

.sf-servicelist { gap: var(--sf-5); }

/* The 404 heading sits above a plain list, so it wraps tighter than a section
   heading that has a lead paragraph under it. */
.sf-404__h2 { max-width: 18em; margin-bottom: var(--sf-6); }

/* The 404 heading is short enough to sit on one line at 1280, which reads
   thinner than the design; it breaks where the mockup breaks it. */
.sf-hero--404 h1 { max-width: 20ch; }

/* Eight services rather than five links, so the column runs tighter. */
.sf-footer li { margin-bottom: 10px; }