:root{
  --cream:#FBF4ED; --paper:#FFFDFA; --ink:#231F20; --stone:#6E6660;
  --coral:#F58466; --coral-deep:#D85C40; --mint:#B6DBB6; --mint-soft:#E6F1E6;
  --line:rgba(35,31,32,.10); --shadow:0 10px 30px rgba(35,31,32,.10);
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%;}
h1,h2,h3{font-family:'Fraunces',Georgia,serif; line-height:1.08; font-weight:600;}
a{color:inherit;}

.btn{
  display:inline-block; font-weight:700; font-size:.98rem; text-decoration:none;
  padding:.85em 1.5em; border-radius:999px; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  cursor:pointer; border:2px solid transparent; white-space:nowrap;
}
.btn--primary{background:var(--coral-deep); color:#fff; box-shadow:0 8px 20px rgba(216,92,64,.28);}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(216,92,64,.36);}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn--ghost:hover{background:var(--ink); color:var(--cream);}

/* header */
.nav{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem clamp(1rem,4vw,2.5rem);
  background:rgba(251,244,237,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.nav__logo img{height:38px; width:auto;}
.nav__right{display:flex; align-items:center; gap:1rem;}
.halal-pill{
  display:inline-flex; align-items:center; gap:.5em; font-size:.82rem; font-weight:700; color:var(--ink);
  background:var(--mint-soft); padding:.4em .85em; border-radius:999px;
}
.halal-pill img{height:20px; width:20px;}
@media (max-width:720px){ .halal-pill{display:none;} .nav__logo img{height:32px;} }

/* hero */
.hero{
  max-width:var(--maxw); margin:0 auto; padding:clamp(2rem,6vw,4.5rem) clamp(1rem,4vw,2.5rem) 2rem;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
}
.hero__title{font-size:clamp(2.4rem,5.4vw,4.2rem); letter-spacing:-1px;}
.hero__intro{margin-top:1.2rem; font-size:1.12rem; color:var(--stone); max-width:36ch;}
.hero__actions{margin-top:1.7rem; display:flex; flex-wrap:wrap; gap:.8rem;}
.hero__certs{margin-top:1.6rem; display:flex; align-items:center; gap:.9rem; font-size:.86rem; color:var(--stone);}
.hero__certs img{height:46px; width:auto;}
.hero__certs span{line-height:1.35;}
.hero__collage{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.hero__collage img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:18px; box-shadow:var(--shadow);}
.hero__collage img:nth-child(1){border-top-left-radius:46px;}
.hero__collage img:nth-child(4){border-bottom-right-radius:46px;}
@media (max-width:860px){ .hero{grid-template-columns:1fr;} .hero__collage{order:-1;} }

/* category nav */
.catnav{
  position:sticky; top:54px; z-index:40; display:flex; gap:.5rem; overflow-x:auto;
  padding:.7rem clamp(1rem,4vw,2.5rem); background:rgba(251,244,237,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); scrollbar-width:none;
}
.catnav::-webkit-scrollbar{display:none;}
.catnav a{
  flex:0 0 auto; font-size:.86rem; font-weight:600; color:var(--stone); text-decoration:none;
  padding:.45em .9em; border-radius:999px; border:1px solid var(--line); background:var(--paper); white-space:nowrap;
}
.catnav a:hover{color:var(--ink); border-color:var(--ink);}

/* catalogue */
main{max-width:var(--maxw); margin:0 auto; padding:1.5rem clamp(1rem,4vw,2.5rem) 1rem;}
.cat{padding:2.2rem 0 1rem; scroll-margin-top:120px;}
.cat__head{margin-bottom:1.3rem;}
.cat__head h2{font-size:clamp(1.7rem,3.2vw,2.3rem);}
.cat__head p{color:var(--stone); margin-top:.35rem; max-width:60ch;}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:18px;}

.card{
  background:var(--paper); border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
  transition:transform .16s ease, box-shadow .16s ease; display:flex; flex-direction:column;
}
.card:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(35,31,32,.15);}
.card__imgwrap{position:relative; aspect-ratio:4/3; background:linear-gradient(135deg,#F3E9DC,#FBF4ED);}
.card__imgwrap img{width:100%; height:100%; object-fit:cover;}
.card__ph{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; color:#C9A98C; text-align:center; padding:1rem;
}
.card__ph svg{width:42px; height:42px; opacity:.7;}
.card__ph span{font-size:.74rem; font-weight:600; letter-spacing:.3px; color:#B7977C;}
.card__body{padding:.95rem 1.05rem 1.15rem; display:flex; flex-direction:column; gap:.35rem;}
.card__brand{
  align-self:flex-start; font-size:.66rem; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  color:var(--coral-deep); background:rgba(245,132,102,.13); padding:.25em .6em; border-radius:999px;
}
.card__logo{align-self:flex-start; height:30px; max-width:140px; width:auto; object-fit:contain;}
.card__name{font-family:'Fraunces',serif; font-weight:600; font-size:1.08rem;}
.card__desc{font-size:.88rem; color:var(--stone);}

/* category header + mobile collapsible accordion */
.cat__headrow{display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.cat__count{font-family:'Inter',sans-serif; font-size:.78rem; font-weight:700; color:var(--coral-deep); background:rgba(245,132,102,.14); padding:.12em .62em; border-radius:999px; vertical-align:middle;}
.cat__toggle{display:none;}

@media (max-width:760px){
  .grid{grid-template-columns:repeat(2,1fr); gap:12px;}
  .card__name{font-size:1rem;}
  .card__desc{font-size:.82rem;}
  .cat{padding:0; scroll-margin-top:108px; border-bottom:1px solid var(--line);}
  .cat__head{cursor:pointer; -webkit-tap-highlight-color:transparent; padding:1.05rem 0; margin:0;}
  .cat__head h2{font-size:1.35rem;}
  .cat__toggle{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--ink); transition:transform .2s ease; flex:0 0 auto;}
  .cat__toggle::before{content:"\2304"; font-size:1.5rem; line-height:1; margin-top:-7px;}
  .cat.cat--open .cat__toggle{transform:rotate(180deg);}
  .cat.cat--open .cat__toggle::before{margin-top:5px;}
  .cat .grid{display:none; padding-bottom:1.3rem;}
  .cat.cat--open .grid{display:grid;}
  .cat .cat__blurb{display:none;}
  .cat.cat--open .cat__blurb{display:block; margin-bottom:1rem;}
}

/* story / transformation */
.story{
  background:linear-gradient(180deg, var(--mint-soft) 0%, var(--cream) 55%);
  margin-top:2.5rem; padding:clamp(2.4rem,6vw,4rem) 0; overflow:hidden;
}
.story__inner{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,4vw,2.5rem);}
.story__eyebrow{
  font-size:.8rem; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--coral-deep); margin-bottom:.5rem;
}
.story__title{font-size:clamp(2.1rem,5vw,3.4rem); letter-spacing:-.5px;}
.story__title .hl{position:relative; white-space:nowrap; color:var(--coral-deep);}
.story__title .hl::after{
  content:""; position:absolute; left:-4px; right:-4px; bottom:.06em; height:.32em; z-index:-1;
  background:var(--mint); border-radius:4px; transform:rotate(-1.2deg);
}
.story__lead{margin-top:1rem; font-size:1.12rem; color:var(--stone); max-width:62ch;}
.story__lead strong{color:var(--ink);}

/* before / after drag-to-compare */
.ba{
  position:relative; margin:clamp(1.4rem,4vw,2.2rem) 0; border-radius:22px; overflow:hidden;
  box-shadow:var(--shadow); aspect-ratio:16/10; background:#000; user-select:none; touch-action:none;
}
.ba img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none;}
.ba__after{clip-path:inset(0 0 0 var(--pos));}
.ba__tag{
  position:absolute; bottom:14px; z-index:3; font-size:.8rem; font-weight:800; letter-spacing:.3px;
  padding:.4em .85em; border-radius:999px; background:rgba(35,31,32,.7); color:#fff; backdrop-filter:blur(4px);
}
.ba__tag--before{left:14px;}
.ba__tag--after{right:14px; background:rgba(216,92,64,.88);}
.ba__divider{
  position:absolute; top:0; bottom:0; left:var(--pos); width:3px; background:#fff; z-index:4;
  transform:translateX(-50%); box-shadow:0 0 0 1px rgba(0,0,0,.12); pointer-events:none;
}
.ba__grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:999px; background:#fff; color:var(--coral-deep);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.ba__range{
  position:absolute; inset:0; width:100%; height:100%; margin:0; z-index:5; cursor:ew-resize;
  opacity:0; -webkit-appearance:none; appearance:none; background:transparent;
}
.ba__range::-webkit-slider-thumb{-webkit-appearance:none; width:48px; height:100%; cursor:ew-resize;}
.ba__range::-moz-range-thumb{width:48px; height:100%; border:0; background:transparent; cursor:ew-resize;}

