:root{
  --bg:hsl(40 33% 97%);--bg-alt:hsl(38 34% 93%);--surface:hsl(40 44% 99%);
  --ink:hsl(150 18% 11%);--ink-soft:hsl(150 9% 33%);
  --brand:hsl(140 55% 28%);--brand-bright:hsl(140 60% 40%);--brand-deep:hsl(150 50% 18%);--brand-soft:hsl(140 40% 90%);
  --accent:hsl(35 92% 54%);--accent-soft:hsl(35 92% 90%);
  --line:hsl(40 18% 85%);--white:hsl(0 0% 100%);
  --shadow-sm:0 2px 12px hsl(150 20% 15%/.06);--shadow-md:0 18px 50px hsl(150 25% 15%/.12);--shadow-lg:0 30px 80px hsl(150 25% 12%/.18);
  --radius:16px;--radius-lg:28px;--maxw:1280px;
  --serif:'Archivo Expanded','Archivo',system-ui,sans-serif;--sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'Space Mono',ui-monospace,'SFMono-Regular',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}ul{list-style:none}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.container-narrow{max-width:880px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.1;letter-spacing:-.02em}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--brand);display:inline-flex;align-items:center;gap:.6em;margin-bottom:1rem}
.eyebrow::before{content:'';width:28px;height:2px;background:var(--brand-bright)}
.eyebrow.light{color:hsl(35 92% 68%)}.eyebrow.light::before{background:var(--accent)}
.muted{color:var(--ink-soft)}
.accent{color:var(--accent);font-style:normal}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.55em;background:var(--brand);color:var(--white);padding:.85em 1.7em;border-radius:99px;font-weight:700;font-size:.95rem;border:none;cursor:pointer;transition:transform .3s var(--ease),background .3s,box-shadow .3s;box-shadow:0 8px 22px hsl(140 55% 28%/.28)}
body.has-gsap .btn{transition:background .3s,box-shadow .3s}
.btn:hover{background:var(--brand-bright);transform:translateY(-3px);box-shadow:0 14px 30px hsl(140 55% 28%/.34)}
.btn-ghost{background:transparent;color:var(--brand);border:1.5px solid var(--brand);box-shadow:none}
.btn-ghost:hover{background:var(--brand);color:var(--white)}
.btn-accent{background:var(--accent);color:var(--ink);box-shadow:0 8px 22px hsl(35 92% 54%/.3)}
.btn-accent:hover{background:hsl(35 92% 48%)}
.btn-sm{padding:.6em 1.2em;font-size:.85rem}

/* Preloader */
#preloader{position:fixed;inset:0;z-index:9999;background:var(--brand);color:var(--white);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;transition:opacity .6s var(--ease),visibility .6s}
#preloader.done{opacity:0;visibility:hidden}
.loader-mark{font-family:var(--serif);font-size:clamp(2rem,8vw,4rem);letter-spacing:-.03em}
.loader-bar{width:180px;height:3px;background:hsl(0 0% 100%/.25);border-radius:99px;overflow:hidden}
.loader-bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .3s linear}

/* Page transition overlay */
#page-transition{position:fixed;inset:0;z-index:9500;background:var(--brand-deep);transform:translateY(100%);pointer-events:none}
#page-transition.cover{transform:translateY(0)}
#page-transition.reveal{transform:translateY(-100%)}

/* Header — solid by default */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);padding:14px 0;background:var(--surface);box-shadow:var(--shadow-sm);border-bottom:1px solid var(--line)}
.site-header.scrolled{background:hsl(40 44% 99%/.92);backdrop-filter:saturate(180%) blur(14px);box-shadow:var(--shadow-sm);padding:8px 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--brand)}
.brand img{height:46px;width:auto}
.nav-inner .brand span{display:none}
.nav-links{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.9rem)}
.nav-links>a{font-size:.93rem;font-weight:600;color:var(--ink-soft);position:relative;padding:4px 0;transition:color .3s}
.nav-links>a::after{content:'';position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--brand-bright);transition:width .35s var(--ease)}
.nav-links>a:hover,.nav-links>a.active{color:var(--brand)}
.nav-links>a:hover::after,.nav-links>a.active::after{width:100%}
.nav-links>a.nav-cta{
  color: var(--white);
  background: var(--brand);
  font-family: var(--sans);
  font-size: .85rem;
  padding: .65em 1.35em;
  border-radius: 99px;
  box-shadow: 0 8px 22px hsl(140 55% 28%/.28);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin-left: .4rem;
  transition: background .3s, transform .3s var(--ease), box-shadow .3s;
}
.nav-links>a.nav-cta::after{
  display: none !important;
}
.nav-links>a.nav-cta:hover{
  background: var(--brand-bright);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px hsl(140 55% 28%/.34);
}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:1100}
.nav-toggle span{width:26px;height:2px;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease),opacity .3s}
.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)}
.nav-backdrop{position:fixed;inset:0;background:hsl(150 30% 10%/.45);opacity:0;pointer-events:none;transition:opacity .4s;z-index:950}
.nav-backdrop.show{opacity:1;pointer-events:auto}

/* Page hero (inner pages) */
.page-hero{position:relative;padding:clamp(140px,18vw,200px) 0 clamp(60px,8vw,90px);overflow:hidden;color:var(--white);background:var(--brand-deep);text-shadow:0 2px 24px hsl(150 50% 8%/.35), 0 1px 3px hsl(150 50% 8%/.25)}
.page-hero .ph-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.85;transform:scale(1.05)}
.page-hero::after{content:'';position:absolute;inset:0;background:none}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{font-size:clamp(2.4rem,6vw,4.4rem);color:var(--white);max-width:14ch;margin-bottom:1rem}
.page-hero p{color:hsl(40 30% 90%);max-width:56ch;font-size:1.1rem}
.breadcrumb{display:flex;gap:.5rem;align-items:center;font-size:.85rem;color:hsl(40 25% 80%);margin-bottom:1.4rem}
.breadcrumb a:hover{color:var(--accent)}

