/* ==========================================================
   CRAFT BOXES UK
   INDUSTRY PAGE MASTER TEMPLATE
=========================================================== */


/* ==========================================================
   ROOT
=========================================================== */

.cbi-page {

    --cbi-white: #ffffff;

    --cbi-cream: #f7efe8;
    --cbi-cream-light: #fcf8f5;
    --cbi-cream-dark: #efe2d7;

    --cbi-ink: #302019;
    --cbi-ink-soft: #51433b;
    --cbi-muted: #786a62;

    --cbi-orange: #c64a0b;
    --cbi-orange-dark: #a93d08;
    --cbi-orange-soft: rgba(198,74,11,.075);

    --cbi-kraft: #c98649;
    --cbi-kraft-dark: #804516;

    --cbi-olive: #51543a;

    --cbi-border: #e2d2c5;
    --cbi-border-dark: #ceb8a7;

    --cbi-container: 1500px;

    --cbi-shadow:
        0 24px 65px rgba(62,35,20,.075);

    width: 100%;

    min-width: 0;

    overflow: hidden;

    color: var(--cbi-ink);

    font-family:
        "Manrope",
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;
}


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

.cbi-page,
.cbi-page *,
.cbi-page *::before,
.cbi-page *::after {

    box-sizing: border-box;
}


.cbi-page h1,
.cbi-page h2,
.cbi-page h3,
.cbi-page p {

    margin-top: 0;
}


.cbi-page a {

    color: inherit;

    text-decoration: none;
}


.cbi-page img {

    display: block;

    max-width: 100%;
}


.cbi-page svg {

    display: block;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.cbi-page i {

    font-style: normal;
}


/* ==========================================================
   SAFE CONTAINER
=========================================================== */

.cbi-shell {

    width: min(
        calc(100% - clamp(32px,5.6vw,88px)),
        var(--cbi-container)
    ) !important;

    max-width: var(--cbi-container) !important;

    margin-inline: auto !important;

    padding-inline: 0 !important;
}


/* ==========================================================
   GLOBAL EYEBROW
=========================================================== */

.cbi-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 14px;

    color: var(--cbi-orange-dark);

    font-size: 12px;

    font-weight: 850;

    line-height: 1.3;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.cbi-eyebrow::before {

    content: "";

    display: block;

    width: 25px;

    height: 2px;

    flex: 0 0 auto;

    border-radius: 999px;

    background: var(--cbi-orange);
}


/* ==========================================================
   GLOBAL HEADINGS
=========================================================== */

.cbi-section-head {

    max-width: 900px;

    margin-bottom:
        clamp(28px,3vw,40px);
}


.cbi-section-head h2,
.cbi-split-head h2 {

    max-width: 860px;

    margin: 0;

    font-size:
        clamp(34px,3.55vw,53px);

    font-weight: 830;

    line-height: 1.04;

    letter-spacing: -.047em;
}


.cbi-section-head > p {

    max-width: 720px;

    margin:
        15px
        0
        0;

    color: var(--cbi-muted);

    font-size: 15px;

    line-height: 1.72;
}


.cbi-split-head {

    display: grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(310px,.62fr);

    gap:
        clamp(35px,6vw,90px);

    align-items: end;

    margin-bottom:
        clamp(28px,3vw,42px);
}


.cbi-split-head > p {

    max-width: 590px;

    margin:
        0
        0
        2px
        auto;

    color: var(--cbi-muted);

    font-size: 15px;

    line-height: 1.72;
}


/* ==========================================================
   GENERIC TEXT LINK
=========================================================== */

.cbi-text-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 20px;

    color: var(--cbi-orange-dark) !important;

    font-size: 13px;

    font-weight: 850;
}


/* ==========================================================
   BUTTON
=========================================================== */

.cbi-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 52px;

    padding:
        13px
        19px;

    color: var(--cbi-white) !important;

    border-radius: 11px;

    background: var(--cbi-orange-dark);

    font-size: 13px;

    font-weight: 850;
}


/* ==========================================================
   01 — HERO
=========================================================== */

.cbi-hero {

    padding:
        0
        0
        58px;

    background:
        radial-gradient(
            circle at 76% 12%,
            rgba(198,74,11,.065),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #fbf7f3 0%,
            #f6ede5 100%
        );
}


/* Breadcrumb */

.cbi-breadcrumb {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 9px;

    min-height: 58px;

    color: var(--cbi-muted);

    font-size: 12px;

    font-weight: 680;
}


.cbi-breadcrumb span[aria-current="page"] {

    color: var(--cbi-ink);

    font-weight: 800;
}


/* Hero grid */

.cbi-hero__grid {

    display: grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(420px,.76fr);

    gap:
        clamp(50px,7vw,105px);

    align-items: center;
}


.cbi-hero__content {

    min-width: 0;
}


.cbi-hero h1 {

    max-width: 820px;

    margin:
        0
        0
        22px;

    color: var(--cbi-ink);

    font-size:
        clamp(52px,6vw,88px);

    font-weight: 850;

    line-height: .94;

    letter-spacing: -.06em;
}


.cbi-hero__intro {

    max-width: 760px;

    margin:
        0
        0
        27px;

    color: var(--cbi-muted);

    font-size: 16px;

    line-height: 1.75;
}


/* ==========================================================
   HERO ACTIONS
=========================================================== */

.cbi-hero__actions {

    display: grid;

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

    gap: 10px;
}


.cbi-hero__actions a {

    display: grid;

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

    gap: 11px;

    align-items: center;

    min-height: 86px;

    padding: 13px;

    border:
        1px solid
        var(--cbi-border);

    border-radius: 13px;

    background:
        rgba(255,255,255,.48);

    transition:
        transform 170ms ease,
        border-color 170ms ease,
        background-color 170ms ease;
}


.cbi-hero__actions a:hover {

    transform: translateY(-2px);

    border-color:
        rgba(198,74,11,.32);

    background: var(--cbi-white);
}


.cbi-hero__action-icon {

    display: grid;

    place-items: center;

    width: 42px;

    height: 42px;

    color: var(--cbi-orange-dark);

    border:
        1px solid
        rgba(198,74,11,.17);

    border-radius: 10px;

    background: var(--cbi-orange-soft);
}


.cbi-hero__action-icon svg {

    width: 22px;

    height: 22px;
}


