/* =====================================================================
   POTTS' PARTNERSHIP — Editorial / Fine-Dining Experience
   Apple-clean system type + Cormorant serif headlines · no boxes
   ===================================================================== */

@import url('fonts.css');

:root {
  --bg:            #0a0807;
  --bg-2:          #0e0b09;
  --cream:         #f3ece1;
  --cream-dim:     #b9ad9c;
  --muted:         #7e7264;
  --rust:          #c85a30;
  --amber:         #e0a14a;
  --gold:          #d9bd86;
  --green:         #7c8f5e;
  --hair:          rgba(243,236,225,.13);
  --hair-soft:     rgba(243,236,225,.07);

  --ff-display: 'Cormorant Garamond', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --ff-body: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --ease:    cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.76,0,.24,1);

  --maxw: 1280px;
  --pad: clamp(22px, 6vw, 110px);
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff-body);
  background: var(--bg);
  color: var(--cream);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: none;
}
@media (hover: none) { body { cursor: auto; } }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; border: none; background: none; cursor: none; }
ul { list-style: none; }
::selection { background: var(--rust); color: #fff; }

.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ----------  Type  ---------- */
.eyebrow {
  font-family: var(--ff-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--amber); display: inline-block;
}
h1,h2,h3,h4 { font-family: var(--ff-display); font-weight: 400; line-height: 1.02; letter-spacing: -.01em; }
.display { font-family: var(--ff-display); font-weight: 300; font-size: clamp(3rem, 11vw, 11rem); line-height: .9; letter-spacing: -.02em; }
.h-sec   { font-family: var(--ff-display); font-weight: 300; font-size: clamp(2.4rem, 6.5vw, 6rem); line-height: .98; letter-spacing: -.015em; }
.lead    { font-size: clamp(1.02rem, 1.3vw, 1.3rem); color: var(--cream-dim); font-weight: 400; line-height: 1.5; max-width: 48ch; letter-spacing: -.01em; }
.italic  { font-style: italic; }
.grad-text { color: var(--gold); }

/* =====================================================================
   CURSOR
   ===================================================================== */
.cursor, .cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; mix-blend-mode: difference; }
.cursor { width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%;
  transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s var(--ease); }
.cursor-dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: #fff; border-radius: 50%; }
.cursor.hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(255,255,255,.1); }
@media (hover: none) { .cursor, .cursor-dot { display: none; } }

/* =====================================================================
   PRELOADER
   ===================================================================== */
.preloader { position: fixed; inset: 0; z-index: 9000; background: var(--bg); display: grid; place-items: center; }
.preloader__inner { text-align: center; width: min(86vw, 460px); }
.preloader__logo { width: 132px; margin: 0 auto 28px; filter: invert(1) brightness(2); opacity: 0; }
.preloader__bar { height: 1px; width: 100%; background: var(--hair); position: relative; overflow: hidden; }
.preloader__bar span { position: absolute; inset: 0; width: 0%; background: var(--cream); }
.preloader__pct { margin-top: 16px; font-size: 11px; letter-spacing: .3em; color: var(--muted); font-variant-numeric: tabular-nums; }
.preloader__word { overflow: hidden; margin-bottom: 18px; }
.preloader__word b { display: inline-block; font-family: var(--ff-display); font-style: italic; font-weight: 400; font-size: clamp(1.6rem,3.4vw,2.4rem); color: var(--cream); transform: translateY(110%); letter-spacing: 0; }

/* =====================================================================
   NAV
   ===================================================================== */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between;
  padding: 26px var(--pad); transition: padding .5s var(--ease), background .5s var(--ease), backdrop-filter .5s var(--ease); }
.nav.scrolled { padding: 15px var(--pad); background: rgba(10,8,7,.55); backdrop-filter: blur(20px) saturate(130%); -webkit-backdrop-filter: blur(20px) saturate(130%); }
.nav__logo img { height: 30px; filter: invert(1) brightness(2); transition: height .5s var(--ease); }
.nav.scrolled .nav__logo img { height: 26px; }
.nav__links { display: flex; gap: 40px; align-items: center; }
.nav__links a { position: relative; font-size: 13px; font-weight: 400; letter-spacing: .01em; color: var(--cream-dim); transition: color .3s; }
.nav__links a::after { content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background: var(--cream); transition: width .4s var(--ease); }
.nav__links a:hover { color: var(--cream); }
.nav__links a:hover::after { width: 100%; }
.nav__right { display: flex; align-items: center; gap: 24px; }
.nav__cart { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; color: var(--cream); transition: opacity .3s; }
.nav__cart:hover { opacity: .65; }
.nav__cart .count { font-variant-numeric: tabular-nums; color: var(--amber); }
.nav__burger { display: none; flex-direction: column; gap: 5px; width: 26px; }
.nav__burger span { height: 1.5px; background: var(--cream); transition: .4s var(--ease); }
@media (max-width: 880px) { .nav__links { display: none; } .nav__burger { display: flex; } }

