.text-navy{color:var(--navy)}

.text-green{color:var(--green)}

.bg-navy{background:var(--navy)}

.bg-soft{background:var(--soft)}

.bg-cream{background:var(--cream)}

.section-pad{padding:clamp(4rem,8vw,7rem) 0}

.eyebrow{font-family:Manrope,sans-serif;font-weight:800;text-transform:uppercase;color:var(--green)}

.navbar{background:#fff;box-shadow:0 1px 15px #2b307714}

.navbar-brand img{width:min(260px,55vw)}

.btn-brand{background:var(--green);color:var(--navy);font-weight:800;border:2px solid var(--green);border-radius:5px;padding:.8rem 1.25rem}

.btn-brand:hover{background:#fff;color:var(--navy);border-color:var(--navy);transform:translateY(-3px)}

.btn-outline-brand{border:2px solid #fff;color:#fff;font-weight:800;padding:.8rem 1.25rem;border-radius:5px}

.btn-outline-brand:hover{background:#fff;color:var(--navy)}

.hero{position:relative;min-height:100svh;display:flex;align-items:center;color:#fff;background:linear-gradient(90deg,#2b3077f5 0%,#2b3077d1 48%,#2b307760 100%),url('../images/hero.jpg') center/cover}

.hero .container{position:relative;padding-top:8rem;padding-bottom:4rem}

.hero h1{font-size:clamp(3rem,7vw,6rem);max-width:880px}

.hero .subline{font:700 clamp(1.4rem,3vw,2rem) Sora,sans-serif}

.hero p{max-width:750px;font-size:1.2rem}

.category{position:relative;min-height:370px;overflow:hidden;border-radius:6px;background:var(--navy);color:#fff;display:flex;align-items:end}

.category img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}

.category:hover img{transform:scale(1.06)}

.category:before{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#2b3077ed);z-index:1}

.category>div{position:relative;z-index:2;padding:1.7rem}

.category h3{color:#fff}

.action{height:100%;border:1px solid #ffffff55;padding:1.5rem;border-radius:6px;transition:transform .3s,background .3s}

.action:hover{background:#ffffff17;transform:translateY(-4px)}

.action img{width:100%;height:130px;object-fit:cover;border-radius:4px;margin-bottom:1.3rem}

.steps-row{padding:2.5rem 0;border-bottom:1px solid #e6e9ee}

.steps-row:last-child{border:0}

.step-photo{width:100%;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 12px 38px #2b30771a}

.step-number{display:inline-grid;place-items:center;width:3rem;height:3rem;border-radius:5px;background:var(--navy);color:#fff;font-weight:800;margin-right:1rem}

.fulfillment-stage{min-height:460px;background:#fff;border-radius:6px;padding:2rem;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 40px #2b30771c}

.fulfillment-stage img{width:100%;max-height:430px;object-fit:contain}

.fulfill{color:#242950;width:100%;text-align:left;background:#fff;border:0;border-left:4px solid #dde2d5;padding:1.1rem 1.25rem;box-shadow:0 3px 14px #2b30770d;transition:.25s}

.fulfill:hover{border-color:var(--green);transform:translateX(3px)}

.fulfill.active{background:var(--navy);border-color:var(--green);color:#fff}

.fulfill.active h3{color:var(--green)!important}

.fulfill h3,.reason h3{font-size:1.2rem}

.reason{height:100%;border:1px solid #ffffff55;border-radius:6px;padding:1.5rem;transition:transform .3s}

.reason:hover{transform:translateY(-5px)}

.photo-wide{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:6px}

.download{background:var(--green)}

.store-badge img{height:62px;width:auto;max-width:100%;transition:transform .3s}

.store-badge:hover img{transform:translateY(-4px)}

@media(max-width:991px){.navbar-collapse{padding:1rem 0}.hero .container{padding-top:8rem}.fulfillment-stage{min-height:360px}}

@media(max-width:576px){.row.g-5{--bs-gutter-x:1.5rem}.hero h1{font-size:clamp(2.6rem,11vw,4rem)}.hero .container{padding-bottom:3rem}.step-photo{height:auto}.section-pad{padding:4rem 0}}

@media(prefers-reduced-motion:no-preference){.reveal{animation:fade-up .7s both;animation-timeline:view();animation-range:entry 5% cover 25%}@keyframes fade-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}


.hero-title-line{display:block;margin-top:.25em}

.hero h1{font-size:clamp(2.4rem,5vw,4.6rem);max-width:1000px}

.hero .hero-scale{font-weight:700;font-size:1.05rem;color:#dcedc6}


.hero{background:linear-gradient(120deg,#232960,#353d87)}


.hero .hero-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(2rem,4vw,4rem);align-items:center}


.hero h1{font-size:clamp(2.1rem,3.6vw,3.8rem);line-height:1.2}


.hero-collage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}


.hero-collage figure{margin:0;position:relative;overflow:hidden;border-radius:12px;aspect-ratio:4/5;background:#171d43}


.hero-collage figure:nth-child(even){transform:translateY(1rem)}


.hero-collage img{width:100%;height:100%;object-fit:cover}


.hero-collage figcaption{position:absolute;inset:auto 0 0;padding:2rem 1rem 1rem;background:linear-gradient(transparent,rgba(12,16,38,.9));font-weight:800;color:#fff}


.reason-photo{width:100%;height:145px;object-fit:cover;border-radius:5px;margin-bottom:1.25rem}


@media(max-width:991px){.hero .hero-layout{grid-template-columns:minmax(0,1fr)}.hero-collage{grid-template-columns:repeat(4,minmax(0,1fr))}.hero-collage figure:nth-child(even){transform:none}}


@media(max-width:576px){.hero-collage{grid-template-columns:repeat(2,minmax(0,1fr))}.hero h1{font-size:clamp(2rem,8vw,2.8rem)}}


.customer-store-links{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}


.customer-store-links .store-badge img{height:48px;width:auto}


.navbar .customer-store-links{gap:.5rem}


.navbar .customer-store-links .store-badge img{height:36px}


.navbar .navbar-brand img{width:min(220px,55vw)}


.hero-copy{container-type:inline-size;min-width:0}


.hero .hero-copy h1{font-size:clamp(1.4rem,3vw,3.4rem);font-size:5.8cqw;line-height:1.2;max-width:100%}


.hero-heading-line,.hero-title-line{display:block;white-space:nowrap}


@media(max-width:1199px){.navbar-collapse{padding:1rem 0}.navbar .customer-store-links{margin-top:.5rem}}


/* Readable spacing and a unified hero composition. */
.hero{isolation:isolate;background:linear-gradient(90deg,rgba(18,25,61,.98) 0%,rgba(24,32,72,.96) 43%,rgba(30,41,81,.87) 100%),url('../images/discover.jpg') center/cover no-repeat}


.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 88% 32%,rgba(134,196,64,.13),transparent 45%)}


.hero .hero-layout{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2.5rem,4vw,4.5rem);padding-top:8.5rem;padding-bottom:4.5rem}


.hero .hero-copy>p{font-size:clamp(1.15rem,1.35vw,1.35rem);line-height:1.7;color:#f0f2fc;max-width:760px}


.hero .hero-copy .hero-scale{font-size:clamp(1.1rem,1.2vw,1.2rem);line-height:1.6;color:#dcedc6;margin-top:1.5rem!important}


.hero .hero-copy>.fw-bold{font-size:1.1rem;line-height:1.6;margin-top:2rem!important}


.hero .subline{font-size:clamp(1.5rem,2.2vw,2rem);margin-top:1.5rem!important;margin-bottom:1.5rem}


.hero .eyebrow{font-size:1rem;letter-spacing:.09em}


.hero .customer-store-links .store-badge img{height:54px}


.hero-collage{gap:1rem;padding:1.1rem;border:1px solid rgba(208,223,255,.18);border-radius:1.75rem;background:linear-gradient(150deg,rgba(115,135,188,.17),rgba(26,35,76,.8));box-shadow:0 25px 65px rgba(5,12,32,.25);align-self:center}


.hero-collage figure{aspect-ratio:1/1.05;margin:0;border:1px solid rgba(220,229,255,.16);border-radius:1rem;box-shadow:none;overflow:hidden;transform:none!important}


.hero-collage figure:nth-child(even){transform:none}


.hero-collage img{filter:saturate(.85);transition:transform .35s ease,filter .35s ease}


.hero-collage figcaption{font-size:1.1rem;padding:2.6rem 1rem 1rem;background:linear-gradient(transparent,rgba(17,26,61,.95));letter-spacing:.01em}


@media(hover:hover) and (prefers-reduced-motion:no-preference){.hero-collage figure:hover img{transform:scale(1.035);filter:saturate(1)}}


@media(min-width:992px){
 .section-pad{padding:clamp(3.5rem,6vh,4.5rem) 0}
 .section-pad p{font-size:1.125rem;line-height:1.65}
 #marketplace .category{min-height:clamp(280px,31vh,330px)}
 #marketplace .category>div{padding:1.5rem}
 #marketplace .category h3{font-size:1.3rem}
 #marketplace .category p{font-size:1.05rem;line-height:1.55}
 .action img{height:150px}
 .reason-photo{height:160px}
 .steps-row{padding:2.5rem 0}
}


@media(max-width:991px){
 .hero .hero-layout{grid-template-columns:minmax(0,1fr);padding-top:7.5rem;padding-bottom:3.5rem;gap:2.5rem}
 .hero-collage{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px;width:100%;justify-self:center}
}


@media(max-width:576px){
 .hero .hero-copy>p{font-size:1.1rem;line-height:1.65}
 .hero .hero-copy .hero-scale,.hero .hero-copy>.fw-bold{font-size:1rem}
 .hero-collage{padding:.65rem;gap:.65rem;border-radius:1.2rem}
 .hero-collage figcaption{font-size:.95rem;padding:2rem .7rem .7rem}
 .hero .customer-store-links .store-badge img{height:46px}
}


/* Keep the delivery comparison together on desktop without clipping content. */
@media(min-width:992px){
 #your-way.section-pad{padding-block:clamp(24px,3.5vh,38px)}
 #your-way>.container>h2{font-size:clamp(1.9rem,2.6vw,2.7rem);margin-bottom:0}
 #your-way>.container>p{width:100%;max-width:960px;font-size:1.05rem;line-height:1.5;margin-top:.75rem!important;margin-bottom:1.25rem!important}
 #your-way>.container>.row{--bs-gutter-y:0;--bs-gutter-x:1.5rem}
 #your-way>.container>.row>.col-lg-6:first-child{width:40%}
 #your-way>.container>.row>.col-lg-6:last-child{width:60%}
 #your-way .d-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem!important;height:100%;align-content:stretch}
 #your-way .fulfill{padding:1rem;min-width:0;border-radius:.6rem}
 #your-way .fulfill h3{font-size:1rem;line-height:1.35;margin-bottom:.45rem}
 #your-way .fulfill p{font-size:1rem;line-height:1.5}
 #your-way .fulfillment-stage{min-height:0;height:100%;padding:1.25rem;border-radius:.9rem}
 #your-way .fulfillment-stage img{max-height:clamp(280px,calc(100svh - 270px),460px);object-fit:contain}
}



/* ==========================================================================
         SCOPED MEGA MENU & UTILITY BAR (DOES NOT AFFECT THE REST OF THE PAGE)
         ========================================================================== */
      :root {
        --csm-navy: #1b2a6b;
        --csm-ink: #172033;
        --csm-lime: #86c440;
        --csm-cream: #faf8f3;
        --csm-muted: #667085;
        --csm-line: #e5e8ef;
      }


    
    /* ==========================================================================
       HERO ADJUSTMENTS FOR STICKY MEGA MENU HEADER
       ========================================================================== */
    .hero .hero-layout {
      padding-top: 2.5rem !important;
      padding-bottom: 3.5rem !important;
    }


    .hero .container {
      padding-top: 2rem !important;
    }


    .hero {
      min-height: auto;
    }

/* Customer reference page: page text is navy ink, 18px/1.7 (shared home-base.css body/.site-shell rules are for the home page and would override it) */
body{font:400 1.125rem/1.7 Manrope,sans-serif;color:var(--ink);background:#fff}
.site-shell{color:var(--ink);background:#fff}
#your-way{scroll-margin-top:100px} /* + html scroll-padding-top 90px = 190px from the top: the section starts about 44px under the sticky header, so the title has room */

/* Customer copy and fulfillment choices. */
.hero .hero-copy .hero-scale{color:#ffeb3b}
.hero-copy .delivery-highlight{color:#d93632}
.delivery-choices{margin-bottom:0}
.delivery-choices>div{display:grid;grid-template-columns:minmax(9rem,.8fr) minmax(0,1.5fr);gap:.5rem 1rem;padding:.85rem 0;border-bottom:1px solid #2b30771a}
.delivery-choices>div:last-child{border-bottom:0}
.delivery-choices dt{font-weight:800;color:var(--navy)}
.delivery-choices dd{margin:0;min-width:0}
@media(max-width:575px){.delivery-choices>div{grid-template-columns:1fr;gap:.25rem}}