@charset "UTF-8";

/* WORKS listing. Keep these rules scoped to avoid changing product pages. */
.works-page { margin: 0; }
.works-page *, .works-page *::before, .works-page *::after { box-sizing: border-box; }
.works-page p, .works-page h1, .works-page h2, .works-page h3, .works-page h4 { margin: 0; }
.works-page ul { margin: 0; padding: 0; list-style: none; }
.works-page a { color: inherit; text-decoration: none; }
.works-page a:focus-visible, .works-page button:focus-visible { outline: 3px solid #1b95bf; outline-offset: 5px; }
.works-page .header { position: relative; background: #fff; }
.works-page .header__inner { min-height: 91.75px; }
.works-page .header__nav a[aria-current="page"] { color: #1b95bf; }
.works-page .header__title img { width: auto; height: auto; }
.works-wrap { width: min(960px, calc(100% - 48px)); margin-inline: auto; }
.works-page p { font-size: 16px; line-height: 1.8; }
.works-intro h2 { font-size: 54px; font-weight: 400; line-height: 1; padding: 40px 0; }
.works-page .works-subtitle { text-align: center; padding-bottom: 40px; }
.works-map { height: 320px; border-radius: 32px; overflow: hidden; padding: 10px; display: flex; align-items: center; justify-content: center; }
.works-map img { display: block; width: 100%; height: auto; flex-shrink: 0; }
.works-lead { padding: 40px 0 80px; text-align: right; }
.works-lead h3, .works-custom h3 { font-size: 32px; font-weight: 600; line-height: 1.5; }
.works-lead h3 { margin-bottom: 24px; }
.works-custom { background: #f7f7f7; padding: 40px 0; }
.works-custom__inner { display: flex; align-items: flex-start; }
.works-custom__copy { flex: 1; min-width: 0; padding-right: 40px; }
.works-custom h3 { white-space: nowrap; margin-bottom: 24px; }
.works-custom__diagram { width: 400px; height: 243px; object-fit: contain; flex-shrink: 0; }
.works-section-title { color: #3388a7; font-family: 'Gill Sans', sans-serif; font-size: 40px; font-weight: 600; line-height: 1.2; }
.works-service { padding-bottom: 40px; }
.works-service > .works-section-title { padding: 40px 0; }
.service-card { display: flex; gap: 16px; align-items: flex-start; padding: 24px 16px; border-radius: 16px; background: #f7f7f7; }
.service-brand { width: 320px; flex-shrink: 0; padding: 16px; display: flex; justify-content: center; }
.service-card__copy { flex: 1; min-width: 0; padding-bottom: 16px; display: flex; align-items: flex-start; flex-direction: column; gap: 24px; }
.service-card h4 { font-size: 20px; font-weight: 600; line-height: 1.5; }
.service-button { display: inline-flex; gap: 10px; align-items: center; justify-content: center; border: 1px solid #1b95bf; border-radius: 56px; padding: 16px 24px; font-size: 16px; font-weight: 600; }
.service-button:hover { background: #e9f4f8; }
.works-clients__heading { padding: 40px 0; }
.works-clients__heading p { margin-top: 16px; }
.works-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.work-card { min-width: 0; }
.work-card > a { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.work-card__image { aspect-ratio: 324.1359558105469 / 211.6854705810547; background: #eff2f2; border-radius: 8px; overflow: hidden; transition: opacity .2s; }
.work-card__image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.work-card a:hover .work-card__image { opacity: .75; }
.works-page .work-tags { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.work-tags li { display: inline-flex; align-items: center; gap: 6px; color: var(--tag-color); font-family: Inter, Arial, sans-serif; font-size: 17.959px; line-height: 1.2; white-space: nowrap; }
.work-tags img { display: block; width: auto; height: auto; }
.work-card h4 { font-size: 15px; line-height: 1.5; font-weight: 700; }
.works-wave { position: relative; height: 113.945px; overflow: hidden; margin-top: 0; }
.works-wave > img { position: absolute; top: 8.39px; left: -74.67%; width: 234.67%; height: 260px; }
.works-page footer .footer-right img { display: inline-block; vertical-align: middle; object-fit: contain; }
.works-page footer small { font-size: 10px; }
@media (max-width: 1007px) {
  .works-custom__copy { padding-right: 24px; }
  .works-custom h3 { white-space: normal; font-size: 28px; }
  .works-custom__diagram { width: 40%; height: auto; }
  .service-brand { width: 252px; }
  .work-tags li { font-size: 14px; }
  .works-page .work-tags { gap: 8px; }
  .works-page footer .wrap { padding-inline: 24px; }
}
@media (max-width: 700px) {
  .works-wrap { width: calc(100% - 40px); }
  .works-page .header__inner { min-height: 80px; }
  .works-page .header__title img { max-width: 80px; }
  .works-intro h2 { font-size: 44px; padding: 32px 0 24px; }
  .works-page .works-subtitle { padding-bottom: 32px; }
  .works-map { height: 240px; padding: 0; border-radius: 20px; }
  .works-map img { height: 100%; width: auto; max-width: none; }
  .works-lead { padding: 32px 0 48px; text-align: left; }
  .works-lead h3, .works-custom h3 { font-size: 24px; }
  .works-lead br { display: none; }
  .works-custom { padding: 32px 0; }
  .works-custom__inner { flex-direction: column; gap: 32px; }
  .works-custom__copy { padding-right: 0; }
  .works-custom__diagram { width: min(100%, 400px); height: auto; align-self: center; }
  .works-section-title { font-size: 34px; }
  .works-service { padding-bottom: 16px; }
  .works-service > .works-section-title { padding: 32px 0; }
  .service-card { flex-direction: column; gap: 24px; padding: 24px; }
  .service-brand { width: 100%; padding: 8px 0; }
  .service-card__copy { padding-bottom: 0; }
  .service-card h4 { font-size: 18px; }
  .service-button { padding: 14px 20px; }
  .works-clients__heading { padding: 32px 0; }
  .works-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .work-tags li { font-size: 16px; }
  .works-page .work-tags { gap: 14px; }
  .work-card h4 { font-size: 16px; }
  .works-wave { height: 72px; margin-top: 24px; }
  .works-wave > img { height: 164px; top: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .works-page a, .works-page .header__nav, .work-card__image { transition: none; }
}
@media (max-width: 959px) {
  .works-page .header__nav { position: fixed; inset: 0; width: 100%; height: 100dvh; transform: none; visibility: hidden; pointer-events: none; }
  .works-page .header__nav.active { visibility: visible; pointer-events: auto; }
}
@media (max-width: 700px) {
  .works-map img { width: 100%; height: 100%; object-fit: cover; }
}

/* Pins share the illustration's coordinate system, including when it is cropped. */
.works-map { position: relative; }
.works-map__stage { position: relative; width: 100%; flex-shrink: 0; aspect-ratio: 1920 / 1404; }
.works-map .works-map__stage > img { width: 100%; height: 100%; display: block; object-fit: contain; }
.map-pin { position: absolute; left: var(--pin-x); top: var(--pin-y); transform: translate(-50%, -50%); width: 44px; height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer; background: none; border: 0; border-radius: 50%; color: #161819; z-index: 1; }
.map-pin__dot { display: block; width: 24px; height: 24px; background: #1b95bf; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 2px 10px #16374040; transition: transform .2s, background .2s; }
.map-pin__dot::after { content: ''; position: absolute; inset: 8px; border: 1px solid #fff; border-radius: 50%; animation: map-pulse 3s ease-out infinite; pointer-events: none; }
.map-pin:nth-of-type(even) .map-pin__dot::after { animation-delay: 1.5s; }
.map-pin[aria-expanded="true"] { z-index: 2; }
.map-pin:hover .map-pin__dot, .map-pin:focus-visible .map-pin__dot, .map-pin[aria-expanded="true"] .map-pin__dot { background: #ef932f; transform: scale(1.15); }
.map-pin__label { position: absolute; bottom: 45px; left: 50%; transform: translateX(-50%); padding: 8px 12px; border-radius: 8px; color: #fff; background: #163740; font-size: 12px; line-height: 1.4; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; }
.map-pin__label { display: none; }
.map-project { position: absolute; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: min(248px, calc(100% - 24px)); padding: 16px; background: #fffffff7; border: 1px solid #c7dce4; border-radius: 12px; box-shadow: 0 6px 24px #16374026; text-align: left; }
.works-page .map-project[hidden] { display: none; }
.map-project__copy { width: 100%; }
.works-page .map-project h3 { padding-right: 20px; font-size: 15px; font-weight: 600; line-height: 1.4; margin-bottom: 6px; }
.works-page #map-project-description { font-size: 12px; line-height: 1.6; }
.works-page .map-project__link { display: inline-flex; align-items: center; min-height: 28px; font-size: 12px; font-weight: 600; color: #167d9f; }
.map-project__link:hover { text-decoration: underline; }
.map-project__close { position: absolute; right: 0; top: 0; width: 36px; height: 36px; background: transparent; font-size: 22px; color: #54717b; cursor: pointer; border-radius: 50%; }
.ristalk-logo { display: block; width: auto; height: auto; flex-shrink: 0; }
@keyframes map-pulse { 0% { transform: scale(.8); opacity: .8; } 75%,100% { transform: scale(1.8); opacity: 0; } }
@media (max-width: 700px) {
  .works-map__stage { width: max(100%, 328.206px); }
  .map-pin__dot { width: 22px; height: 22px; border-width: 3px; }
  .map-pin__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .map-pin__dot::after { animation: none; }
  .map-pin__dot, .map-pin__label { transition: none; }
}

.city-motion { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.city-river__flow { opacity: .28; animation: city-river-flow 12s linear infinite; }
.city-river__flow--second { opacity: .18; animation-duration: 17s; animation-delay: -6s; --flow-length: -420; }
.city-vehicle--train { animation: city-train-presence 26s linear infinite; }
.city-vehicle--car { animation: city-car-presence 20s linear infinite; }
.map-motion-toggle { position: absolute; left: 16px; bottom: 16px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #c7dce4; border-radius: 50%; background: #fffffff0; color: #305767; box-shadow: 0 2px 8px #16374020; cursor: pointer; }
.map-motion-toggle:hover { background: #eef7fa; }
.map-motion-toggle__icon { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.map-motion-toggle[aria-pressed="true"] .map-motion-toggle__icon { width: 0; height: 0; margin-left: 3px; border: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid currentColor; }
.map-motion-toggle:disabled { opacity: .65; cursor: default; }
.works-intro.is-motion-paused .city-motion *, .works-intro.is-motion-paused .map-pin__dot::after { animation-play-state: paused; }
@keyframes city-river-flow { to { stroke-dashoffset: var(--flow-length, -385); } }
@keyframes city-train-presence { 0%,8%,87%,100% { opacity: 0; } 12%,82% { opacity: 1; } }
@keyframes city-car-presence { 0%,12%,73%,100% { opacity: 0; } 18%,66% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .city-motion * { animation: none !important; }
  .city-vehicle { visibility: hidden; }
  .city-river__flow { opacity: 0; }
}