/* ==========================================================================
   IDREES FRUITS — design system
   Palette thesis: the chrome is quiet so the FRUIT is the colour.
   Only three inks: pistachio-milk, leaf-black, pomegranate.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@500;600;700;800;900&family=Manrope:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root{
  --bg:#ECEFE5;            /* pistachio milk */
  --bg-2:#E3E8D9;
  --surface:#FFFFFF;
  --ink:#14261B;           /* leaf black */
  --ink-2:#4A5C50;
  --ink-3:#7C8B81;
  --pom:#E0344B;           /* pomegranate — the only accent */
  --pom-dk:#B3253A;
  --bone:#F4F6EF;
  --line:rgba(20,38,27,.12);
  --line-2:rgba(20,38,27,.07);
  --shadow:0 18px 50px -22px rgba(20,38,27,.35);
  --shadow-lg:0 40px 90px -40px rgba(20,38,27,.45);

  --f-display:'Gabarito','Trebuchet MS',system-ui,sans-serif;
  --f-body:'Manrope',system-ui,-apple-system,sans-serif;
  --f-mono:'DM Mono',ui-monospace,'Courier New',monospace;

  --r-sm:12px; --r:20px; --r-lg:30px; --r-xl:44px;
  --wrap:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
  --nav-h:76px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);background:var(--bg);color:var(--ink);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--pom);outline-offset:3px;border-radius:6px}
::selection{background:var(--pom);color:#fff}

/* subtle paper grain over everything */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
.h-xl,.h-lg,.h-md,.h-sm{font-family:var(--f-display);font-weight:800;line-height:.98;letter-spacing:-.03em}
.h-xl{font-size:clamp(2.9rem,8.4vw,7rem)}
.h-lg{font-size:clamp(2.2rem,5.2vw,4.2rem);line-height:1.02}
.h-md{font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.08}
.h-sm{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.15;font-weight:700}
.lede{font-size:clamp(1.02rem,1.35vw,1.2rem);color:var(--ink-2);max-width:60ch}

.eyebrow{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--pom);display:inline-flex;align-items:center;gap:.6rem;font-weight:500;
}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--pom);display:block}
.ital{font-style:italic;color:var(--pom)}

