/*
<design_plan>
DESIGN READ
Reading this as: a five-page local HVAC service website for homeowners and small businesses, with a trust-first, accessibility-conscious language, leaning toward custom CSS, Outfit typography, restrained editorial composition, and low-amplitude GSAP enhancement.

PYTHON RNG EXECUTION
seed = len(prompt) % 10000
random.seed(seed); hero = choice(["Cinematic Center", "Artistic Asymmetry", "Editorial Split"])
output -> Hero: Editorial Split | Font: Outfit | Components: Horizontal Accordion, Feedback Carousel, Inline Typography Image
output -> GSAP: Image Scale + Fade, Scrubbing Text Reveal | Navigation: Minimal Split Nav

The random result is filtered through the trust-first constraint. Inline typography imagery is used only where photography genuinely improves comprehension, never as decorative clutter.

DIALS
DESIGN_VARIANCE: 4
MOTION_INTENSITY: 3
VISUAL_DENSITY: 5

Reasoning:

* Variance 4 keeps the site distinctive without making emergency information harder to locate.
* Motion 3 prioritizes reliability and accessibility. GSAP may enhance hierarchy with small transform and opacity changes, but nothing essential depends on animation.
* Density 5 keeps pricing, services, trust signals, service areas, and emergency information easy to scan without turning the site into a dashboard.

AIDA CHECK
Navigation: minimal split navigation, maximum 72px desktop height.
Attention: editorial split hero with wide headline, one primary quote CTA and one phone CTA.
Interest: six-service gapless bento, trust statistics, service-area architecture.
Desire: testimonials, process, restrained GSAP image emphasis and text reveal.
Action: contact form, emergency call path, focused footer CTA.

HERO MATH VERIFICATION
Hero available height:
100dvh - 40px emergency banner - 72px desktop navigation = calc(100dvh - 112px).

Hero H1:
font-size: clamp(3rem, 5vw, 5.25rem)
max-width: 18ch
line-height: 0.96
desktop copy target: maximum 2 lines, never more than 3.
Subtext target: maximum 20 words and approximately 3 lines.
Hero top padding remains below 6rem.
Both CTAs remain visible inside the initial viewport.
No stamp icons, statistic strips, pricing teasers, trust-logo strips, scroll cues, or tag spam appear inside the hero.

BENTO DENSITY VERIFICATION
Desktop service grid = 3 columns x 3 rows = 9 unit cells.
Service 1 spans 2 columns x 2 rows = 4 cells.
Services 2-6 each consume 1 cell = 5 cells.
4 + 5 = 9 of 9 occupied cells.
No empty grid cells.
grid-auto-flow: dense is explicitly enabled.

SHAPE LOCK
Cards and structural panels: 16px radius.
Inputs: 12px radius.
Buttons and compact controls: full pill.
This exception system is deliberate and consistent across all five pages.

COLOR SYSTEM
Light neutral base: cool zinc/slate family.
Brand anchor: deep Arctic navy.
Single action accent: burnt orange #e85d04.
No purple, neon glow, brass, beige-luxury palette, or section-specific accent changes.
No background gradients.
The only permitted gradient is optional hero heading text.

THEME LOCK
System-level auto theme.
All sections switch together under prefers-color-scheme.
No individual section reverses theme independently.

BUTTON AND FORM CHECK
Primary orange button uses near-white text with strong AA contrast.
Dark/navy button uses near-white text.
Ghost buttons retain visible border and foreground contrast.
Desktop CTA labels use white-space: nowrap.
Form labels sit above inputs.
Errors sit below inputs.
Placeholder text is supplemental only and never substitutes for labels.

LABEL SWEEP
No section numbering.
No QUESTION 05, SECTION 01, ABOUT US, decorative version labels, fake status dots, or ornamental metadata strips.
Eyebrow styling exists as an optional utility but should be used no more than once per three sections.

MOTION CONTRACT
GSAP enhancement 1: service and process photography may scale from 0.96 to 1 while entering the viewport to reinforce visual hierarchy.
GSAP enhancement 2: one key reassurance paragraph may scrub opacity from 0.72 to 1 to guide reading.
No scroll hijacking is required.
Animations affect only transform and opacity.
prefers-reduced-motion disables transitions and animated initial states.

FONT REQUIREMENT
Use Outfit through the document head:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">

PRE-FLIGHT

* Editorial split hero, not centered.
* Navigation stays one line and <= 72px desktop.
* Hero fits initial viewport.
* Service bento has exact six cells of content and zero holes.
* No background gradients except optional hero heading text.
* One orange action accent.
* Consistent radius system.
* No duplicate styling language for primary CTA intent.
* Testimonials are visually clamped to three lines.
* Mobile collapse explicitly defined for every multicolumn section.
* Reduced-motion and dark-mode tokens included.
* No decorative em dash characters.
  </design_plan>
  */

