/* RobotLack v1.5: quiet controls, physical action inside the existing scenes. */
.film-layer{position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .5s ease;z-index:0}
.film-layer.film-ready{opacity:1}
.film-layer video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.film-paint-burst video{object-position:60% 45%;transform-origin:62% 48%;transform:scale(var(--filmScale,1.04));will-change:transform}
.surface-media[data-film] .image-shade{z-index:1;background:linear-gradient(90deg,#1d0c2ec9,transparent 80%),linear-gradient(0deg,#1d0c2e50,transparent 50%)}
.surface-media[data-film]:after{z-index:2}
/* RobotLack 2026-09-25 v4: large cinematic scenes with readable in-picture titles. */
.wheel-stage{max-width:1800px;margin:auto;padding:120px var(--gutter)}
.wheel-stage h2{font-size:clamp(42px,5.2vw,82px);line-height:1.06;letter-spacing:-.05em}
.wheel-films{position:relative;gap:32px;align-items:start}
.wheel-films [data-wheel-service="rims"]{order:-1}
.wheel-films .editorial-card{background:transparent;border-radius:0;overflow:visible}
.wheel-films .editorial-image{height:auto;aspect-ratio:16/9;background:#170c20;border-radius:20px;isolation:isolate}
.wheel-films .editorial-copy{padding:30px 4px 0}
.wheel-films .editorial-image img,.motion .wheel-films .editorial-image img,.motion .wheel-films .editorial-card:hover .editorial-image img,.film-wheel-polishing video,.film-tire-storage video{object-fit:contain;object-position:center;transform:none}
/* The approved motion stays intact; this grade suppresses bright synthetic surfaces. */
.film-tire-storage video,.wheel-films [data-wheel-service="tires"] .editorial-image img{filter:saturate(.62) brightness(.72) contrast(1.12)}
.wheel-films .film-ready{background:#120a19}
.motion .wheel-section{height:260svh;padding:0;max-width:none;position:relative;overflow:clip;background:#120a19}
.motion .wheel-stage{position:sticky;top:0;height:100svh;min-height:600px;max-width:none;padding:0;overflow:hidden;isolation:isolate}
.motion .wheel-stage>.section-top{position:absolute;z-index:3;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;margin:0;padding:0 7vw;pointer-events:none;opacity:var(--mid-heading,1);transform:translateY(calc(var(--mid-headingY,0)*1px))}
.motion .wheel-stage h2{font-size:clamp(64px,8.3vw,130px);line-height:1.02;letter-spacing:-.06em;font-weight:580}
.wheel-stage h2 span{color:var(--mint)}
.wheel-stage .eyebrow{font-size:14px;letter-spacing:.13em;margin-bottom:22px}
.motion .wheel-films{position:absolute;inset:0;display:block}
.motion .wheel-films .editorial-card{position:absolute;inset:0;will-change:transform,opacity;transform-origin:center 48%}
.motion .wheel-films [data-wheel-service="rims"]{opacity:var(--mid-rimOpacity,0);transform:translate3d(calc(var(--mid-rimX,-48)*1vw),0,0) scale(var(--mid-rimScale,.7))}
.motion .wheel-films [data-wheel-service="tires"]{opacity:var(--mid-tireOpacity,0);transform:translate3d(calc(var(--mid-tireX,48)*1vw),0,0) scale(var(--mid-tireScale,.7))}
.motion .wheel-films .editorial-card[inert]{pointer-events:none}
.motion .wheel-films .editorial-image{position:absolute;inset:var(--header-height,76px) 0 0;height:auto;aspect-ratio:auto;border-radius:0;background:#120a19;overflow:hidden}
.motion .wheel-films .editorial-image:after{content:'';position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(12,6,18,.68),transparent 64%),linear-gradient(0deg,rgba(12,6,18,.86),transparent 46%)}
.motion .wheel-films [data-wheel-service="tires"] .editorial-image:after{background:linear-gradient(90deg,rgba(25,10,35,.64),rgba(22,9,32,.08) 78%),linear-gradient(0deg,rgba(13,7,20,.78),transparent 44%)}
.motion .wheel-films .editorial-copy{position:absolute;z-index:2;left:6vw;right:20vw;bottom:11%;padding:0;display:block;pointer-events:none}
.motion .wheel-films .editorial-copy .eyebrow{margin:0 0 16px;color:var(--mint);text-shadow:0 2px 12px #08041080}
.motion .wheel-films .editorial-copy h3{font-size:clamp(48px,6.2vw,96px);line-height:1.02;letter-spacing:-.05em;font-weight:580;color:#fff;text-shadow:0 3px 30px #08041050;max-width:900px}
.motion .wheel-films .editorial-copy h3 br{display:block}
.motion .wheel-films .editorial-copy>p:not(.eyebrow){display:none}
.motion .wheel-films .editorial-copy .text-link{display:inline-flex;margin-top:24px;font-size:16px;pointer-events:auto;color:#fff;border-color:#ffffff70}
.motion .wheel-films [data-wheel-service="tires"] .editorial-copy{top:calc(var(--header-height,76px) + 7vh);bottom:auto}
.motion .wheel-films [data-wheel-service="tires"] .editorial-copy h3{font-size:clamp(44px,5.2vw,80px)}
.motion .wheel-films .film-toggle{top:24px;right:24px}
.still .wheel-films .editorial-card{transform:none;opacity:1}
@media(max-width:700px){
 .wheel-stage{padding:72px 24px}.wheel-films{gap:48px}
 .motion .wheel-section{height:240svh}
 .motion .wheel-stage{padding:0;min-height:580px}
 .motion .wheel-stage h2{font-size:clamp(46px,12vw,76px)}
 .motion .wheel-films .editorial-image{inset:22svh 0 auto;height:auto;aspect-ratio:16/9}
 .motion .wheel-films .editorial-image:after,.motion .wheel-films [data-wheel-service="tires"] .editorial-image:after{background:linear-gradient(180deg,rgba(13,7,20,.77),rgba(22,9,32,.06) 40%,rgba(13,7,20,.1))}
 .motion .wheel-films .editorial-copy,.motion .wheel-films [data-wheel-service="tires"] .editorial-copy{left:24px;right:24px;top:calc(22svh + 16px);bottom:auto}
 .motion .wheel-films .editorial-copy .eyebrow{font-size:14px;letter-spacing:.04em;max-width:calc(100% - 46px);margin:0}
 .motion .wheel-films .editorial-copy h3,.motion .wheel-films [data-wheel-service="tires"] .editorial-copy h3{font-size:clamp(32px,8.7vw,48px);margin-top:calc(56.25vw - 10px);max-width:480px}
 .motion .wheel-films .editorial-copy .text-link{margin-top:20px}
 .motion .wheel-films .film-toggle{top:12px;right:14px;width:36px;height:36px}
 .wheel-films .editorial-copy{padding:24px 0 0}
}
.film-robot-wash video{height:calc(100% - var(--header-height,76px));margin-top:var(--header-height,76px);transform-origin:50% 0%;transform:translate3d(0,calc(var(--mid-imageY,0)*1px),0) scale(var(--mid-imageScale,1.04));object-position:center top}
.film-toggle{position:absolute;right:var(--gutter,24px);top:calc(var(--header-height,80px) + 22px);z-index:8;display:grid;place-items:center;width:46px;height:46px;border:1px solid #ffffff66;border-radius:50%;background:#211129bf;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;transition:background .2s,border-color .2s;box-shadow:0 2px 14px #160b2020}
.film-toggle:hover{background:#382042e8;border-color:#c0f4df}
.film-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.film-toggle:focus-visible{outline:3px solid #c0f4df;outline-offset:5px}
.film-toggle[hidden]{display:none}
.editorial-image>.film-toggle{top:18px;right:18px}
.film-control-robot-wash{top:auto;right:calc(var(--mid-insetSide,8)*1% + 24px);bottom:max(88px,calc(var(--mid-insetBottom,7)*1% + 24px))}
.wash-visual[data-film] figcaption,.editorial-image[data-film] .card-caption{z-index:2}
.wash-visual[data-film] figcaption{right:auto;left:calc(var(--mid-insetSide,8)*1% + 24px);bottom:max(88px,calc(var(--mid-insetBottom,7)*1% + 24px))}
.still .film-layer{transition:none}.still .film-toggle{display:none}.still .film-layer video{transform:none;height:100%;margin-top:0}
@media(max-width:700px){.film-control-paint-burst{top:90px;right:20px}.film-paint-burst video{object-position:58% 42%}.film-control-robot-wash{right:calc(var(--mid-insetSide,8)*1% + 18px);bottom:max(78px,calc(var(--mid-insetBottom,7)*1% + 18px))}.film-robot-wash video{object-position:72% top;transform:translate3d(0,calc(var(--mid-imageY,0)*1px),0) scale(var(--mid-imageScale,1.04))}}
@media(prefers-reduced-motion:reduce){.film-layer,.film-toggle{transition:none}}

/* Keep controls out of the reading area and the service call to action. */
.film-control-robot-wash{top:calc(var(--header-height,76px) + 22px);bottom:auto;right:24px}
.wash-visual[data-film] figcaption{top:calc(var(--header-height,76px) + 24px);bottom:auto}
@media(max-width:700px){.film-control-robot-wash{top:90px;bottom:auto;right:20px}}

/* Keep the initial scroll cue clear of the hero link on short desktops. */
@media(min-width:701px){.motion .opening .scroll-cue{bottom:28px}.chapter-link{right:calc(var(--gutter) + 145px)}}

/* Approved 20-second paint sequence, behind the original luminous PRECISION mask.
   Travel 300/280svh: the readable word occupies a longer portion, with less empty travel. */
.motion .surface{height:400svh}
.surface[data-paint-film] .surface-media{background:#140c1b}
.surface[data-paint-film] .surface-media .photo{inset:var(--header-height,76px) 0 0;width:auto;height:auto;transform:none}
.surface[data-paint-film] .surface-media .photo img,.film-precision video{object-fit:contain;object-position:center;transform:none}
.film-precision{top:var(--header-height,76px);background:#140c1b}
.surface[data-paint-film] .image-shade{z-index:1;background:linear-gradient(90deg,#1d0c2e47,transparent 78%),linear-gradient(0deg,#1d0c2e1a,transparent 50%)}
.surface[data-paint-film] .surface-media:after{z-index:2}
.still .surface[data-paint-film] .film-precision{display:none}
@media(max-width:700px){.motion .surface{height:380svh}}

/* 2026-09-25: visible scroll feedback before the long Precision reveal.
   The movie itself remains ordinary autoplay; these transforms only frame it. */
.motion .surface[data-paint-film] .film-precision video,
.motion .surface[data-paint-film] .surface-media .photo img{
 transform:translate3d(0,calc(var(--paintY,22)*1px),0) scale(var(--paintScale,.9));
 transform-origin:50% 55%;will-change:transform
}
.motion .surface[data-paint-film] .surface-intro{
 transform:translate3d(0,calc(var(--introY,26)*1px),0) scale(var(--introScale,1.04));transform-origin:left center
}
.paint-scroll-marker{--show-scroll:var(--scrollFill,0)}

/* Keep playback controls inside the image in every layout. */
.robotshow-frame>.robotshow-controls,.motion .robotshow-frame>.robotshow-controls{position:absolute;inset:auto 12px 12px auto;width:auto;max-width:none;padding:0;background:none;z-index:4}
.robotshow-controls .robotshow-actions{width:auto;display:flex;flex-direction:row;gap:12px}
.robotshow-actions button{position:relative;display:grid;place-items:center;width:36px;height:36px;min-height:36px;padding:8px;border-radius:50%;background:#10091999;border:1px solid #ffffff55;color:white}
.robotshow-actions button:before{content:'';position:absolute;inset:-4px}
.robotshow-actions svg{display:block;width:18px;height:18px}

/* Small controls share the actual media frame, never the surrounding section. */
.film-controls{position:absolute;right:12px;bottom:12px;z-index:8;display:flex;gap:12px;pointer-events:auto}
.film-controls[hidden]{display:none}
.film-controls .film-toggle{position:relative;inset:auto;width:32px;height:32px;min-height:32px;padding:7px;backdrop-filter:none}
.film-controls .film-toggle:before{content:'';position:absolute;inset:-6px}
.film-controls .film-toggle svg{width:16px;height:16px}
.wash-visual>.film-controls{right:calc(var(--mid-insetSide,8)*1% + 16px);bottom:max(80px,calc(var(--mid-insetBottom,7)*1% + 16px))}
.editorial-image>.film-controls{top:18px;right:18px;bottom:auto}
.robotshow-frame>.robotshow-controls,.motion .robotshow-frame>.robotshow-controls{left:12px;right:auto}
.surface-actions{position:absolute;left:var(--gutter);right:var(--gutter);bottom:28px;display:flex;gap:24px;flex-wrap:wrap;z-index:5}
.surface-actions .chapter-link{position:static;font-size:14px;line-height:1.4}

/* Keep the action and the scroll cue in separate rows on touch screens. */
@media(max-width:700px){
 .motion .surface{height:320svh}
 .motion .opening{height:215svh}
 .motion .precision{height:200svh}
 .motion .surface .chapter-link{left:24px;right:24px;bottom:125px;width:fit-content;max-width:calc(100% - 48px);z-index:5;font-size:14px;line-height:1.5;text-wrap:balance}
 .motion .surface .paint-scroll-marker{bottom:18px}
 .motion .surface .precision-tracer-glow{filter:none}
 /* Keep the silhouette mask: raw variable-font strokes expose internal
    overlaps in P/R. Only the blurred glow is omitted on phones. */
 .motion .surface .word-mask{contain:paint}
 .film-scroll-marker>i{width:26px;height:64px;border-radius:14px;backdrop-filter:none;-webkit-backdrop-filter:none}
 .film-scroll-marker em{width:16px;height:20px;top:5px;border-radius:9px;transform:translate3d(-50%,calc(var(--show-scroll,0)*30px),0);will-change:transform}
 .motion .surface .surface-end{padding-bottom:90px}
}

/* Mobile paint keeps the full image. Scroll travel is one short viewport,
   measured independently of the compact stage so the last word cannot trap
   the visitor in several screenfuls of empty section. */
@media(max-width:700px){
 .motion .surface{height:calc(56.25vw + 236px + 78svh)}
 .motion .surface>.screen{height:calc(56.25vw + 236px);min-height:0}
 .motion .surface[data-paint-film] .surface-media{inset:112px 0 auto;height:56.25vw}
 .motion .surface[data-paint-film] .surface-media .photo,.motion .surface .film-precision{inset:0}
 .motion .surface[data-paint-film] .film-precision video,.motion .surface[data-paint-film] .surface-media .photo img{transform:none}
 .motion .surface .surface-intro{top:112px}
 .motion .surface .surface-end{top:130px;padding-bottom:0}
 .surface-actions{left:24px;right:24px;bottom:22px;gap:6px 20px}
 .motion .surface .surface-actions .chapter-link{position:static;width:auto;max-width:100%;padding:8px 0;font-size:13px}
 .robotshow-actions button{width:32px;height:32px;min-height:32px;padding:7px}
 .robotshow-actions button:before{inset:-6px}
 .robotshow-actions svg{width:16px;height:16px}
 .robotshow .film-scroll-marker>i{width:10px;height:24px;border-radius:6px}
 .robotshow .film-scroll-marker em{width:4px;height:7px;top:3px;border-radius:3px;transform:translate3d(-50%,calc(var(--show-scroll,0)*11px),0)}
}
/* Reduced motion keeps the film's links after its text in normal reading order. */
.still .surface-actions{position:static;margin:0;padding:0 var(--gutter) 35px;gap:12px 24px}
.still .surface-actions .chapter-link{margin:0}

/* Fill the stage from its leading edge instead of centering a small 16:9 image in a tall void. */
@media(min-width:701px){
 .motion .surface{height:300svh}
 .motion .surface[data-paint-film] .surface-media .photo img,.motion .surface[data-paint-film] .film-precision video{object-fit:cover;object-position:center;transform:none}
}
.paint-scroll-marker{position:absolute;z-index:6;left:50%;bottom:96px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;color:#fff;font:500 13px/1.4 Inter,system-ui,sans-serif;padding:9px 14px;border:1px solid #ffffff66;border-radius:24px;background:#140c1be6;pointer-events:none}
.paint-scroll-marker>span:first-child{color:#00c9b7;font-size:23px}
.paint-scroll-marker>i{width:34px;height:3px;background:#ffffff40;position:relative;overflow:hidden}
.paint-scroll-marker>i:after{content:'';position:absolute;inset:0;background:#00c9b7;transform-origin:left;transform:scaleX(var(--scrollFill,0))}
@media(max-width:700px){.motion .surface .paint-scroll-marker{bottom:105px;white-space:nowrap;font-size:12px;padding:6px 12px}}
.still .paint-scroll-marker{display:none}