/* ==========================================================================
   J AND R 2026 DESIGN SYSTEM
   Shared across the residential snow landing pages and the commercial funnel.

   CANONICAL SOURCE: shared/css/jandr-2026.css in the jnr-snow-lps repo.
   Each deployed site publishes from its own directory and cannot reach ../shared,
   so this file is COPIED into every site folder by tools/sync-css.sh.
   Edit here. Never edit a site copy; the next sync overwrites it.

   Light page, Inter, mobile-390 first. Everything is driven by the tokens
   below; no ad hoc values past :root.
   ========================================================================== */

:root {
  /* Color ---------------------------------------------------------------- */
  --bg: #ffffff;
  --bg-alt: #f7f8f9;
  --ice: #eef4f8;            /* cool winter tint for section bands */
  --ice-line: #dbe6ee;
  --ink: #0f1419;
  --muted: #5a6470;
  --line: #e5e7eb;
  --line-hover: #d3d8de;

  --green: #039932;          /* brand green. Fails AA on white as text. */
  --green-deep: #027024;     /* 6.24:1 on white. Use this for text and CTAs. */
  --green-tint: #e9f6ed;
  --orange: #f66909;         /* sparing accent. Urgency only. */
  --orange-deep: #b84a02;    /* AA on white for small orange text */

  --cta: var(--green-deep);
  --cta-hover: #015a1c;
  --cta-text: #ffffff;
  --scrim: rgb(15 20 25 / .86);

  /* Type scale ----------------------------------------------------------- */
  --fs-xs:   .75rem;
  --fs-sm:   .875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.1875rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  clamp(1.75rem, 3.4vw, 2.25rem);
  --fs-3xl:  clamp(2.125rem, 5vw, 3rem);

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --lh-ui: 1.45;
  --measure: 68ch;

  /* Space scale ---------------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 88px;

  /* Radius --------------------------------------------------------------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;

  /* Layout --------------------------------------------------------------- */
  --maxw: 1120px;
  --pad: 20px;
  --nav-h: 62px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
  overflow-x: clip;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

h1, h2, h3 { margin: 0 0 var(--s-3); font-weight: 800; text-wrap: balance; }
h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: -.024em; }
h2 { font-size: var(--fs-2xl); line-height: var(--lh-tight); letter-spacing: -.021em; margin-bottom: var(--s-4); }
h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); letter-spacing: -.014em; margin-bottom: var(--s-2); }
p  { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a  { color: var(--green-deep); }

.eyebrow {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--green-deep); margin: 0 0 var(--s-2);
}
.eyebrow.orange { color: var(--orange-deep); }
.lede { font-size: var(--fs-lg); color: var(--muted); max-width: var(--measure); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); margin-top: var(--s-4); }
.tnum { font-variant-numeric: tabular-nums; }

/* Icons -------------------------------------------------------------------- */
.ico {
  width: 26px; height: 26px; flex: 0 0 auto;
  fill: none; stroke: var(--green-deep); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Focus and selection ------------------------------------------------------ */
:where(a, button, [tabindex], iframe, summary):focus-visible {
  outline: 2px solid var(--green-deep);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
::selection { background: var(--green-tint); color: var(--ink); }

.skip {
  position: absolute; left: var(--pad); top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm); text-decoration: none; font-weight: 700;
  font-size: var(--fs-sm); transition: top .15s ease;
}
.skip:focus { top: var(--s-2); }

/* Nav ---------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgb(255 255 255 / .94); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); gap: var(--s-2);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; padding: var(--s-2) 0; }
.brand img { display: block; height: 30px; width: auto; }
.nav-actions { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.tel {
  text-decoration: none; font-weight: 600; color: var(--ink);
  font-size: var(--fs-sm); white-space: nowrap; flex: 0 1 auto;
  padding: var(--s-3) var(--s-2); border-radius: var(--r-sm);
  transition: background .15s ease; font-variant-numeric: tabular-nums;
}
.tel:hover { background: var(--bg-alt); }
@media (max-width: 430px) {
  .nav .tel { display: none; }          /* the dock carries Call on small phones */
  .brand img { height: 26px; }
}

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cta); color: var(--cta-text); text-decoration: none;
  font-weight: 700; font-size: var(--fs-sm); line-height: var(--lh-ui);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-md);
  border: 0; cursor: pointer; white-space: nowrap; min-width: 0; min-height: 44px;
  transition: background .15s ease, transform .15s ease;
}
.btn:hover { background: var(--cta-hover); transform: translateY(-1px); }
.btn.sm { padding: var(--s-3) var(--s-4); flex: 0 1 auto; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--bg-alt); }
.btn.block { width: 100%; }