.mobile-menu { position: fixed; inset: 0; z-index: 999; background: var(--bg); display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: var(--pad);
  transform: translateY(-100%); transition: transform .7s var(--ease); pointer-events: none; }
.mobile-menu.open { transform: translateY(0); pointer-events: auto; }
.mobile-menu a { font-family: var(--ff-display); font-weight: 300; font-size: clamp(2.2rem,10vw,3.6rem); color: var(--cream); padding: 10px 0; border-bottom: 1px solid var(--hair-soft); }
.mobile-menu a span { color: var(--muted); font-family: var(--ff-body); font-size: 12px; margin-right: 16px; vertical-align: middle; }

/* =====================================================================
   LAYOUT
   ===================================================================== */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
section { position: relative; }
.section-pad { padding-block: clamp(100px, 16vh, 240px); }
.grain { position: fixed; inset: 0; z-index: 8000; pointer-events: none; opacity: .03; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* buttons — Apple-minimal */
.btn { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 14px 28px; border-radius: 100px;
  font-family: var(--ff-body); font-size: 13.5px; font-weight: 500; letter-spacing: 0; transition: transform .5s var(--ease), background .4s, color .4s, border-color .4s; }
.btn svg { width: 15px; height: 15px; }
.btn--primary { background: var(--cream); color: var(--bg); }
.btn--primary:hover { background: var(--amber); transform: translateY(-2px); }
.btn--ghost { border: 1px solid var(--hair); color: var(--cream); }
.btn--ghost:hover { border-color: var(--cream); transform: translateY(-2px); }
.btn--text { padding: 0; border-radius: 0; gap: 7px; }
.btn--text span.u { position: relative; }
.btn--text span.u::after { content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%; background: currentColor; transform: scaleX(.0); transform-origin: left; transition: transform .45s var(--ease); }
.btn--text:hover span.u::after { transform: scaleX(1); }
.btn--text:hover svg { transform: translateX(4px); }
.btn--text svg { transition: transform .4s var(--ease); }

/* =====================================================================
   HERO — scroll-scrubbed cinematic can reveal
   ===================================================================== */
.hero { position: relative; }
.hero__pin { height: 100vh; min-height: 640px; position: relative; overflow: hidden; display: grid; place-items: center; }
.hero__bg { position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 50% -10%, rgba(200,90,48,.16), transparent 55%), radial-gradient(80% 70% at 80% 110%, rgba(124,31,36,.20), transparent 60%), var(--bg); }
.hero__glow { position:absolute; left:50%; top:54%; width:60vw; height:60vw; transform:translate(-50%,-50%);
  background: radial-gradient(circle, rgba(224,161,74,.12), transparent 60%); filter: blur(20px); z-index:1; }
.hero__media { position: absolute; inset: 0; z-index: 2; will-change: transform; }
.hero__video, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { background: var(--bg); }
.hero__scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,8,7,.72) 0%, rgba(10,8,7,.22) 22%, rgba(10,8,7,.02) 46%, rgba(10,8,7,.18) 66%, rgba(10,8,7,.92) 100%); }
.hero__copy { position: absolute; z-index: 5; left: 0; right: 0; text-align: center; padding-inline: var(--pad); pointer-events: none; }
.hero__copy--intro  { top: 13vh; }
.hero__copy--reveal { bottom: 17vh; opacity: 0; }
.hero__head { font-family: var(--ff-display); font-weight: 300; line-height: .92; letter-spacing: -.02em; font-size: clamp(2.8rem, 8.5vw, 7.5rem); }
.hero__tagline { overflow: hidden; margin-top: 10px; }
.hero__tagline .line { display: block; overflow: hidden; }
.hero__tagline .line > span { display: inline-block; transform: translateY(100%); }
.hero__sub { margin: 22px auto 0; max-width: 34ch; font-size: clamp(1rem,1.3vw,1.18rem); color: var(--cream-dim); font-weight: 400; opacity: 0; }
.hero__copy--reveal .hero__sub { opacity: 1; }
.hero__actions { position: absolute; z-index: 5; left: 0; right: 0; bottom: 12vh; display: inline-flex; gap: 16px; justify-content: center; pointer-events: auto; opacity: 0; flex-wrap: wrap; }
.hero__revealhead { font-family: var(--ff-display); font-weight: 300; font-size: clamp(2.4rem,6vw,5.2rem); line-height: .98; letter-spacing: -.02em; }
.hero__scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; transition: opacity .4s; }
.hero__scroll .mouse { width: 22px; height: 36px; border: 1px solid var(--hair); border-radius: 14px; position: relative; }
.hero__scroll .mouse::after { content:""; position:absolute; top:7px; left:50%; width:3px; height:7px; margin-left:-1.5px; background: var(--amber); border-radius:3px; animation: scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot { 0%{opacity:0; transform:translateY(0)} 30%{opacity:1} 70%{opacity:1} 100%{opacity:0; transform:translateY(12px)} }

/* =====================================================================
   MARQUEE — thin editorial ticker
   ===================================================================== */
.marquee { border-block: 1px solid var(--hair-soft); padding-block: 30px; overflow: hidden; white-space: nowrap; }
.marquee__track { display: inline-flex; gap: 64px; will-change: transform; }
.marquee__track span { font-family: var(--ff-display); font-style: italic; font-weight: 300; font-size: clamp(1.6rem,3vw,2.8rem); color: var(--cream-dim); display: inline-flex; align-items: center; gap: 64px; }
.marquee__track span::after { content: "·"; color: var(--rust); font-style: normal; }

/* =====================================================================
   SECTION HEADERS
   ===================================================================== */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; flex-wrap: wrap; margin-bottom: clamp(48px,7vw,96px); }
.sec-head .lead { margin-top: 24px; }

/* =====================================================================
   FEATURED — pinned rotating-can showcase
   ===================================================================== */
.featured { position: relative; }
.featured__sticky { height: 100vh; position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; padding-inline: var(--pad); overflow: hidden; }
.featured__stage { position: relative; height: 72vh; display: grid; place-items: center; }
.featured__can { position: absolute; width: clamp(220px, 30vw, 440px); opacity: 0; will-change: transform, opacity; filter: drop-shadow(0 50px 60px rgba(0,0,0,.6)); }
.featured__can img { width: 100%; }
.featured__halo { position:absolute; width: 64%; aspect-ratio:1; border-radius:50%; background: radial-gradient(circle, rgba(224,161,74,.16), transparent 65%); filter: blur(34px); }
.featured__info { position: relative; max-width: 460px; }
.featured__item { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); display: flex; flex-direction: column; justify-content: center; }
.featured__item.active { opacity: 1; pointer-events: auto; position: relative; }
.featured__item .cat { color: var(--amber); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; }
.featured__item h3 { font-family: var(--ff-display); font-weight: 300; font-size: clamp(2.4rem,4.6vw,4.2rem); margin: 16px 0 18px; line-height: .98; }
.featured__item p { color: var(--cream-dim); font-weight: 400; margin-bottom: 26px; max-width: 42ch; }
.featured__item .price { font-family: var(--ff-display); font-size: 1.7rem; color: var(--cream); margin-bottom: 28px; }
.featured__count { position: absolute; top: 13vh; left: var(--pad); font-family: var(--ff-body); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.featured__progress { position:absolute; bottom: 11vh; left: var(--pad); right: var(--pad); height: 1px; background: var(--hair-soft); }
.featured__progress i { position:absolute; left:0; top:0; height:100%; width:0; background: var(--cream); }
@media (max-width: 880px) {
  .featured__sticky { grid-template-columns: 1fr; height: auto; min-height: 100vh; padding-block: 100px; gap: 14px; text-align: center; }
  .featured__stage { height: 42vh; }
  .featured__info { margin: 0 auto; }
  .featured__item { align-items: center; }
  .featured__item p { margin-inline: auto; }
  .featured__count, .featured__progress { display:none; }
}

/* =====================================================================
   CINEMATIC PANEL (shared: craft + flavour banner)
   ===================================================================== */
.cine { position: relative; overflow: hidden; }
.cine__panel { position: relative; overflow: hidden; min-height: min(92vh, 820px); display: flex; align-items: center; background: #0a0807; }
.cine__imgwrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cine__img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; will-change: transform; transform: scale(1.06); }
.cine__panel::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(90deg, rgba(10,8,7,.96) 0%, rgba(10,8,7,.78) 34%, rgba(10,8,7,.22) 58%, rgba(10,8,7,0) 80%); }
.cine__overlay { position: relative; z-index: 2; max-width: 44%; padding: clamp(30px,5vw,80px); }
.cine__overlay .lead { margin-top: 24px; }
.craft__list { margin-top: 40px; display: grid; gap: 0; }
.craft__list .row { display:flex; align-items:baseline; gap:20px; padding: 20px 0; border-top:1px solid var(--hair-soft); }
.craft__list .row:last-child { border-bottom:1px solid var(--hair-soft); }
.craft__list .row .n { font-family: var(--ff-body); font-size: 11px; letter-spacing: .15em; color: var(--amber); width: 26px; }
.craft__list .row .t { font-family: var(--ff-display); font-weight: 400; font-size: clamp(1.3rem,2vw,1.8rem); flex: 0 0 auto; min-width: 7.5em; }
.craft__list .row .d { color: var(--cream-dim); font-size: 14px; }
@media (max-width: 880px){
  .cine__panel { min-height: 0; flex-direction: column; }
  .cine__imgwrap { position: relative; height: 64vw; min-height: 260px; width: 100%; }
  .cine__img { object-position: center; transform: scale(1.02); }
  .cine__panel::after { background: linear-gradient(180deg, rgba(10,8,7,0) 30%, rgba(10,8,7,.55) 48%, var(--bg) 62%); }
  .cine__overlay { max-width: none; width: 100%; }
  .craft__list .row{flex-wrap:wrap; gap:6px;} .craft__list .row .t{min-width:0;}
}

/* =====================================================================
   SAUCE-POUR TRANSITION BAND
   ===================================================================== */
.pour { position: relative; height: clamp(280px, 46vh, 520px); overflow: hidden; background: #000; }
.pour video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.pour__grad { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--bg), transparent 22%, transparent 78%, var(--bg)); }
.pour__line { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; width: 90%; }
.pour__line p { font-family: var(--ff-display); font-style: italic; font-weight: 300; font-size: clamp(1.6rem,4vw,3.4rem); color: var(--cream); line-height: 1.1; text-shadow: 0 4px 40px rgba(0,0,0,.6); }

/* =====================================================================
   FLAVOUR WORLDS — borderless cinematic tiles
   ===================================================================== */
.worlds__tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media (max-width: 880px){ .worlds__tiles{ grid-template-columns:1fr; } }
.tile { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 4/5; display: flex; align-items: flex-end; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); will-change: transform; }
.tile::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(10,8,7,.9)); }
.tile:hover img { transform: scale(1.07); }
.tile__c { position: relative; z-index: 2; padding: clamp(22px,2.4vw,36px); width: 100%; }
.tile__c .k { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--amber); font-weight: 500; }
.tile__c h3 { font-family: var(--ff-display); font-weight: 300; font-size: clamp(1.8rem,2.6vw,2.6rem); margin: 10px 0 14px; line-height: 1; }
.tile__c .go { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cream); }
.tile__c .go svg { width: 15px; height: 15px; transition: transform .4s var(--ease); }
.tile:hover .tile__c .go svg { transform: translateX(5px); }

/* =====================================================================
   SUSTAINABILITY — clean numbers, no boxes
   ===================================================================== */
.sustain { overflow: hidden; }
.sustain__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,110px); align-items: center; }
.sustain__can { position: relative; display:grid; place-items:center; aspect-ratio: 4/5; }
.sustain__can img { width: 58%; filter: drop-shadow(0 50px 60px rgba(0,0,0,.5)); will-change: transform; }
.sustain__can .recycle-ring { position:absolute; width:76%; aspect-ratio:1; border:1px solid var(--hair-soft); border-radius:50%; }
.sustain__stats { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(28px,3vw,48px) clamp(28px,4vw,56px); margin-top: 56px; }
.sustain__stats .s .big { font-family: var(--ff-display); font-weight: 300; font-size: clamp(2.6rem,4.4vw,4rem); color: var(--cream); line-height:1; }
.sustain__stats .s .big em { font-style: normal; color: var(--green); }
.sustain__stats .s .lbl { color: var(--muted); font-size: 13px; margin-top: 12px; letter-spacing:0; }
@media (max-width:880px){ .sustain__grid{grid-template-columns:1fr;} }

/* =====================================================================
   PRODUCTS — borderless editorial cards
   ===================================================================== */
.cards-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(20px,3vw,44px) clamp(16px,2vw,28px); }
@media (max-width: 1080px){ .cards-grid{ grid-template-columns: repeat(2,1fr);} }
.pcard { position: relative; display: block; transition: transform .6s var(--ease); will-change: transform; }
.pcard__media { aspect-ratio: 1/1; display: grid; place-items: center; position: relative; }
.pcard__media::before { content:""; position:absolute; left:50%; top:54%; width:78%; aspect-ratio:1; transform:translate(-50%,-50%);
  background: radial-gradient(circle, rgba(224,161,74,0), transparent 62%); border-radius:50%; transition: background .6s; }
.pcard:hover .pcard__media::before { background: radial-gradient(circle, rgba(224,161,74,.22), transparent 62%); }
.pcard__media img { width: 74%; filter: drop-shadow(0 26px 30px rgba(0,0,0,.5)); transition: transform .7s var(--ease); will-change: transform; position: relative; }
.pcard:hover .pcard__media img { transform: translateY(-10px) rotate(-3deg); }
.pcard .cat { font-size: 10.5px; letter-spacing:.2em; text-transform:uppercase; color: var(--muted); font-weight:500; margin-top: 8px; }
.pcard h4 { font-family: var(--ff-display); font-weight: 400; font-size: 1.5rem; margin: 6px 0 2px; line-height: 1.05; }
.pcard .row { display:flex; align-items:center; justify-content:space-between; margin-top: 12px; }
.pcard .price { font-family: var(--ff-display); font-size: 1.4rem; color: var(--cream-dim); }
.pcard .add { display:inline-flex; align-items:center; gap:7px; font-size:12px; color: var(--cream); transition: opacity .3s; }
.pcard .add svg { width:15px; height:15px; transition: transform .4s var(--ease); }
.pcard:hover .add svg { transform: rotate(90deg); }
.pcard .badge { display:inline-block; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color: var(--amber); font-weight:600; margin-bottom: 2px; }

/* =====================================================================
   RECIPES — borderless image tiles
   ===================================================================== */
.recipe-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media (max-width: 880px){ .recipe-row{ grid-template-columns:1fr; } }
.recipe { position: relative; overflow: hidden; border-radius: 4px; min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; padding: 34px;
  transition: transform .6s var(--ease); will-change: transform; }