/* ---------- buttons ---------- */
.btn{
  --bg-b:var(--ink);--fg-b:var(--bone);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.9rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--bg-b);color:var(--fg-b);
  font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  overflow:hidden;isolation:isolate;transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  will-change:transform;
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--pom);transform:translateY(101%);transition:transform .55s var(--ease);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{box-shadow:0 20px 40px -18px rgba(224,52,75,.65)}
.btn:active{transform:scale(.97)}
.btn--pom{--bg-b:var(--pom);--fg-b:#fff}
.btn--pom::before{background:var(--ink)}
.btn--ghost{--bg-b:transparent;--fg-b:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--ghost:hover{--fg-b:#fff}
.btn--sm{padding:.7rem 1.25rem;font-size:.9rem}
.btn--full{width:100%}
.btn .ic{width:18px;height:18px;flex:0 0 auto}

/* ---------- preloader ---------- */
#pre{
  position:fixed;inset:0;z-index:10000;background:var(--ink);
  display:grid;place-items:center;transition:clip-path 1.1s var(--ease);
  clip-path:inset(0 0 0 0);
}
#pre.gone{clip-path:inset(0 0 100% 0);pointer-events:none}
.pre-in{text-align:center;color:var(--bone)}
.pre-mark{
  width:70px;height:70px;margin:0 auto 1.1rem;border-radius:50%;
  background:var(--pom);position:relative;animation:preBob 1.1s var(--ease) infinite alternate;
}
.pre-mark::after{
  content:'';position:absolute;top:-9px;left:50%;width:22px;height:14px;
  background:var(--bone);border-radius:0 100% 0 100%;transform:rotate(-25deg)
}
@keyframes preBob{from{transform:translateY(0) scale(1)}to{transform:translateY(-14px) scale(1.05)}}
.pre-in b{font-family:var(--f-display);font-size:1.4rem;letter-spacing:-.02em;display:block}
.pre-bar{width:150px;height:2px;background:rgba(244,246,239,.2);margin:1rem auto 0;overflow:hidden;border-radius:2px}
.pre-bar i{display:block;height:100%;width:0;background:var(--pom);animation:preBar 1.5s var(--ease) forwards}
@keyframes preBar{to{width:100%}}

/* ---------- cursor ---------- */
.cur{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
.cur-d{width:7px;height:7px;background:#fff;transform:translate(-50%,-50%)}
.cur-r{width:38px;height:38px;border:1.5px solid rgba(255,255,255,.6);transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s}
body.hot .cur-r{width:62px;height:62px;background:rgba(255,255,255,.12)}
@media (hover:none),(pointer:coarse){.cur{display:none!important}}

/* ---------- announcement + header ---------- */
.ann{background:var(--ink);color:var(--bone);font-family:var(--f-mono);
  font-size:.74rem;letter-spacing:.05em;padding:.5rem 0;overflow:hidden}
.ann-t{display:flex;width:max-content;animation:slide 38s linear infinite}
.ann-t span{white-space:nowrap;padding-right:2.5rem}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.hdr{position:sticky;top:0;z-index:900;transition:transform .5s var(--ease),background .4s,box-shadow .4s}
.hdr.hide{transform:translateY(-105%)}
.hdr.stuck{background:rgba(236,239,229,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.logo{display:flex;align-items:center;gap:.65rem;font-family:var(--f-display);font-weight:800;
  font-size:1.28rem;letter-spacing:-.03em;flex:0 0 auto}
.logo-m{width:34px;height:34px;border-radius:50%;background:var(--pom);position:relative;flex:0 0 auto;
  transition:transform .6s var(--ease)}
.logo-m::after{content:'';position:absolute;top:-5px;left:52%;width:12px;height:8px;
  background:var(--ink);border-radius:0 100% 0 100%;transform:rotate(-25deg)}
.logo:hover .logo-m{transform:rotate(-18deg) scale(1.1)}
.logo small{display:block;font-family:var(--f-mono);font-size:.55rem;letter-spacing:.2em;
  color:var(--ink-3);font-weight:400;margin-top:-3px;text-transform:uppercase}

.menu{display:flex;align-items:center;gap:2rem;list-style:none}
.menu a{font-weight:600;font-size:.95rem;position:relative;padding:.3rem 0;color:var(--ink-2)}
.menu a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--pom);
  transition:width .4s var(--ease)}
.menu a:hover,.menu a.on{color:var(--ink)}
.menu a:hover::after,.menu a.on::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:.7rem;flex:0 0 auto}
.burger{display:none;width:44px;height:44px;border:0;background:var(--ink);color:var(--bone);
  border-radius:50%;cursor:pointer;place-items:center}
.burger i{display:block;width:16px;height:1.6px;background:currentColor;position:relative;transition:.35s var(--ease)}
.burger i::before,.burger i::after{content:'';position:absolute;left:0;width:16px;height:1.6px;
  background:currentColor;transition:.35s var(--ease)}
.burger i::before{top:-5px}.burger i::after{top:5px}
body.open .burger i{background:transparent}
body.open .burger i::before{top:0;transform:rotate(45deg)}
body.open .burger i::after{top:0;transform:rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:899;background:var(--ink);color:var(--bone);
  clip-path:circle(0 at calc(100% - 46px) 60px);transition:clip-path .8s var(--ease);
  display:grid;place-items:center;
}
body.open .drawer{clip-path:circle(150% at calc(100% - 46px) 60px)}
.drawer ul{list-style:none;text-align:center}
.drawer li{overflow:hidden}
.drawer a{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,9vw,3.2rem);
  letter-spacing:-.03em;display:block;padding:.28rem 0;transform:translateY(110%);
  transition:transform .7s var(--ease),color .3s}
body.open .drawer a{transform:translateY(0)}
.drawer li:nth-child(1) a{transition-delay:.14s}
.drawer li:nth-child(2) a{transition-delay:.2s}
.drawer li:nth-child(3) a{transition-delay:.26s}
.drawer li:nth-child(4) a{transition-delay:.32s}
.drawer li:nth-child(5) a{transition-delay:.38s}
.drawer a:hover{color:var(--pom)}
.drawer .d-foot{margin-top:2rem;font-family:var(--f-mono);font-size:.75rem;color:rgba(244,246,239,.5);
  letter-spacing:.1em;text-align:center}

/* ==========================================================================
   HERO — the signature: real fruit photographs in slow zero-gravity orbit
   ========================================================================== */
.hero{position:relative;min-height:calc(100svh - var(--nav-h));display:flex;align-items:center;
  padding:4rem 0 5rem;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-bg .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.hero-bg .b1{width:46vw;height:46vw;background:#D9E3C8;top:-14%;right:-8%;animation:drift 22s ease-in-out infinite}
.hero-bg .b2{width:34vw;height:34vw;background:#F5D6D9;bottom:-12%;left:-6%;animation:drift 27s ease-in-out infinite reverse}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(3.5vw,-3vw) scale(1.09)}
  66%{transform:translate(-3vw,2.5vw) scale(.95)}
}
.hero-ring{position:absolute;top:50%;left:50%;width:min(78vw,880px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;border:1px dashed var(--line);
  animation:spin 60s linear infinite;z-index:0}
.hero-ring::after{content:'';position:absolute;inset:11%;border-radius:50%;border:1px dashed var(--line-2)}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.hero-in{position:relative;z-index:2;text-align:center;max-width:900px;margin-inline:auto}
.hero .eyebrow{justify-content:center;margin-bottom:1.5rem}
.hero .eyebrow::before{display:none}

/* headline: each word rises out of a mask */
.rise{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.rise > span{display:inline-block;transform:translateY(115%);
  animation:riseUp 1.05s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes riseUp{to{transform:translateY(0)}}
.hero h1{margin-bottom:1.6rem}
.hero h1 .w2{color:var(--pom);font-style:italic}
.hero-sub{margin:0 auto 2.2rem;max-width:56ch;color:var(--ink-2);opacity:0;
  animation:fadeUp .9s var(--ease) .75s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.hero-btns{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;opacity:0;
  animation:fadeUp .9s var(--ease) .9s forwards}

/* the floating fruit photographs */
.orbit{position:absolute;inset:0;z-index:1;pointer-events:none}
.fruit{position:absolute;opacity:0;will-change:transform;
  animation:fadeInF .8s var(--ease) var(--ad,.5s) forwards}
.fruit i{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--bg-2);
  box-shadow:0 30px 60px -24px rgba(20,38,27,.5),inset 0 0 0 4px rgba(255,255,255,.78);
  animation:bob var(--bt,7s) ease-in-out infinite alternate}
.fruit img{width:100%;height:100%;object-fit:cover}
@keyframes fadeInF{to{opacity:1}}
@keyframes bob{from{transform:translateY(-13px) rotate(-5deg)}to{transform:translateY(13px) rotate(5deg)}}
.f1{width:118px;height:118px;top:12%;left:6%;   --ad:.50s;--bt:6.5s}
.f2{width:88px; height:88px; top:6%;  left:26%; --ad:.62s;--bt:8s}
.f3{width:104px;height:104px;top:14%;right:8%;  --ad:.56s;--bt:7.2s}
.f4{width:74px; height:74px; top:4%;  right:28%;--ad:.70s;--bt:9s}
.f5{width:132px;height:132px;bottom:10%;left:10%;--ad:.66s;--bt:7.6s}
.f6{width:92px; height:92px; bottom:6%;left:31%;--ad:.78s;--bt:8.4s}
.f7{width:120px;height:120px;bottom:11%;right:7%;--ad:.60s;--bt:6.8s}
.f8{width:80px; height:80px; bottom:4%;right:29%;--ad:.84s;--bt:9.4s}
.f9{width:64px; height:64px; top:44%;left:2%;   --ad:.90s;--bt:8.8s}
.f10{width:66px;height:66px; top:47%;right:2%;  --ad:.94s;--bt:7.9s}

.scroll-hint{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;color:var(--ink-3);
  text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.scroll-hint b{display:block;width:1px;height:34px;background:var(--line);position:relative;overflow:hidden}
.scroll-hint b::after{content:'';position:absolute;inset:0;background:var(--pom);
  animation:sc 1.8s var(--ease) infinite}
@keyframes sc{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- marquee ---------- */
.mq{background:var(--ink);color:var(--bone);padding:1.1rem 0;overflow:hidden;
  border-block:1px solid rgba(244,246,239,.1)}
.mq-t{display:flex;width:max-content;animation:slide 40s linear infinite}
.mq:hover .mq-t{animation-play-state:paused}
.mq-t span{font-family:var(--f-display);font-weight:700;font-size:clamp(1.2rem,2.3vw,1.8rem);
  letter-spacing:-.02em;padding:0 1.4rem;display:flex;align-items:center;gap:1.4rem;white-space:nowrap}
.mq-t span::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--pom);flex:0 0 auto}
.mq-t span:nth-child(even){color:transparent;-webkit-text-stroke:1px rgba(244,246,239,.55)}

/* ---------- sections ---------- */
.sec{padding:clamp(4.5rem,9vw,8rem) 0;position:relative}
.sec--ink{background:var(--ink);color:var(--bone)}
.sec--ink .lede,.sec--ink .h-sm{color:rgba(244,246,239,.72)}
.sec--ink .h-lg,.sec--ink .h-md{color:var(--bone)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;
  margin-bottom:3.2rem;flex-wrap:wrap}
.sec-head .lede{margin-top:.9rem}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.4s}.rv-d6{transition-delay:.48s}
.rv-d7{transition-delay:.56s}.rv-d8{transition-delay:.64s}

/* ---------- why cards ---------- */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem}
.why-c{background:var(--surface);border-radius:var(--r-lg);padding:2rem 1.7rem;
  border:1px solid var(--line-2);transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.why-c:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.why-c .n{font-family:var(--f-mono);font-size:.72rem;color:var(--pom);letter-spacing:.16em;
  display:block;margin-bottom:1.4rem}
.why-c h3{font-family:var(--f-display);font-size:1.28rem;font-weight:700;letter-spacing:-.02em;
  margin-bottom:.55rem}
.why-c p{font-size:.95rem;color:var(--ink-2)}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:1.4rem}
.card{
  background:var(--surface);border-radius:var(--r-lg);overflow:hidden;position:relative;
  border:1px solid var(--line-2);display:flex;flex-direction:column;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);
  transform-style:preserve-3d;will-change:transform;
}
.card:hover{box-shadow:var(--shadow-lg)}
.card-img{position:relative;aspect-ratio:1;overflow:hidden;background:var(--bg-2)}
.card-img img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease),filter .6s}
.card:hover .card-img img{transform:scale(1.09)}
.card-badge{position:absolute;top:.85rem;left:.85rem;z-index:2;background:var(--ink);color:var(--bone);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.32rem .65rem;border-radius:999px}
.card-cat{position:absolute;top:.85rem;right:.85rem;z-index:2;background:rgba(255,255,255,.92);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;padding:.32rem .6rem;border-radius:999px;
  color:var(--ink-2)}
.card-b{padding:1.2rem 1.25rem 1.35rem;display:flex;flex-direction:column;flex:1}
.card-b h3{font-family:var(--f-display);font-size:1.18rem;font-weight:700;letter-spacing:-.02em;
  line-height:1.2;margin-bottom:.4rem}
.card-b p{font-size:.86rem;color:var(--ink-3);line-height:1.55;margin-bottom:1.05rem;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-add{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;
  background:var(--bg);border:0;border-radius:999px;padding:.62rem .62rem .62rem 1.05rem;cursor:pointer;
  font-family:var(--f-display);font-weight:700;font-size:.88rem;
  transition:background .4s var(--ease),color .4s var(--ease)}
.card-add em{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--bone);
  display:grid;place-items:center;font-style:normal;font-size:1.1rem;line-height:1;flex:0 0 auto;
  transition:background .4s,transform .4s var(--ease)}
.card-add:hover{background:var(--pom);color:#fff}
.card-add:hover em{background:#fff;color:var(--pom);transform:rotate(90deg)}
.card.is-added .card-add{background:var(--ink);color:var(--bone)}

.more-wrap{display:flex;justify-content:center;margin-top:3rem}

/* filters */
.filters{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:1.4rem}
.chip{border:1.5px solid var(--line);background:transparent;border-radius:999px;
  padding:.5rem 1.05rem;cursor:pointer;font-size:.87rem;font-weight:600;color:var(--ink-2);
  transition:.35s var(--ease)}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.chip span{font-family:var(--f-mono);font-size:.7rem;opacity:.55;margin-left:.35rem}
.searchbar{position:relative;margin-bottom:2.4rem;max-width:460px}
.searchbar input{width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:.95rem 1.3rem .95rem 3rem;font-size:.95rem;transition:.35s}
.searchbar input:focus{border-color:var(--ink);outline:none}
.searchbar svg{position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--ink-3)}
.empty{text-align:center;padding:4rem 1rem;color:var(--ink-3);font-family:var(--f-mono);font-size:.9rem}

/* ---------- promise band ---------- */
.promise{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.promise-list{list-style:none;margin-top:2rem}
.promise-list li{display:flex;gap:1rem;padding:1.15rem 0;border-top:1px solid rgba(244,246,239,.14);
  align-items:flex-start}
.promise-list li:last-child{border-bottom:1px solid rgba(244,246,239,.14)}
.promise-list b{font-family:var(--f-display);font-size:1.05rem;display:block;margin-bottom:.15rem;
  color:var(--bone);font-weight:700}
.promise-list span{font-size:.9rem;color:rgba(244,246,239,.6);display:block}
.promise-list em{font-family:var(--f-mono);font-style:normal;color:var(--pom);font-size:.8rem;
  flex:0 0 auto;padding-top:.3rem}
.promise-vis{position:relative;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#22402D,#0D1A13);display:grid;place-items:center;
  box-shadow:inset 0 0 80px rgba(0,0,0,.5)}
.promise-vis .ring{position:absolute;inset:8%;border:1px dashed rgba(244,246,239,.16);border-radius:50%;
  animation:spin 40s linear infinite}
.promise-vis .ring:nth-child(2){inset:20%;animation-duration:28s;animation-direction:reverse}
.promise-vis .pv-img{width:56%;aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;z-index:2;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7),inset 0 0 0 5px rgba(244,246,239,.9)}
.promise-vis .pv-img img{width:100%;height:100%;object-fit:cover}
.promise-vis .tag{position:absolute;z-index:3;background:var(--bone);color:var(--ink);
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;padding:.45rem .8rem;border-radius:999px;
  white-space:nowrap;box-shadow:var(--shadow)}
.promise-vis .t1{top:9%;left:2%;animation:bob 6s ease-in-out infinite alternate}
.promise-vis .t2{bottom:14%;right:0;animation:bob 7.5s ease-in-out infinite alternate-reverse}
.promise-vis .t3{bottom:4%;left:16%;animation:bob 8.5s ease-in-out infinite alternate}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
.stat b{font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,5.5vw,4rem);
  letter-spacing:-.04em;display:block;line-height:1;color:var(--ink)}
.stat b i{font-style:normal;color:var(--pom)}
.stat span{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-top:.6rem;display:block}

/* ---------- team ---------- */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.3rem}
.tm{background:var(--surface);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.tm:hover{transform:translateY(-9px);box-shadow:var(--shadow)}
.tm-ph{aspect-ratio:4/5;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--bg-2),#D3DCC3);display:grid;place-items:center}
.tm-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.tm:hover .tm-ph img{transform:scale(1.06)}
.tm-ini{font-family:var(--f-display);font-weight:800;font-size:3.4rem;color:rgba(20,38,27,.22);
  letter-spacing:-.04em}
.tm-ph::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(20,38,27,.5),transparent 55%);
  opacity:0;transition:opacity .6s}
