/* Shared look for every page: tokens, header, menu, buttons, page hero, footer. */
:root{--bg:#0e1a14;--bg2:#15241c;--ink:#efe8dc;--mute:#a7b0a4;--moss:#a8c79f;--gold:#cdae72;--gold-deep:#76632a;--hh:128px;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img,video{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.big{font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.86}
.it{font-family:"Bodoni Moda",serif;font-style:italic;font-weight:500;text-transform:none;letter-spacing:-.01em;color:var(--gold)}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--moss)}
.wrap{padding-inline:clamp(16px,4vw,56px)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* soft cross-fade between pages; the header stays put */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.6s;animation-timing-function:var(--ease)}
header{view-transition-name:site-header}
header.solid{background:var(--bg)}


header{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(16px,4vw,56px)}
header{gap:10px}
nav.desk{margin-left:auto}
/* header buttons match: beats the later .btn and [data-menu] rules */
header .hcta,header [data-menu]{padding:12px 20px;font-size:14px;line-height:1.2}
html{scroll-behavior:smooth}
#contact-form{scroll-margin-top:calc(var(--hh) + 8px)}
/* --hh is the header height; sticky bars and stacked cards sit just below it */
/* The original logo (black lettering, yellow, red ring, TM) from the full-size Meat Treat Logo.png, at 3x its display
   size so it is sharp. It sits on cream like before, in a rounded tile rather than a circle so nothing is cut off. */
