:root{--glass:rgba(36,23,17,.68)}body.immersive{background:#281b15}.ambient-film{position:fixed;inset:0;z-index:-1;pointer-events:none}.ambient-film>img{width:100%;height:100%;object-fit:cover}.ambient-film>div{position:absolute;inset:0;background:rgba(25,16,11,.36)}.floating-brand{position:fixed;top:24px;inset-inline-start:30px;z-index:40;filter:drop-shadow(0 12px 20px #0004)}.floating-brand .brand-logo{border-radius:12px;box-shadow:0 0 0 1px #ffedcf50,0 10px 30px #0003;transform:scale(.82);transform-origin:top left}.floating-language{position:fixed;top:30px;inset-inline-end:30px;z-index:40}.floating-language .language-picker{margin:0}.floating-language select{background:var(--glass);color:#fff0d6;border:1px solid #fff4dc65;border-radius:30px;padding:13px 18px;max-width:180px;box-shadow:0 10px 30px #0003;backdrop-filter:blur(16px)}.floating-language option{background:#35221b;color:#fff0d6}.floating-dock{position:fixed;top:24px;bottom:auto;left:50%;transform:translateX(-50%);z-index:40;width:max-content;max-width:calc(100% - 28px)}.floating-dock nav{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;padding:8px;border:1px solid #fff1d855;background:rgba(38,23,16,.76);backdrop-filter:blur(20px);border-radius:40px;box-shadow:0 16px 50px #0005;color:#fff0dc;font-size:14px}.floating-dock nav a{border-radius:28px;padding:13px 23px;white-space:nowrap;transition:transform .2s,background .2s;display:block}.floating-dock nav a:hover{background:#fff1d825;color:#fff;transform:translateY(-4px)}.floating-dock nav a[aria-current=page]{background:var(--cream);color:var(--ink);box-shadow:0 5px 15px #0003}.film-pin{perspective:1200px}.film-title{transform:translateY(-50%) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .18s ease-out;top:49%;max-width:670px}.film-title h1{transform:translateZ(45px);text-shadow:0 6px 26px #0006}.film-title .eyebrow{transform:translateZ(25px)}.film-title .button{transform:translateZ(65px);border-radius:40px;box-shadow:0 10px 0 #25170d40,0 25px 45px #0004;border-color:#fff4d8}.film-title .button:hover{background:white;box-shadow:0 7px 0 #25170d40,0 18px 35px #0004}.film-caption{bottom:112px}.film-progress{bottom:0}.immersive .overview,.immersive .next-section,.immersive .site-footer,.interior .page-intro,.interior .section{background:var(--glass);color:#fff1db;backdrop-filter:blur(16px);border:1px solid #fff0d833;border-radius:22px;margin:30px 4%;padding:60px 5%;box-shadow:0 20px 65px #0003}.immersive .overview{margin-top:40px}.immersive .site-footer{margin-bottom:125px}.immersive .chapter-grid>a{background:#e8dfcc15;border:1px solid #fff0d840;border-radius:14px;box-shadow:0 10px 25px #0002}.immersive .chapter-grid>a:hover{background:#e8dfcc25}.immersive .chapter-grid span,.immersive .chapter-grid b,.immersive em,.immersive .eyebrow,.immersive .roast-list a{color:#efd0a9}.immersive .button{border-radius:30px;box-shadow:0 10px 25px #0003}.interior main{padding-top:125px}.interior .page-intro{margin-top:15px}.interior .page-intro:after{display:none}.interior .page-intro h1{font-size:clamp(48px,5.5vw,84px)}.interior .cards .card{border-radius:16px;box-shadow:0 20px 30px #0004;transition:transform .2s}.interior .cards .card:hover{transform:perspective(1000px) translateY(-5px) rotateX(2deg)}.interior .filters button,.interior .brew-tabs button{border-color:#fff0d855;color:#fff0dc;border-radius:24px}.interior .filters button.selected,.interior .brew-tabs button.selected{background:var(--cream);color:var(--ink)}.interior thead{background:#fff0d825}.interior caption{color:#efd0a9}.interior th,.interior td,.interior details{border-color:#fff0d840}.interior .brew-panel{border-color:#fff0d855;border-radius:16px}.interior .roast-list article>span{color:#efd0a9}.interior .product-word i{color:inherit}.interior .card .card-top{color:inherit}.immersive .footer-grid p{color:#e8dccb}html[dir=rtl] .floating-brand .brand-logo{transform-origin:top right}html[dir=rtl] .floating-dock nav{flex-direction:row}html[dir=rtl] .film-title{left:auto;right:6%;transform:translateY(-50%) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}@media(max-width:760px){.floating-brand{top:15px;inset-inline-start:18px}.floating-brand .brand-logo{transform:scale(.63)}.floating-language{top:20px;inset-inline-end:18px}.floating-language select{font-size:13px;padding:10px 12px}.floating-dock{top:100px;bottom:auto;width:calc(100% - 24px)}.floating-dock nav{gap:2px;padding:6px;border-radius:25px;font-size:12px}.floating-dock nav a{padding:10px 11px}.film-title,html[dir=rtl] .film-title{top:auto;bottom:170px;transform:none;left:6%;right:6%}.film-caption{bottom:125px;font-size:11px}.film-title h1{font-size:clamp(48px,10vw,74px)}.immersive .overview,.immersive .next-section,.immersive .site-footer,.interior .page-intro,.interior .section{margin-inline:14px;padding:38px 22px;border-radius:18px}.interior main{padding-top:190px}.immersive .site-footer{margin-bottom:155px}.floating-dock nav a[aria-current=page]{box-shadow:none}}@media(prefers-reduced-motion:reduce){.film-title,.film-title h1,.film-title .button,.film-title .eyebrow{transform:none!important;transition:none!important}.film-title{top:30%}.interior .cards .card:hover,.floating-dock nav a:hover{transform:none}}

.film-shade{background:linear-gradient(90deg,rgba(19,10,5,.72),rgba(19,10,5,.22) 54%,transparent 80%),linear-gradient(0deg,rgba(19,10,5,.52),transparent 35%)}.film-caption{color:#fff4df;text-shadow:0 2px 7px #000}.immersive a:focus-visible,.immersive button:focus-visible,.immersive select:focus-visible{outline:3px solid #fff1cf;outline-offset:5px}

@media(min-width:761px) and (max-width:980px){.floating-dock{top:125px}.interior main{padding-top:205px}}

/* Contact cards float above the original footage. */
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:35px}.contact-card{padding:30px;border:1px solid #fff0d84d;border-radius:20px;background:#fff1d810;box-shadow:0 15px 35px #0002}.contact-icon{display:inline-grid;place-items:center;width:48px;height:48px;border:1px solid #fff0d85c;border-radius:50%;font-size:28px;margin-bottom:20px}.contact-card h3{font-size:28px}.contact-card p{margin-top:12px;color:#eadcc7}.contact-card a{display:inline-block;margin-top:16px;overflow-wrap:anywhere}.floating-dock nav a{padding-inline:18px}@media(max-width:1100px) and (min-width:761px){.floating-dock{top:125px}.interior main{padding-top:205px}}@media(max-width:760px){.floating-dock nav a{padding-inline:10px}.contact-grid{grid-template-columns:1fr}.contact-card{padding:24px}}

/* Branded pointer uses the supplied Mazo icon, with native fallbacks. */
@media (hover:hover) and (pointer:fine){body.immersive,body.immersive *{cursor:url('/mazo-cursor.png') 16 16,auto}body.immersive a,body.immersive button,body.immersive select,body.immersive summary,body.immersive [role=button]{cursor:url('/mazo-cursor.png') 16 16,pointer}body.immersive input,body.immersive textarea,[contenteditable=true]{cursor:text}}

/* Supplied Mazo wordmark replaces the packaging crop. */
.immersive .brand-logo,.immersive .floating-brand .brand-logo{display:block;width:150px;height:auto;overflow:visible;border-radius:0;box-shadow:none;transform:none;line-height:0}.immersive .brand-logo .mazo-wordmark{display:block;width:100%;height:auto;max-width:100%;position:static}.immersive .floating-brand{top:27px}.immersive .site-footer .brand-logo{width:180px;margin-bottom:18px}@media(max-width:760px){.immersive .floating-brand{top:20px}.immersive .floating-brand .brand-logo{width:115px}}

/* Arabic display type is limited to headlines; other text keeps Tahoma/Arial. */




/* White Mazo wordmark, preserving the original transparent silhouette. */
.immersive .brand-logo .mazo-wordmark{filter:brightness(0) invert(1)}

/* Phone layouts keep navigation reachable and content within the screen. */
@media(max-width:760px){
 html{scroll-padding-top:160px}
 .floating-brand{inset-inline-start:16px}.floating-language{inset-inline-end:16px;top:16px}
 .floating-language select{min-height:44px;font-size:16px;max-width:155px}
 .floating-dock{top:76px;width:calc(100% - 24px)}
 .floating-dock nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;border-radius:18px;padding:5px;font-size:12px}
 .floating-dock nav a{padding:10px 3px;min-height:44px;text-align:center;white-space:normal;display:flex;align-items:center;justify-content:center;line-height:1.25}
 .film-scene{height:180svh}.film-title,html[dir=rtl] .film-title{bottom:130px;left:6%;right:6%;top:auto;transform:none}
 .film-title h1{font-size:clamp(42px,11vw,72px)}.film-title .button{margin-top:22px;min-height:48px}
 .film-caption{bottom:34px;align-items:center;gap:12px;letter-spacing:.4px}.film-skip{min-height:44px;display:flex;align-items:center;flex-shrink:0}
 .interior main{padding-top:175px}.interior .page-intro h1{font-size:clamp(40px,11vw,68px);overflow-wrap:anywhere}
 .immersive .overview,.immersive .next-section,.immersive .site-footer,.interior .page-intro,.interior .section{margin-inline:12px;padding:32px 20px}
 .immersive h2{font-size:clamp(34px,9vw,54px);overflow-wrap:anywhere}.immersive p{line-height:1.65}
 .card,.chapter-grid>a,.contact-card,.brew-panel{min-width:0}.catalog-photo{height:250px}.product-word{font-size:42px;overflow-wrap:anywhere}
 .card-bottom{gap:12px;flex-wrap:wrap}.card-bottom button{min-height:44px;padding:8px 0}
 .filters button,.brew-tabs button{min-height:44px}.brew-tabs{flex-wrap:wrap}.brew-tabs button{flex:1 1 85px}
 .footer-grid{grid-template-columns:1fr;gap:28px}.footer-grid>div:first-child{grid-column:auto}.footer-grid nav a{min-height:44px;display:flex;align-items:center}.immersive .site-footer{margin-bottom:24px}
 dialog{max-height:calc(100dvh - 32px);overflow:auto;width:calc(100% - 24px);padding:42px 22px 26px}dialog h2{font-size:42px;overflow-wrap:anywhere}dialog .close{width:44px;height:44px;top:5px}
 html[dir=rtl] .film-title h1{font-size:clamp(32px,8vw,48px)}html[dir=rtl] .product-word{font-size:34px}
}
@media(max-width:760px) and (max-height:560px){
 .floating-dock{top:65px}.floating-dock nav{grid-template-columns:repeat(7,minmax(0,1fr));font-size:11px}
 .film-title,html[dir=rtl] .film-title{bottom:68px}.film-title h1{font-size:38px}.film-title .eyebrow{margin-bottom:10px}.film-title .button{margin-top:14px;padding:12px 20px}.film-caption{bottom:12px}
}



.business-cta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:36px 4%;color:#fff1db}.business-cta a{display:flex;align-items:center;justify-content:space-between;min-height:110px;background:var(--glass);border:1px solid #fff0d855;border-radius:18px;padding:26px;font-size:18px;font-weight:600;line-height:1.5;backdrop-filter:blur(16px)}.business-cta a:hover{background:#853b29}@media(max-width:760px){.business-cta{grid-template-columns:1fr;margin:28px 12px;gap:12px}.business-cta a{min-height:80px;padding:22px;font-size:16px}}
@media(min-width:761px) and (max-width:1350px){.floating-dock{top:100px}.interior main{padding-top:185px}}

.product-order{display:inline-flex;padding:10px 18px;border:1px solid currentColor;border-radius:28px;min-height:44px;align-items:center;font-size:14px;font-weight:600}.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.story-preview{padding:24px;border:1px solid #fff3;border-radius:18px}.story-preview img{width:100%;height:200px;object-fit:cover;border-radius:12px}.story-preview h3{font-size:24px}.section[id]{scroll-margin-top:170px}@media(min-width:981px){.floating-dock{top:24px}.interior main{padding-top:145px}}@media(max-width:760px){.floating-dock nav{grid-template-columns:repeat(5,minmax(0,1fr));font-size:11px}.interior main{padding-top:140px}.story-grid{grid-template-columns:1fr}}

.mazo-counters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:40px 4%;padding:42px 28px;background:var(--glass);border:1px solid #fff0d844;border-radius:24px;backdrop-filter:blur(18px);color:#f2dfbe;scroll-margin-top:160px}.mazo-counters>div{position:relative;min-width:0;text-align:center;padding:12px 24px}.mazo-counters>div+div{border-inline-start:1px solid #fff0d833}.mazo-counters strong{display:block;font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-size:clamp(48px,5.5vw,84px);font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.counter-label{display:block;margin-top:12px;color:#fff1db;font-size:15px;line-height:1.6}.counter-accessible{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:760px){.mazo-counters{margin:28px 12px;padding:18px 10px;border-radius:18px}.mazo-counters>div{padding:12px 6px}.mazo-counters strong{font-size:clamp(28px,8vw,44px)}.counter-label{font-size:11px;line-height:1.5;overflow-wrap:anywhere}}@media(max-width:360px){.mazo-counters{grid-template-columns:1fr}.mazo-counters>div+div{border-inline-start:0;border-top:1px solid #fff0d833}.mazo-counters strong{font-size:42px}.counter-label{font-size:13px}}
.immersive .overview,.immersive .next-section,.immersive .site-footer,.interior .page-intro,.interior .section,.mazo-counters{backdrop-filter:none;background:rgba(36,23,17,.87)}@media(max-width:760px){.floating-dock nav,.floating-language select{backdrop-filter:none}}


/* Compact mobile navigation; native dialog supplies focus trapping and Escape. */
.mobile-menu-toggle{display:none}.mobile-menu-dialog{color:#f2dfc3;background:#21120df5;border:1px solid #b9946f66;border-radius:22px;width:calc(100% - 28px);max-width:500px;max-height:calc(100dvh - 40px);margin:auto;padding:70px 24px 30px;box-shadow:0 30px 100px #0009}.mobile-menu-dialog::backdrop{background:#0d0708aa;backdrop-filter:blur(12px)}.mobile-menu-dialog nav{display:flex;flex-direction:column;gap:8px}.mobile-menu-dialog nav a{font-size:25px;line-height:1.3;padding:18px 12px;border-bottom:1px solid #e5bb8033;text-decoration:none;color:#f2dfc3}.mobile-menu-dialog nav a[aria-current=page]{color:#e7b477}.mobile-menu-close{position:absolute;top:14px;inset-inline-end:18px;width:44px;height:44px;background:none;border:0;color:#f2dfc3;font-size:32px;cursor:pointer}.mobile-menu-open{overscroll-behavior:none}.mobile-menu-dialog{overscroll-behavior:contain}.mobile-menu-dialog[open] nav a{animation:menuReveal .4s both;animation-delay:calc(var(--menu-index)*.045s)}@keyframes menuReveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:760px){
 .mobile-menu-enabled .floating-dock{display:none!important}.mobile-menu-enabled .floating-brand{top:20px;inset-inline-start:16px}.mobile-menu-enabled .floating-brand .brand-logo{transform:none!important}.mobile-menu-enabled .floating-brand .mazo-wordmark{width:100px!important;height:auto!important;max-width:100px}.mobile-menu-enabled .floating-language{top:17px;inset-inline-end:76px}.mobile-menu-enabled .floating-language select{max-width:135px;font-size:12px;padding:12px 10px;min-height:44px}.mobile-menu-toggle{display:flex;position:fixed;top:17px;inset-inline-end:16px;width:46px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;border:1px solid #c1a58470;border-radius:14px;background:#28160de8;color:#f2dfc3;z-index:65;cursor:pointer}.mobile-menu-toggle span{display:block;width:20px;height:1.5px;background:currentColor;border-radius:2px}.mobile-menu-enabled.interior main{padding-top:95px}.mobile-menu-toggle:focus-visible,.mobile-menu-close:focus-visible{outline:2px solid #e9bd84;outline-offset:3px}
}
@media(prefers-reduced-motion:reduce){.mobile-menu-dialog[open] nav a{animation:none}}
@media(max-width:760px){.mobile-menu-enabled .floating-brand{width:clamp(70px,25vw,100px)}.mobile-menu-enabled .floating-brand .brand-logo{width:100%;min-width:0;gap:0}.mobile-menu-enabled .floating-brand .mazo-wordmark{width:100%!important;max-width:100%!important}.mobile-menu-enabled .floating-language select{max-width:min(135px,calc(100vw - 180px));padding-inline:8px}}

/* One calm background on every page. */
body.immersive,html body.immersive.film-home{background:#1a0e09}
body .ambient-film{background:radial-gradient(70% 55% at 78% 8%,#5a2c1a55,transparent 70%),radial-gradient(60% 50% at 8% 95%,#3a1a0f66,transparent 72%),linear-gradient(180deg,#1e110b,#150a06)}
body .ambient-film>img{display:none!important}
body .ambient-film>div{background:none!important}