/* value points */
.story__values{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:.4rem;}
.value{background:var(--paper); border-radius:18px; padding:1.4rem 1.5rem; box-shadow:var(--shadow); transition:transform .16s ease;}
.value:hover{transform:translateY(-4px);}
.value__mark{font-family:'Fraunces',serif; font-size:1.6rem; color:var(--coral); display:block; line-height:1; margin-bottom:.4rem;}
.value b{font-family:'Fraunces',serif; font-weight:600; font-size:1.2rem; display:block; margin-bottom:.35rem;}
.value p{color:var(--stone); font-size:.95rem;}
@media (max-width:760px){ .story__values{grid-template-columns:1fr;} }

/* UGC "in the wild" polaroid wall */
.ugc__title{font-size:clamp(1.4rem,3vw,2rem); margin-top:2.4rem;}
.ugc__hand{font-family:'Caveat',cursive; color:var(--coral-deep); font-size:1.35em; font-weight:700; margin-left:.25em;}
.ugc{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:clamp(.8rem,2.5vw,1.6rem); max-width:var(--maxw); margin:1.2rem auto 0; padding:1rem clamp(1rem,4vw,2.5rem);
}
.pola{
  background:#fff; padding:12px 12px 0; border-radius:4px; box-shadow:0 12px 26px rgba(35,31,32,.16);
  transform:rotate(var(--r)); transition:transform .18s ease, box-shadow .18s ease;
  width:clamp(148px,21vw,228px);
}
.pola:hover{transform:rotate(0deg) translateY(-6px) scale(1.03); box-shadow:0 20px 38px rgba(35,31,32,.24); z-index:2; position:relative;}
.pola img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px;}
.pola figcaption{font-family:'Caveat',cursive; font-size:1.35rem; line-height:1.1; text-align:center; padding:.45em .2em .55em; color:var(--ink);}

