/* ==========================================================================
   Coffee Story — scroll-driven landing animation.
   ========================================================================== */

:root {
    --cs-cream: #f5efe6;
    --cs-cream-soft: rgba(245, 239, 230, 0.85);
    --cs-cream-faint: rgba(245, 239, 230, 0.55);
    --cs-espresso: #1a0f08;
    --cs-accent: #c56a2d;
    --cs-accent-dark: #9c4f1e;
}

/* --------------------------------------------------------------------------
   Break out of Blocksy's page container.

   Blocksy wraps page content in <main class="ct-container"> with a max-width
   and horizontal padding. We strip those wrappers back to zero when the
   coffee story is on the page, and full-bleed the story itself as a fallback.
   -------------------------------------------------------------------------- */

main:has(.coffee-story),
article:has(.coffee-story),
.ct-container:has(.coffee-story),
.entry-content:has(.coffee-story),
.entry-content>*:has(.coffee-story),
.ct-container-narrow:has(.coffee-story),
[class*="ct-container"]:has(.coffee-story) {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

body:has(.coffee-story) {
    overflow-x: hidden;
}

/* Hide Blocksy's page-title / hero banner on story pages so the animation
   starts at the very top of the viewport without a title bar above it. */
body:has(.coffee-story) .hero-section,
body:has(.coffee-story) [class*="hero-section"],
body:has(.coffee-story) .ct-breadcrumbs {
    display: none !important;
}

/* Remove the top gap Blocksy leaves for the content area. */
body:has(.coffee-story) [data-content-area-spacing],
body:has(.coffee-story) .ct-main-content,
body:has(.coffee-story) #main-container>main {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


.coffee-story {
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
    padding: 0;
    background: var(--cs-espresso);
    color: var(--cs-cream);
    font-family: inherit;
    /* Do NOT set overflow:hidden here — it breaks ScrollTrigger pinning. */
}

/* The stage is what gets pinned by ScrollTrigger */
.coffee-story__stage {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}


/* ==========================================================================
   Story sections — stacked, cross-faded by GSAP.
   ========================================================================== */

.story-section {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    will-change: opacity;
}

.story-section[data-index="0"] {
    opacity: 1;
}


/* --- Image (ken-burns) --- */

.story-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.08);
    will-change: transform;
}


/* --- Overlay gradient for legibility --- */

.story-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(180deg,
            rgba(20, 12, 6, 0.55) 0%,
            rgba(20, 12, 6, 0.15) 30%,
            rgba(20, 12, 6, 0.35) 65%,
            rgba(20, 12, 6, 0.88) 100%),
        linear-gradient(90deg,
            rgba(20, 12, 6, 0.55) 0%,
            rgba(20, 12, 6, 0.1) 55%,
            rgba(20, 12, 6, 0) 100%);
    pointer-events: none;
}


/* --- Content --- */

.story-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 8vw 12vh;
    color: var(--cs-cream);
}


/* Eyebrow (chapter number + label) */

.story-eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--cs-cream-soft);
}

.story-section:not([data-index="0"]) .story-eyebrow {
    opacity: 0;
    transform: translateY(20px);
}

.story-number {
    color: var(--cs-accent);
    font-weight: 700;
}

.story-divider {
    flex: 0 0 60px;
    height: 1px;
    background: var(--cs-cream-faint);
}

.story-label {
    color: var(--cs-cream);
}


/* Title */

.story-title {
    margin: 0 0 32px;
    padding: 0;
    color: var(--cs-cream);
    font-family: inherit;
    font-size: clamp(52px, 8.5vw, 148px);
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: 0.03em;
    font-style: italic;
    text-transform: none;
}

/* Each title line is animated by GSAP (opacity + slight rise). No clip
   mask — earlier attempts to slide letters up out of an overflow:hidden
   box interacted badly with italic descenders + GSAP's yPercent tracking
   and left the title stranded below the mask on chapters 2 → 5. */
.story-title-line {
    display: block;
}

.story-title-line>span {
    display: block;
    will-change: transform, opacity;
}

/* Only sections AFTER the first start pre-hidden, so chapter 01 is fully
   readable on first paint even before GSAP has run. */
.story-section:not([data-index="0"]) .story-title-line>span {
    opacity: 0;
    transform: translateY(40px);
}

/* Body */

.story-text {
    max-width: 520px;
    margin: 0;
    color: var(--cs-cream-soft);
    font-family: inherit;
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.7;
    font-weight: 400;
}

.story-section:not([data-index="0"]) .story-text {
    opacity: 0;
    transform: translateY(20px);
}


/* CTA */

.story-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
    padding: 18px 32px;
    color: var(--cs-cream);
    background: var(--cs-accent);
    border: 1px solid var(--cs-accent);
    text-decoration: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition:
        background 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s ease,
        gap 0.35s ease;
}

.story-section:not([data-index="0"]) .story-button {
    opacity: 0;
    transform: translateY(20px);
}

.story-button:hover,
.story-button:focus-visible {
    background: transparent;
    color: var(--cs-cream);
    border-color: var(--cs-cream);
    gap: 18px;
    transform: translateY(-2px);
}

.story-button svg {
    transition: transform 0.35s ease;
}

.story-button:hover svg {
    transform: translateX(4px);
}


/* ==========================================================================
   Gutenberg content area — sits below the pinned story, above the footer.

   The story escapes its parent to fill the viewport, but the block content
   should sit in a normal centered column so the page reads like a page
   after the animation ends.
   ========================================================================== */

.coffee-story-content {
    position: relative;
    background: #ffffff;
    color: var(--cs-espresso);
    padding: clamp(60px, 8vw, 120px) 24px;
}

.coffee-story-content__inner {
    max-width: 1180px;
    margin: 0 auto;
}

/* Give core Gutenberg blocks sensible defaults inside our wrapper. Blocksy
   supplies most of this, but re-declaring keeps things predictable even
   if the theme options change. */
.coffee-story-content .entry-content>*+* {
    margin-top: 1.25em;
}

.coffee-story-content .entry-content h1,
.coffee-story-content .entry-content h2,
.coffee-story-content .entry-content h3 {
    color: var(--cs-espresso);
    letter-spacing: -0.02em;
}

.coffee-story-content .entry-content .alignwide {
    max-width: min(1400px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.coffee-story-content .entry-content .alignfull {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    max-width: 100vw;
}


/* ==========================================================================
   Fixed overlays — hidden once the visitor scrolls past the pinned story
   so they don't float on top of the site footer that follows.
   ========================================================================== */

.coffee-story.is-past .coffee-story__progress,
.coffee-story.is-past .coffee-story__counter,
.coffee-story.is-past .coffee-story__nav,
.coffee-story.is-past .coffee-story__skip {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* ==========================================================================
   Skip button — jumps past the pinned story.
   ========================================================================== */

.coffee-story__skip {
    position: fixed;
    right: 32px;
    bottom: 32px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: rgba(20, 12, 6, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(245, 239, 230, 0.28);
    border-radius: 999px;
    color: var(--cs-cream);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        gap 0.3s ease,
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.coffee-story__skip:hover,
.coffee-story__skip:focus-visible {
    background: var(--cs-accent);
    border-color: var(--cs-accent);
    color: #fff;
    outline: none;
    gap: 14px;
    transform: translateY(-2px);
}

.coffee-story__skip svg {
    transition: transform 0.3s ease;
}

.coffee-story__skip:hover svg,
.coffee-story__skip:focus-visible svg {
    transform: translateX(2px);
}


/* ==========================================================================
   Top progress bar.
   ========================================================================== */

.coffee-story__progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(245, 239, 230, 0.1);
    z-index: 20;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.coffee-story__progress-fill {
    display: block;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--cs-accent), #e88a4f);
    transform-origin: left center;
}


/* ==========================================================================
   Chapter counter (top-right).
   ========================================================================== */

.coffee-story__counter {
    position: fixed;
    top: 32px;
    right: 40px;
    z-index: 15;
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: inherit;
    font-weight: 500;
    color: var(--cs-cream);
    mix-blend-mode: difference;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.coffee-story__counter-current {
    font-size: 42px;
    line-height: 1;
    letter-spacing: 0.03em;
    color: var(--cs-cream);
    transition: color 0.4s ease;
}

.coffee-story__counter-divider {
    font-size: 22px;
    color: var(--cs-cream-faint);
    padding: 0 2px;
}

.coffee-story__counter-total {
    font-size: 14px;
    color: var(--cs-cream-faint);
    letter-spacing: 0.05em;
    align-self: flex-end;
    padding-bottom: 6px;
}


/* ==========================================================================
   Side navigation dots (left).
   ========================================================================== */

.coffee-story__nav {
    position: fixed;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.coffee-story__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.coffee-story__nav-dot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--cs-cream);
    font-family: inherit;
}

.coffee-story__nav-dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(245, 239, 230, 0.35);
    transition:
        background 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.coffee-story__nav-dot:hover::before {
    background: var(--cs-cream);
}

.coffee-story__nav-dot.is-active::before {
    background: var(--cs-accent);
    transform: scale(1.5);
    box-shadow: 0 0 0 4px rgba(197, 106, 45, 0.18);
}

.coffee-story__nav-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--cs-cream);
    opacity: 0;
    transform: translateX(-6px);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
    white-space: nowrap;
}

.coffee-story__nav-dot:hover .coffee-story__nav-label,
.coffee-story__nav-dot.is-active .coffee-story__nav-label {
    opacity: 1;
    transform: translateX(0);
}


/* ==========================================================================
   Scroll hint (bottom-center on first chapter).
   ========================================================================== */

.coffee-story__hint {
    position: absolute;
    left: 50%;
    bottom: 42px;
    transform: translateX(-50%);
    z-index: 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--cs-cream-soft);
    pointer-events: none;
}

.coffee-story__hint-line {
    display: block;
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, var(--cs-cream), transparent);
    animation: cs-hint-line 2.2s ease-in-out infinite;
    transform-origin: top center;
}

@keyframes cs-hint-line {
    0% {
        transform: scaleY(0.2);
        opacity: 0.2;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }

    100% {
        transform: scaleY(0.2);
        opacity: 0.2;
    }
}


/* ==========================================================================
   Responsive.
   ========================================================================== */

@media (max-width: 900px) {

    .coffee-story__skip {
        right: 16px;
        bottom: 18px;
        padding: 10px 14px;
        font-size: 10px;
        letter-spacing: 0.18em;
    }

    .coffee-story__counter {
        top: 20px;
        right: 22px;
    }

    .coffee-story__counter-current {
        font-size: 30px;
    }

    .coffee-story__counter-total {
        font-size: 12px;
        padding-bottom: 4px;
    }

    .coffee-story__nav {
        left: 18px;
    }

    .coffee-story__nav-label {
        display: none;
    }

    .story-content {
        padding: 0 28px 90px;
    }

    .story-eyebrow {
        gap: 12px;
        font-size: 10px;
        letter-spacing: 0.3em;
    }

    .story-divider {
        flex-basis: 30px;
    }

    .story-title {
        font-size: clamp(44px, 13vw, 72px);
        margin-bottom: 22px;
    }

    .story-text {
        font-size: 15px;
    }

    .story-button {
        margin-top: 28px;
        padding: 14px 22px;
    }

}


/* Reduced motion — skip the ken-burns pan and hint animation */
@media (prefers-reduced-motion: reduce) {

    .story-image img {
        transform: none;
    }

    .coffee-story__hint-line {
        animation: none;
    }

}


/* ==========================================================================
   Colombian Brew — Gutenberg pattern styles.

   Every pattern uses a shared type system:
     .cb-eyebrow   — small uppercase Inter accent label
     .cb-display   — big italic Playfair display heading
     .cb-lede      — larger paragraph after a heading
     .cb-reveal    — pre-hidden, revealed by JS on scroll
     .cb-split     — heading whose words are wrapped and staggered
     .cb-btn       — button variants (accent / dark / ghost / ghost-light)

   Sections alternate cream and espresso backgrounds so the page has a
   visible rhythm as you scroll past the story.
   ========================================================================== */

/* --- Shared type + layout system -------------------------------------- */

.cb-section {
    position: relative;
    padding: clamp(80px, 12vw, 160px) 32px;
    background: #ffffff;
    color: var(--cs-espresso);
    overflow: hidden;
}

.cb-section__inner {
    max-width: 1240px;
    margin: 0 auto;
}

.cb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    color: var(--cs-accent);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.cb-eyebrow--light {
    color: var(--cs-cream);
}

.cb-display {
    margin: 0 0 32px;
    color: var(--cs-espresso);
    font-family: inherit;
    /* !important beats Blocksy's .entry-content h2 rules (0,1,1 specificity) */
    font-size: clamp(44px, 7vw, 112px) !important;
    line-height: 1.02 !important;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.cb-display--xl {
    font-size: clamp(52px, 8.5vw, 140px) !important;
}

.cb-lede {
    max-width: 640px;
    margin: 0 0 40px;
    color: rgba(26, 15, 8, 0.72);
    font-family: inherit;
    font-size: clamp(17px, 1.25vw, 21px);
    line-height: 1.6;
}

.cb-lede--light {
    color: rgba(245, 239, 230, 0.75);
    margin-left: auto;
    margin-right: auto;
}

/* Buttons — override WP button block styling with our variants */
.wp-block-button.cb-btn>.wp-block-button__link,
.wp-block-button.cb-btn .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 30px;
    border-radius: 999px;
    background: var(--cs-espresso);
    color: var(--cs-cream);
    border: 1px solid var(--cs-espresso);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease, border-color 0.35s ease, gap 0.35s ease;
}

.wp-block-button.cb-btn:hover>.wp-block-button__link {
    gap: 16px;
    transform: translateY(-2px);
}

.wp-block-button.cb-btn--accent>.wp-block-button__link {
    background: var(--cs-accent);
    border-color: var(--cs-accent);
    color: #fff;
}

.wp-block-button.cb-btn--accent:hover>.wp-block-button__link {
    background: transparent;
    color: var(--cs-cream);
    border-color: var(--cs-cream);
}

.wp-block-button.cb-btn--dark>.wp-block-button__link {
    background: var(--cs-espresso);
    color: var(--cs-cream);
    border-color: var(--cs-espresso);
}

.wp-block-button.cb-btn--ghost>.wp-block-button__link {
    background: transparent;
    color: var(--cs-espresso);
    border-color: var(--cs-espresso);
}

.wp-block-button.cb-btn--ghost:hover>.wp-block-button__link {
    background: var(--cs-espresso);
    color: var(--cs-cream);
}

.wp-block-button.cb-btn--ghost-light>.wp-block-button__link {
    background: transparent;
    color: var(--cs-cream);
    border-color: rgba(245, 239, 230, 0.5);
}

.wp-block-button.cb-btn--ghost-light:hover>.wp-block-button__link {
    background: var(--cs-cream);
    color: var(--cs-espresso);
    border-color: var(--cs-cream);
}


/* --- Reveal system --------------------------------------------------- */

.cb-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: transform, opacity;
}

.cb-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}

/* Split — each word wraps in a span that individually rises. Initial state
   set here so it works even before JS runs (SEO / no-JS visitors get the
   final position). JS toggles is-in for the staggered animation. */
.cb-split .cb-word {
    display: inline-block;
    padding-bottom: 0.05em;
}

.cb-split .cb-word>span {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: transform;
}

.cb-split.is-in .cb-word>span {
    transform: translateY(0);
}


/* --- Section: Environments ------------------------------------------- */

.cb-environments {
    background: var(--cs-cream);
}

.cb-environments__grid {
    margin-top: 56px !important;
    gap: 0 !important;
    border-top: 1px solid rgba(26, 15, 8, 0.12);
}

.cb-env-card {
    padding: 40px 24px !important;
    border-right: 1px solid rgba(26, 15, 8, 0.12);
    border-bottom: 1px solid rgba(26, 15, 8, 0.12);
    transition: background 0.4s ease, transform 0.4s ease;
    position: relative;
}

.cb-env-card:last-child {
    border-right: 0;
}

.cb-env-card:hover {
    background: rgba(26, 15, 8, 0.04);
}

.cb-env-card::after {
    content: "";
    position: absolute;
    left: 24px;
    bottom: -1px;
    height: 2px;
    width: 0;
    background: var(--cs-accent);
    transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cb-env-card:hover::after {
    width: calc(100% - 48px);
}

.cb-env-card__num {
    margin: 0 0 20px !important;
    color: var(--cs-accent);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.28em;
}

.cb-env-card__label {
    margin: 0 0 8px !important;
    font-family: inherit;
    font-style: italic;
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: -0.02em;
    color: var(--cs-espresso);
}

.cb-env-card__copy {
    margin: 0 !important;
    color: rgba(26, 15, 8, 0.65);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
}


/* --- Section: Why us ------------------------------------------------- */

.cb-why {
    background: #ffffff;
}

.cb-why__inner {
    display: grid !important;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
}

.cb-why__intro {
    position: sticky;
    top: 80px;
}

.cb-why__list>*+* {
    margin-top: 32px;
}

.cb-feature {
    display: grid !important;
    grid-template-columns: 90px 1fr;
    gap: 32px;
    align-items: baseline;
    padding: 32px 0;
    border-top: 1px solid rgba(26, 15, 8, 0.1);
    transition: transform 0.4s ease;
}

.cb-feature:hover {
    transform: translateX(6px);
}

.cb-feature__num {
    margin: 0 !important;
    color: var(--cs-accent);
    font-family: inherit;
    font-style: italic;
    font-size: 48px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.03em;
}

.cb-feature__title {
    margin: 0 0 10px !important;
    font-family: inherit;
    font-style: italic;
    font-size: clamp(22px, 2.2vw, 30px);
    letter-spacing: -0.02em;
    color: var(--cs-espresso);
    font-weight: 500;
}

.cb-feature__body p {
    margin: 0 !important;
    color: rgba(26, 15, 8, 0.68);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.65;
}

@media (max-width: 900px) {
    .cb-why__inner {
        grid-template-columns: 1fr !important;
    }

    .cb-why__intro {
        position: static;
    }

    .cb-feature {
        grid-template-columns: 60px 1fr;
        gap: 20px;
    }

    .cb-feature__num {
        font-size: 36px;
    }
}


/* --- Section: Stats + marquee --------------------------------------- */

.cb-stats {
    background: var(--cs-espresso);
    color: var(--cs-cream);
    padding-bottom: 0 !important;
}

/* Blocksy applies heading colors via .entry-content h2 (etc.) which has
   higher specificity than our single-class rules. Force cream on every
   heading + text child inside .cb-stats so the numbers actually show up
   against the dark background. */
.cb-stats .cb-eyebrow {
    color: var(--cs-accent) !important;
}

.cb-stats h1,
.cb-stats h2,
.cb-stats h3,
.cb-stats .cb-stat__num,
.cb-stats .cb-count {
    color: var(--cs-cream) !important;
}

.cb-stats__row {
    margin: 40px 0 100px !important;
    gap: 40px !important;
}

.cb-stat {
    padding: 0 !important;
}

.cb-stat__num {
    margin: 0 0 12px !important;
    color: var(--cs-cream);
    font-family: inherit;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(64px, 8vw, 128px);
    line-height: 0.95;
    letter-spacing: -0.04em;
}

.cb-stat__label {
    margin: 0 !important;
    max-width: 260px;
    color: rgba(245, 239, 230, 0.65);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
}

.cb-marquee {
    width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 40px 0 60px;
    border-top: 1px solid rgba(245, 239, 230, 0.12);
    overflow: hidden;
    white-space: nowrap;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.cb-marquee__track {
    display: inline-block;
    margin: 0 !important;
    padding-left: 100%;
    color: var(--cs-cream);
    font-family: inherit;
    font-style: italic;
    font-size: clamp(36px, 5vw, 72px);
    letter-spacing: -0.02em;
    line-height: 1;
    animation: cb-marquee 34s linear infinite;
    will-change: transform;
}

.cb-marquee__track span {
    color: rgba(245, 239, 230, 0.9);
}

.cb-marquee__track span+span {
    padding-left: 0.15em;
}

@keyframes cb-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}


/* --- Section: Brand story -------------------------------------------- */

.cb-brand-story {
    background: var(--cs-cream);
}

.cb-brand-story__inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 6vw, 96px);
    align-items: center;
}

.cb-brand-story__media {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 4 / 5;
}

.cb-brand-story__media figure,
.cb-brand-story__media img {
    width: 100%;
    height: 100%;
    margin: 0 !important;
    object-fit: cover;
}

.cb-parallax-img img {
    transform: scale(1.15);
    will-change: transform;
}

