/* Hallmark · shape: Service Field Guide · genre: editorial · theme: brand · job: hire · hero: grounded photo split · nav: wordmark with direct call · footer: local contact directory · imagery: real photographs · signature: native service field guide · contrast: checked · fold: checked · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the field guide turns the service list into a useful selection instead of repeating generic cards. */
/* Hallmark · hero-review: fix · 2 findings · 2 resolved · finish-review: subagent · 1 finding · 1 resolved · gap: none */
/* Hallmark · dismissed 25 · the short attributed customer quotations are display objects, not narrow running prose */
/* Hallmark · answered F4 · the Qwen chat dialog has its own send action; site calls use the single shared button recipe */
/* Hallmark · waive 24b · three source-logo spacing values: 11px gap, 5px subtitle margin and 9px phone gap · Wallbanger requested the original live logo, so its exact spacing is preserved only within the brand lockup */
/* Hallmark · dismissed 58 · the generator detail page preserves six native closed FAQ answers; the count includes hidden answers */

/* Shared shell and actions. */
.header { position: relative; z-index: var(--z-sticky-nav); background: var(--color-paper); }
.nav-shell { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 88px; }
/* Original WB mark and wordmark from the live site; its colors stay logo-only. */
.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; color: var(--color-logo-ink); font-size: 17px; font-weight: 750; letter-spacing: -.035em; line-height: 1.2; text-decoration: none; }
.brand-mark { position: relative; display: grid; place-items: center; width: 44px; height: 44px; background: var(--color-logo-ink); color: var(--color-logo-paper); font-size: 18px; letter-spacing: -.08em; flex: none; }
.brand-mark > span { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: var(--color-logo-accent); }
.brand-name { display: block; }
.brand-name .wordmark { display: block; margin-top: 5px; font-size: 9px; font-weight: 550; letter-spacing: .22em; line-height: 1.3; }
#main-nav { display: flex; align-items: center; gap: var(--space-lg); }
#main-nav > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; text-decoration: none; }
#main-nav > a:not(.button):hover, #main-nav > a[aria-current="page"] { text-decoration: underline; text-underline-offset: .35em; }
.menu-toggle { display: none; align-items: center; justify-content: center; gap: var(--space-xs); min-width: 72px; min-height: 44px; padding: var(--space-xs) var(--space-sm); background: var(--color-clear); color: var(--color-ink); border: 1px solid var(--color-rule); border-radius: var(--radius-control); font-size: 14px; }
.menu-toggle svg { width: 20px; height: 20px; }
.button { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-lg); min-height: 52px; max-width: 100%; padding: var(--space-sm) var(--space-5); border: 1px solid var(--color-action); border-radius: var(--radius-control); background: var(--color-action); color: var(--color-reverse); font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1.4; text-align: center; text-decoration: none; }
.button svg, .text-link svg { width: 20px; height: 20px; }
.button:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); }
.button:active { transform: translateY(1px); }
.button--light { background: var(--color-paper); border-color: var(--color-paper); color: var(--color-ink); }
.button--light:hover { background: var(--color-accent); border-color: var(--color-accent); }
.button--outline { background: var(--color-clear); color: inherit; border-color: var(--color-rule); }
.button--outline:hover { color: var(--color-ink); background: var(--color-paper-2); border-color: var(--color-muted); }
.text-link { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1.5; text-decoration: underline; text-underline-offset: .24em; }
.text-link:hover { text-decoration-thickness: 2px; }
.button > span[aria-hidden], .text-link > span[aria-hidden] { display: inline-block; margin-left: var(--space-2xs); font-size: 19px; line-height: 1; }

