/* ===========================
   RESET & BASE
   =========================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
  color: #242424;
  background: #fff;
  overflow-x: hidden;
  line-height: 1.5;
}

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

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

/* ===========================
   VARIABLES
   =========================== */
:root {
  --red: #cc0000;
  --red-hover: #aa0000;
  --blue: #024eff;
  --dark: #111111;
  --white: #ffffff;
  --gray-light: #f5f5f5;
  --gray-text: #646464;
  --navy: #0e3693;
  --max-w: 1170px;
  --nav-h: 80px;
}

/* ===========================
   LAYOUT UTILITIES
   =========================== */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  position: relative;
}

/* ===========================
   SHARED ACCENT + UNDERLINE
   =========================== */

/* Wrapper that gives the accent its absolute positioning anchor.
   padding-bottom creates clearance so the absolute underline doesn't overlap content below. */
.section__title-wrap,
.services__title-wrap {
  position: relative;
  display: inline-block;
  padding-bottom: 22px;
}



/* Inline span wrapping the last word so the underline anchors below it */
.title-last-word {
  position: relative;
  display: inline-block;
}

/* Underline SVG positioned flush below the last word */
.title-underline {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 217px;
  height: 14px;
  display: block;
  overflow: visible;
}

/* White underline variant (reviews, CTA) needs no extra rule — fill is set inline */

/* ===========================
   SECTION HEADER
   =========================== */
.section__header {
  text-align: center;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.section__title {
  font-size: clamp(36px, 5vw, 70px);
  font-weight: 900;
  line-height: 1.05;
  color: #242424;
}

.section__title--white {
  color: #fff;
}

.section__subtitle {
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 400;
  color: #242424;
  max-width: 640px;
}

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

/* ===========================
   BUTTONS
   =========================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  white-space: nowrap;
  text-transform: uppercase;
}

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

.btn--red {
  background: var(--red);
  color: #fff;
}
.btn--red:hover { background: var(--red-hover); }

.btn--blue {
  background: var(--blue);
  color: #fff;
}
.btn--blue:hover { background: #0040cc; }

.btn--outline {
  background: transparent;
  color: #000;
  border: 2px solid rgba(0,0,0,0.2);
}
.btn--outline:hover { background: rgba(0,0,0,0.05); }

.btn--outline-dark {
  background: transparent;
  color: #000;
  border: 2px solid #000;
}
.btn--outline-dark:hover { background: #000; color: #fff; }

.btn--red-outline {
  background: transparent;
  color: var(--red);
  border: 2px solid var(--red);
}
.btn--red-outline:hover { background: var(--red); color: #fff; }

.btn--lg {
  padding: 18px 32px;
  font-size: 18px;
  border-radius: 10px;
}

.btn__arrow {
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s;
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ===========================
   NAVIGATION
   =========================== */
/* Nav glow button: inner 50px (13px padding) so outer reaches ~70px — fits 80px nav */
.nav .glow-btn-inner {
  padding: 13px 25px;
}
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  height: var(--nav-h);
}

.nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav__logo {
  font-size: clamp(16px, 3.33vw, 48px);
  font-weight: 900;
  color: #000;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #000;
  border-radius: 2px;
  transition: all 0.3s;
}

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 16px 24px;
  background: #fff;
  border-top: 1px solid #eee;
}

.nav__mobile.open {
  display: flex;
}

/* ===========================
   HERO / BANNER
   =========================== */
.hero {
  position: relative;
  background: #000;
  padding-top: var(--nav-h);
  min-height: 760px;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
}

.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

/* Hero content — vertical stack, centered, padding matches Figma (80/135/110/135) */
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 135px 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Row 1: badge + countdown stacked vertically, centered */
.hero__top {
  width: 100%;
  max-width: 1170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px; /* Figma gap=18 between badge and countdown */
  margin-bottom: 32px;
}

/* ---- Hero Countdown & Offer Reveal ---- */
.hero-countdown {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  width: 100%;
  max-width: 800px;
}

#confetti-canvas {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  pointer-events: none;
  z-index: 10;
}

.countdown-number {
  font-size: 120px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  line-height: 1;
  text-shadow: 0 4px 30px rgba(0,0,0,0.5);
  animation: countdown-pulse 0.8s ease-in-out;
  z-index: 5;
}

