/* Service area pages (/service-areas/ and /service-areas/*).
   Tokens and shared components: styles.css. */

/* ============================================================ band rhythm
   styles.css drops the top padding of a plain band that follows another band;
   here a plain band often follows a coloured one, which needs its padding back. */

/* ============================================================ intro */
.intro .statement > div > .tag { margin-bottom: 1.25rem; letter-spacing: 0.05em; }
.intro .statement h2 { margin: 0; }

/* ============================================================ dark band with photo (Littleton air duct) */
.on-dark .photo { border-color: var(--c-ground); box-shadow: 9px 9px 0 var(--c-lime); }
.duct .split .photo { aspect-ratio: 4 / 3; }
.book-line {
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1.5px solid var(--c-ink-2);
  font: 700 1.05rem/1.45 var(--f-display); color: var(--c-paper);
}
.book-line strong { font-weight: inherit; }
.book-line a { color: var(--c-lime); text-decoration-color: var(--c-lime); }

/* ============================================================ ZIP codes: stamped tickets */
.zip-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: 2rem; }
.zip-head h2 { margin: 0; max-width: 22ch; }
.zip-head p { margin: 0; max-width: 40ch; font-size: var(--fs-lead); line-height: 1.45; }
.zip-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: 1rem;
  margin: 0; padding: 0; list-style: none;
}
.zip-list > li {
  position: relative; margin: 0; padding: 1.1rem 1.25rem 1.2rem;
  background: var(--c-paper); border: var(--bd); border-radius: var(--r-sm); box-shadow: var(--sh-sm);
}
.zip-list > li::after {
  content: ""; position: absolute; top: 1rem; right: 1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: radial-gradient(circle, var(--c-ink) 0 16%, transparent 17% 34%, var(--c-ink) 35% 48%, transparent 49% 66%, var(--c-ink) 67% 80%, transparent 81%);
  opacity: 0.85;
}
.zip-code {
  display: block; margin-bottom: 0.35rem;
  font: 800 clamp(1.6rem, 1.3rem + 1vw, 2.1rem)/1 var(--f-display); letter-spacing: var(--tr-numeral);
}
.zip-area { display: block; font-weight: 500; line-height: 1.4; color: var(--c-ink-soft); }

/* ============================================================ why band */
.why-band h2 { margin-bottom: 1.25rem; }
.why-band .photo-land { aspect-ratio: 4 / 3; }
.why-band .photo-land img { object-position: 70% 50%; }

/* ============================================================ services: numbered rows */
.svc-title { max-width: 20ch; margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
.svc-list { counter-reset: svc; margin: 0; padding: 0; list-style: none; border-top: var(--bd); }
.svc {
  counter-increment: svc;
  display: grid; grid-template-columns: 4rem minmax(0, 0.85fr) minmax(0, 1.55fr); gap: 1rem var(--gap);
  align-items: start; margin: 0; padding-block: clamp(1.75rem, 1.25rem + 1.8vw, 2.75rem);
  border-bottom: var(--bd);
}
.svc::before {
  content: counter(svc, decimal-leading-zero);
  display: grid; place-items: center; width: 3.6rem; height: 3.6rem;
  background: var(--c-lime); border: var(--bd); border-radius: 50%; box-shadow: 3px 3px 0 var(--c-ink);
  font: 800 1rem/1 var(--f-display); letter-spacing: var(--tr-numeral);
}
.svc:nth-child(even)::before { background: var(--c-ink); color: var(--c-lime); }
.svc h3 { margin: 0; padding-top: 0.6rem; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); }
.svc-body { max-width: 66ch; }
.svc-kicker { margin-top: 1.4rem; font-weight: 700; }
.svc-checks { columns: 2 15rem; column-gap: 1.75rem; margin: 0; }
.svc-checks li { margin-bottom: 0.5em; break-inside: avoid; }
@media (max-width: 1000px) {
  .svc { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .svc-body { grid-column: 1 / -1; }
}

/* ============================================================ reviews */
.rev-title { max-width: 24ch; margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem); }

/* ============================================================ nearby communities (dark band) */
.nearby .statement > h2 { max-width: 16ch; }
.nearby .lead { color: var(--c-ground); margin-bottom: 1.75rem; }
.nearby .pills a { color: var(--c-ink); border-color: var(--c-ink); box-shadow: 4px 4px 0 var(--c-lime); }
.nearby .pills a:hover { box-shadow: 6px 6px 0 var(--c-paper); }
.nearby .pills span { background: transparent; color: var(--c-ground); border-color: var(--c-ground); box-shadow: none; }

