/* Pure Pasture Meats — "Freezer Planner" look with the Ear Tag photo hero.
   Butter yellow, deep teal, cocoa. Bricolage Grotesque for headings, Figtree for text.
   Mobile first: everything is designed at 375px, then widened. */
:root {
  --butter: #F7E7A4; --butter-2: #FBF3D2; --teal: #0E4A4A; --teal-2: #156262; --teal-soft: #5EA097; --mint: #CFE6DC;
  --cocoa: #2E211A; --soft: #5B4D42; --white: #FFFDF6; --line: #E8DDB8;
  --hero-rgb: 14, 40, 40; --accent-rgb: 247, 231, 164;   /* hero overlay tint, accent as r,g,b */
  --on-dark: #D6E8E1; --mint-line: #B9D8CA; --foot-text: #DCD2C3; --foot-line: #4A3A2F;
  --s: #156262; --r: #B4541F; --l: #7A4E8C; --g: #2E211A;   /* cut-type dots */
  --display: "Bricolage Grotesque", system-ui, sans-serif; --sans: "Figtree", system-ui, sans-serif;
  --radius: 24px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { background: var(--white); color: var(--cocoa); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }
a[href^="tel:"], a[href^="sms:"] { white-space: nowrap; }
[hidden] { display: none !important; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 600px) { .wrap { padding: 0 24px; } }
.skip { position: absolute; left: -999px; top: 8px; background: var(--teal); color: var(--white); padding: 8px 14px; border-radius: 8px; z-index: 99; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--teal-soft); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
h2 { font-size: clamp(34px, 5vw, 56px); margin: 8px 0 12px; }
.kicker { display: inline-block; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-2); }
.lead { color: var(--soft); max-width: 36em; }
.section { padding: 52px 0; }
@media (min-width: 560px) { .section { padding: 64px 0; } }
@media (min-width: 900px) { .section { padding: 88px 0; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--teal); color: var(--white); text-decoration: none; font-weight: 700; font-size: 16px; padding: 14px 22px; border-radius: 14px; border: 2px solid var(--teal); cursor: pointer; box-shadow: 0 4px 0 var(--cocoa); transition: transform .1s, box-shadow .1s; }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--cocoa); }
.btn-small { padding: 9px 16px; font-size: 15px; box-shadow: none; }
.btn-butter { background: var(--butter); border-color: var(--butter); color: var(--cocoa); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); box-shadow: none; }
.btn-outline { background: var(--white); color: var(--cocoa); border-color: var(--cocoa); box-shadow: none; }
.btn-block { display: flex; width: 100%; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--white); border-bottom: 2px solid var(--line); }
.site-header.on-photo { position: relative; background: transparent; border: 0; color: var(--white); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 19px; text-decoration: none; white-space: nowrap; }
.brand .brand-logo { height: 56px; width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.nav-links { display: none; gap: 22px; font-weight: 600; font-size: 15px; }
.nav-links a { text-decoration: none; }
.nav-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-phone { display: none; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; text-decoration: none; }
.on-photo .btn-small { background: var(--butter); border-color: var(--butter); color: var(--cocoa); }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 2px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
/* Menu button: a single tidy ring for keyboard users only, never after a tap or click. */
.icon-btn:focus:not(:focus-visible) { outline: none; }
.icon-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.menu-btn[aria-expanded="true"] { background: var(--white); border-color: var(--white); color: var(--teal); }
.site-header:not(.on-photo) .menu-btn[aria-expanded="true"] { background: var(--teal); border-color: var(--teal); color: var(--white); }
.menu-btn .i-close { display: none; }
.menu-btn[aria-expanded="true"] .i-open { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }
.menu-panel { display: grid; gap: 4px; padding: 8px 16px 20px; background: var(--white); color: var(--cocoa); border-bottom: 2px solid var(--line); }
.on-photo .menu-panel { position: absolute; left: 0; right: 0; top: 100%; box-shadow: 0 12px 24px rgba(0,0,0,.2); }
.menu-panel a:not(.btn) { padding: 12px 0; font-weight: 700; font-size: 18px; text-decoration: none; border-bottom: 1px solid var(--line); }
.menu-panel .btn { margin-top: 12px; }
/* Phones: no room for logo + name + Reserve + menu, so the logo stands in for the name
   (still read out by screen readers). */
@media (max-width: 400px) {
  .brand .brand-logo { height: 52px; }
  .brand .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 1000px) {
  .nav-links, .nav-phone { display: flex; }
  .menu-btn, .menu-panel { display: none !important; }
}

/* ---------- photo hero ---------- */
.photo-hero { position: relative; min-height: min(92vh, 820px); color: var(--white); display: flex; flex-direction: column; }
.photo-hero > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.photo-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(var(--hero-rgb),.78) 0%, rgba(var(--hero-rgb),.55) 40%, rgba(20,16,12,.92) 100%); }
.photo-hero > *:not(picture) { position: relative; z-index: 1; }
/* The header (and its drop-down menu) must sit above the hero text, which
   comes later in the page and would otherwise paint over the open menu. */
.photo-hero > .site-header { z-index: 5; }
.hero-copy { margin-top: auto; padding-top: 40px; padding-bottom: 104px; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.photo-hero .kicker { color: var(--butter); }
.photo-hero h1 { font-size: clamp(52px, 10vw, 128px); line-height: .92; margin: 12px 0 18px; }
.photo-hero h1 em { font-style: normal; color: var(--butter); }
.photo-hero p { max-width: 32em; font-size: 18px; color: #EFEADF; margin-bottom: 24px; }
.data { display: grid; grid-template-columns: 1fr 1fr; margin-top: 36px; border-top: 1px solid rgba(255,255,255,.35); }
.data div { padding: 14px 12px 4px 0; font-size: 14px; font-weight: 600; color: #E3DED2; }
.data b { display: block; font-family: var(--display); font-weight: 800; font-size: 36px; line-height: 1; color: var(--white); }
@media (min-width: 700px) { .data { grid-template-columns: repeat(4, 1fr); } .hero-copy { padding-bottom: 120px; } }

/* ---------- planner ---------- */
.planner-wrap { position: relative; z-index: 2; margin-top: -64px; }
.planner-block { background: var(--butter); border-radius: 32px; padding: 28px 20px; display: grid; gap: 28px; }
.planner-block h2 { font-size: clamp(36px, 5.4vw, 64px); }
.planner-block > div > p { color: var(--soft); font-size: 18px; }
.hl { background: var(--white); padding: 0 .14em; border-radius: 12px; display: inline-block; transform: rotate(-1.5deg); }
.planner { background: var(--white); border: 2px solid var(--cocoa); border-radius: var(--radius); padding: 22px; box-shadow: 0 6px 0 var(--cocoa); }
.planner h3 { font-size: 22px; }
.q { font-weight: 700; font-size: 15px; margin: 16px 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { font-weight: 600; font-size: 15px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--cocoa); background: var(--white); color: var(--cocoa); cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--white); }
.result { margin-top: 20px; background: var(--mint); border-radius: 18px; padding: 16px; display: grid; gap: 12px; }
.result-cow { width: 120px; }
.result small { font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.result b { display: block; font-family: var(--display); font-size: 30px; line-height: 1.05; }
.result p { font-size: 14px; color: var(--soft); }
/* Phones: the whole planner (both questions and the answer) fits on one
   screen between the sticky header and the bottom bar (~600px). */
@media (max-width: 559px) {
  .planner-block { padding: 18px 14px 16px; gap: 14px; border-radius: 26px; }
  .planner-block h2 { font-size: 26px; line-height: 1.1; margin-top: 4px; }
  .planner-block > div:first-child > p { display: none; }
  .planner { padding: 14px 14px 16px; }
  .planner h3 { display: none; }
  .q { font-size: 14px; line-height: 1.3; margin: 0 0 8px; }
  .chips + .q { margin-top: 12px; }
  .chips { flex-wrap: nowrap; gap: 6px; }
  .chips button { flex: 1; padding: 8px 4px; font-size: 15px; }
  .result { margin-top: 14px; padding: 12px; gap: 10px; grid-template-columns: 84px 1fr; align-items: center; }
  .result-cow { width: 84px; height: auto; }
  .result small { font-size: 11px; }
  .result b { font-size: 22px; white-space: nowrap; }
  .result p { font-size: 13px; line-height: 1.35; }
  .result .btn { grid-column: 1 / -1; padding-top: 12px; padding-bottom: 12px; }
}
@media (min-width: 900px) {
  .planner-block { grid-template-columns: 1fr 1.05fr; align-items: center; padding: 56px; gap: 48px; }
  .planner { padding: 28px; }
  .result { grid-template-columns: auto 1fr; align-items: center; }
  .result .btn { grid-column: 1 / -1; }
}

/* ---------- trust strip ---------- */
.strip { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; padding-top: 28px; padding-bottom: 8px; font-weight: 700; font-size: 15px; }
.strip li { display: flex; align-items: center; gap: 8px; }
.strip svg { color: var(--teal-2); }

/* ---------- claims ticker (TRUST_TICKER in build.py) ----------
   A slim, slightly tilted ribbon that slowly scrolls the claims across the
   screen. Delete this block and set TRUST_TICKER = False to undo. */
.ticker-wrap { overflow: hidden; padding: 14px 0 10px; margin-top: 14px; }  /* clips the tilted corners */
.ticker { position: relative; margin: 0 -8px; overflow: hidden; background: var(--teal); color: var(--butter);
          transform: rotate(-1.5deg); border-block: 2px solid var(--cocoa); box-shadow: 0 4px 0 var(--cocoa); }
.ticker-track { display: flex; width: max-content; animation: ticker 80s linear infinite; }
.ticker ul { list-style: none; display: flex; flex: none; }
.ticker li { display: flex; align-items: center; gap: 8px; padding: 11px 22px; white-space: nowrap;
             font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.ticker li svg { color: var(--butter); flex: none; }
.ticker li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--butter); opacity: .5; margin: 0 22px 0 -22px; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; width: auto; }
  .ticker ul { flex-wrap: wrap; justify-content: center; }
  .ticker ul[aria-hidden] { display: none; }
}

/* ---------- share cards ---------- */
.cards { display: grid; gap: 18px; margin-top: 36px; align-items: start; }
@media (min-width: 560px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .cards { grid-template-columns: repeat(4, 1fr); } }
.card { position: relative; background: var(--white); border: 2px solid var(--cocoa); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s, transform .15s; }
.card:hover { transform: translateY(-3px); }
.card.is-pick { box-shadow: 0 0 0 4px var(--teal); }
.card-art { display: block; background: var(--butter-2); border-bottom: 2px solid var(--cocoa); padding: 26px 18px 14px; }
.card-art img { margin: 0 auto; max-height: 150px; width: auto; }
.badge-pill { position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--butter); border: 2px solid var(--cocoa); font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.card .body { padding: 18px; display: grid; gap: 10px; }
.card h3 { font-size: 30px; }
.card h3 a { text-decoration: none; }
.card h3 small { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--soft); letter-spacing: 0; }
.who { font-size: 14px; color: var(--soft); margin-top: -6px; }
.price { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1.1; }
.price small { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--soft); }
.freezer { display: flex; align-items: flex-end; gap: 4px; min-height: 30px; }
.freezer i { width: 12px; height: 30px; border-radius: 3px; background: var(--teal); }
.freezer i:not(.full) { height: calc(30px * var(--h) / 100); }
.freezer em { font-style: normal; font-size: 13px; color: var(--soft); margin-left: 6px; line-height: 1.3; }
.facts { list-style: none; font-size: 14px; border-top: 1px dashed var(--line); padding-top: 8px; }
.facts li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; background: transparent; border: 0; border-top: 1px dashed var(--line); font-weight: 700; color: var(--teal-2); cursor: pointer; padding-top: 6px; }
.toggle svg { transition: transform .2s; }
.toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.section-foot { margin-top: 24px; font-size: 15px; color: var(--soft); }

