/* AI DESIGN CONTRACT
Documentation: read COLOR-SYSTEM.md and TEMPLATE-GUIDE.md together. Color preference 1 -> CTA family; preference 2 -> UI/link/pale surface family. With one preference, use it for both roles with appropriate shades; with none, retain defaults. Structural sizes/spacing/type/motion stay fixed. Semantic feedback, rating marks, masks and transparency are separate roles. Aliases follow var(); literal shades/shadows require coordinated manual updates. This documentation edit changes no executable values. */
:root {
  /* COLOR/STRUCTURE ROLE: --styles-component--webkit-tap-highlight-color-tone-01 — FUNCTIONAL / TRANSPARENCY. transparent mask/background/tap-highlight stop or pointer bridge; preserve zero alpha and behavior, do not apply a preference hue. Definition: transparent; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --styles-component--webkit-tap-highlight-color-tone-01: transparent;
  /* COLOR/STRUCTURE ROLE: --styles-component-mask-image-tone-02 — FUNCTIONAL / TRANSPARENCY. transparent mask/background/tap-highlight stop or pointer bridge; preserve zero alpha and behavior, do not apply a preference hue. Definition: transparent; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --styles-component-mask-image-tone-02: transparent;
  /* COLOR/STRUCTURE ROLE: --styles-component-background-tone-03 — FUNCTIONAL / TRANSPARENCY. transparent mask/background/tap-highlight stop or pointer bridge; preserve zero alpha and behavior, do not apply a preference hue. Definition: transparent; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --styles-component-background-tone-03: transparent;
  /* COLOR/STRUCTURE ROLE: --styles-component-background-image-tone-04 — FUNCTIONAL / TRANSPARENCY. transparent mask/background/tap-highlight stop or pointer bridge; preserve zero alpha and behavior, do not apply a preference hue. Definition: transparent; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --styles-component-background-image-tone-04: transparent;
  /* COLOR/STRUCTURE ROLE: --styles-component-background-tone-05 — FUNCTIONAL / TRANSPARENCY. transparent mask/background/tap-highlight stop or pointer bridge; preserve zero alpha and behavior, do not apply a preference hue. Definition: transparent; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --styles-component-background-tone-05: transparent;
}

/* Palette entry points: green = first-preference CTA family, blue = second-preference UI family. Coordinate their documented dependents; retain structural/neutral/semantic roles. */

/* Color/theme configuration. Preserve selectors and specificity. */

:root {
  /* COLOR/STRUCTURE ROLE: --color-ink — TEXT / DARK INK. headings, strong copy and dark UI; retain readable contrast on white/light surfaces; no automatic hue link to either action family. Definition: #101432; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --color-ink: #101432;
  /* COLOR/STRUCTURE ROLE: --color-copy — TEXT / MUTED INK. body/supporting descriptions and form labels/hints; coordinate with ink without turning text into a pale decoration. Definition: #606778; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --color-copy: #606778;
  /* COLOR/STRUCTURE ROLE: --color-blue — UI / SECOND PREFERENCE. links, active navigation, benefit/phone icons and blue controls; coordinate soft, line, decoration, focus halo, blue shadow, theme-color and external marks. Definition: #0869ed; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --color-blue: #0869ed;
  /* COLOR/STRUCTURE ROLE: --color-blue-hover — UI / SECOND PREFERENCE INTERACTION. hover shade for blue links/controls; distinct hand-selected darker state. Definition: #0056cf; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --color-blue-hover: #0056cf;
  /* COLOR/STRUCTURE ROLE: --color-green — CTA / FIRST PREFERENCE. main CTA gradient start; coordinate green-dark, green-hover, green shadow and form action aliases. Definition: #00b51b; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --color-green: #00b51b;
  /* COLOR/STRUCTURE ROLE: --color-green-dark — CTA / FIRST PREFERENCE DARK. CTA gradient end and integrated-form action base; distinct hand-selected shade of the first family. Definition: #00a216; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --color-green-dark: #00a216;
  /* COLOR/STRUCTURE ROLE: --color-green-hover — CTA / FIRST PREFERENCE INTERACTION. hover/focus fill for green buttons and the integrated form; darker state, not an automatic derivation. Definition: #008d17; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --color-green-hover: #008d17;

  /* Neutral lighting: retain these alpha values when the first-preference CTA hue changes. */
  --button-green-highlight: rgb(255 255 255 / 50%);
  --button-green-shade: rgb(0 0 0 / 12%);
  /* Gloss reflects neutral white; its transparent stop avoids a dark interpolation seam. */
  --button-green-gloss-strong: rgb(255 255 255 / 22%);
  --button-green-gloss-soft: rgb(255 255 255 / 7%);
  --button-green-gloss-clear: rgb(255 255 255 / 0%);
  /* Brand-relative contrast tones: follow the first-preference family automatically.
     White adds 6% top light; neutral black adds 22% bottom shade, without recoloring other components. */
  --button-green-gradient-top: color-mix(in srgb, var(--color-green) 94%, var(--color-white));
  --button-green-gradient-bottom: color-mix(in srgb, var(--color-green-hover) 78%, black);
  /* First-family underside: automatically follows the existing dark interaction tone. */
  --button-green-edge: var(--color-green-hover);
  /* First-family pressed glow: coordinate this independent RGB with --shadow-green during rebranding. */
  --button-green-pressed-glow: rgb(0 176 33 / 18%);
  /* Shared face lighting; offsets affect paint only, not button dimensions. */
  --button-green-face-shadow: inset 0 1px 0 var(--button-green-highlight), inset 0 -2px 0 var(--button-green-shade);
  /* Three-pixel resting underside plus the existing soft CTA shadow. */
  --button-green-raised-shadow: var(--button-green-face-shadow), 0 3px 0 var(--button-green-edge), var(--shadow-green);
  /* Pressed underside reduces to one pixel; the soft shadow becomes shorter. */
  --button-green-pressed-shadow: var(--button-green-face-shadow), 0 1px 0 var(--button-green-edge), 0 3px 10px var(--button-green-pressed-glow);
  /* COLOR/STRUCTURE ROLE: --color-white — NEUTRAL / INVERSE AND SURFACE. pure white foreground on colored controls and some white surfaces; review both uses before any change. Definition: #fff; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --color-white: #fff;
  /* COLOR/STRUCTURE ROLE: --color-background — NEUTRAL / PAGE CANVAS. white page base; retain the existing value during a brand-only recolor; HVAC cream is not this template background. Definition: #fff; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --color-background: #fff;
  /* COLOR/STRUCTURE ROLE: --color-soft — UI / SECOND PREFERENCE PALE SURFACE. very light section/input/gallery surface; keep quiet and separate from white page/card surfaces. Definition: #f6fbfe; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --color-soft: #f6fbfe;
  /* COLOR/STRUCTURE ROLE: --color-card — NEUTRAL / CARD SURFACE. white card and integrated contact panel; retain gentle separation from second-family pale sections. Definition: #fff; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --color-card: #fff;
  /* COLOR/STRUCTURE ROLE: --color-line — UI / SECOND PREFERENCE PALE BORDER. subtle dividers and control/card outlines; coordinate with the second-family soft surfaces. Definition: #edf2f6; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --color-line: #edf2f6;
  /* COLOR/STRUCTURE ROLE: --color-decoration — UI / SECOND PREFERENCE LIGHT DECORATION. pale decorative SVGs and form/area separators; not a full-strength action fill. Definition: #d9edfa; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --color-decoration: #d9edfa;
  /* COLOR/STRUCTURE ROLE: --color-star — SEMANTIC / RATING INDICATOR. gold star display only; not a promise of a verified rating, not a CTA brand preference. Definition: #efb71c; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --color-star: #efb71c;
  /* COLOR/STRUCTURE ROLE: --color-focus — ACCESSIBILITY / KEYBOARD OUTLINE. visible keyboard focus; coordinate its hue if recoloring the UI family, preserve visible separation and contrast. Definition: #0849b8; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --color-focus: #0849b8;
  /* COLOR/STRUCTURE ROLE: --color-overlay — FUNCTIONAL / DIALOG BACKDROP. dark cool backdrop at 45% opacity; preserve translucency and separation from modal content. Definition: rgb(11 23 48 / 45%); scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --color-overlay: rgb(11 23 48 / 45%);
  /* COLOR/STRUCTURE ROLE: --shadow-card — SURFACE / COOL CARD SHADOW. independent RGB (23,72,102), 5% alpha; coordinate subtly with UI/ink, preserve offsets and blur. Definition: 0 3px 15px rgb(23 72 102 / 5%); scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --shadow-card: 0 3px 15px rgb(23 72 102 / 5%);
  /* COLOR/STRUCTURE ROLE: --shadow-green — CTA / FIRST-FAMILY SHADOW. independent RGB (0,176,33), 23% alpha; not the exact RGB of --color-green; recolor alongside first family manually. Definition: 0 7px 23px rgb(0 176 33 / 23%); scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --shadow-green: 0 7px 23px rgb(0 176 33 / 23%);
  /* COLOR/STRUCTURE ROLE: --shadow-blue — UI / SECOND-FAMILY SHADOW. independent RGB (0,104,239), 21% alpha; not the exact RGB of --color-blue; recolor alongside second family manually. Definition: 0 7px 23px rgb(0 104 239 / 21%); scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --shadow-blue: 0 7px 23px rgb(0 104 239 / 21%);
  /* COLOR/STRUCTURE ROLE: --shadow-dialog — FUNCTIONAL / DARK MODAL SHADOW. independent RGB (7,23,42), 22% alpha; keep offsets/blur and overlay separation. Definition: 0 24px 90px rgb(7 23 42 / 22%); scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --shadow-dialog: 0 24px 90px rgb(7 23 42 / 22%);
  /* COLOR/STRUCTURE ROLE: --fade-white — FUNCTIONAL / TRANSPARENT MASK STOP. white RGB at 0% alpha; mask transparency behavior, not a brand surface. Definition: rgb(255 255 255 / 0%); scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --fade-white: rgb(255 255 255 / 0%);
  /* COLOR/STRUCTURE ROLE: --mask-solid — FUNCTIONAL / OPAQUE MASK STOP. opaque black mask stop; preserves photo visibility, not a visible black brand color. Definition: #000; scope: :root; condition: base. Literal: does not update when another palette token changes. Preserve its alpha and any surrounding shadow/gradient/mask geometry. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --mask-solid: #000;
  /* COLOR/STRUCTURE ROLE: --font-body — STRUCTURAL / FIXED. font stack and metrics; preserve all base/media/scope variants, never recolor or change per Color Preferences. Definition: Arial,Helvetica,sans-serif; scope: :root; condition: base. Structural value: unchanged during recoloring. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --font-body: Arial,Helvetica,sans-serif;
  /* COLOR/STRUCTURE ROLE: --container — STRUCTURAL / FIXED. maximum content width; preserve all base/media/scope variants, never recolor or change per Color Preferences. Definition: 1344px; scope: :root; condition: base. Structural value: unchanged during recoloring. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --container: 1344px;
  /* COLOR/STRUCTURE ROLE: --gutter — STRUCTURAL / FIXED. responsive page-side spacing; preserve all base/media/scope variants, never recolor or change per Color Preferences. Definition: 48px; scope: :root; condition: base. Structural value: unchanged during recoloring. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --gutter: 48px;
  /* COLOR/STRUCTURE ROLE: --radius-card — STRUCTURAL / FIXED. card corner geometry; preserve all base/media/scope variants, never recolor or change per Color Preferences. Definition: 9px; scope: :root; condition: base. Structural value: unchanged during recoloring. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --radius-card: 9px;
  /* COLOR/STRUCTURE ROLE: --radius-button — STRUCTURAL / FIXED. button corner geometry; preserve all base/media/scope variants, never recolor or change per Color Preferences. Definition: 100px; scope: :root; condition: base. Structural value: unchanged during recoloring. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --radius-button: 100px;
  /* COLOR/STRUCTURE ROLE: --transition — STRUCTURAL / FIXED. interaction timing/easing; preserve all base/media/scope variants, never recolor or change per Color Preferences. Definition: 180ms ease; scope: :root; condition: base. Structural value: unchanged during recoloring. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --transition: 180ms ease;
  /* COLOR/STRUCTURE ROLE: --hover-lift — STRUCTURAL / FIXED. hover translation and pointer-bridge distance; preserve all base/media/scope variants, never recolor or change per Color Preferences. Definition: 2px; scope: :root; condition: base. Structural value: unchanged during recoloring. See COLOR-SYSTEM.md for consumers and preference mapping. */
  --hover-lift: 2px;
}

/* Base and accessible shared controls. */

/* Responsive component styling for *. Preserve selectors and specificity. */

* {
  box-sizing: border-box;
}

/* Responsive component styling for html. Preserve selectors and specificity. */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

/* Responsive component styling for body. Preserve selectors and specificity. */

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

/* Responsive component styling for body.menu-open,body.dialog-open. Preserve selectors and specificity. */

body.menu-open,body.dialog-open {
  overflow: hidden;
}

/* Responsive component styling for a. Preserve selectors and specificity. */

a {
  color: inherit;
  text-decoration: none;
}

/* Responsive component styling for button,input. Preserve selectors and specificity. */

button,input {
  font: inherit;
}

/* Responsive component styling for button. Preserve selectors and specificity. */

button {
  color: inherit;
  cursor: pointer;
}

/* Responsive component styling for button,a,input. Preserve selectors and specificity. */

button,a,input {
  -webkit-tap-highlight-color: var(--styles-component--webkit-tap-highlight-color-tone-01);
}

/* Responsive component styling for button:focus-visible,a:focus-visible,input:focus-visible; visible keyboard focus state. Preserve selectors and specificity. */

button:focus-visible,a:focus-visible,input:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 5px;
}

