/* About: alpine hero, the story of the two products beside Montréal in the game and the app's Ride tab, real figures over the Stelvio, three promises each led by a real screen, a roadmap with its screens and the mailto contact form. */
.about-hero .phero__bg img { object-position: center 40%; }
.about-hero__copy { max-width: 1240px; }
.about-hero h1 { font-size: clamp(44px, min(6.6vw, 12vh), 116px); }
.nw { white-space: nowrap; }

/* story: Montréal in the game, with the app's Ride tab on a phone in front of it */
.about-story { display: grid; gap: clamp(32px, 5vw, 90px); align-items: center; }
@media (min-width: 900px) { .about-story { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); } }
.about-story__media { position: relative; padding-bottom: 40px; }
.about-story__img { margin: 0; }
.about-story__img figcaption { left: 18px; bottom: 18px; }
.about-story__phone { position: absolute; right: -18px; bottom: 0; width: min(190px, 34%); border-radius: 30px; padding: 6px; }
.about-story__phone .phone__screen { border-radius: 25px; }
.about-story__body { display: grid; border-top: 1px solid var(--line); }
.about-story__p { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.about-story__k { color: var(--lime-ink); padding-top: 6px; }
.about-story__p p { font-size: clamp(17px, 1.3vw, 19.5px); line-height: 1.6; color: var(--mute); }
.about-story__p b { color: var(--on-paper); font-weight: 700; }
@media (max-width: 600px) { .about-story__p { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; } .about-story__img { aspect-ratio: 4 / 3; } .about-story__phone { right: 10px; width: 30%; } .about-story__img figcaption { top: 14px; bottom: auto; left: 14px; } .about-story__media { padding-bottom: 60px; } }

/* figures, over a full-bleed Stelvio */
.about-figs-sec { isolation: isolate; }
.about-figs-sec__bg { position: absolute; inset: 0; z-index: 0; }
.about-figs-sec__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.about-figs-sec__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink), rgba(7, 9, 11, .55) 28%, rgba(7, 9, 11, .5) 55%, rgba(7, 9, 11, .92)); }
.about-figs-sec .sec-head__aside p { color: var(--on-ink); }
.about-figs { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border-radius: var(--r-lg); background: rgba(7, 9, 11, .5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--ink-line); padding: 0 clamp(20px, 2.4vw, 34px) 26px; }
.about-figs > div:first-child { padding-left: 24px; }
.about-figs b { font-size: clamp(54px, 5vw, 84px); }
.about-figs span { color: var(--on-ink-2); }
.about-figs-sec__cap { margin-top: 22px; }
@media (min-width: 1000px) { .about-figs-sec > .wrap { padding-top: clamp(140px, 22vh, 240px); } }
@media (max-width: 700px) { .about-figs { padding: 0 20px 6px; } .about-figs > div:first-child { padding-left: 0; } .about-figs > div:last-child { border-bottom: 0; } }