/* First screen: the photograph and a direct route to Harvin. */
.hero { padding-block: var(--space-8); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(0, 1fr); align-items: center; gap: var(--gap-columns); }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); min-width: 0; padding-right: var(--space-xs); }
.hero-copy h1 { font-size: var(--text-display); letter-spacing: -.045em; line-height: .96; max-width: 10ch; }
.hero-copy > p { max-width: 36ch; font-size: var(--text-lead); line-height: 1.5; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.hero-image { position: relative; width: 100%; height: clamp(400px, 36vw, 480px); margin: 0; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-3); }
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; outline: 1px solid var(--color-image-rule); outline-offset: -1px; }
.hero-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-lg); font-size: 14px; line-height: 1.8; color: var(--color-muted); }
.hero-foot a { min-height: 28px; }

/* Shared editorial grammar for every page. */
.section { padding-block: var(--section-gap); }
.rule-top { border-top: 1px solid var(--color-rule); }
.split, .split-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: start; }
.split-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split > *, .split-wide > *, .section-heading > * { min-width: 0; }
.section-heading { margin-bottom: var(--space-8); align-items: end; }
.section-heading:not(.split):not(.split-wide) { display: flex; align-items: end; justify-content: space-between; gap: var(--gap-columns); }
.section-heading > p, .section-heading > .text-column { max-width: 47ch; }
.section-heading h2 { max-width: 16ch; }
.dark-section { background: var(--color-dark); color: var(--color-reverse); --color-rule: var(--color-dark-rule); --color-muted: var(--color-reverse-muted); --color-focus: var(--color-accent); }
.dark-section h1, .dark-section h2, .dark-section h3 { color: var(--color-reverse); }
.mint-section { background: var(--color-accent); color: var(--color-accent-ink); --color-muted: var(--color-mint-muted); --color-rule: var(--color-muted); }
.media { position: relative; width: 100%; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-3); }
.media img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid var(--color-image-rule); outline-offset: -1px; }
.media--portrait { aspect-ratio: 4 / 5; }
.media--wide { aspect-ratio: 16 / 10; }
img[src*="residential-premium"] { object-position: 50% 40%; }
img[src*="hero-electrician"] { object-position: 40% 50%; }
img[src*="generator-v3"] { object-position: 68% 65%; }
.page-intro { padding-block: var(--space-xl) var(--section-gap-s); }
.page-intro .breadcrumbs { margin-bottom: var(--space-8); }
.page-intro .page-title + .lead { margin-top: var(--space-8); }
.page-intro > .lead { margin-top: var(--space-8); }
.page-title { max-width: 17ch; font-size: var(--text-display-s); line-height: .98; }
.page-intro .split-wide { align-items: center; }
.page-intro .service-list { margin-top: var(--space-2xl); }
.page-intro--split .media { aspect-ratio: 1; }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); color: var(--color-muted); font-family: var(--font-body); font-size: 14px; line-height: 1.4; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.editorial-note { margin-top: var(--space-8); font-size: 14px; line-height: 1.65; color: var(--color-muted); }
.editorial-note > img, .editorial-note > a > img { max-width: 220px; }
.editorial-note figcaption { margin-top: var(--space-sm); }
.editorial-note.split-wide { align-items: center; }
.service-list { border-top: 1px solid var(--color-rule); }
.service-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(150px, .8fr); align-items: center; gap: var(--gap-columns); padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.service-row h3 { font-size: clamp(1.625rem, 2vw, 2rem); }
.service-row p { font-size: 16px; line-height: 1.6; }
.service-row > :last-child { justify-self: end; }
.split .service-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
.split .service-row > :last-child { justify-self: start; }
.stack.rule-top { padding-top: var(--space-lg); }
.fact-list { width: 100%; border-top: 1px solid var(--color-rule); }
.fact-list > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-lg); padding-block: var(--space-5); border-bottom: 1px solid var(--color-rule); }
.fact-list dt { font-size: 14px; color: var(--color-muted); }
.fact-list dd { font-size: 17px; }
.plain-list { width: 100%; padding: 0; list-style: none; }
.plain-list li { padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.plain-list li:first-child { border-top: 1px solid var(--color-rule); }
.plain-list li h3 { margin-bottom: var(--space-sm); }
.plain-list li p { max-width: 53ch; }
.town-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-columns); width: 100%; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.town-list li { padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); font-size: clamp(1.25rem, 1.9vw, 1.625rem); }
.contact-number { font-variant-numeric: tabular-nums; display: inline-block; font-family: var(--font-body); font-size: clamp(1.75rem, 4.4vw, 3.75rem); font-weight: 400; letter-spacing: -.05em; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
.contact-number:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.faq-list { width: 100%; border-top: 1px solid var(--color-rule); }
.faq-list details { border-bottom: 1px solid var(--color-rule); }
.faq-list summary { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); min-height: 76px; padding-block: var(--space-5); padding-right: var(--space-8); font-size: 18px; line-height: 1.45; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: var(--space-2xs); top: var(--space-5); font-size: 24px; font-weight: 400; line-height: 1.4; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { padding-bottom: var(--space-lg); padding-right: var(--space-8); font-size: 16px; line-height: 1.7; }
.quote { max-width: 100%; }
.quote blockquote { margin: 0; }
.quote blockquote p { max-width: 21ch; font-family: var(--font-display); font-size: clamp(2.5rem, 5.8vw, 5.5rem); font-weight: var(--display-weight); line-height: 1.08; letter-spacing: var(--tracking-display); text-wrap: balance; }
.quote-author { display: flex; flex-direction: column; gap: var(--space-2xs); margin-top: var(--space-8); font-family: var(--font-body); font-size: 14px; line-height: 1.5; }
.quote-author strong { font-weight: 550; }
.quote-author span { color: var(--color-muted); }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-xl); padding-top: var(--space-xl); width: 100%; }
.review-grid .quote blockquote p { font-size: clamp(2.25rem, 3.5vw, 3.5rem); }
.review-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); }
.review-copy-status { min-height: 1.65em; margin-top: 0; overflow-wrap: anywhere; }

