/* =====================================================================
   v3 service pages (spec 5): /refrigerator-repair/ and the other 11 appliance pages.
   Markup: page.hbs ("service" branch) + partials/service/*. Every rule is scoped to .nf-service.
   Colors come from the v3 tokens in app.css (spec 2.1); the fallbacks only keep the page readable
   while the token block is being rolled out. Buttons (.nf-btn) and the panel base (.nf-cta-panel) are shared, from app.css.
   ===================================================================== */

.nf-service {
	--svc-pad: 20px;
	--svc-gap: var(--nf-gap, clamp(56px, 2.5rem + 4vw, 104px));
	--svc-head-gap: var(--nf-head-gap, clamp(20px, 1rem + 1vw, 32px));
	--svc-text: var(--nf-text, #1c1d20);
	--svc-muted: var(--nf-muted, #565a63);
	--svc-sunken: var(--nf-sunken, #f5f6f8);
	--svc-surface: var(--nf-surface, #ffffff);
	--svc-line: var(--nf-line, #e3e5e9);
	--svc-line-strong: var(--nf-line-strong, #868b95);
	--svc-orange: var(--nf-orange, #f87d25);
	--svc-on-orange: var(--nf-on-orange, #1c1d20);
	--svc-link: var(--nf-link, #1c1d20);
	--svc-focus: var(--nf-focus, #1c1d20);
	--svc-shadow: var(--nf-shadow, 0 1px 2px rgba(17, 18, 20, .06), 0 8px 24px rgba(17, 18, 20, .08));
	color: var(--svc-text);
	overflow-x: clip;
}
html[data-theme="dark"] .nf-service {
	--svc-text: var(--nf-text, #e6e7ea);
	--svc-muted: var(--nf-muted, #a3a7b0);
	--svc-sunken: var(--nf-sunken, #232529);
	--svc-surface: var(--nf-surface, #1f2023);
	--svc-line: var(--nf-line, #34363b);
	--svc-line-strong: var(--nf-line-strong, #70757f);
	--svc-on-orange: var(--nf-on-orange, #17181b);
	--svc-link: var(--nf-link, #f87d25);
	--svc-focus: var(--nf-focus, #f87d25);
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) .nf-service {
		--svc-text: var(--nf-text, #e6e7ea); --svc-muted: var(--nf-muted, #a3a7b0); --svc-sunken: var(--nf-sunken, #232529);
		--svc-surface: var(--nf-surface, #1f2023); --svc-line: var(--nf-line, #34363b); --svc-line-strong: var(--nf-line-strong, #70757f);
		--svc-on-orange: var(--nf-on-orange, #17181b); --svc-link: var(--nf-link, #f87d25); --svc-focus: var(--nf-focus, #f87d25);
	}
}
@media (min-width: 48rem) { .nf-service { --svc-pad: 32px; } }

/* one 1200px grid: the left edge matches the logo in the navigation (spec 3.2) */
.nf-service-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(1200px + 2 * var(--svc-pad));
	margin: 0 auto;
	padding-inline: var(--svc-pad);
}
.nf-service figure { margin: 0; }
.nf-service img { display: block; max-width: 100%; }
.nf-service .nf-icon { flex: none; width: 24px; height: 24px; color: var(--svc-orange); }
.nf-service .nf-btn .nf-icon { width: 20px; height: 20px; color: currentColor; }
.nf-service .ph-duo { opacity: .2; }
.nf-service ul, .nf-service ol { margin: 0; padding: 0; list-style: none; }

/* section rhythm: white sections and #f5f6f8 bands alternate; two white sections in a row share one gap */
.nf-service-section, .nf-service-band { padding-block: var(--svc-gap); }
.nf-service-band { background-color: var(--svc-sunken); }
.nf-service-section + .nf-service-section { padding-top: 0; }

.nf-service-h2 {
	margin: 0 0 var(--svc-head-gap);
	font-family: 'Speed FEZ', 'Source Sans Pro', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem);
	line-height: 1.1;
	letter-spacing: .01em;
	color: var(--svc-text);
	text-wrap: balance;
}

/* links in the template blocks (spec 2.2): dark text with an orange underline; orange text in the dark theme */
.nf-service-symptoms__cta a, .nf-service-steps a, .nf-service-tip a, .nf-service-aside__small a, .nf-service-final__text a {
	color: var(--svc-link);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--svc-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
	.nf-service-symptoms__cta a:hover, .nf-service-steps a:hover, .nf-service-tip a:hover, .nf-service-aside__small a:hover, .nf-service-final__text a:hover { text-decoration-thickness: 3px; }
}
.nf-service a:focus-visible { outline: 3px solid var(--svc-focus); outline-offset: 2px; border-radius: 4px; }

/* ---------- 1. hero ---------- */
.nf-service-hero { padding: calc(var(--nf-hdr, 50px) + 24px) 0 var(--svc-gap); }
.nf-service-hero__grid { display: grid; gap: 28px; }
.nf-service-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.nf-service-hero__where {
	display: flex; align-items: flex-start; gap: 8px; margin: 0;
	font-size: .9375rem; font-weight: 600; line-height: 1.35; color: var(--svc-text);
}
.nf-service-hero__where .nf-icon { width: 20px; height: 20px; margin-top: -1px; }
.nf-service-hero__title {
	margin: 0;
	font-family: 'Speed FEZ', 'Source Sans Pro', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(1.75rem, .9rem + 3.6vw, 3.4rem);
	line-height: 1.04;
	letter-spacing: .01em;
	color: var(--svc-text);
	text-wrap: balance;
	overflow-wrap: break-word;
}
.nf-service-hero__lede { margin: 0; max-width: 60ch; font-size: 1.125rem; line-height: 1.5; color: var(--svc-text); text-wrap: pretty; }
.nf-service-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.nf-service-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.nf-service-trust li {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 36px; padding: 6px 14px 6px 10px; box-sizing: border-box;
	border: 1px solid var(--svc-line); border-radius: 999px;
	font-size: .9375rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.nf-service-trust .nf-icon { width: 20px; height: 20px; }
.nf-service-hero__media { border-radius: 16px; overflow: hidden; background-color: var(--svc-sunken); }
.nf-service-hero__media img { width: 100%; height: 100%; aspect-ratio: 3 / 2; max-height: 56vw; object-fit: cover; }
/* fix1: no approved photo for this page -> proof card in the photo's place (>=1024 only; below that the chips say the same) */
.nf-service-proof { display: none; }
.nf-service-proof__list { display: grid; gap: 0; }
.nf-service-proof__list li { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--svc-line); }
.nf-service-proof__list li:first-child { border-top: 0; padding-top: 0; }
.nf-service-proof__list strong { display: block; font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--svc-text); }
.nf-service-proof__list li > span:last-child > span { display: block; margin-top: 2px; font-size: 1rem; line-height: 1.4; color: var(--svc-muted); text-wrap: pretty; }
.nf-service-proof .nf-icon-tile { width: 48px; height: 48px; background-color: var(--svc-surface); }
.nf-service-proof .nf-icon-tile .nf-icon { width: 26px; height: 26px; }
.nf-service-proof__hours { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--svc-line); font-size: 1rem; font-weight: 600; color: var(--svc-text); font-variant-numeric: tabular-nums; }
.nf-service-proof__hours .nf-icon { width: 22px; height: 22px; }
@media (max-width: 26.24rem) {
	.nf-service-hero__actions .nf-btn { padding: 0 14px; gap: 8px; }
}
/* fix1: phones get the four trust facts as an even 2x2 grid (flex-wrap left a 2-1-1 ragged stack) */
/* fix2 C8: a chip never breaks inside ("Warranty on every repair" split in two at 390): phones list the four chips one under
   another at their own width (no ragged 2-1-1, no half-empty cells) */
@media (max-width: 37.49rem) {
	.nf-service-trust { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 8px; }
	.nf-service-trust li { white-space: nowrap; min-height: 36px; font-size: .9375rem; }
}
@media (max-width: 22.4rem) {
	/* 320-359: two buttons stack full width so neither label wraps */
	.nf-service-hero__actions { display: grid; width: 100%; }
}
@media (min-width: 37.5rem) { .nf-service-trust { display: grid; grid-template-columns: repeat(2, max-content); } }   /* fix1: 2x2, never 3+1 */
@media (min-width: 48rem) {
	.nf-service-hero { padding-top: calc(var(--nf-hdr, 67px) + 40px); }
	.nf-service-hero__media img { aspect-ratio: 16 / 9; max-height: none; }
}
@media (min-width: 64rem) {
	.nf-service-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
	.nf-service-hero__lede { font-size: 1.3125rem; }
	.nf-service-hero__media img { aspect-ratio: 4 / 3; }
	.nf-service-trust { display: grid; grid-template-columns: repeat(2, max-content); }
	.nf-service-hero__grid:not(:has(.nf-service-hero__media)) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.nf-service-hero__grid:not(:has(.nf-service-hero__media)) .nf-service-trust { display: none; }
	.nf-service-hero__grid:not(:has(.nf-service-hero__media)) .nf-service-proof {
		display: block; padding: 28px 30px; border-radius: 16px; background-color: var(--svc-sunken);
	}
}

/* ---------- 2. symptoms ---------- */
.nf-service-symptoms__grid { display: grid; gap: 32px; }
.nf-symptoms { display: grid; gap: 8px; }
.nf-symptoms li {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 12px 14px; border-radius: 12px;
	background-color: var(--svc-surface);
	font-size: 1.0625rem; line-height: 1.4;
}
.nf-symptoms li .nf-icon { width: 22px; height: 22px; margin-top: 0; }
.nf-symptoms li span::first-letter { text-transform: uppercase; }
/* fix2 D11: the extra cell that closes an odd list (symptoms-script): dashed outline, no fill, from 768px only */
.nf-symptoms .nf-symptoms__more { display: none; background: none; box-shadow: inset 0 0 0 1.5px var(--svc-line); color: var(--svc-muted); }
.nf-symptoms .nf-symptoms__more a { color: var(--svc-link); font-weight: 600; text-decoration: underline; text-decoration-color: var(--svc-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nf-symptoms .nf-symptoms__more span::first-letter { text-transform: none; }
@media (min-width: 48rem) { .nf-symptoms .nf-symptoms__more { display: flex; } }
.nf-service-symptoms__cta { margin: 24px 0 0; font-size: 1.0625rem; line-height: 1.5; text-wrap: pretty; }
.nf-service-symptoms__media { border-radius: 16px; overflow: hidden; max-width: 560px; }
.nf-service-symptoms__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* fix1 rule 5: filled column by column with ceil(n/cols) rows (set by service/symptoms-script), rows line up across columns;
   the column count divides the list where it can (data-cols) */
@media (min-width: 48rem) {
	.nf-symptoms { grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--r2, 8), auto); }
}
@media (min-width: 64rem) {
	/* with a photo: heading and the line under the list span both columns, the photo stretches to the list height (no gap under it) */
	.nf-service-symptoms__grid:has(.nf-service-symptoms__media) { grid-template-columns: minmax(0, 1fr) 32%; column-gap: 48px; align-items: stretch; }
	.nf-service-symptoms__grid:has(.nf-service-symptoms__media) .nf-service-symptoms__main { display: contents; }
	.nf-service-symptoms__grid:has(.nf-service-symptoms__media) { row-gap: var(--svc-head-gap); }
	.nf-service-symptoms__grid:has(.nf-service-symptoms__media) .nf-service-h2 { grid-column: 1 / -1; margin: 0; }
	.nf-service-symptoms__grid:has(.nf-service-symptoms__media) .nf-symptoms { grid-column: 1; grid-row: 2; }
	.nf-service-symptoms__grid:has(.nf-service-symptoms__media) .nf-service-symptoms__cta { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }
	.nf-service-symptoms__media { grid-column: 2; grid-row: 2; position: relative; max-width: none; min-height: 240px; }
	.nf-service-symptoms__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
	.nf-service-symptoms__grid:not(:has(.nf-service-symptoms__media)) .nf-symptoms { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(var(--r3, 6), auto); }
	.nf-service-symptoms__grid:not(:has(.nf-service-symptoms__media)) .nf-symptoms[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(var(--r4, 4), auto); }
	.nf-service-symptoms__grid:not(:has(.nf-service-symptoms__media)) .nf-symptoms[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--r2, 8), auto); }
}
@media (min-width: 80rem) { .nf-service-symptoms__grid:has(.nf-service-symptoms__media) { grid-template-columns: minmax(0, 1fr) 384px; gap: 64px; } }

/* ---------- 3. how a visit works ---------- */
.nf-service-visit__grid { display: grid; gap: 32px; }
.nf-service-steps { display: grid; gap: 28px; counter-reset: nf-step; }
.nf-service-steps li { position: relative; padding-left: 60px; counter-increment: nf-step; }
.nf-service-steps li::before {
	content: counter(nf-step);
	position: absolute; left: 0; top: -4px;
	display: grid; place-items: center;
	width: 44px; height: 44px; border-radius: 50%;
	background-color: var(--svc-orange); color: var(--svc-on-orange);
	font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.nf-service-steps h3 { margin: 0 0 6px; font-size: 1.1875rem; font-weight: 700; line-height: 1.3; color: var(--svc-text); }
.nf-service-steps p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--svc-muted); text-wrap: pretty; }
.nf-service-visit__body { display: grid; gap: 0; align-content: start; min-width: 0; }
.nf-service-visit__media { border-radius: 16px; overflow: hidden; background-color: var(--svc-sunken); }
.nf-service-visit__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.nf-service-tip {
	display: flex; gap: 14px; align-items: flex-start; margin-top: 32px;
	padding: 18px 20px; border-radius: 16px; background-color: var(--svc-sunken);
}
.nf-service-tip p { margin: 0; font-size: 1.0625rem; line-height: 1.5; text-wrap: pretty; }
.nf-service-tip .nf-service-tip__small { margin-top: 8px; font-size: .9375rem; color: var(--svc-muted); }
@media (min-width: 48rem) { .nf-service-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; } }
/* >=1024: the photo column stretches to the height of steps + tip, no gap under either column */
@media (min-width: 64rem) {
	.nf-service-visit__grid { grid-template-columns: minmax(0, 1fr) 32%; gap: 48px; align-items: stretch; }
	.nf-service-visit__media { position: relative; min-height: 320px; }
	.nf-service-visit__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}
@media (min-width: 80rem) { .nf-service-visit__grid { grid-template-columns: minmax(0, 1fr) 384px; gap: 64px; } }

/* ---------- 4. page text (Ghost content, unchanged) + sticky booking card ---------- */
.nf-service-content { border-top: 1px solid var(--svc-line); }
.nf-service-visit { padding-bottom: calc(var(--svc-gap) * .75); }
.nf-service-visit + .nf-service-content { padding-top: calc(var(--svc-gap) * .75); }
.nf-service-content__grid { display: grid; }
.nf-service-content__text { min-width: 0; max-width: 720px; }
.nf-service-aside { display: none; }
@media (min-width: 80rem) {
	.nf-service-content__grid { grid-template-columns: minmax(0, 720px) 320px; justify-content: space-between; align-items: start; }
	.nf-service-aside { display: block; position: sticky; top: calc(var(--nf-hdr, 67px) + 24px); }
}
.nf-service-aside__card {
	display: grid; gap: 12px;
	padding: 24px; border-radius: 16px;
	background-color: var(--svc-surface); border: 1px solid var(--svc-line); box-shadow: var(--svc-shadow);
}
.nf-service-aside__title { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.25; color: var(--svc-text); }
.nf-service-aside__text { margin: 0 0 4px; font-size: 1rem; line-height: 1.5; color: var(--svc-muted); }
.nf-service-aside .nf-btn { width: 100%; }
.nf-service-aside__small { margin: 4px 0 0; font-size: .9375rem; line-height: 1.45; color: var(--svc-muted); }

/* content formatting on service pages only (spec 5.4): callouts read as subheadings, the "Types of" quote as a list panel */
.nf-service .nf-prose .kg-callout-card,
.nf-service .nf-prose .kg-callout-card.kg-callout-card-accent {
	display: block; margin: 2em 0 .6em; padding: 0; border: 0; border-radius: 0;
	background: none; box-shadow: none; color: var(--svc-text);
}
.nf-service .nf-prose .kg-callout-card .kg-callout-emoji { display: none; }
.nf-service .nf-prose .kg-callout-card .kg-callout-text { padding: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.3; color: var(--svc-text); }
.nf-service .nf-prose .kg-callout-card .kg-callout-text * { font-weight: 700; }
.nf-service .nf-prose blockquote {
	margin: 1em 0 1.6em; padding: 20px 24px; border: 0; border-radius: 16px;
	background: var(--svc-sunken) none;   /* fix1 A1: post.css draws a quote icon here; on service pages it sat on the text */
	color: var(--svc-text); font-style: normal; font-size: inherit; line-height: 1.6;
}
.nf-service .nf-prose blockquote::before { display: none; content: none; }
/* fix1: the "Types of ... we repair" quote rebuilt as a list by service/symptoms-script */
.nf-service .nf-prose .nf-types {
	display: grid; gap: 0; margin: .4em 0 1.6em; padding: 6px 24px; list-style: none;
	border-radius: 16px; background-color: var(--svc-sunken);
}
.nf-service .nf-prose .nf-types li {
	position: relative; margin: 0; padding: 14px 0 14px 22px;
	border-top: 1px solid var(--svc-line); line-height: 1.55; text-wrap: pretty;
}
.nf-service .nf-prose .nf-types li:first-child { border-top: 0; }
.nf-service .nf-prose .nf-types li::before {
	content: ""; position: absolute; left: 2px; top: calc(14px + .78em - 4px);
	width: 8px; height: 8px; border-radius: 50%; background-color: var(--svc-orange);
}
.nf-service .nf-prose .nf-types li::first-letter { text-transform: uppercase; }
.nf-service .nf-prose > hr { margin: 2em 0 1em; border: 0; border-top: 1px solid var(--svc-line); }
/* fallback without JS: the original paragraph, quiet */
.nf-service .nf-prose > hr + p:last-child { font-size: .9375rem; line-height: 1.6; color: var(--svc-muted); }
.nf-service .nf-prose > hr + p:last-child em { font-style: normal; }
/* fix1 A3: "ALSO SERVING" as a city list in columns; the divider and the list share one width (the text column) */
.nf-service .nf-prose .nf-towns { max-width: 68ch; margin: 2.4em 0 0; padding-top: 24px; border-top: 1px solid var(--svc-line); scroll-margin-top: calc(var(--nf-hdr, 67px) + 24px); }
.nf-service .nf-prose .nf-towns__title {
	display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
	font-size: .9375rem; font-weight: 700; line-height: 1.3; letter-spacing: .06em; color: var(--svc-text);
}
.nf-service .nf-prose .nf-towns__title .nf-icon { width: 20px; height: 20px; }
.nf-service .nf-prose .nf-towns__list { columns: 2; column-gap: 24px; margin: 0; padding: 0; list-style: none; font-size: 1rem; line-height: 1.35; }
.nf-service .nf-prose .nf-towns__list li { margin: 0; padding: 6px 0; break-inside: avoid; white-space: nowrap; color: var(--svc-muted); }
.nf-service .nf-prose .nf-towns__list li::marker { content: none; }
@media (min-width: 37.5rem) { .nf-service .nf-prose .nf-towns__list { columns: 3; } }
@media (min-width: 48rem) { .nf-service .nf-prose .nf-towns__list { columns: 4; } }

/* ---------- 5. why NashFix ---------- */
/* fix1 A4: H2 on top; photo + 2x3 list; at >=1024 the photo stretches to the list height, the list rows share heights */
.nf-service-why__grid { display: grid; gap: 16px; }
.nf-service-why__media { position: relative; border-radius: 16px; overflow: hidden; background-color: var(--svc-surface); }
.nf-service-why__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.nf-service-why__list { display: grid; gap: 12px; }
.nf-service-why__list li { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 16px; background-color: var(--svc-surface); }
.nf-service-why__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 12px; background-color: var(--svc-sunken); }
.nf-service-why__icon .nf-icon { width: 26px; height: 26px; }
.nf-service-why__list h3 { margin: 2px 0 6px; font-size: 1.1875rem; font-weight: 700; line-height: 1.3; color: var(--svc-text); text-wrap: balance; }
.nf-service-why__list p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--svc-muted); text-wrap: pretty; }
.nf-service-why__list strong { color: var(--svc-text); }
.nf-service-why__list a { color: var(--svc-link); font-weight: 600; text-decoration: underline; text-decoration-color: var(--svc-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .nf-service-why__list a:hover { text-decoration-thickness: 3px; } }
@media (min-width: 48rem) {
	.nf-service-why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.nf-service-why__media img { max-height: 340px; }
}
@media (min-width: 64rem) {
	.nf-service-why__grid { grid-template-columns: 30% minmax(0, 1fr); align-items: stretch; }
	.nf-service-why__media img { position: absolute; inset: 0; height: 100%; max-height: none; aspect-ratio: auto; }
}
@media (min-width: 80rem) { .nf-service-why__grid { grid-template-columns: 384px minmax(0, 1fr); } }

/* ---------- 6. brands ---------- */
/* fix1 A5: one-tone logo marks (alpha masks painted with the text color), the column count follows the number of brands
   (:has on the count): 9 -> 3x3, 10 -> 5x2 (2x5 on phones), 11 -> 4+4+3 / 3+3+3+2 centered, 12 -> 4x3 (6x2 on tablets) */
.nf-service-brands__layout { display: grid; gap: 24px; }
.nf-service-brands__intro .nf-service-h2 { margin-bottom: 12px; }
.nf-service-brands__intro p { margin: 0; max-width: 46ch; font-size: 1.0625rem; line-height: 1.55; color: var(--svc-muted); text-wrap: pretty; }
.nf-service-brands__intro a { color: var(--svc-link); font-weight: 600; text-decoration: underline; text-decoration-color: var(--svc-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nf-service-brands__grid { --cols: 3; --gap: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.nf-service-brands__grid:has(> li:nth-child(10):last-child) { --cols: 2; }
.nf-brand {
	flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); box-sizing: border-box; min-width: 0;   /* fix2: wide marks no longer push the row to 2 columns at 320 */
	display: grid; place-items: center; height: 76px; padding: 0 14px;
	border: 1px solid var(--svc-line); border-radius: 14px; background-color: var(--svc-surface);
}
.nf-brand__mark {
	display: grid; place-items: center; width: var(--w, 120px); max-width: 100%; aspect-ratio: var(--ar, 3);
	color: var(--svc-text);
}
/* the mask is set when the grid nears the viewport (service/brands script): until then the name, never an empty box */
.nf-brand__name { font-size: 1rem; font-weight: 700; line-height: 1.1; white-space: nowrap; color: var(--svc-text); }
.nf-brand__mark[style*="--logo"] { background-color: var(--svc-text); opacity: .82; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.nf-brand__mark[style*="--logo"] .nf-brand__name { visibility: hidden; }
/* optical sizing: every mark gets about the same visual weight (width grows with the square root of its aspect ratio) */
.nf-brand--amana { --ar: 3.88; --w: 118px; } .nf-brand--bosch { --ar: 3.95; --w: 118px; } .nf-brand--electrolux { --ar: 4.28; --w: 124px; }
.nf-brand--frigidaire { --ar: 8.39; --w: 150px; } .nf-brand--ge { --ar: 1.74; --w: 96px; } .nf-brand--hotpoint { --ar: 5.28; --w: 134px; }
.nf-brand--jenn-air { --ar: 4.92; --w: 130px; } .nf-brand--kenmore { --ar: 1.55; --w: 86px; } .nf-brand--kitchenaid { --ar: 9.04; --w: 150px; }
.nf-brand--lg { --ar: 2.25; --w: 92px; } .nf-brand--maytag { --ar: 5.81; --w: 140px; } .nf-brand--samsung { --ar: 2.99; --w: 106px; }
.nf-brand--whirlpool { --ar: 2.97; --w: 104px; } .nf-brand--roper { --ar: 1.59; --w: 86px; } .nf-brand--tappan { --ar: 6.75; --w: 140px; }
@media (min-width: 48rem) {
	.nf-service-brands__grid { --gap: 12px; }
	.nf-service-brands__grid:has(> li:nth-child(10):last-child) { --cols: 5; }
	.nf-service-brands__grid:has(> li:nth-child(11):last-child) { --cols: 4; }
	.nf-service-brands__grid:has(> li:nth-child(12):last-child) { --cols: 6; }
	.nf-brand { height: 88px; }
}
@media (min-width: 64rem) {
	.nf-service-brands__layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: center; }
	.nf-service-brands__grid:has(> li:nth-child(12):last-child) { --cols: 4; }
}

/* ---------- 7. reviews (home partials, review-sections.css) ---------- */
.nf-service-reviews .nf-rev-container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; width: auto; max-width: none; margin: 0; padding: 0; }
.nf-service-reviews .nf-rev-section-card { margin: 0; min-width: 0; max-width: 100%; box-sizing: border-box; }
.nf-service-toppro {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
	margin: 24px 0 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.3;
}
.nf-service-toppro__years { display: flex; flex-wrap: wrap; gap: 6px; }
.nf-service-toppro__years span {
	padding: 4px 10px; border-radius: 999px;
	background-color: var(--svc-surface); border: 1px solid var(--svc-line);
	font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ---------- 8. other appliances: shared .nf-tiles (app.css) ---------- */

/* ---------- 9. final call (panel 5.3) ---------- */
.nf-service-final__panel {
	display: grid; gap: 24px;
	padding: 28px 20px; border-radius: 16px; background-color: var(--svc-sunken);
}
.nf-service-final__text .nf-service-h2 { margin-bottom: 12px; }
.nf-service-final__text p { margin: 0; max-width: 56ch; font-size: 1.125rem; line-height: 1.5; text-wrap: pretty; }
.nf-service-final__actions { display: grid; gap: 10px; }
.nf-service-final__actions .nf-btn { width: 100%; }
@media (min-width: 37.5rem) {
	.nf-service-final__panel { padding: 40px; }
	.nf-service-final__actions { display: flex; flex-wrap: wrap; }
	.nf-service-final__actions .nf-btn { width: auto; }
}
@media (min-width: 64rem) {
	.nf-service-final__panel { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; }
	.nf-service-final__actions { flex-direction: column; align-items: stretch; }
}


/* 1024-1279: the hero is two columns, a one-step smaller H1 keeps long titles ("Garbage disposal repair in Nashville, TN") to 3 lines */
@media (min-width: 64rem) and (max-width: 79.99rem) {
	.nf-service-hero__title { font-size: 2.75rem; }
}

/* page text: the 720px column holds ~90 characters at the content font size; 68ch keeps lines near 75 */
.nf-service .nf-prose > p, .nf-service .nf-prose > ul, .nf-service .nf-prose > ol { max-width: 68ch; }


/* fix1 perf: the page is long; the sections below the page text are skipped by the browser until they near the viewport,
   so the first paint (hero photo = LCP) does not wait for their layout. "auto" keeps each measured size afterwards.
   (Screenshot tools that capture the full page must force content-visibility: visible.) */
.nf-service-why, .nf-service-brands, .nf-service-reviews, .nf-service-related, .nf-service-final { content-visibility: auto; }
.nf-service-why { contain-intrinsic-size: auto 1500px; }
.nf-service-brands { contain-intrinsic-size: auto 560px; }
.nf-service-reviews { contain-intrinsic-size: auto 1100px; }
.nf-service-related { contain-intrinsic-size: auto 1000px; }
.nf-service-final { contain-intrinsic-size: auto 520px; }
@media (min-width: 64rem) {
	.nf-service-why { contain-intrinsic-size: auto 760px; }
	.nf-service-brands { contain-intrinsic-size: auto 420px; }
	.nf-service-reviews { contain-intrinsic-size: auto 900px; }
	.nf-service-related { contain-intrinsic-size: auto 560px; }
	.nf-service-final { contain-intrinsic-size: auto 340px; }
}

/* fix4 #5: no dark text on a saturated orange disc (Vitya 17.10): the step number is a soft orange ring with the text color */
.nf-service-steps li::before { background-color: var(--nf-orange-wash); color: var(--svc-text); box-shadow: inset 0 0 0 1.5px var(--svc-orange); }

/* 17.10 Vitek: no peach fills - step numbers on a neutral surface with an orange ring */
.nf-service-steps li::before { background-color: var(--svc-surface, var(--nf-surface)); }

/* fix6 #10: the phone icon on the primary button is orange, as on every other A button (and the same card on posts) */
.nf-service-aside .nf-btn--primary svg { color: var(--nf-btn-icon, currentColor); }
/* fix6 #10: under 600px the line always breaks in two; the "·" then hung at the end of the first line. Two plain lines, no dot. */
@media (max-width: 37.49rem) {
	.nf-service-hero__where .nf-sep { display: none; }
	.nf-service-hero__where > span > .nf-nw { display: block; }
}
/* fix7 mobile pass: on phones the wide marks (KitchenAid 150px, Maytag 140px) ran out of their ~110px cells and over the
   neighbours: the cell's auto grid track grew with the mark, so max-width:100% never applied. One shrinkable track. */
.nf-brand { grid-template-columns: minmax(0, 1fr); }