@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
--primary: #1B3A5F;
--primary-dark: #112740;
--primary-light: #2E5A8A;
--accent: #F97316;
--accent-dark: #C2540F;
--accent-light: #FDBA74;
--success: #16A34A;
--warning: #F59E0B;
--danger: #DC2626;
--neutral-900: #111827;
--neutral-700: #374151;
--neutral-500: #6B7280;
--neutral-300: #D1D5DB;
--neutral-100: #F3F4F6;
--neutral-50: #F9FAFB;
--white: #FFFFFF;

--font-heading: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

--container-width: 1280px;
--container-padding: 1rem;

--radius-sm: 0.5rem;
--radius-md: 0.75rem;
--radius-lg: 1rem;
--radius-xl: 1.5rem;
--radius-full: 9999px;

--shadow-sm: 0 1px 2px rgba(17, 39, 64, 0.05);
--shadow-md: 0 8px 24px rgba(17, 39, 64, 0.09);
--shadow-lg: 0 18px 48px rgba(17, 39, 64, 0.14);
--shadow-xl: 0 28px 70px rgba(17, 39, 64, 0.18);

--transition-fast: 160ms ease;
--transition-base: 240ms ease;
--transition-slow: 400ms ease;

--header-height: 4.5rem;
}

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

html {
min-width: 320px;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-height) + 1rem);
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
tab-size: 4;
}

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

main {
display: block;
}

section {
position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--neutral-900);
font-family: var(--font-heading);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.035em;
text-wrap: balance;
}

h1 {
font-size: clamp(2rem, 8vw, 3.5rem);
}

h2 {
font-size: clamp(1.75rem, 6vw, 2.5rem);
}

h3 {
font-size: 1.25rem;
}

h4 {
font-size: 1.125rem;
}

p {
text-wrap: pretty;
}

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

a:hover {
text-decoration: none;
}

ul,
ol {
margin: 0;
padding: 0;
}

ul {
list-style: none;
}

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

img {
height: auto;
}

button,
input,
select,
textarea {
margin: 0;
color: inherit;
font: inherit;
}

button,
select {
text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
appearance: button;
}

button {
border: 0;
background: none;
cursor: pointer;
}

textarea {
resize: vertical;
}

iframe {
max-width: 100%;
border: 0;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

[hidden] {
display: none !important;
}

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

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

.skip-link {
position: fixed;
top: 0.75rem;
left: 0.75rem;
z-index: 9999;
transform: translateY(-160%);
padding: 0.75rem 1rem;
border-radius: var(--radius-sm);
background: var(--neutral-900);
color: var(--white);
font-weight: 700;
transition: transform var(--transition-fast);
}

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

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

.container {
width: 100%;
max-width: var(--container-width);
margin-inline: auto;
padding-inline: var(--container-padding);
}

.container-narrow {
width: 100%;
max-width: 800px;
margin-inline: auto;
padding-inline: var(--container-padding);
}

.section {
padding-block: 4.5rem;
}

.section-sm {
padding-block: 3rem;
}

.section-lg {
padding-block: 5.5rem;
}

.section-muted {
background: var(--neutral-50);
}

.section-primary {
background: var(--primary);
color: var(--white);
}

.section-header {
max-width: 48rem;
margin: 0 auto 2.5rem;
text-align: center;
}

.section-header.text-left {
margin-inline: 0;
text-align: left;
}

.section-eyebrow,
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-bottom: 0.75rem;
color: var(--accent-dark);
font-size: 0.75rem;
font-weight: 800;
line-height: 1.3;
letter-spacing: 0.1em;
text-transform: uppercase;
}

.section-eyebrow::before,
.eyebrow::before {
width: 1.75rem;
height: 2px;
border-radius: var(--radius-full);
background: var(--accent);
content: "";
}

.section-title {
margin-bottom: 1rem;
}

.section-description {
color: var(--neutral-500);
font-size: 1rem;
}

.section-primary .section-title,
.section-primary h2,
.section-primary h3 {
color: var(--white);
}

.section-primary .section-description {
color: var(--neutral-300);
}

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

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

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

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

.bg-muted {
background: var(--neutral-50);
}

.grid {
display: grid;
gap: 1.25rem;
}

.stack {
display: flex;
flex-direction: column;
gap: 1rem;
}

.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}

.btn {
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.8rem 1.25rem;
border: 2px solid transparent;
border-radius: var(--radius-md);
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.2;
text-align: center;
white-space: nowrap;
transition:
background-color var(--transition-fast),
border-color var(--transition-fast),
color var(--transition-fast),
box-shadow var(--transition-fast),
transform var(--transition-fast);
}

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

.btn:active {
transform: translateY(0);
}

.btn-primary {
background: var(--accent);
color: var(--white);
box-shadow: 0 8px 24px rgba(249, 115, 22, 0.24);
}

.btn-primary:hover {
background: var(--accent-dark);
box-shadow: 0 12px 30px rgba(249, 115, 22, 0.3);
}

.btn-secondary {
border-color: var(--primary);
background: var(--primary);
color: var(--white);
}

.btn-secondary:hover {
border-color: var(--primary-dark);
background: var(--primary-dark);
}

.btn-outline {
border-color: var(--neutral-300);
background: transparent;
color: var(--neutral-900);
}

.btn-outline:hover {
border-color: var(--primary);
background: var(--neutral-50);
color: var(--primary);
}

.btn-outline-light {
border-color: rgba(255, 255, 255, 0.5);
color: var(--white);
}

.btn-outline-light:hover {
border-color: var(--white);
background: var(--white);
color: var(--primary-dark);
}

.btn-white {
background: var(--white);
color: var(--primary-dark);
}

.btn-white:hover {
background: var(--neutral-100);
}

.btn-lg {
min-height: 52px;
padding: 0.95rem 1.5rem;
font-size: 1rem;
}

.btn-block {
width: 100%;
}

.icon-button {
display: inline-grid;
width: 44px;
min-width: 44px;
height: 44px;
place-items: center;
border-radius: var(--radius-md);
transition:
background-color var(--transition-fast),
color var(--transition-fast);
}

.card {
border: 1px solid var(--neutral-100);
border-radius: var(--radius-lg);
background: var(--white);
box-shadow: var(--shadow-sm);
}

.site-header,
.header {
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
border-bottom: 1px solid rgba(209, 213, 219, 0.55);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 2px 12px rgba(17, 39, 64, 0.04);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}

.header-inner,
.nav-container {
display: flex;
min-height: var(--header-height);
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}

.logo,
.site-logo,
.brand {
display: inline-flex;
flex-shrink: 0;
align-items: center;
gap: 0.65rem;
color: var(--primary-dark);
}

.logo-mark,
.brand-mark {
display: grid;
width: 2.55rem;
height: 2.55rem;
place-items: center;
border-radius: 0.7rem;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: var(--white);
box-shadow: 0 5px 15px rgba(27, 58, 95, 0.18);
}

.logo-text,
.brand-text {
display: flex;
flex-direction: column;
line-height: 1;
}

.logo-name,
.brand-name {
color: var(--primary-dark);
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -0.035em;
}

.logo-subtext,
.brand-subtext {
margin-top: 0.25rem;
color: var(--accent-dark);
font-size: 0.625rem;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
}

.header-phone,
.nav-phone {
display: inline-flex;
min-height: 44px;
flex-shrink: 0;
align-items: center;
gap: 0.35rem;
color: var(--primary-dark);
font-size: 0.8125rem;
font-weight: 800;
}

.header-phone-label {
display: none;
}

.nav-toggle,
.menu-toggle,
.hamburger {
display: inline-grid;
width: 44px;
min-width: 44px;
height: 44px;
place-items: center;
border-radius: var(--radius-sm);
color: var(--primary-dark);
}

.nav-toggle:hover,
.menu-toggle:hover,
.hamburger:hover {
background: var(--neutral-100);
}

.hamburger-lines,
.nav-toggle-lines {
position: relative;
width: 1.35rem;
height: 1rem;
}

.hamburger-lines span,
.nav-toggle-lines span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
border-radius: var(--radius-full);
background: currentColor;
transition:
transform var(--transition-base),
opacity var(--transition-base),
top var(--transition-base);
}

.hamburger-lines span:nth-child(1),
.nav-toggle-lines span:nth-child(1) {
top: 0;
}

.hamburger-lines span:nth-child(2),
.nav-toggle-lines span:nth-child(2) {
top: 0.45rem;
}

.hamburger-lines span:nth-child(3),
.nav-toggle-lines span:nth-child(3) {
top: 0.9rem;
}

.nav-toggle[aria-expanded="true"] .hamburger-lines span:nth-child(1),
.menu-toggle[aria-expanded="true"] .hamburger-lines span:nth-child(1) {
top: 0.45rem;
transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .hamburger-lines span:nth-child(2),
.menu-toggle[aria-expanded="true"] .hamburger-lines span:nth-child(2) {
opacity: 0;
}

.nav-toggle[aria-expanded="true"] .hamburger-lines span:nth-child(3),
.menu-toggle[aria-expanded="true"] .hamburger-lines span:nth-child(3) {
top: 0.45rem;
transform: rotate(-45deg);
}

.site-nav,
.main-nav {
position: absolute;
top: 100%;
right: 0;
left: 0;
display: none;
border-top: 1px solid var(--neutral-100);
border-bottom: 1px solid var(--neutral-100);
background: var(--white);
box-shadow: var(--shadow-lg);
}

.site-nav.is-open,
.site-nav.open,
.site-nav[data-open="true"],
.main-nav.is-open,
.main-nav.open,
.main-nav[data-open="true"] {
display: block;
}

.nav-list {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.75rem var(--container-padding) 1rem;
}

.nav-link,
.nav-list a {
display: flex;
min-height: 44px;
align-items: center;
padding: 0.7rem 0.8rem;
border-radius: var(--radius-sm);
color: var(--neutral-700);
font-size: 0.9375rem;
font-weight: 600;
transition:
background-color var(--transition-fast),
color var(--transition-fast);
}

.nav-link:hover,
.nav-list a:hover,
.nav-link.active,
.nav-link[aria-current="page"],
.nav-list a[aria-current="page"] {
background: var(--neutral-50);
color: var(--primary);
}

.header-actions {
display: flex;
align-items: center;
gap: 0.4rem;
}

.header-actions .btn {
display: none;
}

.hero {
isolation: isolate;
overflow: hidden;
background:
radial-gradient(circle at 85% 15%, rgba(46, 90, 138, 0.42), transparent 32rem),
linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 52%, var(--primary-light) 100%);
color: var(--white);
}

.hero::before {
position: absolute;
inset: 0;
z-index: -1;
opacity: 0.12;
background-image:
linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
background-size: 48px 48px;
content: "";
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent);
}

.hero-inner {
display: grid;
min-height: min(720px, calc(100svh - var(--header-height)));
align-items: center;
gap: 2.5rem;
padding-block: 4.25rem;
}

.hero-content {
max-width: 46rem;
}

.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
padding: 0.45rem 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.08);
color: var(--white);
font-size: 0.75rem;
font-weight: 700;
backdrop-filter: blur(8px);
}

.hero h1,
.hero-title {
max-width: 13ch;
color: var(--white);
font-size: clamp(2rem, 10vw, 3.5rem);
}

.hero-subtitle,
.hero-description {
max-width: 39rem;
margin-top: 1.25rem;
color: rgba(255, 255, 255, 0.82);
font-size: 1rem;
line-height: 1.7;
}

.hero-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.75rem;
}

.hero-actions .btn {
width: 100%;
}

.hero-trust,
.hero-badges {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
margin-top: 2rem;
}