/* ==========================================================================
   HERO. Mobile: full-bleed photo under a scrim, white type on top.
   Desktop: split panel so the 675px original stays at honest resolution.
   ========================================================================== */
.hero { position: relative; display: flex; align-items: flex-end; min-height: 78vh; min-height: 78svh; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; display: block; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgb(9 17 24 / .30) 0%, rgb(9 17 24 / .44) 42%, rgb(9 17 24 / .86) 100%);
}
.hero-inner { width: 100%; padding-top: var(--s-8); padding-bottom: var(--s-7); }
.hero-copy { position: relative; z-index: 1; max-width: 620px; }
.hero-copy .eyebrow { color: #b9f0cb; }
.hero-copy h1 {
  color: #fff; font-size: clamp(2.125rem, 8.4vw, 3.6rem);
  letter-spacing: -.03em; line-height: 1.06; font-weight: 900;
  max-width: 16ch; margin-bottom: var(--s-4);
}
.hero-copy .lede { color: rgb(255 255 255 / .88); margin-bottom: var(--s-6); max-width: 46ch; }
.hero-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.hero .btn.ghost { color: #fff; border-color: rgb(255 255 255 / .55); background: rgb(15 20 25 / .18); }
.hero .btn.ghost:hover { background: rgb(255 255 255 / .14); }
@media (max-width: 520px) {
  .hero-cta { display: grid; grid-template-columns: 1fr; width: 100%; }
  .hero-cta .btn { width: 100%; }
}

@media (min-width: 900px) {
  .hero { min-height: 0; display: block; background: var(--bg); }
  .hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .8fr); gap: var(--s-8); align-items: stretch; padding-top: var(--s-8); padding-bottom: var(--s-8); }
  .hero-media { position: relative; inset: auto; order: 2; border-radius: var(--r-lg); min-height: 520px; overflow: hidden; }
  .hero-media img { position: absolute; inset: 0; border-radius: var(--r-lg); object-position: 68% 50%; }
  .hero-media::after {
    border-radius: var(--r-lg);
    background: linear-gradient(to top, rgb(9 17 24 / .32) 0%, rgb(9 17 24 / 0) 34%);
  }
  .hero-copy { order: 1; align-self: center; }
  .hero-copy .eyebrow { color: var(--green-deep); }
  .hero-copy h1 { color: var(--ink); font-size: clamp(2.6rem, 4.6vw, 3.75rem); }
  .hero-copy .lede { color: var(--muted); max-width: 52ch; }
  .hero .btn.ghost { color: var(--ink); border-color: var(--line); background: transparent; }
  .hero .btn.ghost:hover { background: var(--bg-alt); }
}

/* Metrics band ------------------------------------------------------------- */
.metrics { border-bottom: 1px solid var(--line); background: var(--bg); }
.metrics-grid { display: grid; grid-template-columns: 1fr 1fr; }
.metric { padding: var(--s-4) var(--s-3) var(--s-4) 0; }
.metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.metric b {
  display: block; font-size: clamp(1.5rem, 5.4vw, 2rem); font-weight: 900;
  letter-spacing: -.03em; line-height: 1.05; color: var(--ink);
}
.metric span { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.35; }
@media (min-width: 768px) {
  .metrics-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
  .metric, .metric:nth-child(-n+2) { border-bottom: 0; padding: var(--s-5) 0; }
  .metric + .metric { border-left: 1px solid var(--line); padding-left: var(--s-6); }
}