:root {
color-scheme: light dark;

--font-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", sans-serif;

--page: #f8fafc;
--surface: #f1f5f9;
--surface-raised: #e9eef4;
--surface-strong: #dbe4ed;
--surface-glass: rgb(248 250 252 / 0.9);

--text: #101820;
--text-soft: #344251;
--text-muted: #5b6875;
--text-on-dark: #f8fafc;

--navy: #173653;
--navy-strong: #10283f;
--navy-soft: #dce8f2;

--accent: #e85d04;
--accent-hover: #c94f03;
--accent-soft: #ffdfcc;
--accent-text: #fffaf5;

--success: #18794e;
--success-soft: #d9f5e8;
--warning: #8a4b08;
--warning-soft: #ffefd7;
--danger: #b42318;
--danger-soft: #fee4e2;

--border: #cbd5df;
--border-strong: #a9b7c5;

--focus: #e85d04;
--shadow-tint: rgb(23 54 83 / 0.11);

--radius-card: 16px;
--radius-input: 12px;
--radius-pill: 999px;

--container: 1400px;
--content: 1180px;
--reading: 65ch;

--section-space: clamp(8rem, 12vw, 12rem);
--section-space-small: clamp(6rem, 9vw, 9rem);

--nav-height: 72px;
--emergency-height: 40px;

--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
:root {
--page: #0d151d;
--surface: #121e28;
--surface-raised: #182732;
--surface-strong: #223542;
--surface-glass: rgb(13 21 29 / 0.9);

--text: #edf3f7;
--text-soft: #c6d2dc;
--text-muted: #9caeba;
--text-on-dark: #f4f8fa;

--navy: #9fc3df;
--navy-strong: #d1e2ef;
--navy-soft: #1c3446;

--accent: #ff7a1a;
--accent-hover: #ff8d3d;
--accent-soft: #4d260c;
--accent-text: #201005;

--success: #58c997;
--success-soft: #123b2c;
--warning: #f2b05f;
--warning-soft: #3d2c17;
--danger: #ff8078;
--danger-soft: #431c1b;

--border: #334755;
--border-strong: #49606f;

--focus: #ff8a32;
--shadow-tint: rgb(0 0 0 / 0.34);

}
}

/* Reset */

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
text-size-adjust: 100%;
overflow-x: hidden;
}

body {
margin: 0;
min-width: 320px;
overflow-x: hidden;
background: var(--page);
color: var(--text);
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}

body.menu-open {
overflow: hidden;
}

main {
width: 100%;
max-width: 100%;
overflow-x: clip;
}

img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}

img {
height: auto;
}

button,
input,
select,
textarea {
font: inherit;
}

button,
a {
-webkit-tap-highlight-color: transparent;
}

button {
border: 0;
}

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

p,
h1,
h2,
h3,
h4,
ul,
ol,
blockquote {
margin-top: 0;
}

p:last-child,
ul:last-child,
ol:last-child,
blockquote:last-child {
margin-bottom: 0;
}

::selection {
background: var(--accent-soft);
color: var(--text);
}

/* Accessibility */

.skip-link {
position: fixed;
top: 12px;
left: 12px;
z-index: 1000;
padding: 10px 16px;
border-radius: var(--radius-pill);
background: var(--text);
color: var(--page);
transform: translateY(-160%);
transition: transform 160ms var(--ease-out);
}

.skip-link:focus {
transform: translateY(0);
}

:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
}

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

/* Layout primitives */

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

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

.section {
position: relative;
padding-block: var(--section-space);
}

.section--compact {
padding-block: var(--section-space-small);
}

.section-header {
display: grid;
gap: 1rem;
max-width: 820px;
margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-header--center {
margin-inline: auto;
text-align: center;
}

.eyebrow {
width: fit-content;
margin: 0;
color: var(--accent);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.14em;
line-height: 1.2;
text-transform: uppercase;
}

.section-header--center .eyebrow {
margin-inline: auto;
}

.display {
margin: 0;
max-width: 18ch;
color: var(--text);
font-size: clamp(2.5rem, 5vw, 5rem);
font-weight: 800;
letter-spacing: -0.045em;
line-height: 0.98;
}

.heading-xl {
margin: 0;
max-width: 20ch;
color: var(--text);
font-size: clamp(2.3rem, 4.4vw, 4.5rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
}

.heading-lg {
margin: 0;
max-width: 24ch;
color: var(--text);
font-size: clamp(2rem, 3.4vw, 3.5rem);
font-weight: 750;
letter-spacing: -0.035em;
line-height: 1.05;
}

.heading-md {
margin: 0;
color: var(--text);
font-size: clamp(1.4rem, 2vw, 2rem);
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.15;
}

.body-lg {
max-width: var(--reading);
color: var(--text-soft);
font-size: clamp(1.05rem, 1.5vw, 1.2rem);
line-height: 1.65;
}

.body-sm {
color: var(--text-muted);
font-size: 0.925rem;
line-height: 1.6;
}

/* Buttons */

.btn {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
gap: 0.55rem;
width: fit-content;
max-width: 100%;
padding: 0.75rem 1.25rem;
border: 1px solid transparent;
border-radius: var(--radius-pill);
cursor: pointer;
font-size: 0.95rem;
font-weight: 750;
line-height: 1;
text-align: center;
white-space: nowrap;
transition:
background-color 180ms var(--ease-out),
border-color 180ms var(--ease-out),
color 180ms var(--ease-out),
transform 180ms var(--ease-out),
box-shadow 180ms var(--ease-out);
}

.btn:hover {
transform: translateY(-1px);
}

.btn:active {
transform: translateY(1px) scale(0.98);
}

.btn--primary {
background: var(--accent);
color: var(--accent-text);
box-shadow: 0 9px 24px var(--shadow-tint);
}

.btn--primary:hover {
background: var(--accent-hover);
}

.btn--dark {
background: var(--navy-strong);
color: var(--text-on-dark);
}

.btn--dark:hover {
background: var(--navy);
}

@media (prefers-color-scheme: dark) {
.btn--dark {
background: var(--text);
color: var(--page);
}

.btn--dark:hover {
background: var(--text-soft);
}
}

.btn--outline {
border-color: var(--border-strong);
background: transparent;
color: var(--text);
}

.btn--outline:hover {
border-color: var(--text);
background: var(--surface);
}

.btn--ghost {
background: transparent;
color: var(--navy);
}

.btn--ghost:hover {
background: var(--surface);
}

.btn[disabled],
.btn[aria-disabled="true"] {
cursor: not-allowed;
opacity: 0.55;
transform: none;
}

.button-row {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
align-items: center;
}

/* Emergency banner */

.emergency-banner {
position: relative;
z-index: 50;
display: flex;
min-height: var(--emergency-height);
align-items: center;
background: var(--navy-strong);
color: var(--text-on-dark);
}

.emergency-banner__inner {
display: flex;
min-height: var(--emergency-height);
align-items: center;
justify-content: space-between;
gap: 1rem;
}

.emergency-banner__text {
overflow: hidden;
margin: 0;
font-size: 0.875rem;
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}

.emergency-banner__link {
flex: none;
color: var(--accent);
font-size: 0.875rem;
font-weight: 800;
white-space: nowrap;
}

.emergency-banner__link:hover {
color: var(--accent-hover);
}

/* Navigation */

.site-header {
position: sticky;
top: 0;
z-index: 40;
min-height: var(--nav-height);
border-bottom: 1px solid rgb(148 163 184 / 0.18);
background: var(--surface-glass);
backdrop-filter: blur(18px) saturate(120%);
-webkit-backdrop-filter: blur(18px) saturate(120%);
}

.nav {
display: grid;
min-height: var(--nav-height);
grid-template-columns: auto 1fr auto;
align-items: center;
gap: clamp(1rem, 3vw, 3rem);
}

.nav__brand {
display: inline-flex;
align-items: center;
gap: 0.75rem;
min-width: 0;
color: var(--text);
}

.nav__brand-mark {
display: grid;
width: 40px;
height: 40px;
flex: none;
place-items: center;
border-radius: var(--radius-input);
background: var(--navy-strong);
color: var(--text-on-dark);
font-weight: 800;
letter-spacing: -0.04em;
}

.nav__brand-copy {
min-width: 0;
line-height: 1.05;
}

.nav__brand-name {
display: block;
overflow: hidden;
font-size: 1rem;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}

.nav__brand-sub {
display: block;
margin-top: 0.18rem;
color: var(--text-muted);
font-size: 0.68rem;
font-weight: 650;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.nav__links {
display: flex;
min-width: 0;
align-items: center;
justify-content: center;
gap: clamp(0.75rem, 2vw, 1.6rem);
white-space: nowrap;
}

.nav__link {
position: relative;
padding-block: 0.5rem;
color: var(--text-soft);
font-size: 0.925rem;
font-weight: 600;
transition:
color 160ms var(--ease-out),
transform 160ms var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
color: var(--text);
}

.nav__link:active {
transform: translateY(1px);
}

.nav__link[aria-current="page"]::after {
position: absolute;
right: 0;
bottom: -3px;
left: 0;
height: 2px;
border-radius: var(--radius-pill);
background: var(--accent);
content: "";
}

.nav__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.65rem;
}

.nav__phone {
color: var(--navy);
font-size: 0.9rem;
font-weight: 750;
white-space: nowrap;
}

.nav__phone:hover {
color: var(--accent);
}

.nav-toggle {
display: none;
width: 44px;
height: 44px;
place-items: center;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--text);
cursor: pointer;
}

/* Hero */

.hero {
position: relative;
display: grid;
min-height: calc(100dvh - var(--nav-height) - var(--emergency-height));
align-items: center;
overflow: hidden;
padding-block: clamp(2.5rem, 7vh, 5.5rem);
}

.hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.03fr) minmax(340px, 0.97fr);
align-items: center;
gap: clamp(2rem, 6vw, 7rem);
}