/* Native, user-directed service field guide. */
.service-switcher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; min-width: 0; margin: 0 0 var(--space-lg); padding: 0; border: 0; border-block: 1px solid var(--color-rule); }
.service-option { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); align-content: center; min-height: 112px; padding: var(--space-lg) var(--space-5); cursor: pointer; }
.service-option + .service-option { border-left: 1px solid var(--color-rule); }
.service-option input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.service-option:has(input:checked), input:checked + .service-option, .service-option[aria-selected="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
.service-option:has(input:focus-visible), input:focus-visible + .service-option { outline: 2px solid var(--color-focus); outline-offset: -4px; }
.service-option:hover { background: var(--color-paper-2); }
.service-option:has(input:checked):hover { background: var(--color-accent); }
.service-option:has(input:checked) .service-option-note { color: var(--color-mint-muted); }
.service-number { grid-column: 1; grid-row: 1 / 3; padding-top: var(--space-2xs); font-size: 14px; font-variant-numeric: tabular-nums; }
.service-option > span:last-child { grid-column: 2; min-width: 0; }
.service-option-name { display: block; font-family: var(--font-body); font-size: 20px; line-height: 1.3; }
.service-option-note { display: block; margin-top: var(--space-2xs); font-size: 14px; color: var(--color-muted); }
.service-panels { min-width: 0; }
.service-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--gap-columns); }
.service-panel + .service-panel { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.js .service-panel + .service-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.service-panel-photo { position: relative; width: 100%; aspect-ratio: 1.16; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-3); }
.service-panel-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; outline: 1px solid var(--color-image-rule); outline-offset: -1px; }

.service-panel-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); padding-left: var(--space-lg); min-width: 0; }
.service-panel-copy h3, .service-panel-copy h2 { font-size: clamp(2.5rem, 4.2vw, 4rem); line-height: 1.05; max-width: 16ch; }
.service-panel-copy p { max-width: 45ch; }
.guide-note { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-lg); font-size: 14px; color: var(--color-muted); }

/* Home page compositions, each doing one different job. */
.owner-section { padding-block: var(--section-gap); border-top: 1px solid var(--color-rule); }
.owner-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--gap-columns); align-items: start; }
.owner-layout > div:first-child { max-width: 52ch; }
.owner-layout h2 { max-width: 15ch; }
.owner-layout p + p { margin-top: var(--space-lg); }
.owner-review { padding-left: var(--space-8); border-left: 1px solid var(--color-rule); }
.owner-review blockquote, .owner-review .quote blockquote p, .owner-review blockquote p { font-family: var(--font-display); font-size: clamp(2.5rem, 4vw, 4rem); letter-spacing: var(--tracking-display); line-height: 1.08; text-wrap: balance; }
.owner-review .quote-author { margin-top: var(--space-lg); }
.generator-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--gap-columns); }
.generator-layout > div { min-width: 0; }
.generator-layout .media { aspect-ratio: 1.28; }
.generator-layout h2 { max-width: 14ch; }
.generator-links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); width: 100%; }
.generator-links a { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); text-decoration: none; }
.generator-links a:first-child { border-top: 1px solid var(--color-rule); }
.generator-links a:hover { text-decoration: underline; }
.area-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--gap-columns); }
.area-title { max-width: 13ch; }
.area-layout > div { min-width: 0; }
.area-layout p { max-width: 45ch; }
.call-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: start; }
.call-layout h2 { max-width: 13ch; }
.call-topic { margin-block: var(--space-lg); font-size: var(--text-lead); line-height: 1.45; }
.call-details { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
.call-details p { max-width: 45ch; }
.footer { padding-block: var(--space-12) var(--space-8); background: var(--color-dark); color: var(--color-reverse); --color-rule: var(--color-dark-rule); --color-muted: var(--color-reverse-muted); --color-focus: var(--color-accent); }
.footer-top { display: flex; align-items: start; justify-content: space-between; gap: var(--gap-columns); padding-bottom: var(--space-8); }
.footer-top p { max-width: 45ch; margin-top: var(--space-md); font-size: 14px; color: var(--color-muted); }
.footer-nav { display: grid; grid-template-columns: repeat(3, auto); gap: var(--space-xs) var(--space-8); }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: 14px; color: var(--color-muted); }
.footer-bottom p { max-width: none; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.footer .brand { color: var(--color-logo-paper); }
.footer .brand-mark { background: var(--color-logo-paper); color: var(--color-logo-ink); }
.mobile-actions { display: none; }

/* Existing Qwen transport, with the same calm visual system. */
.demo-chat { position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: var(--z-modal); font-family: var(--font-body); }
.chat-launcher { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 52px; padding: var(--space-sm) var(--space-5); background: var(--color-ink); color: var(--color-reverse); border: 1px solid var(--color-reverse-muted); border-radius: var(--radius-control); font-size: 14px; box-shadow: var(--shadow-launcher); }
.chat-launcher:hover { background: var(--color-ink-2); }
.chat-launcher svg { width: 24px; height: 24px; }
.chat-dot { display: none; }
.chat-panel { position: absolute; right: 0; bottom: 66px; display: flex; flex-direction: column; width: min(420px, calc(100% + 220px)); height: min(680px, calc(var(--chat-viewport-height, 100dvh) - 114px)); max-height: calc(var(--chat-viewport-height, 100dvh) - 114px); background: var(--color-paper); color: var(--color-ink); border: 0; border-radius: var(--radius-dialog); overflow: hidden; box-shadow: var(--shadow-chat); }
.chat-panel-header { display: flex; align-items: center; justify-content: space-between; flex: none; gap: var(--space-sm); padding: var(--space-md) var(--space-5); background: var(--color-ink); color: var(--color-reverse); }
.chat-panel-header strong { display: block; font-size: 17px; font-weight: 550; line-height: 1.4; }
.chat-panel-header small { display: block; margin-top: var(--space-2xs); font-size: 14px; line-height: 1.5; color: var(--color-reverse-muted); }
.chat-close { display: grid; place-items: center; flex: none; min-width: 44px; min-height: 44px; padding: var(--space-xs); border: 0; border-radius: var(--radius-control); background: var(--color-clear); color: var(--color-reverse); font-size: 28px; line-height: 1; }
.chat-close:hover { background: var(--color-ink-2); }
.chat-messages { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: var(--space-sm); min-height: 76px; padding: var(--space-5); overflow-y: auto; overscroll-behavior: contain; }
.chat-message { flex: none; max-width: 96%; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-control); background: var(--color-paper-2); font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-message.user { align-self: flex-end; background: var(--color-ink); color: var(--color-reverse); }
.chat-message-draft { opacity: 1; }
.chat-suggestions { display: flex; flex-wrap: wrap; flex: none; gap: var(--space-xs); padding: 0 var(--space-md) var(--space-sm); }
.chat-suggestions button { min-height: 44px; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); font-size: 14px; line-height: 1.4; }
.chat-suggestions button:hover { background: var(--color-paper-2); }
.chat-form { display: flex; align-items: center; flex: none; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--color-rule); }
.chat-form input { flex: 1; min-width: 0; min-height: 48px; padding: var(--space-sm); border: 1px solid var(--color-muted); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: 16px; line-height: 1.4; }
.chat-form input::placeholder { color: var(--color-muted); opacity: 1; }
.chat-form input:focus-visible { outline-offset: -3px; }
.chat-form button { display: grid; place-items: center; flex: none; min-width: 48px; min-height: 48px; padding: var(--space-xs); border: 1px solid var(--color-ink); border-radius: var(--radius-control); background: var(--color-ink); color: var(--color-reverse); font-size: 24px; }
.chat-form button:hover { background: var(--color-ink-2); }
.demo-chat button:disabled { background: var(--color-paper-3); color: var(--color-muted); border-color: var(--color-rule); cursor: not-allowed; }
.chat-demo-note { flex: none; max-width: none; padding: 0 var(--space-md) var(--space-md); color: var(--color-muted); font-size: 14px; line-height: 1.5; }
.chat-demo-note a { text-decoration: underline; }
.chat-connection, .chat-progress, .chat-error { display: flex; align-items: center; justify-content: space-between; flex: none; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); border-top: 1px solid var(--color-rule); background: var(--color-paper-2); }
.chat-connection-text, .chat-status, .chat-error-text { min-width: 0; margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-muted); }
.chat-error { background: var(--color-error-paper); }
.chat-error-text { color: var(--color-error); }
.chat-connect-retry, .chat-question-retry, .chat-cancel { flex: none; min-height: 44px; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); font-size: 14px; line-height: 1.4; }
.chat-connect-retry:hover, .chat-question-retry:hover, .chat-cancel:hover { background: var(--color-paper-3); }
.demo-chat[data-busy="true"] .chat-suggestions, .demo-chat[data-busy="false"] .chat-progress { display: none; }
.chat-panel-header :focus-visible { outline-color: var(--color-accent); }

@media (prefers-reduced-motion: no-preference) and (min-width: 961px) {
  .header { opacity: 1; }
  .hero-copy h1 { animation: premium-enter 800ms var(--ease-out) 100ms both; }
  .hero-copy > p { animation: premium-enter 600ms var(--ease-out) 200ms both; }
  .hero-actions { animation: premium-enter 550ms var(--ease-out) 300ms both; }
  .button > span[aria-hidden], .text-link > span[aria-hidden] { transition: transform var(--dur-short) var(--ease-out); }
  .button:hover > span[aria-hidden], .text-link:hover > span[aria-hidden] { transform: translate(2px, -2px); }
}
@keyframes premium-enter { from { opacity: 1; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes premium-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1100px) {
  #main-nav { gap: var(--space-md); }
  #main-nav > a { font-size: 15px; }
  #main-nav .button { padding-inline: var(--space-md); }
  .hero-copy h1 { font-size: clamp(4.5rem, 8.4vw, 6.75rem); }
  .service-panel-copy { padding-left: 0; }
  .service-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(144px, .85fr); }
  .owner-review { padding-left: var(--space-lg); }
}
@media (max-width: 960px) {
  .nav-shell { flex-wrap: wrap; min-height: 88px; padding-block: var(--space-md); }
  .js .menu-toggle { display: inline-flex; }
  #main-nav { flex-wrap: wrap; width: 100%; padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
  .js #main-nav { display: none; }
  .js #main-nav.is-open { position: absolute; top: 100%; right: 0; left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-lg); padding: var(--space-5) var(--gutter) var(--space-lg); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
  #main-nav.is-open > .button { grid-column: 1 / -1; justify-self: start; margin-top: var(--space-xs); }
  .hero { padding-block: var(--space-lg) var(--space-8); }
  .hero-grid { gap: var(--space-8); }
  .hero-copy h1 { font-size: clamp(4rem, 8.2vw, 5.75rem); }
  .hero-copy { gap: var(--space-5); padding-right: 0; }
  .hero-copy > p { font-size: 19px; }
  .hero-actions { gap: var(--space-xs) var(--space-md); }
  .hero-image { height: 400px; }
  .hero-foot { font-size: 14px; }
  .page-intro .split-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-title { font-size: clamp(3.5rem, 7.5vw, 5rem); }
  .service-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .service-row > :last-child { grid-column: 2; justify-self: start; }
  .service-row h3 { grid-row: span 2; }
  .split .service-row h3 { grid-row: auto; }
  .split .service-row > :last-child { grid-column: auto; }
  .service-option { padding-inline: var(--space-md); grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-2xs) var(--space-xs); }
  .service-option-name { font-size: 18px; }
  .service-option-note { font-size: 14px; }
  .service-panel-photo { aspect-ratio: 1; }
  .footer-nav { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 767px) {
  .hero-grid, .split, .split-wide, .page-intro .split-wide, .service-panel, .owner-layout, .generator-layout, .area-layout, .call-layout { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 620px; }
  .hero-copy h1 { font-size: clamp(4rem, 11.6vw, 6rem); max-width: 11ch; }
  .hero-copy > p { max-width: 37ch; }
  .hero-grid { gap: var(--space-lg); }
  .hero-image { height: auto; aspect-ratio: 1.4; }
  .hero-image img { object-position: 40% 42%; }
  .hero-foot { margin-top: var(--space-5); align-items: start; flex-direction: column; gap: var(--space-2xs); }
  .section-heading { margin-bottom: var(--space-8); }
  .section-heading:not(.split):not(.split-wide) { flex-direction: column; align-items: start; }
  .section-heading h2 { max-width: 19ch; }
  .split-wide, .split, .owner-layout, .generator-layout, .area-layout, .call-layout { row-gap: var(--space-8); }
  .page-intro { padding-top: var(--space-lg); }
  .page-intro .breadcrumbs { margin-bottom: var(--space-lg); }
  .page-title { max-width: 16ch; font-size: var(--text-display-s); }
  .page-intro .service-list { margin-top: var(--space-xl); }
  .page-intro--split .media { aspect-ratio: 4 / 3; }
  .media--portrait { aspect-ratio: 4 / 3; }
  .service-list .service-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .service-row { padding-block: var(--space-5); }
  .service-row > :last-child { grid-column: 2; }
  .service-switcher { margin-bottom: var(--space-lg); }
  .service-option { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); min-height: 128px; padding: var(--space-md) var(--space-sm); }
  .service-number { font-size: 14px; }
  .service-option-name { font-size: 18px; }
  .service-option-note { line-height: 1.4; }
  .service-panel { gap: var(--space-8); }
  .service-panel-photo { aspect-ratio: 1.3; }
  .service-panel-copy h3, .service-panel-copy h2 { max-width: 19ch; }
  .service-panel-copy { gap: var(--space-5); }
  .owner-review { border-top: 1px solid var(--color-rule); border-left: 0; padding-top: var(--space-8); padding-left: 0; }
  .owner-review .quote blockquote p, .owner-review blockquote p { max-width: 24ch; }
  .generator-layout .media { aspect-ratio: 1.4; }
  .call-layout h2, .area-title { max-width: 18ch; }
  .call-topic { margin-top: 0; }
  .quote blockquote p { max-width: 25ch; }
  .quote-author { margin-top: var(--space-lg); }
  .review-grid { margin-top: var(--space-lg); padding-top: var(--space-8); }
  .review-grid .quote blockquote p { font-size: 36px; }
  .footer { padding-bottom: calc(var(--space-8) + 76px + env(safe-area-inset-bottom)); }
  .footer-top { flex-direction: column; gap: var(--space-8); }
  .footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: var(--space-xs) var(--space-md); }
  .footer-bottom { align-items: start; flex-direction: column; gap: var(--space-xs); }
  .mobile-actions { position: fixed; right: 0; bottom: 0; left: 0; z-index: var(--z-sticky); display: flex; justify-content: center; padding: var(--space-xs) var(--gutter) calc(var(--space-xs) + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-rule); background: var(--color-paper); }
  .mobile-actions a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); width: 100%; min-height: 48px; font-size: 15px; font-weight: 500; text-decoration: none; }
  .mobile-actions small { font-size: 14px; font-weight: 400; }
  .demo-chat { right: var(--space-md); bottom: calc(80px + env(safe-area-inset-bottom)); }
  .chat-launcher { min-height: 48px; padding: var(--space-sm) var(--space-md); }
  .chat-panel { position: fixed; right: var(--space-sm); left: var(--space-sm); bottom: calc(var(--space-sm) + var(--chat-keyboard-offset, 0px)); width: auto; height: min(720px, calc(var(--chat-viewport-height, 100dvh) - 24px)); max-height: calc(var(--chat-viewport-height, 100dvh) - 24px); }
  .chat-panel-header { padding: var(--space-sm) var(--space-md); }
  .chat-messages { min-height: 64px; padding: var(--space-md); }
  .company-chat-open .chat-launcher, .company-chat-open .mobile-actions { visibility: hidden; }
}
@media (max-width: 480px) {
  .nav-shell { min-height: 72px; padding-block: var(--space-sm); }
  .menu-toggle { min-width: 64px; padding-inline: var(--space-xs); }
  .hero { padding-block: var(--space-md) var(--space-lg); }
  .hero-copy { gap: var(--space-md); }
  .hero-copy h1 { font-size: clamp(3.25rem, 15.4vw, 4rem); }
  .hero-copy > p { font-size: 17px; }
  .hero-actions { align-items: center; flex-direction: row; gap: var(--space-sm); }
  .hero-actions .button { padding-inline: var(--space-md); gap: var(--space-sm); }
  .hero-actions .text-link { font-size: 14px; }
  .hero-image { aspect-ratio: 1.4; }
  .hero-image img { object-position: 40% 50%; }
  .page-title { font-size: clamp(3rem, 12vw, 4rem); }
  .stack { gap: var(--space-5); }
  .service-list .service-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .service-row h3 { grid-row: auto; }
  .service-row > :last-child { grid-column: auto; justify-self: start; }
  .service-switcher { grid-template-columns: minmax(0, 1fr); }
  .service-option { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; align-content: center; min-height: 84px; padding: var(--space-md); gap: var(--space-md); }
  .service-option + .service-option { border-left: 0; border-top: 1px solid var(--color-rule); }
  .service-option-name { font-size: 19px; }
  .service-option-note { font-size: 14px; }
  .fact-list > div { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-md); }
  .fact-list dd { font-size: 16px; }
  .town-list { column-gap: var(--space-md); }
  .town-list li { font-size: 20px; }
  .faq-list summary { font-size: 17px; }
  .faq-list details p { padding-right: 0; }
  .review-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .review-grid .quote + .quote { padding-top: var(--space-8); border-top: 1px solid var(--color-rule); }
  .review-tools { align-items: flex-start; flex-direction: column; gap: var(--space-sm); }
  .quote blockquote p { font-size: clamp(2.5rem, 10.8vw, 3.5rem); }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat-panel-header strong { font-size: 16px; }
  /* A compact, labelled chat icon leaves narrow-page contact text readable. */
  .chat-launcher { justify-content: center; width: 52px; height: 52px; padding: var(--space-sm); gap: 0; font-size: 0; }
  .chat-launcher svg { width: 23px; height: 23px; }
  .chat-panel-header small, .chat-demo-note, .chat-connection-text, .chat-status, .chat-error-text { font-size: 14px; }
}
@media (max-height: 560px) {
  .chat-panel { position: fixed; right: var(--space-sm); bottom: calc(var(--space-sm) + var(--chat-keyboard-offset, 0px)); height: calc(var(--chat-viewport-height, 100dvh) - 24px); max-height: calc(var(--chat-viewport-height, 100dvh) - 24px); }
  .chat-suggestions, .chat-memory-note { display: none; }
  .chat-panel-header { padding-block: var(--space-2xs); }
  .chat-panel-header small { margin-top: 0; }
  .chat-demo-note { padding-bottom: var(--space-xs); }
  .chat-messages { min-height: 44px; padding-block: var(--space-xs); }
  .chat-form { padding-block: var(--space-xs); }
  .company-chat-open .chat-launcher, .company-chat-open .mobile-actions { visibility: hidden; }
}
.demo-chat[data-compact="true"] .chat-suggestions, .demo-chat[data-compact="true"] .chat-memory-note { display: none; }
.demo-chat[data-compact="true"] .chat-panel-header { padding-block: var(--space-2xs); }
.demo-chat[data-compact="true"] .chat-panel-header small { margin-top: 0; }
.demo-chat[data-compact="true"] .chat-messages { min-height: 28px; padding-block: var(--space-xs); }
.demo-chat[data-compact="true"] .chat-form, .demo-chat[data-compact="true"] .chat-progress, .demo-chat[data-compact="true"] .chat-error, .demo-chat[data-compact="true"] .chat-connection { padding-block: var(--space-2xs); }
.demo-chat[data-compact="true"] .chat-demo-note { padding-bottom: var(--space-xs); }
/* Preserve the live logo's responsive proportions without importing site styles. */
@media (min-width: 961px) and (max-width: 1150px) {
  .brand { font-size: 15px; }
}
@media (max-width: 760px) {
  .brand { font-size: 16px; }
  .brand-name .wordmark { font-size: 8px; }
  .footer .brand { font-size: 17px; }
}
@media (max-width: 380px) {
  .brand { font-size: 14px; gap: 9px; }
  .brand-mark { width: 40px; height: 42px; font-size: 17px; }
  .brand-name .wordmark { font-size: 7px; letter-spacing: .2em; }
}
@media (prefers-reduced-motion: reduce) {
  .header, .hero-copy h1, .hero-copy > p, .hero-actions { opacity: 1; transform: none; animation: none; }
}
@media print { .header, .footer, .demo-chat, .mobile-actions { display: none; } .section, .page-intro { padding-block: var(--space-lg); } .hero-image, .media { break-inside: avoid; } }

/* Keep the electrician and panel together in the responsive crop. */
.hero-image img[src*="hero-electrician-wall-clean"] { object-position: 75% 50%; }

img[src*="generator-standby-paulos-new"] { object-position: 72% 80%; transform: scale(1.5); transform-origin: 75% 92%; }
.page-intro--split .media:has(img[src*="generator-standby-paulos-new"]) { aspect-ratio: 1.3; max-height: 520px; }