/* Responsive component styling for img. Preserve selectors and specificity. */

img {
  display: block;
  max-width: 100%;
}

/* Responsive component styling for h1,h2,h3,p,figure,blockquote. Preserve selectors and specificity. */

h1,h2,h3,p,figure,blockquote {
  margin: 0;
}

/* Responsive component styling for h1,h2,h3. Preserve selectors and specificity. */

h1,h2,h3 {
  letter-spacing: -.025em;
}

/* Responsive component styling for p. Preserve selectors and specificity. */

p {
  color: var(--color-copy);
}

/* Responsive component styling for .icon. Preserve selectors and specificity. */

.icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Responsive component styling for .svg-library. Preserve selectors and specificity. */

.svg-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Responsive component styling for .sr-only. Preserve selectors and specificity. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Responsive component styling for .skip-link. Preserve selectors and specificity. */

.skip-link {
  position: fixed;
  left: 20px;
  top: -100px;
  z-index: 50;
  padding: 16px;
  background: var(--color-white);
  border: 2px solid var(--color-blue);
}

/* Responsive component styling for .skip-link:focus; visible keyboard focus state. Preserve selectors and specificity. */

.skip-link:focus {
  top: 12px;
}

/* Responsive component styling for .container. Preserve selectors and specificity. */

.container {
  width: min(var(--container),calc(100% - var(--gutter)*2));
  margin-inline: auto;
}

/* Responsive component styling for .eyebrow. Preserve selectors and specificity. */

.eyebrow {
  color: var(--color-blue);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.4px;
  line-height: 1.4;
}

/* Responsive component styling for .button. Preserve selectors and specificity. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 72px;
  padding: 17px 27px;
  border-radius: var(--radius-button);
  color: var(--color-white);
  font-size: 23px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color var(--transition),color var(--transition),box-shadow var(--transition),transform var(--transition);
}

/* Responsive component styling for .button .icon. Preserve selectors and specificity. */

.button .icon {
  width: 25px;
  height: 25px;
  stroke-width: 2.3;
}

/* Responsive component styling for .button .arrow. Preserve selectors and specificity. */

.button .arrow {
  width: 18px;
  height: 18px;
}

/* Responsive component styling for .button--green. Preserve selectors and specificity. */

/* Glossy CTA face: a bright upper reflection and darker lower tone retain the existing relief. */
.button--green {
  background: linear-gradient(180deg,var(--button-green-gloss-strong) 0%,var(--button-green-gloss-soft) 42%,var(--button-green-gloss-clear) 43%,var(--button-green-gloss-clear) 100%),
    linear-gradient(180deg,var(--button-green-gradient-top) 0%,var(--color-green) 45%,var(--button-green-gradient-bottom) 100%);
  box-shadow: var(--button-green-raised-shadow);
}

/* Responsive component styling for .button--blue. Preserve selectors and specificity. */

.button--blue {
  background: var(--color-blue);
  box-shadow: var(--shadow-blue);
}

/* Responsive component styling for .button:active. Preserve selectors and specificity. */

.button:active {
  transform: none;
}

/* Responsive component styling for .brand. Preserve selectors and specificity. */

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.18;
  flex-shrink: 0;
}

/* Responsive component styling for .brand img. Preserve selectors and specificity. */

.brand img {
  width: 60px;
  height: 60px;
}

.brand__name span + span::before {
  content: " ";
}

.service-card .text-link {
  min-height: 0;
  gap: 0;
}

.service-card .text-link .icon {
  width: 44px;
  height: 24px;
}

/* Responsive component styling for .phone-link. Preserve selectors and specificity. */

.phone-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  white-space: nowrap;
  font-weight: 700;
}

/* Responsive component styling for .phone-link .icon. Preserve selectors and specificity. */

.phone-link .icon {
  color: var(--color-blue);
}

/* Header follows the compact proportions of the reference. */

/* Responsive component styling for .site-header. Preserve selectors and specificity. */

.site-header {
  height: 99px;
  background: var(--color-white);
  position: relative;
  z-index: 10;
  box-shadow: 0 2px 12px var(--color-line);
}

/* Responsive component styling for .header-inner. Preserve selectors and specificity. */

.header-inner {
  max-width: 1440px;
  height: 100%;
  padding-inline: 36px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* Responsive component styling for .desktop-nav. Preserve selectors and specificity. */

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-left: auto;
}

/* Responsive component styling for .desktop-nav a. Preserve selectors and specificity. */

.desktop-nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  position: relative;
  font-size: 16px;
  font-weight: 600;
}

/* Responsive component styling for .desktop-nav a:hover,.desktop-nav a.active; pointer hover feedback paired with the base component. Preserve selectors and specificity. */

.desktop-nav a:hover,.desktop-nav a.active {
  color: var(--color-blue);
}

/* Responsive component styling for .desktop-nav a.active::after. Preserve selectors and specificity. */

.desktop-nav a.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-blue);
}

/* Responsive component styling for .header-actions. Preserve selectors and specificity. */

.header-actions {
  display: flex;
  gap: 15px;
  align-items: center;
}

/* Responsive component styling for .header-actions .phone-link. Preserve selectors and specificity. */

.header-actions .phone-link {
  border: 1px solid var(--color-line);
  border-radius: 28px;
  padding: 8px 15px;
  font-size: 16px;
}

/* Responsive component styling for .button--small. Preserve selectors and specificity. */

.button--small {
  min-height: 55px;
  padding: 12px 19px;
  font-size: 16px;
  gap: 6px;
  box-shadow: none;
}

/* Responsive component styling for .button--small>.icon:first-child. Preserve selectors and specificity. */

.button--small>.icon:first-child {
  display: none;
}

/* Responsive component styling for .button--small .arrow. Preserve selectors and specificity. */

.button--small .arrow {
  width: 12px;
}

/* Responsive component styling for .menu-toggle. Preserve selectors and specificity. */

.menu-toggle {
  display: none;
  border: 0;
  background: var(--color-soft);
  padding: 12px;
  border-radius: 8px;
}

/* Responsive component styling for .mobile-nav[hidden]; preserve visibility/disabled behavior controlled by HTML or JavaScript. Preserve selectors and specificity. */

.mobile-nav[hidden] {
  display: none;
}

/* Responsive component styling for .mobile-nav. Preserve selectors and specificity. */

.mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  padding: 18px 24px;
  box-shadow: var(--shadow-dialog);
}

/* Responsive component styling for .mobile-nav a. Preserve selectors and specificity. */

.mobile-nav a {
  display: block;
  padding: 15px 10px;
  border-bottom: 1px solid var(--color-line);
}

/* Hero photo is an independent layer alongside the heading, CTA and benefits. */

/* Responsive component styling for .hero. Preserve selectors and specificity. */

.hero {
  position: relative;
  min-height: 660px;
  height: auto;
  background: var(--color-soft);
  overflow: hidden;
}

/* Responsive component styling for .hero-inner. Preserve selectors and specificity. */

.hero-inner {
  max-width: 1440px;
  min-height: 660px;
  height: auto;
  margin: auto;
}

/* Responsive component styling for .hero-copy. Preserve selectors and specificity. */

.hero-copy {
  position: relative;
  z-index: 2;
  padding: 54px 0 0 56px;
  width: auto;
  max-width: 570px;
}

/* Responsive component styling for .hero h1. Preserve selectors and specificity. */

.hero h1 {
  font-size: 60px;
  line-height: 1.095;
  font-weight: 750;
  margin-top: 28px;
  padding-bottom: 10px;
  letter-spacing: -1.8px;
  overflow-wrap: break-word;
}

/* Responsive component styling for .hero h1 span. Preserve selectors and specificity. */

.hero h1 span {
  color: var(--color-blue);
}

/* Responsive component styling for .hero-button. Preserve selectors and specificity. */

.hero-button {
  margin-top: 33px;
  width: auto;
  max-width: 100%;
  min-height: 100px;
  font-size: 34px;
  white-space: normal;
}