.countdown-number.hidden {
  display: none;
}

@keyframes countdown-pulse {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.2); opacity: 1; }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

.offer-reveal {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  z-index: 5;
  animation: offer-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.offer-reveal.visible {
  display: flex;
}

@keyframes offer-pop {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.offer-reveal__amount {
  font-size: clamp(72px, 10vw, 120px);
  font-weight: 900;
  color: #ff0000;
  line-height: 1;
  text-shadow: 0 4px 20px rgba(255,0,0,0.4);
}

.offer-reveal__sub {
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* ---- Offer Badge / Ribbon ---- */
.offer-badge {
  display: block;
  width: 100%;
  max-width: 860px;
}

.offer-badge__ear { display: none; }

/* Full-width banner ribbon: inward V-notches on both ends */
.offer-badge__pill {
  background: var(--blue);
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  padding: 18px 72px;
  text-align: center;
  white-space: nowrap;
  width: 100%;
  display: block;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    calc(100% - 40px) 50%,
    100% 100%,
    0% 100%,
    40px 50%
  );
}


/* Row 2: headline + CTA + subtext */
.hero__bottom {
  width: 100%;
  max-width: 1170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px; /* Figma gap=30 inside Frame 1272629701 */
}

.hero__headline-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}



.hero__headline {
  font-size: 74px;
  font-weight: 900;
  color: #fff;
  line-height: 1.05;
  text-align: center;
  max-width: 1134px;
}

/* Triple-layer glow CTA button — exact Figma values */
.hero__cta-wrap {
  display: flex;
  justify-content: center;
}

.glow-btn-outer {
  background: rgba(255, 0, 0, 0.25);
  border-radius: 16px;
  padding: 5px;
  width: fit-content;
}

.glow-btn-mid {
  background: rgba(255, 0, 0, 0.40);
  border-radius: 12px;
  padding: 5px;
}

.glow-btn-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgb(255, 0, 0);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  padding: 20px 35px;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.2s;
  text-transform: uppercase;
}

.glow-btn-inner:hover {
  background: #cc0000;
}

.glow-btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
}

.hero__subtext {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}

/* ===========================
   TICKER / SCROLLING BANNER
   =========================== */
.ticker {
  background: var(--blue);
  overflow: hidden;
  padding: 20px 0;
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 30s linear infinite;
}

.ticker__item {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  padding: 0 40px;
  white-space: nowrap;
}

@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===========================
   SERVICES
   =========================== */
.services {
  background: #fff;
}

/* Outer wrapper mirrors Figma frame padding: top=160, right=135, bottom=100, left=135 */
.services__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 135px 100px;
  display: flex;
  flex-direction: column;
  gap: 35px; /* Figma gap=35 between header row and content row */
}

/* --- Header row: title LEFT, button RIGHT --- */
.services__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.services__header-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 696px;
}

/* .services__title-wrap inherits position/display/padding-bottom from the shared rule above;
   margin-bottom creates space between the title block and the description paragraph. */
.services__title-wrap {
  margin-bottom: 14px;
}


.services__title {
  font-size: 70px;
  font-weight: 900;
  color: #242424;
  line-height: 1;
}

/* "Provide" spans as inline block so the underline anchors below it */
.services__title-provide {
  position: relative;
  display: inline-block;
}

