/* Raynalight — landing styles */
:root{
  --cream:#FBF8F3; --paper:#FFFFFF; --ink:#2A2521; --taupe:#867A70; --taupe-hi:#9A8E83;
  --champagne:#C2A06A; --gold-1:#B08A52; --gold-2:#E2CFA8;
  --dark:#1E1A17; --dark-2:#252019;
  --hair:rgba(42,37,33,0.12); --hair-light:rgba(255,255,255,0.14);
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --vel:0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Raleway',-apple-system,sans-serif; background:var(--cream); color:var(--ink);
  font-weight:300; line-height:1.65; -webkit-font-smoothing:antialiased;
  font-size:17px; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px)}
.eyebrow{font-size:.72rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--champagne)}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace}

/* fluid type */
h1,h2,h3{font-weight:200; line-height:1.02; letter-spacing:-.012em}
.display{font-size:clamp(2.7rem,7.6vw,6.6rem)}
.h2{font-size:clamp(2rem,5vw,4rem)}
.h3{font-size:clamp(1.5rem,3vw,2.4rem)}
.lead{font-size:clamp(1.05rem,1.6vw,1.32rem); color:var(--taupe); font-weight:300; max-width:46ch; line-height:1.7}
.tnum{font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.6em; font-weight:400; font-size:.95rem; letter-spacing:.02em;
  padding:.95em 1.8em; border-radius:100px; border:1px solid transparent; cursor:pointer; transition:.4s var(--ease);
  background:var(--ink); color:var(--cream)}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(42,37,33,.22)}
.btn--gold{background:linear-gradient(160deg,var(--champagne),var(--gold-1)); color:#fff}
.btn--ghost{background:transparent; border-color:var(--hair); color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink); box-shadow:none}
.btn--light{background:var(--cream); color:var(--ink)}
.link-arrow{display:inline-flex; align-items:center; gap:.55em; font-weight:400; letter-spacing:.02em; color:var(--ink); transition:gap .35s var(--ease)}
.link-arrow .ar{transition:transform .35s var(--ease)}
.link-arrow:hover .ar{transform:translateX(5px)}

/* ---- nav ---- */
.nav{position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,5vw,64px); transition:.45s var(--ease)}
.nav.scrolled{background:rgba(251,248,243,.82); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--hair); padding-top:13px; padding-bottom:13px}
.nav__brand{display:flex; align-items:center; gap:11px}
.nav__brand img{width:34px; height:auto}
.nav__brand .wm{font-size:1.32rem; font-weight:300; letter-spacing:.01em}
.nav__brand .wm b{font-weight:300; color:var(--champagne)}
.nav__links{display:flex; gap:34px; align-items:center}
.nav__links a{font-size:.92rem; font-weight:400; color:var(--taupe); transition:color .3s; white-space:nowrap}
.nav__links a:hover{color:var(--ink)}
.nav__right{display:flex; align-items:center; gap:20px}
/* language toggle */
.lang{display:flex; align-items:center; gap:7px; font-size:.8rem; letter-spacing:.1em; font-weight:500}
.lang__btn{background:none; border:0; cursor:pointer; font-family:inherit; font-size:inherit; letter-spacing:inherit;
  font-weight:500; color:var(--taupe); padding:4px 2px; transition:color .3s; opacity:.7}
.lang__btn:hover{color:var(--ink); opacity:1}
.lang__btn.is-active{color:var(--champagne); opacity:1}
.lang__sep{color:var(--hair); font-weight:300}
@media(max-width:880px){ .nav__links{display:none} }

/* ---- hero ---- */
.hero{position:relative; padding:clamp(140px,18vh,210px) 0 clamp(60px,8vh,110px); overflow:hidden}
.hero__glow{position:absolute; top:-16%; left:46%; transform:translateX(-50%) translateY(var(--py,0px)); width:min(960px,110vw); height:720px;
  background:radial-gradient(ellipse at center 38%, rgba(194,160,106,.22), rgba(226,207,168,.08) 42%, transparent 66%);
  pointer-events:none; z-index:0; animation:glowOpacity 7s ease-in-out infinite}
.hero__sym{position:absolute; top:6%; right:-4%; width:min(440px,46vw); opacity:.16; z-index:0;
  transform:translate3d(var(--tx,0px), calc(var(--py,0px) + var(--ty,0px)), 0); transition:transform .5s var(--ease)}