/* Hero (home) */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding:130px 0 70px}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.4s var(--ease),transform 6s linear;transform:scale(1.15)}
.hero-bg .slide.active{opacity:1;animation:zoomOutHero 6s linear forwards}
@keyframes zoomOutHero {
  from { transform: scale(1.15); }
  to { transform: scale(1); }
}
.hero-bg::after{content:'';position:absolute;inset:0;background:none;box-shadow:none}
.hero-inner{position:relative;z-index:2;max-width:740px;color:var(--white);text-shadow:0 2px 24px hsl(150 50% 8%/.35), 0 1px 3px hsl(150 50% 8%/.25)}
.hero h1{font-size:clamp(2.8rem,7vw,5.4rem);color:var(--white);margin-bottom:1.2rem}
.hero h1 em, .hero h1 .accent{font-style:italic;color:hsl(35 92% 70%)}
.hero p{font-size:clamp(1.05rem,1.6vw,1.25rem);color:hsl(40 30% 92%);max-width:560px;margin-bottom:2.2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem}
.hero .btn-ghost{color:var(--white);border-color:hsl(0 0% 100%/.5)}
.hero .btn-ghost:hover{background:var(--white);color:var(--brand);border-color:var(--white)}
.hero-dots{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:10px}
.hero-dots button{width:10px;height:10px;border-radius:99px;border:none;background:hsl(0 0% 100%/.4);cursor:pointer;transition:width .4s var(--ease),background .3s}
.hero-dots button.active{width:30px;background:var(--accent)}

/* Marquee */
.marquee{background:var(--brand);color:var(--white);padding:18px 0;overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;gap:3rem;animation:scrollx 26s linear infinite}
.marquee span{font-family:var(--serif);font-style:italic;font-size:1.35rem;opacity:.92}
.marquee span::after{content:'•';margin-left:3rem;color:var(--accent)}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* Sections */
.section{padding:clamp(70px,10vw,130px) 0}
.section.alt{background:var(--bg-alt)}
.section.dark{background:var(--ink);color:var(--bg)}
.section.dark h2,.section.dark h3{color:var(--white)}
.section.dark .muted{color:hsl(40 20% 76%)}
.section-head{max-width:660px;margin-bottom:3.4rem}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head h2{font-size:clamp(2rem,4.5vw,3.4rem);margin-bottom:1rem}
.section-head p{color:var(--ink-soft);font-size:1.08rem}
.section.dark .section-head p{color:hsl(40 20% 78%)}

/* Pillars / value cards */
.grid{display:grid;gap:clamp(1.2rem,2.5vw,2rem)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* Glassmorphic cards */
.card{
  position:relative;
  background:linear-gradient(135deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.35) 100%);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,0.55);
  border-radius:var(--radius-lg);
  padding:2rem;
  overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
  box-shadow:
    0 4px 30px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.6);
}
.card::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:60%;height:100%;
  background:linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.45) 45%,
    rgba(255,255,255,0.7) 50%,
    rgba(255,255,255,0.45) 55%,
    transparent 80%
  );
  transition:left .8s var(--ease);
  pointer-events:none;
  z-index:2;
}
.card:hover::before{
  left:140%;
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:
    0 18px 50px rgba(31,122,63,0.12),
    0 4px 20px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.8);
  border-color:rgba(255,255,255,0.8);
}
.card .ico{
  display:grid;place-items:center;
  width:58px;height:58px;border-radius:16px;
  background:linear-gradient(135deg, rgba(31,122,63,0.15) 0%, rgba(31,122,63,0.08) 100%);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--brand);font-size:1.5rem;margin-bottom:1.2rem;
  border:1px solid rgba(31,122,63,0.12);
  transition:background .4s var(--ease),transform .4s var(--ease);
}
.card:hover .ico{
  background:linear-gradient(135deg, rgba(31,122,63,0.25) 0%, rgba(31,122,63,0.12) 100%);
  transform:scale(1.08);
}
.card h3{font-size:1.35rem;margin-bottom:.6rem;position:relative;z-index:1}
.card p{color:var(--ink-soft);font-size:.96rem;position:relative;z-index:1}

/* Dark glassmorphic variant */
.card.dark{
  background:linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  border-color:rgba(255,255,255,0.12);
  box-shadow:
    0 4px 30px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.card.dark::before{
  background:linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.08) 45%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.08) 55%,
    transparent 80%
  );
}
.card.dark:hover{
  box-shadow:
    0 18px 50px rgba(0,0,0,0.3),
    0 4px 20px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.2);
}

/* Split / about */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split-media{position:relative}
.split-media img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}

/* About Page Custom Portrait Video */
.about-video-wrapper {
  max-width: 350px;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0, 0, 0, 0.05);
  background: #000;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.about-video-wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.about-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}
.badge-float{position:absolute;bottom:-26px;left:-26px;background:var(--white);border-radius:var(--radius);padding:1.1rem 1.5rem;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:.9rem}
.badge-float strong{font-family:var(--serif);font-size:2.1rem;color:var(--brand);line-height:1}
.badge-float span{font-size:.82rem;color:var(--ink-soft);font-weight:600}
.prose p{color:var(--ink-soft);margin-bottom:1.1rem}
.feature-row{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.6rem}
.feature-row li{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:.95rem}
.feature-row i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand)}

/* Products */
.product-card{background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);transition:transform .5s var(--ease),box-shadow .5s var(--ease);display:flex;flex-direction:column}
.product-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-md)}
.product-thumb{aspect-ratio:1/1;overflow:hidden}
.product-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.product-card:hover .product-thumb img{transform:scale(1.08)}
.product-body{padding:1.4rem 1.5rem 1.7rem;display:flex;flex-direction:column;flex:1}
.product-body h3{font-size:1.3rem;margin-bottom:.4rem}
.product-body p{font-size:.92rem;color:var(--ink-soft);margin-bottom:1rem}
.product-body .btn{margin-top:auto;align-self:flex-start}
.tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);background:var(--brand-soft);padding:.3em .8em;border-radius:99px;align-self:flex-start;margin-bottom:.8rem}

/* Filter bar */
.filter-bar{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:2.6rem}
.filter-bar button{border:1.5px solid var(--line);background:var(--surface);color:var(--ink-soft);padding:.6em 1.3em;border-radius:99px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .3s}
.filter-bar button.active,.filter-bar button:hover{background:var(--brand);color:var(--white);border-color:var(--brand)}
.is-hidden{display:none!important}

/* Process / timeline */
.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;counter-reset:step}
.process-card{padding:2rem;border:1px solid hsl(0 0% 100%/.12);border-radius:var(--radius);transition:background .4s}
.process-card:hover{background:hsl(0 0% 100%/.04)}
.process-card .num{counter-increment:step;font-family:var(--serif);font-size:2.6rem;color:hsl(35 92% 60%);display:block;margin-bottom:.7rem}
.process-card .num::before{content:'0' counter(step)}
.process-card h3{color:var(--white);font-size:1.35rem;margin-bottom:.5rem}
.process-card p{color:hsl(40 20% 78%);font-size:.95rem}
.timeline{position:relative;max-width:820px;margin:0 auto;padding-left:2rem;border-left:2px solid var(--line)}
.timeline-item{position:relative;padding:0 0 2.6rem 1.6rem}
.timeline-item::before{content:'';position:absolute;left:-2.6rem;top:.2rem;width:16px;height:16px;border-radius:50%;background:var(--brand);border:3px solid var(--bg)}
.timeline-item .yr{font-family:var(--serif);font-size:1.5rem;color:var(--brand);margin-bottom:.3rem}
.timeline-item h3{font-size:1.2rem;margin-bottom:.3rem}
.timeline-item p{color:var(--ink-soft);font-size:.96rem}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
.stat .n{font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.6rem);color:var(--brand);line-height:1}
.section.dark .stat .n{color:hsl(35 92% 62%)}
.stat .l{font-size:.9rem;color:var(--ink-soft);font-weight:600;margin-top:.4rem}
.section.dark .stat .l{color:hsl(40 20% 78%)}

/* Testimonials */
.testi-stage{position:relative;max-width:820px;margin:0 auto;text-align:center;min-height:230px}
.testi-item{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease)}
.testi-item.active{opacity:1;position:relative}
.testi-item blockquote{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.4;margin-bottom:1.5rem}
.testi-item .who{font-weight:700;color:var(--brand)}
.testi-item .role{font-size:.88rem;color:var(--ink-soft)}
.testi-quote{font-family:var(--serif);font-size:6rem;color:var(--brand-soft);line-height:.5;margin-bottom:1rem}
.testi-dots{display:flex;gap:10px;justify-content:center;margin-top:2.4rem}
.testi-dots button{width:10px;height:10px;border-radius:99px;border:none;background:var(--line);cursor:pointer;transition:width .4s var(--ease),background .3s}
.testi-dots button.active{width:30px;background:var(--brand)}

/* Recipes */
.recipe-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.recipe-card .rc-img{aspect-ratio:16/10;overflow:hidden}
.recipe-card .rc-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.recipe-card:hover .rc-img img{transform:scale(1.06)}
.recipe-card .rc-body{padding:1.6rem}
.recipe-meta{display:flex;gap:1.2rem;font-size:.82rem;color:var(--ink-soft);margin:.5rem 0 1rem;font-weight:600}
.recipe-meta i{color:var(--brand)}
.recipe-cols{display:grid;grid-template-columns:1fr 1.4fr;gap:2rem;margin-top:1rem}
.recipe-cols h4{font-size:1.05rem;margin-bottom:.6rem;color:var(--brand)}
.recipe-cols ul,.recipe-cols ol{padding-left:1.2rem;color:var(--ink-soft)}
.recipe-cols ul{list-style:disc}.recipe-cols ol li,.recipe-cols ul li{margin-bottom:.5rem}

