@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');
*{box-sizing:border-box}body{margin:0;background:#301b13;color:#f4e9d9;font-family:'DM Sans',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #e6b65f;outline-offset:6px}.hero{isolation:isolate;position:relative;min-height:850px;height:100svh;overflow:hidden;background:radial-gradient(ellipse at 67% 43%,#805037 0,#543222 34%,#382016 66%,#29180f 100%)}.grain{position:absolute;inset:0;z-index:-1;opacity:.085;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23n)'/%3E%3C/svg%3E")}.halo{position:absolute;width:50vw;height:50vw;right:5%;top:9%;border-radius:50%;background:#bf8550;filter:blur(130px);opacity:.11;z-index:-1}header{height:125px;margin:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eedac51a}.logo{text-decoration:none;color:#f8d66e;font-family:'Playfair Display',serif;font-style:italic;font-size:36px;line-height:1}.logo strong{font-size:52px;font-weight:600;letter-spacing:-5px}.logo span{display:block;font:7px 'DM Sans';letter-spacing:2px;color:#e7d5bd;margin-top:8px}.header-note{font-size:9px;letter-spacing:3px;opacity:.55}.collection{background:none;border:0;font-size:12px}.collection span{margin-left:30px;color:#d7af75}.stage{height:calc(100% - 265px);position:relative;margin:0 10%;display:flex;align-items:center}.copy{width:53%;z-index:3;padding-bottom:10px}.eyebrow{font-size:9px;letter-spacing:2.5px;color:#d8b788;display:flex;align-items:center;gap:11px}.eyebrow>span{width:22px;height:1px;background:#d8b788}.intro{font-family:'Playfair Display',serif;font-size:20px;font-style:italic;color:#d0ae8a;margin:34px 0 15px}h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(52px,5.6vw,90px);font-weight:500;line-height:1.08;letter-spacing:-3px;margin:0 0 27px}h1 em{color:#e4bd79;font-weight:500}.description{font-size:13px;line-height:1.9;color:#cbb7a3;margin-bottom:29px}.cta{padding:16px 25px;border:1px solid #d6b583;background:#dfbc82;color:#332014;font-size:11px;font-weight:600}.cta span{margin-left:34px;font-size:17px}.tagline{font-size:9px;margin-top:25px;color:#bda48c;display:flex;gap:9px;align-items:center}.tagline i{height:4px;width:4px;background:#c8a66f;border-radius:50%}.visual{position:absolute;right:-1%;height:100%;width:52%;display:flex;align-items:center;justify-content:center}.backword{position:absolute;top:1%;left:-5%;font-family:Georgia,serif;font-size:min(37vw,560px);font-style:italic;color:#d3a86c;opacity:.055;letter-spacing:-40px}.orbit{position:absolute;width:480px;height:480px;max-width:95%;border:1px solid #e4b97c16;border-radius:50%;transform:rotate(-18deg) scaleY(.82)}.product-wrap{height:90%;max-height:590px;z-index:2;animation:float 7s ease-in-out infinite;filter:drop-shadow(22px 32px 20px #180d0ab0)}#product{height:100%;max-width:100%;object-fit:contain;transform:rotate(9deg)}.product-label{position:absolute;bottom:1%;left:31%;display:flex;gap:22px;font-size:8px;letter-spacing:2px;color:#cbb291}.product-label span+span{opacity:.5}.round-note{position:absolute;right:-8%;top:14%;width:102px;height:102px;border:1px solid #cda77855;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:6px;letter-spacing:1px;line-height:1.6;transform:rotate(13deg);color:#dfc29a}.round-note b{font-family:Georgia,serif;font-size:16px;font-style:italic;letter-spacing:0;font-weight:400}.round-note span{margin-top:7px;font-size:13px}.side-index{position:absolute;right:-9%;top:43%;display:flex;flex-direction:column;align-items:center;gap:15px;font-size:10px;color:#b79673}.side-index span:first-child{font-size:19px;color:#e3c69c}.side-index i{height:65px;width:1px;background:#c7a37440}footer{position:relative;z-index:5;height:140px;margin:0 6%;border-top:1px solid #eedac524;display:flex;align-items:center;gap:30px}.footer-label{font-size:8px;letter-spacing:1.5px;line-height:2;color:#b79c81;min-width:140px}.footer-label b{font-family:Georgia,serif;font-size:15px;letter-spacing:0;color:#f3dfc3;font-weight:400;font-style:italic}nav{display:flex;flex:1;justify-content:space-between;gap:12px}nav button{background:none;border:0;border-top:1px solid transparent;padding:15px 0;text-align:left;color:#a98c73;position:relative;font-size:10px;line-height:1.6}nav button span{font-size:7px;letter-spacing:1px;display:block;opacity:.6}nav button.active{color:#efd0a0}nav button.active:before{content:'';height:2px;width:24px;background:#d6ae6e;position:absolute;top:0}.arrows{display:flex;gap:10px}.arrows button{width:40px;height:40px;border-radius:50%;background:none;border:1px solid #b18a6155;font-size:18px}.arrows button:hover{background:#c59f6333}.pause{font-size:12px;background:none;border:0;padding:10px;color:#c7a57a}.timer{height:2px;background:#c29a5f20;position:absolute;bottom:0;left:0;right:0}#progress{height:100%;background:#cea15f;width:0}.bean{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:calc(var(--size)*.64);transform:rotate(var(--r));filter:drop-shadow(5px 12px 7px #160a09b0) blur(var(--blur));animation:beanfloat var(--duration) ease-in-out infinite alternate;z-index:1;pointer-events:none}.beans{position:absolute;inset:0;pointer-events:none}.swapping .copy,.swapping .product-wrap{animation:enter .75s ease both}.swapping .product-wrap{animation-delay:.08s}@keyframes float{50%{transform:translateY(-17px) rotate(-2deg)}}@keyframes beanfloat{to{transform:translate(10px,-22px) rotate(calc(var(--r) + 18deg))}}@keyframes enter{from{opacity:0;translate:30px 15px;filter:blur(7px)}to{opacity:1;translate:0 0}}dialog{width:min(900px,92vw);max-height:85svh;overflow:auto;background:#3d251a;color:#f0ddc3;border:1px solid #b68d6255;padding:40px}dialog::backdrop{background:#180d0cbb;backdrop-filter:blur(10px)}dialog h2{font:36px 'Playfair Display',Georgia;margin:20px 0 30px}.close{position:absolute;right:15px;top:10px;background:none;border:0;font-size:28px}#catalog{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}#catalog button{border:1px solid #b68d6233;background:#ffffff04;padding:18px 8px;font-size:12px}#catalog button:hover{background:#ffffff10}#catalog img{height:150px;display:block;margin:0 auto 15px;max-width:100%;object-fit:contain}@media(min-width:1600px){.copy{padding-left:3%}}@media(max-width:900px){.header-note{display:none}.hero{min-height:780px}.stage{margin:0 7%}.copy{width:58%}h1{font-size:57px}.visual{right:-8%;width:55%}.round-note{right:10%;top:9%}.product-wrap{height:76%}footer{gap:18px}.footer-label{display:none}nav button{font-size:9px}.side-index{display:none}}@media(max-width:600px){.hero{height:100svh;height:100vh;min-height:0;max-height:100svh;overflow:hidden}header{height:64px;margin:0 6%}.logo{font-size:25px}.logo strong{font-size:36px}.logo span{font-size:5px}.collection{font-size:10px}.collection span{margin-left:8px}.stage{margin:0 6%}.tagline{display:none}footer{height:78px;margin:0 6%;gap:8px}nav{overflow:auto;gap:16px;scrollbar-width:none;justify-content:start}nav button{min-width:65px;font-size:10px}nav button span{font-size:6px}.arrows{gap:6px}.arrows button{width:32px;height:32px}.pause{padding:3px;width:32px;height:32px}.bean{width:calc(var(--size)*.65);height:calc(var(--size)*.42)}#catalog{grid-template-columns:repeat(2,1fr)}dialog{padding:28px 20px}dialog h2{font-size:28px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(min-width:901px){.hero{min-height:700px}.intro{margin-top:26px}}
/* Studio light and grounded depth */
.hero{background:radial-gradient(ellipse at 70% 44%,#976c48 0%,#6c452e 15%,#422719 34%,#25150e 58%,#130b08 88%)}
.halo{right:9%;top:13%;width:39vw;height:59%;background:#d4a56c;opacity:.18;filter:blur(75px)}
.vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 66% 46%,transparent 19%,#10080518 47%,#080402b8 100%)}
header,footer{z-index:6}header{position:relative}.stage{z-index:3}.copy{z-index:5}.visual{perspective:1000px}.backword{opacity:.025}.orbit{opacity:.4}.round-note{opacity:.65;right:-5%}
.scene-floor{position:absolute;left:0;right:0;top:65%;bottom:0;z-index:0;background:linear-gradient(180deg,transparent,#21130ed0 75%),radial-gradient(ellipse at 70% 28%,#bd8b5650,transparent 43%);transform:perspective(500px) rotateX(12deg);transform-origin:bottom}
.pedestal{position:absolute;width:83%;height:12%;bottom:3%;left:11%;border-radius:50% 50% 42% 42%;background:linear-gradient(100deg,#25170f,#61412b 44%,#352116 80%);box-shadow:0 24px 25px #090402aa,0 50px 55px #11070488;z-index:1}
.pedestal-top{position:absolute;inset:0 0 31%;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#8a6342,#67452f 55%,#382316 100%);box-shadow:inset 0 2px 2px #e0b47c36;border-bottom:1px solid #aa794725}
.pedestal:after{content:'';position:absolute;width:65%;height:40%;left:18%;top:0;background:#120a07aa;filter:blur(12px);border-radius:50%}
.product-wrap{height:85%;max-height:550px;margin-bottom:3%;filter:drop-shadow(15px 22px 13px #120906b0);animation:product-breathe 8s ease-in-out infinite}#product{transform:rotate(5deg)}.product-label{bottom:-4%;z-index:4}.departing-product{position:absolute;animation:none!important;pointer-events:none;z-index:3}.departing-copy{pointer-events:none;z-index:6}.swapping .copy,.swapping .product-wrap{animation:none}
.fog{position:absolute;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='500'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005 .014' numOctaves='4' seed='12'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .74 0 0 0 0 .65 0 0 0 0 .53 0 0 0 .6 -.22'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");background-size:100% 100%;mask-image:radial-gradient(ellipse,black 10%,transparent 70%)}
.fog-back{width:95%;height:55%;right:-20%;top:24%;opacity:.55;z-index:1;animation:mist-drift 24s ease-in-out infinite alternate}
.fog-front{width:110%;height:33%;left:7%;bottom:10%;opacity:.4;z-index:4;animation:mist-drift 31s ease-in-out infinite alternate-reverse;filter:blur(10px)}
.bean{height:var(--size);object-fit:contain;z-index:2;filter:drop-shadow(5px 12px 7px #090402b0) blur(var(--blur));opacity:.92}.beans{z-index:4}.copy{position:relative}.eyebrow{color:#e0bc85}.header-note{opacity:.7}
@keyframes mist-drift{from{transform:translateX(-4%) scale(1)}to{transform:translateX(6%) translateY(-3%) scale(1.12)}}
@keyframes product-breathe{50%{translate:0 -5px}}
@media(max-width:600px){.hero{background:radial-gradient(ellipse at 76% 63%,#9a7048 0,#65412b 16%,#362015 39%,#130b08 85%)}.visual{bottom:7%;height:44%}.product-wrap{height:95%;margin-bottom:9%}.pedestal{bottom:1%;height:13%;width:90%;left:1%}.product-label{bottom:-7%}.fog-back{top:42%;height:45%;width:140%;right:-50%}.fog-front{bottom:14%;height:27%;left:-6%;width:130%}.vignette{background:radial-gradient(ellipse at 67% 58%,transparent 20%,#08040288 100%)}.bean{height:calc(var(--size)*.65)}.copy{position:relative}.scene-floor{top:70%}}
.beans{z-index:2}
@media(max-width:600px){.bean:nth-child(1){left:3%;top:49%}.bean:nth-child(2){left:86%;top:18%}.bean:nth-child(9){left:42%;top:56%}.fog-front{opacity:.48}}
.product-wrap img{height:100%;max-width:100%;object-fit:contain;transform:rotate(5deg)}