.hero .wrap{position:relative; z-index:2}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,72px); align-items:center}
.hero h1{margin:.32em 0 .5em}
.hero h1 em{font-style:normal; font-weight:300; background:linear-gradient(160deg,var(--champagne),var(--gold-1)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero__cta{display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-top:34px}
.hero__media{position:relative}
.hero__videowrap{position:relative; width:100%; height:min(560px,62vh); border-radius:22px; overflow:hidden;
  box-shadow:0 40px 90px rgba(42,37,33,.2); background:#14110e;
  -webkit-mask-image:-webkit-radial-gradient(white,black); /* safari corner clip */}
.hero__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.hero__videoglow{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(125% 85% at 50% 22%, transparent 58%, rgba(20,17,14,.14)); mix-blend-mode:multiply}
.hero__cap{margin-top:14px; display:flex; justify-content:space-between; color:var(--taupe)}
@media(max-width:880px){ .hero__grid{grid-template-columns:1fr; gap:40px} .hero__videowrap{height:54vh} }

/* ---- stat band ---- */
.stats{border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.stat{padding:clamp(34px,5vw,60px) 26px; text-align:center; border-left:1px solid var(--hair)}
.stat:first-child{border-left:0}
.stat__num{font-size:clamp(2.4rem,5vw,4rem); font-weight:200; color:var(--ink); letter-spacing:-.02em; line-height:1}
.stat__num .u{color:var(--champagne); font-size:.42em; vertical-align:.5em; margin-left:.06em}
.stat__lbl{margin-top:.7em; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--taupe)}
@media(max-width:760px){ .stats .wrap{grid-template-columns:1fr 1fr} .stat:nth-child(odd){border-left:0} .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--hair)} }

/* ---- section base ---- */
section{position:relative}
.sec{padding:clamp(80px,12vh,160px) 0}
.sec__head{max-width:62ch}
.sec__head .eyebrow{display:block; margin-bottom:1.1em}

/* ---- manifesto ---- */
.manifesto{text-align:center}
.manifesto .h2{max-width:18ch; margin:0 auto; font-weight:200}
.manifesto .h2 b{font-weight:200; color:var(--champagne)}

/* ---- benefits ---- */
.benefit{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,90px); align-items:center; padding:clamp(50px,8vh,90px) 0}
.benefit:nth-child(even) .benefit__media{order:2}
.benefit__media image-slot{width:100%; height:min(540px,60vh)}
.benefit__n{font-size:.8rem; letter-spacing:.24em; color:var(--champagne); font-weight:500}
.benefit h3{margin:.6em 0 .55em}
.benefit p{color:var(--taupe); max-width:42ch}
.benefit .link-arrow{margin-top:1.6em}
@media(max-width:880px){ .benefit{grid-template-columns:1fr; gap:30px} .benefit:nth-child(even) .benefit__media{order:0} .benefit__media image-slot{height:46vh} }

/* ---- dark ritual ---- */
.dark{background:var(--dark); color:var(--cream); overflow:hidden}
.dark .eyebrow{color:var(--gold-2)}
.dark .lead{color:rgba(241,232,219,.72)}
.dark__glow{position:absolute; top:-20%; left:50%; transform:translateX(-50%) translateY(var(--py,0px)); width:min(900px,110vw); height:700px;
  background:radial-gradient(ellipse at center, rgba(194,160,106,.34), transparent 62%); pointer-events:none; animation:glowOpacity 8s ease-in-out infinite}
.dark__sym{width:min(280px,52vw); margin:0 auto 8px}
.ritual{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,56px); margin-top:clamp(40px,6vh,72px)}
.step{text-align:center; padding-top:28px; border-top:1px solid var(--hair-light)}
.step__n{font-family:ui-monospace,monospace; font-size:.8rem; letter-spacing:.2em; color:var(--gold-2)}
.step h3{font-size:clamp(1.4rem,2.4vw,2rem); margin:.7em 0 .4em; color:var(--cream)}
.step p{color:rgba(241,232,219,.66); font-size:.98rem}
@media(max-width:760px){ .ritual{grid-template-columns:1fr; gap:0} .step{padding:26px 0} }

/* ---- device ---- */
.device__grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(34px,6vw,80px); align-items:center}
.device__media image-slot{width:100%; height:min(580px,64vh); box-shadow:0 36px 80px rgba(42,37,33,.16)}
.specs{margin-top:2em; border-top:1px solid var(--hair)}
.spec{display:flex; justify-content:space-between; gap:20px; padding:1.05em 0; border-bottom:1px solid var(--hair)}
.spec dt{color:var(--taupe); font-size:.92rem; letter-spacing:.04em}
.spec dd{font-weight:400; text-align:right}
@media(max-width:880px){ .device__grid{grid-template-columns:1fr; gap:34px} }

