:root{
  --ink:#2B0D0F;
  --ink-soft:#4A1317;
  --rice:#FBF3DC;
  --rice-dim:#F2E5BE;
  --turmeric:#C9A24A;
  --clay:#2F8F4E;
  --millet:#7A4A4C;
  --sage:#C9AE7A;
  --blob:#F3DFC6;
  --blob2:#F6E3B8;
  --blob3:#DCEBD3;
  --hero-green:#6A1519;
  --hero-green-dark:#4A0D10;
  --hero-green-light:#8A2A2F;
  --line: rgba(43,13,15,0.10);
  --line-dark: rgba(43,13,15,0.14);
  --ease: cubic-bezier(0.16,1,0.3,1);
  --serif: 'Poppins', sans-serif;
  --sans: 'Work Sans', sans-serif;
  --mono: 'Work Sans', sans-serif;
  --script: 'Yellowtail', cursive;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:auto;}
body{
  background:var(--rice);
  color:var(--ink);
  font-family:var(--sans);
  overflow-x:hidden;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
body::before{
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>");
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--clay);
  opacity:0.9;
}
.dark-section{background:var(--ink); color:var(--rice);}
.wrap{max-width:1360px; margin:0 auto; padding:0 clamp(16px, 5vw, 80px); position:relative; z-index:2;}


/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; left:0; right:0; z-index:1000;
  padding:14px 6vw;
  display:flex; align-items:center; justify-content:space-between;
  transition:padding .3s var(--ease), box-shadow .3s var(--ease);
  color:var(--ink);
  background:var(--rice);
}
.nav.scrolled{
  padding:11px 6vw;
  box-shadow:0 8px 24px -16px rgba(43,13,15,0.22);
}
.nav-logo{
  font-family:var(--serif); font-weight:800; font-size:19px; letter-spacing:0.01em; color:var(--ink);
  display:flex; align-items:center; gap:10px;
}
.logo-img{height:44px; width:44px; border-radius:50%; object-fit:cover; display:block; border:2px solid var(--turmeric);}
.logo-text{font-family:'Playfair Display', serif; font-weight:700; font-size:20px; color:var(--ink); letter-spacing:0.01em; line-height:1; white-space:nowrap;}
.logo-text .logo-accent{color:var(--clay);}
.foot-logo .logo-img{height:76px; width:76px;}
.foot-logo .logo-text{font-size:32px; font-weight:700; white-space:normal;}
.foot-brand{min-width:0;}
@media(max-width:1024px){.foot-logo .logo-text{font-size:26px;}}
.nav-links{display:flex; gap:34px; list-style:none;}
.nav-links a{
  font-size:13.5px; font-weight:500; letter-spacing:0.02em; color:var(--ink); opacity:0.75; position:relative; padding-bottom:4px;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--turmeric); border-radius:2px;
  transition:width .4s var(--ease);
}
.nav-links a:hover{opacity:1;}
.nav-links a:hover::after{width:100%;}
.nav-actions{display:flex; align-items:center; gap:14px; color:var(--ink);}
.nav-actions a, .nav-actions button.search-toggle{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(43,13,15,0.06); transition:background .3s var(--ease); flex-shrink:0;}
.nav-actions a:hover, .nav-actions button.search-toggle:hover{background:var(--turmeric); color:#fff;}
@media(max-width:480px){
  .nav-actions a, .nav-actions button.search-toggle{width:36px; height:36px;}
  .nav-actions a svg, .nav-actions button.search-toggle svg{width:15px; height:15px;}
}
.nav-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:26px; z-index:1001; padding:14px; margin:-14px; box-sizing:content-box; cursor:pointer;}
.nav-toggle span{height:2px; border-radius:2px; background:var(--ink); width:100%; display:block; transition:transform .3s var(--ease), opacity .3s var(--ease);}
@media(max-width:900px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

/* ---------- MOBILE NAV DRAWER ----------
   Rendered as a sibling of <nav>, not a descendant — this deliberately keeps it
   outside .nav's stacking context. .nav.scrolled uses backdrop-filter, and a
   backdrop-filter/transform/filter on an ancestor becomes the containing block
   for position:fixed descendants, which was collapsing the old in-nav drawer
   down to the ~80px nav-bar height instead of the full viewport.

   Redesigned as a premium organic "app drawer": logo header, a handwritten
   tagline, icon+chevron nav rows with an active pill, a promo card, social
   icons and an organic bottom visual — all built from the site's existing
   color variables, fonts (--script/--serif) and icon language. */
.mobile-drawer-backdrop{
  position:fixed; inset:0; background:rgba(43,13,15,0.45);
  z-index:1999; opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s;
}
.mobile-drawer-backdrop.open{opacity:1; visibility:visible;}
.mobile-drawer{
  position:fixed; top:0; right:0; height:100vh; height:100dvh;
  width:clamp(300px, 85vw, 400px);
  background:var(--rice); color:var(--ink);
  z-index:2000;
  display:flex; flex-direction:column;
  overflow-x:hidden; overflow-y:auto;
  box-shadow:-20px 0 40px -10px rgba(43,13,15,0.2);
  transform:translateX(100%);
  transition:transform .4s var(--ease);
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  isolation:isolate;
}
.mobile-drawer.open{transform:translateX(0);}

/* subtle organic blob tucked behind the header — echoes the site's rounded,
   hand-drawn corner-decoration motif used elsewhere */
.mobile-drawer::before{
  content:''; position:absolute; top:-14%; right:-20%; width:62%; height:26%;
  min-height:190px;
  background:var(--blob3); opacity:0.65;
  border-radius:38% 62% 55% 45% / 48% 40% 60% 52%;
  z-index:0; pointer-events:none;
}
.mobile-drawer > *{ position:relative; z-index:1; }

.mobile-drawer-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:26px 22px 4px; flex-shrink:0;
}
.mobile-drawer-header .logo-img{height:46px; width:46px;}
.mobile-drawer-header .logo-text{font-size:21px;}
.mobile-drawer-close{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:40px; height:40px; margin:-8px; border-radius:50%;
  border:none; background:rgba(43,13,15,0.06); color:var(--ink); cursor:pointer;
  transition:background .25s var(--ease);
}
.mobile-drawer-close:hover, .mobile-drawer-close:focus-visible{background:rgba(43,13,15,0.12);}

.mobile-drawer-tagline{
  font-family:var(--script); color:var(--hero-green-dark);
  font-size:29px; line-height:1.18; padding:12px 24px 4px; flex-shrink:0;
}
.mobile-drawer-tagline span{font-size:0.78em; vertical-align:-1px;}

.mobile-drawer-nav{
  display:flex; flex-direction:column; gap:4px; padding:18px 16px 4px; flex-shrink:0;
}
.mdn-item{
  display:flex; align-items:center; gap:14px;
  padding:11px 12px; border-radius:18px;
  font-weight:600; font-size:16.5px; color:var(--ink);
  opacity:0; transform:translateY(8px);
  transition:background .25s var(--ease), opacity .45s var(--ease), transform .45s var(--ease);
}
.mobile-drawer.open .mdn-item{opacity:1; transform:translateY(0);}
.mobile-drawer.open .mdn-item:nth-child(1){transition-delay:.08s;}
.mobile-drawer.open .mdn-item:nth-child(2){transition-delay:.13s;}
.mobile-drawer.open .mdn-item:nth-child(3){transition-delay:.18s;}
.mobile-drawer.open .mdn-item:nth-child(4){transition-delay:.23s;}
.mobile-drawer.open .mdn-item:nth-child(5){transition-delay:.28s;}
.mdn-item:hover{background:rgba(43,13,15,0.045);}
.mdn-icon{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:42px; height:42px; border-radius:50%;
  background:var(--blob3); color:var(--hero-green-dark);
}
.mdn-icon svg{width:19px; height:19px;}
.mdn-item:nth-child(2) .mdn-icon{background:var(--blob2); color:var(--clay);}
.mdn-item:nth-child(3) .mdn-icon{background:rgba(124,138,76,0.16); color:var(--hero-green-dark);}
.mdn-item:nth-child(4) .mdn-icon{background:var(--rice-dim); color:var(--millet);}
.mdn-item:nth-child(5) .mdn-icon{background:#FFF8E3; color:var(--millet);}
.mdn-label{flex:1;}
.mdn-chevron{font-size:20px; line-height:1; opacity:0.35; flex-shrink:0; font-weight:400;}
.mdn-item.is-active{background:var(--blob3);}
.mdn-item.is-active .mdn-icon{background:var(--hero-green-dark); color:#fff;}
.mdn-item.is-active .mdn-label{color:var(--hero-green-dark);}
.mdn-item.is-active .mdn-chevron{opacity:0.6; color:var(--hero-green-dark);}

.mobile-drawer-promo{
  display:flex; align-items:flex-start; gap:14px;
  margin:16px 16px 0; padding:20px 18px;
  background:var(--blob3); border-radius:20px;
  flex-shrink:0;
}
.mdp-leaf{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:24px; height:24px; color:var(--hero-green-dark); margin-top:2px;
}
.mdp-leaf svg{width:100%; height:100%;}
.mobile-drawer-promo p{
  font-family:var(--serif); font-weight:600; font-size:15.5px; line-height:1.4; color:var(--ink);
  position:relative; padding-bottom:8px;
}
.mobile-drawer-promo p::after{
  content:''; position:absolute; left:0; bottom:0; width:30px; height:2px;
  background:var(--hero-green-dark); opacity:0.4; border-radius:99px;
}

.mobile-drawer-social{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:22px 16px; flex-shrink:0;
}
.mobile-drawer-social a{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background:var(--rice-dim); color:var(--ink);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.mobile-drawer-social a svg{width:17px; height:17px;}
.mobile-drawer-social a:hover{background:var(--hero-green-dark); color:#fff;}

.mobile-drawer-footer{
  position:relative; margin-top:auto; flex-shrink:0;
  height:clamp(170px, 25vh, 210px); overflow:hidden;
}
.mdf-shape{
  position:absolute; inset:0; background:var(--hero-green-dark);
  border-radius:58% 42% 0 0/100% 100% 0 0;
}
.mdf-photo{
  position:absolute; right:0; bottom:0; width:60%; height:auto; max-height:98%;
  object-fit:contain; object-position:bottom right;
}
.mdf-words{
  position:absolute; left:30px; bottom:26px; z-index:1;
  display:flex; flex-direction:column; gap:6px;
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:0.14em;
  color:var(--rice); text-transform:uppercase;
}
.mdf-words::after{content:''; display:block; width:26px; height:2px; background:rgba(251,243,220,0.6); margin-top:2px;}

@media(min-width:901px){
  .mobile-drawer, .mobile-drawer-backdrop{display:none !important;}
}
@media(max-width:340px){
  .mobile-drawer-tagline{font-size:25px;}
  .mdn-item{font-size:15.5px; padding:10px;}
  .mdn-icon{width:38px; height:38px;}
  .mobile-drawer-footer{height:160px;}
  .mdf-photo{width:58%;}
}

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--rice);
  padding:34px 0 38px;
}
.hero-grid{
  position:relative; z-index:2; width:100%; display:grid; grid-template-columns:0.95fr 1.1fr; gap:clamp(24px, 4vw, 64px); align-items:center;
}
.hero-content{order:1;}
.hero-visual-wrap{order:2; position:relative; display:flex; align-items:center; justify-content:center; padding:18px 46px 60px 4px;}
.hero-frame{position:relative; width:min(84%, 480px); aspect-ratio:1/1;}
.hero-blob{
  position:absolute; inset:0;
  background:url("../img/decor/hero-leaf-wreath.png") center center/contain no-repeat;
  z-index:0;
}
.hero-leaf{position:absolute; z-index:1; pointer-events:none; height:auto; -webkit-user-drag:none; user-select:none;}
.hero-leaf-tr{top:-9%; right:-13%; width:38%; max-width:230px;}
.hero-leaf-tr2{top:2%; right:2%; width:11%; max-width:66px; opacity:1; transform:rotate(8deg); z-index:2;}
.hero-leaf-bl{bottom:-6%; left:-9%; width:19%; max-width:150px; opacity:0.97;}
.hero-leaf-scatter{top:42%; left:-2%; width:15%; max-width:92px; opacity:0.85; transform:rotate(-10deg);}
.hero-dot-deco{position:absolute; z-index:2; width:8px; height:8px; border-radius:50%; background:var(--turmeric);}
.hero-dot-deco.d1{top:2%; left:34%;}
.hero-dot-deco.d2{bottom:12%; left:6%;}
.hero-dot-deco.d3{bottom:6%; right:38%;}
.hero-swirl{position:absolute; z-index:3; top:6%; left:1%; width:30px; height:30px; opacity:0.85;}
.hero-visual{
  position:absolute; z-index:2; left:22%; top:20%; width:56%; aspect-ratio:1/1;
  border-radius:50%; background:#fff; overflow:hidden;
  box-shadow:0 22px 48px -20px rgba(43,13,15,0.34);
}
.hero-visual::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle at 50% 106%, rgba(43,13,15,0.32) 0%, rgba(43,13,15,0.06) 45%, transparent 65%);
}
.hero-visual img{
  width:100%; height:100%; object-fit:cover; object-position:center; border-radius:50%;
}
.hero-visual .hv-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:50%;
  opacity:0; transition:opacity 1.3s ease;
}
.hero-visual .hv-slide.active{opacity:1; z-index:1; animation:heroKenBurns 7s ease-out forwards;}
@keyframes heroKenBurns{
  from{transform:scale(1.03);}
  to{transform:scale(1.14);}
}
.hero-dot{
  position:absolute; z-index:2; top:34%; right:4%; width:12px; height:12px; border-radius:50%;
  background:var(--turmeric); box-shadow:0 0 0 5px rgba(201,162,74,0.18);
}
@media(max-width:680px){
  .hero-grid{grid-template-columns:1fr; gap:18px;}
  .hero-frame{width:min(74%, 300px);}
  .hero-visual-wrap{padding:14px 16px 100px 10px;}
  .hero{padding:22px 0 30px;}
  .hero-content{order:2; text-align:center;}
  .hero-visual-wrap{order:1;}
  .hero-cta-row{justify-content:center;}
  .hero-rating{justify-content:center;}
  .hero-subtitle{margin-left:auto; margin-right:auto;}
  .hero-testi{max-width:260px; right:2%; bottom:0;}
  .hero-leaf-tr{width:26%;}
  .hero-leaf-tr2{display:none;}
  .hero-leaf-bl{display:none;}
  .hero-leaf-bl2{display:none;}
  .hero-leaf-scatter{display:none;}
  .hero-cta-arrow{display:none;}
}
@media(max-width:480px){
  .hero-frame{width:82%;}
  .hero-visual-wrap{padding:12px 6px 118px 4px;}
  .hero{padding:18px 0 26px;}
  .hero-title{font-size:clamp(30px, 8vw, 46px);}
  .hero-script{font-size:24px;}
  .hero-leaf-tr{width:19%; top:-2%; right:-4%;}
  .hero-testi{padding:13px 15px; max-width:185px; right:-2%; bottom:1%;}
  .hero-testi .ht-quote-icon{font-size:22px; margin-bottom:2px;}
  .hero-testi p{font-size:11px; line-height:1.5; margin-bottom:8px;}
  .hero-testi .ht-name{font-size:9px;}
  .hero-testi .ht-heart{width:21px; height:21px;}
  .hero-testi .ht-heart svg{width:10px; height:10px;}
}
.price-badge{
  position:absolute; z-index:4; top:2%; left:2%; width:84px; height:84px; border-radius:50%;
  background:linear-gradient(155deg, var(--hero-green-light), var(--hero-green) 60%, var(--hero-green-dark));
  color:#fff; box-shadow:0 16px 32px -12px rgba(74,13,16,0.55), inset 0 0 0 3px rgba(255,255,255,0.25);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  font-family:var(--serif); padding:6px; box-sizing:border-box;
}
.price-badge .pb-label{font-size:8px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; opacity:0.92;}
.price-badge .pb-amount{font-size:17px; font-weight:800; line-height:1.1; margin:2px 0;}
.price-badge .pb-note{
  font-size:7px; font-weight:600; letter-spacing:0.02em; opacity:0.95;
  padding-top:4px; margin-top:1px; border-top:1px solid rgba(255,255,255,0.4); width:76%;
}
.price-badge.small{width:76px; height:76px; top:-10px; right:-6px; background:linear-gradient(155deg, var(--turmeric), var(--clay)); box-shadow:0 10px 22px -6px rgba(201,162,74,0.5);}
.price-badge.small .pb-amount{font-size:16px;}
.price-badge.small .pb-label{font-size:8px;}
.price-badge.small .pb-note{display:none;}
@media(max-width:680px){.price-badge{width:78px; height:78px; top:0; left:2%;} .price-badge .pb-amount{font-size:16px;} .hero-dot{display:none;}}
@media(max-width:480px){.price-badge{width:68px; height:68px; top:3%; left:0;} .price-badge .pb-amount{font-size:14px;} .price-badge .pb-label{font-size:7px;} .price-badge .pb-note{font-size:6.5px;}}