/* ============================================================ FAQ */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 1.5rem var(--gap); align-items: start; }
.faq-title { margin: 0; position: sticky; top: 8.5rem; }
@media (max-width: 860px) {
  .faq-wrap { grid-template-columns: minmax(0, 1fr); }
  .faq-title { position: static; }
}

/* ============================================================ Conifer: why choose rows */
.choose-title { max-width: 18ch; margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
.choose .why > div { grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr); padding: 1.35rem 1.75rem; }
.choose .why dt { font-size: 1.1rem; }

/* ============================================================ hub: area cards */
.areas-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
.areas-head h2 { margin: 0; }
.area-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem;
  margin: 0; padding: 0; list-style: none;
}
.area-card {
  position: relative; display: flex; flex-direction: column; margin: 0;
  padding: 1.5rem 1.5rem 1.6rem; overflow: hidden;
  background: var(--c-paper); border: var(--bd); border-radius: var(--r); box-shadow: var(--sh);
}
.area-card:first-child { background: var(--c-ink); color: var(--c-ground); grid-column: span 2; grid-row: span 2; }
.area-photo { aspect-ratio: 16 / 10; margin-bottom: 1.4rem; border-color: var(--c-ground); box-shadow: 6px 6px 0 var(--c-lime); }
.area-card:first-child > p:not(.area-more) { max-width: 60ch; }
.area-card:first-child h3 { color: var(--c-lime); }
.area-card:first-child .area-go { color: var(--c-paper); }
.area-card h3 { position: relative; z-index: 1; margin: 0 0 0.85rem; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem); }
.area-card > p { position: relative; z-index: 1; }
.area-card::before {
  /* quarter of the concentric-ring seal, centred on the top-right corner */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 100% 0, transparent 0 1.6rem, var(--c-lime) 1.6rem 1.85rem, transparent 1.85rem 2.9rem,
    var(--c-lime) 2.9rem 3.15rem, transparent 3.15rem 4.2rem, var(--c-lime) 4.2rem 4.45rem, transparent 4.45rem);
}
.area-card .area-more { margin-top: auto; padding-top: 1.1rem; }
.area-go {
  display: inline-flex; align-items: center; gap: 0.5em;
  font: 700 0.875rem/1.25 var(--f-display); letter-spacing: var(--tr-button); text-transform: uppercase;
  text-decoration: none; border-bottom: 3px solid var(--c-lime); padding-bottom: 0.2em;
}
.area-go b { font-weight: inherit; }
.area-go svg { width: 1.1em; height: 1.1em; flex: none; transition: transform var(--t-fast) var(--ease); }
.area-go:hover svg { transform: translateX(4px); }
@media (max-width: 1000px) {
  .area-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-card:first-child { grid-row: auto; }
  .area-card:last-child { grid-column: span 2; }
}
@media (max-width: 640px) {
  .area-cards { grid-template-columns: minmax(0, 1fr); }
  .area-card:first-child, .area-card:last-child { grid-column: auto; }
}

/* The live pages show a reviews heading with no reviews under it (the
   widget was never added). The heading is kept verbatim and becomes a link
   to the real Google reviews instead of an orphan. */
.rev-link {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.5rem;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem) clamp(1.25rem, 1rem + 2vw, 2.5rem);
  background: var(--c-paper); border: var(--bd); border-radius: var(--r); box-shadow: var(--sh);
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.rev-link:hover { background: var(--c-lime); transform: translate(-3px, -3px); box-shadow: var(--sh-lg); }
.rev-link h2 { margin: 0; font-size: clamp(1.3rem, 1rem + 1.4vw, 2.1rem); }
.rev-link-stars { display: flex; gap: 0.2rem; }
.rev-link-stars svg { width: 1.5rem; height: 1.5rem; fill: var(--c-lime); stroke: var(--c-ink); stroke-width: 1.6; stroke-linejoin: round; }
.rev-link:hover .rev-link-stars svg { fill: var(--c-paper); }
.rev-link-go { display: grid; place-items: center; width: 3rem; height: 3rem; background: var(--c-lime); border: var(--bd); border-radius: 50%; }
.rev-link-go svg { width: 1.3rem; height: 1.3rem; }
@media (max-width: 640px) {
  .rev-link { grid-template-columns: minmax(0, 1fr) auto; }
  .rev-link-stars { grid-column: 1 / -1; }
}