.cbi-hero__actions small,
.cbi-hero__actions strong {

    display: block;
}


.cbi-hero__actions small {

    margin-bottom: 3px;

    color: var(--cbi-orange-dark);

    font-size: 9px;

    font-weight: 900;
}


.cbi-hero__actions strong {

    color: var(--cbi-ink);

    font-size: 12px;

    font-weight: 820;

    line-height: 1.35;
}


.cbi-hero__actions a > i {

    color: var(--cbi-orange-dark);

    font-size: 15px;

    font-weight: 700;
}


/* ==========================================================
   CAPABILITY STRIP
=========================================================== */

.cbi-hero__capabilities {

    display: flex;

    flex-wrap: wrap;

    gap: 8px 20px;

    margin-top: 15px;

    padding:
        12px
        15px;

    border:
        1px solid
        var(--cbi-border);

    border-radius: 11px;

    background:
        rgba(255,255,255,.34);
}


.cbi-hero__capabilities span {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: var(--cbi-ink-soft);

    font-size: 11px;

    font-weight: 700;
}


.cbi-hero__capabilities i {

    display: grid;

    place-items: center;

    width: 18px;

    height: 18px;

    color: var(--cbi-orange-dark);

    font-size: 10px;

    font-weight: 900;
}


/* ==========================================================
   HERO MEDIA
=========================================================== */

.cbi-hero__media {

    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        var(--cbi-border-dark);

    border-radius: 22px;

    background: var(--cbi-white);

    box-shadow: var(--cbi-shadow);
}


.cbi-hero__media-head {

    padding:
        18px
        21px;

    color: var(--cbi-white);

    background: var(--cbi-ink);
}


.cbi-hero__media-head span,
.cbi-hero__media-head strong {

    display: block;
}


.cbi-hero__media-head span {

    margin-bottom: 5px;

    color: #efb27f;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .1em;
}


.cbi-hero__media-head strong {

    color: var(--cbi-white);

    font-size: 16px;

    font-weight: 820;
}


.cbi-hero__image {

    aspect-ratio: 1.18 / 1;

    overflow: hidden;

    background: #efe3dc;
}


.cbi-hero__image img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.cbi-hero__media-foot {

    display: grid;

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

    gap: 15px;

    align-items: center;

    min-height: 52px;

    padding:
        12px
        18px;
}


.cbi-hero__media-foot span {

    color: var(--cbi-orange-dark);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .08em;
}


.cbi-hero__media-foot strong {

    color: var(--cbi-ink);

    font-size: 12px;

    font-weight: 800;
}


/* ==========================================================
   02 — PRODUCT RANGE
   CATEGORY / INDUSTRY PRODUCT CATALOGUE
=========================================================== */

.cbi-products {

    padding:
        58px
        0
        64px;

    background:
        var(--cbi-white);
}


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

.cbi-products__grid {

    display: grid;

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

    gap: 14px;

    width: 100%;

    min-width: 0;
}


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

.cbi-product-card {

    display: flex;

    flex-direction: column;

    min-width: 0;

    height: 100%;

    overflow: hidden;

    border:
        1px solid
        var(--cbi-border);

    border-radius: 15px;

    background:
        var(--cbi-cream-light);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease;
}


.cbi-product-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(198, 74, 11, .30);

    background:
        var(--cbi-white);

    box-shadow:
        0 16px 32px
        rgba(61, 34, 18, .07);
}


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

.cbi-product-card__image {

    position: relative;

    width: 100%;

    aspect-ratio:
        1.22 / 1;

    overflow: hidden;

    background:
        #f1e7e0;
}


.cbi-product-card__image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 300ms ease;
}


.cbi-product-card:hover
.cbi-product-card__image img {

    transform:
        scale(1.025);
}


/* ==========================================================
   PRODUCT BODY
=========================================================== */

.cbi-product-card__body {

    display: flex;

    flex-direction: column;

    flex: 1;

    min-height: 112px;

    padding:
        16px
        17px
        17px;
}


/* ==========================================================
   PRODUCT TITLE
=========================================================== */

.cbi-product-card h3 {

    margin:
        0
        0
        16px;

    color:
        var(--cbi-ink);

    font-size:
        16px;

    font-weight:
        820;

    line-height:
        1.35;

    letter-spacing:
        -.015em;
}


/* ==========================================================
   PRODUCT CTA
=========================================================== */

.cbi-product-card__link {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: auto;

    color:
        var(--cbi-orange-dark);

    font-size:
        11px;

    font-weight:
        850;

    line-height:
        1.4;
}


.cbi-product-card__link i {

    font-style: normal;

    font-size:
        14px;

    transition:
        transform 180ms ease;
}


.cbi-product-card:hover
.cbi-product-card__link i {

    transform:
        translateX(3px);
}


/* ==========================================================
   VIEW COMPLETE CATALOGUE
=========================================================== */

.cbi-products__more {

    display: flex;

    justify-content: center;

    margin-top:
        24px;
}


.cbi-products__more a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 47px;

    padding:
        11px
        19px;

    color:
        var(--cbi-ink);

    border:
        1px solid
        var(--cbi-orange-dark);

    border-radius:
        999px;

    background:
        var(--cbi-white);

    font-size:
        12px;

    font-weight:
        820;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}


.cbi-products__more a:hover {

    transform:
        translateY(-2px);

    color:
        var(--cbi-white);

    background:
        var(--cbi-orange-dark);
}


/* ==========================================================
   VERY LARGE DESKTOP
   5 PRODUCTS PER ROW
=========================================================== */

@media (min-width: 1500px) {

    .cbi-products__grid {

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


    .cbi-product-card__body {

        min-height:
            108px;

        padding:
            15px;
    }


    .cbi-product-card h3 {

        font-size:
            15px;
    }

}


/* ==========================================================
   LAPTOP
=========================================================== */

@media (max-width: 1180px) {

    .cbi-products__grid {

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

        gap:
            13px;
    }

}


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

@media (max-width: 900px) {

    .cbi-products {

        padding:
            52px
            0
            58px;
    }


    .cbi-products__grid {

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

        gap:
            12px;
    }


    .cbi-product-card__image {

        aspect-ratio:
            1.28 / 1;
    }


    .cbi-product-card__body {

        min-height:
            105px;
    }

}


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

@media (max-width: 640px) {

    .cbi-products {

        padding:
            44px
            0
            48px;
    }


    .cbi-products__grid {

        grid-template-columns:
            1fr;

        gap:
            11px;
    }


    .cbi-product-card {

        display: grid;

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

        min-height:
            122px;

        border-radius:
            13px;
    }


    .cbi-product-card__image {

        aspect-ratio:
            auto;

        min-height:
            122px;

        height:
            100%;
    }


    .cbi-product-card__body {

        min-height:
            0;

        padding:
            15px;
    }


    .cbi-product-card h3 {

        margin-bottom:
            13px;

        font-size:
            15px;
    }


    .cbi-product-card__link {

        font-size:
            11px;
    }


    .cbi-products__more {

        margin-top:
            20px;
    }


    .cbi-products__more a {

        width:
            100%;

        max-width:
            320px;
    }

}


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

@media (max-width: 390px) {

    .cbi-product-card {

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

        min-height:
            110px;
    }


    .cbi-product-card__image {

        min-height:
            110px;
    }


    .cbi-product-card__body {

        padding:
            13px;
    }


    .cbi-product-card h3 {

        font-size:
            14px;
    }

}


/* ==========================================================
   REDUCED MOTION
=========================================================== */

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

    .cbi-product-card,
    .cbi-product-card__image img,
    .cbi-product-card__link i,
    .cbi-products__more a {

        transition-duration:
            .01ms !important;
    }

}


/* ==========================================================
   03 — CHOICE SECTION
=========================================================== */

.cbi-choice {

    padding:
        62px
        0
        66px;

    background:
        linear-gradient(
            180deg,
            #f8f2ed 0%,
            #f4e9e0 100%
        );
}


.cbi-choice__layout {

    display: grid;

    grid-template-columns:
        minmax(0,.86fr)
        minmax(430px,.78fr);

    gap:
        clamp(45px,6vw,88px);

    align-items: center;
}


.cbi-choice__content h2 {

    max-width: 690px;

    margin:
        0
        0
        15px;

    color: var(--cbi-ink);

    font-size:
        clamp(33px,3.5vw,51px);

    font-weight: 830;

    line-height: 1.04;

    letter-spacing: -.047em;
}


.cbi-choice__lead {

    max-width: 690px;

    margin:
        0
        0
        22px;

    color: var(--cbi-muted);

    font-size: 15px;

    line-height: 1.72;
}


/* Choice list */

.cbi-choice__list {

    border-top:
        1px solid
        var(--cbi-border);
}


.cbi-choice__list article {

    display: grid;

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

    gap: 13px;

    align-items: start;

    padding:
        15px
        0;

    border-bottom:
        1px solid
        var(--cbi-border);
}


.cbi-choice__list article > span {

    display: grid;

    place-items: center;

    width: 41px;

    height: 41px;

    color: var(--cbi-orange-dark);

    border-radius: 10px;

    background: var(--cbi-orange-soft);

    font-size: 10px;

    font-weight: 900;
}


.cbi-choice__list strong {

    display: block;

    margin-bottom: 4px;

    color: var(--cbi-ink);

    font-size: 14px;

    font-weight: 820;
}


.cbi-choice__list p {

    max-width: 560px;

    margin: 0;

    color: var(--cbi-muted);

    font-size: 12px;

    line-height: 1.55;
}


.cbi-choice__list article > i {

    color: var(--cbi-orange-dark);

    font-size: 17px;
}


/* ==========================================================
   DECISION MODEL
=========================================================== */

.cbi-choice__model {

    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        var(--cbi-border-dark);

    border-radius: 19px;

    background: var(--cbi-white);

    box-shadow: var(--cbi-shadow);
}


.cbi-choice__model-head {

    padding:
        18px
        20px;

    color: var(--cbi-white);

    background: var(--cbi-ink);
}


.cbi-choice__model-head span,
.cbi-choice__model-head strong {

    display: block;
}


.cbi-choice__model-head span {

    margin-bottom: 4px;

    color: #efb27f;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .09em;
}


.cbi-choice__model-head strong {

    font-size: 15px;

    font-weight: 820;
}


.cbi-choice__model-canvas {

    position: relative;

    min-height: 405px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(198,74,11,.055),
            transparent 52%
        ),
        var(--cbi-cream-light);
}


.cbi-choice__orbit {

    position: absolute;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%,-50%);

    border:
        1px solid
        rgba(128,69,22,.14);

    border-radius: 50%;
}


.cbi-choice__orbit--inner {

    width: 175px;

    height: 175px;
}


.cbi-choice__orbit--middle {

    width: 265px;

    height: 265px;
}


.cbi-choice__orbit--outer {

    width: 350px;

    height: 350px;
}


.cbi-choice__centre {

    position: absolute;

    z-index: 3;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%,-50%);

    display: grid;

    place-items: center;

    width: 145px;

    height: 145px;

    padding: 16px;

    color: var(--cbi-ink);

    border:
        1px solid
        rgba(198,74,11,.12);

    border-radius: 50%;

    background:
        #f8cfb3;

    text-align: center;
}


.cbi-choice__product-icon {

    display: grid;

    place-items: center;

    width: 40px;

    height: 40px;

    color: var(--cbi-ink);
}


.cbi-choice__product-icon svg {

    width: 34px;

    height: 34px;
}


.cbi-choice__centre small {

    display: block;

    color: var(--cbi-orange-dark);

    font-size: 8px;

    font-weight: 850;

    letter-spacing: .08em;
}


.cbi-choice__centre strong {

    font-size: 12px;

    font-weight: 900;

    letter-spacing: .07em;
}


/* Nodes */

.cbi-choice__node {

    position: absolute;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 105px;

    padding:
        9px
        11px;

    border:
        1px solid
        var(--cbi-border);

    border-radius: 999px;

    background: var(--cbi-white);

    box-shadow:
        0 8px 20px
        rgba(58,34,21,.06);
}


.cbi-choice__node span {

    color: var(--cbi-orange-dark);

    font-size: 8px;

    font-weight: 900;
}


.cbi-choice__node strong {

    color: var(--cbi-ink);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .05em;
}


.cbi-choice__node--protect {

    left: 50%;

    top: 23px;

    transform: translateX(-50%);
}


.cbi-choice__node--fit {

    right: 24px;

    top: 38%;
}


.cbi-choice__node--present {

    right: 48px;

    bottom: 38px;
}


