/* ===== Sandwich Lab — Grid Lab static styles ===== */
@font-face { font-family:'Montserrat'; src:url('assets/fonts/Montserrat-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('assets/fonts/Montserrat-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('assets/fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('assets/fonts/Montserrat-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('assets/fonts/Montserrat-ExtraBold.ttf') format('truetype'); font-weight:800; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('assets/fonts/Montserrat-Black.ttf') format('truetype'); font-weight:900; font-display:swap; }
@font-face { font-family:'Montserrat Alternates'; src:url('assets/fonts/MontserratAlternates-Bold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Montserrat Alternates'; src:url('assets/fonts/MontserratAlternates-ExtraBold.otf') format('opentype'); font-weight:800; font-display:swap; }
@font-face { font-family:'Montserrat Alternates'; src:url('assets/fonts/MontserratAlternates-Black.otf') format('opentype'); font-weight:900; font-display:swap; }

*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#FBF7EF; color:#1C1B22; font-family:'Montserrat',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:inherit; }
.alt { font-family:'Montserrat Alternates','Montserrat',sans-serif; }
.wrap { max-width:1220px; margin:0 auto; }
.grid-bg { background-color:#FBF7EF; background-image:linear-gradient(rgba(214,60,60,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(214,60,60,.13) 1px, transparent 1px); background-size:46px 46px; }
.grid-bg-dark { background-color:#1C1B22; background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:46px 46px; }

/* nav */
.nav { position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; padding:16px 44px; background:rgba(251,247,239,.92); backdrop-filter:blur(8px); border-bottom:2px solid #1C1B22; }
.nav .logo img { height:30px; }
.nav-links { display:flex; align-items:center; gap:30px; }
.nav-links a { font-weight:700; font-size:14px; letter-spacing:.05em; color:#1C1B22; text-decoration:none; }
.nav-links a.active { color:#D63C3C; }
.nav-links a.cta { font-weight:800; color:#fff; background:#D63C3C; padding:11px 22px; border-radius:100px; }
.nav-toggle { display:none; }

/* buttons */
.btn { display:inline-block; font-weight:800; font-size:15px; text-decoration:none; border-radius:100px; padding:15px 30px; line-height:1; }
.btn-red { color:#fff; background:#D63C3C; box-shadow:0 10px 24px -8px rgba(214,60,60,.7); }
.btn-yellow { color:#1C1B22; background:#FFB717; }
.btn-outline { color:#1C1B22; border:2px solid #1C1B22; padding:13px 28px; }
.btn-outline-light { color:#fff; border:2px solid rgba(255,255,255,.4); padding:13px 28px; }

/* pills / badges */
.eyebrow { display:inline-flex; align-items:center; gap:8px; background:#1C1B22; color:#FFB717; font-weight:800; font-size:12px; letter-spacing:.12em; padding:8px 15px; border-radius:100px; }
.badge-best { background:#FFB717; color:#1C1B22; font-weight:800; font-size:10px; letter-spacing:.1em; padding:6px 11px; border-radius:100px; }

/* hero */
.hero { padding:70px 44px 60px; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.hero h1 { font-weight:900; font-size:76px; line-height:.94; margin:22px 0; letter-spacing:-.02em; }
.hero h1 span { color:#D63C3C; }
.hero p { font-size:18px; line-height:1.6; color:#57534b; max-width:440px; margin:0 0 32px; font-weight:500; }
.hero-photo { position:relative; }
.hero-card { position:relative; transform:rotate(3deg); background:#fff; padding:16px 16px 20px; border-radius:14px; box-shadow:0 30px 60px -20px rgba(0,0,0,.4); border:1px solid rgba(0,0,0,.06); }
.hero-card img { width:100%; height:440px; object-fit:cover; border-radius:8px; }
.hero-caption { font-weight:800; text-align:center; margin-top:12px; font-size:15px; letter-spacing:.02em; }
.hero-price { position:absolute; top:-26px; right:-14px; background:#FFB717; color:#1C1B22; font-weight:900; font-size:15px; width:82px; height:82px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(-12deg); box-shadow:0 10px 20px -6px rgba(0,0,0,.35); line-height:1; }
.hero-price span { font-size:9px; letter-spacing:.1em; margin-top:3px; }
.hero-flag { position:absolute; bottom:-18px; left:-20px; background:#D63C3C; color:#fff; font-weight:800; font-size:12px; letter-spacing:.1em; padding:10px 16px; border-radius:100px; transform:rotate(-4deg); box-shadow:0 10px 20px -6px rgba(0,0,0,.3); }
.btn-row { display:flex; gap:14px; flex-wrap:wrap; }

/* marquee */
.marquee { background:#D63C3C; overflow:hidden; padding:15px 0; border-top:2px solid #1C1B22; border-bottom:2px solid #1C1B22; }
.marquee-track { display:flex; width:max-content; animation:sl-marquee 26s linear infinite; }
.marquee-track div { display:flex; align-items:center; font-family:'Montserrat Alternates'; font-weight:800; font-size:20px; color:#fff; letter-spacing:.02em; }
.marquee-track span { padding:0 26px; }
.marquee-track .star { color:#FFB717; padding:0; }
@keyframes sl-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation:none; } }

/* sections */
.section { padding:64px 44px; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:34px; gap:18px; flex-wrap:wrap; }
.kicker { font-weight:800; font-size:13px; letter-spacing:.16em; color:#D63C3C; margin-bottom:8px; }
.section h2 { font-weight:900; font-size:46px; margin:0; letter-spacing:-.01em; }
.link-underline { font-weight:800; font-size:14px; color:#1C1B22; text-decoration:none; border-bottom:2px solid #D63C3C; padding-bottom:3px; white-space:nowrap; }
.dash { flex:1; height:2px; background:repeating-linear-gradient(90deg,#1C1B22 0 8px,transparent 8px 14px); }

/* cards */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.card { background:#fff; border:1.5px solid #1C1B22; border-radius:16px; overflow:hidden; box-shadow:4px 6px 0 #1C1B22; display:flex; flex-direction:column; }
.card .thumb { position:relative; }
.card .thumb img { width:100%; height:210px; object-fit:cover; }
.card .body { padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; }
.card .row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; }
.card h3 { font-family:'Montserrat Alternates'; font-weight:800; font-size:19px; margin:0; line-height:1.1; }
.price { font-family:'Montserrat Alternates'; font-weight:900; font-size:18px; color:#D63C3C; white-space:nowrap; }
.ing { font-size:12.5px; line-height:1.5; color:#78716c; margin:0; font-weight:500; }
.badge-abs { position:absolute; top:12px; left:12px; }

/* sides list */
.side { flex-direction:row; align-items:center; gap:16px; padding:18px; }
.side .ico { width:96px; height:96px; flex-shrink:0; background:#F4ECDC; border-radius:12px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.side .ico img { width:100%; height:100%; object-fit:contain; }

/* locations */
.loc-card .lthumb { position:relative; height:230px; }
.loc-card .lthumb-img { width:100%; height:100%; object-fit:cover; }
.loc-card .scrim { position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(28,27,34,.72) 100%); }
.loc-tag { position:absolute; left:18px; bottom:16px; background:#D63C3C; color:#fff; font-weight:900; font-size:11px; letter-spacing:.1em; padding:6px 12px; border-radius:100px; }
.loc-num { position:absolute; right:16px; top:16px; background:#FFB717; color:#1C1B22; font-family:'Montserrat Alternates'; font-weight:900; font-size:22px; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.loc-body { padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.loc-body h2 { font-family:'Montserrat Alternates'; font-weight:900; font-size:30px; margin:0 0 6px; letter-spacing:-.01em; }
.loc-addr { font-size:14px; line-height:1.55; color:#78716c; margin:0 0 16px; font-weight:500; }
.loc-meta { display:flex; flex-direction:column; gap:9px; margin-bottom:20px; }
.loc-meta a, .loc-meta div { display:flex; align-items:center; gap:10px; font-size:13.5px; color:#1C1B22; font-weight:600; text-decoration:none; }
.loc-meta .mk { color:#D63C3C; font-weight:900; }
.loc-actions { margin-top:auto; display:flex; gap:10px; }
.loc-actions a { flex:1; text-align:center; font-weight:800; font-size:13.5px; padding:12px 18px; border-radius:100px; text-decoration:none; }

/* chips */
.chips { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.chip { font-family:'Montserrat Alternates'; font-weight:800; font-size:20px; color:#fff; text-decoration:none; border:1.5px solid rgba(255,255,255,.3); padding:14px 26px; border-radius:100px; letter-spacing:.02em; }

/* generic header band */
.page-head { padding:60px 44px 46px; border-bottom:2px solid #1C1B22; text-align:center; }
.page-head h1 { font-weight:900; font-size:72px; line-height:.95; margin:14px 0; letter-spacing:-.02em; }
.page-head p { font-size:17px; line-height:1.6; color:#57534b; max-width:540px; margin:0 auto; font-weight:500; }

/* faq accordion (native details) */
.faq-list { display:flex; flex-direction:column; gap:16px; max-width:840px; margin:0 auto; }
.faq { background:#fff; border:1.5px solid #1C1B22; border-radius:16px; box-shadow:4px 6px 0 #1C1B22; overflow:hidden; }
.faq summary { cursor:pointer; display:flex; align-items:center; gap:18px; padding:22px 24px; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .no { font-family:'Montserrat Alternates'; font-weight:900; font-size:15px; color:#D63C3C; width:30px; flex-shrink:0; }
.faq summary h3 { font-family:'Montserrat Alternates'; font-weight:800; font-size:19px; margin:0; flex:1; line-height:1.25; }
.faq summary .sign { font-family:'Montserrat Alternates'; font-weight:900; font-size:24px; color:#1C1B22; background:#F4ECDC; width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; line-height:1; }
.faq[open] summary .sign { background:#D63C3C; color:#fff; }
.faq[open] summary .sign::after { content:'–'; }
.faq summary .sign::after { content:'+'; }
.faq .ans { padding:0 24px 24px 72px; }
.faq .ans-inner { border-top:2px dotted #e2d8c2; padding-top:16px; font-size:15px; line-height:1.65; color:#57534b; font-weight:500; }
.faq .ans a { display:inline-block; margin-top:12px; font-weight:800; font-size:14px; color:#D63C3C; text-decoration:none; border-bottom:2px solid #D63C3C; padding-bottom:2px; }

/* cta box */
.cta-box { background-color:#1C1B22; border-radius:20px; padding:50px; text-align:center; }
.cta-box h2 { font-family:'Montserrat Alternates'; font-weight:900; font-size:40px; color:#fff; margin:0 0 12px; letter-spacing:-.01em; }
.cta-box p { color:rgba(255,255,255,.75); font-size:16px; margin:0 0 26px; font-weight:500; }

/* footer */
.footer { padding:56px 44px 30px; background:#D63C3C; text-align:center; }
.footer img { height:120px; margin:0 auto 20px; }
.footer nav { display:flex; gap:26px; justify-content:center; margin-bottom:22px; flex-wrap:wrap; }
.footer nav a { color:#fff; font-weight:700; font-size:14px; text-decoration:none; }
.footer .cities { color:rgba(255,255,255,.7); font-size:12px; font-weight:500; margin-bottom:18px; }
.footer .legal { border-top:1px solid rgba(255,255,255,.22); padding-top:16px; max-width:1220px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.footer .legal, .footer .legal a { color:rgba(255,255,255,.55); font-size:11px; font-weight:600; }
.footer .legal a { text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); }

/* responsive */
@media (max-width:900px){
  .nav { padding:14px 20px; }
  .nav-links { gap:18px; }
  .hero { padding:44px 20px; }
  .hero-grid { grid-template-columns:1fr; gap:48px; }
  .hero h1 { font-size:52px; }
  .section { padding:44px 20px; }
  .section h2 { font-size:34px; }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  .grid-2 { grid-template-columns:1fr; }
  .page-head { padding:44px 20px 34px; }
  .page-head h1 { font-size:52px; }
  .cta-box { padding:36px 24px; }
  .footer { padding:44px 20px 24px; }
}
@media (max-width:600px){
  .nav-links a:not(.cta):not(.active) { display:none; }
  .hero h1 { font-size:42px; }
  .grid-3 { grid-template-columns:1fr; }
  .side { flex-direction:row; }
  .page-head h1 { font-size:42px; }
  .faq .ans { padding-left:24px; }
  .cta-box h2 { font-size:28px; }
}

/* ===== Why Sandwich Lab ===== */
.why { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.why .item { background:#fff; border:1.5px solid #1C1B22; border-radius:16px; box-shadow:4px 6px 0 #1C1B22; padding:24px; }
.why .item .ic { font-family:'Montserrat Alternates'; font-weight:900; font-size:22px; color:#fff; background:#D63C3C; width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.why .item h3 { font-family:'Montserrat Alternates'; font-weight:800; font-size:18px; margin:0 0 8px; }
.why .item p { font-size:13.5px; line-height:1.55; color:#78716c; font-weight:500; margin:0; }
@media (max-width:900px){ .why { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .why { grid-template-columns:1fr; } }

/* ===== Guides hub ===== */
.guides-cat { margin-bottom:44px; }
.guides-cat .cat-head { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.guides-cat .cat-head h2 { font-family:'Montserrat Alternates'; font-weight:900; font-size:28px; margin:0; letter-spacing:-.01em; }
.guides-cat .cat-head .n { font-family:'Montserrat Alternates'; font-weight:800; font-size:13px; color:#fff; background:#1C1B22; border-radius:100px; padding:4px 12px; }
.guides-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.g-item { display:flex; flex-direction:column; gap:10px; background:#fff; border:1.5px solid #1C1B22; border-radius:14px; box-shadow:3px 5px 0 #1C1B22; padding:18px 18px 16px; text-decoration:none; color:#1C1B22; min-height:118px; }
.g-item.soon { box-shadow:none; background:#fff8ec; border-style:dashed; border-color:#d8ccae; color:#8a7f68; }
.g-item .g-num { font-family:'Montserrat Alternates'; font-weight:900; font-size:12px; color:#D63C3C; }
.g-item.soon .g-num { color:#c3b596; }
.g-item h3 { font-family:'Montserrat Alternates'; font-weight:800; font-size:16px; margin:0; line-height:1.25; }
.g-item .g-go { margin-top:auto; font-weight:800; font-size:12px; letter-spacing:.04em; color:#D63C3C; }
.g-item .g-go.soon-tag { color:#b3a686; }
@media (max-width:900px){ .guides-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .guides-grid { grid-template-columns:1fr; } }

/* ===== Article ===== */
.article { max-width:760px; margin:0 auto; padding:48px 24px 20px; }
.article .crumbs { font-size:12px; font-weight:600; color:#8a7f68; margin-bottom:18px; }
.article .crumbs a { color:#D63C3C; text-decoration:none; }
.article .cat-pill { display:inline-block; font-weight:800; font-size:11px; letter-spacing:.1em; color:#D63C3C; background:#fff; border:1.5px solid #D63C3C; border-radius:100px; padding:5px 12px; margin-bottom:16px; }
.article h1 { font-family:'Montserrat Alternates'; font-weight:900; font-size:44px; line-height:1.05; letter-spacing:-.02em; margin:0 0 14px; }
.article .lede { font-size:18px; line-height:1.6; color:#57534b; font-weight:600; margin:0 0 20px; }
.article .meta { font-size:12.5px; color:#8a7f68; font-weight:600; border-bottom:2px solid #1C1B22; padding-bottom:18px; margin-bottom:26px; }
.article-body { font-size:16.5px; line-height:1.75; color:#2b2a30; }
.article-body h2 { font-family:'Montserrat Alternates'; font-weight:800; font-size:26px; letter-spacing:-.01em; margin:34px 0 12px; }
.article-body h3 { font-family:'Montserrat Alternates'; font-weight:800; font-size:19px; margin:24px 0 8px; }
.article-body p { margin:0 0 16px; }
.article-body ul, .article-body ol { margin:0 0 18px; padding-left:22px; }
.article-body li { margin-bottom:8px; }
.article-body strong { font-weight:700; }
.article-body .callout { background:#FBF3E4; border:1.5px solid #1C1B22; border-left:6px solid #D63C3C; border-radius:12px; padding:18px 20px; margin:24px 0; font-weight:500; }
.article-figure { margin:24px 0; border:1.5px solid #1C1B22; border-radius:14px; overflow:hidden; box-shadow:4px 6px 0 #1C1B22; }
.article-figure img { width:100%; height:auto; }
.article-figure figcaption { font-size:12px; color:#8a7f68; font-weight:600; padding:10px 14px; background:#fff; }
.article-faq { margin:30px 0 6px; }
.article-faq h2 { font-family:'Montserrat Alternates'; font-weight:800; font-size:24px; margin:0 0 14px; }
.article-cta { background-color:#1C1B22; border-radius:18px; padding:34px; text-align:center; margin:34px 0; }
.article-cta h2 { font-family:'Montserrat Alternates'; font-weight:900; font-size:26px; color:#fff; margin:0 0 8px; }
.article-cta p { color:rgba(255,255,255,.75); font-weight:500; margin:0 0 20px; }
.related { max-width:760px; margin:0 auto; padding:10px 24px 50px; }
.related h2 { font-family:'Montserrat Alternates'; font-weight:800; font-size:22px; margin:0 0 16px; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.related a { background:#fff; border:1.5px solid #1C1B22; border-radius:12px; box-shadow:3px 4px 0 #1C1B22; padding:14px; text-decoration:none; color:#1C1B22; font-family:'Montserrat Alternates'; font-weight:800; font-size:14px; line-height:1.3; }
@media (max-width:900px){ .related-grid { grid-template-columns:1fr; } }
@media (max-width:600px){ .article h1 { font-size:32px; } }