/* values: one wide card (the game's HUD), then two, each led by a real picture */
.values { display: grid; gap: 18px; }
@media (min-width: 900px) { .values { grid-template-columns: 1fr 1fr; } .value--lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .value--lead .value__img { aspect-ratio: auto; min-height: 100%; } }
.value { display: grid; align-content: start; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.value:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -40px rgba(7, 9, 11, .5); }
.value__img { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.value__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.value:hover .value__img img { transform: scale(1.04); }
.value__img--phone { display: grid; place-items: end center; padding-top: 28px; background: linear-gradient(160deg, #1b2027, #0b0e12); }
.value__img--phone img { width: 44%; height: auto; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .4); }
.value:hover .value__img--phone img { transform: translateY(-6px); }
.value__body { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 2.6vw, 40px); }
.value__body .label { color: var(--lime-ink); }
.value .h-2 { font-size: clamp(30px, 2.6vw, 42px); }
.value p { color: var(--mute); font-size: 15.5px; }
.value__rows { display: grid; grid-template-columns: repeat(3, 1fr); margin: 8px 0 0; border-top: 1px solid var(--line); }
.value__rows > div { display: flex; flex-direction: column-reverse; gap: 4px; padding: 14px 0 0; }
.value__rows > div + div { border-left: 1px solid var(--line); padding-left: 16px; }
.value__rows dd { margin: 0; font-size: 32px; color: var(--on-paper); }
.value__rows > div:first-child dd { color: var(--lime-ink); }
.value__rows dt { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.value__big { display: flex; align-items: baseline; gap: 12px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.value__big .num { font-size: 44px; color: var(--on-paper); }
.value__big .label { color: var(--faint); }

/* roadmap, each line with the real screen it's about */
.roadmap { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.roadmap li { display: grid; grid-template-columns: clamp(200px, 20vw, 290px) 150px minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); }
.roadmap li .chip { justify-self: start; }
.roadmap b { font-size: clamp(19px, 1.7vw, 26px); font-weight: 600; letter-spacing: -.02em; }
.roadmap li:not(:first-child) b { color: var(--mute); }
.roadmap__img { display: block; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--ink-3); border: 1px solid var(--ink-line); }
.roadmap__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.roadmap li:hover .roadmap__img img { transform: scale(1.06); }
.roadmap__img--phone { display: grid; place-items: end center; padding-top: 16px; background: linear-gradient(160deg, #1b2027, #0b0e12); }
.roadmap__img--phone img { width: 42%; height: auto; border-radius: 12px 12px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .45); }
.roadmap li:hover .roadmap__img--phone img { transform: translateY(-3px); }
@media (max-width: 999px) and (min-width: 701px) { .roadmap li { grid-template-columns: 200px 130px minmax(0, 1fr); } .roadmap li > :last-child:not(:empty) { grid-column: 3; } }
@media (max-width: 700px) { .roadmap li { grid-template-columns: 120px minmax(0, 1fr); gap: 12px 16px; padding: 22px 0; align-items: start; } .roadmap__img { grid-row: span 3; } .roadmap li > span:empty { display: none; } .roadmap li .tlink { justify-self: start; } }

/* contact */
.contact__in { display: grid; gap: clamp(40px, 6vw, 100px); align-items: start; }
@media (min-width: 1000px) { .contact__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .contact__copy { position: sticky; top: 120px; } }
.contact__copy { gap: 24px; }
.contact__mail { display: grid; gap: 8px; }
.contact__mail a { font-size: clamp(24px, 2.6vw, 38px); font-weight: 700; letter-spacing: -.035em; font-variation-settings: "wdth" 86; border-bottom: 2px solid var(--lime); padding-bottom: 2px; justify-self: start; overflow-wrap: anywhere; transition: border-color .3s; }
.contact__mail a:hover { border-color: var(--on-paper); }
.contact__faq { color: var(--mute); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.contact__faq .tlink { color: var(--on-paper); }
.contact__form { display: grid; gap: 22px; padding: clamp(24px, 3vw, 44px); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--paper-line); box-shadow: 0 40px 80px -60px rgba(11, 18, 14, .45); }
.contact__row { display: grid; gap: 22px; }
@media (min-width: 700px) { .contact__row { grid-template-columns: 1fr 1fr; } }
.contact__form .input { background: var(--paper); }
.contact__form .input:focus { border-color: var(--lime-ink); box-shadow: 0 0 0 4px rgba(255, 46, 120, .14); background: var(--white); }
.contact__form textarea.input { min-height: 190px; }
.contact__form select.input { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b120e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; padding-right: 48px; }
.contact__form .input[aria-invalid="true"] { border-color: var(--pink-ink); box-shadow: 0 0 0 4px rgba(212, 20, 92, .12); }
.contact__err { margin-top: -10px; color: var(--pink-ink); font-size: 14px; font-weight: 600; }
.contact__err[hidden] { display: none; }
.contact__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-top: 6px; }
.contact__note { font-size: 13.5px; color: var(--faint); max-width: 40ch; flex: 1 1 220px; }
@media (max-width: 420px) { .contact__form .btn { width: 100%; justify-content: space-between; } }

/* closing band */
.band .btn--line { border-color: rgba(255, 255, 255, .55); color: #fff; }
.band .eyebrow::before { background: #fff; }