.hero-content{position:relative; z-index:2;}
.hero-script{font-family:var(--script); font-size:31px; color:var(--clay); line-height:1; margin-bottom:-4px; display:inline-flex; align-items:center; gap:6px;}
.hero-script .script-leaf{width:30px; height:auto; flex:none; transform:translateY(-2px) rotate(-6deg);}
h1.hero-title{
  font-family:var(--serif); font-weight:800; color:var(--ink);
  font-size:clamp(38px, 4.4vw, 64px); line-height:0.98; letter-spacing:-0.01em;
  margin-bottom:14px;
}
.hero-title span{color:var(--turmeric);}
.hero-subtitle{font-size:15px; color:var(--millet); max-width:380px; margin-bottom:14px; line-height:1.5;}
.hero-rating{display:flex; align-items:center; gap:10px; margin-bottom:20px; font-size:13px; flex-wrap:wrap;}
.hero-rating .stars{color:var(--turmeric); letter-spacing:2px; font-size:14px;}
.hero-rating strong{color:var(--ink);}
.hero-rating span{color:var(--millet); opacity:0.75;}
.hero-testi{
  position:absolute; z-index:5; right:-4%; bottom:8%; background:#fff; border-radius:18px;
  padding:16px 18px 14px; width:225px; box-shadow:0 22px 44px -18px rgba(43,13,15,0.35);
}
.hero-testi .ht-quote-icon{font-family:Georgia,serif; font-size:26px; line-height:0.6; color:var(--turmeric); font-weight:800; display:block; margin-bottom:5px;}
.hero-testi p{font-size:11.5px; color:var(--ink-soft); line-height:1.5; margin-bottom:8px;}
.hero-testi .ht-foot{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.hero-testi .ht-name{font-size:10px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--millet); opacity:0.85;}
.hero-testi .ht-heart{
  width:24px; height:24px; border-radius:50%; background:var(--turmeric); color:#fff; flex:none;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 16px -6px rgba(201,162,74,0.7);
}
.hero-testi .ht-heart svg{width:12px; height:12px;}
.hero-cta-row{display:flex; gap:14px; flex-wrap:wrap;}
.hero-cta-arrow{position:absolute; z-index:1; pointer-events:none; width:110px; height:auto; opacity:0.9; left:255px; top:105px; transform:rotate(-2deg);}
.btn{
  font-family:var(--serif); font-size:12.5px; font-weight:700; letter-spacing:0.02em; text-transform:uppercase;
  padding:13px 26px; border-radius:999px; border:1.5px solid var(--turmeric);
  background:var(--turmeric); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
  box-shadow:0 14px 30px -14px rgba(201,162,74,0.7);
}
.btn:hover{transform:translateY(-3px); box-shadow:0 20px 36px -14px rgba(201,162,74,0.8); background:var(--clay); border-color:var(--clay);}
.btn.ghost{background:transparent; color:var(--ink); box-shadow:none;}
.btn.ghost:hover{background:var(--turmeric); color:#fff;}

/* ---------- FEATURE STRIP ---------- */
.feature-strip{position:relative; z-index:2; padding:0 0 min(5vw,44px);}
.feature-strip .wrap{
  background:#fff; border-radius:24px; padding:28px clamp(20px,4vw,48px) 18px;
  box-shadow:0 24px 60px -30px rgba(43,13,15,0.25);
}
.feature-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px; padding-bottom:18px;
}
.feature-item{display:flex; align-items:flex-start; gap:12px; text-align:left;}
.feature-icon{
  width:44px; height:44px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
}
.feature-icon svg{width:20px; height:20px;}
.feature-icon.f-green{background:#E4F0DC; color:var(--hero-green);}
.feature-icon.f-clay{background:#F6E6BF; color:var(--clay);}
.feature-icon.f-rose{background:#F8DDD6; color:#2F8F4E;}
.feature-icon.f-olive{background:#E4F0DC; color:var(--millet);}
.feature-item h4{font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:4px; line-height:1.3;}
.feature-item p{font-size:12.5px; color:var(--millet); opacity:0.85; line-height:1.5;}
.feature-strip-foot{
  border-top:1px solid var(--line); padding-top:20px; text-align:center;
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--millet); opacity:0.6;
}
@media(max-width:1024px){
  .feature-grid{grid-template-columns:repeat(2,1fr); gap:26px;}
}
@media(max-width:560px){
  .feature-grid{grid-template-columns:1fr; gap:22px;}
  .feature-strip .wrap{padding:32px 20px 24px; border-radius:22px;}
  .feature-item{text-align:left;}
}

/* ---------- INTRO ---------- */
.intro{padding:min(5vw,56px) 0 min(6vw,64px); position:relative; z-index:2;}
.intro-text{
  font-family:var(--serif); font-weight:700; font-size:clamp(26px, 4.6vw, 54px); line-height:1.12;
  max-width:1000px; letter-spacing:-0.01em; color:var(--ink);
}
.mask-line{overflow:hidden;}
.mask-line span{display:inline-block;}
.intro-note{
  max-width:420px; margin-top:36px; font-size:16px; color:var(--millet); opacity:0.9;
  padding-left:22px; border-left:3px solid var(--turmeric);
}

/* ---------- BRAND STORY (split) ---------- */
.story{
  display:grid; grid-template-columns:1.1fr 1fr; min-height:86vh; align-items:stretch; position:relative; z-index:2;
}
.story-media{position:relative; overflow:hidden; background:var(--rice-dim); border-radius:40px; margin:0 clamp(16px, 5vw, 80px);}
.story-media .clip{
  position:absolute; inset:0; clip-path:inset(0 100% 0 0); border-radius:40px; overflow:hidden;
  background:var(--rice-dim);
}
.story-media .clip img{
  width:100%; height:100%; object-fit:cover; transform:scale(1.12);
  filter:saturate(1.08) contrast(1.02);
}
.story-media .clip::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(43,13,15,0.02) 0%, rgba(43,13,15,0.4) 100%);
}
.story-media .tag{
  position:absolute; bottom:28px; left:28px; color:#fff; font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; background:rgba(43,13,15,0.55); padding:8px 16px; border-radius:20px; z-index:2;
}
.story-copy{
  padding:min(6vw,80px) min(4vw,60px); display:flex; flex-direction:column; justify-content:center; gap:22px;
}
.story-copy .eyebrow{color:var(--clay);}
.story-copy h2{
  font-family:var(--serif); font-weight:800; font-size:clamp(28px,3.6vw,46px); line-height:1.1; letter-spacing:-0.01em; color:var(--ink);
}
.story-copy p{max-width:420px; font-size:16px; color:var(--millet); opacity:0.9;}
@media(max-width:900px){
  .story{grid-template-columns:1fr; min-height:auto;}
  .story-media{height:45vh; margin:0; border-radius:28px;}
  .story-media .clip{border-radius:28px;}
  .story-copy{padding:40px clamp(16px, 5vw, 80px); text-align:center;}
  .story-copy p{max-width:100%;}
  .story-copy .btn{margin:0 auto;}
}
@media(max-width:480px){
  .story-media{height:38vh;}
  .story-copy{padding:32px 16px;}
}
.story-reverse{grid-template-columns:1fr 1.1fr;}
.story-reverse .story-copy{order:1;}
.story-reverse .story-media{order:2;}
@media(max-width:900px){
  .story-reverse{grid-template-columns:1fr;}
}

/* ---------- PRODUCTS ---------- */
.products{padding:min(11vw,130px) 0; position:relative; z-index:2;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:56px; flex-wrap:wrap;
}
.section-head h2{
  font-family:var(--serif); font-weight:800; font-size:clamp(30px,4.6vw,56px); line-height:1.02; letter-spacing:-0.01em; color:var(--ink);
}
.section-head p{max-width:320px; font-size:15px; color:var(--millet); opacity:0.85;}
.product-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
}
.product-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:1024px){.product-grid, .product-grid.cols-3{grid-template-columns:repeat(2,1fr); gap:20px;}}
@media(max-width:560px){.product-grid, .product-grid.cols-3{grid-template-columns:1fr; gap:16px;}}
.p-new-tag{
  position:absolute; top:14px; left:14px; z-index:2; background:var(--ink); color:#fff;
  font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  padding:6px 12px; border-radius:20px;
}
.p-card{
  background:var(--blob); border-radius:32px; padding:22px 20px 24px; opacity:0; transform:translateY(60px) scale(0.92);
  display:flex; flex-direction:column; position:relative; transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.p-card:hover{transform:translateY(-8px); box-shadow:0 26px 46px -26px rgba(43,13,15,0.35);}
.p-card:nth-child(3n+2){background:var(--blob2);}
.p-card:nth-child(3n+3){background:var(--blob3);}
.p-media{
  aspect-ratio:4/3.4; margin-bottom:18px; position:relative; overflow:hidden; border-radius:22px;
  background:#fff; padding:6%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
}
.p-media img{
  width:100%; height:100%; object-fit:contain; object-position:center; transform:scale(1); transition:transform .6s var(--ease);
}
.p-card:hover .p-media img{transform:scale(1.045);}
.p-media img.img-fallback{object-fit:contain; padding:22%; opacity:0.5;}
.p-card .price-badge.small{position:absolute;}
.p-script{font-family:'Playfair Display', serif; font-weight:700; font-size:14px; color:var(--ink); line-height:1; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.03em;}
.p-card-heading{display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; margin-bottom:6px;}
.p-card h3{font-family:var(--serif); font-size:21px; font-weight:800; line-height:1.15; margin:0; color:var(--ink); flex:1; min-width:0; overflow-wrap:anywhere;}
.p-card-heading .p-price{flex-shrink:0; white-space:nowrap;}
.p-card .p-cat{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--clay); margin-bottom:6px;}
.p-card p{font-size:13px; color:var(--millet); opacity:0.85; margin-bottom:16px; flex:1;}
.p-foot{display:flex; align-items:center; justify-content:center; padding-top:16px; margin-top:16px; border-top:1px solid rgba(43,13,15,0.12);}
.p-price{font-family:var(--serif); font-size:15px; font-weight:700; color:var(--ink);}
.p-price .strike{opacity:0.45; text-decoration:line-through; margin-left:6px; font-size:12px; font-weight:500;}
.p-add{
  width:100%; max-width:220px; min-height:44px; box-sizing:border-box;
  font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:6px;
  background:var(--turmeric); color:#fff; padding:10px 16px; border-radius:999px; transition:background .3s var(--ease), transform .3s var(--ease);
}
.p-add:hover{background:var(--clay); transform:translateY(-2px);}
.p-add svg{width:11px; height:11px; flex-shrink:0;}
@media(max-width:560px){
  .p-card-heading{width:100%; gap:8px;}
  .p-card-heading .p-price.real{font-size:clamp(16px,5vw,21px);}
  .p-card .p-foot{width:100%; box-sizing:border-box;}
  .p-card .p-foot .p-add{margin-inline:auto;}
}

/* ---------- INGREDIENT WHEEL (signature — cosmic orbit) ---------- */
/* Section is sized to fit as one self-contained frame under the sticky
   nav (nav ≈ 72px tall) on desktop, so the whole orbit composition +
   heading are visible together without scrolling within the section. */