.cbi-choice__node--pack {

    left: 48px;

    bottom: 38px;
}


.cbi-choice__node--deliver {

    left: 24px;

    top: 38%;
}


.cbi-choice__model-foot {

    display: grid;

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

    gap: 15px;

    align-items: center;

    padding:
        14px
        18px;

    border-top:
        1px solid
        var(--cbi-border);
}


.cbi-choice__model-foot span {

    color: var(--cbi-orange-dark);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .08em;
}


.cbi-choice__model-foot strong {

    color: var(--cbi-ink);

    font-size: 12px;

    font-weight: 800;
}


/* Help */

.cbi-choice__help {

    display: grid;

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

    gap: 15px;

    align-items: center;

    margin-top: 28px;

    padding:
        15px
        18px;

    border:
        1px solid
        var(--cbi-border);

    border-radius: 13px;

    background:
        rgba(255,255,255,.5);
}


.cbi-choice__help-icon {

    display: grid;

    place-items: center;

    width: 44px;

    height: 44px;

    color: var(--cbi-white);

    border-radius: 50%;

    background: var(--cbi-orange-dark);

    font-size: 15px;

    font-weight: 900;
}


.cbi-choice__help strong {

    display: block;

    margin-bottom: 3px;

    font-size: 13px;

    font-weight: 820;
}


.cbi-choice__help p {

    margin: 0;

    color: var(--cbi-muted);

    font-size: 11px;

    line-height: 1.5;
}


.cbi-choice__help a {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    min-height: 44px;

    padding:
        11px
        16px;

    color: var(--cbi-white);

    border-radius: 9px;

    background: var(--cbi-ink);

    font-size: 12px;

    font-weight: 820;
}


/* ==========================================================
   04 — INDUSTRY REQUIREMENTS
=========================================================== */

.cbi-requirements {

    padding:
        60px
        0
        66px;

    background: var(--cbi-white);
}


.cbi-requirements__grid {

    display: grid;

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

    border-top:
        1px solid
        var(--cbi-border);

    border-left:
        1px solid
        var(--cbi-border);
}


.cbi-requirements__grid article {

    position: relative;

    min-width: 0;

    min-height: 220px;

    padding:
        22px;

    border-right:
        1px solid
        var(--cbi-border);

    border-bottom:
        1px solid
        var(--cbi-border);

    background: var(--cbi-cream-light);
}


.cbi-requirements__grid article > span {

    position: absolute;

    right: 17px;

    top: 17px;

    color: var(--cbi-orange-dark);

    font-size: 9px;

    font-weight: 900;
}


.cbi-requirements__icon {

    display: grid;

    place-items: center;

    width: 46px;

    height: 46px;

    margin-bottom: 30px;

    color: var(--cbi-orange-dark);

    border-radius: 12px;

    background: var(--cbi-orange-soft);

    font-size: 19px;

    font-weight: 700;
}


.cbi-requirements__grid h3 {

    margin:
        0
        0
        7px;

    color: var(--cbi-ink);

    font-size: 17px;

    font-weight: 820;
}


.cbi-requirements__grid p {

    margin: 0;

    color: var(--cbi-muted);

    font-size: 13px;

    line-height: 1.6;
}


/* ==========================================================
   05 — MATERIALS
=========================================================== */

.cbi-materials {

    padding:
        60px
        0
        66px;

    background:
        linear-gradient(
            180deg,
            #f8f1eb,
            #f3e8df
        );
}


.cbi-materials__grid {

    display: grid;

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

    border-top:
        1px solid
        var(--cbi-border);

    border-left:
        1px solid
        var(--cbi-border);
}


.cbi-materials__grid article {

    display: grid;

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

    gap: 20px;

    align-items: center;

    min-width: 0;

    padding: 20px;

    border-right:
        1px solid
        var(--cbi-border);

    border-bottom:
        1px solid
        var(--cbi-border);

    background:
        rgba(255,255,255,.6);
}


.cbi-materials__sample {

    display: grid;

    place-items: center;

    width: 118px;

    height: 105px;

    border:
        1px solid
        var(--cbi-border-dark);

    border-radius: 12px;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .08em;
}


.cbi-materials__sample--fbb {

    color: #4d4742;

    background: #f3f0eb;
}


.cbi-materials__sample--kraft {

    color: #56300e;

    background: #c6894c;
}


.cbi-materials__sample--corrugated {

    color: #57330f;

    background:
        repeating-linear-gradient(
            90deg,
            #c88849 0 7px,
            #dda46c 7px 14px
        );
}


.cbi-materials__sample--rigid {

    color: var(--cbi-white);

    background: #6c6058;
}


.cbi-materials__grid article > div:last-child > span {

    display: block;

    margin-bottom: 5px;

    color: var(--cbi-orange-dark);

    font-size: 9px;

    font-weight: 900;
}


.cbi-materials__grid h3 {

    margin:
        0
        0
        7px;

    font-size: 17px;

    font-weight: 820;
}


.cbi-materials__grid p {

    margin:
        0
        0
        8px;

    color: var(--cbi-muted);

    font-size: 13px;

    line-height: 1.58;
}


.cbi-materials__grid small {

    display: block;

    color: var(--cbi-ink-soft);

    font-size: 11px;

    font-weight: 760;

    line-height: 1.5;
}


/* Decision */

.cbi-materials__decision {

    display: grid;

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

    gap: 25px;

    align-items: center;

    margin-top: 14px;

    padding:
        15px
        18px;

    color: var(--cbi-white);

    border-radius: 12px;

    background: var(--cbi-ink);
}


.cbi-materials__decision > span {

    color: #efb27f;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .08em;
}


.cbi-materials__decision > div {

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto
        1fr
        auto
        1fr
        auto
        1fr
        auto;

    gap: 8px;

    align-items: center;
}


.cbi-materials__decision strong {

    color: var(--cbi-white);

    font-size: 10px;

    font-weight: 760;

    white-space: nowrap;
}


.cbi-materials__decision i {

    height: 1px;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.25) 0 4px,
            transparent 4px 8px
        );
}


/* ==========================================================
   06 — PRINT
=========================================================== */

.cbi-print {

    padding:
        60px
        0
        66px;

    background: var(--cbi-white);
}


.cbi-print__grid {

    display: grid;

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

    gap: 14px;
}