.cb-brand-story__text p {
    margin: 0 0 20px;
    color: rgba(26, 15, 8, 0.72);
    font-family: inherit;
    font-size: 17px;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .cb-brand-story__inner {
        grid-template-columns: 1fr !important;
    }

    .cb-brand-story__media {
        aspect-ratio: 4 / 3;
    }
}


/* --- Section: Signature product ------------------------------------- */

.cb-signature {
    background: #ffffff;
    text-align: center;
}

.cb-signature .cb-eyebrow,
.cb-signature .cb-display,
.cb-signature .cb-lede {
    text-align: center;
}

.cb-signature .cb-display {
    max-width: 20ch;
    margin-left: auto;
    margin-right: auto;
}

.cb-signature .cb-lede {
    margin-left: auto;
    margin-right: auto;
}

.cb-signature__products {
    margin: 60px 0 !important;
}

/* Give a friendlier fallback if the [products] shortcode returns empty */
.cb-signature__products:empty::before {
    content: "Add WooCommerce products in the shortcode to populate this row.";
    display: block;
    padding: 40px 20px;
    border: 1px dashed rgba(26, 15, 8, 0.2);
    color: rgba(26, 15, 8, 0.5);
    font-family: inherit;
    font-size: 14px;
    text-align: center;
}


/* --- Section: Categories --------------------------------------------- */

.cb-categories {
    background: var(--cs-cream);
}

.cb-categories__head {
    max-width: 800px;
    margin: 0 auto 60px;
    text-align: center;
}

.cb-categories__head .cb-eyebrow,
.cb-categories__head .cb-display,
.cb-categories__head .cb-lede {
    text-align: center;
}

.cb-categories__head .cb-lede {
    margin-left: auto;
    margin-right: auto;
}

.cb-categories__grid {
    gap: 24px !important;
}

.cb-cat-tile {
    position: relative;
    padding: 44px 32px !important;
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s ease;
}

.cb-cat-tile:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px -30px rgba(26, 15, 8, 0.25);
}

.cb-cat-tile::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--cs-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cb-cat-tile:hover::before {
    transform: scaleX(1);
}

.cb-cat-tile__count {
    margin: 0 0 24px !important;
    color: var(--cs-accent);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.cb-cat-tile__title {
    margin: 0 0 12px !important;
    font-family: inherit;
    font-style: italic;
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: -0.02em;
    color: var(--cs-espresso);
    font-weight: 500;
}

.cb-cat-tile__copy {
    margin: 0 0 32px !important;
    color: rgba(26, 15, 8, 0.65);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.55;
}


/* --- Section: Final CTA --------------------------------------------- */

.cb-cta {
    background: var(--cs-espresso);
    color: var(--cs-cream);
    text-align: center;
    padding: clamp(100px, 14vw, 180px) 32px !important;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Subtle radial glow behind the heading */
.cb-cta::before {
    content: "";
    position: absolute;
    inset: -20% -20% auto auto;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197, 106, 45, 0.18), transparent 60%);
    z-index: -1;
    filter: blur(20px);
}

.cb-cta__inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.cb-cta .cb-eyebrow,
.cb-cta .cb-display,
.cb-cta .cb-lede {
    text-align: center;
}

.cb-cta .cb-display,
.cb-cta h1,
.cb-cta h2,
.cb-cta h3 {
    color: var(--cs-cream) !important;
    max-width: 14ch;
    margin-left: auto;
    margin-right: auto;
}

.cb-cta .cb-eyebrow--light {
    color: var(--cs-cream) !important;
}

.cb-cta .wp-block-buttons {
    justify-content: center;
    gap: 16px;
}


/* --- Responsive: mid-viewport typography (tablet / small desktop) ---
   The full-desktop clamp values are tuned for 1200px+ layouts. Between
   ~769–1200 the display type ends up bigger than its container (especially
   in .cb-why where it sits in a ~40% column), so we scale it down. */

@media (max-width: 1200px) and (min-width: 769px) {

    .cb-display {
        font-size: clamp(38px, 5vw, 68px) !important;
    }

    .cb-display--xl {
        font-size: clamp(42px, 5.8vw, 84px) !important;
    }

    /* .cb-why__intro sits in a narrow left column — shrink harder so
       "Colombian" fits on a single line at these widths. */
    .cb-why .cb-display {
        font-size: clamp(30px, 3.6vw, 52px) !important;
    }

    /* .cb-signature and .cb-cta have a very tight max-width (20ch / 14ch)
       which forces one-word-per-line at these font sizes — soften both. */
    .cb-signature .cb-display,
    .cb-cta .cb-display {
        font-size: clamp(38px, 5.2vw, 72px) !important;
    }
}

/* --- Responsive: sections collapse to single-column on small screens - */

@media (max-width: 768px) {

    /* Shared type + spacing */
    .cb-section {
        padding: 64px 20px;
    }

    .cb-eyebrow {
        margin: 0 0 16px;
        font-size: 11px;
        letter-spacing: 0.22em;
    }

    .cb-display {
        font-size: clamp(30px, 8.5vw, 44px) !important;
        line-height: 1.05 !important;
        margin: 0 0 20px;
    }

    .cb-display--xl {
        font-size: clamp(34px, 9.5vw, 52px) !important;
    }

    .cb-lede {
        font-size: 16px;
        line-height: 1.55;
        margin: 0 0 28px;
    }

    .wp-block-button.cb-btn>.wp-block-button__link,
    .wp-block-button.cb-btn .wp-block-button__link {
        padding: 14px 22px;
        font-size: 12px;
        letter-spacing: 0.12em;
    }

    /* Environments — 2-up grid on tablet-ish, borders reset for stacking */
    .cb-environments__grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0 !important;
        margin-top: 32px !important;
    }

    .cb-env-card {
        padding: 28px 20px !important;
        border-right: 1px solid rgba(26, 15, 8, 0.12);
        border-bottom: 1px solid rgba(26, 15, 8, 0.12);
    }

    .cb-env-card:nth-child(2n) {
        border-right: 0;
    }

    .cb-env-card__label {
        font-size: 26px;
    }

    .cb-env-card__num {
        margin: 0 0 12px !important;
    }

    /* Why us — collapse handled above, just tighten spacing */
    .cb-why__list>*+* {
        margin-top: 20px;
    }

    .cb-feature {
        padding: 24px 0;
        grid-template-columns: 48px 1fr !important;
        gap: 16px;
    }

    .cb-feature__num {
        font-size: 30px;
    }

    .cb-feature__title {
        font-size: 20px;
    }

    .cb-feature__body p {
        font-size: 15px;
        line-height: 1.6;
    }

    /* Stats + marquee */
    .cb-stats__row {
        margin: 24px 0 56px !important;
        gap: 28px !important;
    }

    .cb-stat__num {
        font-size: clamp(48px, 14vw, 72px);
    }

    .cb-stat__label {
        font-size: 14px;
        max-width: none;
    }

    .cb-marquee {
        padding: 24px 0 36px;
    }

    .cb-marquee__track {
        font-size: clamp(28px, 8vw, 40px);
    }

    /* Brand story */
    .cb-brand-story__inner {
        gap: 32px;
    }

    .cb-brand-story__media {
        aspect-ratio: 4 / 3;
    }

    .cb-brand-story__text p {
        font-size: 15px;
        line-height: 1.65;
    }

    /* Signature product — force Woo grid to be usable on mobile */
    .cb-signature__products {
        margin: 36px 0 !important;
    }

    .cb-signature__products .products,
    .cb-signature__products ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .cb-signature__products .products li,
    .cb-signature__products ul.products li,
    .cb-signature__products .products li.product,
    .cb-signature__products ul.products li.product {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        clear: none !important;
    }

    /* Categories */
    .cb-categories__head {
        margin: 0 auto 40px;
    }

    .cb-categories__grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .cb-cat-tile {
        padding: 32px 24px !important;
    }

    .cb-cat-tile__title {
        font-size: 24px;
    }

    .cb-cat-tile__copy {
        margin: 0 0 24px !important;
    }

    /* Final CTA */
    .cb-cta {
        padding: 80px 20px !important;
    }

    .cb-cta .cb-display,
    .cb-cta h1,
    .cb-cta h2,
    .cb-cta h3 {
        max-width: 100%;
    }

    .cb-cta .wp-block-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .cb-cta .wp-block-buttons .wp-block-button {
        width: 100%;
    }

    .cb-cta .wp-block-buttons .wp-block-button__link {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .cb-section {
        padding: 56px 16px;
    }

    .cb-display {
        font-size: clamp(28px, 9vw, 38px) !important;
    }

    .cb-display--xl {
        font-size: clamp(30px, 10vw, 42px) !important;
    }

    /* Environments — single column on true phones */
    .cb-environments__grid {
        grid-template-columns: 1fr !important;
    }

    .cb-env-card {
        border-right: 0 !important;
    }

    /* Signature Woo grid drops to one column */
    .cb-signature__products .products,
    .cb-signature__products ul.products {
        grid-template-columns: 1fr !important;
    }

    .cb-cta {
        padding: 64px 16px !important;
    }
}


/* ==========================================================================
   Pattern 08 — Manifesto marquee (horizontal pin).
   ========================================================================== */

.cb-manifesto {
    position: relative;
    background: var(--cs-espresso);
    color: var(--cs-cream);
    padding: 0 !important;
    overflow: hidden;
}

.cb-manifesto__stage {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.cb-manifesto__eyebrow {
    position: absolute;
    top: 40px;
    left: 40px;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(245, 239, 230, 0.6);
    z-index: 3;
}

.cb-manifesto__eyebrow span {
    color: var(--cs-accent);
}

.cb-manifesto__caption {
    position: absolute;
    bottom: 40px;
    right: 40px;
    margin: 0 !important;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(245, 239, 230, 0.5);
    z-index: 3;
}

.cb-manifesto__track {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 6vw !important;
    padding: 0 12vw !important;
    white-space: nowrap;
    width: max-content;
    will-change: transform;
}

.cb-manifesto__word {
    margin: 0 !important;
    color: var(--cs-cream);
    font-family: inherit;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(80px, 18vw, 260px);
    line-height: 0.92;
    letter-spacing: -0.035em;
    flex-shrink: 0;
}

.cb-manifesto__word--accent {
    color: var(--cs-accent);
}

.cb-manifesto__dot {
    margin: 0 !important;
    color: var(--cs-accent);
    font-size: clamp(48px, 8vw, 120px);
    line-height: 1;
    flex-shrink: 0;
    transform: translateY(-0.15em);
}

@media (max-width: 768px) {

    .cb-manifesto__eyebrow,
    .cb-manifesto__caption {
        font-size: 9px;
        letter-spacing: 0.22em;
    }

    .cb-manifesto__eyebrow {
        top: 20px;
        left: 20px;
        gap: 8px;
    }

    .cb-manifesto__caption {
        bottom: 20px;
        right: 20px;
    }

    .cb-manifesto__track {
        gap: 4vw !important;
        padding: 0 8vw !important;
    }

    .cb-manifesto__word {
        font-size: clamp(56px, 22vw, 120px);
    }
}


/* ==========================================================================
   Pattern 09 — Brew methods (3D tilt cards).
   ========================================================================== */

.cb-methods {
    background: var(--cs-cream);
}

.cb-methods__head {
    max-width: 720px;
    margin: 0 0 64px;
}

.cb-methods__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px !important;
    perspective: 1400px;
}