.ingredients{
  position:relative; overflow:hidden;
  box-sizing:border-box;
  min-height:calc(100vh - 72px);
  min-height:calc(100svh - 72px);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(14px, 2.5vh, 40px) 0;
}
.ingredients .wrap{width:100%;}
.ing-stars{
  position:absolute; inset:0; pointer-events:none; opacity:0.6;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 18%, rgba(251,243,220,0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 62%, rgba(251,243,220,0.7), transparent 60%),
    radial-gradient(1px 1px at 38% 12%, rgba(201,162,74,0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 82%, rgba(251,243,220,0.6), transparent 60%),
    radial-gradient(1px 1px at 78% 24%, rgba(201,162,74,0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 58%, rgba(251,243,220,0.8), transparent 60%),
    radial-gradient(1px 1px at 12% 88%, rgba(251,243,220,0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 90%, rgba(201,162,74,0.6), transparent 60%),
    radial-gradient(1px 1px at 50% 6%, rgba(251,243,220,0.7), transparent 60%),
    radial-gradient(1px 1px at 30% 40%, rgba(251,243,220,0.5), transparent 60%);
  opacity:0.55;
}
/* orbital curve connecting the wheel to the four categories */
.ing-orbit{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0;}
.ing-orbit ellipse{
  fill:none; stroke:rgba(201,162,74,0.34); stroke-width:1.4; stroke-dasharray:1.6 13;
  stroke-linecap:round; vector-effect:non-scaling-stroke;
}

/* shooting-star layer: sits across the whole ingredients section, behind the wheel content */
.ing-shooting-layer{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;}
.ing-shoot{
  position:absolute; top:var(--top); left:var(--left); width:var(--trail); height:2px; border-radius:2px;
  background:linear-gradient(90deg, rgba(201,162,74,0) 0%, rgba(255,205,120,0.5) 55%, rgba(255,247,224,0.95) 100%);
  opacity:0; filter:blur(0.3px);
  transform:rotate(35deg) translateX(-40px) scaleX(0.6);
  animation:ingShootMove var(--dur, 3.2s) linear infinite;
  animation-delay:var(--delay, 0s);
}
.ing-shoot::after{
  content:''; position:absolute; right:0; top:50%; width:var(--head); height:var(--head);
  transform:translate(30%,-50%); border-radius:50%;
  background:radial-gradient(circle, #FFF6D8 0%, rgba(232,205,130,0.95) 45%, rgba(232,205,130,0) 76%);
  box-shadow:0 0 6px 2px rgba(232,205,130,0.85);
}
@keyframes ingShootMove{
  0%{opacity:0; transform:rotate(35deg) translateX(-40px) scaleX(0.6);}
  8%{opacity:var(--op, 0.85);}
  55%{opacity:var(--op, 0.85); transform:rotate(35deg) translateX(80px) scaleX(1);}
  78%{opacity:0;}
  100%{opacity:0; transform:rotate(35deg) translateX(120px) scaleX(1);}
}

/* soft twinkling dust, layered on top of the static star field */
.ing-twinkle{
  position:absolute; top:var(--top); left:var(--left); width:var(--tsize); height:var(--tsize);
  border-radius:50%; background:rgba(255,238,205,0.95); opacity:0; pointer-events:none;
  box-shadow:0 0 4px 1px rgba(201,162,74,0.5);
  animation:ingTwinkle var(--dur, 3s) ease-in-out infinite; animation-delay:var(--delay, 0s);
}
@keyframes ingTwinkle{
  0%, 100%{opacity:0;}
  50%{opacity:var(--op, 0.85);}
}

.ing-comet{
  position:absolute; height:1px; border-radius:2px; pointer-events:none;
  background:linear-gradient(90deg, rgba(201,162,74,0.9), rgba(201,162,74,0));
  opacity:0; will-change:transform, opacity;
  animation:ingCometStreak var(--dur, 4s) ease-in infinite;
  animation-delay:var(--delay, 0s);
}
.ing-comet-a{top:14%; left:6%; width:90px; --rot:-28deg; --dur:3.6s; --delay:0.2s;}
.ing-comet-b{bottom:20%; right:10%; width:130px; --rot:160deg; --dur:4.8s; --delay:1.8s;}
.ing-comet-c{top:12%; right:7%; width:100px; --rot:-152deg; --dur:4.1s; --delay:2.6s;}
.ing-comet-d{bottom:16%; left:9%; width:110px; --rot:28deg; --dur:5.2s; --delay:1s;}
@keyframes ingCometStreak{
  0%{opacity:0; transform:rotate(var(--rot)) translateX(-14px) scaleX(0.5);}
  10%{opacity:0.9;}
  38%{opacity:0.55; transform:rotate(var(--rot)) translateX(30px) scaleX(1);}
  60%{opacity:0;}
  100%{opacity:0; transform:rotate(var(--rot)) translateX(30px) scaleX(1);}
}
.ing-wrap{position:relative; height:clamp(340px, 50vh, 460px);}
.ing-wheel-pos{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
}
.ing-wheel-glow{
  position:absolute; inset:-34%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,244,214,0.95) 0%, rgba(255,205,120,0.72) 16%, rgba(201,162,74,0.42) 36%, rgba(201,162,74,0.16) 58%, rgba(201,162,74,0) 78%);
  filter:blur(6px);
  mix-blend-mode:screen;
}
.ing-wheel-holder{
  position:relative; width:clamp(180px, 30vh, 320px); height:clamp(180px, 30vh, 320px); border-radius:50%;
  display:flex; align-items:center; justify-content:center; opacity:1; transform:none;
  background:#fff; box-shadow:0 0 0 2px rgba(232,205,130,0.95), 0 0 60px 14px rgba(255,205,120,0.55), 0 0 140px 36px rgba(201,162,74,0.32), 0 40px 90px -20px rgba(0,0,0,0.6);
}
.ing-wheel-holder img{
  width:100%; height:100%; object-fit:cover; object-position:center top; border-radius:50%;
  filter:saturate(1.05);
  border:6px solid rgba(201,162,74,0.25);
  box-sizing:border-box;
}
.ing-ring{
  position:absolute; border:2px dashed rgba(201,162,74,0.3); border-radius:50%; pointer-events:none; transform:none;
}
.ing-ring-outer{inset:clamp(-38px, -5.5vh, -26px);}
.ing-dot{
  position:absolute; width:14px; height:14px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 35% 30%, rgba(255,238,196,0.98), rgba(201,162,74,0.6) 55%, rgba(201,162,74,0.15) 100%);
  box-shadow:0 0 12px 3px rgba(201,162,74,0.5);
}
.ing-dot-sm{width:9px; height:9px; box-shadow:0 0 8px 2px rgba(201,162,74,0.45);}
.ing-dot-1{top:8%; left:10%;}
.ing-dot-2{bottom:12%; right:12%;}
.ing-dot-3{top:10%; right:8%;}
.ing-dot-4{bottom:8%; left:14%;}
.ing-label{
  position:absolute; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--rice); display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  width:152px; opacity:1;
}
.ing-label .planet{
  position:relative; width:clamp(64px, 10.5vh, 92px); height:clamp(64px, 10.5vh, 92px); border-radius:50%; overflow:hidden; flex:none;
  border:2px solid rgba(201,162,74,0.55); background:var(--ink-soft);
  box-shadow:0 0 0 5px rgba(201,162,74,0.12), 0 14px 30px -8px rgba(0,0,0,0.65), 0 0 30px -2px rgba(201,162,74,0.4);
}
.ing-label .planet img{width:100%; height:100%; object-fit:cover; display:block;}
.ing-label .planet::after{
  content:''; position:absolute; inset:clamp(-11px,-1.6vh,-9px) clamp(-27px,-4vh,-21px); border:2px solid rgba(201,162,74,0.5);
  border-radius:50%; transform:rotate(-20deg); pointer-events:none;
}
.ing-label .planet-leaf{background:linear-gradient(155deg, var(--clay), var(--ink-soft));}
.ing-label .planet-leaf img{object-fit:contain; padding:12px; width:100%; height:100%;}
.ing-label .planet-badge{background:#fff;}
.ing-label .planet-badge img{object-fit:contain; padding:15px;}
.ing-icon{width:12px; height:12px; flex:none;}
.ing-icon svg{width:100%; height:100%;}
.ing-icon svg circle{fill:var(--turmeric);}
.ing-label .lbl{line-height:1.3;}
.ing-label .desc{
  font-family:var(--sans); font-size:11px; font-weight:400; letter-spacing:0.01em; text-transform:none;
  color:var(--sage); line-height:1.5; max-width:145px; opacity:0.92; margin-top:-2px;
}
.ing-l2{top:4%; left:-3%;}
.ing-l3{top:4%; right:-5%;}
.ing-l4{bottom:4%; left:-1%;}
.ing-l5{bottom:4%; right:-1%;}
.ing-center-copy{
  text-align:center; max-width:560px; margin:clamp(12px, 2.2vh, 28px) auto 0; position:relative;
}
.ing-center-copy h2{font-family:var(--serif); font-size:clamp(22px,3vw,32px); font-weight:800; margin-bottom:12px; letter-spacing:-0.01em;}
.ing-center-copy p{font-size:14px; color:var(--sage); opacity:0.95;}

@media (prefers-reduced-motion: reduce){
  .ing-shoot, .ing-twinkle, .ing-comet{animation:none !important;}
  .ing-shoot{opacity:0;}
  .ing-twinkle{opacity:0.35;}
  .ing-comet{opacity:0.4;}
}

@media(max-width:900px){
  .ing-wrap{min-height:clamp(780px, 100vh, 1040px);}
  .ing-wheel-holder{width:min(60vw, 320px); height:min(60vw, 320px);}
  .ing-ring-outer{inset:-48px;}
  .ing-label{font-size:9.5px; width:126px; gap:8px;}
  .ing-label .planet{width:80px; height:80px;}
  .ing-label .planet::after{inset:-12px -26px;}
  .ing-label .desc{font-size:10px; max-width:120px;}
  .ing-l2{top:15%; left:1%;}
  .ing-l3{top:15%; right:1%;}
  .ing-l4{bottom:15%; left:2%;}
  .ing-l5{bottom:15%; right:2%;}
  .ing-dot{width:11px; height:11px;}
  .ing-dot-sm{width:7px; height:7px;}
}
@media(max-width:480px){
  .ing-wrap{min-height:clamp(700px, 92vh, 900px);}
  .ing-wheel-holder{width:72vw; height:72vw;}
  .ing-ring-outer{inset:-36px;}
  .ing-label{font-size:8.5px; width:108px; gap:6px;}
  .ing-label .planet{width:58px; height:58px;}
  .ing-label .planet::after{inset:-8px -18px;}
  .ing-label .desc{font-size:9px; max-width:104px; line-height:1.35;}
  .ing-icon{display:none;}
  .ing-l2{top:14%; left:-4%;}
  .ing-l3{top:14%; right:-4%;}
  .ing-l4{bottom:14%; left:-2%;}
  .ing-l5{bottom:14%; right:-2%;}
  .ing-dot{display:none;}
  .ing-orbit, .ing-comet-c, .ing-comet-d{display:none;}
}

/* ---------- BENEFITS ---------- */
.benefits{padding:min(9vw,110px) 0;}
.benefit-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media(max-width:1024px){.benefit-grid{grid-template-columns:repeat(2,1fr); gap:18px;}}
@media(max-width:560px){.benefit-grid{grid-template-columns:1fr; gap:16px;}}
.benefit{
  padding:34px 26px; background:#fff; border-radius:26px; box-shadow:0 16px 34px -24px rgba(43,13,15,0.3);
}
.benefit .b-num{
  font-family:var(--serif); font-size:clamp(40px,5vw,64px); font-weight:800; color:var(--turmeric); line-height:1;
  margin-bottom:14px; letter-spacing:-0.02em;
}
.benefit .b-num .unit{font-size:0.4em; font-family:var(--mono); font-weight:600; color:var(--millet); margin-left:4px;}
.benefit h4{font-size:13px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; margin-bottom:8px; color:var(--ink);}
.benefit p{font-size:13.5px; color:var(--millet); opacity:0.85;}

/* ---------- STEPS ---------- */
.steps{padding:min(11vw,130px) 0;}
.steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:52px;}
@media(max-width:1024px){.steps-grid{grid-template-columns:repeat(2,1fr); gap:20px;}}
@media(max-width:560px){.steps-grid{grid-template-columns:1fr; gap:16px;}}
.step{opacity:0; transform:translateY(40px) scale(0.96); background:#fff; padding:32px 28px; border-radius:26px; box-shadow:0 16px 34px -24px rgba(43,13,15,0.3);}
.step .s-index{font-family:var(--serif); font-size:13px; font-weight:700; color:var(--clay); letter-spacing:0.06em; margin-bottom:16px;}
.step h3{font-family:var(--serif); font-size:clamp(24px,2.8vw,32px); font-weight:800; margin-bottom:10px; color:var(--ink);}
.step p{font-size:14.5px; color:var(--millet); opacity:0.85; max-width:280px;}
.step .s-line{width:100%; height:3px; background:var(--line-dark); margin-top:22px; position:relative; border-radius:3px; overflow:hidden;}
.step .s-line::after{content:''; position:absolute; left:0; top:0; height:100%; width:0; background:var(--turmeric); transition:width 1s var(--ease);}
.step.in-view .s-line::after{width:100%;}

/* ---------- LIFESTYLE BAND ---------- */
.band{
  position:relative; height:64vh; min-height:380px; background:var(--ink); overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
  border-radius:48px; margin:0 clamp(16px, 5vw, 80px); width:calc(100% - 2 * clamp(16px, 5vw, 80px));
}
@media(max-width:900px){
  .band{height:auto; min-height:300px; padding:60px clamp(16px, 5vw, 80px); border-radius:32px;}
}
@media(max-width:480px){
  .band{min-height:250px; padding:40px 20px; border-radius:24px;}
}
.band-bg{
  position:absolute; inset:0; overflow:hidden; transform:scale(1.1); background:var(--ink-soft);
}
.band-bg img{
  width:100%; height:100%; object-fit:cover; opacity:0.7;
  filter:saturate(1.08) contrast(1.05);
}
.band-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(43,13,15,0.4) 0%, rgba(43,13,15,0.25) 45%, rgba(43,13,15,0.65) 100%);
}
.band h2{
  position:relative; z-index:2; color:#fff; font-family:var(--serif); font-weight:800;
  font-size:clamp(28px,5.4vw,60px); line-height:1.08; letter-spacing:-0.01em;
}
.band h2 .line{overflow:hidden; display:block;}
.band h2 .line span{display:inline-block; transform:translateY(60px); opacity:0;}