.hero-trust-item,
.hero-badge {
display: flex;
min-height: 3.2rem;
align-items: center;
gap: 0.55rem;
padding: 0.65rem 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.07);
color: var(--white);
font-size: 0.75rem;
font-weight: 600;
backdrop-filter: blur(8px);
}

.hero-trust-icon,
.hero-badge-icon {
display: grid;
width: 1.9rem;
height: 1.9rem;
flex: 0 0 auto;
place-items: center;
border-radius: var(--radius-full);
background: rgba(249, 115, 22, 0.18);
color: var(--accent-light);
}

.hero-media,
.hero-image {
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
}

.hero-media img,
.hero-image img {
width: 100%;
min-height: 20rem;
object-fit: cover;
}

.page-hero {
overflow: hidden;
padding-block: 3.5rem;
background:
radial-gradient(circle at 90% 10%, rgba(46, 90, 138, 0.45), transparent 25rem),
linear-gradient(135deg, var(--primary-dark), var(--primary));
color: var(--white);
}

.page-hero h1,
.page-hero .page-title {
color: var(--white);
font-size: clamp(2rem, 9vw, 3rem);
}

.page-hero p {
max-width: 40rem;
margin-top: 0.9rem;
color: rgba(255, 255, 255, 0.78);
}

.breadcrumbs,
.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem;
margin-bottom: 1rem;
color: rgba(255, 255, 255, 0.72);
font-size: 0.8125rem;
font-weight: 600;
}

.breadcrumbs a:hover,
.breadcrumb a:hover {
color: var(--white);
text-decoration: underline;
}

.trust-bar {
border-bottom: 1px solid var(--neutral-100);
background: var(--white);
}

.trust-bar-inner,
.certification-strip {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
padding-block: 1.5rem;
}

.trust-logo,
.certification-logo {
display: flex;
min-height: 3.25rem;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.6rem;
border-radius: var(--radius-sm);
color: var(--neutral-500);
font-size: 0.75rem;
font-weight: 800;
text-align: center;
letter-spacing: 0.025em;
transition:
background-color var(--transition-fast),
color var(--transition-fast);
}

.trust-logo:hover,
.certification-logo:hover {
background: var(--neutral-50);
color: var(--primary);
}

.services-grid,
.service-grid {
display: grid;
gap: 1rem;
}

.service-card {
position: relative;
display: flex;
min-width: 0;
flex-direction: column;
padding: 1.5rem;
overflow: hidden;
border: 1px solid var(--neutral-100);
border-radius: var(--radius-lg);
background: var(--white);
box-shadow: var(--shadow-sm);
transition:
border-color var(--transition-base),
box-shadow var(--transition-base),
transform var(--transition-base);
}

.service-card:hover {
transform: translateY(-5px);
border-color: var(--neutral-300);
box-shadow: var(--shadow-lg);
}

.service-icon,
.feature-icon,
.value-icon,
.contact-icon {
display: grid;
width: 3.25rem;
height: 3.25rem;
flex: 0 0 auto;
place-items: center;
border-radius: var(--radius-md);
background: rgba(27, 58, 95, 0.08);
color: var(--primary);
}

.service-card h3 {
margin-top: 1.25rem;
color: var(--primary-dark);
}

.service-card p {
margin-top: 0.7rem;
color: var(--neutral-500);
font-size: 0.9375rem;
}

.service-card-link,
.learn-more {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: auto;
padding-top: 1.15rem;
color: var(--accent-dark);
font-size: 0.875rem;
font-weight: 700;
}

.service-card-link:hover,
.learn-more:hover {
color: var(--accent);
}

.service-card-link svg,
.learn-more svg {
transition: transform var(--transition-fast);
}

.service-card-link:hover svg,
.learn-more:hover svg {
transform: translateX(3px);
}

.service-detail {
display: grid;
align-items: center;
gap: 2rem;
padding-block: 3.5rem;
border-bottom: 1px solid var(--neutral-100);
}

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

.service-detail-media {
overflow: hidden;
border-radius: var(--radius-xl);
background: var(--neutral-100);
}

.service-detail-media img {
width: 100%;
min-height: 18rem;
object-fit: cover;
}

.service-detail-content h2 {
margin-bottom: 1rem;
}

.service-detail-content > p {
color: var(--neutral-500);
}

.service-features,
.check-list {
display: grid;
gap: 0.7rem;
margin-top: 1.25rem;
}

.service-features li,
.check-list li {
position: relative;
padding-left: 1.75rem;
color: var(--neutral-700);
font-size: 0.9375rem;
}

.service-features li::before,
.check-list li::before {
position: absolute;
top: 0.16rem;
left: 0;
display: grid;
width: 1.15rem;
height: 1.15rem;
place-items: center;
border-radius: var(--radius-full);
background: rgba(22, 163, 74, 0.12);
color: var(--success);
content: "✓";
font-size: 0.72rem;
font-weight: 900;
}

.service-price {
margin-top: 1.25rem;
color: var(--neutral-500);
font-size: 0.8125rem;
font-weight: 600;
}

.service-price strong {
display: block;
margin-top: 0.1rem;
color: var(--primary-dark);
font-size: 1.6rem;
font-weight: 800;
}

.service-detail-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.5rem;
}

.feature-grid,
.why-grid,
.values-grid,
.certifications-grid,
.contact-info-grid,
.areas-grid {
display: grid;
gap: 1rem;
}

.feature-card,
.why-card,
.value-card,
.certification-card,
.contact-card,
.area-card {
padding: 1.4rem;
border: 1px solid var(--neutral-100);
border-radius: var(--radius-lg);
background: var(--white);
box-shadow: var(--shadow-sm);
transition:
border-color var(--transition-base),
box-shadow var(--transition-base),
transform var(--transition-base);
}

.feature-card:hover,
.why-card:hover,
.value-card:hover,
.certification-card:hover,
.contact-card:hover,
.area-card:hover {
transform: translateY(-3px);
border-color: var(--neutral-300);
box-shadow: var(--shadow-md);
}