.story__proof{margin-top:2rem; text-align:center; color:var(--stone); font-size:1.05rem;}

/* hero playful real-photo sticker */
.hero__collage{position:relative;}
.hero__sticker{
  position:absolute; left:-20px; bottom:-28px; width:170px; z-index:3;
  background:#fff; padding:9px 9px 0; border-radius:4px; transform:rotate(-7deg);
  box-shadow:0 14px 30px rgba(35,31,32,.22);
}
.hero__sticker img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px;}
.hero__sticker figcaption{font-family:'Caveat',cursive; font-weight:700; text-align:center; font-size:1.15rem; color:var(--coral-deep); padding:.2em 0 .4em;}
@media (max-width:860px){ .hero__sticker{display:none;} }

/* CTA */
.cta{background:var(--mint-soft); margin-top:2.5rem;}
.cta__inner{
  max-width:var(--maxw); margin:0 auto; padding:clamp(2.4rem,5vw,3.8rem) clamp(1rem,4vw,2.5rem);
  text-align:center;
}
.cta__words{max-width:62ch; margin:0 auto;}
.cta__words h2{font-size:clamp(1.8rem,3.6vw,2.6rem);}
.cta__words p{color:var(--stone); margin:.7rem auto 1.4rem;}
.cta__contact{font-size:.92rem; color:var(--ink) !important; margin-top:1.2rem !important;}