/* ---------- CATEGORIES ---------- */
.categories{padding:min(11vw,130px) 0;}
.cat-scroll{
  display:grid; grid-template-columns:repeat(var(--cat-cols,4),1fr); gap:22px; margin-top:52px;
}
@media(max-width:1200px){.cat-scroll{gap:16px;} .cat-card .cat-name{font-size:14px;}}
@media(max-width:900px){
  .cat-scroll{display:flex; overflow-x:auto; gap:16px; scroll-snap-type:x mandatory; margin:52px calc(-1 * clamp(16px, 5vw, 80px)) 0; padding:0 clamp(16px, 5vw, 80px) 10px;}
  .cat-scroll::-webkit-scrollbar{display:none;}
  .cat-card{min-width:80vw; scroll-snap-align:start;}
}
@media(max-width:480px){
  .cat-card{min-width:85vw;}
}
.cat-card{position:relative; aspect-ratio:3/4; overflow:hidden; cursor:pointer; border-radius:28px;}
.cat-card .cat-bg{
  position:absolute; inset:0; background:linear-gradient(160deg,var(--blob2),var(--blob));
  transition:transform .7s var(--ease);
}
.cat-card:hover .cat-bg{transform:scale(1.08);}
.cat-card .cat-overlay{
  position:absolute; inset:0; background:linear-gradient(0deg, rgba(43,13,15,0.8), transparent 55%);
  display:flex; align-items:flex-end; padding:22px;
}
.cat-card .cat-name{color:#fff; font-family:var(--serif); font-weight:700; font-size:16px; letter-spacing:0.01em; display:flex; align-items:center; gap:8px;}
.cat-card .cat-name svg{width:14px; transition:transform .35s var(--ease);}
.cat-card:hover .cat-name svg{transform:translateX(6px);}

/* ---------- TESTIMONIALS ---------- */
.testi{padding:min(10vw,120px) 0; text-align:center;}
.testi-card{
  background:#fff; border-radius:32px; max-width:760px; margin:0 auto; padding:56px 48px;
  box-shadow:0 24px 60px -30px rgba(43,13,15,0.35);
}
@media(max-width:480px){
  .testi-card{padding:40px 24px; border-radius:24px;}
}
.testi-quote{
  font-family:var(--serif); font-weight:600; font-size:clamp(20px,3vw,30px);
  margin:0 auto 26px; line-height:1.4; letter-spacing:-0.005em; color:var(--ink);
}
.testi-stars{color:var(--turmeric); font-size:16px; letter-spacing:4px; margin-bottom:20px;}
.testi-name{font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; opacity:0.7; color:var(--clay);}
.testi-dots{display:flex; gap:10px; justify-content:center; margin-top:40px;}
.testi-dots button{width:9px; height:9px; border-radius:50%; background:var(--line-dark); transition:background .3s, transform .3s;}
.testi-dots button.active{background:var(--turmeric); transform:scale(1.2);}

/* ---------- JOURNAL ---------- */
.journal{padding:min(11vw,130px) 0;}
.journal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:52px;}
@media(max-width:1024px){.journal-grid{grid-template-columns:repeat(2,1fr); gap:20px;}}
@media(max-width:560px){.journal-grid{grid-template-columns:1fr; gap:16px;}}
.j-card{cursor:pointer; background:#fff; border-radius:28px; padding:18px; box-shadow:0 16px 34px -26px rgba(43,13,15,0.35); transition:transform .4s var(--ease);}
.j-card:hover{transform:translateY(-6px);}
.j-media{aspect-ratio:3/4; overflow:hidden; margin-bottom:18px; background:linear-gradient(150deg,var(--blob2),var(--blob)); border-radius:20px;}
.j-media div{width:100%; height:100%; transition:transform .7s var(--ease);}
.j-card:hover .j-media div{transform:scale(1.05);}
.j-cat{font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--clay); margin-bottom:8px; padding:0 6px;}
.j-card h3{font-family:var(--serif); font-size:19px; font-weight:800; margin-bottom:10px; line-height:1.25; padding:0 6px; color:var(--ink);}
.j-read{font-size:12px; font-weight:600; display:flex; align-items:center; gap:6px; padding:0 6px; color:var(--turmeric);}
.j-read svg{width:12px; transition:transform .3s var(--ease);}
.j-card:hover .j-read svg{transform:translateX(5px);}

/* ---------- FINAL CTA (common premium organic hero/banner) ---------- */
/* Reusable across every page: only the heading/subtitle/button content differs
   per page — the background composition below is shared site-wide. */
.final-cta{
  position:relative; min-height:70vh; background:var(--ink); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden;
  border-radius:48px; margin:0 clamp(16px, 5vw, 80px); width:calc(100% - 2 * clamp(16px, 5vw, 80px));
  isolation:isolate;
}
@media(max-width:900px){
  .final-cta{min-height:auto; padding:96px clamp(16px, 5vw, 80px);}
}
@media(max-width:767px){
  /* small breathing gap between the journey railway divider above and
     this card, mobile only — desktop/tablet spacing is untouched */
  .final-cta{margin-top:24px;}
}
@media(min-width:1024px){
  .final-cta{margin-top:24px;}
}
@media(max-width:480px){
  .final-cta{padding:76px 20px; border-radius:32px;}
}

/* base + decorative layers — deep espresso brown, golden glow, organic
   flowing lines and illustrated nuts/grains/leaves tucked into the corners
   so the centre stays clean for text (per-page content). */
