.hero { background:#ff5100; min-height:620px; }
.hero-photo { object-position:center; }
.hero:after { display:none; }
.hero-content { max-width:54%; padding-top:55px; padding-bottom:55px; }
.hero h1 { font-size:86px; }
.hero h1 span { color:#20221e; }
.hero .eyebrow:before { background:white; }
.hero p.copy { color:white; max-width:350px; }
.ticker { background:#20221e; }
.ticker b { color:#dce69d; }
.product { display:flex; flex-direction:column; min-width:0; }
.product[hidden] { display:none; }
.product-visual { position:relative; width:100%; aspect-ratio:1.15; background:#edf0e5; border-radius:6px; display:grid; place-items:center; overflow:hidden; }
.cutout { display:block; width:86%; aspect-ratio:1; background-repeat:no-repeat; background-size:300% 200%; background-position:var(--x) var(--y); clip-path:inset(2%); }
.product-visual .tag { position:absolute; left:14px; top:14px; z-index:1; }
.product .meta { margin-top:17px; }
.product h3 { font-size:23px; }
.product p { min-height:68px; margin-bottom:18px; }
.price-line { margin-top:auto; display:flex; align-items:end; justify-content:space-between; gap:8px; border-top:1px solid #ddd; padding-top:15px; }
.price { font-size:22px; font-weight:800; white-space:nowrap; }
.formula { color:#62665b; font-size:12px; line-height:1.5; text-align:right; }
.extras { margin-top:45px; padding:24px 0; border-top:1px solid #d9dbd1; }
.extras h3 { font-size:19px; margin:0 0 20px; }
.extras>div { display:flex; gap:40px; flex-wrap:wrap; }
.extras span { font-size:14px; display:flex; gap:18px; }
.menu-group h3 { font-size:18px; margin:28px 0 8px; color:#dd4500; }
.menu-row { display:flex; justify-content:space-between; gap:20px; padding:11px 0; border-bottom:1px solid #d9dbd1; font-size:14px; }
.menu-row small { display:block; color:#686c61; margin-top:5px; }
.menu-row strong { white-space:nowrap; }
.source-links { margin-top:28px; display:flex; gap:25px; flex-wrap:wrap; font-size:13px; text-decoration:underline; }
@media(min-width:1500px) { .hero { min-height:700px; } .hero h1 { font-size:106px; } }
@media(max-width:1000px) and (min-width:651px) { .hero h1 { font-size:64px; } .hero h2 { font-size:34px; } .hero-content { max-width:52%; } .hero-links { align-items:flex-start; flex-direction:column; gap:14px; } }
@media(max-width:650px) {
 .hero { min-height:680px; align-items:flex-start; }
 .hero-photo { top:auto; bottom:0; height:330px; object-fit:cover; object-position:right center; }
 .hero-content { max-width:100%; width:100%; padding:37px 6% 295px; }
 .hero h1 { font-size:64px; margin-bottom:15px; }
 .hero h2 { font-size:31px; }
 .hero p.copy { max-width:100%; margin-top:14px; margin-bottom:20px; }
 .hero .eyebrow { margin-bottom:18px; }
 .hero .photo-label { bottom:15px; font-size:10px; }
 .product-visual { aspect-ratio:1.2; }
 .product p { min-height:auto; }
 .product h3 { font-size:23px; }
 .extras>div { gap:18px 30px; }
 .menu-row { font-size:13px; }
}

:root { --orange:#fa520f; --ink:#1c2821; --paper:#fcfcf9; --green:#e4edbd; }
body { -webkit-font-smoothing:antialiased; }
header { background:rgba(252,252,249,.96); backdrop-filter:blur(14px); border-bottom:1px solid #e8ebe1; }
.brand { gap:9px; }
nav>a { position:relative; padding:10px 0; }
nav>a:after { content:""; position:absolute; left:0; right:0; bottom:3px; height:2px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
nav>a:hover:after, nav>a[aria-current="location"]:after { transform:scaleX(1); }
.button { min-height:50px; padding:15px 25px; border:1px solid transparent; border-radius:8px; font-size:14px; line-height:1.3; font-weight:700; transition:background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
.button:hover { transform:translateY(-2px); box-shadow:0 6px 18px #18261e1a; }
.button:active { transform:translateY(0); box-shadow:none; }
nav .button { min-height:46px; background:var(--ink); padding:13px 23px; }
nav .button:hover { background:#354b3b; }
.hero .button.dark { background:#fffdf7; color:var(--ink); box-shadow:0 4px 0 #ae350040; border-color:#ffffff90; }
.hero .button.dark:hover { background:var(--green); box-shadow:0 6px 0 #ae350040; }
.hero .button.dark:active { box-shadow:0 1px 0 #ae350040; }
.hero-links { gap:28px; }
.text-link { border-bottom-color:#ffffff90; transition:border-color .2s ease; }
.text-link:hover { border-bottom-color:white; }
.photo-label { background:var(--green); border-radius:3px; box-shadow:0 4px 14px #17291c1a; }
.ticker { background:var(--ink); padding:21px 0; }
.ticker-track { display:flex; width:max-content; animation:marquee 38s linear infinite; }
.ticker-inner { width:max(100vw,950px); flex:none; gap:32px; padding:0 32px; justify-content:space-around; font-size:18px; }
.ticker:hover .ticker-track { animation-play-state:paused; }
.ticker b { color:var(--green); }
.section-top .eyebrow { color:#727969; }
.tabs { gap:7px; margin-bottom:34px; }
.tab { background:white; border:1px solid #dce2d5; border-radius:7px; min-height:44px; padding:11px 19px; transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.tab:hover { border-color:#c84a17; background:#fff5ed; }
.tab[aria-pressed="true"] { background:var(--orange); color:white; border-color:var(--orange); box-shadow:0 3px 8px #fa520f20; }
.products { column-gap:30px; row-gap:48px; }
.product { cursor:default; }
.product-visual { background:#f0f3e9; border:1px solid #e7eddf; border-radius:8px; transition:background .35s ease, box-shadow .35s ease; }
.product[data-category="crousty"] .product-visual { background:#fff3e8; border-color:#f5e8da; }
.product[data-category="formules"] .product-visual { background:#f3f4ed; }
.cutout { transition:transform .45s cubic-bezier(.22,1,.36,1); }
.product h3 { font-size:22px; line-height:1.2; }
.product p { color:#66715f; line-height:1.75; }
.tag { background:var(--green); color:#34442c; border-radius:3px; padding:7px 10px; }
.price-line { border-top-color:#e3e8dc; }
.price { font-size:21px; }
.formula { color:#6b7464; }
.product-enter { animation:product-in .55s cubic-bezier(.22,1,.36,1) both; animation-delay:var(--entry-delay,0ms); }
.story { background:var(--green); }
.story li { border-bottom-color:#c8d79c; }
.social { background:var(--ink); }
.social .button.light:hover { background:var(--green); }
.close { width:40px; height:40px; background:#eef1e5; }
@media(hover:hover) and (pointer:fine) {
 .product:hover .cutout { transform:translateY(-5px) scale(1.035); }
 .product:hover .product-visual { background:#e7eedb; box-shadow:0 12px 28px #1c28210c; }
 .product[data-category="crousty"]:hover .product-visual { background:#ffead7; }
}
@keyframes product-in { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes marquee { to { transform:translateX(-50%); } }
@media(min-width:651px) and (max-width:800px) {
 header { padding:0 4%; }
 .brand { font-size:22px; }
 .brand img { width:44px; height:44px; }
 nav { gap:16px; font-size:12px; }
 nav .button { padding:12px 16px; font-size:12px; }
 .products { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px) {
 html { scroll-padding-top:90px; }
 header { height:74px; }
 nav { background:var(--paper); box-shadow:0 12px 22px #17291c12; }
 nav>a:after { right:auto; width:28px; }
 .hero-links { gap:19px; flex-wrap:wrap; }
 .hero .button { min-height:48px; padding:14px 20px; }
 .hero .text-link { font-size:13px; }
 .hero-content { padding-bottom:305px; }
 .ticker { padding:19px 0; }
 .ticker-inner { width:850px; font-size:16px; gap:24px; padding:0 20px; }
 .tabs { gap:7px; margin-bottom:26px; }
 .tab { padding:11px 13px; font-size:12px; }
 .products { row-gap:36px; }
 .product h3 { font-size:23px; }
 .price-line { padding-top:14px; }
 .story h2, .social h2 { font-size:36px; }
 .social .button { width:100%; }
}
@media(max-width:360px) {
 .hero h1 { font-size:55px; }
 .hero h2 { font-size:29px; }
 .hero p.copy { font-size:14px; }
 .hero-links { gap:16px; }
 .hero .button { padding:14px 16px; font-size:13px; }
 .hero .text-link { font-size:12px; }
 .section-top h2 { font-size:33px; }
}
@media(prefers-reduced-motion:reduce) {
 .product-enter, .ticker-track { animation:none; }
 .cutout { transition:none; }
 .product:hover .cutout { transform:none; }
}