/* === Assets from HTML migration === */
/* =================================================================
   Butterball™ Farms — style.css
   Sections in DOM order: Reset/base → Utilities → Buttons → Header →
   Hero → Trusted Partners → Responsive
   ================================================================= */

:root {
    --c-navy: #0c1b3d;
    /* hero / dark background */
    --c-navy-deep: #00081d;
    --c-blue: #16399e;
    /* brand blue (header bar, eyebrows) */
    --c-yellow: #ffd200;
    /* primary accent */
    --c-yellow-bright: #ffe800;
    /* badge */
    --c-white: #ffffff;
    --c-text: #0c1b3d;
    --c-border-light: #e8ecf5;
}

/* === Reset / base === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    font: 400 17px/30px 'Inter', sans-serif;
    color: var(--c-text);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease;
}

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

ul {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    color: var(--c-text);
    line-height: 1.15;
}

.main-wrapper {
    position: relative;
    overflow: hidden;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    background: var(--c-yellow);
    color: var(--c-navy);
    padding: 10px 18px;
    border-radius: 0 0 8px 0;
    font-weight: 700;
}

.skip-link:focus {
    left: 0;
}

/* === Utilities === */
/* Let Bootstrap own .container/.row/.col-*. These only widen the max-width. */
.container.long {
    max-width: 1420px;
}

.container.wide {
    max-width: 1344px;
}

.container.smalls {
    max-width: 1200px
}

.container.xs-smalls {
    max-width: 1000px
}

.relative {
    position: relative;
}

.z_99 {
    position: relative;
    z-index: 99;
}

.clr_yellow {
    color: var(--c-yellow);
}

.clr_blue {
    color: var(--c-blue);
}

.text_upper {
    text-transform: uppercase;
}

/* === Buttons (pill) === */
.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 25px;
    border-radius: 50px;
    border: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.cta-btn.btn_yellow {
    background: var(--c-yellow);
    border-color: var(--c-yellow);
    color: var(--c-navy);
    box-shadow: 0 6px 16px rgba(20, 24, 40, .14);
}

.cta-btn.btn_yellow:hover {
    background: #ffdd33;
    border-color: #ffdd33;
}

.cta-btn.btn_outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
}

.cta-btn.btn_outline:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
}

.cta-btn.btn_blue_outline {
    background: transparent;
    border-color: var(--c-blue);
    color: var(--c-blue);
}

.cta-btn.btn_blue_outline:hover {
    background: var(--c-blue);
    color: #fff;
}

.cta-btn.btn_blue_solid {
    background: #0054a4;
    border-color: #0054a4;
    color: #fff;
}

.cta-btn.btn_blue_solid:hover {
    background: #00417f;
    border-color: #00417f;
}

/* =================================================================
   === Header ===
   ================================================================= */
.header-area {
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0 24px;
}

.header-top {
    max-width: 1396px;
    margin: 0 auto 10px;
    padding: 0 20px;
    display: flex;
    justify-content: flex-end;
}

.header-top-phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--c-white);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 8px rgba(12, 27, 61, .5);
}

.header-top-phone:hover {
    color: var(--c-yellow);
}

.header-top-phone em {
    font-size: 13px;
    color: var(--c-yellow);
}

.header-inn {
    max-width: 1396px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background: rgba(22, 57, 158, .92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 60px;
    box-shadow: 0 12px 40px rgba(12, 27, 61, .25);
    padding: 13px 15px 13px 29px;
}

.header-logo {
    flex-shrink: 0;
}

.header-logo img {
    width: 200px;
    height: 48px;
    object-fit: contain;
    object-position: left center;
}

.header-menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

.mainmenu-list {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
}

.mainmenu-list > li {
    position: relative;
}

.menu-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: #fff;
    line-height: 27px;
    background: none;
    border: 0;
    cursor: pointer;
    justify-content: space-between;
    white-space: nowrap;
}

.menu-link:hover,
.menu-link:focus {
    color: var(--c-yellow);
}

.menu-link:hover,
.menu-link:focus {
    border: none !important;
    outline: none
}

.header-area .cta-btn {
    padding: 10px 34px;
    box-shadow: none
}

/* Caret via Bootstrap's .dropdown-toggle::after, themed */
.menu-link.dropdown-toggle::after {
    margin-left: 2px;
    border-top-color: currentColor;
    vertical-align: middle;
    transition: transform .2s ease;
}

.dropdown.show .menu-link.dropdown-toggle::after {
    transform: rotate(180deg);
}

/* Dropdown panel */
.mainmenu .dropdown-menu {
    margin-top: 14px;
    min-width: 240px;
    padding: 10px;
    background: rgba(22, 57, 158, .98);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(12, 27, 61, .4);
}

/* Invisible "bridge" fills the 14px gap between the trigger and the panel so
   the pointer never leaves the hoverable area while moving down to the menu. */
.mainmenu .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
}

.mainmenu .dropdown-item {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
    padding: 4px 14px;
    border-radius: 10px;
    white-space: normal;
}

.mainmenu .dropdown-item:hover,
.mainmenu .dropdown-item:focus {
    background: transparent;
    color: var(--c-yellow);
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-only-cta {
    display: none;
}

.phone-call-m {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
}

.phone-call-m em {
    color: var(--c-yellow);
}

.phone-call {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: 2px solid rgba(255, 255, 255, .7);
    border-radius: 50px;
    padding: 11px 24px;
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    white-space: nowrap;
}

.phone-call:hover {
    border-color: #fff;
    color: #fff;
}

.phone-call em {
    color: var(--c-yellow);
    font-size: 16px;
}

#menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: var(--c-yellow);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

#menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--c-navy);
    border-radius: 2px;
    transition: transform .3s ease, opacity .2s ease;
}

/* active = open: morph the three bars into an X */
#menu-toggle.is-active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

#menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

#menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.section {
    padding: 80px 0
}

.content-text .cta-btn {
    margin-top: 20px
}


/* =================================================================
   === Hero ===
   ================================================================= */
.hero-area {
    position: relative;
    background: var(--c-navy);
    padding: 158px 24px 90px;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(120% 60% at 85% 4%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(182deg, rgba(12, 27, 61, .38) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.hero-text {
    padding-top: 48px;
}

.hero-media {
    padding-top: 48px;
}

.hero-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--c-yellow);
    line-height: 150%;
    margin-bottom: 16px;
}

.hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 52px;
    line-height: 57px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 16px;
}

.hero-heading .accent {
    color: var(--c-yellow);
}

.hero-heading .amp {
    text-transform: uppercase;
    color: #fff;
}

.hero-desc {
    font-size: 18px;
    line-height: 30px;
    color: rgba(255, 255, 255, .9);
    margin-bottom: 18px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 16px;
    justify-content: center
}

/* Media — butter image w/ organic radius + floating badge */
.hero-img-wrap {
    position: relative;
    padding-right: 30px;
}

.text-upper {
    text-transform: uppercase
}

.hero-img {
    width: 100%;
    aspect-ratio: 594 / 535;
    object-fit: cover;
    border-radius: 142px 154px 404px 428px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.hero-badge {
    position: absolute;
    top: 30px;
    right: -80px;
    transform: rotate(8deg);
    width: 150px;
    height: 150px;
    border-radius: 75px;
    background: var(--c-yellow-bright);
    color: var(--c-navy-deep);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Shantell Sans', cursive;
    font-weight: 700;
    font-size: 15px;
    line-height: 19px;
    padding: 18px;
    box-shadow: 0 24px 30px rgba(0, 3, 16, .5);
}

/* Stat bar */
.hero-stats {
    margin-top: 80px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 28px;
    padding: 29px 102px;
    position: relative;
    z-index: 1
}

.hero-stat {
    text-align: center;
}

.hero-stat .num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 28px;
    line-height: 27px;
    color: var(--c-yellow);
    margin-bottom: 5px
}

.hero-stat .label {
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 0
}

/* =================================================================
   === Trusted Partners ===
   ================================================================= */
.partners-area {
    position: relative;
    z-index: 50;
    margin-top: -56px;
    padding-bottom: 70px;
}

.partners-inn {
    background: #fff;
    border: 1px solid var(--c-border-light);
    border-radius: 0;
    box-shadow: 0 24px 30px rgba(12, 27, 61, .12);
    padding: 32px 41px;
    display: flex;
    align-items: center
}

.partners-inn .row {
    min-height: 44px;
}

.partners-inn .row > [class*="col-"] {
    display: flex;
    align-items: center;
}

.partners-label {
    margin: 0;
    padding-right: 30px;
    border-right: 2px solid var(--c-yellow);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--c-blue);
    line-height: 22px;
    white-space: nowrap;
    align-self: stretch;
    display: flex;
    align-items: center;
    margin-right: 30px
}

.partners-track-wrap {
    overflow: hidden;
    padding-left: 24px;
    width: 100%;
}

.partners-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: partners-scroll 30s linear infinite;
}

.partners-track:hover {
    animation-play-state: paused;
}

.partner-logo {
    flex-shrink: 0;
    padding: 0 32px;
    height: 44px;
    display: flex;
    align-items: center;
}

.partner-logo img {
    height: 44px;
    width: auto;
    object-fit: contain;
    opacity: .75;
    filter: grayscale(100%);
    transition: opacity .2s ease, filter .2s ease;
}

.partner-logo img:hover {
    opacity: 1;
    filter: grayscale(0);
}

@keyframes partners-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* =================================================================
   === Shared section heading (light sections) ===
   ================================================================= */
.section-head {
    margin-bottom: 50px;
}

.eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.section-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.14;
    letter-spacing: .2px;
    color: #0e2357;
    margin: 0 0 20px;
}

.section-heading .accent {
    font-weight: 800;
    color: var(--c-blue);
}

.section-intro {
    margin: 18px auto 0;
    max-width: 720px;
    font-size: 16px;
    line-height: 27px;
    color: #3a4252;
}

/* =================================================================
   === Why Brands Partner ===
   ================================================================= */
.why-area {
    background: #fff;
    padding: 80px 0;
}

.why-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--c-border-light);
    border-radius: 18px;
    padding: 32px 30px;
    box-shadow: 0 10px 30px rgba(12, 27, 61, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}

.why-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(12, 27, 61, .12);
}

.why-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 20px;
}

.why-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #0e2357;
    margin: 0 0 12px;
}

.why-card p {
    font-size: 15px;
    line-height: 25px;
    color: #3a4252;
    margin: 0;
}

/* =================================================================
   === Our Solutions (bento grid) ===
   ================================================================= */
.solutions-area {
    padding: 80px 0;
    background: linear-gradient(180deg,#edf2fd 0%, #ffffff 80%);
}

.solution-card {
    display: block;
    position: relative;
    height: 290px;
    border-radius: 18px;
    overflow: hidden;
}

.solution-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.solution-card:hover img {
    transform: scale(1.05);
}

.solution-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 27, 61, 0) 50%, rgba(12, 27, 61, .72) 100%);
}

.solution-label {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(255, 255, 255, .94);
    border-radius: 50px;
    padding: 12px 12px 12px 20px;
}

.solution-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #0e2357;
    line-height: 1.2;
    margin: 0
}

.solution-arrow {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 17px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: transform .2s ease;
}

.solution-card:hover .solution-arrow {
    transform: translateX(3px);
}

/* Solution card dropdowns */
button.solution-card {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.solution-item.is-open {
    position: relative;
    z-index: 5;
}

.solution-item.is-open .solution-label {
    background: #ffd200;
}

.solution-item.is-open .solution-name {
    color: #0c1b3d;
}

.solution-item.is-open .solution-arrow {
    background: #0c1b3d;
    color: #ffd200;
    transform: rotate(90deg);
}

.solution-menu {
    list-style: none;
    margin: 10px 0 0;
    padding: 4px 14px;
    background: #ffffff;
    border: 1px solid #e8edf7;
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(12, 27, 61, 0.08);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height 0.3s ease, opacity 0.25s ease, transform 0.25s ease;
}

.solution-item.is-open .solution-menu {
    opacity: 1;
    transform: translateY(0);
}

.solution-menu li + li {
    border-top: 1px solid #e8edf7;
}

.solution-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 2px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    color: #0e2357;
    transition: color 0.2s ease;
}

.solution-menu a em {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 1px solid #d4ddf0;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #0054a4;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.solution-menu a:hover {
    color: #0054a4;
}

.solution-menu a:hover em {
    background: #0054a4;
    border-color: #0054a4;
    color: #ffffff;
}

/* =================================================================
   === Formats Slider (cream block top) ===
   ================================================================= */
.formats-area {
    background: #fff8e3;
    padding: 80px 0 0;
    border-radius: 60px 60px 0 0;
}

.formats-slider {
    margin: 0 0 50px;
}

.formats-slider .slick-track {
    display: flex;
}

.formats-slider .slick-slide {
    height: auto;
}

.formats-slider .slick-list {
    margin-left: -250px;
    margin-right: -250px
}

.format-slide {
    padding: 8px 23px;
}

.format-card {
    display: block;
    position: relative;
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(12, 27, 61, .1);

}

.format-card img {
    width: 100%;
    aspect-ratio: 520 / 372;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.format-card:hover img {
    transform: scale(1.05);
}

.format-card:focus-visible {
    outline: 3px solid var(--c-blue);
    outline-offset: 3px;
}

.format-caption {
    position: absolute;
    left: 18px;
    bottom: 16px;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13.4px;
    letter-spacing: .96px;
    text-transform: uppercase;
    line-height: 26px;
    padding: 8px 20px;
    border-radius: 50px;
}

/* Slick arrows — navy circles, yellow chevrons */
.formats-slider .slick-prev,
.formats-slider .slick-next {
    width: 52px;
    height: 52px;
    border-radius: 26px;
    background: var(--c-navy);
    z-index: 5;
    transition: background .2s ease;
}

.formats-slider .slick-prev:hover,
.formats-slider .slick-next:hover {
    background: var(--c-blue);
}

.formats-slider .slick-prev {
    left: 30px;
}

.formats-slider .slick-next {
    right: 30px;
}

.formats-slider .slick-prev:before,
.formats-slider .slick-next:before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    opacity: 1;
    color: var(--c-yellow);
    font-size: 18px;
}

.formats-slider .slick-prev:before {
    content: "\f053";
}

.formats-slider .slick-next:before {
    content: "\f054";
}

.formats-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    padding-bottom: 90px;
}

/* =================================================================
   === Process Timeline ===
   ================================================================= */
.timeline-area {
    background: #fff;
    padding: 80px 0;
}

.timeline-list {
    list-style: none;
    margin: 0 0 48px;
    padding: 33px 0 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    border-top: 3px solid var(--c-navy);
}

.timeline-item {
    position: relative;
    padding-top: 64px;
    text-align: center;
}

.timeline-item.is-low {
    padding-top: 120px;
}

/* drop line from the top border down to the badge */
.timeline-item::before {
    content: "";
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 64px;
    background: linear-gradient(180deg, var(--c-navy), rgba(22, 57, 158, .35));
}

.timeline-item.is-low::before {
    height: 120px;
}

.timeline-num {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 58px;
    height: 58px;
    border-radius: 29px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 18px;
    box-shadow: 0 10px 13px rgba(12, 27, 61, .18);
}

.timeline-item.is-low .timeline-num {
    top: 78px;
}

.timeline-img {
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 14px;
    box-shadow: 0 14px 36px rgba(12, 27, 61, .14);
}

.timeline-img img {
    width: 100%;
    aspect-ratio: 240 / 180;
    object-fit: cover;
    display: block;
}

.timeline-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #0e2357;
    margin: 0 0 8px;
}

.timeline-item p {
    font-size: 14px;
    line-height: 23px;
    color: #3a4252;
    margin: 0;
}

/* =================================================================
   === Who We Serve (cream block bottom) ===
   ================================================================= */
.serve-area {
    background: #fff8e3;
    padding: 80px 0;
    border-radius: 0 0 60px 60px;
}

.serve-flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

.serve-flex .item {
    flex: 1;
    padding: 0 15px
}

.serve-item {
    text-align: center;
    display: block
}

.serve-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 132px;
    border-radius: 66px;
    background: #fff;
    border: 1px solid var(--c-border-light);
    box-shadow: 0 14px 16px rgba(12, 27, 61, .1);
    color: var(--c-blue);
    font-size: 32px;
    margin-bottom: 20px;
    position: relative;
    transition: all 0.4s
}

.serve-item:hover .serve-icon {
    background: var(--c-blue);
    transform: translateY(-8px)
}

.serve-item:hover .serve-icon::before {
    border-color: rgba(255, 210, 0, 0.6);
    transform: rotate(30deg);
}

.serve-icon img {
    height: 30px;
}

.serve-item:hover .serve-icon img {
    filter: invert(1)
}

.serve-icon::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 51px;
    border: 2px dashed rgba(22, 57, 158, .18);
    transition: all 0.2s
}

.serve-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #0e2357;
    line-height: 18px;
    margin: 0;
}

/* =================================================================
   === Ready To Order ===
   ================================================================= */
.ready-area {
    background: #fff;
    padding: 80px 0;
}

.ready-head {
    margin-bottom: 26px;
}

.ready-note {
    font-family: 'Shantell Sans', cursive;
    font-weight: 500;
    font-size: 20px;
    color: #0054a4;
    transform: rotate(-2deg);
    display: inline-block;
    margin: 6px 0 0;
}

.ready-intro {
    margin: 0;
    text-align: left;
    max-width: 520px;
}

.ready-col {
    transition: all 0.4s
}

.ready-col:hover {
    transform: translateY(-4px);
}

.ready-card {
    display: block;
    position: relative;
    height: 100%;
    background: #fff;
    border: 1px solid var(--c-border-light);
    border-radius: 18px;
    overflow: visible;
    box-shadow: 0 10px 30px rgba(12, 27, 61, .08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.ready-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(12, 27, 61, .14);
}

.ready-img {
    display: block;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
}

.ready-img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.ready-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 20px;
}

.ready-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #0e2357;
    line-height: 19px;
}

.ready-arrow {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background: #f5f7fb;
    color: var(--c-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background .2s ease, transform .2s ease;
}

.ready-card:hover .ready-arrow {
    background: var(--c-yellow);
    color: var(--c-navy);
    transform: translateX(3px);
}

/* sticker badges */
.ready-badge {
    position: absolute;
    z-index: 3;
    top: -12px;
    font-family: 'Shantell Sans', cursive;
    font-weight: 700;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 999px;
    box-shadow: 0 8px 10px rgba(108, 130, 158, .25);
    white-space: nowrap;
}

.badge-original {
    right: -6px;
    transform: rotate(7deg);
    background: var(--c-yellow-bright);
    color: var(--c-navy-deep);
}

.badge-pick {
    right: -10px;
    transform: rotate(7deg);
    background: var(--c-yellow-bright);
    color: var(--c-navy-deep);
}

.badge-new {
    right: -2px;
    transform: rotate(-6deg);
    background: #0054a4;
    color: #fff;
}

.ready-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 48px;
}

.ready-slider {
    margin-top: 40px
}

/* When Slick is active on the ready slider */
.ready-slider.slick-initialized {
    display: block;
    margin: 0 -12px;
}

.ready-slider.slick-initialized .slick-track {
    display: flex;
    padding: 16px 0 8px;
}

.ready-slider.slick-initialized .slick-slide {
    height: auto;
    padding: 0 12px;
}

.ready-slider.slick-initialized .slick-slide > div {
    height: 100%;
}

.ready-slider.slick-initialized .ready-col {
    width: 100%;
    max-width: none;
    padding: 0;
}

.ready-slider .slick-prev,
.ready-slider .slick-next {
    width: 46px;
    height: 46px;
    border-radius: 23px;
    background: var(--c-navy);
    z-index: 5;
}

.ready-slider .slick-prev:hover,
.ready-slider .slick-next:hover {
    background: var(--c-blue);
}

.ready-slider .slick-prev {
    left: -6px;
}

.ready-slider .slick-next {
    right: -6px;
}

.ready-slider .slick-prev:before,
.ready-slider .slick-next:before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    opacity: 1;
    color: var(--c-yellow);
    font-size: 16px;
}

.ready-slider .slick-prev:before {
    content: "\f053";
}

.ready-slider .slick-next:before {
    content: "\f054";
}

.ready-slider .slick-dots li button:before {
    font-size: 10px;
    color: var(--c-blue);
    opacity: .3;
}

.ready-slider .slick-dots li.slick-active button:before {
    color: var(--c-blue);
    opacity: 1;
}

/* =================================================================
   === Our Mission ===
   ================================================================= */
.mission-area {
    background: #0054A4;
    padding: 80px 0;
    overflow: hidden;
}

.mission-text {
    padding-right: 24px;
}

.mission-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 44px;
    line-height: 1.14;
    text-transform: uppercase;
    color: #fff;
    margin: 14px 0 0;
}

.mission-heading .accent {
    display: block;
    color: var(--c-yellow);
}

.mission-desc {
    font-size: 17px;
    line-height: 29px;
    color: rgba(255, 255, 255, .86);
    max-width: 600px;
    margin: 18px 0 0;
}

.mission-link {
    display: inline-block;
    margin-top: 28px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: #fff;
    border-bottom: 2px solid var(--c-yellow-bright);
    padding-bottom: 6px;
}

.mission-link:hover {
    color: var(--c-yellow);
}

.mission-media {
    position: relative;
    padding: 30px 40px 50px 0;
    min-height: 560px;
}

.mission-img-main {
    width: 100%;
    max-width: 422px;
    aspect-ratio: 422 / 528;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    margin-left: auto;
    display: block;
}

.mission-img-inset {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 58%;
    max-width: 268px;
    aspect-ratio: 268 / 201;
    object-fit: cover;
    border: 5px solid var(--c-navy);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.mission-badge {
    position: absolute;
    top: -4px;
    right: 0;
    transform: rotate(-8deg);
    width: 140px;
    height: 140px;
    border-radius: 70px;
    background: var(--c-yellow-bright);
    color: var(--c-navy-deep);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 20px 25px rgba(0, 3, 16, .5);
    z-index: 3;
}

.mission-badge .mb-num {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1.2;
}

.mission-badge .mb-line {
    font-family: 'Shantell Sans', cursive;
    font-weight: 700;
    font-size: 13.6px;
    line-height: 17px;
}

/* Mission area becomes a positioning context for floats + create card */
.mission-area {
    position: relative;
}

.mission-floats {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.float-img {
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 16px 30px rgba(0, 3, 16, .35);
    will-change: transform;
}

.mission-area .container {
    position: relative;
    z-index: 2;
}

/* =================================================================
   === Let's Create Something (CTA card) ===
   ================================================================= */
.create-card {
    background:
        radial-gradient(60% 90% at 90% 10%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%),
        var(--c-yellow);
    border-radius: 28px;
    padding: 70px 60px;
    text-align: center;
    box-shadow: 0 30px 70px rgba(0, 3, 16, .35);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    position: relative
}

.create-card .footer-shape {
    position: absolute;
    display: block;
}

/* inner image fills the wrapper; carries the perpetual CSS float
   (GSAP drives the wrapper's transform, CSS drives the img's — no clash) */
.footer-shape-img {
    display: block;
    width: 100%;
    height: auto;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .footer-shape-img {
        animation: none !important;
    }
}

/* Seven gentle, out-of-sync float loops */
@keyframes shapeFloatA {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-12px) rotate(2deg);
    }
}

@keyframes shapeFloatB {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(10px) rotate(-2.5deg);
    }
}

@keyframes shapeFloatC {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(6px, -8px) rotate(3deg);
    }
}

@keyframes shapeFloatD {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(-5px, -6px) rotate(-3deg);
    }

    66% {
        transform: translate(5px, -3px) rotate(2deg);
    }
}

.footer-cta-shape-1 .footer-shape-img {
    animation: shapeFloatA 6s ease-in-out infinite;
}

.footer-cta-shape-2 .footer-shape-img {
    animation: shapeFloatB 7s ease-in-out infinite .4s;
}

.footer-cta-shape-3 .footer-shape-img {
    animation: shapeFloatC 5.5s ease-in-out infinite .8s;
}

.footer-cta-shape-4 .footer-shape-img {
    animation: shapeFloatD 6.5s ease-in-out infinite .2s;
}

.footer-cta-shape-5 .footer-shape-img {
    animation: shapeFloatA 7.5s ease-in-out infinite 1s;
}

.footer-cta-shape-6 .footer-shape-img {
    animation: shapeFloatC 6.2s ease-in-out infinite .6s;
}

.footer-cta-shape-7 .footer-shape-img {
    animation: shapeFloatB 5.8s ease-in-out infinite 1.2s;
}
.footer-cta-shape-8 .footer-shape-img {
    animation: shapeFloatB 5.8s ease-in-out infinite 1.2s;
}
.footer-cta-shape-1 {
    top: -45px;
    left: 25px;
    width: 150px;
}

.footer-cta-shape-2 {
    width: 160px;
    top: 75px;
    left: 60px;
}

.footer-cta-shape-3 {
    width: 130px;
    top: -50px;
    right: 180px;
}

.footer-cta-shape-4 {
    width: 380px;
    top: -83px;
    right: -200px;
}

.footer-cta-shape-5 {
    display: block;
    width: 170px;
    bottom: 0;
    right: -23px;
}

.footer-cta-shape-6 {
    display: block;
    width: 200px;
    top: 58%;
    right: 160px;
}

.footer-cta-shape-7 {
    display: block;
    width: 50px;
    bottom: 20px;
    right: 110px;
}
.footer-cta-shape-8 {
    display: block;
    width: 180px;
    bottom: 20px;
    left: -40px;
}

.create-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 42px;
    line-height: 1.22;
    color: var(--c-navy);
    margin: 0;
    margin: 0 auto;
    position: relative;
    z-index: 9
}



.create-heading .accent {
    font-weight: 800;
    text-transform: none;
    color: var(--c-blue);
}

.create-desc {
    max-width: 660px;
    margin: 18px auto 0;
    font-size: 16px;
    line-height: 27px;
    color: rgba(12, 27, 61, .8);
    font-weight: 500;
    position: relative;
    z-index: 9
}

.create-desc .email-link {
    font-weight: 700;
    text-decoration: underline
}

.create-desc a {
    font-weight: 700;
    text-decoration: underline
}

.create-desc a:hover {
    text-decoration: none
}

.create-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 28px;
}

/* =================================================================
   === Footer ===
   ================================================================= */
.footer-cta-area {
    background: #0054A4
}

.footer-cta-area.alt {
    padding-top: 90px
}

.footer-area {
    background: var(--c-navy);
    color: #fff;
    padding-top: 70px;
}

.footer-top {
    padding-bottom: 40px;
}

.footer-logo img {
    width: 320px;
    height: auto;
    margin-bottom: 24px;
}

.footer-social-wrap {
    border-top: 1px solid rgba(255, 255, 255, .15);
    padding-top: 22px;
    max-width: 280px;
}

.footer-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 18px;
}

.footer-area ul {
    padding-left: 0
}

.footer-social {
    display: flex;
    gap: 10px;
    padding-left: 0
}

.footer-social a {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
}

.footer-social a:hover {
    background: var(--c-yellow);
    border-color: var(--c-yellow);
    color: var(--c-navy);
}

.footer-links li {
    margin-bottom: 5px;
}

.footer-links a {
    font-size: 14px;
    color: rgba(255, 255, 255, .72);
    line-height: 27px;
}

.footer-links a:hover {
    color: var(--c-yellow);
}

.footer-email {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50px;
    padding: 13px 13px 13px 23px;
    color: #fff;
    font-size: 14px;
    margin-bottom: 22px;
}

.footer-email:hover {
    border-color: var(--c-yellow);
}

.footer-email-arrow {
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.footer-contact li {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

.footer-contact li em {
    color: var(--c-yellow);
    font-size: 16px;
    margin-top: 6px;
}

.footer-contact a,
.footer-contact span {
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
    line-height: 27px;
}

.footer-contact a:hover {
    color: var(--c-yellow);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 21px 0 20px;
}

.footer-copy {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
}

.footer-legal {
    display: flex;
    gap: 22px;
    justify-content: flex-end;
}

.footer-legal a {
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
}

.footer-legal a:hover {
    color: var(--c-yellow);
}


.divider .line {
    height: 2px;
    background: #000;
    opacity: 0.3;
    margin: 0 auto
}

.divider .line.smalls {
    width: 120px
}


/* =================================================================
   === Scroll reveal (GSAP target classes) ===
   ================================================================= */
/* Once GSAP confirms it's active, pre-hide animated targets to avoid a flash.
   gsap then animates autoAlpha (visibility+opacity) back in on scroll. */
.gsap-ready .why-card,
.gsap-ready .solution-card,
.gsap-ready .timeline-item,
.gsap-ready .serve-item,
.gsap-ready .ready-card,
.gsap-ready .mission-text,
.gsap-ready .mission-media,
.gsap-ready .create-card,
.gsap-ready .footer-widget,
.gsap-ready .footer-brand,
.gsap-ready .section-head,
.gsap-ready .float-img,
.gsap-ready .footer-shape {
    visibility: hidden;
}

/* On mobile the timeline is a slider (no GSAP reveal) — keep items visible */
@media (max-width: 767.98px) {
    .gsap-ready .timeline-item {
        visibility: visible;
    }
}


.butter-morph {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 900;
    width: 150px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.4s, transform 0.4s;
}

.butter-morph.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.butter-morph-disc {
    position: relative;
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--c-yellow);
    box-shadow: 0 16px 44px rgba(12, 27, 61, 0.35);
    background: var(--c-navy);
    cursor: pointer;
    padding: 0;
}

.butter-morph-disc img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.15) rotate(6deg);
    transition: opacity 0.6s ease, transform 0.9s ease;
}

.butter-morph-disc img.active {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.butter-morph-label {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 13px;
    background: var(--c-navy);
    color: var(--c-yellow);
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    box-shadow: 0 8px 22px rgba(12, 27, 61, 0.3);
}


/* =================================================================
   === Responsive ===
   ================================================================= */
@media (max-width: 1400px) {
    .mainmenu-list {
        gap: 18px;
    }

    .hero-heading {
        font-size: 44px;
        line-height: 50px;
    }

    .hero-stats {
        padding: 29px 48px;
    }

    .header-area {
        top: 8px;
    }

    .header-menu {
        gap: 12px;
    }

    .mainmenu {
        display: none;
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        left: 0;
        background: rgba(22, 57, 158, .98);
        border-radius: 24px;
        padding: 20px 24px;
        box-shadow: 0 12px 40px rgba(12, 27, 61, .35);
    }

    .mainmenu.is-open {
        display: block;
    }

    .mainmenu-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        width: 100%;
    }

    .mainmenu-list > li {
        width: 100%;
    }

    .menu-link {
        padding: 8px 0;
        width: 100%;
    }

    /* Submenus open inline (static) inside the mobile panel */
    .mainmenu .dropdown-menu {
        position: static !important;
        transform: none !important;
        margin: 2px 0 8px 14px;
        min-width: 0;
        padding: 4px 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    /* No hover bridge on mobile (panel is static, not floating) */
    .mainmenu .dropdown-menu::before {
        display: none;
    }

    .mainmenu .dropdown-item {
        padding: 6px 0;
    }

    .mobile-only-cta {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, .15);
    }

    .phone-call {
        display: none;
    }

    .header-nav .cta-btn {
        display: none;
    }

    #menu-toggle {
        display: inline-flex;
    }

    .header-logo img {
        width: 200px;
    }

    .header-inn {
        padding: 10px 12px 10px 18px;
        gap: 10px;
    }

    .hero-text {
        padding: 0
    }

    .footer-cta-shape-1 {
        top: -40px;
        left: 0;
        width: 140px;
    }

    .footer-cta-shape-5 {
        top: -35px;
    }

    .footer-cta-shape-2 {
        width: 120px;
        left: -45px;
    }

    .footer-cta-shape-7 {
        width: 80px;
        bottom: 20px;
        right: 30px;
    }

    .footer-cta-shape-3 {
        display: none !important
    }

}

/*
 * Laptops. The full navigation needs about 1050px and the header has room for
 * it from 1280px up, so there is no reason to drop to the hamburger at 1400px.
 * The block above still governs everything else between 1280px and 1400px;
 * this only puts the menu back.
 */
@media (min-width: 1280px) and (max-width: 1400px) {
    .mainmenu {
        display: block;
        position: static;
        top: auto;
        right: auto;
        left: auto;
        background: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
    }

    .mainmenu-list {
        flex-direction: row;
        align-items: center;
        gap: 18px;
        width: auto;
    }

    .mainmenu-list > li {
        width: auto;
    }

    .mainmenu .dropdown-menu {
        /*
         * The block above kills Popper with transform:none!important, so the
         * panel has to be placed by CSS: directly under its own item.
         */
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: auto !important;
        margin: 2px 0 0 !important;
        min-width: 240px;
        padding: 10px;
        background: rgba(22, 57, 158, .98);
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 16px;
        box-shadow: 0 18px 50px rgba(12, 27, 61, .4);
    }

    .mainmenu .dropdown-menu::before {
        display: block;
    }

    .mainmenu .dropdown-item {
        padding: 4px 14px;
    }

    /* The stacked phone + buttons belong to the hamburger panel only. */
    .mobile-only-cta {
        display: none;
    }

    #menu-toggle {
        display: none;
    }

    .header-nav .cta-btn {
        display: inline-flex;
    }

    /* "Where to Buy" carries .phone-call, which the block above hides. Scoped
       to the header so the copy inside the hamburger panel stays hidden. */
    .header-nav .phone-call {
        display: inline-flex;
    }
}


@media (max-width: 991.98px) {

    /* Ready-To-Order intro aligns left under heading on tablet */
    .ready-intro {
        margin-top: 16px;
    }

    .mission-heading {
        font-size: 36px;
    }

    .mission-media {
        padding: 24px 24px 50px 0;
        min-height: 0;
        margin-top: 32px;
    }

    .mission-img-main {
        margin: 0 auto;
    }

    .mission-img-inset {
        right: 12px;
    }

    .mission-badge {
        left: auto;
        right: 8px;
        top: -8px;
    }





    .hero-media {
        max-width: 560px;
    }

    .hero-heading {
        font-size: 40px;
        line-height: 46px;
    }

    .hero-stats {
        margin-top: 48px;
    }

    .formats-area {
        padding: 50px 0;
    }

    .formats-slider .slick-list {
        margin-left: 0px;
        margin-right: 0px;
    }

    .timeline-area {
        padding: 50px 0
    }

    .serve-area {
        padding: 50px 0
    }

    .ready-area {
        padding: 50px 0
    }

    .hero-area {
        padding: 120px 0 70px;
    }

    .header-area {
        padding: 0 15px;
    }

    .hero-text {
        padding-top: 0
    }

    .partners-area {
        margin-top: -36px;
    }

    .hero-heading {
        font-size: 36px;
        line-height: 38px;
    }

    .cta-btn {
        padding: 10px 20px
    }

    .container,
    .container-sm {
        max-width: 100%
    }

    .section-heading {
        font-size: 32px;
    }

    .formats-actions {
        padding: 0
    }

    .formats-actions {
        padding-bottom: 0
    }

    .footer-widget {
        margin: 20px 0
    }

    .footer-logo img {
        margin: 0 auto 20px
    }

    .footer-social-wrap {
        max-width: 100%;
        text-align: center
    }

    .footer-area ul {
        justify-content: center
    }

    .timeline-item {
        min-width: 20%
    }

    .butter-morph {
        display: none;
    }


}

@media (max-width: 767.98px) {

    .timeline-item {
        min-width: inherit
    }

    .hero-heading {
        font-size: 34px;
        line-height: 40px;
    }

    .hero-desc {
        font-size: 16px;
        line-height: 26px;
    }

    .hero-actions .cta-btn {
        flex: 1 1 100%;
    }

    .hero-stats {
        padding: 24px 20px;
    }

    .hero-stat {
        padding: 12px 0;
    }

    .hero-badge {
        width: 120px;
        height: 120px;
        font-size: 13px;
        line-height: 16px;
        top: -10px;
        display: none
    }



    .section-heading {
        font-size: 30px;
    }

    .section-head {
        margin-bottom: 36px;
    }

    .why-area {
        padding: 50px 0;
    }

    .solutions-area {
        padding: 55px 0;
    }

    .create-heading {
        font-size: 28px;
    }

    .create-card {
        padding: 44px 24px;
        margin-top: 50px;
    }

    .mission-area {
        padding-bottom: 90px;
    }

    .float-img {
        display: none;
    }

    .footer-area {
        padding-top: 50px;
    }

    .footer-legal {
        justify-content: center;
        margin-top: 12px;
    }

    .hero-stat .num {
        font-size: 20px
    }

    .ready-slider.slick-initialized {
        margin: 0;
    }

    .ready-slider.slick-initialized .ready-col {
        padding: 0 8px;
        padding-bottom: 20px
    }

    .ready-slider .slick-list {
        padding-right: 60px
    }

    .mission-area {
        padding: 50px 0;
    }

    .create-card {
        margin: 0
    }

    /* Footer CTA shapes — keep only corner accents that clear the text column */
    .footer-cta-shape-1 {
        width: 110px;
        top: -30px;
        left: -26px;
    }

    .footer-cta-shape-2 {
        width: 100px;
        bottom: -26px;
        left: -24px;
    }

    .create-card .footer-cta-shape-3 {
        display: none;
    }

    .create-card .footer-cta-shape-4 {
        display: none;
    }

    .footer-cta-shape-5 {
        width: 88px;
        top: -30px;
        right: -18px;
    }

    .footer-cta-shape-6 {
        width: 84px;
        top: auto;
        bottom: -26px;
        right: -16px;
    }
    .footer-cta-shape-8 {
    width: 76px;
    bottom: -20px;
}
    .create-card .footer-cta-shape-7 {
        display: none;
    }

    /* Process timeline becomes a Slick slider on mobile */
    .timeline-list.slick-initialized {
        display: block;
        grid-template-columns: none;
        gap: 0;
        border-top: 0;
        padding-top: 0;
        margin-bottom: 30px;
    }

    .timeline-list.slick-initialized .timeline-item,
    .timeline-list.slick-initialized .timeline-item.is-low {
        padding: 0 12px 10px;
        height: auto;
    }

    .timeline-list .slick-prev,
    .timeline-list .slick-next {
        width: 44px;
        height: 44px;
        border-radius: 22px;
        background: var(--c-navy);
        z-index: 5;
    }

    .timeline-list .slick-prev {
        left: -4px;
    }

    .timeline-list .slick-next {
        right: -4px;
    }

    .timeline-list .slick-prev:before,
    .timeline-list .slick-next:before {
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        opacity: 1;
        color: var(--c-yellow);
        font-size: 16px;
    }

    .timeline-list .slick-prev:before {
        content: "\f053";
    }

    .timeline-list .slick-next:before {
        content: "\f054";
    }

    .timeline-list .slick-dots {
        position: static;
        margin-top: 14px;
    }

    .timeline-list .slick-dots li button:before {
        font-size: 10px;
        color: var(--c-blue);
        opacity: .3;
    }

    .timeline-list .slick-dots li.slick-active button:before {
        color: var(--c-blue);
        opacity: 1;
    }

    .partners-inn {
        padding: 22px 24px;
        text-align: center;
        display: block
    }
  
    .partners-label {
        border-right: 0;
        border-bottom: 2px solid var(--c-yellow);
        padding: 0 0 14px;
        white-space: normal;
        justify-content: center;
        text-align: center;
        margin-bottom: 0;
        margin-right: 0
    }

    .partners-track-wrap {
        padding-left: 0;
        padding-top: 20px
    }

    .partners-label br {
        display: none
    }

    .why-card {
        padding: 25px
    }

    .format-slide {
        padding: 8px 8px;
    }

}

@media (max-width: 575.98px) {
    .header-logo img {
        width: 190px;
        height: 40px;
    }

    .hero-heading {
        font-size: 30px;
        line-height: 36px;
    }

    .hero-text {
        padding-top: 0;
    }

    .cta-btn {
        line-height: 150%;
        padding: 12px 20px;
    }

    .hero-stats {
        padding: 15px;
    }

    .hero-stats {
        margin-top: 20px;
    }

    .partners-inn {
        display: block;
        text-align: center
    }

    .partners-label {
        display: block;
        margin-right: 0;
    }

    .partners-label br {
        display: none
    }

    .partner-logo {
        padding: 0 15px;
        height: 33px;
    }

    .partner-logo img {
        height: 32px
    }

    .solution-name {
        font-size: 12px;
        line-height: 1.2;
    }

    .solution-label {
        padding: 8px;
        text-align: center;
        justify-content: center
    }

    .solution-arrow {
        display: none
    }

    .solution-menu a {
        font-size: 12px;
        padding: 11px 2px;
    }

    .solution-menu a em {
        width: 22px;
        height: 22px;
        border-radius: 11px;
    }

    .solution-card {
        height: 200px
    }

    .format-slide {
        padding: 8px 10px;
    }

    .cta-btn {
        width: 100%
    }

    .formats-actions {
        padding-bottom: 0
    }

    .timeline-img {
        max-width: 100%;
        margin-bottom: 20px
    }

    .timeline-list {
        gap: 0
    }

    .mission-media {
        margin-bottom: 30px
    }

    /* Small phones: hide decorative shapes entirely — the card is too narrow
       for them to sit anywhere without overlapping the text/buttons */

    .timeline-list .slick-list {
        padding-right: 60px
    }

    .footer-cta-area .footer-shape.footer-cta-shape-1,
    .footer-cta-area .footer-shape.footer-cta-shape-4,
    .footer-cta-area .footer-shape.footer-cta-shape-5 {
        display: block
    }

    .footer-cta-shape-4 {
        width: 70px;
        top: -22px;
        right: 36%;
    }
}

/* =================================================================
   === Food Safety & Quality page ===
   ================================================================= */

/* --- Page hero (dark navy) --- */
.all-banner-shape {
    position: relative
}

.banner-shape {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}
.banner-shape.alt{
    object-fit: cover
}
.page-banner {
    position: relative;
    background: var(--c-navy);
    padding-top: 130px;
    overflow: hidden;
    padding-bottom: 70px;
}

.page-banner .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(182deg, rgba(12, 27, 61, .35) 0%, rgba(14, 33, 80, .35) 55%, rgba(12, 27, 61, .45) 100%);
}

.page-banner .container {
    position: relative;
    z-index: 2;
}

/* Breadcrumb — no list numbers, mixed-case, grey links + yellow current */
.page-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* Row gap kept tight so a breadcrumb that wraps does not open up a gap. */
    gap: 3px 10px;
    line-height: 1.25;
    margin: 20px 0 50px!important;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .2px;
    color: rgba(255, 255, 255, .6);
}

.page-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: var(--c-yellow);
}

.page-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.page-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.page-breadcrumb a:hover {
    color: #fff;
}

.banner-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 46px;
    line-height: 1.05;
    color: #fff;
    margin-bottom: 20px;
}

.banner-heading .accent {
    font-weight: 800;
    color: var(--c-yellow);
}

.page-banner-desc {
    font-size: 16px;
    line-height: 28px;
    color: rgba(255, 255, 255, .84);
    margin-bottom: 25px;
}

.page-banner-desc p a {
    font-weight: 600;
    color: var(--c-yellow);
    text-decoration: underline
}

.page-banner-desc p a:hover {
    color: #fff;
    text-decoration: underline
}

.page-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 35px
}

.page-banner-media {
    position: relative;
    padding: 10px 10px 0 20px;
}

.page-banner-img {
    width: 100%;
    object-fit: cover;
    border-radius: 26px;
    box-shadow: 14px 14px 0 -1px var(--c-yellow), 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35)
}

.page-banner-seal {
    position: absolute;
    top: -14px;
    right: -6px;
    transform: rotate(8deg);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--c-yellow);
    color: var(--c-navy-deep);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    line-height: 1.25;
    letter-spacing: .5px;
    box-shadow: 0 20px 30px rgba(0, 3, 16, .45);
}

/* --- Shared check list --- */
.check-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 16px;
    line-height: 25px;
    color: #3a4252;
}

.fsq-check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-size: 12px;
    margin-top: 1px;
}

.fsq-check-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 16px;
    line-height: 25px;
    color: rgba(255, 255, 255, .92);
}

.fsq-check.yellow {
    background: var(--c-yellow);
    color: var(--c-navy);
}

.check-list {
    padding-left: 0
}

.bg_light_blue {
    background: #FBFCFF
}

.bg_light {
    background: #FAFAFA
}

/* --- Our Approach --- */
.fsq-approach {
    padding: 80px 0;
}

.fsq-approach-desc {
    margin: 22px 0 0;
    font-size: 17px;
    line-height: 28px;
    color: #3a4252;
    max-width: 460px;
}

.fsq-approach-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--c-navy);
    margin: 0 0 24px;
}

/* --- BRCGS Certification --- */
.fsq-brcgs {
    background: #fff;
    padding: 80px 0;
}

.fsq-brcgs-subhead {
    margin: 14px 0 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 21px;
    color: var(--c-blue);
}

.fsq-brcgs-card {
    background: #0054a4;
    border-radius: 32px;
    padding: 40px;
    overflow: hidden;
    position: relative;
    z-index: 9
}

.fsq-brcgs-shape {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    bottom: 0;
    z-index: -9
}

.fsq-brcgs-media img {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
}

.fsq-brcgs-body {
    color: rgba(255, 255, 255, .9);
    padding-left: 10px;
}

.fsq-brcgs-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 34px;
    color: #fff;
    margin: 0 0 18px;
}

.fsq-brcgs-body > p {
    font-size: 15.5px;
    line-height: 25px;
    margin: 0 0 16px;
}

.fsq-brcgs-lead {
    font-weight: 700 !important;
    color: #fff;
    margin-top: 26px !important;
    margin-bottom: 20px !important;
}

/* --- Certifications grid --- */
.fsq-certs {
    background: #fff;
    padding: 0 0 90px;
}

.fsq-cert-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--c-border-light);
    border-radius: 20px;
    padding: 46px 34px 40px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(12, 27, 61, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}

.fsq-cert-card img {
    margin: 0 auto 20px
}

.fsq-cert-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(12, 27, 61, .12);
}

.fsq-cert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    border: 2px solid var(--c-yellow);
    color: var(--c-blue);
    font-size: 30px;
    margin-bottom: 26px;
}

.fsq-cert-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 21px;
    color: var(--c-navy);
    margin: 0 0 16px;
}

.fsq-cert-title .accent {
    color: var(--c-blue);
}

.fsq-cert-card p {
    font-size: 15px;
    line-height: 25px;
    color: #3a4252;
    margin: 0;
}

/* --- Consistency that scales --- */
.fsq-consistency {
    background: #f7f3e9;
    padding: 80px 0;
}

.fsq-consistency-desc {
    margin: 22px 0 0;
    font-size: 17px;
    line-height: 28px;
    color: #3a4252;
    max-width: 500px;
}

.fsq-consistency .cta-btn {
    margin-top: 30px;
}

.content-img {
    position: relative;
    display: block;
}

.content-img.with-border img {
    width: 100%;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 14px 14px 0 -1px var(--c-yellow)
}

/* A picture that opens a video: the play button sits in its centre. */
.content-img-video {
    position: relative;
    display: block;
}

.content-img-video:hover .cr-video-play,
.content-img-video:focus-visible .cr-video-play {
    transform: translate(-50%, -50%) scale(1.06);
}

.content-text p a {
    font-weight: 600;
    text-decoration: underline;
    color: #0154A4;
}

.content-text p a:hover,
.content-text li a:hover {
    text-decoration: none
}

.fsq-accordion {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* --- Recognition band (dark blue) --- */
.fsq-recognition {
    background: #0054a4;
    padding: 80px 0 140px;
}

.section-heading.light {
    color: #fff;
}

.section-heading.light .accent {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 800;
    color: var(--c-yellow);
}

.fsq-recognition-intro {
    margin: 16px auto 0;
    max-width: 560px;
    font-size: 16px;
    line-height: 26px;
    color: rgba(255, 255, 255, .85);
}

.fsq-recognition-logos {
    margin-top: 40px;
}

.fsq-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px;
    border-radius: 18px;
    background: #FFF;
    box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.55);
    height: 100%
}

.fsq-logo.no-shadow {
    box-shadow: none
}

.fsq-logo .polygon {
    position: absolute;
    right: -36px;
    top: 45%;
    transform: translateY(-50%);
}

.fsq-logo img {
    width: auto;
    object-fit: contain;
    border-radius: 6px;
    opacity: .9;
    transition: opacity .2s ease;
    max-height: 90px;
}

.fsq-logo img:hover {
    opacity: 1;
}

/* === Awards Marquee (mobile carousel) === */
.fsq-awards-marquee.slick-initialized {
    display: block;
    margin: 0;
}

.fsq-awards-marquee.slick-initialized .slick-track {
    display: flex;
    align-items: stretch;
}

.fsq-awards-marquee.slick-initialized .slick-slide {
    height: auto;
    padding: 0 10px;
}

.fsq-awards-marquee.slick-initialized .slick-slide > div {
    height: 100%;
}

.fsq-awards-marquee.slick-initialized .fsq-logo .polygon {
    display: none;
}
.partners-label p {
    width: 90%;
    display: block;
    white-space: pre-wrap;
    text-align: center;
    margin-bottom: 0;
}

/* --- Rakesh Responsive --- */
@media (max-width: 991.98px) {
    .page-banner {
        padding: 150px 24px 70px;
    }

    .page-banner-heading {
        font-size: 42px;
    }

    .page-banner-media {
        margin-top: 40px;
        padding: 0;
        max-width: 520px;
    }

    .fsq-approach-desc,
    .fsq-consistency-desc {
        max-width: none;
    }

    .fsq-approach-label {
        margin-top: 36px;
    }

    .fsq-brcgs-card {
        padding: 30px;
    }

    .fsq-brcgs-media {
        margin-bottom: 30px;
    }

    .fsq-brcgs-body {
        padding-left: 0;
    }

    .fsq-consistency-media {
        margin-top: 40px;
    }
}

@media (max-width: 767.98px) {

    .fsq-approach,
.fsq-brcgs,
.fsq-consistency,
.fsq-recognition{
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .fsq-certs {
        padding-bottom: 60px;
    }

    .page-banner-heading {
        font-size: 36px;
    }

    .page-banner-actions,
    .page-banner-actions .cta-btn {
        width: 100%;
    }

    .section-heading {
        font-size: 30px;
    }

    .fsq-brcgs-title {
        font-size: 26px;
    }
    .qc-hero-actions {
        width: 100%;
        flex-direction: column
    }
}

/* =================================================================
   === Case Studies page ===
   ================================================================= */

/* --- Page hero (dark navy) --- */
.cs-hero {
    position: relative;
    background: var(--c-navy);
    padding: 170px 24px 90px;
    overflow: hidden;
}

.cs-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(182deg, rgba(12, 27, 61, .35) 0%, rgba(14, 33, 80, .35) 55%, rgba(12, 27, 61, .45) 100%);
}

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

.cs-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .2px;
    color: rgba(255, 255, 255, .6);
}

.cs-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cs-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: var(--c-yellow);
}

.cs-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.cs-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.cs-breadcrumb a:hover {
    color: #fff;
}

.cs-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 55px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 22px;
}

.cs-hero-heading .accent {
    color: var(--c-yellow);
}

.cs-hero-desc {
    font-size: 18px;
    line-height: 28.8px;
    color: rgba(255, 255, 255, .82);
    max-width: 560px;
    margin-bottom: 18px;
}

.cs-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 6px;
}

.cs-hero-media {
    position: relative;
    padding: 14px 14px 0 20px;
}

.cs-hero-img {
    width: 100%;
    aspect-ratio: 580 / 625;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 14px 14px 0 -1px var(--c-yellow), 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.cs-hero-badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: rotate(-6deg);
    width: 104px;
    height: 104px;
    border-radius: 52px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Shantell Sans', cursive;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 14.4px;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
}

/* --- Testimonial --- */
.cs-testimonial {
    background: #fff;
    padding: 80px 0;
}

.section-heading .accent.accent-blue {
    color: #0054a4;
}

.cs-quote-card {
    margin: 0;
    background: #0054a4;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.cs-quote-body {
    padding: 50px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 9
}

.cs-quote-shape {
    position: absolute;
    right: 0;
    top: 0;
    z-index: -9;
    width: 70%;
    height: 100%
}

.cs-quote-stars {
    color: var(--c-yellow);
    font-size: 24px;
    letter-spacing: 2px;
    margin: 0 0 22px;
}

.cs-quote-text {
    margin: 0;
    font-size: 22px;
    line-height: 35.2px;
    letter-spacing: -.1px;
    color: #fff;
}

.cs-quote-author {
    margin: 38px 0 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.cs-quote-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: .2px;
    color: #fff;
    margin: 0 0 5px;
}

.cs-quote-role {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--c-yellow);
    margin: 0;
}

.cs-quote-media {
    height: 100%;
    min-height: 320px;
}

.cs-quote-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Case Studies editorial list --- */
.cs-studies {
    background: #fff;
    padding: 0 0 90px;
}

.cs-studies-head {
    margin-bottom: 10px;
    max-width: 50%
}

.section-heading .accent.accent-dark {
    color: var(--c-navy);
}

.cs-list {
    border-top: 1px solid var(--c-navy);
}

.cs-item {
    padding: 52px 0 53px;
    border-bottom: 1px solid rgba(12, 27, 61, .12);
}

.cs-item-media {
    border-radius: 18px;
    overflow: hidden;
}

.cs-item-media img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.cs-item-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0054a4;
    margin: 0 0 14px;
}

.cs-item-stat {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 46px;
    line-height: 1;
    letter-spacing: -1.5px;
    color: #0054a4;
    margin: 0;
}

.cs-item-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13.5px;
    line-height: 20.25px;
    color: #3a4252;
    margin: 12px 0 0;
}

.cs-item-body > p:not(.cs-item-eyebrow):not(.cs-item-stat):not(.cs-item-sub) {
    font-size: 16px;
    line-height: 26.88px;
    color: #3a4252;
    margin: 17px 0 0;
}

.cs-item-body a {
    color: var(--c-navy);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(12, 27, 61, .3);
}

.cs-item-body a:hover {
    text-decoration-color: var(--c-navy);
}

/* --- Awards & Recognition band --- */
.cs-awards {
    background: #0054a4;
    padding: 100px 0;
    position: relative;
}

.section-heading.light {
    color: #fff;
}

.section-heading .accent.accent-yellow {
    color: var(--c-yellow);
}

.cs-awards-intro {
    margin: 14px auto 0;
    max-width: 560px;
    font-size: 18px;
    line-height: 28.8px;
    color: rgba(255, 255, 255, .82);
}

.cs-awards-logos {
    margin-top: 20px;
}

.cs-award-card {
    height: 150px;
    background: #fff;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    box-shadow: 0 16px 34px -22px rgba(0, 0, 0, .55);
}

.cs-award-card img {
    max-height: 92px;
    width: auto;
    object-fit: contain;
    border-radius: 6px;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .cs-hero {
        padding: 150px 24px 70px;
    }

    .cs-hero-heading {
        font-size: 42px;
    }

    .cs-hero-media {
        margin-top: 40px;
        padding: 0;
        max-width: 520px;
    }

    .cs-hero-desc {
        max-width: none;
    }

    .cs-quote-body {
        padding: 40px;
    }

    .cs-quote-media {
        min-height: 260px;
    }

    .cs-item-media {
        margin-bottom: 30px;
        max-width: 420px;
    }
}

@media (max-width: 767.98px) {

    .cs-testimonial,
    .cs-awards {
        padding-top: 60px;
    }

    .cs-studies {
        padding-bottom: 60px;
    }

    .cs-hero-heading {
        font-size: 34px;
    }

    .cs-hero-actions,
    .cs-hero-actions .cta-btn {
        width: 100%;
    }

    .section-heading {
        font-size: 30px;
    }

    .cs-quote-text {
        font-size: 18px;
        line-height: 30px;
    }

    .cs-quote-body {
        padding: 32px 24px;
    }

    .cs-item {
        padding: 40px 0;
    }

    .cs-item-stat {
        font-size: 46px;
    }
}

/* =================================================================
   === Media page ===
   ================================================================= */

/* --- Page hero (dark navy, compact) --- */
.media-hero {
    position: relative;
    background: var(--c-navy);
    padding: 168px 24px 66px;
    overflow: hidden;
}

.media-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .1), rgba(255, 210, 0, 0) 60%),
        linear-gradient(182deg, rgba(12, 27, 61, .35) 0%, rgba(14, 33, 80, .35) 55%, rgba(12, 27, 61, .45) 100%);
}

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

.media-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .2px;
    color: rgba(255, 255, 255, .6);
}

.media-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.media-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: var(--c-yellow);
}

.media-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.media-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.media-breadcrumb a:hover {
    color: #fff;
}

.media-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 55px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 20px;
}

.media-hero-heading .accent {
    color: var(--c-yellow);
}

.media-hero-contact {
    font-size: 16px;
    line-height: 25.6px;
    color: rgba(255, 255, 255, .78);
    margin-bottom: 24px;
}

.media-hero-contact a {
    font-weight: 600;
    color: var(--c-yellow);
}

.media-hero-contact a:hover {
    text-decoration: underline;
}

.media-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* --- Media list (year-grouped timeline) --- */
.media-list {
    background: #fff;
    padding: 80px 0 90px;
}

.media-year + .media-year {
    margin-top: 64px;
}

.media-year-head {
    position: sticky;
    top: 120px;
}

.media-year-num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 60px;
    line-height: .9;
    letter-spacing: -1.5px;
    color: var(--c-navy);
    margin: 0 0 13px;
}

.media-year-num span {
    color: var(--c-yellow);
}

.media-year-count {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #3a4252;
    margin: 0;
    display: block
}

/* left timeline rail + dot marker */
.media-year-items {
    position: relative;
    padding-left: 34px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.media-year-items::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(to bottom, rgba(255, 210, 0, .85), rgba(12, 27, 61, .08));
}

.media-year-items::after {
    content: "";
    position: absolute;
    left: -5.5px;
    top: 10px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--c-yellow);
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(255, 210, 0, .4);
}

.media-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 14px;
    padding: 22px 27px;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.media-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 3px;
    background: var(--c-yellow);
    opacity: 0;
    transition: opacity .2s ease;
}

.media-card:hover {
    border-color: rgba(12, 27, 61, .25);
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .3);
}

.media-card:hover::before {
    opacity: 1;
}

.media-card-meta {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .2px;
    text-transform: uppercase;
    color: #3a4252;
    margin: 0 0 8px;
}

.media-card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: -.2px;
    color: var(--c-navy);
    margin: 0;
}

.media-card-title a {
    color: var(--c-navy);
}

.media-card-title a:hover {
    color: #0054a4;
}

.media-card-link {
    display: inline-block;
    margin-top: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #0054a4;
}

.media-card-link:hover {
    text-decoration: underline;
}

.media-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.media-badge.badge_pdf {
    background: rgba(0, 84, 164, .1);
    color: #0054a4;
}

.media-badge.badge_pdf:hover {
    background: rgba(0, 84, 164, .18);
}

.media-badge.badge_read {
    background: rgba(22, 57, 158, .1);
    color: #16399e;
}

.media-badge.badge_read:hover {
    background: rgba(22, 57, 158, .18);
}

.media-badge.badge_note {
    background: rgba(12, 27, 61, .06);
    color: #3a4252;
}

/* --- Media & Press Inquiries CTA (blue band frames the yellow card) --- */
.footer-cta-area.media-cta {
    padding-top: 100px;
}

.media-cta .create-card {
    padding: 86px 72px;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .media-hero {
        padding: 150px 24px 56px;
    }

    .media-hero-heading {
        font-size: 42px;
    }

    .media-year-head {
        position: static;
        display: flex;
        align-items: baseline;
        gap: 16px;
        margin-bottom: 24px;
    }

    .media-year-num {
        margin-bottom: 0;
        font-size: 48px;
    }

    .media-year-items {
        padding-left: 28px;
    }
}

@media (max-width: 767.98px) {
    .media-list {
        padding: 56px 0 60px;
    }

    .media-hero-heading {
        font-size: 32px;
    }

    .media-hero-actions,
    .media-hero-actions .cta-btn {
        width: 100%;
    }

    .media-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 20px 22px;
    }

    .media-card-title {
        font-size: 16px;
    }

    .footer-cta-area.media-cta {
        padding-top: 60px;
    }

    .media-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Contact page ===
   ================================================================= */

/* --- Page hero (dark navy, compact) --- */
.contact-hero {
    position: relative;
    background: var(--c-navy);
    padding: 168px 24px 70px;
    overflow: hidden;
}

.contact-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .1), rgba(255, 210, 0, 0) 60%),
        linear-gradient(182deg, rgba(12, 27, 61, .35) 0%, rgba(14, 33, 80, .35) 55%, rgba(12, 27, 61, .45) 100%);
}

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

.contact-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .2px;
    color: rgba(255, 255, 255, .6);
}

.contact-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: var(--c-yellow);
}

.contact-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.contact-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.contact-breadcrumb a:hover {
    color: #fff;
}

.contact-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 51px;
    line-height: 1.04;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 18px;
}

.contact-hero-heading .accent {
    color: var(--c-yellow);
}

.contact-hero-desc {
    font-size: 18px;
    line-height: 28.8px;
    color: rgba(255, 255, 255, .82);
    max-width: 560px;
    margin-bottom: 26px;
}

.contact-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* --- Contact area (cream) --- */
.contact-area {
    background: #FAFAFA;
    padding: 80px 0;
}

/* Contact detail cards */
.contact-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-detail-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 16px;
    padding: 25px 27px;
    transition: box-shadow .2s ease, transform .2s ease;
}

.contact-detail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -22px rgba(0, 0, 0, .45);
}

.contact-detail-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: #0054a4;
    color: #fff;
    font-size: 20px;
}

.contact-detail-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #16399e;
    margin: 0 0 6px;
}

.contact-detail-value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 25.2px;
    color: var(--c-navy);
    margin: 0;
}

.contact-detail-value a {
    color: var(--c-navy);
}

.contact-detail-value a:hover {
    color: #0054a4;
}

.contact-detail-address {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: 16px;
    line-height: 24px;
    color: #1a2033;
    margin: 0 0 6px;
}

.contact-detail-link {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #0054a4;
}

.contact-detail-link:hover {
    text-decoration: underline;
}

/* Contact form card */
.contact-form-card {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 22px;
    padding: 45px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
}

.contact-form-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 42px;
    line-height: 1.04;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin: 0 0 8px;
}

.contact-form-heading .accent {
    color: #16399e;
}

.contact-form-sub {
    font-size: 15.5px;
    line-height: 24.8px;
    color: #3a4252;
    margin: 0 0 24px;
}

.contact-form label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #3a4252;
    margin-bottom: 7px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    background: #F6F8FD;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 14px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--c-navy);
    transition: border-color .2s ease, background-color .2s ease;
}

.contact-form input {
    height: 50px;
}

.contact-form textarea {
    min-height: 130px;
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    background: #fff;
    border-color: #0054a4;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #9aa1b1;
}

.contact-form .cta-btn {
    margin-top: 6px;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .contact-hero {
        padding: 150px 24px 56px;
    }

    .contact-hero-heading {
        font-size: 40px;
    }

    .contact-form-card {
        padding: 36px 30px;
    }

    .contact-form-heading {
        font-size: 34px;
    }
}

@media (max-width: 767.98px) {
    .contact-area {
        padding: 56px 0 60px;
    }

    .contact-hero-heading {
        font-size: 30px;
    }

    .contact-hero-actions,
    .contact-hero-actions .cta-btn {
        width: 100%;
    }

    .contact-form-card {
        padding: 28px 22px;
    }
}

/* =================================================================
   === For Employees page ===
   ================================================================= */

/* --- Page hero (dark navy, compact) --- */
.emp-hero {
    position: relative;
    background: var(--c-navy);
    padding: 168px 24px 66px;
    overflow: hidden;
}

.emp-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .1), rgba(255, 210, 0, 0) 60%),
        linear-gradient(182deg, rgba(12, 27, 61, .35) 0%, rgba(14, 33, 80, .35) 55%, rgba(12, 27, 61, .45) 100%);
}

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

.emp-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .2px;
    color: rgba(255, 255, 255, .6);
}

.emp-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.emp-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: var(--c-yellow);
}

.emp-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.emp-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.emp-breadcrumb a:hover {
    color: #fff;
}

.emp-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 55px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 26px;
}

.emp-hero-heading .accent {
    color: var(--c-yellow);
}

.emp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* --- Employee resources (cream) --- */
.emp-resources {
    padding: 80px 0;
}

.emp-link-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 88px;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 16px;
    padding: 25px 27px;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.emp-link-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 3px;
    background: var(--c-yellow);
    opacity: 0;
    transition: opacity .2s ease;
}

.emp-link-card:hover {
    transform: translateY(-2px);
    border-color: rgba(12, 27, 61, .2);
    box-shadow: 0 16px 34px -22px rgba(0, 0, 0, .45);
}

.emp-link-card:hover::before {
    opacity: 1;
}

.emp-link-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -.2px;
    line-height: 1.3;
    color: var(--c-navy);
}

.emp-link-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 19px;
    background: rgba(22, 57, 158, .08);
    color: #16399e;
    font-size: 14px;
    transition: background-color .2s ease, color .2s ease;
    transform: rotate(-45deg);
}

.emp-link-card:hover .emp-link-icon {
    background: #16399e;
    color: #fff;
}

/* --- Grow With Butterball CTA (blue band frames yellow card) --- */
.footer-cta-area.emp-cta {
    padding-top: 100px;
}

.emp-cta .create-card {
    padding: 86px 72px;
}

.emp-cta .create-heading .accent {
    color: #0054a4;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .emp-hero {
        padding: 150px 24px 56px;
    }

    .emp-hero-heading {
        font-size: 42px;
    }
}

@media (max-width: 767.98px) {
    .emp-resources {
        padding: 56px 0 60px;
    }

    .emp-hero-heading {
        font-size: 34px;
    }

    .emp-hero-actions,
    .emp-hero-actions .cta-btn {
        width: 100%;
    }

    .footer-cta-area.emp-cta {
        padding-top: 60px;
    }

    .emp-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Why Choose Us page ===
   ================================================================= */

/* --- Page hero (dark navy) --- */
.wcu-hero {
    position: relative;
    background: var(--c-navy);
    padding: 170px 24px 90px;
    overflow: hidden;
}

.wcu-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(182deg, rgba(12, 27, 61, .35) 0%, rgba(14, 33, 80, .35) 55%, rgba(12, 27, 61, .45) 100%);
}

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

.wcu-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 22px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .2px;
    color: rgba(255, 255, 255, .6);
}

.wcu-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wcu-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: var(--c-yellow);
}

.wcu-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.wcu-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.wcu-breadcrumb a:hover {
    color: #fff;
}

.wcu-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 49px;
    line-height: 1.08;
    letter-spacing: -.8px;
    color: #fff;
    margin-bottom: 28px;
}

.wcu-hero-heading .accent {
    color: var(--c-yellow);
}

.wcu-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.wcu-hero-media {
    position: relative;
    padding: 14px 14px 0 0;
}

.wcu-hero-img {
    width: 100%;
    aspect-ratio: 640 / 380;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 14px 14px 0 0 var(--c-yellow), 0 0 60px 0 rgba(255, 210, 0, .18), 0 22px 50px 0 rgba(12, 27, 61, .35);
}

.wcu-hero-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    transform: rotate(-6deg);
    width: 108px;
    height: 108px;
    border-radius: 54px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Shantell Sans', cursive;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 14.4px;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
}

/* --- Intro band (cream) --- */
.wcu-intro {
    background: #faf6ec;
    padding: 80px 0;
}

.wcu-intro .section-head {
    margin-bottom: 56px;
}

.section-heading .accent-blue-solid {
    color: #16399e;
}

.wcu-intro-media {
    position: relative;
    max-width: 560px;
}

.wcu-intro-media img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 14px 14px 0 -1px var(--c-yellow), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.wcu-intro-copy p {
    font-size: 18px;
    line-height: 29.7px;
    color: #3a4252;
    margin-bottom: 20px;
}

.wcu-intro-copy p:last-child {
    margin-bottom: 0;
}

.wcu-intro-copy a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.wcu-intro-copy a:hover {
    color: var(--c-navy);
}

/* --- Feature rows carousel (full-bleed, partial slides at both edges) --- */
.wcu-features {
    background: #fff;
    padding: 80px 0;
    overflow: hidden;
}

.wcu-feature-slider {
    width: 100%;
}

.wcu-feature-slide {
    padding: 0 16px;
    height: inherit;
}

.wcu-feature-slider .slick-track {
    display: flex;
}

.wcu-feature-slider .slick-slide {
    height: auto;
}

.wcu-feature-slider .slick-slide > div {
    height: 100%;
}

.wcu-feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-height: 625px;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .4s ease, transform .4s ease;
}

.wcu-feature-card:hover,
.wcu-feature-card:focus-visible {
    text-decoration: none;
    color: inherit;
}

.wcu-feature-card:focus-visible {
    outline: 3px solid var(--c-yellow);
    outline-offset: 3px;
}

.wcu-feature-card--media {
    background: linear-gradient(124.92deg, #0c1b3d 0%, #16399e 100%);
}

.wcu-feature-card--white {
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .08);
}

/* media card: image fills the whole card as a background */
.wcu-feature-card--media .wcu-feature-img {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.wcu-feature-card--media .wcu-feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* white card: image fills the card; block overlays at the bottom like the media card */
.wcu-feature-card--white .wcu-feature-img {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 42px 24px;
    z-index: 0;
}

.wcu-feature-card--white .wcu-feature-img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* yellow block: pinned bottom-left, overlays the image; expands upward on hover */
.wcu-feature-block {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: calc(100% - 32px);
    max-width: 448px;
    background: var(--c-yellow);
    border-top-right-radius: 18px;
    padding: 20px 24px 22px;
}

.wcu-feature-card--media .wcu-feature-block {
    margin-top: 0;
}

.wcu-feature-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 11px;
}

.wcu-feature-num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 1;
    color: rgba(255, 255, 255, .85);
}

.wcu-feature-title {
    flex: 1;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 24px;
    color: var(--c-navy);
    margin: 0;
}

.wcu-feature-arrow {
    font-size: 20px;
    color: var(--c-navy);
}

.wcu-feature-text {
    font-size: 13.5px;
    line-height: 20.93px;
    color: rgba(13, 44, 84, .85);
    margin: 0;
}

/* Body: 3-line teaser by default, expands to full text + link on hover/focus */
.wcu-feature-head {
    margin-bottom: 11px;
}

.wcu-feature-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* ~3 lines at 20.93px line-height; caps the teaser and enables a smooth reveal */
    max-height: 63px;
    transition: max-height .45s ease;
}

.wcu-feature-link {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0;
    transition: grid-template-rows .45s ease, opacity .3s ease .1s, margin-top .45s ease;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--c-navy);
}

.wcu-feature-link > span {
    overflow: hidden;
    min-height: 0;
}
.wcu-feature-link em{
    display: none;
}
.wcu-feature-card:hover .wcu-feature-text,
.wcu-feature-card:focus-visible .wcu-feature-text,
.wcu-feature-card:focus-within .wcu-feature-text {
    -webkit-line-clamp: 999;
    max-height: 400px;
}

.wcu-feature-card:hover .wcu-feature-link,
.wcu-feature-card:focus-visible .wcu-feature-link,
.wcu-feature-card:focus-within .wcu-feature-link {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 12px;
}

.wcu-feature-card:hover .wcu-feature-link > span {
    text-decoration: underline;
}

/* Touch devices have no hover — show full text + link */
@media (hover: none),
(pointer: coarse) {
    .wcu-feature-text {
        -webkit-line-clamp: 999;
        max-height: 400px;
    }

    .wcu-feature-link {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-top: 12px;
    }
}

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

    .wcu-feature-card,
    .wcu-feature-text,
    .wcu-feature-link {
        transition: none;
    }
}

/* carousel nav */
.wcu-feature-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 26px;
}

.wcu-feature-prev,
.wcu-feature-next {
    width: 40px;
    height: 40px;
    border: 1px solid var(--c-navy);
    border-radius: 20px;
    background: #fff;
    color: var(--c-navy);
    font-size: 17px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, color .2s ease;
}

.wcu-feature-prev:hover,
.wcu-feature-next:hover {
    background: #0054a4;
    color: #fff;
}

.wcu-feature-dots {
    display: flex;
    align-items: center;
}

.wcu-feature-dots .slick-dots {
    position: static;
    bottom: auto;
    width: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wcu-feature-dots .slick-dots li {
    width: 10px;
    height: 10px;
    margin: 0;
    display: block;
}

.wcu-feature-dots .slick-dots li button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: rgba(0, 84, 164, 0.42);
    font-size: 0;
    color: transparent;
    transition: background-color .2s ease;
}

.wcu-feature-dots .slick-dots li button:before {
    content: none;
}

.wcu-feature-dots .slick-dots li.slick-active button {
    background: #0054a4;
}

/* --- Awards & Recognition band --- */
.wcu-awards {
    background: #0054a4;
    padding: 100px 0 0;
    position: relative;
}

.wcu-awards-intro {
    margin: 14px auto 0;
    max-width: 560px;
    font-size: 18px;
    line-height: 28.8px;
    color: rgba(255, 255, 255, .82);
}

.wcu-awards-logos {
    margin-top: 40px;
    padding-bottom: 100px;
}

.wcu-award-card {
    height: 150px;
    background: #fff;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    box-shadow: 0 16px 34px -22px rgba(0, 0, 0, .55);
}

.wcu-award-card img {
    max-height: 92px;
    width: auto;
    object-fit: contain;
    border-radius: 4px;
}

/* Community Involvement CTA — standard create-card, framed by blue band above */
.footer-cta-area.wcu-cta .create-heading .accent {
    color: #0054a4;
}

.wcu-cta .create-card {
    padding: 86px 72px;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .wcu-hero {
        padding: 150px 24px 70px;
    }

    .wcu-hero-heading {
        font-size: 38px;
    }

    .wcu-hero-media {
        margin-top: 40px;
        padding: 0;
        max-width: 520px;
    }

    .wcu-intro-media {
        margin: 0 auto 36px;
    }

    .wcu-feature-card {
        min-height: 540px;
    }

    .wcu-feature-slide {
        padding: 0 12px;
    }

    .wcu-cta .create-card {
        padding: 70px 40px;
    }
}

@media (max-width: 1399.98px) and (min-width: 992px) {
    .wcu-feature-card {
        min-height: 580px;
    }
}

@media (max-width: 767.98px) {

    .wcu-intro,
    .wcu-features {
        padding: 56px 0;
    }

    .wcu-feature-card {
        min-height: 480px;
    }

    .wcu-feature-slide {
        padding: 0 8px;
    }

    .wcu-awards {
        padding-top: 56px;
    }

    .wcu-hero-heading {
        font-size: 30px;
    }

    .wcu-hero-actions,
    .wcu-hero-actions .cta-btn {
        width: 100%;
    }

    .section-heading {
        font-size: 30px;
    }

    .footer-cta-area.wcu-cta {
        padding-top: 60px;
    }

    .wcu-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Our Story page ===
   ================================================================= */

/* --- Page hero (dark navy) --- */


.os-hero-sub {
    font-size: 18px;
    line-height: 28.8px;
    color: rgba(255, 255, 255, .82);
    margin-bottom: 26px;
    font-weight: 800;
    color: #FFD200;
    font-family: 'Montserrat', sans-serif;
    display: block
}

.os-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.os-hero-media {
    position: relative;
    padding: 14px 14px 0 0;
}

.os-hero-img {
    width: 100%;
    aspect-ratio: 560 / 420;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 14px 14px 0 0 var(--c-yellow), 0 22px 50px 0 rgba(12, 27, 61, .35);
}

.os-hero-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    transform: rotate(-6deg);
    width: 108px;
    height: 108px;
    border-radius: 54px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Shantell Sans', cursive;
    font-weight: 700;
    font-size: 13px;
    line-height: 15px;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
}

/* --- Our History (split feature, cream) --- */
.os-history {
    background: #fff;
    padding: 80px 0;
}

.os-history-media {
    position: relative;
    max-width: 595px;
}

.os-history-media img {
    width: 100%;
    aspect-ratio: 595 / 520;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 14px 14px 0 -1px var(--c-yellow), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.os-history-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 34px;
    line-height: 1.04;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin: 0 0 20px;
}

.os-history-heading .accent {
    color: #16399e;
}

.os-history-heading::after {
    content: "";
    display: block;
    width: 54px;
    height: 3px;
    border-radius: 2px;
    background: var(--c-yellow);
    margin-top: 14px;
}

.os-history-copy p {
    font-size: 15.5px;
    line-height: 25px;
    color: #3a4252;
    margin-bottom: 16px;
}

.os-history-copy p:last-child {
    margin-bottom: 0;
}

.os-history-copy a {
    color: #16399e;
    font-weight: 700;
    text-decoration: underline;
}

.os-history-copy a:hover {
    color: var(--c-navy);
}

/* --- Guiding Principles (navy band) --- */
.os-principles {
    padding: 80px 0;
}

.os-principles .section-head {
    margin-bottom: 40px;
}

.os-principles-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.06;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin: 0;
}

/* two-column intro: statement left, body right */
.os-principles-intro {
    max-width: 1080px;
    margin: 0 auto 44px;
}

.os-principles-statement {
    font-size: 28px;
    line-height: 150%;
    color: var(--c-navy);
    margin: 0;
    font-family: "Playfair Display", serif;
}

.os-principles-statement .accent {
    color: #16399e;
}

.os-principles-statement .accent-underline {
    color: #16399e;
    text-decoration: underline;
}

.os-principles-body {
    font-size: 15.5px;
    line-height: 25.5px;
    color: #3a4252;
    margin: 0;
}

.os-principles-body a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.os-principles-body a:hover {
    color: var(--c-navy);
    text-decoration: none
}

/* guiding principles block: gold label + 3-col grid */
.os-principles-block {
    max-width: 1080px;
    margin: 0 auto;
    border-bottom: 1px solid #0c1b3d1a;
    padding-bottom: 20px
}

.os-principles-block-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #16399E;
    margin-bottom: 30px;
    padding-left: 40px;
    position: relative
}

.os-principles-block-title::after {
    position: absolute;
    content: "";
    width: 30px;
    height: 2px;
    background: #FFD200;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

.os-principle {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    height: 100%;
}

.os-principle-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-size: 12px;
	font-weight:700
}

.os-principle p {
    margin: 0;
    padding-top: 4px;
    font-size: 14.5px;
    line-height: 21px;
    color: #3a4252;
}

.os-principles-note {
    margin: 48px auto 0;
    text-align: center;
    font-size: 24px;
    line-height: 27px;
    color: #0C1B3D;
    font-family: "Playfair Display", serif;
}

/* === Milestones timeline (card rail) === */
.os-timeline-section {
    background: linear-gradient(180deg,#fafafa 0%, #ffffff 80%);
    padding: 100px 0;
}

.os-timeline-head {
    text-align: center;
    margin-bottom: 60px;
}

.os-timeline-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 58px;
    line-height: 58px;
    letter-spacing: -.58px;
    color: #16399e;
    margin: 0;
}

.os-timeline-eyebrow {
    display: block;
    font-weight: 800;
    font-size: 32px;
    line-height: 51.2px;
    letter-spacing: 1.92px;
    text-transform: uppercase;
    color: #3a4252;
    margin-bottom: 8px;
}

/* the rail */
.os-timeline {
    position: relative;
    max-width: 1104px;
    margin: 0 auto;
}

.os-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    margin-left: -2px;
    border-radius: 2px;
    background: linear-gradient(180deg, #ffd200 0%, #e8a33c 55%, #c25a38 82%, #6e8f58 100%);
}

/* decade pill */
.os-tl-decade {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 26px 0;
}

.os-tl-decade h3 {
    display: inline-block;
    background: #0054a4;
    color: #fff;
    border-radius: 999px;
    padding: 10px 30px;
    font-family: 'Poppins', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: .4px;
    margin: 0;
}

/* one milestone */
.os-tl-row {
    position: relative;
}

.os-tl-row_left {
    padding-right: 40px;
}

.os-tl-row_right {
    padding-left: 40px;
}

.os-tl-row_left .row {
    margin-right: 40px;
}

.os-tl-row_right .row {
    margin-left: 40px;
}

/* rail dot */
.os-tl-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    background: #fff;
    border: 5px solid #e8a33c;
}

.os-tl-dot_sm {
    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;
    border-width: 4px;
}

/* card */
.os-tl-card {
    display: block;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(12, 27, 61, .1);
    margin: 12px 0;
}

.os-tl-media img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    object-position: center 35%;
    display: block;
}

.os-tl-media_empty {
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px dashed #bcb6a4;
    background: repeating-linear-gradient(45deg, #ece9e0 0 6px, #e2ded2 6px 12px);
}

.os-tl-ph {
    font-family: 'Poppins', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 10.5px;
    line-height: 17.85px;
    letter-spacing: 1.26px;
    text-transform: uppercase;
    color: #8d8774;
    text-align: center;
}

.os-tl-ph-kicker {
    display: block;
}

.os-tl-copy {
    padding: 15px 20px 18px;
}

.os-tl-flat {
    padding: 8px 16px;
    margin: 8px 0;
}

.os-tl-year {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 28px;
    color: #0054a4;
    margin: 0 0 4px;
}

.os-tl-desc {
    font-size: 13.8px;
    line-height: 21.39px;
    color: #4a5568;
    margin: 0;
}

.os-tl-flat .os-tl-desc {
    font-size: 13px;
    line-height: 20.15px;
}

@media (max-width: 991.98px) {
    .os-timeline-section {
        padding: 70px 0;
    }

    .os-timeline-head {
        margin-bottom: 40px;
    }

    .os-timeline::before {
        left: 9px;
        margin-left: 0;
    }

    .os-tl-decade {
        text-align: left;
        padding-left: 44px;
    }

    .os-tl-row_left,
    .os-tl-row_right {
        padding: 0 0 0 44px;
    }

    .os-tl-row_left .row,
    .os-tl-row_right .row {
        margin: 0;
    }

    .os-tl-dot,
    .os-tl-dot_sm {
        left: 11px;
        margin-left: -10px;
    }

    .os-tl-dot_sm {
        margin-left: -6.5px;
    }
}

@media (max-width: 767.98px) {
    .os-timeline-section {
        padding: 56px 0;
    }

    .os-timeline-eyebrow {
        font-size: 17px;
        line-height: 1.4;
        letter-spacing: 1.2px;
    }

    .os-timeline-title {
        font-size: 28px;
        line-height: 34px;
    }

    .os-tl-decade h3 {
        font-size: 17px;
        line-height: 26px;
        padding: 8px 22px;
    }

    .os-tl-media img,
    .os-tl-media_empty {
        height: 160px;
    }
}

/* --- Story video (blue band) --- */
.os-video {

    padding: 80px 0;
    position: relative
}

.os-video::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 60%;
    top: 0;
    left: 0;
    background: #0054a4;
    z-index: -1
}

.os-video-inner {
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
}
.our-story-area .content-img img{
    border-radius: 18px
}
.our-story-image-text {
    display: block;
     font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.2;
    color: #0054A4;
    margin-top: 20px;
    text-transform:uppercase
}
.os-video-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 42px;
    line-height: 1.06;
    letter-spacing: -.5px;
    color: #0C1B3D;
    margin-bottom: 14px;
}

.accent-yellow-plain {
    color: var(--c-yellow);
}

.os-video-sub {
    max-width: 640px;
    margin: 0 auto 40px;
    font-size: 18px;
    line-height: 28.8px;
    color: rgba(255, 255, 255, .82);
}

.os-video-frame {
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5);
}

.os-video-frame img {
    width: 100%;
    object-fit: cover;
    display: block;
}

.os-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .5);
    transition: transform .2s ease;
}

.os-video-play::before {
    position: absolute;
    content: "";
    width: 95px;
    height: 95px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ffd200c4;
    border-radius: 50%
}

.os-video-frame:hover .os-video-play {
    transform: translate(-50%, -50%) scale(1.08);
}

.os-video-caption {
    position: absolute;
    left: 22px;
    bottom: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .3px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

/* --- A Legacy Built on Butter (full-bleed image band) --- */
.os-legacy {
    position: relative;
    display: flex;
    align-items: center;
    padding: 80px 0 240px;
    overflow: hidden;
}

.os-legacy-bg {
    position: absolute;
    right: 0;
    width: 55%;
    bottom: 0;
    height: 100%;
    filter: grayscale(1);
    z-index: 0;
    object-fit: cover;
    object-position: top
}

.os-legacy .container {
    position: relative
}

.os-legacy-img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -240px;
    width: 60%;
}

.os-legacy .container {
    position: relative;
    z-index: 2;
}

.os-legacy-copy {
    max-width: 430px;
    background: rgba(0, 84, 164, 0.02);
    padding: 24px;
    border-radius: 20px
}

.os-legacy-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 35px;
    line-height: 1.06;
    letter-spacing: -1.4px;
    text-transform: uppercase;
    color: var(--c-navy);
    margin-bottom: 22px;
}

.os-legacy-copy p {
    font-size: 14px;
    line-height: 22px;
    color: #3a4252;
    margin-bottom: 16px;
}

.os-legacy-copy p:last-child {
    margin-bottom: 0;
}

/* --- Awards & Recognition (blue band) --- */
.os-awards {
    background: #0054a4;
    padding: 80px 0;
}

.os-awards-head {
    text-align: center;
    margin-bottom: 44px;
}

.os-awards-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 46px;
    line-height: 1.04;
    letter-spacing: -.5px;
    color: #fff;
    margin-bottom: 12px;
}

.os-awards-heading .accent {
    color: var(--c-yellow);
}

.os-awards-sub {
    max-width: 560px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 28px;
    color: rgba(255, 255, 255, .82);
}

.os-awards-logos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.os-award-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 96px;
}

.os-award-card img {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.os-award-sep {
    color: var(--c-yellow);
    font-size: 11px;
    transform: rotate(0deg);
    display: flex;
    align-items: center;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .os-hero {
        padding: 150px 24px 70px;
    }

    .os-hero-heading {
        font-size: 40px;
    }

    .os-hero-media {
        margin-top: 40px;
        padding: 0;
        max-width: 520px;
    }

    .os-history-media {
        margin: 0 auto 36px;
    }

    .os-principles-title {
        font-size: 28px;
    }

    .os-principles-statement {
        font-size: 19px;
        margin-bottom: 20px;
    }

    .os-timeline-eyebrow {
        font-size: 22px;
        letter-spacing: 1.2px;
    }

    .os-timeline-title {
        font-size: 36px;
    }





    .os-video-heading {
        font-size: 32px;
    }
}

@media (max-width: 767.98px) {

    .os-history,
    .os-principles,
    .os-timeline-section,
    .os-video {
        padding: 56px 0;
    }

    .os-hero-heading {
        font-size: 30px;
    }

    .os-hero-actions,
    .os-hero-actions .cta-btn {
        width: 100%;
    }

    .os-video-play {
        width: 64px;
        height: 64px;
        font-size: 22px;
    }

    .os-timeline-eyebrow {
        font-size: 17px;
    }

    .os-timeline-title {
        font-size: 28px;
    }




    .os-legacy {
        min-height: 0;
        padding: 56px 0;
    }

    .os-legacy-overlay {
        background: linear-gradient(180deg, rgba(250, 246, 236, .92) 0%, rgba(250, 246, 236, .8) 100%);
    }

    .os-legacy-copy {
        max-width: 100%;
    }

    .os-legacy-heading {
        font-size: 28px;
    }

    .os-awards {
        padding: 56px 0;
    }

    .os-awards-heading {
        font-size: 32px;
    }

    .os-award-sep {
        display: none;
    }

    .os-awards-logos {
        gap: 16px;
    }
}

/* =================================================================
   === Awards page ===
   ================================================================= */

/* --- Hero (navy) --- */
.aw-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 70px;
    overflow: hidden;
}

.aw-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(182deg, rgba(12, 27, 61, .35) 0%, rgba(14, 33, 80, .35) 55%, rgba(12, 27, 61, .45) 100%);
}

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

.fsq-recognition.fsq-award {
    padding: 40px 0 60px
}

.aw-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .2px;
    color: rgba(255, 255, 255, .6);
}

.aw-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.aw-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: var(--c-yellow);
}

.aw-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.aw-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.aw-breadcrumb a:hover {
    color: #fff;
}

.aw-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 51px;
    line-height: 1.06;
    letter-spacing: -.8px;
    color: #fff;
    margin-bottom: 28px;
    max-width: 820px;
}

.aw-hero-heading .accent {
    color: var(--c-yellow);
}

.aw-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* hero logo strip */
.aw-hero-logos {
    list-style: none;
    margin: 56px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.aw-hero-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.aw-hero-logo img {
    max-height: 90px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .85;
}

.aw-hero-sep {
    color: var(--c-yellow);
    font-size: 13px;
    display: flex;
    align-items: center;
}

/* --- Awards grid (cream) --- */
.aw-grid-section {
    padding: 80px 0;
}

.award-card {
    position: relative;
    background: linear-gradient(180deg, #FFFFFF 0%, #ffeb8d0a 53.27%, #ffd82336 100%);
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    padding: 31px 29px 33px;
    height: 100%;
    overflow: hidden;
}

.award-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--c-yellow);
}

/* Corner tab, only on cards that carry a badge. */
.award-card-badge {
    position: absolute;
    top: 5px;
    right: 0;
    z-index: 2;
    max-width: calc(100% - 40px);
    padding: 7px 14px;
    border-radius: 0 0 0 12px;
    background: var(--c-navy);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.award-card--badge {
    padding-top: 52px;
}

.award-card-logo {
    height: 64px;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.award-card-logo img {
    max-height: 44px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

.award-card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 19px;
    line-height: 22.8px;
    letter-spacing: -.2px;
    color: var(--c-navy);
    margin-bottom: 12px;
}

.award-card-title .accent {
    color: #16399e;
}

.award-card-body {
    font-size: 14.5px;
    line-height: 23.2px;
    color: #3a4252;
    margin: 0;
}

.award-card-body a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.award-card-body a:hover {
    color: var(--c-navy);
    text-decoration: none
}

/* --- Awards responsive --- */
@media (max-width: 991.98px) {
    .aw-hero {
        padding: 130px 24px 60px;
    }

    .aw-hero-heading {
        font-size: 38px;
    }

    .aw-hero-logos {
        gap: 28px;
    }

    .aw-hero-logo img {
        max-height: 64px;
    }
}

@media (max-width: 767.98px) {
    .aw-hero-heading {
        font-size: 30px;
    }

    .aw-hero-actions,
    .aw-hero-actions .cta-btn {
        width: 100%;
    }

    .aw-hero-sep {
        display: none;
    }

    .aw-hero-logos {
        gap: 20px;
    }

    .aw-grid-section {
        padding: 56px 0;
    }
}

/* --- Awards CTA (blue band framing the yellow card) --- */
.footer-cta-area.aw-cta {
    padding-top: 100px;
}

.aw-cta .accent-blue-solid {
    color: #0154A4
}

.accent-blue-solid {
    color: #0154A4
}

.aw-cta .create-card {
    padding: 86px 72px;
}

@media (max-width: 767.98px) {
    .footer-cta-area.aw-cta {
        padding-top: 60px;
    }

    .aw-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Our Mission page ===
   ================================================================= */

/* --- Hero (navy) --- */
.mi-hero {
    position: relative;
    background: var(--c-navy);
    padding: 160px 24px 90px;
    overflow: hidden;
}

.mi-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(182deg, rgba(12, 27, 61, .35) 0%, rgba(14, 33, 80, .35) 55%, rgba(12, 27, 61, .45) 100%);
}

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

.mi-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
}

.mi-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mi-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: var(--c-yellow);
}

.mi-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.mi-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.mi-breadcrumb a:hover {
    color: #fff;
}

.mi-hero-eyebrow {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #fff;
    margin-bottom: 8px;
}

.mi-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 53px;
    line-height: 1.04;
    letter-spacing: -.8px;
    color: #fff;
    margin-bottom: 24px;
}

.mi-hero-heading .accent {
    color: var(--c-yellow);
}

.mi-hero-lead {
    font-size: 18px;
    line-height: 28.8px;
    color: rgba(255, 255, 255, .9);
    margin-bottom: 16px;
}

.mi-hero-body {
    font-size: 16px;
    line-height: 26px;
    color: rgba(255, 255, 255, .72);
    margin-bottom: 26px;
}

.mi-hero-media {
    position: relative;
    padding: 14px 14px 0 0;
}

.mi-hero-img {
    width: 100%;
    aspect-ratio: 560 / 460;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 14px 14px 0 0 var(--c-yellow), 0 22px 50px 0 rgba(12, 27, 61, .35);
}

.mi-hero-badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: rotate(-6deg);
    width: 108px;
    height: 108px;
    border-radius: 54px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Shantell Sans', cursive;
    font-weight: 700;
    font-size: 13px;
    line-height: 15px;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
}

/* --- Guiding Principles (cream) --- */
.mi-principles {
    background: #fff;
    padding: 80px 0;
}

.mi-principles .section-head {
    max-width: 760px;
    margin: 0 auto 50px;
}

.mi-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #16399e;
    margin-bottom: 12px;
}

.mi-principles-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 44px;
    line-height: 1.04;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.mi-principles-sub {
    font-size: 17px;
    line-height: 27px;
    color: #3a4252;
    margin: 0;
}

.mi-principle {
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .1);
    border-radius: 16px;
    padding: 30px 28px;
    height: 100%;
}

.mi-principle-num {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 30px;
    letter-spacing: -1px;
    color: #16399e;
    margin-bottom: 14px;
}

.mi-principle-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
    color: var(--c-navy);
    margin: 0;
}

/* --- Leadership (split feature, cream) --- */
.mi-leadership {
    background: #faf6ec;
    padding: 80px 0;
}

.mi-leadership-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 17.5px;
    line-height: 28px;
    color: #16399e;
    margin-bottom: 12px;
}

.mi-leadership-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 44px;
    line-height: 1.04;
    letter-spacing: -.5px;
    color: var(--c-navy);
    max-width: 561px;
    margin-bottom: 22px;
}

.mi-leadership-copy p {
    font-size: 17.5px;
    line-height: 28px;
    color: #16399e;
    margin-bottom: 18px;
}

.mi-inline-link {
    font-weight: 600;
    color: #16399e;
    text-decoration: underline;
    text-underline-position: from-font;
}

.mi-inline-link:hover {
    color: var(--c-navy);
}

.mi-outline-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 18px 32px;
    border: 2px solid rgba(12, 27, 61, .45);
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 22.4px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--c-navy);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.mi-outline-btn:hover {
    background: var(--c-navy);
    border-color: var(--c-navy);
    color: #fff;
}

.mi-leadership-collage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 280px 273px;
    gap: 14px;
}

.mi-collage-item {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.mi-collage-item--wide {
    grid-column: 1 / span 2;
}

.mi-collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Community Impact (cream) --- */
.mi-impact {
    background: #fff;
    padding: 80px 0;
}

.mi-impact .section-heading {
    font-size: 44px;
    letter-spacing: -.5px;
    line-height: 1.04;
    color: var(--c-navy);
    max-width: 561px;
    margin-bottom: 18px;
}

.mi-impact-body {
    font-size: 17.5px;
    line-height: 28px;
    color: #3a4252;
    margin: 0 0 18px;
}

.mi-impact-body:last-child {
    margin-bottom: 0;
}

.mi-impact-media {
    padding: 0 14px 14px 0;
}

.mi-impact-media img {
    width: 100%;
    aspect-ratio: 619.5 / 425.91;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 14px 14px 0 -1px var(--c-yellow), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

/* --- Community Programs (cream butter band, alternating split rows) --- */
.mi-programs {
    padding: 80px 0;
}

.mi-program-row {
    margin-bottom: 0;
}

.mi-program-sep {
    width: 100%;
    max-width: 100%;
    height: 1px;
    background: rgba(12, 27, 61, .12);
    border: 0;
    opacity: 1;
    margin: 72px 0;
}

.mi-program-row + .mi-program-row {
    margin-top: 72px;
}

.accent-yellow {
    color: #FFD200;
}



.mi-program-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 360 / 460;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .4);
    display: block;
}

.mi-program-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.04;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.mi-program-copy p {
    font-size: 17.5px;
    line-height: 28px;
    color: #3a4252;
    margin-bottom: 16px;
}

.mi-program-copy p:last-child {
    margin-bottom: 0;
}



.mi-book-link {
    font-weight: 600;
    color: #16399e;
    text-decoration: underline;
    text-underline-position: from-font;
}

.mi-book-link:hover {
    color: var(--c-navy);
}

.mi-program-note {
    font-size: 14px;
    line-height: 22.4px;
}

.mi-garden-frame {
    border: 1px solid rgba(12, 27, 61, .08);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .35);
    background: linear-gradient(150deg, #e9d49a 0%, #d8b15e 50%, #b98a36 100%);
}

.mi-garden-frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 619.5 / 387.19;
    object-fit: cover;
}

.mi-program-copy a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

/* --- Expanding Opportunity (cream) --- */
.mi-expanding {
    background: #0054a4;
    padding: 80px 0;
}

.mi-expanding .section-head {
    max-width: 760px;
    margin: 0 auto 44px;
    text-align: center;
}

.mi-expanding .section-heading {
    color: #fff;
}

.mi-expanding-sub {
    font-size: 17px;
    line-height: 27px;
    color: rgba(255, 255, 255, .82);
    margin: 12px 0 0;
}

.mi-opp-card {
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    padding: 31px 29px 48px;
    height: 100%;
}

.mi-opp-logo {
    height: 97px;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.mi-opp-logo img {
    max-height: 97px;
    width: auto;
    display: block;
}

.mi-opp-divider {
    display: block;
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: #0054a4;
    margin-bottom: 18px;
}

.mi-opp-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.04;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 12px;
}

.mi-opp-body {
    font-size: 15px;
    line-height: 24px;
    color: #3a4252;
    margin: 0;
}

/* --- Literacy Center (split feature, white) --- */
.mi-literacy {
    background: #fff;
    padding: 80px 0;
}

.mi-literacy-copy p {
    font-size: 17.5px;
    line-height: 28px;
    color: #3a4252;
    margin-bottom: 14px;
}

.mi-literacy-copy p:last-child {
    margin-bottom: 0;
}

.mi-literacy-copy .mi-program-title {
    margin-bottom: 19px;
}

.mi-literacy-link {
    font-weight: 600;
    color: #d9a900;
    text-decoration: underline;
    text-underline-position: from-font;
}

.mi-literacy-link:hover {
    color: var(--c-navy);
}

.mi-literacy-media {
    padding: 0 0 14px 14px;
}

.mi-literacy-media img {
    width: 100%;
    aspect-ratio: 560.5 / 420.38;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: -14px 14px 0 -1px var(--c-yellow), 0 22px 50px -24px rgba(12, 27, 61, .35);
    display: block;
}

/* --- Flavor / Impact (yellow band) --- */
.mi-flavor {
    padding: 80px 0;
}

.mi-flavor-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 24px;
}

.mi-flavor-body {
    font-size: 19px;
    line-height: 30px;
    color: rgba(12, 27, 61, .82);
    margin: 0;
}

.mi-flavor-body a {
    color: #16399e;
    font-weight: 700;
    text-decoration: underline;
}

.mi-flavor-body {
    max-width: 760px;
    margin: 0 auto;
}

/* --- Video frame (Life at Butterball / Enrich Lives) --- */
.mi-video {
    position: relative;
    display: block;
    max-width: 1240px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 70px -30px rgba(12, 27, 61, .5);
}

.mi-video--spaced {
    margin-top: 64px;
}

.mi-video img {
    width: 100%;
    height: auto;
    aspect-ratio: 1240 / 620;
    object-fit: cover;
    display: block;
}

.mi-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85px;
    height: 85px;
    border-radius: 47px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 14px 34px -8px rgba(0, 0, 0, .45);
    transition: transform .2s ease;
}

.mi-video-play::before {
    position: absolute;
    content: "";
    width: 95px;
    height: 95px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ffd200c4;
    border-radius: 50%;
}

.mi-video:hover .mi-video-play {
    transform: translate(-50%, -50%) scale(1.06);
}

/* --- Final CTA (light gray card, yellow top border) --- */
.mi-final {
    margin-top: -300px;
    padding: 0 0 90px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .75) 60%, #ffffff 95%);
}

.mi-final-card {
    position: relative;
    background: #f2f2f2;
    border-top: 4px solid #ffe800;
    border-radius: 16px;
    padding: 80px 32px 80px;
    text-align: center;
    overflow: hidden;
}

.years-of-remainig img {
    width: 100%
}


.mi-final-shape {
    position: absolute;
    bottom: 0;
    right: 0;
    filter: grayscale(1)
}

.years-of-remainig {
    position: relative
}

.years-of-remainig .container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 100px;
    padding-right: 100px;
}

.years-of-remainig .years-of-logo {
    width: 350px
}

.mi-final-eyebrow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-weight: 400;
    font-size: 9.6px;
    line-height: 14.4px;
    letter-spacing: 2.88px;
    text-transform: uppercase;
    color: #0054a4;
    margin-bottom: 16px;
}

.mi-final-line {
    display: inline-block;
    width: 50px;
    height: 1px;
    background: #022a50;
}

.mi-final-heading {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 56px;
    letter-spacing: -2px;
    text-transform: uppercase;
    color: #022a50;
    margin-bottom: 10px;
}

.mi-final-since {
    position: relative;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -1.32px;
    text-transform: uppercase;
    color: #0054a4;
    margin: 0 0 16px;
}

.mi-final-year {
    display: inline-block;
    padding: 0 6.6px;
    font-weight: 700;
    color: #022a50;
    background: linear-gradient(180deg, rgba(255, 232, 0, 0) 55%, #ffe800 55%, #ffe800 90%, rgba(255, 232, 0, 0) 90%);
}

.mi-final-dot {
    font-family: 'Montserrat', sans-serif;
    font-weight: 200;
    font-size: 44px;
    color: #0054a4;
}

.mi-final-body {
    position: relative;
    max-width: 736px;
    margin: 0 auto;
    font-size: 20px;
    line-height: 28px;
    color: #585754;
}

/* --- Mission CTA (blue band framing yellow card) --- */
.footer-cta-area.mi-cta {
    padding-top: 100px;
}

.mi-cta .create-card {
    padding: 86px 72px;
}

/* --- Mission responsive --- */
@media (max-width: 991.98px) {
    .mi-hero {
        padding: 140px 24px 70px;
    }

    .mi-hero-heading,
    .mi-principles-heading,
    .mi-flavor-heading {
        font-size: 36px;
    }

    .mi-hero-media {
        margin-top: 40px;
        padding: 0;
        max-width: 520px;
    }

    .mi-leadership-collage {
        margin-top: 8px;
        grid-template-rows: 240px 220px;
    }

    .mi-leadership-heading {
        font-size: 38px;
    }

    .mi-impact-media {
        margin-top: 0;
        max-width: 560px;
    }

    .mi-impact .section-heading {
        font-size: 36px;
    }

    .mi-final-heading {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -1.2px;
    }

    .mi-final-card {
        padding: 80px 32px;
    }
}

@media (max-width: 767.98px) {

    .mi-hero,
    .mi-principles,
    .mi-leadership,
    .mi-impact,
    .mi-programs,
    .mi-expanding,
    .mi-literacy,
    .mi-final,
    .mi-flavor {
        padding: 56px 0;
    }

    .mi-hero {
        padding-top: 120px;
    }

    .mi-leadership-heading {
        font-size: 32px;
    }

    .mi-leadership-collage {
        grid-template-rows: 180px 160px;
        gap: 10px;
    }

    .mi-hero-heading {
        font-size: 32px;
    }

    .mi-hero-actions .cta-btn {
        width: 100%;
    }

    .mi-principles-heading,
    .mi-flavor-heading {
        font-size: 28px;
    }

    .mi-final-card {
        padding: 56px 24px;
    }

    .mi-final-heading {
        font-size: 26px;
        line-height: 34px;
        letter-spacing: -.8px;
    }

    .mi-final-body {
        font-size: 17px;
        line-height: 26px;
    }

    .mi-final-since {
        font-size: 28px;
    }

    .mi-video {
        margin-top: 36px;
        border-radius: 14px;
    }

    .mi-video-play {
        width: 64px;
        height: 64px;
        font-size: 22px;
    }

    .mi-program-row {
        margin-bottom: 44px;
    }

    .mi-program-media {
        margin-top: 28px;
        max-width: 320px;
    }

    .footer-cta-area.mi-cta {
        padding-top: 60px;
    }

    .mi-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Privacy Notice page ===
   ================================================================= */

/* --- Hero (navy) --- */
.pn-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 70px;
    overflow: hidden;
}

.pn-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.pn-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.pn-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pn-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.pn-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.pn-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.pn-breadcrumb a:hover {
    color: #fff;
}

.pn-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 55px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 18px;
}

.pn-hero-heading .accent {
    color: #edc404;
}

.pn-hero-lead {
    max-width: 600px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .84);
    margin: 0;
}

/* --- Content --- */
.pn-content {
    background: #fff;
    padding: 80px 0 90px;
}

.pn-doc {
    max-width: 820px;
    margin: 0 auto;
}

.plain-text {
    font-size: 17px;
    line-height: 27.54px;
    color: #3a4252;
    margin-bottom: 20px;
}

.plain-text p a,
.plain-text li a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.plain-text p a:hover,
.plain-text li a:hover {
    text-decoration: none;
}

.plain-text ol {
    list-style: none;
    counter-reset: pn;
    margin: 0 0 32px;
    padding: 0;
}

.plain-text ol li {
    counter-increment: pn;
    position: relative;
    padding-left: 34px;
    margin-bottom: 12px;
    font-size: 17px;
    line-height: 27.54px;
    color: #3a4252;
}

.plain-text ol li::before {
    content: counter(pn) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #16399e;
}

.plain-text h1,
.plain-text h2,
.plain-text h3,
.plain-text h4,
.plain-text h5,
.plain-text h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 12px;
    position: relative
}

.pn-bar {
    display: block;
    width: 46px;
    height: 4px;
    border-radius: 4px;
    background: var(--c-yellow);
    margin-bottom: 15px;
}

.plain-text h1 {
    font-size: 30px;
}

.plain-text h2 {
    font-size: 25px;
}

.plain-text h3 {
    font-size: 22px;
}

.plain-text h4 {
    font-size: 20px;
}

.plain-text h4 {
    font-size: 18px;
}

.plain-text h4 {
    font-size: 15px;
}

.plain-text hr {
    margin: 40px 0
}


.plain-text ul {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.plain-text ul li {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 12px;
    font-size: 17px;
    line-height: 27.54px;
    color: #1a2033;
    position: relative;
    padding-left: 34px
}

.plain-text ul li::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    background: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="25" height="25" rx="12.5" fill="%23FFD200"/><path d="M9 13L11 15L16 10" stroke="%230C1B3D" stroke-width="1.3"/></svg>')
}

.pn-callout {
    background: #faf6ec;
    border-left: 4px solid var(--c-yellow);
    border-radius: 0 14px 14px 0;
    padding: 23px 26px 24px 30px;
    margin-top: 34px;
}

.pn-callout p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16.5px;
    line-height: 24.75px;
    color: var(--c-navy);
    margin: 0;
}

.pn-callout a {
    color: #16399e;
    text-decoration: underline;
    word-break: break-word;
}

/* --- Privacy responsive --- */
@media (max-width: 991.98px) {
    .pn-hero {
        padding: 130px 24px 60px;
    }

    .pn-hero-heading {
        font-size: 40px;
    }
}

@media (max-width: 767.98px) {
    .pn-hero-heading {
        font-size: 32px;
    }

    .pn-hero-lead {
        font-size: 16px;
    }

    .pn-content {
        padding: 50px 0 60px;
    }

    .pn-heading {
        font-size: 22px;
    }
}

/* =================================================================
   === Sustainability page ===
   ================================================================= */

/* accent helpers used on this page */
.accent-blue-italic {
    color: #16399e;
}

.accent-dark-italic {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: var(--c-navy);
}

/* --- Hero (navy) --- */
.su-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 80px;
    overflow: hidden;
}

.su-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.su-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.su-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.su-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.su-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.su-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.su-breadcrumb a:hover {
    color: #fff;
}

.su-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 51px;
    line-height: 1.04;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 24px;
}

.su-hero-heading .accent {
    color: var(--c-yellow);
}

.su-hero-copy {
    max-width: 1041px;
}

.su-hero-copy p {
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .84);
    margin-bottom: 18px;
}

.su-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
}

/* --- shared section head --- */
.su-section-head {
    max-width: 840px;
    margin-bottom: 40px;
}

.su-section-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 42px;
    line-height: 1.06;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 15px;
}

.su-section-intro {
    font-size: 18px;
    line-height: 28.8px;
    color: #3a4252;
    margin: 0;
}

.su-subheading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -.2px;
    color: var(--c-navy);
    margin: 0 0 20px;
}

.su-subheading--spaced {
    margin-top: 35px;
}

/* --- Human (cream) --- */
.su-human {
    padding: 80px 0;
}

.su-source-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 22px;
    padding: 47px;
    margin-bottom: 30px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
}

.su-source-logo {
    height: 64px;
    width: auto;
    margin-bottom: 13px;
    display: block;
}

.su-source-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -.2px;
    color: var(--c-navy);
    margin-bottom: 12px;
}

.su-source-card > p {
    font-size: 16px;
    line-height: 25.6px;
    color: #3a4252;
    margin-bottom: 16px;
}

.su-source-list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    column-count: 2;
    column-gap: 36px;
}

.su-source-list li {
    margin-bottom: 13px;
    break-inside: avoid;
}

.su-source-list li,
.su-econ-list li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font-size: 16px;
    line-height: 22.4px;
    color: #1a2033;
}

.su-check {
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    border-radius: 12.5px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-top: 1px;
}

.su-source-btn {
    display: inline-flex;
}

/* human 3 cards */
.su-human-cards {
    margin-bottom: 30px;
}

.su-card {
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    padding: 29px;
    height: 100%;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
}

.su-card-ico {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: #0054a4;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
}

.su-card-ico img {
    height: 40px;
}

.su-card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -.2px;
    color: var(--c-navy);
    margin-bottom: 12px;
}

.su-card p {
    font-size: 15px;
    line-height: 23.25px;
    color: #3a4252;
    margin-bottom: 12px;
}

.su-card p:last-child {
    margin-bottom: 0;
}

.su-card-note a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

/* stat band (blue) */
.su-stat-band {
    background: #0054a4;
    border-radius: 22px;
    padding: 52px;
    display: flex;
    gap: 56px;
    align-items: center;
    position: relative;
    z-index: 1;
    margin-top: -130px
}

.partnership-shape {
    position: absolute;
    bottom: 0;
    z-index: -1;
    left: 0;
    width: 100%;
}

.su-stat-big {
    flex-shrink: 0;
    width: 205px;
}

.su-stat-num {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 104px;
    line-height: .85;
    color: var(--c-yellow);
    margin-bottom: 12px;
}

.su-stat-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

.su-stat-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -.2px;
    color: #fff;
    margin-bottom: 11px;
}

.su-stat-copy {
    font-size: 18px;
    line-height: 29.7px;
    color: rgba(255, 255, 255, .84);
    margin: 0;
}

/* --- Environmental (white) --- */
.su-env {
    background: #fff;
    padding: 80px 0;
}

.su-stats-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 1080px;
    column-count: 2;
    column-gap: 48px;
}

.su-stat {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 0;
    border-bottom: 1px solid rgba(12, 27, 61, .12);
    break-inside: avoid;
    height: 100%
}

.su-stat-ico {
    flex-shrink: 0;
    width: 21px;
    height: 21px;
    border-radius: 10.5px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    margin-top: 3px;
}

.su-stat p {
    font-size: 16.5px;
    line-height: 23.93px;
    color: #1a2033;
    margin: 0;
}

.su-stat strong {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: #16399e;
}

.su-env-note {
    max-width: 760px;
    font-size: 18px;
    line-height: 28.8px;
    color: #3a4252;
    margin-bottom: 24px;
}

.su-chart {
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 16px;
    padding: 16px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.su-chart img {
    max-width: 100%;
    height: auto;
    display: block;
    width: 100%
}

/* --- Economic (white) --- */
.su-econ {
    background: #fff;
    padding: 80px 0;
}

.su-econ-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    padding: 29px;
    height: 100%;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
}

.su-econ-num {
    display: block;
    font-weight: 900;
    font-size: 34px;
    letter-spacing: -1.36px;
    color: rgba(12, 27, 61, .16);
    margin-bottom: 6px;
    -webkit-text-fill-color: white;
    -webkit-text-stroke: 1px #001E3B;
    margin-bottom: 15px
}

.su-econ-card a {
    color: #0054a4;
    font-weight: 600;
    text-decoration: underline;
}

.su-econ-card a:hover {
    text-decoration: none
}

.su-econ-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -.2px;
    color: var(--c-navy);
    margin-bottom: 14px;
}

.su-econ-card > p {
    font-size: 15px;
    line-height: 23.25px;
    color: #3a4252;
    margin-bottom: 14px;
}

.su-econ-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.su-econ-list a {
    color: #0054a4;
    font-weight: 700;
    text-decoration: underline;
}

.su-econ-list a:hover {
    text-decoration: none
}

/* A list written into a card's copy, which the reset would otherwise leave
   without its markers. The side list this card style also carries sets its own. */
.su-econ-card ul:not(.su-econ-list) {
    list-style: disc;
    margin: 0 0 14px;
    padding-left: 20px;
}

.su-econ-card ul:not(.su-econ-list) li {
    display: list-item;
    font-size: 15px;
    line-height: 23.25px;
    color: #3a4252;
}

/* --- Awards (blue) --- */
.su-awards {
    background: #0054a4;
    padding: 80px 0;
}

.su-awards-head {
    text-align: center;
    margin-bottom: 44px;
}

.su-awards-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 46px;
    line-height: 1.04;
    letter-spacing: -.5px;
    color: #fff;
    margin-bottom: 12px;
}

.su-awards-heading .accent {
    color: var(--c-yellow);
}

.su-awards-sub {
    max-width: 560px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 28.8px;
    color: rgba(255, 255, 255, .82);
}

.su-awards-logos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.su-award-card {
    background: #fff;
    border-radius: 18px;
    padding: 30px 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 150px;
    flex: 1 1 0;
}

.su-award-card img {
    max-width: 100%;
    max-height: 90px;
    width: auto;
    object-fit: contain;
    display: block;
}

.su-award-sep {
    color: var(--c-yellow);
    font-size: 11px;
    display: flex;
    align-items: center;
}

/* --- Mission CTA (blue band framing yellow card) --- */
.footer-cta-area.su-cta {
    padding-top: 100px;
}

.su-cta .create-card {
    padding: 86px 72px;
}

/* --- Sustainability responsive --- */
@media (max-width: 991.98px) {
    .su-hero {
        padding: 130px 24px 60px;
    }

    .su-hero-heading,
    .su-section-heading {
        font-size: 34px;
    }

    .su-source-card {
        padding: 32px;
    }

    .su-stat-band {
        flex-direction: column;
        gap: 24px;
        padding: 40px;
        text-align: center;
    }

    .su-stat-big {
        width: auto;
    }

    .su-stat-num {
        font-size: 84px;
    }

    .su-award-card {
        flex: 0 0 auto;
    }
}

@media (max-width: 767.98px) {

    .su-hero,
    .su-human,
    .su-env,
    .su-awards {
        padding: 56px 0;
    }

    .su-hero {
        padding-top: 120px;
    }

    .su-econ {
        padding-bottom: 56px;
    }

    .su-hero-heading {
        font-size: 30px;
    }

    .su-hero-actions .cta-btn {
        width: 100%;
    }

    .su-section-heading {
        font-size: 28px;
    }

    .su-source-list,
    .su-stats-grid {
        column-count: 1;
    }

    .su-awards-heading {
        font-size: 32px;
    }

    .su-award-sep {
        display: none;
    }

    .footer-cta-area.su-cta {
        padding-top: 60px;
    }

    .su-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Recipes page ===
   ================================================================= */

/* --- Hero (navy, centered) --- */
.rc-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
    text-align: center;
    padding-bottom: 300px
}

.rc-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.rc-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.rc-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rc-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.rc-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.rc-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.rc-breadcrumb a:hover {
    color: #fff;
}

.rc-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 53px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin: 0 auto;
    max-width: 1000px;
}

/* blue accent for recipe headings (scoped accent-blue-solid only targets .section-heading) */
.rc-browser-title .accent-blue-solid,
.rc-videos-heading .accent-blue-solid {
    color: #16399e;
}

/* --- Recipes browser card --- */
.rc-browser {
    background: #fff;
    padding: 70px 0 40px;
    margin-top: -230px;
}

.rc-browser-card {
    position: relative;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .35);
    padding: 44px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    overflow: hidden;
    z-index: 1
}

.rc-cat-chip img {
    max-height: 28px;
}

.rc-browser-top {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.rc-browser-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin: 0;
}

.rc-signup {
    display: flex;
    gap: 12px;
    align-items: stretch;
    min-width: 500px;
    width: 500px;
}

.rc-signup-input {
    flex: 1 0 0;
    min-width: 0;
    background: #faf6ec;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 12px;
    padding: 19.5px 17px;
    font-size: 15.5px;
    color: var(--c-navy);
}

.shape-rc {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
}

.rc-signup-input::placeholder {
    color: #757575;
}

.rc-signup-input:focus {
    outline: none;
    border-color: var(--blue-500, #0054A4);
    box-shadow: 0 0 0 3px rgba(0, 84, 164, .12);
}

/* category carousel */
.rc-cat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    filter: blur(3.5px);
    pointer-events: none;
    user-select: none;
}

.rc-cat-nav {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 23px;
    border: 0;
    background: linear-gradient(160deg, #fff7cc 0%, #ffe873 100%);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 0 0 #f2d34d, 0 12px 18px -10px rgba(242, 211, 77, .7);
    transition: transform .12s;
}

.rc-cat-nav:hover:not(:disabled):not(.slick-disabled) {
    transform: translateY(-1px);
}

.rc-cat-nav:active:not(:disabled):not(.slick-disabled) {
    transform: translateY(2px);
    box-shadow: 0 2px 0 0 #f2d34d;
}

.rc-cat-nav:disabled,
.rc-cat-nav.slick-disabled {
    opacity: .25;
    cursor: default;
    box-shadow: 0 4px 0 0 rgba(233, 181, 0, .4);
}

.rc-cat-track {
    flex: 1 0 0;
    min-width: 0;
}

.rc-cat-track .slick-list {
    margin: 0 -7px;
    padding: 4px 2px 8px;
}

.rc-cat-track .slick-track {
    display: flex;
}

.rc-cat-track .slick-slide {
    height: auto;
    margin: 0 7px;
}

.rc-cat {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(160deg, #ffe873 0%, #ffd200 100%);
    box-shadow: 0 6px 0 0 #e9b500, 0 18px 26px -14px rgba(233, 181, 0, .75);
    padding: 20px 14px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    cursor: pointer;
    opacity: .7;
    transition: transform .15s, opacity .15s;
}

.rc-cat.is-active,
.rc-cat:hover {
    opacity: 1;
}

.rc-cat:hover {
    transform: translateY(-2px);
}

.rc-cat-chip {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: #fff;
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.rc-cat-name {
    font-family: 'Shantell Sans', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--c-navy);
}

.rc-cat-count {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: rgba(12, 27, 61, .65);
}

/* gated recipe preview */
.rc-preview {
    position: relative;
    border-top: 1px solid rgba(12, 27, 61, .12);
    padding-top: 25px;
}

.rc-preview-list {
    list-style: none;
    margin: 0;
    padding: 0;
    column-count: 3;
    column-gap: 26px;
    filter: blur(3.5px);
    opacity: .55;
    pointer-events: none;
    user-select: none;
}

.rc-preview-list li {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 15.5px;
    line-height: 24.8px;
    color: var(--c-navy);
    padding: 7px 0;
    break-inside: avoid;
}

.rc-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--c-yellow);
    flex-shrink: 0;
}

.rc-gate {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    max-width: 90%;
    text-align: center;
    padding: 20px;
}

.rc-gate-ico {
    width: 56px;
    height: 56px;
    border-radius: 28px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 11px;
    box-shadow: 0 14px 30px -12px rgba(12, 27, 61, .45);
}

.rc-gate-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 17px;
    line-height: 22.95px;
    color: var(--c-navy);
    margin-bottom: 6px;
}

.rc-gate-note {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    line-height: 21.6px;
    color: #3a4252;
    margin: 0;
}

.rc-browser-foot {
    text-align: center;
    font-size: 14.5px;
    line-height: 23.2px;
    color: #3a4252;
    margin: 26px 0 0;
}


/* --- Testimonial --- */
.rc-testimonial {
    background: #fff;
    padding: 40px 0 60px;
}

.rc-quote-card {
    display: flex;
    background: #0054a4;
    border-radius: 18px;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .35);
    overflow: hidden;
    margin: 0;
}

.rc-quote-body {
    flex: 1 1 0;
    padding: 50px;
}

.rc-quote-media {
    flex: 0 0 36%;
    background: linear-gradient(148deg, #2a3a5e 0%, #0c1b3d 100%);
}

.rc-quote-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rc-stars {
    color: var(--c-yellow);
    font-size: 24px;
    letter-spacing: 2px;
    margin-bottom: 22px;
}

.rc-quote {
    margin: 0 0 38px;
}

.rc-quote p {
    font-weight: 700;
    font-size: 28px;
    line-height: 39.2px;
    color: #fff;
    margin: 0;
}

.rc-quote-cite {
    border-top: 1px solid rgba(255, 255, 255, .16);
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rc-quote-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: .2px;
    color: #fff;
}

.rc-quote-role {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--c-yellow);
}

/* --- Video gallery --- */
.rc-videos {
    background: #fff;
    padding: 40px 0 70px;
}

.rc-videos-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    text-align: center;
    margin-bottom: 42px;
}

.rc-video {
    position: relative;
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 348 / 260;
    background: var(--c-navy);
    box-shadow: 0 27px 61px -29px rgba(12, 27, 61, .35);
}

.rc-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rc-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 18, 42, 0) 40%, rgba(8, 18, 42, .55) 100%);
}

.rc-video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    padding-left: 5px;
    box-shadow: 0 17px 41px -12px rgba(0, 0, 0, .6);
    transition: transform .2s;
}

.rc-video:hover .rc-video-play {
    transform: translate(-50%, -50%) scale(1.06);
}

/* --- Recipe index --- */
.rc-index {
    background: #fff;
    padding: 0 0 90px;
}

.rc-index-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rc-recipe {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .1);
    border-radius: 12px;
    padding: 15px 17px;
    height: 100%;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.rc-recipe:hover {
    border-color: var(--c-yellow);
    box-shadow: 0 12px 26px -18px rgba(12, 27, 61, .4);
    transform: translateY(-2px);
}

.rc-recipe-badge {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--c-navy);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .5px;
}

.rc-recipe-name {
    flex: 1 0 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--c-navy);
    line-height: 1.25;
}

.rc-recipe-dl {
    flex-shrink: 0;
    color: var(--blue-500, #0054A4);
    font-size: 15px;
}

.rc-index-foot {
    text-align: center;
    font-size: 15px;
    color: #6b7280;
    margin: 30px 0 0;
}

/* --- Mission CTA --- */
.footer-cta-area.rc-cta {
    padding-top: 100px;
}

.rc-cta .create-card {
    padding: 86px 72px;
}

/* --- Recipes responsive --- */
@media (max-width: 991.98px) {
    .rc-hero {
        padding: 130px 24px 60px;
    }

    .rc-hero-heading {
        font-size: 38px;
    }

    .rc-browser-card {
        padding: 32px;
    }

    .rc-browser-title {
        font-size: 32px;
    }

    .rc-quote-card {
        flex-direction: column;
    }

    .rc-quote-media {
        flex-basis: auto;
        height: 280px;
        order: -1;
    }

    .rc-quote-body {
        padding: 36px;
    }

    .rc-quote p {
        font-size: 22px;
        line-height: 32px;
    }

    .rc-preview-list {
        column-count: 2;
    }

    .rc-videos-heading {
        font-size: 32px;
    }
}

@media (max-width: 767.98px) {
    .rc-hero-heading {
        font-size: 30px;
    }

    .rc-browser {
        padding: 50px 0 30px;
    }

    .rc-browser-top {
        flex-direction: column;
        align-items: stretch;
    }

    .rc-signup {
        min-width: 0;
    }

    .rc-cat-track .slick-list {
        padding: 4px 2px 8px;
    }

    .rc-preview-list {
        column-count: 1;
        filter: none;
        opacity: 1;
    }

    .rc-gate {
        position: static;
        transform: none;
        width: 100%;
        margin-top: 8px;
        background: rgba(255, 255, 255, .95);
        border-radius: 16px;
    }

    .rc-videos-heading {
        font-size: 26px;
    }

    .footer-cta-area.rc-cta {
        padding-top: 60px;
    }

    .rc-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Careers page ===
   ================================================================= */

.cr-heading .accent-blue-solid {
    color: #16399e;
}

/* --- Hero (navy) --- */
.cr-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
}

.cr-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.cr-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.cr-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cr-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.cr-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.cr-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.cr-breadcrumb a:hover {
    color: #fff;
}

.cr-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 51px;
    line-height: 1.04;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 20px;
}

.cr-hero-heading .accent {
    color: var(--c-yellow);
}

.cr-hero-tagline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 36.8px;
    color: var(--c-yellow);
    margin-bottom: 22px;
}

.cr-hero-lead {
    max-width: 600px;
    font-size: 18px;
    line-height: 28.8px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 18px;
}

.cr-hero-lead a {
    color: var(--c-yellow);
    font-weight: 600;
    text-decoration: underline;
}

.cr-hero-lead strong {
    color: #fff;
    font-weight: 700;
}

.cr-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
}

/* --- Hero media card + badge --- */
.cr-hero-media {
    position: relative;
    border-radius: 18px;
    overflow: visible;
    background: linear-gradient(152deg, #2a3a5e 0%, #0c1b3d 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.cr-hero-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

.cr-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 108px;
    height: 108px;
    background: var(--c-yellow);
    color: var(--c-navy);
    border-radius: 54px;
    transform: rotate(-6deg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Shantell Sans', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 14.38px;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
    z-index: 2;
}

/* --- Shared split sections --- */
.cr-split {
    padding: 80px 0;
}

.cr-split--cream {
    background: #faf6ec;
}

.cr-split--white {
    background: #fff;
}

.cr-media {
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(150deg, #2a3a5e 0%, #0c1b3d 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.cr-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.cr-media--light {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.cr-media--light img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.cr-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 42px;
    line-height: 1.06;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 18px;
}

.cr-subheading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -.2px;
    color: #16399e;
    margin-bottom: 14px;
}

.cr-text {
    font-size: 17.5px;
    line-height: 28px;
    color: #3a4252;
    margin-bottom: 18px;
}

.cr-text--bold {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--c-navy);
    margin-bottom: 18px;
}

.cr-text a,
.cr-checklist a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

/* checklist */
.cr-checklist,
.cr-benefits {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cr-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 16.5px;
    line-height: 23.93px;
    color: #1a2033;
}

.cr-benefits li {
    display: flex;
    align-items: center;
    gap: 13px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 27.2px;
    color: var(--c-navy);
}

.cr-check {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-top: 1px;
}

/* --- Video (Day in the Life) --- */
.cr-video {
    position: relative;
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 576 / 475;
    background: linear-gradient(150deg, #2a3a5e 0%, #0c1b3d 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.cr-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cr-video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    padding-left: 5px;
    box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .6);
    transition: transform .2s;
}

.cr-video:hover .cr-video-play {
    transform: translate(-50%, -50%) scale(1.06);
}

/* --- Postings & contact --- */
.cr-postings {
    padding: 90px 0;
}

/* --- Get in touch card (single panel, internal dividers) --- */
.cr-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    max-width: 1129px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    padding: 43px 49px;
}

.cr-contact-lead {
    flex: 0 0 auto;
    max-width: 181px;
}

.cr-contact-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 28.8px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin: 0;
}

.cr-contact-heading span {
    color: #16399e;
}

.cr-contact-col {
    flex: 0 1 348px;
    padding-left: 44px;
    border-left: 1px solid rgba(12, 27, 61, .12);
}

.cr-contact-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 14px;
    line-height: 22.4px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #16399e;
    margin: 0 0 16px;
}

.cr-contact-lines {
    font-size: 16px;
    line-height: 24.8px;
    color: #1a2033;
    margin: 0;
}

.cr-contact-lines a {
    color: #1a2033;
}

.cr-contact-lines a:hover {
    color: #16399e;
}

.cr-contact-link {
    display: inline-block;
    margin-top: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 20px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #0054a4;
    text-decoration: none;
}

.cr-contact-link:hover {
    text-decoration: underline;
}

@media (max-width: 991.98px) {
    .cr-contact {
        flex-wrap: wrap;
        gap: 32px;
        padding: 36px;
    }

    .cr-contact-lead {
        flex: 1 1 100%;
        max-width: none;
    }

    .cr-contact-col {
        flex: 1 1 240px;
        padding-left: 28px;
    }
}

@media (max-width: 575.98px) {
    .cr-contact {
        gap: 26px;
        padding: 28px 24px;
    }

    .cr-contact-col {
        flex: 1 1 100%;
        padding-left: 0;
        padding-top: 26px;
        border-left: 0;
        border-top: 1px solid rgba(12, 27, 61, .12);
    }
}


/* --- Mission CTA --- */
.footer-cta-area.cr-cta {
    padding-top: 135px;
}

.cr-cta .create-card {
    padding: 86px 72px;
}

.cr-cta .create-heading .accent {
    color: #0054a4;
}

/* --- Careers responsive --- */
@media (max-width: 991.98px) {
    .cr-hero {
        padding: 130px 24px 60px;
    }

    .cr-hero-heading,
    .cr-heading {
        font-size: 34px;
    }

    .cr-hero-media {
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .cr-media {
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .cr-video {
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .cr-badge {
        width: 88px;
        height: 88px;
        font-size: 11px;
    }
}

@media (max-width: 767.98px) {
    .cr-hero-heading {
        font-size: 30px;
    }

    .cr-hero-tagline {
        font-size: 19px;
    }

    .cr-split,
    .cr-postings {
        padding: 56px 0;
    }

    .cr-heading {
        font-size: 28px;
    }

    .cr-hero-actions .cta-btn {
        width: 100%;
    }

    .footer-cta-area.cr-cta {
        padding-top: 60px;
    }

    .cr-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Who We Serve page ===
   ================================================================= */

/* navy outline button variant (used for sector CTAs + contact) */
.cta-btn.btn_outline_navy {
    border: 2px solid rgba(12, 27, 61, .45);
    color: var(--c-navy);
    background: transparent;
}

.cta-btn.btn_outline_navy:hover {
    border-color: var(--c-navy);
    background: var(--c-navy);
    color: #fff;
}

/* --- Hero (navy) --- */
.ws-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
}

.ws-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.ws-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.ws-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ws-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.ws-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.ws-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.ws-breadcrumb a:hover {
    color: #fff;
}

.ws-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 53px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    max-width: 960px;
    margin-bottom: 28px;
}

.ws-hero-heading .accent {
    color: var(--c-yellow);
}

.ws-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* --- Intro (cream) --- */
.ws-intro {
    background: #faf6ec;
    padding: 80px 0;
}

.ws-intro-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 44px;
    line-height: 1.04;
    letter-spacing: -.5px;
    color: var(--c-navy);
    text-align: center;
    margin-bottom: 48px;
}

.ws-pullquote {
    font-weight: 400;
    font-size: 31px;
    line-height: 40.3px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin: 0;
    font-family: "Playfair Display", serif;
}

.ws-pullquote .accent-blue-italic {
    color: #16399e;
}

.ws-intro-body {
    font-size: 18px;
    line-height: 30.6px;
    color: #3a4252;
    margin: 0;
}

/* --- Sectors --- */
.ws-sectors {
    padding: 80px 0 90px;
    position: relative;
}

.ws-sector:last-child {
    padding-bottom: 0
}

/* serpentine dashed connector down the centre (desktop only) */
.ws-sectors .snake-wrapper {
    position: relative;
    margin-top: 30px
}

.ws-sectors .snake-path {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%) scale(1);
    height: 100%;
}

.ws-sector {
    position: relative;
    z-index: 1;
    padding: 70px 0;
}

.ws-sector-body {
    position: relative;
    max-width: 520px;
}

.ws-col-media {
    position: relative
}

.ws-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0054a4;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
    padding: 10px 18px;
    border-radius: 10px;
    margin-bottom: 18px;
    filter: drop-shadow(0 8px 9px rgba(13, 44, 84, .22));
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
}

.ws-sector-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -.3px;
    line-height: 1.05;
    color: var(--c-navy);
    margin-bottom: 13px;
}

.ws-sector-text {
    font-size: 16.5px;
    line-height: 26.4px;
    color: #3a4252;
    margin-bottom: 22px;
}

.ws-sector-text a:not(.cta-btn) {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.ws-sector-text a:hover {
    text-decoration: none
}

/* organic blob-masked image */
.ws-blob {
    margin: 0;
    width: 422px;
    max-width: 100%;
    height: 380px;
    overflow: hidden;
    border-radius: 160px 173px 453px 479px / 173px 160px 479px 453px;
    box-shadow: 0 30px 60px -30px rgba(12, 27, 61, .35);
    background: linear-gradient(150deg, #2a3a5e 0%, #0c1b3d 100%);
    margin-inline: auto;
}

.ws-blob img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Mission CTA --- */
.footer-cta-area.ws-cta {
    padding-top: 100px;
}

.ws-cta .create-card {
    padding: 86px 72px;
}

.ws-cta .create-heading .accent {
    color: #0054a4;
}

/* --- Who We Serve responsive --- */
@media (max-width: 991.98px) {
    .ws-hero {
        padding: 130px 24px 60px;
    }

    .ws-hero-heading {
        font-size: 38px;
    }

    .ws-intro-heading {
        font-size: 34px;
    }

    .ws-pullquote {
        font-size: 26px;
        line-height: 34px;
    }

    .ws-sectors .container::before {
        display: none;
    }

    .ws-sector {
        padding: 28px 0;
    }

    .ws-sector-body {
        max-width: none;
    }

    /* image always on top on mobile, regardless of DOM order */
    .ws-col-media {
        order: -1;
    }
}

@media (max-width: 767.98px) {
    .ws-hero-heading {
        font-size: 30px;
    }

    .ws-intro,
    .ws-sectors {
        padding: 56px 0;
    }

    .ws-intro-heading {
        font-size: 28px;
    }

    .ws-sector-title {
        font-size: 28px;
    }

    .ws-blob {
        width: 300px;
        height: 300px;
        border-radius: 120px 130px 340px 360px / 130px 120px 360px 340px;
    }

    .ws-hero-actions .cta-btn,
    .ws-cta .create-actions .cta-btn {
        width: 100%;
    }

    .footer-cta-area.ws-cta {
        padding-top: 60px;
    }

    .ws-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Restaurants page ===
   ================================================================= */

.rs-section-heading .accent-blue-solid {
    color: #16399e;
}

/* --- Hero (navy) --- */
.rs-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
}

.rs-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.rs-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.rs-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rs-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.rs-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.rs-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.rs-breadcrumb a:hover {
    color: #fff;
}

.rs-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 51px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 20px;
}

.rs-hero-heading .accent {
    color: var(--c-yellow);
}

.rs-hero-lead {
    max-width: 620px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 26px;
}

.rs-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.rs-hero-media {
    position: relative;
    border-radius: 18px;
    overflow: visible;
    background: linear-gradient(152deg, #e9d49a 0%, #d8b15e 50%, #b98a36 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.rs-hero-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

.rs-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 108px;
    height: 108px;
    background: var(--c-yellow);
    color: var(--c-navy);
    border-radius: 54px;
    transform: rotate(-6deg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Shantell Sans', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 14.38px;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
    z-index: 2;
}

/* --- Intro (cream) --- */
.rs-intro {
    background: #faf6ec;
    padding: 80px 0;
}

.rs-pullquote {
    font-weight: 400;
    font-size: 32px;
    line-height: 41.6px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin: 0;
}

.rs-pullquote .accent-blue-italic {
    color: #16399e;
}

.rs-intro-body {
    font-size: 18px;
    line-height: 29.7px;
    color: #3a4252;
    margin: 0;
}

/* --- Improved Presentation (cream) --- */
.rs-presentation {
    padding: 80px 0;
    position: relative;
    z-index: 1;
    background: #FAF8F1;
    background-blend-mode: normal, normal, normal, normal, normal, luminosity;
}

.rs-presentation .container {
    position: relative
}

.ylo-border-shape {
    position: absolute;
    left: -22%;
    top: 0
}

.rs-presentation .bg_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    mix-blend-mode: luminosity
}

.rs-compare {
    position: relative;
    padding-left: 20px;
}

.rs-compare-num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 58px;
    line-height: 1;
    letter-spacing: -6px;
    color: #022A50;
    background: #FFE800;
    min-width: 120px;
    width: 120px;
    display: flex;
    min-height: 120px;
    height: 120px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto;
    transform: translateX(-50px);
	display:none
}

.rs-compare-media {
    position: relative;
    z-index: 1;
    border-radius: 18px;
    background: #1f5fb0;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
    margin-bottom: 50px
}

.rs-compare-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px
}

.rs-presentation-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -2.5px;
    text-transform: uppercase;
    color: #0054a4;
    margin-bottom: 20px;
}

.rs-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 16px;
}

.rs-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.rs-presentation-cta {
    margin-top: 12px;
}

/* === CPG Custom Butter Packaging Slider === */
.cpg-slider-section {
    padding: 60px 0 80px;
}

.cpg-slider {
    padding-top: 40px;
}

/* hide non-active slides before slick initializes to avoid a flash of all 5 */
.cpg-slider .cpg-slide + .cpg-slide {
    display: none;
}

.cpg-slider.slick-initialized .cpg-slide + .cpg-slide {
    display: block;
}

.cpg-slide {
    position: relative;
    padding-top: 26px;
}

/* big yellow circle number badge, sits above the media on the left column */
.cpg-slide-badge {
    position: absolute;
    top: -25px;
    right: 10%;
    z-index: 3;
	display:none
}

.cpg-slide-badge .rs-compare-num {
    margin: 0;
    transform: none;
    box-shadow: 0 18px 40px -18px rgba(12, 27, 61, .45);
}

.cpg-slide .rs-presentation-title {
    margin-top: 10px;
}

/* pagination: counter + 5 progress segments, bottom-left of the text column */
.cpg-slider-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 26px;
    padding-left: 4px;
}

.cpg-slider-count {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 2px;
    color: #0054a4;
}

.cpg-slider-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cpg-slider-seg {
    width: 34px;
    height: 4px;
    border-radius: 4px;
    background: rgba(0, 84, 164, .22);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background .3s ease, width .3s ease;
}

.cpg-slider-seg.is-active {
    width: 46px;
    background: #0054a4;
}

@media (max-width: 767.98px) {
    .cpg-slide-badge {
        left: auto;
        right: 16px;
        top: -28px;
    }

    .cpg-slide-badge .rs-compare-num {
        min-width: 90px;
        width: 90px;
        min-height: 90px;
        height: 90px;
        font-size: 44px;
    }

    .cpg-slider-nav {
        justify-content: center;
    }
}

/* --- Custom Butter Flavors (cream) --- */
.rs-flavors {
    padding: 80px 0;
}

.rs-section-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    text-align: center;
    margin-bottom: 40px;
}

.rs-section-heading--light {
    color: #fff;
    margin-bottom: 56px;
}

.rs-flavor-card {
    display: block;
    height: 100%;
    text-decoration: none;
}

.rs-flavor-media {
    border-radius: 0 48px 0 48px;
    overflow: hidden;
    aspect-ratio: 379 / 293;
    margin-bottom: 24px;
}

.rs-flavor-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.rs-flavor-card:hover .rs-flavor-media img {
    transform: scale(1.04);
}

.rs-flavor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-top: 2px solid var(--c-navy);
    padding-top: 20px;
    margin-bottom: 12px;
}

.rs-flavor-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 27.5px;
    color: var(--c-navy);
    margin: 0;
}

.rs-flavor-arrow {
    flex-shrink: 0;
    color: var(--c-navy);
    font-size: 18px;
    transition: transform .25s;
}

.rs-flavor-card:hover .rs-flavor-arrow {
    transform: translateX(5px);
}

.rs-flavor-text {
    font-size: 14.5px;
    line-height: 23.93px;
    color: #3a4252;
    margin: 0;
}

/* --- Bulk Butter Portions (blue) --- */
.rs-bulk {
    background: #0054a4;
    padding: 80px 0;
}

.rs-bulk-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 520px;
    border-radius: 20px;
    overflow: hidden;
    background: #0a3c86;
    text-decoration: none;
    height: 100%;
}

.rs-bulk-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform .4s ease;
}

.rs-bulk-card:hover .rs-bulk-bg {
    transform: scale(1.05);
}

.rs-bulk-label {
    position: relative;
    z-index: 1;
    background: var(--c-yellow);
    padding: 18px 22px 20px;
    border-top-right-radius: 18px;
    width: 100%;
    max-width: 372px;
}

.rs-bulk-label-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rs-bulk-num {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 34px;
    line-height: 1;
    color: rgba(255, 255, 255, .9);
    /* hidden at rest, slides + fades in on hover */
    max-width: 0;
    margin-right: -14px;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-6px);
    transition: max-width .4s ease, margin-right .4s ease, opacity .3s ease .05s, transform .4s ease;
}

.rs-bulk-card:hover .rs-bulk-num,
.rs-bulk-card:focus-visible .rs-bulk-num,
.rs-bulk-card:focus-within .rs-bulk-num {
    max-width: 60px;
    margin-right: 0;
    opacity: 1;
    transform: translateX(0);
}

.rs-bulk-title {
    flex: 1 0 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 22.5px;
    color: var(--c-navy);
    margin: 0;
}

.rs-bulk-arrow {
    flex-shrink: 0;
    color: var(--c-navy);
    font-size: 18px;
    transition: transform .25s;
}

.rs-bulk-card:hover .rs-bulk-arrow,
.rs-bulk-card:focus-visible .rs-bulk-arrow {
    transform: translateX(4px);
}

/* Body text: hidden by default, smoothly revealed on hover/focus */
.rs-bulk-text {
    margin: 0;
    font-size: 13px;
    line-height: 20.15px;
    color: rgba(13, 44, 84, .85);
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .45s ease, opacity .3s ease .05s, margin-top .45s ease;
}

.rs-bulk-text > span {
    overflow: hidden;
    min-height: 0;
}

.rs-bulk-card:hover .rs-bulk-text,
.rs-bulk-card:focus-visible .rs-bulk-text,
.rs-bulk-card:focus-within .rs-bulk-text {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 11px;
}

.rs-bulk-text strong {
    color: var(--c-navy);
    text-decoration: underline;
}

/* Touch devices have no hover — keep number + text visible */
@media (hover: none),
(pointer: coarse) {
    .rs-bulk-num {
        max-width: 60px;
        margin-right: 0;
        opacity: 1;
        transform: none;
    }

    .rs-bulk-text {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-top: 11px;
    }
}

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

    .rs-bulk-num,
    .rs-bulk-text {
        transition: none;
    }
}

/* --- Butter Sauces (cream) --- */
.rs-sauces {
    padding: 80px 0;
}

.rs-sauce-card {
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
    height: 100%;
}

.rs-sauce-media {
    background: #ece6da;
}

.rs-sauce-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rs-sauce-body {
    padding: 28px;
}

.rs-sauce-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -.3px;
    line-height: 1.05;
    color: var(--c-navy);
    margin-bottom: 12px;
}

.rs-sauce-text {
    font-size: 14.5px;
    line-height: 23.2px;
    color: #3a4252;
    margin: 0;
}

.rs-sauce-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

/* --- Mission CTA --- */
.footer-cta-area.rs-cta {
    padding-top: 100px;
}

.rs-cta .create-card {
    padding: 86px 72px;
}

.rs-cta .create-heading .accent {
    color: #16399e;
}

/* --- Restaurants responsive --- */
@media (max-width: 991.98px) {
    .rs-hero {
        padding: 130px 24px 60px;
    }

    .rs-hero-heading {
        font-size: 38px;
    }

    .rs-hero-media,
    .rs-compare-media {
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .rs-badge {
        width: 88px;
        height: 88px;
        font-size: 11px;
    }

    .rs-section-heading {
        font-size: 32px;
    }

    .rs-presentation-title {
        font-size: 32px;
        letter-spacing: -1.5px;
    }

    .rs-pullquote {
        font-size: 26px;
        line-height: 34px;
    }
}

@media (max-width: 767.98px) {
    .rs-hero-heading {
        font-size: 30px;
    }

    .rs-intro,
    .rs-flavors,
    .rs-bulk,
    .rs-sauces {
        padding: 56px 0;
    }

    .rs-presentation {
        padding: 10px 0 56px;
    }

    .rs-section-heading {
        font-size: 28px;
    }

    .rs-hero-actions .cta-btn {
        width: 100%;
    }

    .rs-bulk-label {
        max-width: none;
    }

    .footer-cta-area.rs-cta {
        padding-top: 60px;
    }

    .rs-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Consumer Packaged Goods page ===
   ================================================================= */

.cpg-heading .accent-blue-solid {
    color: #16399e;
}

/* --- Hero (navy) --- */
.cpg-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
}

.cpg-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.cpg-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.cpg-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cpg-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.cpg-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.cpg-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.cpg-breadcrumb a:hover {
    color: #fff;
}

.cpg-hero-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    margin-bottom: 12px;
}

.cpg-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 20px;
}

.cpg-hero-heading .accent {
    color: var(--c-yellow);
}

.cpg-hero-lead {
    max-width: 620px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 26px;
}

.cpg-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.cpg-hero-media {
    position: relative;
    border-radius: 18px;
    overflow: visible;
    background: linear-gradient(152deg, #e9d49a 0%, #d8b15e 50%, #b98a36 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.cpg-hero-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

.cpg-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 108px;
    height: 108px;
    background: var(--c-yellow);
    color: var(--c-navy);
    border-radius: 54px;
    transform: rotate(-6deg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Shantell Sans', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 14.38px;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
    z-index: 2;
}

/* --- Headings --- */
.cpg-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 18px;
}

.cpg-heading--center {
    text-align: center;
}

.cpg-heading--uc {
    text-transform: uppercase;
    letter-spacing: -2.5px;
    color: #0054a4;
}

.cpg-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 16px;
}

.cpg-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

/* --- Best-Tasting (white centered) --- */
.cpg-best {
    padding: 80px 0;
}

.cpg-best-text {
    max-width: 1050px;
    margin: 0 auto;
    text-align: center;
    font-size: 18px;
    line-height: 30.6px;
    color: #3a4252;
}

/* --- Split sections --- */
.cpg-split {
    padding: 60px 0;
}

.cpg-split--white {
    background: #fff;
}

.cpg-split--cream {
    background: #faf6ec;
}

.cpg-media {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.cpg-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* compare (packaging) block */
.cpg-compare {
    position: relative;
    padding-top: 30px;
    padding-left: 20px;
}

.cpg-compare-num {
    position: absolute;
    top: -18px;
    left: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 96px;
    line-height: 1;
    letter-spacing: -6px;
    color: #022a50;
    opacity: .12;
    z-index: 0;
}

.cpg-compare-media {
    position: relative;
    z-index: 1;
    border-radius: 18px;
    overflow: hidden;
    background: #1f5fb0;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.cpg-compare-media img {
    width: 100%;
    height: auto;
    display: block;
}

/* other products checklist */
.cpg-other-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    column-count: 2;
    column-gap: 36px;
}

.cpg-other-list li {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 14px;
    break-inside: avoid;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16.5px;
    color: #1a2033;
}

.cpg-check {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

/* --- Popular Flavors (cream) --- */
.cpg-flavors {
    padding: 80px 0;
}

.cpg-flavors-intro {
    max-width: 860px;
    margin: 0 auto 48px;
    text-align: center;
}

.cpg-flavors-lead {
    max-width: 734px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 29.16px;
    color: #3a4252;
}

.cpg-flavors-card {
    max-width: 1040px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 22px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
    padding: 45px;
}

.cpg-flavors-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(12, 27, 61, .12);
    padding-bottom: 19px;
    margin-bottom: 22px;
}

.cpg-flavors-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: var(--c-navy);
    margin: 0;
}

.cpg-flavors-count {
    background: #faf6ec;
    border-radius: 50px;
    padding: 6.5px 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #16399e;
}

.cpg-flavor-cat {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #16399e;
    margin-bottom: 14px;
    white-space: nowrap;
}

.cpg-flavor-cat::after {
    content: "";
    flex: 1 0 0;
    height: 1px;
    background: rgba(12, 27, 61, .12);
}

.cpg-flavor-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cpg-flavor-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(12, 27, 61, .12);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--c-navy);
}

.cpg-flavor-list li:last-child {
    border-bottom: 0;
}

.cpg-flavor-dot {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}

.cpg-flavors-foot {
    border-top: 1px solid rgba(12, 27, 61, .12);
    padding-top: 20px;
    margin: 22px 0 0;
    font-size: 15px;
    line-height: 24.3px;
    color: #3a4252;
}

.cpg-flavors-foot a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.cpg-flavors-foot a:hover {
    text-decoration: none
}

/* --- Mission CTA --- */
.footer-cta-area.cpg-cta {
    padding-top: 115px;
}

.cpg-cta .create-card {
    padding: 86px 72px;
}

.cpg-cta .create-heading .accent {
    color: #16399e;
}

/* --- CPG responsive --- */
@media (max-width: 991.98px) {
    .cpg-hero {
        padding: 130px 24px 60px;
    }

    .cpg-hero-heading {
        font-size: 36px;
    }

    .cpg-heading {
        font-size: 32px;
    }

    .cpg-heading--uc {
        letter-spacing: -1.5px;
    }

    .cpg-hero-media,
    .cpg-media,
    .cpg-compare-media {
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .cpg-badge {
        width: 88px;
        height: 88px;
        font-size: 11px;
    }

    .cpg-col-media {
        order: -1;
    }

}

@media (max-width: 767.98px) {
    .cpg-hero-heading {
        font-size: 30px;
    }

    .cpg-best {
        padding: 56px 0 20px;
    }

    .cpg-split,
    .cpg-flavors {
        padding: 40px 0;
    }

    .cpg-flavors {
        padding: 56px 0;
    }

    .cpg-heading {
        font-size: 26px;
    }

    .cpg-flavors-card {
        padding: 28px;
    }



    .cpg-hero-actions .cta-btn,
    .cpg-cta .create-actions .cta-btn {
        width: 100%;
    }

    .footer-cta-area.cpg-cta {
        padding-top: 60px;
    }

    .cpg-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Catering page ===
   ================================================================= */

.ct-heading .accent-blue-solid {
    color: #16399e;
}

.ct-heading .accent-blue-plain {
    color: #0054a4;
}

/* --- Hero (navy) --- */
.ct-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
}

.ct-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.ct-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.ct-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ct-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.ct-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.ct-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.ct-breadcrumb a:hover {
    color: #fff;
}

.ct-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 20px;
}

.ct-hero-heading-sub {
    display: block;
    font-weight: 700;
}

.ct-hero-heading .accent {
    color: var(--c-yellow);
}

.ct-hero-lead {
    max-width: 620px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 26px;
}

.ct-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.ct-hero-media {
    position: relative;
    border-radius: 18px;
    overflow: visible;
    background: linear-gradient(152deg, #e9d49a 0%, #d8b15e 50%, #b98a36 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.ct-hero-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

.ct-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 108px;
    height: 108px;
    background: var(--c-yellow);
    color: var(--c-navy);
    border-radius: 54px;
    transform: rotate(-6deg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Shantell Sans', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 14.38px;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
    z-index: 2;
}

/* --- Headings / shared --- */
.ct-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 14px;
}

.ct-heading--center {
    text-align: center;
}

.ct-heading--uc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 35px;
    letter-spacing: -2.7px;
    text-transform: uppercase;
    color: #0054a4;
    margin-bottom: 17px;
}

.ct-subhead {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -.3px;
    line-height: 1.05;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.ct-text,
.content-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 16px;
}

.ct-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.ct-lead {
    font-size: 18px;
    line-height: 29.16px;
    color: #3a4252;
    margin: 0;
}

.ct-lead--center {
    text-align: center;
}

.ct-section-intro {
    max-width: 880px;
    margin: 0 auto 40px;
    text-align: center;
}

.ct-section-intro--left {
    margin-left: 0;
    text-align: left;
    max-width: 900px;
}

.ct-media {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.ct-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* --- Intro (cream) --- */
.ct-intro {
    background: #faf6ec;
    padding: 80px 0;
}

.ct-intro-text {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 27px;
    line-height: 40.5px;
    color: var(--c-navy);
}

.ct-intro-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.ct-intro-text a:hover {
    text-decoration: none
}

/* --- Better Butter (white) --- */
.ct-better {
    background: #fff;
    padding: 80px 0;
}

.ct-better-split {
    margin-bottom: 40px;
}

.ct-better-cards {
    margin-top: 0;
}

.ct-numcard {
    position: relative;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
    padding: 39px;
    height: 100%;
}

.ct-numcard-num {
    display: block;
    font-family: 'Shantell Sans', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 61px;
    letter-spacing: -1.36px;
    color: transparent;
    -webkit-text-stroke: 1.4px rgba(2, 42, 80, .55);
    opacity: .69;
}

.ct-numcard-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 23px;
    letter-spacing: -.3px;
    line-height: 1.05;
    color: var(--c-navy);
    margin-bottom: 11px;
}

.ct-accent-italic {
    color: #16399e;
}

/* --- Delectable Dishes (cream) --- */
.ct-dishes {
    padding: 80px 0;
}

.ct-dish-row {
    margin-bottom: 48px;
}

.ct-dish-row:last-child {
    margin-bottom: 0;
}

/* --- Wholesale / Butter Balls (white) --- */
.ct-wholesale {
    background: #fff;
    padding: 80px 0;
}

.ct-compare {
    position: relative;
    padding-top: 30px;
    padding-left: 20px;
}

.ct-compare-num {
    position: absolute;
    top: -18px;
    left: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 96px;
    line-height: 1;
    letter-spacing: -6px;
    color: #022a50;
    opacity: .12;
    z-index: 0;
}

.ct-compare-media {
    position: relative;
    z-index: 1;
    border-radius: 18px;
    overflow: hidden;
    background: #1f5fb0;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.ct-compare-media img {
    width: 100%;
    height: auto;
    display: block;
}

.ct-wholesale-cta {
    margin-top: 8px;
}

/* --- Butter Sauces (cream) --- */
.ct-sauces {
    padding: 80px 0;
}

.ct-sauces-intro {
    max-width: 820px;
    margin: 0 auto 40px;
    text-align: center;
}

.ct-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #0054a4;
    margin-bottom: 12px;
}

.ct-sauce-cards {
    max-width: 960px;
    margin: 0 auto;
}

.ct-sauce-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
    padding: 30px 24px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.ct-sauce-icon {
    width: 54px;
    height: 54px;
    border-radius: 27px;
    background: #0054a4;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 6px;
}

.ct-sauce-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: #0054a4;
    margin: 0;
}

.ct-sauce-text {
    font-size: 15px;
    line-height: 24px;
    color: #3a4252;
    margin: 0;
}

.ct-sauce-text a {
    color: #0054a4;
    font-weight: 600;
    text-decoration: underline;
}

/* --- Mission CTA --- */
.footer-cta-area.ct-cta {
    padding-top: 100px;
}

.ct-cta .create-card {
    padding: 86px 72px;
}

.ct-cta .create-heading .accent {
    color: #16399e;
}

/* --- Catering responsive --- */
@media (max-width: 991.98px) {
    .ct-hero {
        padding: 130px 24px 60px;
    }

    .ct-hero-heading {
        font-size: 36px;
    }

    .ct-heading,
    .ct-heading--uc {
        font-size: 32px;
    }

    .ct-heading--uc {
        line-height: 1.05;
        letter-spacing: -1.5px;
    }

    .ct-hero-media,
    .ct-media,
    .ct-compare-media {
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .ct-badge {
        width: 88px;
        height: 88px;
        font-size: 11px;
    }

    .ct-col-media {
        order: -1;
    }

    .ct-intro-text {
        font-size: 22px;
        line-height: 34px;
    }
}

@media (max-width: 767.98px) {
    .ct-hero-heading {
        font-size: 30px;
    }

    .ct-intro,
    .ct-better,
    .ct-dishes,
    .ct-wholesale {
        padding: 56px 0;
    }

    .ct-sauces {
        padding: 56px 0;
    }

    .ct-heading,
    .ct-heading--uc {
        font-size: 26px;
    }

    .ct-intro-text {
        font-size: 20px;
        line-height: 31px;
    }

    .ct-numcard {
        padding: 28px;
    }

    .ct-hero-actions .cta-btn {
        width: 100%;
    }

    .footer-cta-area.ct-cta {
        padding-top: 60px;
    }

    .ct-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Meal Kits page ===
   ================================================================= */

.mk-heading .accent-blue-solid,
.mk-bcard-title .accent-blue-solid {
    color: #16399e;
}

/* --- Hero (navy) --- */
.mk-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
}

.mk-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.mk-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.mk-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mk-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.mk-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.mk-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.mk-breadcrumb a:hover {
    color: #fff;
}

.mk-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 20px;
}

.mk-hero-heading-sub {
    display: block;
}

.mk-hero-heading .accent {
    color: var(--c-yellow);
}

.mk-hero-lead {
    max-width: 620px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 26px;
}

.mk-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.mk-hero-media {
    position: relative;
    border-radius: 18px;
    overflow: visible;
    background: linear-gradient(152deg, #e9d49a 0%, #d8b15e 50%, #b98a36 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.mk-hero-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

.mk-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 108px;
    height: 108px;
    background: var(--c-yellow);
    color: var(--c-navy);
    border-radius: 54px;
    transform: rotate(-6deg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Shantell Sans', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 14.38px;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
    z-index: 2;
}

/* --- Shared --- */
.mk-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 40px;
}

.mk-heading--center {
    text-align: center;
}

.mk-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 16px;
}

.mk-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.mk-text:last-child {
    margin-bottom: 0;
}

/* --- Intro (cream) --- */
.mk-intro {
    background: #faf6ec;
    padding: 80px 0;
}

.mk-intro-lead {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 39.6px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin: 0;
}

.mk-intro-accent {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #16399e;
}

.mk-intro-body {
    font-size: 18px;
    line-height: 29.7px;
    color: #3a4252;
    margin: 0;
}

/* --- Benefits + Process (white) --- */
.mk-benefits {
    background: #fff;
    padding: 80px 0;
}

.mk-bcard {
    background: #FBFCFF;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 20px;
    padding: 45px;
    height: 100%;
}

.mk-bcard-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 14px;
}

/* --- Products (white) --- */
.mk-products {
    background: #fff;
    padding: 0 0 90px;
}

.mk-article {
    margin-bottom: 20px;
}

.mk-article:last-child {
    margin-bottom: 0;
}

.mk-prod-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -.3px;
    line-height: 1.05;
    color: var(--c-navy);
    margin-bottom: 13px;
}

.mk-blob {
    position: relative;
    max-width: 422px;
    margin: 0 auto;
}

.mk-blob img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    border-radius: 160px 173px 453px 479px;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.mk-num {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #0054a4;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
    padding: 10px 18px;
    border-radius: 10px;
    box-shadow: 0 8px 9px rgba(13, 44, 84, .22);
    z-index: 2;
}

/* --- Why Choose (blue) --- */
.mk-why {
    background: #0054a4;
    padding: 80px 0;
}

.mk-why-intro {
    max-width: 820px;
    margin: 0 auto 60px;
    text-align: center;
}

.mk-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--c-yellow);
    margin-bottom: 14px;
}

.mk-why-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    letter-spacing: -.5px;
    color: #fff;
    margin-bottom: 14px;
}

.mk-why-heading .accent-yellow-plain {
    color: var(--c-yellow);
}

.mk-why-lead {
    max-width: 720px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 30.6px;
    color: rgba(255, 255, 255, .85);
}

.mk-why-lead a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
}

.mk-stats {
    max-width: 900px;
    margin: 0 auto;
}

.mk-stat {
    border-top: 2px solid rgba(255, 210, 0, .5);
    padding-top: 30px;
    text-align: center;
}

.mk-stat-num {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 58px;
    line-height: 1;
    color: var(--c-yellow);
    margin-bottom: 10px;
}

.mk-stat-label {
    font-size: 15px;
    line-height: 22.5px;
    color: rgba(255, 255, 255, .82);
    margin: 0;
}

/* --- Mission CTA --- */
.footer-cta-area.mk-cta {
    padding-top: 141px;
}

.mk-cta .create-card {
    padding: 86px 72px;
}

.mk-cta .create-heading .accent {
    color: #16399e;
}

/* --- Meal Kits responsive --- */
@media (max-width: 991.98px) {
    .mk-hero {
        padding: 130px 24px 60px;
    }

    .mk-hero-heading {
        font-size: 36px;
    }

    .mk-heading,
    .mk-bcard-title,
    .mk-why-heading {
        font-size: 32px;
    }

    .mk-hero-media,
    .mk-blob {
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .mk-badge {
        width: 88px;
        height: 88px;
        font-size: 11px;
    }

    .mk-intro-lead {
        font-size: 26px;
        line-height: 35px;
    }

    .mk-col-media {
        order: -1;
    }

    .mk-blob {
        margin-bottom: 34px;
    }
}

@media (max-width: 767.98px) {
    .mk-hero-heading {
        font-size: 30px;
    }

    .mk-intro,
    .mk-benefits,
    .mk-why {
        padding: 56px 0;
    }

    .mk-products {
        padding: 0 0 56px;
    }

    .mk-heading,
    .mk-bcard-title,
    .mk-why-heading {
        font-size: 26px;
    }

    .mk-bcard {
        padding: 28px;
    }

    .mk-intro-lead {
        font-size: 22px;
        line-height: 31px;
    }

    .mk-article {
        margin-bottom: 40px;
    }

    .mk-hero-actions .cta-btn {
        width: 100%;
    }

    .footer-cta-area.mk-cta {
        padding-top: 60px;
    }

    .mk-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Retail page ===
   ================================================================= */

.rt-heading .accent-blue-solid {
    color: #16399e;
}

/* --- Hero (navy) --- */
.rt-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
}

.rt-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.rt-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.rt-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rt-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.rt-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.rt-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.rt-breadcrumb a:hover {
    color: #fff;
}

.rt-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 20px;
}

.rt-hero-heading-sub {
    display: block;
}

.rt-hero-heading .accent {
    color: var(--c-yellow);
}

.rt-hero-lead {
    max-width: 620px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 26px;
}

.rt-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.rt-hero-media {
    position: relative;
    border-radius: 18px;
    overflow: visible;
    background: linear-gradient(152deg, #e9d49a 0%, #d8b15e 50%, #b98a36 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.rt-hero-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

.rt-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 108px;
    height: 108px;
    background: var(--c-yellow);
    color: var(--c-navy);
    border-radius: 54px;
    transform: rotate(-6deg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Shantell Sans', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 14.38px;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
    z-index: 2;
}

/* --- Shared --- */
.rt-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.rt-heading--center {
    text-align: center;
}

.rt-heading--sm {
    font-size: 26px;
    letter-spacing: -.3px;
}

.rt-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 16px;
}

.rt-text:last-child {
    margin-bottom: 0;
}

.rt-lead {
    font-size: 18px;
    line-height: 29.16px;
    color: #3a4252;
    margin: 0;
}

/* --- Split sections --- */
.rt-split {
    padding: 80px 0;
}

.rt-split--white {
    background: #fff;
}

.rt-split--cream {
    background: #faf6ec;
}

.rt-split--tight {
    padding-top: 0;
}

.rt-media {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.rt-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.rt-media--blue {
    background: transparent;
}

/* --- Popular Flavors (cream) --- */
.rt-flavors {
    background: #faf6ec;
    padding: 80px 0;
}

.rt-flavors-intro {
    max-width: 880px;
    margin: 0 auto 40px;
    text-align: center;
}

.rt-flavors-card {
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 22px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
    padding: 45px;
    max-width: 1040px;
    margin: 0 auto;
}

.rt-flavors-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(12, 27, 61, .1);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.rt-flavors-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -.2px;
    color: var(--c-navy);
    margin: 0;
}

.rt-flavors-count {
    background: #faf6ec;
    color: #16399e;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: 50px;
}

.rt-flavor-cat {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #16399e;
    padding-bottom: 9px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(12, 27, 61, .12);
}

.rt-flavor-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rt-flavor-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
    color: var(--c-navy);
    padding: 10px 0;
    border-bottom: 1px solid rgba(12, 27, 61, .12);
}

.rt-flavor-list li:last-child {
    border-bottom: none;
}

.rt-flavor-dot {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #ffd200;
    color: #0c1b3d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}

/* --- Pairings (cream) --- */
.rt-pairings {
    background: #faf6ec;
    padding: 80px 0;
}

.rt-pairings-intro {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
}

.rt-pair-card {
    position: relative;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .1);
    border-radius: 16px;
    box-shadow: 0 16px 40px -28px rgba(12, 27, 61, .4);
    padding: 29px;
    height: 100%;
}

.rt-pair-tab {
    display: block;
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background: var(--c-yellow);
    margin-bottom: 13px;
}

.rt-pair-food {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.2px;
    color: var(--c-navy);
    margin-bottom: 6px;
}

.rt-pair-flavors {
    font-size: 15px;
    line-height: 23.25px;
    color: #3a4252;
    margin: 0;
}

/* --- Request a Sample (cream) --- */
.rt-sample {
    background: #faf6ec;
    padding: 80px 0;
}

.rt-sample .rt-heading {
    margin-bottom: 40px;
}

.rt-form-card {
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .1);
    border-radius: 20px;
    box-shadow: 0 22px 60px -34px rgba(12, 27, 61, .4);
    padding: 43px;
    max-width: 920px;
    margin: 0 auto;
}

.rt-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .3px;
    color: var(--c-navy);
    margin-bottom: 8px;
}

.rt-input {
    width: 100%;
    height: 50px;
    border: 1px solid #F6F8FD;
    border-radius: 10px;
    background: #F6F8FD;
    padding: 0 16px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--c-navy);
    transition: border-color .2s, box-shadow .2s;
}

.rt-input:focus {
    outline: none;
    border-color: #16399e;
    box-shadow: 0 0 0 3px rgba(22, 57, 158, .12);
}

.rt-textarea {
    height: auto;
    padding: 14px 16px;
    resize: vertical;
}

.rt-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
}

.rt-form-note {
    font-size: 14.5px;
    color: #6a7284;
    margin: 0;
}

/* --- More Custom Products list --- */
.rt-other-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    column-count: 2;
    column-gap: 36px;
}

.rt-other-list li {
    display: flex;
    align-items: center;
    gap: 13px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16.5px;
    color: #1a2033;
    padding: 8px 0;
    break-inside: avoid;
}

.rt-check {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background: #ffd200;
    color: #0c1b3d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

/* --- Mission CTA --- */
.footer-cta-area.rt-cta {
    padding-top: 100px;
}

.rt-cta .create-card {
    padding: 86px 72px;
}

.rt-cta .create-heading .accent {
    color: #0054a4;
}

.rt-cta .create-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* --- Retail responsive --- */
@media (max-width: 991.98px) {
    .rt-hero {
        padding: 130px 24px 60px;
    }

    .rt-hero-heading {
        font-size: 36px;
    }

    .rt-heading {
        font-size: 32px;
    }

    .rt-heading--sm {
        font-size: 24px;
    }

    .rt-hero-media,
    .rt-media {
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .rt-badge {
        width: 88px;
        height: 88px;
        font-size: 11px;
    }

    .rt-col-media {
        order: -1;
    }

    .rt-flavors-card,
    .rt-form-card {
        padding: 34px;
    }
}

@media (max-width: 767.98px) {
    .rt-hero-heading {
        font-size: 30px;
    }

    .rt-split,
    .rt-flavors,
    .rt-pairings,
    .rt-sample {
        padding: 56px 0;
    }

    .rt-heading {
        font-size: 26px;
    }

    .rt-flavors-card,
    .rt-form-card {
        padding: 26px;
    }

    .rt-other-list {
        column-count: 1;
    }

    .rt-hero-actions .cta-btn,
    .rt-form-actions .cta-btn {
        width: 100%;
    }

    .rt-form-note {
        text-align: center;
        width: 100%;
    }

    .footer-cta-area.rt-cta {
        padding-top: 60px;
    }

    .rt-cta .create-card {
        padding: 56px 28px;
    }

    .rt-cta .create-actions .cta-btn {
        width: 100%;
    }
}

/* =================================================================
   === Research, Development & Innovation page ===
   ================================================================= */

.rd-heading .accent-blue-solid {
    color: #16399e;
}

/* --- Hero (navy) --- */
.rd-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
}

.rd-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.rd-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.rd-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rd-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.rd-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.rd-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.rd-breadcrumb a:hover {
    color: #fff;
}

.rd-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 20px;
}

.rd-hero-heading .accent {
    color: var(--c-yellow);
}

.rd-hero-lead {
    max-width: 640px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 26px;
}

.rd-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.rd-hero-media {
    position: relative;
    border-radius: 18px;
    overflow: visible;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.rd-hero-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 578 / 389;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

.rd-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .6);
    z-index: 2;
}

.rd-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 112px;
    height: 112px;
    background: var(--c-yellow);
    color: var(--c-navy);
    border-radius: 56px;
    transform: rotate(-6deg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Shantell Sans', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 14.38px;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
    z-index: 3;
}

/* --- Shared --- */
.rd-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.rd-heading--center {
    text-align: center;
}

.rd-heading--light {
    color: #fff;
}

.rd-split .rd-heading,
.rd-nextlevel-head .rd-heading {
    font-size: 38px;
    line-height: 39.9px;
}

.rd-heading--light .accent-blue-solid {
    color: var(--c-yellow);
}

.rd-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 16px;
}

.rd-text:last-child {
    margin-bottom: 0;
}

.rd-text--lg {
    font-size: 26px;
    line-height: 35.16px;
    font-family: "Playfair Display", serif;
    color: #16399E
}

.rd-text--center {
    text-align: center;
}

.rd-intro .rd-text strong {
    text-decoration: underline
}

.rd-media {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.rd-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.rd-split {
    padding: 80px 0;
}

.rd-split--white {
    background: #fff;
}

.rd-split--cream {
    background: #faf6ec;
}

.rd-video {
    position: relative;
}

.rd-video .rd-play {
    box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .6);
}

/* --- Intro (white) --- */
.rd-intro {
    background: #fff;
    padding: 80px 0;
}

.rd-intro-inner {
    margin: 0 auto;
}

.rd-intro-inner .rd-heading {
    margin-bottom: 24px;
}

/* --- Checklist --- */
.rd-checklist {
    list-style: none;
    margin: 8px 0 20px;
    padding: 0;
}

.rd-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 16.5px;
    line-height: 23.93px;
    color: #1a2033;
    margin-bottom: 14px;
}

.rd-check {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background: #ffd200;
    color: #0c1b3d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin-top: 1px;
}

/* --- Collage --- */
.rd-collage {
    display: flex;
    gap: 20px;
    align-items: center;
}

.rd-collage .rd-media {
    box-shadow: 0 18px 40px -22px rgba(11, 28, 58, .5);
}

.rd-collage-main {
    flex: 0 0 48%;
}

.rd-collage-main img,
.rd-collage-tall img {
    height: 100%;
}

.rd-collage-tall {
    flex: 0 0 48%;
}

.rd-collage-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rd-collage-stack .rd-media {
    flex: 1;
}

/* --- Next Level (white) --- */
.rd-nextlevel {
    padding: 80px 0;
}

.rd-nextlevel-head {
    max-width: 900px;
    margin-bottom: 44px;
}

.rd-feature {
    margin-bottom: 21px;
}

.rd-feature-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 29.16px;
    letter-spacing: -.2px;
    color: var(--c-navy);
    margin-bottom: 6px;
}

.rd-feature-text {
    line-height: 24.8px;
}

.rd-feature-text {
    font-size: 16px;
    line-height: 25px;
    color: #3a4252;
    margin: 0;
}

.rd-nextlevel-cta {
    margin-top: 28px;
}

.rd-dev-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #16399E;
    margin-bottom: 10px;
    text-transform: uppercase
}

.rd-dev-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rd-dev-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--c-navy);
    padding: 13px 2px;
    border-bottom: 1px solid rgba(12, 27, 61, .12);
}

.rd-dev-list li:last-child {
    border-bottom: none;
}

.rd-dev-check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: #ffd200;
    color: #0c1b3d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

/* --- Process (navy timeline) --- */
.rd-process {
    background: #0054A4;
    padding: 80px 0;
    position: relative;
    z-index: 1
}

.rd-process .shape_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -1
}

.rd-process-head {
    max-width: 880px;
    margin: 0 auto 50px;
    text-align: center;
}

.rd-process-lead {
    font-size: 16.5px;
    line-height: 26px;
    color: rgba(255, 255, 255, .78);
    margin: 0;
}

.rd-timeline {
    position: relative;
    margin-bottom: 50px;
}

.rd-timeline::before {
    content: "";
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, .22);
    z-index: 0;
}

.rd-step {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 4px;
}

.rd-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 16px;
    margin-bottom: 16px;
}

.rd-step-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    line-height: 16.8px;
    letter-spacing: -.3px;
    color: #fff;
    margin-bottom: 10px;
}

.rd-step-text {
    font-size: 13.5px;
    line-height: 20.93px;
    color: rgba(255, 255, 255, .78);
    margin: 0;
}

.rd-process-foot {
    text-align: center;
}

.rd-process-foot-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: #fff;
    margin-bottom: 10px;
}

.rd-process-foot-text {
    font-size: 17px;
    color: rgba(255, 255, 255, .82);
    margin-bottom: 22px;
}

/* --- Why Work blocks --- */
.rd-ww-blocks {
    margin-top: 8px;
}

.rd-ww-block {
    margin-bottom: 26px;
}

.rd-ww-block:last-child {
    margin-bottom: 0;
}

.rd-ww-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 8px;
}

.rd-ww-accent {
    color: #16399e;
}

.rd-ww-text {
    font-size: 16px;
    line-height: 25.6px;
    color: #3a4252;
    margin: 0;
}

/* --- Testimonials (white) --- */
.rd-testimonials {
    background: #fff;
    padding: 80px 0;
}

.rd-tst-head {
    text-align: center;
    margin-bottom: 44px;
}

.rd-tst-head .rd-heading {
    margin-bottom: 22px;
}

.rd-quote-card {
    display: flex;
    gap: 0;
    background: #0054a4;
    border-radius: 18px;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .35);
    overflow: hidden;
    margin: 0 0 50px;
}

.rd-quote-body {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
}

.rd-stars {
    color: var(--c-yellow);
    font-size: 24px;
    letter-spacing: 3px;
    margin-bottom: 22px;
}

.rd-quote-text p {
    font-weight: 700;
    font-size: 28px;
    line-height: 39.2px;
    color: #fff;
    margin: 0 0 30px;
}

.rd-quote-author {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    padding-top: 24px;
    margin-top: auto;
}

.rd-quote-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: .2px;
    color: #fff;
}

.rd-quote-role {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--c-yellow);
}

.rd-quote-media {
    flex: 0 0 396px;
    position: relative;
    overflow: hidden;
}

.rd-quote-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(143deg, rgba(42, 58, 94, .35) 0%, rgba(12, 27, 61, .55) 100%);
}

.rd-quote-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Stat scroller --- */
.rd-stat-scroller {
    padding: 6px 2px 20px;
}

.rd-stat-card {
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    box-shadow: 0 16px 40px -28px rgba(12, 27, 61, .4);
    overflow: hidden;
}

.rd-stat-media img {
    width: 100%;
    height: 262px;
    object-fit: cover;
    display: block;
}

.rd-stat-body {
    padding: 24px;
}

.rd-stat-num {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 32px;
    letter-spacing: -.5px;
    color: #16399e;
    margin-bottom: 8px;
}

.rd-stat-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 21px;
    color: var(--c-navy);
    margin-bottom: 12px;
}

.rd-stat-text {
    font-size: 15px;
    line-height: 23.5px;
    color: #3a4252;
    margin: 0;
}

.rd-tst-foot {
    text-align: center;
    margin-top: 34px;
}

/* --- More Resources (cream) --- */
.rd-resources {
    background: #faf6ec;
    padding: 80px 0;
}

.rd-res-head {
    text-align: center;
    margin-bottom: 44px;
}

.rd-res-head .rd-heading {
    margin-bottom: 22px;
}

.rd-blog-card {
    display: block;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .1);
    border-radius: 18px;
    overflow: hidden;
    height: 100%;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}

.rd-blog-card:hover {
    transform: translateY(-4px);
}

.rd-blog-media img {
    width: 100%;
    object-fit: cover;
    display: block;
}

.rd-blog-body {
    padding: 24px;
}

.rd-blog-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 19px;
    line-height: 1.25;
    color: var(--c-navy);
    margin-bottom: 12px;
}

.rd-blog-excerpt {
    font-size: 15px;
    line-height: 23px;
    color: #3a4252;
    margin-bottom: 14px;
}

.rd-blog-more {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #16399e;
}

/* --- Awards (on blue CTA section) --- */
.rd-awards-wrap {
    max-width: 1240px;
    margin: 0 auto 60px;
    padding: 0 12px;
}

.rd-awards-head {
    text-align: center;
    margin-bottom: 40px;
}

.rd-awards-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 46px;
    letter-spacing: -.5px;
    color: #fff;
    margin-bottom: 13px;
}

.rd-awards-accent {
    color: var(--c-yellow);
}

.rd-awards-sub {
    max-width: 560px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 28.8px;
    color: rgba(255, 255, 255, .82);
}

.rd-awards-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.rd-award {
    flex: 1 1 0;
    min-width: 150px;
    max-width: 200px;
    height: 150px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 16px 34px -22px rgba(0, 0, 0, .55);
    padding: 20px 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rd-award img {
    max-width: 150px;
    max-height: 110px;
    height: auto;
    display: block;
}

.rd-award-sep {
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    background: var(--c-yellow);
    transform: rotate(45deg);
    border-radius: 4px;
}

/* --- Mission CTA --- */
.footer-cta-area.rd-cta {
    padding-top: 100px;
}

.rd-cta .create-card {
    padding: 86px 72px;
}

.rd-cta .create-heading .accent {
    color: #16399e;
}

/* --- R&D responsive --- */
@media (max-width: 991.98px) {
    .rd-hero {
        padding: 130px 24px 60px;
    }

    .rd-hero-heading {
        font-size: 36px;
    }

    .rd-heading {
        font-size: 32px;
    }

    .rd-hero-media,
    .rd-media {
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .rd-badge {
        width: 92px;
        height: 92px;
        font-size: 11px;
    }

    .rd-col-media {
        order: -1;
        margin-bottom: 24px;
    }

    .rd-timeline::before {
        display: none;
    }

    .rd-step {
        text-align: left;
        display: flex;
        flex-direction: column;
        margin-bottom: 8px;
    }

    .rd-quote-card {
        flex-direction: column;
    }

    .rd-quote-media {
        flex: 0 0 auto;
        order: -1;
        height: 320px;
    }

    .rd-quote-body {
        padding: 34px;
    }
}

@media (max-width: 767.98px) {
    .rd-hero-heading {
        font-size: 30px;
    }

    .rd-intro,
    .rd-split,
    .rd-nextlevel,
    .rd-process,
    .rd-testimonials,
    .rd-resources {
        padding: 56px 0;
    }

    .rd-awards-wrap {
        margin-bottom: 40px;
    }

    .rd-awards-heading {
        font-size: 30px;
    }

    .rd-award {
        height: 120px;
        min-width: 120px;
    }

    .rd-award-sep {
        display: none;
    }

    .rd-heading {
        font-size: 26px;
    }

    .rd-collage,
    .rd-collage--alt {
        flex-direction: column;
    }

    .rd-collage-main,
    .rd-collage-tall {
        flex: 1;
    }

    .rd-collage-stack {
        flex-direction: row;
    }

    .rd-quote-body {
        padding: 26px;
    }

    .rd-stat-card {
        flex: 0 0 300px;
    }

    .rd-hero-actions .cta-btn {
        width: 100%;
    }

    .footer-cta-area.rd-cta {
        padding-top: 60px;
    }

    .rd-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Co-Manufacturing & Co-Packing page ===
   ================================================================= */

.cm-heading .accent-blue-solid {
    color: #16399e;
}

/* --- Hero (navy) --- */
.cm-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
}

.cm-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.cm-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.cm-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cm-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.cm-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.cm-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.cm-breadcrumb a:hover {
    color: #fff;
}

.cm-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 20px;
}

.cm-hero-heading .accent {
    color: var(--c-yellow);
}

.cm-hero-lead {
    max-width: 600px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 26px;
}

.cm-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.cm-hero-media {
    position: relative;
    border-radius: 18px;
    overflow: visible;
    background: linear-gradient(152deg, #e9d49a 0%, #d8b15e 50%, #b98a36 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.cm-hero-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 578 / 380;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

.cm-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 112px;
    height: 112px;
    background: var(--c-yellow);
    color: var(--c-navy);
    border-radius: 56px;
    transform: rotate(-6deg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Shantell Sans', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 13.8px;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
    z-index: 3;
}

/* --- Shared --- */
.cm-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 14px;
}

.cm-heading--center {
    text-align: center;
}

.cm-heading--light {
    color: #fff;
}

.cm-heading--light .accent-yellow-plain {
    color: var(--c-yellow);
}

.cm-accent-italic {
    color: #16399e;
}

.cm-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 16px;
}

.cm-text--center {
    text-align: center;
}

/* --- Intro + Contact (cream) --- */
.cm-intro {
    background: #faf6ec;
    padding: 80px 0;
}

.cm-intro-head {
    max-width: 1050px;
    margin: 0 auto 56px;
    text-align: center;
}

.cm-bar {
    display: block;
    width: 46px;
    height: 3px;
    border-radius: 3px;
    background: var(--c-yellow);
    margin: 0 auto 25px;
}

.cm-intro-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 27px;
    line-height: 40.5px;
    color: var(--c-navy);
    margin: 0;
}

.cm-contact-row {
    align-items: flex-start;
}

.cm-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .4px;
    color: #16399e;
    margin-bottom: 10px;
}

.cm-contact-list {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.cm-contact-list li {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15.5px;
    color: var(--c-navy);
}

.cm-contact-list a {
    color: var(--c-navy);
}

.cm-contact-list a:hover {
    color: #16399e;
    text-decoration: underline
}

.cm-contact-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.cm-form-card {
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 22px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
    padding: 43px;
}

/* Form beside a video: copy and video share the column next to the form. */
.fm-video-lead {
    font-weight: 600;
    color: var(--c-navy);
}

.fm-video-media {
    margin-top: 28px;
}

.fm-video-media > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}

.cm-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #3a4252;
    margin-bottom: 7px;
}

.cm-input {
    width: 100%;
    height: 50px;
    border: 1px solid #F6F8FD;
    border-radius: 12px;
    background: #F6F8FD;
    padding: 0 16px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--c-navy);
    transition: border-color .2s, box-shadow .2s;
}

.cm-input:focus {
    outline: none;
    border-color: #16399e;
    box-shadow: 0 0 0 3px rgba(22, 57, 158, .12);
}

.cm-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c1b3d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
    padding-right: 44px;
}

.cm-textarea {
    height: auto;
    min-height: 110px;
    padding: 14px 16px;
    resize: vertical;
}

.cm-submit {
    width: 100%;
    justify-content: center;
    margin-top: 21px;
}

.cm-form-note {
    text-align: center;
    font-size: 13px;
    line-height: 21px;
    color: #3a4252;
    margin: 16px 0 0;
}

/* --- Services (white) --- */
.cm-services {
    background: #fff;
    padding: 80px 0;
}

.cm-services-sub {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin: 25px 0 22px;
}

.cm-services-list {
    list-style: none;
    margin: 0;
    padding: 0;
    column-count: 2;
    column-gap: 40px;
}

.cm-service {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
    break-inside: avoid;
}

.cm-service-check {
    flex-shrink: 0;
    width: 27px;
    height: 27px;
    border-radius: 13.5px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-top: 1px;
}

.cm-service-text {
    font-size: 16.5px;
    line-height: 25.58px;
    color: #1a2033;
}

.cm-service-text a {
    color: #0054a4;
    font-weight: 700;
    text-decoration: underline;
}

.cm-service-text a:hover {
    text-decoration: none
}

/* --- Put Our Team To Work (blue) --- */
.cm-team {
    background: #0054a4;
    padding: 80px 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.cta-shape-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -1
}

.cm-team-inner {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.cm-team-text {
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin: 0 0 26px;
}

/* --- Three Pillars (white) --- */
.cm-pillars {
    background: #fff;
    padding: 80px 0;
}

.cm-pillar-row {
    margin-bottom: 70px;
}

.cm-pillar-row:last-child {
    margin-bottom: 0;
}

.cm-pillar-media {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
    padding: 20px;
}

.cm-pillar-media--white {
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
}

.cm-pillar-media--cream {
    background: #faf6ec;
    padding: 0;
}

.cm-pillar-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.cm-pillar-media--cream img {
    border-radius: 18px;
}

.cm-pillar-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 14px;
}

.cm-pillar-body {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin: 0;
}

/* --- Certifications (cream) --- */

.cm-certs-head {
    max-width: 744px;
    margin: 0 auto 48px;
    text-align: center;
}

.cm-certs-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}

.cm-cert {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11.5px;
    width: 140px;
    margin: 0;
    text-align: center;
}

.cm-cert-badge {
    width: 108px;
    height: 108px;
    border-radius: 54px;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cm-cert-badge img {
    width: 86px;
    height: 86px;
    object-fit: contain;
}

.cm-cert-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .4px;
    color: var(--c-navy);
}

/* --- Mission CTA --- */
.footer-cta-area.cm-cta {
    padding-top: 100px;
}

.cm-cta .create-card {
    padding: 86px 72px;
}

.cm-cta .create-heading .accent {
    color: #0054a4;
}

.cm-cta .create-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* --- CoMfg responsive --- */
@media (max-width: 991.98px) {
    .cm-hero {
        padding: 130px 24px 60px;
    }

    .cm-hero-heading {
        font-size: 36px;
    }

    .cm-heading {
        font-size: 32px;
    }

    .cm-hero-media {
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .cm-badge {
        width: 92px;
        height: 92px;
        font-size: 11px;
    }

    .cm-intro-text {
        font-size: 22px;
        line-height: 34px;
    }

    .cm-form-card {
        margin-top: 12px;
    }

    .cm-pillar-media {
        margin-right: 14px;
        margin-bottom: 34px;
    }

    .cm-pillar-media-col {
        order: -1;
    }

    .cm-pillar-row {
        margin-bottom: 50px;
    }
}

@media (max-width: 767.98px) {
    .cm-hero-heading {
        font-size: 30px;
    }

    .cm-intro,
    .cm-services,
    .cm-team,
    .cm-pillars,
    .cm-certs {
        padding: 56px 0;
    }

    .cm-heading {
        font-size: 26px;
    }

    .cm-intro-text {
        font-size: 20px;
        line-height: 31px;
    }

    .cm-services-list {
        column-count: 1;
    }

    .cm-form-card {
        padding: 28px;
    }

    .cm-hero-actions .cta-btn {
        width: 100%;
    }

    .footer-cta-area.cm-cta {
        padding-top: 60px;
    }

    .cm-cta .create-card {
        padding: 56px 28px;
    }

    .cm-cta .create-actions .cta-btn {
        width: 100%;
    }
}

/* =================================================================
   === What We Make page ===
   ================================================================= */

.wm-heading .accent-blue-solid {
    color: #16399e;
}

.wm-heading .accent-blue-plain {
    color: #0054a4;
}

/* --- Hero (navy) --- */
.wm-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
}

.wm-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.wm-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.wm-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wm-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.wm-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.wm-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.wm-breadcrumb a:hover {
    color: #fff;
}

.wm-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 46px;
    line-height: 1.05;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 26px;
    max-width: 700px;
}

.wm-hero-heading .accent {
    color: var(--c-yellow);
}

.wm-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.wm-hero-media {
    position: relative;
    border-radius: 18px;
    overflow: visible;
    background: linear-gradient(152deg, #e9d49a 0%, #d8b15e 50%, #b98a36 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.wm-hero-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 553 / 380;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

.wm-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 114px;
    height: 114px;
    background: var(--c-yellow);
    color: var(--c-navy);
    border-radius: 57px;
    transform: rotate(-6deg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Shantell Sans', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 13.8px;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
    z-index: 3;
}

/* --- Shared --- */
.wm-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 14px;
}

.wm-text {
    font-size: 16.5px;
    line-height: 28px;
    color: #3a4252;
    margin-bottom: 16px;
}

.wm-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

/* --- Intro (cream) --- */

.wm-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: .4px;
    color: #16399e;
    margin-bottom: 14px;
}

.wm-lead {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 25px;
    line-height: 37.5px;
    color: var(--c-navy);
    margin: 0;
}

.wm-stats {
    display: flex;
    flex-wrap: nowrap;
    gap: 44px;
    border-top: 1px solid rgba(12, 27, 61, .12);
    padding-top: 27px;
    margin-top: 28px;
}

.wm-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wm-stat-num {
    font-size: 32px;
    line-height: 1;
    color: #16399e;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif
}

.wm-stat-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #3a4252;
    line-height: normal
}

/* --- Product Categories (white) --- */
.wm-cats {
    background: #fff;
    padding: 80px 0;
}

.wm-cat-card {
    position: relative;
    display: block;
    aspect-ratio: 396 / 272;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
    text-decoration: none;
}

.wm-cat-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wm-cat-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(8, 18, 42, .35) 0%, rgba(8, 18, 42, 0) 42%);
}

.wm-cat-label {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 50px;
    padding: 13px 13px 13px 22px;
    box-shadow: 0 12px 26px -12px rgba(8, 18, 42, .5);
}

.wm-cat-title {
    flex: 1;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    line-height: 20px;
    color: var(--c-navy);
    margin: 0
}

.wm-cat-arrow {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 19px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: transform .2s;
}

.wm-cat-card:hover .wm-cat-arrow {
    transform: translateX(3px);
}

/* --- Our Brands (cream) --- */


.wm-brands-head {
    max-width: 880px;
    margin-bottom: 52px;
}

.wm-brand-card {
    min-height: 280px;
    height: 100%;
    background: #0054a4;
    border-radius: 22px;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .35);
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 18px;
    text-decoration: none;
    overflow: hidden;
    position: relative;
}

.wm-brand-logo {
    width: 128px;
    height: 128px;
    border-radius: 64px;
    background: #fff;
    box-shadow: 0 8px 12px rgba(0, 0, 0, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.wm-brand-logo img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.wm-brand-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 1.1;
    color: #fff;
}

.wm-brand-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--c-yellow);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wm-brand-card:hover .wm-brand-link {
    gap: 12px;
}

/* --- Mission CTA --- */
.footer-cta-area.wm-cta {
    padding-top: 100px;
}

.wm-cta .create-card {
    padding: 86px 72px;
}

.wm-cta .create-heading .accent {
    color: #0054a4;
}

.wm-cta .create-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* --- WhatWeMake responsive --- */
@media (max-width: 991.98px) {
    .wm-hero {
        padding: 130px 24px 60px;
    }

    .wm-hero-heading {
        font-size: 34px;
    }

    .wm-heading {
        font-size: 32px;
    }

    .wm-hero-media {
        margin-right: 14px;
        margin-bottom: 14px;
        margin-top: 20px;
    }

    .wm-badge {
        width: 94px;
        height: 94px;
        font-size: 11px;
    }

    .wm-lead {
        font-size: 22px;
        line-height: 33px;
        margin-bottom: 24px;
    }

}

@media (max-width: 767.98px) {
    .wm-hero-heading {
        font-size: 28px;
    }

    .wm-intro,
    .wm-cats,
    .wm-brands {
        padding: 56px 0;
    }

    .wm-heading {
        font-size: 26px;
    }

    .wm-lead {
        font-size: 20px;
        line-height: 30px;
    }

    .wm-stats {
        gap: 28px;
    }

    .wm-hero-actions .cta-btn {
        width: 100%;
    }

    .footer-cta-area.wm-cta {
        padding-top: 60px;
    }

    .wm-cta .create-card {
        padding: 56px 28px;
    }

    .wm-cta .create-actions .cta-btn {
        width: 100%;
    }
}

/* =================================================================
   === Create a Custom Butter page ===
   ================================================================= */

.cb-heading .accent-blue-solid,
.cb-subheading .accent-blue-solid {
    color: #16399e;
}

/* --- Hero (navy) --- */
.cb-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
}

.cb-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.cb-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.cb-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cb-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.cb-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.cb-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.cb-breadcrumb a:hover {
    color: #fff;
}

.cb-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 20px;
}

.cb-hero-heading .accent {
    color: var(--c-yellow);
}

.cb-hero-lead {
    max-width: 620px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 26px;
}

.cb-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.cb-hero-media {
    position: relative;
    border-radius: 18px;
    overflow: visible;
    background: linear-gradient(152deg, #e9d49a 0%, #d8b15e 50%, #b98a36 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.cb-hero-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 578 / 380;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

.cb-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 112px;
    height: 112px;
    background: var(--c-yellow);
    color: var(--c-navy);
    border-radius: 56px;
    transform: rotate(-6deg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Shantell Sans', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 13.8px;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
    z-index: 3;
}

/* --- Shared --- */
.cb-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 14px;
}

.cb-heading--center {
    text-align: center;
}

.cb-heading--sm {
    font-size: 30px;
    margin-top: 40px;
}

.cb-subheading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 30px;
}

.cb-text {
    font-size: 16.5px;
    line-height: 27px;
    color: #3a4252;
    margin-bottom: 16px;
}

.cb-text--center {
    text-align: center;
}

/* --- Intro (white) --- */
.cb-intro {
    background: #FAF6EC;
    padding: 80px 0;
}

.cb-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: .4px;
    color: #16399e;
    margin-bottom: 14px;
}

.cb-lead {
    font-family: 'Playfair Display', serif;
    font-size: 25px;
    line-height: 37.5px;
    color: var(--c-navy);
    margin: 0;
}

.cb-lead a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.cb-stats {
    border-top: 1px solid rgba(12, 27, 61, .12);
    padding-top: 27px;
    margin-top: 12px;
}

.cb-stat-num {
    display: block;
    font-size: 36px;
    line-height: 1;
    color: #16399e;
    margin-bottom: 6px;
}

.cb-stat-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #3a4252;
    line-height: 1.4;
}

/* --- Request Form (cream) --- */
.cb-request {
    background: #fff;
    padding: 80px 0;
    position: relative
}

.cb-request-border {
    position: absolute;
    content: "";
    width: 40px;
    height: 2px;
    background: rgba(0, 30, 59, 0.32);
    bottom: 0;
    left: 50%;
    transform: translateY(-50%);
	display:none
}

.cb-request-head {
    max-width: 640px;
    margin: 0 auto 40px;
    text-align: center;
}

.cb-form-card {
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .1);
    border-radius: 22px;
    box-shadow: 0 22px 60px -34px rgba(12, 27, 61, .4);
    padding: 45px;
}

.cb-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .3px;
    color: var(--c-navy);
    margin-bottom: 8px;
}

.cb-input {
    width: 100%;
    height: 47px;
    border: 1px solid #F6F8FD;
    border-radius: 11px;
    background: #F6F8FD;
    padding: 0 16px;
    font-family: 'Inter', sans-serif;
    font-size: 15.5px;
    color: var(--c-navy);
    transition: border-color .2s, box-shadow .2s;
}

.cb-input:focus {
    outline: none;
    border-color: #16399e;
    box-shadow: 0 0 0 3px rgba(22, 57, 158, .12);
}

.cb-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c1b3d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
    padding-right: 44px;
    color: #1a2033;
}

.cb-textarea {
    height: auto;
    min-height: 130px;
    padding: 14px 16px;
    resize: vertical;
}

.cb-submit {
    margin-top: 24px;
}

.cb-form-note {
    font-size: 13px;
    line-height: 21px;
    color: #3a4252;
    margin: 16px 0 0;
}

.cb-form-note a {
    color: #16399e;
    text-decoration: underline;
}

/* --- Shapes (white) --- */
.cb-shapes {
    background: #fff;
    padding: 80px 0;
}

.cb-shapes-head {
    max-width: 920px;
    margin: 0 auto 40px;
    text-align: center;
}

.cb-shapes-head .cb-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.cb-shape-card {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .1);
    border-radius: 18px;
    box-shadow: 0 16px 40px -28px rgba(12, 27, 61, .4);
    overflow: hidden;
}

.cb-shape-media {
    background: #faf6ec;
}

.cb-shape-media img {
    width: 100%;
    height: 294px;
    object-fit: cover;
    display: block;
}

.cb-shape-body {
    padding: 28px;
}

.cb-shape-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: var(--c-navy);
    margin-bottom: 12px;
}

.cb-shape-text {
    font-size: 15.5px;
    line-height: 25.58px;
    color: #3a4252;
    margin: 0;
}

.cb-shape-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.cb-shapes-foot {
    font-size: 16.5px;
    line-height: 27px;
    color: #3a4252;
    margin: 34px 0 0;
}

/* --- Flavors (cream) --- */


.cb-flavors-head {
    max-width: 880px;
    margin-bottom: 40px;
}

.cb-flavors-head .cb-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.cb-flavors-head .cb-text a:hover,
.cb-shapes-head .cb-text a:hover {
    text-decoration: none
}

.cb-flavor {
    height: 100%;
    border-bottom: 1px solid rgba(12, 27, 61, .12);
    padding: 16px 0 17px;
    position: relative;
    padding-left: 30px
}

.cb-flavor-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 8px;
}

.cb-flavor-check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-size: 9px;
    position: absolute;
    left: 0;
    top: 15px
}

.cb-flavor-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: var(--c-navy);
    margin: 0;
}

.cb-flavor-text {
    font-size: 14px;
    line-height: 21.7px;
    color: #3a4252;
    margin: 0;
}

/* --- Logos (white) --- */
.cb-logos {
    background: #fff;
    padding: 80px 0;
}

.cb-logos-media {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.cb-logos-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- More Customization (cream) --- */


.cb-morecust-head {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.cb-morecust-head .cb-text {
    max-width: 504px;
    margin-left: auto;
    margin-right: auto;
}

.cb-morecust .row {
    --bs-gutter-x: 28px;
    --bs-gutter-y: 28px;
}

.cb-num-card {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
    padding: 39px;
}

.cb-num {
    display: block;
    font-family: 'Baloo 2', 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -1.36px;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(12, 27, 61, .5);
    opacity: .69;
    margin-bottom: 22px;
}

@supports not (-webkit-text-stroke: 1px black) {
    .cb-num {
        color: rgba(12, 27, 61, .35);
    }
}

.cb-num-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 12px;
}

.cb-num-text {
    font-size: 15.5px;
    line-height: 24.8px;
    color: #3a4252;
    margin: 0;
}

.cb-num-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.cb-num-text a:hover {
    text-decoration: none
}

/* --- Why Settle + Difference (white) --- */
.cb-why {
    background: #fff;
    padding: 80px 0;
}

.cb-diff-band {
    background: #0054a4;
    border-radius: 26px;
    padding: 64px 40px 250px;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 9
}

.cb-diff-shape-one {
    position: absolute;
    right: 0;
    top: 0;
    z-index: -9
}

.cb-diff-shape-two {
    position: absolute;
    left: 5%;
    top: 40%;
    z-index: -9
}

.cb-diff-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    letter-spacing: -.5px;
    color: #fff;
    margin-bottom: 13px;
}

.cb-diff-accent {
    color: var(--c-yellow);
}

.cb-diff-text {
    max-width: 760px;
    margin: 0 auto;
    font-size: 18.5px;
    line-height: 31.45px;
    color: rgba(255, 255, 255, .82);
}

.cb-video {
    position: relative;
    max-width: 849px;
    margin: -200px auto 50px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .5);
    display: block;
    z-index: 11
}

.cb-video img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.cb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .6);
}

.cb-why-body {
    max-width: 880px;
    margin: 0 auto;
}

.cb-check-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}

.cb-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 16.5px;
    line-height: 25px;
    color: #3a4252;
    margin-bottom: 15px;
}

.cb-check-list strong {
    color: var(--c-navy);
}

.cb-check {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin-top: 1px;
}

.cb-industries .cb-industry {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    height: 100%;
}

.cb-industries .cb-industry p {
    font-size: 16px;
    line-height: 24px;
    color: #3a4252;
    margin: 0;
}

.cb-industries .cb-industry strong {
    color: var(--c-navy);
}

/* --- Mission CTA --- */
.footer-cta-area.cb-cta {
    padding-top: 100px;
}

.cb-cta .create-card {
    padding: 86px 72px;
}

.cb-cta .create-heading .accent {
    color: #0054a4;
}

.cb-cta .create-actions {
    display: flex;
    justify-content: center;
}

/* --- CB responsive --- */
@media (max-width: 991.98px) {
    .cb-hero {
        padding: 130px 24px 60px;
    }

    .cb-hero-heading {
        font-size: 36px;
    }

    .cb-heading {
        font-size: 32px;
    }

    .cb-heading--sm {
        font-size: 26px;
    }

    .cb-hero-media {
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .cb-badge {
        width: 92px;
        height: 92px;
        font-size: 11px;
    }

    .cb-logos-media {
        margin-right: 14px;
        margin-bottom: 24px;
    }

    .cb-logos .col-lg-6:first-child {
        order: -1;
    }
}

@media (max-width: 767.98px) {
    .cb-hero-heading {
        font-size: 30px;
    }

    .cb-intro,
.cb-request,
.cb-shapes,
.cb-flavors,
.cb-logos,
.cb-morecust,
.cb-why{
        padding: 56px 0;
    }

    .cb-heading {
        font-size: 26px;
    }

    .cb-form-card {
        padding: 28px;
    }

    .cb-diff-band {
        padding: 44px 24px 100px;
    }

    .cb-diff-heading {
        font-size: 30px;
    }

    .cb-hero-actions .cta-btn {
        width: 100%;
    }

    .footer-cta-area.cb-cta {
        padding-top: 60px;
    }

    .cb-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Butter Tubs page ===
   ================================================================= */

.bt-heading .accent-blue-solid {
    color: #16399e;
}

.bt-accent-blue-italic {
    color: #16399e;
}

.bt-accent-yellow-italic {
    color: var(--c-yellow);
}

/* --- Hero (navy) --- */
.bt-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
}

.bt-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.bt-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.bt-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bt-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.bt-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.bt-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.bt-breadcrumb a:hover {
    color: #fff;
}

.bt-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 20px;
}

.bt-hero-heading .accent {
    font-weight: 900;
    color: var(--c-yellow);
}

.bt-hero-lead {
    max-width: 620px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 26px;
}

.bt-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.bt-hero-media {
    position: relative;
    border-radius: 18px;
    overflow: visible;
    background: linear-gradient(152deg, #e9d49a 0%, #d8b15e 50%, #b98a36 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.bt-hero-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 578 / 380;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

/* --- Shared --- */
.bt-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 14px;
}

.bt-heading--center {
    text-align: center;
}

.bt-heading--light {
    color: #fff;
}

.bt-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 16px;
}

.bt-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.bt-text a:hover {
    text-decoration: none
}

/* --- Intro (cream) --- */
.bt-intro {
    background: #faf6ec;
    padding: 80px 0;
}

.bt-lead {
    font-family: 'Playfair Display', serif;
    font-size: 25px;
    line-height: 37.5px;
    color: var(--c-navy);
    margin: 0;
}

.bt-stats {
    border-top: 1px solid rgba(12, 27, 61, .12);
    padding-top: 27px;
    margin-top: 28px;
}

.bt-stat-num {
    display: block;
    font-size: 30px;
    line-height: 1.1;
    color: #16399e;
    margin-bottom: 4px;
}

.bt-stat-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #3a4252;
}

/* --- Why Bulk Butter (white) --- */
.bt-why {
    background: #fff;
    padding: 80px 0;
}

.bt-why-top {
    margin-bottom: 44px;
}

.bt-why-media {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.bt-why-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.bt-why-card {
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 16px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
    padding: 29px;
}

.bt-why-check {
    flex-shrink: 0;
    width: 27px;
    height: 27px;
    border-radius: 13.5px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-top: 1px;
}

.bt-why-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: var(--c-navy);
    margin-bottom: 5px;
}

.bt-why-text {
    font-size: 15.5px;
    line-height: 24.8px;
    color: #3a4252;
    margin: 0;
}

/* --- Who Orders (blue) --- */
.bt-who {
    background: #0054a4;
    padding: 80px 0;
}

.bt-who-head {
    max-width: 880px;
    margin-bottom: 48px;
}

.bt-who-intro {
    max-width: 760px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin: 0;
}

.bt-who-card {
    height: 100%;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    padding: 30px;
}

.bt-who-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-size: 20px;
    margin-bottom: 22px;
}

.bt-who-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.3px;
    color: #fff;
    margin-bottom: 10px;
}

.bt-who-text {
    font-size: 15px;
    line-height: 24px;
    color: rgba(255, 255, 255, .72);
    margin: 0;
}

/* --- Flavored + Quality (white) --- */
.bt-fq {
    background: #fff;
    padding: 80px 0;
}

.bt-fq-card {
    height: 100%;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 24px;
    padding: 49px;
}

.bt-fq-card--cream {
    background: #fff8e3;
}

.bt-fq-card--white {
    background: #fff;
    position: relative;
    overflow: hidden;
    z-index: 9
}

.bt-fq-shape {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -9
}

.bt-qstats {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 26px;
}

.bt-qstat-num {
    display: block;
    font-size: 30px;
    line-height: 1;
    color: #16399e;
    margin-bottom: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
}

.bt-qstat-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #3a4252;
}

/* --- Mission CTA --- */
.footer-cta-area.bt-cta {
    padding-top: 100px;
}

.bt-cta .create-card {
    padding: 86px 72px;
}

.bt-cta .create-heading .accent {
    color: #0054a4;
}

.bt-cta .create-actions {
    display: flex;
    justify-content: center;
}

/* --- BT responsive --- */
@media (max-width: 991.98px) {
    .bt-hero {
        padding: 130px 24px 60px;
    }

    .bt-hero-heading {
        font-size: 40px;
    }

    .bt-heading {
        font-size: 32px;
    }

    .bt-hero-media,
    .bt-why-media {
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .bt-lead {
        font-size: 22px;
        line-height: 33px;
    }

    .bt-fq-card {
        padding: 36px;
    }
}

@media (max-width: 767.98px) {
    .bt-hero-heading {
        font-size: 32px;
    }

    .bt-intro,
.bt-why,
.bt-who,
.bt-fq{
        padding: 56px 0;
    }

    .bt-heading {
        font-size: 26px;
    }

    .bt-lead {
        font-size: 20px;
        line-height: 30px;
    }

    .bt-fq-card {
        padding: 28px;
    }

    .bt-hero-actions .cta-btn {
        width: 100%;
    }

    .footer-cta-area.bt-cta {
        padding-top: 60px;
    }

    .bt-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Custom Logo Butter page ===
   ================================================================= */

.cl-heading .accent-blue-solid {
    color: #16399e;
}

.cl-accent-blue-italic {
    color: #16399e;
}

.cl-accent-yellow {
    color: var(--c-yellow);
}

.cl-accent-mid {
    color: #16399e;
}

/* --- Hero (navy) --- */
.cl-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
}

.cl-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.cl-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.cl-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cl-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.cl-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.cl-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.cl-breadcrumb a:hover {
    color: #fff;
}

.cl-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 20px;
}

.cl-hero-heading .accent {
    color: var(--c-yellow);
}

.cl-hero-lead {
    max-width: 620px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 26px;
}

.cl-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.cl-hero-media {
    position: relative;
    border-radius: 18px;
    overflow: visible;
    background: linear-gradient(152deg, #e9d49a 0%, #d8b15e 50%, #b98a36 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.cl-hero-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 578 / 380;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

.cl-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 112px;
    height: 112px;
    background: var(--c-yellow);
    color: var(--c-navy);
    border-radius: 56px;
    transform: rotate(-6deg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Shantell Sans', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 13.8px;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
    z-index: 3;
}

/* --- Shared --- */
.cl-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 14px;
}

.cl-heading--center {
    text-align: center;
}

.cl-heading--light {
    color: #fff;
}

.cl-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 16px;
}

.cl-text--center {
    text-align: center;
}

.cl-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.cl-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #16399e;
    margin-bottom: 14px;
}

.cl-eyebrow--center {
    text-align: center;
}

/* --- Put Your Brand (cream) --- */
.cl-brand {
    background: #faf6ec;
    padding: 80px 0;
}

.cl-lead {
    font-family: 'Playfair Display', serif;
    font-size: 25px;
    line-height: 37.5px;
    color: var(--c-navy);
    margin: 0;
}

.cl-stats {
    border-top: 1px solid rgba(12, 27, 61, .12);
    padding-top: 25px;
    margin-top: 24px;
}

.cl-stat-num {
    display: block;
    font-size: 30px;
    line-height: 1.1;
    color: #16399e;
    margin-bottom: 4px;
}

.cl-stat-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #3a4252;
}

.cl-brand-action {
    margin-top: 28px;
}

/* --- Your Logo Premium (white) --- */
.cl-premium {
    background: #fff;
    padding: 80px 0;
}

.cl-premium-head {
    max-width: 760px;
    margin: 0 auto 30px;
    text-align: center;
}

.cl-premium .cl-eyebrow--center {
    margin-bottom: 30px;
}

.cl-gf-item {
    height: 100%;
    text-align: center;
    padding: 8px;
}

.cl-gf-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 132px;
    margin: 0 auto 20px;
    background: #fff;
    border: 1px solid #e8ecf5;
    border-radius: 66px;
    color: #16399e;
    font-size: 32px;
    box-shadow: 0 14px 16px rgba(12, 27, 61, .1);
    position: relative;
}

.cl-gf-circle::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 2px dashed rgba(22, 57, 158, .18);
    border-radius: 51px;
}

.cl-gf-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--c-navy);
    margin-bottom: 5px;
}

.cl-gf-sub {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: #3a4252;
    margin: 0;
}

/* --- Custom Salted (cream) --- */
.cl-salted {
    background: #faf6ec;
    padding: 80px 0;
}

.cl-salted-media {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.cl-salted-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- Want a Custom Flavor (white) --- */
.cl-flavor {
    background: #fff;
    padding: 80px 0;
}

.cl-flavor-media {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.cl-flavor-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- How It Works (blue) --- */
.cl-how {
    background: #0054a4;
    padding: 80px 0 ;
}

.cl-video-area {
    margin-top: -300px;
    padding-bottom: 80px
}

.cl-how-head {
    max-width: 880px;
    margin-bottom: 42px;
}

.cl-how-intro {
    max-width: 760px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin: 0;
}

.cl-timeline {
    position: relative;
}

.cl-timeline::before {
    content: "";
    position: absolute;
    top: 45px;
    left: 40px;
    right: 40px;
    height: 2px;
    background: rgba(255, 255, 255, .22);
    z-index: 0;
}

.cl-step {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 6px;
}

.cl-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 0 auto 18px;
    background: var(--c-yellow);
    color: var(--c-navy);
    border-radius: 25px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 16px;
    box-shadow: 0 0 0 6px #0054a4;
}

.cl-step-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.3px;
    color: #fff;
    margin-bottom: 10px;
}

.cl-step-text {
    font-size: 14.5px;
    line-height: 22.91px;
    color: rgba(255, 255, 255, .78);
    margin: 0;
}

.cl-how-note {
    max-width: 100%;
    margin: 42px 0 0;
    font-size: 16.5px;
    line-height: 26.73px;
    color: rgba(255, 255, 255, .82);
}

.cl-video-block {
    text-align: center;
}

.cl-video-block .cl-heading {
    margin-bottom: 48px;
}

.cl-video-block .cl-accent-mid {
    color: #16399E;
}

.cl-video {
    position: relative;
    max-width: 1046px;
    margin: 0 auto;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .5);
    display: block
}

.cl-video img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.cl-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 70px;
    border-radius: 18px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

/* --- Contact Form (white) --- */
.cl-contact {
    background: #fff;
    padding: 80px 0;
}
.cl-contact.light-background{
    position: relative;
    z-index: 1;
}
.cl-contact.light-background::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 75%;
    left: 0;
    top: 0;
    background: #FBFCFF;
    z-index: -1;
}
.cl-contact-lead {
    font-size: 18px;
    line-height: 29.16px;
    margin-bottom: 24px;
}

.cl-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cl-contact-list li {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 16px;
}

.cl-contact-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.cl-contact-list a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15.5px;
    color: var(--c-navy);
}

.cl-contact-list a:hover {
    color: #16399e;
    text-decoration: underline
}

.cl-form-card {
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 22px;
    box-shadow: 0 22px 60px -34px rgba(12, 27, 61, .4);
    padding: 43px;
}

.cl-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #3a4252;
    margin-bottom: 8px;
}

.cl-input {
    width: 100%;
    height: 50px;
    border: 1px solid #F6F8FD;
    border-radius: 12px;
    background: #F6F8FD;
    padding: 0 16px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--c-navy);
    transition: border-color .2s, box-shadow .2s;
}

.cl-input:focus {
    outline: none;
    border-color: #16399e;
    box-shadow: 0 0 0 3px rgba(22, 57, 158, .12);
}

.cl-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c1b3d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
    padding-right: 44px;
    color: #1a2033;
}

.cl-textarea {
    height: auto;
    min-height: 110px;
    padding: 14px 16px;
    resize: vertical;
}

.cl-submit {
    width: 100%;
    justify-content: center;
    margin-top: 24px;
}

.cl-form-note {
    font-size: 13px;
    line-height: 21px;
    color: #3a4252;
    text-align: center;
    margin: 16px 0 0;
}

/* --- Mission CTA --- */
.footer-cta-area.cl-cta {
    padding-top: 100px;
}

.cl-cta .create-card {
    padding: 86px 72px;
}

.cl-cta .create-heading .accent {
    color: #0054a4;
}

.cl-cta .create-actions {
    display: flex;
    justify-content: center;
}

/* --- CL responsive --- */
@media (max-width: 991.98px) {
    .cl-hero {
        padding: 130px 24px 60px;
    }

    .cl-hero-heading {
        font-size: 40px;
    }

    .cl-heading {
        font-size: 32px;
    }

    .cl-hero-media,
    .cl-salted-media,
    .cl-flavor-media {
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .cl-badge {
        width: 92px;
        height: 92px;
        font-size: 11px;
    }

    .cl-salted .col-lg-6:first-child {
        order: -1;
    }

    .cl-timeline::before {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .cl-hero-heading {
        font-size: 32px;
    }

    .cl-brand,
    .cl-premium,
    .cl-salted,
    .cl-flavor,
    .cl-how,
    .cl-contact {
        padding: 56px 0;
    }

    .cl-heading {
        font-size: 26px;
    }

    .cl-lead {
        font-size: 21px;
        line-height: 31px;
    }

    .cl-form-card {
        padding: 28px;
    }

    .cl-hero-actions .cta-btn {
        width: 100%;
    }

    .footer-cta-area.cl-cta {
        padding-top: 60px;
    }

    .cl-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Flavored Butter Spreads page ===
   ================================================================= */

.fb-heading .accent-blue-solid,
.fb-exp-title .accent-blue-solid,
.fb-popular-head .accent-blue-solid,
.fb-packaging-head .accent-blue-solid {
    color: #16399e;
}

.fb-accent-blue-italic {
    color: #16399e;
}

.fb-trust-heading .accent-yellow {
    color: var(--c-yellow);
}

/* --- Hero (navy) --- */
.fb-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
}

.fb-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.fb-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.fb-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fb-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.fb-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.fb-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.fb-breadcrumb a:hover {
    color: #fff;
}

.fb-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 20px;
}

.fb-hero-heading .accent {
    color: var(--c-yellow);
}

.fb-hero-lead {
    max-width: 640px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 26px;
}

.fb-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.fb-hero-media {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(152deg, #e9d49a 0%, #d8b15e 50%, #b98a36 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.fb-hero-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 578 / 380;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

/* --- Shared --- */
.fb-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.fb-heading--center {
    text-align: center;
    margin-bottom: 42px;
}

.fb-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 16px;
}

.fb-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.fb-text a:hover {
    text-decoration: none
}

/* --- Enhance (cream) --- */
.fb-enhance {
    background: #faf6ec;
    padding: 80px 0;
}

.fb-enhance-lead {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 34.1px;
    color: var(--c-navy);
    margin: 0;
}

.fb-enhance .fb-text {
    font-size: 18px;
    line-height: 29.7px;
    margin-bottom: 24px;
}

/* --- Every Occasion (white) --- */
.fb-occasion {
    background: #fff;
    padding: 80px 0;
}

.fb-occasion-media,
.fb-pair-media {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.fb-occasion-media img,
.fb-pair-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- Explained (cream) --- */
.fb-explained {
    background: #faf6ec;
    padding: 80px 0;
}

.fb-exp-card {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
    padding: 37px;
}

.fb-exp-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.fb-exp-text {
    font-size: 16px;
    line-height: 27.2px;
    color: #3a4252;
    margin-bottom: 16px;
}

.fb-exp-text:last-child {
    margin-bottom: 0;
}

/* --- Popular Spreads (white) --- */
.fb-popular {
    background: #fff;
    padding: 80px 0;
}

.fb-popular-head {
    max-width: 880px;
    margin-bottom: 48px;
}

.fb-popular-head .fb-text {
    font-size: 18px;
    line-height: 29.16px;
    margin: 0;
}

.fb-popular-media {
    position: sticky;
    top: 100px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.fb-popular-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.fb-spread-card {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 16px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
    padding: 23px;
}

.fb-spread-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15.5px;
    color: var(--c-navy);
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--c-yellow);
}

.fb-spread-text {
    font-size: 14.5px;
    line-height: 22.48px;
    color: #3a4252;
    margin: 0;
}

/* --- Packaging (cream) --- */
.fb-packaging {
    background: #faf6ec;
    padding: 80px 0;
}

.fb-packaging-head {
    max-width: 930px;
    margin-bottom: 48px;
}

.fb-packaging-head .fb-text {
    font-size: 18px;
    line-height: 29.16px;
    margin: 0;
}

.fb-pack-card {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
    padding: 30px;
}

.fb-pack-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-size: 18px;
    margin-bottom: 19px;
}

.fb-pack-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: var(--c-navy);
    margin-bottom: 10px;
}

.fb-pack-text {
    font-size: 15px;
    line-height: 24px;
    color: #3a4252;
    margin: 0;
}

/* --- How to Pair (white) --- */
.fb-pair {
    background: #fff;
    padding: 80px 0;
}

/* --- Industries (cream) --- */
.fb-industries {
    padding: 80px 0 350px;
}

.fb-industries-head {
    max-width: 880px;
    margin-bottom: 48px;
}

.fb-industries-head .fb-text {
    font-size: 18px;
    line-height: 29.16px;
    margin: 0;
}

.fb-ind-col {
    position: relative;
    padding-top: 8px;
    opacity: 1;
    transition: all 0.3s
}

.fb-ind-col:hover {
    opacity: 1
}

.fb-ind-col::before {
    content: "";
    position: absolute;
    top: 12px;
    right: -12px;
    width: 1px;
    height: 240px;
    background: rgba(12, 27, 61, .12);
}

.fb-ind-grid > div:last-child .fb-ind-col::before {
    display: none;
}



.fb-ind-num {
    display: block;
    font-weight: 800;
    font-size: 44px;
    line-height: 1;
    margin-bottom: 18px;
    position: relative;
    z-index: 9;
    transition: all 0.3s;
    -webkit-text-fill-color: white;
    -webkit-text-stroke: 1px #001E3B;
	    color: #004D96;
    -webkit-text-fill-color: #004D96;
}

.fb-ind-col:hover .fb-ind-num {
    color: #004D96;
    -webkit-text-fill-color: #004D96;
}

.fb-ind-num img {
    position: absolute;
    top: -15px;
    left: -20px;
    z-index: -9;
    visibility: visible;
    opacity: 1;
    transition: all 0.3s
}

.fb-ind-col:hover .fb-ind-num img {
    visibility: visible;
    opacity: 1
}


.fb-ind-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -.96px;
    text-transform: uppercase;
    color: #001E3B;
    margin-bottom: 16px;
}

.fb-ind-text {
    font-size: 16px;
    line-height: 24px;
    color: #3a4252;
    margin: 0;
}

.fb-ind-text a {
    color: #16399e;
    font-weight: 700;
    text-decoration: underline;
}

/* --- Trust Experts Band (dark, overlaps) --- */
.fb-trust {
    margin-top: -250px;
    position: relative;
    z-index: 2;
}

.fb-trust-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #001e3b;
    padding: 83px 40px;
}

.fb-trust-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.fb-trust-inner {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.fb-trust-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: #fff;
    margin-bottom: 13px;
}

.fb-trust-text {
    font-size: 18px;
    line-height: 29.7px;
    color: #dddfe4;
    margin-bottom: 26px;
}

/* --- Mission CTA --- */
.footer-cta-area.fb-cta {
    padding-top: 100px;
}

.fb-cta .create-card {
    padding: 86px 72px;
}

.fb-cta .create-heading .accent {
    color: #16399e;
}

.fb-cta .create-actions {
    display: flex;
    justify-content: center;
}

/* --- FB responsive --- */
@media (max-width: 991.98px) {
    .fb-hero {
        padding: 130px 24px 60px;
    }

    .fb-hero-heading {
        font-size: 40px;
    }

    .fb-heading {
        font-size: 30px;
    }

    .fb-hero-media,
    .fb-occasion-media,
    .fb-pair-media {
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .fb-enhance-lead {
        font-size: 20px;
        line-height: 31px;
    }

    .fb-popular-media {
        position: static;
    }

    .fb-pair .col-lg-6:first-child {
        order: -1;
    }

    .fb-ind-col::before {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .fb-hero-heading {
        font-size: 32px;
    }

    .fb-enhance,
.fb-occasion,
.fb-explained,
.fb-popular,
.fb-packaging,
.fb-pair,
.fb-industries{
        padding: 56px 0;
    }

    .fb-industries {
        padding-bottom: 90px;
    }

    .fb-heading {
        font-size: 26px;
    }

    .fb-exp-card,
    .fb-trust-card {
        padding: 28px;
    }

    .fb-trust-card {
        padding: 56px 28px;
    }

    .fb-trust-heading {
        font-size: 28px;
    }

    .fb-hero-actions .cta-btn {
        width: 100%;
    }

    .footer-cta-area.fb-cta {
        padding-top: 60px;
    }

    .fb-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Private Label Margarine page ===
   ================================================================= */

.pm-heading .accent-blue-solid {
    color: #16399e;
}

/* --- Hero (navy) --- */
.pm-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
}

.pm-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.pm-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.pm-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pm-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.pm-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.pm-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.pm-breadcrumb a:hover {
    color: #fff;
}

.pm-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 20px;
}

.pm-hero-heading .accent {
    color: var(--c-yellow);
}

.pm-hero-lead {
    max-width: 640px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 26px;
}

.pm-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.pm-hero-media {
    position: relative;
    border-radius: 18px;
    overflow: visible;
    background: linear-gradient(150deg, #f0dca8 0%, #e0bd6a 50%, #c79a3e 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.pm-hero-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 540 / 380;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

.pm-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 112px;
    height: 112px;
    background: var(--c-yellow);
    color: var(--c-navy);
    border-radius: 56px;
    transform: rotate(-6deg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Shantell Sans', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 13.8px;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
    z-index: 3;
}

/* --- Shared --- */
.pm-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.pm-text {
    font-size: 16.5px;
    line-height: 28px;
    color: #3a4252;
    margin-bottom: 16px;
}

.pm-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

/* --- Improve Flavors (cream) --- */
.pm-improve {
    background: #faf6ec;
    padding: 80px 0;
}

.pm-lead {
    font-family: 'Playfair Display', serif;
    font-size: 25px;
    line-height: 37.5px;
    color: var(--c-navy);
    margin: 0;
}

/* --- Whipped Margarine (white) --- */
.pm-whipped {
    background: #fff;
    padding: 80px 0;
}

.pm-whipped-media {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.pm-whipped-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- Private Labeling (cream) --- */
.pm-labeling {
    background: #faf6ec;
    padding: 80px 0;
}

.pm-labeling-head {
    max-width: 1000px;
    margin-bottom: 48px;
    margin: 0 auto 48px;
    text-align: center;
}

.pm-labeling-head .pm-text {
    font-size: 18px;
    line-height: 29.16px;
    margin: 0;
}

.pm-label-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
    overflow: hidden;
}

.pm-label-media {
    aspect-ratio: 395 / 247;
    overflow: hidden;
}

.pm-label-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.pm-label-body {
    padding: 25px 26px 26px;
}

.pm-label-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: var(--c-navy);
    margin-bottom: 10px;
}

.pm-label-text {
    font-size: 15px;
    line-height: 24px;
    color: #3a4252;
    margin: 0;
}

/* --- Margarine vs Butter (white) --- */
.pm-compare {
    background: #fff;
    padding: 80px 0;
}

.pm-compare-head {
    max-width: 960px;
    margin-bottom: 48px;
}

.pm-compare-head .pm-text {
    font-size: 18px;
    line-height: 29.16px;
    margin: 0;
}

.pm-table-wrap {
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
}

.pm-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.pm-table th,
.pm-table td {
    padding: 22px 26px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(12, 27, 61, .12);
}

.pm-table thead th {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .3px;
    color: #fff;
    background: var(--c-navy);
}

.pm-table thead th.pm-th-lead {
    background: #16399e;
    width: 190px;
}

.pm-table tbody tr:last-child th,
.pm-table tbody tr:last-child td {
    border-bottom: none;
}

.pm-th-attr {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15.5px;
    color: var(--c-navy);
    background: #FBFCFF;
    width: 190px;
}

.pm-table td {
    font-size: 15.5px;
    line-height: 24.8px;
    color: #3a4252;
}

.pm-table td + td {
    border-left: 1px solid rgba(12, 27, 61, .12);
}

/* --- More Products + Plant-Based (cream) --- */
.pm-more {
    background: #faf6ec;
    padding: 40px 0 90px;
}

.pm-more-card {
    height: 100%;
    min-height: 230px;
    display: flex;
    border-radius: 18px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
    overflow: hidden;
    position: relative;
}

.pm-more-card--a {
    background: linear-gradient(150deg, #fbf2d8 0%, #f4e2af 55%, #ecd28a 100%);
}

.pm-more-card--b {
    background: linear-gradient(150deg, #fffdf2 0%, #fff3c4 55%, #ffe98f 100%);
}

.pm-more-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15) 60%, rgba(255, 255, 255, 0));
}

.pm-more-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 9px;
    padding: 34px;
    width: 100%;
}

.pm-more-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.2;
    color: var(--c-navy);
    margin: 0;
}

.pm-more-text {
    font-size: 14.5px;
    line-height: 22.48px;
    color: rgba(12, 27, 61, .78);
    margin: 0;
}

.pm-more-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 14px;
    padding: 9px 16px;
    border-radius: 50px;
}

.pm-more-pill:hover {
    color: var(--c-navy);
    background: #ffd91f;
}

/* --- Mission CTA --- */
.footer-cta-area.pm-cta {
    padding-top: 100px;
}

.pm-cta .create-card {
    padding: 86px 72px;
}

.pm-cta .create-heading .accent {
    color: #0054a4;
}

.pm-cta .create-actions {
    display: flex;
    justify-content: center;
}

/* --- PM responsive --- */
@media (max-width: 991.98px) {
    .pm-hero {
        padding: 130px 24px 60px;
    }

    .pm-hero-heading {
        font-size: 40px;
    }

    .pm-heading {
        font-size: 30px;
    }

    .pm-hero-media,
    .pm-whipped-media {
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .pm-badge {
        width: 92px;
        height: 92px;
        font-size: 11px;
    }

    .pm-table-wrap {
        overflow-x: auto;
    }

    .pm-table {
        min-width: 720px;
    }
}

@media (max-width: 767.98px) {
    .pm-hero-heading {
        font-size: 32px;
    }

    .pm-improve,
    .pm-whipped,
    .pm-labeling,
    .pm-compare {
        padding: 56px 0;
    }

    .pm-more {
        padding: 32px 0 56px;
    }

    .pm-heading {
        font-size: 26px;
    }

    .pm-lead {
        font-size: 21px;
        line-height: 31px;
    }

    .pm-hero-actions .cta-btn {
        width: 100%;
    }

    .footer-cta-area.pm-cta {
        padding-top: 60px;
    }

    .pm-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Margarine page ===
   ================================================================= */

.mg-heading .accent-blue-solid,
.mg-subhead .accent-blue-solid,
.mg-packaging-head .accent-blue-solid {
    color: #16399e;
}

.mg-accent-blue {
    color: #0154a4;
}

.mg-cta-accent {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: #16399e;
}

/* --- Hero (navy) --- */
.mg-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
}

.mg-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.mg-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.mg-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mg-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.mg-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.mg-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.mg-breadcrumb a:hover {
    color: #fff;
}

.mg-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 20px;
}

.mg-hero-heading .accent {
    color: var(--c-yellow);
}

.mg-hero-lead {
    max-width: 640px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 26px;
}

.mg-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.mg-hero-media {
    position: relative;
    border-radius: 18px;
    overflow: visible;
    background: linear-gradient(152deg, #f0dca8 0%, #e0bd6a 50%, #c79a3e 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.mg-hero-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 578 / 418;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

.mg-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 112px;
    height: 112px;
    background: var(--c-yellow);
    color: var(--c-navy);
    border-radius: 56px;
    transform: rotate(-6deg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Shantell Sans', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 13.8px;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
    z-index: 3;
}

/* --- Shared --- */
.mg-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.mg-heading--center {
    text-align: center;
}

.mg-subhead {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin: 8px 0 12px;
}

.mg-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 16px;
}

.mg-text--center {
    text-align: center;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.mg-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.mg-text a:hover {
    text-decoration: none
}

/* --- What Is Margarine (cream) --- */
.mg-what {
    background: #faf6ec;
    padding: 80px 0;
}

.mg-what-media {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.mg-what-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- Pair With editorial (cream) --- */
.mg-pair {
    background: #faf6ec;
    padding: 60px 0;
}

.mg-pair-media {
    position: relative;
    background: #1f5fb0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.mg-pair-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.mg-pair-num {
    position: absolute;
    top: -6px;
    left: 18px;
    font-family: 'Baloo 2', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 96px;
    line-height: 1;
    letter-spacing: -6px;
    color: rgba(2, 42, 80, .28);
    z-index: 2;
    pointer-events: none;
}

.mg-pair-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -2.7px;
    text-transform: uppercase;
    color: #0054a4;
    margin-bottom: 17px;
}

.mg-pair-counter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.mg-pair-count {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 10.4px;
    letter-spacing: 1.87px;
    text-transform: uppercase;
    color: #022a50;
}

.mg-pair-bars {
    display: flex;
    gap: 4px;
}

.mg-bar {
    width: 28px;
    height: 2px;
    background: rgba(2, 42, 80, .3);
}

.mg-bar.is-on {
    background: #022a50;
}

/* --- Whipped Margarine (cream, white card) --- */
.mg-whipped {
    background: #faf6ec;
    padding: 80px 0;
}

.mg-whipped-card {
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 26px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
    padding: 53px;
}

.mg-heading--blue .mg-accent-blue {
    color: #0154a4;
}

.mg-text--lg {
    font-size: 18px;
    line-height: 30.6px;
}

.mg-feat-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mg-feat-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #faf6ec;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 16px;
    padding: 19px 21px;
}

.mg-feat-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 21px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.mg-feat-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15.5px;
    color: var(--c-navy);
    margin: 0 0 6px;
}

.mg-feat-text {
    font-size: 14px;
    line-height: 20.3px;
    color: #3a4252;
    margin: 0;
}

/* --- Packaging Options (white) --- */
.mg-packaging {
    background: #fff;
    padding: 80px 0;
}

.mg-packaging-head {
    margin-bottom: 48px;
}

.mg-packaging-head .mg-text {
    font-size: 18px;
    line-height: 29.16px;
}

.mg-pack-col {
    position: relative;
    padding: 8px 0 0;
}

.mg-pack-col::before {
    content: "";
    position: absolute;
    top: 12px;
    right: -12px;
    width: 1px;
    height: 240px;
    background: rgba(12, 27, 61, .12);
}

.mg-pack-grid > div:last-child .mg-pack-col::before {
    display: none;
}

.mg-pack-num {
    display: block;
    font-family: 'Baloo 2', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 34px;
    line-height: 1.3;
    letter-spacing: -1.36px;
    color: rgba(0, 30, 59, .43);
    margin-bottom: 12px;
}

.mg-pack-grid > div:nth-child(2) .mg-pack-num {
    color: #004d96;
}

.mg-pack-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.16;
    letter-spacing: -.96px;
    text-transform: uppercase;
    color: rgba(0, 30, 59, .82);
    margin-bottom: 16px;
}

.mg-pack-text {
    font-size: 16px;
    line-height: 24px;
    color: #3a4252;
    margin: 0;
}

/* --- Why Butterball (cream) --- */
.mg-why {
    background: #faf6ec;
    padding: 80px 0;
}

.mg-why-media {
    background: linear-gradient(150deg, #e6cf9c 0%, #caa052 55%, #9c7522 100%);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.mg-why-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.mg-award-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.mg-award {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(12, 27, 61, .12);
}

.mg-award:first-child {
    border-top: 1px solid rgba(12, 27, 61, .12);
}

.mg-award-year {
    flex-shrink: 0;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 50px;
}

.mg-award-name {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 15.5px;
    line-height: 1.4;
    color: var(--c-navy);
}

.mg-award-org {
    font-weight: 400;
    color: #3a4252;
}

/* --- Mission CTA --- */
.footer-cta-area.mg-cta {
    padding-top: 100px;
}

.mg-cta .create-card {
    padding: 86px 72px;
}

.mg-cta .create-heading .mg-cta-accent {
    color: #16399e;
}

.mg-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* --- MG responsive --- */
@media (max-width: 991.98px) {
    .mg-hero {
        padding: 130px 24px 60px;
    }

    .mg-hero-heading {
        font-size: 38px;
    }

    .mg-heading {
        font-size: 30px;
    }

    .mg-pair-heading {
        font-size: 32px;
        letter-spacing: -1.6px;
    }

    .mg-hero-media,
    .mg-what-media,
    .mg-pair-media,
    .mg-why-media {
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .mg-badge {
        width: 92px;
        height: 92px;
        font-size: 11px;
    }

    .mg-pack-col::before {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .mg-hero-heading {
        font-size: 30px;
    }

    .mg-what,
    .mg-whipped,
    .mg-packaging,
    .mg-why {
        padding: 56px 0;
    }

    .mg-pair {
        padding: 40px 0;
    }

    .mg-heading {
        font-size: 26px;
    }

    .mg-subhead {
        font-size: 22px;
    }

    .mg-pair-heading {
        font-size: 28px;
    }

    .mg-whipped-card {
        padding: 28px;
    }

    .mg-hero-actions .cta-btn,
    .mg-cta-actions .cta-btn {
        width: 100%;
    }

    .footer-cta-area.mg-cta {
        padding-top: 60px;
    }

    .mg-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Clarified Butter page ===
   ================================================================= */

.cf-heading .accent-blue-solid,
.cf-preportioned .accent-blue-solid {
    color: #16399e;
}

.cf-who-head .accent-blue-plain {
    color: #004d96;
}

.cf-accent-italic {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: #16399e;
}

.cf-trust-heading .accent-yellow {
    color: var(--c-yellow);
}

/* --- Hero (navy) --- */
.cf-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
}

.cf-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.cf-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.cf-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cf-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.cf-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.cf-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.cf-breadcrumb a:hover {
    color: #fff;
}

.cf-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 20px;
}

.cf-hero-heading .accent {
    color: var(--c-yellow);
}

.cf-hero-lead {
    max-width: 640px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 26px;
}

.cf-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.cf-hero-media {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(152deg, #f0dca8 0%, #e0bd6a 50%, #c79a3e 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.cf-hero-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 578 / 380;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

/* --- Shared --- */
.cf-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.cf-heading--center {
    text-align: center;
    margin-bottom: 42px;
}

.cf-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 16px;
}

.cf-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

/* --- What Is Clarified Butter (cream) --- */
.cf-what {
    background: #faf6ec;
    padding: 80px 0;
}

.cf-lead {
    font-family: 'Playfair Display', serif;
    font-size: 25px;
    line-height: 37.5px;
    color: var(--c-navy);
    margin: 0;
}

.cf-what-row {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 27px 0;
    border-bottom: 1px solid rgba(12, 27, 61, .12);
}

.cf-what-row:first-child {
    border-top: 1px solid rgba(12, 27, 61, .12);
}

.cf-what-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.cf-what-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 5px;
}

.cf-what-text {
    font-size: 16px;
    line-height: 25.6px;
    color: #3a4252;
    margin: 0;
}

/* --- Used For (white) --- */
.cf-used {
    background: #fff;
    padding: 80px 0;
}

.cf-use-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cf-use-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.cf-use-icon {
    flex-shrink: 0;
    width: 27px;
    height: 27px;
    border-radius: 13.5px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-top: 2px;
}

.cf-use-text {
    font-size: 16.5px;
    line-height: 24.75px;
    color: #1a2033;
    margin: 0;
}

.cf-use-text strong {
    font-weight: 800;
    color: var(--c-navy);
}

.cf-used-media {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.cf-used-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- Who Needs Bulk (cream) --- */
.cf-who {
    background: #faf6ec;
    padding: 80px 0;
}

.cf-who-head {
    max-width: 880px;
    margin-bottom: 48px;
}

.cf-who-head .cf-text {
    font-size: 18px;
    line-height: 29.16px;
    margin: 0;
}

.cf-who-col {
    position: relative;
    padding-top: 8px;
}

.cf-who-col::before {
    content: "";
    position: absolute;
    top: 12px;
    right: -12px;
    width: 1px;
    height: 240px;
    background: rgba(12, 27, 61, .12);
}

.cf-who-grid > div:last-child .cf-who-col::before {
    display: none;
}

.cf-who-num {
    display: block;
    font-family: 'Baloo 2', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -1.36px;
    color: rgba(0, 30, 59, .43);
    margin-bottom: 18px;
}

.cf-who-grid > div:nth-child(2) .cf-who-num {
    color: #004d96;
}

.cf-who-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -.96px;
    text-transform: uppercase;
    color: rgba(0, 30, 59, .82);
    margin-bottom: 16px;
}

.cf-who-text {
    font-size: 16px;
    line-height: 24px;
    color: #3a4252;
    margin: 0;
}

/* --- Benefits Wholesale (white) --- */
.cf-benefits {
    background: #fff;
    padding: 80px 0;
}

.cf-benefits-head {
    max-width: 880px;
    margin-bottom: 48px;
}

.cf-benefits-head .cf-text {
    font-size: 18px;
    line-height: 29.16px;
    margin: 0;
}

.cf-ben-card {
    height: 100%;
    border-top: 2px solid var(--c-navy);
    padding-top: 20px;
}

.cf-ben-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 10px;
}

.cf-ben-text {
    font-size: 15.5px;
    line-height: 25.58px;
    color: #3a4252;
    margin: 0;
}

/* --- Benefits Pre-Portioned (cream) --- */
.cf-preportioned {
    padding: 80px 0 350px;
}

.cf-prep-media {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.cf-prep-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- Trust Band (blue) --- */
.cf-trust {
    padding: 0;
    margin-top: -250px
}

.cf-trust-inner {
    margin: 0 auto;
    text-align: center;
    background: #0054a4;
    padding: 80px 200px;
}

.cf-trust-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: #fff;
    margin-bottom: 18px;
}

.cf-trust-text {
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 26px;
}

.cf-trust-text a {
    color: var(--c-yellow);
    font-weight: 600;
    text-decoration: underline;
}

.cf-trust-text a:hover {
    text-decoration: none
}

/* --- Why Choose Butterball (white) --- */
.cf-why {
    background: #fff;
    padding: 80px 0;
}

.cf-why-intro {
    margin-bottom: 44px;
}

.cf-why-media {
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(150deg, #e6cf9c 0%, #caa052 55%, #9c7522 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.cf-why-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.cf-why-card {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
    padding: 31px;
}

.cf-why-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-size: 18px;
    margin-bottom: 16px;
}

.cf-why-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 10px;
}

.cf-why-text {
    font-size: 15px;
    line-height: 24.75px;
    color: #3a4252;
    margin: 0;
}

/* --- Mission CTA --- */
.footer-cta-area.cf-cta {
    padding-top: 100px;
}

.cf-cta .create-card {
    padding: 86px 72px;
}

.cf-cta .create-heading .accent {
    color: #16399e;
}

.cf-cta .create-actions {
    display: flex;
    justify-content: center;
}

/* --- CF responsive --- */
@media (max-width: 991.98px) {
    .cf-hero {
        padding: 130px 24px 60px;
    }

    .cf-hero-heading {
        font-size: 40px;
    }

    .cf-heading,
    .cf-trust-heading {
        font-size: 30px;
    }

    .cf-hero-media,
    .cf-used-media,
    .cf-prep-media,
    .cf-why-media {
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .cf-lead {
        font-size: 21px;
        line-height: 31px;
    }

    .cf-preportioned .col-lg-6:first-child,
    .cf-why-intro .col-lg-6:first-child {
        order: -1;
    }

    .cf-who-col::before {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .cf-hero-heading {
        font-size: 32px;
    }

    .cf-what,
    .cf-used,
    .cf-who,
    .cf-benefits,
    .cf-preportioned,
    .cf-trust,
    .cf-why {
        padding: 56px 0;
    }

    .cf-heading,
    .cf-trust-heading {
        font-size: 26px;
    }

    .cf-why-card {
        padding: 28px;
    }

    .cf-hero-actions .cta-btn {
        width: 100%;
    }

    .footer-cta-area.cf-cta {
        padding-top: 60px;
    }

    .cf-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Private Label Butter page ===
   ================================================================= */

.pb-heading .accent-blue-solid,
.pb-types .accent-blue-solid,
.pb-ind-head .accent-blue-solid,
.pb-why-head .accent-blue-solid {
    color: #16399e;
}

.pb-getband-heading .accent-yellow {
    color: var(--c-yellow);
}

/* --- Hero (navy) --- */
.pb-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
}

.pb-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.pb-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.pb-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pb-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.pb-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.pb-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.pb-breadcrumb a:hover {
    color: #fff;
}

.pb-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 20px;
}

.pb-hero-heading .accent {
    color: var(--c-yellow);
}

.pb-hero-lead {
    max-width: 640px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 26px;
}

.pb-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.pb-hero-media {
    position: relative;
    border-radius: 18px;
    overflow: visible;
    background: linear-gradient(152deg, #e9d49a 0%, #d8b15e 50%, #b98a36 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.pb-hero-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 578 / 380;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

.pb-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 112px;
    height: 112px;
    background: var(--c-yellow);
    color: var(--c-navy);
    border-radius: 56px;
    transform: rotate(-6deg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Shantell Sans', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 13.8px;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
    z-index: 3;
}

/* --- Shared --- */
.pb-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.pb-heading--center {
    text-align: center;
}

.pb-text {
    font-size: 16.5px;
    line-height: 28px;
    color: #3a4252;
    margin-bottom: 16px;
}

.pb-text--center {
    text-align: center;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.pb-text a,
.pb-lead a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

/* --- Wholesale Butter Labeled (cream) --- */
.pb-wholesale {
    background: #faf6ec;
    padding: 80px 0;
}

.pb-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: .4px;
    color: #16399e;
    margin-bottom: 14px;
}

.pb-lead {
    font-family: 'Playfair Display', serif;
    font-size: 25px;
    line-height: 37.5px;
    color: var(--c-navy);
    margin: 0;
}

.pb-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    border-top: 1px solid rgba(12, 27, 61, .12);
    padding-top: 25px;
    margin-top: 8px;
}

.pb-stat-num {
    display: block;
    font-size: 30px;
    line-height: 33px;
    color: #16399e;
    margin-bottom: 4px;
}

.pb-stat-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #3a4252;
}

/* --- Types of Private Label Butter (editorial, cream) --- */
.pb-types {
    background: #faf6ec;
    padding: 80px 0;
}

.pb-types .pb-heading--center {
    margin-bottom: 42px;
}

.pb-types-media {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.pb-types-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.pb-types-num {
    position: absolute;
    top: -8px;
    left: 20px;
    font-family: 'Baloo 2', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 96px;
    line-height: 1;
    letter-spacing: -6.5px;
    color: rgba(2, 42, 80, .28);
    z-index: 2;
    pointer-events: none;
}

.pb-types-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -2.688px;
    text-transform: uppercase;
    color: #0054a4;
    margin-bottom: 17px;
}

.pb-types-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 39px;
    margin-top: 24px;
}

.pb-types-counter {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pb-types-count {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 10.4px;
    letter-spacing: 1.872px;
    text-transform: uppercase;
    color: #022a50;
}

.pb-types-bars {
    display: flex;
    gap: 4px;
}

.pb-bar {
    width: 28px;
    height: 2px;
    background: rgba(2, 42, 80, .3);
}

.pb-bar.is-on {
    background: #022a50;
}

/* --- Industries (cream, 8 icon cards) --- */
.pb-industries {
    background: #faf6ec;
    padding: 80px 0;
}

.pb-ind-head {
    margin-bottom: 48px;
}

.pb-ind-card {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
    padding: 27px;
}

.pb-ind-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #0054a4;
    color: #fff;
    font-size: 20px;
    margin-bottom: 14px;
}

.pb-ind-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    line-height: 1.25;
    color: var(--c-navy);
    margin-bottom: 12px;
}

.pb-ind-text {
    font-size: 14.5px;
    line-height: 23.2px;
    color: #3a4252;
    margin: 0;
}

.pb-ind-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.pb-ind-text a:hover {
    text-decoration: none
}

/* --- Why Choose (white, 6 top-border cards) --- */
.pb-why {
    background: #fff;
    padding: 80px 0;
}

.pb-why-head {
    max-width: 880px;
    margin-bottom: 48px;
}

.pb-why-head .pb-text {
    font-size: 18px;
    line-height: 29.16px;
    margin: 0;
}

.pb-why-card {
    height: 100%;
    border-top: 2px solid var(--c-navy);
    padding-top: 22px;
}

.pb-why-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 11px;
}

.pb-why-accent {
    color: #16399e;
}

.pb-why-text {
    font-size: 15px;
    line-height: 24.75px;
    color: #3a4252;
    margin: 0;
}

.pb-why-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.pb-why-text a:hover {
    text-decoration: none
}

/* --- Get Private Label Band (blue) --- */
.pb-getband {
    background: #0054a4;
    padding: 80px 0;
}

.pb-getband-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: #fff;
    margin-bottom: 18px;
}

.pb-getband-text {
    max-width: 520px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 26px;
}

.pb-getband-text a {
    color: var(--c-yellow);
    font-weight: 600;
    text-decoration: underline;
}

.pb-getband-text a:hover {
    text-decoration: none
}

.pb-getband-media {
    border-radius: 18px;
    overflow: hidden;
    background: #1a2a4d;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.pb-getband-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 588 / 470;
    display: block;
    object-fit: cover;
}

/* --- Mission CTA --- */
.footer-cta-area.pb-cta {
    padding-top: 100px;
}

.pb-cta .create-card {
    padding: 86px 72px;
}

.pb-cta .create-heading .accent {
    color: #16399e;
}

.pb-cta .create-actions {
    display: flex;
    justify-content: center;
}

/* --- PB responsive --- */
@media (max-width: 991.98px) {
    .pb-hero {
        padding: 130px 24px 60px;
    }

    .pb-hero-heading {
        font-size: 38px;
    }

    .pb-heading,
    .pb-getband-heading {
        font-size: 30px;
    }

    .pb-types-title {
        font-size: 32px;
        letter-spacing: -1.6px;
    }

    .pb-lead {
        font-size: 21px;
        line-height: 31px;
    }

    .pb-hero-media,
    .pb-types-media,
    .pb-getband-media {
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .pb-badge {
        width: 92px;
        height: 92px;
        font-size: 11px;
    }
}

@media (max-width: 767.98px) {
    .pb-hero-heading {
        font-size: 30px;
    }

    .pb-wholesale,
    .pb-types,
    .pb-industries,
    .pb-why,
    .pb-getband {
        padding: 56px 0;
    }

    .pb-heading,
    .pb-getband-heading {
        font-size: 26px;
    }

    .pb-eyebrow {
        font-size: 17px;
    }

    .pb-types-title {
        font-size: 28px;
    }

    .pb-hero-actions .cta-btn {
        width: 100%;
    }

    .pb-stat-row {
        gap: 24px;
    }

    .footer-cta-area.pb-cta {
        padding-top: 60px;
    }

    .pb-cta .create-card {
        padding: 56px 28px;
    }
}

/* =================================================================
   === Butter Dollops page ===
   ================================================================= */

.bd-heading .accent-blue-solid,
.bd-flavors-head .accent-blue-solid,
.bd-getbulk .accent-blue-solid,
.bd-what .accent-blue-solid,
.bd-benefits-head .accent-blue-solid {
    color: #16399e;
}

.bd-seediff-heading .accent-yellow {
    color: var(--c-yellow);
}

/* --- Hero (navy) --- */
.bd-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
}

.bd-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.bd-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.bd-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bd-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.bd-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.bd-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.bd-breadcrumb a:hover {
    color: #fff;
}

.bd-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 20px;
}

.bd-hero-heading .accent {
    color: var(--c-yellow);
}

.bd-hero-lead {
    max-width: 640px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 26px;
}

.bd-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.bd-hero-media {
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(152deg, #f0dca8 0%, #e0bd6a 50%, #c79a3e 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.bd-hero-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 578 / 380;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

/* --- Shared --- */
.bd-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.bd-heading--center {
    text-align: center;
}






/* --- Dollop Flavors (white gallery) --- */










/* --- Get Bulk (cream, centered stats) --- */

.bd-getbulk-inner {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.bd-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: .4px;
    color: #16399e;
    margin-bottom: 14px;
}

.bd-stat-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 56px;
    border-top: 1px solid rgba(12, 27, 61, .12);
    padding-top: 32px;
    margin-top: 32px;
}

.bd-stat {
    text-align: center;
}

.bd-stat-num {
    display: block;
    font-size: 34px;
    line-height: 1.1;
    color: #16399e;
    margin-bottom: 4px;
}

.bd-stat-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 19.44px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #3a4252;
    max-width: 160px;
}

/* --- What Is (white, 2-col with image) --- */



/* --- Built for high-volume service (image cards + CTA panel) --- */
.bd-serve {
    background: #fff;
    padding: 90px 0;
}

.bd-serve-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 39.9px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    text-align: center;
    margin-bottom: 48px;
}

.bd-serve-title .accent-blue-solid {
    color: #16399e;
}

.bd-serve-row {
    --bs-gutter-x: 30px;
    --bs-gutter-y: 30px;
}

/* card */
.bd-serve-card {
    position: relative;
    display: block;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: var(--c-navy);
    box-shadow: 0 18px 34px -22px rgba(13, 44, 84, .45);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.bd-serve-card:hover,
.bd-serve-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 26px 44px -24px rgba(13, 44, 84, .55);
}

.bd-serve-card img {
    width: 100%;
    height: 100%;
    min-height: 271px;
    aspect-ratio: 393 / 270;
    object-fit: cover;
    display: block;
}

.bd-serve-bar {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 12px 12px 12px 16px;
    box-shadow: 0 8px 20px -12px rgba(13, 44, 84, .4);
}

.bd-serve-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    line-height: 18.13px;
    color: var(--c-navy);
}

.bd-serve-arrow {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: transform .2s ease;
}

.bd-serve-card:hover .bd-serve-arrow {
    transform: translateX(3px);
}

/* CTA panel */
.bd-serve-cta {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 40px;
    background: #0054a4;
    border-radius: 16px;
    padding: 40px 36px;
    box-shadow: 0 18px 34px -22px rgba(13, 44, 84, .45);
    /* Positive, so the panel paints over the section background and its
       decorative shape can sit behind the copy. */
    overflow: hidden;
    position: relative;
    z-index: 9
}
.bd-serve-cta-shape{
    position: absolute;
    right: 0;
    top: 0;
    z-index: -9
}
.bd-serve-cta-text {
    flex: 1 1 auto;
    max-width: 425px;
}

.bd-serve-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 11.5px;
    line-height: 18.63px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--c-yellow);
    margin-bottom: 16px;
}

.bd-serve-cta-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 25px;
    line-height: 28.75px;
    letter-spacing: -.3px;
    color: #fff;
    margin-bottom: 16px;
}

.bd-serve-cta-desc {
    font-size: 15px;
    line-height: 24.75px;
    color: rgba(255, 255, 255, .74);
    margin: 0;
}

.bd-serve-cta-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 1199.98px) {
    .bd-serve-cta {
        gap: 28px;
        padding: 32px 28px;
    }

    .bd-serve-cta-title {
        font-size: 22px;
        line-height: 26px;
    }
}

@media (max-width: 991.98px) {
    .bd-serve {
        padding: 70px 0;
    }

    .bd-serve-title {
        font-size: 30px;
        line-height: 36px;
        margin-bottom: 36px;
    }

    .bd-serve-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .bd-serve-cta-text {
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    .bd-serve {
        padding: 56px 0;
    }

    .bd-serve-title {
        font-size: 26px;
        line-height: 32px;
    }

    .bd-serve-row {
        --bs-gutter-y: 20px;
    }

    .bd-serve-bar {
        right: 10px;
        bottom: 10px;
        left: 10px;
        padding: 10px 10px 10px 13px;
    }

    .bd-serve-name {
        font-size: 13.5px;
    }

    .bd-serve-cta {
        padding: 28px 24px;
    }

    .bd-serve-cta-title {
        font-size: 20px;
        line-height: 25px;
    }

    .bd-serve-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* --- Benefits (white, 3 ghost columns) --- */
.bd-benefits {
    background: #faf6ec;
    padding: 0px 0 90px;
}

.bd-benefits-head {
    max-width: 880px;
    margin-bottom: 48px;
}

.bd-ben-col {
    position: relative;
    padding-top: 8px;
}

.bd-ben-col::before {
    content: "";
    position: absolute;
    top: 12px;
    right: -12px;
    width: 1px;
    height: 200px;
    background: rgba(12, 27, 61, .12);
}

.bd-ben-grid > div:last-child .bd-ben-col::before {
    display: none;
}

.bd-ben-num {
    display: block;
    font-family: 'Baloo 2', 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 34px;
    line-height: 1;
    letter-spacing: -1.36px;
    color: rgba(0, 30, 59, .43);
    margin-bottom: 16px;
}

.bd-ben-grid > div:nth-child(2) .bd-ben-num {
    color: #004d96;
}

.bd-ben-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -.96px;
    text-transform: uppercase;
    color: rgba(0, 30, 59, .82);
    margin-bottom: 14px;
}

.bd-ben-text {
    font-size: 16px;
    line-height: 24px;
    color: #3a4252;
    margin: 0;
}

/* --- See The Difference (navy split) --- */

.bd-seediff-row {
    --bs-gutter-x: 64px;
}

.bd-seediff .cta-btn {
    box-shadow: 0 14px 30px -12px rgba(255, 210, 0, .6);
    margin-top: 12px;
}



.bd-seediff-text a {
    color: var(--c-yellow);
    font-weight: 600;
    text-decoration: underline;
}

.bd-seediff-text a:hover {
    text-decoration: none
}

.bd-seediff-media {
    border-radius: 18px;
    overflow: hidden;
    background: #1a2a4d;
    box-shadow: -14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.bd-seediff-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 588 / 470;
    display: block;
    object-fit: cover;
}

/* --- Mission CTA --- */
.footer-cta-area.bd-cta {
    padding-top: 100px;
}

.bd-cta .create-card {
    padding: 86px 72px;
}

.bd-cta .create-heading .accent {
    color: #16399e;
}

.bd-cta .create-actions {
    display: flex;
    justify-content: center;
}

/* --- BD responsive --- */
@media (max-width: 991.98px) {
    .bd-hero {
        padding: 130px 24px 60px;
    }

    .bd-hero-heading {
        font-size: 38px;
    }

    .bd-heading,

    .bd-hero-media,
    .bd-seediff-media {
        margin-right: 14px;
        margin-bottom: 14px;
    }

    .bd-ben-col::before {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .bd-hero-heading {
        font-size: 30px;
    }

    .bd-flavors,
    .bd-getbulk,
    .bd-benefits,


    .bd-heading,

    .bd-eyebrow {
        font-size: 17px;
    }

    .bd-stat-row {
        gap: 28px;
    }

    .bd-hero-actions .cta-btn {
        width: 100%;
    }

    .footer-cta-area.bd-cta {
        padding-top: 60px;
    }

    .bd-cta .create-card {
        padding: 56px 28px;
    }
}

/* --- Butter Dollops: flavor-section fixes --- */

.bd-getbulk-inner {
    text-align: left;
    max-width: none;
    margin: 0;
}

.bd-lead {
    font-size: 16.5px;
    line-height: 28px;
    color: #3a4252;
    margin-bottom: 0;
}

.bd-getbulk .bd-getbulk-row {
    --bs-gutter-x: 72px;
}

.bd-getbulk .bd-eyebrow {
    font-size: 13px;
    line-height: 21px;
    margin-bottom: 14px;
}

.bd-getbulk .bd-heading {
    font-size: 38px;
    line-height: 39.9px;
    letter-spacing: -.5px;
    margin-bottom: 20px;
}

.bd-getbulk-lead {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 25px;
    line-height: 37.5px;
    color: var(--c-navy);
    margin: 0;
}

.bd-getbulk .bd-stat-row {
    justify-content: flex-start;
    gap: 40px;
    padding-top: 25px;
    margin-top: 28px;
}

.bd-getbulk .bd-stat {
    text-align: left;
}

.bd-getbulk .bd-stat-num {
    font-size: 30px;
}

/* Category cards (Something Sweet / Salty & Savory / Add Some Spice / Feeling Fruity) */
.bd-cat-grid {
    margin-top: 44px;
}

.bd-cat-card {
    height: 100%;
    padding: 30px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.00);
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, 0.40);
    border: 1px solid #ddd
}

.bd-cat-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 12px;
}

.bd-cat-text {
    font-size: 16px;
    line-height: 26px;
    color: #3a4252;
    margin: 0;
}

.bd-cat-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.bd-cat-text a:hover {
    text-decoration: none
}

@media (max-width: 991.98px) {
    .bd-getbulk .col-lg-6:first-child {
        margin-bottom: 8px;
    }
}

/* =================================================================
   === Compound Butter for Sale page ===
   ================================================================= */

.cbs-heading .accent-blue-solid,
.cbs-flavors-head .accent-blue-solid,
.cbs-why-head .accent-blue-solid,
.cbs-serve-head .accent-blue-solid,
.cbs-types-head .accent-blue-solid {
    color: #16399e;
}

/* --- Hero (navy) --- */
.cbs-hero {
    position: relative;
    background: var(--c-navy);
    padding: 150px 24px 90px;
    overflow: hidden;
}

.cbs-hero .hero-overlay {
    background:
        radial-gradient(120% 60% at 88% 6%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .375) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
}

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

.cbs-breadcrumb ol {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .6);
}

.cbs-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cbs-breadcrumb li:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, .3);
}

.cbs-breadcrumb li[aria-current="page"] {
    color: var(--c-yellow);
}

.cbs-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.cbs-breadcrumb a:hover {
    color: #fff;
}

.cbs-hero-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 1.03;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 20px;
}

.cbs-hero-heading .accent {
    color: var(--c-yellow);
}

.cbs-hero-lead {
    max-width: 640px;
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 26px;
}

.cbs-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.cbs-hero-media {
    position: relative;
    border-radius: 18px;
    background: linear-gradient(152deg, #f0dca8 0%, #e0bd6a 50%, #c79a3e 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.cbs-hero-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 578 / 380;
    display: block;
    border-radius: 18px;
    object-fit: cover;
}

.cbs-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 112px;
    height: 112px;
    background: var(--c-yellow);
    color: var(--c-navy);
    border-radius: 56px;
    transform: rotate(-6deg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Shantell Sans', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 13.8px;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
    z-index: 3;
}

/* --- Shared --- */
.cbs-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.cbs-text {
    font-size: 16.5px;
    line-height: 28px;
    color: #3a4252;
    margin: 0;
}

/* --- Our Process (white, 2-col) --- */
.cbs-process {
    background: #fff;
    padding: 80px 0;
}

.cbs-process-media {
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(152deg, #f0dca8 0%, #e0bd6a 50%, #c79a3e 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.cbs-process-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* --- Popular Flavors (cream, 3-column list) --- */
.cbs-flavors {
    background: #fff;
    padding: 80px 0;
}

.cbs-flavors-head {
    margin-bottom: 40px;
}

.cbs-flavor-col {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cbs-flavor {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(12, 27, 61, .12);
}

.cbs-flavor-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-size: 11px;
}

.cbs-flavor-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--c-navy);
}

/* --- Why Choose (white, 2-col top + 3 cards) --- */
.cbs-why {
    padding: 80px 0;
}

.cbs-why-top {
    margin-bottom: 48px;
}

.cbs-why-lead {
    font-family: 'Playfair Display', serif;
    font-size: 25px;
    line-height: 37.5px;
    color: var(--c-navy);
    margin: 0;
}

.cbs-why-lead-body {
    font-size: 16px;
    line-height: 26px;
    color: #3a4252;
    margin: 0 0 16px;
}

.cbs-why-lead-body:last-child {
    margin-bottom: 0;
}

.cbs-why-lead-body a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.cbs-why-lead-body a:hover {
    text-decoration: none
}

.cbs-why-card {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    box-shadow: 0 20px 45px -30px rgba(12, 27, 61, .5);
    padding: 30px 32px 34px;
}

.cbs-why-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-size: 20px;
    margin-bottom: 30px;
}

.cbs-why-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 10px;
}

.cbs-why-text {
    font-size: 15.5px;
    line-height: 25.58px;
    color: #3a4252;
    margin: 0;
}

/* --- Who We Serve (white, 4-col pills) --- */
.cbs-serve {
    background: #fff;
    padding: 80px 0;
}

.cbs-serve-head {
    margin-bottom: 40px;
}

.cbs-serve-item {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 14px;
    padding: 16px 17px;
}

.cbs-serve-item:hover {
    background: var(--c-navy);
    color: #fff;
    border-color: var(--c-navy)
}

.cbs-serve-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-size: 11px;
}

.cbs-serve-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    line-height: 18.13px;
    color: var(--c-navy);
}

.cbs-serve-item:hover .cbs-serve-title {
    color: #fff
}

/* --- Popular Types of Compound Butter (cream, alternating rows + connector) --- */
.cbs-types {
    background: #faf6ec;
    padding: 80px 0;
}

.cbs-heading--center {
    text-align: center;
}

.cbs-types-head {
    margin-bottom: 56px;
}

.cbs-types-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* yellow snaking connector behind the rows */


.cbs-type-row {
    position: relative;
    z-index: 1;
}

.cbs-type-media {
    position: relative;
    padding: 7px;
    background: rgba(255, 255, 255, .12);
    border-radius: 160px 173px 453px 479px;
}

.cbs-type-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 540 / 400;
    display: block;
    object-fit: cover;
    border-radius: 154px 167px 447px 473px;
}

.cbs-type-body {
    position: relative;
    padding: 12px 8px;
}

.cbs-type-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 10px 18px;
    background: #16399e;
    color: #fff;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
    margin-bottom: 18px;
    box-shadow: 0 8px 9px rgba(13, 44, 84, .22);
}

.cbs-type-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 14px;
}

.cbs-type-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin: 0;
}

@media (max-width: 991.98px) {
    .cbs-types-list {
        gap: 32px;
    }

    .cbs-types-list::before {
        display: none;
    }

    .cbs-type-media {
        margin-bottom: 20px;
    }

    .cbs-type-row {
        flex-direction: column-reverse;
    }

    .cbs-type-row--media-first {
        flex-direction: column;
    }
}

@media (max-width: 767.98px) {
    .cbs-types {
        padding: 56px 0;
    }

    .cbs-type-title {
        font-size: 22px;
    }

    .cbs-type-media {
        border-radius: 90px 100px 240px 250px;
    }

    .cbs-type-media img {
        border-radius: 84px 94px 234px 244px;
    }
}

/* --- Compound Butter for Sale: Mission CTA padding --- */
.footer-cta-area.cbs-cta {
    padding-top: 100px;
}

.cbs-cta .create-card {
    padding: 86px 72px;
}

.cbs-cta .create-heading .accent {
    color: #16399e;
}

.cbs-cta .create-actions {
    display: flex;
    justify-content: center;
}

@media (max-width: 767.98px) {
    .footer-cta-area.cbs-cta {
        padding-top: 60px;
    }

    .cbs-cta .create-card {
        padding: 56px 28px;
    }
}

/* ============================================================
   === Where to Buy page ===
   ============================================================ */

/* --- Hero --- */
.wtb-hero {
    position: relative;
    background: var(--c-navy);
    padding: 160px 0 90px;
    overflow: hidden;
}

.wtb-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 55% at 85% 0%, rgba(255, 210, 0, .12), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .38) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
    pointer-events: none;
}

.wtb-hero-row {
    position: relative;
    z-index: 1;
}

.wtb-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
}

.wtb-breadcrumb li {
    color: rgba(255, 255, 255, .6);
}

.wtb-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 9px;
    color: rgba(255, 255, 255, .5);
}

.wtb-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.wtb-breadcrumb li[aria-current] {
    color: var(--c-yellow);
}

.wtb-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 55px;
    line-height: 56.65px;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 22px;
}

.wtb-hero-lead {
    font-size: 18px;
    line-height: 28.8px;
    color: rgba(255, 255, 255, .84);
    max-width: 580px;
    margin-bottom: 30px;
}

.wtb-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.wtb-hero-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(152deg, #e9d49a 0%, #d8b15e 50%, #b98a36 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.wtb-hero-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 578 / 380;
    object-fit: cover;
    display: block;
}

.wtb-hero-badge {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 108px;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--c-yellow);
    border-radius: 54px;
    transform: rotate(-6deg);
    font-family: 'Shantell Sans', cursive;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 14.38px;
    color: var(--c-navy);
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
}

/* --- Info Cards (cream) --- */
.wtb-info {
    background: #faf6ec;
    padding: 80px 0;
}

.wtb-info-card {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    padding: 42px;
    flex-direction: column;
    align-items: flex-start;
}

.wtb-info-num {
    font-weight: 800;
    font-size: 44px;
    letter-spacing: -1.36px;
    line-height: 1;
    margin-bottom: 8px;
    -webkit-text-fill-color: white;
    -webkit-text-stroke: 1px #001E3B;
}

.wtb-info-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 32.28px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.wtb-info-text {
    font-size: 16.5px;
    line-height: 26.4px;
    color: #3a4252;
    margin-bottom: 26px;
}

.wtb-info-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.wtb-info-text a:hover {
    text-decoration: none
}

.wtb-info-card .cta-btn {
    margin-top: auto;
}

/* --- Built-to-spec CTA (navy band) --- */
.wtb-spec {
    padding: 0 0 80px;
}

.wtb-spec-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 40px;
    background: var(--c-navy);
    border-radius: 18px;
    padding: 44px 48px;
    box-shadow: 0 26px 50px -30px rgba(12, 27, 61, .55);
}

.wtb-spec-text {
    flex: 1 1 auto;
    max-width: 610px;
}

.wtb-spec-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 27px;
    line-height: 32.4px;
    letter-spacing: -.3px;
    color: #fff;
    margin-bottom: 11px;
}

.wtb-spec-title .accent-yellow {
    color: var(--c-yellow);
}

.wtb-spec-desc {
    font-size: 15.5px;
    line-height: 26.35px;
    color: rgba(255, 255, 255, .76);
    margin: 0;
}

.wtb-spec-action {
    flex: 0 0 auto;
}

.wtb-spec-action .cta-btn {
    white-space: nowrap;
    box-shadow: 0 14px 30px -12px rgba(255, 210, 0, .6);
}

/* decorative yellow glows */
.wtb-spec-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 210, 0, .32) 0%, rgba(255, 210, 0, 0) 62%);
}

.wtb-spec-glow_sm {
    width: 38px;
    height: 38px;
    top: 24px;
    right: 48px;
}

.wtb-spec-glow_lg {
    width: 71px;
    height: 71px;
    top: 97px;
    left: 738px;
}

@media (max-width: 1199.98px) {
    .wtb-spec-glow_lg {
        left: auto;
        right: 30%;
    }
}

@media (max-width: 991.98px) {
    .wtb-spec-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        padding: 36px 32px;
    }

    .wtb-spec-title {
        font-size: 24px;
        line-height: 30px;
    }
}

@media (max-width: 767.98px) {
    .wtb-spec {
        padding-bottom: 56px;
    }

    .wtb-spec-card {
        padding: 28px 24px;
    }

    .wtb-spec-title {
        font-size: 21px;
        line-height: 27px;
    }

    .wtb-spec-desc {
        font-size: 15px;
        line-height: 25px;
    }

    .wtb-spec-action,
    .wtb-spec-action .cta-btn {
        width: 100%;
    }

    .wtb-spec-glow_lg {
        display: none;
    }
}

/* --- Find Distributors (cream) --- */
.wtb-find {
    background: #faf6ec;
    padding: 80px 0;
}

.wtb-find-section {
    padding: 100px 0;
}

.wtb-find-subhead {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 40.28px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 15px;
}

.wtb-find-subhead .accent-blue-solid {
    display: block;
}

.wtb-find-text {
    font-size: 16.5px;
    line-height: 26.4px;
    color: #3a4252;
    margin-bottom: 24px;
}

.wtb-find-contact {
    border-top: 1px solid rgba(12, 27, 61, .12);
    padding-top: 31.6px;
}

.wtb-find-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #16399e;
    margin-bottom: 7px;
}

.wtb-find-line {
    margin-bottom: 6px;
}

.wtb-find-line a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 27.2px;
    color: var(--c-navy);
}
.wtb-find-line a:hover{
    text-decoration: underline;
    color: #16399e
}
.wtb-form-card {
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 22px;
    padding: 43px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
}

.wtb-form-card label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #3a4252;
    margin-bottom: 7px;
}

.wtb-form-card input[type="text"],
.wtb-form-card input[type="email"],
.wtb-form-card input[type="tel"],
.wtb-form-card select,
.wtb-form-card textarea {
    width: 100%;
    height: 50px;
    background: #F6F8FD;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 14px 15px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 20px;
    color: #1a2033;
}

.wtb-form-card select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #1a2033 50%), linear-gradient(135deg, #1a2033 50%, transparent 50%);
    background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 40px;
}

.wtb-form-card input:focus,
.wtb-form-card select:focus,
.wtb-form-card textarea:focus {
    outline: none;
    border-color: #16399e;
    box-shadow: 0 0 0 3px rgba(22, 57, 158, .18);
}

.wtb-req {
    color: inherit;
}

/* --- Products of interest checkbox group --- */
.wtb-check-set {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.wtb-check-set legend {
    float: left;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 19.2px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #3a4252;
    margin-bottom: 13px;
}

.wtb-check-row {
    clear: both;
    --bs-gutter-x: 20px;
    --bs-gutter-y: 12px;
}

.wtb-check {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.wtb-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: #16399e;
    border: 1px solid #767676;
    border-radius: 2.5px;
    background: #fff;
    cursor: pointer;
}

.wtb-check label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14.5px;
    line-height: 20.3px;
    letter-spacing: 0;
    text-transform: none;
    color: #1a2033;
    margin: 0;
    cursor: pointer;
}

.wtb-form-card textarea {
    min-height: 120px;
    resize: vertical;
}

.wtb-form-foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-top: 22px;
    text-align: center
}

.wtb-form-note {
    font-size: 13px;
    line-height: 20.8px;
    color: #3a4252;
    margin: 0;
}

/* --- Where to Buy responsive --- */
@media (max-width: 991.98px) {
    .wtb-hero {
        padding: 80px 0 64px;
    }

    .wtb-hero-title {
        font-size: 40px;
        line-height: 44px;
    }

    .wtb-hero-card {
        margin-top: 32px;
    }

    .wtb-info-title,
    .wtb-find-subhead {
        font-size: 30px;
        line-height: 36px;
    }
}

@media (max-width: 767.98px) {

    .wtb-hero,
    .wtb-info,
    .wtb-find,
    .wtb-find-section {
        padding: 56px 0;
    }

    .wtb-info-card,
    .wtb-form-card {
        padding: 28px;
    }
}

.wtb-info-title .accent-blue-solid,
.wtb-find-subhead .accent-blue-solid {
    color: #16399e;
}

.wtb-find-subhead .accent-blue-italic {
    color: #16399e;
}

/* --- Where to Buy: CTA card padding (Figma px-[72px] py-[86px]) --- */
.wtb-cta .create-card {
    padding: 86px 72px;
}

@media (max-width: 767.98px) {
    .wtb-cta .create-card {
        padding: 56px 28px;
    }
}

/* ============================================================
   === Sauces page ===
   ============================================================ */

/* --- Hero --- */
.sau-hero {
    position: relative;
    background: var(--c-navy);
    padding: 122px 0 90px;
    overflow: hidden;
}

.sau-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(55% 50% at 88% 0%, rgba(255, 210, 0, .1), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .35) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
    pointer-events: none;
}

.sau-hero-row {
    position: relative;
    z-index: 1;
}

.sau-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
}

.sau-breadcrumb li {
    color: rgba(255, 255, 255, .6);
}

.sau-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 9px;
    color: rgba(255, 255, 255, .5);
}

.sau-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.sau-breadcrumb li[aria-current] {
    color: var(--c-yellow);
}

.sau-hero-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 33.6px;
    color: #fff;
    margin-bottom: 6px;
}

.sau-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 50.47px;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 22px;
}

.sau-hero-lead {
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    max-width: 640px;
    margin-bottom: 18px;
}

.sau-hero-actions {
    margin-top: 12px;
}

.sau-hero-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(142deg, #e9d49a 0%, #d8b15e 50%, #b98a36 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.sau-hero-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 578 / 553;
    object-fit: cover;
    display: block;
}

.sau-hero-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 118px;
    height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--c-yellow);
    border-radius: 59px;
    transform: rotate(-6deg);
    font-family: 'Shantell Sans', cursive;
    font-weight: 700;
    font-size: 12px;
    line-height: 13.8px;
    color: var(--c-navy);
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
}

/* --- Shared section bits --- */
.sau-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 39.9px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 14px;
}

.sau-heading--light {
    color: #fff;
}

.sau-heading .accent-blue-solid {
    color: #16399e;
}

.sau-heading .accent-yellow {
    color: var(--c-yellow);
}

.sau-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 16px;
}

.sau-text-bold {
    font-size: 16.5px;
    line-height: 26.73px;
    font-weight: 700;
    color: var(--c-navy);
    margin-bottom: 14px;
}

.sau-check-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sau-check-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.sau-check-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-size: 11px;
    margin-top: 1px;
}

.sau-check-link {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16.5px;
    line-height: 23.93px;
    color: #16399e;
    text-decoration: underline;
}

.sau-check-text {
    font-size: 16.5px;
    line-height: 23.93px;
    color: #1a2033;
}

.sau-check-text strong {
    color: var(--c-navy);
}

.sau-check-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.sau-check-list--light .sau-check-text {
    color: rgba(255, 255, 255, .9);
}

.sau-media {
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(150deg, #e9d49a 0%, #d8b15e 55%, #b98a36 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.sau-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 590 / 393;
    object-fit: cover;
    display: block;
}

.sau-actions {
    margin-top: 22px;
}

/* --- What We Do Best --- */
.sau-best {
    background: #fff;
    padding: 80px 0;
}

/* --- Capabilities (navy) --- */
.sau-capabilities {
    background: #0054A4;
    padding: 80px 0;
}

/* --- Formats --- */
.sau-formats {
    background: #fff;
    padding: 80px 0;
}

/* --- Quik-Creations (cream) --- */
.sau-quik {
    background: #faf6ec;
    padding: 80px 0;
}

.sau-quik-row {
    margin-bottom: 64px;
}

.sau-quik .sau-media img {
    aspect-ratio: 590 / 590;
}

.sau-subhead {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 26px;
    line-height: 27.3px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.sau-subhead .accent-blue-italic {
    color: #16399e;
}

.sau-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}


.sau-why-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 26px;
    line-height: 27.3px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 32px;
}

.sau-why-heading .accent-blue-solid {
    color: #16399e;
}

.sau-why-col {
    position: relative;
    padding: 0 32px;
    height: 100%;
}

.sau-why-cols > [class*="col-"]:not(:last-child) .sau-why-col::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 249px;
    background: rgba(12, 27, 61, .18);
}

.sau-why-cols > [class*="col-"]:first-child .sau-why-col {
    padding-left: 0;
}

.sau-why-num {
    display: block;
    font-family: 'Baloo 2', cursive;
    font-size: 34px;
    letter-spacing: -1.36px;
    line-height: 61px;
    color: rgba(0, 30, 59, .43);
    text-transform: uppercase;
}

.sau-why-num--solid {
    color: #004d96;
    opacity: 1;
}

.sau-why-col--muted .sau-why-title,
.sau-why-col--muted .sau-why-text {
    opacity: .69;
}

.sau-why-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -.96px;
    text-transform: uppercase;
    color: #001e3b;
    margin-bottom: 20px;
}

.sau-why-text {
    font-size: 16px;
    line-height: 24px;
    color: #3a4252;
    margin: 0;
}

/* --- Sauces CTA card padding (Figma px-[72px] py-[86px]) --- */
.sau-cta .create-card {
    padding: 86px 72px;
}

/* --- Sauces responsive --- */
@media (max-width: 991.98px) {
    .sau-hero {
        padding: 80px 0 64px;
    }

    .sau-hero-title {
        font-size: 38px;
        line-height: 42px;
    }

    .sau-hero-card,
    .sau-media {
        margin-top: 28px;
    }

    .sau-heading,
    .sau-why-heading,
    .sau-subhead {
        font-size: 30px;
        line-height: 36px;
    }

    .sau-why-col {
        padding: 0;
        margin-bottom: 32px;
    }

    .sau-why-cols > [class*="col-"]:not(:last-child) .sau-why-col::after {
        display: none;
    }
}

@media (max-width: 767.98px) {

    .sau-hero,
    .sau-best,
    .sau-capabilities,
    .sau-formats,
    .sau-quik {
        padding: 56px 0;
    }

    .sau-cta .create-card {
        padding: 56px 28px;
    }
}

/* ============================================================
   === Gravies page ===
   ============================================================ */

/* --- Hero --- */
.gra-hero {
    position: relative;
    background: var(--c-navy);
    padding: 122px 0 90px;
    overflow: hidden;
}

.gra-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(55% 50% at 88% 0%, rgba(255, 210, 0, .1), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .35) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
    pointer-events: none;
}

.gra-hero-row {
    position: relative;
    z-index: 1;
}

.gra-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
}

.gra-breadcrumb li {
    color: rgba(255, 255, 255, .6);
}

.gra-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 9px;
    color: rgba(255, 255, 255, .5);
}

.gra-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.gra-breadcrumb li[aria-current] {
    color: var(--c-yellow);
}

.gra-hero-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 33.6px;
    color: #fff;
    margin-bottom: 6px;
}

.gra-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 50.47px;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 22px;
}

.gra-hero-lead {
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    max-width: 640px;
    margin-bottom: 18px;
}

.gra-hero-actions {
    margin-top: 12px;
}

.gra-hero-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(146deg, #cda06a 0%, #9c6b34 50%, #6e4720 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.gra-hero-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 578 / 493;
    object-fit: cover;
    display: block;
}

.gra-hero-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 116px;
    height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--c-yellow);
    border-radius: 58px;
    transform: rotate(-6deg);
    font-family: 'Shantell Sans', cursive;
    font-weight: 700;
    font-size: 12px;
    line-height: 13.8px;
    color: var(--c-navy);
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
}

/* --- Shared bits --- */
.gra-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 39.9px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 14px;
}

.gra-heading--light {
    color: #fff;
}

.gra-heading--center {
    text-align: center;
}

.gra-heading .accent-blue-solid {
    color: #16399e;
}

.gra-heading .accent-yellow {
    color: var(--c-yellow);
}

.gra-heading .accent-white {
    color: #fff;
}

.gra-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 16px;
}

.gra-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.gra-media {
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(150deg, #cda06a 0%, #9c6b34 55%, #6e4720 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.gra-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 590 / 393;
    object-fit: cover;
    display: block;
}

/* --- Comfort & Convenience --- */
.gra-comfort {
    background: #fff;
    padding: 80px 0;
}

/* --- Gravy Flavors (cream) --- */
.gra-flavors {
    background: #faf6ec;
    padding: 80px 0;
}

.gra-flavors-head {
    max-width: 880px;
    margin-bottom: 36px;
}

.gra-intro {
    font-size: 18px;
    line-height: 29.16px;
    color: #3a4252;
    margin: 0;
}

.gra-flav-card {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
}

.gra-flav-media {
    background: #fff8e3;
}

.gra-flav-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 380 / 295;
    object-fit: cover;
    display: block;
}

.gra-flav-body {
    padding: 30px;
}

.gra-flav-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 21px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 15px;
}

.gra-flav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gra-flav-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.gra-flav-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-size: 10px;
    margin-top: 3px;
}

.gra-flav-text {
    font-size: 16px;
    line-height: 25.92px;
    color: #3a4252;
}

.gra-flavors-cta {
    margin-top: 12px;
}

/* --- Formats (blue) --- */
.gra-formats {
    background: #0054a4;
    padding: 80px 0;
}

.gra-formats .gra-heading {
    margin-bottom: 48px;
}

.gra-fmt-card {
    height: 100%;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .35);
    display: block;
    transition: all 0.4s
}

.gra-fmt-card:hover {
    transform: translateY(-5px)
}

.gra-fmt-media {
    background: #faf6ec;
}

.gra-fmt-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 560 / 342;
    object-fit: cover;
    display: block;
}

.gra-fmt-body {
    background: var(--c-yellow);
    padding: 28px 30px;
    height: 100%
}

.gra-fmt-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 18.9px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 10px;
}

.gra-fmt-arrow {
    font-weight: 700;
    font-size: 17px;
}

.gra-fmt-text {
    font-size: 14.5px;
    line-height: 23.2px;
    color: var(--c-navy);
    margin: 0;
}

.gra-fmt-text strong {
    font-weight: 700;
}

/* --- Why Work With (cream, ghost columns) --- */
.gra-why {
    background: #faf6ec;
    padding: 80px 0;
}

.gra-why-head {
    margin-bottom: 48px;
}


.gra-why-col {
    position: relative;
    padding: 20px;
    height: 100%;
}

.gra-why-cols > [class*="col-"] .gra-why-col {
    border-right: 1px solid rgba(12, 27, 61, .18);
    border-bottom: 1px solid rgba(12, 27, 61, .18);
}

.gra-why-cols > [class*="col-"]:nth-child(3n + 1) .gra-why-col {
    padding-left: 0
}

.gra-why-cols > [class*="col-"]:nth-child(3n) .gra-why-col {
    padding-right: 0
}

.gra-why-cols > [class*="col-"]:nth-child(3n) .gra-why-col {
    border-right: 0
}

.gra-why-cols > [class*="col-"]:nth-last-child(-n + 3) .gra-why-col {
    border-bottom: 0
}

.gra-why-num {
    display: block;
    -webkit-text-fill-color: white;
    -webkit-text-stroke: 1px #001E3B;
    font-size: 40px;
    letter-spacing: -1.36px;
    line-height: 61px;
    color: rgba(0, 30, 59, .43);
    text-transform: uppercase;
    position: relative;
    font-weight: 800;
    transition: all 0.4s;
    z-index: 1;
	    display: block;
    -webkit-text-fill-color: #16399e;
}

.gra-why-num img {
    position: absolute;
    top: -15px;
    left: -20px;
    z-index: -9;
    visibility: visible;
    opacity: 1;
    transition: all 0.3s;
}

.gra-why-col:hover .gra-why-num {
    display: block;
    -webkit-text-fill-color: #16399e;
}

.gra-why-col:hover .gra-why-num img {
    visibility: visible;
    opacity: 1;
}

.gra-why-num--solid {
    color: #004d96;
    opacity: 1;
}

.gra-why-col--muted {
    opacity: 1;
    transition: all 0.4s
}

.gra-why-col--muted:hover {
    opacity: 1
}

.gra-why-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -.96px;
    text-transform: uppercase;
    color: #001e3b;
    margin-bottom: 20px;
}

.gra-why-text {
    font-size: 16px;
    line-height: 24px;
    color: #3a4252;
    margin: 0;
}

.gra-why-text a {
    color: #0054a4;
    font-weight: 700;
    text-decoration: underline;
}

.gra-why-text a:hover {
    text-decoration: none
}

/* --- Gravies CTA card padding (Figma px-[72px] py-[86px]) --- */
.gra-cta .create-card {
    padding: 86px 72px;
}

/* --- Gravies responsive --- */
@media (max-width: 991.98px) {
    .gra-hero {
        padding: 80px 0 64px;
    }

    .gra-hero-title {
        font-size: 38px;
        line-height: 42px;
    }

    .gra-hero-card,
    .gra-media {
        margin-top: 28px;
    }

    .gra-heading {
        font-size: 30px;
        line-height: 36px;
    }

    .gra-why-col {
        padding: 0;
        margin-bottom: 32px;
    }

    .gra-why-cols > [class*="col-"]:not(:last-child) .gra-why-col::after {
        display: none;
    }

    .gra-why-cols--top {
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

@media (max-width: 767.98px) {

    .gra-hero,
.gra-comfort,
.gra-flavors,
.gra-formats,
.gra-why{
        padding: 56px 0;
    }

    .gra-cta .create-card {
        padding: 56px 28px;
    }
}

/* ============================================================
   === Glazes page ===
   ============================================================ */

/* --- Hero --- */
.gla-hero {
    position: relative;
    background: var(--c-navy);
    padding: 122px 0 90px;
    overflow: hidden;
}

.gla-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(55% 50% at 88% 0%, rgba(255, 210, 0, .1), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .35) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
    pointer-events: none;
}

.gla-hero-row {
    position: relative;
    z-index: 1;
}

.gla-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
}

.gla-breadcrumb li {
    color: rgba(255, 255, 255, .6);
}

.gla-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 9px;
    color: rgba(255, 255, 255, .5);
}

.gla-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.gla-breadcrumb li[aria-current] {
    color: var(--c-yellow);
}

.gla-hero-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 33.6px;
    color: #fff;
    margin-bottom: 6px;
}

.gla-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 50.47px;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 22px;
}

.gla-hero-lead {
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    max-width: 640px;
    margin-bottom: 18px;
}

.gla-hero-actions {
    margin-top: 12px;
}

.gla-hero-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(151deg, #cda06a 0%, #9c6b34 50%, #6e4720 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.gla-hero-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 578 / 380;
    object-fit: cover;
    display: block;
}

.gla-hero-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 116px;
    height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--c-yellow);
    border-radius: 58px;
    transform: rotate(-6deg);
    font-family: 'Shantell Sans', cursive;
    font-weight: 700;
    font-size: 12px;
    line-height: 13.8px;
    color: var(--c-navy);
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
}

/* --- Shared bits --- */
.gla-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 39.9px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 14px;
}

.gla-heading--light {
    color: #fff;
}

.gla-heading--center {
    text-align: center;
}

.gla-heading .accent-blue-solid {
    color: #16399e;
}

.gla-heading .accent-yellow {
    color: var(--c-yellow);
}

.gla-heading .accent-white {
    color: #fff;
}

.gla-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 16px;
}

.gla-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.gla-media {
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(150deg, #cda06a 0%, #9c6b34 55%, #6e4720 100%);
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.gla-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 590 / 393;
    object-fit: cover;
    display: block;
}

/* --- Bring Sticky (white) --- */
.gla-intro-sec {
    background: #fff;
    padding: 80px 0;
}

/* --- Popular Flavor Profiles (cream) --- */
.gla-flavors {
    background: #faf6ec;
    padding: 80px 0;
}

.gla-flavors-head {
    max-width: 880px;
    margin: 0 auto 36px;
    text-align: center;
}

.gla-intro {
    font-size: 18px;
    line-height: 29.16px;
    color: #3a4252;
    max-width: 680px;
    margin: 0 auto;
}

.gla-flav-grid {
    justify-content: center;
}

.gla-flav-card {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
}

.gla-flav-media {
    background: #fff8e3;
}

.gla-flav-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 560 / 454;
    object-fit: cover;
    display: block;
}

.gla-flav-body {
    padding: 30px;
}

.gla-flav-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 21px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 15px;
}

.gla-flav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gla-flav-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.gla-flav-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-size: 10px;
    margin-top: 3px;
}

.gla-flav-text {
    font-size: 16px;
    line-height: 25.92px;
    color: #3a4252;
}

.gla-flavors-cta {
    margin-top: 36px;
    text-align: center;
}

/* --- Designed for Food Service (blue) --- */
.gla-formats {
    background: #0054a4;
    padding: 80px 0;
}

.gla-formats .gla-heading {
    margin-bottom: 48px;
}

.gla-fmt-card {
    height: 100%;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .35);
    display: flex;
    flex-direction: column;
    transition: all 0.4s
}

.gla-fmt-card:hover {
    transform: translateY(-10px)
}

.gla-fmt-media {
    background: #faf6ec;
}

.gla-fmt-media img {
    width: 100%;
    height: 223px;
    object-fit: cover;
    display: block;
}

.gla-fmt-body {
    background: var(--c-yellow);
    padding: 28px 30px;
    flex: 1 1 auto;
}

.gla-fmt-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 18.9px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 10px;
}

.gla-fmt-arrow {
    font-weight: 700;
    font-size: 17px;
}

.gla-fmt-text {
    font-size: 14.5px;
    line-height: 23.2px;
    color: var(--c-navy);
    margin: 0;
}

.gla-fmt-text strong {
    font-weight: 700;
}

/* --- Why Work With (cream, ghost columns) --- */
.gla-why {
    background: #faf6ec;
    padding: 80px 0;
}

.gla-why-head {
    margin-bottom: 48px;
    text-align: center;
}

.gla-why-cols--top {
    border-bottom: 1px solid rgba(12, 27, 61, .18);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.gla-why-col {
    position: relative;
    padding: 0 32px;
    height: 100%;
}

.gla-why-cols > [class*="col-"]:not(:last-child) .gla-why-col::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: rgba(12, 27, 61, .18);
}

.gla-why-cols > [class*="col-"]:first-child .gla-why-col {
    padding-left: 0;
}

.gla-why-num {
    display: block;
    font-family: 'Baloo 2', cursive;
    font-size: 34px;
    letter-spacing: -1.36px;
    line-height: 61px;
    color: rgba(0, 30, 59, .43);
    text-transform: uppercase;
}

.gla-why-num--solid {
    color: #004d96;
    opacity: 1;
}

.gla-why-col--muted .gla-why-title,
.gla-why-col--muted .gla-why-text {
    opacity: .69;
}

.gla-why-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -.96px;
    text-transform: uppercase;
    color: #001e3b;
    margin-bottom: 20px;
}

.gla-why-text {
    font-size: 16px;
    line-height: 24px;
    color: #3a4252;
    margin: 0;
}

.gla-why-text a {
    color: #0054a4;
    font-weight: 700;
    text-decoration: underline;
}

/* --- Glazes CTA card padding (Figma px-[72px] py-[86px]) --- */
.gla-cta .create-card {
    padding: 86px 72px;
}

/* --- Glazes responsive --- */
@media (max-width: 991.98px) {
    .gla-hero {
        padding: 80px 0 64px;
    }

    .gla-hero-title {
        font-size: 38px;
        line-height: 42px;
    }

    .gla-hero-card,
    .gla-media {
        margin-top: 28px;
    }

    .gla-heading {
        font-size: 30px;
        line-height: 36px;
    }

    .gla-why-col {
        padding: 0;
        margin-bottom: 32px;
    }

    .gla-why-cols > [class*="col-"]:not(:last-child) .gla-why-col::after {
        display: none;
    }

    .gla-why-cols--top {
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

@media (max-width: 767.98px) {

    .gla-hero,
.gla-intro-sec,
.gla-flavors,
.gla-formats,
.gla-why{
        padding: 56px 0;
    }

    .gla-cta .create-card {
        padding: 56px 28px;
    }
}

/* ============================================================
   === Fillings & Toppings page ===
   ============================================================ */

/* --- Hero --- */
.fat-hero {
    position: relative;
    background: var(--c-navy);
    padding: 160px 0 90px;
    overflow: hidden;
}

.fat-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(55% 50% at 88% 0%, rgba(255, 210, 0, .1), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .35) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
    pointer-events: none;
}

.fat-hero-row {
    position: relative;
    z-index: 1;
}

.fat-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    list-style: none;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
}

.fat-breadcrumb li {
    color: rgba(255, 255, 255, .6);
}

.fat-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 9px;
    color: rgba(255, 255, 255, .5);
}

.fat-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.fat-breadcrumb li[aria-current] {
    color: var(--c-yellow);
}

.fat-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 50.47px;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 22px;
}

.fat-hero-lead {
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    max-width: 640px;
    margin-bottom: 22px;
}

.fat-hero-card {
    border-radius: 18px;
    overflow: hidden;
    background: #e9e2d2;
    box-shadow: 14px 14px 0 -1px #ffd200;
}

.fat-hero-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 597 / 400;
    object-fit: cover;
    display: block;
}

/* --- Shared bits --- */
.fat-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 39.9px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.fat-heading--light {
    color: #fff;
}

.fat-heading--center {
    text-align: center;
}

.fat-heading .accent-blue-solid {
    color: #16399e;
}

.fat-heading .accent-yellow {
    color: var(--c-yellow);
}

.fat-heading .accent-yellow-italic {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: var(--c-yellow);
}

.fat-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 16px;
}

.fat-text:last-child {
    margin-bottom: 0;
}

.fat-media {
    border-radius: 18px;
    overflow: hidden;
    background: #e9e2d2;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.fat-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 590 / 393;
    object-fit: cover;
    display: block;
}

/* --- Flavorful Finishings (cream, process steps) --- */
.fat-finishings {
    background: #faf6ec;
    padding: 80px 0;
}

.fat-finishings .fat-heading {
    font-size: 38px;
}

.fat-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 12px 30px -18px rgba(12, 27, 61, .4);
}

.fat-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 32px;
    border-bottom: 1px solid rgba(12, 27, 61, .12);
}

.fat-step--last {
    border-bottom: 0;
}

.fat-step-num {
    flex-shrink: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 23px;
    line-height: 24.15px;
    color: var(--c-yellow);
}

.fat-step-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 17px;
    line-height: 27.54px;
    letter-spacing: -.2px;
    color: var(--c-navy);
    margin-bottom: 4px;
}

.fat-step-text {
    font-size: 15.5px;
    line-height: 24px;
    color: #3a4252;
    margin: 0;
}

/* --- What Are Fillings / Toppings (white, cream cards) --- */
.fat-what {
    background: #fff;
    padding: 80px 0;
}

.fat-what-card {
    height: 100%;
    background: #FBFCFF;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    padding: 43px;
}

.fat-what-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 27px;
    line-height: 28.35px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 18px;
}

.fat-what-title .accent-blue-solid {
    color: #16399e;
}

.fat-what-text {
    font-size: 16px;
    line-height: 25.92px;
    color: #3a4252;
    margin-bottom: 16px;
}

.fat-what-text:last-child {
    margin-bottom: 0;
}

.fat-what-text a {
    color: #16399e;
    font-weight: 800;
    text-decoration: underline;
}

.fat-what-text a:hover {
    text-decoration: none
}

/* --- Satisfy Guests (cream) --- */
.fat-satisfy {
    background: #faf6ec;
    padding: 80px 0;
}

/* --- Industry (white, alternating rows) --- */
.fat-industry {
    background: #fff;
    padding: 80px 0;
}

.fat-industry-head {
    margin-bottom: 48px;
    text-align: center;
}

.fat-ind-row {
    margin-bottom: 40px;
}

.fat-ind-row:last-child {
    margin-bottom: 0;
}

.fat-ind-media {
    position: relative;
    border-radius: 149px 161px 447px 422px / 149px 161px 447px 422px;
    overflow: hidden;
    background: #e9e2d2;
    max-width: 394px;
    margin: 0 auto;
}

.fat-ind-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 394 / 354;
    object-fit: cover;
    display: block;
}

.fat-ind-badge {
    position: absolute;
    top: 18px;
    left: 24px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    background: #0054a4;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 20px;
    color: #fff;
    box-shadow: 0 8px 9px rgba(13, 44, 84, .22);
}

.fat-ind-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 26px;
    line-height: 27.3px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 13px;
}

.fat-ind-desc {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin: 0;
}

/* --- Types of Fillings (cream, ghost columns) --- */
.fat-fills {
    background: #faf6ec;
    padding: 80px 0;
}

.fat-fills-head {
    max-width: 880px;
    margin-bottom: 48px;
}

.fat-intro {
    font-size: 18px;
    line-height: 29.16px;
    color: #3a4252;
    margin: 0;
}

.fat-fill-col {
    position: relative;
    padding: 0 37px;
    height: 100%;
}

.fat-fill-cols > [class*="col-"]:not(:last-child) .fat-fill-col::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 249px;
    background: rgba(12, 27, 61, .18);
}

.fat-fill-cols > [class*="col-"]:first-child .fat-fill-col {
    padding-left: 0;
}

.fat-fill-num {
    display: block;
    font-family: 'Baloo 2', cursive;
    font-size: 34px;
    letter-spacing: -1.36px;
    line-height: 61px;
    color: rgba(0, 30, 59, .43);
    text-transform: uppercase;
}

.fat-fill-num--solid {
    color: #004d96;
    opacity: 1;
}

.fat-fill-col--muted .fat-fill-title,
.fat-fill-col--muted .fat-fill-text {
    opacity: .69;
}

.fat-fill-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -.96px;
    text-transform: uppercase;
    color: #001e3b;
    margin-bottom: 20px;
}

.fat-fill-text {
    font-size: 16px;
    line-height: 24px;
    color: #3a4252;
    margin: 0;
}

/* --- Types of Toppings (white, top-border cols) --- */
.fat-tops {
    background: #fff;
    padding: 80px 0;
}

.fat-tops-head {
    max-width: 880px;
    margin-bottom: 48px;
}

.fat-top-col {
    border-top: 2px solid var(--c-navy);
    padding-top: 23px;
    height: 100%;
}

.fat-top-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 26px;
    line-height: 27.3px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 9px;
}

.fat-top-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin: 0;
}

/* --- Finish Your Dishes (navy) --- */
.fat-finish {
    position: relative;
    background: var(--c-navy);
    padding: 80px 0;
    overflow: hidden;
}

.fat-finish .hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 55% at 0% 0%, rgba(255, 210, 0, .07), rgba(255, 210, 0, 0) 40%);
    pointer-events: none;
}

.fat-finish-row {
    position: relative;
    z-index: 1;
}

.fat-finish-lead {
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    max-width: 640px;
    margin-bottom: 18px;
}


.fat-finish-actions {
    margin-top: 12px;
}

.fat-finish-card {
    border-radius: 18px;
    overflow: hidden;
    background: #2a3a5e;
    box-shadow: 14px 14px 0 -1px #ffd200;
}

.fat-finish-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 555 / 508;
    object-fit: cover;
    display: block;
}

/* --- CTA card padding (Figma px-[72px] py-[86px]) --- */
.fat-cta .create-card {
    padding: 86px 72px;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .fat-hero {
        padding: 80px 0 64px;
    }

    .fat-hero-title {
        font-size: 38px;
        line-height: 42px;
    }

    .fat-hero-card,
    .fat-media,
    .fat-steps,
    .fat-finish-card {
        margin-top: 28px;
    }

    .fat-heading {
        font-size: 30px;
        line-height: 36px;
    }

    .fat-ind-media {
        margin-bottom: 8px;
    }

    .fat-fill-col {
        padding: 0;
        margin-bottom: 32px;
    }

    .fat-fill-cols > [class*="col-"]:not(:last-child) .fat-fill-col::after {
        display: none;
    }
}

@media (max-width: 767.98px) {

    .fat-hero,
.fat-finishings,
.fat-what,
.fat-satisfy,
.fat-industry,
.fat-fills,
.fat-tops,
.fat-finish{
        padding: 56px 0;
    }

    .fat-what-card {
        padding: 32px 26px;
    }

    .fat-cta .create-card {
        padding: 56px 28px;
    }
}

/* ============================================================
   === Aiolis page ===
   ============================================================ */

/* --- Hero --- */
.aio-hero {
    position: relative;
    background: var(--c-navy);
    padding: 160px 0 90px;
    overflow: hidden;
}

.aio-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(55% 50% at 88% 0%, rgba(255, 210, 0, .1), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .35) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
    pointer-events: none;
}

.aio-hero-row {
    position: relative;
    z-index: 1;
}

.aio-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    list-style: none;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
}

.aio-breadcrumb li {
    color: rgba(255, 255, 255, .6);
}

.aio-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 9px;
    color: rgba(255, 255, 255, .5);
}

.aio-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.aio-breadcrumb li[aria-current] {
    color: var(--c-yellow);
}

.aio-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 50.47px;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 22px;
}

.aio-hero-lead {
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    max-width: 640px;
    margin-bottom: 18px;
}

.aio-hero-actions {
    margin-top: 12px;
}

.aio-hero-card {
    border-radius: 18px;
    overflow: hidden;
    background: #1a2a4d;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.aio-hero-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 541 / 487;
    object-fit: cover;
    display: block;
}

/* --- Shared bits --- */
.aio-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 39.9px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.aio-heading--light {
    color: #fff;
}

.aio-heading--center {
    text-align: center;
}

.aio-heading .accent-blue-solid {
    color: #16399e;
}

.aio-heading .accent-yellow {
    color: var(--c-yellow);
}

.aio-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 16px;
}

.aio-text:last-child {
    margin-bottom: 0;
}

.aio-media {
    border-radius: 18px;
    overflow: hidden;
    background: #e9e2d2;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.aio-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 590 / 393;
    object-fit: cover;
    display: block;
}

/* --- Aiolis & Flavored Mayonnaise (white) --- */
.aio-intro-sec {
    background: #fff;
    padding: 80px 0;
}

/* --- Aioli vs Mayo (white) --- */
.aio-diff {
    background: #fff;
    padding: 0 0 90px;
}

.aio-diff-inner {
    max-width: 960px;
    margin: 0 auto;
    padding-top: 0px;
}

.aio-diff .aio-heading--center {
    margin-bottom: 32px;
}

.aio-diff-table {
    display: flex;
    margin-bottom: 17px;
}

.aio-diff-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.aio-diff-head {
    background: #faf6ec;
    border: 1px solid rgba(12, 27, 61, .12);
    padding: 14px 19px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--c-navy);
}

.aio-diff-cell {
    flex: 1 1 auto;
    border: 1px solid rgba(12, 27, 61, .12);
    border-top: 0;
    padding: 15px 19px;
    font-size: 17px;
    line-height: 27.54px;
    color: #3a4252;
}

.aio-diff-col:first-child .aio-diff-head,
.aio-diff-col:first-child .aio-diff-cell {
    border-right: 0;
}

.aio-diff-note {
    font-size: 17px;
    line-height: 27.54px;
    color: #1a2033;
    margin: 0;
}

/* --- Awards & Recognition (cream) --- */
.aio-awards {
    background: #faf6ec;
    padding: 80px 0;
}

.aio-awards .su-awards-heading {
    color: #0C1B3D
}

.aio-awards .su-awards-heading .accent {
    color: #16399e
}

.aio-awards .su-awards-sub {
    color: #3A4252
}

.aio-awards-head {
    max-width: 780px;
    margin: 0 auto 40px;
    text-align: center;
}

.aio-awards-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 46px;
    line-height: 47.84px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 13px;
}

.aio-awards-title .accent-blue-italic {
    color: #16399e;
}

.aio-awards-sub {
    font-size: 18px;
    line-height: 28.8px;
    color: #3a4252;
    max-width: 560px;
    margin: 0 auto;
}

.aio-awards-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.aio-award-card {
    flex: 1 1 0;
    min-width: 0;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 16px 34px -22px rgba(0, 0, 0, .55);
}

.aio-award-card img {
    max-width: 100%;
    max-height: 92px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.aio-award-sep {
    flex: 0 0 auto;
}

.aio-award-sep span {
    display: block;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 14px solid rgba(12, 27, 61, .28);
}

/* --- Why Choose (blue) --- */
.aio-why {
    position: relative;
    background: #0054a4;
    padding: 80px 0;
    overflow: hidden;
}



.aio-why-row {
    position: relative;
    z-index: 1;
}

.aio-why-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #dddfe4;
    margin: 0;
}

.aio-why-text a {
    color: var(--c-yellow);
    font-weight: 800;
    text-decoration: underline;
}

.aio-why-text a:hover {
    text-decoration: none
}

.aio-media--why {
    background: #e9e2d2;
}

/* --- Aiolis CTA card padding (Figma px-[72px] py-[86px]) --- */
.aio-cta .create-card {
    padding: 86px 72px;
}

/* --- Aiolis responsive --- */
@media (max-width: 991.98px) {
    .aio-hero {
        padding: 80px 0 64px;
    }

    .aio-hero-title {
        font-size: 38px;
        line-height: 42px;
    }

    .aio-hero-card,
    .aio-media {
        margin-top: 28px;
    }

    .aio-heading {
        font-size: 30px;
        line-height: 36px;
    }

    .aio-awards-title {
        font-size: 34px;
        line-height: 40px;
    }

    .aio-awards-row {
        flex-wrap: wrap;
        gap: 16px;
    }

    .aio-award-card {
        flex: 1 1 40%;
    }

    .aio-award-sep {
        display: none;
    }
}

@media (max-width: 767.98px) {

    .aio-hero,
    .aio-intro-sec,
    .aio-awards,
    .aio-why {
        padding: 56px 0;
    }

    .aio-diff {
        padding-bottom: 56px;
    }

    .aio-diff-table {
        flex-direction: column;
        gap: 16px;
    }

    .aio-diff-col:first-child .aio-diff-head,
    .aio-diff-col:first-child .aio-diff-cell {
        border-right: 1px solid rgba(12, 27, 61, .12);
    }

    .aio-award-card {
        flex: 1 1 100%;
    }

    .aio-cta .create-card {
        padding: 56px 28px;
    }
}

/* ============================================================
   === Marinades page ===
   ============================================================ */

/* --- Hero --- */
.mar-hero {
    position: relative;
    background: var(--c-navy);
    padding: 160px 0 90px;
    overflow: hidden;
}


.mar-hero-row {
    position: relative;
    z-index: 1;
}

.mar-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    list-style: none;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
}

.mar-breadcrumb li {
    color: rgba(255, 255, 255, .6);
}

.mar-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 9px;
    color: rgba(255, 255, 255, .5);
}

.mar-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.mar-breadcrumb li[aria-current] {
    color: var(--c-yellow);
}

.mar-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 50.47px;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 22px;
}

.mar-hero-lead {
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    max-width: 640px;
    margin-bottom: 22px;
}

.mar-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.mar-hero-card {
    border-radius: 18px;
    overflow: hidden;
    background: #1a2a4d;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.mar-hero-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 597 / 400;
    object-fit: cover;
    display: block;
}

/* --- Shared --- */
.mar-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 39.9px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.mar-heading--center {
    text-align: center;
}

.mar-heading .accent-blue-solid {
    color: #16399e;
}

.mar-heading .accent-yellow {
    color: var(--c-yellow);
}

.mar-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 16px;
}

.mar-text:last-child {
    margin-bottom: 0;
}

.mar-intro {
    font-size: 18px;
    line-height: 29.16px;
    color: #3a4252;
    margin: 0;
}

.mar-intro a {
    font-weight: 600;
    text-decoration: underline;
    color: #16399e
}

.mar-intro a:hover {
    text-decoration: none
}

.mar-media {
    border-radius: 18px;
    overflow: hidden;
    background: #e9e2d2;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.mar-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 590 / 393;
    object-fit: cover;
    display: block;
}

/* --- Infuse Flavor (cream, 2-col heading + stacked comparison cards) --- */
.mar-infuse {
    background: #faf6ec;
    padding: 80px 0;
}

.mar-cmp-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mar-cmp-card {
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    padding: 28px 30px;
}

.mar-cmp-card--good {
    box-shadow: 14px 14px 0 -1px #ffd200, 0 12px 30px -18px rgba(12, 27, 61, .4);
}

.mar-cmp-eyebrow {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.mar-cmp-eyebrow--bad {
    color: #9aa1ad;
}

.mar-cmp-eyebrow--good {
    color: #16399e;
}

.mar-cmp-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mar-cmp-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 3px 0;
}

.mar-cmp-item:first-child {
    padding-top: 0;
}

.mar-cmp-item:last-child {
    padding-bottom: 0;
}

.mar-cmp-x,
.mar-cmp-check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 11px;
}

.mar-cmp-x {
    color: #C2493D;
    font-weight: 800
}

.mar-cmp-check {
    color: #1F8A5B;
}

.mar-cmp-text {
    font-size: 15.5px;
    line-height: 23.25px;
    color: #3a4252;
}

/* --- Leave Ordinary Behind (white) --- */
.mar-leave {
    background: #fff;
    padding: 80px 0;
}

/* --- Custom Flavor Profiles (cream, image cards) --- */
.mar-prof {
    background: #faf6ec;
    padding: 80px 0;
}

.mar-prof-head {
    max-width: 880px;
    margin-bottom: 48px;
}

.mar-prof-head .mar-heading {
    margin-bottom: 14px;
}

.mar-prof-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .1);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 50px -30px rgba(12, 27, 61, .35);
}

.mar-prof-media {
    background: #fff8e3;
}

.mar-prof-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 380 / 295;
    object-fit: cover;
    display: block;
}

.mar-prof-body {
    flex: 1 1 auto;
    padding: 30px;
}

.mar-prof-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -.2px;
    color: var(--c-navy);
    margin-bottom: 18px;
}

.mar-prof-title .accent-blue-solid {
    color: #16399e;
}

.mar-prof-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mar-prof-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 13px;
}

.mar-prof-item:last-child {
    margin-bottom: 0;
}

.mar-prof-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 20px;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-size: 11px;
}

.mar-prof-text {
    font-size: 16px;
    line-height: 24px;
    color: #3a4252;
}

/* --- Designed & Scaled (white section, cream text cards) --- */
.mar-ds {
    background: #fff;
    padding: 80px 0;
}

.mar-ds-head {
    margin-bottom: 48px;
}

.mar-ds-card {
    height: 100%;
    background: #faf6ec;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    padding: 40px 43px;
}

.mar-ds-eyebrow {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #16399e;
    margin-bottom: 14px;
}

.mar-ds-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 27px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 14px;
}

.mar-ds-text {
    font-size: 16px;
    line-height: 25.5px;
    color: #3a4252;
    margin: 0;
}

.mar-ds-text a {
    color: #16399e;
    font-weight: 700;
    text-decoration: underline;
}

.mar-ds-text a:hover {
    text-decoration: none
}

/* --- Why Butterball (cream, zigzag timeline of 7 cards) --- */
.mar-why {
    background: #faf6ec;
    padding: 80px 0;
}

.mar-why-head {
    margin-bottom: 40px;
    text-align: center;
}

.mar-why-timeline {
    position: relative;
    max-width: 940px;
    margin: 0 auto;
    padding: 12px 0;
}

.mar-why-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(12, 27, 61, .16);
    transform: translateX(-50%);
}

.mar-why-row {
    display: flex;
    position: relative;
    margin-bottom: 28px;
}

.mar-why-row:last-child {
    margin-bottom: 0;
}

.mar-why-row--left {
    justify-content: flex-start;
}

.mar-why-row--right {
    justify-content: flex-end;
}

.mar-why-slot {
    width: 47%;
}

.mar-why-card {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 26px 30px;
    box-shadow: 0 22px 50px -30px rgba(12, 27, 61, .3);
}

.mar-why-badge {
    position: absolute;
    top: -20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 17px;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45);
}

.mar-why-row--left .mar-why-badge {
    right: -23px;
}

.mar-why-row--right .mar-why-badge {
    left: -23px;
}

.mar-why-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -.2px;
    color: var(--c-navy);
    margin-bottom: 10px;
}

.mar-why-title .accent-blue-italic {
    font-weight: 900;
    color: #16399e;
}

.mar-why-text {
    font-size: 15px;
    line-height: 23.7px;
    color: #3a4252;
    margin: 0;
}

.mar-why-text a {
    color: var(--c-yellow);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(255, 210, 0, .8);
}

.mar-why-text a:hover {
    text-decoration: none
}

/* --- CTA card padding (Figma px-[72px] py-[86px]) --- */
.mar-cta .create-card {
    padding: 86px 72px;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .mar-hero {
        padding: 80px 0 64px;
    }

    .mar-hero-title {
        font-size: 38px;
        line-height: 42px;
    }

    .mar-hero-card,
    .mar-media {
        margin-top: 28px;
    }

    .mar-heading {
        font-size: 30px;
        line-height: 36px;
    }

    .mar-why-col {
        padding: 0;
        margin-bottom: 32px;
    }

    .mar-why-row > [class*="col-"]:not(:last-child) .mar-why-col::after {
        display: none;
    }

    .mar-why-row--bottom > [class*="col-"]:last-child .mar-why-col {
        margin-bottom: 0;
    }
}

@media (max-width: 767.98px) {

    .mar-hero,
.mar-infuse,
.mar-leave,
.mar-prof,
.mar-ds,
.mar-why{
        padding: 56px 0;
    }

    .mar-cmp-card {
        padding: 30px 26px;
    }

    .mar-why-timeline::before {
        left: 15px;
    }

    .mar-why-row--left,
    .mar-why-row--right {
        justify-content: flex-end;
    }

    .mar-why-slot {
        width: calc(100% - 42px);
    }

    .mar-why-row--left .mar-why-badge,
    .mar-why-row--right .mar-why-badge {
        left: -42px;
        right: auto;
    }

    .mar-cta .create-card {
        padding: 56px 28px;
    }
}

/* ============================================================
   === Individual Butter Servings page ===
   ============================================================ */

/* --- Hero --- */
.ibs-hero {
    position: relative;
    background: var(--c-navy);
    padding: 160px 0 90px;
    overflow: hidden;
}

.ibs-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(55% 50% at 88% 0%, rgba(255, 210, 0, .1), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .35) 0%, rgba(14, 33, 80, .4) 52%, rgba(12, 27, 61, .5) 70%);
    pointer-events: none;
}

.ibs-hero-row {
    position: relative;
    z-index: 1;
}

.ibs-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    list-style: none;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
}

.ibs-breadcrumb li {
    color: rgba(255, 255, 255, .6);
}

.ibs-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 9px;
    color: rgba(255, 255, 255, .5);
}

.ibs-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.ibs-breadcrumb li[aria-current] {
    color: var(--c-yellow);
}

.ibs-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 50.47px;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 22px;
}

.ibs-hero-lead {
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    max-width: 640px;
    margin-bottom: 22px;
}

.ibs-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.ibs-hero-card {
    border-radius: 18px;
    overflow: hidden;
    background: #cdb98a;
    box-shadow: 14px 14px 0 -1px #ffd200;
}

.ibs-hero-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 576 / 490;
    object-fit: cover;
    display: block;
}

/* --- Shared --- */
.ibs-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 39.9px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.ibs-heading--center {
    text-align: center;
}

.ibs-heading--light {
    color: #fff;
}

.ibs-heading .accent-blue-solid {
    color: #16399e;
}

.ibs-heading .accent-yellow {
    color: var(--c-yellow);
}

/* --- Intro (cream) --- */
.ibs-intro {
    padding: 80px 0;
}

.ibs-intro-display {
    font-weight: 400;
    font-size: 34px;
    line-height: 42.5px;
    letter-spacing: -.4px;
    color: var(--c-navy);
    margin: 0;
    font-family: "Playfair Display", serif;
}

.ibs-intro-em {
    color: #16399e;
}

.ibs-intro-text {
    font-size: 18px;
    line-height: 28.8px;
    color: #3a4252;
    margin-bottom: 24px;

}

.ibs-intro-link {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 15px;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
    text-decoration: none;
}

.ibs-intro-link-thumb {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    border-radius: 12px;
    overflow: hidden;
    background: #0054a4;
}

.ibs-intro-link-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ibs-intro-link-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ibs-intro-link-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: var(--c-navy);
}

.ibs-intro-link-meta {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #3a4252;
}

.ibs-intro-link-arrow {
    margin-left: auto;
    padding-right: 8px;
    font-size: 20px;
    color: #16399e;
}

/* --- Types of Individual Butter Pats (white showcase) --- */
.ibs-types {
    background: #fff;
    padding: 80px 0;
}

.ibs-types-head {
    margin-bottom: 48px;
}

.ibs-types-head .ibs-heading {
    font-size: 40px;
    line-height: 42px;
}

.ibs-types-media {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #1f5fb0;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.ibs-types-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 590 / 413;
    object-fit: cover;
    display: block;
}

.ibs-types-ghostnum {
    position: absolute;
    top: 4px;
    left: 20px;
    z-index: 2;
    font-family: 'Baloo 2', cursive;
    font-size: 96px;
    letter-spacing: -6.5px;
    line-height: 1;
    color: rgba(255, 255, 255, .85);
}

.ibs-types-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 35px;
    letter-spacing: -2.7px;
    text-transform: uppercase;
    color: #0054a4;
    margin-bottom: 20px;
}

.ibs-types-text {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 24px;
}

.ibs-types-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.ibs-types-pager {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ibs-types-pager-count {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 10.4px;
    letter-spacing: 1.87px;
    text-transform: uppercase;
    color: #022a50;
}

.ibs-types-pager-bars {
    display: flex;
    gap: 4px;
}

.ibs-types-pager-bars span {
    width: 28px;
    height: 2px;
    background: rgba(2, 42, 80, .3);
}

.ibs-types-pager-bars span.is-active {
    background: #022a50;
}

/* --- Where to Buy (navy card) --- */
.ibs-wtb {
    background: #fff;
    padding: 0 0 90px;
}

.ibs-wtb-card {
    position: relative;
    background: var(--c-navy);
    border-radius: 18px;
    padding: 64px;
    overflow: hidden;
}

.ibs-wtb-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 60% at 100% 100%, rgba(255, 210, 0, .08), rgba(255, 210, 0, 0) 60%);
    pointer-events: none;
}

.ibs-wtb-card .ibs-heading {
    position: relative;
    margin-bottom: 12px;
}

.ibs-wtb-text {
    position: relative;
    font-size: 18px;
    line-height: 28.8px;
    color: rgba(255, 255, 255, .78);
    margin: 0;
}

/* A link in this card's copy sits on a dark ground, so it goes full white
   against the softer body colour rather than inheriting it. */
.ibs-wtb-text a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

.ibs-wtb-text a:hover {
    text-decoration: none;
}

.ibs-wtb-actions {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

/* --- Individual Butter Portions (white, split card) --- */
.ibs-portions {
    background: #fff;
    padding: 0 0 90px;
}

.ibs-portions-head {
    margin-bottom: 48px;
}

.ibs-portions-card {
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    overflow: hidden;
}

.ibs-portions-media {
    height: 100%;
    min-height: 320px;
    background: #ede2c8;
}

.ibs-portions-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ibs-portions-body {
    padding: 48px;
}

.ibs-portions-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 26px;
    line-height: 27.3px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 14px;
}

.ibs-portions-title .accent-blue-italic {
    color: #16399e;
}

.ibs-portions-text {
    font-size: 16px;
    line-height: 25.92px;
    color: #3a4252;
    margin-bottom: 24px;
}

.ibs-portions-list {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.ibs-portions-list li {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
    padding-right: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--c-navy);
}

.ibs-portions-list a {
    color: #16399e;
    text-decoration: underline;
}

.ibs-portions-list a:hover {
    text-decoration: none
}

.ibs-check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-size: 10px;
}

/* --- For Every Industry (cream, 3 cards) --- */
.ibs-industry {
    background: #faf6ec;
    padding: 80px 0;
}

.ibs-industry-head {
    max-width: 880px;
    margin-bottom: 48px;
}

.ibs-industry-head .ibs-heading {
    margin-bottom: 14px;
}

.ibs-intro-lead {
    font-size: 18px;
    line-height: 29.16px;
    color: #3a4252;
    margin: 0;
}

.ibs-intro-lead a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.ibs-intro-lead a:hover {
    text-decoration: none
}

.ibs-ind-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    overflow: hidden;
}

.ibs-ind-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 392 / 221;
    object-fit: cover;
    display: block;
}

.ibs-ind-body {
    flex: 1 1 auto;
    padding: 32px;
}

.ibs-ind-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 21px;
    line-height: 22px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 14px;
}

.ibs-ind-text {
    font-size: 15px;
    line-height: 23.7px;
    color: #3a4252;
    margin: 0;
}

.ibs-ind-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

/* --- Why Choose (blue) --- */
.ibs-why {
    position: relative;
    background: #0054a4;
    padding: 80px 0;
    overflow: hidden;
}

.ibs-why .hero-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 55% at 0% 100%, rgba(255, 210, 0, .07), rgba(255, 210, 0, 0) 55%);
    pointer-events: none;
}

.ibs-why-row {
    position: relative;
    z-index: 1;
}

.ibs-why-media {
    border-radius: 18px;
    overflow: hidden;
    background: #2a2018;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.ibs-why-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.ibs-why-text {
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    max-width: 640px;
    margin-bottom: 18px;
}

.ibs-why-text:last-child {
    margin-bottom: 0;
}

.ibs-why-text a {
    color: var(--c-yellow);
    font-weight: 600;
    text-decoration: underline;
}

.ibs-why-text a:hover {
    text-decoration: none
}

/* --- CTA card padding (Figma px-[72px] py-[86px]) --- */
.ibs-cta .create-card {
    padding: 86px 72px;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .ibs-hero {
        padding: 80px 0 64px;
    }

    .ibs-hero-title {
        font-size: 38px;
        line-height: 42px;
    }

    .ibs-hero-card,
    .ibs-types-media,
    .ibs-why-media {
        margin-top: 28px;
    }

    .ibs-heading {
        font-size: 30px;
        line-height: 36px;
    }

    .ibs-types-head .ibs-heading,
    .ibs-types-title {
        font-size: 30px;
        line-height: 34px;
    }

    .ibs-intro-display {
        font-size: 27px;
        line-height: 36px;
    }

    .ibs-wtb-card {
        padding: 44px 36px;
    }

    .ibs-wtb-actions {
        justify-content: flex-start;
        margin-top: 20px;
    }

    .ibs-portions-media {
        min-height: 260px;
    }

    .ibs-why-media {
        margin-top: 0;
        margin-bottom: 28px;
    }
}

@media (max-width: 767.98px) {

    .ibs-hero,
.ibs-intro,
.ibs-types,
.ibs-industry,
.ibs-why{
        padding: 56px 0;
    }

    .ibs-wtb,
    .ibs-portions {
        padding-bottom: 56px;
    }

    .ibs-portions-body {
        padding: 32px 26px;
    }

    .ibs-portions-list li {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .ibs-cta .create-card {
        padding: 56px 28px;
    }
}

/* ============================================================
   === Salted Shaped Butter Portions page ===
   ============================================================ */

/* --- Hero --- */
.ssb-hero {
    position: relative;
    background: var(--c-navy);
    padding: 160px 0 90px;
    overflow: hidden;
}


.ssb-hero-row {
    position: relative;
    z-index: 1;
}

.ssb-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .3px;
}

.ssb-breadcrumb li {
    color: rgba(255, 255, 255, .6);
}

.ssb-breadcrumb li:not(:last-child)::after {
    content: "\00bb";
    margin-left: 8px;
    color: rgba(255, 255, 255, .5);
}

.ssb-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.ssb-breadcrumb li[aria-current] {
    color: var(--c-yellow);
}

.ssb-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 46px;
    line-height: 47.84px;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 22px;
}

.ssb-hero-lead {
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .86);
    max-width: 600px;
    margin-bottom: 24px;
}

.ssb-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.ssb-hero-card {
    border-radius: 18px;
    overflow: hidden;
    background: #2a1d10;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.ssb-hero-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 588 / 500;
    object-fit: cover;
    display: block;
}

/* --- Shared --- */
.ssb-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 36px;
    line-height: 37.8px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.ssb-heading--center {
    text-align: center;
}

.ssb-heading .accent-blue-solid {
    color: #16399e;
}

.ssb-heading .accent-yellow {
    color: var(--c-yellow);
}

.ssb-heading .accent-blue-italic {
    color: #16399e;
}

/* --- Shape sections (stocked cream band + special-order blue band) --- */
.ssb-shapes {
    padding: 100px 0;
}

.ssb-shapes_stocked {
    background: #fff8e3;
}

.ssb-shapes_special {
    background: #0054a4;
}

.ssb-shapes-head {
    max-width: 780px;
    margin-bottom: 30px;
}

.ssb-shapes-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 36px;
    line-height: 37.8px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 14px;
}

.ssb-shapes-title .accent-blue-solid {
    color: #16399e;
}

.ssb-shapes-title .accent-yellow {
    color: var(--c-yellow);
}

.ssb-shapes-intro {
    font-size: 18px;
    line-height: 29.16px;
    color: #3a4252;
    margin: 0;
}

.ssb-shapes_special .ssb-shapes-title {
    color: #fff;
}

.ssb-shapes_special .ssb-shapes-intro {
    color: rgba(255, 255, 255, .86);
}

.ssb-shape-row {
    --bs-gutter-x: 22px;
    --bs-gutter-y: 22px;
}

/* --- Card --- */
.ssb-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.ssb-card:hover,
.ssb-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -22px rgba(12, 27, 61, .5);
}

.ssb-card-media {
    position: relative;
    display: block;
    background: #fff;
    aspect-ratio: 1 / 1;
}

.ssb-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ssb-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--c-yellow);
    color: var(--c-navy);
    border-radius: 999px;
    padding: 4.5px 10px 5px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 9.5px;
    line-height: 15.39px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ssb-card-ribbon {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    z-index: 2;
    background: var(--c-yellow);
    color: var(--c-navy);
    padding: 3px 16px;
    white-space: nowrap;
    clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%, 7px 50%);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 9.5px;
    line-height: 15.39px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ssb-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 14px 17px 17px;
}

.ssb-card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    line-height: 19.58px;
    color: var(--c-navy);
    margin: 0;
}

.ssb-card-stats {
    display: flex;
    gap: 16px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(12, 27, 61, .12);
}

.ssb-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ssb-stat+.ssb-stat {
    padding-left: 16px;
    border-left: 1px solid rgba(12, 27, 61, .12);
}

.ssb-stat-val {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: -.4px;
    color: var(--c-navy);
}

.ssb-stat-key {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 9px;
    line-height: 14.58px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(12, 27, 61, .5);
}

.ssb-card-cta {
    align-self: flex-start;
    border: 1px solid #0054a4;
    border-radius: 999px;
    padding: 11px 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 11px;
    line-height: 17.82px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: #0054a4;
    transition: background .2s ease, color .2s ease;
}

.ssb-card:hover .ssb-card-cta {
    background: #0054a4;
    color: #fff;
}

/* --- Special-order variant (on the blue band) --- */
.ssb-shapes_special .ssb-card {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: none;
}

.ssb-shapes_special .ssb-card-title {
    color: #fff;
}

.ssb-shapes_special .ssb-card-stats,
.ssb-shapes_special .ssb-stat+.ssb-stat {
    border-color: rgba(255, 255, 255, .16);
}

.ssb-shapes_special .ssb-stat-val {
    color: var(--c-yellow);
}

.ssb-shapes_special .ssb-stat-key {
    color: rgba(255, 255, 255, .55);
}

.ssb-shapes_special .ssb-card-cta {
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

.ssb-shapes_special .ssb-card:hover .ssb-card-cta {
    background: #fff;
    color: #0054a4;
}

/* --- "Don't see your shape?" tile --- */
.ssb-card_cta {
    background: var(--c-navy);
    border-color: var(--c-navy);
}

.ssb-card_cta .ssb-card-media {
    background: #162549;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ssb-card_cta .ssb-card-title {
    font-size: 28px;
    line-height: 1.15;
    color: #fff;
}

.ssb-card_cta .ssb-card-cta {
    background: var(--c-yellow);
    border-color: var(--c-navy);
    color: var(--c-navy);
}

.ssb-card_cta:hover .ssb-card-cta {
    background: #ffdd33;
    color: var(--c-navy);
}

.ssb-logo-disc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #fffdf2 0%, #ffeeb4 46%, #f2d888 78%, #e2c169 100%);
    box-shadow: 0 12.5px 27px -14.6px rgba(12, 27, 61, .4),
        inset 0 -8.4px 18.8px rgba(180, 140, 40, .28),
        inset 0 6.3px 14.6px rgba(255, 255, 255, .8);
    position: relative;
}

.ssb-logo-disc::before {
    content: "";
    position: absolute;
    inset: 11%;
    border: 2px dashed rgba(12, 27, 61, .32);
    border-radius: 50%;
}

.ssb-logo-disc-text {
    max-width: 5ch;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 11.5px;
    line-height: 20.68px;
    letter-spacing: 1.57px;
    text-transform: uppercase;
    text-align: center;
    color: var(--c-navy);
}

@media (max-width: 991.98px) {
    .ssb-shapes {
        padding: 70px 0;
    }

    .ssb-shapes-title {
        font-size: 30px;
        line-height: 36px;
    }

    .ssb-card_cta .ssb-card-title {
        font-size: 22px;
    }
}

@media (max-width: 767.98px) {
    .ssb-shapes {
        padding: 56px 0;
    }

    .ssb-shapes-title {
        font-size: 26px;
        line-height: 32px;
    }

    .ssb-shapes-intro {
        font-size: 16px;
        line-height: 25px;
    }

    .ssb-card-body {
        padding: 12px 13px 14px;
        gap: 10px;
    }

    .ssb-card-stats {
        gap: 12px;
    }

    .ssb-stat+.ssb-stat {
        padding-left: 12px;
    }

    .ssb-card-cta {
        padding: 9px 14px;
        letter-spacing: .9px;
    }

    .ssb-card_cta .ssb-card-title {
        font-size: 19px;
    }
}

/* --- Types of Individual Butter Pats (cream showcase) --- */
.ssb-types {
    background: #faf6ec;
    padding: 80px 0;
}

.ssb-types-head {
    margin-bottom: 48px;
}

.ssb-types-head .ssb-heading {
    font-size: 40px;
    line-height: 42px;
}

.ssb-types-media {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #1f5fb0;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.ssb-types-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 590 / 413;
    object-fit: cover;
    display: block;
}

.ssb-types-ghostnum {
    position: absolute;
    top: 4px;
    left: 20px;
    z-index: 2;
    font-family: 'Baloo 2', cursive;
    font-size: 96px;
    letter-spacing: -6.5px;
    line-height: 1;
    color: rgba(255, 255, 255, .85);
}

.ssb-types-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 35px;
    letter-spacing: -2.7px;
    text-transform: uppercase;
    color: #0054a4;
    margin-bottom: 28px;
}

.ssb-types-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.ssb-types-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    font-size: 16px;
    line-height: 24.8px;
    color: #3a4252;
}

.ssb-types-list li:last-child {
    margin-bottom: 0;
}

.ssb-types-list a {
    color: var(--c-navy);
    font-weight: 700;
    text-decoration: underline;
}

.ssb-badge {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 10px;
    letter-spacing: .6px;
    color: #16399e;
    text-transform: uppercase;
}

.ssb-check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 11px;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-size: 11px;
}

.ssb-types-pager {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ssb-types-pager-count {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 10.4px;
    letter-spacing: 1.87px;
    text-transform: uppercase;
    color: #022a50;
}

.ssb-types-pager-bars {
    display: flex;
    gap: 4px;
}

.ssb-types-pager-bars span {
    width: 28px;
    height: 2px;
    background: rgba(2, 42, 80, .3);
}

.ssb-types-pager-bars span.is-active {
    background: #022a50;
}

/* --- Salted Butter Facts (white, ghost columns) --- */
.ssb-facts {
    background: #fff;
    padding: 80px 0;
}

.ssb-facts-head {
    margin-bottom: 48px;
}

.ssb-fact-col {
    position: relative;
    padding: 0 37px;
    height: 100%;
}

.ssb-facts-row > [class*="col-"]:not(:last-child) .ssb-fact-col::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 0;
    width: 1px;
    height: 249px;
    background: rgba(12, 27, 61, .16);
}

.ssb-facts-row > [class*="col-"]:first-child .ssb-fact-col {
    padding-left: 0;
}

.ssb-fact-num {
    display: block;
    font-family: 'Baloo 2', cursive;
    font-size: 34px;
    letter-spacing: -1.36px;
    line-height: 61px;
    color: rgba(0, 30, 59, .43);
    text-transform: uppercase;
}

.ssb-fact-num--solid {
    color: #004d96;
    opacity: 1;
}

.ssb-fact-col--muted .ssb-fact-title,
.ssb-fact-col--muted .ssb-fact-text {
    opacity: .69;
}

.ssb-fact-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -.96px;
    text-transform: uppercase;
    color: #001e3b;
    margin-bottom: 20px;
}

.ssb-fact-text {
    font-size: 16px;
    line-height: 24px;
    color: #3a4252;
    margin: 0;
}

.ssb-fact-text strong {
    font-weight: 700;
    text-transform: none;
}

/* --- Video (cream) --- */
.ssb-video {

    padding: 50px 0 90px;
    position: relative
}

.ssb-video::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 50%;
    left: 0;
    top: 0;
    background: #FAFAFA;
}

.ssb-video-card {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .35);
    aspect-ratio: 780 / 334;
    display: block
}

.ssb-video-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .8;
}

.ssb-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 74px;
    border: 0;
    border-radius: 37px;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-size: 26px;
    padding-left: 5px;
    cursor: pointer;
    box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .6);
}

/* --- CTA card padding (Figma px-[72px] py-[86px]) --- */
.ssb-cta .create-card {
    padding: 86px 72px;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .ssb-hero {
        padding: 80px 0 64px;
    }

    .ssb-hero-title {
        font-size: 36px;
        line-height: 40px;
    }

    .ssb-hero-card,
    .ssb-types-media {
        margin-top: 28px;
    }

    .ssb-heading {
        font-size: 30px;
        line-height: 36px;
    }

    .ssb-types-head .ssb-heading,
    .ssb-types-title {
        font-size: 30px;
        line-height: 34px;
    }

    .ssb-fact-col {
        padding: 0;
        margin-bottom: 32px;
    }

    .ssb-facts-row > [class*="col-"]:not(:last-child) .ssb-fact-col::after {
        display: none;
    }

    .ssb-facts-row > [class*="col-"]:last-child .ssb-fact-col {
        margin-bottom: 0;
    }
}

@media (max-width: 767.98px) {

    .ssb-hero,
    .ssb-types,
    .ssb-facts {
        padding: 56px 0;
    }

    .ssb-video {
        padding-bottom: 56px;
    }

    .ssb-cta .create-card {
        padding: 56px 28px;
    }
}

/* ============================================================
   === Butterball Butter Premium Balls Salted page ===
   ============================================================ */

/* --- Shared --- */
.bpb-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.bpb-heading--center {
    text-align: center;
}

.bpb-heading--h3 {
    font-size: 24px;
}

/* --- Product hero --- */
.bpb-product {
    background: #fff;
    padding: 150px 0 0px;
}

.bpb-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .3px;
}

.bpb-breadcrumb li {
    color: #6b7280;
}

.bpb-breadcrumb li:not(:last-child)::after {
    content: "\00bb";
    margin-left: 7px;
    color: #b6bcc6;
}

.bpb-breadcrumb a {
    color: #16399e;
}

.bpb-breadcrumb li[aria-current] {
    color: #0C1B3D;
}

/* Gallery */
.bpb-gallery-main {
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 50px -30px rgba(12, 27, 61, .35);
}

.bpb-gallery-main img {
    width: 100%;
    height: auto;
    aspect-ratio: 555 / 449;
    object-fit: cover;
    display: block;
}

/* Packaging artwork comes square. Cropping it to the frame a photograph gets
   would cut the words on the case off, so the frame follows the picture. */
.bpb-gallery-main--whole img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.bpb-gallery-thumbs {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.bpb-thumb {
    flex: 1 1 0;
    padding: 0;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 12px;
    overflow: hidden;
    background: #f6f2ea;
    cursor: pointer;
}

.bpb-thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* Past four thumbnails the row becomes a slider. Slick sizes each thumbnail
   itself, so the gap flex was keeping moves inside the thumbnail and the frame
   around it moves onto the picture, which leaves the row looking the same. */
.bpb-gallery-thumbs.slick-initialized {
    display: block;
    position: relative;
}

.bpb-gallery-thumbs.slick-initialized .slick-list {
    margin: 0 -6px;
}

.bpb-gallery-thumbs.slick-initialized .bpb-thumb {
    padding: 0 6px;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
}

.bpb-gallery-thumbs.slick-initialized .bpb-thumb img {
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 12px;
    background: #f6f2ea;
}

.bpb-gallery-thumbs .slick-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 50%;
    background: #fff;
    color: #0c1b3d;
    font-size: 0;
    cursor: pointer;
}

.bpb-gallery-thumbs .slick-prev {
    left: -14px;
}

.bpb-gallery-thumbs .slick-next {
    right: -14px;
}

.bpb-gallery-thumbs .slick-arrow::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    margin: 0 auto;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.bpb-gallery-thumbs .slick-prev::before {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.bpb-gallery-thumbs .slick-next::before {
    transform: rotate(45deg) translate(-2px, -2px);
}

.bpb-gallery-thumbs .slick-arrow.slick-disabled {
    opacity: .35;
    cursor: default;
}

/* Info */
.bpb-info-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 42px;
    line-height: 1.15;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 12px;
}

.bpb-info-title span {
    color: #16399E
}

.bpb-info-brand {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 14px;
}

.bpb-info-brand a {
    color: #16399e;
    text-decoration: underline;
    font-weight: 600
}

.bpb-info-brand a:hover {
    text-decoration: none
}

.bpb-info-brand span {
    margin: 0 6px;
    color: #b6bcc6;
}

.bpb-info-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.bpb-info-desc {
    font-size: 16px;
    line-height: 26px;
    color: #3a4252;
    margin-bottom: 24px;
}

.bpb-usebox {
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 24px;
    background: #FAF6EC
}

.bpb-usebox-col {
    padding: 20px 24px;
    height: 100%;
}

.bpb-usebox-col--border {
    border-left: 1px solid rgba(12, 27, 61, .12);
}

.bpb-usebox-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--c-navy);
    margin-bottom: 14px;
    line-height: normal
}

.bpb-usebox-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bpb-usebox-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 20px;
    color: #3a4252;
}

.bpb-usebox-list li:last-child {
    margin-bottom: 0;
}

/* A long list of pairings runs in two columns rather than one tall one, the way
   the design sets out the products with many. */
.bpb-usebox-list--two {
    display: flex;
    flex-flow: row wrap;
    gap: 0 18px;
}

.bpb-usebox-list--two li {
    flex: 0 0 calc(50% - 9px);
}

.bpb-check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    border-radius: 50%;
    background: #16399E;
    color: #fff;
    font-size: 10px;
}

.bpb-info-actions {
    display: inline-flex;
    gap: 14px;
}

/* The sample kit call to action, on its own line under the first two. */
.bpb-info-actions--below {
    display: flex;
    margin-top: 14px;
	justify-content:flex-end
}
.bpb-info-link{
	justify-content:center
}
/* --- Spec panels (accordions) --- */
.bpb-specs-row {
    margin-top: 48px;
    position: relative;
}

.bpb-spec-panel {
    height: 100%;
}

.bpb-spec-summary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none;
    border: 0;
    border-bottom: 2px solid rgba(12, 27, 61, .12);
    padding: 16px 4px;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 21px;
    color: var(--c-navy);
    cursor: pointer;
}

.bpb-spec-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 2px solid #16399e;
    border-radius: 14px;
    color: #16399e;
    font-size: 12px;
}

.bpb-spec-body {
    display: none;
    padding-top: 8px;
}

.bpb-spec-body.is-open {
    display: block;
}

.bpb-spec-table {
    margin-bottom: 12px;
}

.bpb-spec-row {
    display: flex;
    gap: 16px;
    padding: 9px 4px;
    border-bottom: 1px solid rgba(12, 27, 61, .1);
    font-size: 15px;
    line-height: 25px;
}

.bpb-spec-key {
    flex: 0 0 44%;
    font-weight: 600;
    color: var(--c-navy);
}

.bpb-spec-val {
    flex: 1 1 auto;
    color: #3a4252;
}

.bpb-spec-link {
    color: #16399e;
    text-decoration: underline;
}

.bpb-spec-note {
    font-size: 13px;
    line-height: 19px;
    color: #6b7280;
    margin: 4px 4px 18px;
}

.bpb-spec-table--items .bpb-spec-row:last-child {
    border-bottom: 0;
}

/* Nutrition facts label */
.bpb-nf {
    border: 1px solid var(--c-navy);
    border-radius: 6px;
    padding: 12px 14px;
    max-width: 455px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #000;
}

.bpb-nf-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 1;
    margin: 0 0 4px;
    border-bottom: 8px solid #000;
    padding-bottom: 4px;
}

.bpb-nf-servings {
    font-size: 12px;
    margin: 4px 0;
}

.bpb-nf-serve {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 8px solid #000;
    padding-bottom: 6px;
}

.bpb-nf-cal-label {
    font-size: 11px;
    font-weight: 700;
    margin-top: 4px;
}

.bpb-nf-cal {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-weight: 800;
    border-bottom: 4px solid #000;
    padding-bottom: 2px;
}

.bpb-nf-cal span:first-child {
    font-size: 22px;
}

.bpb-nf-cal span:last-child {
    font-size: 30px;
    line-height: 1;
}

.bpb-nf-dvhead {
    text-align: right;
    font-size: 11px;
    font-weight: 700;
    border-bottom: 1px solid #000;
    padding: 3px 0;
}

.bpb-nf-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 2px 0;
    border-bottom: 1px solid #000;
}

.bpb-nf-indent .bpb-nf-label {
    padding-left: 16px;
}

.bpb-nf-indent2 .bpb-nf-label {
    padding-left: 32px;
}

.bpb-nf-vit {
    font-size: 13px;
    border-bottom: 1px solid #ccc;
}

.bpb-nf-foot {
    font-size: 11px;
    line-height: 15px;
    margin: 8px 0 0;
    border-top: 4px solid #000;
    padding-top: 6px;
}

/* Distributor */
.bpb-distributor-section {
    padding-top: 100px
}

.bpb-distributor {
    margin-top: 60px;
    background: #0054A4;
    border-radius: 18px;
    padding: 70px;
    position: relative
}

.bpb-dist-media {
    position: absolute;
    right: 80px;
    bottom: 0;
    width: 430px;
}

.bpb-dist-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 44px;
    line-height: 1.15;
    letter-spacing: -.5px;
    color: #fff;
    margin-bottom: 24px;
}

.bpb-shape-two {
    position: absolute;
    top: -9%;
    right: 39px;
    width: 85px;
}

.bpb-shape-one {
    position: absolute;
    left: 60%;
    top: 65%;
    width: 46px;
}

.bpb-dist-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 509 / 400;
    object-fit: cover;
    display: block;
}

/* --- Quality Packaged (cream) --- */
.bpb-quality {
    background: #fff;
    padding: 80px 0;
}

.bpb-quality-head {
    max-width: 900px;
    margin: 0 auto 42px;
    text-align: center;
}

.bpb-quality-intro {
    font-size: 18px;
    line-height: 29px;
    color: #3a4252;
    margin: 0;
}

.bpb-quality-media {
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    overflow: hidden;
}

.bpb-pack-row {
    margin-top: -130px
}

.bpb-quality-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 1180 / 520;
    object-fit: cover;
    display: block;
}
.bpb-quality-media{
    position: relative
}
.bpb-quality-media::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 40%;
    left: 0;
    bottom: 0;
    background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}
.bpb-pack-card {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .1);
    border-radius: 18px;
    padding: 35px;
    box-shadow: 0 12px 30px -20px rgba(12, 27, 61, .35);
    position: relative;
    z-index: 1;
}

.bpb-pack-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #FFD200;
    color: var(--c-yellow);
    font-size: 22px;
    margin-bottom: 24px;
}

.bpb-pack-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 30px;
    color: var(--c-navy);
    margin-bottom: 14px;
}

.bpb-pack-text {
    font-size: 15px;
    line-height: 24px;
    color: #3a4252;
    margin: 0;
}

/* --- Long form tabs --- */
.bpb-longform {
    padding: 80px 0;
}

.bpb-tablist {
    display: flex;
    gap: 6px;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .1);
    border-radius: 16px;
    padding: 7px;
    box-shadow: 0 12px 30px -20px rgba(12, 27, 61, .3);
    margin-bottom: 24px;
}

.bpb-tab {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: 0;
    border-radius: 11px;
    padding: 16px 18px;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    color: var(--c-navy);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.bpb-tab-num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 8px;
    background: rgba(247, 209, 84, 0.28);
    font-size: 12px;
    font-weight: 800;
}

.bpb-tab.is-active {
    background: #16399E;
    color: #fff;
}

.bpb-tab.is-active .bpb-tab-num {
    background: var(--c-yellow);
    color: var(--c-navy);
}

.bpb-tabpanels {
    position: relative;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .1);
    border-radius: 18px;
    box-shadow: 0 18px 44px -28px rgba(12, 27, 61, .35);
    overflow: hidden;
}

.bpb-tabpanel a {
    color: #16399e;
    text-decoration: underline;
    font-weight: 600
}

.bpb-tabpanel a:hover {
    text-decoration: none
}

.bpb-tabpanels::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #FFD200;
}

.bpb-tabpanel {
    padding: 47px;
}

.bpb-tab-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -.5px;
    color: var(--c-navy);
    padding-bottom: 18px;
    margin-bottom: 24px;
    position: relative;
}

.bpb-tab-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 54px;
    height: 3px;
    background: var(--c-yellow);
    border-radius: 2px;
}

.bpb-tabpanel p {
    font-size: 16px;
    line-height: 26px;
    color: #3a4252;
    margin-bottom: 20px;
}

.bpb-tabpanel p:last-child {
    margin-bottom: 0;
}

/* --- Uses of Butter Balls (white) --- */
.bpb-uses {
    background: #fff;
    padding: 0 0 90px;
}

.bpb-uses-intro {
    font-size: 16px;
    line-height: 26px;
    color: #3a4252;
    margin-bottom: 32px;
}

.bpb-uses-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bpb-use-item {
    display: flex;
    gap: 16px;
    margin-bottom: 38px;
}

.bpb-use-item:last-child {
    margin-bottom: 0;
}

.bpb-use-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-size: 14px;
    margin-top: 2px;
}

.bpb-use-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: var(--c-navy);
    margin-bottom: 8px;
}

.bpb-use-text {
    font-size: 16px;
    line-height: 25px;
    color: #3a4252;
    margin: 0;
}

.bpb-uses-visual {
    position: relative;
}

.bpb-uses-media {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 50px -28px rgba(12, 27, 61, .35);
}

.bpb-uses-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 602 / 730;
    object-fit: cover;
    display: block;
}

.bpb-testimonial {
    position: absolute;
    left: -24px;
    bottom: 34px;
    width: 340px;
    max-width: 90%;
    margin: 0;
    background: #fff;
    border-radius: 16px;
    padding: 23px 25px;
    box-shadow: 0 22px 50px -22px rgba(12, 27, 61, .55);

}

.bpb-testimonial blockquote {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 23px;
    color: #0C1B3D
}

.bpb-testimonial-cap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bpb-testimonial-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
}

.bpb-testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bpb-testimonial-meta {
    display: flex;
    flex-direction: column;
}

.bpb-testimonial-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #0C1B3D;
}

.bpb-testimonial-role {
    font-size: 13px;
    color: #3A4252;
}

/* --- Bread Service (cream) --- */
.bpb-bread {
    background: #faf6ec;
    padding: 80px 0;
}

.bpb-bread-media {
    border-radius: 18px;
    overflow: hidden;
    background: #cdb98a;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 22px 50px -28px rgba(12, 27, 61, .35);
}

.bpb-bread-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 590 / 393;
    object-fit: cover;
    display: block;
}

.bpb-bread-text {
    font-size: 16px;
    line-height: 26px;
    color: #3a4252;
    margin-bottom: 18px;
}

.bpb-bread-text:last-child {
    margin-bottom: 0;
}

/* --- Cooking (white, 3 numbered cols) --- */
.bpb-cooking {
    background: #fff;
    padding: 80px 0;
}

.bpb-cooking-head {
    max-width: 880px;
    margin-bottom: 48px;
}

.bpb-cooking-intro {
    font-size: 18px;
    line-height: 29px;
    color: #3a4252;
    margin: 0;
}

.bpb-cook-col {
    position: relative;
    height: 100%;
    padding-left: 30px;
}

.bpb-cook-row {
    align-items: flex-start;
}

.bpb-cook-row > [class*="col-"]:nth-child(2) .bpb-cook-col {
    margin-top: 150px;
}

.bpb-cook-row > [class*="col-"]:nth-child(3) .bpb-cook-col {
    margin-top: 80px;
}

.bpb-cook-row > [class*="col-"]:not(:first-child) .bpb-cook-col {
    border-left: 1px solid rgba(12, 27, 61, .12);
    padding-left: 45px;
}

.bpb-cook-num {
    display: block;
    font-family: 'Baloo 2', cursive;
    font-size: 26px;
    line-height: 1;
    color: #16399e;
    margin-bottom: 16px;
}

.bpb-cook-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 26px;
    line-height: 33px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.bpb-cook-text {
    font-size: 16px;
    line-height: 25px;
    color: #3a4252;
    margin-bottom: 24px;
}

.bpb-cook-media {
    border-radius: 14px;
    overflow: hidden;
    border-radius: 149px 161px 447px 422px / 149px 161px 447px 422px;
}

.bpb-cook-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 369 / 332;
    object-fit: cover;
    display: block;
}

/* --- CTA card padding (Figma px-[72px] py-[86px]) --- */
.bpb-cta .create-card {
    padding: 86px 72px;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .bpb-info {
        margin-top: 32px;
    }

    .bpb-info-title {
        font-size: 28px;
    }

    .bpb-heading {
        font-size: 27px;
    }

    .bpb-specs-row .col-lg-6:last-child {
        margin-top: 40px;
    }

    .bpb-distributor {
        padding: 40px 32px;
    }

    .bpb-tablist {
        flex-direction: column;
    }

    .bpb-tabpanel {
        padding: 36px 28px;
    }

    .bpb-tab-title {
        font-size: 26px;
    }

    .bpb-bread-media {
        margin-bottom: 28px;
    }


    .bpb-cook-row > [class*="col-"]:not(:first-child) .bpb-cook-col {
        border-left: 0;
        padding-left: 30px;
    }

    .bpb-cook-row > [class*="col-"]:nth-child(2) .bpb-cook-col,
    .bpb-cook-row > [class*="col-"]:nth-child(3) .bpb-cook-col {
        margin-top: 0;
    }

    .bpb-cook-col {
        margin-bottom: 20px;
    }
}

@media (max-width: 767.98px) {
    .bpb-product {
        padding: 24px 0 56px;
    }

    .bpb-quality,
    .bpb-longform,
    .bpb-bread,
    .bpb-cooking {
        padding: 56px 0;
    }

    .bpb-uses {
        padding-bottom: 56px;
    }

    .bpb-testimonial {
        position: relative;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        margin-top: 18px;
    }

    .bpb-cta .create-card {
        padding: 56px 28px;
    }
}

/* ============================================================
   === Order a Free Flavor Sample page ===
   ============================================================ */

/* --- Hero --- */
.off-hero {
    position: relative;
    background: var(--c-navy);
    padding: 160px 0 90px;
    overflow: hidden;
}

.off-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(55% 50% at 85% 5%, rgba(255, 210, 0, .1), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .3) 0%, rgba(14, 33, 80, .38) 55%, rgba(12, 27, 61, .5) 75%);
    pointer-events: none;
}

.off-hero-row {
    position: relative;
    z-index: 1;
}

.off-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    list-style: none;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
}

.off-breadcrumb li {
    color: rgba(255, 255, 255, .6);
}

.off-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 9px;
    color: rgba(255, 255, 255, .5);
}

.off-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.off-breadcrumb li[aria-current] {
    color: var(--c-yellow);
}

.off-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 50.47px;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 22px;
}

.off-hero-lead {
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .9);
    max-width: 640px;
    margin: 0;
}

.off-hero-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 0 #ffd200, 0 0 60px 0 rgba(255, 210, 0, .18), 0 22px 50px 0 rgba(12, 27, 61, .35);
}

.off-hero-card img {
    width: 100%;
    height: 100%;
    aspect-ratio: 578 / 422;
    object-fit: cover;
    display: block;
}

.off-hero-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 118px;
    height: 118px;
    border-radius: 59px;
    background: var(--c-yellow);
    transform: rotate(-6deg);
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
    font-family: 'Shantell Sans', cursive;
    font-weight: 700;
    font-size: 12px;
    line-height: 13.8px;
    color: var(--c-navy);
    text-align: center;
}

/* --- Shared yellow rule --- */
.off-rule {
    display: block;
    width: 46px;
    height: 3px;
    border-radius: 3px;
    background: var(--c-yellow);
}

.off-rule--tall {
    width: 44px;
    height: 5px;
}

/* --- Sample Kit Favorites (cream) --- */
.off-favorites {
    background: #faf6ec;
    padding: 80px 0;
    position: relative
}

.off-favorites .container {
    position: relative;
    z-index: 9
}

.off-favorites-shape {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    bottom: 0
}

.off-fav-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.off-fav-intro {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 27px;
    line-height: 40.5px;
    color: var(--c-navy);
    text-align: center;
    margin: 0;
}

.off-fav-row {
    width: 100%;
}

.off-flavor-card {
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 18px;
    padding: 31px 29px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
}

.off-flavor-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background: #faf6ec;
    color: #16399e;
    font-size: 22px;
}

.off-flavor-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 32.4px;
    color: var(--c-navy);
    margin-bottom: 4px;
}

.off-flavor-desc {
    font-size: 14.5px;
    line-height: 21.75px;
    color: #3a4252;
    margin: 0;
}

.off-fav-outro {
    font-size: 18px;
    line-height: 29.16px;
    color: #3a4252;
    text-align: center;
    max-width: 1000px;
    margin: 0;
}

/* --- How to Use / What to Know (white, 2-col split) --- */
.off-info {
    background: #fff;
    padding: 80px 0;
}

.off-info-col {
    height: 100%;
    padding-right: 56px;
}

.off-info-col--border {
    padding-right: 0;
    padding-left: 56px;
    border-left: 1px solid rgba(12, 27, 61, .12);
}

.off-info-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 25.2px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin: 16px 0;
}

.off-info-title .accent-blue-solid {
    color: #16399e;
}

.off-info-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.off-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 13px;
    font-size: 16.5px;
    line-height: 23.93px;
    color: #1a2033;
}

.off-info-list li:last-child {
    margin-bottom: 0;
}

.off-check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    border-radius: 13px;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-size: 11px;
}

.off-info-note {
    font-family: 'Inter', sans-serif;
    font-size: 15.5px;
    line-height: 24.8px;
    color: #3a4252;
    margin: 0;
}

/* --- Request Form (cream) --- */
.off-form-sec {
    background: #faf6ec;
    padding: 80px 0;
}

.off-form-head {
    text-align: center;
    margin-bottom: 48px;
}

.off-form-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 39.9px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin: 0;
}

.off-form-heading .accent-blue-solid {
    color: #16399e;
}

.off-form-card {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 24px;
    padding: 49px;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.off-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    margin: 0;
}

.off-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--c-navy);
}

.off-input {
    width: 100%;
    height: 50px;
    background: #faf6ec;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 12px;
    padding: 0 17px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #1a2033;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.off-input:focus {
    outline: none;
    border-color: #16399e;
    box-shadow: 0 0 0 3px rgba(22, 57, 158, .12);
}

.off-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231a2033' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 17px center;
    padding-right: 44px;
}

.off-submit {
    margin-top: 28px;
}

.off-form-note {
    font-size: 13px;
    line-height: 21px;
    color: #3a4252;
    margin: 16px 0 0;
}

.off-form-note a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .off-hero {
        padding: 80px 0 64px;
    }

    .off-hero-title {
        font-size: 38px;
        line-height: 42px;
    }

    .off-hero-card {
        margin-top: 32px;
    }

    .off-fav-intro {
        font-size: 22px;
        line-height: 33px;
    }

    .off-info-col {
        padding-right: 0;
        margin-bottom: 40px;
    }

    .off-info-col--border {
        padding-left: 0;
        border-left: 0;
        margin-bottom: 0;
        border-top: 1px solid rgba(12, 27, 61, .12);
        padding-top: 40px;
    }

    .off-form-heading {
        font-size: 30px;
        line-height: 36px;
    }
}

@media (max-width: 767.98px) {

    .off-hero,
    .off-favorites,
    .off-info,
    .off-form-sec {
        padding: 56px 0;
    }

    .off-fav-inner {
        gap: 36px;
    }

    .off-form-card {
        padding: 32px 24px;
    }
}

/* ============================================================
   === Order a Free Sample page ===
   ============================================================ */

/* --- Hero --- */
.ofs-hero {
    position: relative;
    background: var(--c-navy);
    padding: 160px 0 90px;
    overflow: hidden;
}

.ofs-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(55% 50% at 85% 5%, rgba(255, 210, 0, .1), rgba(255, 210, 0, 0) 60%),
        linear-gradient(181deg, rgba(12, 27, 61, .3) 0%, rgba(14, 33, 80, .38) 55%, rgba(12, 27, 61, .5) 75%);
    pointer-events: none;
}

.ofs-hero-row {
    position: relative;
    z-index: 1;
}

.ofs-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    list-style: none;
    margin: 0 0 50px;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .4px;
}

.ofs-breadcrumb li {
    color: rgba(255, 255, 255, .6);
}

.ofs-breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: 9px;
    color: rgba(255, 255, 255, .5);
}

.ofs-breadcrumb a {
    color: rgba(255, 255, 255, .6);
}

.ofs-breadcrumb li[aria-current] {
    color: var(--c-yellow);
}

.ofs-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 49px;
    line-height: 50.47px;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 22px;
}

.ofs-hero-lead {
    font-size: 18px;
    line-height: 29.16px;
    color: rgba(255, 255, 255, .9);
    max-width: 640px;
    margin: 0;
}

.ofs-hero-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 0 60px 6px rgba(255, 210, 0, .18), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.ofs-hero-card img {
    width: 100%;
    height: 100%;
    aspect-ratio: 577 / 420;
    object-fit: cover;
    display: block;
}

.ofs-hero-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 118px;
    height: 118px;
    border-radius: 59px;
    background: var(--c-yellow);
    transform: rotate(-6deg);
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .4);
    font-family: 'Shantell Sans', cursive;
    font-weight: 700;
    font-size: 12px;
    line-height: 13.8px;
    color: var(--c-navy);
    text-align: center;
}

/* --- What's in the Kit (white, 2-col) --- */
.ofs-kit {
    background: #fff;
    padding: 80px 0;
}

.ofs-kit-media {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px #ffd200, 0 12px 30px -18px rgba(12, 27, 61, .4);
}

.ofs-kit-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 529 / 450;
    object-fit: cover;
    display: block;
}

.ofs-kit-text {
    font-size: 18px;
    line-height: 29.7px;
    color: #3a4252;
    margin-bottom: 17px;
}

.ofs-kit-text strong {
    font-weight: 700;
    color: var(--c-navy);
}

.ofs-kit-note {
    font-size: 18px;
    line-height: 29.7px;
    color: #3a4252;
    margin: 0;
    padding-top: 21px;
    border-top: 1px solid rgba(12, 27, 61, .12);
}

/* --- Request Form (cream) --- */
.ofs-form-sec {
    background: #faf6ec;
    padding: 80px 0;
}

.ofs-form-head {
    text-align: center;
    margin-bottom: 30px;
}

.ofs-form-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 39.9px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin: 0;
}

.ofs-form-heading .accent-blue-solid {
    color: #16399e;
}

.ofs-form-card {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 24px;
    padding: 49px;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.ofs-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    margin: 0;
}

.ofs-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--c-navy);
}

.ofs-input {
    width: 100%;
    height: 50px;
    background: #F6F8FD;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 12px;
    padding: 0 17px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #1a2033;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.ofs-input:focus {
    outline: none;
    border-color: #16399e;
    box-shadow: 0 0 0 3px rgba(22, 57, 158, .12);
}

.ofs-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231a2033' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 17px center;
    padding-right: 44px;
}

.ofs-submit {
    margin-top: 28px;
}

.ofs-form-note {
    font-size: 13px;
    line-height: 21px;
    color: #3a4252;
    margin: 16px 0 0;
}

.ofs-form-note a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.ofs-form-note a:hover {
    text-decoration: none
}

/* --- Responsive --- */
@media (max-width: 991.98px) {
    .ofs-hero {
        padding: 80px 0 64px;
    }

    .ofs-hero-title {
        font-size: 38px;
        line-height: 42px;
    }

    .ofs-hero-card {
        margin-top: 32px;
    }

    .ofs-kit-media {
        margin-bottom: 28px;
    }

    .ofs-form-heading {
        font-size: 30px;
        line-height: 36px;
    }
}

@media (max-width: 767.98px) {

    .ofs-hero,
    .ofs-kit,
    .ofs-form-sec {
        padding: 56px 0;
    }

    .ofs-form-card {
        padding: 32px 24px;
    }
}

.bg_gray {
    background: #FFF8E3
}

.bg_white {
    background: #fff
}

.no-shadow {
    box-shadow: none
}

.yellow-accent {
    color: var(--c-yellow);
}

.research-slider-area {
    padding-bottom: 90px
}

.research-slider .slide {
    padding: 15px;
    padding-bottom: 30px;
    min-height: inherit !important;
    float: none;
    height: auto
}

.research-slider .slick-track {
    display: flex
}

.research-slider .rd-stat-card {
    height: 100%
}

.research-slider .slick-list {
    margin-left: -15px;
    padding-right: 70px;
    margin-right: -15px
}

.section-action {
    margin-top: 30px
}

.custom_arrows {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px
}

.custom_arrows > div {
    min-width: 50px;
    width: 50px;
    min-height: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #0C1B3D;
    color: #0C1B3D;
    font-size: 20px;
    transition: all 0.4s;
    cursor: pointer
}

.custom_arrows > div:hover {
    background: var(--c-blue);
    color: #fff
}

.fsq-recognition-logos.alt {
    margin-top: 0
}

.fsq-recognition.fsq-award {
    padding: 30px 0
}

.three-col-slider .slide {
    padding: 0 15px;
    height: auto
}

.three-col-slider .slick-list {
    margin-left: -15px;
    margin-right: -15px
}

.three-col-slider .slick-track {
    display: flex
}

.three-col-slider {
    margin-bottom: 0 !important
}

.three-col-slider .slide > div {
    height: 100%
}

.mi-expanding .slick-dots,
.su-human .slick-dots,
.rc-videos .slick-dots,
.rs-flavors .slick-dots,
.rs-bulk .slick-dots,
.rd-resources .slick-dots,
.cb-shapes .slick-dots,
.white_slider .slick-dots {
    margin-top: 30px;
    position: inherit;
    bottom: auto;
}

.mi-expanding .slick-dots button::before,
.su-human .slick-dots button::before,
.rc-videos .slick-dots button::before,
.rs-flavors .slick-dots button::before,
.rs-bulk .slick-dots button::before,
.rd-resources .slick-dots button::before,
.cb-shapes .slick-dots button::before,
.white_slider .slick-dots button::before {
    display: none
}

.mi-expanding .slick-dots button,
.su-human .slick-dots button,
.rc-videos .slick-dots button,
.rs-flavors .slick-dots button,
.rs-bulk .slick-dots button,
.rd-resources .slick-dots button,
.cb-shapes .slick-dots button,
.white_slider .slick-dots button {
    padding: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 210, 0, 0.27);
}

.su-human .slick-dots button,
.rc-videos .slick-dots button,
.rs-flavors .slick-dots button,
.rd-resources .slick-dots button,
.cb-shapes .slick-dots button,
.white_slider .slick-dots button {
    background: rgba(0, 84, 164, 0.33);
}

.mi-expanding .slick-dots li.slick-active button,
.rs-bulk .slick-dots li.slick-active button {

    background: rgba(255, 210, 0, 1);
}

.su-human .slick-dots li.slick-active button,
.rc-videos .slick-dots li.slick-active button,
.rs-flavors .slick-dots li.slick-active button,
.rd-resources .slick-dots li.slick-active button,
.cb-shapes .slick-dots li.slick-active button,
.white_slider .slick-dots li.slick-active button {

    background: #0054a4;
}

.su-human .slick-dots {
    margin-top: 10px
}

.mi-program-row:last-child {
    margin-bottom: 0
}

.mi-expanding .slick-dots li {
    margin: 0;
    width: auto;
    height: auto;
    margin: 0 5px
}

.full-width .page-breadcrumb ol {
    margin: 0px 0 40px;
}

.three-col-slider.has-spaces .slide {
    padding: 30px 15px
}

.rc-video {
    box-shadow: none
}

.ws-sector-body .ws-badge {
    display: none
}

.rs-presentation .container {
    position: relative;
    z-index: 1
}

.rs-presentation .com-num-shape {
    position: absolute;
    bottom: 0;
    left: -15%;
    height: 100%
}

.rd-resources .three-col-slider .slide {
    padding-top: 6px
}

.cpg-slider-nav > .d-flex {
    gap: 15px
}

.content-text .fat-finish-lead a {
    color: var(--c-yellow);
    font-weight: 600;
    text-decoration: underline;
}

.fat-finish-lead a:hover {
    text-decoration: none
}

.su-awards.bg_light {
    background: #FAFAFA
}

.su-awards.bg_light .su-awards-heading {
    color: #0C1B3D;
}

.su-awards.bg_light .su-awards-sub {
    color: #3A4252
}

.su-awards.bg_light .su-awards-heading .accent {
    color: #16399E;
}

.bpb-subheading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.15;
    margin-bottom: 12px;
    color: #0C1B3D
}

.bpb-spec-panel .heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.15;
    margin-bottom: 20px;
    color: #0C1B3D
}

.bpb-specs-row {
    margin-top: 50px;
    position: relative;
    padding-top: 10px;
    border-top: 1px solid #E2E4E8;
}

.bpb-spec-row a:hover {
    text-decoration: none
}

.bpb-spec-panel {
    position: relative
}

.bpb-spec-panel.right::before {
    position: absolute;
    content: "";
    top: 50%;
    left: -18%;
    width: 1px;
    height: calc(100% - 200px);
    background: #E2E4E8;
    transform: translateY(-50%);
}

.distributor-shape {
    position: absolute;
    right: 40px;
}

.bpb-cook-col .checkmark {
    width: 30px;
    margin-bottom: 15px;
}

/*Custom Responsive*/
@media(max-width:1400px) {
    .banner-heading {
        font-size: 42px;
    }

    .page-banner {
        padding-top: 100px
    }

    .page-banner-actions {
        padding-top: 0
    }

    .fsq-logo img {
        max-height: 50px;
    }

    .cs-studies-head {
        margin-bottom: 10px;
        max-width: 70%;
    }

    .mi-final {
        margin-top: -150px;
    }

    .mi-final-card {
        padding: 60px
    }

    .mi-final-heading {
        font-size: 42px;
    }

    .years-of-remainig .years-of-logo {
        width: 200px;
    }

    .years-of-remainig .container {
        padding-top: 50px;
        padding-right: 50px;
    }

    .wm-stat {
        flex: 0 0 28%;
    }

    .wm-stats {
        gap: 10px;
        flex-wrap: wrap
    }
    .bpb-product {
    padding: 100px 0 0px;
}
}

@media(max-width:1200px) {
    .cpg-slider-nav {
        flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: flex-start
    }

    .cpg-slider-nav > .d-flex {
        justify-content: flex-start;
        margin-top: 20px
    }
}

@media(max-width:991px) {
    .page-banner {
        padding: 100px 0 50px;
    }

    .page-breadcrumb ol {
        font-size: 10px
    }

    .banner-heading .accent {
        display: inline
    }

    .page-banner-desc {
        font-size: 16px;
        line-height: 26px;
        max-width: 100%;
    }

    .page-banner-actions {
        padding-top: 0
    }

    .section {
        padding: 50px 0
    }

    .fsq-approach,
.fsq-brcgs,
.fsq-consistency,
.fsq-recognition{
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .fsq-brcgs-subhead {
        font-size: 18px
    }

    .content-img.with-border img,
    .page-banner-img {
        box-shadow: 10px 10px 0 -1px var(--c-yellow);
    }

    .banner-heading {
        font-size: 34px;
    }

    .fsq-cert-card {
        padding: 20px
    }

    .fsq-cert-title {
        font-size: 18px
    }

    .fsq-logo img {
        max-height: 50px;
    }

    .su-awards-heading {
        font-size: 32px;
    }

    .su-awards {
        padding: 50px 0
    }

    .fsq-certs {
        padding: 0 0 50px
    }

    .cs-testimonial {
        padding: 50px 0
    }

    .cs-quote-text {
        font-size: 16px;
        line-height: 26px;
    }

    .cs-studies-head {
        max-width: 100%;
        text-align: center
    }

    .page-banner-media {
        margin-top: 0
    }

    .cs-item-stat {
        font-size: 36px;
    }

    .cs-studies {
        padding: 0 0 50px
    }

    .contact-form-heading {
        font-size: 30px;
    }

    .contact-detail-value {
        font-size: 16px
    }

    .contact-area {
        padding: 50px 0
    }

    .page-banner-actions {
        margin-top: 15px
    }

    .emp-link-card {
        height: auto;
        padding: 15px;
    }

    .emp-link-title {
        font-size: 15px
    }

    .page-banner.full-width {
        text-align: center
    }

    .page-banner.full-width .page-banner-actions {
        flex-wrap: nowrap;
        justify-content: center
    }

    .page-banner.full-width .page-banner-actions .cta-btn {
        width: auto
    }

    .emp-resources {
        padding: 50px 0
    }

    body {
        font: 400 15px/28px 'Inter', sans-serif;
    }

    .os-history,
    .os-principles,
    .os-timeline-section,
    .os-video {
        padding: 50px 0
    }

    .os-video-sub,
    .su-awards-sub,
    .mk-why-lead {
        font-size: 16px;
        line-height: 25px
    }


    .os-legacy-bg {
        object-position: top left
    }

    .os-legacy-img {
        width: 46%
    }

    .os-legacy-copy {
        background: #fafafa;
    }

    .fsq-logo.no-shadow {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .aw-grid-section {
        padding: 50px 0
    }

    .mi-flavor {
        padding: 50px 0
    }

    .mi-principle-text {
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
    }

    .mi-principle {
        padding: 20px
    }

    .mi-principle-num {
        font-size: 26px
    }

    .mi-video.mi-video--spaced {
        margin-top: 40px
    }

    .mi-program-title {
        font-size: 20px;
    }

    .mi-program-copy p {
        font-size: 15.5px;
    }

    .mi-program-sep {
        margin: 40px 0
    }

    .mi-final {
        margin-top: -140px;
    }

    .years-of-remainig .container {
        padding-top: 40px;
        padding-right: 40px;
    }

    .years-of-remainig .years-of-logo {
        width: 150px;
    }

    .cta-btn {
        white-space: pre-wrap
    }

    .three-col-slider.has-spaces .slide {
        padding: 15px;
    }

    .su-card {
        box-shadow: none
    }

    .su-stat-copy,
    .su-section-intro,
    .su-env-note {
        font-size: 15px;
        line-height: 25px;
    }

    .su-source-list li,
    .su-econ-list li {
        font-size: 15px;
        line-height: 25px;
    }

    .rc-videos {
        padding-top: 40px;
        padding-bottom: 50px
    }

    .page-banner.rc-hero.full-width {
        padding-bottom: 120px;
    }

    .rc-browser {
        margin-top: -100px
    }

    .rc-browser-top {
        display: block;
        text-align: center
    }

    .rc-browser-title {
        margin-bottom: 20px
    }

    .rc-signup {
        width: 100%
    }

    .rc-video-play {
        width: 60px;
        height: 60px;
        font-size: 20px;
    }

    .rc-videos {
        padding-top: 0;
        padding-bottom: 50px;
    }

    .section {
        padding: 50px 0
    }

    .os-hero-sub,
    .ws-intro-body {
        font-size: 16px;
        line-height: 24px
    }

    .cr-benefits li,
    .content-text li {
        font-size: 15px;
        line-height: 28px
    }

    .cr-postings {
        padding: 50px 0
    }

    .ws-intro-heading {
        margin-bottom: 30px
    }


    .ws-sectors .snake-path {
        display: none
    }

    .ws-sector {
        padding: 50px 0;
    }

    .ws-intro {
        padding: 50px 0
    }

    .ws-sector-title {
        font-size: 26px;
    }

    .cta-btn {
        line-height: normal
    }

    .rs-presentation-title {
        font-size: 26px;
    }

    .rs-presentation .bg_image {
        object-fit: cover
    }

    .rs-flavor-title {
        font-size: 18px;
        line-height: normal
    }

    .rs-compare-num {
        font-size: 40px;
        letter-spacing: -1px;
        min-width: 80px;
        width: 80px;
        min-height: 80px;
        height: 80px;
        margin-bottom: 20px
    }

    .rs-bulk-card {
        min-height: 400px
    }

    .rs-bulk-num {
        display: none
    }

    .rs-bulk-title {
        font-size: 14px;
        line-height: normal;
    }

    .rs-bulk,
    .rs-flavors,
    .rs-sauces {
        padding: 50px 0
    }

    .cpg-best-text,
    .cpg-flavors-lead,
    .rs-text,
    .ct-lead,
    .rd-process-foot-text,
    .rd-process-lead,
    .ct-text,
    .content-text,
    .cm-team-text,
    .cm-service-text,
    .cb-shapes-foot,
    .cb-diff-text {
        font-size: 16px;
        line-height: 25px
    }

    .cpg-best {
        padding: 50px 0
    }

    .cpg-slider-seg {
        width: 14px;
    }

    .cpg-slider-seg.is-active {
        width: 18px;
    }

    .ct-intro,
    .ct-dishes,
    .ct-better,
    .ct-sauces {
        padding: 50px 0
    }

    .mk-why-intro {
        margin: 0 auto 20px;
    }

    .mk-stat-num {
        font-size: 40px
    }

    .ws-pullquote {
        font-size: 20px;
        line-height: 28px;
    }

    .mk-bcard {
        padding: 25px
    }

    .mk-bcard-title {
        font-size: 22px
    }

    .mk-text {
        font-size: 15px;
        line-height: 25px
    }

    .mk-benefits {
        padding-bottom: 0
    }

    .ws-badge {
        top: -50px;
    }

    .ws-sectors {
        padding: 50px 0
    }

    .mk-why {
        padding: 50px 0
    }

    .footer-cta-area.mk-cta {
        padding-top: 70px;
    }

    .rd-ww-title {
        font-size: 18px
    }

    .rd-res-head {
        margin-bottom: 20px;
    }

    .rd-step {
        padding: 0 calc(var(--bs-gutter-x) * .5)
    }

    .rd-text--lg {
        font-size: 22px;
        line-height: 30px;
    }

    .rd-intro,
    .rd-nextlevel,
    .rd-process,
    .rd-split,
    .rd-testimonials {
        padding: 50px 0
    }

    .rd-step {
        text-align: center
    }

    .rd-step-num {
        margin: 0 auto 20px;
    }

    .rd-blog-title {
        font-size: 16px
    }

    .cm-services-sub {
        font-size: 20px;
    }

    .cm-services {
        padding: 50px 0
    }

    .wm-stat-label {
        line-height: normal
    }

    .wm-brand-name {
        font-size: 22px
    }

    .wm-brand-card {
        padding: 20px
    }

    .wm-stat-num {
        font-size: 28px;
    }

    .wm-stats {
        flex-wrap: wrap
    }

    .wm-stat {
        margin: 10px 0
    }

    .bt-why,
.bt-who,
.bt-fq{
        padding: 50px 0
    }

    .bt-heading {
        font-size: 22px;
    }

    .fb-enhance-lead {
        font-size: 18px;
        line-height: 27px
    }

    .fb-enhance .fb-text,
    .fb-popular-head .fb-text,
    .fb-packaging-head .fb-text,
    .fb-trust-text,
    .mg-text--lg,
    .mg-packaging-head .mg-text,
    .cf-trust-text,
    .pb-why-head .pb-text,
    .pb-getband-text,

    .fb-ind-title {
        font-size: 18px
    }

    .fb-enhance {
        padding: 50px 0
    }

    .fb-popular {
        padding: 50px 0
    }

    .fb-industries {
        padding-top: 50px;
        padding-bottom: 300px
    }

    .pm-compare {
        padding: 50px 0
    }

    .mg-pack-title {
        font-size: 18px
    }

    .cpg-slider-section {
        padding-top: 0
    }

    .mg-whipped-card {
        padding: 35px
    }

    .mg-packaging {
        padding: 50px 0
    }

    .cf-trust-inner {
        padding: 50px
    }

    .cf-trust {
        margin-top: -300px;
    }

    .cf-preportioned {
        padding-top: 50px
    }

    .cf-why {
        padding: 50px 0;
        padding-bottom: 0
    }

    .cpg-slider-section {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .pb-getband {
        padding: 50px 0 0
    }

    .footer-cta-area.pb-cta {
        padding-top: 50px;
    }

    .pb-why {
        padding: 50px 0
    }

    .bd-flavors,
    .bd-getbulk,
    .bd-benefits,

    .bd-cat-title {
        font-size: 22px
    }

    .bd-ben-title {
        font-size: 20px
    }

    .cbs-flavors {
        padding: 50px 0
    }

    .cbs-why {
        padding: 50px 0
    }

    .cbs-why-lead {
        font-size: 20px;
        line-height: 30px
    }

    .wtb-info-title {
        font-size: 22px;
        line-height: 26px
    }

    .wtb-info-card {
        padding: 25px
    }

    .sau-check-text {
        font-size: 16px;
        line-height: 25px;
    }

    .sau-heading,
    .sau-why-heading,
    .sau-subhead {
        font-size: 32px;
        line-height: 36px
    }

    .sau-subhead {
        font-size: 28px;
        line-height: 30px
    }

    .sau-capabilities {
        padding: 50px 0
    }

    .gra-why-num img {
        opacity: 1;
        visibility: visible
    }

    .gra-why-num {
        -webkit-text-fill-color: #16399e;
    }

    .gra-why-col--muted {
        opacity: 1
    }

    .gra-flav-body {
        padding: 15px
    }

    .gra-flavors-cta {
        text-align: center
    }

    .gra-formats {
        padding: 50px 0
    }

    .gra-why-title {
        font-size: 16px;
        line-height: 20px;
    }

    .gra-why-col {
        padding: 0px
    }

    .gla-fmt-body {
        padding: 20px
    }

    .fat-top-title {
        font-size: 20px
    }

    .fat-what-title {
        font-size: 22px
    }

    .fat-finish-lead {
        font-size: 16px;
        line-height: 25px
    }

    .aio-heading {
        font-size: 26px;
        line-height: 32px;
    }

    .aio-diff-note,
    .mar-intro,
    .ibs-intro-text,
    .ibs-wtb-text,
    .ibs-intro-lead,
    .ibs-why-text,
    .off-fav-outro,
    .off-info-list li,
    .bpb-quality-intro,
    .bpb-cooking-intro {
        font-size: 16px;
        line-height: 25px
    }

    .su-awards.bg_light .fsq-logo {
        box-shadow: none
    }

    .ibs-intro-display {
        font-size: 25px;
        line-height: 33px;
    }

    .aio-why {
        padding: 50px 0
    }

    .mar-ds-title {
        font-size: 20px
    }

    .cta-btn {
        text-align: center
    }

    .mar-prof-body {
        padding: 20px
    }

    .mar-ds {
        padding: 50px 0
    }

    .mar-ds-card {
        padding: 25px
    }

    .rs-presentation-title {
        font-size: 22px;
    }

    .ibs-heading {
        font-size: 26px;
        line-height: 32px;
    }

    .ibs-portions-head {
        text-align: center;
        margin-bottom: 20px
    }

    .ibs-portions-title {
        font-size: 20px
    }

    .ibs-industry-head {
        text-align: center
    }

    .ibs-ind-body {
        padding: 25px
    }

    .ibs-intro {
        padding: 50px 0
    }

    .ibs-portions-list {
        display: block
    }

    .ibs-portions-list li {
        max-width: 100%
    }

    .ibs-portions-body {
        padding: 25px
    }

    .ibs-portions {
        padding: 0 0 50px
    }

    .ibs-ind-title {
        font-size: 16px
    }

    .ssb-fact-title {
        font-size: 18px
    }

    .off-fav-intro {
        font-size: 18px;
        line-height: 30px;
    }

    .off-flavor-card {
        padding: 20px
    }

    .off-flavor-title {
        font-size: 18px
    }

    .off-info-col--border {
        border: none;
        padding: 0
    }

    .off-info-col {
        margin-bottom: 0
    }

    .off-flavor-card {
        flex-direction: column
    }

    .off-favorites,
    .off-info {
        padding: 50px 0
    }

    .bpb-subheading {
        font-size: 16px
    }

    .bpb-info-title {
        font-size: 24px;
    }

    .bpb-cooking {
        padding: 50px 0
    }

    .bpb-cook-text {
        margin-bottom: 0
    }

    .bpb-usebox-col {
        padding: 15px
    }

    .bpb-dist-title {
        font-size: 26px
    }

    .bpb-product {
        padding: 110px 0 50px;
    }

    .bpb-info {
        margin-top: 0;
    }

    .bpb-info-actions {
        flex-direction: column;
        width: 100%
    }

    .bpb-info-actions .cta-btn {
        width: 100%
    }

    .bpb-distributor-section {
        padding-top: 0;
    }

    .bpb-dist-media {
        width: 300px
    }

    .distributor-shape {
        display: none
    }

    .bpb-quality {
        padding: 50px 0
    }

    .bpb-pack-card {
        padding: 25px
    }

    .bpb-pack-title, .bpb-cook-title {
        font-size: 18px;
        line-height: normal
    }

    .bpb-longform {
        padding: 50px 0;
    }

    .bpb-tablist {
        flex-direction: row;
    }

    .bpb-testimonial {
        left: 0
    }
    .bpb-cook-media{
        margin-top: 15px
    }
    .bpb-cook-col{
        padding-left: 0
    }
      .wtb-find-subhead {
    font-size: 26px;
    line-height: 32px;
}
    .mission-heading {
    font-size: 26px;
}
}

@media(max-width:767px) {
    .bpb-info {
        margin-top: 32px;
    }

    .sau-heading,
    .sau-why-heading,
    .sau-subhead {
        font-size: 26px;
        line-height: 32px
    }

    .sau-heading,
    .sau-why-heading,
    .sau-subhead {
        font-size: 22px;
        line-height: 28px
    }

    .rs-bulk-num {
        display: block
    }

    .banner-heading {
        font-size: 36px;
    }

    .container {
        padding: 0 20px
    }

    .section-heading {
        font-size: 28px;
    }

    .fsq-cert-card {
        padding: 20px
    }

    .fsq-cert-title {
        font-size: 16px
    }

    .fsq-logo img {
        max-height: 55px
    }

    .cs-item-stat {
        font-size: 36px;
    }

    .media-year-head {
        flex-direction: column
    }

    .contact-detail-value {
        font-size: 15px
    }

    .contact-detail-address br {
        display: none
    }

    .emp-link-card {
        height: 100%
    }



    .os-legacy {
        display: block
    }

    .os-legacy-bg {
        position: inherit;
        width: 100%;
    }

    .os-legacy-img {
        position: inherit;
        left: auto;
        width: 100%;
        bottom: auto;
        display: block;
        margin: 0 auto;
        transform: translateX(0);
        margin-top: -200px;
    }

    .mi-video {
        margin-top: 0
    }

    .mi-flavor {
        padding: 50p 0
    }

    .years-of-remainig .container {
        padding-top: 30px;
        padding-right: 30px;
    }

    .years-of-remainig .years-of-logo {
        width: 160px;
    }

    .su-source-list,
    .su-stats-grid {
        column-count: 2;
    }

    .rc-videos .slick-dots {
        margin-top: 0
    }

    .rc-preview-list {
        list-style: none;
        margin: 0;
        padding: 0;
        column-count: 3;
        column-gap: 26px;
        filter: blur(3.5px);
        opacity: .55;
        pointer-events: none;
        user-select: none;
    }

    .rc-gate {
        position: absolute;
        top: 0;
        left: 50%;
        width: 100%;
        transform: translateX(-50%);
    }

    .ws-sector-title {
        font-size: 24px;
    }

    .ws-sectors {
        padding-top: 30px;
        padding-bottom: 50px
    }

    .rs-presentation .com-num-shape {
        display: none
    }

    .rs-compare-num {

        font-size: 35px;
        letter-spacing: 0px;
        min-width: 70px;
        width: 70px;
        min-height: 70px;
        height: 70px;
        transform: translateX(0px);
        margin-left: 0;
        margin-bottom: 30px;
    }

    .rs-compare {
        padding-left: 0
    }

    .rs-bulk-card {
        min-height: 400px;
    }

    .ct-section-intro {
        text-align: center
    }

    .rs-presentation.cpg-slider-section {
        padding-top: 50px;
    }

    .ws-pullquote {
        font-size: 20px;
        line-height: 30px;
    }

    .mk-heading,
    .mk-bcard-title,
    .mk-why-heading {
        font-size: 22px;
    }

    .mk-benefits {
        padding-bottom: 0
    }

    .mk-heading,
    .mk-bcard-title,
    .mk-why-heading {
        font-size: 28px;
    }

    .mk-bcard-title {
        font-size: 22px
    }

    .cm-services-list {
        column-count: 2;
    }

    .cb-video {
        margin: 30px 0;
    }

    .cb-diff-band {
        padding: 30px
    }

    .cl-video-area {
        margin-top: 0;
        padding: 0 20px;
        padding-top: 50px !important
    }

    .cl-video-area .cl-heading--light {
        color: #0e2357
    }

    .cl-how-note,
    .cl-how-head,
    .cl-how-intro {
        text-align: center;
        font-size: 16px;
        line-height: 25px
    }

    .cl-contact-lead {
        font-size: 16px;
        line-height: 25px
    }

    .section-heading {
        font-size: 26px;
    }

    .fb-ind-col {
        opacity: 1;
    }

    .fb-ind-col .fb-ind-num {
        color: #004D96;
        -webkit-text-fill-color: #004D96;
    }

    .fb-ind-num img {
        opacity: 1;
        visibility: visible
    }

    .fb-industries {
        padding-bottom: 50px
    }

    .fb-trust {
        margin-top: 0
    }

    .cf-trust-inner {
        padding: 30px
    }

    .cf-trust {
        margin-top: 0
    }

    .cf-trust {
        padding-bottom: 0
    }

    .cf-why {
        padding-bottom: 0
    }

    .wm-stat {
        flex: 0 0 auto;
    }

    .cpg-slider-nav {
        flex-direction: column-reverse
    }

    .cpg-slider-nav > .d-flex {
        justify-content: center;
        margin-top: 20px
    }

    .bd-cat-title {
        font-size: 22px
    }

    .wm-stat-num {
        font-size: 24px;
    }

    .bd-ben-title {
        font-size: 18px
    }

    .fb-ind-num {
        font-size: 30px
    }


    .bd-benefits-head {
        text-align: center
    }

    .ws-sectors {
        padding: 50px 0
    }

    .gra-heading {
        font-size: 26px
    }

    .gra-why-title {
        font-size: 18px
    }

    .gra-flavors-cta {
        text-align: center
    }

    .gra-why-cols > [class*="col-"] .gra-why-col {
        border: none
    }

    .mi-hero-eyebrow {
        font-size: 14px
    }

    .gra-why-cols > [class*="col-"] .gra-why-col {
        padding: 0
    }

    .mar-prof-head {
        text-align: center
    }

    .mar-ds-head {
        text-align: center;
        margin-bottom: 30px
    }

    .mar-ds-card {
        padding: 25px
    }

    .ibs-wtb-card {
        text-align: center
    }

    .ibs-wtb-actions {
        justify-content: center
    }

    .ibs-portions-media {
        min-height: 260px;
        height: auto;
        background: transparent;
    }

    .bpb-product {
        padding-top: 95px
    }

    .bpb-breadcrumb ol {
        gap: 0 5px;
        line-height: 20px;
    }



    .bpb-distributor-section {
        padding-top: 0
    }

    .bpb-pack-row {
        margin-top: 0;
    }

    .bpb-pack-card {
        padding: 20px
    }

    .bpb-pack-title {
        font-size: 18px;
        margin-bottom: 10px;
        line-height: normal
    }

    .bpb-pack-icon {
        margin-bottom: 12px
    }

    .bpb-tab-title {
        font-size: 22px;
    }

    .bpb-use-title {
        font-size: 16px
    }

    .bpb-cooking-head {
        text-align: center;
        margin-bottom: 30px
    }

    .bpb-dist-media {
        right: 22px;
        bottom: 0;
        width: 260px;
    }

    .bpb-product {
        padding-bottom: 0
    }

    .distributor-shape {
        display: none
    }

    .bpb-cook-row > [class*="col-"] .bpb-cook-col,
    .bpb-cook-row > [class*="col-"]:not(:first-child) .bpb-cook-col {
        padding-left: 0
    }

    .bpb-cook-col {
        text-align: center
    }

    .bpb-cook-title {
        font-size: 18px;
        line-height: 22px
    }

    .bpb-cook-col .checkmark {
        margin: 0 auto 15px;
        display: none
    }

    .bpb-cook-media {
        margin-bottom: 15px
    }

    .ct-intro-text {
    font-size: 18px;
    line-height: 28px;
}
    .wtb-find-subhead {
    font-size: 22px;
    line-height: 28px;
}
    
}

@media(max-width:575px) {
    .bpb-product {
        padding-bottom: 50px
    }

    .off-info-col {
        margin-bottom: 30px
    }

    .off-info-col.off-info-col--border {
        margin-bottom: 0
    }

    .cbs-serve-title {
        font-size: 13px
    }

    .cm-services-list {
        column-count: 1;
    }

    .su-source-list,
    .su-stats-grid {
        column-count: 1;
    }

    .mi-final {
        margin-top: -50px;
    }

    .media-year-head {
        flex-direction: row
    }

    .page-banner {
        text-align: center
    }

    .content-img {
        margin-bottom: 30px
    }

    .fsq-logo img {
        max-height: 45px;
    }

    .fsq-logo {
        padding: 15px
    }

    .page-banner-media {
        margin-top: 30px
    }

    .page-banner.full-width .page-banner-actions {
        flex-wrap: wrap
    }

    .rc-signup {
        display: block;
        width: 100%;
    }

    .rc-signup-input {
        width: 100%;
        height: 50px;
        border-radius: 50px;
        margin-bottom: 10px;
    }

    .rc-preview-list li {
        padding: 2px 0
    }

    .rc-videos {
        padding-top: 0
    }

    .ws-blob {
        width: 100%;
        height: auto;
        border-radius: 120px 130px 340px 360px / 130px 120px 360px 340px;
        margin-bottom: 30px;
    }

    .ws-sector-body .ws-badge {
        display: inline-block;
        position: inherit;
        width: auto;
        top: auto;
        left: auto;
        transform: translateX(0);
    }

    .ws-col-media .ws-badge {
        display: none
    }

    .ws-sectors .snake-path {
        display: none
    }

    .ws-sector-body {
        text-align: center
    }

    .ws-intro {
        text-align: center
    }

    .rs-compare {
        margin-bottom: 30px
    }

    .rs-bulk-card {
        min-height: 300px;
    }

    .rs-compare-media {
        margin-bottom: 30px
    }

    .ct-better-split {
        margin-bottom: 0;
    }

    .ws-sector {
        padding: 15px 0;
    }

    .rd-text--lg {
        font-size: 20px;
        line-height: 30px;
    }

    .custom_arrows {
        justify-content: center;
        margin-bottom: 20px;
    }

    .fb-enhance-lead {
        margin-bottom: 15px
    }



    .cf-what-list {
        margin-top: 30px
    }

    .cf-used-media {
        margin-bottom: 30px
    }

    .cpg-slider {
        padding-top: 0
    }

    .wm-stat {
        flex: 1
    }

    .cpg-slider-nav {
        align-items: center
    }




    .bpb-distributor {
        padding: 20px;
        text-align: center;
        margin: 0
    }

    .bpb-dist-title {
        font-size: 26px
    }

    .bpb-dist-media.alt {
        position: inherit;
        width: 60%;
        bottom: auto;
        right: auto;
        margin: 0 auto
    }

    .distributor-shape {
        display: none
    }

    .bpb-shape-two,
    .bpb-shape-one {
        display: none
    }

    .bpb-testimonial {
        margin-bottom: 30px
    }
    .bpb-tablist{
        flex-direction: column
    }
    .wtb-find-info{
        text-align: center
    }
    .wtb-find-subhead {
    text-align: center;
}

}


/* =================================================================
   === FAQ accordion (shared by every page) ===
   ================================================================= */
.faq-area {
    padding: 80px 0;
}

.faq-head {
    margin-bottom: 40px;
    text-align: center;
}

.faq-list {
    max-width: 920px;
    margin: 0 auto;
    border-top: 1px solid rgba(12, 27, 61, .12);
}

.faq-item {
    border-bottom: 1px solid rgba(12, 27, 61, .12);
}

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: none;
    border: 0;
    padding: 23px 4px;
    text-align: left;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    color: var(--c-navy);
}

.faq-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 2px solid #16399e;
    border-radius: 15px;
    color: #16399e;
    font-size: 12px;
    transition: transform .3s ease;
}

.faq-item.is-open .faq-icon,
.faq-q[aria-expanded="true"] .faq-icon {
    transform: rotate(45deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.faq-a p {
    margin: 0;
    padding: 0 4px 24px;
    font-size: 16px;
    line-height: 26px;
    color: #3a4252;
}

.faq-a a {
    color: var(--c-blue);
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .faq-area {
        padding: 56px 0;
    }

    .faq-head {
        margin-bottom: 30px;
    }

    .faq-q {
        font-size: 17px;
        line-height: 26px;
    }
}

@media (max-width: 767.98px) {
    .faq-area {
        padding: 50px 0;
    }

    .faq-q {
        font-size: 16px;
        line-height: 25px;
        padding: 15px 4px;
    }
}



/* =================================================================
   === new css start ===
   ================================================================= */
.create-card .footer-cta-shape-7 {
    display: none;
}
.page-banner-image{
    position: relative
}
.page-banner-image::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    background: #0C1B3D;
    opacity: 0.5;
    z-index: 1
}
.page-breadcrumb.alt ol {
    text-align: center;
    justify-content: center;
    margin: 15px 0 50px;
    font-size: 11px
}
.page-banner-actions.alt{
    justify-content: center
}
.text-italic{
    font-style: italic
}
.has-thumb-right{
    padding-right: 80px
}
.has-thumb-right .tl-thumb {
    right: 30px;
    position: absolute;
    bottom: 20px;
    width: 80px;
}

.our-story-area {
   padding: 80px 0;
    position: relative
}
.our-story-area .border{
    position: absolute;
    width: 94px;
    height: 2px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.3)
}
.our-story-text{
    color: #3A4252
}
.mi-left-shape{
    position: absolute;
    left: 0;
    bottom: 0;
    filter: grayscale(1)
}
.sce-image .mi-video-play::before{
    display: none
}
.content-text p .accent-blue{
    color: #16399E
}
.sce-area{
    padding: 80px 0 230px;
    position: relative
}
.sce-area .divider{
    position: absolute;
    content: "";
    width: 100px;
    height: 2px;
    background: rgba(0, 0, 0, 0.3);
    left: 50%;
    top: 0;
    transform: translateX(-50%)
}
.mi-video.rd-intro-img{
    box-shadow: none;
    overflow: visible;
    position: relative;
    
}
.mi-video.rd-intro-img img{
    aspect-ratio: 0;
    box-shadow: 14px 14px 0 -1px var(--c-yellow);
    
}
.mi-video.rd-intro-img::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.20);
    border-radius: 22px
}

.rd-video::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.20);
    border-radius: 22px
}

.types-of-fillings{
    position: relative
}
.types-of-fillings .border{
    position: absolute;
    width: 100px;
    height: 2px;
    left: 50%;
    bottom: 0;
    background: rgba(0, 0, 0, 0.30);
    transform: translateX(-50%)
}

.create-desc .accent-blue{
    color: #16399E
}
.ct-intro{
    position: relative
}
.ct-intro .border{
    position: absolute;
    background: #FFD200;
    width: 48px;
    height: 3px;
    border-radius: 3px;
    left: 50%;
    top: 50px;
    transform: translateX(-50%);
    z-index: 9;
    border: none!important;
    display: block
}

.psd-area{
    background: #fafafa;
    padding: 80px 0 80px
}

/* ============================================================
   === Butter Dollops page ===
   ============================================================ */

/* --- Shared section heading --- */
.bd-sec-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 39.9px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 16px;
}

.bd-sec-title .accent-blue-solid {
    color: #16399e;
}

.bd-sec-title .accent-yellow {
    color: var(--c-yellow);
}

.bd-sec-title_center {
    text-align: center;
}

/* --- Shared photo card (yellow offset) --- */
.bd-shot {
	position:relative;
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(150deg, #f0dca8 0%, #e0bd6a 55%, #c79a3e 100%);
    box-shadow: 14px 14px 0 -1px var(--c-yellow), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.bd-shot img {
    width: 100%;
    height: 100%;
    aspect-ratio: 590 / 393;
    object-fit: cover;
    display: block;
}

/* --- What is a butter dollop --- */
.bd-whatis {
    background: #fff8e3;
    padding: 80px 0;
}

.bd-whatis-row {
    --bs-gutter-x: 60px;
    --bs-gutter-y: 40px;
}

.bd-whatis-text p {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 15px;
}

.bd-whatis-text p:last-child {
    margin-bottom: 0;
}

/* --- Any flavor, in dollop form --- */
.bd-anyflavor {
    background: #fbfcff;
    padding: 90px 0;
}

.bd-anyflavor-row {
    --bs-gutter-x: 72px;
    --bs-gutter-y: 40px;
}

.bd-anyflavor-text p {
    max-width: 520px;
    font-size: 18px;
    line-height: 29.16px;
    color: #3a4252;
    margin-bottom: 30px;
}

/* spec strip */
.bd-spec {
    display: flex;
    margin: 64px 0 0;
    border-top: 1px solid rgba(12, 27, 61, .12);
}

.bd-spec-col {
    flex: 1 1 0;
    min-width: 0;
    padding: 30px 34px;
}

.bd-spec-col:first-child {
    padding-left: 0;
}

.bd-spec-col+.bd-spec-col {
    border-left: 1px solid rgba(12, 27, 61, .12);
}

.bd-spec dt {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11.5px;
    line-height: 18.63px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #3a4252;
    margin-bottom: 8px;
}

.bd-spec dd {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -.2px;
    color: var(--c-navy);
    margin: 0;
}

.bd-spec-note {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14.5px;
    line-height: 18.85px;
    letter-spacing: -.2px;
    color: #3a4252;
    margin-top: 2px;
}

.bd-spec-flag {
    display: block;
    margin-top: 12px;
    padding-left: 12px;
    border-left: 3px solid var(--c-yellow);
}

.bd-spec-flag-tag {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 9.5px;
    line-height: 14.73px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--c-navy);
}

.bd-spec-flag-text {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20.15px;
    color: #3a4252;
}

.bd-spec-flag-text a {
    color: #16399e;
    text-decoration: underline;
}

/* --- See one work on the line --- */
.bd-linevideo {
    background: #fbfcff;
    padding: 0 0 90px;
}

.bd-linevideo .bd-sec-title {
    margin-bottom: 40px;
}

.bd-linevideo-frame {
    position: relative;
    display: block;
    border-radius: 18px;
    overflow: hidden;
    background: var(--c-navy);
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.bd-linevideo-frame img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1238 / 546;
    object-fit: cover;
    display: block;
    opacity: .92;
}

.bd-linevideo-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    padding-left: 5px;
    box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .6);
    transition: transform .2s ease;
}

.bd-linevideo-frame:hover .bd-linevideo-play {
    transform: translate(-50%, -50%) scale(1.06);
}

/* --- Some flavors to get you started --- */
.bd-inspo {
    background: #fff;
    padding: 90px 0;
}

.bd-inspo-head {
    max-width: 880px;
    margin-bottom: 32px;
}

.bd-inspo-head p {
    font-size: 18px;
    line-height: 29.16px;
    color: #3a4252;
    margin: 0;
}

.bd-inspo-row {
    --bs-gutter-x: 60px;
    --bs-gutter-y: 0;
    margin-bottom: 40px;
}

.bd-inspo-card {
    padding: 29px 0;
    border-bottom: 1px solid rgba(12, 27, 61, .12);
}

.bd-inspo-row>[class*="col-"]:nth-child(-n+2) .bd-inspo-card {
    border-top: 1px solid rgba(12, 27, 61, .12);
}

.bd-inspo-card-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 13px;
}

.bd-inspo-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.bd-inspo-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 12.5px;
    line-height: 20.25px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--c-navy);
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--c-yellow);
}

.bd-inspo-text {
    font-size: 16.5px;
    line-height: 26.4px;
    color: #3a4252;
    margin: 0;
}

/* --- What a dollop actually saves you --- */
.bd-saves {
    background: #fff8e3;
    padding: 90px 0;
}

.bd-saves .bd-sec-title {
    max-width: 880px;
    margin-bottom: 48px;
}

.bd-saves-row {
    --bs-gutter-x: 64px;
    --bs-gutter-y: 40px;
}

.bd-saves-row>[class*="col-"]+[class*="col-"] .bd-saves-col {
    border-left: 1px solid rgba(12, 27, 61, .18);
    padding-left: 32px;
}

.bd-saves-num {
    display: block;
    font-family: 'Baloo 2', 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 34px;
    line-height: 61px;
    letter-spacing: -1.36px;
    color: #004d96;
}

.bd-saves-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -.96px;
    text-transform: uppercase;
    color: #001e3b;
    margin-bottom: 20px;
}

.bd-saves-text {
    font-size: 16px;
    line-height: 24px;
    color: #3a4252;
    margin: 0;
}

/* --- Stocked dollop flavors --- */
.bd-stocked {
    background: #fbfcff;
    padding: 90px 0;
}

.bd-stocked-head {
    --bs-gutter-y: 24px;
    margin-bottom: 34px;
}

.bd-stocked-head p {
    max-width: 560px;
    font-size: 18px;
    line-height: 29.16px;
    color: #3a4252;
    margin: 0;
}

.bd-stocked-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

.bd-stocked-list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    columns: 3;
    column-gap: 70px;
}

.bd-stocked-list li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(12, 27, 61, .12);
    break-inside: avoid;
}

.bd-stocked-num {
    flex: 0 0 auto;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 11px;
    line-height: 17.82px;
    letter-spacing: 1.2px;
    color: #16399e;
    opacity: .7;
}

.bd-stocked-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 21px;
    color: var(--c-navy);
    border-bottom: 1px solid rgba(13, 44, 84, .28);
}

.bd-stocked-note {
    font-size: 16.5px;
    line-height: 26.4px;
    color: #3a4252;
    margin: 0;
}

.bd-stocked-note a {
    color: #16399e;
    text-decoration: underline;
}

/* --- Get a sample kit --- */
.bd-kit {
    background: #fbfcff;
    padding: 0 0 90px;
}

.bd-kit-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 48px;
    background: #0054a4;
    border-radius: 18px;
    padding: 47px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
}

.bd-kit-text {
    flex: 1 1 auto;
    max-width: 560px;
}

.bd-kit-title {
    color: #fff;
}

.bd-kit-text p {
    font-size: 18px;
    line-height: 29.16px;
    color: #dbe7f2;
    margin-bottom: 24px;
}

.bd-kit-media {
    position: absolute;
    right: 40px;
    bottom: 30px;
}

.bd-kit-media img {
    width: 100%;
    height: auto;
    display: block;
}



.bd-kit-glow_sm {
    position: absolute;
    left: 47%;
    top: 30px
}

.bd-kit-glow_lg {
    position: absolute;
    right: 0;
    bottom: 0
}

/* --- FAQ band --- */
.faq-area.bd-faq {
    background: #faf6ec;
}

/* --- Butter Dollops responsive --- */
@media (max-width: 1199.98px) {
    .bd-stocked-list {
        column-gap: 44px;
    }

    .bd-kit-card {
        gap: 32px;
        padding: 36px;
    }
}

@media (max-width: 991.98px) {

    .bd-whatis,
    .bd-anyflavor,
    .bd-inspo,
    .bd-saves,
    .bd-stocked {
        padding: 70px 0;
    }

    .bd-linevideo,
    .bd-kit {
        padding-bottom: 70px;
    }

    .bd-sec-title {
        font-size: 30px;
        line-height: 36px;
    }

    .bd-spec {
        flex-wrap: wrap;
    }

    .bd-spec-col {
        flex: 1 1 50%;
        padding: 24px 24px;
    }

    .bd-spec-col:nth-child(odd) {
        padding-left: 0;
    }

    .bd-spec-col:nth-child(odd)+.bd-spec-col {
        border-left: 1px solid rgba(12, 27, 61, .12);
    }

    .bd-spec-col:nth-child(odd) {
        border-left: 0;
    }

    .bd-inspo-row>[class*="col-"]:nth-child(2) .bd-inspo-card {
        border-top: 0;
    }

    .bd-saves-row>[class*="col-"]+[class*="col-"] .bd-saves-col {
        border-left: 0;
        padding-left: 0;
    }

    .bd-stocked-list {
        columns: 2;
    }

    .bd-kit-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .bd-kit-media {
        max-width: 100%;
    }

    .bd-kit-glow_sm {
        right: 24px;
    }
}

@media (max-width: 767.98px) {

    .bd-whatis,
    .bd-anyflavor,
    .bd-inspo,
    .bd-saves,
    .bd-stocked {
        padding: 56px 0;
    }

    .bd-linevideo,
    .bd-kit {
        padding-bottom: 56px;
    }

    .bd-sec-title {
        font-size: 26px;
        line-height: 32px;
    }

    .bd-shot {
        box-shadow: 8px 8px 0 -1px var(--c-yellow), 0 18px 40px -24px rgba(12, 27, 61, .35);
    }

    .bd-anyflavor-text p,
    .bd-inspo-head p,
    .bd-stocked-head p,
    .bd-kit-text p {
        font-size: 16px;
        line-height: 26px;
    }

    .bd-spec-col {
        flex: 1 1 100%;
        padding: 20px 0;
        border-left: 0 !important;
        border-top: 1px solid rgba(12, 27, 61, .12);
    }

    .bd-spec-col:first-child {
        border-top: 0;
    }

    .bd-linevideo-play {
        width: 62px;
        height: 62px;
        font-size: 21px;
    }

    .bd-stocked-list {
        columns: 1;
    }

    .bd-stocked-actions .cta-btn {
        width: 100%;
        justify-content: center;
    }

    .bd-kit-card {
        padding: 28px 24px;
    }

    .bd-kit-glow_lg {
        display: none;
    }
}

/* --- Gutter overflow fix -------------------------------------------------
   A Bootstrap .row applies negative inline margins of gutter/2, while
   .container only pads by its own gutter/2 (12px by default). Any row
   gutter wider than the container's therefore drags content past the
   container edge — clipping the yellow offset shadows and killing the
   side margin. Matching the container's gutter to the row's cancels it. */
.bd-whatis .container {
    --bs-gutter-x: 60px;
}

.bd-anyflavor .container {
    --bs-gutter-x: 72px;
}

.bd-inspo .container {
    --bs-gutter-x: 60px;
}

.bd-saves .container {
    --bs-gutter-x: 64px;
}

.bd-serve .container {
    --bs-gutter-x: 30px;
}

@media (max-width: 991.98px) {

    /* stacked below lg — fall back to normal page margins */
    .bd-whatis .container,
    .bd-anyflavor .container,
    .bd-inspo .container,
    .bd-saves .container,
    .bd-serve .container {
        --bs-gutter-x: 24px;
    }

    .bd-whatis-row,
    .bd-anyflavor-row,
    .bd-inspo-row,
    .bd-saves-row,
    .bd-serve-row {
        --bs-gutter-x: 24px;
    }
}

/* ============================================================
   === Resources page ===
   ============================================================ */

/* --- Shared section heading --- */
.rs-sec-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 42px;
    line-height: 43.68px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 15px;
}

.rs-sec-title .accent-blue-solid {
    color: #16399e;
}

/* --- Annual Flavor Guide --- */
.rs-annual {
    background: #fff8e3;
    padding: 100px 0;
}

.rs-annual-row {
    --bs-gutter-x: 68px;
    --bs-gutter-y: 48px;
}

.rs-annual .container {
    --bs-gutter-x: 68px;
}

/* faux book cover */
.rs-cover {
    position: relative;
    overflow: hidden;
    aspect-ratio: 457 / 609;
    background: var(--c-navy);
    border-radius: 14px;
    box-shadow: 0 30px 60px -28px rgba(12, 27, 61, .6);
}

.rs-cover-spine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 9px;
    background: var(--c-yellow);
    z-index: 3;
}

.rs-cover-swatches {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    top: 54%;
    display: flex;
    flex-wrap: wrap;
}

.rs-cover-swatches span {
    width: 25%;
    height: 33.3333%;
}

.rs-cover-swatches span:nth-child(1) { background: #e8c46a; }
.rs-cover-swatches span:nth-child(2) { background: #c9973f; }
.rs-cover-swatches span:nth-child(3) { background: #8fa85c; }
.rs-cover-swatches span:nth-child(4) { background: #d9622b; }
.rs-cover-swatches span:nth-child(5) { background: #b8452f; }
.rs-cover-swatches span:nth-child(6) { background: #f0dfa8; }
.rs-cover-swatches span:nth-child(7) { background: #6e8b4a; }
.rs-cover-swatches span:nth-child(8) { background: #e2a83c; }
.rs-cover-swatches span:nth-child(9) { background: #a85c2e; }
.rs-cover-swatches span:nth-child(10) { background: #f2c14e; }
.rs-cover-swatches span:nth-child(11) { background: #7c4a2a; }
.rs-cover-swatches span:nth-child(12) { background: #dccb94; }

.rs-cover-top,
.rs-cover-foot {
    position: absolute;
    left: 32px;
    right: 32px;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.rs-cover-top {
    top: 33px;
    gap: 9px;
}

.rs-cover-foot {
    bottom: 34px;
}

.rs-cover-brand {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 11px;
    line-height: 17.6px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--c-yellow);
}

.rs-cover-year {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 44px;
    line-height: 39.6px;
    letter-spacing: -1px;
    color: #fff;
}

.rs-cover-kicker,
.rs-cover-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 30px;
    line-height: 30.6px;
    letter-spacing: -.7px;
    text-transform: uppercase;
}

.rs-cover-kicker {
    color: #fff;
}

.rs-cover-title {
    color: var(--c-yellow);
}

.rs-annual-lead {
    font-size: 18px;
    line-height: 28.8px;
    color: #3a4252;
    margin-bottom: 26px;
}

.rs-checklist {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
}

.rs-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font-size: 15.5px;
    line-height: 24.8px;
    color: #3a4252;
    margin-bottom: 12px;
}

.rs-check {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    border-radius: 10px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}

.rs-annual-note {
    font-size: 13.5px;
    line-height: 21.6px;
    color: #3a4252;
    opacity: .85;
    margin: 15px 0 0;
}

/* --- Guide request form --- */
.rs-form {
    background: #fafafa;
    padding: 100px 0;
}

.rs-form-card {
    max-width: 756px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 23px;
    padding: 49px 50px 45px;
    box-shadow: 0 25px 57px -27px rgba(12, 27, 61, .35);
}

.rs-form-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 27.5px;
    line-height: 28.6px;
    letter-spacing: -.34px;
    color: var(--c-navy);
    margin-bottom: 11px;
}

.rs-form-lead {
    font-size: 17px;
    line-height: 27.5px;
    color: #3a4252;
    margin-bottom: 24px;
}

.rs-form-row {
    --bs-gutter-x: 16px;
    --bs-gutter-y: 16px;
}

.rs-form-card label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 19.2px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #3a4252;
    margin-bottom: 7px;
}

.rs-form-card input[type="text"],
.rs-form-card input[type="email"],
.rs-form-card select {
    width: 100%;
    background: #fcfdff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 11.5px;
    padding: 17px 19px;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 27.5px;
    color: var(--c-navy);
}

.rs-form-card select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #16399e 50%), linear-gradient(135deg, #16399e 50%, transparent 50%);
    background-position: calc(100% - 24px) 29px, calc(100% - 19px) 29px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 44px;
}

.rs-form-card input:focus,
.rs-form-card select:focus {
    outline: none;
    border-color: #16399e;
    box-shadow: 0 0 0 3px rgba(22, 57, 158, .18);
}

.rs-form-submit {
    width: 100%;
    justify-content: center;
    margin-top: 24px;
    box-shadow: 0 16px 34px -14px rgba(255, 210, 0, .6);
}

.rs-form-note {
    font-size: 17px;
    line-height: 27.5px;
    color: #3a4252;
    opacity: .85;
    margin: 24px 0 0;
}

/* --- Seasonal LTO guides --- */
.rs-season {
    background: #fff;
    padding: 100px 0;
}

.rs-season-head {
    max-width: 820px;
    margin: 0 auto 44px;
    text-align: center;
}

.rs-season-head p {
    font-size: 17px;
    line-height: 29.35px;
    color: #3a4252;
    margin: 0;
}

.rs-season-row {
    --bs-gutter-x: 28px;
    --bs-gutter-y: 40px;
}

.rs-season .container {
    --bs-gutter-x: 28px;
}

.rs-guide {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    height: 100%;
}

.rs-guide-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 289 / 385;
    overflow: hidden;
    border-radius: 14px;
    background: var(--c-navy);
    box-shadow: 0 30px 60px -28px rgba(12, 27, 61, .6);
}

.rs-guide-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rs-guide-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(12, 27, 61, .15) 0%, rgba(12, 27, 61, .55) 46%, rgba(12, 27, 61, .94) 100%);
}

.rs-guide-tag {
    position: absolute;
    top: 34px;
    left: 32px;
    background: var(--c-yellow);
    color: var(--c-navy);
    border-radius: 50px;
    padding: 6px 13px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 10.5px;
    line-height: 16.8px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.rs-guide-tag.green{
    background: #A8C66C
}
.rs-guide-tag.orange{
    background: #F2994A
}

.rs-guide-titles {
    position: absolute;
    right: 32px;
    bottom: 34px;
    left: 32px;
    display: flex;
    flex-direction: column;
}

.rs-guide-season,
.rs-guide-kind {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 30px;
    line-height: 30.6px;
    letter-spacing: -.7px;
    text-transform: uppercase;
}

.rs-guide-season {
    color: #fff;
}

.rs-guide-kind {
    color: var(--c-yellow);
}

.rs-guide-brand {
    margin-top: 9px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 10.5px;
    line-height: 16.8px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--c-yellow);
}

.rs-guide-flag {
    display: inline-block;
    background: linear-gradient(45deg,rgba(220, 228, 245, 0.6) 0%, rgba(238, 242, 251, 0.62) 80%);
    border: 1px solid #dce4f5;
    border-radius: 50px;
    padding: 5px 11px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #16399e;
}

.rs-guide-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 18.72px;
    letter-spacing: -.3px;
    color: var(--c-navy);
    margin: 12px 0 0;
}

.rs-guide-desc {
    font-size: 14.5px;
    line-height: 23.2px;
    color: #3a4252;
    margin: 0;
}

.rs-guide-btn {
    margin-top: auto;
    padding: 13px 22px;
    font-size: 12.5px;
    letter-spacing: 1px;
}

/* --- Responsive --- */
@media (max-width: 991.98px) {

    .rs-annual,
    .rs-form,
    .rs-season {
        padding: 70px 0;
    }

    .rs-annual .container,
    .rs-season .container {
        --bs-gutter-x: 24px;
    }

    .rs-annual-row,
    .rs-season-row {
        --bs-gutter-x: 24px;
    }

    .rs-sec-title {
        font-size: 32px;
        line-height: 38px;
    }

    .rs-cover {
        max-width: 380px;
    }

    .rs-form-card {
        padding: 36px 32px;
    }
}

@media (max-width: 767.98px) {

    .rs-annual,
    .rs-form,
    .rs-season {
        padding: 56px 0;
    }

    .rs-sec-title {
        font-size: 27px;
        line-height: 33px;
    }

    .rs-annual-lead,
    .rs-season-head p,
    .rs-form-lead,
    .rs-form-note {
        font-size: 16px;
        line-height: 26px;
    }

    .rs-cover-year {
        font-size: 36px;
    }

    .rs-cover-kicker,
    .rs-cover-title,
    .rs-guide-season,
    .rs-guide-kind {
        font-size: 25px;
        line-height: 26px;
    }

    .rs-form-card {
        padding: 28px 22px;
        border-radius: 18px;
    }

    .rs-guide-tag,
    .rs-guide-titles {
        left: 22px;
        right: 22px;
    }

    .rs-guide-tag {
        top: 22px;
    }

    .rs-guide-titles {
        bottom: 24px;
    }
}

/* --- Resources CTA band --- */
.footer-cta-area.res-cta {
    padding-top: 100px;
}

.res-cta .create-card {
    padding: 78px 72px;
}

.res-cta .create-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

@media (max-width: 767.98px) {
    .footer-cta-area.res-cta {
        padding-top: 56px;
    }

    .res-cta .create-card {
        padding: 40px 24px;
    }

    .res-cta .create-actions .cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* --- Resources page overrides --- */
/* site-wide .banner-heading capitalizes every word; Figma sets sentence case here */
.rs-page .banner-heading {
    text-transform: none;
}

/* Figma renders the whole CTA heading in navy, not a two-tone accent */
.res-cta .create-heading .accent {
    color: var(--c-navy);
}

/* ============================================================
   === Quik-Creations product page ===
   ============================================================ */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Shared heading --- */
.qc-sec-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 45.6px;
    letter-spacing: -.5px;
    color: var(--c-navy);
    margin-bottom: 20px;
}

.qc-sec-title .accent-blue-solid {
    color: #16399e;
}

.qc-sec-title .accent-yellow {
    color: var(--c-yellow);
}

.qc-sec-title_light {
    color: #fff;
}

/* --- Breadcrumb --- */
.qc-crumb {
    padding: 150px 0 0;
}

.qc-crumb-nav ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13.5px;
    line-height: 22px;
    color: #3a4252;
}

.qc-crumb-nav li+li::before {
    content: "\00bb";
    margin-right: 7px;
    color: rgba(12, 27, 61, .45);
}

.qc-crumb-nav a {
    color: #16399e;
}

/* --- Product hero --- */
.qc-hero {
    padding: 40px 0 80px;
}

.qc-hero-row {
    --bs-gutter-x: 64px;
    --bs-gutter-y: 40px;
}



.qc-shot {
    margin: 0 0 12px;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 60px -34px rgba(12, 27, 61, .45);
}

.qc-shot img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.qc-thumbs {
    --bs-gutter-x: 12px;
}

.qc-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 12px;
}

.qc-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 29.16px;
    color: var(--c-navy);
    margin-bottom: 8px;
}

.qc-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 46px;
    line-height: 47.84px;
    letter-spacing: -1px;
    color: var(--c-navy);
    margin-bottom: 12px;
}

.qc-title .accent-blue-solid {
    color: #16399e;
}

.qc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.qc-meta-brand {
    font-size: 13.5px;
    line-height: 21.87px;
    color: #3a4252;
}

.qc-meta-sep {
    color: rgba(12, 27, 61, .3);
}

.qc-meta-sku {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 29.16px;
    color: var(--c-navy);
}

.qc-lead {
    font-size: 18px;
    line-height: 29.16px;
    color: #3a4252;
    margin-bottom: 22px;
}

/* pairs-with / suggested-use panel */
.qc-facts {
    display: flex;
    flex-wrap: wrap;
    background: #faf6ec;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 14px;
    overflow: hidden;
}

.qc-facts-col {
    flex: 1 1 260px;
    min-width: 0;
    padding: 19px 24px 20px;
}

.qc-facts-col+.qc-facts-col {
    border-left: 1px solid rgba(12, 27, 61, .12);
}

.qc-facts-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 12.5px;
    line-height: 20.25px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--c-navy);
    margin-bottom: 14px;
}

.qc-ticks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.qc-ticks_two {
    display: flex;
    flex-flow: row wrap;
    gap: 9px 18px;
}

.qc-ticks_two li {
    flex: 0 0 calc(50% - 9px);
}

.qc-ticks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15.5px;
    line-height: 20.93px;
    color: #3a4252;
}

.qc-tick {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    border-radius: 9.5px;
    background: #16399e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
}

.qc-hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 20px;
}

.qc-hero-actions .btn_yellow {
    box-shadow: 0 14px 30px -12px rgba(255, 210, 0, .6);
}

/* --- Specifications --- */
.qc-specs {
    padding: 0 0 80px;
}

.qc-specs-row {
    --bs-gutter-x: 60px;
    --bs-gutter-y: 40px;
}

.qc-specs .container {
    --bs-gutter-x: 60px;
}

.qc-panel {
    border-top: 1px solid rgba(12, 27, 61, .12);
    border-bottom: 1px solid rgba(12, 27, 61, .12);
    padding-bottom: 24px;
}

.qc-panel_alt {
    border-bottom: 1px solid rgba(12, 27, 61, .12);
    position: relative;
}
.qc-panel_alt::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 97%;
    border-left: 1px solid rgba(12, 27, 61, .12);
    left: -30px;
    top: 50%;
    transform: translateY(-50%)
}
.qc-panel-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 17px;
    line-height: 27.54px;
    color: var(--c-navy);
    margin: 0;
    padding: 20px 4px;
}
.bpb-spec-panel .cta-btn{
    margin-top: 30px
}
.product-specifications{
    padding-bottom: 80px
}
.qc-panel-sub {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 17px;
    line-height: 27.54px;
    color: var(--c-navy);
    margin: 22px 0 8px;
	margin-top:0
}

.qc-speclist {
    margin: 0;
    padding: 0 4px;
}

.qc-specrow {
    display: flex;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(12, 27, 61, .12);
}

.qc-specrow:last-child {
    border-bottom: 0;
}

.qc-specrow dt {
    flex: 0 0 45%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 24.3px;
    color: var(--c-navy);
}

.qc-specrow dd {
    flex: 1 1 auto;
    margin: 0;
    font-size: 15px;
    line-height: 24.3px;
    color: #3a4252;
}

.qc-speclink {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 22.5px;
    color: #16399e;
    border-bottom: 1px solid rgba(22, 57, 158, .35);
    text-decoration: none;
}

.qc-speclink:hover {
    border-bottom-color: #16399e;
}

/* nutrition facts panel */
.qc-nutrition {
    max-width: 572px;
    font-family: 'Inter', sans-serif;
    color: var(--c-navy);
}

.qc-nf-servings {
    font-size: 13px;
    line-height: 17px;
    margin: 0;
}

.qc-nf-serving {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
    margin: 0 0 8px;
}

.qc-nf-cal {
    border-top: 6px solid var(--c-navy);
    border-bottom: 4px solid var(--c-navy);
    padding: 6px 0;
}

.qc-nf-cal-label {
    display: block;
    font-size: 12px;
    line-height: 16px;
}

.qc-nf-cal-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-weight: 800;
}

.qc-nf-cal-row span:first-child {
    font-size: 24px;
    line-height: 31px;
}

.qc-nf-cal-row span:last-child {
    font-size: 28px;
    line-height: 28px;
}

.qc-nf-dv {
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    line-height: 17px;
    margin: 0;
    padding: 3px 0;
    border-bottom: 1px solid var(--c-navy);
}

.qc-nf-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.qc-nf-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    line-height: 18px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(12, 27, 61, .35);
}

.qc-nf-list li.qc-nf-in1 {
    padding-left: 14px;
}

.qc-nf-list li.qc-nf-in2 {
    padding-left: 28px;
}

.qc-nf-protein {
    border-top: 6px solid var(--c-navy);
    border-bottom: 6px solid var(--c-navy) !important;
    padding: 9px 0 !important;
}

.qc-nf-foot {
    font-size: 11px;
    line-height: 14px;
    margin: 11px 0 0;
    border-top: 4px solid var(--c-navy);
    padding-top: 8px;
}


/* --- Text + image splits --- */
.qc-flavor {
    padding: 90px 0 90px;
    position: relative
}
.qc-flavor .border{
    position: absolute;
    width: 94px;
    height: 2px;
    background: rgba(0, 0, 0, 0.30);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block
}
.qc-simplicity {
    background: #fafafa;
    padding: 90px 0;
}

.qc-split {
    --bs-gutter-x: 60px;
    --bs-gutter-y: 40px;
}

.qc-flavor .container,
.qc-simplicity .container {
    --bs-gutter-x: 60px;
}

.qc-flavor p,
.qc-simplicity p {
    font-size: 16.5px;
    line-height: 26.73px;
    color: #3a4252;
    margin-bottom: 16px;
}

.qc-flavor p:last-child,
.qc-simplicity p:last-child {
    margin-bottom: 0;
}

.qc-figure {
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 14px 14px 0 -1px var(--c-yellow), 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.qc-figure img {
    width: 100%;
    height: 100%;
    aspect-ratio: 590 / 393;
    object-fit: cover;
    display: block;
}

/* --- Savory / sweet cards --- */
.qc-dishes-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 34px;
}

.qc-dishes-head p {
    margin: 0;
}

.qc-dishes-row {
    --bs-gutter-x: 40px;
    --bs-gutter-y: 40px;
}

.qc-dish {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 14px;
    padding: 40px 43px 46px;
}

.qc-dish-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -.4px;
    color: #16399e;
    margin-bottom: 16px;
}

/* --- Testimonial --- */
.qc-quote {
    padding: 90px 0;
}

.qc-quote-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    margin: 0;
    background: #0054a4;
    border-radius: 18px;
    box-shadow: 0 30px 60px -34px rgba(12, 27, 61, .5);
}

.qc-quote-body {
    flex: 1 1 auto;
    padding: 50px;
    max-width: 760px;
}

.qc-stars {
    color: var(--c-yellow);
    font-size: 22px;
    line-height: 24px;
    letter-spacing: 3px;
    margin-bottom: 22px;
}

.qc-quote-body blockquote {
    font-size: 19px;
    line-height: 30.4px;
    color: #fff;
    margin: 0 0 30px;
}

.qc-quote-body figcaption {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .28);
}

.qc-quote-name {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 28px;
    color: #fff;
}

.qc-quote-role {
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, .74);
}

.qc-quote-media {
    flex: 0 0 36%;
    position: relative;
}

.qc-quote-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.qc-quote-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #0054a4 0%, rgba(0, 84, 164, 0) 60%);
}
.rc-testimonial.ver-2{
    position: relative
}
.rc-testimonial.ver-2::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 48%;
    left: 0;
    top: 0;
    background: #fafafa;
}
.rc-testimonial.ver-2 .container{
    position: relative;
    z-index: 9
}
/* --- Industry cards --- */
.qc-industry {
    background: #0054a4;
    padding: 90px 0;
}

.qc-industry .qc-sec-title {
    margin-bottom: 40px;
}

.qc-industry-row {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 24px;
}

.qc-industry .container {
    --bs-gutter-x: 24px;
}

.qc-ind {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 24px 44px -28px rgba(4, 32, 66, .8);
    transition: transform .2s ease;
}

.qc-ind:hover,
.qc-ind:focus-visible {
    transform: translateY(-3px);
}

.qc-ind>img {
    width: 100%;
    aspect-ratio: 608 / 342;
    object-fit: cover;
    display: block;
}

.qc-ind-body {
    flex: 1 1 auto;
    display: block;
    background: var(--c-yellow);
    padding: 28px 30px 30px;
}

.qc-ind-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.qc-ind-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 19px;
    line-height: 26px;
    color: var(--c-navy);
    margin: 0;
}

.qc-ind-arrow {
    color: var(--c-navy);
    font-size: 15px;
    transition: transform .2s ease;
}

.qc-ind:hover .qc-ind-arrow {
    transform: translateX(4px);
}

.qc-ind-text {
    display: block;
    font-size: 14.5px;
    line-height: 23.2px;
    color: #3a4252;
}

/* --- Video slot + leading copy --- */
.qc-leading {
    background: #fafafa;
    padding: 90px 0;
}

.qc-video {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 60px -34px rgba(12, 27, 61, .5);
}
.qc-video::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 70%;
    left: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(12, 27, 61, .92) 0%, rgba(12, 27, 61, 0) 100%);
}

/* The picture with no film behind it carries no bar, so it needs no scrim. */
.qc-video_plain::before {
    display: none;
}
.qc-video img {
    width: 100%;
    aspect-ratio: 1240 / 497;
    object-fit: cover;
    display: block;
}

.qc-video-bar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
}

.qc-video-play {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    padding-left: 3px;
}

.qc-video-title {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 21px;
    line-height: 33px;
    color: #fff;
}

.qc-video-note {
    display: block;
    font-size: 14px;
    line-height: 22.86px;
    color: rgba(255, 255, 255, .72);
}

.qc-leading-text {
    max-width: 1030px;
    margin: 64px auto 0;
    text-align: center;
}

.qc-leading-text p {
    font-size: 18px;
    line-height: 29.16px;
    color: #3a4252;
    margin: 0;
}

/* --- Responsive --- */
@media (max-width: 1199.98px) {
    .qc-quote-body {
        padding: 40px;
    }

    .qc-dish {
        padding: 32px 30px 36px;
    }
}

@media (max-width: 991.98px) {

    .qc-hero .container,
    .qc-specs .container,
    .qc-flavor .container,
    .qc-simplicity .container,
    .qc-industry .container {
        --bs-gutter-x: 24px;
    }

    .qc-hero-row,
    .qc-specs-row,
    .qc-split,
    .qc-dishes-row,
    .qc-industry-row {
        --bs-gutter-x: 24px;
    }

    .qc-hero {
        padding-bottom: 60px;
    }

    .qc-simplicity,
    .qc-quote,
    .qc-industry,
    .qc-leading {
        padding: 70px 0;
    }

    .qc-flavor {
        padding-bottom: 70px;
    }

    .qc-title {
        font-size: 34px;
        line-height: 40px;
    }

    .qc-sec-title {
        font-size: 30px;
        line-height: 38px;
    }

    .qc-panel_alt {
        border-bottom: 1px solid rgba(12, 27, 61, .12);
    }

    .qc-quote-card {
        flex-direction: column-reverse;
    }

    .qc-quote-media {
        flex: 0 0 auto;
        max-height: 260px;
    }

    .qc-quote-media::after {
        background: linear-gradient(to bottom, rgba(0, 84, 164, 0) 40%, #0054a4 100%);
    }

    .qc-dishes-head {
        margin-top: 60px;
    }
}

@media (max-width: 767.98px) {

    .qc-hero {
        padding-bottom: 48px;
    }

    .qc-simplicity,
    .qc-quote,
    .qc-industry,
    .qc-leading {
        padding: 56px 0;
    }

    .qc-flavor,
    .qc-specs {
        padding-bottom: 56px;
    }

    .qc-title {
        font-size: 27px;
        line-height: 33px;
    }

    .qc-sec-title {
        font-size: 25px;
        line-height: 32px;
    }

    .qc-lead,
    .qc-leading-text p {
        font-size: 16px;
        line-height: 26px;
    }

    .qc-facts-col+.qc-facts-col {
        border-left: 0;
        border-top: 1px solid rgba(12, 27, 61, .12);
    }

    .qc-ticks_two li {
        flex: 0 0 100%;
    }

    .qc-hero-actions .cta-btn {
        width: 100%;
        justify-content: center;
    }

    .qc-specrow {
        flex-direction: column;
        gap: 0;
    }

    .qc-specrow dt {
        flex: 1 1 auto;
    }

    .qc-figure {
        box-shadow: 8px 8px 0 -1px var(--c-yellow), 0 18px 40px -24px rgba(12, 27, 61, .35);
    }

    .qc-dish {
        padding: 26px 22px 30px;
    }

    .qc-dish-title {
        font-size: 24px;
        line-height: 32px;
    }

    .qc-quote-body {
        padding: 28px 24px;
    }

    .qc-quote-body blockquote {
        font-size: 16.5px;
        line-height: 27px;
    }

    .qc-video-bar {
        padding: 16px;
        gap: 12px;
    }

    .qc-video-play {
        width: 42px;
        height: 42px;
        font-size: 14px;
    }

    .qc-video-title {
        font-size: 16px;
        line-height: 24px;
    }

    .qc-video-note {
        font-size: 12.5px;
        line-height: 19px;
    }

    .qc-leading-text {
        margin-top: 44px;
    }
}

/* --- Quik-Creations CTA band --- */
.footer-cta-area.qc-cta {
    padding-top: 100px;
}

.qc-cta .create-card {
    padding: 78px 72px;
}

.qc-cta .create-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

@media (max-width: 767.98px) {
    .footer-cta-area.qc-cta {
        padding-top: 56px;
    }

    .qc-cta .create-card {
        padding: 40px 24px;
    }

    .qc-cta .create-actions .cta-btn {
        width: 100%;
        justify-content: center;
    }
}
/* --- Final Responsive --- */
@media (max-width: 1400px){
     .hero-badge{
        display: none
    }
}
@media (max-width: 991.98px)
{
   
}


/* === Gravity Forms — forms block === */
/* Gravity Forms ships its own markup, so the design's field tokens are mapped
   onto it here. Everything is scoped to .form-gf, which the block wraps the
   embed in, so no other form on the site is affected. */

.form-gf .gform_wrapper.gravity-theme .gform_fields {
	grid-row-gap: 16px;
	grid-column-gap: 16px;
}

.form-gf .gform_wrapper.gravity-theme .gfield_label,
.form-gf .gform_wrapper .gfield_label {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: #3a4252;
	margin-bottom: 7px;
}

.form-gf .gform_wrapper .gfield_required {
	color: #16399e;
	margin-left: 2px;
}

.form-gf .gform_wrapper .ginput_container input[type="text"],
.form-gf .gform_wrapper .ginput_container input[type="email"],
.form-gf .gform_wrapper .ginput_container input[type="tel"],
.form-gf .gform_wrapper .ginput_container input[type="url"],
.form-gf .gform_wrapper .ginput_container input[type="number"],
.form-gf .gform_wrapper .ginput_container select,
.form-gf .gform_wrapper .ginput_container textarea {
	width: 100%;
	height: 50px;
	border: 1px solid #F6F8FD;
	border-radius: 12px;
	background: #F6F8FD;
	padding: 0 16px;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	color: var(--c-navy);
	transition: border-color .2s, box-shadow .2s;
}

.form-gf .gform_wrapper .ginput_container input:focus,
.form-gf .gform_wrapper .ginput_container select:focus,
.form-gf .gform_wrapper .ginput_container textarea:focus {
	outline: none;
	border-color: #16399e;
	box-shadow: 0 0 0 3px rgba(22, 57, 158, .12);
}

.form-gf .gform_wrapper .ginput_container select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c1b3d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 18px;
	padding-right: 44px;
}

.form-gf .gform_wrapper .ginput_container textarea {
	height: auto;
	min-height: 110px;
	padding: 14px 16px;
	resize: vertical;
}

/* The submit carries the design's own button classes once the markup is
   rebuilt, so the only thing left to undo is Gravity Forms' own spacing. */
.form-gf .gform_wrapper .gform_footer {
	margin: 0;
	padding: 0;
}

/* Gravity Forms sets the heading before the form and the asterisk in its own
   red; the design puts the fine print under the button and the asterisk in
   navy, tight against the label. These match its specificity to win. */
.form-gf .gform_wrapper {
	display: flex;
	flex-direction: column;
}

.form-gf .gform_wrapper form {
	order: 1;
}

.form-gf .gform_wrapper .gform_heading {
	order: 2;
	margin: 0;
}

.form-gf .gform_wrapper .gform_heading .gform_description {
	margin: 16px 0 0;
}

.form-gf .gform_wrapper.gravity-theme .gfield_required,
.form-gf .gform_wrapper.gravity-theme .gfield_required_asterisk {
	color: var(--c-navy, #0c1b3d);
	margin-left: 0;
	padding-left: 0;
	font-weight: 700;
}

/* The design's box is four rows tall; Gravity Forms asks for ten. */
.form-gf .gform_wrapper.gravity-theme .gfield .ginput_container textarea,
.form-gf .gform_wrapper.gravity-theme .gfield textarea.large {
	height: 110px;
	min-height: 110px;
}

/* The design's fine print sits under the button; Gravity Forms puts the same
   sentence in the form description, so it is moved to match. */
.form-gf .gform_wrapper .gform_description {
	display: block;
	order: 2;
	text-align: center;
	font-size: 13px;
	line-height: 21px;
	color: #3a4252;
	margin: 16px 0 0;
}

.form-gf .gform_wrapper form {
	display: flex;
	flex-direction: column;
}

.form-gf .gform_wrapper .gform_body {
	order: 1;
}

.form-gf .gform_wrapper .gform_footer {
	order: 1;
}

/* Emptied by the theme rather than removed, so the box it leaves is hidden
   too; the fine print under the button explains the asterisk. */
.form-gf .gform_wrapper .gform_required_legend {
	display: none;
}

.form-gf .gform_wrapper .gfield_description.validation_message,
.form-gf .gform_wrapper .gform_validation_errors {
	border-radius: 12px;
	font-size: 13px;
}

.form-gf .form-fine {
	margin: 0;
	font-size: 13px;
	color: #3a4252;
}
/* Gravity Forms lays a checkbox group out in one stacked column; the design
   sets it two across in boxes of its own. The choices are mapped onto that
   here, scoped to the form wrapper so no other checkbox group is touched. */
.form-gf .gform_wrapper fieldset.gfield--type-checkbox {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.form-gf .gform_wrapper .gfield_checkbox {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 20px;
	row-gap: 12px;
}

@media (min-width: 576px) {
	.form-gf .gform_wrapper .gfield_checkbox {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.form-gf .gform_wrapper .gfield_checkbox .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 13px;
}

.form-gf .gform_wrapper .gfield_checkbox input[type="checkbox"] {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 2px 0 0;
	accent-color: #16399e;
	border: 1px solid #767676;
	border-radius: 2.5px;
	background: #fff;
	cursor: pointer;
}

/* The card sets every label in small capitals; a choice is read as a sentence. */
.form-gf .gform_wrapper .gfield_checkbox label {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 14.5px;
	line-height: 20.3px;
	letter-spacing: 0;
	text-transform: none;
	color: #1a2033;
	margin: 0;
	cursor: pointer;
}

/* This card keeps its fine print under the button, left with it, rather than
   centred across the form the way the other forms set theirs. */
.wtb-form-card .form-gf .gform_wrapper .gform_description {
	text-align: left;
}

.cb-form-card .gform_footer {
    justify-content: center !important;
}
.gform_button {
    margin: 0 !important;
}
@media(max-width:991px){
    .hero-desc,
    .formats-slider .slick-prev:before,
    .formats-slider .slick-next:before,
    .timeline-num,
    .cs-hero-desc,
    .cs-awards-intro,
    .cs-quote-text,
    .media-card-title,
    .contact-hero-desc,
    .contact-detail-value,
    .wcu-intro-copy p,
    .wcu-awards-intro,
    .os-hero-sub,
    .os-video-sub,
    .os-awards-sub,
    .mi-hero-eyebrow,
    .mi-hero-lead,
    .mi-principle-text,
    .pn-hero-lead,
    .su-hero-copy p,
    .su-section-intro,
    .su-stat-copy,
    .su-env-note,
    .su-awards-sub,
    .cr-hero-lead,
    .ws-intro-body,
    .rs-hero-lead,
    .rs-intro-body,
    .rs-flavor-arrow,
    .rs-bulk-title,
    .rs-bulk-arrow,
    .cpg-hero-lead,
    .cpg-best-text,
    .cpg-flavors-lead,
    .ct-hero-lead,
    .ct-lead,
    .mk-hero-lead,
    .mk-intro-body,
    .mk-why-lead,
    .rt-hero-lead,
    .rt-lead,
    .rd-hero-lead,
    .rd-feature-title,
    .rd-awards-sub,
    .cm-hero-lead,
    .cm-team-text,
    .cb-hero-lead,
    .cb-shape-title,
    .bt-hero-lead,
    .bt-who-intro,
    .bt-who-title,
    .cl-hero-lead,
    .cl-how-intro,
    .cl-contact-lead,
    .fb-hero-lead,
    .fb-enhance .fb-text,
    .fb-popular-head .fb-text,
    .fb-packaging-head .fb-text,
    .fb-pack-icon,
    .fb-industries-head .fb-text,
    .fb-trust-text,
    .pm-hero-lead,
    .pm-labeling-head .pm-text,
    .pm-compare-head .pm-text,
    .mg-hero-lead,
    .mg-text--lg,
    .mg-packaging-head .mg-text,
    .cf-hero-lead,
    .cf-who-head .cf-text,
    .cf-benefits-head .cf-text,
    .cf-ben-title,
    .cf-trust-text,
    .cf-why-icon,
    .cf-why-title,
    .pb-hero-lead,
    .pb-why-head .pb-text,
    .pb-getband-text,
    .bd-hero-lead,
    .cbs-hero-lead,
    .wtb-hero-lead,
    .sau-hero-lead,
    .gra-hero-lead,
    .gra-intro,
    .gra-fmt-title,
    .gla-hero-lead,
    .gla-intro,
    .gla-fmt-title,
    .fat-hero-lead,
    .fat-intro,
    .fat-finish-lead,
    .aio-hero-lead,
    .aio-awards-sub,
    .mar-hero-lead,
    .mar-intro,
    .ibs-hero-lead,
    .ibs-intro-text,
    .ibs-wtb-text,
    .ibs-intro-lead,
    .ibs-why-text,
    .ssb-hero-lead,
    .ssb-shapes-intro,
    .bpb-quality-intro,
    .bpb-use-title,
    .bpb-cooking-intro,
    .off-hero-lead,
    .off-fav-outro,
    .ofs-hero-lead,
    .ofs-kit-text,
    .ofs-kit-note,
    .bpb-spec-panel .heading,
    .fsq-brcgs-subhead,
    .fsq-cert-title,
    .rs-flavor-title,
    .rd-ww-title,
    .fb-enhance-lead,
    .fb-ind-title,
    .mg-pack-title,
    .ssb-fact-title,
    .off-fav-intro,
    .off-flavor-title,
    .bpb-pack-title,
    .bpb-cook-title,
    .bd-ben-title,
    .gra-why-title,
    .ct-intro-text,
    .bd-anyflavor-text p,
    .bd-inspo-head p,
    .bd-inspo-icon,
    .bd-stocked-head p,
    .bd-kit-text p,
    .rs-annual-lead,
    .rs-guide-name,
    .qc-eyebrow,
    .qc-meta-sku,
    .qc-lead,
    .qc-quote-name,
    .qc-leading-text p {
        font-size: 16px;
        max-width: 100%;
    }
    .bd-stocked-head{
        text-align: center;
    }
    .bd-stocked-actions{
        justify-content: center;
        margin-top: 30px;
    }
    .bd-stocked-note{
        text-align: center;
    }
    .bd-kit-media {
    right: 0;
    bottom: 0;
    width: 250px;
}
}
@media(max-width:767px){
    .bd-stocked-head{
        margin-bottom: 0;
    }
    .bd-stocked-list{
        margin-bottom: 20px;
    }
    .bd-stocked-actions{
        margin-top: 20px;
    }
    .bd-kit-media img{
        display: none;
    }
    .page-banner-actions, .page-banner-actions .cta-btn {
    width: auto;
}
.bd-spec-col {
    flex: 1 1 50%;
}
.bd-stocked-list {
    columns: 2;
}
.bd-stocked-actions .cta-btn {
    width: auto;
    justify-content: center;
}
.bd-kit-text{
        text-align: center;
    }
    
}
@media(max-width:575px){
    
}


/* === Cards drawn from the blog ===
   The design was built on square crops. A post's featured image is whatever
   shape it was uploaded at, so the card holds it to the shape the design
   expects and lets object-fit do the cropping. */
.rd-blog-media img {
    aspect-ratio: 16 / 9;
}

/* === Blog: listing, pagination and the single post ===
   The cards themselves are the .rd-blog-* design; what follows is the grid
   they sit in, the pager under it, and the reading page a post opens on. */

.bbf-blog {
    background: #fff;
}

.bbf-blog-grid > [class*="col-"] {
    display: flex;
}

.bbf-blog-grid .rd-blog-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.bbf-blog-grid .rd-blog-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* The link sits on the bottom edge whatever length the copy runs to. */
.bbf-blog-grid .rd-blog-more {
    margin-top: auto;
}

.bbf-blog-empty {
    text-align: center;
    font-size: 17px;
    color: #3a4252;
    padding: 40px 0;
}

.bbf-blog-more {
    background: #f7f9fc;
}

/* --- Pager --- */

.bbf-pager {
    margin-top: 56px;
}

.bbf-pager-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.bbf-pager-list li {
    margin: 0;
}

.bbf-pager .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(12, 27, 61, .15);
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--c-navy);
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
}

.bbf-pager a.page-numbers:hover,
.bbf-pager a.page-numbers:focus-visible {
    background: var(--c-yellow);
    border-color: var(--c-yellow);
    color: var(--c-navy);
}

.bbf-pager .page-numbers.current {
    background: var(--c-blue);
    border-color: var(--c-blue);
    color: #fff;
}

.bbf-pager .page-numbers.dots {
    border-color: transparent;
    min-width: 24px;
    padding: 0 4px;
}

/* --- A post on its own --- */

.bbf-post {
    background: #fff;
    padding-bottom: 40px;
}

/* The detail line sits on the banner, so it is set for a dark ground. */
.bbf-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 26px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
    margin-top: 18px;
}

/* A dot between one piece of detail and the next. */
.bbf-post-meta > span + span::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--c-yellow);
    vertical-align: middle;
    margin-right: 14px;
    margin-left: -14px;
}

.bbf-post-meta a {
    color: var(--c-yellow);
    text-decoration: none;
}

.bbf-post-meta a:hover,
.bbf-post-meta a:focus-visible {
    text-decoration: underline;
}

.bbf-post-media {
    margin: 0 0 36px;
    border-radius: 18px;
    overflow: hidden;
}

.bbf-post-media img {
    display: block;
    width: 100%;
    height: auto;
}

.bbf-post-body {
    font-size: 17px;
    line-height: 1.7;
    color: #3a4252;
}

.bbf-post-body > * {
    margin-bottom: 24px;
}

.bbf-post-body > *:last-child {
    margin-bottom: 0;
}

.bbf-post-body h2,
.bbf-post-body h3,
.bbf-post-body h4,
.bbf-post-body h5 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: var(--c-navy);
    line-height: 1.25;
    margin-top: 40px;
    margin-bottom: 16px;
}

.bbf-post-body h2 {
    font-size: 30px;
}

.bbf-post-body h3 {
    font-size: 24px;
}

.bbf-post-body h4 {
    font-size: 20px;
}

.bbf-post-body a {
    color: var(--c-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bbf-post-body img,
.bbf-post-body iframe,
.bbf-post-body video {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

.bbf-post-body figure {
    margin: 0 0 24px;
}

.bbf-post-body figcaption {
    font-size: 14px;
    color: #6b7488;
    margin-top: 10px;
}

.bbf-post-body ul,
.bbf-post-body ol {
    padding-left: 22px;
}

.bbf-post-body li {
    margin-bottom: 10px;
}

.bbf-post-body blockquote {
    border-left: 4px solid var(--c-yellow);
    background: #f7f9fc;
    border-radius: 0 14px 14px 0;
    padding: 20px 24px;
    font-size: 19px;
    color: var(--c-navy);
}

.bbf-post-body table {
    width: 100%;
    border-collapse: collapse;
}

.bbf-post-body th,
.bbf-post-body td {
    border: 1px solid var(--c-border-light);
    padding: 10px 14px;
    text-align: left;
}

.bbf-post-back {
    margin-top: 44px;
}

@media (max-width: 767px) {

    .bbf-post-body {
        font-size: 16px;
    }

    .bbf-post-body h2 {
        font-size: 25px;
    }

    .bbf-post-body h3 {
        font-size: 21px;
    }

    .bbf-pager {
        margin-top: 40px;
    }
}

.bbf-blog-search {
    max-width: 520px;
    margin: 0 auto;
}

.bbf-blog-search input[type="search"] {
    width: 100%;
    height: 52px;
    padding: 0 18px;
    border: 1px solid rgba(12, 27, 61, .15);
    border-radius: 999px;
    font-size: 16px;
    color: var(--c-navy);
}

.bbf-blog-search label {
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    color: #3a4252;
}

/* === Recipe browser: locked, then not ===
   The categories and the recipe list are blurred until a visitor gives their
   email. The blur below belongs to the locked state only; the rules further
   up set the shape of both. */

.rc-browser.is-unlocked .rc-cat-row,
.rc-browser.is-unlocked .rc-preview-list {
    filter: none;
    opacity: 1;
    pointer-events: auto;
    user-select: auto;
}

.rc-browser.is-unlocked .rc-gate {
    display: none;
}

.rc-cat {
    cursor: default;
}

.rc-browser.is-unlocked .rc-cat {
    cursor: pointer;
}

/* A recipe with a file behind it reads as a link. */
.rc-recipe-link {
    color: inherit;
    text-decoration: none;
}

.rc-browser.is-unlocked .rc-recipe-link:hover,
.rc-browser.is-unlocked .rc-recipe-link:focus-visible {
    color: var(--c-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* === Recipe browser: the sign-up is a Gravity Form ===
   Laid out as one line — the box, then the button — the way the design draws
   it, over the plugin's stacked default. */

/* The box keeps the width the design gives it; the plugin fills it. */
.rc-signup.form-gf {
    display: block;
}

.rc-signup .gform_wrapper {
    width: 100%;
    margin: 0;
}

/* The plugin heads its form with a note about required fields. */
.rc-signup .gform_heading {
    display: none;
}

.rc-signup .gform_wrapper.gravity-theme .gform_fields,
.rc-signup .gform_wrapper .gform_fields {
    display: block;
    grid-template-columns: none;
}

.rc-signup .gform_wrapper .gfield {
    grid-column: auto;
    width: 100%;
}

.rc-signup .gform_wrapper.gravity-theme .gfield_label,
.rc-signup .gform_wrapper .gfield_label {
    /* The box says what it wants; the label is for screen readers. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.rc-signup .gform_wrapper.gravity-theme form,
.rc-signup .gform_wrapper form {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.rc-signup .gform_wrapper .gform_body {
    flex: 1 1 auto;
    min-width: 0;
}

.rc-signup .gform_wrapper .gform_footer {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    width: auto;
}

.rc-signup .gform_wrapper .ginput_container input[type="email"],
.rc-signup .gform_wrapper .ginput_container input[type="text"] {
    width: 100%;
    height: 58px;
    padding: 0 20px;
    border: 1px solid rgba(12, 27, 61, .12);
    border-radius: 14px;
    background: #fdfaf1;
    font-size: 16px;
    color: var(--c-navy);
}

.rc-signup .gform_wrapper .gform_footer input[type="submit"],
.rc-signup .gform_wrapper .gform_footer button {
    height: 58px;
    padding: 0 34px;
    border: 0;
    border-radius: 999px;
    background: var(--c-blue);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

.rc-signup .gform_wrapper .gform_footer input[type="submit"]:hover,
.rc-signup .gform_wrapper .gform_footer button:hover {
    background: var(--c-navy);
}

/* The thank-you takes the place of the box once the form is sent. */
.rc-signup .gform_confirmation_message {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--c-navy);
}

@media (max-width: 575px) {

    .rc-signup .gform_wrapper.gravity-theme form,
    .rc-signup .gform_wrapper form {
        flex-wrap: wrap;
    }

    .rc-signup .gform_wrapper .gform_footer {
        width: 100%;
    }

    .rc-signup .gform_wrapper .gform_footer input[type="submit"],
    .rc-signup .gform_wrapper .gform_footer button {
        width: 100%;
    }
    .page-banner-actions, .page-banner-actions .cta-btn {
    width: 100%;
}
.page-banner.full-width .page-banner-actions .cta-btn {
    width: 100%;
}
}
.gform_validation_errors{
    display: none !important;
}
.validation_message {
    padding: 0 !important;
    border:none !important;
    background: transparent !important;
}
.gform_footer {
    justify-content: center !important;
}
.cpg-slide .rs-text ul:not(.ssb-types-list), .faq-item ul, .su-econ-card ul, .bbf-post-body ul{
    list-style: disc;
}
.faq-item ol, .bbf-post-body ol{
    list-style: decimal;
}
.cpg-slide .rs-text ul li, .faq-item ul li, .su-econ-card ul li, .bbf-post-body li{
    display: list-item;
}
.bbf-post-media img{
    aspect-ratio: 16/ 9;
    object-fit: cover;
}
.bbf-post-body p a:hover, .bbf-post-body li a:hover{
    text-decoration: none;
}
section.error-404.not-found {
    padding-top: 200px;
    padding-bottom: 100px;
}
section.error-404.not-found .h1 {
    font-size: 120px;
    font-weight: 700;
    line-height: 100%;
}
p.error-404-desc {
    font-size: 20px;
    margin: 20px 0 40px;
}
.error404 .footer-cta-area{
    padding-top: 70px !important;
}
@media(max-width:767px){
    section.error-404.not-found {
    padding-top: 130px;
    padding-bottom: 50px;
}
section.error-404.not-found .h1 {
    font-size: 72px;
}
}

/* ==========================================================================
   Stocked Products, Create A Custom Flavor and Commercialization
   ========================================================================== */

/* =================================================================
   === Create A Custom Flavor page ===
   ================================================================= */

/* --- Request form (light grey) --- */
.cf-request {
    background: #fafafa;
    padding: 90px 0;
    position: relative;
}

.cf-request-border {
    position: absolute;
    content: "";
    width: 94px;
    height: 2px;
    background: rgba(0, 30, 59, 0.32);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.cf-request-head {
    max-width: 700px;
    margin: 0 auto 40px;
    text-align: center;
}

.cf-request-head .section-heading {
    margin-bottom: 14px;
}

.cf-request-text {
    font-size: 15.5px;
    line-height: 22px;
    color: #3a4252;
    margin: 0;
}

.cf-request .cb-form-card {
    background: #fff;
}

.cf-form .cb-submit {
    margin-top: 30px;
}

.cf-form .cb-form-note {
    text-align: left;
}

/* --- Intro (cream) --- */
.cf-intro {
    background: #FFF8E3;
    padding: 100px 0;
}

.cf-intro-lead {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    line-height: 40px;
    color: #0C1B3D;
    margin: 0;
    max-width: 632px;
}

.cf-intro-lead a {
    color: #16399E;
    font-weight: 600;
    text-decoration: underline;
}

.cf-intro-text {
    font-size: 15.5px;
    line-height: 25.6px;
    color: #3a4252;
    margin: 0;
    max-width: 514px;
}

.cf-stats {
    border-top: 1px solid rgba(12, 27, 61, 0.14);
    margin-top: 26px;
    padding-top: 23px;
    max-width: 514px;
}

.cf-stat {
    padding-right: 44px;
}

.cf-stat-num {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 30px;
    line-height: 36px;
    color: #16399e;
    margin-bottom: 4px;
}

.cf-stat-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 20px;
    color: #0c1b3d;
}

/* --- Formats (blue band, yellow cards) --- */
.cf-formats {
    background: #0054a4;
    padding: 90px 0;
}

.cf-format-card {
    height: 100%;
    background: #ffd200;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 50px -30px rgba(0, 8, 29, 0.6);
}

.cf-format-media img {
    display: block;
    width: 100%;
    height: 224px;
    object-fit: cover;
}

.cf-format-body {
    padding: 28px 30px 34px;
}

.cf-format-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 17px;
    line-height: 24px;
    color: #0c1b3d;
    margin: 0 0 14px;
}

.cf-format-text {
    font-size: 14.5px;
    line-height: 23.2px;
    color: #0c1b3d;
    margin: 0 0 18px;
}

.cf-format-text:last-child {
    margin-bottom: 0;
}

/* --- Commitment to Quality (blue card + floating food) --- */
.cf-quality {
    background: #fff;
    padding: 90px 0 100px;
    overflow: hidden;
}

.cf-quality-card {
    position: relative;
    background: #0054a4;
    border-radius: 28px;
    padding: 66px 100px 60px;
    text-align: center;
    max-width: 1240px;
    margin: 0 auto;
}

.cf-quality-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 38px;
    line-height: 1.14;
    color: #fff;
    margin: 0 0 24px;
}

.cf-quality-heading .accent {
    color: #ffd200;
}

.cf-quality-text {
    font-size: 16px;
    line-height: 26px;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 auto 20px;
    max-width: 718px;
}

.cf-quality-actions {
    margin-top: 34px;
}

.cf-quality-shape {
    position: absolute;
    display: block;
    pointer-events: none;
    z-index: 2;
}

.cf-quality-shape .footer-shape-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Gentle, out-of-sync float loops — same set the footer CTA uses.
   GSAP drives the wrapper span's transform, CSS drives the img's. */
.cf-quality-shape-1 .footer-shape-img {
    animation: shapeFloatA 6s ease-in-out infinite;
}

.cf-quality-shape-2 .footer-shape-img {
    animation: shapeFloatB 7s ease-in-out infinite .4s;
}

.cf-quality-shape-3 .footer-shape-img {
    animation: shapeFloatC 5.5s ease-in-out infinite .8s;
}

.cf-quality-shape-4 .footer-shape-img {
    animation: shapeFloatD 6.5s ease-in-out infinite .2s;
}

.cf-quality-shape-5 .footer-shape-img {
    animation: shapeFloatA 7.5s ease-in-out infinite 1s;
}

.cf-quality-shape-6 .footer-shape-img {
    animation: shapeFloatC 6.2s ease-in-out infinite .6s;
}

.cf-quality-shape-7 .footer-shape-img {
    animation: shapeFloatB 5.8s ease-in-out infinite 1.2s;
}

.cf-quality-shape-8 .footer-shape-img {
    animation: shapeFloatD 6.8s ease-in-out infinite .9s;
}

.cf-quality-shape-9 .footer-shape-img {
    animation: shapeFloatA 6.4s ease-in-out infinite 1.4s;
}

.cf-quality-shape-1 {
    width: 172px;
    top: 43px;
    left: -30px;
}

.cf-quality-shape-2 {
    width: 254px;
    top: 100px;
    left: -115px;
}

.cf-quality-shape-3 {
    width: 200px;
    bottom: 75px;
    left: -106px;
}
.cf-quality-shape-4 {
    width: 238px;
    bottom: -49px;
    left: -70px;
}

.cf-quality-shape-5 {
    width: 175px;
    bottom: 47px;
    right: 70px;
}

.cf-quality-shape-6 {
    width: 140px;
    bottom: -3px;
    right: -12px;
}
.cf-quality-shape-7 {
    width: 300px;
    bottom: 137px;
    right: -124px;
}
.cf-quality-shape-8 {
    width: 166px;
    top: 96px;
    right: 35px;
}
.cf-quality-shape-9 {
    width: 245px;
    top: -42px;
    right: 25px;
}

/* --- Development process timeline --- */
.cf-process {
    background: #fff;
    padding: 40px 0 90px;
}

.cf-process-head {
    max-width: 880px;
    margin: 0 auto 56px;
    text-align: center;
}

.cf-process-head .section-heading {
    margin-bottom: 14px;
}

.cf-process-subhead {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.2;
    color: #0c1b3d;
    margin: 0 0 18px;
}

.cf-process-text {
    font-size: 16px;
    line-height: 26px;
    color: #3a4252;
    margin: 0 auto;
    max-width: 780px;
}

.cf-steps-wrap {
    border-top: 2px solid rgba(12, 27, 61, 0.35);
    padding-top: 80px;
}

.cf-step-inner {
    position: relative;
}

.cf-step-inner::before {
    content: "";
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 66px;
    background: rgba(12, 27, 61, 0.35);
}

.cf-step.is-low .cf-step-inner {
    margin-top: 44px;
}

.cf-step.is-low .cf-step-inner::before {
    top: -124px;
    height: 110px;
}

.cf-step-num {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: #ffd200;
    color: #0c1b3d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 8px 18px -8px rgba(12, 27, 61, 0.5);
}

.cf-step-media {
    background: #e9edf6;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, 0.4);
}

.cf-step-media img {
    display: block;
    width: 100%;
    height: 143px;
    object-fit: cover;
}

.cf-step-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    line-height: 16.9px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-align: center;
    color: #0c1b3d;
    margin: 18px 0 10px;
}

.cf-step-text {
    font-size: 13.5px;
    line-height: 21.6px;
    text-align: center;
    color: #3a4252;
    margin: 0;
}

.cf-process-actions {
    margin-top: 60px;
    text-align: center;
}

/* --- Examples of custom flavors (light grey) --- */
.cf-examples {
    background: #fafafa;
    padding: 90px 0;
}

.cf-examples-head {
    margin-bottom: 44px;
}

.cf-examples-head .section-heading {
    max-width: 660px;
    margin-bottom: 18px;
}

.cf-examples-text {
    font-size: 15.5px;
    line-height: 27px;
    color: #3a4252;
    margin: 0;
    max-width: 605px;
}

.cf-examples-text a {
    color: #16399e;
    font-weight: 700;
    text-decoration: underline;
}

.cf-flavor-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: cf-flavor 0;
}

.cf-flavor-list[start="5"] {
    counter-reset: cf-flavor 4;
}

.cf-flavor-list[start="9"] {
    counter-reset: cf-flavor 8;
}

.cf-flavor-list li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(12, 27, 61, 0.1);
    counter-increment: cf-flavor;
}

.cf-flavor-list li::before {
    content: counter(cf-flavor, decimal-leading-zero);
    flex: 0 0 auto;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: #16399e;
}

.cf-flavor-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 21px;
    color: #0c1b3d;
    padding-bottom: 2px;
    position: relative;
    display: inline-block
}
.cf-flavor-name::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    left: 0;
    bottom: -2px;
    background: rgba(12, 27, 61, 0.25);
}

.cf-examples-foot {
    font-size: 13.5px;
    line-height: 23px;
    color: #3a4252;
    margin: 40px 0 0;
    max-width: 780px;
}

/* --- Video (navy band, thumbnail overhangs) --- */
.cf-video {
    background: #0c1b3d;
    padding: 80px 0 0;
    position: relative;
}

.cf-video::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 300px;
    background: #fff;
}

.cf-video-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 34px;
    line-height: 1.2;
    text-align: center;
    color: #fff;
    margin: 0 0 44px;
}

.cf-video-heading .accent {
    color: #ffd200;
}

.cf-video-holder {
    position: relative;
    z-index: 2;
    padding-bottom: 70px;
}

.cf-video-frame {
    position: relative;
    display: block;
    max-width: 900px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 8, 29, 0.4);

}
.cf-video-frame::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: radial-gradient(60% 60% at 50% 50%, rgba(8, 18, 42, 0.12) 0%, rgba(8, 18, 42, 0.50) 100%);
}

.cf-video-frame img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.cf-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    border-radius: 42px;
    background: #ffd200;
    color: #0c1b3d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: transform 0.25s ease, background 0.25s ease;
}

.cf-video-frame:hover .cf-video-play,
.cf-video-frame:focus-visible .cf-video-play {
    background: #ffdd33;
    transform: translate(-50%, -50%) scale(1.08);
}

/* --- Footer CTA --- */
.ccf-cta {
    padding-top: 130px;
}

.ccf-cta .create-heading {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.ccf-cta .create-heading,
.ccf-cta .create-desc,
.ccf-cta .create-actions {
    position: relative;
    z-index: 3;
}

/* --- Create A Custom Flavor responsive --- */
@media (max-width: 1399.98px) {
    .cf-quality-card {
        padding: 60px 70px 56px;
    }

    .cf-quality-shape-2,
    .cf-quality-shape-5 {
        display: none;
    }
}

@media (max-width: 1199.98px) {
    .cf-intro-lead {
        font-size: 26px;
        line-height: 36px;
    }

    .cf-quality-shape {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .cf-request,
    .cf-formats,
    .cf-examples {
        padding: 60px 0;
    }

    .cf-intro {
        padding: 60px 0;
    }

    .cf-quality {
        padding: 60px 0;
    }

    .cf-process {
        padding: 30px 0 60px;
    }

    .cf-quality-heading {
        font-size: 30px;
    }

    .cf-quality-card {
        padding: 44px 32px 40px;
    }

    .cf-steps-wrap {
        border-top: 0;
        padding-top: 30px;
    }

    .cf-step-inner::before,
    .cf-step.is-low .cf-step-inner::before {
        display: none;
    }

    .cf-step.is-low .cf-step-inner {
        margin-top: 0;
    }

    .cf-step-inner {
        padding-top: 20px;
    }

    .cf-video-heading {
        font-size: 28px;
    }
}

@media (max-width: 767.98px) {
    .cf-request .cb-form-card {
        padding: 28px 22px;
    }

    .cf-request-head .section-heading,
    .cf-examples-head .section-heading,
    .cf-process-head .section-heading {
        font-size: 28px;
    }

    .cf-process-subhead {
        font-size: 20px;
    }

    .cf-stat {
        padding-right: 0;
    }

    .cf-format-body {
        padding: 24px 22px 28px;
    }

    .cf-video {
        padding-top: 56px;
    }

    .cf-video::after {
        height: 110px;
    }

    .cf-video-holder {
        padding-bottom: 40px;
    }

    .cf-video-play {
        width: 62px;
        height: 62px;
        border-radius: 31px;
        font-size: 18px;
    }

    .ccf-cta {
        padding-top: 56px;
    }
}

@media (max-width: 575.98px) {
    .cf-quality-heading {
        font-size: 26px;
    }

    .cf-quality-actions .cta-btn,
    .cf-process-actions .cta-btn {
        width: 100%;
        justify-content: center;
    }

    .cf-step-media img {
        height: 170px;
    }
}

/* =================================================================
   === Commercialization page ===
   ================================================================= */

/* --- Hero --- */
.cm-hero .banner-heading {
    font-size: 44px;
    margin-bottom: 30px;
    text-transform: none;
}

.cm-hero-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.4px;
    color: #ffffff;
    margin: 0 0 12px;
}

/* --- Intro (cream) --- */
.cm-intro.commercial {
    background: #faf6ec;
    padding: 100px 0;
}
.cm-intro.commercial{
    background: #FFF8E3;
}
.cm-intro-lead {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    line-height: 40px;
    color: #0C1B3D;
    margin: 0;
    max-width: 642px;
}

.commercial .cm-intro-text {
    font-size: 15.5px;
    line-height: 25.6px;
    color: #3a4252;
    margin: 0 0 20px;
    max-width: 514px;
}

.cm-intro-emphasis {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15.5px;
    line-height: 25px;
    color: #0C1B3D;
    margin: 0;
    max-width: 514px;
}

.cm-stats {
    border-top: 1px solid rgba(12, 27, 61, 0.14);
    margin-top: 26px;
    padding-top: 23px;
    max-width: 514px;
}

.cm-stat {
    padding-right: 44px;
}

.cm-stat-num {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 30px;
    line-height: 36px;
    color: #16399e;
    margin-bottom: 4px;
}

.cm-stat-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 20px;
    color: #0c1b3d;
}

/* --- You Dream It (light grey) --- */
.cm-dream {
    background: #fafafa;
    padding: 90px 0;
}

.cm-dream-heading {
    margin-bottom: 48px;
}

.cm-dream-card {
    height: 100%;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 44px -26px rgba(12, 27, 61, 0.4);
}

.cm-dream-media img {
    display: block;
    width: 100%;
    height: 340px;
    object-fit: cover;
}

.cm-dream-body {
    padding: 30px;
}

.cm-dream-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.2;
    color: #0c1b3d;
    margin: 0 0 16px;
}

.cm-dream-text {
    font-size: 14.5px;
    line-height: 23.2px;
    color: #3a4252;
    margin: 0 0 16px;
}

.cm-dream-text:last-child {
    margin-bottom: 0;
}

/* --- Partner with Us --- */
.cm-partner {
    background: #ffffff;
    padding: 90px 0;
    position: relative;
}

.cm-partner-border {
    position: absolute;
    content: "";
    width: 94px;
    height: 2px;
    background: rgba(0, 30, 59, 0.32);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.cm-partner-figure {
    margin: 0 0 24px;
    position: relative;
    border-radius: 12px;
}

.cm-partner-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    position: relative;
    z-index: 2;
}

.cm-partner-figure--main img {
    height: 422px;
}

.cm-partner-media .row .cm-partner-figure {
    margin-bottom: 0;
}

.cm-partner-media .row .cm-partner-figure img {
    height: 308px;
}

/* yellow offset block behind the main photo */
.cm-partner-figure--main::after {
    content: "";
    position: absolute;
    right: -14px;
    bottom: -14px;
    width: 100%;
    height: 100%;
    background: #ffd200;
    border-radius: 12px;
    z-index: 1;
}

.cm-partner .cm-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #0c1b3d;
    margin: 0 0 6px;
}

.cm-partner-heading {
    margin-bottom: 18px;
}

.cm-partner-lead {
    font-family: 'Playfair Display', serif;
    font-size: 25px;
    line-height: 37.5px;
    color: #0c1b3d;
    margin: 0 0 34px;
}

.cm-partner-lead a {
    color: #16399e;
    font-weight: 700;
    text-decoration: underline;
}

.cm-point {
    border-top: 1px solid rgba(12, 27, 61, 0.16);
    padding-top: 22px;
    margin-bottom: 30px;
}

.cm-point:last-child {
    margin-bottom: 0;
}

.cm-point-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.3;
    color: #16399e;
    margin: 0 0 14px;
}

.cm-point-num {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 900;
    font-size: 30px;
    color: #16399e;
    margin-right: 14px;
}

.cm-point-text {
    font-size: 15.5px;
    line-height: 25.6px;
    color: #3a4252;
    margin: 0 0 18px;
}

.cm-point-text:last-child {
    margin-bottom: 0;
}

/* --- Custom packaging (blue band) --- */
.cm-packaging {
    background: #0054a4;
    padding: 90px 0;
}

.cm-packaging-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 36px;
    line-height: 1.14;
    color: #ffffff;
    margin: 0 0 18px;
}

.cm-packaging-heading .accent {
    color: #ffd200;
}

.cm-packaging-lead {
    font-size: 16px;
    line-height: 26px;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 24px;
}

.cm-check-list {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
}

.cm-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
    font-size: 15.5px;
    line-height: 25px;
    color: #ffffff;
}

.cm-check-list li:last-child {
    margin-bottom: 0;
}

.cm-check-list strong {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.cm-check {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    border-radius: 12px;
    background: #ffd200;
    color: #0054a4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.cm-packaging-note {
    font-size: 13.5px;
    line-height: 23px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 20px;
}

.cm-packaging-disclaimer {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 22px;
    color: #ffffff;
    margin: 0;
}

.cm-packaging-figure {
    position: relative;
    margin: 0;
    border-radius: 14px;
}

.cm-packaging-figure img {
    display: block;
    width: 100%;
    height: 393px;
    object-fit: cover;
    border-radius: 14px;
    position: relative;
    z-index: 2;
}

.cm-packaging-figure::after {
    content: "";
    position: absolute;
    right: -14px;
    bottom: -14px;
    width: 100%;
    height: 100%;
    background: #ffd200;
    border-radius: 14px;
    z-index: 1;
}

/* --- Why work with us (timeline) --- */
.cm-why {
    background: #ffffff;
    padding: 90px 0;
}

.cm-why-heading {
    margin-bottom: 56px;
}

.cm-steps-wrap {
    border-top: 2px solid rgba(12, 27, 61, 0.35);
    padding-top: 80px;
}

.cm-step-inner {
    position: relative;
}

.cm-step-inner::before {
    content: "";
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 66px;
    background: rgba(12, 27, 61, 0.35);
}

.cm-step.is-low .cm-step-inner {
    margin-top: 44px;
}

.cm-step.is-low .cm-step-inner::before {
    top: -124px;
    height: 110px;
}

.cm-step-num {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: #ffd200;
    color: #0c1b3d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 8px 18px -8px rgba(12, 27, 61, 0.5);
}

.cm-step-media {
    background: #e9edf6;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, 0.4);
}

.cm-step-media img {
    display: block;
    width: 100%;
    height: 217px;
    object-fit: cover;
}

.cm-step-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 13px;
    line-height: 16.9px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-align: center;
    color: #0c1b3d;
    margin: 18px 0 12px;
}

.cm-step-text {
    font-size: 13.5px;
    line-height: 21.6px;
    text-align: center;
    color: #3a4252;
    margin: 0 0 14px;
}

.cm-step-text:last-child {
    margin-bottom: 0;
}

.cm-step-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.cm-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.cm-tags li {
    background: #ffd200;
    color: #0c1b3d;
    border-radius: 999px;
    padding: 6px 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11.5px;
    line-height: 18.63px;
}

/* --- Footer CTA --- */
.cml-cta {
    padding-top: 90px;
}

.cml-cta-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #0c1b3d;
    margin: 0 0 10px;
    position: relative;
    z-index: 3;
}

.cml-cta .create-heading,
.cml-cta .create-desc,
.cml-cta .create-actions {
    position: relative;
    z-index: 3;
}

.cml-cta .create-heading {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Commercialization responsive --- */
@media (max-width: 1199.98px) {
    .cm-intro-lead {
        font-size: 25px;
        line-height: 36px;
    }

    .cm-partner-lead {
        font-size: 22px;
        line-height: 33px;
    }
}

@media (max-width: 991.98px) {
    .cm-hero .banner-heading {
        font-size: 34px;
    }

    .cm-intro.commercial,
    .cm-dream,
    .cm-partner,
    .cm-packaging,
    .cm-why {
        padding: 60px 0;
    }

    .cm-dream-heading,
    .cm-why-heading {
        margin-bottom: 36px;
    }

    .cm-dream-media img {
        height: 260px;
    }

    .cm-partner-figure--main img {
        height: 340px;
    }

    .cm-packaging-figure img {
        height: 320px;
    }

    .cm-steps-wrap {
        border-top: 0;
        padding-top: 30px;
    }

    .cm-step-inner::before,
    .cm-step.is-low .cm-step-inner::before {
        display: none;
    }

    .cm-step.is-low .cm-step-inner {
        margin-top: 0;
    }

    .cm-step-inner {
        padding-top: 20px;
    }
}

@media (max-width: 767.98px) {
    .cm-hero .banner-heading {
        font-size: 28px;
    }

    .cm-dream-heading,
    .cm-why-heading,
    .cm-partner-heading {
        font-size: 28px;
    }

    .cm-packaging-heading {
        font-size: 26px;
    }

    .cm-dream-title {
        font-size: 19px;
    }

    .cm-point-title {
        font-size: 19px;
    }

    .cm-point-num {
        font-size: 26px;
        margin-right: 10px;
    }

    .cm-stat {
        padding-right: 0;
    }

    .cm-dream-body {
        padding: 24px 22px;
    }

    .cml-cta {
        padding-top: 56px;
    }
}

@media (max-width: 575.98px) {
    .cm-partner-figure--main img {
        height: 240px;
    }

    .cm-partner-media .row .cm-partner-figure img {
        height: 180px;
    }

    .cm-packaging-figure img {
        height: 240px;
    }

    .cm-step-media img {
        height: 180px;
    }

    .cm-hero .page-banner-actions .cta-btn,
    .cml-cta .create-actions .cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =================================================================
   === Stocked Products page ===
   ================================================================= */

/* --- Hero --- */
.sp-hero .banner-heading {
    font-size: 44px;
    text-transform: none;
    margin-bottom: 20px;
}

/* --- Group sections --- */
.sp-groups {
    background: #ffffff;
    padding: 0;
}
section.sp-groups.sp-groups--nav{
    padding-top: 70px;
}
/* anchor nav */
.sp-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 46px;
}

.sp-nav a {
    display: inline-block;
    padding: 10px 19px;
    border: 1px solid rgba(12, 27, 61, 0.16);
    border-radius: 999px;
    font-size: 14px;
    line-height: 21px;
    color: #0c1b3d;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.sp-nav a:hover,
.sp-nav a:focus-visible {
    background: #16399e;
    border-color: #16399e;
    color: #ffffff;
}

/* numbered group header */
.sp-group-head {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    border-top: 1px solid rgba(12, 27, 61, 0.16);
    padding-top: 21px;
    margin-bottom: 34px;
    scroll-margin-top: 120px;
}

.sp-group-head + .sp-grid {
    margin-bottom: 56px;
}

.sp-group-num {
    flex: 0 0 auto;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 30px;
    line-height: 34px;
    color: #16399e;
}

.sp-group-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 34px;
    line-height: 42px;
    color: #0c1b3d;
    margin: 0;
}

.sp-group-text {
    font-size: 15.5px;
    line-height: 25.6px;
    color: #3a4252;
    margin: 12px 0 0;
    max-width: 843px;
}

/* --- Product card --- */
.sp-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid rgba(12, 27, 61, 0.12);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 26px -20px rgba(12, 27, 61, 0.45);
    transition: box-shadow 0.2s, transform 0.2s;
}

.sp-card:hover {
    box-shadow: 0 18px 38px -22px rgba(12, 27, 61, 0.5);
    transform: translateY(-3px);
}

.sp-card-media {
    position: relative;
    background: #ffffff;
    padding: 12px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-card-media img {
    display: block;
    max-width: 88%;
    max-height: 88%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.sp-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    border-radius: 999px;
    padding: 5px 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    line-height: 15px;
}

.sp-badge--stock {
    background: #ffd200;
    color: #0c1b3d;
}

.sp-badge--special {
    background: #ffd200;
    color: #0c1b3d;
}

.sp-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 14px 17px 20px;
    border-top: 1px solid rgba(12, 27, 61, 0.1);
}

.sp-card-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 20.5px;
    color: #0c1b3d;
    margin: 0 0 14px;
}

/* spec strip */
.sp-specs {
    display: flex;
    margin: 0 0 20px;
    padding: 13px 0 0;
    border-top: 1px solid rgba(12, 27, 61, 0.12);
}

.sp-spec {
    padding-right: 16px;
}

.sp-spec + .sp-spec {
    padding-left: 17px;
    border-left: 1px solid rgba(12, 27, 61, 0.12);
}

.sp-spec-val {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 13px;
    line-height: 16px;
    color: #0c1b3d;
    margin: 0 0 3px;
}

.sp-spec-lbl {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 15px;
    color: #6a7280;
    margin: 0;
}

.sp-btn {
    align-self: flex-start;
    margin-top: auto;
    display: inline-block;
    padding: 11px 21px;
    border: 1px solid rgba(12, 27, 61, 0.3);
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    line-height: 18px;
    color: #0c1b3d;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.sp-btn:hover,
.sp-btn:focus-visible {
    background: #0c1b3d;
    border-color: #0c1b3d;
    color: #ffffff;
}

/* --- "Don't see your shape?" card --- */
.sp-card--custom {
    background: #0c1b3d;
    border-color: #0c1b3d;
    position: relative;
    overflow: hidden;
}

.sp-card--custom::after {
    content: "";
    position: absolute;
    left: -15px;
    bottom: -34px;
    width: calc(100% + 30px);
    height: 65px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

.sp-custom-media {
    background: #162549
}

.sp-custom-disc {
    width: 100%;
    max-width: 210px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #f7e9bd;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    line-height: 21px;
    color: #0c1b3d;
    box-shadow: inset 0 0 0 2px rgba(12, 27, 61, 0.18);
}

.sp-custom-body {
    flex: 1 1 auto;
    padding: 14px 17px 24px;
    position: relative;
    z-index: 2;
}

.sp-custom-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 32px;
    color: #ffffff;
    margin: 0 0 22px;
}

.sp-custom-btn {
    font-size: 11.5px;
    padding: 11px 20px;
}

/* --- Butter balls panel --- */
.sp-panel {
    background: #faf6ec;
    border-radius: 12px;
    padding: 44px 32px 40px;
    margin-bottom: 62px;
}

.sp-panel-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 28px;
    color: #0c1b3d;
    margin: 0 0 12px;
}

.sp-panel-text {
    font-size: 15.5px;
    line-height: 25.6px;
    color: #3a4252;
    margin: 0 0 28px;
    max-width: 640px;
}

.sp-panel .sp-card {
    background: #ffffff;
}

/* --- How to order --- */
.sp-order {
    background: #fafafa;
    padding: 90px 0;
    scroll-margin-top: 100px;
}

.sp-order-figure {
    margin: 0;
    position: relative;
    border-radius: 14px;
}

.sp-order-figure img {
    display: block;
    width: 100%;
    height: 346px;
    object-fit: cover;
    border-radius: 14px;
    position: relative;
    z-index: 2;
}

.sp-order-figure::after {
    content: "";
    position: absolute;
    right: -14px;
    bottom: -14px;
    width: 100%;
    height: 100%;
    background: #ffd200;
    border-radius: 14px;
    z-index: 1;
}

.sp-order-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 38px;
    color: #0c1b3d;
    margin: 0 0 14px;
}

.sp-order-text {
    font-size: 16px;
    line-height: 27px;
    color: #3a4252;
    margin: 0 0 26px;
}

.sp-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* --- Footer CTA --- */
.sp-cta {
    padding-top: 90px;
}

.sp-cta .create-heading,
.sp-cta .create-desc,
.sp-cta .create-actions {
    position: relative;
    z-index: 3;
}

.sp-cta .create-heading {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Stocked Products responsive --- */
@media (max-width: 991.98px) {
    .sp-hero .banner-heading {
        font-size: 34px;
    }

    .sp-groups {
        padding: 50px 0 60px;
    }

    .sp-order {
        padding: 60px 0;
    }

    .sp-group-title {
        font-size: 28px;
        line-height: 36px;
    }

    .sp-group-num {
        font-size: 24px;
    }

    .sp-group-head {
        gap: 18px;
    }

    .sp-order-figure img {
        height: 300px;
    }
}

@media (max-width: 767.98px) {
    .sp-hero .banner-heading {
        font-size: 28px;
    }

    .sp-group-title {
        font-size: 24px;
        line-height: 32px;
    }

    .sp-nav {
        gap: 7px;
        margin-bottom: 34px;
    }

    .sp-nav a {
        padding: 8px 14px;
        font-size: 13px;
    }

    .sp-panel {
        padding: 30px 20px 28px;
    }

    .sp-custom-title {
        font-size: 20px;
        line-height: 27px;
    }

    .sp-order-title {
        font-size: 26px;
    }

    .sp-cta {
        padding-top: 56px;
    }
}

@media (max-width: 575.98px) {
    .sp-order-figure img {
        height: 240px;
    }

    .sp-order-actions .cta-btn,
    .sp-hero .page-banner-actions .cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* A drop-down entry with nowhere to go is drawn as a plain box rather than a
   link, so it takes the entry's look without the hover a link shows. */
.solution-menu li > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 2px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    color: #0e2357;
}

.solution-menu li > div em {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 1px solid #d4ddf0;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #0054a4;
}

@media (max-width: 575.98px) {
    .solution-menu li > div {
        font-size: 12px;
        padding: 11px 2px;
    }

    .solution-menu li > div em {
        width: 22px;
        height: 22px;
        border-radius: 11px;
    }
}

/* A card with nowhere to go is drawn as a div, and its arrow — which promises a
   link — is hidden on it. Hidden rather than left out: the arrow is often the
   tallest thing in its row, so taking it away would move the title out of line
   with the linked cards beside it. A card that opens a drop-down is a button,
   so it keeps its arrow. */
div.wm-brand-card .wm-brand-link em,
div.wcu-feature-card .wcu-feature-arrow,
div.wcu-feature-card .wcu-feature-link em,
div.gla-fmt-card .gla-fmt-arrow,
div.gra-fmt-card .gra-fmt-arrow,
div.qc-ind .qc-ind-arrow,
div.rs-bulk-card .rs-bulk-arrow,
div.solution-card .solution-arrow,
div.ready-card .ready-arrow,
div.rs-flavor-card .rs-flavor-arrow,
div.bd-serve-card .bd-serve-arrow,
div.emp-link-card .emp-link-icon,
div.ibs-intro-link .ibs-intro-link-arrow,
.solution-menu li > div em {
    visibility: hidden;
}

/* === 404 page: a way on from an old address === */
section.error-404.not-found p.error-404-desc {
    margin-bottom: 14px;
}

.error-404-intro {
    max-width: 560px;
    margin: 0 auto 30px;
    font-size: 16px;
    line-height: 1.6;
    color: #3a4252;
}

.error-404-search {
    display: flex;
    align-items: stretch;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto 40px;
}

.error-404-search .cta-btn {
    height: 52px;
    padding-top: 0;
    padding-bottom: 0;
}

.error-404-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    padding: 0 20px;
    border: 1px solid rgba(12, 27, 61, .18);
    border-radius: 50px;
    background: #fff;
    font-size: 16px;
    color: var(--c-navy);
}

.error-404-search input[type="search"]::placeholder {
    color: #6b7385;
}

.error-404-search input[type="search"]:focus {
    outline: none;
    border-color: #0054a4;
    box-shadow: 0 0 0 3px rgba(0, 84, 164, .18);
}

.error-404-links {
    max-width: 860px;
    margin: 0 auto 40px;
}

.error-404-links-heading {
    margin-bottom: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0054a4;
}

.error-404-links ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.error-404-links a {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border: 1px solid rgba(12, 27, 61, .18);
    border-radius: 50px;
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--c-navy);
    transition: border-color .2s ease, color .2s ease;
}

.error-404-links a:hover,
.error-404-links a:focus-visible {
    border-color: #0054a4;
    color: #0054a4;
}

.error-404-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

@media (max-width: 575.98px) {
    .error-404-search {
        flex-direction: column;
    }

    .error-404-search .cta-btn,
    .error-404-actions .cta-btn {
        width: 100%;
    }
}

/* === Site search form (searchform.php) === */
.bbf-search-form {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}

.bbf-search-form .search-field {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    padding: 0 20px;
    border: 1px solid rgba(12, 27, 61, .18);
    border-radius: 50px;
    background: #fff;
    font-size: 16px;
    color: var(--c-navy);
}

.bbf-search-form .search-field::placeholder {
    color: #6b7385;
}

.bbf-search-form .search-field:focus {
    outline: none;
    border-color: #0054a4;
    box-shadow: 0 0 0 3px rgba(0, 84, 164, .18);
}

.bbf-search-form .search-submit {
    height: 52px;
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width: 575.98px) {
    .bbf-search-form {
        flex-direction: column;
    }

    .bbf-search-form .search-submit {
        width: 100%;
    }
}

.gform_description a{
    color: #16399e;
    text-decoration: underline;
    font-weight: 700;
}
.gform_description a:hover{
    text-decoration: none;
}
.su-econ-card ul li{
    display: flex;
}
@media(max-width:575px){
    .bd-stocked-list {
    columns: 1;
}
.cl-video-area{
    padding-bottom:50px 
}
}

/* === Hospitality page (hospitality.html): hs- sections === */
.hs-hero .banner-heading {
    text-transform: none;
}

.hs-section-intro {
    max-width: 820px;
    margin: 0 auto 56px;
    text-align: center;
}

.hs-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 11.5px;
    line-height: 18.4px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #16399e;
    margin-bottom: 12px;
}

.hs-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 42px;
    line-height: 43.68px;
    letter-spacing: -.5px;
    color: #0c1b3d;
    margin-bottom: 13px;
}

.hs-heading--light {
    color: #ffffff;
}

.hs-heading--light .accent {
    color: #ffd200;
}

.hs-lead {
    font-size: 18px;
    line-height: 28.8px;
    color: #3a4252;
    margin: 0;
}

.hs-lead--light {
    color: rgba(255, 255, 255, .82);
}

.hs-intro {
    background: #fff8e3;
    padding: 100px 0;
}

.hs-intro-statement {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 27px;
    line-height: 39.96px;
    color: #0c1b3d;
    margin: 0;
}

.hs-intro-statement a {
    color: #0054a4;
    text-decoration: underline;
}

.hs-intro-statement a:hover {
    text-decoration: none;
}

.hs-intro-media {
    position: relative;
    padding: 28px 34px 44px 0;
}

.hs-intro-img {
    width: 100%;
    aspect-ratio: 567 / 479;
    object-fit: cover;
    border-radius: 22px;
    background: #faf6ec;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.hs-intro-inset {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 54%;
    max-width: 304px;
    aspect-ratio: 304 / 243;
    object-fit: cover;
    border: 5px solid #ffffff;
    border-radius: 18px;
    background: #faf6ec;
    box-shadow: 0 22px 44px -18px rgba(12, 27, 61, .45);
}

.hs-intro-badge {
    position: absolute;
    top: -16px;
    right: 8%;
    z-index: 3;
    width: 115px;
    height: 112px;
    border-radius: 56px;
    background: #ffd200;
    color: #0c1b3d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    font-family: 'Shantell Sans', cursive;
    font-weight: 700;
    transform: rotate(7.78deg);
    box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .35);
}

.hs-intro-badge-top {
    font-size: 30px;
    line-height: 30px;
}

.hs-intro-badge-year {
    font-size: 12.5px;
    line-height: 15px;
}

.hs-pillars {
    background: #0054a4;
    padding: 88px 0 90px;
}

.hs-pillar {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffd200;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.hs-pillar-media {
    background: #faf6ec;
}

.hs-pillar-media img {
    width: 100%;
    height: 248px;
    object-fit: cover;
}

.hs-pillar-body {
    padding: 27px 30px 32px;
}

.hs-pillar-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 19px;
    line-height: 24.32px;
    color: #0c1b3d;
    margin-bottom: 14px;
}

.hs-pillar-text {
    font-size: 15px;
    line-height: 24.9px;
    color: rgba(12, 27, 61, .86);
    margin: 0;
}

.hs-pillar-text a {
    color: #0054a4;
    font-weight: 600;
    text-decoration: underline;
}

.hs-pillar-text a:hover {
    text-decoration: none;
}

.hs-fit {
    background: #ffffff;
    padding: 88px 0 10px;
}

.hs-fit-row {
    margin-bottom: 80px;
}

.hs-fit-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 34px;
    line-height: 38.34px;
    letter-spacing: -.3px;
    color: #0c1b3d;
    margin-bottom: 18px;
}

.hs-fit .content-img.with-border img {
    aspect-ratio: 590 / 393;
}

.hs-products {
    padding-top: 50px;
    background: #FBFBFB;
}

.hs-round {
    margin: 0 auto;
    width: 380px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: #faf6ec;
    box-shadow: 0 30px 60px -30px rgba(12, 27, 61, .35);
}

.hs-round img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hs-products .ws-badge {
    font-size: 17px;
    padding: 9px 16px;
    border-radius: 8px;
}

.hs-products .snake-path {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
}

.hs-snake-badge {
    display: none;
}

@media (min-width: 992px) {
    .hs-products .ws-sector:last-child {
        padding-bottom: 70px;
    }

    .hs-snake-badge {
        display: inline-flex;
        top: 3px;
        margin: 0;
        z-index: 2;
        transform: translate(-50%, -50%);
    }

    .ws-sector:nth-of-type(1) > .hs-snake-badge {
        left: 51.2%;
    }

    .ws-sector:nth-of-type(2) > .hs-snake-badge {
        left: 57.8%;
    }

    .ws-sector:nth-of-type(3) > .hs-snake-badge {
        left: 42.1%;
    }

    .ws-sector:nth-of-type(4) > .hs-snake-badge {
        left: 52.6%;
    }
}

@media (max-width: 991.98px) {
    .hs-products .ws-sector-body .ws-badge {
        display: inline-block;
        position: static;
        width: auto;
        transform: none;
        margin-bottom: 18px;
    }
}

.hs-product-cta {
    margin-top: 2px;
}

.hs-sauces {
    background: #ffffff;
    padding: 90px 0;
}

.hs-sauce-rule {
    border-top: 2px solid #0c1b3d;
    padding-top: 8px;
}

.hs-sauce-card {
    position: relative;
    padding-top: 64px;
    text-align: center;
}

.hs-sauce-card::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 72px;
    background: linear-gradient(180deg, #0c1b3d 0%, rgba(22, 57, 158, .35) 100%);
}

.hs-sauce-card--drop {
    margin-top: 52px;
}

.hs-sauce-card--drop::before {
    top: -60px;
    height: 124px;
}

.hs-sauce-num {
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    background: #ffd200;
    color: #0c1b3d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 17px;
    line-height: 1;
    box-shadow: 0 10px 26px -8px rgba(12, 27, 61, .35);
}

.hs-sauce-media {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.hs-sauce-media img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.hs-sauce-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 15.5px;
    line-height: 24.8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #0c1b3d;
    margin: 15px 0 8px;
}

.hs-sauce-text {
    font-size: 14.5px;
    line-height: 23.93px;
    color: #3a4252;
    max-width: 311px;
    margin: 0 auto;
}

.hs-sauce-text a {
    color: #16399e;
    font-weight: 600;
    text-decoration: underline;
}

.hs-sauce-text a:hover {
    text-decoration: none;
}

.footer-cta-area.hs-cta {
    padding-top: 100px;
}

.hs-cta .create-card {
    padding: 86px 72px;
}

.hs-cta .create-heading .accent {
    color: #0054a4;
}

@media (max-width: 1199.98px) {
    .hs-heading {
        font-size: 36px;
        line-height: 1.12;
    }

    .hs-fit-title {
        font-size: 28px;
        line-height: 1.2;
    }

    .hs-intro-statement {
        font-size: 24px;
        line-height: 36px;
    }
}

@media (max-width: 991.98px) {
    .hs-intro {
        padding: 60px 0;
    }

    .hs-pillars {
        padding: 60px 0;
    }

    .hs-fit {
        padding: 60px 0 10px;
    }

    .hs-fit-row {
        margin-bottom: 50px;
    }

    .hs-products {
        padding-top: 20px;
    }

    .hs-sauces {
        padding: 60px 0;
    }

    .hs-sauce-rule {
        border-top: 0;
        padding-top: 0;
    }

    .hs-sauce-card {
        padding-top: 40px;
    }

    .hs-sauce-card::before {
        display: none;
    }

    .hs-sauce-card--drop {
        margin-top: 0;
    }

    .hs-sauce-num {
        top: 12px;
    }

    .hs-cta .create-card {
        padding: 60px 32px;
    }
}

@media (max-width: 767.98px) {
    .hs-heading {
        font-size: 30px;
    }

    .hs-section-intro {
        margin-bottom: 40px;
    }

    .hs-intro-statement {
        font-size: 21px;
        line-height: 33px;
    }

    .hs-fit-title {
        font-size: 24px;
    }

    .hs-pillar-media img {
        height: 220px;
    }
}

@media (max-width: 575.98px) {
    .hs-heading {
        font-size: 26px;
    }

    .hs-intro-media {
        padding: 0;
    }

    .hs-intro-img {
        aspect-ratio: 4 / 3;
    }

    .hs-intro-inset {
        position: static;
        display: block;
        width: 68%;
        margin: -34px 0 0 auto;
    }

    .hs-intro-badge {
        top: -14px;
        right: 4%;
        width: 92px;
        height: 90px;
        border-radius: 46px;
    }

    .hs-intro-badge-top {
        font-size: 24px;
        line-height: 24px;
    }

    .hs-round {
        max-width: 300px;
    }

    .hs-product-cta {
        width: 100%;
        justify-content: center;
    }
}

/* === Footer CTA on navy (butterball-new-footer/index.html), scoped to .footer-cta-navy === */
.footer-cta-area.footer-cta-navy {
    position: relative;
    background: #0C1B3D;
}
.footer-cta-area.footer-cta-navy .footer-cta-bg {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 65%;
}
.footer-cta-area.footer-cta-navy .footer-cta-shape-9 .footer-shape-img {
    animation: shapeFloatB 5.8s ease-in-out infinite 1.2s;
}
.footer-cta-area.footer-cta-navy .footer-cta-shape-10 .footer-shape-img {
    animation: shapeFloatB 5.8s ease-in-out infinite 1.2s;
}
.footer-cta-area.footer-cta-navy .footer-cta-shape-1 {
    top: -45px;
    left: 25px;
    width: 190px;
}
.footer-cta-area.footer-cta-navy .footer-cta-shape-2 {
    width: 329px;
    top: -37px;
    left: -89px;
}
.footer-cta-area.footer-cta-navy .footer-cta-shape-3 {
    width: 220px;
    bottom: 75px;
    left: -73px;
}
.footer-cta-area.footer-cta-navy .footer-cta-shape-4 {
    width: 270px;
    bottom: -50px;
    left: -21px;
    z-index: 9;
}
.footer-cta-area.footer-cta-navy .footer-cta-shape-5 {
    display: block;
    width: 170px;
    bottom: 0;
    right: 45px;
    z-index: 9;
}
.footer-cta-area.footer-cta-navy .footer-cta-shape-6 {
    display: block;
    width: 175px;
    bottom: -15px;
    right: -76px;
}
.footer-cta-area.footer-cta-navy .footer-cta-shape-7 {
    display: block;
    width: 299px;
    bottom: 134px;
    right: -164px;
    z-index: -1;
}
.footer-cta-area.footer-cta-navy .footer-cta-shape-8 {
    display: block;
    width: 142px;
    top: 73px;
    right: -2px;
}
.footer-cta-area.footer-cta-navy .footer-cta-shape-9 {
    display: block;
    width: 250px;
    bottom: -81px;
    left: -40px;
}
.footer-cta-area.footer-cta-navy .footer-cta-shape-10 {
    display: block;
    width: 203px;
    top: -54px;
    right: -40px;
}
@media (max-width: 1400px) {
    .footer-cta-area.footer-cta-navy .footer-cta-shape-1 {
        top: -45px;
        left: 25px;
        width: 190px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-2 {
        width: 329px;
        top: -37px;
        left: -89px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-3 {
        width: 220px;
        bottom: 75px;
        left: -73px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-4 {
        width: 270px;
        bottom: -50px;
        left: -21px;
        z-index: 9;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-5 {
        display: block;
        width: 170px;
        bottom: 0;
        right: 45px;
        z-index: 9;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-6 {
        display: block;
        width: 175px;
        bottom: -15px;
        right: -76px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-7 {
        display: block;
        width: 299px;
        bottom: 134px;
        right: -164px;
        z-index: -1;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-8 {
        display: block;
        width: 142px;
        top: 73px;
        right: -2px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-9 {
        display: block;
        width: 250px;
        bottom: -81px;
        left: -40px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-10 {
        display: block;
        width: 203px;
        top: -54px;
        right: -40px;
    }
}
@media (max-width: 991.98px) {
    .footer-cta-area.footer-cta-navy .footer-cta-shape-1 {
        top: -33px;
        left: -19px;
        width: 128px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-2 {
        width: 186px;
        top: 13px;
        left: -47px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-3 {
        width: 171px;
        bottom: 125px;
        left: -73px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-4 {
        width: 208px;
        bottom: -50px;
        left: -21px;
        z-index: 9;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-5 {
        display: block;
        width: 110px;
        bottom: 0;
        right: 40px;
        z-index: 9;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-6 {
        display: block;
        width: 100px;
        bottom: -15px;
        right: -22px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-7 {
        display: block;
        width: 216px;
        bottom: 134px;
        right: -100px;
        z-index: -1;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-8 {
        display: block;
        width: 90px;
        top: 73px;
        right: -2px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-9 {
        display: block;
        width: 193px;
        bottom: -50px;
        left: -25px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-10 {
        display: block;
        width: 150px;
        top: -41px;
        right: -27px;
    }
}
@media (max-width: 767.98px) {
    .footer-cta-area.footer-cta-navy .create-card {
        padding: 44px 24px;
        margin-top: 50px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-1 {
        top: -33px;
        left: -33px;
        width: 106px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-2 {
        width: 186px;
        top: 13px;
        left: -47px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-3 {
        width: 120px;
        bottom: 75px;
        left: -35px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-4 {
        width: 140px;
        bottom: -50px;
        left: -21px;
        z-index: 9;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-5 {
        display: block;
        width: 82px;
        bottom: 0;
        right: -1px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-6 {
        display: block;
        width: 100px;
        bottom: -15px;
        right: -22px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-7 {
        display: block;
        width: 169px;
        bottom: 84px;
        right: -85px;
        z-index: -1;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-8 {
        display: block;
        width: 90px;
        top: 73px;
        right: -2px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-9 {
        display: block;
        width: 126px;
        bottom: -25px;
        left: -25px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-10 {
        display: block;
        width: 150px;
        top: -41px;
        right: -27px;
    }
}
@media (max-width: 575.98px) {
    .footer-cta-area.footer-cta-navy .footer-cta-shape-1 {
        top: -33px;
        left: -33px;
        width: 106px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-2 {
        width: 186px;
        top: 13px;
        left: -47px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-3 {
        width: 120px;
        bottom: 75px;
        left: -35px;
        z-index: -1;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-4 {
        width: 140px;
        bottom: -50px;
        left: -21px;
        z-index: -1;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-5 {
        display: block;
        width: 82px;
        bottom: 0;
        right: -1px;
        z-index: -1;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-6 {
        display: block;
        width: 100px;
        bottom: -15px;
        right: -22px;
        z-index: -1;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-7 {
        display: block;
        width: 169px;
        bottom: 84px;
        right: -85px;
        z-index: -1;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-8 {
        display: block;
        width: 90px;
        top: 73px;
        right: -2px;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-9 {
        display: block;
        width: 126px;
        bottom: -25px;
        left: -25px;
        z-index: -1;
    }
    .footer-cta-area.footer-cta-navy .footer-cta-shape-10 {
        display: block;
        width: 150px;
        top: -41px;
        right: -27px;
    }
}

/* Where the band's older rules still reach the navy band, the redesign's values. */
.footer-cta-area.footer-cta-navy .create-card .footer-cta-shape-1 {
    right: auto;
    bottom: auto;
    display: block !important;
}
.footer-cta-area.footer-cta-navy .create-card .footer-cta-shape-2 {
    right: auto;
    bottom: auto;
    display: block !important;
}
.footer-cta-area.footer-cta-navy .create-card .footer-cta-shape-3 {
    top: auto;
    right: auto;
    display: block !important;
}
.footer-cta-area.footer-cta-navy .create-card .footer-cta-shape-4 {
    top: auto;
    right: auto;
    display: block !important;
}
.footer-cta-area.footer-cta-navy .create-card .footer-cta-shape-5 {
    top: auto;
    left: auto;
    display: block !important;
}
.footer-cta-area.footer-cta-navy .create-card .footer-cta-shape-6 {
    top: auto;
    left: auto;
    display: block !important;
}
.footer-cta-area.footer-cta-navy .create-card .footer-cta-shape-7 {
    top: auto;
    left: auto;
    display: block !important;
}
.footer-cta-area.footer-cta-navy .create-card .footer-cta-shape-8 {
    bottom: auto;
    left: auto;
    display: block !important;
}
.footer-cta-area.footer-cta-navy .create-card .footer-cta-shape-9 {
    top: auto;
    right: auto;
    display: block !important;
}
.footer-cta-area.footer-cta-navy .create-card .footer-cta-shape-10 {
    bottom: auto;
    left: auto;
    display: block !important;
}
/* === end: Footer CTA on navy === */
@media(max-width:575px){
    .footer-cta-area.footer-cta-navy .create-card{
        margin-top:0
    }
}

/* === Blocks index and style labels (html-final/blocks/index.html) === */
.blocks-index .block-box {
    background: #fff;
    border: none;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(13, 13, 13, 0.05), 0 0 0 1px rgba(13, 13, 13, 0.05);
    display: flex;
    flex-direction: column;
    transition: all 0.4s;
    color: #000;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    border: 2px solid var(--Soft-Blue-Gradient, rgba(14, 37, 69, 0.60));
}

.blocks-index .block-box:hover {
    transform: translateY(-5px);
    color: #fff;
    background: #0E2545;
}

.blocks-index {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* The theme's header sits over the top of the page, which a banner normally
   clears; the index and the block pages open without one. */
.l-blocks-wrap > .butterballfarms-block-links:first-child > .blocks-index {
    padding-top: 160px;
}

.l-blocks-wrap > .text-center:first-child > .eg-group-title {
    margin-top: 136px;
}

@media (max-width: 991.98px) {
    .l-blocks-wrap > .butterballfarms-block-links:first-child > .blocks-index {
        padding-top: 130px;
    }

    .l-blocks-wrap > .text-center:first-child > .eg-group-title {
        margin-top: 106px;
    }
}

.eg-group-title {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #fff;
    background: #0e2545;
    display: inline-block;
    padding: 19px 16px;
    border-radius: 0px;
    font-weight: 700;
    margin: 0 0 8px;
    display: block;
}
/* === end: Blocks index and style labels === */
.tax-product_cat section.sp-groups.sp-groups--archive {
    padding: 60px 0;
}
.gfield_required{
    display: none !important;
}

/* The recipe browser asks for the address in a dialog when the form is a
   HubSpot one, so the strip at the top of the card holds only the button. */
.rc-signup--button {
    width: auto;
    min-width: 0;
}

.rc-form-modal .modal-content {
    position: relative;
    border: 0;
    border-radius: 22px;
    padding: 34px;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .35);
}

.rc-form-modal .modal-body {
    padding: 0;
}

.rc-form-modal .rc-form-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
}

.rc-form-modal .rc-form-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 30px;
    color: var(--c-navy);
    margin: 0 30px 6px 0;
}

.rc-form-modal .rc-form-note {
    font-size: 14.5px;
    line-height: 23px;
    color: #3a4252;
    margin: 0 0 22px;
}

@media (max-width: 575.98px) {
    .rc-form-modal .modal-content {
        padding: 26px 20px;
    }
}

/* === HubSpot forms ===
   HubSpot brings its own markup, so the fields, labels and submit are dressed
   to match the Gravity Forms styling above and the design's buttons. */
.hs-form-embed {
    width: 100%;
}

.hs-form-embed .hs-form fieldset {
    max-width: none;
    border: 0;
    padding: 0;
    margin: 0;
}

.hs-form-embed .hs-form-field {
    margin-bottom: 16px;
}

.hs-form-embed .hs-form-field > label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #3a4252;
    margin-bottom: 7px;
}

.hs-form-embed .hs-form-required {
    color: var(--c-navy);
    margin-left: 2px;
}

.hs-form-embed .hs-input {
    width: 100%;
    height: 50px;
    border: 1px solid #F6F8FD;
    border-radius: 12px;
    background: #F6F8FD;
    padding: 0 16px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--c-navy);
    transition: border-color .2s, box-shadow .2s;
}

.hs-form-embed .hs-input:focus {
    outline: none;
    border-color: #16399e;
    box-shadow: 0 0 0 3px rgba(22, 57, 158, .12);
}

.hs-form-embed select.hs-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c1b3d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
    padding-right: 44px;
}

.hs-form-embed textarea.hs-input {
    height: auto;
    min-height: 110px;
    padding: 14px 16px;
    resize: vertical;
}

/* Side-by-side fields: HubSpot ships percentage widths, so the gap goes here. */
.hs-form-embed .form-columns-2,
.hs-form-embed .form-columns-3 {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
}

.hs-form-embed .form-columns-2 > .hs-form-field,
.hs-form-embed .form-columns-3 > .hs-form-field {
    flex: 1 1 0;
    width: auto !important;
    float: none;
    padding: 0 !important;
}

.hs-form-embed .hs-form-field .input {
    margin: 0 !important;
}

.hs-form-embed .hs-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 25px;
    border-radius: 50px;
    border: 2px solid var(--c-yellow);
    background: var(--c-yellow);
    color: var(--c-navy);
    box-shadow: 0 6px 16px rgba(20, 24, 40, .14);
    cursor: pointer;
    white-space: nowrap;
}

.hs-form-embed .hs-button:hover {
    background: var(--c-yellow-bright);
    border-color: var(--c-yellow-bright);
}

.hs-form-embed .hs-error-msg,
.hs-form-embed .hs-error-msgs label {
    /* Small and tightly spaced so the message stays on one line under the
       field rather than wrapping onto two. */
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: capitalize;
    color: #b3261e;
}

/* Gravity Forms says the same thing in the same place. */
.form-gf .gform_wrapper .gfield_validation_message,
.form-gf .gform_wrapper .gfield_description.validation_message,
.gform_wrapper .gfield_validation_message,
.gform_wrapper .gfield_description.validation_message {
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: capitalize;
}

.hs-form-embed .hs-error-msgs {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
}

.hs-form-embed .hs-richtext,
.hs-form-embed .hs-form .legal-consent-container {
    font-size: 13px;
    line-height: 22px;
    color: #3a4252;
}

.hs-form-embed .submitted-message {
    font-size: 15px;
    color: var(--c-navy);
}

.hs-form-embed .hs-input[type="checkbox"] {
    width: auto;
    height: auto;
    margin-right: 5px;
    position: relative;
    top: 2px;
}
ul.inputs-list {
    padding-left: 0;
}
.column_2{
	column-count:2
}
@media (max-width: 575.98px) {
    .hs-form-embed .form-columns-2,
    .hs-form-embed .form-columns-3 {
        display: block;
    }
}
/* =================================================================
   === Capabilities page ===
   ================================================================= */

/* --- The capabilities, and what each one is for --- */
.cap-group {
    padding: 0 0 36px;
}

.cap-group:first-of-type {
    padding-top: 80px;
}

.cap-group:last-of-type {
    padding-bottom: 0;
}

.cap-intro {
    max-width: 620px;
    margin-bottom: 44px;
}

.cap-heading {
    margin-bottom: 16px;
}

.cap-lead {
    color: #3a4252;
    font-size: 15.5px;
    line-height: 26px;
}

.cap-lead p:last-child {
    margin-bottom: 0;
}

.cap-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 15px;
    margin-bottom: 22px;
}

.cap-group-num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 19px;
    background: var(--c-blue);
    color: var(--c-yellow);
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.cap-group-title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 20.8px;
    letter-spacing: -.3px;
    color: var(--c-navy);
}

.cap-group-note {
    color: #3a4252;
    font-size: 14.5px;
    line-height: 23.2px;
}

.cap-group-rule {
    flex: 1 0 0;
    min-width: 40px;
    height: 1px;
    background: rgba(12, 27, 61, .12);
}

.cap-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 26px 24px;
    border: 1px solid rgba(12, 27, 61, .1);
    border-radius: 16px;
    background: var(--c-white);
    box-shadow: 0 14px 34px -26px rgba(12, 27, 61, .55);
}

.cap-card-title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 23px;
    color: var(--c-navy);
}

.cap-card-text {
    color: #3a4252;
    font-size: 14.5px;
    line-height: 24.6px;
}

.cap-card-text p:last-child {
    margin-bottom: 0;
}

.cap-card-link {
    margin-top: auto;
    padding-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--c-blue);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cap-card-link:hover {
    color: var(--c-navy);
}

.cap-card-link em {
    font-size: 11px;
}

/* --- Compliance panel --- */
.cmp-panel-area {
    padding: 6px 0 80px;
}

.cmp-panel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 40px 44px;
    border-radius: 22px;
    background: #0054a4;
    box-shadow: 0 22px 50px -24px rgba(12, 27, 61, .35);
    overflow: hidden;
}

.cmp-panel-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 460px;
    max-width: 36%;
}

.cmp-panel-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cmp-panel-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(83deg,rgba(0, 84, 164, 1) 0%, rgba(0, 84, 164, 0.35) 100%);

}

.cmp-panel-copy {
    position: relative;
    z-index: 2;
    flex: 0 1 364px;
}

.cmp-panel-eyebrow {
    margin: 0 0 9px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14.6px;
    font-weight: 800;
    line-height: 24.24px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #c0cee8;
}

.cmp-panel-title {
    margin: 0 0 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 29.12px;
    letter-spacing: -.3px;
    color: var(--c-white);
}

.cmp-panel-text {
    margin-bottom: 20px;
    color: #c0cee8;
    font-size: 14.6px;
    line-height: 24.24px;
}

.cmp-panel-text p:last-child {
    margin-bottom: 0;
}

.cmp-panel-action {
    margin: 0;
}

.cmp-panel-action .cta-btn.btn_yellow {
    box-shadow: 0 14px 30px -12px rgba(255, 210, 0, .6);
    color: #0054a4;
}

.cmp-panel-certs {
    position: relative;
    z-index: 2;
    flex: 0 0 380px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cmp-cert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--c-white);
    box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .5);
}

.cmp-cert-logo {
    flex: none;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cmp-cert-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cmp-cert-copy {
    display: flex;
    flex-direction: column;
}

.cmp-cert-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 14.5px;
    font-weight: 800;
    line-height: 17.4px;
    color: #0054a4;
}

.cmp-cert-sub {
    font-size: 13px;
    line-height: 20.8px;
    color: #3a4252;
}

/* --- What we make, on the capabilities page --- */
.wwm-plain .solution-arrow {
    display: none;
}

.wwm-plain .solution-label {
    justify-content: flex-start;
}

/* --- Formats and packaging --- */
.fmp-area {
    padding: 80px 0;
}

.fmp-lead {
    color: #3a4252;
    font-size: 15.5px;
    line-height: 26px;
}

.fmp-note {
    margin-top: 26px;
    padding: 18px 22px;
    border-left: 4px solid var(--c-yellow);
    border-radius: 8px;
    background: var(--c-white);
    box-shadow: 0 16px 34px -26px rgba(12, 27, 61, .6);
}

.fmp-note-title {
    margin: 0 0 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 24px;
    color: var(--c-navy);
}

.fmp-note-text {
    color: #3a4252;
    font-size: 14px;
    line-height: 23px;
}

.fmp-note-text p:last-child {
    margin-bottom: 0;
}

.fmp-list-title {
    margin: 0 0 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 26px;
    color: var(--c-navy);
}

.fmp-list-title--second {
    margin-top: 34px;
}

.fmp-list {
    margin-bottom: 0;
}

/* --- Certification cards on the blue band --- */
.cert-cards-area {
    background: #0054a4;
    padding: 80px 0 40px;
    position: relative;
    z-index: 1;
}

.cert-cards-head {
    text-align: center;
    margin-bottom: 42px;
}

.cert-cards-heading {
    color: var(--c-white);
    margin-bottom: 12px;
}

.cert-cards-sub {
    color: #c0cee8;
    font-size: 15.5px;
    line-height: 26px;
}

.cert-cards-sub p:last-child {
    margin-bottom: 0;
}

.cert-cards {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cert-card-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cert-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 158px;
    height: 124px;
    padding: 18px;
    border-radius: 20px;
    background: var(--c-white);
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .55);
}

.cert-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cert-card-item .polygon {
    display: inline-flex;
    width: 25px;
    height: 25px;
}

/* --- The numbers --- */
.figures-area {
    padding: 80px 0;
}

.figures-head {
    text-align: center;
    margin-bottom: 44px;
}

.figures-heading {
    margin-bottom: 0;
}

.figures-lead {
    color: #3a4252;
    font-size: 15.5px;
    line-height: 26px;
    margin-top: 12px;
}

.figure-col {
    padding-top: 18px;
    border-top: 3px solid var(--c-yellow);
}

.figure-num {
    display: block;
    margin-bottom: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.5px;
    color: #0054a4;
}

.figure-text {
    color: #3a4252;
    font-size: 14px;
    line-height: 23px;
}

.figure-text p:last-child {
    margin-bottom: 0;
}

/* --- How it works, left aligned on this page --- */
.rd-process.rd-process--left .rd-process-head {
    text-align: left;
    /* The centred block keeps its width but starts at the container edge, so
       the heading lines up with the timeline under it. */
    margin-left: 0;
}

.rd-process.rd-process--left .rd-heading--center {
    text-align: left;
}

.rd-process.rd-process--left .rd-process-lead {
    margin-left: 0;
    text-align: left;
}

/* This style drops its buttons straight into the row, with no wrapper to
   carry a gap, so the second one onwards makes its own. */
.rd-process-foot .cta-btn + .cta-btn {
    margin-left: 14px;
}

@media (max-width: 991.98px) {
    .cmp-panel {
        flex-direction: column;
        align-items: flex-start;
        padding: 32px 26px;
    }

    .cmp-panel-media {
        display: none;
    }

    .cmp-panel-copy,
    .cmp-panel-certs {
        flex: 1 1 auto;
        width: 100%;
    }

    .cert-card {
        width: 132px;
        height: 104px;
    }
}

@media (max-width: 767.98px) {
    .cap-group:first-of-type {
        padding-top: 50px;
    }

    .cap-group-note {
        flex: 1 0 100%;
    }

    .cap-group-rule {
        display: none;
    }

    .fmp-area,
    .figures-area {
        padding: 50px 0;
    }

    .cert-cards-area {
        padding: 50px 0 30px;
    }

    .cmp-panel-certs {
        grid-template-columns: 1fr;
    }

    .figure-num {
        font-size: 28px;
    }
}

/* =================================================================
   === Foodservice distributors page ===
   ================================================================= */

/* --- section heading and its lead --- */
.sl-area {
    padding: 80px 0 0;
}

.sl-inner {
    max-width: 680px;
}

.sl-heading {
    margin-bottom: 14px;
}

.sl-lead {
    color: #3a4252;
    font-size: 15.5px;
    line-height: 26px;
}

.sl-lead p:last-child {
    margin-bottom: 0;
}

/* --- opening statement beside the badged picture --- */
.dintro-area {
    padding: 80px 0;
}

.dintro-lead {
    margin-bottom: 20px;
    color: var(--c-navy);
    font-family: 'Montserrat', sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 30px;
}

.dintro-text {
    color: #3a4252;
    font-size: 15.5px;
    line-height: 27px;
}

.dintro-text p:last-child {
    margin-bottom: 0;
}

.dintro-media {
    position: relative;
    padding-bottom: 26px;
}

.dintro-media img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    display: block;
}

.dintro-badge {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 16px 28px;
    border-radius: 12px;
    background: var(--c-yellow);
    box-shadow: 0 18px 36px -20px rgba(12, 27, 61, .5);
}

.dintro-badge-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--c-navy);
}

.dintro-badge-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--c-blue);
}

/* --- titled copy and ticked list beside a picture --- */
.dsp-area {
    padding: 34px 0;
}

.dsp-title {
    margin: 0 0 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.3px;
    color: var(--c-navy);
}

.dsp-text {
    margin-bottom: 18px;
    color: #3a4252;
    font-size: 15.5px;
    line-height: 27px;
}

.dsp-text p:last-child {
    margin-bottom: 0;
}

.dsp-list {
    margin-bottom: 0;
}

/* --- the aside for operators --- */
.note-bar-area {
    padding: 26px 0 80px;
}

.note-bar {
    padding: 20px 26px;
    border-radius: 10px;
    background: #FFF8E3;
    color: #3a4252;
    font-size: 14.5px;
    line-height: 25px;
}

.note-bar-lead {
    color: var(--c-navy);
    font-weight: 700;
}

.note-bar-text a {
    color: var(--c-blue);
    font-weight: 700;
    text-decoration: underline;
}

/* --- snake timeline, with its lead and spec chips --- */
.snake-chips .snake-head {
    max-width: 760px;
    margin: 0 auto 10px;
    text-align: center;
}

.snake-chips .snake-lead {
    color: #3a4252;
    font-size: 15.5px;
    line-height: 26px;
}

.snake-chips .snake-lead p:last-child {
    margin-bottom: 0;
}

.ws-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 20px;
    padding: 0;
    list-style: none;
}

.ws-chip {
    padding: 7px 14px;
    border-radius: 50px;
    background: #eaf0fb;
    color: var(--c-blue);
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;
}

.snake-chips .ws-sector-cta {
    margin-top: 0;
}

@media (max-width: 991.98px) {
    .dintro-area {
        padding: 50px 0;
    }

    .dintro-badge {
        padding: 12px 20px;
    }

    .dintro-badge-num {
        font-size: 24px;
    }

    .dsp-title {
        font-size: 24px;
    }
}

@media (max-width: 767.98px) {
    .sl-area {
        padding: 50px 0 0;
    }

    .note-bar-area {
        padding: 20px 0 50px;
    }

    .dsp-area {
        padding: 22px 0;
    }
}

/* --- the three reason cards, on this page's cream band --- */
.cf-formats.fsd-cards {
    background: #FFF8E3;
    padding: 80px 0;
}

.fsd-cards .cf-format-card {
    background: var(--c-white);
    border-radius: 16px;
    box-shadow: 0 12px 30px -18px rgba(12, 27, 61, .4);
}

.fsd-cards .cf-format-title {
    font-size: 18px;
    margin-bottom: 10px;
}

.fsd-cards .cf-format-text {
    color: #3a4252;
    margin-bottom: 0;
}

/* Product Specifications sits above the case table, in the same column. */
.bpb-spec-panel--product {
    height: auto;
    margin-bottom: 44px;
}
@media(max-width:991px){
	.rd-process.rd-process--left .rd-process-head {
    text-align: center;
    margin-left: 0;
}
	.rd-process.rd-process--left .rd-heading--center, .rd-process.rd-process--left .rd-process-lead {
    text-align: center;
}
}
@media(max-width:767px){
	.cmp-panel-certs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
	.rd-process-foot .cta-btn  {
    margin: 5px ;
}
	.rd-process-foot .cta-btn + .cta-btn{
		margin-left:0;
		margin:5px
	}
}
@media(max-width:575px){
	
	.cert-card-item .polygon{
		display:none
	}
}

/* =================================================================
   === Ways of working, as one section ===
   ================================================================= */
.dways-area {
    padding: 80px 0;
}

.dways-head {
    max-width: 680px;
    margin-bottom: 40px;
}

.dways-heading {
    margin-bottom: 14px;
}

.dways-lead {
    color: #3a4252;
    font-size: 15.5px;
    line-height: 26px;
}

.dways-lead p:last-child {
    margin-bottom: 0;
}

.dways-row + .dways-row {
    margin-top: 56px;
}

.dways-title {
    margin: 0 0 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.3px;
    color: var(--c-navy);
}

.dways-text {
    color: #3a4252;
    font-size: 15.5px;
    line-height: 27px;
}

.dways-text p:last-child {
    margin-bottom: 0;
}

/* The ticked list is typed as an ordinary bulleted list in the editor. */
.dways-text ul {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.dways-text ul li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 12px;
    font-size: 16.5px;
    line-height: 23.93px;
    color: #1a2033;
}

.dways-text ul li:last-child {
    margin-bottom: 0;
}

.dways-text ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    position: absolute;
    left: 0;
    top: -1px;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    background: var(--c-yellow);
    color: var(--c-navy);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dways-note {
    margin-top: 56px;
}

/* --- the catalog reasons, heading and cards in one block --- */
.cf-formats-head {
    max-width: 720px;
    margin-bottom: 44px;
}

.cf-formats-heading {
    margin-bottom: 14px;
}

.cf-formats-lead {
    color: #3a4252;
    font-size: 15.5px;
    line-height: 26px;
}

.cf-formats-lead p:last-child {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .dways-area {
        padding: 50px 0;
    }

    .dways-row + .dways-row,
    .dways-note {
        margin-top: 36px;
    }

    .dways-title {
        font-size: 24px;
    }
}

.note-bar strong {
    color: var(--c-navy);
    font-weight: 700;
}

.note-bar a {
    color: var(--c-blue);
    font-weight: 700;
    text-decoration: underline;
}

/* The third product action reads as a link, not a third button. */
.bpb-info-actions--below {
    margin-top: 18px;
}

.bpb-info-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--c-blue);
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
	text-decoration:underline
}

.bpb-info-link:hover {
    color: var(--c-navy);
    text-decoration: none;
}

.bpb-info-link em {
    font-size: 12px;
}
@media(max-width:575px){
	.bpb-product{
		padding-bottom:0
	}
}

/* =================================================================
   Stocked Flavored Dollop Program
   ================================================================= */

/* --- The three stocked flavours --- */
.sfd-flavors {
    background: #FFF8E3;
    padding: 80px 0 90px;
}

.sfd-flavors-head {
    margin-bottom: 46px;
}

.sfd-flavor-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--c-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 18px rgba(12, 27, 61, .07);
    color: inherit;
    text-decoration: none;
    transition: transform .35s ease, box-shadow .35s ease;
}

/* Only a card that goes somewhere answers to the pointer. */
a.sfd-flavor-card:hover,
a.sfd-flavor-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(12, 27, 61, .16);
}

a.sfd-flavor-card:focus-visible {
    outline: 3px solid var(--c-blue);
    outline-offset: 3px;
}

.sfd-flavor-media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.sfd-flavor-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

a.sfd-flavor-card:hover .sfd-flavor-media img,
a.sfd-flavor-card:focus-visible .sfd-flavor-media img {
    transform: scale(1.06);
}

.sfd-flavor-body {
    padding: 26px 24px 28px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.sfd-flavor-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.25;
    color: #0e2357;
    margin: 0 0 12px;
}

.sfd-flavor-title .accent {
    color: var(--c-blue);
}

.sfd-flavor-text {
    font-size: 15px;
    line-height: 26px;
    color: #3a4252;
    margin: 0 0 18px;
}

/* The label sits on the bottom edge however short the card's copy runs. */
.sfd-flavor-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--c-blue);
    transition: color .25s ease;
}

.sfd-flavor-link em {
    font-size: 11px;
    transition: transform .25s ease;
}

a.sfd-flavor-card:hover .sfd-flavor-link,
a.sfd-flavor-card:focus-visible .sfd-flavor-link {
    color: var(--c-navy);
}

a.sfd-flavor-card:hover .sfd-flavor-link em,
a.sfd-flavor-card:focus-visible .sfd-flavor-link em {
    transform: translateX(4px);
}

.sfd-flavors-foot {
    margin-top: 56px;
}

.sfd-flavors-lead {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.36;
    color: #0e2357;
}

.sfd-flavors-lead p:last-child,
.sfd-flavors-note p:last-child {
    margin-bottom: 0;
}

.sfd-flavors-note p {
    font-size: 16px;
    line-height: 27px;
    color: #3a4252;
    margin-bottom: 18px;
}

.sfd-flavors-note a {
    color: var(--c-blue);
    font-weight: 700;
    text-decoration: underline;
}

.sfd-flavors-note a:hover {
    text-decoration: none;
}

/* --- Why stock the programme --- */
.sfd-why {
    background: #0054a4;
    padding: 90px 0;
}

.sfd-why-copy p {
    font-size: 16px;
    line-height: 27px;
    color: rgba(255, 255, 255, .86);
    margin-bottom: 16px;
}

.sfd-why-copy p:last-child {
    margin-bottom: 0;
}

.sfd-why-media {
    margin-top: 0;
}

.sfd-rail {
    list-style: none;
    margin: 46px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 28px;
}

/* Each reason is its own small block: the circle, then the reason, then the
   line that explains it. */
.sfd-rail-item {
    display: block;
    padding-bottom: 0;
}

.sfd-rail-item::before {
    display: none;
}

.sfd-rail-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--c-white);
    color: #0e2357;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
}

/* The first reason is the one the design picks out. */
.sfd-rail-item:first-child .sfd-rail-num {
    background: var(--c-yellow);
}

.sfd-rail-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 14px;
    line-height: 1.36;
    color: var(--c-white);
    margin: 0 0 7px;
    padding-top: 0;
}

.sfd-rail-text {
    font-size: 13px;
    line-height: 20px;
    color: rgba(255, 255, 255, .8);
    padding-top: 0;
}

@media (max-width: 991.98px) {
    .sfd-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px 22px;
    }
}

@media (max-width: 575.98px) {
    .sfd-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 18px;
        margin-top: 34px;
    }
}

.sfd-why-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 36px;
}

/* --- Ordering, and the ways to get in touch --- */
.sfd-order {
    padding: 90px 0;
}

.sfd-order-copy p {
    font-size: 16px;
    line-height: 27px;
    color: #3a4252;
    margin-bottom: 18px;
}

.sfd-order-copy p:last-child {
    margin-bottom: 0;
}

.sfd-order-copy a {
    color: var(--c-blue);
    font-weight: 700;
    text-decoration: underline;
}

.sfd-order-copy a:hover {
    text-decoration: none;
}

.sfd-contact-panel {
    list-style: none;
    margin: 30px 0 0;
    padding: 26px 28px;
    background: #faf6ec;
    border: 1px solid #ede6d4;
    border-radius: 14px;
}

.sfd-contact-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sfd-contact-row + .sfd-contact-row {
    margin-top: 18px;
}

.sfd-contact-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sfd-contact-value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: #0e2357;
    word-break: break-word;
}

a.sfd-contact-value:hover {
    color: var(--c-blue);
}

.sfd-order-actions {
    margin-top: 30px;
}

/* The design throws this picture's block the other way. */
.content-img.with-border.sfd-order-media img {
    box-shadow: -14px 14px 0 -1px var(--c-yellow);
}

/* --- Where the dollops are used --- */
.sfd-apps {
    background: #fbfbfb;
    padding: 90px 0;
}

.sfd-apps-head {
    margin-bottom: 34px;
}

.sfd-apps-head .section-heading {
    margin-bottom: 0;
}

.sfd-apps-lead {
    font-size: 16px;
    line-height: 27px;
    color: #3a4252;
    margin: 0;
    padding-top: 52px;
}

.sfd-app-card {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 401 / 250;
}

.sfd-app-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sfd-app-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 14, 33, .8) 0%, rgba(6, 14, 33, .2) 44%, rgba(6, 14, 33, 0) 72%);
}

.sfd-app-num {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c-yellow);
    color: var(--c-navy);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sfd-app-name {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 17px;
    line-height: 1.3;
    color: var(--c-white);
    margin: 0;
}

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

    .sfd-flavor-card,
    .sfd-flavor-media img,
    .sfd-flavor-link,
    .sfd-flavor-link em {
        transition: none;
    }

    a.sfd-flavor-card:hover,
    a.sfd-flavor-card:focus-visible,
    a.sfd-flavor-card:hover .sfd-flavor-media img,
    a.sfd-flavor-card:focus-visible .sfd-flavor-media img,
    a.sfd-flavor-card:hover .sfd-flavor-link em,
    a.sfd-flavor-card:focus-visible .sfd-flavor-link em {
        transform: none;
    }
}

@media (max-width: 991.98px) {
    .sfd-flavors,
    .sfd-why,
    .sfd-order,
    .sfd-apps {
        padding: 64px 0;
    }

    .sfd-flavors-foot {
        margin-top: 42px;
    }

    .sfd-flavors-lead {
        font-size: 24px;
    }

    .sfd-why-media {
        margin-bottom: 36px;
    }

    .sfd-apps-lead {
        padding-top: 0;
    }
}

@media (max-width: 767.98px) {
    .sfd-flavor-title {
        font-size: 20px;
    }

    .sfd-flavors-lead {
        font-size: 22px;
    }

    .sfd-contact-panel {
        padding: 22px 20px;
    }

    .sfd-contact-value {
        font-size: 16px;
    }

    .sfd-why-actions .cta-btn,
    .sfd-order-actions .cta-btn {
        width: 100%;
        justify-content: center;
    }
}
.cl-step a{
	text-decoration:underline;
	color:var(--c-yellow)
}
.cl-step a:hover{
	text-decoration:none
}
/* Trademark and registered marks, wrapped by main.js so the copy stays clean.
   Set small and raised so they read as marks rather than as part of the word. */
.tm {
    font-size: .52em;
    line-height: 0;
    vertical-align: super;
    letter-spacing: 0;
    font-weight: inherit;
}
.single-product header .header-top-phone {
    color: #16399E;
    text-shadow: none
}
.single-product header .header-top-phone em {
    color: rgb(22, 57, 158);
}