.final-cta .bg{
  position:absolute; inset:0; z-index:0; border-radius:inherit; overflow:hidden;
  background-repeat:no-repeat;
  background-image:
    url("../img/decor/corner-br.svg"),
    url("../img/decor/corner-bl.svg"),
    url("../img/decor/flow-arc.svg"),
    url("../img/decor/flow-arc.svg"),
    radial-gradient(46% 55% at 50% 40%, rgba(201,162,74,0.24), transparent 72%),
    radial-gradient(60% 60% at 4% 100%, rgba(124,138,76,0.14), transparent 65%),
    radial-gradient(60% 60% at 96% 100%, rgba(217,125,46,0.16), transparent 65%),
    linear-gradient(180deg, #3E0E12 0%, #2B0D0F 55%, #2A080B 100%);
  background-position:
    right bottom,
    left bottom,
    left top,
    right bottom,
    center 40%,
    left bottom,
    right bottom,
    center;
  background-size:
    380px 340px,
    380px 340px,
    340px 340px,
    340px 340px,
    80% 90%,
    65% 75%,
    65% 75%,
    100% 100%;
}
/* small leaf accents in the top corners, mirrored on the right */
.final-cta .bg::before,
.final-cta .bg::after{
  content:''; position:absolute; top:14px; width:104px; height:104px;
  background:url("../img/decor/leaf-accent.svg") no-repeat center/contain;
  opacity:0.8; pointer-events:none;
}
.final-cta .bg::before{ left:14px; }
.final-cta .bg::after{ right:14px; transform:scaleX(-1); }

@media(max-width:900px){
  .final-cta .bg{
    background-size:
      260px 230px,
      260px 230px,
      220px 220px,
      220px 220px,
      90% 70%,
      70% 60%,
      70% 60%,
      100% 100%;
  }
}
@media(max-width:600px){
  /* mobile: simplify — drop the flowing lines and top leaves, keep a few
     ingredients tucked at the bottom edges, preserve strong text contrast */
  .final-cta .bg{
    background-image:
      url("../img/decor/corner-br.svg"),
      url("../img/decor/corner-bl.svg"),
      radial-gradient(60% 50% at 50% 32%, rgba(201,162,74,0.22), transparent 72%),
      linear-gradient(180deg, #3E0E12 0%, #2B0D0F 55%, #2A080B 100%);
    background-position: right bottom, left bottom, center, center;
    background-size: 170px 155px, 170px 155px, 100% 60%, 100% 100%;
  }
  .final-cta .bg::before, .final-cta .bg::after{ display:none; }
}

/* small trust-badge icons tucked along the left edge, desktop only —
   décor stays out of the centre safe area used by the page text.
   Default set (badges-left/right.svg) is used on the homepage; every
   other page gets its own contextual set via a modifier class so the
   CTA icons actually match what that page is talking about. */
.final-cta::before{
  content:''; position:absolute; z-index:1; left:clamp(20px,4vw,56px); top:50%;
  width:210px; height:340px; transform:translateY(-50%);
  background:url("../img/decor/badges-left.svg") no-repeat center/contain;
  opacity:0.9; pointer-events:none;
}
.final-cta::after{
  content:''; position:absolute; z-index:1; right:clamp(20px,4vw,56px); top:50%;
  width:210px; height:340px; transform:translateY(-50%);
  background:url("../img/decor/badges-right.svg") no-repeat center/contain;
  opacity:0.9; pointer-events:none;
}
.final-cta--about::before{background-image:url("../img/decor/badges-left-about.svg");}
.final-cta--about::after{background-image:url("../img/decor/badges-right-about.svg");}
.final-cta--shop::before{background-image:url("../img/decor/badges-left-shop.svg");}
.final-cta--shop::after{background-image:url("../img/decor/badges-right-shop.svg");}
.final-cta--contact::before{background-image:url("../img/decor/badges-left-contact.svg");}
.final-cta--contact::after{background-image:url("../img/decor/badges-right-contact.svg");}
.final-cta--faq::before{background-image:url("../img/decor/badges-left-faq.svg");}
.final-cta--faq::after{background-image:url("../img/decor/badges-right-faq.svg");}
.final-cta--journal::before{background-image:url("../img/decor/badges-left-journal.svg");}
.final-cta--journal::after{background-image:url("../img/decor/badges-right-journal.svg");}
@media(max-width:1180px){
  .final-cta::before, .final-cta::after{ display:none; }
}

.final-cta h2{
  position:relative; z-index:2; font-family:var(--serif); font-weight:800; font-size:clamp(34px,6.4vw,84px);
  line-height:1.02; letter-spacing:-0.01em; margin-bottom:22px; text-shadow:0 8px 30px rgba(0,0,0,0.35);
}
.final-cta h2 .accent{ color:var(--turmeric); }
.final-cta p{position:relative; z-index:2; max-width:420px; font-size:15px; color:var(--sage); margin-bottom:38px;}
.final-cta .btn{position:relative; z-index:2;}

/* ---------- FOOTER ---------- */
footer{background:var(--rice-dim); color:var(--ink); padding:80px 0 30px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:60px; border-bottom:1px solid var(--line-dark);}
@media(max-width:1024px){.foot-grid{grid-template-columns:1fr 1fr; row-gap:44px;}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr; row-gap:40px;}}
.foot-brand .nav-logo{margin-bottom:16px;}
.foot-brand p{font-size:14px; color:var(--millet); max-width:220px; margin-bottom:22px;}
.foot-col h5{font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; opacity:0.6; margin-bottom:18px;}
.foot-col a{display:block; font-size:14px; margin-bottom:12px; opacity:0.8; color:var(--millet);}
.foot-col a:hover{opacity:1; color:var(--clay);}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:flex-start; padding-top:28px; flex-wrap:wrap; gap:20px;
  font-size:12.5px; color:var(--millet); opacity:0.85;
}
.foot-social{display:flex; gap:12px;}
.foot-social a{width:38px; height:38px; border-radius:12px; background:var(--turmeric); color:#fff; display:flex; align-items:center; justify-content:center; transition:background .3s var(--ease), transform .3s var(--ease);}
.foot-social a:hover{background:var(--clay); transform:translateY(-3px);}
.foot-social a svg{width:16px; height:16px;}
@media(max-width:480px){
  .foot-social a{width:36px; height:36px; border-radius:10px;}
  .foot-social a svg{width:14px; height:14px;}
}

/* ---------- WHATSAPP BUTTON ---------- */
.wa-btn{
  position:fixed; right:26px; bottom:26px; z-index:900; width:56px; height:56px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px -8px rgba(0,0,0,0.4);
}
@media(max-width:480px){
  .wa-btn{right:16px; bottom:16px; width:50px; height:50px;}
}
.wa-btn svg{width:26px; height:26px; fill:#fff;}
.wa-pulse{
  position:absolute; inset:0; border-radius:50%; background:#25D366; opacity:0.5;
  animation:pulseWA 2.6s ease-out infinite;
}
@keyframes pulseWA{0%{transform:scale(1); opacity:0.5;} 100%{transform:scale(1.9); opacity:0;}}

/* ---------- reveal utility ---------- */
.reveal{opacity:0; transform:translateY(50px);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* =====================================================
   SHARED INTERIOR-PAGE STYLES (shop / product / about /
   journal / contact / faq / policies)
   ===================================================== */

.nav-links a.active{opacity:1;}
.nav-links a.active::after{width:100%;}

/* ---------- page hero (banner) ---------- */
.page-hero{
  position:relative; min-height:44vh; display:flex; align-items:flex-end; overflow:hidden;
  background:var(--rice); color:var(--ink); padding-top:56px;
}
.page-hero .bg{position:absolute; top:8%; right:2%; bottom:8%; left:58%; border-radius:62% 38% 55% 45% / 45% 55% 45% 55%; overflow:hidden;}
.page-hero .bg img{width:100%; height:100%; object-fit:cover; opacity:0.95; filter:saturate(1.1) contrast(1.02);}
.page-hero .bg img.fit-contain{object-fit:contain;}
.page-hero .bg img.zoom-journal{transform:scale(1.15); transform-origin:center 55%;}
.page-hero .bg::after{content:'';}
.page-hero-content{position:relative; z-index:2; width:100%; padding:0 clamp(16px, 5vw, 80px) 56px; max-width:640px;}
.breadcrumb{
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--millet);
  margin-bottom:18px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.breadcrumb a{color:var(--clay);}
.breadcrumb a:hover{color:var(--ink);}
.page-hero h1{font-family:var(--serif); font-weight:800; font-size:clamp(36px,5.4vw,68px); line-height:1.02; letter-spacing:-0.01em; margin-bottom:16px; color:var(--ink);}
.page-hero p{font-size:15.5px; color:var(--millet); max-width:460px;}
@media(max-width:900px){
  .page-hero .bg{display:none;}
}

/* ---------- shop toolbar / filters ---------- */
.shop-toolbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin:56px 0 36px;}
.filter-tabs{display:flex; flex-wrap:wrap; gap:10px;}
.filter-tabs button{
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  padding:10px 20px; border:1.5px solid var(--line-dark); border-radius:20px; color:var(--millet); opacity:0.85;
  transition:all .3s var(--ease);
}
.filter-tabs button:hover{opacity:1; border-color:var(--turmeric);}
.filter-tabs button.active{background:var(--turmeric); color:#fff; border-color:var(--turmeric); opacity:1;}
.result-count{font-family:var(--mono); font-size:12px; font-weight:600; color:var(--millet); opacity:0.7;}
.p-price.real{font-size:21px; line-height:1.1; font-weight:800; color:var(--ink);}
.p-card-link{display:flex; flex-direction:column; height:100%; color:inherit;}
.empty-state{padding:80px 0; text-align:center; font-family:var(--mono); font-size:13px; opacity:0.55; letter-spacing:0.05em;}

/* ---------- product detail ---------- */
.product-detail{padding:min(6vw,70px) 0 min(9vw,90px);}
.pd-grid{display:grid; grid-template-columns:0.7fr 1fr; gap:70px; align-items:start;}
@media(max-width:1024px){.pd-grid{gap:40px;}}
.pd-media{
  position:sticky; top:80px; max-width:420px; aspect-ratio:1; overflow:hidden;
  background:radial-gradient(120% 120% at 30% 20%, #fff 0%, var(--blob2) 55%, var(--blob) 100%);
  border-radius:36px; padding:10%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
}
.pd-media img{width:100%; height:100%; object-fit:contain; object-position:center;}
.pd-media img.img-fallback{padding:16%; opacity:0.5;}
.pd-gallery{display:flex; gap:14px; margin-top:18px;}
.pd-thumb{width:76px; height:76px; border-radius:16px; overflow:hidden; border:2px solid transparent; opacity:0.6; transition:opacity .3s var(--ease), border-color .3s var(--ease); background:#fff; padding:6%; box-sizing:border-box;}
.pd-thumb img{width:100%; height:100%; object-fit:contain;}
.pd-thumb:hover{opacity:0.9;}
.pd-thumb.active{opacity:1; border-color:var(--turmeric);}
.pd-info .eyebrow{margin-bottom:12px;}
.pd-info h1{font-family:var(--serif); font-weight:800; font-size:clamp(30px,3.6vw,44px); margin-bottom:14px; letter-spacing:-0.01em; color:var(--ink);}
.pd-price{font-family:var(--serif); font-size:26px; font-weight:800; color:var(--turmeric); margin-bottom:22px;}
.pd-desc{font-size:15.5px; color:var(--millet); opacity:0.9; margin-bottom:30px; max-width:480px;}
.pd-qty{display:flex; align-items:center; border:1.5px solid var(--line-dark); border-radius:999px; width:fit-content; margin-bottom:22px; overflow:hidden;}
.pd-qty button{width:44px; height:46px; font-size:18px;}
.pd-qty span{width:44px; text-align:center; font-family:var(--serif); font-weight:700;}
.pd-actions{display:flex; gap:14px; margin-bottom:36px; flex-wrap:wrap;}
.pd-meta{display:grid; grid-template-columns:1fr 1fr; gap:16px; padding-top:26px; border-top:1px solid var(--line-dark); margin-bottom:8px;}
.pd-meta div span{display:block; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; opacity:0.6; margin-bottom:6px;}
.pd-tabs{border-top:1px solid var(--line-dark); margin-top:22px;}
.pd-tab-head{display:flex; gap:0; border-bottom:1px solid var(--line-dark); flex-wrap:wrap;}
.pd-tab-head button{padding:16px 0; margin-right:32px; font-size:13px; font-weight:600; letter-spacing:0.02em; text-transform:uppercase; opacity:0.55; position:relative; white-space:nowrap;}
@media(max-width:480px){
  .pd-tab-head button{padding:12px 8px; margin-right:16px; font-size:11px;}
}
.pd-tab-head button.active{opacity:1; color:var(--clay);}
.pd-tab-head button.active::after{content:''; position:absolute; left:0; bottom:-1px; width:100%; height:2px; background:var(--turmeric);}
.pd-tab-panel{display:none; padding:26px 0; font-size:14.5px; color:var(--millet); opacity:0.9; max-width:560px; line-height:1.75;}
.pd-tab-panel.active{display:block;}
.pd-tab-panel ul{padding-left:18px;}
.pd-tab-panel li{margin-bottom:8px;}
.related{padding:min(9vw,100px) 0;}
.toast{
  position:fixed; left:50%; bottom:36px; transform:translate(-50%,20px); z-index:2000; opacity:0;
  background:var(--ink); color:#fff; padding:15px 26px; border-radius:999px; font-size:13px; font-weight:600;
  letter-spacing:0.02em; pointer-events:none; transition:all .4s var(--ease); box-shadow:0 16px 34px -14px rgba(43,13,15,0.5);
}
.toast.show{opacity:1; transform:translate(-50%,0);}

/* ---------- about: values + timeline ---------- */
.about-values{padding:min(10vw,120px) 0;}

/* ---------- honeycomb hexagon grid ("What We Stand For") ---------- */
/* All 6 hexagons always sit on a single row, sized to fit whatever
   screen is available (no horizontal scrolling, nothing cut off). */
.hex-hive{
  --gap: clamp(6px, 1.4vw, 14px);
  --pad: clamp(16px, 5vw, 80px);
  --hexW: clamp(46px, calc((100vw - (2 * var(--pad)) - (5 * var(--gap))) / 6), 190px);
  --hexH: calc(var(--hexW) * 1.156);
  margin-top:90px; width:100%; overflow:visible;
  display:flex; flex-direction:column; align-items:center;
}
.hex-row{display:flex; flex-wrap:nowrap; gap:var(--gap); justify-content:center; width:100%; margin:0 auto; padding:0;}

.hex-item{
  position:relative; width:var(--hexW); height:var(--hexH); flex:0 0 auto;
  cursor:pointer; -webkit-user-select:none; user-select:none;
}
.hex-clip{
  position:absolute; inset:0; overflow:hidden; color:#fff;
  background:var(--hex-c, var(--ink));
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-shadow:0 20px 40px -26px rgba(43,13,15,0.55);
  transition:transform .4s var(--ease);
}
.hex-item:hover .hex-clip{transform:scale(1.035);}

.hex-face-photo{position:absolute; inset:0; opacity:1; transition:opacity .4s var(--ease);}
.hex-face-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.hex-face-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.62) 100%);
}
/* caption sits in the flat mid-band of the hex (25%-75% of the height) so
   the pointed top/bottom never clips a letter, at any hex size */
.hex-face-photo .hex-tag{
  position:absolute; left:14%; right:14%; bottom:27%; text-align:center; z-index:1;
  font-family:var(--mono); font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  font-size:calc(var(--hexW) * 0.044); color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.5); line-height:1.3;
}

/* badge-style photos (pre-made icon/stamp graphics on white): now treated
   exactly like the full-bleed photo hexes — image fills the entire hex,
   zoomed in past its own white margin, sharp with no faded/foggy blend */
.hex-face-photo.hex-face-badge img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  transform:scale(1.3); transform-origin:center;
}

