:root{
  --black:#080808;--black2:#101011;--anth:#19191a;--cream:#eee5d6;--cream2:#d8c6aa;--white:#fffdf8;
  --gold:#b78835;--gold2:#e2c579;--gold3:#6e4b1c;--cyan:#8ad8df;--brown:#2d1b0e;
  --display:"Bodoni MT","Didot","Baskerville","Times New Roman",serif;
  --tech:"Arial Narrow","Bahnschrift","Segoe UI",Arial,sans-serif;
  --body:"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--black);overflow-x:clip}body{margin:0;background:var(--black);color:#fff;font-family:var(--body);overflow-x:clip}body.intro-active{overflow:hidden}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}::selection{background:var(--gold2);color:#111}
body::after{content:"";position:fixed;inset:0;z-index:4000;pointer-events:none;background:url('assets/textures/grain-dark.png') repeat;opacity:.025;mix-blend-mode:soft-light}

/* NOCS */
.nocs-intro{position:fixed;inset:0;z-index:5000;background:#fff;transition:opacity .8s ease,visibility .8s ease,background 1.05s ease}.nocs-intro canvas{position:absolute;inset:0;width:100%;height:100%}.nocs-intro::after{content:"";position:absolute;inset:-8%;pointer-events:none;background:radial-gradient(circle at 50% 78%,rgba(236,225,206,.66),rgba(236,225,206,.18) 34%,rgba(255,255,255,0) 66%),linear-gradient(180deg,rgba(237,229,216,0) 0%,rgba(237,229,216,.14) 44%,rgba(244,239,230,.72) 100%);opacity:0;transform:translateY(22px) scale(1.04);transition:opacity 1.05s ease,transform 1.15s ease}.intro-flash{position:absolute;inset:-20%;background:radial-gradient(circle at center,#fff 0 10%,rgba(255,255,255,.94) 20%,rgba(255,255,255,0) 58%);opacity:0;transform:scale(.5);pointer-events:none}.nocs-intro.flash .intro-flash{animation:introFlash 1.4s cubic-bezier(.2,.8,.2,1) forwards}.nocs-intro.flash::after{opacity:.36;transform:translateY(8px) scale(1.02)}.nocs-intro.site-visible{background:linear-gradient(180deg, rgba(41,37,31,.24) 0%, rgba(198,185,166,.18) 68%, rgba(244,239,230,.28) 100%)}.nocs-intro.site-visible::after{opacity:.92;transform:translateY(0) scale(1)}.nocs-intro.finished{opacity:0;visibility:hidden;pointer-events:none}.intro-status{position:absolute;left:50%;bottom:7vh;transform:translateX(-50%);font:600 10px/1 var(--tech);letter-spacing:.34em;color:#1d1d1f;opacity:.35}@keyframes introFlash{0%{opacity:0;transform:scale(.48)}30%{opacity:1}100%{opacity:0;transform:scale(2.2)}}

/* NAV */
.topbar{position:fixed;z-index:1700;left:0;right:0;top:0;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(7,7,8,.62);backdrop-filter:blur(18px) saturate(1.2);transform:translateY(-110%);transition:transform .45s cubic-bezier(.16,1,.3,1)}.topbar.visible{transform:none}.topbrand{display:flex;align-items:center;gap:13px;font:700 9px/1 var(--tech);letter-spacing:.2em}.topbrand img{width:38px;height:38px;object-fit:contain;filter:invert(1) brightness(2)}.topnav{display:flex;gap:22px;font:700 8px/1 var(--tech);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.54)}.topnav a{transition:color .2s,transform .2s}.topnav a:hover{color:#fff;transform:translateY(-1px)}
.world-rail{position:fixed;z-index:1600;right:18px;top:50%;transform:translate(22px,-50%);display:flex;flex-direction:column;gap:10px;opacity:0;transition:.35s;pointer-events:none}.world-rail.visible{opacity:1;transform:translate(0,-50%);pointer-events:auto}.world-rail a{display:flex;align-items:center;justify-content:flex-end;gap:8px;color:rgba(255,255,255,.23);font:700 7px/1 var(--tech);letter-spacing:.14em;transition:.25s}.world-rail a b{display:block;width:7px;height:7px;border:1px solid currentColor;border-radius:999px;transition:.3s}.world-rail a.active{color:var(--gold2);transform:translateX(-4px)}.world-rail a.active b{width:34px;background:currentColor;box-shadow:0 0 16px rgba(226,197,121,.35)}.world-rail.on-light a{color:rgba(35,24,12,.28)}.world-rail.on-light a.active{color:#8a6023}

/* BRAND */
.brand-scene{height:230vh;background:var(--cream);color:#16120e}.brand-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}.brand-paper{position:absolute;inset:0;background:radial-gradient(circle at 50% 24%,rgba(255,255,255,.98),rgba(255,255,255,.28) 34%,transparent 63%),radial-gradient(circle at 50% 62%,rgba(122,83,31,.08),transparent 36%),linear-gradient(180deg,#f4efe6 0%,#efe8dc 48%,#ece5da 100%)}.brand-paper::after{content:"";position:absolute;inset:0;background:url('assets/textures/grain-light.png');opacity:.12;mix-blend-mode:multiply}.brand-blueprint{position:absolute;inset:0;background:linear-gradient(90deg,rgba(41,31,17,.05) 1px,transparent 1px) 0 0/8vw 8vw,linear-gradient(rgba(41,31,17,.045) 1px,transparent 1px) 0 0/8vw 8vw;opacity:.55;mask-image:radial-gradient(circle at center,black,transparent 78%)}
.brand-atmosphere{position:absolute;inset:0;z-index:1;pointer-events:none}.brand-aura,.brand-crema,.brand-lightshaft,.brand-dust,.brand-steam,.brand-beans{position:absolute}.brand-aura{left:50%;top:47%;transform:translate(-50%,-50%);border-radius:50%;filter:blur(10px)}.brand-aura.aura-main{width:min(82vw,1080px);height:min(82vw,1080px);background:radial-gradient(circle,rgba(255,255,255,.4) 0 15%,rgba(194,148,84,.18) 34%,rgba(194,148,84,.08) 52%,transparent 72%);opacity:.55}.brand-aura.aura-secondary{width:min(46vw,640px);height:min(46vw,640px);left:50%;top:42%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(121,76,26,.14),transparent 68%);filter:blur(22px);opacity:.55}.brand-lightshaft{width:22vw;height:100vh;top:-8vh;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(205,159,93,.16) 32%,rgba(255,255,255,.06) 60%,rgba(255,255,255,0));filter:blur(24px);opacity:.55}.brand-lightshaft.shaft-a{left:19%;transform:rotate(-10deg)}.brand-lightshaft.shaft-b{left:49%;transform:translateX(-50%) rotate(2deg);opacity:.4}.brand-lightshaft.shaft-c{right:15%;transform:rotate(11deg)}.brand-crema{left:50%;transform:translateX(-50%);border-radius:50%;filter:blur(16px)}.brand-crema.crema-top{top:27%;width:min(44vw,520px);height:min(14vw,170px);background:radial-gradient(ellipse at center,rgba(120,74,18,.19),rgba(234,198,136,.14) 36%,rgba(255,255,255,.06) 58%,transparent 72%);opacity:.62}.brand-crema.crema-bottom{top:56%;width:min(58vw,780px);height:min(12vw,155px);background:radial-gradient(ellipse at center,rgba(173,129,71,.14),rgba(255,255,255,.06) 45%,transparent 74%);opacity:.42}.brand-steam{left:50%;top:17%;width:min(44vw,520px);height:32vh;transform:translateX(-50%)}.steam{position:absolute;bottom:0;width:28%;height:100%;border-radius:50%;background:radial-gradient(circle at 50% 12%,rgba(255,255,255,.62),rgba(255,255,255,.18) 36%,rgba(255,255,255,0) 72%);filter:blur(16px);opacity:.42}.steam-a{left:4%}.steam-b{left:36%;height:112%;opacity:.34}.steam-c{right:4%;height:94%;opacity:.38}.brand-beans{inset:0}.brand-beans .bean{position:absolute;width:clamp(16px,1.3vw,24px);height:clamp(25px,1.8vw,34px);background:radial-gradient(circle at 32% 30%,rgba(126,84,41,.96),rgba(54,31,11,.98) 62%,rgba(17,10,5,.98) 100%);border-radius:48% 52% 48% 52% / 60% 44% 56% 40%;box-shadow:0 8px 14px rgba(45,27,10,.16)}.brand-beans .bean::after{content:"";position:absolute;left:47%;top:8%;width:2px;height:84%;background:linear-gradient(180deg,rgba(251,229,189,.32),rgba(255,255,255,0));border-radius:999px;transform:rotate(8deg)}.bean-a{left:19%;top:20%}.bean-b{left:26%;top:58%}.bean-c{left:34%;top:33%}.bean-d{left:62%;top:27%}.bean-e{right:24%;top:54%}.bean-f{right:18%;top:18%}.bean-g{left:72%;top:63%}.bean-h{left:12%;top:73%}.brand-dust{left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}.brand-dust.dust-a{width:min(86vw,1180px);height:min(86vw,1180px);background:radial-gradient(circle,rgba(255,255,255,.16) 0 1px,transparent 1px) 0 0/26px 26px;opacity:.18;mask-image:radial-gradient(circle,black 12%,transparent 72%)}.brand-dust.dust-b{width:min(54vw,760px);height:min(54vw,760px);background:radial-gradient(circle,rgba(111,78,29,.14) 0 1px,transparent 1px) 0 0/22px 22px;opacity:.16;mask-image:radial-gradient(circle,transparent 0 14%,black 28%,transparent 76%)}.brand-lockup{position:relative;z-index:3;width:min(74vw,910px);display:flex;flex-direction:column;align-items:center;transform-origin:center;will-change:transform,opacity}.brand-lockup>img{width:100%;filter:contrast(1.08);mix-blend-mode:multiply}.brand-lockup p{font:italic 400 clamp(28px,3vw,46px)/1 var(--display);color:#755020;margin:26px 0 22px}.brand-meta{display:flex;align-items:center;gap:12px;font:700 7px/1 var(--tech);letter-spacing:.24em;color:#5c5143}.brand-meta i{width:38px;height:1px;background:rgba(71,52,26,.22)}.brand-scrollcue{position:absolute;left:50%;bottom:34px;z-index:4;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--tech);text-transform:uppercase;color:#6b5838}.cue-mouse{width:24px;height:38px;border:1px solid rgba(111,78,29,.38);border-radius:999px;display:grid;place-items:start center;padding-top:7px;box-shadow:0 12px 28px rgba(126,93,48,.08)}.cue-mouse b{display:block;width:4px;height:8px;border-radius:999px;background:#8d6631}.brand-scrollcue em{font-style:normal;font-size:8px;letter-spacing:.26em;white-space:nowrap}.brand-corner{position:absolute;bottom:28px;z-index:4;display:flex;flex-direction:column;gap:7px;font-family:var(--tech);text-transform:uppercase}.brand-corner span{font-size:7px;letter-spacing:.24em;color:#9b7743}.brand-corner b{font-size:7px;letter-spacing:.18em;color:#4b4237}.brand-corner--left{left:30px}.brand-corner--right{right:30px;text-align:right}

/* COMMON WORLD */
.world{position:relative;height:320vh}.world-sticky{position:sticky;top:0;height:100svh;overflow:hidden}.world-sticky::after{content:"";position:absolute;z-index:60;inset:0;background:var(--next-color,#080808);transform:scaleY(var(--portal,0));transform-origin:bottom;pointer-events:none;will-change:transform}.world-ghost{position:absolute;z-index:0;left:-2vw;top:8vh;font:900 clamp(120px,24vw,410px)/.72 var(--tech);letter-spacing:-.08em;white-space:nowrap;opacity:.035;will-change:transform,opacity}.world-index{position:absolute;z-index:8;right:5vw;top:11vh;font:300 clamp(80px,10vw,150px)/1 var(--display);opacity:.08}.world-copy{position:absolute;z-index:8;left:6vw;top:19vh;width:min(43vw,650px);will-change:transform,opacity}.world-copy>small{display:block;margin-bottom:22px;font:700 8px/1 var(--tech);letter-spacing:.26em}.world-copy h1,.world-copy h2{font:400 clamp(66px,7.6vw,126px)/.83 var(--display);letter-spacing:-.055em;margin:0 0 27px}.world-copy h1 em,.world-copy h2 em{font-style:italic}.world-copy p{max-width:590px;margin:0;font-size:15px;line-height:1.75}.world-visual{position:absolute;z-index:4;right:4vw;top:11vh;width:52vw;height:76vh;will-change:transform,opacity}

/* REPAIR */
.world--repair{background:#090909;--next-color:#0d1418}.repair-stage{background:radial-gradient(circle at 76% 47%,rgba(183,136,53,.13),transparent 33%),linear-gradient(130deg,#080808,#11100e 55%,#171007);color:#fff}.repair-grid{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/6vw 6vw,linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px) 0 0/6vw 6vw;mask-image:linear-gradient(90deg,transparent,black 18%,black 88%,transparent)}.repair-copy>small{color:var(--gold2)}.repair-copy h1 em{color:var(--gold2)}.repair-copy p{color:rgba(255,255,255,.58)}.repair-visual{display:grid;place-items:center}.repair-machine{position:relative;z-index:3;width:92%;max-height:73vh;object-fit:contain;filter:drop-shadow(0 45px 70px rgba(0,0,0,.65));will-change:transform,filter}.repair-ring{position:absolute;border:1px solid rgba(226,197,121,.14);border-radius:50%}.ring-a{width:82%;aspect-ratio:1}.ring-b{width:61%;aspect-ratio:1;border-style:dashed}.repair-scanline{position:absolute;z-index:5;left:9%;right:9%;top:16%;height:11%;background:linear-gradient(to bottom,transparent,rgba(226,197,121,.06),rgba(255,255,255,.28),rgba(226,197,121,.08),transparent);filter:blur(2px);mix-blend-mode:screen;will-change:transform}.repair-crosshair{position:absolute;z-index:2;left:50%;top:50%;width:58%;aspect-ratio:1;border:1px solid rgba(226,197,121,.13);border-radius:50%;transform:translate(-50%,-50%)}.repair-crosshair i,.repair-crosshair b{position:absolute;background:rgba(226,197,121,.16)}.repair-crosshair i{left:50%;top:-12%;width:1px;height:124%}.repair-crosshair b{top:50%;left:-12%;height:1px;width:124%}.repair-callout{position:absolute;z-index:7;min-width:220px;padding:12px 14px;border:1px solid rgba(255,255,255,.1);background:rgba(7,7,7,.55);backdrop-filter:blur(10px);opacity:.2}.repair-callout span{display:block;font:700 8px/1 var(--tech);letter-spacing:.18em;color:var(--gold2);margin-bottom:6px}.repair-callout b{font:600 8px/1.4 var(--tech);letter-spacing:.12em;color:rgba(255,255,255,.62)}.callout-a{left:1%;top:13%}.callout-b{right:-2%;top:32%}.callout-c{left:8%;bottom:9%}.repair-steps{position:absolute;z-index:10;left:6vw;right:6vw;bottom:5vh;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid rgba(255,255,255,.1)}.repair-steps article{padding:15px 10px;border-right:1px solid rgba(255,255,255,.08);opacity:.27;transition:.3s}.repair-steps article.is-active{opacity:1;background:linear-gradient(180deg,rgba(226,197,121,.08),transparent);transform:translateY(-5px)}.repair-steps span{display:block;font:400 24px/1 var(--display);color:var(--gold2);margin-bottom:6px}.repair-steps b{font:700 7px/1 var(--tech);letter-spacing:.14em;text-transform:uppercase}.repair-final{position:absolute;z-index:20;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 7vw;background:#080808;opacity:0;pointer-events:none;will-change:opacity,transform}.repair-final small{font:700 9px/1 var(--tech);letter-spacing:.28em;color:var(--gold2);margin-bottom:20px}.repair-final strong{font:400 clamp(100px,13vw,215px)/.7 var(--display);letter-spacing:-.06em}.repair-final em{font-style:italic;color:var(--gold2)}

/* VDE */
.world--vde{background:#0d1418;--next-color:#e7d7bd}.vde-stage{background:radial-gradient(circle at 73% 50%,rgba(101,207,219,.13),transparent 34%),linear-gradient(120deg,#0b1114,#101b20 54%,#0d1215)}.vde-grid-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(138,216,223,.05) 1px,transparent 1px) 0 0/5vw 5vw,linear-gradient(rgba(138,216,223,.04) 1px,transparent 1px) 0 0/5vw 5vw;mask-image:radial-gradient(circle at 70% 50%,black,transparent 70%)}.vde-copy>small,.vde-copy h2 em{color:var(--cyan)}.vde-copy p{color:rgba(226,242,244,.57)}.vde-visual{display:grid;place-items:center}.vde-orbit{position:absolute;border-radius:50%;border:1px solid rgba(138,216,223,.16);will-change:transform}.vde-orbit.orbit-one{width:78%;aspect-ratio:1}.vde-orbit.orbit-two{width:56%;aspect-ratio:1;border-style:dashed}.vde-orbit i{position:absolute;width:9px;height:9px;background:var(--cyan);border-radius:50%;box-shadow:0 0 18px rgba(138,216,223,.65)}.vde-orbit i:nth-child(1){left:50%;top:-5px}.vde-orbit i:nth-child(2){right:6%;top:28%}.vde-orbit i:nth-child(3){left:9%;bottom:22%}.vde-pulse{position:absolute;width:36%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(138,216,223,.35);box-shadow:0 0 0 0 rgba(138,216,223,.1);animation:vdePulse 2.3s ease-out infinite}@keyframes vdePulse{0%{box-shadow:0 0 0 0 rgba(138,216,223,.15)}100%{box-shadow:0 0 0 90px rgba(138,216,223,0)}}.vde-wave{position:absolute;width:92%;height:auto;overflow:visible;opacity:.55}.vde-wave-path{fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round;stroke-dasharray:1100;stroke-dashoffset:1100;filter:drop-shadow(0 0 9px rgba(138,216,223,.45));will-change:stroke-dashoffset}.vde-core{position:relative;z-index:4;width:220px;aspect-ratio:1;border:1px solid rgba(138,216,223,.25);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(7,12,15,.75);backdrop-filter:blur(13px);box-shadow:0 0 60px rgba(98,192,203,.08)}.vde-core small{font:700 7px/1 var(--tech);letter-spacing:.21em;color:rgba(211,240,243,.5)}.vde-core strong{font:400 34px/1 var(--display);margin:11px 0;color:#d7fbff}.vde-core span{font:700 6px/1 var(--tech);letter-spacing:.16em;color:var(--cyan)}.vde-stat{position:absolute;z-index:4;width:170px;padding:14px;border:1px solid rgba(138,216,223,.13);background:rgba(6,12,15,.52);backdrop-filter:blur(10px)}.vde-stat small{display:block;font:700 7px/1 var(--tech);letter-spacing:.17em;color:var(--cyan)}.vde-stat b{display:block;font:400 35px/1 var(--display);margin:8px 0}.vde-stat span{font-size:11px;color:rgba(226,242,244,.5)}.stat-a{left:2%;top:16%}.stat-b{right:0;top:34%}.stat-c{left:8%;bottom:10%}.vde-tiers{position:absolute;z-index:12;left:6vw;right:6vw;bottom:4vh;display:flex;gap:12px;justify-content:flex-end}.vde-tiers article{width:250px;padding:16px;border:1px solid rgba(138,216,223,.13);background:rgba(6,12,15,.58);backdrop-filter:blur(12px);transform-origin:center bottom;will-change:transform,opacity}.vde-tiers small{display:block;font:700 6px/1 var(--tech);letter-spacing:.2em;color:rgba(138,216,223,.5)}.vde-tiers strong{display:block;font:500 27px/1 var(--display);margin:8px 0;color:#d7fbff}.vde-tiers span{font-size:11px;line-height:1.45;color:rgba(226,242,244,.52)}

/* COFFEE */
.world--coffee{background:#e7d7bd;color:#1c140b;--next-color:#110d0a}.coffee-stage{background:radial-gradient(circle at 73% 44%,rgba(255,255,255,.8),transparent 31%),linear-gradient(120deg,#f2e8d8,#e1ceb0 55%,#c9a875)}.coffee-stage .world-ghost{color:#492e11;opacity:.05}.coffee-copy{left:auto;right:6vw;text-align:left}.coffee-copy>small{color:#8b6122}.coffee-copy h2 em{color:#a8772f}.coffee-copy p{color:rgba(43,30,17,.66)}.coffee-flow{display:flex;align-items:center;gap:10px;margin-top:28px;font:700 7px/1 var(--tech);letter-spacing:.17em;color:#69502f}.coffee-flow i{width:35px;height:1px;background:rgba(88,62,29,.25)}.coffee-visual{left:2vw;right:auto;width:53vw}.coffee-sun{position:absolute;left:46%;top:47%;width:62%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,.2) 45%,transparent 70%);border:1px solid rgba(105,74,31,.1)}.coffee-pack{position:absolute;object-fit:contain;filter:drop-shadow(0 32px 42px rgba(74,47,18,.18));will-change:transform}.coffee-pack--classic{left:0;bottom:0;width:67%}.coffee-pack--duo{right:-5%;top:3%;width:64%}.coffee-label{position:absolute;padding:13px 15px;border:1px solid rgba(86,58,24,.13);background:rgba(255,249,241,.55);backdrop-filter:blur(10px)}.coffee-label small{display:block;font:700 7px/1 var(--tech);letter-spacing:.18em;color:#93682b;margin-bottom:7px}.coffee-label b{font:700 9px/1 var(--tech);letter-spacing:.15em}.label-a{left:6%;top:12%}.label-b{right:4%;bottom:8%}.coffee-beans{position:absolute;inset:0;overflow:hidden;pointer-events:none}.bean{position:absolute;width:18px;height:28px;border-radius:52% 48% 55% 45%;background:radial-gradient(circle at 34% 30%,#7a4b24,#3e230f 68%);box-shadow:inset -4px -5px 9px rgba(0,0,0,.22);opacity:.22;will-change:transform}.bean::after{content:"";position:absolute;left:50%;top:12%;bottom:12%;width:1px;background:rgba(226,186,126,.32);transform:rotate(9deg)}.coffee-marquee{position:absolute;left:0;right:0;bottom:4vh;overflow:hidden;white-space:nowrap;font:900 clamp(44px,6vw,90px)/1 var(--tech);letter-spacing:-.035em;color:rgba(68,44,18,.075)}.coffee-marquee span{display:block;width:max-content;will-change:transform}

/* COACHING */
.world--coaching{background:#110d0a;--next-color:#0b0b0d}.coaching-stage{background:radial-gradient(circle at 68% 45%,rgba(166,96,38,.18),transparent 32%),linear-gradient(120deg,#0d0b09,#17100b 54%,#2a180c)}.coach-lines{position:absolute;inset:0;background:linear-gradient(118deg,transparent 0 49.9%,rgba(226,197,121,.05) 50%,transparent 50.1%) 0 0/18vw 18vw}.coaching-copy>small,.coaching-copy h2 em{color:var(--gold2)}.coaching-copy p{color:rgba(255,255,255,.58)}.coaching-visual{display:grid;place-items:center}.coach-halo{position:absolute;width:70%;height:70%;border-radius:50%;background:radial-gradient(circle,rgba(167,97,37,.24),transparent 68%);filter:blur(28px)}.coaching-visual img{position:relative;z-index:2;max-width:90%;max-height:72vh;object-fit:contain;filter:drop-shadow(0 42px 60px rgba(0,0,0,.55));will-change:transform}.coach-note{position:absolute;z-index:5;display:grid;grid-template-columns:34px 1fr;column-gap:10px;padding:13px 14px;border:1px solid rgba(255,255,255,.1);background:rgba(10,8,6,.5);backdrop-filter:blur(10px);min-width:180px}.coach-note span{grid-row:1/3;font:400 28px/1 var(--display);color:rgba(226,197,121,.42)}.coach-note b{font:700 8px/1 var(--tech);letter-spacing:.15em;color:var(--gold2)}.coach-note small{font-size:10px;color:rgba(255,255,255,.5);margin-top:5px}.note-a{left:0;top:12%}.note-b{right:0;top:25%}.note-c{left:8%;bottom:15%}.note-d{right:5%;bottom:7%}.coach-duration{position:absolute;z-index:9;left:6vw;bottom:5vh;display:flex;align-items:flex-end;gap:18px}.coach-duration small,.coach-duration span{font:700 7px/1 var(--tech);letter-spacing:.18em;color:rgba(255,255,255,.42)}.coach-duration strong{font:400 60px/.8 var(--display);color:var(--gold2)}

/* RENTAL */
.world--rental{background:#0b0b0d;--next-color:#080808}.rental-stage{background:radial-gradient(circle at 68% 40%,rgba(183,136,53,.12),transparent 33%),linear-gradient(120deg,#08090a,#111216 55%,#19110c)}.rental-copy>small,.rental-copy h2 em{color:var(--gold2)}.rental-copy p{color:rgba(255,255,255,.57)}.rental-floor{position:absolute;left:0;right:0;bottom:0;height:48%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 12vw),repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 7vh);transform:perspective(500px) rotateX(62deg) scale(1.35);transform-origin:center bottom;mask-image:linear-gradient(to top,black,transparent 88%)}.rental-visual{display:block}.rental-machine{position:absolute;object-fit:contain;filter:drop-shadow(0 45px 60px rgba(0,0,0,.62));will-change:transform}.rental-machine--one{left:-2%;bottom:7%;width:53%}.rental-machine--two{right:-5%;bottom:4%;width:68%}.rental-spot{position:absolute;top:-10%;width:38%;height:120%;background:linear-gradient(to bottom,rgba(255,244,213,.18),transparent 60%);filter:blur(18px);transform:skewX(-8deg)}.spot-a{left:5%}.spot-b{right:5%}.rental-label{position:absolute;z-index:6;padding:12px 14px;border:1px solid rgba(255,255,255,.1);background:rgba(8,8,9,.56);backdrop-filter:blur(10px)}.rental-label small{display:block;font:700 6px/1 var(--tech);letter-spacing:.18em;color:var(--gold2);margin-bottom:7px}.rental-label b{font:700 8px/1 var(--tech);letter-spacing:.14em}.rental-label--one{left:7%;top:16%}.rental-label--two{right:5%;top:30%}.rental-track{position:absolute;left:6vw;right:6vw;bottom:5vh;display:flex;align-items:center;gap:12px;font:700 7px/1 var(--tech);letter-spacing:.19em;color:rgba(255,255,255,.45)}.rental-track i{flex:1;height:1px;background:rgba(255,255,255,.09)}

/* SHOP */
.world--shop{background:#080808;--next-color:#eee5d6}.shop-stage{background:radial-gradient(circle at 75% 42%,rgba(183,136,53,.12),transparent 33%),linear-gradient(130deg,#070707,#0d0d0e 50%,#181008)}.shop-copy>small,.shop-copy h2 em{color:var(--gold2)}.shop-copy p{color:rgba(255,255,255,.56)}.shop-window{right:0;width:58vw;overflow:hidden;display:flex;align-items:center}.shop-track{display:flex;gap:16px;width:max-content;padding:0 5vw;will-change:transform}.shop-track article{position:relative;width:290px;height:440px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));padding:18px;display:grid;grid-template-rows:auto 1fr auto auto;overflow:hidden}.shop-track article::after{content:"";position:absolute;inset:auto -20% -40% -20%;height:60%;background:radial-gradient(circle,rgba(183,136,53,.16),transparent 68%)}.shop-track small{font:700 7px/1 var(--tech);letter-spacing:.18em;color:var(--gold2)}.shop-track img{width:100%;height:300px;object-fit:contain;align-self:center;filter:drop-shadow(0 25px 32px rgba(0,0,0,.4));position:relative;z-index:2}.shop-track b{font:400 30px/1 var(--display);position:relative;z-index:2}.shop-track span{font-size:11px;color:rgba(255,255,255,.45);margin-top:6px;position:relative;z-index:2}.shop-final{position:absolute;z-index:20;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 7vw;background:#080808;opacity:0;pointer-events:none}.shop-final span{font:700 8px/1 var(--tech);letter-spacing:.26em;color:var(--gold2);margin-bottom:18px}.shop-final strong{font:400 clamp(100px,13vw,210px)/.72 var(--display);letter-spacing:-.06em}.shop-final em{font-style:italic;color:var(--gold2)}

/* FINALE */
.finale{min-height:82vh;background:var(--cream);color:#17120d;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 5vw}.finale>img{width:min(55vw,720px);mix-blend-mode:multiply}.finale p{font:italic 400 clamp(24px,3vw,42px)/1 var(--display);color:#755020;margin:24px 0 30px}.finale div{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;font:700 7px/1 var(--tech);letter-spacing:.18em;color:#756956}

/* NOCS BADGE */
.nocs-badge{position:fixed;left:14px;bottom:14px;z-index:1800;display:flex;align-items:center;gap:9px;padding:7px 11px 7px 7px;border:1px solid rgba(255,255,255,.13);background:rgba(8,8,9,.8);backdrop-filter:blur(13px);opacity:0;transform:translateY(12px) scale(.96);transition:.65s;color:#fff}.nocs-badge.visible{opacity:1;transform:none}.nocs-icon{width:32px;height:32px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#050506;border:1px solid rgba(255,255,255,.22)}.nocs-icon img{width:100%;height:100%;object-fit:cover}.nocs-badge>span:last-child{display:flex;flex-direction:column;gap:3px}.nocs-badge small{font:600 6px/1 var(--tech);letter-spacing:.2em;color:rgba(255,255,255,.38)}.nocs-badge strong{font:700 8px/1 var(--tech);letter-spacing:.18em}

@media(max-width:1100px){
  .brand-lockup{width:min(82vw,820px)}.world-copy{width:45vw}.world-visual{width:54vw;right:-2vw}.repair-callout,.coach-note{transform:scale(.88)}.vde-tiers article{width:220px}.coffee-copy{right:4vw}.coffee-visual{left:-2vw;width:56vw}.shop-window{width:60vw}
}
@media(max-width:800px){
  .topbar{height:64px;padding:0 14px}.topbrand span{display:none}.topnav{gap:13px}.topnav a:nth-child(n+4){display:none}.world-rail{display:none}.brand-scene{height:150vh}.brand-lockup{width:90vw}.brand-lockup p{font-size:25px;text-align:center}.brand-meta{font-size:5px;gap:7px}.brand-meta i{width:15px}.brand-corner--right{display:none}.brand-scrollcue{bottom:20px}.brand-lightshaft{width:34vw}.brand-crema.crema-top{width:78vw;height:19vw}.brand-crema.crema-bottom{width:94vw;height:18vw}.brand-steam{width:82vw;top:19%}.brand-beans .bean{transform:scale(.85)}
  .world{height:auto;min-height:auto}.world-sticky{position:relative;height:auto;min-height:100svh;padding:90px 18px 55px;display:flex;flex-direction:column;overflow:hidden}.world-ghost{font-size:34vw;top:8vh;left:-4vw}.world-index{top:80px;right:18px;font-size:64px}.world-copy,.coffee-copy{position:relative;left:auto;right:auto;top:auto;width:100%;max-width:none;z-index:8}.world-copy h1,.world-copy h2{font-size:55px}.world-copy p{font-size:14px}.world-visual,.coffee-visual,.shop-window{position:relative;left:auto;right:auto;top:auto;width:100%;height:55vh;min-height:430px;margin-top:28px}.repair-steps{position:relative;left:auto;right:auto;bottom:auto;grid-template-columns:repeat(2,1fr);margin-top:20px;width:100%}.repair-final,.shop-final{position:relative;inset:auto;opacity:1;margin:36px -18px -55px;padding:55px 18px}.repair-final strong,.shop-final strong{font-size:62px}.repair-callout,.vde-stat,.coach-note{display:none}.vde-tiers{position:relative;left:auto;right:auto;bottom:auto;display:grid;grid-template-columns:1fr;margin-top:22px;width:100%}.vde-tiers article{width:100%}.coffee-flow{flex-wrap:wrap}.coffee-marquee{position:relative;bottom:auto;margin-top:30px}.coffee-pack--classic{width:76%;left:-12%}.coffee-pack--duo{width:76%;right:-14%}.coach-duration,.rental-track{position:relative;left:auto;right:auto;bottom:auto;margin-top:22px}.rental-machine--one{width:56%;left:-8%}.rental-machine--two{width:72%;right:-14%}.shop-track{padding:0}.shop-track article{width:230px;height:370px}.shop-track img{height:240px}.finale>img{width:86vw}.nocs-badge{left:7px;bottom:7px}.nocs-badge.visible{transform:scale(.86);transform-origin:left bottom}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.brand-scene,.world{height:auto}.brand-sticky,.world-sticky{position:relative;min-height:100svh}.repair-final,.shop-final{position:relative;opacity:1;pointer-events:auto}.bean{display:none}.vde-pulse{animation:none}}


/* V0.9.1 — autonomous scene choreography -------------------------------- */
@media (min-width:801px) and (prefers-reduced-motion:no-preference){
  /* A world entering the viewport starts a small cinematic sequence that
     completes on its own. Scroll still controls the large scene progression. */
  .world.is-entered .repair-scanline{animation:repairAutoScan 2.8s cubic-bezier(.45,0,.2,1) .35s 1 both}
  .world.is-entered .repair-ring.ring-a{animation:repairRingBreath 4.8s ease-in-out .4s infinite alternate}
  .world.is-entered .repair-ring.ring-b{animation:repairRingBreath 5.8s ease-in-out 1s infinite alternate-reverse}
  @keyframes repairAutoScan{
    0%{top:8%;opacity:0} 12%{opacity:.78} 78%{opacity:.62} 100%{top:76%;opacity:.05}
  }
  @keyframes repairRingBreath{from{opacity:.45;filter:drop-shadow(0 0 0 rgba(226,197,121,0))}to{opacity:.9;filter:drop-shadow(0 0 13px rgba(226,197,121,.17))}}

  .world.is-entered .vde-wave-path{animation:vdeAutoDraw 2.5s cubic-bezier(.16,1,.3,1) .25s 1 both}
  .world.is-entered .vde-core{animation:vdeCoreAlive 2.8s ease-in-out .55s infinite alternate}
  .world.is-entered .vde-stat{animation:vdeStatGlow 3.6s ease-in-out infinite alternate}
  .world.is-entered .vde-stat.stat-b{animation-delay:.55s}.world.is-entered .vde-stat.stat-c{animation-delay:1.1s}
  @keyframes vdeAutoDraw{from{stroke-dashoffset:1100;opacity:.12}to{stroke-dashoffset:0;opacity:.68}}
  @keyframes vdeCoreAlive{from{box-shadow:0 0 42px rgba(98,192,203,.06)}to{box-shadow:0 0 82px rgba(98,192,203,.18)}}
  @keyframes vdeStatGlow{from{border-color:rgba(138,216,223,.1)}to{border-color:rgba(138,216,223,.27)}}

  .world.is-entered .coffee-marquee span{animation:coffeeTicker 15s linear infinite}
  .world.is-entered .coffee-label{animation:coffeeLabelBreathe 4s ease-in-out infinite alternate}
  .world.is-entered .coffee-label.label-b{animation-delay:.8s}
  @keyframes coffeeTicker{from{translate:0 0}to{translate:-24vw 0}}
  @keyframes coffeeLabelBreathe{from{filter:drop-shadow(0 10px 18px rgba(91,58,18,.02))}to{filter:drop-shadow(0 18px 28px rgba(91,58,18,.18))}}

  .world.is-entered .coach-halo{animation:coachHaloPulse 5s ease-in-out infinite alternate}
  .world.is-entered .coach-note{animation:coachNoteGlow 3.4s ease-in-out infinite alternate}
  .world.is-entered .coach-note.note-b{animation-delay:.45s}.world.is-entered .coach-note.note-c{animation-delay:.9s}.world.is-entered .coach-note.note-d{animation-delay:1.35s}
  @keyframes coachHaloPulse{from{opacity:.45;filter:blur(2px)}to{opacity:.9;filter:blur(8px)}}
  @keyframes coachNoteGlow{from{border-color:rgba(255,255,255,.08)}to{border-color:rgba(226,197,121,.26)}}

  .world.is-entered .rental-spot{animation:rentalLightSweep 4.4s ease-in-out infinite alternate}
  .world.is-entered .rental-spot:nth-child(2){animation-delay:.8s}
  .world.is-entered .rental-machine{animation:rentalMachineAlive 5.2s ease-in-out 1.2s infinite alternate}
  .world.is-entered .rental-machine--two{animation-delay:1.8s}
  @keyframes rentalLightSweep{from{opacity:.2;filter:blur(22px)}to{opacity:.62;filter:blur(8px)}}
  @keyframes rentalMachineAlive{from{filter:drop-shadow(0 35px 55px rgba(0,0,0,.48)) brightness(.98)}to{filter:drop-shadow(0 52px 82px rgba(0,0,0,.68)) brightness(1.055)}}

  .world.is-entered .shop-track article img{animation:shopProductFloat 4.5s ease-in-out infinite alternate}
  .world.is-entered .shop-track article:nth-child(2) img{animation-delay:.5s}.world.is-entered .shop-track article:nth-child(3) img{animation-delay:1s}.world.is-entered .shop-track article:nth-child(4) img{animation-delay:1.5s}
  @keyframes shopProductFloat{from{translate:0 5px;filter:drop-shadow(0 20px 28px rgba(0,0,0,.32))}to{translate:0 -9px;filter:drop-shadow(0 32px 42px rgba(0,0,0,.5))}}
}

/* V0.9.2 — smoother pacing + softer world transitions ------------------- */
@media (min-width:801px){
  .brand-scene{height:255vh}
  .world{height:360vh}

  /* soften the portal between worlds so the next scene fades in instead of
     appearing as a hard bar / hard color cut */
  .world-sticky::after{
    background:var(--portal-gradient, linear-gradient(to top, var(--next-color,#080808) 0%, color-mix(in srgb, var(--next-color,#080808) 74%, transparent) 42%, transparent 92%));
    transform:translateY(calc((1 - var(--portal,0)) * 112%));
    opacity:calc(var(--portal,0) * .96);
    filter:blur(8px);
    will-change:transform,opacity;
  }

  .world--repair{--portal-gradient:
    radial-gradient(circle at 50% 100%, rgba(75,110,123,.18), transparent 42%),
    linear-gradient(to top, #0d1418 0%, rgba(13,20,24,.94) 28%, rgba(13,20,24,.74) 54%, rgba(13,20,24,.22) 83%, transparent 100%)}

  .world--vde{--portal-gradient:
    radial-gradient(circle at 50% 102%, rgba(255,240,212,.28), transparent 38%),
    linear-gradient(to top, #e7d7bd 0%, #e5d6bd 22%, rgba(231,215,189,.84) 46%, rgba(205,175,130,.36) 74%, transparent 100%)}

  .world--coffee{--portal-gradient:
    radial-gradient(circle at 45% 102%, rgba(43,29,12,.15), transparent 40%),
    linear-gradient(to top, #110d0a 0%, rgba(17,13,10,.95) 26%, rgba(17,13,10,.74) 54%, rgba(17,13,10,.22) 84%, transparent 100%)}

  .world--coaching{--portal-gradient:
    radial-gradient(circle at 50% 100%, rgba(32,26,25,.18), transparent 42%),
    linear-gradient(to top, #0b0b0d 0%, rgba(11,11,13,.95) 24%, rgba(11,11,13,.72) 54%, rgba(11,11,13,.2) 85%, transparent 100%)}

  .world--rental{--portal-gradient:
    radial-gradient(circle at 50% 102%, rgba(37,29,18,.2), transparent 42%),
    linear-gradient(to top, #080808 0%, rgba(8,8,8,.96) 24%, rgba(8,8,8,.72) 56%, rgba(8,8,8,.18) 86%, transparent 100%)}

  .world--vde .world-sticky::before,
  .world--coffee .world-sticky::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:1;
  }
  .world--vde .world-sticky::before{
    z-index:2;
    background:
      radial-gradient(circle at 50% calc(100% - (var(--portal,0) * 2%)), rgba(255,247,231,calc(.06 + var(--portal,0) * .24)), transparent 32%),
      linear-gradient(to top, rgba(231,215,189,calc(var(--portal,0) * .16)) 0%, rgba(231,215,189,0) 45%);
    mix-blend-mode:screen;
  }
  .world--coffee .world-sticky::before{
    z-index:1;
    background:
      linear-gradient(to bottom, rgba(255,250,242,calc(.12 - var(--portal,0) * .08)) 0%, rgba(255,250,242,0) 18%),
      radial-gradient(circle at 55% 0%, rgba(255,255,255,calc(.2 - var(--portal,0) * .12)), transparent 38%);
  }

  /* continuous in-scene life so not everything depends on wheel input */
  .brand-aura.aura-main{animation:brandAuraBreathe 9s ease-in-out infinite alternate}
  .brand-aura.aura-secondary{animation:brandAuraPulse 8.4s ease-in-out infinite alternate}
  .brand-crema.crema-top{animation:brandCremaFloat 8.6s ease-in-out infinite alternate}
  .brand-crema.crema-bottom{animation:brandCremaFloat 11s ease-in-out infinite alternate-reverse}
  .brand-lightshaft.shaft-a{animation:brandShaftDriftA 12s ease-in-out infinite alternate}
  .brand-lightshaft.shaft-b{animation:brandShaftDriftB 10s ease-in-out infinite alternate}
  .brand-lightshaft.shaft-c{animation:brandShaftDriftC 13s ease-in-out infinite alternate}
  .steam-a{animation:brandSteamRise 8.2s ease-in-out infinite}
  .steam-b{animation:brandSteamRise 9.4s ease-in-out infinite 1.1s}
  .steam-c{animation:brandSteamRise 8.8s ease-in-out infinite 2.1s}
  .bean-a{animation:brandBeanFloat 8.2s ease-in-out infinite}
  .bean-b{animation:brandBeanFloat 9.5s ease-in-out infinite 1s}
  .bean-c{animation:brandBeanFloat 8.8s ease-in-out infinite 1.8s}
  .bean-d{animation:brandBeanFloat 10.2s ease-in-out infinite .7s}
  .bean-e{animation:brandBeanFloat 9.2s ease-in-out infinite 2.4s}
  .bean-f{animation:brandBeanFloat 8.4s ease-in-out infinite 1.3s}
  .bean-g{animation:brandBeanFloat 9.8s ease-in-out infinite .4s}
  .bean-h{animation:brandBeanFloat 8.9s ease-in-out infinite 2.6s}
  .brand-dust.dust-a{animation:brandDustSpin 28s linear infinite}
  .brand-dust.dust-b{animation:brandDustSpinReverse 34s linear infinite}
  .cue-mouse b{animation:brandCueScroll 1.8s ease-in-out infinite}
  .brand-scrollcue{animation:brandCueBreathe 3.6s ease-in-out infinite}
  .brand-orbit{animation:brandOrbitPulse 8.5s ease-in-out infinite alternate}
  .brand-orbit.orbit-two{animation-duration:11s;animation-delay:.8s}
  @keyframes brandMachineIdle{from{filter:drop-shadow(0 30px 45px rgba(0,0,0,.05));}to{filter:drop-shadow(0 42px 62px rgba(0,0,0,.12));}}
  @keyframes brandOrbitPulse{from{opacity:.26;filter:drop-shadow(0 0 0 rgba(0,0,0,0))}to{opacity:.4;filter:drop-shadow(0 0 16px rgba(111,78,29,.07))}}

  .world.is-entered .repair-machine{animation:repairMachineAlive 5.4s ease-in-out infinite alternate}
  .world.is-entered .repair-crosshair{animation:repairCrosshairPulse 5.8s ease-in-out infinite alternate}
  .world.is-entered .repair-callout{animation:repairCalloutGlow 4.5s ease-in-out infinite alternate}
  .world.is-entered .repair-callout.callout-b{animation-delay:.8s}
  .world.is-entered .repair-callout.callout-c{animation-delay:1.6s}
  @keyframes repairMachineAlive{from{filter:drop-shadow(0 40px 62px rgba(0,0,0,.56)) brightness(.98)}to{filter:drop-shadow(0 52px 78px rgba(0,0,0,.68)) brightness(1.06)}}
  @keyframes repairCrosshairPulse{from{opacity:.42;box-shadow:0 0 0 rgba(226,197,121,0)}to{opacity:.78;box-shadow:0 0 28px rgba(226,197,121,.08)}}
  @keyframes repairCalloutGlow{from{box-shadow:0 14px 24px rgba(0,0,0,.05)}to{box-shadow:0 18px 30px rgba(226,197,121,.08)}}

  .world.is-entered .coffee-sun{animation:coffeeSunBreathe 7s ease-in-out infinite alternate}
  .world.is-entered .coffee-pack--classic{animation:coffeePackFloatA 5.6s ease-in-out infinite alternate}
  .world.is-entered .coffee-pack--duo{animation:coffeePackFloatB 6.1s ease-in-out .4s infinite alternate}
  @keyframes coffeeSunBreathe{from{filter:blur(0px) brightness(1)}to{filter:blur(1px) brightness(1.08)}}
  @keyframes coffeePackFloatA{from{filter:drop-shadow(0 28px 36px rgba(74,47,18,.12)) brightness(.98)}to{filter:drop-shadow(0 40px 52px rgba(74,47,18,.24)) brightness(1.05)}}
  @keyframes coffeePackFloatB{from{filter:drop-shadow(0 28px 36px rgba(74,47,18,.12)) brightness(.98)}to{filter:drop-shadow(0 40px 52px rgba(74,47,18,.24)) brightness(1.05)}}

  .world.is-entered .vde-orbit{animation:vdeOrbitGlow 5.6s ease-in-out infinite alternate}
  .world.is-entered .vde-orbit.orbit-two{animation-duration:7.4s;animation-delay:.7s}
  @keyframes vdeOrbitGlow{from{opacity:.42;box-shadow:0 0 0 rgba(138,216,223,0)}to{opacity:.8;box-shadow:0 0 18px rgba(138,216,223,.08)}}
}

@keyframes brandAuraBreathe{from{transform:translate(-50%,-50%) scale(.98);opacity:.46}to{transform:translate(-50%,-50%) scale(1.03);opacity:.66}}
@keyframes brandAuraPulse{from{transform:translate(-50%,-50%) scale(.94);opacity:.32}to{transform:translate(-50%,-50%) scale(1.08);opacity:.58}}
@keyframes brandCremaFloat{from{transform:translateX(-50%) translateY(-6px) scale(.98);opacity:.38}to{transform:translateX(-50%) translateY(9px) scale(1.03);opacity:.58}}
@keyframes brandShaftDriftA{from{transform:rotate(-12deg) translateX(-12px)}to{transform:rotate(-7deg) translateX(8px)}}
@keyframes brandShaftDriftB{from{transform:translateX(-50%) rotate(-1deg)}to{transform:translateX(-50%) rotate(4deg) translateY(-10px)}}
@keyframes brandShaftDriftC{from{transform:rotate(10deg) translateX(0)}to{transform:rotate(14deg) translateX(-10px)}}
@keyframes brandSteamRise{0%{transform:translateY(22px) scale(.88);opacity:0}18%{opacity:.18}52%{opacity:.38}100%{transform:translateY(-34px) scale(1.08);opacity:0}}
@keyframes brandBeanFloat{0%{transform:translate3d(0,0,0) rotate(-10deg)}25%{transform:translate3d(8px,-14px,0) rotate(4deg)}50%{transform:translate3d(-4px,-22px,0) rotate(12deg)}75%{transform:translate3d(-10px,-10px,0) rotate(2deg)}100%{transform:translate3d(0,0,0) rotate(-10deg)}}
@keyframes brandDustSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes brandDustSpinReverse{from{transform:translate(-50%,-50%) rotate(360deg)}to{transform:translate(-50%,-50%) rotate(0deg)}}
@keyframes brandCueScroll{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(10px);opacity:1}}
@keyframes brandCueBreathe{0%,100%{opacity:.72;transform:translateX(-50%) translateY(0)}50%{opacity:1;transform:translateX(-50%) translateY(-4px)}}

/* V0.9.3 — N.O.C.S. intro refinement + calmer entry mood ---------------- */
.nocs-intro{
  background:
    radial-gradient(circle at 50% 46%, rgba(47,129,151,.12), transparent 24%),
    radial-gradient(circle at 50% 72%, rgba(255,255,255,.03), transparent 38%),
    linear-gradient(180deg,#1a1d21 0%, #13161a 46%, #0d0f12 100%);
}
.nocs-intro::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.04), transparent 24%),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) 0 0/8vw 8vw,
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px) 0 0/8vw 8vw;
  mask-image:linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
  opacity:.55;
  transition:opacity 1s ease,transform 1.2s ease;
}
.intro-flash{
  background:radial-gradient(circle at center, rgba(255,255,255,.96) 0 7%, rgba(255,248,234,.82) 14%, rgba(141,212,224,.38) 26%, rgba(255,255,255,0) 58%);
}
.nocs-intro.site-visible::before{opacity:.22;transform:scale(1.03)}
.intro-status{color:rgba(255,255,255,.54);text-shadow:0 1px 10px rgba(0,0,0,.2)}

/* V0.9.4 — TRUE animation mix -------------------------------------------
   Principle:
   - JS/scroll keeps the macro journey, scene depth and entrances.
   - CSS animations below run on their own once a world is active.
   - Independent translate/rotate properties deliberately compose with the
     scroll-driven transform property instead of replacing it. */
@media (min-width:801px) and (prefers-reduced-motion:no-preference){
  /* REPAIR: scroll positions the machine; the scene itself stays alive. */
  .world--repair.is-active-world .repair-machine{
    animation:repairIndependentFloat 5.2s ease-in-out infinite alternate;
  }
  .world--repair.is-active-world .repair-scanline{
    animation:repairIndependentScan 3.6s cubic-bezier(.45,0,.18,1) .3s infinite;
  }
  .world--repair.is-active-world .repair-ring.ring-a{
    animation:repairIndependentRingA 15s linear infinite;
  }
  .world--repair.is-active-world .repair-ring.ring-b{
    animation:repairIndependentRingB 22s linear infinite reverse;
  }
  .world--repair.is-active-world .repair-crosshair{
    animation:repairIndependentCrosshair 12s linear infinite;
  }
  .world--repair.is-active-world .repair-callout{
    animation:repairIndependentCallout 4.8s ease-in-out infinite alternate;
  }
  .world--repair.is-active-world .repair-callout.callout-b{animation-delay:.7s}
  .world--repair.is-active-world .repair-callout.callout-c{animation-delay:1.4s}
  @keyframes repairIndependentFloat{
    from{translate:0 5px;filter:drop-shadow(0 43px 66px rgba(0,0,0,.60)) brightness(.98)}
    to{translate:0 -9px;filter:drop-shadow(0 55px 82px rgba(0,0,0,.70)) brightness(1.045)}
  }
  @keyframes repairIndependentScan{
    0%{top:11%;opacity:0}
    10%{opacity:.12}
    23%{opacity:.78}
    76%{opacity:.62}
    94%{opacity:.10}
    100%{top:78%;opacity:0}
  }
  @keyframes repairIndependentRingA{from{rotate:0deg}to{rotate:360deg}}
  @keyframes repairIndependentRingB{from{rotate:0deg}to{rotate:360deg}}
  @keyframes repairIndependentCrosshair{
    from{rotate:0deg;opacity:.46}
    50%{opacity:.76}
    to{rotate:360deg;opacity:.46}
  }
  @keyframes repairIndependentCallout{
    from{translate:0 2px;box-shadow:0 12px 25px rgba(0,0,0,.12)}
    to{translate:0 -4px;box-shadow:0 18px 34px rgba(226,197,121,.09)}
  }

  /* VDE: scroll unveils the information architecture; measurement keeps
     working after the visitor stops the wheel. */
  .world--vde.is-active-world .vde-orbit.orbit-one{
    animation:vdeIndependentOrbitA 18s linear infinite;
  }
  .world--vde.is-active-world .vde-orbit.orbit-two{
    animation:vdeIndependentOrbitB 25s linear infinite reverse;
  }
  .world--vde.is-active-world .vde-wave-path{
    animation:vdeIndependentWave 4.8s cubic-bezier(.16,1,.3,1) .25s infinite;
  }
  .world--vde.is-active-world .vde-core{
    animation:vdeIndependentCore 3.2s ease-in-out infinite alternate;
  }
  .world--vde.is-active-world .vde-stat{
    animation:vdeIndependentStat 4.4s ease-in-out infinite alternate;
  }
  .world--vde.is-active-world .vde-stat.stat-b{animation-delay:.55s}
  .world--vde.is-active-world .vde-stat.stat-c{animation-delay:1.1s}
  @keyframes vdeIndependentOrbitA{from{rotate:0deg}to{rotate:360deg}}
  @keyframes vdeIndependentOrbitB{from{rotate:0deg}to{rotate:360deg}}
  @keyframes vdeIndependentWave{
    0%{stroke-dashoffset:1100;opacity:.12}
    34%{stroke-dashoffset:0;opacity:.74}
    75%{stroke-dashoffset:0;opacity:.58}
    100%{stroke-dashoffset:-1100;opacity:.10}
  }
  @keyframes vdeIndependentCore{
    from{translate:0 3px;box-shadow:0 0 48px rgba(98,192,203,.08)}
    to{translate:0 -5px;box-shadow:0 0 88px rgba(98,192,203,.19)}
  }
  @keyframes vdeIndependentStat{
    from{translate:0 2px;border-color:rgba(138,216,223,.13)}
    to{translate:0 -4px;border-color:rgba(138,216,223,.29)}
  }

  /* COFFEE: scroll brings the packs on stage; afterwards they float and the
     product world keeps moving by itself. */
  .world--coffee.is-active-world .coffee-pack--classic{
    animation:coffeeIndependentClassic 5.4s ease-in-out infinite alternate;
  }
  .world--coffee.is-active-world .coffee-pack--duo{
    animation:coffeeIndependentDuo 6.1s ease-in-out .35s infinite alternate;
  }
  .world--coffee.is-active-world .coffee-sun{
    animation:coffeeIndependentSun 6.8s ease-in-out infinite alternate;
  }
  .world--coffee.is-active-world .coffee-marquee span{
    animation:coffeeIndependentTicker 14s linear infinite;
  }
  .world--coffee.is-active-world .coffee-label{
    animation:coffeeIndependentLabel 4s ease-in-out infinite alternate;
  }
  .world--coffee.is-active-world .coffee-label.label-b{animation-delay:.7s}
  .world--coffee.is-active-world .bean{
    animation:coffeeIndependentBean var(--bean-dur,6s) ease-in-out var(--bean-delay,0s) infinite alternate;
  }
  @keyframes coffeeIndependentClassic{from{translate:0 5px}to{translate:0 -11px}}
  @keyframes coffeeIndependentDuo{from{translate:0 -4px}to{translate:0 10px}}
  @keyframes coffeeIndependentSun{
    from{filter:blur(0) brightness(1);opacity:.84}
    to{filter:blur(1.5px) brightness(1.08);opacity:1}
  }
  @keyframes coffeeIndependentTicker{from{translate:0 0}to{translate:-28vw 0}}
  @keyframes coffeeIndependentLabel{
    from{translate:0 2px;box-shadow:0 10px 18px rgba(91,58,18,.02)}
    to{translate:0 -5px;box-shadow:0 18px 28px rgba(91,58,18,.16)}
  }
  @keyframes coffeeIndependentBean{
    from{translate:0 0}
    to{translate:var(--bean-dx,12px) var(--bean-dy,-18px)}
  }

  /* COACHING: the machine enters with scroll, while the workshop breathes. */
  .world--coaching.is-active-world .coaching-visual>img{
    animation:coachIndependentMachine 5.8s ease-in-out infinite alternate;
  }
  .world--coaching.is-active-world .coach-halo{
    animation:coachIndependentHalo 4.8s ease-in-out infinite alternate;
  }
  .world--coaching.is-active-world .coach-note{
    animation:coachIndependentNote 3.8s ease-in-out infinite alternate;
  }
  .world--coaching.is-active-world .coach-note.note-b{animation-delay:.4s}
  .world--coaching.is-active-world .coach-note.note-c{animation-delay:.8s}
  .world--coaching.is-active-world .coach-note.note-d{animation-delay:1.2s}
  @keyframes coachIndependentMachine{from{translate:0 5px}to{translate:0 -8px}}
  @keyframes coachIndependentHalo{
    from{opacity:.44;filter:blur(26px)}
    to{opacity:.92;filter:blur(34px)}
  }
  @keyframes coachIndependentNote{
    from{translate:0 2px;border-color:rgba(255,255,255,.09)}
    to{translate:0 -5px;border-color:rgba(226,197,121,.25)}
  }

  /* RENTAL: scroll creates the showroom composition; lights and machines
     continue their own subtle motion. */
  .world--rental.is-active-world .rental-machine{
    animation:rentalIndependentMachine 5.6s ease-in-out infinite alternate;
  }
  .world--rental.is-active-world .rental-machine--two{animation-delay:.7s}
  .world--rental.is-active-world .rental-spot{
    animation:rentalIndependentSpot 4.6s ease-in-out infinite alternate;
  }
  .world--rental.is-active-world .spot-b{animation-delay:.8s}
  .world--rental.is-active-world .rental-label{
    animation:rentalIndependentLabel 3.7s ease-in-out infinite alternate;
  }
  @keyframes rentalIndependentMachine{
    from{translate:0 5px;filter:drop-shadow(0 40px 56px rgba(0,0,0,.52)) brightness(.99)}
    to{translate:0 -8px;filter:drop-shadow(0 54px 78px rgba(0,0,0,.70)) brightness(1.045)}
  }
  @keyframes rentalIndependentSpot{
    from{opacity:.22;filter:blur(24px);translate:-10px 0}
    to{opacity:.60;filter:blur(10px);translate:12px 0}
  }
  @keyframes rentalIndependentLabel{from{translate:0 2px}to{translate:0 -5px}}

  /* SHOP: horizontal travel remains scroll-controlled. Products themselves
     float and the cards receive an autonomous sheen. */
  .world--shop.is-active-world .shop-track article img{
    animation:shopIndependentProduct 4.7s ease-in-out infinite alternate;
  }
  .world--shop.is-active-world .shop-track article:nth-child(2) img{animation-delay:.4s}
  .world--shop.is-active-world .shop-track article:nth-child(3) img{animation-delay:.8s}
  .world--shop.is-active-world .shop-track article:nth-child(4) img{animation-delay:1.2s}
  .world--shop.is-active-world .shop-track article::before{
    content:"";
    position:absolute;
    z-index:5;
    top:-20%;bottom:-20%;
    width:34%;
    left:-50%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent);
    transform:skewX(-14deg);
    animation:shopIndependentSheen 5.8s ease-in-out infinite;
    pointer-events:none;
  }
  .world--shop.is-active-world .shop-track article:nth-child(2)::before{animation-delay:.7s}
  .world--shop.is-active-world .shop-track article:nth-child(3)::before{animation-delay:1.4s}
  .world--shop.is-active-world .shop-track article:nth-child(4)::before{animation-delay:2.1s}
  @keyframes shopIndependentProduct{
    from{translate:0 5px;filter:drop-shadow(0 20px 28px rgba(0,0,0,.32))}
    to{translate:0 -10px;filter:drop-shadow(0 34px 46px rgba(0,0,0,.50))}
  }
  @keyframes shopIndependentSheen{
    0%,18%{left:-50%;opacity:0}
    34%{opacity:1}
    62%{left:120%;opacity:.7}
    80%,100%{left:120%;opacity:0}
  }
}

@media (min-width:801px) and (prefers-reduced-motion:no-preference){
  .world--vde .vde-core.status-kick{animation:vdeStatusKick .52s cubic-bezier(.16,1,.3,1) both}
  @keyframes vdeStatusKick{
    0%{scale:1;filter:brightness(1)}
    45%{scale:1.045;filter:brightness(1.18)}
    100%{scale:1;filter:brightness(1)}
  }
}

/* V0.9.5 — faster pacing, richer VDE, unmistakable autonomous motion ----- */
@media (min-width:801px){
  /* Shorter journey: still cinematic, but visitors reach each world faster. */
  .brand-scene{height:215vh}
  .world{height:265vh}
}

/* VDE: turn the former abstract screen into a service/product story. */
.vde-process{display:flex;align-items:center;gap:8px;margin-top:25px;max-width:590px;font:700 6px/1 var(--tech);letter-spacing:.13em;color:rgba(215,251,255,.68)}
.vde-process span{display:flex;align-items:center;gap:6px;white-space:nowrap}
.vde-process span b{font:400 12px/1 var(--display);color:var(--cyan);opacity:.9}
.vde-process>i{width:22px;height:1px;background:linear-gradient(90deg,rgba(138,216,223,.12),rgba(138,216,223,.52),rgba(138,216,223,.12));position:relative;overflow:hidden}
.vde-process>i::after{content:"";position:absolute;inset:0;width:45%;background:#d7fbff;box-shadow:0 0 8px rgba(138,216,223,.7);animation:vdeProcessTravel 2.6s ease-in-out infinite}
@keyframes vdeProcessTravel{0%{transform:translateX(-130%);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translateX(280%);opacity:0}}
.vde-scope{margin-top:18px;padding:11px 13px;border-left:1px solid rgba(138,216,223,.32);background:linear-gradient(90deg,rgba(138,216,223,.055),transparent 82%);max-width:560px}
.vde-scope small{display:block;font:700 6px/1 var(--tech);letter-spacing:.18em;color:var(--cyan);margin-bottom:6px}
.vde-scope span{font-size:10px;line-height:1.45;color:rgba(226,242,244,.5)}
.vde-device{position:absolute;z-index:1;right:-7%;bottom:0;width:56%;height:72%;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;overflow:visible}
.vde-device img{position:relative;z-index:2;width:100%;max-height:100%;object-fit:contain;opacity:.32;filter:saturate(.34) hue-rotate(145deg) brightness(.86) contrast(1.08) drop-shadow(0 28px 44px rgba(0,0,0,.45));mix-blend-mode:screen}
.vde-device-glow{position:absolute;z-index:0;inset:12% 5% 0;background:radial-gradient(circle at 55% 60%,rgba(138,216,223,.17),transparent 58%);filter:blur(12px)}
.vde-device-scan{position:absolute;z-index:3;left:6%;right:3%;top:10%;height:12%;background:linear-gradient(to bottom,transparent,rgba(138,216,223,.04),rgba(215,251,255,.25),rgba(138,216,223,.05),transparent);mix-blend-mode:screen;filter:blur(1px);opacity:0}
.vde-device-tag{position:absolute;z-index:6;right:2%;bottom:7%;min-width:190px;padding:11px 13px;border:1px solid rgba(138,216,223,.16);background:rgba(7,12,15,.66);backdrop-filter:blur(12px)}
.vde-device-tag small{display:block;font:700 6px/1 var(--tech);letter-spacing:.16em;color:rgba(138,216,223,.58)}
.vde-device-tag strong{display:block;font:500 18px/1 var(--display);margin:6px 0;color:#d7fbff}
.vde-device-tag span{font-size:9px;color:rgba(226,242,244,.48)}
.world--vde.is-entered .vde-device img{animation:vdeDeviceAlive 5.8s ease-in-out infinite alternate}
.world--vde.is-entered .vde-device-scan{animation:vdeDeviceScan 3.2s cubic-bezier(.45,0,.18,1) .5s infinite}
.world--vde.is-entered .vde-device-tag{animation:vdeDeviceTag 4.2s ease-in-out infinite alternate}
@keyframes vdeDeviceAlive{from{translate:0 4px;opacity:.28}to{translate:0 -8px;opacity:.42}}
@keyframes vdeDeviceScan{0%{top:8%;opacity:0}13%{opacity:.18}26%{opacity:.78}78%{opacity:.62}95%{opacity:.08}100%{top:78%;opacity:0}}
@keyframes vdeDeviceTag{from{translate:0 2px;border-color:rgba(138,216,223,.13)}to{translate:0 -5px;border-color:rgba(138,216,223,.34)}}

/* COACHING: visible autonomous workshop sequence after the scene is reached. */
.coach-auto-orbit{position:absolute;z-index:1;width:72%;aspect-ratio:1;border-radius:50%;border:1px dashed rgba(226,197,121,.13);opacity:.6}
.coach-auto-orbit i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--gold2);box-shadow:0 0 15px rgba(226,197,121,.48)}
.coach-auto-orbit i:nth-child(1){left:50%;top:-4px}.coach-auto-orbit i:nth-child(2){right:7%;top:30%}.coach-auto-orbit i:nth-child(3){left:11%;bottom:20%}
.coach-live{position:absolute;z-index:7;right:3%;bottom:18%;width:190px;padding:11px 13px;border:1px solid rgba(226,197,121,.13);background:rgba(11,8,5,.63);backdrop-filter:blur(10px)}
.coach-live small{display:block;font:700 6px/1 var(--tech);letter-spacing:.17em;color:rgba(226,197,121,.48)}
.coach-live strong{display:block;font:500 20px/1 var(--display);color:var(--gold2);margin:7px 0 9px}
.coach-live>span{display:block;height:2px;background:rgba(255,255,255,.08);overflow:hidden}
.coach-live>span i{display:block;width:38%;height:100%;background:linear-gradient(90deg,transparent,var(--gold2),transparent);animation:coachLiveBar 1.9s ease-in-out infinite}
.world--coaching.is-entered .coach-auto-orbit{animation:coachAutoOrbit 12s linear infinite}
.world--coaching.is-entered .coaching-visual>img{animation:coachMachineLife 4.6s ease-in-out infinite alternate}
.world--coaching.is-entered .coach-live{animation:coachPanelLife 3.4s ease-in-out infinite alternate}
.world--coaching .coach-note.auto-focus{border-color:rgba(226,197,121,.56)!important;box-shadow:0 0 30px rgba(226,197,121,.13);scale:1.055;opacity:1!important}
@keyframes coachAutoOrbit{from{rotate:0deg}to{rotate:360deg}}
@keyframes coachMachineLife{0%{translate:0 5px;rotate:-.25deg}100%{translate:0 -10px;rotate:.35deg}}
@keyframes coachPanelLife{from{translate:0 2px;box-shadow:0 0 0 rgba(226,197,121,0)}to{translate:0 -5px;box-shadow:0 0 28px rgba(226,197,121,.08)}}
@keyframes coachLiveBar{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}

/* RENTAL: independent fleet/showroom movement, not wheel-frame animation. */
.rental-sweep{position:absolute;z-index:3;left:-30%;top:0;width:34%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,244,213,.1),transparent);transform:skewX(-12deg);opacity:0}
.rental-live{position:absolute;z-index:8;left:42%;top:9%;display:grid;grid-template-columns:10px 1fr;column-gap:8px;align-items:center;padding:10px 13px;border:1px solid rgba(255,255,255,.1);background:rgba(8,8,9,.6);backdrop-filter:blur(10px)}
.rental-live>i{grid-row:1/3;width:7px;height:7px;border-radius:50%;background:#d8b86d;box-shadow:0 0 13px rgba(226,197,121,.65)}
.rental-live small{font:700 6px/1 var(--tech);letter-spacing:.17em;color:rgba(255,255,255,.42)}
.rental-live strong{font:700 8px/1 var(--tech);letter-spacing:.13em;color:var(--gold2);margin-top:4px}
.world--rental.is-entered .rental-sweep{animation:rentalSweepAuto 4.8s ease-in-out infinite}
.world--rental.is-entered .rental-machine--one{animation:rentalMachineLifeOne 4.8s ease-in-out infinite alternate}
.world--rental.is-entered .rental-machine--two{animation:rentalMachineLifeTwo 5.4s ease-in-out .4s infinite alternate}
.world--rental.is-entered .rental-live>i{animation:rentalDot 1.25s ease-in-out infinite alternate}
.world--rental .rental-machine.auto-focus{scale:1.045;filter:drop-shadow(0 58px 82px rgba(0,0,0,.72)) brightness(1.08)!important}
.world--rental .rental-label.auto-focus{border-color:rgba(226,197,121,.44);box-shadow:0 0 26px rgba(226,197,121,.10);scale:1.04}
@keyframes rentalSweepAuto{0%,16%{left:-38%;opacity:0}28%{opacity:.75}70%{left:108%;opacity:.55}82%,100%{left:108%;opacity:0}}
@keyframes rentalMachineLifeOne{from{translate:0 7px;rotate:-.35deg}to{translate:0 -10px;rotate:.25deg}}
@keyframes rentalMachineLifeTwo{from{translate:0 -5px;rotate:.28deg}to{translate:0 9px;rotate:-.2deg}}
@keyframes rentalDot{from{opacity:.45;scale:.8}to{opacity:1;scale:1.35}}

@media(max-width:800px){
  .vde-process{flex-wrap:wrap}.vde-process>i{display:none}.vde-scope{max-width:none}.vde-device{position:absolute;right:-15%;bottom:5%;width:72%;height:46%;opacity:.45}.vde-device-tag{display:none}.coach-live,.rental-live{display:none}
}

/* V0.9.6 — DGUV-V3-first VDE world + faster page-to-page pacing -------- */
@media (min-width:801px){
  .brand-scene{height:175vh}
  .world{height:215vh}
}

/* The VDE world is deliberately device-neutral: safety, measurement,
   documentation and fleet care instead of a coffee-machine hero. */
.vde-safety-field{position:absolute;z-index:1;inset:2% -1% 1% 4%;pointer-events:none;overflow:visible}
.vde-safety-field::before{content:"";position:absolute;inset:7% 4% 8%;border:1px solid rgba(138,216,223,.08);background:radial-gradient(circle at 55% 48%,rgba(138,216,223,.07),transparent 42%);box-shadow:inset 0 0 55px rgba(138,216,223,.025)}
.vde-safety-svg{position:absolute;inset:4% 2% 4% 0;width:100%;height:92%;overflow:visible;opacity:.72;filter:drop-shadow(0 18px 28px rgba(0,0,0,.18))}
.vde-safety-svg path,.vde-safety-svg rect,.vde-safety-svg circle{fill:none;stroke:rgba(172,231,237,.34);stroke-width:2;vector-effect:non-scaling-stroke}
.vde-svg-grid path{stroke:rgba(138,216,223,.12);stroke-width:1}
.vde-svg-lines path{stroke:rgba(179,242,247,.58);stroke-dasharray:9 13;stroke-linecap:round}
.vde-svg-plug rect,.vde-svg-plug path,.vde-svg-plug circle{stroke:rgba(202,246,250,.62)}
.vde-svg-device rect,.vde-svg-device path,.vde-svg-device circle{stroke:rgba(156,218,225,.48)}
.vde-svg-shield path{stroke:rgba(215,251,255,.9);stroke-width:2.4}
.vde-svg-shield path:last-child{stroke:#d7fbff;stroke-width:3}
.vde-safety-scan{position:absolute;z-index:3;left:8%;right:7%;top:10%;height:13%;opacity:0;background:linear-gradient(to bottom,transparent,rgba(138,216,223,.03),rgba(215,251,255,.18),rgba(138,216,223,.04),transparent);filter:blur(1px);mix-blend-mode:screen}
.vde-field-label{position:absolute;z-index:5;min-width:165px;padding:10px 12px;border:1px solid rgba(138,216,223,.12);background:rgba(5,11,14,.58);backdrop-filter:blur(10px)}
.vde-field-label small{display:block;font:700 6px/1 var(--tech);letter-spacing:.17em;color:rgba(138,216,223,.52)}
.vde-field-label strong{display:block;margin:6px 0 5px;font:500 17px/1 var(--display);color:#d7fbff}
.vde-field-label span{font-size:9px;color:rgba(226,242,244,.46)}
.vde-field-label.field-a{left:1%;top:9%}.vde-field-label.field-b{right:0;top:18%}.vde-field-label.field-c{right:3%;bottom:9%}
.world--vde.is-active-world .vde-safety-scan{animation:vdeSafetyScan 3.4s cubic-bezier(.45,0,.18,1) .25s infinite}
.world--vde.is-active-world .vde-svg-lines path{animation:vdeSafetyCurrent 3.3s linear infinite}
.world--vde.is-active-world .vde-svg-lines path:nth-child(2){animation-delay:.45s}.world--vde.is-active-world .vde-svg-lines path:nth-child(3){animation-delay:.9s}
.world--vde.is-active-world .vde-svg-shield{animation:vdeSafetyShield 2.8s ease-in-out infinite alternate}
.world--vde.is-active-world .vde-svg-device.device-a{animation:vdeDeviceNodeA 4.7s ease-in-out infinite alternate}
.world--vde.is-active-world .vde-svg-device.device-b{animation:vdeDeviceNodeB 5.2s ease-in-out .6s infinite alternate}
.world--vde.is-active-world .vde-field-label{animation:vdeFieldLabel 4.1s ease-in-out infinite alternate}
.world--vde.is-active-world .vde-field-label.field-b{animation-delay:.55s}.world--vde.is-active-world .vde-field-label.field-c{animation-delay:1.1s}
@keyframes vdeSafetyScan{0%{top:8%;opacity:0}13%{opacity:.12}25%{opacity:.74}78%{opacity:.55}96%{opacity:.07}100%{top:80%;opacity:0}}
@keyframes vdeSafetyCurrent{from{stroke-dashoffset:0}to{stroke-dashoffset:-88}}
@keyframes vdeSafetyShield{from{opacity:.72;translate:0 3px}to{opacity:1;translate:0 -5px}}
@keyframes vdeDeviceNodeA{from{translate:0 3px;opacity:.5}to{translate:0 -5px;opacity:.88}}
@keyframes vdeDeviceNodeB{from{translate:0 -2px;opacity:.48}to{translate:0 5px;opacity:.84}}
@keyframes vdeFieldLabel{from{translate:0 2px;border-color:rgba(138,216,223,.11)}to{translate:0 -4px;border-color:rgba(138,216,223,.28)}}

@media(max-width:800px){
  .vde-safety-field{position:relative;inset:auto;width:100%;height:48vh;min-height:370px;margin-top:-36vh;opacity:.52}
  .vde-field-label{display:none}
}

/* V0.9.9 — organic wheel physics + longer transition blend -------------- */
html.wheel-physics{scroll-behavior:auto!important}
@media (min-width:801px) and (prefers-reduced-motion:no-preference){
  /* The next world now arrives as a broad atmospheric veil. The blend starts
     before the old scene has finished, so dark/light changes do not feel like
     a bar being pushed across the screen. */
  .world-sticky::after{
    transform:translateY(calc((1 - var(--portal,0)) * 104%)) scale(1.025);
    opacity:calc(var(--portal,0) * .94);
    filter:blur(11px) saturate(.96);
    transform-origin:center bottom;
  }
  .world-sticky{isolation:isolate}

  /* A very subtle edge haze connects one world to the next while the actual
     content remains untouched. */
  .world-sticky .world-ghost{transition:opacity .18s linear}
  .world--vde .world-sticky::before{filter:blur(7px)}
  .world--coffee .world-sticky::before{filter:blur(9px)}
}

/* V0.9.10 — softer 10-notch scroll physics -------------------------------- */
html{--scroll-energy:0}
@media (min-width:801px) and (prefers-reduced-motion:no-preference){
  .world-sticky::after{
    filter:blur(calc(11px + (var(--scroll-energy) * 6px))) saturate(calc(.96 + (var(--scroll-energy) * .04)));
    opacity:calc((var(--portal,0) * .91) + (var(--portal,0) * var(--scroll-energy) * .035));
  }
  /* Tiny motion haze while the camera is travelling. It is intentionally weak:
     it connects frames without washing out content or changing the Sweetspot. */
  .world-sticky{
    transition:filter .18s ease-out;
  }
  html.wheel-physics .world-sticky{
    filter:saturate(calc(1 - (var(--scroll-energy) * .025)));
  }
}

body.intro-active .brand-sticky{opacity:.88;transform:scale(1.012);transition:opacity 1.2s ease,transform 1.45s ease}
body:not(.intro-active) .brand-sticky{opacity:1;transform:scale(1)}


/* V0.9.11 — organic handoffs + real world CTAs --------------------------- */
/* The brand-to-repair seam deliberately overlaps both sections. The large
   blurred gradient field destroys the straight DOM edge without changing the
   content/layout of either world. */
.brand-scene{position:relative;isolation:isolate;z-index:2}
.brand-scene::before,.brand-scene::after{content:"";position:absolute;left:-5vw;right:-5vw;pointer-events:none;z-index:80}
.brand-scene::before{bottom:-24vh;height:78vh;background:
  radial-gradient(ellipse at 10% 25%,rgba(238,229,214,.98) 0 18%,rgba(238,229,214,.48) 34%,transparent 58%),
  radial-gradient(ellipse at 42% 17%,rgba(235,225,208,.92) 0 15%,rgba(184,159,125,.42) 37%,transparent 63%),
  radial-gradient(ellipse at 76% 24%,rgba(231,219,199,.92) 0 18%,rgba(137,111,78,.38) 40%,transparent 66%),
  radial-gradient(ellipse at 94% 32%,rgba(224,208,184,.82) 0 16%,rgba(92,72,51,.38) 43%,transparent 70%),
  linear-gradient(180deg,rgba(238,229,214,0) 0%,rgba(230,216,196,.42) 24%,rgba(139,117,88,.54) 48%,rgba(46,39,31,.78) 72%,rgba(9,9,9,.98) 100%);
  filter:blur(22px);transform:scale(1.06);opacity:.98}
.brand-scene::after{bottom:-30vh;height:66vh;background:
  radial-gradient(ellipse at 22% 44%,rgba(196,174,144,.42),transparent 42%),
  radial-gradient(ellipse at 62% 38%,rgba(83,66,46,.55),transparent 46%),
  radial-gradient(ellipse at 86% 54%,rgba(12,11,10,.78),transparent 50%),
  linear-gradient(180deg,transparent 0%,rgba(9,9,9,.28) 48%,rgba(9,9,9,.96) 100%);
  filter:blur(34px);opacity:.92}
.world--repair{position:relative;z-index:1}

/* CTA language stays editorial rather than looking like generic webshop buttons. */
.world-cta{position:relative;display:inline-flex;align-items:center;gap:12px;margin-top:26px;padding:12px 0 10px;font:700 8px/1 var(--tech);letter-spacing:.18em;text-transform:uppercase;isolation:isolate;overflow:hidden}
.world-cta span{position:relative;z-index:2}.world-cta i{display:block;width:54px;height:1px;background:currentColor;opacity:.42;transform-origin:left center;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .3s}.world-cta b{position:relative;z-index:2;font:400 15px/1 var(--body);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.world-cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.18;transform:scaleX(.28);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s}
.world-cta:hover i{transform:scaleX(1.28);opacity:.8}.world-cta:hover b{transform:translate(4px,-4px)}.world-cta:hover::after{transform:scaleX(1);opacity:.48}
.world-cta--gold{color:var(--gold2)}.world-cta--cyan{color:var(--cyan)}.world-cta--coffee{color:#8a6023}

/* Intro handoff is now driven by the actual canvas/background transition, not
   by a nearly invisible CSS overlay alone. */
.nocs-intro.warming::after{opacity:.34;transform:translateY(8px) scale(1.02)}
.nocs-intro.site-visible::after{opacity:.66;transform:translateY(-2px) scale(1.015)}
.nocs-intro.site-visible{background:rgba(239,231,219,.18)}

@media(max-width:800px){
  .brand-scene::before{bottom:-12vh;height:48vh;filter:blur(16px)}
  .brand-scene::after{bottom:-15vh;height:42vh;filter:blur(22px)}
  .world-cta{margin-top:20px}
}


/* V0.9.12 — cinematic brand reveal + stronger organic handoffs ----------- */
/* The previous decorative CSS beans are intentionally removed from Home.
   A photographic bean field now covers the real MSK lockup during handoff. */
@property --wipe-edge{syntax:"<percentage>";inherits:false;initial-value:-7%}
.brand-reveal{position:absolute;inset:0;z-index:12;pointer-events:none;overflow:hidden;opacity:1;visibility:visible;transition:opacity .75s ease,visibility .75s ease}
.brand-bean-curtain{position:absolute;inset:-3%;--wipe-edge:-7%;background-image:linear-gradient(180deg,rgba(22,12,6,.05),rgba(7,4,2,.18)),url('assets/hero/coffee-bean-field.jpg');background-size:cover;background-position:center;filter:saturate(.94) contrast(1.06) brightness(.88);transform:scale(1.045);clip-path:polygon(var(--wipe-edge) 0,100% 0,100% 100%,var(--wipe-edge) 100%,calc(var(--wipe-edge) - 3%) 88%,calc(var(--wipe-edge) - 8%) 73%,calc(var(--wipe-edge) - 4%) 57%,calc(var(--wipe-edge) - 9%) 39%,calc(var(--wipe-edge) - 3%) 20%);will-change:clip-path,filter,transform}
.brand-bean-curtain::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,rgba(214,163,92,.08),transparent 38%),radial-gradient(circle at 50% 50%,transparent 45%,rgba(6,4,2,.26) 100%);mix-blend-mode:screen;opacity:.48}
.brand-wipe-hand{position:absolute;z-index:4;top:-8vh;left:-42vw;width:min(43vw,760px);max-width:none;filter:drop-shadow(24px 34px 34px rgba(0,0,0,.42));opacity:0;transform:rotate(-5deg) scale(1.02);transform-origin:40% 40%;will-change:left,transform,opacity}
.brand-wipe-feather{position:absolute;z-index:3;top:-12%;bottom:-12%;left:-20vw;width:26vw;background:linear-gradient(90deg,transparent 0%,rgba(239,231,218,.08) 25%,rgba(239,231,218,.45) 62%,rgba(239,231,218,0) 100%);filter:blur(28px);opacity:0;transform:skewX(-6deg);will-change:left,opacity}
body.brand-reveal-active .brand-bean-curtain{animation:brandBeanSweep 3.25s cubic-bezier(.18,.72,.18,1) .48s forwards}
body.brand-reveal-active .brand-wipe-hand{animation:brandHandSweep 3.35s cubic-bezier(.16,.78,.17,1) .28s forwards}
body.brand-reveal-active .brand-wipe-feather{animation:brandFeatherSweep 3.25s cubic-bezier(.16,.78,.17,1) .44s forwards}
body.brand-reveal-active .brand-lockup{animation:brandLogoReveal 2.5s cubic-bezier(.16,1,.3,1) .9s both}
body.brand-reveal-done .brand-reveal{opacity:0;visibility:hidden}
@keyframes brandBeanSweep{0%{--wipe-edge:-7%;filter:saturate(.94) contrast(1.06) brightness(.84);transform:scale(1.045)}18%{--wipe-edge:8%}55%{--wipe-edge:55%;filter:saturate(.98) contrast(1.045) brightness(.9)}82%{--wipe-edge:86%}100%{--wipe-edge:111%;filter:saturate(.98) contrast(1.03) brightness(.94);transform:scale(1.02)}}
@keyframes brandHandSweep{0%{left:-42vw;opacity:0;transform:translateY(1vh) rotate(-7deg) scale(1.03)}9%{opacity:1}30%{transform:translateY(-1vh) rotate(-3.5deg) scale(1.015)}58%{transform:translateY(1.2vh) rotate(1deg) scale(1)}86%{opacity:1}100%{left:108vw;opacity:0;transform:translateY(-1vh) rotate(4deg) scale(.985)}}
@keyframes brandFeatherSweep{0%{left:-20vw;opacity:0}12%{opacity:.48}55%{opacity:.72}88%{opacity:.36}100%{left:103vw;opacity:0}}
@keyframes brandLogoReveal{0%{filter:blur(8px);opacity:.22}42%{filter:blur(2px);opacity:.8}100%{filter:blur(0);opacity:1}}

/* Stronger cross-world handoffs. The transition begins earlier and is wider,
   so the user sees atmosphere changing before the DOM section boundary. */
@media (min-width:801px) and (prefers-reduced-motion:no-preference){
  .world-sticky::after{transform:translateY(calc((1 - var(--portal,0)) * 91%)) scale(1.085);opacity:calc(var(--portal,0) * .985);filter:blur(calc(20px + (var(--scroll-energy) * 10px))) saturate(calc(.93 + (var(--scroll-energy) * .05)));mask-image:linear-gradient(to top,black 0 48%,rgba(0,0,0,.92) 64%,rgba(0,0,0,.58) 78%,transparent 100%)}
  .world:not(.world--vde):not(.world--coffee) .world-sticky::before{content:"";position:absolute;z-index:58;left:-12%;right:-12%;bottom:-24%;height:72%;pointer-events:none;background:radial-gradient(ellipse at 18% 82%,color-mix(in srgb,var(--next-color,#080808) 68%,transparent),transparent 48%),radial-gradient(ellipse at 54% 88%,color-mix(in srgb,var(--next-color,#080808) 82%,transparent),transparent 52%),radial-gradient(ellipse at 88% 76%,color-mix(in srgb,var(--next-color,#080808) 62%,transparent),transparent 45%);filter:blur(38px);opacity:calc(var(--portal,0) * .72);transform:translateY(calc((1 - var(--portal,0)) * 28%)) scale(1.06);will-change:opacity,transform}
  .world--vde .world-sticky::before{filter:blur(18px);opacity:calc(.35 + var(--portal,0) * .65)}
  .world--coffee .world-sticky::before{filter:blur(20px);opacity:calc(.42 + var(--portal,0) * .58)}
}

/* Home -> Repair gets an even deeper overlap so the horizontal section seam
   disappears inside light, warm haze and dark workshop atmosphere. */
.brand-scene::before{bottom:-34vh!important;height:98vh!important;filter:blur(32px)!important;transform:scale(1.12)!important}
.brand-scene::after{bottom:-42vh!important;height:92vh!important;filter:blur(48px)!important;opacity:.96!important}

/* Clearer experience CTA: still editorial, now unmistakably clickable. */
.world-cta{width:max-content;min-width:230px;margin-top:30px;padding:14px 16px 13px;border:1px solid color-mix(in srgb,currentColor 48%,transparent);background:color-mix(in srgb,currentColor 7%,transparent);backdrop-filter:blur(12px);gap:14px;box-shadow:0 16px 36px rgba(0,0,0,.08);transition:transform .4s cubic-bezier(.16,1,.3,1),background .35s,border-color .35s,box-shadow .35s}
.world-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 0 42%,color-mix(in srgb,currentColor 13%,transparent) 50%,transparent 58%);transform:translateX(-120%);transition:transform .75s cubic-bezier(.16,1,.3,1)}
.world-cta::after{display:none}.world-cta i{margin-left:auto;width:42px}.world-cta b{font-size:16px}.world-cta:hover{transform:translateY(-3px);background:color-mix(in srgb,currentColor 12%,transparent);border-color:color-mix(in srgb,currentColor 72%,transparent);box-shadow:0 20px 46px rgba(0,0,0,.16)}.world-cta:hover::before{transform:translateX(120%)}

@media(max-width:800px){
  .brand-wipe-hand{top:4vh;width:78vw;left:-76vw}.brand-wipe-feather{width:42vw}
  .brand-bean-curtain{background-position:center;background-size:cover}
  body.brand-reveal-active .brand-wipe-hand{animation-name:brandHandSweepMobile}
  .brand-scene::before{bottom:-18vh!important;height:60vh!important;filter:blur(22px)!important}.brand-scene::after{bottom:-22vh!important;height:56vh!important;filter:blur(32px)!important}
  .world-cta{min-width:210px;padding:13px 14px}
}
@keyframes brandHandSweepMobile{0%{left:-76vw;opacity:0;transform:rotate(-7deg) scale(1.02)}10%{opacity:1}84%{opacity:1}100%{left:104vw;opacity:0;transform:rotate(3deg) scale(.98)}}


/* V0.9.13 — physical coffee reveal + seam-hiding bridges ---------------- */
/* Home reveal is now a real-time canvas animation. No full-screen bean photo
   is swapped in: individual beans are rendered and physically displaced while
   the real DOM logo underneath is revealed. */
.brand-reveal{position:absolute;inset:0;z-index:12;overflow:hidden;pointer-events:none;background:transparent;opacity:1;visibility:visible;transition:opacity .8s ease,visibility .8s ease}
.brand-bean-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;filter:saturate(1.04) contrast(1.035);will-change:contents}
.brand-wipe-hand{position:absolute;z-index:5;left:-50vw;top:12vh;width:min(44vw,760px);max-width:none;opacity:0;transform-origin:44% 58%;filter:drop-shadow(22px 30px 32px rgba(9,4,1,.46)) saturate(.96) contrast(1.04);will-change:left,top,transform,opacity}
.brand-wipe-shadow{position:absolute;z-index:3;width:34vw;height:58vh;left:-45vw;top:18vh;border-radius:50%;background:radial-gradient(ellipse,rgba(17,8,3,.28),rgba(17,8,3,.10) 42%,transparent 72%);filter:blur(24px);opacity:calc((1 - var(--wipe-progress,0)) * .32);pointer-events:none}
.brand-wipe-dust{position:absolute;z-index:4;inset:0;background:radial-gradient(ellipse at calc(-8% + var(--sweep-progress,0) * 120%) 51%,rgba(109,63,27,.14),transparent 18%);mix-blend-mode:multiply;opacity:calc((1 - var(--wipe-progress,0)) * .8);filter:blur(8px)}
.brand-reveal.is-finished,.brand-reveal-done .brand-reveal{opacity:0;visibility:hidden}
body.brand-reveal-active .brand-lockup{animation:brandLogoRevealPhysical 4.3s cubic-bezier(.16,1,.3,1) both}
@keyframes brandLogoRevealPhysical{0%{opacity:.04;filter:blur(13px);transform:scale(.975)}34%{opacity:.16;filter:blur(8px)}58%{opacity:.72;filter:blur(2.4px);transform:scale(.992)}100%{opacity:1;filter:blur(0);transform:scale(1)}}
/* Disable the V0.9.12 photographic curtain/keyframe system. */
.brand-bean-curtain,.brand-wipe-feather{display:none!important}

/* A bridge is a zero-height sibling that visually spans BOTH adjacent
   sections. This fixes the actual DOM seam rather than only tinting one sticky
   viewport, which is why the VDE->Coffee and Coffee->Coaching borders are now
   genuinely hidden. */
.world-transition-bridge{position:relative;height:0;z-index:95;pointer-events:none;isolation:isolate}
.world-transition-bridge::before,.world-transition-bridge::after{content:"";position:absolute;left:-8vw;right:-8vw;top:-52vh;height:104vh;pointer-events:none;transform:scale(1.04)}
.world-transition-bridge::before{filter:blur(34px);opacity:.98}
.world-transition-bridge::after{top:-46vh;height:92vh;filter:blur(58px);opacity:.72;mix-blend-mode:soft-light}
.bridge-vde-coffee::before{background:
  radial-gradient(ellipse at 12% 42%,rgba(30,62,67,.72),transparent 42%),
  radial-gradient(ellipse at 72% 46%,rgba(197,174,137,.78),transparent 48%),
  radial-gradient(ellipse at 48% 64%,rgba(236,222,199,.94),transparent 46%),
  linear-gradient(180deg,transparent 0%,rgba(13,20,24,.72) 13%,rgba(54,60,57,.78) 31%,rgba(147,129,101,.82) 50%,rgba(214,195,163,.92) 68%,rgba(231,215,189,.84) 84%,transparent 100%)}
.bridge-vde-coffee::after{background:linear-gradient(105deg,transparent 4%,rgba(119,199,206,.14) 24%,rgba(255,244,224,.38) 52%,rgba(187,137,73,.20) 78%,transparent 96%)}
.bridge-coffee-coaching::before{background:
  radial-gradient(ellipse at 20% 40%,rgba(236,220,193,.92),transparent 42%),
  radial-gradient(ellipse at 71% 47%,rgba(111,75,38,.66),transparent 48%),
  radial-gradient(ellipse at 52% 65%,rgba(34,22,14,.88),transparent 48%),
  linear-gradient(180deg,transparent 0%,rgba(231,215,189,.78) 13%,rgba(188,154,107,.80) 32%,rgba(101,66,34,.86) 52%,rgba(37,25,17,.94) 70%,rgba(17,13,10,.94) 86%,transparent 100%)}
.bridge-coffee-coaching::after{background:linear-gradient(112deg,transparent 5%,rgba(255,243,218,.34) 24%,rgba(174,112,51,.30) 54%,rgba(34,20,12,.52) 82%,transparent 96%)}

@media(max-width:800px){
  .brand-wipe-hand{width:min(82vw,650px)}
  .world-transition-bridge::before{top:-34vh;height:68vh;filter:blur(24px)}
  .world-transition-bridge::after{top:-30vh;height:60vh;filter:blur(38px)}
}
@media(prefers-reduced-motion:reduce){.brand-reveal{display:none}.world-transition-bridge::before,.world-transition-bridge::after{filter:blur(18px)}}
body.brand-reveal-active .brand-wipe-hand{animation:none!important}

/* V0.9.15 — seamless real filmed coffee reveal --------------------------
   No poster/final-frame image exists before playback. The reveal layer is
   completely invisible until the real MP4 fires `playing`. At the end the
   actual decoded video frame is frozen in place, so there is no MP4->PNG
   quality or timing switch. */
.brand-video-reveal{
  position:absolute;
  inset:0;
  z-index:12;
  display:block;
  overflow:hidden;
  pointer-events:none;
  background:transparent;
  opacity:0;
  visibility:hidden;
  transition:none;
}
.brand-reveal-video{
  position:absolute;
  left:0;
  right:0;
  top:-11%;
  bottom:auto;
  z-index:2;
  width:100%;
  height:111%;
  display:block;
  object-fit:cover;
  object-position:center 82%;
  background:transparent;
  opacity:1;
  filter:none;
  image-rendering:auto;
}
.brand-video-vignette{display:none!important}
.brand-video-reveal.is-playing,
.brand-video-reveal.is-frozen{
  opacity:1;
  visibility:visible;
}
body.brand-video-preparing .brand-lockup,
body.brand-video-preparing .brand-corner,
body.brand-video-preparing .brand-scrollcue,
body.brand-video-preparing .brand-atmosphere{opacity:0!important;visibility:hidden!important}
body.brand-video-preparing .brand-paper,
body.brand-video-preparing .brand-blueprint{transition:opacity .3s ease}
body.brand-video-active{overflow:hidden}
body.brand-video-active .brand-scrollcue{opacity:0!important;visibility:hidden}
body.brand-video-frozen .brand-scrollcue{
  z-index:24;
  bottom:24px;
  min-width:290px;
  padding:10px 18px 11px;
  flex-direction:row;
  justify-content:center;
  gap:13px;
  color:#f3d79d;
  background:linear-gradient(180deg,rgba(14,10,7,.74),rgba(8,6,4,.58));
  border:1px solid rgba(226,197,121,.42);
  border-radius:999px;
  box-shadow:0 12px 36px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(14px) saturate(1.08);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  text-shadow:0 2px 13px rgba(0,0,0,.82);
}
body.brand-video-frozen .brand-scrollcue::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  width:1px;
  height:10px;
  background:linear-gradient(to bottom,rgba(226,197,121,.75),rgba(226,197,121,0));
}
body.brand-video-frozen .brand-scrollcue em{
  font-size:8px;
  letter-spacing:.24em;
  color:#f3d79d;
}
body.brand-video-frozen .cue-mouse{
  flex:0 0 auto;
  width:22px;
  height:34px;
  padding-top:6px;
  border-color:rgba(241,213,154,.78);
  background:rgba(255,255,255,.035);
  box-shadow:0 0 0 1px rgba(0,0,0,.12),0 0 18px rgba(226,197,121,.08);
  backdrop-filter:none;
}
body.brand-video-frozen .cue-mouse b{
  background:#f1d59a;
  box-shadow:0 0 12px rgba(241,213,154,.55);
}
body.brand-video-active .brand-lockup,
body.brand-video-frozen .brand-lockup{opacity:0!important}
body.brand-video-active .brand-corner,
body.brand-video-frozen .brand-corner{opacity:0!important}
/* Old synthetic reveal layers stay retired. */
.brand-bean-canvas,.brand-wipe-hand,.brand-wipe-shadow,.brand-wipe-dust,.brand-bean-curtain,.brand-wipe-feather,.brand-video-hold-frame{display:none!important}

@media(max-width:800px){
  .brand-reveal-video{top:-7%;height:107%;object-position:center 72%}
  body.brand-video-frozen .brand-scrollcue{bottom:16px;min-width:250px;padding:9px 14px 10px}.brand-scrollcue em{font-size:7px;letter-spacing:.18em}
}
@media(prefers-reduced-motion:reduce){
  .brand-video-reveal{display:none!important}
}


/* V0.9.19 — controlled transition geometry + higher hero video -----------
   Same visual language, but every handoff now lives inside a bounded zone.
   This prevents the haze from occupying half a world or changing size wildly. */
@media (min-width:801px) and (prefers-reduced-motion:no-preference){
  /* Standard world portal: only the lower part of the viewport participates. */
  .world-sticky::after{
    top:auto!important;
    bottom:-4vh!important;
    left:-4vw!important;
    right:-4vw!important;
    height:58vh!important;
    transform:translateY(calc((1 - var(--portal,0)) * 102%)) scale(1.035)!important;
    filter:blur(calc(14px + (var(--scroll-energy) * 5px))) saturate(.97)!important;
    opacity:calc(var(--portal,0) * .94)!important;
    mask-image:linear-gradient(to top,black 0 46%,rgba(0,0,0,.92) 64%,rgba(0,0,0,.48) 82%,transparent 100%)!important;
  }
  .world:not(.world--vde):not(.world--coffee) .world-sticky::before{
    bottom:-12%!important;
    height:48%!important;
    filter:blur(26px)!important;
    opacity:calc(var(--portal,0) * .56)!important;
    transform:translateY(calc((1 - var(--portal,0)) * 24%)) scale(1.035)!important;
  }

  /* Home -> Repair: still organic, but no longer a giant 90-100vh cloud. */
  .brand-scene::before{
    bottom:-22vh!important;
    height:60vh!important;
    filter:blur(24px)!important;
    transform:scale(1.055)!important;
    opacity:.94!important;
  }
  .brand-scene::after{
    bottom:-25vh!important;
    height:52vh!important;
    filter:blur(31px)!important;
    opacity:.86!important;
  }

  /* Explicit seam bridges: centered around the seam and identical in size. */
  .world-transition-bridge::before,.world-transition-bridge::after{
    left:-5vw!important;
    right:-5vw!important;
    transform:scale(1.015)!important;
  }
  .world-transition-bridge::before{
    top:-30vh!important;
    height:60vh!important;
    filter:blur(24px)!important;
    opacity:.92!important;
  }
  .world-transition-bridge::after{
    top:-24vh!important;
    height:48vh!important;
    filter:blur(34px)!important;
    opacity:.54!important;
  }
}

@media(max-width:800px){
  .brand-scene::before{bottom:-13vh!important;height:40vh!important;filter:blur(18px)!important}
  .brand-scene::after{bottom:-15vh!important;height:34vh!important;filter:blur(24px)!important}
  .world-transition-bridge::before{top:-23vh!important;height:46vh!important;filter:blur(19px)!important}
  .world-transition-bridge::after{top:-18vh!important;height:36vh!important;filter:blur(27px)!important}
}


/* V0.9.20 — hero video final vertical centering --------------------------
   The filmed reveal is intentionally enlarged upward so the cleared MSK
   logo lands optically in the center of the viewport instead of hanging
   close to the lower edge. No other page geometry is changed. */
@media (min-width:801px){
  .brand-reveal-video{
    top:-24%!important;
    height:124%!important;
    object-position:center center!important;
  }
}
@media (max-width:800px){
  .brand-reveal-video{
    top:-14%!important;
    height:114%!important;
    object-position:center center!important;
  }
}

/* V0.9.22 — compact controlled seams + final hero centering ---------------
   Transition geometry is intentionally centralized here. No transition is
   allowed to grow into a half-screen haze wall anymore. */
@media (min-width:801px) and (prefers-reduced-motion:no-preference){
  :root{
    --msk-seam-main:24vh;
    --msk-seam-soft:18vh;
  }

  /* Standard handoff inside every world: narrow and late. */
  .world-sticky::after{
    top:auto!important;
    bottom:-2vh!important;
    left:-2vw!important;
    right:-2vw!important;
    height:var(--msk-seam-main)!important;
    transform:translateY(calc((1 - var(--portal,0)) * 106%)) scale(1.012)!important;
    filter:blur(13px) saturate(.98)!important;
    opacity:calc(var(--portal,0) * .88)!important;
    mask-image:linear-gradient(to top,black 0 48%,rgba(0,0,0,.82) 68%,rgba(0,0,0,.34) 84%,transparent 100%)!important;
  }

  .world:not(.world--vde):not(.world--coffee) .world-sticky::before{
    bottom:-5%!important;
    height:22%!important;
    filter:blur(15px)!important;
    opacity:calc(var(--portal,0) * .40)!important;
    transform:translateY(calc((1 - var(--portal,0)) * 32%)) scale(1.015)!important;
  }

  /* Home -> Repair: one compact feathered seam, no milky wall. */
  .brand-scene::before{
    bottom:-8vh!important;
    height:26vh!important;
    filter:blur(14px)!important;
    transform:scale(1.02)!important;
    opacity:.78!important;
  }
  .brand-scene::after{
    bottom:-7vh!important;
    height:18vh!important;
    filter:blur(19px)!important;
    opacity:.48!important;
  }

  /* Explicit bridges such as VDE -> Coffee and Coffee -> Coaching. */
  .world-transition-bridge::before,.world-transition-bridge::after{
    left:-2vw!important;
    right:-2vw!important;
    transform:scale(1.008)!important;
  }
  .world-transition-bridge::before{
    top:-12vh!important;
    height:24vh!important;
    filter:blur(14px)!important;
    opacity:.76!important;
  }
  .world-transition-bridge::after{
    top:-9vh!important;
    height:18vh!important;
    filter:blur(20px)!important;
    opacity:.34!important;
  }

  /* Move the filmed composition substantially upward. The video is enlarged
     just enough to avoid exposing an edge while the logo settles centrally. */
  .brand-reveal-video{
    top:-36%!important;
    height:136%!important;
    object-position:center center!important;
  }
}

@media(max-width:800px){
  .brand-scene::before{bottom:-6vh!important;height:22vh!important;filter:blur(12px)!important;opacity:.76!important}
  .brand-scene::after{bottom:-5vh!important;height:16vh!important;filter:blur(16px)!important;opacity:.42!important}
  .world-transition-bridge::before{top:-10vh!important;height:20vh!important;filter:blur(12px)!important;opacity:.72!important}
  .world-transition-bridge::after{top:-7vh!important;height:14vh!important;filter:blur(17px)!important;opacity:.30!important}
  .brand-reveal-video{top:-24%!important;height:124%!important;object-position:center center!important}
}


/* V0.9.24 — bounded hero video + live calibration -----------------------
   The reveal layer is ALWAYS clipped to the active sticky viewport.
   Positioning happens inside the video via object-position/scale only;
   the video container itself never grows beyond the hero. */
.brand-sticky{isolation:isolate}
.brand-video-reveal{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
  clip-path:inset(0)!important;
  contain:paint!important;
}
.brand-reveal-video{
  --msk-video-x:50%;
  --msk-video-y:50%;
  --msk-video-scale:1;
  position:absolute!important;
  inset:0!important;
  top:0!important;
  left:0!important;
  right:auto!important;
  bottom:auto!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:var(--msk-video-x) var(--msk-video-y)!important;
  transform:scale(var(--msk-video-scale))!important;
  transform-origin:center center!important;
}

.video-tune-panel{
  position:fixed;z-index:9000;right:18px;bottom:18px;width:min(360px,calc(100vw - 36px));
  padding:16px 16px 14px;border:1px solid rgba(226,197,121,.48);border-radius:16px;
  color:#f8ead0;background:rgba(10,8,6,.92);box-shadow:0 20px 60px rgba(0,0,0,.48);
  backdrop-filter:blur(18px) saturate(1.1);font-family:var(--tech);display:none;
}
body.video-tune-mode .video-tune-panel{display:block}
.video-tune-panel h3{margin:0 0 5px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#f1d59a}
.video-tune-panel p{margin:0 0 14px;font:500 10px/1.45 var(--body);color:rgba(255,255,255,.68)}
.video-tune-row{display:grid;grid-template-columns:72px 1fr 52px;align-items:center;gap:10px;margin:10px 0}
.video-tune-row label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.video-tune-row input[type=range]{width:100%;accent-color:#d4ad66}
.video-tune-row output{font-size:10px;text-align:right;color:#f1d59a}
.video-tune-actions{display:flex;gap:8px;margin-top:14px}
.video-tune-actions button{flex:1;border:1px solid rgba(226,197,121,.35);border-radius:999px;padding:8px 10px;background:rgba(255,255,255,.04);color:#f1d59a;font:700 8px/1 var(--tech);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.video-tune-actions button:hover{background:rgba(226,197,121,.12)}
.video-tune-values{margin-top:10px!important;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);font-family:monospace!important;color:#fff!important;user-select:text}
body.video-tune-mode .brand-scrollcue{opacity:0!important;visibility:hidden!important}
body.video-tune-mode .brand-lockup,body.video-tune-mode .brand-corner,body.video-tune-mode .brand-atmosphere{opacity:0!important;visibility:hidden!important}
body.video-tune-mode .brand-video-reveal{opacity:1!important;visibility:visible!important}
@media(max-width:800px){.video-tune-panel{right:10px;bottom:10px;width:calc(100vw - 20px)}}

/* V0.9.25 — final hero micro-alignment
   Move only the video crop about ~5 mm upward on desktop.
   The reveal container remains exactly clipped to the 100svh hero. */
@media (min-width:801px){
  .brand-reveal-video{
    --msk-video-y:64%!important;
  }
}


/* V0.9.26 — MATERIAL SEAM transition system -----------------------------
   Replaces the previous translucent haze with a narrow, layered and opaque
   handoff. The exact section border is always hidden inside a solid core,
   while only the outer edges feather into the neighbouring worlds.
   IMPORTANT: hero/video composition from V0.9.25 is intentionally untouched. */
@media (min-width:801px) and (prefers-reduced-motion:no-preference){
  :root{
    --msk-seam-height:14vh;
    --msk-seam-core:4vh;
  }

  /* Retire the old broad atmospheric helper layers. */
  .world-sticky::before{display:none!important}

  /* Scroll-linked portal inside each world: compact, dense, late. */
  .world-sticky::after{
    top:auto!important;
    bottom:-1.5vh!important;
    left:-1vw!important;
    right:-1vw!important;
    height:16vh!important;
    opacity:var(--portal,0)!important;
    transform:translateY(calc((1 - var(--portal,0)) * 112%)) scale(1.006)!important;
    filter:blur(4px) saturate(.98)!important;
    mask-image:none!important;
    -webkit-mask-image:none!important;
    background:var(--msk-material-portal, var(--portal-gradient))!important;
    box-shadow:0 8px 22px color-mix(in srgb,var(--next-color,#080808) 82%,transparent)!important;
  }

  .world--repair{--msk-material-portal:linear-gradient(to bottom,
    transparent 0%, rgba(9,13,15,.20) 16%, rgba(11,17,20,.72) 38%,
    #0d1418 64%, #0d1418 100%)}
  .world--vde{--msk-material-portal:linear-gradient(to bottom,
    transparent 0%, rgba(118,108,91,.24) 14%, rgba(181,166,140,.72) 38%,
    #e7d7bd 66%, #e7d7bd 100%)}
  .world--coffee{--msk-material-portal:linear-gradient(to bottom,
    transparent 0%, rgba(105,76,48,.24) 14%, rgba(62,42,27,.78) 38%,
    #110d0a 66%, #110d0a 100%)}
  .world--coaching{--msk-material-portal:linear-gradient(to bottom,
    transparent 0%, rgba(18,17,17,.22) 16%, rgba(12,12,14,.80) 40%,
    #0b0b0d 66%, #0b0b0d 100%)}
  .world--rental{--msk-material-portal:linear-gradient(to bottom,
    transparent 0%, rgba(13,12,10,.22) 16%, rgba(9,9,9,.82) 40%,
    #080808 66%, #080808 100%)}

  /* HOME -> REPAIR.  The exact DOM seam lies inside an opaque black core. */
  .brand-scene::before{
    left:-1vw!important;right:-1vw!important;
    bottom:-7vh!important;height:14vh!important;
    opacity:1!important;filter:blur(4px)!important;transform:none!important;
    background:linear-gradient(to bottom,
      rgba(238,229,214,0) 0%,
      rgba(151,124,88,.16) 13%,
      rgba(77,55,34,.52) 29%,
      rgba(30,22,15,.90) 44%,
      #090909 58%,
      #090909 100%)!important;
    box-shadow:0 12px 28px rgba(0,0,0,.52)!important;
  }
  .brand-scene::after{
    left:-1vw!important;right:-1vw!important;
    bottom:-2vh!important;height:4vh!important;
    opacity:1!important;filter:blur(3px)!important;transform:none!important;
    background:#090909!important;
  }

  /* Direct section seams: solid centre layer + tiny feather. */
  .world--vde::before,
  .world--rental::before,
  .world--shop::before{
    content:"";position:absolute;z-index:96;left:-1vw;right:-1vw;top:-7vh;height:14vh;
    pointer-events:none;filter:blur(4px);transform:translateZ(0);
  }
  .world--vde::before{background:linear-gradient(to bottom,
    #090909 0%,#0a0e11 30%,#0d1418 55%,#0d1418 100%)}
  .world--rental::before{background:linear-gradient(to bottom,
    #110d0a 0%,#0e0c0b 34%,#0b0b0d 58%,#0b0b0d 100%)}
  .world--shop::before{background:linear-gradient(to bottom,
    #0b0b0d 0%,#09090a 36%,#080808 60%,#080808 100%)}

  /* VDE -> COFFEE and COFFEE -> COACHING need opposite light/dark handoffs.
     Their zero-height bridge sits exactly on the DOM boundary. */
  .world-transition-bridge::before,.world-transition-bridge::after{
    left:-1vw!important;right:-1vw!important;transform:none!important;
    mix-blend-mode:normal!important;pointer-events:none!important;
  }
  .world-transition-bridge::before{
    top:-7vh!important;height:14vh!important;
    opacity:1!important;filter:blur(4px)!important;
    box-shadow:none!important;
  }
  .world-transition-bridge::after{
    top:-2vh!important;height:4vh!important;
    opacity:1!important;filter:blur(3px)!important;
  }
  .bridge-vde-coffee::before{background:linear-gradient(to bottom,
    #0d1418 0%,
    #1d2424 17%,
    #5b5d52 34%,
    #aaa089 51%,
    #d6c7aa 68%,
    #e7d7bd 100%)!important}
  .bridge-vde-coffee::after{background:#bfb298!important}

  .bridge-coffee-coaching::before{background:linear-gradient(to bottom,
    #e7d7bd 0%,
    #d2bfa0 18%,
    #9b7954 34%,
    #5b3e27 50%,
    #2a1d14 68%,
    #110d0a 100%)!important}
  .bridge-coffee-coaching::after{background:#59402d!important}
}

@media(max-width:800px){
  /* Same principle on mobile, slightly smaller physical seam. */
  .world-sticky::before{display:none!important}
  .brand-scene::before{bottom:-5vh!important;height:10vh!important;filter:blur(3px)!important;opacity:1!important;background:linear-gradient(to bottom,transparent 0%,rgba(67,48,31,.68) 38%,#090909 62%,#090909 100%)!important}
  .brand-scene::after{bottom:-1.5vh!important;height:3vh!important;filter:blur(2px)!important;opacity:1!important;background:#090909!important}
  .world-transition-bridge::before{top:-5vh!important;height:10vh!important;filter:blur(3px)!important;opacity:1!important}
  .world-transition-bridge::after{top:-1.5vh!important;height:3vh!important;filter:blur(2px)!important;opacity:1!important}
}


/* V0.9.27 — ORGANIC MERGE seams -----------------------------------------
   Keeps the V0.9.25 hero/video geometry untouched.
   Transitions are now narrow + opaque, but their silhouettes are deliberately
   non-linear so adjacent worlds visually interlock instead of meeting on a
   horizontal border. */
@media (min-width:801px) and (prefers-reduced-motion:no-preference){
  :root{
    --msk-organic-seam-h:12vh;
  }

  /* Scroll-linked handoff inside each world: irregular silhouette instead of
     a straight horizontal band. */
  .world-sticky::after{
    height:13vh!important;
    bottom:-2.4vh!important;
    filter:blur(2.6px) saturate(.98)!important;
    box-shadow:none!important;
    clip-path:polygon(
      0 31%, 7% 22%, 14% 28%, 22% 15%, 31% 25%, 40% 12%, 49% 23%,
      58% 16%, 67% 29%, 76% 13%, 85% 25%, 93% 18%, 100% 28%,
      100% 100%, 0 100%
    )!important;
  }

  /* HOME -> REPAIR: two interlocking opaque layers. */
  .brand-scene::before{
    left:-2vw!important;right:-2vw!important;
    bottom:-6vh!important;height:12vh!important;
    filter:blur(2.5px)!important;
    box-shadow:none!important;
    background:linear-gradient(to bottom,
      rgba(238,229,214,0) 0%,
      rgba(127,97,65,.22) 20%,
      rgba(74,52,31,.72) 43%,
      #17110c 64%,
      #090909 100%)!important;
    clip-path:polygon(
      0 38%, 8% 22%, 17% 31%, 27% 15%, 38% 28%, 49% 12%, 59% 26%,
      70% 17%, 81% 30%, 91% 19%, 100% 33%,
      100% 100%, 0 100%
    )!important;
  }
  .brand-scene::after{
    left:-2vw!important;right:-2vw!important;
    bottom:-4.2vh!important;height:8.4vh!important;
    filter:blur(1.8px)!important;
    background:linear-gradient(to bottom,#21170f 0%,#0f0b08 47%,#090909 100%)!important;
    clip-path:polygon(
      0 29%, 10% 40%, 21% 20%, 33% 35%, 44% 15%, 56% 32%, 68% 19%,
      79% 38%, 90% 21%, 100% 31%,
      100% 100%, 0 100%
    )!important;
  }

  /* Direct dark/dark seams. Each gets its own irregular topography so the
     pattern never reads as one repeating separator. */
  .world--vde::before,
  .world--rental::before,
  .world--shop::before{
    top:-6vh!important;height:12vh!important;left:-2vw!important;right:-2vw!important;
    filter:blur(2.2px)!important;
    box-shadow:none!important;
  }
  .world--vde::before{
    background:linear-gradient(to bottom,#090909 0%,#0a1013 48%,#0d1418 100%)!important;
    clip-path:polygon(0 34%,9% 20%,19% 32%,30% 16%,41% 29%,52% 14%,64% 31%,75% 18%,87% 28%,100% 15%,100% 100%,0 100%)!important;
  }
  .world--rental::before{
    background:linear-gradient(to bottom,#110d0a 0%,#0f0d0c 46%,#0b0b0d 100%)!important;
    clip-path:polygon(0 21%,11% 35%,22% 17%,35% 30%,47% 13%,58% 27%,71% 16%,82% 33%,92% 20%,100% 30%,100% 100%,0 100%)!important;
  }
  .world--shop::before{
    background:linear-gradient(to bottom,#0b0b0d 0%,#09090a 48%,#080808 100%)!important;
    clip-path:polygon(0 32%,8% 17%,18% 28%,29% 12%,40% 25%,53% 18%,65% 31%,77% 14%,89% 26%,100% 19%,100% 100%,0 100%)!important;
  }

  /* Opposite light/dark handoffs. The core remains opaque, but both layers
     have different irregular silhouettes and horizontal colour pockets. */
  .world-transition-bridge::before,.world-transition-bridge::after{
    left:-2vw!important;right:-2vw!important;
    box-shadow:none!important;
    mix-blend-mode:normal!important;
  }
  .world-transition-bridge::before{
    top:-6vh!important;height:12vh!important;
    filter:blur(2.5px)!important;opacity:1!important;
    clip-path:polygon(
      0 31%, 8% 16%, 18% 29%, 29% 13%, 40% 26%, 51% 17%, 62% 32%,
      73% 14%, 84% 27%, 94% 18%, 100% 30%,
      100% 100%, 0 100%
    )!important;
  }
  .world-transition-bridge::after{
    top:-4.1vh!important;height:8.2vh!important;
    filter:blur(1.8px)!important;opacity:1!important;
    clip-path:polygon(
      0 24%, 12% 39%, 23% 18%, 35% 34%, 47% 14%, 59% 29%, 72% 17%,
      83% 37%, 93% 20%, 100% 32%,
      100% 100%, 0 100%
    )!important;
  }

  .bridge-vde-coffee::before{
    background:
      radial-gradient(ellipse at 18% 38%,rgba(75,86,83,.72),transparent 24%),
      radial-gradient(ellipse at 54% 58%,rgba(176,159,127,.72),transparent 29%),
      radial-gradient(ellipse at 84% 35%,rgba(215,198,166,.80),transparent 25%),
      linear-gradient(to bottom,#0d1418 0%,#343937 26%,#8d8775 50%,#c8b99d 73%,#e7d7bd 100%)!important;
  }
  .bridge-vde-coffee::after{
    background:
      radial-gradient(ellipse at 24% 50%,#7b796c 0 27%,transparent 55%),
      radial-gradient(ellipse at 66% 43%,#c2b396 0 31%,transparent 58%),
      linear-gradient(to bottom,#777668 0%,#b9aa8f 54%,#d8c7a7 100%)!important;
  }

  .bridge-coffee-coaching::before{
    background:
      radial-gradient(ellipse at 16% 42%,rgba(224,205,170,.86),transparent 24%),
      radial-gradient(ellipse at 52% 56%,rgba(134,92,57,.78),transparent 31%),
      radial-gradient(ellipse at 86% 37%,rgba(53,34,23,.88),transparent 25%),
      linear-gradient(to bottom,#e7d7bd 0%,#c9ad82 25%,#846043 49%,#3d2a1d 72%,#110d0a 100%)!important;
  }
  .bridge-coffee-coaching::after{
    background:
      radial-gradient(ellipse at 30% 48%,#b39268 0 27%,transparent 55%),
      radial-gradient(ellipse at 72% 44%,#4b3424 0 31%,transparent 58%),
      linear-gradient(to bottom,#b99a70 0%,#725039 54%,#2a1c13 100%)!important;
  }
}

@media(max-width:800px){
  .brand-scene::before,
  .world-transition-bridge::before,
  .world--vde::before,.world--rental::before,.world--shop::before{
    clip-path:polygon(0 32%,12% 20%,25% 31%,39% 16%,53% 29%,67% 18%,82% 33%,100% 21%,100% 100%,0 100%)!important;
  }
  .brand-scene::after,.world-transition-bridge::after{
    clip-path:polygon(0 24%,16% 38%,31% 19%,47% 33%,63% 17%,80% 36%,100% 22%,100% 100%,0 100%)!important;
  }
}
\n\n/* V0.9.28 — Conversion teasers + floating image treatment ---------------- */
.world-proof{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0 18px;max-width:620px}.world-proof span{padding:8px 10px;border:1px solid rgba(226,197,121,.18);background:rgba(8,8,8,.18);backdrop-filter:blur(8px);font:700 6px/1 var(--tech);letter-spacing:.16em;color:rgba(255,255,255,.67);white-space:nowrap}.world-proof--cyan span{border-color:rgba(138,216,223,.23);color:rgba(212,248,250,.76);background:rgba(6,17,20,.24)}.world-proof--coffee span{border-color:rgba(103,71,31,.18);color:#745126;background:rgba(255,249,238,.38)}
.world-cta--strong{margin-top:8px;display:grid!important;grid-template-columns:auto minmax(44px,1fr) auto;grid-template-rows:auto auto;column-gap:14px;row-gap:5px;align-items:center;width:max-content;max-width:100%;padding:13px 15px!important;border:1px solid color-mix(in srgb,currentColor 32%,transparent);background:color-mix(in srgb,currentColor 7%,transparent);backdrop-filter:blur(11px);transition:transform .3s ease,background .3s ease,border-color .3s ease}.world-cta--strong small{grid-column:1/4;font:700 5px/1 var(--tech);letter-spacing:.22em;opacity:.48}.world-cta--strong span{font-size:8px!important;letter-spacing:.13em!important}.world-cta--strong i{min-width:48px}.world-cta--strong:hover{transform:translateX(7px);background:color-mix(in srgb,currentColor 12%,transparent);border-color:color-mix(in srgb,currentColor 52%,transparent)}
/* The source renders remain untouched; the soft alpha mask removes the visible rectangular photo edge. */
.repair-machine,.coaching-visual>img,.rental-machine,.shop-track article img{-webkit-mask-image:radial-gradient(ellipse 78% 86% at 50% 48%,#000 0 68%,rgba(0,0,0,.96) 76%,rgba(0,0,0,.58) 88%,transparent 100%);mask-image:radial-gradient(ellipse 78% 86% at 50% 48%,#000 0 68%,rgba(0,0,0,.96) 76%,rgba(0,0,0,.58) 88%,transparent 100%)}
@media(max-width:800px){.world-proof{gap:5px;margin:15px 0}.world-proof span{font-size:5px;padding:7px 8px}.world-cta--strong{width:100%;grid-template-columns:auto 1fr auto}.world-cta--strong small{font-size:4.5px}}\n
/* V0.9.29 — visible conversion architecture inside every world ---------------- */
.world-convince{
  --conv-accent:var(--gold2);
  position:relative;
  width:min(100%,600px);
  margin-top:20px;
  display:grid;
  grid-template-columns:minmax(205px,.9fr) minmax(230px,1.1fr);
  grid-template-rows:auto auto;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--conv-accent) 32%,rgba(255,255,255,.08));
  background:
    linear-gradient(115deg,color-mix(in srgb,var(--conv-accent) 8%,rgba(8,8,8,.72)),rgba(7,7,8,.70) 56%,rgba(7,7,8,.84));
  backdrop-filter:blur(18px) saturate(1.08);
  box-shadow:0 26px 65px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035);
  isolation:isolate;
}
.world-convince::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:190px;height:190px;
  right:-62px;top:-95px;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--conv-accent) 20%,transparent);
  box-shadow:0 0 0 28px color-mix(in srgb,var(--conv-accent) 3%,transparent),0 0 0 62px color-mix(in srgb,var(--conv-accent) 2%,transparent);
  opacity:.72;
}
.world-convince::after{
  content:"";
  position:absolute;
  inset:-80% -30%;
  z-index:0;
  background:linear-gradient(104deg,transparent 43%,color-mix(in srgb,var(--conv-accent) 12%,transparent) 49%,rgba(255,255,255,.07) 51%,transparent 57%);
  transform:translateX(-72%) rotate(4deg);
  pointer-events:none;
  opacity:.65;
}
.world.is-active-world .world-convince::after{animation:worldConvinceSweep 6.8s cubic-bezier(.2,.75,.2,1) 1.2s infinite}
@keyframes worldConvinceSweep{0%,62%{transform:translateX(-72%) rotate(4deg)}82%,100%{transform:translateX(72%) rotate(4deg)}}
.world-convince--gold{--conv-accent:var(--gold2)}
.world-convince--cyan{--conv-accent:var(--cyan)}
.world-convince__head{
  position:relative;z-index:2;
  padding:15px 17px 14px;
  border-right:1px solid color-mix(in srgb,var(--conv-accent) 18%,transparent);
}
.world-convince__head small{
  display:block;
  margin-bottom:8px;
  font:700 6px/1 var(--tech);
  letter-spacing:.22em;
  color:var(--conv-accent);
}
.world-convince__head strong{
  display:block;
  font:400 clamp(21px,1.55vw,29px)/.94 var(--display);
  letter-spacing:-.025em;
  color:#fff;
}
.world-convince__facts{
  position:relative;z-index:2;
  display:grid;
  align-content:center;
  padding:11px 16px;
}
.world-convince__facts span{
  display:grid;
  grid-template-columns:27px 1fr;
  align-items:center;
  gap:9px;
  min-height:29px;
  border-bottom:1px solid rgba(255,255,255,.07);
  font:650 7px/1.18 var(--tech);
  letter-spacing:.105em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.world-convince__facts span:last-child{border-bottom:0}
.world-convince__facts b{
  font:400 14px/1 var(--display);
  color:var(--conv-accent);
  opacity:.82;
}
.world-convince>a{
  position:relative;z-index:3;
  grid-column:1/-1;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  min-height:46px;
  padding:10px 16px;
  border-top:1px solid color-mix(in srgb,var(--conv-accent) 22%,transparent);
  background:color-mix(in srgb,var(--conv-accent) 7%,rgba(0,0,0,.1));
  transition:background .32s ease,padding-left .42s cubic-bezier(.16,1,.3,1);
}
.world-convince>a small{font:800 5px/1 var(--tech);letter-spacing:.24em;color:var(--conv-accent)}
.world-convince>a span{font:750 8px/1.1 var(--tech);letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.91)}
.world-convince>a b{font:400 17px/1 var(--body);color:var(--conv-accent);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.world-convince>a:hover{background:color-mix(in srgb,var(--conv-accent) 13%,rgba(0,0,0,.1));padding-left:22px}
.world-convince>a:hover b{transform:translate(3px,-3px)}

/* Coffee gets a deliberately editorial/light decision panel instead of another dark card. */
.world-convince--coffee{
  --conv-accent:#8a6023;
  border-color:rgba(87,57,24,.22);
  background:linear-gradient(118deg,rgba(255,252,246,.78),rgba(242,228,205,.74));
  box-shadow:0 25px 55px rgba(88,57,24,.13),inset 0 1px 0 rgba(255,255,255,.72);
}
.world-convince--coffee .world-convince__head{border-right-color:rgba(87,57,24,.14)}
.world-convince--coffee .world-convince__head strong{color:#2c1d0f}
.world-convince--coffee .world-convince__facts span{color:rgba(52,34,17,.74);border-bottom-color:rgba(78,50,22,.11)}
.world-convince--coffee>a{border-top-color:rgba(87,57,24,.16);background:rgba(124,82,33,.07)}
.world-convince--coffee>a span{color:#2e1e10}
.world-convince--coffee>a:hover{background:rgba(124,82,33,.13)}

/* Make the new decision module the visible conversion focus, not tiny badges. */
.world-proof,.world-cta--strong{display:none!important}

/* VDE has more explanatory content above the decision block; compact its vertical rhythm. */
@media(min-width:801px){
  .world--vde .world-copy{top:12.5vh}
  .world--vde .world-copy h2{margin-bottom:18px;font-size:clamp(58px,6.5vw,108px)}
  .world--vde .world-copy p{line-height:1.55}
  .world--vde .vde-process{margin-top:18px}
  .world--vde .vde-scope{margin-top:12px}
  .world--vde .world-convince{margin-top:14px;transform:scale(.94);transform-origin:left top}
}

@media(max-width:800px){
  .world-convince{grid-template-columns:1fr;margin-top:20px}
  .world-convince__head{border-right:0;border-bottom:1px solid color-mix(in srgb,var(--conv-accent) 18%,transparent)}
  .world-convince__facts{padding:8px 15px}
  .world-convince>a{grid-column:1;grid-template-columns:auto 1fr auto}
  .world-convince__head strong{font-size:28px}
}

/* V0.9.30 — Premium navigation, stronger conversion cues, better N.O.C.S. ----- */
.brand-scene,.world{scroll-margin-top:100px}

.topbar{
  height:auto!important;
  padding:14px 18px!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  background:linear-gradient(180deg,rgba(6,6,7,.92),rgba(14,13,14,.72))!important;
  box-shadow:0 16px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
.topbar-shell{
  width:100%;
  display:grid;
  grid-template-columns:minmax(290px,1.05fr) auto minmax(180px,.55fr);
  align-items:center;
  gap:18px;
}
.topbrand{
  display:flex!important;
  align-items:center;
  gap:15px;
  min-width:0;
}
.topbrand-mark{
  flex:0 0 auto;
  width:64px;height:64px;border-radius:20px;
  display:grid;place-items:center;
  border:1px solid rgba(226,197,121,.24);
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.18),rgba(20,18,16,.9) 62%);
  box-shadow:0 14px 38px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
.topbrand img{
  width:54px!important;height:54px!important;object-fit:contain;
  filter:none!important;
}
.topbrand-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.topbrand-copy strong{
  font:800 13px/1 var(--tech);
  letter-spacing:.18em;
  color:#fff;
  text-transform:uppercase;
}
.topbrand-copy em{
  font:600 8px/1 var(--tech);
  letter-spacing:.18em;
  color:rgba(226,197,121,.78);
  font-style:normal;
  text-transform:uppercase;
  white-space:nowrap;
}
.topnav{
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:10px!important;
  color:#fff!important;
}
.topnav a{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:13px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  color:rgba(255,255,255,.76)!important;
  font:750 10px/1 var(--tech)!important;
  letter-spacing:.16em!important;
  text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .28s ease,background .28s ease,border-color .28s ease,color .28s ease,box-shadow .28s ease;
}
.topnav a span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 4px;border-radius:999px;
  background:rgba(226,197,121,.12);
  border:1px solid rgba(226,197,121,.18);
  color:var(--gold2);
  font:800 8px/1 var(--tech);
  letter-spacing:.12em;
}
.topnav a:hover,.topnav a.active{
  transform:translateY(-1px);
  color:#fff!important;
  border-color:rgba(226,197,121,.34);
  background:linear-gradient(180deg,rgba(226,197,121,.16),rgba(183,136,53,.08));
  box-shadow:0 12px 26px rgba(0,0,0,.22),0 0 0 1px rgba(226,197,121,.08) inset;
}
.topnav a.active span,.topnav a:hover span{background:rgba(226,197,121,.22)}
.topbar-cta{
  justify-self:end;
  display:flex;flex-direction:column;gap:4px;
  padding:13px 17px 12px;
  border-radius:20px;
  border:1px solid rgba(226,197,121,.28);
  background:linear-gradient(180deg,rgba(226,197,121,.18),rgba(183,136,53,.08));
  box-shadow:0 18px 36px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.1);
  transition:transform .28s ease, box-shadow .28s ease, background .28s ease;
}
.topbar-cta small{
  font:800 7px/1 var(--tech);letter-spacing:.22em;color:rgba(255,255,255,.62);
}
.topbar-cta span{
  font:800 11px/1 var(--tech);letter-spacing:.16em;color:#fff;text-transform:uppercase;
}
.topbar-cta:hover{transform:translateY(-2px);box-shadow:0 22px 42px rgba(0,0,0,.3),0 0 34px rgba(226,197,121,.1)}

.world-linkrow{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:12px;
}
.world-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(226,197,121,.24);
  background:linear-gradient(180deg,rgba(226,197,121,.16),rgba(183,136,53,.08));
  color:#fff;
  font:800 8px/1 var(--tech);
  letter-spacing:.18em;
  text-transform:uppercase;
  box-shadow:0 14px 28px rgba(0,0,0,.16);
  transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.world-pill:hover{transform:translateY(-2px);background:linear-gradient(180deg,rgba(226,197,121,.22),rgba(183,136,53,.12));border-color:rgba(226,197,121,.42);box-shadow:0 18px 32px rgba(0,0,0,.22)}
.world-pill--soft{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.82)}
.world-pill--soft:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.world-linkrow--cyan .world-pill--cyan,.world-pill--cyan{background:linear-gradient(180deg,rgba(138,216,223,.18),rgba(138,216,223,.08));border-color:rgba(138,216,223,.28)}
.world-linkrow--cyan .world-pill--cyan-soft,.world-pill--cyan-soft{background:rgba(138,216,223,.05);border-color:rgba(138,216,223,.15)}
.world-linkrow--coffee .world-pill--coffee,.world-pill--coffee{background:linear-gradient(180deg,rgba(156,109,41,.16),rgba(156,109,41,.08));border-color:rgba(112,76,29,.24);color:#38240f}
.world-linkrow--coffee .world-pill--coffee-soft,.world-pill--coffee-soft{background:rgba(167,114,44,.08);border-color:rgba(112,76,29,.16);color:#50341a}

.world-convince{margin-top:22px!important;max-width:650px}
.world-convince__head strong{font-size:clamp(23px,1.8vw,32px)!important}
.world-convince>a small{opacity:.9}
.world-convince>a span{font-size:9px!important}
.world-convince>a{min-height:52px!important}

/* Stronger soft cutout feel for machine renders */
.repair-machine,
.coaching-visual>img,
.rental-machine,
.shop-track article img{
  -webkit-mask-image:radial-gradient(ellipse 70% 84% at 50% 44%,#000 0 56%,rgba(0,0,0,.96) 70%,rgba(0,0,0,.62) 84%,transparent 100%)!important;
  mask-image:radial-gradient(ellipse 70% 84% at 50% 44%,#000 0 56%,rgba(0,0,0,.96) 70%,rgba(0,0,0,.62) 84%,transparent 100%)!important;
}
.repair-machine,.coaching-visual>img,.rental-machine{filter:drop-shadow(0 30px 50px rgba(0,0,0,.42))}

.nocs-badge{
  left:22px!important;
  bottom:22px!important;
  z-index:1850;
  gap:14px!important;
  padding:12px 18px 12px 12px!important;
  border-radius:22px;
  border:1px solid rgba(226,197,121,.28)!important;
  background:linear-gradient(180deg,rgba(12,11,11,.92),rgba(17,15,14,.82))!important;
  box-shadow:0 22px 52px rgba(0,0,0,.36),0 0 38px rgba(226,197,121,.08),inset 0 1px 0 rgba(255,255,255,.07);
  overflow:hidden;
}
.nocs-badge::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 0 36%,rgba(226,197,121,.12) 49%,transparent 62%);
  transform:translateX(-120%);
  animation:nocsSweep 6s cubic-bezier(.2,.7,.2,1) infinite;
}
@keyframes nocsSweep{0%,68%{transform:translateX(-120%)}100%{transform:translateX(130%)}}
.nocs-icon{
  position:relative;
  width:52px!important;height:52px!important;
  border-radius:50%;
  background:radial-gradient(circle at 40% 32%,rgba(255,255,255,.16),rgba(2,2,3,.96) 62%)!important;
  border:1px solid rgba(226,197,121,.34)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 0 24px rgba(226,197,121,.14);
}
.nocs-icon::before,.nocs-icon::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(226,197,121,.24);
}
.nocs-icon::before{animation:nocsPulse 2.8s ease-in-out infinite}
.nocs-icon::after{inset:-11px;opacity:.45;animation:nocsPulse 2.8s ease-in-out 1.2s infinite}
@keyframes nocsPulse{0%,100%{transform:scale(.92);opacity:.18}50%{transform:scale(1.08);opacity:.7}}
.nocs-icon img{object-fit:contain!important;padding:6px}
.nocs-copy{display:flex;flex-direction:column;gap:4px}
.nocs-badge small{font:700 7px/1 var(--tech)!important;letter-spacing:.26em!important;color:rgba(226,197,121,.72)!important}
.nocs-badge strong{font:800 12px/1 var(--tech)!important;letter-spacing:.22em!important;color:#fff}
.nocs-badge em{font:700 7px/1 var(--tech);letter-spacing:.18em;color:rgba(255,255,255,.5);font-style:normal;text-transform:uppercase}

@media(max-width:1260px){
  .topbar-shell{grid-template-columns:minmax(260px,1fr);gap:12px}
  .topnav{justify-content:flex-start;flex-wrap:wrap}
  .topbar-cta{justify-self:start}
}
@media(max-width:800px){
  .brand-scene,.world{scroll-margin-top:74px}
  .topbar{padding:10px 12px!important}
  .topbrand-mark{width:50px;height:50px;border-radius:16px}
  .topbrand img{width:42px!important;height:42px!important}
  .topbrand-copy strong{font-size:10px}
  .topbrand-copy em{display:none}
  .topnav{flex-wrap:nowrap;overflow:auto;justify-content:flex-start;padding-bottom:3px}
  .topnav a{padding:11px 13px;font-size:8px!important}
  .topbar-cta{display:none}
  .world-linkrow{gap:8px}
  .world-pill{width:100%}
  .nocs-badge{left:10px!important;bottom:10px!important;padding:10px 14px 10px 10px!important;gap:10px!important;transform-origin:left bottom}
  .nocs-icon{width:44px!important;height:44px!important}
  .nocs-badge strong{font-size:10px!important}
  .nocs-badge em{font-size:6px}
}
/* V0.9.30 mobile override fixes */
.topbrand .topbrand-mark{display:grid!important}
.topbrand .topbrand-copy{display:flex!important}
@media(max-width:800px){
  .topbrand .topbrand-mark{display:grid!important}
  .topbrand .topbrand-copy{display:flex!important}
  .topnav a:nth-child(n+4){display:inline-flex!important}
}

/* V0.9.34 — stabilization patch: full V0.9.30 stylesheet retained. */
/* Homepage rule: overview only, one clear deep-dive CTA per world. */
.world-convince__head strong{line-height:1.02}
.world-convince>a small{font-size:6px;opacity:.95}
.world-convince>a span{font-size:9px!important}
.world-convince>a{min-height:52px}

/* 7th world: N.O.C.S. */
.world--nocs{background:#050607;--next-color:#050607}
.nocs-stage{
  background:
    radial-gradient(circle at 72% 43%,rgba(93,189,207,.13),transparent 25%),
    radial-gradient(circle at 72% 43%,rgba(226,197,121,.055),transparent 46%),
    linear-gradient(135deg,#0a0c0e,#050607 64%,#090705);
  color:#fff;
}
.nocs-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px) 0 0/7vw 7vw,
             linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px) 0 0/7vw 7vw;
  opacity:.55;mask-image:radial-gradient(circle at 70% 45%,black,transparent 72%);
}
.nocs-copy{left:7vw;top:13vh;width:min(43vw,650px)}
.nocs-visual{right:4vw;top:8vh;width:43vw;height:82vh}
.nocs-home-core{position:absolute;left:54%;top:46%;width:min(26vw,390px);aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center}
.nocs-home-core>i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(138,216,223,.2)}
.nocs-home-core>i:nth-child(2){inset:13%;border-style:dashed;border-color:rgba(226,197,121,.22)}
.nocs-home-core>i:nth-child(3){inset:28%;border-color:rgba(255,255,255,.12);box-shadow:0 0 54px rgba(138,216,223,.1)}
.nocs-home-core>span{position:relative;z-index:2;width:36%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(255,255,255,.12),rgba(3,5,6,.96));border:1px solid rgba(226,197,121,.3);box-shadow:0 0 54px rgba(138,216,223,.14),0 0 24px rgba(226,197,121,.09)}
.nocs-home-core img{width:82%;height:82%;object-fit:contain;padding:5px}
.world--nocs.is-active-world .nocs-home-core>i:first-child{animation:nocs34spin 17s linear infinite}
.world--nocs.is-active-world .nocs-home-core>i:nth-child(2){animation:nocs34spinback 12s linear infinite}
.world--nocs.is-active-world .nocs-home-core>span{animation:nocs34pulse 3.4s ease-in-out infinite}
@keyframes nocs34spin{to{transform:rotate(360deg)}}
@keyframes nocs34spinback{to{transform:rotate(-360deg)}}
@keyframes nocs34pulse{0%,100%{transform:scale(.97)}50%{transform:scale(1.035);box-shadow:0 0 70px rgba(138,216,223,.18),0 0 30px rgba(226,197,121,.12)}}
.nocs-home-question{position:absolute;max-width:240px;padding:10px 12px;border:1px solid rgba(138,216,223,.16);border-radius:15px;background:rgba(5,9,11,.74);backdrop-filter:blur(13px);box-shadow:0 16px 34px rgba(0,0,0,.2)}
.nocs-home-question small{display:block;margin-bottom:5px;font:800 5px/1 var(--tech);letter-spacing:.2em;color:rgba(226,197,121,.72)}
.nocs-home-question span{display:block;font-size:10px;line-height:1.35;color:rgba(255,255,255,.76)}
.nocs-home-question.q1{left:2%;top:16%}.nocs-home-question.q2{right:0;top:30%}.nocs-home-question.q3{left:8%;bottom:16%}

/* Seven nav items: keep them readable without changing the bar's fundamental layout. */
@media(min-width:801px){
  .topbar-shell{grid-template-columns:minmax(250px,.9fr) minmax(0,1.8fr) minmax(150px,.45fr)}
  .topnav{gap:7px!important;min-width:0;justify-content:center}
  .topnav a{padding:11px 12px!important;font-size:8px!important;white-space:nowrap}
  .topnav a span{min-width:19px;height:19px;font-size:7px}
}
@media(max-width:800px){
  .nocs-copy{position:relative;left:auto;top:auto;width:100%}
  .nocs-visual{position:relative;right:auto;top:auto;width:100%;height:56vh;min-height:430px;margin-top:28px}
  .nocs-home-core{width:60vw}
  .nocs-home-question{max-width:180px}
  .topnav a:nth-child(n+4){display:inline-flex!important}
}
/* Homepage stays concise; detailed VDE explanations live on the detail page. */
.world--vde .vde-scope,.world--vde .vde-tiers{display:none!important}

/* V0.9.35 — READABILITY + COMPACT N.O.C.S. BADGE
   No structural redesign. Raise typography floors and stop the fixed badge
   from covering world copy / CTAs. */

/* ---------- Global readability floor on homepage ---------- */
@media (min-width:801px){
  .world-copy>small{font-size:10px!important;line-height:1.25!important;letter-spacing:.20em!important}
  .world-copy p{font-size:16px!important;line-height:1.7!important}
  .world-rail a{font-size:9px!important;letter-spacing:.12em!important}
  .brand-meta{font-size:9px!important}
  .brand-scrollcue em{font-size:10px!important;letter-spacing:.18em!important}
  .brand-corner span,.brand-corner b{font-size:9px!important}

  .repair-callout span{font-size:10px!important}
  .repair-callout b{font-size:10px!important;line-height:1.35!important}
  .repair-steps b{font-size:9px!important;line-height:1.25!important}

  .vde-process{font-size:9px!important;line-height:1.2!important}
  .vde-scope small{font-size:9px!important}
  .vde-field-label small{font-size:9px!important}
  .vde-field-label strong{font-size:20px!important}
  .vde-device-tag small{font-size:9px!important}

  .coach-live small,.rental-live small{font-size:9px!important}
  .rental-track{font-size:9px!important}
  .shop-track small{font-size:9px!important}
  .finale div{font-size:9px!important}

  .world-convince__head small{font-size:9px!important;line-height:1.2!important}
  .world-convince__facts span{font-size:10px!important;line-height:1.3!important;letter-spacing:.08em!important;min-height:34px!important}
  .world-convince>a small{font-size:9px!important;line-height:1.15!important}
  .world-convince>a span{font-size:11px!important;line-height:1.25!important;letter-spacing:.09em!important}
  .world-convince>a{min-height:58px!important;padding-top:12px!important;padding-bottom:12px!important}

  .nocs-home-question small{font-size:8px!important}
  .nocs-home-question span{font-size:12px!important;line-height:1.45!important}

  /* Top navigation: readable, still compact enough for seven worlds. */
  .topbrand-copy strong{font-size:14px!important}
  .topbrand-copy em{font-size:9px!important}
  .topnav a{font-size:10px!important;padding:12px 13px!important;letter-spacing:.11em!important}
  .topnav a span{font-size:9px!important;min-width:21px!important;height:21px!important}
  .topbar-cta small{font-size:9px!important}
  .topbar-cta span{font-size:11px!important}
}

/* ---------- N.O.C.S. badge: compact, readable, non-obstructive ---------- */
.nocs-badge{
  left:16px!important;
  bottom:16px!important;
  width:auto!important;
  max-width:176px!important;
  min-height:50px!important;
  padding:6px 11px 6px 6px!important;
  gap:9px!important;
  border-radius:999px!important;
  border:1px solid rgba(226,197,121,.28)!important;
  background:rgba(8,8,9,.90)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.30),0 0 20px rgba(226,197,121,.07)!important;
  backdrop-filter:blur(15px) saturate(1.08)!important;
  overflow:visible!important;
}
.nocs-badge::before{
  border-radius:999px!important;
  opacity:.45!important;
}
.nocs-icon{
  flex:0 0 38px!important;
  width:38px!important;
  height:38px!important;
  border-color:rgba(226,197,121,.34)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.035) inset,0 0 14px rgba(226,197,121,.10)!important;
}
.nocs-icon::before{inset:-3px!important;opacity:.48!important}
.nocs-icon::after{display:none!important}
.nocs-icon img{padding:4px!important}
.nocs-copy{gap:3px!important;min-width:0!important}
.nocs-badge small{font-size:7px!important;letter-spacing:.18em!important;white-space:nowrap!important}
.nocs-badge strong{font-size:10px!important;letter-spacing:.16em!important;white-space:nowrap!important}
.nocs-badge em{display:none!important}

@media (max-width:800px){
  /* No microscopic mobile text. */
  .world-copy>small{font-size:9px!important;line-height:1.25!important}
  .world-copy p{font-size:15px!important;line-height:1.65!important}
  .world-convince__head small{font-size:8px!important}
  .world-convince__facts span{font-size:10px!important;line-height:1.3!important}
  .world-convince>a small{font-size:8px!important}
  .world-convince>a span{font-size:10px!important;line-height:1.25!important}
  .brand-meta{font-size:8px!important}
  .brand-scrollcue em{font-size:9px!important}

  /* Mobile: icon only, so it cannot cover text/buttons. */
  .nocs-badge{
    left:10px!important;
    bottom:10px!important;
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:4px!important;
    gap:0!important;
    display:grid!important;
    place-items:center!important;
  }
  .nocs-badge .nocs-copy{display:none!important}
  .nocs-icon{width:34px!important;height:34px!important;flex-basis:34px!important}
}

/* V0.9.36 — HOMEPAGE CLARITY + TYPOGRAPHY RESET
   Goal: every world fits into a normal desktop viewport, every CTA is obvious,
   and no important label relies on microtype. */
:root{
  --display:"Baskerville","Palatino Linotype","Book Antiqua",Georgia,serif;
  --tech:"Segoe UI Variable","Aptos","Segoe UI",Arial,sans-serif;
  --body:"Segoe UI Variable","Aptos","Segoe UI",Arial,sans-serif;
}

/* Make the primary story copy readable before adding any decorative layer. */
.world-copy{
  top:15vh!important;
  width:min(42vw,640px)!important;
}
.world-copy>small{
  margin-bottom:14px!important;
  font-family:var(--tech)!important;
  font-size:12px!important;
  font-weight:750!important;
  line-height:1.25!important;
  letter-spacing:.16em!important;
}
.world-copy h1,.world-copy h2{
  margin:0 0 18px!important;
  font-family:var(--display)!important;
  font-size:clamp(54px,6.1vw,96px)!important;
  line-height:.91!important;
  letter-spacing:-.04em!important;
}
.world-copy p{
  max-width:600px!important;
  font-family:var(--body)!important;
  font-size:17px!important;
  line-height:1.58!important;
  font-weight:450!important;
}

/* One compact infographic + one unmistakable action per world. */
.world-summary{
  --summary-accent:var(--gold2);
  width:min(100%,620px);
  margin-top:20px;
  display:grid;
  gap:12px;
}
.world--vde .world-summary{--summary-accent:var(--cyan)}
.world--coffee .world-summary{--summary-accent:#8a6023}
.world-summary__facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.world-summary__facts span{
  min-height:82px;
  padding:13px 13px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  border:1px solid color-mix(in srgb,var(--summary-accent) 22%,rgba(255,255,255,.08));
  border-radius:15px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--summary-accent) 7%,rgba(8,8,8,.36)),rgba(8,8,8,.20));
  backdrop-filter:blur(11px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.world-summary__facts b{
  font:800 12px/1 var(--tech);
  letter-spacing:.13em;
  color:var(--summary-accent);
}
.world-summary__facts em{
  font:650 13px/1.35 var(--tech);
  font-style:normal;
  letter-spacing:.01em;
  color:rgba(255,255,255,.82);
}
.world--coffee .world-summary__facts span{
  background:rgba(255,251,244,.48);
  border-color:rgba(93,60,24,.16);
}
.world--coffee .world-summary__facts em{color:#3f2a15}
.world--coffee .world-summary__facts b{color:#805820}

.world-more{
  position:relative;
  width:100%;
  min-height:66px;
  padding:13px 18px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:15px;
  border:1px solid color-mix(in srgb,var(--summary-accent) 46%,transparent);
  border-radius:18px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--summary-accent) 19%,rgba(8,8,8,.88)),rgba(8,8,8,.88));
  box-shadow:0 16px 34px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.world-more::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 0 42%,rgba(255,255,255,.09) 50%,transparent 58%);
  transform:translateX(-120%);
  transition:transform .65s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.world-more>span{
  grid-column:1;
  grid-row:1/3;
  font:800 15px/1 var(--tech);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#fff;
}
.world-more>small{
  grid-column:2;
  grid-row:1/3;
  font:650 12px/1.3 var(--tech);
  letter-spacing:.02em;
  color:rgba(255,255,255,.66);
}
.world-more>b{
  grid-column:3;
  grid-row:1/3;
  font:500 28px/1 var(--body);
  color:var(--summary-accent);
  transition:transform .28s ease;
}
.world-more:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--summary-accent) 72%,transparent);
  box-shadow:0 20px 42px rgba(0,0,0,.26),0 0 26px color-mix(in srgb,var(--summary-accent) 9%,transparent);
}
.world-more:hover::after{transform:translateX(120%)}
.world-more:hover>b{transform:translateX(4px)}

.world--coffee .world-more{
  background:linear-gradient(135deg,rgba(111,74,28,.14),rgba(255,249,239,.58));
  border-color:rgba(111,74,28,.28);
}
.world--coffee .world-more>span{color:#2f1f10}
.world--coffee .world-more>small{color:rgba(47,31,16,.68)}
.world--coffee .world-more>b{color:#6e4b1c}

/* Remove obsolete homepage conversion modules from layout if any survived. */
.world-copy>.world-convince,.world-copy>.world-proof,.world-copy>.world-cta{display:none!important}

/* Navigation is a control, not microcopy. */
.topbrand-copy strong{font:800 14px/1 var(--tech)!important;letter-spacing:.13em!important}
.topbrand-copy em{font:600 10px/1 var(--tech)!important;letter-spacing:.11em!important}
.topnav a{font:750 11px/1 var(--tech)!important;letter-spacing:.08em!important}
.topnav a span{font-size:9px!important}
.world-rail a{font:750 10px/1 var(--tech)!important;letter-spacing:.08em!important}

/* Important on-screen labels: never depend on 6–9 px text. */
.repair-callout span,.repair-callout b,
.vde-field-label small,.vde-stat small,
.coach-note small,.coach-live small,
.rental-label small,.rental-live small,
.shop-track small,.shop-track span{
  font-size:11px!important;
  line-height:1.3!important;
}
.repair-steps b{font-size:11px!important}
.nocs-home-question small{font-size:10px!important}
.nocs-home-question span{font-size:13px!important;line-height:1.45!important}

/* The assistant badge must remain useful without owning the viewport. */
.nocs-badge{
  left:14px!important;
  bottom:14px!important;
  max-width:152px!important;
  min-height:44px!important;
  padding:5px 10px 5px 5px!important;
  gap:8px!important;
}
.nocs-icon{width:34px!important;height:34px!important;flex-basis:34px!important}
.nocs-badge small{font-size:7px!important}
.nocs-badge strong{font-size:10px!important}

/* Short desktop windows (e.g. 1457 × 709 screenshot): prioritize copy + CTA.
   Decorative bottom rails remain available on taller screens. */
@media (min-width:801px) and (max-height:820px){
  .world-copy{top:11.5vh!important}
  .world-copy>small{font-size:11px!important;margin-bottom:10px!important}
  .world-copy h1,.world-copy h2{font-size:clamp(48px,5.25vw,76px)!important;line-height:.92!important;margin-bottom:13px!important}
  .world-copy p{font-size:15px!important;line-height:1.48!important}
  .world-summary{margin-top:14px!important;gap:9px!important}
  .world-summary__facts{gap:6px!important}
  .world-summary__facts span{min-height:67px!important;padding:10px!important;gap:6px!important}
  .world-summary__facts b{font-size:10px!important}
  .world-summary__facts em{font-size:11.5px!important;line-height:1.28!important}
  .world-more{min-height:58px!important;padding:10px 15px!important}
  .world-more>span{font-size:14px!important}
  .world-more>small{font-size:11px!important}
  .world-more>b{font-size:24px!important}
  .repair-steps,.coach-duration,.rental-track,.coffee-marquee,.shop-final{display:none!important}
  .world-visual{top:9vh!important;height:77vh!important}
}

@media (max-width:1100px) and (min-width:801px){
  .world-copy{width:min(48vw,590px)!important;left:4vw!important}
  .world-visual{right:2vw!important;width:49vw!important}
  .world-summary__facts em{font-size:12px!important}
  .topnav a{padding:10px 10px!important;font-size:10px!important}
  .topbrand-copy em{display:none!important}
  .topbar-cta{display:none!important}
}

@media (max-width:800px){
  .world-copy{width:100%!important;top:auto!important}
  .world-copy>small{font-size:11px!important;letter-spacing:.13em!important}
  .world-copy h1,.world-copy h2{font-size:clamp(48px,15vw,68px)!important;line-height:.94!important;margin-bottom:16px!important}
  .world-copy p{font-size:16px!important;line-height:1.55!important}
  .world-summary{width:100%;margin-top:18px}
  .world-summary__facts{grid-template-columns:1fr}
  .world-summary__facts span{min-height:auto;padding:12px 14px;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:8px}
  .world-summary__facts b{font-size:11px!important}
  .world-summary__facts em{font-size:13px!important;line-height:1.35!important}
  .world-more{grid-template-columns:1fr auto;grid-template-rows:auto auto;min-height:70px;padding:13px 15px}
  .world-more>span{grid-column:1;grid-row:1;font-size:15px!important}
  .world-more>small{grid-column:1;grid-row:2;font-size:11px!important;margin-top:4px}
  .world-more>b{grid-column:2;grid-row:1/3;font-size:26px!important}
}
/* Final V0.9.36 CTA readability floor */
.world-more>span{font-size:16px!important}
.world-more>small{font-size:13px!important;line-height:1.35!important}
@media (min-width:801px) and (max-height:820px){
  .world-more>span{font-size:15px!important}
  .world-more>small{font-size:12px!important}
}

/* V0.9.37 — CONSISTENT TYPE SYSTEM + PERMANENT FILM HERO -----------------
   One elegant serif for large editorial headlines and one neutral UI family
   for everything a visitor must read/click. No new external font dependency. */
:root{
  --display:"Baskerville","Palatino Linotype","Book Antiqua",Georgia,serif;
  --tech:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",Tahoma,Arial,sans-serif;
  --body:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",Tahoma,Arial,sans-serif;
}
body{font-family:var(--body);font-kerning:normal;text-rendering:optimizeLegibility}
.topbrand-copy strong,.topbrand-copy em,.topnav a,.world-copy>small,.world-summary__facts b,.world-summary__facts em,.world-more>span,.world-more>small,.world-rail a,.repair-callout,.repair-steps,.vde-field-label,.vde-stat,.coach-note,.coach-live,.rental-label,.rental-live,.shop-track,.nocs-home-question{font-family:var(--tech)!important}
.world-copy h1,.world-copy h2,.repair-final strong,.shop-final strong{font-family:var(--display)!important}

/* Permanent exact last frame from the real 4K film. The MP4 simply fades over
   the same composition while playing; reloads/revisits never fall back to the
   unrelated standalone logo hero. */
.brand-video-reveal{display:block!important;background:#080604!important}
.brand-reveal-poster,.brand-reveal-video{
  --msk-video-x:50%;
  --msk-video-y:50%;
  --msk-video-scale:1;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:var(--msk-video-x) var(--msk-video-y)!important;
  transform:scale(var(--msk-video-scale))!important;
  transform-origin:center center!important;
}
.brand-reveal-poster{z-index:1;opacity:1;transition:none}
.brand-reveal-video{z-index:2;transition:opacity .12s linear}
@media (min-width:801px){.brand-reveal-poster,.brand-reveal-video{--msk-video-y:64%!important}}
@media (prefers-reduced-motion:reduce){
  .brand-video-reveal{display:block!important;opacity:1!important;visibility:visible!important}
  .brand-reveal-video{display:none!important}
  .brand-reveal-poster{display:block!important}
  .brand-lockup,.brand-corner{opacity:0!important}
}

/* Coffee should read as coffee first, not as another machine/product card. */
.coffee-bean-field{
  position:absolute;
  inset:-5%;
  z-index:0;
  background:
    linear-gradient(90deg,rgba(242,229,208,.90) 0%,rgba(242,229,208,.54) 42%,rgba(242,229,208,.08) 72%),
    url('assets/hero/coffee-bean-field.jpg') center/cover no-repeat;
  opacity:.34;
  filter:saturate(.85) contrast(1.04);
  transform:scale(1.04);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 15%,black 44%,black 100%);
}
.coffee-sun,.coffee-pack,.coffee-label{z-index:2}

/* Readability floor: labels may be restrained, never microscopic. */
.world-copy>small{font-size:13px!important;letter-spacing:.12em!important}
.world-copy p{font-size:17px!important;line-height:1.62!important}
.world-summary__facts b{font-size:12px!important;letter-spacing:.10em!important}
.world-summary__facts em{font-size:13.5px!important;line-height:1.42!important;font-weight:600!important}
.world-more>span{font-size:16px!important;letter-spacing:.045em!important}
.world-more>small{font-size:13px!important;line-height:1.42!important;font-weight:600!important}
.topnav a{font-size:11.5px!important;letter-spacing:.055em!important}
.topbrand-copy strong{font-size:14px!important;letter-spacing:.10em!important}
.world-rail a{font-size:10.5px!important;letter-spacing:.055em!important}

@media (min-width:801px) and (max-height:820px){
  .world-copy>small{font-size:12px!important}
  .world-copy p{font-size:15.5px!important;line-height:1.52!important}
  .world-summary__facts em{font-size:12px!important;line-height:1.32!important}
  .world-more>small{font-size:12px!important}
}
@media (max-width:800px){
  .world-copy>small{font-size:11px!important}
  .world-copy p{font-size:16px!important;line-height:1.58!important}
  .world-summary__facts em{font-size:13px!important}
  .world-more>span{font-size:15px!important}
  .world-more>small{font-size:12px!important}
}


/* V0.9.38 — nav upgrade + water world + clean N.O.C.S. --------------- */
:root{
  --display:"Iowan Old Style","Palatino Linotype","Book Antiqua","Baskerville",Georgia,serif;
  --tech:"Segoe UI Variable Display","Segoe UI Variable Text","Segoe UI","Bahnschrift",Tahoma,Arial,sans-serif;
  --body:"Segoe UI Variable Text","Segoe UI","Bahnschrift",Tahoma,Arial,sans-serif;
}

.topbar{
  top:12px!important;left:16px!important;right:16px!important;height:auto!important;padding:0!important;
  background:transparent!important;border:none!important;backdrop-filter:none!important;
}
.topbar-shell{
  display:grid!important;grid-template-columns:minmax(310px,.95fr) minmax(0,1.9fr) auto!important;align-items:center!important;gap:16px!important;
  padding:14px 18px!important;border-radius:30px!important;
  border:1px solid rgba(255,255,255,.1)!important;
  background:
    radial-gradient(circle at 14% 50%,rgba(181,138,58,.18),transparent 24%),
    linear-gradient(135deg,rgba(16,11,8,.92),rgba(20,14,11,.84) 46%,rgba(42,24,12,.76) 100%)!important;
  backdrop-filter:blur(26px) saturate(1.12)!important;
  box-shadow:0 22px 58px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.topbrand{gap:16px!important;min-width:0!important}
.topbrand-mark{
  width:92px;height:92px;flex:0 0 92px;border-radius:25px;padding:3px;display:grid;place-items:center;
  border:1px solid rgba(226,197,121,.26);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  box-shadow:0 14px 28px rgba(0,0,0,.24),0 0 28px rgba(226,197,121,.08) inset;
}
.topbrand img{width:86px!important;height:86px!important;filter:invert(1) brightness(2.15)!important}
.topbrand-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.topbrand-copy strong{font-size:20px!important;letter-spacing:.08em!important;color:#fff!important;white-space:nowrap}
.topbrand-copy em{font-size:11px!important;letter-spacing:.16em!important;color:rgba(226,197,121,.82)!important;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topnav{gap:10px!important;align-items:center!important;justify-content:center!important}
.topnav a{
  display:inline-flex!important;align-items:center!important;gap:9px!important;padding:13px 15px!important;border-radius:999px!important;
  border:1px solid rgba(255,255,255,.08)!important;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;color:rgba(255,255,255,.78)!important
}
.topnav a span{
  display:grid!important;place-items:center!important;min-width:24px!important;height:24px!important;border-radius:999px!important;
  background:rgba(226,197,121,.13)!important;border:1px solid rgba(226,197,121,.18)!important;color:var(--gold2)!important
}
.topnav a:hover,.topnav a.active{
  color:#fff!important;transform:translateY(-2px)!important;border-color:rgba(226,197,121,.28)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03))!important;
  box-shadow:0 18px 34px rgba(0,0,0,.28),0 0 20px rgba(226,197,121,.08)!important
}
.topnav a.active span,.topnav a:hover span{background:rgba(226,197,121,.2)!important}
.topbar-cta{
  min-height:58px!important;padding:10px 18px!important;border-radius:22px!important;border:1px solid rgba(226,197,121,.28)!important;
  background:linear-gradient(180deg,rgba(62,39,17,.84),rgba(33,23,16,.78))!important;box-shadow:0 18px 34px rgba(0,0,0,.26)!important
}
.topbar-cta small{font-size:9px!important;letter-spacing:.22em!important;color:rgba(226,197,121,.72)!important}
.topbar-cta span{font-size:13px!important;letter-spacing:.09em!important}

.brand-quicklinks{
  position:absolute;left:50%;bottom:12vh;z-index:18;transform:translateX(-50%);display:grid;grid-template-columns:repeat(2,minmax(280px,380px));gap:16px;
  opacity:0;pointer-events:none;transition:opacity .45s ease,transform .45s ease;
}
body.brand-video-frozen .brand-quicklinks,
body:not(.brand-video-active):not(.brand-video-preparing) .brand-quicklinks{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.brand-quicklink{
  display:flex;flex-direction:column;gap:7px;padding:18px 20px;border-radius:24px;min-height:108px;
  border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(10,10,10,.82),rgba(18,12,9,.74));
  backdrop-filter:blur(14px);box-shadow:0 22px 48px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05)
}
.brand-quicklink small{font:700 10px/1 var(--tech);letter-spacing:.22em;color:var(--gold2)}
.brand-quicklink strong{font:400 27px/1.02 var(--display);color:#fff}
.brand-quicklink span{font:600 13px/1.45 var(--body);color:rgba(255,255,255,.72)}
.brand-quicklink:hover{transform:translateY(-3px);border-color:rgba(226,197,121,.25)}
.brand-quicklink--water{background:linear-gradient(180deg,rgba(12,22,27,.86),rgba(18,14,12,.76))}

.world--coffee .world-copy{width:min(36vw,510px)!important}
.world--coffee .coffee-visual{left:1vw!important;width:55vw!important}
.world--coffee .coffee-pack--classic{left:3%!important;bottom:4%!important;width:55%!important}
.world--coffee .coffee-pack--duo{right:2%!important;top:9%!important;width:49%!important}
.world--coffee .label-a{left:3%!important;top:10%!important}
.world--coffee .label-b{right:8%!important;bottom:10%!important}
.world--coffee .coffee-marquee{bottom:2.5vh!important}

.world--water{background:#07141a;--next-color:#070b0d}
.water-stage{
  background:
    radial-gradient(circle at 72% 34%,rgba(92,171,198,.18),transparent 28%),
    radial-gradient(circle at 28% 62%,rgba(47,117,142,.18),transparent 24%),
    linear-gradient(135deg,#07141a 0%,#081117 45%,#0d1d24 100%);
}
.water-stage .world-ghost{color:rgba(150,214,235,.12)!important;opacity:.08!important}
.water-copy>small,.water-copy h2 em{color:#8fd0e2!important}
.water-copy p{color:rgba(226,242,247,.78)!important}
.world--water .world-summary{--summary-accent:#8fd0e2}
.water-visual{right:3vw!important;width:52vw!important;display:grid;place-items:center}
.water-ripple{position:absolute;border-radius:50%;border:1px solid rgba(143,208,226,.14);filter:blur(.2px)}
.ripple-a{width:64%;aspect-ratio:1;left:19%;top:8%;animation:waterRipple 8s ease-in-out infinite}
.ripple-b{width:40%;aspect-ratio:1;right:7%;top:26%;animation:waterRipple 6.5s ease-in-out -1.5s infinite}
.ripple-c{width:28%;aspect-ratio:1;left:7%;bottom:12%;animation:waterRipple 7.2s ease-in-out -2.8s infinite}
@keyframes waterRipple{0%,100%{transform:scale(.94);opacity:.4}50%{transform:scale(1.06);opacity:1}}
.water-core{position:relative;width:min(500px,78%);aspect-ratio:1;display:grid;place-items:center}
.water-core__halo{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,rgba(123,208,229,.24),rgba(123,208,229,.06) 46%,transparent 72%);filter:blur(18px)}
.water-core__glass{position:relative;width:42%;height:64%;border-radius:22px 22px 32px 32px;border:1px solid rgba(227,246,252,.55);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 26px 60px rgba(0,0,0,.22);overflow:hidden}
.water-core__fill{position:absolute;left:0;right:0;bottom:0;height:66%;background:linear-gradient(180deg,rgba(144,217,237,.84),rgba(49,125,152,.78));box-shadow:inset 0 14px 28px rgba(255,255,255,.16);animation:waterLevel 5.4s ease-in-out infinite}
.water-core__surface{position:absolute;left:-8%;right:-8%;top:32%;height:18px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.7),rgba(255,255,255,.08) 72%);filter:blur(1px);animation:waterSurface 4.8s ease-in-out infinite}
@keyframes waterLevel{0%,100%{height:66%}50%{height:61%}}
@keyframes waterSurface{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.water-core__info{position:absolute;max-width:210px;padding:16px 18px;border-radius:18px;border:1px solid rgba(143,208,226,.14);background:rgba(5,16,22,.55);backdrop-filter:blur(14px);box-shadow:0 18px 34px rgba(0,0,0,.18)}
.water-core__info small{display:block;font:700 9px/1 var(--tech);letter-spacing:.22em;color:#8fd0e2;margin-bottom:7px}
.water-core__info strong{display:block;font:700 15px/1.08 var(--tech);letter-spacing:.08em;color:#fff;margin-bottom:5px}
.water-core__info span{display:block;font:600 12px/1.45 var(--body);color:rgba(231,245,250,.68)}
.water-info-a{left:-5%;top:18%}
.water-info-b{right:-4%;top:50%;transform:translateY(-50%)}
.water-info-c{left:12%;bottom:4%}
.water-facts-strip{position:absolute;left:6vw;right:6vw;bottom:5vh;display:flex;align-items:center;gap:14px;color:rgba(143,208,226,.86);font:700 9px/1 var(--tech);letter-spacing:.28em;text-transform:uppercase}
.water-facts-strip i{flex:1;height:1px;background:linear-gradient(90deg,rgba(143,208,226,.28),rgba(143,208,226,.04))}

.nocs-home-core span img,.nocs-icon img{object-fit:contain!important;background:transparent!important}
.nocs-home-core span{background:transparent!important;box-shadow:none!important}
.nocs-badge{
  padding:11px 16px 11px 11px!important;gap:12px!important;border-radius:999px!important;
  background:linear-gradient(135deg,rgba(6,11,17,.92),rgba(10,9,10,.84))!important;border:1px solid rgba(143,208,226,.18)!important;
  box-shadow:0 18px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.03)!important
}
.nocs-icon{width:42px!important;height:42px!important;background:radial-gradient(circle,rgba(137,212,236,.12),rgba(255,255,255,.02))!important;border-color:rgba(143,208,226,.24)!important}
.nocs-icon img{width:78%!important;height:78%!important}
.nocs-badge small{color:rgba(143,208,226,.82)!important}
.nocs-badge strong{font-size:11px!important;letter-spacing:.18em!important}

@media (max-width:1100px){
  .brand-quicklinks{grid-template-columns:1fr;bottom:10vh;width:min(88vw,420px)}
  .topbar-shell{grid-template-columns:minmax(250px,1fr)!important;gap:12px!important}
  .topnav{justify-content:flex-start!important;overflow:auto!important;padding-bottom:2px!important}
  .topbar-cta{justify-self:start!important}
  .world--coffee .world-copy{width:min(44vw,520px)!important}
  .water-visual{width:48vw!important}
}
@media (max-width:800px){
  .topbar{top:10px!important;left:10px!important;right:10px!important}
  .topbar-shell{padding:12px!important;border-radius:24px!important}
  .topbrand-mark{width:68px;height:68px;flex-basis:68px;border-radius:20px;padding:3px}
  .topbrand img{width:62px!important;height:62px!important}
  .topbrand-copy strong{font-size:15px!important}
  .topbrand-copy em{font-size:9px!important;letter-spacing:.12em!important}
  .topnav a{padding:11px 12px!important}
  .topnav a span{min-width:22px!important;height:22px!important}
  .brand-quicklinks{position:relative;left:auto;bottom:auto;transform:none!important;width:100%;padding:0 16px;margin-top:clamp(320px,42vh,440px);grid-template-columns:1fr;z-index:22}
  body.brand-video-frozen .brand-quicklinks,body:not(.brand-video-active):not(.brand-video-preparing) .brand-quicklinks{transform:none!important}
  .brand-quicklink strong{font-size:22px}
  .brand-quicklink span{font-size:12px}
  .world--coffee .coffee-visual{width:100%!important;left:auto!important}
  .world--coffee .coffee-pack--classic{width:68%!important;left:-6%!important;bottom:2%!important}
  .world--coffee .coffee-pack--duo{width:60%!important;right:-4%!important;top:9%!important}
  .water-visual{width:100%!important;right:auto!important}
  .water-core{width:min(430px,92%)}
  .water-core__info{max-width:none;position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;width:100%;margin-top:12px}
  .water-visual{display:flex!important;flex-direction:column;gap:12px;align-items:center}
  .water-facts-strip{position:relative;left:auto;right:auto;bottom:auto;gap:10px;flex-wrap:wrap;margin-top:18px;font-size:10px}
  .water-facts-strip i{min-width:20px}
  .nocs-badge{padding:10px 12px 10px 10px!important}
  .nocs-icon{width:36px!important;height:36px!important}
}


/* V09.39 transparent asset integration */
.repair-machine,.rental-machine,.coffee-pack,.coaching-visual>img{object-fit:contain!important;background:transparent!important}
.topbrand img, .brand-signature img, .finale img{object-fit:contain!important;background:transparent!important}
.nocs-home-core span img,.nocs-icon img{object-fit:contain!important;background:transparent!important}
.world--coffee .coffee-pack{filter:drop-shadow(0 26px 40px rgba(74,47,18,.20))!important}


/* === V09.40 refinements === */
.brand-quicklinks--single{display:grid;gap:10px;max-width:min(560px,72vw)}
.brand-quicklink--solo{min-height:unset;padding:24px 26px 24px 26px;box-shadow:0 18px 44px rgba(0,0,0,.18)}
.brand-quicklinks-note{margin:0;color:rgba(55,42,26,.72);font:600 clamp(12px,1vw,14px)/1.5 var(--body);max-width:50ch;text-wrap:pretty}
.coffee-stage{background:radial-gradient(circle at 71% 38%,rgba(255,255,255,.84),transparent 30%),linear-gradient(120deg,#f5eadc 6%,#e8d6ba 46%,#d0b080 100%)}
.coffee-copy h2{max-width:11ch}
.coffee-copy p{max-width:44ch}
.coffee-visual{left:1vw!important;right:auto;width:56vw!important;overflow:visible}
.coffee-pack-cluster{position:absolute;inset:0}
.coffee-pack{filter:drop-shadow(0 26px 42px rgba(74,47,18,.22))}
.coffee-pack--gold{left:5%;bottom:3%;width:34%;z-index:4}
.coffee-pack--copper{left:26%;top:3%;width:31%;z-index:3}
.coffee-pack--black{right:21%;top:10%;width:29%;z-index:2}
.coffee-pack--red{right:4%;bottom:11%;width:23%;z-index:3}
.coffee-pack--white{left:42%;bottom:-1%;width:22%;z-index:2}
.coffee-chip{position:absolute;max-width:220px;padding:14px 16px;border-radius:20px;border:1px solid rgba(87,57,22,.12);background:rgba(255,250,242,.72);backdrop-filter:blur(14px);box-shadow:0 14px 30px rgba(76,49,20,.12)}
.coffee-chip small{display:block;font:800 8px/1 var(--tech);letter-spacing:.18em;color:#93682b;margin-bottom:8px}
.coffee-chip b{display:block;font:800 12px/1.15 var(--body);letter-spacing:.01em;color:#27180c;margin-bottom:4px}
.coffee-chip span{display:block;font:600 10px/1.35 var(--body);color:rgba(39,24,12,.72)}
.coffee-chip--gold{left:-1%;top:10%}
.coffee-chip--copper{right:0;bottom:8%}
.coffee-chip--black{left:18%;bottom:11%}
.coffee-abo-board{position:absolute;right:8%;top:38%;width:min(290px,32vw);padding:18px 20px 20px;border-radius:24px;background:linear-gradient(180deg,rgba(20,11,5,.88),rgba(46,28,12,.82));border:1px solid rgba(191,148,76,.24);box-shadow:0 26px 44px rgba(51,29,9,.28)}
.coffee-abo-board small{display:block;margin-bottom:10px;font:800 8px/1 var(--tech);letter-spacing:.22em;color:#d7b57a}
.coffee-abo-board strong{display:block;font:700 18px/1.18 var(--display);color:#fff8ee;margin-bottom:10px}
.coffee-abo-board span{display:block;font:600 12px/1.55 var(--body);color:rgba(255,244,232,.78)}
.world--coffee.is-active-world .coffee-pack--gold{animation:coffeeFloatA 6.4s ease-in-out infinite}
.world--coffee.is-active-world .coffee-pack--copper{animation:coffeeFloatB 7.2s ease-in-out infinite}
.world--coffee.is-active-world .coffee-pack--black{animation:coffeeFloatC 6.8s ease-in-out infinite}
.world--coffee.is-active-world .coffee-pack--red{animation:coffeeFloatD 7.8s ease-in-out infinite}
.world--coffee.is-active-world .coffee-pack--white{animation:coffeeFloatE 5.9s ease-in-out infinite}
.world--coffee.is-active-world .coffee-chip{animation:fadeSlideUp .9s ease both}
.world--coffee.is-active-world .coffee-chip--copper{animation-delay:.18s}.world--coffee.is-active-world .coffee-chip--black{animation-delay:.3s}
.nocs-home-core--swarm{isolation:isolate}
.nocs-home-core--swarm .nocs-particle{position:absolute;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#f7ecc9 0%,#d9b45d 50%,rgba(217,180,93,.08) 100%);box-shadow:0 0 14px rgba(217,180,93,.45),0 0 28px rgba(139,216,223,.18);opacity:.88;z-index:1}
.nocs-home-core--swarm .p1{left:9%;top:26%;animation:nocsDot1 6s ease-in-out infinite}.nocs-home-core--swarm .p2{left:24%;top:11%;animation:nocsDot2 7.2s ease-in-out infinite}.nocs-home-core--swarm .p3{left:76%;top:15%;animation:nocsDot3 6.4s ease-in-out infinite}.nocs-home-core--swarm .p4{right:9%;top:42%;animation:nocsDot4 7.6s ease-in-out infinite}.nocs-home-core--swarm .p5{right:18%;bottom:10%;animation:nocsDot5 6.3s ease-in-out infinite}.nocs-home-core--swarm .p6{left:17%;bottom:10%;animation:nocsDot6 7.1s ease-in-out infinite}.nocs-home-core--swarm .p7{left:42%;bottom:4%;animation:nocsDot7 8.4s ease-in-out infinite}.nocs-home-core--swarm .p8{left:55%;top:5%;animation:nocsDot8 6.8s ease-in-out infinite}
.world--nocs.is-active-world .nocs-home-core>span{animation:nocs34pulse 3s ease-in-out infinite, nocsBob 6.8s ease-in-out infinite}
.nocs-home-question{backdrop-filter:blur(12px)}
.nocs-home-question span{text-wrap:balance}
@keyframes coffeeFloatA{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(-2deg)}}
@keyframes coffeeFloatB{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(-12px) rotate(6deg)}}
@keyframes coffeeFloatC{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(-5deg)}}
@keyframes coffeeFloatD{0%,100%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(-15px) rotate(2deg)}}
@keyframes coffeeFloatE{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(1deg)}}
@keyframes nocsBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes nocsDot1{0%,100%{transform:translate(0,0) scale(.9)}50%{transform:translate(10px,-10px) scale(1.15)}}
@keyframes nocsDot2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8px,12px) scale(.85)}}
@keyframes nocsDot3{0%,100%{transform:translate(0,0) scale(.9)}50%{transform:translate(8px,12px) scale(1.1)}}
@keyframes nocsDot4{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-10px,-6px) scale(.82)}}
@keyframes nocsDot5{0%,100%{transform:translate(0,0) scale(.9)}50%{transform:translate(5px,-14px) scale(1.12)}}
@keyframes nocsDot6{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(12px,-5px) scale(.88)}}
@keyframes nocsDot7{0%,100%{transform:translate(0,0) scale(.88)}50%{transform:translate(-7px,-10px) scale(1.16)}}
@keyframes nocsDot8{0%,100%{transform:translate(0,0) scale(.95)}50%{transform:translate(-12px,9px) scale(.86)}}
@media (max-width: 1100px){.coffee-visual{width:100%!important;left:auto!important}.coffee-pack--gold{width:42%;left:-3%}.coffee-pack--copper{width:38%;left:18%}.coffee-pack--black{width:34%;right:11%}.coffee-pack--red{width:27%;right:-1%}.coffee-pack--white{width:25%;left:46%}.coffee-abo-board{right:5%;top:42%;width:min(260px,52vw)}.coffee-chip{max-width:180px}.coffee-chip--gold{top:8%}.coffee-chip--black{left:8%;bottom:8%}}
@media (max-width: 820px){.brand-quicklinks--single{max-width:100%}.coffee-chip{display:none}.coffee-abo-board{left:5%;right:5%;top:auto;bottom:5%;width:auto}.coffee-pack--gold{width:50%;left:-4%}.coffee-pack--copper{width:43%;left:18%}.coffee-pack--black{width:39%;right:2%}.coffee-pack--red{width:29%;right:-3%;bottom:19%}.coffee-pack--white{display:none}}


/* === V09.41 N.O.C.S. live swarm + clear position === */
.nocs-home-core{overflow:visible}
.nocs-swarm-canvas{position:absolute;inset:-16%;width:132%;height:132%;z-index:1;pointer-events:auto;opacity:.94;filter:drop-shadow(0 0 12px rgba(132,215,230,.08))}
.nocs-home-core>i{z-index:2}.nocs-home-core>span{z-index:4}.nocs-home-core>.nocs-particle{z-index:3}
.nocs-independence{margin-top:14px;display:grid;gap:5px;padding:14px 16px;border-radius:18px;border:1px solid rgba(226,197,121,.14);background:linear-gradient(180deg,rgba(226,197,121,.06),rgba(255,255,255,.015));max-width:620px}
.nocs-independence small{font:800 8px/1 var(--tech);letter-spacing:.2em;color:var(--gold2)}
.nocs-independence strong{font:700 15px/1.2 var(--body);color:#fff}
.nocs-independence span{font:600 12px/1.45 var(--body);color:rgba(255,255,255,.66)}
@media(max-width:820px){.nocs-independence{margin-top:10px;padding:12px 13px}.nocs-swarm-canvas{inset:-8%;width:116%;height:116%}}