/* =====================================================================
   XL750 Transalp · "The altitude"
   Base theme: site tokens. Accent: Transalp blue (--accent, v4.css).
   Pace: slow, cinematic. Centrepiece: a scroll-led scene through the
   brochure's "Engineered for the unknown" beats.
   ===================================================================== */

/* Arrival */
.xlh__name { font-size: clamp(56px, 7vw, 128px); }
.xlh__name span { display: block; font-size: .5em; font-weight: 400; letter-spacing: .02em; margin-top: .12em; color: var(--fg2); }
.xlh .rhero__img { object-position: 40% 50%; }

/* Engineering */
.xle__scale { margin: 6px 0 14px; }
@media (max-width: 767px) { .xle__scale { overflow-x: auto; scrollbar-width: none; } .xle__scale .rpm2 { min-width: 520px; } }
.xle .rnums, .xlk .rnums, .xlg .rnums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) { .xle .rnums, .xlk .rnums, .xlg .rnums { grid-template-columns: 1fr 1fr; } }

/* Centrepiece: engineered for the unknown */
.xlm { background: #000; }
.xlm .scene__sticky { min-height: 560px; }
.xlm.is-step .scene__sticky { min-height: 92svh; display: grid; align-items: end; }
.xlm.is-scroll .scene__sticky { display: grid; align-items: end; }
.xlm [data-layer] img { object-position: 50% 50%; }
.xlm__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(5,7,8,.9) 0%, rgba(5,7,8,.5) 36%, rgba(5,7,8,0) 64%), linear-gradient(to right, rgba(5,7,8,.5) 0%, transparent 50%); }
.xlm__ui { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 28px clamp(40px, 5vw, 96px); align-items: end; padding-block: 120px clamp(40px, 6vh, 80px); }
.xlm__title { font-family: var(--f-display); font-size: clamp(22px, 1.1vw + 12px, 30px); font-weight: 500; font-stretch: 110%; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: 18px; }
.xlm__beat { display: grid; gap: 10px; align-content: end; }
.xlm__k { font: 600 13px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.xlm__big { font: 600 clamp(40px, 4vw + 8px, 88px)/.92 var(--f-display); font-stretch: 114%; text-transform: uppercase; letter-spacing: -.01em; }
.xlm__modes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; font: 600 clamp(36px, 3.4vw + 8px, 76px)/.95 var(--f-display); font-stretch: 114%; text-transform: uppercase; }
.xlm__x { font-size: var(--t-lede); color: rgba(255,255,255,.85); max-width: 40ch; }
.xlm__side { display: grid; gap: 14px; }
.xlm__note { font-size: 11px; color: rgba(255,255,255,.62); max-width: 60ch; }
@media (max-width: 1023px) { .xlm__ui { grid-template-columns: 1fr; padding-top: 96px; } .xlm__modes { font-size: 34px; } .xlm__big { font-size: 40px; } }
@media (min-width: 1024px) and (max-height: 820px) { .xlm__modes { font-size: 52px; } .xlm__big { font-size: 60px; } .xlm__ui { padding-block: 96px 32px; } }

/* Ground clearance across the range, drawn to scale */
.xlg__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 5vw, 96px); align-items: end; }
.xlg__copy { display: grid; gap: 22px; }
.xlg__chart { padding-bottom: 56px; }
.xlg__chart figcaption { margin-top: 64px; font-size: 13px; color: var(--fg3); }
.gc { list-style: none; margin: 0; padding: 0; height: clamp(240px, 26vw, 360px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 24px); align-items: end; border-bottom: 1px solid var(--fg); }
.gc__i { height: 100%; display: grid; grid-template-rows: 1fr auto auto; align-items: end; justify-items: start; position: relative; }
.gc__bar { width: 100%; height: calc(var(--v) * 1%); background: repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 6px, rgba(255,255,255,.04) 6px 12px); border-top: 1px solid rgba(255,255,255,.5); align-self: end; grid-row: 1; transform-origin: bottom; }
.gc__i.is-me .gc__bar { background: var(--accent); border-top-color: var(--accent); }
.gc__v { position: absolute; bottom: calc(var(--v) * 1% + 10px); left: 0; font-size: 13px; color: var(--fg2); }
.gc__v .num { font-size: clamp(22px, 1.4vw + 8px, 34px); color: var(--fg); }
.gc__n { position: absolute; top: calc(100% + 12px); left: 0; font: 500 13px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .04em; }
.motion .xlg__chart .gc__bar { transform: scaleY(0); transition: transform 1.1s var(--ease); }
.motion .xlg__chart.is-in .gc__bar { transform: none; }
.motion .xlg__chart .gc__i:nth-child(2) .gc__bar { transition-delay: .08s; }
.motion .xlg__chart .gc__i:nth-child(3) .gc__bar { transition-delay: .16s; }
.motion .xlg__chart .gc__i:nth-child(4) .gc__bar { transition-delay: .24s; }
.motion .xlg__chart .gc__i:nth-child(5) .gc__bar { transition-delay: .36s; }
@media (max-width: 1023px) { .xlg__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .gc__n { font-size: 10px; letter-spacing: 0; } .gc__v { font-size: 0; } .gc__v .num { font-size: 18px; } }

/* Technology: the view over the screen */
.xlt { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; background: var(--c-surface); }
.xlt__img { margin: 0; height: 100%; overflow: hidden; }
.xlt__img img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 5; }
.xlt__copy { padding: var(--sec) var(--gutter); display: grid; gap: 24px; }
.xlt__dl { margin: 0; display: grid; }
.xlt__dl div { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--line); }
.xlt__dl dt { font: 500 17px/1.2 var(--f-display); font-stretch: 106%; text-transform: uppercase; }
.xlt__dl dd { margin: 0; color: var(--fg2); font-size: 15px; max-width: 52ch; }
@media (max-width: 1023px) { .xlt { grid-template-columns: 1fr; } .xlt__img img { aspect-ratio: 4 / 3; } }
.xlc .btn--text { white-space: normal; text-align: left; line-height: 1.4; }