.hex-overlay-bg{
  position:absolute; inset:0; background:var(--hex-c, var(--ink)); opacity:0;
  transition:opacity .4s var(--ease);
}

.hex-face-info{
  position:absolute; left:18%; right:18%; top:25%; bottom:25%; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  opacity:0; transform:translateY(10px); pointer-events:none; color:#fff;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.hex-face-info h3{
  font-family:var(--serif); font-weight:800; text-transform:uppercase; line-height:1.2;
  margin-bottom:6px; letter-spacing:0.01em; font-size:calc(var(--hexW) * 0.062);
}
.hex-face-info p{font-size:calc(var(--hexW) * 0.046); line-height:1.4; opacity:0.9; max-width:100%;}

.hex-item:hover .hex-face-photo,
.hex-item.is-active .hex-face-photo{opacity:0;}
.hex-item:hover .hex-overlay-bg,
.hex-item.is-active .hex-overlay-bg{opacity:0.94;}
.hex-item:hover .hex-face-info,
.hex-item.is-active .hex-face-info{opacity:1; transform:translateY(0); pointer-events:auto;}

.hex-hint{
  margin-top:30px;
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--millet); opacity:0.6; text-align:center;
}

@media(max-width:560px){
  .hex-hive{margin-top:50px; --hexW:64px;}
  .hex-row{flex-direction:column; align-items:stretch; flex-wrap:wrap; gap:22px;}
  .hex-item{
    width:100%; height:auto; display:flex; align-items:center; gap:16px;
  }
  .hex-clip{position:relative; inset:auto; flex:0 0 auto; width:var(--hexW); height:var(--hexH);}
  .hex-item .hex-face-photo{opacity:1 !important;}
  .hex-item .hex-tag{display:none;}
  .hex-overlay-bg{display:none;}
  .hex-face-info{
    position:static; flex:1; opacity:1 !important; transform:none !important; pointer-events:auto;
    display:flex; flex-direction:column; align-items:flex-start; text-align:left;
    color:var(--ink); /* sits on the page background here, not the dark hex, so back to dark text */
  }
  .hex-face-info h3{font-size:15px;}
  .hex-face-info p{font-size:13px; opacity:0.75;}
  .hex-hint{display:none;}
}


.timeline{padding:min(11vw,130px) 0; overflow:hidden;}
.journey-head{align-items:flex-end;}
.journey-head h2, .journey-head .eyebrow{color:var(--rice);}
.journey-head p{color:var(--rice); opacity:0.6; max-width:340px;}

.journey-track{position:relative; margin-top:64px; display:flex; align-items:flex-start; gap:22px;}
.journey-loco{
  flex:0 0 auto; width:54px; height:45px; color:var(--rice); opacity:0.5; margin-top:2px;
}
.journey-list{
  position:relative; flex:1; display:grid; grid-template-columns:repeat(5,1fr); gap:22px; z-index:1;
}
.journey-list::before{
  content:''; position:absolute; top:26px; left:10%; right:10%; z-index:0;
  border-top:2px dashed rgba(251,243,220,0.28);
}
.journey-item{display:flex; flex-direction:column; align-items:center; text-align:center;}
.ji-node{
  width:52px; height:52px; border-radius:50%; background:var(--rice); color:var(--clay);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; position:relative; z-index:2;
  box-shadow:0 10px 22px -8px rgba(0,0,0,0.45), 0 0 0 5px var(--ink);
}
.ji-node svg{width:22px; height:22px;}

/* clean white ribbon-tag milestone cards (matches the values cards above) */
.ji-card{
  width:100%; max-width:230px; box-sizing:border-box;
  background:#fff; border-radius:14px; padding:20px 18px 18px;
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  box-shadow:0 16px 30px -20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  transition:transform .35s var(--ease);
}
.journey-item:hover .ji-card{transform:translateY(-5px);}
.ji-card .t-year{
  display:inline-block; margin:-20px 0 12px -18px; padding:8px 18px 8px 14px;
  border-radius:0 8px 8px 0; font-family:var(--serif); font-size:15px; font-weight:800; color:#fff;
  box-shadow:0 8px 14px -8px rgba(0,0,0,0.5);
}
.ji-card h4{font-size:14px; font-weight:800; margin-bottom:6px; color:var(--ink); line-height:1.25;}
.ji-card p{font-size:12.5px; color:var(--millet); opacity:0.9; line-height:1.5;}