/* Responsive component styling for .hero-button .icon. Preserve selectors and specificity. */

.hero-button .icon {
  width: 38px;
  height: 38px;
}

/* Responsive component styling for .hero-button .arrow. Preserve selectors and specificity. */

.hero-button .arrow {
  width: 25px;
  height: 25px;
}

/* Responsive component styling for .hero-photo. Preserve selectors and specificity. */

.hero-photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(30%, calc(50% - 288px));
  width: calc(100% - max(30%, calc(50% - 288px)));
  height: 100%;
  object-fit: cover;
  object-position: right center;
  /* Start the photo fade after all four hero blurbs. The compact desktop copy
     ends at 450px; the 474px threshold leaves clearance. Wider layouts use a
     12% transparent lead-in; the existing 19% transition width stays smooth. */
  -webkit-mask-image: linear-gradient(to right,var(--styles-component-mask-image-tone-02) 0%,var(--styles-component-mask-image-tone-02) max(12%,calc(474px - 30vw)),var(--mask-solid) calc(max(12%,calc(474px - 30vw)) + 19%),var(--mask-solid) 100%);
  mask-image: linear-gradient(to right,var(--styles-component-mask-image-tone-02) 0%,var(--styles-component-mask-image-tone-02) max(12%,calc(474px - 30vw)),var(--mask-solid) calc(max(12%,calc(474px - 30vw)) + 19%),var(--mask-solid) 100%);
}

/* Responsive component styling for .hero-benefits. Preserve selectors and specificity. */

.hero-benefits {
  width: 470px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
  margin-top: 58px;
}

/* Responsive component styling for .hero-benefits>div. Preserve selectors and specificity. */

.hero-benefits>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

/* Responsive component styling for .hero-benefits .icon. Preserve selectors and specificity. */

.hero-benefits .icon {
  width: 37px;
  height: 37px;
  color: var(--color-blue);
}

/* Responsive component styling for .hero-benefits span. Preserve selectors and specificity. */

.hero-benefits span {
  font-size: 17px;
  line-height: 1.3;
}

/* Responsive component styling for .brands. Preserve selectors and specificity. */

.brands {
  height: auto;
  padding-bottom: 28px;
  background: linear-gradient(var(--color-white),var(--color-soft));
  border-bottom: 1px solid var(--color-line);
  padding-top: 25px;
}

/* Responsive component styling for .brand-logos. Preserve selectors and specificity. */

.brand-logos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 36px;
  height: auto;
  flex-wrap: wrap;
}

/* Responsive component styling for .brand-logos img. Preserve selectors and specificity. */

.brand-logos img {
  object-fit: contain;
  max-height: 66px;
  max-width: 220px;
  mix-blend-mode: multiply;
}

/* Responsive component styling for .brands p. Preserve selectors and specificity. */

.brands p {
  font-size: 17px;
  text-align: center;
  margin-top: 23px;
}

/* Eight grid tracks center the final row of three service cards. */

/* Responsive component styling for .services. Preserve selectors and specificity. */

.services {
  height: auto;
  padding-top: 26px;
  padding-bottom: 36px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(130deg,var(--color-soft),var(--color-white) 45%,var(--color-soft));
}

/* Responsive component styling for .services .container. Preserve selectors and specificity. */

.services .container {
  position: relative;
  z-index: 1;
}

/* Responsive component styling for .section-heading. Preserve selectors and specificity. */

.section-heading {
  text-align: center;
}

/* Responsive component styling for .section-heading h2. Preserve selectors and specificity. */

.section-heading h2 {
  font-size: 42px;
  line-height: 1.18;
  margin-top: 12px;
}

/* Responsive component styling for .section-heading>p:last-child. Preserve selectors and specificity. */

.section-heading>p:last-child {
  font-size: 18px;
  line-height: 1.5;
  margin: 8px auto 20px;
}

/* Responsive component styling for .service-grid. Preserve selectors and specificity. */

.service-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 24px;
}

/* Responsive component styling for .service-card. Preserve selectors and specificity. */

.service-card {
  flex: 0 0 calc((100% - 72px) / 4);
  width: calc((100% - 72px) / 4);
  max-width: calc((100% - 72px) / 4);
  grid-column: auto;
  background: var(--color-card);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-line);
  overflow: visible;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  min-height: 347px;
  transition: box-shadow var(--transition),transform var(--transition);
}

/* Responsive component styling for .service-card:nth-child(5). Preserve selectors and specificity. */

.service-card:nth-child(5) {
  grid-column: auto;
}

.home-page .service-card {
  flex: 0 0 calc((100% - 48px) / 3);
  width: calc((100% - 48px) / 3);
  max-width: calc((100% - 48px) / 3);
}

/* Responsive component styling for .service-card>img. Preserve selectors and specificity. */

.service-card>img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* Responsive component styling for .service-body. Preserve selectors and specificity. */

.service-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 15px 23px 7px;
}

/* Responsive component styling for .service-body h3. Preserve selectors and specificity. */

.service-body h3 {
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -.3px;
}

/* Responsive component styling for .service-body p. Preserve selectors and specificity. */

.service-body p {
  font-size: 19px;
  line-height: 1.34;
  margin-top: 6px;
}

/* Responsive component styling for .text-link. Preserve selectors and specificity. */

.text-link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 4px 0;
  margin-top: auto;
  border: 0;
  background: var(--styles-component-background-tone-03);
  color: var(--color-blue);
  font-size: 18px;
  font-weight: 700;
}

/* Responsive component styling for .text-link:hover; pointer hover feedback paired with the base component. Preserve selectors and specificity. */

.text-link:hover {
  color: var(--color-blue-hover);
  text-decoration: underline;
}

/* Responsive component styling for .text-link .icon. Preserve selectors and specificity. */

.text-link .icon {
  width: 15px;
  height: 15px;
}

/* Responsive component styling for .decoration. Preserve selectors and specificity. */

.decoration {
  position: absolute;
  color: var(--color-decoration);
  opacity: .8;
  stroke-width: .6;
}

/* Responsive component styling for .decoration--wrench. Preserve selectors and specificity. */

.decoration--wrench {
  width: 150px;
  height: 150px;
  left: 15px;
  top: 67px;
  transform: rotate(-5deg);
}

/* Responsive component styling for .decoration--oven-top. Preserve selectors and specificity. */

.decoration--oven-top {
  width: 170px;
  height: 170px;
  right: -30px;
  top: 44px;
}

/* Responsive component styling for .decoration--oven-bottom. Preserve selectors and specificity. */

.decoration--oven-bottom {
  width: 220px;
  height: 220px;
  right: -28px;
  bottom: 23px;
}

/* Responsive component styling for .dot-pattern. Preserve selectors and specificity. */

.dot-pattern {
  position: absolute;
  width: 150px;
  height: 130px;
  right: 0;
  bottom: 247px;
  background-image: radial-gradient(var(--color-decoration) 2px,var(--styles-component-background-image-tone-04) 2px);
  background-size: 20px 20px;
}

/* Responsive component styling for .about. Preserve selectors and specificity. */

.about {
  height: auto;
}

/* Responsive component styling for .about-inner. Preserve selectors and specificity. */

.about-inner {
  display: grid;
  grid-template-columns: 40.5% 1fr;
  gap: 47px;
  height: auto;
  max-width: 1440px;
  margin: auto;
  padding-right: 47px;
  align-items: center;
}

/* Responsive component styling for .about-inner>img. Preserve selectors and specificity. */

.about-inner>img {
  width: 100%;
  height: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}

/* Responsive component styling for .about-copy. Preserve selectors and specificity. */

.about-copy {
  padding-top: 12px;
}

/* Responsive component styling for .about-copy .eyebrow. Preserve selectors and specificity. */

.about-copy .eyebrow {
  font-size: 13px;
  letter-spacing: 1.9px;
}

/* Responsive component styling for .about h2. Preserve selectors and specificity. */

.about h2 {
  font-size: 40px;
  line-height: 1.13;
  margin-top: 10px;
}

/* Responsive component styling for .about-copy>p:last-child. Preserve selectors and specificity. */

.about-copy>p:last-child {
  font-size: 18px;
  line-height: 1.45;
  margin-top: 12px;
}

/* Responsive component styling for .benefits. Preserve selectors and specificity. */

.benefits {
  height: auto;
  padding-top: 22px;
  padding-bottom: 28px;
}

/* Responsive component styling for .benefits-grid. Preserve selectors and specificity. */

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
}

/* Responsive component styling for .benefit. Preserve selectors and specificity. */

.benefit {
  text-align: center;
  padding: 0 26px;
  position: relative;
}

/* Responsive component styling for .benefit+.benefit::before. Preserve selectors and specificity. */

.benefit+.benefit::before {
  content: "";
  width: 1px;
  height: 170px;
  background: linear-gradient(var(--color-white),var(--color-line),var(--color-white));
  position: absolute;
  left: 0;
  top: 12px;
}

/* Responsive component styling for .benefit>.icon. Preserve selectors and specificity. */

.benefit>.icon {
  width: 60px;
  height: 60px;
  color: var(--color-blue);
}

/* Content icons share a 24-unit grid, rounded 1.5-unit outlines and safe margins.
   Shapes stay transparent and inherit the UI-family blue from each component.
   Do not apply a filled shield/background to the fourth benefit: it is an appliance pair.
   Display dimensions and responsive layout remain defined by the existing rules. */
.hero-benefits .icon,
.benefit>.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* Responsive component styling for .benefit h3. Preserve selectors and specificity. */

.benefit h3 {
  font-size: 21px;
  line-height: 1.2;
  margin-top: 15px;
  font-weight: 500;
}

/* Responsive component styling for .benefit p. Preserve selectors and specificity. */

.benefit p {
  font-size: 18px;
  line-height: 1.43;
  margin-top: 10px;
}

/* Responsive component styling for .areas. Preserve selectors and specificity. */

.areas {
  height: auto;
  padding-bottom: 28px;
  background: linear-gradient(110deg,var(--color-soft),var(--color-white));
  padding-top: 13px;
}

/* Responsive component styling for .areas-inner. Preserve selectors and specificity. */

.areas-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  height: auto;
}

/* Responsive component styling for .areas-copy. Preserve selectors and specificity. */

.areas-copy {
  padding-top: 10px;
}

/* Responsive component styling for .areas h2. Preserve selectors and specificity. */

.areas h2 {
  font-size: 42px;
  line-height: 1.13;
  margin-top: 10px;
}

/* Responsive component styling for .areas-copy>p:last-of-type. Preserve selectors and specificity. */

.areas-copy>p:last-of-type {
  font-size: 20px;
  line-height: 1.38;
  margin-top: 10px;
}

/* Responsive component styling for .area-list. Preserve selectors and specificity. */

.area-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: space-between;
}

/* Responsive component styling for .area-list li. Preserve selectors and specificity. */