/* Wavy underline decoration anchored below "Provide" */
.services__underline {
  position: absolute;
  bottom: -10px;
  left: 0;
  display: block;
  height: 7px;
  width: 209px;
  background-image: url("data:image/svg+xml,%3Csvg width='209' height='7' viewBox='0 0 209 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M49.7281 0.618345C33.1869 0.473294 16.5782 1.00339 0.567643 3.22926C0.281987 3.26882 0.163402 3.34662 0.14003 3.36442C0.00326163 3.46991 -0.0114793 3.582 0.00583314 3.6743C0.0162206 3.73034 0.0863666 3.96704 0.469838 3.99143C0.734719 4.00791 2.61482 3.89254 3.34022 3.86287C6.7551 3.72375 10.1631 3.52529 13.5693 3.29585C21.2924 2.77762 29.0051 2.32929 36.7403 1.92117C41.0832 1.69172 45.4277 1.50183 49.7697 1.34623C60.2152 1.4392 70.6347 1.80183 80.8594 2.17632C76.7953 2.36687 73.0611 2.56005 69.9647 2.68532C64.7433 2.8963 59.5314 3.14552 54.3203 3.47386C51.6429 3.64199 48.969 3.82463 46.2968 4.04023C46.0008 4.06462 45.3264 4.08967 45.0001 4.11934C44.8616 4.13121 44.7612 4.15033 44.7162 4.16352C44.434 4.24659 44.3985 4.41669 44.395 4.5024C44.3933 4.55449 44.4167 4.83866 44.8928 4.89405C67.0294 7.49309 90.1242 4.46944 112.34 6.99597C112.601 7.02563 112.845 6.88849 112.884 6.68938C112.923 6.49092 112.743 6.30499 112.482 6.27532C91.5577 3.89583 69.8539 6.44016 48.9032 4.5723C50.734 4.43714 52.5657 4.31516 54.399 4.19978C59.6006 3.8721 64.803 3.62353 70.0158 3.41255C75.2615 3.20091 82.3526 2.78751 89.7754 2.52708C96.1455 2.7974 102.512 3.10069 108.883 3.35782C111.571 3.46595 114.26 3.55562 116.946 3.66573C118.051 3.71056 120.893 3.89847 121.305 3.82858C121.625 3.77386 121.702 3.59914 121.721 3.51145C121.741 3.41651 121.729 3.29848 121.584 3.18574C121.539 3.15014 121.404 3.0763 121.127 3.01564C113.635 1.38118 101.367 1.40689 89.8775 1.80182C87.4062 1.69633 84.9348 1.59612 82.4626 1.50579C76.8031 1.2981 71.0814 1.08975 65.3267 0.925583C81.5442 0.620317 97.7694 0.70801 113.999 0.928883C120.813 1.02185 139.181 1.58227 146.415 2.07742C146.327 2.14665 146.275 2.24291 146.281 2.34774C146.293 2.54818 146.517 2.70378 146.781 2.69455C148.273 2.6418 149.136 2.57455 149.478 2.50532C149.691 2.46247 149.807 2.3939 149.861 2.34907C149.992 2.24094 150.017 2.12489 149.991 2.01478C149.974 1.94621 149.934 1.87105 149.84 1.80182C149.778 1.75435 149.625 1.68183 149.366 1.63238C146.522 1.09372 122.13 0.311095 114.016 0.200329C92.5757 -0.0910915 71.1437 -0.150425 49.7281 0.618345Z' fill='%23242424'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.services__desc {
  font-size: 18px;
  font-weight: 400;
  color: #242424;
  line-height: 1.5;
  max-width: 602px;
}

.services__header-cta {
  flex-shrink: 0;
}

/* --- Content row: cards LEFT, image RIGHT --- */
.services__content-row {
  display: flex;
  gap: 30px; /* Figma gap=30 */
  align-items: stretch;
}

/* 4 stacked service cards */
.services__cards {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Figma gap=15 */
  width: 566px;
  flex-shrink: 0;
}

/* Individual service card — horizontal layout */
.svc-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  padding: 30px;
  border-radius: 12px;
  background: linear-gradient(to bottom, #f2f5ff 0%, #ffffff 100%);
  min-height: 152px;
  transition: box-shadow 0.25s, transform 0.2s;
}

.svc-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.svc-card__icon-wrap {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.svc-card__icon-wrap img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
}

/* Emergency SVG tends to render larger — constrain to visual match */
.svc-card__icon-wrap--emergency img {
  width: 65px;
  height: 65px;
  border-radius: 0;
}

.svc-card__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.svc-card__title {
  font-size: 24px;
  font-weight: 700;
  color: #000;
  line-height: 1.2;
}

.svc-card__desc {
  font-size: 16px;
  font-weight: 400;
  color: #000;
  line-height: 1.55;
}

/* Right column: technician photo */
.services__image-col {
  flex: 1;
  background: rgb(121, 92, 92); /* Figma fill color */
  border-radius: 20px;
  overflow: hidden;
  min-height: 653px;
}

.services__tech-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ===========================
   REVIEWS
   =========================== */
.reviews {
  position: relative;
  padding: 96px 0;
  background: #1a1a2e;
  overflow: hidden;
}

.reviews__bg {
  position: absolute;
  inset: 0;
}

.reviews__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.reviews__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,40,0.55);
}

