*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#1a1a1a;background:#faf6ef}
.container{max-width:960px;margin:0 auto;padding:24px}
.site-nav{position:sticky;top:0;z-index:10;display:flex;justify-content:center;gap:8px;padding:10px 14px;background:rgba(250,246,239,.96);border-bottom:1px solid #e6dcc9;backdrop-filter:blur(8px)}
.site-nav a{padding:9px 14px;border-radius:8px;color:#3a2418;text-decoration:none;font-weight:800}
.site-nav a.active{background:#1d120d;color:#fff0d2}
.hero{position:relative;min-height:650px;overflow:hidden;background:#1d120d}
.hero-art{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(20,10,6,.9) 0%,rgba(20,10,6,.56) 34%,rgba(20,10,6,.05) 62%,rgba(20,10,6,.1) 100%),url("/assets/saucethatchit-realistic-jar-hero.png");background-size:contain;background-position:right center;background-repeat:no-repeat}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(180deg,transparent,rgba(20,10,6,.88))}
.hero-content{position:relative;z-index:1;min-height:650px;display:flex;align-items:center}
.hero-copy{width:min(430px,100%);color:#fff4df;text-shadow:0 4px 22px rgba(14,6,3,.58)}
.eyebrow{display:inline-block;margin:0 0 14px;padding:8px 12px;border:1px solid rgba(255,244,220,.42);background:rgba(20,10,6,.48);font-size:13px;font-weight:900;text-transform:uppercase}
h1{font-family:Impact,Haettenschweiler,"Arial Narrow Bold",Oswald,Inter,sans-serif;margin:0;font-size:clamp(58px,7.4vw,104px);line-height:.84;letter-spacing:0;text-transform:uppercase}
h1 span{display:block;font-family:Georgia,"Times New Roman",serif;font-size:clamp(28px,3.7vw,46px);line-height:1;color:#ffe6b8;text-transform:none}
.hero-copy p{margin:18px 0 0;color:#fff0c9;font-size:19px;line-height:1.3;font-weight:800}
.hero-flavors{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.hero-flavors span{padding:11px 14px;border:1px solid rgba(255,255,255,.34);background:rgba(20,10,6,.72);color:#fff0d2;font-weight:900;text-transform:uppercase;box-shadow:0 12px 30px rgba(0,0,0,.22)}
.hero-flavors span+span{background:#c64122}
h2{font-family:Oswald,Inter,sans-serif;margin:24px 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:#fff;border:1px solid #e6dcc9;border-radius:12px;padding:16px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.product-art{display:block;width:100%;aspect-ratio:3.2/1;height:auto;border:1px solid #e6dcc9;border-radius:8px;background:#fff;margin-bottom:8px}
.label-link{display:inline-block;margin:0 0 12px;color:#7f2d1b;font-size:.9rem;font-weight:600}
.card h3{margin:0 0 8px}
.price{font-weight:700;margin:8px 0}
.card .qty{width:64px;margin-left:8px}
.card button{margin-top:8px;width:100%;padding:10px 12px;border:0;border-radius:8px;background:#b63c1f;color:#fff;font-weight:600;cursor:pointer}
.cart{background:#fff;border-top:1px solid #e6dcc9;margin-top:24px;padding:16px;border-radius:12px;border:1px solid #e6dcc9}
.cart-total{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px dashed #ddd;margin-top:8px}
.shipping-row{color:#555}
#checkout{padding:12px 16px;border:0;border-radius:8px;background:#0b7c3e;color:#fff;font-weight:700;cursor:pointer}
.hint{font-size:.9rem;color:#555}
footer{margin-top:24px;text-align:center;color:#666}
.story-hero{position:relative;overflow:hidden;min-height:420px;background:linear-gradient(180deg,#f0b854 0%,#c9502a 48%,#2c1a12 100%);color:#fff4df}
.story-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,12,7,.82),rgba(25,12,7,.28)),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 72px)}
.story-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:170px;background:linear-gradient(180deg,transparent,rgba(18,12,9,.95))}
.story-content{position:relative;z-index:1;min-height:420px;display:flex;align-items:center}
.story-copy{max-width:650px;text-shadow:0 4px 20px rgba(20,9,5,.45)}
.story-copy h1{font-size:clamp(54px,8vw,96px)}
.story-copy p{margin:18px 0 0;color:#fff0c9;font-size:20px;line-height:1.38;font-weight:800}
.story-card{margin-top:24px;background:#fff;border:1px solid #e6dcc9;border-radius:12px;padding:22px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.story-card p{font-size:18px;line-height:1.55}
.story-card .placeholder{border-left:5px solid #c64122;background:#fff7eb;padding:14px 16px;color:#4b3526;font-weight:800}
.story-skyline{position:absolute;left:0;right:0;bottom:0;height:170px;color:rgba(20,14,10,.9);z-index:1}
.story-skyline svg{display:block;width:100%;height:100%}
.local-seo{margin-top:28px;background:#fff;border:1px solid #e6dcc9;border-radius:12px;padding:22px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.local-seo p{font-size:17px;line-height:1.5;color:#4b3526}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.faq-grid div{border:1px solid #eadfce;border-radius:8px;padding:14px;background:#fffaf2}
.faq-grid h3{margin:0 0 8px;color:#3a2418}
.faq-grid p{margin:0;font-size:15px}
.contact-hero{position:relative;overflow:hidden;min-height:420px;background:linear-gradient(135deg,#1d120d 0%,#7f2d1b 48%,#d96f2c 100%);color:#fff4df}
.contact-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,12,7,.82),rgba(25,12,7,.24)),repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 72px)}
.contact-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(180deg,transparent,rgba(18,12,9,.92))}
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.contact-panel{background:#fff;border:1px solid #e6dcc9;border-radius:12px;padding:20px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.contact-panel h2{margin-top:0}
.contact-panel p{line-height:1.5}
.contact-panel a{color:#7f2d1b;font-weight:800}
.primary-contact{border-top:5px solid #c64122}
.contact-note{border-left:5px solid #c64122;background:#fff7eb;padding:12px 14px;color:#4b3526;font-weight:800}
.contact-list{margin:0;padding-left:20px;line-height:1.65;color:#4b3526}
.contact-button{display:inline-block;width:100%;padding:12px 14px;border-radius:8px;background:#1d120d;color:#fff0d2!important;text-align:center;text-decoration:none}
@media (max-width:760px){
  .container{padding:18px}
  .hero{min-height:760px}
  .hero-art{background-image:linear-gradient(180deg,rgba(20,10,6,.8),rgba(20,10,6,.18) 36%,rgba(20,10,6,.86)),url("/assets/saucethatchit-realistic-jar-hero.png");background-size:contain;background-position:center 70%;background-repeat:no-repeat}
  .hero-content{display:block;min-height:760px;padding-top:24px}
  h1{font-size:56px}
  h1 span{font-size:28px}
  .hero-copy p{font-size:15px}
  .site-nav{justify-content:flex-start}
  .story-copy p{font-size:17px}
  .faq-grid,.contact-grid{grid-template-columns:1fr}
}
