/* =====================================================================
   NX500 · "The horizon"
   Base theme: site tokens. Accent: NX500 teal (--accent, v4.css).
   Personality comes from its coast-road photography and an open, framed
   composition. Centrepiece: E-Clutch in three moves, led by scroll.
   ===================================================================== */

.nxh .rhero__img { object-position: 55% 70%; }

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

/* Centrepiece: E-Clutch, a framed photograph beside the three moves */
.nxc { background: var(--c-surface); }
.nxc .scene__sticky { display: grid; align-items: center; }
.nxc.is-scroll .scene__sticky { padding-block: calc(var(--hdr) + 8px) 32px; }
.nxc.is-step .scene__sticky { padding-block: var(--sec); }
.nxc__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 5vw, 96px); align-items: center; width: 100%; }
.nxc__head { display: grid; gap: 20px; align-content: start; }
.nxc__beats { min-height: 9.5em; }
.nxc__beat { display: grid; gap: 8px; align-content: start; }
.nxc__n { font: 300 15px/1 var(--f-display); color: var(--accent); font-variant-numeric: tabular-nums; }
.nxc__t { font: 600 clamp(40px, 3vw + 12px, 72px)/.92 var(--f-display); font-stretch: 114%; text-transform: uppercase; }
.nxc__beat p:last-child { color: var(--fg2); max-width: 40ch; font-size: var(--t-lede); }
.nxc__nav .scene__navbtn { color: var(--fg3); }
.nxc__nav .scene__navbtn.is-on, .nxc__nav .scene__navbtn:hover { color: var(--fg); }
.nxc__nav { border-top-color: var(--line); }
.nxc__stage { position: relative; aspect-ratio: 16 / 11; max-height: calc(100svh - var(--hdr) - 80px); width: 100%; border-radius: var(--r); overflow: hidden; }
.nxc__stage .scene__layers { position: absolute; inset: 0; }
.nxc__unit { position: absolute; z-index: 2; left: 16px; bottom: 16px; display: flex; gap: 12px; align-items: end; margin: 0; }
.nxc__unit img { width: 92px; height: 116px; object-fit: cover; border-radius: var(--r); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.nxc__unit figcaption { font-size: 12px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); max-width: 18ch; }
.nxc.is-step .scene__layers { position: absolute; }
@media (max-width: 1023px) { .nxc__grid { grid-template-columns: 1fr; } .nxc__stage { order: -1; max-height: none; } .nxc__beats { min-height: 0; } }

/* Film */
.nxfilm .film__poster { object-position: 50% 60%; }

/* Design pair: two heights, one drifting against the other */
.nxd__pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.nxd__pair figure { display: grid; gap: 14px; margin: 0; }
.nxd__pair img { width: 100%; height: auto; border-radius: var(--r); }
.nxd__pair figure:last-child { margin-top: clamp(80px, 10vw, 180px); }
.nxd__pair figcaption { display: grid; gap: 4px; font-size: 15px; color: var(--fg2); max-width: 44ch; }
.nxd__pair figcaption strong { color: var(--fg); font: 500 18px/1.2 var(--f-display); font-stretch: 106%; text-transform: uppercase; }
@media (max-width: 767px) { .nxd__pair { grid-template-columns: 1fr; } .nxd__pair figure:last-child { margin-top: 0; } }

/* Comfort */
.nxk__dl { margin: 0; display: grid; }
.nxk__dl div { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--line); }
.nxk__dl dt { font: 500 17px/1.2 var(--f-display); font-stretch: 106%; text-transform: uppercase; }
.nxk__dl dd { margin: 0; color: var(--fg2); font-size: 15px; max-width: 52ch; }
.nxk .rnums { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }

/* Technology: the cockpit view */
.nxt { position: relative; display: grid; background: var(--c-bg); padding-top: clamp(48px, 5vw, 96px); }
.nxt__img { width: min(100%, 1241px); margin: 0 auto; }
.nxt__img img { width: 100%; height: auto; display: block; }
.nxt__copy { position: absolute; left: 0; right: 0; top: clamp(72px, 9vw, 160px); display: grid; gap: 18px; justify-items: start; }
.nxt__copy .rs__title, .nxt__copy .rs__lede { color: #fff; text-shadow: 0 2px 18px rgba(0, 20, 40, .5); }
.nxt__copy .rs__lede { max-width: 40ch; }
@media (max-width: 767px) { .nxt__copy { position: static; padding-block: 32px 0; } .nxt__copy .rs__title, .nxt__copy .rs__lede { text-shadow: none; } .nxt { padding-top: 0; } }

/* Accessories: a genuine catalogue, so a grid is honest here */
.nxa__side { display: grid; gap: 20px; justify-items: start; }
.nxa__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.nxa__grid figure { display: grid; gap: 10px; margin: 0; }
.nxa__grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); background: #D9DADC; }
.nxa__grid figcaption { font-size: 14px; }
@media (max-width: 1023px) { .nxa__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }