/* ==========================================================================
   FRUITPOPZ — main.css
   Kerala × tropical fruit × ice cream. Built with no frameworks.
   Sections: 01 tokens · 02 reset · 03 type · 04 buttons · 05 chrome
             06 hero · 07 ticker · 08 about · 09 products · 10 process
             11 story · 12 ingredients · 13 moment · 14 locations
             15 gallery · 16 social · 17 partner · 18 final · 19 footer
             20 utilities · 21 responsive · 22 reduced motion
   ========================================================================== */

/* ---------------------------------------------------------------- 01 TOKENS */
:root{
  /* palette */
  --mango:        #FFB627;
  --mango-deep:   #F08A0C;
  --mango-glow:   #FFD679;
  --cream:        #FFF6E5;
  --cream-2:      #FFEFD6;
  --coconut:      #FFFDF8;
  --mint:         #0FC9A1;
  --mint-dk:      #0AA184;
  --mint-soft:    #A8F0DE;
  --forest:       #06403A;
  --forest-deep:  #032B27;
  --melon:        #FF4D6D;
  --melon-soft:   #FF97AA;
  --passion:      #FF7A3C;
  --lime:         #9BD84B;
  --ink:          #14100E;
  --ink-60:       rgba(20,16,14,.60);
  --ink-40:       rgba(20,16,14,.40);
  --ink-15:       rgba(20,16,14,.15);
  --ink-08:       rgba(20,16,14,.08);
  --danger:       #C0193F;

  /* semantic */
  --bg:           var(--cream);
  --fg:           var(--ink);

  /* type */
  --f-display: 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --f-body:    'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-serif:   'Fraunces', Georgia, serif;

  --t-xxl: clamp(2.9rem, 8vw, 7.4rem);
  --t-xl:  clamp(2.5rem, 6vw, 5.6rem);
  --t-l:   clamp(2.1rem, 4.6vw, 4.4rem);
  --t-m:   clamp(1.6rem, 3vw, 2.6rem);
  --t-body:clamp(1rem, 1.06vw, 1.18rem);

  /* space */
  --wrap: 1400px;
  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --sec: clamp(5.5rem, 12vw, 11rem);

  /* motion */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,.05,.36,1);

  --shadow-soft: 0 30px 70px -30px rgba(20,16,14,.35);
  --shadow-lift: 0 44px 90px -34px rgba(20,16,14,.45);
}

/* Animation channels are deliberately separated so nothing fights for the
   same property: JS parallax owns `translate`, base art direction owns
   `transform`, and 3D tilt is passed down as custom properties. */
@property --s  { syntax:'<number>'; initial-value:1;    inherits:false; }
@property --rx { syntax:'<angle>';  initial-value:0deg; inherits:true; }
@property --ry { syntax:'<angle>';  initial-value:0deg; inherits:true; }

[data-parallax]{ translate:var(--px,0px) var(--py,0px); }
[data-tilt]{ perspective:1000px; }
[data-tilt] > *{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1));
  transform-style:preserve-3d;
}

/* ----------------------------------------------------------------- 02 RESET */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; }
/* [hidden] has to beat any display:* a component sets on itself */
[hidden]{ display:none !important; }
img,svg,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,figure,blockquote,ul{ margin:0; }
ul{ list-style:none; padding:0; }
address{ font-style:normal; }
::selection{ background:var(--mango); color:var(--ink); }
:focus-visible{ outline:3px solid var(--mint-dk); outline-offset:4px; border-radius:6px; }

.wrap{ width:min(100% - (var(--gut) * 2), var(--wrap)); margin-inline:auto; }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.skip{
  position:fixed; top:10px; left:10px; z-index:999; padding:.7rem 1.1rem;
  background:var(--ink); color:var(--coconut); border-radius:999px;
  transform:translateY(-160%); transition:transform .3s var(--e-out);
}
.skip:focus{ transform:none; }

/* film grain */
.grain{
  position:fixed; inset:-120px; z-index:9000; pointer-events:none; opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.32'/></svg>");
}

/* ------------------------------------------------------------------ 03 TYPE */
.display{
  font-family:var(--f-display);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.display--xxl{ font-size:var(--t-xxl); }
.display--xl { font-size:var(--t-xl); }
.display--l  { font-size:var(--t-l); }

.section-label{
  font-family:var(--f-body);
  font-size:.76rem; font-weight:800;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-40);
  margin-bottom:1.4rem;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.65rem;
  font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--forest);
  padding:.5rem .95rem .5rem .8rem;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(20,16,14,.08);
  border-radius:999px;
  backdrop-filter:blur(10px);
  margin-bottom:1.6rem;
}
.eyebrow__dot{
  width:8px; height:8px; border-radius:50%; background:var(--mint);
  box-shadow:0 0 0 0 rgba(15,201,161,.6);
  animation:ping 2.6s infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(15,201,161,.55); }
  70%{ box-shadow:0 0 0 12px rgba(15,201,161,0); }
  100%{ box-shadow:0 0 0 0 rgba(15,201,161,0); }
}
.lede{ font-size:clamp(1.12rem,1.5vw,1.42rem); line-height:1.5; font-weight:500; }
.ink-mango{
  background:linear-gradient(105deg,var(--mango-deep),var(--mango) 42%,var(--melon) 105%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* text split */
.split-line{ display:block; clip-path:polygon(-60% -35%, 160% -35%, 160% 100%, -60% 100%); }
.split-line > span{
  display:block;
  transform:translateY(105%) rotate(3deg);
  transition:transform 1s var(--e-out);
}
.is-in .split-line > span{ transform:none; }
.split-word{ display:inline-block; }
.split-char{
  display:inline-block;
  transform:translateY(88%) rotate(6deg);
  opacity:0;
  transition:transform .9s var(--e-out), opacity .5s linear;
}
.is-in .split-char{ transform:none; opacity:1; }


/* reveal */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--e-out), transform .9s var(--e-out);
}
[data-reveal].is-in{ opacity:1; transform:none; }
.no-js [data-reveal]{ opacity:1; transform:none; }
.no-js .split-line > span,.no-js .split-char{ transform:none; opacity:1; }

/* hold the hero intro until the loader has lifted */
.js body:not(.is-ready) .hero [data-reveal]{ opacity:0; transform:translateY(28px); }
.js body:not(.is-ready) .hero .split-char{ opacity:0; transform:translateY(88%) rotate(6deg); }

/* --------------------------------------------------------------- 04 BUTTONS */
.btn{
  --btn-bg:var(--ink); --btn-fg:var(--coconut);
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:1.05rem 1.85rem;
  font-weight:800; font-size:.86rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--btn-fg); background:var(--btn-bg);
  border-radius:999px; overflow:hidden; isolation:isolate;
  transition:color .35s var(--e-out), transform .5s var(--e-out), box-shadow .5s var(--e-out);
  will-change:transform;
}
.btn svg{ width:18px; height:18px; transition:transform .45s var(--e-out); }
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(120deg,var(--mango),var(--melon));
  transform:translateY(101%); transition:transform .55s var(--e-out);
}
.btn:hover::before{ transform:none; }
.btn:hover{ box-shadow:var(--shadow-soft); }
.btn:hover svg{ transform:translateX(5px); }
.btn--primary{ --btn-bg:var(--mint); --btn-fg:#04302B; }
.btn--primary::before{ background:linear-gradient(120deg,var(--mango),var(--mango-glow)); }
.btn--dark{ --btn-bg:var(--ink); --btn-fg:var(--coconut); }
.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--ink-15);
}
.btn--ghost:hover{ --btn-fg:var(--ink); }
.btn--ghost::before{ background:rgba(255,255,255,.9); }
.btn--outline{
  --btn-bg:transparent; --btn-fg:var(--coconut);
  box-shadow:inset 0 0 0 1.5px rgba(255,253,248,.4);
}
.btn--outline:hover{ --btn-fg:var(--ink); }
.btn--outline::before{ background:var(--coconut); }
.btn--sm{ padding:.78rem 1.3rem; font-size:.72rem; }
.btn--lg{ padding:1.25rem 2.4rem; font-size:.92rem; }
.btn:disabled{ opacity:.55; cursor:progress; }
.btn:disabled::before{ transform:translateY(101%); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-weight:800; letter-spacing:.06em; font-size:.92rem;
  padding-bottom:.3rem; border-bottom:2px solid var(--ink-15);
  transition:border-color .4s var(--e-out), gap .4s var(--e-out);
}
.link-arrow svg{ width:18px; height:18px; }
.link-arrow:hover{ border-color:var(--mango-deep); gap:1rem; }

/* ---------------------------------------------------------------- 05 CHROME */
/* loader */
.loader{
  position:fixed; inset:0; z-index:9500;
  display:grid; place-items:center;
  background:var(--forest);
  transition:transform 1s var(--e-io), opacity .6s ease .3s;
}
.loader.is-done{ transform:translateY(-101%); opacity:0; pointer-events:none; }
.loader__inner{ text-align:center; padding:2rem; }
.loader__mark{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.6rem,5vw,3.4rem); letter-spacing:-.03em;
  color:var(--coconut); margin-bottom:1.6rem;
}
.loader__mark span{
  display:inline-block; opacity:0; transform:translateY(24px);
  animation:loadIn .8s var(--e-out) forwards;
}
.loader__mark span:nth-child(2){ animation-delay:.1s; color:var(--mango); }
.loader__mark span:nth-child(3){ animation-delay:.2s; }
@keyframes loadIn{ to{ opacity:1; transform:none; } }
.loader__bar{
  width:min(280px,60vw); height:3px; margin-inline:auto;
  background:rgba(255,253,248,.18); border-radius:99px; overflow:hidden;
}
.loader__bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--mint),var(--mango));
  transition:width .4s linear;
}

/* cursor */
.cursor{ position:fixed; inset:0; z-index:9200; pointer-events:none; display:none; }
.cursor__dot,.cursor__ring{
  position:absolute; top:0; left:0; border-radius:50%;
  transform:translate3d(-50%,-50%,0);
}
.cursor__dot{ width:7px; height:7px; background:var(--ink); }
.cursor__ring{
  width:44px; height:44px; border:1.5px solid var(--ink-40);
  display:grid; place-items:center;
  transition:width .35s var(--e-out), height .35s var(--e-out),
             background-color .35s var(--e-out), border-color .35s var(--e-out);
}
.cursor__label{
  font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#04302B; opacity:0; transform:scale(.6); transition:opacity .25s, transform .35s var(--e-out);
  white-space:nowrap;
}
.cursor.is-hot .cursor__ring{
  width:76px; height:76px; background:var(--mango); border-color:transparent;
}
.cursor.is-hot .cursor__label{ opacity:1; transform:none; }
.cursor.is-hot .cursor__dot{ opacity:0; }
@media (hover:hover) and (pointer:fine){
  .cursor{ display:block; }
  body.has-cursor,
  body.has-cursor a,
  body.has-cursor button{ cursor:none; }
}

/* header */
.header{
  position:fixed; inset:0 0 auto; z-index:900;
  padding:clamp(.9rem,1.6vw,1.5rem) 0;
  transition:transform .6s var(--e-out), background-color .5s ease, box-shadow .5s ease, padding .5s ease;
}
.header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(255,246,229,.85);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid rgba(20,16,14,.08);
  opacity:1; transition:opacity .5s ease, background-color .5s ease, box-shadow .5s ease;
}
.header.is-stuck::before{
  background:rgba(255,246,229,.94);
  box-shadow:0 10px 30px -10px rgba(20,16,14,.08);
}
.header.is-hidden{ transform:translateY(-108%); }
.header__in{
  width:min(100% - (var(--gut) * 2), var(--wrap)); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.brand{ position:relative; z-index:2; display:flex; align-items:center; gap:.7rem; }
.brand__mark{
  width:clamp(42px,4.4vw,54px); height:auto; border-radius:50%;
  transition:transform .6s var(--e-out);
}
.brand:hover .brand__mark{ transform:rotate(-12deg) scale(1.06); }
.brand__type b{
  display:block; font-family:var(--f-display); font-weight:800;
  font-size:1.16rem; letter-spacing:-.03em; line-height:1;
}
.brand__type small{
  display:block; font-size:.6rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-40); margin-top:.25rem;
}
.nav__list{ display:flex; gap:clamp(1rem,2vw,2.1rem); }
.nav__link{
  position:relative; font-size:.82rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; padding:.4rem 0;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--mango-deep); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--e-out);
}
.nav__link:hover::after,.nav__link.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav__link.is-active{ color:var(--mango-deep); }
.header__actions{ display:flex; align-items:center; gap:.8rem; }

.burger{
  display:none; width:46px; height:46px; border-radius:50%;
  background:var(--ink); position:relative;
}
.burger span{
  position:absolute; left:14px; width:18px; height:2px; border-radius:2px;
  background:var(--coconut); transition:transform .4s var(--e-out), opacity .3s;
}
.burger span:nth-child(1){ top:20px; }
.burger span:nth-child(2){ top:26px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* mobile menu */
.mmenu{ position:fixed; inset:0; z-index:890; }
.mmenu__panel{
  position:absolute; inset:0; background:var(--forest); color:var(--coconut);
  display:flex; flex-direction:column; justify-content:center; gap:2rem;
  padding:6rem var(--gut) 3rem;
  clip-path:circle(0% at calc(100% - 46px) 46px);
  transition:clip-path .8s var(--e-io);
}
.mmenu.is-open .mmenu__panel{ clip-path:circle(150% at calc(100% - 46px) 46px); }
.mmenu__list li{ overflow:hidden; }
.mmenu__list a{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.2rem,10vw,3.6rem); letter-spacing:-.04em; line-height:1.22;
  transform:translateY(110%); transition:transform .8s var(--e-out), color .3s;
}
.mmenu.is-open .mmenu__list a{ transform:none; }
.mmenu__list li:nth-child(2) a{ transition-delay:.05s }
.mmenu__list li:nth-child(3) a{ transition-delay:.1s }
.mmenu__list li:nth-child(4) a{ transition-delay:.15s }
.mmenu__list li:nth-child(5) a{ transition-delay:.2s }
.mmenu__list li:nth-child(6) a{ transition-delay:.25s }
.mmenu__list a:hover{ color:var(--mango); }
.mmenu__list em{
  font-family:var(--f-body); font-style:normal; font-size:.7rem;
  letter-spacing:.2em; color:var(--mint); font-weight:800;
}
.mmenu__foot{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-top:1.6rem; border-top:1px solid rgba(255,253,248,.16);
  font-size:.85rem; letter-spacing:.06em;
}
.mmenu__social{ display:flex; gap:1.2rem; color:var(--mint-soft); }

/* ------------------------------------------------------------------ 06 HERO */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(7rem,13vh,10rem) 0 clamp(5rem,10vh,7rem);
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 8%, #FFF9EC 0%, rgba(255,249,236,0) 60%),
    linear-gradient(178deg, var(--cream) 0%, #FFE9C9 55%, #FFDDB4 100%);
}
.hero__bg{ position:absolute; inset:0; pointer-events:none; }
.hero__sun{
  position:absolute; top:-18vh; right:-6vw;
  width:min(58vw,760px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,214,121,.85), rgba(255,182,39,.28) 45%, rgba(255,182,39,0) 70%);
  filter:blur(6px);
  animation:breathe 9s var(--e-io) infinite alternate;
}
@keyframes breathe{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
.hero__glow{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; }
.hero__glow--a{
  width:44vw; height:44vw; left:-12vw; bottom:-16vw;
  background:radial-gradient(circle, rgba(15,201,161,.55), rgba(15,201,161,0) 70%);
}
.hero__glow--b{
  width:32vw; height:32vw; right:16vw; bottom:-10vw;
  background:radial-gradient(circle, rgba(255,77,109,.35), rgba(255,77,109,0) 70%);
}
.hero__particles{ position:absolute; inset:0; width:100%; height:100%; }

.leaf{
  position:absolute; width:clamp(180px,26vw,420px); aspect-ratio:1/1.3;
  background-repeat:no-repeat; background-size:contain;
  opacity:.9; will-change:transform;
}
.leaf--1{
  top:clamp(4.5rem,8vh,7rem); left:-6%; transform:rotate(14deg);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400'><g fill='none' stroke='%2306403A' stroke-opacity='.55' stroke-width='4' stroke-linecap='round'><path d='M150 400 C150 250 150 120 150 10'/><path d='M150 60 C110 40 70 46 40 70'/><path d='M150 60 C190 40 230 46 260 70'/><path d='M150 120 C104 100 62 108 30 136'/><path d='M150 120 C196 100 238 108 270 136'/><path d='M150 182 C104 162 62 170 30 198'/><path d='M150 182 C196 162 238 170 270 198'/><path d='M150 244 C110 226 74 234 46 258'/><path d='M150 244 C190 226 226 234 254 258'/><path d='M150 306 C118 292 88 298 66 316'/><path d='M150 306 C182 292 212 298 234 316'/></g></svg>");
  animation:sway 11s ease-in-out infinite alternate;
}
.leaf--2{
  top:clamp(4.5rem,8vh,7rem); right:-8%; transform:rotate(-24deg) scaleX(-1);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400'><g fill='%230FC9A1' fill-opacity='.5'><path d='M150 396 C146 300 140 200 150 8 C230 90 268 220 232 320 C214 366 184 392 150 396Z'/></g><g fill='none' stroke='%23FFF6E5' stroke-opacity='.5' stroke-width='3'><path d='M150 380 C170 300 190 200 178 60'/></g></svg>");
  animation:sway 13s ease-in-out infinite alternate-reverse;
}
.leaf--3{
  bottom:-14%; left:6%; width:clamp(140px,18vw,300px); transform:rotate(-8deg);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400'><g fill='%2306403A' fill-opacity='.28'><path d='M150 396 C146 300 140 200 150 8 C70 90 32 220 68 320 C86 366 116 392 150 396Z'/></g></svg>");
  animation:sway 15s ease-in-out infinite alternate;
}
.leaf--4{
  bottom:-8%; right:2%; width:clamp(120px,15vw,260px); transform:rotate(38deg);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400'><g fill='none' stroke='%2306403A' stroke-opacity='.4' stroke-width='5' stroke-linecap='round'><path d='M150 400 C150 250 150 120 150 10'/><path d='M150 90 C110 70 70 76 40 100'/><path d='M150 90 C190 70 230 76 260 100'/><path d='M150 170 C104 150 62 158 30 186'/><path d='M150 170 C196 150 238 158 270 186'/><path d='M150 250 C110 232 74 240 46 264'/><path d='M150 250 C190 232 226 240 254 264'/></g></svg>");
  animation:sway 9s ease-in-out infinite alternate-reverse;
}
@keyframes sway{ from{ rotate:0deg; } to{ rotate:3.5deg; } }

.hero__in{
  position:relative; z-index:2;
  width:min(100% - (var(--gut) * 2), var(--wrap)); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(2rem,4vw,4rem); align-items:center;
}
.hero__title{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.5rem,4.4vw,4.3rem);
  line-height:.94; letter-spacing:-.045em;
  margin:0 0 1.4rem;
  text-transform:uppercase;
}
.hero__lede{
  max-width:38ch; font-size:clamp(1.02rem,1.4vw,1.32rem);
  line-height:1.55; color:var(--ink-60); font-weight:500;
  margin-bottom:1.7rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:2.1rem; }
.hero__facts{
  display:flex; flex-wrap:wrap; gap:clamp(1rem,2vw,2rem);
  padding-top:1.2rem; border-top:1px solid var(--ink-15);
}
.hero__facts b{
  display:block; font-family:var(--f-display); font-size:1.3rem;
  font-weight:800; letter-spacing:-.02em; line-height:1;
}
.hero__facts span{
  display:block; font-size:.66rem; font-weight:600; letter-spacing:.06em;
  color:var(--ink-40); margin-top:.3rem; text-transform:uppercase;
}

/* hero stage */
.hero__stage{ position:relative; width:100%; aspect-ratio:1/1.04; }
.stage__shadow{
  position:absolute; left:50%; bottom:4%; width:52%; height:8%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(20,16,14,.34), rgba(20,16,14,0) 70%);
  filter:blur(10px);
  animation:shadowPulse 6s var(--e-io) infinite alternate;
}
@keyframes shadowPulse{ from{ transform:translateX(-50%) scale(1); opacity:.9; } to{ transform:translateX(-50%) scale(.86); opacity:.7; } }
.pop-float{ position:absolute; will-change:translate; }
.pop-float--lead{ left:50%; top:2%; width:34%; margin-left:-17%; z-index:3; }
.pop-float--left{ left:4%; top:24%; width:25%; z-index:2; }
.pop-float--right{ right:2%; top:17%; width:27%; z-index:2; }
.pop-float > div{ animation:floaty 6.5s var(--e-io) infinite alternate; }
.pop-float--left > div{ animation-duration:8s; animation-delay:-.6s; animation-direction:alternate-reverse; }
.pop-float--right > div{ animation-duration:7.2s; animation-delay:-.3s; }
@keyframes floaty{
  from{ translate:0 -2%; rotate:-2deg; }
  to{ translate:0 3.5%; rotate:2.5deg; }
}
.pop-float svg{ width:100%; height:auto; filter:drop-shadow(0 34px 34px rgba(20,16,14,.24)); }

.orbit{ position:absolute; border-radius:50%; pointer-events:none; }
.orbit--mango{
  width:13%; aspect-ratio:1; left:14%; top:6%;
  background:radial-gradient(circle at 32% 28%, #FFE08A, #FFB627 45%, #E8760C 100%);
  box-shadow:inset -6px -10px 16px rgba(150,70,0,.35), 0 20px 28px -14px rgba(20,16,14,.5);
  animation:orbitA 12s linear infinite;
}
.orbit--coco{
  width:12%; aspect-ratio:1; right:8%; bottom:22%;
  background:radial-gradient(circle at 34% 30%, #FFFDF8, #F3E3CC 55%, #C7A683 100%);
  box-shadow:inset -5px -8px 14px rgba(120,86,50,.3), 0 18px 24px -14px rgba(20,16,14,.45);
  animation:orbitB 15s linear infinite;
}
@keyframes orbitA{
  0%{ transform:translate(0,0) rotate(0); }
  50%{ transform:translate(28px,-34px) rotate(180deg); }
  100%{ transform:translate(0,0) rotate(360deg); }
}
@keyframes orbitB{
  0%{ transform:translate(0,0) rotate(0); }
  50%{ transform:translate(-32px,26px) rotate(-180deg); }
  100%{ transform:translate(0,0) rotate(-360deg); }
}
.splash{ position:absolute; inset:6% 4%; opacity:.34; }
.splash svg{ width:100%; height:100%; }
.splash__ring{ animation:spin 44s linear infinite; transform-origin:50% 50%; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.scrollcue{
  position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem; z-index:4;
}
.scrollcue__line{
  width:1.5px; height:56px; background:var(--ink-15); position:relative; overflow:hidden; border-radius:2px;
}
.scrollcue__line i{
  position:absolute; inset:0; background:var(--ink);
  animation:cue 2.2s var(--e-io) infinite;
}
@keyframes cue{
  0%{ transform:translateY(-100%); } 55%{ transform:translateY(0); } 100%{ transform:translateY(100%); }
}
.scrollcue__text{
  font-size:.64rem; font-weight:800; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-40);
}

/* ---------------------------------------------------------------- 07 TICKER */
.ticker{
  background:var(--ink); color:var(--coconut);
  padding:clamp(.9rem,1.6vw,1.3rem) 0; overflow:hidden;
  border-block:1px solid rgba(255,253,248,.08);
}
.ticker__track{
  display:flex; align-items:center; gap:2.4rem; width:max-content;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.1rem,2.4vw,2rem); letter-spacing:-.02em; text-transform:uppercase;
  white-space:nowrap; will-change:transform;
}
.ticker__track b{ color:var(--mango); font-size:.7em; }
.ticker__track span:nth-child(6n+3){ color:var(--mint); }

/* ----------------------------------------------------------------- 08 ABOUT */
.about{ padding:var(--sec) 0; background:var(--cream); }
.about__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,6rem); align-items:start;
}
.about__lead .display{ max-width:11ch; }
.about__body{ display:flex; flex-direction:column; gap:1.25rem; max-width:56ch; }
.about__body p{ color:var(--ink-60); }
.about__body .lede{ color:var(--ink); }
.about__body .link-arrow{ align-self:flex-start; margin-top:1rem; }

/* -------------------------------------------------------------- 09 PRODUCTS */
.products{
  position:relative; padding:var(--sec) 0 clamp(4rem,8vw,7rem);
  background:var(--ink); color:var(--coconut); overflow:hidden;
  border-radius:clamp(28px,4vw,60px) clamp(28px,4vw,60px) 0 0;
  margin-top:-1px;
}
.products__bg{
  position:absolute; inset:0;
  background:radial-gradient(80% 55% at 50% 0%, rgba(255,182,39,.22), rgba(255,182,39,0) 70%);
  transition:background .9s var(--e-out);
}
.products.tone-mango .products__bg{ background:radial-gradient(85% 60% at 50% 10%, rgba(255,182,39,.34), rgba(255,182,39,0) 72%); }
.products.tone-coconut .products__bg{ background:radial-gradient(85% 60% at 50% 10%, rgba(168,240,222,.3), rgba(168,240,222,0) 72%); }
.products.tone-berry .products__bg{ background:radial-gradient(85% 60% at 50% 10%, rgba(255,77,109,.32), rgba(255,77,109,0) 72%); }
.products .section-label{ color:rgba(255,253,248,.42); }
.products__head{ position:relative; z-index:2; margin-bottom:clamp(3rem,6vw,5rem); }
.products__head .display{ max-width:14ch; }

.cats{ position:relative; z-index:2; border-top:1px solid rgba(255,253,248,.14); }
.cat{
  position:relative;
  display:grid; grid-template-columns:auto minmax(0,.6fr) minmax(0,1.35fr);
  align-items:center; gap:clamp(1.5rem,4vw,4rem);
  width:min(100% - (var(--gut) * 2), var(--wrap)); margin-inline:auto;
  padding:clamp(2.2rem,4.5vw,3.6rem) 0;
  border-bottom:1px solid rgba(255,253,248,.14);
  transition:padding .6s var(--e-out);
}
.cat::after{
  content:""; position:absolute; left:calc(50% - 50vw); width:100vw; top:0; bottom:0;
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  opacity:0; transition:opacity .6s var(--e-out); pointer-events:none;
}
.cat:hover::after,.cat:focus-visible::after{ opacity:1; }
.cat__num{
  align-self:start; padding-top:.5rem;
  font-family:var(--f-display); font-weight:700; font-size:.8rem;
  letter-spacing:.2em; color:rgba(255,253,248,.4);
}
.cat__visual{
  position:relative; height:clamp(280px,30vw,420px); display:grid; place-items:center;
  transform-style:preserve-3d;
}
.cat__visual > *{
  height:100%; display:grid; place-items:center;
  transition:--s .8s var(--e-out);
  will-change:transform;
}
.cat__visual svg{ height:100%; width:auto; filter:drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.cat:hover .cat__visual > *,
.cat:focus-visible .cat__visual > *{ --s:1.09; }
.cat__deco{
  position:absolute; left:8%; top:50%; width:min(30vw,340px); aspect-ratio:1;
  transform:translateY(-50%) scale(.6); border-radius:50%;
  background:radial-gradient(circle, var(--tone,rgba(255,182,39,.5)), transparent 65%);
  filter:blur(30px); opacity:0; transition:opacity .7s var(--e-out), transform .9s var(--e-out);
  pointer-events:none; z-index:-1;
}
.cat:hover .cat__deco{ opacity:1; transform:translateY(-50%) scale(1); }
.cat[data-tone="mango"]{ --tone:rgba(255,182,39,.55); }
.cat[data-tone="coconut"]{ --tone:rgba(168,240,222,.5); }
.cat[data-tone="berry"]{ --tone:rgba(255,77,109,.5); }

.cat__title{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.1rem,5vw,4.4rem); line-height:.92; letter-spacing:-.04em;
  text-transform:uppercase; margin-bottom:.8rem;
  transition:color .5s var(--e-out);
}
.cat:hover .cat__title{ color:var(--tone-solid,var(--mango)); }
.cat[data-tone="coconut"]:hover .cat__title{ --tone-solid:var(--mint-soft); }
.cat[data-tone="berry"]:hover .cat__title{ --tone-solid:var(--melon-soft); }
.cat__desc{ color:rgba(255,253,248,.6); max-width:46ch; margin-bottom:1.3rem; }
.cat__tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.4rem; }
.cat__tags li{
  font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.42rem .9rem; border-radius:999px;
  border:1px solid rgba(255,253,248,.22); color:rgba(255,253,248,.75);
}
.cat__tags li[data-placeholder]{ border-style:dashed; color:rgba(255,253,248,.45); }
.cat__cta{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:.35rem; border-bottom:2px solid rgba(255,253,248,.3);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--e-out), transform .6s var(--e-out), border-color .4s;
}
.cat:hover .cat__cta,.cat:focus-within .cat__cta{ opacity:1; transform:none; }
.cat__cta:hover{ border-color:var(--mango); color:var(--mango); }
@media (hover:none){ .cat__cta{ opacity:1; transform:none; } }

/* --------------------------------------------------------------- 10 PROCESS */
/* --spill is the colour of the light coming off the screen; JS moves it with
   the chapter, and everything in the section tints itself from it. */
.process{ --spill:255,182,39; height:520vh; background:var(--ink); position:relative; }
.process__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding-top:clamp(4rem,9vh,6.5rem);          /* clear the sticky header */
  color:var(--coconut);
}
.process__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(255,182,39,.18), transparent 70%),
    radial-gradient(50% 40% at 50% 80%, rgba(15,201,161,.14), transparent 70%),
    var(--ink);
  transition:background .8s ease;
}

.process__centered{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(1rem, 2.2vw, 1.8rem); width:100%;
}
.process__header{
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.process .section-label{ color:rgba(255,253,248,.45); margin-bottom:.4rem; }
.process__header .display{
  margin-bottom:0; font-size:clamp(2.2rem, 4.2vw, 3.8rem); letter-spacing:-.03em;
  background:linear-gradient(135deg, var(--coconut) 40%, rgba(255,253,248,.7));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* journey subtitle */
.journey__subtitle{
  color:rgba(255,253,248,.5);
  font-size:clamp(.88rem, 1.2vw, 1.1rem);
  font-style:italic;
  letter-spacing:.02em;
  margin-top:.3rem;
}

/* ---- particles container ---- */
.journey-particles{
  position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1;
}
.journey-particle{
  position:absolute; border-radius:50%; pointer-events:none;
  will-change:transform,opacity;
}

/* ---- the journey timeline ---- */
.journey{
  position:relative; width:min(100% - (var(--gut) * 2), var(--wrap));
  margin:0 auto; padding:clamp(1rem,2vw,2rem) 0;
}

/* SVG vine */
.journey__vine{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
.journey__vine-path{
  fill:none;
  stroke:url(#vineGrad);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:2200;
  stroke-dashoffset:2200;
  transition:stroke-dashoffset .1s linear;
}
.journey__vine-glow{
  fill:none;
  stroke:url(#vineGlow);
  stroke-width:12;
  stroke-linecap:round;
  stroke-dasharray:2200;
  stroke-dashoffset:2200;
  opacity:.5;
  transition:stroke-dashoffset .1s linear;
}
.journey__leaf{
  fill:#7CC24A;
  opacity:0;
  transform-origin:center center;
  transition:opacity .6s ease, transform .6s var(--e-out);
}
.journey__leaf.is-visible{
  opacity:.7;
  animation:leafSway 4s ease-in-out infinite alternate;
}
@keyframes leafSway{
  0%{ transform:rotate(-6deg) scale(.9); }
  100%{ transform:rotate(6deg) scale(1.05); }
}

/* ---- journey stages (the 5 orbs in a horizontal row) ---- */
.journey__stages{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
  width:100%; gap:clamp(.6rem, 1.4vw, 1.2rem);
  min-height:clamp(300px, 44svh, 420px);
}

.journey__stage{
  --active:0;
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:clamp(.6rem,1.2vw,1rem);
  flex:1; text-align:center;
  opacity:calc(.35 + .65 * var(--active));
  transform:scale(calc(.85 + .15 * var(--active)));
  filter:blur(calc((1 - var(--active)) * 1px));
  transition:opacity .5s ease, transform .5s var(--e-out), filter .5s ease;
}

/* orb container */
.journey__orb{
  position:relative;
  width:clamp(100px, 14vw, 180px);
  height:clamp(100px, 14vw, 180px);
}
.journey__orb-glow{
  position:absolute; inset:-30%; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--spill), calc(var(--active) * .45)), transparent 70%);
  animation:orbPulse 3s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes orbPulse{
  0%{ transform:scale(.85); opacity:.5; }
  100%{ transform:scale(1.15); opacity:1; }
}

.journey__orb-inner{
  position:relative; z-index:2;
  width:100%; height:100%;
  border-radius:50%;
  background:radial-gradient(72% 62% at 50% 42%, #1D1815, #0B0908 78%);
  border:2px solid rgba(255,253,248, calc(.1 + .25 * var(--active)));
  overflow:hidden;
  display:grid; place-items:center;
  box-shadow:
    0 20px 40px -16px rgba(0,0,0,.7),
    0 0 calc(var(--active) * 50px) rgba(var(--spill), calc(var(--active) * .35)),
    inset 0 0 40px rgba(var(--spill), calc(var(--active) * .12));
  transition:border-color .5s ease, box-shadow .5s ease;
}
.journey__orb-inner > *{
  width:72%; height:72%;
}
.journey__orb-inner [data-popsicle]{
  width:auto; height:82%;
}
.journey__orb-inner [data-popsicle] svg{
  width:auto; height:100%;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.5));
}

/* spinning rings */
.journey__orb-ring{
  position:absolute; inset:-8px; border-radius:50%; pointer-events:none;
  border:1.5px solid transparent;
  border-top-color:rgba(var(--spill), calc(var(--active) * .6));
  border-right-color:rgba(var(--spill), calc(var(--active) * .2));
  animation:ringSpin 6s linear infinite;
}
.journey__orb-ring--2{
  inset:-16px;
  border-top-color:rgba(168,240,222, calc(var(--active) * .4));
  border-right-color:rgba(168,240,222, calc(var(--active) * .1));
  animation-duration:9s;
  animation-direction:reverse;
}
@keyframes ringSpin{
  to{ transform:rotate(360deg); }
}

/* info text */
.journey__info{
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
}
.journey__step-num{
  font-family:var(--f-display); font-weight:800; font-size:.72rem;
  letter-spacing:.15em; text-transform:uppercase;
  color:rgba(var(--spill), calc(.3 + .7 * var(--active)));
  transition:color .5s ease;
}
.journey__step-title{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1rem, 1.6vw, 1.35rem); letter-spacing:-.01em;
  color:var(--coconut);
  text-shadow:0 0 calc(var(--active) * 18px) rgba(var(--spill), calc(var(--active) * .5));
  margin:0;
}
.journey__step-desc{
  color:rgba(255,253,248, calc(.3 + .5 * var(--active)));
  font-size:clamp(.78rem, 1vw, .92rem); line-height:1.45;
  max-width:22ch; margin:0;
  transition:color .5s ease;
}

/* ---- progress bar ---- */
.journey__progress{
  position:relative; width:min(100%, 520px); height:3px; margin:clamp(1rem,2vw,1.6rem) auto 0;
  border-radius:99px; background:rgba(255,253,248,.14);
}
.journey__progress-track{
  position:absolute; inset:0; border-radius:99px;
}
.journey__progress-fill{
  position:absolute; left:0; top:0; bottom:0; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--mint), var(--mango));
  transition:width .1s linear;
}
.journey__progress-glow{
  position:absolute; top:50%; left:0; width:13px; height:13px; margin:-6.5px 0 0 -6.5px;
  border-radius:50%; background:var(--coconut);
  box-shadow:0 0 0 4px rgba(var(--spill),.3), 0 4px 12px rgba(0,0,0,.7),
    0 0 20px rgba(var(--spill),.5);
  transition:left .1s linear;
}


/* morph shapes */
.mango-whole{
  aspect-ratio:1/1.16; border-radius:52% 48% 46% 54% / 60% 58% 42% 40%;
  background:
    radial-gradient(60% 45% at 30% 24%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(90% 80% at 70% 78%, #E8760C, transparent 65%),
    linear-gradient(150deg, #FFD25A 0%, #FFB627 42%, #F2790B 78%, #C6410A 100%);
  box-shadow:inset -18px -24px 44px rgba(140,60,0,.4), 0 40px 50px -26px rgba(0,0,0,.6);
  position:relative;
}
.mango-whole::after{
  content:""; position:absolute; top:-6%; left:46%; width:14%; height:16%;
  background:linear-gradient(#7CC24A,#3E7C22); border-radius:40% 60% 50% 50%;
  transform:rotate(-18deg);
}
.mango-cut{
  aspect-ratio:1/1; position:relative;
  background:
    radial-gradient(closest-side at 50% 50%, #FFD25A, #FFB627 60%, #F2790B 100%);
  border-radius:56% 44% 50% 50% / 48% 52% 48% 52%;
  box-shadow:inset -14px -18px 34px rgba(140,60,0,.32), 0 34px 44px -24px rgba(0,0,0,.55);
}
.mango-cut::before,.mango-cut::after{
  content:""; position:absolute; inset:14% 16%;
  background:repeating-linear-gradient(64deg, rgba(198,84,10,.35) 0 2px, transparent 2px 16px);
  border-radius:inherit;
}
.mango-cut::after{ background:repeating-linear-gradient(-64deg, rgba(198,84,10,.3) 0 2px, transparent 2px 16px); }
.puree{
  aspect-ratio:1/1; border-radius:50%;
  background:
    conic-gradient(from 210deg, #FFD25A, #FFB627, #F2790B, #FFC94A, #FFD25A);
  box-shadow:inset 0 0 60px rgba(140,60,0,.35), 0 34px 44px -24px rgba(0,0,0,.55);
  animation:swirl 7s linear infinite;
  position:relative;
}
.puree::after{
  content:""; position:absolute; inset:18%;
  border-radius:50%;
  background:radial-gradient(circle at 36% 30%, rgba(255,255,255,.5), transparent 55%);
  mix-blend-mode:screen;
}
@keyframes swirl{ to{ transform:rotate(360deg); } }
.mould{
  aspect-ratio:1/1.3;
  border-radius:14px 14px 26px 26px;
  background:linear-gradient(160deg, rgba(255,253,248,.30), rgba(168,240,222,.22));
  border:2px solid rgba(255,253,248,.4);
  backdrop-filter:blur(6px);
  box-shadow:inset 0 -30px 50px rgba(255,182,39,.5), 0 34px 44px -24px rgba(0,0,0,.55);
  position:relative; overflow:hidden;
}
.mould::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:74%;
  background:linear-gradient(180deg,#FFC94A,#F2790B);
}
.mould::after{
  content:""; position:absolute; left:42%; top:-16%; width:16%; height:44%;
  background:linear-gradient(#F6E3C0,#D9BC8C); border-radius:8px;
}

/* ----------------------------------------------------------------- 11 STORY */
.story{
  position:relative; padding:var(--sec) 0; overflow:hidden;
  background:linear-gradient(180deg, var(--forest) 0%, #0A5A4E 55%, var(--forest) 100%);
  color:var(--coconut);
}
.story .section-label{ color:rgba(255,253,248,.45); }
.story__head{ position:relative; z-index:3; margin-bottom:clamp(3rem,6vw,5rem); }
.story__scene{ position:relative; }
.story__layer{ position:absolute; pointer-events:none; will-change:transform; }
.story__layer--back{
  inset:-20% -10% auto; height:70vh;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%23FFF6E5' stroke-opacity='.10' stroke-width='6' stroke-linecap='round'><path d='M120 600 C120 420 118 300 120 160'/><path d='M120 190 C70 150 20 150 -20 180'/><path d='M120 190 C170 150 220 150 260 180'/><path d='M120 250 C60 214 8 216 -30 250'/><path d='M120 250 C180 214 232 216 270 250'/><path d='M980 600 C980 400 978 280 980 130'/><path d='M980 160 C930 120 880 120 840 150'/><path d='M980 160 C1030 120 1080 120 1120 150'/><path d='M980 222 C920 186 868 188 830 222'/><path d='M980 222 C1040 186 1092 188 1130 222'/><path d='M560 600 C560 460 558 360 560 240'/><path d='M560 270 C520 236 480 238 448 264'/><path d='M560 270 C600 236 640 238 672 264'/></g></svg>");
  background-size:cover; opacity:.9;
}
.story__layer--mid{
  right:-6%; top:14%; width:min(52vw,620px); aspect-ratio:1;
  background:radial-gradient(circle at 40% 40%, rgba(255,182,39,.32), rgba(255,182,39,0) 62%);
  filter:blur(20px);
}
.story__cols{
  position:relative; z-index:3;
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(2rem,5vw,5.5rem); align-items:center;
}
.story__fig{ position:relative; will-change:transform; }
.story__fig img{
  width:100%; border-radius:clamp(16px,2vw,28px);
  box-shadow:var(--shadow-lift);
  aspect-ratio:3/4; object-fit:cover;
}
.story__fig figcaption{
  margin-top:.9rem; font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,253,248,.5);
}
.story__text{ display:flex; flex-direction:column; gap:1.2rem; max-width:54ch; }
.story__text p{ color:rgba(255,253,248,.72); }
.story__pull{
  font-family:var(--f-serif); font-style:italic;
  font-size:clamp(1.8rem,3.6vw,3.2rem); line-height:1.12;
  color:var(--mango) !important; letter-spacing:-.01em;
}
.story__sign{
  font-family:var(--f-display); font-weight:700; letter-spacing:.02em;
  color:var(--mint-soft); margin-top:.6rem;
}

/* ----------------------------------------------------------- 12 INGREDIENTS */
.ingredients{ padding:var(--sec) 0; background:var(--coconut); }
.ing__head{ margin-bottom:clamp(3rem,6vw,5rem); }
.ing__head .display{ max-width:15ch; }
.ing__note{ margin-top:1.4rem; color:var(--ink-60); font-size:1.05rem; max-width:48ch; }
.ing__rows{ display:grid; gap:clamp(1rem,2vw,1.6rem); }
.ing{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem); align-items:center;
  padding:clamp(2rem,4vw,3.4rem);
  border-radius:clamp(20px,2.4vw,34px);
  background:var(--cream);
  border:1px solid var(--ink-08);
  transition:transform .7s var(--e-out), box-shadow .7s var(--e-out), background .7s var(--e-out);
}
.ing:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); }
.ing[data-ing="mango"]{ background:linear-gradient(120deg,#FFF3DA,#FFE6B4); }
.ing[data-ing="coconut"]{ background:linear-gradient(120deg,#F2FFFB,#DCF6EE); }
.ing__chain{
  display:flex; align-items:stretch; gap:clamp(.6rem,1.8vw,1.6rem); flex-wrap:nowrap;
}
.ing__raw,.ing__out{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:.7rem; flex:0 0 auto; min-width:0;
}
.ing__raw em,.ing__out em{
  font-style:normal; font-size:.68rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-40); white-space:nowrap;
}
.ing__out svg{ height:clamp(96px,13vw,168px); width:auto; filter:drop-shadow(0 14px 18px rgba(20,16,14,.22)); }
.ing__out i{ display:block; }
.ing__arrow{
  flex:1 1 auto; align-self:center; height:2px; min-width:24px;
  background:repeating-linear-gradient(90deg,var(--ink-15) 0 8px, transparent 8px 16px);
  position:relative; margin-bottom:1.4rem;
}
.ing__arrow::after{
  content:""; position:absolute; right:-2px; top:-4px;
  border-left:8px solid var(--ink-15); border-block:5px solid transparent;
}
.raw{
  display:block; width:clamp(56px,8vw,104px); aspect-ratio:1;
  border-radius:50%; position:relative;
  animation:bob 5s var(--e-io) infinite alternate;
}
@keyframes bob{ from{ transform:translateY(-4px) rotate(-3deg); } to{ transform:translateY(4px) rotate(3deg); } }
.raw--mango{
  border-radius:52% 48% 44% 56% / 58% 60% 40% 42%;
  background:
    radial-gradient(55% 45% at 32% 26%, rgba(255,255,255,.6), transparent 62%),
    linear-gradient(150deg,#FFD25A,#FFB627 45%,#EF7A0C 100%);
  box-shadow:inset -8px -10px 20px rgba(150,66,0,.35), 0 16px 22px -12px rgba(20,16,14,.4);
}
.raw--mango-slice{
  border-radius:60% 60% 46% 46% / 70% 70% 40% 40%;
  background:
    linear-gradient(160deg,#FFDF86,#FFC13F 55%,#F59316 100%);
  box-shadow:inset 0 -8px 16px rgba(150,66,0,.28), 0 14px 20px -12px rgba(20,16,14,.35);
  animation-delay:-1.6s;
}
.raw--mango-slice::after{
  content:""; position:absolute; inset:18% 22%;
  background:repeating-linear-gradient(58deg, rgba(198,84,10,.3) 0 2px, transparent 2px 12px);
  border-radius:inherit;
}
.raw--coconut{
  background:
    radial-gradient(50% 42% at 34% 28%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(150deg,#9B7448,#6E4B27 60%,#4A2F16 100%);
  box-shadow:inset -8px -10px 20px rgba(30,16,4,.5), 0 16px 22px -12px rgba(20,16,14,.4);
}
.raw--coconut::after{
  content:""; position:absolute; inset:24% 30% 26% 30%;
  background:radial-gradient(circle at 50% 40%, rgba(255,253,248,.95), rgba(255,253,248,.6));
  border-radius:50%; filter:blur(1px);
}
.raw--coconut-piece{
  border-radius:70% 70% 40% 40% / 80% 80% 30% 30%;
  background:linear-gradient(170deg,#FFFDF8 0 58%, #B08553 58%, #6E4B27 100%);
  box-shadow:inset 0 -10px 18px rgba(70,44,16,.35), 0 14px 20px -12px rgba(20,16,14,.35);
  animation-delay:-2.4s;
}
.ing__meta h3{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.8rem,3.4vw,2.8rem); letter-spacing:-.03em; margin-bottom:.5rem;
}
.ing__meta p{ color:var(--ink-60); max-width:34ch; }
.ing__particles{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.ing__particles i{
  position:absolute; width:8px; height:8px; border-radius:50%;
  background:var(--mango); opacity:0;
}

/* ---------------------------------------------------------------- 13 MOMENT */
.moment{ height:340vh; position:relative; }
.moment__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center;
}
.moment__bg{
  position:absolute; inset:0;
  background:var(--mango);
  transition:background-color .1s linear;
}
.moment__type{
  position:relative; z-index:3; text-align:center;
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(3.4rem,15vw,15rem); line-height:.82; letter-spacing:-.05em;
  text-transform:uppercase; color:var(--coconut);
  filter:drop-shadow(0 24px 40px rgba(20,16,14,.28));
}
.moment__line{ display:block; will-change:transform; }
.moment__line--alt{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:-.02em;
}
.moment__drift{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.drift{ position:absolute; width:clamp(80px,11vw,180px); will-change:transform; }
.drift:nth-child(1){ top:8%;  left:-10%; }
.drift:nth-child(2){ top:62%; left:-20%; }
.drift:nth-child(3){ top:34%; left:-14%; }
.drift:nth-child(4){ top:76%; left:-6%; }
.drift:nth-child(5){ top:16%; left:-24%; }
.drift svg{ filter:drop-shadow(0 22px 26px rgba(20,16,14,.3)); }

/* ------------------------------------------------------------- 14 LOCATIONS */
.locations{ padding:var(--sec) 0; background:var(--cream); }
.loc__head{ margin-bottom:clamp(2.6rem,5vw,4rem); }
.loc__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,4vw,4rem); align-items:start;
}
.loc__list{ display:flex; flex-direction:column; gap:.7rem; }
.loc__item{
  display:flex; align-items:center; gap:1.2rem; text-align:left;
  padding:clamp(1.1rem,2vw,1.6rem);
  border-radius:18px; background:rgba(255,255,255,.6);
  border:1px solid var(--ink-08);
  transition:background .45s var(--e-out), transform .45s var(--e-out), box-shadow .45s var(--e-out), border-color .45s;
}
.loc__item:hover{ transform:translateX(6px); background:#fff; }
.loc__item.is-active{
  background:var(--ink); color:var(--coconut); border-color:var(--ink);
  box-shadow:var(--shadow-soft);
}
.loc__pin{
  flex:0 0 auto; display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--mango); color:var(--ink);
  font-family:var(--f-display); font-weight:800; font-size:.85rem;
  transition:background .45s var(--e-out);
}
.loc__item.is-active .loc__pin{ background:var(--mint); }
.loc__body b{
  display:block; font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.15rem,2vw,1.5rem); letter-spacing:-.02em; line-height:1.15;
}
.loc__body em{
  font-style:normal; font-size:.86rem; color:currentColor; opacity:.6;
}
.loc__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }
.loc__note{ font-size:.86rem; color:var(--ink-40); margin-top:.4rem; }
.loc__note a{ color:var(--ink); font-weight:700; border-bottom:1.5px solid var(--mango); }

.loc__map{
  position:relative; border-radius:clamp(20px,2.4vw,32px); overflow:hidden;
  background:var(--coconut); border:1px solid var(--ink-08);
  box-shadow:var(--shadow-soft);
  display:flex; justify-content:center; align-items:center;
}
.mapsvg{ width:100%; height:auto; max-height:70vh; display:block; }
.pin{ cursor:pointer; }
.pin__body{ fill:var(--ink); transition:fill .4s var(--e-out), transform .5s var(--e-out); transform-box:fill-box; transform-origin:50% 100%; }
.pin__dot{ fill:var(--coconut); transition:fill .4s var(--e-out); }
.pin__pulse{ fill:var(--mint); opacity:0; transform-box:fill-box; transform-origin:center; }
.pin__label{ font-family:var(--f-display); font-weight:800; font-size:17px; fill:var(--ink); }
.pin__sub{ font-size:12px; font-weight:600; fill:var(--ink); opacity:.5; letter-spacing:.08em; text-transform:uppercase; }
.pin.is-active .pin__body{ fill:var(--mango-deep); transform:scale(1.16); }
.pin.is-active .pin__pulse{ opacity:.28; animation:pinPulse 2.4s ease-out infinite; }
.pin:hover .pin__body{ transform:scale(1.1); }
@keyframes pinPulse{
  0%{ transform:scale(.6); opacity:.4; } 100%{ transform:scale(1.7); opacity:0; }
}
.loc__disclaimer{
  position:absolute; left:0; right:0; bottom:0;
  padding:.7rem 1rem; font-size:.7rem; letter-spacing:.06em;
  color:var(--ink-40); background:rgba(255,253,248,.86); backdrop-filter:blur(6px);
  text-align:center;
}

/* --------------------------------------------------------------- 15 GALLERY */
.gallery{ padding:var(--sec) 0; background:var(--coconut); }
.gal__head{ margin-bottom:clamp(2.6rem,5vw,4rem); }
.gal__masonry{
  width:min(100% - (var(--gut) * 2), var(--wrap)); margin-inline:auto;
  columns:3; column-gap:clamp(1rem,1.6vw,1.6rem);
}
.gal__item{
  -webkit-column-break-inside:avoid; page-break-inside:avoid; break-inside:avoid;
  margin-bottom:clamp(1rem,1.6vw,1.6rem);
  position:relative; overflow:hidden;
  border-radius:clamp(14px,1.6vw,22px);
  will-change:transform;
  display:inline-block; width:100%;
}
.gal__item img{
  width:100%; height:100%; object-fit:cover; aspect-ratio:3/4;
  transition:transform 1.1s var(--e-out), filter .8s var(--e-out);
}
.gal__item--tall img{ aspect-ratio:2/3; }
.gal__item[data-lightbox]{ cursor:pointer; }
.gal__item[data-lightbox]:hover img{ transform:scale(1.07); }
.gal__item figcaption{
  position:absolute; inset:auto 0 0; padding:1.4rem;
  display:flex; justify-content:space-between; align-items:flex-end; gap:1rem;
  color:var(--coconut);
  background:linear-gradient(0deg, rgba(20,16,14,.72), rgba(20,16,14,0));
  transform:translateY(18%); opacity:0;
  transition:opacity .5s var(--e-out), transform .6s var(--e-out);
}
.gal__item:hover figcaption{ opacity:1; transform:none; }
.gal__item figcaption span{ font-family:var(--f-display); font-weight:800; font-size:1.1rem; }
.gal__item figcaption em{
  font-style:normal; font-size:.68rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; opacity:.65;
}
.gal__tile{
  display:grid; place-items:center; gap:1.2rem; padding:2.4rem 1.6rem;
  aspect-ratio:3/4; text-align:center;
}
.gal__tile--mango{ background:linear-gradient(150deg,#FFC94A,#F2790B); }
.gal__tile--coconut{ background:linear-gradient(150deg,#0FC9A1,#06403A); }
.gal__tile--berry{ background:linear-gradient(150deg,#FF6E86,#C41E42); }
.tile__pop{ width:min(52%,150px); animation:floaty 7s var(--e-io) infinite alternate; }
.tile__pop svg{ filter:drop-shadow(0 24px 26px rgba(20,16,14,.35)); }
.tile__type{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.05rem,1.5vw,1.45rem); line-height:1.04; letter-spacing:-.03em;
  text-transform:uppercase; color:var(--coconut);
}

/* ---------------------------------------------------------------- 16 SOCIAL */
.social{ padding:var(--sec) 0; background:var(--cream); overflow:hidden; }
.social__head{ margin-bottom:clamp(2.4rem,4vw,3.4rem); }
.social__head .display{ max-width:14ch; }
.social__note{ max-width:44ch; }
.social__note{ margin-top:1.2rem; color:var(--ink-60); }
.social__rail{
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  padding-inline:var(--gut); scroll-padding-inline:var(--gut); scroll-snap-type:x mandatory;
  cursor:grab; -webkit-overflow-scrolling:touch;
}
.social__rail::-webkit-scrollbar{ display:none; }
.social__rail.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.social__track{ display:flex; gap:clamp(.8rem,1.4vw,1.4rem); width:max-content; padding-bottom:.4rem; }
.scard{
  position:relative; flex:0 0 auto; scroll-snap-align:start;
  width:clamp(200px,24vw,320px); aspect-ratio:3/4;
  border-radius:clamp(14px,1.6vw,22px); overflow:hidden;
  background:var(--ink);
  transition:transform .7s var(--e-out), box-shadow .7s var(--e-out);
}
.scard:hover{ transform:translateY(-8px) scale(1.015); box-shadow:var(--shadow-lift); }
.scard img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--e-out); }
.scard:hover img{ transform:scale(1.06); }
.scard--pop{ display:grid; place-items:center; background:linear-gradient(150deg,#FF9A3C,#FF4D6D); }
.scard--alt{ background:linear-gradient(150deg,#9BD84B,#0AA184); }
.scard--three{ background:linear-gradient(150deg,#0FC9A1,#06403A); }
.scard--pop > div{ width:44%; animation:floaty 6s var(--e-io) infinite alternate; }
.scard--pop svg{ filter:drop-shadow(0 22px 24px rgba(20,16,14,.35)); }
.scard__tag{
  position:absolute; left:1rem; bottom:1rem;
  padding:.42rem .85rem; border-radius:999px;
  background:rgba(255,253,248,.9); color:var(--ink);
  font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
}
.social__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:clamp(2rem,4vw,3rem); }

/* --------------------------------------------------------------- 17 PARTNER */
.partner{ position:relative; padding:var(--sec) 0; background:var(--cream-2); overflow:hidden; }
.partner__bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(46% 42% at 88% 8%, rgba(255,182,39,.34), transparent 68%),
    radial-gradient(38% 36% at 4% 88%, rgba(15,201,161,.22), transparent 70%);
}
.partner .wrap{ position:relative; z-index:1; }
.partner__head{ margin-bottom:clamp(2.6rem,5vw,4rem); }
.partner__head .display{ max-width:14ch; }
.partner__lede{ margin-top:1.4rem; max-width:52ch; color:var(--ink-60); }

.partner__grid{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2rem,4vw,4.5rem); align-items:start;
}

/* aside — how it works */
.partner__sub{
  font-size:.68rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-40); margin-bottom:1.6rem;
}
.partner__steps{ display:grid; gap:1.5rem; list-style:none; padding:0; margin:0; }
.partner__steps[data-placeholder]{
  border-left:1.5px dashed var(--ink-15); padding-left:clamp(1rem,2vw,1.6rem);
}
.partner__steps li{ display:flex; align-items:flex-start; gap:1rem; }
.partner__step{
  flex:0 0 auto; display:grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  background:var(--ink); color:var(--coconut);
  font-family:var(--f-display); font-weight:800; font-size:.78rem;
}
.partner__steps li > span:last-child{ font-size:.92rem; color:var(--ink-60); line-height:1.55; }
.partner__steps b{
  display:block; margin-bottom:.15rem; color:var(--ink);
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.05rem,1.6vw,1.3rem); letter-spacing:-.02em; line-height:1.25;
}
.partner__call{ margin-top:2rem; font-size:.9rem; color:var(--ink-40); }
.partner__call a{ color:var(--ink); font-weight:800; border-bottom:1.5px solid var(--mango); }
.partner__art{ height:clamp(160px,20vw,240px); margin-top:2.4rem; }
.partner__art > div{ height:100%; animation:floaty 8s var(--e-io) infinite alternate; }
.partner__art svg{ height:100%; width:auto; filter:drop-shadow(0 30px 34px rgba(20,16,14,.28)); }

/* form card */
.pform,.pform__done{
  padding:clamp(1.5rem,3vw,2.6rem);
  border-radius:clamp(20px,2.4vw,32px);
  background:var(--coconut); border:1px solid var(--ink-08);
  box-shadow:var(--shadow-soft);
}
.pform{ position:relative; display:grid; gap:1.2rem; }
.pform__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.pfield{ display:grid; gap:.5rem; min-width:0; }
.pfield label{
  font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-40);
}
.pfield label span{ color:var(--mango-deep); }
.pfield input,.pfield select,.pfield textarea{
  width:100%; font:inherit; font-size:.98rem; color:var(--ink);
  padding:.92rem 1.05rem; border-radius:14px;
  background:var(--cream); border:1.5px solid var(--ink-08);
  transition:border-color .35s var(--e-out), background .35s var(--e-out), box-shadow .35s var(--e-out);
}
.pfield textarea{ resize:vertical; min-height:7rem; line-height:1.55; }
.pfield input::placeholder,.pfield textarea::placeholder{ color:var(--ink-40); }
.pfield input:hover,.pfield select:hover,.pfield textarea:hover{ border-color:var(--ink-15); }
.pfield input:focus,.pfield select:focus,.pfield textarea:focus{
  outline:none; background:#fff; border-color:var(--mint);
  box-shadow:0 0 0 4px rgba(15,201,161,.18);
}
.pfield__select{ position:relative; }
.pfield__select::after{
  content:""; position:absolute; right:1.1rem; top:50%; width:10px; height:10px;
  margin-top:-6px; border-right:2px solid var(--ink-40); border-bottom:2px solid var(--ink-40);
  transform:rotate(45deg); pointer-events:none;
}
.pfield select{ appearance:none; padding-right:2.6rem; cursor:pointer; }
.pfield.has-error input,.pfield.has-error textarea{ border-color:var(--danger); background:rgba(192,25,63,.05); }
.pfield.has-error input:focus,.pfield.has-error textarea:focus{ box-shadow:0 0 0 4px rgba(192,25,63,.14); }
.pfield__err{ font-size:.78rem; font-weight:600; color:var(--danger); }

.pform__trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.pform__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; margin-top:.4rem; }
.pform__note{ flex:1 1 14rem; font-size:.78rem; color:var(--ink-40); line-height:1.5; }
.pform__status{ font-size:.86rem; font-weight:600; }
.pform__status.is-busy{ color:var(--ink-60); }
.pform__status.is-error{ color:var(--danger); }
.pform.is-sending{ opacity:.75; }

.pform__done{ display:grid; justify-items:start; gap:.9rem; }
.pform__done:focus-visible{ outline:3px solid var(--mint-dk); outline-offset:4px; }
.pform__tick{
  display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  background:var(--mint); color:#04302B;
}
.pform__tick svg{ width:28px; height:28px; }
.pform__done h3{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.03em; line-height:1.15;
}
.pform__done p{ color:var(--ink-60); max-width:42ch; }
.pform__done a{ color:var(--ink); font-weight:800; border-bottom:1.5px solid var(--mango); }

/* ----------------------------------------------------------------- 18 FINAL */
.final{
  position:relative; min-height:100svh; display:grid; place-items:center;
  padding:clamp(5rem,9vw,7.5rem) 0; overflow:hidden; text-align:center;
  background:linear-gradient(170deg, var(--forest-deep), #08514A 48%, var(--forest-deep));
  color:var(--coconut);
}
.final__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(45% 40% at 50% 42%, rgba(255,182,39,.30), transparent 68%),
    radial-gradient(40% 35% at 16% 82%, rgba(255,77,109,.22), transparent 70%);
}
.final__particles{ position:absolute; inset:0; }
.final__particles i{
  position:absolute; border-radius:50%;
  background:rgba(255,253,248,.55);
  animation:rise linear infinite;
}
@keyframes rise{
  from{ transform:translateY(20vh) scale(.6); opacity:0; }
  12%{ opacity:.7; }
  to{ transform:translateY(-100vh) scale(1); opacity:0; }
}
.final__in{ position:relative; z-index:2; display:grid; justify-items:center; }
.final__hero{ height:clamp(190px,26vh,300px); margin-bottom:clamp(1.2rem,2.4vw,2.2rem); }
.final__hero > div{ height:100%; animation:floaty 7s var(--e-io) infinite alternate; }
.final__hero svg{ height:100%; width:auto; filter:drop-shadow(0 46px 46px rgba(0,0,0,.5)); }

.final .display{ max-width:16ch; text-transform:uppercase; }
.final__sub{
  margin-top:1.4rem; font-size:clamp(1.05rem,1.6vw,1.35rem);
  color:rgba(255,253,248,.66); font-weight:500;
}
.final__cta{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:2.4rem; }

/* ---------------------------------------------------------------- 19 FOOTER */
.footer{ background:var(--ink); color:var(--coconut); padding:clamp(3.5rem,7vw,6rem) 0 2rem; overflow:hidden; }
.footer__top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:clamp(2rem,4vw,3.5rem); padding-bottom:clamp(2.5rem,5vw,4rem);
}
.footer__brand img{ width:76px; border-radius:50%; margin-bottom:2rem; }
.footer__tag{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(1.3rem,2.2vw,1.8rem); letter-spacing:-.03em;
}
.footer h3{
  font-size:.68rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,253,248,.4); margin-bottom:1.1rem;
}
.footer__nav ul{ display:grid; gap:.6rem; }
.footer__nav a,.footer__social a,.footer__phone{
  font-size:.95rem; color:rgba(255,253,248,.75);
  transition:color .35s var(--e-out);
}
.footer__nav a:hover,.footer__social a:hover,.footer__phone:hover{ color:var(--mango); }
.footer__contact address{ color:rgba(255,253,248,.6); font-size:.95rem; line-height:1.7; margin-bottom:.9rem; }
.footer__phone{ font-weight:800; letter-spacing:.04em; }
.footer__social{ display:flex; flex-direction:column; }
.footer__social a{ display:flex; align-items:center; gap:.6rem; margin-bottom:.7rem; }
.footer__social svg{ width:20px; height:20px; }
.footer__word{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.2rem,11vw,11rem); line-height:.8; letter-spacing:-.05em;
  text-transform:uppercase;
  background:linear-gradient(180deg, rgba(255,253,248,.16), rgba(255,253,248,.02));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-align:center; margin-block:1rem -.1em; user-select:none;
}
.footer__base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-top:1.6rem; border-top:1px solid rgba(255,253,248,.12);
  font-size:.78rem; color:rgba(255,253,248,.45);
}
.footer__dev{
  width:100%; text-align:center; margin-top:.4rem;
  font-size:.72rem; letter-spacing:.04em;
}
.footer__dev a{
  color:var(--mango); text-decoration:none;
  transition:color .3s ease;
}
.footer__dev a:hover{ color:var(--mint); }

/* -------------------------------------------------------------- 20 UTILITIES */
/* sticky mobile CTA */
.stickycta{
  position:fixed; z-index:800; left:var(--gut); right:var(--gut); bottom:1rem;
  display:none; gap:.6rem; align-items:center;
  transform:translateY(160%); transition:transform .6s var(--e-out);
}
.stickycta.is-on{ transform:none; }
.stickycta .btn{ flex:1; justify-content:center; }
.stickycta__call{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; background:var(--ink); color:var(--coconut);
  box-shadow:var(--shadow-soft);
}
.stickycta__call svg{ width:22px; height:22px; }

/* floating whatsapp button */
.whatsapp-float{
  position:fixed; bottom:1.8rem; right:1.8rem; z-index:900;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#ffffff;
  display:grid; place-items:center;
  box-shadow:0 8px 24px rgba(37,211,102,0.4), 0 4px 12px rgba(0,0,0,0.15);
  transition:transform .35s var(--e-out), background-color .35s var(--e-out), box-shadow .35s var(--e-out);
  text-decoration:none;
}
.whatsapp-float svg{ width:30px; height:30px; fill:currentColor; transition:transform .35s var(--e-out); }
.whatsapp-float:hover{
  transform:scale(1.08) translateY(-2px);
  background:#20ba5a;
  box-shadow:0 12px 30px rgba(37,211,102,0.5), 0 6px 16px rgba(0,0,0,0.2);
}
.whatsapp-float:hover svg{ transform:scale(1.06); }

.whatsapp-float__tooltip{
  position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(6px);
  background:var(--ink); color:var(--coconut);
  padding:0.45rem 0.85rem; border-radius:8px;
  font-size:0.8rem; font-weight:700; letter-spacing:0.02em;
  white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .25s var(--e-out), transform .25s var(--e-out);
  box-shadow:var(--shadow-soft);
}
.whatsapp-float__tooltip::after{
  content:''; position:absolute; left:100%; top:50%; transform:translateY(-50%);
  border-width:5px; border-style:solid;
  border-color:transparent transparent transparent var(--ink);
}
.whatsapp-float:hover .whatsapp-float__tooltip{
  opacity:1; transform:translateY(-50%) translateX(0);
}

@media (max-width:960px){
  .whatsapp-float{ bottom:5.2rem; right:1.2rem; width:52px; height:52px; }
  .whatsapp-float svg{ width:26px; height:26px; }
  .whatsapp-float__tooltip{ display:none; }
}

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:9300;
  display:grid; place-items:center; padding:clamp(1rem,4vw,3rem);
  background:rgba(6,64,58,.94); backdrop-filter:blur(14px);
  opacity:0; transition:opacity .45s var(--e-out);
}
.lightbox.is-open{ opacity:1; }
.lightbox__stage{
  max-width:min(92vw,900px); max-height:86svh;
  display:grid; gap:1rem; justify-items:center;
  transform:scale(.94); transition:transform .6s var(--e-out);
}
.lightbox.is-open .lightbox__stage{ transform:none; }
.lightbox__stage img{
  max-height:74svh; width:auto; border-radius:16px;
  box-shadow:0 50px 90px -30px rgba(0,0,0,.7);
}
.lightbox__stage figcaption{
  color:rgba(255,253,248,.7); font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; font-weight:700; text-align:center;
}
.lightbox__close,.lightbox__nav{
  position:absolute; display:grid; place-items:center;
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,253,248,.12); color:var(--coconut);
  transition:background .35s var(--e-out), transform .35s var(--e-out);
}
.lightbox__close:hover,.lightbox__nav:hover{ background:var(--mango); color:var(--ink); transform:scale(1.08); }
.lightbox__close{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); }
.lightbox__close svg,.lightbox__nav svg{ width:24px; height:24px; }
.lightbox__nav--prev{ left:clamp(.6rem,3vw,2.4rem); top:50%; transform:translateY(-50%); }
.lightbox__nav--next{ right:clamp(.6rem,3vw,2.4rem); top:50%; transform:translateY(-50%); }
.lightbox__nav--prev:hover{ transform:translateY(-50%) scale(1.08); }
.lightbox__nav--next:hover{ transform:translateY(-50%) scale(1.08); }

/* ------------------------------------------------------------ 21 RESPONSIVE */
@media (max-width:1180px){
  .hero__in{ grid-template-columns:1fr; gap:2.5rem; }
  .hero__stage{ order:-1; width:min(76%,460px); margin-inline:auto; min-height:340px; }
  .hero__facts{ gap:1.4rem 2rem; }
  .cat{ grid-template-columns:auto minmax(0,.85fr) minmax(0,1.3fr); }
  .gal__masonry{ columns:2; }
}
@media (max-width:960px){
  html{ scroll-padding-top:80px; }
  .nav{ display:none; }
  .burger{ display:block; }
  .header__actions .btn{ display:none; }
  .about__grid,.loc__grid,.story__cols,.process__grid,.footer__top{ grid-template-columns:1fr; }
  .footer__top{ gap:2.4rem; }
  .about__lead .display{ max-width:none; }
  .ing{ grid-template-columns:1fr; }
  .process{ height:460vh; }
  .process__sticky{ align-items:center; justify-content:center; padding-top:clamp(3.5rem,8vh,5rem); }
  .journey__stages{ gap:clamp(.4rem, 1vw, .8rem); }
  .journey__orb{ width:clamp(70px, 11vw, 120px); height:clamp(70px, 11vw, 120px); }
  .journey__step-desc{ display:none; }
  .story__fig{ max-width:420px; }
  .partner__grid{ grid-template-columns:1fr; }
  .partner__art{ display:none; }
  .moment{ height:280vh; }
  .stickycta{ display:flex; }
  .final__hero{ height:clamp(170px,24vh,240px); }
}
@media (max-width:760px){
  .hero{ padding:5.4rem 0 4.2rem; }
  .hero__in{ gap:1.6rem; }
  .hero__stage{ width:min(82%,320px); min-height:0; }
  .scrollcue{ display:none; }
  .cat{ grid-template-columns:1fr; gap:1.4rem; padding:2.6rem 0; }
  .cat__num{ padding:0; }
  .cat__visual{ height:clamp(200px,52vw,280px); justify-items:center; }
  .cat__visual > *{ width:auto; height:100%; }
  .gal__masonry{ columns:1; }
  .gal__item--tall img,.gal__item img{ aspect-ratio:4/5; }
  .gal__item figcaption{ opacity:1; transform:none; }
  .hero__stage{ width:min(92%,400px); }
  .hero__facts li{ flex:1 1 40%; }
  .ing__chain{ gap:.5rem; }
  .ing__arrow{ min-width:16px; }
  .pform__row{ grid-template-columns:1fr; }
  .partner__head .display{ max-width:none; }
  .loc__disclaimer{ font-size:.62rem; }
  .lightbox__nav{ bottom:1rem; top:auto; transform:none; }
  .lightbox__nav--prev{ left:calc(50% - 62px); }
  .lightbox__nav--next{ right:calc(50% - 62px); }
  .lightbox__nav--prev:hover,.lightbox__nav--next:hover{ transform:scale(1.08); }
  .lightbox__stage img{ max-height:62svh; }
  /* on small screens the journey becomes a vertical column */
  .journey__stages{
    flex-direction:column; gap:1.6rem;
    min-height:auto;
  }
  .journey__stage{ flex-direction:row; gap:1rem; text-align:left; }
  .journey__info{ align-items:flex-start; }
  .journey__step-desc{ display:block; max-width:none; }
  .journey__orb{ width:70px; height:70px; flex:0 0 70px; }
  .journey__vine{ display:none; }
  .process{ height:350vh; }
  .process__sticky{ position:sticky; top:0; height:100svh; padding-top:clamp(4rem,8vh,5rem); overflow:hidden; }
}
@media (max-width:520px){
  .brand__type small{ display:none; }
  .ing__chain{ flex-wrap:wrap; justify-content:center; }
  .ing__arrow{ display:none; }
  .ing__raw,.ing__out{ flex:1 1 30%; }
}

/* -------------------------------------------------------- 22 REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .split-line > span,.split-char{ transform:none !important; opacity:1 !important; }
  .cursor{ display:none !important; }
  .grain{ display:none; }
  /* no scrubbing: journey becomes a simple static grid */
  .process{ height:auto; }
  .process__sticky{ position:static; height:auto; padding-block:var(--sec); }
  .journey__vine{ display:none; }
  .journey-particles{ display:none; }
  .journey__progress{ display:none; }
  .journey__stages{
    flex-direction:column; gap:1.5rem;
    min-height:auto;
  }
  .journey__stage{
    --active:1;
    flex-direction:row; gap:1rem; text-align:left;
    opacity:1; transform:none; filter:none;
  }
  .journey__info{ align-items:flex-start; }
  .journey__orb{ width:70px; height:70px; flex:0 0 70px; }
  .journey__orb-ring{ display:none; }
  .moment{ height:auto; }
  .moment__sticky{ position:static; height:auto; padding-block:var(--sec); }
  .moment__drift{ display:none; }
  .partner__art{ display:none; }
  .loader{ display:none; }
}