.feature-card h3,
.why-card h3,
.value-card h3,
.certification-card h3,
.contact-card h3,
.area-card h3 {
margin-top: 1rem;
font-size: 1.1rem;
}

.feature-card p,
.why-card p,
.value-card p,
.certification-card p,
.contact-card p,
.area-card p {
margin-top: 0.55rem;
color: var(--neutral-500);
font-size: 0.9rem;
}

.stats-section,
.stats-bar {
background: var(--primary-dark);
color: var(--white);
}

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

.stat-item,
.stat {
padding: 1.5rem 0.75rem;
text-align: center;
}

.stat-item:nth-child(odd),
.stat:nth-child(odd) {
border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.stat-item:nth-child(-n + 2),
.stat:nth-child(-n + 2) {
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.stat-value,
.stat-number {
display: block;
color: var(--white);
font-family: var(--font-heading);
font-size: clamp(1.8rem, 9vw, 2.75rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.045em;
}

.stat-label {
display: block;
margin-top: 0.45rem;
color: var(--neutral-300);
font-size: 0.75rem;
font-weight: 600;
}

.emergency-banner,
.emergency-section {
overflow: hidden;
background: linear-gradient(135deg, var(--accent-dark), var(--accent));
color: var(--white);
}

.emergency-inner {
display: grid;
align-items: center;
gap: 1.5rem;
padding-block: 2.75rem;
}

.emergency-content {
max-width: 48rem;
}

.emergency-label {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-bottom: 0.6rem;
color: var(--white);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}

.emergency-banner h2,
.emergency-section h2,
.emergency-title {
color: var(--white);
}

.emergency-banner p,
.emergency-section p {
margin-top: 0.75rem;
color: rgba(255, 255, 255, 0.9);
}

.emergency-actions {
display: flex;
flex-direction: column;
gap: 0.7rem;
}

.emergency-phone {
display: inline-flex;
min-height: 52px;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.9rem 1.2rem;
border-radius: var(--radius-md);
background: var(--white);
color: var(--primary-dark);
font-size: 1rem;
font-weight: 800;
box-shadow: var(--shadow-md);
transition:
transform var(--transition-fast),
box-shadow var(--transition-fast);
}

.emergency-phone:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}

.emergency-response {
color: rgba(255, 255, 255, 0.86);
font-size: 0.8125rem;
font-weight: 600;
text-align: center;
}

.reviews-carousel,
.review-carousel {
position: relative;
overflow: hidden;
}

.reviews-track,
.review-track {
display: flex;
gap: 1rem;
overflow-x: auto;
padding: 0.2rem 0.1rem 1.25rem;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: none;
overscroll-behavior-inline: contain;
}

.reviews-track::-webkit-scrollbar,
.review-track::-webkit-scrollbar {
display: none;
}

.review-card {
min-width: min(88vw, 25rem);
flex: 0 0 min(88vw, 25rem);
padding: 1.5rem;
border: 1px solid var(--neutral-100);
border-radius: var(--radius-lg);
background: var(--white);
box-shadow: var(--shadow-sm);
scroll-snap-align: start;
}

.review-stars,
.stars {
display: flex;
gap: 0.15rem;
color: var(--warning);
font-size: 1rem;
letter-spacing: 0.03em;
}

.review-text,
.review-card blockquote {
margin-top: 1rem;
color: var(--neutral-700);
font-size: 0.9375rem;
line-height: 1.75;
}

.review-author {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 1.25rem;
padding-top: 1.1rem;
border-top: 1px solid var(--neutral-100);
}

.review-avatar {
display: grid;
width: 2.75rem;
height: 2.75rem;
flex: 0 0 auto;
place-items: center;
border-radius: var(--radius-full);
background: var(--primary);
color: var(--white);
font-size: 0.85rem;
font-weight: 800;
}

.review-author-info {
min-width: 0;
}

.review-name {
color: var(--neutral-900);
font-size: 0.875rem;
font-weight: 700;
}

.review-location,
.review-meta {
margin-top: 0.1rem;
color: var(--neutral-500);
font-size: 0.75rem;
}

.review-service {
display: inline-flex;
margin-top: 0.45rem;
padding: 0.25rem 0.5rem;
border-radius: var(--radius-full);
background: var(--neutral-100);
color: var(--primary);
font-size: 0.6875rem;
font-weight: 700;
}

.carousel-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
margin-top: 1.25rem;
}

.carousel-button,
.carousel-prev,
.carousel-next {
display: grid;
width: 44px;
height: 44px;
place-items: center;
border: 1px solid var(--neutral-300);
border-radius: var(--radius-full);
background: var(--white);
color: var(--primary);
box-shadow: var(--shadow-sm);
transition:
background-color var(--transition-fast),
border-color var(--transition-fast),
color var(--transition-fast),
transform var(--transition-fast);
}

.carousel-button:hover,
.carousel-prev:hover,
.carousel-next:hover {
transform: translateY(-2px);
border-color: var(--primary);
background: var(--primary);
color: var(--white);
}

.carousel-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin-top: 1rem;
}

.carousel-dot {
width: 0.55rem;
height: 0.55rem;
padding: 0;
border-radius: var(--radius-full);
background: var(--neutral-300);
transition:
background-color var(--transition-fast),
width var(--transition-fast);
}

.carousel-dot.active,
.carousel-dot[aria-current="true"] {
width: 1.5rem;
background: var(--accent);
}

.process-grid,
.process-list {
display: grid;
gap: 1rem;
counter-reset: process;
}

.process-step {
position: relative;
padding: 1.5rem;
border: 1px solid var(--neutral-100);
border-radius: var(--radius-lg);
background: var(--white);
box-shadow: var(--shadow-sm);
}

.process-number,
.step-number {
display: grid;
width: 3rem;
height: 3rem;
place-items: center;
border-radius: var(--radius-full);
background: var(--primary);
color: var(--white);
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 800;
box-shadow: 0 6px 16px rgba(27, 58, 95, 0.2);
}