/* what's inside */
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; font-weight: 600; color: var(--soft); margin-bottom: 10px; }
.legend li, .cuts li { display: flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot.s { background: var(--s); } .dot.r { background: var(--r); } .dot.l { background: var(--l); } .dot.g { background: var(--g); }
.cuts { list-style: none; font-size: 14px; }
.cuts li { padding: 5px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cuts li b { flex: 1; }
.cuts li span:last-child { color: var(--soft); }
.plus { font-size: 14px; margin-top: 10px; }
.note { font-size: 13px; color: var(--soft); margin-top: 6px; }

/* ---------- steps ---------- */
.steps { background: var(--teal); color: var(--white); border-radius: 32px; padding: 32px 20px; }
.steps .kicker { color: var(--butter); }
.steps ol { list-style: none; display: grid; gap: 14px; margin-top: 24px; }
.steps li { background: var(--teal-2); border-radius: 20px; padding: 20px; }
.steps .n { width: 40px; height: 40px; border-radius: 50%; background: var(--butter); color: var(--cocoa); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 20px; margin-bottom: 12px; }
.steps h3 { font-size: 21px; margin-bottom: 6px; }
.steps p { font-size: 15px; color: var(--on-dark); }
/* Phones: number beside the text, so four steps fit on about one screen. */
@media (max-width: 599px) {
  .steps ol { gap: 10px; margin-top: 18px; }
  .steps li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 16px; }
  .steps .n { grid-row: span 2; margin-bottom: 0; }
  .steps h3 { font-size: 19px; margin-bottom: 2px; }
}
@media (min-width: 600px) { .steps ol { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .steps { padding: 56px; } .steps ol { grid-template-columns: repeat(4, 1fr); } }

/* ---------- story ---------- */
.story { display: grid; gap: 40px; align-items: center; }
.story .pics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 28px; }
.story .pics img { border-radius: 20px; aspect-ratio: 3 / 4; object-fit: cover; border: 2px solid var(--cocoa); width: 100%; }
.story .pics picture:last-child img { transform: translateY(28px); }
.story p { color: var(--soft); margin-bottom: 12px; }
.signature { display: block; font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--teal-2); margin-top: 8px; }
@media (min-width: 900px) { .story { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* ---------- reviews ---------- */
.review { background: var(--butter-2); border: 2px solid var(--line); border-radius: 22px; padding: 22px; }
.review.alt { background: var(--mint); border-color: var(--mint-line); }
.stars { color: var(--teal); font-size: 18px; letter-spacing: 2px; }
.stars .off { color: #C9BFA6; }
.review h3 { font-size: 21px; margin: 10px 0 6px; }
.review blockquote { color: var(--cocoa); }
.review figcaption { margin-top: 14px; font-size: 14px; color: var(--soft); display: grid; gap: 2px; }
.review figcaption b { color: var(--cocoa); }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; gap: 28px; }
.faq-layout > div:first-child p { color: var(--soft); }
.faq details { border-bottom: 2px solid var(--line); }
.faq summary { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.2; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 48px; padding: 14px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; color: var(--teal-2); transition: transform .2s; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq p { color: var(--soft); margin: -4px 0 0; padding-bottom: 16px; }
@media (min-width: 900px) { .faq-layout { grid-template-columns: 1fr 1.6fr; gap: 56px; } }

/* ---------- reserve ---------- */
#reserve { padding-bottom: 64px; }
.reserve { background: var(--butter); border-radius: 32px; padding: 28px 20px; display: grid; gap: 28px; }
.checks { list-style: none; display: grid; gap: 10px; margin: 18px 0; }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks svg { color: var(--teal-2); flex: none; margin-top: 3px; }
.ask { color: var(--soft); }
.form-card { background: var(--white); border: 2px solid var(--cocoa); border-radius: var(--radius); padding: 22px; display: grid; gap: 14px; align-content: start; }
.text-card h3 { font-size: 26px; }
.text-card p { color: var(--soft); }
.field { display: grid; gap: 6px; border: 0; }
.field label, .field legend { font-weight: 700; font-size: 15px; }
.opt, .hint { font-weight: 400; font-size: 13px; color: var(--soft); }
input, select, textarea { font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--white); color: var(--cocoa); width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); }
.pair { display: grid; gap: 14px; }
.share-summary { display: flex; gap: 12px; align-items: center; background: var(--butter-2); border-radius: 14px; padding: 10px; }
.share-summary span { display: block; font-size: 13px; color: var(--soft); }
.gotcha { position: absolute; left: -9999px; }
.form-error { color: #9B1C1C; font-weight: 600; }
.form-alt { text-align: center; font-size: 14px; color: var(--soft); }
@media (min-width: 600px) { .pair { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .reserve { grid-template-columns: 1fr 1.2fr; padding: 56px; gap: 48px; } }

/* ---------- product (share) pages ---------- */
.product { padding: 20px 0 40px; }
.crumbs { font-size: 14px; color: var(--soft); margin-bottom: 18px; }
.crumbs a { color: var(--teal-2); }
.product-grid { display: grid; gap: 28px; align-items: center; }
.product-art { position: relative; background: var(--butter); border: 2px solid var(--cocoa); border-radius: 32px; padding: 48px 24px 28px; }
.product-art img { margin: 0 auto; }
.product-copy { display: grid; gap: 14px; }
.product-copy h1 { font-size: clamp(38px, 5.4vw, 60px); }
.product-copy > p { color: var(--soft); }
.chips-list, .chips { list-style: none; }
ul.chips { display: flex; flex-wrap: wrap; gap: 8px; }
ul.chips li { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; background: var(--mint); border-radius: 999px; padding: 6px 12px; }
.text-us { font-size: 15px; color: var(--soft); }
.inside-layout { display: grid; gap: 28px; }
.inside-card { background: var(--white); border: 2px solid var(--cocoa); border-radius: var(--radius); padding: 22px; }
.sizes { margin-top: 24px; }
.sizes ul { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.sizes a { display: grid; justify-items: center; gap: 2px; text-decoration: none; background: var(--butter-2); border: 2px solid var(--line); border-radius: 16px; padding: 10px 6px; font-size: 14px; }
.sizes a span { color: var(--soft); }
@media (min-width: 900px) { .product-grid, .inside-layout { grid-template-columns: 1.1fr 1fr; gap: 56px; } .product { padding: 32px 0 56px; } }

/* ---------- simple pages ---------- */
.page { max-width: 760px; margin: 0 auto; padding: 32px 16px 72px; }
.page h1 { font-size: clamp(38px, 6vw, 56px); margin: 10px 0 14px; }
.page h2 { font-size: 26px; margin: 32px 0 10px; }
.page p, .page li { color: var(--soft); margin-bottom: 10px; }
.page ul, .page ol { padding-left: 22px; }
.page .updated { font-size: 14px; }
.page .eyebrow { font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-2); }
.facts-row, .page .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0; border: 0; }
.page .fact { background: var(--butter-2); border-radius: 16px; padding: 14px; display: grid; }
.page .fact strong { font-family: var(--display); font-size: 20px; }
.page .fact span { font-size: 13px; color: var(--soft); }
.callout { background: var(--mint); border-radius: 22px; padding: 22px; margin: 32px 0 20px; }
.callout h2 { margin-top: 0; }
.thanks-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--teal); color: var(--butter); display: grid; place-items: center; }
.arrow-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--teal-2); }

