/* ---------------------------- Vancouver web design hero -------------------------- */
.vwd-hero__accent { color: var(--beacon-hi); }

.vwd-hero__badges {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  gap: var(--s4); margin: var(--s5) auto var(--s4);
  padding-top: var(--s4); border-top: 1px solid var(--rule-invert);
}
.vwd-hero__badge {
  display: flex; align-items: center; gap: .6rem; text-align: left;
  padding-right: var(--s4); border-right: 1px solid var(--rule-invert);
}
.vwd-hero__badge:last-child { border-right: 0; padding-right: 0; }
.vwd-hero__badge svg {
  width: 22px; height: 22px; flex: none; color: var(--beacon-hi);
}
.vwd-hero__badge span {
  font-family: var(--ui); font-size: .8125rem; font-weight: 500;
  line-height: 1.25; color: var(--ink-invert-soft); max-width: 9ch;
}

.vwd-hero__rating {
  display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 0 auto var(--s4);
}
.vwd-hero__rating-stars {
  margin: 0; color: #E8B84B; font-size: 1.1rem; letter-spacing: .06em; line-height: 1;
}
.vwd-hero__rating-text {
  font-family: var(--ui); font-size: .875rem; color: var(--ink-invert-soft);
}
.vwd-hero__rating-text strong {
  font-family: var(--mono); color: var(--ink-invert); font-weight: 600;
}

@media (max-width: 700px) {
  .vwd-hero__badges {
    display: grid; grid-template-columns: 1fr 1fr; justify-items: center;
    column-gap: var(--s3); row-gap: var(--s3);
  }
  .vwd-hero__badge { border-right: 0; padding-right: 0; }
  .vwd-hero__badge span { max-width: 11ch; }

  .vwd-hero__rating { flex-wrap: wrap; justify-content: center; }
}

/* ------------------------ Section background photography ------------------------
   Plain (non-panel, non-dark) bands read flat next to the interactive sections
   around them. A light scrim (same tone as --chart) over a photo keeps body text
   at full contrast while giving the section real depth -- same technique the
   sitewide .band--dark ambient texture already uses, just light instead of dark. */
.vwd-bg-search {
  background:
    linear-gradient(rgba(244,245,240,.85), rgba(244,245,240,.85)) center/cover no-repeat,
    url(/assets/img/editorial-industry-buildings-640.jpg) center/cover no-repeat;
}
.vwd-bg-frontend {
  background:
    linear-gradient(rgba(244,245,240,.65), rgba(244,245,240,.65)) center/cover no-repeat,
    url(/assets/img/editorial-systems-stack-640.jpg) center/cover no-repeat;
}
.vwd-bg-searchready {
  background:
    linear-gradient(rgba(244,245,240,.65), rgba(244,245,240,.65)) center/cover no-repeat,
    url(/assets/img/bg-laptop-wireframe-640.jpg) center/cover no-repeat;
}
.vwd-bg-quickanswer {
  background:
    linear-gradient(rgba(244,245,240,.72), rgba(244,245,240,.72)) center/cover no-repeat,
    url(/assets/img/editorial-web-network-map-640.jpg) center/cover no-repeat;
}
@media (min-width: 640px) {
  .vwd-bg-quickanswer { background-image: linear-gradient(rgba(244,245,240,.72), rgba(244,245,240,.72)), url(/assets/img/editorial-web-network-map-960.jpg); }
}
@media (min-width: 960px) {
  .vwd-bg-quickanswer { background-image: linear-gradient(rgba(244,245,240,.72), rgba(244,245,240,.72)), url(/assets/img/editorial-web-network-map-1600.jpg); }
}
@media (min-width: 1600px) {
  .vwd-bg-quickanswer { background-image: linear-gradient(rgba(244,245,240,.72), rgba(244,245,240,.72)), url(/assets/img/editorial-web-network-map-2400.jpg); }
}

/* .sui-steps circles sit directly on these photo backgrounds now; force a
   solid, opaque fill + ring so the step number stays legible regardless of
   what's behind it, instead of the thin 2px outline the plain-band version
   uses (which blended into a busy or similarly-light backdrop). */