.process-step h3 {
margin-top: 1rem;
color: var(--primary-dark);
}

.process-step p {
margin-top: 0.6rem;
color: var(--neutral-500);
font-size: 0.9rem;
}

.faq-list,
.accordion {
display: grid;
gap: 0.75rem;
max-width: 52rem;
margin-inline: auto;
}

.faq-item,
.accordion-item {
overflow: hidden;
border: 1px solid var(--neutral-100);
border-radius: var(--radius-md);
background: var(--white);
box-shadow: var(--shadow-sm);
transition:
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}

.faq-item:has(.faq-question[aria-expanded="true"]),
.accordion-item:has(.accordion-trigger[aria-expanded="true"]) {
border-color: rgba(27, 58, 95, 0.25);
box-shadow: var(--shadow-md);
}

.faq-question,
.accordion-trigger {
display: flex;
width: 100%;
min-height: 56px;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.1rem;
color: var(--neutral-900);
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.4;
text-align: left;
}

.faq-question:hover,
.accordion-trigger:hover {
background: var(--neutral-50);
}

.faq-icon,
.accordion-icon {
position: relative;
width: 1.25rem;
height: 1.25rem;
flex: 0 0 auto;
}

.faq-icon::before,
.faq-icon::after,
.accordion-icon::before,
.accordion-icon::after {
position: absolute;
top: 50%;
left: 50%;
width: 0.8rem;
height: 2px;
border-radius: var(--radius-full);
background: var(--primary);
content: "";
transition: transform var(--transition-base);
}

.faq-icon::before,
.accordion-icon::before {
transform: translate(-50%, -50%);
}

.faq-icon::after,
.accordion-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}

.faq-question[aria-expanded="true"] .faq-icon::after,
.accordion-trigger[aria-expanded="true"] .accordion-icon::after {
transform: translate(-50%, -50%) rotate(0);
}

.faq-answer,
.accordion-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--transition-slow);
}

.faq-answer > div,
.accordion-panel > div {
overflow: hidden;
}

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

.faq-answer p,
.accordion-panel p {
padding: 0 1.1rem 1.1rem;
color: var(--neutral-500);
font-size: 0.9rem;
}

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

.area-card {
display: flex;
flex-direction: column;
}

.area-card h3 {
margin-top: 0;
}

.area-zips,
.zip-codes {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.8rem;
}

.area-zips span,
.zip-code {
padding: 0.22rem 0.5rem;
border-radius: var(--radius-full);
background: var(--neutral-100);
color: var(--neutral-700);
font-size: 0.7rem;
font-weight: 600;
}

.area-card .learn-more {
margin-top: auto;
}

.map-wrapper,
.map-container,
.coverage-map {
position: relative;
overflow: hidden;
min-height: 20rem;
border: 1px solid var(--neutral-100);
border-radius: var(--radius-lg);
background: var(--neutral-100);
}

.map-wrapper iframe,
.map-container iframe {
width: 100%;
height: 100%;
min-height: 20rem;
}

.placeholder-media,
.image-placeholder,
.map-placeholder {
display: grid;
min-height: 18rem;
place-items: center;
padding: 2rem;
border: 1px dashed var(--neutral-300);
border-radius: var(--radius-lg);
background:
linear-gradient(135deg, var(--neutral-50), var(--neutral-100));
color: var(--neutral-500);
text-align: center;
}

.story-layout,
.about-layout,
.contact-layout,
.split-layout {
display: grid;
align-items: start;
gap: 2rem;
}

.story-content p + p,
.about-content p + p {
margin-top: 1rem;
}

.story-media,
.about-media {
overflow: hidden;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
}

.story-media img,
.about-media img {
width: 100%;
object-fit: cover;
}

.mission-card,
.maintenance-card,
.comfort-club {
padding: 1.75rem;
border: 1px solid rgba(27, 58, 95, 0.12);
border-radius: var(--radius-xl);
background: linear-gradient(135deg, rgba(27, 58, 95, 0.05), rgba(46, 90, 138, 0.09));
}

.mission-card h2,
.maintenance-card h2,
.comfort-club h2 {
color: var(--primary-dark);
}

.timeline {
position: relative;
display: grid;
gap: 0;
max-width: 48rem;
margin-inline: auto;
}

.timeline::before {
position: absolute;
top: 0;
bottom: 0;
left: 1.25rem;
width: 2px;
background: var(--neutral-300);
content: "";
}

.timeline-item {
position: relative;
padding: 0 0 2rem 3.5rem;
}

.timeline-item:last-child {
padding-bottom: 0;
}

.timeline-dot {
position: absolute;
top: 0.1rem;
left: 0.72rem;
width: 1.1rem;
height: 1.1rem;
border: 4px solid var(--white);
border-radius: var(--radius-full);
background: var(--accent);
box-shadow: 0 0 0 2px var(--accent);
}

.timeline-year {
color: var(--accent-dark);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.timeline-item h3 {
margin-top: 0.25rem;
}

.timeline-item p {
margin-top: 0.4rem;
color: var(--neutral-500);
font-size: 0.9rem;
}

.contact-form,
.quote-form {
padding: 1.5rem;
border: 1px solid var(--neutral-100);
border-radius: var(--radius-xl);
background: var(--white);
box-shadow: var(--shadow-md);
}

.form-grid {
display: grid;
gap: 1rem;
}

.form-group,
.form-field {
display: grid;
gap: 0.4rem;
}

.form-group label,
.form-field label {
color: var(--neutral-900);
font-size: 0.8125rem;
font-weight: 700;
}

.required {
color: var(--danger);
}

.form-control,
.form-group input,
.form-group select,
.form-group textarea,
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
min-height: 46px;
padding: 0.75rem 0.85rem;
border: 1px solid var(--neutral-300);
border-radius: var(--radius-sm);
outline: none;
background: var(--white);
color: var(--neutral-900);
font-size: 0.9375rem;
line-height: 1.4;
transition:
border-color var(--transition-fast),
box-shadow var(--transition-fast),
background-color var(--transition-fast);
}