/* Sections ----------------------------------------------------------------- */
section { padding: var(--s-9) 0; }
section.tight { padding: var(--s-8) 0; }
.ice { background: var(--ice); border-top: 1px solid var(--ice-line); border-bottom: 1px solid var(--ice-line); }
.ice + .ice, section + .ice { border-top: 0; }
.section-intro { max-width: var(--measure); }
.section-intro + * { margin-top: var(--s-6); }

.pull { max-width: 34ch; }
.pull h2 { font-size: clamp(1.9rem, 3.8vw, 2.75rem); letter-spacing: -.028em; }
.pull p { max-width: 52ch; font-size: var(--fs-lg); }

/* Proof reel. Auto-scrolling equipment marquee under the metrics band.
   Fixed display height keeps the 600x450 sources crisp; the lineup leads.
   Pause on hover; manual scroll under prefers-reduced-motion. ------------- */
.marquee { overflow: hidden; position: relative; padding: var(--s-6) 0 0; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 1; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(to right, var(--bg), rgb(255 255 255 / 0)); }
.marquee::after { right: 0; background: linear-gradient(to left, var(--bg), rgb(255 255 255 / 0)); }
.marquee-track { display: flex; gap: var(--s-3); width: max-content; animation: mq 55s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track figure { margin: 0; flex: 0 0 auto; }
.marquee-track img {
  display: block; height: clamp(180px, 24vw, 260px); width: auto;
  border-radius: var(--r-md); object-fit: cover;
}
@keyframes mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* Stakes split: copy left, the 4am night storm right. --------------------- */
.split { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 820px) { .split { grid-template-columns: 1.15fr .85fr; gap: var(--s-8); } }
.split-img { margin: 0; }
.split-img img {
  display: block; width: 100%; max-width: 450px; height: auto;
  border-radius: var(--r-lg);
}
@media (min-width: 820px) { .split-img img { margin-left: auto; } }

/* Ghosted oversized watermark icons behind sections. Decorative only. ----- */
.wm { position: relative; overflow: clip; }
.wm .wrap { position: relative; z-index: 1; }
.wm-icon {
  position: absolute; z-index: 0; pointer-events: none;
  color: var(--green); opacity: .06;
  fill: none; stroke: currentColor; stroke-width: 1.1;
  stroke-linecap: round; stroke-linejoin: round;
  height: min(74%, 460px); width: auto; max-width: 62vw;
  right: -4%; top: 50%; transform: translateY(-50%) rotate(-8deg);
}
@media (max-width: 700px) { .wm-icon { height: min(62%, 320px); max-width: 82vw; right: -14%; } }

.grid { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .g3 { grid-template-columns: repeat(3, 1fr); } }

/* Cards -------------------------------------------------------------------- */
.card, .review, .ptype, .formwrap, .mapfig {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: clip; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover, .review:hover, .ptype:hover, .mapfig:hover {
  border-color: var(--line-hover);
  box-shadow: 0 1px 2px rgb(15 20 25 / .04), 0 8px 24px -12px rgb(15 20 25 / .10);
}
.card { padding: var(--s-5); }
.card .ico { margin-bottom: var(--s-3); }
.card p { margin: 0; color: var(--muted); font-size: var(--fs-base); line-height: 1.55; }

/* Equipment photos inside cards: flush to the card edges, fixed height,
   never a tall crop. ------------------------------------------------------ */
.card-img {
  display: block; width: calc(100% + 2 * var(--s-5));
  margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-4);
  height: 180px; object-fit: cover; background: var(--bg-alt);
}

/* Property photo cards: the photo is the card. -------------------------- */
.ptype { margin: 0; position: relative; }
.ptype img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--bg-alt); }
.ptype figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s-6) var(--s-4) var(--s-3);
  color: #fff; font-weight: 700; font-size: var(--fs-md); letter-spacing: -.01em;
  background: linear-gradient(to top, rgb(9 17 24 / .82), rgb(9 17 24 / 0));
}

/* Placeholder property tiles: branded, deliberate, awaiting photography.
   Same structure as the photo cards so a swap upgrades without relayout. -- */
.tile .tile-art {
  aspect-ratio: 16 / 10; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--green-tint), var(--ice));
}
.tile-ico {
  width: 56px; height: 56px; color: var(--green-deep); opacity: .55;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Coverage map ------------------------------------------------------------- */
.mapfig { display: block; position: relative; text-decoration: none; background: var(--bg-alt); }
.mapfig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.mapzoom {
  position: absolute; left: var(--s-3); bottom: var(--s-3);
  background: var(--scrim); color: #fff; font-size: var(--fs-sm); font-weight: 700;
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); transition: background .18s ease;
}
.mapfig:hover { transform: translateY(-2px); }
.mapfig:hover .mapzoom { background: var(--cta); }

/* Portfolio feature -------------------------------------------------------- */
.feature { display: grid; gap: var(--s-5); margin-top: var(--s-7); align-items: center; }
@media (min-width: 860px) { .feature { grid-template-columns: 1fr .85fr; gap: var(--s-8); } }
.feature-body h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.026em; margin-bottom: var(--s-3); }
.feature-body p { color: var(--muted); max-width: 46ch; }
.feature-body p:first-of-type { color: var(--ink); }

/* ==========================================================================
   PHOTO STATEMENT BANDS. Full-bleed real photography under a heavy scrim.
   Structured so higher-res swaps upgrade them with zero relayout.
   ========================================================================== */
.band { position: relative; overflow: hidden; display: flex; align-items: center; padding: 0; min-height: 440px; }
.band-media { position: absolute; inset: 0; }
.band-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgb(9 17 24 / .62), rgb(9 17 24 / .78));
}
@media (min-width: 900px) {
  .band-media::after { background: linear-gradient(to right, rgb(9 17 24 / .82) 0%, rgb(9 17 24 / .62) 55%, rgb(9 17 24 / .38) 100%); }
}
.band-inner { position: relative; z-index: 1; width: 100%; padding-top: var(--s-9); padding-bottom: var(--s-9); }
.band-kicker {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: #b9f0cb; margin: 0 0 var(--s-3);
}
.band h2 {
  color: #fff; font-size: clamp(1.9rem, 4.6vw, 3rem);
  letter-spacing: -.028em; line-height: 1.1; max-width: 22ch; margin-bottom: var(--s-4);
}
.band p { color: rgb(255 255 255 / .88); font-size: var(--fs-lg); max-width: 50ch; margin: 0; }

/* Account manager ----------------------------------------------------------- */
.am { display: grid; gap: var(--s-6); }
@media (min-width: 860px) { .am { grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; } }
.am-lead p { font-size: var(--fs-lg); line-height: 1.5; max-width: 44ch; }
.am-lead em { font-style: normal; box-shadow: inset 0 -.5em 0 var(--green-tint); }
.am-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.am-list li { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); display: flex; gap: var(--s-4); align-items: flex-start; }
.am-list .ico { margin-top: 2px; }
.am-list b { display: block; font-size: var(--fs-base); font-weight: 700; }
.am-list span { display: block; font-size: var(--fs-sm); color: var(--muted); }

/* Communication beats ------------------------------------------------------ */
.beat { background: var(--bg); border: 1px solid var(--ice-line); border-radius: var(--r-md); padding: var(--s-5); }
.beat .ico { margin-bottom: var(--s-3); }
.beat h3 {
  color: var(--green-deep); font-size: var(--fs-xs); letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: var(--s-2);
}
.beat p { margin: 0; font-size: var(--fs-base); line-height: 1.55; }