/* Accordion */
.accordion{max-width:820px;margin:0 auto}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:1.3rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-family:var(--serif);font-size:1.2rem;color:var(--ink)}
.acc-head i{transition:transform .4s var(--ease);color:var(--brand)}
.acc-item.open .acc-head i{transform:rotate(45deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.acc-body p{padding:0 0 1.3rem;color:var(--ink-soft)}

/* Blog */
.post-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.post-card .pc-img{aspect-ratio:16/10;overflow:hidden}
.post-card .pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.post-card:hover .pc-img img{transform:scale(1.06)}
.post-card .pc-body{padding:1.6rem;display:flex;flex-direction:column;flex:1}
.post-meta{font-size:.8rem;color:var(--brand);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.6rem}
.post-card h3{font-size:1.3rem;margin-bottom:.6rem}
.post-card p{color:var(--ink-soft);font-size:.94rem;margin-bottom:1rem}
.post-card .read{margin-top:auto;font-weight:700;color:var(--brand)}
.article{max-width:760px;margin:0 auto;padding:0 clamp(20px,5vw,40px);box-sizing:border-box}
.article p{margin-bottom:1.3rem;color:var(--ink-soft);font-size:1.08rem}
.article h2{font-size:1.8rem;margin:2.2rem 0 1rem}
.article h3{font-size:1.35rem;margin:1.8rem 0 .8rem}
.article img{max-width:100%;height:auto;border-radius:var(--radius);margin:1.6rem 0}
.article blockquote{border-left:3px solid var(--brand);padding-left:1.4rem;font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--ink);margin:1.6rem 0}

/* CTA */
.cta{padding:clamp(60px,9vw,110px) 0}
.cta-box{background:linear-gradient(120deg,var(--brand),var(--brand-deep));border-radius:var(--radius-lg);padding:clamp(2.5rem,6vw,5rem);text-align:center;color:var(--white);position:relative;overflow:hidden}
.cta-box::before{content:'';position:absolute;width:380px;height:380px;background:radial-gradient(circle,hsl(35 92% 60%/.35),transparent 70%);top:-120px;right:-80px}
.cta-box h2{font-size:clamp(2rem,4.5vw,3.2rem);color:var(--white);margin-bottom:1rem;position:relative}
.cta-box p{color:hsl(40 30% 92%);max-width:540px;margin:0 auto 2rem;position:relative}
.cta-box .btn{position:relative}

/* Contact / forms */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.contact-list li{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.contact-list i{display:grid;place-items:center;min-width:46px;height:46px;border-radius:14px;background:var(--brand-soft);color:var(--brand);font-size:1.1rem}
.contact-list strong{display:block;font-size:1.05rem}
.contact-list span{color:var(--ink-soft);font-size:.95rem}
form.cform{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,2.4rem);box-shadow:var(--shadow-sm)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.4rem}
.field input,.field textarea,.field select{width:100%;padding:.85em 1em;border:1.5px solid var(--line);border-radius:12px;font-family:inherit;font-size:.95rem;background:var(--bg);transition:border-color .3s,box-shadow .3s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.field textarea{min-height:130px;resize:vertical}
.field .err{color:hsl(0 65% 48%);font-size:.82rem;margin-top:.3rem;display:none}
.field.invalid input,.field.invalid textarea{border-color:hsl(0 65% 55%)}
.field.invalid .err{display:block}
.form-note{margin-top:1rem;font-size:.88rem;color:var(--brand);font-weight:600;display:none}
.form-note.show{display:block}
.map-embed{border:0;width:100%;height:340px;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}

/* Detail */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.detail-media img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.spec-list{margin:1.5rem 0}
.spec-list li{display:flex;gap:.7rem;padding:.5rem 0;color:var(--ink-soft)}
.spec-list i{color:var(--brand);margin-top:.2rem}
.steps{counter-reset:s;margin:1rem 0}
.steps li{counter-increment:s;position:relative;padding:0 0 1.2rem 3rem;color:var(--ink-soft)}
.steps li::before{content:counter(s);position:absolute;left:0;top:-.1rem;width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-family:var(--serif);font-weight:600;display:grid;place-items:center}

/* Footer */
.site-footer{background:var(--ink);color:hsl(40 20% 78%);padding:64px 0 30px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2.6rem;border-bottom:1px solid hsl(0 0% 100%/.1)}
.footer-brand{max-width:320px}
.footer-brand .brand{color:var(--white);margin-bottom:1rem}
.footer-brand p{font-size:.92rem}
.footer-social{display:flex;gap:.7rem;margin-top:1.2rem}
.footer-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:hsl(0 0% 100%/.08);color:var(--white);transition:background .3s,transform .3s}
.footer-social a:hover{background:var(--brand-bright);transform:translateY(-3px)}
.footer-col h4{color:var(--white);font-family:var(--sans);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem}
.footer-col a{display:block;padding:.35rem 0;font-size:.94rem;transition:color .3s}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:1.8rem;font-size:.85rem}
.footer-bottom a{color:var(--accent)}

/* Reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
body.has-gsap .reveal{transition:none!important}

/* Utility fixed */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--brand-bright),var(--accent));z-index:1200}
.to-top{position:fixed;right:22px;bottom:22px;z-index:900;width:50px;height:50px;border-radius:50%;border:none;background:var(--brand);color:var(--white);cursor:pointer;font-size:1.1rem;opacity:0;pointer-events:none;transform:translateY(20px);transition:opacity .4s,transform .4s var(--ease);box-shadow:var(--shadow-md)}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.whatsapp-float{position:fixed;left:22px;bottom:22px;z-index:900;width:56px;height:56px;border-radius:50%;background:hsl(142 70% 45%);color:var(--white);display:grid;place-items:center;font-size:1.5rem;box-shadow:var(--shadow-md);transition:transform .3s var(--ease)}
.whatsapp-float:hover{transform:scale(1.1) rotate(6deg)}