.cb-method {
    position: relative;
    padding: 44px 30px 40px !important;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    transform-style: preserve-3d;
    transform: rotateX(0) rotateY(0) translateZ(0);
    transition: box-shadow 0.4s ease, transform 0.5s cubic-bezier(0.25, 0.9, 0.3, 1);
    will-change: transform;
}

.cb-method::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(197, 106, 45, 0.14), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.cb-method:hover {
    box-shadow: 0 40px 80px -40px rgba(26, 15, 8, 0.35);
}

.cb-method:hover::before {
    opacity: 1;
}

.cb-method__icon {
    display: block;
    margin: 0 0 32px;
    color: var(--cs-accent);
    transform: translateZ(60px);
}

.cb-method__icon svg {
    width: 44px;
    height: 44px;
    display: block;
}

.cb-method__meta {
    margin: 0 0 14px !important;
    color: var(--cs-accent);
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.28em;
    font-weight: 600;
    text-transform: uppercase;
    transform: translateZ(20px);
}

.cb-method__title {
    margin: 0 0 14px !important;
    font-family: inherit;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(24px, 2.2vw, 34px) !important;
    line-height: 1.1 !important;
    color: var(--cs-espresso);
    letter-spacing: -0.01em;
    transform: translateZ(40px);
}

.cb-method__copy {
    margin: 0 !important;
    color: rgba(26, 15, 8, 0.65);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.6;
    transform: translateZ(20px);
}

@media (max-width: 900px) {
    .cb-methods__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .cb-methods__grid {
        grid-template-columns: 1fr;
    }

    .cb-method {
        padding: 32px 24px !important;
    }
}


/* ==========================================================================
   Pattern 10 — Testimonials (dual marquee).
   ========================================================================== */

.cb-quotes {
    background: var(--cs-cream);
    padding: clamp(80px, 12vw, 160px) 0 !important;
    overflow: hidden;
}

.cb-quotes__head {
    max-width: 800px;
    margin: 0 auto 80px !important;
    padding: 0 32px;
    text-align: center;
}

.cb-quotes__head .cb-eyebrow,
.cb-quotes__head .cb-display,
.cb-quotes__head .cb-lede {
    text-align: center;
}

.cb-quotes__head .cb-lede {
    margin-left: auto;
    margin-right: auto;
}

.cb-quotes__rail {
    display: flex;
    flex-direction: column;
    gap: 24px;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.cb-quotes__row {
    display: flex;
    gap: 24px;
    width: max-content;
    will-change: transform;
}

.cb-quote-card {
    flex: 0 0 auto;
    width: 380px;
    margin: 0 !important;
    padding: 32px 30px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 20px 40px -30px rgba(26, 15, 8, 0.2);
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.cb-quote-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -30px rgba(26, 15, 8, 0.3);
}

.cb-quote-card__stars {
    display: block;
    color: var(--cs-accent);
    font-size: 14px;
    letter-spacing: 0.18em;
}

.cb-quote-card__body {
    margin: 0;
    font-family: inherit;
    font-style: italic;
    font-size: 17px;
    line-height: 1.55;
    color: var(--cs-espresso);
    border-left: 0;
    padding: 0;
}

.cb-quote-card__meta {
    font-family: inherit;
    font-size: 13px;
    color: rgba(26, 15, 8, 0.55);
    letter-spacing: 0.01em;
}

.cb-quote-card__meta strong {
    color: var(--cs-espresso);
    font-weight: 600;
}

@media (max-width: 640px) {
    .cb-quote-card {
        width: 300px;
        padding: 26px 24px;
    }

    .cb-quote-card__body {
        font-size: 15px;
    }
}


/* ==========================================================================
   Pattern 11 — Bean journey (scroll-linked timeline).
   ========================================================================== */

.cb-journey {
    background: var(--cs-espresso);
    color: var(--cs-cream);
}

.cb-journey .cb-eyebrow {
    color: var(--cs-accent) !important;
}

.cb-journey .cb-display {
    color: var(--cs-cream) !important;
}

.cb-journey .cb-lede {
    color: rgba(245, 239, 230, 0.7);
}

.cb-journey__head {
    max-width: 800px;
    margin: 0 auto 80px !important;
    text-align: center;
}

.cb-journey__head .cb-eyebrow,
.cb-journey__head .cb-display,
.cb-journey__head .cb-lede {
    text-align: center;
}

.cb-journey__head .cb-lede {
    margin-left: auto;
    margin-right: auto;
}

.cb-journey__track {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    padding: 20px 0;
}

.cb-journey__line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(245, 239, 230, 0.14);
    transform: translateX(-50%);
    pointer-events: none;
}

.cb-journey__line-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--cs-accent), #e88a4f);
    transform: scaleY(0);
    transform-origin: top center;
    will-change: transform;
}

.cb-step {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    align-items: center;
    gap: 40px;
    padding: 48px 0;
}

.cb-step__body {
    max-width: 360px;
}

.cb-step--left .cb-step__body {
    grid-column: 1;
    justify-self: end;
    text-align: right;
}

.cb-step--right .cb-step__body {
    grid-column: 3;
    justify-self: start;
    text-align: left;
}

.cb-step__dot {
    grid-column: 2;
    justify-self: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cs-espresso);
    border: 2px solid rgba(245, 239, 230, 0.35);
    position: relative;
    z-index: 2;
    transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.cb-step.is-active .cb-step__dot {
    background: var(--cs-accent);
    border-color: var(--cs-accent);
    transform: scale(1.4);
    box-shadow: 0 0 0 8px rgba(197, 106, 45, 0.18);
}

.cb-step__num {
    margin: 0 0 10px;
    color: var(--cs-accent);
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.28em;
    font-weight: 700;
    text-transform: uppercase;
}

.cb-step__title {
    margin: 0 0 14px !important;
    font-family: inherit;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(26px, 3vw, 40px) !important;
    line-height: 1.1 !important;
    color: var(--cs-cream);
    letter-spacing: -0.01em;
}

.cb-step__copy {
    margin: 0;
    color: rgba(245, 239, 230, 0.65);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.65;
    max-width: 360px;
}

.cb-step--left .cb-step__copy {
    margin-left: auto;
}

@media (max-width: 768px) {
    .cb-journey__line {
        left: 22px;
    }

    .cb-step {
        grid-template-columns: 44px 1fr !important;
        gap: 20px;
        padding: 28px 0;
    }

    .cb-step__dot {
        grid-column: 1 !important;
        justify-self: start;
    }

    .cb-step--left .cb-step__body,
    .cb-step--right .cb-step__body {
        grid-column: 2 !important;
        justify-self: start !important;
        text-align: left !important;
        max-width: 100%;
    }

    .cb-step--left .cb-step__copy {
        margin-left: 0 !important;
    }
}


/* ==========================================================================
   Pattern 12 — Parallax gallery.
   ========================================================================== */

.cb-gallery {
    background: var(--cs-cream);
}

.cb-gallery__inner {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(60px, auto);
    column-gap: 20px !important;
    row-gap: 40px !important;
    max-width: 1400px !important;
}

.cb-gallery__head {
    grid-column: 1 / -1;
    max-width: 760px;
    margin-bottom: 40px;
}

.cb-gallery__head .cb-eyebrow,
.cb-gallery__head .cb-display,
.cb-gallery__head .cb-lede {
    text-align: left;
}

.cb-gallery__cell {
    position: relative;
    margin: 0 !important;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(26, 15, 8, 0.08);
}

.cb-gallery__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.2);
    will-change: transform;
}

.cb-gallery__cell--a {
    grid-column: 1 / span 5;
    aspect-ratio: 4 / 5;
}

.cb-gallery__cell--b {
    grid-column: 7 / span 4;
    aspect-ratio: 3 / 4;
    margin-top: 60px !important;
}

.cb-gallery__cell--c {
    grid-column: 11 / span 2;
    aspect-ratio: 2 / 3;
    margin-top: 20px !important;
}

.cb-gallery__cell--d {
    grid-column: 2 / span 5;
    aspect-ratio: 5 / 4;
    margin-top: -40px !important;
}

.cb-gallery__cell--e {
    grid-column: 8 / span 5;
    aspect-ratio: 4 / 3;
    margin-top: 20px !important;
}

@media (max-width: 900px) {
    .cb-gallery__inner {
        grid-template-columns: repeat(6, 1fr) !important;
        row-gap: 20px !important;
    }

    .cb-gallery__cell--a {
        grid-column: 1 / span 4;
        margin-top: 0 !important;
    }

    .cb-gallery__cell--b {
        grid-column: 3 / span 4;
        margin-top: 0 !important;
    }

    .cb-gallery__cell--c {
        grid-column: 1 / span 3;
        margin-top: 0 !important;
    }

    .cb-gallery__cell--d {
        grid-column: 4 / span 3;
        margin-top: 0 !important;
    }

    .cb-gallery__cell--e {
        grid-column: 1 / span 6;
        margin-top: 0 !important;
    }
}


/* ==========================================================================
   Pattern 13 — Newsletter (aurora glow).
   ========================================================================== */

.cb-newsletter {
    background: var(--cs-espresso);
    color: var(--cs-cream);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}

.cb-newsletter .cb-eyebrow,
.cb-newsletter .cb-display,
.cb-newsletter .cb-lede {
    text-align: center;
}

.cb-newsletter .cb-display {
    color: var(--cs-cream) !important;
}