/* Communication band: faint snowfall texture under an ice wash. ------------ */
.comm {
  background:
    linear-gradient(rgb(238 244 248 / .92), rgb(238 244 248 / .96)),
    url('/images/bg-whiteout.jpg') center / cover no-repeat;
}

/* Reviews ------------------------------------------------------------------ */
.review { margin: 0; padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.review blockquote {
  margin: 0; font-size: var(--fs-base); line-height: 1.55; color: var(--ink);
  position: relative; padding-left: var(--s-4);
}
.review blockquote::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 3px; background: var(--green); border-radius: 1px;
}
.review figcaption { display: flex; flex-direction: column; gap: 2px; }
.review figcaption b { font-size: var(--fs-sm); font-weight: 700; }
.review figcaption span { font-size: var(--fs-sm); color: var(--muted); letter-spacing: .005em; }

/* Review rail: runs to the viewport edge, fade only at the very edge,
   chevrons, touch snap-scroll, hidden scrollbar. --------------------------- */
.rail-ctl { display: flex; gap: var(--s-2); justify-content: flex-end; margin-top: calc(-1 * var(--s-6)); }
.rail-ctl .chev {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ice-line);
  background: var(--bg); color: var(--ink); cursor: pointer; display: grid; place-items: center;
  transition: background .15s ease, border-color .15s ease;
}
.rail-ctl .chev:hover { background: var(--green-tint); border-color: var(--green-deep); }
.rail-ctl .chev svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.rail-wrap { position: relative; margin-top: var(--s-5); }
.rail-wrap::before, .rail-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 36px; z-index: 1; pointer-events: none;
}
.rail-wrap::before { left: 0; background: linear-gradient(to right, var(--ice), rgb(238 244 248 / 0)); }
.rail-wrap::after { right: 0; background: linear-gradient(to left, var(--ice), rgb(238 244 248 / 0)); }
.rev-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(84vw, 380px);
  gap: var(--s-4); overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: var(--s-1) max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad))) var(--s-3);
}
.rev-rail::-webkit-scrollbar { display: none; }
.rev-rail .review { scroll-snap-align: start; }

/* ==========================================================================
   QUESTIONS. Native details accordions, numbered, compact on mobile.
   ========================================================================== */
.qlist { counter-reset: q; border-top: 1px solid var(--line); }
.q { counter-increment: q; border-bottom: 1px solid var(--line); }
.q summary {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) 0 var(--s-4) 42px; min-height: 48px;
  cursor: pointer; list-style: none; position: relative;
  font-weight: 700; font-size: var(--fs-base); line-height: var(--lh-snug);
}
.q summary::-webkit-details-marker { display: none; }
.q summary::before {
  content: counter(q); position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--green-tint); color: var(--green-deep);
  font-size: var(--fs-xs); font-weight: 800; display: grid; place-items: center;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.q .q-t { flex: 1 1 auto; text-wrap: pretty; }
.q .chev {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: var(--muted); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s ease;
}
.q[open] .chev { transform: rotate(180deg); }
.q summary:hover .q-t { color: var(--green-deep); }
.q-body { padding: 0 var(--s-5) var(--s-5) 42px; }
.q-why { color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; margin-bottom: var(--s-3); }
.q-ans {
  font-size: var(--fs-base); font-weight: 600; color: var(--ink);
  border-left: 3px solid var(--green); padding-left: var(--s-4); margin: 0;
}
.q-ans.q-defer { border-left-color: var(--line); color: var(--muted); font-weight: 500; }
.qcta { margin-top: var(--s-6); }

