/*==================================================
        SANTIZER RESPONSIVE WEBSITE STYLES
==================================================*/

@import url(
    "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500;600;700;800&display=swap"
);

/*==================================================
                    DESIGN TOKENS
==================================================*/

:root {

    --espresso: #3a251a;
    --espresso-2: #2a170e;
    --near-black: #1a0f0a;

    --gold: #c9a66b;
    --gold-2: #b8935a;
    --gold-light: #e4cfa1;

    --cream: #f5efe4;
    --cream-2: #eae0ce;

    --red-brown: #8b3a1e;
    --ink: #201613;
    --muted: #7a6960;

    --font-serif: "Playfair Display", Georgia, serif;
    --font-display: "Cormorant Garamond", Georgia, serif;
    --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;

    --page-gutter: clamp(1.25rem, 5vw, 5rem);
    --content-width: 1500px;

}

/*==================================================
                    GLOBAL RESET
==================================================*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body,
.santizer-body {

    min-width: 320px;

    margin: 0;
    padding: 0;

    overflow-x: hidden;
    overflow-y: auto;

    background: var(--near-black);
    color: var(--cream);

    font-family: var(--font-sans);
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

/*==================================================
              RESPONSIVE SLIDE CONTAINER
==================================================*/

/*
    This replaces the old fixed 1920px × 1080px canvas.
*/

.slide-container {

    position: relative;

    width: 100%;
    min-height: 100svh;
    height: auto;

    overflow: visible;

}

/*==================================================
                  WELCOME PAGE
==================================================*/

.welcome-page {

    position: relative;

    min-height: 100svh;

    display: flex;

    overflow: hidden;

    isolation: isolate;

    background: var(--near-black);

    color: var(--cream);

}

.welcome-background {

    position: absolute;

    inset: 0;

    z-index: -2;

}

.welcome-background img {

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter:
        brightness(.35)
        contrast(1.05)
        saturate(1.05);

}

.welcome-overlay {

    position: absolute;

    inset: 0;

    z-index: -1;

    background: linear-gradient(
        120deg,
        rgba(26, 15, 10, .9) 0%,
        rgba(58, 37, 26, .62) 55%,
        rgba(26, 15, 10, .94) 100%
    );

    pointer-events: none;

}

.welcome-inner {

    width: min(
        calc(100% - (var(--page-gutter) * 2)),
        var(--content-width)
    );

    min-height: 100svh;

    margin-inline: auto;

    display: flex;
    flex-direction: column;

}

/*==================================================
                    MAIN CONTENT
==================================================*/

.welcome-content {

    width: 100%;
    max-width: 1050px;

    margin-block: auto;

    padding-block: 5rem;

    padding-left: clamp(1.25rem, 2.5vw, 2.5rem);

    border-left: clamp(3px, .3vw, 5px) solid var(--gold);

}

.welcome-pretitle {

    margin: 0 0 2rem;

    font-family: var(--font-sans);
    font-size: clamp(.75rem, 1.25vw, 1.35rem);
    font-weight: 500;
    line-height: 1.4;

    letter-spacing: clamp(.2em, .45vw, .5em);

    color: var(--gold);

    text-transform: uppercase;

}

.welcome-brand {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(4rem, 11vw, 11.25rem);
    font-weight: 800;
    line-height: .9;

    letter-spacing: .025em;

    color: var(--cream);

    text-shadow: 0 4px 25px rgba(0, 0, 0, .45);

}

.welcome-brand sup {

    position: relative;
    top: -.8em;

    margin-left: .08em;

    font-family: var(--font-sans);
    font-size: .25em;
    font-weight: 500;

    color: var(--gold);

}

.welcome-title {

    margin: 3.5rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(2.3rem, 5vw, 4.5rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.1;

    color: var(--gold-light);

}

.welcome-subheadline {

    margin: 2rem 0 0;

    font-family: var(--font-sans);
    font-size: clamp(1.35rem, 2.5vw, 2.4rem);
    font-weight: 300;
    line-height: 1.35;

    color: var(--cream-2);

}

.welcome-subheadline strong {

    color: var(--gold);
    font-weight: 500;

}

/*==================================================
                    CTA BADGE
==================================================*/

.welcome-badge {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: fit-content;
    max-width: 100%;

    min-height: 64px;

    margin-top: 4rem;
    padding: 1rem 2rem;

    border: 2px solid var(--gold);

    font-family: var(--font-sans);
    font-size: clamp(.75rem, 1.1vw, 1.15rem);
    font-weight: 600;
    line-height: 1.2;

    letter-spacing: clamp(.12em, .3vw, .35em);

    color: var(--gold);

    text-decoration: none;
    text-transform: uppercase;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}

.welcome-badge:hover {

    background: var(--gold);
    color: var(--near-black);

    transform: translateY(-4px);

}

/*==================================================
                    FOOTER BAR
==================================================*/

.welcome-footer {

    width: 100vw;

    margin-left: calc(50% - 50vw);

    padding: 1.35rem var(--page-gutter);

    border-top: 2px solid var(--gold);

    background: linear-gradient(
        90deg,
        var(--near-black),
        var(--espresso),
        var(--near-black)
    );

    font-family: var(--font-sans);
    font-size: clamp(.65rem, 1vw, 1rem);
    font-weight: 400;
    line-height: 1.5;

    letter-spacing: clamp(.12em, .3vw, .38em);

    color: var(--gold);

    text-align: center;
    text-transform: uppercase;

}

/*==================================================
                  TABLET STYLES
==================================================*/

@media (max-width: 800px) {

    .welcome-content {

        max-width: 850px;

        padding-block: 4rem;

    }

    .welcome-brand {

        font-size: clamp(3.8rem, 14vw, 7rem);

    }

    .welcome-title {

        margin-top: 2.5rem;

    }

    .welcome-badge {

        margin-top: 3rem;

    }

}

/*==================================================
                  MOBILE STYLES
==================================================*/

@media (max-width: 560px) {

    :root {
        --page-gutter: 1.25rem;
    }

    .welcome-page {
        min-height: 100svh;
    }

    .welcome-inner {
        width: min(
            calc(100% - (var(--page-gutter) * 2)),
            440px
        );
    }

    .welcome-content {

        margin-block: auto;

        padding-top: 3rem;
        padding-bottom: 3rem;
        padding-left: 1.1rem;

    }

    .welcome-pretitle {

        margin-bottom: 1.5rem;

        font-size: .68rem;
        letter-spacing: .22em;

    }

    .welcome-brand {

        font-size: clamp(3.2rem, 16vw, 5.5rem);

        letter-spacing: 0;

    }

    .welcome-title {

        margin-top: 2.25rem;

        font-size: clamp(1.9rem, 8vw, 2.8rem);

    }

    .welcome-subheadline {

        margin-top: 1.5rem;

        font-size: 1.25rem;

    }

    .welcome-badge {

        width: 100%;

        min-height: 58px;

        margin-top: 2.5rem;
        padding-inline: 1rem;

        font-size: .68rem;
        letter-spacing: .14em;

        text-align: center;

    }

    .welcome-footer {

        padding: 1.2rem 1rem;

        font-size: .58rem;
        letter-spacing: .12em;

    }

}

/*==================================================
                  ACCESSIBILITY
==================================================*/

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }

}

/*==================================================
              ABOUT US SECTION
==================================================*/

/* Main section wrapper */

.about-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: var(--cream);
    color: var(--ink);

}

/* Subtle coffee-bean background */

.about-section::before {

    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background: url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    opacity: .08;

    pointer-events: none;

}

/*==================================================
              SECTION HEADER CHROME
==================================================*/

.about-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 90px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: linear-gradient(
        90deg,
        var(--espresso) 0%,
        var(--espresso-2) 100%
    );

    border-bottom: 3px solid var(--gold);

}

/* Logo */

.about-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 3px;

    color: var(--gold);
    text-decoration: none;

}

.about-section .chrome-logo .reg {

    font-size: .45em;
    vertical-align: super;

    color: var(--gold-light);

}

/* Header tagline */

.about-section .chrome-tagline {

    margin-left: 24px;
    padding-left: 24px;

    border-left: 1px solid var(--gold);

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: 2px;

    color: var(--cream-2);
    text-transform: uppercase;

}

/* Page number */

.about-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 500;

    letter-spacing: 4px;

    color: var(--gold-light);

    white-space: nowrap;

}

/*==================================================
                  ABOUT MAIN CONTENT
==================================================*/

.about-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(4rem, 7vw, 7rem) var(--page-gutter);

}

.about-inner {

    width: min(100%, 1280px);

    margin: 0 auto;

}

/* Two-column desktop layout */

.about-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 430px);

    gap: clamp(2.5rem, 6vw, 5.5rem);

    align-items: center;

}

.about-content {

    min-width: 0;

}

/*==================================================
                  ABOUT HEADING
==================================================*/

.about-kicker {

    margin: 0 0 1.25rem;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, 1rem);
    font-weight: 600;

    letter-spacing: clamp(.2em, .4vw, .5em);
    line-height: 1.4;

    color: var(--red-brown);

    text-transform: uppercase;

}

.about-header h1 {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(3.8rem, 7vw, 6.8rem);
    font-weight: 800;
    line-height: .95;

    color: var(--espresso);

}

/* Gold divider */

.about-rule {

    width: clamp(4.5rem, 7vw, 7.5rem);
    height: 4px;

    margin: clamp(2rem, 4vw, 3.5rem) 0 2rem;

    background: var(--gold);

}

/*==================================================
                  ABOUT DESCRIPTION
==================================================*/

.about-description {

    max-width: 780px;

}

.about-description p {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.45vw, 1.45rem);
    font-weight: 400;
    line-height: 1.7;

    color: var(--ink);

}

.about-description strong {

    color: var(--espresso);
    font-weight: 700;

}

.about-description em {

    color: var(--red-brown);
    font-style: normal;
    font-weight: 600;

}

/*==================================================
                  HEAD OFFICE CARD
==================================================*/

.head-office-card {

    width: 100%;
    max-width: 780px;

    margin: clamp(2.75rem, 5vw, 4.5rem) 0 0;

    padding: clamp(1.35rem, 2.5vw, 2.2rem);

    background: var(--espresso);

    border-left: 5px solid var(--gold);

    box-shadow: 0 16px 40px rgba(58, 37, 26, .2);

    font-style: normal;

}

.office-label {

    display: block;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .9vw, .9rem);
    font-weight: 600;

    letter-spacing: .28em;

    color: var(--gold);

    text-transform: uppercase;

}

.office-address {

    margin: 1.25rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 1.8vw, 1.75rem);
    font-weight: 600;
    line-height: 1.4;

    color: var(--cream);

}

.office-location {

    margin: 1.25rem 0 0;

    font-family: var(--font-sans);
    font-size: clamp(.85rem, 1.1vw, 1.15rem);
    line-height: 1.5;

    color: var(--gold-light);

}

.office-location span {

    color: var(--cream-2);

}

/*==================================================
                    IMAGE CARD
==================================================*/

.about-visual {

    position: relative;
    isolation: isolate;

    width: min(100%, 430px);
    height: auto;

    aspect-ratio: 4 / 5;

    justify-self: center;

    margin: 0;

    box-shadow: 0 18px 50px rgba(58, 37, 26, .3);

}

/* Gold offset frame */

.about-visual::before {

    content: "";

    position: absolute;

    inset: 12px -12px -12px 12px;

    z-index: -1;

    border: 2px solid var(--gold);

    pointer-events: none;

}

/* Image */

.about-visual img {

    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter: sepia(.12) contrast(1.05);

}

/* Image overlay */

.about-image-overlay {

    position: absolute;
    inset: 0;

    z-index: 2;

    background: linear-gradient(
        180deg,
        rgba(58, 37, 26, .05) 0%,
        rgba(58, 37, 26, .65) 100%
    );

    pointer-events: none;

}

/* Image caption */

.about-visual figcaption {

    position: absolute;

    right: 1.25rem;
    bottom: 1.25rem;
    left: 1.25rem;

    z-index: 3;

    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.7vw, 1.45rem);
    font-style: italic;
    line-height: 1.3;

    color: var(--cream);

}

/*==================================================
                  SECTION FOOTER CHROME
==================================================*/

.about-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: var(--near-black);

}

.about-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.about-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.about-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                    TABLET
==================================================*/

@media (max-width: 1050px) {

    .about-main {

        padding-block: 5rem;

    }

    .about-grid {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(270px, 360px);

        gap: 3rem;

    }

    .about-visual {

        width: min(100%, 360px);

    }

    .about-header h1 {

        font-size: clamp(3.5rem, 8vw, 5.5rem);

    }

    .about-description p {

        font-size: 1.05rem;

    }

    .office-address {

        font-size: 1.3rem;

    }

}

/*==================================================
                    TABLET / MOBILE
==================================================*/

@media (max-width: 760px) {

    .about-section {

        min-height: auto;

    }

    .about-section .chrome-header {

        min-height: 70px;

        padding-block: .85rem;

    }

    .about-section .chrome-tagline {

        display: none;

    }

    .about-main {

        padding-block: 4.5rem 5.5rem;

    }

    .about-grid {

        grid-template-columns: 1fr;

        gap: 4rem;

    }

    .about-header h1 {

        font-size: clamp(3.5rem, 15vw, 5.5rem);

    }

    .about-description p {

        font-size: 1rem;
        line-height: 1.65;

    }

    .head-office-card {

        border-left-width: 4px;

    }

    .about-visual {

        width: min(100%, 430px);

        margin-inline: auto;

    }

    .about-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .about-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    SMALL MOBILE
==================================================*/

@media (max-width: 480px) {

    .about-section .chrome-header {

        min-height: 64px;

        padding-inline: 1.1rem;

    }

    .about-section .chrome-logo {

        font-size: 1.3rem;

        letter-spacing: 2px;

    }

    .about-section .chrome-page-num {

        font-size: .58rem;

        letter-spacing: 2px;

    }

    .about-main {

        padding-block: 3.75rem 4.5rem;

    }

    .about-header h1 {

        font-size: 3.25rem;

    }

    .about-kicker {

        font-size: .65rem;
        letter-spacing: .2em;

    }

    .about-rule {

        width: 4.5rem;
        height: 3px;

        margin-block: 2rem 1.5rem;

    }

    .about-description p {

        font-size: .95rem;

    }

    .head-office-card {

        padding: 1.25rem;

    }

    .office-label {

        font-size: .62rem;
        letter-spacing: .18em;

    }

    .office-address {

        margin-top: 1rem;

        font-size: 1.1rem;

    }

    .office-location {

        margin-top: 1rem;

        font-size: .8rem;

    }

    .about-visual {

        width: min(100%, 350px);

    }

    .about-visual::before {

        inset: 8px -8px -8px 8px;

    }

    .about-visual figcaption {

        right: .9rem;
        bottom: .9rem;
        left: .9rem;

        font-size: 1rem;

    }

}

/*==================================================
                    VISION SECTION
==================================================*/

.vision-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: var(--cream);
    color: var(--ink);

}

/*==================================================
                  HEADER CHROME
==================================================*/

.vision-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 20;

    width: 100%;
    min-height: 90px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: linear-gradient(
        90deg,
        var(--espresso) 0%,
        var(--espresso-2) 100%
    );

    border-bottom: 3px solid var(--gold);

}

.vision-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 3px;

    color: var(--gold);
    text-decoration: none;

}

.vision-section .chrome-logo .reg {

    font-size: .45em;
    vertical-align: super;

    color: var(--gold-light);

}

.vision-section .chrome-tagline {

    margin-left: 24px;
    padding-left: 24px;

    border-left: 1px solid var(--gold);

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: 2px;

    color: var(--cream-2);
    text-transform: uppercase;

}

.vision-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 500;

    letter-spacing: 4px;

    color: var(--gold-light);

    white-space: nowrap;

}

/*==================================================
                  MAIN VISION AREA
==================================================*/

.vision-main {

    position: relative;
    z-index: 1;

    flex: 1;

    display: flex;

    width: 100%;

}

.vision-layout {

    display: grid;

    grid-template-columns:
        minmax(300px, 43%)
        minmax(0, 1fr);

    width: 100%;
    min-height: 0;

}

/*==================================================
                    LEFT PANEL
==================================================*/

.vision-panel {

    position: relative;

    display: flex;
    align-items: flex-end;

    min-height: 620px;

    overflow: hidden;

    background: linear-gradient(
        160deg,
        var(--espresso) 0%,
        var(--espresso-2) 100%
    );

    color: var(--cream);

}

.vision-beans {

    position: absolute;
    inset: 0;

    z-index: 0;

    opacity: .12;

    pointer-events: none;

}

.vision-beans img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}

.vision-panel-overlay {

    position: absolute;
    inset: 0;

    z-index: 1;

    background: linear-gradient(
        180deg,
        rgba(42, 23, 14, .15) 0%,
        rgba(26, 15, 10, .65) 100%
    );

    pointer-events: none;

}

.vision-panel-content {

    position: relative;
    z-index: 2;

    width: min(100%, 680px);

    margin: 0 auto;

    padding: clamp(3rem, 6vw, 7rem)
             clamp(1.5rem, 6vw, 7.5rem);

}

.vision-panel-label {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.75rem, 1.1vw, 1.15rem);
    font-weight: 500;
    line-height: 1.4;

    letter-spacing: clamp(.2em, .45vw, .6em);

    color: var(--gold-light);

    text-transform: uppercase;

}

.vision-rule {

    width: clamp(4rem, 7vw, 5rem);
    height: 3px;

    margin: 2rem 0;

    background: var(--gold);

}

.vision-statement {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(2rem, 3.5vw, 3.1rem);
    font-weight: 600;
    line-height: 1.25;

    color: var(--cream);

}

/*==================================================
                  RIGHT CONTENT PANEL
==================================================*/

.vision-content {

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;

    padding: clamp(3rem, 7vw, 7.5rem)
             clamp(1.5rem, 6vw, 7.5rem);

    background: var(--cream);

}

.vision-kicker {

    margin: 0 0 1.75rem;

    font-family: var(--font-sans);
    font-size: clamp(.75rem, 1.1vw, 1.1rem);
    font-weight: 600;

    letter-spacing: clamp(.2em, .4vw, .5em);

    color: var(--red-brown);

    text-transform: uppercase;

}

.vision-title {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(3.5rem, 6vw, 5.8rem);
    font-weight: 800;
    line-height: .95;

    color: var(--espresso);

}

.vision-title em {

    display: block;

    color: var(--gold-2);
    font-style: italic;
    font-weight: 600;

}

.vision-description {

    max-width: 850px;

    margin: clamp(3rem, 6vw, 6rem) 0 0;

    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.45vw, 1.45rem);
    font-weight: 400;
    line-height: 1.65;

    color: var(--ink);

}

/*==================================================
                    PILLARS
==================================================*/

.vision-pillars {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: clamp(.75rem, 1.5vw, 1.25rem);

    max-width: 880px;

    margin-top: clamp(3rem, 5vw, 5rem);

}

.vision-pillar {

    min-height: 140px;

    padding: clamp(1.1rem, 2vw, 1.5rem);

    background: var(--cream-2);

    border-top: 4px solid var(--gold);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.vision-pillar:hover {

    transform: translateY(-6px);

    box-shadow: 0 15px 35px rgba(58, 37, 26, .18);

}

.vision-pillar-number {

    display: block;

    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 700;
    line-height: 1;

    color: var(--espresso);

}

.vision-pillar h3 {

    margin: 1rem 0 .25rem;

    font-family: var(--font-sans);
    font-size: clamp(.75rem, 1.2vw, 1.1rem);
    font-weight: 600;
    line-height: 1.25;

    letter-spacing: .08em;

    color: var(--ink);
    text-transform: uppercase;

}

.vision-pillar p {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, .95vw, .9rem);
    line-height: 1.4;

    color: var(--muted);

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.vision-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 20;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: var(--near-black);

}

.vision-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.vision-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.vision-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                    TABLET
==================================================*/

@media (max-width: 1100px) {

    .vision-layout {

        grid-template-columns:
            minmax(260px, 38%)
            minmax(0, 1fr);

    }

    .vision-panel-content {

        padding-inline: clamp(1.5rem, 4vw, 3.5rem);

    }

    .vision-content {

        padding-inline: clamp(1.5rem, 4vw, 4rem);

    }

    .vision-statement {

        font-size: clamp(1.8rem, 3vw, 2.5rem);

    }

    .vision-description {

        margin-top: 3rem;
        font-size: 1.05rem;

    }

    .vision-pillar {

        padding: 1rem;

    }

    .vision-pillar h3 {

        font-size: .75rem;

    }

}

/*==================================================
                TABLET / MOBILE
==================================================*/

@media (max-width: 760px) {

    .vision-section {

        min-height: auto;

    }

    .vision-section .chrome-header {

        min-height: 70px;

        padding-block: .85rem;

    }

    .vision-section .chrome-tagline {

        display: none;

    }

    .vision-layout {

        grid-template-columns: 1fr;

    }

    .vision-panel {

        min-height: 400px;

        align-items: center;

    }

    .vision-panel-content {

        width: min(100%, 620px);

        padding: 4.5rem var(--page-gutter);

    }

    .vision-statement {

        max-width: 600px;

        font-size: clamp(2rem, 7vw, 3.2rem);

    }

    .vision-content {

        padding: 5rem var(--page-gutter) 5.5rem;

    }

    .vision-title {

        font-size: clamp(3.2rem, 13vw, 5.2rem);

    }

    .vision-description {

        margin-top: 2.75rem;

        font-size: 1rem;

        line-height: 1.65;

    }

    .vision-pillars {

        grid-template-columns: 1fr;

        max-width: 540px;

        margin-top: 3.5rem;

    }

    .vision-pillar {

        min-height: 120px;

    }

    .vision-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .vision-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    SMALL MOBILE
==================================================*/

@media (max-width: 480px) {

    .vision-section .chrome-header {

        min-height: 64px;

        padding-inline: 1.1rem;

    }

    .vision-section .chrome-logo {

        font-size: 1.3rem;

        letter-spacing: 2px;

    }

    .vision-section .chrome-page-num {

        font-size: .58rem;

        letter-spacing: 2px;

    }

    .vision-panel {

        min-height: 360px;

    }

    .vision-panel-content {

        padding-block: 3.5rem;

    }

    .vision-panel-label {

        font-size: .68rem;

        letter-spacing: .24em;

    }

    .vision-rule {

        width: 4.5rem;
        height: 2px;

        margin-block: 1.5rem;

    }

    .vision-statement {

        font-size: 1.8rem;

    }

    .vision-content {

        padding-block: 4rem 4.5rem;

    }

    .vision-kicker {

        font-size: .65rem;

        letter-spacing: .2em;

    }

    .vision-title {

        font-size: 3.1rem;

    }

    .vision-description {

        font-size: .95rem;

    }

    .vision-pillar {

        min-height: 110px;

        padding: 1rem;

    }

    .vision-pillar-number {

        font-size: 1.9rem;

    }

    .vision-pillar h3 {

        margin-top: .75rem;

        font-size: .7rem;

    }

    .vision-pillar p {

        font-size: .7rem;

    }

}

/*==================================================
                    MISSION SECTION
==================================================*/

.mission-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: var(--cream);
    color: var(--ink);

}

/*==================================================
                  HEADER CHROME
==================================================*/

.mission-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 90px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: linear-gradient(
        90deg,
        var(--espresso) 0%,
        var(--espresso-2) 100%
    );

    border-bottom: 3px solid var(--gold);

}

.mission-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 3px;

    color: var(--gold);
    text-decoration: none;

}

.mission-section .chrome-logo .reg {

    font-size: .45em;
    vertical-align: super;

    color: var(--gold-light);

}

.mission-section .chrome-tagline {

    margin-left: 24px;
    padding-left: 24px;

    border-left: 1px solid var(--gold);

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: 2px;

    color: var(--cream-2);
    text-transform: uppercase;

}

.mission-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 500;

    letter-spacing: 4px;

    color: var(--gold-light);

    white-space: nowrap;

}

/*==================================================
                  MAIN MISSION AREA
==================================================*/

.mission-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(4rem, 7vw, 7rem) var(--page-gutter);

    background: var(--cream);

}

.mission-main::before {

    content: "";

    position: absolute;
    inset: 0;

    background: url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    opacity: .055;

    pointer-events: none;

}

.mission-container {

    position: relative;
    z-index: 1;

    width: min(100%, 1500px);

    margin-inline: auto;

}

/*==================================================
                    PAGE HEADING
==================================================*/

.mission-heading {

    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);

}

.mission-kicker {

    margin: 0 0 1.25rem;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, 1rem);
    font-weight: 600;

    letter-spacing: clamp(.2em, .4vw, .5em);

    color: var(--red-brown);

    text-transform: uppercase;

}

.mission-heading h1 {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(3.5rem, 7vw, 7rem);
    font-weight: 800;
    line-height: .95;

    color: var(--espresso);

}

.mission-heading-rule {

    width: clamp(5rem, 8vw, 7.5rem);
    height: 4px;

    margin-top: clamp(2rem, 4vw, 3.5rem);

    background: var(--gold);

}

/*==================================================
                    CONTENT GRID
==================================================*/

.mission-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: clamp(1.5rem, 3vw, 3rem);

    align-items: stretch;

}

/*==================================================
                    MISSION CARD
==================================================*/

.mission-card {

    min-height: 480px;

    display: flex;
    flex-direction: column;

    padding: clamp(2rem, 4vw, 3.25rem);

    background: var(--espresso);

    border-left: 6px solid var(--gold);

    box-shadow: 0 18px 45px rgba(58, 37, 26, .2);

}

.mission-card-label,
.goal-card-label {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, 1rem);
    font-weight: 600;

    letter-spacing: .3em;

    text-transform: uppercase;

}

.mission-card-label {

    color: var(--gold);

}

.mission-card h2 {

    max-width: 700px;

    margin: 2rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(2rem, 3.2vw, 3rem);
    font-weight: 600;
    line-height: 1.25;

    color: var(--cream);

}

.mission-card-divider {

    width: 60px;
    height: 2px;

    margin-top: auto;
    margin-bottom: 1.5rem;

    background: var(--gold);

}

.mission-commitment h3 {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.85rem, 1.2vw, 1.15rem);
    font-weight: 500;

    letter-spacing: .12em;

    color: var(--gold-light);

    text-transform: uppercase;

}

.mission-commitment p {

    max-width: 680px;

    margin: .75rem 0 0;

    font-family: var(--font-sans);
    font-size: clamp(.9rem, 1.25vw, 1.25rem);
    line-height: 1.5;

    color: var(--cream-2);

}

/*==================================================
                      GOAL CARD
==================================================*/

.goal-card {

    min-height: 480px;

    padding: clamp(2rem, 4vw, 3.25rem);

    border: 2px solid var(--espresso);

    background: rgba(245, 239, 228, .5);

}

.goal-card-label {

    color: var(--red-brown);

}

.goal-list {

    display: flex;
    flex-direction: column;

    margin-top: 2rem;

}

.goal-item {

    padding: 0 0 2rem;

}

.goal-item + .goal-item {

    padding-top: 2rem;

    border-top: 1px solid rgba(58, 37, 26, .25);

}

.goal-number {

    display: block;

    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1;

    color: var(--gold);

}

.goal-item h2 {

    margin: .6rem 0 0;

    font-family: var(--font-sans);
    font-size: clamp(1.2rem, 1.8vw, 1.7rem);
    font-weight: 600;
    line-height: 1.35;

    color: var(--espresso);

}

.goal-item p {

    max-width: 650px;

    margin: .4rem 0 0;

    font-family: var(--font-sans);
    font-size: clamp(.9rem, 1.25vw, 1.2rem);
    line-height: 1.5;

    color: var(--muted);

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.mission-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: var(--near-black);

}