.form-group textarea,
.form-field textarea,
textarea.form-control {
min-height: 8rem;
line-height: 1.6;
}

.form-control::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder,
.form-field input::placeholder,
.form-field textarea::placeholder {
color: var(--neutral-500);
opacity: 0.8;
}

.form-control:hover,
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover,
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
border-color: var(--neutral-500);
}

.form-control:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(27, 58, 95, 0.12);
}

.form-control[aria-invalid="true"],
.form-group input[aria-invalid="true"],
.form-group select[aria-invalid="true"],
.form-group textarea[aria-invalid="true"] {
border-color: var(--danger);
}

.form-control[aria-invalid="true"]:focus,
.form-group input[aria-invalid="true"]:focus,
.form-group select[aria-invalid="true"]:focus,
.form-group textarea[aria-invalid="true"]:focus {
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.form-error,
.error-message {
color: var(--danger);
font-size: 0.75rem;
font-weight: 600;
}

.form-help {
color: var(--neutral-500);
font-size: 0.75rem;
}

.form-success,
.success-message {
padding: 1rem;
border: 1px solid rgba(22, 163, 74, 0.25);
border-radius: var(--radius-md);
background: rgba(22, 163, 74, 0.08);
color: var(--success);
font-size: 0.875rem;
font-weight: 600;
}

.form-error-box {
padding: 1rem;
border: 1px solid rgba(220, 38, 38, 0.25);
border-radius: var(--radius-md);
background: rgba(220, 38, 38, 0.06);
color: var(--danger);
font-size: 0.875rem;
font-weight: 600;
}

.radio-group,
.checkbox-group,
.urgency-options {
display: grid;
gap: 0.6rem;
}

.radio-option,
.checkbox-option,
.urgency-option {
display: flex;
min-height: 44px;
align-items: center;
gap: 0.65rem;
padding: 0.65rem 0.75rem;
border: 1px solid var(--neutral-300);
border-radius: var(--radius-sm);
cursor: pointer;
}

.radio-option:has(input:checked),
.checkbox-option:has(input:checked),
.urgency-option:has(input:checked) {
border-color: var(--primary);
background: rgba(27, 58, 95, 0.05);
}

.radio-option input,
.checkbox-option input,
.urgency-option input {
width: 1.1rem;
height: 1.1rem;
accent-color: var(--primary);
}

.contact-card a {
color: var(--primary);
font-weight: 700;
}

.contact-card a:hover {
color: var(--accent-dark);
text-decoration: underline;
}

.contact-emergency {
padding: 1.5rem;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--accent-dark), var(--accent));
color: var(--white);
}

.contact-emergency h2,
.contact-emergency h3 {
color: var(--white);
}

.contact-emergency p {
margin-top: 0.65rem;
color: rgba(255, 255, 255, 0.9);
}

.final-cta,
.cta-section {
overflow: hidden;
background:
radial-gradient(circle at 80% 30%, rgba(46, 90, 138, 0.65), transparent 30rem),
var(--primary-dark);
color: var(--white);
}

.cta-inner {
max-width: 52rem;
margin-inline: auto;
padding-block: 4rem;
text-align: center;
}

.final-cta h2,
.cta-section h2,
.cta-title {
color: var(--white);
}

.final-cta p,
.cta-section p {
max-width: 40rem;
margin: 1rem auto 0;
color: var(--neutral-300);
}

.cta-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.75rem;
}

.cta-phone {
display: inline-block;
margin-top: 1.25rem;
color: var(--white);
font-size: 1.2rem;
font-weight: 800;
}

.cta-phone:hover {
color: var(--accent-light);
}

.site-footer,
.footer {
background: var(--neutral-900);
color: var(--neutral-300);
}

.footer-main {
display: grid;
gap: 2rem;
padding-block: 3.5rem 2.5rem;
}

.footer-brand .logo-name,
.footer-brand .brand-name {
color: var(--white);
}

.footer-description {
max-width: 24rem;
margin-top: 1rem;
color: var(--neutral-300);
font-size: 0.875rem;
}

.footer-social,
.social-links {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-top: 1.25rem;
}

.footer-social a,
.social-links a {
display: grid;
width: 42px;
height: 42px;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius-sm);
color: var(--white);
transition:
background-color var(--transition-fast),
border-color var(--transition-fast),
color var(--transition-fast);
}

.footer-social a:hover,
.social-links a:hover {
border-color: var(--accent);
background: var(--accent);
}

.footer-column h3,
.footer-heading {
margin-bottom: 0.9rem;
color: var(--white);
font-size: 0.9375rem;
letter-spacing: -0.01em;
}

.footer-links,
.footer-contact,
.footer-hours {
display: grid;
gap: 0.6rem;
}

.footer-links a,
.footer-contact a {
color: var(--neutral-300);
font-size: 0.85rem;
transition: color var(--transition-fast);
}

.footer-links a:hover,
.footer-contact a:hover {
color: var(--white);
}

.footer-contact li,
.footer-hours li {
color: var(--neutral-300);
font-size: 0.85rem;
}

.footer-hours li {
display: flex;
justify-content: space-between;
gap: 1rem;
}

.footer-hours span:last-child {
color: var(--white);
text-align: right;
}

.footer-bottom {
padding-block: 1.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom-inner {
display: flex;
flex-direction: column;
gap: 0.75rem;
color: var(--neutral-500);
font-size: 0.75rem;
}

.footer-legal {
display: flex;
flex-wrap: wrap;
gap: 0.8rem 1rem;
}

.footer-legal a:hover {
color: var(--white);
}

.license-info {
color: var(--neutral-500);
font-size: 0.75rem;
}

.badges-grid,
.trust-badges {
display: grid;
gap: 0.75rem;
}

.trust-badge {
display: flex;
min-height: 3rem;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 0.8rem;
border: 1px solid var(--neutral-100);
border-radius: var(--radius-md);
background: var(--white);
color: var(--neutral-700);
font-size: 0.8rem;
font-weight: 700;
}

.trust-badge::before {
display: grid;
width: 1.5rem;
height: 1.5rem;
flex: 0 0 auto;
place-items: center;
border-radius: var(--radius-full);
background: rgba(22, 163, 74, 0.1);
color: var(--success);
content: "✓";
font-size: 0.75rem;
font-weight: 900;
}

.certification-badge {
display: grid;
min-height: 5rem;
place-items: center;
padding: 1rem;
border-radius: var(--radius-md);
background: var(--neutral-50);
color: var(--primary);
font-weight: 800;
text-align: center;
}

.notice {
padding: 0.8rem 1rem;
border-radius: var(--radius-sm);
background: var(--neutral-100);
color: var(--neutral-700);
font-size: 0.875rem;
}

.notice-success {
background: rgba(22, 163, 74, 0.08);
color: var(--success);
}

.notice-warning {
background: rgba(245, 158, 11, 0.1);
color: var(--warning);
}

.notice-danger {
background: rgba(220, 38, 38, 0.08);
color: var(--danger);
}

.price-highlight {
color: var(--accent-dark);
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 800;
}

.divider {
width: 100%;
height: 1px;
border: 0;
background: var(--neutral-100);
}

[data-animate],
.fade-in-up,
.reveal {
will-change: transform, opacity;
}

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

.pulse {
animation: emergency-pulse 2s ease-in-out infinite;
}

@keyframes emergency-pulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.25);
}

50% {
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}
}

@media (min-width: 640px) {
:root {
--container-padding: 1.5rem;
}

.section {
padding-block: 5rem;
}

.section-sm {
padding-block: 3.5rem;
}

.section-lg {
padding-block: 6rem;
}

.section-description,
.hero-subtitle,
.hero-description {
font-size: 1.0625rem;
}

.hero-inner {
padding-block: 5rem;
}

.hero-actions,
.cta-actions,
.emergency-actions {
flex-direction: row;
align-items: center;
}

.hero-actions .btn,
.cta-actions .btn {
width: auto;
}

.hero-trust,
.hero-badges {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.trust-bar-inner,
.certification-strip {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.services-grid,
.service-grid,
.feature-grid,
.why-grid,
.values-grid,
.certifications-grid,
.contact-info-grid,
.areas-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

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

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

.radio-group,
.checkbox-group,
.urgency-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

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

.footer-bottom-inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
}

.review-card {
min-width: 22rem;
flex-basis: 22rem;
}
}

@media (min-width: 768px) {
:root {
--header-height: 5rem;
}

h3 {
font-size: 1.375rem;
}

.page-hero {
padding-block: 4.5rem;
}

.trust-bar-inner,
.certification-strip {
grid-template-columns: repeat(5, minmax(0, 1fr));
}

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

.stat-item,
.stat {
padding: 2rem 1rem;
}

.stat-item:nth-child(n),
.stat:nth-child(n) {
border-bottom: 0;
}

.stat-item:not(:last-child),
.stat:not(:last-child) {
border-right: 1px solid rgba(255, 255, 255, 0.12);
}

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

.process-step {
padding: 1.75rem;
}

.emergency-inner {
grid-template-columns: minmax(0, 1fr) auto;
gap: 2rem;
padding-block: 3rem;
}

.emergency-actions {
flex-direction: column;
align-items: stretch;
min-width: 14rem;
}

.service-detail,
.story-layout,
.about-layout,
.contact-layout,
.split-layout {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3rem;
}

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

.service-detail:nth-child(even) .service-detail-content {
order: 1;
}

.service-detail {
padding-block: 4.5rem;
}

.timeline::before {
left: 50%;
transform: translateX(-50%);
}

.timeline-item {
width: 50%;
padding: 0 3rem 3rem 0;
text-align: right;
}

.timeline-item:nth-child(even) {
margin-left: 50%;
padding: 0 0 3rem 3rem;
text-align: left;
}

.timeline-dot {
top: 0.1rem;
right: -0.55rem;
left: auto;
}

.timeline-item:nth-child(even) .timeline-dot {
right: auto;
left: -0.55rem;
}

.footer-main {
grid-template-columns: 1.5fr repeat(2, 1fr);
}

.footer-brand {
grid-column: auto;
}
}

@media (min-width: 1024px) {
:root {
--container-padding: 2rem;
}

.section {
padding-block: 6rem;
}

.section-lg {
padding-block: 7rem;
}

.nav-toggle,
.menu-toggle,
.hamburger {
display: none;
}

.site-nav,
.main-nav {
position: static;
display: block !important;
border: 0;
background: transparent;
box-shadow: none;
}

.nav-list {
flex-direction: row;
align-items: center;
gap: 0.15rem;
padding: 0;
}

.nav-link,
.nav-list a {
min-height: 42px;
padding: 0.6rem 0.75rem;
background: transparent;
}

.nav-link:hover,
.nav-list a:hover,
.nav-link.active,
.nav-link[aria-current="page"],
.nav-list a[aria-current="page"] {
background: transparent;
color: var(--primary);
}

.nav-link.active::after,
.nav-link[aria-current="page"]::after,
.nav-list a[aria-current="page"]::after {
position: absolute;
right: 0.75rem;
bottom: 0.25rem;
left: 0.75rem;
height: 2px;
border-radius: var(--radius-full);
background: var(--accent);
content: "";
}

.nav-link,
.nav-list a {
position: relative;
}

.header-actions {
gap: 0.75rem;
}

.header-actions .btn {
display: inline-flex;
}

.header-phone {
font-size: 0.875rem;
}

.header-phone-label {
display: inline;
}

.hero-inner {
grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
gap: 4rem;
padding-block: 6.5rem;
}

.hero-subtitle,
.hero-description {
font-size: 1.125rem;
}

.hero-trust,
.hero-badges {
max-width: 43rem;
}

.services-grid,
.service-grid,
.feature-grid,
.why-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.values-grid,
.certifications-grid,
.contact-info-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.process-grid,
.process-list {
position: relative;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.25rem;
}

.process-grid::before,
.process-list::before {
position: absolute;
top: 1.5rem;
right: 11%;
left: 11%;
z-index: 0;
height: 2px;
background: var(--neutral-300);
content: "";
}

.process-step {
z-index: 1;
border: 0;
background: transparent;
box-shadow: none;
text-align: center;
}

.process-number,
.step-number {
margin-inline: auto;
box-shadow:
0 0 0 8px var(--white),
0 6px 16px rgba(27, 58, 95, 0.2);
}

.section-muted .process-number,
.section-muted .step-number {
box-shadow:
0 0 0 8px var(--neutral-50),
0 6px 16px rgba(27, 58, 95, 0.2);
}

.review-card {
min-width: calc((100% - 2rem) / 3);
flex-basis: calc((100% - 2rem) / 3);
}

.contact-form,
.quote-form {
padding: 2rem;
}

.footer-main {
grid-template-columns: 1.6fr repeat(4, 1fr);
gap: 2.5rem;
padding-block: 4.5rem 3rem;
}
}

@media (min-width: 1280px) {
:root {
--container-padding: 2rem;
}

.section {
padding-block: 7rem;
}

.section-lg {
padding-block: 8rem;
}

.hero-inner {
min-height: 720px;
gap: 5rem;
}

.hero h1,
.hero-title {
font-size: 3.5rem;
}

.page-hero {
padding-block: 5.25rem;
}

.service-card {
padding: 1.75rem;
}

.feature-card,
.why-card,
.value-card,
.certification-card,
.contact-card,
.area-card {
padding: 1.6rem;
}

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

@media (hover: hover) and (pointer: fine) {
a,
button,
.btn,
.service-card,
.feature-card,
.why-card,
.value-card,
.certification-card,
.contact-card,
.area-card {
-webkit-tap-highlight-color: transparent;
}
}

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}

[data-animate],
.fade-in-up,
.reveal {
opacity: 1 !important;
transform: none !important;
}

.reviews-track,
.review-track {
scroll-behavior: auto;
}

.pulse {
animation: none;
}
}

