/* Superior Heating & Cooling — brand overrides on top of the Modernist
   design system, plus the few helpers the page markup relies on. */

body {
  margin: 0;
  background: #ffffff;
  color: #201e1d;
  font-family: "Archivo", system-ui, sans-serif;
}
a { color: #be0a0a; }
a:hover { color: #8a0707; }
input, select, textarea { font-family: "Archivo", system-ui, sans-serif; }

:root {
  --color-accent: #be0a0a;
  --color-accent-100: #fdf0f0;
  --color-accent-200: #f8dada;
  --color-accent-300: #eeb4b4;
  --color-accent-400: #d95f5f;
  --color-accent-500: #be0a0a;
  --color-accent-600: #a00707;
  --color-accent-700: #7d0505;
  --color-accent-800: #5c0404;
  --color-accent-900: #3d0303;
  --color-accent-2: #003070;
  --color-accent-2-500: #003070;
  --color-accent-2-600: #00265a;
  --color-accent-2-700: #001d44;
}

/* Photos fill whatever box the layout gives them.

   The image is taken out of flow so its intrinsic height can't stretch the
   frame: an `aspect-ratio` box only states a *preferred* size, so an in-flow
   image taller than that ratio would grow the box and break the grid. The
   frame keeps its own height (from aspect-ratio or min-height) and the photo
   is cropped to fill it. */
.photo-frame { position: relative; overflow: hidden; }
.photo-frame > .photo { position: absolute; inset: 0; }
.photo { width: 100%; height: 100%; object-fit: cover; }

/* Both trucks touch the edges of the about photo, so any horizontal crop cuts
   a vehicle in half — and the frame beside the story text is far squarer than
   that 1200x723 shot, which `cover` was solving by throwing away a third of
   the width. Fit the whole photo instead, and paint the frame in the photo's
   own backdrop so the bands above and below read as part of the picture
   rather than as white gaps. Only right for a photo on a flat backdrop: for
   an ordinary one, plain .photo-frame and `cover` is still what you want. */
.photo-frame--letterbox { background: #151410; }
.photo-frame--letterbox > .photo { object-fit: contain; }

/* Featured service cards pick up a border on hover. */
.card-link { border: 1px solid #e6e4e3; }
.card-link:hover { border-color: #c9c6c5; }

/* Skip link — visible only once focused. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #ffffff; color: #201e1d; padding: 12px 18px;
  font-size: 14px; font-weight: 800;
}
.skip-link:focus { left: 0; }

/* The nav scrolls sideways on narrow screens rather than wrapping. */
.site-nav::-webkit-scrollbar { display: none; }

/* The designed forms carry their success and error panels as the reference for
   the matching Paperform screens. Both stay hidden; drop the `hidden` attribute
   on one to view it while styling. */
[hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   Header, navigation and motion
   ══════════════════════════════════════════════════════════════════ */

:root {
  --shell: 1220px;
  --gutter: clamp(16px, 4vw, 40px);
  --ink: #201e1d;
  --ink-muted: #605d5d;
  --red: #be0a0a;
  --navy: #003070;
  --hairline: #e6e4e3;
  /* The sticky header's height, so in-page anchors don't land underneath it.
     site.js measures the real value and overrides this at runtime. */
  --sticky-offset: 150px;
}

[id] { scroll-margin-top: var(--sticky-offset); }

/* — the sticky shell: emergency bar + header travel together — */
.site-top {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: box-shadow 0.3s ease;
}
.site-top.is-scrolled { box-shadow: 0 10px 28px rgba(32, 30, 29, 0.13); }

/* — emergency bar — */
.site-topbar {
  background: var(--red);
  color: #ffffff;
  border-bottom: 1px solid var(--hairline);
}
.site-topbar__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  align-items: center;
  justify-content: space-between;
}
.site-topbar__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-topbar__phone {
  color: #ffffff;
  text-decoration: none;
  font-size: clamp(15px, 2.2vw, 20px);
  font-weight: 900;
  letter-spacing: -0.01em;
}
.site-topbar__phone:hover { color: #ffffff; text-decoration: underline; }

/* — header — */
.site-header {
  position: relative;
  z-index: 30;
  background: #ffffff;
  border-bottom: 1px solid var(--hairline);
}
.site-header__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 40px);
}

.site-header__logo { display: block; flex: 0 0 auto; line-height: 0; }
.site-header__logo img {
  height: clamp(38px, 5vw, 52px);
  width: auto;
  transform-origin: left center;
  /* Scaled, not resized — a height change here would reflow the whole page
     on every scroll. */
  transition: transform 0.3s ease;
}
.site-top.is-scrolled .site-header__logo img { transform: scale(0.86); }

/* — nav: spans the space left of the logo and distributes evenly — */
.site-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2px, 0.8vw, 14px);
}
.site-nav__link {
  position: relative;
  text-decoration: none;
  font-size: clamp(11px, 1.02vw, 13px);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 10px 2px;
  color: var(--ink-muted);
  transition: color 0.2s ease;
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.site-nav__link:hover { color: var(--ink); }
.site-nav__link:hover::after { transform: scaleX(1); }
.site-nav__link.is-current { color: var(--ink); }
.site-nav__link.is-current::after { transform: scaleX(1); }

.site-nav__cta {
  font-size: clamp(11px, 1.02vw, 13px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px clamp(12px, 1.4vw, 18px);
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background 0.2s ease, transform 0.2s ease;
}
.site-nav__cta:hover { transform: translateY(-1px); }

/* The phone link is a mobile-menu affordance; on desktop it's already in the
   emergency bar directly above. */
.site-nav__call { display: none; }

/* — hamburger — */
.nav-toggle {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle:hover { border-color: #c9c6c5; }
.nav-toggle__bars {
  display: block;
  position: relative;
  width: 20px;
  height: 14px;
  flex: 0 0 auto;
}
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ink);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* — the seven links plus the CTA need ~1060px of header to sit on one row;
     below that, switch to the hamburger panel — */
@media (max-width: 1079px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0 var(--gutter);
    background: #ffffff;
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 20px 34px rgba(32, 30, 29, 0.14);
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.24s ease,
                visibility 0s linear 0.34s;
  }
  .site-nav.is-open {
    max-height: calc(100vh - 100%);
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
    transition: max-height 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.24s ease,
                visibility 0s;
  }

  .site-nav__link {
    font-size: 15px;
    padding: 16px 0;
    border-bottom: 1px solid #ededec;
    color: var(--ink);
  }
  .site-nav__link::after { display: none; }
  .site-nav__link.is-current { color: var(--red); }

  .site-nav__cta {
    font-size: 14px;
    padding: 16px 20px;
    margin: 18px 0 10px;
    justify-content: center;
  }
  .site-nav__call {
    display: block;
    text-align: center;
    padding: 0 0 20px;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
  }
}

/* — trust strip — */
.site-trust {
  background: var(--navy);
  color: #ffffff;
  border-bottom: 1px solid var(--hairline);
}
.site-trust__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
}
.site-trust__detail { font-size: 13px; color: #bcd2f0; }

/* ── Motion ──────────────────────────────────────────────────────────
   Sections start offset and settle as they scroll in. The `js` class is set
   by an inline script in <head> — so without JavaScript, or on a browser
   too old to drive this, nothing is ever hidden and the page renders
   exactly as it would statically. */
html.js main > section {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.js main > section.is-visible { opacity: 1; transform: none; }
/* An anchor target settles instantly so it can be measured and scrolled to. */
html.js main > section.is-settled { transition: none; }
/* The page's lead section is above the fold — it shouldn't animate in. */
html.js main > section:first-child { opacity: 1; transform: none; transition: none; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js main > section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Printing never scrolls, so nothing would trigger the reveals — force the
   settled state and unstick the header. */
@media print {
  html.js main > section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .site-top { position: static; box-shadow: none; }
  .nav-toggle { display: none !important; }
}

/* Page wrapper — the white ground the sections sit on. */
.page { background: #ffffff; }