/* Regional visual layer, shared by Montreal, Laval and Chateauguay. */
.region-page {
  --region-accent: #22d3ee;
  --region-accent-soft: rgba(34, 211, 238, 0.14);
  --region-accent-contrast: #c8f7ff;
  background:
    radial-gradient(circle at 12% 8%, var(--region-accent-soft), transparent 34rem),
    var(--ds-surface-lowest, #0a0a0a);
}

.region-page--montreal {
  --region-accent: #22d3ee;
  --region-accent-soft: rgba(34, 211, 238, 0.15);
  --region-accent-contrast: #c8f7ff;
}

.region-page--laval {
  --region-accent: #a78bfa;
  --region-accent-soft: rgba(167, 139, 250, 0.17);
  --region-accent-contrast: #e6dcff;
}

.region-page--chateauguay {
  --region-accent: #5eead4;
  --region-accent-soft: rgba(94, 234, 212, 0.14);
  --region-accent-contrast: #cafff5;
}

.region-page .city-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  background: rgba(10, 10, 12, 0.82);
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
}

.region-page .ds-hero {
  min-height: min(51rem, 92svh);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.region-page .ds-hero__gradient {
  background:
    linear-gradient(90deg, rgba(7, 7, 10, 0.95) 0%, rgba(7, 7, 10, 0.72) 50%, rgba(7, 7, 10, 0.38) 100%),
    radial-gradient(circle at 18% 22%, var(--region-accent-soft), transparent 38rem);
}

.region-page .ds-hero__tag,
.region-page .ds-hero__tag-line {
  color: var(--region-accent-contrast);
  border-color: color-mix(in srgb, var(--region-accent) 62%, transparent);
}

.region-page .ds-hero__title em,
.region-page .ds-trust__icon,
.region-page .ds-why__feature-icon {
  color: var(--region-accent);
}

.region-page .ds-hero__btn-primary,
.region-page .city-cta {
  border-color: var(--region-accent);
  background: var(--region-accent);
  color: #061014;
}

.region-page .ds-hero__btn-primary:hover,
.region-page .ds-hero__btn-primary:focus-visible,
.region-page .city-cta:hover,
.region-page .city-cta:focus-visible {
  box-shadow: 0 0.8rem 2rem var(--region-accent-soft);
  filter: brightness(1.06);
}

.region-page .ds-trust {
  border-block-color: rgba(255, 255, 255, 0.11);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent, rgba(255, 255, 255, 0.035));
}

.region-page .ds-why,
.region-page .ds-industries,
.region-page .ds-process,
.region-page .ds-portfolio,
.region-page .ds-faq,
.region-page .ds-contact {
  position: relative;
}

.region-page .ds-why::before,
.region-page .ds-process::before {
  position: absolute;
  inset: 1rem max(1rem, 3vw);
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  background: linear-gradient(145deg, rgba(255,255,255,.035), transparent);
  content: "";
}

.region-page .ds-why__testimonial {
  border-color: color-mix(in srgb, var(--region-accent) 38%, rgba(255,255,255,.12));
  background: rgba(9, 12, 16, 0.86);
}

.region-page .ds-why__testimonial-label,
.region-page .ds-process__num,
.region-page .ds-industry__num {
  color: var(--region-accent);
}

.region-page .ds-industry,
.region-page .ds-process__step,
.region-page .ds-portfolio__card {
  border-color: rgba(255, 255, 255, 0.12);
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}

.region-page .ds-industry:hover,
.region-page .ds-industry:focus-within,
.region-page .ds-process__step:hover,
.region-page .ds-process__step:focus-within,
.region-page .ds-portfolio__card:hover,
.region-page .ds-portfolio__card:focus-within {
  border-color: color-mix(in srgb, var(--region-accent) 55%, rgba(255,255,255,.14));
  background: rgba(255, 255, 255, 0.045);
  transform: translateY(-0.2rem);
}

.region-page .ds-contact {
  border-block: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 86% 28%, var(--region-accent-soft), transparent 28rem),
    rgba(255,255,255,.025);
}

@media (max-width: 760px) {
  .region-page .ds-hero {
    min-height: min(43rem, 88svh);
  }

  .region-page .ds-hero__gradient {
    background:
      linear-gradient(180deg, rgba(7,7,10,.82), rgba(7,7,10,.72) 56%, rgba(7,7,10,.95)),
      radial-gradient(circle at 45% 10%, var(--region-accent-soft), transparent 26rem);
  }

  .region-page .ds-why::before,
  .region-page .ds-process::before {
    inset: 0.45rem 0.55rem;
    border-radius: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .region-page .ds-industry,
  .region-page .ds-process__step,
  .region-page .ds-portfolio__card {
    transition: none;
  }
}