/* ==========================================================================
   KOPSOON CSS BUNDLE: kopsoon-serving.css
   Generated for deployment bundling. Source files are kept for development.
   ========================================================================== */


/* ==========================================================================
   Source: serving-page.css
   ========================================================================== */
/* ========================================================================
   KOPSOON - SERVING PAGE BASE
   ======================================================================== */

.serving-page {
    background: var(--color-white);
    color: #2B231D;
}

.serving-page main {
    width: 100%;
    overflow: hidden;
}

.serving-page section {
    position: relative;
}

.serving-page .container {
    max-width: 1280px;
}

.serving-curve {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    z-index: 0;
}

.serving-bean {
    position: absolute;
    width: 160px;
    height: 78px;
    border-radius: 50%;
    background: #7A4B35;
    transform: rotate(8deg);
    opacity: 0.98;
    pointer-events: none;
    z-index: 0;
}

.serving-bean::after {
    content: '';
    position: absolute;
    inset: 16px 65px;
    border-left: 9px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    transform: rotate(18deg);
}

.serving-beans-outline {
    position: absolute;
    width: 156px;
    height: 132px;
    pointer-events: none;
    opacity: 0.18;
    z-index: 1;
}

.serving-beans-outline::before,
.serving-beans-outline::after {
    content: '';
    position: absolute;
    width: 54px;
    height: 86px;
    border: 6px solid #7A6A5B;
    border-radius: 50%;
    transform: rotate(-28deg);
}

.serving-beans-outline::before {
    left: 10px;
    top: 18px;
}

.serving-beans-outline::after {
    right: 16px;
    top: 36px;
    transform: rotate(28deg);
}

@media (max-width: 768px) {
    .serving-page .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .serving-bean {
        width: 118px;
        height: 58px;
    }
}


/* ==========================================================================
   Source: serving-hero.css
   ========================================================================== */
/* ========================================================================
   KOPSOON - SERVING HERO
   ======================================================================== */

.serving-hero-page-section {
    min-height: 635px;
    background: linear-gradient(90deg, #EFE6D3 0%, #EFE6D3 51%, #C8B9A7 51%, #C8B9A7 100%);
    display: flex;
    align-items: center;
    padding: 155px 0 90px;
}

.serving-hero-container {
    position: relative;
    z-index: 2;
}

.serving-hero-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    color: rgba(36, 29, 24, 0.62);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.serving-hero-content {
    max-width: 560px;
    margin: 0 auto;
    text-align: left;
    transform: none;
}

.serving-hero-content h1 {
    font-family: var(--font-heading);
    font-size: 46px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-coffee);
    margin-bottom: 25px;
    letter-spacing: -0.5px;
    text-transform: none;
}

.serving-hero-content p {
    max-width: 540px;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--color-text-body);
}

.serving-curve-hero {
    width: 760px;
    height: 520px;
    right: -95px;
    top: 74px;
    border: 28px solid rgba(255, 250, 236, 0.82);
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(-20deg);
    box-shadow: 16px 12px 0 rgba(91, 73, 55, 0.12);
}

.serving-bean-left {
    left: -70px;
    bottom: 78px;
}

@media (max-width: 992px) {
    .serving-hero-page-section {
        min-height: 560px;
        padding-top: 140px;
        background: linear-gradient(90deg, #EFE6D3 0%, #EFE6D3 55%, #C8B9A7 55%, #C8B9A7 100%);
    }

    .serving-hero-content h1 {
        font-size: 38px;
    }

    .serving-hero-content p {
        font-size: 15.5px;
    }
}

@media (max-width: 768px) {
    .serving-hero-page-section {
        min-height: auto;
        padding: 130px 0 84px;
        background: #EFE6D3;
    }

    .serving-hero-content {
        transform: none;
    }

    .serving-hero-content h1 {
        font-size: 30px;
        line-height: 1.35;
        letter-spacing: -0.3px;
    }

    .serving-hero-content p {
        font-size: 15px;
        line-height: 1.7;
        font-weight: 400;
    }

    .serving-curve-hero {
        width: 420px;
        height: 300px;
        right: -185px;
        top: 95px;
        border-width: 18px;
    }

    .serving-bean-left {
        left: -75px;
        bottom: 28px;
    }
}


/* ==========================================================================
   Source: serving-methods.css
   ========================================================================== */
/* ========================================================================
   KOPSOON - SERVING METHODS
   ======================================================================== */

.serving-method-section {
    position: relative;
    padding: 108px 0;
    overflow: hidden;
}

.serving-method-hot {
    background:
        radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.08) 0 18%, transparent 19%),
        linear-gradient(135deg, #173021 0%, #1F3B27 54%, #264A31 100%);
    color: #F7F3E8;
}