.cb-newsletter .cb-lede {
    color: rgba(245, 239, 230, 0.72);
    margin-left: auto;
    margin-right: auto;
}

.cb-newsletter__aurora {
    position: absolute;
    inset: -30% -20% -30% -20%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 25% 30%, rgba(197, 106, 45, 0.5), transparent 45%),
        radial-gradient(circle at 75% 60%, rgba(232, 138, 79, 0.35), transparent 45%),
        radial-gradient(circle at 55% 80%, rgba(156, 79, 30, 0.35), transparent 50%);
    filter: blur(70px);
    animation: cb-aurora 22s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes cb-aurora {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-6%, 4%, 0) scale(1.15);
    }

    100% {
        transform: translate3d(6%, -4%, 0) scale(0.95);
    }
}

.cb-newsletter__inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.cb-newsletter__form {
    display: flex;
    gap: 8px;
    max-width: 520px;
    margin: 40px auto 24px;
    padding: 6px;
    background: rgba(245, 239, 230, 0.06);
    border: 1px solid rgba(245, 239, 230, 0.18);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: border-color 0.35s ease, background 0.35s ease;
}

.cb-newsletter__form:focus-within {
    border-color: rgba(245, 239, 230, 0.4);
    background: rgba(245, 239, 230, 0.1);
}

.cb-newsletter__input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    padding: 14px 20px;
    color: var(--cs-cream);
    font-family: inherit;
    font-size: 15px;
    outline: none;
}

.cb-newsletter__input::placeholder {
    color: rgba(245, 239, 230, 0.45);
}

.cb-newsletter__submit {
    flex-shrink: 0;
    background: var(--cs-accent);
    border: 0;
    border-radius: 999px;
    padding: 14px 28px;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.35s ease, transform 0.35s ease;
}

.cb-newsletter__submit:hover {
    background: var(--cs-accent-dark);
    transform: translateY(-2px);
}

.cb-newsletter__fineprint {
    margin: 0;
    color: rgba(245, 239, 230, 0.45);
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.05em;
}

@media (max-width: 560px) {
    .cb-newsletter__form {
        flex-direction: column;
        border-radius: 20px;
        padding: 10px;
    }

    .cb-newsletter__submit {
        width: 100%;
        padding: 16px 20px;
    }
}


/* ==========================================================================
   Showcase page.
   ========================================================================== */

.cb-showcase-page .hero-section,
.cb-showcase-page [class*="hero-section"],
.cb-showcase-page .ct-breadcrumbs,
.cb-showcase-page [data-prefix="page"]>.hero-section {
    display: none !important;
}

.cb-showcase-page main,
.cb-showcase-page .ct-container,
.cb-showcase-page [class*="ct-container"] {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.cb-showcase {
    background: var(--cs-cream);
    color: var(--cs-espresso);
}

.cb-showcase__intro {
    background: var(--cs-espresso);
    color: var(--cs-cream);
    padding: clamp(100px, 14vw, 180px) 32px clamp(80px, 10vw, 140px);
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.cb-showcase__intro::before {
    content: "";
    position: absolute;
    inset: -30% -20% auto auto;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(197, 106, 45, 0.22), transparent 60%);
    z-index: -1;
    filter: blur(30px);
}

.cb-showcase__intro .cb-eyebrow {
    color: var(--cs-accent);
}

.cb-showcase__intro .cb-display {
    color: var(--cs-cream) !important;
    max-width: 20ch;
    margin: 0 auto 24px;
}

.cb-showcase__intro .cb-lede {
    color: rgba(245, 239, 230, 0.72);
    max-width: 640px;
    margin: 0 auto 40px;
}

.cb-showcase__toc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.cb-showcase__toc a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(245, 239, 230, 0.25);
    border-radius: 999px;
    color: var(--cs-cream);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.cb-showcase__toc a:hover {
    background: var(--cs-accent);
    border-color: var(--cs-accent);
    color: #fff;
}

.cb-showcase__toc a span {
    color: var(--cs-accent);
    font-weight: 700;
}

.cb-showcase__toc a:hover span {
    color: rgba(255, 255, 255, 0.85);
}

.cb-showcase__item {
    position: relative;
}

.cb-showcase__label {
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 32px;
    background: rgba(20, 12, 6, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--cs-cream);
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(245, 239, 230, 0.1);
}

.cb-showcase__label strong {
    color: var(--cs-accent);
    font-weight: 700;
    margin-right: 12px;
}

.cb-showcase__label em {
    font-style: normal;
    color: rgba(245, 239, 230, 0.55);
    letter-spacing: 0.06em;
    text-transform: none;
    font-size: 12px;
    text-align: right;
    max-width: 60%;
}

@media (max-width: 640px) {
    .cb-showcase__label {
        flex-direction: column;
        gap: 4px;
        padding: 10px 18px;
    }

    .cb-showcase__label em {
        max-width: 100%;
        text-align: left;
        font-size: 11px;
    }
}


/* ==========================================================================
   ============================================================================
   CHRISTOPHER COCOA — separate brand, distinct design system.

     .cc-*   Christopher Cocoa (cocoa brown + gold, uppercase display)
     .cb-*   Colombian Brew    (espresso + orange, italic display)

   Christopher Cocoa reuses .cb-reveal / .cb-split / .cb-count from above so
   scroll animations "just work" without duplicating JS wiring.
   ============================================================================
   ========================================================================== */

:root {
    --cc-cocoa: #2a1810;
    --cc-cocoa-deep: #14090a;
    --cc-cream: #f5eee1;
    --cc-cream-soft: rgba(245, 238, 225, 0.72);
    --cc-cream-faint: rgba(245, 238, 225, 0.4);
    --cc-gold: #b8894a;
    --cc-gold-light: #d4a26a;
    --cc-gold-dark: #8f6836;
    --cc-ink: #14090a;
    --cc-ink-soft: rgba(20, 9, 10, 0.68);
    --cc-line: rgba(20, 9, 10, 0.14);
}

/* --- Shared type + layout system -------------------------------------- */

.cc-section {
    position: relative;
    padding: clamp(80px, 12vw, 160px) 32px;
    background: var(--cc-cream);
    color: var(--cc-ink);
    overflow: hidden;
}

.cc-section__inner {
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
}

.cc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 28px;
    color: var(--cc-gold);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.cc-eyebrow--light {
    color: var(--cc-gold-light);
}

.cc-display {
    margin: 0 0 32px;
    color: var(--cc-ink);
    font-family: inherit;
    /* !important beats Blocksy's .entry-content h2 rules */
    font-size: clamp(42px, 6.4vw, 96px) !important;
    line-height: 1.02 !important;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.cc-display--xl {
    font-size: clamp(56px, 8.4vw, 132px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.025em;
}

.cc-display--italic {
    font-style: italic;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.03em;
    font-size: clamp(40px, 6vw, 88px) !important;
    line-height: 1.05 !important;
}

.cc-lede {
    max-width: 620px;
    margin: 0 0 40px;
    color: var(--cc-ink-soft);
    font-family: inherit;
    font-size: clamp(17px, 1.2vw, 20px);
    line-height: 1.65;
}

.cc-lede--light {
    color: var(--cc-cream-soft);
}

/* Buttons — parallel to .cb-btn but with the CC gold/cream palette. */
.wp-block-button.cc-btn>.wp-block-button__link,
.wp-block-button.cc-btn .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 30px;
    border-radius: 0;
    background: var(--cc-ink);
    color: var(--cc-cream);
    border: 1px solid var(--cc-ink);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease, border-color 0.35s ease, gap 0.35s ease;
}

.wp-block-button.cc-btn:hover>.wp-block-button__link {
    gap: 16px;
    transform: translateY(-2px);
}

.wp-block-button.cc-btn--gold>.wp-block-button__link {
    background: var(--cc-gold);
    color: var(--cc-cocoa-deep);
    border-color: var(--cc-gold);
}

.wp-block-button.cc-btn--gold:hover>.wp-block-button__link {
    background: var(--cc-gold-light);
    border-color: var(--cc-gold-light);
    color: var(--cc-cocoa-deep);
}

.wp-block-button.cc-btn--ghost>.wp-block-button__link {
    background: transparent;
    color: var(--cc-cream);
    border-color: rgba(245, 238, 225, 0.45);
}

.wp-block-button.cc-btn--ghost:hover>.wp-block-button__link {
    background: var(--cc-cream);
    color: var(--cc-cocoa-deep);
    border-color: var(--cc-cream);
}

/* When cc-btn--ghost sits on a cream/light section, invert to dark ink. */
.cc-section:not(.cc-hero):not(.cc-b2b) .wp-block-button.cc-btn--ghost>.wp-block-button__link {
    color: var(--cc-ink);
    border-color: rgba(20, 9, 10, 0.35);
}

.cc-section:not(.cc-hero):not(.cc-b2b) .wp-block-button.cc-btn--ghost:hover>.wp-block-button__link {
    background: var(--cc-ink);
    color: var(--cc-cream);
    border-color: var(--cc-ink);
}


/* ==========================================================================
   Pattern 20 — Heritage hero.
   ========================================================================== */

.cc-hero {
    background: var(--cc-cocoa-deep);
    color: var(--cc-cream);
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: clamp(120px, 14vw, 180px) 32px !important;
    isolation: isolate;
}

.cc-hero .cc-display,
.cc-hero .cc-display--xl {
    color: var(--cc-cream) !important;
}

.cc-hero__glow {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 140vh;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 25%, rgba(184, 137, 74, 0.35), transparent 40%),
        radial-gradient(circle at 78% 65%, rgba(212, 162, 106, 0.22), transparent 45%);
    filter: blur(70px);
    animation: cc-hero-glow 24s ease-in-out infinite alternate;
}

@keyframes cc-hero-glow {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(-4%, 3%, 0) scale(1.08);
    }
}

.cc-hero__grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(245, 238, 225, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(245, 238, 225, 0.045) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}

.cc-hero__inner {
    max-width: 1180px;
    position: relative;
}

.cc-hero .cc-eyebrow {
    color: var(--cc-gold-light);
}

.cc-hero .cc-eyebrow span {
    color: var(--cc-gold);
    font-size: 14px;
}

.cc-hero .cc-lede {
    color: var(--cc-cream-soft);
    max-width: 620px;
}

.cc-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 44px;
}

.cc-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid rgba(245, 238, 225, 0.22);
    border-radius: 999px;
    color: var(--cc-cream);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: border-color 0.35s ease, background 0.35s ease;
}