.recipe::before { content:""; position:absolute; inset:0; z-index:0; background: linear-gradient(180deg, transparent 34%, rgba(0,0,0,.82)); }
.recipe__bg { position:absolute; inset:0; z-index:-1; transition: transform 1.1s var(--ease); will-change: transform; }
.recipe:hover { transform: translateY(-6px); }
.recipe:hover .recipe__bg { transform: scale(1.07); }
.recipe .meta { position: relative; z-index:1; color: var(--amber); font-size: 11px; letter-spacing:.18em; text-transform:uppercase; font-weight:500; margin-bottom: 14px; display:flex; gap:18px; }
.recipe h3 { position: relative; z-index:1; font-family: var(--ff-display); font-weight: 400; font-size: 1.9rem; margin-bottom: 10px; }
.recipe p { position: relative; z-index:1; color: var(--cream-dim); font-size: 14px; font-weight:400; margin-bottom: 18px; max-width: 32ch; }
.recipe .with { position: relative; z-index:1; display:inline-flex; align-items:center; gap:12px; font-size:12px; color:var(--cream-dim); }
.recipe .with img { width: 28px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.rb1{ background: radial-gradient(circle at 35% 25%, #5e2417, #150a07); }
.rb2{ background: radial-gradient(circle at 65% 30%, #25492f, #0c160d); }
.rb3{ background: radial-gradient(circle at 40% 70%, #523413, #150f06); }

/* =====================================================================
   STORY — editorial, no cards
   ===================================================================== */
.story { overflow: hidden; }
.story__quote { font-family: var(--ff-display); font-weight: 300; font-size: clamp(2rem,5vw,4.6rem); line-height: 1.06; letter-spacing:-.02em; max-width: 19ch; }
.story__quote .word { display:inline-block; opacity:.18; transition: opacity .3s; }
.story__meta { display:flex; gap: clamp(40px,6vw,90px); flex-wrap:wrap; margin-top: 60px; }
.story__meta .m .big { font-family:var(--ff-display); font-weight: 300; font-size: clamp(2.2rem,3.6vw,3rem); }
.story__meta .m .lbl { color: var(--muted); font-size: 13px; margin-top:6px; }
.story__map { margin-top: 80px; display:grid; grid-template-columns: 1.15fr 1fr; gap: clamp(36px,6vw,100px); align-items:start; padding-top: 56px; border-top: 1px solid var(--hair-soft); }
.story__col h3 { font-family: var(--ff-display); font-weight: 300; font-size: clamp(1.7rem,2.8vw,2.4rem); margin-bottom: 18px; line-height: 1.05; }
.story__col p { color: var(--cream-dim); font-weight:400; font-size: 15.5px; }
.story__pin { display:inline-flex; align-items:center; gap:9px; color: var(--amber); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:500; margin-bottom:22px; }
@media (max-width:880px){ .story__map{grid-template-columns:1fr; gap:40px;} }

/* =====================================================================
   RETAIL + AWARDS — clean
   ===================================================================== */
.retail { text-align:center; }
.retail__logos { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap: clamp(34px,6vw,84px); margin-top: 56px; }
.retail__logos .r { font-family: var(--ff-display); font-style: italic; font-weight: 400; font-size: clamp(1.4rem,2.6vw,2.2rem); color: var(--cream-dim); opacity:.5; transition: opacity .4s; }
.retail__logos .r:hover { opacity:1; }
.awards { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(36px,5vw,72px); margin-top: 100px; text-align:left; }
.awards .a { padding-top: 26px; border-top: 1px solid var(--hair); }
.awards .a .yr { color: var(--amber); font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:500; }
.awards .a h4 { font-family: var(--ff-display); font-weight: 400; font-size: 1.6rem; margin:16px 0 10px; }
.awards .a p { color: var(--muted); font-size:14px; }
@media (max-width:880px){ .awards{ grid-template-columns:1fr; } }

/* =====================================================================
   CTA
   ===================================================================== */
.cta { position: relative; text-align:center; overflow:hidden; }
.cta__bg { position:absolute; inset:0; z-index:0; background: radial-gradient(70% 80% at 50% 120%, rgba(200,90,48,.28), transparent 60%), var(--bg); }
.cta__cans { position:absolute; inset:0; z-index:1; pointer-events:none; }
.cta__cans img { position:absolute; width: clamp(70px,9vw,150px); opacity:.8; filter: drop-shadow(0 30px 40px rgba(0,0,0,.5)); will-change:transform; }
.cta__inner { position:relative; z-index:3; }
.cta h2 { font-family: var(--ff-display); font-weight: 300; font-size: clamp(3rem,9vw,8rem); line-height:.94; letter-spacing: -.02em; }
.cta .lead { margin: 28px auto 0; text-align:center; }
.cta__cta { margin-top: 44px; display:inline-flex; gap:16px; flex-wrap:wrap; justify-content:center; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { border-top:1px solid var(--hair-soft); padding-block: 80px 40px; }
.footer__top { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
.footer__brand img { width: 124px; filter: invert(1) brightness(2); margin-bottom:24px; }
.footer__brand p { color: var(--muted); font-size:14.5px; font-weight:400; max-width: 32ch; }
.footer__col h5 { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color: var(--amber); margin-bottom:22px; font-weight:500; }
.footer__col a { display:block; color: var(--cream-dim); font-size:14.5px; padding:7px 0; transition: color .3s, padding-left .3s; }
.footer__col a:hover { color: var(--cream); padding-left:5px; }
.footer__bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-top:64px; padding-top:30px; border-top:1px solid var(--hair-soft); color: var(--muted); font-size:12.5px; }
.footer__social { display:flex; gap:22px; }
.footer__social a { color: var(--cream-dim); transition: color .3s, transform .4s var(--ease); }
.footer__social a:hover { color: var(--cream); transform: translateY(-2px); }
.footer__social svg { width:18px; height:18px; }
@media (max-width:880px){ .footer__top{ grid-template-columns: 1fr 1fr; gap:40px;} }

[data-reveal] { opacity: 0; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }