@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("./fonts/atkinson-regular-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("./fonts/atkinson-bold-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fjalla One";
  src: url("./fonts/fjalla-one-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("./fonts/ibm-plex-mono-medium-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--color-bg); color: var(--color-text); font-family: var(--fd-body); font-size: 1.0625rem; line-height: 1.55; }
body, button, input, select, textarea { font-family: var(--fd-body); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--fd-display); font-weight: 400; line-height: .98; letter-spacing: -.02em; }
p { max-width: var(--reading-width); }
.container { width: min(calc(100% - (2 * var(--page-gutter))), var(--page-max)); margin-inline: auto; }
.skip-link { position: fixed; top: -6rem; left: 1rem; z-index: 100; padding: .75rem 1rem; background: white; }
.skip-link:focus { top: 1rem; }
.utility { font-family: var(--fd-utility); font-size: .74rem; letter-spacing: .01em; text-transform: uppercase; }
.button { min-height: var(--button-height); display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .8rem 1.25rem; border: 2px solid transparent; border-radius: var(--button-radius); background: var(--button-bg); color: var(--button-fg); font-weight: 700; line-height: 1.1; text-decoration: none; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; }
.button:hover { background: var(--color-accent-active); }
.button:active { background: var(--fd-carbon); color: white; }
.button--outline { border-color: currentColor; background: transparent; }
.button--outline:hover { border-color: white; background: white; color: var(--fd-carbon); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
.cluster { display: flex; flex-wrap: wrap; gap: .75rem; }

.site-header { position: relative; z-index: 10; min-height: var(--header-height); background: var(--fd-white); }
.header-inner { min-height: var(--header-height); display: flex; align-items: center; gap: 1.5rem; }
.brand { min-width: 17rem; display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand img { width: 3.4rem; height: 3.4rem; object-fit: contain; }
.brand-name { display: block; font-family: var(--fd-display); font-size: 1.65rem; letter-spacing: .08em; }
.brand-sub { display: block; font-family: var(--fd-utility); font-size: .56rem; letter-spacing: .15em; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); margin: 0; padding: 0; list-style: none; }
.site-nav a { font-size: .92rem; font-weight: 700; text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--color-brand); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; text-underline-offset: .45rem; }
.header-call { white-space: nowrap; }
.header-phone-icon { display: none; width: 1.45rem; height: 1.45rem; fill: currentColor; }
.menu-button { display: none; min-width: 3rem; min-height: 3rem; border: 2px solid var(--fd-carbon); border-radius: .35rem; background: transparent; color: var(--fd-carbon); }
.menu-icon { width: 1.25rem; display: grid; gap: .23rem; }
.menu-icon > span { width: 100%; height: 2px; background: currentColor; border-radius: 1px; transform-origin: center; transition: transform 220ms cubic-bezier(.16, 1, .3, 1), opacity 120ms ease; }
.menu-button[aria-expanded="true"] .menu-icon > span:first-child { transform: translateY(.29rem) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-icon > span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] .menu-icon > span:last-child { transform: translateY(-.29rem) rotate(-45deg); }

.status-line { background: var(--fd-navy-950); color: white; }
.status-inner { min-height: 2.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.status-inner span { white-space: nowrap; }
.status-inner span::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .65rem; background: var(--color-accent); border-radius: 50%; }

.hero { background: var(--color-brand-soft); }
.hero-grid { min-height: 43rem; display: grid; grid-template-columns: 5fr 7fr; }
.hero-question { display: flex; flex-direction: column; justify-content: center; padding: clamp(4rem, 7vw, 7rem) clamp(2rem, 5vw, 5rem) clamp(4rem, 7vw, 7rem) 0; }
.hero-question h1 { max-width: 7ch; margin: 0 0 1.8rem; color: var(--color-brand); font-size: clamp(5rem, 8vw, 8rem); }
.hero-question .intro { margin-bottom: 2rem; font-size: 1.15rem; }
.hero-question .utility { margin-bottom: 1.25rem; color: var(--color-brand); }
.callboard { min-height: 43rem; display: grid; grid-template-rows: 1.15fr .9fr .9fr 1.05fr; background: var(--color-brand); color: white; }
.callboard-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; padding: 1.5rem clamp(1.75rem, 4vw, 4.25rem); border-bottom: 2px solid var(--color-border-inverse); text-decoration: none; transition: background 180ms ease, color 180ms ease; }
.callboard-row:last-child { border-bottom: 0; }
.callboard-row > span { transition: transform 180ms cubic-bezier(.16, 1, .3, 1); }
.callboard-row:hover, .callboard-row:focus-visible { background: var(--color-accent); color: var(--fd-carbon); }
.callboard-row:hover > span, .callboard-row:focus-visible > span { transform: translateX(.7rem); }
.callboard-row strong { display: block; font-family: var(--fd-display); font-size: clamp(2.15rem, 4vw, 4.1rem); font-weight: 400; line-height: 1; }
.callboard-row small { display: block; max-width: 34rem; margin-top: .5rem; color: var(--fd-frost-200); font-size: .9rem; }
.callboard-row:hover small, .callboard-row:focus-visible small { color: var(--fd-carbon); }
.route-action { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border: 2px solid currentColor; border-radius: 50%; font-size: 1.5rem; }