.cbi-print__panel {

    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        var(--cbi-border-dark);

    border-radius: 16px;

    background: var(--cbi-cream-light);
}


.cbi-print__panel header {

    display: grid;

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

    gap: 12px;

    align-items: center;

    min-height: 82px;

    padding:
        17px
        19px;

    color: var(--cbi-white);

    background: var(--cbi-ink);
}


.cbi-print__panel header > span {

    display: grid;

    place-items: center;

    width: 42px;

    height: 42px;

    color: #efb27f;

    border:
        1px solid
        rgba(255,255,255,.15);

    border-radius: 10px;

    font-size: 11px;

    font-weight: 900;
}


.cbi-print__panel header small,
.cbi-print__panel header strong {

    display: block;
}


.cbi-print__panel header small {

    margin-bottom: 3px;

    color: #efb27f;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .09em;
}


.cbi-print__panel header strong {

    color: var(--cbi-white);

    font-size: 15px;

    font-weight: 820;
}


.cbi-print__options {

    padding:
        4px
        19px;
}


.cbi-print__options > div {

    display: grid;

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

    gap: 20px;

    padding:
        14px
        0;

    border-bottom:
        1px solid
        var(--cbi-border);
}


.cbi-print__options > div:last-child {

    border-bottom: 0;
}


.cbi-print__options strong {

    color: var(--cbi-ink);

    font-size: 13px;

    font-weight: 820;
}


.cbi-print__options p {

    margin: 0;

    color: var(--cbi-muted);

    font-size: 12px;

    line-height: 1.55;
}


.cbi-print__note {

    display: grid;

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

    gap: 25px;

    margin-top: 14px;

    padding:
        18px
        21px;

    color: var(--cbi-white);

    border-radius: 13px;

    background: var(--cbi-olive);
}


.cbi-print__note > span {

    color:
        rgba(255,255,255,.7);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .09em;
}


.cbi-print__note p {

    margin: 0;

    color:
        rgba(255,255,255,.8);

    font-size: 13px;

    line-height: 1.62;
}


.cbi-print__note strong {

    color: var(--cbi-white);
}


/* ==========================================================
   07 — BUYING GUIDE
=========================================================== */

.cbi-guide {

    padding:
        64px
        0
        70px;

    background:
        linear-gradient(
            180deg,
            #f8f1eb,
            #f3e8df
        );
}


.cbi-guide__layout {

    display: grid;

    grid-template-columns:
        minmax(285px,.45fr)
        minmax(0,1fr);

    gap:
        clamp(48px,7vw,100px);

    align-items: start;
}


/* Index */

.cbi-guide__index {

    position: sticky;

    top: 24px;
}


.cbi-guide__index h2 {

    margin:
        0
        0
        14px;

    font-size:
        clamp(32px,3.3vw,48px);

    font-weight: 830;

    line-height: 1.05;

    letter-spacing: -.045em;
}


.cbi-guide__index > p {

    margin:
        0
        0
        22px;

    color: var(--cbi-muted);

    font-size: 13px;

    line-height: 1.65;
}


.cbi-guide__index nav {

    border-top:
        1px solid
        var(--cbi-border);
}


.cbi-guide__index nav a {

    display: grid;

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

    gap: 10px;

    padding:
        12px
        0;

    border-bottom:
        1px solid
        var(--cbi-border);

    color: var(--cbi-muted);

    font-size: 12px;

    font-weight: 730;
}


.cbi-guide__index nav span {

    color: var(--cbi-orange-dark);

    font-size: 9px;

    font-weight: 900;
}


/* Article */

.cbi-guide__article {

    overflow: hidden;

    border:
        1px solid
        var(--cbi-border-dark);

    border-radius: 19px;

    background: var(--cbi-white);

    box-shadow: var(--cbi-shadow);
}


.cbi-guide__article section {

    padding:
        clamp(28px,4vw,48px);

    border-bottom:
        1px solid
        var(--cbi-border);
}


.cbi-guide__article section:last-child {

    border-bottom: 0;
}


.cbi-guide__article section > span {

    display: block;

    margin-bottom: 9px;

    color: var(--cbi-orange-dark);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .08em;
}


.cbi-guide__article h3 {

    max-width: 780px;

    margin:
        0
        0
        15px;

    color: var(--cbi-ink);

    font-size:
        clamp(23px,2.3vw,34px);

    font-weight: 820;

    line-height: 1.16;

    letter-spacing: -.03em;
}


.cbi-guide__article p {

    max-width: 870px;

    margin:
        0
        0
        14px;

    color: var(--cbi-muted);

    font-size: 15px;

    line-height: 1.78;
}


.cbi-guide__article p:last-child {

    margin-bottom: 0;
}


/* ==========================================================
   08 — PROCESS
=========================================================== */

.cbi-process {

    padding:
        60px
        0
        66px;

    background: var(--cbi-white);
}


.cbi-process__track {

    display: grid;

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

    border-top:
        1px solid
        var(--cbi-border);

    border-left:
        1px solid
        var(--cbi-border);
}


.cbi-process__track article {

    min-width: 0;

    padding: 20px;

    border-right:
        1px solid
        var(--cbi-border);

    border-bottom:
        1px solid
        var(--cbi-border);

    background: var(--cbi-cream-light);
}


.cbi-process__track article > span {

    display: grid;

    place-items: center;

    width: 39px;

    height: 39px;

    margin-bottom: 32px;

    color: var(--cbi-orange-dark);

    border-radius: 50%;

    background: var(--cbi-orange-soft);

    font-size: 11px;

    font-weight: 900;
}


.cbi-process__track small,
.cbi-process__track strong {

    display: block;
}


.cbi-process__track small {

    margin-bottom: 4px;

    color: var(--cbi-orange-dark);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .08em;
}


.cbi-process__track strong {

    margin-bottom: 7px;

    color: var(--cbi-ink);

    font-size: 15px;

    font-weight: 820;
}


.cbi-process__track p {

    margin: 0;

    color: var(--cbi-muted);

    font-size: 12px;

    line-height: 1.58;
}


/* ==========================================================
   09 — PACKAGING BY REQUIREMENT
=========================================================== */

.cbi-requirement-routes {

    padding:
        60px
        0
        66px;

    background:
        linear-gradient(
            180deg,
            #f8f1eb,
            #f2e6dc
        );
}


.cbi-requirement-routes__grid {

    display: grid;

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

    gap: 11px;
}