.tm:hover .tm-ph::after{opacity:1}
.tm-b{padding:1.2rem 1.3rem 1.5rem}
.tm-b h3{font-family:var(--f-display);font-size:1.15rem;font-weight:700;letter-spacing:-.02em}
.tm-b .role{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pom);margin:.25rem 0 .7rem;display:block}
.tm-b p{font-size:.87rem;color:var(--ink-3);line-height:1.55}

/* ---------- timeline ---------- */
.tl{list-style:none;position:relative;padding-left:2.2rem}
.tl::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:1px;background:var(--line)}
.tl li{position:relative;padding-bottom:2.2rem}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:'';position:absolute;left:-2.2rem;top:7px;width:13px;height:13px;border-radius:50%;
  background:var(--bg);border:2px solid var(--pom)}
.tl h4{font-family:var(--f-display);font-size:1.15rem;font-weight:700;margin-bottom:.25rem}
.tl .yr{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;color:var(--pom);display:block;
  margin-bottom:.3rem}
.tl p{font-size:.93rem;color:var(--ink-2)}

/* ---------- testimonials ---------- */
.tst{position:relative;max-width:820px;margin-inline:auto;text-align:center;min-height:250px}
.tq{position:absolute;inset:0;opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);pointer-events:none}
.tq.on{opacity:1;transform:none;position:relative;pointer-events:auto}
.tq p{font-family:var(--f-display);font-weight:600;font-size:clamp(1.25rem,2.7vw,1.95rem);
  line-height:1.35;letter-spacing:-.02em;margin-bottom:1.5rem}
