:root {
  --font-heading: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --red: #B80909;
  --red-dark: #8F0505;
  --ink: #1E3749;
  --paper: #F2F2F2;
  --line: rgba(30, 55, 73, .16);
}

html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font-size: 16px; line-height: 1.65; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background-image: linear-gradient(rgba(30,55,73,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(30,55,73,.055) 1px, transparent 1px); background-size: 28px 28px; }
a { text-decoration: none; }
h1, h2, h3, h4 { letter-spacing: -.035em; line-height: 1.05; }
h1 { font-size: clamp(35px, 7.4vw, 72px); }
h2 { font-size: clamp(28px, 5.1vw, 46px); }
h3, h4 { font-size: 20px; }
p, li, td, th, summary, input, textarea, button { font-size: 16px; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 78px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--font-heading); font-size: 24px; font-weight: 900; letter-spacing: -.04em; }
.logo img { width: 42px; height: 42px; border-radius: 12px; }
.desktop-nav a { color: var(--ink); font-size: 18px; font-weight: 750; }
.desktop-nav a:hover { color: var(--red); }
.header-phone { display: none !important; align-items: center; gap: 8px; white-space: nowrap; background: var(--ink); color: #fff !important; border-radius: 999px; padding: 12px 17px; font-size: 18px; font-weight: 850; box-shadow: 0 16px 30px rgba(30,55,73,.16); }
.hamburger { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 15px; background: #fff; color: var(--ink); }
.mobile-menu { display: none; border-top: 1px solid var(--line); background: #fff; }
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; color: var(--ink); font-size: 18px; font-weight: 800; padding: 13px 0; }
.mobile-menu .mobile-phone { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; width: 100%; margin: 12px 0 18px; background: var(--red); color: #fff !important; border-radius: 16px; padding: 13px 14px; font-size: 18px; font-weight: 900; }

.btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 18px; padding: 15px 22px; font-weight: 900; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; white-space: nowrap; }
.btn-primary { background: var(--red); color: #fff !important; box-shadow: 0 20px 38px rgba(184,9,9,.25); }
.btn-primary:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 26px 46px rgba(184,9,9,.32); }
.btn-secondary { background: #fff; color: var(--ink) !important; border: 1px solid rgba(30,55,73,.18); }
.btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(30,55,73,.12); }

.hero { background: var(--paper); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -140px; top: -140px; width: 420px; height: 420px; border: 1px solid rgba(184,9,9,.22); border-radius: 999px; }
.hero-card { clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 34px 100%, 0 calc(100% - 34px)); background: #fff; border: 1px solid rgba(30,55,73,.18); box-shadow: 0 26px 70px rgba(30,55,73,.12); }
.hero-image { aspect-ratio: 1 / 1; width: 100%; height: 100%; object-fit: cover; clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 38px 100%, 0 calc(100% - 38px)); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--red); font-weight: 950; letter-spacing: .09em; text-transform: uppercase; font-size: 13px; }
.stars { color: var(--red); font-size: 24px; letter-spacing: 2px; line-height: 1; }
.hero-icons img { width: auto; height: 48px; max-width: 82px; object-fit: contain; border: 1px solid rgba(30,55,73,.18); border-radius: 14px; background: #fff; padding: 7px; }
.stat-card { background: var(--ink); color: #fff; border-radius: 22px; padding: 18px; }
.stat-card strong { display: block; color: #fff; font-size: 28px; line-height: 1; }

.section { padding: 76px 0; }
.blueprint { position: relative; background: #fff; }
.blueprint::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(30,55,73,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(30,55,73,.06) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent); }
.cut-card { position: relative; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); border: 1px solid rgba(30,55,73,.15); background: #fff; box-shadow: 0 18px 44px rgba(30,55,73,.08); }
.dark-card { background: var(--ink); color: #fff; }
.dark-card h2, .dark-card h3, .dark-card h4, .dark-card p, .dark-card li { color: #fff; }
.red-rule { width: 76px; height: 5px; background: var(--red); border-radius: 999px; }
.two-col { display: grid; gap: 28px; align-items: stretch; }
.two-col .text-col { order: 1; }
.two-col .media-col { order: 2; }
.media-col img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; border-radius: 28px; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); }
.outline-appliance { min-height: 260px; border: 2px solid rgba(184,9,9,.32); border-radius: 28px; background: linear-gradient(135deg, #fff, #f7f7f7); position: relative; overflow: hidden; }
.outline-appliance svg { width: 100%; height: 100%; min-height: 260px; }
.draw-path { stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawLine 3.6s ease forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.review-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
.review-card { min-width: 86%; scroll-snap-align: start; }
.review-card .stars { font-size: 18px; }
.service-icon { width: 54px; height: 54px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: var(--paper); border: 1px solid rgba(30,55,73,.14); color: var(--red); }
.service-icon svg { width: 34px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.process-step { counter-increment: step; }
.process-step::before { content: counter(step); display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 14px; background: var(--red); color: #fff; font-weight: 950; margin-bottom: 14px; }
.table-wrap { overflow-x: auto; border-radius: 24px; border: 1px solid rgba(30,55,73,.14); background: #fff; }
table { width: 100%; border-collapse: collapse; min-width: 620px; }
th { background: var(--ink); color: #fff; text-align: left; }
th, td { padding: 18px; border-bottom: 1px solid rgba(30,55,73,.1); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.faq-item { border: 1px solid rgba(30,55,73,.14); border-radius: 20px; background: #fff; padding: 18px 20px; }
.faq-item summary { color: var(--heading); font-weight: 900; cursor: pointer; }
.footer { background: var(--ink); color: rgba(255,255,255,.82); padding: 54px 0 92px; }
.footer h2, .footer h3, .footer strong, .footer a { color: #fff; }
.footer p, .footer li { color: rgba(255,255,255,.82); font-size: 14px; }
.footer .logo { color: #fff; }
.sticky-call { display: none !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; transform: translateY(110%); opacity: 0; transition: transform .28s ease, opacity .28s ease; background: var(--red); color: #fff !important; text-align: center; padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); font-weight: 950; white-space: nowrap; box-shadow: 0 -16px 34px rgba(30,55,73,.25); }
.sticky-call.is-visible { transform: translateY(0); opacity: 1; }
.phone-dark { color: #fff !important; }
.phone-light { color: #111827 !important; }

@media (min-width: 768px) {
  .hamburger, .mobile-menu { display: none !important; }
  .desktop-nav { display: flex !important; }
  .header-phone { display: inline-flex !important; }
  .two-col { grid-template-columns: minmax(0, 65%) minmax(260px, 35%); }
  .two-col.media-left { grid-template-columns: minmax(260px, 35%) minmax(0, 65%); }
  .two-col.media-left .media-col { order: 1; }
  .two-col.media-left .text-col { order: 2; }
  .review-card { min-width: calc((100% - 36px) / 3); }
  .section { padding: 96px 0; }
  .footer { padding-bottom: 54px; }
}

@media (max-width: 767px) {
  h1 { font-size: 35px; }
  h2 { font-size: 28px; }
  .desktop-nav, .header-phone { display: none !important; }
  .sticky-call { display: block !important; font-size: 16px; }
  .hero-icons img { height: 48px; max-width: 72px; }
  .section { padding: 58px 0; }
  .btn-primary, .btn-secondary { width: 100%; }
}