/* ============================================================
   PINO THE DUCK — design system
   Editorial / premium / botanical / quietly mysterious
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Shantell+Sans:ital,wght@0,600;0,700;1,600&display=swap');

/* ---- Tokens ---- */
:root{
  /* surfaces */
  --cream:#F2ECDD;
  --paper:#FAF6EC;
  --cream-deep:#E9E1CF;
  --night:#161309;
  --night-2:#0E0C06;

  /* ink */
  --ink:#1A1610;
  --ink-soft:#403a2e;
  --muted:rgba(26,22,16,.56);
  --muted-2:rgba(26,22,16,.40);
  --line:rgba(26,22,16,.14);
  --line-2:rgba(26,22,16,.08);

  /* ink on dark */
  --d-fg:#F3ECDC;
  --d-muted:rgba(243,236,220,.62);
  --d-line:rgba(243,236,220,.16);

  /* signature blue (from the duck seal) */
  --blue:#9CBFD7;
  --blue-deep:#5A85A4;

  /* flavour accents — muted, premium */
  --c-green:#6F8A4E;
  --c-amber:#C2772B;
  --c-beet:#BE3B5C;
  --c-coral:#D2694A;
  --c-plum:#7E5685;

  /* active accent (driven by tweaks / per-section) */
  --accent:var(--blue-deep);

  /* layout */
  --maxw:1320px;
  --gut:clamp(20px,5vw,72px);
  --radius:3px;

  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --reveal-shift:34px;
  --reveal-dur:1.05s;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:clamp(16px,1.05vw,17.5px);line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.02;letter-spacing:-.015em}
p{margin:0}
::selection{background:var(--blue);color:var(--ink)}

/* ---- Type helpers ---- */
.serif{font-family:'Newsreader',Georgia,serif}
.display{font-family:'Newsreader',Georgia,serif;font-weight:400;letter-spacing:-.022em;line-height:.98}
.italic{font-style:italic}
.mono{font-family:'Space Mono',monospace}
.eyebrow{
  font-family:'Space Mono',monospace;font-size:.70rem;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}
.eyebrow .dot{color:var(--accent)}

/* ---- Layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:clamp(72px,11vw,168px)}
.lede{font-size:clamp(1.12rem,1.7vw,1.4rem);line-height:1.55;color:var(--ink-soft);max-width:46ch;text-wrap:pretty}
.eased{transition:all .5s var(--ease)}

/* ============================================================
   HEADER
   ============================================================ */
.hd{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:1000;
  width:calc(100% - clamp(20px,5vw,52px));max-width:1180px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:10px 11px 10px 20px;border-radius:999px;
  color:var(--ink);
  background:rgba(250,246,236,.66);border:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 16px 40px -30px rgba(27,26,22,.4);
  transition:background .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease),
             padding .45s var(--ease),color .55s var(--ease),top .45s var(--ease),transform .5s var(--ease);
}
.hd.over-dark{color:var(--d-fg);background:rgba(18,16,9,.32);border-color:rgba(243,236,220,.15);
  box-shadow:0 16px 40px -24px rgba(0,0,0,.6)}
html.hide-head .hd{transform:translate(-50%,-185%);pointer-events:none}
.hd.stuck{
  top:10px;background:rgba(250,246,236,.86);border-color:var(--line);
  box-shadow:0 18px 44px -26px rgba(0,0,0,.4);padding-block:9px;color:var(--ink);
}
.hd-brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.hd-brand .seal{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:var(--paper) center/cover no-repeat;
  box-shadow:0 0 0 1px var(--line);transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.hd.over-dark:not(.stuck) .hd-brand .seal{box-shadow:0 0 0 1px var(--d-line)}
.hd-brand:hover .seal{transform:rotate(-7deg) scale(1.05)}
.hd-brand .wm{height:38px;width:auto;transition:filter .55s var(--ease)}
.hd.over-dark:not(.stuck) .hd-brand .wm{filter:invert(1) brightness(1.7)}

/* nav sits free inside the island */
.hd-nav{display:flex;align-items:center;gap:4px;margin-inline:auto;padding:0;border:0;background:none}
.hd-nav a{
  font-family:'Hanken Grotesk',sans-serif;font-size:.9rem;letter-spacing:-.005em;font-weight:600;
  position:relative;padding:9px 17px;border-radius:999px;color:inherit;opacity:.78;white-space:nowrap;
  transition:opacity .3s var(--ease),background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.hd-nav a::before{content:"";position:absolute;left:17px;bottom:6px;width:5px;height:5px;border-radius:50%;
  background:var(--c-amber);opacity:0;transform:scale(0);transition:.35s var(--ease)}
.hd-nav a:hover{opacity:1;background:color-mix(in srgb,currentColor 9%,transparent);transform:translateY(-1px)}
.hd-nav a.active{opacity:1;background:var(--ink);color:var(--paper-3)}

.btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-size:.84rem;font-weight:600;letter-spacing:.01em;
  padding:11px 20px;border-radius:999px;border:1px solid transparent;
  transition:transform .35s var(--ease),background .35s var(--ease),
             color .35s var(--ease),border-color .35s var(--ease);
}
.btn .arr{transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{transform:translateY(-2px);background:#000}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.hd .btn-solid{padding:10px 18px}
.hd.over-dark:not(.stuck) .btn-solid{background:var(--paper);color:var(--ink)}

/* mobile nav — black hamburger inside the hand-drawn blob ring */
.hd-burger{display:none;align-items:center;justify-content:center;gap:5px;flex-direction:column;
  position:relative;width:50px;height:50px;background:none;
  border:0;cursor:pointer;padding:0;color:var(--ink);
  transition:transform .3s var(--ease)}
.hd-burger::before{content:"";position:absolute;inset:0;z-index:0;
  background:url(../brand/blob.svg) center/contain no-repeat;
  transition:transform .4s var(--ease)}
.hd-burger:hover::before{transform:rotate(10deg) scale(1.05)}
.hd-burger span{position:relative;z-index:1;width:17px;height:2px;background:var(--ink);display:block;
  border-radius:2px;transition:.35s var(--ease)}
.mnav-open .hd-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mnav-open .hd-burger span:nth-child(2){opacity:0}
.mnav-open .hd-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{
  position:fixed;inset:0;z-index:1100;color:var(--ink);
  background:linear-gradient(168deg,#FFFDF6 0%,#EAF1DD 60%,#FCE2EA 100%);
  display:flex;flex-direction:column;padding:18px var(--gut) calc(20px + env(safe-area-inset-bottom));
  transform:translateY(-101%);transition:transform .55s var(--ease);visibility:hidden;overflow:hidden;
}
.mnav::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url(../patterns/apple-pear-pat.png);background-size:min(620px,86vw);
  background-position:bottom -120px right -100px;background-repeat:no-repeat;opacity:.08;mix-blend-mode:multiply}
.mnav.open{transform:none;visibility:visible}
.mnav-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px}
.mnav-brand{display:flex;align-items:center;gap:11px}
.mnav-brand .seal{width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:var(--paper-3) center/cover no-repeat;box-shadow:0 0 0 1px var(--line)}
.mnav-brand .wm{height:34px;width:auto}
.mnav-x{position:relative;width:44px;height:44px;border-radius:50%;background:var(--paper-3);
  border:1.5px solid var(--line);cursor:pointer;display:grid;place-items:center}
.mnav-x span{position:absolute;width:18px;height:2px;background:var(--ink);border-radius:2px}
.mnav-x span:first-child{transform:rotate(45deg)}
.mnav-x span:last-child{transform:rotate(-45deg)}
.mnav-links{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px}
.mnav-links a{display:flex;align-items:center;gap:16px;padding:14px 4px;
  border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);
  opacity:0;transform:translateX(-14px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .25s}
.mnav.open .mnav-links a{opacity:1;transform:none}
.mnav.open .mnav-links a:nth-child(1){transition-delay:.12s}
.mnav.open .mnav-links a:nth-child(2){transition-delay:.18s}
.mnav.open .mnav-links a:nth-child(3){transition-delay:.24s}
.mnav.open .mnav-links a:nth-child(4){transition-delay:.30s}
.mnav-links a .d{width:13px;height:13px;border-radius:50%;background:var(--mc);flex:none;
  transition:transform .3s var(--ease)}
.mnav-links a .t{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(2rem,9vw,2.9rem);line-height:1;flex:1}
.mnav-links a .n{font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.1em;color:var(--muted)}
.mnav-links a:active .t,.mnav-links a:hover .t{color:var(--mc)}
.mnav-links a:hover .d{transform:scale(1.35)}
.mnav-foot{position:relative;z-index:2;display:flex;flex-direction:column;gap:16px;
  opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease) .36s,transform .5s var(--ease) .36s}
.mnav.open .mnav-foot{opacity:1;transform:none}
.mnav-cta{align-self:stretch;justify-content:center;font-size:1rem;padding:15px 22px}
.mnav-tag{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);text-align:center}
.mnav-tag span{color:var(--c-green)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--night);color:var(--d-fg)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,8,4,.55) 0%,rgba(10,8,4,.12) 32%,rgba(10,8,4,.30) 62%,rgba(10,8,4,.86) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--gut) clamp(54px,8vh,104px);display:grid;gap:30px}
.hero h1{font-family:'Newsreader',serif;font-weight:400;letter-spacing:-.025em;
  font-size:clamp(2.9rem,8.4vw,7.4rem);line-height:.94;max-width:16ch;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--blue)}
.hero-sub{max-width:50ch;color:var(--d-muted);font-size:clamp(1.02rem,1.5vw,1.28rem);line-height:1.55}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero .btn-ghost{border-color:var(--d-line);color:var(--d-fg)}
.hero .btn-ghost:hover{border-color:var(--d-fg);background:rgba(243,236,220,.06)}
.hero-seal{
  position:absolute;z-index:3;top:max(14vh,108px);right:var(--gut);
  width:clamp(74px,9vw,118px);height:clamp(74px,9vw,118px);border-radius:50%;
  background:var(--paper) center/cover no-repeat;
  box-shadow:0 14px 40px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.18);
  display:grid;place-items:center;animation:floaty 7s var(--ease) infinite;
}
.hero-seal .ring{position:absolute;inset:-13px;border-radius:50%;animation:spin 26s linear infinite}
.hero-seal .ring text{font-family:'Space Mono',monospace;font-size:8.4px;letter-spacing:.34em;
  fill:var(--d-muted);text-transform:uppercase}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinCentered{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.scroll-hint{position:absolute;left:var(--gut);bottom:clamp(54px,8vh,104px);z-index:3;
  display:flex;align-items:center;gap:11px;font-family:'Space Mono',monospace;font-size:.66rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--d-muted)}
.scroll-hint .ln{width:46px;height:1px;background:var(--d-muted);position:relative;overflow:hidden}
.scroll-hint .ln::after{content:"";position:absolute;inset:0;background:var(--blue);
  animation:sweep 2.4s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* hero variants */
.hero[data-variant="still"] .hero-media::after{
  background:linear-gradient(180deg,rgba(10,8,4,.30),rgba(10,8,4,.10) 40%,rgba(10,8,4,.72))}
.hero[data-variant="split"]{display:grid}
.hero[data-variant="split"] .hero-media{position:absolute;inset:0 0 0 auto;width:42%;z-index:1}
.hero[data-variant="split"] .hero-media::after{
  background:linear-gradient(90deg,var(--night),transparent 30%),linear-gradient(180deg,transparent 60%,rgba(10,8,4,.5))}
.hero[data-variant="split"] .hero-inner{align-self:center;padding-bottom:clamp(54px,8vh,104px);padding-top:22vh}
.hero[data-variant="split"] h1{max-width:13ch}
@media(max-width:860px){
  .hero[data-variant="split"] .hero-media{width:100%}
  .hero[data-variant="split"] .hero-media::after{
    background:linear-gradient(180deg,rgba(10,8,4,.45),rgba(10,8,4,.15) 36%,rgba(10,8,4,.86))}
}

/* ============================================================
   FLAVOUR TABS (sticky scroll-spy)
   ============================================================ */
.tabs{position:sticky;top:0;z-index:900;background:rgba(14,12,6,.86);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--d-line);transition:box-shadow .4s}
.tabs.shadow{box-shadow:0 14px 34px -22px rgba(0,0,0,.8)}
.tabs-row{display:flex;align-items:stretch;gap:0;max-width:var(--maxw);margin:0 auto;
  padding-inline:var(--gut);overflow-x:auto;scrollbar-width:none}
.tabs-row::-webkit-scrollbar{display:none}
.tab{
  position:relative;flex:0 0 auto;display:flex;flex-direction:column;gap:3px;
  padding:17px 22px 15px;cursor:pointer;background:none;border:0;text-align:left;
  color:var(--d-muted);transition:color .35s var(--ease);white-space:nowrap;
}
.tab:first-child{padding-left:0}
.tab .ti{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.16em}
.tab .tn{font-size:.94rem;font-weight:600;letter-spacing:-.01em;color:var(--d-fg);opacity:.5;transition:opacity .35s}
.tab:hover .tn{opacity:.82}
.tab .swatch{position:absolute;left:22px;right:22px;bottom:0;height:2px;background:var(--tab-c,var(--accent));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
  box-shadow:0 0 14px var(--tab-c,var(--accent))}
.tab:first-child .swatch{left:0}
.tab.active .tn{opacity:1}
.tab.active{color:var(--d-fg)}
.tab.active .swatch{transform:scaleX(1)}

/* ============================================================
   FLAVOUR CHAPTER — dark, luxurious, cutout bottles on botanicals
   ============================================================ */
.blends{background:var(--night);position:relative}
.blends::before{ /* top fade so it melts out of the hero */
  content:"";position:absolute;top:0;left:0;right:0;height:160px;z-index:0;pointer-events:none;
  background:linear-gradient(var(--night-2),transparent)}
.flavour{position:relative;padding-block:clamp(70px,10vw,150px);scroll-margin-top:62px;
  overflow:hidden;color:var(--d-fg);
  background:radial-gradient(140% 75% at var(--wash-x,80%) 0%,
    color-mix(in srgb,var(--fc) 16%,var(--night)) 0%,var(--night) 55%)}
.flavour + .flavour{border-top:1px solid rgba(243,236,220,.05)}
.flavour .wrap{position:relative;z-index:2}
.fl-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(34px,5vw,90px);align-items:center}
.fl-grid.rev .fl-text{order:2}

/* ---- the product stage ---- */
.fl-media{position:relative}
.fl-stage{position:relative;display:grid;place-items:center;aspect-ratio:4/5;min-height:440px}
.fl-pat{position:absolute;z-index:0;width:min(96%,440px);opacity:.20;pointer-events:none;
  mix-blend-mode:screen;animation:patDrift 26s var(--ease) infinite}
.fl-grid.rev .fl-pat{animation-direction:reverse}
.fl-glow{position:absolute;z-index:0;width:74%;height:62%;top:24%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--fc) 64%,transparent),transparent 72%);
  filter:blur(18px);opacity:.5;pointer-events:none}
.fl-floor{position:absolute;z-index:1;bottom:9%;width:46%;height:30px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent 75%);pointer-events:none}
.fl-bottle{position:relative;z-index:3;height:90%;width:auto;pointer-events:none;
  filter:drop-shadow(0 34px 40px rgba(0,0,0,.6));animation:bottleFloat 7s var(--ease) infinite}
.fl-stage:hover .fl-bottle{animation-play-state:paused}
.fl-peek{position:absolute;z-index:2;top:8%;left:56%;width:clamp(56px,7vw,92px);
  aspect-ratio:1;border-radius:50%;background:var(--paper) center/cover no-repeat;
  box-shadow:0 12px 28px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.14);
  opacity:0;transform:translate(8px,54px) scale(.7) rotate(8deg);
  transition:transform .6s var(--ease),opacity .5s var(--ease)}
.fl-stage:hover .fl-peek{opacity:1;transform:translate(0,0) scale(1) rotate(-7deg)}
.fl-bubbles{position:absolute;z-index:2;inset:0;pointer-events:none;overflow:hidden}
.fl-bubbles i{position:absolute;bottom:14%;width:7px;height:7px;border-radius:50%;
  background:color-mix(in srgb,var(--fc) 60%,#fff);opacity:0;
  box-shadow:0 0 6px color-mix(in srgb,var(--fc) 60%,transparent)}
.fl-bubbles i:nth-child(1){left:44%;animation:bub 4.6s var(--ease) .2s infinite}
.fl-bubbles i:nth-child(2){left:52%;width:5px;height:5px;animation:bub 5.4s var(--ease) 1.3s infinite}
.fl-bubbles i:nth-child(3){left:48%;width:9px;height:9px;animation:bub 6.2s var(--ease) 2.6s infinite}
@keyframes patDrift{0%,100%{transform:translate(-2%,1%) rotate(-1.5deg)}50%{transform:translate(2%,-2%) rotate(1.5deg)}}
@keyframes bottleFloat{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-14px) rotate(.5deg)}}
@keyframes bub{0%{opacity:0;transform:translateY(0) scale(.6)}12%{opacity:.85}
  80%{opacity:.4}100%{opacity:0;transform:translateY(-150px) scale(1)}}

/* ---- text ---- */
.fl-index{font-family:'Newsreader',serif;font-style:italic;font-size:clamp(2.6rem,4.4vw,3.8rem);
  color:var(--fc);opacity:.95;line-height:1}
.fl-name{font-family:'Newsreader',serif;font-weight:400;letter-spacing:-.02em;color:var(--d-fg);
  font-size:clamp(2.4rem,4.6vw,4.2rem);line-height:.98;margin:14px 0 0;text-wrap:balance}
.fl-with{display:inline-block;margin-top:13px;font-family:'Space Mono',monospace;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fc)}
.fl-desc{margin-top:22px;font-size:clamp(1.12rem,1.5vw,1.34rem);line-height:1.5;
  color:var(--d-muted);max-width:40ch;text-wrap:pretty}
.fl-notes{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.fl-note{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.04em;
  padding:6px 12px;border:1px solid var(--d-line);border-radius:999px;color:var(--d-fg);
  transition:border-color .35s,color .35s,background .35s}
.fl-note:hover{border-color:var(--fc);color:var(--fc);background:color-mix(in srgb,var(--fc) 12%,transparent)}
.fl-claims{display:flex;flex-wrap:wrap;gap:16px 26px;margin-top:30px}
.fl-claim{display:flex;align-items:center;gap:9px;font-size:.84rem;color:var(--d-muted)}
.fl-claim .bullet{width:7px;height:7px;border-radius:50%;background:var(--fc);flex-shrink:0;
  box-shadow:0 0 10px var(--fc)}

/* gallery — elegant masonry */
.gal{margin-top:clamp(46px,5.5vw,82px)}
.gal-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid rgba(243,236,220,.09)}
.gal-head .gl{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--d-muted)}
.gal-head .gl b{color:var(--fc);font-weight:400}
.gal-head .gc{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.14em;color:var(--muted-2)}
.gal-row{columns:3;column-gap:14px}
.gal-item{break-inside:avoid;margin:0 0 14px;display:block;position:relative;
  border-radius:var(--radius);overflow:hidden;background:var(--night-2);
  box-shadow:0 0 0 1px rgba(243,236,220,.07);transition:box-shadow .5s var(--ease)}
.gal-item:hover{box-shadow:0 0 0 1px rgba(243,236,220,.18),0 22px 44px -26px rgba(0,0,0,.8)}
.gal-item img{width:100%;height:auto;display:block;transition:transform 1.3s var(--ease)}
.gal-item:hover img{transform:scale(1.05)}
.gal-cap{position:absolute;left:0;bottom:0;right:0;padding:14px 14px 11px;
  font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72));
  opacity:0;transform:translateY(6px);transition:.45s var(--ease)}
.gal-item:hover .gal-cap{opacity:1;transform:none}
.gal-watermark{position:absolute;top:11px;right:11px;width:34px;height:34px;border-radius:50%;
  background:var(--paper) center/cover no-repeat;opacity:.0;transform:scale(.6) rotate(-20deg);
  box-shadow:0 0 0 1px rgba(255,255,255,.4);transition:.5s var(--ease)}
.gal-item:hover .gal-watermark{opacity:.95;transform:none}
html[data-motion="off"] .fl-pat,html[data-motion="off"] .fl-bottle,
html[data-motion="off"] .fl-bubbles i{animation:none!important}

/* ============================================================
   GENERIC EDITORIAL BLOCKS
   ============================================================ */
.full-photo{position:relative;height:clamp(60vh,72vh,820px);overflow:hidden;background:var(--night)}
.full-photo img{width:100%;height:100%;object-fit:cover}
.full-photo .overlay{position:absolute;inset:0;display:flex;align-items:flex-end;
  padding:var(--gut);color:var(--d-fg);
  background:linear-gradient(180deg,transparent 40%,rgba(8,6,3,.78))}

.dark{background:var(--night);color:var(--d-fg)}
.dark .lede{color:var(--d-muted)}
.dark .eyebrow{color:var(--d-muted)}
.dark .btn-ghost{border-color:var(--d-line);color:var(--d-fg)}
.dark .btn-ghost:hover{border-color:var(--d-fg);background:rgba(243,236,220,.06)}
.dark .btn-solid{background:var(--paper);color:var(--ink)}

.head-2{display:grid;gap:18px;margin-bottom:clamp(40px,5vw,66px)}
.head-2 h2{font-family:'Newsreader',serif;font-size:clamp(2.1rem,4.6vw,3.9rem);
  letter-spacing:-.02em;line-height:1.0;max-width:18ch;text-wrap:balance}
.head-2 h2 em{font-style:italic;color:var(--accent)}

/* ingredient section */
.ingr-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,68px);align-items:center}
.ingr-photos{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:14px}
.ingr-photos .p{border-radius:var(--radius);overflow:hidden;background:var(--cream-deep)}
.ingr-photos .p img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;transition:transform 1.3s var(--ease)}
.ingr-photos .p.tall{grid-row:span 2}
.ingr-photos .p.tall img{aspect-ratio:auto;height:100%}
.ingr-photos .p:hover img{transform:scale(1.05)}
.ingr-list{margin-top:28px;border-top:1px solid var(--line)}
.ingr-list .it{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:15px 0;border-bottom:1px solid var(--line)}
.ingr-list .it .nm{font-family:'Newsreader',serif;font-size:1.3rem}
.ingr-list .it .tag{font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}

/* mascot */
.mascot-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.mascot-photo{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;background:var(--night-2)}
.mascot-photo img{width:100%;height:100%;object-fit:cover}
.peek{position:relative;display:inline-block}
.micro-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.micro{font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.04em;
  padding:7px 13px;border:1px solid var(--d-line);border-radius:999px;color:var(--d-fg);
  transition:.35s var(--ease)}
.micro:hover{background:var(--blue);color:var(--ink);border-color:var(--blue);transform:translateY(-2px)}

/* mascot — Pino hatches (sprite) */
.mascot-stage{position:relative;display:grid;place-items:center;aspect-ratio:4/5;min-height:430px}
.mascot-glow{position:absolute;z-index:0;width:60%;height:52%;top:20%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--blue) 62%,transparent),transparent 72%);
  filter:blur(22px);opacity:.5}
.pino-floor{position:absolute;z-index:1;bottom:15%;width:36%;height:20px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent 75%)}
.hatch-hint{position:absolute;z-index:3;bottom:4%;left:50%;transform:translateX(-50%);
  font-family:'Space Mono',monospace;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--d-muted);white-space:nowrap;opacity:.66;transition:opacity .4s}
.pino-say{position:absolute;z-index:3;top:2%;left:50%;transform:translateX(-50%);
  background:var(--paper);color:var(--ink);font-family:'Space Mono',monospace;font-size:.74rem;
  letter-spacing:.03em;padding:9px 15px;border-radius:13px;white-space:nowrap;
  box-shadow:0 14px 32px rgba(0,0,0,.45);animation:saypop .5s var(--ease)}
.pino-say::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--paper);border-bottom:0}
@keyframes saypop{0%{opacity:0;transform:translateX(-50%) translateY(7px) scale(.9)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes waddle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.ft-walk{height:38px;width:auto;transform-origin:50% 92%;animation:waddle 2.4s var(--ease) infinite}
.pino-stand{position:relative;z-index:2;height:clamp(250px,42vh,440px);width:auto;cursor:pointer;
  filter:drop-shadow(0 28px 38px rgba(0,0,0,.5));transform-origin:50% 94%;animation:pwaddle 3.4s var(--ease) infinite}
.pino-stand:hover{filter:drop-shadow(0 34px 46px rgba(0,0,0,.6))}
.pino-stand.hop{animation:phop .74s var(--ease)}
@keyframes pwaddle{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-9px) rotate(3deg)}}
@keyframes phop{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-42px) rotate(-8deg) scale(1.04)}
  55%{transform:translateY(0) rotate(7deg)}78%{transform:translateY(-9px) rotate(-3deg)}100%{transform:translateY(0)}}
html[data-motion="off"] .pino-stand{animation:none!important}
html[data-motion="off"] .ft-walk{animation:none!important}

/* final CTA */
.cta-final{position:relative;overflow:hidden}
.cta-final .cta-media{position:absolute;inset:0;z-index:0}
.cta-final .cta-media img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.cta-final .cta-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(8,6,3,.9) 8%,rgba(8,6,3,.55) 50%,rgba(8,6,3,.78))}
.cta-final .wrap{position:relative;z-index:1;text-align:center;display:grid;justify-items:center;gap:26px;
  padding-block:clamp(90px,13vw,180px)}
.cta-final h2{font-family:'Newsreader',serif;font-size:clamp(2.6rem,6.4vw,5.6rem);letter-spacing:-.025em;
  line-height:.98;color:var(--d-fg);max-width:16ch;text-wrap:balance}
.cta-final h2 em{font-style:italic;color:var(--blue)}
.cta-final .cta-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ============================================================
   FOOTER
   ============================================================ */
.ft{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--night-2) 0%,#070604 100%);
  color:var(--d-fg);padding-block:clamp(64px,8vw,112px) 36px}
.ft-top{display:grid;grid-template-columns:minmax(260px,1.28fr) minmax(148px,.72fr) minmax(176px,.82fr) minmax(250px,1fr);
  gap:clamp(28px,4.5vw,62px);align-items:start;
  padding-bottom:clamp(44px,6vw,72px);border-bottom:1px solid var(--d-line)}
.ft-brand-row{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.ft-seal{display:block;width:56px;height:56px;border-radius:50%;flex:none;
  background:var(--paper) center/cover no-repeat;box-shadow:0 0 0 1px var(--d-line);
  transition:transform .5s var(--ease)}
.ft-brand:hover .ft-seal{transform:rotate(-8deg) scale(1.05)}
.ft-brand .wm{height:32px;filter:invert(1) brightness(1.7)}
.ft-lede{color:var(--d-muted);max-width:36ch;font-size:1rem;line-height:1.55}
.ft-news{display:grid;gap:10px;margin-top:24px;max-width:420px}
.ft-news label{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--d-muted)}
.ft-news-row{display:flex;gap:10px;align-items:center}
.ft-news input{min-width:0;flex:1;background:rgba(255,253,246,.055);border:1px solid var(--d-line);
  border-radius:999px;color:var(--d-fg);padding:13px 16px;font:inherit;font-size:.92rem;outline:none;
  transition:border-color .35s,background .35s}
.ft-news input::placeholder{color:var(--d-muted)}
.ft-news input:focus{border-color:var(--blue);background:rgba(255,253,246,.08)}
.ft-news button{background:var(--blue);color:var(--ink);border:0;border-radius:999px;
  width:48px;height:48px;cursor:pointer;flex-shrink:0;font-size:1.1rem;transition:transform .35s var(--ease),background .35s}
.ft-news button:hover{transform:translateX(3px)}
.ft-col h4{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--d-muted);margin-bottom:16px;font-weight:400}
.ft-col a{display:block;padding:7px 0;font-size:.96rem;color:var(--d-fg);opacity:.82;transition:opacity .3s,transform .3s var(--ease);
  overflow-wrap:anywhere}
.ft-col a:hover{opacity:1;transform:translateX(4px)}
.ft-social{padding-top:1px}
.ft-kicker{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--d-muted);margin-bottom:14px}
.ft-instagram{display:flex;align-items:center;gap:13px;color:var(--d-fg);padding:0;
  transition:transform .3s var(--ease)}
.ft-instagram:hover{transform:translateX(4px)}
.ft-insta-badge{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--blue);
  color:var(--ink);font-family:'Space Mono',monospace;font-weight:700;font-size:.72rem;letter-spacing:.08em;flex:none}
.ft-instagram b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:1.12rem;letter-spacing:-.01em}
.ft-instagram small{display:block;margin-top:3px;color:var(--d-muted);font-size:.82rem;line-height:1.35}
.ft-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  position:relative;padding-top:38px;border-top:1px solid var(--d-line);
  font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:.08em;color:var(--d-muted)}
.ft-duck{display:flex;align-items:center;gap:12px}
.ft-duck .seal{width:42px;height:42px;border-radius:50%;background:var(--paper) center/cover no-repeat;
  box-shadow:0 0 0 1px var(--d-line);transition:transform .5s var(--ease)}
.ft-duck:hover .seal{transform:rotate(8deg) translateY(-2px)}
.ft-meta-links{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.ft-meta-links a{color:var(--d-muted);transition:color .3s,transform .3s var(--ease)}
.ft-meta-links a:hover{color:var(--d-fg);transform:translateY(-2px)}
/* moonwalking duck on the line above */
.ft-walk{position:absolute;top:-21px;left:0;height:40px;width:auto;z-index:3;pointer-events:none;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.4));transform-origin:50% 92%;
  animation:moonwalk 17s ease-in-out infinite}
@keyframes moonwalk{
  0%   {left:1%;            transform:translateY(0)    rotate(-5deg) scaleX(1)}
  6%   {                    transform:translateY(-5px) rotate(5deg)  scaleX(1)}
  12%  {                    transform:translateY(0)    rotate(-5deg) scaleX(1)}
  44%  {left:calc(100% - 46px); transform:translateY(0) rotate(5deg) scaleX(1)}
  50%  {left:calc(100% - 46px); transform:translateY(0) rotate(0)    scaleX(-1)}
  56%  {                    transform:translateY(-5px) rotate(-5deg) scaleX(-1)}
  62%  {                    transform:translateY(0)    rotate(5deg)  scaleX(-1)}
  94%  {left:1%;            transform:translateY(0)    rotate(-5deg) scaleX(-1)}
  100% {left:1%;            transform:translateY(0)    rotate(0)     scaleX(1)}
}
html[data-motion="off"] .ft-walk{animation:none;left:1%}
@media(max-width:1080px){
  .ft-top{grid-template-columns:1.15fr 1fr}
  .ft-social{grid-column:span 2}
}

/* ============================================================
   B2B PAGE
   ============================================================ */
.b2b-hero{position:relative;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden;
  background:var(--night);color:var(--d-fg)}
.b2b-hero .hero-media::after{background:linear-gradient(180deg,rgba(8,6,3,.5),rgba(8,6,3,.2) 40%,rgba(8,6,3,.84))}

.why-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line)}
.why-item{padding:30px 22px 36px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.why-item:first-child{padding-left:0}
.why-num{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.14em;color:var(--accent);margin-bottom:18px}
.why-item h3{font-family:'Newsreader',serif;font-size:1.5rem;line-height:1.06;letter-spacing:-.01em}
.why-item p{margin-top:12px;font-size:.92rem;color:var(--muted)}

.prod-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.prod-card{position:relative;display:flex;flex-direction:column;background:var(--cream);
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.prod-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -28px rgba(0,0,0,.4)}
.prod-shot{position:relative;aspect-ratio:3/4;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(110% 90% at 50% 30%,color-mix(in srgb,var(--fc) 14%,var(--cream)),var(--cream))}
.prod-shot img{height:90%;width:auto;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(0,0,0,.18));
  transition:transform .6s var(--ease)}
.prod-card:hover .prod-shot img{transform:translateY(-4px) scale(1.03)}
.prod-info{padding:18px 18px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.prod-info .pn{font-family:'Newsreader',serif;font-size:1.22rem;line-height:1.04;letter-spacing:-.01em}
.prod-info .pw{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fc)}
.prod-info .pnotes{font-size:.84rem;color:var(--muted);margin-top:2px}
.prod-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.prod-badge{font-family:'Space Mono',monospace;font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--fc) 14%,transparent);color:var(--fc)}

.who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.who-cell{background:var(--paper);padding:26px 22px;min-height:120px;display:flex;flex-direction:column;
  justify-content:space-between;transition:background .4s,color .4s}
.who-cell .wi{font-family:'Space Mono',monospace;font-size:.66rem;color:var(--muted);letter-spacing:.1em}
.who-cell .wt{font-family:'Newsreader',serif;font-size:1.5rem;letter-spacing:-.01em}
.who-cell:hover{background:var(--ink);color:var(--paper)}
.who-cell:hover .wi{color:var(--blue)}

/* contact form */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:start}
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px 22px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:10px 2px;font:inherit;font-size:1rem;color:var(--ink);outline:none;
  transition:border-color .35s var(--ease);border-radius:0}
.field textarea{resize:vertical;min-height:90px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field.err input,.field.err select,.field.err textarea{border-color:var(--c-beet)}
.field .msg{font-size:.74rem;color:var(--c-beet);min-height:0;font-family:'Space Mono',monospace}
.form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:6px}
.form-note{font-size:.86rem;color:var(--muted);max-width:30ch}
.contact-side{display:grid;gap:30px;align-content:start}
.contact-side .blk{border-top:1px solid var(--line);padding-top:20px}
.contact-side .blk h4{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-weight:400}
.contact-side .blk a,.contact-side .blk p{font-family:'Newsreader',serif;font-size:1.45rem;
  letter-spacing:-.01em;display:block;line-height:1.3}
.contact-side .blk a{transition:color .3s}
.contact-side .blk a:hover{color:var(--accent)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,140%);z-index:1200;
  background:var(--ink);color:var(--paper);padding:15px 24px;border-radius:999px;
  font-size:.9rem;box-shadow:0 20px 50px -16px rgba(0,0,0,.6);transition:transform .6s var(--ease);
  display:flex;align-items:center;gap:11px}
.toast.show{transform:translate(-50%,0)}
.toast .seal{width:26px;height:26px;border-radius:50%;background:var(--paper) url(../brand/seal.png) center/cover no-repeat}

/* ============================================================
   REVEALS
   ============================================================ */
.reveal{opacity:0;transform:translateY(var(--reveal-shift));
  transition:opacity var(--reveal-dur) var(--ease),transform var(--reveal-dur) var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}
.clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease)}
.clip.is-in{clip-path:inset(0 0 0 0)}
.ken img{transition:transform 7s linear}
.ken.is-in img{transform:scale(1.07)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .why-grid,.prod-grid{grid-template-columns:repeat(2,1fr)}
  .who-grid{grid-template-columns:repeat(2,1fr)}
  .ingr-grid,.mascot-grid,.contact-grid{grid-template-columns:1fr}
  .mascot-photo{aspect-ratio:16/11}
}
@media(max-width:760px){
  .hd-nav{display:none}
  .hd-burger{display:flex}
  .hd .btn-solid{display:none}
  .fl-grid{grid-template-columns:1fr;gap:30px}
  .fl-grid.rev .fl-text{order:0}
  .fl-stage{min-height:380px;aspect-ratio:4/5;max-height:82vh}
  .fl-peek{left:60%;top:6%}
  .form{grid-template-columns:1fr}
  .why-item:first-child,.tab:first-child{padding-left:22px}
  .ft-top{grid-template-columns:1fr;gap:36px}
  .ft-social{grid-column:auto}
  .ft-news-row{align-items:stretch}
  .ft-brand .wm{height:26px}
}
@media(max-width:520px){
  .why-grid,.prod-grid,.who-grid{grid-template-columns:1fr}
  .prod-shot{aspect-ratio:16/10}
  .prod-shot img{height:auto;width:54%}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .clip{clip-path:none}
}
html[data-motion="off"] .reveal{opacity:1!important;transform:none!important}
html[data-motion="off"] .clip{clip-path:none!important}
html[data-motion="off"] .hero-seal,html[data-motion="off"] .scroll-hint .ln::after{animation:none!important}

/* ============================================================
   ACT TWO — COLOURFUL BLEND SYSTEM
   Display: Bricolage Grotesque · Script: Shantell Sans
   ============================================================ */
.script{font-family:'Shantell Sans',cursive;font-weight:700;letter-spacing:0}
:root{
  --paper-3:#FFFDF6;
  --sky2:#C2E4F7;
  --sky-soft:#DEEFFA;
}

/* flavour palettes — correct approved combos (colour · pattern · bottle) */
.themed[data-flavour="apple-pear"]{--bc:#5FB07A;--bc-ink:#2f6b46;--bc-tint:#EAF1DD;--bc-pat:url(../patterns/apple-pear-pat.png)}
.themed[data-flavour="seabuckthorn"]{--bc:#F2842A;--bc-ink:#9c4a12;--bc-tint:#FBECD7;--bc-pat:url(../patterns/seabuckthorn-pat.png)}
.themed[data-flavour="strawberry"]{--bc:#EE5575;--bc-ink:#b22f54;--bc-tint:#FCE2EA;--bc-pat:url(../patterns/strawberry-pat.png)}
.themed[data-flavour="honeysuckle"]{--bc:#E7434B;--bc-ink:#b12931;--bc-tint:#FBE0E0;--bc-pat:url(../patterns/honeysuckle-pat.png)}
.themed[data-flavour="rhubarb"]{--bc:#9B4F9C;--bc-ink:#6e3470;--bc-tint:#EFE2EF;--bc-pat:url(../patterns/rhubarb-pat.png)}

/* transition band: a playful Pino ticker bridging hero → colour */
.marquee-band{background:#F7EFE0;color:var(--ink);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:15px 0}
.marquee{display:flex;gap:0;white-space:nowrap;width:max-content;animation:marq 34s linear infinite}
.marquee span{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.18rem;
  display:inline-flex;align-items:center;letter-spacing:-.015em}
.marquee span::after{content:"";width:24px;height:24px;margin:0 26px;flex:none;
  background:url(../brand/seal.png) center/contain no-repeat;opacity:.92}
.marquee span:nth-child(5n+1){color:#3f7d56}
.marquee span:nth-child(5n+2){color:#C76A1E}
.marquee span:nth-child(5n+3){color:#C23A5E}
.marquee span:nth-child(5n+4){color:#B23730}
.marquee span:nth-child(5n+5){color:#7E4080}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee-band:hover .marquee{animation-play-state:paused}
html[data-motion="off"] .marquee{animation:none}

/* sticky flavour bar — island like the main menu, floating over the section colour */
.flavbar{position:sticky;top:74px;z-index:880;background:none;border:0;pointer-events:none;
  transition:top .5s var(--ease)}
html.hide-head .flavbar{top:16px}
.flavbar .frow{display:flex;align-items:center;gap:14px;pointer-events:auto;
  width:calc(100% - clamp(20px,5vw,52px));max-width:1180px;margin:0 auto;
  padding:8px 8px 8px 20px;border-radius:999px;min-height:58px;
  background:rgba(250,246,236,.86);border:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 18px 44px -28px rgba(0,0,0,.45);transition:box-shadow .4s var(--ease)}
.flavbar.shadow .frow{box-shadow:0 24px 50px -26px rgba(0,0,0,.55)}
.flavbar .flabel{font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);flex:none;white-space:nowrap}
.flav-tabs{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;flex:1;padding:4px 0;scroll-snap-type:x mandatory}
.flav-tabs::-webkit-scrollbar{display:none}
.flav-tab{scroll-snap-align:start;flex:none;display:inline-flex;align-items:center;gap:.55em;
  padding:.66em 1.1em;border-radius:999px;border:1.6px solid var(--line);cursor:pointer;
  font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:.9rem;color:var(--ink);
  background:var(--paper-3);transition:.22s var(--ease);white-space:nowrap}
.flav-tab .sw{width:11px;height:11px;border-radius:50%;flex:none;background:var(--tc)}
.flav-tab:hover{border-color:var(--ink);transform:translateY(-1px)}
.flav-tab.active{background:var(--tc);color:#fff;border-color:var(--tc)}
.flav-tab.active .sw{background:#fff}

/* blend section — full-colour poster block */
.blend{position:relative;padding-block:clamp(64px,8vw,116px);scroll-margin-top:74px;overflow:hidden;
  background:var(--bc)}
.blend + .blend{border-top:2px solid rgba(255,255,255,.35)}
.blend::before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--bc-pat);
  background-size:min(420px,52vw);opacity:.05;mix-blend-mode:overlay;pointer-events:none}
.blend .wrap{position:relative;z-index:2}
.blend-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(30px,5vw,76px);align-items:center}
.blend.rev .blend-copy{order:2}
.bnum{font-family:'Space Mono',monospace;font-weight:700;font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bc-ink)}
.blend-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.022em;
  font-size:clamp(2.4rem,4.8vw,4.2rem);line-height:.96;margin:.16em 0 0;color:#1A1610;text-wrap:balance}
.blend-herb{font-family:'Shantell Sans',cursive;font-weight:700;font-size:clamp(1.35rem,2.4vw,2.05rem);
  color:var(--bc-ink);margin-top:.16em}
.blend-desc{font-size:clamp(1.04rem,1.3vw,1.16rem);color:rgba(26,22,16,.84);max-width:42ch;margin-top:20px;line-height:1.6;text-wrap:pretty}
.blend-notes{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.note-chip{display:inline-flex;align-items:center;gap:.5em;font-family:'Hanken Grotesk',sans-serif;
  font-size:.86rem;font-weight:600;background:rgba(255,253,246,.92);border:1.5px solid rgba(255,255,255,.6);
  padding:.5em .9em;border-radius:999px;color:var(--ink);box-shadow:0 6px 16px -12px rgba(27,26,22,.4)}
.note-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bc-ink);flex:none}
.claims{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.claim{display:inline-flex;align-items:center;gap:.5em;padding:.55em .95em;border-radius:999px;
  background:rgba(26,22,16,.9);border:1.5px solid transparent;font-size:.8rem;font-weight:600;color:#fff}
.claim .dot{width:9px;height:9px;border-radius:50%;background:var(--bc);flex:none}
.blend-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.blend-meta .mi{flex:1 1 0;min-width:96px;background:rgba(255,253,246,.94);border:1.5px solid rgba(255,255,255,.6);
  border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:3px;box-shadow:0 10px 24px -16px rgba(27,26,22,.45)}
.blend-meta .mi b{font-family:'Bricolage Grotesque',sans-serif;font-size:1.45rem;font-weight:800;line-height:1;color:var(--ink)}
.blend-meta .mi span{font-size:.72rem;color:var(--ink-soft);font-weight:600;text-transform:uppercase;letter-spacing:.07em}
.blend-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn-bc{background:#1A1610;color:#fff}
.btn-bc:hover{transform:translateY(-2px);background:#000}
.btn-line2{border:1.6px solid var(--ink);color:var(--ink)}
.btn-line2:hover{background:var(--ink);color:var(--paper-3);transform:translateY(-2px)}
.blend-ingr{margin-top:20px;font-size:.9rem;color:rgba(26,22,16,.74);max-width:48ch;line-height:1.55}
.blend-ingr b{color:var(--ink)}

/* blend visual: cream botanical disc + real bottle */
.blend-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:540px}
.blend-shape{position:absolute;width:min(460px,90%);aspect-ratio:1;z-index:0;overflow:hidden;
  border-radius:50%;background:var(--paper-3);
  box-shadow:0 1px 0 rgba(255,255,255,.5),0 36px 64px -34px rgba(27,26,22,.55),0 0 0 1px rgba(255,255,255,.4)}
.blend-shape img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.blend-bottle{position:relative;z-index:2;height:clamp(380px,48vw,540px);width:auto;
  filter:drop-shadow(0 34px 30px rgba(27,26,22,.32));animation:floaty 6.5s var(--ease) infinite}
.blend-visual:hover .blend-bottle{animation-play-state:paused}
@keyframes floaty{50%{transform:translateY(-16px)}}
.blend-peek{position:absolute;z-index:3;top:7%;right:13%;width:clamp(58px,7vw,86px);aspect-ratio:1;
  border-radius:50%;background:var(--paper-3) center/cover no-repeat;
  box-shadow:0 12px 26px rgba(0,0,0,.22),0 0 0 1px var(--line);
  opacity:0;transform:translateY(40px) scale(.7) rotate(8deg);transition:.55s var(--ease)}
.blend-visual:hover .blend-peek{opacity:1;transform:none}
html[data-motion="off"] .blend-bottle{animation:none}

/* gallery track */
.bgal{margin-top:clamp(40px,5vw,66px)}
.bgal-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
.bgal-head h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.3rem,2vw,1.8rem);color:#1A1610}
.bgal-actions{display:flex;align-items:center;gap:12px;flex:none}
.bgal-head .ghint{font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(26,22,16,.7)}
.bgal-nav{display:flex;gap:8px}
.bgal-nav button{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--bc) 30%,var(--line));background:var(--paper-3);
  color:var(--ink);font:700 1rem/1 'Space Mono',monospace;cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease),opacity .25s}
.bgal-nav button:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--bc) 14%,var(--paper-3))}
.bgal-nav button:disabled{opacity:.35;cursor:default;transform:none}
.bgal-track{display:flex;gap:15px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;
  scrollbar-width:none;cursor:grab}
.bgal-track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.bgal-track::-webkit-scrollbar{display:none}
.ph{scroll-snap-align:start;flex:none;border-radius:20px;overflow:hidden;position:relative;
  background:color-mix(in srgb,var(--bc) 12%,var(--paper-3));
  border:1.5px solid color-mix(in srgb,var(--bc) 22%,var(--line));display:flex;align-items:flex-end}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ph:hover img{transform:scale(1.06)}
.ph .cap{position:relative;z-index:1;font-family:'Hanken Grotesk',sans-serif;font-size:.74rem;font-weight:700;
  color:var(--ink);background:color-mix(in srgb,var(--paper-3) 88%,transparent);backdrop-filter:blur(6px);
  padding:.5em .8em;margin:12px;border-radius:999px;border:1px solid var(--line);letter-spacing:-.01em}
.ph.s1{width:min(330px,72vw);aspect-ratio:4/5}
.ph.s2{width:min(410px,80vw);aspect-ratio:4/3}
.ph.s3{width:min(270px,62vw);aspect-ratio:1}
@media(max-width:760px){
  .bgal-head{align-items:flex-start}
  .bgal-actions{padding-top:5px}
  .bgal-nav{display:none}
  .bgal-head .ghint::after{content:" →"}
}

/* ============================================================
   STORY (colourful, light) + animated Pino
   ============================================================ */
.story{padding-block:clamp(80px,10vw,140px);background:var(--sky-soft);position:relative;overflow:hidden}
.story-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,5vw,72px);align-items:center}
.story h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.022em;
  font-size:clamp(2.1rem,4.3vw,3.6rem);line-height:1.0;color:var(--ink);text-wrap:balance}
.story h2 .script{color:var(--blue-deep)}
.story p{font-size:clamp(1.06rem,1.4vw,1.2rem);color:var(--ink-soft);max-width:46ch;margin-top:20px;line-height:1.62}
.story-stage{position:relative;display:grid;place-items:center;min-height:clamp(430px,52vw,640px)}
.story-blob{position:absolute;inset:6% 4%;z-index:0;border-radius:49% 51% 48% 52%/54% 53% 47% 46%;
  background:radial-gradient(120% 100% at 50% 30%,#fff 0%,var(--sky2) 78%)}
.story-floor{position:absolute;z-index:1;bottom:11%;width:46%;height:22px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(27,26,22,.22),transparent 75%)}
.pino-stand{position:relative;z-index:2;height:clamp(340px,50vw,580px);width:auto;cursor:pointer;
  filter:drop-shadow(0 26px 30px rgba(27,26,22,.3));transform-origin:50% 94%;animation:pwaddle 3.6s var(--ease) infinite}
.pino-stand:hover{filter:drop-shadow(0 32px 40px rgba(27,26,22,.38))}
.pino-stand.hop{animation:phop .74s var(--ease)}
@keyframes pwaddle{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-9px) rotate(3deg)}}
@keyframes phop{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-44px) rotate(-8deg) scale(1.04)}
  55%{transform:translateY(0) rotate(7deg)}78%{transform:translateY(-9px) rotate(-3deg)}100%{transform:translateY(0)}}
.pino-say{position:absolute;z-index:3;top:3%;left:50%;transform:translateX(-50%);
  background:var(--paper-3);color:var(--ink);font-family:'Shantell Sans',cursive;font-weight:700;font-size:1rem;
  padding:9px 16px;border-radius:14px;white-space:nowrap;box-shadow:0 14px 30px rgba(27,26,22,.2);
  border:1.5px solid var(--line);animation:saypop .5s var(--ease)}
.pino-say::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--paper-3);border-bottom:0}
@keyframes saypop{0%{opacity:0;transform:translateX(-50%) translateY(7px) scale(.9)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.hatch-cap{text-align:center;font-family:'Shantell Sans',cursive;font-weight:700;color:var(--ink-soft);
  margin-top:14px;font-size:1.02rem}
html[data-motion="off"] .pino-stand{animation:none!important}

/* ============================================================
   FINAL CTA — colourful playful panel
   ============================================================ */
.cta-panel-sec{padding-block:clamp(80px,10vw,150px);background:var(--paper)}
.cta-panel{position:relative;overflow:hidden;border-radius:34px;border:2px solid var(--ink);
  padding:clamp(40px,7vw,92px);color:var(--ink);
  background:linear-gradient(135deg,var(--sky2) 0%,#BFE3C4 52%,#F6D78A 100%);
  box-shadow:0 30px 60px -34px rgba(27,26,22,.5)}
.cta-panel .cp-pat{position:absolute;inset:0;background-image:url(../patterns/apple-pear-pat.png);
  background-size:300px;opacity:.16;mix-blend-mode:multiply;pointer-events:none}
.cta-panel .cp-inner{position:relative;z-index:2;max-width:62%}
.cta-panel h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.025em;
  font-size:clamp(2.3rem,5.2vw,4.6rem);line-height:.98;margin-top:10px;color:var(--ink)}
.cta-panel .cp-lede{color:var(--ink-soft);font-size:clamp(1.06rem,1.4vw,1.2rem);max-width:42ch;margin-top:18px}
.cta-panel .cp-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}
.cta-panel .cp-duck{position:absolute;right:5%;bottom:0;width:clamp(120px,18vw,240px);z-index:3;
  transform-origin:55% 90%;animation:waddle 2.6s var(--ease) infinite}
@keyframes waddle{0%,100%{transform:rotate(-5deg) translateY(0)}25%{transform:rotate(2deg) translateY(-8px)}
  50%{transform:rotate(5deg) translateY(0)}75%{transform:rotate(2deg) translateY(-8px)}}
html[data-motion="off"] .cta-panel .cp-duck{animation:none}

/* dusk — playful/mysterious bridge: light-blue story → evening sky → dark footer */
.dusk{position:relative;overflow:hidden;text-align:center;padding-top:clamp(54px,7vw,104px);
  background:linear-gradient(180deg,
    var(--sky-soft) 0%,
    #C2E4F7 26%,
    #A6C6DD 52%,
    #7C9FBC 76%,
    #4E6E8C 100%)}
.dusk-sky::before{content:"";position:absolute;left:50%;bottom:26%;transform:translateX(-50%);
  width:58%;height:62%;z-index:0;pointer-events:none;filter:blur(26px);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--blue) 64%,transparent),transparent 72%)}
.dusk-line{font-family:'Shantell Sans',cursive;font-weight:700;color:var(--blue-deep);
  font-size:clamp(1.2rem,2.5vw,1.95rem);position:relative;z-index:4;margin:0 auto;max-width:24ch;padding-inline:24px}
.dusk-sky{position:relative;height:clamp(200px,24vw,320px);margin-top:clamp(26px,4vw,56px)}
.dusk-stars{position:absolute;inset:0;z-index:1;pointer-events:none}
.dusk-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 6px var(--blue);opacity:.5;animation:twinkle 3.2s var(--ease) infinite}
@keyframes twinkle{0%,100%{opacity:.18;transform:scale(.7)}50%{opacity:.95;transform:scale(1.25)}}
.dusk-pino{position:absolute;left:50%;bottom:33%;transform:translateX(-50%);z-index:2;
  width:clamp(104px,13vw,168px);height:auto;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.4));
  animation:pinopeek 7s var(--ease) infinite}
@keyframes pinopeek{
  0%   {transform:translateX(-50%) translateY(128px) rotate(-5deg)}  /* hidden behind the hill */
  14%  {transform:translateX(-50%) translateY(0)     rotate(-5deg)}  /* pops up */
  23%  {transform:translateX(-50%) translateY(5px)   rotate(4deg)}
  32%  {transform:translateX(-50%) translateY(-2px)  rotate(-3deg)}  /* peek-wobble */
  40%  {transform:translateX(-50%) translateY(0)     rotate(2deg)}
  60%  {transform:translateX(-50%) translateY(0)     rotate(0)}      /* holds — you see him */
  76%  {transform:translateX(-50%) translateY(128px) rotate(6deg)}   /* ducks back down */
  100% {transform:translateX(-50%) translateY(128px) rotate(0)}      /* now you don't */
}
.dusk-bubbles{position:absolute;left:50%;bottom:30%;transform:translateX(-50%);width:120px;height:50%;z-index:2;pointer-events:none}
.dusk-bubbles i{position:absolute;bottom:0;width:7px;height:7px;border-radius:50%;
  background:color-mix(in srgb,var(--blue) 60%,#fff);opacity:0;box-shadow:0 0 6px var(--blue)}
.dusk-bubbles i:nth-child(1){left:30%;animation:bub 5s var(--ease) .4s infinite}
.dusk-bubbles i:nth-child(2){left:54%;width:5px;height:5px;animation:bub 6.2s var(--ease) 1.8s infinite}
.dusk-bubbles i:nth-child(3){left:44%;width:9px;height:9px;animation:bub 7s var(--ease) 3.4s infinite}
.dusk-hill{position:absolute;left:-12%;right:-12%;bottom:0;height:60%;z-index:3;background:var(--night-2);
  border-radius:50% 50% 0 0/100% 100% 0 0;
  box-shadow:0 -1px 30px 2px color-mix(in srgb,var(--blue) 40%,transparent)}
html[data-motion="off"] .dusk-stars i,html[data-motion="off"] .dusk-pino,
  html[data-motion="off"] .dusk-bubbles i{animation:none}
html[data-motion="off"] .dusk-pino{transform:translateX(-50%) translateY(0)}
@media(prefers-reduced-motion:reduce){.dusk-bubbles{display:none}}

/* blends wrapper — the flavour island floats directly over the first blend */
.blends-wrap{position:relative;background:#5FAF7B;padding-top:clamp(16px,2.4vw,30px)}
.flavbar{margin-bottom:-58px}
.blend:first-of-type{padding-top:clamp(96px,10vw,140px)}

/* extra responsive for the colour act */
@media(max-width:900px){
  .blend-grid{grid-template-columns:1fr;gap:34px}
  .blend.rev .blend-copy{order:0}
  .blend-visual{min-height:400px;order:-1}
  /* centre the blend copy on mobile */
  .blend-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
  .blend-copy .blend-desc,.blend-copy .blend-ingr{max-width:46ch;margin-inline:auto}
  .blend-notes,.claims,.blend-meta,.blend-cta{justify-content:center}
  .blend-meta{width:100%}
  .story-grid{grid-template-columns:1fr;gap:30px}
  .story-stage{order:-1}
  .cta-panel .cp-inner{max-width:100%}
  .cta-panel .cp-duck{opacity:.22;right:-2%}
}
@media(max-width:520px){
  .blend-meta .mi{flex:1 1 100%}
  .flavbar .flabel{display:none}
}

/* ============================================================
   B2B PAGE — light + colourful refresh
   ============================================================ */
.b2b-hero2{position:relative;overflow:hidden;background:var(--sky-soft);
  padding:clamp(132px,17vh,180px) 0 clamp(56px,7vw,96px)}
.b2b-hero2::before{content:"";position:absolute;inset:0;background-image:url(../patterns/apple-pear-pat.png);
  background-size:380px;opacity:.05;mix-blend-mode:multiply;pointer-events:none}
.b2b-hero2 .wrap{position:relative;z-index:2}
.b2b-hero2 h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(2.8rem,7vw,6rem);line-height:.96;max-width:15ch;color:var(--ink);text-wrap:balance}
.b2b-hero2 h1 .script{color:var(--blue-deep)}
.b2b-hero2 .lede{font-size:clamp(1.08rem,1.6vw,1.4rem);color:var(--ink-soft);max-width:46ch;margin-top:24px;line-height:1.55}
.b2b-hero2 .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.b2b-pile{display:flex;align-items:flex-end;justify-content:flex-start;gap:0;margin-top:46px}
.b2b-pile img{height:clamp(140px,20vw,230px);width:auto;margin-inline:-18px;
  filter:drop-shadow(0 22px 22px rgba(27,26,22,.22));transition:transform .4s var(--ease)}
.b2b-pile img:hover{transform:translateY(-14px) scale(1.05);z-index:5}
.b2b-pile img:nth-child(odd){transform:translateY(10px)}

.sec-head{display:grid;gap:16px;margin-bottom:clamp(36px,4.5vw,56px)}
.sec-head h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.022em;
  font-size:clamp(2rem,4.4vw,3.5rem);line-height:1;max-width:20ch;color:var(--ink);text-wrap:balance}
.sec-head h2 .script{color:var(--blue-deep)}

.why2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.why-card{background:var(--paper-3);border:1.5px solid var(--line);border-radius:22px;padding:28px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.why-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card,0 24px 50px -34px rgba(27,26,22,.45))}
.why-card .wn{font-family:'Space Mono',monospace;font-weight:700;font-size:.78rem;letter-spacing:.12em;color:var(--blue-deep)}
.why-card h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.28rem;margin:14px 0 8px;letter-spacing:-.01em;color:var(--ink)}
.why-card p{color:var(--ink-soft);font-size:.97rem;line-height:1.55}

.aud-tags{display:flex;flex-wrap:wrap;gap:13px}
.aud-tag{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1.3rem,2.8vw,2.3rem);
  padding:.34em .8em;border-radius:999px;background:var(--paper-3);border:2px solid var(--ink);
  transition:.2s var(--ease);letter-spacing:-.01em;color:var(--ink)}
.aud-tag:hover{background:var(--ink);color:var(--paper-3);transform:translateY(-3px)}

.lineup-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.lineup-card{position:relative;overflow:hidden;border-radius:22px;padding:26px 16px 22px;text-align:center;
  background:var(--bc-tint);border:1.5px solid color-mix(in srgb,var(--bc) 26%,var(--line));
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.lineup-card::before{content:"";position:absolute;inset:0;background-image:var(--bc-pat);background-size:200px;
  opacity:.12;mix-blend-mode:multiply;pointer-events:none}
.lineup-card:hover{transform:translateY(-6px);box-shadow:0 24px 44px -28px rgba(27,26,22,.45)}
.lineup-card .lc{position:relative;z-index:2}
.lineup-card img.lc-bottle{height:150px;width:auto;margin:0 auto 14px;
  filter:drop-shadow(0 14px 14px rgba(27,26,22,.2));transition:transform .35s var(--ease)}
.lineup-card:hover img.lc-bottle{transform:translateY(-5px) scale(1.04)}
.lineup-card h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1rem;line-height:1.05;color:var(--ink)}
.lineup-card .lc-herb{font-family:'Shantell Sans',cursive;font-weight:700;color:var(--bc-ink);font-size:.92rem;margin-top:5px}

.form-success{display:none;text-align:center;padding:34px 10px}
.form-success.show{display:block}
.form-success img{width:120px;margin:0 auto 16px}
.form-success h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.7rem;color:var(--ink)}
.form-success p{color:var(--ink-soft);margin-top:8px}

@media(max-width:980px){.lineup-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.lineup-grid{grid-template-columns:repeat(2,1fr)}.b2b-pile img{height:120px}}

/* ============================================================
   B2B PAGE v2 — considered wholesale flow
   ============================================================ */
/* hero as two columns */
.b2b-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,5vw,72px);align-items:center}
.b2b-copy .hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}
.b2b-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.b2b-chip{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.84rem;color:var(--ink);
  background:var(--paper-3);border:1.5px solid var(--line);padding:.5em .9em;border-radius:999px}
.b2b-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cd,var(--blue-deep));flex:none}
.b2b-chip:nth-child(1){--cd:#5FAF7B}.b2b-chip:nth-child(2){--cd:#E08A1E}
.b2b-chip:nth-child(3){--cd:#E73F5B}.b2b-chip:nth-child(4){--cd:#9B4F9C}
.b2b-stage{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:clamp(280px,34vw,420px)}
.b2b-stage .halo2{position:absolute;z-index:0;width:78%;aspect-ratio:1;border-radius:50%;top:8%;
  background:radial-gradient(closest-side,rgba(154,200,224,.6),transparent 70%);filter:blur(8px)}
.b2b-stage .b2b-pile{margin-top:0;position:relative;z-index:1}
.b2b-stage .b2b-pile img{height:clamp(180px,24vw,300px)}

/* trust stat bar */
.trust-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1.5px solid var(--line);border-radius:20px;overflow:hidden;background:var(--paper-3)}
.trust-cell{padding:24px clamp(16px,2.5vw,30px);border-right:1.5px solid var(--line)}
.trust-cell:last-child{border-right:0}
.trust-cell b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(1.7rem,3vw,2.5rem);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.trust-cell span{display:block;margin-top:8px;font-family:'Space Mono',monospace;font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}

/* refined why grid — first card is a wide feature */
.why2-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.why-card{grid-column:span 2}
.why-card.feature{grid-column:span 6;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(135deg,#EAF1DD,#E4EEF6);border-color:transparent}
.why-card.feature h3{font-size:clamp(1.6rem,3vw,2.3rem);max-width:18ch}
.why-card.feature p{font-size:1.06rem;max-width:52ch}

/* product range — informative sales cards */
.range-note{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin:-12px 0 26px;
  font-family:'Space Mono',monospace;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.range-note b{color:var(--ink)}
.lineup-card .lc-meta{display:flex;justify-content:center;gap:0;margin-top:14px;
  border-top:1.5px solid color-mix(in srgb,var(--bc) 22%,var(--line));padding-top:12px}
.lineup-card .lc-meta div{flex:1;padding:0 4px;border-right:1px solid color-mix(in srgb,var(--bc) 20%,var(--line))}
.lineup-card .lc-meta div:last-child{border-right:0}
.lineup-card .lc-meta b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:1.02rem;color:var(--ink);line-height:1}
.lineup-card .lc-meta span{display:block;margin-top:3px;font-family:'Space Mono',monospace;
  font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.lineup-card .lc-go{display:inline-flex;align-items:center;gap:.4em;margin-top:14px;
  font-size:.78rem;font-weight:700;color:var(--bc-ink);opacity:0;transform:translateY(4px);
  transition:.3s var(--ease)}
.lineup-card:hover .lc-go{opacity:1;transform:none}

/* ordering process */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
.step{position:relative;background:var(--paper-3);border:1.5px solid var(--line);border-radius:22px;
  padding:30px 26px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.step:hover{transform:translateY(-5px);box-shadow:0 24px 50px -34px rgba(27,26,22,.45)}
.step .sn{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--ink);color:var(--paper-3);font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;font-size:1.2rem;margin-bottom:18px}
.step h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.32rem;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:8px}
.step p{color:var(--ink-soft);font-size:.97rem;line-height:1.55}
.step:not(:last-child)::after{content:"→";position:absolute;top:50%;right:-13px;transform:translateY(-50%);
  z-index:3;font-size:1.2rem;color:var(--muted-2);background:var(--paper);border-radius:50%;
  width:26px;height:26px;display:grid;place-items:center}

/* contact: sample callout above the form */
.sample-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;justify-content:space-between;
  background:linear-gradient(120deg,#FCEAD9,#F3E0EC);border:1.5px solid var(--line);
  border-radius:22px;padding:26px clamp(22px,3vw,34px);margin-bottom:clamp(28px,3.5vw,42px)}
.sample-cta .st{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1.2rem,2.2vw,1.6rem);
  letter-spacing:-.01em;color:var(--ink);max-width:30ch}
.sample-cta .st .script{color:var(--blue-deep)}

@media(max-width:860px){
  .b2b-grid{grid-template-columns:1fr;gap:18px}
  .b2b-stage{order:-1;min-height:auto}
  .why2-grid{grid-template-columns:repeat(2,1fr)}
  .why-card,.why-card.feature{grid-column:span 2}
  .steps{grid-template-columns:1fr}
  .step:not(:last-child)::after{content:"↓";top:auto;bottom:-13px;right:50%;transform:translateX(50%)}
}
@media(max-width:560px){
  .trust-bar{grid-template-columns:repeat(2,1fr)}
  .trust-cell:nth-child(2){border-right:0}
  .trust-cell:nth-child(1),.trust-cell:nth-child(2){border-bottom:1.5px solid var(--line)}
  .why2-grid{grid-template-columns:1fr}
  .why-card,.why-card.feature{grid-column:span 1}
}

/* ============================================================
   HERO 2 — calm, playful, five blends centre stage
   ============================================================ */
.hero2{position:relative;overflow:hidden;text-align:center;
  --juice:transparent;
  background:linear-gradient(176deg,#FFF6E9 0%,#FCEAD9 40%,#F3E0EC 72%,#E4EEF6 100%);
  padding:clamp(116px,14vh,168px) 0 clamp(30px,4vw,56px)}
/* hover juice-wash — drank-kleur die vloeiend oplicht bij hover over een flesje */
.hero2-tint{position:absolute;inset:-30%;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.3s var(--ease);mix-blend-mode:multiply;
  background:
    radial-gradient(38% 42% at 28% 28%,var(--juice),transparent 60%),
    radial-gradient(42% 48% at 74% 60%,var(--juice),transparent 62%),
    radial-gradient(48% 54% at 48% 102%,var(--juice),transparent 64%),
    radial-gradient(30% 36% at 60% 18%,var(--juice),transparent 58%);
  background-size:200% 200%;filter:saturate(1.25);
  animation:juiceMorph 14s ease-in-out infinite}
.hero2.tinting .hero2-tint{opacity:.78}
@keyframes juiceMorph{
  0%{background-position:0% 50%,100% 30%,40% 100%,60% 0%}
  25%{background-position:30% 30%,70% 60%,20% 80%,80% 20%}
  50%{background-position:60% 60%,40% 80%,70% 50%,30% 40%}
  75%{background-position:20% 70%,80% 40%,50% 90%,70% 10%}
  100%{background-position:0% 50%,100% 30%,40% 100%,60% 0%}}
/* per-flavour pattern overlay that fades in on hover — seamless full-width tile */
.hero2-pat2{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--hpat,none);background-size:380px 380px;
  background-position:0 0;background-repeat:repeat;
  opacity:0;mix-blend-mode:multiply;transition:opacity 1.2s var(--ease);
  animation:patDrift 44s linear infinite}
.hero2.tinting .hero2-pat2{opacity:.14}
@keyframes patDrift{to{background-position:380px 380px}}
/* slow "juice" flow layer — subtle drifting colour washes */
.hero2::after{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;opacity:.55;
  background:
    radial-gradient(38% 44% at 22% 32%,rgba(246,170,86,.55),transparent 60%),
    radial-gradient(42% 48% at 78% 28%,rgba(236,138,168,.5),transparent 62%),
    radial-gradient(46% 50% at 60% 78%,rgba(150,196,224,.5),transparent 64%),
    radial-gradient(40% 46% at 32% 72%,rgba(150,200,150,.42),transparent 62%);
  background-size:160% 160%;
  animation:juiceFlow 26s ease-in-out infinite,juicePulse 11s ease-in-out infinite}
@keyframes juiceFlow{
  0%{background-position:0% 50%,100% 30%,40% 100%,20% 60%}
  50%{background-position:60% 40%,30% 70%,80% 40%,70% 20%}
  100%{background-position:0% 50%,100% 30%,40% 100%,20% 60%}}
@keyframes juicePulse{0%,100%{opacity:.42}50%{opacity:.66}}
.hero2::before{content:"";position:absolute;inset:0;z-index:1;background-image:url(../patterns/apple-pear-pat.png);
  background-size:380px 380px;background-position:0 0;background-repeat:repeat;
  opacity:.05;mix-blend-mode:multiply;pointer-events:none;transition:opacity 1.1s var(--ease);
  animation:patDrift 44s linear infinite}
.hero2.tinting::before{opacity:0}
/* soft colour blobs floating behind the bottles */
.hero2-blob{position:absolute;z-index:0;border-radius:50%;filter:blur(46px);pointer-events:none;opacity:.5}
.hero2-blob--a{width:42vw;height:42vw;max-width:560px;max-height:560px;left:-6%;top:24%;
  background:radial-gradient(closest-side,#F7C56B,transparent);
  animation:blobDriftA 19s ease-in-out infinite}
.hero2-blob--b{width:38vw;height:38vw;max-width:520px;max-height:520px;right:-5%;top:18%;
  background:radial-gradient(closest-side,#EFA6C4,transparent);
  animation:blobDriftB 23s ease-in-out infinite}
@keyframes blobDriftA{0%,100%{transform:translate(0,0) scale(1);opacity:.42}
  50%{transform:translate(7%,5%) scale(1.12);opacity:.62}}
@keyframes blobDriftB{0%,100%{transform:translate(0,0) scale(1.08);opacity:.6}
  50%{transform:translate(-6%,7%) scale(.95);opacity:.4}}

.hero2-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.hero2 .eyebrow{color:var(--ink-soft)}
.hero2 h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.032em;
  font-size:clamp(2.9rem,7.6vw,6rem);line-height:.9;color:var(--ink);margin-top:14px;text-wrap:balance}
.hero2 h1 .script{color:#E0623C}
.shaker{display:inline-block;transform-origin:50% 78%;animation:wordshake 3.2s var(--ease) infinite}
@keyframes wordshake{
  0%,70%,100%{transform:rotate(0) translateX(0)}
  73%{transform:rotate(-6deg) translateX(-3px)}76%{transform:rotate(6deg) translateX(3px)}
  79%{transform:rotate(-4deg) translateX(-2px)}82%{transform:rotate(4deg) translateX(2px)}
  85%{transform:rotate(-2deg)}88%{transform:rotate(1deg)}91%{transform:rotate(0)}}

/* the bottle stage — the hero's centrepiece */
.hero2-stage{position:relative;display:flex;align-items:flex-end;justify-content:center;
  margin-top:clamp(8px,2vw,26px);min-height:clamp(300px,40vw,500px);width:100%}
.hb{position:relative;flex:0 0 auto;margin-inline:clamp(-40px,-2.6vw,-16px);cursor:pointer;display:block;
  transition:transform .4s var(--ease);z-index:1}
.hb:hover{z-index:9}
.hb:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:20px}
.hb .halo{position:absolute;z-index:0;left:50%;top:46%;width:150%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--hc) 46%,transparent),transparent 70%);opacity:.6}
.hb img{position:relative;z-index:2;height:clamp(238px,30vw,432px);width:auto;display:block;
  filter:drop-shadow(0 26px 26px rgba(27,26,22,.22));animation:hbfloat 6s var(--ease) infinite;
  transition:transform .4s var(--ease),filter .4s var(--ease)}
.hb:hover img{transform:scale(1.16) translateY(-14px);filter:drop-shadow(0 38px 34px rgba(27,26,22,.32));animation-play-state:paused}
/* gentle bouquet arc — centre bottle tallest */
.hb:nth-child(2){--hc:#5FAF7B;transform:translateY(40px) rotate(-13deg);z-index:1}
.hb:nth-child(3){--hc:#F18E3D;transform:translateY(14px) rotate(-7deg);z-index:2}
.hb:nth-child(4){--hc:#E73F5B;transform:translateY(-12px) rotate(0);z-index:3}
.hb:nth-child(5){--hc:#E7434B;transform:translateY(14px) rotate(7deg);z-index:2}
.hb:nth-child(6){--hc:#9B4F9C;transform:translateY(40px) rotate(13deg);z-index:1}
.hb:nth-child(3) img{animation-delay:.5s}
.hb:nth-child(4) img{animation-delay:1s}
.hb:nth-child(5) img{animation-delay:1.5s}
.hb:nth-child(6) img{animation-delay:2s}
@keyframes hbfloat{50%{transform:translateY(-13px)}}
.hb img:hover{animation:none}
.hb img.hb-shake{animation:hbshake .6s var(--ease)}
@keyframes hbshake{0%,100%{transform:translateY(-3px) rotate(0)}
  18%{transform:translateY(-3px) rotate(-9deg)}38%{transform:rotate(7deg)}
  58%{transform:rotate(-4deg)}78%{transform:rotate(2deg)}}

/* spinning brand seal — playful badge tucked above the arc */
.hero2-seal{position:absolute;z-index:6;top:-44px;right:max(3%,calc(50% - 560px));
  width:clamp(128px,13vw,184px);aspect-ratio:1;border-radius:50%;
  background:var(--paper-3) center/cover no-repeat;
  box-shadow:0 18px 40px rgba(27,26,22,.24),0 0 0 1px var(--line);display:grid;place-items:center;
  animation:floaty 7s var(--ease) infinite}
.hero2-seal .ring{position:absolute;inset:-22px;animation:spin 24s linear infinite}
.hero2-seal .ring text{font-family:'Space Mono',monospace;font-size:8.1px;letter-spacing:.2em;
  fill:var(--ink-soft);text-transform:uppercase}

.hero2-sub{font-family:'Space Mono',monospace;font-size:clamp(.72rem,1.1vw,.82rem);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:clamp(18px,2.4vw,30px)}
.hero2-sub .hero2-dot{color:#E0623C;margin:0 .4em}
.hero2-cta{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;margin-top:20px}

.hero2-scroll{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:11px;
  margin-top:clamp(22px,3vw,38px);
  font-family:'Space Mono',monospace;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.hero2-scroll .ln{width:42px;height:1px;background:currentColor;opacity:.5;position:relative;overflow:hidden}
.hero2-scroll .ln::after{content:"";position:absolute;inset:0;background:#E0623C;
  animation:sweep 2.4s var(--ease) infinite}

html[data-motion="off"] .hb img,html[data-motion="off"] .hero2-seal,html[data-motion="off"] .shaker,
html[data-motion="off"] .hero2-seal .ring,html[data-motion="off"] .hero2-scroll .ln::after,
html[data-motion="off"] .hero2::after,html[data-motion="off"] .hero2-blob,
html[data-motion="off"] .hero2-tint,html[data-motion="off"] .hero2-pat2{animation:none}

@media(max-width:680px){
  .hero2{padding-top:clamp(98px,12vh,140px);padding-bottom:clamp(66px,18vw,92px)}
  .hero2 h1{position:relative;z-index:3}
  .hero2-stage{min-height:auto;margin-top:18px;flex-wrap:nowrap}
  .hb{margin-inline:-22px}
  .hb img{height:clamp(150px,33vw,210px)}
  .hb:nth-child(2),.hb:nth-child(6){transform:translateY(28px) rotate(0)}
  .hb:nth-child(3),.hb:nth-child(5){transform:translateY(10px) rotate(0)}
  .hb:nth-child(4){transform:translateY(-6px)}
  .hero2-stage .hero2-seal{
    display:grid!important;
    top:auto;right:clamp(18px,5vw,28px);bottom:-238px;
    width:clamp(88px,24vw,108px);
    transform:none;
  }
  .hero2-stage .hero2-seal .ring{
    inset:auto;left:50%;top:50%;
    width:calc(100% + 34px);height:calc(100% + 34px);
    overflow:visible;
    animation:spinCentered 24s linear infinite;
  }
  .hero2-stage .hero2-seal .ring text{font-size:7.2px;letter-spacing:.16em}
}