@font-face { font-family: Inter; src: url('/portfolio/coffeex/demo/assets/fonts/Inter-Variable.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
:root { --font-body: Inter, Arial, sans-serif; --ease-out: cubic-bezier(.23,1,.32,1); }
body { font-family: var(--font-body); font-size: 18px; }
p, input, textarea, button, label, .text-block, .text-block-2, .text-block-3,
.text-block-4, .text-block-5, .text-block-6, .text-block-7, .text-block-9,
.text-block-15, .text-block-31, .text-el, .client-text, .coffee-concept-note,
.local-dialog, .local-dialog p, .local-dialog button, .local-static-content p,
.local-flavor-list p, .local-flavor-list button, .cx-desktop-nav a,
.cx-header button, .cx-header .cx-packaging-link, .cx-search-input,
.cx-footer-nav a, .cx-footer-files a, .cx-footer-colophon p,
.cx-footer-colophon a, .cx-footer-explore, .cx-menu-panel a, body.cx-packaging {
  font-family: var(--font-body); letter-spacing: normal;
}
.text-block-2, .text-block-31, .text-el, .local-dialog p, .local-static-content p { line-height: 1.55; }
.text-block-3, .text-block-4, .text-block-5, .text-block-6, .text-block-7, .text-block-15 { line-height: 1.4; }
.cx-desktop-nav { gap: clamp(20px, 2.2vw, 36px); }
.cx-desktop-nav a, .cx-header .cx-packaging-link { font-size: 18px; }
.cx-header .cx-packaging-link { color: #fff; font-size: 20px; font-weight: 700; gap: 18px; }
.cx-header .cx-packaging-link:hover { color: #fff; background: var(--color-coffee-brown); }
.cx-header .cx-search-toggle { color: #fff; }
.cx-menu-panel a { font-size: clamp(22px, 3.2vw, 32px); font-weight: 600; }
.cx-footer-nav a, .cx-footer-files a { font-size: 20px; line-height: 1.5; }
.cx-footer-colophon p { font-size: 18px; line-height: 1.6; }
.cx-footer-explore { font-size: 20px; }
.local-dialog p { font-size: 20px; }


.hp-section-2 .section-2-heading { overflow: visible; }
.hp-section-2 .section-2-heading-item { width: 100%; left: 0; top: 24%; }
.hp-section-2 .heading { font-size: 10.4vw; line-height: 1.1; }
.hp-section-2 .packages-wrapper { justify-content: flex-start; padding-left: 9vw; }
.hp-section-2 img.image { width: auto; height: 66vh; max-width: 40vw; object-fit: contain; }
.hp-section-2 .section-2-subtitle-wrapper { left: auto; right: 7vw; top: 51%; bottom: auto; width: 33vw; margin: 0; align-items: flex-start; gap: 8px; z-index: 4; }
.hp-section-2 .subtitle { position: relative; inset: auto; margin: 0; }
.hp-section-2 .subtitle .text-block { padding: 8px 14px; font-size: 22px; font-weight: 600; line-height: 1.25; }
.hp-section-2 .section-2-subtitle-wrapper .text-block-2 { position: relative; inset: auto; width: 100%; margin: 16px 0 0; font-size: 18px; line-height: 1.55; text-align: left; }
.hp-section-2 .button-v-1 { left: 31vw; right: auto; top: auto; bottom: 7vh; width: 90px; height: 90px; }
.hp-section-2 .shadow { display: none; }
.text-block-15 { font-size: 16px; line-height: 1.3; }
.button-v-1 .text-block-15, .button-v-1 .text-block-15.small { font-size: 16px; line-height: 1.3; }
.hp-section-2 .gsap_split_line-mask { padding-block: 2px; margin-block: -2px; }


.video-package-wrapper { left: 5vw; right: auto; width: 35vw; }
.video-package-wrapper #hero-canvas { width: auto; height: 72vh; max-width: 39vw; }
.video-package-wrapper .button-v-1 { right: -1vw; left: auto; width: 90px; height: 90px; }
.video-package-wrapper .text-block-15 { color: var(--color-coffee-brown); }
.hp-section-3 .benefits-container { width: 56%; }
.hp-section-3 .benefit-content-wrapper { width: 30vw; margin-left: 5vw; }
.hp-section-3 .benefit-title-wrapper { align-items: flex-start; gap: 16px; }
.hp-section-3 .heading-31 { font-size: clamp(28px,3.1vw,50px); line-height: 1.12; }
.hp-section-3 .text-block-31 { font-size: 18px; line-height: 1.55; margin-top: 24px; }
.hp-section-3 .icon-wapper { flex: 0 0 48px; width: 48px; height: 60px; }
.hp-section-3 .title-wrapper.is-1 { position: absolute; right: 7vw; top: 0; width: 35vw; height: 100%; margin: 0; justify-content: center; z-index: 0; }
.hp-section-3 .heading-2 { font-size: clamp(32px,3.8vw,60px); line-height: 1.1; }
.hp-section-3 .text-el { font-size: 18px; line-height: 1.55; }
.hp-section-3 .text-block-3 { font-size: 18px; }


.hn-marquee-outer { padding-block: 0 !important; }
.hn-marquee-inner { width: 100%; }
.cx-ribbon-svg { display: block; width: 100%; height: auto; }
.hp-section-4 .heading-3 { font-size: clamp(32px,4vw,64px); line-height: 1.1; }
.hp-section-4 .tesimonials-container { padding: 115px 0 0; }
.hp-section-4 .title-wrapper { width: 90%; gap: 16px; }
.hp-section-4 .text-block-4 { font-size: 18px; }
.hp-section-4 .reviews-wrapper { position: absolute; top: 235px; bottom: auto; background: transparent; }
.hp-section-4 .tetimonials-body:not(.clear) { width: 22.5vw; height: max(315px,calc(100vh - 265px)); padding: 24px 20px; border-radius: 14px; }
.hp-section-4 .client-name { gap: 16px; align-items: flex-start; }
.hp-section-4 .div-block-17 { display: none; }
.hp-section-4 .div-block-21 { width: 100%; }
.hp-section-4 .heading-4 { margin: 0; font-size: clamp(20px,1.7vw,28px); line-height: 1.15; }
.hp-section-4 .div-block-20 { margin-top: 12px; }
.hp-section-4 .text-block-6 { font-size: 18px; line-height: 1.35; }
.hp-section-4 .client-text { margin-top: 24px; }
.hp-section-4 .text-block-5 { font-size: 18px; line-height: 1.45; }
.hp-section-4 .tetimonials-body.clear { margin-top: -30vh; }
.hp-section-4 .tetimonials-body.clear { justify-content: flex-start; }
.hp-section-4 .card-content { height: 100%; margin: 0; padding-top: 110px; gap: 16px; justify-content: flex-start; }
.hp-section-4 .card-content .heading-6 { margin: 0; font-size: clamp(32px,4.2vw,64px); line-height: 1.1; }
.hp-section-4 .card-content .button-v-2 { margin: 0; min-height: 48px; padding: 12px 24px; }
.hp-section-4 .card-content .text-block-30 { font: 600 18px/1.3 var(--font-body); }
.hp-section-4 .heading-6 { font-size: clamp(32px,5.2vw,80px); line-height: 1.1; }
.hp-section-4 .text-block-7 { font-size: 18px; line-height: 1.5; }
.hp-section-4 .text-block-8 { font-size: clamp(24px,2.05vw,34px); line-height: 1.1; padding: 16px 10px; margin: 0; min-height: 100px; display: flex; align-items: center; justify-content: center; }
.hp-section-4 .news-image { height: 38vh; }
.hp-section-4 .image-body { align-items: flex-end; }
@media (min-width: 768px) {
 .hp-section-4 .collection-list-wrapper:not(.mobile) { display: block; }
 .hp-section-4 .collection-list-wrapper.mobile { display: none; }
 .hp-section-4 .news-grid-wrapper { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
 .hp-section-4 .news-grid-wrapper .collection-item, .hp-section-4 .news-item { width: 100%; min-width: 0; }
 .hp-section-4 .news-image { height: 34vh; }
 .hp-section-4 .image-body { position: relative; height: 100%; overflow: hidden; border-radius: 12px; }
 .hp-section-4 .hp-article-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
 .hp-section-4 .text-block-8 { position: absolute; inset: auto 0 0; width: 100%; }
 .hp-section-4 .card-content > * { order: 0; flex-shrink: 0; }
}
.cx-footer-section { position: relative; z-index: 1; overflow: clip; }
.cx-footer-section:focus-within .cx-footer { transform: none !important; }

@media (max-width: 1023px) and (min-width: 768px) {
 .hp-section-4 .tetimonials-body:not(.clear) { width: 23vw; padding: 24px 14px; height: 450px; }
 .hp-section-4 .heading-4 { font-size: 20px; overflow-wrap: anywhere; }
 .hp-section-2 .section-2-subtitle-wrapper { width: 37vw; right: 4vw; }
 .hp-section-4 .news-grid-wrapper { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .hp-section-4 .news-image { height: 220px; }
 .hp-section-4 .image-body { height: 100%; }
 .hp-section-4 .text-block-8 { min-height: 80px; }
}
@media (min-width: 768px) and (max-width: 991px) {
 .video-package-wrapper { top: 76px; left: 0; width: 100%; height: 44%; padding-top: 0; }
 .video-package-wrapper #hero-canvas { height: 35vh; max-width: 75vw; }
 .hp-section-3 .benefits-container { width: 100%; }
 .hp-section-3 .benefit-content-wrapper { width: calc(100vw - 72px); margin: 32px 36px 0; }
 .hp-section-3 .benefit-title-wrapper { height: auto; padding: 0; min-height: 80px; }
 .hp-section-3 .heading-31 { font-size: 36px; }
 .hp-section-3 .title-wrapper.is-1 { inset: 45vh 36px auto; width: auto; height: auto; padding: 0; margin: 0; gap: 20px; align-items: flex-start; }
 .hp-section-3 .text-el { max-width: 65ch; }
 .hp-section-3 .subheader-wrapper { margin: 0; }
}
@media (max-width: 767px) {
 .hp-section-2 .section-2-heading-item { top: 22%; }
 .hp-section-2 .heading { font-size: 10.4vw; }
 .hp-section-2 .packages-wrapper { padding: 90px 0 0; align-items: flex-start; justify-content: center; }
 .hp-section-2 img.image { width: auto; height: 43vh; max-width: 76vw; }
 .hp-section-2 .section-2-subtitle-wrapper { top: auto; bottom: 5vh; right: 6vw; width: 88vw; gap: 6px; }
 .hp-section-2 .subtitle .text-block { font-size: 20px; padding: 7px 12px; }
 .hp-section-2 .section-2-subtitle-wrapper .text-block-2 { margin-top: 14px; font-size: 18px; line-height: 1.5; }
 .hp-section-2 .button-v-1 { left: auto; right: 10vw; bottom: 42vh; width: 72px; height: 72px; }
 .video-package-wrapper { top: 76px; left: 0; width: 100%; height: 44%; padding-top: 0; }
 .video-package-wrapper #hero-canvas { width: auto; height: 35vh; max-width: 75vw; }
 .video-package-wrapper .button-v-1 { right: 10vw; width: 72px; height: 72px; }
 .hp-section-3 .benefits-container { width: 100%; }
 .hp-section-3 .benefit-content-wrapper { width: calc(100vw - 48px); margin: 32px 24px 0; }
 .hp-section-3 .benefit-title-wrapper { height: auto; min-height: 80px; padding: 0; }
 .hp-section-3 .benefit-content-wrapper.is-1 { margin-top: 32px; }
 .hp-section-3 .heading-31 { font-size: 28px; }
 .hp-section-3 .text-block-31 { margin-top: 20px; font-size: 18px; line-height: 1.5; }
 .hp-section-3 .title-wrapper.is-1 { inset: 45vh 24px auto; width: auto; height: auto; padding: 0; margin: 0; gap: 20px; align-items: flex-start; }
 .hp-section-3 .heading-2 { font-size: 32px; }
 .hp-section-3 .text-el { font-size: 18px; line-height: 1.5; }
 .hp-section-3 .subheader-wrapper { margin: 0; }
 .hp-section-4 .heading-3 { font-size: 32px; }
 .hp-section-4 .tesimonials-container { padding-top: 115px; }
 .hp-section-4 .reviews-wrapper { top: 38vh; }
 .hp-section-4 .tetimonials-body:not(.clear) { width: 82vw; height: 370px; padding: 28px; }
 .hp-section-4 .heading-4 { font-size: 28px; }
 .hp-section-4 .tetimonials-body.clear { margin-top: -20vh; }
 .hp-section-4 .card-content { padding-top: 105px; gap: 16px; }
 .hp-section-4 .heading-6 { font-size: 36px; }
 .hp-section-4 .text-block-8 { font-size: 28px; min-height: 130px; }
 .hp-section-4 .news-image { height: auto; }
 .hp-section-4 .image-body { height: 47vh; }
 .cx-footer-nav a,.cx-footer-files a { font-size: 18px; }
}
@media (max-width: 360px) {
 .video-package-wrapper { height: 30%; }
 .video-package-wrapper #hero-canvas { height: 28vh; }
 .hp-section-3 .title-wrapper.is-1 { top: 36vh; }
 .hp-section-3 .heading-31 { font-size: 26px; }
 .hp-section-3 .benefit-content-wrapper { width: calc(100vw - 48px); margin-left: 24px; margin-right: 24px; }
 .hp-section-4 .heading-3 { font-size: 28px; }
 .hp-section-4 .heading-4 { font-size: 24px; }
 .hp-section-4 .image-body { height: 39vh; }
}
.local-reduced-motion .cx-footer { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .cx-footer { transform: none !important; } }