.area-list li {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 9px 15px;
  font-size: 18px;
  font-weight: 600;
  background: var(--color-white);
  border-radius: 30px;
  box-shadow: var(--shadow-card);
}

/* Responsive component styling for .area-list .icon. Preserve selectors and specificity. */

.area-list .icon {
  width: 25px;
  height: 25px;
  color: var(--color-blue);
}

/* Responsive component styling for .map-panel. Preserve selectors and specificity. */

.map-panel {
  position: relative;
  height: auto;
  min-height: 280px;
  border: 8px solid var(--color-white);
  box-shadow: var(--shadow-card);
  border-radius: 9px;
  overflow: hidden;
}

/* Responsive component styling for .map-panel>img. Preserve selectors and specificity. */

.map-panel>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .65;
}

/* Responsive component styling for .map-label. Preserve selectors and specificity. */

.map-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 19px;
  padding-top: 10px;
}

/* Responsive component styling for .map-label .icon. Preserve selectors and specificity. */

.map-label .icon {
  width: 54px;
  height: 65px;
  fill: var(--color-blue);
  stroke: var(--color-white);
  stroke-width: 1.3;
}

/* Responsive component styling for .map-label strong. Preserve selectors and specificity. */

.map-label strong {
  font-size: 24px;
}

/* Responsive component styling for .reviews. Preserve selectors and specificity. */

.reviews {
  height: auto;
  padding-bottom: 28px;
  padding-top: 5px;
}

/* Responsive component styling for .reviews h2. Preserve selectors and specificity. */

.reviews h2 {
  font-size: 37px;
  line-height: 1.15;
  margin-top: 10px;
}

/* Responsive component styling for .review-grid. Preserve selectors and specificity. */

.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 18px;
}

/* Responsive component styling for .review-card. Preserve selectors and specificity. */

.review-card {
  display: flex;
  align-items: flex-start;
  gap: 23px;
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 12px 19px;
  min-height: 186px;
  box-shadow: var(--shadow-card);
}

/* Responsive component styling for .review-card>img. Preserve selectors and specificity. */

.review-card>img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Responsive component styling for .stars. Preserve selectors and specificity. */

.stars {
  color: var(--color-star);
  font-size: 22px;
  letter-spacing: 2px;
  line-height: 1.1;
}

/* Responsive component styling for .review-card blockquote. Preserve selectors and specificity. */

.review-card blockquote {
  font-size: 17px;
  line-height: 1.42;
  color: var(--color-copy);
  margin-top: 4px;
}

/* Responsive component styling for .review-card figcaption>p. Preserve selectors and specificity. */

.review-card figcaption>p {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
  margin-top: 7px;
}

/* Responsive component styling for .faq. Preserve selectors and specificity. */

.faq {
  height: auto;
  padding-top: 8px;
  padding-bottom: 28px;
}

/* Responsive component styling for .faq-grid. Preserve selectors and specificity. */

.faq-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
  margin-top: 20px;
}

/* Responsive component styling for .faq-card. Preserve selectors and specificity. */

.faq-card {
  border: 1px solid var(--color-line);
  border-radius: 7px;
  padding: 14px 19px 17px;
  min-height: 152px;
  box-shadow: var(--shadow-card);
}

/* Responsive component styling for .faq-card h3. Preserve selectors and specificity. */

.faq-card h3 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  font-size: 17px;
  letter-spacing: -.25px;
  line-height: 1.3;
}

/* Responsive component styling for .faq-card h3 .icon. Preserve selectors and specificity. */

.faq-card h3 .icon {
  color: var(--color-blue);
  width: 17px;
  height: 17px;
}

/* Responsive component styling for .faq-card p. Preserve selectors and specificity. */

.faq-card p {
  font-size: 17px;
  line-height: 1.45;
  margin-top: 13px;
}

/* Responsive component styling for .final-cta. Preserve selectors and specificity. */

.final-cta {
  height: auto;
  padding-bottom: 24px;
  background: linear-gradient(var(--color-white),var(--color-soft));
}

/* Responsive component styling for .cta-inner. Preserve selectors and specificity. */

.cta-inner {
  max-width: 1380px;
  margin: auto;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 29px;
}

/* Responsive component styling for .cta-inner>img. Preserve selectors and specificity. */

.cta-inner>img {
  width: 204px;
  height: 112px;
  object-fit: cover;
  border-radius: 10px;
}

/* Responsive component styling for .cta-copy. Preserve selectors and specificity. */

.cta-copy {
  flex: 1;
}

/* Responsive component styling for .cta-copy h2. Preserve selectors and specificity. */

.cta-copy h2 {
  font-size: 28px;
  line-height: 1.2;
}

/* Responsive component styling for .cta-copy p. Preserve selectors and specificity. */

.cta-copy p {
  font-size: 17px;
  line-height: 1.45;
  margin-top: 7px;
}

/* Responsive component styling for .cta-buttons. Preserve selectors and specificity. */

.cta-buttons {
  display: flex;
  gap: 16px;
}

/* Responsive component styling for .cta-buttons .button. Preserve selectors and specificity. */

.cta-buttons .button {
  min-height: 75px;
  padding: 17px 24px;
  font-size: 22px;
  gap: 8px;
}

/* Responsive component styling for .cta-buttons .button .icon. Preserve selectors and specificity. */

.cta-buttons .button .icon {
  width: 22px;
}

/* Responsive component styling for .cta-buttons .button .arrow. Preserve selectors and specificity. */

.cta-buttons .button .arrow {
  width: 14px;
}

/* Responsive component styling for .site-footer. Preserve selectors and specificity. */

.site-footer {
  height: auto;
  padding-bottom: 24px;
  background: var(--color-white);
  padding-top: 27px;
}

/* Responsive component styling for .footer-grid. Preserve selectors and specificity. */

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1.45fr) minmax(0,1.4fr);
  gap: 48px;
  min-height: 245px;
}

/* Responsive component styling for .footer-brand .brand. Preserve selectors and specificity. */

.footer-brand .brand {
  font-size: 22px;
}

/* Responsive component styling for .footer-brand p. Preserve selectors and specificity. */

.footer-brand p {
  margin-top: 17px;
  font-size: 17px;
  line-height: 1.5;
}

.footer-brand .footer-social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  color: var(--color-ink);
}

.footer-social a,
.footer-social span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 32px;
  color: inherit;
  text-decoration: none;
}

.footer-social .social-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
  stroke: none;
}

.footer-social .social-icon-outline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-social .social-icon-dot {
  fill: currentColor;
  stroke: none;
}

/* Responsive component styling for .footer-grid h2. Preserve selectors and specificity. */

.footer-grid h2 {
  font-size: 17px;
  margin: 3px 0 14px;
  letter-spacing: 0;
}

/* Responsive component styling for .footer-grid ul. Preserve selectors and specificity. */

.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-copy);
}

/* Responsive component styling for .footer-grid ul a,.footer-grid ul button. Preserve selectors and specificity. */

.footer-grid ul a,.footer-grid ul button {
  min-height: 0;
  display: inline-block;
}

/* Responsive component styling for .footer-grid button. Preserve selectors and specificity. */

.footer-grid button {
  background: none;
  border: 0;
  color: inherit;
  padding: 0;
  text-align: left;
}

/* Responsive component styling for .footer-grid a:hover,.footer-grid button:hover; pointer hover feedback paired with the base component. Preserve selectors and specificity. */

.footer-grid a:hover,.footer-grid button:hover {
  color: var(--color-blue);
}

/* Responsive component styling for .footer-contact .phone-link. Preserve selectors and specificity. */

.footer-contact .phone-link {
  font-size: 22px;
  margin: 0 0 19px;
}

/* Responsive component styling for .footer-contact .phone-link .icon. Preserve selectors and specificity. */

.footer-contact .phone-link .icon {
  width: 33px;
  height: 33px;
}

/* Responsive component styling for .footer-contact>.button. Preserve selectors and specificity. */

.footer-contact>.button {
  min-height: 67px;
  font-size: 22px;
  padding-inline: 23px;
  gap: 8px;
}

/* Responsive component styling for .footer-contact>.button:hover; pointer hover feedback paired with the base component. Preserve selectors and specificity. */

.footer-contact>.button:hover {
  color: var(--color-white);
}

/* Responsive component styling for .footer-bottom. Preserve selectors and specificity. */

.footer-bottom {
  border-top: 1px solid var(--color-line);
  padding-top: 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--color-copy);
}

/* Responsive component styling for .footer-bottom>div. Preserve selectors and specificity. */

.footer-bottom>div {
  display: flex;
  align-items: center;
  gap: 17px;
}

/* Responsive component styling for .footer-bottom button. Preserve selectors and specificity. */

.footer-bottom button {
  min-height: 44px;
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  font-size: 14px;
}

/* Responsive component styling for .footer-bottom button:hover; pointer hover feedback paired with the base component. Preserve selectors and specificity. */

.footer-bottom button:hover {
  color: var(--color-blue);
}

/* Responsive component styling for dialog. Preserve selectors and specificity. */

dialog {
  border: 1px solid var(--color-line);
  border-radius: 18px;
  padding: 44px;
  max-width: 620px;
  width: calc(100% - 40px);
  color: var(--color-ink);
  background: var(--color-white);
  box-shadow: var(--shadow-dialog);
}

/* Responsive component styling for dialog::backdrop. Preserve selectors and specificity. */

dialog::backdrop {
  background: var(--color-overlay);
}

/* Responsive component styling for dialog .dialog-close. Preserve selectors and specificity. */

dialog .dialog-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--color-soft);
  border-radius: 50%;
  position: absolute;
  right: 12px;
  top: 12px;
}

/* Responsive component styling for dialog h2. Preserve selectors and specificity. */

dialog h2 {
  font-size: 32px;
  margin: 22px 0 15px;
}

/* Responsive component styling for dialog #dialog-copy. Preserve selectors and specificity. */

dialog #dialog-copy {
  font-size: 19px;
  line-height: 1.6;
}

/* Responsive component styling for dialog .button. Preserve selectors and specificity. */

dialog .button {
  margin-top: 25px;
  font-size: 19px;
  min-height: 58px;
}

/* Compact desktop retains the composition without shrinking readable text. */

/* Breakpoint/conditional rules: retain thresholds and component behavior. */