/* about / trust */
.about{max-width:var(--maxw); margin:2.5rem auto 0; padding:1rem clamp(1rem,4vw,2.5rem) 1rem; scroll-margin-top:120px;}
.about__inner{background:var(--paper); border-radius:28px; padding:clamp(1.6rem,4vw,3rem); box-shadow:var(--shadow);}
.about h2{font-size:clamp(1.9rem,4vw,2.7rem);}
.about__lead{margin-top:1rem; font-size:1.08rem; color:var(--stone); max-width:75ch;}
.stats{display:flex; flex-wrap:wrap; gap:.7rem; margin:1.6rem 0 .5rem;}
.stat{background:var(--mint-soft); border-radius:14px; padding:.7rem 1.1rem; min-width:120px;}
.stat b{display:block; font-family:'Fraunces',serif; font-size:1.2rem; color:var(--ink);}
.stat span{font-size:.8rem; color:var(--stone);}
.certs{display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:1.6rem;}
.cert{display:flex; align-items:center; gap:.85rem;}
.cert img{height:58px; width:auto;}
.cert b{display:block; font-size:.95rem;}
.cert span{font-size:.8rem; color:var(--stone);}
.about__sub{margin-top:2.2rem; font-size:1.25rem;}
.about__note{color:var(--stone); font-size:.92rem; margin-top:.2rem;}
.brandstrip{display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem 2rem; margin-top:1rem;}
.brandstrip img{height:46px; width:auto; max-width:130px; object-fit:contain;}
.retailers{display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; margin-top:.9rem;}
.retailers img{height:54px; width:auto; max-width:120px; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 12px;}

/* ===== Cafe supply section ===== */
.cafe{padding:2.5rem clamp(1rem,4vw,2.5rem) 0; max-width:var(--maxw); margin:0 auto; scroll-margin-top:120px;}
.cafe__inner{background:var(--paper); border-radius:28px; padding:clamp(1.6rem,4vw,3rem); box-shadow:var(--shadow);}
.cafe__eyebrow{font-size:.8rem; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--coral-deep); margin-bottom:.5rem;}
.cafe h2{font-size:clamp(1.9rem,4vw,2.7rem); letter-spacing:-.5px;}
.cafe h2 .hl{position:relative; white-space:nowrap; color:var(--coral-deep); z-index:0;}
.cafe h2 .hl::after{content:""; position:absolute; left:-4px; right:-4px; bottom:.06em; height:.32em; z-index:-1; background:var(--mint); border-radius:4px; transform:rotate(-1.2deg);}
.cafe__lead{margin-top:.8rem; color:var(--stone); font-size:1.05rem; max-width:62ch;}
.cafe__cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.5rem;}
.ccard{background:var(--cream); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); transition:transform .16s ease; margin:0;}
.ccard:hover{transform:translateY(-4px);}
.ccard img{width:100%; aspect-ratio:4/3; object-fit:cover;}
.ccard figcaption{padding:1rem 1.15rem 1.2rem;}
.ccard figcaption span{font-size:.7rem; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--coral-deep);}
.ccard figcaption b{display:block; font-family:'Fraunces',serif; font-weight:600; font-size:1.25rem; margin-top:.15rem;}
.ccard figcaption p{font-size:.9rem; color:var(--stone); margin-top:.3rem; line-height:1.5;}
@media (max-width:760px){ .cafe__cards{grid-template-columns:1fr;} }
.cafe__fact{margin-top:1.4rem; background:var(--mint-soft); border-radius:14px; padding:1rem 1.2rem; font-size:1rem;}
.cafe__sub{margin-top:2rem; font-size:1.25rem;}
.cafe__hand{font-family:'Caveat',cursive; color:var(--coral-deep); font-size:1.35em; font-weight:700; margin-left:.25em;}
.cafe__steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.8rem; margin-top:1rem;}
.cstep{background:var(--mint-soft); border-radius:14px; padding:1rem 1.1rem;}
.cstep .value__mark{font-size:1.4rem; margin-bottom:.25rem;}
.cstep b{display:block; font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem;}
.cstep p{margin-top:.25rem; font-size:.88rem; color:var(--stone); line-height:1.45;}
.cafe__actions{margin-top:1.6rem; display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem;}
.cafe__contact{font-size:.92rem; color:var(--stone);}