.tq .who{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}
.tq .who b{color:var(--pom);font-weight:500}
.tdots{display:flex;gap:.5rem;justify-content:center;margin-top:2.2rem}
.tdots button{width:8px;height:8px;border-radius:50%;border:0;background:var(--line);cursor:pointer;
  padding:0;transition:.4s var(--ease)}
.tdots button.on{background:var(--pom);width:26px;border-radius:999px}

/* ---------- blog ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.4rem}
.post{background:var(--surface);border-radius:var(--r-lg);padding:1.9rem;border:1px solid var(--line-2);
  display:flex;flex-direction:column;transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.post:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.post .dt{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;color:var(--pom);
  text-transform:uppercase;margin-bottom:1rem}
.post h3{font-family:var(--f-display);font-size:1.3rem;font-weight:700;letter-spacing:-.02em;
  line-height:1.2;margin-bottom:.6rem}
.post p{font-size:.9rem;color:var(--ink-3);flex:1;margin-bottom:1.3rem}
.post .rd{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.45rem;transition:gap .35s var(--ease)}
.post:hover .rd{gap:.9rem;color:var(--pom)}

.article{max-width:720px;margin-inline:auto}
.article p{margin-bottom:1.15rem;color:var(--ink-2);font-size:1.05rem}
.article strong{color:var(--ink);font-weight:700}

/* ---------- contact ---------- */
.ct{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,4vw,4rem);align-items:start}
.info{display:grid;gap:.9rem}
.info-c{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:1.4rem 1.5rem;
  display:flex;gap:1rem;align-items:flex-start;transition:transform .5s var(--ease)}
