/* Mountain Star Heating and Cooling - mountainstarhvac.com */

/* The Outfit webfont used to be pulled in here with @import. That is the slowest
   way to load a font: the browser has to download and parse this stylesheet before
   it even discovers the font request, so the two downloads run one after the other
   instead of together. It is now a preconnect plus a stylesheet link in the head of
   each page, which starts the font fetch immediately alongside this file. */

:root {
  --navy: #0f2a43;
  --navy-2: #163a5c;
  --orange: #f2762e;
  --orange-dark: #d95f1a;
  /* Text-only orange. The two above are fill colours: used as small text on a light
     background they measure 3.55:1 on --bg and 3.75:1 on white, under the 4.5:1
     minimum. This one clears it (4.51:1 on --bg, 4.76:1 on white) and sits close
     enough to read as the same brand orange. Use for text, never as a fill. */
  --orange-text: #bd5317;
  --blue: #2b8fd9;
  --bg: #f7f9fb;
  --ink: #1c2b3a;
  --muted: #5a6b7c;
  --line: #e3e9ef;
  --radius: 12px;
  --shadow: 0 2px 12px rgba(15, 42, 67, .08);
  --shadow-lift: 0 10px 24px rgba(15, 42, 67, .14);
  --maxw: 1080px;
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--navy-2); }
a:hover { color: var(--orange-text); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute; top: 0; left: 0; z-index: 100;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus {
  width: auto; height: auto; overflow: visible; clip: auto;
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 6px rgba(15, 42, 67, .06);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; max-width: var(--maxw); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); }
.brand svg { width: 40px; height: 40px; flex: none; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.15; letter-spacing: -.01em; }
.brand-name small { display: block; font-weight: 600; font-size: .68rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.header-cta { display: flex; align-items: center; gap: 10px; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 700; text-align: center;
  border-radius: 8px; padding: 11px 18px; font-size: .95rem; transition: background .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
/* The call button is the primary conversion on the site, so its label has to be
   readable on a phone outdoors. White on the brand orange measured 2.84:1, and
   3.75:1 on the hover shade, both under the 4.5:1 minimum. Dark navy on the same
   orange measures 5.17:1 and leaves the brand colour completely unchanged. */
.btn-call { background: var(--orange); color: var(--navy); }
.btn-call:hover { background: var(--orange-dark); color: var(--navy); }
.btn-book { background: var(--navy); color: #fff; }
.btn-book:hover { background: var(--navy-2); }
.btn-ghost { background: #fff; color: var(--navy); border: 2px solid var(--navy); }
.btn-ghost:hover { background: var(--navy); color: #fff; }
.btn-lg { padding: 14px 26px; font-size: 1.05rem; }

/* Nav */
.nav-toggle { display: none; }
.nav-toggle-label { display: none; cursor: pointer; padding: 8px; }
.nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after {
  display: block; width: 24px; height: 3px; background: var(--navy); border-radius: 2px; position: relative; content: "";
}
.nav-toggle-label span::before { position: absolute; top: -8px; }
.nav-toggle-label span::after { position: absolute; top: 8px; }
.site-nav > ul { list-style: none; display: flex; gap: 4px; align-items: center; }
.site-nav a {
  text-decoration: none; color: var(--navy); font-weight: 600; font-size: .92rem;
  padding: 8px 10px; border-radius: 6px; white-space: nowrap;
}
.site-nav a:hover, .site-nav a.active { background: var(--bg); color: var(--orange-text); }

/* Dropdown groups (Services / Service Areas) */
.has-dropdown { position: relative; }
.dropdown-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; font-family: inherit; font-weight: 600; font-size: .92rem;
  color: var(--navy); padding: 8px 10px; border-radius: 6px; white-space: nowrap;
}
.dropdown-toggle::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.dropdown-toggle:hover, .has-dropdown:focus-within .dropdown-toggle, .dropdown-toggle.active-group {
  background: var(--bg); color: var(--orange-text);
}
.dropdown {
  display: none; position: absolute; top: 100%; left: 0; margin-top: 0; z-index: 60;
  min-width: 200px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-lift); padding: 8px 6px 6px; list-style: none;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { display: block; }
.dropdown a { display: block; padding: 9px 12px; }

@media (max-width: 900px) {
  .site-nav { display: none; width: 100%; }
  .nav-toggle:checked ~ .site-nav { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; padding: 8px 0; }
  .site-nav a { display: block; padding: 12px 10px; font-size: 1rem; }
  .nav-toggle-label { display: block; order: 3; }
  .header-inner { flex-wrap: wrap; }
  .btn-book.header-book { display: none; }

  /* Dropdown groups become always-expanded indented sub-lists on mobile */
  .has-dropdown { position: static; }
  .dropdown-toggle { width: 100%; justify-content: space-between; padding: 12px 10px; font-size: 1rem; pointer-events: none; }
  .dropdown-toggle::after { transform: rotate(135deg); margin-top: 3px; }
  .dropdown {
    display: block; position: static; margin: 0 0 4px 16px; padding: 0;
    background: none; border: 0; box-shadow: none;
  }
  .dropdown a { padding: 10px; font-size: .95rem; color: var(--muted); }
}

/* Hero */
.hero {
  background:
    radial-gradient(80% 120% at 85% 0%, rgba(43, 143, 217, .18), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 55%, #1d4e7d 100%);
  color: #fff; padding: 56px 0 48px;
}
.hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 4.4vw, 2.8rem); line-height: 1.12; letter-spacing: -.02em; max-width: 21ch; text-wrap: balance; }
.hero .sub { margin: 16px 0 24px; font-size: 1.08rem; color: #d8e4ef; max-width: 58ch; text-wrap: pretty; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.trustbar { background: var(--navy); color: #cfe0ee; font-size: .85rem; padding: 10px 0; }
.trustbar ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; }
.trustbar li::before { content: "\2713\00a0"; color: var(--orange); font-weight: 700; }

/* Sections */
section { padding: 56px 0 68px; }
section.alt { background: #fff; }
h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--navy); letter-spacing: -.01em; margin-bottom: 8px; text-wrap: balance; }
.lede { color: var(--muted); max-width: 62ch; margin-bottom: 24px; text-wrap: pretty; }
h3 { font-family: var(--font-display); font-weight: 600; color: var(--navy); font-size: 1.1rem; margin-bottom: 6px; }
p + p { margin-top: 12px; }

/* Cards */
.grid { display: grid; gap: 18px; margin-top: 24px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }
/* Cards tilt slightly toward the pointer. tilt.js sets --rx, --ry, --mx and --my;
   all the easing stays here. Held to 3 degrees, less than the product grid on the
   Muntas site, because this is a service business people often reach in a hurry and
   the motion should read as quality rather than as the page playing.

   Deliberately no overflow:hidden here, unlike the equivalent Muntas rule. The
   "Most popular" badge on .card.featured is an absolutely positioned ::before that
   sits above the card's top edge, and clipping overflow would cut it in half. The
   sheen below carries its own border-radius instead. */
.grid { perspective: 900px; }

.card {
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow);
  position: relative;
  transform-style: preserve-3d;
  transform:
    perspective(900px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translate3d(0, var(--lift, 0), 0);
  transition: box-shadow .3s ease, transform .35s cubic-bezier(.2,.7,.3,1);
  will-change: transform;
}

/* Pointer-following sheen. Rounded to match the card and never blocks a click. */
.card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius);
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%),
              rgba(242, 118, 46, .10), transparent 60%);
  opacity: 0; transition: opacity .3s ease;
  pointer-events: none;
  /* Kept behind the content. At 10% the tint over text is imperceptible today
     (measured: a 0.0001 luminance shift), but an absolutely positioned pseudo
     element otherwise paints above in-flow text, so this stops it becoming a real
     problem if the sheen is ever strengthened. */
  z-index: 0;
}
.card > * { position: relative; z-index: 1; }
.card:hover, .card:focus-within { --lift: -4px; box-shadow: var(--shadow-lift); }
.card:hover::after, .card:focus-within::after { opacity: 1; }