.section { padding-block: var(--section-space); }
.section--grey { background: #edf0ed; }
.section-kicker { margin-bottom: 1.5rem; color: var(--color-brand); }
.section-heading { display: grid; grid-template-columns: 5fr 6fr 1fr; gap: 2rem; margin-bottom: clamp(3rem, 6vw, 6rem); }
.section-heading h2 { max-width: 10ch; margin: 0; color: var(--color-brand); font-size: clamp(3.5rem, 6vw, 6.3rem); }
.section-heading p { margin-top: .6rem; color: var(--color-muted); font-size: 1.15rem; }

.system-row { display: grid; grid-template-columns: 4fr 5fr 3fr; min-height: 20rem; border-top: 3px solid var(--color-brand); }
.system-name { display: flex; align-items: flex-end; padding: 2.25rem 2rem 2.25rem 0; }
.system-name h3 { margin: 0; color: var(--color-brand); font-size: clamp(4rem, 7vw, 7.5rem); }
.system-copy { padding: 3rem clamp(2rem, 4vw, 4rem); background: var(--fd-frost-200); }
.system-copy p { font-size: 1.1rem; }
.plain-list { margin: 2rem 0 0; padding: 0; list-style: none; }
.plain-list li { padding: .55rem 0; font-weight: 700; }
.system-action { display: flex; flex-direction: column; justify-content: space-between; padding: 3rem 0 3rem clamp(1.5rem, 3vw, 3rem); }
.system-action a:not(.button) { color: var(--color-brand); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: .35rem; }
.system-action .utility { color: var(--color-muted); }

.audience { display: grid; grid-template-columns: 1fr 1fr; }
.audience-block { min-height: 30rem; padding: clamp(3rem, 7vw, 7rem); display: flex; flex-direction: column; justify-content: space-between; }
.audience-home { background: var(--color-brand); color: white; }
.audience-business { background: var(--color-accent); }
.audience-block h2 { max-width: 8ch; margin: 0; font-size: clamp(4rem, 7vw, 7rem); }
.audience-block p { max-width: 34rem; font-size: 1.05rem; }
.audience-home .utility { color: var(--fd-frost-300); }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.fact { min-height: 12rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem; background: var(--fd-frost-200); }
.fact strong { color: var(--color-brand); font-family: var(--fd-display); font-size: 2.7rem; font-weight: 400; line-height: 1; }
.fact span { color: var(--color-muted); }
.process { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 4rem; }
.process-step { min-height: 10rem; padding: 1.2rem; border-top: 3px solid var(--color-brand); border-right: 1px solid var(--color-border); }
.process-step:last-child { border-right: 0; }
.process-step .utility { color: var(--color-accent-text); }
.process-step strong { display: block; margin-top: 2.5rem; }

.closing { padding-block: clamp(4rem, 8vw, 7.5rem); background: var(--color-brand); color: white; }
.closing-inner { display: grid; grid-template-columns: 2fr 1fr; align-items: end; gap: 3rem; }
.closing h2 { max-width: 11ch; margin: 0; font-size: clamp(4rem, 7vw, 7rem); }
.closing .cluster { justify-content: flex-end; }
.closing-inner > div > p { margin-bottom: 1.1rem; color: var(--fd-frost-300); font-weight: 700; }
.closing .button { border-color: transparent; background-color: var(--color-accent); color: var(--fd-carbon); }
.closing .button:hover, .closing .button:focus-visible { background-color: var(--color-accent-active); color: var(--fd-carbon); }
.closing .button--outline { border-color: var(--fd-white); background-color: transparent; color: var(--fd-white); }
.closing .button--outline:hover, .closing .button--outline:focus-visible { border-color: var(--fd-white); background-color: var(--fd-white); color: var(--fd-carbon); }

.site-footer { background: var(--fd-carbon); color: var(--fd-frost-300); }
.site-footer-inner { min-height: 5.25rem; display: flex; align-items: center; justify-content: center; padding-block: var(--fd-space-4); text-align: center; }
.site-footer p { max-width: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .6rem; margin: 0; font-size: .84rem; }
.site-footer a { color: var(--fd-white); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: .25rem; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--color-accent); }

.page-hero { background: var(--fd-frost-300); }
.page-hero-grid { min-height: 36rem; display: grid; grid-template-columns: 7fr 5fr; }
.page-title { display: flex; flex-direction: column; justify-content: center; padding: 4rem 3rem 4rem 0; }
.breadcrumb { margin-bottom: 4rem; }
.page-title h1 { max-width: 9ch; margin: 0 0 1.5rem; color: var(--color-brand); font-size: clamp(5rem, 9vw, 9rem); }
.page-title .lead { max-width: 42rem; font-size: 1.15rem; }
.problem-panel { padding: clamp(3rem, 5vw, 5rem); background: var(--color-brand); color: white; }
.problem-panel h2 { margin: 0 0 2rem; font-size: clamp(2.8rem, 4vw, 4rem); }
.problem-list { margin: 0; padding: 0; list-style: none; }
.problem-list li { padding: 1.15rem 0; border-bottom: 2px solid var(--color-border-inverse); font-weight: 700; }
.problem-panel .button { margin-top: 2rem; }
.service-content-row { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(2rem, 6vw, 6rem); padding: 3.5rem 0; border-top: 3px solid var(--color-brand); }
.service-content-row h2 { margin: 0; color: var(--color-brand); font-size: clamp(3rem, 5vw, 5.2rem); }
.service-content-row ul { columns: 2; column-gap: 3rem; margin: 0; padding-left: 1.25rem; }
.service-content-row li { break-inside: avoid; margin-bottom: .8rem; }

.contact-hero { background: var(--fd-frost-300); }
.contact-grid { min-height: 38rem; display: grid; grid-template-columns: 6fr 6fr; }
.contact-message { display: flex; flex-direction: column; justify-content: center; padding: 4rem 4rem 4rem 0; }
.contact-message h1 { max-width: 8ch; margin: 0 0 1.5rem; color: var(--color-brand); font-size: clamp(5rem, 8vw, 8rem); }
.phone-board { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(3rem, 6vw, 6rem); background: var(--color-accent); }
.phone-board .phone { display: block; margin: 2rem 0; font-family: var(--fd-display); font-size: clamp(3rem, 5vw, 5.5rem); line-height: 1; text-decoration: none; }
.phone-board dl { margin: 0; }
.phone-board dl div { padding: 1rem 0; border-top: 2px solid rgba(23,32,31,.25); }
.phone-board dt { font-family: var(--fd-utility); font-size: .7rem; text-transform: uppercase; }
.phone-board dd { margin: .2rem 0 0; font-weight: 700; }
.form-layout { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(2rem, 6vw, 6rem); }
.form-intro h2 { color: var(--color-brand); font-size: clamp(3.5rem, 6vw, 6rem); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field-full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: .45rem; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; min-height: var(--field-height); padding: .75rem .85rem; border: 2px solid var(--field-border); border-radius: .25rem; background: white; color: var(--color-text); }
.field textarea { min-height: 9rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-brand); }
.form-note { margin-top: 1rem; color: var(--color-muted); font-family: var(--fd-utility); font-size: .72rem; }

/* Contractor-first homepage */
.contractor-hero { background: var(--color-brand); color: white; }
.contractor-hero-grid { min-height: 40rem; display: grid; grid-template-columns: 7fr 5fr; }
.contractor-hero-grid > *, .contractor-service, .proof-grid > *, .contractor-home .section-heading > *, .contractor-home .system-row > *, .emergency-help-grid > *, .coverage-grid > *, .contractor-home .closing-inner > * { min-width: 0; }
.contractor-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(4rem, 7vw, 7rem) clamp(2.5rem, 6vw, 6rem) clamp(4rem, 7vw, 7rem) 0; }
.location-line { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.5rem; color: var(--fd-frost-300); font-weight: 700; }
.location-line::before { content: ""; width: 2.25rem; height: .25rem; flex: 0 0 auto; background: var(--color-accent); }
.contractor-hero h1 { max-width: 11ch; margin: 0 0 1.5rem; font-size: clamp(4.25rem, 6.6vw, 6rem); text-wrap: balance; }
.contractor-lead { max-width: 43rem; margin-bottom: 2rem; color: var(--fd-frost-200); font-size: 1.2rem; }
.contractor-hero .button--outline { border-color: white; color: white; }
.contractor-hero .button--outline:hover { color: var(--fd-carbon); }
.hero-note { margin: 1.2rem 0 0; color: var(--fd-frost-300); font-size: .95rem; }
.contractor-services { align-self: stretch; display: grid; grid-template-rows: 1fr 1fr; background: var(--color-surface); color: var(--color-text); }
.contractor-service { display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 1.2rem 2rem; padding: clamp(2rem, 4vw, 4rem); border-bottom: 2px solid var(--color-border); text-decoration: none; transition: background 180ms ease; }
.contractor-service:hover, .contractor-service:focus-visible { background: var(--fd-frost-200); }
.contractor-service:hover .service-arrow, .contractor-service:focus-visible .service-arrow { transform: translateX(.4rem); }
.service-type { color: var(--color-brand); font-family: var(--fd-display); font-size: clamp(2.6rem, 4vw, 4rem); line-height: 1; }
.contractor-service strong { max-width: 30rem; font-size: 1.05rem; line-height: 1.35; }
.service-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--color-accent-text); font-size: 2rem; transition: transform 180ms cubic-bezier(.16, 1, .3, 1); }
.proof-strip { background: var(--color-accent); color: var(--fd-carbon); }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof-grid > div { min-height: 8rem; display: flex; flex-direction: column; justify-content: center; padding: 1.4rem clamp(1rem, 2.5vw, 2rem); border-right: 1px solid var(--color-border-carbon-soft); }
.proof-grid > div:first-child { padding-left: 0; }
.proof-grid > div:last-child { border-right: 0; }
.proof-grid strong { font-family: var(--fd-display); font-size: 2.35rem; font-weight: 400; line-height: 1; white-space: nowrap; }
.proof-grid [data-count-up], .experience-line [data-count-up] { width: 2ch; display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
.proof-grid > div > span { margin-top: .45rem; font-size: .9rem; }

.contractor-home .section-kicker, .contractor-home .audience-block > div > p, .contractor-home .emergency-intro > p:first-child, .contractor-home .coverage-grid > div > p { margin-bottom: 1.1rem; color: var(--color-brand); font-weight: 700; }
.contractor-home .section-heading h2, .contractor-home .system-name h3, .contractor-home .audience-block h2, .contractor-home .closing h2 { font-size: clamp(3.5rem, 6vw, 6rem); }
.contractor-home .system-name { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--fd-space-3); }
.contractor-home .system-context { margin: 0; color: var(--color-muted); font-weight: 700; }
.contractor-home .system-action { justify-content: space-between; gap: var(--fd-space-6); }
.service-illustration { width: min(100%, 15rem); align-self: center; margin-bottom: var(--fd-space-4); }
.service-illustration svg { width: 100%; height: auto; }
.equipment-field { fill: var(--fd-frost-200); }
.equipment-surface { fill: var(--color-surface); stroke: var(--color-brand); stroke-width: 3; }
.equipment-line { fill: none; stroke: var(--color-brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.equipment-accent { fill: none; stroke: var(--color-accent-active); stroke-width: 4; stroke-linecap: square; stroke-linejoin: miter; }
.equipment-accent-fill { fill: var(--color-accent); }
.contractor-home .audience-home > div > p { color: var(--fd-frost-300); }
.contractor-home .audience-business > div > p { color: var(--fd-carbon); }
.contractor-home .section { padding-block: var(--home-section-space); }
.contractor-home .section-heading { grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr); align-items: end; gap: clamp(var(--fd-space-8), 5vw, var(--fd-space-24)); margin-bottom: var(--home-section-gap); }
.contractor-home .section-heading > p { justify-self: end; margin-bottom: .35rem; }
.contractor-home .system-row { min-height: 18rem; }

.emergency-help { padding-block: var(--home-section-space); background: var(--fd-frost-200); }
.emergency-help-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(3rem, 7vw, 7rem); align-items: start; }
.emergency-intro h2 { max-width: 9ch; margin: 0 0 1.25rem; color: var(--color-brand); font-size: clamp(3.5rem, 5.5vw, 5.5rem); }
.emergency-intro p:not(:first-child) { margin-bottom: 2rem; }
.emergency-issues { margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--color-brand); }
.emergency-issues li { border-bottom: 2px solid var(--color-border-brand-soft); }
.emergency-issues a { display: grid; grid-template-columns: 2fr 3fr auto; align-items: center; gap: 1.5rem; min-height: 6.25rem; padding: 1rem 0; text-decoration: none; }
.emergency-issues a:hover strong, .emergency-issues a:focus-visible strong { color: var(--color-accent-text); }
.emergency-issues strong { color: var(--color-brand); font-family: var(--fd-display); font-size: 2rem; font-weight: 400; transition: color 150ms ease; }
.emergency-issues span { color: var(--color-muted); }
.emergency-issues span:last-child { color: var(--color-brand); font-size: 1.5rem; }

.coverage-section { padding-block: clamp(4rem, 7vw, 7rem); background: var(--color-surface); }
.coverage-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(3rem, 7vw, 7rem); align-items: end; }
.coverage-grid h2 { max-width: 11ch; margin: 0; color: var(--color-brand); font-size: clamp(3.5rem, 5.5vw, 5.5rem); }
.coverage-grid > p { margin-bottom: .4rem; color: var(--color-muted); font-size: 1.1rem; }
.contractor-home .process-step > span { color: var(--color-accent-text); font-weight: 700; }

/* HVAC & Refrigeration page */
.breadcrumb { color: inherit; font-size: .9rem; font-weight: 700; }
.breadcrumb a { text-underline-offset: .25rem; }
.page-kicker { margin-bottom: var(--fd-space-5); color: var(--color-brand); font-weight: 700; }
.hvac-hero { background: var(--color-brand); color: var(--fd-white); }
.hvac-hero-grid { min-height: 42rem; display: grid; grid-template-columns: 7fr 5fr; }
.hvac-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(var(--fd-space-16), 7vw, var(--fd-space-28)) clamp(var(--fd-space-10), 6vw, var(--fd-space-24)) clamp(var(--fd-space-16), 7vw, var(--fd-space-28)) 0; }
.hvac-hero-copy h1 { max-width: 10ch; margin: 0 0 var(--fd-space-6); font-size: clamp(4.25rem, 6vw, 6rem); text-wrap: balance; }
.hvac-hero-copy .lead { max-width: 43rem; margin-bottom: var(--fd-space-8); color: var(--fd-frost-200); font-size: 1.18rem; }
.hvac-hero .breadcrumb, .hvac-hero .page-kicker, .hvac-hero .hero-note { color: var(--fd-frost-300); }
.hvac-hero .button--outline { border-color: var(--fd-white); color: var(--fd-white); }
.hvac-hero .button--outline:hover, .hvac-hero .button--outline:focus-visible { color: var(--fd-carbon); }
.hvac-equipment-scene { min-width: 0; display: grid; place-items: center; padding: clamp(var(--fd-space-8), 5vw, var(--fd-space-20)); background: var(--fd-frost-200); }
.hvac-equipment-scene svg { width: min(100%, 31rem); height: auto; }
.scene-field { fill: var(--color-surface); }
.scene-surface { fill: var(--color-surface); stroke: var(--color-brand); stroke-width: 4; }
.scene-line { fill: none; stroke: var(--color-brand); stroke-width: 4; stroke-linecap: square; stroke-linejoin: miter; }
.scene-accent { fill: none; stroke: var(--color-accent-active); stroke-width: 7; stroke-linecap: square; }
.scene-accent-fill { fill: var(--color-accent); }
.service-index-band { background: var(--color-accent); color: var(--fd-carbon); }
.service-index-band ul { min-height: 4.75rem; display: flex; align-items: center; gap: clamp(var(--fd-space-6), 4vw, var(--fd-space-16)); margin-block: 0; padding-block: 0; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.service-index-band li { flex: 0 0 auto; }
.service-index-band a { font-weight: 700; text-underline-offset: .3rem; }
.hvac-service-field { display: grid; grid-template-columns: 1fr 1fr; }
.hvac-service-panel { min-height: 33rem; display: flex; flex-direction: column; justify-content: space-between; gap: var(--fd-space-16); padding: clamp(var(--fd-space-12), 7vw, var(--fd-space-28)); }
.hvac-service-panel h2 { max-width: 10ch; margin: 0; color: var(--color-brand); font-size: clamp(3.5rem, 5vw, 5rem); }
.hvac-service-panel > div > p:first-child { margin-bottom: var(--fd-space-4); font-weight: 700; }
.hvac-service-panel > div:last-child > p { max-width: 39rem; }
.panel-frost { background: var(--fd-frost-200); }
.panel-white { background: var(--color-surface); }
.panel-navy { background: var(--color-brand); color: var(--fd-white); }
.panel-navy h2, .panel-navy > div > p:first-child { color: var(--fd-white); }
.panel-navy > div:last-child > p { color: var(--fd-frost-200); }
.panel-gold { background: var(--color-accent); color: var(--fd-carbon); }
.panel-gold h2 { color: var(--fd-carbon); }
.text-link { display: inline-block; margin-top: var(--fd-space-5); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: .35rem; }
.refrigerant-band { padding-block: var(--home-section-space); background: var(--fd-frost-300); }
.refrigerant-grid { display: grid; grid-template-columns: 5fr 7fr; align-items: center; gap: clamp(var(--fd-space-10), 7vw, var(--fd-space-28)); }
.refrigerant-gauge { max-width: 24rem; }
.refrigerant-grid h2 { margin: 0 0 var(--fd-space-5); color: var(--color-brand); font-size: clamp(4rem, 6vw, 6rem); }
.refrigerant-grid p:last-child { font-size: 1.12rem; }

/* About page */
.about-hero { padding-block: clamp(var(--fd-space-8), 5vw, var(--fd-space-16)); background: var(--color-surface); }
.about-hero-grid { min-height: 43rem; display: grid; grid-template-columns: 7fr 5fr; }
.about-statement { display: flex; flex-direction: column; justify-content: center; padding: clamp(var(--fd-space-12), 7vw, var(--fd-space-28)); background: var(--color-brand); color: var(--fd-white); }
.about-statement h1 { max-width: 10ch; margin: 0 0 var(--fd-space-6); font-size: clamp(4.25rem, 6vw, 6rem); text-wrap: balance; }
.about-statement .breadcrumb, .about-statement .page-kicker { color: var(--fd-frost-300); }
.about-statement .lead { margin-bottom: var(--fd-space-8); color: var(--fd-frost-200); font-size: 1.16rem; }
.about-statement .button { align-self: flex-start; }
.about-profile { display: flex; flex-direction: column; justify-content: space-between; gap: var(--fd-space-8); padding: clamp(var(--fd-space-10), 6vw, var(--fd-space-24)); background: var(--color-accent); color: var(--fd-carbon); }
.experience-line strong { display: block; font-family: var(--fd-display); font-size: clamp(4.5rem, 7vw, 6rem); font-weight: 400; line-height: 1; white-space: nowrap; }
.experience-line > span { display: block; margin-top: var(--fd-space-3); font-weight: 700; }
.property-scene svg { width: 100%; height: auto; }
.about-profile > p { margin: 0; font-weight: 700; }
.about-story-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(var(--fd-space-10), 8vw, var(--fd-space-32)); }
.about-story-grid h2, .values-layout h2, .customer-field h2, .certification-grid h2 { max-width: 11ch; margin: 0; color: var(--color-brand); font-size: clamp(3.75rem, 6vw, 6rem); }
.story-copy { padding-top: var(--fd-space-10); }
.story-copy p { font-size: 1.14rem; }
.customer-field { padding-block: clamp(var(--fd-space-16), 8vw, var(--fd-space-28)); background: var(--color-brand); color: var(--fd-white); }
.customer-field header { display: grid; grid-template-columns: 4fr 8fr; gap: var(--fd-space-8); align-items: end; margin-bottom: var(--fd-space-16); }
.customer-field header > p { color: var(--fd-frost-300); font-weight: 700; }
.customer-field h2 { color: var(--fd-white); }
.customer-field ul { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; border-top: 3px solid var(--color-accent); list-style: none; }
.customer-field li { min-height: 9rem; display: flex; align-items: flex-end; padding: var(--fd-space-5); border-right: 1px solid var(--color-border-inverse); font-weight: 700; }
.customer-field li:first-child { padding-left: 0; }
.customer-field li:last-child { border-right: 0; }
.values-layout { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(var(--fd-space-10), 8vw, var(--fd-space-32)); }
.values-list { border-top: 3px solid var(--color-brand); }
.values-list article { display: grid; grid-template-columns: 4fr 8fr; gap: var(--fd-space-8); padding: var(--fd-space-8) 0; border-bottom: 1px solid var(--color-border-brand-soft); }
.values-list h3 { margin: 0; color: var(--color-brand); font-size: 2.25rem; }
.values-list p { margin: 0; }
.about-page .process-step > span { color: var(--color-accent-text); font-weight: 700; }
.certification-band { padding-block: clamp(var(--fd-space-16), 7vw, var(--fd-space-24)); background: var(--fd-frost-300); }
.certification-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(var(--fd-space-10), 8vw, var(--fd-space-32)); align-items: end; }
.certification-grid > div > p { color: var(--color-brand); font-weight: 700; }
.certification-grid > p { margin-bottom: .4rem; font-size: 1.12rem; }

@media (max-width: 68rem) {
  .site-nav { display: none; }
  .menu-button { display: inline-grid; place-items: center; }
  .brand { min-width: 0; margin-right: auto; }
  .site-nav[data-open="true"] { position: absolute; top: 100%; left: 0; width: 100%; display: block; background: var(--color-surface); border-top: 2px solid var(--color-brand); transform-origin: top; animation: menu-unfold 320ms cubic-bezier(.16, 1, .3, 1) both; }
  .site-nav[data-open="true"] ul { width: min(calc(100% - (2 * var(--page-gutter))), var(--page-max)); flex-direction: column; align-items: stretch; gap: 0; margin-inline: auto; padding-block: var(--fd-space-4); }
  .site-nav[data-open="true"] a { display: block; padding: .75rem 0; }
  .hero-grid, .page-hero-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero-question, .page-title, .contact-message { padding-right: 0; }
  .emergency-help-grid, .coverage-grid { grid-template-columns: 1fr; }
  .hvac-hero-grid, .about-hero-grid { grid-template-columns: 1fr; }
  .hvac-hero-copy { padding-right: 0; }
  .hvac-equipment-scene { min-height: 31rem; }
  .about-story-grid, .values-layout, .certification-grid { grid-template-columns: 1fr; }
  .customer-field header { grid-template-columns: 1fr; }
  .customer-field ul { grid-template-columns: repeat(3, 1fr); }
}

/* Motion system: one authored "systems online" entrance plus restrained feedback. */
@keyframes menu-unfold {
  from { opacity: 0; clip-path: inset(0 0 100%); }
  to { opacity: 1; clip-path: inset(0); }
}

@keyframes equipment-draw {
  from { stroke-dashoffset: 1100; }
  to { stroke-dashoffset: 0; }
}

@keyframes fan-turn { to { transform: rotate(1turn); } }
@keyframes airflow-pass {
  0% { opacity: 0; stroke-dashoffset: 42; }
  22%, 72% { opacity: .75; }
  100% { opacity: 0; stroke-dashoffset: -42; }
}
@keyframes power-cycle {
  0%, 18%, 100% { opacity: .38; }
  24%, 84% { opacity: 1; }
}
@keyframes gauge-check {
  0%, 100% { transform: rotate(-7deg); }
  45% { transform: rotate(8deg); }
  68% { transform: rotate(4deg); }
}
@keyframes link-flow { to { stroke-dashoffset: -30; } }
@keyframes current-flow { to { stroke-dashoffset: -40; } }
@keyframes current-node-charge {
  0%, 22%, 100% { opacity: .42; transform: scale(.82); }
  42%, 72% { opacity: 1; transform: scale(1); }
}
@keyframes hvac-diagnostic-scan {
  0%, 12% { opacity: 0; transform: translateY(-7rem); }
  28%, 65% { opacity: .45; }
  88%, 100% { opacity: 0; transform: translateY(7rem); }
}
@keyframes contact-signal-send {
  0% { opacity: .7; transform: scale(.2); }
  76%, 100% { opacity: 0; transform: scale(1); }
}

.motion-ready .contractor-hero-copy h1,
.motion-ready .hvac-hero-copy h1,
.motion-ready .about-statement h1,
.motion-ready .page-title h1,
.motion-ready .contact-message h1 {
  clip-path: inset(0 0 100% 0);
  transform: translateY(1.25rem);
  opacity: .72;
  transition: clip-path 720ms cubic-bezier(.16, 1, .3, 1) 80ms, transform 720ms cubic-bezier(.16, 1, .3, 1) 80ms, opacity 420ms ease 80ms;
}

.motion-ready .contractor-hero-copy > :not(h1),
.motion-ready .hvac-hero-copy > :not(h1),
.motion-ready .about-statement > :not(h1),
.motion-ready .page-title > :not(h1),
.motion-ready .contact-message > :not(h1) {
  opacity: 0;
  transform: translateY(.75rem);
  transition: opacity 500ms ease 280ms, transform 600ms cubic-bezier(.16, 1, .3, 1) 280ms;
}

.motion-ready .contractor-service,
.motion-ready .problem-panel,
.motion-ready .phone-board,
.motion-ready .hvac-equipment-scene,
.motion-ready .about-profile {
  opacity: 0;
  transform: translateX(1.25rem);
  transition: opacity 540ms ease 240ms, transform 680ms cubic-bezier(.16, 1, .3, 1) 240ms;
}

.motion-ready .contractor-service:nth-child(2) { transition-delay: 330ms; }

.motion-ready body.is-entered .contractor-hero-copy h1,
.motion-ready body.is-entered .hvac-hero-copy h1,
.motion-ready body.is-entered .about-statement h1,
.motion-ready body.is-entered .page-title h1,
.motion-ready body.is-entered .contact-message h1 {
  clip-path: inset(0);
  transform: translateY(0);
  opacity: 1;
}

/* Each page has its own entrance logic rather than one repeated reveal. */
.motion-ready body.electrical-page .page-title h1 {
  clip-path: inset(0 100% 0 0);
  transform: translateX(-1.15rem);
}
.motion-ready body.electrical-page.is-entered .page-title h1 { clip-path: inset(0); transform: translateX(0); }

.motion-ready body.hvac-page .hvac-hero-copy h1 {
  clip-path: none;
  transform: scale(.965);
  transform-origin: left center;
  transition: transform 680ms cubic-bezier(.16, 1, .3, 1) 80ms, opacity 420ms ease 80ms;
}
.motion-ready body.hvac-page.is-entered .hvac-hero-copy h1 { transform: scale(1); }

.motion-ready body.about-page .about-statement h1 { clip-path: inset(0 0 0 100%); transform: translateX(1.1rem); }
.motion-ready body.about-page.is-entered .about-statement h1 { clip-path: inset(0); transform: translateX(0); }

.motion-ready body.contact-page .contact-message h1 {
  clip-path: inset(50% 0);
  transform: none;
}
.motion-ready body.contact-page.is-entered .contact-message h1 { clip-path: inset(0); }
.motion-ready body.contact-page .phone-board { clip-path: inset(100% 0 0); transform: translateY(1.5rem); }
.motion-ready body.contact-page.is-entered .phone-board { clip-path: inset(0); transform: translateY(0); }

.motion-ready body.is-entered .contractor-hero-copy > :not(h1),
.motion-ready body.is-entered .hvac-hero-copy > :not(h1),
.motion-ready body.is-entered .about-statement > :not(h1),
.motion-ready body.is-entered .page-title > :not(h1),
.motion-ready body.is-entered .contact-message > :not(h1),
.motion-ready body.is-entered .contractor-service,
.motion-ready body.is-entered .problem-panel,
.motion-ready body.is-entered .phone-board,
.motion-ready body.is-entered .hvac-equipment-scene,
.motion-ready body.is-entered .about-profile {
  opacity: 1;
  transform: translate(0);
}

.motion-ready body.is-entered .equipment-line,
.motion-ready body.is-entered .equipment-accent:not(.gauge-needle),
.motion-ready body.is-entered .scene-line,
.motion-ready body.is-entered .scene-accent {
  stroke-dasharray: 1100;
  animation: equipment-draw 780ms cubic-bezier(.16, 1, .3, 1) 310ms both;
}

.motion-ready body.is-entered .equipment-accent:not(.gauge-needle),
.motion-ready body.is-entered .scene-accent { animation-delay: 520ms; }

.motion-ready .motion-reveal {
  opacity: 0;
  transform: translateY(1.1rem);
  clip-path: inset(0 0 .9rem 0);
  transition: opacity 460ms ease var(--motion-delay, 0ms), transform 600ms cubic-bezier(.16, 1, .3, 1) var(--motion-delay, 0ms), clip-path 600ms cubic-bezier(.16, 1, .3, 1) var(--motion-delay, 0ms);
}

.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0);
}

.motion-ready body.electrical-page .motion-reveal {
  transform: translateX(-1.15rem);
  /* Keep the element's paint area measurable so IntersectionObserver can
     trigger reliably. The horizontal movement still gives this page its
     distinct power-on reveal without hiding content indefinitely. */
  clip-path: inset(0);
}
.motion-ready body.electrical-page .motion-reveal.is-visible { transform: translateX(0); clip-path: inset(0); }

/* Electrical: current moves through an actual circuit path, not a generic glow. */
.electrical-current { margin: -.35rem 0 1.3rem; }
.electrical-current svg { width: 100%; height: auto; overflow: visible; }
.current-track, .current-path { fill: none; stroke-linecap: square; stroke-linejoin: miter; }
.current-track { stroke: var(--color-border-inverse); stroke-width: 4; }
.current-path { stroke: var(--color-accent); stroke-width: 4; stroke-dasharray: 9 11; opacity: .92; }
.current-node { fill: var(--color-accent); transform-box: fill-box; transform-origin: center; }
.motion-ready .electrical-current.is-live .current-path { animation: current-flow 1.15s linear infinite; }
.motion-ready .electrical-current.is-live .current-node { animation: current-node-charge 1.8s cubic-bezier(.16, 1, .3, 1) infinite; }
.motion-ready .electrical-current.is-live .current-node:nth-of-type(2) { animation-delay: .18s; }
.motion-ready .electrical-current.is-live .current-node:nth-of-type(3) { animation-delay: .36s; }
.motion-ready .electrical-current.is-live .current-node:nth-of-type(4) { animation-delay: .54s; }

.motion-ready body.hvac-page .motion-reveal { transform: scale(.975); clip-path: inset(.8rem); }
.motion-ready body.hvac-page .motion-reveal.is-visible { transform: scale(1); clip-path: inset(0); }
.motion-ready body.hvac-page .hvac-service-panel:nth-child(odd) { transform-origin: left center; }
.motion-ready body.hvac-page .hvac-service-panel:nth-child(even) { transform-origin: right center; }

/* HVAC: a bounded diagnostic sweep crosses the equipment while it is active. */
.hvac-equipment-scene { position: relative; isolation: isolate; overflow: hidden; }
.hvac-equipment-scene::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 11%;
  right: 11%;
  top: 50%;
  height: 3px;
  background: var(--color-accent);
  box-shadow: 0 .6rem 1.4rem color-mix(in srgb, var(--color-accent) 42%, transparent);
  opacity: 0;
  pointer-events: none;
}
.motion-ready .hvac-equipment-scene.is-live::after { animation: hvac-diagnostic-scan 4.8s cubic-bezier(.16, 1, .3, 1) 1.1s infinite; }

.motion-ready body.about-page .motion-reveal { transform: translateX(1rem); clip-path: inset(0 0 0 1rem); }
.motion-ready body.about-page .motion-reveal:nth-child(even) { transform: translateX(-1rem); clip-path: inset(0 1rem 0 0); }
.motion-ready body.about-page .motion-reveal.is-visible { transform: translateX(0); clip-path: inset(0); }

/* About: the real five-step service sequence completes as visitors read it. */
.about-page .process { position: relative; }
.about-page .process::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-accent);
  pointer-events: none;
  transform: scaleX(var(--section-progress, 0));
  transform-origin: left center;
  transition: transform 120ms linear;
}

.motion-ready body.contact-page .motion-reveal { transform: none; clip-path: inset(0 0 .75rem); }
.motion-ready body.contact-page .motion-reveal.is-visible { transform: none; clip-path: inset(0); }

/* Contact: a direct-response signal belongs to the phone channel; fields then
   acknowledge focus and supplied information without pretending to submit. */
.phone-board { position: relative; isolation: isolate; overflow: hidden; }
.phone-board > *:not(.contact-signal) { position: relative; z-index: 1; }
.contact-signal { position: absolute; z-index: 0; top: 3rem; right: 3rem; width: 7rem; aspect-ratio: 1; pointer-events: none; }
.contact-signal > span { position: absolute; inset: 0; border: 2px solid var(--fd-carbon); border-radius: 50%; opacity: 0; }
.motion-ready .contact-signal.is-live > span { animation: contact-signal-send 3.2s cubic-bezier(.16, 1, .3, 1) infinite; }
.motion-ready .contact-signal.is-live > span:nth-child(2) { animation-delay: .7s; }
.motion-ready .contact-signal.is-live > span:nth-child(3) { animation-delay: 1.4s; }
.field label { transition: color 160ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1); }
.field:focus-within label { color: var(--color-brand); transform: translateX(.25rem); }
.field.has-value input, .field.has-value select, .field.has-value textarea { border-color: var(--color-accent-active); }

/* Live equipment: loops run only while their illustration is in view. */
.service-illustration.motion-tracked > svg,
.hvac-equipment-scene.motion-tracked > svg,
.refrigerant-gauge.motion-tracked > svg,
.property-scene.motion-tracked > svg {
  transform: translate3d(
    var(--illustration-pointer-x, 0px),
    calc(var(--illustration-scroll-y, 0px) + var(--illustration-pointer-y, 0px)),
    0
  ) rotate(var(--illustration-scroll-tilt, 0deg));
  transform-origin: center;
  transition: transform 120ms linear;
}

.service-illustration.motion-tracked.is-live > svg,
.hvac-equipment-scene.motion-tracked.is-live > svg,
.refrigerant-gauge.motion-tracked.is-live > svg,
.property-scene.motion-tracked.is-live > svg { will-change: transform; }

.fan-rotor { transform-box: fill-box; transform-origin: center; }
.motion-ready .is-live .fan-rotor { animation: fan-turn 2.4s linear .75s infinite; }
.motion-ready .is-live .power-status { animation: power-cycle 2.8s ease-in-out .8s infinite; }

.airflow-streams { fill: none; stroke: var(--color-brand); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 18 24; opacity: 0; }
.motion-ready .is-live .airflow-streams path { animation: airflow-pass 2.8s linear 1s infinite; }
.motion-ready .is-live .airflow-streams path:nth-child(2) { animation-delay: 1.28s; }
.motion-ready .is-live .airflow-streams path:nth-child(3) { animation-delay: 1.56s; }

.gauge-needle { transform-box: view-box; transform-origin: 110px 130px; }
.motion-ready .is-live .gauge-needle { animation: gauge-check 3.6s cubic-bezier(.16, 1, .3, 1) .4s infinite; }

.system-link { fill: none; stroke: var(--color-brand); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 9 11; }
.motion-ready .is-live .system-link { animation: link-flow 1.4s linear infinite; }

.motion-paused .is-live .fan-rotor,
.motion-paused .is-live .power-status,
.motion-paused .is-live .airflow-streams path,
.motion-paused .is-live .gauge-needle,
.motion-paused .is-live .system-link,
.motion-paused .electrical-current.is-live .current-path,
.motion-paused .electrical-current.is-live .current-node,
.motion-paused .hvac-equipment-scene.is-live::after,
.motion-paused .contact-signal.is-live > span { animation-play-state: paused; }

/* Home: each service rail energizes in proportion to its reading position. */
.contractor-home .system-row { position: relative; }
.contractor-home .system-row::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-accent);
  pointer-events: none;
  transform: scaleX(var(--section-progress, 0));
  transform-origin: left center;
  transition: transform 120ms linear;
}

.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: linear-gradient(105deg, transparent 0 38%, color-mix(in srgb, var(--fd-white) 42%, transparent) 47%, transparent 56% 100%);
  background-size: 260% 100%;
  background-position: 120% 0;
  transition: background-color 150ms ease, background-position 480ms cubic-bezier(.16, 1, .3, 1), color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.button:hover, .button:focus-visible { background-position: -70% 0; }
.button:active { transform: translateY(1px); }

.contractor-service:hover .service-arrow,
.contractor-service:focus-visible .service-arrow { transform: translateX(.65rem); }

.system-row:hover .service-illustration,
.system-row:focus-within .service-illustration { transform: translateY(-.35rem); }
.service-illustration { transition: transform 260ms cubic-bezier(.16, 1, .3, 1); }

@supports (view-transition-name: none) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 150ms ease both fade-out; }
  ::view-transition-new(root) { animation: 320ms cubic-bezier(.16, 1, .3, 1) both page-arrive; }
}

@keyframes fade-out { to { opacity: 0; } }
@keyframes page-arrive {
  from { opacity: 0; clip-path: inset(0 0 1.25rem); }
  to { opacity: 1; clip-path: inset(0); }
}

