/* ==========================================================================
   Namibia Berries - blueberry & teal, cool & crisp (no beige)
   Primary #345B5C teal · blueberry indigo secondary · Tuli pink accents.
   GT Walsheim + Montserrat. Self-contained, lots of motion (motion-safe).
   ========================================================================== */

:root {
  /* Brand core */
  --teal:       #345b5c;   /* primary brand */
  --teal-700:   #284a4b;
  --teal-deep:  #143130;
  --teal-ink:   #0f201f;
  --teal-tint:  #e4efee;

  /* Dark teal for dark sections */
  --blueberry:  #15302e;
  --blueberry-2:#1d3b39;
  --berry:      #cf8a3f;   /* warm gold accent (Namibian sun) */
  --berry-soft: #f0cd9a;
  --bloom:      #cfe0dd;

  /* Cool, crisp surfaces - teal-tinted (no beige, no blue) */
  --bg:         #ffffff;
  --bg-2:       #f1f5f4;   /* cool light teal-grey */
  --surface:    #ffffff;
  --sand:       #e8efed;   /* teal tint (cards/avatars) */
  --sand-deep:  #d6e3e0;

  /* accent (warm gold) */
  --honey:      #cf8a3f;
  --honey-soft: #f0cd9a;

  /* Tuli playful accents (Tuli world only) */
  --pink:       #ff6bab;
  --pink-soft:  #ffd1e6;
  --sky:        #5bbfe6;
  --sky-soft:   #cdeefb;
  --lime:       #9bc24a;
  --grape:      #345b5c;

  --ink:        #13211f;
  --muted:      #51635f;
  --line:       #e3ebe9;
  --line-soft:  #eef3f2;

  --font-display: "GT Walsheim", "Montserrat", system-ui, sans-serif;
  --font-body:    "GT Walsheim", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-label:   "Montserrat", "GT Walsheim", system-ui, sans-serif;

  --r-sm: 12px; --r-md: 20px; --r-lg: 30px; --r-xl: 44px; --r-pill: 999px;
  --sh-1: 0 2px 6px rgba(20,32,31,.05), 0 16px 40px rgba(20,32,31,.08);
  --sh-2: 0 30px 70px rgba(34,29,77,.20);
  --sh-pill: 0 10px 30px rgba(20,32,31,.10);

  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}

/* ----- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body); color: var(--ink); background: var(--bg);
  line-height: 1.62; font-size: 1.0625rem; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
/* Every img here carries width/height attributes for layout stability. Without
   height:auto those attributes win once max-width (or a CSS width) shrinks the
   box, and the image is stretched vertically to the attribute height - which is
   what was distorting Tuli on the Tuli's World hero. Components that genuinely
   want a fixed box set height themselves and out-rank this by specificity. */
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; }
::selection { background: var(--teal); color: #fff; }
:focus-visible { outline: 2px solid var(--honey); outline-offset: 3px; border-radius: 4px; }

/* ----- Type -------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -.025em; color: var(--ink); }
.display { font-size: clamp(3rem, 9vw, 7rem); font-weight: 600; line-height: .95; letter-spacing: -.035em; }
.h2 { font-size: clamp(2.1rem, 4.8vw, 3.7rem); }
.h3 { font-size: clamp(1.35rem, 2.3vw, 1.95rem); }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.36rem); color: var(--muted); line-height: 1.55; }
.label {
  font-family: var(--font-label); font-weight: 600; font-size: .74rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--teal);
  display: inline-flex; align-items: center; gap: .7em;
}
/* squiggle removed per second-draft feedback - clean, premium label treatment */

/* ----- Layout ------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(70px, 10vw, 140px); position: relative; }
.center { text-align: center; }
/* cosy organic overlap between contrasting sections */
.curve { border-radius: var(--r-xl) var(--r-xl) 0 0; margin-top: calc(-1 * var(--r-xl)); position: relative; z-index: 2; }

/* ----- Buttons ----------------------------------------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: .65em;
  padding: 1.05em 1.9em; border-radius: var(--r-pill);
  font-family: var(--font-label); font-weight: 600; font-size: .92rem; line-height: 1;
  transition: transform .4s var(--spring), background .3s, color .3s, border-color .3s, box-shadow .3s;
  overflow: hidden;
}
.btn:hover { transform: translateY(-3px); }
.btn--solid { background: var(--teal); color: #fff; box-shadow: 0 8px 20px rgba(52,91,92,.25); }
.btn--solid:hover { background: var(--teal-deep); box-shadow: 0 14px 30px rgba(52,91,92,.32); }
.btn--honey { background: var(--honey); color: #fff; box-shadow: 0 8px 20px rgba(224,161,75,.3); }
.btn--honey:hover { background: #cf8f38; }
.btn--pink { background: var(--pink); color: #fff; box-shadow: 0 8px 22px rgba(255,107,171,.35); }
.btn--pink:hover { background: #f6519a; }
.btn--ghost { border: 1.5px solid var(--teal); color: var(--teal); }
.btn--ghost:hover { background: var(--teal); color: #fff; }
.btn--light { border: 1.5px solid rgba(255,255,255,.55); color: #fff; }
.btn--light:hover { background: #fff; color: var(--teal-deep); border-color: #fff; }
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* ==========================================================================
   TOP NAVIGATION BAR (full-width, flat)
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90; width: 100%;
  background: transparent;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 18px var(--gut);
  display: flex; align-items: center; justify-content: space-between;
  transition: padding .4s var(--ease);
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--bg-2) 94%, transparent);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line), 0 6px 24px rgba(28,50,51,.06);
}
.site-header.scrolled .site-header__inner { padding-block: 11px; }
.brand { display: flex; align-items: center; z-index: 2; }
.brand__logo { height: 36px; width: auto; transition: height .35s var(--ease); }
.site-header.scrolled .brand__logo { height: 31px; }

.nav { display: flex; align-items: center; gap: clamp(.4rem, 1.6vw, 1.4rem); }
.nav__links { display: flex; align-items: center; gap: clamp(.3rem, 1.4vw, 1.2rem); }
.nav__link {
  position: relative; font-family: var(--font-label); font-weight: 500; font-size: .9rem;
  padding: .55em .9em; color: var(--teal-ink); border-radius: var(--r-pill);
  transition: background .3s, color .3s;
}
.nav__link:hover { background: rgba(52,91,92,.09); }
.nav__link[aria-current="page"] { color: var(--teal); background: rgba(52,91,92,.1); }

/* dropdown */
.has-drop { position: relative; }
.nav__drop-btn { display: inline-flex; align-items: center; cursor: pointer; }
.nav__drop-btn.is-active { color: var(--teal); }
.nav__drop {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 220px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-pill); padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
/* invisible hover bridge across the gap so the menu doesn't close while the
   pointer travels from the "About" button down to the panel */
.nav__drop::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.has-drop:hover .nav__drop, .has-drop:focus-within .nav__drop, .has-drop.open .nav__drop {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav__drop .nav__link { width: 100%; justify-content: flex-start; }
/* ----- hamburger ---------------------------------------------------------
   A 44px tap target with a soft teal pill behind it; the three bars morph
   into an X. The bars live in .nav-toggle__box so the button itself can own
   the padding and focus ring without the geometry shifting. */
.nav-toggle {
  display: none; width: 44px; height: 44px; z-index: 2; padding: 0;
  align-items: center; justify-content: center;
  border-radius: 14px; background: rgba(52, 91, 92, .07);
  transition: background .28s var(--ease), transform .28s var(--spring);
}
.nav-toggle:hover { background: rgba(52, 91, 92, .13); }
.nav-toggle:active { transform: scale(.94); }
.nav-toggle__box { position: relative; width: 20px; height: 14px; display: block; }
.nav-toggle__bar {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--teal-ink);
  transition: transform .34s var(--ease), opacity .2s var(--ease), width .34s var(--ease);
}
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 6px; width: 74%; }
.nav-toggle__bar:nth-child(3) { top: 12px; }
.nav-open .nav-toggle { background: rgba(52, 91, 92, .13); }
.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; transform: translateX(-6px); }
.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav > .btn, .nav__links { display: none; }   /* desktop links live in .mnav on phones */
}

/* ==========================================================================
   MOBILE MENU  (mounted on <body> by header.js — never inside .site-header,
   whose backdrop-filter would otherwise become the containing block for the
   panel's position:fixed and collapse it to the header strip)
   ========================================================================== */
.mnav { position: fixed; inset: 0; z-index: 120; }
.mnav[hidden] { display: none; }

.mnav__scrim {
  position: absolute; inset: 0; background: rgba(15, 32, 31, .55);
  opacity: 0; transition: opacity .32s var(--ease);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.mnav-open .mnav__scrim { opacity: 1; }

.mnav__panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(100%, 420px);
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, var(--teal) 0%, var(--teal-700) 46%, var(--teal-deep) 100%);
  color: #fff;
  box-shadow: -20px 0 60px rgba(15, 32, 31, .34);
  transform: translateX(100%);
  transition: transform .38s var(--ease);
  overflow-y: auto; overscroll-behavior: contain;
  padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
           max(20px, env(safe-area-inset-bottom)) 22px;
}
.mnav-open .mnav__panel { transform: translateX(0); }

/* a soft glow so the flat teal doesn't read as a slab */
.mnav__panel::before {
  content: ""; position: absolute; top: -90px; right: -70px; width: 260px; height: 260px;
  border-radius: 50%; background: radial-gradient(circle, rgba(207,138,63,.30), transparent 68%);
  pointer-events: none;
}

.mnav__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: none; }
.mnav__brand img { height: 30px; width: auto; filter: brightness(0) invert(1); }
.mnav__close {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: 13px; color: #fff; background: rgba(255,255,255,.12);
  transition: background .25s var(--ease), transform .25s var(--spring);
}
.mnav__close:hover { background: rgba(255,255,255,.22); }
.mnav__close:active { transform: scale(.92); }

.mnav__nav { flex: 1 1 auto; display: flex; align-items: center; padding: 26px 0 18px; }
.mnav__list { display: flex; flex-direction: column; gap: 2px; width: 100%; }

.mnav__item { opacity: 0; transform: translateX(14px); }
.mnav-open .mnav__item {
  opacity: 1; transform: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  transition-delay: calc(90ms + var(--i) * 45ms);
}

.mnav__link {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  width: 100%; min-height: 52px; padding: .5rem .85rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.2;
  color: rgba(255,255,255,.92); border-radius: 14px;
  transition: background .24s var(--ease), color .24s var(--ease);
}
.mnav__link:hover { background: rgba(255,255,255,.09); color: #fff; }
.mnav__link[aria-current="page"] { color: var(--berry-soft); background: rgba(255,255,255,.08); }
.mnav__acc.is-active { color: var(--berry-soft); }
.mnav__chev { flex: none; transition: transform .3s var(--ease); opacity: .75; }
.mnav__acc[aria-expanded="true"] .mnav__chev { transform: rotate(180deg); }

/* the About sub-list opens as an accordion instead of always sitting open */
.mnav__sub {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .34s var(--ease);
}
.mnav__sub > .mnav__sub-inner { overflow: hidden; min-height: 0; }
.mnav__sub[data-open] { grid-template-rows: 1fr; }
.mnav__sublink {
  display: flex; align-items: center; min-height: 44px;
  padding: .2rem 1.5rem; margin-left: .35rem;
  border-left: 2px solid rgba(255,255,255,.18);
  font-family: var(--font-label); font-size: .98rem; font-weight: 500;
  color: rgba(255,255,255,.72);
  transition: color .22s var(--ease), border-color .22s var(--ease);
}
.mnav__sublink:hover { color: #fff; border-color: rgba(255,255,255,.5); }
.mnav__sublink[aria-current="page"] { color: var(--berry-soft); border-color: var(--berry-soft); }

.mnav__foot { flex: none; display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); }
.mnav__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: .9em 1.6em; border-radius: var(--r-pill);
  background: #fff; color: var(--teal-deep);
  font-family: var(--font-label); font-weight: 700; font-size: 1rem;
  transition: transform .25s var(--spring), box-shadow .25s var(--ease);
}
.mnav__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.22); }
/* .72 alpha keeps this above 4.5:1 on the panel gradient; .62 sat on the line */
.mnav__mail { font-size: .84rem; color: rgba(255,255,255,.72); font-family: var(--font-label); }
.mnav__mail:hover { color: #fff; }

/* lock the page behind the menu (same approach as the language gate) */
html.mnav-open, html.mnav-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mnav__panel, .mnav__scrim, .mnav__item, .mnav__sub { transition: none; }
  .mnav__item { opacity: 1; transform: none; }
}

/* ==========================================================================
   FLOATING DECOR (real berries / bee / butterfly)
   ========================================================================== */
.decor { position: absolute; pointer-events: none; z-index: 1; will-change: transform; }
.decor img { width: 100%; height: auto; }
.float-a { animation: floatA 8s ease-in-out infinite; }
.float-b { animation: floatB 11s ease-in-out infinite; }
.float-c { animation: floatC 9s ease-in-out infinite; }
@keyframes floatA { 0%,100%{transform:translateY(0) rotate(-6deg)} 50%{transform:translateY(-26px) rotate(8deg)} }
@keyframes floatB { 0%,100%{transform:translateY(0) rotate(5deg)} 50%{transform:translateY(22px) rotate(-6deg)} }
@keyframes floatC { 0%,100%{transform:translate(0,0) rotate(0)} 50%{transform:translate(14px,-18px) rotate(10deg)} }
.lottie { position: absolute; z-index: 2; pointer-events: none; }

/* ==========================================================================
   HERO - clean, centred editorial (teal theme)
   ========================================================================== */
.hero {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  padding-top: clamp(150px, 18vw, 220px); padding-bottom: clamp(50px, 7vw, 90px);
  background: #ffffff;
}

/* ----- Sunrise scene (one-shot cinematic intro that resolves to white) ---- */
/* warm dawn sky wash: fades in, holds, then clears to reveal the white hero */
.hero__sky {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg,
    #ffeccb 0%,
    #ffdcb0 16%,
    #ffd0a2 32%,
    #fbdcc2 52%,
    #f3ecdf 74%,
    #ffffff 100%);
  opacity: 0;
  animation: skyCycle 6.5s var(--ease) .1s forwards;
}
@keyframes skyCycle {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  62%  { opacity: 1; }
  100% { opacity: 0; }
}

/* the sun: settles near the top of the hero and stays, drifting with the pointer */
.hero__sundial {
  position: absolute; left: 50%; top: 0; z-index: 0; pointer-events: none;
  width: min(52vw, 480px); aspect-ratio: 1;
  transform: translate(-50%, -45%);
  opacity: 0;
  animation: sunIn 2.4s cubic-bezier(.22,.61,.36,1) .1s forwards;
  transition: translate .7s cubic-bezier(.22,.61,.36,1);
  will-change: translate;
}
@keyframes sunIn {
  0%   { opacity: 0; transform: translate(-50%, -78%); }
  100% { opacity: 1; transform: translate(-50%, -45%); }
}
.hero__sun {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    #fffaf0 0%, #ffe9b0 30%, #ffd27a 52%, rgba(255,176,92,.5) 70%, transparent 78%);
}

/* soft radiating light rays, centred on the sun and slowly rotating */
.hero__rays {
  position: absolute; left: 50%; top: 50%; width: 320%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(255,205,140,.18) 6deg, transparent 12deg,
    transparent 24deg, rgba(255,205,140,.18) 30deg, transparent 36deg,
    transparent 48deg, rgba(255,205,140,.18) 54deg, transparent 60deg,
    transparent 72deg, rgba(255,205,140,.18) 78deg, transparent 84deg,
    transparent 96deg, rgba(255,205,140,.18) 102deg, transparent 108deg,
    transparent 120deg, rgba(255,205,140,.18) 126deg, transparent 132deg,
    transparent 168deg, rgba(255,205,140,.18) 174deg, transparent 180deg,
    transparent 216deg, rgba(255,205,140,.18) 222deg, transparent 228deg,
    transparent 264deg, rgba(255,205,140,.18) 270deg, transparent 276deg,
    transparent 312deg, rgba(255,205,140,.18) 318deg, transparent 324deg,
    transparent 354deg, rgba(255,205,140,.18) 360deg);
  -webkit-mask-image: radial-gradient(circle, #000 22%, transparent 60%);
          mask-image: radial-gradient(circle, #000 22%, transparent 60%);
  opacity: .7;
  animation: raysSpin 140s linear infinite;
}
@keyframes raysSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* warm horizon glow that wakes in then clears */
.hero__glow {
  position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: 0; pointer-events: none;
  background: radial-gradient(80% 130% at 50% 130%, rgba(255,170,96,.55), transparent 70%);
  opacity: 0;
  animation: skyCycle 6.5s var(--ease) .1s forwards;
}
.hero__blob { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .45; z-index: 0; will-change: transform; }
.hero__blob.b1 { width: 42vw; height: 42vw; top: -16vw; right: -6vw; background: radial-gradient(circle, rgba(255,213,160,.7), transparent 70%); animation: drift1 20s ease-in-out infinite; }
.hero__blob.b2 { width: 36vw; height: 36vw; bottom: -14vw; left: -8vw; background: radial-gradient(circle, rgba(255,196,150,.6), transparent 70%); animation: drift2 24s ease-in-out infinite; }
.hero__blob.b3 { display: none; }
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-30px,24px) scale(1.06)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,-24px) scale(1.08)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,40px)} }

.hero__inner { position: relative; z-index: 3; max-width: 940px; margin-inline: auto; }
.hero .label { justify-content: center; }
.hero h1 { font-size: clamp(2.9rem, 8.5vw, 6.6rem); line-height: .98; letter-spacing: -.035em; margin-top: 1.2rem; }
.hero h1 .word { display: inline-block; opacity: 0; transform: translateY(40px); animation: wordIn .9s var(--spring) forwards; }
.hero h1 .word:nth-child(2){ animation-delay:.1s } .hero h1 .word:nth-child(3){ animation-delay:.2s }
.hero h1 .em { color: var(--teal); position: relative; white-space: nowrap; }
@keyframes wordIn { to { opacity:1; transform: none; } }
.hero__sub { max-width: 54ch; margin: 1.4rem auto 0; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--muted); opacity:0; animation: fadeUp .9s var(--ease) .5s forwards; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.2rem; opacity:0; animation: fadeUp .9s var(--ease) .65s forwards; }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }

.hero__showcase { position: relative; z-index: 2; max-width: var(--maxw); margin: clamp(2.6rem,5vw,4.5rem) auto 0; padding-inline: var(--gut); opacity:0; animation: fadeUp 1s var(--ease) .8s forwards; }
.hero__frame { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-2); aspect-ratio: 16/7; }
@media (max-width: 700px){ .hero__frame { aspect-ratio: 4/5; border-radius: var(--r-lg); } }
.hero__frame video, .hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__frame::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 50%, rgba(21,48,46,.5)); pointer-events:none; }
.hero__chip {
  position: absolute; left: 22px; bottom: 22px; z-index: 4;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-radius: var(--r-pill); padding: .7em 1.1em;
  font-family: var(--font-label); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-deep);
  display: flex; align-items: center; gap: .6em; box-shadow: var(--sh-1);
}
.hero__chip .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--honey); animation: pulse 2.2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(207,138,63,.5)} 70%{box-shadow:0 0 0 10px rgba(207,138,63,0)} 100%{box-shadow:0 0 0 0 rgba(207,138,63,0)} }
.hero__facts { position: absolute; right: 22px; top: 22px; z-index: 4; display: flex; gap: .6rem; }
.hero__fact { background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-radius: var(--r-md); padding: .7em 1em; text-align: center; box-shadow: var(--sh-1); min-width: 78px; }
.hero__fact b { display: block; font-family: var(--font-display); font-weight: 600; color: var(--teal); font-size: 1.25rem; line-height: 1; }
.hero__fact span { font-family: var(--font-label); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 700px){ .hero__facts { display: none; } }

/* ----- Marquee ----------------------------------------------------------- */
.marquee { background: var(--teal-deep); color: var(--bg); padding-block: 1rem; overflow: hidden; white-space: nowrap; position: relative; z-index: 5; }
.marquee__track { display: inline-flex; animation: marquee 32s linear infinite; will-change: transform; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.1rem, 2.2vw, 1.7rem); display: inline-flex; align-items: center; }
.marquee .sep { width: 8px; height: 8px; border-radius: 50%; background: var(--honey-soft); margin: 0 1.6rem; display: inline-block; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   SPECIAL - editorial numbered list
   ========================================================================== */
.special { background: var(--bg); }
.split { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px){ .split { grid-template-columns: 1fr; } }
.split__head { }
.split > .split__head { position: sticky; top: 110px; }
@media (max-width: 900px){ .split > .split__head { position: static; } }
.split__head h2 { margin-top: 1rem; }
.split__head p { margin-top: 1.1rem; color: var(--muted); max-width: 38ch; }
.flist { display: grid; }
.fitem { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; padding: 2rem 0; border-top: 1px solid var(--line); transition: padding-left .4s var(--ease); }
.fitem:last-child { border-bottom: 1px solid var(--line); }
.fitem:hover { padding-left: .7rem; }
.fitem__no { font-family: var(--font-label); font-size: .82rem; font-weight: 700; color: var(--honey); letter-spacing: .1em; padding-top: .5rem; }
.fitem__icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; margin-bottom: .9rem; transition: transform .4s var(--spring); }
.fitem:hover .fitem__icon { transform: rotate(-8deg) scale(1.08); }
.fitem:nth-child(1) .fitem__icon { background: var(--teal); }
.fitem:nth-child(2) .fitem__icon { background: var(--honey); }
.fitem:nth-child(3) .fitem__icon { background: var(--teal-deep); }
.fitem:nth-child(4) .fitem__icon { background: var(--teal-700); }
.fitem h3 { font-size: 1.5rem; }
.fitem p { margin-top: .5rem; color: var(--muted); max-width: 54ch; }

/* ==========================================================================
   TULI preview (playful, sky/pink)
   ========================================================================== */
.tuli { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--pink-soft), var(--bg-2) 58%, var(--sand)); }
.tuli__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 820px) { .tuli__grid { grid-template-columns: 1fr; text-align: center; } }
.tuli .label { color: var(--grape); }
.tuli .label::before { background: var(--pink); }
.tuli h2 { margin-top: 1rem; }
.tuli p { margin-top: 1.1rem; font-size: 1.12rem; color: var(--muted); max-width: 48ch; }
@media (max-width: 820px){ .tuli p { margin-inline: auto; } }
.tuli__cta { margin-top: 2rem; display:flex; gap:1rem; flex-wrap:wrap; }
@media (max-width:820px){ .tuli__cta { justify-content:center; } }
.tuli__art { position: relative; display: grid; place-items: center; min-height: 360px; }
.tuli__art .tuli-img { width: min(100%, 380px); filter: drop-shadow(0 26px 34px rgba(28,50,51,.25)); animation: bob 6s ease-in-out infinite; position: relative; z-index: 2; }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-16px) rotate(2deg)} }
.tuli__disc { position: absolute; inset: 0; margin: auto; width: 78%; aspect-ratio: 1; border-radius: 50%; background: #fff; opacity: .5; z-index: 1; animation: pulseDisc 5s ease-in-out infinite; }
@keyframes pulseDisc { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }

/* ==========================================================================
   PACKAGING
   ========================================================================== */
.pack { background: var(--surface); }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px,1fr)); gap: 1.6rem; margin-top: clamp(2rem,5vw,3.5rem); }
.pack-card { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg); transition: transform .45s var(--spring), box-shadow .4s var(--ease); }
.pack-card:hover { transform: translateY(-8px); box-shadow: var(--sh-1); }
.pack-card__media { aspect-ratio: 4/3; overflow: hidden; }
.pack-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pack-card:hover .pack-card__media img { transform: scale(1.07); }
.pack-card__body { padding: 1.7rem 1.7rem 2rem; }
.pack-card__body h3 { font-size: 1.4rem; }
.pack-card__body p { margin-top: .5rem; color: var(--muted); font-size: .97rem; }
.pack-tag { display: inline-block; font-family: var(--font-label); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--teal); padding: .35em .8em; border-radius: var(--r-pill); margin-bottom: .9rem; }
.pack-card:nth-child(2) .pack-tag { background: var(--honey); }
.pack-card:nth-child(3) .pack-tag { background: var(--teal-deep); }
/* expandable "full story" inside news cards (Media - Latest stories) */
.pack-card__more {
  margin-top: 1.1rem; display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-label); font-weight: 600; font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal); transition: color .25s var(--ease); cursor: pointer;
  background: none; border: 0; padding: 0;
}
.pack-card__more:hover { color: var(--teal-deep); }
.pack-card__more .arr { transition: transform .3s var(--ease); }
.pack-card__more[aria-expanded="true"] .arr { transform: rotate(90deg); }
.pack-card__full { margin-top: .4rem; padding-top: .4rem; border-top: 1px dashed var(--line); }
.pack-card__full p { font-size: .94rem; }
/* product formats */
.formats { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin-top: 1.8rem; }
.format { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.2rem 1.3rem; transition: transform .4s var(--spring), box-shadow .4s; }
.format:hover { transform: translateY(-4px); box-shadow: var(--sh-1); }
.format b { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; color: var(--teal); display: block; line-height: 1; }
.format span { display: block; margin-top: .4rem; font-family: var(--font-label); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.format:nth-child(2) b { color: var(--honey); } .format:nth-child(3) b { color: var(--teal-deep); } .format:nth-child(4) b { color: var(--grape); }

/* ==========================================================================
   STORY (dark cinematic)
   ========================================================================== */
.story { background: var(--blueberry); color: #fff; overflow: hidden; }
.story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
@media (max-width: 900px){ .story__grid { grid-template-columns: 1fr; } }
.story .label { color: var(--honey-soft); }
.story .label::before { background: var(--honey); }
.story h2 { color: #fff; max-width: 13ch; margin-top: 1rem; }
.story p { margin-top: 1.2rem; color: #fff; font-size: 1.08rem; max-width: 48ch; }
.story__cta { margin-top: 2rem; }
.story__media { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); aspect-ratio: 5/4; }
.story__media video, .story__media img { width:100%; height:100%; object-fit: cover; }

/* ----- two-column band -------------------------------------------------- */
.band { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.band--rev .band__media { order: -1; }
@media (max-width: 880px){ .band { grid-template-columns: 1fr; } .band--rev .band__media { order: 0; } }
.band__media img { border-radius: var(--r-lg); box-shadow: var(--sh-1); width: 100%; height: auto; }
.band h2 { margin-top: 1rem; }
.band p { margin-top: 1.1rem; color: var(--muted); }
.band .lead { color: var(--ink); }
/* dark story bands: white copy for readability (second-draft feedback) */
.story .band p, .story .band .lead { color: #fff; }

/* ==========================================================================
   PAGE HERO (interior)
   ========================================================================== */
.phero { position: relative; overflow: hidden; padding-top: clamp(150px, 17vw, 220px); padding-bottom: clamp(40px, 6vw, 80px); background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
[data-page="about"] .phero { background: radial-gradient(80% 120% at 80% -10%, var(--teal-tint), transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg)); }
[data-page="team"] .phero { background: radial-gradient(90% 130% at 85% -10%, var(--teal-tint), transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg)); }
[data-page="sustainability"] .phero { background: radial-gradient(90% 130% at 15% -10%, #e3f1ea, transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg)); }
[data-page="careers"] .phero { background: radial-gradient(90% 130% at 80% -10%, var(--berry-soft), transparent 55%), linear-gradient(180deg, var(--bg-2), var(--bg)); }
[data-page="media"] .phero { background: radial-gradient(90% 130% at 80% -10%, var(--teal-tint), transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg)); }
[data-page="contact"] .phero { background: radial-gradient(90% 130% at 85% -10%, var(--teal-tint), transparent 55%), linear-gradient(180deg, var(--bg-2), var(--bg)); }
.phero .hero__blob { opacity: .5; }
.phero__inner { position: relative; z-index: 3; }
.phero h1 { margin-top: 1.2rem; font-size: clamp(2.8rem, 8vw, 5.6rem); max-width: 16ch; }
.phero p { margin-top: 1.3rem; max-width: 54ch; color: var(--muted); font-size: 1.15rem; }

/* ----- stats ------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: clamp(1rem,3vw,2.5rem); margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.stat b { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem,4.5vw,3.2rem); color: var(--teal); display: block; line-height: 1; }
.stat span { font-family: var(--font-label); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .7rem; display: block; }

/* ----- values ------------------------------------------------------------ */
.values { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 1.4rem; margin-top: clamp(2rem,5vw,3.5rem); }
.value { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 2rem 1.8rem; transition: transform .45s var(--spring), box-shadow .4s; }
.value:hover { transform: translateY(-6px); box-shadow: var(--sh-1); }
.value__icon { width: 52px; height: 52px; border-radius: 14px; display:flex; align-items:center; justify-content:center; line-height:0; color: #fff; background: var(--teal); margin-bottom: 1.1rem; }
.value:nth-child(2) .value__icon { background: var(--honey); }
.value:nth-child(3) .value__icon { background: var(--teal-deep); }
.value h3 { font-size: 1.25rem; }
.value p { margin-top: .5rem; color: var(--muted); font-size: .96rem; }

/* sustainability framework modules - icon-driven */
.modules { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 2.5vw, 1.8rem); margin-top: clamp(2rem,5vw,3.2rem); }
@media (max-width: 820px){ .modules { grid-template-columns: 1fr; } }
.module { position: relative; overflow: hidden; background: var(--surface); border: 1px solid color-mix(in srgb, var(--c, var(--teal)) 18%, var(--line)); border-radius: var(--r-lg); padding: clamp(1.6rem,2.6vw,2.2rem); transition: transform .45s var(--spring), box-shadow .4s, border-color .4s; }
.module::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--c, var(--teal)); }
.module:hover { transform: translateY(-6px); box-shadow: 0 24px 50px color-mix(in srgb, var(--c, var(--teal)) 16%, rgba(20,32,31,.10)); border-color: color-mix(in srgb, var(--c, var(--teal)) 32%, var(--line)); }
.module__head { display: flex; align-items: center; gap: 1rem; margin-top: .3rem; }
.module__ic { flex: none; width: 54px; height: 54px; border-radius: 15px; display: flex; align-items: center; justify-content: center; line-height: 0; color: #fff; background: color-mix(in srgb, var(--c, var(--teal)) 84%, var(--teal-ink)); box-shadow: 0 10px 22px color-mix(in srgb, var(--c, var(--teal)) 36%, transparent); transition: transform .45s var(--spring); }
.module:hover .module__ic { transform: rotate(-8deg) scale(1.06); }
.module__tag { display: block; font-family: var(--font-label); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--c, var(--teal)) 58%, var(--teal-ink)); }
.module__head h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-top: .25rem; color: var(--teal-deep); }
.module > p { color: var(--muted); margin-top: 1rem; font-size: .96rem; }
.module__pillars { margin-top: 1.3rem; display: grid; gap: .9rem; border-top: 1px solid var(--line); padding-top: 1.3rem; }
.pillar { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: center; }
.pillar__ic { flex: none; width: 36px; height: 36px; border-radius: 10px; padding: 8px; display: flex; align-items: center; justify-content: center; line-height: 0; color: var(--c, var(--teal)); background: color-mix(in srgb, var(--c, var(--teal)) 14%, var(--surface)); }
.pillar__ic svg, .people__pic svg { width: 100%; height: 100%; display: block; }
.pillar b { display: block; font-family: var(--font-label); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-deep); }
.pillar span { display: block; font-size: .9rem; color: var(--muted); margin-top: .15rem; }
.sust-quote { max-width: 40ch; margin: clamp(2.5rem,5vw,4rem) auto 0; text-align: center; }
.sust-quote p { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem,3vw,2.1rem); line-height: 1.25; color: var(--ink); letter-spacing: -.02em; }
.sust-quote cite { display: block; margin-top: 1.2rem; font-family: var(--font-label); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-style: normal; }

/* ESG commitments - grouped by dimension (Environment / Social / Governance) */
.commit-group { margin-top: clamp(2.2rem, 4.5vw, 3.4rem); }
.commit-group__head { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.commit-group__ic { flex: none; width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; line-height: 0; color: #fff; background: var(--gc, var(--teal)); box-shadow: 0 10px 22px color-mix(in srgb, var(--gc, var(--teal)) 30%, transparent); }
.commit-group__tag { display: block; font-family: var(--font-label); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--gc, var(--teal)) 60%, var(--teal-ink)); }
.commit-group__head h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); color: var(--teal-deep); margin-top: .15rem; }
.commit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 2.2vw, 1.6rem); margin-top: 1.5rem; }
@media (max-width: 860px){ .commit-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .commit-grid { grid-template-columns: 1fr; } }
.commit { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.6rem 1.5rem; transition: transform .45s var(--spring), box-shadow .4s, border-color .4s; }
.commit:hover { transform: translateY(-5px); box-shadow: var(--sh-1); border-color: color-mix(in srgb, var(--gc, var(--teal)) 28%, var(--line)); }
.commit__no { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--gc, var(--teal)); letter-spacing: .02em; }
.commit h4 { font-size: 1.12rem; margin-top: .45rem; color: var(--ink); }
.commit p { margin-top: .5rem; color: var(--muted); font-size: .93rem; }

/* pledge - centred closing statement */
.pledge { background: linear-gradient(180deg, var(--surface), var(--bg-2)); }
.pledge__lead { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 2.7vw, 1.95rem); line-height: 1.32; letter-spacing: -.02em; color: var(--teal-deep); margin-top: 1.2rem; }

/* pledge pull-quote card */
.pledge-quote { position: relative; max-width: 760px; margin: clamp(2.6rem, 5vw, 3.8rem) auto 0; padding: clamp(2.2rem, 4vw, 3rem) clamp(1.6rem, 4vw, 3rem); background: var(--teal-tint); border: 1px solid color-mix(in srgb, var(--teal) 12%, var(--line)); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.pledge-quote__mark { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 6vw, 4.5rem); line-height: .6; color: var(--honey); margin-bottom: 1rem; }
.pledge-quote blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.4; letter-spacing: -.02em; color: var(--teal-deep); }
.pledge-quote figcaption { display: inline-flex; align-items: center; gap: .7em; margin-top: clamp(1.2rem, 2.5vw, 1.6rem); font-family: var(--font-label); font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.pledge-quote figcaption::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--honey); }

/* sustainability section headers - roomier reading width (override .split__head 38ch) */
[data-page="sustainability"] .split__head p { max-width: 64ch; }

/* framework chips - quick links to the sustainability modules */
.frame-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: clamp(1.6rem, 3vw, 2.2rem); }
.frame-chip {
  display: inline-flex; align-items: center; padding: .6em 1.05em; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-pill);
  font-family: var(--font-label); font-weight: 600; font-size: .82rem; color: var(--teal-deep);
  transition: transform .35s var(--spring), border-color .3s, color .3s;
}
.frame-chip:hover { transform: translateY(-2px); color: var(--teal); border-color: color-mix(in srgb, var(--teal) 35%, var(--line)); }

/* UN SDG strip - official goal colours */
.sdg-block { margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.sdg-block__title { font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--teal-deep); }
.sdgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.7rem, 1.6vw, 1.1rem);
  margin-top: clamp(1.3rem, 3vw, 1.9rem); padding: 0; list-style: none; }
@media (max-width: 760px){ .sdgs { grid-template-columns: repeat(2, 1fr); } }

/* The official UN SDG icons carry their own colour, number, title and
   pictogram, and the UN guidelines require them unaltered - so the tile is
   just the artwork. Nothing is cropped, recoloured or overlaid; our own
   E/S/G label sits outside the icon. */
.sdg { display: flex; flex-direction: column; gap: .55rem; }
.sdg img { width: 100%; height: auto; border-radius: var(--r-sm, 8px); display: block;
  transition: transform .4s var(--spring), box-shadow .4s; }
.sdg:hover img { transform: translateY(-5px); box-shadow: var(--sh-1); }
.sdg__tag { font-family: var(--font-label); font-size: .58rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); }
.sdg-block__note { margin-top: clamp(1.1rem, 2.5vw, 1.6rem); font-size: .78rem; line-height: 1.5;
  color: var(--muted); opacity: .85; max-width: 78ch; }

/* ==========================================================================
   PEOPLE & COMMUNITY - elevated dark band
   ========================================================================== */
.people { position: relative; }
.people__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 900px){ .people__grid { grid-template-columns: 1fr; } }
.people h2 { max-width: 18ch; }
.people__copy > p { margin-top: 1.2rem; color: #fff; font-size: 1.08rem; max-width: 50ch; }
.people__points { display: grid; gap: .75rem; margin-top: 1.9rem; }
.people__point { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: center; }
.people__pic { flex: none; width: 46px; height: 46px; border-radius: 13px; padding: 11px; display: flex; align-items: center; justify-content: center; line-height: 0; color: var(--honey-soft); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); transition: transform .4s var(--spring), background .3s; }
.people__point:hover .people__pic { transform: translateY(-3px) rotate(-6deg); background: rgba(255,255,255,.12); }
.people__point b { display: block; color: #fff; font-family: var(--font-label); font-weight: 600; font-size: .98rem; letter-spacing: .01em; }
.people__point span { display: block; color: rgba(255,255,255,.92); font-size: .9rem; }
.people__cta { margin-top: 2rem; }
.people__media { position: relative; }
.people__media img { border-radius: var(--r-lg); box-shadow: var(--sh-2); width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.people__badge { position: absolute; left: 18px; bottom: 18px; background: var(--honey); color: #fff; border-radius: var(--r-md); padding: .9rem 1.2rem; box-shadow: var(--sh-2); text-align: center; }
.people__badge b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; line-height: 1; }
.people__badge span { font-family: var(--font-label); font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.people__glow { position: absolute; width: 60vw; height: 60vw; max-width: 720px; max-height: 720px; top: -22%; right: -14%; z-index: 0; pointer-events: none; background: radial-gradient(circle, rgba(207,138,63,.18), transparent 70%); }

/* ----- team -------------------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1.6rem; margin-top: clamp(2rem,5vw,3.5rem); }
.member { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: transform .45s var(--spring), box-shadow .4s var(--ease); }
.member:hover { transform: translateY(-6px); box-shadow: var(--sh-1); }
.member__photo { aspect-ratio: 1; overflow: hidden; background: var(--sand); }
.member__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.member:hover .member__photo img { transform: scale(1.05); }
.member__body { padding: 1.3rem 1.4rem 1.6rem; }
.member h3 { font-size: 1.2rem; }
.member .role { color: var(--honey); font-family: var(--font-label); font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-top: .4rem; }

/* ==========================================================================
   MEET TULI PAGE
   ========================================================================== */
.tuli-hero {
  position: relative; overflow: hidden;
  padding-top: clamp(150px, 17vw, 220px); padding-bottom: clamp(60px, 8vw, 110px);
  background: linear-gradient(165deg, var(--sky-soft) 0%, var(--bg-2) 45%, #e3f2ef 100%);
}
.tuli-hero__grid { position: relative; z-index: 3; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
@media (max-width: 900px){ .tuli-hero__grid { grid-template-columns: 1fr; text-align:center; } }
.tuli-hero .label { color: var(--grape); }
.tuli-hero .label::before { background: var(--teal); }
.tuli-hero h1 { margin-top: 1rem; font-size: clamp(2.9rem, 8vw, 5.6rem); }
.tuli-hero h1 .em { color: var(--teal); }
.tuli-hero p { margin-top: 1.3rem; max-width: 46ch; color: var(--muted); font-size: 1.15rem; }
@media (max-width:900px){ .tuli-hero p { margin-inline:auto; } .tuli-hero .label { justify-content:center; } }
.tuli-hero__cta { margin-top: 2rem; display:flex; gap: 1rem; flex-wrap: wrap; }
@media (max-width:900px){ .tuli-hero__cta { justify-content:center; } }
.tuli-hero__art { position: relative; display: grid; place-items: center; min-height: 380px; }
.tuli-hero__art .tuli-img { width: min(100%, 420px); filter: drop-shadow(0 28px 36px rgba(28,50,51,.28)); animation: bob 6s ease-in-out infinite; position: relative; z-index: 2; }
.tuli-hero__art .ring { position:absolute; inset:0; margin:auto; width: 84%; aspect-ratio:1; border-radius:50%; background:#fff; opacity:.45; animation: pulseDisc 5s ease-in-out infinite; }

.section-playful { background: var(--bg); }
.tuli-head { max-width: 720px; margin-bottom: clamp(2rem,5vw,3.2rem); }
.tuli-head h2 { margin-top: 1rem; }
.tuli-head p { margin-top: 1rem; color: var(--muted); }
.tuli-head .label { color: var(--teal); }
.tuli-head .label::before { background: var(--teal); }

/* Episodes */
.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 1.5rem; }
.ep { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #000; box-shadow: var(--sh-1); cursor: pointer; transition: transform .45s var(--spring), box-shadow .4s; }
.ep:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.ep__media { position: relative; aspect-ratio: 16/10; background: var(--teal-deep); }
.ep__media img, .ep__media video { width:100%; height:100%; object-fit: cover; }
.ep__play { position:absolute; inset:0; display:grid; place-items:center; background: linear-gradient(180deg, rgba(28,50,51,.05), rgba(28,50,51,.45)); transition: background .3s; }
.ep:hover .ep__play { background: linear-gradient(180deg, rgba(28,50,51,.1), rgba(28,50,51,.55)); }
.ep__play .pbtn { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.92); display:grid; place-items:center; color: var(--teal); transition: transform .4s var(--spring); }
.ep:hover .ep__play .pbtn { transform: scale(1.12); }
.ep__tag { position:absolute; top: 12px; left: 12px; font-family: var(--font-label); font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; background: var(--pink); padding:.35em .7em; border-radius: var(--r-pill); z-index: 2; }
.ep__body { padding: 1.1rem 1.3rem 1.4rem; background: var(--surface); }
.ep__body h3 { font-size: 1.15rem; color: var(--ink); }
.ep__body p { margin-top: .3rem; font-size: .9rem; color: var(--muted); }
.ep__meta { margin-top: .7rem; font-family: var(--font-label); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color: var(--teal); }

/* Booklets */
.booklets { background: var(--surface); }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 1.5rem; }
.book { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: transform .45s var(--spring), box-shadow .4s; display: flex; flex-direction: column; }
.book:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: var(--sh-1); }
.book__media { aspect-ratio: 3/4; overflow: hidden; background: var(--sand); }
.book__media img { width:100%; height:100%; object-fit: cover; transition: transform .6s var(--ease); }
.book:hover .book__media img { transform: scale(1.05); }
.book__body { padding: 1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.book__tag { font-family: var(--font-label); font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--honey); }
.book__body h3 { font-size: 1.1rem; }
.book__body p { font-size: .88rem; color: var(--muted); flex:1; }
.book__dl { margin-top:.4rem; display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-label); font-weight:600; font-size:.84rem; color: var(--teal); }
.book:hover .book__dl { color: var(--teal); }

/* Stickers */
.stickers { background: linear-gradient(160deg, var(--sky-soft), var(--bg-2)); overflow: hidden; }
.sticker-row { display:flex; flex-wrap:wrap; gap: 1.4rem; justify-content:center; margin-top: clamp(2rem,5vw,3rem); }
.sticker { width: clamp(110px, 16vw, 160px); aspect-ratio:1; border-radius: var(--r-lg); background:#fff; display:grid; place-items:center; box-shadow: var(--sh-1); padding: 14px; transition: transform .5s var(--spring); }
.sticker:hover { transform: translateY(-8px) rotate(6deg) scale(1.05); }
.sticker:nth-child(even):hover { transform: translateY(-8px) rotate(-6deg) scale(1.05); }
.sticker img { width:100%; height:100%; object-fit: contain; }
.sticker.locked { background: rgba(255,255,255,.5); }
.sticker.locked img { opacity:.35; filter: grayscale(1); }

/* Video modal */
.modal { position: fixed; inset:0; z-index: 200; display:none; place-items:center; padding: 5vw; background: rgba(20,36,42,.82); backdrop-filter: blur(6px); }
.modal.open { display:grid; animation: fadeUp .3s var(--ease); }
.modal__inner { width: min(960px, 100%); border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--sh-2); background:#000; position:relative; }
.modal__inner video { width:100%; height:auto; display:block; }
.modal__close { position:absolute; top: -46px; right:0; width:40px; height:40px; border-radius:50%; background:#fff; color: var(--teal-ink); display:grid; place-items:center; font-size:1.2rem; }

/* ==========================================================================
   MEDIA GALLERY
   ========================================================================== */
.gallery { columns: 4 220px; column-gap: 1rem; margin-top: clamp(2rem,5vw,3.5rem); }
.gallery__item { display: block; width: 100%; margin: 0 0 1rem; border: 0; padding: 0; background: var(--surface); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); cursor: zoom-in; break-inside: avoid; transition: transform .45s var(--spring), box-shadow .4s var(--ease); }
.gallery__item:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.gallery__item img { width: 100%; height: auto; display: block; transition: transform .8s var(--ease); }
.gallery__item:hover img { transform: scale(1.05); }
.modal__inner img { width:100%; height:auto; display:block; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.6rem,4vw,3.2rem); align-items: stretch; }
@media (max-width: 880px){ .contact-grid { grid-template-columns: 1fr; } }
.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.8rem); box-shadow: var(--sh-1); }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-family: var(--font-label); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .55rem; color: var(--teal-deep); }
.field__opt { font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; padding: 1em 1.15em; border-radius: var(--r-md);
  border: 1.5px solid var(--line); background: var(--bg); font: inherit; color: var(--ink);
  -webkit-appearance: none; appearance: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.field input::placeholder, .field textarea::placeholder { color: #98a8a4; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--sand-deep); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(52,91,92,.14); }
.field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }

/* two inputs side by side, stacking on narrow screens */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px){ .field-row { grid-template-columns: 1fr; gap: 0; } }

/* leading icon inside text inputs */
.field--icon input { padding-left: 2.95rem; background-repeat: no-repeat; background-position: left 1.05rem center; background-size: 18px 18px; }
.field--user input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2351635f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.field--mail input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2351635f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.field--phone input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2351635f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.4-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E"); }

/* custom dropdown chevron */
.field select { cursor: pointer; padding-right: 2.9rem; background-repeat: no-repeat; background-position: right 1.05rem center; background-size: 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23345b5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

.field .err { color: #b23b3b; font-size: .82rem; margin-top: .4rem; display: none; }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: #b23b3b; }
.field.invalid input:focus, .field.invalid textarea:focus, .field.invalid select:focus { box-shadow: 0 0 0 4px rgba(178,59,59,.13); }
.field.invalid .err { display: block; }
.form__lead { color: var(--muted); max-width: 46ch; margin-bottom: 1.8rem; }
.form__note { font-size: .88rem; color: var(--muted); margin-top: 1.2rem; }
.form__success { display: none; padding: 1.4rem; border-radius: var(--r-md); background: var(--teal); color: #fff; font-weight: 500; margin-bottom: 1.4rem; }
.form.sent .form__success { display: block; }
/* shown by assets/js/forms.js when the send actually fails */
.form__error { display: none; margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--r-md); background: #fdf0f0; border: 1px solid #e6bcbc; color: #8f2f2f; font-size: .9rem; line-height: 1.5; }
.form__error.show { display: block; }
button[type="submit"][disabled] { opacity: .6; cursor: progress; }
.contact-info .info-card { padding: 1.5rem 0; border-bottom: 1px solid var(--line); display: flex; gap: 1.1rem; align-items: flex-start; }
.contact-info .info-card:first-child { padding-top: 0; }
.info-card__ic { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--teal-tint); color: var(--teal); }
.info-card h3 { font-size: 1.05rem; }
.info-card a, .info-card p { color: var(--muted); font-size: .98rem; margin-top: .25rem; }
.info-card a:hover { color: var(--teal); }
.socials { display: flex; gap: .7rem; margin-top: .6rem; }
.socials a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; transition: transform .35s var(--spring), background .3s; }
.socials a:hover { transform: translateY(-3px) rotate(-6deg); background: var(--honey); }

/* hero heading accent */
.phero h1 .em { color: var(--teal); }
.form__note a { color: var(--teal); font-weight: 600; }

/* ----- Contact info panel (teal, contrasts the white form) ----- */
.contact-aside {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  border-radius: var(--r-lg); padding: clamp(1.8rem, 3.2vw, 2.8rem);
  background: linear-gradient(165deg, var(--teal) 0%, var(--teal-deep) 100%);
  color: #fff; box-shadow: var(--sh-1);
}
.contact-aside > * { position: relative; z-index: 1; }
.contact-aside__glow { position: absolute; z-index: 0; top: -22%; right: -18%; width: 65%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(207,138,63,.5), transparent 70%); pointer-events: none; }
.contact-aside h2, .contact-aside h3 { color: #fff; }
.contact-aside__lead { margin-top: .7rem; color: rgba(255,255,255,.82); max-width: 38ch; }

.contact-methods { display: grid; margin-top: 1.8rem; }
.contact-method { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.contact-method:first-child { border-top: 1px solid rgba(255,255,255,.16); }
.contact-method__ic { width: 46px; height: 46px; flex: none; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.12); color: #fff; transition: transform .4s var(--spring), background .3s; }
.contact-method:hover .contact-method__ic { background: var(--honey); transform: rotate(-8deg) scale(1.06); }
.contact-method__txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.contact-method__t { font-family: var(--font-label); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.contact-method__v { color: #fff; font-size: 1.02rem; word-break: break-word; }
a.contact-method__v { transition: color .25s; }
a.contact-method__v:hover { color: var(--honey-soft); }

.contact-aside__note { margin-top: 1.6rem; padding: 1.2rem 1.35rem; border-radius: var(--r-md); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.contact-aside__note h3 { font-size: 1.08rem; }
.contact-aside__note p { margin-top: .4rem; color: rgba(255,255,255,.8); font-size: .95rem; }

.contact-aside__follow { margin-top: auto; padding-top: 1.8rem; }
.contact-aside__follow h3 { font-size: 1.08rem; }
.contact-aside__follow p { margin-top: .35rem; color: rgba(255,255,255,.74); font-size: .93rem; }
.socials--light a { background: rgba(255,255,255,.14); }
.socials--light a:hover { background: var(--honey); }

/* ----- CTA band ---------------------------------------------------------- */
.cta-band { background: var(--teal); color: #fff; }
.cta-band h2 { color: #fff; max-width: 18ch; margin-inline: auto; }
.cta-band .label { color: var(--honey-soft); justify-content: center; }
.cta-band .label::before { background: var(--honey-soft); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { background: #122a28; color: #eef4f3; padding-block: clamp(3rem,6vw,5rem) 2rem; }
.footer__top { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 2.4rem; }
@media (max-width: 760px){ .footer__top { grid-template-columns: 1fr; } }
.footer__logo { height: 40px; width: auto; filter: brightness(0) invert(1); }
.footer p { color: rgba(246,241,231,.62); margin-top: 1.2rem; max-width: 38ch; }
.footer h4 { font-family: var(--font-label); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--honey-soft); margin-bottom: 1.1rem; }
.footer li { margin-bottom: .65rem; }
.footer a { color: rgba(246,241,231,.78); font-size: .96rem; }
.footer a:hover { color: var(--honey-soft); }
.footer__bot { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(246,241,231,.14); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-family: var(--font-label); font-size: .74rem; letter-spacing: .06em; color: rgba(246,241,231,.5); }

/* ----- Scroll reveal ----------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(40px) scale(0.96); transition: opacity .9s cubic-bezier(.34,1.56,.64,1), transform .9s cubic-bezier(.34,1.56,.64,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }
.reveal[data-d="5"]{ transition-delay:.4s } .reveal[data-d="6"]{ transition-delay:.48s }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero h1 .word, .hero__sub, .hero__cta, .hero__meta { opacity: 1; transform: none; }
  .hero__sky, .hero__glow { opacity: 0; }
  .hero__sundial { opacity: 1; animation: none; transform: translate(-50%, -45%); }
  .hero__rays { animation: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   TEAM - one unified portrait-card grid (leadership large, wider team compact)
   ========================================================================== */
.team-grid {
  display: grid; gap: clamp(1.5rem, 2.6vw, 2.4rem); margin-top: clamp(2rem,5vw,3.2rem);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
/* leadership reads larger: fewer, wider columns up top */
.team-grid--lead {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(1.9rem, 3.2vw, 3rem);
}

.team-card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  padding: clamp(.7rem, 1vw, .95rem); cursor: pointer; text-align: left;
  transition: transform .45s var(--spring), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--sh-1); border-color: transparent; }
/* square, inset portrait - kinder to lower-res images and visually lighter */
.team-card__media { position: relative; aspect-ratio: 1/1; border-radius: var(--r-md); overflow: hidden; background: var(--sand); }
.team-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; transition: transform .7s var(--ease); }
.team-card:hover .team-card__media img { transform: scale(1.04); }
.team-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.05rem .35rem .35rem; }
.team-card__num { font-family: var(--font-label); font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--berry); margin-bottom: .45rem; }
/* clamp + reserve name and role to fixed line counts so every card is the same height */
.team-card h3 {
  font-size: 1.12rem; line-height: 1.2; min-height: calc(1.2em * 2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.team-card .role {
  color: var(--teal); font-family: var(--font-label); font-weight: 600; font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; margin-top: .4rem; min-height: calc(1.4em * 2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* trigger pinned to the bottom so the buttons line up across every card */
.team-card__more {
  margin-top: auto; padding-top: 1rem; align-self: flex-start;
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-label); font-weight: 600; font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal); transition: color .25s var(--ease);
}
.team-card__more::after {
  content: ""; width: .42em; height: .42em; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .3s var(--ease);
}
.team-card:hover .team-card__more { color: var(--teal-deep); }
.team-card:hover .team-card__more::after { transform: translateX(3px) rotate(-45deg); }
.team-card__bio { display: none; }

/* ----- Advisory cards ----------------------------------------------------
   Only three of them, so auto-fit (not auto-fill) keeps the row balanced
   instead of leaving empty tracks. Specificity is bumped past the 560px
   two-up override further down. ------------------------------------------- */
.team-grid.team-grid--advisory { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); max-width: 980px; }
@media (max-width: 560px){
  .team-grid.team-grid--advisory { grid-template-columns: repeat(2, 1fr); }
}

/* leadership type a touch bigger so the hierarchy reads clearly */
.team-grid--lead .team-card h3 { font-size: clamp(1.3rem, 1.9vw, 1.5rem); }
.team-grid--lead .team-card .role { font-size: .72rem; letter-spacing: .12em; }

/* ----- Team profile popup ------------------------------------------------ */
.team-modal {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem); opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.team-modal.is-open { opacity: 1; visibility: visible; }
.team-modal__overlay { position: absolute; inset: 0; background: rgba(15,32,31,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.team-modal__dialog {
  position: relative; z-index: 1; display: flex; flex-direction: column; width: min(540px, 100%);
  max-height: min(88vh, 840px); background: var(--surface); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-2);
  transform: translateY(18px) scale(.96); opacity: 0;
  transition: transform .5s var(--spring), opacity .4s var(--ease);
}
.team-modal.is-open .team-modal__dialog { transform: none; opacity: 1; }
.team-modal__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* compact header: small avatar on the left, name + role to the right */
.team-modal__head {
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 1.4rem);
  padding: clamp(1.5rem, 3vw, 2rem); padding-right: clamp(3rem, 6vw, 3.6rem);
}
.team-modal__media { flex: 0 0 auto; width: clamp(88px, 22vw, 116px); aspect-ratio: 1/1; border-radius: var(--r-md); overflow: hidden; background: var(--sand); }
.team-modal__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.team-modal__id { min-width: 0; }
.team-modal__num { display: block; font-family: var(--font-label); font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--berry); margin-bottom: .4rem; }
.team-modal__id h3 { font-size: clamp(1.35rem, 2.8vw, 1.8rem); line-height: 1.08; }
.team-modal__role { color: var(--teal); font-family: var(--font-label); font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; margin-top: .45rem; }
.team-modal__bio { padding: 0 clamp(1.5rem, 3vw, 2rem) clamp(1.6rem, 3vw, 2rem); }
.team-modal__bio::before { content: ""; display: block; height: 1px; background: var(--line); margin-bottom: clamp(1.1rem, 2.5vw, 1.4rem); }
.team-modal__bio p { color: var(--muted); font-size: .96rem; line-height: 1.65; }
.team-modal__bio p + p { margin-top: .9rem; }
.team-modal__close {
  position: absolute; top: .85rem; right: .85rem; z-index: 2; width: 42px; height: 42px;
  border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--ink);
  box-shadow: var(--sh-1); font-size: 1.5rem; line-height: 1; transition: background .25s var(--ease), transform .3s var(--spring);
}
.team-modal__close:hover { background: #fff; transform: rotate(90deg); }
body.team-modal-open { overflow: hidden; }

/* keep the compact grid at 2-up on small screens instead of a long single column */
@media (max-width: 560px){
  .team-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 440px){
  .team-modal__head { padding: 1.3rem; padding-right: 3rem; gap: 1rem; }
  .team-modal__media { width: 76px; }
  .team-modal__bio { padding: 0 1.3rem 1.4rem; }
}
@media (prefers-reduced-motion: reduce){
  .team-modal__dialog { transition: opacity .25s linear; transform: none; }
}

/* ==========================================================================
   IMMERSIVE MEDIA EXPERIENCE  ([data-page="media"])
   ========================================================================== */
[data-page="media"] #main { background: var(--teal-ink); }

/* Solid white nav on the media page (dark hero behind it) */
[data-page="media"] .site-header { background: var(--bg); box-shadow: 0 1px 0 var(--line), 0 6px 24px rgba(28,50,51,.06); }

/* ----- Cinematic full-screen hero --------------------------------------- */
.ig-hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.ig-hero__bg { position: absolute; inset: 0; z-index: -2; }
.ig-hero__bg video, .ig-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Two stacked clips crossfade into one another (see the hero reel in
   media.html). Keep this duration in step with FADE there. */
.ig-hero__bg[data-hero-reel] video { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.ig-hero__bg[data-hero-reel] video.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ig-hero__bg[data-hero-reel] video { transition: none; }
}
.ig-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,32,31,.34) 0%, rgba(15,32,31,0) 22%, rgba(15,32,31,0) 70%, rgba(15,32,31,.55) 100%); }
.ig-hero__inner { padding-top: clamp(110px, 13vw, 150px); padding-bottom: clamp(80px, 10vw, 120px); position: relative; z-index: 2; }
.ig-hero .label { color: #fff; }
.ig-hero .label::before { background: var(--pink); }
.ig-hero h1 { color: #fff; font-size: clamp(3rem, 9vw, 7rem); line-height: .95; letter-spacing: -.035em; max-width: 15ch; }
.ig-hero p { color: rgba(255,255,255,.84); max-width: 56ch; margin-top: 1.35rem; font-size: clamp(1.05rem, 1.6vw, 1.32rem); }
.ig-hero__cta { margin-top: 2.1rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.ig-scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3; display: inline-flex; flex-direction: column; align-items: center; gap: .5rem; color: rgba(255,255,255,.72); font-family: var(--font-label); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; }
.ig-scroll span { width: 1px; height: 38px; background: linear-gradient(rgba(255,255,255,.7), transparent); animation: igScroll 2s var(--ease) infinite; }
@keyframes igScroll { 0%{transform:scaleY(0);transform-origin:top} 40%{transform:scaleY(1);transform-origin:top} 60%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ----- Sticky filter bar ------------------------------------------------- */
.ig-bar { position: sticky; top: 0; z-index: 50; background: rgba(15,32,31,.82); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.08); }
.ig-bar__inner { display: flex; align-items: center; gap: 1.2rem; justify-content: space-between; padding: 14px var(--gut); flex-wrap: wrap; }
.ig-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.ig-chip { padding: .55em 1.15em; border-radius: var(--r-pill); font-family: var(--font-label); font-weight: 600; font-size: .8rem; letter-spacing: .02em; color: rgba(255,255,255,.72); background: rgba(255,255,255,.08); transition: background .3s var(--ease), color .3s, transform .3s var(--spring); }
.ig-chip:hover { background: rgba(255,255,255,.18); color: #fff; transform: translateY(-2px); }
.ig-chip.is-active { background: #fff; color: var(--teal-ink); }
.ig-count { color: rgba(255,255,255,.55); font-family: var(--font-label); font-size: .76rem; letter-spacing: .06em; white-space: nowrap; }

/* ----- Full-bleed masonry ------------------------------------------------ */
.ig-stage { background: var(--teal-ink); padding: 12px var(--gut) clamp(50px, 7vw, 90px); }
.ig { columns: 5 248px; column-gap: 12px; }
@media (max-width: 1100px){ .ig { columns: 4 220px; } }
@media (max-width: 720px){ .ig { columns: 2 150px; column-gap: 8px; } }
.ig-item { position: relative; display: block; width: 100%; margin: 0 0 12px; padding: 0; border: 0; border-radius: var(--r-sm); overflow: hidden; background: var(--teal-deep); cursor: zoom-in; break-inside: avoid; box-shadow: 0 10px 30px rgba(0,0,0,.28); transition: transform .5s var(--spring), box-shadow .4s var(--ease); }
@media (max-width: 720px){ .ig-item { margin-bottom: 8px; } }
.ig-item:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(0,0,0,.45); z-index: 2; }
.ig-item img { width: 100%; height: auto; display: block; transition: transform .9s var(--ease), filter .4s; }
.ig-item:hover img { transform: scale(1.07); }
.ig-item__ov { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 14px; opacity: 0; background: linear-gradient(180deg, transparent 45%, rgba(8,18,17,.85)); transition: opacity .35s var(--ease); }
.ig-item:hover .ig-item__ov, .ig-item:focus-visible .ig-item__ov { opacity: 1; }
.ig-item__cap { color: #fff; font-family: var(--font-label); font-weight: 600; font-size: .84rem; line-height: 1.35; }
.ig-item__tag { position: absolute; top: 10px; left: 10px; z-index: 2; font-family: var(--font-label); font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--pink); padding: .35em .65em; border-radius: var(--r-pill); }
.ig-item__play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ig-item__play .pbtn { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; color: var(--pink); transition: transform .4s var(--spring); }
.ig-item:hover .ig-item__play .pbtn { transform: scale(1.12); }
.ig-item.is-hidden { display: none; }
.ig-empty { color: rgba(255,255,255,.6); text-align: center; padding: 3rem 0; font-family: var(--font-label); }

/* ----- Immersive lightbox (with prev/next nav) --------------------------- */
.ig-lb { position: fixed; inset: 0; z-index: 300; display: none; background: rgba(6,15,14,.97); backdrop-filter: blur(8px); }
.ig-lb.open { display: grid; place-items: center; animation: fadeUp .3s var(--ease); }
.ig-lb__media { display: grid; place-items: center; width: min(1500px, 94vw); }
.ig-lb__media img, .ig-lb__media video { max-width: 94vw; max-height: 84vh; width: auto; height: auto; border-radius: var(--r-md); box-shadow: var(--sh-2); background: #000; }
.ig-lb__media img { transition: filter .35s var(--ease); }
.ig-lb__media img.is-loading { filter: blur(12px); }
@media (prefers-reduced-motion: reduce){ .ig-lb__media img { transition: none; } }
.ig-lb__cap { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; color: rgba(255,255,255,.9); font-family: var(--font-label); font-size: .9rem; letter-spacing: .02em; padding: 0 4vw; pointer-events: none; }
.ig-lb__counter { position: absolute; top: 26px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.6); font-family: var(--font-label); font-size: .78rem; letter-spacing: .14em; }
.ig-lb__btn { position: absolute; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; transition: background .3s, transform .3s var(--spring); z-index: 4; }
.ig-lb__btn:hover { background: rgba(255,255,255,.26); transform: scale(1.08); }
.ig-lb__close { top: 20px; right: 20px; font-size: 1.4rem; }
.ig-lb__nav { top: 50%; transform: translateY(-50%); }
.ig-lb__nav:hover { transform: translateY(-50%) scale(1.08); }
.ig-lb__prev { left: clamp(10px, 3vw, 44px); }
.ig-lb__next { right: clamp(10px, 3vw, 44px); }
@media (max-width: 720px){ .ig-lb__nav { width: 42px; height: 42px; } }

/* ----- Closing content sits on light surface again ----------------------- */
.ig-light { background: var(--bg); position: relative; z-index: 2; }
.ig-light.curve { border-radius: var(--r-xl) var(--r-xl) 0 0; }

@media (prefers-reduced-motion: reduce){
  .ig-scroll span { animation: none; }
  .ig-item img { transition: none; }
}

/* ==========================================================================
   HOME REDESIGN  ([data-page="home"]) - immersive, kinetic, unique
   Scoped to "hx-" classes so other pages are untouched.
   ========================================================================== */

/* scroll progress bar */
.hx-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 95; background: transparent; pointer-events: none; }
.hx-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--honey), var(--pink)); box-shadow: 0 0 12px rgba(207,138,63,.5); transition: width .12s linear; }

/* ---------- HERO - editorial split, framed orchard film ------------------ */
.hx-hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; isolation: isolate; color: var(--ink);
  padding-top: clamp(124px, 14vw, 170px); padding-bottom: clamp(46px, 6vw, 84px);
}
/* clean, airy backdrop with soft brand blooms (no busy mesh / sun rays) */
.hx-hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(180deg, #ffffff 0%, #f6faf9 50%, #eef4f3 80%, var(--bg) 100%);
}
.hx-hero__bg::before, .hx-hero__bg::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(72px); pointer-events: none;
}
.hx-hero__bg::before { width: 46vw; height: 46vw; left: -12vw; top: -10vw;
  background: radial-gradient(circle, rgba(240,205,154,.46), transparent 68%); }
.hx-hero__bg::after { width: 40vw; height: 40vw; right: -14vw; bottom: 16%;
  background: radial-gradient(circle, rgba(91,191,230,.26), transparent 70%); }
/* fade the foot of the hero into the section colour so the wave seam blends */
.hx-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none;
  height: clamp(240px, 40vh, 520px);
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.04) 26%,
    rgba(255,255,255,.13) 44%,
    rgba(255,255,255,.3) 60%,
    rgba(255,255,255,.55) 74%,
    rgba(255,255,255,.82) 88%,
    var(--bg) 100%);
}

/* two-column editorial layout */
.hx-hero__grid {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.6rem); align-items: center;
}
@media (max-width: 920px){ .hx-hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2.4rem, 7vw, 3.2rem); } }
.hx-hero__copy { max-width: 620px; }
@media (max-width: 920px){ .hx-hero__copy { max-width: 640px; margin-inline: auto; text-align: center; } }

/* framed orchard film - immersive but intentional */
.hx-hero__media { position: relative; opacity: 0; animation: hxFade 1s var(--ease) .35s forwards; }
.hx-hero__frame {
  position: relative; width: 100%; height: clamp(380px, 60vh, 588px);
  border-radius: clamp(20px, 2.4vw, 30px); overflow: hidden;
  box-shadow: 0 32px 70px rgba(18,40,38,.22), 0 6px 18px rgba(18,40,38,.10);
}
.hx-hero__frame video,
.hx-hero__frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.06) contrast(1.03); }
/* gentle top sheen + bottom shade for depth, plus a hairline edge */
.hx-hero__frame::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 24%, transparent 66%, rgba(10,28,26,.30));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.20);
}
@media (max-width: 920px){ .hx-hero__frame { height: clamp(320px, 52vh, 460px); } }

/* location tag, like a film geotag */
.hx-hero__chip {
  position: absolute; left: clamp(14px, 2vw, 22px); bottom: clamp(14px, 2vw, 22px); z-index: 2;
  display: inline-flex; align-items: center; gap: .5em; color: #fff;
  font-family: var(--font-label); font-weight: 600; font-size: .74rem; letter-spacing: .04em;
  padding: .5em .9em; border-radius: var(--r-pill); background: rgba(15,32,31,.40);
  border: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* two playful berry accents resting on the frame edge (no scattered cutouts) */
.hx-fruit { position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(0 14px 22px rgba(18,32,31,.28)); }
.hx-fruit img { width: 100%; height: auto; }
.hx-fruit--a { width: clamp(58px, 7vw, 96px); top: clamp(-26px, -2vw, -16px); left: clamp(-20px, -1.6vw, -12px); animation: hxFloatA 9s ease-in-out infinite; }
.hx-fruit--b { width: clamp(40px, 5vw, 66px); right: clamp(-18px, -1.4vw, -10px); bottom: clamp(40px, 7vw, 84px); animation: hxFloatB 11s ease-in-out infinite; }
@keyframes hxFloatA { 0%,100%{ transform: translateY(0) rotate(-6deg); } 50%{ transform: translateY(-16px) rotate(6deg); } }
@keyframes hxFloatB { 0%,100%{ transform: translateY(0) rotate(5deg); } 50%{ transform: translateY(14px) rotate(-7deg); } }
@media (max-width: 560px){ .hx-fruit--a { width: 52px; } .hx-fruit--b { width: 40px; } }

.hx-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 5.1vw, 4.6rem); line-height: .96; letter-spacing: -.035em; margin: 0; color: var(--ink); }
.hx-line { display: block; }
.hx-line--em { color: var(--teal); }
.hx-w { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(4deg); animation: hxWordIn .9s var(--spring) forwards; }
.hx-line .hx-w:nth-child(1){ animation-delay:.16s } .hx-line .hx-w:nth-child(2){ animation-delay:.26s }
.hx-line--em .hx-w:nth-child(1){ animation-delay:.38s } .hx-line--em .hx-w:nth-child(2){ animation-delay:.48s }
@keyframes hxWordIn { to { opacity: 1; transform: none; } }

.hx-hero__sub { max-width: 46ch; margin: 1.5rem 0 0; font-size: clamp(1.05rem, 1.4vw, 1.24rem); color: var(--muted); line-height: 1.6; opacity: 0; animation: hxFade .9s var(--ease) .55s forwards; }
@media (max-width: 920px){ .hx-hero__sub { margin-inline: auto; } }

/* stacked hero variant - centred copy above a page-wide film.
   minmax(0,1fr) not 1fr: a plain 1fr is minmax(auto,1fr), and the hero
   image gave that auto floor a 480px min-content, so the track stayed
   480px wide on phones and the hero was clipped by body{overflow-x:hidden}. */
.hx-hero__grid--stack { grid-template-columns: minmax(0, 1fr); gap: clamp(2.2rem, 4.5vw, 3.4rem); justify-items: center; }
.hx-hero__copy--center { max-width: 780px; text-align: center; margin-inline: auto; }
.hx-hero__copy--center .hx-hero__sub { margin-inline: auto; max-width: 64ch; }
.hx-hero__media--wide { width: 100%; }
.hx-hero__media--wide .hx-hero__frame { height: clamp(320px, 56vh, 600px); }
/* image-first hero: the image leads, the headline follows */
.hx-hero__media--first { animation-delay: .12s; }
/* The frame is a wide letterbox on desktop but close to square on a phone, and
   object-fit centres by default — which on the aerial crops away the river and
   the sunset. Bias the phone crop right so both stay in shot. */
@media (max-width: 920px) {
  .hx-hero__media--first .hx-hero__frame img { object-position: 72% 50%; }
}
/* Same reasoning as .ob-band: clamp(...,56vh,...) crops ~48% off a 720px-tall
   window, clipping the tube tops and the front pack's strapline. */
.hx-hero__media--first .hx-hero__frame { height: auto; aspect-ratio: 2 / 1; min-height: 320px; }
@media (max-width: 700px){ .hx-hero__media--first .hx-hero__frame { aspect-ratio: 3 / 2; } }
.hx-hero__media--first + .hx-hero__copy--center .hx-w { animation-delay: .5s; }
.hx-hero__media--first + .hx-hero__copy--center .hx-line .hx-w:nth-child(2) { animation-delay: .6s; }
.hx-hero__media--first + .hx-hero__copy--center .hx-line--em .hx-w:nth-child(1) { animation-delay: .72s; }
.hx-hero__media--first + .hx-hero__copy--center .hx-line--em .hx-w:nth-child(2) { animation-delay: .82s; }
.hx-hero__media--first + .hx-hero__copy--center .hx-hero__sub { animation-delay: .9s; }
.hx-hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; opacity: 0; animation: hxFade .9s var(--ease) .7s forwards; }
@media (max-width: 920px){ .hx-hero__cta { justify-content: center; } }
@keyframes hxFade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hx-scroll { margin: clamp(30px, 4.5vw, 52px) auto 0; width: max-content; max-width: 100%; align-self: center; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: .55rem; color: var(--muted); }
.hx-scroll__txt { font-family: var(--font-label); font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; }
.hx-scroll__line { width: 1px; height: 42px; background: linear-gradient(var(--teal), transparent); animation: igScroll 2s var(--ease) infinite; }

/* organic flowing edge dividers (shared) */
.hx-wave { position: absolute; left: 0; right: 0; line-height: 0; z-index: 4; pointer-events: none; }
.hx-wave svg { display: block; width: 100%; height: clamp(80px, 11vw, 160px); }
.hx-wave--hero { bottom: -1px; }
.hx-wave--hero svg { filter: drop-shadow(0 -8px 10px rgba(20,32,31,.04)); }
.hx-wave--hero svg path { fill: var(--bg); }

/* reusable section-seam waves (top + bottom edges of a contrasting band) */
.hx-wave--top { top: -1px; }
.hx-wave--top svg { transform: rotate(180deg); height: clamp(48px, 7vw, 104px); }
.hx-wave--bottom { bottom: -1px; }
.hx-wave--bottom svg { height: clamp(48px, 7vw, 104px); }
.hx-story .hx-wave { z-index: 1; }
.hx-story .hx-wave svg path { fill: var(--bg); }
.hx-story__inner { position: relative; z-index: 2; }

/* ----- animated flowing seam (mask-based, gap-proof) ----------------------
   the wave is a repeating SVG MASK over a solid background-colour, so the mask
   ALWAYS tiles across the full width (no transform / 200%-width / overflow
   tricks that exposed hard edges). drifting mask-position by exactly one tile
   loops seamlessly. the inner <svg> is hidden here - it only serves the static
   (non-animated) waves on other pages. */
.hx-wave--anim { --wtile: clamp(560px, 62vw, 940px); height: clamp(40px, 5.5vw, 84px);
  background-color: var(--bg);
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-size: var(--wtile) 100%; mask-size: var(--wtile) 100%;
  -webkit-mask-position: 0 50%; mask-position: 0 50%;
  animation: hxWaveSlide 14s linear infinite; }
.hx-wave--anim svg { display: none; }
/* gentle horizontal drift - one tile per loop keeps it perfectly seamless */
@keyframes hxWaveSlide { from { -webkit-mask-position: 0 50%; mask-position: 0 50%; }
                         to   { -webkit-mask-position: var(--wtile) 50%; mask-position: var(--wtile) 50%; } }
/* drape DOWN: colour on top, gentle wavy lower edge (a band's top seam) */
.hx-wave--anim.hx-wave--top {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C100,54 200,54 300,40 C400,26 500,26 600,40 L600,0 L0,0 Z' fill='%23fff'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C100,54 200,54 300,40 C400,26 500,26 600,40 L600,0 L0,0 Z' fill='%23fff'/%3E%3C/svg%3E"); }
/* rise UP: colour at the bottom, gentle wavy upper edge (a band's bottom seam) */
.hx-wave--anim.hx-wave--bottom {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C100,26 200,26 300,40 C400,54 500,54 600,40 L600,80 L0,80 Z' fill='%23fff'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C100,26 200,26 300,40 C400,54 500,54 600,40 L600,80 L0,80 Z' fill='%23fff'/%3E%3C/svg%3E"); }

/* river band (dark) - light waves, high contrast */
.hx-story .hx-wave { z-index: 1; }
.hx-story .hx-wave--anim { background-color: var(--bg); }

/* the curved Meet Tuli sections rise into the band above: drop the hard rounded
   top, give the top seam the rise-up (wavy upper edge) mask + a soft lift */
.curve:has(> .hx-wave--top) { border-radius: 0; }
.hx-seam { position: relative; z-index: 2; }
.hx-seam .hx-wave { z-index: 1; }
.hx-seam > .wrap { position: relative; z-index: 2; }
.hx-seam .hx-wave--anim.hx-wave--top {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C100,26 200,26 300,40 C400,54 500,54 600,40 L600,80 L0,80 Z' fill='%23fff'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C100,26 200,26 300,40 C400,54 500,54 600,40 L600,80 L0,80 Z' fill='%23fff'/%3E%3C/svg%3E");
  filter: drop-shadow(0 -3px 5px rgba(20,32,31,.06)); }
.section-playful .hx-wave--anim.hx-wave--top { background-color: var(--bg); }
.booklets .hx-wave--anim.hx-wave--top { background-color: var(--surface); }
.tuli-surprise .hx-wave--anim.hx-wave--top { background-color: var(--surface); }
.hx-collect .hx-wave--anim.hx-wave--top { background-color: #eef4fc; }

/* ---------- MARQUEE - soft, warm band ------------------------------------- */
.hx-marquee {
  background: linear-gradient(90deg, #fbf1e2 0%, #fdeee4 50%, #f3f0e6 100%);
  color: var(--teal-deep); padding-block: 1.05rem; overflow: hidden; white-space: nowrap;
  position: relative; z-index: 5; border-block: 1px solid rgba(207,138,63,.16);
}
.hx-marquee__track { display: inline-flex; animation: marquee 34s linear infinite; will-change: transform; }
.hx-marquee:hover .hx-marquee__track { animation-play-state: paused; }
.hx-marquee span { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.1rem, 2.2vw, 1.7rem); display: inline-flex; align-items: center; }
.hx-marquee i { width: 9px; height: 9px; border-radius: 50%; background: var(--honey); margin: 0 1.6rem; display: inline-block; opacity: .8; }

/* ---------- directional reveal variants (seamless entrances) -------------- */
.reveal.reveal--left  { transform: translateX(-44px) translateY(14px); }
.reveal.reveal--right { transform: translateX(44px) translateY(14px); }
.reveal.reveal--left.in, .reveal.reveal--right.in { transform: none; }

/* ---------- WHY DIFFERENT - flowing, staggered ---------------------------- */
.hx-feats { position: relative; overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #faf6fb 55%, #f4ecf7 100%); }
.hx-feats__flow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 50% at 90% 16%, rgba(91,191,230,.08), transparent 62%),
    radial-gradient(48% 52% at 6% 64%, rgba(168,140,230,.10), transparent 64%); }
.hx-feats__berry { position: absolute; z-index: 0; width: clamp(56px,7vw,104px); right: 1.5%; top: 16%; opacity: .42;
  filter: drop-shadow(0 16px 28px rgba(20,32,31,.16)); animation: popFloatA 11s ease-in-out infinite; pointer-events: none; }
.hx-feats__leaf { position: absolute; z-index: 0; width: clamp(48px,6vw,90px); left: 1.5%; top: 52%; opacity: .4;
  filter: drop-shadow(0 14px 24px rgba(20,32,31,.14)); animation: popFloatB 13s ease-in-out infinite; pointer-events: none; }
@media (max-width: 900px){ .hx-feats__berry, .hx-feats__leaf { display: none; } }
.hx-feats__layout { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,5vw,4.5rem); align-items: start; }
@media (max-width: 900px){ .hx-feats__layout { grid-template-columns: 1fr; } }
.hx-feats__head { position: sticky; top: 110px; }
@media (max-width: 900px){ .hx-feats__head { position: static; } }
.hx-feats__head h2 { margin-top: 1rem; }
.hx-feats__head .lead { margin-top: 1rem; max-width: 40ch; }
.hx-feats__head .btn { margin-top: 1.8rem; }

.hx-feats__flow-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
@media (max-width: 560px){ .hx-feats__flow-grid { grid-template-columns: 1fr; } }
/* gentle vertical offset so the cards feel hand-placed, not gridded */
.hx-feats__flow-grid .hx-feat:nth-child(2n) { transform: translateY(2.6rem); }
.hx-feats__flow-grid .hx-feat:nth-child(2n).in { transform: translateY(2.6rem); }
@media (max-width: 560px){ .hx-feats__flow-grid .hx-feat:nth-child(2n), .hx-feats__flow-grid .hx-feat:nth-child(2n).in { transform: none; } }

.hx-feat { position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 2.1rem 1.9rem; overflow: hidden;
  transition: transform .5s var(--spring), box-shadow .45s var(--ease), border-color .4s;
}
.hx-feat::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(130% 130% at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--c, var(--teal)) 14%, transparent), transparent 56%);
  opacity: 0; transition: opacity .45s; }
.hx-feat:hover { transform: translateY(-8px); box-shadow: 0 24px 50px color-mix(in srgb, var(--c) 18%, transparent);
  border-color: color-mix(in srgb, var(--c) 32%, var(--line)); }
.hx-feats__flow-grid .hx-feat:nth-child(2n):hover { transform: translateY(calc(2.6rem - 8px)); }
@media (max-width: 560px){ .hx-feats__flow-grid .hx-feat:nth-child(2n):hover { transform: translateY(-8px); } }
.hx-feat:hover::before { opacity: 1; }
.hx-feat__no { position: absolute; top: 1.2rem; right: 1.4rem; z-index: 1;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--c);
  opacity: .28; transition: opacity .4s, transform .5s var(--spring); }
.hx-feat:hover .hx-feat__no { opacity: .6; transform: scale(1.15); }
.hx-feat__ic { position: relative; z-index: 1; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  color: var(--c, var(--teal)); background: color-mix(in srgb, var(--c, var(--teal)) 14%, var(--surface));
  margin-bottom: 1.2rem; transition: transform .45s var(--spring); }
.hx-feat:hover .hx-feat__ic { transform: rotate(-8deg) scale(1.08); }
.hx-feat h3 { position: relative; z-index: 1; font-size: 1.32rem; }
.hx-feat p { position: relative; z-index: 1; margin-top: .6rem; color: var(--muted); font-size: .98rem; }

/* ---------- TULI - playful, seamless pastel wash -------------------------- */
.hx-tuli { position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #f4ecf7 0%, #ece4f6 32%, #e7ecfa 64%, #eef4fc 100%); }
/* wavy, animated edges so the pastel Tuli band flows out of the sections
   around it instead of meeting them on a straight line */
/* gentle wavy edges so the pastel Tuli band flows into its neighbours: the top
   join shares feats' colour (blends seamlessly, curve defined by a soft shadow),
   the bottom flows white into the white section below. */
.hx-tuli .hx-wave { z-index: 1; }
.hx-tuli .hx-wave--anim.hx-wave--top { background-color: #f4ecf7;
  filter: drop-shadow(0 4px 6px rgba(76,52,110,.10)); }
.hx-tuli .hx-wave--anim.hx-wave--bottom { background-color: var(--surface);
  filter: drop-shadow(0 -5px 8px rgba(40,60,90,.08)); }
/* keep the very top of the band lavender (matching feats above + the wave) so
   the pink flow eases in lower down - softens the feats -> Tuli colour seam */
.hx-tuli::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 34%; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(244,236,247,.85) 0%, rgba(244,236,247,.4) 48%, transparent 100%); }
/* flowing chromatic mesh (sky to lavender to teal - dialled-back pink) */
.hx-tuli__flow { position: absolute; inset: -25%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 38% at 22% 30%, rgba(91,191,230,.4), transparent 62%),
    radial-gradient(42% 42% at 78% 24%, rgba(120,205,214,.38), transparent 62%),
    radial-gradient(40% 40% at 64% 82%, rgba(168,140,230,.32), transparent 62%),
    radial-gradient(44% 44% at 24% 76%, rgba(150,214,240,.34), transparent 62%);
  filter: blur(30px); animation: hxFlow 22s ease-in-out infinite alternate; will-change: transform; }
@keyframes hxFlow {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  50%  { transform: translate(2.5%,-2%) scale(1.08) rotate(3deg); }
  100% { transform: translate(-2.5%,2%) scale(1.05) rotate(-3deg); }
}
.hx-tuli__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
@media (max-width: 820px){ .hx-tuli__grid { grid-template-columns: 1fr; text-align: center; } }
.hx-tuli .label { color: var(--grape); }
.hx-tuli .label::before { background: var(--teal); }
@media (max-width:820px){ .hx-tuli .label { justify-content: center; } }
.hx-tuli h2 { margin-top: 1rem; }
.hx-tuli p { margin-top: 1.1rem; font-size: 1.12rem; color: var(--teal-ink); max-width: 48ch; }
@media (max-width:820px){ .hx-tuli p { margin-inline: auto; } }
.hx-tuli__cta { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
@media (max-width:820px){ .hx-tuli__cta { justify-content: center; } }
.hx-tuli__art { position: relative; display: grid; place-items: center; min-height: 380px; }
.hx-tuli__img { width: min(100%, 400px); filter: drop-shadow(0 28px 36px rgba(28,50,51,.28)); animation: bob 6s ease-in-out infinite; position: relative; z-index: 2; }
.hx-tuli__halo { position: absolute; inset: 0; margin: auto; width: 96%; aspect-ratio: 1; border-radius: 50%; z-index: 0;
  background: radial-gradient(closest-side, rgba(255,255,255,.5), transparent 72%); filter: blur(8px); animation: popSpin 40s linear infinite; }
.hx-tuli__disc { position: absolute; inset: 0; margin: auto; width: 78%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.55); z-index: 1; animation: pulseDisc 5s ease-in-out infinite; }
/* decorative bee/butterfly crowd the stacked layout on small screens */
@media (max-width: 820px){ .hx-tuli .lottie { display: none; } }

/* ---------- COLLECT THEM ALL - immersive sticker game --------------------- */
.hx-collect { position: relative; overflow: hidden; isolation: isolate; text-align: center;
  background: linear-gradient(180deg, #eef4fc 0%, #f2f9fd 45%, #f3f8fd 100%); }
.hx-collect__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 46% at 16% 18%, rgba(255,107,171,.16), transparent 60%),
    radial-gradient(42% 48% at 84% 24%, rgba(91,191,230,.16), transparent 60%),
    radial-gradient(50% 50% at 50% 100%, rgba(207,138,63,.12), transparent 62%); }
.hx-collect .wrap { position: relative; z-index: 1; }
.hx-collect__head { max-width: 640px; margin: 0 auto; }
.hx-collect__head .label { justify-content: center; }
.hx-collect__head h2 { margin-top: 1rem; }
.hx-collect__head .lead { margin-top: 1rem; }

.hx-collect__meter { display: inline-flex; flex-direction: column; gap: .7rem; align-items: center; margin-top: 1.8rem; width: min(320px, 80%); }
.hx-collect__count { font-family: var(--font-label); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep); }
.hx-collect__count b { font-family: var(--font-display); font-size: 1.1rem; color: var(--teal); }
.hx-collect__bar { display: block; width: 100%; height: 8px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.hx-collect__bar span { display: block; height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--honey), var(--sky)); transition: width .6s var(--spring); }

.hx-collect__board { display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2.2rem); justify-content: center; margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.hx-sticker {
  position: relative; width: clamp(120px, 16vw, 180px); aspect-ratio: 1; border-radius: 26px;
  background: rgba(255,255,255,.55); border: 2px dashed color-mix(in srgb, var(--c) 40%, var(--line));
  display: grid; place-items: center; padding: 14px; transform: rotate(var(--r, 0deg));
  transition: transform .5s var(--spring), box-shadow .45s, border-color .4s, background .4s;
  -webkit-tap-highlight-color: transparent;
}
.hx-sticker img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(.75) opacity(.6); transition: filter .5s var(--ease), transform .5s var(--spring); }
.hx-sticker__shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .4s; }
.hx-sticker__shine::after { content: ""; position: absolute; top: -60%; left: -30%; width: 40%; height: 220%; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); }
.hx-sticker__tick { position: absolute; top: -10px; right: -10px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--c); color: #fff; display: grid; place-items: center; font-size: 1rem; font-weight: 700;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 45%, transparent);
  transform: scale(0) rotate(-30deg); transition: transform .5s var(--spring); }
.hx-sticker:hover { transform: rotate(0deg) scale(1.05); box-shadow: 0 20px 44px color-mix(in srgb, var(--c) 22%, transparent); border-color: color-mix(in srgb, var(--c) 55%, var(--line)); }
.hx-sticker:hover img { filter: grayscale(.2) opacity(.92); }

/* collected state */
.hx-sticker.is-got { background: color-mix(in srgb, var(--c) 10%, #fff); border-style: solid; border-color: color-mix(in srgb, var(--c) 50%, var(--line));
  box-shadow: 0 22px 48px color-mix(in srgb, var(--c) 26%, transparent); animation: hxPop .55s var(--spring); }
.hx-sticker.is-got img { filter: none; }
.hx-sticker.is-got .hx-sticker__tick { transform: scale(1) rotate(0); }
.hx-sticker.is-got .hx-sticker__shine { opacity: 1; }
.hx-sticker.is-got .hx-sticker__shine::after { animation: hxShine 1s var(--ease) .1s; }
@keyframes hxPop { 0%{transform:rotate(var(--r,0)) scale(1)} 40%{transform:rotate(0) scale(1.16)} 100%{transform:rotate(0) scale(1)} }
@keyframes hxShine { 0%{ left:-30%; } 100%{ left:130%; } }

.hx-collect__win { margin-top: 2.2rem; font-family: var(--font-display); font-size: clamp(1.2rem,2.4vw,1.6rem); color: var(--teal-deep);
  opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--spring); }
.hx-collect__win:not([hidden]) { opacity: 1; transform: none; }
.hx-collect__win a { color: var(--teal); font-family: var(--font-label); font-weight: 600; font-size: .95rem; white-space: nowrap; }

/* ---------- OUR RANGE - product card grid --------------------------------- */
.hx-pop { position: relative; overflow: hidden;
  background: linear-gradient(180deg, #f3f8fd 0%, var(--bg-2) 30%, var(--bg-2) 100%); }
.hx-pop__aura { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 60% at 82% 18%, rgba(52,91,92,.10), transparent 62%),
    radial-gradient(42% 55% at 10% 88%, rgba(91,191,230,.10), transparent 60%); }
.hx-pop .wrap { position: relative; z-index: 1; }
.hx-pop__decor { position: absolute; z-index: 0; pointer-events: none; opacity: .5; filter: drop-shadow(0 14px 26px rgba(20,32,31,.14)); }
.hx-pop__decor.d2 { width: clamp(80px,11vw,150px); bottom: 6%; left: 2%; animation: popFloatB 11s ease-in-out infinite; }
@keyframes popFloatA { 50% { transform: translateY(-16px) rotate(8deg); } }
@keyframes popFloatB { 50% { transform: translateY(14px) rotate(-7deg); } }
@keyframes popSpin { to { transform: rotate(360deg); } }

.hx-pop__head { max-width: 680px; margin-bottom: clamp(2rem,4vw,3rem); }
.hx-pop__head h2 { margin-top: 1rem; }
.hx-pop__head .lead { margin-top: 1rem; }

/* three product cards, all visible */
.hx-pop__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); }
@media (max-width: 860px){ .hx-pop__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.hx-pop__card { position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-xl); background: var(--surface); border: 1px solid color-mix(in srgb, var(--c) 16%, var(--line));
  box-shadow: 0 12px 30px rgba(20,32,31,.06);
  transition: transform .5s var(--spring), box-shadow .45s, border-color .4s; }
@media (max-width: 560px){ .hx-pop__card { border-radius: var(--r-lg); } }
.hx-pop__card:hover { transform: translateY(-10px); border-color: color-mix(in srgb, var(--c) 38%, var(--line));
  box-shadow: 0 30px 64px color-mix(in srgb, var(--c) 20%, rgba(20,32,31,.14)); }

/* media area - product floats on a soft tinted stage with a pedestal shadow */
.hx-pop__media { position: relative; aspect-ratio: 4/3.5; display: grid; place-items: center; padding: clamp(1.4rem,3vw,2.2rem);
  background: radial-gradient(120% 90% at 50% 12%, #ffffff 0%, color-mix(in srgb, var(--c) 8%, #ffffff) 62%, color-mix(in srgb, var(--c) 18%, #ffffff) 100%); }
.hx-pop__media::after { content: ""; position: absolute; left: 50%; bottom: 12%; width: 58%; height: 9%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(20,32,31,.20), transparent 75%); filter: blur(6px); z-index: 0; }
.hx-pop__art { position: relative; z-index: 1; height: 82%; width: auto; max-width: 100%; overflow: visible; display: block;
  filter: drop-shadow(0 16px 22px rgba(20,32,31,.16)); }
/* softer, thinner container outlines (override the inline dark stroke) */
.hx-pop__art [stroke="#2b4a4b"] { stroke: #9fb3b9; stroke-width: 2; }
/* clamshell sits slightly smaller than the tube */
.hx-pop__art--sm { transform: scale(.9); transform-origin: center; }
.hx-pop__media { cursor: pointer; }

/* SVG pack animations */
.hx-pack { transform-box: fill-box; transform-origin: 50% 100%; animation: hxPackFloat 6s ease-in-out infinite; }
@keyframes hxPackFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.hx-berry { transform-box: fill-box; transform-origin: center; animation: hxBerryBob 3s ease-in-out infinite; }
@keyframes hxBerryBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3.5px)} }
.hx-shine { animation: hxShineSweep 5s ease-in-out infinite; }
@keyframes hxShineSweep { 0%,100%{opacity:0; transform:translateX(0)} 22%{opacity:.5} 55%{opacity:0; transform:translateX(54px)} }
.hx-badge { transform-box: fill-box; transform-origin: center; animation: hxBadge 6s ease-in-out infinite; }
@keyframes hxBadge { 0%,100%{transform:rotate(-4deg) translateY(0)} 50%{transform:rotate(4deg) translateY(-5px)} }
.hx-spark { transform-box: fill-box; transform-origin: center; animation: hxTwinkle 2.4s ease-in-out infinite; }
@keyframes hxTwinkle { 0%,100%{opacity:.25; transform:scale(.6)} 50%{opacity:1; transform:scale(1.15)} }

/* hover - the berries come alive */
.hx-pop__card:hover .hx-berry { animation-name: hxBerryJiggle; animation-duration: .85s; }
@keyframes hxBerryJiggle { 0%,100%{transform:translateY(0) rotate(0)} 30%{transform:translateY(-4px) rotate(-8deg)} 65%{transform:translateY(-1px) rotate(7deg)} }
.hx-pop__card:hover .hx-badge { animation-play-state: paused; }

/* click - munch! a quick chomp + berry jostle */
.hx-pop__card.is-munch .hx-pack { animation: hxMunch .55s var(--spring); }
.hx-pop__card.is-munch .hx-badge { animation: hxMunch .55s var(--spring); }
@keyframes hxMunch { 0%{transform:translateY(0) scale(1,1)} 20%{transform:translateY(3px) scale(1.08,.9)} 46%{transform:translateY(-7px) scale(.93,1.09)} 72%{transform:translateY(0) scale(1.03,.98)} 100%{transform:translateY(0) scale(1,1)} }
.hx-pop__card.is-munch .hx-berry { animation: hxBerryMunch .55s var(--spring); }
@keyframes hxBerryMunch { 0%{transform:translateY(0) scale(1)} 26%{transform:translateY(3px) scale(1.16,.82)} 56%{transform:translateY(-5px) scale(.86,1.14)} 100%{transform:translateY(0) scale(1)} }

.hx-pop__card--surprise .hx-pop__media { background: radial-gradient(70% 70% at 50% 44%, color-mix(in srgb, var(--c) 16%, #fff), #ffffff 78%); }
.hx-pop__card--surprise .hx-pop__media::after { display: none; }

.hx-pop__pill { position: absolute; top: 1rem; left: 1rem; z-index: 2; display: inline-block;
  font-family: var(--font-label); font-weight: 600; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--c); border-radius: var(--r-pill); padding: .5em 1.05em; box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 34%, transparent); }

.hx-pop__info { padding: 1.3rem clamp(1.2rem,2.5vw,1.6rem) 1.6rem; border-top: 1px solid color-mix(in srgb, var(--c) 12%, var(--line)); }
.hx-pop__info h3 { font-size: 1.22rem; color: var(--teal-deep); }
.hx-pop__info p { margin-top: .4rem; color: var(--muted); font-size: .95rem; }

/* footer CTA row */
.hx-pop__foot { margin-top: clamp(2rem,4vw,3rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.6rem; text-align: center; }
.hx-pop__foot p { color: var(--muted); font-size: 1.02rem; }



/* ---------- NUTRITION - reworked editorial split -------------------------- */
.hx-good { background: linear-gradient(180deg, var(--bg-2) 0%, #ffffff 70%, #ffffff 100%); position: relative; overflow: hidden; }
.hx-good__flow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 48% at 86% 10%, rgba(109,92,198,.10), transparent 60%),
    radial-gradient(44% 54% at 6% 88%, rgba(91,191,230,.10), transparent 60%); }
.hx-good .wrap { position: relative; z-index: 1; }
.hx-good__decor { position: absolute; z-index: 0; pointer-events: none; opacity: .4; filter: drop-shadow(0 14px 26px rgba(20,32,31,.12)); }
.hx-good__decor.g2 { width: clamp(54px,7vw,92px); bottom: 12%; right: 5%; animation: popFloatA 10s ease-in-out infinite; }

.hx-good__layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem,6vw,5rem); align-items: center; }
@media (max-width: 900px){ .hx-good__layout { grid-template-columns: 1fr; gap: clamp(2.5rem,8vw,4rem); } }

/* left: big playful berry inside an organic blob with floating chips */
.hx-good__visual { position: relative; display: grid; place-items: center; min-height: clamp(320px, 38vw, 460px); }
.hx-good__blob { position: absolute; inset: 4%; z-index: 0;
  background:
    radial-gradient(58% 58% at 32% 30%, rgba(141,160,236,.5), transparent 70%),
    radial-gradient(60% 60% at 74% 72%, rgba(91,191,230,.42), transparent 72%),
    radial-gradient(66% 66% at 60% 44%, rgba(168,140,230,.34), transparent 76%),
    linear-gradient(150deg, #e9ecfb 0%, #e0eef4 58%, #ece4f7 100%);
  border-radius: 42% 58% 56% 44% / 52% 44% 56% 48%;
  filter: blur(7px); opacity: .92; animation: hxMorph 16s ease-in-out infinite; }
@keyframes hxMorph {
  0%,100% { border-radius: 42% 58% 56% 44% / 52% 44% 56% 48%; transform: rotate(0deg); }
  50%     { border-radius: 58% 42% 44% 56% / 44% 56% 48% 52%; transform: rotate(6deg); }
}
.hx-good__ring { position: absolute; inset: -4%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, transparent 62%, rgba(255,255,255,.28) 70%, rgba(255,255,255,0) 82%);
  filter: blur(2px); animation: hxRingPulse 7s ease-in-out infinite; }
@keyframes hxRingPulse { 0%,100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.05); opacity: 1; } }
.hx-good__berry { position: relative; z-index: 2; width: min(62%, 280px); filter: drop-shadow(0 26px 36px rgba(20,32,31,.32)); animation: bob 7s ease-in-out infinite; }
.hx-good__chip { position: absolute; z-index: 3; font-family: var(--font-label); font-weight: 600; font-size: .76rem;
  letter-spacing: .02em; color: var(--teal-deep); background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  padding: .6em 1.1em; border-radius: var(--r-pill); box-shadow: var(--sh-1); white-space: nowrap; }
.hx-good__chip.chip-1 { top: 10%; left: -2%; animation: popFloatB 8s ease-in-out infinite; }
.hx-good__chip.chip-2 { top: 46%; right: -6%; animation: popFloatA 9s ease-in-out infinite; }
.hx-good__chip.chip-3 { bottom: 10%; left: 6%; animation: popFloatB 10s ease-in-out infinite; }
@media (max-width: 560px){ .hx-good__chip { font-size: .68rem; padding: .5em .9em; } }

/* right: heading + flowing benefit rows */
.hx-good__head { max-width: 520px; margin-bottom: clamp(1.6rem,3vw,2.4rem); }
.hx-good__head h2 { margin-top: 1rem; }
.hx-good__head .lead { margin-top: 1rem; }
.hx-good__list { display: grid; gap: .4rem; }
.hx-good__row { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start;
  padding: 1.2rem 1.1rem; border-radius: var(--r-md); transition: background .4s, transform .45s var(--spring); }
.hx-good__row + .hx-good__row { border-top: 1px solid var(--line); }
.hx-good__row:hover { background: color-mix(in srgb, var(--c) 7%, var(--surface)); transform: translateX(6px); border-color: transparent; }
.hx-good__row:hover + .hx-good__row { border-top-color: transparent; }
.hx-good__row .hx-good__ic { flex: none; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center;
  color: #fff; background: var(--c); box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 36%, transparent);
  transition: transform .45s var(--spring); }
.hx-good__row:hover .hx-good__ic { transform: scale(1.08) rotate(-6deg); }
.hx-good__row h3 { font-size: 1.18rem; color: var(--ink); }
.hx-good__row p { margin-top: .35rem; color: var(--muted); font-size: .96rem; }
.hx-good__note { margin-top: 1.4rem; font-size: .82rem; color: var(--muted); opacity: .8; }


/* ---------- STORY (immersive, full-bleed) --------------------------------- */
.hx-story { position: relative; isolation: isolate; overflow: hidden; color: #fff; display: grid; align-items: center; min-height: clamp(560px, 86vh, 820px); padding-block: clamp(70px, 10vw, 130px); scroll-margin-top: 90px; }
.hx-story__bg { position: absolute; inset: 0; z-index: -2; }
.hx-story__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); animation: hxKenBurns 26s ease-in-out infinite alternate; }
.hx-story__bg video { width: 100%; height: 100%; object-fit: cover; }
@keyframes hxKenBurns { from { transform: scale(1.08) translate(0,0); } to { transform: scale(1.18) translate(-2%, -2%); } }
.hx-story__scrim { position: absolute; inset: 0; z-index: -1;
  background:
    /* ease the bright hero + cream wave gently down into the dark river so the
       seam reads as soft mist instead of a hard light-to-dark cut */
    linear-gradient(180deg, rgba(247,249,248,.92) 0%, rgba(247,249,248,.55) 8%, rgba(247,249,248,.22) 17%, rgba(247,249,248,.07) 25%, transparent 33%),
    /* slight left wash keeps the heading legible without darkening the frame */
    linear-gradient(90deg, rgba(8,18,17,.46) 0%, rgba(8,18,17,.3) 42%, rgba(8,18,17,.12) 68%, transparent 100%); }
.hx-story__inner { width: 100%; }
.hx-story__content { max-width: 600px; text-shadow: 0 1px 18px rgba(6,16,15,.55); }
.hx-story .label { color: var(--honey-soft); }
.hx-story .label::before { background: var(--honey); }
.hx-story h2 { color: #fff; margin-top: 1rem; max-width: 14ch; }
.hx-story p { margin-top: 1.2rem; color: rgba(255,255,255,.86); font-size: 1.1rem; max-width: 50ch; }
.hx-story__facts { display: flex; flex-wrap: wrap; gap: 1rem 2.6rem; margin-top: 2rem; }
.hx-story__fact b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); color: #fff; line-height: 1; }
.hx-story__fact span { display: block; margin-top: .45rem; font-family: var(--font-label); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.hx-story__cta { margin-top: 2.2rem; }
@media (max-width: 760px){ .hx-story__scrim { background:
  linear-gradient(180deg, rgba(247,249,248,.85) 0%, rgba(247,249,248,.3) 12%, transparent 26%),
  linear-gradient(180deg, transparent 42%, rgba(8,18,17,.32) 66%, rgba(8,18,17,.6) 100%); } }

/* ---------- FINAL CTA ----------------------------------------------------- */
.hx-final { position: relative; overflow: hidden; background: var(--teal); color: #fff; padding-block: clamp(80px,12vw,160px); isolation: isolate; }
.hx-final__glow { position: absolute; inset: -30% -10% auto; height: 120%; z-index: -1; background: radial-gradient(55% 55% at 50% 0%, rgba(255,210,150,.22), transparent 70%); }
.hx-final .hx-wave { z-index: 1; }
.hx-final .hx-wave--anim.hx-wave--top { background-color: var(--surface); }
.hx-final .wrap { position: relative; z-index: 2; }
.hx-final .label { color: var(--honey-soft); }
.hx-final .label::before { background: var(--honey-soft); }
.hx-final__h2 { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: clamp(2.6rem, 8vw, 6rem); line-height: .98; letter-spacing: -.03em; margin-top: 1rem; }
.hx-final p { margin: 1.3rem auto 0; max-width: 46ch; color: rgba(255,255,255,.85); font-size: 1.12rem; }
.hx-final__cta { margin-top: 2.2rem; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.hx-final__cta .btn--honey { box-shadow: 0 12px 26px rgba(8,18,17,.22); }
.hx-final__cta .btn--honey:hover { box-shadow: 0 18px 34px rgba(8,18,17,.28); background: #d8953f; }
.hx-final__cta .btn--ghost { border-color: rgba(255,255,255,.6); color: #fff; }
.hx-final__cta .btn--ghost:hover { background: #fff; color: var(--teal-deep); }

/* ---------- reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hx-w, .hx-hero__sub, .hx-hero__cta, .hx-hero__media { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hx-fruit, .hx-tuli__img, .hx-scroll__line, .hx-tuli__flow,
  .hx-tuli__halo, .hx-tuli__disc, .hx-story__bg img, .hx-pop__decor, .hx-pop__ring,
  .hx-good__decor, .hx-good__blob, .hx-good__ring, .hx-good__berry, .hx-good__chip,
  .hx-feats__berry, .hx-feats__leaf { animation: none !important; }
  .hx-marquee__track { animation: none !important; }
  .hx-sticker.is-got { animation: none !important; }
  .hx-sticker__shine::after { animation: none !important; }
}

@media (max-width: 700px) {
  .hx-scroll { display: none; }
}


/* ===================================================================
   HARVEST CALENDAR - sits with the "More than just a blueberry" section
   =================================================================== */
.hx-harvest {
  margin-top: clamp(36px, 5vw, 64px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: clamp(24px, 3.2vw, 40px);
}
.hx-harvest__head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.hx-harvest__ic { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(155deg, var(--honey), #dd9230); box-shadow: 0 10px 22px rgba(207,138,63,.32); }
.hx-harvest__intro { margin-right: auto; }
.hx-harvest__intro .label { justify-content: flex-start; margin-bottom: .4rem; }
.hx-harvest__head h3 { font-family: var(--font-display, "Montserrat"); font-size: clamp(1.3rem, 2.5vw, 1.85rem); color: var(--ink); margin: 0; line-height: 1.04; }
.hx-harvest__peak { display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-label); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal-deep); background: color-mix(in srgb, var(--teal) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line)); padding: .55em 1.05em; border-radius: var(--r-pill); }
.hx-harvest__peak-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 20%, transparent); }
.hx-harvest__track { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; }
.hx-month {
  text-align: center; padding: .9rem .2rem; border-radius: 12px;
  background: var(--bg-2); color: var(--muted); border: 1px solid transparent;
  font-family: var(--font-label); font-size: .82rem; font-weight: 600; letter-spacing: .03em;
  position: relative; transition: transform .25s var(--ease, ease), box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.hx-month:not(.is-season):hover { transform: translateY(-3px); background: #fff; border-color: var(--line); box-shadow: var(--sh-1); }
.hx-month.is-season {
  background: linear-gradient(165deg, var(--teal), var(--teal-700));
  color: #fff; box-shadow: 0 10px 22px rgba(52,91,92,.3); transform: translateY(-2px);
}
.hx-month.is-season:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(52,91,92,.36); }
.hx-month.is-season::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--honey-soft);
}
.hx-harvest__note { margin-top: 1.3rem; padding-top: 1.15rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .94rem; }
@media (max-width: 720px) {
  .hx-harvest__track { grid-template-columns: repeat(6, 1fr); gap: 7px; }
  .hx-month { font-size: .76rem; padding: .75rem .2rem; }
  .hx-harvest__peak { display: none; }
}

/* ===================================================================
   GROWING TOGETHER - People + Sustainability splash
   =================================================================== */
.hx-together { position: relative; overflow: hidden; background: var(--surface); }
.hx-together .wrap { position: relative; z-index: 1; }
.hx-together__head { max-width: 760px; margin: 0 auto clamp(34px, 5vw, 56px); text-align: center; }
.hx-together__head .label { justify-content: center; }
.hx-together__head p { color: var(--muted); margin-top: 1rem; font-size: 1.08rem; line-height: 1.7; }

.hx-together__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 34px); }
@media (max-width: 760px) { .hx-together__grid { grid-template-columns: 1fr; } }

.hx-together__card {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--c) 18%, var(--line));
  box-shadow: 0 12px 30px rgba(20,32,31,.06);
  transition: transform .5s var(--spring), box-shadow .45s var(--ease), border-color .4s;
}
.hx-together__card:hover { transform: translateY(-8px);
  box-shadow: 0 28px 60px color-mix(in srgb, var(--c) 18%, rgba(20,32,31,.12));
  border-color: color-mix(in srgb, var(--c) 34%, var(--line)); }
.hx-together__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0; }
.hx-together__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.hx-together__card:hover .hx-together__media img { transform: scale(1.06); }
/* gentle brand-colour wash so the photo reads on-brand rather than like stock */
.hx-together__media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--c) 34%, transparent));
  mix-blend-mode: multiply; }
/* badge straddles the media/body seam - lives in the body so the media's
   overflow:hidden never clips its overhang */
.hx-together__badge { position: absolute; left: clamp(20px, 3vw, 28px); top: 0; transform: translateY(-50%); z-index: 3;
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #fff;
  background: color-mix(in srgb, var(--c) 80%, var(--teal-ink));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--c) 42%, transparent);
  transition: transform .45s var(--spring); }
.hx-together__card:hover .hx-together__badge { transform: translateY(-50%) rotate(-8deg) scale(1.08); }
.hx-together__body { position: relative; border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: clamp(34px, 3.4vw, 44px) clamp(24px, 3vw, 34px) clamp(26px, 3vw, 34px); }
.hx-together__kicker { font-family: var(--font-label); font-weight: 700; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 60%, var(--teal-ink)); }
.hx-together__body h3 { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.12; margin: .5rem 0 .7rem; color: var(--teal-deep); }
.hx-together__body p { color: var(--muted); line-height: 1.65; margin: 0 0 1.4rem; }
.hx-together__link { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-label);
  font-weight: 600; font-size: .9rem; color: color-mix(in srgb, var(--c) 60%, var(--teal-ink)); }
.hx-together__link .arr { transition: transform .35s var(--ease); }
.hx-together__link:hover .arr { transform: translateX(4px); }

/* ===================================================================
   MEET TULI - playful upgrades: roaming bee + butterfly, speech bubble,
   floating berries, sticker confetti. All motion auto-disables under
   prefers-reduced-motion via the global reset above.
   =================================================================== */

/* roaming creatures that drift around their anchor as you scroll */
.tuli-creature { position: absolute; z-index: 6; pointer-events: none; width: clamp(58px, 8vw, 104px); aspect-ratio: 1; will-change: transform; }
.tuli-creature svg, .tuli-creature canvas { width: 100% !important; height: 100% !important; }
.tuli-creature--bee  { animation: tuliBee 13s ease-in-out infinite; }
.tuli-creature--bee2 { animation: tuliBee 16s ease-in-out infinite reverse; }
.tuli-creature--fly  { animation: tuliFlutter 17s ease-in-out infinite; }
.tuli-creature--fly2 { animation: tuliFlutter 15s ease-in-out infinite; }
@keyframes tuliBee {
  0%   { transform: translate(0,0) rotate(-4deg); }
  25%  { transform: translate(46px,-34px) rotate(8deg); }
  50%  { transform: translate(92px,6px) rotate(-5deg); }
  75%  { transform: translate(40px,42px) rotate(7deg); }
  100% { transform: translate(0,0) rotate(-4deg); }
}
@keyframes tuliFlutter {
  0%   { transform: translate(0,0) rotate(0); }
  20%  { transform: translate(-34px,-26px) rotate(-8deg); }
  45%  { transform: translate(-60px,18px) rotate(6deg); }
  70%  { transform: translate(-26px,44px) rotate(-5deg); }
  100% { transform: translate(0,0) rotate(0); }
}
@media (max-width: 720px){ .tuli-creature { width: 56px; } .tuli-creature--hide-mobile { display: none; } }

/* floating berry accents sprinkled through the page */
.tuli-berry { position: absolute; z-index: 1; pointer-events: none; width: clamp(40px, 6vw, 76px);
  opacity: .92; filter: drop-shadow(0 12px 20px rgba(20,32,31,.18)); }
.tuli-berry.fb-a { animation: tuliBerryA 9s ease-in-out infinite; }
.tuli-berry.fb-b { animation: tuliBerryB 11s ease-in-out infinite; }
@keyframes tuliBerryA { 0%,100%{ transform: translateY(0) rotate(-6deg); } 50%{ transform: translateY(-22px) rotate(8deg); } }
@keyframes tuliBerryB { 0%,100%{ transform: translateY(0) rotate(6deg); } 50%{ transform: translateY(20px) rotate(-7deg); } }
@media (max-width: 720px){ .tuli-berry { display: none; } }

/* Tuli speech bubble in the hero */
.tuli-bubble { position: absolute; z-index: 5; top: 6%; left: 0;
  background: #fff; color: var(--teal-deep); font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.95rem, 1.4vw, 1.18rem); padding: .7em 1.1em; border-radius: 20px 20px 20px 4px;
  box-shadow: var(--sh-1); animation: bubblePop .6s var(--spring) .5s both; }
.tuli-bubble b { color: var(--teal); }
@keyframes bubblePop { from { opacity: 0; transform: scale(.6) translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px){ .tuli-bubble { position: static; display: inline-block; margin: 0 auto 1.2rem; } }

/* confetti burst on completing the sticker set */
.tuli-confetti { position: fixed; inset: 0; z-index: 240; pointer-events: none; overflow: hidden; }
.tuli-confetti i { position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px;
  will-change: transform, opacity; animation: confettiFall var(--dur, 3s) linear var(--delay, 0s) forwards; }
@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0); opacity: 1; }
  100% { transform: translateY(106vh) rotate(720deg); opacity: .85; }
}

/* ===================================================================
   PROCESS STEPS (Careers "how to apply") - reusable numbered cards
   =================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.8rem); margin-top: clamp(2rem, 5vw, 3.2rem); }
@media (max-width: 760px){ .steps { grid-template-columns: 1fr; } }
.step { position: relative; overflow: hidden; background: var(--surface); border: 1px solid color-mix(in srgb, var(--c, var(--teal)) 16%, var(--line));
  border-radius: var(--r-lg); padding: clamp(1.7rem, 2.6vw, 2.3rem); transition: transform .45s var(--spring), box-shadow .4s, border-color .4s; }
.step:hover { transform: translateY(-6px); box-shadow: 0 24px 50px color-mix(in srgb, var(--c, var(--teal)) 14%, rgba(20,32,31,.1)); border-color: color-mix(in srgb, var(--c, var(--teal)) 30%, var(--line)); }
.step__no { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  color: #fff; background: color-mix(in srgb, var(--c, var(--teal)) 84%, var(--teal-ink)); box-shadow: 0 10px 22px color-mix(in srgb, var(--c, var(--teal)) 36%, transparent); margin-bottom: 1.1rem; }
.step h3 { font-size: 1.2rem; color: var(--teal-deep); }
.step p { margin-top: .5rem; color: var(--muted); font-size: .96rem; }

/* Careers - give the perk cards brand energy (accent bar + varied icon colours) */
[data-page="careers"] .value { position: relative; overflow: hidden; }
[data-page="careers"] .value::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--teal); }
[data-page="careers"] .value:nth-child(2)::before { background: var(--honey); }
[data-page="careers"] .value:nth-child(3)::before { background: var(--teal-deep); }

/* ===================================================================
   DARK .story bands blend into adjacent light sections via wave seams
   (About "People & Community", Sustainability "People band")
   =================================================================== */
.story .hx-wave { z-index: 1; }
.story .hx-wave svg path { fill: var(--bg); }
/* when the dark .story band follows the .pledge gradient (sustainability page),
   the gradient ends in --bg-2, so the draped wave must match that tone, not white */
.pledge + .story .hx-wave svg path { fill: var(--bg-2); }
.story > .wrap { position: relative; z-index: 2; }

/* ===================================================================
   OUR BERRIES - product-forward split hero (distinct from other
   interior heroes so the page reads as a product page, not a template)
   =================================================================== */
.phero--product__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px){ .phero--product__grid { grid-template-columns: 1fr; } }
.phero--product .stats { grid-template-columns: repeat(2, 1fr); max-width: 430px; gap: .5rem clamp(1.2rem, 3vw, 2rem);
  margin-top: clamp(1.4rem, 3vw, 2rem); padding-top: 1.4rem; }
.phero--product .stat b { font-size: clamp(1.05rem, 1.7vw, 1.4rem); }
.phero--product .stat span { font-size: .64rem; margin-top: .25rem; letter-spacing: .09em; }
.phero--product__media { position: relative; display: grid; place-items: center; min-height: clamp(320px, 40vw, 480px); }
.phero--product__disc { position: absolute; inset: 0; margin: auto; width: min(96%, 440px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, var(--teal-tint), rgba(228,239,238,0) 70%); filter: blur(4px); animation: pulseDisc 6s ease-in-out infinite; }
/* photographic hero frame (replaces the old floating pack image) */
.phero--product__frame { position: relative; z-index: 2; width: min(94%, 420px); aspect-ratio: 4 / 5; border-radius: var(--r-xl);
  overflow: hidden; box-shadow: var(--sh-2); }
.phero--product__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  transform: scale(1.22); transform-origin: 50% 40%; }
.phero--product__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(15,32,31,.45)); }
.phero--product__chip { position: absolute; left: 16px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: .55em;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-radius: var(--r-pill); padding: .6em 1.05em;
  font-family: var(--font-label); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-deep); box-shadow: var(--sh-1); }
.phero--product__chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--honey); animation: pulse 2.2s infinite; }
.phero--product__berry { position: absolute; z-index: 4; width: clamp(46px, 6vw, 82px); pointer-events: none; filter: drop-shadow(0 14px 22px rgba(20,32,31,.2)); }
.phero--product__berry.pb-1 { top: 4%; right: 5%; animation: floatA 9s ease-in-out infinite; }
.phero--product__berry.pb-2 { bottom: 5%; left: 3%; animation: floatB 11s ease-in-out infinite; }
@media (max-width: 900px){ .phero--product__media { min-height: 300px; margin-top: 1rem; } }
@media (max-width: 560px){ .phero--product__berry { display: none; } }

/* ---------- OUR RANGE section removed (no product range block on this page) */

/* Flavour-profile band image - landscape crop so it isn't a tall portrait */
.band__media--wide img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 42%; }
@media (max-width: 880px){ .band__media--wide img { aspect-ratio: 16 / 10; } }

/* anonymous complaint (Get in Touch) - discreet, trustworthy card */
.anon-band { background: var(--surface); padding-top: clamp(40px, 6vw, 70px); }
.anon { max-width: 820px; margin-inline: auto; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: clamp(1.6rem, 3.5vw, 2.6rem); }
.anon__head { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.6rem; }
.anon__ic { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--teal); color: #fff; }
.anon__head p { margin-top: .5rem; color: var(--muted); font-size: .98rem; }
.anon__fields .field { margin-top: 1.1rem; }
.anon__fields .btn { margin-top: 1.4rem; }
.anon__form.sent .anon__fields { display: none; }
.anon__form .form__success { display: none; }
.anon__form.sent .form__success { display: block; }

/* full-team group photo band (Our Team) */
.team-group-band { padding-top: 0; padding-bottom: 0; }
.team-group { margin: 0; }
.team-group img { width: 100%; aspect-ratio: 21 / 10; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.team-group figcaption { margin-top: .9rem; text-align: center; color: var(--muted); font-size: .95rem; }
@media (max-width: 720px){ .team-group img { aspect-ratio: 16 / 11; } }

/* three-image collage inside a band media slot (About - Our approach) */
.media-collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: clamp(.7rem, 1.4vw, 1.1rem); }
.media-collage img { margin: 0; height: 100%; object-fit: cover; }
.media-collage__main { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.media-collage__a, .media-collage__b { aspect-ratio: 1 / 1; }

/* ==========================================================================
   MEET TULI - PLAYFUL ENHANCEMENTS  ([data-page="meet-tuli"])
   Scoped to mt- classes + the page selector so other pages stay untouched.
   ========================================================================== */

/* ---- reliable wavy section seams (static SVG fill, renders everywhere) --- */
.mt-seam { position: absolute; top: 1px; left: 0; width: 100%; z-index: 3; line-height: 0; pointer-events: none; transform: translateY(-100%); }
.mt-seam svg { display: block; width: 100%; height: clamp(46px, 6vw, 88px); }
/* collect must not clip its upward seam */
[data-page="meet-tuli"] .hx-collect { overflow: visible; }

/* ---- HERO: soft animated scene ------------------------------------------- */
[data-page="meet-tuli"] .tuli-hero { isolation: isolate; background-size: 100% 200%; animation: mtSky 18s ease-in-out infinite alternate; }
@keyframes mtSky { from { background-position: 50% 0%; } to { background-position: 50% 100%; } }

/* drifting clouds (the only ambient motion in the hero now) */
.mt-clouds { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.mt-cloud { position: absolute; border-radius: 100px; background: rgba(255,255,255,.7); filter: blur(6px);
  box-shadow: 40px 8px 0 -2px rgba(255,255,255,.6), -36px 10px 0 -4px rgba(255,255,255,.55); }
.mt-cloud.c1 { width: 150px; height: 42px; top: 16%; left: -20%; animation: mtCloud 46s linear infinite; }
.mt-cloud.c2 { width: 110px; height: 32px; top: 30%; left: -25%; opacity: .8; animation: mtCloud 62s linear infinite 6s; }
.mt-cloud.c3 { width: 190px; height: 50px; top: 9%;  left: -30%; opacity: .6; animation: mtCloud 74s linear infinite 3s; }
@keyframes mtCloud { from { transform: translateX(0); } to { transform: translateX(135vw); } }

[data-page="meet-tuli"] .tuli-hero__grid { position: relative; z-index: 3; }
.tuli-hero__copy { position: relative; z-index: 3; }

/* headline word pop-in */
.tuli-hero__title { display: flex; flex-wrap: wrap; gap: .25em; }
@media (max-width: 900px){ .tuli-hero__title { justify-content: center; } }
.mt-word { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(-6deg) scale(.8);
  animation: mtWordPop .9s var(--spring) forwards; }
.mt-word.em { color: var(--teal); }
.mt-word:nth-child(1) { animation-delay: .15s; }
.mt-word:nth-child(2) { animation-delay: .32s; }
@keyframes mtWordPop { 0%{opacity:0; transform:translateY(.6em) rotate(-6deg) scale(.8);} 70%{opacity:1; transform:translateY(-.06em) rotate(2deg) scale(1.04);} 100%{opacity:1; transform:none;} }

/* hero stat chips */
.mt-hero__stats { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; padding: 0; }
@media (max-width: 900px){ .mt-hero__stats { justify-content: center; } }
.mt-hero__stats li { font-family: var(--font-label); font-weight: 600; font-size: .78rem; letter-spacing: .02em;
  color: var(--teal-deep); background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9);
  padding: .5em .95em; border-radius: var(--r-pill); box-shadow: var(--sh-pill); backdrop-filter: blur(6px); }
.mt-hero__stats b { font-family: var(--font-display); font-size: 1.05rem; color: var(--teal); margin-right: .35em; }

/* ---- HERO ART: mascot, bubble, sparks ----------------------------------- */
/* pop lives on the button wrapper; the inner image keeps its base bob and
   gets a wiggle on hover (separate element = no animation-fill conflicts). */
.mt-mascot { display: block; position: relative; z-index: 3; width: min(100%, 420px); padding: 0; background: none; border: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent; opacity: 0; animation: mtMascotPop 1s var(--spring) .25s both; }
@keyframes mtMascotPop { 0%{opacity:0; transform:scale(0) rotate(-24deg);} 70%{opacity:1; transform:scale(1.08) rotate(4deg);} 100%{opacity:1; transform:scale(1) rotate(0);} }
.tuli-hero__art .mt-mascot:hover .tuli-img { animation: mtWiggle .7s ease-in-out; }
@keyframes mtWiggle { 0%,100%{transform:rotate(-3deg) scale(1.05);} 25%{transform:rotate(5deg) scale(1.06);} 50%{transform:rotate(-4deg) scale(1.06);} 75%{transform:rotate(4deg) scale(1.05);} }

/* a few gentle sparkles around Tuli (spawned by JS) */
.mt-sparks { position: absolute; inset: -8%; z-index: 4; pointer-events: none; }
.mt-spark { position: absolute; width: var(--s, 12px); height: var(--s, 12px); border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,.85) 30%, transparent 70%);
  opacity: 0; transform: scale(0); animation: mtSpark var(--dur, 2.4s) ease-in-out var(--delay, 0s) infinite; }
.mt-spark::before { content: ""; position: absolute; inset: 0; background: inherit; transform: rotate(45deg); }
@keyframes mtSpark { 0%,100%{opacity:0; transform:scale(0) rotate(0deg);} 50%{opacity:1; transform:scale(1) rotate(160deg);} }

/* speech bubble - centered above Tuli, tail pointing down at her */
[data-page="meet-tuli"] .tuli-bubble { position: absolute; top: -4%; left: 0; right: 0; margin-inline: auto; z-index: 6; max-width: 240px; text-align: center;
  background: #fff; color: var(--teal-ink); border-radius: 18px;
  padding: .8rem 1.05rem; box-shadow: 0 18px 36px rgba(28,50,51,.18);
  animation: mtBubblePop .7s var(--spring) .6s both; }
[data-page="meet-tuli"] .tuli-bubble::after { content: ""; position: absolute; left: 50%; margin-left: -11px; bottom: -9px; width: 22px; height: 14px;
  background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.tuli-bubble__hi { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.2; }
.tuli-bubble__hi b { color: var(--teal); }
.tuli-bubble__line { display: block; margin-top: .25rem; font-size: .86rem; color: var(--muted); line-height: 1.4; transition: opacity .3s; }
.mt-wave-hand { display: inline-block; transform-origin: 70% 70%; animation: mtWaveHand 2.6s ease-in-out infinite; }
@keyframes mtBubblePop { 0%{opacity:0; transform:scale(.5) translateY(10px);} 70%{opacity:1; transform:scale(1.06);} 100%{opacity:1; transform:none;} }
@keyframes mtWaveHand { 0%,60%,100%{transform:rotate(0);} 70%{transform:rotate(16deg);} 80%{transform:rotate(-8deg);} 90%{transform:rotate(14deg);} }
@media (max-width: 900px){ [data-page="meet-tuli"] .tuli-bubble { position: static; margin: 1.2rem auto 0; max-width: 320px; animation-delay: .4s; } [data-page="meet-tuli"] .tuli-bubble::after { display: none; } }

/* play-my-intro button under the mascot */
.mt-play-intro { position: relative; z-index: 5; display: inline-flex; align-items: center; gap: .6em; margin-top: 1.4rem; cursor: pointer;
  padding: .7em 1.3em .7em .7em; border-radius: var(--r-pill); background: #fff; color: var(--teal-deep);
  font-family: var(--font-label); font-weight: 600; font-size: .9rem; box-shadow: var(--sh-1);
  transition: transform .4s var(--spring), box-shadow .3s, color .3s; }
.mt-play-intro__ic { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--teal); color: #fff;
  display: grid; place-items: center; box-shadow: 0 6px 16px rgba(255,107,171,.45); animation: mtPulseRing 2.4s ease-out infinite; }
.mt-play-intro:hover { transform: translateY(-3px); color: var(--teal); box-shadow: var(--sh-2); }
@keyframes mtPulseRing { 0%{box-shadow:0 6px 16px rgba(255,107,171,.45), 0 0 0 0 rgba(255,107,171,.45);} 70%{box-shadow:0 6px 16px rgba(255,107,171,.45), 0 0 0 14px rgba(255,107,171,0);} 100%{box-shadow:0 6px 16px rgba(255,107,171,.45), 0 0 0 0 rgba(255,107,171,0);} }
@media (max-width: 900px){ .mt-play-intro { margin-inline: auto; } }

/* ----- Tuli's hero on small screens --------------------------------------
   At 375px the mascot was rendering ~350x780 and pushing the hero past two
   full screens. With the aspect ratio restored she is 335x534; capping the
   width brings the whole hero back inside roughly one and a bit screens. */
@media (max-width: 900px){
  .tuli-hero__art { min-height: 0; margin-top: .5rem; }
  .tuli-hero__art .mt-mascot,
  .tuli-hero__art .tuli-img { width: min(58vw, 300px); }
  [data-page="meet-tuli"] .tuli-bubble { max-width: min(72vw, 240px); }
}
@media (max-width: 900px){
  /* Trim the hero's top padding a little, but keep well clear of the fixed
     header - 118px still leaves ~50px under it on a 375px screen. */
  .tuli-hero { padding-top: clamp(118px, 26vw, 150px); }
  .mt-hero__stats { margin-top: 1.2rem; }
}

/* ---- ROAMING CREATURES (bee + butterfly physics layer) ------------------- */
.tuli-creatures-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.tuli-creatures-layer .creature { position: absolute; }

/* ---- EPISODES: 2 x 2 adventure / journey -------------------------------- */
/* map-paper background: faint dot grid over a sky-to-meadow wash */
[data-page="meet-tuli"] .mt-adventure {
  background:
    radial-gradient(circle, rgba(52,91,92,.05) 1.5px, transparent 1.7px) 0 0 / 26px 26px,
    linear-gradient(180deg, #e6f4f8 0%, #eef6ee 55%, #f4f9f1 100%);
}
/* journey wrapper holds the scroll-reactive winding road behind the stops */
.ep-journey { position: relative; max-width: 900px; margin-inline: auto; }
.ep-trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.ep-trail__marker { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px; border-radius: 50%; opacity: 0;
  background: var(--teal); box-shadow: 0 0 0 5px color-mix(in srgb, var(--teal) 24%, transparent), 0 6px 12px rgba(20,32,31,.3);
  pointer-events: none; transition: left .12s linear, top .12s linear, opacity .3s; }
.ep-trail__marker.is-on { opacity: 1; }
@media (max-width: 760px){ .ep-trail, .ep-trail__marker { display: none; } }

/* episodes are STOPS alternating down the winding road (flex column) */
[data-page="meet-tuli"] .ep-grid { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(2rem, 5vw, 3.6rem); max-width: none; margin: 0; }
[data-page="meet-tuli"] .ep { width: min(52%, 400px); background: var(--surface); --ec: var(--teal); will-change: transform; backface-visibility: hidden;
  transition: transform .5s var(--ease), box-shadow .45s var(--ease); }
/* odd = left stop (faces right toward road); even = right stop (faces left) */
[data-page="meet-tuli"] .ep:nth-child(odd) { align-self: flex-start; transform: perspective(1100px) rotateX(5deg) rotateY(7deg);
  box-shadow: -14px 22px 38px -16px rgba(20,32,31,.32); }
[data-page="meet-tuli"] .ep:nth-child(even) { align-self: flex-end; transform: perspective(1100px) rotateX(5deg) rotateY(-7deg);
  box-shadow: 14px 22px 38px -16px rgba(20,32,31,.32); }
[data-page="meet-tuli"] .ep:hover {
  z-index: 3;
  transform: perspective(1100px) rotateX(0deg) rotateY(0deg) translateY(-10px);
  box-shadow: 0 34px 60px color-mix(in srgb, var(--ec) 30%, rgba(20,32,31,.2)), 0 0 0 2px color-mix(in srgb, var(--ec) 40%, transparent); }
[data-page="meet-tuli"] .ep__media { aspect-ratio: 16 / 9; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; }
[data-page="meet-tuli"] .ep__media img { transition: transform .7s var(--ease); }
[data-page="meet-tuli"] .ep:hover .ep__media img { transform: scale(1.05); }

/* stack full-width + flat on small screens; hide the road */
@media (max-width: 760px){
  [data-page="meet-tuli"] .ep-grid { gap: 1.6rem; }
  [data-page="meet-tuli"] .ep, [data-page="meet-tuli"] .ep:nth-child(odd), [data-page="meet-tuli"] .ep:nth-child(even) {
    width: 100%; align-self: stretch; transform: none; box-shadow: 0 14px 30px rgba(20,32,31,.12); }
  [data-page="meet-tuli"] .ep:hover { transform: translateY(-8px); }
}

/* play button + waypoint pin pick up the episode accent colour */
[data-page="meet-tuli"] .ep__play { z-index: 4; }
[data-page="meet-tuli"] .ep__play .pbtn { width: 70px; height: 70px; color: var(--ec, var(--teal)); box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.ep__pin { position: absolute; top: 12px; left: 12px; z-index: 5; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: #fff;
  background: var(--ec, var(--honey)); box-shadow: 0 8px 16px color-mix(in srgb, var(--ec) 50%, transparent), 0 0 0 4px rgba(255,255,255,.92); }
[data-page="meet-tuli"] .ep:hover .ep__pin { transform: scale(1.08) rotate(-6deg); transition: transform .4s var(--spring); }

/* "Watch now" chip slides up on hover */
.ep__watch { position: absolute; left: 12px; bottom: 12px; z-index: 4; display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-label); font-weight: 700; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: #fff;
  background: var(--ec, var(--teal)); padding: .42em .8em; border-radius: var(--r-pill); box-shadow: 0 8px 18px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s var(--spring); }
[data-page="meet-tuli"] .ep:hover .ep__watch, [data-page="meet-tuli"] .ep:focus-visible .ep__watch { opacity: 1; transform: none; }

.ep__dur { position: absolute; right: 12px; bottom: 12px; z-index: 4; font-family: var(--font-label);
  font-size: .68rem; font-weight: 600; letter-spacing: .04em; color: #fff; background: rgba(15,32,31,.72);
  padding: .32em .62em; border-radius: var(--r-pill); backdrop-filter: blur(4px); }
[data-page="meet-tuli"] .ep__body { padding: 1.2rem 1.4rem 1.5rem; }
[data-page="meet-tuli"] .ep__body h3 { font-size: 1.32rem; }
[data-page="meet-tuli"] .ep__body p { font-size: .96rem; }
[data-page="meet-tuli"] .ep__meta { color: color-mix(in srgb, var(--ec) 65%, var(--teal-deep)); }

/* ---- SHINE SWEEP on episode + booklet media ------------------------------ */
.ep__media, .book__media { position: relative; }
.mt-shine { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; border-radius: inherit; }
.mt-shine::after { content: ""; position: absolute; top: -60%; left: -40%; width: 45%; height: 220%; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); transition: left .7s var(--ease); }
.ep:hover .mt-shine::after, .ep:focus-visible .mt-shine::after, .book:hover .mt-shine::after { left: 130%; }

/* ---- BOOKLETS: real booklet feel (spine + page stack + 3D open) --------- */
[data-page="meet-tuli"] .book { border: 0; background: transparent; box-shadow: none; overflow: visible; perspective: 1200px; }
[data-page="meet-tuli"] .book:hover { transform: none; box-shadow: none; }
/* Match the cover artwork exactly (640x925). A 3/4 slot with object-fit:
   cover crops ~7.7% of the height, which sliced through the "Namibia
   Berries" logo at the foot of every cover, EN and DE alike. */
[data-page="meet-tuli"] .book__media { aspect-ratio: 640 / 925; border-radius: 4px 10px 10px 4px; overflow: hidden; position: relative;
  transform-origin: left center; transition: transform .6s var(--spring), box-shadow .45s var(--ease);
  box-shadow: 0 16px 32px rgba(20,32,31,.2), 3px 0 0 #efe7d9, 6px 0 0 #e7ddc9, 9px 0 0 #ded2bb, 12px 3px 16px rgba(20,32,31,.14); }
[data-page="meet-tuli"] .book:hover .book__media { transform: rotateY(-16deg) translateY(-6px);
  box-shadow: 0 28px 54px rgba(20,32,31,.3), 3px 0 0 #efe7d9, 6px 0 0 #e7ddc9, 9px 0 0 #ded2bb, 20px 10px 30px rgba(20,32,31,.22); }
/* book spine down the left edge of the cover */
[data-page="meet-tuli"] .book__media::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 15px; z-index: 5;
  background: linear-gradient(90deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.1) 42%, rgba(255,255,255,.28) 70%, rgba(0,0,0,.06) 100%); }
[data-page="meet-tuli"] .book__body { padding: 1.05rem .15rem 0; background: transparent; }
[data-page="meet-tuli"] .book__dl { margin-top: .7rem; align-self: flex-start; padding: .55em 1em; border-radius: var(--r-pill);
  background: var(--teal-tint); color: var(--teal-deep); transition: background .3s, color .3s, transform .4s var(--spring); }
[data-page="meet-tuli"] .book:hover .book__dl { background: var(--teal); color: #fff; transform: translateY(-2px); }

/* ---- COLLECT actions + reset --------------------------------------------- */
.mt-collect__actions { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; }
.mt-reset { font-family: var(--font-label); font-weight: 600; font-size: .82rem; letter-spacing: .04em; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; transition: color .3s; }
.mt-reset:hover { color: var(--teal); }
/* tiny celebratory bounce when a sticker is collected (keeps its --r tilt) */
.hx-sticker.is-got { animation: hxPop .55s var(--spring), mtGotBob 2.6s ease-in-out .55s infinite; }
@keyframes mtGotBob { 0%,100%{ transform: rotate(var(--r,0deg)) translateY(0); } 50%{ transform: rotate(var(--r,0deg)) translateY(-5px); } }

/* ---- RARE GOLDEN STICKER (plays the golden sticker video) ---------------- */
.mt-golden { position: relative; overflow: hidden; margin: clamp(2.6rem, 5vw, 3.6rem) auto 0; max-width: 760px; text-align: left;
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3vw, 2.2rem); align-items: center;
  padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--r-lg);
  background: linear-gradient(135deg, #fff7e6 0%, #ffeac2 45%, #ffe7d4 100%);
  border: 1px solid rgba(207,138,63,.3); box-shadow: 0 22px 50px rgba(207,138,63,.2); }
@media (max-width: 620px){ .mt-golden { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.mt-golden__sweep { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mt-golden__sweep::after { content: ""; position: absolute; top: -50%; left: -30%; width: 26%; height: 200%; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: mtGoldSweep 6s ease-in-out infinite; }
@keyframes mtGoldSweep { 0%,18%{ left: -30%; } 50%,100%{ left: 130%; } }
.mt-golden__badge { position: relative; z-index: 1; width: clamp(116px, 18vw, 152px); aspect-ratio: 1; border: 0; background: none;
  cursor: pointer; display: grid; place-items: center; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.mt-golden__ring { position: absolute; inset: -7%; border-radius: 50%; z-index: 0; opacity: .95; filter: blur(1px);
  background: conic-gradient(from 0deg, #f6c34a, #fff3cf, #e0a23b, #ffe69a, #f6c34a); animation: mtSpin 14s linear infinite; }
@keyframes mtSpin { to { transform: rotate(360deg); } }
.mt-golden__badge img { position: relative; z-index: 1; width: 78%; height: auto; filter: drop-shadow(0 10px 18px rgba(170,115,30,.4));
  transition: transform .5s var(--spring); }
.mt-golden__badge:hover img { transform: scale(1.06) rotate(-3deg); }
.mt-golden__play { position: absolute; z-index: 2; right: 4%; bottom: 6%; width: 40px; height: 40px; border-radius: 50%;
  background: var(--teal-deep); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 18px rgba(15,32,31,.3); }
.mt-golden__copy { position: relative; z-index: 1; }
.mt-golden__kicker { font-family: var(--font-label); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #b9772a; }
.mt-golden__copy h3 { margin-top: .4rem; font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--teal-ink); }
.mt-golden__copy p { margin-top: .5rem; color: #6a5230; font-size: .98rem; }

/* ---- motion / mobile guards ---------------------------------------------- */
@media (max-width: 760px){
  .mt-cloud.c2 { display: none; }
  .tuli-creatures-layer { display: none; }
}
@media (prefers-reduced-motion: reduce){
  [data-page="meet-tuli"] .tuli-hero { animation: none; }
  .mt-clouds, .mt-sparks { display: none; }
  .mt-word, .mt-mascot { opacity: 1 !important; transform: none !important; }
  [data-page="meet-tuli"] .tuli-bubble { animation: none; }
  .mt-wave-hand, .mt-play-intro__ic, .mt-golden__ring, .mt-golden__sweep::after { animation: none; }
  .hx-sticker.is-got { animation: none; }
  [data-page="meet-tuli"] .ep:nth-child(odd), [data-page="meet-tuli"] .ep:nth-child(even) { transform: none; }
  .tuli-creatures-layer { display: none; }
}


/* ===================================================================
   FORM SUCCESS (shared - Contact + Careers)
   =================================================================== */
.form__success strong { display: block; font-family: var(--font-display); font-size: 1.2rem; margin-bottom: .3rem; }

/* ===================================================================
   CAREERS - warm "sun & growth" identity. Shares Contact's layout but
   keeps its own personality: a deeper night-teal info panel with warm
   gold accents, vs Contact's brighter, cooler teal. Scoped to the page.
   =================================================================== */
/* hero: soft honey highlight behind the accent word (text stays teal) */
[data-page="careers"] .phero h1 .em { position: relative; }

/* info panel: deeper, moodier gradient + a larger warm gold glow */
[data-page="careers"] .contact-aside { background: linear-gradient(165deg, var(--blueberry) 0%, var(--teal-ink) 100%); }
[data-page="careers"] .contact-aside__glow { width: 78%; top: -24%; right: -20%; background: radial-gradient(circle, rgba(207,138,63,.6), transparent 70%); }
[data-page="careers"] .contact-method__t { color: var(--honey-soft); }

/* form: warm focus ring to match the gold CTA */
[data-page="careers"] .field input:focus,
[data-page="careers"] .field textarea:focus,
[data-page="careers"] .field select:focus { border-color: var(--honey); box-shadow: 0 0 0 4px rgba(207,138,63,.16); }

/* ==========================================================================
   LANGUAGE - EN / DE switch in the header + first-visit picker
   ========================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ----- header switch ----------------------------------------------------- */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: var(--r-pill);
  background: rgba(52, 91, 92, .08);
  border: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
  flex: 0 0 auto;
}
.site-header.scrolled .lang-switch { background: rgba(52, 91, 92, .10); }
.lang-switch__btn {
  position: relative;
  font-family: var(--font-label); font-weight: 600; font-size: .74rem; letter-spacing: .06em;
  line-height: 1; color: var(--muted);
  padding: .62em .78em; border-radius: var(--r-pill);
  transition: background .28s var(--ease), color .28s var(--ease), transform .28s var(--spring);
  min-height: 30px; display: inline-flex; align-items: center; justify-content: center;
}
.lang-switch__btn:hover { color: var(--teal-ink); }
.lang-switch__btn.is-on {
  background: var(--surface); color: var(--teal);
  box-shadow: 0 1px 2px rgba(20, 32, 31, .10), 0 4px 10px rgba(20, 32, 31, .07);
}
.lang-switch__sep { width: 1px; height: 14px; background: rgba(52, 91, 92, .18); }

/* inside the dark mobile panel the switch has to invert */
.lang-switch--mnav { background: rgba(255,255,255,.12); align-self: flex-start; }
.lang-switch--mnav .lang-switch__btn { color: rgba(255,255,255,.72); }
.lang-switch--mnav .lang-switch__btn:hover { color: #fff; }
.lang-switch--mnav .lang-switch__btn.is-on { background: #fff; color: var(--teal-deep); box-shadow: none; }
.lang-switch--mnav .lang-switch__sep { background: rgba(255,255,255,.28); }

@media (max-width: 900px) {
  /* keep the switch in the top bar (the links move into the overlay) and put
     it before the hamburger */
  .lang-switch { order: -1; margin-right: .35rem; }
  .lang-switch__btn { font-size: .8rem; padding: .62em .85em; min-height: 40px; min-width: 44px; }
  .lang-switch__sep { height: 16px; }
  /* above the fullscreen nav panel so it stays usable while the menu is open */
  .lang-switch { position: relative; z-index: 3; }
  .nav-open .lang-switch { background: rgba(52, 91, 92, .10); }
}

/* ----- first-visit picker ------------------------------------------------ */
html.lang-gate-open, html.lang-gate-open body { overflow: hidden; }

.lang-gate {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(18px, 5vw, 40px);
  background: linear-gradient(165deg, rgba(20, 48, 46, .93) 0%, rgba(15, 32, 31, .96) 100%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: langGateIn .45s var(--ease) both;
  overscroll-behavior: contain;
}
.lang-gate.is-closing { animation: langGateOut .3s var(--ease) both; }
@keyframes langGateIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes langGateOut { from { opacity: 1; } to { opacity: 0; } }

.lang-gate__card {
  width: min(560px, 100%);
  max-height: calc(100dvh - 2 * clamp(18px, 5vw, 40px));
  overflow-y: auto;
  background: var(--bg);
  border-radius: var(--r-lg);
  padding: clamp(28px, 6vw, 46px) clamp(22px, 5vw, 46px);
  text-align: center;
  box-shadow: 0 40px 90px rgba(9, 24, 23, .45);
  animation: langCardIn .5s var(--spring) .06s both;
}
@keyframes langCardIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.lang-gate__logo { height: clamp(30px, 7vw, 40px); width: auto; margin: 0 auto; }
.lang-gate__kicker {
  font-family: var(--font-label); font-weight: 600; font-size: .66rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--teal);
  margin-top: .95rem;
}
.lang-gate__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.45rem, 5.2vw, 1.95rem); line-height: 1.12;
  letter-spacing: -.02em; color: var(--ink);
  margin-top: .5rem;
}
.lang-gate__title span {
  display: block; font-size: .78em; color: var(--muted); font-weight: 500; margin-top: .18em;
}

.lang-gate__opts {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2.4vw, 16px);
  margin-top: clamp(1.4rem, 4vw, 2rem);
}
.lang-gate__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  padding: clamp(1rem, 3.4vw, 1.35rem) .75rem;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--bg-2);
  transition: transform .32s var(--spring), border-color .28s, background .28s, box-shadow .28s;
  min-height: 92px;
}
.lang-gate__btn:hover, .lang-gate__btn:focus-visible {
  transform: translateY(-3px);
  border-color: var(--teal);
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(20, 32, 31, .12);
}
.lang-gate__btn.is-suggested { border-color: var(--teal); background: var(--surface); }
.lang-gate__code {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 5.5vw, 1.9rem); line-height: 1; color: var(--teal);
  letter-spacing: -.01em;
}
.lang-gate__name {
  font-family: var(--font-label); font-weight: 600; font-size: .82rem;
  letter-spacing: .04em; color: var(--muted);
}
.lang-gate__note {
  margin-top: clamp(1.1rem, 3vw, 1.5rem);
  font-size: .78rem; line-height: 1.55; color: var(--muted);
}

@media (max-width: 380px) {
  .lang-gate__opts { grid-template-columns: 1fr; }
  .lang-gate__btn { min-height: 74px; flex-direction: row; gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lang-gate, .lang-gate__card { animation: none; }
  .lang-gate__btn:hover, .lang-gate__btn:focus-visible { transform: none; }
}

/* ==========================================================================
   MOBILE POLISH - tap targets, legibility and menu completeness
   Audited at 360 / 390 / 768px. Nothing here changes the desktop design.
   ========================================================================== */

/* ----- tap targets ------------------------------------------------------
   Inline text links sat at ~20px tall, well under the 44px comfortable
   minimum. Padding is added inside the existing line box so the visual
   rhythm is unchanged, only the hit area grows. */
@media (max-width: 900px) {
  .footer li { margin-bottom: .15rem; }
  .footer li a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding-block: .35rem;
  }
  .footer__bot { line-height: 1.9; }

  /* mailto / tel links in the contact + careers panels */
  .contact-method { padding-block: 1.15rem; }
  .contact-method__v { min-height: 24px; }
  a[href^="mailto:"], a[href^="tel:"] {
    display: inline-block; padding-block: .4rem;
  }

  /* "Full story" disclosure on the media page */
  .pack-card__more { min-height: 44px; padding-block: .5rem; }

  /* social icon rows */
  .socials a { min-width: 44px; min-height: 44px; }
}

/* ----- legibility -------------------------------------------------------
   Uppercase, wide-tracked labels are the smallest type on the site. They
   were dipping to ~10px, which is below comfortable reading size on a
   phone. Nudged up on small screens only. */
@media (max-width: 900px) {
  .label { font-size: .8rem; letter-spacing: .18em; }
  .stat span { font-size: .8rem; }
  .team-card__num { font-size: .78rem; }
  .contact-method__t { font-size: .74rem; }
  .ig-scroll { font-size: .74rem; }
  .book__tag, .ep__meta { font-size: .78rem; }
  .footer a { font-size: 1rem; }
}

/* the EN / DE labels need to stay readable at a glance */
.lang-switch__btn { font-size: .78rem; }
@media (max-width: 900px) { .lang-switch__btn { font-size: .82rem; } }

/* ----- video modal on small screens --------------------------------------
   Give the player the full width it can get and keep the close button clear
   of the notch / status bar. */
@media (max-width: 700px) {
  .modal__inner { width: min(100%, 640px); }
  .modal__close {
    top: max(10px, env(safe-area-inset-top)); right: 10px;
    width: 44px; height: 44px; display: grid; place-items: center;
  }
}

/* ----- mobile legibility, pass 2 ----------------------------------------
   Measured, not guessed: these are the selectors that computed below 12.5px
   at 390px. Micro-labels stay small and tracked, just not squint-small.
   Desktop sizes are untouched. */
@media (max-width: 900px) {
  .sdg__tag              { font-size: .78rem; }
  .ig-item__tag          { font-size: .76rem; }
  .hx-scroll__txt        { font-size: .76rem; }
  .role                  { font-size: .8rem; }
  .commit-group__tag,
  .module__tag           { font-size: .78rem; }
  .hx-good__chip         { font-size: .78rem; }
  .ep__watch, .ep__dur   { font-size: .78rem; }
  .pack-tag              { font-size: .78rem; }
  .hx-together__kicker,
  .mt-golden__kicker     { font-size: .8rem; }
  .hx-hero__chip         { font-size: .8rem; }
  .contact-method__t     { font-size: .8rem; }
  .ig-scroll             { font-size: .78rem; }
  .hx-month              { font-size: .8rem; }
  .ig-count              { font-size: .8rem; }
  .team-card__more,
  .pack-card__more       { font-size: .84rem; }
  .footer h4             { font-size: .82rem; }
  figcaption             { font-size: .85rem; }
  .lang-gate__kicker     { font-size: .72rem; }
}

/* ----- remaining short tap targets --------------------------------------- */
@media (max-width: 900px) {
  .hx-together__link,
  .contact-method__v,
  .book__dl {
    display: inline-flex; align-items: center;
    min-height: 44px; padding-block: .35rem;
  }
  .btn { min-height: 46px; }
  .ig-chip, .frame-chip { min-height: 40px; display: inline-flex; align-items: center; }
  .brand { min-height: 44px; align-items: center; }
}

/* ----- mobile legibility, pass 3 -----------------------------------------
   The last stragglers. These needed matching specificity to win against the
   component rules that set them (e.g. .team-card .role beats a bare .role). */
@media (max-width: 900px) {
  .footer__bot, .footer__bot span   { font-size: .82rem; }
  .hx-story__fact span              { font-size: .8rem; }
  .team-card .role,
  .team-grid--lead .team-card .role { font-size: .8rem; }
  .member .role                     { font-size: .8rem; }
  .pillar b                         { font-size: .8rem; }
  .pledge-quote figcaption          { font-size: .82rem; }
  .people__badge span               { font-size: .78rem; }
  .phero--product .stat span,
  .stats .stat span                 { font-size: .78rem; }
  .hx-scroll__txt, .ig-item__tag    { font-size: .78rem; }
  .lang-gate__kicker                { font-size: .76rem; }
  .form__note a                     { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ==========================================================================
   OUR BERRIES - packaging-forward hero band + pack formats
   ========================================================================== */
/* full-bleed product band: the packaging runs broadly across the page,
   matching the visual impact of the homepage Okavango section */
.ob-band { position: relative; width: 100%; margin: 0; overflow: hidden; }
/* Sized by aspect ratio, not viewport height: a vh-driven height letterboxes
   hard on short windows and slices the tops off the tubes. 2:1 keeps ~79% of
   the frame visible at every window height. */
.ob-band img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1;
  max-height: 760px; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 700px){ .ob-band img { aspect-ratio: 3 / 2; } }
.ob-band::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,28,26,.08), transparent 18%, transparent 82%, rgba(10,28,26,.10)); }

/* the three routes to market - visually distinct, numbered, colour-coded */
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 1.8rem); margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 980px){ .pf-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.pf-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.5rem, 2.6vw, 2.1rem); overflow: hidden;
  box-shadow: var(--sh-1); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pf-card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.pf-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--c, var(--teal)); }
.pf-card__no { font-family: var(--font-label); font-weight: 700; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c, var(--teal)); }
.pf-card h3 { font-family: var(--font-display); font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin-top: .55rem; color: var(--ink); }
.pf-card__fmt { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.pf-card__fmt span { font-family: var(--font-label); font-weight: 600; font-size: .72rem; letter-spacing: .05em;
  color: var(--teal-ink); background: color-mix(in srgb, var(--c, var(--teal)) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--c, var(--teal)) 28%, #fff);
  padding: .42em .8em; border-radius: var(--r-pill); }
.pf-card p { margin-top: 1rem; color: var(--muted); font-size: .98rem; line-height: 1.6; }

/* ==========================================================================
   NAV - "Home" entry shown only inside the mobile menu panel
   ========================================================================== */