/* footer */
.foot{background:var(--ink); color:#D8D2CC; margin-top:2.5rem; padding:2.6rem clamp(1rem,4vw,2.5rem) 1.4rem;}
.foot__inner{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1.3fr 1.1fr; gap:2rem;}
.foot__col h4{font-family:'Inter',sans-serif; font-size:.78rem; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#fff; margin-bottom:.7rem;}
.foot__col p{font-size:.88rem; line-height:1.6; margin-bottom:.6rem;}
.foot__col a{color:var(--mint); text-decoration:none;}
.foot__col a:hover{text-decoration:underline;}
.foot__brand img{height:46px; margin-bottom:.8rem;}
.foot__certs{display:flex; gap:.6rem; margin-top:.6rem;}
.foot__certs img{height:40px; width:auto; background:#fff; border-radius:8px; padding:5px;}
.foot__legal{max-width:var(--maxw); margin:1.8rem auto 0; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.14); font-size:.8rem; color:#9A938C;}
@media (max-width:820px){ .foot__inner{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .foot__inner{grid-template-columns:1fr;} }

/* ===== Trust bar (retailer proof under hero) ===== */
.trustbar{max-width:var(--maxw); margin:0 auto; padding:.7rem clamp(1rem,4vw,2.5rem); display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .8rem; font-size:.88rem;}
.trustbar__label{color:var(--stone);}
.trustbar strong{color:var(--ink); letter-spacing:.01em;}

/* ===== Trade section (for retail buyers) ===== */
.trade{padding:2.5rem clamp(1rem,4vw,2.5rem) 0; max-width:var(--maxw); margin:0 auto;}
.trade__inner{background:var(--paper); border-radius:28px; padding:clamp(1.6rem,4vw,3rem); box-shadow:var(--shadow);}
.trade__lead{margin-top:.6rem; color:var(--stone); font-size:1.02rem;}
.trade__facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:.8rem; margin-top:1.5rem;}
.tfact{background:var(--mint-soft); border-radius:14px; padding:1rem 1.1rem;}
.tfact b{display:block; font-family:'Fraunces',serif; font-size:1.08rem; color:var(--ink);}
.tfact p{margin-top:.35rem; font-size:.9rem; color:var(--stone); line-height:1.5;}
.trade__actions{margin-top:1.6rem; display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem;}
.trade__contact{font-size:.92rem; line-height:1.6; color:var(--stone);}
.trade__contact a{color:var(--coral-deep); font-weight:600; text-decoration:none;}
.nav__trade{font-size:.9rem; font-weight:600; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--mint);}
.nav__trade:hover{border-bottom-color:var(--coral-deep);}
@media (max-width:640px){ .nav__trade{display:none;} }
.trade__sub{margin-top:2rem; font-size:1.25rem;}
.trade__note{color:var(--stone); font-size:.92rem; margin-top:.2rem;}
.packshots{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.8rem; margin-top:.9rem;}
.packshots img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; display:block;}