/* Responsive */
@media(max-width:1000px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3,.process-grid{grid-template-columns:1fr}
  .split,.contact-grid,.detail-grid,.recipe-cols{grid-template-columns:1fr}
  .split-media{order:-1}
  .footer-top{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1024px){
  .nav-toggle{display:flex}
  .nav-links{position:absolute;top:0;right:0;height:100vh;height:100dvh;width:min(82vw,360px);background:var(--surface);flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1.4rem;padding:100px 2.4rem 40px;box-shadow:var(--shadow-md);transform:translateX(100%);transition:transform .45s var(--ease);z-index:1050;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nav-links.open{transform:translateX(0)}
  .nav-links>a{font-size:1.25rem;font-family:var(--serif);color:var(--ink)}
  .nav-links>a.nav-cta{
    margin:.8rem 0 0;
    color:var(--white) !important;
    background:var(--brand);
    padding:.75em 1.5em;
    font-size:1rem;
    font-family:var(--sans) !important;
    border-radius:99px;
    box-shadow:0 8px 22px hsl(140 55% 28%/.28);
    align-self:stretch;
    justify-content:center;
  }
  .nav-links>a.nav-cta::after{
    display:none !important;
  }
}

@media(max-width:560px){
  .grid-4,.grid-2{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .badge-float{left:50%;transform:translateX(-50%);bottom:-22px}
  .hero-meta{gap:1.3rem}
  .hero-meta .m .v{font-size:1.25rem}
  .whatsapp-float{width:50px;height:50px;font-size:1.3rem}
  .to-top{width:46px;height:46px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}html{scroll-behavior:auto}}

/* ===== Premium upgrade additions ===== */
/* Display type tuned for Archivo Expanded */
h1,h2,h3,h4{font-weight:800;letter-spacing:-.02em;text-transform:none}
.eyebrow,.tag,.post-meta,.recipe-meta,.breadcrumb,.stat .l,.nav-links>a,.process-card .num,.story-step .idx{font-family:var(--mono)}
.stat .n,.story-step .idx{font-family:var(--mono);font-weight:700}
.eyebrow{letter-spacing:.28em}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* Background canvas layer */
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.hero .fx-canvas{opacity:1}
/* Warm canvas needs a readable scrim so the headline stays dominant */
.hero .hero-veil{display:none!important}

/* Refined hero */
.hero{background:var(--brand-deep)}
.hero-inner{max-width:920px}
.hero h1{font-size:clamp(2.9rem,8.5vw,6.4rem);line-height:.98;letter-spacing:-.035em;text-transform:uppercase}
.hero h1 em, .hero h1 .accent{font-style:normal;color:hsl(35 92% 66%);display:inline-block}
.hero .hero-kicker{font-family:var(--mono);font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:hsl(35 92% 70%);display:flex;gap:.8rem;align-items:center;margin-bottom:1.4rem}
.hero .hero-kicker::before{content:'';width:40px;height:1px;background:hsl(35 92% 66%)}
.hero-meta{display:flex;flex-wrap:wrap;gap:2.4rem;margin-top:2.6rem;border-top:1px solid hsl(0 0% 100%/.16);padding-top:1.6rem;max-width:560px}
.hero-meta .m{display:flex;flex-direction:column;gap:.2rem}
.hero-meta .m .v{font-family:var(--mono);font-size:1.5rem;color:#fff;font-weight:700}
.hero-meta .m .k{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:hsl(40 25% 78%)}
.hero-scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:hsl(40 25% 82%);display:flex;flex-direction:column;align-items:center;gap:.5rem}
.hero-scroll::after{content:'';width:1px;height:36px;background:linear-gradient(hsl(35 92% 66%),transparent);animation:scrolldn 1.8s var(--ease) infinite}
@keyframes scrolldn{0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top}60%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Split-text masked reveal — hidden ONLY once JS marks it ready (graceful fallback) */
.split-ready .split-line{display:block;overflow:hidden}
.split-ready .split-line>span{display:block;will-change:transform}
body:not(.has-gsap) .split-ready .split-line>span{transition:transform .9s var(--ease);transform:translateY(110%)}
.split-in .split-line>span{transform:translateY(0)}
[data-split]{overflow-wrap:break-word;word-break:break-word}
.hero h1,.page-hero h1{overflow-wrap:break-word}
.split-word{display:inline-block}

/* Magnetic buttons */
[data-magnetic]{will-change:transform}
[data-magnetic] .mag-inner{display:inline-flex;align-items:center;gap:.5em;will-change:transform}



/* Liquid-ink wipe overlay */
#ink-wipe, #ink-title { display: none !important; }
#ink-wipe.active ~ #ink-title,#ink-title.show{visibility:visible}
#ink-title span{font-family:var(--serif);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(2rem,7vw,5rem);color:#fff;text-align:center;padding:0 6vw}

/* Numeric preloader additions */
.loader-num{font-family:var(--mono);font-size:clamp(3rem,12vw,6rem);font-weight:700;color:#fff;line-height:1;letter-spacing:-.02em}
#preloader .loader-mark{font-size:clamp(1.1rem,4vw,1.6rem);letter-spacing:.3em;text-transform:uppercase;opacity:.7;font-family:var(--mono)}

/* Story scroll progress bar */
.story-progress{height:3px;background:hsl(0 0% 100%/.14);border-radius:99px;overflow:hidden;margin-top:1.5rem}
.story-progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--brand-bright),var(--accent))}



/* Trust / certification badges */
.trust-bar{display:flex;flex-wrap:wrap;gap:clamp(1.4rem,4vw,3rem);justify-content:center;align-items:center}
.trust-item{display:flex;align-items:center;gap:.7rem;font-weight:600;color:var(--ink-soft);font-size:.95rem}
.trust-item i{font-size:1.6rem;color:var(--brand)}
.section.dark .trust-item{color:hsl(40 20% 82%)}.section.dark .trust-item i{color:hsl(35 92% 62%)}

/* Signature: pinned ingredient-story timeline */
.story-pin{position:relative;min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,5vw,5rem)}
.story-text{position:relative;min-height:300px}
.story-step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0}
.story-step .idx{font-family:var(--serif);font-size:1.1rem;color:var(--accent);font-weight:600;letter-spacing:.1em;margin-bottom:.6rem}
.story-step h3{font-size:clamp(1.8rem,3.5vw,2.8rem);color:var(--white);margin-bottom:.8rem}
.story-step p{color:hsl(40 20% 80%);font-size:1.05rem;max-width:46ch}
.story-visual{position:relative;min-height:60vh;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.story-media{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0}
@media(max-width:900px){
  .story-pin{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;gap:1.5rem;height:100vh;min-height:100vh;align-items:center;padding:clamp(40px,8vw,70px) clamp(15px,4vw,25px)}
  .story-visual{order:1;position:relative;height:40vh;width:100%;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
  .story-text{order:2;position:relative;height:180px;width:100%;display:flex;align-items:center;justify-content:center}
  .story-step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;z-index:2;text-align:center}
  .story-step p{margin-inline:auto}
  .story-media{position:absolute;inset:0;opacity:0;background-size:cover;background-position:center;z-index:2;transition:transform .8s var(--ease)}
}

/* Newsletter */
.newsletter{background:linear-gradient(120deg,var(--brand-deep),var(--brand));color:var(--white)}
.newsletter h2{color:var(--white)}
.newsletter p{color:hsl(40 30% 90%)}
.newsletter-form{display:flex;gap:.6rem;flex-wrap:wrap;max-width:520px;margin-top:1.4rem}
.newsletter-form input{flex:1 1 220px;min-width:0;padding:.9em 1.1em;border-radius:99px;border:1.5px solid hsl(0 0% 100%/.3);background:hsl(0 0% 100%/.1);color:#fff;font-family:inherit;font-size:.95rem}
.newsletter-form input::placeholder{color:hsl(40 30% 85%)}
.newsletter-form input:focus{outline:none;border-color:var(--accent);background:hsl(0 0% 100%/.16)}
.newsletter-form.invalid input{border-color:hsl(8 80% 62%)}
.newsletter-note{margin-top:.8rem;font-size:.9rem;color:hsl(35 92% 75%);font-weight:600;display:none}
.newsletter-form.done ~ .newsletter-note{display:block}

/* Stockist locator */
.locator-search{max-width:460px;margin:0 auto 2.4rem;position:relative}
.locator-search input{width:100%;padding:.9em 1.1em .9em 2.8em;border-radius:99px;border:1.5px solid var(--line);background:var(--surface);font-family:inherit;font-size:.95rem}
.locator-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.locator-search i{position:absolute;left:1.1em;top:50%;transform:translateY(-50%);color:var(--brand)}
.locator-empty{text-align:center;color:var(--ink-soft);font-weight:600}

/* Nutrition table (product pages) */
.nutri{width:100%;border-collapse:collapse;margin:1rem 0;background:var(--surface);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.nutri th,.nutri td{text-align:left;padding:.8em 1.1em;border-bottom:1px solid var(--line);font-size:.95rem}
.nutri th{background:var(--brand-soft);color:var(--brand);font-family:var(--sans);font-weight:700}
.nutri tr:last-child td{border-bottom:none}
.nutri td:last-child{text-align:right;font-weight:600;color:var(--ink)}

/* Google Reviews Upgrade */
.reviews-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2.8rem;
  flex-wrap: wrap;
  text-align: center;
}
.reviews-rating-badge {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: .7rem 1.4rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: .8rem;
}
.reviews-rating-badge .stars {
  color: #ffa726;
  font-size: 1.1rem;
}
.reviews-rating-badge .num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--brand);
}
.reviews-rating-badge .count {
  font-size: .88rem;
  color: var(--ink-soft);
}
.testimonials-carousel {
  background: hsl(348 70% 14%); /* Deep premium maroon background */
  color: var(--white);
  padding: clamp(50px, 7vw, 90px) 0;
  position: relative;
  overflow: hidden;
}
.testimonials-carousel h2.white-text {
  color: var(--white) !important;
}
.testimonials-carousel .reviews-rating-badge {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--white);
}
.testimonials-carousel .reviews-rating-badge .num {
  color: var(--accent);
}
.testimonials-carousel .reviews-rating-badge .count {
  color: hsl(40 20% 80%);
}
.testimonial-slider-container {
  max-width: 840px;
  margin: 0 auto;
  position: relative;
}
.testimonial-slider {
  position: relative;
  min-height: 240px;
  display: grid;
  align-items: center;
}
.testimonial-slide {
  grid-area: 1 / 1 / 2 / 2;
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transform: translateX(40px);
  transition: opacity 0.22s ease, transform 0.22s var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 10px;
}
.testimonial-slide.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) !important;
}
.testimonial-slide.exit-left {
  opacity: 0;
  transform: translateX(-40px) !important;
}
.testimonial-slide.exit-right {
  opacity: 0;
  transform: translateX(40px) !important;
}
.testimonial-slide.enter-left {
  opacity: 0;
  transform: translateX(-40px);
}
.testimonial-slide.enter-right {
  opacity: 0;
  transform: translateX(40px);
}