/* Lifting the heading off the card face is what actually reads as depth. */
.card h3, .card .price { transform: translateZ(18px); }
.card .price { color: var(--orange-text); font-weight: 800; font-size: .95rem; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: .95rem; }
.card a.more { display: inline-block; margin-top: 12px; padding-top: 0; font-weight: 700; text-decoration: none; }
.card a.more:last-child { margin-top: auto; padding-top: 12px; }
.card.featured { border: 2px solid var(--orange); position: relative; }
.card.featured::before {
  content: "Most popular"; position: absolute; top: -12px; left: 18px;
  background: var(--orange); color: #fff; font-size: .72rem; font-weight: 800;
  padding: 2px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .05em;
}

/* Lists */
.checks { list-style: none; margin-top: 12px; }
.checks li { padding: 6px 0 6px 28px; position: relative; }
.checks li::before { content: "\2713"; position: absolute; left: 0; color: var(--orange); font-weight: 800; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tags span { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 6px 14px; font-size: .88rem; color: var(--ink); }

/* Steps */
.steps { counter-reset: step; }
.steps .card { position: relative; padding-top: 30px; }
.steps .card::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -16px; left: 18px; width: 34px; height: 34px;
  background: var(--navy); color: #fff; font-weight: 800; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* FAQ */
.faq { background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-top: 10px; padding: 0 18px; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--navy); padding: 14px 0; list-style: none; position: relative; padding-right: 28px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: var(--orange); font-size: 1.3rem; font-weight: 800; }
.faq[open] summary::after { content: "\2212"; }
.faq p { color: var(--muted); padding-bottom: 14px; }