@media (min-width:1200px) and (max-width:1399px) {
  /* Color/theme configuration. Preserve selectors and specificity. */

  :root {
    /* COLOR/STRUCTURE ROLE: --gutter — STRUCTURAL / FIXED. responsive page-side spacing; preserve all base/media/scope variants, never recolor or change per Color Preferences. Definition: 32px; scope: :root; condition: @media (min-width:1100px) and (max-width:1399px). Structural value: unchanged during recoloring. See COLOR-SYSTEM.md for consumers and preference mapping. */
    --gutter: 32px;
  }

  /* Responsive component styling for .header-inner. Preserve selectors and specificity. */

  .header-inner {
    gap: 18px;
    padding-inline: 24px;
  }

  /* Responsive component styling for .desktop-nav. Preserve selectors and specificity. */

  .desktop-nav {
    gap: 22px;
  }

  /* Responsive component styling for .brand. Preserve selectors and specificity. */

  .brand {
    font-size: 18px;
    gap: 8px;
  }

  /* Responsive component styling for .brand img. Preserve selectors and specificity. */

  .brand img {
    width: 50px;
    height: 50px;
  }

  /* Responsive component styling for .header-actions .phone-link. Preserve selectors and specificity. */

  .header-actions .phone-link {
    display: none;
  }

  /* Responsive component styling for .hero-copy. Preserve selectors and specificity. */

  .hero-copy {
    padding-left: 40px;
    width: auto;
    max-width: 570px;
  }

  /* Responsive component styling for .hero h1. Preserve selectors and specificity. */

  .hero h1 {
    font-size: 52px;
  }

  /* Responsive component styling for .hero-button. Preserve selectors and specificity. */

  .hero-button {
    width: auto;
    max-width: 100%;
  }

  /* Responsive component styling for .hero-benefits. Preserve selectors and specificity. */

  .hero-benefits {
    width: 410px;
  }

  /* Responsive component styling for .section-heading h2. Preserve selectors and specificity. */

  .section-heading h2 {
    font-size: 34px;
  }

  /* Responsive component styling for .service-grid. Preserve selectors and specificity. */

  .service-grid {
    gap: 18px;
  }

  /* Responsive component styling for .service-body. Preserve selectors and specificity. */

  .service-body {
    padding-inline: 15px;
  }

  /* Responsive component styling for .service-body h3. Preserve selectors and specificity. */

  .service-body h3 {
    font-size: 19px;
  }

  /* Responsive component styling for .service-body p. Preserve selectors and specificity. */

  .service-body p {
    font-size: 17px;
  }

  /* Responsive component styling for .about-inner. Preserve selectors and specificity. */

  .about-inner {
    gap: 30px;
    padding-right: 32px;
  }

  /* Responsive component styling for .about h2. Preserve selectors and specificity. */

  .about h2 {
    font-size: 32px;
  }

  /* Responsive component styling for .about-copy>p:last-child. Preserve selectors and specificity. */

  .about-copy>p:last-child {
    font-size: 17px;
  }

  /* Responsive component styling for .benefit. Preserve selectors and specificity. */

  .benefit {
    padding-inline: 20px;
  }

  /* Responsive component styling for .benefit h3. Preserve selectors and specificity. */

  .benefit h3 {
    font-size: 19px;
  }

  /* Responsive component styling for .benefit p. Preserve selectors and specificity. */

  .benefit p {
    font-size: 17px;
  }

  /* Responsive component styling for .areas-inner. Preserve selectors and specificity. */

  .areas-inner {
    gap: 26px;
  }

  /* Responsive component styling for .areas h2. Preserve selectors and specificity. */

  .areas h2 {
    font-size: 32px;
  }

  /* Responsive component styling for .areas-copy>p:last-of-type. Preserve selectors and specificity. */

  .areas-copy>p:last-of-type {
    font-size: 18px;
  }

  /* Responsive component styling for .area-list. Preserve selectors and specificity. */

  .area-list {
    gap: 8px;
  }

  /* Responsive component styling for .area-list li. Preserve selectors and specificity. */

  .area-list li {
    gap: 8px;
    font-size: 16px;
    padding-inline: 12px;
  }

  /* Responsive component styling for .review-card. Preserve selectors and specificity. */

  .review-card {
    gap: 17px;
    padding-inline: 15px;
  }

  /* Responsive component styling for .review-card>img. Preserve selectors and specificity. */

  .review-card>img {
    width: 105px;
    height: 105px;
  }

  /* Responsive component styling for .review-card blockquote. Preserve selectors and specificity. */

  .review-card blockquote {
    font-size: 16px;
  }

  /* Responsive component styling for .faq-card. Preserve selectors and specificity. */

  .faq-card {
    padding-inline: 14px;
  }

  /* Responsive component styling for .faq-card h3,.faq-card p. Preserve selectors and specificity. */

  .faq-card h3,.faq-card p {
    font-size: 16px;
  }

  /* Responsive component styling for .cta-inner. Preserve selectors and specificity. */

  .cta-inner {
    padding-inline: 24px;
    gap: 20px;
  }

  /* Responsive component styling for .cta-inner>img. Preserve selectors and specificity. */

  .cta-inner>img {
    width: 150px;
  }

  /* Responsive component styling for .cta-copy h2. Preserve selectors and specificity. */

  .cta-copy h2 {
    font-size: 24px;
  }

  /* Responsive component styling for .cta-copy p. Preserve selectors and specificity. */

  .cta-copy p {
    font-size: 15px;
  }

  /* Responsive component styling for .cta-buttons .button. Preserve selectors and specificity. */

  .cta-buttons .button {
    font-size: 18px;
    padding-inline: 17px;
    gap: 5px;
  }

  /* Responsive component styling for .footer-grid. Preserve selectors and specificity. */

  .footer-grid {
    gap: 28px;
  }

  /* Responsive component styling for .footer-brand .brand. Preserve selectors and specificity. */

  .footer-brand .brand {
    font-size: 19px;
  }

  /* Responsive component styling for .footer-brand p. Preserve selectors and specificity. */

  .footer-brand p {
    font-size: 16px;
  }

  /* Responsive component styling for .footer-contact .phone-link. Preserve selectors and specificity. */

  .footer-contact .phone-link {
    font-size: 19px;
  }

  /* Responsive component styling for .footer-contact>.button. Preserve selectors and specificity. */

  .footer-contact>.button {
    font-size: 18px;
    padding-inline: 15px;
  }
}

/* Tablet layouts use natural section heights and two-column card grids. */

/* Breakpoint/conditional rules: retain thresholds and component behavior. */