.vwd-bg-frontend .sui-steps__step::before,
.vwd-bg-searchready .sui-steps__step::before {
  background: var(--chart);
  box-shadow: 0 0 0 4px var(--chart), 0 1px 3px rgba(16,24,32,.25);
}
.vwd-bg-frontend .sui-steps__step.is-in::before,
.vwd-bg-searchready .sui-steps__step.is-in::before {
  box-shadow: 0 0 0 4px var(--chart), 0 1px 3px rgba(16,24,32,.25);
}
.vwd-bg-frontend .sui-steps::before,
.vwd-bg-frontend .sui-steps__fill,
.vwd-bg-searchready .sui-steps::before,
.vwd-bg-searchready .sui-steps__fill {
  z-index: 0;
}
.vwd-bg-frontend .sui-steps__step::before,
.vwd-bg-searchready .sui-steps__step::before {
  z-index: 1;
}
.vwd-bg-faq {
  background:
    linear-gradient(rgba(244,245,240,.85), rgba(244,245,240,.85)) center/cover no-repeat,
    url(/assets/img/bg-faq-consultation-640.jpg) center/cover no-repeat;
}
/* "Someone should still answer" -- the AI Receptionist section. This photo is
   dark (night skyline + hologram), so it takes the dark scrim + .band--dark
   text-inversion instead of the light-panel treatment above. Position shifted
   right so the woman's face sits clear of the left-aligned copy, same idea as
   the sitewide .band--shot object-position convention. */
.band--dark.vwd-bg-receptionist {
  background:
    linear-gradient(rgba(16,24,32,.78), rgba(16,24,32,.78)) right center/cover no-repeat,
    url(/assets/img/vwd-bg-ai-receptionist-640.jpg) right center/cover no-repeat;
}
@media (min-width: 640px) {
  .vwd-bg-search { background-image: linear-gradient(rgba(244,245,240,.85), rgba(244,245,240,.85)), url(/assets/img/editorial-industry-buildings-960.jpg); }
  .vwd-bg-frontend { background-image: linear-gradient(rgba(244,245,240,.65), rgba(244,245,240,.65)), url(/assets/img/editorial-systems-stack-960.jpg); }
  .vwd-bg-searchready { background-image: linear-gradient(rgba(244,245,240,.65), rgba(244,245,240,.65)), url(/assets/img/bg-laptop-wireframe-960.jpg); }
  .vwd-bg-faq { background-image: linear-gradient(rgba(244,245,240,.85), rgba(244,245,240,.85)), url(/assets/img/bg-faq-consultation-960.jpg); }
  .band--dark.vwd-bg-receptionist { background-image: linear-gradient(rgba(16,24,32,.78), rgba(16,24,32,.78)), url(/assets/img/vwd-bg-ai-receptionist-960.jpg); }
}
@media (min-width: 960px) {
  .vwd-bg-search { background-image: linear-gradient(rgba(244,245,240,.85), rgba(244,245,240,.85)), url(/assets/img/editorial-industry-buildings-1600.jpg); }
  .vwd-bg-frontend { background-image: linear-gradient(rgba(244,245,240,.65), rgba(244,245,240,.65)), url(/assets/img/editorial-systems-stack-1600.jpg); }
  .vwd-bg-searchready { background-image: linear-gradient(rgba(244,245,240,.65), rgba(244,245,240,.65)), url(/assets/img/bg-laptop-wireframe-1600.jpg); }
  .vwd-bg-faq { background-image: linear-gradient(rgba(244,245,240,.85), rgba(244,245,240,.85)), url(/assets/img/bg-faq-consultation-1600.jpg); }
  .band--dark.vwd-bg-receptionist { background-image: linear-gradient(rgba(16,24,32,.78), rgba(16,24,32,.78)), url(/assets/img/vwd-bg-ai-receptionist-1536.jpg); }
}
@media (min-width: 1600px) {
  .vwd-bg-search { background-image: linear-gradient(rgba(244,245,240,.85), rgba(244,245,240,.85)), url(/assets/img/editorial-industry-buildings-2400.jpg); }
  .vwd-bg-frontend { background-image: linear-gradient(rgba(244,245,240,.65), rgba(244,245,240,.65)), url(/assets/img/editorial-systems-stack-2400.jpg); }
  .vwd-bg-searchready { background-image: linear-gradient(rgba(244,245,240,.65), rgba(244,245,240,.65)), url(/assets/img/bg-laptop-wireframe-2400.jpg); }
  .vwd-bg-faq { background-image: linear-gradient(rgba(244,245,240,.85), rgba(244,245,240,.85)), url(/assets/img/bg-faq-consultation-2400.jpg); }
}