.cbi-requirement-routes__grid article {

    position: relative;

    min-width: 0;

    min-height: 240px;

    padding:
        19px;

    border:
        1px solid
        var(--cbi-border);

    border-radius: 15px;

    background: var(--cbi-white);
}


.cbi-requirement-routes__grid article > span {

    display: block;

    margin-bottom: 42px;

    color: var(--cbi-orange-dark);

    font-size: 10px;

    font-weight: 900;
}


.cbi-requirement-routes__grid h3 {

    margin:
        0
        0
        8px;

    color: var(--cbi-ink);

    font-size: 17px;

    font-weight: 820;

    line-height: 1.3;
}


.cbi-requirement-routes__grid p {

    margin:
        0
        0
        16px;

    color: var(--cbi-muted);

    font-size: 12px;

    line-height: 1.58;
}


.cbi-requirement-routes__grid strong {

    position: absolute;

    left: 19px;

    bottom: 18px;

    color: var(--cbi-orange-dark);

    font-size: 10px;

    font-weight: 850;
}


/* ==========================================================
   10 — RELATED STYLES
=========================================================== */

.cbi-styles {

    padding:
        60px
        0
        66px;

    background: var(--cbi-white);
}


.cbi-styles__grid {

    display: grid;

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

    gap: 12px;
}


.cbi-styles__grid > a {

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding: 12px;

    border:
        1px solid
        var(--cbi-border);

    border-radius: 15px;

    background: var(--cbi-cream-light);
}


.cbi-styles__image {

    aspect-ratio: 1.28 / 1;

    margin-bottom: 14px;

    overflow: hidden;

    border-radius: 10px;

    background: #efe4dc;
}


.cbi-styles__image img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}


.cbi-styles__grid > a > span {

    margin-bottom: 6px;

    color: var(--cbi-orange-dark);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .07em;
}


.cbi-styles__grid > a > strong {

    margin-bottom: 6px;

    color: var(--cbi-ink);

    font-size: 16px;

    font-weight: 820;
}


.cbi-styles__grid small {

    margin-bottom: 17px;

    color: var(--cbi-muted);

    font-size: 12px;

    line-height: 1.55;
}


.cbi-styles__grid i {

    margin-top: auto;

    color: var(--cbi-orange-dark);

    font-size: 11px;

    font-weight: 850;
}


/* ==========================================================
   11 — ORDERING
=========================================================== */

.cbi-order {

    padding:
        62px
        0
        68px;

    background:
        linear-gradient(
            180deg,
            #f8f1eb,
            #f4e9df
        );
}


.cbi-order__layout {

    display: grid;

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

    gap:
        clamp(45px,7vw,95px);

    align-items: center;
}


.cbi-order__intro h2 {

    max-width: 630px;

    margin:
        0
        0
        16px;

    color: var(--cbi-ink);

    font-size:
        clamp(33px,3.5vw,52px);

    font-weight: 830;

    line-height: 1.04;

    letter-spacing: -.046em;
}


.cbi-order__intro p {

    max-width: 600px;

    margin:
        0
        0
        22px;

    color: var(--cbi-muted);

    font-size: 15px;

    line-height: 1.7;
}


/* Dashboard */

.cbi-order__dashboard {

    overflow: hidden;

    border:
        1px solid
        var(--cbi-border-dark);

    border-radius: 18px;

    background: var(--cbi-white);

    box-shadow: var(--cbi-shadow);
}


.cbi-order__dashboard > header {

    padding:
        19px
        21px;

    color: var(--cbi-white);

    background: var(--cbi-ink);
}


.cbi-order__dashboard > header span,
.cbi-order__dashboard > header strong {

    display: block;
}


.cbi-order__dashboard > header span {

    margin-bottom: 4px;

    color: #efb27f;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .09em;
}


.cbi-order__dashboard > header strong {

    color: var(--cbi-white);

    font-size: 16px;

    font-weight: 820;
}


.cbi-order__cards {

    display: grid;

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

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

    border-top:
        1px solid
        var(--cbi-border);

    margin: 20px;
}


.cbi-order__cards article {

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding: 16px;

    border-right:
        1px solid
        var(--cbi-border);

    border-bottom:
        1px solid
        var(--cbi-border);
}


.cbi-order__cards article > span {

    display: block;

    margin-bottom: 25px;

    color: var(--cbi-orange-dark);

    font-size: 9px;

    font-weight: 900;
}


.cbi-order__cards strong {

    display: block;

    margin-bottom: 6px;

    color: var(--cbi-ink);

    font-size: 13px;

    font-weight: 820;
}


.cbi-order__cards p {

    margin:
        0
        0
        16px;

    color: var(--cbi-muted);

    font-size: 11px;

    line-height: 1.55;
}


.cbi-order__cards a {

    margin-top: auto;

    color: var(--cbi-orange-dark);

    font-size: 10px;

    font-weight: 850;
}


.cbi-order__links {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin:
        0
        20px
        20px;
}


.cbi-order__links a {

    padding:
        8px
        10px;

    color: var(--cbi-ink-soft);

    border:
        1px solid
        var(--cbi-border);

    border-radius: 999px;

    background: var(--cbi-cream-light);

    font-size: 10px;

    font-weight: 750;
}


/* ==========================================================
   12 — FAQ
=========================================================== */

.cbi-faq {

    padding:
        62px
        0
        68px;

    background: var(--cbi-white);
}


.cbi-faq__layout {

    display: grid;

    grid-template-columns:
        minmax(280px,.45fr)
        minmax(0,1fr);

    gap:
        clamp(45px,7vw,100px);

    align-items: start;
}


.cbi-faq__intro h2 {

    max-width: 570px;

    margin:
        0
        0
        14px;

    color: var(--cbi-ink);

    font-size:
        clamp(32px,3.4vw,49px);

    font-weight: 830;

    line-height: 1.05;

    letter-spacing: -.045em;
}


.cbi-faq__intro p {

    max-width: 470px;

    margin: 0;

    color: var(--cbi-muted);

    font-size: 14px;

    line-height: 1.68;
}


.cbi-faq__list {

    border-top:
        1px solid
        var(--cbi-border-dark);
}


.cbi-faq details {

    border-bottom:
        1px solid
        var(--cbi-border-dark);
}