.serving-method-ice {
    background:
        radial-gradient(circle at 14% 28%, rgba(122, 75, 53, 0.08) 0 16%, transparent 17%),
        linear-gradient(135deg, #F7F0E8 0%, #EFE6D3 58%, #E9DDD0 100%);
    color: #241D18;
}

.serving-method-container {
    position: relative;
    z-index: 3;
}

.serving-method-grid {
    display: grid;
    grid-template-columns: minmax(520px, 1.02fr) minmax(320px, 470px);
    align-items: center;
    gap: clamp(46px, 7vw, 96px);
}

.serving-method-grid-reverse {
    grid-template-columns: minmax(320px, 470px) minmax(520px, 1.02fr);
}

.serving-method-content {
    max-width: 720px;
    width: 100%;
}

.serving-method-card {
    position: relative;
    padding: clamp(28px, 4vw, 44px);
    border-radius: 34px;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 360ms ease,
        box-shadow 360ms ease,
        border-color 360ms ease,
        background-color 360ms ease;
}

.serving-glass-panel {
    background-color: rgba(255, 255, 255, 0.078);
    border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.18);
}

.serving-method-ice .serving-glass-panel {
    background-color: rgba(255, 255, 255, 0.58);
    border-color: rgba(86, 60, 43, 0.12);
    box-shadow: 0 26px 64px rgba(91, 64, 43, 0.13);
}

.serving-method-card::before,
.serving-method-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
    transition: transform 360ms ease, opacity 360ms ease;
}

.serving-method-card::before {
    width: 128px;
    height: 128px;
    right: 9%;
    top: 18%;
    border-radius: 50%;
    background-color: rgba(250, 181, 112, 0.26);
    filter: blur(0.2px);
}

.serving-method-card::after {
    width: 1px;
    height: 74px;
    right: 8%;
    top: 7%;
    border-right: 1px solid rgba(255, 255, 255, 0.42);
    transform: rotate(18deg);
}

.serving-method-ice .serving-method-card::before {
    background-color: rgba(122, 75, 53, 0.13);
}

.serving-method-ice .serving-method-card::after {
    border-color: rgba(122, 75, 53, 0.2);
}

.serving-method-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 34px 82px rgba(0, 0, 0, 0.24), 0 0 28px rgba(255, 187, 118, 0.22);
    border-color: rgba(255, 255, 255, 0.48);
}

.serving-method-ice .serving-method-card:hover {
    box-shadow: 0 34px 76px rgba(91, 64, 43, 0.18), 0 0 26px rgba(122, 75, 53, 0.12);
    border-color: rgba(122, 75, 53, 0.22);
}

.serving-method-card:hover::before {
    transform: translate3d(-8px, -10px, 0) scale(1.08);
    opacity: 0.95;
}

.serving-method-badge,
.serving-section-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 8px 14px;
    margin-bottom: 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.serving-method-badge {
    color: #FCE9C4;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.serving-method-ice .serving-method-badge {
    color: #4B3829;
    background: rgba(122, 75, 53, 0.1);
    border-color: rgba(122, 75, 53, 0.18);
}

.serving-method-content h2 {
    font-family: var(--font-heading);
    font-size: clamp(34px, 4.2vw, 54px);
    font-weight: 800;
    line-height: 1.04;
    margin-bottom: 18px;
    letter-spacing: -0.8px;
}

.serving-method-content h2 span {
    font-weight: 800;
}

.serving-method-lead {
    max-width: 650px;
    font-size: clamp(17px, 2vw, 23px);
    font-weight: 700;
    line-height: 1.38;
    margin-bottom: 30px;
    color: rgba(247, 243, 232, 0.88);
}

.serving-method-ice .serving-method-lead {
    color: rgba(36, 29, 24, 0.72);
}

.serving-method-list {
    max-width: 650px;
    padding-left: 0;
    margin: 0;
    list-style: none;
    counter-reset: serving-step;
}

.serving-method-list li {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    margin-bottom: 15px;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.55;
    word-break: normal;
    overflow-wrap: anywhere;
    color: rgba(247, 243, 232, 0.9);
}

.serving-method-ice .serving-method-list li {
    color: rgba(36, 29, 24, 0.76);
}

.serving-method-list li::before {
    counter-increment: serving-step;
    content: counter(serving-step);
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #203B28;
    background: #F7F3E8;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14);
    font-size: 13px;
    font-weight: 800;
}

.serving-method-ice .serving-method-list li::before {
    color: #F7F3E8;
    background: #4A362A;
    box-shadow: 0 10px 20px rgba(74, 54, 42, 0.14);
}

.serving-method-step-copy {
    min-width: 0;
    max-width: 100%;
}

.serving-method-step-copy strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 800;
}

.serving-method-step-copy span {
    display: block;
    max-width: 100%;
}

.serving-method-list strong {
    font-weight: 800;
}

.serving-method-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.serving-method-ice .serving-method-note {
    border-top-color: rgba(74, 54, 42, 0.12);
}

.serving-method-note span {
    display: inline-flex;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.serving-method-ice .serving-method-note span {
    background: rgba(74, 54, 42, 0.08);
}

.serving-method-note strong {
    font-size: 14.5px;
    font-weight: 800;
}

.serving-method-image-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

.serving-photo-frame {
    position: relative;
    width: min(100%, 430px);
    aspect-ratio: 1.36;
    padding: 14px;
    border-radius: 58px 22px 58px 22px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 30px 68px rgba(0, 0, 0, 0.24);
    transform: rotate(2deg);
    transition:
        transform 360ms ease,
        box-shadow 360ms ease,
        border-color 360ms ease;
}

.serving-photo-frame::before {
    content: "";
    position: absolute;
    width: 44%;
    height: 44%;
    left: -10%;
    bottom: -16%;
    border-radius: 50%;
    background: rgba(250, 181, 112, 0.18);
    filter: blur(2px);
    z-index: -1;
}

.serving-photo-frame-ice {
    transform: rotate(-2deg);
    background: rgba(255, 255, 255, 0.66);
    border-color: rgba(74, 54, 42, 0.1);
    box-shadow: 0 30px 64px rgba(91, 64, 43, 0.16);
}

.serving-photo-frame:hover {
    transform: translateY(-10px) rotate(0deg) scale(1.02);
    box-shadow: 0 40px 84px rgba(0, 0, 0, 0.28), 0 0 28px rgba(255, 187, 118, 0.16);
    border-color: rgba(255, 255, 255, 0.42);
}

.serving-photo-frame-ice:hover {
    box-shadow: 0 40px 80px rgba(91, 64, 43, 0.2), 0 0 28px rgba(122, 75, 53, 0.1);
    border-color: rgba(122, 75, 53, 0.18);
}

.serving-method-image {
    width: 100%;
    height: 100%;
    border-radius: 44px 18px 44px 18px;
    object-fit: cover;
    display: block;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
}

.serving-method-orbit,
.serving-method-glow {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.serving-method-orbit {
    width: 620px;
    height: 420px;
    border-radius: 50%;
    border: 24px solid rgba(255, 255, 255, 0.08);
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(-18deg);
}

.serving-method-orbit-hot {
    right: -130px;
    top: 32px;
}

.serving-method-orbit-ice {
    left: -130px;
    bottom: -160px;
    border-color: rgba(122, 75, 53, 0.1);
    border-top-color: transparent;
    border-right-color: transparent;
    transform: rotate(18deg);
}

.serving-method-glow {
    width: 210px;
    height: 210px;
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0.55;
}

.serving-method-glow-hot {
    left: 7%;
    bottom: 12%;
    background: radial-gradient(circle, rgba(250, 181, 112, 0.16), transparent 68%);
}

.serving-method-glow-ice {
    right: 8%;
    top: 16%;
    background: radial-gradient(circle, rgba(122, 75, 53, 0.14), transparent 68%);
}

@media (max-width: 992px) {
    .serving-method-section {
        padding: 86px 0;
    }

    .serving-method-grid,
    .serving-method-grid-reverse {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .serving-method-grid-reverse .serving-method-image-wrap {
        order: 2;
    }

    .serving-method-grid-reverse .serving-method-content {
        order: 1;
    }

    .serving-method-content {
        max-width: 760px;
        margin: 0 auto;
    }

    .serving-photo-frame {
        width: min(100%, 410px);
        margin: 0 auto;
    }

    .serving-method-orbit {
        width: 440px;
        height: 320px;
        border-width: 18px;
    }
}

@media (max-width: 768px) {
    .serving-method-section {
        padding: 68px 0;
    }

    .serving-method-card {
        border-radius: 26px;
    }

    .serving-method-content h2 {
        font-size: 31px;
    }

    .serving-method-lead {
        font-size: 16px;
        margin-bottom: 24px;
    }

    .serving-method-list li {
        grid-template-columns: 31px 1fr;
        gap: 12px;
        font-size: 13.5px;
    }

    .serving-method-list li::before {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .serving-method-note {
        align-items: flex-start;
        flex-direction: column;
    }

    .serving-photo-frame {
        width: min(100%, 330px);
        border-radius: 42px 18px 42px 18px;
        padding: 10px;
    }

    .serving-method-image {
        border-radius: 34px 14px 34px 14px;
    }
}


/* ==========================================================================
   Source: serving-hacks.css
   ========================================================================== */
/* ========================================================================
   KOPSOON - SERVING HACKS + GLASS CARDS
   ======================================================================== */

.serving-section-kicker {
    color: #7A4B35;
    background: rgba(122, 75, 53, 0.09);
    border: 1px solid rgba(122, 75, 53, 0.14);
}

.serving-flavor-section {
    position: relative;
    padding: 92px 0 98px;
    overflow: hidden;
    color: #1E1915;
    background:
        radial-gradient(circle at 10% 18%, rgba(122, 75, 53, 0.08), transparent 28%),
        radial-gradient(circle at 90% 78%, rgba(250, 181, 112, 0.14), transparent 25%),
        #FAF9F6;
}

.serving-flavor-container {
    position: relative;
    z-index: 2;
}

.serving-flavor-header {
    max-width: 720px;
    margin: 0 auto 46px;
    text-align: center;
}

.serving-flavor-header h2,
.serving-hacks-header h2 {
    font-family: var(--font-heading);
    font-size: clamp(31px, 3.5vw, 46px);
    font-weight: 800;
    line-height: 1.08;
    margin-bottom: 10px;
    letter-spacing: -0.6px;
}

.serving-flavor-header p,
.serving-hacks-header p {
    max-width: 640px;
    margin: 0 auto;
    font-size: clamp(15px, 1.7vw, 20px);
    font-weight: 700;
    line-height: 1.45;
    color: rgba(30, 25, 21, 0.68);
}

.serving-flavor-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.serving-flavor-card {
    position: relative;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 7.5px;
    padding: 1rem;
    color: #FFFFFF;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    background: #295B3F;
    border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 24px 58px rgba(31, 25, 19, 0.18);
    transform-origin: center;
    transition:
        transform 500ms ease,
        border-radius 500ms ease,
        box-shadow 500ms ease,
        border-color 500ms ease;
}

.serving-flavor-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(13, 28, 19, 0.06) 0%, rgba(20, 34, 25, 0.42) 42%, rgba(22, 24, 18, 0.94) 100%);
    transition: opacity 300ms ease;
}

.serving-flavor-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(
            35.36% 35.36% at 100% 25%,
            #0000 66%,
            rgba(199, 144, 19, 0.95) 68% 70%,
            #0000 72%
        ) 32px 32px / 64px 64px,
        radial-gradient(
            35.36% 35.36% at 0 75%,
            #0000 66%,
            rgba(199, 144, 19, 0.95) 68% 70%,
            #0000 72%
        ) 32px 32px / 64px 64px,
        radial-gradient(
            35.36% 35.36% at 100% 25%,
            #0000 66%,
            rgba(199, 144, 19, 0.95) 68% 70%,
            #0000 72%
        ) 0 0 / 64px 64px,
        radial-gradient(
            35.36% 35.36% at 0 75%,
            #0000 66%,
            rgba(199, 144, 19, 0.95) 68% 70%,
            #0000 72%
        ) 0 0 / 64px 64px,
        repeating-conic-gradient(rgba(41, 91, 63, 0.92) 0 25%, #0000 0 50%) 0 0 / 64px 64px,
        radial-gradient(#0000 66%, rgba(199, 144, 19, 0.95) 68% 70%, #0000 72%) 0 16px / 32px 32px rgba(41, 91, 63, 0.55);
    opacity: 0.34;
    mix-blend-mode: soft-light;
    transition: opacity 300ms ease;
}

.serving-flavor-card:hover {
    transform: translateY(-12px) scale(1.06);
    border-radius: 30px;
    border-color: rgba(255, 255, 255, 0.48);
    box-shadow: 0 36px 82px rgba(31, 25, 19, 0.27), 0 0 26px rgba(255, 187, 118, 0.26);
}

.serving-flavor-card:hover::after {
    opacity: 0.18;
}

.serving-flavor-card:hover::before {
    opacity: 0.96;
}

.serving-flavor-number {
    position: absolute;
    left: 18px;
    top: 18px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    color: #FCE9C4;
    background: rgba(31, 59, 39, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.24);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.serving-flavor-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: #295B3F;
    border: 0;
    box-shadow: none;
}

.serving-flavor-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 75% 24%, rgba(252, 233, 196, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(31, 59, 39, 0.06) 0%, rgba(31, 59, 39, 0.48) 100%);
}

.serving-flavor-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(0.96) contrast(0.98) brightness(0.82);
    transition: transform 560ms ease, filter 560ms ease;
}

.serving-flavor-card:hover .serving-flavor-image {
    transform: scale(1.12);
    filter: saturate(1.08) contrast(1.04) brightness(0.72);
}

.serving-flavor-copy {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 0 0.25rem 0.2rem;
    transform: translateY(calc(100% - 62px));
    transition: transform 560ms cubic-bezier(0.18, 0.84, 0.28, 1);
}

.serving-flavor-card:hover .serving-flavor-copy {
    transform: translateY(0%);
    transition-delay: 180ms;
}

.serving-flavor-card h3 {
    position: relative;
    width: max-content;
    max-width: 100%;
    font-family: var(--font-heading);
    font-size: 24px;
    line-height: 1.08;
    margin: 0;
    color: #FFFFFF;
    font-weight: 800;
    letter-spacing: -0.2px;
    transition: color 500ms ease;
}

.serving-flavor-card h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: calc(100% + 1rem);
    height: 3px;
    border-radius: 999px;
    background: #FCE9C4;
    transform: translateX(calc(-100% - 1rem));
    opacity: 0;
    transition: transform 500ms ease, opacity 500ms ease;
}

