/* Vision & Values — measurements follow the original: content 90% wide up to 1290px,
   74/26 text/image rows with 15px column padding, fixed photo backgrounds on desktop. */

.vv-wrap { width: 90%; max-width: 1290px; margin: 0 auto; }
.page-vision-values main { color: #000; }
.page-vision-values main p { margin: 0; }
.brand { color: var(--orange); font-weight: 700; }
.page-vision-values main :is(h2, h3, h4) { color: #000; }

/* Hero */
.vv-hero {
  padding: 111px 0 110px; text-align: center;
  background: url(/assets/img/2023/04/increased-social-and-community-participation.jpg) 49% 45% / cover no-repeat fixed;
}
.vv-hero .robot { width: 20%; margin: 0 auto; }
.vv-hero .wordmark { width: 30%; margin: 20px auto 0; }

/* Vision / Values text rows */
.vv-sec { background: rgba(255, 255, 255, .7); padding: 75px 0; }
.vv-row { display: grid; grid-template-columns: 74fr 26fr; }
.vv-values .vv-row { grid-template-columns: 26fr 74fr; }
.vv-row > * { padding: 15px; }
.vv-media img { margin: 0 auto; }
.vv-vision .vv-media img { width: 64%; }
.vv-values .vv-media img { width: 100%; }
.vv-text .eyebrow { margin: 0; line-height: 19.5px; }
.vv-text h3 { font-size: 28px; line-height: 39.2px; margin: 0 0 20px; }
.vv-text p { line-height: 30.4px; }

.vv-line { width: 98%; margin: 47px auto 37px; border: 0; border-top: 2px solid rgba(24, 24, 24, .29); }
.values { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.values > div { padding: 15px; }
.values svg { display: block; width: 56px; height: 56px; margin: 0 auto 15px; stroke: var(--orange); fill: none; stroke-width: 1.5; }
.values h4 { font: 700 20px/32px var(--font-head); letter-spacing: normal; margin: 0 0 10px; }
.values p { padding: 0 10px; line-height: 30.4px; }

/* Projects carousel: one slide (a group of items) at a time */
.vv-projects { background: #fff; padding: 85px 0 95px; text-align: center; }
.vv-projects .eyebrow { margin: 0; line-height: 19.5px; }
.vv-projects h2 { font-size: 36px; line-height: 46.8px; margin: 10px 0 0; }
.projects.carousel { max-width: 774px; margin: 30px auto 0; padding: 0 83px 39px; text-align: left; }
.projects .carousel-track { grid-auto-columns: 100%; }
.project-slide { padding: 15px; }
.project-slide p { line-height: 30.4px; }
.project-slide p + p { margin-top: 20px; }
.projects .carousel-btn {
  top: calc(50% - 15px); transform: none; width: 30px; height: 30px;
  background: #181818; font-size: 22px; line-height: 28px;
}
.projects .carousel-btn:hover { background: var(--orange); }
.projects .carousel-btn.prev { left: 30px; }
.projects .carousel-btn.next { right: 30px; }
.projects .carousel-dots { bottom: 0; height: 20px; align-items: center; gap: 10px; }
.projects .carousel-dots button { background: none; border: 2px solid #181818; }
.projects .carousel-dots button[aria-current] { background: #181818; }

/* Final words: card on a fixed photo background */
.vv-final {
  padding: 75px 0 135px;
  background: url(/assets/img/2023/04/landingpage_bg_1.jpg) 48% 88% / cover no-repeat fixed;
}
.final-card { width: 50%; background: rgba(255, 255, 255, .9); padding: 15px 80px 30px; }
.final-card .eyebrow { margin: 0; line-height: 19.5px; }
.final-card h2 { font: 700 46px/59.8px Montserrat, var(--font-head); letter-spacing: -1.5px; color: #000; margin: 10px 0 34px; }
.final-card ul { margin: 0; padding-left: 32px; color: #181818; }
.final-card li { line-height: 30.4px; }
.final-card li + li { margin-top: 15px; }

/* Awaits */
.vv-awaits { background: var(--bg-alt); padding: 125px 0 85px; text-align: center; }
.vv-awaits h2 { font-size: 46px; line-height: 59.8px; margin: 0; }
.vv-awaits .highlight { background: #f2b212; padding: 0 0 0 .25em; margin-right: .25em; }
.vv-awaits img { width: 25%; aspect-ratio: 323 / 242; object-fit: cover; margin: 20px auto 40px; }
.vv-btn { border-color: rgba(24, 24, 24, .5); color: #181818; font-size: 15px; line-height: 24px; padding: 14px 42px; }
.vv-btn:hover { background: #181818; color: #fff; }

@media (max-width: 991px) {
  .vv-hero { padding: 60px 0; background-attachment: scroll; }
  .page-vision-values main p, .page-vision-values main li { font-size: 15px; line-height: 24px; }
  .vv-sec { padding: 50px 0; }
  .vv-vision { padding-bottom: 25px; }
  .vv-row { grid-template-columns: 80fr 20fr; }
  .vv-values .vv-row { grid-template-columns: 20fr 80fr; }
  .vv-text .eyebrow { margin-bottom: 20px; }
  .vv-text h3 { font-size: 27px; line-height: 35.1px; letter-spacing: -1px; }
  .vv-line { margin: 27px auto 17px; }
  .values { grid-template-columns: 1fr 1fr; }
  .values svg { margin-bottom: 20px; }
  .values h4 { font-size: 17px; line-height: 28.9px; margin-bottom: 20px; }
  .values p { padding: 0; }
  .vv-projects { padding: 60px 0 71px; }
  .vv-projects h2 { font-size: 30px; line-height: 36px; letter-spacing: -1px; margin-top: 20px; }
  .projects.carousel { width: 64%; padding: 0 0 39px; }
  .project-slide { padding: 15px 27px; }
  .vv-final { padding: 50px 0 110px; background-attachment: scroll; }
  .final-card { padding: 15px 15px 30px; }
  .final-card h2 { font: 700 27px/35.1px var(--font-head); letter-spacing: -1px; margin: 19px 0 46px; }
  .final-card ul { padding-left: 31px; }
  .vv-awaits { padding: 100px 0 60px; }
  .vv-awaits h2 { font-size: 38px; line-height: 45.6px; letter-spacing: -1px; }
  .vv-awaits img { margin: 19px auto 40px; }
  .vv-btn { font-size: 17px; line-height: 27.2px; padding: 11px 26px; }
}
@media (max-width: 767px) {
  .vv-wrap { width: calc(100% - 46px); }
  .vv-hero { padding: 35px 0; background-position: 52% 58%; }
  .vv-sec, .vv-vision { padding: 30px 0; }
  .vv-row, .vv-values .vv-row { grid-template-columns: 1fr; }
  .vv-row > * { padding: 15px 0; }
  .vv-values .vv-media { order: 2; }
  .vv-media { margin-top: 20px; }
  .vv-vision .vv-media img { width: 38%; }
  .vv-values .vv-media img { width: 52%; }
  .vv-text .eyebrow { margin-bottom: 19px; }
  .vv-text h3 { font-size: 22px; line-height: 28.6px; letter-spacing: -.5px; }
  .vv-line { margin: 23px auto 44px; }
  .values { grid-template-columns: 1fr; }
  .values > div { padding: 15px 0; }
  .values > div + div { margin-top: 10px; }
  .values h4 { line-height: 30.6px; margin-bottom: 19px; }
  .values p { text-align: left; }
  .vv-projects { padding: 35px 0 46px; }
  .vv-projects h2 { font-size: 28px; line-height: 36.4px; margin-top: 19px; }
  .projects.carousel { width: 84%; margin-top: 31px; }
  .project-slide { padding: 20px 27px; }
  .projects .carousel-btn.prev { left: 0; }
  .projects .carousel-btn.next { right: 0; }
  .vv-final { padding: 35px 0 65px; background: var(--bg-alt); }
  .final-card { width: 100%; padding: 10px 0 25px; }
  .final-card h2 { font: 700 46px/59.8px Montserrat, var(--font-head); letter-spacing: -1.5px; text-align: center; margin: 9px 0 35px; }
  .final-card ul { text-align: center; list-style: none; }
  .final-card li::before { content: "\2022  "; }
  .vv-awaits { padding: 35px 0; }
  .vv-awaits h2 { font-size: 36px; line-height: 46.8px; }
  .vv-awaits img { margin: 20px auto 30px; }
  .vv-btn { font-size: 15px; line-height: 24px; padding: 14px 42px; }
}
.final-card li::marker { font-size: .8em; }