.hero__content {
position: relative;
z-index: 2;
display: grid;
gap: clamp(1rem, 2.3vh, 1.5rem);
max-width: 760px;
}

.hero__eyebrow {
width: fit-content;
margin: 0;
color: var(--accent);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}

.hero__title {
margin: 0;
max-width: 18ch;
color: var(--text);
font-size: clamp(3rem, 5vw, 5.25rem);
font-weight: 800;
letter-spacing: -0.055em;
line-height: 0.96;
text-wrap: balance;
}

.hero__title--accent-text {
background: linear-gradient(90deg, var(--text) 0%, var(--navy) 68%, var(--accent) 100%);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.hero__summary {
max-width: 52ch;
margin: 0;
color: var(--text-soft);
font-size: clamp(1.05rem, 1.6vw, 1.22rem);
line-height: 1.58;
}

.hero__visual {
position: relative;
min-height: min(62dvh, 610px);
overflow: hidden;
border-radius: var(--radius-card);
background: var(--surface-strong);
box-shadow: 0 30px 70px var(--shadow-tint);
isolation: isolate;
}

.hero__visual img {
width: 100%;
height: 100%;
min-height: inherit;
object-fit: cover;
object-position: center;
transition: transform 700ms var(--ease-out);
}

.hero__visual:hover img {
transform: scale(1.025);
}

.hero__visual::after {
position: absolute;
inset: 0;
background: rgb(16 40 63 / 0.08);
content: "";
pointer-events: none;
}

.hero__micro-image {
display: inline-block;
width: clamp(72px, 8vw, 112px);
height: 0.74em;
margin-inline: 0.1em;
overflow: hidden;
border-radius: var(--radius-pill);
vertical-align: 0.02em;
}

.hero__micro-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Trust stats */

.stats {
padding-block: clamp(3.5rem, 6vw, 5.5rem);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}

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

.stat {
min-width: 0;
padding-inline: clamp(1rem, 3vw, 2.5rem);
}

.stat:first-child {
padding-left: 0;
}

.stat:last-child {
padding-right: 0;
}

.stat + .stat {
border-left: 1px solid var(--border);
}

.stat__value {
display: block;
color: var(--text);
font-size: clamp(2rem, 4vw, 4rem);
font-weight: 800;
letter-spacing: -0.05em;
line-height: 1;
}

.stat__label {
display: block;
margin-top: 0.65rem;
color: var(--text-muted);
font-size: 0.88rem;
font-weight: 600;
}

/* Certification strip */

.certifications {
overflow-x: auto;
padding-block: 2rem;
scrollbar-width: none;
}

.certifications::-webkit-scrollbar {
display: none;
}

.certifications__track {
display: flex;
width: max-content;
min-width: 100%;
align-items: center;
justify-content: space-between;
gap: 2rem;
}

.certification {
display: inline-flex;
align-items: center;
gap: 0.65rem;
color: var(--text-muted);
font-size: 0.88rem;
font-weight: 700;
white-space: nowrap;
}

.certification img {
width: auto;
height: 30px;
opacity: 0.8;
}

/* Services bento */

.services-bento {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(3, minmax(190px, auto));
grid-auto-flow: dense;
gap: 0;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-card);
}