.testimonial-quote {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 500;
  line-height: 1.55;
  color: hsl(40 30% 95%);
  margin-bottom: 1.8rem;
  max-width: 760px;
}
.testimonial-author {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  text-align: left;
}
.author-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.author-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
  font-family: var(--sans);
}
.author-avatar-wrap .google-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #4285f4;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.author-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.author-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--white);
  line-height: 1.2;
}
.author-meta {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: hsl(40 20% 75%);
}
.rating-stars {
  color: #ffa726;
  font-size: 0.8rem;
  margin-top: 0.1rem;
}
.testimonial-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.2rem;
}
.testimonial-nav button {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--white);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  transition: background 0.3s, border-color 0.3s, transform 0.2s;
}
.testimonial-nav button:hover {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
  transform: scale(1.05);
}
.testimonial-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}
.testimonial-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s;
  padding: 0;
}
.testimonial-dots button.active {
  width: 22px;
  border-radius: 99px;
  background: var(--accent);
}

/* Avatar Colors for placeholder initials */
.bg-purple { background: #ab47bc; }
.bg-blue { background: #42a5f5; }
.bg-green { background: #66bb6a; }
.bg-orange { background: #ffa726; }

/* WhatsApp Interactive Chat Widget */
.whatsapp-widget-container {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 1010;
  font-family: var(--sans);
}
/* Override simple whatsapp float style to hide it, since we inject our own */
a.whatsapp-float {
  display: none !important;
}
.whatsapp-float-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform .3s var(--ease), background .3s;
  border: none;
  position: relative;
}
.whatsapp-float-btn:hover {
  transform: scale(1.1) rotate(6deg);
  background: #20ba5a;
}
.whatsapp-float-btn .badge-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background: hsl(35 92% 54%);
  border: 2px solid var(--white);
  border-radius: 50%;
  animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(253, 153, 39, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(253, 153, 39, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(253, 153, 39, 0); }
}
.whatsapp-tooltip {
  position: absolute;
  left: 70px;
  bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: .5rem 1rem;
  border-radius: 12px;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  opacity: 0;
  transform: translateX(-15px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.whatsapp-tooltip.show {
  opacity: 1;
  transform: none;
}
.whatsapp-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent var(--line) transparent transparent;
}
.whatsapp-tooltip::after {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: -1px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent var(--surface) transparent transparent;
}
.whatsapp-chat-window {
  position: absolute;
  left: 0;
  bottom: 74px;
  width: 340px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.95);
  transform-origin: bottom left;
  transition: opacity .4s var(--ease), visibility .4s, transform .4s var(--ease);
  z-index: 1011;
}
.whatsapp-chat-window.open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.whatsapp-chat-header {
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: var(--white);
  padding: 1.1rem 1.3rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  position: relative;
}
.whatsapp-chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  padding: 2px;
  position: relative;
  flex-shrink: 0;
}
.whatsapp-chat-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
}
.whatsapp-chat-avatar .online-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 11px;
  height: 11px;
  background: #4caf50;
  border: 2px solid var(--white);
  border-radius: 50%;
}
.whatsapp-chat-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.whatsapp-chat-title h4 {
  font-size: .95rem;
  color: var(--white);
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
}
.whatsapp-chat-title span {
  font-size: .72rem;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--mono);
}
.whatsapp-chat-close {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 500;
  cursor: pointer;
  margin-left: auto;
  opacity: 0.8;
  transition: opacity .2s;
  line-height: 1;
  padding: .2rem;
}
.whatsapp-chat-close:hover {
  opacity: 1;
}
.whatsapp-chat-body {
  background: #efeae2;
  padding: 1.3rem;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.whatsapp-chat-bubble {
  background: var(--white);
  padding: .8rem 1rem;
  border-radius: 0 16px 16px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  position: relative;
  align-self: flex-start;
  max-width: 88%;
}
.whatsapp-chat-bubble p {
  font-size: .88rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}
.whatsapp-chat-time {
  display: block;
  font-family: var(--mono);
  font-size: .65rem;
  color: var(--ink-soft);
  text-align: right;
  margin-top: .4rem;
}
.whatsapp-quick-replies {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .2rem;
}
.whatsapp-quick-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--brand);
  padding: .65rem .85rem;
  border-radius: 12px;
  font-size: .82rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all .25s var(--ease);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
}
.whatsapp-quick-btn:hover {
  background: var(--brand-soft);
  border-color: var(--brand-bright);
  transform: translateX(4px);
}
.whatsapp-chat-footer {
  background: var(--surface);
  padding: .9rem 1.2rem;
  border-top: 1px solid var(--line);
}
.whatsapp-submit-btn {
  background: #25d366;
  color: var(--white);
  padding: .75rem 1.2rem;
  border-radius: 99px;
  font-weight: 700;
  font-size: .88rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: background .3s, transform .2s;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
}
.whatsapp-submit-btn:hover {
  background: #20ba5a;
  transform: translateY(-2px);
}
@media(max-width:480px) {
  .whatsapp-chat-window {
    width: calc(100vw - 44px);
  }
}

