/* ============================================================
   Monty's — site-wide styles
   Design system: Direction 01 "The Chef's Table", adapted per
   the 2026 credibility-site brief. Blue is foundational; oat
   butter yellow is the hero accent. No commerce components.
   ============================================================ */

@font-face { font-family: 'Garamond Cond'; src: url(../fonts/garamond-cond.woff2) format('woff2'), url(../fonts/garamond-cond.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Graphik'; src: url(../fonts/graphik-regular.woff2) format('woff2'), url(../fonts/graphik-regular.ttf) format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Graphik'; src: url(../fonts/graphik-semibold.woff2) format('woff2'), url(../fonts/graphik-semibold.otf) format('opentype'); font-weight: 600; font-display: swap; }

:root {
  --cream: #F6F1E5;
  --cream-deep: #EFE7D4;
  --ink: #26221B;
  --ink-soft: #5C5546;
  --butter: #F0E3A6;
  --butter-deep: #E8D88D;
  --blue: #8CA1AA;        /* Monty's brand blue — packaging C44 M26 Y22 K0 */
  --blue-deep: #52676F;   /* darker shade of the brand blue, small accents only */
  --blue-soft: #A9B6C0;   /* packaging blue-grey */
  --blue-wash: #E9EEF1;
  --blue-ink: #37464D;    /* body text on brand-blue blocks */
  --blue-label: #4A5D65;  /* labels/captions on brand-blue blocks */
  --rule: #DDD3BE;
  --rule-blue: #7E939D;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Graphik', system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.serif { font-family: 'Garamond Cond', 'Times New Roman', serif; font-weight: 400; }
.label {
  font-size: 11px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-soft);
}
.on-blue .label, .label.on-blue { color: var(--blue-label); }

/* ---- buttons ---- */
.btn {
  display: inline-block; border: 1px solid var(--ink); border-radius: 100px;
  padding: 11px 26px; font-size: 13px; letter-spacing: .06em;
  transition: background .2s, color .2s; cursor: pointer;
  font-family: 'Graphik', sans-serif; background: transparent; color: var(--ink);
}
.btn:hover { background: var(--ink); color: var(--cream); }
.btn.solid { background: var(--ink); color: var(--cream); }
.btn.solid:hover { background: transparent; color: var(--ink); }
.btn.blue { background: var(--blue); border-color: var(--blue); color: var(--ink); }
.btn.blue:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #FDFBF5; }
.btn.light { border-color: var(--cream); color: var(--cream); background: transparent; }
.btn.light:hover { background: var(--cream); color: var(--blue-deep); }

/* ---- nav ---- */
nav.site {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px; border-bottom: 1px solid var(--rule);
  background: var(--cream); position: sticky; top: 0; z-index: 50; gap: 20px;
}
.nav-left, .nav-right { display: flex; align-items: center; gap: 26px; flex: 1; }
.nav-right { justify-content: flex-end; }
nav.site a.link { font-size: 13px; letter-spacing: .04em; white-space: nowrap; }
nav.site a.link:hover { opacity: .55; }
nav.site a.link[aria-current="page"] { border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.wordmark { display: flex; align-items: center; gap: 12px; }
.wordmark img { width: 44px; height: 44px; border-radius: 50%; }
.wordmark span { font-family: 'Garamond Cond', serif; font-size: 26px; letter-spacing: .02em; }

/* mobile nav */
.nav-toggle { display: none; }
.nav-burger { display: none; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; user-select: none; }
.mobile-menu { display: none; }

/* ---- page hero (interior pages) ---- */
.page-hero { padding: 84px 40px 56px; max-width: 1240px; margin: 0 auto; }
.page-hero h1 { font-family: 'Garamond Cond', serif; font-weight: 400; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.04; max-width: 14em; text-wrap: balance; margin-top: 16px; }
.page-hero .lede { margin-top: 22px; max-width: 36em; color: #3D372C; font-size: 17px; }
.page-hero.on-blue { max-width: none; background: var(--blue); color: var(--ink); }
.page-hero.on-blue .inner { max-width: 1240px; margin: 0 auto; }
.page-hero.on-blue .lede { color: var(--blue-ink); }

/* ---- home hero ---- */
.hero-home { background: var(--butter); border-bottom: 1px solid var(--rule); overflow: hidden; }
.hero-home .inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: center;
  gap: clamp(30px, 5vw, 80px); padding: clamp(48px, 6vw, 96px) 40px;
}
.hero-home h1 {
  font-family: 'Garamond Cond', serif; font-weight: 400;
  font-size: clamp(46px, 6vw, 86px); line-height: 1.02; text-wrap: balance;
}
.hero-home .sub { margin: 22px 0 30px; max-width: 27em; color: #4A4430; font-size: 16px; }
.hero-home .cta .btn + .btn { margin-left: 10px; }
.hero-home .cup { position: relative; }
.hero-home .cup img { max-height: 520px; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 34px 44px rgba(74,68,48,.28)); }
.hero-home .kicker { color: #6B6339; }

/* ---- home hero: full-bleed photo ---- */
.hero-film { position: relative; overflow: hidden; background: var(--ink); border-bottom: 1px solid var(--rule); }
.hero-film video, .hero-film img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero-film .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,20,14,.66) 0%, rgba(23,20,14,.16) 46%, rgba(23,20,14,.34) 100%); }
.hero-film .inner {
  position: relative; max-width: 1280px; margin: 0 auto;
  min-height: min(86vh, 840px);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: clamp(140px, 24vh, 240px) 40px clamp(56px, 8vw, 96px);
}
.hero-film h1 {
  font-family: 'Garamond Cond', serif; font-weight: 400;
  font-size: clamp(46px, 6vw, 88px); line-height: 1.02; text-wrap: balance;
  color: #FDFBF5; max-width: 9.5em;
}
.hero-film .sub { margin: 20px 0 30px; max-width: 30em; color: rgba(253,251,245,.82); font-size: 16px; }
.hero-film .kicker { color: var(--butter); }
.hero-film .cta .btn + .btn { margin-left: 10px; }
.hero-film .btn.solid { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.hero-film .btn.solid:hover { background: transparent; color: var(--cream); }

/* ---- retail proof strip ---- */
.proof { background: var(--cream); border-bottom: 1px solid var(--rule); padding: 56px 40px 62px; text-align: center; }
.proof .label { display: block; margin-bottom: 34px; }
.proof-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 26px 64px; max-width: 1100px; margin: 0 auto;
}
.proof-row .name { font-family: 'Garamond Cond', serif; font-size: clamp(24px, 2.6vw, 34px); color: var(--ink); }
.proof-row img { width: auto; opacity: .82; }
.proof-row + .label { margin-top: 48px; }
.proof-row.foodservice .name { font-size: clamp(20px, 2vw, 27px); color: var(--ink-soft); }

/* mini logo strip (trade page) */
.minilogos { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.minilogos img { width: auto; opacity: .8; }

/* ---- full-bleed photo band ---- */
.photo-band { display: block; }
.photo-band img { width: 100%; height: clamp(300px, 46vw, 540px); object-fit: cover; }

/* ---- 3-up full-bleed photo gallery ---- */
.gallery3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.gallery3 img { display: block; width: 100%; height: clamp(320px, 36vw, 540px); object-fit: cover; }

/* ---- creed strip ---- */
.creed { padding: 96px 40px 88px; text-align: center; }
.creed .label { display: block; margin-bottom: 22px; }
.creed h2 {
  font-family: 'Garamond Cond', serif; font-weight: 400;
  font-size: clamp(30px, 3.6vw, 52px); line-height: 1.16;
  max-width: 21em; margin: 0 auto; text-wrap: balance;
}
.creed h2 em { font-style: italic; }

/* slim claims bar (under home hero) */
.claimsbar { background: var(--cream); border-bottom: 1px solid var(--rule); padding: 26px 40px; }
.claimsbar .claims { margin-top: 0; }

/* claims chips — pill style (matches the badge row on pack), stays aligned when wrapping */
.claims { margin-top: 44px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.claims span {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 16px; color: var(--ink-soft);
  border: 1px solid var(--rule); border-radius: 100px; white-space: nowrap;
}

/* ---- founder letter ---- */
.letter-band { background: var(--cream-deep); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.letter-band .letter { padding-top: clamp(70px, 7vw, 100px); padding-bottom: clamp(70px, 7vw, 110px); }
.letter-band .photo img { box-shadow: 0 26px 48px rgba(38,34,27,.14); }
.letter {
  display: grid; grid-template-columns: minmax(300px, 460px) 1fr;
  gap: clamp(40px, 7vw, 110px); align-items: center;
  padding: 40px clamp(40px, 8vw, 120px) 110px; max-width: 1440px; margin: 0 auto;
}
.letter .photo img { border-radius: 2px; }
.letter .photo figcaption { margin-top: 12px; font-size: 12px; color: var(--ink-soft); letter-spacing: .04em; }
.letter h3, .letter h2 { font-family: 'Garamond Cond', serif; font-weight: 400; font-size: clamp(30px, 3vw, 44px); line-height: 1.15; margin: 18px 0 26px; }
.letter p { max-width: 34em; color: #3D372C; margin-bottom: 1.1em; }
.letter .sig { font-family: 'Garamond Cond', serif; font-size: 30px; font-style: italic; margin-top: 30px; }
.letter .sig small { display: block; font-family: 'Graphik', sans-serif; font-style: normal; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; }

/* ---- recipe card (ingredients) ---- */
.recipe { background: var(--cream-deep); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.recipe .inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.recipe .img { overflow: hidden; }
.recipe .img img { width: 100%; height: 100%; object-fit: cover; }
.recipe .card { padding: clamp(48px, 6vw, 96px); display: flex; flex-direction: column; justify-content: center; }
.recipe h3 { font-family: 'Garamond Cond', serif; font-weight: 400; font-size: clamp(32px, 3.4vw, 50px); line-height: 1.1; margin: 16px 0 34px; max-width: 12em; }
.ing { list-style: none; max-width: 26em; }
.ing li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 17px;
}
.ing li:first-child { border-top: 1px solid var(--rule); }
.ing li span { font-size: 12px; color: var(--ink-soft); letter-spacing: .08em; }
.recipe .card > p { margin-top: 30px; font-size: 14px; color: var(--ink-soft); max-width: 28em; }

/* ---- product tiles (home strip) ---- */
.lineup { padding: 100px 40px 110px; max-width: 1340px; margin: 0 auto; }
.lineup-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 52px; gap: 24px; }
.lineup-head h3 { font-family: 'Garamond Cond', serif; font-weight: 400; font-size: clamp(34px, 3.6vw, 54px); line-height: 1.05; margin-top: 14px; }
.lineup-head p { font-size: 14px; color: var(--ink-soft); max-width: 22em; text-align: right; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.prod { text-align: center; display: block; }
.prod .tile {
  background: #FBF8F0; border: 1px solid var(--rule); border-radius: 3px;
  padding: 44px 20px; margin-bottom: 20px; position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.prod:hover .tile { transform: translateY(-6px); box-shadow: 0 22px 38px rgba(38,34,27,.10); }
.prod .tile img { max-height: 230px; margin: 0 auto; object-fit: contain; transition: transform .25s ease; }
.prod:hover .tile img { transform: scale(1.03); }
.prod .tile.on-butter { background: var(--butter); border-color: var(--butter-deep); }
.prod .tile.on-blue { background: var(--blue-wash); border-color: #C6D1D7; }
.prod .tile.on-deep { background: var(--cream-deep); border-color: #D6CAB0; }
.prod .tile.photo { padding: 0; overflow: hidden; aspect-ratio: 1 / 1; }
.prod .tile.photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.prod .tile .tag {
  position: absolute; top: 14px; left: 14px;
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  background: var(--butter); border-radius: 100px; padding: 5px 12px;
}
.prod .tile.on-butter .tag { background: var(--cream); }
.prod h4 { font-family: 'Garamond Cond', serif; font-weight: 400; font-size: 25px; }
.prod p { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.prod .cue {
  display: inline-block; margin-top: 14px; font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease;
}
.prod:hover .cue { opacity: 1; transform: translateY(0); }
@media (hover: none) { .prod .cue { opacity: 1; transform: none; } }

/* ---- product detail sections (products page) ---- */
.sku { border-top: 0; }
.sku .inner {
  max-width: 1340px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(300px, 520px) 1fr;
  gap: clamp(40px, 6vw, 100px);
  padding: clamp(56px, 7vw, 100px) 40px;
}
.sku .visual {
  border-radius: 3px; display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 4vw, 60px); min-height: 420px; align-self: start;
  position: sticky; top: 110px;
}
.sku .visual img { max-height: 380px; object-fit: contain; }
.sku .visual.photo { padding: 0; overflow: hidden; min-height: 0; height: auto; aspect-ratio: 4 / 5; }
.sku .visual.photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; }
.sku .visual-stack { display: grid; gap: 14px; align-self: start; position: sticky; top: 110px; align-content: start; }
.sku .visual-stack .visual { position: relative; top: auto; }
.sku.oat .visual { background: var(--butter); }
.sku.cashew .visual { background: var(--blue-wash); }
.sku.cream .visual { background: var(--cream-deep); }
.sku h2 { font-family: 'Garamond Cond', serif; font-weight: 400; font-size: clamp(36px, 4vw, 58px); line-height: 1.05; margin: 14px 0 18px; }
.sku .desc { max-width: 34em; color: #3D372C; margin-bottom: 26px; }
.sku .claims { justify-content: flex-start; margin: 0 0 34px; gap: 8px; }
.sku .claims span { padding: 7px 14px; font-size: 10.5px; }
.sku h5 { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin: 34px 0 10px; }
.sku .ing { max-width: 30em; }
.sku .footnote { font-size: 12px; color: var(--ink-soft); margin-top: 10px; }
.sku .cta-row { margin-top: 38px; }
.sku .cta-row .btn + .btn { margin-left: 10px; }

/* nutrition table */
.nutrition { max-width: 30em; border: 1px solid var(--rule); border-radius: 3px; background: #FBF8F0; padding: 18px 22px; font-size: 13px; }
.nutrition .nhead { display: flex; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 8px; font-weight: 600; }
.nutrition dl { display: grid; grid-template-columns: 1fr auto; row-gap: 4px; }
.nutrition dt { color: var(--ink-soft); }
.nutrition dd { text-align: right; }

/* two-variant nutrition (cashew butter) */
.nutrition.duo dl { grid-template-columns: 1fr auto auto; column-gap: 28px; }
.nutrition.duo .colhead { font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); padding-bottom: 4px; }
.nutrition.duo dd { min-width: 52px; }

/* variant tabs within a sku */
.variants { display: flex; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; }
.variants span {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--rule); border-radius: 100px; padding: 7px 16px; color: var(--ink-soft);
}
.variants span.on { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* ---- press ---- */
.press { padding: 110px 40px; text-align: center; max-width: 1240px; margin: 0 auto; }
.press blockquote {
  font-family: 'Garamond Cond', serif; font-size: clamp(30px, 4vw, 56px);
  line-height: 1.14; max-width: 17em; margin: 30px auto 26px; text-wrap: balance;
}
.press cite { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.press .minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 70px auto 0; }
.press .mini { border: 1px solid var(--rule); border-radius: 3px; padding: 30px 28px; text-align: left; background: #FBF8F0; }
.press .mini p { font-family: 'Garamond Cond', serif; font-size: 21px; line-height: 1.3; margin-bottom: 16px; }
.press .mini cite { font-size: 10px; }

/* ---- find band (brand blue) ---- */
.find { background: var(--blue); color: var(--ink); padding: 100px 40px; }
.find .inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 100px); }
.find .label { color: var(--blue-label); }
.find h3 { font-family: 'Garamond Cond', serif; font-weight: 400; font-size: clamp(34px, 3.8vw, 56px); line-height: 1.08; margin: 16px 0 24px; max-width: 10em; }
.find p { color: var(--blue-ink); max-width: 26em; margin-bottom: 30px; font-size: 15px; }
.find .btn.light { border-color: var(--ink); color: var(--ink); }
.find .btn.light:hover { background: var(--ink); color: var(--cream); }
.stores { list-style: none; columns: 2; gap: 40px; }
.stores li {
  font-family: 'Garamond Cond', serif; font-size: clamp(24px, 2.4vw, 34px);
  padding: 14px 0; border-bottom: 1px solid var(--rule-blue); break-inside: avoid;
}
.stores li span { font-family: 'Graphik', sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-label); display: block; margin-top: 2px; }
.stores.logos li { padding: 18px 0; }
.stores.logos li img { width: auto; opacity: .95; }
.stores.logos li span { margin-top: 8px; }

/* ---- where-to-buy page ---- */
.locator { max-width: 1240px; margin: 0 auto; padding: 0 40px 40px; }
.locator .panel {
  background: #FBF8F0; border: 1px solid var(--rule); border-radius: 3px;
  padding: clamp(30px, 4vw, 56px);
}
.store-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 60px; }
.store-grid .stores { columns: 1; }
.store-grid .stores li { border-color: var(--rule); }
.store-grid .stores li span { color: var(--ink-soft); }
.store-grid h4 { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.ask { max-width: 1240px; margin: 0 auto; padding: 40px 40px 110px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 90px); align-items: center; }
.ask h3 { font-family: 'Garamond Cond', serif; font-weight: 400; font-size: clamp(28px, 3vw, 42px); line-height: 1.12; margin: 12px 0 16px; }
.ask p { color: #3D372C; max-width: 30em; margin-bottom: 24px; }

/* ---- forms ---- */
form.gate { max-width: 480px; }
form.gate label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin: 22px 0 8px; }
form.gate input {
  width: 100%; border: 1px solid var(--rule); border-radius: 3px; background: #FBF8F0;
  padding: 13px 16px; font-family: 'Graphik', sans-serif; font-size: 15px; color: var(--ink); outline: none;
}
form.gate input:focus { border-color: var(--blue); }
form.gate button { margin-top: 30px; }
form.gate .fineprint { font-size: 12px; color: var(--ink-soft); margin-top: 16px; max-width: 30em; }

/* ---- trade page ---- */
.trade-points { max-width: 1240px; margin: 0 auto; padding: 20px 40px 60px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.point { border: 1px solid var(--rule); border-radius: 3px; background: #FBF8F0; padding: 34px 30px; }
.point h4 { font-family: 'Garamond Cond', serif; font-weight: 400; font-size: 26px; margin: 10px 0 10px; }
.point p { font-size: 14px; color: #3D372C; max-width: 34em; }
.trade-gate { background: var(--blue); color: var(--ink); }
.trade-gate .inner { max-width: 1240px; margin: 0 auto; padding: clamp(60px, 7vw, 100px) 40px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); }
.trade-gate h3 { font-family: 'Garamond Cond', serif; font-weight: 400; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.1; margin: 14px 0 18px; }
.trade-gate p { color: var(--blue-ink); max-width: 28em; }
.trade-gate form.gate label { color: var(--blue-label); }
.trade-gate form.gate input { background: rgba(253,251,245,.45); border-color: var(--rule-blue); color: var(--ink); }
.trade-gate form.gate input:focus { border-color: var(--ink); }
.trade-gate form.gate .fineprint { color: var(--blue-label); }
.trade-gate .btn.light { border-color: var(--ink); color: var(--ink); }
.trade-gate .btn.light:hover { background: var(--ink); color: var(--cream); }

/* ---- press page ---- */
.presskit { background: var(--cream-deep); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.presskit .inner { max-width: 1240px; margin: 0 auto; padding: clamp(56px, 6vw, 90px) 40px; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.presskit h3 { font-family: 'Garamond Cond', serif; font-weight: 400; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.1; margin: 14px 0 16px; }
.presskit p { color: #3D372C; max-width: 32em; margin-bottom: 26px; }
.presskit ul { list-style: none; font-size: 14px; color: var(--ink-soft); margin-bottom: 30px; }
.presskit ul li { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.presskit .thumb { background: #FBF8F0; border: 1px solid var(--rule); border-radius: 3px; padding: 40px; }
.presskit .thumb img { max-height: 300px; margin: 0 auto; object-fit: contain; }
.presskit .thumb.photo { padding: 0; overflow: hidden; }
.presskit .thumb.photo img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; }

/* ---- contact cards ---- */
.contacts { max-width: 1240px; margin: 0 auto; padding: 20px 40px 110px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.contact-card { border: 1px solid var(--rule); border-radius: 3px; background: #FBF8F0; padding: 40px 34px; }
.contact-card h4 { font-family: 'Garamond Cond', serif; font-weight: 400; font-size: 28px; margin: 12px 0 10px; }
.contact-card p { font-size: 14px; color: #3D372C; margin-bottom: 22px; min-height: 66px; }
.contact-card a.mail { font-size: 15px; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.contact-card a.mail:hover { opacity: .6; }

/* ---- story page ---- */
.story-photos { max-width: 1340px; margin: 0 auto; padding: 0 40px 90px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.story-photos figure { border-radius: 3px; overflow: hidden; }
.story-photos img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.story-photos figcaption { font-size: 12px; color: var(--ink-soft); padding-top: 10px; letter-spacing: .04em; }
.standard { background: var(--blue); color: var(--ink); }
.standard .inner { max-width: 1000px; margin: 0 auto; padding: clamp(70px, 8vw, 120px) 40px; text-align: center; }
.standard h3 { font-family: 'Garamond Cond', serif; font-weight: 400; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.14; text-wrap: balance; margin: 20px 0 30px; }
.standard .label { color: var(--blue-label); }
.standard ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 0; }
.standard ul li { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding: 10px 28px; color: var(--blue-ink); }
.standard ul li + li { border-left: 1px solid var(--rule-blue); }

/* ---- CTA band ---- */
.cta-band { text-align: center; padding: clamp(70px, 8vw, 110px) 40px; }
.cta-band h3 { font-family: 'Garamond Cond', serif; font-weight: 400; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.1; margin: 14px 0 30px; text-wrap: balance; }
.cta-band .btn + .btn { margin-left: 10px; }
.cta-band.butter { background: var(--butter); }
.cta-band.butter .label { color: #6B6339; }

/* ---- footer ---- */
footer.site { border-top: 1px solid var(--rule); padding: 70px 40px 40px; background: var(--cream); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; max-width: 1240px; margin: 0 auto 60px; }
.foot-grid h5 { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 16px; }
.foot-grid a { display: block; font-size: 14px; padding: 5px 0; }
.foot-grid a:hover { opacity: .55; }
.news p { font-family: 'Garamond Cond', serif; font-size: 26px; line-height: 1.25; max-width: 12em; margin-bottom: 20px; }
.news .field { display: flex; border: 1px solid var(--ink); border-radius: 100px; overflow: hidden; max-width: 340px; }
.news .field input {
  border: 0; background: transparent; padding: 12px 20px; flex: 1;
  font-family: 'Graphik', sans-serif; font-size: 13px; color: var(--ink); outline: none;
}
.news .field button {
  border: 0; background: var(--ink); color: var(--cream); padding: 0 22px;
  font-family: 'Graphik', sans-serif; font-size: 12px; letter-spacing: .08em; cursor: pointer;
}
.colophon {
  max-width: 1240px; margin: 0 auto; padding-top: 26px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-soft); letter-spacing: .06em; gap: 12px; flex-wrap: wrap;
}

/* ---- keyboard focus ---- */
:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 3px; border-radius: 2px; }
.find :focus-visible, .trade-gate :focus-visible { outline-color: var(--ink); }
.hero-film :focus-visible { outline-color: var(--cream); }

/* ---- label comparison (products page) ---- */
.compare { background: var(--blue); color: var(--ink); }
.compare .inner { max-width: 1180px; margin: 0 auto; padding: clamp(80px, 9vw, 130px) 40px; }
.compare .head { text-align: center; margin-bottom: 60px; }
.compare .head .label { color: var(--blue-label); }
.compare .head h3 { font-family: 'Garamond Cond', serif; font-weight: 400; font-size: clamp(36px, 4.6vw, 68px); line-height: 1.06; margin-top: 16px; text-wrap: balance; }
.compare .cards { display: grid; grid-template-columns: 1fr 84px 1fr; align-items: stretch; }
.compare .vs { display: flex; align-items: center; justify-content: center; }
.compare .vs span {
  font-family: 'Garamond Cond', serif; font-style: italic; font-size: 30px; color: var(--blue-label);
  width: 58px; height: 58px; border: 1px solid var(--rule-blue); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding-bottom: 4px;
}
.compare .card { border-radius: 3px; padding: clamp(34px, 3.8vw, 54px); }
.compare .card.ours {
  background: var(--butter); color: var(--ink); border: 1px solid var(--butter-deep);
  box-shadow: 0 30px 60px rgba(38,34,27,.18);
}
.compare .card.theirs { background: rgba(253,251,245,.35); border: 1px solid var(--rule-blue); color: #43565E; display: flex; flex-direction: column; }
.compare .card .who { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.compare .card.ours .who { color: #6B6339; }
.compare .card.theirs .who { color: var(--blue-label); }
.compare .card .count { margin: 20px 0 6px; line-height: 1; }
.compare .card .count b { font-family: 'Garamond Cond', serif; font-weight: 400; font-size: clamp(84px, 9vw, 140px); display: block; }
.compare .card .count small { font-family: 'Graphik', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; display: block; margin-top: 8px; }
.compare .card.ours .count small { color: #6B6339; }
.compare .card.theirs .count { color: #4E626B; }
.compare .card.theirs .count small { color: var(--blue-label); }
.compare .card.ours .ing { max-width: none; margin-top: 26px; }
.compare .card.ours .ing li { border-color: rgba(38,34,27,.18); font-size: 18px; }
.compare .card.ours .ing li:first-child { border-top-color: rgba(38,34,27,.18); }
.compare .card.ours .ing li span { color: #6B6339; }
.compare .card.theirs .fineprint-label { margin-top: 30px; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--blue-label); }
.compare .card.theirs .longlist { margin-top: 10px; font-size: 12px; line-height: 1.95; letter-spacing: .01em; color: #4E626B; max-width: 34em; }
.compare .card.theirs .longlist em { font-style: normal; color: var(--ink); border-bottom: 1px solid var(--blue-deep); }
.compare .card.theirs .verdict {
  margin-top: auto; padding-top: 34px;
  font-family: 'Garamond Cond', serif; font-style: italic;
  font-size: clamp(20px, 1.8vw, 25px); line-height: 1.3; color: var(--blue-ink); max-width: 18em;
}
.compare .foot { text-align: center; margin-top: 40px; font-size: 12px; color: var(--blue-label); }

/* ---- FAQ page ---- */
.faq { max-width: 880px; margin: 0 auto; padding: 10px 40px 110px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-of-type { border-top: 1px solid var(--rule); }
.faq summary {
  font-family: 'Garamond Cond', serif; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2;
  padding: 24px 44px 24px 0; cursor: pointer; list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: 'Graphik', sans-serif; font-size: 22px; color: var(--ink-soft); }
.faq details[open] summary::after { content: '\2013'; }
.faq details p { padding: 0 0 28px; color: #3D372C; max-width: 42em; }
.faq details p + p { margin-top: -12px; }

/* ---- recipes page ---- */
.recipe .card .meta { display: flex; gap: 26px; margin-bottom: 26px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.recipe .card ol { margin: 26px 0 0 18px; max-width: 34em; color: #3D372C; }
.recipe .card ol li { padding: 6px 0; }
.recipe .card ol li::marker { font-family: 'Garamond Cond', serif; color: var(--ink-soft); }
.recipe + .recipe { border-top: 0; }
.recipe:nth-of-type(even) .inner .img { order: 2; }

/* linked store logos */
.stores.logos li a { display: block; }
.stores.logos li a:hover { opacity: .7; }
.stores.logos .wordmark-store { font-family: 'Graphik', sans-serif; font-weight: 600; font-size: 17px; letter-spacing: .14em; display: block; }

/* ---- press wall (press page) ---- */
.press-wall { max-width: 1240px; margin: 0 auto; padding: 10px 40px 90px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.press-wall a {
  border: 1px solid var(--rule); border-radius: 3px; background: #FBF8F0;
  display: flex; align-items: center; justify-content: center; padding: 34px 28px; min-height: 130px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.press-wall a:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(38,34,27,.08); }
.press-wall img { max-height: 46px; max-width: 72%; object-fit: contain; }

/* ---- shop toggle: links hidden until site.js adds .shop-on (SHOP_ENABLED flag) ---- */
.shop-link { display: none; }
html.shop-on .shop-link { display: revert; }

/* ---- build-your-own 4-pack (shop page) ---- */
.builder { max-width: 1340px; margin: 0 auto; padding: 30px 40px 90px; }
.builder-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.builder-head h3 { font-family: 'Garamond Cond', serif; font-weight: 400; font-size: clamp(32px, 3.4vw, 50px); line-height: 1.05; margin-top: 14px; }
.builder-head p { font-size: 14px; color: var(--ink-soft); max-width: 24em; text-align: right; }
.bgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.bcard { background: #FBF8F0; border: 1px solid var(--rule); border-radius: 3px; padding: 0 0 18px; display: flex; flex-direction: column; }
.bcard .bimg { position: relative; overflow: hidden; aspect-ratio: 1 / 1; }
.bcard .bimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bcard .bimg .tag {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  background: var(--butter); border-radius: 100px; padding: 5px 12px;
}
.bcard h4 { font-family: 'Garamond Cond', serif; font-weight: 400; font-size: 21px; line-height: 1.1; padding: 16px 16px 0; }
.bcard > p { font-size: 12.5px; color: var(--ink-soft); padding: 6px 16px 14px; flex: 1; }
.bcard .brow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; }
.bcard .price { font-weight: 600; font-size: 14px; }
.bcard .btn.add { padding: 8px 14px; font-size: 11px; white-space: nowrap; }
.bcard .btn.add[hidden] { display: none; }
.bcard .btn[disabled] { opacity: .4; pointer-events: none; }
.stepper { display: flex; align-items: center; gap: 2px; border: 1px solid var(--ink); border-radius: 100px; }
.stepper[hidden] { display: none; }
.stepper b { min-width: 26px; text-align: center; font-size: 14px; }
.stepper button {
  width: 30px; height: 30px; border: 0; background: none; font-size: 16px; line-height: 1;
  cursor: pointer; color: var(--ink); border-radius: 100px;
}
.stepper button:hover { background: var(--cream-deep); }
.stepper button[disabled] { opacity: .3; cursor: default; }
.packbar {
  position: sticky; bottom: 14px; z-index: 5;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin-top: 28px; padding: 14px 18px;
  background: var(--cream); border: 1px solid var(--ink); border-radius: 100px;
  box-shadow: 0 14px 34px rgba(38,34,27,.14);
}
.slots { display: flex; gap: 8px; }
.slot {
  width: 46px; height: 46px; border: 1px dashed var(--rule-blue); border-radius: 50%;
  overflow: hidden; background: #FBF8F0;
}
.slot.filled { border: 1px solid var(--ink); }
.slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.packsum { display: flex; flex-direction: column; margin-left: auto; text-align: right; }
.packsum .ptotal { font-size: 18px; }
.packsum .pcount { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.packbar .checkout[disabled] { opacity: .45; }
.builder-note { margin-top: 16px; font-size: 12px; color: var(--ink-soft); }
.builder-note.hot { color: var(--ink); font-weight: 600; }

/* ---- brand squiggle accent (from the pouch cream-squeeze) ---- */
.squig { display: block; width: 84px; height: auto; color: var(--blue); margin-bottom: 16px; }
.squig.center { margin-left: auto; margin-right: auto; }

/* ---- retail line vs foodservice line (trade page) ---- */
.line-formats { max-width: 1340px; margin: 0 auto; padding: 10px 40px 40px; }
.format-block { border-top: 1px solid var(--rule); padding: 60px 0 66px; }
.format-block h3 { font-family: 'Garamond Cond', serif; font-weight: 400; font-size: clamp(30px, 3vw, 44px); line-height: 1.1; margin: 14px 0 14px; }
.format-block > p { max-width: 44em; color: #3D372C; }
.format-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 36px; }
.format-grid figure { background: #FBF8F0; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; text-align: center; }
.format-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.format-grid figcaption { padding: 12px 10px 14px; }
.format-grid figcaption b { display: block; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.format-grid figcaption span { display: block; font-size: 11px; color: var(--ink-soft); letter-spacing: .06em; margin-top: 3px; }
.format-grid.chubs { grid-template-columns: repeat(3, 1fr); }
.format-grid.chubs img { aspect-ratio: 4 / 3; }
.format-note { font-size: 12px; color: var(--ink-soft); margin-top: 22px; max-width: 44em; }
.format-spec { list-style: none; max-width: 34em; margin-top: 30px; }
.format-spec li { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.format-spec li:first-child { border-top: 1px solid var(--rule); }
.format-spec li span { font-size: 12px; color: var(--ink-soft); letter-spacing: .08em; white-space: nowrap; }

/* ---- store finder embed (where-to-buy) ---- */
.destini { max-width: 1240px; margin: 0 auto; padding: 30px 40px 100px; }
.destini .label { display: block; margin-bottom: 18px; }

@media (max-width: 900px) {
  .compare .cards { grid-template-columns: 1fr; }
  .compare .vs { padding: 20px 0; }
  .compare .vs span { width: 48px; height: 48px; font-size: 24px; }
  .compare .inner { padding: 70px 20px; }
  .faq { padding: 10px 20px 80px; }
  .recipe:nth-of-type(even) .inner .img { order: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  html { scroll-behavior: auto; }
  .hero-film video { display: none; }
  .hero-film { background: url('../img/july_garden_table.jpg') center / cover no-repeat; }
}

/* ---- mobile ---- */
@media (max-width: 900px) {
  nav.site { padding: 14px 20px; }
  .nav-left, .nav-right .link { display: none; }
  .nav-right { gap: 16px; }
  nav.site .btn { white-space: nowrap; padding: 9px 18px; font-size: 12px; }
  .nav-burger { display: block; }
  .nav-toggle:checked ~ .mobile-menu {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cream); border-bottom: 1px solid var(--rule); padding: 10px 20px 24px; gap: 2px;
  }
  .mobile-menu a { font-size: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .mobile-menu a:last-child { border-bottom: 0; }

  .hero-home .inner { grid-template-columns: 1fr; padding: 44px 20px 56px; text-align: left; }
  .hero-home .cup img { max-height: 340px; }
  .hero-home .cta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
  .hero-home .cta .btn + .btn { margin-left: 0; }

  .hero-film .inner { min-height: 74vh; padding: 110px 20px 44px; }
  .claimsbar { padding: 20px 16px; }
  .claims { gap: 8px; }
  .claims span { font-size: 10px; padding: 6px 12px; letter-spacing: .1em; }
  .hero-film .cta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
  .hero-film .cta .btn + .btn { margin-left: 0; }
  .gallery3 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .gallery3::-webkit-scrollbar { display: none; }
  .gallery3 img { flex: 0 0 78vw; width: 78vw; height: 96vw; scroll-snap-align: center; }

  .page-hero { padding: 56px 20px 40px; }
  .proof { padding: 44px 20px 50px; }
  .proof-row { gap: 10px 32px; }
  .creed, .press, .lineup, .cta-band { padding-left: 20px; padding-right: 20px; }
  .letter { grid-template-columns: 1fr; padding: 20px 20px 70px; }
  .recipe .inner { grid-template-columns: 1fr; }
  .grid3 { grid-template-columns: 1fr; }
  .lineup-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .lineup-head p { text-align: left; }
  .sku .inner { grid-template-columns: 1fr; padding: 48px 20px; }
  .sku .visual { position: static; min-height: 0; }
  .sku .visual.photo { position: relative; }
  .sku .visual-stack { position: static; grid-template-columns: 1fr 1fr; }
  .press .minis { grid-template-columns: 1fr; }
  .press-wall { grid-template-columns: 1fr 1fr; padding-left: 20px; padding-right: 20px; }
  .destini { padding-left: 20px; padding-right: 20px; }
  .find { padding: 70px 20px; }
  .find .inner { grid-template-columns: 1fr; }
  .locator, .ask, .trade-points, .contacts, .story-photos { padding-left: 20px; padding-right: 20px; }
  .store-grid { grid-template-columns: 1fr; gap: 30px; }
  .ask { grid-template-columns: 1fr; }
  .trade-points { grid-template-columns: 1fr; }
  .line-formats { padding-left: 20px; padding-right: 20px; }
  .format-grid { grid-template-columns: 1fr 1fr; }
  .format-grid.chubs { grid-template-columns: 1fr; }
  .builder { padding-left: 20px; padding-right: 20px; }
  .builder-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .builder-head p { text-align: left; }
  .bgrid { grid-template-columns: 1fr 1fr; }
  .packbar { border-radius: 22px; gap: 12px; }
  .packsum { margin-left: 0; text-align: left; }
  .packbar .checkout { width: 100%; }
  .trade-gate .inner { grid-template-columns: 1fr; padding: 56px 20px; }
  .presskit .inner { grid-template-columns: 1fr; padding: 56px 20px; }
  .contacts { grid-template-columns: 1fr; }
  .contact-card p { min-height: 0; }
  .story-photos { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  footer.site { padding: 50px 20px 30px; }
}