.cc-pill em {
    color: var(--cc-gold);
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.cc-pill:hover {
    border-color: var(--cc-gold);
    background: rgba(184, 137, 74, 0.08);
}

.cc-hero__mark {
    position: absolute;
    right: 0;
    bottom: -60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    color: var(--cc-cream-faint);
}

.cc-hero__mark span {
    font-family: inherit;
    font-style: italic;
    font-size: clamp(80px, 12vw, 160px);
    line-height: 0.9;
    letter-spacing: 0.03em;
    color: rgba(184, 137, 74, 0.22);
    font-weight: 500;
}

.cc-hero__mark em {
    font-family: inherit;
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--cc-cream-faint);
}

@media (max-width: 900px) {
    .cc-hero {
        min-height: auto;
        padding: 120px 20px !important;
    }

    .cc-hero__mark {
        display: none;
    }

    .cc-pills {
        gap: 8px;
        margin: 0 0 32px;
    }

    .cc-pill {
        padding: 8px 14px;
        font-size: 10px;
        letter-spacing: 0.14em;
    }
}


/* ==========================================================================
   Pattern 21 — Product lineup.
   ========================================================================== */

.cc-products {
    background: var(--cc-cream);
}

.cc-products__head {
    max-width: 720px;
    margin: 0 0 72px;
}