.journey-item:nth-child(5n+1) .ji-card .t-year{background:var(--clay);}
.journey-item:nth-child(5n+2) .ji-card .t-year{background:var(--turmeric);}
.journey-item:nth-child(5n+3) .ji-card .t-year{background:#2F8F4E;}
.journey-item:nth-child(5n+4) .ji-card .t-year{background:var(--clay);}
.journey-item:nth-child(5n+5) .ji-card .t-year{background:var(--turmeric);}

@media(max-width:900px){
  .journey-head{flex-direction:column; align-items:flex-start; gap:16px;}
  .journey-track{gap:14px; margin-top:44px;}
  .journey-loco{width:34px; height:28px; margin-top:2px;}
  .journey-list{
    display:flex; flex-direction:column; grid-template-columns:none; gap:0; padding-left:8px;
  }
  .journey-list::before{
    top:0; bottom:0; left:26px; right:auto; width:0; height:auto;
    border-top:none; border-left:2px dashed rgba(251,243,220,0.28);
  }
  .journey-item{flex-direction:row; text-align:left; align-items:flex-start; gap:18px; padding-bottom:28px;}
  .journey-item:last-child{padding-bottom:0;}
  .ji-node{flex:0 0 auto; margin-bottom:0;}
  .ji-card{align-items:flex-start; text-align:left;}
}
@media(max-width:480px){
  .ji-card{padding:18px 16px 16px;}
}

.stats-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line-dark); border-radius:28px; overflow:hidden;}
.stats-strip .stat{padding:44px 20px; text-align:center; background:var(--ink); color:#fff;}
.stats-strip .stat .s-val{font-family:var(--serif); font-size:clamp(28px,3.6vw,44px); font-weight:800; color:var(--turmeric); margin-bottom:8px;}
.stats-strip .stat .s-label{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; opacity:0.75;}

/* ---------- journal post ---------- */
.post-hero{padding:min(13vw,150px) 0 min(4vw,40px);}
.post-hero .eyebrow{margin-bottom:18px;}
.post-hero h1{font-family:var(--serif); font-weight:800; font-size:clamp(28px,4.4vw,50px); line-height:1.1; letter-spacing:-0.01em; max-width:900px; margin-bottom:22px; color:var(--ink);}
.post-meta{display:flex; gap:22px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; font-weight:600; opacity:0.65; text-transform:uppercase; letter-spacing:0.04em; color:var(--millet);}
.post-grid{display:grid; grid-template-columns:320px 1fr; gap:50px; align-items:start; padding-bottom:min(4vw,40px);}
.post-media{position:sticky; top:80px; aspect-ratio:3/4; background:linear-gradient(150deg,var(--blob2),var(--blob)); overflow:hidden; border-radius:28px;}
.post-media img{width:100%; height:100%; object-fit:contain;}
.post-body{max-width:720px; padding-bottom:min(9vw,90px);}
@media(max-width:1024px){
  .post-grid{grid-template-columns:1fr; gap:28px;}
  .post-media{position:static; aspect-ratio:3/4; width:100%; max-width:420px; margin:0 auto;}
}
@media(max-width:560px){.post-media{max-width:340px;}}
.post-body p{font-size:16.5px; line-height:1.85; color:var(--millet);; margin-bottom:24px;}
.post-body h2{font-family:var(--serif); font-weight:800; font-size:clamp(22px,2.8vw,30px); margin:44px 0 18px; color:var(--ink);}
.post-body ul{padding-left:22px; margin-bottom:24px;}
.post-body li{font-size:16px; color:var(--millet); margin-bottom:10px; line-height:1.7;}
.post-body blockquote{border-left:3px solid var(--turmeric); padding-left:22px; font-family:var(--serif); font-weight:600; font-size:20px; font-style:italic; margin:32px 0; color:var(--ink);}
.post-tags{display:flex; gap:10px; flex-wrap:wrap; margin-top:36px; padding-top:28px; border-top:1px solid var(--line-dark);}
.post-tags a{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; padding:8px 16px; border:1.5px solid var(--line-dark); border-radius:20px; opacity:0.85;}
.post-tags a:hover{opacity:1; border-color:var(--turmeric); color:var(--clay);}
.post-share{display:flex; gap:12px; align-items:center; margin-top:22px;}
.post-share a{width:36px; height:36px; border-radius:50%; background:var(--rice-dim); display:flex; align-items:center; justify-content:center; transition:background .3s var(--ease), color .3s var(--ease);}
.post-share a:hover{background:var(--turmeric); color:#fff;}
.post-share a svg{width:15px; height:15px;}

/* ---------- contact ---------- */
.contact-section{padding:min(6vw,70px) 0 min(11vw,120px);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px;}
@media(max-width:1024px){.contact-grid{gap:40px;}}
.info-cards{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:40px;}
@media(max-width:560px){.info-cards{grid-template-columns:1fr; gap:16px;}}
.info-card{padding:24px; background:#fff; border-radius:22px; box-shadow:0 14px 30px -24px rgba(43,13,15,0.3);}
.info-card .i-icon{width:24px; height:24px; margin-bottom:14px; color:var(--turmeric);}
.info-card h4{font-size:13px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; margin-bottom:8px; color:var(--ink);}
.info-card p{font-size:14px; color:var(--millet); opacity:0.85; line-height:1.6;}
.contact-map{aspect-ratio:16/10; background:var(--blob); border-radius:28px; overflow:hidden;}
@media(max-width:480px){
  .contact-map{border-radius:20px; font-size:11px; padding:16px;}
}
.form-field{margin-bottom:20px;}
.form-field label{display:block; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:9px; opacity:0.7;}
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding:14px 18px; border:1.5px solid var(--line-dark); background:#fff; font-family:var(--sans); font-size:14.5px; color:var(--ink); border-radius:14px;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{outline:none; border-color:var(--turmeric);}
.form-field.err input, .form-field.err textarea{border-color:#A11D22;}
.form-field .err-msg{display:none; font-size:11px; color:#A11D22; margin-top:8px; font-weight:600;}
.form-field.err .err-msg{display:block;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media(max-width:1024px){.form-row{grid-template-columns:1fr; gap:16px;}}
.form-submit{margin-top:6px;}
.form-success{display:none; margin-top:18px; padding:16px 20px; border-radius:16px; background:var(--blob3); font-size:13.5px; font-weight:500; color:var(--ink);}
.form-success.show{display:block;}

/* ---------- faq ---------- */
.faq-section{padding:min(6vw,70px) 0 min(11vw,120px);}
.faq-inner{max-width:820px; margin:0 auto;}
.faq-item{background:#fff; border-radius:20px; margin-bottom:12px; padding:0 24px;}
.faq-q{width:100%; text-align:left; padding:22px 0; display:flex; justify-content:space-between; align-items:center; font-family:var(--serif); font-weight:700; font-size:17px; gap:20px; color:var(--ink);}
.faq-q svg{flex:none; width:16px; height:16px; color:var(--turmeric); transition:transform .3s var(--ease);}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s var(--ease);}
.faq-a p{font-size:14.5px; color:var(--millet); opacity:0.9; padding-bottom:24px; max-width:640px; line-height:1.7;}
.faq-cats{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px;}

/* ---------- policies ---------- */
.policy-layout{display:grid; grid-template-columns:230px 1fr; gap:56px; padding:min(6vw,70px) 0 min(11vw,120px);}
@media(max-width:1024px){.policy-layout{gap:40px;}}
.policy-nav{position:sticky; top:80px; align-self:start;}
.policy-nav a{display:block; font-size:13px; font-weight:500; padding:9px 0; opacity:0.7; border-left:2px solid transparent; padding-left:16px;}
.policy-nav a:hover, .policy-nav a.active{opacity:1; border-color:var(--turmeric); color:var(--clay);}
.policy-block h2{font-family:var(--serif); font-weight:800; font-size:26px; margin-bottom:18px; color:var(--ink);}
.policy-block p{font-size:14.5px; color:var(--millet); opacity:0.9; margin-bottom:16px; line-height:1.75;}
.policy-block ul{padding-left:20px; margin-bottom:16px;}
.policy-block li{font-size:14.5px; color:var(--millet); opacity:0.9; margin-bottom:8px; line-height:1.6;}
.policy-block{padding-bottom:48px; border-bottom:1px solid var(--line-dark); margin-bottom:48px; scroll-margin-top:80px;}
.policy-block:last-child{border-bottom:none; margin-bottom:0;}

@media(max-width:1024px){
  .pd-grid{grid-template-columns:1fr; gap:36px;}
  .pd-media{position:static; max-width:none;}
  .contact-grid{grid-template-columns:1fr; gap:36px;}
  .values-grid{grid-template-columns:repeat(2,1fr); gap:20px;}
  .form-row{grid-template-columns:1fr;}
  .policy-layout{grid-template-columns:1fr;}
  .policy-nav{position:static; display:flex; overflow-x:auto; gap:18px; margin-bottom:10px; padding-bottom:10px;}
  .policy-nav a{padding:6px 0; white-space:nowrap;}
  .stats-strip{grid-template-columns:repeat(2,1fr);}
  .band, .final-cta{border-radius:32px;}
}
@media(max-width:640px){
  .values-grid{grid-template-columns:1fr; gap:16px;}
  .info-cards{grid-template-columns:1fr; gap:16px;}
  .stats-strip{grid-template-columns:1fr;}
}

/* ---------- graceful missing-image fallback ---------- */
.img-fallback{object-fit:contain !important; background:#fff;}

/* ---------- SEARCH OVERLAY ---------- */
.search-overlay{
  position:fixed; inset:0; z-index:2100;
  display:flex; align-items:flex-start; justify-content:center;
  padding:min(14vh,140px) 20px 40px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), visibility .3s;
}
.search-overlay.open{opacity:1; visibility:visible; pointer-events:auto;}
.search-overlay-backdrop{
  position:absolute; inset:0; background:rgba(43,13,15,0.5); backdrop-filter:blur(2px);
}
.search-panel{
  position:relative; width:100%; max-width:600px; max-height:78vh;
  background:var(--rice); border-radius:28px; overflow:hidden;
  box-shadow:0 40px 90px -20px rgba(43,13,15,0.5);
  display:flex; flex-direction:column;
  transform:translateY(-16px) scale(0.98); transition:transform .3s var(--ease);
}
.search-overlay.open .search-panel{transform:translateY(0) scale(1);}
.search-panel-head{
  display:flex; align-items:center; gap:14px; padding:20px 22px; border-bottom:1px solid var(--line-dark); flex-shrink:0;
}
.search-panel-head svg{flex-shrink:0; color:var(--millet); opacity:0.7;}
.search-input{
  flex:1; border:none; background:none; outline:none; font-family:var(--sans);
  font-size:16px; color:var(--ink); min-width:0;
}
.search-input::placeholder{color:var(--millet); opacity:0.55;}
.search-close{
  display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
  background:rgba(43,13,15,0.06); color:var(--ink); flex-shrink:0; transition:background .3s var(--ease);
}
.search-close:hover{background:var(--turmeric); color:#fff;}
.search-results{overflow-y:auto; padding:10px 12px 20px;}
.search-hint, .search-empty{padding:48px 20px; text-align:center; font-size:13.5px; color:var(--millet); opacity:0.7;}
.search-result-item{
  display:flex; align-items:center; gap:14px; padding:12px 10px; border-radius:16px;
  transition:background .2s var(--ease);
}
.search-result-item:hover, .search-result-item:focus-visible{background:rgba(43,13,15,0.06);}
.search-result-thumb{
  width:56px; height:56px; border-radius:12px; background:#fff; flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:6%; box-sizing:border-box;
}
.search-result-thumb img{width:100%; height:100%; object-fit:contain;}
.search-result-info{min-width:0; flex:1;}
.search-result-info h4{font-family:var(--serif); font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.search-result-info p{font-size:12.5px; color:var(--millet); opacity:0.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.search-result-price{font-family:var(--serif); font-weight:700; font-size:13.5px; color:var(--clay); flex-shrink:0;}
@media(max-width:600px){
  .search-overlay{padding:80px 12px 24px;}
  .search-panel{border-radius:22px; max-height:80vh;}
  .search-panel-head{padding:16px 16px;}
}

/* ---------- SCROLL TO TOP BUTTON ---------- */
.scroll-top-btn{
  position:fixed; right:31px; bottom:96px; z-index:900;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--rice);
  box-shadow:0 12px 28px -8px rgba(43,13,15,0.45);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .3s var(--ease);
}
.scroll-top-btn.visible{opacity:1; visibility:visible; transform:translateY(0);}
.scroll-top-btn:hover, .scroll-top-btn:focus-visible{background:var(--clay);}
.scroll-top-btn svg{width:20px; height:20px;}
@media(max-width:600px){
  .scroll-top-btn{right:20px; bottom:78px; width:42px; height:42px;}
}

/* ==========================================================
   Skyrah Impex catalogue update — product photography,
   stock states, enquiry form, data-driven company details
   ========================================================== */
[hidden]{display:none !important;}

/* product photos are portrait pack shots: fill the frame */
.p-media{aspect-ratio:3/4; padding:0; background:var(--blob);}
.p-media img{object-fit:cover; object-position:center;}
.p-media img.img-fallback{object-fit:contain; padding:22%; background:#fff;}
.p-out-tag{left:auto; right:12px; top:auto; bottom:12px; background:var(--ink); color:var(--rice);}
.p-card.is-out .p-media img{filter:grayscale(0.55); opacity:0.8;}
.pd-media{aspect-ratio:3/4; padding:0; background:var(--blob);}
.pd-media img{object-fit:cover;}
.pd-media img.img-fallback{object-fit:contain; padding:16%; background:#fff;}
.pd-thumb{padding:0;}
.pd-thumb img{object-fit:cover;}
.pd-thumb.active{opacity:1; border-color:var(--turmeric);}
.pd-mrp{font-size:15px; opacity:0.45; text-decoration:line-through; margin-left:8px; font-weight:600;}
.pd-stock{margin:-8px 0 20px; padding:12px 16px; border-radius:14px; background:#F7E1DF; color:var(--hero-green); font-size:13.5px; font-weight:500;}
.pd-tab-panel p + p{margin-top:12px;}
.pd-missing{text-align:center; padding:40px 0 20px;}
.pd-missing h1{font-family:var(--serif); font-weight:800; font-size:clamp(26px,3.6vw,40px); color:var(--ink); margin-bottom:12px;}
.pd-missing p{color:var(--millet); margin-bottom:26px;}
.empty-note{grid-column:1/-1; text-align:center; padding:40px 16px; color:var(--millet);}
.empty-note a{color:var(--clay); font-weight:600; text-decoration:underline;}

/* contact */
.info-card a{color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s; word-break:break-word;}
.info-card a:hover{border-bottom-color:currentColor;}
.info-card .info-link{display:inline-block; margin-top:6px; color:var(--clay); font-weight:600;}
.hp-field{position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden;}
.form-error{margin-top:18px; padding:16px 20px; border-radius:16px; background:#F7E1DF; font-size:13.5px; font-weight:500; color:var(--ink); line-height:1.6;}
.form-error a{color:var(--hero-green); font-weight:700; text-decoration:underline;}
.form-submit:disabled{opacity:0.7; cursor:wait;}

/* footer company block */
.foot-legal{line-height:1.8;}
.foot-legal a{color:inherit;}
.foot-legal a:hover{text-decoration:underline;}

/* "Shop by Range" cards are portrait pack photos: keep them a sensible size when scrolling sideways */
@media(max-width:900px){ .cat-card{min-width:42vw;} }
@media(max-width:560px){ .cat-card{min-width:68vw;} }

/* ===== Fit every screen: phones, tablets, laptops, large monitors ===== */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{overflow-x:hidden; padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);}
img,video,svg,iframe{max-width:100%;}
img{height:auto;}
.p-media img,.pd-media img,.pd-thumb img,.logo-img,.cat-card img,.j-media img,.post-media img{height:100%;}
table{display:block; max-width:100%; overflow-x:auto;}
h1,h2,h3,p,a{overflow-wrap:break-word;}
.product-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));}
.wa-btn{bottom:max(18px,env(safe-area-inset-bottom));}
@media(min-width:1025px){.product-grid{grid-template-columns:repeat(4,1fr);}.product-grid.cols-3{grid-template-columns:repeat(3,1fr);}}
@media(min-width:561px) and (max-width:1024px){.product-grid,.product-grid.cols-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.product-grid,.product-grid.cols-3{grid-template-columns:1fr;}}
@media(min-width:1600px){html{font-size:17px;}}
@media(max-width:380px){body{font-size:15px;}.nav{padding-left:14px;padding-right:14px;}}