/* Steps -------------------------------------------------------------------- */
.steps { counter-reset: s; display: grid; gap: var(--s-5); max-width: var(--measure); }
.step { counter-increment: s; padding-left: 52px; position: relative; }
.step::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--ink); color: #fff;
  font-weight: 800; font-size: var(--fs-sm); display: grid; place-items: center;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.step h3 { min-height: 32px; display: flex; align-items: center; margin-bottom: var(--s-2); }
.step p { margin: 0; color: var(--muted); font-size: var(--fs-base); line-height: 1.55; }

/* Form --------------------------------------------------------------------- */
/* The form is JotForm's official embed snippet. Its own inline style carries the
   width and the starting height, and JotForm's handler sets the real height from
   the form's setHeight message, so nothing here touches the iframe's size. Adding
   a min-height floor would beat that inline height and leave dead space under the
   submit button, which is exactly what earlier versions of this file did. */
.formwrap { padding: var(--s-2); max-width: 640px; margin-inline: auto; }
/* The quote section reads as one centred column at every width: intro, form, note. */
#quote .section-intro, #quote .section-intro > *, #quote .formwrap + p { margin-inline: auto; text-align: center; }
.formnote { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s-4); max-width: var(--measure); }
.formnote a { display: inline-block; padding: var(--s-2) 0; font-variant-numeric: tabular-nums; }

/* Urgency close. The one place orange appears. ----------------------------- */
.close { border-top: 1px solid var(--line); }
.urgent { border-left: 3px solid var(--orange); padding-left: var(--s-5); max-width: var(--measure); }
.urgent .hero-cta { margin-top: var(--s-5); }
.urgent + * .btn.ghost, .close .btn.ghost { color: var(--ink); border-color: var(--line); background: transparent; }

/* Sticky dock -------------------------------------------------------------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgb(255 255 255 / .96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); padding: var(--s-3) var(--pad);
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: center;
  transition: transform .2s ease;
}
.dock .btn { padding: var(--s-3) var(--s-5); }
.dock.hide { transform: translateY(110%); }
@media (min-width: 1024px) { .dock { display: none; } }
@media (max-width: 1023px) { body { padding-bottom: 72px; } }

/* Footer ------------------------------------------------------------------- */
footer { background: var(--ice); border-top: 1px solid var(--ice-line); padding: var(--s-8) 0 var(--s-6); }
.foot-grid { display: grid; gap: var(--s-6); }
@media (min-width: 860px) { .foot-grid { grid-template-columns: 1.1fr 1fr 1.2fr; gap: var(--s-8); } }
.foot-brand img { display: block; height: 40px; width: auto; margin-bottom: var(--s-3); }
.foot-brand p { font-size: var(--fs-sm); color: var(--muted); max-width: 34ch; }
.foot-label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2);
}
.foot-tel {
  display: inline-block; font-size: clamp(1.5rem, 5vw, 1.9rem); font-weight: 900;
  letter-spacing: -.02em; color: var(--ink); text-decoration: none;
  font-variant-numeric: tabular-nums; margin-bottom: var(--s-4); padding: var(--s-1) 0;
}
.foot-tel:hover { color: var(--green-deep); }
.foot-call .btn { display: inline-flex; }
.foot-area p { font-size: var(--fs-sm); color: var(--muted); max-width: 40ch; }
.foot-link { color: var(--ink); text-decoration: none; font-weight: 600; display: inline-block; padding: var(--s-2) 0; }
.foot-link:hover { color: var(--green-deep); }
.foot-legal { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--ice-line); }
.foot-legal p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