.info-c:hover{transform:translateX(6px)}
.info-c .ic{width:38px;height:38px;border-radius:50%;background:var(--bg);display:grid;place-items:center;
  flex:0 0 auto;color:var(--pom)}
.info-c b{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:.25rem;font-weight:500}
.info-c span{font-weight:600;line-height:1.45;display:block}
.form{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:2rem}
.fg{margin-bottom:1.1rem}
.fg label{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:.45rem}
.fg input,.fg textarea,.fg select{width:100%;background:var(--bg);border:1px solid transparent;
  border-radius:var(--r-sm);padding:.85rem 1rem;font-size:16px;transition:.3s}
.fg textarea{min-height:120px;resize:vertical}
.fg input:focus,.fg textarea:focus,.fg select:focus{outline:none;border-color:var(--ink);background:var(--surface)}
.map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);height:340px;
  filter:grayscale(1) contrast(1.05);transition:filter .6s}
.map:hover{filter:none}
.map iframe{width:100%;height:100%;border:0;display:block}
.note{padding:.9rem 1.1rem;border-radius:var(--r-sm);font-size:.9rem;margin-bottom:1.2rem}
.note.ok{background:rgba(20,38,27,.06);color:var(--ink)}
.note.err{background:rgba(224,52,75,.1);color:var(--pom-dk)}