.cc-products__head .cc-display {
    text-transform: none;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.cc-products__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cc-product {
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cc-product:hover {
    transform: translateY(-6px);
}

.cc-product__frame {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    border: 1px solid var(--cc-line);
    background: #fff;
}

.cc-product__badge {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
    padding: 6px 10px;
    background: var(--cc-cocoa-deep);
    color: var(--cc-cream);
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.cc-product__visual {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 42%, #3d2418, #14090a 75%);
    color: rgba(245, 238, 225, 0.9);
    font-family: inherit;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(80px, 12vw, 180px);
    letter-spacing: 0.03em;
    line-height: 1;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cc-product__visual::after {
    content: "";
    position: absolute;
    inset: 20px;
    border: 1px solid rgba(184, 137, 74, 0.28);
    pointer-events: none;
}

.cc-product__visual[data-shade="55"] {
    background: radial-gradient(circle at 50% 42%, #4a2f20, #14090a 75%);
}

.cc-product__visual[data-shade="85"] {
    background: radial-gradient(circle at 50% 42%, #2c1508, #0b0505 75%);
}

.cc-product:hover .cc-product__visual {
    transform: scale(1.05);
}

.cc-product__reveal {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    background: linear-gradient(180deg, rgba(20, 9, 10, 0) 0%, rgba(20, 9, 10, 0.9) 55%);
    color: var(--cc-cream);
    transform: translateY(100%);
    transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cc-product:hover .cc-product__reveal,
.cc-product:focus-within .cc-product__reveal {
    transform: translateY(0);
}

.cc-product__reveal-title {
    margin: 0 0 12px;
    color: var(--cc-gold);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 700;
}

.cc-product__ingredients {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    color: var(--cc-cream);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.65;
}

.cc-product__ingredients li+li {
    border-top: 1px solid rgba(245, 238, 225, 0.15);
    padding-top: 6px;
    margin-top: 6px;
}

.cc-product__note {
    margin: 0;
    color: var(--cc-cream-soft);
    font-size: 13px;
    line-height: 1.55;
    font-style: italic;
}

.cc-product__meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 4px;
}

.cc-product__meta-eyebrow {
    margin: 0;
    color: var(--cc-gold-dark);
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 0.28em;
    font-weight: 700;
    text-transform: uppercase;
}

.cc-product__title {
    margin: 0 !important;
    color: var(--cc-ink);
    font-family: inherit;
    font-weight: 600;
    font-size: clamp(22px, 2vw, 30px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.cc-product__copy {
    margin: 0;
    color: var(--cc-ink-soft);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.55;
}

.cc-product__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: var(--cc-ink);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--cc-ink);
    align-self: flex-start;
    transition: gap 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.cc-product__link:hover {
    gap: 14px;
    color: var(--cc-gold-dark);
    border-color: var(--cc-gold-dark);
}

@media (max-width: 900px) {
    .cc-products__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}


/* ==========================================================================
   Pattern 22 — Purity strip.
   ========================================================================== */

.cc-purity {
    background: var(--cc-cocoa-deep);
    color: var(--cc-cream);
}

.cc-purity .cc-display {
    color: var(--cc-cream) !important;
}

.cc-purity .cc-eyebrow {
    color: var(--cc-gold);
}

.cc-purity__head {
    max-width: 720px;
    margin: 0 0 72px;
}

.cc-purity__head .cc-display {
    text-transform: none;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.03em;
    font-size: clamp(36px, 5.4vw, 76px) !important;
}

.cc-purity__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(245, 238, 225, 0.12);
}

.cc-purity__cell {
    padding: 48px 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-right: 1px solid rgba(245, 238, 225, 0.12);
    border-bottom: 1px solid rgba(245, 238, 225, 0.12);
    transition: background 0.4s ease;
    position: relative;
}

.cc-purity__cell:last-child {
    border-right: 0;
}

.cc-purity__cell:hover {
    background: rgba(184, 137, 74, 0.05);
}

.cc-purity__cell::after {
    content: "";
    position: absolute;
    left: 32px;
    bottom: -1px;
    height: 2px;
    width: 0;
    background: var(--cc-gold);
    transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cc-purity__cell:hover::after {
    width: calc(100% - 64px);
}

.cc-purity__num {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--cc-cream);
    font-family: inherit;
    font-weight: 500;
    font-size: clamp(56px, 6vw, 96px);
    letter-spacing: 0.03em;
    line-height: 1;
    font-style: italic;
}

.cc-purity__num em {
    color: var(--cc-gold);
    font-style: normal;
    font-weight: 500;
    font-size: 0.45em;
    letter-spacing: 0.02em;
}

.cc-purity__rule {
    display: block;
    width: 40px;
    height: 1px;
    background: var(--cc-gold);
    margin: 8px 0;
}

.cc-purity__label {
    color: var(--cc-cream);
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.cc-purity__note {
    color: var(--cc-cream-soft);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .cc-purity__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cc-purity__cell:nth-child(2n) {
        border-right: 0;
    }

    .cc-purity__cell {
        padding: 32px 24px;
    }
}

@media (max-width: 520px) {
    .cc-purity__grid {
        grid-template-columns: 1fr;
    }

    .cc-purity__cell {
        border-right: 0 !important;
    }
}


/* ==========================================================================
   Pattern 23 — Heritage story.
   ========================================================================== */

.cc-heritage {
    background: var(--cc-cream);
}

.cc-heritage__inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
}

.cc-heritage__media {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 100px;
    gap: 24px;
    align-items: stretch;
}

.cc-heritage__frame {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--cc-cocoa-deep);
}

/* wp:image wraps the img in a <figure>. Neutralise its default margins and
 * make it fill the frame so the parallax + sepia treatment still work. */
.cc-heritage__frame .cc-heritage__image,
.cc-heritage__frame .wp-block-image {
    position: absolute;
    inset: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

.cc-heritage__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.15);
    will-change: transform;
    filter: contrast(1.05) saturate(0.4);
}

.cc-heritage__sepia {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(20, 9, 10, 0.25) 0%, rgba(20, 9, 10, 0.55) 100%),
        linear-gradient(0deg, rgba(184, 137, 74, 0.35), rgba(184, 137, 74, 0.15));
    mix-blend-mode: multiply;
    pointer-events: none;
}

.cc-heritage__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 60px rgba(20, 9, 10, 0.5);
    pointer-events: none;
}

.cc-heritage__years {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    border-left: 1px solid var(--cc-line);
}

.cc-heritage__years li {
    position: relative;
    padding-left: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cc-heritage__years li::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cc-cream);
    border: 1px solid var(--cc-gold);
    transition: background 0.4s ease;
}

.cc-heritage__years li:hover::before {
    background: var(--cc-gold);
}

.cc-heritage__years span {
    color: var(--cc-ink);
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.05em;
}

.cc-heritage__years em {
    color: var(--cc-gold-dark);
    font-family: inherit;
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.cc-heritage__text {
    padding-top: 20px;
}

.cc-heritage__text p {
    margin: 0 0 20px;
    color: var(--cc-ink-soft);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.75;
}

.cc-heritage__lede {
    color: var(--cc-ink) !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
}

@media (max-width: 900px) {
    .cc-heritage__inner {
        grid-template-columns: 1fr;
    }

    .cc-heritage__media {
        grid-template-columns: 1fr 80px;
    }

    .cc-heritage__frame {
        aspect-ratio: 4/3;
    }
}


/* ==========================================================================
   Pattern 24 — B2B strip.
   ========================================================================== */

.cc-b2b {
    background: var(--cc-cocoa-deep);
    color: var(--cc-cream);
    padding: 0 !important;
}

.cc-b2b .cc-display {
    color: var(--cc-cream) !important;
}

.cc-b2b__marquee {
    padding: 26px 0;
    border-bottom: 1px solid rgba(245, 238, 225, 0.1);
    overflow: hidden;
    white-space: nowrap;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.cc-b2b__track {
    display: inline-flex;
    align-items: center;
    gap: 40px;
    padding-left: 100%;
    color: var(--cc-cream);
    font-family: inherit;
    font-weight: 500;
    font-style: italic;
    font-size: clamp(28px, 3.4vw, 48px);
    letter-spacing: -0.015em;
    line-height: 1;
    animation: cc-b2b-marquee 28s linear infinite;
    will-change: transform;
}

.cc-b2b__track span {
    color: var(--cc-cream);
}

.cc-b2b__track i {
    color: var(--cc-gold);
    font-style: normal;
    font-size: 0.6em;
    transform: translateY(-0.05em);
}

@keyframes cc-b2b-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.cc-b2b__inner {
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    gap: clamp(48px, 6vw, 96px);
    padding: clamp(80px, 10vw, 140px) 32px;
    align-items: start;
}

.cc-b2b__copy .cc-eyebrow {
    color: var(--cc-gold-light);
}

.cc-b2b__copy .cc-lede {
    color: var(--cc-cream-soft);
}

.cc-b2b__list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    color: var(--cc-cream);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.7;
    max-width: 420px;
}

.cc-b2b__list li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid rgba(245, 238, 225, 0.1);
    letter-spacing: 0.02em;
}

.cc-b2b__list li::before {
    content: "\2726";
    color: var(--cc-gold);
    font-size: 10px;
    flex-shrink: 0;
}

.cc-b2b__list li:first-child {
    border-top: 0;
}

.cc-b2b__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px 32px;
    background: rgba(245, 238, 225, 0.04);
    border: 1px solid rgba(245, 238, 225, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.cc-b2b__form-eyebrow {
    margin: 0 0 4px;
    color: var(--cc-gold);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.cc-b2b__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cc-b2b__field span {
    color: var(--cc-cream-soft);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.cc-b2b__field input,
.cc-b2b__field textarea {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(245, 238, 225, 0.28);
    padding: 12px 0;
    color: var(--cc-cream);
    font-family: inherit;
    font-size: 15px;
    outline: none;
    resize: vertical;
    transition: border-color 0.3s ease;
}

.cc-b2b__field input:focus,
.cc-b2b__field textarea:focus {
    border-color: var(--cc-gold);
}

.cc-b2b__field textarea {
    min-height: 90px;
}

.cc-b2b__submit {
    align-self: flex-start;
    background: var(--cc-gold);
    color: var(--cc-cocoa-deep);
    border: 0;
    padding: 16px 28px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background 0.3s ease, gap 0.3s ease, transform 0.3s ease;
    margin-top: 8px;
}

.cc-b2b__submit:hover {
    background: var(--cc-gold-light);
    gap: 16px;
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .cc-b2b__inner {
        grid-template-columns: 1fr;
        padding: 64px 20px;
    }

    .cc-b2b__form {
        padding: 28px 22px;
    }
}


/* ==========================================================================
   Showcase — brand section headers (separates CB from CC on /showcase).
   ========================================================================== */

.cb-showcase__brand-header {
    padding: clamp(80px, 10vw, 140px) 32px clamp(40px, 6vw, 80px);
    background: var(--cc-cream);
    color: var(--cc-ink);
    text-align: center;
    border-top: 1px solid var(--cc-line);
}

.cb-showcase__brand-header--cocoa {
    background: var(--cc-cream);
    color: var(--cc-ink);
}

.cb-showcase__brand-header--sb-who-we-serve {
    background: var(--cs-espresso);
    color: var(--cs-cream);
    border-top-color: rgba(245, 239, 230, 0.1);
}

.cb-showcase__brand-header--sb-who-we-serve .cb-showcase__brand-eyebrow {
    color: var(--cs-accent);
}

.cb-showcase__brand-header--sb-who-we-serve h2 {
    color: var(--cs-cream);
}

.cb-showcase__brand-header--sb-who-we-serve p {
    color: rgba(245, 239, 230, 0.7);
}

.cb-showcase__brand-eyebrow {
    display: inline-block;
    margin: 0 0 20px;
    padding: 6px 14px;
    border: 1px solid currentColor;
    color: var(--cc-gold-dark);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.cb-showcase__brand-header h2 {
    margin: 0 auto 12px !important;
    font-family: inherit;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(36px, 5vw, 68px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.015em;
    max-width: 20ch;
}

.cb-showcase__brand-header p {
    max-width: 560px;
    margin: 0 auto;
    color: var(--cc-ink-soft);
    font-size: 15px;
    line-height: 1.65;
}


/* --- Reduced motion -------------------------------------------------- */

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

    .cb-reveal,
    .cb-split .cb-word>span {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .cb-marquee__track {
        animation: none !important;
    }

    .cb-parallax-img img {
        transform: none !important;
    }

    .cb-newsletter__aurora {
        animation: none !important;
    }

    .cb-manifesto__track {
        transform: none !important;
    }

    .cb-quotes__row {
        transform: none !important;
    }

    .cb-gallery__cell img {
        transform: none !important;
    }

    .cb-journey__line-fill {
        transform: scaleY(1) !important;
    }

    .cb-step .cb-step__dot {
        background: var(--cs-accent);
        border-color: var(--cs-accent);
    }

    .cb-method {
        transform: none !important;
    }

    .cc-hero__glow,
    .cc-b2b__track {
        animation: none !important;
    }

    .cc-heritage__frame img {
        transform: none !important;
    }

    .cc-product__reveal {
        transform: translateY(0);
    }
}


/* ==========================================================================
   Who We Serve — trade landing page.

   Six patterns (hero, hotels split, offices split, retailers solo, why-buy
   grid, volume CTA). Reuses the .cb-* type primitives so headings, ledes
   and buttons match the rest of the site — new classes below are layout-
   only (splits, three-column grid, hero cover overrides).
   ========================================================================== */

/* --- Hero ------------------------------------------------------------- */

.wws-hero {
    padding: 0;
    color: var(--cs-cream);
}

.wws-hero .wp-block-cover__inner-container {
    width: 100%;
    padding: clamp(80px, 12vw, 160px) 32px;
}

.wws-hero__inner {
    max-width: 1180px;
    margin: 0 auto;
}

.wws-hero .cb-display {
    color: var(--cs-cream) !important;
}

/* --- Split (text + image, two variants) ------------------------------- */

.wws-split {
    background: #ffffff;
}

.wws-split--cream {
    background: var(--cs-cream);
}

.wws-split__inner {
    width: 100%;
}

.wws-split__cols {
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

.wws-split__media .wp-block-image,
.wws-split__image {
    margin: 0;
}

.wws-split__image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: linear-gradient(135deg, #eadfce, #d9c9b0);
}

.wws-split__body .cb-display {
    margin-bottom: 24px;
    font-size: clamp(36px, 4.5vw, 72px) !important;
}

/* Reverse the visual order without changing the block tree — keeps the
 * DOM logical (copy first) while placing the image on the left/right. */
.wws-split--reverse .wws-split__cols {
    flex-direction: row-reverse;
}

@media (max-width: 900px) {

    .wws-split__cols,
    .wws-split--reverse .wws-split__cols {
        flex-direction: column-reverse;
        gap: 40px;
    }

    .wws-split__image img {
        aspect-ratio: 4 / 3;
    }
}

/* --- Solo (text-only feature) ----------------------------------------- */

.wws-solo {
    background: var(--cs-espresso);
    color: var(--cs-cream);
}

.wws-solo__inner {
    max-width: 900px;
    text-align: left;
}

.wws-solo .cb-display,
.wws-solo .cb-eyebrow {
    color: var(--cs-cream);
}

.wws-solo .cb-display {
    color: var(--cs-cream) !important;
}

.wws-solo .cb-lede {
    color: rgba(245, 239, 230, 0.78);
}

/* --- Why buy from us (3-col benefit grid) ----------------------------- */

.wws-why--cream {
    background: var(--cs-cream);
}

.wws-why__head {
    max-width: 780px;
    margin-bottom: clamp(48px, 6vw, 88px);
}

.wws-why__head .cb-display {
    font-size: clamp(40px, 5vw, 80px) !important;
}

.wws-why__grid {
    gap: clamp(32px, 4vw, 56px);
    align-items: stretch;
}

.wws-why__card {
    position: relative;
    padding: 40px 32px;
    background: #ffffff;
    border-radius: 4px;
    border-top: 3px solid var(--cs-accent);
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 20px 40px -30px rgba(26, 15, 8, 0.35);
    /* Hidden by default so who-we-serve.js can stagger them in without a
     * flash-of-visible on load. Reduced-motion + no-JS fallbacks below. */
    opacity: 0;
    transform: translateY(40px);
}

@media (prefers-reduced-motion: reduce) {
    .wws-why__card {
        opacity: 1;
        transform: none;
    }
}

.no-js .wws-why__card {
    opacity: 1;
    transform: none;
}

.wws-why__num {
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.28em;
    color: var(--cs-accent);
    text-transform: uppercase;
}

.wws-why__title {
    margin: 0 !important;
    color: var(--cs-espresso);
    font-family: inherit;
    font-size: clamp(20px, 1.6vw, 26px) !important;
    line-height: 1.2 !important;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.wws-why__copy {
    margin: 0;
    color: rgba(26, 15, 8, 0.72);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.6;
}

/* --- Let's Talk Volume CTA banner ------------------------------------- */

.wws-cta {
    background: var(--cs-espresso);
    color: var(--cs-cream);
    text-align: center;
}

.wws-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(197, 106, 45, 0.28), transparent 60%);
    pointer-events: none;
    /* Slow pulse so the CTA has a heartbeat — kept CSS-only because it's
     * decorative and doesn't need to sync with anything else. */
    animation: wwsCtaGlow 6s ease-in-out infinite;
}

@keyframes wwsCtaGlow {

    0%,
    100% {
        opacity: 0.65;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wws-cta::before {
        animation: none;
    }
}

.wws-cta__inner {
    position: relative;
    text-align: center;
}

.wws-cta .cb-eyebrow--light {
    color: var(--cs-accent);
}

.wws-cta .cb-display {
    color: var(--cs-cream) !important;
}

.wws-cta .cb-lede {
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================================
   About Us — parent brand landing page.

   Two dark bookend sections (intro + working-with-us CTA) plus two reused
   .wws-split feature sections in the middle. Only the two dark sections
   need their own styles; the splits inherit from the Who We Serve system.
   ========================================================================== */

.abt-intro,
.abt-cta {
    background: var(--cs-espresso);
    color: var(--cs-cream);
    text-align: center;
}
.abt-intro .cb-display,
.abt-cta .cb-display {
    color: var(--cs-cream) !important;
}
.abt-intro .cb-lede,
.abt-cta .cb-lede {
    color: rgba(245, 239, 230, 0.78);
    margin-left: auto;
    margin-right: auto;
}
.abt-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 100%, rgba(197, 106, 45, 0.22), transparent 55%);
    pointer-events: none;
}


/* ==========================================================================
   Contact — form + info card + latest products.
   ========================================================================== */

.ctc-intro {
    background: var(--cs-cream);
    text-align: center;
}
.ctc-intro .cb-lede { margin-left: auto; margin-right: auto; }

.ctc-form { background: #ffffff; }
.ctc-form__cols { gap: clamp(32px, 5vw, 72px); }

/* --- Form body -------------------------------------------------------- */

.ctc-form__body { min-width: 0; }

.ctc-form__body .wp-block-shortcode {
    margin-top: 24px;
    padding: 24px;
    background: var(--cs-cream);
    border-radius: 4px;
}

/* --- Info aside card -------------------------------------------------- */

.ctc-info {
    padding: 40px 32px;
    background: var(--cs-espresso);
    color: var(--cs-cream);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.ctc-info .cb-eyebrow { color: var(--cs-accent); margin: 0; }

.ctc-info__title {
    margin: 0;
    font-family: inherit;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--cs-cream);
}

/* Each row is a wp:group with a label paragraph and a value paragraph.
 * The wp-block-group default margin is neutralised so the rows stack
 * flush with a divider between them. */
.ctc-info__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(245, 239, 230, 0.12);
    margin: 0 !important;
}
.ctc-info__row:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.ctc-info__label {
    margin: 0 !important;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(245, 239, 230, 0.55);
}
.ctc-info__value {
    margin: 0 !important;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.55;
    color: var(--cs-cream);
}
.ctc-info__value a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease;
}
.ctc-info__value a:hover { color: var(--cs-accent); }


/* --- Latest products strip ------------------------------------------- */

.ctc-latest__head {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: clamp(32px, 5vw, 64px);
}
.ctc-latest__head .cb-eyebrow { margin: 0 0 12px; }
.ctc-latest__head .cb-display {
    margin: 0;
    flex: 1 1 auto;
    font-size: clamp(36px, 4.5vw, 68px) !important;
}
.ctc-latest__all {
    align-self: center;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cs-accent);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--cs-accent);
    transition: color 0.25s ease, border-color 0.25s ease;
}
.ctc-latest__all:hover {
    color: var(--cs-espresso);
    border-color: var(--cs-espresso);
}

@media (max-width: 900px) {
    .ctc-form__cols { flex-direction: column; }
    .ctc-info { order: -1; }
    .ctc-latest__head { flex-direction: column; align-items: flex-start; }
}


/* ==========================================================================
   Christopher Cocoa · Homepage additions (patterns 25 to 28).

   Four new sections:
   - .cc-showcase  Drinking cocoa product duo
   - .cc-mix       Hot cocoa mix feature split
   - .cc-lifestyle Full bleed lifestyle break with pull quote
   - .cc-manifesto Cocoa manifesto marquee (extends .cb-manifesto)
   ========================================================================== */


/* --- Shared utility ---------------------------------------------------- */

.cc-eyebrow--gold {
    color: var(--cc-gold);
}


/* --- Pattern 25 · Drinking cocoa showcase ---------------------------- */

.cc-showcase {
    background: var(--cc-cream);
}

.cc-showcase__head {
    max-width: 720px;
    margin: 0 auto clamp(48px, 6vw, 88px);
    text-align: center;
}
.cc-showcase__head .cc-eyebrow,
.cc-showcase__head .cc-lede {
    margin-left: auto;
    margin-right: auto;
}
.cc-showcase__head .cc-display {
    font-size: clamp(48px, 6vw, 96px) !important;
    margin-bottom: 24px;
}

.cc-showcase__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 64px);
    margin: 0 auto clamp(48px, 5vw, 72px);
}

.cc-showcase__card {
    display: flex;
    flex-direction: column;
    text-align: center;
    background: transparent;
    padding: 0;
}
.cc-showcase__card .cc-showcase__image {
    margin: 0 0 32px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #ece3d0;
    border-radius: 2px;
}
.cc-showcase__card .cc-showcase__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.cc-showcase__card:hover .cc-showcase__image img {
    transform: scale(1.03);
}

.cc-showcase__weight {
    margin: 0 0 12px !important;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--cc-gold-dark);
}
.cc-showcase__name {
    margin: 0 0 12px !important;
    font-family: inherit;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(22px, 2vw, 30px) !important;
    line-height: 1.15 !important;
    color: var(--cc-ink);
    letter-spacing: -0.01em;
}
.cc-showcase__note {
    margin: 0;
    color: var(--cc-ink-soft);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.6;
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 720px) {
    .cc-showcase__grid { grid-template-columns: 1fr; gap: 48px; }
}


