/* Commercial snow removal landing page, Exterior Services LLC.
   Loaded after service.css and contact.css: the band, grid and form components
   come from those files; this file only lays out the hero, the chip lists and
   the dark-band form. Tokens only. */

/* ══════════════════════════════════════════════════════════════════════════════
   HERO: dark .svc-band with the snow plowing video.
   Desktop: the video fills the hero behind the text (object-fit cover, center)
   under a --char overlay. The overlay is 90% --char across the text column, so
   paper and --green-lt text pass WCAG AA even over a pure white pixel (the plow
   spray, the lot lights), then thins toward the right where the truck sits.
   Phones: see the 880px block. MOBILE HERO LAW wins, the video stacks above the
   text at its natural 16:9 with no object-fit and no overlay.
   ══════════════════════════════════════════════════════════════════════════════ */
.snow-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-height: clamp(34rem, 78svh, 48rem);
  text-align: left;
}
.snow-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--char) 90%, transparent) 0%,
    color-mix(in srgb, var(--char) 90%, transparent) 52%,
    color-mix(in srgb, var(--char) 30%, transparent) 100%);
}
.snow-hero__media { position: absolute; inset: 0; z-index: -2; }
.snow-hero__video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  background: var(--char);
}

.snow-hero__in {
  width: min(72rem, 100%); margin-inline: auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-7); align-items: center;
}
.snow-hero__text { grid-column: 1; grid-row: 1; }

.snow-hero .eyebrow { justify-content: flex-start; }
.snow-hero .eyebrow::before { display: none; }
.snow-hero .svc-band__h1 { font-size: clamp(2rem, 3.4vw, 3rem); }
.snow-hero .svc-band__sub { margin-inline: 0; }
.snow-hero__now {
  margin-top: var(--sp-4);
  color: var(--green-lt);
  font-size: var(--fs-1); font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.snow-hero__actions {
  margin-top: var(--sp-5);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-4) var(--sp-5);
}

/* Text links on the dark bands read in the light green */
.dk .textlink { color: var(--green-lt); }
.dk .textlink:hover { color: var(--paper); }

/* ══════════════════════════════════════════════════════════════════════════════
   ANSWER FIRST INTRO and FAQ
   ══════════════════════════════════════════════════════════════════════════════ */
.snow-intro__lede {
  width: min(46rem, 100%); margin-inline: auto;
  font-size: clamp(var(--fs-3), 1.5vw, var(--fs-4)); line-height: 1.65;
}

.snow-faq {
  margin-top: var(--sp-6);
  width: min(48rem, 100%); margin-inline: auto;
  display: grid; gap: var(--sp-4);
}
.snow-faq__item {
  padding: var(--sp-5);
  background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--r-card);
}
.snow-faq__item h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-4); color: var(--ink); line-height: 1.3;
}
.snow-faq__item p {
  margin-top: var(--sp-2);
  color: var(--mut); line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CHIP ROWS: property types and towns
   ══════════════════════════════════════════════════════════════════════════════ */
.snow-chips {
  margin-top: var(--sp-6);
  width: min(56rem, 100%); margin-inline: auto;
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-3);
}
.snow-chips li {
  padding: var(--sp-2) var(--sp-4);
  background: var(--paper-2);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--ink); font-size: var(--fs-2); font-weight: 600;
}
.snow-chips--sm { margin-top: var(--sp-5); gap: var(--sp-2); }
.snow-chips--sm li { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-1); font-weight: 500; color: var(--mut); }

.snow-counties {
  margin-top: var(--sp-6);
  width: min(64rem, 100%); margin-inline: auto;
  list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  text-align: center;
}
.snow-counties li {
  padding: var(--sp-4) var(--sp-3);
  border-top: 3px solid var(--sand);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-4); color: var(--ink); line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════════════════════
   QUOTE FORM on the dark band. Field styling is contact.css; only the label
   contrast, the checkbox group and the closing line are set here.
   ══════════════════════════════════════════════════════════════════════════════ */
.snow-form { width: min(40rem, 100%); margin: var(--sp-6) auto 0; }
.dk .form__label { color: var(--mut-d); }
.dk .form__label span,
.dk .form__required-note span { color: var(--green-lt); }
.dk .form__required-note { color: var(--mut-d); }

.snow-checks { border: 0; padding: 0; min-width: 0; }
.snow-checks__opts {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3) var(--sp-4);
}
.snow-check {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--paper); font-size: var(--fs-2);
  cursor: pointer;
}
.snow-check input {
  width: var(--sp-4); height: var(--sp-4);
  accent-color: var(--green-lt);
}
.snow-form__talk {
  margin-top: var(--sp-5);
  text-align: center; color: var(--mut-d);
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE, 880px and below.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  /* MOBILE HERO LAW: the full-bleed cover video gives way to a stacked band.
     Video first at its natural 16:9, edge to edge, height auto, object-fit
     unset; no overlay, the text sits on solid --char below it. */
  .snow-hero { display: block; min-height: 0; padding-top: 0; }
  .snow-hero::before { display: none; }
  .snow-hero__media {
    position: static; z-index: auto;
    margin: 0 calc(-1 * var(--gutter)) var(--sp-6);
  }
  .snow-hero__video {
    height: auto;
    aspect-ratio: auto;
    object-fit: unset;
  }
  .snow-hero__in { grid-template-columns: 1fr; }
  .snow-counties { grid-template-columns: repeat(2, 1fr); }
  .snow-checks__opts { grid-template-columns: 1fr; }
}