@media (max-width:1199px) {
  /* Color/theme configuration. Preserve selectors and specificity. */

  :root {
    /* COLOR/STRUCTURE ROLE: --gutter — STRUCTURAL / FIXED. responsive page-side spacing; preserve all base/media/scope variants, never recolor or change per Color Preferences. Definition: 30px; scope: :root; condition: @media (max-width:1099px). Structural value: unchanged during recoloring. See COLOR-SYSTEM.md for consumers and preference mapping. */
    --gutter: 30px;
  }

  /* Responsive component styling for .site-header. Preserve selectors and specificity. */

  .site-header {
    height: 84px;
  }

  /* Responsive component styling for .header-inner. Preserve selectors and specificity. */

  .header-inner {
    padding-inline: 26px;
    gap: 16px;
  }

  /* Responsive component styling for .brand. Preserve selectors and specificity. */

  .brand {
    font-size: 18px;
    gap: 9px;
  }

  /* Responsive component styling for .brand img. Preserve selectors and specificity. */

  .brand img {
    width: 50px;
    height: 50px;
  }

  /* Responsive component styling for .desktop-nav. Preserve selectors and specificity. */

  .desktop-nav {
    display: none;
  }

  /* Responsive component styling for .header-actions. Preserve selectors and specificity. */

  .header-actions {
    margin-left: auto;
  }

  /* Responsive component styling for .header-actions .phone-link. Preserve selectors and specificity. */

  .header-actions .phone-link {
    display: none;
  }

  /* Responsive component styling for .menu-toggle. Preserve selectors and specificity. */

  .menu-toggle {
    display: flex;
  }

  /* Responsive component styling for .hero. Preserve selectors and specificity. */

  .hero {
    height: auto;
  }

  /* Responsive component styling for .hero-inner. Preserve selectors and specificity. */

  .hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 30px;
    min-height: 0;
    height: auto;
    padding: 38px 30px;
  }

  /* Responsive component styling for .hero-copy. Preserve selectors and specificity. */

  .hero-copy {
    width: auto;
    padding: 0;
  }

  /* Responsive component styling for .hero h1. Preserve selectors and specificity. */

  .hero h1 {
    font-size: 45px;
    line-height: 1.12;
  }

  /* Responsive component styling for .hero .eyebrow. Preserve selectors and specificity. */

  .hero .eyebrow {
    font-size: 11px;
    letter-spacing: 1.6px;
  }

  /* Responsive component styling for .hero-button. Preserve selectors and specificity. */

  .hero-button {
    width: 100%;
    font-size: 26px;
    min-height: 74px;
  }

  /* Responsive component styling for .hero-button .icon. Preserve selectors and specificity. */

  .hero-button .icon {
    width: 28px;
    height: 28px;
  }

  /* Responsive component styling for .hero-benefits. Preserve selectors and specificity. */

  .hero-benefits {
    width: 100%;
    gap: 10px;
    margin-top: 30px;
  }

  /* Responsive component styling for .hero-benefits span. Preserve selectors and specificity. */

  .hero-benefits span {
    font-size: 13px;
  }

  /* Responsive component styling for .hero-benefits .icon. Preserve selectors and specificity. */

  .hero-benefits .icon {
    width: 30px;
    height: 30px;
  }

  /* Responsive component styling for .hero-photo. Preserve selectors and specificity. */

  .hero-photo {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: 430px;
    border-radius: 12px;
    mask-image: none;
    object-position: 35% center;
  }

  /* Responsive component styling for .brands. Preserve selectors and specificity. */

  .brands {
    height: auto;
    padding: 25px 0;
  }

  /* Responsive component styling for .brand-logos. Preserve selectors and specificity. */

  .brand-logos {
    gap: 25px;
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Responsive component styling for .brand-logos img. Preserve selectors and specificity. */

  .brand-logos img {
    max-height: 42px;
    max-width: 155px;
  }

  /* Responsive component styling for .brands p. Preserve selectors and specificity. */

  .brands p {
    font-size: 15px;
    line-height: 1.5;
    margin-top: 22px;
  }

  /* Responsive component styling for .services. Preserve selectors and specificity. */

  .services {
    height: auto;
    padding: 45px 0;
  }

  /* Responsive component styling for .section-heading h2. Preserve selectors and specificity. */

  .section-heading h2 {
    font-size: 32px;
  }

  /* Responsive component styling for .section-heading>p:last-child. Preserve selectors and specificity. */

  .section-heading>p:last-child {
    font-size: 17px;
    margin-bottom: 28px;
  }

  /* Responsive component styling for .desktop-only. Preserve selectors and specificity. */

  .desktop-only {
    display: none;
  }

  /* Responsive component styling for .service-grid. Preserve selectors and specificity. */

  .service-grid {
    gap: 24px;
  }

  .service-card {
    flex-basis: calc((100% - 24px) / 2);
    width: calc((100% - 24px) / 2);
    max-width: calc((100% - 24px) / 2);
  }

  .home-page .service-card {
    flex-basis: calc((100% - 24px) / 2);
    width: calc((100% - 24px) / 2);
    max-width: calc((100% - 24px) / 2);
  }

  /* Responsive component styling for .service-card,.service-card:nth-child(5). Preserve selectors and specificity. */

  .service-card,.service-card:nth-child(5) {
    grid-column: auto;
    min-height: 355px;
  }

  /* Responsive component styling for .service-card:last-child. Preserve selectors and specificity. */

  .service-card:last-child {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
  }

  /* Responsive component styling for .service-card>img. Preserve selectors and specificity. */

  .service-card>img {
    height: auto;
    aspect-ratio: 4/3;
  }

  /* Responsive component styling for .service-body. Preserve selectors and specificity. */

  .service-body {
    padding: 18px 22px 12px;
  }

  /* Responsive component styling for .service-body p. Preserve selectors and specificity. */

  .service-body p {
    font-size: 18px;
  }

  /* Responsive component styling for .service-body h3. Preserve selectors and specificity. */

  .service-body h3 {
    font-size: 22px;
  }

  /* Responsive component styling for .about. Preserve selectors and specificity. */

  .about {
    height: auto;
  }

  /* Responsive component styling for .about-inner. Preserve selectors and specificity. */

  .about-inner {
    grid-template-columns: 43% 1fr;
    padding: 0 30px 0 0;
    gap: 28px;
  }

  /* Responsive component styling for .about-inner>img. Preserve selectors and specificity. */

  .about-inner>img {
    height: auto;
    aspect-ratio: 2/1;
    min-height: 0;
  }

  /* Responsive component styling for .about-copy. Preserve selectors and specificity. */

  .about-copy {
    padding: 25px 0;
  }

  /* Responsive component styling for .about h2. Preserve selectors and specificity. */

  .about h2 {
    font-size: 30px;
  }

  /* Responsive component styling for .about-copy>p:last-child. Preserve selectors and specificity. */

  .about-copy>p:last-child {
    font-size: 17px;
  }

  /* Responsive component styling for .benefits. Preserve selectors and specificity. */

  .benefits {
    height: auto;
    padding: 35px 0;
  }

  /* Responsive component styling for .benefits-grid. Preserve selectors and specificity. */

  .benefits-grid {
    grid-template-columns: repeat(2,1fr);
    row-gap: 36px;
  }

  /* Responsive component styling for .benefit+.benefit::before. Preserve selectors and specificity. */

  .benefit+.benefit::before {
    display: none;
  }

  /* Responsive component styling for .benefit p. Preserve selectors and specificity. */

  .benefit p {
    max-width: 310px;
    margin-inline: auto;
  }

  /* Responsive component styling for .areas. Preserve selectors and specificity. */

  .areas {
    height: auto;
    padding: 35px 0;
  }

  /* Responsive component styling for .areas-inner. Preserve selectors and specificity. */

  .areas-inner {
    height: auto;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }

  /* Responsive component styling for .areas h2. Preserve selectors and specificity. */

  .areas h2 {
    font-size: 29px;
  }

  /* Responsive component styling for .areas-copy>p:last-of-type. Preserve selectors and specificity. */

  .areas-copy>p:last-of-type {
    font-size: 17px;
  }

  /* Responsive component styling for .area-list. Preserve selectors and specificity. */

  .area-list {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
  }

  /* Responsive component styling for .area-list li. Preserve selectors and specificity. */

  .area-list li {
    font-size: 15px;
    gap: 7px;
  }

  /* Responsive component styling for .map-panel. Preserve selectors and specificity. */

  .map-panel {
    height: 100%;
    min-height: 340px;
  }

  /* Responsive component styling for .map-label strong. Preserve selectors and specificity. */

  .map-label strong {
    font-size: 20px;
  }

  /* Responsive component styling for .reviews. Preserve selectors and specificity. */

  .reviews {
    height: auto;
    padding: 35px 0 20px;
  }

  /* Responsive component styling for .reviews h2. Preserve selectors and specificity. */

  .reviews h2 {
    font-size: 32px;
  }

  /* Responsive component styling for .review-grid. Preserve selectors and specificity. */

  .review-grid {
    gap: 20px;
  }

  /* Responsive component styling for .review-card. Preserve selectors and specificity. */

  .review-card {
    gap: 14px;
    padding: 18px;
  }

  /* Responsive component styling for .review-card>img. Preserve selectors and specificity. */

  .review-card>img {
    width: 75px;
    height: 75px;
  }

  /* Responsive component styling for .review-card blockquote. Preserve selectors and specificity. */

  .review-card blockquote {
    font-size: 16px;
  }

  /* Responsive component styling for .review-card figcaption>p. Preserve selectors and specificity. */

  .review-card figcaption>p {
    font-size: 14px;
  }

  /* Responsive component styling for .faq. Preserve selectors and specificity. */

  .faq {
    height: auto;
    padding: 20px 0 30px;
  }

  /* Responsive component styling for .faq-grid. Preserve selectors and specificity. */

  .faq-grid {
    gap: 15px;
  }

  /* Responsive component styling for .faq-card. Preserve selectors and specificity. */

  .faq-card {
    padding: 17px;
  }

  /* Responsive component styling for .faq-card h3,.faq-card p. Preserve selectors and specificity. */

  .faq-card h3,.faq-card p {
    font-size: 16px;
  }

  /* Responsive component styling for .final-cta. Preserve selectors and specificity. */

  .final-cta {
    height: auto;
    padding: 25px 30px;
  }

  /* Responsive component styling for .cta-inner. Preserve selectors and specificity. */

  .cta-inner {
    flex-wrap: wrap;
    gap: 20px;
  }

  /* Responsive component styling for .cta-inner>img. Preserve selectors and specificity. */

  .cta-inner>img {
    width: 160px;
    height: 100px;
  }

  /* Responsive component styling for .cta-copy h2. Preserve selectors and specificity. */

  .cta-copy h2 {
    font-size: 26px;
  }

  /* Responsive component styling for .cta-copy p. Preserve selectors and specificity. */

  .cta-copy p {
    font-size: 16px;
  }

  /* Responsive component styling for .cta-buttons. Preserve selectors and specificity. */

  .cta-buttons {
    justify-content: center;
    width: 100%;
  }

  /* Responsive component styling for .cta-buttons .button. Preserve selectors and specificity. */

  .cta-buttons .button {
    font-size: 20px;
    min-height: 60px;
  }

  /* Responsive component styling for .site-footer. Preserve selectors and specificity. */

  .site-footer {
    height: auto;
    padding: 35px 0 15px;
  }

  /* Responsive component styling for .footer-grid. Preserve selectors and specificity. */

  .footer-grid {
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
  }

  /* Responsive component styling for .footer-brand. Preserve selectors and specificity. */

  .footer-brand {
    grid-column: span 2;
    max-width: 380px;
  }

  /* Responsive component styling for .footer-contact. Preserve selectors and specificity. */

  .footer-contact {
    grid-column: 3;
    grid-row: 1;
  }

  /* Responsive component styling for .footer-grid h2. Preserve selectors and specificity. */

  .footer-grid h2 {
    font-size: 18px;
  }

  /* Responsive component styling for .footer-grid li a,.footer-grid li button. Preserve selectors and specificity. */

  .footer-grid li a,.footer-grid li button {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Responsive component styling for .footer-grid li. Preserve selectors and specificity. */

  .footer-grid li {
    min-height: 34px;
  }

  /* Responsive component styling for .footer-contact>.button. Preserve selectors and specificity. */

  .footer-contact>.button {
    font-size: 17px;
    min-height: 56px;
    padding-inline: 17px;
  }

  /* Responsive component styling for .footer-contact .phone-link. Preserve selectors and specificity. */

  .footer-contact .phone-link {
    font-size: 18px;
  }

  /* Responsive component styling for .footer-bottom. Preserve selectors and specificity. */

  .footer-bottom {
    margin-top: 25px;
  }
}

/* Mobile preserves the hierarchy with comfortable touch targets. */

/* Breakpoint/conditional rules: retain thresholds and component behavior. */

@media (max-width:767px) {
  /* Color/theme configuration. Preserve selectors and specificity. */

  :root {
    /* COLOR/STRUCTURE ROLE: --gutter — STRUCTURAL / FIXED. responsive page-side spacing; preserve all base/media/scope variants, never recolor or change per Color Preferences. Definition: 22px; scope: :root; condition: @media (max-width:767px). Structural value: unchanged during recoloring. See COLOR-SYSTEM.md for consumers and preference mapping. */
    --gutter: 22px;
  }

  /* Responsive component styling for .site-header. Preserve selectors and specificity. */

  .site-header {
    height: 78px;
  }

  /* Responsive component styling for .header-inner. Preserve selectors and specificity. */

  .header-inner {
    padding-inline: 17px;
    gap: 10px;
  }

  /* Responsive component styling for .brand. Preserve selectors and specificity. */

  .brand {
    font-size: 16px;
    gap: 7px;
    max-width: 270px;
    min-width: 0;
    flex-shrink: 1;
  }

  /* Responsive component styling for .brand img. Preserve selectors and specificity. */

  .brand img {
    width: 44px;
    height: 44px;
  }

  /* Responsive component styling for .header-actions. Preserve selectors and specificity. */

  .header-actions {
    display: none;
  }

  /* Responsive component styling for .menu-toggle. Preserve selectors and specificity. */

  .menu-toggle {
    margin-left: auto;
  }

  /* Responsive component styling for .eyebrow. Preserve selectors and specificity. */

  .eyebrow {
    font-size: 11px;
    letter-spacing: 1.8px;
  }

  /* Responsive component styling for .hero-inner. Preserve selectors and specificity. */

  .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 32px 22px;
  }

  /* Responsive component styling for .hero-copy. Preserve selectors and specificity. */

  .hero-copy {
    text-align: left;
  }

  /* Responsive component styling for .hero h1. Preserve selectors and specificity. */

  .hero h1 {
    font-size: clamp(39px,10.4vw,58px);
    letter-spacing: -1.3px;
    margin-top: 18px;
  }

  /* Responsive component styling for .hero-button. Preserve selectors and specificity. */

  .hero-button {
    width: 100%;
    max-width: 430px;
    margin-top: 25px;
    min-height: 68px;
    font-size: 27px;
  }

  /* Responsive component styling for .hero-benefits. Preserve selectors and specificity. */

  .hero-benefits {
    margin-top: 30px;
    gap: 8px;
  }

  /* Responsive component styling for .hero-benefits>div. Preserve selectors and specificity. */

  .hero-benefits>div {
    gap: 11px;
  }

  /* Responsive component styling for .hero-benefits span. Preserve selectors and specificity. */

  .hero-benefits span {
    font-size: 12px;
  }

  /* Responsive component styling for .hero-benefits .icon. Preserve selectors and specificity. */

  .hero-benefits .icon {
    width: 29px;
    height: 29px;
  }

  /* Responsive component styling for .hero-photo. Preserve selectors and specificity. */

  .hero-photo {
    height: auto;
    aspect-ratio: 1.35;
    object-position: 35% center;
  }

  /* Responsive component styling for .brand-logos. Preserve selectors and specificity. */

  .brand-logos {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    justify-items: center;
    gap: 22px 16px;
  }

  /* Responsive component styling for .brand-logos img. Preserve selectors and specificity. */

  .brand-logos img {
    max-width: 100%;
    max-height: 34px;
  }

  /* Responsive component styling for .brands p. Preserve selectors and specificity. */

  .brands p {
    font-size: 13px;
  }

  /* Responsive component styling for .services. Preserve selectors and specificity. */

  .services {
    padding: 36px 0;
  }

  /* Responsive component styling for .section-heading h2. Preserve selectors and specificity. */

  .section-heading h2 {
    font-size: 29px;
    line-height: 1.18;
  }

  /* Responsive component styling for .section-heading>p:last-child. Preserve selectors and specificity. */

  .section-heading>p:last-child {
    font-size: 16px;
    line-height: 1.55;
    margin-top: 14px;
  }

  /* Responsive component styling for .service-grid. Preserve selectors and specificity. */

  .service-grid {
    gap: 22px;
  }

  .service-card {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }

  .home-page .service-card {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
  }

  /* Responsive component styling for .service-card,.service-card:last-child. Preserve selectors and specificity. */

  .service-card,.service-card:last-child {
    width: 100%;
    min-height: 0;
    grid-column: auto;
  }

  /* Responsive component styling for .service-card>img. Preserve selectors and specificity. */

  .service-card>img {
    height: auto;
    aspect-ratio: 2/1;
  }

  /* Responsive component styling for .service-body. Preserve selectors and specificity. */

  .service-body {
    padding: 20px 22px 14px;
  }

  /* Responsive component styling for .service-body h3. Preserve selectors and specificity. */

  .service-body h3 {
    font-size: 23px;
  }

  /* Responsive component styling for .service-body p. Preserve selectors and specificity. */

  .service-body p {
    font-size: 17px;
    line-height: 1.5;
    margin-top: 9px;
  }

  /* Responsive component styling for .text-link. Preserve selectors and specificity. */

  .text-link {
    margin-top: 10px;
    font-size: 17px;
  }

  /* Responsive component styling for .decoration. Preserve selectors and specificity. */

  .decoration {
    opacity: .4;
  }

  /* Responsive component styling for .about-inner. Preserve selectors and specificity. */

  .about-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
  }

  /* Responsive component styling for .about-inner>img. Preserve selectors and specificity. */

  .about-inner>img {
    height: auto;
    min-height: 0;
    aspect-ratio: 2/1;
  }

  /* Responsive component styling for .about-copy. Preserve selectors and specificity. */

  .about-copy {
    padding: 28px 22px 12px;
  }

  /* Responsive component styling for .about-copy .eyebrow. Preserve selectors and specificity. */

  .about-copy .eyebrow {
    font-size: 10px;
    letter-spacing: 1.6px;
  }

  /* Responsive component styling for .about h2. Preserve selectors and specificity. */

  .about h2 {
    font-size: 29px;
    margin-top: 13px;
  }

  /* Responsive component styling for .about-copy>p:last-child. Preserve selectors and specificity. */

  .about-copy>p:last-child {
    font-size: 17px;
    line-height: 1.6;
    margin-top: 16px;
  }

  /* Responsive component styling for .benefits. Preserve selectors and specificity. */

  .benefits {
    padding: 25px 0 35px;
  }

  /* Responsive component styling for .benefits-grid. Preserve selectors and specificity. */

  .benefits-grid {
    gap: 30px 14px;
  }

  /* Responsive component styling for .benefit. Preserve selectors and specificity. */

  .benefit {
    padding: 0;
  }

  /* Responsive component styling for .benefit>.icon. Preserve selectors and specificity. */

  .benefit>.icon {
    width: 43px;
    height: 43px;
  }

  /* Responsive component styling for .benefit h3. Preserve selectors and specificity. */

  .benefit h3 {
    font-size: 17px;
    font-weight: 600;
    margin-top: 12px;
  }

  /* Responsive component styling for .benefit p. Preserve selectors and specificity. */

  .benefit p {
    font-size: 14px;
    line-height: 1.5;
  }

  /* Responsive component styling for .areas. Preserve selectors and specificity. */

  .areas {
    padding: 28px 0;
  }

  /* Responsive component styling for .areas-inner. Preserve selectors and specificity. */

  .areas-inner {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  /* Responsive component styling for .areas-copy. Preserve selectors and specificity. */

  .areas-copy {
    padding-top: 0;
  }

  /* Responsive component styling for .areas h2. Preserve selectors and specificity. */

  .areas h2 {
    font-size: 29px;
  }

  /* Responsive component styling for .areas-copy>p:last-of-type. Preserve selectors and specificity. */

  .areas-copy>p:last-of-type {
    line-height: 1.6;
    margin-top: 16px;
  }

  /* Responsive component styling for .area-list. Preserve selectors and specificity. */

  .area-list {
    gap: 8px;
    justify-content: space-between;
  }

  /* Responsive component styling for .area-list li. Preserve selectors and specificity. */

  .area-list li {
    font-size: 12px;
    padding: 10px 9px;
    gap: 5px;
  }

  /* Responsive component styling for .area-list .icon. Preserve selectors and specificity. */

  .area-list .icon {
    width: 18px;
    height: 18px;
  }

  /* Responsive component styling for .map-panel. Preserve selectors and specificity. */

  .map-panel {
    min-height: 0;
    height: 245px;
  }

  /* Responsive component styling for .map-label strong. Preserve selectors and specificity. */

  .map-label strong {
    font-size: 19px;
  }

  /* Responsive component styling for .map-label .icon. Preserve selectors and specificity. */

  .map-label .icon {
    width: 45px;
    height: 54px;
  }

  /* Responsive component styling for .reviews. Preserve selectors and specificity. */

  .reviews {
    padding: 30px 0 20px;
  }

  /* Responsive component styling for .reviews h2. Preserve selectors and specificity. */

  .reviews h2 {
    font-size: 29px;
    line-height: 1.2;
    margin-top: 12px;
  }

  /* Responsive component styling for .review-grid. Preserve selectors and specificity. */

  .review-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 22px;
  }

  /* Responsive component styling for .review-card. Preserve selectors and specificity. */

  .review-card {
    gap: 15px;
    padding: 20px 16px;
  }

  /* Responsive component styling for .review-card>img. Preserve selectors and specificity. */

  .review-card>img {
    width: 65px;
    height: 65px;
  }

  /* Responsive component styling for .stars. Preserve selectors and specificity. */

  .stars {
    font-size: 18px;
  }

  /* Responsive component styling for .review-card blockquote. Preserve selectors and specificity. */

  .review-card blockquote {
    font-size: 15px;
    line-height: 1.55;
  }

  /* Responsive component styling for .review-card figcaption>p. Preserve selectors and specificity. */

  .review-card figcaption>p {
    font-size: 13px;
    margin-top: 12px;
  }

  /* Responsive component styling for .faq. Preserve selectors and specificity. */

  .faq {
    padding: 20px 0 28px;
  }

  /* Responsive component styling for .faq-grid. Preserve selectors and specificity. */

  .faq-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 18px;
  }

  /* Responsive component styling for .faq-card. Preserve selectors and specificity. */

  .faq-card {
    min-height: 0;
    padding: 20px;
  }

  /* Responsive component styling for .faq-card h3. Preserve selectors and specificity. */

  .faq-card h3 {
    font-size: 17px;
  }

  /* Responsive component styling for .faq-card p. Preserve selectors and specificity. */

  .faq-card p {
    font-size: 16px;
    line-height: 1.55;
  }

  /* Responsive component styling for .final-cta. Preserve selectors and specificity. */

  .final-cta {
    padding: 24px 22px;
  }

  /* Responsive component styling for .cta-inner. Preserve selectors and specificity. */

  .cta-inner {
    gap: 20px;
  }

  /* Responsive component styling for .cta-inner>img. Preserve selectors and specificity. */

  .cta-inner>img {
    width: 85px;
    height: 85px;
  }

  /* Responsive component styling for .cta-copy h2. Preserve selectors and specificity. */

  .cta-copy h2 {
    font-size: 23px;
  }

  /* Responsive component styling for .cta-copy p. Preserve selectors and specificity. */

  .cta-copy p {
    font-size: 14px;
    line-height: 1.5;
  }

  /* Responsive component styling for .cta-buttons. Preserve selectors and specificity. */

  .cta-buttons {
    flex-direction: column;
    gap: 12px;
  }

  /* Responsive component styling for .cta-buttons .button. Preserve selectors and specificity. */

  .cta-buttons .button {
    width: 100%;
    min-height: 58px;
    font-size: 21px;
  }

  /* Responsive component styling for .site-footer. Preserve selectors and specificity. */

  .site-footer {
    padding-top: 30px;
  }

  /* Responsive component styling for .footer-grid. Preserve selectors and specificity. */

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 22px;
  }

  /* Responsive component styling for .footer-brand. Preserve selectors and specificity. */

  .footer-brand {
    grid-column: 1/-1;
    max-width: none;
  }

  /* Responsive component styling for .footer-brand .brand. Preserve selectors and specificity. */

  .footer-brand .brand {
    font-size: 20px;
  }

  /* Responsive component styling for .footer-brand .brand img. Preserve selectors and specificity. */

  .footer-brand .brand img {
    width: 54px;
    height: 54px;
  }

  /* Responsive component styling for .footer-brand p. Preserve selectors and specificity. */

  .footer-brand p {
    font-size: 16px;
    margin-top: 16px;
  }

  /* Responsive component styling for .footer-grid h2. Preserve selectors and specificity. */

  .footer-grid h2 {
    font-size: 17px;
  }

  /* Responsive component styling for .footer-grid ul. Preserve selectors and specificity. */

  .footer-grid ul {
    font-size: 14px;
  }

  /* Responsive component styling for .footer-contact. Preserve selectors and specificity. */

  .footer-contact {
    grid-column: auto;
    grid-row: auto;
  }

  /* Responsive component styling for .footer-contact .phone-link. Preserve selectors and specificity. */

  .footer-contact .phone-link {
    font-size: 15px;
    gap: 7px;
  }

  /* Responsive component styling for .footer-contact .phone-link .icon. Preserve selectors and specificity. */

  .footer-contact .phone-link .icon {
    width: 22px;
    height: 22px;
  }

  /* Responsive component styling for .footer-contact>.button. Preserve selectors and specificity. */

  .footer-contact>.button {
    font-size: 14px;
    padding-inline: 12px;
    gap: 5px;
    min-height: 50px;
  }

  /* Responsive component styling for .footer-contact>.button .icon. Preserve selectors and specificity. */

  .footer-contact>.button .icon {
    width: 18px;
    height: 18px;
  }

  /* Responsive component styling for .footer-contact>.button .arrow. Preserve selectors and specificity. */

  .footer-contact>.button .arrow {
    width: 12px;
  }

  /* Responsive component styling for .footer-bottom. Preserve selectors and specificity. */

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    font-size: 12px;
    padding-top: 20px;
  }

  /* Responsive component styling for .footer-bottom button. Preserve selectors and specificity. */

  .footer-bottom button {
    font-size: 12px;
  }

  /* Responsive component styling for dialog. Preserve selectors and specificity. */

  dialog {
    padding: 35px 24px 28px;
  }

  /* Responsive component styling for dialog h2. Preserve selectors and specificity. */

  dialog h2 {
    font-size: 27px;
  }

  /* Responsive component styling for dialog #dialog-copy. Preserve selectors and specificity. */

  dialog #dialog-copy {
    font-size: 17px;
  }
}

/* Reduced-motion accessibility: retain the user preference handling. */

@media (prefers-reduced-motion:reduce) {
  /* Responsive component styling for html. Preserve selectors and specificity. */

  html {
    scroll-behavior: auto;
  }

  /* Responsive component styling for *,*::before,*::after. Preserve selectors and specificity. */

  *,*::before,*::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Fine alignment measured against the 349 px reference at desktop scale. */

/* Breakpoint/conditional rules: retain thresholds and component behavior. */

@media (min-width:1100px) {
  /* Responsive component styling for .section-heading>p:last-child. Preserve selectors and specificity. */

  .section-heading>p:last-child {
    margin-bottom: 32px;
  }

  /* Responsive component styling for .service-card:nth-child(n/ ** /+5). Preserve selectors and specificity. */

  .service-card:nth-child(n/**/+5) {
    min-height: 367px;
  }
}

/* Breakpoint/conditional rules: retain thresholds and component behavior. */

@media (min-width:1400px) {
  /* Responsive component styling for .service-card:nth-child(n/ ** /+5). Preserve selectors and specificity. */

  .service-card:nth-child(n/**/+5) {
    position: static;
    width: auto;
    left: auto;
  }

  .home-page .service-card:nth-child(n/**/+5) {
    flex-basis: calc((100% - 48px) / 3);
    width: calc((100% - 48px) / 3);
    max-width: calc((100% - 48px) / 3);
  }

  /* Responsive component styling for .service-card:nth-child(5). Preserve selectors and specificity. */

  .service-card:nth-child(5) {
    left: auto;
  }

  /* Responsive component styling for .service-card:nth-child(6). Preserve selectors and specificity. */

  .service-card:nth-child(6) {
    left: auto;
  }

  /* Responsive component styling for .service-card:nth-child(7). Preserve selectors and specificity. */

  .service-card:nth-child(7) {
    left: auto;
  }

  /* Responsive component styling for .about-inner. Preserve selectors and specificity. */

  .about-inner {
    grid-template-columns: 41.8% 1fr;
    gap: 41px;
  }
}

/* Keep the existing brand strip inside compact desktop containers. */

/* Breakpoint/conditional rules: retain thresholds and component behavior. */

@media (min-width: 1100px) and (max-width: 1399px) {
  /* Responsive component styling for .brand-logos img. Preserve selectors and specificity. */

  .brand-logos img {
    min-width: 0;
  }
}

/* Preserve the opaque base gradient; only the hover layer fades in/out. */

/* Responsive component styling for .button. Preserve selectors and specificity. */

.button {
  position: relative;
  isolation: isolate;
}

/* Responsive component styling for .button--green::before. Preserve selectors and specificity. */

.button--green::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg,var(--button-green-gloss-strong) 0%,var(--button-green-gloss-soft) 42%,var(--button-green-gloss-clear) 43%,var(--button-green-gloss-clear) 100%),
    linear-gradient(180deg,var(--color-green) 0%,var(--color-green-dark) 45%,var(--button-green-gradient-bottom) 100%);
  box-shadow: var(--button-green-face-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}

/* Responsive component styling for .button--green:not(:disabled):not([aria-disabled=true]):not([aria-busy=true]):focus-visible::before; visible keyboard focus state; preserve visibility/disabled behavior controlled by HTML or JavaScript. Preserve selectors and specificity. */

.button--green:not(:disabled):not([aria-disabled=true]):not([aria-busy=true]):focus-visible::before {
  opacity: 1;
}

/* A transparent strip covers the lift plus the 1px border, retaining pointer contact. */

/* Responsive component styling for .button::after,.service-card::after,.hub-card::after,.hub-card > a::after. Preserve selectors and specificity. */

.button::after,.service-card::after,.hub-card::after,.hub-card > a::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(var(--hover-lift) + 2px);
  background: var(--styles-component-background-tone-05);
}

/* Responsive component styling for .service-card,.hub-card,.hub-card > a. Preserve selectors and specificity. */

.service-card,.hub-card,.hub-card > a {
  position: relative;
}

/* Clip the photographs, not the hover-retention strip or the card shadow. */

/* Responsive component styling for .service-card > img,.hub-card .hub-photo. Preserve selectors and specificity. */

.service-card > img,.hub-card .hub-photo {
  border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
}

/* Responsive component styling for .hub-card > a. Preserve selectors and specificity. */

.hub-card > a {
  border-radius: inherit;
}

/* Breakpoint/conditional rules: retain thresholds and component behavior. */

@media (hover:hover) and (pointer:fine) {
  /* Responsive component styling for .button:not(:disabled):not([aria-disabled=true]):not([aria-busy=true]):hover; pointer hover feedback paired with the base component; preserve visibility/disabled behavior controlled by HTML or JavaScript. Preserve selectors and specificity. */

  .button:not(:disabled):not([aria-disabled=true]):not([aria-busy=true]):hover {
    transform: translateY(calc(-1 * var(--hover-lift)));
  }

  /* Responsive component styling for .button--green:not(:disabled):not([aria-disabled=true]):not([aria-busy=true]):hover::before; pointer hover feedback paired with the base component; preserve visibility/disabled behavior controlled by HTML or JavaScript. Preserve selectors and specificity. */

  .button--green:not(:disabled):not([aria-disabled=true]):not([aria-busy=true]):hover::before {
    opacity: 1;
  }

  /* Responsive component styling for .button--blue:not(:disabled):not([aria-disabled=true]):not([aria-busy=true]):hover; pointer hover feedback paired with the base component; preserve visibility/disabled behavior controlled by HTML or JavaScript. Preserve selectors and specificity. */

  .button--blue:not(:disabled):not([aria-disabled=true]):not([aria-busy=true]):hover {
    background-color: var(--color-blue-hover);
  }

  /* Responsive component styling for .button:not(:disabled):not([aria-disabled=true]):not([aria-busy=true]):active; preserve visibility/disabled behavior controlled by HTML or JavaScript. Preserve selectors and specificity. */

  .button:not(:disabled):not([aria-disabled=true]):not([aria-busy=true]):active {
    transform: none;
  }

  /* Responsive component styling for .service-card:hover; pointer hover feedback paired with the base component. Preserve selectors and specificity. */

  .service-card:hover {
    transform: translateY(calc(-1 * var(--hover-lift)));
    box-shadow: 0 8px 24px var(--color-line);
  }
}

/* Responsive component styling for .button:is(:disabled,[aria-disabled=true],[aria-busy=true]); preserve visibility/disabled behavior controlled by HTML or JavaScript. Preserve selectors and specificity. */

.button:is(:disabled,[aria-disabled=true],[aria-busy=true]) {
  transform: none;
  transition: none;
}

/* Responsive component styling for .button:is(:disabled,[aria-disabled=true],[aria-busy=true])::before; preserve visibility/disabled behavior controlled by HTML or JavaScript. Preserve selectors and specificity. */

.button:is(:disabled,[aria-disabled=true],[aria-busy=true])::before {
  opacity: 0;
  transition: none;
}

/* Responsive component styling for .button:is(:disabled,[aria-disabled=true],[aria-busy=true])::after; preserve visibility/disabled behavior controlled by HTML or JavaScript. Preserve selectors and specificity. */

.button:is(:disabled,[aria-disabled=true],[aria-busy=true])::after {
  pointer-events: none;
}

/* Responsive component styling for :where(.desktop-nav a,[data-dropdown-toggle],.mobile-nav a,.text-link,.footer-grid a,.footer-bottom button,.prose a,.page-lead a,.pagination a):not(.button). Preserve selectors and specificity. */

:where(.desktop-nav a,[data-dropdown-toggle],.mobile-nav a,.text-link,.footer-grid a,.footer-bottom button,.prose a,.page-lead a,.pagination a):not(.button) {
  transition: color var(--transition),background-color var(--transition),border-color var(--transition),text-decoration-color var(--transition);
}

/* CTA transitions must not be replaced by the broader link rules above. */

/* Responsive component styling for .button. Preserve selectors and specificity. */

.button {
  transition: background-color var(--transition),color var(--transition),box-shadow var(--transition),transform var(--transition);
}

/* Responsive component styling for .dialog-close. Preserve selectors and specificity. */

.dialog-close {
  transition: background-color var(--transition),color var(--transition);
}

/* Responsive component styling for .dialog-close:hover; pointer hover feedback paired with the base component. Preserve selectors and specificity. */

.dialog-close:hover {
  background-color: var(--color-line);
}

/* Reduced-motion accessibility: retain the user preference handling. */

@media (prefers-reduced-motion:reduce) {
  /* Responsive component styling for .button:hover,.button:active,.service-card:hover,.hub-card:hover; pointer hover feedback paired with the base component. Preserve selectors and specificity. */

  .button:hover,.button:active,.service-card:hover,.hub-card:hover {
    transform: none !important;
  }
}

/* Overlap the button face so the retention area has no subpixel hit-test seam. */

/* Responsive component styling for .button::after. Preserve selectors and specificity. */

.button::after {
  top: 0;
  bottom: calc(-1 * (var(--hover-lift) + 2px));
  height: auto;
  border-radius: inherit;
}

/* The header's compact nav rule suppresses ordinary shadows. This green-only scope
   keeps the same shallow relief on header, mobile, hero, CTA, footer and dialog buttons. */
.site-shell .button.button--green {
  box-shadow: var(--button-green-raised-shadow);
}

/* Pressing lowers the visual underside on mouse and touch. Keep existing focus,
   hover-retention, disabled/busy and reduced-motion behavior unchanged. */
.button--green:not(:disabled):not([aria-disabled=true]):not([aria-busy=true]):active {
  transform: none;
  box-shadow: var(--button-green-pressed-shadow);
}

@media (min-width:1200px) {
  .home-page .services .container {
    max-width: 1080px;
  }
}

.home-page .service-card .text-link {
  width: 58px;
  min-height: 44px;
  justify-content: center;
  padding: 4px;
}

.home-page .service-card .text-link .icon {
  width: 49.5px;
  height: 27px;
  stroke-width: 1.35;
}

.service-map > img.service-map__photo, .inner-service-map > img.service-map__photo { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none; }