.cbi-faq summary {

    display: grid;

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

    gap: 18px;

    align-items: center;

    padding:
        19px
        0;

    cursor: pointer;

    color: var(--cbi-ink);

    font-size: 15px;

    font-weight: 820;

    list-style: none;
}


.cbi-faq summary::-webkit-details-marker {

    display: none;
}


.cbi-faq summary > span {

    display: grid;

    place-items: center;

    width: 36px;

    height: 36px;

    color: var(--cbi-orange-dark);

    border:
        1px solid
        var(--cbi-border);

    border-radius: 50%;

    background: var(--cbi-cream-light);

    font-size: 18px;

    font-weight: 500;

    transition: transform 180ms ease;
}


.cbi-faq details[open]
summary > span {

    transform: rotate(45deg);
}


.cbi-faq details > div {

    padding:
        0
        58px
        18px
        0;
}


.cbi-faq details p {

    max-width: 850px;

    margin: 0;

    color: var(--cbi-muted);

    font-size: 14px;

    line-height: 1.72;
}


/* ==========================================================
   13 — FINAL CTA
=========================================================== */

.cbi-final {

    padding:
        58px
        0
        66px;

    background:
        linear-gradient(
            180deg,
            #f8f1eb,
            #ffffff
        );
}


.cbi-final__panel {

    display: grid;

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

    gap: 35px;

    align-items: center;

    padding:
        clamp(30px,4vw,54px);

    overflow: hidden;

    color: var(--cbi-white);

    border-radius: 23px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(198,74,11,.24),
            transparent 32%
        ),
        var(--cbi-ink);
}


.cbi-final__content {

    max-width: 850px;
}


.cbi-final__content > span {

    display: block;

    margin-bottom: 11px;

    color: #efb27f;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .1em;
}


.cbi-final h2 {

    margin:
        0
        0
        14px;

    color: var(--cbi-white);

    font-size:
        clamp(34px,4vw,58px);

    font-weight: 830;

    line-height: 1.02;

    letter-spacing: -.048em;
}


.cbi-final__content p {

    max-width: 730px;

    margin: 0;

    color:
        rgba(255,255,255,.68);

    font-size: 14px;

    line-height: 1.7;
}


.cbi-final__actions {

    display: grid;

    gap: 9px;

    min-width: 235px;
}


.cbi-final__actions a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    min-height: 50px;

    padding:
        13px
        16px;

    border-radius: 10px;

    font-size: 12px;

    font-weight: 850;
}


.cbi-final__primary {

    color: var(--cbi-ink) !important;

    background: var(--cbi-white);
}


.cbi-final__secondary {

    color: var(--cbi-white) !important;

    border:
        1px solid
        rgba(255,255,255,.18);
}


.cbi-final__route {

    grid-column:
        1 / -1;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto
        1fr
        auto
        1fr
        auto
        1fr
        auto;

    gap: 9px;

    align-items: center;

    margin-top: 8px;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(255,255,255,.11);
}


.cbi-final__route span {

    color:
        rgba(255,255,255,.6);

    font-size: 9px;

    font-weight: 850;

    letter-spacing: .07em;
}


.cbi-final__route i {

    height: 1px;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.21) 0 5px,
            transparent 5px 10px
        );
}


/* ==========================================================
   LARGE LAPTOP
=========================================================== */

@media (max-width: 1180px) {

    .cbi-hero__grid {

        grid-template-columns:
            minmax(0,1fr)
            minmax(380px,.72fr);

        gap: 48px;
    }


    .cbi-requirement-routes__grid {

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


    .cbi-order__cards {

        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 900px) {

    .cbi-split-head {

        grid-template-columns: 1fr;

        gap: 17px;
    }


    .cbi-split-head > p {

        max-width: 720px;

        margin-left: 0;
    }


    /* Hero */

    .cbi-hero__grid {

        grid-template-columns: 1fr;

        gap: 36px;
    }


    .cbi-hero__media {

        width:
            min(100%,760px);
    }


    /* Products */

    .cbi-products__grid {

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


    /* Choice */

    .cbi-choice__layout {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .cbi-choice__model {

        width:
            min(100%,720px);

        margin-inline: auto;
    }


    /* Requirements */

    .cbi-requirements__grid {

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


    /* Materials */

    .cbi-materials__decision {

        grid-template-columns: 1fr;

        gap: 11px;
    }


    /* Guide */

    .cbi-guide__layout {

        grid-template-columns: 1fr;

        gap: 28px;
    }


    .cbi-guide__index {

        position: relative;

        top: auto;
    }


    .cbi-guide__index nav {

        display: grid;

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


    .cbi-guide__index nav a {

        padding: 12px;

        border-right:
            1px solid
            var(--cbi-border);
    }


    /* Process */

    .cbi-process__track {

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


    /* requirements */

    .cbi-requirement-routes__grid {

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


    /* styles */

    .cbi-styles__grid {

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


    /* Ordering */

    .cbi-order__layout {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    /* FAQ */

    .cbi-faq__layout {

        grid-template-columns: 1fr;

        gap: 28px;
    }

}


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

@media (max-width: 640px) {

    .cbi-shell {

        width:
            calc(100% - 32px) !important;

        max-width: none !important;
    }


    .cbi-products,
    .cbi-choice,
    .cbi-requirements,
    .cbi-materials,
    .cbi-print,
    .cbi-guide,
    .cbi-process,
    .cbi-requirement-routes,
    .cbi-styles,
    .cbi-order,
    .cbi-faq,
    .cbi-final {

        padding:
            46px
            0;
    }


    /* Global headings */

    .cbi-section-head h2,
    .cbi-split-head h2 {

        font-size:
            clamp(30px,9.5vw,40px);
    }


    .cbi-section-head > p,
    .cbi-split-head > p {

        font-size: 14px;

        line-height: 1.68;
    }


    /* Hero */

    .cbi-hero {

        padding-bottom: 43px;
    }


    .cbi-breadcrumb {

        min-height: 52px;

        font-size: 11px;
    }


    .cbi-hero h1 {

        font-size:
            clamp(44px,14vw,61px);
    }


    .cbi-hero__intro {

        font-size: 15px;

        line-height: 1.7;
    }


    .cbi-hero__actions {

        grid-template-columns: 1fr;
    }


    .cbi-hero__actions a {

        min-height: 67px;
    }


    .cbi-hero__capabilities {

        display: grid;

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

        gap: 10px;
    }


    .cbi-hero__image {

        aspect-ratio: 1 / 1;
    }


    .cbi-hero__media-foot {

        grid-template-columns: 1fr;

        gap: 3px;
    }


    /* Products */

    .cbi-products__grid {

        grid-template-columns: 1fr;
    }


    /* Choice */

    .cbi-choice__content h2 {

        font-size:
            clamp(30px,9vw,40px);
    }


    .cbi-choice__list article {

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

        gap: 11px;
    }


    .cbi-choice__list article > span {

        width: 38px;

        height: 38px;
    }


    .cbi-choice__model-canvas {

        min-height: 345px;
    }


    .cbi-choice__orbit--outer {

        width: 290px;

        height: 290px;
    }


    .cbi-choice__orbit--middle {

        width: 220px;

        height: 220px;
    }


    .cbi-choice__orbit--inner {

        width: 155px;

        height: 155px;
    }


    .cbi-choice__centre {

        width: 125px;

        height: 125px;
    }


    .cbi-choice__node {

        min-width: 88px;

        padding:
            7px
            8px;
    }


    .cbi-choice__node strong {

        font-size: 8px;
    }


    .cbi-choice__node--fit {

        right: 6px;
    }


    .cbi-choice__node--deliver {

        left: 6px;
    }


    .cbi-choice__node--present {

        right: 16px;

        bottom: 28px;
    }


    .cbi-choice__node--pack {

        left: 16px;

        bottom: 28px;
    }


    .cbi-choice__model-foot {

        grid-template-columns: 1fr;

        gap: 4px;
    }


    .cbi-choice__help {

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

        gap: 12px;
    }


    .cbi-choice__help a {

        grid-column:
            1 / -1;

        justify-content: center;

        width: 100%;
    }


    /* Requirements */

    .cbi-requirements__grid {

        grid-template-columns: 1fr;
    }


    .cbi-requirements__grid article {

        min-height: 0;
    }


    .cbi-requirements__icon {

        margin-bottom: 22px;
    }


    /* Materials */

    .cbi-materials__grid {

        grid-template-columns: 1fr;
    }


    .cbi-materials__grid article {

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

        gap: 15px;

        padding: 16px;
    }


    .cbi-materials__sample {

        width: 100px;

        height: 90px;
    }


    .cbi-materials__decision > div {

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

        gap: 5px;
    }


    .cbi-materials__decision i {

        display: none;
    }


    .cbi-materials__decision strong {

        white-space: normal;

        text-align: center;

        font-size: 9px;
    }


    /* Printing */

    .cbi-print__grid {

        grid-template-columns: 1fr;
    }


    .cbi-print__options > div {

        grid-template-columns: 1fr;

        gap: 4px;
    }


    .cbi-print__note {

        grid-template-columns: 1fr;

        gap: 7px;
    }


    /* Buying guide */

    .cbi-guide__index h2 {

        font-size:
            clamp(30px,9vw,40px);
    }


    .cbi-guide__index nav {

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


    .cbi-guide__article {

        border-radius: 15px;
    }


    .cbi-guide__article section {

        padding:
            25px
            18px;
    }


    .cbi-guide__article p {

        font-size: 14px;

        line-height: 1.72;
    }


    /* Process */

    .cbi-process__track {

        grid-template-columns: 1fr;
    }


    .cbi-process__track article {

        display: grid;

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

        gap:
            3px
            12px;
    }


    .cbi-process__track article > span {

        grid-row:
            1 / 4;

        margin: 0;
    }


    .cbi-process__track p {

        grid-column: 2;
    }


    /* Requirements */

    .cbi-requirement-routes__grid {

        grid-template-columns: 1fr;
    }


    .cbi-requirement-routes__grid article {

        min-height: 205px;
    }


    /* Styles */

    .cbi-styles__grid {

        grid-template-columns: 1fr;
    }


    /* Ordering */

    .cbi-order__intro h2 {

        font-size:
            clamp(30px,9.5vw,40px);
    }


    .cbi-order__cards {

        margin: 15px;
    }


    .cbi-order__links {

        margin:
            0
            15px
            15px;
    }


    /* FAQ */

    .cbi-faq summary {

        font-size: 14px;
    }


    .cbi-faq details > div {

        padding-right: 0;
    }


    /* Final */

    .cbi-final__panel {

        grid-template-columns: 1fr;

        padding:
            27px
            20px;

        border-radius: 18px;
    }


    .cbi-final h2 {

        font-size:
            clamp(31px,10vw,42px);
    }


    .cbi-final__actions {

        min-width: 0;
    }


    .cbi-final__route {

        grid-template-columns:
            repeat(5,1fr);

        gap: 5px;
    }


    .cbi-final__route i {

        display: none;
    }


    .cbi-final__route span {

        text-align: center;

        font-size: 8px;
    }

}


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

@media (max-width: 390px) {

    .cbi-shell {

        width:
            calc(100% - 24px) !important;
    }


    .cbi-hero__capabilities {

        grid-template-columns: 1fr;
    }


    .cbi-choice__model-canvas {

        min-height: 320px;
    }


    .cbi-choice__orbit--outer {

        width: 255px;

        height: 255px;
    }


    .cbi-choice__orbit--middle {

        width: 195px;

        height: 195px;
    }


    .cbi-choice__node {

        min-width: 76px;
    }


    .cbi-choice__node strong {

        font-size: 7px;
    }


    .cbi-materials__grid article {

        grid-template-columns: 1fr;
    }


    .cbi-materials__sample {

        width: 100%;

        height: 105px;
    }


    .cbi-materials__decision > div {

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

        gap: 9px;
    }


    .cbi-guide__index nav {

        grid-template-columns: 1fr;
    }

}


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

.cbi-page a:focus-visible,
.cbi-page summary:focus-visible {

    outline:
        3px solid
        rgba(198,74,11,.3);

    outline-offset: 4px;
}


/* ==========================================================
   REDUCED MOTION
=========================================================== */

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

    .cbi-page *,
    .cbi-page *::before,
    .cbi-page *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}

.cbi-pagination { padding-block: 22px 50px; }
.cbi-pagination .woocommerce-pagination { margin: 0; }
.cbi-products__empty { grid-column: 1 / -1; padding: 30px; background: #fff; border: 1px solid #eadfd8; }