.service-card {
position: relative;
display: flex;
min-width: 0;
min-height: 190px;
flex-direction: column;
justify-content: space-between;
gap: 1.5rem;
overflow: hidden;
padding: clamp(1.5rem, 3vw, 2.6rem);
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--surface);
transition:
background-color 220ms var(--ease-out),
transform 220ms var(--ease-out);
}

.service-card:hover {
background: var(--surface-raised);
}

.service-card:active {
transform: scale(0.995);
}

.service-card:nth-child(1) {
grid-column: span 2;
grid-row: span 2;
}

.service-card:nth-child(3),
.service-card:nth-child(6) {
background: var(--navy-soft);
}

.service-card:nth-child(4) {
background: var(--accent-soft);
}

.service-card:nth-child(3n) {
border-right: 0;
}

.service-card:nth-last-child(-n + 3) {
border-bottom: 0;
}

.service-card__icon {
display: grid;
width: 48px;
height: 48px;
place-items: center;
border-radius: var(--radius-input);
background: var(--navy-strong);
color: var(--text-on-dark);
}

.service-card__content {
display: grid;
gap: 0.65rem;
}

.service-card__title {
margin: 0;
color: var(--text);
font-size: clamp(1.35rem, 2.3vw, 2.4rem);
font-weight: 750;
letter-spacing: -0.035em;
line-height: 1.08;
}

.service-card:not(:first-child) .service-card__title {
font-size: clamp(1.15rem, 1.6vw, 1.5rem);
}

.service-card__text {
max-width: 48ch;
margin: 0;
color: var(--text-soft);
font-size: 0.95rem;
line-height: 1.55;
}

.service-card__price {
color: var(--text);
font-size: 0.9rem;
font-weight: 750;
}

.service-card__link {
width: fit-content;
color: var(--navy);
font-size: 0.9rem;
font-weight: 750;
}

.service-card__link:hover {
color: var(--accent);
}

.service-card--image {
background-position: center;
background-size: cover;
color: var(--text-on-dark);
}

.service-card--image::before {
position: absolute;
inset: 0;
background: rgb(13 21 29 / 0.6);
content: "";
}

.service-card--image > * {
position: relative;
z-index: 1;
}

.service-card--image .service-card__title,
.service-card--image .service-card__text,
.service-card--image .service-card__price,
.service-card--image .service-card__link {
color: var(--text-on-dark);
}

/* Services detail */

.service-list {
display: grid;
gap: clamp(4rem, 8vw, 7rem);
}

.service-detail {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: start;
gap: clamp(2.5rem, 7vw, 7rem);
}

.service-detail:nth-child(even) {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.service-detail:nth-child(even) .service-detail__media {
order: 2;
}

.service-detail__media {
overflow: hidden;
border-radius: var(--radius-card);
background: var(--surface-strong);
}

.service-detail__media img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform 700ms var(--ease-out);
}

.service-detail__media:hover img {
transform: scale(1.035);
}

.service-detail__body {
display: grid;
gap: 1.35rem;
align-content: start;
padding-top: clamp(0rem, 4vw, 2rem);
}

.feature-chips {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}

.feature-chip {
display: inline-flex;
min-height: 36px;
align-items: center;
padding-inline: 0.85rem;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--text-soft);
font-size: 0.82rem;
font-weight: 650;
}

/* Horizontal service accordion */

.horizontal-accordion {
display: flex;
min-height: 560px;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-card);
background: var(--surface);
}

.horizontal-accordion__item {
position: relative;
display: flex;
min-width: 0;
flex: 1 1 0;
overflow: hidden;
border-right: 1px solid var(--border);
cursor: pointer;
transition: flex 520ms var(--ease-out);
}

.horizontal-accordion__item:last-child {
border-right: 0;
}

.horizontal-accordion__item:hover,
.horizontal-accordion__item:focus-within,
.horizontal-accordion__item.is-active {
flex: 2.35 1 0;
}

.horizontal-accordion__media {
position: absolute;
inset: 0;
}

.horizontal-accordion__media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.78) contrast(1.05);
transform: scale(1.01);
transition: transform 700ms var(--ease-out);
}

.horizontal-accordion__item:hover .horizontal-accordion__media img {
transform: scale(1.05);
}

.horizontal-accordion__shade {
position: absolute;
inset: 0;
background: rgb(13 21 29 / 0.58);
}

.horizontal-accordion__content {
position: relative;
z-index: 2;
display: flex;
width: 100%;
min-width: 240px;
flex-direction: column;
justify-content: flex-end;
gap: 0.75rem;
padding: 2rem;
color: var(--text-on-dark);
}

.horizontal-accordion__title {
margin: 0;
font-size: clamp(1.25rem, 2vw, 2rem);
font-weight: 750;
letter-spacing: -0.03em;
line-height: 1.1;
}

.horizontal-accordion__text {
max-width: 34ch;
margin: 0;
color: rgb(248 250 252 / 0.86);
opacity: 0;
transform: translateY(8px);
transition:
opacity 280ms var(--ease-out),
transform 280ms var(--ease-out);
}

.horizontal-accordion__item:hover .horizontal-accordion__text,
.horizontal-accordion__item:focus-within .horizontal-accordion__text,
.horizontal-accordion__item.is-active .horizontal-accordion__text {
opacity: 1;
transform: translateY(0);
}

/* Why choose us */

.reasons {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
border-top: 1px solid var(--border);
}