/* ---------- CTA band ---------- */
.cta-band{text-align:center;position:relative;overflow:hidden}
.cta-band .h-lg{max-width:16ch;margin:0 auto 1.2rem}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:rgba(244,246,239,.62);padding:4.5rem 0 2rem}
.ftr-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:2.5rem;padding-bottom:3rem;
  border-bottom:1px solid rgba(244,246,239,.12)}
.ftr .logo{color:var(--bone);margin-bottom:1rem}
.ftr .logo-m::after{background:var(--ink)}
.ftr h4{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone);margin-bottom:1.1rem;font-weight:500}
.ftr ul{list-style:none}
.ftr li{margin-bottom:.6rem}
.ftr a{font-size:.93rem;transition:color .3s,padding-left .3s var(--ease)}
.ftr a:hover{color:var(--pom);padding-left:5px}
.ftr p{font-size:.93rem;line-height:1.7}
.ftr-b{padding-top:1.6rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em}

/* ---------- floating actions ---------- */
.fabs{position:fixed;right:16px;bottom:16px;z-index:880;display:flex;flex-direction:column;gap:10px;
  align-items:flex-end}
.fab{
  width:50px;height:50px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 12px 30px -10px rgba(20,38,27,.5);transition:transform .45s var(--ease);position:relative;
}
.fab:hover{transform:scale(1.09)}
.fab svg{width:23px;height:23px}
.fab--wa{background:#25D366;color:#fff}
.fab--cart{background:var(--ink);color:var(--bone);opacity:0;pointer-events:none;transform:scale(.5)}
.fab--cart.show{opacity:1;pointer-events:auto;transform:scale(1)}
.fab--cart b{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;border-radius:999px;
  background:var(--pom);color:#fff;font-family:var(--f-mono);font-size:.66rem;display:grid;place-items:center;
  padding:0 5px}
.fab--top{background:var(--surface);color:var(--ink);border:1px solid var(--line);
  opacity:0;pointer-events:none;transform:scale(.5)}
.fab--top.show{opacity:1;pointer-events:auto;transform:scale(1)}
.fab--wa::after{
  content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.65);opacity:0}}

/* ---------- cart drawer ---------- */
.cart{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--bg);z-index:960;
  transform:translateX(101%);transition:transform .6s var(--ease);display:flex;flex-direction:column;
  box-shadow:-30px 0 80px -30px rgba(20,38,27,.4)}
.cart.open{transform:none}
.cart-scrim{position:fixed;inset:0;background:rgba(20,38,27,.5);backdrop-filter:blur(3px);z-index:950;
  opacity:0;pointer-events:none;transition:opacity .5s}
.cart-scrim.open{opacity:1;pointer-events:auto}
.cart-h{padding:1.5rem 1.5rem 1rem;display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--line)}
.cart-h h3{font-family:var(--f-display);font-size:1.35rem;font-weight:800;letter-spacing:-.02em}
.cart-x{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;
  cursor:pointer;display:grid;place-items:center;transition:.35s}
.cart-x:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.cart-body{flex:1;overflow-y:auto;padding:1.2rem 1.5rem}
.cart-empty{text-align:center;padding:3.5rem 1rem;color:var(--ink-3)}
.cart-empty svg{width:44px;height:44px;margin:0 auto 1rem;opacity:.35}
.ci{display:flex;gap:.9rem;align-items:center;padding:.85rem 0;border-bottom:1px solid var(--line-2)}
.ci-img{width:56px;height:56px;border-radius:14px;overflow:hidden;flex:0 0 auto;background:var(--bg-2)}
.ci-img img{width:100%;height:100%;object-fit:cover}
.ci-t{flex:1;min-width:0}
.ci-t b{font-family:var(--f-display);font-size:.98rem;font-weight:700;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-t span{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3)}
.qty{display:flex;align-items:center;gap:.15rem;background:var(--surface);border-radius:999px;
  padding:.2rem;border:1px solid var(--line-2)}