header .logo{display:block;flex:none;padding:6px 8px;border-radius:24px;background:var(--ink)}
header .logo img{display:block;width:auto;height:84px}
@media (max-width:760px){:root{--hh:98px}header{padding-block:12px}header .logo{padding:5px 6px;border-radius:18px}header .logo img{height:64px}}
nav.desk{display:flex;gap:6px;padding:6px;border-radius:99px;background:#0e1a14b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
nav.desk a{padding:8px 16px;border-radius:99px;font-size:14px;transition:background .5s}
@media (hover:hover){nav.desk a:hover{background:#efe8dc1a}}
nav.desk a[aria-current]{background:var(--ink);color:var(--bg)}
[data-menu]{display:none;padding:12px 20px;border:0;border-radius:99px;background:var(--ink);color:var(--bg);box-shadow:0 0 0 1px #0e1a1426,0 4px 16px #0e1a1426;font:500 14px Archivo;cursor:pointer}
.menu{position:fixed;z-index:39;inset:auto 12px 12px;padding:24px;border-radius:24px;background:var(--ink);color:var(--bg);display:grid;gap:2px;transform:translateY(calc(100% + 24px));visibility:hidden;transition:transform .4s var(--ease),visibility 0s .4s}
.menu a{font-weight:800;font-size:32px;text-transform:uppercase;letter-spacing:-.02em;padding:8px 4px;border-bottom:1px solid #0e1a141a}
.menu a[aria-current]{color:var(--gold-deep)}
/* things that answer a tap settle in 0.4s (Apple's range); scroll motion elsewhere stays slow and weighty */
.menu-open .menu{transform:none;visibility:visible;transition:transform .4s var(--ease)}
@media (max-width:760px){nav.desk{display:none}[data-menu]{display:block}.hcta{margin-left:auto}}

.btn{display:inline-flex;gap:10px;align-items:center;padding:15px 24px;border:0;border-radius:99px;background:var(--gold);color:var(--bg);font-weight:500;cursor:pointer;transition:transform .6s var(--ease),background .6s}
@media (hover:hover){.btn:hover{transform:translateY(-2px);background:#dcc28e}}
/* Press feedback: things answer the instant a finger or mouse goes down (it replaces Safari's grey tap flash) */
html{-webkit-tap-highlight-color:transparent}
.btn:active,[data-menu]:active,.seg button:active,.chips a:active,.close:active,nav.desk a:active,.menu a:active,[data-copy]:active{transform:scale(.96);transition:transform .1s ease-out}
.card:active .ph,a.sheet:active,a.range:active{transform:scale(.98);transition:transform .1s ease-out}
/* sideways-scrolling rows: soft fade where more is hidden (classes set by motion.js) */
.more-right{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent)}
.more-left{-webkit-mask-image:linear-gradient(to right,transparent,#000 48px);mask-image:linear-gradient(to right,transparent,#000 48px)}
.more-left.more-right{-webkit-mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
/* Touch screens: every control is at least 44pt tall, Apple's minimum for a finger */
@media (pointer:coarse){
  header .hcta,header [data-menu],.seg button,.chips a{min-height:44px}
  .seg button,.chips a{display:inline-flex;align-items:center}
  .cform input,.cform select{min-height:44px}
}
.btn.ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px #efe8dc55}
@media (hover:hover){.btn.ghost:hover{background:#efe8dc12}}

/* slow marquee */
.band{padding:36px 0;overflow:hidden;white-space:nowrap;border-block:1px solid #efe8dc14}
.band div{display:inline-block;animation:slide 60s linear infinite;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(36px,6vw,84px);color:#efe8dc2e}
.band span{font-family:"Bodoni Moda",serif;font-style:italic;font-weight:500;text-transform:none;color:var(--gold)}
@keyframes slide{to{transform:translateX(-50%)}}
/* motion.js adds .off to [data-pause] blocks that are off screen, so their endless animations stop costing anything */
.band.off div,.hills.off::before{animation-play-state:paused}

/* Scroll scenes: where the browser can, it drives --p itself, in step with the scroll (no script, no lag behind
   the finger). The section's "contain" range is exactly the stretch where it is pinned. motion.js covers the rest. */
@property --p{syntax:"<number>";inherits:true;initial-value:0}
@keyframes scene{from{--p:0}to{--p:1}}
@supports (animation-timeline:view()){
  [data-scene]{animation:scene linear both;animation-timeline:view();animation-range:contain 0% contain 100%}
}

/* sentence that fills in word by word (spans carry --i) */
.words{height:200vh}
.words .stick{position:sticky;top:0;height:100svh;display:grid;place-items:center;padding:0 clamp(16px,8vw,140px)}
.words p{font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(32px,4.8vw,76px);line-height:1.02}
.words span{opacity:max(.12, min(1, var(--p,0) * 14 - var(--i)))}

/* PAGE HERO for inner pages: the photo grows from a card to full screen while the title slides together */
.phero{height:220vh}
.phero .stick{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
/* scroll effects use only transform and opacity, which phones run on the graphics chip without re-laying out the page */
.phero .ph{position:absolute;inset:0;border-radius:20px;overflow:hidden;transform:scale(calc(.42 + var(--p,0) * .58));will-change:transform}
.phero .ph img{transform:scale(calc(1.2 - var(--p,0) * .2));will-change:transform}
.phero .ph::after{content:"";position:absolute;inset:0;background:#000;opacity:calc(.15 + var(--p,0) * .45);will-change:opacity}
.phero h1{position:relative;font-size:clamp(48px,9vw,160px);text-align:center;pointer-events:none;padding:0 12px}
.phero h1 span{display:block;will-change:transform}
.phero h1 span:first-child{transform:translateX(calc((1 - var(--p,0)) * -24vw))}
.phero h1 span:last-child{transform:translateX(calc((1 - var(--p,0)) * 24vw))}
.phero .lede{position:absolute;bottom:8vh;max-width:52ch;text-align:center;padding:0 16px;font-size:clamp(17px,1.5vw,20px);opacity:calc(var(--p,0) * 3 - 1.6);will-change:opacity}
@media (max-width:760px){
  .phero .ph{transform:scale(calc(.72 + var(--p,0) * .28))}
  .phero h1{font-size:clamp(36px,11vw,60px)}
  .phero h1 span:first-child{transform:translateX(calc((1 - var(--p,0)) * -6vw))}
  .phero h1 span:last-child{transform:translateX(calc((1 - var(--p,0)) * 6vw))}
}

/* PEPPER: scrubbed zoom, words slide apart */
.pepper{height:260vh}
.pepper .stick{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.pepper .ph{position:absolute;inset:0;border-radius:20px;overflow:hidden;transform:scale(calc(.36 + var(--p,0) * .64));will-change:transform}
.pepper .ph::after{content:"";position:absolute;inset:0;background:#000;opacity:calc(var(--p,0) * .55);will-change:opacity}
@media (max-width:760px){.pepper .ph{transform:scale(calc(.62 + var(--p,0) * .38))}}
.pepper h2{position:relative;font-size:clamp(48px,9vw,160px);text-align:center;pointer-events:none}
.pepper h2 span{display:block;will-change:transform}
.pepper h2 span:first-child{transform:translateX(calc((1 - var(--p,0)) * -30vw))}
.pepper h2 span:last-child{transform:translateX(calc((1 - var(--p,0)) * 30vw))}
.pepper p{position:absolute;bottom:8vh;max-width:44ch;text-align:center;padding:0 16px;opacity:calc(var(--p,0) * 3 - 2);will-change:opacity}


/* closing panel with a call to action */
.stores{background:var(--ink);color:var(--bg);padding-block:14vh;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:40px;border-radius:32px 32px 0 0}
.stores h2{font-size:clamp(44px,11vw,190px)}
.stores .it{color:var(--gold-deep)}
.stores .btn{background:var(--bg);color:var(--ink)}
.stores .btn.ghost{background:none;color:var(--bg);box-shadow:inset 0 0 0 1px #0e1a1455}

footer{background:var(--ink);color:#4a5a50;padding-block:36px;font-size:14px;line-height:1.7;border-top:1px solid #0e1a141a}
footer .fbase{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px}
footer .addr{color:var(--bg)}
footer .legal{text-align:right}
@media (max-width:860px){footer .legal{text-align:left}}
footer :focus-visible{outline-color:var(--bg)}

/* contact form (Contact us page, on cream) */
.cform{display:grid;gap:22px}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cform .fld{display:grid;gap:6px}
.cform label{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#4a5a50}
.cform input,.cform select,.cform textarea{width:100%;font:inherit;font-size:17px;color:var(--bg);background:transparent;border:0;border-bottom:1.5px solid #0e1a1440;border-radius:0;padding:10px 0;transition:border-color .4s}
.cform select{appearance:none;-webkit-appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%230e1a14' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 2px center no-repeat;padding-right:24px}
.cform textarea{resize:vertical;min-height:110px}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-bottom-color:var(--bg)}
.cform [aria-invalid=true]{border-bottom-color:var(--gold-deep);border-bottom-width:2px}
.cform .err{color:var(--bg);font-size:14px;padding-left:12px;border-left:2px solid var(--gold-deep)}
.cform .err:empty{display:none}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform .send{justify-self:start;background:var(--bg);color:var(--ink)}
@media (hover:hover){.cform .send:hover{background:#1d3127}}
.cform .send:disabled{opacity:.6;cursor:wait;transform:none}
.cmsg{padding:16px 18px;border-radius:12px;font-size:16px}
.cmsg.fail{background:#0e1a140f;color:var(--bg);border-left:3px solid var(--gold-deep)}
.cmsg.fail a{text-decoration:underline}
.cmsg.ok{background:#0e1a140f;color:var(--bg);font-size:18px;padding:clamp(24px,4vw,44px)}
.cmsg.ok h2{font-size:clamp(40px,5vw,72px);margin-bottom:14px}
.cmsg.ok h2 .it{color:var(--gold-deep)}
@media (max-width:520px){.cform .row{grid-template-columns:1fr}}

[data-reveal]{opacity:0;transform:translateY(40px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .band div{animation:none}
  [data-scene]{animation:none;--p:1}
  .phero,.words,.pepper{height:auto}.phero .stick,.words .stick,.pepper .stick{position:relative}
  .pepper h2 span{transform:none}.pepper p{opacity:1}
  .phero .ph,.pepper .ph{transform:none}.phero h1 span{transform:none}.phero .lede{opacity:1}
  [data-reveal]{opacity:1;transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* Increase Contrast (iPhone/Mac setting): solid surfaces, clear outlines, brighter secondary text and lines.
   !important because each page's own styles load after this file. */
@media (prefers-contrast:more){
  :root{--mute:#d5dbd0}
  .seg,.search input,.btn.ghost,.chips a,.sizes span,.cert{box-shadow:inset 0 0 0 1.5px currentColor!important}
  .value,.step,.area,.value:last-child{border-color:#efe8dc99!important}
  .cform input,.cform select,.cform textarea{border-bottom-color:var(--bg)!important}
  .band{border-color:#efe8dc66}
  .more-left,.more-right{-webkit-mask-image:none!important;mask-image:none!important}
}
/* Reduce Transparency, and Increase Contrast too: no see-through blur behind the nav or the product pop-up */
@media (prefers-contrast:more),(prefers-reduced-transparency:reduce){
  nav.desk{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px #efe8dc66}
  dialog::backdrop{background:#050a07eb!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}