.reviews__content {
  position: relative;
  z-index: 2;
}

.reviews__header {
  text-align: center;
  margin-bottom: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reviews__subtitle {
  font-size: 20px;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  margin-top: 16px;
}

.reviews__panel {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* Review tabs */
.review-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
}

.review-tab {
  flex: 1;
  padding: 18px 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #555;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: color 0.2s, border-bottom 0.2s;
  border-bottom: 3px solid transparent;
}

.review-tab:hover { color: #000; }

.review-tab.active {
  color: #000;
  border-bottom: 3px solid var(--red);
}

.review-tab__stars {
  color: #fbbc04;
}

.review-tab__icon {
  flex-shrink: 0;
}

/* Reviews body */
.reviews__body {
  display: flex;
  gap: 32px;
  padding: 32px;
  flex-wrap: wrap;
}

.reviews__rating-box {
  flex-shrink: 0;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rating-label {
  font-size: 24px;
  font-weight: 600;
  color: #000;
}

.rating-score {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rating-num {
  font-size: 24px;
  font-weight: 700;
  color: #000;
}

.rating-stars {
  font-size: 20px;
  color: #fbbc04;
}

.rating-count {
  font-size: 14px;
  color: var(--gray-text);
}

/* Review cards */
.reviews__cards {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.review-card {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.review-card__avatar-fallback {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.review-card__meta {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.review-card__meta strong {
  font-size: 15px;
  color: #242424;
}

.review-card__meta span {
  font-size: 12px;
  color: #646464;
}

.review-card__google {
  margin-left: auto;
  flex-shrink: 0;
}

.review-card__stars {
  font-size: 16px;
  color: #fbbc04;
}

.review-card__text {
  font-size: 14px;
  color: #111;
  line-height: 1.6;
}

/* ===========================
   GIVE US A REVIEW
   =========================== */
.give-review {
  padding: 96px 0;
  background: #f5f5f5;
}

.give-review__inner {
  display: flex;
  align-items: center;
  gap: 64px;
  flex-wrap: wrap;
}

.give-review__text {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.give-review__body {
  font-size: clamp(16px, 1.67vw, 24px);
  font-weight: 600;
  color: #242424;
  line-height: 1.5;
  max-width: 560px;
}

/* Stars sit inline — smaller than heading text so all 5 fit on one line */
.give-review__stars {
  display: inline-block;
  font-size: clamp(20px, 2.2vw, 32px);
  letter-spacing: 3px;
  vertical-align: middle;
}

.give-review__owner {
  margin-top: 8px;
}

.give-review__owner-quote {
  font-size: 20px;
  font-weight: 700;
  color: #242424;
}

.give-review__owner-title {
  font-size: 18px;
  font-weight: 400;
  color: #555;
}

/* Photo fades to transparent along the diagonal inward edge */
.give-review__photo {
  flex-shrink: 0;
  width: min(480px, 45vw);
  overflow: hidden;
  /* ~96° = nearly horizontal gradient with a slight downward tilt,
     matching the diagonal where the image meets the gray background */
  -webkit-mask-image: linear-gradient(96deg, black 58%, transparent 92%);
          mask-image: linear-gradient(96deg, black 58%, transparent 92%);
}

.give-review__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===========================
   CTA HVAC SECTION
   =========================== */
.cta-hvac {
  position: relative;
  background: linear-gradient(to bottom, rgb(1,46,153), rgb(2,78,255));
  min-height: 640px;
  overflow: visible;
}

.cta-hvac__wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  display: block;
}

.cta-hvac__truck {
  position: absolute;
  right: 135px;
  top: -70px;
  width: 580px;
  height: 620px;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
}

/* CTA section accent is 2px further left than global default */
.cta-hvac .section__accent {
  left: -22px;
}

.cta-hvac__content {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 200px 135px 100px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.cta-hvac__text {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 605px;
}

.cta-hvac__heading {
  font-size: 84px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

/* .cta-hvac__underline removed — underline now uses .title-underline inside .title-last-word */

.cta-hvac__desc {
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  line-height: 1.4;
}

.cta-hvac__desc a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===========================
   TRUSTED BRANDS
   =========================== */
.brands {
  padding: 96px 0 0;
  background: #fff;
  overflow: hidden;
}

/* Header row: title+subtitle left, dealer badge right */
.brands__header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 60px;
}

.brands__header-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* "Licensed Dealer since 2009" badge — right-aligned block */
.brands__dealer-badge {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: #fff;
  border-radius: 8px;
  padding: 18px 28px;
  min-width: 180px;
  text-align: center;
}

.brands__dealer-label {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.brands__dealer-year {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
}

/* Marquee wrapper — overflow hidden with fade-edge overlays */
.brands__marquee-wrap {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-top: 1px solid #e8e8e8;
}

.brands__marquee-track {
  display: flex;
  width: max-content;
  animation: brands-scroll 56s linear infinite;
}

@keyframes brands-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Each logo tile — off-white card, matches Figma #FAFAFA tiles */
.brand-logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 95px;
  padding: 0 40px;
  background: #fafafa;
  border-right: 1px solid #e8e8e8;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Fade-out edges — left and right gradient overlays like Figma white-shade group */
.brands__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200px;
  pointer-events: none;
  z-index: 2;
}

.brands__fade--left {
  left: 0;
  background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 100%);
}

.brands__fade--right {
  right: 0;
  background: linear-gradient(to left, #fff 0%, rgba(255,255,255,0) 100%);
}

/* ===========================
   WHERE WE OPERATE
   =========================== */
.where-we-operate {
  background: #fff;
  padding: 96px 0 80px;
  overflow: hidden;
}

.where-we-operate__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  margin-bottom: 48px;
}

.where-we-operate__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* .where-we-operate__underline removed — underline now uses .title-underline inside .title-last-word */

.where-we-operate__map-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.12);
  padding: 12px;
  background: #fff;
}

.where-we-operate__map-card img {
  width: 100%;
  display: block;
  height: 532px;
  object-fit: cover;
  object-position: center;
}

.where-we-operate__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 472px;
  height: 472px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* ===========================
   GET IN TOUCH
   =========================== */
.get-in-touch {
  padding: 96px 0;
  background: #fff;
}

.get-in-touch__inner {
  display: flex;
  gap: 64px;
  align-items: center;
}

.get-in-touch__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* .get-in-touch__underline removed — underline now uses .title-underline inside .title-last-word */

.get-in-touch__photo {
  flex-shrink: 0;
  width: min(570px, 45vw);
  overflow: hidden;
}

.get-in-touch__photo img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* ===========================
   FOOTER
   =========================== */
.footer {
  position: relative;
  background: #06090a;
  overflow: hidden;
}

.footer__bg {
  position: absolute;
  inset: 0;
}

.footer__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.footer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 8, 0.93);
}

/* Brand section */
.footer__brand-section {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 90px 0 52px;
}

.footer__brand-name {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
}

.footer__brand-desc {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto;
}

/* Contact row — spans full container width; subtle separators match Figma Vector 3/4 */
.footer__contact-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer__contact-block {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 36px 40px;
}

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

.footer__contact-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--red);
}

.footer__contact-icon svg {
  width: 20px;
  height: 20px;
}

.footer__contact-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer__contact-label {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}

.footer__contact-value {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  line-height: 1.35;
  transition: color 0.2s;
}

a.footer__contact-value:hover {
  color: var(--red);
}

/* Bottom bar */
.footer__bottom {
  position: relative;
  z-index: 2;
}

.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer__bottom p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.footer__bottom strong {
  color: #fff;
  font-weight: 700;
}

.footer__socials {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer__social-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: background 0.2s;
}

.footer__social-btn svg {
  width: 16px;
  height: 16px;
}

.footer__social-btn:hover {
  background: var(--red);
}

.footer__social-btn--google {
  background: rgba(255, 255, 255, 0.1);
}

/* ===========================
   RESPONSIVE — TABLET (≤ 960px)
   =========================== */
@media (max-width: 960px) {
  .nav__actions { display: none; }
  .nav__hamburger { display: flex; }

  /* Hero */
  .hero__content { padding: 60px 40px 80px; }
  .hero__headline { font-size: 48px; }
  .offer-badge__pill { font-size: 22px; padding: 14px 60px; }
  .offer-badge { max-width: 660px; }

  /* Services */
  .services__inner { padding: 80px 40px 60px; }
  .services__header-row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .services__title { font-size: 48px; }
  .services__content-row { flex-direction: column; }
  .services__cards { width: 100%; }
  .services__image-col { min-height: 400px; }

  /* CTA HVAC tablet */
  .cta-hvac__truck { width: 300px; height: 312px; right: 40px; top: -20px; }
  .cta-hvac__content { padding: 160px 40px 80px; }
  .cta-hvac__heading { font-size: 50px; }

  /* Other sections */
  .where-we-operate__header { flex-direction: column; align-items: flex-start; }
  .where-we-operate__map-card img { height: 360px; }
  .where-we-operate__circle { width: 320px; height: 320px; }
  .footer__contact-row { grid-template-columns: 1fr; }
  .footer__contact-block:not(:last-child) { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .footer__contact-block { padding: 28px 24px; }
  .footer__bottom-inner { flex-direction: column; gap: 16px; text-align: center; padding: 24px 0; }

  .give-review__photo { width: 100%; max-width: 400px; margin: 0 auto; }
  .give-review__inner { flex-direction: column; align-items: center; text-align: center; }
  .give-review__buttons { justify-content: center; }

  .get-in-touch__inner { flex-direction: column; }
  .get-in-touch__photo { width: 100%; }
}

/* ===========================
   RESPONSIVE — MOBILE (≤ 640px)
   =========================== */
@media (max-width: 640px) {
  :root { --nav-h: 64px; }

  .nav__logo { font-size: 16px; }

  /* Hero */
  .hero { min-height: auto; }
  .hero__content { padding: 40px 20px 60px; }
  .hero__headline { font-size: 32px; }
  .offer-badge { max-width: 100%; }
  .offer-badge__pill { font-size: 16px; padding: 12px 44px;
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - 28px) 50%, 100% 100%, 0% 100%, 28px 50%);
  }


  /* Services */
  .services__inner { padding: 60px 20px 48px; gap: 24px; }
  .services__title { font-size: 32px; }
  .services__underline { width: 120px; }
  .services__cards { gap: 12px; }
  .svc-card { flex-direction: column; align-items: flex-start; min-height: auto; }
  .services__image-col { min-height: 280px; }

  /* Reviews */
  .reviews { padding: 64px 0; }
  .reviews__body { flex-direction: column; padding: 20px; }
  .reviews__rating-box { width: 100%; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; }
  .reviews__cards { grid-template-columns: 1fr; }
  .review-tabs { flex-direction: column; border-bottom: none; }
  .review-tab { border-bottom: 1px solid #eee; }

  /* Other */
  .give-review { padding: 64px 0; }
  .give-review__photo { width: 100%; }
  .brands { padding: 64px 0 0; }
  .brands__header-row { flex-direction: column; gap: 24px; }
  .brand-logo-tile { height: 75px; padding: 0 24px; font-size: 16px; }
  .brands__fade { width: 80px; }
  /* CTA HVAC mobile */
  .cta-hvac { min-height: auto; overflow: hidden; }
  .cta-hvac__truck { display: none; }
  .cta-hvac__content { padding: 80px 20px 60px; }
  .cta-hvac__heading { font-size: 36px; }
  .cta-hvac__desc { font-size: 18px; }
  .footer__brand-section { padding: 48px 0 36px; }
  .footer__brand-name { font-size: 26px; }
  .footer__contact-block { padding: 24px 16px; gap: 16px; }
  .footer__contact-icon { width: 44px; height: 44px; }
  .footer__contact-icon svg { width: 18px; height: 18px; }
  .footer__contact-value { font-size: 15px; }
  .get-in-touch { padding: 64px 0; }
  .section__title { font-size: 32px; }
}

/* ===========================
   WHERE WE OPERATE
   =========================== */
.where-we-operate {
  position: relative;
  overflow: hidden;
}

.where-we-operate__bg {
  position: absolute;
  inset: 0;
}

.where-we-operate__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.where-we-operate__overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.40);
}

.where-we-operate__header {
  position: relative;
  z-index: 2;
}

.where-we-operate__map-card {
  position: relative;
  z-index: 2;
}

/* ===========================
   SCROLL ANIMATIONS
   =========================== */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}