.qty button{width:26px;height:26px;border-radius:50%;border:0;background:transparent;cursor:pointer;
  font-size:1rem;line-height:1;display:grid;place-items:center;transition:.25s}
.qty button:hover{background:var(--ink);color:var(--bone)}
.qty i{font-family:var(--f-mono);font-style:normal;font-size:.75rem;min-width:40px;text-align:center}
.cart-f{padding:1.2rem 1.5rem 1.5rem;border-top:1px solid var(--line);background:var(--bg)}
.cart-f .hint{font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3);text-align:center;
  margin-top:.8rem;letter-spacing:.04em}
.cart-f .fg{margin-bottom:.7rem}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,150%);z-index:990;
  background:var(--ink);color:var(--bone);padding:.85rem 1.4rem;border-radius:999px;
  font-family:var(--f-display);font-weight:600;font-size:.92rem;box-shadow:var(--shadow-lg);
  transition:transform .55s var(--ease);display:flex;align-items:center;gap:.6rem;white-space:nowrap;
  max-width:calc(100vw - 32px)}
.toast.show{transform:translate(-50%,0)}
.toast em{width:8px;height:8px;border-radius:50%;background:var(--pom);flex:0 0 auto}

/* ---------- page transition ---------- */
.wipe{position:fixed;inset:0;z-index:9990;background:var(--ink);pointer-events:none;
  transform:translateY(100%);}
.wipe.go{animation:wipeUp .85s var(--ease) forwards}
@keyframes wipeUp{0%{transform:translateY(100%)}100%{transform:translateY(0)}}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .promise{grid-template-columns:1fr}
  .promise-vis{max-width:420px;margin-inline:auto;order:-1}
  .ct{grid-template-columns:1fr}
  .ftr-g{grid-template-columns:1fr 1fr;gap:2rem}
}
@media (max-width:860px){
  .menu{display:none}
  .burger{display:grid}
  .nav-cta .btn{display:none}
  .f2,.f4,.f6,.f8,.f9,.f10{display:none}
  .f1{width:74px;height:74px;top:5%;left:2%}
  .f3{width:66px;height:66px;top:4%;right:3%}
  .f5{width:84px;height:84px;bottom:5%;left:1%}
  .f7{width:72px;height:72px;bottom:6%;right:2%}
  .hero{min-height:auto;padding:3rem 0 4.5rem}
  .stats{grid-template-columns:1fr 1fr;gap:2rem 1rem}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem}
  .card-b{padding:.9rem 1rem 1.05rem}
  .card-b h3{font-size:1rem}
  .card-b p{font-size:.78rem;-webkit-line-clamp:2;margin-bottom:.8rem}
  .card-add{padding:.5rem .5rem .5rem .85rem;font-size:.8rem}
  .card-add em{width:26px;height:26px;font-size:.95rem}
  .card-badge{font-size:.55rem;padding:.25rem .5rem;top:.6rem;left:.6rem}
  .card-cat{display:none}
  .sec-head{margin-bottom:2.2rem}
  .fabs{right:12px;bottom:12px}
  .fab{width:46px;height:46px}
  .fab svg{width:21px;height:21px}
  .tst{min-height:300px}
}
@media (max-width:640px){
  .wrap{width:min(100% - 30px,var(--wrap))}
  .ftr-g{grid-template-columns:1fr}
  .ftr-b{flex-direction:column;text-align:center}
  .hero .eyebrow{font-size:.62rem}
  .toast{font-size:.82rem;padding:.7rem 1.1rem}
  .form{padding:1.4rem}
  .cart{width:100%}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .rise > span{transform:none}
  .hero-sub,.hero-btns{opacity:1}
  .fruit{opacity:1}
  .cur{display:none}
}