/* ============================================================
   NORDQVIST KUPLIVA . FRESH NORDIC
   Flat color blocks, tea-leaf green leading, bright + playful.
   ============================================================ */

:root{
  /* greens (the brand) */
  --green:#1F7A4D;          /* tea-leaf green */
  --green-hero:#0F5536;     /* deep hero green */
  --green-bright:#34A867;   /* fresh pop green */
  --green-deep:#0E4D32;     /* rich green */
  --green-ink:#08372A;      /* darkest, text on light */
  /* warm neutrals */
  --cream:#F6EFDF;          /* paper background */
  --ink:#143A2C;            /* body text on cream */
  /* peach . Persikka-Passion */
  --peach:#FFB25A;
  --peach-deep:#F2802B;
  /* berry . Mansikka-Raparperi */
  --berry:#D24E92;
  --berry-deep:#A8307A;
  /* pops */
  --sun:#FFC83D;

  --serif:"Bricolage Grotesque", system-ui, sans-serif;
  --sans:"Hanken Grotesk","Inter",system-ui,sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --back:cubic-bezier(.34,1.56,.64,1);
  --pad:clamp(20px,5vw,80px);
  --r:28px;                 /* feature card (.fcard) */
  --r-card:20px;            /* panel cards (.benefit, .store) */
  --r-chip:14px;            /* inner chips, icons, logos */
  --track-caps:.14em;       /* uniform tracking for uppercase eyebrow/labels */
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ color-scheme:light; -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  font-family:var(--sans);
  background:var(--green-hero);
  color:var(--cream);
  line-height:1.55;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-optical-sizing:auto;
  cursor:none;
}
@media (hover:none){ body{ cursor:auto; } }
svg,img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:none; }
::selection{ background:var(--sun); color:var(--green-ink); }

/* ---------- keyboard focus : body sets cursor:none, so keyboard users need a clear ring ---------- */
:where(a, button, .fcard, [tabindex]):focus-visible{
  outline:3px solid var(--sun);
  outline-offset:3px;
  border-radius:6px;
}
/* light blocks (cream, peach, sun yellow): the sun ring melts in, so switch to dark green-ink */
.act--split :focus-visible,
.act--buy :focus-visible,
.act--peach :focus-visible,
.quote--cream :focus-visible,
.marquee--sun :focus-visible,
.marquee--green :focus-visible{ outline-color:var(--green-ink); }

/* ---------- skip link : first focusable element, off-screen until focused ---------- */
.skip-link{
  position:fixed; top:10px; left:10px; z-index:140;
  transform:translateY(-150%);
  background:var(--sun); color:var(--green-ink);
  font-weight:700; font-size:14px; padding:12px 18px; border-radius:999px;
  transition:transform .2s var(--ease);
}
.skip-link:focus{ transform:translateY(0); }

/* ---------- WebGL stage : transparent, behind text, above section bg ---------- */
#webgl{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:2; display:block; pointer-events:none;
  opacity:0;
  transition:opacity .6s ease;
}
body.scene-3d-ready #webgl.is-ready{ opacity:1; }
.hero-graphic{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  --gx:.5; --gy:0; --gz:0; --gscale:1; --gmix:0; --gsecond:0;
}
.hero-graphic__can{
  position:absolute;
  /* --gx is a fraction of half the viewport (0 = centre, 1 = edge), matching scene.js's posX */
  left:calc(50% + var(--gx) * 50vw);
  top:calc(50% + var(--gy) * 12vh);
  width:min(38vw,300px);
  height:auto;
  transform:translate(-50%,-50%) scale(var(--gscale)) rotateZ(calc(var(--gz) * 1rad));
  transform-origin:center center;
  filter:drop-shadow(0 32px 64px rgba(0,0,0,.28));
  will-change:transform,opacity;
}
.hero-graphic__peach{
  opacity:calc(1 - var(--gmix));
  animation:hero-float 3.2s ease-in-out infinite;
}
.hero-graphic__berry{
  opacity:var(--gmix);
  animation:hero-float 3.2s ease-in-out infinite;
  animation-delay:-1.1s;
}
.hero-graphic__second{
  left:calc(50% + var(--gx) * 50vw + 31vw);   /* 31vw ~= the 1.64-world-unit pair gap in scene.js */
  opacity:calc(var(--gsecond) * (1 - var(--gmix) * .35));
  transform:translate(-50%,-50%) scale(calc(var(--gscale) * .94)) rotateZ(calc(var(--gz) * -.6rad));
  animation:hero-float 3.2s ease-in-out infinite;
  animation-delay:-2.2s;
}
@keyframes hero-float{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -10px; }
}
body.webp-hero #webgl{ display:none; }
body.webp-hero .hero-graphic{
  opacity:1; visibility:visible;
}
body.scene-3d-ready .hero-graphic{
  opacity:0;
  visibility:hidden;
  transition:opacity .6s ease, visibility .6s;
}
.fallback-art{ position:fixed; inset:0; z-index:1; display:none; }
.no-webgl .fallback-art{ display:grid; place-items:center; }
.no-webgl .fallback-art::after{
  content:""; width:min(40vw,300px); aspect-ratio:.46; border-radius:20px/10px;
  background:linear-gradient(180deg,var(--peach) 56%,var(--cream) 56%);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.4);
}

/* ---------- Cursor ---------- */
.cursor{ position:fixed; top:0; left:0; width:14px; height:14px; border-radius:50%; background:var(--sun); z-index:130; pointer-events:none; transform:translate(-50%,-50%); transition:width .25s,height .25s,background .25s; }
.cursor.is-hover{ width:46px; height:46px; background:rgba(255,200,61,.28); border:1.5px solid var(--sun); }
@media (hover:none){ .cursor{ display:none; } }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:
    max(clamp(14px,2vw,24px), env(safe-area-inset-top))
    max(var(--pad), env(safe-area-inset-right))
    clamp(14px,2vw,24px)
    max(var(--pad), env(safe-area-inset-left));
}
.nav{ color:var(--cream); transition:color .4s var(--ease); }
body[data-nav="onlight"] .nav{ color:var(--green-ink); }
.nav__brand{ display:block; width:clamp(118px,13vw,156px); aspect-ratio:958/200; background-color:currentColor; -webkit-mask:url("Nordqvist_Logo_2020.png") left center / contain no-repeat; mask:url("Nordqvist_Logo_2020.png") left center / contain no-repeat; transition:transform .25s var(--back); }
@media (hover:hover){ .nav__brand:hover{ transform:translateY(-1px); } }
.nav__tag{ font-size:12px; font-weight:600; letter-spacing:var(--track-caps); text-transform:uppercase; opacity:.8; }
.nav__tag i{ font-style:normal; }
.nav__cta{ font-weight:700; font-size:13px; letter-spacing:.04em; padding:11px 20px; border-radius:999px; background:var(--sun); color:var(--green-ink); min-height:44px; display:inline-flex; align-items:center; justify-content:center; transition:transform .25s var(--back); }
@media (hover:hover){ .nav__cta:hover{ transform:translateY(-2px) rotate(-1deg); } }
@media (max-width:820px){ .nav__tag{ display:none; } }

/* ---------- nav right cluster + language switcher ---------- */
.nav__right{ display:inline-flex; align-items:center; gap:clamp(8px,1.4vw,14px); }
.langswitch{ display:inline-flex; align-items:center; gap:2px; padding:3px; border:1.5px solid currentColor; border-radius:999px; }
.langswitch__btn{ font-weight:700; font-size:12px; letter-spacing:.06em; line-height:1; padding:7px 11px; min-height:32px; border-radius:999px; color:inherit; opacity:.62; display:inline-flex; align-items:center; justify-content:center; transition:background .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease); }
.langswitch__btn.is-active{ opacity:1; background:var(--sun); color:var(--green-ink); }
@media (hover:hover){ .langswitch__btn:not(.is-active):hover{ opacity:1; } }
/* keyboard focus inside the pill stays inside its rounded shape */
.langswitch__btn:focus-visible{ border-radius:999px; outline-offset:1px; }
@media (max-width:380px){
  .langswitch__btn{ padding:7px 9px; font-size:11px; }
  .nav__cta{ padding:9px 14px; font-size:12px; }
}

/* ---------- Sections : flat color blocks ---------- */
#content{ position:relative; }
.act{
  /* Deliberately NO z-index (and no content-visibility below): the canvas has to paint
     between a section's background and its text. Any stacking context here - from z-index
     or from content-visibility's implied contain:paint - makes the section atomic, so
     background and text paint as one unit and the canvas can only ever go behind both
     (can invisible) or in front of both (can covers the text). Leaving .act at z-index
     auto keeps its background at level 0, under #webgl's 2, while .act > * clears it at 5. */
  position:relative;
  min-height:100svh;
  padding:16svh var(--pad) 12svh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.act > *{ position:relative; z-index:5; isolation:isolate; }   /* must clear #webgl's z-index:2 by a real margin, not tie it: the canvas has pointer-events:none, so a tie still paints over content even though it never wins hit-tests. isolation:isolate forces its own stacking context rather than relying on the z-index alone. */

/* Below-fold sections: skip layout/paint until near viewport.
   .act is excluded on purpose - contain:paint would trap the canvas (see .act above).
   These three sit at z-index 2 and are meant to paint fully above it, so containment is safe. */
.quote,
.marquee,
.foot{
  content-visibility:auto;
  contain-intrinsic-size:auto 100svh;
}
.quote,
.marquee{ contain-intrinsic-size:auto 120px; }
.foot{ contain-intrinsic-size:auto 320px; }

.act--hero{ background:var(--green-hero); color:var(--cream); }
.act--split{ background:var(--cream); color:var(--green-ink); }
.act--peach{ background:var(--peach); color:var(--green-ink); }
.act--berry{ background:var(--berry); color:#fff; }
.act--benefits{ background:var(--green-deep); color:var(--cream); }
.act--buy{ background:var(--cream); color:var(--green-ink); }

/* ---------- shared type ---------- */
.kicker{ font-weight:700; font-size:clamp(11px,1.1vw,13px); letter-spacing:var(--track-caps); text-transform:uppercase; display:inline-flex; align-items:center; gap:10px; margin-bottom:clamp(18px,3vh,30px); }
.kicker i{ font-style:normal; opacity:.55; }
.kicker.center{ justify-content:center; width:100%; }
.kicker .dot{ width:7px; height:7px; border-radius:50%; background:var(--sun); display:inline-block; }
.h2{ font-family:var(--serif); font-weight:800; font-size:clamp(34px,6vw,86px); line-height:.98; letter-spacing:-.02em; }
.h2.center{ text-align:center; }
.h2 em,.flavor__name em{ font-style:normal; color:var(--sun); }
em{ font-style:normal; }

/* typographic polish: balance multi-line display headings, prevent single-word orphans in body copy. Progressive enhancement, ignored by older browsers. */
.h2,.flavor__name,.buy__title,.foot__tag,.quote__mark{ text-wrap:balance; }
.hero__sub,.flavor__lead,.quote__sub,.benefit span,.store span{ text-wrap:pretty; }

/* ---------- pills / stickers / blobs ---------- */
.pills{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; }
.pill{ font-weight:600; font-size:13px; padding:9px 16px; border-radius:999px; border:1.5px solid currentColor; }
.act--hero .pill{ border-color:rgba(246,239,223,.45); }

.sticker{ position:absolute; z-index:6; pointer-events:none; display:grid; place-items:center; width:clamp(84px,11vw,128px); aspect-ratio:1; border-radius:50%; font-family:var(--serif); font-weight:800; font-size:clamp(12px,1.4vw,17px); text-align:center; line-height:1; transform:rotate(-12deg); }
.sticker--peach{ top:18svh; right:8vw; background:var(--green); color:var(--cream); }
.sticker--berry{ top:18svh; left:8vw; background:var(--sun); color:var(--green-ink); transform:rotate(10deg); }

.blob{ position:absolute; z-index:0; border-radius:50%; filter:blur(2px); opacity:.9; }
.blob--a{ width:38vw; height:38vw; max-width:520px; max-height:520px; background:var(--green-bright); left:-8vw; bottom:-12vw; opacity:.55; }
.blob--b{ width:22vw; height:22vw; max-width:300px; max-height:300px; background:var(--green-deep); right:6vw; top:14vh; opacity:.5; }

/* ---------- 01 Hero ---------- */
.act--hero{ justify-content:flex-end; min-height:88svh; padding-bottom:10svh; }   /* shorter than full viewport so the marquee below peeks into view */
.hero__in{ max-width:min(92vw,980px); }
.hero__title{ font-family:var(--serif); font-weight:800; font-size:clamp(56px,13vw,200px); line-height:.9; letter-spacing:-.03em; }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .w{ display:inline-block; }
.hero__title .pop{ color:var(--sun); }
.hero__sub{ margin-top:clamp(18px,3vh,30px); max-width:42ch; font-size:clamp(16px,1.6vw,22px); font-weight:500; color:rgba(246,239,223,.92); }
.hero__pills{ margin-top:clamp(22px,4vh,38px); }
/* Hero entrance: a pure-CSS transform-only rise. Transform (not opacity) keeps the
   title painted from first frame, so it stays the LCP element with no delay and no
   layout shift. CSS-driven, so it never waits on JS and can't get stuck hidden.
   Gated to JS + motion-allowed; non-JS / reduced-motion users get it static. */
@media (prefers-reduced-motion: no-preference){
  html.js .hero__in{ animation:hero-rise .8s var(--ease) both; }
}
@keyframes hero-rise{ from{ transform:translateY(26px); } to{ transform:none; } }
.scrollcue{ position:absolute; left:max(var(--pad), env(safe-area-inset-left)); bottom:calc(5svh + env(safe-area-inset-bottom)); z-index:6; display:flex; align-items:center; gap:12px; font-size:12px; font-weight:600; letter-spacing:var(--track-caps); text-transform:uppercase; opacity:.85; transition:opacity .3s var(--ease), transform .3s var(--back); }
@media (hover:hover){ .scrollcue:hover{ opacity:1; transform:translateY(-2px); } }
.scrollcue i{ width:22px; height:34px; border:1.5px solid currentColor; border-radius:12px; position:relative; }
.scrollcue i::after{ content:""; position:absolute; left:50%; top:6px; width:3px; height:7px; border-radius:2px; background:var(--sun); transform:translateX(-50%); animation:cue 1.7s var(--ease) infinite; }
@keyframes cue{ 0%{opacity:0;transform:translate(-50%,0)} 35%{opacity:1} 100%{opacity:0;transform:translate(-50%,12px)} }

/* ---------- 02 Split ---------- */
.act--split{ gap:6vh; }
.split__head .h2{ margin-top:8px; max-width:14ch; }
.split__cards{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,26px); }
.fcard{ text-align:left; border-radius:var(--r); min-height:min(62vh,520px); display:flex; flex-direction:column; justify-content:flex-end; color:var(--cream); transition:transform .35s var(--back), box-shadow .35s var(--ease); position:relative; overflow:hidden; isolation:isolate; }
.fcard--peach{ background:var(--peach); }
.fcard--berry{ background:var(--berry); }
.fcard__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .5s var(--ease); backface-visibility:hidden; transform:translateZ(0); will-change:transform; }
.fcard::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(8,55,42,0) 38%, rgba(8,55,42,.86) 100%); }
@media (hover:hover){
  .fcard:hover{ transform:translateY(-6px); box-shadow:0 22px 36px -22px rgba(8,55,42,.55); }
  .fcard:hover .fcard__img{ transform:scale(1.05); }
}
.fcard__no{ position:absolute; top:20px; left:24px; z-index:2; font-family:var(--serif); font-weight:800; font-size:15px; opacity:.85; }
.fcard__body{ position:relative; z-index:2; display:flex; flex-direction:column; gap:5px; padding:clamp(22px,3vw,40px); }
.fcard__name{ font-family:var(--serif); font-weight:800; font-size:clamp(26px,3.4vw,46px); line-height:1; letter-spacing:-.02em; }
.fcard__base{ font-weight:600; font-size:14px; letter-spacing:.04em; opacity:.85; }
.fcard__go{ margin-top:14px; font-weight:700; font-size:12px; letter-spacing:var(--track-caps); text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; color:var(--sun); }
.fcard__go::after{ content:"\2192"; }

/* ---------- 03 / 04 Flavor blocks ---------- */
.act--peach,.act--berry{ justify-content:center; }
.flavor__copy{ max-width:min(46ch,46vw); display:flex; flex-direction:column; gap:18px; }
.flavor__copy--right{ margin-left:auto; text-align:right; align-items:flex-end; }
.flavor__name{ font-family:var(--serif); font-weight:800; font-size:clamp(48px,9vw,150px); line-height:.86; letter-spacing:-.03em; }
.act--berry .flavor__name,
.act--berry .flavor__lead,
.act--berry .flavor__lead--en,
.act--berry .kicker,
.act--berry .buylinks__label,
.act--berry .buychip{ color:#fff; }
.act--berry .buychip{ border-color:rgba(255,255,255,.88); }
.flavor__lead{ font-size:clamp(16px,1.7vw,22px); font-weight:500; max-width:40ch; }
.flavor__lead--en{ font-size:clamp(13px,1.3vw,16px); }
.act--peach .flavor__lead--en{ color:var(--green-deep); }
.act--berry .flavor__lead--en{ color:rgba(255,255,255,.95); }
.notes{ list-style:none; display:flex; gap:10px; flex-wrap:wrap; }
.flavor__copy--right .notes{ justify-content:flex-end; }
.notes li{ font-weight:700; font-size:13px; padding:8px 15px; border-radius:999px; }
.act--peach .notes li{ background:var(--green); color:var(--cream); }
.act--berry .notes li{ background:var(--sun); color:var(--green-ink); }
.flavor__meta{ display:flex; gap:12px; margin-top:6px; }
.flavor__copy--right .flavor__meta{ justify-content:flex-end; }
.tagprice{ font-family:var(--serif); font-weight:800; font-size:20px; padding:8px 16px; border-radius:var(--r-chip); background:var(--green-ink); color:var(--cream); }
.act--berry .tagprice{ background:var(--cream); color:var(--berry-deep); }
.tagprice--ghost{ background:transparent; border:1.5px solid currentColor; color:inherit; font-weight:700; font-size:13px; display:inline-flex; align-items:center; }

/* ---------- 05 Benefits ---------- */
.act--benefits{ gap:6vh; }
.act--benefits .kicker{ justify-content:center; }
.benefits{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,1.4vw,18px); max-width:1100px; margin:0 auto; width:100%; }
.benefit{ background:#0A4029; border:1.5px solid rgba(246,239,223,.16); border-radius:var(--r-card); padding:clamp(20px,2.4vw,34px); display:flex; flex-direction:column; gap:6px; }
.benefit .benefit__ic{ width:48px; height:48px; border-radius:var(--r-chip); display:grid; place-items:center; background:rgba(255,200,61,.14); color:var(--sun); margin-bottom:clamp(8px,1.2vw,16px); }
.benefit__ic svg{ width:25px; height:25px; stroke:var(--sun); }
.benefit b{ font-family:var(--serif); font-weight:800; font-size:clamp(18px,2vw,26px); line-height:1; }
.benefit span{ font-weight:600; font-size:13px; letter-spacing:.04em; color:rgba(246,239,223,.82); }
@media (max-width:780px){ .benefits{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .benefits{ grid-template-columns:1fr; } }

/* ---------- 06 Where to buy ---------- */
.act--store{ background:var(--green); color:var(--cream); gap:6vh; }
.store__head .h2{ margin-top:8px; max-width:16ch; }
.stores{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.6vw,20px); max-width:920px; width:100%; }
.store{ background:#1A6B43; border:1.5px solid rgba(246,239,223,.2); border-radius:var(--r-card); padding:clamp(20px,2.4vw,32px); display:flex; flex-direction:column; gap:7px; }
.store b{ font-family:var(--serif); font-weight:800; font-size:clamp(20px,2.4vw,30px); line-height:1; }
.store span{ font-weight:600; font-size:14px; color:rgba(246,239,223,.88); }
.store span i{ font-style:normal; opacity:.5; padding:0 .15em; }
.store__logo{ align-self:flex-start; display:inline-flex; align-items:center; justify-content:center; height:58px; padding:0 18px; margin-bottom:8px; background:#fff; border-radius:var(--r-chip); box-shadow:0 8px 20px -12px rgba(8,55,42,.45); }
.store__logo img{ height:42px; width:auto; max-width:180px; object-fit:contain; }
.store__logo--nq img{ height:30px; }   /* wide wordmark sits shorter to match the marks' optical weight */
/* text-only stockist logos: clean wordmark inside the white chip, no image asset.
   The extra .store prefix is needed to beat ".store span" (0,1,1), which would otherwise clobber color/size/weight. */
.store .store__logo--text{ font-family:var(--serif); font-weight:800; font-size:clamp(16px,1.9vw,21px); letter-spacing:-.01em; line-height:1; white-space:nowrap; }
.store .store__logo--wolt{ color:#0086C9; }
.store .store__logo--vkk{ color:#1B4A8F; }
/* .store .store__go : needs the extra class to beat ".store span" (0,1,1), which otherwise clobbers the intended accent */
.store .store__go{ margin-top:auto; padding-top:12px; font-weight:700; font-size:11px; letter-spacing:var(--track-caps); text-transform:uppercase; color:#FFD86B; display:inline-flex; align-items:center; } /* lighter sun: ~4.74:1 on #1A6B43, clears WCAG AA for this 11px label */
.store[href]{ transition:transform .3s var(--back), background .3s, border-color .3s, box-shadow .3s var(--ease); }
@media (hover:hover){
  .store[href]:hover{ transform:translateY(-4px); background:#1F7A4D; border-color:rgba(246,239,223,.45); box-shadow:0 18px 30px -20px rgba(8,55,42,.5); }
}
.btn--sun{ align-self:flex-start; background:var(--sun); color:var(--green-ink); padding:18px 34px; font-size:16px; }
@media (hover:hover){ .btn--sun:hover{ transform:translateY(-3px) rotate(-1deg); } }
@media (max-width:680px){ .stores{ grid-template-columns:1fr; } }

/* ---------- 07 Buy + footer ---------- */
.act--buy{ justify-content:center; }
.buy__in{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px; }
.buy__title{ font-family:var(--serif); font-weight:800; font-size:clamp(44px,9vw,150px); line-height:.92; letter-spacing:-.03em; }
.buy__row{ display:flex; align-items:baseline; gap:20px; }
.bigprice{ font-family:var(--serif); font-weight:800; font-size:clamp(40px,6vw,84px); color:var(--peach-deep); }
.bigprice i{ font-style:normal; font-size:.4em; color:var(--ink); }
.bigvol{ font-weight:700; font-size:18px; padding:8px 16px; border-radius:999px; border:1.5px solid var(--green-ink); }
/* tabular lining figures so prices, volume and index numbers sit on a consistent grid */
.tagprice,.bigprice,.bigvol,.fcard__no{ font-feature-settings:"tnum" 1,"lnum" 1; font-variant-numeric:tabular-nums lining-nums; }
.buy__cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:6px; }

/* ---------- 08 Bulk : office & events ---------- */
.act--bulk{ background:var(--green-deep); color:var(--cream); justify-content:center; }
.bulk__in{ width:min(92vw,1080px); margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:clamp(28px,5vh,52px); }
.bulk__head{ text-align:center; max-width:54ch; display:flex; flex-direction:column; align-items:center; gap:16px; }
.bulk__lead{ font-size:clamp(16px,1.7vw,21px); font-weight:500; color:rgba(246,239,223,.85); text-wrap:pretty; }
.bulk__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,30px); width:100%; }
.bulk__card{ position:relative; display:block; border-radius:var(--r); overflow:hidden; background:var(--green-ink); box-shadow:0 34px 70px -34px rgba(0,0,0,.7); }
.bulk__card img{ display:block; width:100%; height:auto; transition:transform .55s var(--ease); }
.bulk__cap{ position:absolute; inset:auto 0 0 0; display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:clamp(16px,2.4vw,26px); background:linear-gradient(0deg, rgba(8,55,42,.92), rgba(8,55,42,0)); }
.bulk__cap b{ font-family:var(--serif); font-weight:800; font-size:clamp(18px,2.2vw,26px); }
.bulk__cap span{ font-weight:700; font-size:13px; letter-spacing:.04em; opacity:.85; }
.bulk__cta{ align-self:center; }
@media (hover:hover){ .bulk__card:hover img{ transform:scale(1.045); } }
@media (max-width:640px){ .bulk__grid{ grid-template-columns:1fr; } }

.btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-weight:700; transition:transform .3s var(--back), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.btn--primary{ background:var(--green); color:var(--cream); padding:18px 38px; font-size:17px; }
.btn--ghost{ border:1.5px solid var(--green-ink); padding:18px 30px; font-size:14px; letter-spacing:.04em; }
@media (hover:hover){
  .btn--primary:hover{ transform:translateY(-3px) rotate(-1deg); }
  .btn--ghost:hover{ background:var(--green-ink); color:var(--cream); }
}

.foot{ position:relative; z-index:2; width:100%; background:var(--green-deep); color:var(--cream); padding:clamp(48px,7vw,80px) var(--pad) 32px; overflow:hidden; }
.foot__leaf{ position:absolute; left:clamp(-40px,-4vw,-10px); bottom:0; width:clamp(180px,22vw,320px); height:auto; color:rgba(246,239,223,.14); pointer-events:none; z-index:0; }
.foot__main{ position:relative; z-index:1; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(28px,4vw,48px); padding-bottom:clamp(32px,5vw,56px); }
.foot__brand{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.foot__logo{ width:min(190px,48vw); height:auto; opacity:.98; }
.foot__desc{ font-size:14px; line-height:1.6; color:rgba(246,239,223,.78); max-width:34ch; }
.foot__social{ display:flex; gap:14px; margin-top:4px; }
.foot__social a{ width:34px; height:34px; display:grid; place-items:center; border-radius:50%; border:1.5px solid rgba(246,239,223,.3); color:var(--cream); transition:transform .25s var(--back), background .25s var(--ease), border-color .25s var(--ease); }
.foot__social svg{ width:17px; height:17px; }
@media (hover:hover){ .foot__social a:hover{ transform:translateY(-2px); background:rgba(246,239,223,.12); border-color:rgba(246,239,223,.6); } }
.foot__col{ display:flex; flex-direction:column; gap:12px; }
.foot__col b{ font-family:var(--serif); font-weight:800; font-size:15px; margin-bottom:4px; }
.foot__col a{ font-size:14px; font-weight:500; color:rgba(246,239,223,.78); transition:color .2s var(--ease); }
@media (hover:hover){ .foot__col a:hover{ color:var(--sun); } }
.foot__bottom{ position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-weight:600; font-size:13px; color:rgba(246,239,223,.65); border-top:1.5px solid rgba(246,239,223,.16); padding-top:22px; }
.foot__made i{ font-style:normal; opacity:.55; color:var(--sun); }
@media (max-width:900px){
  .foot__main{ grid-template-columns:1fr 1fr; row-gap:36px; }
  .foot__brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .foot__main{ grid-template-columns:1fr; }
  .foot__bottom{ flex-direction:column; align-items:flex-start; }
}

/* ---------- buy links (per flavor) ---------- */
.buylinks{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:8px; }
.flavor__copy--right .buylinks{ justify-content:flex-end; }
.buylinks__label{ width:100%; font-weight:700; font-size:12px; letter-spacing:var(--track-caps); text-transform:uppercase; opacity:1; color:var(--green-ink); }
.act--peach .buylinks__label,
.act--peach .buychip i{ color:var(--green-ink); }
.flavor__copy--right .buylinks__label{ text-align:right; }
.buychip{ font-weight:700; font-size:13px; padding:8px 17px 8px 8px; border-radius:999px; border:1.5px solid currentColor; display:inline-flex; align-items:center; min-height:44px; gap:.5em; transition:transform .25s var(--back), background .25s, color .25s, border-color .25s; }
.buychip i{ font-style:normal; font-weight:600; font-size:11px; opacity:1; }
.buychip__ic{ flex:none; width:26px; height:26px; padding:3px; border-radius:50%; overflow:hidden; background:#fff; display:grid; place-items:center; box-sizing:border-box; }
.buychip__ic img{ width:100%; height:100%; object-fit:contain; }
.buychip--nq .buychip__ic{ display:none; }
/* Nordqvist's own web shop is always the primary buy option: a bold dark-green
   chip, first in the row (DOM order) and visually heavier than the retailers. */
.buychip--nq{
  background:var(--green-deep); color:var(--cream); border-color:var(--green-deep);
  padding:14px 26px; font-size:15px; font-weight:800;
  box-shadow:0 14px 30px -12px rgba(8,55,42,.7);
}
.buychip--nq::after{ content:"→"; font-weight:800; font-size:1.05em; margin-left:.25em; color:var(--sun); }
/* periodic nudge so the primary CTA keeps drawing the eye without shaking nonstop */
.buychip--nq{ animation:buychip-wiggle 3.2s ease-in-out infinite; }
@keyframes buychip-wiggle{
  0%, 92%, 100%{ transform:rotate(0deg); }
  93%{ transform:rotate(-4deg); }
  95%{ transform:rotate(4deg); }
  97%{ transform:rotate(-3deg); }
  99%{ transform:rotate(2deg); }
}
@media (hover:hover){
  .buychip:hover{ transform:translateY(-2px) rotate(-1deg); }
  .act--peach .buychip:hover{ background:var(--green-ink); color:var(--cream); border-color:var(--green-ink); }
  .act--berry .buychip:hover{ background:var(--cream); color:var(--berry-deep); border-color:var(--cream); }
  .act--peach .buychip--nq:hover,
  .act--berry .buychip--nq:hover{ background:var(--green-ink); color:var(--cream); border-color:var(--green-ink); transform:translateY(-3px) rotate(-1deg); }
  .buychip--nq:hover{ animation-play-state:paused; }
}

/* ---------- marquee ribbon ---------- */
.marquee{ position:relative; z-index:2; overflow:hidden; display:flex; padding:clamp(18px,2.4vw,30px) 0; }
.marquee--sun{ background:var(--sun); color:var(--green-ink); }
.marquee--green{ background:var(--green-bright); color:var(--green-ink); }
.marquee__track{ display:flex; align-items:center; width:max-content; white-space:nowrap; animation:marquee 34s linear infinite; will-change:transform; }
.marquee--green .marquee__track{ animation-duration:38s; }
/* let a reader stop the scroll to actually read it */
@media (hover:hover){
  .marquee:hover .marquee__track{ animation-play-state:paused; }
}
.mq{ display:inline-flex; align-items:center; font-family:var(--serif); font-weight:800; font-size:clamp(18px,2.8vw,34px); letter-spacing:.01em; text-transform:uppercase; }
.mq::after{ content:"\2022"; margin:0 clamp(38px,5.5vw,84px); font-size:.42em; opacity:.45; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- pull quotes ---------- */
.quote{ position:relative; z-index:2; padding:clamp(70px,13vw,150px) var(--pad); display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; }
.quote--green{ background:var(--green); color:var(--cream); }
.quote--cream{ background:var(--cream); color:var(--green-ink); }
.quote__mark{ font-family:var(--serif); font-weight:800; font-size:clamp(32px,6.4vw,98px); line-height:1; letter-spacing:-.02em; max-width:18ch; }
.quote__mark em{ font-style:normal; color:var(--sun); }
.quote--cream .quote__mark em{ color:var(--peach-deep); }
.quote__sub{ font-weight:700; font-size:clamp(12px,1.3vw,15px); letter-spacing:var(--track-caps); text-transform:uppercase; opacity:1; }
.quote--green .quote__sub{ color:#fff; }
.quote--cream .quote__sub{ color:rgba(20,58,44,.72); }

/* ---------- reveal helpers ---------- */
[data-pop]{ opacity:0; transform:translateY(26px) scale(.96); }

/* ---------- responsive ---------- */
@media (max-width:760px){
  .split__cards{ grid-template-columns:1fr; }
  .flavor__copy,.flavor__copy--right{ max-width:none; text-align:left; align-items:flex-start; margin:0; }
  .flavor__copy--right .notes,.flavor__copy--right .flavor__meta{ justify-content:flex-start; }
  .flavor__meta{ flex-wrap:wrap; }
  .act{ padding-top:18svh; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001ms !important; }
  body{ cursor:auto; }
  .cursor{ display:none; }
  [data-pop]{ opacity:1; transform:none; }
  .marquee__track{ transform:none !important; }
}

/* ---------- press feedback (the only state touch users ever see: no hover on mobile) ---------- */
.nav__cta:active,
.btn:active{ transform:translateY(0) scale(.97); transition-duration:.08s; }
.buychip:active{ transform:translateY(0) scale(.96); transition-duration:.08s; }
.store[href]:active{ transform:translateY(-1px) scale(.99); transition-duration:.08s; }
.fcard:active{ transform:translateY(-2px) scale(.985); transition-duration:.1s; }
.nav__brand:active{ transform:translateY(0); }

/* ---------- store--plain : no link, visually softer ---------- */
.store--plain{ cursor:default; opacity:.8; }

/* ---------- responsive : mobile deep cuts ---------- */

/* stickers re-anchored bottom so they never collide with big copy text on narrow screens */
@media (max-width:760px){
  .sticker{ width:clamp(72px,18vw,96px); font-size:clamp(10px,2.8vw,13px); }
  .sticker--peach{ top:auto; bottom:clamp(100px,20svh,180px); right:clamp(14px,4vw,32px); }
  .sticker--berry{ top:auto; bottom:clamp(100px,20svh,180px); left:clamp(14px,4vw,32px); }
}
/* on phones the decorative stickers crowd the buy links, so drop them */
@media (max-width:600px){ .sticker{ display:none; } }

/* flavor buy chips: tighter on phone */
@media (max-width:480px){
  .buychip{ font-size:12px; padding:9px 13px; min-height:40px; }
  .buylinks{ gap:8px; }
  .flavor__name{ font-size:clamp(44px,15vw,90px); }
}

/* nav CTA slightly smaller on phone so it doesn't crowd the brand */
@media (max-width:480px){
  .nav__cta{ font-size:12px; padding:9px 16px; min-height:40px; }
}

/* hero title: prevent overflow on very narrow screens (360px) */
@media (max-width:380px){
  .hero__title{ font-size:clamp(44px,14vw,80px); }
  .hero__sub{ font-size:15px; }
}

/* split flavor cards: min-height shorter on short-screen phones */
@media (max-width:760px){
  .fcard{ min-height:min(52vh,380px); }
}

/* buy section CTA stack properly on phone */
@media (max-width:520px){
  .buy__cta{ flex-direction:column; align-items:stretch; }
  .buy__cta .btn{ justify-content:center; }
  .bigprice{ font-size:clamp(36px,12vw,60px); }
}

/* footer columns stack on phone */
@media (max-width:480px){
  .foot__cols{ flex-direction:column; gap:8px; }
}

/* stores: force 1-col earlier on mid-size phones to avoid cramped 2-col */
@media (max-width:600px){
  .stores{ grid-template-columns:1fr; }
}

/* benefits: 2-col even on small tablets, 1-col on phone */
@media (max-width:520px){
  .benefits{ grid-template-columns:1fr; }
}

/* blob sizing on mobile */
@media (max-width:600px){
  .blob--a{ width:70vw; height:70vw; }
  .blob--b{ width:40vw; height:40vw; }
}

/* marquee text size bump on large screens for extra drama */
@media (min-width:1400px){
  .mq{ font-size:clamp(34px,2.8vw,48px); }
}

/* ---------- world-class polish : subtle refinements ---------- */

/* smoother marquee with a slight feathered edge so text fades at viewport edge */
.marquee::before,
.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(32px,4vw,80px); z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(to right, currentColor 0%, transparent 100%); }
.marquee::after{ right:0; background:linear-gradient(to left, currentColor 0%, transparent 100%); }
.marquee--sun::before,.marquee--sun::after{ color:var(--sun); }
.marquee--green::before,.marquee--green::after{ color:var(--green-bright); }

/* focus ring refined: rounder on pill elements */
a.buychip:focus-visible,
.nav__cta:focus-visible,
.btn:focus-visible{ border-radius:999px; }

/* benefit icon: slightly larger hit area feel */
.benefit__ic{ flex-shrink:0; }

/* quote em highlight with a very subtle underline */
.quote__mark em{ text-decoration:underline; text-decoration-color:rgba(255,200,61,.4); text-underline-offset:.12em; text-decoration-thickness:2px; }

/* kicker dot pulse on hero */
.kicker .dot{ animation:dot-pulse 2.8s var(--ease) infinite; }
@keyframes dot-pulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.5); opacity:.6; }
}

/* scrollcue: hide after user has scrolled past hero */
.scrollcue{ opacity:1; }

/* act--store: slightly richer dark header area */
.store__head{ padding-bottom:2vh; }

/* smooth image loading: prevent layout shift flash */
.fcard__img{ background:rgba(8,55,42,.25); }

/* nav backdrop blur on scroll (glass effect) via data-nav attribute */
body[data-nav="onlight"] .nav{
  background:rgba(246,239,223,.72);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 1px 0 rgba(20,58,44,.1);
}
body[data-nav="ondark"] .nav{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
}
.nav{ transition:color .4s var(--ease), background .4s var(--ease), backdrop-filter .4s var(--ease), box-shadow .4s var(--ease); }