/* ---------- footer ---------- */
.footer { background: var(--cocoa); color: var(--foot-text); padding: 48px 0 96px; font-size: 15px; }
.footer-grid { display: grid; gap: 28px; }
.footer-logo { width: 220px; height: auto; margin-bottom: 14px; }
.footer-brand b { display: block; font-family: var(--display); font-size: 24px; color: var(--white); margin-bottom: 6px; }
.footer-col { display: grid; gap: 0; align-content: start; }
.footer-col a { padding: 10px 0; }
.footer-col .kicker { color: var(--butter); margin-bottom: 4px; }
.footer-addr { font-style: normal; margin-top: 6px; line-height: 1.5; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer .strong { font-weight: 700; color: var(--white); font-size: 18px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--foot-line); font-size: 14px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } .footer { padding-bottom: 48px; } }

/* ---------- floating reserve bar (phones) ---------- */
.float-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--teal); color: var(--white); border-radius: 18px; padding: 10px 10px 10px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .25s, opacity .25s; }
.float-bar .txt { display: grid; font-size: 13px; line-height: 1.3; }
.float-bar b { font-size: 15px; }
.float-bar .btn { background: var(--butter); border-color: var(--butter); color: var(--cocoa); box-shadow: none; padding: 10px 18px; }
.float-bar.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (min-width: 800px) { .float-bar { display: none; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- pork ---------- */
.section.pork { background: var(--mint); }
@media (min-width: 1060px) { .cards.cards-2 { grid-template-columns: 1fr 1fr; max-width: 820px; } }

/* ---------- reviews: dock-style stepping row ----------
   Base (no JS / reduce motion): a plain sideways swipe row.
   site.js adds .is-dock: one review steps into the middle every few seconds,
   full size, with its neighbours scaled down like icons on the macOS dock.
   Mouse over the row and the card under the pointer magnifies instead. */
.reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.marquee-toggle { flex: none; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 2px solid var(--cocoa); background: var(--white); color: var(--cocoa); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.marquee { margin: 24px -16px 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline-offset: 4px; }
.marquee::-webkit-scrollbar { display: none; }
.marquee-track { position: relative; display: flex; align-items: center; gap: 14px; width: max-content; padding: 18px 16px; }
.marquee-track .review { flex: none; width: min(300px, 70vw); scroll-snap-align: center; }
@media (min-width: 1160px) { .marquee { margin-left: calc((1128px - 100vw) / 2); margin-right: calc((1128px - 100vw) / 2); } .marquee-track .review { width: 340px; } }

.marquee.is-dock { overflow: hidden; scroll-snap-type: none; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.is-dock .marquee-track { transition: transform .7s cubic-bezier(.22, .8, .24, 1); will-change: transform; }
.is-dock .marquee-track.no-anim, .is-dock .marquee-track.no-anim .review { transition: none; }
.is-dock .review { transform: scale(.8); opacity: .55; transition: transform .45s cubic-bezier(.22, .8, .24, 1), opacity .45s, box-shadow .45s; }
.is-dock .review.is-near { transform: scale(.9); opacity: .85; }
.is-dock .review.is-active { transform: scale(1); opacity: 1; box-shadow: 0 14px 30px rgba(0,0,0,.12); }
.is-dock.is-hover .review { transition: transform .12s ease-out, opacity .12s; }
@media (prefers-reduced-motion: reduce) { .marquee-toggle { display: none; } }

/* Text button in the bottom bar: Reserve stays the main action, texting is one tap away. */
.fb-text { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; border-radius: 14px; border: 2px solid rgba(var(--accent-rgb),.55); color: var(--butter); }

/* ---------- phones: compact share cards ----------
   Each card has to fit on one phone screen (an iPhone SE with Safari's bars,
   the sticky header and the bottom bar leaves ~400px). Drawing beside the
   name and price, take-home + freezer on one line, ground-beef row and the
   freezer bars dropped (both are in "What's inside"). */
@media (max-width: 559px) {
  .cards { gap: 14px; margin-top: 24px; }
  /* Drawing across the full top of the card; name left, price right under it. */
  .card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; align-content: start; padding: 12px 14px 16px; }
  .card .body { display: contents; }
  .card-art { grid-column: 1 / -1; grid-row: 1; border: 2px solid var(--cocoa); border-radius: 16px; padding: 30px 10px 8px; margin-bottom: 12px; }
  .card-art img { max-height: 150px; width: auto; margin: 0 auto; }
  .card .badge-pill { top: 20px; left: auto; right: 22px; }
  .card h3 { grid-column: 1; grid-row: 2; font-size: 26px; line-height: 1.05; }
  .card h3 small { display: block; font-size: 14px; margin-top: 2px; }
  .card .who { grid-column: 1; grid-row: 3; margin: 2px 0 0; font-size: 13px; line-height: 1.3; }
  .card .price { grid-column: 2; grid-row: 2 / span 2; justify-self: end; text-align: right; font-size: 26px; }
  .card .price .sep { display: none; }
  .card .price small { display: block; font-size: 13px; margin-top: 2px; }
  .card .facts, .card .freezer { grid-row: 5; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
  .card .facts { grid-column: 1; font-size: 13px; }
  .card .facts li { display: grid; gap: 0; padding: 0; }
  .card .facts li + li { display: none; }
  .card .facts b { font-size: 15px; }
  .card .freezer { grid-column: 2; min-height: 0; align-items: flex-start; }
  .card .freezer i { display: none; }
  .card .freezer em { margin: 0; }
  .card .toggle { grid-column: 1 / -1; grid-row: 6; margin-top: 10px; }
  .card .inside { grid-column: 1 / -1; grid-row: 7; }
  .card > .body > .btn { grid-column: 1 / -1; grid-row: 8; margin-top: 4px; }
}

/* Story with a single photo (the client's red cow): one wide frame, no stagger. */
.story .pics.one { grid-template-columns: 1fr; padding-bottom: 0; }
.story .pics.one img { aspect-ratio: 1 / 1; object-position: center 62%; transform: none; }
@media (min-width: 900px) { .story .pics.one img { aspect-ratio: 4 / 5; } }
/* Hero: the client's herd photo is wide; on tall phone screens keep the standing cow in frame. */
.photo-hero > picture img { object-position: 55% center; }

/* Theme: Sage & Oak */
:root { --teal: #2F4A2E; --teal-2: #3E5F3C; --teal-soft: #8FAE7E; --s: #3E5F3C; --butter: #E8C98A; --butter-2: #F5EEDC; --mint: #DFE8D3; --mint-line: #C3D3B3; --cocoa: #26221B; --soft: #575146; --white: #FCFAF4; --line: #E3DCC8; --hero-rgb: 24, 38, 24; --accent-rgb: 232, 201, 138; --on-dark: #DCE7D2; --foot-text: #DDD6C8; --foot-line: #45413A; }