.reason {
display: grid;
grid-template-columns: 52px 1fr;
gap: 1.25rem;
padding: clamp(2rem, 4vw, 3.25rem);
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}

.reason:nth-child(even) {
border-right: 0;
}

.reason__icon {
display: grid;
width: 48px;
height: 48px;
place-items: center;
border-radius: var(--radius-input);
background: var(--surface-raised);
color: var(--navy);
}

.reason__body {
display: grid;
gap: 0.6rem;
}

.reason__title {
margin: 0;
font-size: 1.15rem;
font-weight: 750;
}

.reason__text {
max-width: 48ch;
margin: 0;
color: var(--text-muted);
font-size: 0.94rem;
}

/* Process */

.process {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
border-top: 1px solid var(--border);
}

.process-item {
position: relative;
min-width: 0;
padding: clamp(1.8rem, 3vw, 2.8rem);
border-right: 1px solid var(--border);
}

.process-item:last-child {
border-right: 0;
}

.process-item__index {
display: block;
margin-bottom: clamp(3rem, 7vw, 6rem);
color: var(--accent);
font-size: 0.86rem;
font-weight: 800;
}

.process-item__title {
margin: 0 0 0.7rem;
font-size: clamp(1.15rem, 1.7vw, 1.5rem);
font-weight: 750;
letter-spacing: -0.025em;
}

.process-item__text {
margin: 0;
color: var(--text-muted);
font-size: 0.93rem;
line-height: 1.6;
}

/* Testimonials */

.testimonials {
position: relative;
}

.testimonial-stage {
display: grid;
grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
align-items: center;
gap: clamp(2rem, 6vw, 6rem);
}

.testimonial-stage__media {
position: relative;
overflow: hidden;
border-radius: var(--radius-card);
background: var(--surface-strong);
}

.testimonial-stage__media img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
}

.testimonial-stage__body {
display: grid;
gap: 1.4rem;
}

.testimonial__quote {
display: -webkit-box;
overflow: hidden;
max-width: 24ch;
margin: 0;
color: var(--text);
font-size: clamp(1.7rem, 3.3vw, 3.3rem);
font-weight: 650;
letter-spacing: -0.04em;
line-height: 1.12;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}

.testimonial__meta {
display: grid;
gap: 0.15rem;
}

.testimonial__name {
font-size: 0.95rem;
font-weight: 750;
}

.testimonial__details {
color: var(--text-muted);
font-size: 0.86rem;
}

.testimonial__rating {
color: var(--accent);
font-size: 0.9rem;
font-weight: 800;
letter-spacing: 0.04em;
}

.carousel-controls {
display: flex;
gap: 0.6rem;
margin-top: 0.5rem;
}

.carousel-button {
display: grid;
width: 46px;
height: 46px;
place-items: center;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--text);
cursor: pointer;
transition:
background-color 180ms var(--ease-out),
transform 180ms var(--ease-out);
}

.carousel-button:hover {
background: var(--surface-raised);
}

.carousel-button:active {
transform: scale(0.98);
}

/* FAQ */

.faq {
display: grid;
max-width: 900px;
margin-inline: auto;
border-top: 1px solid var(--border);
}

.faq-item {
border-bottom: 1px solid var(--border);
}

.faq-question {
display: grid;
width: 100%;
grid-template-columns: 1fr auto;
align-items: center;
gap: 1rem;
padding: 1.65rem 0;
background: transparent;
color: var(--text);
cursor: pointer;
text-align: left;
}

.faq-question:hover .faq-question__text {
color: var(--accent);
}

.faq-question__text {
font-size: clamp(1.05rem, 1.5vw, 1.2rem);
font-weight: 700;
line-height: 1.35;
transition: color 160ms var(--ease-out);
}

.faq-question__icon {
display: grid;
width: 34px;
height: 34px;
place-items: center;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
color: var(--text);
transition:
background-color 180ms var(--ease-out),
transform 220ms var(--ease-out);
}

.faq-question[aria-expanded="true"] .faq-question__icon {
background: var(--surface-raised);
transform: rotate(45deg);
}

.faq-answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 300ms var(--ease-out);
}

.faq-answer__inner {
overflow: hidden;
}

.faq-answer__content {
max-width: 68ch;
padding: 0 3.5rem 1.8rem 0;
color: var(--text-soft);
}

.faq-item.is-open .faq-answer,
.faq-question[aria-expanded="true"] + .faq-answer {
grid-template-rows: 1fr;
}

/* About */

.about-hero {
padding-block: clamp(6rem, 10vw, 9rem) var(--section-space);
}

.about-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
align-items: end;
gap: clamp(2rem, 7vw, 8rem);
}

.about-hero__copy {
display: grid;
gap: 1.5rem;
}

.about-hero__media {
overflow: hidden;
border-radius: var(--radius-card);
}

.about-hero__media img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
}

.story {
display: grid;
grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
gap: clamp(3rem, 8vw, 9rem);
}

.story__anchor {
align-self: start;
}

.story__body {
display: grid;
gap: 1.6rem;
max-width: 760px;
}

.story__body p {
margin: 0;
color: var(--text-soft);
font-size: clamp(1.05rem, 1.5vw, 1.18rem);
}

.values {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-card);
background: var(--border);
}

.value {
min-height: 270px;
padding: clamp(2rem, 4vw, 3.5rem);
background: var(--surface);
}

.value:nth-child(2) {
background: var(--navy-soft);
}

.value:nth-child(3) {
background: var(--accent-soft);
}

.value__title {
margin: 0 0 1rem;
font-size: clamp(1.4rem, 2.2vw, 2rem);
font-weight: 750;
letter-spacing: -0.03em;
}

.value__text {
max-width: 40ch;
margin: 0;
color: var(--text-soft);
}

/* Service areas */

.areas-layout {
display: grid;
grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.3fr);
align-items: start;
gap: clamp(3rem, 7vw, 7rem);
}