.mission-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.mission-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.mission-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1050px) {

    .mission-main {

        padding-block: 5rem;

    }

    .mission-grid {

        gap: 1.5rem;

    }

    .mission-card,
    .goal-card {

        min-height: 460px;

        padding: 2rem;

    }

    .mission-card h2 {

        font-size: clamp(1.8rem, 3.2vw, 2.5rem);

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 760px) {

    .mission-section {

        min-height: auto;

    }

    .mission-section .chrome-header {

        min-height: 70px;

        padding-block: .85rem;

    }

    .mission-section .chrome-tagline {

        display: none;

    }

    .mission-main {

        padding-block: 4.5rem 5.5rem;

    }

    .mission-heading {

        margin-bottom: 3rem;

    }

    .mission-heading h1 {

        font-size: clamp(3.4rem, 14vw, 5.5rem);

    }

    .mission-grid {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

    .mission-card,
    .goal-card {

        min-height: auto;

    }

    .mission-card {

        min-height: 430px;

    }

    .mission-card h2 {

        font-size: clamp(2rem, 7vw, 2.8rem);

    }

    .mission-card-divider {

        margin-top: 4rem;

    }

    .goal-card {

        padding-block: 2.25rem;

    }

    .goal-item h2 {

        font-size: 1.3rem;

    }

    .mission-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .mission-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    SMALL MOBILE
==================================================*/

@media (max-width: 480px) {

    .mission-section .chrome-header {

        min-height: 64px;

        padding-inline: 1.1rem;

    }

    .mission-section .chrome-logo {

        font-size: 1.3rem;

        letter-spacing: 2px;

    }

    .mission-section .chrome-page-num {

        font-size: .58rem;

        letter-spacing: 2px;

    }

    .mission-main {

        padding-block: 3.75rem 4.5rem;

    }

    .mission-kicker {

        font-size: .65rem;
        letter-spacing: .2em;

    }

    .mission-heading h1 {

        font-size: 3.2rem;

    }

    .mission-heading-rule {

        width: 4.5rem;
        height: 3px;

    }

    .mission-card {

        min-height: 390px;

        padding: 1.5rem;

        border-left-width: 4px;

    }

    .mission-card h2 {

        margin-top: 1.5rem;

        font-size: 1.8rem;

    }

    .mission-card-divider {

        margin-top: 3rem;
        margin-bottom: 1.25rem;

    }

    .mission-commitment h3 {

        font-size: .75rem;

    }

    .mission-commitment p {

        font-size: .85rem;

    }

    .goal-card {

        padding: 1.5rem;

    }

    .goal-number {

        font-size: 2.5rem;

    }

    .goal-item h2 {

        font-size: 1.15rem;

    }

    .goal-item p {

        font-size: .85rem;

    }

}

/*==================================================
                  CORE VALUES SECTION
==================================================*/

.core-values-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: var(--cream);
    color: var(--ink);

}

/*==================================================
                  HEADER CHROME
==================================================*/

.core-values-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 90px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: linear-gradient(
        90deg,
        var(--espresso) 0%,
        var(--espresso-2) 100%
    );

    border-bottom: 3px solid var(--gold);

}

.core-values-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 3px;

    color: var(--gold);
    text-decoration: none;

}

.core-values-section .chrome-logo .reg {

    font-size: .45em;
    vertical-align: super;

    color: var(--gold-light);

}

.core-values-section .chrome-tagline {

    margin-left: 24px;
    padding-left: 24px;

    border-left: 1px solid var(--gold);

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: 2px;

    color: var(--cream-2);
    text-transform: uppercase;

}

.core-values-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 500;

    letter-spacing: 4px;

    color: var(--gold-light);

    white-space: nowrap;

}

/*==================================================
                  MAIN CONTENT
==================================================*/

.core-values-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(4rem, 7vw, 7rem) var(--page-gutter);

    background: var(--cream);

}

.core-values-main::before {

    content: "";

    position: absolute;
    inset: 0;

    background: url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    opacity: .055;

    pointer-events: none;

}

.core-values-container {

    position: relative;
    z-index: 1;

    width: min(100%, 1500px);

    margin-inline: auto;

}

/*==================================================
                    PAGE HEADING
==================================================*/

.core-values-heading {

    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);

}

.core-values-kicker {

    margin: 0 0 1.25rem;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, 1rem);
    font-weight: 600;

    letter-spacing: clamp(.2em, .4vw, .5em);

    color: var(--red-brown);

    text-transform: uppercase;

}

.core-values-heading h1 {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(3.5rem, 7vw, 7rem);
    font-weight: 800;
    line-height: .95;

    color: var(--espresso);

}

.core-values-rule {

    width: clamp(5rem, 8vw, 7.5rem);
    height: 4px;

    margin-top: clamp(2rem, 4vw, 3.5rem);

    background: var(--gold);

}

/*==================================================
                  VALUE CARD GRID
==================================================*/

.core-values-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: clamp(1rem, 2vw, 1.75rem);

}

/*==================================================
                    VALUE CARDS
==================================================*/

.value-card {

    min-height: 255px;

    display: grid;

    grid-template-columns: 90px minmax(0, 1fr);

    gap: 28px;

    align-items: start;

    padding: clamp(1.5rem, 3vw, 2rem);

    border-top: 4px solid var(--gold);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.value-card:hover {

    transform: translateY(-7px);

    box-shadow: 0 18px 40px rgba(58, 37, 26, .2);

}

.value-card-dark {

    background: var(--espresso);

    color: var(--cream);

}

.value-card-light {

    background: var(--cream-2);

    color: var(--ink);

}

.value-card-letter {

    font-family: var(--font-serif);
    font-size: clamp(3.5rem, 5vw, 5rem);
    font-weight: 800;
    line-height: .9;

}

.value-card-dark .value-card-letter {

    color: var(--gold);

}

.value-card-light .value-card-letter {

    color: var(--red-brown);

}

.value-card-content {

    min-width: 0;

}

.value-card-content h2 {

    margin: .35rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(1.55rem, 2.4vw, 2.35rem);
    font-weight: 700;
    line-height: 1.15;

    letter-spacing: 2px;
    text-transform: uppercase;

}

.value-card-dark .value-card-content h2 {

    color: var(--cream);

}

.value-card-light .value-card-content h2 {

    color: var(--espresso);

}

.value-card-divider {

    width: 60px;
    height: 2px;

    margin: 1.25rem 0 1rem;

}

.value-card-dark .value-card-divider {

    background: var(--gold);

}

.value-card-light .value-card-divider {

    background: var(--red-brown);

}

.value-card-content p {

    max-width: 650px;

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.95rem, 1.25vw, 1.25rem);
    line-height: 1.55;

}

.value-card-dark .value-card-content p {

    color: var(--cream-2);

}

.value-card-light .value-card-content p {

    color: var(--ink);

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.core-values-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: var(--near-black);

}

.core-values-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.core-values-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.core-values-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1050px) {

    .core-values-main {

        padding-block: 5rem;

    }

    .core-values-grid {

        gap: 1.25rem;

    }

    .value-card {

        grid-template-columns: 70px minmax(0, 1fr);

        gap: 20px;

        min-height: 240px;

        padding: 1.5rem;

    }

    .value-card-content h2 {

        font-size: clamp(1.35rem, 2.4vw, 1.9rem);

        letter-spacing: 1px;

    }

    .value-card-content p {

        font-size: 1rem;

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 760px) {

    .core-values-section {

        min-height: auto;

    }

    .core-values-section .chrome-header {

        min-height: 70px;

        padding-block: .85rem;

    }

    .core-values-section .chrome-tagline {

        display: none;

    }

    .core-values-main {

        padding-block: 4.5rem 5.5rem;

    }

    .core-values-heading {

        margin-bottom: 3rem;

    }

    .core-values-heading h1 {

        font-size: clamp(3.3rem, 14vw, 5.5rem);

    }

    .core-values-grid {

        grid-template-columns: 1fr;

        gap: 1.25rem;

    }

    .value-card {

        min-height: 210px;

        grid-template-columns: 75px minmax(0, 1fr);

        gap: 22px;

    }

    .value-card-letter {

        font-size: 4rem;

    }

    .value-card-content h2 {

        font-size: clamp(1.5rem, 6vw, 2.1rem);

    }

    .value-card-content p {

        font-size: 1rem;

    }

    .core-values-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .core-values-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    SMALL MOBILE
==================================================*/

@media (max-width: 480px) {

    .core-values-section .chrome-header {

        min-height: 64px;

        padding-inline: 1.1rem;

    }

    .core-values-section .chrome-logo {

        font-size: 1.3rem;

        letter-spacing: 2px;

    }

    .core-values-section .chrome-page-num {

        font-size: .58rem;

        letter-spacing: 2px;

    }

    .core-values-main {

        padding-block: 3.75rem 4.5rem;

    }

    .core-values-kicker {

        font-size: .65rem;

        letter-spacing: .2em;

    }

    .core-values-heading h1 {

        font-size: 3.2rem;

    }

    .core-values-rule {

        width: 4.5rem;
        height: 3px;

    }

    .value-card {

        min-height: 0;

        grid-template-columns: 55px minmax(0, 1fr);

        gap: 16px;

        padding: 1.25rem;

    }

    .value-card-letter {

        font-size: 3.2rem;

    }

    .value-card-content h2 {

        margin-top: .2rem;

        font-size: 1.25rem;

        letter-spacing: .5px;

    }

    .value-card-divider {

        width: 45px;

        margin-block: 1rem .8rem;

    }

    .value-card-content p {

        font-size: .9rem;

        line-height: 1.5;

    }

}

/*==================================================
                  OUR PRODUCTS SECTION
==================================================*/

.products-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: var(--near-black);

    color: var(--cream);

}

.products-section::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    background:

        linear-gradient(
            180deg,
            rgba(26, 15, 10, .68) 0%,
            rgba(58, 37, 26, .88) 100%
        ),

        url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    pointer-events: none;

}

/*==================================================
                  HEADER CHROME
==================================================*/

.products-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 90px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: linear-gradient(
        90deg,
        var(--espresso) 0%,
        var(--espresso-2) 100%
    );

    border-bottom: 3px solid var(--gold);

}

.products-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 3px;

    color: var(--gold);
    text-decoration: none;

}

.products-section .chrome-logo .reg {

    font-size: .45em;
    vertical-align: super;

    color: var(--gold-light);

}

.products-section .chrome-tagline {

    margin-left: 24px;
    padding-left: 24px;

    border-left: 1px solid var(--gold);

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: 2px;

    color: var(--cream-2);
    text-transform: uppercase;

}

.products-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 500;

    letter-spacing: 4px;

    color: var(--gold-light);

    white-space: nowrap;

}

/*==================================================
                  MAIN PRODUCTS AREA
==================================================*/

.products-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(4rem, 7vw, 7rem) var(--page-gutter);

}

.products-container {

    width: min(100%, 1500px);

    margin-inline: auto;

}

/*==================================================
                    PAGE HEADING
==================================================*/

.products-heading {

    margin-bottom: clamp(2rem, 4vw, 3.5rem);

}

.products-kicker {

    margin: 0 0 1.25rem;

    font-family: var(--font-sans);
    font-size: clamp(.75rem, 1.1vw, 1.1rem);
    font-weight: 500;

    letter-spacing: clamp(.2em, .4vw, .55em);

    color: var(--gold);

    text-transform: uppercase;

}

.products-heading h1 {

    max-width: 1000px;

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 800;
    line-height: .98;

    color: var(--cream);

}

.products-rule {

    width: clamp(5rem, 8vw, 7.5rem);
    height: 4px;

    margin-top: clamp(2rem, 4vw, 3.5rem);

    background: var(--gold);

}

/*==================================================
                  MANUFACTURER NOTE
==================================================*/

.manufacturer-note p {

    max-width: 1250px;

    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);

    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.35vw, 1.35rem);
    font-weight: 400;
    line-height: 1.6;

    color: white;

}

.manufacturer-note p strong {

    color: var(--gold);
    font-weight: 700;

}

/*==================================================
                  PRODUCT GRID
==================================================*/

.products-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: clamp(1.25rem, 2.5vw, 2.5rem);

}

/*==================================================
                    PRODUCT CARD
==================================================*/

.product-card {

    display: grid;

    grid-template-columns: minmax(150px, 200px) minmax(0, 1fr);

    gap: clamp(1.5rem, 3vw, 2.5rem);

    min-width: 0;

    padding: clamp(1.25rem, 2.5vw, 1.9rem);

    background: rgba(245, 239, 228, .07);

    border: 1px solid rgba(201, 166, 107, .45);

    box-shadow: 0 18px 45px rgba(0, 0, 0, .25);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}

.product-card:hover {

    transform: translateY(-8px);

    background: rgba(245, 239, 228, .11);

    box-shadow: 0 25px 55px rgba(0, 0, 0, .4);

}

/*==================================================
                  PRODUCT IMAGE
==================================================*/

.product-image-wrap {

    width: 100%;
    aspect-ratio: 3 / 4;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: rgba(0, 0, 0, .18);

    box-shadow: 0 15px 35px rgba(0, 0, 0, .45);

}

.product-image-wrap img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

}

/*==================================================
                  PRODUCT CONTENT
==================================================*/

.product-content {

    min-width: 0;

    display: flex;
    flex-direction: column;

    padding-block: .25rem;

}

.product-label {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .8vw, .85rem);
    font-weight: 600;

    letter-spacing: .25em;

    color: var(--gold);

    text-transform: uppercase;

}

.product-content h2 {

    margin: 1rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 2.7vw, 2.8rem);
    font-weight: 800;
    line-height: 1.05;

    color: var(--cream);

}

.product-divider {

    width: 60px;
    height: 2px;

    margin: 1.5rem 0 1.25rem;

    background: var(--gold);

}

.product-description {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.9rem, 1.2vw, 1.15rem);
    line-height: 1.55;

    color: var(--cream-2);

}

.product-description strong {

    color: var(--gold-light);
    font-weight: 700;

}

.product-price {

    margin: auto 0 0;
    padding-top: 1.5rem;

    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 1.8vw, 1.65rem);
    font-style: italic;
    line-height: 1.2;
    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.products-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: var(--near-black);

}

.products-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.products-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.products-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1050px) {

    .products-main {

        padding-block: 5rem;

    }

    .products-grid {

        grid-template-columns: 1fr;

        max-width: 850px;

    }

    .product-card {

        grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 760px) {

    .products-section {

        min-height: auto;

    }

    .products-section .chrome-header {

        min-height: 70px;

        padding-block: .85rem;

    }

    .products-section .chrome-tagline {

        display: none;

    }

    .products-main {

        padding-block: 4.5rem 5.5rem;

    }

    .products-heading h1 {

        font-size: clamp(3rem, 13vw, 5rem);

    }

    .manufacturer-note {

        font-size: 1rem;
        line-height: 1.6;

    }

    .product-card {

        grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);

        gap: 1.25rem;

        padding: 1.25rem;

    }

    .product-content h2 {

        font-size: clamp(1.5rem, 5vw, 2.25rem);

    }

    .product-description {

        font-size: .95rem;

    }

    .products-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .products-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    SMALL MOBILE
==================================================*/

@media (max-width: 520px) {

    .products-section .chrome-header {

        min-height: 64px;

        padding-inline: 1.1rem;

    }

    .products-section .chrome-logo {

        font-size: 1.3rem;

        letter-spacing: 2px;

    }

    .products-section .chrome-page-num {

        font-size: .58rem;

        letter-spacing: 2px;

    }

    .products-main {

        padding-block: 3.75rem 4.5rem;

    }

    .products-kicker {

        font-size: .65rem;
        letter-spacing: .2em;

    }

    .products-heading h1 {

        font-size: 2.8rem;

    }

    .products-rule {

        width: 4.5rem;
        height: 3px;

    }

    .manufacturer-note {

        font-size: .9rem;

    }

    .products-grid {

        gap: 1.25rem;

    }

    .product-card {

        grid-template-columns: 1fr;

        gap: 1.5rem;

        padding: 1.25rem;

    }

    .product-image-wrap {

        width: min(100%, 190px);

        margin-inline: auto;

    }

    .product-content h2 {

        font-size: 1.8rem;

    }

    .product-price {

        margin-top: 1.5rem;

    }

}

/*==================================================
              RESTORE INGREDIENTS SECTION
==================================================*/

.ingredients-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: #f5ede0;

    color: #1f1410;

}

/*==================================================
                  HEADER CHROME
==================================================*/

.ingredients-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 64px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 4vw, 5rem);

    background: #1f1410;

    border-bottom: 2px solid #c8a25c;

}

.ingredients-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-display, var(--font-serif));
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: .25em;

    color: #c8a25c;
    text-decoration: none;

}

.ingredients-section .chrome-logo .reg {

    font-size: .45em;
    vertical-align: super;

    color: #eadfca;

}

.ingredients-section .chrome-tagline {

    margin-left: 1.5rem;
    padding-left: 1.5rem;

    border-left: 1px solid #c8a25c;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .9vw, .85rem);
    letter-spacing: .14em;

    color: #eadfca;
    text-transform: uppercase;

}

.ingredients-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.62rem, .85vw, .85rem);
    letter-spacing: .16em;

    color: #eadfca;

    text-align: right;
    text-transform: uppercase;
}

/*==================================================
                    MAIN AREA
==================================================*/

.ingredients-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(4rem, 7vw, 7rem) var(--page-gutter);

}

.ingredients-main::before {

    content: "";

    position: absolute;
    inset: 0;

    background: url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    opacity: .06;

    pointer-events: none;

}

.ingredients-container {

    position: relative;
    z-index: 1;

    width: min(100%, 1500px);

    margin-inline: auto;

}

/*==================================================
                    HEADING
==================================================*/

.ingredients-heading {

    margin-bottom: 2rem;

}

.ingredients-kicker {

    margin: 0 0 1rem;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, 1rem);
    font-weight: 600;

    letter-spacing: clamp(.18em, .4vw, .55em);

    color: #7a2e28;

    text-transform: uppercase;

}

.ingredients-heading h1 {

    max-width: 1100px;

    margin: 0;

    font-family: var(--font-display, var(--font-serif));
    font-size: clamp(3rem, 6vw, 6.2rem);
    font-weight: 800;
    line-height: .98;

    letter-spacing: -.03em;

    color: #1f1410;

}

.ingredients-rule {

    width: clamp(5rem, 9vw, 11rem);
    height: 4px;

    margin: 2rem 0 1.5rem;

    background: #c8a25c;

}

.ingredients-intro {

    max-width: 900px;

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.35vw, 1.35rem);
    line-height: 1.55;

    color: #5a3a2a;

}

/*==================================================
                MANUFACTURER NOTE
==================================================*/

.manufacturer-note {

    max-width: 1150px;

    margin: 0 0 clamp(2.5rem, 5vw, 4rem);

    padding: 1rem 1.25rem;

    background: rgba(200, 162, 92, .1);

    border-left: 3px solid #c8a25c;

    font-family: var(--font-sans);
    font-size: clamp(.9rem, 1.15vw, 1.15rem);
    line-height: 1.55;

    color: #5a3a2a;

}

.manufacturer-note strong {

    color: #7a2e28;
    font-weight: 700;

}

/*==================================================
                INGREDIENT CARD GRID
==================================================*/

.ingredients-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: clamp(1rem, 1.5vw, 1.5rem);

}

/*==================================================
                  INGREDIENT CARDS
==================================================*/

.ingredient-card {

    min-width: 0;

    overflow: hidden;

    border: 1px solid rgba(200, 162, 92, .35);

    box-shadow: 0 12px 30px rgba(31, 20, 16, .12);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.ingredient-card:hover {

    transform: translateY(-7px);

    box-shadow: 0 20px 40px rgba(31, 20, 16, .22);

}

.ingredient-card-light {

    background: #fff;

    color: #1f1410;

}

.ingredient-card-dark {

    background: #1f1410;

    color: #f5ede0;

}

.ingredient-card-accent {

    background: #7a2e28;

    color: #f5ede0;

}

/*==================================================
                  INGREDIENT IMAGE
==================================================*/

.ingredient-image {

    width: 100%;

    aspect-ratio: 2.35 / 1;

    overflow: hidden;

    background: #342119;

}

.ingredient-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .45s ease;

}

.ingredient-card:hover .ingredient-image img {

    transform: scale(1.06);

}

/*==================================================
                INGREDIENT CONTENT
==================================================*/

.ingredient-content {

    min-height: 120px;

    padding: 1.2rem 1.25rem 1.35rem;

}

.ingredient-content h2 {

    margin: 0;

    font-family: var(--font-display, var(--font-serif));
    font-size: clamp(1.2rem, 1.55vw, 1.55rem);
    font-weight: 700;
    line-height: 1.15;

}

.ingredient-content p {

    margin: .5rem 0 0;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .8vw, .82rem);
    font-weight: 500;
    line-height: 1.35;

    letter-spacing: .1em;

    text-transform: uppercase;

}

.ingredient-card-light .ingredient-content p {

    color: #7a2e28;

}

.ingredient-card-dark .ingredient-content p {

    color: #c8a25c;

}

.ingredient-card-accent .ingredient-content p {

    color: #e4c489;

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.ingredients-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 4vw, 5rem);

    background: #1f1410;

}

.ingredients-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    letter-spacing: .1em;

    color: #eadfca;

}

.ingredients-section .chrome-footer .gold {

    color: #c8a25c;
    font-weight: 600;

}

.ingredients-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-display, var(--font-serif));
    font-size: clamp(.75rem, .95vw, 1rem);
    font-style: italic;

    color: #c8a25c;

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1150px) {

    .ingredients-main {

        padding-block: 5rem;

    }

    .ingredients-grid {

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 800px) {

    .ingredients-section {

        min-height: auto;

    }

    .ingredients-section .chrome-header {

        min-height: 70px;

        padding-block: .85rem;

    }

    .ingredients-section .chrome-tagline {

        display: none;

    }

    .ingredients-main {

        padding-block: 4.5rem 5.5rem;

    }

    .ingredients-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 1rem;

    }

    .ingredient-content {

        min-height: 110px;

        padding: 1rem;

    }

    .ingredient-content h2 {

        font-size: 1.25rem;

    }

    .ingredient-content p {

        font-size: .65rem;

        letter-spacing: .07em;

    }

    .ingredients-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .ingredients-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    MOBILE
==================================================*/

@media (max-width: 520px) {

    .ingredients-section .chrome-header {

        min-height: 64px;

        padding-inline: 1.1rem;

    }

    .ingredients-section .chrome-logo {

        font-size: 1.25rem;

        letter-spacing: .16em;

    }

    .ingredients-section .chrome-page-num {

        font-size: .55rem;

        letter-spacing: .08em;

    }

    .ingredients-main {

        padding-block: 3.75rem 4.5rem;

    }

    .ingredients-kicker {

        font-size: .65rem;

        letter-spacing: .18em;

    }

    .ingredients-heading h1 {

        font-size: 2.8rem;

    }

    .ingredients-rule {

        width: 4.5rem;
        height: 3px;

    }

    .ingredients-intro {

        font-size: .95rem;

    }

    .manufacturer-note {

        padding: .9rem 1rem;

        font-size: .85rem;

    }

    .ingredients-grid {

        grid-template-columns: 1fr;

        gap: 1.2rem;

    }

    .ingredient-image {

        aspect-ratio: 2.6 / 1;

    }

    .ingredient-content {

        min-height: auto;

        padding: 1rem 1.15rem 1.2rem;

    }

    .ingredient-content h2 {

        font-size: 1.35rem;

    }

    .ingredient-content p {

        font-size: .68rem;

    }

}

/*==================================================
                  SMALL MOBILE
==================================================*/

@media (max-width: 380px) {

    .ingredients-heading h1 {

        font-size: 2.45rem;

    }

    .ingredients-intro {

        font-size: .9rem;

    }

    .ingredients-section .chrome-page-num {

        font-size: .5rem;

    }

}

/*==================================================
                RESTORE BENEFITS SECTION
==================================================*/

.restore-benefits-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: var(--cream);

    color: var(--ink);

}

/*==================================================
                  HEADER CHROME
==================================================*/

.restore-benefits-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 90px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: linear-gradient(
        90deg,
        var(--espresso) 0%,
        var(--espresso-2) 100%
    );

    border-bottom: 3px solid var(--gold);

}

.restore-benefits-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 3px;

    color: var(--gold);
    text-decoration: none;

}

.restore-benefits-section .chrome-logo .reg {

    font-size: .45em;
    vertical-align: super;

    color: var(--gold-light);

}

.restore-benefits-section .chrome-tagline {

    margin-left: 24px;
    padding-left: 24px;

    border-left: 1px solid var(--gold);

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: 2px;

    color: var(--cream-2);
    text-transform: uppercase;

}

.restore-benefits-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 500;

    letter-spacing: 4px;

    color: var(--gold-light);

    white-space: nowrap;

}

/*==================================================
                    MAIN AREA
==================================================*/

.restore-benefits-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(4rem, 7vw, 7rem) var(--page-gutter);

}

.restore-benefits-main::before {

    content: "";

    position: absolute;
    inset: 0;

    background: url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    opacity: .055;

    pointer-events: none;

}

.restore-benefits-container {

    position: relative;
    z-index: 1;

    width: min(100%, 1500px);

    margin-inline: auto;

}

.restore-benefits-layout {

    display: grid;

    grid-template-columns:
        minmax(250px, 340px)
        minmax(0, 1fr);

    gap: clamp(2.5rem, 5vw, 5.5rem);

    align-items: start;

}

/*==================================================
                  PRODUCT PANEL
==================================================*/

.restore-product-panel {

    position: sticky;
    top: 1.5rem;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: clamp(1.5rem, 3vw, 2.5rem) 1.5rem;

    background: linear-gradient(
        160deg,
        var(--espresso) 0%,
        var(--near-black) 100%
    );

    box-shadow: 0 22px 55px rgba(0, 0, 0, .3);

    text-align: center;

}

.restore-product-image {

    width: min(100%, 245px);

    aspect-ratio: 9 / 16;

    overflow: hidden;

    box-shadow: 0 25px 55px rgba(0, 0, 0, .55);

}

.restore-product-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

}

.restore-product-details {

    margin-top: 1.75rem;

}

.restore-product-label {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .85vw, .85rem);
    font-weight: 600;

    letter-spacing: .2em;

    color: var(--gold);

    text-transform: uppercase;

}

.restore-product-details h2 {

    margin: .75rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    font-weight: 700;
    line-height: 1.15;

    color: var(--cream);

}

/*==================================================
                  BENEFITS HEADER
==================================================*/

.restore-benefits-content {

    min-width: 0;

}

.restore-benefits-header {

    max-width: 950px;

}

.restore-benefits-kicker {

    margin: 0 0 1.25rem;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, 1rem);
    font-weight: 600;

    letter-spacing: clamp(.18em, .4vw, .5em);

    color: var(--red-brown);

    text-transform: uppercase;

}

.restore-benefits-header h1 {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 800;
    line-height: .98;

    color: var(--espresso);

}

.restore-benefits-header h1 em {

    color: var(--red-brown);
    font-style: italic;
    font-weight: 600;

}

.restore-benefits-rule {

    width: clamp(5rem, 8vw, 7.5rem);
    height: 4px;

    margin: 2rem 0 3rem;

    background: var(--gold);

}

/*==================================================
                  BENEFIT LISTS
==================================================*/

.benefit-columns {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: clamp(1.25rem, 2.5vw, 2.5rem);

}

.benefit-list {

    display: flex;
    flex-direction: column;

    gap: .9rem;

    padding: 0;
    margin: 0;

    list-style: none;

}

.benefit-list li {

    position: relative;

    padding-left: 1.3rem;

    font-family: var(--font-sans);
    font-size: clamp(.9rem, 1.2vw, 1.2rem);
    line-height: 1.4;

    color: var(--ink);

}

.benefit-list li::before {

    content: "▸";

    position: absolute;
    left: 0;
    top: 0;

    color: var(--gold);

    font-weight: 700;

}

/*==================================================
                  PROMISE CALLOUT
==================================================*/

.restore-promise {

    margin-top: clamp(3rem, 5vw, 5rem);

    padding: clamp(1.5rem, 2.5vw, 2.25rem);

    background: var(--espresso);

    border-left: 6px solid var(--gold);

    box-shadow: 0 16px 40px rgba(58, 37, 26, .2);

}

.restore-promise-label {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 600;

    letter-spacing: .28em;

    color: var(--gold);

    text-transform: uppercase;

}

.restore-promise-text {

    max-width: 900px;

    margin: .8rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    font-style: italic;
    line-height: 1.35;

    color: var(--cream);

}

/*==================================================
                    DISCLAIMER
==================================================*/

.restore-disclaimer {

    max-width: 900px;

    margin: 1.25rem 0 0;

    font-family: var(--font-sans);
    font-size: .78rem;
    line-height: 1.5;

    color: var(--muted);

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.restore-benefits-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: var(--near-black);

}

.restore-benefits-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.restore-benefits-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.restore-benefits-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1100px) {

    .restore-benefits-main {

        padding-block: 5rem;

    }

    .restore-benefits-layout {

        grid-template-columns:
            minmax(220px, 290px)
            minmax(0, 1fr);

        gap: 2.5rem;

    }

    .restore-product-image {

        width: min(100%, 210px);

    }

    .benefit-columns {

        gap: 1.25rem;

    }

    .benefit-list li {

        font-size: 1rem;

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 800px) {

    .restore-benefits-section {

        min-height: auto;

    }

    .restore-benefits-section .chrome-header {

        min-height: 70px;

        padding-block: .85rem;

    }

    .restore-benefits-section .chrome-tagline {

        display: none;

    }

    .restore-benefits-main {

        padding-block: 4.5rem 5.5rem;

    }

    .restore-benefits-layout {

        grid-template-columns: 1fr;

        gap: 3.5rem;

        max-width: 700px;

        margin-inline: auto;

    }

    .restore-product-panel {

        position: relative;
        top: auto;

        display: grid;

        grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);

        align-items: center;

        gap: 2rem;

        padding: 2rem;

        text-align: left;

    }

    .restore-product-image {

        width: 100%;

    }

    .restore-product-details {

        margin-top: 0;

    }

    .restore-benefits-header h1 {

        font-size: clamp(3rem, 12vw, 5rem);

    }

    .benefit-columns {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 1.5rem;

    }

    .restore-benefits-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .restore-benefits-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    MOBILE
==================================================*/

@media (max-width: 520px) {

    .restore-benefits-section .chrome-header {

        min-height: 64px;

        padding-inline: 1.1rem;

    }

    .restore-benefits-section .chrome-logo {

        font-size: 1.3rem;

        letter-spacing: 2px;

    }

    .restore-benefits-section .chrome-page-num {

        font-size: .55rem;

        letter-spacing: 2px;

    }

    .restore-benefits-main {

        padding-block: 3.75rem 4.5rem;

    }

    .restore-benefits-kicker {

        font-size: .65rem;

        letter-spacing: .18em;

    }

    .restore-benefits-header h1 {

        font-size: 2.8rem;

    }

    .restore-benefits-rule {

        width: 4.5rem;
        height: 3px;

        margin-block: 1.75rem 2.25rem;

    }

    .restore-product-panel {

        grid-template-columns: 1fr;

        gap: 1.25rem;

        padding: 1.5rem;

        text-align: center;

    }

    .restore-product-image {

        width: min(100%, 210px);

        margin-inline: auto;

    }

    .restore-product-details {

        margin-top: 0;

    }

    .restore-product-details h2 {

        font-size: 1.65rem;

    }

    .benefit-columns {

        grid-template-columns: 1fr;

        gap: .75rem;

    }

    .benefit-list {

        gap: .75rem;

    }

    .benefit-list li {

        font-size: .95rem;

    }

    .restore-promise {

        border-left-width: 4px;

        padding: 1.25rem;

    }

    .restore-promise-text {

        font-size: 1.3rem;

    }

    .restore-disclaimer {

        font-size: .72rem;

    }

}

/*==================================================
                  SMALL MOBILE
==================================================*/

@media (max-width: 380px) {

    .restore-benefits-header h1 {

        font-size: 2.45rem;

    }

    .restore-product-panel {

        padding: 1.25rem;

    }

    .restore-product-image {

        width: 180px;

    }

}

/*==================================================
          KINGS & QUEENS INGREDIENTS SECTION
==================================================*/

.kq-ingredients-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: #f5ede0;

    color: #1f1410;

}

/*==================================================
                  HEADER CHROME
==================================================*/

.kq-ingredients-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 90px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: linear-gradient(
        90deg,
        var(--espresso) 0%,
        var(--espresso-2) 100%
    );

    border-bottom: 3px solid var(--gold);

}

.kq-ingredients-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 3px;

    color: var(--gold);
    text-decoration: none;

}

.kq-ingredients-section .chrome-logo .reg {

    font-size: .45em;
    vertical-align: super;

    color: var(--gold-light);

}

.kq-ingredients-section .chrome-tagline {

    margin-left: 24px;
    padding-left: 24px;

    border-left: 1px solid var(--gold);

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: 2px;

    color: var(--cream-2);
    text-transform: uppercase;

}

.kq-ingredients-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 500;

    letter-spacing: 4px;

    color: var(--gold-light);

    white-space: nowrap;

}

/*==================================================
                    MAIN AREA
==================================================*/

.kq-ingredients-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(4rem, 7vw, 7rem) var(--page-gutter);

}

.kq-ingredients-main::before {

    content: "";

    position: absolute;
    inset: 0;

    background: url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    opacity: .055;

    pointer-events: none;

}

.kq-ingredients-container {

    position: relative;
    z-index: 1;

    width: min(100%, 1500px);

    margin-inline: auto;

}

/*==================================================
                    HEADING
==================================================*/

.kq-ingredients-heading {

    margin-bottom: clamp(2.5rem, 5vw, 4rem);

}

.kq-ingredients-kicker {

    margin: 0 0 1.25rem;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, 1rem);
    font-weight: 600;

    letter-spacing: clamp(.18em, .4vw, .5em);

    color: var(--red-brown);

    text-transform: uppercase;

}

.kq-ingredients-heading h1 {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 800;
    line-height: .98;

    color: #1f1410;

}

.kq-ingredients-rule {

    width: clamp(5rem, 8vw, 7.5rem);
    height: 4px;

    margin: 2rem 0 1.5rem;

    background: var(--gold);

}

.kq-ingredients-intro {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.35vw, 1.35rem);
    line-height: 1.55;

    color: #7a6960;

}

/*==================================================
                  INGREDIENT GRID
==================================================*/

.kq-ingredients-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: clamp(1rem, 1.6vw, 1.5rem);

    align-items: stretch;

}

/*==================================================
                INGREDIENT CARD
==================================================*/

.kq-ingredient-card {

    min-width: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border-top: 6px solid var(--gold);

    box-shadow: 0 14px 35px rgba(31, 20, 16, .14);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.kq-ingredient-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 24px 48px rgba(31, 20, 16, .24);

}

.kq-card-light {

    background: #fff;

    color: #1f1410;

}

.kq-card-dark {

    background: linear-gradient(
        160deg,
        var(--espresso) 0%,
        var(--near-black) 100%
    );

    color: var(--cream);

}

/*==================================================
                INGREDIENT VISUAL
==================================================*/

.kq-ingredient-image {

    width: 100%;

    aspect-ratio: 1.5 / 1;

    overflow: hidden;

    background: #342119;

}

.kq-ingredient-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .45s ease;

}

.kq-ingredient-card:hover .kq-ingredient-image img {

    transform: scale(1.06);

}

.kq-herbal-visual {

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        160deg,
        var(--espresso),
        var(--near-black)
    );

}

.kq-herbal-visual span {

    font-family: var(--font-serif);
    font-size: clamp(6rem, 9vw, 8rem);
    font-weight: 800;
    line-height: 1;

    color: var(--gold);

}

/*==================================================
                INGREDIENT CONTENT
==================================================*/

.kq-ingredient-content {

    flex: 1;

    display: flex;
    flex-direction: column;

    padding: clamp(1.25rem, 2vw, 1.75rem);

}

.kq-ingredient-number {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .8vw, .85rem);
    font-weight: 600;

    letter-spacing: .25em;

    text-transform: uppercase;

}

.kq-card-light .kq-ingredient-number {

    color: var(--red-brown);

}

.kq-card-dark .kq-ingredient-number {

    color: var(--gold);

}

.kq-ingredient-content h2 {

    margin: .8rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 1.9vw, 1.9rem);
    font-weight: 700;
    line-height: 1.12;

}

.kq-card-light .kq-ingredient-content h2 {

    color: var(--espresso);

}

.kq-card-dark .kq-ingredient-content h2 {

    color: var(--cream);

}

.kq-ingredient-common-name {

    margin: .5rem 0 0;

    font-family: var(--font-sans);
    font-size: clamp(.78rem, 1vw, 1rem);
    font-weight: 500;
    line-height: 1.35;

    letter-spacing: .06em;

}

.kq-card-light .kq-ingredient-common-name {

    color: var(--muted);

}

.kq-card-dark .kq-ingredient-common-name {

    color: var(--gold-light);

}

.kq-ingredient-description {

    margin: 1.1rem 0 0;

    font-family: var(--font-sans);
    font-size: clamp(.88rem, 1.05vw, 1.05rem);
    line-height: 1.55;

}

.kq-card-light .kq-ingredient-description {

    color: var(--ink);

}

.kq-card-dark .kq-ingredient-description {

    color: var(--cream-2);

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.kq-ingredients-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: var(--near-black);

}

.kq-ingredients-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.kq-ingredients-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.kq-ingredients-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1150px) {

    .kq-ingredients-main {

        padding-block: 5rem;

    }

    .kq-ingredients-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 1.25rem;

    }

    .kq-ingredient-content h2 {

        font-size: 1.65rem;

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 760px) {

    .kq-ingredients-section {

        min-height: auto;

    }

    .kq-ingredients-section .chrome-header {

        min-height: 70px;

        padding-block: .85rem;

    }

    .kq-ingredients-section .chrome-tagline {

        display: none;

    }

    .kq-ingredients-main {

        padding-block: 4.5rem 5.5rem;

    }

    .kq-ingredients-heading h1 {

        font-size: clamp(3rem, 13vw, 5rem);

    }

    .kq-ingredient-card {

        border-top-width: 4px;

    }

    .kq-ingredient-image {

        aspect-ratio: 1.6 / 1;

    }

    .kq-ingredient-content {

        padding: 1.25rem;

    }

    .kq-ingredient-content h2 {

        font-size: 1.45rem;

    }

    .kq-ingredient-description {

        font-size: .95rem;

    }

    .kq-ingredients-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .kq-ingredients-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    MOBILE
==================================================*/

@media (max-width: 520px) {

    .kq-ingredients-section .chrome-header {

        min-height: 64px;

        padding-inline: 1.1rem;

    }

    .kq-ingredients-section .chrome-logo {

        font-size: 1.3rem;

        letter-spacing: 2px;

    }

    .kq-ingredients-section .chrome-page-num {

        font-size: .55rem;

        letter-spacing: 2px;

    }

    .kq-ingredients-main {

        padding-block: 3.75rem 4.5rem;

    }

    .kq-ingredients-kicker {

        font-size: .65rem;

        letter-spacing: .18em;

    }

    .kq-ingredients-heading h1 {

        font-size: 2.8rem;

    }

    .kq-ingredients-rule {

        width: 4.5rem;
        height: 3px;

    }

    .kq-ingredients-intro {

        font-size: .95rem;

    }

    .kq-ingredients-grid {

        grid-template-columns: 1fr;

        gap: 1.25rem;

    }

    .kq-ingredient-image {

        aspect-ratio: 2 / 1;

    }

    .kq-ingredient-content {

        padding: 1.2rem 1.25rem 1.4rem;

    }

    .kq-ingredient-content h2 {

        font-size: 1.55rem;

    }

    .kq-ingredient-description {

        font-size: .9rem;

    }

    .kq-herbal-visual {

        min-height: 180px;

    }

}

/*==================================================
                  SMALL MOBILE
==================================================*/

@media (max-width: 380px) {

    .kq-ingredients-heading h1 {

        font-size: 2.45rem;

    }

    .kq-ingredient-content h2 {

        font-size: 1.35rem;

    }

}

/*==================================================
          KINGS & QUEENS BENEFITS SECTION
==================================================*/

.kq-benefits-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: linear-gradient(
        135deg,
        var(--near-black) 0%,
        var(--espresso-2) 100%
    );

    color: var(--cream);

}

.kq-benefits-section::before {

    content: "";

    position: absolute;
    inset: 0;

    background: url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    opacity: .07;

    pointer-events: none;

}

/*==================================================
                  HEADER CHROME
==================================================*/

.kq-benefits-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 90px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: linear-gradient(
        90deg,
        var(--espresso) 0%,
        var(--espresso-2) 100%
    );

    border-bottom: 3px solid var(--gold);

}

.kq-benefits-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 3px;

    color: var(--gold);
    text-decoration: none;

}

.kq-benefits-section .chrome-logo .reg {

    font-size: .45em;
    vertical-align: super;

    color: var(--gold-light);

}

.kq-benefits-section .chrome-tagline {

    margin-left: 24px;
    padding-left: 24px;

    border-left: 1px solid var(--gold);

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: 2px;

    color: var(--cream-2);
    text-transform: uppercase;

}

.kq-benefits-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 500;

    letter-spacing: 4px;

    color: var(--gold-light);

    white-space: nowrap;

}

/*==================================================
                    MAIN AREA
==================================================*/

.kq-benefits-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(4rem, 7vw, 7rem) var(--page-gutter);

}

.kq-benefits-container {

    width: min(100%, 1500px);

    margin-inline: auto;

}

.kq-benefits-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(220px, 320px);

    gap: clamp(3rem, 6vw, 7rem);

    align-items: center;

}

.kq-benefits-content {

    min-width: 0;

}

/*==================================================
                    HEADING
==================================================*/

.kq-benefits-header {

    max-width: 900px;

}

.kq-benefits-kicker {

    margin: 0 0 1.25rem;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, 1rem);
    font-weight: 600;

    letter-spacing: clamp(.18em, .4vw, .5em);

    color: var(--gold);

    text-transform: uppercase;

}

.kq-benefits-header h1 {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(3.5rem, 6.5vw, 6rem);
    font-weight: 800;
    line-height: .95;

    color: var(--cream);

}

.kq-benefits-rule {

    width: clamp(5rem, 8vw, 7.5rem);
    height: 4px;

    margin: 2rem 0 clamp(2.5rem, 5vw, 4rem);

    background: var(--gold);

}

/*==================================================
                  BENEFIT GROUPS
==================================================*/

.kq-benefit-groups {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: clamp(1.5rem, 4vw, 4rem);

}

.kq-benefit-group h2 {

    margin: 0 0 1.25rem;

    font-family: var(--font-sans);
    font-size: clamp(.75rem, 1vw, 1rem);
    font-weight: 600;

    letter-spacing: .25em;

    color: var(--gold);

    text-transform: uppercase;

}

.kq-benefit-group ul {

    display: flex;
    flex-direction: column;

    gap: .9rem;

    padding: 0;
    margin: 0;

    list-style: none;

}

.kq-benefit-group li {

    position: relative;

    padding-left: 1.4rem;

    font-family: var(--font-sans);
    font-size: clamp(.9rem, 1.25vw, 1.25rem);
    line-height: 1.45;

    color: var(--cream);

}

.kq-benefit-group li::before {

    content: "◆";

    position: absolute;
    left: 0;
    top: .1em;

    font-size: .65em;

    color: var(--gold);

}

/*==================================================
                    CALLOUT
==================================================*/

.kq-benefits-callout {

    max-width: 1000px;

    margin-top: clamp(3rem, 5vw, 5rem);

    padding: clamp(1.25rem, 2.5vw, 2rem);

    border: 2px solid var(--gold);

}

.kq-benefits-callout p {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 2.2vw, 1.9rem);
    font-style: italic;
    line-height: 1.35;

    color: var(--gold);

}

/*==================================================
                  DISCLAIMER
==================================================*/

.kq-benefits-disclaimer {

    max-width: 950px;

    margin: 1.25rem 0 0;

    font-family: var(--font-sans);
    font-size: .76rem;
    line-height: 1.5;

    color: #a99586;

}

/*==================================================
                  PRODUCT IMAGE
==================================================*/

.kq-benefits-product {

    position: relative;

    justify-self: center;

    width: min(100%, 300px);

    aspect-ratio: 400 / 820;

    margin: 0;

    overflow: hidden;

    box-shadow: 0 28px 70px rgba(0, 0, 0, .65);

}

.kq-benefits-product::before {

    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background: linear-gradient(
        180deg,
        transparent 60%,
        rgba(26, 15, 10, .3)
    );

    pointer-events: none;

}

.kq-benefits-product img {

    position: relative;
    z-index: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.kq-benefits-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: var(--near-black);

}

.kq-benefits-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.kq-benefits-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.kq-benefits-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1100px) {

    .kq-benefits-main {

        padding-block: 5rem;

    }

    .kq-benefits-layout {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(190px, 250px);

        gap: 3rem;

    }

    .kq-benefit-group li {

        font-size: 1rem;

    }

    .kq-benefits-product {

        width: min(100%, 250px);

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 800px) {

    .kq-benefits-section {

        min-height: auto;

    }

    .kq-benefits-section .chrome-header {

        min-height: 70px;

        padding-block: .85rem;

    }

    .kq-benefits-section .chrome-tagline {

        display: none;

    }

    .kq-benefits-main {

        padding-block: 4.5rem 5.5rem;

    }

    .kq-benefits-layout {

        grid-template-columns: 1fr;

        gap: 3.5rem;

    }

    .kq-benefits-product {

        order: -1;

        width: min(100%, 230px);

        margin-inline: auto;

    }

    .kq-benefits-header h1 {

        font-size: clamp(3.2rem, 13vw, 5rem);

    }

    .kq-benefit-groups {

        gap: 2rem;

    }

    .kq-benefits-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .kq-benefits-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    MOBILE
==================================================*/

@media (max-width: 560px) {

    .kq-benefits-section .chrome-header {

        min-height: 64px;

        padding-inline: 1.1rem;

    }

    .kq-benefits-section .chrome-logo {

        font-size: 1.3rem;

        letter-spacing: 2px;

    }

    .kq-benefits-section .chrome-page-num {

        font-size: .55rem;

        letter-spacing: 2px;

    }

    .kq-benefits-main {

        padding-block: 3.75rem 4.5rem;

    }

    .kq-benefits-kicker {

        font-size: .65rem;

        letter-spacing: .18em;

    }

    .kq-benefits-header h1 {

        font-size: 2.85rem;

    }

    .kq-benefits-rule {

        width: 4.5rem;
        height: 3px;

        margin-block: 1.75rem 2.5rem;

    }

    .kq-benefit-groups {

        grid-template-columns: 1fr;

        gap: 2.25rem;

    }

    .kq-benefit-group h2 {

        font-size: .7rem;

        letter-spacing: .18em;

    }

    .kq-benefit-group ul {

        gap: .75rem;

    }

    .kq-benefit-group li {

        font-size: .92rem;

    }

    .kq-benefits-callout {

        margin-top: 3rem;

        padding: 1.2rem;

    }

    .kq-benefits-callout p {

        font-size: 1.25rem;

    }

    .kq-benefits-disclaimer {

        font-size: .7rem;

    }

    .kq-benefits-product {

        width: min(100%, 200px);

    }

}

/*==================================================
                  SMALL MOBILE
==================================================*/

@media (max-width: 380px) {

    .kq-benefits-header h1 {

        font-size: 2.5rem;

    }

    .kq-benefits-product {

        width: 180px;

    }

}

/*==================================================
                  PRODUCT PRICES SECTION
==================================================*/

.product-prices-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: var(--near-black);

    color: var(--cream);

}

/* Background image and overlay */

.product-prices-section::before {

    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background:

        linear-gradient(
            135deg,
            rgba(26, 15, 10, .88) 0%,
            rgba(58, 37, 26, .72) 100%
        ),

        url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    pointer-events: none;

}

/*==================================================
                  HEADER CHROME
==================================================*/

.product-prices-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 90px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: linear-gradient(
        90deg,
        var(--espresso) 0%,
        var(--espresso-2) 100%
    );

    border-bottom: 3px solid var(--gold);

}

.product-prices-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 3px;

    color: var(--gold);
    text-decoration: none;

}

.product-prices-section .chrome-logo .reg {

    font-size: .45em;
    vertical-align: super;

    color: var(--gold-light);

}

.product-prices-section .chrome-tagline {

    margin-left: 24px;
    padding-left: 24px;

    border-left: 1px solid var(--gold);

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: 2px;

    color: var(--cream-2);
    text-transform: uppercase;

}

.product-prices-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 500;

    letter-spacing: 4px;

    color: var(--gold-light);

    white-space: nowrap;

}

/*==================================================
                    MAIN AREA
==================================================*/

.product-prices-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(4rem, 7vw, 7rem) var(--page-gutter);

}

.product-prices-container {

    width: min(100%, 1280px);

    margin-inline: auto;

}

/*==================================================
                    HEADING
==================================================*/

.product-prices-heading {

    text-align: center;

}

.product-prices-kicker {

    margin: 0 0 1.25rem;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, 1rem);
    font-weight: 600;

    letter-spacing: clamp(.2em, .4vw, .55em);

    color: var(--gold);

    text-transform: uppercase;

}

.product-prices-heading h1 {

    max-width: 1000px;

    margin: 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(3rem, 6vw, 5.8rem);
    font-weight: 800;
    line-height: .98;

    color: var(--cream);

}

.product-prices-rule {

    width: clamp(4.5rem, 7vw, 6.25rem);
    height: 3px;

    margin: 2.25rem auto 4rem;

    background: var(--gold);

}

/*==================================================
                  PRODUCT PRICE GRID
==================================================*/

.product-prices-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: clamp(1.25rem, 3vw, 2.5rem);

}

/*==================================================
                  PRICE PRODUCT CARD
==================================================*/

.price-product-card {

    min-width: 0;

    display: grid;

    grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);

    grid-template-rows: 1fr auto;

    gap: 1.5rem 2rem;

    padding: clamp(1.25rem, 2.5vw, 2rem);

    background: linear-gradient(
        180deg,
        rgba(58, 37, 26, .72) 0%,
        rgba(26, 15, 10, .86) 100%
    );

    border: 2px solid var(--gold);

    box-shadow: 0 20px 55px rgba(0, 0, 0, .4);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}

.price-product-card:hover {

    transform: translateY(-8px);

    background: linear-gradient(
        180deg,
        rgba(70, 45, 31, .82) 0%,
        rgba(26, 15, 10, .92) 100%
    );

    box-shadow: 0 28px 65px rgba(0, 0, 0, .55);

}

/*==================================================
                    PRODUCT IMAGE
==================================================*/

.price-product-image {

    grid-row: 1 / 3;

    width: 100%;

    aspect-ratio: 5 / 7;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: rgba(0, 0, 0, .18);

    box-shadow: 0 20px 55px rgba(0, 0, 0, .55);

}

.price-product-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

}

/*==================================================
                  PRODUCT CONTENT
==================================================*/

.price-product-content {

    min-width: 0;

    align-self: start;

    padding-top: .25rem;

}

.price-product-label {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .8vw, .85rem);
    font-weight: 600;

    letter-spacing: .25em;

    color: var(--gold);

    text-transform: uppercase;

}

.price-product-content h2 {

    margin: .9rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(1.7rem, 2.8vw, 2.7rem);
    font-weight: 800;
    line-height: 1.05;

    color: var(--cream);

}

.price-product-divider {

    width: 50px;
    height: 2px;

    margin: 1.35rem 0 1rem;

    background: var(--gold);

}

.price-product-description {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.9rem, 1.2vw, 1.15rem);
    line-height: 1.45;

    color: var(--cream-2);

}

/*==================================================
                    PRICE VALUE
==================================================*/

.price-product-value {

    grid-column: 2;

    align-self: end;

    padding-top: 1rem;

}

.price-product-value strong {

    display: block;

    font-family: var(--font-serif);
    font-size: clamp(2.6rem, 4.2vw, 4rem);
    font-weight: 800;
    line-height: .95;

    letter-spacing: -.03em;

    color: var(--gold);

}

.price-product-value span {

    display: block;

    margin-top: .5rem;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .85vw, .85rem);
    font-weight: 500;

    letter-spacing: .25em;

    color: var(--cream-2);

    text-transform: uppercase;

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.product-prices-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: var(--near-black);

}

.product-prices-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.product-prices-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.product-prices-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1050px) {

    .product-prices-main {

        padding-block: 5rem;

    }

    .product-prices-grid {

        grid-template-columns: 1fr;

        max-width: 760px;

        margin-inline: auto;

    }

    .price-product-card {

        grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 760px) {

    .product-prices-section {

        min-height: auto;

    }

    .product-prices-section .chrome-header {

        min-height: 70px;

        padding-block: .85rem;

    }

    .product-prices-section .chrome-tagline {

        display: none;

    }

    .product-prices-main {

        padding-block: 4.5rem 5.5rem;

    }

    .product-prices-heading h1 {

        font-size: clamp(2.9rem, 12vw, 5rem);

    }

    .product-prices-rule {

        margin-bottom: 3rem;

    }

    .price-product-card {

        grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);

        gap: 1.25rem 1.5rem;

        padding: 1.25rem;

    }

    .price-product-content h2 {

        font-size: clamp(1.55rem, 5vw, 2.25rem);

    }

    .price-product-value strong {

        font-size: clamp(2.35rem, 8vw, 3.5rem);

    }

    .product-prices-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .product-prices-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    MOBILE
==================================================*/

@media (max-width: 540px) {

    .product-prices-section .chrome-header {

        min-height: 64px;

        padding-inline: 1.1rem;

    }

    .product-prices-section .chrome-logo {

        font-size: 1.3rem;

        letter-spacing: 2px;

    }

    .product-prices-section .chrome-page-num {

        font-size: .55rem;

        letter-spacing: 2px;

    }

    .product-prices-main {

        padding-block: 3.75rem 4.5rem;

    }

    .product-prices-kicker {

        font-size: .65rem;

        letter-spacing: .18em;

    }

    .product-prices-heading h1 {

        font-size: 2.7rem;

    }

    .product-prices-rule {

        width: 4.5rem;
        height: 3px;

        margin-block: 1.75rem 2.5rem;

    }

    .product-prices-grid {

        gap: 1.25rem;

    }

    .price-product-card {

        grid-template-columns: 1fr;

        gap: 1.5rem;

        padding: 1.25rem;

    }

    .price-product-image {

        grid-row: auto;

        width: min(100%, 210px);

        margin-inline: auto;

    }

    .price-product-content {

        padding-top: 0;

        text-align: center;

    }

    .price-product-divider {

        margin-inline: auto;

    }

    .price-product-value {

        grid-column: auto;

        padding-top: .25rem;

        text-align: center;

    }

    .price-product-value strong {

        font-size: 3rem;

    }

}

/*==================================================
                  SMALL MOBILE
==================================================*/

@media (max-width: 380px) {

    .product-prices-heading h1 {

        font-size: 2.4rem;

    }

    .price-product-image {

        width: 185px;

    }

    .price-product-value strong {

        font-size: 2.7rem;

    }

}

/*==================================================
              REGISTRATION PACKAGES SECTION
==================================================*/

.packages-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: var(--cream);

    color: var(--ink);

}

.packages-section::before {

    content: "";

    position: absolute;
    inset: 0;

    background: url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    opacity: .07;

    pointer-events: none;

}

/*==================================================
                  HEADER CHROME
==================================================*/

.packages-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 90px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: linear-gradient(
        90deg,
        var(--espresso) 0%,
        var(--espresso-2) 100%
    );

    border-bottom: 3px solid var(--gold);

}

.packages-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 3px;

    color: var(--gold);
    text-decoration: none;

}

.packages-section .chrome-logo .reg {

    font-size: .45em;
    vertical-align: super;

    color: var(--gold-light);

}

.packages-section .chrome-tagline {

    margin-left: 24px;
    padding-left: 24px;

    border-left: 1px solid var(--gold);

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: 2px;

    color: var(--cream-2);
    text-transform: uppercase;

}

.packages-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 500;

    letter-spacing: 4px;

    color: var(--gold-light);

    white-space: nowrap;

}

/*==================================================
                    MAIN AREA
==================================================*/

.packages-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(4rem, 7vw, 7rem) var(--page-gutter);

}

.packages-container {

    width: min(100%, 1500px);

    margin-inline: auto;

}

/*==================================================
                    HEADING
==================================================*/

.packages-heading {

    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);

}

.packages-kicker {

    margin: 0 0 1.25rem;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, 1rem);
    font-weight: 600;

    letter-spacing: clamp(.18em, .4vw, .5em);

    color: var(--red-brown);

    text-transform: uppercase;

}

.packages-heading h1 {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(3.2rem, 7vw, 6.5rem);
    font-weight: 800;
    line-height: .95;

    color: var(--espresso);

}

.packages-heading h1 em {

    color: var(--gold-2);
    font-style: italic;
    font-weight: 600;

}

.packages-rule {

    width: clamp(5rem, 8vw, 7.5rem);
    height: 4px;

    margin: 2rem 0 1.5rem;

    background: var(--gold);

}

.packages-intro {

    max-width: 850px;

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.35vw, 1.35rem);
    line-height: 1.55;

    color: var(--muted);

}

/*==================================================
                  PACKAGE CARD GRID
==================================================*/

.packages-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: clamp(1rem, 1.5vw, 1.5rem);

    align-items: stretch;

}

/*==================================================
                    PACKAGE CARDS
==================================================*/

.package-card {

    --package-bg: var(--cream-2);
    --package-text: var(--espresso);
    --package-muted: var(--muted);
    --package-accent: var(--gold);
    --package-footer-bg: var(--gold);
    --package-footer-text: var(--near-black);

    position: relative;

    min-width: 0;
    min-height: 450px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: var(--package-bg);

    border-top: 6px solid var(--package-accent);

    box-shadow: 0 14px 35px rgba(58, 37, 26, .16);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.package-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 24px 50px rgba(58, 37, 26, .28);

}

/* Light package colors */

.package-ante {

    --package-accent: #a08767;
    --package-title: #5a4635;

}

.package-entry {

    --package-accent: #b8935a;
    --package-title: #8b6a3f;

}

.package-basic {

    --package-accent: #c9a66b;
    --package-title: #a07e3c;

}

/* Dark package colors */

.package-dark {

    --package-bg: var(--espresso);
    --package-text: var(--cream);
    --package-muted: var(--cream-2);
    --package-footer-bg: var(--gold);
    --package-footer-text: var(--near-black);

}

.package-manager {

    --package-accent: var(--gold);

}

.package-prestige {

    --package-accent: var(--gold);

}

.package-boss {

    --package-bg: var(--near-black);
    --package-accent: var(--gold);

}

/* Supreme card */

.package-supreme {

    --package-bg: linear-gradient(
        180deg,
        var(--red-brown) 0%,
        var(--near-black) 100%
    );

    --package-text: var(--cream);
    --package-muted: var(--cream-2);
    --package-accent: var(--gold);
    --package-footer-bg: var(--gold);
    --package-footer-text: var(--near-black);

    border-top-width: 6px;

    box-shadow: 0 18px 45px rgba(139, 58, 30, .28);

}

.package-supreme:hover {

    box-shadow: 0 28px 60px rgba(139, 58, 30, .42);

}

.top-tier-badge {

    min-height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--gold);

    font-family: var(--font-sans);
    font-size: .65rem;
    font-weight: 700;

    letter-spacing: .2em;

    color: var(--near-black);

    text-transform: uppercase;

}

/*==================================================
                  CARD HEADER
==================================================*/

.package-card-header {

    padding: 1.5rem 1rem .75rem;

    text-align: center;

}

.package-tier {

    display: block;

    font-family: var(--font-sans);
    font-size: .68rem;
    font-weight: 600;

    letter-spacing: .25em;

    color: var(--package-muted);

    text-transform: uppercase;

}

.package-card:not(.package-dark):not(.package-supreme) .package-tier {

    color: var(--muted);

}

.package-card-header h2 {

    margin: 1rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(1.55rem, 2.2vw, 2.25rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: .06em;

    color: var(--package-text);

    text-transform: uppercase;

}

.package-card:not(.package-dark):not(.package-supreme) .package-card-header h2 {

    color: var(--package-title, var(--package-text));

}

/*==================================================
                    CARD BODY
==================================================*/

.package-card-body {

    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 1rem 1.25rem 1.5rem;

    text-align: center;

}

.package-price {

    margin-top: 1.25rem;

    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 2.45vw, 2.6rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: -.04em;

    color: var(--package-text);

    white-space: nowrap;

}

.package-card:not(.package-dark):not(.package-supreme) .package-price {

    color: var(--espresso);

}

.package-pv {

    margin-top: .9rem;

    font-family: var(--font-sans);
    font-size: clamp(.8rem, 1vw, 1rem);
    font-weight: 600;

    letter-spacing: .14em;

    color: var(--package-accent);

}

.package-details {

    width: 100%;

    margin-top: 2rem;

    padding-top: 1.25rem;

    border-top: 1px solid currentColor;

    opacity: .75;

}

.package-details p {

    display: flex;
    flex-direction: column;
    gap: .25rem;

    margin: 0;

    font-family: var(--font-sans);
    font-size: .8rem;
    line-height: 1.35;

    color: var(--package-muted);

}

.package-details p + p {

    margin-top: 1.2rem;

}

.package-card:not(.package-dark):not(.package-supreme) .package-details p {

    color: var(--muted);

}

.package-details strong {

    font-size: clamp(1rem, 1.35vw, 1.3rem);
    font-weight: 600;

    color: var(--package-text);

}

.package-card:not(.package-dark):not(.package-supreme) .package-details strong {

    color: var(--espresso);

}

/*==================================================
                  CARD FOOTER
==================================================*/

.package-card-footer {

    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: .75rem .5rem;

    background: var(--package-footer-bg);

    font-family: var(--font-sans);
    font-size: clamp(.62rem, .85vw, .85rem);
    font-weight: 700;

    letter-spacing: .12em;

    color: var(--package-footer-text);

    text-align: center;
    text-transform: uppercase;

}

/*==================================================
                    BOTTOM NOTE
==================================================*/

.packages-note {

    margin: 2rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.35vw, 1.3rem);
    font-style: italic;
    line-height: 1.4;
    text-align: center;

    color: var(--muted);

}

.packages-note strong {

    color: var(--red-brown);
    font-style: normal;

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.packages-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: var(--near-black);

}

.packages-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.packages-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.packages-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1250px) {

    .packages-main {

        padding-block: 5rem;

    }

    .packages-grid {

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

    .package-card {

        min-height: 430px;

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 850px) {

    .packages-section {

        min-height: auto;

    }

    .packages-section .chrome-header {

        min-height: 70px;

        padding-block: .85rem;

    }

    .packages-section .chrome-tagline {

        display: none;

    }

    .packages-main {

        padding-block: 4.5rem 5.5rem;

    }

    .packages-heading h1 {

        font-size: clamp(3rem, 13vw, 5.5rem);

    }

    .packages-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 1rem;

    }

    .package-card {

        min-height: 420px;

    }

    .package-card-header {

        padding-top: 1.35rem;

    }

    .package-price {

        font-size: clamp(1.55rem, 5vw, 2.35rem);

    }

    .package-details p {

        font-size: .75rem;

    }

    .package-details strong {

        font-size: 1.05rem;

    }

    .packages-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .packages-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    MOBILE
==================================================*/

@media (max-width: 540px) {

    .packages-section .chrome-header {

        min-height: 64px;

        padding-inline: 1.1rem;

    }

    .packages-section .chrome-logo {

        font-size: 1.3rem;

        letter-spacing: 2px;

    }

    .packages-section .chrome-page-num {

        font-size: .55rem;

        letter-spacing: 2px;

    }

    .packages-main {

        padding-block: 3.75rem 4.5rem;

    }

    .packages-kicker {

        font-size: .65rem;

        letter-spacing: .18em;

    }

    .packages-heading h1 {

        font-size: 2.8rem;

    }

    .packages-rule {

        width: 4.5rem;
        height: 3px;

    }

    .packages-intro {

        font-size: .95rem;

    }

    .packages-grid {

        grid-template-columns: 1fr;

        max-width: 380px;

        margin-inline: auto;

        gap: 1.25rem;

    }

    .package-card {

        min-height: 390px;

    }

    .package-card-header {

        padding-top: 1.5rem;

    }

    .package-card-header h2 {

        font-size: 2rem;

    }

    .package-price {

        font-size: 2.35rem;

    }

    .package-details {

        max-width: 250px;

    }

    .package-card-footer {

        min-height: 58px;

    }

}

/*==================================================
                  SMALL MOBILE
==================================================*/

@media (max-width: 380px) {

    .packages-heading h1 {

        font-size: 2.45rem;

    }

    .package-card-header h2 {

        font-size: 1.8rem;

    }

    .package-price {

        font-size: 2.1rem;

    }

    .packages-note {

        font-size: .95rem;

    }

}

/*==================================================
                  WAYS OF EARNING
==================================================*/

.ways-earning-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: var(--near-black);

    color: var(--cream);

}

.ways-earning-section::before {

    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background:

        linear-gradient(
            180deg,
            rgba(26, 15, 10, .78) 0%,
            rgba(58, 37, 26, .88) 100%
        ),

        url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    pointer-events: none;

}

/*==================================================
                  HEADER CHROME
==================================================*/

.ways-earning-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 90px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: linear-gradient(
        90deg,
        var(--espresso) 0%,
        var(--espresso-2) 100%
    );

    border-bottom: 3px solid var(--gold);

}

.ways-earning-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 3px;

    color: var(--gold);
    text-decoration: none;

}

.ways-earning-section .chrome-logo .reg {

    font-size: .45em;
    vertical-align: super;

    color: var(--gold-light);

}

.ways-earning-section .chrome-tagline {

    margin-left: 24px;
    padding-left: 24px;

    border-left: 1px solid var(--gold);

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: 2px;

    color: var(--cream-2);
    text-transform: uppercase;

}

.ways-earning-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 500;

    letter-spacing: 4px;

    color: var(--gold-light);

    white-space: nowrap;

}

/*==================================================
                    MAIN AREA
==================================================*/

.ways-earning-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(4rem, 7vw, 7rem) var(--page-gutter);

}

.ways-earning-container {

    width: min(100%, 1500px);

    margin-inline: auto;

}

/*==================================================
                    HEADING
==================================================*/

.ways-earning-heading {

    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);

}

.ways-earning-kicker {

    margin: 0 0 1.25rem;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, 1rem);
    font-weight: 600;

    letter-spacing: clamp(.2em, .4vw, .55em);

    color: var(--gold);

    text-transform: uppercase;

}

.ways-earning-heading h1 {

    max-width: 1200px;

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(3.2rem, 7vw, 6.5rem);
    font-weight: 800;
    line-height: .95;

    color: var(--cream);

}

.ways-earning-heading h1 em {

    color: var(--gold);
    font-style: italic;
    font-weight: 600;

}

.ways-earning-rule {

    width: clamp(5rem, 8vw, 7.5rem);
    height: 4px;

    margin: 2rem 0 1.5rem;

    background: var(--gold);

}

.ways-earning-intro {

    max-width: 1050px;

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.35vw, 1.35rem);
    line-height: 1.6;

    color: var(--cream-2);

}

/*==================================================
                  EARNING CARD GRID
==================================================*/

.ways-earning-grid {

    display: grid;

    grid-template-columns: repeat(5, minmax(0, 1fr));

    gap: clamp(.85rem, 1.35vw, 1.35rem);

}

/*==================================================
                    EARNING CARDS
==================================================*/

.earning-card {

    min-width: 0;
    min-height: 235px;

    display: flex;
    flex-direction: column;

    padding: clamp(1.15rem, 1.8vw, 1.65rem);

    background: rgba(245, 239, 228, .08);

    border: 1px solid rgba(201, 166, 107, .38);

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}

.earning-card:hover {

    transform: translateY(-8px);

    background: rgba(245, 239, 228, .14);

    border-color: var(--gold);

    box-shadow: 0 20px 45px rgba(0, 0, 0, .3);

}

.earning-number {

    display: block;

    font-family: var(--font-serif);
    font-size: clamp(2.8rem, 4vw, 4rem);
    font-weight: 800;
    line-height: .9;

    color: var(--gold);

}

.earning-divider {

    width: 40px;
    height: 2px;

    margin: 1.35rem 0 1rem;

    background: var(--gold);

}

.earning-card h2 {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 1.65vw, 1.6rem);
    font-weight: 700;
    line-height: 1.15;

    color: var(--cream);

}

.earning-card p {

    margin: auto 0 0;
    padding-top: 1rem;

    font-family: var(--font-sans);
    font-size: clamp(.78rem, 1vw, 1rem);
    line-height: 1.45;

    color: var(--cream-2);

}

/* Featured tenth card */

.earning-card-featured {

    background: linear-gradient(
        180deg,
        var(--red-brown) 0%,
        var(--near-black) 100%
    );

    border-color: var(--gold);

}

.earning-card-featured:hover {

    background: linear-gradient(
        180deg,
        #9b4328 0%,
        var(--near-black) 100%
    );

}

.earning-card-featured h2 {

    color: var(--cream);

}

.earning-card-featured p {

    color: var(--cream-2);

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.ways-earning-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: var(--near-black);

}

.ways-earning-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.ways-earning-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.ways-earning-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1250px) {

    .ways-earning-main {

        padding-block: 5rem;

    }

    .ways-earning-grid {

        grid-template-columns: repeat(4, minmax(0, 1fr));

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 900px) {

    .ways-earning-section {

        min-height: auto;

    }

    .ways-earning-section .chrome-header {

        min-height: 70px;

        padding-block: .85rem;

    }

    .ways-earning-section .chrome-tagline {

        display: none;

    }

    .ways-earning-main {

        padding-block: 4.5rem 5.5rem;

    }

    .ways-earning-heading h1 {

        font-size: clamp(3rem, 12vw, 5.5rem);

    }

    .ways-earning-grid {

        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 1rem;

    }

    .earning-card {

        min-height: 220px;

    }

    .earning-card h2 {

        font-size: 1.3rem;

    }

    .earning-card p {

        font-size: .85rem;

    }

    .ways-earning-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .ways-earning-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    MOBILE
==================================================*/

@media (max-width: 620px) {

    .ways-earning-section .chrome-header {

        min-height: 64px;

        padding-inline: 1.1rem;

    }

    .ways-earning-section .chrome-logo {

        font-size: 1.3rem;

        letter-spacing: 2px;

    }

    .ways-earning-section .chrome-page-num {

        font-size: .55rem;

        letter-spacing: 2px;

    }

    .ways-earning-main {

        padding-block: 3.75rem 4.5rem;

    }

    .ways-earning-kicker {

        font-size: .65rem;

        letter-spacing: .18em;

    }

    .ways-earning-heading h1 {

        font-size: 2.8rem;

    }

    .ways-earning-rule {

        width: 4.5rem;
        height: 3px;

    }

    .ways-earning-intro {

        font-size: .95rem;

    }

    .ways-earning-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: .85rem;

    }

    .earning-card {

        min-height: 205px;

        padding: 1rem;

    }

    .earning-number {

        font-size: 2.8rem;

    }

    .earning-divider {

        margin-block: 1rem .8rem;

    }

    .earning-card h2 {

        font-size: 1.15rem;

    }

    .earning-card p {

        font-size: .78rem;

    }

}

/*==================================================
                  SMALL MOBILE
==================================================*/

@media (max-width: 390px) {

    .ways-earning-grid {

        grid-template-columns: 1fr;

    }

    .earning-card {

        min-height: 180px;

    }

    .earning-card h2 {

        font-size: 1.35rem;

    }

    .earning-card p {

        font-size: .85rem;

    }

}

/*==================================================
                  RETAIL PROFIT SECTION
==================================================*/

.retail-profit-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: var(--cream);

    color: var(--ink);

}

/*==================================================
                  HEADER CHROME
==================================================*/

.retail-profit-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 90px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: linear-gradient(
        90deg,
        var(--espresso) 0%,
        var(--espresso-2) 100%
    );

    border-bottom: 3px solid var(--gold);

}

.retail-profit-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 3px;

    color: var(--gold);
    text-decoration: none;

}

.retail-profit-section .chrome-logo .reg {

    font-size: .45em;
    vertical-align: super;

    color: var(--gold-light);

}

.retail-profit-section .chrome-tagline {

    margin-left: 24px;
    padding-left: 24px;

    border-left: 1px solid var(--gold);

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: 2px;

    color: var(--cream-2);
    text-transform: uppercase;

}

.retail-profit-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 500;

    letter-spacing: 4px;

    color: var(--gold-light);

    white-space: nowrap;

}

/*==================================================
                    MAIN AREA
==================================================*/

.retail-profit-main {

    position: relative;
    z-index: 1;

    flex: 1;

    display: flex;
    align-items: center;

    width: 100%;

    padding: clamp(4rem, 7vw, 7rem) var(--page-gutter);

}

.retail-profit-container {

    width: min(100%, 1400px);

    margin-inline: auto;

}

.retail-profit-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 560px);

    gap: clamp(3rem, 7vw, 7rem);

    align-items: center;

}

.retail-profit-content {

    min-width: 0;

}

/*==================================================
                    LEFT CONTENT
==================================================*/

.retail-profit-header {

    max-width: 900px;

}

.retail-profit-kicker {

    margin: 0 0 1.25rem;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, 1rem);
    font-weight: 600;

    letter-spacing: clamp(.2em, .4vw, .5em);

    color: var(--red-brown);

    text-transform: uppercase;

}

.retail-profit-header h1 {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 800;
    line-height: .9;

    color: var(--espresso);

}

.retail-profit-header h1 em {

    display: block;

    color: var(--espresso);
    font-style: normal;

}

.retail-profit-rule {

    width: clamp(5rem, 8vw, 7.5rem);
    height: 4px;

    margin: clamp(2.25rem, 5vw, 4rem) 0 2rem;

    background: var(--gold);

}

.retail-profit-description {

    max-width: 760px;

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(1.1rem, 1.7vw, 1.7rem);
    line-height: 1.55;

    color: var(--ink);

}

/*==================================================
                  PERCENTAGE CALLOUT
==================================================*/

.retail-profit-callout {

    max-width: 760px;

    margin-top: clamp(3rem, 5vw, 5rem);

    padding: clamp(1.5rem, 3vw, 2.25rem);

    background: var(--espresso);

    border-left: 6px solid var(--gold);

    box-shadow: 0 18px 45px rgba(58, 37, 26, .2);

}

.retail-profit-callout-label {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 600;

    letter-spacing: .3em;

    color: var(--gold);

    text-transform: uppercase;

}

.retail-profit-rate {

    margin-top: .7rem;

    font-family: var(--font-serif);
    font-size: clamp(4rem, 7vw, 6rem);
    font-weight: 800;
    line-height: .95;

    letter-spacing: -.04em;

    color: var(--cream);

}

.retail-profit-rate span {

    color: var(--gold);

}

.retail-profit-callout-text {

    margin: .75rem 0 0;

    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    line-height: 1.4;

    color: var(--gold-light);

}

/*==================================================
                    RIGHT VISUAL
==================================================*/

.retail-profit-visual {

    position: relative;

    width: min(100%, 560px);

    min-height: 650px;

    justify-self: end;

    overflow: hidden;

    background: linear-gradient(
        160deg,
        var(--espresso) 0%,
        var(--near-black) 100%
    );

    box-shadow: 0 25px 70px rgba(0, 0, 0, .38);

}

.retail-profit-visual > img {

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    opacity: .35;

}

.retail-profit-visual-overlay {

    position: absolute;
    inset: 0;

    background: linear-gradient(
        180deg,
        rgba(26, 15, 10, .35) 0%,
        rgba(26, 15, 10, .9) 100%
    );

}

.retail-profit-visual-content {

    position: relative;
    z-index: 2;

    min-height: 650px;

    display: flex;
    flex-direction: column;

    padding: clamp(2rem, 4vw, 3.5rem);

}

.retail-profit-visual-label {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, .9vw, .9rem);
    font-weight: 600;

    letter-spacing: .3em;

    color: var(--gold);

    text-align: center;
    text-transform: uppercase;

}

.retail-profit-visual blockquote {

    margin: 3rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 4vw, 3.75rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.15;

    color: var(--cream);

    text-align: center;

}

/*==================================================
                  EXAMPLE CARD
==================================================*/

.retail-profit-example {

    width: 100%;
    max-width: 500px;

    margin: auto auto 0;
    padding: clamp(1.25rem, 2.5vw, 2rem);

    background: rgba(245, 239, 228, .07);

    border: 1px solid rgba(201, 166, 107, .45);

}

.retail-profit-example-label {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .8vw, .8rem);
    font-weight: 600;

    letter-spacing: .25em;

    color: var(--gold);

    text-transform: uppercase;

}

.retail-profit-example-text {

    margin: 1.25rem 0 0;

    font-family: var(--font-sans);
    font-size: clamp(.9rem, 1.15vw, 1.15rem);
    line-height: 1.7;

    color: var(--cream-2);

}

.retail-profit-example-text strong {

    color: var(--gold);
    font-weight: 700;

}

.retail-profit-example-rule {

    width: 100%;
    height: 1px;

    margin: 1.5rem 0;

    background: var(--gold);

}

.retail-profit-take-home-label {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .8vw, .8rem);
    font-weight: 500;

    letter-spacing: .2em;

    color: var(--gold-light);

    text-transform: uppercase;

}

.retail-profit-take-home {

    display: block;

    margin-top: .5rem;

    font-family: var(--font-serif);
    font-size: clamp(2.8rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1;

    color: var(--gold);

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.retail-profit-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: var(--near-black);

}

.retail-profit-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.retail-profit-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.retail-profit-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1050px) {

    .retail-profit-main {

        padding-block: 5rem;

    }

    .retail-profit-layout {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 440px);

        gap: 3rem;

    }

    .retail-profit-visual {

        min-height: 570px;

    }

    .retail-profit-visual-content {

        min-height: 570px;

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 800px) {

    .retail-profit-section {

        min-height: auto;

    }

    .retail-profit-section .chrome-header {

        min-height: 70px;

        padding-block: .85rem;

    }

    .retail-profit-section .chrome-tagline {

        display: none;

    }

    .retail-profit-main {

        padding-block: 4.5rem 5.5rem;

    }

    .retail-profit-layout {

        grid-template-columns: 1fr;

        gap: 3.5rem;

    }

    .retail-profit-header h1 {

        font-size: clamp(3.8rem, 15vw, 6rem);

    }

    .retail-profit-description {

        font-size: 1.1rem;

    }

    .retail-profit-visual {

        width: min(100%, 560px);

        min-height: 560px;

        justify-self: center;

    }

    .retail-profit-visual-content {

        min-height: 560px;

    }

    .retail-profit-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .retail-profit-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    MOBILE
==================================================*/

@media (max-width: 520px) {

    .retail-profit-section .chrome-header {

        min-height: 64px;

        padding-inline: 1.1rem;

    }

    .retail-profit-section .chrome-logo {

        font-size: 1.3rem;

        letter-spacing: 2px;

    }

    .retail-profit-section .chrome-page-num {

        font-size: .55rem;

        letter-spacing: 2px;

    }

    .retail-profit-main {

        padding-block: 3.75rem 4.5rem;

    }

    .retail-profit-kicker {

        font-size: .65rem;

        letter-spacing: .18em;

    }

    .retail-profit-header h1 {

        font-size: 3.25rem;

    }

    .retail-profit-rule {

        width: 4.5rem;
        height: 3px;

    }

    .retail-profit-description {

        font-size: .98rem;

    }

    .retail-profit-callout {

        border-left-width: 4px;

        padding: 1.25rem;

    }

    .retail-profit-rate {

        font-size: 4.2rem;

    }

    .retail-profit-callout-text {

        font-size: .95rem;

    }

    .retail-profit-visual {

        min-height: 500px;

    }

    .retail-profit-visual-content {

        min-height: 500px;

        padding: 1.25rem;

    }

    .retail-profit-visual blockquote {

        margin-top: 2rem;

        font-size: 2.3rem;

    }

    .retail-profit-example {

        padding: 1.1rem;

    }

    .retail-profit-example-text {

        font-size: .85rem;

    }

    .retail-profit-take-home {

        font-size: 2.8rem;

    }

}

/*==================================================
                  SMALL MOBILE
==================================================*/

@media (max-width: 380px) {

    .retail-profit-header h1 {

        font-size: 2.8rem;

    }

    .retail-profit-rate {

        font-size: 3.7rem;

    }

    .retail-profit-visual {

        min-height: 460px;

    }

    .retail-profit-visual-content {

        min-height: 460px;

    }

}

/*==================================================
              DIRECT REFERRAL BONUS SECTION
==================================================*/

.direct-referral-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: var(--cream);

    color: var(--ink);

}

.direct-referral-section::before {

    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background: url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    opacity: .07;

    pointer-events: none;

}

/*==================================================
                  HEADER CHROME
==================================================*/

.direct-referral-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 90px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: linear-gradient(
        90deg,
        var(--espresso) 0%,
        var(--espresso-2) 100%
    );

    border-bottom: 3px solid var(--gold);

}

.direct-referral-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 3px;

    color: var(--gold);
    text-decoration: none;

}

.direct-referral-section .chrome-logo .reg {

    font-size: .45em;
    vertical-align: super;

    color: var(--gold-light);

}

.direct-referral-section .chrome-tagline {

    margin-left: 24px;
    padding-left: 24px;

    border-left: 1px solid var(--gold);

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: 2px;

    color: var(--cream-2);
    text-transform: uppercase;

}

.direct-referral-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 500;

    letter-spacing: 4px;

    color: var(--gold-light);

    white-space: nowrap;

}

/*==================================================
                    MAIN AREA
==================================================*/

.direct-referral-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(4rem, 7vw, 7rem) var(--page-gutter);

}

.direct-referral-container {

    width: min(100%, 1500px);

    margin-inline: auto;

}

/*==================================================
                    HEADING
==================================================*/

.direct-referral-heading {

    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);

}

.direct-referral-kicker {

    margin: 0 0 1.25rem;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, 1rem);
    font-weight: 600;

    letter-spacing: clamp(.2em, .4vw, .55em);

    color: var(--red-brown);

    text-transform: uppercase;

}

.direct-referral-heading h1 {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(3.2rem, 7vw, 6rem);
    font-weight: 800;
    line-height: .98;

    color: var(--espresso);

}

.direct-referral-rule {

    width: clamp(5rem, 8vw, 7.5rem);
    height: 4px;

    margin: 2rem 0 1.5rem;

    background: var(--gold);

}

.direct-referral-intro {

    max-width: 950px;

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.35vw, 1.35rem);
    line-height: 1.55;

    color: var(--muted);

}

.direct-referral-intro strong {

    color: var(--red-brown);
    font-weight: 700;

}

/*==================================================
                  REFERRAL CARD GRID
==================================================*/

.direct-referral-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: clamp(1rem, 1.5vw, 1.5rem);

    align-items: stretch;

}

/*==================================================
                  REFERRAL CARDS
==================================================*/

.direct-referral-card {

    --card-background: var(--cream-2);
    --card-text: var(--espresso);
    --card-muted: var(--muted);
    --card-accent: var(--gold);
    --card-title: var(--espresso);

    position: relative;

    min-width: 0;
    min-height: 390px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: var(--card-background);

    border-top: 6px solid var(--card-accent);

    box-shadow: 0 14px 35px rgba(58, 37, 26, .15);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.direct-referral-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 24px 52px rgba(58, 37, 26, .27);

}

/* Light card variations */

.referral-card-ante {

    --card-accent: #a08767;
    --card-title: #5a4635;

}

.referral-card-entry {

    --card-accent: #b8935a;
    --card-title: #8b6a3f;

}

.referral-card-basic {

    --card-accent: #c9a66b;
    --card-title: #a07e3c;

}

/* Dark card variations */

.referral-card-dark {

    --card-background: var(--espresso);
    --card-text: var(--cream);
    --card-muted: var(--gold-light);
    --card-accent: var(--gold);
    --card-title: var(--gold);

}

.referral-card-boss {

    --card-background: var(--near-black);
    --card-text: var(--cream);
    --card-muted: var(--gold-light);
    --card-accent: var(--gold);
    --card-title: var(--gold);

}

/* Supreme card */

.referral-card-supreme {

    --card-background: linear-gradient(
        180deg,
        var(--red-brown) 0%,
        var(--near-black) 100%
    );

    --card-text: var(--cream);
    --card-muted: var(--cream-2);
    --card-accent: var(--gold);
    --card-title: var(--gold);

    border-top-width: 6px;

    box-shadow: 0 18px 45px rgba(139, 58, 30, .3);

}

.referral-card-supreme:hover {

    box-shadow: 0 28px 62px rgba(139, 58, 30, .45);

}

.referral-top-tier {

    min-height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--gold);

    font-family: var(--font-sans);
    font-size: .62rem;
    font-weight: 700;

    letter-spacing: .2em;

    color: var(--near-black);

    text-transform: uppercase;

}

/*==================================================
                  CARD HEADER
==================================================*/

.referral-card-header {

    padding: 1.75rem 1rem .75rem;

    text-align: center;

}

.referral-card-tier {

    display: block;

    font-family: var(--font-sans);
    font-size: .68rem;
    font-weight: 600;

    letter-spacing: .25em;

    color: var(--card-muted);

    text-transform: uppercase;

}

.referral-card-ante .referral-card-tier,
.referral-card-entry .referral-card-tier,
.referral-card-basic .referral-card-tier {

    color: var(--muted);

}

.referral-card-header h2 {

    margin: 1rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(1.45rem, 2.1vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: .06em;

    color: var(--card-title);

    text-transform: uppercase;

}

.referral-package-price {

    margin: .7rem 0 0;

    font-family: var(--font-sans);
    font-size: clamp(.85rem, 1vw, 1rem);
    line-height: 1.3;

    color: var(--card-muted);

}

.referral-card-ante .referral-package-price,
.referral-card-entry .referral-package-price,
.referral-card-basic .referral-package-price {

    color: var(--muted);

}

/*==================================================
                  CARD CONTENT
==================================================*/

.referral-card-divider {

    width: 65px;
    height: 2px;

    margin: 1.25rem auto 0;

    background: var(--card-accent);

}

.referral-card-body {

    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 1.75rem 1rem;

    text-align: center;

}

.referral-rate {

    font-family: var(--font-sans);
    font-size: clamp(.8rem, 1vw, 1rem);
    font-weight: 700;

    letter-spacing: .2em;

    color: var(--card-accent);

}

.referral-amount {

    display: block;

    margin-top: .75rem;

    font-family: var(--font-serif);
    font-size: clamp(1.7rem, 2.5vw, 2.55rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: -.04em;

    color: var(--card-text);

    white-space: nowrap;

}

.referral-card-ante .referral-amount,
.referral-card-entry .referral-amount,
.referral-card-basic .referral-amount {

    color: var(--espresso);

}

.referral-amount-label {

    margin-top: 1rem;

    font-family: var(--font-sans);
    font-size: .7rem;
    font-weight: 500;

    letter-spacing: .12em;

    color: var(--card-muted);

    text-transform: uppercase;

}

/*==================================================
                    BOTTOM NOTE
==================================================*/

.direct-referral-note {

    margin: 2rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    font-style: italic;
    line-height: 1.4;
    text-align: center;

    color: var(--muted);

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.direct-referral-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: var(--near-black);

}

.direct-referral-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.direct-referral-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.direct-referral-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1250px) {

    .direct-referral-main {

        padding-block: 5rem;

    }

    .direct-referral-grid {

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

    .direct-referral-card {

        min-height: 380px;

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 850px) {

    .direct-referral-section {

        min-height: auto;

    }

    .direct-referral-section .chrome-header {

        min-height: 70px;

        padding-block: .85rem;

    }

    .direct-referral-section .chrome-tagline {

        display: none;

    }

    .direct-referral-main {

        padding-block: 4.5rem 5.5rem;

    }

    .direct-referral-heading h1 {

        font-size: clamp(3rem, 13vw, 5.5rem);

    }

    .direct-referral-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 1rem;

    }

    .direct-referral-card {

        min-height: 370px;

    }

    .referral-card-header {

        padding-top: 1.5rem;

    }

    .referral-card-header h2 {

        font-size: 1.7rem;

    }

    .referral-amount {

        font-size: clamp(1.65rem, 5vw, 2.35rem);

    }

    .direct-referral-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .direct-referral-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    MOBILE
==================================================*/

@media (max-width: 540px) {

    .direct-referral-section .chrome-header {

        min-height: 64px;

        padding-inline: 1.1rem;

    }

    .direct-referral-section .chrome-logo {

        font-size: 1.3rem;

        letter-spacing: 2px;

    }

    .direct-referral-section .chrome-page-num {

        font-size: .55rem;

        letter-spacing: 2px;

    }

    .direct-referral-main {

        padding-block: 3.75rem 4.5rem;

    }

    .direct-referral-kicker {

        font-size: .65rem;

        letter-spacing: .18em;

    }

    .direct-referral-heading h1 {

        font-size: 2.75rem;

    }

    .direct-referral-rule {

        width: 4.5rem;
        height: 3px;

    }

    .direct-referral-intro {

        font-size: .95rem;

    }

    .direct-referral-grid {

        grid-template-columns: 1fr;

        max-width: 380px;

        margin-inline: auto;

        gap: 1.25rem;

    }

    .direct-referral-card {

        min-height: 350px;

    }

    .referral-card-header h2 {

        font-size: 2rem;

    }

    .referral-amount {

        font-size: 2.4rem;

    }

}

/*==================================================
                  SMALL MOBILE
==================================================*/

@media (max-width: 380px) {

    .direct-referral-heading h1 {

        font-size: 2.4rem;

    }

    .referral-card-header h2 {

        font-size: 1.8rem;

    }

    .referral-amount {

        font-size: 2.15rem;

    }

    .direct-referral-note {

        font-size: .95rem;

    }

}
/*==================================================
            INDIRECT REFERRAL OVERVIEW
==================================================*/

.indirect-overview-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: var(--cream);

    color: var(--ink);

}

.indirect-overview-section::before {

    content: "";

    position: absolute;
    inset: 0;

    background: url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    opacity: .07;

    pointer-events: none;

}

/*==================================================
                  HEADER CHROME
==================================================*/

.indirect-overview-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 90px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: linear-gradient(
        90deg,
        var(--espresso) 0%,
        var(--espresso-2) 100%
    );

    border-bottom: 3px solid var(--gold);

}

.indirect-overview-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 3px;

    color: var(--gold);
    text-decoration: none;

}

.indirect-overview-section .chrome-logo .reg {

    font-size: .45em;
    vertical-align: super;

    color: var(--gold-light);

}

.indirect-overview-section .chrome-tagline {

    margin-left: 24px;
    padding-left: 24px;

    border-left: 1px solid var(--gold);

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: 2px;

    color: var(--cream-2);
    text-transform: uppercase;

}

.indirect-overview-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 500;

    letter-spacing: 4px;

    color: var(--gold-light);

    white-space: nowrap;

}

/*==================================================
                    MAIN AREA
==================================================*/

.indirect-overview-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(4rem, 7vw, 7rem) var(--page-gutter);

}

.indirect-overview-container {

    width: min(100%, 1500px);

    margin-inline: auto;

}

/*==================================================
                    HEADING
==================================================*/

.indirect-overview-heading {

    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);

}

.indirect-overview-kicker {

    margin: 0 0 1.25rem;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, 1rem);
    font-weight: 600;

    letter-spacing: clamp(.2em, .4vw, .55em);

    color: var(--red-brown);

    text-transform: uppercase;

}

.indirect-overview-heading h1 {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(3.2rem, 7vw, 6rem);
    font-weight: 800;
    line-height: .95;

    color: var(--espresso);

}

.indirect-overview-rule {

    width: clamp(5rem, 8vw, 7.5rem);
    height: 4px;

    margin: 2rem 0 1.5rem;

    background: var(--gold);

}

.indirect-overview-intro {

    max-width: 950px;

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.35vw, 1.35rem);
    line-height: 1.6;

    color: var(--ink);

}

.indirect-overview-intro strong {

    color: var(--red-brown);
    font-weight: 700;

}

/*==================================================
                  CONTENT GRID
==================================================*/

.indirect-overview-grid {

    display: grid;

    grid-template-columns:
        minmax(300px, .78fr)
        minmax(0, 1.22fr);

    gap: clamp(1.5rem, 3vw, 3rem);

    align-items: stretch;

}

/*==================================================
                TOTAL BONUS CARD
==================================================*/

.indirect-total-card {

    min-height: 545px;

    display: flex;
    flex-direction: column;

    padding: clamp(2rem, 4vw, 3.25rem);

    background: var(--espresso);

    border-left: 6px solid var(--gold);

    box-shadow: 0 20px 50px rgba(58, 37, 26, .25);

}

.indirect-total-label {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 600;

    letter-spacing: .28em;

    color: var(--gold);

    text-transform: uppercase;

}

.indirect-total-value {

    margin-top: 2.5rem;

    font-family: var(--font-serif);
    font-size: clamp(7rem, 13vw, 12rem);
    font-weight: 800;
    line-height: .8;

    letter-spacing: -.08em;

    color: var(--gold);

}

.indirect-total-value span {

    display: inline-block;

    margin-left: .05em;

    font-size: .45em;
    vertical-align: top;

    letter-spacing: -.03em;

}

.indirect-total-divider {

    width: 60px;
    height: 2px;

    margin-top: auto;
    margin-bottom: 1.75rem;

    background: var(--gold);

}

.indirect-total-description {

    max-width: 600px;

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.95rem, 1.2vw, 1.2rem);
    line-height: 1.55;

    color: var(--cream-2);

}

.indirect-total-description strong {

    color: var(--gold-light);
    font-weight: 700;

}

/*==================================================
                GENERATION PANEL
==================================================*/

.generation-panel {

    min-width: 0;

    padding: clamp(1.5rem, 3vw, 2.5rem);

    border: 2px solid var(--espresso);

    background: rgba(245, 239, 228, .55);

}

.generation-kicker {

    margin: 0 0 1rem;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 600;

    letter-spacing: .25em;

    color: var(--red-brown);

    text-transform: uppercase;

}

.generation-header h2 {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 700;
    line-height: 1.15;

    color: var(--espresso);

}

/*==================================================
                  GENERATION BARS
==================================================*/

.generation-bars {

    display: flex;
    flex-direction: column;

    gap: 1.05rem;

    margin-top: clamp(2rem, 4vw, 3.25rem);

}

.generation-row {

    display: grid;

    grid-template-columns: 125px minmax(100px, 1fr) 100px;

    gap: 1rem;

    align-items: center;

}

.generation-package {

    font-family: var(--font-sans);
    font-size: clamp(.72rem, .95vw, .95rem);
    font-weight: 700;

    letter-spacing: .1em;

    color: var(--espresso);

    text-transform: uppercase;

}

.generation-ante,
.generation-entry,
.generation-basic {

    color: #8b6a3f;

}

.generation-track {

    width: 100%;
    height: 14px;

    overflow: hidden;

    background: var(--cream-2);

}

.generation-progress {

    display: block;

    width: var(--progress);
    height: 100%;

    background: var(--bar-color);

}

.generation-depth {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .85vw, .85rem);
    font-weight: 600;

    color: var(--muted);

    text-align: right;
    white-space: nowrap;

}

.generation-row-supreme .generation-package,
.generation-row-supreme .generation-depth {

    color: var(--red-brown);
    font-weight: 800;

}

/*==================================================
                PERCENTAGE LADDER
==================================================*/

.percentage-ladder {

    margin-top: clamp(2.5rem, 5vw, 4rem);

    padding: clamp(1.25rem, 2.5vw, 2rem);

    background: var(--cream-2);

    border-left: 6px solid var(--gold);

}

.percentage-ladder-label {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, .9vw, .9rem);
    font-weight: 700;

    letter-spacing: .25em;

    color: var(--red-brown);

    text-transform: uppercase;

}

.ladder-steps {

    display: grid;

    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: .7rem;

    margin-top: 1.75rem;

}

.ladder-step {

    position: relative;

    text-align: center;

}

.ladder-step:not(:last-child)::after {

    content: "›";

    position: absolute;

    top: 50%;

    right: -.65rem;

    transform: translateY(-50%);

    font-family: var(--font-serif);
    font-size: 1.5rem;

    color: var(--muted);

}

.ladder-step strong {

    display: block;

    font-family: var(--font-serif);
    font-size: clamp(1.45rem, 2.3vw, 2.2rem);
    font-weight: 800;
    line-height: 1;

    color: var(--espresso);

}

.ladder-step span {

    display: block;

    margin-top: .5rem;

    font-family: var(--font-sans);
    font-size: clamp(.6rem, .75vw, .75rem);
    line-height: 1.2;

    letter-spacing: .08em;

    color: var(--muted);

}

.percentage-ladder-note {

    margin: 1.75rem 0 0;

    font-family: var(--font-sans);
    font-size: .8rem;
    font-style: italic;

    color: var(--muted);

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.indirect-overview-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: var(--near-black);

}

.indirect-overview-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.indirect-overview-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.indirect-overview-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1100px) {

    .indirect-overview-main {

        padding-block: 5rem;

    }

    .indirect-overview-grid {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

    .indirect-total-card {

        min-height: 350px;

    }

    .indirect-total-value {

        margin-top: 2rem;

        font-size: clamp(6rem, 15vw, 10rem);

    }

    .indirect-total-divider {

        margin-top: 3rem;
        margin-bottom: 1.5rem;

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 800px) {

    .indirect-overview-section {

        min-height: auto;

    }

    .indirect-overview-section .chrome-header {

        min-height: 70px;

        padding-block: .85rem;

    }

    .indirect-overview-section .chrome-tagline {

        display: none;

    }

    .indirect-overview-main {

        padding-block: 4.5rem 5.5rem;

    }

    .indirect-overview-heading h1 {

        font-size: clamp(3rem, 13vw, 5.5rem);

    }

    .indirect-total-card {

        min-height: 300px;

        padding: 2rem;

    }

    .indirect-total-value {

        font-size: clamp(6rem, 20vw, 9rem);

    }

    .generation-panel {

        padding: 1.5rem;

    }

    .generation-bars {

        gap: .9rem;

    }

    .generation-row {

        grid-template-columns: 105px minmax(80px, 1fr) 85px;

        gap: .7rem;

    }

    .generation-package {

        font-size: .72rem;

    }

    .generation-depth {

        font-size: .68rem;

    }

    .indirect-overview-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .indirect-overview-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    MOBILE
==================================================*/

@media (max-width: 560px) {

    .indirect-overview-section .chrome-header {

        min-height: 64px;

        padding-inline: 1.1rem;

    }

    .indirect-overview-section .chrome-logo {

        font-size: 1.3rem;

        letter-spacing: 2px;

    }

    .indirect-overview-section .chrome-page-num {

        font-size: .55rem;

        letter-spacing: 2px;

    }

    .indirect-overview-main {

        padding-block: 3.75rem 4.5rem;

    }

    .indirect-overview-kicker {

        font-size: .65rem;

        letter-spacing: .18em;

    }

    .indirect-overview-heading h1 {

        font-size: 2.8rem;

    }

    .indirect-overview-rule {

        width: 4.5rem;
        height: 3px;

    }

    .indirect-overview-intro {

        font-size: .95rem;

    }

    .indirect-total-card {

        min-height: 270px;

        padding: 1.35rem;

        border-left-width: 4px;

    }

    .indirect-total-label {

        font-size: .65rem;

        letter-spacing: .18em;

    }

    .indirect-total-value {

        margin-top: 2rem;

        font-size: 6.5rem;

    }

    .indirect-total-description {

        font-size: .88rem;

    }

    .generation-panel {

        padding: 1.15rem;

    }

    .generation-header h2 {

        font-size: 1.9rem;

    }

    .generation-bars {

        gap: 1rem;

        margin-top: 2rem;

    }

    .generation-row {

        grid-template-columns: 95px minmax(70px, 1fr);

        gap: .65rem;

    }

    .generation-track {

        height: 12px;

    }

    .generation-depth {

        grid-column: 2;

        text-align: left;

        margin-top: -.45rem;

        font-size: .65rem;

    }

    .ladder-steps {

        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 1.25rem .75rem;

    }

    .ladder-step:not(:last-child)::after {

        display: none;

    }

    .ladder-step strong {

        font-size: 1.5rem;

    }

    .percentage-ladder-note {

        font-size: .72rem;

    }

}

/*==================================================
                  SMALL MOBILE
==================================================*/

@media (max-width: 380px) {

    .indirect-overview-heading h1 {

        font-size: 2.45rem;

    }

    .indirect-total-value {

        font-size: 5.8rem;

    }

    .generation-row {

        grid-template-columns: 85px minmax(60px, 1fr);

    }

    .generation-package {

        font-size: .65rem;

    }

    .ladder-steps {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}

/*==================================================
              INDIRECT GENERATION TABLE
                 (COMPLETE STYLESHEET)
==================================================*/

.generation-table-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: #f5ede0;

    color: #1f1410;

}

.generation-table-section::before {

    content: "";

    position: absolute;
    inset: 0;

    background: url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    opacity: .055;

    pointer-events: none;

}

/*==================================================
                  HEADER CHROME
==================================================*/

.generation-table-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 90px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: linear-gradient(
        90deg,
        var(--espresso) 0%,
        var(--espresso-2) 100%
    );

    border-bottom: 3px solid var(--gold);

}

.generation-table-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 3px;

    color: var(--gold);
    text-decoration: none;

}

.generation-table-section .chrome-logo .reg {

    font-size: .45em;
    vertical-align: super;

    color: var(--gold-light);

}

.generation-table-section .chrome-tagline {

    margin-left: 24px;
    padding-left: 24px;

    border-left: 1px solid var(--gold);

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: 2px;

    color: var(--cream-2);
    text-transform: uppercase;

}

.generation-table-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 500;

    letter-spacing: 4px;

    color: var(--gold-light);

    white-space: nowrap;

}

/*==================================================
                    MAIN AREA
==================================================*/

.generation-table-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(4rem, 7vw, 7rem) var(--page-gutter);

}

.generation-table-container {

    width: min(100%, 1550px);

    margin-inline: auto;

}

/*==================================================
                    HEADING
==================================================*/

.generation-table-heading {

    margin-bottom: clamp(2.5rem, 5vw, 4rem);

}

.generation-table-kicker {

    margin: 0 0 1.25rem;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, 1rem);
    font-weight: 600;

    letter-spacing: clamp(.18em, .4vw, .5em);

    color: #7a2e28;

    text-transform: uppercase;

}

.generation-table-heading h1 {

    max-width: 1250px;

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(3rem, 6vw, 5.8rem);
    font-weight: 800;
    line-height: .98;

    letter-spacing: -.03em;

    color: #1f1410;

}

.generation-table-rule {

    width: clamp(5rem, 8vw, 10rem);
    height: 3px;

    margin: 2rem 0 1.5rem;

    background: #c8a25c;

}

.generation-table-intro {

    max-width: 1100px;

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.95rem, 1.25vw, 1.2rem);
    line-height: 1.55;

    color: #5a3a2a;

}

/*==================================================
              GRID-BASED EARNINGS TABLE
==================================================*/

.grid-table-card {

    width: 100%;

    background: #fff;

    box-shadow: 0 12px 35px rgba(31, 20, 16, .12);

}

.grid-table-scroll {

    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

}

.grid-table {

    display: grid;

    grid-template-columns:

        minmax(150px, 1.4fr)

        repeat(7, minmax(105px, 1fr));

    min-width: 980px;

}

.grid-row {

    display: grid;

    grid-column: 1 / -1;

    grid-template-columns: subgrid;

}

@supports not (grid-template-columns: subgrid) {

    .grid-row {

        grid-template-columns:

            minmax(150px, 1.4fr)

            repeat(7, minmax(105px, 1fr));

    }

}

.grid-cell {

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 74px;

    padding: .6rem .5rem;

    box-sizing: border-box;

    font-family: var(--font-sans);
    font-size: clamp(.85rem, 1.1vw, 1.1rem);
    font-weight: 600;

    color: #1f1410;

    text-align: center;

    white-space: nowrap;

    border-bottom: 1px solid rgba(90, 58, 42, .08);

}

/*==================================================
                    HEADER ROW
==================================================*/

.grid-head {

    background: #1f1410;

}

.grid-head .grid-cell {

    min-height: 64px;

    font-size: clamp(.65rem, .85vw, .9rem);
    font-weight: 600;

    letter-spacing: .12em;

    color: #c8a25c;

    text-transform: uppercase;

    border-bottom: none;
    white-space: normal;

}

.grid-label-head {

    justify-content: flex-start;
    padding-left: 1.5rem;

    text-align: left;

}

.grid-supreme-head {

    color: #e4c489;

}

/*==================================================
                    ROW LABEL CELL
==================================================*/

.grid-label {

    justify-content: flex-start;
    padding-left: 1.5rem;

    flex-direction: row;
    flex-wrap: wrap;

    gap: .45rem;

    text-align: left;

}

.grid-label span {

    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.3vw, 1.25rem);
    font-weight: 700;
    white-space: nowrap;

}

.grid-label small {

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .8vw, .8rem);
    font-weight: 600;

    color: #7a2e28;

    white-space: nowrap;

}

/*==================================================
                    ROW COLORS
==================================================*/

.row-cream {

    background: #f5ede0;

}

.row-white {

    background: #fff;

}

.row-dark {

    background: #1f1410;

}

.row-dark .grid-cell {

    color: #f5ede0;

}

.row-dark .grid-label span {

    color: #e4c489;

}

.row-dark .grid-label small {

    color: #c8a25c;

}

/*==================================================
                    EMPTY CELLS
==================================================*/

.grid-cell.empty {

    font-size: 1.35rem;
    font-weight: 400;

    color: #c0b0a0;

}

.row-dark .grid-cell.empty {

    color: #6b5a48;

}

/*==================================================
                  SUPREME COLUMN
==================================================*/

.grid-supreme-cell {

    background: rgba(200, 162, 92, .15);

    color: #7a2e28;
    font-weight: 700;

}

.row-dark .grid-supreme-cell {

    color: #e4c489;

}

/*==================================================
                  MOBILE HINT
==================================================*/

.table-scroll-hint {

    display: none;

    margin: 0;

    padding: .75rem 1rem;

    background: #f5ede0;

    font-family: var(--font-sans);
    font-size: .72rem;
    font-style: italic;

    color: #7a6960;

    text-align: center;

}

/*==================================================
                  SUMMARY BAR
==================================================*/

.generation-summary {

    margin-top: 1.5rem;

    padding: 1rem 1.25rem;

    background: #c8a25c;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 600;

    letter-spacing: .12em;
    line-height: 1.4;

    color: #1f1410;

    text-align: center;
    text-transform: uppercase;

}

.generation-summary span {

    padding: 0 .65rem;

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.generation-table-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: #1f1410;

}

.generation-table-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.generation-table-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.generation-table-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1000px) {

    .generation-table-main {

        padding-block: 5rem;

    }

    .grid-table {

        min-width: 920px;

    }

    .grid-cell {

        min-height: 68px;

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 760px) {

    .generation-table-section {

        min-height: auto;

    }

    .generation-table-section .chrome-header {

        min-height: 70px;

        padding-block: .85rem;

    }

    .generation-table-section .chrome-tagline {

        display: none;

    }

    .generation-table-main {

        padding-block: 4.5rem 5rem;

    }

    .generation-table-heading h1 {

        font-size: clamp(2.8rem, 12vw, 5rem);

    }

    .generation-table-intro {

        font-size: .95rem;

    }

    .grid-table-scroll {

        border-bottom: 1px solid rgba(90, 58, 42, .2);

    }

    .grid-table {

        min-width: 900px;

    }

    .table-scroll-hint {

        display: block;

    }

    .generation-summary {

        font-size: .7rem;

        letter-spacing: .08em;

    }

    .generation-summary span {

        display: none;

    }

    .generation-table-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .generation-table-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    MOBILE
==================================================*/

@media (max-width: 520px) {

    .generation-table-section .chrome-header {

        min-height: 64px;

        padding-inline: 1.1rem;

    }

    .generation-table-section .chrome-logo {

        font-size: 1.3rem;

        letter-spacing: 2px;

    }

    .generation-table-section .chrome-page-num {

        font-size: .55rem;

        letter-spacing: 2px;

    }

    .generation-table-main {

        padding-block: 3.75rem 4.5rem;

    }

    .generation-table-kicker {

        font-size: .65rem;

        letter-spacing: .18em;

    }

    .generation-table-heading h1 {

        font-size: 2.55rem;

    }

    .generation-table-rule {

        width: 5rem;

    }

    .generation-table-intro {

        font-size: .88rem;

    }

    .grid-table {

        min-width: 860px;

    }

    .grid-head .grid-cell {

        min-height: 58px;

        padding-inline: .3rem;

        font-size: .62rem;

        letter-spacing: .08em;

    }

    .grid-label-head {

        padding-left: 1rem;

    }

    .grid-cell {

        min-height: 64px;

        padding: .7rem .35rem;

    }

    .grid-label {

        padding-left: 1rem;

        font-size: .95rem;

    }

    .grid-label small {

        display: block;

        margin: .25rem 0 0;

        font-size: .62rem;

    }

    .grid-cell.empty {

        font-size: 1.15rem;

    }

    .generation-summary {

        padding: .9rem .8rem;

        font-size: .62rem;

        line-height: 1.5;

    }

}

/*==================================================
                  SMALL MOBILE
==================================================*/

@media (max-width: 380px) {

    .generation-table-heading h1 {

        font-size: 2.25rem;

    }

    .grid-table {

        min-width: 820px;

    }

}

/*==================================================
                    UPGRADE BONUS
==================================================*/

.upgrade-bonus-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: var(--cream);

    color: var(--ink);

}

.upgrade-bonus-section::before {

    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background: url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    opacity: .06;

    pointer-events: none;

}

/*==================================================
                  HEADER CHROME
==================================================*/

.upgrade-bonus-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 90px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: linear-gradient(
        90deg,
        var(--espresso) 0%,
        var(--espresso-2) 100%
    );

    border-bottom: 3px solid var(--gold);

}

.upgrade-bonus-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 3px;

    color: var(--gold);
    text-decoration: none;

}

.upgrade-bonus-section .chrome-logo .reg {

    font-size: .45em;
    vertical-align: super;

    color: var(--gold-light);

}

.upgrade-bonus-section .chrome-tagline {

    margin-left: 24px;
    padding-left: 24px;

    border-left: 1px solid var(--gold);

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: 2px;

    color: var(--cream-2);
    text-transform: uppercase;

}

.upgrade-bonus-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 500;

    letter-spacing: 4px;

    color: var(--gold-light);

    white-space: nowrap;

}

/*==================================================
                    MAIN AREA
==================================================*/

.upgrade-bonus-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(4rem, 7vw, 7rem) var(--page-gutter);

}

.upgrade-bonus-container {

    width: min(100%, 1450px);

    margin-inline: auto;

}

/*==================================================
                    HEADING
==================================================*/

.upgrade-bonus-heading {

    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);

}

.upgrade-bonus-kicker {

    margin: 0 0 1.25rem;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, 1rem);
    font-weight: 600;

    letter-spacing: clamp(.2em, .4vw, .55em);

    color: var(--red-brown);

    text-transform: uppercase;

}

.upgrade-bonus-heading h1 {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(3.5rem, 8vw, 7.5rem);
    font-weight: 800;
    line-height: .95;

    color: var(--espresso);

}

.upgrade-bonus-rule {

    width: clamp(5rem, 8vw, 7.5rem);
    height: 4px;

    margin-top: 2rem;

    background: var(--gold);

}

/*==================================================
                  CONTENT GRID
==================================================*/

.upgrade-bonus-grid {

    display: grid;

    grid-template-columns:
        minmax(300px, .8fr)
        minmax(0, 1.2fr);

    gap: clamp(2rem, 5vw, 5rem);

    align-items: stretch;

}

/*==================================================
                  LEFT COPY
==================================================*/

.upgrade-bonus-copy {

    min-width: 0;

    display: flex;
    flex-direction: column;

}

.upgrade-bonus-description {

    max-width: 760px;

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(1.05rem, 1.6vw, 1.6rem);
    line-height: 1.6;

    color: var(--ink);

}

.upgrade-bonus-description + .upgrade-bonus-description {

    margin-top: 1.75rem;

}

.upgrade-bonus-description strong {

    color: var(--red-brown);
    font-weight: 700;

}

.upgrade-bonus-description em {

    color: var(--espresso);
    font-style: normal;
    font-weight: 600;

}

/*==================================================
                  20% RATE CARD
==================================================*/

.upgrade-rate-card {

    width: 100%;
    max-width: 760px;

    box-sizing: border-box;

    margin-top: auto;
    padding: clamp(1.5rem, 3vw, 2.5rem);

    background: var(--espresso);

    border-left: 6px solid var(--gold);

    box-shadow: 0 18px 45px rgba(58, 37, 26, .22);

}

.upgrade-rate-label {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 600;

    letter-spacing: .3em;

    color: var(--gold);

    text-transform: uppercase;

}

.upgrade-rate {

    margin-top: .75rem;

    font-family: var(--font-serif);
    font-size: clamp(5rem, 9vw, 8rem);
    font-weight: 800;
    line-height: .85;

    letter-spacing: -.06em;

    color: var(--gold);

}

.upgrade-rate span {

    font-size: .5em;
    vertical-align: top;

    letter-spacing: -.02em;

}

.upgrade-rate-description {

    margin: 1rem 0 0;

    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.35vw, 1.3rem);
    line-height: 1.35;

    color: var(--gold-light);

}

/*==================================================
                EXAMPLE PANEL
==================================================*/

.upgrade-example-panel {

    min-width: 0;

    padding: clamp(1.5rem, 3vw, 2.5rem);

    background: var(--cream-2);

    border-left: 6px solid var(--gold);

}

.upgrade-example-label {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .9vw, .85rem);
    font-weight: 700;

    letter-spacing: .2em;
    line-height: 1.4;

    color: var(--red-brown);

    text-transform: uppercase;

}

.upgrade-example-panel h2 {

    margin: 1.25rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 700;
    line-height: 1.2;

    color: var(--espresso);

}

/*==================================================
                    UPGRADE STEPS
==================================================*/

.upgrade-steps {

    display: grid;

    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);

    gap: clamp(.75rem, 1.5vw, 1.25rem);

    align-items: center;

    margin-top: 3rem;

}

.upgrade-step {

    min-height: 145px;

    padding: 1.25rem;

    border: 1px solid rgba(58, 37, 26, .15);

}

.upgrade-step span,
.upgrade-difference span {

    display: block;

    font-family: var(--font-sans);
    font-size: .65rem;
    font-weight: 700;

    letter-spacing: .2em;

    text-transform: uppercase;

}

.upgrade-step-before {

    background: var(--cream);

}

.upgrade-step-before span {

    color: var(--muted);

}

.upgrade-step-after {

    background: var(--espresso);

}

.upgrade-step-after span {

    color: var(--gold);

}

.upgrade-step h3 {

    margin: .75rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

}

.upgrade-step-before h3 {

    color: var(--espresso);

}

.upgrade-step-after h3 {

    color: var(--cream);

}

.upgrade-step p {

    margin: .5rem 0 0;

    font-family: var(--font-sans);
    font-size: clamp(.8rem, 1vw, 1rem);

}

.upgrade-step-before p {

    color: var(--muted);

}

.upgrade-step-after p {

    color: var(--gold-light);

}

.upgrade-arrow {

    font-family: var(--font-serif);
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 1;

    color: var(--gold);

}

/* Difference row */

.upgrade-difference {

    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: 1rem 1.25rem;

    border-top: 1px solid var(--gold);

}

.upgrade-difference > div {

    display: flex;
    align-items: baseline;
    gap: 1rem;

}

.upgrade-difference span {

    color: var(--muted);

}

.upgrade-difference strong {

    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);
    line-height: 1;

    color: var(--red-brown);

}

.upgrade-difference p {

    margin: 0;

    font-family: var(--font-sans);
    font-size: .8rem;
    color: var(--muted);

}

/*==================================================
                  CALCULATION
==================================================*/

.upgrade-calculation {

    margin-top: 2.25rem;

    padding-top: 1.75rem;

    border-top: 1px solid var(--gold);

}

.upgrade-calculation-label {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, .9vw, .9rem);
    font-weight: 700;

    letter-spacing: .2em;

    color: var(--red-brown);

    text-transform: uppercase;

}

.upgrade-calculation strong {

    display: block;

    margin-top: .5rem;

    font-family: var(--font-serif);
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 800;
    line-height: 1;

    color: var(--espresso);

}

.upgrade-calculation p:last-child {

    margin: .75rem 0 0;

    font-family: var(--font-sans);
    font-size: clamp(.85rem, 1vw, 1rem);
    font-style: italic;

    color: var(--muted);

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.upgrade-bonus-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: var(--near-black);

}

.upgrade-bonus-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.upgrade-bonus-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.upgrade-bonus-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1100px) {

    .upgrade-bonus-main {

        padding-block: 5rem;

    }

    .upgrade-bonus-grid {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

    .upgrade-rate-card {

        margin-top: 3rem;

    }

    .upgrade-example-panel {

        max-width: 900px;

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 800px) {

    .upgrade-bonus-section {

        min-height: auto;

    }

    .upgrade-bonus-section .chrome-header {

        min-height: 70px;

        padding-block: .85rem;

    }

    .upgrade-bonus-section .chrome-tagline {

        display: none;

    }

    .upgrade-bonus-main {

        padding-block: 4.5rem 5.5rem;

    }

    .upgrade-bonus-heading h1 {

        font-size: clamp(3.3rem, 14vw, 6rem);

    }

    .upgrade-bonus-description {

        font-size: 1.05rem;

    }

    .upgrade-rate-card {

        margin-top: 2.75rem;

    }

    .upgrade-example-panel h2 {

        font-size: 2rem;

    }

    .upgrade-steps {

        margin-top: 2.5rem;

    }

    .upgrade-bonus-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .upgrade-bonus-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    MOBILE
==================================================*/

@media (max-width: 560px) {

    .upgrade-bonus-section .chrome-header {

        min-height: 64px;

        padding-inline: 1.1rem;

    }

    .upgrade-bonus-section .chrome-logo {

        font-size: 1.3rem;

        letter-spacing: 2px;

    }

    .upgrade-bonus-section .chrome-page-num {

        font-size: .55rem;

        letter-spacing: 2px;

    }

    .upgrade-bonus-main {

        padding-block: 3.75rem 4.5rem;

    }

    .upgrade-bonus-kicker {

        font-size: .65rem;

        letter-spacing: .18em;

    }

    .upgrade-bonus-heading h1 {

        font-size: 2.8rem;

    }

    .upgrade-bonus-rule {

        width: 4.5rem;
        height: 3px;

    }

    .upgrade-bonus-description {

        font-size: .95rem;

    }

    .upgrade-rate-card {

        border-left-width: 4px;

        padding: 1.25rem;

    }

    .upgrade-rate {

        font-size: 5.5rem;

    }

    .upgrade-rate-description {

        font-size: .9rem;

    }

    .upgrade-example-panel {

        padding: 1.25rem;

        border-left-width: 4px;

    }

    .upgrade-example-label {

        font-size: .62rem;

        letter-spacing: .14em;

    }

    .upgrade-example-panel h2 {

        font-size: 1.7rem;

    }

    .upgrade-steps {

        grid-template-columns: 1fr;

        gap: .85rem;

    }

    .upgrade-step {

        min-height: auto;

    }

    .upgrade-arrow {

        justify-self: center;

        transform: rotate(90deg);

    }

    .upgrade-difference {

        align-items: flex-start;
        flex-direction: column;

        gap: .6rem;

    }

    .upgrade-difference > div {

        align-items: flex-start;
        flex-direction: column;

        gap: .35rem;

    }

    .upgrade-calculation strong {

        font-size: 3.2rem;

    }

}

/*==================================================
                  SMALL MOBILE
==================================================*/

@media (max-width: 380px) {

    .upgrade-bonus-heading h1 {

        font-size: 2.45rem;

    }

    .upgrade-rate {

        font-size: 4.8rem;

    }

    .upgrade-calculation strong {

        font-size: 2.8rem;

    }

}

/*==================================================
          PAIRING / BALANCING BONUS SECTION
                (COMPLETE STYLESHEET)
==================================================*/

.pairing-bonus-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: var(--cream);

    color: var(--ink);

}

.pairing-bonus-section::before {

    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background: url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    opacity: .06;

    pointer-events: none;

}

/*==================================================
                  HEADER CHROME
==================================================*/

.pairing-bonus-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 90px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: linear-gradient(
        90deg,
        var(--espresso) 0%,
        var(--espresso-2) 100%
    );

    border-bottom: 3px solid var(--gold);

}

.pairing-bonus-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 3px;

    color: var(--gold);
    text-decoration: none;

}

.pairing-bonus-section .chrome-logo .reg {

    font-size: .45em;
    vertical-align: super;

    color: var(--gold-light);

}

.pairing-bonus-section .chrome-tagline {

    margin-left: 24px;
    padding-left: 24px;

    border-left: 1px solid var(--gold);

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: 2px;

    color: var(--cream-2);
    text-transform: uppercase;

}

.pairing-bonus-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 500;

    letter-spacing: 4px;

    color: var(--gold-light);

    white-space: nowrap;

}

/*==================================================
                    MAIN AREA
==================================================*/

.pairing-bonus-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(3.5rem, 6vw, 6rem) var(--page-gutter);

}

.pairing-bonus-container {

    width: min(100%, 1550px);

    margin-inline: auto;

}

/*==================================================
                    HEADING
==================================================*/

.pairing-bonus-heading {

    margin-bottom: clamp(2rem, 4vw, 3rem);

}

.pairing-bonus-kicker {

    margin: 0 0 1rem;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .9vw, .9rem);
    font-weight: 600;

    letter-spacing: clamp(.18em, .4vw, .5em);

    color: var(--red-brown);

    text-transform: uppercase;

}

.pairing-bonus-heading h1 {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(2.6rem, 5.5vw, 5rem);
    font-weight: 800;
    line-height: 1;

    color: var(--espresso);

}

.pairing-bonus-rule {

    width: clamp(3.5rem, 6vw, 6.25rem);
    height: 3px;

    margin: 1.5rem 0 1.25rem;

    background: var(--gold);

}

.pairing-bonus-intro {

    max-width: 1200px;

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.9rem, 1.15vw, 1.25rem);
    line-height: 1.55;

    color: var(--muted);

}

.pairing-bonus-intro strong {

    color: var(--red-brown);
    font-weight: 700;

}

.pairing-bonus-intro em {

    color: var(--espresso);
    font-style: italic;

}

/*==================================================
                  MAIN GRID LAYOUT
==================================================*/

.pairing-bonus-grid {

    display: grid;

    grid-template-columns:
        minmax(320px, .82fr)
        minmax(0, 1.18fr);

    gap: clamp(1.5rem, 3vw, 2.5rem);

    align-items: stretch;

}

/*==================================================
                  BINARY DIAGRAM
==================================================*/

.pairing-diagram {

    display: flex;
    flex-direction: column;

    padding: clamp(1.5rem, 3vw, 2.25rem);

    background: var(--espresso);

}

.diagram-label {

    margin: 0 0 1.25rem;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .9vw, .8rem);
    font-weight: 600;

    letter-spacing: .3em;

    color: var(--gold);

    text-align: center;
    text-transform: uppercase;

}

.diagram-visual {

    position: relative;

    width: 100%;
    aspect-ratio: 800 / 320;

    flex: 1;

}

.diagram-lines {

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

}

.diagram-lines line {

    stroke: var(--gold);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;

}

.diagram-node {

    position: absolute;

    top: 26%;
    left: 50%;

    width: clamp(70px, 12%, 100px);
    aspect-ratio: 1 / 1;

    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--gold);

    font-family: var(--font-serif);
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 800;

    color: var(--near-black);

}

.diagram-leg {

    position: absolute;

    top: 66%;

    width: clamp(140px, 26%, 210px);

    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: clamp(.9rem, 1.5vw, 1.25rem);

    background: var(--cream);

    border: 3px solid var(--gold);

    text-align: center;

}

.diagram-leg-left {

    left: 24%;

}

.diagram-leg-right {

    left: 76%;

}

.leg-label {

    font-family: var(--font-sans);
    font-size: clamp(.6rem, .8vw, .75rem);
    font-weight: 700;

    letter-spacing: .18em;

    color: var(--red-brown);

    text-transform: uppercase;

}

.leg-pv {

    margin-top: .5rem;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.8vw, 2.6rem);
    font-weight: 800;
    line-height: 1;

    color: var(--espresso);

}

.leg-pv small {

    font-family: var(--font-sans);
    font-size: .4em;
    font-weight: 500;

    color: var(--muted);

}

.leg-packs {

    margin-top: .4rem;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .85vw, .8rem);

    letter-spacing: .04em;

    color: var(--muted);

}

.diagram-match {

    margin-top: 1.5rem;

    padding: 1rem;

    background: var(--gold);

    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    font-weight: 800;
    line-height: 1.2;

    letter-spacing: .08em;

    color: var(--near-black);

    text-align: center;
    text-transform: uppercase;

}

/*==================================================
                  RATE TABLE PANEL
==================================================*/

.pairing-rate-panel {

    padding: clamp(1.5rem, 3vw, 2.25rem);

    background: #fff;

    border: 1px solid rgba(58, 37, 26, .12);

}

.pairing-rate-kicker {

    margin: 0 0 1.5rem;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, .95vw, .9rem);
    font-weight: 700;

    letter-spacing: .28em;

    color: var(--red-brown);

    text-transform: uppercase;

}

.pairing-rate-rows {

    display: flex;
    flex-direction: column;

}

.pairing-rate-row {

    display: grid;

    grid-template-columns: 130px minmax(80px, 1fr) 80px;

    gap: 1.25rem;

    align-items: center;

    height: 64px;

    border-bottom: 1px solid var(--cream-2);

}

.pairing-rate-row:last-child {

    border-bottom: none;

    height: 70px;

}

.rate-package {

    font-family: var(--font-sans);
    font-size: clamp(.85rem, 1.1vw, 1.05rem);
    font-weight: 700;

    letter-spacing: .06em;

    text-transform: uppercase;

}

.rate-ante {
    color: #5a4635;
}

.rate-entry {
    color: #8b6a3f;
}

.rate-basic {
    color: #a07e3c;
}

.rate-standard {
    color: var(--espresso);
}

.rate-supreme {

    color: var(--red-brown);
    font-weight: 800;

}

.rate-track {

    width: 100%;
    height: 10px;

    background: var(--cream-2);

    overflow: hidden;

}

.rate-progress {

    display: block;

    width: var(--progress);
    height: 100%;

    background: var(--bar-color);

}

.rate-value {

    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2vw, 2rem);
    font-weight: 800;
    line-height: 1;

    color: var(--espresso);

    text-align: right;

}

.rate-value-supreme {

    font-size: clamp(1.7rem, 2.4vw, 2.4rem);

    color: var(--red-brown);

}

.pairing-rate-supreme {

    margin-top: .25rem;

}

/*==================================================
                  QUALIFICATION NOTE
==================================================*/

.pairing-qualification {

    margin: clamp(1.5rem, 3vw, 2rem) 0 0;

    padding: 1rem 1.5rem;

    border: 1px solid var(--cream-2);

    font-family: var(--font-sans);
    font-style: italic;
    font-size: clamp(.85rem, 1.15vw, 1.15rem);
    line-height: 1.5;

    color: var(--muted);

    text-align: center;

}

.pairing-qualification strong {

    font-style: normal;
    font-weight: 700;

    color: var(--red-brown);

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.pairing-bonus-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: var(--near-black);

}

.pairing-bonus-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.pairing-bonus-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.pairing-bonus-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1100px) {

    .pairing-bonus-grid {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

    .pairing-diagram {

        max-width: 700px;

        margin-inline: auto;

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 800px) {

    .pairing-bonus-section {

        min-height: auto;

    }

    .pairing-bonus-section .chrome-header {

        min-height: 70px;

        padding-block: .85rem;

    }

    .pairing-bonus-section .chrome-tagline {

        display: none;

    }

    .pairing-bonus-main {

        padding-block: 3.5rem 4.5rem;

    }

    .pairing-bonus-heading h1 {

        font-size: clamp(2.4rem, 11vw, 4rem);

    }

    .pairing-rate-row {

        grid-template-columns: 105px minmax(60px, 1fr) 65px;

        gap: .85rem;

    }

    .rate-package {

        font-size: .8rem;

    }

    .rate-value {

        font-size: 1.35rem;

    }

    .pairing-bonus-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .pairing-bonus-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    MOBILE
==================================================*/

@media (max-width: 560px) {

    .pairing-bonus-section .chrome-header {

        min-height: 64px;

        padding-inline: 1.1rem;

    }

    .pairing-bonus-section .chrome-logo {

        font-size: 1.3rem;

        letter-spacing: 2px;

    }

    .pairing-bonus-section .chrome-page-num {

        font-size: .55rem;

        letter-spacing: 2px;

    }

    .pairing-bonus-main {

        padding-block: 3rem 4rem;

    }

    .pairing-bonus-kicker {

        font-size: .62rem;

        letter-spacing: .16em;

    }

    .pairing-bonus-heading h1 {

        font-size: 2.15rem;

    }

    .pairing-bonus-intro {

        font-size: .88rem;

    }

    .diagram-leg {

        width: clamp(120px, 34%, 165px);

        padding: .7rem;

    }

    .leg-pv {

        font-size: 1.5rem;

    }

    .diagram-node {

        width: 62px;

        font-size: .9rem;

    }

    .diagram-match {

        font-size: .85rem;

        letter-spacing: .04em;

    }

    .pairing-rate-panel {

        padding: 1.25rem;

    }

    .pairing-rate-row {

        grid-template-columns: 88px minmax(50px, 1fr) 56px;

        gap: .6rem;

        height: 56px;

    }

    .rate-package {

        font-size: .68rem;

    }

    .rate-value {

        font-size: 1.15rem;

    }

    .rate-value-supreme {

        font-size: 1.35rem;

    }

    .pairing-qualification {

        padding: .9rem 1rem;

        font-size: .8rem;

    }

}

/*==================================================
                  SMALL MOBILE
==================================================*/

@media (max-width: 380px) {

    .pairing-bonus-heading h1 {

        font-size: 1.9rem;

    }

    .diagram-leg-left {

        left: 20%;

    }

    .diagram-leg-right {

        left: 80%;

    }

}

/*==================================================
          DAILY PAIRING CAPS SECTION
                (COMPLETE STYLESHEET)
==================================================*/

.pairing-caps-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: #f5ede0;

    color: #1f1410;

}

.pairing-caps-section::before {

    content: "";

    position: absolute;
    inset: 0;

    background: url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    opacity: .055;

    pointer-events: none;

}

/*==================================================
                  HEADER CHROME
==================================================*/

.pairing-caps-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 90px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: linear-gradient(
        90deg,
        var(--espresso) 0%,
        var(--espresso-2) 100%
    );

    border-bottom: 3px solid var(--gold);

}

.pairing-caps-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 3px;

    color: var(--gold);
    text-decoration: none;

}

.pairing-caps-section .chrome-logo .reg {

    font-size: .45em;
    vertical-align: super;

    color: var(--gold-light);

}

.pairing-caps-section .chrome-tagline {

    margin-left: 24px;
    padding-left: 24px;

    border-left: 1px solid var(--gold);

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: 2px;

    color: var(--cream-2);
    text-transform: uppercase;

}

.pairing-caps-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 500;

    letter-spacing: 4px;

    color: var(--gold-light);

    white-space: nowrap;

}

/*==================================================
                    MAIN AREA
==================================================*/

.pairing-caps-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(3.5rem, 6vw, 6rem) var(--page-gutter);

}

.pairing-caps-container {

    width: min(100%, 1600px);

    margin-inline: auto;

}

/*==================================================
                    HEADING
==================================================*/

.pairing-caps-heading {

    margin-bottom: clamp(2rem, 4vw, 3rem);

}

.pairing-caps-kicker {

    margin: 0 0 1rem;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .9vw, .9rem);
    font-weight: 600;

    letter-spacing: clamp(.18em, .4vw, .5em);

    color: #7a2e28;

    text-transform: uppercase;

}

.pairing-caps-heading h1 {

    max-width: 1300px;

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: -.02em;

    color: #1f1410;

}

.pairing-caps-rule {

    width: clamp(4rem, 6vw, 7rem);
    height: 3px;

    margin: 1.5rem 0 1.25rem;

    background: #c8a25c;

}

.pairing-caps-intro {

    max-width: 1200px;

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.9rem, 1.15vw, 1.2rem);
    line-height: 1.5;

    color: #5a3a2a;

}

.pairing-caps-intro strong {

    color: #7a2e28;
    font-weight: 700;

}

/*==================================================
              GRID-BASED CAPPING TABLE
==================================================*/

.grid-table-card {

    width: 100%;

    background: #fff;

    box-shadow: 0 12px 35px rgba(31, 20, 16, .12);

}

.grid-table-scroll {

    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

}

.caps-grid-table {

    display: grid;

    grid-template-columns:

        minmax(140px, 1.2fr)

        repeat(6, minmax(115px, 1fr));

    min-width: 1100px;

}

.grid-row {

    display: grid;

    grid-column: 1 / -1;

    grid-template-columns: subgrid;

}

@supports not (grid-template-columns: subgrid) {

    .caps-grid-table .grid-row {

        grid-template-columns:

            minmax(140px, 1.2fr)

            repeat(6, minmax(115px, 1fr));

    }

}

.grid-cell {

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 70px;

    padding: .6rem .5rem;

    box-sizing: border-box;

    font-family: var(--font-sans);
    font-size: clamp(.85rem, 1.05vw, 1.1rem);
    font-weight: 600;

    color: #1f1410;

    text-align: center;

    white-space: nowrap;

    border-bottom: 1px solid rgba(90, 58, 42, .08);

}

/*==================================================
                    HEADER ROW
==================================================*/

.grid-head {

    background: #1f1410;

}

.grid-head .grid-cell {

    min-height: 64px;

    font-size: clamp(.6rem, .8vw, .85rem);
    font-weight: 600;

    letter-spacing: .1em;

    color: #c8a25c;

    text-transform: uppercase;

    border-bottom: none;
    white-space: normal;

}

.grid-label-head {

    justify-content: flex-start;
    padding-left: 1.5rem;

    text-align: left;

}

.grid-supreme-head {

    color: #e4c489;

}

/*==================================================
                    ROW LABEL CELL
==================================================*/

.grid-label {

    justify-content: flex-start;
    padding-left: 1.5rem;

    text-align: left;

}

.grid-label span {

    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    font-weight: 700;

    white-space: nowrap;

}

/*==================================================
                    ROW COLORS
==================================================*/

.row-cream {

    background: #f5ede0;

}

.row-white {

    background: #fff;

}

.row-dark {

    background: #1f1410;

    min-height: 78px;

}

.row-dark .grid-cell {

    min-height: 78px;

    color: #eadfca;

}

.row-dark .grid-label span {

    color: #e4c489;
    font-weight: 800;

    font-size: clamp(1.05rem, 1.35vw, 1.3rem);

}

/*==================================================
                  RATE CELL
==================================================*/

.rate-cell {

    color: #7a2e28;
    font-weight: 700;

}

.row-dark .rate-cell {

    color: #c8a25c;

}

/*==================================================
                  BOLD CELLS
==================================================*/

.bold-cell {

    font-weight: 700;

}

/*==================================================
                  SUPREME COLUMN
==================================================*/

.grid-supreme-cell {

    justify-content: flex-end;
    padding-right: 1.5rem;

    background: rgba(200, 162, 92, .15);

    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.35vw, 1.35rem);
    font-weight: 800;

    color: #7a2e28;

}

.row-dark .grid-supreme-cell {

    color: #e4c489;

}

.supreme-final {

    font-size: clamp(1.15rem, 1.6vw, 1.6rem);

}

/*==================================================
                  MOBILE HINT
==================================================*/

.table-scroll-hint {

    display: none;

    margin: 0;

    padding: .75rem 1rem;

    background: #f5ede0;

    font-family: var(--font-sans);
    font-size: .72rem;
    font-style: italic;

    color: #7a6960;

    text-align: center;

}

/*==================================================
                  SUMMARY BAR
==================================================*/

.pairing-caps-summary {

    margin-top: 1.5rem;

    padding: 1rem 1.25rem;

    background: #c8a25c;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .9vw, .9rem);
    font-weight: 600;

    letter-spacing: .12em;
    line-height: 1.4;

    color: #1f1410;

    text-align: center;
    text-transform: uppercase;

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.pairing-caps-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: #1f1410;

}

