/* Adapted from the supplied WiscoBees mockup; isolated from all existing pages. */
.wb-case{--ink:#19191b;--white:#f8f8f6;--gold:#e8b944;--cream:#f3efdf;--muted:#bcbab5;color-scheme:dark}
.wb-case #main *{box-sizing:border-box}
html:has(.wb-case){scroll-behavior:smooth}
.wb-case{margin:0;background:var(--ink);color:var(--white);font:500 16px/1.7 Montserrat,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.wb-case #main h1,.wb-case #main h2,.wb-case #main h3,.wb-case #main p,.wb-case #main figure{margin:0}
.wb-case #main h1,.wb-case #main h2,.wb-case #main h3{font-weight:900;letter-spacing:-.045em;line-height:1.1}
.wb-case #main img{display:block;max-width:100%;height:auto}
.wb-case #main a{color:inherit;text-decoration:none}
.wb-case #main button{font:inherit}
.wb-case #main a:focus-visible,.wb-case #main button:focus-visible{outline:3px solid var(--gold);outline-offset:6px}
.wb-case #main .gold{color:var(--gold)}
.wb-case #main .cream{background:var(--cream);color:var(--ink)}
.wb-case #main .section-space{padding-block:100px}
.wb-case #main .eyebrow{font-size:11px;line-height:1.5;letter-spacing:.16em;font-weight:700;margin-bottom:22px}
.wb-case #main h2{font-size:clamp(33px,3.6vw,52px)}
.wb-case #main h3{font-size:27px}
.wb-case #main p{text-wrap:pretty}
.wb-case #main .intro{padding-top:70px;padding-bottom:38px;display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.wb-case #main .intro .eyebrow{margin-bottom:22px}
.wb-case #main .intro h1{font-size:clamp(56px,7.6vw,110px);letter-spacing:-.065em}
.wb-case #main .intro-line{font-size:20px;line-height:1.55;max-width:320px;padding-bottom:6px}
.wb-case #main .service-strip{display:flex;flex-wrap:wrap;gap:12px 25px;padding-top:22px;padding-bottom:40px;border-top:1px solid #424142;font-size:11px;font-weight:700;color:#dbd9d2}
.wb-case #main .service-strip span:not(:last-child)::after{content:" /";margin-left:25px;color:#71706b}
.wb-case #main .hero-visual{background:#e8b944}
.wb-case #main .hero-visual img{width:100%;max-height:830px;object-fit:contain}
.wb-case #main .product-caption{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;text-align:center;font-size:11px;letter-spacing:.015em;font-weight:700;color:#4c330c;padding:0 30px 26px}
.wb-case #main .overview{display:grid;grid-template-columns:1fr 1.13fr;gap:9%}
.wb-case #main .body-copy p+p{margin-top:22px}
.wb-case #main .body-copy{color:#d1cfca}
.wb-case #main .brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:12%;align-items:center}
.wb-case #main .brand-copy p:not(.eyebrow){margin-top:25px;color:#4d4a42;max-width:470px}
.wb-case #main .logo-stage img{width:100%;max-width:410px;margin:auto}
.wb-case #main .logo-stage figcaption{text-align:center;font-size:11px;color:#6d695e;margin-top:20px}
.wb-case #main .palette{display:flex;gap:28px;margin-top:34px}
.wb-case #main .palette i{display:block;width:48px;height:48px;border-radius:50%;border:1px solid #c8c1ac;margin-bottom:9px}
.wb-case #main .palette span{font-size:10px;color:#625d50}
.wb-case #main .section-heading{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:13%;margin-bottom:60px}
.wb-case #main .section-heading>p{color:var(--muted)}
.wb-case #main .cream .section-heading>p{color:#545044}
.wb-case #main .device-stage{position:relative;padding-right:120px;padding-bottom:55px}
.wb-case #main .desktop-window{border:1px solid #565555;border-radius:12px;overflow:hidden;background:#29292b;box-shadow:0 28px 60px #0005}
.wb-case #main .browser-bar{display:flex;align-items:center;justify-content:space-between;font-size:10px;line-height:1;height:38px;padding:0 17px;color:#c5c2bd}
.wb-case #main .browser-dots{font-size:8px;letter-spacing:2px;color:#85817d}
.wb-case #main .desktop-window img{width:100%}
.wb-case #main .phone-window{position:absolute;width:228px;bottom:0;right:0;background:#0c0c0d;border:6px solid #343437;border-radius:30px;padding:5px;box-shadow:0 18px 40px #0007;overflow:hidden}
.wb-case #main .phone-bar{height:18px;display:flex;justify-content:center;align-items:center;background:#0c0c0d}
.wb-case #main .phone-bar span{height:5px;width:50px;border-radius:9px;background:#2a292c}
.wb-case #main .mobile-screen{position:relative;width:100%;aspect-ratio:390/835;overflow:hidden;border-radius:0 0 18px 18px}
.wb-case #main .mobile-screen img{width:349.48717949%;max-width:none;height:auto}
.wb-case #main .web-caption{display:flex;justify-content:space-between;gap:24px;align-items:center;padding-top:22px;font-size:10px;color:#b2afa9}
.wb-case #main .text-link{font-size:12px;font-weight:700;display:inline-flex;gap:25px;align-items:center;border-bottom:1px solid #6a665e;padding-bottom:6px;color:var(--white)}
.wb-case #main .text-link span{font-size:19px;line-height:1}
.wb-case #main .website-detail{display:grid;grid-template-columns:.8fr 1.2fr;gap:8%;align-items:center;margin-top:90px}
.wb-case #main .website-detail h3{font-size:29px}
.wb-case #main .website-detail p{color:var(--muted);font-size:14px;margin-top:20px;margin-bottom:23px}
.wb-case #main .homepage-detail{aspect-ratio:1348/483;overflow:hidden;border:1px solid #57544c;border-radius:5px}
.wb-case #main .homepage-detail a{display:block}
.wb-case #main .homepage-detail img{width:100%;transform:none}
.wb-case #main .packaging-intro{padding-bottom:65px}
.wb-case #main .packaging-intro .section-heading{margin-bottom:0}
.wb-case #main .labels-section{background:#292725}
.wb-case #main .label-heading{display:flex;justify-content:space-between;gap:20px;align-items:baseline;margin-bottom:36px}
.wb-case #main .label-heading h3{font-size:25px}
.wb-case #main .label-heading p{font-size:11px;color:#b5b0a6}
.wb-case #main .label-collection{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:25px;align-items:start}
.wb-case #main .label-collection img{width:100%;box-shadow:0 12px 26px #0005}
.wb-case #main .label-collection a{display:block;transition:transform .2s}
.wb-case #main .label-collection a:hover{transform:translateY(-7px)}
.wb-case #main .label-collection figcaption{margin-top:18px;font-size:11px;color:#dad5cb;text-align:center}
.wb-case #main .small-note{text-align:right;font-size:10px;color:#aaa398;margin-top:28px}
.wb-case #main .size-board{display:flex;justify-content:center;align-items:flex-end;gap:70px;padding:40px 30px 35px;border-bottom:1px solid #cfc7b4}
.wb-case #main .size-board figure{flex:none}
.wb-case #main .size-eight{width:144px}
.wb-case #main .size-twelve{width:192px}
.wb-case #main .size-two{width:288px}
.wb-case #main .size-board img{width:100%;box-shadow:0 14px 20px #32251020}
.wb-case #main .size-board figcaption{height:68px;padding-top:22px;text-align:center}
.wb-case #main .size-board strong{display:block;font-size:16px;line-height:1.5}
.wb-case #main .size-board span{display:block;font-size:10px;color:#77705e;margin-top:3px}
.wb-case #main .size-note{font-size:11px;color:#77705e;text-align:center;margin-top:22px}
.wb-case #main .retail-evidence{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:28px}
.wb-case #main .proof-image{height:370px;background:#f4efdc;display:flex;align-items:center;justify-content:center;padding:30px;overflow:hidden}
.wb-case #main .proof-image a{max-width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.wb-case #main .proof-image img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.wb-case #main .barcode-proof .proof-image{background:#e3ad2a}
.wb-case #main .nutrition-proof .proof-image{background:#fbfbf8}
.wb-case #main .retail-evidence figcaption{padding-top:20px}
.wb-case #main .retail-evidence strong{display:block;font-size:13px;line-height:1.5}
.wb-case #main .retail-evidence span{display:block;font-size:10px;line-height:1.7;color:#a8a59e;margin-top:7px}
.wb-case #main .retail-note{font-size:11px;line-height:1.7;color:#a8a59e;max-width:820px;margin-top:35px;text-align:center}
.wb-case #main .closing-inner{padding-block:80px;display:flex;align-items:center;justify-content:space-between;gap:80px}
.wb-case #main .closing h2{font-size:40px;max-width:800px}
.wb-case #main .closing p:not(.eyebrow){font-size:14px;color:#625c4e;margin-top:24px;max-width:640px}
.wb-case #main .closing img{width:190px;flex-shrink:0}
.wb-case #artwork-dialog{border:1px solid #6c655a;background:#1c1c1d;color:#f7f6ef;padding:0;width:min(96vw,1280px);max-width:none;height:94vh;max-height:none;overflow:hidden;border-radius:10px}
.wb-case #artwork-dialog::backdrop{background:#000d;backdrop-filter:blur(4px)}
.wb-case .dialog-top{height:66px;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:15px 24px;border-bottom:1px solid #555;font-size:12px}
.wb-case .dialog-top button{background:transparent;color:white;border:0;cursor:pointer;white-space:nowrap}
.wb-case .dialog-top span{font-size:25px;margin-left:10px}
.wb-case .dialog-image{height:calc(100% - 66px);overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:24px}
.wb-case .dialog-image img{max-width:100%;width:auto;max-height:none;height:auto}
.wb-case .dialog-image img.label-detail{max-height:100%;object-fit:contain}
@media(min-width:1700px){.wb-case #main .hero-visual img{max-height:900px}}
@media(max-width:1050px){.wb-case #main .intro-line{font-size:17px}
.wb-case #main .overview{gap:6%}
.wb-case #main .brand-grid{gap:8%}
.wb-case #main .section-space{padding-block:75px}
.wb-case #main .section-heading{gap:8%}
.wb-case #main .label-collection{gap:18px}
.wb-case #main .device-stage{padding-right:95px}
.wb-case #main .phone-window{width:195px}
.wb-case #main .proof-image{height:310px;padding:22px}
.wb-case #main .size-board{gap:55px}
.wb-case #main .size-eight{width:120px}
.wb-case #main .size-twelve{width:160px}
.wb-case #main .size-two{width:240px}
.wb-case #main .closing h2{font-size:34px}
.wb-case #main .closing img{width:150px}
.wb-case #main .closing-inner{gap:45px}}
@media(max-width:700px){.wb-case{font-size:14px;line-height:1.75}
.wb-case #main .intro{display:block;padding-top:42px;padding-bottom:27px}
.wb-case #main .intro .eyebrow{font-size:9px;margin-bottom:17px}
.wb-case #main .intro h1{font-size:clamp(42px,14.4vw,58px)}
.wb-case #main .intro-line{font-size:16px;line-height:1.6;margin-top:20px;max-width:280px}
.wb-case #main .intro-line br{display:none}
.wb-case #main .service-strip{font-size:9px;gap:8px 12px;padding-top:17px;padding-bottom:27px}
.wb-case #main .service-strip span:not(:last-child)::after{margin-left:12px}
.wb-case #main .hero-visual img{width:100%}
.wb-case #main .product-caption{padding:3px 8px 16px;font-size:6px;gap:6px;line-height:1.5}
.wb-case #main .section-space{padding-block:56px}
.wb-case #main .eyebrow{font-size:9px;margin-bottom:18px}
.wb-case #main h2{font-size:34px;line-height:1.12}
.wb-case #main h3{font-size:25px}
.wb-case #main .overview,.wb-case #main .brand-grid,.wb-case #main .section-heading,.wb-case #main .website-detail{grid-template-columns:1fr;gap:25px}
.wb-case #main .body-copy p+p{margin-top:18px}
.wb-case #main .brand-copy p:not(.eyebrow){margin-top:20px}
.wb-case #main .palette{gap:26px;margin-top:25px}
.wb-case #main .palette i{width:38px;height:38px}
.wb-case #main .logo-stage{margin-top:14px}
.wb-case #main .logo-stage img{max-width:265px}
.wb-case #main .logo-stage figcaption{font-size:9px;margin-top:15px}
.wb-case #main .section-heading{margin-bottom:34px}
.wb-case #main .device-stage{padding-right:44px;padding-bottom:35px}
.wb-case #main .phone-window{width:100px;border-width:3px;border-radius:15px;padding:2px;right:0;bottom:0}
.wb-case #main .phone-bar{height:10px}
.wb-case #main .phone-bar span{width:24px;height:3px}
.wb-case #main .mobile-screen{border-radius:0 0 9px 9px}
.wb-case #main .browser-bar{height:22px;padding:0 9px;font-size:6px}
.wb-case #main .browser-dots{font-size:4px;letter-spacing:1px}
.wb-case #main .desktop-window{border-radius:6px}
.wb-case #main .web-caption{align-items:flex-start;gap:15px;font-size:8px;padding-top:18px}
.wb-case #main .web-caption p{max-width:120px}
.wb-case #main .text-link{font-size:10px;gap:12px}
.wb-case #main .text-link span{font-size:16px}
.wb-case #main .website-detail{margin-top:52px;gap:28px}
.wb-case #main .website-detail h3{font-size:25px}
.wb-case #main .website-detail p{font-size:13px;margin-top:15px}
.wb-case #main .homepage-detail{width:100%;aspect-ratio:1348/483}
.wb-case #main .packaging-intro{padding-bottom:42px}
.wb-case #main .label-heading{display:block;margin-bottom:28px}
.wb-case #main .label-heading h3{font-size:23px}
.wb-case #main .label-heading p{font-size:9px;margin-top:8px}
.wb-case #main .label-collection{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
.wb-case #main .label-collection figure:last-child{grid-column:1 / -1;width:calc(50% - 10px);margin-inline:auto}
.wb-case #main .label-collection figcaption{font-size:10px;margin-top:11px}
.wb-case #main .small-note{text-align:center;font-size:9px;margin-top:26px}
.wb-case #main .size-board{gap:20px;padding:15px 0 24px}
.wb-case #main .size-eight{width:min(60px,calc((100% - 40px)*.230769))}
.wb-case #main .size-twelve{width:min(80px,calc((100% - 40px)*.307692))}
.wb-case #main .size-two{width:min(120px,calc((100% - 40px)*.461538))}
.wb-case #main .size-board figcaption{height:55px;padding-top:16px}
.wb-case #main .size-board strong{font-size:13px}
.wb-case #main .size-board span{font-size:8px}
.wb-case #main .size-note{font-size:9px;line-height:1.6}
.wb-case #main .retail-evidence{grid-template-columns:1fr;gap:34px}
.wb-case #main .proof-image{height:370px;padding:32px}
.wb-case #main .barcode-proof .proof-image{height:250px}
.wb-case #main .retail-evidence figcaption{padding-top:16px}
.wb-case #main .retail-evidence strong{font-size:13px}
.wb-case #main .retail-evidence span{font-size:10px;margin-top:3px}
.wb-case #main .retail-note{text-align:left;font-size:10px;margin-top:28px}
.wb-case #main .closing-inner{padding-block:55px;display:block}
.wb-case #main .closing h2{font-size:30px}
.wb-case #main .closing p:not(.eyebrow){font-size:13px;margin-top:20px}
.wb-case #main .closing img{width:130px;margin-top:30px}
.wb-case #main .closing .eyebrow{font-size:8px}
.wb-case .dialog-top{padding-inline:15px;font-size:10px}
.wb-case .dialog-top button{font-size:11px}
.wb-case .dialog-image{padding:12px}}
@media(prefers-reduced-motion:reduce){html:has(.wb-case){scroll-behavior:auto}
.wb-case #main *,.wb-case #main *::before,.wb-case #main *::after{transition:none!important}}
.wb-case #main .intro h1{font-size:clamp(48px,6.4vw,92px);margin:0}
.wb-case #main .hero-visual a{display:block;cursor:zoom-in}
.wb-case #main .zoomable{cursor:zoom-in}
.wb-case #main .wb-portfolio-nav{padding-block:48px;display:flex;justify-content:space-between;gap:24px}
.wb-case #main .size-board a{display:block}
.wb-case .dialog-controls{display:flex;align-items:center;gap:18px;flex-shrink:0}
.wb-case .dialog-controls button,.wb-case .dialog-controls a{font-size:12px;padding:9px 12px;border:1px solid #777;border-radius:3px;line-height:1.4}
.wb-case .dialog-top{height:76px}
.wb-case .dialog-top p{font-size:12px;line-height:1.5}
.wb-case .dialog-image{height:calc(100% - 76px);display:block}
.wb-case .dialog-image img{display:block;margin-inline:auto}
.wb-case .dialog-image.actual-size img{max-width:none;max-height:none;width:auto;height:auto;margin:0}
@media(max-width:700px){
.wb-case #main .intro h1{font-size:clamp(42px,12.8vw,58px)}
.wb-case #main .wb-portfolio-nav{flex-direction:column;align-items:flex-start;padding-block:36px}
.wb-case .dialog-top{height:auto;min-height:112px;padding:12px;flex-direction:column;align-items:stretch;gap:10px}
.wb-case .dialog-controls{gap:7px;justify-content:space-between}
.wb-case .dialog-controls button,.wb-case .dialog-controls a{padding:7px 8px;font-size:10px}
.wb-case .dialog-top span{font-size:16px;margin-left:4px}
.wb-case .dialog-image{height:calc(100% - 112px)}
}