.areas-map {
position: sticky;
top: calc(var(--nav-height) + 24px);
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-card);
background: var(--surface);
}

.areas-map iframe,
.contact-map iframe {
display: block;
width: 100%;
min-height: 520px;
border: 0;
}

.area-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}

.area-card {
display: grid;
min-height: 220px;
align-content: space-between;
gap: 1.5rem;
padding: clamp(1.5rem, 3vw, 2.4rem);
border: 1px solid var(--border);
border-radius: var(--radius-card);
background: var(--surface);
transition:
background-color 180ms var(--ease-out),
transform 180ms var(--ease-out),
border-color 180ms var(--ease-out);
}

.area-card:hover {
border-color: var(--border-strong);
background: var(--surface-raised);
transform: translateY(-2px);
}

.area-card:active {
transform: translateY(1px);
}

.area-card--featured {
grid-column: span 2;
min-height: 260px;
background: var(--navy-soft);
}

.area-card__name {
margin: 0;
font-size: clamp(1.3rem, 2vw, 1.8rem);
font-weight: 750;
letter-spacing: -0.03em;
}

.area-card__description {
margin: 0;
color: var(--text-soft);
font-size: 0.94rem;
}

.area-card__zips {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}

.area-card__zip {
color: var(--text-muted);
font-size: 0.82rem;
font-weight: 700;
}

/* Contact */

.contact-layout {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.75fr);
gap: clamp(3rem, 8vw, 8rem);
align-items: start;
}

.contact-form {
display: grid;
gap: 1.4rem;
}

.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.2rem;
}

.form-field {
display: grid;
gap: 0.5rem;
}

.form-field--full {
grid-column: 1 / -1;
}

.form-label {
color: var(--text);
font-size: 0.9rem;
font-weight: 700;
}

.form-helper {
color: var(--text-muted);
font-size: 0.8rem;
}

.form-control {
width: 100%;
min-height: 52px;
padding: 0.8rem 0.95rem;
border: 1px solid var(--border-strong);
border-radius: var(--radius-input);
outline: 0;
background: var(--page);
color: var(--text);
caret-color: var(--accent);
transition:
border-color 160ms var(--ease-out),
box-shadow 160ms var(--ease-out),
background-color 160ms var(--ease-out);
}

textarea.form-control {
min-height: 150px;
resize: vertical;
}

.form-control::placeholder {
color: var(--text-muted);
opacity: 0.8;
}

.form-control:hover {
border-color: var(--text-muted);
}

.form-control:focus {
border-color: var(--focus);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent);
}

.form-field.has-error .form-control,
.form-control[aria-invalid="true"] {
border-color: var(--danger);
}

.form-error {
display: none;
color: var(--danger);
font-size: 0.82rem;
font-weight: 650;
}

.form-field.has-error .form-error,
.form-error.is-visible {
display: block;
}

.form-success {
display: none;
padding: 1rem 1.1rem;
border: 1px solid var(--success);
border-radius: var(--radius-input);
background: var(--success-soft);
color: var(--success);
font-weight: 650;
}

.form-success.is-visible {
display: block;
}

.contact-aside {
display: grid;
gap: 1rem;
}

.contact-card {
padding: clamp(1.5rem, 3vw, 2.25rem);
border: 1px solid var(--border);
border-radius: var(--radius-card);
background: var(--surface);
}

.contact-card__title {
margin: 0 0 0.7rem;
font-size: 1.05rem;
font-weight: 750;
}

.contact-card__text,
.contact-card__link {
color: var(--text-soft);
font-size: 0.93rem;
}

.contact-card__link:hover {
color: var(--accent);
}

.hours {
display: grid;
gap: 0.7rem;
}

.hours__row {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
color: var(--text-soft);
font-size: 0.88rem;
}

.contact-map {
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-card);
}

/* CTA chapter */

.cta-section {
padding-block: var(--section-space);
}

.cta-panel {
display: grid;
min-height: 430px;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 2rem;
padding: clamp(2rem, 6vw, 5.5rem);
border-radius: var(--radius-card);
background: var(--navy-strong);
color: var(--text-on-dark);
}

.cta-panel__content {
display: grid;
gap: 1.2rem;
max-width: 820px;
}

.cta-panel__title {
margin: 0;
max-width: 16ch;
color: var(--text-on-dark);
font-size: clamp(2.5rem, 5.4vw, 5.8rem);
font-weight: 800;
letter-spacing: -0.055em;
line-height: 0.98;
}

.cta-panel__text {
max-width: 48ch;
margin: 0;
color: rgb(248 250 252 / 0.8);
}

.cta-panel .btn--primary {
box-shadow: none;
}

/* Emergency chapter */

.emergency-section {
padding-block: var(--section-space-small);
}

.emergency-panel {
display: grid;
grid-template-columns: minmax(0, 1.3fr) auto;
align-items: center;
gap: 2rem;
padding: clamp(2rem, 5vw, 4rem);
border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
border-radius: var(--radius-card);
background: var(--accent-soft);
}

.emergency-panel__content {
display: grid;
gap: 0.7rem;
}

.emergency-panel__title {
margin: 0;
font-size: clamp(1.8rem, 3.5vw, 3.3rem);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
}

.emergency-panel__text {
max-width: 62ch;
margin: 0;
color: var(--text-soft);
}

.emergency-panel__response {
color: var(--accent);
font-size: 0.9rem;
font-weight: 800;
}

/* Footer */

.site-footer {
padding-block: clamp(4rem, 8vw, 7rem) 2rem;
border-top: 1px solid var(--border);
}

.footer__top {
display: grid;
grid-template-columns: minmax(220px, 1.25fr) repeat(3, minmax(130px, 0.65fr));
gap: clamp(2.5rem, 5vw, 5rem);
}

.footer__brand {
max-width: 360px;
}