@media print {
*,
*::before,
*::after {
background: transparent !important;
box-shadow: none !important;
color: #000000 !important;
text-shadow: none !important;
}

html,
body {
width: 100%;
overflow: visible;
background: #FFFFFF !important;
font-size: 11pt;
line-height: 1.45;
}

.site-header,
.header {
position: static;
border-bottom: 1px solid #000000;
backdrop-filter: none;
}

.nav-toggle,
.menu-toggle,
.hamburger,
.site-nav,
.main-nav,
.header-actions,
.hero-actions,
.cta-actions,
.carousel-controls,
.carousel-dots,
.footer-social,
.social-links,
.btn,
button,
.skip-link,
.emergency-actions {
display: none !important;
}

.hero,
.page-hero,
.emergency-banner,
.emergency-section,
.final-cta,
.cta-section,
.stats-section,
.stats-bar,
.site-footer,
.footer {
border: 1px solid #000000;
}

.hero-inner {
min-height: 0;
padding-block: 1.5rem;
}

.section,
.section-sm,
.section-lg {
padding-block: 1.5rem;
}

.service-card,
.feature-card,
.why-card,
.value-card,
.certification-card,
.contact-card,
.area-card,
.review-card,
.faq-item,
.accordion-item,
.contact-form,
.quote-form,
.process-step {
break-inside: avoid;
border: 1px solid #BBBBBB;
}

.reviews-track,
.review-track {
display: block;
overflow: visible;
}

.review-card {
width: 100%;
min-width: 0;
margin-bottom: 1rem;
}

.faq-answer,
.accordion-panel {
display: block !important;
grid-template-rows: 1fr !important;
}

.faq-answer > div,
.accordion-panel > div {
overflow: visible;
}

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

a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.8em;
word-break: break-all;
}

a[href^="tel:"]::after,
a[href^="mailto:"]::after,
.logo::after,
.site-logo::after,
.brand::after {
content: none;
}

h1,
h2,
h3 {
break-after: avoid;
}

img,
svg {
break-inside: avoid;
}

@page {
margin: 1.5cm;
}
}

/* ==========================================================================
   Navigation (desktop-nav / mobile-nav) — rendered by app.js
   ========================================================================== */

/* Desktop nav: hidden on mobile; shown as flex row on desktop */
.desktop-nav {
  display: none;
}

/* Mobile dropdown: absolute below the sticky header, hidden by default */
.mobile-nav {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  max-height: calc(100svh - var(--header-height));
  overflow-y: auto;
  border-top: 1px solid var(--neutral-100);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

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

.mobile-nav.is-open {
  display: block;
}

.mobile-nav > .container {
  padding-block: 1rem 1.25rem;
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav-list .nav-link {
  display: block;
  min-height: 48px;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--neutral-100);
  border-radius: 0;
  color: var(--neutral-700);
  transition: color var(--transition-base);
}

.mobile-nav-list .nav-link:hover,
.mobile-nav-list .nav-link:focus-visible {
  color: var(--primary);
}

.mobile-nav-list .nav-link.active,
.mobile-nav-list .nav-link[aria-current="page"] {
  color: var(--accent-dark);
  font-weight: 700;
}

.mobile-nav-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.mobile-nav-actions .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* Hamburger button: app.js renders it as a bare button with 3 spans */
.menu-toggle {
  display: flex;
  width: 44px;
  min-width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--primary-dark);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: var(--radius-full);
  background: currentColor;
  transition:
    transform var(--transition-base),
    opacity var(--transition-base);
}

.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 1024px) {
  .desktop-nav {
    display: flex;
    align-items: center;
  }

  .mobile-nav,
  .mobile-nav.is-open,
  .menu-toggle {
    display: none;
  }
}