/* OBEDIO SmartButton scroll film (scrolly.js). Pinned full-viewport canvas below the 72px nav. */
.scrolly{--scrolly-bg:#010101;position:relative;height:880vh;background:var(--scrolly-bg);color:#f5f0e6;isolation:isolate}
.scrolly-stage{position:sticky;top:72px;height:calc(100svh - 72px);min-height:480px;overflow:hidden;background:var(--scrolly-bg)}
.scrolly canvas,.scrolly-poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.scrolly-poster{object-fit:cover;object-position:50% 50%;transition:opacity .5s ease}
.scrolly-ready .scrolly-poster{opacity:0;pointer-events:none}
/* soft scrim behind the caption column so copy stays readable over metal highlights */
.scrolly-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(1,1,1,.62) 0%,rgba(1,1,1,.30) 30%,rgba(1,1,1,0) 46%)}
.scrolly-copy{position:absolute;inset:0;z-index:2;pointer-events:none}
.scrolly-caption{position:absolute;left:5vw;top:50%;margin-top:-1px;max-width:min(31vw,470px);opacity:0;visibility:hidden;will-change:opacity,transform}
.scrolly-caption>div{transform:translateY(-50%)}
.scrolly .scrolly-number{color:#d2b77a;font:500 12px 'Hanken Grotesk',sans-serif;letter-spacing:.2em;margin:0 0 22px}
.scrolly-caption h2{font:400 clamp(38px,3.9vw,68px)/1.02 'Cormorant Garamond',serif;letter-spacing:-.03em;margin:0 0 22px;color:#f5f0e6;text-wrap:balance}
.scrolly-caption p:not(.scrolly-number){font-size:16px;line-height:1.7;max-width:28ch;color:#e0e2dd;margin:0}
.scrolly-label{position:absolute;z-index:2;left:57.5%;bottom:11%;transform:translate(-50%,8px);opacity:0;transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.scrolly-label.on{opacity:1;transform:translate(-50%,0)}
.scrolly-label span{display:inline-block;font:500 12px 'Hanken Grotesk',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#d2b77a;padding:9px 16px;border:1px solid rgba(210,183,122,.38);border-radius:999px;background:rgba(1,1,1,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.scrolly-hint{position:absolute;z-index:2;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(245,240,230,.62);font:500 11px 'Hanken Grotesk',sans-serif;letter-spacing:.24em;text-transform:uppercase;transition:opacity .5s ease;pointer-events:none}
.scrolly-hint i{display:block;width:1px;height:34px;background:linear-gradient(rgba(210,183,122,.9),rgba(210,183,122,0));animation:scrolly-hint 2.2s ease-in-out infinite;transform-origin:top}
.scrolly-hint.off{opacity:0}
@keyframes scrolly-hint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
/* closing top view is centred: its line sits under the button instead of in the side column */
.scrolly-caption[data-station="end"]{left:0;right:0;top:auto;bottom:5.5vh;max-width:none;text-align:center}
.scrolly-caption[data-station="end"]>div{transform:none}
.scrolly-caption[data-station="end"] h2{font-size:clamp(30px,2.6vw,44px);margin:0}
.scrolly-caption[data-station="end"] .scrolly-number{margin:0 auto 12px;text-align:center;max-width:none}
.scrolly-caption[data-station="end"] h2{text-align:center;max-width:none}
/* portrait / phone: product in the upper part, copy at the bottom */
.scrolly-portrait .scrolly-stage::after{background:linear-gradient(0deg,rgba(1,1,1,.72) 0%,rgba(1,1,1,.38) 30%,rgba(1,1,1,0) 48%)}
@media (max-width:820px),(max-aspect-ratio:4/5){
  .scrolly-stage::after{background:linear-gradient(0deg,rgba(1,1,1,.72) 0%,rgba(1,1,1,.38) 30%,rgba(1,1,1,0) 48%)}
  .scrolly-caption{left:6vw;right:6vw;top:auto;bottom:78px;max-width:none}
  .scrolly-caption[data-station="end"]{bottom:48px}
  .scrolly-caption>div{transform:none}
  .scrolly-caption h2{font-size:clamp(36px,9vw,54px);margin-bottom:14px}
  .scrolly-caption p:not(.scrolly-number){font-size:15px;line-height:1.6}
  .scrolly-number{margin-bottom:14px}
  .scrolly-label{left:50%;bottom:auto;top:56%}
  .scrolly-hint{bottom:18px}
}
/* reduced motion or no data: a single still with the copy as a list */
.scrolly-static{height:auto}
.scrolly-static .scrolly-stage{position:relative;top:0;height:auto;min-height:0;overflow:visible}
.scrolly-static canvas,.scrolly-static .scrolly-hint,.scrolly-static .scrolly-label,.scrolly-static .scrolly-stage::after{display:none}
.scrolly-static .scrolly-poster{position:relative;height:auto;aspect-ratio:16/9;max-height:calc(100svh - 72px);opacity:1}
.scrolly-static .scrolly-copy{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px;padding:56px 7vw 72px}
.scrolly-static .scrolly-caption{position:static;opacity:1;visibility:visible;max-width:none}
.scrolly-static .scrolly-caption>div{transform:none}
.scrolly-static .scrolly-caption h2{font-size:clamp(30px,3vw,42px)}

/* hero mode (home): the carousel lives in the stage, its first-slide button melts into the film */
.scrolly-hero .scrolly-stage{top:0;height:100svh;min-height:640px}
.scrolly.scrolly-hero #hero.welcome-hero{position:absolute;inset:0;height:100%;min-height:0;z-index:0;opacity:var(--hphoto,1)}
.scrolly-hero .hs-copy,.scrolly-hero .hs-nav,.scrolly-hero .welcome-discover{opacity:var(--hcopy,1)}
.scrolly-hero:not(.scrolly-static) canvas{opacity:0;z-index:1;pointer-events:none}
.scrolly-hero:not(.scrolly-static) .scrolly-poster{display:none}
.scrolly-hero .scrolly-stage::after{z-index:1;opacity:var(--scrim,0)}
.scrolly-hero .scrolly-hint{display:none}
/* slide 1: the readability gradient skips the green button (it is film frame 0), so the film canvas lands on identical pixels;
   the cut mask follows the img's object-fit/object-position exactly (hybrid.css) */
.scrolly-hero .hs-slide[data-slide="0"]::after{-webkit-mask:url(/images/hero-v3-quartet-cut.png) 62% 50%/cover no-repeat;mask:url(/images/hero-v3-quartet-cut.png) 62% 50%/cover no-repeat}
/* slide 1 is one Blender render: its own light already keeps the copy side dark, so the readability gradient stays clear of the
   film button (no darker ring around it that would read as a cut-out); the cut mask remains as a guard */
.scrolly-hero .hs-slide[data-slide="0"]::after{background:linear-gradient(90deg,#080705e6 0%,#080705a0 27%,#08070500 46%),linear-gradient(180deg,#08070566,#08070500 30%,#08070500 86%,#08070580)}
@media(max-width:700px){.scrolly-hero .hs-slide[data-slide="0"]::after{background:linear-gradient(180deg,#08070500 51%,#080705f2 61.5%)}}
@media(max-width:700px){.scrolly-hero .hs-slide[data-slide="0"]::after{-webkit-mask:url(/images/hero-v3-quartet-cut.png) 70% 0/auto 62% no-repeat,linear-gradient(#000,#000) 0 100%/100% 38.2% no-repeat;mask:url(/images/hero-v3-quartet-cut.png) 70% 0/auto 62% no-repeat,linear-gradient(#000,#000) 0 100%/100% 38.2% no-repeat}}
.scrolly-hero.scrolly-static .scrolly-stage{min-height:0}
.scrolly.scrolly-hero.scrolly-static #hero.welcome-hero{position:relative;height:100svh;min-height:640px}