.footer__brand-name {
display: block;
margin-bottom: 0.9rem;
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -0.03em;
}

.footer__brand-text {
margin: 0;
color: var(--text-muted);
font-size: 0.92rem;
}

.footer__title {
margin: 0 0 1rem;
color: var(--text);
font-size: 0.88rem;
font-weight: 750;
}

.footer__links {
display: grid;
gap: 0.7rem;
margin: 0;
padding: 0;
list-style: none;
}

.footer__link {
color: var(--text-muted);
font-size: 0.9rem;
}

.footer__link:hover {
color: var(--accent);
}

.footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: clamp(3rem, 6vw, 5rem);
padding-top: 1.5rem;
border-top: 1px solid var(--border);
color: var(--text-muted);
font-size: 0.82rem;
}

.footer__social {
display: flex;
align-items: center;
gap: 1rem;
}

/* Loading and skeleton states */

.skeleton {
position: relative;
overflow: hidden;
border-radius: var(--radius-input);
background: var(--surface-strong);
animation: skeleton-pulse 1.3s ease-in-out infinite alternate;
}

.skeleton--text {
width: 100%;
height: 0.95rem;
}

.skeleton--heading {
width: 65%;
height: 2.2rem;
}

.skeleton--media {
width: 100%;
min-height: 280px;
}

.is-loading {
pointer-events: none;
}

.is-loading .btn__label {
opacity: 0.65;
}

@keyframes skeleton-pulse {
from {
opacity: 0.58;
}

to {
opacity: 1;
}
}

/* Empty and error states */

.empty-state,
.error-state {
display: grid;
min-height: 260px;
place-items: center;
padding: 2rem;
border: 1px solid var(--border);
border-radius: var(--radius-card);
background: var(--surface);
text-align: center;
}

.empty-state__inner,
.error-state__inner {
display: grid;
gap: 0.8rem;
max-width: 520px;
justify-items: center;
}

.error-state {
border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
background: var(--danger-soft);
}

.error-state__title {
color: var(--danger);
}

/* GSAP hooks */

[data-gsap-reveal] {
will-change: transform, opacity;
}

.js [data-gsap-image] {
transform: scale(0.96);
opacity: 0.86;
}

.js [data-gsap-text] {
opacity: 0.72;
}

.gsap-pinned-title {
align-self: start;
}

.gsap-media-item {
transform-origin: center;
}

/* Utility classes */

.surface {
background: var(--surface);
}

.surface-raised {
background: var(--surface-raised);
}

.text-accent {
color: var(--accent);
}

.text-muted {
color: var(--text-muted);
}

.max-reading {
max-width: var(--reading);
}

.flow > * + * {
margin-top: 1rem;
}

.flow-lg > * + * {
margin-top: 1.5rem;
}

.no-wrap {
white-space: nowrap;
}

/* Desktop adjustments */

@media (min-width: 1024px) {
.nav__actions .btn {
min-height: 44px;
padding-inline: 1.05rem;
}

.hero__visual {
max-height: 630px;
}

.service-card:nth-child(1) {
padding: clamp(2rem, 4vw, 4rem);
}
}

/* Tablet */

@media (max-width: 1023px) {
:root {
--nav-height: 68px;
}

.nav {
grid-template-columns: auto 1fr auto;
}

.nav__links {
display: none;
}

.nav__actions .nav__phone,
.nav__actions .btn {
display: none;
}

.nav-toggle {
display: grid;
}

.nav__mobile {
position: fixed;
top: calc(var(--emergency-height) + var(--nav-height));
right: 1rem;
left: 1rem;
z-index: 60;
display: none;
max-height: calc(100dvh - var(--emergency-height) - var(--nav-height) - 2rem);
overflow-y: auto;
padding: 1rem;
border: 1px solid var(--border);
border-radius: var(--radius-card);
background: var(--page);
box-shadow: 0 24px 60px var(--shadow-tint);
}

.nav__mobile.is-open {
display: grid;
gap: 0.4rem;
}

.nav__mobile-link {
display: flex;
min-height: 48px;
align-items: center;
padding-inline: 0.85rem;
border-radius: var(--radius-input);
color: var(--text);
font-weight: 650;
}

.nav__mobile-link:hover {
background: var(--surface);
}

.hero__grid {
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
gap: 2.5rem;
}

.hero__title {
font-size: clamp(2.8rem, 6vw, 4.5rem);
}

.services-bento {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: auto;
}

.service-card:nth-child(1) {
grid-column: 1 / -1;
grid-row: auto;
min-height: 340px;
}

.service-card:nth-child(3n) {
border-right: 1px solid var(--border);
}

.service-card:nth-child(even) {
border-right: 0;
}

.service-card:nth-last-child(-n + 3) {
border-bottom: 1px solid var(--border);
}

.service-card:nth-last-child(-n + 2) {
border-bottom: 0;
}

.horizontal-accordion {
min-height: 480px;
}

.process {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.process-item:nth-child(2) {
border-right: 0;
}

.process-item:nth-child(-n + 2) {
border-bottom: 1px solid var(--border);
}

.about-hero__grid,
.areas-layout,
.contact-layout {
grid-template-columns: 1fr;
}

.areas-map {
position: relative;
top: auto;
}

.areas-map iframe {
min-height: 420px;
}

.footer__top {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.footer__brand {
grid-column: 1 / -1;
}
}

/* Mobile */

@media (max-width: 767px) {
:root {
--section-space: 8rem;
--section-space-small: 6rem;
--nav-height: 64px;
--emergency-height: 48px;
}

.container,
.container--content {
width: min(calc(100% - 2rem), var(--container));
}

.section-header {
margin-bottom: 2.5rem;
}

.display,
.heading-xl,
.heading-lg {
max-width: 100%;
}

.emergency-banner__inner {
min-height: var(--emergency-height);
}

.emergency-banner__text {
max-width: 58vw;
font-size: 0.78rem;
}

.emergency-banner__link {
font-size: 0.78rem;
}

.nav__brand-sub {
display: none;
}

.hero {
min-height: auto;
padding-block: 3.5rem 5rem;
}

.hero__grid {
grid-template-columns: 1fr;
gap: 2rem;
}

.hero__content {
max-width: 100%;
}

.hero__title {
max-width: 16ch;
font-size: clamp(2.55rem, 12vw, 4rem);
line-height: 0.98;
}

.hero__summary {
max-width: 34ch;
font-size: 1rem;
}

.hero__visual {
min-height: 320px;
max-height: 54dvh;
}

.button-row {
align-items: stretch;
}

.button-row .btn {
width: 100%;
}

.stats__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
}

.stat {
padding: 1.4rem;
}

.stat:first-child {
padding-left: 1.4rem;
}

.stat:last-child {
padding-right: 1.4rem;
}

.stat + .stat {
border-left: 0;
}

.stat:nth-child(even) {
border-left: 1px solid var(--border);
}

.stat:nth-child(-n + 2) {
border-bottom: 1px solid var(--border);
}

.certifications__track {
justify-content: flex-start;
}

.services-bento {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-auto-flow: dense;
}

.service-card,
.service-card:nth-child(1) {
grid-column: auto;
grid-row: auto;
min-height: 230px;
border-right: 0;
border-bottom: 1px solid var(--border);
}

.service-card:last-child {
border-bottom: 0;
}

.service-detail,
.service-detail:nth-child(even) {
grid-template-columns: 1fr;
gap: 2rem;
}

.service-detail:nth-child(even) .service-detail__media {
order: initial;
}

.horizontal-accordion {
display: grid;
min-height: auto;
}

.horizontal-accordion__item,
.horizontal-accordion__item:hover,
.horizontal-accordion__item:focus-within,
.horizontal-accordion__item.is-active {
min-height: 300px;
border-right: 0;
border-bottom: 1px solid var(--border);
}

.horizontal-accordion__item:last-child {
border-bottom: 0;
}

.horizontal-accordion__text {
opacity: 1;
transform: none;
}

.reasons {
grid-template-columns: 1fr;
}

.reason,
.reason:nth-child(even) {
border-right: 0;
}

.process {
grid-template-columns: 1fr;
}

.process-item,
.process-item:nth-child(2) {
border-right: 0;
border-bottom: 1px solid var(--border);
}

.process-item:last-child {
border-bottom: 0;
}

.process-item__index {
margin-bottom: 2rem;
}

.testimonial-stage {
grid-template-columns: 1fr;
gap: 2rem;
}

.testimonial-stage__media {
max-width: 420px;
}

.testimonial__quote {
max-width: 100%;
font-size: clamp(1.65rem, 8vw, 2.6rem);
}

.faq-answer__content {
padding-right: 0;
}

.about-hero {
padding-block: 5rem 8rem;
}

.about-hero__grid,
.story {
grid-template-columns: 1fr;
gap: 2.5rem;
}

.values {
grid-template-columns: 1fr;
}

.value {
min-height: 220px;
}

.area-grid {
grid-template-columns: 1fr;
}

.area-card--featured {
grid-column: auto;
}

.areas-map iframe,
.contact-map iframe {
min-height: 340px;
}

.form-grid {
grid-template-columns: 1fr;
}

.form-field--full {
grid-column: auto;
}

.hours__row {
grid-template-columns: 1fr;
gap: 0.1rem;
}

.cta-panel {
min-height: auto;
grid-template-columns: 1fr;
align-items: start;
padding: 2rem;
}

.cta-panel__title {
max-width: 100%;
font-size: clamp(2.4rem, 12vw, 4rem);
}

.cta-panel .btn {
width: 100%;
}

.emergency-panel {
grid-template-columns: 1fr;
padding: 2rem;
}

.emergency-panel .btn {
width: 100%;
}

.footer__top {
grid-template-columns: 1fr;
}

.footer__brand {
grid-column: auto;
}

.footer__bottom {
align-items: flex-start;
flex-direction: column;
}
}

/* Small phones */

@media (max-width: 420px) {
.hero__title {
font-size: clamp(2.35rem, 11vw, 3.2rem);
}

.nav__brand-mark {
width: 36px;
height: 36px;
}

.stats__grid {
grid-template-columns: 1fr;
}

.stat,
.stat:first-child,
.stat:last-child {
padding: 1.3rem 0;
border-bottom: 1px solid var(--border);
border-left: 0;
}

.stat:nth-child(even) {
border-left: 0;
}

.stat:last-child {
border-bottom: 0;
}

.reason {
grid-template-columns: 1fr;
}
}

/* Reduced transparency fallback */

@media (prefers-reduced-transparency: reduce) {
.site-header {
background: var(--page);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}

*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
transition-delay: 0ms !important;
}

[data-gsap-reveal],
[data-gsap-image],
[data-gsap-text],
.gsap-media-item {
opacity: 1 !important;
transform: none !important;
will-change: auto !important;
}

.hero__visual img,
.service-detail__media img,
.horizontal-accordion__media img {
transform: none !important;
}
}

/*
FUN FACT
Outfit was designed for expressive display typography but remains unusually readable at utility sizes, which makes it a strong fit for a service business that needs character without sacrificing trust.

TASTE NOTE
The strongest move here is restraint: orange means action, navy means authority, photography means evidence, and whitespace means hierarchy. If an element cannot explain its job in one sentence, remove it.

Useful principle:
"Good design makes the important thing obvious before it makes anything impressive."

Vietnamese:
Thiết kế này ưu tiên niềm tin trước: chữ Outfit rõ ràng, navy tạo cảm giác chắc chắn, cam chỉ dành cho hành động, chuyển động rất nhẹ, và mỗi phần có một nhiệm vụ rõ ràng.
*/