/* --- Pattern 26 · Hot cocoa mix feature ------------------------------ */

.cc-mix {
    background: var(--cc-cocoa);
    color: var(--cc-cream);
    overflow: hidden;
}
.cc-mix::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(184, 137, 74, 0.22), transparent 55%),
                radial-gradient(circle at 0% 100%, rgba(184, 137, 74, 0.12), transparent 50%);
    pointer-events: none;
}
.cc-mix > * {
    position: relative;
}

.cc-mix__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}

.cc-mix__media {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    padding: 0;
}
.cc-mix__media .cc-mix__image {
    margin: 0;
    max-width: 480px;
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.35));
}
.cc-mix__media .cc-mix__image img {
    width: 100%;
    height: auto;
    display: block;
}

.cc-mix__body {
    background: transparent;
    padding: 0;
}
.cc-mix__body .cc-display {
    color: var(--cc-cream);
    margin-bottom: 24px;
    font-size: clamp(40px, 5vw, 76px) !important;
}
.cc-mix__body .cc-lede {
    color: rgba(245, 238, 225, 0.78);
    margin-bottom: 32px;
}

.cc-mix__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 32px;
    background: transparent;
    padding: 0;
}
.cc-mix__pill {
    margin: 0 !important;
    padding: 8px 16px;
    border: 1px solid rgba(212, 162, 106, 0.35);
    border-radius: 999px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cc-gold-light);
    background: rgba(20, 9, 10, 0.35);
}

@media (max-width: 900px) {
    .cc-mix__grid { grid-template-columns: 1fr; }
    .cc-mix__media { order: -1; }
}


/* --- Pattern 27 · Lifestyle break ------------------------------------ */

.cc-lifestyle {
    position: relative;
    padding: 0;
    min-height: 78vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--cc-cocoa-deep);
    color: var(--cc-cream);
}

.cc-lifestyle__frame {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 0;
    background: transparent;
    padding: 0;
}
.cc-lifestyle__image,
.cc-lifestyle__frame .wp-block-image {
    position: absolute;
    inset: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}
.cc-lifestyle__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.1);
    will-change: transform;
}
.cc-lifestyle__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(20, 9, 10, 0.35) 0%, rgba(20, 9, 10, 0.7) 100%);
    pointer-events: none;
}

.cc-lifestyle__overlay {
    position: relative;
    z-index: 1;
    max-width: 780px;
    padding: 32px;
    text-align: center;
    background: transparent;
}
.cc-lifestyle__overlay .cc-display {
    color: var(--cc-cream);
    font-size: clamp(38px, 5vw, 78px) !important;
    line-height: 1.08 !important;
    margin-bottom: 24px;
}
.cc-lifestyle__attr {
    margin: 0;
    color: rgba(245, 238, 225, 0.7);
    font-family: inherit;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


/* --- Pattern 28 · CC manifesto marquee ------------------------------- */
/* Inherits layout from .cb-manifesto — we just repaint it in cream + gold. */

.cc-manifesto {
    background: var(--cc-cream);
    color: var(--cc-ink);
}
.cc-manifesto .cb-manifesto__word {
    color: var(--cc-ink);
}
.cc-manifesto .cb-manifesto__word--accent {
    color: var(--cc-gold);
}
.cc-manifesto .cb-manifesto__dot {
    color: var(--cc-gold-dark);
}
.cc-manifesto__eyebrow,
.cc-manifesto .cb-manifesto__eyebrow {
    color: var(--cc-gold-dark);
}
.cc-manifesto__eyebrow span,
.cc-manifesto .cb-manifesto__eyebrow span {
    color: var(--cc-ink);
}
.cc-manifesto__caption,
.cc-manifesto .cb-manifesto__caption {
    color: var(--cc-ink-soft);
}


/* ==========================================================================
   /cc/ preview page chrome.

   Same interception approach as /showcase/ (see .cb-showcase-page rules
   above), so Blocksy's hero, breadcrumbs and container padding are already
   hidden. We only need the intro block, table of contents and sticky
   label strip in cocoa palette here.
   ========================================================================== */

.cc-preview {
    background: var(--cc-cream);
    color: var(--cc-ink);
}

.cc-preview__intro {
    background: var(--cc-cocoa-deep);
    color: var(--cc-cream);
    padding: clamp(100px, 14vw, 180px) 32px clamp(80px, 10vw, 140px);
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.cc-preview__intro::before {
    content: "";
    position: absolute;
    inset: -30% -20% auto auto;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184, 137, 74, 0.28), transparent 60%);
    z-index: -1;
    filter: blur(30px);
}

.cc-preview__intro .cc-eyebrow { color: var(--cc-gold); }
.cc-preview__intro .cc-display {
    color: var(--cc-cream) !important;
    max-width: 22ch;
    margin: 0 auto 24px;
    font-size: clamp(44px, 6vw, 90px) !important;
}
.cc-preview__intro .cc-lede {
    color: rgba(245, 238, 225, 0.72);
    max-width: 640px;
    margin: 0 auto 40px;
}
.cc-preview__intro code {
    background: rgba(184, 137, 74, 0.18);
    color: var(--cc-gold-light);
    padding: 2px 8px;
    border-radius: 3px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.85em;
}

/* Table of contents pill list ------------------------------------------ */

.cc-preview__toc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 12px;
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: cc-toc;
}

.cc-preview__toc a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(245, 238, 225, 0.22);
    border-radius: 999px;
    color: var(--cc-cream);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.cc-preview__toc a:hover {
    background: var(--cc-gold);
    border-color: var(--cc-gold);
    color: var(--cc-cocoa-deep);
}
.cc-preview__toc a span {
    color: var(--cc-gold);
    font-weight: 700;
}
.cc-preview__toc a:hover span {
    color: var(--cc-cocoa-deep);
}

/* Sticky per-pattern label strip --------------------------------------- */

.cc-preview__item { position: relative; }

.cc-preview__label {
    position: sticky;
    top: 0;
    z-index: 8;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 32px;
    background: rgba(20, 9, 10, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--cc-cream);
    font-family: inherit;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(245, 238, 225, 0.1);
}
.cc-preview__label strong {
    color: var(--cc-gold);
    font-weight: 700;
    margin-right: 12px;
}
.cc-preview__label em {
    font-style: normal;
    color: rgba(245, 238, 225, 0.55);
    letter-spacing: 0.06em;
    text-transform: none;
    font-size: 12px;
    max-width: 60%;
    text-align: right;
}

@media (max-width: 700px) {
    .cc-preview__label { flex-direction: column; align-items: flex-start; gap: 4px; }
    .cc-preview__label em { max-width: 100%; text-align: left; }
}