.serving-flavor-card:hover h3::after {
    transform: translateX(-0.5rem);
    opacity: 1;
}

.serving-flavor-card p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.48;
}

.serving-flavor-tag {
    display: inline-flex;
    width: fit-content;
    padding: 7px 11px;
    border-radius: 999px;
    color: #1F3B27;
    background: #FCE9C4;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    font-size: 11.5px;
    font-weight: 800;
}

.serving-curve-flavor {
    width: 520px;
    height: 360px;
    left: -150px;
    top: -92px;
    border: 22px solid rgba(200, 185, 167, 0.38);
    border-bottom-color: transparent;
    border-right-color: transparent;
    transform: rotate(10deg);
}

.serving-bean-flavor {
    right: -82px;
    bottom: 34px;
    width: 230px;
    height: 116px;
    background: #7A4B35;
    opacity: 0.2;
}

.serving-hacks-section {
    position: relative;
    background:
        linear-gradient(180deg, #FAF9F6 0%, #F4EEE8 100%);
    padding: 88px 0 104px;
    color: #161616;
    overflow: hidden;
}

.serving-hacks-container {
    position: relative;
    z-index: 2;
}

.serving-hacks-header {
    max-width: 700px;
    text-align: center;
    margin: 0 auto 54px;
}

.serving-hacks-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    align-items: stretch;
}