/* Production content patterns */
.narrow { max-width: 66rem; }
.faq-section { background: #edf0ed; }
.faq-section .section-heading { grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr); }
.faq-section .section-heading h2 { max-width: 12ch; }
.faq-list { border-top: 3px solid var(--color-brand); }
.faq-list details { border-bottom: 1px solid var(--color-border); }
.faq-list summary { min-height: 4.75rem; display: flex; align-items: center; justify-content: space-between; gap: var(--fd-space-6); padding: var(--fd-space-5) 0; color: var(--color-brand); font-weight: 700; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list details p { max-width: 54rem; margin: 0; padding: 0 3rem var(--fd-space-6) 0; color: var(--color-muted); }
.faq-icon { flex: 0 0 auto; color: var(--color-accent-text); font-family: var(--fd-display); font-size: 1.8rem; font-weight: 400; }
.faq-list details[open] .faq-icon { transform: rotate(45deg); }

.check-field { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--fd-space-3); }
.check-field input { width: 1.5rem; height: 1.5rem; margin-top: .08rem; accent-color: var(--color-brand); }
.check-field label { max-width: 56rem; }
.field-error { grid-column: 1 / -1; color: var(--color-error); font-size: .86rem; font-weight: 700; }
.field [aria-invalid="true"], .check-field [aria-invalid="true"] { outline: 2px solid var(--color-error); outline-offset: 2px; }
.error-summary { margin-bottom: var(--fd-space-6); padding: var(--fd-space-5); border: 2px solid var(--color-error); background: #fff7f5; color: var(--color-error); }
.error-summary[hidden], .form-status:empty { display: none; }
.error-summary p, .error-summary ul { margin-bottom: 0; }
.error-summary ul { margin-top: var(--fd-space-2); }
.form-status { margin-top: var(--fd-space-5); padding: var(--fd-space-5); border-left: 4px solid var(--color-accent); background: var(--fd-frost-200); }
.form-status--error { border-left-color: var(--color-error); background: #fff7f5; color: var(--color-error); }
.honeypot-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.utility-hero { padding-block: clamp(4rem, 8vw, 7rem); background: var(--color-brand); color: var(--fd-white); }
.utility-hero .breadcrumb { margin-bottom: var(--fd-space-8); color: var(--fd-frost-300); }
.utility-hero h1 { max-width: 12ch; margin-bottom: var(--fd-space-6); font-size: clamp(4rem, 8vw, 7rem); }
.utility-hero .lead { color: var(--fd-frost-200); font-size: 1.15rem; }
.policy-content { display: grid; gap: var(--fd-space-12); }
.policy-content section { padding-top: var(--fd-space-6); border-top: 2px solid var(--color-border); }
.policy-content h2 { color: var(--color-brand); font-size: clamp(2.2rem, 4vw, 3.5rem); }
.error-actions { margin-top: var(--fd-space-8); }

@media (max-width: 60rem) {
  .contractor-hero-grid { grid-template-columns: 1fr; }
  .contractor-hero-copy { padding-right: 0; }
}

@media (max-width: 48rem) {
  .container { width: calc(100% - 2.5rem); max-width: none; margin-inline: auto; }
  .header-inner { gap: .5rem; }
  .brand { gap: .5rem; }
  .brand img { width: 2.3rem; height: 2.3rem; }
  .brand-name { font-size: 1.2rem; }
  .brand-sub { display: none; }
  .header-call { width: 2.75rem; min-height: 2.75rem; padding: 0; }
  .header-call span { display: none; }
  .header-phone-icon { display: block; }
  .menu-button { min-width: 2.75rem; min-height: 2.75rem; padding: 0; }
  .status-inner { justify-content: flex-start; overflow: hidden; }
  .status-inner span:nth-child(n+2) { display: none; }
  .hero-question { padding-block: 4rem; }
  .hero-question h1 { font-size: clamp(4.5rem, 22vw, 6rem); }
  .hero-question .cluster { display: grid; grid-template-columns: 1fr; }
  .hero-question .button { width: 100%; }
  .callboard { min-height: auto; grid-template-rows: none; }
  .callboard-row { min-height: 9rem; padding-inline: 1.25rem; }
  .callboard-row strong { font-size: 2.5rem; }
  .callboard-row small { font-size: .82rem; }
  .route-action { width: 2.65rem; height: 2.65rem; }
  .section-heading, .faq-section .section-heading, .system-row, .audience, .closing-inner, .service-content-row, .form-layout { grid-template-columns: 1fr; }
  .contractor-home .section-heading { grid-template-columns: 1fr; gap: var(--fd-space-6); margin-bottom: var(--fd-space-10); }
  .section-heading h2 { font-size: 3.6rem; }
  .contractor-home .section-heading > p { justify-self: start; margin-bottom: 0; }
  .system-name { min-height: auto; align-items: flex-end; padding: var(--fd-space-12) 0 var(--fd-space-8); }
  .system-copy { padding: 2rem 1.25rem; }
  .system-action { min-height: auto; gap: var(--fd-space-8); padding: var(--fd-space-8) 0 var(--fd-space-12); }
  .contractor-home .system-action { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .service-illustration { width: 7.5rem; flex: 0 0 auto; margin-bottom: 0; }
  .contractor-home .system-action a { max-width: 10rem; text-align: right; }
  .audience-block { min-height: auto; gap: var(--fd-space-12); padding: var(--fd-space-12) 1.25rem; }
  .facts { grid-template-columns: 1fr 1fr; }
  .fact { min-height: 10rem; }
  .process { grid-template-columns: 1fr; }
  .process { margin-top: var(--fd-space-10); }
  .process-step { min-height: 5.75rem; display: grid; grid-template-columns: 2.25rem 1fr; align-items: center; gap: var(--fd-space-4); border-right: 0; }
  .process-step strong { margin-top: 0; }
  .closing .cluster { justify-content: flex-start; }
  .page-title h1, .contact-message h1 { font-size: 5rem; }
  .page-title { padding-block: 4rem; }
  .problem-panel { padding: 3rem 1.25rem; }
  .service-content-row ul { columns: 1; }
  .phone-board { padding: 3rem 1.25rem; }
  .form-grid { grid-template-columns: 1fr; }
  .field-full { grid-column: auto; }
  .contractor-hero-copy { padding-block: var(--fd-space-12); }
  .contractor-home .location-line { margin-bottom: var(--fd-space-5); }
  .contractor-hero h1 { font-size: clamp(3.25rem, 14vw, 3.55rem); }
  .contractor-home .contractor-lead { margin-bottom: var(--fd-space-6); font-size: 1.08rem; }
  .contractor-hero-copy .cluster { display: grid; grid-template-columns: 1fr; }
  .contractor-hero-copy .button { width: 100%; }
  .contractor-service { min-height: 11.5rem; grid-template-columns: minmax(0, 1fr) auto; padding: var(--fd-space-8) 1.25rem; }
  .service-type { font-size: 3rem; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .proof-grid > div { min-height: 7rem; padding: 1.25rem; border-bottom: 1px solid var(--color-border-carbon-soft); }
  .proof-grid > div:nth-child(2) { border-right: 0; }
  .proof-grid > div:nth-child(n+3) { border-bottom: 0; }
  .proof-grid > div:first-child { padding-left: 1.25rem; }
  .proof-grid strong { font-size: 2rem; }
  .emergency-help-grid { gap: 3rem; }
  .emergency-intro h2, .coverage-grid h2 { font-size: 4rem; }
  .emergency-issues a { grid-template-columns: 1fr auto; gap: .35rem 1rem; min-height: 7rem; }
  .emergency-issues strong { font-size: 1.9rem; }
  .emergency-issues a span:nth-child(2) { grid-column: 1; }
  .emergency-issues a span:last-child { grid-column: 2; grid-row: 1 / span 2; }
  .hvac-hero-copy, .about-statement { padding: var(--fd-space-12) 1.25rem; }
  .hvac-hero-copy h1, .about-statement h1 { font-size: 3.5rem; }
  .hvac-equipment-scene { min-height: 24rem; padding: var(--fd-space-8) 1.25rem; }
  .service-index-band ul { width: 100%; padding-inline: 1.25rem; }
  .hvac-service-field { grid-template-columns: 1fr; }
  .hvac-service-panel { min-height: auto; gap: var(--fd-space-10); padding: var(--fd-space-12) 1.25rem; }
  .hvac-service-panel h2 { font-size: 3.6rem; }
  .refrigerant-grid { grid-template-columns: 1fr; }
  .refrigerant-gauge { max-width: 15rem; }
  .refrigerant-grid h2 { font-size: 4rem; }
  .about-hero { padding-block: 0; }
  .about-profile { padding: var(--fd-space-12) 1.25rem; }
  .experience-line strong { font-size: clamp(3.6rem, 16vw, 4.5rem); }
  .about-story-grid h2, .values-layout h2, .customer-field h2, .certification-grid h2 { font-size: 3.6rem; }
  .story-copy { padding-top: 0; }
  .customer-field ul { grid-template-columns: 1fr 1fr; }
  .customer-field li { min-height: 7rem; padding: var(--fd-space-4); border-bottom: 1px solid var(--color-border-inverse); }
  .customer-field li:nth-child(odd) { padding-left: 0; }
  .customer-field li:nth-child(even) { border-right: 0; }
  .values-list article { grid-template-columns: 1fr; gap: var(--fd-space-3); }
  .contact-signal { top: 2rem; right: 1rem; width: 5.5rem; }
  .about-page .process::after { width: 3px; height: 100%; transform: scaleY(var(--section-progress, 0)); transform-origin: center top; }
  .site-footer-inner { min-height: 6.25rem; padding-block: var(--fd-space-6); }
  .site-footer p { display: grid; gap: var(--fd-space-2); }
  .footer-separator { display: none; }
}

@media (max-width: 22rem) {
  .header-inner { gap: .4rem; }
  .brand img { display: none; }
  .brand-name { font-size: 1.05rem; }
  .header-call { padding-inline: .65rem; }
  .contractor-service { column-gap: var(--fd-space-3); }
  .service-type { font-size: 2.4rem; }
  .contractor-home .section-heading h2, .contractor-home .audience-block h2, .contractor-home .emergency-intro h2, .contractor-home .coverage-grid h2, .contractor-home .closing h2 { max-width: 100%; font-size: 3.1rem; }
  .proof-grid > div { padding-inline: var(--fd-space-3); }
  .proof-grid > div:first-child { padding-left: var(--fd-space-3); }
  .proof-grid strong { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}