/* ---- testimonial ---- */
.quote{display:grid; grid-template-columns:300px 1fr; gap:clamp(34px,6vw,72px); align-items:center}
.quote image-slot{width:300px; height:380px; max-width:100%}
.quote blockquote{font-size:clamp(1.5rem,3vw,2.5rem); font-weight:200; line-height:1.3; letter-spacing:-.01em}
.quote cite{display:block; margin-top:1.4em; font-style:normal; font-size:.92rem; letter-spacing:.04em; color:var(--taupe)}
.quote cite b{font-weight:500; color:var(--ink)}
@media(max-width:760px){ .quote{grid-template-columns:1fr; gap:28px} .quote image-slot{width:200px;height:250px} }

/* ---- press ---- */
.press{text-align:center}
.press__row{display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px,4vw,56px); margin-top:2.4em; align-items:center}
.press__slot{width:150px; height:54px}
@media(max-width:600px){ .press__slot{width:110px;height:42px} }

/* ---- faq ---- */
.faq{max-width:840px; margin:0 auto}
.faq__head{text-align:center; margin-bottom:2.6em}
.qa{border-top:1px solid var(--hair)}
.qa:last-child{border-bottom:1px solid var(--hair)}
.qa__q{width:100%; background:none; border:0; cursor:pointer; text-align:left; font-family:inherit; color:var(--ink);
  font-size:clamp(1.05rem,1.8vw,1.3rem); font-weight:300; padding:1.25em 0; display:flex; justify-content:space-between; gap:24px; align-items:center}
.qa__ic{flex:0 0 auto; width:22px; height:22px; position:relative; transition:transform .4s var(--ease)}
.qa__ic::before,.qa__ic::after{content:''; position:absolute; background:var(--champagne); transition:opacity .3s}
.qa__ic::before{top:10px; left:0; width:22px; height:1.5px}
.qa__ic::after{left:10px; top:0; width:1.5px; height:22px}
.qa.open .qa__ic::after{opacity:0}
.qa__a{max-height:0; overflow:hidden; transition:max-height .5s var(--ease)}
.qa__a p{padding:0 0 1.4em; color:var(--taupe); max-width:64ch}

/* ---- closing cta ---- */
.cta{text-align:center; position:relative; overflow:hidden}
.cta .h2{max-width:16ch; margin:0 auto .8em}
.cta__sym{width:min(360px,60vw); margin:0 auto 18px}

/* ---- footer ---- */
.footer{background:var(--dark); color:var(--cream); padding:clamp(60px,9vh,100px) 0 40px}
.footer .eyebrow{color:var(--gold-2)}
.footer__top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--hair-light)}
.footer__brand img{width:38px; margin-bottom:16px}
.footer__brand .wm{font-size:1.4rem; font-weight:300}
.footer__brand .wm b{color:var(--gold-2); font-weight:300}
.footer__brand p{color:rgba(241,232,219,.6); font-size:.95rem; margin-top:12px; max-width:30ch}
.footer__col h4{font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-2); font-weight:500; margin-bottom:18px}
.footer__col a{display:block; color:rgba(241,232,219,.72); font-size:.95rem; padding:6px 0; transition:color .3s}
.footer__col a:hover{color:var(--cream)}
.news__form{display:flex; gap:8px; margin-top:14px; border-bottom:1px solid var(--hair-light); padding-bottom:8px}
.news__form input{flex:1; background:none; border:0; color:var(--cream); font-family:inherit; font-size:.95rem; outline:none}
.news__form input::placeholder{color:rgba(241,232,219,.4)}
.news__form button{background:none;border:0;color:var(--gold-2);cursor:pointer;font-family:inherit;font-size:1.2rem}
.footer__bottom{display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:28px; flex-wrap:wrap;
  color:rgba(241,232,219,.5); font-size:.85rem; letter-spacing:.03em}
.footer__social{display:flex; gap:18px}
.footer__social a{color:rgba(241,232,219,.6)}
@media(max-width:880px){ .footer__top{grid-template-columns:1fr 1fr; gap:34px} }

/* ---- reveal motion ---- */
.reveal{opacity:0; transform:translateY(42px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-fade,.reveal--img{opacity:1;transform:none;transition:none;clip-path:none}
  .hero-a,.hero-h1 .line i,.split .w__i{opacity:1;transform:none;animation:none;transition:none}
  .hero__glow,.dark__glow,.sym-breathe,.marquee__track,.hero__cue-line::after{animation:none}
  html{scroll-behavior:auto}
}

/* ---- cinematic motion ---- */
@keyframes riseIn{from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none}}
@keyframes lineUp{from{transform:translateY(116%)} to{transform:none}}
@keyframes glowOpacity{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes cueSlide{0%{transform:translateX(-100%)}55%,100%{transform:translateX(120%)}}

.hero-a{opacity:1; transform:none; transition:opacity 1.05s var(--ease), transform 1.05s var(--ease); transition-delay:var(--d,0s)}
html.pre-anim .hero-a{opacity:0; transform:translateY(30px); transition:none}
.hero-h1 .line{display:block; overflow:hidden; padding-bottom:.06em}
.hero-h1 .line i{display:block; font-style:normal; transform:none; transition:transform 1.15s var(--ease); transition-delay:var(--d,0s)}
html.pre-anim .hero-h1 .line i{transform:translateY(116%); transition:none}

.hero__cue{position:absolute; left:clamp(20px,5vw,64px); bottom:30px; z-index:3; display:flex; align-items:center; gap:13px;
  font-family:ui-monospace,monospace; font-size:.68rem; letter-spacing:.24em; color:var(--taupe)}
.hero__cue-line{width:48px; height:1px; background:rgba(194,160,106,.4); position:relative; overflow:hidden}
.hero__cue-line::after{content:''; position:absolute; inset:0; background:var(--champagne); transform:translateX(-100%); animation:cueSlide 2.4s var(--ease) infinite}

.marquee{overflow:hidden; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:20px 0; background:var(--cream)}
.marquee__track{display:inline-flex; white-space:nowrap; width:max-content; animation:marquee 30s linear infinite;
  font-size:clamp(1.5rem,3.4vw,2.7rem); font-weight:200; letter-spacing:.03em; color:var(--ink)}
.marquee__track span em{font-style:normal; color:var(--champagne); margin:0 .35em}
.marquee:hover .marquee__track{animation-play-state:paused}

.reveal-fade{opacity:0; transition:opacity 1.2s var(--ease)}
.reveal-fade.in{opacity:1}
.sym-breathe{animation:breathe 7s ease-in-out infinite}

.reveal--img{clip-path:inset(0 0 100% 0); transform:scale(1.07); transition:clip-path 1.25s var(--ease), transform 1.7s var(--ease); will-change:clip-path,transform}
.reveal--img.in{clip-path:inset(0 0 0 0); transform:none}

/* ---- split-text word reveal (signature) ---- */
.split .w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em}
.split .w__i{display:inline-block; transform:translateY(112%); transition:transform 1s var(--ease-out); transition-delay:var(--wd,0s); will-change:transform}
.split.in .w__i{transform:none}
html.pre-anim .split .w__i{transform:translateY(112%)}

/* ---- magnetic / refined buttons ---- */
.btn,.link-arrow,.lang__btn{will-change:transform}
.btn{transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), background .4s, color .4s}
.mag{display:inline-block; transition:transform .55s var(--ease-out)}

/* ---- velocity-reactive marquee ---- */
.marquee__track{animation-duration:calc(30s / (1 + (var(--vel) * var(--vel)) * 6))}