/* Banner style hero styles */
.hero.banner-style {
  margin-top: 74px;
  min-height: auto;
  display: block;
  padding: 0;
  background: var(--bg);
  overflow: visible;
}
.hero-banner-slider {
  position: relative;
  height: clamp(320px, 45vw, 540px);
  width: 100%;
  overflow: hidden;
  background: var(--bg-alt);
}
.hero-banner-slider .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-banner-slider .hero-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 10px;
}
.hero-content-under {
  position: relative;
  padding: clamp(40px, 7vw, 85px) 0;
  background: var(--bg);
  overflow: hidden;
}
.hero-inner-under {
  position: relative;
  z-index: 2;
  max-width: 920px;
  color: var(--ink);
}
.hero-inner-under h1 {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  color: var(--brand-deep);
  font-family: var(--serif);
  font-weight: 800;
}
.hero-inner-under h1 em, .hero-inner-under h1 .accent {
  font-style: normal;
  color: var(--accent);
  display: inline-block;
}
.hero-inner-under .hero-kicker {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--brand);
  display: flex;
  gap: .8rem;
  align-items: center;
  margin-bottom: 1.2rem;
  font-weight: 700;
}
.hero-inner-under .hero-kicker::before {
  content: '';
  width: 40px;
  height: 2px;
  background: var(--brand);
}
.hero-inner-under p {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 680px;
  margin-bottom: 2rem;
  line-height: 1.6;
}
.hero-inner-under .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.hero-inner-under .btn-ghost {
  color: var(--brand);
  border-color: var(--brand);
  background: transparent;
}
.hero-inner-under .btn-ghost:hover {
  background: var(--brand);
  color: var(--white);
  border-color: var(--brand);
}
.hero-inner-under .hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
  margin-top: 2.6rem;
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  max-width: 560px;
}
.hero-inner-under .hero-meta .m {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.hero-inner-under .hero-meta .m .v {
  font-family: var(--mono);
  font-size: 1.5rem;
  color: var(--brand);
  font-weight: 700;
}
.hero-inner-under .hero-meta .m .k {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}



/* --- THE NATIVE STICKY STACK --- */

.craft-chapters {
  position: relative;
  width: 100%;
  display: block !important;
  height: auto !important;
  overflow: visible !important; 
  transform: none !important;
  clip-path: none !important;
}

.chapter-stage {
  display: block;
  position: relative;
  width: 100%;
}

.chapter-fallback {
  display: none !important;
}

.chapter-stage-inner {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100vh;
  padding-top: 120px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
}

.chapter-meta {
  display: flex;
  justify-content: flex-start;
  gap: 3rem;
  align-items: center;
  z-index: 5;
  margin-bottom: 20px;
}

.chapter-count {
  display: none; /* Hidden on sticky stack since each slide has its own step number */
}

.chapter-slides {
  position: relative;
  width: 100%;
  display: block !important;
  height: auto !important;
  overflow: visible !important; 
  transform: none !important;
  clip-path: none !important;
}

.chapter-slide {
  position: -webkit-sticky !important; /* CRITICAL FOR iOS SAFARI */
  position: sticky !important;
  top: 0px !important; /* Must have px unit */
  height: 100svh !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  
  /* CRITICAL: Must have a solid background color to cover the previous slide */
  background-color: var(--ink) !important; 
  
  /* Reset any old GSAP or absolute positioning junk */
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Slide Stack Order */
.chapter-slide:nth-child(1) { z-index: 10 !important; }
.chapter-slide:nth-child(2) { z-index: 11 !important; }
.chapter-slide:nth-child(3) { z-index: 12 !important; }
.chapter-slide:nth-child(4) { z-index: 13 !important; }

.chapter-num {
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.8rem;
  display: block;
  z-index: 2;
  position: relative;
}

.chapter-ghost {
  position: absolute;
  left: -2%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  font-family: var(--serif);
  font-weight: 900;
  line-height: 1;
  font-size: clamp(100px, 15vw, 220px);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.chapter-title {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(36px, 5.5vw, 76px);
  line-height: 1.05;
  color: var(--white);
  margin-left: 0;
  text-transform: uppercase;
  max-width: 48%;
}

.chapter-desc {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 22px 0 0 0;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.8;
  color: hsl(40 20% 82%);
}

.chapter-thread {
  display: none;
}

.chapter-cta {
  align-self: flex-start;
  z-index: 15;
  position: relative;
  margin-top: 40px;
}

.chapter-img {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: clamp(240px, 28vw, 420px);
  height: auto;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.chapter-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Mobile Portrait Viewports (max-width: 991px) ---------- */
@media (max-width: 991px) {
  .craft-chapters, .chapter-slides {
    display: block !important;
    height: auto !important;
    overflow: visible !important; 
    transform: none !important;
    clip-path: none !important;
  }

  .chapter-stage-inner {
    padding-top: 80px;
    padding-bottom: 80px;
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    overflow: visible;
  }
  
  .chapter-meta {
    margin-bottom: 20px;
    flex-shrink: 0;
  }
  
  .chapter-slide {
    position: -webkit-sticky !important; /* CRITICAL FOR iOS SAFARI */
    position: sticky !important;
    top: 0px !important; /* Must have px unit */
    height: 100svh !important;
    width: 100% !important;
    background-color: #0d1310 !important; 
    z-index: 2 !important; /* Force it into a new stacking layer */
    
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    
    margin: 0 !important;
    transform: none !important; /* Clears residual GSAP styles */
  }

  /* Force stack order on mobile to match desktop layout stacking order */
  .chapter-slide:nth-child(1) { z-index: 10 !important; }
  .chapter-slide:nth-child(2) { z-index: 11 !important; }
  .chapter-slide:nth-child(3) { z-index: 12 !important; }
  .chapter-slide:nth-child(4) { z-index: 13 !important; }
  
  .chapter-img {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: clamp(160px, 52vw, 250px);
    height: clamp(160px, 52vw, 250px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    flex-shrink: 0;
    opacity: 1;
    display: block;
    z-index: 2;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
  }
  
  .chapter-title {
    margin-left: 0;
    font-size: clamp(26px, 6.5vw, 36px);
    line-height: 1.15;
    text-align: center;
    width: 100%;
    max-width: none;
    z-index: 2;
    flex-shrink: 0;
  }
  
  .chapter-desc {
    margin: 0 auto;
    font-size: clamp(14px, 3.8vw, 16px);
    line-height: 1.6;
    text-align: center;
    max-width: 360px;
    width: 100%;
    z-index: 2;
    flex-shrink: 0;
  }
  
  .chapter-ghost {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(60px, 18vw, 110px);
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.04);
    z-index: 0;
    text-align: center;
    width: 100%;
    opacity: 0.12;
    white-space: nowrap;
  }
  
  .chapter-cta {
    align-self: center;
    flex-shrink: 0;
    margin-top: 24px;
  }

  .page-hero-about .ph-bg {
    background-position: 62% center;
  }
  .recipes-grid {
    grid-template-columns: 1fr;
  }
  .recipe-card[style] {
    grid-column: auto !important;
  }
}

@media (min-width: 992px) {
  .page-hero-quality .ph-bg {
    background-image: url('../images/quality.webp') !important;
  }
  .page-hero-stockists .ph-bg {
    background-image: url('../images/stockists.webp') !important;
  }
  .page-hero-contact .ph-bg {
    background-image: url('../images/contact.webp') !important;
  }
}