/* Layer positions from the 1920 × 802 PSD supplied on 2026-10-21. */
.hero-revision{background:#fbfcfd url("design/hero-20261021-v2/background-clean.webp") center/100% 100% no-repeat}
.hero-handpiece{position:absolute;left:35.081648%;top:-24.731639%;width:26.815872%;height:54.201432%;opacity:.090196;pointer-events:none;transform:translate(var(--handpiece-x,0px),var(--handpiece-y,0px));transition:transform 1.1s ease-out;z-index:-1}
.hero-handpiece img{width:100%;height:100%;object-fit:contain;transform-origin:55% 65%}
.hero-handpiece.has-motion img{animation:hero-handpiece-float 8s ease-in-out infinite alternate;animation-play-state:paused}
.hero-handpiece.has-motion.is-running img{animation-play-state:running}
@keyframes hero-handpiece-float{from{transform:translate(0,0) rotate(0)}to{transform:translate(10px,9px) rotate(-1.2deg)}}
@media(prefers-reduced-motion:reduce){.hero-handpiece{transform:none;transition:none}.hero-handpiece img{animation:none!important}}
.hero-revision .hero-orbit,.hero-revision .hero-bottom{display:none}
.hero-revision .hero-grid{width:100%;max-width:1920px;min-height:0;height:min(41.770833vw,802px);margin:auto;display:block}
.hero-revision .hero-copy{position:absolute;left:13.333333%;top:23.5%;width:34%;padding:0}
.hero-revision .hero-copy .eyebrow{font-size:clamp(9px,.729167vw,14px);margin:0 0 min(1.71875vw,33px);color:#816b87}
.hero-revision .hero-copy h1{font-size:clamp(32px,3.541667vw,68px);line-height:1.17647;font-weight:700;letter-spacing:0;text-transform:uppercase;animation:none}
.hero-revision .hero-line{display:block;color:#2c2631}
.hero-revision .hero-line:nth-child(2){color:#917c98}
.hero-revision .hero-line:last-child{font-weight:400}
.hero-revision .hero-description{font-size:clamp(11px,.9375vw,18px);line-height:1.3;margin:min(2.34375vw,45px) 0 min(1.5625vw,30px);max-width:90%;color:#706375}
.hero-revision .button-row{gap:min(.9375vw,18px);flex-wrap:nowrap}
.hero-revision .hero-copy .button{font-size:clamp(8px,.729167vw,14px);letter-spacing:.025em;min-height:36px;padding:min(.729167vw,14px) min(.83333vw,16px);gap:12px;white-space:nowrap}
.hero-revision .hero-copy .button svg{width:14px;height:14px}
.hero-revision .hero-copy .button-outline{border-color:#9c8aa3;background:#f8f6f5}
.hero-revision .hero-copy .button-outline:hover{background:var(--plum)}
.hero-stage{position:absolute;left:48.958333%;top:7.730673%;width:47.65625%;aspect-ratio:915/740;isolation:isolate}
.hero-stage-panels,.hero-stage-reflections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-stage-product{position:absolute;object-fit:contain;max-width:none;filter:none}
.hero-product-rf{opacity:1}
.hero-stage-product{transform-origin:50% 80%;transition:transform .35s var(--ease),filter .35s var(--ease);pointer-events:none}
.hero-stage-product.is-active{transform:translate(var(--device-x,0px),calc(-7px + var(--device-y,0px))) scale(1.025);filter:drop-shadow(0 12px 9px #2c26312b)}
.hero-device-control{display:none;position:absolute;z-index:5;left:calc(var(--column)*25%);top:0;width:25%;height:85%;padding:0;border:0;background:transparent;cursor:zoom-in;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.is-interactive .hero-device-control{display:block}
.hero-stage.is-enter-pending .hero-stage-product,.hero-stage.is-enter-pending .hero-stage-panels,.hero-stage.is-enter-pending .hero-stage-reflections,.hero-stage.is-enter-pending .hero-device-control{opacity:0}
.hero-stage.is-enter-pending .hero-device-control{pointer-events:none}
.hero-device-control::before{content:"";position:absolute;inset:0 2%;opacity:0;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,45%),#fff5,transparent 65%);transition:opacity .3s;pointer-events:none}
.hero-device-control.is-active::before{opacity:1}
.hero-device-control:focus-visible{outline:2px solid #fff;outline-offset:-5px;box-shadow:inset 0 0 0 7px #3a2d4366}
.hero-device-plus{position:absolute;right:12%;top:8%;display:grid;place-items:center;width:26px;height:26px;border:1px solid #fff9;border-radius:50%;color:white;background:#3027378c;font:300 21px/1 Arial,sans-serif;opacity:.6;transition:opacity .25s,background .25s}
.hero-device-control.is-active .hero-device-plus,.hero-device-control:focus-visible .hero-device-plus{opacity:1;background:#302737cc}
@media(hover:none){.hero-device-plus{width:22px;height:22px;font-size:18px;opacity:.85}}
@media(prefers-reduced-motion:reduce){
 .hero-stage-product,.hero-device-control::before,.hero-device-plus{transition:none}
 .hero-stage-product.is-active{transform:none}
}
html[lang^="es"] .hero-revision h1,html[lang^="pt"] .hero-revision h1,html[lang^="it"] .hero-revision h1{font-size:clamp(26px,2.95vw,57px)}
@media(min-width:769px) and (max-width:1100px){
 .hero-revision .hero-grid{height:500px}
 .hero-revision .hero-copy{left:6%;width:43%;top:22%}
 .hero-revision .hero-copy h1{font-size:36px}
 .hero-revision .hero-stage{top:18%;left:51%;width:46%}
 .hero-revision .hero-description{font-size:12px;margin:25px 0}
 .hero-revision .button-row{gap:8px;flex-wrap:wrap}
 .hero-revision .hero-copy .button{font-size:9px;min-height:44px}
 html[lang^="es"] .hero-revision h1,html[lang^="pt"] .hero-revision h1,html[lang^="it"] .hero-revision h1{font-size:32px}
}
@media(max-width:768px){
 .hero-handpiece{left:calc(50% - 150px);top:-100px;width:300px;height:253px}
 .hero-revision{background-size:auto 100%;background-position:center}
 .hero-revision .hero-grid{height:auto;display:flex;flex-direction:column;gap:30px;padding:44px 0 0}
 .hero-revision .hero-copy{position:relative;left:auto;top:auto;width:auto;padding:0 var(--gutter)}
 .hero-revision .hero-copy .eyebrow{font-size:9px;margin-bottom:22px}
 .hero-revision .hero-copy h1{font-size:clamp(29px,8.1vw,48px);line-height:1.18}
 html[lang^="es"] .hero-revision h1,html[lang^="pt"] .hero-revision h1,html[lang^="it"] .hero-revision h1{font-size:clamp(26px,7.2vw,43px)}
 .hero-revision .hero-description{font-size:12px;line-height:1.5;margin:24px 0;max-width:440px}
 .hero-revision .button-row{gap:10px;flex-wrap:wrap}
 .hero-revision .hero-copy .button{font-size:9px;min-height:44px;padding:12px}
 .hero-revision .hero-stage{position:relative;left:auto;top:auto;width:94%;margin:0 auto}
}

/* Original PSD name layers stay separate and enter with the coloured panels. */
.hero-panel-art{position:absolute;inset:0;width:100%;height:100%}.hero-stage-label{position:absolute;object-fit:contain;max-width:none;pointer-events:none}

/* Keep zoom indicators in the free right margin of the new vertical names. */
@media(max-width:1100px){.hero-device-plus{right:3px;top:20px;width:18px;height:18px;font-size:14px}}