/* ---- pricing ---- */
.price{overflow:hidden; background:linear-gradient(180deg,var(--cream),#F4EEE4)}
.price__glow{position:absolute; top:-10%; left:50%; transform:translateX(-50%) translateY(var(--py,0px)); width:min(900px,110vw); height:640px;
  background:radial-gradient(ellipse at center, rgba(194,160,106,.18), transparent 64%); pointer-events:none; z-index:0; animation:glowOpacity 9s ease-in-out infinite}
.price .wrap{position:relative; z-index:2}
.price__head{text-align:center; max-width:46ch; margin:0 auto clamp(40px,6vh,64px)}
.price__card{display:grid; grid-template-columns:1fr 1fr; gap:clamp(0px,3vw,40px); align-items:stretch; max-width:920px; margin:0 auto;
  background:var(--paper); border:1px solid var(--hair); border-radius:22px; overflow:hidden; box-shadow:0 30px 70px rgba(42,37,33,.13)}
.price__media{position:relative; min-height:340px}
.price__media image-slot{width:100%; height:100%}
.price__body{padding:clamp(30px,4vw,46px); display:flex; flex-direction:column; align-items:flex-start}
.price__tag{font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--champagne); font-weight:500}
.price__amount{display:flex; align-items:baseline; gap:12px; margin:.5em 0 .1em}
.price__cur{font-size:1.6rem; font-weight:300; color:var(--ink); align-self:flex-start; margin-top:.4em}
.price__now{font-size:clamp(3rem,7vw,4.6rem); font-weight:200; letter-spacing:-.02em; color:var(--ink); line-height:1}
.price__was{color:var(--taupe); font-size:1.2rem; text-decoration:line-through; opacity:.6}
.price__note{color:var(--taupe); font-size:.9rem; margin-bottom:1.4em}
.price__incl{list-style:none; display:flex; flex-direction:column; gap:.6em; margin:0 0 1.8em; width:100%}
.price__incl li{position:relative; padding-left:26px; color:var(--ink); font-size:.96rem; font-weight:300}
.price__incl li::before{content:''; position:absolute; left:0; top:.45em; width:13px; height:7px; border-left:1.5px solid var(--champagne); border-bottom:1.5px solid var(--champagne); transform:rotate(-45deg)}
.price__cta{width:100%; justify-content:center; margin-bottom:1em}
.price__fine{font-family:ui-monospace,monospace; font-size:.72rem; letter-spacing:.06em; color:var(--taupe); text-align:center; width:100%}
.price__badges{display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(18px,4vw,46px); margin-top:clamp(32px,5vh,52px)}
.price__badges span{position:relative; padding-left:22px; font-size:.84rem; letter-spacing:.08em; color:var(--taupe); text-transform:uppercase}
.price__badges span::before{content:'✦'; position:absolute; left:0; color:var(--champagne); font-size:.8em; top:.15em}
@media(max-width:760px){ .price__card{grid-template-columns:1fr} .price__media{min-height:300px} }

/* ---- mobile menu + burger ---- */
.nav__burger{display:none; width:42px; height:42px; background:none; border:0; cursor:pointer; padding:10px; position:relative}
.nav__burger span{display:block; height:1.5px; background:var(--ink); border-radius:2px; margin:5px 0; transition:transform .4s var(--ease), opacity .3s}
body.menu-open .nav__burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .nav__burger span:nth-child(2){opacity:0}
body.menu-open .nav__burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile{position:fixed; inset:0; z-index:45; background:rgba(251,248,243,.97); backdrop-filter:blur(16px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px;
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s; padding:80px 24px}
body.menu-open .mobile{opacity:1; visibility:visible}
.mobile__links{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center}
.mobile__links a{font-size:clamp(1.8rem,7vw,2.6rem); font-weight:200; color:var(--ink); padding:8px 0;
  opacity:0; transform:translateY(20px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s}
body.menu-open .mobile__links a{opacity:1; transform:none}
body.menu-open .mobile__links a:nth-child(1){transition-delay:.10s}
body.menu-open .mobile__links a:nth-child(2){transition-delay:.16s}
body.menu-open .mobile__links a:nth-child(3){transition-delay:.22s}
body.menu-open .mobile__links a:nth-child(4){transition-delay:.28s}
body.menu-open .mobile__links a:nth-child(5){transition-delay:.34s}
.mobile__links a:hover{color:var(--champagne)}
.mobile__shop{color:var(--champagne)!important; font-weight:300}
.mobile__lang{display:flex; align-items:center; gap:8px; font-size:.95rem; letter-spacing:.1em; font-weight:500}
@media(max-width:880px){ .nav__burger{display:block} .nav__right .btn--gold{display:none} .nav__right .lang{display:none} }

/* ---- cursor glow (dark sections) ---- */
.cursor-glow{position:fixed; top:0; left:0; width:520px; height:520px; border-radius:50%; pointer-events:none; z-index:30;
  transform:translate3d(-50%,-50%,0); margin-left:var(--cgx,-1000px); margin-top:var(--cgy,-1000px);
  background:radial-gradient(circle, rgba(194,160,106,.16), transparent 62%); opacity:0; transition:opacity .5s var(--ease); mix-blend-mode:screen}
.cursor-glow.on{opacity:1}

/* ---- cinematic scroll-zoom ---- */
/* ---- cinematic scroll-zoom (grows, then HOLDS full — no shrink/close) ---- */
/* shared sound button (zoom + vertical) */
.cine__sound{display:inline-flex; align-items:center; gap:9px; padding:9px 16px 9px 13px; border-radius:100px; cursor:pointer;
  background:rgba(20,17,14,.42); border:1px solid rgba(241,232,219,.28); color:var(--cream); backdrop-filter:blur(8px);
  font-family:inherit; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:400; transition:background .3s, border-color .3s, opacity .4s}
.cine__sound:hover{background:rgba(20,17,14,.66); border-color:var(--gold-2)}
.cine__sound-ic{position:relative; width:15px; height:13px; flex:0 0 auto}
.cine__sound-ic::before{content:''; position:absolute; left:0; top:3px; width:0; height:0;
  border-top:3.5px solid transparent; border-bottom:3.5px solid transparent; border-right:6px solid var(--gold-2)}
.cine__sound-ic::after{content:''; position:absolute; left:6px; top:1.5px; width:6px; height:8px; border-radius:0 6px 6px 0;
  border:1.4px solid var(--gold-2); border-left:0; opacity:.55}
.cine__sound.on .cine__sound-ic::after{opacity:1; box-shadow:3px 0 0 -1px var(--gold-2)}

.zoom{--p:0; position:relative; background:var(--cream)}
.zoom__track{height:320vh; position:relative}
.zoom__sticky{position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--cream)}
.zoom__frame{position:absolute;
  top:calc(7vh * (1 - var(--p))); bottom:calc(7vh * (1 - var(--p)));
  left:calc(9vw * (1 - var(--p))); right:calc(9vw * (1 - var(--p)));
  border-radius:calc(18px * (1 - var(--p))); overflow:hidden;
  box-shadow:0 40px 90px rgba(42,37,33,calc(.16 * (1 - var(--p)))); background:var(--cream)}
.zoom__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(calc(1.05 - .05 * var(--p))); transition:none}
.zoom__scrim{position:absolute; left:0; right:0; bottom:0; height:38%; pointer-events:none;
  opacity:calc((var(--p) - .6) * 2.4);
  background:linear-gradient(to top, rgba(20,17,14,.42), transparent)}
.zoom__sound{position:absolute; top:calc(84px + 2vh * (1 - var(--p))); right:calc(20px + 3vw * (1 - var(--p))); z-index:4;
  opacity:calc((var(--p) - .3) * 2.2)}
.zoom__cap{position:absolute; left:0; right:0; bottom:clamp(40px,8vh,90px); text-align:center; z-index:3; padding:0 24px;
  opacity:calc((var(--p) - .62) * 3); transform:translateY(calc((1 - var(--p)) * 24px))}
.zoom__cap .eyebrow{color:var(--gold-2); display:block; margin-bottom:.7em}
.zoom__cap-t{font-size:clamp(1.7rem,4.4vw,3.6rem); font-weight:200; line-height:1.12; letter-spacing:-.01em;
  color:var(--cream); max-width:20ch; margin:0 auto; text-wrap:balance}
@media(prefers-reduced-motion:reduce){
  .zoom__track{height:auto}
  .zoom__sticky{position:static; height:auto; padding:6vh 0}
  .zoom__frame{position:relative; inset:auto; top:auto; bottom:auto; left:auto; right:auto;
    width:min(1100px,90vw); height:min(640px,72vh); margin:0 auto; border-radius:22px; box-shadow:0 36px 80px rgba(42,37,33,.18)}
  .zoom__scrim{opacity:1}
  .zoom__cap{opacity:1; transform:none}
}

/* ---- vertical (9:16) video feature ---- */
.vfeat{background:var(--dark); color:var(--cream); overflow:hidden}
.vfeat .wrap{position:relative; z-index:2}
.vfeat__glow{position:absolute; top:-10%; left:50%; transform:translateX(-50%) translateY(var(--py,0px)); width:min(800px,110vw); height:600px;
  background:radial-gradient(ellipse at center, rgba(194,160,106,.2), transparent 64%); pointer-events:none; z-index:0}
.vfeat__grid{display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:clamp(34px,6vw,80px); align-items:center}
.vfeat__phone{position:relative; aspect-ratio:9/16; border-radius:26px; overflow:hidden; background:#0c0a08;
  box-shadow:0 40px 90px rgba(0,0,0,.45); border:1px solid rgba(241,232,219,.12)}
.vfeat__phone video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.vfeat__sound{position:absolute; bottom:16px; right:16px; z-index:3}
.vfeat .eyebrow{color:var(--gold-2)}
.vfeat h2{font-weight:200}
.vfeat .lead{color:rgba(241,232,219,.72)}
@media(max-width:760px){ .vfeat__grid{grid-template-columns:1fr; justify-items:center; gap:34px} .vfeat__phone{width:min(320px,80vw)} }