:root {
  --local-ink: var(--eco-ink);
  --local-navy: var(--eco-navy);
  --local-blue: var(--eco-blue);
  --local-acid: var(--eco-acid);
  --local-paper: var(--eco-mist);
  --local-line: var(--eco-line);
  --local-muted: var(--qz-color-blue-700);
}

.local-hero {
  position: relative;
  min-height: min(48rem, 88svh);
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgb(23 45 215 / 10%) 1px, transparent 1px),
    linear-gradient(rgb(23 45 215 / 10%) 1px, transparent 1px),
    var(--local-navy);
  background-size: 4rem 4rem, 4rem 4rem, auto;
  color: #fff;
  isolation: isolate;
}
.local-hero__inner { padding-block: clamp(6.75rem, 9vw, 8.5rem) clamp(3rem, 5vw, 4rem); }
.local-kicker {
  margin: 0 0 1rem;
  color: var(--local-acid);
  font-family: var(--qz-font-display);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.local-hero h1 { max-width: 65rem; margin: 0; color: #fff; font-size: clamp(2.9rem, 5.2vw, 5.4rem); line-height: .98; letter-spacing: -.06em; }
.local-hero h1 span { display: block; color: var(--local-acid); }
.local-hero__lead { max-width: 46rem; margin: 1.5rem 0 0; color: rgb(255 255 255 / 78%); font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.65; }
.local-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.8rem; }
.local-text-link { display: inline-flex; align-items: center; gap: .55rem; color: #fff; font-weight: 800; }
.local-text-link span { color: var(--local-acid); transition: transform .2s var(--qz-ease); }
.local-text-link:hover span { transform: translateY(.25rem); }
.local-hero__field { position: absolute; right: -9rem; top: 50%; z-index: -1; width: min(54vw, 48rem); aspect-ratio: 1; transform: translateY(-50%); }
.local-hero__ring { position: absolute; inset: 50%; border: 1px solid rgb(243 239 54 / 38%); border-radius: 50%; transform: translate(-50%, -50%); }
.local-hero__ring--one { width: 26%; height: 26%; }
.local-hero__ring--two { width: 58%; height: 58%; border-color: rgb(57 82 255 / 60%); }
.local-hero__ring--three { width: 92%; height: 92%; border-color: rgb(255 255 255 / 16%); }
.local-hero__pin { position: absolute; left: 50%; top: 50%; width: 1.3rem; height: 1.3rem; border: .3rem solid var(--local-navy); border-radius: 50%; background: var(--local-acid); box-shadow: 0 0 0 2px var(--local-acid), 0 0 0 1.1rem rgb(243 239 54 / 10%); transform: translate(-50%, -50%); }

.local-problems { background: #fff; }
.local-signals { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 2px solid var(--local-ink); }
.local-signal { min-height: 20rem; padding: 2rem; border-right: 1px solid var(--local-line); }
.local-signal:last-child { border-right: 0; }
.local-signal > span { display: inline-block; margin-bottom: 3rem; color: var(--local-blue); font-family: var(--qz-font-display); font-size: .72rem; font-weight: 900; letter-spacing: .14em; }
.local-signal h3 { margin: 0 0 1rem; font-size: 1.5rem; line-height: 1.15; }
.local-signal p { margin: 0; color: var(--local-muted); line-height: 1.65; }

.local-route { position: relative; overflow: hidden; background: var(--local-paper); }
.local-route::before { content: ""; position: absolute; right: -11rem; bottom: -17rem; width: 36rem; height: 36rem; border: 1px solid rgb(23 45 215 / 15%); border-radius: 50%; box-shadow: 0 0 0 5.5rem rgb(23 45 215 / 3.5%), 0 0 0 11rem rgb(23 45 215 / 2.5%); }
.local-route .eco-section-head { position: relative; }
.local-route__list { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 4rem 0 0; padding: 0; list-style: none; }
.local-route__list::before { content: ""; position: absolute; top: 2rem; left: 4%; right: 4%; height: 3px; background: var(--local-line); }
.local-route__list::after { content: ""; position: absolute; top: 2rem; left: 4%; width: 0; height: 3px; background: var(--local-blue); transition: width 1.1s cubic-bezier(.4,0,.2,1) .2s; }
.local-route__list.is-active::after { width: 92%; }
.local-route__item { position: relative; z-index: 1; padding: 0 1.2rem; }
.local-route__number { display: grid; width: 4rem; height: 4rem; margin-bottom: 2rem; place-items: center; border: 3px solid var(--local-ink); border-radius: 50%; background: #fff; color: var(--local-blue); font-family: var(--qz-font-display); font-weight: 900; transition: background .2s var(--qz-ease), color .2s var(--qz-ease), transform .2s var(--qz-ease); }
.local-route__item:hover .local-route__number { background: var(--local-acid); color: var(--local-ink); transform: translateY(-.25rem); }
.local-route__item div > p:first-child { color: var(--local-blue); font-size: .68rem; font-weight: 900; letter-spacing: .13em; }
.local-route__item h3 { margin: .55rem 0 .7rem; font-size: 1.5rem; }
.local-route__item div > p:last-child { color: var(--local-muted); line-height: 1.55; }

.local-modal { position: fixed; inset: 0; z-index: 2500; display: grid; padding: 1rem; place-items: center; overflow-y: auto; background: rgb(7 9 26 / 76%); opacity: 0; visibility: hidden; transition: opacity .2s var(--qz-ease), visibility .2s; }
.local-modal.is-open { opacity: 1; visibility: visible; }
.local-modal__panel { position: relative; width: min(47.5rem, 100%); max-height: calc(100svh - 2rem); overflow-y: auto; border: 3px solid var(--local-ink); border-radius: var(--qz-radius-sm); background: #fff; box-shadow: .9rem .9rem 0 var(--local-blue); transform: translateY(1.35rem); transition: transform .2s var(--qz-ease); }
.local-modal.is-open .local-modal__panel { transform: translateY(0); }
.local-modal__close { position: absolute; top: .75rem; right: .9rem; z-index: 2; border: 0; background: transparent; color: var(--local-ink); font-size: 2.1rem; line-height: 1; }
.local-modal__head { padding: 2.2rem 2.2rem 1.3rem; border-bottom: 1px solid var(--local-line); }
.local-modal__head .local-kicker { color: var(--local-blue); }
.local-modal__head h2 { margin: .4rem 0 .7rem; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1; }
.local-modal__head > p:last-child { margin: 0; color: var(--local-muted); }
.local-form { padding: 1.8rem 2.2rem 2.2rem; }
.local-form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.local-form__full { grid-column: 1 / -1; }
.local-form input, .local-form select, .local-form textarea { width: 100%; }
.local-form textarea { resize: vertical; }
.local-form__submit { width: 100%; margin-top: 1.3rem; }
.local-form__status { min-height: 1.5rem; margin: .8rem 0 0; font-weight: 800; text-align: center; }
.local-form__status.is-error { color: #b42318; }
.local-form__status.is-success { color: #067647; }
.local-form__note { margin: .7rem 0 0; color: var(--local-muted); font-size: .78rem; text-align: center; }
.local-form__consent { display: flex; gap: .7rem; align-items: flex-start; color: var(--local-muted); font-size: .88rem; line-height: 1.45; }
.local-form__consent input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--local-blue); flex: 0 0 auto; }

@media (max-width: 1024px) {
  .local-hero__field { right: -17rem; opacity: .52; }
}

@media (max-width: 760px) {
  .local-hero { min-height: auto; }
  .local-hero h1 { font-size: clamp(2.4rem, 10.5vw, 3.55rem); }
  .local-hero__actions { align-items: flex-start; flex-direction: column; }
  .local-hero__field { right: -50vw; width: 110vw; }
  .local-signals { grid-template-columns: 1fr; border-bottom: 0; }
  .local-signal { min-height: 0; border-right: 0; border-bottom: 2px solid var(--local-ink); }
  .local-signal > span { margin-bottom: 1.5rem; }
  .local-route__list { grid-template-columns: 1fr; }
  .local-route__list::before { top: 0; bottom: 0; left: 2rem; right: auto; width: 3px; height: auto; }
  .local-route__list::after { top: 0; left: 2rem; width: 3px; height: 0; transition: height 1.1s cubic-bezier(.4,0,.2,1) .2s; }
  .local-route__list.is-active::after { width: 3px; height: 100%; }
  .local-route__item { display: grid; grid-template-columns: 4rem 1fr; gap: 1.3rem; padding: 0 0 2.2rem; }
  .local-route__number { margin: 0; }
}

@media (max-width: 520px) {
  .local-hero__actions { width: 100%; }
  .local-text-link { align-self: center; }
  .local-form__grid { grid-template-columns: 1fr; }
  .local-form__full { grid-column: auto; }
  .local-modal { padding: .5rem; }
  .local-modal__panel { max-height: calc(100svh - 1rem); box-shadow: .45rem .45rem 0 var(--local-blue); }
  .local-modal__head, .local-form { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .local-route__list::after { display: none; }
}