.serving-hack-card {
    position: relative;
    text-align: center;
    padding: 16px 16px 28px;
    border-radius: 26px;
    overflow: hidden;
    isolation: isolate;
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(122, 75, 53, 0.12);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 22px 52px rgba(74, 54, 42, 0.12);
    transition:
        transform 330ms ease,
        box-shadow 330ms ease,
        border-color 330ms ease,
        background-color 330ms ease;
}

.serving-hack-card::before,
.serving-hack-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
    transition: transform 330ms ease, opacity 330ms ease;
}

.serving-hack-card::before {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    top: 30%;
    right: 8%;
    background-color: rgba(250, 181, 112, 0.18);
}

.serving-hack-card::after {
    top: 10%;
    right: 7%;
    height: 48px;
    border-right: 1px solid rgba(122, 75, 53, 0.18);
    transform: rotate(18deg);
}

.serving-hack-card:hover {
    transform: translateY(-12px) scale(1.015);
    border-color: rgba(122, 75, 53, 0.26);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 34px 74px rgba(74, 54, 42, 0.18), 0 0 22px rgba(255, 187, 118, 0.22);
}

.serving-hack-card:hover::before {
    transform: translate(-8px, -10px) scale(1.08);
}

.serving-hack-image-box {
    width: 100%;
    height: 166px;
    overflow: hidden;
    margin-bottom: 22px;
    border-radius: 18px;
    background: #EFE6D3;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.serving-hack-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 430ms ease, filter 430ms ease;
}

.serving-hack-card:hover .serving-hack-image {
    transform: scale(1.08);
    filter: saturate(1.06) contrast(1.02);
}

.serving-hack-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 7px 12px;
    margin-bottom: 14px;
    border-radius: 999px;
    color: #4B3829;
    background: rgba(122, 75, 53, 0.1);
    border: 1px solid rgba(122, 75, 53, 0.12);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.serving-hack-card h3 {
    font-family: var(--font-heading);
    font-size: 25px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 9px;
}

.serving-hack-card p {
    max-width: 310px;
    margin: 0 auto;
    color: rgba(22, 22, 22, 0.66);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.45;
}

.serving-curve-hacks {
    width: 560px;
    height: 360px;
    right: -78px;
    top: 38px;
    border: 24px solid rgba(200, 185, 167, 0.42);
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(-18deg);
}

.serving-bean-hacks {
    left: -74px;
    bottom: 36px;
    width: 260px;
    height: 130px;
    background: #7A4B35;
    opacity: 0.2;
}

.serving-bean-hacks::after {
    inset: 24px 112px;
    border-left-width: 12px;
}

.serving-beans-outline-right {
    right: 120px;
    bottom: 24px;
}

@media (max-width: 1100px) {
    .serving-flavor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .serving-hacks-grid {
        gap: 24px;
    }

    .serving-hack-card h3 {
        font-size: 22px;
    }

    .serving-hack-card p {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .serving-flavor-section,
    .serving-hacks-section {
        padding: 68px 0 76px;
    }

    .serving-flavor-header,
    .serving-hacks-header {
        margin-bottom: 38px;
    }

    .serving-flavor-grid,
    .serving-hacks-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 430px;
        margin: 0 auto;
    }

    .serving-flavor-card {
        min-height: 354px;
        transform: none;
    }

    .serving-flavor-copy {
        transform: none;
    }

    .serving-hack-image-box {
        height: 176px;
    }

    .serving-curve-hacks {
        width: 340px;
        height: 230px;
        right: -190px;
        top: 28px;
        border-width: 18px;
    }

    .serving-bean-hacks {
        width: 160px;
        height: 80px;
        left: -82px;
        bottom: 16px;
    }

    .serving-beans-outline-right {
        right: 22px;
        bottom: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .serving-method-card,
    .serving-photo-frame,
    .serving-flavor-card,
    .serving-flavor-copy,
    .serving-flavor-card h3::after,
    .serving-flavor-image,
    .serving-hack-card,
    .serving-hack-image {
        transition: none !important;
    }

    .serving-method-card:hover,
    .serving-photo-frame:hover,
    .serving-flavor-card:hover,
    .serving-hack-card:hover {
        transform: none !important;
    }

    .serving-flavor-copy {
        transform: none !important;
    }
}


/* ==========================================================================
   Source: serving-parallax.css
   ========================================================================== */
/* ===========================================================================
   KOPSOON - SERVING METHOD PARALLAX EFFECTS
   =========================================================================== */

body.serving-parallax {
    --serving-hero-bg-y: 0px;
    --serving-hero-content-y: 0px;
    --serving-hero-opacity: 1;
}

.serving-parallax .serving-hero-page-section {
    min-height: 100vh;
    padding: 150px 0 96px;
    isolation: isolate;
    overflow: hidden;
    background-image:
        linear-gradient(90deg, rgba(244, 236, 216, 0.74) 0%, rgba(244, 236, 216, 0.58) 43%, rgba(201, 184, 164, 0.38) 100%),
        url('../images/hero.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center calc(50% + var(--serving-hero-bg-y));
    transition: background-position 80ms linear;
    will-change: background-position;
}

.serving-parallax .serving-hero-page-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 72% 30%, rgba(255, 255, 255, 0.22), transparent 30%),
        linear-gradient(180deg, rgba(255, 252, 244, 0.08) 0%, rgba(77, 56, 40, 0.08) 100%);
}

.serving-parallax .serving-hero-container {
    position: relative;
    z-index: 3;
}

.serving-parallax .serving-hero-content {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    opacity: var(--serving-hero-opacity);
    translate: 0 var(--serving-hero-content-y);
    will-change: translate, opacity;
}

.serving-parallax .serving-hero-content h1 {
    font-size: clamp(38px, 5.2vw, 76px);
    line-height: 1.02;
    letter-spacing: -1.5px;
    margin-bottom: 22px;
}

.serving-parallax .serving-hero-content p {
    max-width: 760px;
    font-size: clamp(18px, 2vw, 27px);
    line-height: 1.32;
}

.serving-parallax .serving-curve-hero,
.serving-parallax .serving-bean-left {
    z-index: 2;
}

.serving-parallax .serving-curve-hero {
    width: 860px;
    height: 640px;
    right: -110px;
    top: 42px;
    border-width: 30px;
    opacity: 0.92;
}

.serving-parallax .serving-bean-left {
    left: -76px;
    bottom: 88px;
}

.serving-parallax [data-serving-parallax] {
    --serving-parallax-y: 0px;
    translate: 0 var(--serving-parallax-y);
    will-change: translate;
}

.serving-parallax [data-serving-reveal] {
    opacity: 0;
    transform: translate3d(0, 44px, 0) scale(0.985);
    filter: blur(8px);
    transition:
        opacity 760ms ease,
        transform 760ms cubic-bezier(0.18, 0.84, 0.28, 1),
        filter 760ms ease;
    transition-delay: var(--serving-reveal-delay, 0ms);
    will-change: opacity, transform, filter;
}

.serving-parallax [data-serving-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

.serving-parallax .serving-parallax-section {
    transform-style: preserve-3d;
    overflow: hidden;
}

.serving-parallax .serving-method-image-wrap,
.serving-parallax .serving-hack-card,
.serving-parallax .serving-curve,
.serving-parallax .serving-bean,
.serving-parallax .serving-beans-outline {
    backface-visibility: hidden;
}

.serving-parallax .serving-method-image {
    transition: transform 380ms ease, box-shadow 380ms ease;
}

.serving-parallax .serving-method-image-wrap:hover .serving-method-image {
    transform: translateY(-8px) scale(1.035);
    box-shadow: 0 32px 62px rgba(0, 0, 0, 0.25);
}

@media (max-width: 992px) {
    .serving-parallax .serving-hero-page-section {
        min-height: 86vh;
        padding: 136px 0 86px;
        background-image:
            linear-gradient(90deg, rgba(244, 236, 216, 0.78) 0%, rgba(244, 236, 216, 0.66) 52%, rgba(201, 184, 164, 0.32) 100%),
            url('../images/hero.webp');
    }

    .serving-parallax .serving-curve-hero {
        width: 640px;
        height: 460px;
        right: -190px;
        top: 88px;
        border-width: 24px;
    }
}

@media (max-width: 768px) {
    .serving-parallax .serving-hero-page-section {
        min-height: 100svh;
        padding: 126px 0 72px;
        background-image:
            linear-gradient(180deg, rgba(244, 236, 216, 0.84), rgba(239, 228, 207, 0.74)),
            url('../images/hero.webp');
        background-position: center center;
    }

    .serving-parallax .serving-hero-content h1 {
        font-size: 34px;
        letter-spacing: -0.6px;
    }

    .serving-parallax .serving-hero-content p {
        font-size: 16px;
        font-weight: 700;
    }

    .serving-parallax .serving-curve-hero,
    .serving-parallax .serving-bean-left {
        opacity: 0.42;
    }

    .serving-parallax [data-serving-reveal] {
        transform: translate3d(0, 28px, 0) scale(0.99);
        filter: blur(5px);
        transition-duration: 620ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    .serving-parallax .serving-hero-page-section {
        background-position: center center !important;
        transition: none !important;
    }

    .serving-parallax .serving-hero-content,
    .serving-parallax [data-serving-parallax] {
        translate: 0 0 !important;
        opacity: 1 !important;
    }

    .serving-parallax [data-serving-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* ---------------------------------------------------------------------------
   SERVING HERO CONTACT STYLE PATCH
   Menyamakan desain section hero Serving dengan Contact hero.
   --------------------------------------------------------------------------- */
.serving-hero-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    color: rgba(36, 29, 24, 0.62);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.serving-parallax .serving-hero-page-section {
    min-height: 100vh;
    padding: 150px 0 80px;
    display: flex;
    align-items: center;
    background-image:
        linear-gradient(90deg, rgba(244, 236, 216, 0.76) 0%, rgba(244, 236, 216, 0.62) 42%, rgba(201, 184, 164, 0.34) 100%),
        url('../images/hero.webp');
    background-position: center calc(50% + var(--serving-hero-bg-y));
}

.serving-parallax .serving-hero-page-section::after {
    background:
        radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.22), transparent 32%),
        linear-gradient(180deg, rgba(255, 252, 244, 0.05) 0%, rgba(77, 56, 40, 0.08) 100%);
}

.serving-parallax .serving-hero-container {
    position: relative;
    z-index: 3;
}

.serving-parallax .serving-hero-content {
    max-width: 560px;
    margin: 0 auto;
    padding: 0;
    text-align: left;
    transform: none;
    opacity: var(--serving-hero-opacity);
    translate: 0 var(--serving-hero-content-y);
    will-change: translate, opacity;
}

.serving-parallax .serving-hero-content h1 {
    max-width: 560px;
    margin: 0 0 25px;
    font-family: var(--font-heading);
    font-size: 46px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--color-coffee);
    letter-spacing: -0.5px;
    text-transform: none;
}

.serving-parallax .serving-hero-content p {
    max-width: 540px;
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
    color: var(--color-text-body);
}

.serving-parallax .serving-curve-hero {
    top: -240px;
    right: -250px;
    width: 850px;
    height: 620px;
    border: 18px solid rgba(118, 99, 77, 0.22);
    border-radius: 0 0 0 70%;
    transform: rotate(-20deg);
    box-shadow: none;
    opacity: 1;
}

.serving-parallax .serving-curve-hero::after {
    content: '';
    position: absolute;
    inset: 32px;
    border: 16px solid rgba(255, 251, 239, 0.95);
    border-radius: 0 0 0 70%;
}

.serving-parallax .serving-bean-left {
    left: -125px;
    bottom: -145px;
    width: 390px;
    height: 340px;
    background: #764a35;
    border-radius: 58% 42% 42% 58% / 42% 48% 52% 58%;
    transform: rotate(-12deg);
    opacity: 1;
}

.serving-parallax .serving-bean-left::before {
    content: '';
    position: absolute;
    top: 72px;
    left: 78px;
    width: 210px;
    height: 158px;
    border: 28px solid #f7f0df;
    border-radius: 50%;
    transform: rotate(28deg);
}

.serving-parallax .serving-bean-left::after {
    content: '';
    position: absolute;
    right: -70px;
    bottom: 2px;
    inset: auto;
    width: 250px;
    height: 98px;
    border: 0;
    border-top: 5px solid rgba(255, 251, 239, 0.72);
    border-radius: 50%;
    transform: rotate(-4deg);
}

.serving-parallax .serving-beans-hero {
    right: 72px;
    bottom: 36px;
    width: 130px;
    height: 140px;
    opacity: 0.28;
    z-index: 2;
}

.serving-parallax .serving-beans-hero::before,
.serving-parallax .serving-beans-hero::after {
    width: 45px;
    height: 72px;
    border: 5px solid #8e806d;
    border-radius: 50%;
    transform: rotate(-48deg);
}

.serving-parallax .serving-beans-hero::before {
    top: 24px;
    left: 16px;
    box-shadow: 58px 12px 0 -5px transparent, 48px 36px 0 -3px transparent;
}

.serving-parallax .serving-beans-hero::after {
    top: 58px;
    right: 12px;
    transform: rotate(40deg);
}

@media (max-width: 992px) {
    .serving-parallax .serving-hero-content h1 {
        font-size: 38px;
    }

    .serving-parallax .serving-hero-content p {
        font-size: 15.5px;
    }
}

@media (max-width: 768px) {
    .serving-parallax .serving-hero-page-section {
        min-height: 100vh;
        padding: 132px 0 86px;
        background-image:
            linear-gradient(180deg, rgba(244, 236, 216, 0.84), rgba(239, 228, 207, 0.74)),
            url('../images/hero.webp');
        background-position: center center;
    }

    .serving-parallax .serving-hero-content {
        max-width: 100%;
        padding: 0 18px;
        text-align: left;
    }

    .serving-parallax .serving-hero-content h1 {
        max-width: 520px;
        font-size: 30px;
        line-height: 1.35;
        letter-spacing: -0.3px;
        margin-bottom: 20px;
    }

    .serving-parallax .serving-hero-content p {
        max-width: 520px;
        font-size: 15px;
        line-height: 1.7;
    }

    .serving-parallax .serving-curve-hero {
        width: 520px;
        height: 380px;
        right: -260px;
        top: -110px;
        border-width: 14px;
    }

    .serving-parallax .serving-bean-left {
        width: 300px;
        height: 250px;
        left: -175px;
        bottom: -115px;
    }

    .serving-parallax .serving-bean-left::before {
        top: 54px;
        left: 60px;
        width: 150px;
        height: 110px;
        border-width: 20px;
    }

    .serving-parallax .serving-bean-left::after {
        right: -56px;
        width: 190px;
    }

    .serving-parallax .serving-beans-hero {
        right: 24px;
        bottom: 22px;
        opacity: 0.2;
    }
}