/* Reveal. Visible by default so a JS failure cannot blank the page. --------- */
.rv-on .rv { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.rv-on .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv-on .rv { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* Print. The buyer brings the twelve questions to a bid meeting. ------------ */
@media print {
  .nav, .dock, .hero, .metrics, .band, .hero-cta, .qcta, .skip,
  .maprow, .mapfig, .formwrap, .formnote, #proposal, .close, footer,
  .ptype, .feature, .marquee, .split-img, .wm-icon,
  .rail-ctl, #reviews, .card-img { display: none !important; }
  body { padding: 0; font-size: 11pt; color: #000; background: #fff; }
  section { padding: 12pt 0; border: 0; page-break-inside: avoid; }
  .ice { background: none; border: 0; }
  h2 { font-size: 15pt; }
  .q { page-break-inside: avoid; }
  .q summary { padding: 8pt 0 4pt 30pt; }
  .q summary::before { background: none; color: #000; border: 1px solid #999; }
  .q .chev { display: none; }
  .q-body { padding: 0 0 8pt 30pt; }
  .q-why, .card p, .beat p { color: #333; }
  .q-ans { border-left-color: #999; }
  a[href^="tel:"]::after { content: " " attr(href); }
}



/* Closing band. Dark scrim, so the CTA pair needs the hero's light treatment. */
.close-band .band-kicker { color: #ffd0a3; }
.close-band .hero-cta { margin-top: var(--s-6); }
.close-band .btn.ghost {
  color: #fff; border-color: rgb(255 255 255 / .55); background: rgb(15 20 25 / .18);
}
.close-band .btn.ghost:hover { background: rgb(255 255 255 / .14); }



/* ==========================================================================
   RESIDENTIAL SNOW COMPONENTS
   Added Aug 21 2026 for the snow page restyle. Everything above is shared.
   ========================================================================== */

/* Value grid. Replaces the emoji value-stack. ------------------------------ */
.vgrid { display: grid; gap: var(--s-4); }
@media (min-width: 700px)  { .vgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .vgrid { grid-template-columns: repeat(3, 1fr); } }
.vitem {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-5); display: grid; gap: var(--s-3); align-content: start;
}
.vitem h3 { font-size: var(--fs-lg); margin: 0; letter-spacing: -.015em; }
.vitem p  { margin: 0; color: var(--muted); font-size: var(--fs-base); }

/* One stroke icon family. No filled icons, no emoji, anywhere. */
.ico {
  width: 30px; height: 30px; color: var(--green-deep);
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-sm { width: 20px; height: 20px; stroke-width: 2; }

/* Equipment cards --------------------------------------------------------- */
.eqgrid { display: grid; gap: var(--s-4); }
@media (min-width: 760px) { .eqgrid { grid-template-columns: repeat(3, 1fr); } }
.eqcard {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
}
.eqcard img { display: block; width: 100%; height: 190px; object-fit: cover; background: var(--bg-alt); }
.eqcard .eqbody { padding: var(--s-4) var(--s-5) var(--s-5); }
.eqcard h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }
.eqcard p  { margin: 0; color: var(--muted); font-size: var(--fs-base); }

/* Native quote form ------------------------------------------------------- */
.qform { display: grid; gap: var(--s-4); }
.qrow { display: grid; gap: var(--s-4); }
@media (min-width: 560px) { .qrow { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.field input {
  font: inherit; font-size: var(--fs-base); color: var(--ink);
  padding: var(--s-3) var(--s-4); border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--bg); width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus-visible {
  outline: none; border-color: var(--green-deep);
  box-shadow: 0 0 0 3px var(--green-tint);
}
.field input:invalid:not(:placeholder-shown) { border-color: #c2410c; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { font-size: var(--fs-xs); color: var(--muted); margin: 0; line-height: 1.5; }
.fstatus { margin: var(--s-3) 0 0; font-size: var(--fs-sm); font-weight: 700; min-height: 1.2em; }
.fstatus.ok  { color: var(--green-deep); }
.fstatus.err { color: #c2410c; }

/* Neighborhood chips. Replaces the bulleted list. -------------------------- */
.hoods { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.hoods li {
  font-size: var(--fs-sm); color: var(--muted);
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--r-full, 999px); padding: 6px var(--s-3);
}
.mapframe {
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-alt);
}
.mapframe iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (min-width: 900px) { .mapframe { aspect-ratio: 16 / 9; } }

/* Review rail, residential variant ---------------------------------------- */
.rev-name { font-weight: 800; color: var(--ink); }
.rev-loc  { color: var(--muted); font-size: var(--fs-sm); }
.stars { color: var(--green-deep); letter-spacing: 2px; font-size: var(--fs-sm); }

/* Footer ------------------------------------------------------------------ */
.foot-cols { display: grid; gap: var(--s-6); }
@media (min-width: 760px) { .foot-cols { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s-8); } }
.foot-h {
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s-3);
}
.foot-cols a { color: var(--ink); text-decoration: none; }
.foot-cols a:hover { text-decoration: underline; }
.legal { font-size: var(--fs-xs); color: var(--muted); border-top: 1px solid var(--line);
  margin-top: var(--s-6); padding-top: var(--s-4); }


/* --- Residential fixes, Aug 2026 ----------------------------------------- */

/* The review rail carries a full-bleed gutter calculation from the commercial
   page, where it runs edge to edge. Here it is nested inside .wrap, so that
   calculation double-pads it and the first card starts mid-screen on desktop.
   Harmless on mobile because the calc goes negative and max() picks --pad. */
.wrap .rev-rail { padding-left: var(--s-1); padding-right: var(--s-1); }
.wrap .rail-wrap::before, .wrap .rail-wrap::after { width: 20px; }

/* FAQ. Purpose-built for a short residential list; the commercial .q component
   is numbered for the twelve-questions treatment and does not fit four. */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0; min-height: 52px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: var(--fs-base); line-height: var(--lh-snug);
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 11px; height: 11px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq summary:hover { color: var(--green-deep); }
.faq .qa { padding: 0 0 var(--s-5); }
.faq .qa p { margin: 0; color: var(--muted); font-size: var(--fs-base); line-height: var(--lh-body); max-width: 62ch; }
.faq .qa a { color: var(--green-deep); font-weight: 700; }

/* Footer, trimmed. A landing page footer needs to answer "are these people
   real and how do I reach them", nothing else. */
.foot-simple { display: grid; gap: var(--s-4); justify-items: center; text-align: center; }
.foot-simple img { height: 40px; width: auto; display: block; }
.foot-simple .foot-tel { font-size: var(--fs-xl); font-weight: 900; color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.foot-simple .foot-tel:hover { color: var(--green-deep); }


/* BudgetBilling token. Replaces the line-icon watermark in that section with the
   real program mark: oversized, tilted, faded, and deliberately running off the
   right edge. The .wm section clips, so it never widens the page. */
.wm-token {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(78vw, 660px); height: auto; opacity: .09;
  right: -16%; top: 50%; transform: translateY(-50%) rotate(-14deg);
}
@media (min-width: 900px) { .wm-token { right: -7%; width: 640px; } }

/* Inline uses of the same mark. Small, and only where BudgetBilling is named as a program. */
.bb-mark { display: block; width: 48px; height: 48px; margin-bottom: var(--s-3); }
.bb-mark-sm { display: inline-block; width: 20px; height: 20px; vertical-align: -5px; margin-right: 6px; }


/* Thank-you page. Reuses section, section-intro, vgrid and vitem. Only the
   confirmation mark, the centred head and the action row are new. Lead fires here. */
.ty-head { text-align: center; }
.ty-head .section-intro, .ty-head .section-intro > *, .ty-center, .ty-center > * { margin-inline: auto; text-align: center; }
.ty-mark { display: block; width: 72px; height: 72px; margin: 0 auto var(--s-4); color: var(--green); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ty-actions { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; margin-top: var(--s-6); }
.ty-back { margin-top: var(--s-4); }
.ty-back a { color: var(--green-deep); font-weight: 700; }
.ty-alt { text-align: center; color: var(--muted); max-width: var(--measure); margin: 0 auto; }
.ty-alt a { color: var(--green-deep); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }