/* A light palette using the red and blue from Bird's original logo. */
:root {
  --navy: #192e3b;
  --deep: #ffffff;
  --blue: #076b88;
  --cyan: #35cef4;
  --ice: #f3f9fb;
  --red: #bd3024;
  --ink: #192e3b;
  --muted: #4d606c;
  --line: #dce6eb;
  --logo-red: #ff3b27;
}
body { background: #fff; color: var(--ink); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: var(--blue); }
.skip { background: #fff; color: var(--red); }
.announcement { background: #fff; color: var(--muted); border-bottom: 1px solid var(--line); }
.utility { background: #f3f9fb; color: var(--ink); border-color: var(--line); }
.utility a { color: var(--red); }
header, .brand-row { background: #fff; }
.wordmark { color: var(--red); text-shadow: none; }
.header-right .phone { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn { background: var(--red); color: #fff; }
.btn:hover { background: #98261c; }
.btn.navy, .btn.cyan, .btn.light { background: #fff; color: var(--red); border: 1px solid #bddde8; }
.btn.navy:hover, .btn.cyan:hover, .btn.light:hover { background: #edf8fc; }
.btn.outline { background: #fff; color: var(--ink); border-color: #a8bbc5; }
.btn.outline:hover { background: var(--ice); }
.nav-shell, .menu-toggle { background: #fff; color: var(--ink); }
.nav-shell { border-top: 1px solid var(--line); border-bottom: 3px solid var(--red); }
.nav a { color: var(--ink); }
.nav a:hover { color: var(--red); border-color: var(--red); }
.menu-toggle span:last-child { color: var(--red); }
.hero { background: #fff; color: var(--ink); }
.hero:before {
  background: linear-gradient(90deg,#fffffff7,#ffffffe3,#fffffff7),url('assets/nathan-and-haven.jpg') center 44%/cover;
  opacity: 1;
}
.hero:after { background: none; }
.hero h1 em { color: var(--red); text-shadow: none; }
.hero-rule { background: var(--cyan); box-shadow: none; }
.hero p, .hero .fine { color: var(--muted); }
#services { background: #f3f9fb; }
.service { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: 0 8px 24px #192e3b08; }
.service-emblem { background: linear-gradient(125deg,#edf7fa 0 75%,#35cef4 75% 78%,#fff 78%); }
.service-emblem img { border-color: #fff; }
.service h3 { color: var(--red); }
.service p, .service details, .service summary { color: var(--muted); }
.service .text-link { color: var(--red); }
.about-panel { background: #fff; color: var(--ink); border-top-color: #e5f5fa; }
.about-copy { background: #fff; color: var(--ink); border-color: #d9eef5; box-shadow: -12px 12px 0 #edf8fc; }
.about-copy p, .split p { color: var(--muted); }
.about-copy .eyebrow, .eyebrow { color: var(--red); }
.about-panel .portrait>img { border-color: #e1f2f7; }
.photo-caption { background: #fffffff2; color: var(--ink); border-left-color: var(--red); }
.values { border-color: var(--line); }
.values span:before { color: var(--red); }
.expertise-band { background: #f0f9fc; color: var(--ink); border-bottom-color: #d9eef5; }
.expertise-list { background: #fff; color: var(--ink); border-color: #d9eef5; }
.expertise-list a:hover { color: var(--red); }
.band-wordmark { color: var(--red); }
.feature { background: #fff; color: var(--ink); }
.feature .eyebrow, .plan-list li:before { color: var(--red); }
.feature p { color: var(--muted); }
.plan-card { background: #f3f9fb; color: var(--ink); border-color: #d9eef5; box-shadow: -12px 12px 0 #eaf6fa; }
.plan-card p { color: var(--muted); }
.plan-card .eyebrow, .saving strong { color: var(--red); }
.saving { border-color: var(--line); }
.project-img { border-color: #e1f2f7; }
.quote-band { background: #f3f9fb; color: var(--ink); }
.quote-band p { color: var(--red); }
.quote-band a { color: var(--blue); }
#service-area { background: #fff; }
#service-area .eyebrow { color: var(--red); }
.area-mark { background: #f3f9fb; color: var(--ink); border-color: #d9eef5; }
.area-mark h3 { color: var(--ink); }
.area-mark p { color: var(--muted); }
.area-mark:after { color: #192e3b05; }
.areas span { background: #f3f9fb; border-color: var(--line); color: var(--ink); }
.contact { background: #f0f9fc; color: var(--ink); }
.contact .eyebrow, .contact .phone { color: var(--red); }
.contact p, .contact address { color: var(--muted); }
.contact-form { background: #fff; color: var(--ink); border-color: #d9eef5; }
.contact-form p { color: var(--muted); }
.contact-form .btn { background: var(--red); color: #fff; }
.contact-form .btn:hover { background: #98261c; }
.field input, .field select, .field textarea { background: #fff; border-color: #a8bbc5; color: var(--ink); color-scheme: light; }
.field input::placeholder, .field textarea::placeholder { color: #61727c; }
.email-ready { background: var(--ice); border-color: var(--blue); }
.footer { background: #fff; color: var(--muted); border-top: 1px solid var(--line); }
.footer a { color: var(--red); }
.mobile-bar { background: #fffffff5; border-top: 1px solid var(--line); box-shadow: 0 -3px 18px #192e3b0a; }

/* Business-profile links stay visible and easy to tap at every width. */
.utility .social { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.utility .social:hover { color: #076b88; }
.facebook-icon { display: block; flex: 0 0 24px; }
.social-arrow { font-size: 16px; color: var(--blue); }
.utility .wrap { align-items: center; padding-block: 3px; }
@media (max-width: 620px) {
  .utility .wrap { flex-direction: column; gap: 0; padding-block: 7px 3px; }
}

.profile-links { display: flex; align-items: center; justify-content: center; gap: 22px; }
.chamber-icon { display: block; flex: 0 0 24px; color: #076b88; }
@media (max-width: 950px) { .utility .wrap { flex-direction: column; gap: 0; } }
@media (max-width: 380px) { .profile-links { gap: 16px; } .utility .social { gap: 6px; font-size: 12px; } }

/* Equipment photos replace the repeated branding in the service cards. */
.service { grid-template-columns: minmax(280px, 38%) 1fr; align-items: stretch; border-radius: 30px; }
.service-photo { position: relative; margin: 0; min-width: 0; min-height: 300px; overflow: hidden; background: var(--ice); }
.service-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.service-photo figcaption { position: absolute; left: 12px; bottom: 12px; padding: 4px 9px; border-radius: 5px; background: #ffffffed; color: #304450; font-size: 10px; line-height: 1.4; }
.service-copy { align-self: center; padding: 30px; }
.seasonal-photo { aspect-ratio: 1; }
.season-grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; background: #fff; }
.season-tile { position: relative; overflow: hidden; min-width: 0; min-height: 0; }
.season-tile img { width: 100%; height: 100%; object-fit: cover; }
.season-tile span { position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 4px; background: #ffffffed; color: #143349; font-size: 12px; font-weight: 800; }
.service-photo figcaption a { text-decoration: underline; }
.service-owner { max-width: 1050px; margin: 0 auto 34px; display: flex; align-items: center; gap: 22px; padding: 22px 26px; background: #fff; border: 1px solid var(--line); border-radius: 24px; }
.nathan-portrait { position: relative; display: block; flex: 0 0 100px; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; }
.nathan-portrait img { position: absolute; width: 340%; max-width: none; height: auto; left: -88%; top: -150%; }
.service-owner .eyebrow { margin-bottom: 7px; font-size: 10px; }
.service-owner h2 { font-size: 1.4rem; margin-bottom: 9px; text-transform: none; }
.service-owner p { margin-bottom: 5px; font-size: .85rem; }
.service-owner .text-link { font-size: .8rem; }
@media (max-width: 700px) {
  .service { grid-template-columns: 1fr; border-radius: 24px; }
  .service-photo { min-height: 0; height: 250px; }
  .service-photo > img { min-height: 0; }
  .service-photo.seasonal-photo { height: auto; aspect-ratio: 1; }
  .service-copy { padding: 25px; }
  .service h3 { font-size: 1.35rem; }
}

@media (max-width: 620px) {
  .service-owner { padding: 18px; gap: 16px; }
  .nathan-portrait { flex-basis: 76px; width: 76px; height: 76px; }
  .service-owner h2 { font-size: 1.1rem; }
  .service-owner .eyebrow { font-size: 8px; }
  .service-owner p { font-size: .75rem; }
}

#mini-splits .service-photo > img { object-position: 60% 35%; }
#heating .service-photo > img { object-position: center 70%; }
#fireplaces .service-photo > img { object-position: center 70%; }

/* A restrained summer-to-winter finish, using live, accessible text. */
.season-headline .summer-word,
.season-headline .winter-word { display: inline-block; position: relative; }
.season-headline .summer-word { color: #c7411d; }
.season-headline .winter-word { color: #16779c; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .season-headline .summer-word {
    background: linear-gradient(180deg, #ffc45b 0%, #ed852b 24%, #d34b20 58%, #b42a21 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-text-stroke: .35px #ac391e;
    filter: drop-shadow(0 -3px 8px #ee8a2526);
  }
  .season-headline .winter-word {
    background-image: linear-gradient(180deg, #f5fdff 0%, #def7ff 13%, transparent 29%), repeating-linear-gradient(118deg, transparent 0 23px, #e9fbffb0 24px, transparent 26px 58px), linear-gradient(180deg, #8bd9ed 0%, #429fc4 38%, #16789f 69%, #135779 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-text-stroke: .4px #347c9b;
    filter: drop-shadow(0 2px 1px #bbecf5) drop-shadow(0 4px 8px #78c7e328);
  }
}
.season-headline .winter-word::after {
  content: ''; position: absolute; pointer-events: none;
  left: 5%; right: 5%; bottom: .065em; height: .11em;
  background: linear-gradient(#66b8d6, #d9f7ff);
  clip-path: polygon(2% 0, 4% 0, 3% 80%, 2% 0, 23% 0, 25% 0, 24% 100%, 23% 0, 48% 0, 50% 0, 49% 65%, 48% 0, 68% 0, 70% 0, 69% 90%, 68% 0, 86% 0, 88% 0, 87% 70%, 86% 0);
}
@media (forced-colors: active) {
  .season-headline .summer-word, .season-headline .winter-word { color: CanvasText; background: none; filter: none; -webkit-text-stroke: 0; }
  .season-headline .winter-word::after { display: none; }
}

/* Pair real weather scenes with equipment photography for an explicit seasonal story. */
.seasonal-photo { aspect-ratio: 4 / 5; }
.season-grid { gap: 6px; background: #fff; }
.season-tile { display: flex; flex-direction: column; background: #fff; }
.season-images { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.season-images img { display: block; width: 100%; height: 100%; object-fit: cover; }
.season-tile.paired .season-images { display: grid; grid-template-rows: 48% 52%; gap: 3px; }
.season-tile.paired .season-images img { min-height: 0; }
.season-fall .season-weather { object-position: center 42%; }
.season-winter .season-weather { object-position: center 55%; }
.season-fall .season-work { object-position: center 50%; }
.season-winter .season-work { object-position: center 65%; }
.season-summer .season-work { object-position: center 52%; }
.season-label { flex: 0 0 auto; padding: 8px 10px 9px; border-top: 3px solid #598d59; line-height: 1.25; }
.season-label strong { display: block; font-size: 14px; color: #173b31; }
.season-label small { display: block; margin-top: 3px; font-size: 11px; color: #334c5b; }
.season-summer .season-label { border-color: #e18c22; background: #fff8e9; }
.season-summer .season-label strong { color: #9a5010; }
.season-fall .season-label { border-color: #b75a27; background: #fff7ef; }
.season-fall .season-label strong { color: #8a411c; }
.season-winter .season-label { border-color: #51a6c9; background: #edf8fc; }
.season-winter .season-label strong { color: #126281; }
.seasonal-photo figcaption { left: auto; right: 7px; bottom: 65px; padding: 2px 5px; font-size: 9px; }
@media (max-width: 700px) { .service-photo.seasonal-photo { aspect-ratio: 4 / 5; } }

.season-spring .season-weather { object-position: center 30%; }
.season-summer .season-weather { object-position: center 16%; }