.pairing-caps-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.pairing-caps-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.pairing-caps-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1100px) {

    .pairing-caps-main {

        padding-block: 5rem;

    }

    .caps-grid-table {

        min-width: 1020px;

    }

    .grid-cell {

        min-height: 64px;

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 800px) {

    .pairing-caps-section {

        min-height: auto;

    }

    .pairing-caps-section .chrome-header {

        min-height: 70px;

        padding-block: .85rem;

    }

    .pairing-caps-section .chrome-tagline {

        display: none;

    }

    .pairing-caps-main {

        padding-block: 4.5rem 5rem;

    }

    .pairing-caps-heading h1 {

        font-size: clamp(2.2rem, 10vw, 3.6rem);

    }

    .pairing-caps-intro {

        font-size: .95rem;

    }

    .grid-table-scroll {

        border-bottom: 1px solid rgba(90, 58, 42, .2);

    }

    .caps-grid-table {

        min-width: 960px;

    }

    .table-scroll-hint {

        display: block;

    }

    .pairing-caps-summary {

        font-size: .68rem;

        letter-spacing: .08em;

    }

    .pairing-caps-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .pairing-caps-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    MOBILE
==================================================*/

@media (max-width: 520px) {

    .pairing-caps-section .chrome-header {

        min-height: 64px;

        padding-inline: 1.1rem;

    }

    .pairing-caps-section .chrome-logo {

        font-size: 1.3rem;

        letter-spacing: 2px;

    }

    .pairing-caps-section .chrome-page-num {

        font-size: .55rem;

        letter-spacing: 2px;

    }

    .pairing-caps-main {

        padding-block: 3.75rem 4.5rem;

    }

    .pairing-caps-kicker {

        font-size: .62rem;

        letter-spacing: .16em;

    }

    .pairing-caps-heading h1 {

        font-size: 2rem;

    }

    .pairing-caps-rule {

        width: 3.5rem;

    }

    .pairing-caps-intro {

        font-size: .85rem;

    }

    .caps-grid-table {

        min-width: 900px;

    }

    .grid-head .grid-cell {

        min-height: 56px;

        padding-inline: .3rem;

        font-size: .58rem;

        letter-spacing: .06em;

    }

    .grid-label-head {

        padding-left: 1rem;

    }

    .grid-cell {

        min-height: 60px;

        padding: .6rem .3rem;

        font-size: .78rem;

    }

    .grid-label {

        padding-left: 1rem;

    }

    .grid-label span {

        font-size: .95rem;

    }

    .row-dark .grid-label span {

        font-size: 1rem;

    }

    .grid-supreme-cell {

        padding-right: 1rem;

        font-size: .95rem;

    }

    .supreme-final {

        font-size: 1.05rem;

    }

    .pairing-caps-summary {

        padding: .9rem .8rem;

        font-size: .58rem;

        line-height: 1.5;

    }

}

/*==================================================
                  SMALL MOBILE
==================================================*/

@media (max-width: 380px) {

    .pairing-caps-heading h1 {

        font-size: 1.75rem;

    }

    .caps-grid-table {

        min-width: 850px;

    }

}

/*==================================================
              REPURCHASE BONUS SECTION
                (COMPLETE STYLESHEET)
==================================================*/

.repurchase-bonus-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: var(--cream);

    color: var(--ink);

}

.repurchase-bonus-section::before {

    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background: url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    opacity: .06;

    pointer-events: none;

}

/*==================================================
                  HEADER CHROME
==================================================*/

.repurchase-bonus-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 90px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: linear-gradient(
        90deg,
        var(--espresso) 0%,
        var(--espresso-2) 100%
    );

    border-bottom: 3px solid var(--gold);

}

.repurchase-bonus-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: 3px;

    color: var(--gold);
    text-decoration: none;

}

.repurchase-bonus-section .chrome-logo .reg {

    font-size: .45em;
    vertical-align: super;

    color: var(--gold-light);

}

.repurchase-bonus-section .chrome-tagline {

    margin-left: 24px;
    padding-left: 24px;

    border-left: 1px solid var(--gold);

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: 2px;

    color: var(--cream-2);
    text-transform: uppercase;

}

.repurchase-bonus-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, .95rem);
    font-weight: 500;

    letter-spacing: 4px;

    color: var(--gold-light);

    white-space: nowrap;

}

/*==================================================
                    MAIN AREA
==================================================*/

.repurchase-bonus-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(4rem, 7vw, 7rem) var(--page-gutter);

}

.repurchase-bonus-container {

    width: min(100%, 1550px);

    margin-inline: auto;

}

/*==================================================
                    HEADING
==================================================*/

.repurchase-bonus-heading {

    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);

}

.repurchase-bonus-kicker {

    margin: 0 0 1.25rem;

    font-family: var(--font-sans);
    font-size: clamp(.7rem, 1vw, 1rem);
    font-weight: 600;

    letter-spacing: clamp(.2em, .4vw, .55em);

    color: var(--red-brown);

    text-transform: uppercase;

}

.repurchase-bonus-heading h1 {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(3.5rem, 8vw, 7.5rem);
    font-weight: 800;
    line-height: .95;

    color: var(--espresso);

}

.repurchase-bonus-rule {

    width: clamp(5rem, 8vw, 7.5rem);
    height: 4px;

    margin: 2rem 0 1.5rem;

    background: var(--gold);

}

.repurchase-bonus-intro {

    max-width: 1100px;

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.35vw, 1.35rem);
    line-height: 1.55;

    color: var(--muted);

}

/*==================================================
                  CARDS GRID
==================================================*/

.repurchase-cards-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: clamp(1rem, 2vw, 1.5rem);

    align-items: stretch;

}

/*==================================================
                REPURCHASE CARDS
==================================================*/

.repurchase-card {

    display: flex;
    flex-direction: column;

    min-height: 460px;

    padding: clamp(1.75rem, 3vw, 2.5rem);

}

.repurchase-card-label {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .9rem);
    font-weight: 600;

    letter-spacing: .28em;

    text-transform: uppercase;

}

.repurchase-card-rate {

    margin-top: clamp(1.5rem, 3vw, 2.25rem);

    font-family: var(--font-serif);
    font-size: clamp(5.5rem, 9vw, 9.5rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: -.05em;

}

.repurchase-card-rate span {

    font-size: .5em;
    vertical-align: top;

    letter-spacing: -.02em;

}

.repurchase-card-divider {

    width: 60px;
    height: 2px;

    margin-top: auto;
    margin-bottom: 1.5rem;

}

.repurchase-card h2 {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 2.2vw, 2rem);
    font-weight: 700;
    line-height: 1.2;

}

.repurchase-card-description {

    margin: .75rem 0 0;

    font-family: var(--font-sans);
    font-size: clamp(.9rem, 1.1vw, 1.15rem);
    line-height: 1.45;

}

/*==================================================
              CARD 1: DARK / GOLD RATE
==================================================*/

.repurchase-card-dark {

    background: var(--espresso);

}

.repurchase-card-dark .repurchase-card-label {

    color: var(--gold);

}

.repurchase-card-dark .repurchase-card-rate {

    color: var(--gold);

}

.repurchase-card-dark .repurchase-card-divider {

    background: var(--gold);

}

.repurchase-card-dark h2 {

    color: var(--cream);

}

.repurchase-card-dark .repurchase-card-description {

    color: var(--gold-light);

}

/*==================================================
              CARD 2: LIGHT / RED-BROWN RATE
==================================================*/

.repurchase-card-light {

    background: var(--cream-2);

    border-top: 6px solid var(--red-brown);

}

.repurchase-card-light .repurchase-card-label {

    color: var(--red-brown);

}

.repurchase-card-light .repurchase-card-rate {

    color: var(--red-brown);

}

.repurchase-card-light .repurchase-card-divider {

    background: var(--red-brown);

}

.repurchase-card-light h2 {

    color: var(--espresso);

}

.repurchase-card-light .repurchase-card-description {

    color: var(--ink);

}

/*==================================================
              CARD 3: SUPREME GRADIENT
==================================================*/

.repurchase-card-supreme {

    background: linear-gradient(
        180deg,
        var(--red-brown) 0%,
        var(--near-black) 100%
    );

}

.repurchase-card-supreme .repurchase-card-label {

    color: var(--gold);

}

.repurchase-card-supreme .repurchase-card-rate {

    color: var(--gold);

}

.repurchase-card-supreme .repurchase-card-divider {

    background: var(--gold);

}

.repurchase-card-supreme h2 {

    color: var(--cream);

}

.repurchase-card-supreme .repurchase-card-description {

    color: var(--gold-light);

}

/*==================================================
                    BOTTOM NOTE
==================================================*/

.repurchase-bonus-note {

    margin: clamp(2rem, 4vw, 3rem) 0 0;

    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.35vw, 1.35rem);
    font-style: italic;
    line-height: 1.4;
    text-align: center;

    color: var(--muted);

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.repurchase-bonus-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: var(--near-black);

}

.repurchase-bonus-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.repurchase-bonus-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.repurchase-bonus-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1150px) {

    .repurchase-bonus-main {

        padding-block: 5rem;

    }

    .repurchase-cards-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

    .repurchase-card {

        min-height: 420px;

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 800px) {

    .repurchase-bonus-section {

        min-height: auto;

    }

    .repurchase-bonus-section .chrome-header {

        min-height: 70px;

        padding-block: .85rem;

    }

    .repurchase-bonus-section .chrome-tagline {

        display: none;

    }

    .repurchase-bonus-main {

        padding-block: 4.5rem 5.5rem;

    }

    .repurchase-bonus-heading h1 {

        font-size: clamp(3.3rem, 14vw, 6rem);

    }

    .repurchase-cards-grid {

        grid-template-columns: 1fr;

        gap: 1.25rem;

    }

    .repurchase-card {

        min-height: 380px;

    }

    .repurchase-card-rate {

        font-size: clamp(4.5rem, 18vw, 7rem);

    }

    .repurchase-bonus-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .repurchase-bonus-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    MOBILE
==================================================*/

@media (max-width: 560px) {

    .repurchase-bonus-section .chrome-header {

        min-height: 64px;

        padding-inline: 1.1rem;

    }

    .repurchase-bonus-section .chrome-logo {

        font-size: 1.3rem;

        letter-spacing: 2px;

    }

    .repurchase-bonus-section .chrome-page-num {

        font-size: .55rem;

        letter-spacing: 2px;

    }

    .repurchase-bonus-main {

        padding-block: 3.75rem 4.5rem;

    }

    .repurchase-bonus-kicker {

        font-size: .65rem;

        letter-spacing: .18em;

    }

    .repurchase-bonus-heading h1 {

        font-size: 2.8rem;

    }

    .repurchase-bonus-rule {

        width: 4.5rem;
        height: 3px;

    }

    .repurchase-bonus-intro {

        font-size: .95rem;

    }

    .repurchase-card {

        min-height: 0;

        padding: 1.5rem;

    }

    .repurchase-card-rate {

        margin-top: 1.25rem;

        font-size: 4.5rem;

    }

    .repurchase-card-divider {

        margin-top: 1.75rem;
        margin-bottom: 1.25rem;

    }

    .repurchase-card h2 {

        font-size: 1.5rem;

    }

    .repurchase-card-description {

        font-size: .92rem;

    }

    .repurchase-bonus-note {

        font-size: 1.1rem;

    }

}

/*==================================================
                  SMALL MOBILE
==================================================*/

@media (max-width: 380px) {

    .repurchase-bonus-heading h1 {

        font-size: 2.45rem;

    }

    .repurchase-card-rate {

        font-size: 3.9rem;

    }

}

/*==================================================
              RANKS TABLE SECTION
                (COMPLETE STYLESHEET)
==================================================*/

.ranks-table-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: #f5ede0;

    color: #1f1410;

}

.ranks-table-section::before {

    content: "";

    position: absolute;
    inset: 0;

    background: url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    opacity: .05;

    pointer-events: none;

}

/*==================================================
                  HEADER CHROME
==================================================*/

.ranks-table-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: #1f1410;

}

.ranks-table-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: .2em;

    color: #c8a25c;
    text-decoration: none;

}

.ranks-table-section .chrome-logo .reg {

    font-size: .5em;
    vertical-align: top;

    color: #eadfca;

}

.ranks-table-section .chrome-tagline {

    margin-left: 20px;
    padding-left: 20px;

    border-left: 1px solid #c8a25c;

    font-family: var(--font-sans);
    font-size: clamp(.62rem, .85vw, .8rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: .18em;

    color: #eadfca;
    text-transform: uppercase;

}

.ranks-table-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.62rem, .85vw, .8rem);
    font-weight: 500;

    letter-spacing: .18em;

    color: #eadfca;

    white-space: nowrap;
    text-align: right;

}

/*==================================================
                    MAIN AREA
==================================================*/

.ranks-table-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(2.5rem, 5vw, 4rem) var(--page-gutter);

}

.ranks-table-container {

    width: min(100%, 1800px);

    margin-inline: auto;

}

/*==================================================
                    HEADING
==================================================*/

.ranks-table-heading {

    max-width: 1200px;

    margin: 0 auto clamp(2rem, 4vw, 3rem);

    text-align: center;

}

.ranks-table-kicker {

    margin: 0 0 1rem;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .9vw, .95rem);
    font-weight: 600;

    letter-spacing: clamp(.18em, .4vw, .5em);

    color: #7a2e28;

    text-transform: uppercase;

}

.ranks-table-heading h1 {

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 5.5vw, 4.6rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: -.02em;

    color: #1f1410;

}

.ranks-table-rule {

    width: clamp(4rem, 6vw, 7rem);
    height: 3px;

    margin: 1.75rem auto 0;

    background: #c8a25c;

}

/*==================================================
                  RANK CARD GRID
==================================================*/

.ranks-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: clamp(1rem, 1.5vw, 1.5rem);

}

/*==================================================
                    RANK CARDS
==================================================*/

.rank-card {

    position: relative;

    min-height: 355px;

    display: flex;
    flex-direction: column;

    padding: clamp(1.25rem, 2vw, 1.9rem);

    box-sizing: border-box;

}

.rank-number {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.62rem, .8vw, .8rem);
    font-weight: 700;

    letter-spacing: .3em;

    text-transform: uppercase;

}

.rank-card h2 {

    margin: .4rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 2.8vw, 2.75rem);
    font-weight: 800;
    line-height: 1;

}

.rank-divider {

    width: 40px;
    height: 2px;

    margin-top: .9rem;

}

.rank-field-label {

    margin: 1rem 0 0;

    font-family: var(--font-sans);
    font-size: clamp(.62rem, .8vw, .82rem);
    font-weight: 500;

    letter-spacing: .22em;

    text-transform: uppercase;

}

.rank-pv {

    margin: .15rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.1vw, 2.1rem);
    font-weight: 800;
    line-height: 1.1;

}

.rank-reward {

    margin: .15rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 1.5vw, 1.55rem);
    font-weight: 800;
    line-height: 1.2;

}

.reward-note {

    display: block;

    margin-top: .3rem;

    font-family: var(--font-sans);
    font-size: clamp(.72rem, .9vw, .93rem);
    font-weight: 500;

}

/*==================================================
              LIGHT CARDS (Copper–Gold)
==================================================*/

.rank-light {

    background: #fff;

    box-shadow: 0 6px 18px rgba(31, 20, 16, .08);

}

.rank-light .rank-number {

    color: var(--rank-accent);

}

.rank-light h2 {

    color: #1f1410;

}

.rank-light .rank-divider {

    background: var(--rank-accent);

}

.rank-light .rank-field-label {

    color: #8b7160;

}

.rank-light .rank-pv {

    color: #3b2418;

}

.rank-light .rank-reward {

    color: #7a2e28;
}

.reward-note {

    color: #8b7160;

}

.rank-copper {

    --rank-accent: #b87333;
    border-top: 6px solid #b87333;

}

.rank-bronze {

    --rank-accent: #a0522d;
    border-top: 6px solid #a0522d;

}

.rank-silver {

    --rank-accent: #8b7160;
    border-top: 6px solid #a8a9ad;

}

.rank-gold {

    --rank-accent: #c8a25c;
    border-top: 6px solid #c8a25c;

}

/*==================================================
          DARK CARDS (Comfort, Diamond)
==================================================*/

.rank-dark {

    background: #3b2418;

    border-top: 6px solid #c8a25c;

}

.rank-dark .rank-number {

    color: #c8a25c;

}

.rank-dark h2 {

    color: #f5ede0;

}

.rank-dark .rank-divider {

    background: #c8a25c;

}

.rank-dark .rank-field-label {

    color: #eadfca;

}

.rank-dark .rank-pv {

    color: #f5ede0;

}

.rank-reward-gold {

    color: #e4c489 !important;

}

/*==================================================
                  ROYALTY CARD
==================================================*/

.rank-royalty {

    background: #7a2e28;

    border-top: 6px solid #e4c489;

}

.rank-royalty .rank-number {

    color: #e4c489;

}

.rank-royalty h2 {

    color: #f5ede0;

}

.rank-royalty .rank-divider {

    background: #e4c489;

}

.rank-royalty .rank-field-label {

    color: #eadfca;

}

.rank-royalty .rank-pv {

    color: #f5ede0;

}

/*==================================================
                    KING CARD
==================================================*/

.rank-king {

    padding: 0;

    background: linear-gradient(180deg, #c8a25c 0%, #8b6d3a 100%);

    border-top: 6px solid #1f1410;

}

.rank-king-flag {

    min-height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #1f1410;

    font-family: var(--font-sans);
    font-size: .62rem;
    font-weight: 700;

    letter-spacing: .3em;

    color: #e4c489;

}

.rank-king-body {

    padding: clamp(1.25rem, 2vw, 1.9rem);

}

.rank-king-body .rank-number,
.rank-king-body .rank-field-label {

    color: #3b2418;

}

.rank-king-body h2 {

    color: #1f1410;

}

.rank-king-body .rank-divider {

    background: #1f1410;

}

.rank-king-body .rank-pv,
.rank-king-body .rank-reward {

    color: #1f1410;

}

/*==================================================
                  SUMMARY BAR
==================================================*/

.ranks-table-summary {

    width: 100%;

    padding: 1rem clamp(1rem, 3vw, 2rem);

    background: #c8a25c;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, 1vw, .95rem);
    font-weight: 600;

    letter-spacing: .18em;

    color: #1f1410;

    text-align: center;
    text-transform: uppercase;

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.ranks-table-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: #1f1410;

}

.ranks-table-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.ranks-table-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.ranks-table-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1250px) {

    .ranks-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

    .rank-card {

        min-height: 330px;

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 800px) {

    .ranks-table-section {

        min-height: auto;

    }

    .ranks-table-main {

        padding-block: 2.5rem 3rem;

    }

    .ranks-table-heading h1 {

        font-size: clamp(2.2rem, 10vw, 3.4rem);

    }

    .ranks-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: .85rem;

    }

    .rank-card {

        min-height: 300px;

        padding: 1.25rem;
    }

    .rank-card h2 {

        font-size: 1.8rem;

    }

    .rank-pv {

        font-size: 1.35rem;

    }

    .rank-reward {

        font-size: 1.05rem;

    }

    .ranks-table-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .ranks-table-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    MOBILE
==================================================*/

@media (max-width: 560px) {

    .ranks-table-section .chrome-header {

        min-height: 56px;

        padding-inline: 1.1rem;

    }

    .ranks-table-section .chrome-logo {

        font-size: 1.05rem;

        letter-spacing: .12em;

    }

    .ranks-table-section .chrome-tagline {

        display: none;

    }

    .ranks-table-section .chrome-page-num {

        font-size: .52rem;

        letter-spacing: .1em;

    }

    .ranks-table-main {

        padding-block: 2.25rem 2.5rem;

    }

    .ranks-table-kicker {

        font-size: .6rem;

        letter-spacing: .16em;

    }

    .ranks-table-heading h1 {

        font-size: 2rem;

    }

    .ranks-grid {

        grid-template-columns: 1fr;

        gap: .85rem;

    }

    .rank-card {

        min-height: 0;

    }

    .rank-king-body {

        padding: 1.25rem;

    }

    .ranks-table-summary {

        font-size: .58rem;

        letter-spacing: .1em;

    }

}

/*==================================================
                  SMALL MOBILE
==================================================*/

@media (max-width: 380px) {

    .ranks-table-heading h1 {

        font-size: 1.75rem;

    }

    .rank-card h2 {

        font-size: 1.6rem;

    }

}

/*==================================================
              STOCKIST EARNINGS SECTION
                (COMPLETE STYLESHEET)
==================================================*/

.stockist-earnings-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: #f5ede0;

    color: #1f1410;

}

.stockist-earnings-section::before {

    content: "";

    position: absolute;
    inset: 0;

    background: url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    opacity: .05;

    pointer-events: none;

}

/*==================================================
                  HEADER CHROME
==================================================*/

.stockist-earnings-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: #1f1410;

}

.stockist-earnings-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: .2em;

    color: #c8a25c;
    text-decoration: none;

}

.stockist-earnings-section .chrome-logo .reg {

    font-size: .5em;
    vertical-align: top;

    color: #eadfca;

}

.stockist-earnings-section .chrome-tagline {

    margin-left: 20px;
    padding-left: 20px;

    border-left: 1px solid #c8a25c;

    font-family: var(--font-sans);
    font-size: clamp(.62rem, .85vw, .8rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: .18em;

    color: #eadfca;
    text-transform: uppercase;

}

.stockist-earnings-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.62rem, .85vw, .8rem);
    font-weight: 500;

    letter-spacing: .16em;

    color: #eadfca;

    white-space: nowrap;
    text-align: right;

}

/*==================================================
                    MAIN AREA
==================================================*/

.stockist-earnings-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(3rem, 6vw, 5.5rem) var(--page-gutter);

}

.stockist-earnings-container {

    width: min(100%, 1800px);

    margin-inline: auto;

}

/*==================================================
                    HEADING
==================================================*/

.stockist-earnings-heading {

    margin-bottom: clamp(2.5rem, 5vw, 4rem);

}

.stockist-earnings-kicker {

    margin: 0 0 1rem;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .95vw, 1rem);
    font-weight: 600;

    letter-spacing: clamp(.2em, .4vw, .55em);

    color: #7a2e28;

    text-transform: uppercase;

}

.stockist-earnings-heading h1 {

    max-width: 1400px;

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(2.8rem, 6vw, 6rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: -.02em;

    color: #1f1410;

}

.stockist-earnings-rule {

    width: clamp(5rem, 8vw, 9rem);
    height: 4px;

    margin: 1.75rem 0 1.5rem;

    background: #c8a25c;

}

.stockist-earnings-intro {

    max-width: 1300px;

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.95rem, 1.25vw, 1.3rem);
    line-height: 1.55;

    color: #5a3a2a;

}

/*==================================================
                  STREAM CARDS GRID
==================================================*/

.stockist-cards-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: clamp(1rem, 2vw, 1.5rem);

    align-items: stretch;

}

/*==================================================
                    STOCKIST CARDS
==================================================*/

.stockist-card {

    display: flex;
    flex-direction: column;

    min-height: 540px;

    box-sizing: border-box;

}

.stockist-card-header {

    min-height: 110px;

    padding: clamp(1.25rem, 2vw, 1.6rem) clamp(1.25rem, 2vw, 1.6rem);

    box-sizing: border-box;

}

.stockist-stream-label {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.62rem, .8vw, .8rem);
    font-weight: 700;

    letter-spacing: .28em;

}

.stockist-card-header h2 {

    margin: .4rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.2vw, 2.1rem);
    font-weight: 800;
    line-height: 1.1;

}

.stockist-card-subtitle {

    margin: .5rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.3vw, 1.35rem);
    font-weight: 700;

    color: #fff;

}

.stockist-card-body {

    flex: 1;

    display: flex;
    flex-direction: column;

    padding: clamp(1.25rem, 2vw, 1.9rem);

}

.stockist-rate-label {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.62rem, .85vw, .82rem);
    font-weight: 600;

    letter-spacing: .22em;

}

.stockist-rate {

    margin-top: .5rem;

    font-family: var(--font-serif);
    font-size: clamp(4.5rem, 8vw, 9rem);
    font-weight: 900;
    line-height: 1;

    letter-spacing: -.04em;

}

.stockist-rate span {

    font-size: .5em;
    vertical-align: top;

}

.stockist-card-divider {

    width: 60px;
    height: 3px;

    margin-top: auto;
    margin-bottom: 1.25rem;

    background: #c8a25c;

}

.stockist-card-description {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.9rem, 1.1vw, 1.15rem);
    line-height: 1.5;

}

/*==================================================
              STREAM 08: REFERRAL (RED-BROWN)
==================================================*/

.stockist-card-referral {

    background: #fff;

    box-shadow: 0 8px 24px rgba(31, 20, 16, .08);

}

.stockist-card-referral .stockist-card-header {

    background: #7a2e28;

}

.stockist-card-referral .stockist-stream-label {

    color: #e4c489;

}

.stockist-card-referral .stockist-card-header h2 {

    color: #f5ede0;

}

.stockist-card-referral .stockist-rate-label {

    color: #8b7160;

}

.stockist-card-referral .stockist-rate {

    color: #7a2e28;

}

.stockist-card-referral .stockist-card-description {

    color: #3b2418;

}

.stockist-card-referral .stockist-card-description strong {

    color: #7a2e28;

}

/*==================================================
              STREAM 09: CASH-BACK (DARK)
==================================================*/

.stockist-card-cashback {

    background: #fff;

    box-shadow: 0 8px 24px rgba(31, 20, 16, .08);

}

.stockist-card-cashback .stockist-card-header {

    background: #3b2418;

}

.stockist-card-cashback .stockist-stream-label {

    color: #c8a25c;

}

.stockist-card-cashback .stockist-card-header h2 {

    color: #f5ede0;

}

.stockist-card-cashback .stockist-rate-label {

    color: #8b7160;

}

.stockist-card-cashback .stockist-rate {

    color: #1f1410;

}

.stockist-card-cashback .stockist-card-description {

    color: #3b2418;

}

.stockist-card-cashback .stockist-card-description strong {

    color: #7a2e28;

}

/*==================================================
          STREAM 10: COMMISSION (BLACK/GOLD)
==================================================*/

.stockist-card-commission {

    background: #1f1410;

}

.stockist-card-commission .stockist-card-header {

    background: #c8a25c;

}

.stockist-card-commission .stockist-stream-label {

    color: #1f1410;

}

.stockist-card-commission .stockist-card-header h2 {

    color: #1f1410;

}

.stockist-card-commission .stockist-rate-label {

    color: #c8a25c;

}

.stockist-card-commission .stockist-rate {

    color: #e4c489;

}

.stockist-card-commission .stockist-card-divider {

    background: #c8a25c;

}

.stockist-card-commission .stockist-card-description {

    color: #eadfca;

}

.stockist-card-commission .stockist-card-description strong {

    color: #e4c489;

}

/*==================================================
                  SUMMARY BAR
==================================================*/

.stockist-earnings-summary {

    width: 100%;

    padding: 1rem clamp(1rem, 3vw, 2rem);

    background: #c8a25c;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, 1vw, .95rem);
    font-weight: 600;

    letter-spacing: .18em;

    color: #1f1410;

    text-align: center;
    text-transform: uppercase;

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.stockist-earnings-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: #1f1410;

}

.stockist-earnings-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.stockist-earnings-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.stockist-earnings-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1100px) {

    .stockist-earnings-main {

        padding-block: 4.5rem;

    }

    .stockist-cards-grid {

        grid-template-columns: 1fr;

        max-width: 700px;

        margin-inline: auto;

        gap: 1.5rem;

    }

    .stockist-card {

        min-height: 480px;

    }

    .stockist-rate {

        font-size: clamp(4rem, 14vw, 6rem);

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 800px) {

    .stockist-earnings-section {

        min-height: auto;

    }

    .stockist-earnings-main {

        padding-block: 3.5rem 4.5rem;

    }

    .stockist-earnings-heading h1 {

        font-size: clamp(2.3rem, 10vw, 4rem);

    }

    .stockist-earnings-intro {

        font-size: 1rem;

    }

    .stockist-card {

        min-height: 420px;

    }

    .stockist-card-header {

        min-height: 90px;

    }

    .stockist-card-header h2 {

        font-size: 1.5rem;

    }

    .stockist-earnings-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .stockist-earnings-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    MOBILE
==================================================*/

@media (max-width: 560px) {

    .stockist-earnings-section .chrome-header {

        min-height: 56px;

        padding-inline: 1.1rem;

    }

    .stockist-earnings-section .chrome-logo {

        font-size: 1.05rem;

        letter-spacing: .12em;

    }

    .stockist-earnings-section .chrome-tagline {

        display: none;

    }

    .stockist-earnings-section .chrome-page-num {

        font-size: .5rem;

        letter-spacing: .08em;

    }

    .stockist-earnings-main {

        padding-block: 3rem 3.5rem;

    }

    .stockist-earnings-kicker {

        font-size: .6rem;

        letter-spacing: .16em;

    }

    .stockist-earnings-heading h1 {

        font-size: 2.1rem;

    }

    .stockist-earnings-rule {

        width: 4.5rem;
        height: 3px;

    }

    .stockist-earnings-intro {

        font-size: .92rem;

    }

    .stockist-card {

        min-height: 0;

    }

    .stockist-card-body {

        padding: 1.25rem;

    }

    .stockist-rate {

        font-size: 3.75rem;

    }

    .stockist-card-description {

        font-size: .9rem;

    }

    .stockist-earnings-summary {

        font-size: .58rem;

        letter-spacing: .1em;

    }

}

/*==================================================
                  SMALL MOBILE
==================================================*/

@media (max-width: 380px) {

    .stockist-earnings-heading h1 {

        font-size: 1.85rem;

    }

    .stockist-rate {

        font-size: 3.2rem;

    }

}

/*==================================================
              STOCKIST PACKAGES SECTION
                (COMPLETE STYLESHEET)
==================================================*/

.stockist-packages-section {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100svh;

    overflow: hidden;

    background: #f5ede0;

    color: #1f1410;

}

.stockist-packages-section::before {

    content: "";

    position: absolute;
    inset: 0;

    background: url("../assets/coffee-beans-bg.jpg") center / cover no-repeat;

    opacity: .05;

    pointer-events: none;

}

/*==================================================
                  HEADER CHROME
==================================================*/

.stockist-packages-section .chrome-header {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 0 clamp(1.25rem, 5vw, 3.75rem);

    background: #1f1410;

}

.stockist-packages-section .chrome-logo {

    flex: 0 0 auto;

    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: .2em;

    color: #c8a25c;
    text-decoration: none;

}

.stockist-packages-section .chrome-logo .reg {

    font-size: .5em;
    vertical-align: top;

    color: #eadfca;

}

.stockist-packages-section .chrome-tagline {

    margin-left: 20px;
    padding-left: 20px;

    border-left: 1px solid #c8a25c;

    font-family: var(--font-sans);
    font-size: clamp(.62rem, .85vw, .8rem);
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: .18em;

    color: #eadfca;
    text-transform: uppercase;

}

.stockist-packages-section .chrome-page-num {

    margin-left: auto;

    font-family: var(--font-sans);
    font-size: clamp(.62rem, .85vw, .8rem);
    font-weight: 500;

    letter-spacing: .16em;

    color: #eadfca;

    white-space: nowrap;
    text-align: right;

}

/*==================================================
                    MAIN AREA
==================================================*/

.stockist-packages-main {

    position: relative;
    z-index: 1;

    flex: 1;

    width: 100%;

    padding: clamp(3rem, 6vw, 5.5rem) var(--page-gutter);

}

.stockist-packages-container {

    width: min(100%, 1900px);

    margin-inline: auto;

}

/*==================================================
                    HEADING
==================================================*/

.stockist-packages-heading {

    margin-bottom: clamp(2rem, 4vw, 3.25rem);

}

.stockist-packages-kicker {

    margin: 0 0 1rem;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .95vw, 1rem);
    font-weight: 600;

    letter-spacing: clamp(.2em, .4vw, .55em);

    color: #7a2e28;

    text-transform: uppercase;

}

.stockist-packages-heading h1 {

    max-width: 1500px;

    margin: 0;

    font-family: var(--font-serif);
    font-size: clamp(2.8rem, 6vw, 6rem);
    font-weight: 800;
    line-height: 1;

    letter-spacing: -.02em;

    color: #1f1410;

}

.stockist-packages-rule {

    width: clamp(5rem, 8vw, 9rem);
    height: 4px;

    margin: 1.75rem 0 0;

    background: #c8a25c;

}

/*==================================================
                  PACKAGE GRID
==================================================*/

.stockist-packages-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: clamp(1rem, 2vw, 1.5rem);

    align-items: stretch;

}

/*==================================================
                  PACKAGE CARDS
==================================================*/

.stockist-package-card {

    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 640px;

    box-sizing: border-box;

}

.package-ribbon {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: fit-content;

    min-height: 50px;

    padding: 0 clamp(1.25rem, 2vw, 1.75rem);

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .85vw, .85rem);
    font-weight: 700;

    letter-spacing: .28em;

    white-space: nowrap;

}

.package-card-content {

    flex: 1;

    padding: clamp(1.5rem, 3vw, 2.5rem);

    box-sizing: border-box;

}

.package-tier-label {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .85vw, .85rem);
    font-weight: 600;

    letter-spacing: .28em;

}

.package-card-content h2 {

    margin: .5rem 0 0;

    font-family: var(--font-serif);
    font-size: clamp(2rem, 3.5vw, 4rem);
    font-weight: 800;
    line-height: 1;

}

.package-divider {

    width: 60px;
    height: 3px;

    margin: clamp(1.5rem, 3vw, 2rem) 0 clamp(1.25rem, 2vw, 1.75rem);

}

.package-activation-label {

    margin: 0;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, .85vw, .85rem);
    font-weight: 600;

    letter-spacing: .22em;

}

.package-activation-value {

    margin-top: .4rem;

    font-family: var(--font-serif);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 900;
    line-height: 1;

}

/*==================================================
                  BENEFITS LIST
==================================================*/

.package-benefits {

    display: flex;
    flex-direction: column;

    gap: clamp(.75rem, 1.5vw, 1rem);

    margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;

    padding: 0;

    list-style: none;

}

.package-benefits li {

    display: flex;
    align-items: flex-start;
    gap: .75rem;

    font-family: var(--font-sans);
    font-size: clamp(.9rem, 1.1vw, 1.2rem);
    line-height: 1.55;

}

.benefit-icon {

    flex: 0 0 auto;

    font-weight: 700;

}

.package-note {

    margin: clamp(1.25rem, 2vw, 1.5rem) 0 0;
    padding-top: clamp(.75rem, 1.5vw, 1rem);

    border-top: 1px solid rgba(234, 223, 202, .5);

    font-family: var(--font-sans);
    font-size: clamp(.85rem, 1.05vw, 1.1rem);
    font-style: italic;

    color: #8b7160;

}

/*==================================================
              STATE MEGA CARD (DARK/GOLD)
==================================================*/

.package-mega {

    background: #1f1410;

}

.package-mega .package-ribbon {

    background: #c8a25c;
    color: #1f1410;

}

.package-mega .package-tier-label {

    color: #c8a25c;

}

.package-mega h2 {

    color: #f5ede0;

}

.package-mega .package-divider {

    background: #c8a25c;

}

.package-mega .package-activation-label {

    color: #c8a25c;

}

.package-mega .package-activation-value {

    color: #e4c489;

}

.package-mega .package-benefits {

    color: #eadfca;

}

.package-mega .package-benefits strong {

    color: #f5ede0;

}

.package-mega .benefit-icon {

    color: #e4c489;

}

/*==================================================
              MINI STOCKIST CARD (LIGHT/RED)
==================================================*/

.package-mini {

    background: #fff;

    box-shadow: 0 8px 24px rgba(31, 20, 16, .08);
}

.package-mini .package-ribbon {

    background: #7a2e28;
    color: #f5ede0;

}

.package-mini .package-tier-label {

    color: #7a2e28;

}

.package-mini h2 {

    color: #1f1410;

}

.package-mini .package-divider {

    background: #7a2e28;

}

.package-mini .package-activation-label {

    color: #7a2e28;

}

.package-mini .package-activation-value {

    color: #7a2e28;

}

.package-mini .package-benefits {

    color: #3b2418;

}

.package-mini .package-benefits strong {

    color: #1f1410;

}

.package-mini .benefit-icon {

    color: #7a2e28;

}

/*==================================================
                  SUMMARY BAR
==================================================*/

.stockist-packages-summary {

    width: 100%;

    padding: 1rem clamp(1rem, 3vw, 2rem);

    background: #c8a25c;

    font-family: var(--font-sans);
    font-size: clamp(.65rem, 1vw, .95rem);
    font-weight: 600;

    letter-spacing: .18em;

    color: #1f1410;

    text-align: center;
    text-transform: uppercase;

}

/*==================================================
                  FOOTER CHROME
==================================================*/

.stockist-packages-section .chrome-footer {

    position: relative;
    inset: auto;

    z-index: 10;

    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;

    padding: 1rem clamp(1.25rem, 5vw, 3.75rem);

    background: #1f1410;

}

.stockist-packages-section .chrome-footer .foot-left {

    font-family: var(--font-sans);
    font-size: clamp(.68rem, .9vw, .95rem);
    line-height: 1.4;

    letter-spacing: 1.5px;

    color: var(--cream-2);

}

.stockist-packages-section .chrome-footer .gold {

    color: var(--gold);
    font-weight: 600;

}

.stockist-packages-section .chrome-footer .foot-right {

    margin-left: auto;

    font-family: var(--font-serif);
    font-size: clamp(.72rem, .95vw, 1rem);
    font-style: italic;
    line-height: 1.3;

    letter-spacing: 1px;

    color: var(--gold);

}

/*==================================================
                      TABLET
==================================================*/

@media (max-width: 1150px) {

    .stockist-packages-main {

        padding-block: 4.5rem;

    }

    .stockist-packages-grid {

        grid-template-columns: 1fr;

        max-width: 800px;

        margin-inline: auto;

        gap: 1.5rem;

    }

    .stockist-package-card {

        min-height: 0;

    }

}

/*==================================================
                  TABLET / MOBILE
==================================================*/

@media (max-width: 800px) {

    .stockist-packages-section {

        min-height: auto;

    }

    .stockist-packages-main {

        padding-block: 3.5rem 4.5rem;

    }

    .stockist-packages-heading h1 {

        font-size: clamp(2.3rem, 10vw, 4rem);

    }

    .package-card-content h2 {

        font-size: clamp(1.8rem, 6vw, 2.8rem);

    }

    .package-activation-value {

        font-size: clamp(2.5rem, 10vw, 3.75rem);

    }

    .stockist-packages-section .chrome-footer {

        align-items: flex-start;

        flex-direction: column;

        gap: .5rem;

    }

    .stockist-packages-section .chrome-footer .foot-right {

        margin-left: 0;

    }

}

/*==================================================
                    MOBILE
==================================================*/

@media (max-width: 560px) {

    .stockist-packages-section .chrome-header {

        min-height: 56px;

        padding-inline: 1.1rem;

    }

    .stockist-packages-section .chrome-logo {

        font-size: 1.05rem;

        letter-spacing: .12em;

    }

    .stockist-packages-section .chrome-tagline {

        display: none;

    }

    .stockist-packages-section .chrome-page-num {

        font-size: .5rem;

        letter-spacing: .08em;

    }

    .stockist-packages-main {

        padding-block: 3rem 3.5rem;

    }

    .stockist-packages-kicker {

        font-size: .6rem;

        letter-spacing: .16em;

    }

    .stockist-packages-heading h1 {

        font-size: 2.1rem;

    }

    .stockist-packages-rule {

        width: 4.5rem;
        height: 3px;

    }

    .package-ribbon {

        min-height: 42px;

        font-size: .62rem;

        letter-spacing: .18em;

    }

    .package-card-content {

        padding: 1.5rem;

    }

    .package-card-content h2 {

        font-size: 2rem;

    }

    .package-activation-value {

        font-size: 2.75rem;

    }

    .package-benefits li {

        font-size: .9rem;

    }

    .package-note {

        font-size: .85rem;

    }

    .stockist-packages-summary {

        font-size: .58rem;

        letter-spacing: .1em;

    }

}

/*==================================================
                  SMALL MOBILE
==================================================*/

@media (max-width: 380px) {

    .stockist-packages-heading h1 {

        font-size: 1.85rem;

    }

    .package-card-content h2 {

        font-size: 1.75rem;

    }

}

/*==================================================
                    JOIN SANTIZER
==================================================*/

    .join-section {

      padding: 150px 8% 90px;

      min-height: 100vh;

      box-sizing: border-box;

      background: #1a0e08;

      position: relative;

      overflow: hidden;

      isolation: isolate;

      color: #f5ecd7;

    }

    .join-section::before {

      content: "";

      position: absolute;

      inset: 0;

      z-index: -1;

      background:

        linear-gradient(180deg,

          rgba(26, 14, 8, .72) 0%,

          rgba(26, 14, 8, .55) 42%,

          rgba(26, 14, 8, .92) 100%),

        url("../assets/business-coffee.jpg") center / cover no-repeat;

      pointer-events: none;

    }

    .join-section .container {

      position: relative;

      z-index: 2;

      max-width: 1680px;

      margin: 0 auto;

    }

    /*==================================================
                    HEADER
==================================================*/

    .join-header {

      max-width: 1500px;

      margin: 0 auto;

      text-align: center;

    }

    .join-header .section-line {

      width: 75px;

      height: 4px;

      background: #d4af37;

      margin: 0 auto 30px;

    }

    .join-header .section-label {

      display: block;

      margin-bottom: 28px;

      font-family: "Inter", sans-serif;

      font-size: 1rem;

      font-weight: 500;

      letter-spacing: .45em;

      color: #d4af37;

      text-transform: uppercase;

    }

    .join-eyebrow {

      margin: 0 0 32px;

      font-family: "Inter", sans-serif;

      font-size: clamp(.9rem, 1.5vw, 1.35rem);

      font-weight: 500;

      letter-spacing: .5em;

      color: #d4af37;

      text-transform: uppercase;

    }

    .join-header h2 {

      margin: 0;

      font-family: "Playfair Display", serif;

      font-size: clamp(4rem, 10vw, 8.75rem);

      font-weight: 900;

      line-height: .88;

      color: #f5ecd7;

      text-shadow: 0 4px 20px rgba(0, 0, 0, .4);

    }

    .join-header h2 span {

      display: block;

      margin-top: 18px;

      font-size: .5em;

      font-style: italic;

      line-height: 1;

      color: #d4af37;

    }

    /*==================================================
                    DIVIDER
==================================================*/

    .join-divider {

      width: 200px;

      height: 2px;

      margin: 65px auto 30px;

      background: #d4af37;

    }

    /*==================================================
                    TAGLINE
==================================================*/

    .join-tagline {

      max-width: 1100px;

      margin: 0 auto;

      text-align: center;

      font-family: "Cormorant Garamond", serif;

      font-size: clamp(1.7rem, 3.5vw, 2.75rem);

      font-style: italic;

      line-height: 1.5;

      color: #e8d9b8;

    }

    /*==================================================
                    THREE PILLARS
==================================================*/

    .join-pillars {

      max-width: 1340px;

      margin: 95px auto 0;

      display: grid;

      grid-template-columns: repeat(3, minmax(0, 1fr));

      gap: 28px;

    }

    .join-pillar {

      min-height: 170px;

      box-sizing: border-box;

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: center;

      padding: 25px 20px;

      background: rgba(212, 175, 55, .1);

      border: 1px solid #d4af37;

      text-align: center;

      transition: .35s ease;

    }

    .join-pillar:hover {

      transform: translateY(-8px);

      background: rgba(212, 175, 55, .17);

      box-shadow: 0 20px 45px rgba(0, 0, 0, .25);

    }

    .join-pillar-value {

      display: block;

      font-family: "Playfair Display", serif;

      font-size: clamp(3.5rem, 5vw, 4.6rem);

      font-weight: 900;

      line-height: .9;

      color: #d4af37;

    }

    .join-infinity {

      font-size: clamp(4rem, 5.5vw, 5.2rem);

    }

    .join-pillar h3 {

      margin: 18px 0 0;

      font-family: "Inter", sans-serif;

      font-size: clamp(.85rem, 1.3vw, 1.1rem);

      font-weight: 500;

      letter-spacing: .18em;

      line-height: 1.35;

      color: #f5ecd7;

      text-transform: uppercase;

    }

    /*==================================================
                    CTA
==================================================*/

    .join-action {

      margin-top: 55px;

      text-align: center;

    }

    .join-cta {

      display: inline-flex;

      align-items: center;

      justify-content: center;

      min-width: 360px;

      min-height: 70px;

      box-sizing: border-box;

      padding: 20px 35px;

      background: #d4af37;

      box-shadow: 0 10px 30px rgba(212, 175, 55, .4);

      font-family: "Inter", sans-serif;

      font-size: clamp(.85rem, 1.3vw, 1.1rem);

      font-weight: 700;

      letter-spacing: .3em;

      line-height: 1.2;

      color: #1a0e08;

      text-decoration: none;

      text-transform: uppercase;

      transition: .35s ease;

    }

    .join-cta:hover {

      background: #e2c45b;

      transform: translateY(-5px);

      box-shadow: 0 18px 40px rgba(212, 175, 55, .55);

    }

    /*==================================================
                  RESPONSIVE STYLES
==================================================*/

    @media (max-width: 900px) {

      .join-section {

        padding: 120px 7% 75px;

      }

      .join-pillars {

        margin-top: 70px;

        gap: 18px;

      }

      .join-pillar {

        min-height: 150px;

      }

      .join-pillar h3 {

        letter-spacing: .1em;

      }

    }

    @media (max-width: 680px) {

      .join-section {

        padding: 100px 7% 65px;

      }

      .join-header .section-line {

        width: 55px;

        height: 3px;

        margin-bottom: 24px;

      }

      .join-header .section-label {

        font-size: .75rem;

        letter-spacing: .3em;

      }

      .join-eyebrow {

        margin-bottom: 25px;

        font-size: .75rem;

        letter-spacing: .3em;

        line-height: 1.5;

      }

      .join-header h2 {

        font-size: clamp(3.5rem, 16vw, 6rem);

      }

      .join-header h2 span {

        margin-top: 12px;

      }

      .join-divider {

        width: 130px;

        margin-top: 50px;

      }

      .join-tagline {

        font-size: 1.55rem;

      }

      .join-desktop-break {

        display: none;

      }

      .join-pillars {

        grid-template-columns: 1fr;

        max-width: 420px;

        margin-top: 58px;

        gap: 15px;

      }

      .join-pillar {

        min-height: 135px;

      }

      .join-pillar-value,

      .join-infinity {

        font-size: 3.8rem;

      }

      .join-pillar h3 {

        margin-top: 14px;

        font-size: .78rem;

        letter-spacing: .12em;

      }

      .join-action {

        margin-top: 38px;

      }

      .join-cta {

        width: 100%;

        min-width: 0;

        min-height: 62px;

        padding: 18px 15px;

        font-size: .75rem;

        letter-spacing: .2em;

      }

    }

    @media (max-width: 420px) {

      .join-section {

        padding: 80px 6% 55px;

      }

      .join-header h2 {

        font-size: 3.25rem;

      }

      .join-header .section-label {

        font-size: .65rem;

        letter-spacing: .2em;

      }

      .join-eyebrow {

        font-size: .68rem;

        letter-spacing: .22em;

      }

      .join-tagline {

        font-size: 1.35rem;

      }

      .join-pillar-value,

      .join-infinity {

        font-size: 3.5rem;

      }

      .join-cta {

        font-size: .68rem;

        letter-spacing: .14em;

      }

    }

    /*==================================================
                    THANK YOU
==================================================*/

    .thank-you-section {

      min-height: 100svh;

      box-sizing: border-box;

      padding: 100px 0 38px;

      position: relative;

      overflow: hidden;

      isolation: isolate;

      background: #1a0e08;

      color: #f5ecd7;

    }

    .thank-you-background {

      position: absolute;

      inset: 0;

      z-index: -2;

    }

    .thank-you-background img {

      display: block;

      width: 100%;

      height: 100%;

      object-fit: cover;

      filter: brightness(.4) saturate(1.15);

    }

    .thank-you-overlay {

      position: absolute;

      inset: 0;

      z-index: -1;

      background: radial-gradient(ellipse at 50% 55%,

          rgba(26, 14, 8, .35) 0%,

          rgba(26, 14, 8, .9) 80%);

      pointer-events: none;

    }

    .thank-you-inner {

      width: min(1680px, 87.5%);

      min-height: 100%;

      margin: 0 auto;

      display: flex;

      flex-direction: column;

      align-items: center;

      text-align: center;

    }

    /*==================================================
                      GOLD RULES
==================================================*/

    .thank-you-rule {

      width: 100%;

      height: 1px;

      flex: 0 0 auto;

      background: linear-gradient(to right,

          transparent,

          #d4af37 20%,

          #d4af37 80%,

          transparent);

    }

    .thank-you-rule-top {

      margin-bottom: 18px;

    }

    .thank-you-rule-bottom {

      margin-top: 78px;

    }

    /*==================================================
                    EYEBROW
==================================================*/

    .thank-you-eyebrow {

      margin: 0;

      font-family: "Inter", sans-serif;

      font-size: clamp(.8rem, 1.2vw, 1.25rem);

      font-weight: 500;

      letter-spacing: .6em;

      line-height: 1.4;

      color: #d4af37;

      text-transform: uppercase;

    }

    /*==================================================
                    MAIN TITLE
==================================================*/

    .thank-you-inner h1 {

      margin: 190px 0 0;

      font-family: "Playfair Display", serif;

      font-size: clamp(4.5rem, 10.4vw, 12.5rem);

      font-weight: 900;

      line-height: .95;

      letter-spacing: .02em;

      color: #f5ecd7;

      text-shadow: 0 4px 30px rgba(0, 0, 0, .6);

    }

    /*==================================================
                    ORNAMENT
==================================================*/

    .thank-you-ornament {

      width: 420px;

      max-width: 80%;

      display: flex;

      align-items: center;

      justify-content: center;

      gap: 34px;

      margin-top: 70px;

    }

    .thank-you-ornament span {

      flex: 1;

      height: 1px;

      background: #d4af37;

    }

    .thank-you-ornament i {

      flex: 0 0 auto;

      font-family: "Playfair Display", serif;

      font-size: 1.75rem;

      font-style: normal;

      line-height: 1;

      color: #d4af37;

    }

    /*==================================================
                    QUOTE
==================================================*/

    .thank-you-quote {

      margin: 30px 0 0;

      font-family: "Cormorant Garamond", serif;

      font-size: clamp(2rem, 4vw, 3.25rem);

      font-style: italic;

      font-weight: 400;

      line-height: 1.4;

      color: #e8d9b8;

    }

    /*==================================================
                  WORDMARK
==================================================*/

    .thank-you-wordmark {

      margin-top: 75px;

      text-align: center;

    }

    .wordmark-name {

      font-family: "Playfair Display", serif;

      font-size: clamp(3.5rem, 5vw, 6rem);

      font-weight: 900;

      line-height: 1;

      letter-spacing: .06em;

      color: #d4af37;

    }

    .wordmark-tagline {

      margin-top: 16px;

      font-family: "Inter", sans-serif;

      font-size: clamp(.8rem, 1.1vw, 1.25rem);

      font-weight: 400;

      letter-spacing: .4em;

      color: #c4a373;

      text-transform: uppercase;

    }

    /*==================================================
                    FOOTER
==================================================*/

    .thank-you-footer {

      margin: 18px 0 0;

      font-family: "Inter", sans-serif;

      font-size: clamp(.65rem, .85vw, .875rem);

      font-weight: 400;

      letter-spacing: .35em;

      line-height: 1.6;

      color: #8a7960;

      text-transform: uppercase;

    }

    .thank-you-footer span {

      padding: 0 9px;

      color: #d4af37;

    }

    /*==================================================
                  RESPONSIVE STYLES
==================================================*/

    @media (max-width: 1100px) {

      .thank-you-section {

        padding: 75px 0 32px;

      }

      .thank-you-inner h1 {

        margin-top: 125px;

      }

      .thank-you-ornament {

        margin-top: 58px;

      }

      .thank-you-wordmark {

        margin-top: 65px;

      }

      .thank-you-rule-bottom {

        margin-top: 65px;

      }

    }

    @media (max-width: 680px) {

      .thank-you-section {

        min-height: 100svh;

        padding: 65px 0 28px;

      }

      .thank-you-inner {

        width: 88%;

      }

      .thank-you-rule-top {

        margin-bottom: 16px;

      }

      .thank-you-eyebrow {

        font-size: .68rem;

        letter-spacing: .3em;

      }

      .thank-you-inner h1 {

        margin-top: 105px;

        font-size: clamp(3.8rem, 17vw, 6.5rem);

        line-height: .95;

      }

      .thank-you-ornament {

        width: 300px;

        max-width: 90%;

        gap: 22px;

        margin-top: 48px;

      }

      .thank-you-ornament i {

        font-size: 1.4rem;

      }

      .thank-you-quote {

        margin-top: 25px;

        font-size: clamp(1.65rem, 7vw, 2.4rem);

      }

      .thank-you-wordmark {

        margin-top: 58px;

      }

      .wordmark-name {

        font-size: clamp(2.8rem, 12vw, 4.5rem);

      }

      .wordmark-tagline {

        margin-top: 12px;

        font-size: .62rem;

        letter-spacing: .25em;

      }

      .thank-you-rule-bottom {

        margin-top: 58px;

      }

      .thank-you-footer {

        max-width: 340px;

        font-size: .58rem;

        letter-spacing: .16em;

      }

      .thank-you-footer span {

        padding: 0 4px;

      }

    }

    @media (max-width: 420px) {

      .thank-you-section {

        padding: 50px 0 24px;

      }

      .thank-you-inner h1 {

        margin-top: 85px;

        font-size: 3.5rem;

      }

      .thank-you-ornament {

        margin-top: 40px;

      }

      .thank-you-quote {

        font-size: 1.55rem;

      }

      .thank-you-wordmark {

        margin-top: 48px;

      }

      .wordmark-name {

        font-size: 2.7rem;

      }

      .wordmark-tagline {

        font-size: .55rem;

        letter-spacing: .18em;

      }

      .thank-you-rule-bottom {

        margin-top: 48px;

      }

    }

    /*==================================================
                  PRESENTATION PDF PRINT
==================================================*/

@page {
    size: 13.333in 7.5in;
    margin: 0;
}

@media print {

    html,
    body {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #1a0e08;
    }

    body {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    .slide {
        position: relative;

        width: 100% !important;
        height: 100vh !important;
        min-height: 0 !important;
        max-height: 100vh !important;

        margin: 0 !important;

        overflow: hidden !important;

        break-after: page;
        page-break-after: always;

        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .slide:last-of-type {
        break-after: auto;
        page-break-after: auto;
    }

    .slide *,
    .slide *::before,
    .slide *::after {
        animation: none !important;
        transition: none !important;
    }

    a {
        color: inherit;
        text-decoration: none;
    }
}