/* CTA band */
/* The band is an orange gradient, so white text on it measured 2.84:1 at the light
   end and the pale peach paragraph only 2.42:1. Navy on the same orange measures
   5.17:1, matches the call button, and keeps the band its full brand orange. */
.cta-band { background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%); color: var(--navy); text-align: center; padding: 44px 0; }
.cta-band h2 { color: var(--navy); }
.cta-band p { margin: 8px auto 20px; max-width: 55ch; color: var(--navy); }
.cta-band .btn-ghost { border-color: var(--navy); color: var(--navy); background: transparent; }
.cta-band .btn-ghost:hover { background: var(--navy); color: #fff; }
.cta-band .btn-book { background: var(--navy); }

/* Photo placeholders - replace with real images */
.photo-ph {
  background: repeating-linear-gradient(45deg, #e8eef4, #e8eef4 12px, #f2f6fa 12px, #f2f6fa 24px);
  border: 2px dashed #b7c6d4; border-radius: var(--radius);
  min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--muted); font-weight: 600; font-size: .9rem; text-align: center; padding: 20px;
}
.photo-ph svg { width: 34px; height: 34px; opacity: .55; }

/* Real service-area map embed (replaces some photo placeholders) */
.map-embed {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  border: 1px solid var(--line); min-height: 260px;
}
.map-embed iframe { width: 100%; height: 100%; min-height: 260px; border: 0; display: block; }
.map-caption { font-size: .82rem; color: var(--muted); margin-top: 8px; text-align: center; }

/* Real job photos */
.job-photo {
  width: 100%; height: 100%; min-height: 260px; max-height: 420px; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line);
}

/* Text-forward install panel (used where a photo would be a non-sequitur) */
.install-panel {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px; min-height: 260px; display: flex; flex-direction: column; justify-content: center;
}
.install-panel h3 { margin-bottom: 12px; }
.install-panel ul { list-style: none; }
.install-panel li { padding: 6px 0 6px 26px; position: relative; color: var(--muted); font-size: .95rem; }
.install-panel li::before { content: "\2713"; position: absolute; left: 0; color: var(--orange); font-weight: 800; }

/* Owner text quote (text-based trust signal, no photo needed) */
.owner-quote {
  margin-top: 20px; padding: 16px 18px; border-left: 3px solid var(--orange);
  background: #fff; border-radius: 0 var(--radius) var(--radius) 0;
}
.owner-quote p { color: var(--ink); font-size: .98rem; font-style: italic; }
.owner-quote cite { display: block; margin-top: 8px; font-style: normal; font-weight: 700; color: var(--navy); font-size: .88rem; }

/* License verify link */
.verify-license { display: inline-block; margin-top: 8px; font-size: .85rem; color: #cfe0ee; text-decoration: underline; }
.verify-license:hover { color: #fff; }

/* Footer */
.site-footer { background: var(--navy); color: #b9cadb; padding: 44px 0 28px; font-size: .92rem; }
.site-footer h4 { color: #fff; font-size: .95rem; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .05em; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer ul { list-style: none; }
.site-footer li { padding: 3px 0; }
.site-footer a { color: #cfe0ee; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-legal { border-top: 1px solid #2a4a6b; margin-top: 30px; padding-top: 18px; font-size: .82rem; color: #8fa6bb; }
.license-badge { display: inline-block; background: #1d4166; color: #fff; border-radius: 6px; padding: 4px 10px; font-weight: 700; font-size: .8rem; margin-top: 8px; }

/* Mobile call bar */
.mobile-callbar { display: none; }
@media (max-width: 700px) {
  .mobile-callbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--line); padding: 10px 12px; gap: 10px;
    box-shadow: 0 -2px 12px rgba(15, 42, 67, .12);
  }
  .mobile-callbar .btn { flex: 1; }
  body { padding-bottom: 70px; }
}

/* Utility */
.two-col { display: grid; grid-template-columns: 1.2fr 1fr; gap: 34px; align-items: start; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }
.note { font-size: .88rem; color: var(--muted); margin-top: 14px; }
.center { text-align: center; }

/* Respect a reduced-motion preference. The tilt is removed outright rather than
   sped up; the shadow and colour cues still fire so cards stay obviously
   interactive. This site had no reduced-motion handling at all before. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .card, .card h3, .card .price { transform: none !important; }
  .card::after { display: none; }
}