@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600;650;700;750;800&family=Oswald:wght@300;400&display=swap');
:root{--bg:#302018;--cream:#e0b77d;--text:#c2b29c;--mint:#87b7a7;--panel:#ffffff0d}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;background:radial-gradient(ellipse at 80% 22%,#62443033,transparent 43%),radial-gradient(ellipse at 15% 50%,#67493620,transparent 40%),var(--bg);color:var(--text);font-family:'DM Sans',Arial,sans-serif;font-size:16px;overflow-x:hidden}body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.15;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.2' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--cream);outline-offset:5px}.wrap{width:min(1160px,90%);margin-inline:auto}.header{display:flex;align-items:center;justify-content:space-between;height:125px;gap:30px;position:relative;z-index:5}.logo{font-family:'Oswald',sans-serif;font-weight:300;letter-spacing:1px;font-size:34px;color:#e4cfaa;position:relative}.logo>span{font-size:23px;display:inline-block;transform:rotate(-13deg);padding:0 2px}.logo small{display:block;font:9px 'DM Sans',sans-serif;letter-spacing:6px;text-align:center;margin-top:0}nav{display:flex;align-items:center;background:#ffffff0b;border:1px solid #ffffff05;border-radius:23px;padding:20px 30px;gap:35px;font-size:13px}nav a{opacity:.7;transition:.2s}nav a:hover,nav a.active{opacity:1;color:var(--cream)}.header-actions{display:flex;align-items:center;gap:22px}.button{display:inline-flex;align-items:center;justify-content:center;gap:30px;padding:13px 29px;min-width:208px;background:var(--mint);border:none;border-radius:32px;color:#283c34;font-size:15px;font-weight:650;transition:transform .2s,background .2s}.button:hover{background:#a2cbbb;transform:translateY(-2px)}.button.small{font-size:12px;min-width:0;padding:11px 19px;gap:0}.bag{position:relative;background:none;border:0;color:var(--cream);width:28px;padding:0}.bag svg{width:25px}.bag span{position:absolute;right:-10px;top:-7px;font-size:9px;background:var(--cream);color:var(--bg);border-radius:100%;width:16px;height:16px;display:grid;place-items:center}.hero{height:610px;position:relative;display:flex;align-items:center}.hero-copy{position:relative;z-index:2;width:53%;padding-bottom:35px}h1{font-size:clamp(36px,4.1vw,57px);color:var(--cream);line-height:1.23;letter-spacing:-1.8px;font-weight:800;margin:0 0 30px}.hero-copy p{font-size:17px;line-height:1.65;max-width:402px;margin:0 0 30px}.hero-art{position:absolute;right:-6%;top:-18px;width:62%;height:650px;background:url('assets/hero.webp') center/contain no-repeat;pointer-events:none}.menu-section{position:relative;padding:75px 0 30px}.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;max-width:795px;margin:auto}.product{background:linear-gradient(135deg,#ffffff10,#ffffff08);border:1px solid #ffffff04;border-radius:25px;padding:80px 27px 25px;position:relative;text-align:center}.cup{position:absolute;left:50%;top:-116px;transform:translateX(-50%);width:155px;height:193px;background-position:center;background-repeat:no-repeat;background-size:contain}.cappuccino{background-image:url('assets/cappuccino.webp')}.latte{background-image:url('assets/latte.webp')}.mocha{background-image:url('assets/mocha.webp')}.rating{position:absolute;right:25px;top:63px;background:#f2ebd9;color:#584838;font-size:10px;font-weight:800;padding:1px 4px;border-radius:3px}.rating b{color:#c7ad55}.product h2{font-size:23px;color:#dfc49a;margin:11px 0 8px;font-weight:750;letter-spacing:-.4px}.product p{font-size:12px;line-height:1.55;margin:0 0 25px;opacity:.8}.product-bottom{display:flex;align-items:center;justify-content:space-between;text-align:left}.product strong{font-size:22px;font-weight:650;color:#d2bfa0}.product strong span{font-size:15px}.add{border:0;color:#385548;background:var(--mint);width:36px;height:36px;border-radius:50%;font-size:27px;font-weight:400;line-height:1;transition:.2s}.add:hover{transform:rotate(90deg);background:#b0d3c6}.menu-caption{text-align:center;font-size:11px;opacity:.5;margin-top:22px}.about{padding-top:32px}.section-title{text-align:center;color:var(--cream);font-size:30px;margin:0 0 45px;letter-spacing:-1px}.section-title span{font-weight:800}.about-grid{display:grid;grid-template-columns:1fr .95fr 1fr;grid-template-rows:250px 250px;column-gap:55px;max-width:1060px;margin:auto}.quality{position:relative;padding:0 10px 0 35px}.quality .number{position:absolute;left:0;top:-42px;color:#ffffff10;font-size:160px;font-weight:800;line-height:1;z-index:-1}.quality h3{font-size:25px;font-weight:450;line-height:1.35;margin:0 0 17px;color:#d3c1a5;letter-spacing:-.5px}.quality p{max-width:225px;font-size:13px;line-height:1.75;margin:0 0 0 24px;opacity:.75}.q1{grid-column:1;grid-row:1}.q2{grid-column:1;grid-row:2}.q3{grid-column:3;grid-row:1}.q4{grid-column:3;grid-row:2}.about-center{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.large-cup{background:url('assets/bruma-cup-hd.png') center/contain no-repeat;width:270px;height:390px;transform:rotate(-4deg)}.about-center .button{font-size:14px;min-width:220px;padding-inline:20px}.discover{padding-top:35px;padding-bottom:20px}.discover-box{position:relative;border:1px solid #ffffff08;border-radius:25px;min-height:225px;display:flex;align-items:center;padding:35px 70px;background:linear-gradient(110deg,#ffffff0e,#ffffff05);overflow:visible}.discover h2{color:#dfc49e;font-weight:600;font-size:31px;line-height:1.3;letter-spacing:-.5px;margin:0 0 22px}.beige{background:#baa080;color:#46382c;min-width:180px;font-size:13px;padding:11px 23px}.beige:hover{background:#d4ba96}.beans{position:absolute;right:-6%;bottom:-60px;width:49%;height:400px;background:url('assets/beans.webp') center/contain no-repeat;pointer-events:none}footer{display:flex;align-items:center;gap:25px;padding:30px 0 35px;font-size:10px;opacity:.5}footer span{letter-spacing:2px}footer small{margin-left:auto;font-size:10px}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:#d9c4a4;color:#302018;padding:15px 25px;border-radius:30px;z-index:20;font-size:14px;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{background:#3d2b22;color:var(--text);border:1px solid #ac927744;border-radius:25px;padding:40px;max-width:460px;width:90%;box-shadow:0 25px 90px #0008}dialog::backdrop{background:#140d0ac9;backdrop-filter:blur(6px)}dialog h2{font-size:29px;color:var(--cream);margin:15px 0 25px}.close{position:absolute;right:20px;top:13px;background:none;border:0;color:var(--text);font-size:30px}.eyebrow{letter-spacing:2px;font-size:10px;color:var(--mint)}.total{display:flex;justify-content:space-between;border-top:1px solid #ffffff19;padding-top:20px;margin-top:22px}.demo-note{font-size:12px;line-height:1.6;opacity:.7;margin:22px 0}.order-row{display:flex;align-items:center;justify-content:space-between;font-size:14px;padding:12px 0}.remove{border:0;background:none;color:var(--mint);padding:6px;font-size:12px}.quiz-options{display:grid;gap:10px}.quiz-options button{background:#ffffff08;border:1px solid #ffffff18;border-radius:12px;color:var(--text);padding:17px;text-align:left}.quiz-options button:hover{border-color:var(--mint)}#quiz-content p{line-height:1.7}#quiz-content .button{margin-top:20px}
@media(min-width:1450px){.hero-art{right:-3%;width:63%}.hero{height:650px}.menu-section{padding-top:85px}}
@media(max-width:900px){.header{height:105px;gap:15px}nav{gap:20px;padding:17px 22px}.header-actions .small{display:none}.hero{height:520px}.hero-art{height:550px;right:-11%;width:68%}h1{font-size:42px}.hero-copy p{font-size:15px;max-width:310px}.menu-grid{gap:20px;max-width:670px}.product{padding-inline:19px}.about-grid{column-gap:15px}.quality{padding-left:20px}.quality h3{font-size:22px}.quality p{font-size:12px;margin-left:5px}.large-cup{width:220px}.about-center .button{min-width:190px;font-size:12px}.discover-box{padding:35px}.discover h2{font-size:27px}}
@media(max-width:600px){.wrap{width:89%}.header{height:95px}.logo{font-size:28px}.logo small{font-size:7px}nav{gap:18px;padding:14px 18px;font-size:11px}nav a:last-child{display:none}.header-actions{gap:0}.bag{width:22px}.hero{height:720px;display:block;padding-top:26px}.hero-copy{width:100%;padding:0}.hero-copy h1{font-size:38px;line-height:1.18;letter-spacing:-1px;margin-bottom:19px}.hero-copy p{font-size:14px;max-width:270px;margin-bottom:22px}.hero-copy .button{font-size:13px;padding:11px 22px;min-width:190px}.hero-art{top:293px;right:-10%;width:107%;height:440px;z-index:0}.menu-section{padding-top:32px}.menu-grid{gap:12px;grid-template-columns:repeat(3,1fr)}.product{border-radius:17px;padding:51px 10px 15px}.cup{width:100px;height:131px;top:-77px}.rating{top:41px;right:10px;font-size:8px}.product h2{font-size:14px;margin-top:14px}.product p{font-size:9px;margin-bottom:17px;line-height:1.55}.product strong{font-size:13px;white-space:nowrap}.product strong span{font-size:10px}.product-bottom{gap:4px}.add{width:24px;height:24px;font-size:20px;flex-shrink:0}.menu-caption{font-size:10px;margin-top:18px}.about{padding-top:22px}.section-title{font-size:26px;margin-bottom:30px}.about-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;gap:36px 23px}.quality{padding:0 0 0 8px}.quality h3{font-size:20px;margin-bottom:12px}.quality p{font-size:11px;margin-left:0;line-height:1.7}.quality .number{font-size:110px;top:-23px;left:-7px}.q1{grid-column:1;grid-row:1}.q3{grid-column:2;grid-row:1}.about-center{grid-column:1/3;grid-row:2}.large-cup{height:285px;width:220px;margin-top:-20px}.q2{grid-column:1;grid-row:3}.q4{grid-column:2;grid-row:3}.about-center .button{margin-top:0;min-width:210px}.discover{padding-top:70px}.discover-box{padding:26px 22px 125px;min-height:280px;border-radius:20px}.discover h2{font-size:24px}.beans{width:70%;right:-12%;bottom:-60px;height:250px}.beige{font-size:12px;min-width:175px}footer{padding-top:35px;flex-wrap:wrap;gap:12px}footer p{font-size:9px}footer small{width:100%;margin:0}.toast{width:max-content;max-width:90%;text-align:center;font-size:12px}dialog{padding:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
.hero-art{-webkit-mask-image:linear-gradient(to right,transparent,black 9%,black 92%,transparent),linear-gradient(to bottom,transparent,black 5%,black 91%,transparent);mask-image:linear-gradient(to right,transparent,black 9%,black 92%,transparent),linear-gradient(to bottom,transparent,black 5%,black 91%,transparent);mask-composite:intersect}.beans{mask-image:radial-gradient(ellipse at center,#000 46%,transparent 73%)}
.hero-art,.beans{mix-blend-mode:lighten}.quality{isolation:isolate}.quality .number{z-index:-1}

.hero-motion{background:none;mix-blend-mode:normal;mask-image:none;-webkit-mask-image:none;display:flex;justify-content:center;align-items:center}.hero-motion video{display:block;max-width:100%;height:100%;object-fit:contain;mask-image:radial-gradient(ellipse 69% 67% at center,#000 53%,transparent 77%)}@media(max-width:600px){}

.hero-motion video{min-width:0}@media(max-width:600px){}

.hero-motion video{pointer-events:none;user-select:none}

/* Subtle coffee silhouettes, flowing lines and warm ambient light. */
body{position:relative;isolation:isolate;background:radial-gradient(ellipse at 9% 34%,#986b4030,transparent 28%),radial-gradient(ellipse at 88% 59%,#b28c6021,transparent 32%),radial-gradient(ellipse at 60% 6%,#6f493328,transparent 40%),var(--bg)}
.background-art{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:url('assets/background-details.svg') center top/100% 100% no-repeat}
@media(max-width:600px){.background-art{background-size:auto 100%;opacity:.75}}

.creator-credit{display:inline-flex;align-items:center;gap:11px;margin:0 0 24px;padding:10px 18px;background:#87b7a71a;border:1px solid #87b7a777;border-radius:12px;color:#d8e9df;box-shadow:0 4px 24px #00000012}.creator-credit span{font-size:18px;font-weight:500;letter-spacing:.2px}.creator-credit strong{font-size:27px;line-height:1;font-weight:800;letter-spacing:1.5px;color:#a7d4c1}@media(max-width:600px){.creator-credit{margin-bottom:18px;padding:9px 15px;gap:10px}.creator-credit span{font-size:16px}.creator-credit strong{font-size:24px}.hero{height:785px}.hero-art{top:355px}}